/* Gate.io vs MEXC — spot pair panel */

:root {
    --bg-base: #14171c;
    --bg-elevated: #1b1f26;
    --bg-card: rgba(28, 32, 40, 0.88);
    --bg-hover: rgba(236, 234, 228, 0.05);
    --bg-active: rgba(125, 163, 149, 0.16);
    --border-color: rgba(236, 234, 228, 0.08);
    --border-color-hover: rgba(236, 234, 228, 0.16);
    --border-active: rgba(125, 163, 149, 0.42);
    --text-primary: #eceae4;
    --text-secondary: #a3a19a;
    --text-muted: #7a7973;
    --accent: #7da395;
    --accent-hover: #91b5a8;
    --accent-green: #7eb89a;
    --accent-red: #d08f86;
    --accent-amber: #c9a66b;
    --chart-wash: #1b1f26;
    --header-bg: rgba(20, 23, 28, 0.82);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
    --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.28);
    --bid-bg: rgba(126, 184, 154, 0.12);
    --ask-bg: rgba(208, 143, 134, 0.12);
    --bid-bar: rgba(126, 184, 154, 0.15);
    --ask-bar: rgba(208, 143, 134, 0.15);
    --band-bg: rgba(201, 166, 107, 0.09);
    --band-line: rgba(201, 166, 107, 0.5);
    --knob-bg: #f7f4ee;
    --radius-sm: 8px;
    --radius-md: 12px;
    --header-h: 48px;
    --gutter: 16px;
    --transition-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --font-sans: 'IBM Plex Sans', 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
    color-scheme: dark;
}

[data-theme="light"] {
    --bg-base: #e4dfd4;
    --bg-elevated: #ece8df;
    --bg-card: #f6f3ec;
    --bg-hover: rgba(28, 27, 24, 0.05);
    --bg-active: rgba(42, 106, 84, 0.12);
    --border-color: rgba(40, 36, 28, 0.12);
    --border-color-hover: rgba(40, 36, 28, 0.22);
    --border-active: rgba(42, 106, 84, 0.42);
    --text-primary: #1a1915;
    --text-secondary: #4a473f;
    --text-muted: #6d695f;
    --accent: #2a6a54;
    --accent-hover: #1f5443;
    --accent-green: #17693f;
    --accent-red: #b5332b;
    --accent-amber: #8c6224;
    --chart-wash: #f1ede5;
    --header-bg: rgba(236, 232, 223, 0.9);
    --shadow-sm: 0 1px 2px rgba(40, 36, 28, 0.08);
    --shadow-md: 0 12px 28px rgba(40, 36, 28, 0.12);
    --bid-bg: rgba(23, 105, 63, 0.10);
    --ask-bg: rgba(181, 51, 43, 0.09);
    --bid-bar: rgba(23, 105, 63, 0.11);
    --ask-bar: rgba(181, 51, 43, 0.10);
    --band-bg: rgba(140, 98, 36, 0.08);
    --band-line: rgba(140, 98, 36, 0.45);
    --knob-bg: #ffffff;
    color-scheme: light;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-base);
    color: var(--text-primary);
    height: 100%;
    min-height: 720px;
    display: flex;
    flex-direction: column;
    font-size: 15px;
    line-height: 1.5;
    transition: background var(--transition-base), color var(--transition-base);
}

button {
    font: inherit;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
}

.bg-glow {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 48% at 12% -8%, rgba(125, 163, 149, 0.14) 0%, transparent 58%),
        radial-gradient(ellipse 48% 38% at 96% 8%, rgba(196, 176, 138, 0.08) 0%, transparent 52%);
    z-index: -1;
    pointer-events: none;
}

[data-theme="light"] .bg-glow {
    background:
        radial-gradient(ellipse 70% 48% at 12% -8%, rgba(42, 106, 84, 0.10) 0%, transparent 58%),
        radial-gradient(ellipse 48% 38% at 96% 8%, rgba(154, 126, 78, 0.10) 0%, transparent 52%);
}

/* ── Header ─────────────────────────────────────────────── */

.header {
    position: sticky;
    top: 0;
    z-index: 40;
    flex-shrink: 0;
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    background: var(--header-bg);
    border-bottom: 1px solid var(--border-color);
}

