/* =============================================================================
   stats-normie.css — the NORMIE-FIRST layer on the Stats tab. An animated market
   PULSE (at-a-glance count-up numbers + the hottest collection) and HOT-RIGHT-NOW
   mover cards that surface the one signal getgems can't: Intel-Maps holder
   CONCENTRATION (items ÷ owners) as an animated gauge — right there, no click
   through. The analyst deep-dive (holder-map compare + full table) collapses below.

   Scoped .sx-*, theme-aware (reuses market/theme tokens), CSP-clean, GPU-friendly,
   reduced-motion + mobile handled. Purely additive: the deep-dive still works.
   ========================================================================== */

/* ---- MARKET PULSE — the hook. A branded band of big count-up numbers + the
   single hottest collection called out. ------------------------------------- */
.sx-pulse{
  margin:4px 0 16px; padding:18px 18px 16px; border-radius:18px; position:relative; overflow:hidden;
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--p400) 16%, transparent), transparent 60%),
    radial-gradient(120% 120% at 100% 100%, color-mix(in srgb, var(--acc, #4da9ee) 16%, transparent), transparent 62%),
    var(--panel);
  border:1px solid var(--hairline-2, rgba(128,128,128,.18));
  box-shadow:0 10px 30px rgba(0,0,0,.10);
  animation:sxIn .5s cubic-bezier(.2,.7,.3,1) both;
}
.sx-pulse-h{ display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.sx-pulse-dot{ width:9px; height:9px; border-radius:50%; background:var(--gain, #22c55e);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--gain, #22c55e) 70%, transparent); animation:sxLive 2s ease-out infinite; }
.sx-pulse-t{ font-weight:900; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-hi); }
.sx-pulse-sub{ color:var(--ink-lo); font-size:12px; font-weight:600; }

.sx-pulse-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:12px; }
.sx-stat{ position:relative; padding:2px 2px; }
.sx-stat-n{ font-family:var(--font-num); font-weight:800; font-size:clamp(22px,3.4vw,32px); line-height:1;
  color:var(--ink-hi); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.sx-stat-n .sx-unit{ font-size:.55em; font-weight:800; color:var(--ink-lo); margin-left:3px; }
.sx-stat-k{ margin-top:5px; font-size:11.5px; font-weight:700; color:var(--ink-lo); letter-spacing:.02em; }
.sx-stat-k .sx-q{ cursor:help; color:var(--ink-faint); border-bottom:1px dotted var(--ink-faint); }

/* the hottest-collection callout — a live "what's moving" spotlight */
.sx-hot{ margin-top:15px; display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:14px;
  background:color-mix(in srgb, var(--p400) 9%, var(--well, rgba(128,128,128,.06)));
  border:1px solid color-mix(in srgb, var(--p400) 22%, transparent); }
.sx-hot-img{ width:40px; height:40px; border-radius:11px; object-fit:cover; flex:none; box-shadow:0 3px 8px rgba(0,0,0,.2); }
.sx-hot-body{ min-width:0; flex:1 1 auto; }
.sx-hot-kick{ font-size:10px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--p600, #e0392b); }
.sx-hot-name{ font-weight:900; font-size:16px; color:var(--ink-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sx-hot-meta{ font-size:12px; color:var(--ink-lo); font-weight:600; }
.sx-hot-fire{ font-size:22px; animation:sxWiggle 1.4s ease-in-out infinite; flex:none; }

/* ---- HOT RIGHT NOW — the mover cards. ------------------------------------- */
.sx-movers{ margin:0 0 14px; }
.sx-movers-h{ display:flex; align-items:baseline; gap:10px; margin:2px 2px 12px; }
.sx-movers-t{ font-weight:900; font-size:14px; letter-spacing:.02em; color:var(--ink-hi); }
.sx-movers-sub{ font-size:12px; color:var(--ink-lo); }
.sx-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(232px,1fr)); gap:12px; }

.sx-card{ position:relative; overflow:hidden; text-align:left; cursor:pointer; padding:14px; border-radius:16px;
  background:var(--panel); border:1px solid var(--hairline-2, rgba(128,128,128,.18)); box-shadow:0 4px 14px rgba(0,0,0,.07);
  color:inherit; font:inherit; display:flex; flex-direction:column; gap:10px;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease;
  animation:sxCardIn .5s cubic-bezier(.2,.7,.3,1) both; animation-delay:calc(var(--i,0) * 55ms + 60ms); }
.sx-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.16); border-color:color-mix(in srgb, var(--p400) 40%, transparent); }
.sx-card:focus-visible{ outline:3px solid var(--p400); outline-offset:2px; }
.sx-card::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--p400), var(--acc, #4da9ee)); transition:transform .3s ease; }
.sx-card:hover::after{ transform:scaleX(1); }

.sx-c-top{ display:flex; align-items:center; gap:10px; }
.sx-c-img{ width:38px; height:38px; border-radius:10px; object-fit:cover; flex:none; }
.sx-c-name{ font-weight:800; font-size:14px; color:var(--ink-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sx-c-rank{ margin-left:auto; font-size:11px; font-weight:900; color:var(--ink-faint); font-family:var(--font-num); }

.sx-c-figs{ display:flex; gap:14px; }
.sx-fig{ min-width:0; }
.sx-fig-n{ font-family:var(--font-num); font-weight:800; font-size:16px; color:var(--ink-hi); font-variant-numeric:tabular-nums; }
.sx-fig-n .sx-unit{ font-size:.62em; color:var(--ink-lo); margin-left:2px; }
.sx-fig-k{ font-size:10.5px; font-weight:700; color:var(--ink-lo); letter-spacing:.02em; margin-top:1px; }
.sx-mo{ display:inline-flex; align-items:center; gap:3px; padding:2px 7px; border-radius:999px; font-size:11px; font-weight:900;
  background:color-mix(in srgb, var(--gain, #22c55e) 16%, transparent); color:var(--gain, #16a34a); }
.sx-mo.cool{ background:color-mix(in srgb, var(--ink-lo) 12%, transparent); color:var(--ink-lo); }

/* the CONCENTRATION gauge — the getgems-can't signal, made obvious. */
.sx-conc{ margin-top:2px; }
.sx-conc-lab{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:5px; }
.sx-conc-verdict{ font-size:12px; font-weight:900; }
.sx-conc-verdict.tight{ color:#e0392b; }
.sx-conc-verdict.mid{ color:#e8912a; }
.sx-conc-verdict.wide{ color:#22a06b; }
.sx-conc-sub{ font-size:10.5px; color:var(--ink-faint); font-weight:600; }
.sx-conc-bar{ height:8px; border-radius:999px; background:color-mix(in srgb, var(--ink-faint) 18%, transparent); overflow:hidden; position:relative; }
.sx-conc-fill{ height:100%; border-radius:inherit; width:0;
  background:linear-gradient(90deg, #22a06b, #e8912a 55%, #e0392b);
  transition:width 1s cubic-bezier(.2,.8,.2,1); }
.sx-conc-none{ font-size:11px; color:var(--ink-faint); font-weight:600; }

.sx-c-cta{ margin-top:auto; display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--p600, #e0392b); }
.sx-c-cta .sx-kol{ margin-left:auto; font-size:10.5px; font-weight:900; letter-spacing:.02em; padding:2px 7px; border-radius:999px;
  background:color-mix(in srgb, var(--acc, #4da9ee) 16%, transparent); color:var(--acc, #2f7fbf); }

/* ---- ANALYST DEEP-DIVE toggle + collapse ---------------------------------- */
.sx-deep-toggle{ display:inline-flex; align-items:center; gap:8px; margin:2px 0 14px; padding:9px 15px; border-radius:999px;
  font-weight:800; font-size:12.5px; cursor:pointer; color:var(--ink-mid);
  background:var(--well, rgba(128,128,128,.06)); border:1px solid var(--hairline-2, rgba(128,128,128,.18));
  transition:transform .14s ease, border-color .14s ease, color .14s ease; }
.sx-deep-toggle:hover{ transform:translateY(-1px); color:var(--ink-hi); border-color:var(--p400); }
.sx-deep-caret{ transition:transform .25s ease; }
.sx-deep-toggle.is-open .sx-deep-caret{ transform:rotate(180deg); }
.sx-deep{ display:block; }
.sx-deep.is-collapsed{ display:none; }

/* ---- MOTION ---------------------------------------------------------------- */
@keyframes sxIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes sxCardIn{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes sxLive{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--gain,#22c55e) 60%, transparent); } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } }
@keyframes sxWiggle{ 0%,100%{ transform:rotate(-8deg) scale(1); } 50%{ transform:rotate(8deg) scale(1.12); } }
@media (prefers-reduced-motion:reduce){
  .sx-pulse, .sx-card{ animation:none !important; }
  .sx-pulse-dot, .sx-hot-fire{ animation:none !important; }
  .sx-conc-fill{ transition:none !important; }
}
@media (max-width:640px){
  .sx-grid{ grid-template-columns:1fr 1fr; gap:10px; }
  .sx-card{ padding:12px; border-radius:14px; }
  .sx-pulse{ padding:15px 14px; }
  .sx-c-name{ font-size:13px; }
  .sx-fig-n{ font-size:15px; }
}
@media (max-width:380px){ .sx-grid{ grid-template-columns:1fr; } }

/* ---- item-view CURRENT HOLDER block (market.js renderHolder) — the offer-to-
   holder payoff on the gift detail modal: who holds it + Intel Maps link + offer. */
.iv-holder{ margin:14px 0 4px; padding:13px 14px; border-radius:14px;
  background:color-mix(in srgb, var(--acc, #4da9ee) 8%, var(--well, rgba(128,128,128,.06)));
  border:1px solid color-mix(in srgb, var(--acc, #4da9ee) 26%, transparent); }
.iv-holder-head{ display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.iv-holder-mark{ width:8px; height:8px; border-radius:50%; background:var(--acc, #4da9ee); box-shadow:0 0 8px var(--acc, #4da9ee); }
.iv-holder-t{ font-weight:900; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-hi); }
.iv-holder-via{ margin-left:auto; font-size:10.5px; font-weight:700; color:var(--ink-faint); }
.iv-holder-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.iv-holder-addr{ font-weight:800; font-size:14px; color:var(--ink-hi); }
.iv-holder-map{ margin-left:auto; font-size:12px; font-weight:800; color:var(--acc, #2f7fbf); text-decoration:none; white-space:nowrap; }
.iv-holder-map:hover{ text-decoration:underline; }
.iv-holder-offer{ display:block; width:100%; padding:11px; border-radius:11px; border:none; cursor:pointer;
  font-weight:900; font-size:13.5px; color:#fff; background:linear-gradient(180deg,#4da9ee,#2f7fbf);
  box-shadow:0 6px 16px rgba(77,169,238,.32); transition:transform .15s ease; }
.iv-holder-offer:hover{ transform:translateY(-2px); }
.iv-holder-note{ margin-top:8px; font-size:11px; color:var(--ink-faint); text-align:center; }
/* Resolved Telegram handle for the holder (async, cache-first) — a direct reach path */
.iv-holder-handle{ display:flex; align-items:center; gap:8px; margin:0 0 10px; padding:9px 11px;
  border-radius:11px; background:color-mix(in srgb, #229ed9 13%, transparent);
  border:1px solid color-mix(in srgb, #229ed9 36%, transparent);
  animation:ivHandleIn .34s cubic-bezier(.2,.7,.2,1) both; }
.iv-holder-hlead{ font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); }
.iv-holder-uname{ margin-left:auto; font-weight:900; font-size:14.5px; color:#229ed9; text-decoration:none; white-space:nowrap; }
.iv-holder-uname:hover{ text-decoration:underline; }
.iv-holder-addr.iv-holder-addr-sm{ font-size:12.5px; font-weight:700; color:var(--ink-faint); }
@keyframes ivHandleIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }