/* ===================================================================
   Design tokens — light theme (default values; dark overrides below)
   ===================================================================
   "Refined terminal" palette: a calm neutral canvas, hairline dividers,
   and ONE semantic accent per meaning. Profit green appears only on the
   numbers that matter — never as full-row fills. Dark mode is a
   token-only override so both themes stay in lockstep. */
:root {
    /* Surfaces — slate-tinted neutrals */
    --bg-page:       #f6f7f9;
    --bg-surface:    #ffffff;
    --bg-sunken:     #f1f3f6;
    --bg-elevated:   #ffffff;
    --bg-hover:      #eef1f6;
    --bg-active:     #e4e9f0;
    --bg-overlay:    rgba(15, 23, 42, 0.55);

    /* Text */
    --fg-primary:    #0f172a;
    --fg-secondary:  #334155;
    --fg-tertiary:   #64748b;
    --fg-muted:      #94a3b8;
    --fg-inverse:    #ffffff;

    /* Borders / dividers */
    --border-strong: #cbd5e1;
    --border:        #e2e8f0;
    --border-subtle: #eef2f7;

    /* Accent (interactive) */
    --accent:        #2563eb;
    --accent-hover:  #1d4ed8;
    --accent-fg:     #ffffff;
    --accent-soft:   rgba(37, 99, 235, 0.10);
    --accent-ring:   rgba(37, 99, 235, 0.35);

    /* Semantic — up / down / warn */
    --up:            #10b981;
    --up-strong:     #059669;
    --up-soft:       rgba(16, 185, 129, 0.12);
    --up-ring:       rgba(16, 185, 129, 0.35);

    --down:          #ef4444;
    --down-strong:   #dc2626;
    --down-soft:     rgba(239, 68, 68, 0.12);
    --down-ring:     rgba(239, 68, 68, 0.35);

    --warn:          #f59e0b;
    --warn-strong:   #b45309;
    --warn-soft:     rgba(245, 158, 11, 0.14);

    /* Premium highlight (use sparingly — ARB panel only) */
    --premium:       #0ea5e9;
    --premium-soft:  rgba(14, 165, 233, 0.10);

    /* Type — Archivo (a crisp grotesque with real character) for the UI
       chrome + uppercase micro-labels; a clean system stack for body copy;
       JetBrains Mono for every number. Archivo is Latin-only, so CJK falls
       through to the best system face and 中文 stays sharp on every OS. */
    --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Type scale — one ladder, mapped across every component */
    --fs-micro: 10px;   /* eyebrows, table headers, status labels */
    --fs-xs:    11px;
    --fs-sm:    12px;
    --fs-base:  13px;   /* body */
    --fs-md:    14px;
    --fs-lg:    16px;
    --fs-xl:    20px;
    --fs-2xl:   25px;   /* hero title, KPI value */

    /* Spacing scale — 4px base */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;

    /* Shadows — clipped to three tiers; kept soft in daylight */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.05), 0 4px 12px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.10);

    /* Radii */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-pill: 999px;
}

html[data-bs-theme="dark"] {
    /* Inspired by Linear / Bloomberg terminal — near-black with a blue tint */
    --bg-page:       #0a0c11;
    --bg-surface:    #11141c;
    --bg-sunken:     #0d1017;
    --bg-elevated:   #151923;
    --bg-hover:      #1a1f2c;
    --bg-active:     #222838;
    --bg-overlay:    rgba(0, 0, 0, 0.70);

    --fg-primary:    #e6ebf2;
    --fg-secondary:  #b7bfcd;
    --fg-tertiary:   #8a93a4;
    --fg-muted:      #5f6778;
    --fg-inverse:    #0a0c11;

    --border-strong: #2a3142;
    --border:        #1e2431;
    --border-subtle: #161b25;

    --accent:        #5b8def;
    --accent-hover:  #7aa1f3;
    --accent-soft:   rgba(91, 141, 239, 0.14);
    --accent-ring:   rgba(91, 141, 239, 0.35);

    --up:            #34d399;
    --up-strong:     #4ade80;
    --up-soft:       rgba(52, 211, 153, 0.13);
    --up-ring:       rgba(52, 211, 153, 0.32);

    --down:          #f87171;
    --down-strong:   #f87171;
    --down-soft:     rgba(248, 113, 113, 0.13);
    --down-ring:     rgba(248, 113, 113, 0.32);

    --warn:          #fbbf24;
    --warn-strong:   #fbbf24;
    --warn-soft:     rgba(251, 191, 36, 0.13);

    --premium:       #38bdf8;
    --premium-soft:  rgba(56, 189, 248, 0.10);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.40), 0 10px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55);
}