.header-inner {
    height: var(--header-h);
    padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.logo {
    width: 24px;
    height: 24px;
    display: block;
    flex-shrink: 0;
}

.logo-bg { fill: var(--bg-active); }
.logo-bid { fill: var(--accent-green); }
.logo-ask { fill: var(--accent-red); }

.brand h1 {
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tagline {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 2px 8px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    white-space: nowrap;
}

.header-actions {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Segmented control: intervals and book filters */
.seg {
    display: inline-flex;
    align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 2px;
    gap: 2px;
    flex-shrink: 0;
}

.seg button {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.seg button:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.seg button.active {
    background: var(--bg-active);
    color: var(--accent);
}

.interval-btn {
    font-family: var(--font-mono);
    font-weight: 500;
    min-width: 40px;
}

.ref-group button { padding-inline: 9px; }

.status-pill {
    --pill: var(--accent-green);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    color: var(--pill);
    background: color-mix(in srgb, var(--pill) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--pill) 26%, transparent);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: color var(--transition-base), background var(--transition-base), border-color var(--transition-base);
}

.status-pill[data-state="loading"] { --pill: var(--accent-amber); }
.status-pill[data-state="error"] { --pill: var(--accent-red); }

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.theme-switch {
    --switch-w: 48px;
    --switch-h: 26px;
    --knob: 20px;
    --inset: calc((var(--switch-h) - 2px - var(--knob)) / 2);
    position: relative;
    width: var(--switch-w);
    height: var(--switch-h);
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-elevated);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.theme-switch-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    z-index: 1;
    color: var(--text-muted);
    pointer-events: none;
    display: grid;
    place-items: center;
}

.theme-switch-icon svg { width: 12px; height: 12px; }
.theme-switch-sun { left: calc(var(--inset) + (var(--knob) - 12px) / 2); }
.theme-switch-moon { right: calc(var(--inset) + (var(--knob) - 12px) / 2); }

.theme-switch-knob {
    position: absolute;
    top: var(--inset);
    left: var(--inset);
    width: var(--knob);
    height: var(--knob);
    border-radius: 50%;
    background: var(--knob-bg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    transition: transform var(--transition-base);
    z-index: 2;
    pointer-events: none;
}

[data-theme="dark"] .theme-switch-knob {
    transform: translateX(calc(var(--switch-w) - 2px - var(--knob) - 2 * var(--inset)));
}

[data-theme="light"] .theme-switch-sun,
[data-theme="dark"] .theme-switch-moon {
    color: #1a1915;
    z-index: 3;
}

/* ── Mobile exchange switch (hidden on wide screens) ───── */

.venue-switch { display: none; }

/* ── Board ──────────────────────────────────────────────── */

.board {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 12px max(var(--gutter), env(safe-area-inset-right)) 12px max(var(--gutter), env(safe-area-inset-left));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    gap: 12px;
}

.venue {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(268px, 34%, 320px);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "head book"
        "chart book"
        "trades trades";
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

.venue-head {
    grid-area: head;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "id quote"
        "vol vol";
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    min-width: 0;
}

.venue-id {
    grid-area: id;
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.venue-head h2 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    white-space: nowrap;
}

.venue-pair {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.venue-vol {
    grid-area: vol;
    font-family: var(--font-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.venue-vol > span:first-child {
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 11px;
    margin-right: 4px;
}

.venue-quote {
    grid-area: quote;
    display: flex;
    align-items: center;
    gap: 8px;
}

.venue-price {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    transition: color 900ms ease-out;
}

.venue-price.tick-up { color: var(--accent-green); transition: none; }
.venue-price.tick-down { color: var(--accent-red); transition: none; }

.venue-change {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    white-space: nowrap;
}

.venue-change.up { color: var(--accent-green); background: var(--bid-bg); }
.venue-change.down { color: var(--accent-red); background: var(--ask-bg); }

/* ── Chart ──────────────────────────────────────────────── */

.chart-pane {
    grid-area: chart;
    position: relative;
    min-height: 0;
    background: var(--chart-wash);
    border-right: 1px solid var(--border-color);
}

/* Absolute so the chart's fixed-size canvas never props the grid track open */
.chart-container {
    position: absolute;
    inset: 0;
}

.venue-notice {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    background: var(--chart-wash);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
}

.venue-notice[hidden] { display: none; }

/* ── Order book ─────────────────────────────────────────── */

.book-pane {
    grid-area: book;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.pane-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 8px;
    min-height: 44px;
    padding: 6px 10px 6px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.pane-label .seg {
    letter-spacing: 0;
    text-transform: none;
}

.book-filters button {
    padding-inline: 9px;
}

.band {
    padding: 8px 14px 10px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.band-values {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.band-values small {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.8;
}

.band-plus { color: var(--accent-red); }
.band-minus { color: var(--accent-green); }

.band-total {
    margin-top: 5px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.band-meter {
    display: flex;
    gap: 2px;
    height: 4px;
    margin-top: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--bg-elevated);
}

.band-meter-ask {
    width: 50%;
    background: var(--accent-red);
    opacity: 0.75;
    transition: width var(--transition-base);
}

.band-meter-bid {
    flex: 1;
    background: var(--accent-green);
    opacity: 0.75;
}

.band.empty .band-meter-ask,
.band.empty .band-meter-bid { opacity: 0; }

.book {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.book-head,
.book-row,
.book-marker,
.book-mid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.book-head {
    grid-template-columns: 1fr auto 1fr;
    height: 32px;
    flex-shrink: 0;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Styled trigger with the native select laid invisibly on top: native picker on
   touch, and 16px on the select so iOS does not zoom when it opens */
.book-group {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px 2px 9px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.book-group::after {
    content: '';
    width: 5px;
    height: 5px;
    margin-top: -3px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.7;
}

.book-group:hover {
    color: var(--text-primary);
    border-color: var(--border-color-hover);
}

.book-group.grouped {
    color: var(--accent);
    background: var(--bg-active);
    border-color: var(--border-active);
}

.book-group:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.book-group select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-size: 16px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.book-head span:last-child,
.book-row span:last-child,
.book-marker span:last-child {
    text-align: right;
}

.book-rows {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color-hover) transparent;
}

.book-rows[hidden] { display: none; }

.book-rows > * { flex-shrink: 0; }

/* Asks grow upward from the mid row and stay anchored to it */
.book-asks {
    flex-direction: column-reverse;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 16px);
}

.book-bids {
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 16px);
    mask-image: linear-gradient(to top, transparent 0, #000 16px);
}

.book-rows::-webkit-scrollbar { width: 6px; }
.book-rows::-webkit-scrollbar-thumb {
    background: var(--border-color-hover);
    border-radius: 6px;
}
.book-rows::-webkit-scrollbar-track { background: transparent; }

/* --d is the level's relative size, drawn as a bar from the right edge */
.book-row {
    height: 24px;
    background-image: linear-gradient(to left, var(--row-bar) var(--d, 0%), transparent var(--d, 0%));
}

.book-row.ask { --row-bar: var(--ask-bar); color: var(--accent-red); }
.book-row.bid { --row-bar: var(--bid-bar); color: var(--accent-green); }
.book-row.in-band { background-color: var(--band-bg); }
.book-row.out { opacity: 0.55; }

.book-marker {
    grid-template-columns: auto 1fr;
    height: 22px;
    color: var(--accent-amber);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    border-top: 1px dashed var(--band-line);
    border-bottom: 1px dashed var(--band-line);
}

.book-mid {
    flex-shrink: 0;
    grid-template-columns: auto auto 1fr;
    height: 34px;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.book-mid-label {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.book-mid-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.book-mid-spread {
    text-align: right;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Trades ─────────────────────────────────────────────── */

.trades-pane {
    grid-area: trades;
    border-top: 1px solid var(--border-color);
    height: 224px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.trades-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

.trades-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-color: var(--border-color-hover);
}

.trades-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform var(--transition-base);
}

.trades-pane.collapsed { height: auto; }
.trades-pane.collapsed .trades-toggle svg { transform: rotate(180deg); }
.trades-pane.collapsed .pane-label { border-bottom: none; }
.trades-pane.collapsed .trades-head,
.trades-pane.collapsed .trades { display: none; }

.trades {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-color-hover) transparent;
}

.trades-head,
.trade-row {
    display: grid;
    grid-template-columns: 8ch 6.5ch repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.trades-head {
    height: 26px;
    flex-shrink: 0;
    color: var(--text-muted);
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.trade-row {
    height: 28px;
    color: var(--text-secondary);
}

.trades-head span:nth-child(n+3),
.trade-row span:nth-child(n+3) { text-align: right; }

.trade-row:hover { background: var(--bg-hover); }

.trade-row .side {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
}

.trade-row.buy .side { color: var(--accent-green); }
.trade-row.sell .side { color: var(--accent-red); }
.trade-row .usd { color: var(--text-primary); }

/* ── Footer ─────────────────────────────────────────────── */

.footer {
    flex-shrink: 0;
    min-height: 40px;
    width: 100%;
    padding: 0 max(var(--gutter), env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--gutter), env(safe-area-inset-left));
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.footer-sources {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.footer-venue {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    color: var(--text-secondary);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.footer-venue:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.footer-venue svg {
    width: 10px;
    height: 10px;
    opacity: 0.55;
}

.footer-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    transition: background var(--transition-base);
}

.footer-dot.ok { background: var(--accent-green); }
.footer-dot.stale { background: var(--accent-amber); }
.footer-dot.error { background: var(--accent-red); }

.footer-sep {
    width: 1px;
    height: 16px;
    background: var(--border-color-hover);
    flex-shrink: 0;
}

.footer-stats {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.footer-stat {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.footer-stat dd {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    color: var(--text-primary);
}

.footer-stat dd.wide { color: var(--accent-amber); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Stacked venues (tablet, small laptop) ─────────────── */

@media (max-width: 1180px) {
    html, body { height: auto; }
    body { min-height: 100vh; min-height: 100dvh; }
    .board {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-auto-rows: clamp(560px, 78vh, 720px);
    }
}

/* The header row holds brand, intervals and three controls; drop the redundant tag first */
@media (max-width: 960px) {
    .tagline { display: none; }
}

/* ── Phone ─────────────────────────────────────────────── */

@media (max-width: 760px) {
    :root { --gutter: 10px; }

    /* Two rows: brand and controls on top, intervals full width below */
    .header { position: relative; }
    .header-inner {
        height: auto;
        min-height: 52px;
        padding-top: 8px;
        padding-bottom: 8px;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand actions"
            "intervals intervals";
        gap: 8px;
    }
    .brand { grid-area: brand; }
    .header-actions { grid-area: actions; gap: 8px; }
    .interval-group { grid-area: intervals; justify-self: stretch; }
    .interval-btn { flex: 1; min-width: 0; padding-inline: 8px; }

    .venue-switch {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: stretch;
        gap: 6px;
        position: sticky;
        top: 0;
        z-index: 30;
        padding: 8px max(var(--gutter), env(safe-area-inset-right)) 8px max(var(--gutter), env(safe-area-inset-left));
        background: var(--header-bg);
        -webkit-backdrop-filter: blur(22px) saturate(140%);
        backdrop-filter: blur(22px) saturate(140%);
        border-bottom: 1px solid var(--border-color);
    }

    .venue-tab {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        padding: 7px 10px 8px;
        text-align: left;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        cursor: pointer;
        transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .venue-tab.active {
        background: var(--bg-active);
        border-color: var(--border-active);
        box-shadow: inset 0 0 0 1px var(--border-active);
    }

    .venue-tab-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
    }

    .venue-tab-name {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
        white-space: nowrap;
    }

    .venue-tab.active .venue-tab-name { color: var(--accent); }

    .venue-tab-change {
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        white-space: nowrap;
    }

    .venue-tab-change.up { color: var(--accent-green); }
    .venue-tab-change.down { color: var(--accent-red); }

    .venue-tab-price {
        font-family: var(--font-mono);
        font-size: 15px;
        font-weight: 600;
        line-height: 1.2;
        font-variant-numeric: tabular-nums;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .venue-gap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        padding: 0 2px;
        font-size: 11px;
        color: var(--text-muted);
    }

    .venue-gap b {
        font-family: var(--font-mono);
        font-size: 11.5px;
        font-weight: 600;
        color: var(--text-primary);
        font-variant-numeric: tabular-nums;
    }

    .venue-gap b.wide { color: var(--accent-amber); }

    .board {
        display: block;
        padding-top: 10px;
        padding-bottom: 16px;
    }

    .board[data-active="gate"] > .venue[data-venue="mexc"],
    .board[data-active="mexc"] > .venue[data-venue="gate"] { display: none; }

    .venue {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .venue-head {
        border-right: none;
        padding: 12px 14px;
    }

    .venue-price { font-size: 20px; }

    .chart-pane {
        flex: none;
        height: clamp(240px, 40vh, 360px);
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .book-pane {
        flex: none;
        height: 500px;
    }

    /* Let a finished book scroll hand off to the page on touch */
    .book-rows { overscroll-behavior: auto; }

    .trades-pane { height: auto; }
    .trades { overflow: visible; }

    .trades-head,
    .trade-row {
        grid-template-columns: 8ch 6.5ch repeat(3, minmax(0, 1fr));
        gap: 8px;
        font-size: 12px;
    }

    .footer {
        min-height: 0;
        flex-wrap: wrap;
        gap: 6px 14px;
        padding-top: 10px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    .footer-sep { display: none; }
}

@media (max-width: 460px) {
    .tagline,
    .status-pill { display: none; }
}

@media (max-width: 340px) {
    .brand h1 { display: none; }
}

/* ── Touch: finger-sized targets ───────────────────────── */

@media (pointer: coarse) {
    .seg button { min-height: 32px; }
    .book-group { padding-block: 5px; }
    .book-head { height: 40px; }
    .trades-toggle { width: 36px; height: 36px; }
    .theme-switch { --switch-w: 54px; --switch-h: 30px; --knob: 24px; }
    .footer-venue { padding: 8px 10px; }
    .trade-row:hover { background: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}