/* ═══════════════════════════════════
       TOKENS
    ═══════════════════════════════════ */
    :root {
      --bg:          #080E1A;
      --surface:     #0D1526;
      --card:        #111E33;
      --card-hover:  #162540;
      --border:      #1A2E50;
      --accent:      #3B82F6;
      --accent-lt:   #60A5FA;
      --accent-dim:  rgba(59,130,246,0.12);
      --text:        #F0F4FF;
      --muted:       #8A9BB0;
      --dim:         #4A5A72;
      --success:     #22C55E;
      --warning:     #F59E0B;
      --danger:      #EF4444;
      --gold:        #F59E0B;
      --silver:      #94A3B8;
      --bronze:      #CD7F32;
      --sidebar-w:   240px;
      --topbar-h:    60px;
      --r:           12px;
      --r-sm:        8px;
      --head:        'Bebas Neue', sans-serif;
      --body:        'Space Grotesk', sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--body); font-size: 14px; -webkit-font-smoothing: antialiased; }
    a { color: var(--accent); text-decoration: none; }
    button { cursor: pointer; font-family: var(--body); }
    input, select, textarea { font-family: var(--body); }
    ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--surface); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    /* ═══════════════════════════════════
       UTILITY
    ═══════════════════════════════════ */
    .hidden { display: none !important; }

    /* ═══════════════════════════════════
       COMPONENTS
    ═══════════════════════════════════ */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 10px 20px; border-radius: var(--r-sm); border: none;
      font-size: 13px; font-weight: 600; transition: all 0.18s; letter-spacing: 0.3px; white-space: nowrap;
    }
    .btn-primary { background: var(--accent); color: #fff; }
    .btn-primary:hover { background: var(--accent-lt); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(59,130,246,0.3); }
    .btn-ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
    .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
    .btn-success { background: var(--success); color: #fff; }
    .btn-success:hover { opacity: 0.9; }
    .btn-danger { background: var(--danger); color: #fff; }
    .btn-lg { padding: 13px 28px; font-size: 14px; }
    .btn-sm { padding: 6px 14px; font-size: 12px; }
    .btn-full { width: 100%; justify-content: center; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

    .input-group { display: flex; flex-direction: column; gap: 6px; }
    .input-label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; }
    .input-field {
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
      padding: 11px 14px; color: var(--text); font-size: 13px; width: 100%; transition: border-color 0.18s;
    }
    .input-field:focus { outline: none; border-color: var(--accent); }
    .input-field::placeholder { color: var(--dim); }
    select.input-field { appearance: none; cursor: pointer; }

    .badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; }
    .badge-blue  { background: var(--accent-dim); color: var(--accent-lt); }
    .badge-green { background: rgba(34,197,94,0.12); color: var(--success); }
    .badge-amber { background: rgba(245,158,11,0.12); color: var(--warning); }
    .badge-red   { background: rgba(239,68,68,0.12); color: var(--danger); }
    .badge-dim   { background: rgba(138,155,176,0.1); color: var(--muted); }

    .alert { padding: 10px 14px; border-radius: var(--r-sm); font-size: 13px; }
    .alert-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); color: var(--danger); }
    .alert-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); color: var(--success); }
    .alert-info { background: var(--accent-dim); border: 1px solid rgba(59,130,246,0.25); color: var(--accent-lt); }

    /* ═══════════════════════════════════
       APP LOADER
    ═══════════════════════════════════ */
    #app-loader {
      position: fixed; inset: 0; background: var(--bg);
      display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999;
    }
    .loader-wordmark { font-family: var(--head); font-size: 30px; letter-spacing: 1.5px; margin-bottom: 28px; }
    .loader-wordmark span { color: var(--accent); }
    .spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.75s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ═══════════════════════════════════
       AUTH SCREEN
    ═══════════════════════════════════ */
    #screen-auth {
      min-height: 100vh; display: flex; align-items: center; justify-content: center;
      background: var(--bg); padding: 20px;
      background-image:
        radial-gradient(ellipse at 15% 50%, rgba(59,130,246,0.07) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 20%, rgba(59,130,246,0.05) 0%, transparent 50%);
    }
    .auth-wrap { width: 100%; max-width: 420px; }
    .auth-logo { text-align: center; margin-bottom: 32px; }
    .auth-logo-icon {
      width: 56px; height: 56px; background: var(--accent-dim); border: 1px solid rgba(59,130,246,0.4);
      border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
      font-size: 26px; margin-bottom: 14px;
    }
    .auth-logo h1 { font-family: var(--head); font-size: 26px; letter-spacing: 1.5px; }
    .auth-logo p { font-size: 13px; color: var(--muted); margin-top: 5px; }
    .auth-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 32px; }
    .auth-card h2 { font-size: 18px; font-weight: 700; margin-bottom: 5px; }
    .auth-card .auth-sub { font-size: 13px; color: var(--muted); margin-bottom: 24px; }
    .auth-form { display: flex; flex-direction: column; gap: 16px; }
    .pw-wrap { position: relative; }
    .pw-wrap .input-field { padding-right: 44px; }
    .pw-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--muted); font-size: 16px; padding: 2px; }
    .pw-toggle:hover { color: var(--text); }
    .auth-switch { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
    .auth-switch a { color: var(--accent); font-weight: 600; cursor: pointer; }
    .auth-form .auth-error { display: none; }

    /* ═══════════════════════════════════
       SETUP WIZARD
    ═══════════════════════════════════ */
    #screen-wizard {
      min-height: 100vh; display: flex; flex-direction: column; align-items: center;
      padding: 40px 20px; background: var(--bg);
      background-image: radial-gradient(ellipse at 50% 0%, rgba(59,130,246,0.09) 0%, transparent 55%);
    }
    .wizard-brand { font-family: var(--head); font-size: 22px; letter-spacing: 1px; margin-bottom: 8px; }
    .wizard-brand span { color: var(--accent); }
    .wizard-sub { font-size: 13px; color: var(--muted); margin-bottom: 36px; }
    .wiz-steps { display: flex; align-items: center; margin-bottom: 36px; }
    .wstep { display: flex; flex-direction: column; align-items: center; gap: 6px; }
    .wstep-dot {
      width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; border: 2px solid var(--border); background: var(--surface); color: var(--muted); transition: all 0.25s;
    }
    .wstep.active .wstep-dot { border-color: var(--accent); background: var(--accent); color: #fff; }
    .wstep.done .wstep-dot { border-color: var(--success); background: var(--success); color: #fff; }
    .wstep-lbl { font-size: 10px; color: var(--muted); font-weight: 500; }
    .wstep.active .wstep-lbl { color: var(--accent); }
    .wstep.done .wstep-lbl { color: var(--success); }
    .wstep-line { width: 56px; height: 2px; background: var(--border); margin-bottom: 20px; transition: background 0.25s; }
    .wstep-line.done { background: var(--success); }
    .wiz-card { width: 100%; max-width: 560px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 36px; }
    .wiz-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
    .wiz-card .step-hint { font-size: 13px; color: var(--muted); margin-bottom: 28px; }
    .wiz-step { display: none; }
    .wiz-step.active { display: block; }
    .wiz-form { display: flex; flex-direction: column; gap: 18px; }
    .wiz-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }
    .fetch-row { display: flex; gap: 10px; align-items: flex-end; }
    .fetch-row .input-group { flex: 1; }
    .fetch-status { padding: 10px 14px; border-radius: var(--r-sm); font-size: 13px; margin-bottom: 12px; display: none; }
    .fetch-status.show-info { background: var(--accent-dim); border: 1px solid rgba(59,130,246,0.25); color: var(--accent-lt); display: block; }
    .fetch-status.show-ok { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.25); color: var(--success); display: block; }
    .fetch-status.show-err { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); color: var(--danger); display: block; }
    .mgr-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); max-height: 260px; overflow-y: auto; display: none; }
    .mgr-item { display: flex; align-items: center; gap: 10px; padding: 9px 13px; border-bottom: 1px solid var(--border); }
    .mgr-item:last-child { border-bottom: none; }
    .mgr-av { width: 28px; height: 28px; border-radius: 7px; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0; }
    .mgr-name { font-size: 12px; font-weight: 600; }
    .mgr-team { font-size: 11px; color: var(--muted); }
    .prize-row { display: flex; align-items: center; gap: 10px; }
    .pos-chip { width: 26px; height: 26px; border-radius: 6px; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0; }
    .colour-grid { display: flex; gap: 10px; flex-wrap: wrap; }
    .c-swatch { width: 36px; height: 36px; border-radius: 9px; cursor: pointer; border: 3px solid transparent; transition: all 0.18s; }
    .c-swatch.sel { border-color: var(--text); transform: scale(1.15); }
    .review-item { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--border); }
    .review-item:last-child { border-bottom: none; }
    .review-lbl { color: var(--muted); font-size: 13px; }
    .review-val { font-weight: 600; font-size: 13px; }

    /* ═══════════════════════════════════
       DASHBOARD LAYOUT
    ═══════════════════════════════════ */
    #screen-dashboard { display: flex; min-height: 100vh; overflow: hidden; }
    @keyframes league-swipe-in { from { transform: translateX(60px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    #main.switching { animation: league-swipe-in 0.22s cubic-bezier(0.25, 0, 0.25, 1) both; }

    #sidebar {
      width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border);
      display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 100; overflow-y: auto;
    }
    .sb-logo { padding: 18px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; }
    .sb-logo-icon { width: 34px; height: 34px; background: var(--accent); border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
    .sb-logo-text { font-family: var(--head); font-size: 15px; letter-spacing: 0.5px; line-height: 1.2; }
    .sb-logo-text em { display: block; font-family: var(--body); font-size: 10px; color: var(--muted); font-style: normal; font-weight: 500; }
    .sb-league { padding: 11px 14px; border-bottom: 1px solid var(--border); }
    .league-chip-row { display: flex; align-items: center; gap: 6px; }
    .league-chip { flex: 1; background: var(--accent-dim); border: 1px solid rgba(59,130,246,0.25); border-radius: var(--r-sm); padding: 7px 11px; font-size: 12px; font-weight: 600; color: var(--accent-lt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; transition: background 0.15s; }
    .league-chip:hover { background: rgba(59,130,246,0.2); }
    .add-league-btn { flex-shrink: 0; width: 28px; height: 28px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--muted); font-size: 16px; font-weight: 400; display: flex; align-items: center; justify-content: center; transition: all 0.15s; padding: 0; }
    .add-league-btn:hover { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-lt); }

    /* League picker modal */
    #league-picker-overlay { position: fixed; inset: 0; background: rgba(8,14,26,0.7); z-index: 500; display: flex; align-items: flex-start; justify-content: flex-start; padding: 120px 0 0 14px; }
    #league-picker-modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 16px; width: 210px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
    .lp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .lp-title { font-family: var(--head); font-size: 14px; letter-spacing: 0.5px; color: var(--text); }
    .lp-close { background: none; border: none; color: var(--muted); font-size: 16px; padding: 2px 6px; border-radius: 4px; }
    .lp-close:hover { color: var(--text); background: var(--card); }
    .lp-league-item { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--r-sm); cursor: pointer; margin-bottom: 2px; }
    .lp-league-item:hover { background: var(--card); }
    .lp-league-item.current { background: var(--accent-dim); }
    .lp-league-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--accent); }
    .lp-league-dot.h2h { background: var(--warning); }
    .lp-league-name { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .lp-league-meta { font-size: 10px; color: var(--muted); }
    .sb-nav { flex: 1; padding: 6px 0; }
    .nav-section-lbl { padding: 10px 16px 4px; font-size: 10px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.8px; }
    .nav-item {
      display: flex; align-items: center; gap: 10px; padding: 9px 16px;
      color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer;
      transition: all 0.15s; border-left: 3px solid transparent;
    }
    .nav-item:hover { background: var(--card); color: var(--text); }
    .nav-item.active { background: var(--accent-dim); color: var(--accent-lt); border-left-color: var(--accent); }
    .nav-icon { font-size: 15px; width: 20px; text-align: center; }
    .nav-pip { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
    .sb-footer { padding: 12px 14px; border-top: 1px solid var(--border); }
    .admin-row { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--r-sm); }
    .admin-av { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0; }
    .admin-info { flex: 1; min-width: 0; }
    .admin-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .admin-role { font-size: 10px; color: var(--muted); }
    .logout-btn { background: none; border: none; color: var(--dim); font-size: 15px; padding: 4px; border-radius: 6px; }
    .logout-btn:hover { color: var(--danger); background: rgba(239,68,68,0.1); }

    #main { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; }

    #topbar {
      height: var(--topbar-h); background: var(--surface); border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 28px; position: sticky; top: 0; z-index: 50;
    }
    .topbar-left { display: flex; flex-direction: column; }
    .topbar-title { font-size: 16px; font-weight: 700; }
    .topbar-sub { font-size: 11px; color: var(--muted); }
    .topbar-right { display: flex; align-items: center; gap: 12px; }
    .gw-chip { background: var(--accent-dim); border: 1px solid rgba(59,130,246,0.3); border-radius: var(--r-sm); padding: 5px 13px; font-size: 11px; font-weight: 700; color: var(--accent-lt); }
    .league-type-pill { font-family: var(--head); font-size: 11px; letter-spacing: 0.8px; padding: 2px 8px; border-radius: 4px; display: inline-block; margin-left: 8px; vertical-align: middle; }
    .league-type-pill.classic { background: rgba(59,130,246,0.15); color: #60A5FA; border: 1px solid rgba(59,130,246,0.3); }
    .league-type-pill.h2h { background: rgba(245,158,11,0.15); color: #FCD34D; border: 1px solid rgba(245,158,11,0.3); }


    #content { flex: 1; padding: 28px; }
    .panel { display: none; }
    .panel.active { display: block; }

    /* ═══════════════════════════════════
       HOME TAB
    ═══════════════════════════════════ */
    .home-hero {
      background: linear-gradient(135deg, var(--card) 0%, #0C1C38 100%);
      border: 1px solid var(--border); border-radius: 16px; padding: 28px 32px;
      margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between;
      overflow: hidden; position: relative;
    }
    .home-hero::after {
      content: ''; position: absolute; right: -30px; top: -30px; width: 180px; height: 180px;
      border-radius: 50%; background: radial-gradient(circle, rgba(59,130,246,0.18) 0%, transparent 70%); pointer-events: none;
    }
    .hero-text h2 { font-family: var(--head); font-size: 28px; letter-spacing: 0.5px; margin-bottom: 4px; }
    .hero-text h2 span { color: var(--accent-lt); }
    .hero-text p { font-size: 13px; color: var(--muted); }
    .hero-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
    .hero-trophy { font-size: 72px; opacity: 0.1; position: relative; z-index: 1; }

    .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
    .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
    .stat-icon { font-size: 20px; margin-bottom: 10px; }
    .stat-lbl { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; }
    .stat-val { font-family: var(--head); font-size: 30px; margin-bottom: 3px; }
    .stat-hint { font-size: 11px; color: var(--muted); }

    .home-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
    .section-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
    .section-hd-title { font-size: 13px; font-weight: 700; }
    .section-hd-link { font-size: 12px; color: var(--accent); cursor: pointer; }

    .standings-mini { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
    table.mini-table { width: 100%; border-collapse: collapse; }
    .mini-table th { text-align: left; padding: 6px 10px; font-size: 10px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); }
    .mini-table td { padding: 9px 10px; font-size: 13px; border-bottom: 1px solid rgba(26,46,80,0.5); }
    .mini-table tr:last-child td { border-bottom: none; }
    .pos-no { font-weight: 700; color: var(--muted); }
    .pos-1 .pos-no { color: var(--gold); }
    .pos-2 .pos-no { color: var(--silver); }
    .pos-3 .pos-no { color: var(--bronze); }
    .mgr-cell strong { display: block; font-size: 13px; }
    .mgr-cell small { font-size: 11px; color: var(--muted); }
    .pts-cell { text-align: right; font-weight: 700; }
    .gw-cell { text-align: right; color: var(--muted); font-size: 12px; }

    .quick-actions-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
    .qa-item {
      display: flex; align-items: center; gap: 12px; padding: 11px 12px;
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
      cursor: pointer; transition: all 0.15s; margin-bottom: 8px;
    }
    .qa-item:last-child { margin-bottom: 0; }
    .qa-item:hover { border-color: var(--accent); background: var(--accent-dim); }
    .qa-icon { width: 34px; height: 34px; border-radius: 8px; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
    .qa-text strong { display: block; font-size: 13px; font-weight: 600; }
    .qa-text small { font-size: 11px; color: var(--muted); }
    .qa-arr { margin-left: auto; color: var(--dim); font-size: 16px; }

    .empty-state { text-align: center; padding: 36px 20px; }
    .empty-icon { font-size: 36px; opacity: 0.3; margin-bottom: 12px; }
    .empty-state h4 { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
    .empty-state p { font-size: 12px; color: var(--muted); }

    /* ═══════════════════════════════════
       PLACEHOLDER TABS
    ═══════════════════════════════════ */
    .coming-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 55vh; text-align: center; }
    .coming-icon { font-size: 52px; opacity: 0.2; margin-bottom: 18px; }
    .coming-panel h3 { font-family: var(--head); font-size: 26px; letter-spacing: 1px; margin-bottom: 8px; }
    .coming-panel p { color: var(--muted); font-size: 13px; max-width: 280px; line-height: 1.6; }
    .coming-panel .badge { margin-top: 16px; }

    /* ═══════════════════════════════════
       MODAL SYSTEM
    ═══════════════════════════════════ */
    #modal-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 200;
      display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); padding: 20px;
    }
    #modal-overlay.open { display: flex; }
    .modal { background: var(--card); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 660px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
    .modal-hd { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
    .modal-title { font-size: 16px; font-weight: 700; }
    .modal-close { background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; border-radius: 6px; padding: 2px 6px; }
    .modal-close:hover { color: var(--text); background: var(--border); }
    .modal-body { padding: 24px; overflow-y: auto; flex: 1; }
    .modal-ft { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; flex-shrink: 0; }

    .gw-num-row { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 20px; }
    .gw-num-row .input-group { width: 100px; }
    .fetch-progress { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px 14px; font-size: 12px; color: var(--muted); margin-bottom: 14px; display: none; }
    .fetch-progress.show { display: block; }
    .prog-bar-wrap { background: var(--border); border-radius: 3px; height: 3px; margin-top: 8px; }
    .prog-bar { background: var(--accent); height: 3px; border-radius: 3px; width: 0%; transition: width 0.3s; }
    .score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .score-row { display: flex; align-items: center; gap: 8px; padding: 4px; border-radius: 6px; }
    .score-row:hover { background: var(--surface); }
    .score-av { width: 24px; height: 24px; border-radius: 6px; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
    .score-mgr-name { flex: 1; font-size: 12px; font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .score-inp { width: 60px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; color: var(--text); font-size: 13px; text-align: center; flex-shrink: 0; }
    .score-inp:focus { outline: none; border-color: var(--accent); }
    .score-inp.fetched { border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.05); }
    .award-section { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 8px; }
    .award-section h4 { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; }
    .award-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

    /* ═══════════════════════════════════
       PAYMENTS TAB (Phase 5 — Full CRUD)
    ═══════════════════════════════════ */
    .pay-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; }
    .pay-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 16px; }
    .pay-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
    .pay-stat-val { font-family: var(--head); font-size: 28px; margin: 6px 0 3px; }
    .pay-table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
    .pay-table { width: 100%; border-collapse: collapse; }
    .pay-table th { text-align: left; padding: 10px 16px; font-size: 10px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); background: var(--surface); }
    .pay-table td { padding: 11px 16px; font-size: 13px; border-bottom: 1px solid rgba(26,46,80,0.5); vertical-align: middle; }
    .pay-table tr:last-child td { border-bottom: none; }
    .pay-status-btn { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 600; border: none; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .pay-status-btn.paid    { background: rgba(34,197,94,0.12); color: var(--success); }
    .pay-status-btn.pending { background: rgba(245,158,11,0.12); color: var(--warning); }
    .pay-status-btn.overdue { background: rgba(239,68,68,0.1);  color: var(--danger); }
    .pay-status-btn:hover { transform: scale(1.05); }
    .pay-progress-wrap { margin-bottom: 16px; }
    .pay-progress-bar { height: 6px; background: var(--surface); border-radius: 4px; overflow: hidden; }
    .pay-progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--success)); border-radius: 4px; transition: width 0.4s; }
    .pay-filter-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
    .pay-filter-btn { padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: all 0.15s; }
    .pay-filter-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-lt); }
    .pay-filter-btn:hover:not(.active) { border-color: var(--muted); color: var(--text); }
    .btn-icon { background: none; border: none; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--muted); transition: all 0.15s; }
    .btn-icon:hover { background: var(--surface); color: var(--text); }
    .btn-icon.danger:hover { background: rgba(239,68,68,0.1); color: var(--danger); }
    #pay-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 200; display: none; align-items: center; justify-content: center; backdrop-filter: blur(4px); padding: 20px; }
    #pay-modal.open { display: flex; }
    .pay-modal-box { background: var(--card); border: 1px solid var(--border); border-radius: 16px; width: 100%; max-width: 440px; overflow: hidden; }
    .pay-modal-hd { padding: 18px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
    /* Super Admin */
    .sa-stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 24px; }

    /* ═══════════════════════════════════
       HALL OF FAME (Phase 6)
    ═══════════════════════════════════ */
    .hof-champion-card { background: linear-gradient(135deg, #0e2040 0%, #1a3a6e 50%, #0e2040 100%); border: 1px solid rgba(59,130,246,0.4); border-radius: var(--r); padding: 32px 24px; text-align: center; margin-bottom: 20px; position: relative; overflow: hidden; }
    .hof-champion-card::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 50% 0%, rgba(59,130,246,0.15) 0%, transparent 70%); pointer-events:none; }
    .hof-champion-crown { font-size: 36px; margin-bottom: 6px; }
    .hof-champion-label { font-size: 10px; font-weight: 700; color: rgba(96,165,250,0.7); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 10px; }
    .hof-champion-name { font-family: var(--head); font-size: 40px; color: #F0F4FF; letter-spacing: 1px; line-height: 1.1; }
    .hof-champion-team { font-size: 13px; color: rgba(138,155,176,0.8); margin-top: 4px; }
    .hof-champion-pts { font-family: var(--head); font-size: 52px; color: var(--gold); margin-top: 12px; line-height: 1; }
    .hof-podium-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
    .hof-podium-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 18px; text-align: center; }
    .hof-honours-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 24px; }
    .hof-honour-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 14px; text-align: center; }
    .hof-honour-icon { font-size: 28px; margin-bottom: 8px; }
    .hof-honour-title { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
    .hof-honour-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
    .hof-honour-stat { font-family: var(--head); font-size: 24px; color: var(--accent-lt); }
    .hof-honour-sub { font-size: 11px; color: var(--muted); }
    .hof-section-title { font-family: var(--head); font-size: 18px; letter-spacing: 0.5px; margin-bottom: 14px; }
    .hof-records-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; margin-top: 8px; }
    .hof-records-grid { display: flex; flex-direction: column; gap: 2px; }
    .hof-record-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 0; border-bottom: 1px solid rgba(26,46,80,0.5); align-items: center; }
    .hof-record-row:last-child { border-bottom: none; }
    .hof-record-label { font-size: 13px; color: var(--muted); }
    .hof-record-val { font-family: var(--head); font-size: 20px; text-align: right; }
    .hof-record-who { font-size: 11px; color: var(--dim); grid-column: 1 / -1; margin-top: -6px; }
    .hof-season-bars { display: flex; align-items: flex-end; gap: 2px; height: 90px; overflow: hidden; }
    .hof-season-bar-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; height: 100%; justify-content: flex-end; }
    .hof-season-bar-outer { width: 100%; background: var(--surface); border-radius: 2px; overflow: hidden; flex: 1; display: flex; align-items: flex-end; }
    .hof-season-bar-inner { width: 100%; border-radius: 2px; transition: height 0.3s; }
    .hof-season-bar-gw { font-size: 8px; color: var(--dim); white-space: nowrap; }

    /* ═══════════════════════════════════
       RESPONSIVE
    ═══════════════════════════════════ */
    @media (max-width: 1024px) { .stat-grid { grid-template-columns: repeat(2,1fr); } .home-grid { grid-template-columns: 1fr; } }
    @media (max-width: 768px) {
      #sidebar { transform: translateX(-100%); transition: transform 0.28s; }
      #sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,0.5); }
      #main { margin-left: 0; }
      #topbar { padding: 0 16px; }
      #content { padding: 16px; }
      .home-hero { flex-direction: column; align-items: flex-start; }
      .hero-trophy { display: none; }
      .score-grid { grid-template-columns: 1fr; }
      .award-grid { grid-template-columns: 1fr; }
      .pay-grid { grid-template-columns: 1fr; }
      .sa-stats-grid { grid-template-columns: 1fr; }
    }

    /* ═══════════════════════════════════
       PHASE 2 — SHARED TAB STYLES
    ═══════════════════════════════════ */
    .tab-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
    .tab-title { font-family: var(--head); font-size: 24px; letter-spacing: 0.5px; margin-bottom: 3px; }
    .tab-sub { font-size: 13px; color: var(--muted); }

    .toggle-group { display: flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; align-self: flex-start; }
    .toggle-btn { padding: 7px 18px; font-size: 12px; font-weight: 600; background: none; border: none; color: var(--muted); transition: all 0.15s; cursor: pointer; }
    .toggle-btn.active { background: var(--accent); color: #fff; }

    .table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; overflow-x: auto; }
    .main-table { width: 100%; border-collapse: collapse; min-width: 480px; }
    .main-table th { text-align: left; padding: 9px 14px; font-size: 10px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 1px solid var(--border); background: var(--surface); white-space: nowrap; }
    .main-table td { padding: 11px 14px; font-size: 13px; border-bottom: 1px solid rgba(26,46,80,0.5); vertical-align: middle; }
    .main-table tr:last-child td { border-bottom: none; }
    .main-table tbody tr:hover td { background: var(--card-hover); }

    .rank-cell { width: 52px; }
    .rank-num { font-weight: 700; font-size: 13px; }
    .rank-1 .rank-num { color: var(--gold); }
    .rank-2 .rank-num { color: var(--silver); }
    .rank-3 .rank-num { color: var(--bronze); }
    .move-up { color: var(--success); font-size: 10px; margin-left: 3px; }
    .move-dn { color: var(--danger); font-size: 10px; margin-left: 3px; }
    .move-eq { color: var(--dim); font-size: 10px; margin-left: 3px; }
    .pts-strong { font-weight: 700; }
    .pts-muted { color: var(--muted); font-size: 12px; }

    .form-bars { display: inline-flex; gap: 2px; align-items: flex-end; vertical-align: middle; }
    .form-bar { width: 5px; border-radius: 2px; min-height: 4px; }

    /* ═══════════════════════════════════
       STATS TAB
    ═══════════════════════════════════ */
    .form-table { width: 100%; border-collapse: collapse; min-width: 560px; }
    .form-table th { text-align: right; padding: 9px 10px; font-size: 10px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 1px solid var(--border); background: var(--surface); white-space: nowrap; }
    .form-table th:first-child, .form-table th:nth-child(2) { text-align: left; }
    .form-table td { padding: 10px 10px; font-size: 13px; border-bottom: 1px solid rgba(26,46,80,0.5); text-align: right; vertical-align: middle; }
    .form-table td:first-child, .form-table td:nth-child(2) { text-align: left; }
    .form-table tbody tr:hover td { background: var(--card-hover); }
    .hot-row td:first-child { border-left: 3px solid var(--success); }
    .cold-row td:first-child { border-left: 3px solid var(--danger); }
    .status-hot { color: var(--success); font-size: 10px; font-weight: 700; white-space: nowrap; }
    .status-cold { color: var(--danger); font-size: 10px; font-weight: 700; white-space: nowrap; }
    .status-steady { color: var(--muted); font-size: 10px; font-weight: 600; }

    /* ═══════════════════════════════════
       RIVALRY TAB
    ═══════════════════════════════════ */
    .rivalry-selector { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 24px; margin-bottom: 20px; display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
    .vs-text { font-family: var(--head); font-size: 28px; color: var(--accent); padding-bottom: 4px; flex-shrink: 0; }
    .h2h-banner { background: linear-gradient(135deg, var(--card) 0%, #0C1C38 100%); border: 1px solid var(--border); border-radius: var(--r); padding: 28px 32px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
    .h2h-manager { text-align: center; flex: 1; }
    .h2h-mgr-name { font-family: var(--head); font-size: 20px; letter-spacing: 0.5px; margin-bottom: 6px; }
    .h2h-mgr-wins { font-size: 48px; font-weight: 700; line-height: 1; }
    .h2h-mgr-wins.winner { color: var(--success); }
    .h2h-vs-divider { font-family: var(--head); font-size: 32px; color: var(--border); padding: 0 16px; }
    .h2h-stats-row { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
    .h2h-stat { flex: 1; min-width: 100px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 14px 12px; text-align: center; }
    .h2h-stat-val { font-family: var(--head); font-size: 22px; }
    .h2h-stat-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 3px; }

    /* ═══════════════════════════════════
       AWARDS TAB
    ═══════════════════════════════════ */
    .awards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
    .award-tally-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
    .award-tally-title { font-family: var(--head); font-size: 18px; letter-spacing: 0.5px; margin-bottom: 14px; }
    .tally-table { width: 100%; border-collapse: collapse; }
    .tally-table td { padding: 9px 6px; font-size: 13px; border-bottom: 1px solid rgba(26,46,80,0.4); vertical-align: middle; }
    .tally-table tr:last-child td { border-bottom: none; }
    .tally-rank { color: var(--muted); font-size: 11px; width: 22px; }
    .tally-name { font-weight: 600; }
    .tally-bar-wrap { width: 64px; padding: 0 8px; }
    .tally-bar { height: 4px; border-radius: 2px; }
    .tally-count { text-align: right; white-space: nowrap; font-size: 12px; }
    .awards-history-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; }
    .history-table { width: 100%; border-collapse: collapse; min-width: 480px; }
    .history-table th { text-align: left; padding: 8px 12px; font-size: 10px; font-weight: 700; color: var(--dim); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border); background: var(--surface); }
    .history-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid rgba(26,46,80,0.5); }
    .history-table tbody tr:last-child td { border-bottom: none; }
    .motw-name { color: var(--success); font-weight: 600; }
    .dotw-name { color: var(--danger); font-weight: 600; }

    /* ═══════════════════════════════════
       AVERAGES TAB
    ═══════════════════════════════════ */
    .cbar-wrap { display:flex; align-items:center; gap:6px; }
    .cbar { flex:1; height:6px; background:var(--border); border-radius:3px; min-width:60px; overflow:hidden; }
    .cbar-fill { height:100%; border-radius:3px; transition:width 0.4s; }
    .spark-svg { vertical-align:middle; }

    /* ═══════════════════════════════════
       HABITS TAB
    ═══════════════════════════════════ */
    .stacked { display:flex; height:14px; border-radius:3px; overflow:hidden; gap:1px; min-width:120px; }
    .stacked .seg { display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700; color:rgba(255,255,255,0.85); transition:width 0.3s; }
    .arch-tag { font-size:10px; color:var(--muted); margin-top:2px; }

    /* ═══════════════════════════════════
       THE RACE
    ═══════════════════════════════════ */
    .race-hero { background:linear-gradient(135deg,rgba(8,18,36,0.98),rgba(12,24,46,0.97)); border:1px solid rgba(245,158,11,0.15); border-radius:var(--r); padding:20px 24px; margin-bottom:16px; position:relative; overflow:hidden; }
    .race-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(245,158,11,0.5) 40%,rgba(255,220,80,0.9) 50%,rgba(245,158,11,0.5) 60%,transparent); }
    .race-stat-row { display:flex; gap:24px; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
    .race-stat { text-align:center; }
    .race-stat-val { font-size:22px; font-weight:800; line-height:1; }
    .race-stat-lbl { font-size:8px; font-weight:700; letter-spacing:2px; color:var(--dim); margin-top:4px; text-transform:uppercase; }
    .race-mini-bars { display:flex; gap:2px; align-items:flex-end; height:36px; margin-bottom:4px; }
    .race-mini-bar { flex:1; border-radius:2px 2px 0 0; min-width:2px; transition:height 0.3s; }
    .race-section-title { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin:16px 0 10px; }
    .prize-seat { background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); padding:14px 16px; margin-bottom:8px; display:flex; align-items:center; gap:12px; }
    .prize-seat.gold { border-color:rgba(245,158,11,0.35); background:rgba(245,158,11,0.05); }
    .prize-seat.silver { border-color:rgba(148,163,184,0.3); }
    .prize-seat.bronze { border-color:rgba(205,127,50,0.3); }
    .prize-pos { font-family:var(--head); font-size:28px; min-width:36px; text-align:center; }
    .prize-info { flex:1; }
    .prize-name { font-weight:700; font-size:14px; }
    .prize-verdict { font-size:11px; color:var(--muted); margin-top:2px; }
    .verdict-safe { color:var(--success); }
    .verdict-threat { color:var(--warning); }
    .verdict-danger { color:var(--danger); }

    /* ═══════════════════════════════════
       GW RECAP
    ═══════════════════════════════════ */
    .recap-gw-btn { padding:5px 10px; border-radius:6px; border:1px solid var(--border); background:var(--card); color:var(--muted); font-size:11px; font-weight:600; cursor:pointer; transition:all 0.15s; }
    .recap-gw-btn:hover { border-color:var(--accent); color:var(--accent); }
    .recap-gw-btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }
    .recap-gw-btn.gw-btn-future { opacity:0.45; border-style:dashed; }
    .recap-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:20px; }
    .recap-stat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); padding:14px 16px; }
    .recap-stat-lbl { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
    .recap-stat-val { font-size:20px; font-weight:800; line-height:1; }
    .recap-stat-sub { font-size:11px; color:var(--muted); margin-top:4px; }
    .recap-movers { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:20px; }
    .recap-mover-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); padding:14px 16px; }
    .recap-mover-title { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
    @media (max-width:768px) { .recap-stats-row { grid-template-columns:1fr 1fr; } .recap-movers { grid-template-columns:1fr; } }

    /* ═══════════════════════════════════
       DATA IMPORT (SETTINGS)
    ═══════════════════════════════════ */
    .import-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
    .import-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
    .import-card-title { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
    .import-card-desc { font-size: 12px; color: var(--muted); line-height: 1.5; flex: 1; }
    .csv-drop {
      border: 2px dashed var(--border); border-radius: var(--r-sm); padding: 20px 16px;
      text-align: center; cursor: pointer; transition: all 0.18s; color: var(--muted); font-size: 12px; line-height: 1.5;
    }
    .csv-drop:hover, .csv-drop.drag-over { border-color: var(--accent); background: var(--accent-dim); color: var(--accent-lt); }
    .csv-drop-icon { font-size: 22px; margin-bottom: 6px; }
    .csv-preview { margin-top: 10px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); display: none; font-size: 12px; }
    .csv-preview.show { display: block; }
    .csv-preview-actions { display: flex; gap: 8px; margin-top: 10px; }
    @media (max-width: 768px) { .import-grid { grid-template-columns: 1fr; } }

    /* ═══════════════════════════════════
       FIXTURES TAB (H2H)
    ═══════════════════════════════════ */
    .fixture-row {
      display: flex; align-items: center; gap: 16px;
      background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm);
      padding: 14px 20px; margin-bottom: 8px;
    }
    .fixture-mgr { min-width: 0; flex: 1; }
    .fixture-mgr[style*="text-align:right"] .fixture-name { text-align: right; }
    .fixture-mgr[style*="text-align:right"] .fixture-team { text-align: right; }
    .fixture-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fixture-team { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fixture-winner .fixture-name { color: var(--success); }
    .fixture-scores {
      display: flex; align-items: center; gap: 10px; flex-shrink: 0;
      background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
      padding: 8px 18px; min-width: 110px; justify-content: center;
    }
    .fixture-score { font-family: var(--head); font-size: 24px; min-width: 28px; text-align: center; line-height: 1; }
    .fixture-score.score-win { color: var(--success); }
    .fixture-score.score-draw { color: var(--muted); }
    .fixture-score.score-loss { color: var(--danger); }
    .fixture-sep { color: var(--dim); font-size: 14px; }
    .fixture-vs { font-family: var(--head); font-size: 18px; color: var(--dim); }
    @media (max-width: 600px) {
      .fixture-row { flex-direction: column; align-items: stretch; gap: 10px; }
      .fixture-mgr { text-align: center !important; }
      .fixture-mgr[style*="text-align:right"] .fixture-name,
      .fixture-mgr[style*="text-align:right"] .fixture-team { text-align: center; }
      .fixture-scores { align-self: center; }
    }

    /* ═══════════════════════════════════
       TOAST
    ═══════════════════════════════════ */
    #toast { position: fixed; bottom: 28px; right: 28px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 20px; font-size: 13px; font-weight: 500; z-index: 9999; box-shadow: 0 8px 32px rgba(0,0,0,0.4); transform: translateY(80px); opacity: 0; transition: all 0.3s; pointer-events: none; }
    #toast.show { transform: translateY(0); opacity: 1; }
    #toast.t-success { border-color: rgba(34,197,94,0.4); color: var(--success); }
    #toast.t-error { border-color: rgba(239,68,68,0.4); color: var(--danger); }

    @media (max-width: 768px) {
      .awards-grid { grid-template-columns: 1fr; }
      .h2h-banner { padding: 20px; }
      .rivalry-selector { flex-direction: column; align-items: stretch; }
      .vs-text { text-align: center; }
    }
  /* ═══════════════════════════════════
     TOURNAMENTS
  ═══════════════════════════════════ */
  .tourn-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
  .tourn-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:20px; cursor:pointer; transition:all 0.18s; }
  .tourn-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 20px rgba(0,0,0,0.3); }
  .tourn-type-badge { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:3px 8px; border-radius:4px; display:inline-block; margin-bottom:10px; }
  .tourn-type-badge.fa-cup { background:rgba(239,68,68,0.15); color:#EF4444; }
  .tourn-type-badge.lms    { background:rgba(245,158,11,0.15); color:#F59E0B; }
  .tourn-type-badge.ucl    { background:rgba(34,197,94,0.15);  color:#22C55E; }
  .tourn-card-name { font-family:var(--head); font-size:20px; letter-spacing:0.5px; margin-bottom:6px; }
  .tourn-card-meta { font-size:12px; color:var(--muted); }
  .tourn-status-pill { display:inline-flex; align-items:center; gap:5px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-top:12px; padding:4px 10px; border-radius:20px; }
  .tourn-status-pill.active   { background:rgba(34,197,94,0.12);  color:var(--success); }
  .tourn-status-pill.setup    { background:rgba(245,158,11,0.12); color:var(--warning); }
  .tourn-status-pill.complete { background:rgba(138,155,176,0.12);color:var(--muted); }
  .tourn-status-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }

  /* Type picker */
  .type-pick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
  .type-pick-card { background:var(--surface); border:2px solid var(--border); border-radius:var(--r); padding:20px 12px; text-align:center; cursor:pointer; transition:all 0.18s; }
  .type-pick-card:hover,.type-pick-card.selected { border-color:var(--accent); background:var(--accent-dim); }
  .tpc-icon { font-size:28px; margin-bottom:8px; }
  .tpc-name { font-family:var(--head); font-size:17px; letter-spacing:0.5px; }
  .tpc-desc { font-size:11px; color:var(--muted); margin-top:4px; line-height:1.4; }

  /* Quick Results panel */
  .quick-results-section { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
  .qr-row { display:grid; grid-template-columns:1fr 56px 14px 56px 1fr 22px; gap:6px; align-items:center; padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
  .qr-row.qr-done-row { opacity:0.55; }
  .qr-mgr { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .qr-mgr.right { text-align:right; }
  .qr-inp { width:56px; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:5px 4px; font-size:13px; font-weight:600; color:var(--text); }
  .qr-inp:focus { border-color:var(--accent); outline:none; }
  .qr-sep { text-align:center; color:var(--muted); font-size:12px; }
  .qr-tick { text-align:center; font-size:12px; color:var(--success); }
  /* Round progress strip */
  .round-progress { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 14px; margin-bottom:12px; }
  .rp-title { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:8px; }
  .rp-legs { display:flex; flex-wrap:wrap; gap:8px; }
  .rp-leg { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; padding:4px 10px; border-radius:20px; border:1px solid var(--border); }
  .rp-leg.done { background:rgba(34,197,94,0.1); border-color:rgba(34,197,94,0.3); color:var(--success); }
  .rp-leg.active { background:rgba(59,130,246,0.1); border-color:rgba(59,130,246,0.3); color:var(--accent-lt); }
  .rp-leg.pending { color:var(--dim); }
  .rp-gw-chips { display:flex; flex-wrap:wrap; gap:6px; }
  .rp-chip { font-size:11px; font-weight:700; padding:3px 9px; border-radius:12px; border:1px solid var(--border); }
  .rp-chip.done { background:rgba(34,197,94,0.1); border-color:rgba(34,197,94,0.3); color:var(--success); }
  .rp-chip.active { background:rgba(59,130,246,0.12); border-color:rgba(59,130,246,0.35); color:var(--accent-lt); }
  .rp-chip.pending { color:var(--dim); background:rgba(255,255,255,0.03); }
  .qr-leg-hd { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin:12px 0 6px; display:flex; align-items:center; gap:8px; }
  .qr-leg-hd:first-child { margin-top:0; }

  /* Wizard steps */
  .tourn-wizard { padding:4px 0; }
  .tourn-wizard-step { display:none; }
  .tourn-wizard-step.active { display:block; }
  .preview-schedule { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; margin:16px 0; }
  .preview-row { display:flex; align-items:center; justify-content:space-between; padding:10px 16px; border-bottom:1px solid rgba(26,46,80,0.5); font-size:13px; }
  .preview-row:last-child { border-bottom:none; }
  .preview-row.sf-row  { color:var(--warning); }
  .preview-row.fin-row { color:var(--accent); font-weight:600; }
  .preview-row.fin-row .pr-gw { background:var(--accent); color:#fff; border-radius:4px; padding:2px 7px; font-size:11px; }
  .pr-name { font-weight:500; }
  .pr-gw   { font-size:12px; color:var(--muted); background:var(--card); border-radius:4px; padding:2px 7px; }

  /* Participant selector */
  .participant-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:6px; max-height:260px; overflow-y:auto; margin:12px 0; }
  .part-item { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:8px 10px; cursor:pointer; transition:all 0.15s; font-size:12px; }
  .part-item.selected { border-color:var(--accent); background:var(--accent-dim); }
  .part-check { width:14px; height:14px; border-radius:3px; border:1px solid var(--border); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:10px; }
  .part-item.selected .part-check { background:var(--accent); border-color:var(--accent); color:#fff; }
  .part-count-badge { background:var(--accent); color:#fff; font-size:11px; font-weight:700; padding:2px 8px; border-radius:12px; }

  /* Draw modal */
  .draw-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:500; display:none; align-items:center; justify-content:center; }
  .draw-overlay.open { display:flex; }
  .draw-box { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:28px 24px; max-width:560px; width:90%; max-height:82vh; overflow-y:auto; }
  .draw-title { font-family:var(--head); font-size:26px; letter-spacing:1px; text-align:center; margin-bottom:6px; }
  .draw-subtitle { text-align:center; font-size:12px; color:var(--muted); margin-bottom:24px; }
  .draw-pairs { display:flex; flex-direction:column; gap:8px; }
  .draw-pair { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:11px 14px; display:flex; align-items:center; gap:10px; opacity:0; transition:opacity 0.3s; }
  .draw-pair.reveal { opacity:1; }
  .draw-num { font-size:10px; color:var(--dim); min-width:18px; }
  .draw-home { flex:1; text-align:right; font-weight:600; font-size:13px; }
  .draw-vs   { font-size:10px; color:var(--dim); font-weight:700; padding:0 6px; }
  .draw-away { flex:1; font-weight:600; font-size:13px; }

  /* FA Cup bracket */
  .bracket-scroll { overflow-x:auto; padding-bottom:12px; }
  .bracket { display:flex; gap:0; align-items:flex-start; min-width:max-content; padding:8px 0; }
  .bracket-col { display:flex; flex-direction:column; }
  .bracket-col-label { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; padding:0 12px 10px; white-space:nowrap; }
  .bracket-matches { display:flex; flex-direction:column; }
  .bracket-match { background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); margin:4px 8px; overflow:hidden; min-width:174px; cursor:pointer; transition:border-color 0.18s; }
  .bracket-match:hover { border-color:var(--accent); }
  .bracket-match.two-leg { border-top:2px solid var(--warning); }
  .bm-row { display:flex; align-items:center; gap:6px; padding:8px 10px; font-size:12px; }
  .bm-row + .bm-row { border-top:1px solid var(--border); }
  .bm-row.won { background:rgba(34,197,94,0.08); }
  .bm-row.won .bm-name { color:var(--success); font-weight:700; }
  .bm-name  { flex:1; font-size:12px; }
  .bm-score { font-size:13px; font-weight:700; color:var(--accent-lt); min-width:22px; text-align:right; }
  .bm-score.empty { color:var(--dim); }
  .bracket-spacer { flex:1; min-height:16px; }
  .leg-tag { font-size:9px; font-weight:700; padding:1px 5px; border-radius:3px; margin-left:2px; }
  .leg-tag.l1 { background:rgba(59,130,246,0.15); color:var(--accent); }
  .leg-tag.l2 { background:rgba(245,158,11,0.15); color:var(--warning); }

  /* LMS */
  .lms-progress-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:18px 20px; margin-bottom:18px; }
  .lms-bar-wrap { background:var(--surface); border-radius:20px; height:10px; overflow:hidden; margin:10px 0; }
  .lms-bar-fill { height:100%; border-radius:20px; background:linear-gradient(90deg,var(--success),var(--accent)); transition:width 0.5s; }
  .lms-survivor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); gap:7px; margin-bottom:20px; }
  .lms-tile { background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 12px; transition:all 0.2s; }
  .lms-tile.eliminated { opacity:0.35; border-style:dashed; }
  .lms-tile.danger     { border-color:var(--danger);  background:rgba(239,68,68,0.06); }
  .lms-tile.safe       { border-color:var(--success); background:rgba(34,197,94,0.06); }
  .lms-tile.winner-tile{ border-color:var(--gold); background:rgba(245,158,11,0.1); }
  .lms-tile-name { font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lms-tile-score{ font-size:11px; color:var(--muted); margin-top:2px; }
  .lms-elim-log { display:flex; flex-direction:column; gap:7px; }
  .lms-elim-row { background:var(--card); border:1px solid var(--border); border-left:3px solid var(--danger); border-radius:var(--r-sm); padding:10px 14px; font-size:12px; }
  .lms-elim-gw { font-family:var(--head); font-size:13px; color:var(--muted); margin-bottom:4px; }
  .lms-elim-names { color:var(--danger); }
  .lms-sched-row { display:flex; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid rgba(26,46,80,0.4); font-size:13px; }
  .lms-sched-row:last-child { border-bottom:none; }
  .lms-sched-row.current-gw { background:var(--accent-dim); border-radius:var(--r-sm); padding:9px 10px; }
  .lms-sched-gw { font-family:var(--head); font-size:15px; min-width:52px; }
  .lms-sched-elim { font-weight:700; color:var(--danger); min-width:80px; font-size:12px; }
  .lms-sched-remain { color:var(--muted); font-size:12px; }

  /* UCL groups */
  .ucl-groups-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; margin-bottom:20px; }
  .ucl-group-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
  .ucl-group-hd { background:var(--surface); padding:9px 14px; font-family:var(--head); font-size:14px; letter-spacing:0.5px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
  .ucl-gtable { width:100%; border-collapse:collapse; }
  .ucl-gtable th { font-size:9px; font-weight:700; color:var(--dim); text-transform:uppercase; letter-spacing:0.3px; padding:5px 8px; text-align:right; }
  .ucl-gtable th:first-child { text-align:left; }
  .ucl-gtable td { font-size:11px; padding:6px 8px; text-align:right; border-top:1px solid rgba(26,46,80,0.35); }
  .ucl-gtable td:first-child { text-align:left; font-size:12px; }
  .ucl-gtable tr.qualifies td:first-child { color:var(--success); font-weight:600; }
  .ucl-q-line td { border-top:2px solid var(--accent) !important; }

  /* Result entry modal */
  .result-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:400; display:none; align-items:center; justify-content:center; }
  .result-overlay.open { display:flex; }
  .result-box { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:26px; max-width:360px; width:90%; }
  .result-box h4 { font-family:var(--head); font-size:20px; margin-bottom:18px; text-align:center; }
  .result-scores-row { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
  .result-mgr { flex:1; text-align:center; }
  .result-mgr-name { font-size:11px; font-weight:600; margin-bottom:6px; color:var(--muted); }
  .result-score-inp { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px; color:var(--text); font-size:26px; font-weight:700; text-align:center; width:100%; font-family:var(--head); }
  .result-vs-divider { font-size:16px; color:var(--dim); font-weight:700; }
  .result-tie-section { margin-bottom:14px; display:none; }
  .result-tie-section label { font-size:11px; font-weight:700; color:var(--warning); text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:6px; }

  /* Tournament detail header */
  .tourn-detail-hd { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
  .tourn-back { background:none; border:none; color:var(--muted); font-size:22px; cursor:pointer; padding:2px 6px; line-height:1; }
  .tourn-back:hover { color:var(--text); }
  .tourn-detail-name { font-family:var(--head); font-size:24px; letter-spacing:0.5px; }
  .tourn-detail-meta { font-size:12px; color:var(--muted); margin-top:2px; }
  .tourn-phase-tabs { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
  .tourn-tab-btn { padding:7px 14px; border-radius:var(--r-sm); border:1px solid var(--border); background:transparent; font-size:12px; font-weight:600; color:var(--muted); cursor:pointer; transition:all 0.18s; }
  .tourn-tab-btn.active { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
  .tourn-action-row { display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }

  /* ═══════════════════════════════════
     PHASE 4 — BULLETINS
  ═══════════════════════════════════ */
  .bulletin-section { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:16px; margin-bottom:12px; }
  .bulletin-section-header { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .bulletin-section-icon { font-size:20px; flex-shrink:0; }
  .bulletin-section-title { font-weight:700; font-size:14px; }
  .bulletin-section-hint { font-size:11px; color:var(--muted); margin-top:2px; }
  .bulletin-textarea { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); padding:12px; color:var(--text); font-size:13px; line-height:1.6; min-height:88px; resize:vertical; font-family:var(--body); }
  .bulletin-textarea:focus { outline:none; border-color:var(--accent); }

  /* ═══════════════════════════════════
     PHASE 4 — MANAGER VIEW
  ═══════════════════════════════════ */
  .mv-profile-header { display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:20px; margin-bottom:16px; }
  .mv-avatar { width:52px; height:52px; border-radius:50%; background:var(--accent-dim); border:2px solid var(--accent); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:700; color:var(--accent-lt); flex-shrink:0; }
  .mv-profile-name { font-size:20px; font-weight:700; }
  .mv-profile-team { font-size:13px; color:var(--muted); }
  .mv-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
  .mv-stat-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-sm); padding:14px 16px; }
  .mv-stat-label { font-size:10px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; }
  .mv-stat-val { font-size:22px; font-weight:700; }
  .mv-section-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:16px; }
  .mv-section-title { font-weight:700; font-size:13px; margin-bottom:4px; }
  .mv-form-bars { display:flex; gap:8px; align-items:flex-end; height:80px; margin-top:12px; }
  .mv-form-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; }
  .mv-form-bar-val { font-size:11px; font-weight:700; color:var(--accent-lt); }
  .mv-form-bar-outer { flex:1; width:100%; background:var(--surface); border-radius:3px; overflow:hidden; display:flex; align-items:flex-end; min-height:40px; }
  .mv-form-bar-inner { width:100%; border-radius:3px; transition:height 0.3s; }
  .mv-form-bar-label { font-size:10px; color:var(--muted); }