/* ===================================================================
   Base / resets
   =================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    background: var(--bg-page);
    color: var(--fg-primary);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

html[data-bs-theme="dark"] body { background: var(--bg-page); color: var(--fg-primary); }

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover { color: var(--accent-hover); text-decoration: none; }

.mono-text, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-accent { color: var(--accent) !important; }
.text-success { color: var(--up-strong) !important; }
.text-danger { color: var(--down-strong) !important; }
.text-warning { color: var(--warn-strong) !important; }
.text-muted { color: var(--fg-tertiary) !important; }
.text-subtle { color: var(--fg-muted) !important; }
.text-info { color: var(--accent) !important; }
.text-white { color: var(--fg-primary) !important; }

.tracking-wide { letter-spacing: 0.5px; }
.tracking-wider { letter-spacing: 1px; }
.numeric { font-variant-numeric: tabular-nums; }

/* Utility: hide element */
.is-hidden { display: none !important; }

/* ===================================================================
   Scrollbar polish
   =================================================================== */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--r-pill);
    border: 2px solid var(--bg-page);
}
::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }

/* ===================================================================
   Navbar
   =================================================================== */
.terminal-navbar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-5);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: saturate(150%) blur(8px);
}
html[data-bs-theme="dark"] .terminal-navbar { background: rgba(17, 20, 28, 0.82); }

.navbar-brand {
    color: var(--fg-primary) !important;
    font-family: var(--font-display);
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: 1px;
    display: inline-flex; align-items: center; gap: var(--sp-2);
}
.navbar-brand::before {
    content: "";
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--premium));
}

/* Nav links (source tabs) — quiet by default, accent when active */
.terminal-navbar .nav-link {
    color: var(--fg-tertiary);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 5px 12px;
    border-radius: var(--r-sm);
    transition: color 0.15s, background 0.15s;
}
.terminal-navbar .nav-link:hover { color: var(--fg-primary); background: var(--bg-hover); }
.terminal-navbar .nav-link.active { color: var(--accent); background: var(--accent-soft); }

/* ===================================================================
   Panels / Cards
   =================================================================== */
.terminal-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s, box-shadow 0.2s;
}

.terminal-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    transition: border-color 0.15s, box-shadow 0.2s, background 0.15s;
    box-shadow: var(--shadow-sm);
}
.terminal-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

/* ARB card — a single quiet left accent rail rather than a green wash */
.terminal-card.is-arb {
    border: 1px solid var(--border);
    box-shadow: inset 3px 0 0 var(--up), var(--shadow-sm);
    background: var(--bg-surface);
}
.terminal-card.is-arb:hover {
    border-color: var(--border-strong);
    box-shadow: inset 3px 0 0 var(--up), var(--shadow-md);
}

/* ===================================================================
   Hero header (page top)
   =================================================================== */
.hero-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--sp-5);
    padding: var(--sp-5) var(--sp-6);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-4);
}
@media (max-width: 992px) {
    .hero-header { grid-template-columns: 1fr; }
}

.hero-title-wrap { display: flex; flex-direction: column; gap: var(--sp-1); }
.hero-eyebrow {
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--fg-tertiary);
}
.hero-title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--fg-primary);
    margin: 0;
    letter-spacing: -0.2px;
}
.hero-subtitle {
    color: var(--fg-tertiary);
    font-size: var(--fs-sm);
    font-family: var(--font-mono);
}

.hero-controls {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

/* FX input group */
.fx-group {
    display: inline-flex;
    align-items: stretch;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    font-family: var(--font-mono);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.fx-group:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.fx-group-label {
    padding: 6px 10px;
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--fg-tertiary);
    text-transform: uppercase;
    background: transparent;
    border-right: 1px solid var(--border);
    display: inline-flex; align-items: center;
}
.fx-group input {
    border: 0 !important;
    background: transparent !important;
    color: var(--fg-primary) !important;
    font-family: var(--font-mono);
    font-weight: 600;
    padding: 6px 10px;
    width: 72px;
    outline: none;
    font-size: var(--fs-base);
}

/* KPI tiles */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--sp-3);
    margin-top: var(--sp-4);
}
.kpi {
    background: var(--bg-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
    position: relative;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s;
}
.kpi:hover { background: var(--bg-hover); }
.kpi-label {
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fg-tertiary);
    display: flex; align-items: center; gap: var(--sp-1);
}
.kpi-value {
    font-family: var(--font-mono);
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--fg-primary);
    line-height: 1.2;
    margin-top: var(--sp-1);
    font-variant-numeric: tabular-nums;
}
.kpi-delta {
    font-size: var(--fs-xs);
    color: var(--fg-tertiary);
    margin-top: 2px;
    font-family: var(--font-mono);
}
.kpi.is-up .kpi-value { color: var(--up-strong); }
.kpi.is-accent .kpi-value { color: var(--accent); }

/* ===================================================================
   Buttons
   =================================================================== */
.btn-terminal-action {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--fg-secondary);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 6px 12px;
    border-radius: var(--r-sm);
    transition: all 0.15s;
    cursor: pointer;
    line-height: 1;
}
.btn-terminal-action:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.btn-terminal-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.btn-terminal-action.is-primary,
.btn-terminal-action.btn-primary-solid {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
}
.btn-terminal-action.is-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: var(--accent-fg);
}
.btn-terminal-action:disabled,
.btn-terminal-action.disabled {
    opacity: 0.5; cursor: not-allowed;
    background: var(--bg-sunken);
}

.btn-theme-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    padding: 0;
    font-size: var(--fs-md);
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg-secondary);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: all 0.15s;
}
.btn-theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ===================================================================
   Inputs
   =================================================================== */
.terminal-input,
input.form-control {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--fg-primary) !important;
    font-family: var(--font-mono);
    border-radius: var(--r-sm) !important;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.terminal-input:focus,
input.form-control:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-ring) !important;
    outline: none !important;
}
.terminal-input::placeholder,
input.form-control::placeholder {
    color: var(--fg-muted) !important;
}

/* ===================================================================
   Badges
   =================================================================== */
.badge {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--r-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex; align-items: center;
    line-height: 1.2;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.badge.bg-success {
    background: var(--up-soft) !important;
    color: var(--up-strong) !important;
    border: 1px solid var(--up-ring);
}
.badge.bg-warning {
    background: var(--warn-soft) !important;
    color: var(--warn-strong) !important;
    border: 1px solid rgba(245, 158, 11, 0.3);
}
.badge.bg-danger {
    background: var(--down-soft) !important;
    color: var(--down-strong) !important;
    border: 1px solid var(--down-ring);
}
.badge.bg-secondary {
    background: var(--bg-sunken) !important;
    color: var(--fg-tertiary) !important;
    border: 1px solid var(--border);
}
.badge.bg-info {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border: 1px solid var(--accent-ring);
}
.badge.bg-dark {
    background: var(--bg-active) !important;
    color: var(--fg-primary) !important;
    border: 1px solid var(--border);
}
/* ARB tag — flat profit-green, no gradient/glow (was the loudest badge) */
.badge.bg-premium {
    background: var(--up-soft) !important;
    color: var(--up-strong) !important;
    border: 1px solid var(--up-ring);
    font-weight: 700;
    box-shadow: none;
}

.tag-sport {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 600;
    padding: 2px 7px;
    background: var(--bg-sunken);
    color: var(--fg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--r-xs);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ===================================================================
   Tables
   =================================================================== */
.terminal-table {
    width: 100%;
    color: var(--fg-primary);
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.terminal-table th {
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--fg-tertiary);
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    background: transparent;
    letter-spacing: 1px;
    white-space: nowrap;
}
.terminal-table td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    color: var(--fg-primary);
    font-size: var(--fs-sm);
}
.terminal-table tbody tr { transition: background 0.1s; }
.terminal-table tbody tr:hover td {
    background: var(--bg-hover);
}
.terminal-table tbody tr:last-child td { border-bottom: 0; }

/* Comparison-row status — quiet signals, not full-row color fills.
   `.is-arb-row` = a positive-margin row (thin green rail at the row start);
   `.is-suspicious` = an over-margin/likely-mismatch row (dimmed text). The
   margin/profit numbers already carry their own semantic color. */
.cmp-row.is-arb-row td:first-child { box-shadow: inset 2px 0 0 var(--up); }
.cmp-row.is-suspicious td { color: var(--fg-muted); }

/* Parlay row: B1/B2 超出 best-ask 深度时整行用 warn-soft 背景提示 */
.parlay-table tbody tr.parlay-depth-short td {
    background: var(--warn-soft);
}
.parlay-table tbody tr.parlay-depth-short:hover td {
    background: var(--warn-soft);
    filter: brightness(1.05);
}

/* ARB hero table — clean rows + hairline dividers (no green zebra) */
.arb-table tbody tr td { background: transparent; }
.arb-table tbody tr:hover td { background: var(--bg-hover); }

/* ===================================================================
   Segmented control (sport tabs)
   =================================================================== */
.segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: var(--sp-1);
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}
.segmented .compare-tab {
    border: 0;
    background: transparent;
    color: var(--fg-tertiary);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 6px 14px;
    border-radius: var(--r-sm);
    display: inline-flex; align-items: center; gap: var(--sp-1);
    cursor: pointer;
    transition: all 0.15s;
}
.segmented .compare-tab:hover {
    color: var(--fg-primary);
    background: var(--bg-hover);
}
.segmented .compare-tab.active {
    background: var(--bg-surface);
    color: var(--fg-primary);
    box-shadow: var(--shadow-sm);
}
.segmented .compare-tab .tab-count {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 700;
    padding: 1px 6px;
    background: var(--bg-active);
    color: var(--fg-tertiary);
    border-radius: var(--r-pill);
    min-width: 20px;
    text-align: center;
}
.segmented .compare-tab.active .tab-count {
    background: var(--accent-soft);
    color: var(--accent);
}
.segmented .compare-tab .tab-arb {
    background: var(--up-soft);
    color: var(--up-strong);
    border: 1px solid var(--up-ring);
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: var(--r-pill);
}

/* ===================================================================
   Filter pills (status filter bar)
   =================================================================== */
.filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-3);
    font-size: var(--fs-xs);
}
.filter-bar-label {
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fg-tertiary);
    margin-right: var(--sp-1);
}
.filter-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 4px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--fg-secondary);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 600;
    border-radius: var(--r-pill);
    cursor: pointer;
    user-select: none;
    transition: all 0.15s;
}
.filter-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.filter-pill.active {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
}
.filter-pill.active.is-up {
    background: var(--up-strong);
    border-color: var(--up-strong);
}
.filter-pill .pill-count {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    padding: 0 5px;
    background: var(--bg-sunken);
    color: var(--fg-tertiary);
    border-radius: var(--r-pill);
}
.filter-pill.active .pill-count {
    background: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.95);
}

