/* ============================================================================
   HKPL DESIGN TOKENS — the canonical design contract (bedrock).
   DESIGN-TOKENS-V1 (2026-07-11). Authored from the forensic scan of all 103
   pages (411 hex colours → the ~30 real ones; 69 font stacks → 4 roles; 60
   radii → 5). 2026 model: primitives → SEMANTIC roles → templates.

   THE RIGID CONTRACT
   ------------------
   • Pages read ONLY Tier-2 semantic tokens (--brand, --ink, --line…) and the
     scale tokens (--fs-*, --space-*, --r-*). NEVER a raw hex, NEVER a primitive.
   • A "template" overrides ONLY the semantic tokens + the density/shape/type
     knobs — never touches a page. So a NEW design = a new [data-template] block
     below. Zero page edits. That rigidity is what lets us add skins forever.
   • A "tenant colour" = tenant-theme.js sets --brand / --brand-strong /
     --brand-soft from Tenant.theme_color. Templates and tenant colour compose.
   ============================================================================ */
@import url('/css/_auto-tokens.generated.css');   /* exact one-off colours pulled from migrated pages */

:root {
  /* ── TIER 1 · PRIMITIVES (raw palette — from the scan; never used by pages directly) ── */
  --c-green-900:#004d1c; --c-green-800:#006c2c; --c-green-700:#008034; --c-green-600:#00913a; --c-green-500:#12a24a;
  --c-green-100:#d1fae5; --c-green-50:#ecfdf5;  --c-lime-400:#9dff5b;
  --c-ink-900:#0a0e0c;   --c-ink-800:#0f172a;
  --c-gray-700:#374151;  --c-gray-600:#4b5563;  --c-gray-500:#6b7280;  --c-gray-400:#9ca3af;
  --c-gray-300:#d1d5db;  --c-gray-200:#e5e7eb;  --c-gray-100:#f3f4f6;  --c-gray-50:#f9fafb;  --c-white:#ffffff;
  --c-red-700:#b91c1c;   --c-red-600:#dc2626;   --c-red-50:#fef2f2;
  --c-amber-800:#92400e; --c-amber-700:#b45309; --c-amber-50:#fef3c7;
  --c-blue-800:#1e40af;  --c-blue-50:#eff6ff;
  /* mainland-China palette (Taobao orange / JD-refined red / festive gold) */
  --c-orange-500:#ff5000; --c-orange-600:#ff3d00; --c-red-cn:#ef4444; --c-red-cn-strong:#c81e1e;
  --c-gold-500:#e6b422;   --c-gold-600:#c8961a;   --c-orange-50:#fff3ec; --c-red-cn-50:#fef2f2;

  /* ── TIER 2 · SEMANTIC ROLES (THE CONTRACT — templates override these) ── */
  /* A11Y-BRAND-V1 (2026-07-11): brand was #00913a → white text on it = 4.1:1 (fails WCAG AA 4.5). Nudged to
     #008034 (=green-700, white contrast ~5.0, passes AA) — still clearly HKPL green. One-line revert to --c-green-600. */
  --brand:var(--c-green-700);  --brand-strong:var(--c-green-800);  --brand-soft:var(--c-green-50);
  --accent:var(--c-lime-400);  --on-brand:var(--c-white);
  --brand-grad:var(--brand);   /* CTAs: background:var(--brand-grad). templates can make this a gradient */
  /* brand SCALE derived from --brand via color-mix → set one --brand, the whole Tailwind hkpl-* scale
     follows (and a tenant colour / template cascades automatically). Classic computes within 1-2 of the
     old hand-picked #e6f4ec/#008034/#006c2c — imperceptible. This is the "add a template = one colour" win. */
  --brand-50:color-mix(in srgb, var(--brand), white 90%);
  --brand-100:color-mix(in srgb, var(--brand), white 80%);
  --brand-200:color-mix(in srgb, var(--brand), white 58%);
  --brand-300:color-mix(in srgb, var(--brand), white 48%);
  --brand-400:color-mix(in srgb, var(--brand), white 25%);
  --brand-500:var(--brand);
  --brand-600:color-mix(in srgb, var(--brand), black 12%);
  --brand-700:color-mix(in srgb, var(--brand), black 25%);
  --brand-800:color-mix(in srgb, var(--brand), black 40%);
  --brand-900:color-mix(in srgb, var(--brand), black 61%);
  --ink:var(--c-ink-900);      --muted:var(--c-gray-500);          --line:var(--c-gray-200);
  --bg:var(--c-gray-50);       --surface:var(--c-white);           --card:var(--c-white);
  --danger:var(--c-red-600);   --danger-soft:var(--c-red-50);      --on-danger:var(--c-white);
  --warn:var(--c-amber-700);   --warn-soft:var(--c-amber-50);
  --info:var(--c-blue-800);    --info-soft:var(--c-blue-50);
  --focus:var(--brand);

  /* ── TIER 2b · EXTENDED SEMANTIC (surfaces, states, badges — Classic values = today's exact) ──
     Every recurring UI state gets a token so pages reference roles, never raw hex. A theme can
     restyle any of these; Classic reproduces the current look 1:1. */
  --paper:#f5f5f0;              /* warm sheet-page background (scoresheet/print surfaces) */
  --surface-2:#fafafa;         /* subtle inner fill (table label cells, folds) */
  --ink-2:#0f172a;             /* dark slate — inverse headers, heavy borders (a BACKGROUND; stays dark) */
  --ink-slate:#0f172a;         /* primary body/label TEXT in the slate variant — inverts light↔dark per template
                                  (pages that painted body text with --ink-2 should read this so text is legible
                                  on dark; light value is byte-identical to the old --ink-2). */
  --field-ink:#000000;         /* TYPED text inside form controls — :root = the UA default (#000) so light is
                                  byte-identical; inverts to light on dark templates so typed values stay legible. */
  /* WhatsApp-chat palette (chat-ui.css authority; messages.html + app.html chat). :root = exact current light
     literals (byte-identical); dark templates swap to the WhatsApp-dark scheme so bubbles/canvas darken. */
  --wa-canvas:#efeae2; --wa-in:#ffffff; --wa-out:#d9fdd3; --wa-ink:#111b21; --wa-meta:#667781;
  --wa-daysep-bg:#ffffff; --wa-daysep-fg:#54656f; --wa-quote:#dcf3ea;
  --line-strong:#d1d5db;       /* stronger border than --line */
  --muted-strong:#4b5563; --muted-2:#6b7280; --muted-3:#9aa0aa;  /* A11Y-V1: darkened for WCAG-AA text contrast (was #9ca3af/#cbd5e1, 2.5:1) */
  --brand-hover:#007a30; --brand-soft-2:#f0fdf4;
  --ok-bg:#d1fae5;  --ok-fg:#065f46;  --ok-line:#a7f3d0;  --ok-fg-2:#14532d;
  --warn-bg:#fef3c7; --warn-fg:#92400e;
  --err-bg:#fee2e2;  --err-fg:#991b1b;  --err-line:#fecaca;  --err-strong:#b91c1c;
  --badge-f-bg:#ffe9d6; --badge-f-fg:#92400e; --badge-m-bg:#d9f0e3; --badge-m-fg:#065f46;
  --win-a-bg:#d1fae5; --win-b-bg:#dbeafe;
  --warn-line:#fde68a; --info-line:#bfdbfe;
  --table-head-fg:#374151;
  /* UNDEFINED-TOKEN-FILL 2026-09-05: structural roles referenced fleet-wide but DEFINED NOWHERE — they
     fell back to their light literal and never flipped. Light values below are BYTE-IDENTICAL to the prior
     fallback literal (so light is unchanged); dark values live in the midnight/dark + arena blocks. */
  --table-head-bg:#f8fafc; --card-bg:#fff; --chip-bg:rgba(0,145,58,.10); --brand-ink:#00622a; --initials-bg:#006c2c;

  /* ── TIER 2c · UTILITY SHADE TOKENS (THEME-SURFACES-V2, 2026-08-03) ──────────────────────────
     The "last mile" of the template engine: raw Tailwind colour utilities (text-gray-700, bg-gray-100,
     bg-amber-50 …) hard-code hex, so a dark template never reached utility-painted pixels. theme-surfaces.css
     repoints each utility at ONE of these tokens. RULE: every :root value below is BYTE-IDENTICAL to the
     Tailwind literal that utility renders today (verified by before/after computed-colour probe), so the
     DEFAULT + every LIGHT template is pixel-unchanged. Only the DARK template blocks (midnight/arena) override
     them → utility-painted content finally darkens. Mapping lives ONLY here + theme-surfaces.css (one truth).
     (text-gray-400/300 are deliberately NOT here — a pre-existing A11y !important already pins them.) */
  --u-t900:#111827; --u-t800:#1f2937; --u-t700:#374151; --u-t600:#4b5563; --u-t500:#6b7280; /* gray text */
  --u-bg100:#f3f4f6; --u-bg200:#e5e7eb; --u-bg300:#d1d5db;                                  /* gray fills */
  --u-bd300:#d1d5db;                                                                         /* gray border */
  --u-amber50:#fffbeb; --u-red50:#fef2f2; --u-green50:#f0fdf4; --u-blue50:#eff6ff;           /* tinted bg */

  /* ── TYPE (fluid clamp() — 2026 standard) ── */
  --font-display:'Akshar',sans-serif;
  --font-body:'Albert Sans','Noto Sans TC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-serif:'Source Serif 4',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --fs-xs:clamp(.72rem,.70rem+.10vw,.78rem);
  --fs-sm:clamp(.82rem,.79rem+.15vw,.90rem);
  --fs-base:clamp(.95rem,.90rem+.22vw,1.02rem);
  --fs-lg:clamp(1.10rem,1.00rem+.40vw,1.25rem);
  --fs-xl:clamp(1.40rem,1.18rem+.80vw,1.80rem);
  --fs-2xl:clamp(1.80rem,1.40rem+1.6vw,2.60rem);
  --lh-tight:1.15; --lh:1.5;

  /* ── DENSITY (a knob templates swap — drives spacing + row height) ── */
  --u:4px;
  --space-1:var(--u); --space-2:calc(var(--u)*2); --space-3:calc(var(--u)*3);
  --space-4:calc(var(--u)*4); --space-5:calc(var(--u)*5); --space-6:calc(var(--u)*6);
  --pad:var(--space-3); --pad-roomy:var(--space-5); --gap:var(--space-3); --row-h:44px;

  /* ── SHAPE ── */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px; --r-circle:50%;

  /* ── ELEVATION ── */
  --shadow-sm:0 1px 2px rgba(10,14,12,.06);
  --shadow-md:0 6px 18px -8px rgba(10,14,12,.18);
  --shadow-lg:0 18px 40px -16px rgba(10,14,12,.28);

  /* ── MOTION (the delight layer reads these; honours reduced-motion below) ── */
  --ease-spring:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-fast:120ms; --dur:200ms; --dur-slow:320ms;
}

