/* Platform statistics (stats.js): smoked glass like app.css, $BPL gold = the money locked (TVL), numbers in Unbounded, labels in
   Manrope sentence case. Transform / opacity motion only; the live halo stops with prefers-reduced-motion. */
.st-ic { width: 16px; height: 16px; flex: none; }
.st-lab { color: var(--mute); font-size: 13px; font-weight: 700; }
.st-sub { color: var(--dim); font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.st-live { display: inline-flex; align-items: center; gap: 6px; color: var(--mute); font-size: 12px; font-weight: 700; }
.st-live i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--up); }
/* the ping ring is its own layer animated with transform/opacity (an animated box-shadow restyled and repainted every frame) */
.st-live i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(47, 216, 154, .5); animation: st-ping 2.4s ease-out infinite; }
@keyframes st-ping { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(3); opacity: 0; } }
.st-coin { width: 18px; height: 18px; } .st-coin.big { width: 26px; height: 26px; }

/* delta chip: arrow + value (+ small label); never colour alone */
.st-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 800; white-space: nowrap; }
.st-delta .st-ic { width: 13px; height: 13px; }
.st-delta small { color: var(--dim); font-weight: 600; margin-inline-start: 4px; }
.st-delta.up { color: var(--up); } .st-delta.dn { color: var(--dn); } .st-delta.flat { color: var(--dim); }
.st-delta[hidden] { display: none; }

/* sparkline */
.st-spark { position: relative; display: block; height: 32px; color: var(--gold); }
.st-spark svg { display: block; width: 100%; height: 100%; overflow: visible; }
.st-spark.mint { color: var(--up); } .st-spark.ice { color: #8fc7ff; }
.st-dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 2px #0d0b11; }

/* ---------- Markets home card ---------- */
.st-home { display: block; width: 100%; margin-top: 18px; padding: 14px 14px 12px; text-align: start; border-radius: var(--r2); position: relative; overflow: hidden; isolation: isolate;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--hi), 0 14px 30px -18px rgba(0, 0, 0, .8); transition: transform .15s; }
.st-home::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(90% 120% at 100% 0%, rgba(255, 216, 74, .09), transparent 60%); pointer-events: none; }
.st-home:active { transform: scale(.985); }
.st-home[hidden] { display: none; }
.st-hh { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.st-hh h2 { font: 600 15px/1.2 var(--disp); letter-spacing: -.01em; flex: 1; min-width: 0; }
.st-chev { color: var(--dim); }
[dir=rtl] .st-chev { transform: scaleX(-1); }
.st-hmain { display: grid; grid-template-columns: minmax(0, 1fr) 42%; align-items: end; gap: 12px; }
.st-hl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.st-hvrow { display: flex; align-items: center; gap: 7px; }
.st-hv { font: 600 25px/1.1 var(--disp); letter-spacing: -.02em; }
.st-home .st-spark { height: 46px; margin-bottom: 4px; }
.st-hrow { display: grid; grid-template-columns: 1fr 1fr 1.25fr; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.st-hc { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-inline-end: 8px; }
.st-hc + .st-hc { padding-inline-start: 10px; border-inline-start: 1px solid var(--line); }
.st-hc .st-lab { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-hn b { font: 600 15.5px/1.2 var(--disp); }
.st-top { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 800; font-size: 14px; }
.st-topart { width: 22px; height: 22px; flex: none; border-radius: 7px; overflow: hidden; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--g) 45%, transparent), transparent 70%); }
.st-topart .art, .st-topart .art-thumb { width: 100%; height: 100%; }
.st-topart img { width: 100%; height: 100%; object-fit: cover; }
.st-topn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .st-topn.dim { color: var(--dim); font-weight: 600; font-size: 12.5px; }