/* ===================================================================
   Section / match card layout
   =================================================================== */
.section-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--sp-3);
    padding: var(--sp-4);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-3);
}
.stat-cell {
    padding: var(--sp-1) 2px;
}
.stat-cell .stat-label {
    font-family: var(--font-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--fg-tertiary);
}
.stat-cell .stat-value {
    font-family: var(--font-mono);
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--fg-primary);
    line-height: 1.15;
    margin-top: var(--sp-1);
}
.stat-cell.is-up .stat-value { color: var(--up-strong); }

/* Match card header (team row) */
.card-inner { padding: var(--sp-4) var(--sp-5); }
.match-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--sp-4);
    flex-wrap: wrap;
    margin-bottom: var(--sp-3);
}
.match-title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--fg-primary);
    letter-spacing: 0.1px;
    line-height: 1.35;
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-1);
}
.match-subtitle {
    font-size: var(--fs-xs);
    color: var(--fg-tertiary);
    font-family: var(--font-mono);
    margin-top: 2px;
}
.match-meta {
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-tertiary);
    line-height: 1.45;
}
.match-margin {
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--fg-primary);
    letter-spacing: -0.3px;
}
.match-margin.is-up { color: var(--up-strong); }

/* Compact row variant used for unmatched/low-priority cards */
.terminal-card.is-compact .card-inner { padding: var(--sp-2) var(--sp-4); }
.terminal-card.is-compact .match-header { margin-bottom: 0; }
.terminal-card.is-compact .match-title {
    font-size: var(--fs-sm); font-weight: 600;
}
.terminal-card.is-compact .match-subtitle,
.terminal-card.is-compact .match-meta,
.terminal-card.is-compact .match-margin { font-size: var(--fs-xs); }
.terminal-card.is-compact .terminal-table,
.terminal-card.is-compact .odds-summary {
    display: none;
}

/* Odds summary table inside each card — lightened header, more air */
.odds-summary th,
.odds-summary td {
    font-size: var(--fs-xs);
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-subtle);
}
.odds-summary th {
    background: var(--bg-sunken);
    color: var(--fg-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: var(--fs-micro);
}
.odds-summary td { font-family: var(--font-mono); }

.poly-link-row {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 5px 10px;
    margin: 6px 0 10px;
    background: var(--bg-sunken);
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    max-width: 100%;
}
.poly-link-row a {
    color: var(--fg-primary);
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.poly-link-row a:hover { color: var(--accent); }

/* Type labels in compare table (赔率, 让球, 大小) — neutral by design so
   they don't compete with the P&L colors. The bet *type* is reference
   information; only profit/margin earns color on a row. */
.type-badge {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--r-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-block;
    background: var(--bg-sunken);
    color: var(--fg-secondary);
    border: 1px solid var(--border);
}
.type-winner,
.type-total,
.type-spread,
.type-prop {
    background: var(--bg-sunken);
    color: var(--fg-secondary);
    border: 1px solid var(--border);
}

/* ===================================================================
   ARB hero panel — the single most important element on the page.
   Calm surface + one thin green top rule + green title. No radial glow,
   no stacked shadows: the panel earns attention through restraint.
   =================================================================== */
.arb-hero {
    position: relative;
    padding: var(--sp-5) var(--sp-5) var(--sp-2);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--sp-5);
    overflow: hidden;
}
.arb-hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--up);
}
.arb-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.arb-hero-title {
    display: flex; align-items: center; gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--up-strong);
    letter-spacing: 0.3px;
    margin: 0;
}
.arb-hero-title::before {
    content: "✦";
    font-size: var(--fs-md);
    color: var(--up);
}
.arb-hero-meta {
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    color: var(--fg-tertiary);
    letter-spacing: 0.2px;
}

.arb-table th,
.arb-table td { font-size: var(--fs-sm); padding: var(--sp-2) 10px; }
.arb-table th { background: transparent; }
.arb-table .arb-margin {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--up-strong);
}
.arb-table .arb-profit {
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--up-strong);
}