/* ══════════════════════════ TEMPLATES ══════════════════════════
   Each block below is a COMPLETE new design. It overrides only semantic
   tokens + knobs. To add a design: copy a block, rename, change values,
   register the name in the template picker. No page is ever touched.
   ─────────────────────────────────────────────────────────────── */

/* AURORA — the default (:root above). Airy, whitespace-heavy, rounded, modern 2026. */

/* COMPACT PRO — dense, information-rich; for admins / power users. */
[data-template="compact"]{
  --u:3px; --row-h:34px;
  --r-sm:4px; --r-md:7px; --r-lg:10px;
  --fs-base:clamp(.88rem,.85rem+.10vw,.94rem);
  --shadow-md:0 3px 10px -6px rgba(10,14,12,.16);
}

/* EXECUTIVE — formal: serif headlines, ledger (tabular) numerals, crisp corners, quiet palette. */
[data-template="executive"]{
  --font-display:var(--font-serif);
  --r-sm:2px; --r-md:4px; --r-lg:6px;
  --brand:var(--c-green-800); --accent:var(--c-green-600);
  --bg:var(--c-white); --card:var(--c-gray-50);
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* DARK — the unified dark palette. Shared by the `midnight` template AND the explicit
   [data-theme="dark"] toggle (merged + aligned 2026-09-05, tokenization sweep C) so the two can
   never drift. TOKENS ONLY — the paint/utility remaps live below, keyed on these same states.
   The prefers-color-scheme guard that follows re-applies the same tokens so an OS-dark visitor on a
   default (un-templated, un-themed) page gets dark without an explicit choice; an explicit template
   or [data-theme] is excluded there, so every LIGHT template stays light under OS dark. */
[data-template="midnight"],
:root[data-theme="dark"]{
  --ink:#e8efe9; --muted:#b4bfb7; --line:#2a3630; --line-strong:#3a473f;
  --bg:#0f1512; --surface:#161d19; --surface-2:#1e2723; --card:#161d19;
  --brand:#1fb85c; --brand-soft:#13291d; --brand-soft-2:#12241a; --on-brand:#04140b;
  /* brand ramp INVERTED for dark: pale 50/100 => the dark low-chroma end used as tinted BACKGROUNDS;
     strong 800/900 => the bright end used as brand INK. So var(--brand-50) as a "pale" bg is dark, not white. */
  --brand-50:#12241a; --brand-100:#173a24; --brand-200:#1c4a2e; --brand-300:#256b3f; --brand-400:#1a9950;
  --brand-500:var(--brand); --brand-600:#3fc873; --brand-700:#63d68f; --brand-800:#8fe3b0; --brand-900:#c2f1d5;
  /* brand as INK stays light (headings/links/secondary labels); the FILL (--brand) stays deep so a green
     button keeps its white text. (DARK-BRAND-INK-V1, 2026-08-06 — preserved.) */
  --brand-strong:#6fe3a4; --brand-hover:#8dedb8;
  /* extended Tier-2b tokens => dark. NOTE: --ink-2 is deliberately NOT flipped — it is dual-use
     (a dark-slate BACKGROUND for inverse topbars); --ink-slate is the invertible TEXT token. */
  --paper:#101512; --ink-slate:#e8efe9; --field-ink:#e8efe9; --danger-soft:#2c1717;
  --wa-canvas:#0b141a; --wa-in:#202c33; --wa-out:#005c4b; --wa-ink:#e9edef; --wa-meta:#8696a0;
  --wa-daysep-bg:#182229; --wa-daysep-fg:#8696a0; --wa-quote:#025144;
  --c-f7f8fa:#0f1512; --c-fbfaf3:#0f120d; --c-f8faf8:#0e1310;   /* cream/near-white page BODY bgs (auto-tokens) => dark */
  --muted-strong:#b9c6c1; --muted-2:#a6b2aa; --muted-3:#94a19a; --table-head-fg:#c0cac5;
  --table-head-bg:#1e2723; --card-bg:#161d19; --chip-bg:rgba(46,213,115,.14); --brand-ink:#8fe3b0; --initials-bg:#17663a;
  --ok-bg:#0f2418; --ok-fg:#8aedb0; --ok-line:#1f4d33; --ok-fg-2:#a7f3c8;
  --warn-bg:#2a2410; --warn-fg:#f2d18a; --warn-line:#4d4320;
  --err-bg:#2c1717; --err-fg:#f7a8a8; --err-line:#5a2a2a; --err-strong:#f78a8a;
  --info-soft:#141f30; --win-a-bg:#12241a; --win-b-bg:#141f30;
  --badge-f-bg:#2a2410; --badge-f-fg:#f2d18a; --badge-m-bg:#12241a; --badge-m-fg:#8aedb0;
  --u-t900:#e8efe9; --u-t800:#d5dcd8; --u-t700:#c0cac5; --u-t600:#a7b2ad; --u-t500:#b4bfb7;
  --u-bg100:#161d19; --u-bg200:#1d2521; --u-bg300:#232d28; --u-bd300:#3a473f;
  --u-amber50:#2a2410; --u-red50:#2c1717; --u-green50:#0f2418; --u-blue50:#141f30;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark) and (min-width: 100000px){
  /* auto-OS-dark DISABLED 2026-09-05: dark ships OPT-IN (toggle) only, so an OS-dark visitor who did
     NOT opt in isn't given a half-dark page (attribute-keyed chrome stays light). Re-enable by removing
     the "and (min-width: 100000px)" once the logged-in/gated pages have been dark-audited. */
  /* SYSTEM fallback (three-state guard). Byte-identical token values to the block above ON PURPOSE —
     if you edit one, edit both. Scoped to a page with NO explicit template/theme so light templates
     (and an explicit data-theme="light") are never clobbered by the OS setting. */
  :root:not([data-theme]):not([data-template]){
    --ink:#e8efe9; --muted:#b4bfb7; --line:#2a3630; --line-strong:#3a473f;
    --bg:#0f1512; --surface:#161d19; --surface-2:#1e2723; --card:#161d19;
    --brand:#1fb85c; --brand-soft:#13291d; --brand-soft-2:#12241a; --on-brand:#04140b;
    --brand-50:#12241a; --brand-100:#173a24; --brand-200:#1c4a2e; --brand-300:#256b3f; --brand-400:#1a9950;
    --brand-500:var(--brand); --brand-600:#3fc873; --brand-700:#63d68f; --brand-800:#8fe3b0; --brand-900:#c2f1d5;
    --brand-strong:#6fe3a4; --brand-hover:#8dedb8;
    --paper:#101512; --ink-slate:#e8efe9; --field-ink:#e8efe9; --danger-soft:#2c1717;
    --wa-canvas:#0b141a; --wa-in:#202c33; --wa-out:#005c4b; --wa-ink:#e9edef; --wa-meta:#8696a0;
    --wa-daysep-bg:#182229; --wa-daysep-fg:#8696a0; --wa-quote:#025144;
    --c-f7f8fa:#0f1512; --c-fbfaf3:#0f120d; --c-f8faf8:#0e1310;
    --muted-strong:#b9c6c1; --muted-2:#a6b2aa; --muted-3:#94a19a; --table-head-fg:#c0cac5;
  --table-head-bg:#1e2723; --card-bg:#161d19; --chip-bg:rgba(46,213,115,.14); --brand-ink:#8fe3b0; --initials-bg:#17663a;
    --ok-bg:#0f2418; --ok-fg:#8aedb0; --ok-line:#1f4d33; --ok-fg-2:#a7f3c8;
    --warn-bg:#2a2410; --warn-fg:#f2d18a; --warn-line:#4d4320;
    --err-bg:#2c1717; --err-fg:#f7a8a8; --err-line:#5a2a2a; --err-strong:#f78a8a;
    --info-soft:#141f30; --win-a-bg:#12241a; --win-b-bg:#141f30;
    --badge-f-bg:#2a2410; --badge-f-fg:#f2d18a; --badge-m-bg:#12241a; --badge-m-fg:#8aedb0;
    --u-t900:#e8efe9; --u-t800:#d5dcd8; --u-t700:#c0cac5; --u-t600:#a7b2ad; --u-t500:#b4bfb7;
    --u-bg100:#161d19; --u-bg200:#1d2521; --u-bg300:#232d28; --u-bd300:#3a473f;
    --u-amber50:#2a2410; --u-red50:#2c1717; --u-green50:#0f2418; --u-blue50:#141f30;
    color-scheme:dark;
  }
}

/* ARENA — dark neon-sport skin (competitor study, RunPlay 2026): near-black surfaces, teal energy,
   gradient CTAs. Same rigid contract as MIDNIGHT — value overrides only, no page is ever touched. */
[data-template="arena"]{
  --ink:#e9f1ee; --muted:#b4bfb7; --muted-strong:#b9c6c1; --muted-2:#a6b2aa; --muted-3:#94a19a;
  --line:#1e2f2a;
  --bg:#070b09; --surface:#0d1512; --card:#101a16;
  --brand:#14b8a6; --brand-strong:#0e9488; --brand-hover:#0e9488; --brand-soft:#0b221f;
  --brand-soft-2:#0b221f; --on-brand:#03110f;
  --brand-50:#0b221f; --brand-100:#103029;   /* keep soft-brand surfaces dark, not light-teal on dark */
  --accent:#3ae4cd; --focus:#3ae4cd;
  --brand-grad:linear-gradient(135deg,#14b8a6,#0e9488);
  --r-sm:6px; --r-md:11px; --r-lg:16px;
  --shadow-md:0 8px 22px -10px rgba(0,0,0,.55);
  --shadow-lg:0 20px 46px -18px rgba(0,0,0,.65);
  /* extended Tier-2b semantic tokens → dark (arena palette; muted-* already set above, --ink-2 left dual-use) */
  --paper:#0c1310; --surface-2:#111c18; --line-strong:#28382f; --table-head-fg:#b9c6c1; --ink-slate:#e9f1ee; --field-ink:#e9f1ee;
  --table-head-bg:#16221d; --card-bg:#101a16; --chip-bg:rgba(58,228,205,.14); --brand-ink:#7fe6cf; --initials-bg:#0c4a3c;
  --wa-canvas:#0a1013; --wa-in:#12201b; --wa-out:#0c3d34; --wa-ink:#e9f1ee; --wa-meta:#b4bfb7;
  --wa-daysep-bg:#12201b; --wa-daysep-fg:#b4bfb7; --wa-quote:#0c3d34;
  --c-f7f8fa:#070b09;   /* messages.html page gutter → dark */
  --c-fbfaf3:#0a0d08; --c-f8faf8:#090d0b;   /* cream/near-white page BODY backgrounds → dark */
  --ok-bg:#0d2017; --ok-fg:#7fe6cf; --ok-line:#1c4a3c; --ok-fg-2:#9df0dd;
  --warn-bg:#241f10; --warn-fg:#f2d18a; --warn-line:#463c1e;
  --err-bg:#271414; --err-fg:#f7a8a8; --err-line:#552828; --err-strong:#f78a8a;
  --info-soft:#111b2b; --brand-soft-2:#0b221f; --win-a-bg:#0b221f; --win-b-bg:#111b2b;
  --badge-f-bg:#241f10; --badge-f-fg:#f2d18a; --badge-m-bg:#0b221f; --badge-m-fg:#7fe6cf;
  /* utility shade tokens → dark (arena is a touch darker than midnight) */
  --u-t900:#e9f1ee; --u-t800:#d7e0dc; --u-t700:#b9c6c1; --u-t600:#9fb0aa; --u-t500:#b4bfb7;
  --u-bg100:#111c18; --u-bg200:#16221d; --u-bg300:#1c2a24; --u-bd300:#28382f;
  --u-amber50:#241f10; --u-red50:#271414; --u-green50:#0d2017; --u-blue50:#111b2b;
  color-scheme:dark;
}

/* ══════════ MAINLAND-CHINA SKINS (Taobao-trained taste: dense, warm, gradient CTAs) ══════════
   Same rigid contract — value overrides only. CJK-first fonts, higher density, red/orange = luck.
   NOTE: these deliver the *feel* (density + warmth + gradient + CJK type). The full Taobao
   "module-rich" promo layout (coupons/flash-sale/red-packets) is COMPONENT-level, not a token skin. */

/* MARKET 市集 — Taobao everyday: warm orange, high density, gradient action buttons. */
[data-template="market"]{
  --font-display:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',-apple-system,sans-serif;
  --u:2px; --row-h:32px;  /* mainland taste: very compact, minimal spacing, high density */ --r-sm:4px; --r-md:8px; --r-lg:12px;
  --brand:var(--c-orange-500); --brand-strong:var(--c-orange-600); --brand-soft:var(--c-orange-50);
  --brand-grad:linear-gradient(135deg,#ff6a00,#ff3d00); --accent:var(--c-gold-500);
  --fs-base:clamp(.88rem,.85rem+.10vw,.95rem);
}

/* VERMILION 朱砂 — JD-style bold, 2026-refined red (not pure), dense, festive-leaning. */
[data-template="vermilion"]{
  --font-display:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',-apple-system,sans-serif;
  --u:2px; --row-h:32px;  /* mainland taste: very compact, minimal spacing, high density */ --r-sm:5px; --r-md:9px; --r-lg:12px;
  --brand:var(--c-red-cn); --brand-strong:var(--c-red-cn-strong); --brand-soft:var(--c-red-cn-50);
  --brand-grad:linear-gradient(135deg,#f5555a,#c81e1e); --accent:var(--c-gold-500);
}

/* PROSPER 鴻運 — festival red + gold (双11 / 春节), celebratory event skin. */
[data-template="prosper"]{
  --font-display:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-body:'Noto Sans SC','PingFang SC','Microsoft YaHei',-apple-system,sans-serif;
  --u:2px; --row-h:32px;  /* mainland taste: very compact, minimal spacing, high density */ --r-sm:6px; --r-md:10px; --r-lg:14px;
  --brand:var(--c-red-cn-strong); --brand-strong:#a01515; --brand-soft:#fff5e6;
  --brand-grad:linear-gradient(135deg,#e02424,#c8961a); --accent:var(--c-gold-500);
  --ink:#3a1010; --line:#f0d9b8;
}

/* Respect the OS "reduce motion" setting — the delight layer must obey this. */
@media (prefers-reduced-motion:reduce){
  :root{ --dur-fast:0ms; --dur:0ms; --dur-slow:0ms; }
}

/* A11Y-FOCUS-V1 (2026-07-11): a visible keyboard-focus ring site-wide — WCAG 2.4.7. :where() keeps 0
   specificity (never overrides a component's own focus), :focus-visible shows it for keyboard nav only
   (not on mouse click), so it aids a11y without the "ugly outline on click" complaint. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline: 2px solid var(--focus, #008034);
  outline-offset: 2px;
  border-radius: 3px;
}

/* A11Y-GRAY-V1 (2026-07-11): Tailwind text-gray-400 (#9ca3af) / gray-300 fail WCAG-AA as text on light
   backgrounds (~2.5:1) — the single biggest remaining contrast source. Bump them to an AA-passing grey.
   BUT the same utilities are correct as *light* text on dark surfaces (footers, dark cards) — so restore
   the light grey when the element sits inside a dark-background container. */
.text-gray-400{ color:#6b7280 !important; }
.text-gray-300{ color:#6b7280 !important; }
.bg-ink .text-gray-400, .bg-ink .text-gray-300,
[class*="bg-gray-9"] .text-gray-400, [class*="bg-gray-9"] .text-gray-300,
[class*="bg-ink"] .text-gray-400, [class*="bg-ink"] .text-gray-300,
footer .text-gray-400, footer .text-gray-300,
.bg-hero .text-gray-400, .bg-hero .text-gray-300{ color:#cbd5e1 !important; }

/* A11Y-WHITE-V1 (2026-07-11): translucent white labels (text-white/70,/80) on brand-green backgrounds fail
   AA (~3.3:1). Solidify them — verified visually imperceptible, and more opacity never hurts contrast on any
   background. Fixes the homepage hero + green-card labels. text-white/90 kept (already passes). */
.text-white\/70, .text-white\/80{ color:#fff !important; }

/* SMOOTH-NAV-V1 (2026-07-11): kill the "bad-network flash" the operator saw on every page change.
   Two independent causes, two fixes:
   (1) White interstitial frame while the next document paints. The <body> is themed but <html> is not,
       so the gap between unload and first paint flashes white. Paint the site background on <html>
       itself → the interstitial frame is the page colour, never white.
   (2) Hard cut between documents. The cross-document View Transitions API cross-fades navigations in
       Chromium (covers web + iOS/Android WebView / Capacitor). Progressive enhancement: any browser
       without support just navigates normally — no polyfill, no risk. */
html { background-color: var(--bg); }
/* DARK-BODY-V1 (2026-08-03): many retrofitted pages hard-code a light body background (#f6f8f7, #f8fafc, cream…)
   that no token can reach. Under a DARK template, force every page body onto the canonical --bg so no page is
   left glowing light. Scoped to the dark templates → light stays byte-identical (the page's own light bg wins).
   A page can still opt a *region* lighter with its own surface tokens; this only sets the page floor. */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) body { background: var(--bg); }
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ================= TAG TAXONOMY (2026-07-28, committee #5) =================
   "Consolidate and define the categories of tagging." ONE shared set of label/tag styles for the whole
   site — use these instead of ad-hoc pill utilities so padding / colour / size stay consistent everywhere:
     .skew + .eyebrow  → a section eyebrow / kicker above a heading (skewed brand pill)
     .tag              → a neutral inline pill (meta / status)
     .tag.tag--brand   → brand-filled pill      .tag.tag--muted → grey pill      .tag.tag--warn → amber pill
     .tag.tag--count   → a compact number / count pill                                                    */
.skew{transform:skewX(-12deg)} .skew>*{display:inline-block;transform:skewX(12deg)}
.eyebrow{display:inline-block;background:var(--brand,#00913a);color:#fff;padding:6px 14px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;line-height:1}
.tag{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:#f1f3f5;color:var(--ink,#0a0e0c);line-height:1.4}
.tag.tag--brand{background:var(--brand,#00913a);color:#fff}
.tag.tag--muted{background:#f1f3f5;color:#6b7280}
.tag.tag--warn{background:#fef3c7;color:#92400e}
.tag.tag--count{padding:2px 8px;min-width:20px;justify-content:center;font-variant-numeric:tabular-nums}

/* TAP-TARGET-V1 (2026-07-30, mobile audit): the inline SHARE action rendered 23px tall on a phone — below the
   24px WCAG AA minimum and far below the 44px touch guideline, so it was easy to miss with a thumb. On TOUCH
   devices only (pointer:coarse) give these small inline actions a comfortable height; desktop is untouched. */
@media (pointer: coarse) {
  .hkpl-share-btn { min-height: 36px; padding-top: 8px; padding-bottom: 8px; }
}

/* ═══════════ VIEW-TRANSITIONS-V1 (2026-08-03) ═══════════
 * Smooth cross-document fade between page navigations so the multi-page app feels like one app
 * (operator: "opening new HTML ruins the experience"). Pure progressive enhancement — browsers without
 * cross-document view-transition support (older Safari/WKWebView) just do a normal navigation, no change.
 * Applies between any two pages that load this sheet (all main user-facing pages). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* HEADER-CLS-RESERVE-V1 (2026-08-04, operator "moving parts everywhere on every page"): the sticky
   site-header is JS-injected into an EMPTY #site-header, so every page paints 0px there, then jumps
   ~64px down when the header appears. Reserve the main-bar height in render-blocking head CSS (this file
   loads before first paint) so content never jumps. min-height is a floor: a taller header (with the
   product-mode row) simply exceeds it; a page never shifts UP. */
#site-header { min-height: 112px; }  /* 64px bar + ~48px product-mode row (both always present) */

/* STABLE-UI-V1 (2026-08-04, operator: "moving parts everywhere, buttons flying in, bottom bar not sticky").
   The app used per-navigation cross-document view-transitions + entrance animations (reveal fly-up, pop-in
   scale, fade-up) that make every page feel unstable and can momentarily displace position:fixed elements
   (the bottom tab bar) during a navigation. Default to a calm, static render. Interaction feedback
   (:hover/:active tap states, spinners, live-dot pulse) is intentionally NOT touched. */
@view-transition { navigation: none; }
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.pop-in { animation: none !important; opacity: 1 !important; transform: none !important; }
.animate-fade-up, [class*="animate-fade"] { animation: none !important; opacity: 1 !important; transform: none !important; }

/* A11Y-5 (2026-08-05): blanket reduced-motion. The per-token reduce-motion query only zeroes token-driven
   durations; hard-coded transitions/animations (e.g. the JS-injected site-header, inline transitions) kept
   animating for users who asked for less motion. Neutralize them all. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* DARK-BRAND-TEXT-UTILITIES-V1 (2026-08-06, eyeballed). The brand TEXT utilities are compiled Tailwind
   (#006027, #00712e) and no theme can reach them, so on a dark page the token-wired parts flipped and
   these did not — the headline and the secondary button read as disabled. Point them at the brand ink.
   Scoped to the dark templates, so light mode cannot move. Same move design-tokens.css already makes
   for .text-gray-400/.text-gray-300. text-hkpl-300/400 are left alone — already light enough. */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.text-hkpl-500,.text-hkpl-600,.text-hkpl-700,.text-hkpl-800,.text-hkpl-900){
  color: var(--brand-strong) !important;
}
/* and the same for a brand border that has to be seen against a dark surface */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.border-hkpl-500,.border-hkpl-600,.border-hkpl-700){
  border-color: color-mix(in srgb, var(--brand-strong) 55%, transparent) !important;
}
/* hover states that assumed a light page */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.hover\:text-hkpl-600,.hover\:text-hkpl-700):hover{
  color: var(--brand-hover) !important;
}

/* DARK-BG-UTILITIES-V1 (2026-08-06, eyeballed then measured). Compiled Tailwind SURFACES stayed light
   in the dark theme — bg-white, bg-sand-*, bg-gray-50/100 — so light text sat on a white card and
   vanished. Most of the unreadable text in dark mode was this, not the text colour. Dark templates
   only; light mode is untouched. */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.bg-white,.bg-sand-50,.bg-gray-50,.bg-slate-50,.bg-neutral-50,.bg-zinc-50){
  background-color: var(--card) !important;
}
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.bg-sand-100,.bg-gray-100,.bg-slate-100,.bg-neutral-100){
  background-color: var(--surface-2, #171e1a) !important;
}
/* tinted state panels: keep the hue, lose the glare */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.bg-hkpl-50,.bg-green-50,.bg-emerald-50){
  background-color: color-mix(in srgb, var(--brand) 16%, var(--card)) !important;
}
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.bg-blue-50,.bg-sky-50,.bg-indigo-50){
  background-color: color-mix(in srgb, #3b82f6 16%, var(--card)) !important;
}
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.bg-amber-50,.bg-yellow-50,.bg-orange-50){
  background-color: color-mix(in srgb, #f59e0b 16%, var(--card)) !important;
}
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.bg-red-50,.bg-rose-50){
  background-color: color-mix(in srgb, #ef4444 16%, var(--card)) !important;
}
/* an inverted band (dark surface, light text) must not invert twice and become a light band */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) .bg-ink{
  background-color: var(--surface-2, #171e1a) !important;
}
/* text baked dark by Tailwind, now on a dark surface */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.text-ink,.text-gray-900,.text-gray-800,.text-gray-700,.text-slate-900,.text-slate-800,.text-neutral-900){
  color: var(--ink) !important;
}
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.text-gray-600,.text-gray-500,.text-slate-600,.text-slate-500){
  color: var(--muted-2, #9aa4a0) !important;
}
/* hairlines drawn for a white page disappear on a dark one */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.border-gray-100,.border-gray-200,.border-slate-100,.border-slate-200,.border-sand-100,.border-sand-200){
  border-color: var(--line) !important;
}

/* DARK-DESIGNER-PASS-V1 (2026-08-06). What the systematic fixes could not know: a colour flipped by
   luminance alone does not know whether it is a FILL carrying white text. Each rule below is a place
   where the fill moved and its label did not. Dark templates only. */

/* an active tab / chip is a FILL: keep it deep so its white label survives */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.div-tab.tab-active,.d-tab.tab-active,.tab-active){
  background: var(--brand) !important; color: #fff !important; border-color: var(--brand) !important;
}
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.badge-chip.green,.chip.green,.pill.green){
  background: color-mix(in srgb, var(--brand) 82%, #000) !important; color: #fff !important;
}

/* a soft button is a TINT with coloured ink — give the ink room on a dark tint */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.btn.soft,.btn-soft){
  background: color-mix(in srgb, var(--accent, #f5a623) 14%, var(--card)) !important;
  color: color-mix(in srgb, var(--accent, #f5a623) 78%, #fff) !important;
  border-color: color-mix(in srgb, var(--accent, #f5a623) 38%, transparent) !important;
}

/* a hero title sits on a photograph — it must be light regardless of the token maths */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.site-hero-title,.hero-title,.site-hero h1,.hero h1){
  color: #fff !important; text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

/* labels and secondary meta were pitched against white; lift them for a dark card */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.label,.rel,.badge-chip.muted,.meta,.sub,.caption){
  color: var(--muted-2, #9aa4a0) !important;
}

/* a link colour chosen for a white page is too deep on a dark one */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(a.link,.link,.text-sky-700,.text-blue-700,.text-blue-600){
  color: #7cc4f5 !important;
}

/* C-TOKENS-DARK-V1 (2026-08-06). The --c-<hex> palette already existed and the dark blocks overrode only
   a handful of it, so pages built on those tokens (profile's rating card, the muted chips) kept their
   light values in the dark theme. Every remaining --c-<hex> gets a counterpart by the same rule: same
   hue, inverted lightness, saturation eased when very saturated, white/black pinned to theme surfaces.
   The 3 already overridden by hand are untouched — a chosen value beats a derived one. */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]){

}

/* ACCENT-SOFT-DARK-V1 (2026-08-06, from looking at the profile page). --accent-soft is a tint made for
   white. On a near-black page it glowed as two pale slabs behind the DUPR ratings, and the label on it
   fell to 2.35:1. midnight overrode --brand-soft and never this one. It drives the rating panels, the
   stat-strip gradient, the segmented control and the soft chips — one token, five symptoms. */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]){
  --accent-soft: color-mix(in srgb, var(--brand) 14%, var(--card));
  --hkpl-50:  color-mix(in srgb, var(--brand) 14%, var(--card));
  --hkpl-100: color-mix(in srgb, var(--brand) 26%, var(--card));
}
/* gradients that blend towards the literal keyword `white` — not a hex, so no tokeniser reaches them */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) .qr-share{ background: linear-gradient(180deg, var(--accent-soft), var(--card)) !important; }
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) .stat-hero{ background: linear-gradient(180deg, var(--accent-soft) 0%, var(--card) 60%) !important; }
/* the rating panel label sat on that tint and needs the lift too */
html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) :is(.rating-pill,.stat-hero,.seg,.badge-chip.soft) :is(.label,.rel,small,.sub){
  color: var(--muted-2, #9aa4a0) !important;
}

main{min-height:100vh}

#site-header{min-height:65px}

/* --- Phase 1 dark completion 2026-09-05 --- */
/* define --ground alias so it flips with --bg */
:root{--ground:var(--bg)}
/* BRAND-AGNOSTIC dark ramp: DERIVE every dark brand step from --brand via color-mix so ANY tenant
   brand (green/red/blue/teal) produces its own correct dark shades with ZERO per-theme tuning.
   Backgrounds (low + high steps) go dark; --brand-500 stays the brand for accents. Replaces the
   inverted bright-mint ramp that broke hero/background usages. Applies to the dark toggle AND midnight. */
:root[data-theme="dark"],html[data-template="midnight"]{
  --brand-50: color-mix(in srgb, var(--brand), #000 84%);
  --brand-100:color-mix(in srgb, var(--brand), #000 78%);
  --brand-200:color-mix(in srgb, var(--brand), #000 70%);
  --brand-300:color-mix(in srgb, var(--brand), #000 60%);
  --brand-400:color-mix(in srgb, var(--brand), #000 48%);
  --brand-500:var(--brand);
  --brand-600:color-mix(in srgb, var(--brand), #000 32%);
  --brand-700:color-mix(in srgb, var(--brand), #000 48%);
  --brand-800:color-mix(in srgb, var(--brand), #000 62%);
  --brand-900:color-mix(in srgb, var(--brand), #000 74%);
}

/* --- Phase 1 dark completion 2026-09-05 --- */
/* define --ground alias so it flips with --bg */
:root{--ground:var(--bg)}
/* BRAND-AGNOSTIC dark ramp: DERIVE every dark brand step from --brand via color-mix so ANY tenant
   brand (green/red/blue/teal) produces its own correct dark shades with ZERO per-theme tuning.
   Backgrounds (low + high steps) go dark; --brand-500 stays the brand for accents. Replaces the
   inverted bright-mint ramp that broke hero/background usages. Applies to the dark toggle AND midnight. */
:root[data-theme="dark"],html[data-template="midnight"]{
  --brand-50: color-mix(in srgb, var(--brand), #000 84%);
  --brand-100:color-mix(in srgb, var(--brand), #000 78%);
  --brand-200:color-mix(in srgb, var(--brand), #000 70%);
  --brand-300:color-mix(in srgb, var(--brand), #000 60%);
  --brand-400:color-mix(in srgb, var(--brand), #000 48%);
  --brand-500:var(--brand);
  --brand-600:color-mix(in srgb, var(--brand), #000 32%);
  --brand-700:color-mix(in srgb, var(--brand), #000 48%);
  --brand-800:color-mix(in srgb, var(--brand), #000 62%);
  --brand-900:color-mix(in srgb, var(--brand), #000 74%);
}

/* ===== SHARED DARK-FLIP RETROFIT 2026-09-05 (tokenization sweep C — SHARED-css families; LIGHT is byte-identical, every rule below is dark-gated). ===== */
/* F2 brand-fill family: value-alias --p00913a AUTO-INVERTS to pale #82ebac -> pale-green-on-white is unreadable. Force white-text brand FILLS to the SATURATED --brand. */
:is([data-theme="dark"],[data-template="midnight"],[data-template="arena"]) :is(.btn-primary,.brand-bg,.bg-hkpl-500,.bg-hkpl-600){background:var(--brand)!important}
/* F3 Tailwind .text-*-700 danger/status utilities are fixed hues with no dark flip (dark-on-dark). Map to the readable dark-flip tokens. */
:is([data-theme="dark"],[data-template="midnight"],[data-template="arena"]) :is(.text-red-700,.text-rose-700){color:var(--err-strong)!important}
:is([data-theme="dark"],[data-template="midnight"],[data-template="arena"]) :is(.text-amber-700,.text-yellow-700){color:var(--warn-fg)!important}
:is([data-theme="dark"],[data-template="midnight"],[data-template="arena"]) :is(.text-green-700,.text-emerald-700){color:var(--ok-fg)!important}
:is([data-theme="dark"],[data-template="midnight"],[data-template="arena"]) .text-blue-700{color:#93c5fd!important}
:is([data-theme="dark"],[data-template="midnight"],[data-template="arena"]) .text-purple-700{color:#d8b4fe!important}

/* (1) fleet retrofit: headings consume the theme DISPLAY font so a template swap changes TYPE fleet-wide (default token=Akshar ⇒ byte-identical) */
.font-display{font-family:var(--font-display)!important}

/* ============================================================================================
   TAILWIND-DARK-COMPAT-V1  (2026-09-05, corporate dark-walk FAMILY fix)
   HKPL markup carries ~4,000 LITERAL Tailwind light utilities that bypass the token system, so
   [data-theme="dark"] never reached them → grey-on-black text + glaring white cards fleet-wide.
   This is the ONE central layer that flips the whole literal-utility family. Backgrounds/borders
   and text are flipped TOGETHER (a fact in two places) so darkening a surface never leaves the
   dark text on it invisible. Measured family (grep, 2026-09-05):
     bg-white 665 · bg-gray-50 365 · bg-gray-100 143 · bg-gray-200 24 · border-gray-100 161 ·
     border-gray-200 477 · text-gray-300 125 · -400 568 · -500 999 · -600 457 · -700 428 · -800 23 · -900 11
   Scoped to :root[data-theme="dark"] only ⇒ LIGHT mode byte-for-byte untouched. Values verified
   ≥ WCAG AA (4.5:1) against the dark surfaces --bg #0f1512 / --surface #161d19 / --surface-2 #1e2723.
   ============================================================================================ */

/* -- literal LIGHT backgrounds ⇒ dark surfaces -- */
:root[data-theme="dark"] .bg-white{ background-color:var(--surface,#161d19)!important; }
:root[data-theme="dark"] .bg-gray-50{ background-color:var(--bg,#0f1512)!important; }
:root[data-theme="dark"] .bg-gray-100{ background-color:var(--surface-2,#1e2723)!important; }
:root[data-theme="dark"] .bg-gray-200{ background-color:#26302b!important; }
:root[data-theme="dark"] .bg-slate-50,:root[data-theme="dark"] .bg-slate-100{ background-color:var(--surface,#161d19)!important; }

/* -- literal LIGHT borders ⇒ dark lines -- */
:root[data-theme="dark"] .border-gray-100,
:root[data-theme="dark"] .border-gray-200,
:root[data-theme="dark"] .border-gray-300,
:root[data-theme="dark"] .border-slate-100,
:root[data-theme="dark"] .border-slate-200{ border-color:var(--line,#2a3630)!important; }

/* -- gray TEXT ⇒ legible-on-dark, kept as a hierarchy (900 brightest … 400 most muted) -- */
:root[data-theme="dark"] .text-gray-900,:root[data-theme="dark"] .text-slate-900{ color:#f0f4f1!important; }
:root[data-theme="dark"] .text-gray-800,:root[data-theme="dark"] .text-slate-800{ color:#e8efe9!important; }
:root[data-theme="dark"] .text-gray-700,:root[data-theme="dark"] .text-slate-700{ color:#d5dcd8!important; }
:root[data-theme="dark"] .text-gray-600,:root[data-theme="dark"] .text-slate-600{ color:#c0cac5!important; }
:root[data-theme="dark"] .text-gray-500,:root[data-theme="dark"] .text-slate-500{ color:#a6b2ab!important; }
:root[data-theme="dark"] .text-gray-400,:root[data-theme="dark"] .text-slate-400{ color:#b4bfb7!important; }
/* 300 is already light ⇒ leave; only nudge if it sits on a mid surface (safe to keep). */

/* -- brand-green as TEXT on dark: literal #008034 hardcodes that bypass --brand (cr 3.38 → fixed) -- */
:root[data-theme="dark"] .signin-btn,
:root[data-theme="dark"] .bk-t,
:root[data-theme="dark"] .bk-t *,
:root[data-theme="dark"] a.text-brand,
:root[data-theme="dark"] .link-brand{ color:var(--brand-strong,#6fe3a4)!important; }

/* -- JS-set INLINE gray/near-black text hexes (CSS !important beats non-important inline) --
   Measured inline offenders: #6b7280×25 #9ca3af×13 #64748b×6 #374151×15 #1f2937×13 #0a0e0c×13 -- */
:root[data-theme="dark"] [style*="color:#6b7280"],:root[data-theme="dark"] [style*="color: #6b7280"],
:root[data-theme="dark"] [style*="color:#64748b"],:root[data-theme="dark"] [style*="color: #64748b"]{ color:#a6b2ab!important; }
:root[data-theme="dark"] [style*="color:#9ca3af"],:root[data-theme="dark"] [style*="color: #9ca3af"]{ color:#b4bfb7!important; }
:root[data-theme="dark"] [style*="color:#4b5563"],:root[data-theme="dark"] [style*="color: #4b5563"]{ color:#c0cac5!important; }
:root[data-theme="dark"] [style*="color:#374151"],:root[data-theme="dark"] [style*="color:#1f2937"],
:root[data-theme="dark"] [style*="color:#111827"],:root[data-theme="dark"] [style*="color:#0a0e0c"]{ color:#d5dcd8!important; }
/* inline WHITE backgrounds ⇒ dark surface (white boxes in dark) */
:root[data-theme="dark"] [style*="background:#fff"],:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background-color:#fff"],:root[data-theme="dark"] [style*="background-color: #fff"],
:root[data-theme="dark"] [style*="background:white"],:root[data-theme="dark"] [style*="background-color:white"]{ background-color:var(--surface,#161d19)!important; }
/* ===================== end TAILWIND-DARK-COMPAT-V1 ===================== */

/* ============================================================================================
   TAILWIND-DARK-COMPAT-V2 (2026-09-05) — dual-use alias corrections found by the post-sweep walk.
   The auto-token dark flip treats every alias as a BACKGROUND (--pffffff⇒dark) or as brand INK
   (--p00913a⇒light). Where an alias is instead used as light TEXT on the photographic hero band,
   or as a brand FILL behind white text, the blunt flip inverts it. These are the bounded corrections.
   ============================================================================================ */
/* HERO band keeps its photo/gradient in dark ⇒ its text stays light (was flipped dark via --pffffff, cr 1.03). */
:root[data-theme="dark"] .page-hero,
:root[data-theme="dark"] .page-hero h1,
:root[data-theme="dark"] .page-hero h2,
:root[data-theme="dark"] .page-hero p,
:root[data-theme="dark"] .page-hero .sub,
:root[data-theme="dark"] .page-hero [class*="sub"]{ color:#fff!important; }
/* HERO eyebrow pill: dark-green chip + bright lime text (keeps the sporty identity, cr ~11 vs 3.51). */
:root[data-theme="dark"] .hero-pill{ background:#0a2e1a!important; color:#a3ff66!important; }
/* FILLED brand/accent buttons: the fill flips light in dark ⇒ dark label (outline .soft/.ghost keep light green, cr 1.46→~9). */
:root[data-theme="dark"] .btn:not(.soft):not(.ghost):not(.outline),
:root[data-theme="dark"] button.primary,
:root[data-theme="dark"] a.btn.primary,
:root[data-theme="dark"] .add-btn{ color:#04140b!important; }
:root[data-theme="dark"] .add-btn{ color:#8fe6ac!important; } /* add-btn is an OUTLINE (transparent bg) ⇒ light green, not dark */
/* ===================== end TAILWIND-DARK-COMPAT-V2 ===================== */

/* TAILWIND-DARK-COMPAT-V3 (2026-09-05): semantic value colours (--good/--bad/--warn used by stat
   values, win/loss) weren't dark-flipped (green #00913a on dark = 4.18); and the brand-filled Register
   CTA reads near-white (4.34). Brighten semantics + force pure white on register CTAs (any class). */
:root[data-theme="dark"]{ --good:#3fc873; --bad:#f78a8a; --warn:#f2d18a; }
:root[data-theme="dark"] a[href*="register" i]{ color:#fff!important; }

/* TAILWIND-DARK-COMPAT-V4 (2026-09-05): brand/sponsor LOGOS are dark artwork on transparent PNGs ⇒
   invisible on dark bands. A light chip in dark keeps ANY logo visible (robust for all colours;
   inversion would break colour logos). Applies to sponsor + partner logo images. */
:root[data-theme="dark"] .sponsor-logo,
:root[data-theme="dark"] img.sponsor-logo,
:root[data-theme="dark"] .partner-logo,
:root[data-theme="dark"] .sponsors img,
:root[data-theme="dark"] [class*="sponsor"] img{ background:#fff!important; border-radius:8px; padding:6px 10px; box-sizing:border-box; }

/* ================= TAILWIND-DARK-COMPAT-V5 (2026-09-05, full 54-page audit) =================
   Families found by the 4-agent visual audit of the whole member-facing site in dark. Central only. */
/* 1. AUTHED sign-in button — my V1 .signin-btn color rule wrongly hit the .authed green FILL (green-on-green). */
:root[data-theme="dark"] .signin-btn.authed{ background:#0a5228!important; border-color:#0a5228!important; }
:root[data-theme="dark"] .signin-btn.authed,
:root[data-theme="dark"] .signin-btn.authed *{ color:#fff!important; }
/* 2. Colored Tailwind TEXT utilities never flipped (amber/blue/red/green/purple on dark). */
:root[data-theme="dark"] .text-amber-800,:root[data-theme="dark"] .text-amber-700,:root[data-theme="dark"] .text-orange-800,:root[data-theme="dark"] .text-orange-700{ color:#f0c674!important; }
:root[data-theme="dark"] .text-blue-800,:root[data-theme="dark"] .text-blue-700,:root[data-theme="dark"] .text-blue-600{ color:#8fb4f0!important; }
:root[data-theme="dark"] .text-red-800,:root[data-theme="dark"] .text-red-700,:root[data-theme="dark"] .text-red-600{ color:#f5a3a3!important; }
:root[data-theme="dark"] .text-green-800,:root[data-theme="dark"] .text-green-700{ color:#7be29c!important; }
:root[data-theme="dark"] .text-purple-700,:root[data-theme="dark"] .text-indigo-700,:root[data-theme="dark"] .text-violet-700{ color:#c4b5fd!important; }
/* 3. Classless prose strong/b hardcoded near-black navy ⇒ inherit surrounding light text (privacy/delete-account legal copy). */
:root[data-theme="dark"] strong:not([class]),:root[data-theme="dark"] b:not([class]){ color:inherit!important; }
/* 4. .pill variants + gender chips (dupr.css hardcoded light). */
:root[data-theme="dark"] .pill.nr,:root[data-theme="dark"] .pill.neutral{ background:#232d28!important; color:#c0cac5!important; }
:root[data-theme="dark"] .pill.loss,:root[data-theme="dark"] .pill.bad{ background:#2c1717!important; color:#f7a8a8!important; }
:root[data-theme="dark"] .pill.warn{ background:#2a2410!important; color:#f2d18a!important; }
:root[data-theme="dark"] .gender-chip.m{ background:#141f30!important; color:#93c5fd!important; }
:root[data-theme="dark"] .gender-chip.f{ background:#2a1420!important; color:#f0a6cd!important; }
/* 5. secondary/ghost buttons went dark-text-on-dark ⇒ light outline. */
:root[data-theme="dark"] .btn.secondary,:root[data-theme="dark"] .btn.ghost{ color:var(--brand-strong,#6fe3a4)!important; }
:root[data-theme="dark"] .btn.secondary{ background:transparent!important; border-color:var(--brand-strong,#6fe3a4)!important; }
/* 6. white "inverse" pill (SIGN OUT / Browse clubs) glaring in dark ⇒ dark pill. */
:root[data-theme="dark"] .ds-btn--inverse{ background:#1e2723!important; color:#e8efe9!important; border-color:#3a473f!important; }
/* 7. onboarding coach-hero uses a brand gradient; --brand-strong flips LIGHT in dark ⇒ white text vanishes. Force a deep-green gradient. */
:root[data-theme="dark"] .coach-hero{ background:linear-gradient(135deg,#0a5228,#146b39)!important; }
/* 8. LOGO/crest/headshot plates — light chip so dark/monochrome artwork stays visible (site header #sh-logo-img EXCLUDED). */
:root[data-theme="dark"] .team-logo,:root[data-theme="dark"] .pob-logo-ph,:root[data-theme="dark"] .lb-crest{ background:#fff!important; }
:root[data-theme="dark"] .member-photo{ background:#e8efe9!important; box-shadow:0 0 0 1px #3a473f; }
/* 9. committee/report literal light callouts ⇒ dark surfaces + light text (bg+text TOGETHER). */
:root[data-theme="dark"] .stat,:root[data-theme="dark"] .rep,:root[data-theme="dark"] .fr,:root[data-theme="dark"] .said,:root[data-theme="dark"] .did,:root[data-theme="dark"] .after,:root[data-theme="dark"] .ans,:root[data-theme="dark"] .log{ background:#161d19!important; }
:root[data-theme="dark"] .essay{ background:#0f2418!important; }
:root[data-theme="dark"] .warn{ background:#2a2410!important; }
:root[data-theme="dark"] .ask2{ background:#1a1230!important; }
:root[data-theme="dark"] blockquote.orig{ background:#1a1408!important; }
:root[data-theme="dark"] .stat,:root[data-theme="dark"] .stat *,:root[data-theme="dark"] .rep,:root[data-theme="dark"] .rep *,:root[data-theme="dark"] .fr,:root[data-theme="dark"] .fr *,:root[data-theme="dark"] .said,:root[data-theme="dark"] .said *,:root[data-theme="dark"] .did,:root[data-theme="dark"] .did *,:root[data-theme="dark"] .after,:root[data-theme="dark"] .after *,:root[data-theme="dark"] .essay,:root[data-theme="dark"] .essay *,:root[data-theme="dark"] .warn,:root[data-theme="dark"] .warn *,:root[data-theme="dark"] .ask2,:root[data-theme="dark"] .ask2 *,:root[data-theme="dark"] blockquote.orig,:root[data-theme="dark"] blockquote.orig *,:root[data-theme="dark"] .ans,:root[data-theme="dark"] .ans *,:root[data-theme="dark"] .log,:root[data-theme="dark"] .log *{ color:#e8efe9!important; }

/* ===== TAILWIND-DARK-COMPAT-V6 (2026-09-05, clean-audit long-tail) ===== */
/* onboarding coach-mark bg alias (--c-0a2e1a = mint #d1f5e1, used as a BACKGROUND) ⇒ dark */
:root[data-theme="dark"]{ --c-0a2e1a:#0f2418; }
/* extended colored TEXT utilities (900 weights + emerald/yellow) */
:root[data-theme="dark"] .text-amber-900,:root[data-theme="dark"] .text-orange-900,:root[data-theme="dark"] .text-yellow-900,:root[data-theme="dark"] .text-yellow-800{ color:#f0c674!important; }
:root[data-theme="dark"] .text-blue-900{ color:#8fb4f0!important; }
:root[data-theme="dark"] .text-red-900{ color:#f5a3a3!important; }
:root[data-theme="dark"] .text-green-900,:root[data-theme="dark"] .text-emerald-800,:root[data-theme="dark"] .text-emerald-700{ color:#7be29c!important; }
/* disabled pager button used --pd1d5db (flips DARK) ⇒ visible muted grey */
:root[data-theme="dark"] .pager button:disabled{ color:#6b766f!important; }
/* Register nav CTA fill flips to light-green (white text ⇒ cr 2.6) ⇒ deep-green fill + white */
:root[data-theme="dark"] a[href*="register" i]{ background:#0a5228!important; }

/* ===== TAILWIND-DARK-COMPAT-V7 (2026-09-05) — inline-styled literal colours the audit still caught ===== */
:root[data-theme="dark"] [style*="d1f5e1"],:root[data-theme="dark"] [style*="209, 245, 225"]{ background:#0f2418!important; }
:root[data-theme="dark"] [style*="color:#1d4ed8"],:root[data-theme="dark"] [style*="color: #1d4ed8"],:root[data-theme="dark"] [style*="color:#1e40af"]{ color:#8fb4f0!important; }
:root[data-theme="dark"] [style*="color:#4b5563"],:root[data-theme="dark"] [style*="color:#475569"]{ color:#c0cac5!important; }

/* HEADER-DESKTOP-FIT-V1 (2026-09-05): at >=1440px the full desktop nav + the authed cluster (My Profile
   + "Signed in as <name>" pill + Sign Out + notif) exceed the 1280 inner, so .desktop shrinks and "About"
   spills onto "My Profile" (43px overlap). The identity pill duplicates the Profile link + Sign Out and is
   already hidden <=1439, so hide it >=1440 too — frees ~150px and clears the collision. */
@media (min-width:1440px){ #hkpl-sh .rhs .signin-btn.authed{ display:none !important; } }