:root,
    [data-theme="light"] {
      --font-body: 'General Sans', Inter, sans-serif;
      --font-display: 'Cabinet Grotesk', 'General Sans', sans-serif;
      --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
      --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
      --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
      --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
      --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-5: 1.25rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --color-bg: #f4f5f8;
      --color-surface: #ffffff;
      --color-surface-2: #f1f4fb;
      --color-surface-3: #e8edf8;
      --color-border: rgba(12, 18, 28, 0.1);
      --color-text: #111827;
      --color-text-muted: #475569;
      --color-text-faint: #7c8799;
      --color-primary: #004898;
      --color-primary-strong: #002a59;
      --color-gold: #d3c59b;
      --color-gold-strong: #8a7640;
      --color-red: #e7323a;
      --color-blue-soft: rgba(0, 72, 152, 0.12);
      --color-gold-soft: rgba(211, 197, 155, 0.18);
      --color-red-soft: rgba(231, 50, 58, 0.12);
      --shadow-sm: 0 8px 20px rgba(15, 23, 42, 0.08);
      --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.16);
      --radius-sm: 0.75rem;
      --radius-md: 1rem;
      --radius-lg: 1.5rem;
      --radius-full: 999px;
      --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
      --topbar-bg: rgba(255, 255, 255, 0.82);
      --topbar-border: rgba(12, 18, 28, 0.1);
      --pill-bg: rgba(0, 0, 0, 0.05);
      --pill-color: #111827;
      --social-card-bg: rgba(255, 255, 255, 0.72);
      --social-card-border: rgba(0, 72, 152, 0.12);
      --tag-bg: rgba(0, 72, 152, 0.09);
      --tag-color: #004898;
      --tag-border: rgba(0, 72, 152, 0.18);
      --scoreline-color: #b91c1c;
    }

    [data-theme="dark"] {
      --color-bg: #07111f;
      --color-surface: #0d1b2d;
      --color-surface-2: #10233d;
      --color-surface-3: #163153;
      --color-border: rgba(255, 255, 255, 0.1);
      --color-text: #f7f9fc;
      --color-text-muted: #bfd0e8;
      --color-text-faint: #7f97b9;
      --color-primary: #2d73c7;
      --color-primary-strong: #004898;
      --color-gold: #d3c59b;
      --color-gold-strong: #e8d8a6;
      --color-red: #ff5a61;
      --color-blue-soft: rgba(45, 115, 199, 0.18);
      --color-gold-soft: rgba(211, 197, 155, 0.14);
      --color-red-soft: rgba(255, 90, 97, 0.14);
      --shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.24);
      --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.35);
      --topbar-bg: rgba(7, 17, 31, 0.68);
      --topbar-border: rgba(255, 255, 255, 0.08);
      --pill-bg: rgba(255, 255, 255, 0.04);
      --pill-color: #f7f9fc;
      --social-card-bg: rgba(8, 19, 36, 0.46);
      --social-card-border: rgba(255, 255, 255, 0.12);
      --tag-bg: rgba(255, 255, 255, 0.08);
      --tag-color: #ffffff;
      --tag-border: rgba(255, 255, 255, 0.16);
      --scoreline-color: #ffb7ba;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font-body);
      font-size: var(--text-base);
      color: var(--color-text);
      background:
        radial-gradient(circle at top left, rgba(45, 115, 199, 0.18), transparent 30%),
        radial-gradient(circle at bottom right, rgba(211, 197, 155, 0.14), transparent 28%),
        var(--color-bg);
      line-height: 1.5;
      transition: background var(--transition), color var(--transition);
    }

    [data-theme="light"] body {
      background:
        radial-gradient(circle at top left, rgba(0, 72, 152, 0.07), transparent 30%),
        radial-gradient(circle at bottom right, rgba(211, 197, 155, 0.10), transparent 28%),
        var(--color-bg);
    }

    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; height: auto; }
    button { font: inherit; }

    .skip-link {
      position: absolute; left: -999px; top: var(--space-4);
      background: var(--color-surface); color: var(--color-text);
      padding: var(--space-3) var(--space-4); border-radius: var(--radius-full); z-index: 100;
    }
    .skip-link:focus { left: var(--space-4); }

    .page-shell { max-width: 1440px; margin: 0 auto; padding: var(--space-4); }

    /* ── Topbar ── */
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      margin-bottom: var(--space-4);
      padding: var(--space-4) var(--space-5);
      background: var(--topbar-bg);
      border: 1px solid var(--topbar-border);
      border-radius: var(--radius-lg);
      backdrop-filter: blur(18px);
      transition: background var(--transition), border-color var(--transition);
    }

    .brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
    .crest {
      width: 75px;
      height: 75px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }
    .brand svg { width: 26px; height: 26px; color: #fff; }
    .brand-copy h1 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.02em; }
    .brand-copy p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

    .eyebrow {
      display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs);
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold-strong); margin-bottom: var(--space-1);
    }

    .topbar-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }

    .pill, .theme-toggle, .social-link {
      min-height: 44px; border-radius: var(--radius-full); border: 1px solid var(--color-border);
      background: var(--pill-bg); color: var(--pill-color);
      display: inline-flex; align-items: center; justify-content: center;
      gap: var(--space-2); padding: 0 var(--space-4);
      transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
    }
    .social-link { font-size: var(--text-sm); font-weight: 600; }
    .social-link:hover, .social-link:focus-visible { background: var(--color-blue-soft); transform: translateY(-1px); }
    .theme-toggle { width: 44px; padding: 0; cursor: pointer; }
    .theme-toggle:hover, .theme-toggle:focus-visible { transform: translateY(-1px); background: var(--color-blue-soft); }

    /* ── Layout ── */
    .dashboard { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: var(--space-4); align-items: start; }
    .main-column, .sidebar { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

    /* ── Panel base ── */
    .panel {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      transition: background var(--transition), border-color var(--transition);
    }

    .section-pad { padding: var(--space-5); }
    .section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
    .section-head h2, .section-head h3 { margin: 0; font-family: var(--font-display); font-size: clamp(1.2rem, 1.5vw, 1.7rem); }
    .section-head p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
    .muted { color: var(--color-text-muted); }

    /* ── Top intro (hero) ── */
    .top-intro {
      padding: clamp(1.5rem, 2vw, 2rem);
      background: linear-gradient(135deg, rgba(0, 72, 152, 0.92), rgba(4, 16, 35, 0.92));
      border: 1px solid rgba(211, 197, 155, 0.22);
    }
    [data-theme="light"] .top-intro {
      background: linear-gradient(135deg, #eef4ff, #dfeafb);
      border: 1px solid rgba(0, 72, 152, 0.12);
    }
    .top-intro-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--space-4); align-items: start; }
    .top-intro h2 {
      margin: 0 0 var(--space-3); font-family: var(--font-display);
      font-size: clamp(2rem, 3vw, 3rem); line-height: 0.98; max-width: 12ch; color: #fff;
    }
    .top-intro p { margin: 0 0 var(--space-4); color: rgba(255, 255, 255, 0.86); max-width: 56ch; }
    .top-intro .eyebrow { color: var(--color-gold); }

    [data-theme="light"] .top-intro h2,
    [data-theme="light"] .top-intro p,
    [data-theme="light"] .top-intro .tag {
      color: var(--color-text);
    }

    [data-theme="light"] .top-intro .tag {
      background: rgba(0, 72, 152, 0.08);
      border-color: rgba(0, 72, 152, 0.14);
    }

    [data-theme="light"] .top-intro .eyebrow {
      color: var(--color-primary);
    }

    .hero-tags, .fixture-meta, .card-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .tag {
      display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem;
      border-radius: var(--radius-full); font-size: var(--text-xs);
      border: 1px solid var(--tag-border); background: var(--tag-bg); color: var(--tag-color);
      transition: background var(--transition), color var(--transition), border-color var(--transition);
    }
    .top-intro .tag {
      background: rgba(255, 255, 255, 0.12);
      border-color: rgba(255, 255, 255, 0.22);
      color: #fff;
    }

    /* ── Social cluster inside hero ── */
    .social-cluster { display: grid; gap: var(--space-3); align-self: stretch; }
    .social-card {
      padding: var(--space-4); border-radius: var(--radius-md);
      border: 1px solid var(--social-card-border);
      background: var(--social-card-bg);
      transition: background var(--transition), border-color var(--transition);
    }
    .top-intro .social-card {
      background: rgba(8, 19, 36, 0.46);
      border-color: rgba(255, 255, 255, 0.12);
    }
    [data-theme="light"] .top-intro .social-card {
      background: rgba(255, 255, 255, 0.18);
      border-color: rgba(255, 255, 255, 0.3);
    }
    .social-card strong { display: block; margin-bottom: var(--space-2); font-family: var(--font-display); font-size: var(--text-lg); color: #fff; }
    .social-card .muted { color: rgba(255, 255, 255, 0.7); }
    .social-card .counter-title { color: var(--color-gold); }
    .social-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
    .social-links .social-link {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.2);
      color: #fff;
    }
    .social-links .social-link:hover { background: rgba(255, 255, 255, 0.2); }

    /* ── Next fixture card ── */
    .next-fixture-card {
      padding: var(--space-5);
      background: linear-gradient(180deg, var(--color-blue-soft), transparent 45%);
      border-radius: var(--radius-md);
    }
    .teams-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
    .team { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); }
    .logo-wrap {
      width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%;
      background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface-3));
      border: 1px solid var(--color-border); padding: var(--space-3);
      transition: background var(--transition), border-color var(--transition);
    }
    .logo-wrap img {
      width: 52px;
      height: 52px;
      object-fit: contain;
    }
    .versus { font-family: var(--font-display); font-size: clamp(1.3rem, 1.8vw, 1.8rem); color: var(--color-gold-strong); letter-spacing: 0.08em; }
    .fixture-kickoff {
      margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md);
      background: var(--color-surface-2); border: 1px solid var(--color-border);
      display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
      transition: background var(--transition), border-color var(--transition);
    }

    /* ── Fixtures list ── */
    .fixtures-panel { padding: var(--space-5); }
    .fixtures-list { display: flex; flex-direction: column; gap: var(--space-3); }
    .fixture-card {
      display: flex; align-items: stretch; justify-content: space-between; gap: var(--space-3);
      padding: var(--space-3) var(--space-4);
      background: linear-gradient(180deg, var(--color-blue-soft), transparent 60%), var(--color-surface-2);
      border-radius: var(--radius-md); border: 1px solid var(--color-border);
      transition: background var(--transition), border-color var(--transition);
    }
    .fixture-main { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; }
    .fixture-team-logo {
      width: 34px;
      height: 34px;
      border-radius: 30%;
      background: var(--color-surface-3);
      border: 1px solid var(--color-border);
      flex-shrink: 0;
      object-fit: contain;
      padding: 3px;
      box-sizing: border-box; /* this is the key line */
    }
    .fixture-teams { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; min-width: 0; }
    .fixture-side { color: var(--color-text); font-weight: 600; }
    .fixture-vs { color: var(--color-gold-strong); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; }
    .fixture-meta-block { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 0.15rem; min-width: 130px; }

    .note-card { padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: background var(--transition), border-color var(--transition); }

    .result-pill {
      min-width: 42px; min-height: 42px; display: inline-grid; place-items: center;
      border-radius: 14px; font-weight: 700; letter-spacing: 0.04em; border: 1px solid transparent;
    }
    .result-pill.win { background: rgba(211, 197, 155, 0.18); color: var(--color-gold-strong); border-color: rgba(211,197,155,0.24); }
    .result-pill.draw { background: var(--color-blue-soft); color: var(--color-primary); border-color: rgba(45,115,199,0.2); }
    .result-pill.loss { background: var(--color-red-soft); color: var(--color-red); border-color: rgba(255,90,97,0.22); }

    [data-theme="light"] .result-pill.draw { color: #004898; }
    [data-theme="light"] .result-pill.loss { color: #c0262d; }

    .snapshot-item, .scorer-item, .note-item {
      display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
      padding: var(--space-3) var(--space-4);
      background: var(--color-surface-2); border-radius: var(--radius-md); border: 1px solid var(--color-border);
      transition: background var(--transition), border-color var(--transition);
    }
    .snapshot-item strong, .scorer-item strong, .note-item strong { font-size: var(--text-sm); }
    .snapshot-item span, .scorer-item span, .note-item span { color: var(--color-text-muted); font-size: var(--text-sm); }

    /* ── Sidebar ── */
    .sidebar-stack { display: flex; flex-direction: column; gap: var(--space-4); }
    .counter-card, .calendar-card {
      padding: var(--space-5); background: var(--color-surface);
      border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
      transition: background var(--transition), border-color var(--transition);
    }
    .counter-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
    .counter-title { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-gold-strong); margin-bottom: var(--space-1); }
    .counter-icon {
      width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
      background: linear-gradient(180deg, var(--color-blue-soft), var(--color-gold-soft));
      border: 1px solid var(--color-border); font-size: 1.2rem; flex-shrink: 0;
    }
    .counter-value { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
    .time-box {
      padding: var(--space-3); border-radius: var(--radius-md);
      background: var(--color-surface-2); border: 1px solid var(--color-border); text-align: center;
      transition: background var(--transition), border-color var(--transition);
    }
    .time-box strong { display: block; font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1; margin-bottom: 0.35rem; }
    .time-box span { color: var(--color-text-faint); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; }
    .counter-footer { display: flex; flex-direction: column; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
    .scoreline {
      display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content;
      padding: 0.45rem 0.7rem; border-radius: var(--radius-full);
      background: var(--color-red-soft); color: var(--scoreline-color);
      border: 1px solid rgba(231, 50, 58, 0.2);
    }
    [data-theme="dark"] .scoreline { border-color: rgba(255,90,97,0.2); }

    /* ── Calendar card ── */
    .calendar-card[hidden] { display: none; }
    .calendar-preview { display: grid; gap: var(--space-3); }
    .calendar-thumb {
      overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--color-border);
      background: var(--color-surface-2); aspect-ratio: 16 / 10;
      display: grid; place-items: center; color: var(--color-text-faint); font-size: var(--text-sm);
    }
    .calendar-link {
      display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
      border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-gold), var(--color-gold-strong));
      color: #111; font-weight: 700; padding: 0 var(--space-4);
    }

    /* ── Sidebar pain-counter header panel ── */
    .pain-header {
      padding: var(--space-5) var(--space-5) var(--space-4);
      background: linear-gradient(135deg, var(--color-blue-soft), transparent);
      border-bottom: 1px solid var(--color-border);
    }
    .pain-header h2 { margin: 0 0 var(--space-1); font-family: var(--font-display); font-size: clamp(1.2rem, 1.5vw, 1.7rem); }
    .pain-header p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }

    /* ── Footer ── */
    .footer-note { padding: var(--space-4) var(--space-5); color: var(--color-text-faint); font-size: var(--text-sm); text-align: center; }

    /* ── Utilities ── */
    .empty-inline {
      color: var(--color-text-muted); font-size: var(--text-sm); padding: var(--space-4);
      border-radius: var(--radius-md); background: var(--color-surface-2);
      border: 1px dashed var(--color-border);
    }

    /* ── Responsive ── */
    @media (max-width: 1120px) {
      .dashboard, .top-intro-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 760px) {
      .page-shell { padding: var(--space-3); }
      .topbar { padding: var(--space-4); align-items: flex-start; flex-direction: column; }
      .topbar-actions { width: 100%; justify-content: space-between; }
      .teams-row { grid-template-columns: 1fr; }
      .versus { order: -1; text-align: center; }
      .fixture-card { flex-direction: column; align-items: flex-start; }
      .fixture-meta-block { min-width: 0; align-items: flex-start; text-align: left; width: 100%; }
      .section-pad, .fixtures-panel, .counter-card, .calendar-card, .next-fixture-card, .stat-card, .note-card, .top-intro { padding: var(--space-4); }
      .fixture-kickoff { flex-direction: column; align-items: flex-start; }
      .social-links { flex-direction: column; }
      .social-link { width: 100%; }
    }

    @media (max-width: 480px) {
      .logo-wrap { width: 64px; height: 64px; }
      .brand-copy h1 { font-size: 1.1rem; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    }