/* ===================================================================
   Freshness pills (MOS cache age indicator)
   =================================================================== */
.freshness {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 3px 10px;
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    font-weight: 500;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    letter-spacing: 0.3px;
}
.freshness::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}
.freshness[data-level="fresh"]   { color: var(--up-strong);   background: var(--up-soft);   border-color: var(--up-ring); }
.freshness[data-level="warm"]    { color: var(--warn-strong); background: var(--warn-soft); border-color: rgba(245,158,11,0.3); }
.freshness[data-level="stale"]   { color: var(--down-strong); background: var(--down-soft); border-color: var(--down-ring); }
.freshness[data-level="unknown"] { color: var(--fg-muted);    background: var(--bg-sunken); border-color: var(--border); }
.freshness-age { color: inherit; opacity: 0.85; }

/* ===================================================================
   Alerts / Empty states
   =================================================================== */
.alert {
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    padding: 10px 14px;
    border: 1px solid transparent;
}
.alert-success { background: var(--up-soft);   color: var(--up-strong);   border-color: var(--up-ring); }
.alert-danger  { background: var(--down-soft); color: var(--down-strong); border-color: var(--down-ring); }
.alert-warning { background: var(--warn-soft); color: var(--warn-strong); border-color: rgba(245,158,11,0.3); }
.alert-info    { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-ring); }

.empty-state {
    text-align: center;
    padding: var(--sp-6) var(--sp-5);
    color: var(--fg-tertiary);
    font-size: var(--fs-base);
    background: var(--bg-sunken);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-md);
}

/* ===================================================================
   Sub-section heading
   =================================================================== */
