/* ══════════════════════════════════════════════════
       TOKENS — DARK
    ══════════════════════════════════════════════════ */
    [data-theme="dark"] {
        --bg:         #0a0b0d;
        --surface:    #111318;
        --surface-2:  #181c24;
        --surface-3:  #1f2530;
        --hover:      #242c38;
        --border:     rgba(255,255,255,0.055);
        --border-2:   rgba(255,255,255,0.10);
        --border-3:   rgba(255,255,255,0.17);
        --ink-1:      #eef2f7;
        --ink-2:      #7e93a8;
        --ink-3:      #3d5060;
        --emerald:    #10b981;
        --emerald-lo: rgba(16,185,129,0.10);
        --emerald-md: rgba(16,185,129,0.22);
        --rose:       #f43f5e;
        --rose-lo:    rgba(244,63,94,0.10);
        --amber:      #f59e0b;
        --sky:        #38bdf8;
        --sky-lo:     rgba(56,189,248,0.09);
        --shadow-1:   0 1px 2px rgba(0,0,0,0.6);
        --shadow-2:   0 4px 20px rgba(0,0,0,0.55);
        --shadow-3:   0 16px 50px rgba(0,0,0,0.75);
        --sticky-bg:  #111318;
        color-scheme: dark;
    }

    /* ══════════════════════════════════════════════════
       TOKENS — LIGHT
    ══════════════════════════════════════════════════ */
    [data-theme="light"] {
        --bg:         #f2f4f7;
        --surface:    #ffffff;
        --surface-2:  #f7f8fa;
        --surface-3:  #eff1f4;
        --hover:      #e8ecf1;
        --border:     rgba(0,0,0,0.07);
        --border-2:   rgba(0,0,0,0.11);
        --border-3:   rgba(0,0,0,0.18);
        --ink-1:      #0d1520;
        --ink-2:      #4a5e72;
        --ink-3:      #9aaab8;
        --emerald:    #059669;
        --emerald-lo: rgba(5,150,105,0.08);
        --emerald-md: rgba(5,150,105,0.18);
        --rose:       #e11d48;
        --rose-lo:    rgba(225,29,72,0.08);
        --amber:      #d97706;
        --sky:        #0284c7;
        --sky-lo:     rgba(2,132,199,0.08);
        --shadow-1:   0 1px 3px rgba(0,0,0,0.07);
        --shadow-2:   0 4px 16px rgba(0,0,0,0.09);
        --shadow-3:   0 16px 50px rgba(0,0,0,0.13);
        --sticky-bg:  #ffffff;
        color-scheme: light;
    }

    /* ══════════════════════════════════════════════════
       RESET & BASE
    ══════════════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    body {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: 13px;
        line-height: 1.55;
        color: var(--ink-1);
        background: var(--bg);
        min-height: 100vh;
        -webkit-font-smoothing: antialiased;
        transition: background 0.2s, color 0.2s;
    }

    /* ── Layout shell ── */
    .shell {
        max-width: 1640px;
        margin: 0 auto;
        padding: 0 28px 80px;
    }

    /* ══════════════════════════════════════════════════
       RESPONSIVE / MOBILE
    ══════════════════════════════════════════════════ */
    @media (max-width: 700px) {
        .shell { padding: 0 12px 60px; }
        .card { padding: 14px 14px; }

        /* topbar: hide wordmark text on medium-small screens */
        .wordmark-text { display: none; }
        .wordmark-dot  { margin-right: 2px; }

        /* controls: stack vertically, full width selects */
        .controls-row { flex-direction: column; align-items: stretch; gap: 10px; }
        .control-group { width: 100%; }
        .control-group select { min-width: 0; width: 100%; }
        .btn-row { margin-left: 0; justify-content: stretch; }
        .btn-row .btn { flex: 1; }

        /* results header: stack */
        .results-header { flex-direction: column; align-items: flex-start; gap: 8px; }
        .results-header .btn { width: 100%; justify-content: center; }

        /* fixtures table: tighten */
        .opt-cell { padding: 4px 3px; min-height: 38px; }
        .team-name { font-size: 10px; max-width: 80px; }
        .fixtures-table th, .fixtures-table td { padding: 4px 4px; }
        .wk-cell { width: 30px; padding: 4px 4px !important; }
    }

    /* ══════════════════════════════════════════════════
       TOPBAR
    ══════════════════════════════════════════════════ */
    .topbar {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--surface);
        border-bottom: 1px solid var(--border-2);
        box-shadow: var(--shadow-1);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .topbar-inner {
        max-width: 1640px;
        margin: 0 auto;
        padding: 0 28px;
        height: 56px;
        display: flex;
        align-items: center;
        gap: 24px;
    }

    /* wordmark */
    .wordmark {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-shrink: 0;
        margin-right: 8px;
    }

    .wordmark-dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        background: var(--emerald);
        box-shadow: 0 0 8px var(--emerald-md);
        animation: pulse-dot 2.5s ease-in-out infinite;
    }
    @keyframes pulse-dot {
        0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--emerald-md); }
        50% { opacity: 0.6; box-shadow: 0 0 4px var(--emerald-lo); }
    }

    .wordmark-text {
        font-family: 'Fraunces', serif;
        font-size: 17px;
        font-weight: 700;
        color: var(--ink-1);
        letter-spacing: -0.3px;
        line-height: 1;
    }

    .wordmark-sep {
        width: 1px;
        height: 18px;
        background: var(--border-2);
        flex-shrink: 0;
    }

    /* league dropdowns inside topbar */
    .league-selects {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-shrink: 0;
    }

    .league-select {
        font-family: 'Inter', sans-serif;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--ink-2);
        background: var(--surface-2);
        border: 1px solid var(--border-2);
        border-radius: 7px;
        padding: 5px 28px 5px 10px;
        cursor: pointer;
        white-space: nowrap;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 9px center;
        transition: border-color 0.15s, color 0.15s, background-color 0.15s;
        max-width: 200px;
    }
    .league-select:hover {
        border-color: var(--emerald);
        color: var(--ink-1);
    }
    .league-select:focus {
        outline: none;
        border-color: var(--emerald);
        box-shadow: 0 0 0 2px var(--emerald-lo);
    }

    .league-load-btn {
        font-size: 12.5px;
        padding: 5px 13px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* topbar right */
    .topbar-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        margin-left: auto;
    }

    .theme-toggle {
        width: 32px; height: 32px;
        border-radius: 8px;
        border: 1px solid var(--border-2);
        background: var(--surface-2);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: var(--ink-2);
        transition: all 0.18s;
    }
    .theme-toggle:hover { border-color: var(--emerald); background: var(--emerald-lo); }

    .wc-nav-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 11px;
        border-radius: 8px;
        border: 1px solid var(--border-2);
        background: var(--surface-2);
        color: var(--ink-2);
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
        transition: all 0.18s;
    }
    .wc-nav-link:hover {
        border-color: var(--emerald);
        background: var(--emerald-lo);
        color: var(--emerald);
    }

    /* ══════════════════════════════════════════════════
       PAGE CONTENT AREA
    ══════════════════════════════════════════════════ */
    .page-content {
        padding-top: 24px;
    }

    /* ══════════════════════════════════════════════════
       CARDS / PANELS
    ══════════════════════════════════════════════════ */
    .card {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 18px 22px;
        margin-bottom: 12px;
        box-shadow: var(--shadow-1);
        transition: background 0.2s, border-color 0.2s;
    }

    /* ══════════════════════════════════════════════════
       CONTROLS STRIP
    ══════════════════════════════════════════════════ */
    .controls-row {
        display: flex;
        gap: 14px;
        align-items: flex-end;
        flex-wrap: wrap;
    }

    .control-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .control-label {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 9.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.9px;
        color: var(--ink-3);
    }

    select {
        background: var(--surface-2);
        border: 1px solid var(--border-2);
        border-radius: 7px;
        padding: 7px 30px 7px 10px;
        color: var(--ink-1);
        font-family: 'Inter', sans-serif;
        font-size: 12.5px;
        cursor: pointer;
        outline: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%237e93a8' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 9px center;
        transition: border-color 0.15s, box-shadow 0.15s;
        min-width: 155px;
    }
    select:hover, select:focus { border-color: var(--emerald); box-shadow: 0 0 0 3px var(--emerald-lo); }

    input[type="file"] {
        background: var(--surface-2);
        border: 1px solid var(--border-2);
        border-radius: 7px;
        padding: 7px 10px;
        color: var(--ink-2);
        font-size: 12px;
        font-family: 'Inter', sans-serif;
    }

    /* ══════════════════════════════════════════════════
       BUTTONS
    ══════════════════════════════════════════════════ */
    .btn {
        font-family: 'Inter', sans-serif;
        font-weight: 600;
        font-size: 12.5px;
        cursor: pointer;
        border-radius: 7px;
        border: none;
        padding: 8px 16px;
        transition: all 0.15s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        line-height: 1;
        white-space: nowrap;
        letter-spacing: -0.1px;
    }

    #runNow {
        background: var(--emerald);
        color: #fff;
        box-shadow: 0 1px 8px var(--emerald-md);
    }
    #runNow:hover { filter: brightness(1.07); box-shadow: 0 3px 14px var(--emerald-md); transform: translateY(-1px); }
    #runNow:active { transform: none; filter: brightness(0.97); }
    #runNow:disabled { background: var(--surface-3); color: var(--ink-3); box-shadow: none; cursor: not-allowed; transform: none; filter: none; border: 1px solid var(--border-2); }

    #resetPage {
        background: transparent;
        color: var(--ink-2);
        border: 1px solid var(--border-2);
    }
    #resetPage:hover { border-color: var(--rose); color: var(--rose); background: var(--rose-lo); }

    .btn-row {
        display: flex;
        gap: 7px;
        align-items: center;
        margin-left: auto;
    }

    /* ══════════════════════════════════════════════════
       PROGRESS & STATUS
    ══════════════════════════════════════════════════ */
    #status-container { margin-top: 14px; }

    #simProgress {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        width: 100%;
        height: 2px;
        border-radius: 1px;
        border: none;
        overflow: hidden;
        margin-bottom: 7px;
        background: var(--border-2);
    }
    #simProgress::-webkit-progress-bar { background: var(--border-2); }
    #simProgress::-webkit-progress-value {
        background: linear-gradient(90deg, var(--emerald), #6ee7b7);
        transition: width 0.12s;
    }
    #simProgress::-moz-progress-bar { background: var(--emerald); }

    #status {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 10.5px;
        color: var(--ink-3);
        font-weight: 500;
        letter-spacing: 0.1px;
    }

    /* ══════════════════════════════════════════════════
       FIXTURE SECTIONS — ACCORDION
    ══════════════════════════════════════════════════ */
    details {
        margin-bottom: 7px;
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid var(--border);
        background: var(--surface);
    }
    details:focus-within { border-color: var(--border-2); }

    summary {
        font-family: 'Inter', sans-serif;
        font-size: 11.5px;
        font-weight: 600;
        cursor: pointer;
        padding: 10px 14px;
        background: var(--surface-2);
        color: var(--ink-2);
        list-style: none;
        display: flex;
        align-items: center;
        gap: 8px;
        user-select: none;
        letter-spacing: 0.1px;
        transition: background 0.15s, color 0.15s;
    }
    summary::-webkit-details-marker { display: none; }
    summary:hover { background: var(--hover); color: var(--ink-1); }

    .summary-chevron {
        color: var(--emerald);
        font-size: 8px;
        transition: transform 0.18s;
        flex-shrink: 0;
        line-height: 1;
    }
    details[open] .summary-chevron { transform: rotate(90deg); }

    .summary-badge {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 9.5px;
        background: var(--surface-3);
        border: 1px solid var(--border-2);
        color: var(--ink-3);
        padding: 2px 6px;
        border-radius: 20px;
        margin-left: auto;
        letter-spacing: 0.2px;
    }

    /* ══════════════════════════════════════════════════
       FIXTURES TABLE
    ══════════════════════════════════════════════════ */
    .fixtures-table {
        width: 100%;
        border-collapse: collapse;
    }

    .fixtures-table th {
        background: var(--surface-2);
        color: var(--ink-3);
        padding: 7px 10px;
        text-align: left;
        border-bottom: 1px solid var(--border-2);
        font-family: 'IBM Plex Mono', monospace;
        font-size: 9px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.8px;
    }

    .fixtures-table td {
        padding: 3px 5px;
        border-bottom: 1px solid var(--border);
        vertical-align: middle;
    }
    .fixtures-table tr:last-child td { border-bottom: none; }
    .fixtures-table tbody tr:hover { background: var(--surface-2); }

    .wk-cell {
        padding: 8px 10px !important;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 10.5px;
        font-weight: 500;
        color: var(--ink-3);
        width: 44px;
        text-align: center;
    }

    /* ══════════════════════════════════════════════════
       OUTCOME CELLS (H / D / A)
    ══════════════════════════════════════════════════ */
    .opt-cell {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2px;
        cursor: pointer;
        padding: 6px 5px;
        border-radius: 6px;
        border: 1px solid var(--border-2);
        transition: border-color 0.13s, background 0.13s, box-shadow 0.13s;
        background: var(--surface-2);
        min-height: 46px;
        color: var(--ink-1);
        width: 100%;
    }
    .opt-cell:hover { border-color: var(--emerald); background: var(--emerald-lo); }
    .opt-cell input[type="radio"] { display: none; }
    .opt-cell:has(input:checked) {
        background: var(--emerald) !important;
        color: #fff !important;
        border-color: var(--emerald) !important;
        box-shadow: 0 0 0 2px var(--emerald-md);
    }
    .opt-cell:has(input:checked) .small-val { color: rgba(255,255,255,0.72); }

    .team-name {
        font-size: 11px;
        font-weight: 600;
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 115px;
        display: block;
    }

    .small-val {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 9.5px;
        font-weight: 500;
        color: var(--ink-3);
        display: block;
        letter-spacing: -0.2px;
    }

    /* ══════════════════════════════════════════════════
       INFO / ANALYTICS BUTTON
    ══════════════════════════════════════════════════ */
    .info-btn {
        width: 28px; height: 28px;
        border-radius: 50%;
        border: 1px solid var(--border-2);
        background: var(--surface-2);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        color: var(--sky);
        transition: all 0.15s;
        font-size: 13px;
        font-family: Georgia, serif;
        font-style: italic;
        font-weight: bold;
        line-height: 1;
    }
    .info-btn:hover { background: var(--sky-lo); border-color: var(--sky); }

    /* ══════════════════════════════════════════════════
       RESULTS AREA
    ══════════════════════════════════════════════════ */
    .results-header {
        display: flex;
        align-items: baseline;
        gap: 14px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }

    #results-title {
        font-family: 'Fraunces', serif;
        font-size: 20px;
        font-weight: 700;
        color: var(--ink-1);
        letter-spacing: -0.4px;
        line-height: 1.1;
    }

    /* ══════════════════════════════════════════════════
       RANKING / DATA TABLES
    ══════════════════════════════════════════════════ */
    #ranking-table { overflow-x: auto; }
    #ranking-table::-webkit-scrollbar { height: 4px; }
    #ranking-table::-webkit-scrollbar-track { background: transparent; }
    #ranking-table::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: 2px; }

    #ranking-table table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 12px;
    }

    #ranking-table th {
        background: var(--surface-2);
        color: var(--ink-3);
        font-family: 'IBM Plex Mono', monospace;
        font-size: 9px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        position: sticky;
        top: 0;
        z-index: 15;
        padding: 9px 10px;
        border-bottom: 1px solid var(--border-2);
        white-space: nowrap;
        text-align: center;
    }
    #ranking-table th.sortable { cursor: pointer; user-select: none; }
    #ranking-table th.sortable:hover { color: var(--emerald); }

    #ranking-table td {
        padding: 6px 10px;
        text-align: center;
        border-bottom: 1px solid var(--border);
        color: var(--ink-1);
        transition: background 0.08s;
        font-variant-numeric: tabular-nums;
    }
    #ranking-table tr:last-child td { border-bottom: none; }
    #ranking-table tbody tr:nth-child(even) td { background: rgba(0,0,0,0.015); }
    [data-theme="dark"] #ranking-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.015); }
    #ranking-table tbody tr:hover td { background: var(--hover) !important; }
    #ranking-table tbody tr:hover td.sticky-col { background: var(--hover) !important; }

    .sticky-col {
        position: sticky;
        left: 0;
        background: var(--sticky-bg) !important;
        z-index: 11;
        border-right: 1px solid var(--border-2) !important;
        text-align: left !important;
        font-weight: 600;
        white-space: nowrap;
        color: var(--ink-1) !important;
        padding-left: 14px !important;
        font-size: 12.5px;
        transition: background 0.08s;
    }

    .spark-col { width: 80px; text-align: center; }

    /* ── Finish Probabilities toolbar & toggle ── */
    /* ── Form view ── */
    .form-dots {
        display: flex; align-items: center; gap: 5px;
    }
    .form-dot {
        width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    }
    .form-badge {
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 99px; font-size: 11px; font-weight: 600;
        padding: 2px 9px; white-space: nowrap; font-variant-numeric: tabular-nums;
        border: 1px solid transparent;
    }
    .form-badge--green { background: var(--emerald-lo); border-color: rgba(16,185,129,0.35); color: var(--emerald); }
    .form-badge--amber { background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.40); color: var(--amber); }
    .form-badge--red   { background: var(--rose-lo);    border-color: rgba(244,63,94,0.35);  color: var(--rose); }
    /* Inline legend samples in the subtitle */
    .form-badge-inline {
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 99px; font-size: 10px; font-weight: 600;
        padding: 1px 7px; white-space: nowrap; border: 1px solid transparent;
        vertical-align: middle;
    }
    .form-legend { display: inline-flex; align-items: center; gap: 4px; }
    .form-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }

    .fp-toolbar {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        padding: 0 4px 8px;
        min-height: 28px;
    }
    .fp-delta-toggle {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 10.5px;
        font-weight: 600;
        padding: 4px 10px;
        border-radius: 5px;
        border: 1px solid var(--border-2);
        background: var(--surface-2);
        color: var(--ink-2);
        cursor: pointer;
        transition: background 0.1s, color 0.1s, border-color 0.1s;
    }
    .fp-delta-toggle:hover { background: var(--surface-3); color: var(--ink-1); }
    .fp-delta-toggle--active {
        background: var(--emerald-lo);
        border-color: var(--emerald);
        color: var(--emerald);
    }

    /* Compact delta indicator shown below Avg Pos / Pts in scenario mode */
    .fp-meta-delta {
        display: block;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 8.5px; font-weight: 600;
        line-height: 1.2; margin-top: 1px;
    }

    /* Compact mode — single line per cell, tight rows */
    .fp-table--compact td,
    .fp-table--compact th { line-height: 1.2; }
    .fp-table--compact tbody tr { height: 32px; }

    /* Delta mode — two lines per cell, taller rows */
    .fp-table--delta tbody tr { height: 44px; }

    /* Δ value shown inline in delta mode */
    .small-val { display: block; font-size: 9.5px; line-height: 1.2; margin-top: 1px; }

    /* ══════════════════════════════════════════════════
       DIFF COLORS
    ══════════════════════════════════════════════════ */
    .diff-pos { font-weight: 700; color: var(--rose); }
    .diff-neg { font-weight: 700; color: var(--emerald); }

    /* ══════════════════════════════════════════════════
       MODAL
    ══════════════════════════════════════════════════ */
    .modal-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2000;
        padding: 20px;
        animation: mo-in 0.14s ease;
    }
    @keyframes mo-in { from { opacity:0 } to { opacity:1 } }

    .modal-content {
        background: var(--surface);
        border: 1px solid var(--border-3);
        border-radius: 12px;
        width: 100%;
        max-width: 95vw;
        padding: 24px 24px 28px;
        position: relative;
        box-shadow: var(--shadow-3);
        max-height: 90vh;
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--border-2) transparent;
        animation: mc-in 0.18s ease;
    }
    @keyframes mc-in { from { opacity:0; transform:translateY(10px) scale(0.99) } to { opacity:1; transform:none } }

    .modal-close {
        position: absolute;
        top: 14px; right: 14px;
        width: 28px; height: 28px;
        border-radius: 6px;
        border: 1px solid var(--border-2);
        background: var(--surface-2);
        font-size: 15px;
        cursor: pointer;
        color: var(--ink-3);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
    }
    .modal-close:hover { background: var(--rose-lo); border-color: var(--rose); color: var(--rose); }

    #modalTitle {
        font-family: 'Fraunces', serif;
        font-size: 19px;
        font-weight: 700;
        color: var(--ink-1);
        margin-bottom: 16px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--border-2);
        padding-right: 36px;
        letter-spacing: -0.3px;
        line-height: 1.2;
    }

    /* ══════════════════════════════════════════════════
       ANALYTICS MODAL CARDS
    ══════════════════════════════════════════════════ */
    .analytics-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 12px;
    }

    .analytics-card {
        background: var(--surface-2);
        padding: 12px 14px;
        border-radius: 8px;
        border: 1px solid var(--border);
        text-align: center;
    }

    .analytics-card h4 {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 8.5px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--ink-3);
        font-weight: 600;
        margin-bottom: 6px;
    }

    .analytics-val {
        font-family: 'Fraunces', serif;
        font-size: 24px;
        font-weight: 700;
        color: var(--emerald);
        letter-spacing: -0.5px;
        line-height: 1;
    }

    .score-list { margin: 10px 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }

    .score-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 14px;
        background: var(--surface-2);
        border-bottom: 1px solid var(--border);
        font-size: 12.5px;
        transition: background 0.1s;
    }
    .score-item:hover { background: var(--hover); }
    .score-item:last-child { border-bottom: none; }

    /* ══════════════════════════════════════════════════
       INLINE VIEW SUBTITLES
    ══════════════════════════════════════════════════ */
    .view-subtitle {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 10.5px;
        color: var(--ink-3);
        margin-bottom: 14px;
        padding: 9px 12px;
        background: var(--sky-lo);
        border-left: 2px solid var(--sky);
        border-radius: 0 6px 6px 0;
        line-height: 1.55;
    }
    .view-subtitle strong { color: var(--ink-2); font-family: 'Inter', sans-serif; font-weight: 600; }

    /* ══════════════════════════════════════════════════
       STANDINGS COMPARISON VIEW
    ══════════════════════════════════════════════════ */
    .sc-wrap { display: flex; flex-direction: column; gap: 0; }

    .sc-row {
        display: grid;
        grid-template-columns: 36px 160px 80px 100px 44px 40px 40px 40px 52px 52px 52px 52px 52px 52px 52px 52px;
        align-items: center;
        border-bottom: 1px solid var(--border);
        transition: background 0.08s;
        min-height: 40px;
    }
    .sc-row:last-child { border-bottom: none; }
    .sc-row:hover { background: var(--hover); }
    .sc-row.sc-header {
        background: var(--surface-2);
        border-bottom: 2px solid var(--border-2);
        min-height: 28px;
        position: sticky; top: 0; z-index: 5;
    }
    .sc-row.sc-subheader {
        background: var(--surface-3);
        border-bottom: 1px solid var(--border-2);
        min-height: 22px;
    }

    .sc-cell {
        padding: 5px 8px;
        font-size: 12px;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }
    .sc-cell.sc-team {
        text-align: left;
        font-weight: 600;
        font-size: 12.5px;
        padding-left: 10px;
    }
    .sc-cell.sc-lbl {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 9px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: var(--ink-3);
        padding: 4px 8px;
    }
    .sc-cell.sc-group-lbl {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 8.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 3px 8px;
        text-align: center;
    }

    .sc-pos-now {
        font-family: 'IBM Plex Mono', monospace;
        font-weight: 700;
        font-size: 13px;
        color: var(--ink-1);
        text-align: center;
    }

    .sc-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 10.5px;
        font-weight: 700;
        border-radius: 5px;
        padding: 2px 6px;
        white-space: nowrap;
    }
    .sc-arrow.up   { color: var(--emerald); background: var(--emerald-lo); }
    .sc-arrow.down { color: var(--rose);    background: var(--rose-lo); }
    .sc-arrow.same { color: var(--ink-3);   background: var(--surface-3); }

    .sc-group-now  { border-left: 2px solid var(--sky); }
    .sc-group-proj { border-left: 2px solid var(--emerald); }

    /* Group header bands — stronger visual anchors for the two sections */
    .sc-group-band {
        font-size: 9.5px;
        font-weight: 800;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        border-radius: 3px;
        margin: 2px 6px;
        padding: 3px 10px;
    }
    .sc-group-band--now  { color: var(--sky);     background: rgba(56,189,248,0.12); }
    .sc-group-band--proj { color: var(--emerald); background: rgba(16,185,129,0.12); }

    .sc-pts-now  { color: var(--sky);     font-weight: 700; }
    .sc-pts-proj { color: var(--emerald); font-weight: 700; }

    /* ══════════════════════════════════════════════════
       WELCOME CARD
    ══════════════════════════════════════════════════ */
    .welcome-inner {
        max-width: 580px;
        padding: 8px 4px 4px;
    }

    .welcome-header {
        margin-bottom: 2rem;
    }

    .welcome-eyebrow {
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--ink-3);
        margin-bottom: 0.5rem;
    }

    .welcome-title {
        font-family: 'Fraunces', serif;
        font-size: 22px;
        font-weight: 700;
        color: var(--ink-1);
        letter-spacing: -0.3px;
        margin: 0 0 0.6rem;
        line-height: 1.25;
    }

    .welcome-lead {
        font-size: 13.5px;
        color: var(--ink-3);
        line-height: 1.65;
        margin: 0;
        max-width: 460px;
    }

    .welcome-steps {
        display: flex;
        flex-direction: column;
    }

    .welcome-step {
        display: flex;
        gap: 16px;
    }

    .welcome-step-aside {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }

    .welcome-step-num {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 1.5px solid var(--border-2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 600;
        color: var(--ink-2);
        flex-shrink: 0;
        font-family: 'IBM Plex Mono', monospace;
    }

    .welcome-step-line {
        width: 1px;
        flex: 1;
        background: var(--border-1);
        margin-top: 6px;
        min-height: 20px;
    }

    .welcome-step-body {
        padding-bottom: 1.5rem;
        flex: 1;
        min-width: 0;
    }

    .welcome-step-title {
        font-size: 13.5px;
        font-weight: 600;
        color: var(--ink-1);
        margin-bottom: 0.3rem;
        padding-top: 3px;
    }

    .welcome-step-desc {
        font-size: 12.5px;
        color: var(--ink-3);
        line-height: 1.65;
        margin: 0;
    }

    .welcome-kbd {
        font-size: 11px;
        font-weight: 600;
        color: var(--ink-2);
        background: var(--surface-2);
        border: 1px solid var(--border-2);
        border-radius: 4px;
        padding: 1px 6px;
        font-family: 'Inter', sans-serif;
        white-space: nowrap;
    }

    .welcome-views {
        margin-top: 0.75rem;
        border: 1px solid var(--border-1);
        border-radius: 8px;
        overflow: hidden;
    }

    .welcome-view-row {
        display: flex;
        gap: 12px;
        align-items: baseline;
        padding: 0.6rem 0.85rem;
    }

    .welcome-view-name {
        font-size: 12px;
        font-weight: 600;
        color: var(--ink-2);
        white-space: nowrap;
        min-width: 148px;
        flex-shrink: 0;
    }

    .welcome-view-desc {
        font-size: 12px;
        color: var(--ink-3);
        line-height: 1.5;
    }

    .welcome-divider {
        height: 1px;
        background: var(--border-1);
    }

    .welcome-tip {
        margin-top: 0.85rem;
        padding: 0.7rem 0.9rem;
        background: var(--surface-2);
        border-radius: 7px;
        font-size: 12px;
        color: var(--ink-3);
        line-height: 1.6;
    }

    .welcome-tip strong {
        color: var(--ink-2);
        font-weight: 600;
    }

    @media (max-width: 480px) {
        .welcome-view-row { flex-direction: column; gap: 2px; }
        .welcome-view-name { min-width: 0; }
    }
    .hidden { display: none !important; }

    /* ══════════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════════ */
    /* ── Mobile league row: hidden on desktop, shown on small screens ── */
    .topbar-league-row {
        display: none !important;
    }

    @media (max-width: 640px) {
        .shell { padding: 0 14px 40px; }

        /* Topbar row 1: just wordmark + theme toggle */
        .topbar-inner { padding: 0 14px; gap: 10px; height: 48px; }
        .wordmark-sep { display: none; }
        /* Hide desktop league selects — mobile row takes over */
        .league-selects { display: none !important; }

        /* Topbar row 2: full-width league controls */
        .topbar-league-row {
            display: flex !important;
            align-items: center;
            gap: 8px;
            padding: 0 14px 10px;
            border-bottom: 1px solid var(--border-2);
        }

        .league-select--mobile {
            flex: 1;
            min-width: 0;
            max-width: none;
            font-size: 14px;
            padding: 8px 28px 8px 10px;
            height: 40px;
        }

        .league-load-btn--mobile {
            font-size: 13px;
            padding: 0 16px;
            height: 40px;
            flex-shrink: 0;
            white-space: nowrap;
        }

        .controls-row { gap: 10px; }
        .btn-row { margin-left: 0; width: 100%; }
        #runNow, #resetPage { flex: 1; justify-content: center; }
        .analytics-grid { grid-template-columns: 1fr; }
    }

    /* ══════════════════════════════════════════════════
       POINTS DISTRIBUTION VIEW
    ══════════════════════════════════════════════════ */
    .pts-dist-table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; }
    .pts-dist-table th {
        background:var(--surface-2); color:var(--ink-3);
        font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:600;
        text-transform:uppercase; letter-spacing:0.6px;
        padding:8px 10px; border-bottom:1px solid var(--border-2);
        position:sticky; top:0; z-index:10; white-space:nowrap; text-align:center;
    }
    .pts-dist-table td { padding:6px 10px; border-bottom:1px solid var(--border); vertical-align:middle; text-align:center; }
    .pts-dist-table tr:last-child td { border-bottom:none; }
    .pts-dist-table tbody tr:hover td { background:var(--hover); }

    /* Sticky team column */
    .pts-dist-team-col {
        text-align:left !important; font-weight:600; font-size:12.5px;
        white-space:nowrap; padding-left:14px !important; min-width:140px;
    }
    .pts-dist-table th.pts-dist-team-col { text-align:left !important; }

    /* Box plot legend */
    .pts-boxplot-legend {
        display:flex; align-items:center; flex-wrap:wrap; gap:14px;
        font-size:10.5px; color:var(--ink-2);
        margin-bottom:12px; padding-left:2px;
    }


    /* ══════════════════════════════════════════════════
       SCHEDULE DIFFICULTY VIEW
    ══════════════════════════════════════════════════ */
    /* ── ELO Swings grouped view ── */
    .swings-table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; }
    .swings-table thead th {
        font-family:'IBM Plex Mono',monospace;
        font-size:9px; font-weight:600; text-transform:uppercase; letter-spacing:0.6px;
        color:var(--ink-3); padding:6px 10px; text-align:center;
        background:var(--surface-2); border-bottom:2px solid var(--border-2);
        position:sticky; top:0; z-index:5;
    }
    .swings-table thead th.sortable { cursor:pointer; }
    .swings-table thead th.sortable:hover { color:var(--emerald); }
    .swings-summary-row td {
        padding:9px 10px; border-bottom:1px solid var(--border);
        text-align:center; font-size:12.5px; font-variant-numeric:tabular-nums;
        transition:background 0.08s;
    }
    .swings-summary-row:hover td { background:var(--hover); }
    .swings-summary-row--open td { background:var(--surface-2); border-bottom:none; }
    .swings-summary-row--open:hover td { background:var(--surface-2); }
    .swings-chevron {
        color:var(--ink-3); font-size:11px;
        transition:color 0.1s;
    }
    .swings-summary-row:hover .swings-chevron { color:var(--emerald); }

    /* Expanded detail sub-table */
    .swings-detail-row td { padding:0; border-bottom:1px solid var(--border-2); }
    .swings-detail-table {
        width:100%; border-collapse:collapse; font-size:11px;
        background:var(--surface-3);
    }
    .swings-detail-table thead th {
        font-family:'IBM Plex Mono',monospace;
        font-size:8.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;
        color:var(--ink-3); padding:5px 10px; text-align:center;
        background:var(--surface-3); border-bottom:1px solid var(--border-2);
        position:static; /* don't sticky — inside a scrollable sub-table */
    }
    .swings-detail-table tbody td {
        padding:6px 10px; text-align:center;
        border-bottom:1px solid var(--border);
        font-variant-numeric:tabular-nums; color:var(--ink-2);
    }
    .swings-detail-table tbody tr:last-child td { border-bottom:none; }
    .swings-detail-table tbody tr:hover td { background:var(--hover); }

    /* ELO Δ pill — width scales with magnitude, colour encodes direction */
    .elo-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 11px;
        font-weight: 700;
        height: 20px;
        border-radius: 10px;
        border: 1px solid;
        padding: 0 6px;
        white-space: nowrap;
        transition: width 0.15s ease;
    }

    .sched-table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; }
    .sched-table th {
        background:var(--surface-2); color:var(--ink-3);
        font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:600;
        text-transform:uppercase; letter-spacing:0.6px;
        padding:8px 10px; border-bottom:1px solid var(--border-2);
        position:sticky; top:0; z-index:10; white-space:nowrap;
        text-align:center; cursor:pointer; user-select:none;
    }
    .sched-table th:hover { color:var(--emerald); }
    .sched-table td { padding:7px 10px; border-bottom:1px solid var(--border); text-align:center; font-variant-numeric:tabular-nums; }
    .sched-table tr:last-child td { border-bottom:none; }
    .sched-table tbody tr:hover td { background:var(--hover); }

    /* Sticky team column */
    .sched-team-col {
        position:sticky; left:0; z-index:4;
        background:var(--surface); text-align:left;
        font-weight:600; font-size:12.5px; white-space:nowrap;
        padding-left:14px; min-width:140px;
    }
    .sched-table th.sched-team-col {
        background:var(--surface-2); z-index:11; cursor:default; text-align:left;
    }
    .sched-table tbody tr:hover td.sched-team-col { background:var(--hover); }

    /* Difficulty + ELO pills */
    .sched-pill {
        display:inline-flex; align-items:center; justify-content:center;
        border-radius:99px; font-family:'IBM Plex Mono',monospace;
        font-size:11px; font-weight:700;
        height:22px; padding:0 8px;
        border:1px solid transparent;
        white-space:nowrap; font-variant-numeric:tabular-nums;
    }
    .sched-upcoming-fixtures {
        display:flex; flex-wrap:wrap; gap:4px; max-width:320px;
    }
    .sched-fix-pill {
        font-family:'IBM Plex Mono',monospace; font-size:9px;
        padding:2px 6px; border-radius:4px;
        border:1px solid var(--border-2); background:var(--surface-2);
        color:var(--ink-2); white-space:nowrap;
    }
    .sched-fix-pill.hard { border-color:var(--rose); background:var(--rose-lo); color:var(--rose); }
    .sched-fix-pill.easy { border-color:var(--emerald); background:var(--emerald-lo); color:var(--emerald); }

    /* ══════════════════════════════════════════════════
       FORM vs ELO DIVERGENCE VIEW
    ══════════════════════════════════════════════════ */
    /* ── Next 10 Games — dot grid ── */
    .streak-legend {
        display: flex; align-items: center; flex-wrap: wrap;
        gap: 12px; margin-bottom: 12px;
        font-size: 10.5px; color: var(--ink-2);
    }
    .streak-legend-label {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 9px; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.5px;
        color: var(--ink-3);
    }
    .streak-leg-item {
        display: flex; align-items: center; gap: 5px;
    }
    .streak-leg-dot {
        border-radius: 50%; display: inline-block; flex-shrink: 0;
    }
    .streak-table {
        width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px;
    }
    .streak-table thead th {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px;
        color: var(--ink-3); padding: 6px 8px; text-align: center;
        background: var(--surface-2); border-bottom: 1px solid var(--border-2);
        position: sticky; top: 0; z-index: 10; white-space: nowrap;
    }
    .streak-table thead th.sticky-col { z-index: 11; left: 0; }
    .streak-table td {
        padding: 6px 8px; border-bottom: 1px solid var(--border);
        text-align: center; vertical-align: middle;
    }
    .streak-table tr:last-child td { border-bottom: none; }
    .streak-table tbody tr:hover td { background: var(--hover); }
    .streak-table tbody tr:hover td.sticky-col { background: var(--hover); }

    .form-elo-table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; }
    .form-elo-table th {
        background:var(--surface-2); color:var(--ink-3);
        font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:600;
        text-transform:uppercase; letter-spacing:0.6px;
        padding:8px 10px; border-bottom:1px solid var(--border-2);
        position:sticky; top:0; z-index:10; white-space:nowrap;
        text-align:center; cursor:pointer; user-select:none;
    }
    .form-elo-table th:hover { color:var(--emerald); }
    .form-elo-table td { padding:7px 10px; border-bottom:1px solid var(--border); text-align:center; font-variant-numeric:tabular-nums; }
    .form-elo-table tr:last-child td { border-bottom:none; }
    .form-elo-table tbody tr:hover td { background:var(--hover); }
    .divergence-bar { display:none; } /* deprecated — kept to avoid errors if referenced elsewhere */

    /* Centre-anchored divergence bar */
    .div-bar-wrap {
        display: flex; align-items: center; gap: 0;
        width: 100%; max-width: 200px; margin: 0 auto;
    }
    .div-bar-half {
        flex: 1; height: 8px; display: flex; overflow: hidden;
    }
    .div-bar-left  { justify-content: flex-end; }
    .div-bar-right { justify-content: flex-start; }
    .div-bar-fill {
        height: 100%; border-radius: 2px; opacity: 0.78;
        transition: width 0.15s ease;
    }
    .div-bar-axis {
        width: 1px; height: 16px; background: var(--border-2);
        flex-shrink: 0; margin: 0 1px;
    }
    .div-bar-val {
        font-family: 'IBM Plex Mono', monospace;
        font-size: 10.5px; min-width: 38px;
        text-align: left; padding-left: 7px;
        font-variant-numeric: tabular-nums;
    }

    /* ══════════════════════════════════════════════════
       STEP BADGES & ONBOARDING FLOW
    ══════════════════════════════════════════════════ */

    /* Divider between the two control rows */
    .controls-divider {
        height: 1px;
        background: var(--border);
        margin: 12px 0;
    }

    /* Locked row — dimmed until sim has run */
    .controls-row--locked {
        opacity: 0.45;
        pointer-events: none;
        transition: opacity 0.3s ease;
        position: relative;
    }
    .controls-row--locked.unlocked {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Lock hint label */
    .locked-hint {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-family: 'IBM Plex Mono', monospace;
        font-size: 9.5px;
        font-weight: 500;
        color: var(--ink-3);
        letter-spacing: 0.2px;
        margin-left: 4px;
        white-space: nowrap;
        transition: opacity 0.2s;
    }
    .locked-hint.hidden { display: none !important; }

    /* Disabled selects keep their cursor honest */
    select:disabled { cursor: not-allowed; opacity: 0.6; }

    /* ══════════════════════════════════════════════════
       VIEW MODE BUTTON TABS
    ══════════════════════════════════════════════════ */
    .view-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .view-btn {
        font-family: 'Inter', sans-serif;
        font-size: 11.5px;
        font-weight: 500;
        color: var(--ink-2);
        background: var(--surface-2);
        border: 1px solid var(--border-2);
        border-radius: 6px;
        padding: 5px 11px;
        cursor: pointer;
        white-space: nowrap;
        transition: color 0.15s, background 0.15s, border-color 0.15s;
        line-height: 1.4;
        flex: 1 1 auto;
        text-align: center;
    }
    .view-btn:hover {
        color: var(--ink-1);
        background: var(--surface-3);
        border-color: var(--border-3);
    }
    .view-btn.active {
        color: var(--emerald);
        background: var(--emerald-lo);
        border-color: var(--emerald-md);
        font-weight: 600;
    }

    @media (max-width: 700px) {
        .view-tabs { gap: 3px; }
        .view-btn  { font-size: 11px; padding: 4px 9px; }
    }

    </style>