/* TRUE Design System — full HTML kit · v2026.8.11-2 */

:root {
  --bg:#0e0d16; --s2:#14121d; --s3:#191725; --s4:#201d2e;
  --border:#262336; --border-strong:#37334c;
  --t1:#f7f8f8; --t2:#d0d6e0; --t3:#8a8f98; --t4:#767b86;
  --v:#6e56cf; --vl:#7e68da; --v-subtle:#191331; --v-text:#9b87ff;
  --green:#22c97d; --green-subtle:#0c1c14; --mint:#4ade87;
  --red:#ef4e58; --red-subtle:#1f1012;
  --warning:#f2c94c; --warning-subtle:#1f1c11; --orange:#f08c3a;
  --blue:#4ea7fc; --blue-subtle:#0f1922; --cyan:#39d0d8; --pink:#e46bb7;
  --gold:#e8b860; --gold-subtle:#201a0f;
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:24px; --r-btn:10px;
  --shadow-card: inset 0 1px 0 0 rgb(255 255 255/.045), 0 1px 2px rgb(0 0 0/.3), 0 4px 16px rgb(0 0 0/.2);
  --shadow-card-hover: inset 0 1px 0 0 rgb(255 255 255/.07), 0 2px 4px rgb(0 0 0/.3), 0 8px 28px rgb(0 0 0/.28);
  --gradient-card: linear-gradient(180deg, rgb(255 255 255/.025), rgb(255 255 255/0) 45%);
  --gradient-glow: radial-gradient(120% 90% at 50% -10%, rgb(110 86 207/.2), rgb(110 86 207/.07) 40%, transparent 70%);
  --gradient-accent: linear-gradient(135deg, #8b5cf6 0%, #7048e8 100%);
  --gradient-tile: linear-gradient(180deg, #262234 0%, #171522 100%);
  --gradient-gold: linear-gradient(135deg, #f6d78d 0%, #e8b860 45%, #c98d36 100%);
  --gradient-gold-soft: linear-gradient(180deg, rgb(232 184 96/.1), rgb(232 184 96/.02));
  --shadow-gold-glow: inset 0 1px 0 rgb(255 255 255/.15), 0 2px 8px rgb(232 184 96/.25), 0 0 20px rgb(232 184 96/.14);
  --shadow-accent-glow: inset 0 1px 0 rgb(255 255 255/.15), 0 2px 10px -2px rgb(124 92 252/.4);
  --shadow-track: inset 0 1.5px 4px rgb(0 0 0/.55), inset 0 0 1px rgb(0 0 0/.4);
  --shadow-raised: inset 0 1px 0 rgb(255 255 255/.1), 0 1px 3px rgb(0 0 0/.35);
  --shadow-tile: inset 0 1px 0 rgb(255 255 255/.1), inset 0 -2px 4px rgb(0 0 0/.3), 0 4px 10px rgb(0 0 0/.4);
  --shadow-menu: 0 2px 4px rgb(0 0 0/.2), 0 12px 32px rgb(0 0 0/.45);
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",Menlo,Consolas,monospace;
  /* legacy names — deprecated, kept so pages generated before the rename keep working */
  --background:var(--bg); --surface:var(--s2); --surface-raised:var(--s3); --surface-overlay:var(--s4); --surface-hover:var(--s2-hover); --accent:var(--v); --accent-hover:var(--vl); --accent-soft:var(--v-soft); --accent-subtle:var(--v-subtle); --accent-text:var(--v-text); --success:var(--green); --success-subtle:var(--green-subtle); --destructive:var(--red); --destructive-subtle:var(--red-subtle); --info:var(--blue); --info-subtle:var(--blue-subtle); --foreground:var(--t1); --text-secondary:var(--t2); --text-muted:var(--t3); --text-faint:var(--t4);

  /* structural surfaces that used to be hardcoded — needed for theming */
  --track-bg:#0b0a12; --s2-hover:#252336;
  --pill-bg:#16151f; --pill-bg-hover:#1d1c28;
  --composer-bg:linear-gradient(180deg, rgb(18 20 32/.98), rgb(7 8 14/.98));
  --composer-border:#9a4dff;
  --v-soft:#c9bdf5; --apy-a:#c9bdf5; --apy-b:#8b6cf0;
  --on-mint:#08130c; --on-gold:#231a09; --silver:#c8cdd7;
  --btn-light-bg:linear-gradient(180deg,#fff,#e9e9f0); --btn-light-fg:#0e0d16;
  --tint-accent:linear-gradient(180deg,#2b2344,#1a1530);
  --tint-gold:linear-gradient(180deg,#2e2718,#1d1810);
  --tint-success:linear-gradient(180deg,#16281e,#101c15);
  --tint-info:linear-gradient(180deg,#152234,#101a26);
  --tint-pink:linear-gradient(180deg,#2b1a26,#1c1119);
  --tint-cyan:linear-gradient(180deg,#132a2c,#0e1c1e);
  --texture-dot:rgb(255 255 255/.05); --texture-ray:rgb(255 255 255/.035);
}
* { box-sizing:border-box; border-color:var(--border); }
html { height:100%; }
html,body { margin:0; }
body { min-height:100%; background:var(--bg); color:var(--t1); font-family:var(--font); font-size:15px; line-height:1.6; letter-spacing:-.011em; -webkit-font-smoothing:antialiased; }
button { font:inherit; cursor:pointer; transition:all .15s var(--ease); background:transparent; color:inherit; }
button:active { transform:translateY(1px) scale(.99); }
svg { flex-shrink:0; display:block; }
span:has(> svg:only-child), .type-overline:has(> svg) { display:inline-flex; align-items:center; }
.type-overline:has(> svg) { gap:7px; }
.wrap { max-width:1120px; margin:0 auto; padding:clamp(20px,4vw,40px) clamp(16px,4vw,24px) clamp(28px,4vw,48px); display:flex; flex-direction:column; gap:28px; }
.type-h1 { font-size:clamp(28px,5vw,36px); font-weight:510; line-height:1.15; letter-spacing:-.022em; }
.type-h4 { font-size:16px; font-weight:590; }
.type-body-s { font-size:14px; line-height:1.5; letter-spacing:-.01em; }
.type-label { font-size:13px; font-weight:510; letter-spacing:-.01em; }
.type-caption { font-size:12px; line-height:1.35; }
.type-data { font-variant-numeric:tabular-nums; }
.type-overline { font-size:11px; font-weight:590; letter-spacing:.14em; text-transform:uppercase; }
.type-mono { font-family:var(--mono); font-size:12px; }
.muted{color:var(--t3);} .faint{color:var(--t4);} .secondary{color:var(--t2);}
.gold{color:var(--gold);} .green{color:var(--mint);} .red{color:var(--red);} .violet{color:var(--v-text);}
.blue{color:var(--blue);} .orange{color:var(--orange);}
.gold-grad { background-image:var(--gradient-gold); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rays { background-image:repeating-conic-gradient(from 0deg at 50% 50%, var(--texture-ray) 0deg 5deg, transparent 5deg 12deg); }
.row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.grid { display:grid; gap:16px; }
.auto-2 { grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); }
.auto-3 { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); }
.auto-m { grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); }
.block { display:flex; flex-direction:column; gap:14px; }
.block > h3 { margin:0; font-size:13px; font-weight:590; letter-spacing:.1em; text-transform:uppercase; color:var(--t4); }

/* ============ top nav — CSS-only tabs (works without JS) ============ */
.tabswitch { position:absolute; opacity:0; pointer-events:none; }
.topnav { position:sticky; top:0; z-index:40; display:flex; gap:4px; padding:10px 0 0; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); overflow-x:auto; }
.topnav label { position:relative; display:inline-flex; align-items:center; height:40px; padding:0 14px; font-size:14px; font-weight:510; color:var(--t3); white-space:nowrap; cursor:pointer; transition:color .15s var(--ease); }
.topnav label:hover { color:var(--t2); }
.tabpanel { display:none; }
#tb-foundation:checked ~ .topnav label[for="tb-foundation"],
#tb-controls:checked ~ .topnav label[for="tb-controls"],
#tb-components:checked ~ .topnav label[for="tb-components"],
#tb-widgets:checked ~ .topnav label[for="tb-widgets"],
#tb-markets:checked ~ .topnav label[for="tb-markets"],
#tb-charts:checked ~ .topnav label[for="tb-charts"],
#tb-swap:checked ~ .topnav label[for="tb-swap"],
#tb-genesis:checked ~ .topnav label[for="tb-genesis"],
#tb-partner:checked ~ .topnav label[for="tb-partner"],
#tb-staking:checked ~ .topnav label[for="tb-staking"] { color:var(--t1); }
#tb-foundation:checked ~ .topnav label[for="tb-foundation"]::after,
#tb-controls:checked ~ .topnav label[for="tb-controls"]::after,
#tb-components:checked ~ .topnav label[for="tb-components"]::after,
#tb-widgets:checked ~ .topnav label[for="tb-widgets"]::after,
#tb-markets:checked ~ .topnav label[for="tb-markets"]::after,
#tb-charts:checked ~ .topnav label[for="tb-charts"]::after,
#tb-swap:checked ~ .topnav label[for="tb-swap"]::after,
#tb-genesis:checked ~ .topnav label[for="tb-genesis"]::after,
#tb-partner:checked ~ .topnav label[for="tb-partner"]::after,
#tb-staking:checked ~ .topnav label[for="tb-staking"]::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px; height:2px; border-radius:2px; background-image:var(--gradient-accent); }
#tb-foundation:checked ~ #tab-foundation,
#tb-controls:checked ~ #tab-controls,
#tb-components:checked ~ #tab-components,
#tb-widgets:checked ~ #tab-widgets,
#tb-markets:checked ~ #tab-markets,
#tb-charts:checked ~ #tab-charts,
#tb-swap:checked ~ #tab-swap,
#tb-genesis:checked ~ #tab-genesis,
#tb-partner:checked ~ #tab-partner,
#tb-staking:checked ~ #tab-staking { display:flex; flex-direction:column; gap:36px; animation:fadeup .25s var(--ease); }

/* ============ widgets ============ */
.wslot { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.wslot b { font-size:17px; font-weight:590; }
.pinbtn { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-radius:9999px; border:1px solid var(--border-strong); background:var(--s3); font-size:13px; font-weight:510; color:var(--t2); box-shadow:var(--shadow-raised); }
.pinbtn:hover { color:var(--t1); background:var(--s4); }
.pinbtn--on { border:0; background-image:var(--gradient-accent); color:#fff; box-shadow:var(--shadow-accent-glow); }
.pinbtn--on .pn { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:rgb(255 255 255/.2); font-size:11px; font-weight:640; }
.widget { background:var(--s2); border:1px solid color-mix(in srgb, var(--border) 55%, transparent); border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:14px; color:var(--t2); background-image:var(--gradient-card); box-shadow:var(--shadow-card); }
.whead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; row-gap:10px; }
.whead b { font-size:16.5px; font-weight:590; color:var(--t1); white-space:nowrap; }
.wlink { margin-left:auto; font-size:13px; font-weight:510; color:var(--v-text); display:inline-flex; align-items:center; gap:3px; cursor:pointer; }
.wcd { display:flex; align-items:baseline; gap:6px; }
.wcd .u { display:flex; flex-direction:column; align-items:center; }
.wcd .u b { font-size:19px; font-weight:640; color:var(--t1); font-variant-numeric:tabular-nums; }
.wcd .u small { font-size:9px; letter-spacing:.1em; color:var(--t4); text-transform:uppercase; }
.wcd .c { color:var(--t4); font-weight:590; }
.wstats { display:grid; grid-template-columns:1fr 1fr 1fr; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.wstats > div { display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 8px; border-right:1px solid var(--border); }
.wstats > div:last-child { border-right:0; }
.wstats .v { font-size:16px; font-weight:590; color:var(--t1); font-variant-numeric:tabular-nums; }
.wstats .v.green { color:var(--mint); }
.wstats .l { font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--t4); }
.lbm { display:flex; align-items:center; gap:10px; padding:7px 0; min-width:0; }
.lbm .medal { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; flex-shrink:0; }
.medal--1 { background:var(--gold-subtle); color:var(--gold); border:1px solid rgb(232 184 96/.4); }
.medal--2 { background:var(--s4); color:var(--silver); border:1px solid var(--border-strong); }
.lbm .ava { width:24px; height:24px; border-radius:50%; background-image:var(--gradient-accent); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:590; color:#fff; }
.lbm .n { font-size:13.5px; font-weight:510; color:var(--t1); flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lbm .pts { font-size:13px; color:var(--t3); font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; }
.lbm .usd { font-size:13px; font-weight:510; color:var(--mint); font-variant-numeric:tabular-nums; white-space:nowrap; flex-shrink:0; }
/* quick swap */
.swapbox { position:relative; display:flex; flex-direction:column; gap:5px; }
.sfield { background:var(--s3); border:1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius:14px; padding:12px 16px 14px; display:flex; flex-direction:column; gap:8px; min-width:0; transition:border-color .15s var(--ease); }
.sfield:focus-within { border-color:var(--border-strong); }
.sfield .srow1 { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--t4); }
.sfield .srow1 .bal { font-variant-numeric:tabular-nums; }
.sfield .srow2 { display:flex; align-items:center; gap:12px; }
.sfield input { flex:1; width:100%; min-width:0; background:transparent; border:0; outline:none; color:var(--t1); font:inherit; font-size:clamp(20px,4.5vw,26px); font-weight:590; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.sfield input::placeholder { color:var(--t4); }
.sfield .usd { font-size:12px; color:var(--t4); font-variant-numeric:tabular-nums; }
.tokbtn { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 10px 0 6px; border-radius:9999px; border:1px solid var(--border-strong); background:var(--s4); font-size:14px; font-weight:590; color:var(--t1); box-shadow:var(--shadow-raised); flex-shrink:0; }
.tokbtn:hover { background:var(--s2-hover); }
.tokbtn .tdot { width:22px; height:22px; border-radius:50%; flex-shrink:0; box-shadow:inset 0 1px 1px rgb(255 255 255/.3); }
.tokbtn svg { color:var(--t3); }
.swapfab { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; width:38px; height:38px; border-radius:12px; border:1px solid var(--border-strong); outline:4px solid var(--s2); background:var(--s4); display:flex; align-items:center; justify-content:center; color:var(--t2); box-shadow:var(--shadow-raised); }
.swapfab:hover { color:var(--t1); background:var(--s2-hover); }
.bigcta { height:52px; border-radius:14px; border:0; background:var(--s3); color:var(--t4); font-size:15px; font-weight:510; width:100%; }
.bigcta.on { background-image:var(--gradient-accent); color:#fff; box-shadow:var(--shadow-accent-glow); }
/* signal stepper */
.sstep { display:flex; align-items:center; margin:6px 0 2px; }
.sstep .node { position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; }
.sstep .pt { width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--s4); border:1.5px solid var(--border-strong); color:transparent; }
.sstep .node.done .pt { background:var(--green); border-color:var(--green); color:var(--on-mint); }
.sstep .node small { position:absolute; top:24px; font-size:9px; letter-spacing:.12em; color:var(--t4); text-transform:uppercase; white-space:nowrap; }
.sstep .ln { flex:1; height:2px; background:var(--border-strong); margin:0 2px 0; }
.sstep .ln.done { background:var(--green); }
.sstep .ln.dash { background:repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px); height:1.5px; }
/* token row */
.tokrow { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.tokrow:last-child { border-bottom:0; }
.tokrow .coin { width:36px; height:36px; border-radius:50%; background:var(--s4); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:640; color:var(--t2); flex-shrink:0; }
.tokrow .nm { display:flex; flex-direction:column; line-height:1.25; min-width:0; flex:1; }
.tokrow .nm .t { display:flex; align-items:center; gap:6px; font-size:14px; font-weight:590; color:var(--t1); white-space:nowrap; overflow:hidden; }
.tokrow .pr { flex-shrink:0; }
.tokrow > .btn { flex-shrink:0; }
.tokrow .nm small { font-size:12px; color:var(--t4); }
.rankchip { font-size:10px; font-weight:590; color:var(--t4); border:1px solid var(--border); border-radius:5px; padding:0 4px; }
.tokrow .pr { margin-left:auto; text-align:right; display:flex; flex-direction:column; line-height:1.3; }
.tokrow .pr b { font-size:14px; font-weight:590; color:var(--t1); font-variant-numeric:tabular-nums; }
.tokrow .pr span { font-size:12px; font-weight:510; color:var(--mint); font-variant-numeric:tabular-nums; }
/* table scroll wrapper */
.tbl-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-scroll .mtable { min-width:780px; }
/* signal card */
.sig { position:relative; overflow:hidden; background-color:var(--s2); border:1px solid color-mix(in srgb, var(--border) 55%, transparent); border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:18px; box-shadow:var(--shadow-card);
  /* direction tint: soft green ambience from the top-left instead of a hard stripe */
  background-image:radial-gradient(55% 70% at 0% 0%, rgb(34 201 125/.07), transparent 65%), var(--gradient-card); }
.sig--short { background-image:radial-gradient(55% 70% at 0% 0%, rgb(239 78 88/.07), transparent 65%), var(--gradient-card); }

/* Bullish/Bearish switcher */
.sigswitch { display:inline-flex; align-self:flex-start; max-width:100%; overflow-x:auto; gap:4px; padding:4px; border-radius:14px; border:1px solid color-mix(in srgb, var(--border) 60%, transparent); background:var(--track-bg); box-shadow:var(--shadow-track); }
.sigswitch button { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border-radius:10px; border:0; background:transparent; font-size:14px; font-weight:510; color:var(--t3); white-space:nowrap; }
.sigswitch button:hover { color:var(--t2); }
.sigswitch .cnt { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:20px; padding:0 6px; border-radius:9999px; background:var(--s4); font-size:11.5px; font-weight:590; color:var(--t3); font-variant-numeric:tabular-nums; }
.sigswitch button.bull.active { background:linear-gradient(180deg, rgb(255 255 255/.07), rgb(255 255 255/.02)), var(--s3); color:var(--mint); box-shadow:var(--shadow-raised); }
.sigswitch button.bull.active .cnt { background:var(--green-subtle); color:var(--mint); }
.sigswitch button.bear.active { background:linear-gradient(180deg, rgb(255 255 255/.07), rgb(255 255 255/.02)), var(--s3); color:var(--red); box-shadow:var(--shadow-raised); }
.sigswitch button.bear.active .cnt { background:var(--red-subtle); color:var(--red); }
.wl--bear { color:var(--red) !important; }
.tp--pending { opacity:.55; }

/* CSS-only tooltips: <button class="tip" data-tip="Swap ONDO"> */
.tip { position:relative; }
.tip::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(2px); z-index:60;
  padding:5px 10px; border-radius:8px; border:1px solid var(--border); background:color-mix(in srgb, var(--s4) 96%, transparent); backdrop-filter:blur(10px);
  font-size:12px; font-weight:510; letter-spacing:-.01em; color:var(--t2); white-space:nowrap;
  box-shadow:0 2px 4px rgb(0 0 0/.2), 0 8px 24px rgb(0 0 0/.35);
  opacity:0; pointer-events:none; transition:opacity .15s var(--ease) .25s, transform .15s var(--ease) .25s; }
.tip::before { content:""; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%) rotate(45deg); z-index:61;
  width:8px; height:8px; border-radius:2px; background:var(--s4); border-right:1px solid var(--border); border-bottom:1px solid var(--border);
  opacity:0; pointer-events:none; transition:opacity .15s var(--ease) .25s; }
.tip:hover::after, .tip:focus-visible::after { opacity:1; transform:translateX(-50%) translateY(0); }
.tip:hover::before, .tip:focus-visible::before { opacity:1; }
/* .tip sets position:relative — keep absolutely-positioned tip-carriers absolute */
.swapbox .swapfab { position:absolute; }
/* global button:active transform would wipe the centering translate — recompose it */
.swapbox .swapfab:active { transform:translate(-50%, calc(-50% + 1px)) scale(.97); }
.sig-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sig-head .coin { width:42px; height:42px; border-radius:50%; background:var(--s4); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:640; color:var(--t2); flex-shrink:0; box-shadow:inset 0 1px 0 rgb(255 255 255/.06); }
.sig-head .nm { display:flex; flex-direction:column; line-height:1.25; }
.sig-head .nm b { font-size:16.5px; font-weight:590; color:var(--t1); }
.sig-head .nm small { font-size:12px; color:var(--t4); }
.sig-act { display:flex; gap:8px; margin-left:auto; }
.sig-act button { width:36px; height:36px; padding:0; border-radius:50%; border:1px solid var(--border-strong); background:var(--s3); color:var(--t2); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-raised); }
.sig-act button:hover { color:var(--t1); background:var(--s4); }
.sig-grid { display:grid; grid-template-columns:1fr 250px; gap:24px; align-items:start; }
@media (max-width:680px){ .sig-grid { grid-template-columns:1fr; } }
.sig-cur { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.sig-cur b { font-size:30px; font-weight:640; letter-spacing:-.02em; color:var(--t1); font-variant-numeric:tabular-nums; }
.sig-meta { display:flex; gap:18px; flex-wrap:wrap; margin-top:6px; }
.sig-meta span { font-size:12.5px; color:var(--t4); }
.sig-meta b { font-size:12.5px; font-weight:510; color:var(--t2); font-variant-numeric:tabular-nums; }
.sig-why { border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent); padding-top:14px; margin:0; display:flex; flex-direction:column; gap:6px; }
.sig-why .wl { font-size:10.5px; font-weight:590; letter-spacing:.14em; text-transform:uppercase; color:var(--mint); }
.sig-why p { margin:0; font-size:13.5px; line-height:1.6; color:var(--t3); }
/* TP ladder */
.tpl { display:flex; flex-direction:column; gap:5px; max-width:230px; }
.tp { display:flex; align-items:center; gap:8px; height:28px; padding:0 10px; border-radius:8px; border:1px solid var(--border); background:var(--s3); font-size:12px; font-weight:510; color:var(--t4); font-variant-numeric:tabular-nums; }
.tp .val { margin-left:auto; }
.tp--hit { border-color:rgb(34 201 125/.45); background:var(--green-subtle); color:var(--mint); }
.tp--sl { color:var(--t3); border-color:var(--border-strong); }
.netchip { display:inline-flex; align-items:center; gap:6px; font-size:11px; letter-spacing:.1em; color:var(--t4); text-transform:uppercase; font-weight:590; }
/* connector & category cards */
.concard { display:flex; flex-direction:row; align-items:flex-start; gap:13px; padding:16px; border-radius:var(--r-xl); border:1px solid color-mix(in srgb, var(--border) 60%, transparent); background:var(--s2); background-image:var(--gradient-card); box-shadow:var(--shadow-card); transition:all .15s var(--ease); cursor:pointer; }
.concard:hover { border-color:var(--border-strong); transform:translateY(-1px); box-shadow:var(--shadow-card-hover); }
.concard .ci { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:640; flex-shrink:0; box-shadow:inset 0 1px 0 rgb(255 255 255/.08); }
.concard .ct { display:flex; flex-direction:column; gap:2px; min-width:0; }
.concard .cn { display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:590; color:var(--t1); flex-wrap:wrap; }
.reco { display:inline-flex; align-items:center; height:19px; padding:0 7px; border-radius:9999px; border:1px solid rgb(34 201 125/.35); color:var(--mint); font-size:9.5px; font-weight:590; letter-spacing:.07em; text-transform:uppercase; }
.concard .cs { font-size:12.5px; color:var(--t3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.concard .cl { font-size:12.5px; font-weight:510; color:var(--t2); cursor:pointer; display:inline-flex; align-items:center; gap:4px; margin-top:6px; transition:all .15s var(--ease); }
.concard:hover .cl { color:var(--t1); gap:7px; }
.catcard { display:flex; align-items:center; gap:9px; height:46px; padding:0 16px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--s3); font-size:13.5px; font-weight:510; color:var(--t2); cursor:pointer; }
.catcard:hover { border-color:var(--border-strong); color:var(--t1); }
.catcard.sel { border-color:var(--border-strong); background:var(--s4); color:var(--t1); box-shadow:var(--shadow-raised); }
/* mini calendar date tile */
.datecal { display:flex; flex-direction:column; align-items:center; width:42px; height:44px; border-radius:11px; overflow:hidden; border:1px solid color-mix(in srgb, var(--border-strong) 80%, transparent); background:var(--s3); flex-shrink:0; box-shadow:inset 0 1px 0 rgb(255 255 255/.05), 0 1px 3px rgb(0 0 0/.3); }
.datecal small { width:100%; text-align:center; font-size:8.5px; font-weight:590; letter-spacing:.16em; text-transform:uppercase; padding:3px 0 2px; background:var(--s4); color:var(--t3); border-bottom:1px solid var(--border); }
.datecal b { flex:1; display:flex; align-items:center; font-size:15px; font-weight:640; color:var(--t1); font-variant-numeric:tabular-nums; }
.evtxt { display:flex; flex-direction:column; line-height:1.35; min-width:0; }
.evtxt b { font-size:14px; font-weight:510; color:var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.evtxt small { font-size:11px; font-weight:590; letter-spacing:.08em; color:var(--t4); text-transform:uppercase; }
.tickchip { display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:6px; border:1px solid var(--border-strong); background:var(--s4); color:var(--t2); font-size:11px; font-weight:640; letter-spacing:.04em; }
@keyframes fadeup { from { opacity:0; transform:translateY(6px); } }

/* ============ buttons ============ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 16px; border-radius:var(--r-btn); border:0; background:transparent; font-size:13px; font-weight:510; letter-spacing:-.01em; white-space:nowrap; }
.btn--primary { background-image:var(--gradient-accent); color:#fff; box-shadow:var(--shadow-accent-glow); }
.btn--primary:hover { filter:brightness(1.1); }
.btn--light { background:var(--btn-light-bg); color:var(--btn-light-fg); box-shadow:inset 0 1px 0 rgb(255 255 255/.9), 0 1px 2px rgb(0 0 0/.25); }
.btn--secondary { background:var(--s3); color:var(--t2); border:1px solid var(--border-strong); box-shadow:inset 0 1px 0 rgb(255 255 255/.05); }
.btn--secondary:hover { background:var(--s4); color:var(--t1); }
.btn--soft { background:var(--v-subtle); color:var(--v-text); border:1px solid rgb(139 92 246/.3); }
.btn--soft:hover { background:rgb(139 92 246/.2); color:var(--v-soft); }
.btn--ghost { color:var(--t3); }
.btn--ghost:hover { background:var(--s3); color:var(--t1); }
.btn--gold { color:var(--gold); border:1px solid rgb(232 184 96/.45); background-image:var(--gradient-gold-soft); }
.btn--gold:hover { box-shadow:var(--shadow-gold-glow); border-color:rgb(232 184 96/.7); }
.btn--red { background:var(--red-subtle); color:var(--red); border:1px solid rgb(239 78 88/.25); }
.btn--red:hover { background:var(--red); color:#fff; }
.btn--sm { height:30px; padding:0 12px; font-size:12px; border-radius:8px; }
.btn--lg { height:44px; padding:0 22px; font-size:14px; border-radius:12px; }
.btn[disabled] { background:var(--s3); color:var(--t4); pointer-events:none; box-shadow:none; border:0; }

/* ============ chips ============ */
.chip { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:9999px; font-size:12px; font-weight:510; white-space:nowrap; }
.chip--gain { background:var(--green-subtle); color:var(--mint); }
.chip--loss { background:var(--red-subtle); color:var(--red); }
.chip--neutral { background:var(--s4); color:var(--t2); }
.chip--v { background:var(--v-subtle); color:var(--v-text); }
.chip--gold { color:var(--gold); background:rgb(232 184 96/.1); }
.chip--warning { background:var(--warning-subtle); color:var(--warning); }
.chip--blue { background:var(--blue-subtle); color:var(--blue); }
.chip--cyan { background:rgb(57 208 216/.1); color:var(--cyan); }
.chip--pink { background:rgb(228 107 183/.1); color:var(--pink); }
.chip--orange { background:rgb(240 140 58/.1); color:var(--orange); }
.chip--outline { border:1px solid var(--border-strong); color:var(--t3); }
.chip--live { background:var(--red-subtle); color:var(--red); }
.dot { position:relative; width:6px; height:6px; }
.dot::before { content:""; position:absolute; inset:0; border-radius:50%; background:var(--red); }
.dot::after { content:""; position:absolute; inset:0; border-radius:50%; background:var(--red); opacity:.6; animation:ping 1.2s cubic-bezier(0,0,.2,1) infinite; }
@keyframes ping { 75%,100% { transform:scale(2.4); opacity:0; } }

/* ============ cards ============ */
.card { background:var(--s2); border:1px solid color-mix(in srgb, var(--border) 60%, transparent); border-radius:var(--r-2xl); padding:clamp(16px,3vw,24px); display:flex; flex-direction:column; gap:14px; color:var(--t2); }
.card--elevated { background-image:var(--gradient-card); box-shadow:var(--shadow-card); transition:box-shadow .3s var(--ease); }
.card--elevated:hover { box-shadow:var(--shadow-card-hover); }
.card--glow { background-image:var(--gradient-glow), var(--gradient-card); box-shadow:var(--shadow-card); border-color:rgb(110 86 207/.25); }
.card--gold { border-color:rgb(232 184 96/.3); background-image:var(--gradient-gold-soft); }
.card-title { margin:0; color:var(--t1); }
.spacer { margin-left:auto; }

/* ============ forms ============ */
.field-wrap { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field-wrap label { font-size:13px; font-weight:510; color:var(--t2); }
input.field { height:36px; padding:0 12px; border-radius:var(--r-btn); border:1px solid var(--border); background:var(--s3); color:var(--t1); font:inherit; font-size:14px; outline:none; transition:all .15s var(--ease); width:100%; }
input.field::placeholder { color:var(--t4); }
input.field:hover { border-color:var(--border-strong); }
input.field:focus { border-color:var(--v); box-shadow:0 0 0 3px var(--v-subtle); }
input.field.error { border-color:var(--red); box-shadow:0 0 0 3px rgb(239 78 88/.12); }
input.field:disabled { opacity:.5; pointer-events:none; }
.hint { font-size:12px; color:var(--t4); }
.hint.err { color:var(--red); }
.radio { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:var(--t2); }
.radio input { appearance:none; margin:0; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--border-strong); background:var(--s3); transition:all .15s var(--ease); cursor:pointer; flex-shrink:0; }
.radio input:hover { border-color:var(--t4); }
.radio input:checked { border-color:var(--v); border-width:5.5px; background:#fff; }
.radio input:focus-visible { outline:none; box-shadow:0 0 0 3px var(--v-subtle); }
.check { display:flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:var(--t2); }
.check input { appearance:none; margin:0; width:18px; height:18px; border-radius:5px; border:1.5px solid var(--border-strong); background:var(--s3); transition:all .15s var(--ease); cursor:pointer; flex-shrink:0; position:relative; }
.check input:hover { border-color:var(--t4); }
.check input:checked { border-color:transparent; background-image:var(--gradient-accent); }
.check input:checked::after { content:""; position:absolute; inset:0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.2'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.check input:focus-visible { outline:none; box-shadow:0 0 0 3px var(--v-subtle); }
.switch { position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:14px; color:var(--t2); }
.switch input { appearance:none; margin:0; width:38px; height:22px; border-radius:9999px; background:var(--s4); border:1px solid var(--border-strong); transition:all .2s var(--ease); cursor:pointer; flex-shrink:0; position:relative; }
.switch input::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--t2); transition:all .2s var(--ease); box-shadow:0 1px 3px rgb(0 0 0/.4); }
.switch input:checked { background-image:var(--gradient-accent); border-color:transparent; }
.switch input:checked::after { left:18px; background:#fff; }
.switch input:focus-visible { outline:none; box-shadow:0 0 0 3px var(--v-subtle); }

/* ============ custom select & menus ============ */
.menu { position:absolute; top:calc(100% + 6px); left:0; z-index:30; min-width:100%; padding:6px; border-radius:14px; border:1px solid var(--border); background:color-mix(in srgb, var(--s4) 94%, transparent); backdrop-filter:blur(14px); box-shadow:var(--shadow-menu); display:none; animation:pop .16s var(--ease); }
@keyframes pop { from { opacity:0; transform:translateY(-4px) scale(.98); } }
.open > .menu { display:block; }
.menu-item { display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:0; border-radius:var(--r-md); font-size:14px; color:var(--t2); text-align:left; }
.menu-item:hover { background:var(--s3); color:var(--t1); }
.menu-item .kbd { margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--t4); border:1px solid var(--border); border-radius:5px; padding:1px 5px; background:var(--s2); }
.menu-item .mcheck { margin-left:auto; width:16px; height:16px; color:var(--v-text); opacity:0; }
.menu-item.selected { color:var(--t1); }
.menu-item.selected .mcheck { opacity:1; }
.menu-sep { height:1px; margin:6px 4px; background:var(--border); }
.menu-label { padding:6px 10px 4px; font-size:11px; font-weight:590; letter-spacing:.1em; text-transform:uppercase; color:var(--t4); }
.csel { position:relative; }
.csel > button { display:flex; align-items:center; gap:8px; width:100%; height:36px; padding:0 12px; border-radius:var(--r-btn); border:1px solid var(--border); background:var(--s3); color:var(--t1); font-size:14px; }
.csel > button:hover { border-color:var(--border-strong); }
.csel.open > button { border-color:var(--v); box-shadow:0 0 0 3px var(--v-subtle); }
.csel > button .chev { margin-left:auto; color:var(--t3); transition:transform .18s var(--ease); }
.csel.open > button .chev { transform:rotate(180deg); }
.dd { position:relative; display:inline-block; }
.menu-footer { display:flex; gap:8px; padding:8px 6px 2px; border-top:1px solid var(--border); margin-top:6px; }

/* ============ two tab kinds ============ */
.seg { display:inline-flex; gap:4px; padding:4px; border-radius:9999px; border:1px solid color-mix(in srgb, var(--border) 60%, transparent); background:var(--track-bg); box-shadow:var(--shadow-track); max-width:100%; overflow-x:auto; }
.seg button { height:36px; padding:0 16px; border-radius:9999px; border:0; font-size:13px; font-weight:510; color:var(--t3); display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.seg button:hover { color:var(--t2); }
.seg button.active { background:linear-gradient(180deg, rgb(255 255 255/.14), rgb(255 255 255/.05)); color:var(--t1); box-shadow:var(--shadow-raised); }
.utabs { display:flex; gap:22px; border-bottom:1px solid var(--border); overflow-x:auto; }
.utabs button { position:relative; height:42px; padding:0 2px; border:0; font-size:15px; font-weight:510; color:var(--t3); white-space:nowrap; }
.utabs button:hover { color:var(--t2); }
.utabs button.active { color:var(--t1); }
.utabs button.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; border-radius:2px; background-image:var(--gradient-accent); }
.toolbtn { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; border-radius:var(--r-lg); border:1px solid var(--border-strong); background:var(--s3); box-shadow:var(--shadow-raised); font-size:13px; font-weight:510; color:var(--t2); }
.toolbtn:hover { color:var(--t1); background:var(--s4); }
.ibadge { width:40px; height:40px; border-radius:var(--r-lg); display:flex; align-items:center; justify-content:center; border:1px solid color-mix(in srgb, var(--border-strong) 60%, transparent); background-image:var(--gradient-tile); box-shadow:var(--shadow-tile); color:var(--t2); }
.ibadge--v { border-color:rgb(139 92 246/.4); color:var(--v-text); background-image:var(--tint-accent); }
.ibadge--gold { border-color:rgb(232 184 96/.35); color:var(--gold); background-image:var(--tint-gold); }
.ibadge--green { border-color:rgb(34 201 125/.35); color:var(--mint); background-image:var(--tint-success); }
.ibadge--blue { border-color:rgb(78 167 252/.35); color:var(--blue); background-image:var(--tint-info); }
.ibadge--pink { border-color:rgb(228 107 183/.35); color:var(--pink); background-image:var(--tint-pink); }
.ibadge--cyan { border-color:rgb(57 208 216/.35); color:var(--cyan); background-image:var(--tint-cyan); }

/* ============ composer (wib-glow, volumetric) ============ */
.composer { position:relative; width:100%; border:2px solid var(--composer-border); border-radius:24px; padding:22px 22px 16px;
  background:var(--composer-bg);
  box-shadow:0 0 0 1px rgb(155 82 255/.2), 0 0 28px rgb(155 82 255/.32), inset 0 0 28px rgb(155 82 255/.08);
  display:flex; flex-direction:column; gap:10px; transition:box-shadow .2s var(--ease); }
.composer:focus-within { box-shadow:0 0 0 1px rgb(155 82 255/.3), 0 0 40px rgb(155 82 255/.45), inset 0 0 32px rgb(155 82 255/.1); }
.composer textarea { min-height:84px; width:100%; resize:none; background:transparent; border:0; outline:none; color:var(--t1); font:inherit; font-size:17px; }
.composer textarea::placeholder { color:var(--t4); }
.cmp-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cmp-pill { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border-radius:9999px; border:1px solid rgb(255 255 255/.08); background:var(--pill-bg); color:var(--t2); font-size:13.5px; font-weight:510; box-shadow:inset 0 1px 0 rgb(255 255 255/.05), 0 2px 6px rgb(0 0 0/.3); }
.cmp-pill:hover { background:var(--pill-bg-hover); color:var(--t1); }
.cmp-icon { width:42px; padding:0; justify-content:center; }
.cmp-ghost { border:0; background:transparent; color:var(--t3); box-shadow:none; }
.cmp-ghost:hover { background:rgb(255 255 255/.05); color:var(--t2); }
.cmp-ask { display:inline-flex; align-items:center; gap:6px; height:46px; padding:0 24px; border-radius:9999px; border:0; background:linear-gradient(135deg,#8b5cf6,#7048e8); color:#fff; font-size:15px; font-weight:600; box-shadow:inset 0 1px 0 rgb(255 255 255/.25), 0 6px 18px -6px rgb(124 92 252/.65); }
.cmp-ask:hover { filter:brightness(1.08); }
@media (max-width:560px){ .cmp-ask span { display:none; } .cmp-ask { width:46px; padding:0; justify-content:center; border-radius:50%; } }

/* ============ market stat cards ============ */
.stat { display:flex; flex-direction:column; gap:6px; border:1px solid color-mix(in srgb, var(--border) 55%, transparent); background:var(--s2); border-radius:var(--r-xl); padding:18px 20px; background-image:var(--gradient-card); box-shadow:var(--shadow-card); }
.stat > .s-label:first-child { margin-bottom:auto; }
.stat > .s-label:first-child + .s-value { margin-top:10px; }
.stat .s-delta { margin-bottom:auto; }
@media (min-width:720px){ .stat { min-height:150px; } }
.stat .s-label { font-size:13.5px; color:var(--t3); }
.stat .s-value { font-size:27px; font-weight:640; letter-spacing:-.02em; line-height:1.1; color:var(--t1); font-variant-numeric:tabular-nums; }
.stat .s-delta { display:inline-flex; align-items:center; gap:4px; font-size:13.5px; font-weight:510; font-variant-numeric:tabular-nums; }
.stat--ai { border-color:rgb(139 92 246/.3); background-image:var(--gradient-glow), var(--gradient-card); }
/* gauge */
.gauge { position:relative; width:128px; height:64px; margin:4px auto 0; }
.gauge .arc { position:absolute; inset:0; border-radius:128px 128px 0 0; background:conic-gradient(from 270deg at 50% 100%, #ef4e58 0deg, #f08c3a 55deg, #f2c94c 95deg, #8ee06a 140deg, #22c97d 180deg, transparent 180deg); -webkit-mask:radial-gradient(circle at 50% 100%, transparent 56%, #000 57%); mask:radial-gradient(circle at 50% 100%, transparent 56%, #000 57%); }
.gauge .needle { position:absolute; left:calc(50% - 1px); bottom:0; width:2px; height:58px; transform-origin:bottom center; }
.gauge .needle::after { content:""; position:absolute; top:0; left:-4px; width:10px; height:10px; border-radius:50%; background:#fff; border:2.5px solid #0e0d16; box-shadow:0 0 6px rgb(255 255 255/.6); }
.gauge .g-num { position:absolute; left:0; right:0; bottom:-4px; text-align:center; font-size:24px; font-weight:640; color:var(--t1); font-variant-numeric:tabular-nums; }
/* altseason */
.alt-track { position:relative; height:8px; border-radius:9999px; background:linear-gradient(90deg, #f08c3a, #8a8f98 45%, #8b5cf6); margin-top:10px; }
.alt-thumb { position:absolute; top:50%; transform:translate(-50%,-50%); width:16px; height:16px; border-radius:50%; background:#fff; border:2.5px solid #0e0d16; box-shadow:0 1px 4px rgb(0 0 0/.5); }
.alt-ends { display:flex; justify-content:space-between; font-size:11px; font-weight:590; letter-spacing:.08em; color:var(--t4); margin-top:6px; }

/* ============ events ticker ============ */
.events { display:flex; align-items:center; gap:clamp(12px,3vw,28px); border:1px solid color-mix(in srgb, var(--border) 55%, transparent); background:var(--s2); border-radius:var(--r-xl); padding:12px 18px; overflow-x:auto; }
.event { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.event .avs { display:flex; }
.event .av { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:8.5px; font-weight:640; color:#fff; margin-left:-7px; box-shadow:0 0 0 2px var(--s2); }
.event .av:first-child { margin-left:0; }
.event .av--more { background:var(--s4); color:var(--t3); }
.event .e-name { font-size:13.5px; font-weight:510; color:var(--t1); white-space:nowrap; }
.event .e-time { font-family:var(--mono); font-size:11.5px; color:var(--t4); white-space:nowrap; }
.event .e-sev { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:590; letter-spacing:.04em; }
.event .e-sev i { width:6px; height:6px; border-radius:50%; display:inline-block; }

/* ============ market table ============ */
.mtable { width:100%; border-collapse:collapse; }
.mtable th { height:40px; padding:0 12px; text-align:right; font-size:11px; font-weight:590; letter-spacing:.12em; text-transform:uppercase; color:var(--t4); border-bottom:1px solid var(--border); white-space:nowrap; }
.mtable th:first-child { text-align:left; }
.mtable td { height:58px; padding:0 12px; text-align:right; font-size:14.5px; font-variant-numeric:tabular-nums; color:var(--t2); border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent); white-space:nowrap; }
.mtable td:first-child { text-align:left; }
.mtable tbody tr { transition:background .12s; }
.mtable tbody tr:hover { background:var(--s3); }
.mtable tbody tr:last-child td { border-bottom:0; }
.asset { display:flex; align-items:center; gap:10px; }
.asset .star { color:var(--v-text); }
.asset .star.off { color:var(--t4); }
.asset .coin { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:640; color:#fff; }
.asset .nm { display:flex; flex-direction:column; line-height:1.25; text-align:left; }
.asset .nm b { font-size:14.5px; font-weight:590; color:var(--t1); }
.asset .nm span { font-size:12px; color:var(--t4); }
.pct { font-weight:510; }
.pct.up { color:var(--mint); } .pct.down { color:var(--red); }
.spark { display:inline-block; vertical-align:middle; }

/* controls reused */
.slider { position:relative; height:20px; display:flex; align-items:center; }
.slider .track { position:absolute; left:0; right:0; height:4px; border-radius:9999px; background:var(--s4); }
.slider .fill { position:absolute; left:0; height:4px; border-radius:9999px; background-image:var(--gradient-accent); }
.slider .thumb { position:absolute; width:16px; height:16px; border-radius:50%; background:var(--v-soft); border:2px solid var(--v); box-shadow:0 0 0 4px rgb(110 86 207/.25), 0 2px 6px rgb(0 0 0/.4); transform:translateX(-50%); }
.chipsel { display:flex; gap:6px; flex-wrap:wrap; }
.chipsel button { height:28px; padding:0 12px; border-radius:8px; border:1px solid var(--border); background:var(--s3); font-size:13px; font-weight:510; color:var(--t3); font-variant-numeric:tabular-nums; }
.chipsel button:hover { color:var(--t2); border-color:var(--border-strong); }
.chipsel button.active { border-color:rgb(139 92 246/.6); background:var(--v-subtle); color:var(--v-soft); box-shadow:0 0 12px rgb(110 86 207/.25); }
.chipsel.goldsel button.active { border-color:rgb(232 184 96/.6); background-image:var(--gradient-gold-soft); background-color:var(--s3); color:var(--gold); box-shadow:var(--shadow-gold-glow); }
.statbox { display:flex; flex-direction:column; gap:4px; border:1px solid color-mix(in srgb, var(--border) 70%, transparent); background:var(--s3); border-radius:var(--r-xl); padding:14px 16px; }
.statbox--featured { align-items:center; text-align:center; padding:20px; border-color:rgb(232 184 96/.25); background-image:var(--gradient-gold-soft); }
.statbox--featured b { font-size:clamp(28px,4vw,38px); font-weight:640; letter-spacing:-.02em; }
.progress { position:relative; height:8px; border-radius:9999px; background:var(--s4); overflow:hidden; }
.progress > i { display:block; height:100%; border-radius:9999px; box-shadow:inset 0 1px 0 rgb(255 255 255/.25); }
.p-gold > i { background-image:var(--gradient-gold); }
.p-green > i { background-image:linear-gradient(90deg,#1ba368,#2fe391); }
.p-accent > i { background-image:var(--gradient-accent); }
.p-ignite > i { background-image:linear-gradient(90deg,#8b5cf6,#e8b860); }
.progress .mark { position:absolute; top:0; height:100%; width:1px; background:var(--border-strong); }
.divider { height:1px; width:100%; background:var(--border); }
.divider--fade { background:linear-gradient(90deg, transparent, var(--border-strong), transparent); }
.divider--label { display:flex; align-items:center; gap:12px; height:auto; background:none; }
.divider--label::before, .divider--label::after { content:""; height:1px; flex:1; }
.divider--label::before { background:linear-gradient(90deg, transparent, var(--border)); }
.divider--label::after { background:linear-gradient(270deg, transparent, var(--border)); }
.streak { display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:8px; }
.day { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 10px; border-radius:var(--r-xl); border:1px solid var(--border); background:var(--s2); color:var(--t4); }
.day .lab { font-size:10px; font-weight:590; letter-spacing:.16em; text-transform:uppercase; opacity:.9; white-space:nowrap; }
.day b { font-size:17px; font-weight:590; font-variant-numeric:tabular-nums; }
.day .pts { font-size:9px; letter-spacing:.18em; text-transform:uppercase; opacity:.5; }
.day--claimed { border-color:rgb(34 201 125/.45); background-color:var(--green-subtle); color:var(--mint); }
.day--deadline { border-color:rgb(232 184 96/.5); background-image:var(--gradient-gold-soft); color:var(--gold); }
.day--gift { border:1.5px solid transparent; background:linear-gradient(var(--s2),var(--s2)) padding-box, var(--gradient-gold) border-box; color:var(--gold); }
.seasonbar { display:flex; align-items:center; gap:12px; border:1px solid rgb(139 92 246/.25); border-radius:var(--r-xl); padding:10px 16px; background:linear-gradient(90deg, rgb(110 86 207/.2), rgb(110 86 207/.06) 55%, rgb(110 86 207/.14)); }
.seasonbar .facts { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:720px){ .seasonbar .facts, .seasonbar .ends { display:none; } }
.nowrap { white-space:nowrap; }
.swatch { display:flex; align-items:center; gap:10px; }
.swatch i { width:38px; height:38px; border-radius:var(--r-md); border:1px solid var(--border); flex-shrink:0; }
.tspec { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--border); padding-bottom:12px; }
.tspec .meta { font-family:var(--mono); font-size:11px; color:var(--t4); min-width:120px; }
/* staking flow */
.amtbox { border:1px solid var(--border); background:var(--s3); border-radius:14px; padding:13px 16px; display:flex; flex-direction:column; gap:10px; }
.amtbox .r1 { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--t4); }
.amtbox .r1 .bal { margin-left:auto; font-variant-numeric:tabular-nums; }
.amtbox .r2 { display:flex; align-items:center; gap:12px; }
.amtbox input { flex:1; min-width:0; background:transparent; border:0; outline:none; color:var(--t1); font:inherit; font-size:clamp(22px,4vw,28px); font-weight:640; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.tokmini { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:590; color:var(--t1); white-space:nowrap; }
.tokmini i { width:20px; height:20px; border-radius:50%; display:block; }
.optrow { display:flex; align-items:center; gap:13px; padding:13px 16px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--s3); cursor:pointer; transition:all .15s var(--ease); }
.optrow:hover { border-color:var(--border-strong); }
.optrow.sel { border-color:rgb(139 92 246/.55); background:var(--v-subtle); }
.optrow .txt { display:flex; flex-direction:column; line-height:1.3; min-width:0; flex:1; }
.optrow .txt b { font-size:14.5px; font-weight:590; color:var(--t1); }
.optrow .txt small { font-size:12.5px; color:var(--t3); }
.icot { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:inset 0 1px 0 rgb(255 255 255/.07); }
.callout.callout--ok { border-color:rgb(34 201 125/.4); background:linear-gradient(90deg, rgb(34 201 125/.1), rgb(34 201 125/.03)); }
.callout.callout--ok .tag-info { border-color:rgb(34 201 125/.55); color:var(--mint); }
/* AI recommendation */
.rec { border:1px solid rgb(139 92 246/.35); border-radius:var(--r-xl); padding:20px; background-image:var(--gradient-glow), var(--gradient-card); background-color:var(--s3); display:flex; flex-direction:column; gap:16px; }
.rec-head { display:flex; align-items:center; gap:12px; }
.rec-head .pv { width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:var(--on-mint); flex-shrink:0; }
.rec-apy { display:flex; align-items:baseline; gap:8px; }
.rec-apy b { font-size:clamp(34px,5vw,44px); font-weight:640; letter-spacing:-.02em; background-image:linear-gradient(180deg,var(--apy-a),var(--apy-b)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rec-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:600px){ .rec-grid { grid-template-columns:1fr; } }
.rec-cell { border-radius:var(--r-lg); background:rgb(255 255 255/.03); border:1px solid var(--border); padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.why { border-radius:var(--r-lg); background:rgb(255 255 255/.02); border:1px solid var(--border); padding:14px 16px; display:flex; flex-direction:column; gap:7px; }
.txrow { display:flex; align-items:center; gap:12px; padding:12px 2px; border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent); font-size:14px; }
.txrow:last-of-type { border-bottom:0; }
.txrow span:first-child { color:var(--t3); }
.txrow b { margin-left:auto; font-weight:590; color:var(--t1); font-variant-numeric:tabular-nums; }
.disclose { display:flex; align-items:center; gap:8px; width:100%; padding:13px 16px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--s3); font-size:14px; font-weight:510; color:var(--t1); }
.disclose svg { margin-left:auto; color:var(--t3); }
.pickrow { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--s3); cursor:pointer; }
.pickrow:hover { border-color:var(--border-strong); }
.bigbtn { display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; height:52px; border-radius:14px; border:0; background-image:var(--gradient-accent); color:#fff; font-size:15.5px; font-weight:640; box-shadow:var(--shadow-accent-glow); }
.bigbtn:hover { filter:brightness(1.08); }
.bigbtn--ghost { background:var(--s3); background-image:none; border:1px solid var(--border-strong); color:var(--t2); box-shadow:inset 0 1px 0 rgb(255 255 255/.05); }
.bigbtn--ghost:hover { background:var(--s4); color:var(--t1); filter:none; }
.bigbtn--danger { background:none; background-color:transparent; background-image:none; border:1px solid rgb(239 78 88/.5); color:var(--red); box-shadow:none; }
.bigbtn--danger:hover { background:var(--red-subtle); }
.bigbtn--solid-danger { background:none; background-color:var(--red); color:#fff; box-shadow:0 2px 10px -2px rgb(239 78 88/.5); }
.okcircle { width:60px; height:60px; border-radius:50%; background:linear-gradient(180deg,#5ee39b,#22c97d); display:flex; align-items:center; justify-content:center; color:var(--on-mint); box-shadow:0 4px 20px rgb(34 201 125/.35), inset 0 1px 0 rgb(255 255 255/.35); }
.poshead { display:flex; align-items:center; gap:13px; padding:14px 16px; cursor:pointer; }
.poshead .pv { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; color:var(--on-mint); flex-shrink:0; }
.poshead .amt2 { margin-left:auto; text-align:right; display:flex; flex-direction:column; line-height:1.3; }
.poshead .amt2 b { font-size:15.5px; font-weight:640; color:var(--t1); font-variant-numeric:tabular-nums; }
.poshead .amt2 span { font-size:12.5px; font-weight:510; color:var(--mint); font-variant-numeric:tabular-nums; }
/* staking */
.callout { display:flex; align-items:flex-start; gap:12px; padding:13px 16px; border-radius:var(--r-xl); border:1px solid rgb(139 92 246/.3); background:linear-gradient(90deg, rgb(110 86 207/.14), rgb(110 86 207/.05)); }
.callout .tag-info { flex-shrink:0; margin-top:3px; display:inline-flex; height:20px; padding:0 8px; align-items:center; border-radius:9999px; border:1px solid rgb(139 92 246/.5); color:var(--v-text); font-size:10px; font-weight:590; letter-spacing:.06em; }
.steps { display:flex; flex-direction:column; margin:0; padding:0; list-style:none; }
.steps li { position:relative; display:flex; gap:12px; padding-bottom:18px; }
.steps li:last-child { padding-bottom:0; }
.steps li:not(:last-child)::before { content:""; position:absolute; left:13px; top:28px; bottom:0; width:1px; background:var(--border); }
.steps .n { z-index:1; width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid rgb(139 92 246/.4); background:var(--v-subtle); color:var(--v-text); font-size:13px; font-weight:510; }
.wizbars { display:flex; gap:8px; justify-content:center; }
.wizbars i { width:52px; height:4px; border-radius:9999px; background:var(--s4); }
.wizbars i.on { background-image:var(--gradient-accent); }
.callout.callout--warning { border-color:rgb(240 140 58/.45); background:linear-gradient(90deg, rgb(240 140 58/.12), rgb(240 140 58/.04)); }
.callout.callout--warning .tag-info { border-color:rgb(240 140 58/.6); color:var(--orange); }
.stk-hero { display:grid; grid-template-columns:1.4fr 1fr; gap:clamp(16px,3vw,28px); align-items:center; }
@media (max-width:820px){ .stk-hero { grid-template-columns:1fr; } }
.stk-mini { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.asset-row { display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--s3); cursor:pointer; transition:all .15s var(--ease); }
.asset-row:hover { border-color:var(--border-strong); }
.asset-row.sel { border-color:rgb(139 92 246/.55); background:var(--v-subtle); box-shadow:0 0 14px rgb(110 86 207/.18); }
.asset-row.dim { opacity:.55; cursor:default; }
.asset-row .coin { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:640; color:#fff; flex-shrink:0; }
.asset-row .nm { display:flex; flex-direction:column; line-height:1.3; min-width:0; flex:1; }
.asset-row .nm b { font-size:14.5px; font-weight:590; color:var(--t1); }
.asset-row .nm small { font-size:12px; color:var(--t4); }
/* ================= v7 · PARTNER PORTAL (source: partner-features-demo.html) ================= */
/* TYPE SCALE — 6 steps, nothing between them. Every font-size in the portal snaps to one of these. */
:root { --fs-xs:11px; --fs-sm:13px; --fs-md:15px; --fs-lg:18px; --fs-xl:22px; --fs-display:28px; }
/* xs captions/overlines · sm body & buttons · md card titles/lead · lg section titles · xl big values · display hero numbers */
.ihint { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; border:1px solid var(--border-strong); font-size:10px; font-weight:640; font-style:italic; color:var(--text-faint); flex-shrink:0; cursor:pointer; }
.ihint:hover { color:var(--text-secondary); border-color:var(--text-faint); }
.btn--gold-solid { background-image:var(--gradient-gold); color:var(--on-gold); font-weight:640; box-shadow:var(--shadow-gold-glow); }
.btn--gold-solid:hover { filter:brightness(1.06); }
/* emphasis hierarchy — two escalations above the default card */
.card--event { border-color:rgb(232 184 96/.38); background-image:linear-gradient(180deg, rgb(232 184 96/.07), rgb(232 184 96/0) 42%), var(--gradient-card); box-shadow:var(--shadow-card), 0 0 32px -12px rgb(232 184 96/.45); }
.card--focus { border-color:rgb(139 92 246/.35); background-image:var(--gradient-glow), var(--gradient-card); box-shadow:var(--shadow-card), 0 0 32px -14px rgb(124 92 252/.5); }
.card--event .card-head b.t, .card--focus .card-head b.t { position:relative; padding-left:11px; }
.card--event .card-head b.t::before, .card--focus .card-head b.t::before { content:""; position:absolute; left:0; top:.18em; bottom:.18em; width:3px; border-radius:2px; background-image:var(--gradient-accent); }
.card--event .card-head b.t::before { background-image:var(--gradient-gold); }
.factline { display:flex; flex-wrap:wrap; gap:8px; }
.factline .fact { display:flex; align-items:baseline; gap:6px; padding:7px 12px; border-radius:var(--r-lg); border:1px solid color-mix(in srgb, var(--border) 50%, transparent); background:var(--s3); box-shadow:inset 0 1px 0 rgb(255 255 255/.03); }
.factline .fact b { font-size:var(--fs-sm); font-weight:640; color:var(--t1); font-variant-numeric:tabular-nums; }
.factline .fact span { font-size:var(--fs-xs); color:var(--t4); white-space:nowrap; }
:root { --gradient-info:linear-gradient(135deg,#4ea7fc 0%,#2f6fe0 100%); --gradient-cyan:linear-gradient(135deg,#39d0d8 0%,#149ba3 100%); --gradient-mint:linear-gradient(135deg,#4ade87 0%,#1ba368 100%); }
.num { font-variant-numeric:tabular-nums; }
/* progress rings — goals are ALWAYS rings, never linear rails (rails read as sliders) */
.ring { position:relative; width:76px; height:76px; flex-shrink:0; }
.ring svg { width:100%; height:100%; transform:rotate(-90deg); }
.ring .tr { fill:none; stroke:var(--s4); stroke-width:8; }
.ring .pr { fill:none; stroke-width:8; stroke-linecap:round; transition:stroke-dasharray .8s var(--ease); }
.ring--gold .pr { stroke:url(#gradGold); filter:drop-shadow(0 0 6px rgb(232 184 96/.35)); }
.ring--v .pr { stroke:url(#gradAccent); filter:drop-shadow(0 0 6px rgb(139 92 246/.4)); }
.ring--mint .pr { stroke:url(#gradMint); filter:drop-shadow(0 0 6px rgb(34 201 125/.35)); }
.ring .rc { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring .rc b { font-size:16px; font-weight:640; letter-spacing:-.02em; color:var(--t1); font-variant-numeric:tabular-nums; line-height:1.15; }
.ringblock { display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid color-mix(in srgb, var(--border) 50%, transparent); border-radius:var(--r-lg); background:var(--s3); box-shadow:inset 0 1px 0 rgb(255 255 255/.03); text-align:left; }
.ringblock:hover { border-color:var(--border-strong); }
.rings { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
@media (max-width:880px){ .rings { grid-template-columns:1fr; } }
/* team level staircase (Team tab) */
.stair { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; align-items:end; margin-top:8px; }
.stair .st { display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; }
.stair .st .you { font-size:9px; font-weight:640; letter-spacing:.14em; text-transform:uppercase; color:var(--v-text); }
.stair .st .pct { font-size:14px; font-weight:640; color:var(--t3); font-variant-numeric:tabular-nums; }
.stair .st .bar { width:100%; border-radius:9px; background:var(--s4); border:1px solid color-mix(in srgb, var(--border) 50%, transparent); box-shadow:inset 0 1px 0 rgb(255 255 255/.04); }
.stair .st.on .pct { color:var(--v-text); }
.stair .st.on .bar { background-image:var(--gradient-accent); border:0; box-shadow:var(--shadow-accent-glow); }
.stair .st.max .bar { background-image:var(--gradient-gold); border:0; }
.stair .st.max .pct { color:var(--gold); }
.stair .st .lbl { font-size:9px; font-weight:590; letter-spacing:.1em; text-transform:uppercase; color:var(--t4); white-space:nowrap; }
@media (max-width:640px){ .stair { grid-template-columns:repeat(3,1fr); row-gap:16px; } }
/* tier tiles */
.tnodes { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.tnode { display:flex; flex-direction:column; align-items:center; text-align:center; gap:1px; padding:10px 8px; border-radius:var(--r-lg); border:1px solid color-mix(in srgb, var(--border) 50%, transparent); background:var(--s3); box-shadow:inset 0 1px 0 rgb(255 255 255/.03); }
.tnode .tn-pct { font-size:18px; font-weight:640; letter-spacing:-.02em; color:var(--t4); font-variant-numeric:tabular-nums; }
.tnode .tn-name { font-size:12px; font-weight:590; color:var(--t2); }
.tnode .tn-req { font-size:9px; font-weight:590; letter-spacing:.12em; text-transform:uppercase; color:var(--t4); margin-top:1px; }
.tnode .tn-usd { font-size:12px; font-weight:590; margin-top:5px; font-variant-numeric:tabular-nums; }
.tnode.done .tn-pct { color:var(--t1); }
.tnode.next--gold { border-color:rgb(232 184 96/.5); background-image:var(--gradient-gold-soft); }
.tnode.next--gold .tn-pct { color:var(--gold); }
@media (max-width:680px){ .tnodes { grid-template-columns:1fr 1fr; } }
/* rate rows — fixed columns so bars align across rows */
.rate-row { display:flex; align-items:center; gap:16px; padding:13px 0; width:100%; text-align:left; }
.rate-row + .rate-row { border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.rate-row .rr-name { flex:0 0 170px; font-size:13.5px; font-weight:510; color:var(--t2); white-space:nowrap; }
.rate-row .rr-name b { color:var(--t1); font-weight:640; }
.rate-row .rr-bar { flex:1; min-width:120px; }
.rate-row .rr-next { flex:0 0 180px; text-align:right; font-size:12px; color:var(--t4); white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (max-width:640px){ .rate-row { flex-wrap:wrap; } .rate-row .rr-name { flex:1 1 auto; } .rate-row .rr-bar { order:3; flex-basis:100%; } }
/* identity row bits */
.chip--tier { background:var(--v-subtle); color:var(--v-text); font-size:10px; font-weight:590; letter-spacing:.08em; text-transform:uppercase; height:19px; padding:0 7px; }
.lvlbadge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:590; color:var(--t2); }
.lvlbadge svg { color:var(--mint); }
.morelinks { height:30px; min-width:38px; padding:0 10px; border-radius:8px; border:1px solid var(--border-strong); background:var(--s4); font-size:12.5px; font-weight:590; color:var(--t2); box-shadow:var(--shadow-raised); font-variant-numeric:tabular-nums; }
.morelinks:hover { color:var(--t1); background:var(--s2-hover); }
/* VIP badges — gradient border via padding-box/border-box composite */
.vip-badge { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:9999px; font-size:11px; font-weight:590; letter-spacing:.02em; border:1.5px solid transparent; background:linear-gradient(var(--s3),var(--s3)) padding-box, var(--gradient-gold) border-box; box-shadow:0 0 12px -2px rgb(232 184 96/.35); }
.vip-badge svg { color:var(--gold); }
.vip-badge--pending { background:linear-gradient(var(--s3),var(--s3)) padding-box, linear-gradient(135deg, var(--border-strong), var(--border)) border-box; box-shadow:none; color:var(--t3); }
.vip-badge--pending svg { color:var(--t4); }
.vip-apply { display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:9999px; font-size:11px; font-weight:590; color:var(--t3); border:1px solid var(--border-strong); background:var(--s3); }
.vip-apply:hover { color:var(--gold); border-color:rgb(232 184 96/.5); }
/* referral link line — r-lg box (never a full pill), concentric inner button */
.linkline { display:flex; align-items:center; gap:10px; background:var(--s3); border:1px solid color-mix(in srgb, var(--border) 70%, transparent); border-radius:var(--r-lg); padding:6px 6px 6px 16px; box-shadow:var(--shadow-track); }
.linkline .url { flex:1; min-width:0; font-family:var(--mono); font-size:14px; color:var(--t1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; user-select:all; }
/* metric color coding */
.bars { display:flex; align-items:flex-end; gap:4px; height:36px; margin-top:10px; }
.bars i { flex:1; min-height:3px; border-radius:3px; background:var(--s4); box-shadow:inset 0 1px 0 rgb(255 255 255/.05); }
.bars i.hi { background-image:var(--gradient-accent); box-shadow:var(--shadow-accent-glow); }
[data-metric="signups"] .bars i.hi { background-image:var(--gradient-info); box-shadow:inset 0 1px 0 rgb(255 255 255/.15), 0 2px 10px -2px rgb(78 167 252/.4); }
[data-metric="activated"] .bars i.hi { background-image:var(--gradient-cyan); box-shadow:inset 0 1px 0 rgb(255 255 255/.15), 0 2px 10px -2px rgb(57 208 216/.4); }
[data-metric="volume"] .bars i.hi { background-image:var(--gradient-gold); box-shadow:inset 0 1px 0 rgb(255 255 255/.15), 0 2px 10px -2px rgb(232 184 96/.4); }
[data-metric="earned"] .bars i.hi { background-image:var(--gradient-mint); box-shadow:inset 0 1px 0 rgb(255 255 255/.15), 0 2px 10px -2px rgb(34 201 125/.4); }
/* designed empty states — an invitation, never a void */
.empty-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; padding:24px 16px; }
.empty-wrap svg { opacity:.7; color:var(--t4); }
.empty-wrap p { margin:0; text-align:center; font-size:13px; line-height:1.55; color:var(--t4); max-width:46ch; }
/* frameless video hero (challenge cards, popups) */
.chal-hero { position:relative; overflow:hidden; margin:-18px -20px 2px; padding:16px 20px 18px; border-radius:var(--r-xl) var(--r-xl) 0 0; }
.chal-hero .bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; z-index:0; }
.chal-hero::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgb(14 13 22/.25) 0%, rgb(14 13 22/.6) 60%, rgb(14 13 22/.8) 100%); }
.chal-hero > :not(.bg) { position:relative; z-index:2; }

.chip > svg { width:13px; height:13px; flex-shrink:0; }

/* ============ v8 polish — concentric radii · contrast · micro-states ============ */
:root { --r-inner:16px; --r-row:12px; --r-tile:10px; }

/* RADIUS RULE — depth, not element type. Siblings always share a radius.
   L1 page card 24 · L2 block/row inside a card 16 · L3 nested or compact row (<40px) 10
   tiles & icon boxes 10 · buttons 10 (sm 8 · lg 14) · chips & pills 9999 */
.amtbox, .rec, .statbox, .disclose, .pickrow, .callout,
.optrow, .asset-row, .day, .stat, .poshead, .concard { border-radius:var(--r-inner); }
/* L3 — nested inside an L2 block */
.rec-cell, .why, .rec .callout, .tpl .tp { border-radius:var(--r-tile); }
.tp { border-radius:var(--r-tile); }
.icot, .concard .ci, .rec-head .pv, .poshead .pv { border-radius:var(--r-tile); }
.bigbtn, .btn--lg { border-radius:14px; }

/* contrast: meaningful sub-values read as muted, faint stays for pure metadata */
.rec-cell .type-caption.faint,
.poshead small.type-caption.faint,
.asset-row .type-caption.faint,
.amtbox .r1 { color:var(--t3); }
.optrow .txt small { color:var(--t2); opacity:.75; }
.optrow.sel .txt small { opacity:.9; }
.txrow span:first-child { color:var(--t2); opacity:.8; }
.wizbars i { background:var(--border-strong); }
.wizbars i.on { box-shadow:0 0 10px rgb(139 92 246/.45); }

/* micro-states */
.amtbox { transition:border-color .15s var(--ease), box-shadow .15s var(--ease); }
.amtbox:focus-within { border-color:var(--v); box-shadow:0 0 0 3px var(--v-subtle); }
.optrow:active, .asset-row:not(.dim):active, .pickrow:active, .disclose:active { transform:translateY(1px); }
.optrow.sel, .asset-row.sel { box-shadow:inset 0 1px 0 rgb(255 255 255/.06), 0 0 14px rgb(110 86 207/.18); }
/* selected check gets a proper affordance */
.optrow.sel > svg:last-child, .asset-row.sel > svg:last-child { width:24px; height:24px; padding:5px; border-radius:50%; background:rgb(139 92 246/.18); box-shadow:inset 0 0 0 1px rgb(139 92 246/.4); flex-shrink:0; }
.disclose { transition:border-color .15s var(--ease), background .15s var(--ease); }
.disclose:hover { border-color:var(--border-strong); background:var(--s4); }
.disclose svg { transition:transform .2s var(--ease); }
.disclose:hover svg { transform:translateY(1px); }
.pickrow { transition:all .15s var(--ease); }
.pickrow:hover .faint { color:var(--t2); }
.poshead { transition:background .15s var(--ease); }
.poshead:hover { background:rgb(255 255 255/.02); }
.okcircle { box-shadow:0 4px 20px rgb(34 201 125/.35), 0 0 0 8px rgb(34 201 125/.07), inset 0 1px 0 rgb(255 255 255/.4); }

/* dividers: keep every hairline at the same quiet strength */
.txrow { border-bottom-color:color-mix(in srgb, var(--border) 55%, transparent); }

/* ============ responsive safety net ============================================
   Works even if a page hardcodes grid-template-columns or forgets a breakpoint.
   (The page must still ship <meta name="viewport" content="width=device-width,
   initial-scale=1.0"> — without it a phone renders a 980px desktop viewport.) */
.wrap { width:100%; }
img, svg, video, canvas { max-width:100%; }
.type-mono, code, pre { overflow-wrap:anywhere; }

@media (max-width:900px) {
  /* any grid — including inline repeat(4,1fr) — reflows to fit */
  .grid { grid-template-columns:repeat(auto-fit, minmax(min(100%, 230px), 1fr)) !important; }
  .stk-hero, .sig-grid, .cols-main, .cols-53, .cols-2, .cols-3, .cols-4, .cols-5 { grid-template-columns:1fr !important; }
  .utabs, .topnav, .seg, .ptabs, .events { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .utabs::-webkit-scrollbar, .topnav::-webkit-scrollbar, .seg::-webkit-scrollbar { display:none; }
}
@media (max-width:560px) {
  .grid { grid-template-columns:1fr !important; }
  /* compact metric strips stay two-up so they don't become a tower */
  .grid.auto-m, .stk-mini, .rec-grid { grid-template-columns:1fr 1fr !important; }
  .wrap { padding-left:14px; padding-right:14px; }
  .card { padding:16px; }
  .row { gap:10px; }
  .poshead, .optrow, .asset-row, .tokrow { flex-wrap:wrap; }
  .bigbtn { font-size:14.5px; }
}

/* ============ LIGHT THEME — add class="light" to <html> ====================
   Page is grey, cards are white (matches the production light mode). Every
   component below is token-driven, so nothing else needs to change. */
.light {
  --bg:#edeef4; --s2:#ffffff; --s3:#f7f8fb; --s4:#eef0f5;
  --border:#e2e2e8; --border-strong:#d0d1da;
  --t1:#141318; --t2:#4d4c55; --t3:#6f6e76; --t4:#8e8d97;
  --v:#6e56cf; --vl:#5d45be; --v-subtle:#efebfd; --v-text:#5d45be;
  --green:#17904f; --green-subtle:#e8f7ee; --mint:#17904f;
  --red:#d2333c; --red-subtle:#fdecec;
  --warning:#b78105; --warning-subtle:#fbf3dc; --orange:#c2660f;
  --blue:#1c85e8; --blue-subtle:#e8f2fd; --cyan:#0e8a91; --pink:#c2408c;
  --gold:#b07300; --gold-subtle:#f9f0dc;

  --shadow-card: inset 0 1px 0 0 rgb(255 255 255/.9), 0 1px 2px rgb(20 19 24/.05), 0 4px 14px rgb(20 19 24/.06);
  --shadow-card-hover: inset 0 1px 0 0 rgb(255 255 255/.9), 0 2px 4px rgb(20 19 24/.07), 0 10px 26px rgb(20 19 24/.09);
  --shadow-menu: 0 2px 4px rgb(20 19 24/.06), 0 12px 32px rgb(20 19 24/.12);
  --shadow-track: inset 0 1.5px 3px rgb(20 19 24/.1);
  --shadow-raised: inset 0 1px 0 rgb(255 255 255/.9), 0 1px 3px rgb(20 19 24/.1);
  --shadow-tile: inset 0 1px 0 rgb(255 255 255/.9), 0 2px 6px rgb(20 19 24/.1);
  --shadow-accent-glow: inset 0 1px 0 rgb(255 255 255/.25), 0 2px 10px -2px rgb(110 86 207/.4);
  --shadow-gold-glow: inset 0 1px 0 rgb(255 255 255/.25), 0 2px 8px rgb(176 115 0/.22), 0 0 18px rgb(176 115 0/.12);
  --shadow-prompt: 0 0 0 1px rgb(110 86 207/.35), 0 0 0 4px rgb(110 86 207/.08), 0 10px 30px rgb(110 86 207/.12);

  --gradient-card: linear-gradient(180deg, rgb(255 255 255/.7), rgb(255 255 255/0) 45%);
  --gradient-glow: radial-gradient(120% 90% at 50% -10%, rgb(110 86 207/.12), rgb(110 86 207/.04) 40%, transparent 70%);
  --gradient-gold: linear-gradient(135deg, #d3a04a 0%, #b07300 60%, #8f5e02 100%);
  --gradient-gold-soft: linear-gradient(180deg, rgb(176 115 0/.1), rgb(176 115 0/.02));
  --gradient-tile: linear-gradient(180deg, #ffffff 0%, #eef0f4 100%);

  --track-bg:#e6e7ee; --s2-hover:#e9eaf1;
  --pill-bg:#f2f3f7; --pill-bg-hover:#e9eaf1;
  --composer-bg:linear-gradient(180deg,#ffffff,#fbfbff);
  --composer-border:rgb(110 86 207/.55);
  --v-soft:#5d45be; --apy-a:#7a63d8; --apy-b:#5231b5;
  --on-mint:#ffffff; --on-gold:#ffffff; --silver:#6f6e76;
  --btn-light-bg:linear-gradient(180deg,#2a2833,#141318); --btn-light-fg:#ffffff;
  --tint-accent:linear-gradient(180deg,#f1edfd,#e4ddfb);
  --tint-gold:linear-gradient(180deg,#fbf3de,#f6e8c6);
  --tint-success:linear-gradient(180deg,#e9f8ef,#d8f1e3);
  --tint-info:linear-gradient(180deg,#e9f3fd,#d7e9fb);
  --tint-pink:linear-gradient(180deg,#fdecf5,#fbdcec);
  --tint-cyan:linear-gradient(180deg,#e6f7f8,#d3f0f1);
  --texture-dot:rgb(20 19 24/.07); --texture-ray:rgb(20 19 24/.035);
  color-scheme: light;
}
/* pieces that are inverted rather than tinted */
.light .seg button.active,
.light .ptab.active { color:#fff; }
.light .seg button.active { background:linear-gradient(180deg,#fff,#f2f3f7); color:var(--t1); }
.light .okcircle { box-shadow:0 4px 18px rgb(23 144 79/.28), 0 0 0 8px rgb(23 144 79/.08), inset 0 1px 0 rgb(255 255 255/.5); }
.light .rec-head .pv, .light .poshead .pv { color:#0b2a19; }

/* tint utilities — use these instead of inline gradients on icon tiles */
.tint-accent  { background-image:var(--tint-accent); }
.tint-gold    { background-image:var(--tint-gold); }
.tint-success { background-image:var(--tint-success); }
.tint-info    { background-image:var(--tint-info); }
.tint-pink    { background-image:var(--tint-pink); }
.tint-cyan    { background-image:var(--tint-cyan); }
.tint-orange  { background-image:linear-gradient(180deg,#3b2418,#241610); }
.light .tint-orange { background-image:linear-gradient(180deg,#fdeee2,#fbdfcb); }


/* >>> charts layer (injected) >>> */
/* ============================================================ CHART LAYER
   New tokens and classes proposed for the kit. Everything else on this page
   is existing design-system markup. */
:root {
  --chart-grid:rgb(255 255 255/.05);
  --chart-axis:var(--t4);
  --chart-crosshair:rgb(255 255 255/.22);
  --candle-up:var(--green);
  --candle-down:var(--red);
  /* The platform ships violet candles on purpose — brand over convention. */
  --candle-up-brand:#9b87ff;
  --candle-down-brand:#5b4bb5;
  --chart-line:var(--v);
  --chart-area-top:rgb(110 86 207/.32);
  --chart-area-bottom:rgb(110 86 207/0);
  --chart-band:rgb(110 86 207/.10);
  --on-v:#ffffff;
  --chart-skeleton-band:rgb(255 255 255/.045);
  --chart-sweep:rgb(255 255 255/.06);
}
.light {
  --chart-grid:rgb(20 19 24/.07);
  --chart-crosshair:rgb(20 19 24/.28);
  --candle-up-brand:#6e56cf;
  --candle-down-brand:#b9aee8;
  --chart-area-top:rgb(110 86 207/.22);
  --chart-band:rgb(110 86 207/.08);
  --chart-skeleton-band:rgb(20 19 24/.05);
  --chart-sweep:rgb(20 19 24/.06);
}

.chart { display:flex; flex-direction:column; gap:0; }
.chart-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.chart-price { display:flex; align-items:baseline; gap:10px; }
.chart-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:14px; }
.chart-toolbar .spacer { flex:1; min-width:8px; }
.iconbtn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:var(--r-btn); border:1px solid var(--border); background:var(--s3); color:var(--t3); }
.iconbtn:hover { color:var(--t1); border-color:var(--border-strong); }
.iconbtn.on { color:var(--t1); background:var(--v-subtle); border-color:color-mix(in srgb, var(--v) 45%, transparent); }

.chart-body { position:relative; margin-top:16px; border-radius:var(--r-xl); border:1px solid color-mix(in srgb, var(--border) 55%, transparent); background:var(--s2); background-image:var(--gradient-card); padding:12px 12px 0; }
.chart-body > svg.c-plot { display:block; width:100%; height:auto; }
.chart-body svg { display:block; }
.c-scale { position:absolute; top:12px; right:12px; width:var(--c-gutter-px, 54px); pointer-events:none; }
.c-tick { position:absolute; right:0; transform:translateY(-50%); font-family:var(--mono); font-size:10px; color:var(--chart-axis); white-space:nowrap; }
@media (max-width:560px) {
  .chart-toolbar .iconbtn.opt { display:none; }
  .c-tick { font-size:9px; }
}
.c-time { display:flex; justify-content:space-between; padding:6px 2px 10px; }
.c-time span { font-family:var(--mono); font-size:10px; color:var(--t4); }

/* crosshair + readout, CSS-only: follows the hovered column */
.c-cols { position:absolute; inset:12px 12px 34px; display:flex; }
.c-cols--gutter { right:calc(12px + var(--c-gutter, 54px)); }
.c-col { flex:1; position:relative; }
.c-col::before { content:""; position:absolute; inset:0 auto 0 50%; width:1px; background:var(--chart-crosshair); opacity:0; }
.c-col:hover::before { opacity:1; }
.c-read { position:absolute; left:50%; top:0; transform:translate(-50%,-50%); display:none; gap:10px; padding:8px 10px; border-radius:var(--r-md); border:1px solid var(--border-strong); background:var(--s4); box-shadow:var(--shadow-menu); white-space:nowrap; z-index:3; }
.c-col:hover .c-read { display:flex; }
.c-col:nth-child(-n+9) .c-read { left:0; transform:translate(0,-50%); }
.c-col:nth-last-child(-n+9) .c-read { left:auto; right:0; transform:translate(0,-50%); }
.c-read b { font-family:var(--mono); font-size:11px; font-weight:590; color:var(--t1); }
.c-read i { font-family:var(--mono); font-size:11px; font-style:normal; color:var(--t3); }

.c-badge { position:absolute; top:20px; left:20px; display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:9999px; border:1px solid color-mix(in srgb, var(--v) 40%, transparent); background:var(--v-subtle); color:var(--v-text); font-size:11px; font-weight:590; }
.c-last { position:absolute; right:12px; display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:var(--r-sm); background:var(--v); color:var(--on-v); font-family:var(--mono); font-size:10.5px; font-weight:590; transform:translateY(-50%); }

/* annotation lines: entry / take profit / stop */
.c-mark { position:absolute; left:12px; right:12px; height:0; border-top:1px dashed currentColor; }
.c-mark span { position:absolute; left:0; top:-9px; font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; padding:0 6px 0 0; background:var(--s2); }
.c-mark--tp { color:var(--green); }
.c-mark--sl { color:var(--red); }
.c-mark--entry { color:var(--t3); }

.chart-legend { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-top:12px; }
.lg { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--t3); }
.lg i { width:10px; height:10px; border-radius:9999px; display:block; }
.lg b { color:var(--t1); font-family:var(--mono); font-size:12px; font-weight:590; }

/* skeleton + empty */
.chart-skeleton { height:180px; border-radius:var(--r-xl); border:1px solid color-mix(in srgb, var(--border) 55%, transparent); background:
  linear-gradient(90deg, transparent 0 8%, var(--chart-skeleton-band) 8% 12%, transparent 12% 100%) 0 0/100% 100%,
  repeating-linear-gradient(to right, var(--chart-grid) 0 1px, transparent 1px 25%),
  repeating-linear-gradient(to bottom, var(--chart-grid) 0 1px, transparent 1px 25%),
  var(--s2); position:relative; overflow:hidden; }
.chart-skeleton::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, var(--chart-sweep), transparent); animation:csweep 1.6s var(--ease) infinite; }
@keyframes csweep { from { transform:translateX(-100%) } to { transform:translateX(100%) } }

.donut-wrap { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.donut { position:relative; flex-shrink:0; }
.donut-mid { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
/* <<< charts layer <<< */

/* >>> swap layer (injected) >>> */
/* =========================================================== SWAP / BRIDGE
   New tokens and classes proposed for the kit. Everything else is existing
   design-system markup. */
:root {
  --modal-backdrop:rgb(6 5 12/.72);
  --sheet-bg:var(--s2);
  --edge-top:rgb(255 255 255/.05);
  --shadow-logo:inset 0 1px 1px rgb(255 255 255/.3);

  --coin-sol:linear-gradient(135deg,#00ffa3,#7b5cff);
  --coin-usdc:linear-gradient(135deg,#4ea7fc,#2775ca);
  --coin-usdt:linear-gradient(135deg,#3fd1a0,#26a17b);
  --coin-eth:linear-gradient(135deg,#8a92b2,#454a75);
  --coin-bonk:linear-gradient(135deg,#f7b24a,#e07a1f);
  --coin-jup:linear-gradient(135deg,#4ade87,#22c97d);
  --coin-unknown:var(--s4);
  --chain-sol:#14f195;
  --chain-eth:#627eea;
  --chain-base:#0052ff;
  --chain-bnb:#f0b90b;
  --addr-mark:linear-gradient(135deg,#e46bb7,#f08c3a);
}
.light {
  --modal-backdrop:rgb(20 19 24/.38);
  --edge-top:rgb(255 255 255/.6);
  --shadow-logo:inset 0 1px 1px rgb(255 255 255/.45);
}

/* --- attached tabs: the top level of a card, fused with the surface ---------
   Two pill rows in one card read as the same decision twice. The surface switch
   gets a tab that belongs to the card; options inside the surface stay pills. */
.tabcard { display:flex; flex-direction:column; }
.tabstrip { display:flex; align-items:flex-end; gap:2px; padding-left:26px; margin-bottom:-1px; position:relative; z-index:2; overflow-x:auto; scrollbar-width:none; }
.tabstrip::-webkit-scrollbar { display:none; }
.tabatt { position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:118px; height:42px; padding:0 26px; border:1px solid transparent; border-bottom:0; border-radius:14px 14px 0 0; background:transparent; color:var(--t3); font-size:14px; font-weight:510; letter-spacing:-.01em; white-space:nowrap; transition:color .15s var(--ease), background .15s var(--ease); }
.tabatt:hover { color:var(--t2); background:color-mix(in srgb, var(--s3) 65%, transparent); }
.tabatt.active { color:var(--t1); background:var(--s2); box-shadow:inset 0 1px 0 var(--edge-top); border-color:color-mix(in srgb, var(--border) 60%, transparent); }
/* the outward flare that makes it read as a tab and not a floating box */
.tabatt.active .flare { position:absolute; bottom:0; width:10px; height:10px; pointer-events:none; }
.tabatt.active .flare--l { left:-10px; background:radial-gradient(circle 10px at 0 0, transparent 9.4px, var(--s2) 10px); }
.tabatt.active .flare--r { right:-10px; background:radial-gradient(circle 10px at 100% 0, transparent 9.4px, var(--s2) 10px); }
.tabatt .flare { display:none; }
.tabatt.active .flare { display:block; }
.card--tabbed { background-image:none; border-top-left-radius:16px; border-top-right-radius:16px; }

/* --- token mark: the logo with its network in the corner ---------------------
   One component, four sizes. The badge is a fixed share of the mark and carries a
   ring in the surface colour, so it reads as a separate object and never crowds
   the label next to it. */
.tokmark { position:relative; display:inline-block; flex-shrink:0; width:var(--tm, 22px); height:var(--tm, 22px); }
.tokmark .tm-logo { display:block; width:100%; height:100%; border-radius:50%; box-shadow:var(--shadow-logo); background:var(--coin-unknown); }
.tokmark .tm-logo.letter { display:flex; align-items:center; justify-content:center; font-size:calc(var(--tm, 22px) * .42); font-weight:640; line-height:1; color:var(--on-v); letter-spacing:-.02em; }
.tokmark .tm-net { position:absolute; right:calc(var(--tm, 22px) * -0.06); bottom:calc(var(--tm, 22px) * -0.06); width:calc(var(--tm, 22px) * .42); height:calc(var(--tm, 22px) * .42); min-width:9px; min-height:9px; border-radius:50%; display:block; box-shadow:0 0 0 var(--tm-ring, 2px) var(--tm-on, var(--s4)); }
.tokmark--20 { --tm:20px; } .tokmark--24 { --tm:24px; } .tokmark--28 { --tm:28px; } .tokmark--36 { --tm:36px; }
/* the ring has to match whatever surface the mark sits on */
.tokbtn .tokmark { --tm-on:var(--s4); }
.tokrow .tokmark, .ordrow .tokmark { --tm-on:var(--s3); }
.amtbox .tokmark { --tm-on:var(--s4); }
.tmvio .tokmark { --tm-on:color-mix(in srgb, var(--v) 22%, var(--s2)); }

/* --- one execution-mode control: label + its own settings affordance --- */
.modechip { display:inline-flex; align-items:center; height:32px; padding:0 4px 0 10px; gap:8px; border-radius:9999px; border:1px solid color-mix(in srgb, var(--gold) 45%, transparent); background-image:var(--gradient-gold-soft); background-color:var(--s3); color:var(--gold); font-size:13px; font-weight:590; white-space:nowrap; }
.modechip > svg { flex-shrink:0; }
.modechip .mc-set { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:9999px; border:0; background:color-mix(in srgb, var(--gold) 18%, transparent); color:var(--gold); }
.modechip .mc-set:hover { background:color-mix(in srgb, var(--gold) 30%, transparent); }
.modechip--calm { border-color:var(--border-strong); background-image:none; background-color:var(--s3); color:var(--t2); }
.modechip--calm .mc-set { background:var(--s4); color:var(--t3); }

/* --- icons never drift off the text line ------------------------------------
   An inline SVG aligns to the baseline by default, which reads as crooked next to
   a label. Every place a label carries an icon becomes a flex line. */
.qrow > span:first-child, .ptbar .pt-main, .ptbar .pt-rank, .tokrow .nm .t,
.ordrow .pair, .toast, .modechip, .netchip, .amtbox .r1 > span, .tokmini,
.type-label:has(.tip), .qrow--key > span { display:inline-flex; align-items:center; gap:6px; }
.tip > svg, .pt-ico > svg, .toast .ti > svg { display:block; }
.btn > svg, .bigbtn > svg, .iconbtn > svg, .stepper button > svg { display:block; flex-shrink:0; }

/* --- quote breakdown --- */
.qlist { display:flex; flex-direction:column; border-radius:var(--r-lg); border:1px solid color-mix(in srgb, var(--border) 70%, transparent); background:var(--s3); padding:4px 14px; overflow:hidden; }
.qrow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0; font-size:13px; color:var(--t3); }
.qrow + .qrow { border-top:1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.qrow b { color:var(--t1); font-weight:590; font-size:13px; }
.qrow b.green { color:var(--green); }
.qrow b.red { color:var(--red); }
/* The one number the trader actually checks: what lands in the wallet. */
.qrow--key { margin:0 -14px; padding:12px 14px; border-top:1px solid var(--border) !important; background:color-mix(in srgb, var(--v) 7%, transparent); }
.qrow--key > span { color:var(--t2); font-weight:510; }
.qrow--key .kv { display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; }
.qrow--key .kv b { font-size:16px; font-weight:640; letter-spacing:-.01em; color:var(--t1); }
.qrow--key .kv small { font-size:11.5px; color:var(--t4); font-variant-numeric:tabular-nums; }

/* --- points row: the reward, what it changes, and how far to the next step ---
   A flat "≈ 5 pts" badge says nothing. The same strip can carry the delta, the
   rank it moves you to, and the distance to the next tier without growing. */
.ptbar { display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r-lg); border:1px solid color-mix(in srgb, var(--v) 32%, transparent); background:var(--v-subtle); background-image:var(--gradient-glow); flex-wrap:wrap; }
.ptbar .pt-ico { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:9999px; flex-shrink:0; background:color-mix(in srgb, var(--v) 30%, transparent); color:var(--v-text); }
.ptbar .pt-main { font-size:12.5px; color:var(--t2); white-space:nowrap; }
.ptbar .pt-main b { color:var(--v-text); font-weight:640; font-variant-numeric:tabular-nums; }
.ptbar .pt-rank { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--t3); font-variant-numeric:tabular-nums; white-space:nowrap; }
.ptbar .pt-rank s { text-decoration:line-through; color:var(--t4); }
.ptbar .pt-rank b { color:var(--t1); font-weight:590; }
.ptbar .pt-track { flex:1 1 60px; min-width:48px; height:6px; border-radius:9999px; background:color-mix(in srgb, var(--bg) 55%, transparent); overflow:hidden; }
.ptbar .pt-track i { display:block; height:100%; border-radius:9999px; background-image:var(--gradient-accent); }
.ptbar .pt-to { font-size:11px; color:var(--t4); white-space:nowrap; font-variant-numeric:tabular-nums; }
.ptbar .pt-to b { color:var(--t2); font-weight:590; }
@media (max-width:520px) { .ptbar .pt-hint { display:none; } }
/* milestone: the one trade that crosses a tier gets gold, like every other reward */
.ptbar--gold { border-color:color-mix(in srgb, var(--gold) 45%, transparent); background-image:var(--gradient-gold-soft); background-color:var(--s3); }
.ptbar--gold .pt-ico { background:color-mix(in srgb, var(--gold) 22%, transparent); color:var(--gold); }
.ptbar--gold .pt-main b, .ptbar--gold .pt-rank b { color:var(--gold); }
.ptbar--gold .pt-track i { background-image:var(--gradient-gold); }

/* --- stepper: numeric setting with a recommended value --- */
.stepper { display:inline-flex; align-items:center; height:40px; border-radius:var(--r-lg); border:1px solid var(--border); background:var(--s3); overflow:hidden; }
.stepper button { width:40px; height:100%; border:0; background:transparent; color:var(--t3); display:inline-flex; align-items:center; justify-content:center; }
.stepper button:hover { color:var(--t1); background:var(--s4); }
.stepper b { min-width:74px; text-align:center; font-size:14px; font-weight:590; color:var(--t1); font-variant-numeric:tabular-nums; }

/* --- modal / sheet --- */
.modalwrap { position:relative; border-radius:var(--r-2xl); overflow:hidden; border:1px solid color-mix(in srgb, var(--border) 60%, transparent); background:var(--bg); }
.modalwrap .behind { padding:20px; filter:blur(2px); opacity:.4; pointer-events:none; }
.backdrop { position:absolute; inset:0; background:var(--modal-backdrop); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal { width:100%; max-width:420px; border-radius:var(--r-2xl); border:1px solid var(--border-strong); background:var(--sheet-bg); background-image:var(--gradient-card); box-shadow:var(--shadow-menu); display:flex; flex-direction:column; max-height:82vh; max-height:82dvh; overflow:hidden; }
.modal--wide { max-width:520px; }
.modal-head { display:flex; align-items:flex-start; gap:12px; padding:18px 18px 12px; }
.modal-head h4 { margin:0; font-size:17px; font-weight:590; letter-spacing:-.01em; color:var(--t1); }
.modal-head p { margin:4px 0 0; font-size:13px; color:var(--t3); }
.modal-head .btn { margin-left:auto; flex-shrink:0; }
.modal-body { padding:0 18px 18px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; }
.modal-body--flush { padding:0; }
.modal-foot { padding:14px 18px 18px; display:flex; flex-direction:column; gap:9px; border-top:1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.modal-search { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--border); }
.modal-search input { flex:1; min-width:0; height:36px; border:0; background:transparent; outline:none; color:var(--t1); font:inherit; font-size:14.5px; }
.modal-search input::placeholder { color:var(--t4); }
.toklist { overflow-y:auto; padding:6px 18px 10px; max-height:340px; }

/* --- slippage: one control, presets + custom in a single track --- */
.slip { display:inline-flex; width:fit-content; max-width:100%; overflow-x:auto; align-items:center; gap:4px; padding:4px; border-radius:9999px; border:1px solid color-mix(in srgb, var(--border) 60%, transparent); background:var(--track-bg); box-shadow:var(--shadow-track); }
.slip button { height:32px; padding:0 14px; border:0; border-radius:9999px; background:transparent; color:var(--t3); font-size:13px; font-weight:510; font-variant-numeric:tabular-nums; white-space:nowrap; }
.slip button:hover { color:var(--t2); }
.slip button.active { background-image:var(--gradient-seg-active); color:var(--t1); box-shadow:var(--shadow-raised); }
.slip .custom { flex:0 0 96px; width:96px; height:32px; border:0; border-radius:9999px; background:transparent; outline:none; color:var(--t1); font:inherit; font-size:13px; text-align:center; font-variant-numeric:tabular-nums; }
.slip .custom::placeholder { color:var(--t4); }

/* --- the amount input owns the big type; any other field inside the panel does not --- */
.amtbox input.field { flex:0 0 auto; width:100%; height:40px; padding:0 12px; border-radius:var(--r-btn); border:1px solid var(--border); background:var(--s4); color:var(--t1); font-size:14px; font-weight:510; letter-spacing:0; }
.amtbox input.field::placeholder { color:var(--t4); font-weight:400; }

/* --- address chip + destination field --- */
.addrchip { align-self:flex-start; display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 10px 0 6px; border-radius:9999px; border:1px solid var(--border); background:var(--s4); font-family:var(--mono); font-size:12px; color:var(--t2); }
.addrchip i { width:18px; height:18px; border-radius:50%; display:block; }

/* --- order rows --- */
.ordrow { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r-lg); border:1px solid color-mix(in srgb, var(--border) 60%, transparent); background:var(--s3); flex-wrap:wrap; }
.ordrow .pair { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:590; color:var(--t1); }
.ordrow .pair i { width:20px; height:20px; border-radius:50%; display:block; }
.ordrow .ospec { flex:1 1 190px; min-width:0; font-size:12.5px; color:var(--t3); font-variant-numeric:tabular-nums; }
.fillbar { height:5px; border-radius:9999px; background:var(--s4); overflow:hidden; margin-top:7px; }
.fillbar i { display:block; height:100%; border-radius:9999px; background-image:var(--gradient-accent); }

/* --- toast --- */
.toast { display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--r-lg); border:1px solid var(--border-strong); background:var(--s4); box-shadow:var(--shadow-menu); font-size:13.5px; color:var(--t1); }
.toast .ti { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; flex-shrink:0; }
.toast--ok .ti { background:var(--green-subtle); color:var(--green); }
.toast--err .ti { background:var(--red-subtle); color:var(--red); }
.toast--wait .ti { background:var(--v-subtle); color:var(--v-text); }
.toast--wait svg { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg) } }

/* --- grid items must be allowed to shrink ------------------------------------
   Grid items default to min-width:auto, so one wide child — a 28px numeric input,
   a long mono address — makes the track wider than the page and the whole layout
   scrolls sideways. This is the systemic fix, not a per-page patch. */
.grid > *, .swapbox > *, .modal { min-width:0; }
.amtbox .r1, .amtbox .r2, .qrow, .ordrow { min-width:0; }
.amtbox .r2 input { width:100%; }
.ordrow .ospec, .qrow span:first-child { min-width:0; overflow-wrap:anywhere; }

@media (max-width:560px) {
  .modechip { height:30px; font-size:12px; }
  .qrow { font-size:12.5px; }
}
/* <<< swap layer <<< */