/* Statistics token cards: the compact mobile visual language at tablet and desktop widths. */
@media (min-width: 761px) {
  html.arbital-readable-cards body.statistic-page main {
    width: calc(100% - 40px) !important;
    max-width: 1560px !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    table-layout: auto !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table thead {
    display: none !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    gap: 14px !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) {
    --stat-card-col-one: 43%;
    --stat-card-col-two: 73%;
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 43fr) minmax(0, 30fr) minmax(0, 27fr) !important;
    grid-template-rows: minmax(86px, auto) minmax(64px, auto) !important;
    grid-template-areas: "token ath gain" "call current time" !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 166px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    gap: 0 !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border: 1px solid var(--arbital-token-card-line) !important;
    border-radius: 17px !important;
    background: var(--arbital-token-card-surface) !important;
    background-image: var(--arbital-token-card-surface) !important;
    box-shadow: var(--arbital-token-card-shadow) !important;
    filter: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n):hover {
    border-color: rgba(68, 202, 231, .62) !important;
    background: var(--arbital-token-card-surface) !important;
    background-image: var(--arbital-token-card-surface) !important;
    box-shadow: inset 0 1px 9px rgba(131, 228, 248, .1), 0 12px 28px rgba(0, 0, 0, .28), 0 0 20px rgba(0, 189, 226, .09) !important;
    transform: translateY(-1px) !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n)::before,
  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 14px !important;
    bottom: 14px !important;
    width: 1px !important;
    height: auto !important;
    border: 0 !important;
    background: var(--arbital-token-card-divider) !important;
    pointer-events: none !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n)::before {
    left: var(--stat-card-col-one) !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n)::after {
    left: var(--stat-card-col-two) !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(n) {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    overflow: visible !important;
    white-space: normal !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #eaf4ff !important;
    font-size: 18px !important;
    font-weight: 760 !important;
    line-height: 1.15 !important;
    text-shadow: 0 2px 9px rgba(0, 0, 0, .38) !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(n)::before {
    content: attr(data-label) !important;
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 5px !important;
    color: #9ab8ce !important;
    background: transparent !important;
    font-size: 10px !important;
    font-weight: 780 !important;
    line-height: 1.2 !important;
    letter-spacing: .07em !important;
    text-transform: uppercase !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(1) {
    grid-area: token !important;
    justify-content: center !important;
    padding-left: 4px !important;
    padding-right: 18px !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(1)::before,
  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(4)::before {
    content: none !important;
    display: none !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(2) {
    grid-area: call !important;
    justify-content: flex-end !important;
    padding-left: 4px !important;
    padding-right: 18px !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(3) {
    grid-area: ath !important;
    padding-left: 20px !important;
    padding-right: 16px !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(5) {
    grid-area: current !important;
    padding-left: 20px !important;
    padding-right: 16px !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(5)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 20px !important;
    right: 16px !important;
    height: 1px !important;
    background: var(--arbital-token-card-divider) !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(4) {
    grid-area: gain !important;
    align-self: center !important;
    align-items: center !important;
    justify-content: center !important;
    width: calc(100% - 20px) !important;
    min-height: 54px !important;
    margin: 0 4px 0 16px !important;
    padding: 9px 8px !important;
    color: #42f2c6 !important;
    border: 1px solid rgba(0, 224, 182, .56) !important;
    border-radius: 11px !important;
    background: linear-gradient(125deg, rgba(0, 119, 91, .55), rgba(0, 62, 65, .52)) !important;
    box-shadow: inset 0 1px 10px rgba(6, 235, 181, .2), 0 0 15px rgba(0, 218, 164, .1) !important;
    font-size: clamp(24px, 2.5vw, 34px) !important;
    font-weight: 850 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -.035em !important;
    text-align: center !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(6) {
    grid-area: time !important;
    justify-content: flex-end !important;
    padding-left: 20px !important;
    padding-right: 6px !important;
    color: #d1deea !important;
    font-size: 15px !important;
    font-weight: 650 !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(7),
  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(8) {
    display: none !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) .metric-combo {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 4px !important;
    white-space: normal !important;
    line-height: inherit !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) .metric-combo > span:first-child {
    font-size: 18px !important;
    font-weight: 800 !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) .metric-combo > .metric-change {
    font-size: 13px !important;
    font-weight: 780 !important;
    line-height: 1.2 !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) .stat-positive { color: #29edb8 !important; }
  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) .stat-negative { color: #ff7597 !important; }

  html.arbital-readable-cards body.statistic-page #rows .dashboard-token {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .dashboard-token-avatar {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    flex: 0 0 56px !important;
    border-radius: 50% !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .dashboard-token-avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .dashboard-token-copy {
    min-width: 0 !important;
    flex: 1 !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .dashboard-token-copy strong {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    color: #f3f7ff !important;
    font-size: 19px !important;
    font-weight: 820 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .dashboard-token-ca {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    margin-top: 4px !important;
    color: #9ab8ce !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .dashboard-token-ca::before {
    content: none !important;
    display: none !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .token-card-inline-badges {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    min-width: 0 !important;
    margin: 6px 0 0 68px !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .token-card-chain {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    color: #f0b90b !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .token-card-chain svg {
    width: 15px !important;
    height: 15px !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .token-card-migrated,
  html.arbital-readable-cards body.statistic-page #rows .token-card-state {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 20px !important;
    padding: 3px 6px !important;
    border-radius: 6px !important;
    color: #72e9c8 !important;
    background: rgba(18, 135, 103, .24) !important;
    font-size: 8px !important;
    font-weight: 820 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .token-card-state.closed {
    color: #f29ab0 !important;
    background: rgba(151, 50, 83, .23) !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td[colspan] {
    grid-column: 1 / -1 !important;
    grid-row: 1 / -1 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px !important;
    text-align: center !important;
    font-size: 16px !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td[colspan]::before {
    content: none !important;
    display: none !important;
  }
}

/* Tablet: one generous card per row and larger touch targets. */
@media (min-width: 761px) and (max-width: 1199px) {
  html.arbital-readable-cards body.statistic-page main {
    width: calc(100% - 32px) !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) {
    --stat-card-col-one: 42%;
    --stat-card-col-two: 72%;
    grid-template-columns: minmax(0, 42fr) minmax(0, 30fr) minmax(0, 28fr) !important;
    grid-template-rows: minmax(96px, auto) minmax(68px, auto) !important;
    min-height: 180px !important;
    padding: 10px 16px !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .dashboard-token-avatar {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    flex-basis: 62px !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .dashboard-token-copy strong {
    font-size: 21px !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .token-card-inline-badges {
    margin-left: 74px !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(4) {
    min-height: 60px !important;
    font-size: clamp(28px, 4.2vw, 38px) !important;
  }
}

/* Desktop: one full-width token row, with the same glass card styling as mobile. */
@media (min-width: 1200px) {
  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table thead {
    display: block !important;
    margin: 0 0 14px !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table thead tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table thead tr > th:nth-child(n) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 36px !important;
    padding: 0 12px !important;
    gap: 5px !important;
    color: #afc5d7 !important;
    background: rgba(12, 34, 49, .78) !important;
    border: 1px solid #234759 !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    font-weight: 760 !important;
    letter-spacing: .035em !important;
    white-space: nowrap !important;
    cursor: pointer !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table thead th:hover,
  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table thead th:focus-visible {
    color: #effcff !important;
    border-color: #26d9bd !important;
    outline: 2px solid rgba(38, 217, 189, .34) !important;
    outline-offset: 2px !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table thead th[aria-sort='ascending'],
  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table thead th[aria-sort='descending'] {
    color: #45eac7 !important;
    background: #073e3d !important;
    border-color: #168a7c !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) {
    grid-template-columns: minmax(235px, 1.5fr) minmax(105px, .65fr) minmax(175px, 1.05fr) minmax(155px, .9fr) minmax(185px, 1.1fr) minmax(120px, .7fr) !important;
    grid-template-rows: minmax(100px, auto) !important;
    grid-template-areas: "token call ath gain current time" !important;
    min-height: 108px !important;
    padding: 8px 14px !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n)::before,
  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n)::after {
    content: none !important;
    display: none !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(n) {
    justify-content: center !important;
    padding: 8px 16px !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(n+2):nth-child(-n+6) {
    border-left: 1px solid var(--arbital-token-card-divider) !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(1) {
    grid-area: token !important;
    padding-left: 6px !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(2) {
    grid-area: call !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(3) {
    grid-area: ath !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(4) {
    grid-area: gain !important;
    align-self: center !important;
    width: calc(100% - 24px) !important;
    min-height: 58px !important;
    margin: 0 12px !important;
    padding: 8px 6px !important;
    font-size: clamp(25px, 2.15vw, 34px) !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(5) {
    grid-area: current !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(5)::after {
    content: none !important;
    display: none !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(6) {
    grid-area: time !important;
    padding-left: 16px !important;
  }

  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) .metric-combo {
    gap: 3px !important;
  }
}

@media (min-width: 1500px) {
  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) {
    grid-template-columns: minmax(270px, 1.6fr) minmax(120px, .7fr) minmax(205px, 1.08fr) minmax(175px, .92fr) minmax(215px, 1.12fr) minmax(135px, .72fr) !important;
    grid-template-rows: minmax(106px, auto) !important;
    min-height: 114px !important;
    padding: 8px 18px !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .dashboard-token-avatar {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    flex-basis: 62px !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .dashboard-token-copy strong {
    font-size: 21px !important;
  }

  html.arbital-readable-cards body.statistic-page #rows .token-card-inline-badges {
    margin-left: 74px !important;
  }
}

/* Keep large multipliers inside the narrow phone badge. */
@media (max-width: 760px) {
  html.arbital-readable-cards body.statistic-page.statistic-page .table-wrap.table-wrap table tbody#rows > tr:nth-child(n) > td:nth-child(4) {
    box-sizing: border-box !important;
    width: calc(100% - 6px) !important;
    min-width: 0 !important;
    margin-left: 6px !important;
    margin-right: 0 !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
    overflow: hidden !important;
    font-size: clamp(16px, 4.7vw, 20px) !important;
    letter-spacing: -.045em !important;
    white-space: nowrap !important;
  }
}