/* =========================================================
     LIGHT (default) — clean white field, cobalt accents, varsity red signals
     ========================================================= */
  :root {
    --bg: #E8E9EC;
    --panel: #FFFFFF;
    --panel-2: #E8E9EC;
    --rule: #1A1F2E;
    --rule-soft: #D8D5CB;
    --ink: #0D0E11;
    --ink-soft: #3A4256;
    --ink-muted: #7B8294;

    /* Red is reserved for prices, the live dot, and refresh countdown.
       Blue is the universal change-indicator and link color.
       Green has been retired in favor of blue (kept as an alias so existing
       rules referencing var(--green) continue to work).
       --rank-gold is for the leading-rank highlight (top-1 row, etc.). */
    --red:   #FF3333;
    --blue:  #0033CC;
    --green: #0033CC;
    --rank-gold: #CC9966;
    --white: #FFFFFF;

    --accent: var(--red);
    --accent-contrast: #FFFFFF;
    --link: var(--blue);
    --up: var(--blue);
    --down: var(--blue);

    --shimmer-a: #F1F2F4;
    --shimmer-b: #E0E1E4;
    --slot-stripe: rgba(13,14,17,0.045);

    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

    --font-display: "Anton", "Bebas Neue", "Arial Narrow", sans-serif;
    --font-ui: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --measure: 1200px;
  }

  /* =========================================================
     DARK — deep navy stadium, same cobalt + signal-red accents
     ========================================================= */
  [data-theme="dark"] {
    --bg: #0C121F;
    --panel: #0F1828;
    --panel-2: #0C121F;
    /* Brighter rule colors so card / panel outlines remain visible against
       the very dark background. (Previous values 2A3E5E / 1E314D were
       getting lost on most monitors.) */
    --rule: #5A7196;
    --rule-soft: #3F5677;
    --ink: #F2EFE7;
    --ink-soft: #B5BFD0;
    --ink-muted: #7B8AA3;

    --red:   #FF3333;
    --blue:  #0033CC;
    --green: #0033CC;
    --rank-gold: #CC9966;

    --accent: var(--red);
    --accent-contrast: #0C121F;
    --link: var(--blue);
    --up: var(--blue);
    --down: var(--blue);

    --shimmer-a: #142037;
    --shimmer-b: #1B2A48;
    --slot-stripe: rgba(255,255,255,0.045);

    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.025 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  /* Base */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; overflow-x: hidden; }
  html { background: var(--bg); -webkit-text-size-adjust: 100%; }
  body {
    background: var(--bg);
    background-image: var(--grain);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.45;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    transition: background-color .25s ease, color .25s ease;
  }
  a { color: var(--link); }

  /* Reserved ad slots (CLS = 0) */
  .ad-slot {
    display: flex; align-items: center; justify-content: center;
    background: var(--panel-2);
    border: 1px solid var(--rule-soft);
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    position: relative; overflow: hidden;
  }
  .ad-slot::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: repeating-linear-gradient(135deg, transparent 0 9px, var(--slot-stripe) 9px 10px);
  }
  .ad-slot__label { position: relative; z-index: 1; }
  .ad-top { width: 100%; height: 60px; max-width: var(--measure); margin: 10px auto 0; }
  @media (min-width: 768px) { .ad-top { height: 100px; margin-top: 16px; } }
  .ad-square { width: 100%; aspect-ratio: 300 / 250; max-width: min(300px, 100%); margin-inline: auto; }

  /* Top chyron — cobalt blue brand bar (formerly red). The LIVE pill
     inside it remains red (it's the live-data signal). */
  .chyron {
    background: var(--blue);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .chyron__inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 7px 20px;
    display: flex; flex-wrap: wrap; gap: 6px 20px; align-items: center;
  }
  .chyron__pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: #FFFFFF;
    color: var(--red);
    padding: 2px 8px;
    border-radius: 1px;
  }
  .chyron__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--red);
    animation: pulse-red 1.4s infinite;
  }
  @keyframes pulse-red {
    0%   { box-shadow: 0 0 0 0 rgba(255,51,51,.85); }
    70%  { box-shadow: 0 0 0 6px rgba(255,51,51,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,51,51,0); }
  }

  /* Header */
  .topbar { max-width: var(--measure); margin: 0 auto; padding: 22px 20px 0; }
  .brand {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: end; gap: 16px 22px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--rule);
  }
  .brand__wordmark {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(48px, 9vw, 96px);
    line-height: .85;
    letter-spacing: .005em;
    color: var(--ink);
    text-transform: uppercase;
    margin: 0;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .brand__logo {
    height: clamp(70px, 8.75vw, 98px);
    width: auto;
  }
  .brand__deck {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-muted);
    text-align: right; line-height: 1.4; max-width: 240px;
  }
  .brand__deck strong { color: var(--ink); font-weight: 600; }
  @media (max-width: 560px) { .brand__deck { max-width: none; } }

  .lang-switcher { position: relative; display: inline-flex; }
  .lang-switcher__btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--rule); color: var(--ink); padding: 6px 10px; cursor: pointer; font: inherit; letter-spacing: inherit; text-transform: inherit; transition: background .15s, color .15s, border-color .15s; }
  .lang-switcher__btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .lang-switcher__btn svg { width: 12px; height: 12px; flex: none; }
  .lang-switcher__menu { display: none; position: absolute; top: 100%; margin-top: 4px; background: var(--panel); border: 1px solid var(--rule); min-width: 140px; z-index: 100; padding: 4px 0; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
  [dir="rtl"] .lang-switcher__menu { right: 0; }
  [dir="ltr"] .lang-switcher__menu { left: 0; }
  .lang-switcher__menu.open { display: block; }
  .lang-switcher__menu a { display: block; padding: 8px 14px; font-family: var(--font-ui); font-size: 13px; color: var(--ink); text-decoration: none; text-transform: none; letter-spacing: 0; text-align: left; }
  .lang-switcher__menu a:hover { background: var(--panel-2); }
  .lang-switcher__menu a.active { font-weight: 700; color: var(--blue); }

  .meta-row {
    display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center;
    padding: 14px 0 20px;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-soft);
  }
  .meta-row > span { display: inline-flex; align-items: center; gap: 8px; }
  .meta-row strong { color: var(--ink); font-weight: 600; }
  .meta-row .countdown {
    color: var(--red); font-variant-numeric: tabular-nums;
    font-size: 13px; letter-spacing: .04em;
  }
  .meta-row .meta-status {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--panel-2);
    padding: 3px 10px;
    font-size: 10.5px;
    letter-spacing: .1em;
  }
  .meta-row .meta-cta {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--ink);
    color: var(--bg);
    padding: 5px 12px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase;
    transition: background .15s, color .15s;
  }
  .meta-row .meta-cta a { color: inherit; text-decoration: none; }
  .meta-row .meta-cta strong { color: inherit; font-weight: 700; }
  .meta-row .meta-cta:hover { background: var(--red); color: var(--accent-contrast); }
  .meta-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .meta-social__label {
    color: var(--ink-muted);
  }
  .meta-social__link {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s, border-color .15s;
  }
  .meta-social__link:hover,
  .meta-social__link:focus-visible {
    color: var(--red);
    border-bottom-color: var(--red);
  }
  @media (max-width: 860px) {
    .meta-social {
      order: 10;
      width: 100%;
      margin-left: 0;
    }
  }
  /* Live status-dot is the dedicated signal red, sharing the red palette
     with prices and the refresh countdown. */
  .status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--red);
    animation: pulse-red 2s infinite;
  }
  .status-dot--stale { background: #E8A93C; animation: none; }
  .status-dot--down  { background: var(--red);   animation: none; }

  /* Theme toggle */
  .theme-toggle {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; border: 1px solid var(--rule);
    color: var(--ink); padding: 6px 10px; cursor: pointer;
    font: inherit; letter-spacing: inherit; text-transform: inherit;
    transition: background .15s, color .15s, border-color .15s;
  }
  .theme-toggle:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .theme-toggle svg { width: 12px; height: 12px; flex: none; }
  .theme-toggle .icon-sun { display: none; }
  [data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
  [data-theme="dark"] .theme-toggle .icon-moon { display: none; }
  @media (max-width: 520px) { .theme-toggle__label { display: none; } }

  /* Share button + popover */
  .share-wrap { position: relative; display: inline-flex; }
  /* Header share button — cobalt brand color (was red). */
  .share-btn {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--blue);
    color: #FFFFFF;
    border: 1px solid var(--blue);
    padding: 8px 14px;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  .share-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
  .share-btn svg { width: 13px; height: 13px; flex: none; }

  .share-pop {
    position: fixed;
    width: 304px;
    background: var(--panel);
    border: 1px solid var(--rule);
    border-top: 5px solid var(--red);
    padding: 14px 14px 12px;
    z-index: 30;
    box-shadow: 0 0 0 1px rgba(0,0,0,0); /* keep flat — 2026 */
  }
  .share-pop[hidden] { display: none; }
  .share-pop__preview {
    font-family: var(--font-ui);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ink);
    background: var(--panel-2);
    border-left: 3px solid var(--red);
    padding: 9px 12px;
    margin: 6px 0 12px;
  }
  .share-platforms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }
  .share-platform {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent;
    border: 1px solid var(--rule-soft);
    color: var(--ink);
    padding: 8px 10px;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .08s;
  }
  .share-platform:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .share-platform:active { transform: scale(.97); }
  .share-platform__dot {
    width: 9px; height: 9px;
    border-radius: 1px;
    flex: none;
  }
  .share-platform[data-platform="x"]         .share-platform__dot { background: #000; }
  .share-platform[data-platform="bluesky"]   .share-platform__dot { background: #0085FF; }
  .share-platform[data-platform="facebook"]  .share-platform__dot { background: #1877F2; }
  .share-platform[data-platform="instagram"] .share-platform__dot { background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF); }
  .share-platform[data-platform="tiktok"]    .share-platform__dot { background: linear-gradient(45deg,#25F4EE,#FE2C55); }
  /* Copy / success states use --blue (green has been retired). */
  .share-platform[data-platform="copy"]      .share-platform__dot { background: var(--blue); }
  .share-platform.is-success { background: var(--blue); color: #FFFFFF; border-color: var(--blue); }
  .share-foot {
    font-family: var(--font-mono);
    font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-muted);
    margin: 10px 0 0;
  }
  @media (max-width: 520px) {
    .share-pop { width: calc(100% - 28px); }
    .share-btn__label { display: none; }
  }

  /* Layout */
  .layout {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 24px 20px;
    /* minmax(0, 1fr) (not 1fr) lets the single mobile column shrink below its
       content's min-content width. With plain 1fr the column blew out wider
       than the viewport at very narrow widths (~320px / iPhone zoomed),
       pushing the board's right border off-screen so it looked uncentered. */
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px;
  }
  @media (min-width: 1100px) {
    .layout {
      /* Side rails trimmed slightly so the rankings board gets ~50px more
         horizontal room without breaking the existing two-column rail design. */
      grid-template-columns: minmax(180px, 215px) minmax(0, 1fr) minmax(230px, 270px);
      gap: clamp(20px, 2vw, 28px); align-items: start;
    }
    /* Explicit grid-column AND grid-row placement keeps the desktop layout
       independent of DOM order. The board is intentionally first in the DOM
       (so mobile stacks rankings above the eBay rail), but desktop pins it
       to column 2. All three rails share row 1, otherwise the side rails
       auto-place into their own rows below the (tall) board. */
    .col-left  { grid-column: 1; grid-row: 1; position: sticky; top: 14px; }
    .col-board { grid-column: 2; grid-row: 1; }
    .col-right { grid-column: 3; grid-row: 1; position: sticky; top: 14px; }
    .col-left,
    .col-board,
    .col-right {
      min-width: 0;
    }
  }

  .h-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0 0 6px;
  }
  .h-section {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 32px; letter-spacing: .005em; text-transform: uppercase;
    line-height: .9;
    margin: 0 0 12px;
    color: var(--ink);
  }

  /* Leaderboard */
  /* Rankings board — cobalt blue top accent bar. */
  .board {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-top: 5px solid var(--blue);
  }
  .board__head {
    display: flex; justify-content: center; align-items: center;
    flex-wrap: wrap;
    gap: 14px; padding: 20px 22px 16px;
    border-bottom: 1px solid var(--rule);
  }
  .board__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 42px);
    text-transform: uppercase;
    line-height: .85;
    margin: 0;
    color: var(--ink);
    white-space: nowrap;
  }
  .board__sub {
    font-family: var(--font-mono);
    font-size: clamp(13px, 1.4vw, 18px); letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 8px;
  }
  .board__sub {
    white-space: nowrap;
    text-align: center;
  }
  .board__head .board__title,
  .board__head .board__sub {
    display: inline;
  }
  .board__head .board__sub {
    margin-top: 0;
  }
  .board__tabs { display: flex; gap: 0; font-family: var(--font-mono); min-width: 0; }
  .board__tabs button {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink);
    padding: 8px 12px;
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 500;
    cursor: pointer;
    margin-left: -1px;
    transition: background .12s, color .12s, border-color .12s;
  }
  .board__tabs button:first-child { margin-left: 0; }
  .board__tabs button:hover { background: var(--panel-2); }
  /* Active filter tab — cobalt brand background (was red). */
  .board__tabs button[aria-pressed="true"] {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
    position: relative; z-index: 1;
  }

  /* Game selector — top-level tabs that switch the board + eBay sidebars
     between Soccer (live board) and the pop-based games (MTG / Pokémon). */
  .board__games {
    display: flex; gap: 0;
    font-family: var(--font-display);
    margin-bottom: 14px;
    border-bottom: 2px solid var(--rule-soft);
  }
  .board__games button {
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--ink-muted);
    padding: 8px 18px 10px;
    font-size: 20px; letter-spacing: .02em;
    line-height: 1;
    cursor: pointer;
    margin-bottom: -2px;
    transition: color .12s, border-color .12s;
  }
  .board__games button:hover { color: var(--ink); }
  .board__games button[aria-pressed="true"] {
    color: var(--ink);
    border-bottom-color: var(--accent);
  }

  /* "Coming online" placeholder shown in the board body for pop games. */
  .board__placeholder {
    text-align: center;
    padding: 56px 24px;
    color: var(--ink-soft);
  }
  .board__placeholder h3 {
    font-family: var(--font-display);
    font-size: 30px; letter-spacing: .01em;
    color: var(--ink);
    margin: 0 0 10px;
  }
  .board__placeholder p { max-width: 460px; margin: 0 auto 6px; font-size: 14px; line-height: 1.5; }
  .board__placeholder .board__placeholder-hint { font-size: 12.5px; color: var(--ink-muted); margin-top: 14px; }

  /* Pop board sort toggle (P3b) — client-side re-sort of the population board
     (Pop Value / Population / PSA-10 price). Mirrors the filter-tab styling and
     uses theme tokens so it tracks the dark/light toggle. */
  .pop-sort {
    display: flex; align-items: center; justify-content: center; gap: 0;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    padding: 12px 22px 0;
  }
  .pop-sort__label {
    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-muted); margin-right: 12px;
  }
  .pop-sort button {
    background: transparent;
    border: 1px solid var(--rule);
    color: var(--ink);
    padding: 6px 12px;
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    font-weight: 500; cursor: pointer;
    margin-left: -1px;
    transition: background .12s, color .12s, border-color .12s;
  }
  .pop-sort button:first-of-type { margin-left: 0; }
  .pop-sort button:hover { background: var(--panel-2); }
  .pop-sort button[aria-pressed="true"] {
    background: var(--blue); color: var(--white); border-color: var(--blue);
    position: relative; z-index: 1;
  }

  /* Row */
  .row {
    display: grid;
    grid-template-columns: 48px 48px 1fr 110px 86px;
    column-gap: 14px;
    align-items: center;
    padding: 14px 22px;
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
  }
  .row:last-child { border-bottom: 0; }
  @media (max-width: 560px) {
    /* On narrow viewports a fixed thumbnail + rank pair plus a price column
       squeezed the name/meta into a tall, narrow block while the price hugged
       the right edge — on real devices the price could even overlap the
       metadata. Drop the price onto its own row beneath the name so the
       name/meta use the full available width and nothing collides. */
    .row {
      grid-template-columns: 40px 34px minmax(0, 1fr);
      grid-template-areas:
        "thumb rank name"
        "thumb rank value";
      align-items: start;
      column-gap: 12px;
      row-gap: 6px;
      padding: 12px 14px;
    }
    .row__thumb-link { grid-area: thumb; }
    .row__rank { grid-area: rank; }
    .row__name { grid-area: name; }
    .row .row__value { grid-area: value; text-align: left; font-size: 15px; }
    .row .col-change { display: none; }
    /* The name link must be a block for its ellipsis truncation to engage;
       as an inline element a long sponsored headline overflowed its cell and
       pushed the board's right edge past the viewport. */
    .row__name .row__team-link { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .row__name .row__team { display: block; }
    /* Keep the game tabs on one line and let them scroll horizontally instead
       of forcing the board wider than the viewport. */
    .board__games { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; }
    .board__games::-webkit-scrollbar { display: none; }
    .board__games button { flex: 0 0 auto; white-space: nowrap; }
  }

  .row__rank {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(32px, 5vw, 44px);
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
  }
  /* Top-1 ranks render in the rank-gold (warm tan) accent so the leader
     stands out from blue change indicators and red price/live signals.
     Top-3 keep the cobalt blue accent for clear secondary distinction. */
  .row--top-1 .row__rank { color: var(--rank-gold); }
  .row--top-3 .row__rank { color: var(--blue); }

  .row__name { display: flex; flex-direction: column; min-width: 0; gap: 4px; }
  .row__team {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
    line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .row__meta {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ink-muted);
  }
  .row__flag {
    font-size: 24px;
    line-height: 1;
  }
  .league {
    display: inline-block;
    padding: 1px 6px;
    font-weight: 600;
    color: #FFFFFF;
    border-radius: 1px;
    letter-spacing: .14em;
  }
  .league.NFL   { background: var(--red); }
  .league.NBA   { background: #C75300; }
  .league.MLB   { background: var(--blue); }
  .league.NHL   { background: var(--ink); }
  .league.MLS   { background: var(--green); }
  .league.ATP   { background: #5A3FB0; }
  .league.NCAAF { background: var(--blue); }

  .row__value, .row__change {
    font-family: var(--font-mono);
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  /* Prices read in --red (the dedicated signal red) so the dollar value is
     the loudest piece of data in each row. */
  .row__value { font-size: 16px; font-weight: 600; color: var(--red); letter-spacing: -.005em; }
  .row__value-label {
    display: block;
    font-size: 9px; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 2px;
    white-space: nowrap;
  }
  .row__change { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
  /* Change indicators are blue regardless of direction — the arrow conveys
     direction; color is consistent with the rest of the data column. */
  .row__change.up   { color: var(--blue); }
  .row__change.down { color: var(--blue); }
  .row__change .arrow { display: inline-block; margin-right: 3px; }

  /* Grail Score badges */
  .grail-badges {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-top: 5px;
  }
  .grail-badge {
    display: inline-flex; align-items: center;
    font-family: var(--font-mono);
    font-size: 9.5px; font-weight: 600;
    letter-spacing: .08em;
    padding: 2px 7px;
    border-radius: 2px;
    line-height: 1.4;
  }
  .grail-badge--score {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.35);
    position: relative;
    cursor: help;
  }
  .grail-badge--score::after {
    content: "composite market intelligence score";
    position: absolute;
    bottom: 135%;
    left: 50%;
    transform: translateX(-50%) scale(0.85);
    background: #1e293b;
    color: #f8fafc;
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    padding: 8px 12px;
    border-radius: 6px;
    width: 220px;
    line-height: 1.3;
    white-space: normal;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    pointer-events: none;
    opacity: 0;
    transition: all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100;
  }
  [data-theme="dark"] .grail-badge--score::after {
    background: #f8fafc;
    color: #1e293b;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  }
  .grail-badge--score:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
  [data-theme="dark"] .grail-badge--score {
    background: rgba(251, 191, 36, 0.18);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.4);
  }
  .grail-badge--rare {
    background: rgba(139, 92, 246, 0.12);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.3);
  }
  [data-theme="dark"] .grail-badge--rare {
    background: rgba(167, 139, 250, 0.18);
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, 0.4);
  }
  /* Volume badge moved off green to a soft blue, matching the new palette. */
  .grail-badge--vol {
    background: rgba(0, 51, 204, 0.10);
    color: var(--blue);
    border: 1px solid rgba(0, 51, 204, 0.30);
  }
  [data-theme="dark"] .grail-badge--vol {
    background: rgba(91, 168, 232, 0.16);
    color: #8FB3FF;
    border-color: rgba(91, 168, 232, 0.4);
  }

  /* Sort selector */
  .sort-select {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-soft);
    min-width: 0;
    max-width: 100%;
  }
  .sort-select select {
    background: var(--panel-2);
    border: 1px solid var(--rule-soft);
    color: var(--ink);
    padding: 6px 28px 6px 10px;
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%237B8294'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    border-radius: 1px;
    min-width: 0;
    max-width: 100%;
  }
  .sort-select select:focus { outline: none; border-color: var(--red); }

  /* Thumbnail (affiliate target) */
  .row__thumb-link {
    display: block;
    width: 48px; height: 48px;
    border: 1px solid var(--rule-soft);
    overflow: hidden;
    position: relative;
    transition: transform .12s ease, border-color .12s ease;
    background: var(--panel-2);
  }
  .row__thumb-link:hover { border-color: var(--red); transform: translateY(-1px); }
  .row__thumb {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  @media (max-width: 560px) {
    .row__thumb-link { width: 40px; height: 40px; }
  }

  /* Team name as link */
  .row__team-link {
    color: inherit; text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .12s ease, color .12s ease;
  }
  .row__team-link:hover { color: var(--red); border-bottom-color: var(--red); }

  /* Vote buttons — sit under the team meta */
  .vote-group {
    display: inline-flex; gap: 6px;
    margin-top: 6px;
  }
  .vote-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: transparent;
    border: 1px solid var(--rule-soft);
    color: var(--ink-soft);
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 10.5px; font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s, transform .08s;
    font-variant-numeric: tabular-nums;
    min-width: 46px;
    justify-content: center;
  }
  .vote-btn svg { width: 11px; height: 11px; flex: none; }
  .vote-btn:hover { border-color: var(--rule); color: var(--ink); }
  .vote-btn:active { transform: scale(.95); }
  /* Both vote states use --blue — direction is conveyed by the icon, not color. */
  .vote-btn[data-voted="true"][data-dir="up"] {
    background: var(--blue); color: #FFFFFF; border-color: var(--blue);
  }
  .vote-btn[data-voted="true"][data-dir="down"] {
    background: var(--blue); color: #FFFFFF; border-color: var(--blue);
  }
  .vote-btn[disabled] { opacity: .5; cursor: not-allowed; }

  /* Row share button — same visual register as vote buttons, icon only */
  .share-row-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--rule-soft);
    color: var(--ink-soft);
    padding: 3px 7px;
    min-width: auto;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s, transform .08s;
  }
  .share-row-btn svg { width: 11px; height: 11px; flex: none; }
  .share-row-btn:hover { background: var(--red); color: #FFFFFF; border-color: var(--red); }
  .share-row-btn:active { transform: scale(.95); }
  .share-row-btn.is-active { background: var(--red); color: #FFFFFF; border-color: var(--red); }

  /* Per-row share button — same register as vote buttons, icon-only */
  .row__share-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid var(--rule-soft);
    color: var(--ink-soft);
    width: 30px; height: 24px;
    cursor: pointer;
    padding: 0;
    transition: background .12s, color .12s, border-color .12s, transform .08s;
  }
  .row__share-btn:hover { border-color: var(--red); color: var(--red); }
  .row__share-btn:active { transform: scale(.95); }
  .row__share-btn svg { width: 12px; height: 12px; }
  .row__share-btn.is-active { border-color: var(--red); color: var(--red); }

  /* Sponsored row — same grid, subtle tint, clear AD mark, no votes/change */
  .row--sponsored {
    background:
      linear-gradient(90deg, rgba(230,57,70,.06), rgba(230,57,70,.02) 40%, transparent 100%);
  }
  [data-theme="dark"] .row--sponsored {
    background:
      linear-gradient(90deg, rgba(255,77,92,.10), rgba(255,77,92,.03) 40%, transparent 100%);
  }
  .row__rank--ad {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 700;
    letter-spacing: .18em;
    color: var(--red);
    text-transform: uppercase;
    text-align: left;
    line-height: 1;
  }
  .league--sponsored {
    background: var(--red);
    color: #FFFFFF;
    letter-spacing: .16em;
  }
  .row__value--cta {
    color: var(--red);
    font-weight: 700;
  }
  .row__value--cta .row__value-label { color: var(--red); }

  /* ========== CONFIDENCE SIGNAL (data quality indicator) ========== */
  .conf {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    font-family: var(--font-mono);
    font-size: 8.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    cursor: help;
    line-height: 1;
  }
  .conf__bars {
    display: inline-flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 9px;
  }
  .conf__bar {
    width: 2.5px;
    background: currentColor;
    opacity: .22;
    border-radius: 0.5px;
  }
  .conf__bar:nth-child(1) { height: 3px; }
  .conf__bar:nth-child(2) { height: 6px; }
  .conf__bar:nth-child(3) { height: 9px; }
  /* Confidence colors:
       high  = blue  (was green; matches the new palette)
       med   = amber (kept)
       low   = muted ink */
  .conf--high  { color: var(--blue); }
  .conf--med   { color: #b45309; }
  [data-theme="dark"] .conf--med { color: #fbbf24; }
  .conf--low   { color: var(--ink-muted); }
  .conf--high .conf__bar { opacity: .35; }
  .conf--high .conf__bar:nth-child(-n+3) { opacity: 1; }
  .conf--med  .conf__bar { opacity: .25; }
  .conf--med  .conf__bar:nth-child(-n+2) { opacity: 1; }
  .conf--low  .conf__bar { opacity: .22; }
  .conf--low  .conf__bar:nth-child(-n+1) { opacity: 1; }
  .conf__label { font-weight: 700; }

  /* Compact legend below board header */
  .conf-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 8px 16px 10px;
    border-top: 1px solid var(--rule-soft);
    border-bottom: 1px solid var(--rule-soft);
    background: var(--panel-2);
  }
  .conf-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .conf-legend .conf__bars { height: 8px; }
  .conf-legend .conf__bar:nth-child(1) { height: 2.5px; }
  .conf-legend .conf__bar:nth-child(2) { height: 5px; }
  .conf-legend .conf__bar:nth-child(3) { height: 8px; }

  /* Methodology explainer — why only the actively-traded cards rank.
     Collapsed by default; the summary line carries the live ranked/catalog
     counts so it stays accurate as real sales accrue. */
  .board__method {
    border-bottom: 1px solid var(--rule-soft);
    background: var(--panel-2);
  }
  .board__method__summary {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    padding: 9px 16px;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .board__method__summary::-webkit-details-marker { display: none; }
  .board__method__count strong { color: var(--ink); font-weight: 700; }
  .board__method__cta {
    color: var(--blue);
    font-weight: 700;
    border: 1px solid var(--rule-soft);
    border-radius: 999px;
    padding: 3px 10px;
  }
  .board__method__cta::after { content: " \25BE"; }
  .board__method[open] .board__method__cta::after { content: " \25B4"; }
  .board__method__body {
    max-width: 720px;
    margin: 0 auto;
    padding: 2px 18px 16px;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-muted);
    text-transform: none;
    letter-spacing: normal;
  }
  .board__method__body p { margin: 6px 0; }
  .board__method__body strong { color: var(--ink); }
  .board__method__list {
    margin: 8px 0;
    padding-left: 18px;
    display: grid;
    gap: 5px;
  }
  .board__method__foot { margin-top: 10px; }
  .board__method__foot a { color: var(--blue); font-weight: 700; text-decoration: none; }
  .board__method__foot a:hover { text-decoration: underline; }


  .row.flash::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(230,57,70,.10), transparent);
    animation: flash 1.6s ease-out forwards;
  }
  [data-theme="dark"] .row.flash::after {
    background: linear-gradient(90deg, transparent, rgba(255,77,92,.14), transparent);
  }
  @keyframes flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

  /* Skeleton */
  .skeleton .row__thumb-link,
  .skeleton .row__team,
  .skeleton .row__meta,
  .skeleton .row__value,
  .skeleton .row__change {
    background: linear-gradient(90deg, var(--shimmer-a) 0%, var(--shimmer-b) 50%, var(--shimmer-a) 100%);
    background-size: 200% 100%;
    color: transparent !important;
    border-radius: 2px;
    animation: shimmer 1.4s linear infinite;
    display: inline-block;
    min-height: 12px;
  }
  .skeleton .row__thumb-link { border-color: transparent; }
  .skeleton .row__team   { width: 70%; height: 15px; }
  .skeleton .row__meta   { width: 45%; height: 11px; }
  .skeleton .row__value  { width: 64px; height: 16px; }
  .skeleton .row__change { width: 52px; height: 13px; }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

  /* Side panels */
  .panel {
    background: var(--panel);
    border: 1px solid var(--rule);
    padding: 14px 16px;
  }
  .panel--memo { border-top: 5px solid var(--blue); }
  .panel--feat { border-top: 5px solid var(--green); }

  .ebay-list { list-style: none; padding: 0; margin: 0; }
  .ebay-list li {
    padding: 12px 0;
    border-top: 1px solid var(--rule-soft);
    display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center;
  }
  .ebay-list li:first-child { border-top: 0; padding-top: 4px; }
  .ebay-thumb {
    width: 52px; height: 52px;
    background: var(--panel-2);
    border: 1px solid var(--rule-soft);
    display: flex; align-items: center; justify-content: center;
    font-size: 22px;
  }
  .ebay-title {
    font-size: 13px; line-height: 1.4; color: var(--ink); font-weight: 500;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  .ebay-listing-link:hover .ebay-thumb-wrap { transform: scale(1.06); }
  .ebay-listing-link:hover .ebay-title { color: var(--red); }
  .ebay-price {
    font-family: var(--font-mono);
    font-size: 11px; font-weight: 600;
    color: var(--red);
    letter-spacing: .04em; margin-top: 2px;
  }
  .ebay-cta {
    display: block; text-align: center;
    margin-top: 14px;
    padding: 11px 12px;
    background: var(--ink);
    color: var(--bg);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
    border: 1px solid var(--ink);
    transition: background .15s, color .15s;
  }
  .ebay-cta:hover { background: var(--red); border-color: var(--red); color: #FFFFFF; }
  .disclosure {
    font-family: var(--font-mono);
    font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-muted); margin: 10px 0 0; text-align: center;
  }

  .rail-stack > * + * { margin-top: 24px; }

  /* Footer band — watch strip (YouTube + TikTok shorts) + 728x90 */
  .footer-band {
    background: var(--panel);
    border-top: 6px solid var(--red);
    margin-top: 36px;
  }
  .footer-band__inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 32px 20px 28px;
  }

  /* Short-clips strip */
  .clip-strip__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 18px;
  }
  .clip-strip__title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(30px, 5vw, 56px);
    text-transform: uppercase;
    line-height: .92;
    letter-spacing: .005em;
    margin: 4px 0 8px;
    color: var(--ink);
  }
  .clip-strip__lede {
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin: 0;
    max-width: 560px;
  }
  .clip-strip__follow { display: flex; gap: 10px; flex-wrap: wrap; }
  .clip-strip__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 16px;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid transparent;
    white-space: nowrap;
    transition: transform .15s, opacity .15s;
  }
  .clip-strip__btn:hover { transform: translateY(-1px); opacity: .92; }
  .clip-strip__btn--yt { background: #FF0000; color: #FFFFFF; }
  .clip-strip__btn--tt { background: var(--ink); color: var(--bg); }
  .clip-strip__btn-ico { font-size: 12px; }

  .clip-strip__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .clip-strip__track {
    display: inline-flex;
    align-items: stretch;
    gap: 16px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    white-space: nowrap;
    animation: clip-marquee 48s linear infinite;
    will-change: transform;
  }
  .clip-strip__viewport:hover .clip-strip__track,
  .clip-strip__viewport:focus-within .clip-strip__track {
    animation-play-state: paused;
  }
  /* Don't auto-scroll until JS has duplicated the set (avoids a half-empty loop) */
  .clip-strip__track:not([data-ready]) { animation: none; }
  @keyframes clip-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .clip-strip__track { animation: none; }
    .clip-strip__viewport { overflow-x: auto; }
  }

  .clip-card {
    flex: 0 0 auto;
    width: 168px;
    white-space: normal;
    display: flex;
    flex-direction: column;
  }
  .clip-card__thumb {
    position: relative;
    display: block;
    width: 168px;
    height: 252px; /* 9:16 short */
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(150deg, #1a2433 0%, #2c3a4f 100%);
    border: 1px solid var(--rule);
    text-decoration: none;
  }
  .clip-card--tt .clip-card__thumb { background: linear-gradient(150deg, #101218 0%, #232c3a 100%); }
  .clip-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .clip-card__platform {
    position: absolute; top: 8px; left: 8px;
    font-family: var(--font-mono);
    font-size: 9px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
    padding: 4px 7px; border-radius: 999px;
    color: #FFFFFF;
  }
  .clip-card__platform--yt { background: #FF0000; }
  .clip-card__platform--tt { background: rgba(0,0,0,.85); border: 1px solid rgba(255,255,255,.25); }
  .clip-card__play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(0,0,0,.55);
    color: #FFFFFF; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s, background .15s;
  }
  .clip-card__thumb:hover .clip-card__play { transform: translate(-50%, -50%) scale(1.08); background: rgba(0,0,0,.72); }
  .clip-card__dur {
    position: absolute; bottom: 8px; right: 8px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: #FFFFFF; background: rgba(0,0,0,.7);
    padding: 2px 6px; border-radius: 5px;
  }
  .clip-card__meta { padding: 9px 2px 0; }
  .clip-card__title {
    font-size: 12.5px; line-height: 1.35; color: var(--ink);
    margin: 0 0 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .clip-card__share {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-muted); text-decoration: none;
    border: 1px solid var(--rule); border-radius: 999px;
    padding: 4px 9px;
    transition: color .15s, border-color .15s;
  }
  .clip-card__share:hover { color: var(--ink); border-color: var(--ink-soft); }

  .footer-ad {
    width: 100%;
    height: 100px;
    margin-top: 28px;
  }
  @media (max-width: 768px) { .footer-ad { height: 100px; } }

  /* Footer */
  footer {
    max-width: var(--measure);
    margin: 40px auto 0;
    padding: 20px 20px 36px;
    border-top: 2px solid var(--rule);
    font-family: var(--font-mono);
    font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-muted);
    display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between;
  }
  footer a { color: var(--ink-soft); text-decoration: none; }
  footer a:hover { color: var(--red); }

  /* ========== GAME SCHEDULE STRIP ========== */
  .schedule-strip {
    background: var(--panel);
    border-top: 5px solid var(--green);
    border-bottom: 1px solid var(--rule);
  }
  .schedule-strip__inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 20px;
  }
  .schedule-strip__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .schedule-strip__head .h-section {
    font-size: 28px;
    margin: 0;
  }
  .schedule-strip__tz {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .schedule-strip__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--rule-soft);
  }
  @media (max-width: 720px) {
    .schedule-strip__grid { grid-template-columns: 1fr; }
  }
  .schedule-strip__col {
    border-right: 1px solid var(--rule-soft);
  }
  @media (max-width: 720px) {
    .schedule-strip__col { border-right: none; border-bottom: 1px solid var(--rule-soft); }
    .schedule-strip__col:last-child { border-bottom: none; }
  }
  .schedule-strip__col:last-child { border-right: none; }
  .schedule-strip__day-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    padding: 12px 16px;
    border-bottom: 1px solid var(--rule-soft);
    background: var(--panel-2);
  }
  .schedule-strip__list { list-style: none; margin: 0; padding: 0; }
  .schedule-strip__game {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 13px;
  }
  .schedule-strip__game:last-child { border-bottom: none; }
  .schedule-strip__matchup {
    font-family: var(--font-ui);
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .schedule-strip__time {
    font-family: var(--font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--ink-soft);
  }
  .schedule-strip__time--live {
    color: var(--red);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .schedule-strip__live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--red);
    animation: pulse-red 1.4s ease-in-out infinite;
    display: inline-block;
  }
  .schedule-strip__more {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 10px 16px;
    text-align: center;
    border-top: 1px solid var(--rule-soft);
  }
  .schedule-strip__empty {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    text-align: center;
    padding: 24px;
  }

  /* ========== GAME SCHEDULE TICKER (single-line, scrolling) ========== */
  .schedule-ticker {
    background: var(--panel);
    border-top: 3px solid var(--green);
    border-bottom: 1px solid var(--rule);
    overflow: hidden;
  }
  .schedule-ticker__inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .schedule-ticker__label {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-right: 14px;
    border-right: 1px solid var(--rule-soft);
  }
  .schedule-ticker__label strong {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: .12em;
  }
  .schedule-ticker__viewport {
    flex: 1 1 auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  }
  .schedule-ticker__track {
    display: inline-flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
    animation: schedule-marquee 60s linear infinite;
    will-change: transform;
  }
  .schedule-ticker__viewport:hover .schedule-ticker__track,
  .schedule-ticker__viewport:focus-within .schedule-ticker__track {
    animation-play-state: paused;
  }
  @media (prefers-reduced-motion: reduce) {
    .schedule-ticker__track { animation: none; }
    .schedule-ticker__viewport { overflow-x: auto; }
  }
  @keyframes schedule-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .schedule-ticker__day {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding: 2px 8px;
    border: 1px solid var(--rule-soft);
    border-radius: 999px;
  }
  .schedule-ticker__game {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--ink);
  }
  .schedule-ticker__game .league {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1em;
    padding: 2px 6px;
    color: #fff;
    border-radius: 2px;
  }
  .schedule-ticker__matchup {
    font-family: var(--font-ui);
    font-weight: 500;
  }
  .schedule-ticker__time {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }
  .schedule-ticker__time--live {
    color: var(--red);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .schedule-ticker__live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--red);
    animation: pulse-red 1.4s ease-in-out infinite;
  }
  .schedule-ticker__sep {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--rule);
    display: inline-block;
  }
  .schedule-ticker__empty {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    padding: 4px 0;
  }

  /* ========== INQUIRY FORM (sidebar widget) ========== */
  .inquiry {
    border: 1px solid var(--rule);
    background: var(--panel);
    padding: 14px;
  }
  .inquiry__intro {
    font-size: 12.5px;
    color: var(--ink-soft);
    line-height: 1.45;
    margin: 0 0 12px;
  }
  .inquiry__form { display: flex; flex-direction: column; gap: 8px; }
  .inquiry__label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 2px;
  }
  .inquiry__input,
  .inquiry__textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font-family: var(--font-ui);
    font-size: 13px;
    border: 1px solid var(--rule);
    background: var(--panel-2);
    color: var(--ink);
    border-radius: 2px;
    transition: border-color .12s ease;
  }
  .inquiry__input:focus,
  .inquiry__textarea:focus {
    outline: none;
    border-color: var(--red);
  }
  .inquiry__textarea { resize: vertical; min-height: 80px; max-height: 240px; }
  .inquiry__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .inquiry__submit {
    margin-top: 4px;
    padding: 9px 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--panel);
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: opacity .12s;
  }
  .inquiry__submit:hover:not(:disabled) { opacity: .85; }
  .inquiry__submit:disabled { opacity: .5; cursor: not-allowed; }
  .inquiry__status {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    min-height: 14px;
  }
  .inquiry__status--ok    { color: var(--green); }
  .inquiry__status--err   { color: var(--red); }
  /* Hidden honeypot — bots see and fill it, humans don't. */
  .inquiry__hp {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  /* ========== BLOG RAIL (compact, for sidebars) ========== */
  .blog-rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .blog-rail__item {
    border: 1px solid var(--rule);
    background: var(--panel);
    transition: border-color .15s, transform .15s;
  }
  .blog-rail__item:hover { border-color: var(--red); transform: translateY(-1px); }
  .blog-rail__link {
    display: block;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
  }
  .blog-rail__category {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 2px;
    color: #fff;
    margin-bottom: 6px;
  }
  .blog-rail__title {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 13.5px;
    line-height: 1.3;
    margin: 0 0 4px;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-rail__date {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .blog-rail__all {
    display: inline-block;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
  }
  .blog-rail__all:hover { color: var(--red); }

  /* ========== BOARD PAGINATION ========== */
  .board__pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--rule-soft);
    background: var(--panel-2);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  /* The `display:flex` above overrides the UA `[hidden]{display:none}` rule, so
     restore it explicitly — otherwise JS setting `hidden` leaves the bar visible
     with stale page info (e.g. a single-page filtered view showing "Page 1/2"). */
  .board__pagination[hidden] {
    display: none;
  }
  .board__pagination-info { color: var(--ink-muted); }
  .board__pagination-controls { display: inline-flex; gap: 6px; }
  .board__page-btn {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 6px 12px;
    background: var(--panel);
    color: var(--ink);
    border: 1px solid var(--rule);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
  }
  .board__page-btn:hover:not(:disabled) {
    background: var(--ink);
    color: var(--panel);
    border-color: var(--ink);
  }
  .board__page-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
  }

  /* ========== BLOG STRIP (kept for /blog landing, hidden on home) ========== */
  .blog-strip {
    background: var(--panel);
    border-top: 5px solid var(--blue);
    border-bottom: 1px solid var(--rule);
  }
  .blog-strip__inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 28px 20px 20px;
  }
  .blog-strip__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 16px;
  }
  @media (max-width: 980px) {
    .blog-strip__grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .blog-strip__grid { grid-template-columns: 1fr; }
  }
  .blog-strip__card {
    display: block;
    border: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .15s;
  }
  .blog-strip__card:hover {
    border-color: var(--red);
    transform: translateY(-1px);
  }
  .blog-strip__card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .blog-strip__top {
    padding: 10px 14px;
    border-bottom: 1px solid var(--rule-soft);
    background: var(--panel-2);
  }
  .blog-strip__category {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 2px;
    color: #fff;
  }
  .blog-strip__body {
    padding: 14px;
  }
  .blog-strip__title {
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
    color: var(--ink);
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-strip__excerpt {
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-soft);
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-strip__date {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  .blog-strip__footer {
    margin-top: 16px;
    text-align: right;
  }
  .blog-strip__all {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    transition: color .15s;
  }
  .blog-strip__all:hover { color: var(--red); }

  /* ========== SCORE MY GOAL HIGHLIGHT ========== */
  .smg-highlight {
    background: var(--panel);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .smg-highlight__inner {
    max-width: var(--measure);
    margin: 0 auto;
    padding: 36px 20px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
    align-items: center;
  }
  @media (max-width: 760px) {
    .smg-highlight__inner { grid-template-columns: 1fr; padding: 28px 20px; }
  }
  .smg-highlight__eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 700;
    margin: 0 0 10px;
  }
  .smg-highlight__title {
    font-family: var(--font-ui);
    font-size: 28px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
  }
  .smg-highlight__desc {
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0 0 18px;
    max-width: 52ch;
  }
  .smg-highlight__cta {
    display: inline-block;
    background: var(--blue);
    color: #fff;
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 12px 20px;
    border-radius: 2px;
    transition: transform .15s, filter .15s;
  }
  .smg-highlight__cta:hover { transform: translateY(-1px); filter: brightness(1.08); }
  .smg-highlight__cta:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

  /* ========== TRENDING NOW TICKER (header, right of the logo; links to DRIFT) ========== */
  /* Rotating mini-board of the top confident movers from /api/signals.       */
  /* Degrade-safe: a static tagline shows until JS populates / if the API is  */
  /* unavailable, so the slot is never empty.                                 */
  .trend-ticker {
    align-self: center;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 60px;
    padding: 9px 15px;
    border: 1px solid color-mix(in srgb, var(--blue) 32%, transparent);
    border-left: 3px solid var(--blue);
    border-radius: 8px;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--blue) 10%, transparent),
      color-mix(in srgb, var(--blue) 2%, transparent));
    text-decoration: none;
    color: var(--ink);
    transition: background .15s, border-color .15s, transform .15s;
  }
  .trend-ticker:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--blue) 58%, transparent);
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--blue) 15%, transparent),
      color-mix(in srgb, var(--blue) 4%, transparent));
  }
  .trend-ticker__live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--blue);
    white-space: nowrap;
    flex: none;
  }
  .trend-ticker__dot {
    width: 7px;
    height: 7px;
    border-radius: 99px;
    background: var(--blue);
    animation: driftTeasePulse 1.9s infinite;
  }
  @keyframes driftTeasePulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 45%, transparent); }
    70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--blue) 0%, transparent); }
  }
  .trend-ticker__body {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 11px;
    opacity: 1;
    transition: opacity .3s;
  }
  .trend-ticker__fallback {
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.45;
    color: var(--ink-soft);
  }
  .trend-ticker__thumb {
    width: 34px;
    height: 48px;
    border-radius: 5px;
    object-fit: cover;
    background: var(--panel-2);
    border: 1px solid var(--rule-soft);
    flex: none;
  }
  .trend-ticker__meta { min-width: 0; flex: 1; }
  .trend-ticker__name {
    display: block;
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .trend-ticker__desc {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
  }
  .trend-ticker__sigs { display: flex; gap: 6px; flex: none; }
  .trend-ticker__chip {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 5px;
    white-space: nowrap;
  }
  .trend-ticker__chip--heat { color: var(--red); background: color-mix(in srgb, var(--red) 13%, transparent); }
  .trend-ticker__chip--mom  { color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent); }
  /* Divergence items: a neutral population stat + the divergence read, colored
     to the same supply/demand language as the Divergence Engine. */
  .trend-ticker__chip--pop { color: var(--ink-soft); background: color-mix(in srgb, var(--ink-muted) 18%, transparent); }
  .trend-ticker__chip--sig-oversupply { color: var(--red);  background: color-mix(in srgb, var(--red) 13%, transparent); }
  .trend-ticker__chip--sig-watch      { color: var(--red);  background: color-mix(in srgb, var(--red) 9%, transparent); }
  .trend-ticker__chip--sig-scarcity   { color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent); }
  .trend-ticker__chip--sig-balanced,
  .trend-ticker__chip--sig-baseline   { color: var(--ink-muted); background: color-mix(in srgb, var(--ink-muted) 13%, transparent); }
  .trend-ticker__pips { display: flex; gap: 5px; flex: none; }
  .trend-ticker__pip {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--rule-soft);
    transition: background .15s;
  }
  .trend-ticker__pip.is-on { background: var(--blue); }
  @media (max-width: 960px) {
    .brand { grid-template-columns: auto auto; justify-content: space-between; }
    .trend-ticker { grid-column: 1 / -1; order: 3; flex-basis: 100%; }
  }
  @media (max-width: 640px) {
    /* On narrow screens the live label, card and signal chips no longer fit on
       one line, so wrap the card body onto its own row. The TRENDING NOW label
       and progress pips stay on the first line; the thumbnail, name and chips
       get the full width below, preventing the chips from overflowing and
       overlapping the pips. */
    .trend-ticker { flex-wrap: wrap; gap: 8px 12px; }
    .trend-ticker__live { order: 1; }
    .trend-ticker__pips { order: 2; margin-left: auto; }
    .trend-ticker__body { order: 3; flex-basis: 100%; }
    .trend-ticker__desc { display: none; }
  }
  .smg-highlight__preview {
    border: 1px solid var(--rule);
    background: var(--panel-2);
    padding: 20px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-soft);
    border-radius: 4px;
    position: relative;
  }
  .smg-highlight__preview-label {
    position: absolute;
    top: -10px; left: 14px;
    background: var(--panel);
    padding: 0 8px;
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-muted);
    font-weight: 700;
  }
  .smg-highlight__preview-quote {
    color: var(--ink);
    font-style: italic;
    margin: 0 0 14px;
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    font-style: normal;
  }
  .smg-highlight__preview-score {
    display: flex;
    align-items: baseline;
    gap: 8px;
    border-top: 1px solid var(--rule-soft);
    padding-top: 12px;
  }
  .smg-highlight__preview-num {
    font-family: var(--font-ui);
    font-size: 36px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .smg-highlight__preview-tier {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--red);
    font-weight: 700;
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* ===== TRENDING STRIP (insert before closing style tag) ===== */
  .trending-strip {
    max-width: var(--measure);
    margin: 28px auto 0;
    padding: 0 20px;
  }
  .trending-strip__container {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-top: 5px solid var(--ink);
  }
  .trending-strip__header {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 12px; flex-wrap: wrap;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--rule);
  }
  .trending-strip__header-left { display: flex; flex-direction: column; gap: 2px; }
  .trending-strip__updated {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink-muted);
  }
  .trending-strip__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .trending-strip__card {
    display: flex; flex-direction: column;
    padding: 16px 18px 14px; min-height: 180px;
    border-right: 1px solid var(--rule-soft);
    text-decoration: none; color: inherit;
    transition: border-color .12s, transform .12s;
    cursor: pointer;
  }
  .trending-strip__card:last-child { border-right: none; }
  .trending-strip__card:hover {
    border-color: var(--red);
    transform: translateY(-1px);
  }
  @media (max-width: 768px) {
    .trending-strip__card { border-right: none; border-bottom: 1px solid var(--rule-soft); }
    .trending-strip__card:last-child { border-bottom: none; }
  }
  .trending-strip__card-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  }
  .trending-strip__avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--panel-2);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 16px; color: var(--ink);
    flex-shrink: 0; text-transform: uppercase;
  }
  .trending-strip__names { display: flex; flex-direction: column; gap: 1px; }
  .trending-strip__displayName {
    font-family: var(--font-ui); font-weight: 600; font-size: 13.5px; color: var(--ink);
    display: flex; align-items: center; gap: 4px;
  }
  .trending-strip__handle {
    font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted);
  }
  .trending-strip__verified {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--blue); display: inline-block;
  }
  .trending-strip__tweet {
    font-family: var(--font-ui); font-weight: 400; font-size: 14px;
    line-height: 1.45; color: var(--ink); flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: 10px;
  }
  .trending-strip__footer {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ink-muted); margin-top: auto;
  }
  .trending-strip__empty {
    padding: 32px; text-align: center;
    font-family: var(--font-mono); font-size: 12px;
    color: var(--ink-muted);
  }
  .trending-strip__social {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .trending-strip__social-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    border-right: 1px solid var(--rule-soft);
    color: inherit;
    text-decoration: none;
    transition: border-color .12s, transform .12s, color .12s;
  }
  .trending-strip__social-link:last-child { border-right: none; }
  .trending-strip__social-link:hover {
    border-color: var(--red);
    color: var(--red);
    transform: translateY(-1px);
  }
  .trending-strip__social-platform {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
  }
  .trending-strip__social-handle {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  /* =========================================================
     GRADES DIALOG MODAL
     ========================================================= */
  .grades-dialog {
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 0;
    max-width: 650px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    color: var(--ink);
    font-family: var(--font-ui);
    overflow: hidden;
  }
  .grades-dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
  }
  .grades-header {
    background: var(--panel-2);
    padding: 20px 24px;
    border-bottom: 1px solid var(--rule-soft);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .grades-title-area {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .grades-title {
    font-family: var(--font-ui);
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
  }
  .grades-meta {
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--ink-soft);
  }
  .grades-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color .15s, color .15s;
  }
  .grades-close:hover {
    background: rgba(0,0,0,0.05);
    color: var(--ink);
  }
  [data-theme="dark"] .grades-close:hover {
    background: rgba(255,255,255,0.05);
  }
  .grades-body {
    padding: 24px;
    max-height: 70dvh;
    overflow-y: auto;
  }
  .grades-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--rule-soft);
    padding-bottom: 12px;
  }
  .grades-filter-btn {
    background: var(--panel-2);
    border: 1px solid var(--rule-soft);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    transition: all .15s;
  }
  .grades-filter-btn:hover {
    background: var(--bg);
    color: var(--ink);
  }
  .grades-filter-btn.is-active {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
  }
  .grades-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--rule-soft);
    border-radius: 8px;
    background: var(--panel);
  }
  .grades-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    text-align: left;
  }
  .grades-table th, .grades-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--rule-soft);
  }
  .grades-table th {
    background: var(--panel-2);
    font-weight: 600;
    font-family: var(--font-ui);
    color: var(--ink-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .grades-table tr:last-child td {
    border-bottom: none;
  }
  .grades-table td.col-grade {
    font-family: var(--font-mono);
    font-weight: 700;
  }
  .grades-table td.col-num {
    font-family: var(--font-mono);
  }
  .grades-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .grades-badge--psa { background: #FFEBEE; color: #C62828; }
  .grades-badge--bgs { background: #E3F2FD; color: #1565C0; }
  .grades-badge--sgc { background: #ECEFF1; color: #37474F; }
  .grades-badge--raw { background: #FFF3E0; color: #EF6C00; }
  [data-theme="dark"] .grades-badge--psa { background: #5C1919; color: #FF8A80; }
  [data-theme="dark"] .grades-badge--bgs { background: #13335A; color: #82B1FF; }
  [data-theme="dark"] .grades-badge--sgc { background: #263238; color: #CFD8DC; }
  [data-theme="dark"] .grades-badge--raw { background: #4E2C15; color: #FFB74D; }

  .grades-empty {
    padding: 40px;
    text-align: center;
    color: var(--ink-muted);
    font-size: 14px;
  }
  .grades-empty-title {
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 4px;
  }
  @media (max-width: 640px) {
    .trending-strip__social { grid-template-columns: 1fr; }
    .trending-strip__social-link {
      border-right: none;
      border-bottom: 1px solid var(--rule-soft);
    }
    .trending-strip__social-link:last-child { border-bottom: none; }
  }

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