.sub-heading {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: var(--sp-5) 0 var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--fg-tertiary);
}
.sub-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}
.sub-heading .sub-heading-count {
    font-family: var(--font-mono);
    padding: 1px 8px;
    background: var(--bg-sunken);
    color: var(--fg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    font-size: var(--fs-micro);
    letter-spacing: 0.5px;
}

/* ===================================================================
   Price-flash animations
   =================================================================== */
@keyframes flashUp {
    0%   { background-color: var(--up-soft); }
    100% { background-color: transparent; }
}
@keyframes flashDown {
    0%   { background-color: var(--down-soft); }
    100% { background-color: transparent; }
}
.price-flash-up   { animation: flashUp 0.6s ease-out; }
.price-flash-down { animation: flashDown 0.6s ease-out; }

/* Shimmer / loading skeleton */
@keyframes pmShimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.skeleton-row, .skeleton-box {
    background: linear-gradient(90deg,
        var(--bg-hover) 0%, var(--bg-active) 50%, var(--bg-hover) 100%);
    background-size: 800px 100%;
    animation: pmShimmer 1.4s linear infinite;
    border-radius: var(--r-xs);
}
.skeleton-row { height: 28px; margin-bottom: 6px; }
.skeleton-box { height: 14px; }

/* ===================================================================
   WS stale state — dim data when WS disconnected
   =================================================================== */
tbody.ws-stale,
.terminal-card.ws-stale {
    opacity: 0.5;
    filter: grayscale(0.4);
    transition: opacity 0.3s, filter 0.3s;
}

/* ===================================================================
   Toasts
   =================================================================== */
.toast {
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    background: var(--bg-surface);
    color: var(--fg-primary);
    box-shadow: var(--shadow-lg);
    font-size: var(--fs-sm);
}

/* ===================================================================
   Mobile adjustments
   =================================================================== */
@media (max-width: 992px) {
    .hero-header { padding: var(--sp-4); }
    .kpi-row { grid-template-columns: repeat(2, 1fr); }
    .segmented { overflow-x: auto; max-width: 100%; }
    .arb-hero { padding: var(--sp-4) var(--sp-4) var(--sp-1); }
    .arb-table { display: block; overflow-x: auto; }
}

/* Bootstrap container-fluid: give the workspace breathing room and a
   sane max width so tables don't sprawl on ultra-wide monitors. */
.workspace-container { padding: var(--sp-3) var(--sp-4); max-width: 1680px; margin: 0 auto; }

/* ===================================================================
   Floating arbitrage calculator (mos_compare — all brands)
   =================================================================== */
.arb-calc-fab {
    position: fixed; left: 20px; bottom: 20px; z-index: 1050;  /* above sticky nav (100); below toast-root (1080) */
    display: inline-flex; align-items: center; gap: var(--sp-2);
    height: 48px; padding: 0 18px; border-radius: var(--r-pill);
    border: 1px solid var(--accent); background: var(--accent); color: #fff;
    font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.3px;
    box-shadow: var(--shadow-lg); cursor: pointer;
    transition: background .15s, box-shadow .2s, transform .1s;
}
.arb-calc-fab:hover { background: var(--accent-hover); transform: translateY(-1px); }
.arb-calc-fab:active { transform: scale(.97); }
.arb-calc-fab-icon { font-family: var(--font-mono); font-size: 20px; font-weight: 800; line-height: 1; }
.arb-calc-fab-label { white-space: nowrap; }
.arb-calc-fab.is-open { background: var(--bg-surface); color: var(--accent); border-color: var(--accent); }

.arb-calc-panel {
    position: fixed; left: 18px; bottom: 74px; z-index: 1050;  /* JS switches to top/left when dragged/restored */
    width: 248px; background: var(--bg-surface);
    border: 1px solid var(--border); border-radius: var(--r-md);
    box-shadow: var(--shadow-lg); font-family: var(--font-mono);
    overflow: hidden; user-select: none;
}
.arb-calc-panel[hidden] { display: none; }
.arb-calc-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-2) 10px; background: var(--bg-sunken); border-bottom: 1px solid var(--border);
    cursor: move; touch-action: none;  /* drag instead of scroll on touch */
}
.arb-calc-title { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--fg-tertiary); }
.arb-calc-close { border: 0; background: transparent; color: var(--fg-tertiary); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; }
.arb-calc-close:hover { color: var(--down); }
.arb-calc-body { padding: 10px; display: flex; flex-direction: column; gap: var(--sp-2); }
.arb-calc-field { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: 0; }
.arb-calc-label { font-size: var(--fs-xs); font-weight: 600; color: var(--fg-tertiary); white-space: nowrap; }
.arb-calc-input {
    width: 92px; background: var(--bg-sunken); border: 1px solid var(--border); color: var(--fg-primary);
    border-radius: var(--r-sm); font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: var(--fs-base); font-weight: 600; padding: 5px 8px; text-align: right;
    user-select: text; transition: border-color .15s, box-shadow .15s;
}
.arb-calc-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
.arb-calc-hint { font-size: var(--fs-xs); color: var(--fg-tertiary); text-align: center; padding: 2px 0; }
.arb-calc-out { display: flex; flex-direction: column; gap: 5px; border-top: 1px solid var(--border); padding-top: var(--sp-2); }
.arb-calc-out[hidden] { display: none; }
.arb-calc-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); }
.arb-calc-row > span:first-child { color: var(--fg-tertiary); }
.arb-calc-row > span:last-child { font-variant-numeric: tabular-nums; color: var(--fg-primary); }
.arb-calc-row-strong > span { font-weight: 700; }
/* higher specificity than `.arb-calc-row > span:last-child` so margin colors win */
.arb-calc-row > .arb-calc-margin.is-up { color: var(--up); }
.arb-calc-row > .arb-calc-margin.is-warn { color: var(--warn); }
.arb-calc-row > .arb-calc-margin.is-down { color: var(--down); }
@media (max-width: 992px) { .arb-calc-panel { width: 220px; } .arb-calc-input { width: 80px; } }