/* ---------- stats screen ---------- */
.st-page { display: flex; flex-direction: column; gap: 12px; }
.st-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; }
.st-head h1 { font: 600 19px/1.2 var(--disp); letter-spacing: -.015em; }
.st-demo { margin: -4px 0 0; padding: 9px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; color: #cfc6ff; background: rgba(143, 124, 255, .1); border: 1px solid rgba(143, 124, 255, .28); }
.st-err { padding: 10px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--warn); background: rgba(255, 181, 71, .08); border: 1px solid rgba(255, 181, 71, .25); }
.st-card { position: relative; padding: 16px 14px 12px; border-radius: var(--r2); background: var(--card); border: 1px solid var(--line); box-shadow: var(--hi), 0 18px 36px -22px rgba(0, 0, 0, .85); }
.st-tvlcard { padding-top: 18px; overflow: hidden; isolation: isolate; }
.st-tvlcard::before { content: ''; position: absolute; z-index: -1; left: -20%; right: -20%; top: -40%; height: 90%; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 50%, rgba(249, 178, 26, .13), transparent 70%); }
.st-tvlhead { display: flex; flex-direction: column; gap: 2px; }
.st-hint { color: var(--dim); font-size: 12px; font-weight: 600; }
.st-tvlrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.st-tvl-n { font: 600 34px/1.05 var(--disp); letter-spacing: -.03em; color: var(--txt); text-shadow: 0 2px 18px rgba(249, 178, 26, .18); }
.st-deltas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 12px; min-height: 18px; }
.st-seg { margin-bottom: 4px; }
.st-chartwrap { position: relative; direction: ltr; }   /* time runs left to right in every language (as in lightweight-charts) */
.st-chart { position: relative; height: 196px; margin: 0 -6px 0 -4px; transition: opacity .25s; }
.st-chart.busy, .st-chart.dim { opacity: .45; }
.st-empty { position: absolute; inset: 40% 16px auto; text-align: center; color: var(--mute); font-size: 13px; font-weight: 600; }
.st-now { position: absolute; left: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2.5px #0d0b11; pointer-events: none; z-index: 3; }
.st-now::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid rgba(255, 216, 74, .65); animation: st-halo 2.6s ease-out infinite; }
@keyframes st-halo { 0% { transform: scale(.4); opacity: 1; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
.st-hilo { position: absolute; left: 0; top: 0; z-index: 2; padding: 1px 6px; border-radius: 6px; font: 600 10.5px/1.4 var(--ui); color: var(--mute); background: rgba(10, 9, 13, .7); pointer-events: none; white-space: nowrap; }
.st-hilo[hidden] { display: none; }
.st-tip { position: absolute; z-index: 4; left: 0; top: -6px; display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 11px; pointer-events: none; white-space: nowrap;
  background: rgba(10, 9, 13, .94); border: 1px solid var(--line2); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .9); font-size: 12px; color: var(--mute); font-weight: 600; }
.st-tip b { font: 600 14px/1.25 var(--disp); color: var(--txt); }
.st-tip small { color: var(--dim); font-size: 11px; }
.st-tip em { font-style: normal; color: var(--gold); }

.st-vhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.st-vrow { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.st-vrow small { color: var(--dim); font-size: 12px; font-weight: 700; }
.st-vt { font: 600 22px/1.1 var(--disp); letter-spacing: -.02em; }
.st-vhead .st-delta { margin-top: 2px; flex-wrap: wrap; justify-content: flex-end; max-width: 48%; row-gap: 0; }
.st-vhead .st-delta small { flex-basis: 100%; margin: 0; text-align: end; white-space: normal; line-height: 1.3; }
.st-bars { min-height: 120px; touch-action: pan-y; }
.st-bars svg { display: block; }
.st-bar { fill: rgba(249, 178, 26, .7); transition: fill .15s; }
.st-bar.hot { fill: #ffd84a; }
.st-bar.open { stroke: rgba(255, 216, 74, .55); stroke-width: 1; }
.st-axis { fill: var(--dim); font: 600 10.5px var(--ui); }

.st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.st-tile { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 13px 12px 10px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--hi); overflow: hidden; }
.st-tnrow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; }
.st-tn { font: 600 20px/1.2 var(--disp); letter-spacing: -.02em; }
.st-tile .st-sub { min-height: 2.6em; }
.st-tile .st-spark { height: 30px; margin-top: 4px; }
.st-toptile { isolation: isolate; }
.st-toptile::before { content: ''; position: absolute; z-index: -1; right: -30%; bottom: -40%; width: 110%; height: 110%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g) 30%, transparent), transparent); }
.st-topbody { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.st-topart.big { width: 52px; height: 52px; border-radius: 14px; margin-bottom: 4px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--g) 50%, transparent), transparent 72%); }
.st-topname { font: 600 15px/1.2 var(--disp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "≈ $" under BPL figures (app.js .usd: shared formatter and base look) */
.st-tvlcard .st-usd { font-size: 13.5px; color: var(--mute); margin-top: 4px; }
.st-vhead .st-usd { margin-top: 3px; } .st-tile .st-usd { margin-top: -2px; } .st-hl .st-usd { margin-top: 1px; }
.st-defs { margin: 2px 4px 0; color: var(--dim); font-size: 12px; line-height: 1.5; font-weight: 600; }

@media (max-width: 360px) { .st-tvl-n { font-size: 28px; } .st-hv { font-size: 21px; } .st-tn { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .st-live i::after, .st-now::after { animation: none; } .st-home, .st-bar, .st-chart { transition: none; } }
html.shot .st-live i::after, html.shot .st-now::after { animation: none; }