/* =============================================================================
   xGHunter · xG 獵人 — Dark Design System (theme.css)
   -----------------------------------------------------------------------------
   A cohesive, premium, animated dark theme. No build step: pure CSS custom
   properties + reusable component & animation classes. Every interactive
   feature module styles itself with these tokens and `.xh-*` components so the
   whole product looks like one product no matter who built which tab.

   Sections
     1. Design tokens (CSS custom properties)
     2. Base / reset / typography
     3. Keyframes
     4. Layout — hero, gate, shell
     5. Components — card, tile, bar/seg, btn, cta, pill, badge,
                     console, heat, chart, orb
     6. Utilities & animation helpers
     7. Responsive
   ========================================================================== */

/* ============================== 1. TOKENS ================================== */
:root {
  /* ---- brand / surface palette (locked by BUILD_SPEC) ---- */
  --xh-brand:  #2ee27a;   /* primary — electric green (cinematic)     */
  --xh-neg:    #ff5a3c;   /* negative / loss / away (was the brand)   */
  --xh-ink:    #0a0c11;   /* app background                            */
  --xh-panel:  #13161f;   /* raised surface                           */
  --xh-edge:   #232a3b;   /* hairline borders                         */
  --xh-val:    #19e08a;   /* VALUE BET / +EV green                    */
  --xh-watch:  #ffb020;   /* WATCH amber                              */
  --xh-home:   #ff8a4c;   /* home side                                */
  --xh-away:   #4aa8ff;   /* away side                                */
  --xh-sub:    #8b93a7;   /* muted text                               */

  /* ---- derived surfaces ---- */
  --xh-panel-2:   #171b26;  /* nested surface (inputs, inner tiles)   */
  --xh-panel-3:   #1d2230;  /* hover / active nested surface          */
  --xh-ink-2:     #07090d;  /* deepest wells (console, charts)        */
  --xh-edge-soft: #1b2230;  /* faint dividers                          */
  --xh-edge-hot:  #3a445c;  /* hover border                            */
  --xh-draw:      #7681a0;  /* draw / neutral / PASS                   */
  --xh-pass:      #7681a0;  /* alias for PASS                          */
  --xh-text:      #e7ecf5;  /* primary text                            */
  --xh-text-dim:  #aeb6c8;  /* secondary text                          */

  /* ---- brand gradients ---- */
  --xh-grad-brand:  linear-gradient(135deg, #3df58c 0%, #2ee27a 45%, #19c46a 100%);
  --xh-grad-val:    linear-gradient(135deg, #2bf0a0 0%, #19e08a 100%);
  --xh-grad-watch:  linear-gradient(135deg, #ffc24a 0%, #ffb020 100%);
  --xh-grad-home:   linear-gradient(135deg, #ffa468 0%, #ff8a4c 100%);
  --xh-grad-away:   linear-gradient(135deg, #6fbcff 0%, #4aa8ff 100%);
  --xh-grad-ink:    linear-gradient(180deg, #13161f 0%, #0e111a 100%);

  /* ---- ambient page glow (used by .xh-bg) ----
     Deep charcoal base + a restrained electric-green / teal depth: a soft glow
     at top-center and faint corner washes. Kept low-opacity so text stays
     readable and the page reads dark + premium, never neon. */
  --xh-bg-base: #07090d;   /* near-black charcoal page floor */
  --xh-bg-glow:
    radial-gradient(1100px 560px at 50% -8%,  rgba(46,226,122,.10) 0%, transparent 60%),
    radial-gradient(900px 620px at 88% -6%,   rgba(46,226,122,.06) 0%, transparent 58%),
    radial-gradient(820px 560px at -8% 12%,   rgba(74,168,255,.055) 0%, transparent 55%),
    radial-gradient(900px 780px at 50% 118%,  rgba(25,224,138,.05) 0%, transparent 62%),
    linear-gradient(180deg, #0a0d13 0%, #07090d 55%, #060709 100%);

  /* ---- typography ---- */
  --xh-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", "PingFang TC",
                  "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  --xh-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo",
                  "Cascadia Code", "Roboto Mono", monospace;

  /* ---- radii ---- */
  --xh-r-xs: 6px;
  --xh-r-sm: 9px;
  --xh-r-md: 13px;
  --xh-r-lg: 18px;
  --xh-r-xl: 26px;
  --xh-r-pill: 999px;

  /* ---- spacing scale ---- */
  --xh-s-1: 4px;  --xh-s-2: 8px;  --xh-s-3: 12px;
  --xh-s-4: 16px; --xh-s-5: 22px; --xh-s-6: 32px;

  /* ---- elevation ---- */
  --xh-shadow-1: 0 2px 10px -4px rgba(0,0,0,.6);
  --xh-shadow-2: 0 10px 30px -12px rgba(0,0,0,.75);
  --xh-shadow-3: 0 24px 60px -20px rgba(0,0,0,.8);
  --xh-glow-brand: 0 14px 36px -12px rgba(46,226,122,.45);

  /* ---- motion ---- */
  --xh-ease: cubic-bezier(.2,.8,.2,1);
  --xh-ease-out: cubic-bezier(.16,1,.3,1);
  --xh-fast: .18s;
  --xh-mid:  .32s;
  --xh-slow: .6s;

  /* ---- z-index ---- */
  --xh-z-gate: 200;
  --xh-z-header: 50;
  --xh-z-pop: 80;
}

/* ============================== 2. BASE =================================== */
*,
*::before,
*::after { box-sizing: border-box; }

.xh-bg,
html { overflow-x: hidden; max-width: 100%; }   /* page-level guard: no sideways scroll, ever */

body.xh-bg {
  position: relative;
  margin: 0;
  min-height: 100vh;
  color: var(--xh-text);
  font-family: var(--xh-font-sans);
  font-feature-settings: "cv05", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background-color: var(--xh-bg-base);
  background-image: var(--xh-bg-glow);
  background-attachment: fixed;
  overflow-x: hidden;            /* guard against any incidental horizontal overflow */
}

/* Optional very slow drifting ambient glow — a fixed, behind-everything layer
   that gently breathes/drifts a faint green-teal haze. Subtle (no flashing),
   pointer-transparent, and only enabled when the user has NOT asked for less
   motion. Static fallback layers already live in --xh-bg-glow above. */
@media (prefers-reduced-motion: no-preference) {
  .xh-bg::before,
  body.xh-bg::before {
    content: "";
    position: fixed;
    inset: -12%;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(42% 48% at 50% 6%,  rgba(46,226,122,.08) 0%, transparent 70%),
      radial-gradient(40% 46% at 86% 14%, rgba(74,168,255,.05) 0%, transparent 70%),
      radial-gradient(46% 52% at 12% 88%, rgba(25,224,138,.045) 0%, transparent 72%);
    animation: xh-ambient-drift 28s ease-in-out infinite;
    will-change: transform;
  }
}

.xh-mono { font-family: var(--xh-font-mono); font-variant-numeric: tabular-nums; }
.xh-num  { font-family: var(--xh-font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.xh-sub  { color: var(--xh-sub); }
.xh-dim  { color: var(--xh-text-dim); }
/* balance line breaks app-wide so sentences don't break into ugly orphan lines */
p, .xh-sub, .xh-dim, .xh-feature__desc, .xh-disclaimer { text-wrap: pretty; }
.xh-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--xh-brand);
}
.xh-muted-eyebrow { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--xh-sub); }

/* color helpers (so JS modules never need to know the hex) */
.xh-c-brand { color: var(--xh-neg); }
.xh-c-val   { color: var(--xh-val); }
.xh-c-watch { color: var(--xh-watch); }
.xh-c-home  { color: var(--xh-home); }
.xh-c-away  { color: var(--xh-away); }
.xh-c-draw,
.xh-c-pass  { color: var(--xh-draw); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #262d40; border-radius: 8px; border: 2px solid var(--xh-ink); }
::-webkit-scrollbar-thumb:hover { background: #313a52; }
::selection { background: rgba(46,226,122,.28); color: #fff; }
:focus-visible { outline: 2px solid var(--xh-brand); outline-offset: 2px; border-radius: 4px; }
select, input, textarea { color-scheme: dark; }

/* ============================== 3. KEYFRAMES ============================== */
@keyframes xh-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes xh-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes xh-shimmer {
  0%   { background-position: -160% 0; }
  100% { background-position: 260% 0; }
}
@keyframes xh-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; filter: brightness(1); }
  50%      { box-shadow: 0 0 34px -6px currentColor; filter: brightness(1.08); }
}
@keyframes xh-console-line-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes xh-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes xh-caret-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes xh-spin { to { transform: rotate(360deg); } }
@keyframes xh-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes xh-orb-rotate { to { transform: rotate(360deg); } }
@keyframes xh-count-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes xh-sheen-sweep { 0% { left: -60%; } 100% { left: 130%; } }

/* ---- additive motion system (v2) — premium, restrained -------------------
   New keyframes layered on top of the originals. Nothing above is renamed
   or removed; these only add to the vocabulary. Use via the helper classes
   further down or by name on bespoke elements. */
@keyframes xh-fade-down  { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes xh-fade-left  { from { opacity: 0; transform: translateX(18px);  } to { opacity: 1; transform: translateX(0); } }
@keyframes xh-fade-right { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes xh-scale-in   { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@keyframes xh-rise-blur  { from { opacity: 0; transform: translateY(18px); filter: blur(8px); }
                           to   { opacity: 1; transform: translateY(0);    filter: blur(0); } }
/* verdict orb arrival — a confident pop with a soft settle */
@keyframes xh-orb-pop {
  0%   { opacity: 0; transform: scale(.7); }
  55%  { opacity: 1; transform: scale(1.06); }
  78%  { transform: scale(.985); }
  100% { transform: scale(1); }
}
/* one-shot ring that radiates out of value/peak elements when they land */
@keyframes xh-ping {
  0%   { opacity: .55; transform: scale(.7); }
  80%, 100% { opacity: 0; transform: scale(1.9); }
}
/* gentle, continuous breathing for "live"/value accents (softer than pulse-glow) */
@keyframes xh-breathe {
  0%, 100% { opacity: .85; box-shadow: 0 0 0 0 transparent; }
  50%      { opacity: 1;   box-shadow: 0 0 22px -6px currentColor; }
}
/* ticking value feel for live trading-board rows */
@keyframes xh-tick-flash {
  0%   { background-color: color-mix(in srgb, currentColor 22%, transparent); }
  100% { background-color: transparent; }
}
/* hero headline reveal — clip the text up into view */
@keyframes xh-clip-up {
  from { opacity: 0; transform: translateY(112%); }
  to   { opacity: 1; transform: translateY(0); }
}
/* slow ambient drift for hero glow layers */
@keyframes xh-ambient-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
}
/* skeleton dual: a vertical-ish sweep used by tall placeholder blocks */
@keyframes xh-skeleton-sweep { 0% { background-position: -160% 0; } 100% { background-position: 260% 0; } }
/* number ticker roll-in (paired with JS countUp for the final settle) */
@keyframes xh-roll-up { from { opacity: 0; transform: translateY(.5em); } to { opacity: 1; transform: translateY(0); } }
/* heat cell fill — fade+scale a cell into the grid */
@keyframes xh-cell-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
/* soft underline grow for links / active markers */
@keyframes xh-underline-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* convenience entrance classes (stagger with inline --d) */
.xh-anim-up     { animation: xh-fade-up var(--xh-mid) var(--xh-ease-out) both; animation-delay: var(--d, 0s); }
.xh-anim-in     { animation: xh-fade-in var(--xh-mid) ease both; animation-delay: var(--d, 0s); }
.xh-anim-float  { animation: xh-float 4s ease-in-out infinite; }
.xh-anim-pulse  { animation: xh-pulse-glow 2.2s ease-in-out infinite; }

/* --- additive entrance / motion helpers (all honour inline --d) --- */
.xh-anim-down   { animation: xh-fade-down  var(--xh-mid) var(--xh-ease-out) both; animation-delay: var(--d, 0s); }
.xh-anim-left   { animation: xh-fade-left  var(--xh-mid) var(--xh-ease-out) both; animation-delay: var(--d, 0s); }
.xh-anim-right  { animation: xh-fade-right var(--xh-mid) var(--xh-ease-out) both; animation-delay: var(--d, 0s); }
.xh-anim-scale  { animation: xh-scale-in   var(--xh-mid) var(--xh-ease-out) both; animation-delay: var(--d, 0s); }
.xh-anim-rise   { animation: xh-rise-blur  var(--xh-slow) var(--xh-ease-out) both; animation-delay: var(--d, 0s); }
.xh-anim-pop    { animation: xh-count-pop  var(--xh-mid) var(--xh-ease-out) both; animation-delay: var(--d, 0s); }
.xh-anim-breathe{ animation: xh-breathe 2.6s ease-in-out infinite; }
/* one-shot value/peak landing ring — wrap or place an .xh-ping child */
.xh-ping {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px currentColor; animation: xh-ping 1.1s var(--xh-ease-out) both;
}
/* applies a subtle settle-pop to count-up numbers when they finish */
.xh-num-settle { animation: xh-count-pop var(--xh-fast) var(--xh-ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ============================== 4. LAYOUT ================================= */
.xh-shell { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* --- header / top bar --- */
.xh-header {
  position: sticky; top: 0; z-index: var(--xh-z-header);
  background: rgba(10,12,17,.82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid color-mix(in srgb, var(--xh-edge) 70%, transparent);
}
.xh-logo {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; flex: 0 0 auto;
  font-weight: 900; color: var(--xh-ink); font-size: 18px;
  background: var(--xh-grad-brand);
  box-shadow: var(--xh-glow-brand);
}
.xh-wordmark { font-weight: 800; letter-spacing: .02em; line-height: 1; }
.xh-wordmark b { color: var(--xh-brand); font-weight: 800; }
.xh-tagline { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--xh-sub); margin-top: 2px; }

/* --- hero / landing --- */
.xh-hero {
  position: relative; overflow: hidden;
  border-radius: var(--xh-r-xl);
  padding: clamp(28px, 6vw, 72px) clamp(22px, 5vw, 60px);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(46,226,122,.14) 0%, transparent 55%),
    radial-gradient(120% 140% at 0% 100%, rgba(74,168,255,.12) 0%, transparent 55%),
    var(--xh-grad-ink);
  border: 1px solid var(--xh-edge);
  box-shadow: var(--xh-shadow-3);
}
.xh-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 22px 22px; mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.xh-hero-title {
  font-size: clamp(30px, 6vw, 60px); font-weight: 900; line-height: 1.02;
  letter-spacing: -.02em; margin: 0 0 12px;
}
.xh-hero-title .xh-grad-text { background: var(--xh-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xh-hero-sub { max-width: 56ch; color: var(--xh-text-dim); font-size: clamp(14px, 1.6vw, 18px); line-height: 1.6; }

/* --- hero enhancements (additive) ---------------------------------------
   Slow ambient glow drift behind the hero, and a cinematic clip-up reveal
   for the headline. Apply .xh-hero--drift to an existing .xh-hero, and wrap
   each headline line in a .xh-clip > span to get the masked rise. */
.xh-hero--drift::before {
  content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(40% 50% at 78% 18%, rgba(46,226,122,.14), transparent 70%),
    radial-gradient(46% 56% at 14% 86%, rgba(74,168,255,.12), transparent 70%);
  animation: xh-ambient-drift 16s ease-in-out infinite;
}
.xh-hero > * { position: relative; z-index: 1; }
.xh-clip { display: block; overflow: hidden; }
.xh-clip > span { display: inline-block; animation: xh-clip-up var(--xh-slow) var(--xh-ease-out) both; animation-delay: var(--d, 0s); }

/* --- gate / login overlay --- */
.xh-gate {
  position: fixed; inset: 0; z-index: var(--xh-z-gate);
  display: grid; place-items: center; padding: 24px;
  background: rgba(6,8,12,.78);
  backdrop-filter: blur(10px) saturate(120%);
  animation: xh-fade-in var(--xh-mid) ease both;
}
.xh-gate[hidden] { display: none; }
.xh-gate-card {
  width: min(420px, 100%);
  background: var(--xh-grad-ink);
  border: 1px solid var(--xh-edge);
  border-radius: var(--xh-r-lg);
  padding: 30px 28px;
  box-shadow: var(--xh-shadow-3), 0 0 60px -22px var(--xh-brand);
  animation: xh-fade-up var(--xh-mid) var(--xh-ease-out) both;
}

/* ============================== 5. COMPONENTS ============================ */

/* --- card --- */
.xh-card {
  position: relative;
  background: color-mix(in srgb, var(--xh-panel) 86%, transparent);
  border: 1px solid var(--xh-edge);
  border-radius: var(--xh-r-md);
  padding: var(--xh-s-5);
  box-shadow: var(--xh-shadow-1);
  transition: border-color var(--xh-fast) var(--xh-ease),
              transform var(--xh-fast) var(--xh-ease),
              box-shadow var(--xh-fast) var(--xh-ease);
}
.xh-card--pad-sm { padding: var(--xh-s-4); }
.xh-card--hover:hover { border-color: var(--xh-edge-hot); transform: translateY(-2px); box-shadow: var(--xh-shadow-2); }
.xh-card--glow { box-shadow: var(--xh-shadow-2), 0 0 50px -22px var(--xh-brand); }
.xh-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.xh-card__title { font-weight: 700; font-size: 15px; }

/* --- tile (stat) --- */
.xh-tile {
  background: var(--xh-panel-2);
  border: 1px solid var(--xh-edge);
  border-radius: var(--xh-r-sm);
  padding: 12px 14px;
  text-align: center;
}
.xh-tile__label { font-size: 10px; letter-spacing: .04em; color: var(--xh-sub); margin-bottom: 4px; }
.xh-tile__val   { font-family: var(--xh-font-mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 700; color: var(--xh-text); line-height: 1.1; }
.xh-tile__val--home { color: var(--xh-home); }
.xh-tile__val--away { color: var(--xh-away); }
.xh-tile__val--val  { color: var(--xh-val); }
.xh-tile__val--big  { font-size: clamp(34px, 5vw, 52px); font-weight: 900; }
.xh-tile__delta { font-size: 11px; margin-top: 3px; font-family: var(--xh-font-mono); }
.xh-up   { color: var(--xh-val); }
.xh-down { color: var(--xh-neg); }

/* --- bar / seg (probability bar) --- */
.xh-bar {
  display: flex; height: 36px; overflow: hidden;
  border: 1px solid var(--xh-edge);
  border-radius: var(--xh-r-sm);
  background: var(--xh-panel-2);
  font-family: var(--xh-font-mono); font-size: 12px; font-weight: 700;
}
.xh-bar--thin { height: 8px; border-radius: var(--xh-r-pill); }
.xh-bar--thin .xh-seg { color: transparent; }
.xh-seg {
  display: grid; place-items: center; color: var(--xh-ink); white-space: nowrap;
  transform-origin: left center;
  transition: width var(--xh-slow) var(--xh-ease), flex-basis var(--xh-slow) var(--xh-ease);
  min-width: 0;
}
.xh-seg--home  { background: var(--xh-home); }
.xh-seg--draw  { background: color-mix(in srgb, var(--xh-draw) 80%, transparent); color: #fff; }
.xh-seg--away  { background: var(--xh-away); }
.xh-seg--brand { background: var(--xh-neg); }
.xh-seg--over  { background: var(--xh-val); }
.xh-seg--under { background: #6f7bff; }
.xh-seg--val   { background: var(--xh-val); }
.xh-seg--watch { background: var(--xh-watch); }
.xh-seg--pass  { background: color-mix(in srgb, var(--xh-draw) 70%, transparent); color: #fff; }
.xh-seg--animate { animation: xh-bar-grow var(--xh-slow) var(--xh-ease-out) both; }

/* --- btn --- */
.xh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  padding: 10px 16px; border-radius: var(--xh-r-sm); cursor: pointer;
  color: var(--xh-text); background: var(--xh-panel-2);
  border: 1px solid var(--xh-edge);
  transition: all var(--xh-fast) var(--xh-ease);
  user-select: none;
}
.xh-btn:hover { border-color: var(--xh-edge-hot); background: var(--xh-panel-3); }
.xh-btn:active { transform: scale(.985); }
.xh-btn:disabled { opacity: .5; cursor: not-allowed; }
.xh-btn--primary { background: var(--xh-grad-brand); color: var(--xh-ink); border-color: transparent; font-weight: 700; box-shadow: var(--xh-glow-brand); }
.xh-btn--primary:hover { filter: brightness(1.06); }
.xh-btn--ghost { background: transparent; }
.xh-btn--sm { padding: 7px 12px; font-size: 12px; }
.xh-btn--block { display: flex; width: 100%; }

/* --- cta (big gradient) --- */
.xh-cta {
  position: relative; overflow: hidden; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px 20px; border: none; cursor: pointer;
  border-radius: var(--xh-r-md);
  color: var(--xh-ink); font-weight: 800; font-size: 18px;
  background: var(--xh-grad-brand);
  box-shadow: var(--xh-glow-brand);
  transition: transform var(--xh-fast) var(--xh-ease), filter var(--xh-fast) var(--xh-ease);
}
.xh-cta:hover { filter: brightness(1.05); }
.xh-cta:active { transform: scale(.99); }
.xh-cta__sub { font-size: 10px; font-weight: 500; color: rgba(10,12,17,.72); }
.xh-cta::before {            /* moving sheen */
  content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); animation: xh-sheen-sweep 3.4s ease-in-out infinite;
}

/* --- pill (tab) --- */
.xh-pill {
  display: inline-flex; align-items: center; gap: 6px;
  flex: 0 0 auto; white-space: nowrap; cursor: pointer;
  padding: 7px 14px; border-radius: var(--xh-r-pill);
  font-size: 13px; font-weight: 600; color: var(--xh-sub);
  background: transparent; border: 1px solid var(--xh-edge);
  transition: all var(--xh-fast) var(--xh-ease);
}
.xh-pill:hover { color: var(--xh-text); border-color: var(--xh-edge-hot); }
.xh-pill[aria-selected="true"],
.xh-pill[data-active="true"] {
  background: var(--xh-grad-brand); color: var(--xh-ink);
  border-color: transparent; font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(46,226,122,.6);
}
.xh-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.xh-pills::-webkit-scrollbar { display: none; }

/* --- badge (verdict chips) --- */
.xh-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--xh-r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid transparent; line-height: 1.4;
}
.xh-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.xh-badge-val   { color: var(--xh-val);   background: color-mix(in srgb, var(--xh-val) 14%, transparent);   border-color: color-mix(in srgb, var(--xh-val) 40%, transparent); }
.xh-badge-watch { color: var(--xh-watch); background: color-mix(in srgb, var(--xh-watch) 14%, transparent); border-color: color-mix(in srgb, var(--xh-watch) 40%, transparent); }
.xh-badge-pass  { color: var(--xh-pass);  background: color-mix(in srgb, var(--xh-pass) 14%, transparent);  border-color: color-mix(in srgb, var(--xh-pass) 38%, transparent); }
.xh-badge-val.xh-badge--live { animation: xh-pulse-glow 2s ease-in-out infinite; }

/* --- console (terminal "AI compute" look) --- */
.xh-console {
  position: relative;
  background: var(--xh-ink-2);
  border: 1px solid var(--xh-edge);
  border-radius: var(--xh-r-md);
  padding: 14px 16px;
  font-family: var(--xh-font-mono); font-size: 12.5px; line-height: 1.65;
  color: #cdd6e6;
  max-height: 320px; overflow-y: auto;
  box-shadow: inset 0 0 40px -20px #000;
}
.xh-console::before {       /* faux titlebar dots */
  content: ""; position: sticky; top: -14px; display: block;
}
.xh-console__bar {
  display: flex; align-items: center; gap: 6px; margin: -4px -4px 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--xh-edge-soft);
  color: var(--xh-sub); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.xh-console__dot { width: 9px; height: 9px; border-radius: 50%; }
.xh-console__dot--r { background: #ff5f56; } .xh-console__dot--y { background: #ffbd2e; } .xh-console__dot--g { background: #27c93f; }
.xh-console__line { display: block; white-space: pre-wrap; animation: xh-console-line-in .26s var(--xh-ease-out) both; }
.xh-console__line--dim { color: var(--xh-sub); }
.xh-console__line--ok  { color: var(--xh-val); }
.xh-console__line--warn { color: var(--xh-watch); }
.xh-console__prompt { color: var(--xh-brand); }
.xh-caret {
  display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom;
  background: var(--xh-val); margin-left: 2px;
  animation: xh-caret-blink 1s steps(1) infinite;
}

/* --- heat (heatmap cell) --- */
.xh-heat { display: grid; gap: 3px; }
.xh-heat__cell {
  aspect-ratio: 1; border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--xh-font-mono); font-size: 10px; color: rgba(255,255,255,.85);
  /* intensity driven inline by JS:  style="--i:0.0..1.0" */
  background: color-mix(in srgb, var(--xh-brand) calc(var(--i, 0) * 100%), var(--xh-panel-2));
  transition: transform var(--xh-fast) var(--xh-ease), outline-color var(--xh-fast) var(--xh-ease);
  outline: 1px solid transparent;
}
.xh-heat__cell:hover { transform: scale(1.12); outline-color: rgba(255,255,255,.4); z-index: 1; }
.xh-heat__cell--peak { outline: 1.5px solid var(--xh-val); color: #fff; font-weight: 700; }
.xh-heat__axis { font-family: var(--xh-font-mono); font-size: 10px; color: var(--xh-sub); }

/* --- chart (svg wrapper) --- */
.xh-chart {
  position: relative;
  background: linear-gradient(180deg, var(--xh-ink-2), color-mix(in srgb, var(--xh-panel) 60%, transparent));
  border: 1px solid var(--xh-edge);
  border-radius: var(--xh-r-md);
  padding: 14px;
}
.xh-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.xh-chart__grid line { stroke: var(--xh-edge-soft); stroke-width: 1; }
.xh-chart__axis { fill: var(--xh-sub); font-family: var(--xh-font-mono); font-size: 10px; }
.xh-chart__line { fill: none; stroke: var(--xh-val); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(25,224,138,.4)); }
.xh-chart__line--brand { stroke: var(--xh-neg); filter: drop-shadow(0 0 6px rgba(255,90,60,.4)); }
.xh-chart__line--home { stroke: var(--xh-home); filter: none; }
.xh-chart__line--away { stroke: var(--xh-away); filter: none; }
.xh-chart__area { fill: url(#xhAreaGrad); opacity: .5; }
.xh-chart__dot { fill: var(--xh-val); stroke: var(--xh-ink); stroke-width: 2; }
.xh-chart__draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: xh-chart-draw 1.4s var(--xh-ease-out) forwards; }
@keyframes xh-chart-draw { to { stroke-dashoffset: 0; } }
.xh-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--xh-sub); }
.xh-legend__key { display: inline-flex; align-items: center; gap: 5px; }
.xh-legend__swatch { width: 10px; height: 10px; border-radius: 3px; }

/* --- orb (verdict) --- */
.xh-orb {
  position: relative; width: 168px; height: 168px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--xh-orb-c, var(--xh-draw)) 22%, transparent), transparent 60%),
    var(--xh-panel);
  border: 1px solid var(--xh-edge);
  box-shadow: 0 0 50px -16px var(--xh-orb-c, var(--xh-draw)),
              inset 0 0 34px -14px var(--xh-orb-c, var(--xh-draw));
  transition: box-shadow var(--xh-mid) var(--xh-ease), border-color var(--xh-mid) var(--xh-ease);
}
.xh-orb::before {           /* rotating conic ring */
  content: ""; position: absolute; inset: -2px; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 0deg, transparent, var(--xh-orb-c, var(--xh-draw)), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .9; animation: xh-orb-rotate 6s linear infinite;
}
.xh-orb__label { font-size: 30px; font-weight: 900; letter-spacing: .04em; color: var(--xh-orb-c, var(--xh-draw)); }
.xh-orb__sub { font-size: 10px; color: var(--xh-sub); margin-top: 4px; padding: 0 14px; }
.xh-orb--val   { --xh-orb-c: var(--xh-val); }
.xh-orb--watch { --xh-orb-c: var(--xh-watch); }
.xh-orb--pass  { --xh-orb-c: var(--xh-draw); }
.xh-orb--idle  { --xh-orb-c: var(--xh-draw); }
.xh-orb--val::before { animation-duration: 3.4s; }

/* --- inputs (shared field styling) --- */
.xh-field {
  width: 100%; padding: 10px 12px;
  background: var(--xh-panel-2); color: var(--xh-text);
  border: 1px solid var(--xh-edge); border-radius: var(--xh-r-sm);
  font-family: inherit; font-size: 14px;
  transition: border-color var(--xh-fast) var(--xh-ease), box-shadow var(--xh-fast) var(--xh-ease);
}
.xh-field:focus { outline: none; border-color: var(--xh-brand); box-shadow: 0 0 0 3px rgba(46,226,122,.16); }
.xh-field--mono { font-family: var(--xh-font-mono); text-align: center; }
.xh-label { font-size: 11px; color: var(--xh-sub); display: block; margin-bottom: 5px; }

/* --- table (value rows etc.) --- */
.xh-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.xh-table thead th {
  text-align: right; font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--xh-sub); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--xh-edge);
}
.xh-table thead th:first-child, .xh-table tbody td:first-child { text-align: left; }
.xh-table tbody td { padding: 9px 6px; border-bottom: 1px solid var(--xh-edge-soft); font-family: var(--xh-font-mono); }
.xh-table tbody tr:hover { background: rgba(255,255,255,.02); }

/* --- misc helpers --- */
.xh-divider { height: 1px; background: var(--xh-edge); border: 0; margin: var(--xh-s-4) 0; }
.xh-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--xh-r-pill); font-size: 11px; background: var(--xh-panel-2); border: 1px solid var(--xh-edge); color: var(--xh-sub); }
.xh-chip--inj { color: var(--xh-watch); background: color-mix(in srgb, var(--xh-watch) 10%, transparent); border-color: color-mix(in srgb, var(--xh-watch) 30%, transparent); }
.xh-dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--xh-val); box-shadow: 0 0 8px var(--xh-val); animation: xh-pulse-glow 1.8s ease-in-out infinite; color: var(--xh-val); display: inline-block; }
.xh-skeleton { background: linear-gradient(90deg, var(--xh-panel-2) 25%, var(--xh-panel-3) 50%, var(--xh-panel-2) 75%); background-size: 220% 100%; animation: xh-shimmer 1.4s linear infinite; border-radius: var(--xh-r-sm); }
.xh-spinner { width: 18px; height: 18px; border: 2px solid var(--xh-edge); border-top-color: var(--xh-brand); border-radius: 50%; animation: xh-spin .8s linear infinite; }
.xh-disclaimer { font-size: 11px; color: color-mix(in srgb, var(--xh-sub) 80%, transparent); line-height: 1.6; }
.xh-disclaimer b { color: var(--xh-text-dim); }

/* steam-move flash for odds movement module */
.xh-steam { color: var(--xh-watch); font-weight: 700; }
.xh-steam-flash { animation: xh-pulse-glow 1.6s ease-in-out 3; color: var(--xh-watch); }

/* =================== 6b. MICRO-INTERACTION REFINEMENTS ====================
   Additive only. These layer extra polish onto the existing components via
   new utility classes and :hover/:focus-visible/:active states. No existing
   selector is renamed or removed. */

/* --- universal hover-lift utility (opt-in) --- */
.xh-lift { transition: transform var(--xh-fast) var(--xh-ease), box-shadow var(--xh-fast) var(--xh-ease); }
.xh-lift:hover { transform: translateY(-3px); box-shadow: var(--xh-shadow-2); }
.xh-lift:active { transform: translateY(-1px); }

/* --- press utility (tactile click) --- */
.xh-press { transition: transform var(--xh-fast) var(--xh-ease); }
.xh-press:active { transform: scale(.97); }

/* --- card: smoother arrival shadow + crisp focus ring for interactive cards --- */
.xh-card--hover:focus-visible { border-color: var(--xh-edge-hot); box-shadow: var(--xh-shadow-2), 0 0 0 3px rgba(46,226,122,.18); outline: none; }
.xh-card--interactive { cursor: pointer; }
.xh-card--interactive:hover { border-color: var(--xh-edge-hot); transform: translateY(-3px); box-shadow: var(--xh-shadow-2); }
.xh-card--interactive:active { transform: translateY(-1px); }

/* --- button: focus-visible ring + optional one-shot sheen on primary --- */
.xh-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(46,226,122,.22); border-color: var(--xh-edge-hot); }
.xh-btn--primary:focus-visible { box-shadow: var(--xh-glow-brand), 0 0 0 3px rgba(46,226,122,.3); }
.xh-btn--sheen { position: relative; overflow: hidden; }
.xh-btn--sheen::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg); opacity: 0; transition: opacity var(--xh-fast) var(--xh-ease);
}
.xh-btn--sheen:hover::after { opacity: 1; animation: xh-sheen-sweep 1.1s var(--xh-ease-out); }

/* --- cta: focus-visible ring; sheen already runs continuously --- */
.xh-cta:focus-visible { outline: none; box-shadow: var(--xh-glow-brand), 0 0 0 3px rgba(46,226,122,.32); }

/* --- pill: animated active underline accent (opt-in) --- */
.xh-pill { position: relative; }
.xh-pill:focus-visible { outline: none; color: var(--xh-text); border-color: var(--xh-edge-hot); box-shadow: 0 0 0 3px rgba(46,226,122,.2); }

/* --- field: lifted focus state --- */
.xh-field:focus-visible { outline: none; }
.xh-field:hover { border-color: var(--xh-edge-hot); }

/* --- tile: optional hover-raise for interactive stat tiles --- */
.xh-tile--hover { transition: transform var(--xh-fast) var(--xh-ease), border-color var(--xh-fast) var(--xh-ease), box-shadow var(--xh-fast) var(--xh-ease); }
.xh-tile--hover:hover { transform: translateY(-2px); border-color: var(--xh-edge-hot); box-shadow: var(--xh-shadow-1); }

/* --- value badge: add an opt-in continuous breathe (calmer than --live) --- */
.xh-badge--breathe { animation: xh-breathe 2.6s ease-in-out infinite; }

/* --- orb: opt-in arrival pop (use on the verdict orb when it first lands) --- */
.xh-orb--pop { animation: xh-orb-pop var(--xh-slow) var(--xh-ease-out) both; }

/* --- console: caret-trail glow + line-in is already wired --- */
.xh-console__line--brand { color: var(--xh-brand); }
.xh-console__cursor-line::after {
  content: ""; display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom;
  background: var(--xh-val); margin-left: 2px; animation: xh-caret-blink 1s steps(1) infinite;
}

/* --- live trading-board row tick (movement module) --- */
.xh-tick { animation: xh-tick-flash var(--xh-slow) var(--xh-ease) both; }
.xh-tick--up   { color: var(--xh-val); }
.xh-tick--down { color: var(--xh-neg); }

/* --- heat cell: opt-in staggered fill entrance --- */
.xh-heat__cell--in { animation: xh-cell-in var(--xh-mid) var(--xh-ease-out) both; animation-delay: var(--d, 0s); }
.xh-heat__cell--peak { animation: xh-pulse-glow 2.4s ease-in-out infinite; color: var(--xh-val); }

/* --- chart: a second draw timing for equity curves (slower, more deliberate) --- */
.xh-chart__draw--slow { stroke-dasharray: 2200; stroke-dashoffset: 2200; animation: xh-chart-draw 1.9s var(--xh-ease-out) forwards; animation-delay: var(--d, 0s); }
.xh-chart__dot--in { animation: xh-scale-in var(--xh-fast) var(--xh-ease-out) both; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: center; }

/* --- tall skeleton block variant --- */
.xh-skeleton--block { background-size: 220% 100%; animation: xh-skeleton-sweep 1.5s linear infinite; }

/* --- soft scroll-margin so anchored entrances are not clipped under header --- */
.xh-anim-up, .xh-anim-down, .xh-anim-left, .xh-anim-right, .xh-anim-scale, .xh-anim-rise { will-change: transform, opacity; }

/* ============================== 7. RESPONSIVE ============================ */
.xh-grid { display: grid; gap: 16px; }
.xh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.xh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* keep the pill/tab bar from ever pushing the page wide: it scrolls instead */
.xh-pills {
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  overscroll-behavior-x: contain;
}

@media (max-width: 760px) {
  .xh-grid--2, .xh-grid--3, .xh-grid--4 { grid-template-columns: 1fr; }
  .xh-grid--keep-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .xh-orb { width: 144px; height: 144px; }
  .xh-shell { padding: 0 14px; }
  .xh-card { padding: var(--xh-s-4); }
}

/* ---- tablet / large-phone (≤860px) -------------------------------------
   Condense the shell, collapse the 2-up grid, make the tab bar comfortably
   scrollable, and dial fluid type down a touch. */
@media (max-width: 860px) {
  html { -webkit-text-size-adjust: 100%; }
  .xh-shell { padding: 0 16px; }

  /* two-column grids collapse to a single column on narrow screens */
  .xh-grid { gap: 14px; }
  .xh-grid--2 { grid-template-columns: 1fr; }

  /* tab/pill bar: scroll horizontally, never wrap or push off-screen.
     A little inline padding keeps the first/last pill clear of the edges. */
  .xh-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;          /* Firefox */
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .xh-pills::-webkit-scrollbar { display: none; }   /* WebKit/Blink */
  .xh-pill {
    flex: 0 0 auto;
    min-height: 40px;               /* comfortable touch target */
    padding: 9px 14px;
  }

  /* fluid header type — condense the wordmark gracefully */
  .xh-hero { padding: clamp(24px, 6vw, 48px) clamp(18px, 5vw, 34px); }
  .xh-hero-title { font-size: clamp(28px, 8vw, 44px); }

  /* roomier touch targets for the main interactive controls */
  .xh-btn { min-height: 40px; }
  .xh-cta { padding: 15px 18px; }
}

/* ---- small phone (≤560px, ~380px target) -------------------------------
   Tightest layout: single-column everything, condensed header, generous
   touch targets, and a hard guard against any horizontal page overflow. */
@media (max-width: 560px) {
  .xh-shell { padding: 0 12px; }

  /* nothing should be able to widen the viewport */
  .xh-grid--2, .xh-grid--3, .xh-grid--4,
  .xh-grid--keep-2 { grid-template-columns: 1fr; }

  /* header condenses: smaller logo, tighter wordmark, hide the eyebrow tagline
     to save vertical space on tiny screens */
  .xh-logo { width: 30px; height: 30px; font-size: 16px; }
  .xh-wordmark { font-size: 14px; }
  .xh-tagline { font-size: 8px; letter-spacing: .16em; }

  /* fluid type tuned for ~380px */
  .xh-hero { padding: 22px 16px; border-radius: var(--xh-r-lg); }
  .xh-hero-title { font-size: clamp(24px, 9vw, 34px); }
  .xh-hero-sub { font-size: 14px; }

  /* pills stay scrollable with a usable hit area */
  .xh-pill { padding: 9px 13px; font-size: 12.5px; }

  /* cards / tiles: tighter padding, but keep numbers legible */
  .xh-card { padding: var(--xh-s-4); border-radius: var(--xh-r-md); }
  .xh-tile { padding: 10px 10px; }
  .xh-tile__val { font-size: 20px; }
  .xh-tile__val--big { font-size: clamp(30px, 11vw, 42px); }

  /* verdict orb scales down on the smallest screens */
  .xh-orb { width: 132px; height: 132px; }
  .xh-orb__label { font-size: 26px; }

  /* keep buttons full-width-friendly and easy to tap */
  .xh-btn { min-height: 42px; }
  .xh-gate { padding: 16px; }
  .xh-gate-card { padding: 24px 20px; }

  /* let wide content (tables, consoles) scroll instead of overflowing */
  .xh-table { font-size: 12px; }
  .xh-console { font-size: 11.5px; }
}

/* ===================== 8. REDUCED MOTION (REINFORCED) ====================
   The base block (section 3) already collapses every animation/transition to
   ~0ms. This appends a stronger guard for the v2 motion system: kill the
   ambient/infinite loops outright, neutralise opt-in transforms, and ensure
   entrance animations never leave content stuck invisible (`both` fill could
   freeze frame-0 opacity:0 if a duration were honoured). Additive — it only
   tightens behaviour for users who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  /* never leave entrance/`both`-filled elements hidden */
  .xh-anim-up, .xh-anim-in, .xh-anim-down, .xh-anim-left, .xh-anim-right,
  .xh-anim-scale, .xh-anim-rise, .xh-anim-pop, .xh-num-settle,
  .xh-clip > span, .xh-heat__cell--in, .xh-orb--pop, .xh-seg--animate,
  .xh-chart__draw, .xh-chart__draw--slow, .xh-chart__dot--in, .xh-console__line {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    stroke-dashoffset: 0 !important;
  }
  /* stop continuous / ambient loops entirely */
  .xh-anim-float, .xh-anim-pulse, .xh-anim-breathe, .xh-badge--breathe,
  .xh-badge--live, .xh-heat__cell--peak, .xh-dot-live, .xh-steam-flash,
  .xh-spinner, .xh-skeleton, .xh-skeleton--block, .xh-ping,
  .xh-hero--drift::before, .xh-cta::before, .xh-orb::before,
  .xh-btn--sheen:hover::after, .xh-caret, .xh-console__cursor-line::after {
    animation: none !important;
  }
  /* keep loading affordances legible without the shimmer sweep */
  .xh-skeleton, .xh-skeleton--block { background: var(--xh-panel-2); }
  /* disable opt-in hover/press displacement so nothing jumps */
  .xh-lift:hover, .xh-lift:active,
  .xh-press:active,
  .xh-card--hover:hover, .xh-card--interactive:hover, .xh-card--interactive:active,
  .xh-tile--hover:hover, .xh-btn:active, .xh-cta:active,
  .xh-heat__cell:hover {
    transform: none !important;
  }
}