/* The Prism v2 — extracted stylesheet (Phase 0: verbatim fork of v1 CSS) */
    /* ── Reset ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* The Prism design tokens */
      --ink:      #0b0b0c;   /* v2: THE one dark — replaces #000/#0b0b0b/#0f172a */
      --ink-text: #ffffff;   /* text on --ink */
      --paper:  #ffffff;
      --accent: #2563EB;

      /* v2 semantic colors — exactly one of each */
      --danger:  #e23b4a;
      --warning: #f97316;
      --success: #16a34a;
      --live:    #e5392f;    /* live-match red — a deliberate, distinct signal */

      /* v2 radius scale (replaces ad-hoc 10/12/14/16/20px) */
      --r-sm:   8px;
      --r-md:   12px;
      --r-lg:   16px;
      --r-pill: 9999px;

      /* v2 spacing scale */
      --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

      /* v2 type scale (formalizes Home's existing sizes) */
      --fs-microlabel: 0.6rem;    /* tiny stat/field labels above a value */
      --fs-label:      0.68rem;   /* mono uppercase section labels */
      --fs-meta:    0.72rem;      /* metadata, secondary lines */
      --fs-body-sm: 0.78rem;      /* dense rows, compact body */
      --fs-body:    0.84rem;      /* default body */
      --fs-btn:     0.8rem;       /* button text */
      /* Nunito display scale — 5 steps (collapses ~35 ad-hoc sizes) */
      --fs-d5: 0.95rem;   /* small display / card titles */
      --fs-d4: 1.1rem;    /* sub-headers */
      --fs-d3: 1.35rem;   /* report names, section heroes */
      --fs-d2: 1.75rem;   /* screen heroes */
      --fs-d1: 2.25rem;   /* the big hero moment */
      --fs-title:   1.05rem;
      --fs-display: 1.5rem;

      /* Aliases that fix the team-analysis-report undefined-var bug (no rule edits needed) */
      --text-primary:   var(--text);
      --text-secondary: var(--text-dim);
      --border1:        var(--border);

      /* Base tokens (backward compat) */
      --rui-dark:    var(--ink);
      --rui-white:   #ffffff;
      --rui-light:   #f5f5f5;
      --rui-blue:    #2563EB;
      --rui-teal:    #2563EB;
      --rui-warning: #f97316;
      --rui-danger:  #e23b4a;
      --rui-slate:   #525252;
      --rui-gray:    #737373;

      /* Light canvas (default) */
      --bg:         #ffffff;
      --surface:    #ffffff;
      --surface2:   #fafafa;
      --surface3:   #f5f5f5;
      --border:     #e5e5e5;
      --border2:    rgba(0,0,0,0.12);
      --accent-dim: rgba(37,99,235,0.08);
      --text:       #000000;
      --text-dim:   #525252;
      --text-muted: #737373;
      --teal:       #2563EB;
      --user-bg:    #fafafa;

      /* Typography */
      --font-display: 'Nunito', system-ui, sans-serif;
      --font:         'Inter', system-ui, -apple-system, sans-serif;
      --font-mono:    'JetBrains Mono', ui-monospace, monospace;
      --text-xs:  0.625rem;   /* 10px — metadata, badges, labels */
      --text-nav: 0.8125rem;  /* 13px — nav items */

      /* Chat redesign tokens */
      --accent-soft:   #eef2fe;
      --surface-light: #fafafa;
      --border-strong: #d4d4d4;
      --muted-1: #525252;
      --muted-2: #737373;
      --muted-3: #a3a3a3;
      --shadow-card: 0 1px 0 rgba(0,0,0,0.02), 0 1px 3px rgba(0,0,0,0.05);

      /* Chat report-card surfaces. These were literal #fff / #000 / #dbe5fc, so
         an rb-report card stayed white in dark mode while --text went white with
         it: the player name, tab labels, narrative prose and every stat value
         rendered white-on-white and only the blue .hl spans survived. Anything a
         report card paints a background with belongs here, not inline. */
      --card-bg:            #ffffff;   /* the card itself */
      --card-pill-bg:       #ffffff;   /* pills and ghost buttons ON the card */
      --card-accent-border: #dbe5fc;   /* accent pill / user-bubble hairline */
      --card-invert-bg:     #000000;   /* verdict chip: inverts against the card */
      --card-invert-fg:     #ffffff;
      --card-invert-dim:    rgba(255,255,255,.55);
      --card-btn-bg:        #000000;   /* primary action button */
      --card-btn-fg:        #ffffff;
      --card-btn-bg-hover:  #1c1c1c;
    }

    html, body { height: 100%; overflow: hidden; }
    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--text);
      display: flex;
      height: 100dvh;
      -webkit-font-smoothing: antialiased;
    }
    body.dark {
      --bg:         #141414;
      --surface:    #1a1a1a;
      --surface2:   #1c1c1c;
      --surface3:   #1f1f1f;
      --border:     #262626;
      --border2:    #2a2a2a;
      --accent-dim: rgba(37,99,235,0.12);
      --text:       #ffffff;
      --text-dim:   #d4d4d4;
      --text-muted: #a3a3a3;
      --user-bg:    #1c1c1c;

      /* Chat redesign tokens — dark overrides (missing before, so these stayed
         on their light values in dark mode and rendered near-white chips/cards) */
      --accent-soft:   rgba(37,99,235,0.15);
      --surface-light: #1f1f1f;
      --border-strong: #404040;
      --muted-1: #d4d4d4;
      --muted-2: #a3a3a3;
      --muted-3: #737373;

      /* Report-card surfaces. The card follows the canvas, pills sit one step
         above it, and the primary button becomes accent-blue: a #000 button on a
         #1a1a1a card reads as disabled rather than as the main action. */
      --card-bg:            var(--surface);
      --card-pill-bg:       var(--surface3);
      --card-accent-border: rgba(37,99,235,.35);
      --card-invert-bg:     #000000;
      --card-invert-fg:     #ffffff;
      --card-invert-dim:    rgba(255,255,255,.55);
      --card-btn-bg:        var(--accent);
      --card-btn-fg:        #ffffff;
      --card-btn-bg-hover:  #1d4ed8;
    }

    /* ═══════════════════════════════════════════════════════════════
       v2 SHARED COMPONENT LIBRARY (.p-*)
       One vocabulary for cards, section headers, empties, errors,
       skeletons, pills, and the signature dark verdict chip.
       ═══════════════════════════════════════════════════════════════ */

    /* Card — the universal surface */
    .p-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-md);
      box-shadow: var(--shadow-card);
    }

    /* Section header — mono uppercase label + optional trailing action */
    .p-section-hd {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: var(--sp-3); margin-bottom: var(--sp-3);
    }
    .p-section-hd .p-eyebrow {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted);
    }
    .p-section-hd .p-action {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .06em; color: var(--accent);
      cursor: pointer; background: none; border: 0; padding: 0;
    }
    .p-section-hd .p-action:hover { text-decoration: underline; }

    /* The signature dark element — one standardized verdict/rating chip.
       Light card bodies everywhere; THIS is the single dark accent. */
    .p-verdict {
      display: inline-flex; flex-direction: column; align-items: flex-end;
      background: var(--ink); color: var(--ink-text);
      border-radius: var(--r-sm); padding: 8px 14px; text-align: right;
      line-height: 1.15;
    }
    .p-verdict .p-verdict-lbl {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 500;
      text-transform: uppercase; letter-spacing: .08em; opacity: .55;
    }
    .p-verdict .p-verdict-val { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; }
    .p-verdict .p-verdict-val .p-verdict-slash { color: var(--accent); margin: 0 2px; }
    body.dark .p-verdict { background: var(--paper); color: var(--ink); }

    /* Pill / badge system */
    .p-pill {
      display: inline-flex; align-items: center; gap: 5px;
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em;
      padding: 3px 9px; border-radius: var(--r-pill);
      background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border);
    }
    .p-pill.accent { background: var(--accent); color: #fff; border-color: transparent; }
    .p-pill.ink    { background: var(--ink); color: var(--ink-text); border-color: transparent; }
    .p-pill.ok     { background: rgba(22,163,74,.12);  color: var(--success); border-color: rgba(22,163,74,.25); }
    .p-pill.warn   { background: rgba(249,115,22,.12); color: var(--warning); border-color: rgba(249,115,22,.25); }
    .p-pill.danger { background: rgba(226,59,74,.12);  color: var(--danger);  border-color: rgba(226,59,74,.25); }

    /* Empty state — one component for every "nothing here yet" */
    .p-empty {
      display: flex; flex-direction: column; align-items: center; text-align: center;
      gap: var(--sp-2); padding: var(--sp-6) var(--sp-4);
      color: var(--text-muted);
    }
    .p-empty .p-empty-icon { font-size: 1.5rem; opacity: .5; }
    .p-empty .p-empty-title { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--text-dim); }
    .p-empty .p-empty-hint { font-size: var(--fs-body); max-width: 42ch; line-height: 1.5; }
    .p-empty .p-empty-cta { margin-top: var(--sp-2); }

    /* Error banner — one component for every fetch failure */
    .p-error {
      display: flex; align-items: flex-start; gap: var(--sp-3);
      background: var(--surface); border: 1px solid var(--border);
      border-left: 3px solid var(--danger); border-radius: var(--r-md);
      padding: var(--sp-3) var(--sp-4); color: var(--text-dim); font-size: var(--fs-body);
    }
    .p-error .p-error-body { flex: 1; line-height: 1.5; }
    .p-error .p-error-retry {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .05em; color: var(--accent);
      background: none; border: 0; cursor: pointer; padding: 0; white-space: nowrap;
    }
    .p-error .p-error-retry:hover { text-decoration: underline; }

    /* Skeleton loaders */
    @keyframes p-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
    .p-skel {
      background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
      background-size: 800px 100%; animation: p-shimmer 1.4s linear infinite;
      border-radius: var(--r-sm);
    }
    .p-skel-row  { height: 14px; margin-bottom: 8px; }
    .p-skel-tile { height: 64px; border-radius: var(--r-md); }
    @media (prefers-reduced-motion: reduce) { .p-skel { animation: none; } }

    /* Clickable entity row — legible clickability everywhere */
    .p-link-row { cursor: pointer; transition: background .12s ease; }
    .p-link-row:hover { background: var(--surface2); }
    .p-link-row .p-chevron { color: var(--text-muted); opacity: 0; transition: opacity .12s ease; }
    .p-link-row:hover .p-chevron { opacity: 1; }

    /* ── Chat rail (left conversation list, Claude-like) ── */
    #chat-rail {
      width: 248px;
      min-width: 248px;
      background: var(--surface);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      flex-shrink: 0;
    }
    /* Mobile-only drawer trigger + backdrop (desktop hides both) */
    #mobile-chats-btn {
      display: none; position: fixed; top: 10px; left: 12px; z-index: 45;
      width: 36px; height: 36px; align-items: center; justify-content: center;
      border-radius: 10px; border: 1px solid var(--border);
      background: var(--surface2); color: var(--text); cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,.25);
    }
    #chat-drawer-backdrop { display: none; }
    .cr-header {
      padding: 14px 14px 12px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
    .cr-title {
      font-family: var(--font-display);
      font-size: .85rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .cr-new {
      font-family: var(--font-display);
      font-size: .72rem;
      font-weight: 700;
      color: var(--accent);
      background: var(--accent-dim);
      border: 1px solid rgba(37,99,235,.2);
      border-radius: 7px;
      padding: 5px 11px;
      cursor: pointer;
      transition: background .12s, color .12s;
    }
    .cr-new:hover { background: var(--accent); color: #fff; }
    .cr-list {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
    }
    .cr-list::-webkit-scrollbar { width: 3px; }
    .cr-list::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
    .cr-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: background .12s;
    }
    .cr-item:hover { background: var(--surface2); }
    .cr-item.active { background: var(--accent-dim); }
    .cr-item-main { flex: 1; min-width: 0; }
    .cr-item-title {
      font-size: .8rem;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.3;
    }
    .cr-item.active .cr-item-title { color: var(--accent); }
    .cr-rename-input {
      width: 100%; font-size: .8rem; font-weight: 600; line-height: 1.3;
      color: var(--text); background: var(--bg); border: 1px solid var(--accent);
      border-radius: 6px; padding: 2px 6px; outline: none;
    }
    .cr-del-confirm { font-size: .62rem; font-weight: 700; color: var(--rui-danger, #e5484d); white-space: nowrap; }
    .cr-act.confirm { width: auto; padding: 0 6px; }
    .cr-item-time {
      font-family: var(--font-mono);
      font-size: .62rem;
      color: var(--text-muted);
      margin-top: 1px;
    }
    .cr-item-acts {
      display: none;
      gap: 2px;
      flex-shrink: 0;
    }
    .cr-item:hover .cr-item-acts { display: flex; }
    .cr-act {
      background: none;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      padding: 3px;
      border-radius: 5px;
      line-height: 0;
      transition: background .12s, color .12s;
    }
    .cr-act:hover { color: var(--text); background: var(--surface); }
    .cr-act.del:hover { color: var(--rui-danger); }
    .cr-empty {
      padding: 28px 18px;
      text-align: center;
      color: var(--text-muted);
      font-size: .76rem;
      line-height: 1.6;
    }

    /* ── Sidebar ── */
    #sidebar {
      width: 220px;
      min-width: 60px;
      max-width: 340px;
      background: #0b0b0b;
      color: #fff;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
      /* transition only fires on toggle-click, not during drag */
    }
    #sidebar.animating {
      transition: width .22s cubic-bezier(.4,0,.2,1);
    }
    body.light #sidebar {
      background: #fafafa;
      color: #000;
    }
    #sidebar.collapsed { width: 60px; }
    #sidebar.collapsed .sidebar-nav { padding: 8px 0; align-items: center; }
    #sidebar.collapsed .nav-icon { width: 18px; height: 18px; opacity: .7; }
    #sidebar.collapsed .logo-name,
    #sidebar.collapsed .logo-sub,
    #sidebar.collapsed .nav-label,
    #sidebar.collapsed .nav-badge,
    #sidebar.collapsed .nav-section-label,
    #sidebar.collapsed .nav-divider,
    #sidebar.collapsed .sidebar-footer { opacity: 0; pointer-events: none; width: 0; overflow: hidden; margin: 0; padding: 0; height: 0; }
    #sidebar.collapsed .nav-item {
      justify-content: center;
      padding: 0;
      width: 32px; height: 32px;
      margin: 0 auto;
      border-radius: 8px;
      border-color: transparent !important;
      flex-shrink: 0;
    }
    #sidebar.collapsed .sidebar-logo { justify-content: center; padding: 16px 0; }
    #sidebar.collapsed .logo-mark { justify-content: center; margin-bottom: 0; }

    /* Resize handle — right edge drag strip */
    #sidebar-resize-handle {
      position: absolute;
      right: 0; top: 0; bottom: 0;
      width: 5px;
      cursor: col-resize;
      z-index: 30;
      background: transparent;
      transition: background .15s;
    }
    #sidebar-resize-handle:hover,
    #sidebar-resize-handle.dragging { background: rgba(37,99,235,.45); }

    /* Toggle button — sits at top-right of the logo area */
    #sidebar-toggle {
      position: absolute;
      right: 8px;
      top: 11px;
      z-index: 20;
      width: 22px; height: 22px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: transparent;
      color: rgba(255,255,255,.4);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .12s, color .12s, opacity .12s;
      flex-shrink: 0;
    }
    #sidebar.collapsed #sidebar-toggle { opacity: 0; pointer-events: none; }
    #sidebar-toggle:hover { background: rgba(255,255,255,.08); color: #fff; }
    body.light #sidebar-toggle { border-color: rgba(0,0,0,.1); color: rgba(0,0,0,.4); }
    body.light #sidebar-toggle:hover { background: rgba(0,0,0,.05); color: #000; }

    .sidebar-logo {
      padding: 8px 14px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
    }
    .logo-mark {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 2px;
    }
    .logo-icon {
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      color: #fff;
    }
    body.light .logo-icon { color: #000; }
    .logo-icon svg { display: block; }
    .logo-name {
      font-family: var(--font-display);
      font-size: 1rem;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.025em;
      line-height: 1.1;
    }
    body.light .logo-name { color: #000; }
    .logo-dot { color: #2563EB; }
    .logo-sub {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.45);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      padding-left: 38px;
      margin-top: 0;
    }
    body.light .logo-sub { color: #a3a3a3; }

    /* ── Sidebar Navigation ── */
    .sidebar-nav {
      flex: 1;
      overflow-y: auto;
      padding: 10px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .sidebar-nav::-webkit-scrollbar { width: 3px; }
    .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

    .nav-section-label {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: #5a6480;
      font-weight: 700;
      padding: 14px 8px 6px;
    }
    .nav-divider {
      height: 1px;
      background: var(--border);
      margin: 8px 8px;
    }
    .nav-item {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 9999px;
      border: 1px solid transparent;
      background: none;
      color: rgba(255,255,255,0.65);
      font-size: var(--text-nav);
      font-weight: 500;
      cursor: pointer;
      transition: background .12s, color .12s;
      text-align: left;
      font-family: var(--font);
      position: relative;
      white-space: nowrap;
      overflow: hidden;
    }
    .nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
    .nav-item.active { background: rgba(255,255,255,0.06); color: #fff; }
    .nav-item.active .nav-icon { opacity: 1; color: #2563EB; }
    body.light .nav-item { color: #525252; }
    body.light .nav-item:hover { background: rgba(0,0,0,0.04); color: #000; }
    body.light .nav-item.active { background: rgba(0,0,0,0.05); color: #000; }
    body.light .nav-item.active .nav-icon { color: #2563EB; }
    .nav-icon {
      width: 16px; height: 16px;
      flex-shrink: 0;
      opacity: .65;
      transition: opacity .12s, color .12s;
    }
    .nav-item:hover .nav-icon { opacity: .9; }
    .nav-label { flex: 1; }
    .nav-badge {
      background: var(--accent);
      color: #fff;
      font-size: var(--text-xs);
      font-weight: 700;
      min-width: 17px; height: 17px;
      border-radius: 9999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
      flex-shrink: 0;
    }

    .sidebar-footer {
      padding: 12px 14px;
      border-top: 1px solid var(--border);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.4);
      letter-spacing: 0.04em;
      flex-shrink: 0;
      white-space: nowrap;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    body.light .sidebar-footer { color: #a3a3a3; }
    .theme-toggle-btn {
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.15);
      background: none;
      color: rgba(255,255,255,0.5);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background .12s, color .12s;
    }
    .theme-toggle-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
    body.light .theme-toggle-btn { border-color: #d4d4d4; color: #737373; }
    body.light .theme-toggle-btn:hover { background: #f0f0f0; color: #000; }

    /* ── Main ── */
    #main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; position: relative; }

    /* ── Report modal overlay ── */
    #report-modal {
      position: absolute;
      inset: 0;
      background: var(--bg);
      z-index: 50;
      display: none;
      flex-direction: column;
      animation: fadeSlideIn .18s ease;
    }
    #report-modal.open { display: flex; }
    @keyframes fadeSlideIn {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    #report-modal-bar {
      padding: 11px 20px;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
    #report-modal-title {
      font-family: var(--font-display);
      font-size: .85rem;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    #report-modal-close {
      display: flex;
      align-items: center;
      gap: 6px;
      background: none;
      border: 1px solid var(--border2);
      border-radius: 9999px;
      padding: 5px 14px;
      font-family: var(--font);
      font-size: .75rem;
      font-weight: 600;
      color: var(--text-dim);
      cursor: pointer;
      transition: background .12s, color .12s;
    }
    #report-modal-close:hover { background: var(--surface2); color: var(--text); }
    #report-modal-body {
      flex: 1;
      overflow-y: auto;
      padding: 28px 32px;
    }
    #report-modal-body::-webkit-scrollbar { width: 4px; }
    #report-modal-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
    #report-modal-body .national-scout-report { max-width: 900px; margin: 0 auto; }

    /* ── Invite code overlay ── */
    #invite-modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(3px);
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    #invite-modal.open { display: flex; }
    #invite-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 28px 26px;
      width: 100%;
      max-width: 380px;
      animation: fadeSlideIn .18s ease;
    }
    #invite-card h3 {
      font-family: var(--font-display);
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--text);
      margin: 0 0 6px;
      letter-spacing: -0.01em;
    }
    #invite-card p {
      font-size: .8rem;
      color: var(--text-dim);
      margin: 0 0 16px;
      line-height: 1.5;
    }
    #invite-input {
      width: 100%;
      box-sizing: border-box;
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: 8px;
      padding: 10px 12px;
      font-family: var(--font);
      font-size: .9rem;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text);
      outline: none;
      margin-bottom: 10px;
    }
    #invite-input:focus { border-color: var(--accent); }
    #invite-error {
      display: none;
      font-size: .75rem;
      color: #dc2626;
      margin: -4px 0 10px;
    }
    #invite-error.visible { display: block; }
    #invite-submit {
      width: 100%;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 10px 0;
      font-family: var(--font);
      font-size: .85rem;
      font-weight: 700;
      cursor: pointer;
      transition: opacity .12s;
    }
    #invite-submit:hover { opacity: .9; }
    #invite-submit:disabled { opacity: .5; cursor: default; }

    #topbar {
      padding: 11px 22px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
      gap: 12px;
    }
    .topbar-left { display: none; }
    .status-dot { display: none; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
    #topbar-title { display: none; }
    #topbar .sub { display: none; }
    .topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

    /* ── Shared intro row (topbar + ns-topbar) ── */
    .panel-intro {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      min-width: 0;
    }
    .panel-intro-icon { color: var(--accent); flex-shrink: 0; }
    .panel-intro-desc { font-size: .76rem; color: var(--text-muted); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .live-badge {
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      background: rgba(59,130,246,0.10);
      color: var(--teal);
      border: 1px solid rgba(59,130,246,0.25);
      border-radius: 9999px;
      padding: 3px 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
    }

    /* ── National Scout panel (redesigned) ── */
    #scout-panel {
      flex: 1;
      display: none;
      flex-direction: column;
      overflow: hidden;
      background: var(--surface2);
    }

    /* Scout Build/Report toggle row — toolbar chrome removed, toggle only */
    #ns-topbar {
      background: transparent;
      padding: 16px 22px 0;
      display: flex; align-items: center; justify-content: flex-end;
      flex-shrink: 0;
    }
    .ns-crumb-title {
      font-family: var(--font-display); font-weight: 700;
      font-size: 0.875rem; letter-spacing: -0.01em;
      color: var(--text);
    }
    .ns-topbar-right { display: flex; align-items: center; gap: 8px; }
    .ns-screen-toggle {
      display: inline-flex;
      border: 1px solid var(--border);
      border-radius: 9999px;
      padding: 3px;
      background: var(--surface);
      gap: 2px;
    }
    .ns-screen-toggle button {
      border: 0; background: transparent;
      padding: 5px 14px;
      font-family: var(--font-mono);
      font-size: .68rem; font-weight: 500;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--text-muted); cursor: pointer;
      border-radius: 9999px;
      transition: background .12s, color .12s;
    }
    .ns-screen-toggle button.active { background: var(--text); color: var(--bg); }
    .ns-live-pill {
      background: var(--accent-dim);
      color: var(--accent);
      border-radius: 9999px;
      padding: 5px 11px;
      font-family: var(--font-mono);
      font-size: .68rem; font-weight: 500;
      letter-spacing: 0.06em; text-transform: uppercase;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .ns-live-pill::before {
      content: ""; width: 5px; height: 5px;
      background: var(--accent); border-radius: 999px;
    }

    /* Screen container */
    .ns-screen { display: flex; flex-direction: column; flex: 1; overflow-y: auto; }
    .ns-screen.is-hidden { display: none; }

    /* Content grid */
    .ns-content {
      padding: 20px 24px 40px;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 14px;
      max-width: 1400px;
    }

    /* Card base */
    .ns-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 22px 24px;
      display: flex; flex-direction: column;
      min-width: 0;
    }
    .ns-card-head {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 12px; margin-bottom: 16px;
    }
    .ns-card-eyebrow {
      font-family: var(--font-mono);
      font-size: .65rem; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .ns-card-title {
      font-family: var(--font-display); font-weight: 700;
      font-size: 1.05rem; letter-spacing: -0.025em;
      margin: 4px 0 0;
    }
    .ns-card-sub { font-size: .78rem; color: var(--text-muted); margin-top: 3px; }

    /* ── BUILD SCREEN ── */
    .ns-form-hero {
      grid-column: span 12;
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 28px 30px;
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 26px;
      position: relative;
      overflow: hidden;
    }
    .ns-form-hero::after {
      content: "";
      position: absolute;
      right: -120px; top: 50%;
      transform: translateY(-50%);
      width: 460px; height: 460px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(37,99,235,0.10), transparent 60%);
      pointer-events: none;
    }
    body.dark .ns-form-hero {
      background: #0b0b0c;
      color: #fff;
      border-color: #262626;
    }
    body.dark .ns-form-hero::after {
      background: radial-gradient(circle, rgba(37,99,235,0.22), transparent 60%);
    }
    .ns-form-hero-icon {
      width: 64px; height: 64px;
      border-radius: 14px;
      background: linear-gradient(135deg, #2563EB 0%, #1E3A8A 100%);
      color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 28px rgba(37,99,235,0.3);
      position: relative; z-index: 1;
      flex-shrink: 0;
    }
    .ns-form-hero-id { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; z-index: 1; }
    .ns-form-hero-eyebrow {
      font-family: var(--font-mono);
      font-size: .7rem; color: var(--accent);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .ns-form-hero-title {
      font-family: var(--font-display); font-weight: 700;
      font-size: 2rem; letter-spacing: -0.04em; line-height: 1;
    }
    .ns-form-hero-sub {
      font-size: .84rem; color: var(--text-muted);
      max-width: 64ch; line-height: 1.5;
    }
    body.dark .ns-form-hero-sub { color: rgba(255,255,255,0.6); }

    /* Composer */
    .ns-composer { grid-column: span 8; }
    .ns-field { display: flex; flex-direction: column; gap: 8px; }
    .ns-field + .ns-field { margin-top: 20px; }
    .ns-field-label {
      font-family: var(--font-mono);
      font-size: .68rem; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
      display: flex; align-items: center; gap: 8px;
    }
    .ns-field-label .ns-req { color: var(--accent); }
    .ns-field-help {
      font-size: .72rem; color: var(--text-muted);
      text-transform: none; letter-spacing: 0;
    }

    .ns-country-input {
      display: flex; align-items: center; gap: 10px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 11px 13px;
      transition: border-color .15s, box-shadow .15s;
    }
    .ns-country-input:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
    }
    .ns-country-input input {
      border: 0; outline: 0; background: transparent;
      flex: 1;
      font-family: var(--font);
      font-size: .95rem; color: var(--text);
      min-width: 0;
    }
    .ns-country-input input::placeholder { color: var(--text-muted); }

    .ns-country-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
    .ns-country-chip {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 9999px;
      padding: 5px 10px 5px 6px;
      font-size: .75rem; color: var(--text-dim);
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 7px;
      transition: border-color .12s, color .12s;
    }
    .ns-country-chip:hover { border-color: var(--border2); color: var(--text); }
    .ns-country-chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
    .ns-flag-mini {
      width: 16px; height: 11px; border-radius: 2px;
      flex-shrink: 0; display: inline-block;
      background-size: cover; background-position: center;
    }

    .ns-age-picker {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
    }
    .ns-age-opt {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 6px;
      cursor: pointer;
      text-align: center;
      transition: border-color .12s, background .12s;
      display: flex; flex-direction: column; gap: 1px;
      align-items: center;
    }
    .ns-age-opt:hover { border-color: var(--border2); }
    .ns-age-opt.active { background: var(--text); border-color: var(--text); color: var(--bg); }
    .ns-age-opt .ns-v {
      font-family: var(--font-display); font-weight: 700;
      font-size: .95rem; letter-spacing: -0.02em;
    }
    .ns-age-opt .ns-lbl {
      font-family: var(--font-mono);
      font-size: .6rem; opacity: 0.6;
      letter-spacing: 0.06em; text-transform: uppercase;
    }

    .ns-leagues-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
    }
    .ns-league-opt {
      display: flex; align-items: center; gap: 11px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 11px 13px;
      cursor: pointer;
      transition: border-color .12s, background .12s;
      user-select: none;
    }
    .ns-league-opt:hover { border-color: var(--border2); }
    .ns-league-opt.active { border-color: var(--accent); background: var(--accent-dim); }
    .ns-league-check {
      width: 18px; height: 18px;
      border: 1.5px solid var(--border2);
      border-radius: 5px;
      flex-shrink: 0;
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--surface);
      transition: background .12s, border-color .12s;
    }
    .ns-league-opt.active .ns-league-check { background: var(--accent); border-color: var(--accent); }
    .ns-league-check svg { opacity: 0; color: #fff; }
    .ns-league-opt.active .ns-league-check svg { opacity: 1; }
    .ns-league-flag {
      width: 18px; height: 12px; border-radius: 2px;
      flex-shrink: 0;
      background: var(--surface2);
      background-size: cover; background-position: center;
    }
    .ns-league-name {
      font-size: .84rem; color: var(--text);
      font-weight: 500;
      flex: 1; min-width: 0;
    }
    .ns-league-tier {
      font-family: var(--font-mono);
      font-size: .6rem; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .ns-leagues-actions { display: flex; gap: 6px; margin-top: 8px; }
    .ns-text-btn {
      background: transparent; border: 0; padding: 4px 6px;
      font-family: var(--font-mono);
      font-size: .68rem; color: var(--text-muted);
      letter-spacing: 0.06em; text-transform: uppercase;
      cursor: pointer;
    }
    .ns-text-btn:hover { color: var(--text); }

    .ns-cta-row { display: flex; gap: 10px; margin-top: 24px; align-items: center; }
    .ns-btn {
      border: 1px solid var(--border);
      background: var(--surface);
      border-radius: 10px;
      padding: 11px 18px;
      font-family: var(--font);
      font-size: .84rem; font-weight: 500; color: var(--text);
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 8px;
      transition: border-color .12s;
    }
    .ns-btn:hover { border-color: var(--border2); }
    .ns-btn.primary { background: var(--text); color: var(--bg); border-color: var(--text); }
    .ns-btn.primary:hover { opacity: .88; }
    .ns-btn:disabled { opacity: .45; cursor: not-allowed; }
    .ns-cta-meta {
      margin-left: auto;
      font-family: var(--font-mono);
      font-size: .7rem; color: var(--text-muted);
      letter-spacing: 0.04em; text-transform: uppercase;
      display: flex; gap: 14px;
    }
    .ns-cta-meta strong {
      color: var(--text); font-weight: 600;
      font-family: var(--font-display); font-size: .875rem;
      letter-spacing: -0.02em;
      margin-right: 4px;
    }

    /* Side panel */
    .ns-form-side { grid-column: span 4; display: flex; flex-direction: column; gap: 14px; }
    .ns-form-side .ns-card { padding: 20px 22px; }

    .ns-quick-recipes { display: flex; flex-direction: column; gap: 8px; }
    .ns-recipe {
      display: grid;
      grid-template-columns: 32px 1fr auto;
      gap: 12px;
      padding: 11px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      transition: border-color .12s;
      align-items: center;
    }
    .ns-recipe:hover { border-color: var(--border2); }
    .ns-recipe-icon {
      width: 32px; height: 32px;
      border-radius: 7px;
      background: var(--surface2);
      border: 1px solid var(--border);
      display: inline-flex; align-items: center; justify-content: center;
      color: var(--text-dim);
    }
    .ns-recipe-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .ns-recipe-title { font-size: .8rem; color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
    .ns-recipe-meta {
      font-family: var(--font-mono);
      font-size: .65rem; color: var(--text-muted);
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .ns-recipe-arr { color: var(--text-muted); }

    .ns-recent-list { display: flex; flex-direction: column; }
    .ns-recent-item {
      display: grid;
      grid-template-columns: 22px 1fr auto;
      gap: 10px;
      padding: 10px 0;
      align-items: center;
      border-bottom: 1px dashed var(--border);
      cursor: pointer;
    }
    .ns-recent-item:last-child { border-bottom: 0; }
    .ns-recent-flag { width: 22px; height: 15px; border-radius: 2px; border: 1px solid var(--border); background-size: cover; background-position: center; }
    .ns-recent-name { font-size: .8rem; color: var(--text); font-weight: 500; }
    .ns-recent-meta {
      font-family: var(--font-mono);
      font-size: .65rem; color: var(--text-muted);
      letter-spacing: 0.04em; text-transform: uppercase;
    }

    /* Build screen loading state — overlay pinned to the visible viewport,
       biased toward the upper third (not dead-centre of a tall scroller). */
    #ns-build-screen { position: relative; }
    #ns-build-screen.ns-scanning { overflow: hidden; }
    #ns-scanning-state {
      grid-column: span 12;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 24px;
      text-align: center;
    }
    #ns-scanning-state.visible {
      display: flex;
      position: absolute;
      inset: 0;
      z-index: 20;
      background: var(--surface2);
      justify-content: flex-start;
      padding-top: 20vh;
    }
    #ns-scan-label {
      font-family: var(--font-mono);
      font-size: .7rem; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    #ns-scan-note {
      font-size: .7rem; color: var(--text-muted);
      opacity: 0.6;
    }

    /* Lock form controls during scan */
    #ns-build-screen.ns-scanning .ns-composer,
    #ns-build-screen.ns-scanning .ns-form-side {
      opacity: 0.3;
      pointer-events: none;
      user-select: none;
      transition: opacity 0.25s ease;
    }

    /* ── RESULTS SCREEN ── */
    .ns-results-content { padding: 20px 24px 40px; display: flex; flex-direction: column; gap: 14px; }

    .ns-results-hero {
      background: var(--surface2);
      color: var(--text);
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: var(--r-lg);
      padding: 26px 28px 22px;
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 26px;
      position: relative;
      overflow: hidden;
    }
    .ns-results-hero::after {
      content: "";
      position: absolute;
      right: -120px; top: 50%;
      transform: translateY(-50%);
      width: 460px; height: 460px;
      border-radius: 999px;
      background: radial-gradient(circle, var(--accent-dim), transparent 60%);
      pointer-events: none;
    }
    .ns-results-id { display: flex; flex-direction: column; gap: 8px; min-width: 0; position: relative; z-index: 1; }
    .ns-results-eyebrow {
      font-family: var(--font-mono);
      font-size: .7rem; color: var(--accent);
      letter-spacing: 0.1em; text-transform: uppercase;
    }
    .ns-results-name {
      font-family: var(--font-display); font-weight: 700;
      font-size: 2.25rem; letter-spacing: -0.04em; line-height: 1;
    }
    .ns-results-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
    .ns-results-meta-item {
      font-family: var(--font-mono);
      font-size: .72rem;
      color: var(--text-dim);
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .ns-acc { color: var(--accent); }
    .ns-results-meta-sep { width: 4px; height: 4px; background: var(--border2); border-radius: 999px; }

    .ns-results-stat-group {
      display: grid;
      grid-template-columns: repeat(2, auto);
      gap: 28px;
      position: relative; z-index: 1;
      padding-left: 24px;
      border-left: 1px solid var(--border);
    }
    .ns-results-stat .ns-stat-label {
      font-family: var(--font-mono);
      font-size: .65rem;
      color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
      margin-bottom: 6px;
    }
    .ns-results-stat .ns-stat-val {
      font-family: var(--font-display); font-weight: 700;
      font-size: 1.6rem; letter-spacing: -0.035em; line-height: 1;
    }
    .ns-results-stat .ns-stat-delta {
      font-family: var(--font-mono);
      font-size: .7rem; color: var(--text-muted); margin-top: 4px;
    }
    .ns-results-stat .ns-stat-delta.ns-acc { color: var(--accent); }

    .ns-back-btn {
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text-dim);
      border-radius: 9999px;
      padding: 7px 14px;
      font-size: .78rem; font-weight: 500;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 8px;
      position: relative; z-index: 2;
    }
    .ns-back-btn:hover { background: var(--surface2); }

    .ns-leagues-row {
      display: flex; gap: 6px; flex-wrap: wrap;
      align-items: center;
    }
    .ns-leagues-label {
      font-family: var(--font-mono);
      font-size: .65rem; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
      margin-right: 6px;
    }
    .ns-league-tag {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 9999px;
      padding: 4px 10px;
      font-family: var(--font-mono);
      font-size: .7rem; color: var(--text-dim);
      font-weight: 500;
      letter-spacing: 0.02em;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .ns-tag-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--accent); }

    /* Squad summary */
    .ns-squad-card { border-radius: 14px; }
    .ns-squad-list { display: flex; flex-direction: column; }
    .ns-squad-row {
      display: grid;
      grid-template-columns: 80px 1fr;
      gap: 18px;
      padding: 14px 0;
      border-bottom: 1px dashed var(--border);
      align-items: baseline;
    }
    .ns-squad-row:last-child { border-bottom: 0; }
    .ns-squad-pos-label {
      font-family: var(--font-mono);
      font-size: .75rem; color: var(--text);
      font-weight: 600;
      letter-spacing: 0.06em;
    }
    .ns-squad-count { font-weight: 400; color: var(--text-muted); font-size: .7rem; }
    .ns-squad-names { font-size: .875rem; color: var(--text); line-height: 1.55; }
    .ns-pname {
      background: var(--accent-dim);
      padding: 1px 4px; border-radius: 4px;
      margin-right: 4px;
    }
    .ns-squad-empty {
      font-family: var(--font-mono);
      font-size: .75rem; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: 0.04em;
    }

    /* Section header */
    .ns-section-head {
      display: flex; align-items: baseline; justify-content: space-between;
      padding: 8px 4px 0;
    }
    .ns-section-eyebrow {
      font-family: var(--font-mono);
      font-size: .7rem; color: var(--text-muted);
      letter-spacing: 0.1em; text-transform: uppercase;
      display: inline-flex; align-items: baseline; gap: 8px;
    }
    .ns-num { color: var(--accent); }
    .ns-count { color: var(--text-muted); font-weight: 400; }
    .ns-section-meta {
      font-family: var(--font-mono);
      font-size: .68rem; color: var(--text-muted);
      letter-spacing: 0.06em; text-transform: uppercase;
    }

    /* Player table */
    .ns-ptable-card { padding: 0; overflow: hidden; }
    .ns-ptable {
      width: 100%;
      border-collapse: collapse;
    }
    .ns-ptable thead th {
      font-family: var(--font-mono);
      font-size: .65rem; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
      font-weight: 500;
      text-align: left;
      padding: 13px 10px;
      border-bottom: 1px solid var(--border);
      background: var(--surface2);
    }
    .ns-ptable thead th.ns-num-col { text-align: right; }
    .ns-ptable thead th:first-child { padding-left: 22px; }
    .ns-ptable thead th:last-child { padding-right: 22px; }
    .ns-ptable tbody tr {
      border-bottom: 1px solid var(--border);
      transition: background .12s;
    }
    .ns-ptable tbody tr:last-child { border-bottom: 0; }
    .ns-ptable tbody tr:hover { background: var(--surface2); }
    .ns-ptable tbody td {
      padding: 13px 10px;
      font-size: .84rem;
      color: var(--text);
      vertical-align: middle;
    }
    .ns-ptable tbody td:first-child {
      padding-left: 22px;
      border-left: 3px solid transparent;
    }
    .ns-ptable tbody td:last-child { padding-right: 22px; }
    .ns-ptable tbody td.ns-num-col {
      text-align: right;
      font-family: var(--font-mono);
      font-size: .8rem;
      font-variant-numeric: tabular-nums;
    }
    .ns-ptable tbody td.ns-num-col.ns-muted { color: var(--text-muted); }
    .ns-ptable tbody td.ns-score-cell {
      text-align: right;
      font-family: var(--font-display); font-weight: 700;
      font-size: .95rem;
      letter-spacing: -0.02em;
    }

    /* Status stripe */
    .ns-ptable tbody tr.ns-s-callup  td:first-child { border-left-color: var(--accent); }
    .ns-ptable tbody tr.ns-s-monitor td:first-child { border-left-color: #b45309; }
    .ns-ptable tbody tr.ns-s-consider td:first-child { border-left-color: var(--border2); }

    .ns-player-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .ns-player-name {
      font-family: var(--font-display); font-weight: 700;
      font-size: .875rem; color: var(--text);
      letter-spacing: -0.02em;
    }
    .ns-player-league {
      font-family: var(--font-mono);
      font-size: .68rem; color: var(--text-muted);
      letter-spacing: 0.04em; text-transform: uppercase;
    }
    .ns-club-cell { font-size: .8rem; color: var(--text-dim); }

    /* Status badge */
    .ns-status-pill {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 11px;
      border-radius: 9999px;
      font-family: var(--font-mono);
      font-size: .65rem; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase;
      border: 1px solid;
      white-space: nowrap;
    }
    .ns-status-pill.ns-callup {
      background: var(--accent); color: #fff; border-color: var(--accent);
    }
    .ns-status-pill.ns-monitor {
      background: #fef7e0; color: #b45309; border-color: rgba(180,83,9,0.18);
    }
    .ns-status-pill.ns-consider {
      background: var(--surface2); color: var(--text-muted); border-color: var(--border);
    }
    body.dark .ns-status-pill.ns-monitor {
      background: rgba(180,83,9,0.15); color: #f97316; border-color: rgba(180,83,9,0.3);
    }

    /* Score bar */
    .ns-score-wrap { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
    .ns-score-bar {
      width: 56px; height: 3px;
      background: var(--surface2);
      border-radius: 999px;
      overflow: hidden;
    }
    .ns-score-bar > span { display: block; height: 100%; border-radius: 999px; }
    .ns-score-bar.ns-elite > span { background: #15803d; }
    .ns-score-bar.ns-high  > span { background: var(--accent); }
    .ns-score-bar.ns-mid   > span { background: #b45309; }
    .ns-score-bar.ns-low   > span { background: var(--border2); }

    /* Coaching brief */
    .ns-brief-card { }
    .ns-brief-body {
      display: grid;
      grid-template-columns: 1fr 260px;
      gap: 32px;
    }
    .ns-brief-text {
      font-size: .9rem; line-height: 1.7; color: var(--text-dim);
    }
    .ns-brief-text strong { color: var(--text); font-weight: 600; }
    .ns-brief-text p + p { margin-top: 12px; }
    .ns-brief-stats { display: flex; flex-direction: column; gap: 12px; }
    .ns-brief-stat {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 16px;
      display: flex; flex-direction: column; gap: 4px;
    }
    .ns-bstat-label {
      font-family: var(--font-mono);
      font-size: .6rem; color: var(--text-muted);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .ns-bstat-val {
      font-family: var(--font-display); font-weight: 700;
      font-size: 1.4rem; letter-spacing: -0.03em; line-height: 1.05;
    }
    .ns-bstat-sub {
      font-family: var(--font-mono);
      font-size: .68rem; color: var(--text-muted);
    }

    /* Results actions row */
    .ns-actions-row {
      display: flex; gap: 8px; justify-content: flex-end;
      padding-top: 4px;
    }

    /* Responsive */
    @media (max-width: 1180px) {
      .ns-composer { grid-column: span 12; }
      .ns-form-side { grid-column: span 12; }
      .ns-brief-body { grid-template-columns: 1fr; }
      .ns-age-picker { grid-template-columns: repeat(3, 1fr); }
    }

    /* ── national-scout-report (ntr-* classes — rendered by Claude inside results screen) ── */
    .national-scout-report {
      background: var(--surface);
      border-radius: 14px;
      overflow: hidden;
      font-size: .84rem;
    }
    .ntr-header {
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      padding: 22px 26px;
    }
    .ntr-title {
      font-family: var(--font-display);
      font-size: 1.4rem; font-weight: 800;
      color: var(--text); letter-spacing: -0.03em;
      margin-bottom: 5px;
    }
    .ntr-meta { color: var(--accent); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; }
    .ntr-squad {
      padding: 16px 22px 18px;
      background: var(--surface);
      border-bottom: 2px solid var(--accent);
    }
    .ntr-squad-title {
      font-family: var(--font-mono); font-size: .58rem; text-transform: uppercase;
      letter-spacing: .12em; color: var(--accent); font-weight: 700; margin-bottom: 12px;
    }
    .ntr-squad-groups { display: flex; flex-direction: column; gap: 8px; }
    .ntr-squad-group { display: flex; align-items: flex-start; gap: 12px; }
    .ntr-squad-pos {
      font-family: var(--font-mono); font-size: .6rem; font-weight: 800;
      color: var(--text); text-transform: uppercase; letter-spacing: .1em;
      min-width: 40px; padding-top: 2px; flex-shrink: 0;
    }
    .ntr-squad-count { font-weight: 400; color: var(--text-muted); }
    .ntr-squad-names { font-size: .8rem; color: var(--text-dim); line-height: 1.6; }
    .ntr-section { padding: 16px 22px; border-bottom: 1px solid var(--border); }
    .ntr-section:last-of-type { border-bottom: 0; }
    .ntr-section h3 {
      font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase;
      letter-spacing: .1em; color: var(--text-muted); margin-bottom: 12px; font-weight: 700;
    }
    .ntr-count { font-size: .6rem; font-weight: 400; color: var(--text-muted); text-transform: none; letter-spacing: 0; font-family: var(--font); }
    .ntr-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); }
    .ntr-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
    .ntr-table thead { background: var(--surface2); }
    .ntr-table th {
      padding: 9px 12px; text-align: left; font-family: var(--font-mono); font-size: .58rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); white-space: nowrap;
      border-bottom: 1px solid var(--border);
    }
    .ntr-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
    .ntr-table tr:last-child td { border-bottom: 0; }
    .ntr-table tr:hover td { background: var(--surface2); }
    .ntr-row-callup td:first-child { border-left: 3px solid var(--accent); }
    .ntr-row-monitor td:first-child { border-left: 3px solid #b45309; }
    .ntr-row-consider td:first-child { border-left: 3px solid var(--border2); }
    .ntr-cell-player { display: flex; flex-direction: column; gap: 2px; }
    .ntr-player-name { font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--text); }
    .ntr-player-league { font-family: var(--font-mono); font-size: .58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
    .ntr-badge { font-family: var(--font-mono); font-size: .58rem; font-weight: 700; padding: 3px 9px; border-radius: 9999px; letter-spacing: .06em; text-transform: uppercase; }
    .ntr-callup  { background: var(--accent); color: #fff; }
    .ntr-monitor { background: #fef7e0; color: #b45309; border: 1px solid rgba(180,83,9,.2); }
    .ntr-consider { background: var(--surface2); color: var(--text-muted); border: 1px solid var(--border); }
    body.dark .ntr-monitor { background: rgba(180,83,9,.15); color: #f97316; }
    .ntr-summary { padding: 16px 22px; background: var(--surface2); border-top: 1px solid var(--border); }
    .ntr-summary h3 { font-family: var(--font-mono); font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 8px; font-weight: 700; }
    .ntr-summary p { line-height: 1.7; color: var(--text); font-size: .83rem; }

    /* National report — mobile: collapse the dense table into stacked player cards.
       (Placed after the base rules so it wins on source order — CLAUDE.md pitfall.) */
    @media (max-width: 760px) {
      .ntr-table-wrap { border: 0; border-radius: 0; overflow: visible; }
      .ntr-table, .ntr-table thead, .ntr-table tbody, .ntr-table tr, .ntr-table th, .ntr-table td { display: block; }
      .ntr-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
      .ntr-table tr {
        border: 1px solid var(--border); border-radius: var(--r-md);
        margin-bottom: 10px; padding: 10px 12px; background: var(--surface);
      }
      .ntr-table tr:hover td { background: transparent; }
      .ntr-row-callup td:first-child,
      .ntr-row-monitor td:first-child,
      .ntr-row-consider td:first-child { border-left: 0; }
      .ntr-row-callup   { border-left: 3px solid var(--accent); }
      .ntr-row-monitor  { border-left: 3px solid var(--warning); }
      .ntr-row-consider { border-left: 3px solid var(--border2); }
      .ntr-table td {
        border: 0; padding: 3px 0; display: flex; justify-content: space-between;
        align-items: center; gap: 12px; font-size: .8rem;
      }
      .ntr-table td::before {
        content: attr(data-label); font-family: var(--font-mono); font-size: .58rem;
        text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
        flex-shrink: 0;
      }
      .ntr-table td:first-child { padding-bottom: 8px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
      .ntr-table td:first-child::before { display: none; }
    }

    /* ── Messages ── */
    #messages { flex: 1; overflow-y: auto; padding: 32px 0; scroll-behavior: smooth; }
    #messages::-webkit-scrollbar { width: 4px; }
    #messages::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

    .msg-row {
      display: flex;
      padding: 4px 28px;
      gap: 12px;
      max-width: 860px;
      margin: 0 auto;
      width: 100%;
    }
    .msg-row.user { flex-direction: row-reverse; }

    .avatar {
      width: 28px; height: 28px;
      border-radius: 9999px;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-display);
      font-size: 0.6rem;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 3px;
      letter-spacing: .03em;
    }
    .avatar.ai  { background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(37,99,235,.15); }
    .avatar.usr { background: var(--surface2);   color: var(--text-dim); border: 1px solid var(--border2); }

    .bubble {
      max-width: 80%;
      padding: 10px 14px;
      border-radius: 16px;
      font-size: 0.875rem;
      line-height: 1.65;
      word-break: break-word;
      letter-spacing: 0.01em;
    }
    .user .bubble {
      background: var(--surface2);
      border: 1px solid var(--border2);
      color: var(--text);
      border-radius: 16px 16px 4px 16px;
    }
    .ai .bubble {
      background: transparent;
      border: none;
      color: var(--text);
      padding-left: 0;
    }

    /* ── Welcome ── */
    #welcome {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; min-height: 100%;
      padding: 40px 24px; text-align: center;
    }
    .welcome-icon {
      width: 52px; height: 52px;
      background: var(--accent-dim);
      border: 1px solid rgba(37,99,235,.35);
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px;
      box-shadow: 0 0 32px rgba(37,99,235,.2);
    }
    #welcome h2 {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 600;
      letter-spacing: -0.03em;
      margin-bottom: 10px;
      color: var(--text);
    }
    #welcome p {
      color: var(--text-dim);
      font-size: 0.875rem;
      max-width: 380px;
      line-height: 1.65;
      margin-bottom: 28px;
      letter-spacing: 0.01em;
    }
    .welcome-chips {
      display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    }
    .welcome-chip {
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: 9999px;
      padding: 8px 18px;
      font-size: 0.78rem;
      color: var(--text-dim);
      cursor: pointer;
      transition: border-color .15s, color .15s, background .15s;
      font-family: var(--font);
      font-weight: 500;
      letter-spacing: 0.01em;
    }
    .welcome-chip:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-dim);
    }

    /* ── Empty A — "Ready when you are." ── */
    .ea-wrap {
      height: 100%;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      padding: 0 32px;
      gap: 36px;
    }
    .ea-head { text-align: center; max-width: 640px; }
    .ea-head h1 {
      font-family: var(--font-display);
      font-weight: 800;
      font-size: 50px;
      letter-spacing: -0.04em;
      line-height: 1;
      margin: 0;
    }
    .ea-head h1 .dot { color: var(--accent); }
    .ea-head p {
      font-size: 15.5px;
      color: var(--muted-1);
      line-height: 1.55;
      max-width: 520px;
      margin: 16px auto 0;
    }
    .ea-bigprompt {
      width: min(720px, 100%);
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-card);
      border-radius: 16px;
      padding: 18px 20px;
      display: flex; align-items: center; gap: 14px;
    }
    .ea-bigprompt .caret {
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 18px;
      font-weight: 600;
      flex-shrink: 0;
    }
    .ea-bigprompt input {
      flex: 1; border: 0; outline: 0;
      font-size: 16px; font-family: var(--font);
      color: var(--text); background: transparent;
    }
    .ea-bigprompt input::placeholder { color: var(--muted-2); }
    .ea-bigprompt .send {
      width: 36px; height: 36px; flex-shrink: 0;
      border-radius: 9999px; background: var(--card-btn-bg); color: var(--card-btn-fg);
      display: flex; align-items: center; justify-content: center;
      border: 0; cursor: pointer; transition: opacity .15s;
    }
    .ea-bigprompt .send:hover { opacity: .8; }
    .ea-suggest {
      width: min(720px, 100%);
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    }
    .ea-suggest-col .lbl {
      font-family: var(--font-mono);
      font-size: 10px; color: var(--muted-3);
      letter-spacing: 0.14em; text-transform: uppercase;
      margin-bottom: 8px;
    }
    .ea-chip {
      display: block;
      background: var(--surface-light);
      border: 1px solid var(--border);
      border-radius: 10px; padding: 9px 12px;
      font-size: 12.5px; color: var(--muted-1);
      line-height: 1.35; margin-bottom: 6px;
      cursor: pointer; transition: all .15s;
    }
    .ea-chip:hover { background: var(--surface3); border-color: var(--border-strong); color: var(--text); }
    .ea-chip .kbd {
      font-family: var(--font-mono); font-size: 10px;
      color: var(--accent); margin-right: 4px;
    }
    @media (max-width: 1100px) { .ea-suggest { grid-template-columns: repeat(2, 1fr); } }
    .ea-leagues-note {
      width: min(720px, 100%); margin: 20px 0 0; text-align: center;
      font-size: .72rem; line-height: 1.5; color: var(--text-muted);
    }

    /* ── User message bubble (Result B style) ── */
    .ch-msg-user {
      display: flex; justify-content: flex-end; margin-bottom: 18px;
    }
    .ch-msg-user .bubble {
      max-width: 70%;
      background: var(--accent-soft);
      border: 1px solid var(--card-accent-border);
      color: var(--text);
      padding: 10px 16px;
      border-radius: 18px 18px 4px 18px;
      font-size: 14px; line-height: 1.45;
    }

    /* ── Result B — rb-report ── */
    .rb-thread { max-width: 920px; margin: 0 auto; padding: 24px 28px 40px; }
    .rb-report {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 16px; overflow: hidden;
      box-shadow: var(--shadow-card);
      animation: rbFadeIn .2s ease;
    }
    @keyframes rbFadeIn {
      from { opacity: 0; transform: translateY(4px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .rb-tagbar {
      display: flex; align-items: center; gap: 10px;
      padding: 11px 22px;
      border-bottom: 1px solid var(--border);
      background: var(--surface-light);
      font-family: var(--font-mono); font-size: 10px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--muted-2);
    }
    .rb-tagbar .pill {
      padding: 3px 8px; border: 1px solid var(--border);
      border-radius: 9999px; background: var(--card-pill-bg); color: var(--text);
    }
    .rb-tagbar .pill.accent { color: var(--accent); border-color: var(--card-accent-border); background: var(--accent-soft); }
    .rb-tagbar .spacer { flex: 1; }
    .rb-head {
      padding: 24px 24px 18px;
      display: grid; grid-template-columns: 1fr auto;
      gap: 24px; align-items: flex-end;
      border-bottom: 1px solid var(--border);
    }
    .rb-head .name {
      font-family: var(--font-display); font-weight: 800;
      font-size: 38px; letter-spacing: -0.04em; line-height: 1;
    }
    .rb-head .name .dot { color: var(--accent); }
    .rb-head .sub {
      margin-top: 8px;
      font-family: var(--font-mono); font-size: 11.5px;
      color: var(--muted-2); letter-spacing: 0.05em; text-transform: uppercase;
    }
    .rb-head .verdict-chip {
      display: inline-flex; align-items: center; gap: 10px;
      background: var(--card-invert-bg); color: var(--card-invert-fg);
      padding: 10px 16px; border-radius: 12px;
    }
    .rb-head .verdict-chip .lbl {
      font-family: var(--font-mono); font-size: 9.5px;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--card-invert-dim);
    }
    .rb-head .verdict-chip .val {
      font-family: var(--font-display); font-weight: 800;
      font-size: 28px; letter-spacing: -0.04em;
      color: var(--accent); line-height: 1;
    }
    .rb-tabs {
      display: flex; border-bottom: 1px solid var(--border); padding: 0 24px;
    }
    .rb-tab {
      padding: 12px 16px;
      font-family: var(--font-mono); font-size: 10.5px;
      letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted-2); cursor: pointer;
      border-bottom: 2px solid transparent; margin-bottom: -1px;
      transition: color .15s;
    }
    .rb-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }
    .rb-tab .count { margin-left: 6px; color: var(--muted-3); }
    .rb-body { padding: 22px 24px 24px; display: flex; flex-direction: column; }
    .rb-narrative {
      font-size: 14.5px; line-height: 1.6; color: var(--text);
      max-width: 640px; width: 100%; text-wrap: pretty;
    }
    .rb-narrative p { margin: 0 0 14px; }
    .rb-narrative p:last-child { margin: 0; }
    .rb-narrative .hl { color: var(--accent); font-family: var(--font-mono); font-size: 13px; padding: 0 1px; }
    .rb-narrative strong { font-weight: 600; }
    .rb-keystats {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 8px; margin-top: 22px;
    }
    .rb-keystats .k {
      background: var(--surface-light); border: 1px solid var(--border);
      border-radius: 10px; padding: 10px 12px;
    }
    .rb-keystats .k .lbl {
      font-family: var(--font-mono); font-size: 9.5px;
      color: var(--muted-3); letter-spacing: 0.1em; text-transform: uppercase;
    }
    .rb-keystats .k .val {
      font-family: var(--font-display); font-weight: 700;
      font-size: 20px; letter-spacing: -0.03em; margin-top: 2px;
    }
    .rb-keystats .k .sub {
      font-family: var(--font-mono); font-size: 10px;
      color: var(--accent); margin-top: 2px;
    }
    .rb-foot {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 24px;
      border-top: 1px solid var(--border); background: var(--surface-light);
      font-family: var(--font-mono); font-size: 10.5px;
      letter-spacing: 0.06em; color: var(--muted-2); text-transform: uppercase;
    }
    .rb-foot .actions { display: flex; gap: 8px; text-transform: none; letter-spacing: 0; }
    .ra-btn {
      display: inline-flex; align-items: center; gap: 8px;
      height: 34px; padding: 0 14px;
      border-radius: 9999px;
      font-family: var(--font); font-size: 13px; font-weight: 500;
      cursor: pointer; border: 1px solid transparent; transition: all .15s;
    }
    .ra-btn.primary { background: var(--card-btn-bg); color: var(--card-btn-fg); border-color: var(--card-btn-bg); }
    .ra-btn.primary:hover { background: var(--card-btn-bg-hover); border-color: var(--card-btn-bg-hover); }
    .ra-btn.ghost { background: var(--card-pill-bg); color: var(--text); border-color: var(--border); }
    .ra-btn.ghost:hover { border-color: var(--border-strong); }
    .ra-btn.ghost.shortlisted { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
    @media (max-width: 860px) {
      .rb-keystats { grid-template-columns: repeat(2, 1fr); }
      .rb-head { grid-template-columns: 1fr; }
      .rb-head .verdict-chip { justify-self: start; }
    }
    /* ── rb-report tab panels ── */
    .rb-panel { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 20px; }
    .rb-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
    .rb-stats-cat { display: flex; flex-direction: column; gap: 4px; }
    .rb-stats-cat-hd {
      font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px;
      padding-bottom: 4px; border-bottom: 1px solid var(--border);
    }
    .rb-stats-table { width: 100%; border-collapse: collapse; }
    .rb-stats-table tr { border-bottom: 1px solid var(--surface-light); }
    .rb-stats-table tr:last-child { border-bottom: none; }
    .rb-stats-table td { padding: 4px 0; font-size: 13px; vertical-align: middle; }
    .rb-stat-lbl { color: var(--muted-1); }
    .rb-stat-val { font-family: var(--font-mono); font-weight: 600; text-align: right; padding: 0 8px; white-space: nowrap; }
    .rb-stat-per { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); text-align: right; white-space: nowrap; }
    .rb-strength-list, .rb-concern-list {
      list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px;
    }
    .rb-strength-list li, .rb-concern-list li {
      font-size: 14px; line-height: 1.55; color: var(--text);
      padding-left: 18px; position: relative;
    }
    .rb-strength-list li::before { content: '↑'; position: absolute; left: 0; color: #22c55e; font-size: 12px; }
    .rb-concern-list li::before  { content: '↓'; position: absolute; left: 0; color: #f97316; font-size: 12px; }
    .rb-strength-list .hl, .rb-concern-list .hl {
      color: var(--accent); font-family: var(--font-mono); font-size: 12.5px;
    }
    .rb-comp-list { display: flex; flex-direction: column; gap: 16px; }
    .rb-comp-item {
      padding: 14px 16px; background: var(--surface-light);
      border: 1px solid var(--border); border-radius: 10px;
    }
    .rb-comp-name { font-size: 15px; font-weight: 600; color: var(--text); }
    .rb-comp-meta {
      font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
      color: var(--muted-2); text-transform: uppercase; margin: 4px 0 8px;
    }
    .rb-comp-reason { font-size: 13.5px; line-height: 1.55; color: var(--muted-1); margin: 0; }
    .rb-trajectory p { font-size: 14.5px; line-height: 1.65; color: var(--text); margin: 0; }

    /* ── Typing indicator (kept for modal loading) ── */
    .typing-indicator {
      display: flex; align-items: center; gap: 4px; padding: 6px 0;
    }
    .typing-indicator span {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--border2);
      animation: bounce 1.3s infinite;
    }
    .typing-indicator span:nth-child(2) { animation-delay: .18s; }
    .typing-indicator span:nth-child(3) { animation-delay: .36s; }
    @keyframes bounce {
      0%,60%,100% { transform: translateY(0); background: var(--border2); }
      30%          { transform: translateY(-5px); background: var(--accent); }
    }

    /* ── AI progress bar ── */
    .ai-progress-wrap {
      width: 100%;
      height: 3px;
      background: var(--border);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 10px;
    }
    .ai-progress-bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--teal), #60a5fa);
      border-radius: 2px;
      transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
    }
    .ai-progress-phase {
      font-family: var(--font-mono);
      font-size: .62rem;
      color: var(--text-muted);
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-top: 5px;
      font-weight: 500;
      transition: opacity 0.3s ease;
    }
    @keyframes progressPulse {
      0%,100% { opacity: 1; }
      50%      { opacity: 0.5; }
    }

    /* ── Tool status chip ── */
    .tool-status {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: 9999px;
      padding: 5px 12px;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--text-dim);
      margin-bottom: 6px;
    }
    .tool-status .spinner {
      width: 11px; height: 11px;
      border: 1.5px solid var(--border2);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .65s linear infinite;
      flex-shrink: 0;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .tool-detail {
      color: var(--accent);
      font-weight: 500;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ── Input bar ── */
    #inputbar {
      padding: 14px 24px 18px;
      border-top: 1px solid var(--border);
      background: var(--surface2);
    }
    .input-wrap {
      max-width: 820px;
      margin: 0 auto;
      display: flex;
      gap: 10px;
      align-items: flex-end;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 26px;
      padding: 10px 10px 10px 20px;
      box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px -8px rgba(0,0,0,.10);
      transition: border-color .2s, box-shadow .2s;
    }
    .input-wrap:hover { border-color: var(--border-strong); }
    .input-wrap:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim), 0 8px 26px -10px rgba(37,99,235,.30);
    }
    #prompt {
      flex: 1; background: none; border: none; outline: none;
      color: var(--text); font-size: 0.9rem; font-family: var(--font);
      resize: none; line-height: 1.55; max-height: 140px; overflow-y: auto;
      letter-spacing: 0.01em; padding: 3px 0;
    }
    #prompt::placeholder { color: var(--text-muted); }
    #send-btn {
      background: var(--accent);
      border: none;
      border-radius: 50%;
      width: 38px; height: 38px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; flex-shrink: 0;
      color: #fff;
      box-shadow: 0 2px 8px -2px rgba(37,99,235,.5);
      transition: transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, filter .16s;
    }
    #send-btn svg { transition: transform .16s cubic-bezier(.2,.8,.2,1); }
    #send-btn:hover   { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 5px 14px -3px rgba(37,99,235,.6); }
    #send-btn:hover svg { transform: translateX(1px) rotate(-2deg); }
    #send-btn:active  { transform: scale(.92); }
    #send-btn:disabled{ opacity: .28; cursor: not-allowed; box-shadow: none; filter: none; transform: none; }
    #send-btn.is-stop { background: var(--live, #e5392f); box-shadow: 0 2px 8px -2px rgba(226,59,74,.5); }
    .chat-retry-btn {
      margin-left: 10px; padding: 3px 10px; border-radius: 9999px;
      border: 1px solid var(--border); background: var(--surface2);
      color: var(--text); font-size: .78rem; cursor: pointer;
      transition: opacity .15s;
    }
    .chat-retry-btn:hover { opacity: .8; }
    #chat-latest-chip {
      position: absolute; left: 50%; bottom: 92px; transform: translateX(-50%) translateY(6px);
      z-index: 20; display: none; align-items: center; gap: 6px;
      padding: 6px 14px; border-radius: 9999px; cursor: pointer;
      background: var(--accent); color: #fff; border: none;
      font-size: .78rem; font-weight: 600; box-shadow: 0 4px 14px rgba(0,0,0,.28);
      opacity: 0; transition: opacity .18s, transform .18s;
    }
    #chat-latest-chip.is-visible { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }
    .hint {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      color: var(--text-muted);
      text-align: center;
      margin-top: 8px;
      max-width: 860px;
      margin-left: auto;
      margin-right: auto;
      letter-spacing: 0.02em;
    }
    /* The "Enter to send" hint is meaningless with an on-screen keyboard */
    @media (pointer: coarse) { .hint { display: none; } }

    /* ── Bubble text ── */
    .bubble strong { color: var(--text); font-weight: 600; }
    .bubble em     { color: var(--text-dim); font-style: italic; }
    .bubble code   { background: var(--surface2); border: 1px solid var(--border2); border-radius: 6px; padding: 1px 6px; font-family: var(--font-mono); font-size: .8em; color: var(--text); }
    .bubble ul, .bubble ol { padding-left: 18px; margin: 6px 0; }
    .bubble li     { margin-bottom: 4px; }
    .bubble p      { margin-bottom: 8px; }
    .bubble p:last-child { margin-bottom: 0; }
    .bubble h2     { font-family: var(--font-display); font-size: 1rem; margin-bottom: 8px; color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
    .bubble h3     { font-family: var(--font-display); font-size: .9rem; margin-bottom: 6px; color: var(--text-dim); font-weight: 600; }
    .error-msg     { color: var(--rui-danger); font-size: .82rem; }
    .ai-notice     { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border);
                     color: var(--text-dim); font-size: .78rem; font-style: italic; }
    .stream-caret  { display: inline-block; width: 7px; margin-left: 1px; color: var(--accent);
                     font-weight: 600; animation: caretBlink 1s steps(1) infinite; }
    @keyframes caretBlink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
    .tool-trace    { margin-bottom: 8px; font-family: var(--font-mono); font-size: .66rem;
                     color: var(--text-muted); letter-spacing: .02em; opacity: .85; }
    .bubble .md-table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: .82rem; }
    .bubble .md-table th, .bubble .md-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
    .bubble .md-table th { background: var(--surface2); font-weight: 600; }
    .bubble a { color: var(--accent); text-decoration: underline; }

    /* ── Scout Report Card ── */
    .scout-report {
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: 20px;
      overflow: hidden;
      margin: 4px 0;
      font-size: .84rem;
    }
    .sr-header {
      background: var(--rui-dark);
      border-bottom: 1px solid var(--border2);
      padding: 22px 24px;
    }
    .sr-name {
      font-family: var(--font-display);
      font-size: 1.35rem;
      font-weight: 600;
      color: #ffffff;
      letter-spacing: -0.03em;
      margin-bottom: 6px;
    }
    .sr-meta { font-family: var(--font-mono); color: var(--teal); font-size: .76rem; letter-spacing: 0.02em; font-weight: 500; }
    .sr-section {
      padding: 16px 24px;
      border-bottom: 1px solid var(--border);
    }
    .sr-section:last-child { border-bottom: none; }
    .sr-section h3 {
      font-family: var(--font-mono);
      font-size: .65rem;
      text-transform: uppercase;
      letter-spacing: .12em;
      color: var(--text-muted);
      margin-bottom: 12px;
      font-weight: 600;
    }
    .sr-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(115px, 1fr));
      gap: 8px;
    }
    .sr-stat {
      background: var(--surface3);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .sr-label {
      font-family: var(--font-mono);
      font-size: .6rem;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .08em;
      font-weight: 500;
    }
    .sr-value {
      font-family: var(--font-display);
      font-size: .95rem;
      font-weight: 600;
      color: var(--text);
      letter-spacing: -0.01em;
    }
    .sr-strengths { color: var(--teal);         margin-bottom: 8px; line-height: 1.65; font-size: .83rem; }
    .sr-develop   { color: var(--rui-warning);  margin-bottom: 8px; line-height: 1.65; font-size: .83rem; }
    .sr-potential { color: var(--text-dim);      line-height: 1.65; font-size: .83rem; }
    .sr-value-sub {
      display: block;
      font-family: var(--font-mono);
      font-size: .58rem;
      color: var(--teal);
      font-weight: 500;
      letter-spacing: 0.04em;
      margin-top: 1px;
    }
    .sr-footer {
      padding: 16px 24px;
      display: flex;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      background: var(--rui-dark);
      border-top: 1px solid var(--border);
    }
    .sr-rating { display: flex; align-items: baseline; gap: 6px; }
    .sr-rating-label {
      font-family: var(--font-mono);
      font-size: .62rem;
      color: rgba(255,255,255,0.45);
      text-transform: uppercase;
      letter-spacing: .1em;
      font-weight: 600;
    }
    .sr-rating-value {
      font-family: var(--font-display);
      font-size: 2.4rem;
      font-weight: 700;
      color: var(--teal);
      line-height: 1;
      letter-spacing: -0.04em;
    }
    .sr-recommendation { color: rgba(255,255,255,0.72); font-size: .78rem; flex: 1; line-height: 1.6; letter-spacing: 0.01em; }

    /* ── Player Comparison ── */
    .player-comparison {
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-radius: 20px;
      overflow: hidden;
      padding: 22px 24px;
      margin: 4px 0;
    }
    .player-comparison h2 {
      font-family: var(--font-display);
      font-size: .7rem;
      font-weight: 600;
      color: var(--text-muted);
      margin-bottom: 16px;
      text-transform: uppercase;
      letter-spacing: .12em;
    }
    .comparison-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 14px;
    }
    .comp-col h3 {
      font-family: var(--font-display);
      font-size: .875rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border2);
      letter-spacing: -0.01em;
    }
    .comp-stat {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 5px 0;
      border-bottom: 1px solid rgba(0,0,0,.06);
      font-size: .77rem;
    }
    .comp-stat .label { font-family: var(--font-mono); color: var(--text-dim); letter-spacing: 0.01em; }
    .comp-stat .val   { font-weight: 600; color: var(--text); }
    .comp-stat .val.better { color: var(--teal); }
    .verdict {
      background: rgba(37,99,235,.04);
      border: 1px solid rgba(37,99,235,.15);
      border-radius: 12px;
      padding: 12px 16px;
      font-size: .81rem;
      color: var(--text);
      line-height: 1.65;
      letter-spacing: 0.01em;
    }

    /* ── Opposition DNA Report ──────────────────────────────────────────────── */
    /* ── Opposition DNA redesign ── */
    .team-dna-report {
      /* v2: remapped to global tokens so the card flips correctly in dark mode
         (was a self-scoped hardcoded-light palette that stayed white in dark). */
      --dr-accent: var(--accent); --dr-accent-soft: var(--accent-dim);
      --dr-bg-sunken: var(--surface2); --dr-bg-dark: var(--ink);
      --dr-border: var(--border); --dr-border-soft: var(--border); --dr-border-dark: var(--border2);
      --dr-text-1: var(--text); --dr-text-2: var(--text-dim); --dr-text-3: var(--text-muted); --dr-text-4: var(--text-muted);
      --dr-good: var(--success); --dr-good-soft: rgba(22,163,74,0.10); --dr-good-border: rgba(22,163,74,0.22);
      --dr-warn: var(--warning); --dr-warn-soft: rgba(249,115,22,0.10); --dr-warn-border: rgba(249,115,22,0.22);
      --dr-bad: var(--danger); --dr-bad-soft: rgba(226,59,74,0.10); --dr-bad-border: rgba(226,59,74,0.22);
      --dr-r-card: var(--r-md); --dr-r-tile: var(--r-sm); --dr-r-pill: var(--r-pill);
      font-family: var(--font);
      -webkit-font-smoothing: antialiased;
      color: var(--dr-text-1);
      display: flex; flex-direction: column; gap: 14px;
    }
    /* ── DNA card base ── */
    .team-dna-report .dna-card {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 20px 22px;
    }
    /* ── Hero (dna-header) — the signature dark element ── */
    .team-dna-report .dna-header {
      background: var(--dr-bg-dark); color: var(--ink-text);
      border-radius: var(--dr-r-card); padding: 28px 32px;
      position: relative; overflow: hidden;
    }
    .team-dna-report .dna-header::after {
      content: ""; position: absolute; right: -80px; top: 50%;
      transform: translateY(-50%); width: 400px; height: 400px;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(37,99,235,0.2), transparent 65%);
      pointer-events: none;
    }
    .team-dna-report .dna-team-name {
      font-family: var(--font-display); font-weight: 700;
      font-size: 36px; letter-spacing: -0.04em; line-height: 1;
      color: #fff; margin-bottom: 10px; position: relative; z-index: 1;
    }
    .team-dna-report .dna-meta {
      font-family: var(--font-mono);
      font-size: 11.5px; color: rgba(255,255,255,0.55);
      letter-spacing: 0.04em; text-transform: uppercase;
      position: relative; z-index: 1;
    }
    /* ── Section titles ── */
    .team-dna-report .dna-section-title {
      font-family: var(--font-mono);
      font-size: 10px; color: var(--dr-text-4);
      letter-spacing: 0.1em; text-transform: uppercase;
      font-weight: 600; margin-bottom: 16px;
    }
    .team-dna-report .dna-squad-meta { color: var(--dr-text-3); font-weight: 400; letter-spacing: 0; font-size: .65rem; font-family: var(--font); text-transform: none; }
    /* ── Fingerprint ── */
    .team-dna-report .dna-fingerprint {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 20px 22px;
    }
    .team-dna-report .dna-fp-title {
      font-family: var(--font-mono);
      font-size: 10px; color: var(--dr-text-4);
      letter-spacing: 0.1em; text-transform: uppercase;
      font-weight: 600; margin-bottom: 20px;
    }
    .team-dna-report .dna-fp-axis { margin-bottom: 6px; }
    .team-dna-report .dna-fp-axis:last-child { margin-bottom: 0; }
    .team-dna-report .dna-fp-top {
      display: grid; grid-template-columns: 190px 1fr 100px;
      align-items: center; gap: 16px; margin-bottom: 6px;
    }
    .team-dna-report .dna-fp-label { font-size: 14px; color: var(--dr-text-1); font-weight: 500; }
    .team-dna-report .dna-fp-bar-wrap {
      height: 8px; background: var(--dr-bg-sunken);
      border-radius: 999px; overflow: hidden; position: relative;
      border: 1px solid var(--dr-border-soft);
    }
    .team-dna-report .dna-fp-bar {
      position: absolute; inset: 0; background: var(--dr-accent);
      border-radius: 999px; transition: width .4s ease;
    }
    .team-dna-report .dna-fp-score {
      font-family: var(--font-mono);
      font-size: 12px; color: var(--dr-text-1); font-weight: 500; text-align: right;
    }
    .team-dna-report .dna-fp-badge {
      font-family: var(--font-mono);
      font-size: 9.5px; font-weight: 600; padding: 3px 8px;
      border-radius: var(--dr-r-pill); letter-spacing: 0.08em;
      text-transform: uppercase; border: 1px solid; white-space: nowrap;
      display: inline-block; margin-right: 8px;
    }
    .team-dna-report .dna-fp-elite { color: var(--dr-good); background: var(--dr-good-soft); border-color: var(--dr-good-border); }
    .team-dna-report .dna-fp-high   { color: var(--dr-accent); background: var(--dr-accent-soft); border-color: rgba(37,99,235,0.18); }
    .team-dna-report .dna-fp-medium { color: var(--dr-warn); background: var(--dr-warn-soft); border-color: var(--dr-warn-border); }
    .team-dna-report .dna-fp-low    { color: var(--dr-bad); background: var(--dr-bad-soft); border-color: var(--dr-bad-border); }
    .team-dna-report .dna-fp-evidence {
      display: flex; flex-wrap: wrap; gap: 6px;
      padding-left: 206px; margin-bottom: 14px;
    }
    .team-dna-report .dna-fp-axis:last-child .dna-fp-evidence { margin-bottom: 0; }
    .team-dna-report .dna-ev-chip {
      font-family: var(--font-mono);
      font-size: 10.5px; color: var(--dr-text-3);
      background: var(--dr-bg-sunken); border: 1px solid var(--dr-border-soft);
      border-radius: 6px; padding: 2px 9px; white-space: nowrap;
    }
    /* ── Performance stats ── */
    .team-dna-report .dna-perf-section {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
    }
    .team-dna-report .dna-perf-col {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 20px 18px;
    }
    .team-dna-report .dna-perf-heading {
      font-family: var(--font-display); font-weight: 700;
      font-size: 13px; letter-spacing: -0.01em; color: var(--dr-text-1);
      margin-bottom: 12px;
      display: flex; align-items: center; gap: 8px;
    }
    .team-dna-report .dna-perf-heading::before {
      content: ""; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
    }
    .team-dna-report .dna-perf-col:nth-child(1) .dna-perf-heading::before { background: #2563EB; }
    .team-dna-report .dna-perf-col:nth-child(2) .dna-perf-heading::before { background: #0a0a0a; }
    .team-dna-report .dna-perf-col:nth-child(3) .dna-perf-heading::before { background: #7c3aed; }
    .team-dna-report .dna-perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .team-dna-report .dna-perf-tile {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-tile); padding: 12px 14px;
      display: flex; flex-direction: column; gap: 4px; min-width: 0;
    }
    .team-dna-report .dna-tile-hero { background: var(--dr-bg-sunken); border-color: var(--dr-border-soft); }
    .team-dna-report .dna-tile-full { grid-column: span 2; }
    .team-dna-report .dna-tile-label {
      font-family: var(--font-mono);
      font-size: 9.5px; color: var(--dr-text-4);
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .team-dna-report .dna-tile-val {
      font-family: var(--font-display); font-weight: 700;
      font-size: 22px; letter-spacing: -0.035em; line-height: 1.05; color: var(--dr-text-1);
    }
    .team-dna-report .dna-tile-sub {
      font-family: var(--font-mono);
      font-size: 10.5px; color: var(--dr-text-3); margin-top: auto;
    }
    /* ── Key reads ── */
    .team-dna-report .dna-key-reads {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 20px 22px;
    }
    .team-dna-report .dna-key-list { display: flex; flex-direction: column; gap: 14px; }
    .team-dna-report .dna-key-item { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
    .team-dna-report .dna-key-num {
      font-family: var(--font-mono); font-size: 10px;
      color: var(--dr-accent); border: 1px solid rgba(37,99,235,0.3);
      background: var(--dr-accent-soft); border-radius: 6px;
      width: 22px; height: 22px; display: inline-flex; align-items: center;
      justify-content: center; font-weight: 600; flex-shrink: 0;
    }
    .team-dna-report .dna-key-text { font-size: 13px; line-height: 1.55; color: var(--dr-text-1); }
    .team-dna-report .dna-key-text strong { font-weight: 600; }
    .team-dna-report .dna-key-muted { color: var(--dr-text-3); }
    /* ── Form ── */
    .team-dna-report .dna-form-curve {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 20px 22px;
    }
    .team-dna-report .dna-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
    .team-dna-report .dna-chip {
      width: 28px; height: 28px; border-radius: 7px;
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-mono);
      font-weight: 600; font-size: 12px; flex-shrink: 0;
    }
    .team-dna-report .dna-W { background: var(--dr-good-soft); color: var(--dr-good); border: 1px solid var(--dr-good-border); }
    .team-dna-report .dna-D { background: var(--dr-warn-soft); color: var(--dr-warn); border: 1px solid var(--dr-warn-border); }
    .team-dna-report .dna-L { background: var(--dr-bad-soft); color: var(--dr-bad); border: 1px solid var(--dr-bad-border); }
    .team-dna-report .dna-fixture-table { width: 100%; border-collapse: collapse; }
    .team-dna-report .dna-fixture-table td { padding: 9px 4px; border-bottom: 1px solid var(--dr-border-soft); vertical-align: middle; font-size: 13px; }
    .team-dna-report .dna-fixture-table tr:last-child td { border-bottom: 0; }
    .team-dna-report .dna-fix-match { color: var(--dr-text-1); font-weight: 500; padding-left: 8px; }
    .team-dna-report .dna-fix-venue {
      font-family: var(--font-mono);
      color: var(--dr-text-3); font-size: 10.5px; width: 40px;
      text-align: right; text-transform: uppercase; letter-spacing: 0.04em;
    }
    .team-dna-report .dna-fix-date {
      font-family: var(--font-mono);
      color: var(--dr-text-3); font-size: 10.5px; width: 56px;
      text-align: right; text-transform: uppercase; letter-spacing: 0.04em;
    }
    /* ── Home / Away ── */
    .team-dna-report .dna-home-away {
      display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
    }
    .team-dna-report .dna-ha-block {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 18px 20px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .team-dna-report .dna-ha-label {
      font-family: var(--font-mono);
      font-size: 10px; color: var(--dr-text-4);
      letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
    }
    .team-dna-report .dna-ha-record {
      font-family: var(--font-display); font-weight: 700;
      font-size: 20px; letter-spacing: -0.02em; color: var(--dr-text-1);
    }
    .team-dna-report .dna-ha-gf {
      font-family: var(--font-mono);
      font-size: 10.5px; color: var(--dr-text-3); margin-top: 2px;
    }
    /* ── Squad ── */
    .team-dna-report .dna-squad-gaps {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 20px 22px;
    }
    .team-dna-report .dna-squad-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .team-dna-report .dna-bucket {
      background: var(--dr-bg-sunken); border: 1px solid var(--dr-border-soft);
      border-radius: var(--dr-r-tile); padding: 16px 18px;
      display: flex; flex-direction: column; gap: 6px;
    }
    .team-dna-report .dna-bucket-pos {
      font-family: var(--font-mono);
      font-size: 11px; font-weight: 600; color: var(--dr-accent); letter-spacing: 0.08em;
    }
    .team-dna-report .dna-bucket-count {
      font-family: var(--font-display); font-weight: 700;
      font-size: 28px; letter-spacing: -0.04em; line-height: 1; color: var(--dr-text-1);
    }
    .team-dna-report .dna-bucket-age {
      font-family: var(--font-mono);
      font-size: 10.5px; color: var(--dr-text-3);
    }
    .team-dna-report .dna-flag {
      font-family: var(--font-mono);
      font-size: 9px; font-weight: 600; padding: 3px 8px;
      border-radius: var(--dr-r-pill); letter-spacing: 0.08em;
      text-transform: uppercase; border: 1px solid; display: inline-block; width: fit-content;
    }
    .team-dna-report .dna-flag-strong { color: var(--dr-good); background: var(--dr-good-soft); border-color: var(--dr-good-border); }
    .team-dna-report .dna-flag-thin   { color: var(--dr-bad); background: var(--dr-bad-soft); border-color: var(--dr-bad-border); }
    /* ── Tactical analysis ── */
    .team-dna-report .dna-analysis {
      background: var(--surface); border: 1px solid var(--dr-border);
      border-radius: var(--dr-r-card); padding: 20px 22px;
    }
    .team-dna-report .dna-analysis-text {
      font-size: 14px; line-height: 1.75; color: var(--dr-text-2); margin-top: 4px;
    }
    .team-dna-report .dna-analysis-text strong {
      color: var(--dr-text-1); font-weight: 600;
      background: linear-gradient(transparent 65%, rgba(37,99,235,0.12) 65%);
      padding: 0 1px;
    }

    /* DNA panel layout */
    #dna-panel { flex: 1; overflow-y: auto; display: none; flex-direction: column; }
    #dna-panel::-webkit-scrollbar { width: 4px; }
    #dna-panel::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

    /* ── Team Analysis panel ── */
    #team-analysis-panel { padding: 0; }
    #team-analysis-panel::-webkit-scrollbar { width: 4px; }
    #team-analysis-panel::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

    .ta-query-wrap {
      padding: 28px 28px 0;
      max-width: 860px;
    }
    .ta-query-header { margin-bottom: 18px; }
    .ta-query-title {
      font-size: 1.25rem; font-weight: 700; color: var(--text-primary);
      letter-spacing: -.02em; margin-bottom: 4px;
    }
    .ta-query-subtitle { font-size: .8rem; color: var(--text-muted); }

    .ta-query-bar {
      display: flex; gap: 10px; align-items: center;
    }
    .ta-search-field {
      flex: 1; position: relative; display: flex; align-items: center;
    }
    .ta-search-icon {
      position: absolute; left: 11px; color: var(--text-muted); pointer-events: none;
    }
    .ta-query-input {
      width: 100%;
      padding: 9px 12px 9px 36px;
      border: 1px solid var(--border1);
      border-radius: 8px;
      background: var(--bg-input, var(--bg2));
      color: var(--text-primary);
      font-size: .875rem;
      outline: none;
      transition: border-color .15s;
    }
    .ta-query-input:focus { border-color: #2563EB; }
    .ta-query-cta {
      display: flex; align-items: center; gap: 6px;
      padding: 9px 18px;
      background: #2563EB; color: #fff;
      border: none; border-radius: 8px;
      font-size: .875rem; font-weight: 600;
      cursor: pointer; white-space: nowrap;
      transition: background .15s;
    }
    .ta-query-cta:hover { background: #1d4ed8; }
    .ta-query-cta:disabled { opacity: .6; cursor: not-allowed; }

    .ta-results-wrap {
      padding: 24px 28px 40px;
      max-width: 860px;
    }

    /* ── Team Analysis landing (mirrors League Pulse empty state) ── */
    .ta-hero-search {
      display: flex; gap: 10px; align-items: center;
      width: 100%; max-width: 540px; margin-top: 30px;
    }
    .ta-hero-search .ta-search-field { flex: 1; }
    .ta-empty-state #ta-team-dropdown { text-align: left; }
    .ta-recent-chips {
      display: none; gap: 8px; flex-wrap: wrap;
      justify-content: center; margin-top: 14px; max-width: 540px;
    }
    .ta-suggest-label {
      margin-top: 36px;
      font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
      text-transform: uppercase; color: var(--text-muted);
    }
    .ta-clubs-grid { margin-top: 16px; }
    .pulse-leagues .pl-flag {
      width: 36px; height: 36px; border-radius: 8px;
      object-fit: cover; flex-shrink: 0;
      border: 1px solid var(--border);
      box-shadow: 0 1px 2px rgba(0,0,0,.08);
      background: var(--surface2);
    }

    /* ── DNA double-helix (Team Analysis hero animation) ── */
    .ta-helix {
      width: 100%; max-width: 440px; height: 134px; margin-bottom: 8px; position: relative;
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
              mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    }
    .tah-svg { width: 100%; height: 100%; overflow: visible; display: block; }
    .tah-strand { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .tah-strand-a {
      stroke: var(--accent);
      filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 50%, transparent));
    }
    .tah-strand-b { stroke: color-mix(in srgb, var(--accent) 40%, transparent); }
    .tah-grp { will-change: transform; animation: tah-scroll 7s linear infinite; }
    @keyframes tah-scroll { from { transform: translateX(0); } to { transform: translateX(-120px); } }
    @media (prefers-reduced-motion: reduce) { .tah-grp { animation: none; } }

    /* Recent chips */
    .ta-recent-chip {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 4px 10px 4px 6px;
      border: 1px solid var(--border1);
      border-radius: 20px;
      background: var(--bg2);
      font-size: .75rem; color: var(--text-secondary);
      cursor: pointer; transition: border-color .12s, color .12s;
    }
    .ta-recent-chip:hover, .ta-recent-chip.active { border-color: #2563EB; color: #2563EB; }
    .ta-chip-crest {
      width: 18px; height: 18px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: .6rem; font-weight: 700; color: #fff;
    }

    /* ── team-analysis-report container ── */
    .team-analysis-report {
      --dr-text-1: var(--text-primary);
      --dr-text-2: var(--text-secondary);
      --dr-text-3: var(--text-muted);
      --dr-good:        #16a34a; --dr-good-soft:   rgba(22,163,74,.1);  --dr-good-border:  rgba(22,163,74,.25);
      --dr-accent:      #2563EB; --dr-accent-soft: rgba(37,99,235,.08);
      --dr-warn:        #d97706; --dr-warn-soft:   rgba(217,119,6,.1);   --dr-warn-border:  rgba(217,119,6,.25);
      --dr-bad:         #dc2626; --dr-bad-soft:    rgba(220,38,38,.1);   --dr-bad-border:   rgba(220,38,38,.25);
      font-family: var(--font);
    }
    body.light .team-analysis-report {
      --dr-good:   #15803d; --dr-accent: #1d4ed8;
      --dr-warn:   #b45309; --dr-bad:    #b91c1c;
    }

    /* Header */
    .team-analysis-report .ta-header {
      padding: 20px 24px 18px;
      border-bottom: 1px solid var(--border1);
      position: relative;
    }
    .team-analysis-report .ta-header::after {
      content: ''; position: absolute; bottom: -1px; left: 24px;
      width: 36px; height: 2px; background: #2563EB; border-radius: 1px;
    }
    .team-analysis-report .ta-team-name {
      font-size: 1.35rem; font-weight: 800; color: var(--dr-text-1);
      letter-spacing: -.025em; margin-bottom: 3px;
    }
    .team-analysis-report .ta-meta {
      font-size: .72rem; color: var(--dr-text-3); text-transform: uppercase;
      letter-spacing: .05em; font-weight: 500;
    }

    /* Shared section title */
    .team-analysis-report .ta-section-title {
      font-size: .65rem; font-weight: 700; color: var(--dr-text-3);
      text-transform: uppercase; letter-spacing: .08em;
      margin-bottom: 12px;
    }

    /* ── Fingerprint (mirrors DNA) ── */
    .team-analysis-report .ta-fingerprint {
      padding: 20px 24px; border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-fp-title {
      font-size: .65rem; font-weight: 700; color: var(--dr-text-3);
      text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px;
    }
    .team-analysis-report .ta-fp-axis { margin-bottom: 6px; }
    .team-analysis-report .ta-fp-axis:last-child { margin-bottom: 0; }
    .team-analysis-report .ta-fp-top {
      display: grid; grid-template-columns: 160px 1fr 100px 52px; gap: 10px; align-items: center;
    }
    .team-analysis-report .ta-fp-label { font-size: 14px; color: var(--dr-text-1); font-weight: 500; }
    .team-analysis-report .ta-fp-bar-wrap {
      height: 6px; background: var(--border1); border-radius: 3px; overflow: hidden;
    }
    .team-analysis-report .ta-fp-bar {
      height: 100%; background: #2563EB; border-radius: 3px; transition: width .6s ease;
    }
    .team-analysis-report .ta-fp-score {
      font-size: .75rem; color: var(--dr-text-2); font-weight: 600; font-variant-numeric: tabular-nums;
    }
    .team-analysis-report .ta-fp-badge {
      font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
      padding: 2px 7px; border-radius: 10px; border: 1px solid transparent; white-space: nowrap;
    }
    .team-analysis-report .ta-fp-elite  { color: var(--dr-good);   background: var(--dr-good-soft);   border-color: var(--dr-good-border); }
    .team-analysis-report .ta-fp-high   { color: var(--dr-accent); background: var(--dr-accent-soft); border-color: rgba(37,99,235,.18); }
    .team-analysis-report .ta-fp-medium { color: var(--dr-warn);   background: var(--dr-warn-soft);   border-color: var(--dr-warn-border); }
    .team-analysis-report .ta-fp-low    { color: var(--dr-bad);    background: var(--dr-bad-soft);    border-color: var(--dr-bad-border); }
    .team-analysis-report .ta-fp-evidence {
      display: flex; flex-wrap: wrap; gap: 5px; padding-left: 170px; margin: 4px 0 10px;
    }
    .team-analysis-report .ta-fp-axis:last-child .ta-fp-evidence { margin-bottom: 0; }
    .team-analysis-report .ta-ev-chip {
      font-size: .68rem; color: var(--dr-text-3);
      background: var(--bg2); border: 1px solid var(--border1);
      padding: 2px 8px; border-radius: 10px;
    }

    /* ── Tactical Identity ── */
    .team-analysis-report .ta-tactical-identity {
      padding: 20px 24px; border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-ti-text {
      font-size: .875rem; color: var(--dr-text-2); line-height: 1.65;
      margin-bottom: 10px;
    }
    .team-analysis-report .ta-ti-text:last-child { margin-bottom: 0; }

    /* ── Performance stats (3 columns) ── */
    .team-analysis-report .ta-perf-section {
      display: grid; grid-template-columns: repeat(3, 1fr);
      border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-perf-col {
      padding: 20px 20px; border-right: 1px solid var(--border1);
    }
    .team-analysis-report .ta-perf-col:last-child { border-right: none; }
    .team-analysis-report .ta-perf-heading {
      font-size: .65rem; font-weight: 700; color: var(--dr-text-3);
      text-transform: uppercase; letter-spacing: .08em;
      display: flex; align-items: center; gap: 6px; margin-bottom: 12px;
    }
    .team-analysis-report .ta-perf-heading::before {
      content: ''; width: 3px; height: 12px; border-radius: 2px; flex-shrink: 0;
    }
    .team-analysis-report .ta-perf-col:nth-child(1) .ta-perf-heading::before { background: #2563EB; }
    .team-analysis-report .ta-perf-col:nth-child(2) .ta-perf-heading::before { background: #0a0a0a; }
    .team-analysis-report .ta-perf-col:nth-child(3) .ta-perf-heading::before { background: #7c3aed; }
    .team-analysis-report .ta-perf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .team-analysis-report .ta-perf-tile {
      background: var(--bg2); border: 1px solid var(--border1);
      border-radius: 8px; padding: 10px 12px;
    }
    .team-analysis-report .ta-tile-hero { border-color: rgba(37,99,235,.2); }
    .team-analysis-report .ta-tile-full { grid-column: span 2; }
    .team-analysis-report .ta-tile-label {
      display: block; font-size: .62rem; color: var(--dr-text-3);
      text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
    }
    .team-analysis-report .ta-tile-val {
      display: block; font-size: 1.1rem; font-weight: 700;
      color: var(--dr-text-1); letter-spacing: -.02em;
    }
    .team-analysis-report .ta-tile-sub {
      display: block; font-size: .68rem; color: var(--dr-text-3); margin-top: 2px;
    }

    /* ── Key Men ── */
    .team-analysis-report .ta-key-men {
      padding: 20px 24px; border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-key-men-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    }
    .team-analysis-report .ta-player-card {
      background: var(--bg2); border: 1px solid var(--border1);
      border-radius: 10px; padding: 14px 15px;
      transition: border-color .15s;
    }
    .team-analysis-report .ta-player-card:hover { border-color: rgba(37,99,235,.35); }
    .team-analysis-report .ta-pc-top {
      display: flex; justify-content: space-between; align-items: flex-start;
      gap: 8px; margin-bottom: 4px;
    }
    .team-analysis-report .ta-pc-name {
      font-size: .875rem; font-weight: 700; color: var(--dr-text-1);
      line-height: 1.2;
    }
    .team-analysis-report .ta-pc-role {
      font-size: .6rem; font-weight: 700; padding: 2px 7px;
      border-radius: 10px; white-space: nowrap; flex-shrink: 0;
      background: var(--dr-accent-soft); color: var(--dr-accent);
      border: 1px solid rgba(37,99,235,.2);
    }
    .team-analysis-report .ta-pc-pos {
      font-size: .7rem; color: var(--dr-text-3); margin-bottom: 10px;
    }
    .team-analysis-report .ta-pc-chips {
      display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px;
    }
    .team-analysis-report .ta-pc-chip {
      font-size: .68rem; padding: 2px 8px;
      border-radius: 10px; border: 1px solid var(--border1);
      font-weight: 600; background: var(--bg1);
    }
    .team-analysis-report .ta-chip-rating { color: #d97706; border-color: rgba(217,119,6,.2); background: rgba(217,119,6,.06); }
    .team-analysis-report .ta-chip-goals  { color: #2563EB; border-color: rgba(37,99,235,.2); background: rgba(37,99,235,.05); }
    .team-analysis-report .ta-chip-assists { color: #7c3aed; border-color: rgba(124,58,237,.2); background: rgba(124,58,237,.05); }
    .team-analysis-report .ta-pc-desc {
      font-size: .75rem; color: var(--dr-text-2); line-height: 1.5;
    }

    /* ── Squad Breakdown ── */
    .team-analysis-report .ta-squad-breakdown {
      padding: 20px 24px; border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-squad-meta { color: var(--dr-text-3); font-weight: 400; font-size: .62rem; font-family: var(--font); text-transform: none; letter-spacing: 0; }
    .team-analysis-report .ta-squad-grid {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
    }
    .team-analysis-report .ta-squad-bucket {
      background: var(--bg2); border: 1px solid var(--border1); border-radius: 10px; padding: 12px 14px;
    }
    .team-analysis-report .ta-bucket-header {
      display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
    }
    .team-analysis-report .ta-bucket-pos {
      font-size: .7rem; font-weight: 800; color: var(--dr-text-1); text-transform: uppercase;
    }
    .team-analysis-report .ta-bucket-count {
      font-size: .65rem; color: var(--dr-text-3); margin-left: auto;
    }
    .team-analysis-report .ta-bucket-flag {
      font-size: .58rem; font-weight: 700; padding: 1px 6px; border-radius: 8px; border: 1px solid transparent;
    }
    .team-analysis-report .ta-flag-strong { color: var(--dr-good); background: var(--dr-good-soft); border-color: var(--dr-good-border); }
    .team-analysis-report .ta-flag-thin   { color: var(--dr-bad);  background: var(--dr-bad-soft);  border-color: var(--dr-bad-border); }
    .team-analysis-report .ta-bucket-meta {
      font-size: .65rem; color: var(--dr-text-3); margin-bottom: 10px;
    }
    .team-analysis-report .ta-bucket-players { display: flex; flex-direction: column; gap: 5px; }
    .team-analysis-report .ta-bucket-player {
      display: flex; align-items: center; gap: 5px;
      font-size: .72rem; padding: 4px 0; border-top: 1px solid var(--border1);
    }
    .team-analysis-report .ta-bucket-player:first-child { border-top: none; }
    .team-analysis-report .ta-bp-name { flex: 1; color: var(--dr-text-1); font-weight: 500; }
    .team-analysis-report .ta-bp-apps { font-size: .65rem; color: var(--dr-text-3); white-space: nowrap; }
    .team-analysis-report .ta-bp-rating { font-size: .65rem; color: #d97706; font-weight: 600; }
    .team-analysis-report .ta-bp-contrib { font-size: .65rem; color: #2563EB; font-weight: 600; white-space: nowrap; }

    /* ── Recent Form ── */
    .team-analysis-report .ta-form-curve {
      padding: 20px 24px; border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 14px; }
    .team-analysis-report .ta-chip {
      width: 26px; height: 26px; border-radius: 50%;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: .7rem; font-weight: 800; color: #fff;
    }
    .team-analysis-report .ta-W { background: #16a34a; }
    .team-analysis-report .ta-D { background: #6b7280; }
    .team-analysis-report .ta-L { background: #dc2626; }
    .team-analysis-report .ta-fixture-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
    .team-analysis-report .ta-fixture-table tr { border-bottom: 1px solid var(--border1); }
    .team-analysis-report .ta-fixture-table tr:last-child { border-bottom: none; }
    .team-analysis-report .ta-fixture-table td { padding: 7px 6px; color: var(--dr-text-2); vertical-align: middle; }
    .team-analysis-report .ta-fixture-table td:first-child { width: 34px; }
    .team-analysis-report .ta-fix-match { font-weight: 500; color: var(--dr-text-1); }
    .team-analysis-report .ta-fix-venue { font-size: .68rem; color: var(--dr-text-3); width: 50px; }
    .team-analysis-report .ta-fix-date  { font-size: .68rem; color: var(--dr-text-3); text-align: right; }

    /* ── Home/Away ── */
    .team-analysis-report .ta-home-away {
      display: grid; grid-template-columns: 1fr 1fr;
      border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-ha-block {
      padding: 16px 24px; text-align: center;
    }
    .team-analysis-report .ta-ha-block:first-child { border-right: 1px solid var(--border1); }
    .team-analysis-report .ta-ha-label {
      font-size: .62rem; font-weight: 700; color: var(--dr-text-3);
      text-transform: uppercase; letter-spacing: .08em; margin-bottom: 4px;
    }
    .team-analysis-report .ta-ha-record {
      font-size: 1.1rem; font-weight: 800; color: var(--dr-text-1);
      letter-spacing: .02em; margin-bottom: 3px;
    }
    .team-analysis-report .ta-ha-gf { font-size: .72rem; color: var(--dr-text-3); }

    /* ── Set Piece ── */
    .team-analysis-report .ta-set-piece {
      padding: 20px 24px; border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-sp-tiles {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
    }
    .team-analysis-report .ta-sp-tile {
      background: var(--bg2); border: 1px solid var(--border1);
      border-radius: 8px; padding: 12px 14px; text-align: center;
    }
    .team-analysis-report .ta-sp-val {
      font-size: 1.15rem; font-weight: 800; color: var(--dr-text-1);
      letter-spacing: -.02em; margin-bottom: 3px;
    }
    .team-analysis-report .ta-sp-label {
      font-size: .62rem; color: var(--dr-text-3); text-transform: uppercase;
      letter-spacing: .05em; font-weight: 500;
    }

    /* ── Coaching Brief ── */
    .team-analysis-report .ta-coaching-brief {
      padding: 20px 24px; border-bottom: 1px solid var(--border1);
    }
    .team-analysis-report .ta-cb-list { display: flex; flex-direction: column; gap: 12px; }
    .team-analysis-report .ta-cb-item {
      display: flex; gap: 14px; align-items: flex-start;
      background: var(--bg2); border: 1px solid var(--border1);
      border-radius: 10px; padding: 14px 16px;
    }
    .team-analysis-report .ta-cb-num {
      width: 24px; height: 24px; border-radius: 50%;
      background: #2563EB; color: #fff;
      font-size: .72rem; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 1px;
    }
    .team-analysis-report .ta-cb-body {
      font-size: .84rem; color: var(--dr-text-2); line-height: 1.6;
    }
    .team-analysis-report .ta-cb-body strong { color: var(--dr-text-1); font-weight: 700; }

    /* ── Footer ── */
    .team-analysis-report .ta-footer {
      padding: 14px 24px;
    }
    .team-analysis-report .ta-footer-note {
      font-size: .65rem; color: var(--dr-text-3);
    }

    /* Mobile responsive */
    @media (max-width: 640px) {
      .ta-query-wrap, .ta-results-wrap { padding: 16px 16px 0; }
      .ta-results-wrap { padding-bottom: 32px; }
      .ta-query-bar { flex-direction: column; }
      .ta-query-cta { width: 100%; justify-content: center; }
      .team-analysis-report .ta-perf-section { grid-template-columns: 1fr; }
      .team-analysis-report .ta-perf-col { border-right: none; border-bottom: 1px solid var(--border1); }
      .team-analysis-report .ta-key-men-grid { grid-template-columns: 1fr; }
      .team-analysis-report .ta-squad-grid { grid-template-columns: repeat(2, 1fr); }
      .team-analysis-report .ta-sp-tiles { grid-template-columns: repeat(2, 1fr); }
      .team-analysis-report .ta-fp-top { grid-template-columns: 110px 1fr 80px; }
      .team-analysis-report .ta-fp-evidence { padding-left: 0; }
      .team-analysis-report .ta-home-away { grid-template-columns: 1fr; }
    }

    /* ── League Intelligence ── */
    #league-intel-panel { flex: 1; overflow-y: auto; display: none; flex-direction: column; background: var(--bg); }
    #league-intel-panel::-webkit-scrollbar { width: 4px; }
    #league-intel-panel::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
    .li-topbar { display: flex; align-items: center; gap: 14px; padding: 10px 2rem; border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; }
    .li-topbar-title { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--text); white-space: nowrap; }
    .li-league-select { padding: 7px 12px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border2); color: var(--text); font-size: .85rem; cursor: pointer; outline: none; min-width: 210px; }
    .li-league-select:focus { border-color: var(--accent); }
    .li-refresh-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-muted); cursor: pointer; font-size: .8rem; display: flex; align-items: center; gap: 5px; }
    .li-refresh-btn:hover { border-color: var(--accent); color: var(--accent); }
    .li-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 55vh; gap: 14px; text-align: center; color: var(--text-muted); font-size: .9rem; }
    .li-empty-icon svg { opacity: .3; }
    .li-error-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 40vh; gap: 12px; text-align: center; }
    .li-skeleton-wrap { padding: 2rem; max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; }
    .li-skel { border-radius: 12px; background: var(--surface2); animation: li-pulse 1.4s ease-in-out infinite; }
    @keyframes li-pulse { 0%,100%{opacity:.6} 50%{opacity:1} }
    .li-section { border-bottom: 1px solid var(--border); padding: 1.8rem 2rem; max-width: 1200px; margin: 0 auto; width: 100%; box-sizing: border-box; }
    .li-section-title { font-family: var(--font-display); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 16px; }
    /* Top row: radar + competitiveness side by side */
    .li-top-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    @media(max-width:800px){ .li-top-row { grid-template-columns: 1fr; } }
    .li-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; }
    .li-card-title { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 14px; }
    /* Competitiveness card */
    .li-comp-score-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
    .li-comp-score { font-size: 3rem; font-weight: 800; color: var(--accent); line-height: 1; }
    .li-comp-label { font-size: .85rem; font-weight: 700; color: var(--text); }
    .li-comp-context { font-size: .82rem; color: var(--text-muted); margin-bottom: 14px; }
    .li-comp-chips { display: flex; gap: 8px; flex-wrap: wrap; }
    .li-comp-chip { background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px; padding: 6px 12px; font-size: .78rem; color: var(--text-dim); }
    .li-comp-chip span { font-weight: 700; color: var(--text); }
    /* Radar SVG */
    .li-radar-wrap { display: flex; flex-direction: column; align-items: center; }
    .li-radar-compare-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .78rem; color: var(--text-muted); }
    .li-radar-compare-row select { padding: 4px 8px; border-radius: 6px; background: var(--surface2); border: 1px solid var(--border2); color: var(--text); font-size: .78rem; cursor: pointer; }
    .li-radar-legend { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
    .li-radar-legend-item { display: flex; align-items: center; gap: 5px; font-size: .74rem; color: var(--text-muted); }
    .li-radar-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
    /* Overview metric tiles */
    .li-metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
    .li-metric-tile { background: var(--surface2); border: 1px solid var(--border2); border-radius: 10px; padding: 14px 16px; }
    .li-metric-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
    .li-metric-value { font-size: 1.5rem; font-weight: 700; color: var(--text); line-height: 1.1; }
    .li-metric-sub { font-size: .73rem; color: var(--text-muted); margin-top: 3px; }
    /* Team table */
    .li-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
    .li-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
    .li-table th { padding: 9px 10px; font-size: .7rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); text-align: right; cursor: pointer; white-space: nowrap; user-select: none; }
    .li-table th:hover { color: var(--accent); }
    .li-table th.li-th-team { text-align: left; }
    .li-table th.li-th-pos { text-align: center; width: 36px; }
    .li-table th.li-sort-active { color: var(--accent); }
    .li-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: middle; }
    .li-table tr:last-child td { border-bottom: none; }
    .li-table tr:hover td { background: var(--surface2); }
    .li-td-pos { text-align: center !important; font-weight: 600; color: var(--text-muted); font-size: .78rem; }
    .li-td-team { text-align: left !important; }
    .li-team-cell { display: flex; align-items: center; gap: 8px; }
    .li-team-logo { width: 20px; height: 20px; object-fit: contain; border-radius: 2px; }
    .li-team-name { font-weight: 600; color: var(--text); white-space: nowrap; }
    .li-td-pts { font-weight: 700; color: var(--text); }
    .li-td-enhanced { color: var(--text-dim); font-size: .82rem; }
    .li-td-enhanced.li-loading-cell { color: var(--border2); font-style: italic; }
    .li-row-top4 .li-td-pos { color: var(--accent); border-left: 2px solid var(--accent); }
    .li-row-rel .li-td-pos { color: #ef4444; border-left: 2px solid #ef4444; }
    /* Sort controls for team table */
    .li-sort-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
    .li-sort-btn { padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-muted); font-size: .75rem; cursor: pointer; }
    .li-sort-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    /* Rankings grid */
    .li-rankings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
    .li-rank-col-title { font-weight: 700; font-size: .8rem; color: var(--text); margin-bottom: 10px; }
    .li-rank-sub { font-weight: 400; color: var(--text-muted); font-size: .74rem; }
    .li-rank-item { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
    .li-rank-item:last-child { border-bottom: none; }
    .li-rank-num { font-size: .73rem; font-weight: 700; color: var(--text-muted); width: 16px; }
    .li-rank-logo { width: 18px; height: 18px; object-fit: contain; border-radius: 2px; }
    .li-rank-name { flex: 1; font-size: .83rem; font-weight: 600; color: var(--text); }
    .li-rank-val { font-size: .83rem; font-weight: 700; color: var(--accent); }
    /* Performers section */
    .li-load-btn { padding: 9px 22px; border-radius: 9px; background: var(--accent); color: #fff; border: none; font-size: .85rem; font-weight: 600; cursor: pointer; }
    .li-load-btn:hover { opacity: .88; }
    .li-load-btn:disabled { opacity: .5; cursor: not-allowed; }
    .li-performers-note { font-size: .84rem; color: var(--text-muted); margin-bottom: 14px; max-width: 520px; }
    .li-pos-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
    .li-pos-tab { padding: 6px 16px; border-radius: 7px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-muted); font-size: .8rem; font-weight: 600; cursor: pointer; }
    .li-pos-tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .li-performers-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
    @media(max-width:700px){ .li-performers-layout { grid-template-columns: 1fr; } }
    .li-perf-col-title { font-weight: 700; font-size: .8rem; color: var(--text); margin-bottom: 10px; }
    .li-perf-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
    .li-perf-item:last-child { border-bottom: none; }
    .li-perf-rank { font-size: .73rem; font-weight: 700; color: var(--text-muted); width: 16px; }
    .li-perf-info { flex: 1; min-width: 0; }
    .li-perf-name { font-size: .83rem; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .li-perf-team { font-size: .73rem; color: var(--text-muted); }
    .li-perf-stat { font-size: .88rem; font-weight: 700; color: var(--accent); }
    .li-perf-sub { font-size: .71rem; color: var(--text-muted); }
    .li-perf-view { padding: 3px 9px; border-radius: 5px; border: 1px solid var(--border2); background: transparent; color: var(--text-muted); font-size: .72rem; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
    .li-perf-view:hover { border-color: var(--accent); color: var(--accent); }
    .li-perf-meta { font-size: .73rem; color: var(--text-muted); margin-top: 14px; text-align: right; }
    /* Position value map bars */
    .li-pvm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
    .li-pvm-card { background: var(--surface2); border: 1px solid var(--border2); border-radius: 10px; padding: 14px 16px; }
    .li-pvm-pos { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 8px; }
    .li-pvm-stat { font-size: .78rem; color: var(--text-dim); margin-top: 4px; }
    .li-pvm-val { font-weight: 700; color: var(--text); }

    /* Query bar */
    #dna-form-wrap { padding: 22px 28px 0; }
    .dna-query-bar {
      display: grid; grid-template-columns: 1fr auto; gap: 8px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 8px;
      align-items: stretch; position: relative;
    }
    .dna-query-field {
      display: flex; align-items: center; gap: 12px;
      padding: 8px 14px; border-radius: var(--r-sm);
      transition: background .15s; cursor: text; min-width: 0;
    }
    .dna-query-field:hover { background: var(--surface2); }
    .dna-query-field:focus-within { background: var(--surface2); box-shadow: inset 0 0 0 1.5px var(--accent); }
    .dna-search-icon { color: var(--text-muted); flex-shrink: 0; }
    .dna-query-field-col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
    .dna-query-label { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1px; }
    .dna-query-input { border: 0; background: transparent; padding: 0; outline: none; font-family: var(--font); font-size: 15px; color: var(--text); width: 100%; }
    .dna-query-input::placeholder { color: var(--text-muted); }
    .dna-query-cta {
      background: var(--ink); color: var(--ink-text); border: 0; border-radius: var(--r-sm);
      padding: 0 22px; font-family: var(--font); font-size: 14px; font-weight: 600;
      cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
      transition: background .12s; white-space: nowrap;
    }
    .dna-query-cta:hover { background: #1a1a1a; }
    .dna-query-cta:disabled { background: #737373; cursor: default; }
    .dna-query-helpers { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; padding: 0 2px; }
    .dna-helper-label { font-family: var(--font-mono); font-size: 10px; color: #a3a3a3; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 4px; }
    .dna-recent-chip {
      background: #fff; border: 1px solid #e7e5e4; border-radius: 9999px;
      padding: 5px 12px; font-size: 12px; color: #404040;
      cursor: pointer; transition: border-color .12s, color .12s;
      display: inline-flex; align-items: center; gap: 6px; font-family: var(--font);
    }
    .dna-recent-chip:hover { border-color: #d6d3d1; color: #0a0a0a; }
    .dna-recent-chip.active { background: #000; color: #fff; border-color: #000; }
    .dna-chip-crest { width: 14px; height: 14px; border-radius: 3px; color: #fff; font-family: var(--font-mono); font-size: 8px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
    /* Dropdown positioning inside query bar */
    .dna-query-bar #dna-team-dropdown { position: absolute; left: 8px; right: 130px; top: calc(100% + 6px); z-index: 200; }

    #dna-results { padding: 18px 28px 40px; }

    @media (max-width: 900px) {
      .team-dna-report .dna-perf-section { grid-template-columns: 1fr; }
      .team-dna-report .dna-home-away { grid-template-columns: 1fr; }
      .team-dna-report .dna-squad-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 700px) {
      .team-dna-report .dna-fp-top { grid-template-columns: 130px 1fr 90px; }
      .team-dna-report .dna-fp-evidence { padding-left: 0; }
    }

    /* ── Responsive ── */
    @media (max-width: 700px) {
      #sidebar { width: 60px !important; }   /* beats any inline width set by drag/toggle */
      #sidebar .logo-name,
      #sidebar .logo-sub,
      #sidebar .nav-label,
      #sidebar .nav-badge,
      #sidebar .nav-section-label,
      #sidebar .nav-divider,
      #sidebar .sidebar-footer { opacity: 0; pointer-events: none; width: 0; overflow: hidden; margin: 0; padding: 0; height: 0; }
      #sidebar .nav-item { justify-content: center; padding: 0; width: 32px; height: 32px; margin: 0 auto; border-radius: 8px; border-color: transparent !important; flex-shrink: 0; }
      #sidebar .sidebar-logo { justify-content: center; padding: 16px 0; }
      #sidebar .logo-mark { justify-content: center; margin-bottom: 0; }
      #sidebar-toggle { display: none; }
    }
    @media (max-width: 600px) {
      #sidebar { display: none !important; }
      .msg-row { padding: 4px 14px; }
      .bubble  { max-width: 94%; }
      #inputbar { padding: 10px 12px 14px; }
      .sr-grid { grid-template-columns: repeat(2, 1fr); }
      .comparison-grid { grid-template-columns: 1fr; }
      .input-wrap { border-radius: 16px; padding: 8px 8px 8px 16px; }
      /* Chat rail becomes a slide-in drawer on mobile, opened by #mobile-chats-btn. */
      #chat-rail {
        display: flex !important;
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 84%; max-width: 320px; z-index: 60;
        transform: translateX(-100%); transition: transform .25s ease;
        box-shadow: 2px 0 24px rgba(0,0,0,.4);
      }
      #chat-rail.drawer-open { transform: translateX(0) !important; }
      #chat-drawer-backdrop {
        display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55;
        opacity: 0; pointer-events: none; transition: opacity .25s;
      }
      #chat-drawer-backdrop.is-visible { opacity: 1; pointer-events: auto; }
      /* National Scout build page: stop league cards clipping off the right
         edge by giving each card the full row and tightening the page gutter. */
      .ns-content { padding: 16px 14px 32px; gap: 10px; }
      .ns-leagues-grid { grid-template-columns: 1fr; }
      .ns-form-hero { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
      /* The long descriptive subtitle hard-truncates to "Build i…" on a phone —
         hide it (like #topbar .sub) so the Build/Report toggle has room. */
      #ns-topbar .panel-intro-desc { display: none; }
    }

    /* ─── Shortlist ──────────────────────────────────────────────────────── */
    .tab-badge {
      display: inline-flex; align-items: center; justify-content: center;
      background: var(--accent); color: #fff;
      font-size: .55rem; font-weight: 700;
      min-width: 16px; height: 16px; border-radius: 9999px;
      padding: 0 4px; margin-left: 4px; vertical-align: middle;
    }
    #shortlist-panel { display: flex; }
    #shortlist-subtabs {
      padding: 14px 24px 0; display: flex; gap: 6px;
      background: var(--surface2); border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .sl-pill {
      font-family: var(--font); font-size: .72rem; font-weight: 600;
      padding: 7px 18px; border-radius: 9999px 9999px 0 0;
      border: 1px solid var(--border2); border-bottom: none;
      background: var(--surface2); color: var(--text-muted);
      cursor: pointer; transition: background .12s, color .12s;
      letter-spacing: .01em; position: relative; bottom: -1px;
    }
    .sl-pill:hover { background: var(--surface3); color: var(--text); }
    .sl-pill.active { background: var(--surface2); color: var(--text); }
    .sl-section { flex: 1; overflow-y: auto; }
    .sl-section::-webkit-scrollbar { width: 4px; }
    .sl-section::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
    .sl-section-inner { max-width: 880px; margin: 0 auto; padding: 28px 24px; }
    .sl-search-wrap { position: relative; margin-bottom: 8px; }
    .sl-search-input {
      width: 100%; padding: 11px 16px;
      border: 1px solid var(--border2); border-radius: 12px;
      background: var(--surface); color: var(--text);
      font-family: var(--font); font-size: .88rem;
      outline: none; transition: border-color .15s; box-sizing: border-box;
    }
    .sl-search-input:focus { border-color: var(--teal); }
    .sl-search-note { font-size: .68rem; color: var(--text-muted); margin: 0 0 20px; }
    .sl-dropdown {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      background: var(--surface); border: 1px solid var(--border2);
      border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.09);
      z-index: 100; overflow: hidden;
    }
    .sl-dropdown-item {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 14px; cursor: pointer;
      border-bottom: 1px solid var(--border); transition: background .1s;
    }
    .sl-dropdown-item:last-child { border-bottom: none; }
    .sl-dropdown-item:hover { background: var(--surface2); }
    .sl-dropdown-item.sl-dd-disabled { opacity: .45; cursor: default; pointer-events: none; }
    .sl-dd-photo {
      width: 34px; height: 34px; border-radius: 50%;
      background: var(--surface3); object-fit: cover; flex-shrink: 0;
      border: 1px solid var(--border2);
    }
    .sl-dd-name { font-family: var(--font-display); font-weight: 600; font-size: .83rem; color: var(--text); }
    .sl-dd-meta { font-size: .68rem; color: var(--text-muted); }
    .sl-dropdown-msg { padding: 14px; font-size: .78rem; color: var(--text-muted); text-align: center; }
    .sl-preview-card { background: var(--surface); border: 1px solid var(--border2); border-radius: 16px; overflow: hidden; }
    .sl-preview-header {
      background: var(--rui-dark); padding: 20px 22px;
      display: flex; align-items: center; gap: 16px;
    }
    .sl-preview-photo {
      width: 56px; height: 56px; border-radius: 50%;
      background: rgba(255,255,255,.1); object-fit: cover; flex-shrink: 0;
      border: 2px solid rgba(255,255,255,.15);
    }
    .sl-preview-info { flex: 1; min-width: 0; }
    .sl-preview-name {
      font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
      color: #fff; letter-spacing: -0.02em; margin-bottom: 4px;
    }
    .sl-preview-meta { color: rgba(255,255,255,.55); font-size: .74rem; }
    .sl-preview-score-wrap { text-align: right; flex-shrink: 0; }
    .sl-preview-score {
      font-family: var(--font-display); font-size: 1.9rem;
      font-weight: 700; line-height: 1; letter-spacing: -0.04em;
    }
    .sl-score-green { color: var(--rui-teal); }
    .sl-score-amber { color: var(--rui-warning); }
    .sl-score-grey  { color: var(--rui-gray); }
    .sl-preview-score-label { font-family: var(--font-mono); font-size: .58rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .08em; margin-top: 2px; }
    .sl-preview-body { padding: 16px 22px; }
    .sl-preview-stats {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
      gap: 8px; margin-bottom: 16px;
    }
    .sl-stat-tile {
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 10px; padding: 9px 11px;
    }
    .sl-stat-label { font-family: var(--font-mono); font-size: .58rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; margin-bottom: 3px; }
    .sl-stat-value { font-family: var(--font-display); font-size: .9rem; font-weight: 600; color: var(--text); }
    .sl-add-btn {
      width: 100%; padding: 11px; border-radius: 10px; border: none;
      font-family: var(--font-display); font-size: .83rem; font-weight: 700;
      cursor: pointer; transition: opacity .15s; letter-spacing: -0.01em;
    }
    .sl-add-btn.add { background: var(--teal); color: #fff; }
    .sl-add-btn.add:hover { opacity: .85; }
    .sl-add-btn.added { background: var(--surface3); color: var(--text-muted); cursor: default; border: 1px solid var(--border2); }
    /* Search had no way through to a profile: the card could only shortlist. */
    .sl-preview-actions { display: flex; gap: 8px; }
    .sl-preview-actions .sl-add-btn { flex: 1 1 0; min-width: 0; }
    .sl-add-btn.open { background: var(--accent); color: #fff; }
    .sl-add-btn.open:hover { opacity: .85; }
    .sl-list-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
    .sl-list-count { font-family: var(--font-display); font-size: .88rem; font-weight: 600; color: var(--text); }
    .sl-clear-btn {
      background: none; border: 1px solid var(--border2); border-radius: 9999px;
      padding: 5px 14px; font-family: var(--font); font-size: .72rem; font-weight: 600;
      color: var(--rui-danger); cursor: pointer; transition: background .12s;
    }
    .sl-clear-btn:hover { background: rgba(226,59,74,.06); }
    .sl-group-label {
      font-family: var(--font-mono); font-size: .6rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .12em; color: var(--text-muted);
      margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
    }
    .sl-card-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
    }
    @media (max-width: 900px) { .sl-card-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 580px) { .sl-card-grid { grid-template-columns: 1fr; } }
    .sl-card {
      background: var(--surface); border: 1px solid var(--border2);
      border-radius: 14px; overflow: hidden; transition: box-shadow .15s;
    }
    .sl-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); }
    .sl-card-header {
      background: var(--rui-dark); padding: 14px 16px;
      display: flex; align-items: center; gap: 10px;
    }
    .sl-card-photo {
      width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.1);
      object-fit: cover; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,.15);
    }
    .sl-card-name {
      font-family: var(--font-display); font-size: .83rem; font-weight: 700;
      color: #fff; letter-spacing: -0.01em; flex: 1; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .sl-card-score { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
    .sl-card-body { padding: 12px 14px; }
    .sl-card-meta { font-size: .7rem; color: var(--text-muted); margin-bottom: 8px; line-height: 1.5; }
    .sl-card-stats { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
    .sl-card-stat { font-size: .68rem; color: var(--text-muted); }
    .sl-card-actions { display: flex; gap: 6px; }
    .sl-card-btn {
      flex: 1; padding: 7px 0; border-radius: 8px; border: 1px solid var(--border2);
      background: none; font-family: var(--font); font-size: .7rem; font-weight: 600;
      color: var(--text-dim); cursor: pointer; transition: background .12s, color .12s, border-color .12s;
    }
    .sl-card-btn:hover { background: var(--surface2); color: var(--text); }
    .sl-card-btn.compare-active { background: rgba(59,130,246,.1); border-color: var(--teal); color: var(--teal); }
    .sl-card-btn.remove:hover { background: rgba(226,59,74,.06); color: var(--rui-danger); border-color: var(--rui-danger); }
    .sl-compare-pills-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
    .sl-compare-pill {
      display: flex; align-items: center; gap: 7px;
      background: var(--surface2); border: 1px solid var(--border2); border-radius: 9999px;
      padding: 5px 12px 5px 8px; font-size: .74rem; font-weight: 500; color: var(--text-dim);
      cursor: pointer; transition: background .12s, border-color .12s, color .12s; user-select: none;
    }
    .sl-compare-pill img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
    .sl-compare-pill.selected { background: rgba(37,99,235,.12); border-color: var(--accent); color: var(--text); }
    .sl-compare-hint { font-size: .72rem; color: var(--text-muted); margin-bottom: 16px; }
    .sl-compare-table-outer { overflow-x: auto; border: 1px solid var(--border2); border-radius: 14px; margin-bottom: 20px; }
    .sl-compare-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
    .sl-compare-table th {
      padding: 10px 14px; text-align: center;
      font-family: var(--font-display); font-size: .75rem; font-weight: 700;
      color: var(--text); background: var(--surface3);
      border-bottom: 1px solid var(--border2); white-space: nowrap;
    }
    .sl-compare-table th:first-child { text-align: left; font-family: var(--font-mono); color: var(--text-muted); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }
    .sl-compare-table td {
      padding: 8px 14px; text-align: center;
      border-bottom: 1px solid var(--border); color: var(--text); white-space: nowrap;
    }
    .sl-compare-table td:first-child { text-align: left; color: var(--text-dim); font-size: .75rem; }
    .sl-compare-table tbody tr:last-child td { border-bottom: none; }
    .sl-compare-table tbody tr:hover { background: rgba(0,0,0,.02); }
    .sl-compare-table tr.score-row td { font-family: var(--font-display); font-weight: 700; font-size: .92rem; }
    .cell-best  { color: var(--teal) !important; font-weight: 700 !important; }
    .cell-worst { color: var(--text-muted) !important; }
    .sl-compare-summary-card {
      background: var(--surface); border: 1px solid var(--border2);
      border-radius: 14px; padding: 18px 20px;
    }
    .sl-summary-label { font-family: var(--font-mono); font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); margin-bottom: 10px; }
    .sl-summary-text { font-size: .84rem; color: var(--text); line-height: 1.7; }
    .sl-summary-loading { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: .8rem; }
    #sl-toast-container {
      position: fixed; bottom: 24px; right: 24px; z-index: 9999;
      display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
    }
    .sl-toast {
      background: var(--rui-dark); color: #fff; border-radius: 10px;
      padding: 10px 16px; font-size: .78rem; font-weight: 500;
      box-shadow: 0 4px 16px rgba(0,0,0,.15); max-width: 280px;
      animation: toastIn .18s ease;
    }
    .sl-toast.success { border-left: 3px solid var(--teal); }
    .sl-toast.info    { border-left: 3px solid var(--rui-blue); }
    @keyframes toastIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
    .sl-empty { text-align: center; padding: 60px 24px; color: var(--text-muted); font-size: .84rem; }
    .sl-empty-icon { font-size: 2rem; margin-bottom: 12px; }
    .sl-empty h3 { font-family: var(--font-display); font-size: .95rem; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; letter-spacing: -0.01em; }
    .sl-inject-btn {
      background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.3);
      border-radius: 9999px; padding: 4px 12px;
      font-family: var(--font); font-size: .65rem; font-weight: 700;
      color: var(--teal); cursor: pointer; transition: background .12s; white-space: nowrap;
    }
    .sl-inject-btn:hover { background: rgba(59,130,246,.2); }

    /* ── Player Discovery ─────────────────────────────────────────────────── */
    #discovery-panel { flex: 1; overflow-y: auto; padding: 32px 28px; flex-direction: column; }
    .pd-inner { max-width: 620px; margin: 0 auto; width: 100%; padding-top: 32px; }

    .pd-mode-row { display: flex; gap: 10px; margin-bottom: 28px; }
    .pd-mode-btn {
      flex: 1; padding: 12px 20px; border-radius: 12px;
      border: 1px solid var(--border2); background: var(--surface);
      font-size: .88rem; font-weight: 600; cursor: pointer; transition: .12s; font-family: var(--font);
    }
    .pd-mode-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

    .pd-step-bar { display: flex; align-items: center; margin-bottom: 28px; }
    .pd-step-node { display: flex; flex-direction: column; align-items: center; gap: 4px;
      font-family: var(--font-mono); font-size: .62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; min-width: 60px; }
    .pd-step-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border2);
      background: var(--surface); display: flex; align-items: center; justify-content: center;
      font-size: .7rem; font-weight: 700; color: var(--text-muted); transition: .15s; }
    .pd-step-line { flex: 1; height: 2px; background: var(--border2); transition: background .15s; }
    .pd-step-node.active .pd-step-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
    .pd-step-node.done .pd-step-dot  { background: var(--teal);   border-color: var(--teal);   color: #fff; }
    .pd-step-node.active { color: var(--text); }
    .pd-step-node.done   { color: var(--teal); }
    .pd-step-line.done   { background: var(--teal); }

    .pd-pitch-wrap { background: #2a5c24; border-radius: 12px; padding: 12px; margin-bottom: 14px; }
    .pd-pitch-wrap svg { width: 100%; height: auto; display: block; }
    .pd-zone-rect { fill: rgba(255,255,255,.1); cursor: pointer; transition: fill .12s; }
    .pd-zone-rect:hover { fill: rgba(255,255,255,.22); }
    .pd-zone-rect.selected { fill: var(--teal); }
    .pd-zone-label { fill: rgba(255,255,255,.85); font-size: 10px; font-weight: 700;
      pointer-events: none; text-anchor: middle; dominant-baseline: middle; font-family: var(--font); }
    .pd-zone-group.selected .pd-zone-label { fill: #fff; }

    .pd-role-desc { background: var(--surface); border: 1px solid var(--border2); border-radius: 10px;
      padding: 11px 15px; font-size: .81rem; color: var(--text-dim); margin-bottom: 18px; min-height: 36px; }

    .pd-priority-list { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
    .pd-priority-card { background: var(--surface); border: 1px solid var(--border2); border-radius: 10px;
      padding: 11px 14px; display: flex; align-items: center; gap: 10px;
      cursor: grab; transition: box-shadow .12s, opacity .12s; user-select: none; }
    .pd-priority-card:active { cursor: grabbing; }
    .pd-priority-card.dragging { opacity: .5; }
    .pd-priority-card.drag-over { border-color: var(--teal); background: rgba(59,130,246,.06); }
    .pd-priority-rank { width: 22px; height: 22px; border-radius: 50%; background: var(--accent);
      color: #fff; font-size: .67rem; font-weight: 700; display: flex; align-items: center;
      justify-content: center; flex-shrink: 0; }
    .pd-priority-name { flex: 1; font-size: .83rem; font-weight: 600; }
    .pd-priority-weight { font-size: .7rem; color: var(--teal); font-weight: 700; }

    .pd-label { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--text-muted); margin-bottom: 8px; }
    .pd-constraint-section { margin-bottom: 18px; }
    .pd-age-row { display: flex; align-items: center; gap: 10px; font-size: .82rem; color: var(--text-dim); }
    .pd-age-input { width: 56px; padding: 6px 8px; border: 1px solid var(--border2); border-radius: 8px;
      background: var(--surface); font-size: .82rem; text-align: center; font-family: var(--font); }
    .pd-mins-row { display: flex; gap: 7px; flex-wrap: wrap; }
    .pd-mins-btn { padding: 6px 14px; border-radius: 9999px; border: 1px solid var(--border2);
      background: var(--surface); font-size: .76rem; cursor: pointer; transition: .12s; font-family: var(--font); }
    .pd-mins-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .pd-league-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .pd-league-check { display: flex; align-items: center; gap: 7px; font-size: .82rem; cursor: pointer; }

    .pd-review-box { background: var(--surface); border: 1px solid var(--border2); border-radius: 14px;
      padding: 18px 20px; margin-bottom: 18px; }
    .pd-review-heading { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; color: var(--text-muted); margin-bottom: 14px; }
    .pd-review-row { display: flex; justify-content: space-between; font-size: .82rem;
      color: var(--text-dim); margin-bottom: 5px; }
    .pd-review-row strong { color: var(--text); }
    .pd-pri-bar-row { display: flex; align-items: center; gap: 8px; font-size: .78rem; margin-bottom: 5px; }
    .pd-pri-bar-label { min-width: 160px; color: var(--text-dim); }
    .pd-pri-bar-wrap { flex: 1; height: 5px; background: var(--surface3); border-radius: 3px; overflow: hidden; }
    .pd-pri-bar-fill { height: 100%; background: var(--teal); border-radius: 3px; }
    .pd-pri-bar-pct { font-size: .67rem; color: var(--text-muted); min-width: 30px; text-align: right; }

    .pd-describe-textarea { width: 100%; min-height: 112px; padding: 13px 15px; border-radius: 12px;
      border: 1px solid var(--border2); background: var(--surface); resize: vertical;
      font-size: .84rem; font-family: var(--font); box-sizing: border-box; }
    .pd-describe-textarea:focus { outline: none; border-color: var(--teal); }
    .pd-interpreted-box { background: var(--surface); border: 1px solid rgba(59,130,246,.3);
      border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
    .pd-interpreted-ok { color: var(--teal); font-weight: 700; font-size: .84rem; margin-bottom: 12px; }

    .pd-nav-row { display: flex; gap: 10px; justify-content: space-between; margin-top: 4px; }
    .pd-btn { padding: 9px 20px; border-radius: 9999px; font-size: .8rem; font-weight: 600;
      cursor: pointer; transition: .12s; border: none; font-family: var(--font); }
    .pd-btn-primary  { background: var(--accent); color: #fff; }
    .pd-btn-primary:hover  { opacity: .87; }
    .pd-btn-primary:disabled { opacity: .4; cursor: default; }
    .pd-btn-secondary { background: var(--surface); border: 1px solid var(--border2); color: var(--text); }
    .pd-btn-secondary:hover { background: var(--surface2); }
    .pd-btn-teal { background: var(--teal); color: #fff; }
    .pd-btn-teal:hover { opacity: .88; }
    .pd-btn-teal:disabled { opacity: .4; cursor: default; }

    .pd-loading { display: none; flex-direction: column; align-items: center; gap: 14px;
      padding: 40px 0; text-align: center; }
    .pd-loading.visible { display: flex; }
    .pd-loading-bar-wrap { width: 220px; height: 4px; background: var(--border2); border-radius: 2px; overflow: hidden; }
    .pd-loading-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--teal), #60a5fa);
      border-radius: 2px; transition: width 1s ease-out; }
    .pd-loading-lbl { font-size: .75rem; color: var(--text-muted); }

    .pd-results-header { background: var(--surface); border: 1px solid var(--border2); border-radius: 12px;
      padding: 13px 16px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: flex-start; }
    .pd-results-title { font-weight: 700; font-size: .9rem; }
    .pd-results-sub { font-size: .7rem; color: var(--text-muted); margin-top: 2px; }

    .pd-result-card { background: var(--surface); border: 1px solid var(--border2); border-radius: 14px;
      margin-bottom: 10px; overflow: hidden; transition: box-shadow .12s; }
    .pd-result-card:hover { box-shadow: 0 3px 14px rgba(0,0,0,.07); }
    .pd-result-card-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
      border-bottom: 1px solid var(--border); }
    .pd-result-rank { font-size: 1.15rem; font-weight: 800; color: var(--text-muted); min-width: 30px; text-align: center; }
    .pd-result-rank.gold   { color: #f59e0b; }
    .pd-result-rank.silver { color: #94a3b8; }
    .pd-result-rank.bronze { color: #cd7c4b; }
    .pd-result-photo { width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
      background: var(--surface2); flex-shrink: 0; }
    .pd-result-info { flex: 1; min-width: 0; }
    .pd-result-name { font-weight: 700; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pd-result-meta { font-size: .7rem; color: var(--text-muted); margin-top: 1px; }
    .pd-result-score { font-size: 1.05rem; font-weight: 800; color: var(--teal); text-align: right; flex-shrink: 0; }
    .pd-result-score-lbl { font-size: .58rem; color: var(--text-muted); font-weight: 400; display: block; }
    .pd-result-sl { padding: 5px 11px; border-radius: 9999px; background: rgba(59,130,246,.1);
      border: 1px solid rgba(59,130,246,.3); color: var(--teal); font-size: .64rem; font-weight: 700;
      cursor: pointer; transition: .12s; flex-shrink: 0; font-family: var(--font); }
    .pd-result-sl:hover { background: rgba(59,130,246,.2); }
    .pd-result-sl.added { background: var(--surface3); color: var(--text-muted); border-color: var(--border2); cursor: default; }

    .pd-breakdown { padding: 11px 14px; border-bottom: 1px solid var(--border); }
    .pd-bd-row { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; font-size: .73rem; }
    .pd-bd-label { min-width: 150px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pd-bd-bar-wrap { flex: 1; height: 4px; background: var(--surface3); border-radius: 2px; overflow: hidden; }
    .pd-bd-bar-fill { height: 100%; background: var(--teal); border-radius: 2px; transition: width .4s ease-out; }
    .pd-bd-val { font-size: .68rem; color: var(--text-muted); min-width: 28px; text-align: right; }
    .pd-bd-star { color: #f59e0b; font-size: .68rem; min-width: 10px; }

    .pd-key-stats { padding: 9px 14px; display: flex; gap: 14px; flex-wrap: wrap; }
    .pd-kstat { font-size: .73rem; color: var(--text-dim); }
    .pd-kstat strong { color: var(--text); font-weight: 700; }

    #pd-load-more { display: block; width: 100%; padding: 10px; border-radius: 9999px;
      border: 1px solid var(--border2); background: var(--surface); font-size: .8rem;
      font-weight: 600; cursor: pointer; margin: 2px 0 16px; transition: .12s; font-family: var(--font); }
    #pd-load-more:hover { background: var(--surface2); }

    .pd-chat-link { margin-top: 16px; text-align: center; font-size: .8rem; color: var(--text-muted); margin-bottom: 24px; }
    .pd-chat-link button { background: none; border: none; color: var(--accent); font-weight: 700;
      cursor: pointer; font-size: .8rem; text-decoration: underline; font-family: var(--font); }

    .pd-no-results { padding: 40px 0; text-align: center; color: var(--text-muted); font-size: .84rem; line-height: 1.6; display: none; }

    /* Archetype tray in Build Profile */
    #pb-archetype-tray { margin-bottom: 16px; }
    #pb-archetype-label {
      font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em;
      color: var(--text-muted); margin-bottom: 8px;
    }
    #pb-archetype-tray .pd-role-cards { grid-template-columns: repeat(4, 1fr); }
    .pb-archetype-placeholder {
      grid-column: 1 / -1; padding: 18px; text-align: center;
      font-size: .78rem; color: var(--text-muted);
      border: 1.5px dashed var(--border2); border-radius: 10px;
    }
    @media (max-width: 600px) {
      #pb-archetype-tray .pd-role-cards { grid-template-columns: 1fr 1fr; }
    }

    /* Role archetype cards */
    .pd-role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 0 2px; }
    .pd-role-card {
      background: var(--surface); border: 1.5px solid var(--border2); border-radius: 10px;
      padding: 11px 13px; cursor: pointer; transition: border-color .12s, background .12s;
    }
    .pd-role-card:hover { border-color: var(--accent); background: var(--surface2); }
    .pd-role-card.selected { border-color: var(--teal); background: rgba(59,130,246,.06); }
    .pd-role-card-custom { border-style: dashed; }
    .pd-role-card-custom.selected { border-style: solid; }
    .pd-role-card-name { font-weight: 700; font-size: .82rem; margin-bottom: 4px; color: var(--text); }
    .pd-role-card-desc { font-size: .7rem; color: var(--text-muted); margin-bottom: 7px; line-height: 1.4; }
    .pd-role-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
    .pd-role-tag { font-size: .61rem; padding: 2px 7px; border-radius: 9999px;
      background: var(--surface3); color: var(--text-dim); font-weight: 600; }
    .pd-role-tag-custom { background: rgba(59,130,246,.1); color: var(--teal); }

    /* Swap select on priority cards */
    .pd-swap-select {
      appearance: none; -webkit-appearance: none;
      background: var(--surface2); border: 1px solid var(--border2);
      border-radius: 6px; font-size: .67rem; padding: 2px 7px; cursor: pointer;
      color: var(--text-muted); font-family: var(--font); flex-shrink: 0;
    }
    .pd-swap-select:focus { outline: none; border-color: var(--teal); }
    .pd-swap-select:hover { border-color: var(--accent); }

    /* Custom priority pick mode */
    .pd-custom-pick-hint { font-size: .75rem; color: var(--text-muted); margin-bottom: 10px; font-weight: 500; }
    .pd-custom-pool { display: flex; flex-wrap: wrap; gap: 8px; }
    .pd-pool-chip {
      padding: 7px 15px; border-radius: 9999px; border: 1.5px solid var(--border2);
      background: var(--surface); font-size: .79rem; cursor: pointer; transition: .12s;
      font-family: var(--font); font-weight: 500; color: var(--text);
    }
    .pd-pool-chip:hover { border-color: var(--accent); background: var(--surface2); }
    .pd-pool-chip.selected { background: var(--accent); color: #fff; border-color: var(--accent); }
    .pd-pool-chip:disabled { opacity: .4; cursor: default; }

    @media (max-width: 580px) {
      #discovery-panel { padding: 18px 12px; }
      .pd-bd-label { min-width: 110px; font-size: .67rem; }
      .pd-result-rank { min-width: 22px; font-size: 1rem; }
      .pd-role-cards { grid-template-columns: 1fr; }
    }

    /* ── Mobile bottom nav ── */
    #mobile-nav {
      display: none;
    }
    @media (max-width: 600px) {
      #mobile-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: var(--surface);
        border-top: 1px solid var(--border);
        z-index: 200;
        padding: 6px 0 max(6px, env(safe-area-inset-bottom));
      }
      .mob-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        border: none;
        background: none;
        color: var(--text-muted);
        font-size: .58rem;
        font-weight: 600;
        font-family: var(--font);
        letter-spacing: .02em;
        cursor: pointer;
        padding: 4px 0;
        min-height: 48px;
        justify-content: center;
        transition: color .12s;
        text-transform: uppercase;
      }
      .mob-nav-btn svg { width: 20px; height: 20px; transition: color .12s; }
      .mob-nav-btn.active { color: var(--accent); }
      /* ── Mobile scroll hardening ──────────────────────────────────────────
         The bottom nav is position:fixed (~61px tall) and overlays content, so
         every primary scroll panel needs clearance for it. iOS Safari also
         refuses to touch-scroll a flex child whose min-height is auto, so
         min-height:0 + momentum scrolling are required for the chat and the
         league/player panels to pan reliably on a phone.

         The clearance is a real in-flow ::after box, NOT padding-bottom on the
         container. WebKit ends a scroller's scrollable area at the content edge
         and drops the container's own bottom padding from scrollHeight, so
         padding here means the last 72px of content sits permanently behind the
         fixed nav on iOS Safari with no way to scroll to it — which is exactly
         how the Scout "Run Search" button became unreachable once a profile was
         interpreted. It looked fine everywhere else because desktop Chrome does
         count the padding, and a home-screen web app has no Safari toolbars, so
         the same screen fits without needing to scroll at all. A child box is
         counted by every engine. */
      #inputbar { padding-bottom: calc(18px + 64px); }
      #messages::after,
      #home-panel::after,
      #pulse-panel::after,
      #worldcup-panel::after,
      #wire-panel::after,
      #refractions-panel::after,
      #scout-panel .ns-screen::after,
      #ph-discover::after,
      #ph-profile::after,
      #ph-shortlist .sl-section::after {
        content: '';
        display: block;
        width: 100%;
        height: 72px;
        flex: 0 0 72px;   /* flex-column parents would otherwise shrink it away */
      }
      #messages,
      #home-panel,
      #pulse-panel,
      #worldcup-panel,
      #wire-panel,
      #refractions-panel,
      #scout-panel .ns-screen,
      #ph-discover,
      #ph-profile,
      #ph-shortlist .sl-section {
        min-height: 0;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
      }
      /* Vertically-centred intro screens (chat welcome, pulse empty state) clip
         their own content top AND bottom once it's taller than the viewport —
         which it always is on a phone. Anchor them to the top so the scroll
         container can reveal every row instead of centring the overflow away. */
      #welcome,
      #pulse-panel .pulse-empty-state {
        justify-content: flex-start;
        flex: none;
        height: auto;
        min-height: 0;
        padding-top: 24px;
      }
      /* A scroll container's own padding-bottom is unreliably excluded from
         scrollHeight in a flex-column overflow context (Chrome), so the last
         child (chat leagues note) ends up trapped behind the fixed nav. Put the
         nav clearance on the content itself, where child padding always counts. */
      #welcome { padding-bottom: 96px; }

      /* ── Scout (Discover) — tighten layout on phones ──────────────────────
         The position pitch is portrait (300×420) so at full panel width it
         grows ~490px tall and swallows the screen edge-to-edge. Add side
         gutters, trim the top gap, cap the pitch width and centre it, and let
         the three mode buttons sit cleanly on one line. */
      .pd-inner { padding: 16px 16px 0; }
      .pd-pitch-wrap { max-width: 240px; margin: 0 auto 14px; padding: 10px; }
      .pd-mode-row { gap: 7px; margin-bottom: 20px; }
      .pd-mode-btn { padding: 11px 6px; font-size: .78rem; white-space: nowrap; }
    }

    /* ── Dashboard ─────────────────────────────────────────────────────────── */
    .dashboard-canvas {
      background: var(--bg); flex: 1; min-width: 0; overflow-y: auto;
      color: var(--text); font-family: var(--font);
    }

    /* Persistent search bar */
    .dash-topbar {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 2rem; border-bottom: 1px solid var(--border);
      background: var(--surface); position: sticky; top: 0; z-index: 10;
    }
    .dash-topbar-label { color: var(--text-muted); font-size: .75rem; white-space: nowrap; }
    .dash-topbar-search { position: relative; flex: 1; max-width: 380px; }
    .dash-topbar-search input {
      width: 100%; padding: 7px 12px; border-radius: 8px;
      background: var(--surface2); border: 1px solid var(--border2);
      color: var(--text); font-size: .84rem; outline: none;
    }
    .dash-topbar-search input:focus { border-color: var(--accent); }
    .dash-topbar-search input::placeholder { color: var(--text-muted); }

    /* Empty state */
    .dash-empty-state {
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; min-height: 100%; gap: 28px; padding: 60px 24px;
      text-align: center;
      background:
        radial-gradient(ellipse 70% 55% at 50% 100%, rgba(16,185,129,.06) 0%, transparent 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400'%3E%3Crect width='600' height='400' fill='none'/%3E%3Cline x1='0' y1='200' x2='600' y2='200' stroke='rgba(255,255,255,.03)' stroke-width='1'/%3E%3Ccircle cx='300' cy='200' r='70' fill='none' stroke='rgba(255,255,255,.03)' stroke-width='1'/%3E%3Crect x='220' y='140' width='160' height='120' fill='none' stroke='rgba(255,255,255,.025)' stroke-width='1'/%3E%3C/svg%3E") center/cover no-repeat;
    }
    .dash-empty-icon {
      width: 64px; height: 64px; border-radius: 18px;
      background: rgba(37,99,235,.12); border: 1px solid rgba(37,99,235,.25);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 0 32px rgba(37,99,235,.15);
    }
    .dash-empty-state h2 {
      font-family: var(--font-display); font-size: 1.8rem; font-weight: 800;
      letter-spacing: -0.04em; color: var(--text); margin-bottom: 6px; line-height: 1.1;
    }
    .dash-empty-state p { font-size: .9rem; color: var(--text-muted); max-width: 400px; line-height: 1.6; margin: 0; }
    .dash-search-wrap { position: relative; width: 100%; max-width: 520px; }
    .dash-search-wrap input {
      width: 100%; padding: 16px 20px; border-radius: 14px;
      background: var(--surface); border: 1.5px solid var(--border2);
      color: var(--text); font-size: 1rem; outline: none;
      box-shadow: 0 2px 12px rgba(0,0,0,.1);
      transition: border-color .15s, box-shadow .15s;
    }
    .dash-search-wrap input:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(37,99,235,.12), 0 2px 12px rgba(0,0,0,.1);
    }
    .dash-suggest-label { font-family: var(--font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); font-weight: 600; }
    .dash-suggest-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 520px; }
    .dash-suggest-chip {
      padding: 7px 16px; border-radius: 9999px; font-size: .8rem; font-weight: 600;
      background: var(--surface2); border: 1px solid var(--border2); color: var(--text-muted);
      cursor: pointer; transition: border-color .12s, color .12s, background .12s;
    }
    .dash-suggest-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

    /* Sections */
    .dash-section {
      border-bottom: 1px solid var(--border); padding: 2rem;
      max-width: 1100px; margin: 0 auto; background: var(--bg);
    }
    .dash-section-title {
      font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em;
      color: var(--accent); font-size: .72rem; font-weight: 600; margin-bottom: 6px;
    }
    .dash-section-subtitle { color: var(--text-muted); font-size: .8rem; margin-bottom: 16px; }

    /* Skeleton loaders */
    @keyframes shimmer {
      0%   { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    .dash-skeleton {
      background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
      background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 10px;
    }
    .dash-skeleton-header { height: 140px; }
    .dash-skeleton-chart  { height: 280px; }
    .dash-skeleton-bars   { height: 220px; }

    /* Player header hero */
    .dash-player-hero {
      background: #0d0d12; padding: 28px 2rem 24px;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .dash-player-header { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
    .dash-player-photo {
      width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
      flex-shrink: 0;
    }
    .dash-player-photo-placeholder {
      width: 96px; height: 96px; border-radius: 50%;
      background: #1a1a22; display: flex; align-items: center;
      justify-content: center; font-size: 2.4rem; flex-shrink: 0;
    }
    .dash-player-info { flex: 1; min-width: 180px; }
    .dash-player-name {
      font-family: var(--font-display); font-size: 1.9rem; font-weight: 800;
      letter-spacing: -0.04em; color: #fff; line-height: 1.1;
    }
    .dash-player-meta { color: rgba(255,255,255,.5); font-size: .87rem; margin-top: 5px; }
    .dash-header-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
    .dash-action-btn {
      padding: 7px 16px; border-radius: 8px; font-size: .8rem; cursor: pointer;
      border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.75); transition: background .15s, border-color .15s, color .15s;
    }
    .dash-action-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; }
    .dash-action-btn.primary {
      background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.4); color: #10b981;
    }
    .dash-action-btn.primary:hover { background: rgba(16,185,129,.2); border-color: rgba(16,185,129,.6); }
    .dash-quick-stats {
      display: flex; gap: 20px; margin-top: 16px; flex-wrap: wrap;
      padding: 12px 16px; background: var(--surface);
      border-radius: 10px; font-size: .82rem; border: 1px solid var(--border);
    }
    .dash-qs-item { text-align: center; }
    .dash-qs-val { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
    .dash-qs-lbl { color: var(--text-muted); font-size: .7rem; margin-top: 2px; }
    .dash-season-badge {
      font-size: .72rem; color: rgba(37,99,235,.9); background: rgba(37,99,235,.12);
      border: 1px solid rgba(37,99,235,.2);
      border-radius: 6px; padding: 3px 8px; display: inline-block; margin-top: 10px;
    }
    /* Header section edge-to-edge */
    .dash-header-section { padding: 0 !important; overflow: hidden; }
    .dash-stat-strip-wrap { padding: 16px 2rem 24px; max-width: 1100px; margin: 0 auto; }

    /* Score badge */
    .dash-score-badge {
      width: 62px; height: 62px; border-radius: 50%;
      border: 2px solid currentColor;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; line-height: 1;
      background: rgba(0,0,0,.3);
    }
    .dash-score-badge-sub { font-size: .6rem; font-weight: 400; opacity: .65; margin-top: 1px; }

    /* Radar legend */
    .dash-radar-wrap { max-width: 460px; margin: 0 auto; }
    .dash-radar-legend {
      display: flex; justify-content: center; gap: 20px;
      font-size: .75rem; margin-top: 12px;
    }
    .dl-player { color: var(--accent); font-weight: 600; }
    .dl-avg    { color: var(--text-muted); }
    .dl-elite  { color: #d97706; }

    /* Percentile bars */
    .dash-pct-row { margin-bottom: 18px; }
    .dash-pct-label { font-size: .8rem; color: var(--text); margin-bottom: 5px; font-weight: 500; }
    .dash-pct-bar-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; }
    .dash-pct-bar-track {
      flex: 1; background: var(--surface3); border-radius: 4px; height: 9px; overflow: hidden;
    }
    .dash-pct-bar-fill { height: 9px; border-radius: 4px; transition: width .6s ease; }
    .pct-gold  { background: #d97706; }
    .pct-green { background: #059669; }
    .pct-white { background: var(--teal); }
    .pct-muted { background: #94a3b8; }
    .dash-pct-pct  { font-size: .75rem; color: var(--text-muted); min-width: 90px; white-space: nowrap; }
    .dash-elite-badge {
      font-size: .65rem; background: rgba(217,119,6,.12); color: #d97706;
      border-radius: 4px; padding: 1px 6px; font-weight: 600;
    }
    .dash-pct-meta { font-size: .73rem; color: var(--text-muted); }

    /* xG summary row */
    .dash-xg-summary { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 16px; }
    .dash-xg-cell {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 14px; text-align: center;
    }
    .dash-xg-cell-val { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.03em; color: var(--text); }
    .dash-xg-cell-lbl { font-size: .72rem; color: var(--text-muted); margin-top: 2px; }
    .dash-xg-efficiency { font-size: .75rem; font-weight: 600; margin-top: 4px; }
    .eff-clinical { color: #059669; }
    .eff-expected { color: var(--text-muted); }
    .eff-under    { color: #d97706; }

    /* Form dots */
    .dash-form5 { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
    .dash-form5-dot {
      width: 14px; height: 14px; border-radius: 50%;
      background: var(--surface3); border: 2px solid var(--border2);
    }
    .dash-form5-dot.good { background: #059669; border-color: #059669; }
    .dash-form5-lbl { font-size: .73rem; color: var(--text-muted); margin-left: 4px; }

    /* Home/Away grid */
    .dash-ha-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .dash-ha-panel {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px;
    }
    .dash-ha-title {
      font-family: var(--font-mono); font-size: .75rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; color: var(--text-muted); margin-bottom: 12px;
    }
    .dash-ha-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 5px 0; font-size: .83rem; border-bottom: 1px solid var(--border);
    }
    .dash-ha-row:last-child { border-bottom: none; }
    .dash-ha-key { color: var(--text-muted); }
    .dash-ha-val { color: var(--text); font-weight: 600; }
    .dash-ha-val.better { color: #059669; }
    .dash-insight {
      margin-top: 16px; padding: 14px 16px;
      background: var(--accent-dim); border-left: 3px solid var(--accent);
      border-radius: 0 8px 8px 0; color: var(--text-dim); font-size: .85rem;
      font-style: italic; line-height: 1.5;
    }

    /* Dashboard button (on player cards throughout the app) */
    .dash-btn {
      background: var(--surface); border: 1px solid var(--border2);
      color: var(--accent); padding: 4px 10px; border-radius: 6px;
      font-size: .75rem; cursor: pointer; transition: background .15s;
    }
    .dash-btn:hover { background: var(--accent-dim); }

    /* Muted placeholder */
    .dash-unavailable {
      padding: 32px; text-align: center; color: var(--text-muted);
      font-size: .85rem; background: var(--surface); border-radius: 10px;
      border: 1px dashed var(--border2);
    }

    /* Similar players results */
    .dash-similar-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 12px; margin-top: 12px;
    }
    .dash-sim-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px;
      transition: border-color .15s, box-shadow .15s;
    }
    .dash-sim-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(37,99,235,.08); }
    .dash-sim-header { display: flex; align-items: center; gap: 10px; }
    .dash-sim-photo {
      width: 38px; height: 38px; border-radius: 50%; object-fit: cover;
      background: var(--surface3); flex-shrink: 0;
    }
    .dash-sim-name { font-size: .85rem; font-weight: 600; color: var(--text); }
    .dash-sim-meta { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }
    .dash-sim-score { font-family: var(--font-display); margin-left: auto; font-size: 1rem; font-weight: 700; flex-shrink: 0; }
    .dash-sim-stats { display: flex; flex-wrap: wrap; gap: 6px; }
    .dash-sim-stat {
      font-size: .72rem; background: var(--surface2);
      border-radius: 5px; padding: 2px 7px; color: var(--text-muted);
    }
    .dash-sim-stat strong { color: var(--text); }
    .dash-sim-footer { margin-top: auto; }
    .dash-sim-loading { text-align: center; padding: 40px; color: var(--text-muted); font-size: .85rem; }

    /* Bio strip */
    .dash-bio-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
    .dash-bio-chip {
      font-size: .73rem; color: rgba(255,255,255,.45);
      display: flex; align-items: center; gap: 4px;
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
      border-radius: 6px; padding: 4px 10px;
    }
    .dash-bio-chip strong { color: rgba(255,255,255,.85); font-weight: 600; }

    /* Position-aware hero stat tiles */
    .dash-stat-strip {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 10px; margin-top: 20px;
    }
    .dash-stat-tile {
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 12px; padding: 16px 12px; text-align: center;
      transition: border-color .15s;
    }
    .dash-stat-tile.tier-good {
      border-color: rgba(37,99,235,.4);
      background: rgba(37,99,235,.06);
    }
    .dash-stat-tile.tier-elite {
      border-color: rgba(217,119,6,.5);
      background: rgba(217,119,6,.07);
    }
    .dash-stat-tile.tier-elite .dst-val { color: #d97706; }
    .dst-val {
      font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
      color: var(--text); letter-spacing: -0.03em; line-height: 1;
    }
    .dst-lbl {
      font-family: var(--font-mono); font-size: .58rem; text-transform: uppercase; letter-spacing: .08em;
      color: var(--text-muted); margin-top: 5px; font-weight: 500;
    }
    .dst-sub {
      display: block; font-family: var(--font-mono); font-size: .6rem; color: var(--teal);
      font-weight: 500; margin-top: 3px;
    }
    .dst-tier-badge {
      font-size: .55rem; color: #d97706; margin-top: 4px;
      font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    }

    /* Pitch position map */
    .dash-pitch-map { flex-shrink: 0; }

    /* Strengths & weaknesses */
    .dash-sw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .dash-sw-col h4 {
      font-family: var(--font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .1em;
      font-weight: 700; margin-bottom: 10px;
    }
    .dash-sw-col.strengths h4 { color: #059669; }
    .dash-sw-col.weaknesses h4 { color: #ea580c; }
    .dash-pills { display: flex; flex-wrap: wrap; gap: 6px; }
    .dash-strength-pill {
      display: inline-flex; align-items: center; gap: 5px;
      background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25);
      color: #059669; border-radius: 9999px; font-size: .72rem; font-weight: 600;
      padding: 4px 12px;
    }
    .dash-weakness-pill {
      display: inline-flex; align-items: center; gap: 5px;
      background: rgba(249,115,22,.08); border: 1px solid rgba(249,115,22,.25);
      color: #ea580c; border-radius: 9999px; font-size: .72rem; font-weight: 600;
      padding: 4px 12px;
    }
    .dash-pill-pct { font-size: .6rem; opacity: .65; }

    /* Rolling form tiles */
    .dash-form5-games { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
    .dash-form5-game {
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 10px; padding: 8px 10px; font-size: .7rem;
      min-width: 72px; text-align: center;
    }
    .dash-form5-opp {
      font-size: .68rem; font-weight: 600; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      max-width: 80px;
    }
    .dash-form5-ga { font-size: .72rem; color: var(--text-dim); }
    .dash-form5-rating {
      font-size: .68rem; font-weight: 700; padding: 2px 6px;
      border-radius: 4px; background: var(--surface3); color: var(--text);
    }
    .dash-form5-rating.good   { background: rgba(16,185,129,.12); color: #059669; }
    .dash-form5-rating.ok     { background: rgba(37,99,235,.1);   color: var(--accent); }
    .dash-form5-rating.poor   { background: rgba(249,115,22,.1);  color: #ea580c; }
    .dash-form5-venue {
      font-family: var(--font-mono); font-size: .6rem; color: var(--text-muted); text-transform: uppercase;
      letter-spacing: .06em;
    }

    @media (max-width: 600px) {
      .dash-section { padding: 1rem; }
      .dash-ha-grid { grid-template-columns: 1fr; }
      .dash-xg-summary { grid-template-columns: 1fr; }
      .dash-player-score { margin-left: 0; }
      .dash-sw-grid { grid-template-columns: 1fr; }
      .dash-stat-strip { grid-template-columns: repeat(3, 1fr); }
    }

    /* ═══════════════════════════════════════════════════════════════
       HOME PAGE STYLES
    ═══════════════════════════════════════════════════════════════ */

    #home-panel {
      display: flex; flex-direction: column;
      height: 100%; overflow-y: auto;
      background: var(--bg);
    }

    /* ── Page header ── */

    /* ── Ticker strip ── */
    .ticker-strip {
      background: #0b0b0b; overflow: hidden;
      height: 42px; display: flex; align-items: center;
      flex-shrink: 0; border-bottom: 1px solid #1a1a1a;
    }
    .ticker-track {
      display: flex; align-items: center; gap: 40px;
      white-space: nowrap;
      animation: ticker-scroll 90s linear infinite;
    }
    .ticker-strip:hover .ticker-track { animation-play-state: paused; }
    @keyframes ticker-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .ticker-item {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: .75rem; color: rgba(255,255,255,.85);
      font-family: var(--font); cursor: pointer; transition: color .15s;
    }
    .ticker-item:hover { color: #fff; }
    .ticker-player-photo {
      width: 22px; height: 22px; border-radius: 50%;
      object-fit: cover; background: #222; flex-shrink: 0;
    }
    .ticker-club-logo {
      width: 16px; height: 16px; object-fit: contain;
      flex-shrink: 0; vertical-align: middle;
    }
    .ticker-club-logo-placeholder {
      width: 16px; height: 16px; border-radius: 2px;
      background: #2a2a2a; display: inline-block; flex-shrink: 0;
    }
    .ticker-club { color: rgba(255,255,255,.8); font-weight: 500; }
    .ticker-arrow { color: #4a9eff; font-size: .7rem; font-weight: 700; }
    .ticker-type {
      font-family: var(--font-mono); color: rgba(255,255,255,.4); font-size: .62rem;
      background: rgba(255,255,255,.07); border-radius: 3px;
      padding: 1px 4px; letter-spacing: .03em; text-transform: uppercase;
    }
    .ticker-dot { color: rgba(255,255,255,.2); font-size: .6rem; }
    .ticker-date { color: rgba(255,255,255,.3); font-size: .65rem; }

    /* ── Bands ── */
    .home-band { padding: 28px 32px; }
    .home-band-1 { background: var(--surface2); }
    .home-band-2 { background: var(--surface); }
    .home-band-3 { background: var(--surface3); flex: 1; }
    .home-section { margin-bottom: 28px; }
    .home-section:last-child { margin-bottom: 0; }

    /* ── Section labels ── */
    .section-title {
      font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .09em;
      color: var(--text-muted); margin-bottom: 3px;
    }
    .section-subtitle {
      font-size: .75rem; color: var(--text-dim); margin-bottom: 14px;
    }

    /* ── Player cards (TOTW row) ── */
    .home-players-row {
      display: flex; gap: 12px; overflow-x: auto;
      padding-bottom: 4px;
    }
    .home-players-row::-webkit-scrollbar { height: 4px; }
    .home-players-row::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .home-player-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 14px; min-width: 160px; max-width: 180px;
      flex-shrink: 0; display: flex; flex-direction: column; gap: 6px;
      transition: border-color .15s, box-shadow .15s;
    }
    .home-player-card:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
    .home-player-photo {
      width: 48px; height: 48px; border-radius: 50%;
      object-fit: cover; background: var(--surface3);
    }
    .home-player-name {
      font-size: .83rem; font-weight: 600; color: var(--text); line-height: 1.2;
    }
    .home-player-meta { font-size: .72rem; color: var(--text-muted); }
    .home-player-rating {
      font-size: .78rem; font-weight: 600; color: var(--accent);
    }
    .home-player-stats { font-size: .72rem; color: var(--text-dim); }
    .home-player-btn {
      margin-top: 4px; font-size: .7rem; padding: 4px 8px;
      background: var(--accent-dim); color: var(--accent);
      border: 1px solid rgba(37,99,235,.2); border-radius: 5px;
      cursor: pointer; transition: background .15s; font-family: var(--font);
      white-space: nowrap;
    }
    .home-player-btn:hover { background: var(--accent); color: #fff; }

    /* ── Form alert cards (2×2 grid) ── */
    .form-alerts-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    }
    .form-alert-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 14px;
      display: flex; flex-direction: column; gap: 8px;
      position: relative; overflow: hidden;
    }
    .form-alert-card::before {
      content: ''; position: absolute; top: 0; left: 0;
      width: 3px; height: 100%;
      background: var(--accent);
    }
    .form-alert-header {
      display: flex; align-items: center; gap: 10px;
    }
    .form-alert-photo {
      width: 40px; height: 40px; border-radius: 50%;
      object-fit: cover; background: var(--surface3); flex-shrink: 0;
    }
    .form-alert-name { font-size: .83rem; font-weight: 600; color: var(--text); }
    .form-alert-meta { font-size: .72rem; color: var(--text-muted); }
    .form-alert-fire {
      font-family: var(--font-mono); font-size: .65rem; font-weight: 700; letter-spacing: .06em;
      color: var(--accent); text-transform: uppercase;
    }
    .form-dots { display: flex; gap: 5px; align-items: center; }
    .form-dot {
      width: 9px; height: 9px; border-radius: 50%;
    }
    .form-dot.good { background: var(--accent); }
    .form-dot.poor { background: var(--border); border: 1px solid var(--border2); }
    .form-alert-avg { font-size: .78rem; font-weight: 600; color: var(--text); }
    .form-alert-line { font-size: .72rem; color: var(--text-dim); }
    .form-alert-actions { display: flex; gap: 6px; margin-top: 2px; }
    .form-alert-btn {
      font-size: .68rem; padding: 3px 7px;
      background: var(--accent-dim); color: var(--accent);
      border: 1px solid rgba(37,99,235,.2); border-radius: 4px;
      cursor: pointer; transition: background .15s; font-family: var(--font);
    }
    .form-alert-btn:hover { background: var(--accent); color: #fff; }

    /* ── League leaders table ── */
    .league-leaders-table { width: 100%; border-collapse: collapse; }
    .league-leaders-table th {
      font-family: var(--font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .07em;
      color: var(--text-muted); font-weight: 600;
      padding: 6px 10px; text-align: left;
      border-bottom: 1px solid var(--border);
    }
    .league-leaders-table td {
      padding: 10px; border-bottom: 1px solid var(--border);
      vertical-align: middle;
    }
    .league-leaders-table tr:last-child td { border-bottom: none; }
    .ll-league-cell { display: flex; align-items: center; gap: 8px; }
    .ll-logo { width: 22px; height: 22px; object-fit: contain; }
    .ll-league-name { font-size: .78rem; font-weight: 600; color: var(--text); }
    .ll-player-cell { display: flex; align-items: center; gap: 7px; }
    .ll-player-photo {
      width: 28px; height: 28px; border-radius: 50%;
      object-fit: cover; background: var(--surface3);
    }
    .ll-player-name {
      font-size: .75rem; font-weight: 500; color: var(--text);
      cursor: pointer; transition: color .15s;
    }
    .ll-player-name:hover { color: var(--accent); }
    .ll-player-stat { font-size: .68rem; color: var(--text-muted); }

    /* ── Form tables (collapsible) ── */
    .form-table-league {
      margin-bottom: 10px; border: 1px solid var(--border);
      border-radius: 8px; overflow: hidden;
    }
    .form-table-summary {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 14px; cursor: pointer;
      background: var(--surface);
      font-size: .78rem; font-weight: 600; color: var(--text);
      list-style: none; user-select: none;
      transition: background .12s;
    }
    .form-table-summary:hover { background: var(--surface2); }
    details[open] .form-table-summary { border-bottom: 1px solid var(--border); }
    .form-table-summary::marker, .form-table-summary::-webkit-details-marker { display: none; }
    .form-table-chevron {
      margin-left: auto; font-size: .65rem; color: var(--text-muted);
      transition: transform .2s;
    }
    details[open] .form-table-chevron { transform: rotate(180deg); }
    .form-table-body { background: var(--surface); }
    .form-table-row {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 14px; border-bottom: 1px solid var(--border);
      font-size: .75rem;
    }
    .form-table-row:last-child { border-bottom: none; }
    .form-table-row:nth-child(even) { background: var(--surface2); }
    .ft-pos { width: 22px; text-align: center; color: var(--text-muted); font-size: .68rem; }
    .ft-team { display: flex; align-items: center; gap: 6px; flex: 1; }
    .ft-team-logo { width: 18px; height: 18px; object-fit: contain; }
    .ft-team-name { color: var(--text); font-weight: 500; }
    .ft-form { display: flex; gap: 3px; }
    .pill-W, .pill-D, .pill-L {
      width: 18px; height: 18px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: .6rem; font-weight: 700; color: #fff;
    }
    .pill-W { background: #16a34a; }
    .pill-D { background: #d97706; }
    .pill-L { background: #dc2626; }
    .ft-gd {
      width: 36px; text-align: right; font-size: .72rem;
      font-weight: 600; color: var(--text);
    }
    .ft-gd.positive { color: #16a34a; }
    .ft-gd.negative { color: #dc2626; }

    /* ── Upcoming Fixtures ── */
    .uf-fixture-row {
      display: flex; align-items: center; gap: 8px;
      padding: 7px 14px; border-bottom: 1px solid var(--border);
      font-size: .75rem;
    }
    .uf-fixture-row:last-child { border-bottom: none; }
    .uf-fixture-row:nth-child(even) { background: var(--surface2); }
    .uf-team { display: flex; align-items: center; gap: 5px; flex: 1; }
    .uf-home { justify-content: flex-end; text-align: right; }
    .uf-away { justify-content: flex-start; }
    .uf-home span, .uf-away span { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
    .uf-vs { color: var(--text-muted); font-size: .68rem; font-weight: 600; flex-shrink: 0; padding: 0 4px; }
    .uf-score { color: var(--text); font-size: .8rem; font-weight: 700; flex-shrink: 0; padding: 0 6px; letter-spacing: .5px; }
    .uf-date { color: var(--text-muted); font-size: .68rem; white-space: nowrap; margin-left: auto; flex-shrink: 0; }
    .uf-round-badge {
      margin-left: auto; background: var(--surface2); color: var(--text-muted);
      font-size: .62rem; font-weight: 600; border-radius: 4px;
      padding: 2px 6px; border: 1px solid var(--border);
    }

    /* ── League availability notice (Home banner) ── */
    .leagues-notice {
      position: relative; flex-shrink: 0;
      display: flex; align-items: flex-start; gap: 11px;
      margin: 14px 22px 0; padding: 13px 16px 13px 18px;
      background: var(--accent-dim); border: 1px solid var(--border);
      border-radius: 10px; overflow: hidden;
    }
    .leagues-notice::before {
      content: ''; position: absolute; top: 0; left: 0;
      width: 3px; height: 100%; background: var(--accent);
    }
    .leagues-notice-icon {
      flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px;
      color: var(--accent);
    }
    .leagues-notice-text {
      flex: 1; font-size: .78rem; line-height: 1.5; color: var(--text-dim);
    }
    .leagues-notice-text strong { color: var(--text); font-weight: 700; }
    .leagues-notice-line2 { display: block; margin-top: 6px; }
    .leagues-notice-link {
      color: var(--accent); font-weight: 600; cursor: pointer;
      text-decoration: underline; text-underline-offset: 2px;
    }
    .leagues-notice-link:hover { opacity: .8; }
    .leagues-notice-close {
      flex-shrink: 0; background: none; border: none; cursor: pointer;
      color: var(--text-muted); font-size: 1.15rem; line-height: 1;
      padding: 0 2px; transition: color .15s; font-family: var(--font);
    }
    .leagues-notice-close:hover { color: var(--text); }

    /* ── Workspace / Band 3 ── */
    .workspace-grid {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      gap: 16px; margin-top: 14px;
    }
    .workspace-col {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 16px;
      display: flex; flex-direction: column; gap: 10px;
    }
    .workspace-col-title {
      font-family: var(--font-mono); font-size: .72rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; color: var(--text-muted); margin-bottom: 4px;
    }
    .workspace-shortlist-card {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 0; border-bottom: 1px solid var(--border);
    }
    .workspace-shortlist-card:last-child { border-bottom: none; }
    .ws-player-photo {
      width: 28px; height: 28px; border-radius: 50%;
      object-fit: cover; background: var(--surface3);
    }
    .ws-player-name { font-size: .75rem; font-weight: 500; color: var(--text); flex: 1; }
    .ws-player-meta { font-size: .68rem; color: var(--text-muted); }
    .ws-empty {
      text-align: center; padding: 20px 10px;
      font-size: .75rem; color: var(--text-muted); line-height: 1.5;
    }
    .ws-empty-link {
      display: inline-block; margin-top: 8px; font-size: .72rem;
      color: var(--accent); cursor: pointer; text-decoration: underline;
    }
    .recent-search-item {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 0; border-bottom: 1px solid var(--border);
      cursor: pointer; transition: color .12s;
    }
    .recent-search-item:last-child { border-bottom: none; }
    .recent-search-item:hover .recent-search-text { color: var(--accent); }
    .recent-search-icon { font-size: .85rem; flex-shrink: 0; }
    .recent-search-text {
      font-size: .73rem; color: var(--text); flex: 1;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      transition: color .12s;
    }
    .recent-search-arrow { font-size: .65rem; color: var(--text-muted); }
    .quick-action-card {
      display: flex; flex-direction: column; gap: 5px;
      padding: 10px; border: 1px solid var(--border);
      border-radius: 8px; cursor: pointer; background: var(--surface2);
      transition: border-color .15s, background .15s;
    }
    .quick-action-card:hover {
      border-color: var(--accent); background: var(--accent-dim);
    }
    .qa-icon { font-size: 1.1rem; }
    .qa-name { font-size: .75rem; font-weight: 600; color: var(--text); }
    .qa-desc { font-size: .68rem; color: var(--text-muted); line-height: 1.4; }
    .qa-open {
      align-self: flex-start; font-size: .67rem;
      color: var(--accent); margin-top: 2px;
    }

    /* ── Top Rated card extras ── */
    .tr-card-top {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 6px; min-height: 20px;
    }
    .tr-league-logo {
      width: 18px; height: 18px; object-fit: contain; flex-shrink: 0;
    }
    .tr-gw-badge {
      font-family: var(--font-mono); font-size: .58rem; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; color: var(--text-muted);
      background: var(--surface3); border-radius: 3px; padding: 1px 5px;
    }
    .tr-rating { font-size: .9rem; font-weight: 700; margin-top: 2px; }
    .rating-gold   { color: #f59e0b; }
    .rating-silver { color: var(--text); }
    .rating-std    { color: var(--text-muted); }
    .tr-fixture {
      font-size: .68rem; color: var(--text-muted); line-height: 1.3;
      margin-top: 2px; overflow: hidden; text-overflow: ellipsis;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    }

    /* ── Skeleton loader ── */
    .skel {
      background: var(--surface3);
      border-radius: 6px; overflow: hidden; position: relative;
    }
    .skel::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
      animation: skel-shimmer 1.4s ease-in-out infinite;
    }
    @keyframes skel-shimmer {
      0%   { transform: translateX(-100%); }
      100% { transform: translateX(100%);  }
    }
    .home-unavailable {
      padding: 20px; text-align: center;
      font-size: .78rem; color: var(--text-muted);
      border: 1px dashed var(--border); border-radius: 8px;
    }

    /* ── Welcome band (home front door) ── */
    .home-welcome {
      padding: 26px 32px 28px;
      background: var(--surface2);
      border-bottom: 1px solid var(--border);
    }
    .hw-greeting {
      font-family: var(--font-mono); font-size: .68rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .1em;
      color: var(--accent); margin-bottom: 8px;
    }
    .hw-headline {
      font-family: var(--font-display); font-weight: 800;
      font-size: 1.5rem; line-height: 1.25; color: var(--text);
      margin-bottom: 8px; letter-spacing: -.01em;
    }
    .hw-headline em { color: var(--accent); font-style: normal; }
    .hw-sub {
      font-size: .85rem; line-height: 1.55; color: var(--text-dim);
      max-width: 620px;
    }
    .hw-ask {
      display: flex; align-items: center; gap: 10px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 11px 14px; margin-top: 18px;
      max-width: 720px; cursor: text; transition: border-color .15s, box-shadow .15s;
    }
    .hw-ask:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
    .hw-ask-icon { color: var(--accent); flex-shrink: 0; display: flex; }
    .hw-ask input {
      flex: 1; background: none; border: none; outline: none;
      font-family: var(--font); font-size: .85rem; color: var(--text);
    }
    .hw-ask input::placeholder { color: var(--text-muted); }
    .hw-ask-hint {
      flex-shrink: 0; font-family: var(--font-mono); font-size: .62rem;
      color: var(--text-muted); border: 1px solid var(--border);
      border-radius: 5px; padding: 3px 7px;
    }
    .hw-actions {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 10px; margin-top: 16px; max-width: 920px;
    }
    .hw-action-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 13px 14px; cursor: pointer;
      display: flex; flex-direction: column; gap: 5px;
      transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .hw-action-card:hover {
      border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim);
      transform: translateY(-1px);
    }
    .hw-ac-icon { color: var(--accent); display: flex; margin-bottom: 2px; }
    .hw-ac-label { font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--text); }
    .hw-ac-desc { font-size: .7rem; line-height: 1.35; color: var(--text-muted); }

    /* ── World Cup home bands ── */
    .wc-section-head {
      display: flex; align-items: flex-end; justify-content: space-between;
      gap: 12px; margin-bottom: 14px;
    }
    .wc-section-head .section-title { margin-bottom: 3px; }
    .wc-section-head .section-subtitle { margin-bottom: 0; }
    .wc-toggle {
      display: inline-flex; gap: 2px; flex-shrink: 0;
      background: var(--surface3); border: 1px solid var(--border);
      border-radius: 8px; padding: 2px;
    }
    .wc-toggle button {
      font-family: var(--font); font-size: .72rem; font-weight: 600;
      color: var(--text-dim); background: none; border: none; cursor: pointer;
      padding: 5px 12px; border-radius: 6px; transition: background .15s, color .15s;
    }
    .wc-toggle button.active { background: var(--accent); color: #fff; }
    .wc-perf-card {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; padding: 14px; min-width: 168px; max-width: 188px;
      flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
      transition: border-color .15s, box-shadow .15s;
    }
    .wc-perf-card:hover { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
    .wc-perf-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .wc-perf-flag-lg {
      width: 34px; height: 23px; border-radius: 4px; object-fit: cover;
      background: var(--surface3); border: 1px solid var(--border); flex-shrink: 0;
    }
    .wc-perf-badge {
      font-family: var(--font-mono); font-size: .66rem; font-weight: 700;
      padding: 3px 8px; border-radius: 999px;
      background: var(--accent-dim); color: var(--accent);
    }
    .wc-perf-name { font-family: var(--font-display); font-weight: 700; font-size: .84rem; color: var(--text); line-height: 1.2; }
    .wc-perf-meta { font-size: .68rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
    .wc-perf-flag { width: 16px; height: 11px; object-fit: cover; border-radius: 2px; }
    .wc-perf-stats {
      display: flex; gap: 14px; padding-top: 8px;
      border-top: 1px solid var(--border);
    }
    .wc-perf-stat { display: flex; flex-direction: column; gap: 1px; }
    .wc-perf-val { font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--text); }
    .wc-perf-lbl { font-size: .62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

    /* WC fixtures */
    .wc-fix-row {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .8rem;
    }
    .wc-fix-sub-label + .wc-fix-row:last-child,
    .wc-fix-row:last-child { border-bottom: none; }
    .wc-fix-group { font-family: var(--font-mono); font-size: .62rem; color: var(--text-muted); min-width: 58px; }
    .wc-fix-teams { flex: 1; color: var(--text); display: flex; align-items: center; gap: 6px; }
    .wc-fix-team { display: flex; align-items: center; gap: 6px; }
    .wc-fix-logo { width: 18px; height: 18px; object-fit: contain; }
    .wc-fix-vs { color: var(--text-muted); font-size: .72rem; }
    .wc-fix-score { font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--accent); min-width: 42px; text-align: center; }
    .wc-fix-status {
      flex-shrink: 0; font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .04em;
      padding: 3px 8px; border-radius: 999px;
      background: var(--surface3); color: var(--text-dim);
    }
    .wc-fix-status.live { background: rgba(220,38,38,.12); color: #dc2626; }
    .wc-fix-sub-label { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted); padding: 10px 0 4px; }
    .wc-fix-sub-label:first-child { padding-top: 2px; }
    .wc-fix-sub-label.live-lbl { color: #dc2626; }

    /* WC power rankings */
    .wc-rank-row {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .8rem;
    }
    .wc-rank-row:last-child { border-bottom: none; }
    .wc-rank-num { width: 20px; font-family: var(--font-mono); font-size: .72rem; font-weight: 700; color: var(--text-muted); flex-shrink: 0; }
    .wc-rank-team { font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--text); min-width: 90px; flex-shrink: 0; }
    .wc-rank-note { font-size: .72rem; color: var(--text-muted); flex: 1; line-height: 1.3; }

    /* ── Nav pulse dot ── */
    .nav-pulse {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--accent); margin-left: auto; flex-shrink: 0;
      animation: pulse-dot 2s ease-in-out infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; }
      50%       { opacity: .3; }
    }

    /* ── Home responsive ── */
    @media (max-width: 900px) {
      .home-band { padding: 20px; }
      .workspace-grid { grid-template-columns: 1fr; }
      .home-welcome { padding: 22px 20px 24px; }
      .hw-headline { font-size: 1.3rem; }
      .hw-actions { grid-template-columns: 1fr 1fr; }
      .wc-section-head { flex-wrap: wrap; }
    }
    @media (max-width: 600px) {
      .form-alerts-grid { grid-template-columns: 1fr; }
      .league-leaders-table th:nth-child(3),
      .league-leaders-table td:nth-child(3) { display: none; }
      .hw-headline { font-size: 1.18rem; }
      .hw-ask-hint { display: none; }
      .wc-rank-note { display: none; }
      .wc-fix-group { min-width: 46px; }
    }

    /* ── Custom Builder (pcb-*) ───────────────────────────────────────────── */
    .pcb-pos-row { margin-bottom: 18px; }
    .pcb-pos-label { font-size: .72rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 8px; }
    .pcb-pos-chips { display: flex; flex-wrap: wrap; gap: 7px; }
    .pcb-pos-chip { padding: 5px 13px; font-size: .78rem; font-weight: 600; border-radius: 20px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-muted); cursor: pointer; transition: all .15s; }
    .pcb-pos-chip:hover { border-color: var(--accent); color: var(--accent); }
    .pcb-pos-chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; }

    .pcb-body { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
    @media (max-width: 700px) { .pcb-body { grid-template-columns: 1fr; } }

    .pcb-left { background: var(--surface2); border: 1px solid var(--border2); border-radius: 12px; padding: 14px; max-height: 380px; overflow-y: auto; }
    .pcb-left-title { font-size: .72rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 10px; }
    .pcb-cat-label { font-size: .7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 5px; }
    .pcb-cat-label:first-child { margin-top: 0; }
    .pcb-stat-chips { display: flex; flex-wrap: wrap; gap: 5px; }
    .pcb-stat-chip { padding: 4px 10px; font-size: .73rem; border-radius: 14px; border: 1px solid var(--border2); background: var(--surface); color: var(--text); cursor: pointer; transition: all .12s; }
    .pcb-stat-chip:hover:not(.selected) { border-color: var(--accent); color: var(--accent); }
    .pcb-stat-chip.selected { background: var(--accent); border-color: var(--accent); color: #fff; opacity: .6; cursor: default; }

    .pcb-right { background: var(--surface2); border: 1px solid var(--border2); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
    .pcb-right-title { font-size: .72rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
    .pcb-count { font-size: .68rem; font-weight: 700; background: var(--surface); border: 1px solid var(--border2); border-radius: 10px; padding: 1px 7px; margin-left: 5px; color: var(--text-muted); }
    .pcb-empty-hint { font-size: .78rem; color: var(--text-muted); padding: 18px 0; text-align: center; }
    .pcb-weight-note { font-size: .68rem; color: var(--text-muted); font-family: var(--mono); text-align: right; }

    .pcb-sel-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border2); }
    .pcb-sel-row:last-child { border-bottom: none; }
    .pcb-sel-name { flex: 0 0 110px; font-size: .78rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .pcb-sel-slider { flex: 1; min-width: 0; accent-color: var(--accent); cursor: pointer; }
    .pcb-sel-pct { flex: 0 0 32px; font-size: .72rem; font-family: var(--mono); color: var(--accent); text-align: right; }
    .pcb-sel-remove { flex: 0 0 16px; font-size: .75rem; color: var(--text-muted); cursor: pointer; background: none; border: none; padding: 0; line-height: 1; }
    .pcb-sel-remove:hover { color: #ef4444; }

    .pcb-hard-filters { border-top: 1px solid var(--border2); padding-top: 10px; margin-top: 4px; }
    .pcb-hf-title { display: flex; justify-content: space-between; align-items: center; font-size: .74rem; font-weight: 600; color: var(--text-muted); cursor: pointer; user-select: none; }
    .pcb-hf-title:hover { color: var(--text); }
    .pcb-hf-hint { font-size: .71rem; color: var(--text-muted); margin: 7px 0 5px; }
    .pcb-hf-row { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; flex-wrap: wrap; }
    .pcb-hf-select { font-size: .74rem; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border2); background: var(--surface); color: var(--text); }
    .pcb-hf-input { width: 60px; font-size: .74rem; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--border2); background: var(--surface); color: var(--text); }
    .pcb-hf-remove { font-size: .7rem; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0 2px; }
    .pcb-hf-remove:hover { color: #ef4444; }
    .pcb-hf-add-btn { font-size: .72rem; padding: 4px 10px; border-radius: 8px; border: 1px dashed var(--border2); background: none; color: var(--text-muted); cursor: pointer; margin-top: 4px; }
    .pcb-hf-add-btn:hover { border-color: var(--accent); color: var(--accent); }

    /* ── Report Builder (rb-*) ───────────────────────────────────────────── */
    #rb-panel { background: var(--bg); }
    .rb-topbar { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--border2); flex-wrap: wrap; position: sticky; top: 0; z-index: 10; }
    .rb-back-btn { font-size: .78rem; padding: 6px 13px; border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
    .rb-back-btn:hover { color: var(--text); border-color: var(--accent); }
    .rb-scout-info { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
    .rb-input { font-size: .78rem; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text); width: 140px; outline: none; }
    .rb-input:focus { border-color: var(--accent); }
    .rb-date { font-size: .72rem; color: var(--text-muted); font-family: var(--mono); white-space: nowrap; }
    .rb-export-btn { padding: 7px 16px; font-size: .78rem; font-weight: 700; background: var(--accent); color: #fff; border: none; border-radius: 8px; cursor: pointer; white-space: nowrap; }
    .rb-export-btn:hover { opacity: .88; }

    #rb-panel .rb-body { display: grid; grid-template-columns: 180px 1fr; gap: 0; flex: 1; min-height: 0; }
    @media (max-width: 700px) { #rb-panel .rb-body { grid-template-columns: 1fr; } }

    .rb-controls { padding: 20px 14px; border-right: 1px solid var(--border2); background: var(--surface); position: sticky; top: 57px; max-height: calc(100vh - 57px); overflow-y: auto; }
    .rb-controls-title { font-size: .68rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 12px; }
    .rb-toggle-row { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; cursor: pointer; }
    .rb-toggle-row input[type=checkbox] { accent-color: var(--accent); cursor: pointer; }
    .rb-toggle-label { font-size: .78rem; color: var(--text); cursor: pointer; }

    .rb-canvas { padding: 28px 24px; overflow-y: auto; background: var(--bg); }

    /* Editable fields inside the canvas */
    [contenteditable] { outline: none; }
    [contenteditable]:empty::before { content: attr(data-placeholder); color: var(--text-muted); font-style: italic; pointer-events: none; }
    [contenteditable]:focus { background: rgba(255,255,255,.03); border-radius: 4px; }

    .rb-obs-area { margin-top: 8px; }
    .rb-obs-field { font-size: .78rem; color: var(--text); line-height: 1.55; padding: 7px 10px; border-radius: 8px; border: 1px dashed transparent; min-height: 32px; transition: border-color .15s; }
    .rb-obs-field:hover { border-color: var(--border2); }
    .rb-obs-field:focus { border-color: var(--accent); border-style: solid; }
    .rb-obs-label { font-size: .62rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 3px; }

    .rb-meta-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 10px 12px; background: var(--surface2); border-radius: 10px; flex-wrap: wrap; }
    .rb-meta-field-wrap { display: flex; flex-direction: column; gap: 2px; }
    .rb-meta-label { font-size: .62rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
    .rb-rating-input { width: 52px; font-size: 1.4rem; font-weight: 700; color: var(--accent); background: none; border: none; border-bottom: 1px solid var(--border2); outline: none; padding: 2px 0; font-family: var(--display); text-align: center; }
    .rb-rating-input:focus { border-color: var(--accent); }
    .rb-rec-field { flex: 1; min-width: 120px; font-size: .82rem; color: var(--text); padding: 4px 6px; border-radius: 6px; border: 1px dashed transparent; }
    .rb-rec-field:hover { border-color: var(--border2); }
    .rb-rec-field:focus { border-color: var(--accent); border-style: solid; }

    .rb-custom-score-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 20px; padding: 3px 12px; font-size: .8rem; margin-top: 6px; }
    .rb-custom-score-val { color: var(--accent); font-weight: 700; font-family: var(--mono); }

  /* ═══ Players Hub ═══════════════════════════════════════════════════════ */
  .ph-subnav {
    display: flex;
    gap: 4px;
    padding: 10px 20px 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    flex-shrink: 0;
  }
  .ph-tab {
    padding: 8px 18px;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: 4px 4px 0 0;
    transition: color .15s, border-color .15s;
  }
  .ph-tab:hover  { color: var(--text); }
  .ph-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

  /* ═══ The Pulse ═════════════════════════════════════════════════════════ */

  /* ── League / Team hub toggle ── */
  .pulse-view-toggle {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 6px;
    padding: 14px 20px 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .pvt-btn {
    flex: 0 0 auto;
    padding: 7px 16px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: none;
    color: var(--text-muted);
    font-family: var(--font);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: color .12s, background .12s, border-color .12s;
  }
  .pvt-btn:hover  { color: var(--text); }
  .pvt-btn.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
  }
  @media (max-width: 600px) {
    .pulse-view-toggle { padding: 10px 14px 8px; }
    .pvt-btn { flex: 1; text-align: center; }
  }

  /* ── Active-league header + change-league control ── */
  .pulse-content-hdr {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px 0;
    flex-shrink: 0;
  }
  .pulse-change-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px 6px 9px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text-dim);
    cursor: pointer;
    font-family: var(--font);
    font-size: .8rem;
    font-weight: 500;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
    flex-shrink: 0;
  }
  .pulse-change-btn:hover { border-color: var(--accent); color: var(--accent); }
  .pulse-change-btn:hover svg { transform: translateX(-2px); }
  .pulse-change-btn svg { transition: transform .15s; }
  .pulse-active-league {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -.01em;
  }

  /* ── Empty state / preload (heartbeat monitor) ── */
  .pulse-empty-state {
    flex: 1;
    min-height: 66vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 20px 56px;
  }
  .pulse-monitor {
    width: 100%; max-width: 440px; height: 134px; margin-bottom: 8px;
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  }
  .pm-svg { width: 100%; height: 100%; overflow: visible; display: block; }
  .pm-base { stroke: var(--border); stroke-width: 1; }
  .pm-line {
    fill: none; stroke: var(--accent); stroke-width: 2.5;
    stroke-linecap: round; stroke-linejoin: round;
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 55%, transparent));
  }
  .pm-echo {
    fill: none; stroke: color-mix(in srgb, var(--accent) 28%, transparent);
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  }
  .pm-grp { will-change: transform; }
  .pm-grp-line { animation: pm-scroll 5s linear infinite; }
  .pm-grp-echo { animation: pm-scroll 9s linear infinite; }
  @keyframes pm-scroll { from { transform: translateX(0); } to { transform: translateX(-240px); } }

  .empty-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; white-space: nowrap;
  }
  .pulse-dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
    animation: pulse-ping 1.8s ease-out infinite;
  }
  @keyframes pulse-ping {
    0%        { box-shadow: 0 0 0 0   color-mix(in srgb, var(--accent) 55%, transparent); }
    70%, 100% { box-shadow: 0 0 0 8px transparent; }
  }
  .empty-title {
    font-size: 27px; font-weight: 800; color: var(--text);
    letter-spacing: -.025em; max-width: 460px; text-wrap: balance; margin: 0;
  }
  .empty-sub {
    font-size: 15px; color: var(--text-muted); max-width: 430px;
    line-height: 1.55; text-wrap: pretty; margin: 9px 0 0;
  }
  .pulse-leagues {
    margin-top: 30px; width: 100%; max-width: 680px;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  }
  @media (min-width: 760px) { .pulse-leagues { grid-template-columns: repeat(3, 1fr); } }
  /* On a phone the 2-col grid can't shrink below the card's min-content width,
     clipping the right column off-screen — stack to one column. Placed after the
     base rule so it wins on source order at ≤600px. */
  @media (max-width: 600px) { .pulse-leagues { grid-template-columns: 1fr; } }
  .pl-card {
    display: flex; align-items: center; gap: 12px; text-align: left;
    padding: 13px 14px; border-radius: 12px;
    border: 1px solid var(--border); background: var(--surface);
    cursor: pointer; box-shadow: var(--shadow-card);
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    animation: pl-in .45s ease both; font-family: var(--font);
  }
  @keyframes pl-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .pl-card:hover {
    border-color: var(--accent); transform: translateY(-3px);
    box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 6px 18px -10px rgba(0,0,0,.18);
  }
  .pl-mono {
    width: 38px; height: 38px; border-radius: 9px;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; letter-spacing: -.02em; flex-shrink: 0;
  }
  .pl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .pl-name { font-size: 14.5px; font-weight: 600; color: var(--text); letter-spacing: -.01em; }
  .pl-meta { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pl-go { color: var(--muted-3); display: flex; transition: color .16s ease, transform .16s ease; }
  .pl-card:hover .pl-go { color: var(--accent); transform: translateX(3px); }
  @media (prefers-reduced-motion: reduce) {
    .pm-grp-line, .pm-grp-echo, .pulse-dot { animation: none; }
  }

  .pulse-skel-row {
    display: flex;
    gap: 16px;
    padding: 20px;
  }

  /* ── League Pulse structured loading skeleton ── */
  .pulse-skel { display: flex; flex-direction: column; flex: 1; }
  .pulse-skel-hdr {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 20px 0;
  }
  .pulse-skel-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
  }
  .pulse-skel-col {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; padding: 16px; min-width: 0;
  }
  /* shimmering placeholder block */
  .sk {
    position: relative; overflow: hidden; border-radius: 8px;
    background: var(--surface2);
  }
  .sk::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent,
      color-mix(in srgb, var(--text) 9%, transparent), transparent);
    transform: translateX(-100%);
    animation: sk-shimmer 1.5s ease-in-out infinite;
  }
  @keyframes sk-shimmer { 100% { transform: translateX(100%); } }
  .sk-line { height: 11px; }
  .sk-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--border);
  }
  .sk-row:last-child { border-bottom: none; }
  .sk-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; }
  @media (prefers-reduced-motion: reduce) {
    .sk::after { animation: none; }
    .sk { animation: li-pulse 1.4s ease-in-out infinite; }
  }

  .pulse-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    padding: 20px;
    flex-shrink: 0;
  }
  @media (max-width: 960px) { .pulse-grid { grid-template-columns: 1fr; } }

  /* Upcoming fixtures col */
  .pulse-upcoming-badge {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-dim);
    padding: 2px 7px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
  }
  .pulse-upcoming-time {
    font-size: .7rem;
    color: var(--text-muted);
    min-width: 48px;
    text-align: center;
    flex-shrink: 0;
  }

  .pulse-col {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    min-width: 0;
  }
  .pulse-col-title {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
  }
  .pulse-fixture {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    gap: 6px;
  }
  .pulse-fixture:last-child { border-bottom: none; }
  .pulse-team { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
  .pulse-team-home { justify-content: flex-start; }
  .pulse-team-away { justify-content: flex-end; }
  .pulse-team-name { font-size: .8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
  .pulse-team-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
  .pulse-score {
    font-size: 1rem;
    font-weight: 700;
    min-width: 40px;
    text-align: center;
    flex-shrink: 0;
  }
  .pulse-score-sep { color: var(--text-muted); font-weight: 400; }
  .pulse-no-data { font-size: .82rem; color: var(--text-muted); padding: 12px 0; text-align: center; }

  .pulse-nextup-note {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 36px 18px;
    color: var(--text-muted);
  }
  .pulse-nextup-note svg { opacity: .4; }
  .pulse-nextup-note-title {
    font-family: var(--font-display);
    font-size: .92rem;
    font-weight: 700;
    color: var(--text-dim);
  }
  .pulse-nextup-note p { font-size: .8rem; line-height: 1.5; max-width: 220px; margin: 0; }

  .pulse-perf-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .1s;
    border-radius: 4px;
  }
  .pulse-perf-chip:last-child { border-bottom: none; }
  .pulse-perf-chip:hover { background: var(--accent-dim); }
  .pulse-perf-img {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--border);
  }
  .pulse-perf-placeholder { background: var(--surface3); }
  .pulse-perf-info { flex: 1; min-width: 0; }
  .pulse-perf-name { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pulse-perf-meta { font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pulse-perf-stat { margin-left: 4px; }
  .pulse-rating {
    font-weight: 700;
    font-size: .8rem;
    padding: 3px 8px;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .pulse-rating-green   { background: rgba(34,197,94,.15); color: #16a34a; }
  .pulse-rating-amber   { background: rgba(234,179, 8,.15); color: #ca8a04; }
  .pulse-rating-neutral { background: var(--surface3); color: var(--text-muted); }

  .pulse-more-btn {
    display: block;
    margin: 10px auto 0;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: none;
    color: var(--text-muted);
    font-size: .75rem;
    cursor: pointer;
  }
  .pulse-more-btn:hover { border-color: var(--accent); color: var(--accent); }

  .pulse-standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .78rem;
    margin-top: 8px;
  }
  .pulse-standings-table th {
    font-size: .7rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 4px 4px;
    text-align: center;
    border-bottom: 1px solid var(--border);
  }
  .pulse-standings-table td {
    padding: 5px 4px;
    text-align: center;
    border-bottom: 1px solid var(--border2);
  }
  .pulse-std-team { text-align: left !important; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pulse-pos-gd { color: #16a34a; font-weight: 600; }
  .pulse-neg-gd { color: #ef4444; font-weight: 600; }

  .pulse-section {
    margin: 0 20px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }
  .pulse-section-hdr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
    gap: 10px;
  }
  .pulse-section-title {
    font-size: .92rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .pulse-ts-logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
  .pulse-section-sub   { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
  .pulse-chevron { opacity: .6; flex-shrink: 0; }
  .pulse-accordion-hdr:hover { background: var(--surface2); }

  .pulse-refresh-icon-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: border-color .15s, color .15s;
  }
  .pulse-refresh-icon-btn:hover { border-color: var(--accent); color: var(--accent); }

  /* Form dots in standings */
  .pulse-form-strip { display: flex; gap: 2px; align-items: center; justify-content: center; }
  .pulse-form-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  }
  .pulse-form-w { background: #16a34a; }
  .pulse-form-d { background: #ca8a04; }
  .pulse-form-l { background: #ef4444; }

  /* Injury & Transfer sections */
  .pulse-absence-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 20px; border-bottom: 1px solid var(--border2);
  }
  .pulse-absence-chip:last-child { border-bottom: none; }
  .pulse-absence-photo {
    width: 32px; height: 32px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0; border: 1px solid var(--border);
    background: var(--surface3);
  }
  .pulse-absence-info { flex: 1; min-width: 0; }
  .pulse-absence-name { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pulse-absence-meta { font-size: .72rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
  .pulse-absence-team-logo { width: 14px; height: 14px; object-fit: contain; }
  .pulse-injury-badge {
    font-size: .68rem; font-weight: 600; padding: 2px 8px;
    border-radius: 20px; flex-shrink: 0; white-space: nowrap;
    background: rgba(239,68,68,.12); color: #dc2626;
  }
  .pulse-transfer-card {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 20px; border-bottom: 1px solid var(--border2);
  }
  .pulse-transfer-card:last-child { border-bottom: none; }
  .pulse-transfer-player { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border); background: var(--surface3); }
  .pulse-transfer-info { flex: 1; min-width: 0; }
  .pulse-transfer-name { font-size: .82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pulse-transfer-clubs { font-size: .72rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pulse-transfer-club-logo { width: 13px; height: 13px; object-fit: contain; }
  .pulse-transfer-arrow { opacity: .5; font-size: .8rem; }
  .pulse-transfer-badge {
    font-size: .67rem; font-weight: 600; padding: 2px 7px;
    border-radius: 20px; flex-shrink: 0; white-space: nowrap;
  }
  .pulse-tb-fee   { background: rgba(37,99,235,.12); color: #2563eb; }
  .pulse-tb-loan  { background: rgba(124,58,237,.12); color: #7c3aed; }
  .pulse-tb-free  { background: rgba(22,163,74,.12);  color: #16a34a; }
  .pulse-tb-other { background: var(--surface3); color: var(--text-muted); }
  .pulse-lazy-section { padding: 16px 20px; }
  .pulse-lazy-note { font-size: .8rem; color: var(--text-muted); margin-bottom: 12px; line-height: 1.5; }
  .pulse-load-btn {
    padding: 7px 18px; border-radius: 8px;
    border: 1px solid var(--border); background: var(--surface2);
    color: var(--text-dim); font-size: .8rem; cursor: pointer;
    transition: border-color .15s, color .15s;
  }
  .pulse-load-btn:hover { border-color: var(--accent); color: var(--accent); }
  .pulse-load-btn:disabled { opacity: .5; cursor: default; }
  .pulse-section-empty { font-size: .82rem; color: var(--text-muted); padding: 16px 20px; text-align: center; }

  /* DNA form inside pulse section */
  #pulse-panel #dna-form-wrap { padding: 18px 20px 0; }
  #pulse-panel #dna-results   { padding: 12px 20px 20px; }

  /* LI content inside pulse section */
  #pulse-li-body .li-section  { margin: 0; border: none; border-bottom: 1px solid var(--border); border-radius: 0; }
  #pulse-li-body .li-section:last-child { border-bottom: none; }

  /* ═══════════════ World Cup 2026 ═══════════════ */
  .wc-subnav {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; gap: 6px;
    padding: 12px 22px; background: var(--bg);
    border-bottom: 1px solid var(--border);
  }
  .wc-tab {
    font-family: var(--font-display); font-size: .82rem; font-weight: 700;
    color: var(--text-muted); background: transparent; border: none;
    padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: all .12s;
  }
  .wc-tab:hover { background: var(--surface); color: var(--text); }
  .wc-tab.active { background: var(--accent); color: #fff; }
  .wc-refresh-note { margin-left: auto; font-size: .68rem; color: var(--text-muted); }
  .wc-content { padding: 18px 22px 32px; }

  .wc-group-label {
    font-family: var(--font-display); font-size: .74rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
    margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
  }
  .wc-group-label:first-child { margin-top: 0; }

  /* Match card */
  .wc-match-card {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    gap: 10px; padding: 16px 18px; margin-bottom: 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    cursor: pointer; transition: border-color .12s, transform .08s;
  }
  .wc-match-card:hover { border-color: var(--accent); transform: translateY(-1px); }
  .wc-match-card.live { border-color: color-mix(in srgb, #e5392f 55%, var(--border)); }
  .wc-mc-team { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .wc-mc-team.away { flex-direction: row-reverse; text-align: right; }
  .wc-mc-flag { width: 30px; height: 22px; object-fit: cover; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--border); }
  .wc-mc-name { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wc-mc-name.dim { color: var(--text-muted); font-weight: 600; }
  .wc-mc-center { text-align: center; min-width: 76px; }
  .wc-mc-score { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--text); letter-spacing: .02em; }
  .wc-mc-vs { font-size: .8rem; color: var(--text-muted); font-weight: 600; }
  .wc-mc-status { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; color: var(--text-muted); }
  .wc-mc-status.live { color: #e5392f; display: inline-flex; align-items: center; gap: 4px; }
  .wc-mc-kick { font-size: .72rem; color: var(--text-muted); font-weight: 600; }
  .wc-mc-meta { font-size: .64rem; color: var(--text-muted); margin-top: 2px; }
  .wc-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #e5392f; display: inline-block; animation: wc-pulse 1.3s ease-in-out infinite; }
  @keyframes wc-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
  .wc-day-label { font-family: var(--font-display); font-weight: 800; font-size: .8rem; color: var(--text); margin: 20px 0 10px; }
  .wc-day-label:first-child { margin-top: 0; }
  .wc-empty { padding: 40px 0; text-align: center; color: var(--text-muted); font-size: .86rem; }

  /* ── Knockout bracket ── */
  .wc-bracket-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
  .wc-bracket-hint { font-size: .72rem; color: var(--text-muted); }
  .wc-bracket-zoom { display: flex; gap: 6px; flex-shrink: 0; }
  .wc-zoom-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
  .wc-zoom-btn:hover { border-color: var(--accent); color: var(--accent); }
  .wc-bracket-viewport { overflow: auto; border: 1px solid var(--border); border-radius: 12px; background:
      linear-gradient(var(--surface-2, rgba(127,127,127,.03)) 1px, transparent 1px) 0 0 / 100% 22px,
      var(--bg); max-height: calc(100vh - 190px); position: relative; }
  .wc-bracket-canvas { position: relative; }
  .wc-br-inner { position: relative; transform-origin: top left; }
  .wc-br-svg { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
  .wc-br-line { fill: none; stroke: var(--border); stroke-width: 1.5; }
  .wc-br-col-label { position: absolute; top: 0; font-family: var(--font-display); font-weight: 800; font-size: .68rem;
      text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
  .wc-br-col-label.small { font-size: .6rem; }
  .wc-br-card { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
      overflow: hidden; cursor: pointer; transition: border-color .12s, box-shadow .12s, transform .12s; z-index: 1; }
  .wc-br-card:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(0,0,0,.18); transform: translateY(-1px); z-index: 2; }
  .wc-br-card.live { border-color: #e5392f; box-shadow: 0 0 0 1px rgba(229,57,47,.35); }
  .wc-br-card.pre { opacity: .96; }
  .wc-br-row { display: flex; align-items: center; gap: 7px; height: 27px; padding: 0 9px; }
  .wc-br-team { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; }
  .wc-br-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; flex-shrink: 0; }
  .wc-br-team-name { font-size: .78rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wc-br-team-name.ph { color: var(--text-muted); font-weight: 500; font-family: var(--font-mono); font-size: .68rem; }
  .wc-br-row.win .wc-br-team-name { font-weight: 800; color: var(--accent); }
  .wc-br-row.lose { opacity: .5; }
  .wc-br-score { font-family: var(--font-display); font-weight: 800; font-size: .82rem; color: var(--text); min-width: 14px; text-align: right; }
  .wc-br-pens { font-size: .64rem; font-weight: 700; color: var(--text-muted); }
  .wc-br-divider { height: 1px; background: var(--border); margin: 0 9px; }
  .wc-br-foot { padding: 3px 9px; border-top: 1px solid var(--border); display: flex; justify-content: center; background: var(--bg); }
  .wc-br-status { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; }
  .wc-br-status.live { color: #e5392f; }

  /* Group standings tables */
  .wc-groups-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
  @media (max-width: 720px) { .wc-groups-grid { grid-template-columns: 1fr; } }
  .wc-standings-table { width: 100%; border-collapse: collapse; }
  .wc-standings-table th { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); text-align: center; padding: 4px 5px; border-bottom: 1px solid var(--border); }
  .wc-standings-table th.tn { text-align: left; }
  .wc-standings-table td { font-size: .8rem; color: var(--text); text-align: center; padding: 7px 5px; border-bottom: 1px solid var(--border); }
  .wc-standings-table tr:last-child td { border-bottom: none; }
  .wc-standings-table td.tn { text-align: left; display: flex; align-items: center; gap: 8px; font-weight: 600; }
  .wc-standings-table td.pts { font-weight: 800; }
  .wc-st-flag { width: 20px; height: 15px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); flex-shrink: 0; }
  .wc-st-rank { display: inline-block; width: 16px; color: var(--text-muted); font-size: .72rem; }
  .wc-standings-table tr.qual td.rk { box-shadow: inset 3px 0 0 var(--accent); }

  /* Drill-down modal */
  #wc-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
  .wc-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
  .wc-modal-card { position: relative; width: min(720px, 94vw); max-height: 90vh; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.4); }
  .wc-modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .wc-modal-close:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
  .wc-md-head { padding: 26px 24px 18px; text-align: center; border-bottom: 1px solid var(--border); }
  .wc-md-score-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
  .wc-md-team { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .wc-md-flag { width: 52px; height: 38px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px var(--border); }
  .wc-md-tname { font-family: var(--font-display); font-weight: 800; font-size: .92rem; color: var(--text); }
  .wc-md-score { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; color: var(--text); }
  .wc-md-state { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-top: 4px; }
  .wc-md-section-title { font-family: var(--font-display); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 0; margin: 20px 0 10px; max-width: 520px; margin-left: auto; margin-right: auto; }
  /* ── Match centre timeline (home | minute | away spine) ── */
  .wc-tl-box { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; max-width: 520px; margin: 0 auto; overflow: hidden; }
  .wc-tl-row { display: grid; grid-template-columns: 1fr 52px 1fr; align-items: center; border-bottom: 1px solid var(--border); }
  .wc-tl-row:last-child { border-bottom: none; }
  .wc-tl-home { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 9px 8px 9px 14px; text-align: right; min-width: 0; }
  .wc-tl-cen { display: flex; align-items: center; justify-content: center; padding: 6px 2px; }
  .wc-tl-away { display: flex; align-items: center; gap: 6px; padding: 9px 14px 9px 8px; min-width: 0; }
  .wc-tl-min { font-size: .65rem; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; padding: 2px 7px; white-space: nowrap; flex-shrink: 0; }
  .wc-tl-ico { flex-shrink: 0; display: inline-flex; align-items: center; }
  .wc-tl-name { font-size: .79rem; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wc-tl-name a { color: var(--accent); text-decoration: none; font-weight: 700; }
  .wc-tl-name a:hover { text-decoration: underline; }
  @media (max-width: 520px) {
    .wc-tl-row { grid-template-columns: 44px 1fr; }
    .wc-tl-cen { grid-column: 1; justify-content: center; }
    .wc-tl-home { grid-column: 2; justify-content: flex-start; padding: 8px 12px; border-left: 2px solid #185FA5; }
    .wc-tl-away { grid-column: 2; padding: 8px 12px; border-left: 2px solid #c0392b; }
    .wc-tl-row.home .wc-tl-away { display: none; }
    .wc-tl-row.away .wc-tl-home { display: none; }
  }
  .wc-md-lineups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 0 24px 24px; }
  @media (max-width: 600px) { .wc-md-lineups { grid-template-columns: 1fr; } }
  .wc-md-formation { font-size: .7rem; color: var(--text-muted); font-weight: 700; margin-bottom: 8px; }
  .wc-md-pl { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .82rem; border-bottom: 1px solid var(--border); }
  .wc-md-pl:last-child { border-bottom: none; }
  .wc-md-pl-num { width: 22px; text-align: center; font-size: .7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
  .wc-md-pl-name { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wc-md-pl-name a { color: var(--text); text-decoration: none; }
  .wc-md-pl-name a:hover { color: var(--accent); text-decoration: underline; }
  .wc-md-pl-stat { font-size: .68rem; color: var(--text-muted); display: inline-flex; gap: 6px; flex-shrink: 0; }
  .wc-md-pl-stat .g { color: var(--accent); font-weight: 700; }
  .wc-md-subs-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; margin: 12px 0 4px; }
  .wc-evt-icon { display: inline-flex; }
  .wc-card-y { width: 9px; height: 12px; border-radius: 2px; background: #f5c518; display: inline-block; }
  .wc-card-r { width: 9px; height: 12px; border-radius: 2px; background: #e5392f; display: inline-block; }

  /* ── Match centre (full-screen, pitch view) ── */
  .wc-matches-hint { font-size: .74rem; color: var(--text-muted); margin-bottom: 12px; }
  #wc-match-centre { position: fixed; inset: 0; z-index: 1000; background: var(--bg); display: flex; flex-direction: column; }
  .wc-mc-bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
  .wc-mc-back { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; color: var(--text-muted); font-family: var(--font-display); font-weight: 700; font-size: .8rem; cursor: pointer; padding: 6px 8px; border-radius: 8px; }
  .wc-mc-back:hover { background: var(--surface); color: var(--text); }
  .wc-mc-x { margin-left: 0; }
  .wc-mc-head { flex: 1; display: flex; align-items: center; justify-content: center; gap: 18px; }
  .wc-mc-h-team { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
  .wc-mc-h-team:first-child { justify-content: flex-end; }
  .wc-mc-h-team:last-child { justify-content: flex-start; }
  .wc-mc-h-flag { width: 30px; height: 22px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--border); flex-shrink: 0; }
  .wc-mc-h-name { font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wc-mc-h-mid { text-align: center; flex-shrink: 0; }
  .wc-mc-h-score { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--text); letter-spacing: .02em; }
  .wc-mc-h-state { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); display: flex; align-items: center; justify-content: center; gap: 4px; }
  .wc-mc-h-state.live { color: #e5392f; }
  .wc-mc-body { flex: 1; display: flex; min-height: 0; }
  .wc-mc-main { flex: 1; overflow-y: auto; padding: 22px 22px 40px; }

  .wc-chips { max-width: 470px; margin: 0 auto 12px; display: flex; align-items: center; gap: 6px; }
  .wc-chips-label { font-size: .72rem; color: var(--text-muted); margin-right: 2px; }
  .wc-chip { font-family: var(--font-display); font-size: .74rem; font-weight: 700; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); padding: 5px 13px; border-radius: 20px; cursor: pointer; transition: all .12s; }
  .wc-chip:hover { color: var(--text); }
  .wc-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

  .wc-pitch-wrap { max-width: 470px; margin: 0 auto; }
  .wc-pitch {
    position: relative; width: 100%; aspect-ratio: 68 / 122;
    background: #2e7d46;
    background-image: repeating-linear-gradient(to bottom, #2e7d46 0, #2e7d46 7.1%, #2b763f 7.1%, #2b763f 14.2%);
    border: 2px solid rgba(255,255,255,.4); border-radius: 8px; overflow: hidden;
  }
  .wc-pitch-mark { position: absolute; pointer-events: none; }
  .wc-line-half { top: 50%; left: 0; right: 0; border-top: 2px solid rgba(255,255,255,.42); }
  .wc-circle { top: 50%; left: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 2px solid rgba(255,255,255,.42); border-radius: 50%; }
  .wc-box { left: 50%; transform: translateX(-50%); width: 58%; height: 13%; border: 2px solid rgba(255,255,255,.42); }
  .wc-box.top { top: 0; border-top: none; }
  .wc-box.bot { bottom: 0; border-bottom: none; }

  .wc-token { position: absolute; transform: translate(-50%,-50%); width: 66px; text-align: center; cursor: pointer; z-index: 2; }
  .wc-token-disc { position: relative; width: 44px; height: 44px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 5px rgba(0,0,0,.4); border: 2px solid rgba(255,255,255,.9); }
  .wc-token.home .wc-token-disc { background: #185FA5; }
  .wc-token.away .wc-token-disc { background: #c0392b; }
  .wc-token.sel .wc-token-disc { box-shadow: 0 0 0 3px #EF9F27; }
  .wc-token-ini { color: #fff; font-family: var(--font-display); font-weight: 800; font-size: .82rem; }
  .wc-token-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
  .wc-token-disc.has-img .wc-token-ini { display: none; }
  .wc-token-name { font-size: .66rem; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); white-space: nowrap; line-height: 1.1; margin-top: 9px; }
  .wc-token-name b { font-weight: 800; opacity: .75; margin-right: 1px; }
  /* corner event icons */
  .wc-tk-ico { position: absolute; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; box-shadow: 0 0 0 1.5px var(--bg); }
  .wc-tk-ico.goal { bottom: -3px; right: -4px; min-width: 15px; height: 15px; padding: 0 2px; border-radius: 8px; background: #16a34a; font-size: .56rem; }
  .wc-tk-ico.goal::before { content: "\26BD"; font-size: .62rem; }
  .wc-tk-ico.goal b { margin-left: 1px; }
  .wc-tk-ico.card { top: -3px; left: -3px; width: 9px; height: 12px; border-radius: 2px; }
  .wc-tk-ico.card.y { background: #f5c518; }
  .wc-tk-ico.card.r { background: #e5392f; }
  .wc-tk-ico.sub { top: -4px; right: -4px; width: 15px; height: 15px; border-radius: 50%; background: #e5392f; font-size: .68rem; line-height: 1; }
  /* value badge (club crest / age / height) */
  .wc-tk-val { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-family: var(--font-display); font-size: .6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
  .wc-tk-val:empty { display: none; }
  .wc-tk-val.crest { background: #fff; border: none; padding: 0; width: 18px; height: 18px; }
  .wc-tk-val.crest img { width: 16px; height: 16px; object-fit: contain; }

  .wc-pitch-fmt { max-width: 470px; margin: 12px auto 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .74rem; color: var(--text-muted); font-weight: 600; }
  .wc-pitch-fmt span { color: var(--text); font-weight: 700; }
  .wc-pitch-fmt .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
  .wc-pitch-fmt .dot.home { background: #185FA5; }
  .wc-pitch-fmt .dot.away { background: #c0392b; }

  /* substitutions (toggled per team) */
  .wc-subs { max-width: 470px; margin: 8px auto 0; }
  .wc-subt { display: flex; gap: 6px; background: var(--surface); border-radius: 11px; padding: 4px; margin-bottom: 8px; }
  .wc-subt-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px; border-radius: 8px; border: none; background: transparent; color: var(--text-muted); font-family: var(--font-display); font-weight: 700; font-size: .82rem; cursor: pointer; }
  .wc-subt-btn.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
  .wc-subt-flag { width: 22px; height: 16px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px var(--border); flex-shrink: 0; }
  .wc-sub-row { display: flex; align-items: center; gap: 11px; padding: 9px 6px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 8px; }
  .wc-sub-row:hover { background: var(--surface); }
  .wc-sub-head { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--surface); flex-shrink: 0; box-shadow: 0 0 0 1px var(--border); }
  .wc-sub-head.ini { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; color: var(--text-muted); font-size: .74rem; }
  .wc-sub-main { min-width: 0; flex: 1; }
  .wc-sub-name { font-family: var(--font-display); font-size: .86rem; font-weight: 700; color: var(--text); }
  .wc-sub-name b { opacity: .5; font-weight: 800; margin-right: 4px; }
  .wc-sub-meta { font-size: .72rem; color: var(--text-muted); margin-top: 1px; }
  .wc-sub-in { color: #16a34a; font-weight: 700; }
  .wc-subs-sub { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; margin: 14px 0 4px; }

  .wc-side { width: 322px; flex-shrink: 0; border-left: 1px solid var(--border); overflow-y: auto; padding: 18px; position: relative; }
  .wc-side-empty { color: var(--text-muted); font-size: .82rem; line-height: 1.5; padding: 30px 6px; text-align: center; }
  .wc-side-close { display: none; }
  .wc-sp-head-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .wc-sp-head { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; background: var(--surface); flex-shrink: 0; box-shadow: 0 0 0 1px var(--border); }
  .wc-sp-head.ini { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; color: var(--text-muted); font-size: 1rem; }
  .wc-sp-name { font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; color: var(--text); line-height: 1.15; }
  .wc-sp-pos { font-size: .74rem; color: var(--text-muted); margin-top: 2px; }
  .wc-sp-club { display: flex; align-items: center; gap: 8px; padding: 9px 11px; background: var(--surface); border-radius: 10px; margin-bottom: 10px; font-size: .84rem; font-weight: 700; color: var(--text); }
  .wc-sp-club img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
  .wc-sp-league { margin-left: auto; font-size: .66rem; font-weight: 600; color: var(--text-muted); }
  .wc-sp-facts { display: flex; gap: 8px; margin-bottom: 14px; }
  .wc-sp-facts > div { flex: 1; text-align: center; padding: 7px 4px; border: 1px solid var(--border); border-radius: 9px; }
  .wc-sp-fact-l { font-size: .64rem; color: var(--text-muted); }
  .wc-sp-fact-v { font-size: .9rem; font-weight: 700; color: var(--text); margin-top: 1px; }
  .wc-sp-loading { font-size: .76rem; color: var(--text-muted); padding: 4px 0 12px; }
  .wc-sp-section { font-family: var(--font-display); font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin: 4px 0 8px; }
  .wc-sp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .wc-sp-stat { background: var(--surface); border-radius: 9px; padding: 9px 6px; text-align: center; }
  .wc-sp-stat-v { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--text); }
  .wc-sp-stat-l { font-size: .66rem; color: var(--text-muted); }
  .wc-sp-extra { font-size: .72rem; color: var(--text-muted); margin-top: 9px; line-height: 1.5; }
  .wc-sp-profile { width: 100%; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: 9px; border: 1px solid var(--border); background: transparent; color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: .8rem; cursor: pointer; }
  .wc-sp-profile:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

  @media (max-width: 820px) {
    .wc-mc-head { gap: 8px; }
    .wc-mc-h-name { font-size: .8rem; max-width: 84px; }
    .wc-mc-back span { display: none; }
    .wc-mc-main { padding: 14px 12px 40px; }
    .wc-mc-body { display: block; position: relative; }
    .wc-side { position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-height: 72%; z-index: 20; border-left: none; border-top: 1px solid var(--border); background: var(--bg); transform: translateY(102%); transition: transform .22s ease; box-shadow: 0 -10px 30px rgba(0,0,0,.3); border-radius: 16px 16px 0 0; }
    .wc-side.open { transform: translateY(0); }
    .wc-side-close { display: flex; position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); align-items: center; justify-content: center; cursor: pointer; }
  }

  /* ── Matches segmented control ── */
  .wc-seg { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px; margin-bottom: 14px; }
  .wc-seg-btn { font-family: var(--font-display); font-size: .8rem; font-weight: 700; color: var(--text-muted); background: transparent; border: none; padding: 7px 16px; border-radius: 7px; cursor: pointer; transition: all .12s; }
  .wc-seg-btn:hover { color: var(--text); }
  .wc-seg-btn.active { background: var(--accent); color: #fff; }
  .wc-seg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e5392f; margin-left: 4px; vertical-align: middle; animation: wc-pulse 1.3s ease-in-out infinite; }

  /* ── Analysis tab ── */
  .wc-an-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .wc-an-title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--text); }
  .wc-an-refresh { font-family: var(--font-display); font-size: .76rem; font-weight: 700; color: var(--text); background: var(--surface); border: 1px solid var(--border); padding: 7px 13px; border-radius: 20px; cursor: pointer; transition: all .12s; }
  .wc-an-refresh:hover { border-color: var(--accent); color: var(--accent); }
  .wc-an-sub { font-size: .76rem; color: var(--text-muted); margin: 4px 0 18px; }
  .wc-an-sechead { font-family: var(--font-display); font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin: 26px 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }

  /* What to watch */
  .wc-w2w { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .wc-w2w-card { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), var(--surface)); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
  .wc-w2w-match { font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: var(--text); margin-bottom: 5px; }
  .wc-w2w-angle { font-size: .8rem; color: var(--text-muted); line-height: 1.4; }

  /* News */
  .wc-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
  .wc-news-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; text-decoration: none; transition: border-color .12s, transform .08s; }
  a.wc-news-card:hover { border-color: var(--accent); transform: translateY(-2px); }
  .wc-news-img { width: 100%; height: 140px; background-size: cover; background-position: center; background-color: var(--border); }
  .wc-news-body { padding: 13px 15px 15px; }
  .wc-news-head { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--text); line-height: 1.3; margin-bottom: 6px; }
  .wc-news-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .wc-news-meta { font-size: .68rem; color: var(--text-muted); margin-top: 9px; font-weight: 600; opacity: .85; }
  .wc-news-more { margin-top: 12px; border-top: 1px solid var(--border); }
  .wc-newsrow { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 4px; border-bottom: 1px solid var(--border); text-decoration: none; }
  .wc-newsrow:hover { background: var(--surface); }
  .wc-newsrow-head { font-size: .84rem; color: var(--text); font-weight: 600; line-height: 1.35; }
  a.wc-newsrow:hover .wc-newsrow-head { color: var(--accent); }
  .wc-newsrow-meta { font-size: .66rem; color: var(--text-muted); font-weight: 700; white-space: nowrap; flex-shrink: 0; }
  .wc-news-toggle { margin-top: 12px; font-family: var(--font-display); font-size: .76rem; font-weight: 700; color: var(--accent); background: transparent; border: 1px solid var(--border); padding: 8px 16px; border-radius: 20px; cursor: pointer; }
  .wc-news-toggle:hover { border-color: var(--accent); }

  /* Predictions */
  .wc-pred-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
  .wc-pred { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; }
  .wc-pred-teams { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .86rem; color: var(--text); }
  .wc-pred-h { text-align: left; } .wc-pred-a { text-align: right; }
  .wc-pred-h, .wc-pred-a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wc-pred-score { font-size: 1.05rem; font-weight: 800; color: var(--accent); flex-shrink: 0; }
  .wc-pred-line { display: flex; align-items: center; justify-content: space-between; margin: 9px 0 7px; }
  .wc-pred-h.win, .wc-pred-a.win { color: #16a34a; }
  .wc-pred-h.draw, .wc-pred-a.draw { color: #d97706; }
  body.light .wc-pred-h.win, body.light .wc-pred-a.win { color: #15803d; }
  .wc-pred-drawtag { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #d97706; }
  .wc-conf { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 10px; }
  .wc-conf.high { background: rgba(22,163,74,.18); color: #16a34a; }
  .wc-conf.med { background: rgba(245,197,24,.18); color: #b8860b; }
  .wc-conf.low { background: var(--border); color: var(--text-muted); }
  body.light .wc-conf.med { color: #8a6d00; }
  .wc-pred-why { font-size: .76rem; color: var(--text-muted); line-height: 1.4; }

  /* Projection */
  .wc-proj { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
  @media (max-width: 640px) { .wc-proj { grid-template-columns: 1fr; } }
  .wc-proj-champ { display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, color-mix(in srgb, #f5c518 16%, var(--surface)), var(--surface)); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; }
  .wc-proj-trophy { font-size: 2rem; }
  .wc-proj-lbl { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
  .wc-proj-team { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--text); margin: 2px 0 4px; }
  .wc-proj-why { font-size: .78rem; color: var(--text-muted); line-height: 1.4; }
  .wc-proj-final { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; justify-content: center; }
  .wc-proj-pair { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
  .wc-proj-finalist { font-family: var(--font-display); font-weight: 800; font-size: 1rem; color: var(--text); }
  .wc-proj-v { font-size: .72rem; color: var(--text-muted); font-weight: 700; }

  /* Power rankings */
  .wc-pwr-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; }
  @media (max-width: 640px) { .wc-pwr-list { grid-template-columns: 1fr; } }
  .wc-pwr { display: grid; grid-template-columns: 26px auto 1fr; align-items: baseline; gap: 9px; padding: 8px 4px; border-bottom: 1px solid var(--border); }
  .wc-pwr-rank { font-family: var(--font-display); font-weight: 800; color: var(--accent); font-size: .9rem; text-align: center; }
  .wc-pwr-team { font-family: var(--font-display); font-weight: 700; font-size: .86rem; color: var(--text); }
  .wc-pwr-note { font-size: .72rem; color: var(--text-muted); text-align: right; line-height: 1.35; }

  /* Top performers */
  .wc-perf-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
  @media (max-width: 640px) { .wc-perf-cols { grid-template-columns: 1fr; } }
  .wc-perf-coltitle { font-family: var(--font-display); font-weight: 800; font-size: .82rem; color: var(--text); margin-bottom: 8px; }
  .wc-perf-row { display: flex; align-items: center; gap: 11px; padding: 8px 4px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 8px; }
  .wc-perf-row:hover { background: var(--surface); }
  .wc-perf-head { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--surface); flex-shrink: 0; box-shadow: 0 0 0 1px var(--border); }
  .wc-perf-head.ini { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: .7rem; color: var(--text-muted); }
  .wc-perf-main { flex: 1; min-width: 0; }
  .wc-perf-name { font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wc-perf-meta { font-size: .72rem; color: var(--text-muted); }
  .wc-perf-val { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--accent); text-align: center; flex-shrink: 0; }
  .wc-perf-val span { display: block; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }

  /* Storylines */
  .wc-insights { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
  .wc-insight { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; border-left: 3px solid var(--accent); }
  .wc-insight-t { font-family: var(--font-display); font-weight: 800; font-size: .88rem; color: var(--text); margin-bottom: 5px; }
  .wc-insight-b { font-size: .78rem; color: var(--text-muted); line-height: 1.45; }


    /* ═══════════════════════════════════════════════════════════════
       v2 TYPE NORMALIZATION — one section-eyebrow treatment platform-wide.
       Same element (small label above a section/card) was rendered at 5+
       sizes, 3 weights, and 2 font families across screens. This unifies the
       metrics (family/size/weight/spacing) while preserving each rule's color.
       Appended last so it wins on source order (CLAUDE.md pitfall).
       ═══════════════════════════════════════════════════════════════ */
    .section-title,
    .ns-section-eyebrow, .ns-form-hero-eyebrow, .ns-results-eyebrow, .ns-card-eyebrow,
    .dash-section-title, .dash-suggest-label,
    .workspace-col-title,
    .sl-group-label, .sl-summary-label,
    .ntr-squad-title, .ntr-section h3, .ntr-summary h3,
    .ta-suggest-label,
    .li-section-title, .li-card-title,
    .pulse-col-title {
      font-family: var(--font-mono);
      font-size: var(--fs-label);
      font-weight: 600;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    /* Fix: Home section label had color:var(--dr-text-4) — undefined outside the DNA card. */
    .section-title { color: var(--text-muted); }

    /* v2 TYPE NORMALIZATION — micro stat/field labels (one treatment). */
    .ns-stat-label, .ns-bstat-label, .rb-keystats .k .lbl, .sr-label,
    .sl-stat-label, .pd-label, .li-metric-label, .dna-tile-label {
      font-family: var(--font-mono);
      font-size: var(--fs-microlabel);
      font-weight: 600;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    /* ═══════════════════════════════════════════════════════════════
       v2 IA — Scout mode bar, Ask command bar, sub-nav consolidation
       ═══════════════════════════════════════════════════════════════ */

    /* Scout workspace mode bar (Discover · Shortlist · Squads · Reports) */
    #scout-modebar {
      flex: 0 0 auto;
      display: flex;
      gap: 4px;
      padding: 10px 20px 0;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    .sm-chip {
      font-family: var(--font-mono);
      font-size: var(--fs-label);
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--text-muted);
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      padding: 8px 12px 12px;
      cursor: pointer;
      transition: color .15s;
    }
    .sm-chip:hover { color: var(--text); }
    .sm-chip.active { color: var(--accent); border-bottom-color: var(--accent); }
    /* A chip's long label (e.g. "National Team Selection") is the default; the
       short form only takes over at the narrow breakpoint below, where the
       modebar would otherwise need the horizontal scroll on its own. */
    .sm-chip-short { display: none; }

    /* Ask The Prism — command bar (sidebar) */
    .nav-ask {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 12px 12px 4px;
      padding: 11px 12px;
      border-radius: var(--r-md);
      background: var(--accent);
      color: #fff;
      border: none;
      cursor: pointer;
      font-family: var(--font);
      font-size: var(--text-nav);
      font-weight: 600;
      width: calc(100% - 24px);
      transition: filter .15s;
    }
    .nav-ask:hover { filter: brightness(1.08); }
    .nav-ask .nav-icon { width: 18px; height: 18px; flex: 0 0 auto; }
    .nav-ask .nav-label { flex: 1; text-align: left; }
    .nav-ask-kbd {
      font-family: var(--font-mono);
      font-size: .62rem;
      opacity: .7;
      border: 1px solid rgba(255,255,255,.35);
      border-radius: 5px;
      padding: 2px 5px;
    }

    /* ═══════════════════════════════════════════════════════════════
       v2 HYBRID PLAYER REPORT MODAL (.pr-*)
       Light card body + one signature dark rating chip (.p-verdict).
       ═══════════════════════════════════════════════════════════════ */
    #pr-overlay {
      position: fixed; inset: 0; z-index: 4000;
      background: rgba(0,0,0,.5);
      display: none; align-items: flex-start; justify-content: center;
      padding: 40px 20px; overflow-y: auto;
      backdrop-filter: blur(2px);
    }
    #pr-overlay.open { display: flex; }
    #pr-modal {
      position: relative;
      width: 100%; max-width: 720px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      box-shadow: 0 20px 60px rgba(0,0,0,.28);
      overflow: hidden;
    }
    #pr-close {
      position: absolute; top: 14px; right: 14px; z-index: 2;
      width: 30px; height: 30px; border-radius: 50%;
      border: 1px solid var(--border); background: var(--surface2);
      color: var(--text-muted); cursor: pointer; font-size: .8rem;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, color .15s;
    }
    #pr-close:hover { background: var(--surface3); color: var(--text); }

    .pr-card { padding: 0; }
    .pr-head {
      display: flex; align-items: flex-start; justify-content: space-between;
      gap: 18px; padding: 24px 26px 18px; background: var(--surface2);
      border-bottom: 1px solid var(--border);
    }
    .pr-head-main { min-width: 0; }
    .pr-name {
      font-family: var(--font-display); font-weight: 800;
      font-size: 1.5rem; letter-spacing: -0.02em; color: var(--text);
      line-height: 1.1;
    }
    .pr-dot { color: var(--accent); }
    .pr-meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-dim); margin-top: 6px; text-transform: uppercase; letter-spacing: .04em; }
    .pr-sub  { font-family: var(--font-mono); font-size: var(--fs-microlabel); color: var(--text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .04em; }
    .pr-badge-callup, .pr-badge-monitor, .pr-badge-consider {
      display: inline-block; margin-top: 10px; font-family: var(--font-mono);
      font-size: var(--fs-microlabel); font-weight: 600; text-transform: uppercase;
      letter-spacing: .06em; padding: 3px 10px; border-radius: var(--r-pill);
    }
    .pr-badge-callup   { background: var(--accent); color: #fff; }
    .pr-badge-monitor  { background: #fef7e0; color: #b45309; border: 1px solid rgba(180,83,9,.2); }
    .pr-badge-consider { background: var(--surface3); color: var(--text-muted); border: 1px solid var(--border); }
    body.dark .pr-badge-monitor { background: rgba(180,83,9,.18); color: #f59e0b; }

    /* Signature dark rating chip */
    .p-verdict {
      flex: 0 0 auto; background: var(--ink); color: var(--ink-text);
      border-radius: var(--r-sm); padding: 10px 16px; text-align: right;
    }
    .p-verdict .lbl { display: block; font-family: var(--font-mono); font-size: var(--fs-microlabel); text-transform: uppercase; letter-spacing: .08em; opacity: .55; }
    .p-verdict .val { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; line-height: 1.1; margin-top: 2px; }
    .pr-verdict-max { font-size: .9rem; font-weight: 600; opacity: .6; }
    body.dark .p-verdict { background: var(--paper); color: var(--ink); }

    .pr-kstats {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 10px; padding: 18px 26px;
    }
    .pr-kstat { background: var(--surface2); border-radius: var(--r-sm); padding: 12px 14px; }
    .pr-kstat-lbl { display: block; font-family: var(--font-mono); font-size: var(--fs-microlabel); font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
    .pr-kstat-val { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--text); margin-top: 3px; }
    .pr-kstat-sub { display: block; font-family: var(--font-mono); font-size: var(--fs-microlabel); font-weight: 500; color: var(--accent); letter-spacing: .02em; margin-top: 1px; text-transform: none; }

    .pr-analysis-wrap { padding: 4px 26px 8px; }
    .pr-analysis-hd, .pr-block-hd, .pr-sc-hd {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted);
      margin-bottom: 10px;
    }
    .pr-verdict-text p { font-size: .92rem; line-height: 1.7; color: var(--text); margin-bottom: 12px; }
    .pr-sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
    .pr-sc { border-radius: var(--r-md); padding: 14px 16px; }
    .pr-sc-str { background: rgba(22,163,74,.07); border: 1px solid rgba(22,163,74,.18); }
    .pr-sc-con { background: rgba(226,59,74,.06); border: 1px solid rgba(226,59,74,.16); }
    .pr-sc-str .pr-sc-hd { color: var(--success); }
    .pr-sc-con .pr-sc-hd { color: var(--danger); }
    .pr-sc ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
    .pr-sc li { display: flex; flex-direction: column; gap: 2px; }
    .pr-li-t { font-weight: 600; font-size: .82rem; color: var(--text); }
    .pr-li-d { font-size: .78rem; color: var(--text-dim); line-height: 1.5; }

    .pr-block { padding: 14px 26px; }
    .pr-comps { display: flex; flex-direction: column; gap: 10px; }
    .pr-comp { background: var(--surface2); border-radius: var(--r-sm); padding: 10px 14px; }
    .pr-comp-n { font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--text); margin-right: 8px; }
    .pr-comp-m { font-family: var(--font-mono); font-size: var(--fs-microlabel); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
    .pr-comp-r { display: block; font-size: .8rem; color: var(--text-dim); line-height: 1.5; margin-top: 4px; }
    .pr-traj { font-size: .88rem; line-height: 1.65; color: var(--text-dim); }

    .pr-foot { display: flex; gap: 10px; padding: 16px 26px 24px; border-top: 1px solid var(--border); margin-top: 6px; }
    .pr-btn {
      font-family: var(--font); font-size: .82rem; font-weight: 600;
      padding: 9px 16px; border-radius: var(--r-sm); cursor: pointer;
      border: 1px solid var(--border); background: var(--surface); color: var(--text);
      transition: background .15s;
    }
    .pr-btn:hover { background: var(--surface2); }
    .pr-btn:first-child { background: var(--ink); color: var(--ink-text); border-color: var(--ink); }
    body.dark .pr-btn:first-child { background: var(--paper); color: var(--ink); border-color: var(--paper); }

    /* Analyzing / loading / error states */
    .pr-analyzing { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: .78rem; color: var(--accent); padding: 10px 0; }
    .pr-spin { width: 13px; height: 13px; border: 2px solid var(--accent-dim); border-top-color: var(--accent); border-radius: 50%; animation: pr-spin .7s linear infinite; }
    @keyframes pr-spin { to { transform: rotate(360deg); } }
    .pr-skel-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; padding: 18px 26px; }
    .p-skel-tile { height: 62px; border-radius: var(--r-sm); background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 37%, var(--surface2) 63%); background-size: 400% 100%; animation: pr-shimmer 1.4s ease infinite; }
    @keyframes pr-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
    .pr-analysis-err { margin: 8px 0 12px; }
    .p-error { background: rgba(226,59,74,.07); border: 1px solid rgba(226,59,74,.2); border-left: 3px solid var(--danger); border-radius: var(--r-sm); padding: 12px 14px; font-size: .82rem; color: var(--text); }
    .p-error button { margin-left: 8px; background: none; border: 1px solid var(--border); border-radius: 5px; padding: 3px 10px; font-size: .75rem; cursor: pointer; color: var(--text); }

    @media (max-width: 640px) {
      #pr-overlay { padding: 0; }
      #pr-modal { max-width: 100%; min-height: 100%; border-radius: 0; border: none; }
      .pr-head { flex-direction: column; gap: 14px; }
      .p-verdict { align-self: flex-start; }
      .pr-sc-grid { grid-template-columns: 1fr; }
    }

    /* Clickable club name inside the report meta */
    .pr-team-link { color: var(--accent); cursor: pointer; border-bottom: 1px dotted transparent; transition: border-color .15s; }
    .pr-team-link:hover { border-bottom-color: var(--accent); }

    /* ═══════════════════════════════════════════════════════════════
       PHASE 6 — premium design revamp
       ═══════════════════════════════════════════════════════════════ */

    /* 6A · Profile "back to Discover" affordance */
    .dash-back-btn {
      display: inline-flex; align-items: center; gap: 5px;
      font-family: var(--font-mono);
      font-size: var(--fs-label);
      font-weight: 600;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--text-muted);
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--r-pill);
      padding: 6px 12px 6px 9px;
      cursor: pointer;
      transition: color .15s, border-color .15s, background .15s;
      flex: 0 0 auto;
    }
    .dash-back-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
    .dash-back-btn svg { stroke: currentColor; }

    /* ───────────────────────────────────────────────────────────────
       6B · TYPOGRAPHY NORMALISATION (append — source-order wins)
       Keep the vibe (WC screen is the reference); collapse the drift:
       loud display sizes → the 5-step Nunito scale at near-equivalent
       sizes, buttons → one token, DNA px-island body → the rem scale.
       ─────────────────────────────────────────────────────────────── */

    /* Display heroes → 5-step scale (near-equivalent, minimal visual shift) */
    .rb-head .name,
    .team-dna-report .dna-team-name,
    .sr-rating-value,
    .ns-results-name        { font-size: var(--fs-d1); }
    .rb-head .verdict-chip .val,
    .team-dna-report .dna-perf-big { font-size: var(--fs-d2); }
    .ntr-title,
    .sr-name                { font-size: var(--fs-d3); }
    .ns-card-title          { font-size: var(--fs-d4); }

    /* Buttons → one size token */
    .pd-btn, .pd-mode-btn, .li-refresh, .li-sort, .li-load,
    .pcb-hf-add, .wc-subt, .rb-back-btn, .rb-export-btn { font-size: var(--fs-btn); }

    /* DNA px-island body text → rem scale (was 14/13px) */
    .team-dna-report .dna-fp-label      { font-size: var(--fs-body); }
    .team-dna-report .dna-key-text,
    .team-dna-report .dna-fixture-table td { font-size: var(--fs-body-sm); }

    /* ═══════════════════════════════════════════════════════════════
       6G · ⌘K COMMAND PALETTE
       ═══════════════════════════════════════════════════════════════ */
    #cmdk-overlay {
      position: fixed; inset: 0; z-index: 4000;
      display: none;
      align-items: flex-start; justify-content: center;
      padding-top: 12vh;
      background: rgba(11,11,12,.44);
      backdrop-filter: blur(6px) saturate(1.1);
      -webkit-backdrop-filter: blur(6px) saturate(1.1);
    }
    #cmdk-overlay.open { display: flex; animation: cmdk-fade .14s ease; }
    @keyframes cmdk-fade { from { opacity: 0 } to { opacity: 1 } }

    #cmdk-box {
      width: min(600px, 92vw);
      max-height: 62vh;
      display: flex; flex-direction: column;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      box-shadow: 0 24px 60px -12px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.03);
      overflow: hidden;
      animation: cmdk-pop .16s cubic-bezier(.2,.8,.2,1);
    }
    @keyframes cmdk-pop { from { transform: translateY(-8px) scale(.98); opacity: .4 } to { transform: none; opacity: 1 } }

    #cmdk-input-row {
      display: flex; align-items: center; gap: 11px;
      padding: 15px 18px;
      border-bottom: 1px solid var(--border);
    }
    #cmdk-input-row > svg { width: 18px; height: 18px; color: var(--text-muted); flex: 0 0 auto; }
    #cmdk-input {
      flex: 1; border: 0; outline: 0; background: transparent;
      font-family: var(--font); font-size: 1rem; color: var(--text);
    }
    #cmdk-input::placeholder { color: var(--text-muted); }
    .cmdk-esc {
      font-family: var(--font-mono); font-size: .58rem; letter-spacing: .05em;
      color: var(--text-muted); border: 1px solid var(--border);
      border-radius: 5px; padding: 3px 6px; flex: 0 0 auto;
    }

    #cmdk-results { overflow-y: auto; padding: 6px; }
    .cmdk-group-label {
      font-family: var(--font-mono); font-size: var(--fs-microlabel); font-weight: 600;
      letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted);
      padding: 10px 12px 5px;
    }
    .cmdk-item {
      display: flex; align-items: center; gap: 11px;
      padding: 9px 12px; border-radius: var(--r-md);
      cursor: pointer; scroll-margin: 8px;
    }
    .cmdk-item .cmdk-ic { width: 17px; height: 17px; color: var(--text-muted); flex: 0 0 auto; }
    .cmdk-label { font-size: var(--fs-body); color: var(--text); font-weight: 500; }
    .cmdk-sub {
      margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-microlabel);
      color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
      white-space: nowrap; padding-left: 10px;
    }
    .cmdk-item.sel { background: var(--accent); }
    .cmdk-item.sel .cmdk-ic,
    .cmdk-item.sel .cmdk-label,
    .cmdk-item.sel .cmdk-sub { color: #fff; }
    .cmdk-empty { padding: 26px 16px; text-align: center; color: var(--text-muted); font-size: var(--fs-body); }

    #cmdk-foot {
      display: flex; gap: 18px; align-items: center;
      padding: 9px 16px; border-top: 1px solid var(--border);
      background: var(--surface2);
    }
    #cmdk-foot span { display: inline-flex; align-items: center; gap: 5px;
      font-size: var(--fs-microlabel); color: var(--text-muted); }
    #cmdk-foot kbd {
      font-family: var(--font-mono); font-size: .58rem; color: var(--text-dim);
      border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; background: var(--surface);
    }
    @media (prefers-reduced-motion: reduce) {
      #cmdk-overlay.open, #cmdk-box { animation: none; }
    }
    @media (max-width: 600px) {
      #cmdk-overlay { padding-top: 0; align-items: stretch; }
      #cmdk-box { width: 100vw; max-height: 100vh; border-radius: 0; }
    }

    /* ═══════════════════════════════════════════════════════════════
       6C/6D · CHAT REVAMP — header, history dropdown, slick loading
       ═══════════════════════════════════════════════════════════════ */
    #chat-header {
      flex: 0 0 auto;
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 22px;
      border-bottom: 1px solid var(--border);
      background: var(--surface);
    }
    .ch-brand { display: flex; align-items: center; gap: 9px; }
    .ch-mark { display: inline-flex; color: var(--text); }
    .ch-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-d5); color: var(--text); letter-spacing: -0.01em; }
    .ch-actions { display: flex; align-items: center; gap: 8px; position: relative; }
    .ch-btn {
      display: inline-flex; align-items: center; gap: 6px;
      font-family: var(--font); font-size: var(--fs-btn); font-weight: 500;
      color: var(--text-dim); background: var(--surface2);
      border: 1px solid var(--border); border-radius: var(--r-pill);
      padding: 6px 13px; cursor: pointer; transition: color .15s, border-color .15s, background .15s;
    }
    .ch-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
    .ch-btn svg { flex: 0 0 auto; }
    .ch-history-wrap { position: relative; }
    .ch-menu {
      position: absolute; top: calc(100% + 8px); right: 0; z-index: 200;
      width: 300px; max-height: 60vh; overflow-y: auto;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-md); box-shadow: 0 16px 44px -10px rgba(0,0,0,.4);
      padding: 6px;
    }
    .ch-menu-empty { padding: 18px 12px; text-align: center; color: var(--text-muted); font-size: var(--fs-body-sm); }
    .ch-menu-item {
      display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
      background: none; border: 0; border-radius: var(--r-sm);
      padding: 9px 11px; cursor: pointer; transition: background .12s;
    }
    .ch-menu-item:hover { background: var(--surface2); }
    .ch-menu-item.active { background: var(--accent-dim); }
    .ch-menu-title { font-size: var(--fs-body); color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ch-menu-time { font-family: var(--font-mono); font-size: var(--fs-microlabel); color: var(--text-muted); }

    /* Slick indeterminate "thinking" state */
    .ai-think { display: inline-flex; align-items: center; gap: 10px; }
    .ai-think-mark { display: inline-flex; color: var(--text); animation: ai-mark-pulse 1.6s ease-in-out infinite; }
    .ai-think-mark circle { animation: ai-dot-glow 1.6s ease-in-out infinite; }
    @keyframes ai-mark-pulse { 0%,100% { opacity: .55; transform: translateY(0) } 50% { opacity: 1; transform: translateY(-1px) } }
    @keyframes ai-dot-glow { 0%,100% { r: 2.4 } 50% { r: 3.4 } }
    .ai-think-text {
      font-size: var(--fs-body); font-weight: 500;
      background: linear-gradient(90deg, var(--text-muted) 20%, var(--text) 45%, var(--text-muted) 70%);
      background-size: 220% 100%;
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: transparent; color: transparent;
      animation: ai-shimmer 1.8s linear infinite;
    }
    @keyframes ai-shimmer { from { background-position: 130% 0 } to { background-position: -30% 0 } }

    /* Tool status → soft pill with a pulsing dot */
    .tool-status {
      display: inline-flex; align-items: center; gap: 8px;
      margin: 8px 0 2px;
      font-family: var(--font); font-size: var(--fs-body-sm); color: var(--text-dim);
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--r-pill); padding: 5px 12px;
    }
    .tool-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: tool-dot 1.2s ease-in-out infinite; }
    @keyframes tool-dot { 0%,100% { opacity: .35; transform: scale(.8) } 50% { opacity: 1; transform: scale(1) } }

    @media (prefers-reduced-motion: reduce) {
      .ai-think-mark, .ai-think-mark circle, .ai-think-text, .tool-dot { animation: none; }
      .ai-think-text { -webkit-text-fill-color: var(--text); color: var(--text); }
    }

    /* 6C · Ask welcome refinements */
    .ea-mark { display: inline-flex; color: var(--text); margin-bottom: 14px; opacity: .92; }
    .ea-head h1 { font-size: var(--fs-d1); letter-spacing: -0.02em; }
    .ea-head p { font-size: var(--fs-body); color: var(--text-muted); }
    #ea-context-row { width: 100%; max-width: 720px; margin: 2px auto 14px; }
    #ea-context-row .lbl {
      font-family: var(--font-mono); font-size: var(--fs-microlabel); font-weight: 600;
      letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
    }
    .ea-context-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .ea-context-chips .ea-chip {
      border-color: var(--accent); background: var(--accent-dim); color: var(--text);
    }

    /* ═══════════════════════════════════════════════════════════════
       6E · REPORT MODAL — export / share / prepared-by
       ═══════════════════════════════════════════════════════════════ */
    .pr-btn-icon { color: var(--text-dim); }
    .pr-prepared {
      display: none;   /* screen: hidden; print: shown */
      align-items: center; gap: 8px;
      padding: 8px 2px 0;
      font-family: var(--font-mono); font-size: var(--fs-microlabel);
      color: var(--text-muted); letter-spacing: .03em;
    }
    .pr-prepared-edit {
      background: none; border: 0; cursor: pointer; color: var(--text-muted);
      font-size: .8rem; padding: 2px 5px; border-radius: 5px;
    }
    .pr-prepared-edit:hover { color: var(--accent); background: var(--accent-dim); }
    /* Show the prepared-by line on screen too (subtle), so users know export attributes it */
    #pr-modal .pr-prepared { display: flex; }

    /* Branded print header — only shows on the exported PDF. */
    .pr-print-header { display: none; }

    /* Scoped print — the modal is hoisted to <body> (see _prExportPDF) so no
       constrained ancestor clips it. Reset the whole chain so content flows. */
    @media print {
      html, body {
        height: auto !important; overflow: visible !important;
        background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
      }
      body.printing-report > *:not(#pr-overlay) { display: none !important; }
      #pr-overlay {
        position: static !important; display: block !important;
        inset: auto !important; z-index: auto !important;
        background: none !important; backdrop-filter: none !important;
        padding: 0 !important; margin: 0 !important;
        overflow: visible !important; height: auto !important; max-height: none !important;
        /* Force the report to render in light tokens even if the app is in dark mode */
        --surface: #fff; --surface2: #fafafa; --surface3: #f5f5f5;
        --bg: #fff; --border: #e5e5e5; --border2: rgba(0,0,0,.12);
        --text: #0b0b0c; --text-dim: #525252; --text-muted: #737373;
        --accent-dim: rgba(37,99,235,.08);
        color: #0b0b0c;
      }
      #pr-modal {
        position: static !important; box-shadow: none !important; border: none !important;
        max-height: none !important; height: auto !important; width: auto !important;
        max-width: none !important; overflow: visible !important; border-radius: 0 !important;
        background: #fff !important;
      }
      #pr-body { overflow: visible !important; max-height: none !important; height: auto !important; }
      #pr-close, .pr-foot { display: none !important; }
      .pr-prepared { display: flex !important; }
      .pr-card { box-shadow: none !important; border: none !important; padding: 0 !important; }

      /* Branded header block on the PDF */
      .pr-print-header {
        display: flex !important; align-items: center; gap: 12px;
        padding: 0 0 16px; margin-bottom: 18px;
        border-bottom: 2px solid var(--ink);
      }
      .pr-ph-mark { color: var(--ink); display: inline-flex; }
      .pr-ph-brand { display: flex; flex-direction: column; line-height: 1.15; }
      .pr-ph-name { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
      .pr-ph-name .pr-dot { color: var(--accent); }
      .pr-ph-tag { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
      .pr-ph-report { margin-left: auto; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }

      /* Let big blocks flow across pages; only keep SMALL atomic items intact.
         (break-inside:avoid on the whole analysis was forcing it off page 1,
         leaving a huge gap.) */
      .pr-kstat, .pr-comp, .pr-sc-grid li { break-inside: avoid; }
      .pr-block-hd, .pr-sc-hd, .pr-analysis-hd { break-after: avoid; }
      @page { size: A4 portrait; margin: 14mm 14mm 12mm; }
    }

    /* ═══════════════════════════════════════════════════════════════
       6F · RESPONSIVE UNIFICATION — mid-range reflows (700–1100 dead zone)
       Desktop column counts were rendering into a squeezed main area.
       ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 1100px) {
      .team-analysis-report .ta-squad-grid,
      .team-analysis-report .ta-sp-tiles,
      .team-dna-report .dna-squad-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .wc-groups-grid { grid-template-columns: repeat(2, 1fr) !important; }
      .sl-card-grid   { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 900px) {
      .home-band { padding-left: 20px !important; padding-right: 20px !important; }
      .wc-proj, .wc-pwr-list, .wc-perf-cols { grid-template-columns: 1fr !important; }
      .ta-key-men-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (max-width: 640px) {
      .team-analysis-report .ta-squad-grid,
      .team-analysis-report .ta-sp-tiles,
      .team-dna-report .dna-squad-grid,
      .wc-groups-grid, .sl-card-grid { grid-template-columns: 1fr !important; }
      #scout-modebar { overflow-x: auto; }
      .sm-chip-long  { display: none; }
      .sm-chip-short { display: inline; }
    }

    /* 6H · Home "Recently viewed" rail */
    .home-recents-row {
      display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px;
    }
    .home-recent-chip {
      display: inline-flex; align-items: center; gap: 9px;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-pill); padding: 7px 14px 7px 9px;
      cursor: pointer; transition: border-color .15s, background .15s, transform .12s;
    }
    .home-recent-chip:hover { border-color: var(--accent); background: var(--accent-dim); transform: translateY(-1px); }
    .hrc-kind {
      font-family: var(--font-mono); font-size: var(--fs-microlabel); font-weight: 600;
      text-transform: uppercase; letter-spacing: .06em;
      padding: 2px 7px; border-radius: var(--r-sm); color: #fff;
    }
    .hrc-player { background: var(--accent); }
    .hrc-team   { background: #0ea5a3; }
    .hrc-league { background: #7c6cf0; }
    .hrc-name { font-size: var(--fs-body); font-weight: 500; color: var(--text); }

    /* ═══════════════════════════════════════════════════════════════
       6I · COMMAND PALETTE DISCOVERABILITY — sidebar search + mobile FAB
       ═══════════════════════════════════════════════════════════════ */
    /* Sidebar search trigger (looks like a search field; opens the palette) */
    .sidebar-search {
      display: flex; align-items: center; gap: 9px;
      margin: 4px 12px 6px; padding: 9px 11px;
      width: calc(100% - 24px);
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--r-md);
      color: rgba(255,255,255,.62);
      cursor: pointer; text-align: left;
      transition: background .15s, border-color .15s, color .15s;
    }
    body.light .sidebar-search { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); color: var(--text-muted); }
    .sidebar-search:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #fff; }
    body.light .sidebar-search:hover { background: rgba(0,0,0,.06); border-color: var(--accent); color: var(--text); }
    .sidebar-search .ss-icon { width: 15px; height: 15px; flex: 0 0 auto; }
    .sidebar-search .ss-label { flex: 1; font-size: var(--fs-btn); }
    .sidebar-search .ss-kbd {
      font-family: var(--font-mono); font-size: .58rem; letter-spacing: .04em;
      border: 1px solid rgba(255,255,255,.2); border-radius: 5px; padding: 2px 5px; flex: 0 0 auto;
    }
    body.light .sidebar-search .ss-kbd { border-color: var(--border); }
    /* Collapse to icon-only when the sidebar is an icon rail */
    #sidebar.collapsed .sidebar-search { justify-content: center; width: 40px; margin: 4px auto 6px; padding: 9px 0; }
    #sidebar.collapsed .sidebar-search .ss-label,
    #sidebar.collapsed .sidebar-search .ss-kbd { display: none; }
    @media (max-width: 700px) {
      .sidebar-search { justify-content: center; width: 40px; margin: 4px auto 6px; padding: 9px 0; }
      .sidebar-search .ss-label, .sidebar-search .ss-kbd { display: none; }
    }

    /* Mobile search FAB (phones have no ⌘K) */
    #mobile-search-fab {
      display: none;
      position: fixed; right: 16px; bottom: 74px; z-index: 3500;
      width: 50px; height: 50px; border-radius: 50%;
      background: var(--accent); color: #fff; border: none; cursor: pointer;
      box-shadow: 0 8px 22px -4px rgba(37,99,235,.55);
      align-items: center; justify-content: center;
    }
    #mobile-search-fab svg { width: 22px; height: 22px; }
    #mobile-search-fab:active { transform: scale(.94); }
    @media (max-width: 600px) { #mobile-search-fab { display: flex; } }
    /* Hide the FAB on the chat page — the send button owns that corner. */
    body.chat-active #mobile-search-fab { display: none !important; }

    /* ═══════════════════════════════════════════════════════════════
       6J · EMPTY / UNAVAILABLE STATES — one consistent treatment
       (they were already centered + muted; this removes the size drift
        and gives them a uniform, friendly feel across every screen.)
       ═══════════════════════════════════════════════════════════════ */
    .home-unavailable, .pulse-no-data, .sl-dropdown-msg, .cr-empty,
    .ch-menu-empty, .cmdk-empty, .wc-empty, .li-empty, .pd-no-results {
      font-size: var(--fs-body-sm);
      color: var(--text-muted);
      text-align: center;
      line-height: 1.55;
    }

    /* ═══════════════════════════════════════════════════════════════
       REFRACTIONS — The Prism Journal (premium editorial reading)
       Built on v2 tokens. Signature detail: a thin prism-spectrum rule
       (the light a prism splits) echoing the name + the OG card.
       ═══════════════════════════════════════════════════════════════ */
    :root {
      --rfx-spectrum: linear-gradient(90deg, #e5392f 0%, #f97316 26%, #f5b301 46%, #16a34a 68%, #2563EB 100%);
      --rfx-measure: 42rem;   /* comfortable reading column */
    }
    #refractions-panel { background: var(--bg); }

    /* ── Masthead ── */
    .rfx-masthead { position: relative; }
    .rfx-spectrum {
      height: 3px; width: 100%;
      background: var(--rfx-spectrum);
      opacity: .9;
    }
    .rfx-mast-inner {
      max-width: var(--rfx-measure); margin: 0 auto; width: 100%;
      padding: 40px 24px 8px;
    }
    .rfx-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
    .rfx-brand-mark { display: inline-flex; color: var(--text); line-height: 0; }
    .rfx-eyebrow {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .16em; color: var(--accent);
    }
    .rfx-wordmark {
      font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
      font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: .98; color: var(--text);
      margin-bottom: 14px;
    }
    .rfx-tagline {
      font-size: .88rem; line-height: 1.6; color: var(--text-dim);
      max-width: 48ch;
    }

    /* ── Index body ── */
    .rfx-body {
      max-width: var(--rfx-measure); margin: 0 auto; width: 100%;
      padding: 20px 24px 64px;
    }
    .rfx-list-skel { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }

    /* Featured lead essay — the magazine cover */
    .rfx-feature {
      display: block; position: relative; cursor: pointer; text-decoration: none;
      background: var(--surface); border: 1px solid var(--border);
      border-radius: var(--r-lg); overflow: hidden;
      box-shadow: var(--shadow-card);
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
      animation: rfx-rise .5s ease both;
    }
    .rfx-feature:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.05);
      border-color: var(--border-strong);
    }
    body.dark .rfx-feature:hover { box-shadow: 0 12px 34px rgba(0,0,0,.5); }
    .rfx-feature-spectrum { height: 4px; background: var(--rfx-spectrum); }
    .rfx-feature-main { padding: 26px 28px 28px; }
    .rfx-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
    .rfx-kicker-latest {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted);
    }
    .rfx-feature-title {
      font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
      font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.08; color: var(--text);
      margin-bottom: 12px;
    }
    .rfx-feature:hover .rfx-feature-title { color: var(--accent); }
    .rfx-feature-dek {
      font-size: 1.05rem; line-height: 1.55; color: var(--text-dim);
      max-width: 52ch; margin-bottom: 18px;
    }
    .rfx-read-cta {
      display: inline-flex; align-items: center; gap: 8px; margin-top: 4px;
      font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: var(--accent);
    }
    .rfx-read-cta svg { transition: transform .16s ease; }
    .rfx-feature:hover .rfx-read-cta svg { transform: translateX(3px); }

    /* meta line (shared) */
    .rfx-meta {
      display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
      font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-muted);
    }
    .rfx-meta i { color: var(--border-strong); font-style: normal; }
    .rfx-meta span:first-child { color: var(--accent); font-weight: 600; letter-spacing: .04em; }
    .rfx-meta-sm { font-size: .68rem; }

    /* "More from the journal" */
    .rfx-section-hd { margin: 34px 0 6px; }
    .rfx-eyebrow-sm {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted);
    }
    .rfx-list { display: flex; flex-direction: column; }
    .rfx-row {
      display: flex; align-items: center; gap: 16px; cursor: pointer; text-decoration: none;
      padding: 20px 4px; border-top: 1px solid var(--border);
      transition: padding-left .16s ease;
    }
    .rfx-row:hover { padding-left: 10px; }
    .rfx-row-main { flex: 1; min-width: 0; }
    .rfx-row-title {
      font-family: var(--font-display); font-weight: 700; font-size: 1.2rem;
      line-height: 1.2; letter-spacing: -.01em; color: var(--text); margin: 7px 0 5px;
      transition: color .14s ease;
    }
    .rfx-row:hover .rfx-row-title { color: var(--accent); }
    .rfx-row-dek { font-size: .92rem; line-height: 1.5; color: var(--text-dim); max-width: 60ch; }
    .rfx-row-chev { color: var(--text-muted); opacity: 0; transition: opacity .14s ease, transform .14s ease; flex-shrink: 0; }
    .rfx-row:hover .rfx-row-chev { opacity: 1; transform: translateX(2px); }

    /* ── Reader ── */
    .rfx-reader-bar {
      display: flex; align-items: center; justify-content: space-between;
      max-width: var(--rfx-measure); margin: 0 auto; width: 100%;
      padding: 18px 24px 0;
    }
    .rfx-back, .rfx-share {
      display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
      background: none; border: 0; padding: 6px 0; text-decoration: none;
      transition: color .14s ease;
    }
    .rfx-back:hover, .rfx-share:hover { color: var(--accent); }

    .rfx-art-inner {
      max-width: var(--rfx-measure); margin: 0 auto; width: 100%;
      padding: 22px 24px 80px; position: relative;
      animation: rfx-rise .45s ease both;
    }
    .rfx-art-spectrum {
      width: 46px; height: 3px; background: var(--rfx-spectrum);
      border-radius: 2px; margin-bottom: 22px;
    }
    .rfx-art-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
    .rfx-art-kicker-txt {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted);
    }
    .rfx-art-title {
      font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em;
      font-size: clamp(2rem, 5vw, 2.9rem); line-height: 1.04; color: var(--text);
      margin-bottom: 18px;
    }
    .rfx-art-dek {
      font-size: 1.28rem; line-height: 1.5; color: var(--text-dim);
      font-weight: 400; margin-bottom: 26px; max-width: 40ch;
    }
    .rfx-byline {
      display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
      padding-bottom: 26px; border-bottom: 1px solid var(--border); margin-bottom: 30px;
    }
    .rfx-byline-mono {
      width: 34px; height: 34px; border-radius: 50%;
      background: var(--ink); color: var(--ink-text);
      display: inline-flex; align-items: center; justify-content: center;
      font-family: var(--font-display); font-weight: 800; font-size: .9rem;
    }
    body.dark .rfx-byline-mono { background: var(--paper); color: var(--ink); }
    .rfx-byline-who { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--text); }
    .rfx-byline-meta {
      display: flex; gap: 7px; align-items: center; margin-left: auto;
      font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-muted);
    }
    .rfx-byline-meta i { color: var(--border-strong); font-style: normal; }

    /* Short version card */
    .rfx-short {
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: var(--r-lg); padding: 22px 24px; margin-bottom: 34px;
    }
    .rfx-short-hd {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin-bottom: 14px;
    }
    .rfx-short ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
    .rfx-short li {
      position: relative; padding-left: 20px; font-size: .96rem; line-height: 1.55; color: var(--text-dim);
    }
    .rfx-short li::before {
      content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px;
      border-radius: 2px; background: var(--accent);
    }

    /* Prose — the reading experience */
    .rfx-prose { font-size: 1.14rem; line-height: 1.78; color: var(--text); }
    .rfx-prose p { margin-bottom: 22px; }
    .rfx-prose p:last-child { margin-bottom: 0; }
    .rfx-h {
      font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em;
      font-size: 1.42rem; line-height: 1.2; color: var(--text);
      margin: 40px 0 16px;
    }
    body.dark .rfx-prose { color: var(--text-dim); }

    /* Bottom line — the signature dark verdict block */
    .rfx-bottom {
      background: var(--ink); color: var(--ink-text);
      border-radius: var(--r-lg); padding: 26px 28px; margin: 40px 0 0;
      position: relative; overflow: hidden;
    }
    body.dark .rfx-bottom { background: #000; border: 1px solid var(--border); }
    .rfx-bottom::before {
      content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
      background: var(--rfx-spectrum);
    }
    .rfx-bottom-lbl {
      font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
      text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.55); margin-bottom: 12px;
    }
    .rfx-bottom-txt { font-size: 1.16rem; line-height: 1.6; font-weight: 500; }

    /* Tags */
    .rfx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }

    /* Waitlist CTA */
    .rfx-cta {
      margin-top: 44px; padding: 28px;
      background: var(--accent-dim); border: 1px solid rgba(37,99,235,.28);
      border-radius: var(--r-lg);
    }
    .rfx-cta-title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--text); margin-bottom: 7px; }
    .rfx-cta-sub { font-size: .94rem; line-height: 1.55; color: var(--text-dim); max-width: 52ch; margin-bottom: 18px; }
    .rfx-cta-form { display: flex; gap: 10px; flex-wrap: wrap; }
    .rfx-cta-form input[type=email] {
      flex: 1; min-width: 220px; font-family: var(--font); font-size: .95rem;
      padding: 12px 15px; border-radius: var(--r-sm);
      background: var(--surface); border: 1px solid var(--border); color: var(--text);
    }
    .rfx-cta-form input[type=email]:focus { outline: none; border-color: var(--accent); }
    .rfx-cta-form button {
      font-family: var(--font-display); font-weight: 700; font-size: .9rem; cursor: pointer;
      padding: 12px 22px; border-radius: var(--r-sm); border: 0;
      background: var(--accent); color: #fff; transition: filter .14s ease;
    }
    .rfx-cta-form button:hover { filter: brightness(1.06); }
    .rfx-cta-form button:disabled { opacity: .6; cursor: default; }
    .rfx-cta-msg { font-size: .86rem; margin-top: 12px; min-height: 1.1em; color: var(--text-dim); }
    .rfx-cta-msg.ok { color: var(--success); }
    .rfx-cta-msg.err { color: var(--danger); }

    @keyframes rfx-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { .rfx-feature, .rfx-art-inner { animation: none; } }

    /* Mobile */
    @media (max-width: 760px) {
      .rfx-mast-inner { padding: 28px 18px 6px; }
      .rfx-body { padding: 16px 18px 56px; }
      .rfx-reader-bar { padding: 14px 18px 0; }
      .rfx-art-inner { padding: 18px 18px 64px; }
      .rfx-feature-main { padding: 22px 20px 24px; }
      .rfx-prose { font-size: 1.08rem; line-height: 1.72; }
      .rfx-art-dek { font-size: 1.12rem; }
    }

  /* ── World Cup recap (post-tournament) ──
     Shown on Home and in the World Cup tab between the final and the new domestic
     season. Kept at the end of the stylesheet so these base rules sit after the big
     mobile @media blocks — each rule that needs a mobile variant carries its own
     query immediately below it. */
  .wcr-hero { display: flex; align-items: center; gap: 20px; background: linear-gradient(135deg, color-mix(in srgb, #f5c518 20%, var(--surface)), var(--surface) 70%); border: 1px solid var(--border); border-radius: 16px; padding: 20px 24px; }
  .wcr-hero-trophy { font-size: 2.8rem; line-height: 1; flex-shrink: 0; }
  .wcr-hero-flag { width: 58px; height: 58px; object-fit: contain; flex-shrink: 0; }
  .wcr-hero-main { flex: 1; min-width: 0; }
  .wcr-hero-lbl { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
  .wcr-hero-team { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; color: var(--text); margin: 2px 0 4px; }
  .wcr-hero-line { font-size: .8rem; color: var(--text-muted); line-height: 1.45; }
  .wcr-hero-score { font-family: var(--font-display); font-weight: 800; color: var(--text); }
  @media (max-width: 640px) {
    /* Wrap rather than stack: trophy + flag share the first row, the text block takes a
       full-width second row. Stacking all three put the name a long way down the card. */
    .wcr-hero { flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 18px; }
    .wcr-hero-main { flex-basis: 100%; }
    .wcr-hero-trophy { font-size: 2.2rem; }
    .wcr-hero-flag { width: 46px; height: 46px; }
    .wcr-hero-team { font-size: 1.35rem; }
  }

  .wcr-podium { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
  @media (max-width: 640px) { .wcr-podium { grid-template-columns: repeat(2, 1fr); } }
  .wcr-pod { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; text-align: center; }
  .wcr-pod.gold { border-color: color-mix(in srgb, #f5c518 55%, var(--border)); }
  .wcr-pod-pos { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
  .wcr-pod-flag { width: 34px; height: 34px; object-fit: contain; margin: 7px auto 5px; display: block; }
  .wcr-pod-team { font-family: var(--font-display); font-weight: 700; font-size: .84rem; color: var(--text); }

  .wcr-awards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 780px) { .wcr-awards { grid-template-columns: 1fr; } }
  .wcr-award { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
  .wcr-award-flag { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
  .wcr-award-main { flex: 1; min-width: 0; }
  .wcr-award-lbl { font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
  .wcr-award-name { font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wcr-award-meta { font-size: .72rem; color: var(--text-muted); }
  .wcr-award-val { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--accent); flex-shrink: 0; text-align: center; }
  .wcr-award-val span { display: block; font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }

  .wcr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  @media (max-width: 640px) { .wcr-stats { grid-template-columns: repeat(2, 1fr); } }
  .wcr-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px; text-align: center; }
  .wcr-stat-v { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--accent); }
  .wcr-stat-l { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-top: 2px; }

  .wcr-path-row { display: grid; grid-template-columns: 108px 1fr auto; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
  .wcr-path-round { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
  .wcr-path-opp { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .wcr-path-opp img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
  .wcr-path-opp span { font-size: .82rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wcr-path-score { font-family: var(--font-display); font-weight: 800; font-size: .88rem; color: var(--text); }
  .wcr-path-score small { font-weight: 700; font-size: .62rem; color: var(--text-muted); margin-left: 5px; }
  /* Narrower label column on mobile, but wide enough for the longest round name
     ("Quarterfinals") at a slightly reduced size — otherwise it clips mid-word. Must
     come after the .wcr-path-* base rules above, or equal specificity + source order
     lets the base font-size win inside the query. */
  @media (max-width: 640px) {
    .wcr-path-row { grid-template-columns: 96px 1fr auto; gap: 8px; }
    .wcr-path-round { font-size: .58rem; letter-spacing: .02em; }
  }

  .wcr-note { font-size: .72rem; color: var(--text-muted); margin-top: 10px; line-height: 1.45; }


/* ═══════════════════════════════════════════════════════════════════════
   v3 SHELL — fixed masthead + nav row. Appended last so it wins source
   order over every earlier sidebar-era rule (see the mobile CSS note in
   CLAUDE.md: later base rules beat earlier @media overrides).
   ═══════════════════════════════════════════════════════════════════════ */
#shell-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 640;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
body { padding-top: 98px; }

#masthead {
  height: 60px; display: flex; align-items: center; gap: 20px;
  padding: 0 20px; border-bottom: 1px solid var(--border);
}
#masthead .logo-mark { display: flex; align-items: center; gap: 9px; cursor: pointer; flex-shrink: 0; }
#masthead .logo-icon { color: var(--text); display: flex; }
#masthead .logo-name {
  font-family: var(--font-display); font-size: var(--fs-d5); font-weight: 800;
  letter-spacing: -.01em; color: var(--text); white-space: nowrap;
}
#masthead .theme-toggle-btn {
  position: static; width: 32px; height: 32px; margin: 0; flex-shrink: 0;
  border-radius: var(--r-sm); border: 1px solid transparent; background: none;
  color: var(--text-muted); display: grid; place-items: center; cursor: pointer;
  transition: background .12s, color .12s;
}
#masthead .theme-toggle-btn:hover { background: var(--surface3); color: var(--text); }

#ask-bridge {
  flex: 1; min-width: 0; max-width: 720px; margin: 0 auto; height: 40px;
  display: flex; align-items: center; gap: 9px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 0 14px; cursor: text; transition: border-color .15s, background .15s;
  color: var(--text-muted); font-family: var(--font); font-size: var(--fs-body);
}
#ask-bridge:hover { border-color: var(--border-strong); }
#ask-bridge .ab-spark { color: var(--accent); display: flex; flex-shrink: 0; }
#ask-bridge .ab-label { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ask-bridge .ab-kbd {
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted);
  background: var(--surface3); border: 1px solid var(--border); border-radius: 5px;
  padding: 2px 6px; flex-shrink: 0;
}

#navrow {
  height: 38px; display: flex; align-items: stretch; gap: 2px;
  padding: 0 14px; overflow-x: auto; scrollbar-width: none;
}
#navrow::-webkit-scrollbar { display: none; }
#navrow .nav-item {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; width: auto;
  margin: 0; border-radius: 0; height: auto;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 0 11px; cursor: pointer; transition: color .12s, border-color .12s;
  white-space: nowrap;
}
#navrow .nav-item:hover { color: var(--text-dim); background: none; }
#navrow .nav-item.active { color: var(--accent); border-bottom-color: var(--accent); background: none; }
#navrow .nav-badge {
  position: static; font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  background: var(--accent); color: #fff; border-radius: var(--r-pill); padding: 1px 6px;
}
#navrow .nav-pulse { position: static; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }

#orient {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
  min-width: 0; padding-left: 16px; flex-shrink: 1;
}
#orient #topbar-title {
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: 700;
  color: var(--text); white-space: nowrap;
}
#orient #topbar-desc {
  font-size: var(--fs-meta); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 1000px) { #orient #topbar-desc { display: none; } }
@media (max-width: 700px) {
  body { padding-top: 56px; }
  #masthead { height: 56px; gap: 10px; padding: 0 12px; }
  #masthead .logo-name { display: none; }
  #navrow { display: none; } /* mobile navigates via the bottom bar */
}

/* v3 mobile bar: four section tabs, Ask promoted to the centre FAB.
   (WC lives on via the Home recap band and #/wc deep links.) */
.mob-nav-fab {
  width: 46px; height: 46px; border-radius: 50%; border: none; flex: 0 0 auto;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  margin: -14px 6px 0; box-shadow: 0 4px 14px rgba(37,99,235,.4); cursor: pointer;
}
.mob-nav-fab:active { transform: scale(.96); }

/* ─── v3 ask bar: live input, subject token, suggestion sheet, spectrum ─── */
:root { --spectrum: linear-gradient(90deg,#2563EB 0%,#4f46e5 22%,#06b6d4 45%,#10b981 68%,#f59e0b 88%,#ef4444 100%); }
#askwrap { position: relative; flex: 1; min-width: 0; max-width: 720px; margin: 0 auto; }
#ask-bridge { width: 100%; cursor: text; position: relative; overflow: hidden; }
#ask-bridge input {
  flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: none;
  color: var(--text); font-family: var(--font); font-size: var(--fs-body); padding: 0;
}
#ask-bridge input::placeholder { color: var(--text-muted); }
#ask-bridge:focus-within { border-color: var(--accent); background: var(--surface); }
#ask-bridge .ab-kbd { cursor: pointer; }
#ask-bridge .ab-kbd:hover { color: var(--text); border-color: var(--border-strong); }
/* the refraction: streaming paints the spectrum across the bar's base */
#ask-bridge::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--spectrum); background-size: 200% 100%;
  transform: scaleX(0); transform-origin: left; transition: transform .2s;
  pointer-events: none;
}
#ask-bridge.thinking::after { transform: scaleX(1); animation: prism-beam 1.1s linear infinite; }
@keyframes prism-beam { to { background-position: -200% 0; } }
/* subject token: the open entity, carried as context */
#ask-subject {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: var(--fs-meta); font-weight: 600; color: var(--accent);
  background: var(--accent-soft); border-radius: var(--r-sm); padding: 3px 5px 3px 9px;
  white-space: nowrap; max-width: 200px;
}
#ask-subject b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
#ask-subject .asx {
  width: 15px; height: 15px; border-radius: 3px; display: grid; place-items: center;
  font-size: 12px; line-height: 1; opacity: .55; cursor: pointer;
}
#ask-subject .asx:hover { opacity: 1; background: rgba(37,99,235,.18); }
/* suggestion sheet */
#ask-sheet {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 660;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,.16); padding: 8px;
}
body.dark #ask-sheet { box-shadow: 0 12px 32px rgba(0,0,0,.5); }
.ask-sheet-lbl {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted);
  padding: 7px 10px 6px;
}
.ask-sheet-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  font-family: var(--font); font-size: var(--fs-body); color: var(--text-dim);
  background: none; border: none; border-radius: var(--r-sm); padding: 9px 10px;
  cursor: pointer; transition: background .1s, color .1s;
}
.ask-sheet-item:hover { background: var(--accent-dim); color: var(--text); }
.ask-sheet-item svg { color: var(--text-muted); flex-shrink: 0; }
.ask-sheet-item:hover svg { color: var(--accent); }
@media (max-width: 700px) {
  #ask-subject b { max-width: 70px; }
  #ask-sheet { position: fixed; top: 58px; left: 8px; right: 8px; }
}

/* ─── v3 HOME TERMINAL — dense panel grid (ported from the approved mockup) ─── */
.home-lede {
  padding: 18px 24px 6px; font-size: var(--fs-body); color: var(--text-muted);
  line-height: 1.55; max-width: 86ch;
}
.home-lede b { color: var(--text); font-weight: 700; }
#home-league-bands { display: none !important; }  /* superseded by #home-terminal */
#home-terminal { padding: 12px 16px 32px; }
.term-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 10px; grid-auto-rows: min-content; }
.term-panel {
  grid-column: span 4; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-sm); display: flex; flex-direction: column; overflow: hidden;
  min-width: 0;
}
.term-panel.wide { grid-column: span 6; }
.term-panel.w8 { grid-column: span 8; }
.term-panel.full { grid-column: span 12; }
@media (max-width: 1180px) {
  .term-panel { grid-column: span 6; }
  .term-panel.wide, .term-panel.w8, .term-panel.full { grid-column: span 12; }
}
@media (max-width: 720px) {
  .term-panel, .term-panel.wide, .term-panel.w8, .term-panel.full { grid-column: span 12; }
  #home-terminal { padding: 10px 10px 90px; }
}
.term-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid var(--border); background: var(--surface2);
}
.term-hd .t {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 6px;
}
.term-hd .t .lv { width: 5px; height: 5px; border-radius: 50%; background: var(--live); }
.term-hd .code {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px;
}
.term-note {
  padding: 5px 10px; font-size: 9px; color: var(--text-muted);
  border-bottom: 1px solid var(--border); background: var(--surface2); line-height: 1.45;
}
.term-cta {
  padding: 8px 10px; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .05em; text-transform: uppercase; color: var(--accent);
  text-align: center; cursor: pointer;
}
.term-cta:hover { background: var(--accent-dim); }
.trow {
  display: flex; align-items: center; gap: 8px; padding: 5px 10px;
  font-size: var(--fs-body-sm); border-bottom: 1px solid var(--border);
  cursor: pointer; transition: background .1s; min-width: 0;
}
.trow:last-child { border-bottom: none; }
.trow:hover { background: var(--accent-dim); }
.trow .rk { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); width: 13px; flex-shrink: 0; }
.trow .nm { flex: 1 1 auto; min-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .nm small { color: var(--text-muted); }
.trow .val { font-family: var(--font-mono); font-size: var(--fs-body-sm); font-weight: 500; flex-shrink: 0; }
.trow .php { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: top; background: var(--surface3); flex-shrink: 0; display: inline-block; }
.cri { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; vertical-align: middle; }
.tscore { font-family: var(--font-mono); font-size: var(--fs-body-sm); font-weight: 500; color: var(--accent); flex-shrink: 0; }
.tsub {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); padding: 7px 10px 3px; display: flex; align-items: center; gap: 6px;
}
.tform { display: inline-flex; gap: 3px; flex-shrink: 0; }
.tform i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.fW { background: var(--success); } .fD { background: var(--text-muted); } .fL { background: var(--danger); }
.term-fx {
  padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: var(--fs-body-sm);
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0;
}
.term-fx:last-child { border-bottom: none; }
.term-fx .tfx-teams { display: inline-flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; }
.term-fx .tfx-v { color: var(--text-muted); font-size: var(--text-xs); }
.term-fx .tm { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); flex-shrink: 0; }
.tk-tag {
  font-family: var(--font-mono); font-size: 8px; font-weight: 500; letter-spacing: .06em;
  padding: 1px 5px; border-radius: 3px; background: var(--surface3); color: var(--text-muted);
  flex-shrink: 0; text-transform: uppercase;
}
/* methodology strip */
.mspec { height: 2px; background: var(--spectrum); }
.method { display: flex; align-items: stretch; gap: 10px; padding: 13px 14px; flex-wrap: wrap; }
.method .mstep { flex: 1; min-width: 130px; }
.method .mstep b { font-family: var(--font-mono); font-size: var(--fs-body-sm); font-weight: 500; display: block; margin-bottom: 3px; color: var(--text); }
.method .mstep:last-child b { color: var(--accent); }
.method .mstep span { font-size: var(--fs-meta); color: var(--text-muted); line-height: 1.45; }
.method .marrow { align-self: center; color: var(--text-muted); font-family: var(--font-mono); flex-shrink: 0; }

/* ─── sub-nav unification: one chip grammar (doubled selectors beat the
   v2 base rules on specificity without !important) ─── */
.pvt-btn.pvt-btn, .wc-tab.wc-tab {
  background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  padding: 7px 11px 9px; box-shadow: none;
}
.pvt-btn.pvt-btn:hover, .wc-tab.wc-tab:hover { color: var(--text-dim); background: none; }
.pvt-btn.pvt-btn.active, .wc-tab.wc-tab.active {
  color: var(--accent); border-bottom-color: var(--accent); background: none;
}

/* board rows: position chip */
.trow .pos {
  font-family: var(--font-mono); font-size: 8px; font-weight: 500; letter-spacing: .04em;
  color: var(--text-muted); border: 1px solid var(--border); border-radius: 3px;
  padding: 1px 4px; flex-shrink: 0; width: 30px; text-align: center;
}
#home-board { padding: 12px 16px 0; }
#home-board + #home-terminal { padding-top: 0; }
/* The gameweek slot sits between the wires and the scout board; it owns the same
   gutters as its neighbours, and the board below it drops its own top padding so
   the two do not double up. */
#home-gameweek { padding: 12px 16px 0; }
#home-gameweek + #home-board { padding-top: 12px; }
@media (max-width: 720px) { #home-gameweek { padding: 10px 10px 0; } }
@media (max-width: 720px) { #home-board { padding: 10px 10px 0; } }

/* ─── v3 Leagues terminal ─── */
#leagues-terminal { padding: 14px 16px 32px; }
.lswitch { display: flex; align-items: center; gap: 2px; padding: 0 2px 10px; flex-wrap: wrap; }
.lswitch .ll, .clubstrip .ll {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); margin-right: 8px;
}
.lswitch .chip {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
  background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 7px 11px 9px; cursor: pointer; transition: color .12s, border-color .12s; white-space: nowrap;
}
.lswitch .chip:hover { color: var(--text-dim); }
.lswitch .chip.on { color: var(--accent); border-bottom-color: var(--accent); }
.clubstrip { display: flex; align-items: center; gap: 6px; padding: 0 2px 12px; flex-wrap: wrap; }
.cchip {
  width: 30px; height: 30px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); display: grid; place-items: center; cursor: pointer;
  transition: border-color .12s, transform .12s; padding: 0;
  font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);
}
.cchip img { width: 18px; height: 18px; object-fit: contain; }
.cchip:hover { border-color: var(--accent); transform: translateY(-1px); }
.cs-note { font-size: var(--text-xs); color: var(--text-muted); margin-left: 4px; }
.tlede { padding: 0 2px 12px; font-size: var(--fs-meta); color: var(--text-muted); line-height: 1.5; max-width: 80ch; }
.tlede b { color: var(--text-dim); font-weight: 600; }
.term-mini { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
.term-mini td { padding: 5px 10px; border-bottom: 1px solid var(--border); }
.term-mini tr:last-child td { border-bottom: none; }
.term-mini tr:hover td { background: var(--accent-dim); }
.term-mini td.n { text-align: right; font-family: var(--font-mono); }
.term-mini .pos { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); width: 18px; }
.tbar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-bottom: 1px solid var(--border); font-size: var(--fs-body-sm); }
.tbar:last-child { border-bottom: none; }
.tbar .bl { width: 116px; flex-shrink: 0; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbar .bt { flex: 1; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.tbar .bt i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.tbar .bv { font-family: var(--font-mono); font-size: var(--text-xs); width: 46px; text-align: right; color: var(--text); flex-shrink: 0; }
.trow .val.dn { color: var(--danger); }
@media (max-width: 720px) { #leagues-terminal { padding: 12px 10px 90px; } }

/* v3: team view is a drill-down from the league, so it carries a way back */
.ta-crumb { padding: 14px 16px 0; }
.ta-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font); font-size: var(--fs-meta); font-weight: 500;
  color: var(--text-muted); background: none; border: 1px solid var(--border);
  border-radius: var(--r-pill); padding: 5px 13px 5px 10px; cursor: pointer;
  transition: color .12s, border-color .12s;
}
.ta-back:hover { color: var(--accent); border-color: var(--accent); }

/* ─── v3 Team terminal ─── */
#team-terminal { padding: 14px 16px 0; }
.tt-head { display: flex; align-items: baseline; gap: 12px; padding: 0 2px 12px; flex-wrap: wrap; }
.tt-name { font-family: var(--font-display); font-size: var(--fs-d3); font-weight: 800; letter-spacing: -.02em; }
.tt-meta { font-size: var(--fs-meta); color: var(--text-muted); }
.tt-brief-lbl {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 22px 2px 6px; font-family: var(--font-mono); font-size: var(--fs-label);
  font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim);
}
.tt-brief-lbl span {
  font-family: var(--font); font-size: var(--fs-meta); font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--text-muted);
}
@media (max-width: 720px) { #team-terminal { padding: 12px 10px 0; } }

/* The AI brief is opt-in: opening clubs to compare squads must cost nothing. */
.tt-brief-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 2px 20px; }
.tt-brief-btn { font-size: var(--fs-btn); padding: 7px 16px; }
.tt-brief-note { font-size: var(--fs-meta); color: var(--text-muted); max-width: 62ch; line-height: 1.5; }

/* news items in the wire */
.ticker-news { cursor: pointer; }
.ticker-news strong { font-weight: 500; }
.ticker-item .tk-tag { margin-right: 2px; }
.tk-tag.news { background: var(--accent-dim); color: var(--accent); }

/* ─── v3 mobile bar refinement: quieter labels, lighter FAB, safe-area aware ─── */
#mobile-nav {
  padding: 4px 2px 0;
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  background: var(--surface);
  border-top: 1px solid var(--border);
  align-items: flex-end;
}
#mobile-nav .mob-nav-btn {
  gap: 4px; padding: 5px 0 7px;
  font-size: .56rem; font-weight: 500; letter-spacing: .04em;
  color: var(--text-muted);
}
#mobile-nav .mob-nav-btn svg { width: 18px; height: 18px; stroke-width: 1.9; }
#mobile-nav .mob-nav-btn.active { color: var(--accent); }
#mobile-nav .mob-nav-btn.active svg { stroke-width: 2.1; }
#mobile-nav .mob-nav-fab {
  width: 42px; height: 42px; margin: 0 8px 6px;
  box-shadow: 0 2px 10px rgba(37,99,235,.32);
}
#mobile-nav .mob-nav-fab svg { width: 18px; height: 18px; }
#mobile-nav .mob-nav-fab:active { transform: scale(.94); }

/* v3: the masthead ask bar + centre Ask FAB cover search on mobile, so the
   floating search FAB is a third redundant control (and it overlapped content). */
#mobile-search-fab { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   v3 sub-nav unification — level 3 (sub-views within a Scout mode).

   Hierarchy is now legible by grammar, not colour:
     level 1  screen nav      → underline chips (#navrow .nav-item)
     level 2  Scout mode      → underline chips (.sm-chip: Discover/Search/Shortlist/National Team Selection)
     level 3  sub-view toggle → the segmented control below

   Both Discover's Build Profile / AI Search and Shortlist's Search / List /
   Compare were bespoke (a loud blue segmented pill, and browser folder tabs).
   They become one quiet segmented control: a subtle track with a raised active
   segment. Appended at file end so it wins source order over the v2 rules.
   ═══════════════════════════════════════════════════════════════════════════ */
.pd-mode-row, #shortlist-subtabs {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 20px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--r-pill); width: auto; align-self: flex-start;
}
#shortlist-subtabs { margin: 14px 0 18px; }

.pd-mode-btn, .sl-pill {
  flex: 0 0 auto; width: auto; bottom: 0; position: static;
  font-family: var(--font); font-size: var(--fs-btn); font-weight: 500;
  letter-spacing: 0; color: var(--text-muted);
  background: none; border: none; border-radius: var(--r-pill);
  padding: 6px 16px; cursor: pointer; white-space: nowrap;
  transition: color .12s, background .12s, box-shadow .12s;
}
.pd-mode-btn:hover, .sl-pill:hover { background: none; color: var(--text-dim); }
.pd-mode-btn.active, .sl-pill.active {
  color: var(--accent); background: var(--surface); box-shadow: var(--shadow-card);
}
body.dark .pd-mode-btn.active, body.dark .sl-pill.active {
  background: var(--surface3); color: var(--accent); box-shadow: none;
}
@media (max-width: 720px) {
  .pd-mode-row, #shortlist-subtabs { display: flex; width: 100%; }
  .pd-mode-btn, .sl-pill { flex: 1; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   INVITE GATE — locked state
   `prism-locked` is put on <html> by the head script before first paint and
   removed only once /api/invite/verify passes. Everything except the logo and
   the invite card is blurred out and made inert, so an unverified visitor can
   see that The Prism exists and nothing else. Blur has to be applied per
   region rather than to a wrapper, because a child cannot undo an ancestor's
   filter — the logo has to sit outside every blurred box.
   ══════════════════════════════════════════════════════════════════════════ */
html.prism-locked, html.prism-locked body { overflow: hidden; }

html.prism-locked #main,
html.prism-locked #chat-rail,
html.prism-locked #navrow,
html.prism-locked #askwrap,
html.prism-locked #theme-toggle-btn,
html.prism-locked #mobile-nav,
html.prism-locked #mobile-chats-btn,
html.prism-locked #mobile-search-fab,
html.prism-locked #chat-drawer-backdrop {
  filter: blur(14px) saturate(0.55);
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}

/* The logo stays sharp, but is not a working link until the code is in. */
html.prism-locked #masthead-logo { pointer-events: none; }

/* Nothing else may open over the gate. */
html.prism-locked #cmdk-overlay,
html.prism-locked #report-modal { display: none; }

/* A locked page has no content to scroll to, so the masthead reads as a bare
   title bar rather than a stripped-down version of the real shell. */
html.prism-locked #shell-top { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  html.prism-locked #invite-card { animation: none; }
}

/* The gate has to sit above every other layer — #shell-top (640), the mobile
   FAB (3500) and the overlays (4000) all outrank the original z-index of 200. */
#invite-modal { z-index: 5000; }

/* While locked, the gate drops its own scrim and backdrop-filter: the overlay
   spans the viewport, so both would blur and dim the logo sitting behind it.
   The per-region blur above already separates the card from the page. */
html.prism-locked #invite-modal { background: transparent; backdrop-filter: none; }
html.prism-locked #invite-card { box-shadow: 0 24px 60px rgba(0,0,0,.35); }

/* On mobile the masthead normally drops the wordmark for space. On the gate the
   logo is the only thing on the page, so it keeps its name. */
@media (max-width: 720px) {
  html.prism-locked #masthead .logo-name { display: inline; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Feedback widget (Phase 4)
   Appended at the END so it outranks inherited v2 rules without !important.
   Base rules first, then the mobile media query — the source-order trap.
   ═══════════════════════════════════════════════════════════════════════════ */

#fb-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;              /* under the invite gate (which must win), over content */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface2);
  color: var(--text-dim);
  font: 600 12px/1 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .16);
  transition: color .15s, border-color .15s, transform .15s;
}
#fb-btn:hover  { color: var(--text); border-color: var(--teal); transform: translateY(-1px); }
#fb-btn:active { transform: translateY(0); }
#fb-btn svg    { flex: none; }

#fb-modal {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(3px);
}
#fb-modal.open { display: flex; }

#fb-card {
  width: 100%;
  max-width: 460px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
}
#fb-card h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.01em; }
#fb-card p  { margin: 0 0 14px; color: var(--text-dim); font-size: 13px; line-height: 1.5; }

#fb-rate { display: flex; gap: 6px; margin-bottom: 12px; }
.fb-star {
  flex: 1;
  padding: 7px 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  font: 600 12px/1 var(--font-mono);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.fb-star:hover  { border-color: var(--teal); color: var(--text); }
.fb-star.on     { background: var(--teal); border-color: var(--teal); color: #fff; }

#fb-body {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface2);
  color: var(--text);
  font: 400 14px/1.55 inherit;
  resize: vertical;
}
#fb-body:focus { outline: none; border-color: var(--teal); }

#fb-note {
  margin: 9px 0 16px;
  color: var(--text-dim);
  font-size: 11.5px;
  line-height: 1.45;
  opacity: .85;
}

#fb-actions { display: flex; justify-content: flex-end; gap: 9px; }
#fb-actions button {
  padding: 9px 17px;
  border-radius: 8px;
  font: 600 13px/1 inherit;
  cursor: pointer;
  transition: opacity .15s, border-color .15s;
}
#fb-cancel { border: 1px solid var(--border); background: transparent; color: var(--text-dim); }
#fb-cancel:hover { color: var(--text); border-color: var(--teal); }
#fb-send   { border: 1px solid var(--teal); background: var(--teal); color: #fff; }
#fb-send:hover     { opacity: .9; }
#fb-send:disabled  { opacity: .55; cursor: default; }

/* The gate blurs the shell; the feedback button must go with it. */
html.prism-locked #fb-btn { filter: blur(5px); pointer-events: none; opacity: .5; }

/* Mobile: clear the bottom nav bar, and shed the label so the pill does not
   crowd the ask FAB. Media query AFTER the base rules, per the source-order
   trap in CLAUDE.md. */
@media (max-width: 720px) {
  /* On mobile the feedback control moves INTO the masthead.
     Every screen's bottom edge is already occupied — the nav bar always, and on
     the chat screen the composer and its send button — so a floating
     bottom-right button collides with the primary action on the one screen
     where a tester is most likely to want to report something. The masthead is
     the only position that is free on all five screens, and it never covers
     content. The ask bar gives up ~34px to make room. */
  #askwrap { margin-right: 34px; }
  #fb-btn {
    top: 9px;
    bottom: auto;
    right: 46px;
    width: 38px;
    height: 38px;
    padding: 0;
    gap: 0;
    justify-content: center;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  #fb-btn:hover { transform: none; border-color: transparent; }
  #fb-btn span { display: none; }
  #fb-card { max-width: 100%; padding: 18px; }

  /* Comfortable touch targets. At desktop sizes these controls are fine at
     28-36px, but a rating row is a precision tap on a phone and 28px is where
     people start hitting the wrong number. */
  .fb-star            { padding: 15px 0; font-size: 13px; }
  #fb-actions button  { padding: 13px 20px; }
}

/* ── Terminal loading skeleton ──────────────────────────────────────────────
   Panel-shaped placeholder used by _v3TermSkeleton() while the Leagues
   terminal's fetches are in flight. It replaces the old behaviour where the
   legacy league picker flashed for the whole cold load. Row metrics match
   .trow / .trow .php so the layout does not shift when data lands. */
.term-skel .sk-row { padding: 6px 10px; }
.term-skel .sk-avatar { width: 22px; height: 22px; }
/* .term-hd shares --surface2 with .sk, so the title bar needs its own tint. */
.term-skel .term-hd .sk { background: color-mix(in srgb, var(--text) 11%, transparent); }

/* ── Home skeleton ────────────────────────────────────────────────────────
   Shaped like .term-panel so the real content swaps in without the layout
   jumping. Shown only on a first-ever visit — after that the stale-while-
   revalidate cache paints real data immediately. */
.sk-panel .term-hd { border-bottom: 1px solid var(--border); }
.sk-rows { padding: 4px 0; }
.sk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
}
.sk-row:last-child { border-bottom: 0; }
.sk-row .sk-line  { height: 10px; }
/* ══════════════════════════════════════════════════════════════════════════
   THE WINDOW — transfer wire, per-club panel and the verdict card
   Appended at the end of the sheet so these rules win source order over the
   inherited v2 components, per the v3 CSS convention in CLAUDE.md.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Screen chrome ── */
.mw-crumb {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 14px 0 0 20px; padding: 4px 10px 4px 6px;
  font-family: var(--font-mono); font-size: .7rem; color: var(--text-muted);
  border-radius: 5px; cursor: pointer; transition: color .15s, background .15s;
  align-self: flex-start;
}
.mw-crumb:hover { color: var(--text); background: var(--surface3); }
.mw-crumb-arrow { font-size: .8rem; }

.mw-head { padding: 10px 20px 0; }
.mw-title {
  font-size: 1.45rem; font-weight: 650; letter-spacing: -.02em;
  color: var(--text); margin-bottom: 6px;
}
.mw-lede {
  font-size: .82rem; line-height: 1.5; color: var(--text-dim);
  max-width: 62ch; margin-bottom: 16px;
}
.mw-controls {
  display: flex; flex-wrap: wrap; gap: 14px 24px;
  align-items: center; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.mw-filters, .mw-range { display: flex; flex-wrap: wrap; gap: 4px; }

/* L2 grammar: underline chips for the league cut. */
.mw-lg-btn {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .02em;
  padding: 5px 9px; background: none; border: none;
  border-bottom: 2px solid transparent; color: var(--text-muted);
  cursor: pointer; transition: color .15s, border-color .15s;
}
.mw-lg-btn:hover { color: var(--text); }
.mw-lg-btn.active { color: var(--text); border-bottom-color: var(--accent); }

/* L3 grammar: quiet segmented control for the range. */
.mw-range { background: var(--surface3); border-radius: 6px; padding: 2px; gap: 2px; }
.mw-range-btn {
  font-family: var(--font-mono); font-size: .68rem;
  padding: 4px 10px; border: none; background: none; border-radius: 4px;
  color: var(--text-muted); cursor: pointer; transition: background .15s, color .15s;
}
.mw-range-btn:hover { color: var(--text); }
.mw-range-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.mw-meta {
  font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted);
  padding: 10px 0 0;
}
.mw-body { padding: 4px 20px 40px; }
.mw-empty {
  padding: 32px 0; text-align: center;
  font-size: .82rem; color: var(--text-muted);
}

/* ── Day groups ── */
.mw-day { margin-top: 18px; }
.mw-day-label {
  font-family: var(--font-mono); font-size: .64rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
  padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}

/* ── A move ── */
.mv-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: 7px; cursor: pointer;
  transition: background .13s;
}
.mv-row:hover { background: var(--surface3); }
.mv-photo {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  object-fit: cover; background: var(--surface3);
}
.mv-crest { width: 14px; height: 14px; object-fit: contain; flex-shrink: 0; }
.mv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mv-name {
  font-size: .82rem; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mv-lg {
  font-family: var(--font-mono); font-size: 8px; font-weight: 500; letter-spacing: .06em;
  padding: 1px 4px; border-radius: 3px; background: var(--surface3);
  color: var(--text-muted); flex-shrink: 0;
}
.mv-move {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: .73rem; color: var(--text-dim);
}
.mv-arrow { color: var(--text-muted); }
.mv-unknown { font-style: italic; color: var(--text-muted); }
.mv-fee {
  font-family: var(--font-mono); font-size: .76rem; font-weight: 600;
  color: var(--text); flex-shrink: 0;
}

/* Move-type tags, reusing the .tk-tag base from the ticker. */
.tk-tag.mv-loan     { background: rgba(37,99,235,.14);  color: #2563EB; }
.tk-tag.mv-free     { background: rgba(16,185,129,.16); color: #059669; }
.tk-tag.mv-released { background: rgba(180,83,9,.16);   color: #b45309; }
body.dark .tk-tag.mv-loan     { background: rgba(59,130,246,.18); color: #60a5fa; }
body.dark .tk-tag.mv-free     { background: rgba(16,185,129,.18); color: #34d399; }
body.dark .tk-tag.mv-released { background: rgba(245,158,11,.16); color: #f59e0b; }

/* ── Home panel rows ── */
.trow.tmv { cursor: pointer; }
.tfee {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  color: var(--text); flex-shrink: 0; margin-left: auto;
}

/* ── The verdict card ── */
.mv-verdict {
  margin: 6px 0 14px; padding: 0 0 14px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; overflow: hidden;
  animation: mvIn .18s ease-out;
}
@keyframes mvIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.mv-verdict::before {
  content: ''; display: block; height: 2px; background: var(--spectrum);
}
.mv-v-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 14px 8px;
}
.mv-v-title { font-size: .92rem; font-weight: 650; color: var(--text); }
.mv-v-close {
  font-family: var(--font-mono); font-size: .66rem; color: var(--text-muted);
  background: none; border: none; cursor: pointer; padding: 3px 6px; border-radius: 4px;
}
.mv-v-close:hover { color: var(--text); background: var(--surface3); }
.mv-v-load, .mv-v-empty {
  padding: 16px 14px; font-size: .8rem; color: var(--text-muted); line-height: 1.55;
}
.mv-v-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border); margin: 0 14px; border-radius: 6px; overflow: hidden;
}
.mv-v-stat {
  background: var(--surface); padding: 9px 11px;
  display: flex; flex-direction: column; gap: 3px;
}
.mv-v-stat .k {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
}
.mv-v-stat .v { font-size: .86rem; font-weight: 600; color: var(--text); }
.mv-v-stat .v.mv-score { color: var(--accent); }
.mv-muted { color: var(--text-muted); font-weight: 500; }

.mv-v-impact { padding: 14px 14px 0; }
.mv-v-sub {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 7px;
}
.mv-v-slot { font-size: .82rem; line-height: 1.6; color: var(--text-dim); }
.mv-v-slot strong { color: var(--text); font-weight: 650; }
.mv-peers {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px;
}
.mv-peer {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 5px;
  background: var(--surface3); border: 1px solid var(--border);
  font-size: .72rem; color: var(--text-dim);
}
.mv-peer.below { opacity: .55; }
.mv-peer-score { font-family: var(--font-mono); font-weight: 600; color: var(--text); }
.mv-v-foot {
  margin: 14px 14px 0; padding-top: 11px; border-top: 1px solid var(--border);
  font-size: .72rem; color: var(--text-muted); line-height: 1.5;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
}
.mv-v-actions { display: flex; gap: 6px; }
.mv-v-btn {
  font-size: .7rem; padding: 4px 9px; cursor: pointer;
  background: var(--surface3); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 5px;
  font-family: var(--font); transition: background .15s, color .15s;
}
.mv-v-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Per-club transfers panel on the Team terminal ── */
.tt-transfers { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.tt-tcol-label {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  padding: 2px 10px 5px;
}
.tt-tnone { padding: 4px 10px 10px; font-size: .74rem; color: var(--text-muted); }

@media (max-width: 760px) {
  .mw-head, .mw-body { padding-left: 14px; padding-right: 14px; }
  .mw-crumb { margin-left: 14px; }
  .mw-title { font-size: 1.25rem; }
  .mw-controls { gap: 10px 14px; }
  .mv-v-stats { grid-template-columns: repeat(2, 1fr); }
  .tt-transfers { grid-template-columns: 1fr; gap: 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE WIRE — zone switcher, news zone, in-app reader, Home entry card
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Zone switcher (L2 grammar: underline chips, same as Scout modes) ── */
.wire-zones {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); margin-bottom: 2px;
}
.wire-zone-btn {
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .02em;
  padding: 8px 13px; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--text-muted); cursor: pointer; transition: color .15s, border-color .15s;
}
.wire-zone-btn:hover { color: var(--text); }
.wire-zone-btn.active { color: var(--text); border-bottom-color: var(--accent); }

/* Sub-header inside a zone carries the zone's own filters. */
.mw-head-sub { padding-top: 14px; }
.mw-head-sub .mw-controls { border-bottom: none; padding-bottom: 0; }

/* ── News zone ── */
.wn-body { padding: 4px 20px 40px; }
.wn-card {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 12px 8px; border-radius: 8px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .13s;
}
.wn-card:hover { background: var(--surface3); }
.wn-thumb {
  width: 108px; height: 68px; flex-shrink: 0;
  object-fit: cover; border-radius: 6px; background: var(--surface3);
}
.wn-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.wn-top { display: flex; align-items: center; gap: 7px; }
.wn-time {
  font-family: var(--font-mono); font-size: .64rem; color: var(--text-muted);
}
.wn-headline {
  font-size: .88rem; font-weight: 600; line-height: 1.35; color: var(--text);
}
.wn-desc {
  font-size: .77rem; line-height: 1.5; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wn-attrib {
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: .7rem; color: var(--text-muted); font-style: italic;
}

/* ── In-app news reader ── */
.wn-reader {
  margin: 8px 0 16px; padding: 0 0 14px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 9px; overflow: hidden;
  animation: mvIn .18s ease-out;
}
.wn-r-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 8px;
}
.wn-r-source {
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted);
  padding: 2px 7px; border: 1px solid var(--border); border-radius: 4px;
}
.wn-r-img {
  display: block; width: calc(100% - 28px); margin: 0 14px 12px;
  border-radius: 7px; max-height: 320px; object-fit: cover;
}
.wn-r-headline {
  padding: 0 14px; font-size: 1.05rem; font-weight: 650;
  line-height: 1.32; color: var(--text); margin-bottom: 8px;
}
.wn-r-desc {
  padding: 0 14px; font-size: .85rem; line-height: 1.62; color: var(--text-dim);
}
.wn-r-foot {
  margin: 14px 14px 0; padding-top: 11px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.wn-r-time { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); }
.wn-r-link {
  font-size: .74rem; font-weight: 600; text-decoration: none;
  padding: 6px 12px; border-radius: 6px;
  background: var(--accent); color: #fff;
  transition: opacity .15s;
}
.wn-r-link:hover { opacity: .88; }

/* ── Home entry card ── */
.wire-cta {
  margin: 16px 20px 0; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); overflow: hidden; cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  /* #home-panel is a flex column, so without this the card gets shrunk to a
     couple of pixels by the much taller band groups below it. */
  flex-shrink: 0;
}
.wire-cta:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.wire-cta:active { transform: translateY(1px); }
.wire-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wire-cta-spectrum { height: 3px; background: var(--spectrum); }
.wire-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 18px;
}
.wire-cta-main { min-width: 0; }
.wire-cta-title {
  font-size: 1rem; font-weight: 650; color: var(--text); margin-bottom: 3px;
}
.wire-cta-desc { font-size: .79rem; line-height: 1.5; color: var(--text-dim); }
.wire-cta-go {
  flex-shrink: 0; font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  color: var(--accent); display: flex; align-items: center; gap: 6px;
}
.wire-cta-arrow { transition: transform .15s; }
.wire-cta:hover .wire-cta-arrow { transform: translateX(3px); }

@media (max-width: 760px) {
  .wire-cta { margin: 12px 14px 0; }
  .wire-cta-inner { padding: 12px 14px; flex-direction: column; align-items: flex-start; gap: 9px; }
  .wn-body { padding-left: 14px; padding-right: 14px; }
  .wn-thumb { width: 84px; height: 56px; }
  .wn-headline { font-size: .82rem; }
  .wn-desc { -webkit-line-clamp: 3; }
  .wire-zone-btn { font-size: .72rem; padding: 8px 10px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Scout result cards on phones
   ─────────────────────────────────────────────────────────────────────────
   The card header is one flex row: rank, photo, name/meta, score, and three
   action buttons. The buttons don't shrink, so on a ~390px viewport they ate
   the whole row and the name column (flex:1, min-width:0) collapsed to a
   single ellipsised letter while the meta line wrapped one word per row. The
   actions now live in their own element so they can drop to a second line
   instead of squeezing the identity out of the card.
   ══════════════════════════════════════════════════════════════════════════ */
.pd-result-actions {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}

@media (max-width: 700px) {
  .pd-result-card-header { flex-wrap: wrap; row-gap: 10px; align-items: flex-start; }
  /* Identity keeps a real minimum so the name is always legible; the actions
     wrap below rather than compressing it. */
  .pd-result-info { flex: 1 1 auto; min-width: 120px; }
  .pd-result-name { font-size: .95rem; white-space: normal; }
  .pd-result-meta { line-height: 1.45; }
  .pd-result-photo { width: 38px; height: 38px; }
  .pd-result-score { margin-left: auto; align-self: center; }
  .pd-result-actions { flex-basis: 100%; justify-content: flex-end; gap: 6px; }
  .pd-result-actions .pd-result-sl,
  .pd-result-actions .dash-btn,
  .pd-result-actions .pd-btn { min-height: 34px; }
}

/* ── Masthead Chats control ────────────────────────────────────────────────────
   Desktop counterpart to the mobile ask FAB. The ask bar starts a question; this
   reaches the conversation you already had, which was otherwise unreachable on
   desktop once you navigated away from the chat screen (History and New live in
   the chat header, and the chat header is only on that screen).
   Mirrors the theme toggle's masthead treatment so the two read as a pair. */
#masthead .masthead-btn {
  position: static; width: 32px; height: 32px; margin: 0; flex-shrink: 0;
  border-radius: var(--r-sm); border: 1px solid transparent; background: none;
  color: var(--text-muted); display: grid; place-items: center; cursor: pointer;
  transition: background .12s, color .12s;
}
#masthead .masthead-btn:hover { background: var(--surface3); color: var(--text); }
#masthead .masthead-btn.active { color: var(--accent); }

/* Mobile already has both halves of this: the centre ask FAB and the chats
   drawer button, so the masthead copy would be a third way to the same place. */
@media (max-width: 700px) { #masthead .masthead-btn { display: none; } }

/* Widens the existing 640px short-label swap: the modebar carries four chips
   now (Discover · Search · Shortlist · Squads), so "National Team Selection"
   already wraps to two lines and doubles the bar's height by ~700px, not 640. */
@media (max-width: 700px) {
  .sm-chip-long  { display: none; }
  .sm-chip-short { display: inline; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Mobile pass — nested scrollers and overflowing sub-navs
   ══════════════════════════════════════════════════════════════════════════ */

/* The stat library is capped at 380px so it sits beside the priorities column
   on desktop. Once the grid collapses to one column that cap becomes a scroll
   trap: a swipe that starts inside the library pans the library, not the page.
   Let it flow with the page on phones. */
@media (max-width: 700px) {
  .pcb-left { max-height: none; overflow-y: visible; }
}

/* The World Cup sub-nav is a fixed flex row of 5 tabs plus a timestamp, which
   runs off the right edge of a phone and clips the last tab. Let the tabs pan
   horizontally and drop the timestamp, which is the least useful thing there. */
@media (max-width: 700px) {
  .wc-subnav {
    padding: 10px 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .wc-subnav::-webkit-scrollbar { display: none; }
  .wc-tab { flex: 0 0 auto; padding: 7px 11px; font-size: .78rem; }
  .wc-refresh-note { display: none; }
  .wc-content { padding: 14px 14px 24px; }
}

/* Terminal panels clip their overflow so the rounded corners hold, which on a
   phone silently cut the last column off the league table (PPG was unreachable
   at 360px — no scrollbar, no way to pan to it). Tighten the cells first so the
   table usually fits, and let the panel pan horizontally when it still doesn't. */
@media (max-width: 720px) {
  .term-panel { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .term-panel::-webkit-scrollbar { height: 3px; }
  .term-panel::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
  .term-mini td { padding: 5px 6px; }
  .term-mini td.n { padding-left: 4px; padding-right: 6px; }
}

/* ─── World Cup sub-nav: stop the flex column from crushing it ───────────────
   #worldcup-panel is a flex column, so the sub-nav is a flex item sitting above
   a very tall content block. With the default flex-shrink:1 it was compressed
   from ~50px to 21px on a phone — the tabs' own vertical padding collapsed and
   the row read as a squeezed strip welded to the masthead above it. Same trap
   the .wire-cta card and the mobile ::after spacers already guard against. */
.wc-subnav { flex-shrink: 0; }

/* The masthead is fixed, so the sticky sub-nav has nothing above it to separate
   the two rows. Give the tabs their own vertical room and a hairline of space. */
@media (max-width: 700px) {
  /* 4px here + the tab's own 10px lands the first label on the same 14px gutter
     as .wc-content below it, so the tabs read as a header for the page, not a
     separate inset strip. */
  .wc-subnav { gap: 2px; padding: 6px 4px 0; }
  .wc-tab.wc-tab { padding: 9px 10px 10px; font-size: var(--fs-label); }
}

/* ─── World Cup recap entry card on Home ───────────────────────────────────
   The phone nav has no World Cup button, so this card is the way into the
   section. It reuses the .wire-cta chrome and only re-does its box placement,
   since it sits inside a home-section rather than between band groups. */
.wcr-cta.wcr-cta { margin: 14px 0 0; }
@media (max-width: 760px) {
  .wcr-cta.wcr-cta { margin: 12px 0 0; }
}

/* ── Season preview ────────────────────────────────────────────────────────
   The between-seasons lead on Home: opening fixtures per league, laid out as a
   day-grouped match grid. Base rules first, media queries after, per the
   source-order rule that governs this file. */
.sp-league { margin: 0 0 22px; }
.sp-league:last-child { margin-bottom: 0; }

.sp-hd {
  display: flex; align-items: center; gap: 9px;
  padding: 0 0 9px; margin: 0 0 11px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.sp-hd .sp-crest { width: 21px; height: 21px; }
.sp-name {
  font-weight: 650; font-size: 14px; letter-spacing: -0.01em;
  color: var(--text);
}
.sp-round {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-dim); padding: 2px 7px;
  border: 1px solid var(--border); border-radius: 4px;
}
.sp-season {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px; color: var(--text-dim); opacity: .75;
}
/* Countdown sits hard right and states a fact. Nothing here urges an action. */
.sp-when {
  margin-left: auto;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-dim);
}
.sp-when.sp-soon { color: var(--accent, #2563eb); }
.sp-when.sp-live { color: #16a34a; }

.sp-day { margin: 0 0 10px; }
.sp-day:last-child { margin-bottom: 0; }
.sp-day-label {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-dim); margin: 0 0 6px;
}
.sp-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}

.sp-match {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 9px 11px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--panel, transparent);
  transition: border-color .15s ease;
}
.sp-match:hover { border-color: var(--border-strong, var(--text-dim)); }
/* Teams and kick-off stay on one row; absences hang underneath. */
.sp-main { display: flex; align-items: center; gap: 10px; }
.sp-teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.sp-side { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sp-crest { width: 17px; height: 17px; object-fit: contain; flex-shrink: 0; }
.sp-team {
  font-size: 12.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* A finished match dims the losing side only through the score, never the name:
   the fixture still reads as a fixture. */
.sp-goals {
  margin-left: auto; padding-left: 8px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px; font-weight: 650; color: var(--text);
}
.sp-meta { flex-shrink: 0; text-align: right; }
.sp-time, .sp-state {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px; color: var(--text-dim);
}
.sp-state { font-size: 10.5px; letter-spacing: 0.05em; }

/* Chevron affordance. The card opens a drawer and nothing else on it says so. */
.sp-go { flex-shrink: 0; margin-left: 2px; color: var(--text-dim); opacity: .45; font-size: 15px; line-height: 1; }
.sp-match:hover .sp-go { opacity: .8; }

@media (max-width: 760px) {
  .sp-grid { grid-template-columns: 1fr; gap: 7px; }
  .sp-hd { gap: 7px; padding-bottom: 8px; margin-bottom: 9px; }
  .sp-name { font-size: 13px; }
  .sp-season { display: none; }   /* the round chip already carries the context */
  .sp-when { font-size: 10px; }
  .sp-match { padding: 8px 10px; }
  .sp-team { font-size: 12px; }
}

/* The WC recap pointer under the season preview. Reads as an archive link, not a
   promoted card: the tournament is over and should not compete with the fixtures. */
.season-archive {
  margin: 16px 0 0; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.season-archive span[role="link"] {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-dim); cursor: pointer;
}
.season-archive span[role="link"]:hover { color: var(--text); }
.season-archive .sa-arrow { font-family: inherit; }

/* ── Match detail drawer (.mx-*) ───────────────────────────────────────────
   Mirrors the player-report overlay so the two drill-downs feel like one app. */
#mx-overlay {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(0,0,0,.5);
  display: none; align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
  backdrop-filter: blur(2px);
}
#mx-overlay.open { display: flex; }
#mx-modal {
  position: relative; width: 100%; max-width: 640px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: 0 20px 60px rgba(0,0,0,.28);
  overflow: hidden;
}
#mx-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface2);
  color: var(--text-muted); cursor: pointer; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
}
#mx-close:hover { background: var(--surface3); color: var(--text); }
.mx-load, .mx-empty { padding: 22px; }
.mx-empty, .mx-none { color: var(--text-dim); font-size: 12.5px; }

.mx-head { padding: 20px 20px 16px; border-bottom: 1px solid var(--border); }
.mx-meta {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 12px;
}
.mx-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.mx-team { display: flex; align-items: center; gap: 9px; min-width: 0; }
.mx-team span { font-size: 14px; font-weight: 600; color: var(--text); }
/* The away side mirrors so both teams read outward from the score. */
.mx-away { flex-direction: row-reverse; text-align: right; }
.mx-crest { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.mx-centre { text-align: center; min-width: 76px; }
.mx-score {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 24px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.mx-score span { opacity: .35; font-weight: 400; }
.mx-ko { font-family: var(--mono, ui-monospace, monospace); font-size: 19px; color: var(--text); }
.mx-state {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: .08em; color: var(--text-dim); margin-top: 3px;
}
.mx-sub { margin-top: 12px; font-size: 11.5px; color: var(--text-dim); }

.mx-body-inner { padding: 4px 20px 20px; }
.mx-sect { padding: 16px 0; border-bottom: 1px solid var(--border); }
.mx-sect:last-child { border-bottom: 0; padding-bottom: 4px; }
.mx-sect-hd {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text);
}
.mx-sect-note { text-transform: none; letter-spacing: 0; color: var(--text-dim); font-size: 10.5px; }

.mx-out-block { margin-bottom: 12px; }
.mx-out-block:last-child { margin-bottom: 0; }
.mx-out-team {
  display: flex; align-items: center; gap: 7px; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; color: var(--text);
}
.mx-out-team .mx-crest { width: 16px; height: 16px; }
.mx-out-n {
  font-family: var(--mono, ui-monospace, monospace); font-size: 10px;
  color: var(--text-dim); border: 1px solid var(--border);
  border-radius: 3px; padding: 0 4px; margin-left: 2px;
}
.mx-out-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
  align-items: baseline; padding: 3px 0; font-size: 12px;
}
.mx-out-name { color: var(--text); }
.mx-out-reason { color: var(--text-dim); font-size: 11px; }
.mx-out-reason.mx-ban { color: #b45309; }
.mx-out-until {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px; color: var(--text-dim); opacity: .8; white-space: nowrap;
}

.mx-form-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 12px; }
.mx-form-team { flex: 1; min-width: 0; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-form-pills { display: flex; gap: 3px; }
.mx-pill {
  width: 17px; height: 17px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px; font-weight: 600;
  color: #fff;
}
.mx-w { background: #16a34a; } .mx-d { background: #a3a3a3; } .mx-l { background: #dc2626; }
.mx-form-pos {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10px; color: var(--text-dim); white-space: nowrap; min-width: 62px; text-align: right;
}

.mx-h2h-row {
  display: grid; grid-template-columns: 74px 1fr auto 1fr; gap: 8px;
  align-items: baseline; padding: 4px 0; font-size: 12px;
}
.mx-h2h-date { font-family: var(--mono, ui-monospace, monospace); font-size: 10px; color: var(--text-dim); }
.mx-h2h-tm { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-h2h-away { text-align: right; }
.mx-h2h-sc { font-family: var(--mono, ui-monospace, monospace); font-weight: 650; color: var(--text); }

.mx-ev-row { display: grid; grid-template-columns: 34px auto 1fr; gap: 9px; align-items: baseline; padding: 3px 0; font-size: 12px; }
.mx-ev-min { font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px; color: var(--text-dim); }
.mx-ev-type {
  font-family: var(--mono, ui-monospace, monospace); font-size: 9.5px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--text-dim);
}
.mx-ev-goal, .mx-ev-penalty { color: #16a34a; }
.mx-ev-redcard { color: #dc2626; }
.mx-ev-yellowcard { color: #ca8a04; }
.mx-ev-pl { color: var(--text); }

/* The fixture card is now a control. */
.sp-match { cursor: pointer; }
.sp-match:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }

body.dark .mx-out-reason.mx-ban { color: #fbbf24; }
body.dark .mx-ev-yellowcard { color: #fbbf24; }

@media (max-width: 760px) {
  #mx-overlay { padding: 0; }
  #mx-modal { max-width: 100%; min-height: 100%; border: 0; border-radius: 0; }
  .mx-head { padding: 18px 16px 14px; }
  .mx-body-inner { padding: 4px 16px 24px; }
  .mx-team span { font-size: 13px; }
  .mx-crest { width: 26px; height: 26px; }
  .mx-out-row { grid-template-columns: 1fr auto; }
  .mx-out-until { display: none; }
  .mx-h2h-row { grid-template-columns: 62px 1fr auto 1fr; gap: 6px; font-size: 11.5px; }
  .mx-form-pos { min-width: 0; }
}

/* ── Home market + news panels (.hw-*) ─────────────────────────────────────
   The readable counterpart to the ticker. Uses the terminal panel chrome so it
   sits in the same grammar as the scout board directly below it. */
#home-wire-panels { margin: 0 0 4px; }
.hw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* .term-panel carries `grid-column: span 4` for the terminal's four-column
   grid. Left alone it makes each panel span this two-column grid as well, so
   the pair stacks instead of sitting side by side. */
.hw-grid > .term-panel { grid-column: auto; }
.hw-grid.hw-solo { grid-template-columns: 1fr; }

.hw-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; cursor: pointer;
  border-top: 1px solid var(--border);
  transition: background .12s ease;
}
.hw-row:first-child { border-top: 0; }
.hw-row:hover { background: var(--surface2, rgba(0,0,0,.03)); }
.hw-row:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: -2px; }

.hw-face, .hw-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0; background: var(--surface2);
}
.hw-thumb { border-radius: 5px; width: 42px; height: 30px; }
.hw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hw-name, .hw-head {
  font-size: 12.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hw-head { white-space: normal; line-height: 1.3; }
.hw-move {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 10.5px; color: var(--text-dim);
}
.hw-move span {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%;
}
.hw-club { width: 13px; height: 13px; object-fit: contain; flex-shrink: 0; }
.hw-arrow { opacity: .5; flex-shrink: 0; }
.hw-fee {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px; font-weight: 650; color: var(--text); flex-shrink: 0;
}
.hw-sub { display: flex; gap: 5px; align-items: center; }
.hw-lg {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: .06em; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 3px; padding: 0 4px;
}

@media (max-width: 900px) {
  .hw-grid { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 760px) {
  .hw-row { padding: 7px 10px; gap: 9px; }
  .hw-name, .hw-head { font-size: 12px; }
}

/* ── Gameweek fixtures (Home terminal panel + league band) ──────────────────
   Results and upcoming matches share one round, so the two states have to be
   tellable apart at a glance: a played row carries a mono score in full-strength
   text, an unplayed row a muted kick-off. Appended at the end of the file so
   these win over the inherited v2 rules by source order, per the file's rule. */
.tsub-md {
  font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-size: 9px; letter-spacing: .06em; color: var(--text-dim, var(--text-muted));
  border: 1px solid var(--border); border-radius: 3px; padding: 0 4px; text-transform: none;
}
.tsub-meta { margin-left: auto; color: var(--text-muted); text-transform: none; letter-spacing: .04em; }
.term-fx.fx-done .tfx-teams { color: var(--text); }
.term-fx .tfx-score {
  font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-weight: 700; color: var(--text); letter-spacing: .5px;
}
.term-fx .tfx-live {
  margin-left: 6px; font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-size: 8px; font-weight: 700; letter-spacing: .07em; color: var(--danger);
}
.term-fx .tfx-off { color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; }
.tfx-more {
  padding: 5px 10px 7px; font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-size: 9px; letter-spacing: .05em; color: var(--text-muted);
}
.uf-split {
  font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-size: 9px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); padding: 8px 10px 4px;
}
.uf-round-meta {
  font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-size: 9px; letter-spacing: .05em; color: var(--text-muted); margin-left: 8px;
}
.uf-fixture-row.uf-done .uf-team span { color: var(--text); font-weight: 500; }
.uf-live {
  font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-size: .62rem; font-weight: 700; letter-spacing: .07em; color: var(--danger);
}
/* Five leagues side by side inside the full-width gameweek panel. Columns rather
   than one tall list: the whole matchday should be readable without scrolling. */
.gw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* One strip per league once there is room for all five. With auto-fit alone the
   fifth wraps under the first, which leaves the busiest league in a column twice
   the height of its neighbours. */
@media (min-width: 1180px) { .gw-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gw-league { min-width: 0; border-right: 1px solid var(--border); }
.gw-league:last-child { border-right: none; }
.gw-league .term-fx:last-child { border-bottom: none; }
@media (max-width: 760px) {
  .gw-league { border-right: none; border-bottom: 1px solid var(--border); }
  .gw-league:last-child { border-bottom: none; }
}
/* Inside the five-column gameweek panel each fixture stacks: home over away, with
   the score or kick-off on the right. Side by side, a 250px column clipped long
   club names mid-word. Elsewhere .term-fx keeps its original single-line form. */
.gw-league .term-fx { align-items: center; gap: 6px; }
.gw-league .term-fx .tfx-teams { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; flex: 1 1 auto; }
.gw-league .term-fx .tfx-t { display: flex; align-items: center; gap: 5px; min-width: 0; }
.gw-league .term-fx .tfx-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gw-league .term-fx .tfx-v { display: none; }
.gw-league .term-fx .tm { text-align: right; }
/* Round header inside a league strip. Home shows whole rounds, so each matchday
   in a league gets its own labelled block. */
.gw-round {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 7px 10px 4px; border-top: 1px solid var(--border);
  font-family: var(--font-mono, var(--mono, ui-monospace, monospace));
  font-size: 9px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted);
}
.gw-league > .gw-round:first-of-type { border-top: none; }
.gw-round .tsub-meta { margin-left: 0; }
.tfx-when { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; text-align: right; line-height: 1.35; }
.tfx-when .t { color: var(--text-muted); }

/* ── Match momentum chart (.mx-tr-*) ───────────────────────────────────────
   Home reads above the axis, away below. Two colours only, and the fills stay
   light so the lines carry the shape. */
.mx-trend-pills { display: flex; gap: 5px; flex-wrap: wrap; margin: 0 0 10px; }
.mx-pill-btn {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim);
  transition: color .12s, border-color .12s;
}
.mx-pill-btn:hover { color: var(--text); }
.mx-pill-btn.active { color: var(--text); border-color: var(--text-dim); }

.mx-tr-svg { width: 100%; height: 150px; display: block; overflow: visible; }
.mx-tr-axis { stroke: var(--border); stroke-width: 1; }
.mx-tr-grid { stroke: var(--border); stroke-width: 1; opacity: .45; }
.mx-tr-tick {
  fill: var(--text-dim); font-size: 8px; text-anchor: middle;
  font-family: var(--mono, ui-monospace, monospace); opacity: .7;
}
.mx-tr-line { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.mx-tr-area { stroke: none; }
.mx-tr-line.mx-tr-home { stroke: #2563eb; }
.mx-tr-area.mx-tr-home { fill: #2563eb; opacity: .16; }
.mx-tr-line.mx-tr-away { stroke: #f59e0b; }
.mx-tr-area.mx-tr-away { fill: #f59e0b; opacity: .18; }

.mx-tr-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 6px;
}
.mx-tr-k {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px; font-weight: 650;
}
.mx-tr-k.mx-tr-home { color: #2563eb; }
.mx-tr-k.mx-tr-away { color: #b45309; }
.mx-tr-name { font-size: 10.5px; color: var(--text-dim); }

body.dark .mx-tr-k.mx-tr-away { color: #fbbf24; }
body.dark .mx-tr-line.mx-tr-away { stroke: #fbbf24; }
body.dark .mx-tr-area.mx-tr-away { fill: #fbbf24; }

@media (max-width: 760px) {
  .mx-tr-svg { height: 128px; }
  .mx-pill-btn { font-size: 9px; padding: 3px 6px; }
}

/* A gameweek row that carries a fixture id opens the match drawer. */
.term-fx.fx-open { cursor: pointer; }
.term-fx.fx-open:hover { background: var(--surface2, rgba(0,0,0,.03)); }
.term-fx.fx-open:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: -2px; }

/* ── The Wire entry card zones (.wcz) ──────────────────────────────────────
   Three routes across the card. Each is its own link, so a reader who wants
   the news does not land on transfers and have to switch. */
.wire-cta-zones {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 10px;
}
.wcz {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 11px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 7px;
  transition: border-color .15s ease, background .15s ease;
}
.wcz:hover { border-color: var(--border-strong, var(--text-dim)); background: var(--surface2, rgba(0,0,0,.02)); }
.wcz:focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; }
.wcz-k {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-dim);
}
.wcz-v {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 17px; font-weight: 650; line-height: 1.2; color: var(--text);
}
.wcz-s { font-size: 10.5px; color: var(--text-dim); line-height: 1.3; }

@media (max-width: 760px) {
  .wire-cta-zones { grid-template-columns: 1fr; gap: 6px; margin-top: 9px; }
  .wcz { flex-direction: row; align-items: baseline; gap: 8px; padding: 7px 10px; }
  .wcz-k { min-width: 72px; }
  .wcz-v { font-size: 14px; }
  .wcz-s { margin-left: auto; text-align: right; }
}

/* The zones need the full width of the card. .wire-cta-main sits at its natural
   width, which left the three cells bunched against the left edge with dead
   space before "Open". */
.wire-cta-main:has(.wire-cta-zones) { flex: 1; }

/* A live row earns a marker on a matchday of twenty. The clock in .tfx-live is
   the real signal; this just makes the row findable while scanning. */
.term-fx.fx-live { border-left: 2px solid var(--danger); padding-left: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Indexes — the tester's own panels, and the builder that makes them.
   Appended at the END of the file on purpose: v3 rules must outrank the
   inherited v2 ones by source order rather than by !important.
   ═══════════════════════════════════════════════════════════════════════════ */

/* A panel the user made, marked by a spectrum edge rather than a badge: it reads
   as theirs at a glance without adding another label to a dense grid. */
.term-panel.ix-panel {
  border-left: 2px solid var(--accent);
}
.term-panel.ix-panel .term-hd .t { color: var(--text); }
.term-hd .code.ix-code { cursor: pointer; }
.term-hd .code.ix-code:hover { color: var(--accent); border-color: var(--accent); }
/* Column labels. Right-aligned to sit over the numbers, and the score label
   carries the accent its own column uses so the two are unmistakably paired. */
.ix-cols {
  display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 4px 10px 5px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; border-bottom: 1px solid var(--border);
}
.ix-col-s { color: var(--accent); }
.ix-col-v { color: var(--text-muted); }
.ix-col-ok { color: var(--success); }

/* A result from a matchday that is still weeks away. Set apart from the round
   above it so it never reads as part of the current matchday. */
.gw-round.gw-early { border-top: 1px solid var(--border); }
.gw-round.gw-early .tsub-md { opacity: .75; }
.gw-round.gw-early .tsub-meta { color: var(--text-muted); font-style: italic; }
/* The strip sits under a sub-heading inside a panel that already has a note, so
   it must not add a second heavy rule across the panel. */
.tsub + .ix-cols { border-bottom-color: var(--border); padding-top: 2px; }

.ix-empty {
  padding: 12px 10px; font-size: var(--fs-body-sm); color: var(--text-muted); line-height: 1.5;
}
.ix-hd-r { display: inline-flex; align-items: center; gap: 6px; }
.ix-edit {
  padding: 1px 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted); background: none;
  border: 1px solid var(--border); border-radius: 3px; cursor: pointer;
}
.ix-edit:hover { color: var(--accent); border-color: var(--accent); }
.term-panel.ix-panel .term-hd .code { color: var(--accent); border-color: var(--accent); }

/* First run. Full width and leading the grid, because an invitation that sits
   under nine editorial panels is not an invitation. */
.ix-intro { border-left: 2px solid var(--accent); }
.ix-intro-b { padding: 12px 14px 14px; }
.ix-intro-p {
  margin: 0 0 12px; max-width: 68ch; font-size: var(--fs-body-sm);
  line-height: 1.55; color: var(--text-dim);
}
.ix-intro-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ix-intro-go {
  padding: 8px 16px; font-size: 13px; font-family: inherit; cursor: pointer;
  color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 8px;
}
.ix-intro-go:hover { opacity: .9; }
.ix-intro-or { font-size: 12px; color: var(--text-muted); }
.ix-starters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ix-starter {
  padding: 6px 11px; font-size: 12px; font-family: inherit; cursor: pointer; text-align: left;
  color: var(--text-dim); background: var(--surface2);
  border: 1px solid var(--border); border-radius: 999px;
}
.ix-starter:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

/* The standing "one more" tile, at the end of the tester's own panels. */
.term-panel.ix-new {
  border-style: dashed; background: none; cursor: pointer;
  align-items: center; justify-content: center;
  /* Sit at the top of the grid cell rather than stretching to match the height
     of the index beside it, which turns a prompt into a large empty box. */
  align-self: start;
}
.term-panel.ix-new:hover { border-color: var(--accent); background: var(--accent-dim); }
.ix-new-in { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 18px 14px; text-align: center; }
.ix-new-plus { font-size: 22px; line-height: 1; color: var(--accent); }
.ix-new-t { font-size: var(--fs-body-sm); color: var(--text); }
.ix-new-s { font-size: 11px; color: var(--text-muted); max-width: 22ch; line-height: 1.4; }

/* ── Builder ─────────────────────────────────────────────────────────────── */
#ix-modal {
  position: fixed; inset: 0; z-index: 960; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0, 0, 0, .45); backdrop-filter: blur(3px);
}
#ix-modal.open { display: flex; }

#ix-card {
  width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto;
  padding: 20px 22px 18px;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
}
#ix-head { display: flex; align-items: center; justify-content: space-between; }
#ix-card h3 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
#ix-close {
  background: none; border: 0; font-size: 22px; line-height: 1;
  color: var(--text-muted); cursor: pointer; padding: 0 2px;
}
#ix-close:hover { color: var(--text); }
#ix-lede { margin: 6px 0 16px; color: var(--text-dim); font-size: 13px; line-height: 1.5; }

.ix-lbl {
  display: block; margin: 14px 0 6px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted);
}
#ix-card input[type="text"], #ix-card input[type="number"], #ix-card select {
  width: 100%; padding: 8px 10px; font-size: 13px; font-family: inherit;
  color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px;
}
#ix-card input:focus, #ix-card select:focus { outline: none; border-color: var(--accent); }

#ix-sayrow { display: flex; gap: 8px; }
#ix-sayrow input { flex: 1; min-width: 0; }
#ix-say-go {
  flex: 0 0 auto; padding: 8px 12px; font-size: 12px; cursor: pointer;
  color: var(--accent); background: var(--accent-dim);
  border: 1px solid var(--border); border-radius: 8px;
}
#ix-say-go:disabled { opacity: .6; cursor: default; }
#ix-say-note, .ix-hint {
  margin-top: 6px; font-size: 11px; color: var(--text-muted); line-height: 1.45;
}

.ix-sep { height: 1px; margin: 16px 0 2px; background: var(--border); }
.ix-row { display: flex; align-items: center; gap: 8px; }
.ix-row input { flex: 1; min-width: 0; }
.ix-to { font-size: 12px; color: var(--text-muted); }

.ix-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ix-chip {
  padding: 5px 10px; font-size: 12px; cursor: pointer;
  color: var(--text-dim); background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px;
}
.ix-chip:hover { color: var(--text); }
.ix-chip.on { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }

#ix-more {
  display: block; margin: 14px 0 0; padding: 0; font-size: 12px;
  color: var(--accent); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
#ix-more-body { display: none; margin-top: 10px; }
.ix-ord {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 6px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.ix-ord-n {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
  width: 14px; flex: 0 0 auto;
}
.ix-ord-l { flex: 1; min-width: 0; font-size: 13px; }
.ix-ord button {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0; font-size: 12px; line-height: 1;
  color: var(--text-dim); background: none; border: 1px solid var(--border);
  border-radius: 5px; cursor: pointer;
}
.ix-ord button:hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
.ix-ord button:disabled { opacity: .3; cursor: default; }

#ix-rule {
  padding: 10px 12px; margin-top: 4px; font-size: 13px; line-height: 1.5;
  color: var(--text); background: var(--surface2);
  border: 1px solid var(--border); border-radius: 8px;
}
#ix-preview { margin-top: 10px; }
.ix-pv-hd {
  display: flex; justify-content: space-between; gap: 10px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px;
}
.ix-pv {
  display: flex; align-items: center; gap: 8px; padding: 4px 2px;
  font-size: var(--fs-body-sm); border-bottom: 1px solid var(--border);
}
.ix-pv:last-child { border-bottom: 0; }
.ix-pv .rk { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); width: 12px; }
.ix-pv .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-pv .nm small { color: var(--text-muted); }
.ix-pv .val { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); }

#ix-actions { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.ix-spacer { flex: 1; }
#ix-actions button {
  padding: 8px 14px; font-size: 13px; font-family: inherit; cursor: pointer;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-dim);
}
#ix-actions button:hover { color: var(--text); }
#ix-delete { color: var(--danger, #dc2626); }
#ix-save { color: #fff; background: var(--accent); border-color: var(--accent); }
#ix-save:hover { color: #fff; opacity: .9; }
#ix-save:disabled { opacity: .6; cursor: default; }

@media (max-width: 640px) {
  #ix-modal { padding: 0; align-items: flex-end; }
  #ix-card { max-width: none; max-height: 92vh; border-radius: 14px 14px 0 0; }
}

/* Discover: the note under the minutes ladder explaining that the presets have been
   scaled to how much of the season has been played. Quiet by design, it is context
   for a control rather than a message in its own right. */
.pd-mins-note{
  margin-top:8px;
  font-size:11px;
  line-height:1.45;
  color:var(--text-dim, #8a8a8a);
  letter-spacing:.01em;
}

/* ── Home: the scout board and the terminal share one grid ──────────────────
   They were two grids stacked in the page, so the board's final row was only
   full by coincidence and nothing below could move up into it. A tall panel
   such as The Staples then sat alone with two empty columns beside it and the
   next section began under the gap.

   Both wrappers, and the .term-grid each of them writes, become display:contents
   so their panels are items of this grid instead. Panels then fill in reading
   order whatever the count, which matters because that count moves with how many
   indexes a tester has built. Their own padding goes with their boxes, so it is
   carried here; the containers keep their inline display:none until their data
   lands, and an inline style still wins over the rule below. */
.home-flow {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  grid-auto-rows: min-content;
  padding: 12px 16px 32px;
}
.home-flow > #home-board,
.home-flow > #home-terminal { display: contents; }
.home-flow > #home-board > .term-grid,
.home-flow > #home-terminal > .term-grid { display: contents; }
#home-gameweek + .home-flow { padding-top: 12px; }
@media (max-width: 720px) { .home-flow { padding: 10px 10px 90px; } }

/* A panel that must begin a row. Used by the scout board, which leads a line of
   three: the board, the week's goals and the week's best performances. Without
   it that line starts wherever the index panels above it happen to end, and the
   trio splits across two rows for any tester with the wrong number of indexes
   saved. Only the start is pinned, so the responsive span rules still apply and
   the trio folds to two-up and then one-up on narrower screens. */
.term-panel.row-start { grid-column: 1 / span 4; }
@media (max-width: 1180px) { .term-panel.row-start { grid-column: 1 / span 6; } }
@media (max-width: 720px)  { .term-panel.row-start { grid-column: 1 / span 12; } }

/* ══════════════════════════════════════════════════════════════════════════
   PLAYER PROFILE (v3)
   One reading column (where he ranks, the match log) and one rail of context
   (form, the season before, home and away, career), inside a fixed-width frame
   so every panel lines up. Ask The Prism AI is the one loud thing on the page.
   ══════════════════════════════════════════════════════════════════════════ */
#ph-profile {
  --pv-ground: #f6f7f9; --pv-win: #0f9d58; --pv-loss: #d93a49; --pv-draw: #8a93a3;
  --pv-warn: #b7791f; --pv-warn-soft: rgba(183,121,31,.12); --pv-band: rgba(37,99,235,.14);
  --pv-cta-bg: #0b0c0e; --pv-cta-fg: #ffffff;
}
body.dark #ph-profile {
  --pv-ground: var(--bg); --pv-win: #34c77b; --pv-loss: #ff6b78;
  --pv-warn: #e0a54a; --pv-warn-soft: rgba(224,165,74,.14); --pv-band: rgba(91,140,255,.22);
  --pv-cta-bg: #f5f6f8; --pv-cta-fg: #0b0c0e;
}
#ph-profile.dashboard-canvas { background: var(--pv-ground); }
.pv { max-width: 1180px; margin: 0 auto; padding: 16px 20px 56px; display: flex; flex-direction: column; gap: 14px; }
.pv .dash-skeleton-header { border-radius: 10px; }

/* Identity */
.pv-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
.pv-avatar { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: top;
  background: var(--surface3); border: 1px solid var(--border); }
.pv-avatar-i { display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--text-dim); }
.pv-who { min-width: 0; }
.pv-name { font-family: var(--font-display); font-weight: 800; font-size: 30px; letter-spacing: -.02em; line-height: 1.05; margin: 0; text-wrap: balance; color: var(--text); }
.pv-sub { margin-top: 5px; font-size: 14px; color: var(--text-dim); }
.pv-sub b { color: var(--text); font-weight: 600; }
.pv-bio { margin-top: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: .02em; }
.pv-loading { display: flex; align-items: center; gap: 7px; margin-top: 12px; font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.pv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pvPulse 1.1s ease-in-out infinite; }
@keyframes pvPulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

/* Ask The Prism AI */
.pv-ai { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; }
.pv-cta { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 14px; border-radius: 11px; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -.005em; color: var(--pv-cta-fg);
  border: 2px solid transparent;
  background: linear-gradient(var(--pv-cta-bg), var(--pv-cta-bg)) padding-box, var(--spectrum) border-box;
  box-shadow: 0 6px 22px -10px rgba(79,70,229,.55); transition: transform .15s ease, box-shadow .15s ease; }
.pv-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 28px -10px rgba(79,70,229,.7); }
.pv-cta::after { content: ""; position: absolute; inset: -2px; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
  transform: translateX(-120%); animation: pvSheen 3.6s ease-in-out infinite; }
@keyframes pvSheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.pv-spark { width: 20px; height: 20px; flex-shrink: 0; }
.pv-cta { white-space: nowrap; max-width: 100%; }
.pv-chip { border: 1px solid var(--border); background: var(--surface2); border-radius: 999px; padding: 6px 11px;
  font-size: 12.5px; cursor: pointer; color: var(--text-dim); font-family: var(--font); text-align: left; }
.pv-chip:hover { border-color: var(--accent); color: var(--accent); }
.pv-ai-k { flex-basis: 100%; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.pv-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pv-act { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 11px;
  border-radius: 7px; border: 1px solid var(--border); background: var(--surface2); color: var(--text); cursor: pointer; }
.pv-act:hover { background: var(--accent-dim); }
.pv-act.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pv-scores { display: flex; gap: 8px; }
.pv-score { min-width: 108px; text-align: center; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface2); }
.pv-score b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--text); }
.pv-score b small { font-size: 12px; color: var(--text-muted); font-weight: 700; }
.pv-score span { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }

/* This season, when it is too early to read */
.pv-now { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: start; }
.pv-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.pv-now h2 { margin: 3px 0 0; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -.01em; color: var(--text); }
.pv-now p { margin: 4px 0 0; color: var(--text-dim); font-size: 13.5px; max-width: 68ch; }
.pv-now-min { text-align: right; }
.pv-now-min b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1; color: var(--text); }
.pv-now-min span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pv-now-games { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pv-now-g { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface2);
  border-radius: 8px; padding: 6px 10px; font-size: 12.5px; color: var(--text); }
.pv-now-g b { font-family: var(--font-mono); font-weight: 500; }
.pv-m { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }

/* `hidden` has to win over the display each block sets for itself. */
.pv [hidden] { display: none !important; }

/* Season */
.pv-seasonbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.pv-seasonbar:empty { display: none; }
.pv-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); padding: 3px; gap: 3px; }
.pv-seg button { border: 0; background: transparent; border-radius: 7px; padding: 7px 12px; cursor: pointer; text-align: left; color: var(--text); font-family: var(--font); }
.pv-seg button b { display: block; font-size: 13px; font-weight: 600; }
.pv-seg button span { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.pv-seg button[aria-pressed="true"] { background: var(--accent-soft); }
.pv-seg button[aria-pressed="true"] b { color: var(--accent); }
.pv-seg button:disabled { opacity: .55; cursor: progress; }
.pv-reading { font-size: 13px; color: var(--text-dim); }
.pv-reading b { color: var(--text); font-weight: 600; }
.pv-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 6px 11px; border-radius: 999px; }
.pv-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pv-status.moved { color: var(--accent); background: var(--accent-soft); }

/* Headline numbers */
.pv-kpis { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 8px; }
.pv-kpis:empty { display: none; }
.pv-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; }
.pv-kpi b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.pv-kpi span { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.pv-kpi em { display: block; font-style: normal; margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px; color: var(--accent); }

/* Panels */
.pv-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 14px; align-items: start; }
.pv-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pv-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.pv-ph { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 11px 14px 9px; border-bottom: 1px solid var(--border); }
.pv-ph h2 { margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.pv-ph .aside { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); text-align: right; }
.pv-body { padding: 8px 14px 14px; }
.pv-note { padding: 10px 14px 0; margin: 0; font-size: 12.5px; color: var(--text-muted); }
.pv-empty { padding: 18px 14px; color: var(--text-muted); font-size: 13px; }

/* Where he ranks */
.pv-field { margin: 10px 14px 0; padding: 10px 12px; border-radius: 8px; background: var(--surface2); border: 1px solid var(--border); font-size: 13px; color: var(--text); }
.pv-field b { font-weight: 600; }
.pv-field details { margin-top: 6px; }
.pv-field summary { cursor: pointer; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.pv-field ul { margin: 8px 0 2px; padding-left: 18px; display: grid; gap: 5px; color: var(--text-dim); font-size: 12.5px; max-width: 72ch; }
.pv-grp { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin: 10px 0 2px; }
.pv-rk { display: grid; grid-template-columns: 170px minmax(0, 1fr) 84px; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); }
.pv-rk:last-of-type { border-bottom: 0; }
.pv-rk-l { font-size: 13px; color: var(--text); }
.pv-rk-l b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 15px; margin-top: 1px; }
.pv-rk-r { text-align: right; font-family: var(--font-mono); font-size: 12px; }
.pv-rk-r b { display: block; font-size: 14px; font-weight: 500; color: var(--text); }
.pv-rk-r span { color: var(--text-muted); font-size: 10.5px; }
.pv-rk.muted .pv-rk-l, .pv-rk.muted .pv-rk-r b { color: var(--text-muted); }
.pv-strip { position: relative; height: 34px; }
.pv-track { position: absolute; left: 0; right: 0; top: 15px; height: 4px; border-radius: 2px; background: var(--surface3); }
.pv-band { position: absolute; top: 12px; height: 10px; border-radius: 3px; background: var(--pv-band); }
.pv-med { position: absolute; top: 9px; width: 2px; height: 16px; background: var(--text-dim); opacity: .55; }
.pv-dotm { position: absolute; top: 10px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--surface); }
.pv-dotm.hollow { background: var(--surface); border: 2px solid var(--text-muted); box-shadow: none; }
.pv-strip-lab { position: absolute; top: 25px; font-family: var(--font-mono); font-size: 9.5px; color: var(--text-muted); transform: translateX(-50%); white-space: nowrap; }
.pv-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 12px 0 0; font-size: 11.5px; color: var(--text-muted); }
.pv-legend i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.pv-legend .lg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.pv-legend .lg-band { width: 18px; height: 8px; border-radius: 2px; background: var(--pv-band); }
.pv-legend .lg-med { width: 2px; height: 12px; background: var(--text-dim); opacity: .55; }

/* Match log */
.pv-logwrap { overflow-x: auto; }
.pv-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 520px; color: var(--text); }
.pv-table th { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 9px 8px; border-bottom: 1px solid var(--border); }
.pv-table td { padding: 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.pv-table tr:last-child td { border-bottom: 0; }
.pv-table td.m { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.pv-table td.opp { width: 100%; white-space: normal; }
.pv-table .r { text-align: right; }
.pv-ga { color: var(--text); font-weight: 500; }
.pv-res { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; }
.pv-res i { font-style: normal; font-weight: 600; font-size: 10px; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; color: #fff; }
.pv-res.W i { background: var(--pv-win); } .pv-res.L i { background: var(--pv-loss); } .pv-res.D i { background: var(--pv-draw); }
.pv-rt { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.pv-rt b { font-family: var(--font-mono); font-weight: 500; font-size: 12.5px; min-width: 32px; text-align: right; }
.pv-rt s { display: block; width: 46px; height: 5px; border-radius: 3px; background: var(--surface3); position: relative; text-decoration: none; }
.pv-rt s u { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--accent); }

/* Form */
.pv-form { padding: 16px 14px 4px; }
#pv-form.pv-panel { overflow: visible; }
.pv-fbars { position: relative; display: flex; align-items: stretch; gap: 6px; }
.pv-fcol { flex: 1 1 0; max-width: 40px; position: relative; display: flex; flex-direction: column; cursor: default; outline: none; }
.pv-fbox { flex: 1 1 auto; position: relative; display: flex; align-items: flex-end; }
.pv-fb { width: 100%; border-radius: 4px 4px 1px 1px; transition: filter .12s; }
.pv-fb.W { background: color-mix(in srgb, var(--pv-win) 72%, transparent); }
.pv-fb.L { background: color-mix(in srgb, var(--pv-loss) 72%, transparent); }
.pv-fb.D { background: color-mix(in srgb, var(--pv-draw) 72%, transparent); }
/* The value sits on the page colour, so the average line never strikes through it. */
.pv-fval { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; font-family: var(--font-mono);
  font-size: 9.5px; line-height: 1.3; color: var(--text-muted); background: var(--surface); padding: 0 2px; border-radius: 3px; }
.pv-avg { position: absolute; left: 0; right: 0; z-index: 0; border-top: 1px dashed var(--text-dim); opacity: .6; pointer-events: none; }
.pv-fcode { display: flex; align-items: flex-end; justify-content: center; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .02em; color: var(--text-muted); overflow: hidden; white-space: nowrap; }
/* Codes are short; the full fixture is one hover, or one tap on a phone, away. */
.pv-ftip { display: none; position: absolute; top: -8px; left: 50%; transform: translate(-50%, -100%); z-index: 5;
  white-space: nowrap; max-width: min(300px, calc(100vw - 48px)); font-size: 11.5px; line-height: 1.35; padding: 6px 9px; border-radius: 7px;
  background: var(--text); color: var(--bg); box-shadow: 0 6px 18px -6px rgba(0,0,0,.35); pointer-events: none; }
.pv-ftip b { font-weight: 600; }
.pv-ftip small { display: block; opacity: .7; font-family: var(--font-mono); font-size: 10px; }
.pv-fcol:hover .pv-ftip, .pv-fcol:focus .pv-ftip, .pv-fcol:focus-visible .pv-ftip { display: block; }
.pv-fcol:hover .pv-fb, .pv-fcol:focus .pv-fb { filter: brightness(1.08) saturate(1.1); }
.pv-fcol:hover .pv-fcode, .pv-fcol:focus .pv-fcode { color: var(--text); }
.pv-form-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 8px 14px 12px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); }
.pv-fkey i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: -.5px; }
.pv-fkey i:first-child { margin-left: 0; }
.pv-fkey i.W { background: var(--pv-win); } .pv-fkey i.D { background: var(--pv-draw); } .pv-fkey i.L { background: var(--pv-loss); }
.pv-ha-m, .pv-ga-m { display: none; }
.pv-ga-m { margin-left: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--text); font-weight: 500; }

/* The season before */
.pv-cmp { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: baseline; font-size: 12.5px; color: var(--text); }
.pv-cmp:last-child { border-bottom: 0; }
.pv-cmp-v { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-align: right; }
.pv-cmp-v b { color: var(--text); font-weight: 500; }
.pv-delta { font-family: var(--font-mono); font-size: 10.5px; grid-column: 2; text-align: right; }
.pv-delta.up { color: var(--pv-win); } .pv-delta.down { color: var(--pv-loss); } .pv-delta.flat { color: var(--text-muted); }

/* Home and away */
.pv-ha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px 14px; }
.pv-ha div { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 11px; }
.pv-ha h3 { margin: 0 0 6px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.pv-ha p { margin: 2px 0; display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text); }
.pv-ha p b { font-family: var(--font-mono); font-weight: 500; }

/* Career */
.pv-car { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.pv-car:last-child { border-bottom: 0; }
.pv-car-s { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.pv-car-t { font-size: 13px; font-weight: 500; color: var(--text); }
.pv-car-t small { display: block; color: var(--text-muted); font-weight: 400; font-size: 11.5px; }
.pv-car-n { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-align: right; }
.pv-car-n b { display: block; color: var(--text); font-size: 12.5px; font-weight: 500; }

/* Similar players rows reuse the existing results markup */
#dash-s7 #dash-similar-results { padding: 8px 14px 14px; }

@media (max-width: 1100px) {
  .pv-hero { grid-template-columns: auto minmax(0, 1fr); }
  .pv-scores { grid-column: 2; justify-self: start; }
  .pv-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pv { padding: 12px 14px 48px; gap: 12px; }
  .pv-hero { grid-template-columns: auto minmax(0, 1fr); padding: 14px; gap: 12px; }
  .pv-scores { grid-column: 1 / -1; }
  .pv-score { flex: 1 1 0; min-width: 0; }
  .pv-avatar { width: 56px; height: 56px; }
  .pv-avatar-i { font-size: 20px; }
  .pv-name { font-size: 23px; }
  .pv-cta { font-size: 14px; }
  .pv-kpis { grid-template-columns: repeat(2, 1fr); }
  .pv-rk { grid-template-columns: minmax(0,1fr) 76px; gap: 6px 10px; }
  .pv-rk .pv-strip { grid-column: 1 / -1; grid-row: 2; }
  .pv-seg { width: 100%; } .pv-seg button { flex: 1 1 0; }
  .pv-now { grid-template-columns: 1fr; } .pv-now-min { text-align: left; }
  .pv-cta { white-space: normal; text-align: left; line-height: 1.25; }
  .pv-table { min-width: 0; }
  .pv-table .ha, .pv-table .ga, .pv-rt s { display: none; }
  .pv-ha-m, .pv-ga-m { display: inline; }
  .pv-ha-m { color: var(--text-muted); font-size: 11.5px; }
  .pv-table td { padding: 8px 6px; }
  .pv-ph { flex-wrap: wrap; }
  .pv-ph .aside { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-cta, .pv-cta:hover { transition: none; transform: none; }
  .pv-cta::after { animation: none; display: none; }
  .pv-dot { animation: none; }
}

/* The Wire: the window's biggest fees, at the head of the transfers zone. */
.wtf-panel { margin: 0 0 14px; }
.wtf-panel .hw-row { padding-left: 12px; padding-right: 12px; }

/* Home news: inset like every other Home panel (it ran edge to edge), ten
   headlines in two columns of five, read down each column. */
#home-wire-panels { margin: 0; padding: 12px 16px 0; }
.hw-all { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; }
.hw-all:hover { text-decoration: underline; }
#hw-news-rows.hw-news-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 0; }
#hw-news-rows.hw-news-2col .hw-news-row:nth-child(n+6) { border-left: 1px solid var(--border); }
@media (max-width: 720px) {
  #home-wire-panels { padding: 10px 10px 0; }
  #hw-news-rows.hw-news-2col { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  /* Ten stacked is a long scroll before the gameweek on a phone; All news has the rest. */
  #hw-news-rows.hw-news-2col .hw-news-row:nth-child(n+6) { display: none; }
}

/* ── The gameweek: one matchday at a time ───────────────────────────────────
   A switch above the columns picks "This matchday" or "Next matchday" for every
   league at once; both are in the DOM and a class on the panel shows one. On
   phones the leagues also fold to a digest line, the Premier League excepted.
   Desktop rules first, phone rules in one media query after them, per the file's
   source-order rule. */
.gw-view-this .gw-v-next, .gw-view-next .gw-v-this { display: none; }
.gw-v > .gw-round:first-child { border-top: none; }
.gw-chev, .gw-digest, .gw-more { display: none; }

.gw-switchbar { padding: 8px 10px 6px; border-bottom: 1px solid var(--border); }
.gw-switch.pd-mode-row { margin: 0; padding: 2px; }
.gw-switch .pd-mode-btn.pd-mode-btn { padding: 4px 14px; font-size: 12px; }
.gw-empty { padding: 10px; font-size: 11px; color: var(--text-muted); line-height: 1.45; }

@media (max-width: 720px) {
  .gw-switchbar { padding: 8px 10px; }
  .gw-switch .pd-mode-btn.pd-mode-btn { padding: 7px 8px; font-size: 13px; }

  .gw-lhead { cursor: pointer; -webkit-tap-highlight-color: transparent; padding: 11px 12px; font-size: 10px; }
  .gw-chev {
    display: inline-block; margin-left: auto; width: 7px; height: 7px; flex-shrink: 0;
    border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(-45deg); transition: transform .15s ease;
  }
  .gw-open > .gw-lhead .gw-chev { transform: rotate(45deg); }

  .gw-league:not(.gw-open) > .gw-lbody { display: none; }
  .gw-league:not(.gw-open) > .gw-digest {
    display: block; padding: 0 12px 11px; margin-top: -4px;
    font-size: 11px; color: var(--text-muted);
  }
  .gw-live { color: var(--danger); font-weight: 500; }
  .gw-more {
    display: block; padding: 10px 12px 12px; border-top: 1px solid var(--border);
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em;
    color: var(--accent); cursor: pointer;
  }
}

/* ── Image fade-in ─────────────────────────────────────────────────────────
   Photos, crests and news thumbnails fade in over their placeholder instead of
   snapping in. `img-in` is added by a capture listener in <head> on load OR
   error, so a broken image never stays at zero opacity waiting for an event.
   Every class here already reserves its box, so nothing shifts as they land.
   :where() keeps the base rule at zero specificity: it never outranks a
   component's own opacity, and the :not() drops out the moment it loads. */
:where(.php, .cri, .hw-face, .hw-thumb, .hw-club, .sp-crest, .mv-photo, .mv-crest,
       .ft-team-logo, .wn-thumb, .wn-r-img, .ticker-club-logo, .ticker-player-photo,
       .home-player-photo, .form-alert-photo, .ll-logo, .ll-player-photo, .mx-crest) {
  transition: opacity .2s ease;
}
:where(.php, .cri, .hw-face, .hw-thumb, .hw-club, .sp-crest, .mv-photo, .mv-crest,
       .ft-team-logo, .wn-thumb, .wn-r-img, .ticker-club-logo, .ticker-player-photo,
       .home-player-photo, .form-alert-photo, .ll-logo, .ll-player-photo, .mx-crest):is(img):not(.img-in) {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  :where(.php, .cri, .hw-face, .hw-thumb, .hw-club, .sp-crest, .mv-photo, .mv-crest,
         .ft-team-logo, .wn-thumb, .wn-r-img, .ticker-club-logo, .ticker-player-photo,
         .home-player-photo, .form-alert-photo, .ll-logo, .ll-player-photo, .mx-crest) { transition: none; }
}