/* ===================================================================
   PWA / 手机适配 (iPhone)
   - 安全区 inset 全局生效:env() 在无刘海设备 / 桌面浏览器上为 0,
     所以下面这三条对桌面没有任何影响。
   - ≤600px:宽表格转堆叠卡片,对冲计算器变贴底抽屉,输入框 16px
     防 iOS 聚焦自动缩放。
   =================================================================== */

/* 安全区:black-translucent 状态栏会盖住内容;底部有 home indicator。 */
.terminal-navbar { padding-top: calc(var(--sp-3) + env(safe-area-inset-top)); }
#toast-root { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.arb-calc-fab { bottom: calc(20px + env(safe-area-inset-bottom)); }

@media (max-width: 600px) {
    .workspace-container { padding: var(--sp-2) var(--sp-3); }
    .terminal-navbar { padding-left: var(--sp-3); padding-right: var(--sp-3); }

    /* 防 iOS 聚焦自动放大:输入框字号必须 ≥16px */
    .arb-calc-input,
    .cmp-calc-mos-input,
    .hero-controls input { font-size: 16px; }
    /* 16px 字号下给 hero 数字输入框留够宽度,避免数值被裁切 */
    .hero-controls input { width: 92px; }

    /* 卡片模式下滚动包装层不再裁剪 */
    .table-scroll { overflow-x: visible; }

    /* ---- 宽表格 → 堆叠卡片 ---- */
    table.arb-table,
    table.cmp-table,
    table.odds-summary { display: block; }
    table.arb-table thead,
    table.cmp-table thead,
    table.odds-summary thead { display: none; }
    table.arb-table tbody,
    table.cmp-table tbody,
    table.odds-summary tbody { display: block; }
    table.arb-table tr,
    table.cmp-table tr,
    table.odds-summary tr {
        display: block;
        border: 1px solid var(--border);
        border-radius: var(--r-md);
        margin-bottom: var(--sp-3);
        padding: var(--sp-2) var(--sp-3);
        background: var(--bg-surface);
    }
    /* 默认:标签左 / 值右,紧凑一行 */
    table.arb-table td,
    table.cmp-table td,
    table.odds-summary td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        width: auto;
        text-align: right;
        border: 0;
        padding: 4px 0;
        white-space: normal;
    }
    table.arb-table td::before,
    table.cmp-table td::before,
    table.odds-summary td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        text-align: left;
        color: var(--fg-tertiary);
        font-family: var(--font-display);
        font-size: var(--fs-micro);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .4px;
    }
    /* 比赛名 = 卡片标题:整行、加粗、无标签 */
    table.arb-table td.card-title-cell {
        display: block;
        text-align: left;
        border-bottom: 1px solid var(--border-subtle);
        margin-bottom: var(--sp-2);
        padding-bottom: var(--sp-2);
    }
    table.arb-table td.card-title-cell::before { content: none; }
    /* 多子元素的格子(份/fee/实付、方向箭头行、让球/大小球的两行)改成
       「标签在上、值在下」,否则多个子元素会被 flex 排成一行。 */
    table.arb-table td.cmp-calc-poly,
    td[data-label="方向"],
    td[data-label="让球"],
    td[data-label="大小球"] {
        display: block;
        text-align: left;
    }
    table.arb-table td.cmp-calc-poly::before,
    td[data-label="方向"]::before,
    td[data-label="让球"]::before,
    td[data-label="大小球"]::before {
        display: block;
        margin-bottom: 2px;
    }

    /* ---- 对冲计算器 → 贴底抽屉 ----
       JS 会从 localStorage 还原桌面 top/left 行内样式,故用 !important 锁定。 */
    .arb-calc-panel {
        left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
        width: 100% !important; max-width: 100% !important;
        max-height: 70vh; overflow-y: auto;
        border-radius: var(--r-md) var(--r-md) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .arb-calc-head { cursor: default; touch-action: auto; }  /* 拖拽变 no-op;恢复触摸滚动手感 */
    .arb-calc-input { width: 40%; min-width: 96px; }
}