/* ============================================================
   Statistic workspace — Mission Control
   Obsidian glass · neon indigo data · no-scroll 100vh
   Inherits tokens from styles.css
   ============================================================ */

.stx{
  flex:1 1 auto; min-width:0; height:100vh; min-height:0;
  display:flex; flex-direction:column; gap:14px; padding:14px;
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(900px 520px at 30% -10%, rgba(22,192,216,.12), transparent 60%),
    radial-gradient(800px 600px at 108% 120%, rgba(46,211,198,.10), transparent 58%);
}

/* shared glass panel */
.sx-panel{
  position:relative; min-height:0; min-width:0; display:flex; flex-direction:column;
  background:var(--glass); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
}
.sx-panel::before{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 16%); }

.sx-phead{ display:flex; align-items:center; gap:10px; padding:13px 16px; flex:0 0 auto;
  border-bottom:1px solid var(--line-soft); position:relative; z-index:2; }
.sx-eyebrow{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:7px; white-space:nowrap; }
.sx-eyebrow .spark{ color:var(--ai-b); filter:drop-shadow(0 0 6px var(--ai-b)); }
.sx-ptitle{ font-size:var(--fs-body); font-weight:var(--fw-black); letter-spacing:-.01em; color:var(--ink); margin-left:2px; white-space:nowrap; }
.sx-phead .sx-eyebrow + .sx-ptitle{ margin-left:0; }
.sx-pspacer{ flex:1; }

/* dropdown (shared) */
.sx-dd{ display:flex; align-items:center; gap:8px; height:32px; max-width:230px; padding:0 10px; border-radius:10px;
  background:var(--well); border:1px solid var(--line); color:var(--ink-2); font-size:var(--fs-sub); font-weight:var(--fw-bold);
  transition:.16s var(--out); }
.sx-dd .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sx-dd:hover{ color:var(--ink); border-color:var(--line-strong); }
.sx-dd.open{ color:#fff; border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-soft); }
.sx-dd .chev{ color:var(--ink-3); margin-left:auto; transition:transform .2s var(--out); }
.sx-dd.open .chev{ transform:rotate(180deg); }
.sx-dd .pi, .sx-mi .pi{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center; color:#fff; flex:0 0 22px;
  background:radial-gradient(120% 120% at 30% 20%, hsl(var(--ch) 80% 62%), hsl(var(--ch) 70% 42%));
  box-shadow:0 2px 8px -2px hsl(var(--ch) 80% 50% / .6), inset 0 1px 0 rgba(255,255,255,.3); }
.sx-menu{ position:absolute; top:40px; right:0; min-width:280px; z-index:60; padding:6px;
  background:var(--glass-3); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border:1px solid var(--line-strong); border-radius:14px; box-shadow:var(--shadow-pop); animation:pop .18s var(--spring); }
.sx-menu .mh{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); padding:6px 10px 7px; }
.sx-mi{ display:flex; align-items:center; gap:10px; height:38px; padding:0 10px; border-radius:9px; cursor:pointer;
  color:var(--ink-2); font-size:var(--fs-base); font-weight:var(--fw-med); transition:.14s var(--out); }
.sx-mi .nm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sx-mi .sc{ font-size:var(--fs-label); font-weight:var(--fw-black); color:var(--ai-b); }
.sx-mi:hover{ background:var(--hover); color:var(--ink); }
.sx-mi.on{ background:var(--acc-soft); color:#fff; box-shadow:inset 0 0 0 1px var(--acc-line); }

/* ============================================================ TOP HUD */
.sx-hud{ flex:0 0 auto; display:flex; align-items:center; gap:22px; padding:14px 20px;
  margin:-14px -14px 0; /* full-bleed: identity sits flush in the top-left corner, like every rail head */
  background:var(--glass-head); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border:0; border-bottom:1px solid var(--line-soft); border-radius:0;
  box-shadow:0 14px 34px -26px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); position:relative; overflow:hidden; }
.sx-hud::after{ content:''; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg,transparent,var(--acc-line),var(--ai-b),transparent); opacity:.5; }

.sx-hud-id{ flex:0 0 auto; padding-right:22px; border-right:1px solid var(--line-soft); }
.sx-hud-eyebrow{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.18em; color:var(--ink-3); display:flex; align-items:center; gap:7px; }
.sx-glow-dot{ width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 10px 1px var(--good); animation:sxblink 2s ease-in-out infinite; }
@keyframes sxblink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.sx-hud-title{ margin:5px 0 1px; font-size:var(--fs-stat-2); font-weight:var(--fw-black); letter-spacing:-.03em;
  background:linear-gradient(120deg,#fff,#bfeef4 58%,#2ec7c2); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 30px rgba(22,192,216,.3); }
.sx-hud-sub{ font-size:var(--fs-label); font-weight:var(--fw-med); color:var(--ink-3); }

.sx-hud-metrics{ flex:1; display:flex; align-items:stretch; gap:18px; min-width:0; }
.sx-hud-div{ width:1px; background:var(--line-soft); flex:0 0 1px; }
.sx-metric{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; justify-content:center; }
.sx-metric-top{ display:flex; align-items:center; gap:8px; }
.sx-metric-top .lbl{ font-size:var(--fs-eyebrow); font-weight:var(--fw-bold); color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; white-space:nowrap; }
.sx-metric-top .delta{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); padding:1.5px 6px; border-radius:6px; white-space:nowrap; }
.sx-metric-top .delta.up{ color:var(--good); background:rgba(70,217,160,.12); box-shadow:inset 0 0 0 1px rgba(70,217,160,.25); }
.sx-metric-top .delta.down{ color:var(--bad); background:rgba(255,107,125,.12); box-shadow:inset 0 0 0 1px rgba(255,107,125,.25); }
.sx-metric-num{ font-size:var(--fs-stat-4); font-weight:var(--fw-black); line-height:1; letter-spacing:-.02em; color:#fff;
  text-shadow:0 0 24px rgba(22,192,216,.45); }
.sx-metric-num .suf{ font-size:var(--fs-xl); font-weight:var(--fw-black); color:var(--acc-2); margin-left:1px; }
.sx-spark{ width:96px; height:24px; }
.sx-metric.health .sx-health{ display:flex; align-items:center; gap:12px; }

.sx-hring{ position:relative; width:50px; height:50px; flex:0 0 50px; }
.sx-hring svg{ width:50px; height:50px; }
.hr-track{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:5; }
.hr-fill{ fill:none; stroke:var(--good); stroke-width:5; stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(70,217,160,.7)); transition:stroke-dashoffset 1.2s var(--out); }
.sx-hring-num{ position:absolute; inset:0; display:grid; place-items:center; font-size:var(--fs-lg); font-weight:var(--fw-black); color:#fff; }

.sx-hud-right{ flex:0 0 auto; display:flex; align-items:center; gap:16px; padding-left:20px; border-left:1px solid var(--line-soft); }
.sx-range{ display:flex; gap:2px; background:var(--well); border:1px solid var(--line); border-radius:9px; padding:2px; }
.sx-range button{ height:26px; padding:0 9px; border-radius:7px; font-size:var(--fs-label); font-weight:var(--fw-black); color:var(--ink-3); transition:.16s var(--out); }
.sx-range button:hover{ color:var(--ink-2); }
.sx-range button.on{ background:var(--acc-soft); color:#fff; box-shadow:inset 0 0 0 1px var(--acc-line), 0 0 14px -6px var(--acc-glow); }

/* live globe */
.sx-live{ display:flex; align-items:center; gap:11px; }
.sx-live-globe{ position:relative; width:42px; height:42px; flex:0 0 42px; border-radius:50%; display:grid; place-items:center;
  color:var(--good); background:radial-gradient(circle at 50% 40%, rgba(70,217,160,.18), rgba(70,217,160,.04));
  box-shadow:inset 0 0 0 1px rgba(70,217,160,.3), 0 0 18px -6px rgba(70,217,160,.6); }
.sx-live-globe .ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(70,217,160,.18); }
.sx-live-globe .r1{ animation:sxlivering 3s ease-out infinite; }
.sx-live-globe .r2{ animation:sxlivering 3s ease-out 1.5s infinite; }
@keyframes sxlivering{ 0%{ transform:scale(.7); opacity:.8; } 100%{ transform:scale(1.7); opacity:0; } }
.sx-live-globe .ping{ position:absolute; width:4px; height:4px; border-radius:50%; background:var(--good); box-shadow:0 0 6px var(--good); }
.sx-live-globe .p1{ top:9px; left:14px; animation:sxping 2.4s ease-in-out infinite; }
.sx-live-globe .p2{ top:24px; left:26px; animation:sxping 2.4s ease-in-out .8s infinite; }
.sx-live-globe .p3{ top:27px; left:11px; animation:sxping 2.4s ease-in-out 1.5s infinite; }
@keyframes sxping{ 0%,100%{ opacity:.25; transform:scale(.7); } 50%{ opacity:1; transform:scale(1.3); } }
.sx-live-meta .row1{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:6px; }
.sx-live-meta .row1 .dot{ width:6px; height:6px; border-radius:50%; background:var(--bad); box-shadow:0 0 8px var(--bad); animation:sxblink 1.4s ease-in-out infinite; }
.sx-live-meta .row2{ font-size:var(--fs-xl); font-weight:var(--fw-black); color:#fff; line-height:1.1; margin-top:1px; text-shadow:0 0 14px rgba(70,217,160,.4); }

/* ============================================================ BODY GRID */
.sx-grid{ flex:1 1 auto; min-height:0; display:flex; gap:14px; align-items:stretch; }
.sx-col-main{ flex:1 1 0; min-width:0; min-height:0; display:flex; flex-direction:column; gap:14px; }
.sx-col-main .rx{ flex:1.32 1 0; }
.sx-row-bottom{ flex:1 1 0; min-height:0; display:flex; gap:14px; align-items:stretch; }
.sx-row-bottom > .sm{ flex:1 1 0; min-width:0; }

/* ============================================================ RETENTION X-RAY */
.rx-body{ flex:1; min-height:0; display:flex; gap:16px; padding:16px; position:relative; z-index:1; }
.rx-player{ flex:0 0 auto; display:flex; flex-direction:column; gap:10px; min-height:0; }
.rx-player[data-orient="land"]{ justify-content:center; width:min(48%, 380px); }
.rx-frame{ position:relative; aspect-ratio:var(--ar, 9/16); height:100%; min-height:0; border-radius:16px; overflow:hidden;
  background:repeating-linear-gradient(135deg,#191c28 0 13px,#15171f 13px 26px);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.9), 0 0 50px -12px hsl(var(--ch) 80% 55% / .35),
    0 0 0 1px var(--line-strong), inset 0 1px 0 rgba(255,255,255,.08); }
.rx-player[data-orient="land"] .rx-frame{ height:auto; width:100%; }
.rx-grad{ position:absolute; inset:0; background:
  radial-gradient(120% 80% at 30% 16%, hsl(var(--ch) 80% 58% / .5), transparent 58%),
  linear-gradient(180deg, transparent 40%, rgba(0,0,0,.5)); }
.rx-scan{ position:absolute; left:0; right:0; height:34%; top:-34%;
  background:linear-gradient(180deg, transparent, hsl(var(--ch) 90% 70% / .16), transparent);
  animation:rxscan 4.5s ease-in-out infinite; }
@keyframes rxscan{ 0%{ top:-34%; } 100%{ top:100%; } }
.rx-play{ position:absolute; inset:0; margin:auto; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  color:#fff; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.32);
  box-shadow:0 8px 22px -6px rgba(0,0,0,.6); }
.rx-platform{ position:absolute; top:9px; left:9px; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; color:#fff;
  background:rgba(0,0,0,.5); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.16); }
.rx-dur{ position:absolute; bottom:9px; right:9px; font-size:var(--fs-eyebrow); font-weight:var(--fw-bold); padding:2px 7px; border-radius:6px; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); }
.rx-cap{ position:absolute; left:10%; right:24%; bottom:13%; display:flex; flex-direction:column; gap:6px; }
.rx-cap i{ height:8px; border-radius:5px; background:rgba(255,255,255,.6); box-shadow:0 1px 3px rgba(0,0,0,.4); }
.rx-cap i.s{ width:58%; background:rgba(255,255,255,.32); }
.rx-pstats{ display:flex; gap:8px; }
.rx-pstats .ps{ flex:1; text-align:center; padding:7px 4px; border-radius:10px; background:var(--well); border:1px solid var(--line-soft); }
.rx-pstats .ps b{ display:block; font-size:var(--fs-body); font-weight:var(--fw-black); color:#fff; }
.rx-pstats .ps span{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }

.rx-chartcol{ flex:1; min-width:0; min-height:0; position:relative; }
.rx-chartwrap{ position:absolute; inset:0; padding:6px 6px 22px 34px; }
.rx-svg{ width:100%; height:100%; overflow:visible; }
.rx-grid{ stroke:rgba(255,255,255,.05); stroke-width:1; }
.rx-area{ opacity:1; }
@keyframes rxfade{ from{ opacity:0; } to{ opacity:1; } }
.rx-line{ stroke-dasharray:1; stroke-dashoffset:0;
  filter:drop-shadow(0 3px 10px rgba(22,192,216,.55)); }
@keyframes rxdraw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
.rx-guide{ stroke:rgba(255,255,255,.32); stroke-width:1; stroke-dasharray:3 4; }

.rx-yax{ position:absolute; left:0; top:6px; bottom:22px; width:30px; }
.rx-yax span{ position:absolute; right:4px; transform:translateY(-50%); font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-4); font-family:'JetBrains Mono',monospace; }
.rx-xax{ position:absolute; left:34px; right:6px; bottom:2px; display:flex; justify-content:space-between; font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-4); }

/* hover dot + tip */
.rx-dot{ position:absolute; width:11px; height:11px; border-radius:50%; background:#fff; transform:translate(-50%,-50%);
  box-shadow:0 0 0 3px var(--acc-soft), 0 0 14px var(--acc-glow); pointer-events:none; z-index:6; }
.rx-tip{ position:absolute; transform:translate(-50%,calc(-100% - 16px)); pointer-events:none; z-index:7;
  background:var(--glass-3); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line-strong); border-radius:9px; padding:6px 10px; white-space:nowrap;
  box-shadow:var(--shadow-pop); }
.rx-tip-t{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); color:var(--acc-2); }
.rx-tip-v{ font-size:var(--fs-label); font-weight:var(--fw-med); color:var(--ink-2); margin-top:1px; }
.rx-tip-v b{ color:#fff; }

/* AI smart notes */
.rx-note{ position:absolute; z-index:5; }
.rx-anchor{ position:absolute; left:0; top:0; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%);
  background:#fff; box-shadow:0 0 0 4px var(--nc), 0 0 16px var(--nc); }
.rx-stem{ position:absolute; left:0; top:0; width:1.5px; background:var(--nc); transform:translateX(-50%); }
.rx-note.above .rx-stem{ height:16px; bottom:0; top:auto; transform:translate(-50%,-100%); }
.rx-note.below .rx-stem{ height:16px; top:0; transform:translateX(-50%); }
.rx-note.bad{ --nc:rgba(255,107,125,.9); }
.rx-note.good{ --nc:rgba(70,217,160,.9); }
.rx-card{ position:absolute; left:0; top:0; width:188px; transform:translate(var(--tx,-50%), var(--ty,0));
  background:var(--glass-3); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border:1px solid var(--line-strong); border-radius:11px; padding:9px 11px; box-shadow:var(--shadow-pop);
  opacity:1; }
@keyframes rxnote{
  from{ opacity:0; transform:translate(var(--tx,-50%), calc(var(--ty,0) + 8px)) scale(.94); }
  to{ opacity:1; transform:translate(var(--tx,-50%), var(--ty,0)) scale(1); }
}
.rx-note.al{ --tx:-16px; } .rx-note.ac{ --tx:-50%; } .rx-note.ar{ --tx:calc(-100% + 16px); }
.rx-note.above .rx-card{ --ty:calc(-100% - 18px); }
.rx-note.below .rx-card{ --ty:18px; }
.rx-card .rt{ font-size:var(--fs-label); font-weight:var(--fw-black); color:#fff; display:flex; align-items:center; gap:6px; }
.rx-card .rt .dot{ width:7px; height:7px; border-radius:50%; background:var(--nc); box-shadow:0 0 8px var(--nc); flex:0 0 7px; }
.rx-card .rb{ font-size:var(--fs-label); font-weight:var(--fw-reg); color:var(--ink-2); line-height:1.42; margin-top:4px; }

/* ============================================================ SENTIMENT MATRIX */
.sm-scan{ display:flex; align-items:center; gap:7px; font-size:var(--fs-eyebrow); font-weight:var(--fw-bold); color:var(--ink-3); white-space:nowrap; }
.sm-scan .d{ width:6px; height:6px; border-radius:50%; background:var(--ai-b); box-shadow:0 0 8px var(--ai-b); animation:sxblink 1.8s ease-in-out infinite; }
.sm-body{ flex:1; min-height:0; display:flex; gap:14px; padding:14px 16px 16px; position:relative; z-index:1; }

.sm-cloud{ flex:1; min-width:0; position:relative; border-radius:14px; overflow:hidden;
  background:radial-gradient(closest-side at 50% 50%, rgba(255,255,255,.04), rgba(0,0,0,.22));
  box-shadow:inset 0 0 0 1px var(--line-soft); }
.sm-particle{ position:absolute; border-radius:50%; opacity:.85;
  animation:smfloat ease-in-out infinite alternate; will-change:transform; }
@keyframes smfloat{ 0%{ transform:translate(0,0); opacity:.5; } 100%{ transform:translate(var(--drift), calc(var(--drift) * -0.8)); opacity:.95; } }
.sm-core{ position:absolute; inset:0; margin:auto; width:128px; height:128px; border-radius:50%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; backdrop-filter:blur(3px);
  background:radial-gradient(circle, rgba(8,9,14,.72), rgba(8,9,14,.35) 70%, transparent);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.sm-core-net{ font-size:var(--fs-stat-3); font-weight:var(--fw-black); color:#fff; line-height:1; text-shadow:0 0 22px rgba(70,217,160,.5); }
.sm-core-lbl{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.14em; color:var(--ink-3); margin-top:4px; }
.sm-core-dom{ font-size:var(--fs-label); font-weight:var(--fw-black); margin-top:6px; }

.sm-side{ flex:0 0 150px; display:flex; flex-direction:column; gap:11px; min-height:0; }
.sm-bar{ display:flex; height:9px; border-radius:6px; overflow:hidden; background:rgba(0,0,0,.4); box-shadow:inset 0 0 0 1px var(--line-soft); }
.sm-bar span{ height:100%; }
.sm-legend{ display:flex; flex-direction:column; gap:7px; }
.sm-leg{ display:flex; align-items:center; gap:8px; }
.sm-leg .sw{ width:9px; height:9px; border-radius:3px; flex:0 0 9px; }
.sm-leg .ln{ flex:1; font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-2); }
.sm-leg .lp{ font-size:var(--fs-sub); font-weight:var(--fw-black); color:#fff; }
.sm-top{ margin-top:auto; padding:10px 11px; border-radius:11px; background:var(--well); border:1px solid var(--line-soft);
  display:flex; flex-direction:column; gap:6px; }
.sm-top .q{ font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink); line-height:1.35; }
.sm-top .tag{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.1em; text-transform:uppercase; }

/* ============================================================ LOOP ENGINE (invented) */
.le-new{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.1em; padding:3px 7px; border-radius:6px; color:#fff;
  background:var(--ai-grad); box-shadow:0 2px 12px -2px var(--ai-glow); }
.le-body{ flex:1; min-height:0; display:flex; align-items:center; gap:14px; padding:8px 16px; position:relative; z-index:1; }
.le-orbit{ position:relative; flex:0 0 168px; width:168px; aspect-ratio:1; display:grid; place-items:center; }
.le-svg{ width:100%; height:100%; overflow:visible; }
.le-ring{ fill:none; stroke:rgba(22,192,216,.16); stroke-width:1; }
.le-ring.r2{ stroke:rgba(22,192,216,.12); stroke-dasharray:2 5; }
.le-ring.r3{ stroke:rgba(22,192,216,.09); }
.le-tick{ stroke:rgba(22,192,216,.22); stroke-width:1.4; }
.le-spin{ transform-box:view-box; transform-origin:50% 50%; }
.le-spin.s1{ animation:lespin 6s linear infinite; }
.le-spin.s2{ animation:lespin 9s linear infinite reverse; }
.le-spin.s3{ animation:lespin 13s linear infinite; }
@keyframes lespin{ to{ transform:rotate(360deg); } }
.le-comet{ fill:#fff; }
.le-comet.c1{ fill:#16c0d8; filter:drop-shadow(0 0 8px #16c0d8); }
.le-comet.c2{ fill:#2f9fe0; filter:drop-shadow(0 0 7px #2f9fe0); }
.le-comet.c3{ fill:#2ed3c6; filter:drop-shadow(0 0 6px #2ed3c6); }
.le-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.le-avg{ font-size:var(--fs-stat-5); font-weight:var(--fw-black); color:#fff; line-height:1; text-shadow:0 0 26px var(--ai-glow); }
.le-avg span{ font-size:var(--fs-stat-1); color:var(--ai-b); margin-left:1px; }
.le-avg-l{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-top:4px; }

.le-side{ flex:1; min-width:0; display:flex; flex-direction:column; gap:11px; }
.le-pct{ display:flex; flex-direction:column; }
.le-pct .big{ font-size:var(--fs-stat-2); font-weight:var(--fw-black); color:#fff; line-height:1; text-shadow:0 0 18px var(--ai-glow); }
.le-pct .big .th{ font-size:var(--fs-body); color:var(--acc-2); }
.le-pct .pl{ font-size:var(--fs-eyebrow); font-weight:var(--fw-med); color:var(--ink-3); margin-top:3px; }
.le-bands{ display:flex; flex-direction:column; gap:7px; }
.le-band{ display:flex; align-items:center; gap:9px; }
.le-band .bl{ flex:0 0 52px; font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-2); }
.le-band .btr{ flex:1; height:7px; border-radius:5px; background:rgba(0,0,0,.4); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line-soft); }
.le-band .btr i{ display:block; height:100%; border-radius:5px; transform-origin:left; }
@keyframes lebar{ from{ transform:scaleX(0); } }
.le-band .bp{ flex:0 0 32px; text-align:right; font-size:var(--fs-label); font-weight:var(--fw-black); color:#fff; }
.le-bench{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-4); }
.le-note{ flex:0 0 auto; margin:0 14px 14px; padding:9px 11px; border-radius:11px; position:relative; z-index:1;
  background:linear-gradient(120deg,rgba(22,192,216,.14),rgba(46,211,198,.07)); border:1px solid var(--acc-line);
  font-size:var(--fs-label); font-weight:var(--fw-med); color:var(--ink); line-height:1.4; display:flex; align-items:flex-start; gap:7px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05); }
.le-note .sp{ color:var(--ai-b); filter:drop-shadow(0 0 5px var(--ai-b)); flex:0 0 auto; margin-top:1px; }

/* ============================================================ LEADERBOARD */
.sx-grid > .lb{ min-height:0; }
.lb-body{ flex:1; min-height:0; display:flex; flex-direction:column; gap:11px; padding:13px; }
.lb-card{ flex:1; min-height:0; display:flex; align-items:center; gap:12px; padding:11px; border-radius:14px; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); position:relative; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .26s var(--spring), box-shadow .26s var(--out), border-color .2s var(--out); }
.lb-card::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:.5;
  background:radial-gradient(120% 80% at 8% 0%, var(--tier-soft), transparent 60%); }
.lb-card.gold{   --tier:#ffd66b; --tier-soft:rgba(255,214,107,.18); --tier-glow:rgba(255,200,80,.6); }
.lb-card.silver{ --tier:#d6e0ff; --tier-soft:rgba(214,224,255,.14); --tier-glow:rgba(190,205,255,.5); }
.lb-card.bronze{ --tier:#ffb37a; --tier-soft:rgba(255,179,122,.14); --tier-glow:rgba(255,150,90,.5); }
.lb-card:hover{ transform:translateY(-3px) scale(1.015); border-color:var(--tier);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.7), 0 0 30px -6px var(--tier-glow), inset 0 0 0 1px var(--tier); }

.lb-rank{ flex:0 0 auto; position:relative; z-index:1; }
.lb-rank .num{ font-size:var(--fs-stat-5); font-weight:var(--fw-black); line-height:1; color:var(--tier);
  text-shadow:0 0 18px var(--tier-glow); -webkit-text-stroke:0; }
.lb-thumb{ flex:0 0 50px; width:50px; aspect-ratio:var(--ar, 9/16); border-radius:10px; position:relative; overflow:hidden;
  background:repeating-linear-gradient(135deg,#1b1e2b 0 8px,#161924 8px 16px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.lb-grad{ position:absolute; inset:0; background:radial-gradient(120% 80% at 30% 16%, hsl(var(--ch) 80% 58% / .55), transparent 60%); }
.lb-scan{ position:absolute; left:0; right:0; height:40%; top:-40%;
  background:linear-gradient(180deg,transparent,hsl(var(--ch) 90% 72% / .2),transparent); animation:rxscan 4s ease-in-out infinite; }
.lb-plat{ position:absolute; top:4px; left:4px; width:18px; height:18px; border-radius:6px; display:grid; place-items:center; color:#fff;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.14); }
.lb-vir{ position:absolute; bottom:4px; left:4px; right:4px; display:flex; align-items:center; justify-content:center; gap:2px;
  font-size:var(--fs-micro); font-weight:var(--fw-black); color:#fff; padding:1.5px 0; border-radius:5px; background:rgba(0,0,0,.5); }
.lb-vir svg{ color:var(--ai-b); }
.lb-play{ position:absolute; inset:0; margin:auto; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); opacity:0; transition:.22s var(--out); }
.lb-card:hover .lb-play{ opacity:1; }
.lb-meta{ flex:1; min-width:0; position:relative; z-index:1; }
.lb-nm{ font-size:var(--fs-base); font-weight:var(--fw-black); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lb-row{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.lb-row .v{ display:flex; align-items:center; gap:4px; font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-2); }
.lb-row .v svg{ color:var(--ink-3); }
.lb-row .lift{ font-size:var(--fs-label); font-weight:var(--fw-black); color:var(--good); padding:1.5px 6px; border-radius:6px; background:rgba(70,217,160,.12); box-shadow:inset 0 0 0 1px rgba(70,217,160,.25); }

/* responsive safety for shorter viewports */
@media (max-height:760px){
  .sx-metric-num{ font-size:var(--fs-stat-2); }
  .sx-hud-title{ font-size:var(--fs-stat-1); }
  .le-orbit{ flex-basis:140px; width:140px; }
}

/* entrance animations — only added (via .rx-animate) once the tab is
   confirmed visible + motion-allowed, so the resting state stays fully
   drawn/visible for reduced-motion, print, and hidden/frozen contexts */
.rx-animate .rx-area{ animation:rxfade 1.1s ease; }
.rx-animate .rx-line{ animation:rxdraw 1.7s cubic-bezier(.22,.61,.36,1); }
.rx-animate .rx-card{ animation:rxnote .5s var(--spring) both; }