/* ==== fonts: self-hosted Inter (variable, latin + cyrillic) — no third-party request on the critical path ==== */
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/binance-dashboard/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400 700;font-display:swap;src:url(/binance-dashboard/fonts/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}

/* ==== C-A base ==== */
/* mirror of packages/ui-tokens/tokens.css — keep in sync (spec §5.3) */
:root {
  color-scheme: dark;
  --canvas:#111416; --surface-2:#1a2026; --surface-3:#242b32; --surface-4:#303840;
  --line:#303740; --line-soft:#20262c;
  --fg:#f4f7fa; --fg-muted:#c0c7d0; --fg-subtle:#8893a1; --fg-disabled:#5d6876;
  --brand-200:#dfbfff; --brand-300:#c17aff; --brand-400:#a83bff; --brand-500:#8f18e8; --brand-600:#7410bd;
  --success:#2fd66f; --danger:#ff5a4f; --warning:#f0b84a; --info:#8aa1ff; --accent:#28d7e5;
  --shadow-panel:0 24px 80px rgb(0 0 0 / .48); --shadow-popover:0 18px 48px rgb(0 0 0 / .52);
  /* chart roles — chart code reads ONLY these, never raw tokens */
  --viz-hero:var(--brand-400);      /* the account's performance line */
  --viz-identity:var(--brand-300);  /* single-hue bars: win rate, hold time */
  --viz-gain:var(--success); --viz-loss:var(--danger); /* polarity ONLY, always with +/− or a zero line */
  --viz-cost:#bf8526;      /* snapped from --warning: validator dark band L .48–.67 */
  --viz-activity:#6f86f2;  /* snapped from --info */
  --viz-bench:#0ea3b0;     /* snapped from --accent; reserved for a future BTC line */
  --viz-neutral:var(--fg-subtle); /* transfers, gross base, axis text */
  --viz-grid:rgb(255 255 255 / .06); --viz-zero:rgb(255 255 255 / .18);
  /* consumer skin */
  --panel-bg:linear-gradient(180deg, rgb(255 255 255 / .034), rgb(255 255 255 / .012) 44%, rgb(255 255 255 / .006)), #161b20;
  --panel-border:rgb(255 255 255 / .09);
  --card-bg:var(--panel-bg);
  --card-ring:inset 0 0 0 1px var(--panel-border);
  --card-shadow:0 18px 54px rgb(0 0 0 / .32), 0 1px 0 rgb(255 255 255 / .03);
  --radius:18px;
  --hair:rgb(255 255 255 / .08);
  --tint:rgb(255 255 255 / .06);
  --gain-tint:rgb(47 214 111 / .12); --loss-tint:rgb(255 90 79 / .12);
  --mast-h:64px;
  --font:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* spacing scale (§5.4) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
}

/* ---------- base / typography (§5.1) ---------- */
*{box-sizing:border-box}
html{background:var(--canvas)}
body{margin:0;background:var(--canvas);color:var(--fg);font-family:var(--font);font-size:14px;line-height:1.45;font-feature-settings:'cv11','ss01';-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
b{font-weight:600}
.tab{font-variant-numeric:tabular-nums}
.wrap{max-width:1900px;margin:0 auto;padding:0 44px}
.muted{color:var(--fg-muted)} .subtle{color:var(--fg-subtle)}
.gain{color:var(--success)} .loss{color:var(--danger)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:16px;height:16px;display:inline-block;vertical-align:middle;fill:none}
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--brand-400)}
[hidden]{display:none !important}
main.dim > :not(#live){opacity:.6}

/* ---------- masthead (§2.1) ---------- */
.mast{position:sticky;top:0;z-index:30;height:var(--mast-h);background:rgb(17 20 22 / .9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:4px solid #252525}
.mast .wrap{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-4)}
.mast-id{display:flex;align-items:center;gap:20px;min-width:0}
.mast-id > div:first-child{min-width:0}
.mast-alias{font-size:17px;font-weight:650;letter-spacing:-.015em;line-height:1.2;white-space:nowrap}
.mast-mini{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;opacity:0;transform:translateY(4px);pointer-events:none;color:var(--fg)}
.mast-mini.on{opacity:1;transform:none}
.mast-mini svg{width:80px;height:20px;overflow:visible}
.seg{display:inline-flex;background:rgb(255 255 255 / .07);border-radius:9999px;padding:3px;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .04)}
.seg button{font-size:13px;font-weight:600;color:var(--fg-muted);padding:7px 16px;border-radius:9999px;white-space:nowrap;transition:color .15s,background .15s}
.seg button[aria-pressed="true"]{background:var(--brand-500);color:#fff;box-shadow:0 0 0 1px rgb(255 255 255 / .08),0 8px 22px rgb(168 59 255 / .34)}
.mast-right{display:flex;justify-content:flex-end;min-width:0}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-muted);background:var(--tint);border-radius:9999px;padding:7px 13px;white-space:nowrap;min-width:0}
#pill-text{overflow:hidden;text-overflow:ellipsis}
.pill.flash{color:var(--brand-300)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 3px rgb(47 214 111 / .18);flex:0 0 auto}
.dot.pos{background:var(--brand-400);box-shadow:0 0 0 3px rgb(168 59 255 / .18)}
.dot.warn{background:var(--warning);box-shadow:0 0 0 3px rgb(240 184 74 / .18)}
.dot.err{background:var(--danger);box-shadow:0 0 0 3px rgb(255 90 79 / .18)}
.dot.idle{background:var(--fg-subtle);box-shadow:0 0 0 3px rgb(255 255 255 / .08)}
.loadbar{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;display:none}
.loadbar.on{display:block}
.loadbar::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:var(--brand-400);animation:loadbar 1.2s ease-in-out infinite}
@keyframes loadbar{to{left:100%}}
.banner{position:sticky;top:var(--mast-h);z-index:25;display:flex;align-items:center;justify-content:center;gap:var(--sp-3);flex-wrap:wrap;padding:10px var(--sp-4);font-size:13px;color:var(--fg);background:rgb(255 90 79 / .14);border-bottom:1px solid rgb(255 90 79 / .3)}
.banner button{color:var(--fg);background:var(--surface-3);border-radius:9999px;padding:4px 12px;font-weight:500}
.banner button:hover{background:var(--surface-4)}

/* ---------- chips, pills, badges (§5.4) ---------- */
.chips{display:inline-flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-muted);background:var(--tint);border-radius:9999px;padding:4px 10px;white-space:nowrap;line-height:1.3}
.chip.i{background:var(--surface-3);transition:background .15s}
.chip.i:hover{background:var(--surface-4)}
.vp{display:inline-block;padding:2px 8px;border-radius:9999px;font-weight:500}
.vp.g{background:var(--gain-tint)} .vp.r{background:var(--loss-tint)}
.side{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;background:var(--tint);border-radius:9999px;padding:3px 8px;color:var(--fg-muted);text-align:center;text-transform:uppercase}
.n{font-size:11px;font-weight:600;color:var(--fg-subtle);background:var(--tint);border-radius:9999px;padding:1px 5px;line-height:1.3}
.info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--fg-disabled);color:var(--fg-subtle);font-size:11px;font-weight:600;margin-left:6px;vertical-align:middle;font-style:normal;line-height:1}
.info[aria-expanded="true"]{color:var(--fg);border-color:var(--fg-subtle)}

/* ---------- cards & sections (§5.4) ---------- */
.card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--card-ring),var(--card-shadow);padding:var(--sp-5);min-width:0}
.card svg{max-width:100%}
.sec{padding:var(--sp-7) 0 0}
.sec.first{padding-top:var(--sp-6)}
.sec-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 16px;margin-bottom:var(--sp-4)}
.sec-head h2{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:0}
.group-h{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-subtle);display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.note{font-size:12px;color:var(--fg-subtle);margin:12px 0 0}
.nested{background:rgb(255 255 255 / .03);border-radius:12px;padding:14px 16px;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .05)}
html:not(.data) .after-data .card{display:none}   /* the Trades and List sections have no skeleton: their cards wait for the data */

/* ---------- rows & tables ---------- */
.row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);padding:9px 0;border-top:1px solid var(--hair);font-size:13px}
.row:first-of-type,.group-h + .row{border-top:0}
.row .k{color:var(--fg-muted)}
.row .v{font-size:14px;font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.row .v small{font-size:12px;font-weight:400;color:var(--fg-subtle)}
table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-subtle);text-align:right;padding:6px 10px 10px;border-bottom:1px solid var(--hair);white-space:nowrap}
th:first-child,td:first-child{text-align:left;padding-left:0}
th:last-child,td:last-child{padding-right:0}
td{padding:9px 10px;text-align:right;border-bottom:1px solid var(--hair);white-space:nowrap;color:var(--fg)}
td.k{color:var(--fg-muted)}
tr.muted td{color:var(--fg-muted)}
tr.total td{border-bottom:0;font-weight:600;background:linear-gradient(90deg,rgb(255 255 255 / .03),transparent)}
tr.total td:first-child{border-radius:8px 0 0 8px} tr.total td:last-child{border-radius:0 8px 8px 0}

/* ---------- controls ---------- */
.toggle{display:inline-flex;gap:2px;background:var(--surface-3);border-radius:9999px;padding:2px}
.toggle button{font-size:12px;font-weight:500;padding:4px 10px;border-radius:9999px;color:var(--fg-subtle);white-space:nowrap}
.toggle button[aria-pressed="true"]{background:var(--surface-4);color:var(--fg)}

/* ---------- hero (§2.2) ---------- */
/* `section.hero`, not `.hero`: the legend keys `i.lk.hero` / `i.sw.hero` reuse the class name as a colour modifier. */
section.hero{position:relative;padding:42px 0 28px;overflow:hidden}
section.hero::before{content:"";position:absolute;inset:0 0 auto;height:360px;background:linear-gradient(180deg,rgb(168 59 255 / .12),transparent 72%);pointer-events:none}
.hero .wrap{position:relative}
/* row 1: the legend over the chart; row 2: the chart card and, beside it, the symbols card — absolutely placed in its cell, so it never makes the row
   taller than the chart card: it is exactly as tall as the chart card, never taller, and its list scrolls */
.hero .band{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:12px 24px;align-items:start}
.hero-legend{grid-column:1;grid-row:1;min-width:0}
.lg-row{display:flex;align-items:center;flex-wrap:wrap;gap:6px 28px;min-height:32px;font-size:16px}
.lg-item{display:inline-flex;align-items:center;gap:8px;min-width:0}
.lg-dot{width:10px;height:10px;border-radius:50%;background:var(--viz-hero);flex:0 0 auto}
.lg-dot.sym{background:var(--warning)}
.lg-name{font-weight:500;color:var(--fg)}
.lg-money{margin-left:4px;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--fg);font-variant-numeric:tabular-nums}
.lg-money.gain{color:var(--success)}
.lg-money.loss{color:var(--danger)}
.lg-money.zero,.sym-net.zero{color:var(--fg-subtle)}
.lg-sub{font-size:14px;color:var(--fg-muted);white-space:nowrap}
.lg-x{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;color:var(--fg-muted);flex:0 0 auto}
.lg-x:hover{background:var(--tint);color:var(--fg)}
.lg-x .ic{width:14px;height:14px}
.hero-bnb{display:inline-block;margin:10px 0 0;font-size:12px;color:var(--fg-muted);background:rgb(240 184 74 / .12);border-radius:9999px;padding:4px 10px}
.chart-card{grid-column:1;grid-row:2;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:24px;box-shadow:var(--card-shadow);padding:28px 30px 18px;min-width:0}
.chart-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.readout{font-size:15px;color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;flex:1;line-height:1.55}
.readout b{color:var(--fg);font-weight:600}
.chart-wrap{position:relative}
html.data .chart-wrap{opacity:0}
html.data .chart-wrap.in{opacity:1}
#hero-chart{height:280px;width:100%;touch-action:pan-y;position:relative}
#under-chart{height:132px;width:100%;position:relative;touch-action:pan-y}
.sk-plot::after{content:"";position:absolute;left:0;right:64px;top:60%;height:1px;background:var(--viz-zero)}
.chart-fail{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--fg-subtle)}
.trough{position:absolute;font-size:12px;color:var(--fg-subtle);background:rgb(26 32 38 / .9);padding:1px 6px;border-radius:6px;pointer-events:none;white-space:nowrap;z-index:3;box-shadow:var(--card-ring)}
.under-label{position:absolute;left:0;top:2px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-subtle);z-index:2;pointer-events:none}
.legend{display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:12px;color:var(--fg-subtle);margin-top:12px}
.legend i{display:inline-block;vertical-align:middle;margin-right:6px}
.legend .lk{width:14px;height:3px;border-radius:2px}
.legend .lk.hero{background:var(--viz-hero)} .legend .lk.neutral{background:var(--viz-neutral)}
.legend .sw{width:10px;height:10px;border-radius:3px;vertical-align:-1px}
.legend .sw.dd{background:rgb(255 90 79 / .35)}
.legend .sw.ring{background:transparent;box-shadow:inset 0 0 0 2px var(--viz-neutral);border-radius:50%}
.legend .sw.gain{background:var(--viz-gain);opacity:.85} .legend .sw.loss{background:var(--viz-loss);opacity:.85}
.legend .sw.neutral{background:var(--viz-neutral);opacity:.6} .legend .sw.cost{background:var(--viz-cost);opacity:.85} .legend .sw.hero{background:var(--viz-hero)}
@media (min-width:1100px) and (max-width:1279px){   /* the chart card is 628–807 px here: a 14 px readout, ` · ARKM +$12.30` included, still fits beside the toggle */
  .readout{font-size:14px}
}
.sym-cell{grid-column:2;grid-row:2;align-self:stretch;position:relative;min-width:0}
.sym-card{position:absolute;inset:0;display:flex;flex-direction:column;min-width:0;background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:24px;box-shadow:var(--card-shadow);overflow:hidden}
.sym-title{margin:0;padding:20px 24px 10px;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--fg)}
.sym-list{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 10px 10px;scrollbar-width:thin;scrollbar-color:var(--surface-4) transparent}
.sym-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 14px;border-radius:14px;text-align:left}
.sym-row:hover{background:var(--tint)}
.sym-row[aria-pressed="true"]{background:rgb(240 184 74 / .12)}
.sym-row:focus-visible{box-shadow:inset 0 0 0 2px var(--brand-400)}
.sym-row:disabled{cursor:default}
.sym-row.low{opacity:.7}
.sym-row.low[aria-pressed="true"]{opacity:1}
.sym-av{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--fg-muted);font-size:13px;font-weight:600;line-height:1}
.sym-id,.sym-val{display:flex;flex-direction:column;min-width:0}
.sym-val{align-items:flex-end}
.sym-nm{font-size:13px;font-weight:600;line-height:1.35;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sym-sub,.sym-pct{font-size:12px;line-height:1.35;color:var(--fg-subtle);white-space:nowrap}
.sym-net{font-size:13px;font-weight:500;line-height:1.35;color:var(--fg);white-space:nowrap}
.sym-net.gain{color:var(--success)}
.sym-net.loss{color:var(--danger)}
.sym-empty{margin:0;padding:12px 14px;font-size:13px;color:var(--fg-subtle)}
.sym-sk{display:flex;align-items:center;gap:12px;height:52px;padding:0 14px}
.sym-sk .sk,.sym-sk .sk + .sk{margin:0}
.sym-sk .sk-w60{margin-left:auto}

/* ---------- key stats (§2.4) ---------- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.stats.solo{display:block}   /* the Trade stats card: one column of rows, no grid gap between them */
.stats .group-h{margin-bottom:8px}

/* ---------- periods (§2.5) ---------- */
.periods{display:grid;grid-template-columns:7fr 5fr;gap:var(--sp-5)}
.cal-head{margin-bottom:14px}
.cal-grid{display:flex;gap:var(--sp-5);align-items:flex-start;flex-wrap:wrap}
.cal{flex:0 0 auto}
.cal svg{display:block;overflow:visible}
.cal-side{flex:1 1 160px;min-width:150px}
.cal-side .row{padding:7px 0}
.cal-legend{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-subtle);margin-top:14px;flex-wrap:wrap}

/* ---------- risk (§2.6) ---------- */
.risk{display:block}
.rtile{background:rgb(255 255 255 / .03);border-radius:12px;padding:14px 16px;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .05)}
.rtile .l{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-subtle)}
.rtile .v{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:4px 0 2px;font-variant-numeric:proportional-nums;display:flex;align-items:center;gap:10px}
.rtile .s{font-size:12px;color:var(--fg-subtle)}
.cap{font-size:13px;color:var(--fg-muted);margin:20px 0 0;line-height:1.7}
.cap b{color:var(--fg);font-weight:500}
.cap span{white-space:nowrap}

/* ---------- structure (§2.7) ---------- */
#waterfall{width:100%;height:240px;display:block;overflow:visible}
.ls{display:grid;gap:22px;margin-top:8px}
.ls h4{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-subtle);margin:0 0 10px}

/* ---------- tabs ---------- */
:root{--tabs-h:48px}
.tabbar{position:sticky;top:var(--mast-h);z-index:20;height:var(--tabs-h);margin-top:var(--sp-4);background:rgb(17 20 22 / .9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 -1px 0 var(--hair)}
.tabbar .wrap{height:100%}
.tabs{display:flex;gap:var(--sp-6);height:100%}
.tabs button{position:relative;height:100%;padding:0 2px;font-size:15px;font-weight:600;color:var(--fg-subtle);white-space:nowrap;transition:color .15s}
.tabs button:hover{color:var(--fg-muted)}
.tabs button[aria-selected="true"]{color:var(--fg)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--brand-400)}
/* ---------- panel layouts ---------- */
.pair{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-7) var(--sp-5)}
.pair > div{display:flex;flex-direction:column;min-width:0}
.pair .card{flex:1}
.symbols-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--sp-5)}   /* the table (760 px min) gets the width; the concentration card is three rows */
.costs-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--sp-5)}
.timing-grid{display:grid;grid-template-columns:8fr 4fr;gap:var(--sp-5)}
.quality-grid{display:grid;grid-template-columns:6fr 3fr 3fr;gap:var(--sp-5)}
details.card > summary{cursor:pointer;font-size:13px;color:var(--fg-muted);list-style:none}
details.card > summary::-webkit-details-marker{display:none}
details.card > summary::before{content:"";display:inline-block;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-right:10px;transition:transform .15s}
details.card[open] > summary::before{transform:rotate(45deg)}
.sym-side{align-self:start}   /* two rows: the card hugs them instead of stretching down the symbol list */
.sym-side .row{padding:8px 0}
.drawer{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100%;background:var(--surface-2);box-shadow:var(--shadow-panel);z-index:40;padding:var(--sp-5);overflow:auto}
.drawer-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-3)}
.log-filters{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.log-actions{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-4)}
#footer{margin:var(--sp-7) 0 40px;font-size:12px;color:var(--fg-subtle);line-height:1.6}

/* ---------- tooltip & popover (§5.4) ---------- */
#tip{position:fixed;z-index:50;pointer-events:none;background:var(--surface-3);color:var(--fg);font-size:12px;line-height:1.45;padding:8px 10px;border-radius:10px;box-shadow:var(--card-ring),var(--shadow-popover);max-width:280px;opacity:0;transform:translateY(4px);font-variant-numeric:tabular-nums;white-space:pre-line;left:0;top:0}
#tip.on{opacity:1;transform:none}
.pop{position:absolute;z-index:45;width:240px;background:var(--surface-3);color:var(--fg);font-size:12px;line-height:1.45;padding:10px 12px;border-radius:10px;box-shadow:var(--card-ring),var(--shadow-popover)}
.pop b{display:block;font-size:12px;font-weight:600;margin-bottom:4px}
.pop p{margin:0;color:var(--fg-muted)}

/* ---------- skeleton (§6.1) ---------- */
.sk{display:inline-block;vertical-align:middle;height:12px;max-width:100%;border-radius:6px;background:linear-gradient(90deg,var(--surface-3) 0%,rgb(255 255 255 / .06) 50%,var(--surface-3) 100%);background-size:200% 100%;animation:sk 1.6s linear infinite}
.sk + .sk{margin-left:0;margin-top:6px}
.sk-h13{height:13px} .sk-h22{height:22px} .sk-h72{height:72px;border-radius:12px} .sk-av{width:28px;height:28px;border-radius:50%;flex:0 0 auto}
.sk-w60{width:60px} .sk-w80{width:80px} .sk-w120{width:120px} .sk-w220{width:220px} .sk-w280{width:280px} .sk-w420{width:420px}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
html.data .sk{animation:none}
td > .sk{width:100%}
td > .sk-w60{max-width:60px} td > .sk-w120{max-width:120px}

/* ---------- motion (§5.6) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(8px);transition:opacity .22s ease-out,transform .22s ease-out}
  html.js.warm .reveal{transition-duration:.11s}
  html.js .reveal.in{opacity:1;transform:none}
  .chart-wrap{transition:opacity .4s ease-out}
  .mast-mini{transition:opacity .16s,transform .16s}
  #tip{transition:opacity .12s,transform .12s}
  .pill{transition:color .6s}
  .seg button{transition:color .15s,background .15s}
  .chip.i{transition:background .15s}
  .sym-row,.lg-x{transition:background .12s}
}
@media (prefers-reduced-motion:reduce){
  .sk{animation:none}
  .loadbar::after{animation:none;left:0;width:100%;opacity:.5}
}

/* ---------- responsive (§7) ---------- */
@media (max-width:1279px){
  .periods{grid-template-columns:minmax(0,1fr)}
  /* the (invisible) mini-header reserves room in the left column; below 1280 px the identity block yields gracefully instead of running under it */
  .mast-alias{overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:1099px){
  /* below the two-column width the symbols card goes under the chart (the page's other grids stack at 1100 px too) */
  .hero .band{grid-template-columns:minmax(0,1fr);gap:12px}
  .hero-legend,.chart-card{grid-column:1;grid-row:auto}
  .sym-cell{grid-column:1;grid-row:auto;margin-top:8px}
  .sym-card{position:static;max-height:320px}
}
@media (max-width:1100px){
  .pair,.symbols-grid,.costs-grid,.timing-grid,.quality-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  :root{--mast-h:92px}
  .tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .tabs button{font-size:14px;overflow:hidden;text-overflow:ellipsis}
  .wrap{padding:0 var(--sp-4)}
  .mast .wrap{grid-template-columns:minmax(0,max-content) minmax(0,1fr);grid-template-rows:auto auto;gap:6px 12px;padding-top:8px;padding-bottom:8px;align-items:center}
  .mast-id{grid-column:1;grid-row:1} .mast-right{grid-column:2;grid-row:1}
  .mast-mini{display:none}
  .mast-center{grid-column:1 / -1;grid-row:2}
  .seg{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
  .seg button{padding:7px 4px;text-align:center;font-size:12px}
  section.hero{padding:28px 0 var(--sp-4)}
  .chart-card{padding:20px 16px 14px}
  .sym-title{padding:16px 16px 6px}
  .sym-list{padding:0 6px 8px}
  .lg-x{width:32px;height:32px}
  #hero-chart{height:200px} #under-chart{height:74px}
  .sec{padding-top:var(--sp-6)}
  .card{padding:var(--sp-4)}
  .stats{grid-template-columns:minmax(0,1fr);gap:16px}
  .cal-order{order:-1}
  .periods{display:flex;flex-direction:column}
  .chart-top{flex-direction:column;align-items:flex-start}
  .readout{white-space:normal;line-height:1.5;min-height:3em}   /* two lines, reserved: the plot does not move while the readout changes (it grows by ` · ARKM +$12.30` with a symbol picked) */
  .drawer{top:auto;left:0;right:0;width:auto;max-height:80vh;border-radius:16px 16px 0 0}
  /* skeleton tables only (while their bars are still in the markup): show as many columns as fit 311 px; real rows (C-C) bring their own rules */
  #periods-table:has(.sk) th:nth-child(n+5),#periods-table:has(.sk) td:nth-child(n+5){display:none}
  #episodes:has(.sk) th:nth-child(n+4),#episodes:has(.sk) td:nth-child(n+4){display:none}
}
@media (max-width:480px){
  .pill-when{display:none}   /* `Live` always fits the phone pill; the `· updated 1 min ago` part is desktop-only */
}
/* ==== C-A base end ==== */
/* ==== C-A live ==== */
.pos-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr));gap:var(--sp-4)}
.nested.pos{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;font-size:13px;color:var(--fg-muted);min-width:0;padding:18px 20px 16px}
.pos-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;min-width:0}
.pos-title{display:flex;align-items:center;gap:10px;min-width:0}
.pos-title b{font-size:22px;line-height:1.1;color:var(--fg);letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pos-pnl{display:grid;gap:2px;text-align:right;justify-items:end;min-width:150px}
.pos-pnl span,.pos-metric span,.liq-copy span{font-size:12px;color:var(--fg-subtle)}
.pos-pnl b{font-size:25px;line-height:1.05;font-weight:700;letter-spacing:-.03em;color:var(--fg)}
.pos-pnl small,.pos-metric small,.liq-copy small{font-size:12px;color:var(--fg-subtle)}
.pos-pnl.gain b{color:var(--success)} .pos-pnl.loss b{color:var(--danger)} .pos-pnl.zero b{color:var(--fg)}
/* the side in its own pair of hues (blue / orange), so green / red stay the outcome's colours next to it */
.side.long{background:rgb(57 135 229 / .18);color:#8ebbff}
.side.short{background:rgb(217 89 38 / .18);color:#ffa26e}
.pos-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pos-metric{display:grid;gap:3px;min-width:0}
.pos-metric b{font-size:15px;line-height:1.2;color:var(--fg);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.liq{display:grid;grid-template-columns:minmax(150px,auto) minmax(160px,1fr);align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.liq-copy{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;gap:8px;min-width:0}
.liq-copy b{font-size:15px;line-height:1.2;color:var(--fg);font-weight:600}
.liq-meter{height:6px;border-radius:9999px;background:var(--surface-4);overflow:hidden}
.liq-fill{display:block;height:100%;border-radius:9999px;background:var(--fg-subtle)}
.liq.ok .liq-meter{background:rgb(47 214 111 / .18)} .liq.ok .liq-fill{background:var(--success)}
.liq.warn .liq-meter{background:rgb(240 184 74 / .18)} .liq.warn .liq-fill{background:var(--warning)}
.liq.bad .liq-meter{background:rgb(255 90 79 / .18)} .liq.bad .liq-fill{background:var(--danger)}
.pos-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;min-width:0}
.pos-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--fg-subtle);white-space:nowrap}
.pos-adl{display:inline-flex;align-items:center;gap:6px}
.adl{display:inline-flex;gap:3px;align-items:center}
.adl i{display:block;width:6px;height:6px;border-radius:50%;background:var(--surface-4)}
.adl i.on{background:var(--fg-subtle)}
.pos-orders{justify-content:flex-end;min-width:0}
.chip.warn{background:rgb(240 184 74 / .12)}
#live-orders:not(:empty),#live-liq:not(:empty){margin-top:var(--sp-4)}
.liq-table{background:rgb(255 90 79 / .06);border-radius:12px;padding:4px 12px 8px}
@media (max-width:860px){
  .pos-grid{grid-template-columns:minmax(0,1fr)}
  .pos-top{align-items:stretch}
  .pos-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .liq{grid-template-columns:minmax(0,1fr);gap:8px}
  .pos-foot{align-items:flex-start;flex-direction:column}
  .pos-orders{justify-content:flex-start}
  /* phone/tablet: five nowrap columns need ~400 px, the card gives 287 — stack each liquidation as two lines (symbol · kind / time · qty @ price) */
  .liq-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .liq-table table,.liq-table tbody{display:block}
  .liq-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--hair)}
  .liq-table tr:last-child{border-bottom:0}
  .liq-table td{display:block;padding:0;border:0;white-space:normal;overflow-wrap:anywhere;text-align:left}
  .liq-table td:nth-child(2){grid-column:1;grid-row:1;color:var(--fg);font-weight:600}
  .liq-table td:nth-child(3){grid-column:2 / 4;grid-row:1;text-align:right}
  .liq-table td:nth-child(1){grid-column:1;grid-row:2;color:var(--fg-subtle)}
  .liq-table td:nth-child(4){grid-column:2;grid-row:2;text-align:right}
  .liq-table td:nth-child(5){grid-column:3;grid-row:2;text-align:right}
  .liq-table td:nth-child(5)::before{content:"@ ";color:var(--fg-subtle)}
}
@media (max-width:520px){
  .nested.pos{padding:16px}
  .pos-top{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .pos-pnl{justify-items:start;text-align:left;min-width:0}
  .pos-title b{font-size:21px}
}
/* ==== C-B charts ==== */
#hero-chart,#under-chart{cursor:crosshair}
#chart-wrap.pinned #hero-chart,#chart-wrap.pinned #under-chart{cursor:default}
.readout:empty::before{content:"\00a0"}
section.hero{scroll-margin-top:var(--mast-h)}   /* focusDate() scrolls #hero into view: keep the legend and the chart out from under the sticky masthead */
/* ==== C-B hero ==== */
/* skeleton → data without a layout jump (§6.1): the readout reserves the two lines it wraps to on a ≤ 400 px phone while its bar is still in the markup */
@media (max-width:400px){
  .readout:has(.sk){min-height:3em}
}
/* ==== C-C stats ==== */
/* a row whose value does not fit beside its label (a long value in a narrow column or on a phone) drops to its own right-aligned line instead of
   running into the next column or past the card */
.stats .row{flex-wrap:wrap;row-gap:2px}
.stats .row .k{display:inline-flex;align-items:center;gap:0;min-width:0}
.stats .row .v{margin-left:auto;white-space:normal}
.stats .row .v.gain{color:var(--success)} .stats .row .v.loss{color:var(--danger)}
.stats .row .v.zero,.stats .row .v .dash{color:var(--fg-subtle)}
.stats .row .v .dash{font-weight:400}
/* every (i) gets a 24 px hit area around its 16 px circle */
.info{position:relative}
.info::after{content:"";position:absolute;inset:-5px}
/* ==== C-C periods ==== */
/* 8 columns in the 647 px of a 7/12 card (spec risk 6): measured with real rows the §5.4 paddings need 744 px. This table uses 6 px cell
   padding; from 1280 px (the only width where the card is that narrow) the seven data columns shrink to their content, so the long headers
   (`Win rate`, `Green days`) wrap and the period label keeps its line. Never a horizontal scroll. */
#periods-table th,#periods-table td{padding-left:6px;padding-right:6px}
#periods-table th:last-child,#periods-table td:last-child{padding-right:0}
#periods-table th:first-child,#periods-table td.k{padding-left:22px}   /* room for the chevron, so the header and every label share one edge */
#periods-table th{white-space:normal;line-height:1.25;vertical-align:bottom}
#periods-table td.k{position:relative;white-space:normal}
#periods-table td.k .nw{white-space:nowrap}
#periods-table td.k .sub{color:var(--fg-subtle)}
.exp{position:absolute;left:-4px;top:50%;margin-top:-12px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;color:var(--fg-subtle)}
.exp:hover{background:var(--surface-3);color:var(--fg)}
.exp[aria-expanded="true"] .ic{transform:rotate(180deg)}
tr.detail td{padding:0 0 10px 22px;text-align:left;white-space:normal;color:var(--fg-muted);font-size:12px;line-height:1.6}
tr.detail td b{font-weight:500;color:var(--fg);white-space:nowrap}
tr.detail td .ph{display:none}
tr.detail[hidden]{display:none}
#periods-table .dash{color:var(--fg-subtle)}
#periods-table .zero{color:var(--fg-subtle)}
/* the total row's wash is one gradient across the row (§2.5); the base rule paints one per cell, and it restarts in every cell */
#periods-table tr.total td{background:none}
#periods-table tr.total{background:linear-gradient(90deg,rgb(255 255 255 / .03),transparent);border-radius:8px}
@media (prefers-reduced-motion:no-preference){
  .exp .ic{transition:transform .15s}
}
@media (min-width:1280px){
  #periods-table th:nth-child(n+2){width:1%}
}
@media (max-width:860px){
  #periods-table th:nth-child(n+5),#periods-table td.c:nth-child(n+5){display:none}
  #periods-table th:nth-child(4),#periods-table td:nth-child(4){padding-right:0}   /* Fees closes the visible row: flush with the card's content edge, like Max DD on desktop */
  tr.detail td .ph{display:inline}
}
/* phone: Period + Net + Return + Fees must share 311 px (256 at 320). At 13 px they need 338, so the table steps down to 12 px with tighter
   cells and pills; a long label wraps between its segments, and below 341 px inside them too. */
@media (max-width:440px){
  #periods-table{font-size:12px}
  #periods-table th,#periods-table td{padding-left:4px;padding-right:4px}
  #periods-table th:first-child,#periods-table td.k{padding-left:20px}
  #periods-table .vp{padding:2px 5px}
}
@media (max-width:340px){
  #periods-table th,#periods-table td{padding-left:3px;padding-right:3px}
  #periods-table th:first-child,#periods-table td.k{padding-left:18px}
  #periods-table .vp{padding:2px 4px}
  #periods-table td.k .nw{white-space:normal}
}
/* ==== C-C calendar ==== */
.cal svg{display:block;overflow:visible;max-width:100%}
.cal text.cal-lab{font-size:11px;fill:var(--fg-subtle);font-family:var(--font)}
.cal rect.day{outline:none;stroke:transparent;stroke-width:1}
.cal rect.day:hover{stroke:rgb(255 255 255 / .35);cursor:pointer}
.cal rect.day:focus-visible{stroke:var(--brand-400);stroke-width:2;cursor:pointer}   /* SVG takes no box-shadow: the page's focus colour as a stroke (§4.12) */
.cal rect.ring{fill:none;stroke:var(--fg-subtle);stroke-width:2;pointer-events:none}
.cal circle.idle{fill:var(--fg-disabled);pointer-events:none}
.cal text.cal-num{font-size:11px;fill:var(--fg-muted);font-family:var(--font);font-variant-numeric:tabular-nums;pointer-events:none}   /* the day of the month; the rect under it owns hover and focus */
.cal text.cal-num.on{fill:var(--fg)}
.cal text.cal-num.idle{fill:var(--fg-subtle)}
.cal-empty{font-size:13px;color:var(--fg-subtle);margin:0}
/* legend swatches use the same roles as the cells: --viz-loss / --viz-gain at the three bin alphas */
.cal-legend i.sw{display:inline-block;width:12px;height:12px;border-radius:3px}
.cal-legend .l85,.cal-legend .g85{opacity:.85} .cal-legend .l50,.cal-legend .g50{opacity:.5} .cal-legend .l25,.cal-legend .g25{opacity:.25}
.cal-legend .l85,.cal-legend .l50,.cal-legend .l25{background:var(--viz-loss)}
.cal-legend .g85,.cal-legend .g50,.cal-legend .g25{background:var(--viz-gain)}
.cal-legend .flat{background:var(--surface-3)}
.cal-legend .idle{position:relative;background:var(--surface-3)}
.cal-legend .idle::after{content:"";position:absolute;left:5px;top:5px;width:2px;height:2px;border-radius:50%;background:var(--fg-disabled)}
.cal-legend .ring{background:transparent;box-shadow:inset 0 0 0 2px var(--fg-subtle)}
.cal-legend .sep{margin:0 2px}
@media (prefers-reduced-motion:no-preference){
  .cal rect.day{transition:stroke .12s}
}
/* ==== C-C risk ==== */
#episodes th.ph,#episodes td.ph{display:none}
#episodes tr.detail{display:none}
#episodes .dash{color:var(--fg-subtle)}
#episodes td.empty{color:var(--fg-subtle);text-align:left;padding-left:0}
@media (min-width:861px){
  #episodes th:nth-child(2),#episodes td:nth-child(2){text-align:left;padding-left:0}   /* Period (phone-only) is child 1: on desktop Peak opens the row */
}
#episodes .nw{white-space:nowrap}
/* phone / tablet-portrait: Period · Recovered · Depth $ · Depth % + chevron (Length and Recovery open under the row) — the same pattern as the
   periods table; with every header word on one line six columns need 502 px, the card has 311 */
@media (max-width:860px){
  #episodes th.ph,#episodes td.ph{display:table-cell;padding-left:22px}
  #episodes td.ph{position:relative;white-space:normal}
  #episodes th.d,#episodes td.d,#episodes th.x,#episodes td.x{display:none}
  #episodes tr.detail:not([hidden]){display:table-row}
  #episodes th,#episodes td{padding-left:6px;padding-right:6px}
  #episodes th.ph,#episodes td.ph{padding-left:22px}
  #episodes th:nth-child(6),#episodes td:nth-child(6){padding-right:0}   /* Depth % closes the visible row */
}
@media (max-width:440px){
  #episodes{font-size:12px}
  #episodes th,#episodes td{padding-left:4px;padding-right:4px}
  #episodes th.ph,#episodes td.ph{padding-left:20px}
}
@media (max-width:360px){
  .cap span{white-space:normal}   /* the first capital fact is 296 px long: a 256 px phone card lets it wrap instead of poking out */
}
@media (max-width:340px){
  #episodes th,#episodes td{padding-left:3px;padding-right:3px}
  #episodes th{letter-spacing:0}
  #episodes th.ph,#episodes td.ph{padding-left:18px}
}
/* ==== C-C structure ==== */
/* a chip inside a `.group-h` heading would inherit its uppercase tracking (calendar, waterfall, long/short): chips are sentence case everywhere else */
.group-h .chip,.group-h .chips{text-transform:none;letter-spacing:0;font-weight:400}
#waterfall text{font-family:var(--font)}
#waterfall text.cap{font-size:13px;font-weight:500;fill:var(--fg)}
#waterfall text.cat{font-size:12px;fill:var(--fg-subtle)}
#waterfall line.zero,#waterfall line.conn{stroke:var(--viz-zero)}
#waterfall rect.hit{fill:transparent}
#waterfall g.step{outline:none}
#waterfall g.step:focus-visible rect.hit{stroke:var(--brand-400);stroke-width:2}   /* SVG takes no box-shadow: the page's focus colour as a ring round the column (§4.12) */
#waterfall path.bar.neutral{fill:var(--viz-neutral)} #waterfall path.bar.cost{fill:var(--viz-cost)} #waterfall path.bar.hero{fill:var(--viz-hero)}
#waterfall g.step:hover path.bar,#waterfall g.step:focus-visible path.bar{opacity:1}
.lsr{display:grid;grid-template-columns:64px minmax(0,1fr) 110px;align-items:center;gap:12px;padding:6px 0;min-height:24px}
.lsr .side{min-width:0}
.bar-track{position:relative;height:12px}
.bar-track .b{position:absolute;top:0;height:12px;border-radius:0 4px 4px 0}
.bar-track .b.neg{border-radius:4px 0 0 4px}
.bar-track .b.g{background:var(--viz-gain);opacity:.85} .bar-track .b.r{background:var(--viz-loss);opacity:.85}
.bar-track .b.id{background:var(--viz-identity);opacity:.7}
.bar-track .z{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--viz-zero)}
.lsr .val{font-size:13px;font-variant-numeric:tabular-nums;color:var(--fg);text-align:right;white-space:nowrap}
.lsr .val small{color:var(--fg-subtle);font-size:12px}
.lsr .val.low{color:var(--fg-muted)}
.lsr .val .n{margin-left:4px}
.ls-empty{font-size:13px;color:var(--fg-subtle);padding:6px 0;margin:0}
@media (prefers-reduced-motion:no-preference){
  #waterfall path.bar{transition:opacity .12s}
}
@media (max-width:860px){
  #waterfall{height:180px}
  .lsr{grid-template-columns:56px minmax(0,1fr) 100px}
}
/* ==== C-D symbols ==== */
.sym-empty{font-size:13px;color:var(--fg-subtle);margin:0}
.sym-side .row .v.gain{color:var(--success)} .sym-side .row .v.loss{color:var(--danger)}
@media (max-width:860px){
  .symbols-grid .sym-side{order:-1}
}
/* ==== C-D drawer ==== */
/* .drawer base (fixed right 420 px, surface-2, --shadow-panel; bottom-sheet ≤ 860) is C-A; this block styles the content and the 200 ms motion (§5.6). */
/* The drawer is a frame, #drawer-body scrolls: the × is absolutely positioned in the frame, so it stays put while a long trip list scrolls
   (inside a scrolling drawer it scrolled away), and the scrollbar sits at the panel's edge instead of inside its padding. */
.drawer{display:flex;flex-direction:column;visibility:visible;padding:0;overflow:hidden}
#drawer-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
#drawer-body > *{min-width:0;flex:0 0 auto}
.drawer-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-right:40px}
.drawer-head h3{margin:0;font-size:20px;font-weight:600;letter-spacing:-.015em}
.drawer-curve{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.drawer-curve .note{margin:0}
.drawer-spark{display:block;width:160px;height:32px;overflow:visible;flex:0 0 auto}
.drawer .rows .row{padding:8px 0}
.drawer .rows .row .v.low{color:var(--fg-muted)}
.drawer .rows .row .v.zero{color:var(--fg-subtle)}
.drawer-trips table{font-size:12px}
.drawer-trips{margin-top:var(--sp-2)}
.drawer-trips th,.drawer-trips td{padding:6px 5px}   /* five columns in the 372 px of the content box (measured: 8 px cells need 376–386) */
.drawer-trips tr.open td,.drawer-trips tr.trunc td{color:var(--fg-subtle)}
.drawer-trips .tg{width:12px;height:12px;padding:6px;margin:-6px 0 -6px -6px;color:var(--fg-subtle);vertical-align:-2px;display:inline-block;box-sizing:content-box}   /* a 24 px target around the 12 px glyph, same footprint as before (12 + 6 gap) */
.drawer-trips .note .tg{padding:0;margin:0 4px 0 0;box-sizing:border-box;vertical-align:-2px}   /* the footnote's glyphs are decoration, not marks */
.drawer-trips .side{font-size:11px;padding:2px 6px}
@media (max-width:860px){
  #drawer-body{padding:var(--sp-4)}   /* the sheet's content box is as wide as a card's: 343 at 375 */
}
@media (max-width:480px){
  .drawer-trips .hd{display:none}   /* four columns on a phone (§7), like the other tables */
}
@media (max-width:340px){
  .drawer-trips th{white-space:normal;line-height:1.25;vertical-align:bottom}   /* 320: the 288 px box is narrower than the one-line headers */
  .drawer-trips th,.drawer-trips td{padding-left:3px;padding-right:3px}
}
@media (prefers-reduced-motion:no-preference){
  .drawer{transition:transform .2s ease-out,opacity .2s ease-out,visibility 0s}
  .drawer[hidden]{display:flex !important;visibility:hidden;opacity:0;transform:translateX(24px);pointer-events:none;transition:transform .2s ease-out,opacity .2s ease-out,visibility 0s .2s}
}
@media (prefers-reduced-motion:no-preference) and (max-width:860px){
  .drawer[hidden]{transform:translateY(24px)}
}
/* ==== C-D symtable ==== */
/* The only table on the page allowed to scroll horizontally (§7): sticky first column + a fade on the right while there is more to see. */
.symtable-wrap{position:relative;margin-top:var(--sp-3)}
.symtable-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:24px;background:linear-gradient(90deg,transparent,var(--surface-2));pointer-events:none}
.symtable-wrap.end::after{opacity:0}
.symtable{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.symtable table{min-width:760px;border-collapse:separate;border-spacing:0}   /* separate: a sticky cell keeps its own bottom hairline */
.symtable tr.p > td:first-child,.symtable thead th:first-child{position:sticky;left:0;z-index:1;padding-right:12px}
.symtable-wrap.scrolled tr.p > td:first-child,.symtable-wrap.scrolled thead th:first-child{background:var(--surface-2);box-shadow:inset -1px 0 0 var(--hair)}   /* opaque (and ruled off) only while columns slide under it — at rest it blends into the card's gradient */
.symtable th button{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:inherit;white-space:nowrap;display:inline-flex;align-items:center;padding:5px 0;margin:-5px 0}   /* 16 px of text, 26 px to hit — without changing the header's height */
.symtable th .ic{width:12px;height:12px;margin-left:4px;opacity:.45;color:var(--fg-subtle)}
.symtable th[aria-sort="ascending"],.symtable th[aria-sort="descending"]{color:var(--fg)}
.symtable th[aria-sort="ascending"] .ic,.symtable th[aria-sort="descending"] .ic{opacity:1;color:var(--fg)}
.symtable th[aria-sort="ascending"] .ic{transform:rotate(180deg)}
.symtable .symlink{color:var(--fg);font-weight:500;padding:3px 2px;margin:-3px -2px}   /* 19 px of text (21 px for `INJ`), 25 px to hit each way */
.symtable .symlink:hover{text-decoration:underline}
.symtable td.zero{color:var(--fg-subtle)}
.symtable .exp{display:none}
.symtable tr.detail{display:none}
@media (max-width:860px){
  .symtable table{min-width:0}
  .symtable th.x,.symtable td.x{display:none}
  .symtable .exp{display:inline-flex}
  .symtable tr.p > td:first-child,.symtable thead th:first-child{padding-left:22px}   /* room for the chevron, so the header and every symbol share one edge */
  .symtable tr.detail:not([hidden]){display:table-row}
  .symtable tr.detail td{padding-left:22px}
}
/* ==== C-D costs ==== */
.costs-grid .card{min-width:0}
/* a fact's small text (`Maker 0.02% / Taker 0.05%`) wraps with its row instead of leaving the card */
#fee-facts .row{flex-wrap:wrap;row-gap:2px}
#fee-facts .row .k{display:inline-flex;align-items:center;min-width:0}
#fee-facts .row .v{margin-left:auto;white-space:normal;min-width:0}
#fee-facts .row .v small{margin-left:4px}
#fee-facts .row .v .dash{color:var(--fg-subtle)}
.group-h.mt{margin-top:var(--sp-5)}
.mt-labels{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--fg-muted);margin-bottom:6px;font-variant-numeric:tabular-nums}
.mt-labels i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--viz-cost)}
.mt-labels i.mk{opacity:.45}
.mt-labels i.tk{opacity:.85}
.mt-svg{display:block;width:100%;height:12px;overflow:visible}
.mt-svg path.mk{fill:var(--viz-cost);opacity:.45}
.mt-svg path.tk{fill:var(--viz-cost);opacity:.85}
.mt-svg .hit{fill:transparent}
.mt-svg g{outline:none}
.mt-svg g:hover path,.mt-svg g:focus-visible path{opacity:1}
.mt-svg g:focus-visible .hit{stroke:var(--brand-400);stroke-width:2}
.whatif{display:grid;gap:var(--sp-3)}
#whatif{align-self:start}
.whatif .rtile .v{font-size:22px}
.whatif .rtile .s{line-height:1.45}
.whatif .rtile .chip{margin-top:8px}
.fund{margin-top:var(--sp-5)}
.fund summary{cursor:pointer;list-style:none;font-size:13px;color:var(--fg-muted);display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-height:24px}
.fund summary::-webkit-details-marker{display:none}
.fund summary::before{content:"";display:inline-block;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);flex:0 0 auto}
.fund[open] summary::before{transform:rotate(45deg)}
.fund summary .tab{margin-left:auto;color:var(--fg)}
.fund .row{padding:6px 0;font-size:12px}
.fund .note{margin-top:8px}
@media (prefers-reduced-motion:no-preference){
  .fund summary::before{transition:transform .15s}
  .mt-svg path{transition:opacity .12s}
}
/* ==== C-D timing ==== */
/* Timing: columns ≤ 20 px (28 weekday), rx 4, gain/loss 85 %, zero hairline, 3 $ ticks 12 px fg-subtle, count panel 80 px --viz-activity 55 %. */
.timing-grid .card{min-width:0}
#hour-svg,#weekday-svg{display:block;width:100%;height:270px;overflow:visible}
.timing-grid text{font-size:12px;fill:var(--fg-subtle);font-family:var(--font)}
.timing-grid text.lab{fill:var(--fg);font-weight:500}
.timing-grid text.lab.low{fill:var(--fg-muted)}
.timing-grid line.zl{stroke:var(--viz-zero)}
.timing-grid line.gl{stroke:var(--viz-grid)}
.timing-grid .hit{fill:transparent}
.timing-grid .bk{outline:none}
.timing-grid .bk:hover .hit,.timing-grid .bk:focus-visible .hit{fill:rgb(255 255 255 / .04)}
.timing-grid .bk:hover .pn,.timing-grid .bk:focus-visible .pn{opacity:1}
.timing-grid .bk:hover .ct,.timing-grid .bk:focus-visible .ct{opacity:.85}
.timing-grid .bk:focus-visible .hit{stroke:var(--brand-400);stroke-width:2}
#timing-legend{margin-top:var(--sp-3)}
.legend .lk.pol{background:linear-gradient(90deg,var(--viz-gain) 50%,var(--viz-loss) 50%);opacity:.85}
.legend .lk.act{background:var(--viz-activity);opacity:.55}
@media (prefers-reduced-motion:no-preference){.timing-grid .pn,.timing-grid .ct{transition:opacity .12s}}
/* ==== C-E quality ==== */
/* Trade quality: histogram 6/12 · avg loss vs avg win and breakeven 3/12 · hold time 3/12. Columns ≤ 18 px, rx 4 on the data end only
   (BD.shapes.vbar, like Timing), gain / loss 85 %, one zero hairline, one mean hairline; text ≥ 11 px. */
.quality-grid .card{min-width:0}
/* The histogram's plot takes the card's spare height, 200 → 320 px; a stacked layout stays at 200 (160 on a phone). */
.quality-grid > .card:first-child{display:flex;flex-direction:column}
#hist{flex:1 1 200px;width:100%;min-height:200px;max-height:320px;display:block;overflow:visible}
#holdhist{width:100%;height:120px;display:block;overflow:visible;margin-top:4px}
.hist-g{outline:none}
.hist-hit{fill:transparent}
.hist-col{opacity:.85}
.hist-col.loss{fill:var(--viz-loss)} .hist-col.gain{fill:var(--viz-gain)}
.hh-col{fill:var(--viz-identity);opacity:.7}
.hh-col.gain{fill:var(--viz-gain);opacity:.85} .hh-col.loss{fill:var(--viz-loss);opacity:.85}   /* the bin's net decides the colour; the count is the height */
.hist-g:hover .hist-col,.hist-g:focus-visible .hist-col,.hist-g:hover .hh-col,.hist-g:focus-visible .hh-col{opacity:1}
.hist-g:focus-visible .hist-hit{stroke:var(--brand-400);stroke-width:2}
.hist-zero{stroke:var(--viz-zero);stroke-width:1}
.hist-mean{stroke:var(--fg-muted);stroke-width:1}
.hist-txt{fill:var(--fg-subtle);font-size:11px;font-family:var(--font);font-variant-numeric:tabular-nums}
.hist-txt.cnt{fill:var(--fg-muted);font-weight:600}
.hist-txt.mean{fill:var(--fg);font-weight:500;font-size:12px}
.hist-zero,.hist-mean,.hist-txt{pointer-events:none}   /* hover and taps reach the column's hit rect underneath */
#breakeven{margin-top:var(--sp-5)}
.meter{position:relative;height:10px;border-radius:9999px;background:var(--surface-4);overflow:hidden}
.meter .fill{position:absolute;top:0;bottom:0;left:0;background:var(--viz-identity);opacity:.75;border-radius:9999px}
.be-track{position:relative;padding:7px 0}   /* 24 px to hit around the 10 px meter */
.be-track .meter{height:10px}
.be-mark{position:absolute;top:2px;width:2px;height:20px;margin-left:-1px;background:var(--fg);border-radius:1px}
@media (prefers-reduced-motion:no-preference){
  .hist-col,.hh-col{transition:opacity .12s}
}
@media (max-width:860px){#hist{flex-basis:160px;min-height:160px;max-height:160px}}
/* ==== C-E log ==== */
/* List of trades: filter row over an 11-column table (sticky header and first column), 25 rows + Load more; phone: cards and a Filters sheet (§7).
   Nothing but the table itself scrolls sideways, and only below 1280 px (a scroller takes the sticky header with it). */
.log-filterbar{display:flex;gap:var(--sp-2);flex-wrap:wrap;align-items:center}
.sel{font:inherit;font-size:12px;font-weight:500;color:var(--fg-muted);background:var(--surface-3);border:0;border-radius:9999px;padding:5px 10px;cursor:pointer;max-width:180px}
.sel:hover{background:var(--surface-4)}
.sheet-close,#log-filters-btn{display:none}
.log-wrap{position:relative}
.log-scroll{max-width:100%}
table.log{min-width:920px}   /* the natural width of the widest rows on the fixture (904) */
table.log th,table.log td{padding-left:8px;padding-right:8px}
table.log th:first-child,table.log td:first-child{padding-left:0}
table.log th:last-child,table.log td:last-child{padding-right:0}
table.log th:nth-child(2),table.log td:nth-child(2),table.log th:nth-child(3),table.log td:nth-child(3){text-align:left}   /* Symbol and Side are labels, not figures */
table.log td.mute{color:var(--fg-subtle)}   /* a zero (`$0`) and an unknown (`—`) */
table.log tr.muted td.mute{color:var(--fg-subtle)}
/* the outcome at a glance: a faint row tint and a bold coloured Net; the figures between Side and Net step back */
table.log tr.win td{background:rgb(47 214 111 / .06)} table.log tr.loss td{background:rgb(255 90 79 / .06)}
table.log td:nth-child(n+4):not(.net){color:var(--fg-muted)}
table.log td.net{font-weight:600} table.log td.net.win{color:var(--success)} table.log td.net.loss{color:var(--danger)}
table.log thead th{position:sticky;top:calc(var(--mast-h) + var(--tabs-h));background:var(--surface-2);z-index:2}   /* under the masthead and the tab bar */
table.log th:first-child,table.log td:first-child{position:sticky;left:0;z-index:1}
table.log thead th:first-child{z-index:3}
/* the first column is opaque (and ruled off) only while columns slide under it — at rest it blends into the card's gradient */
.log-wrap.scrolled table.log td:first-child,.log-wrap.scrolled table.log th:first-child{background:var(--surface-2);box-shadow:inset -1px 0 0 var(--hair)}
.glyph{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:-6px 0 -6px 2px;vertical-align:middle;color:var(--fg-subtle)}   /* 24 px to hit around the 12 px glyph, same footprint as the text line */
.glyph .ic{width:12px;height:12px}
.glyph:hover{color:var(--fg)}
#log-cards,#raw-cards{display:none}
.lcard{display:block;width:100%;text-align:left;padding:12px 0;border-top:1px solid var(--hair);min-height:44px}
.lcard:first-child{border-top:0}
.lcard-1{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg)}
.lcard-1 b{font-weight:600}
.lcard-1 .glyph{margin:0}
.lcard-net{margin-left:auto;font-weight:600}
.lcard-net.win{color:var(--success)} .lcard-net.loss{color:var(--danger)}
.lcard.win,.lcard.loss{padding-left:10px} .lcard.win{box-shadow:inset 3px 0 0 var(--success)} .lcard.loss{box-shadow:inset 3px 0 0 var(--danger)}
.lcard-2{display:block;font-size:12px;color:var(--fg-subtle);margin-top:3px}
.lcard-more{display:none}
.lcard.open .lcard-more{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin-top:8px;font-size:12px}
.lcard-more .k{color:var(--fg-subtle)} .lcard-more .v{color:var(--fg);text-align:right}
#log-note{margin-top:var(--sp-3)}
#log-legend:empty{display:none}
#log-legend{margin-top:var(--sp-2)}
#log-legend .glyph{margin:0 4px 0 0;width:12px;height:12px}
.log-actions .chip{min-height:24px}
#raw-drawer{margin-top:var(--sp-4);padding-top:var(--sp-4);border-top:1px solid var(--hair)}
#raw-table{overflow-x:auto}   /* a safety net for very long figures between 861 and ~960 px (the table is ≈ 743 px wide; it never shows on a phone) */
.rcard{display:block;padding:10px 0;border-top:1px solid var(--hair)}
.rcard:first-child{border-top:0}
@media (prefers-reduced-motion:no-preference){
  .glyph{transition:color .12s}
}
@media (max-width:1279px){
  .log-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}   /* a scroller takes the sticky header with it: only the first column sticks here */
  table.log thead th{position:static;top:auto}
}
@media (max-width:860px){
  #log-table,#raw-table{display:none} #log-cards,#raw-cards{display:block}
  #log-filters-btn{display:inline-flex;min-height:36px}
  .log-actions .chip{min-height:36px}
  .log-filterbar{display:none}
  .log-filterbar.open{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-3);position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--surface-2);box-shadow:var(--shadow-panel);border-radius:16px 16px 0 0;padding:var(--sp-5)}
  .log-filterbar.open .toggle{display:grid;grid-template-columns:repeat(3,1fr)}
  .log-filterbar.open .toggle button{min-height:40px}
  .log-filterbar.open .sel{max-width:none;min-height:40px}
  .sheet-close{display:inline-flex;align-self:flex-end;min-height:40px}
}
/* ==== C-E method ==== */
/* The footer: a collapsed Methodology card (the definitions in two columns), the data line and the chart credit. */
.foot-line{margin:var(--sp-3) 0 0}
details.card > summary{min-height:24px;display:flex;align-items:center}   /* a 24 px target for the whole disclosure line */
#method-list{column-count:2;column-gap:var(--sp-7);margin-top:var(--sp-4)}
.def{break-inside:avoid;padding:8px 0;border-top:1px solid var(--hair);font-size:13px;color:var(--fg-muted);line-height:1.5}
.def b{color:var(--fg);font-weight:500;margin-right:6px}
/* ==== C-E motion ==== */
/* `updated just now` (§5.6): the pill takes brand-300 at once, keeps it for the 600 ms the .flash class stays on, and fades back over the
   600 ms of its own transition (without this the colour would only just arrive when the class is removed again). */
@media (prefers-reduced-motion:no-preference){
  .pill.flash{transition-duration:.12s}
}
/* ==== C-E final ==== */
/* An interactive chip (`Show as table`, `Show all`, `Load more`, …) is 4 + 15.6 + 4 = 23.6 px tall: 24 px to hit. */
:where(.chip.i){min-height:24px}   /* specificity 0: the phone sizes of the trade list (36 / 40 px) keep winning */
/* Spec §7: a row that is a button is ≥ 44 px on touch — the symbol rows keep their 24 px bar, centred in a 44 px row. */
@media (max-width:860px){
  .symrow{height:auto;min-height:44px}
}

/* ==== hero layer: dots on the account line + deposit / withdrawal lollipops along the bottom edge ==== */
.hero-layer{position:absolute;left:0;top:0;z-index:2;pointer-events:none;overflow:visible}
.ln-dot{fill:#c17aff;stroke:var(--surface-2);stroke-width:1.5}
.ln-dot.loss{fill:#ff6a60}
.ev-stem{stroke:var(--viz-neutral);stroke-opacity:.55;stroke-width:1}
.ev-dot{stroke:var(--surface-2);stroke-width:2;pointer-events:auto;cursor:default}
.ev-dot.dep{fill:var(--viz-gain)} .ev-dot.wd{fill:var(--viz-loss)}
.ev-dot:focus-visible{outline:0;stroke:var(--brand-400)}
.legend .sw.round{border-radius:50%}
/* positions block: always present under the hero; one quiet line when flat */
.pos-empty{color:var(--fg-subtle);font-size:13px;margin:0}
/* ==== C-C takeaways ==== */
.takeaways{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.takeaways li{position:relative;padding-left:18px;font-size:14px;line-height:1.5;color:var(--fg-muted)}
.takeaways li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--brand-400)}
.takeaways li b{font-weight:600;color:var(--fg)}
.takeaways li .sk{display:inline-block;vertical-align:middle}
/* ==== LP landing (copy-trading pitch above the dashboard; spec 2026-10-17 §4, redesign 2026-10-17) ==== */
.lp{position:relative;isolation:isolate;overflow:hidden;background:var(--canvas)}
.lp::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgb(255 255 255 / .035) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:linear-gradient(180deg,rgb(0 0 0 / .9),transparent 72%);mask-image:linear-gradient(180deg,rgb(0 0 0 / .9),transparent 72%)}
.lp-aurora{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.lp-aurora i{position:absolute;display:block;border-radius:50%;filter:blur(72px);opacity:.6;will-change:transform}
.lp-aurora .a1{width:760px;height:760px;left:-220px;top:-340px;background:radial-gradient(circle at 40% 40%,rgb(168 59 255 / .55),transparent 65%)}
.lp-aurora .a2{width:560px;height:560px;right:-180px;top:-140px;background:radial-gradient(circle at 50% 50%,rgb(47 214 111 / .2),transparent 65%)}
.lp-aurora .a3{width:640px;height:640px;left:34%;top:240px;background:radial-gradient(circle at 50% 50%,rgb(143 24 232 / .32),transparent 65%)}
.lp-bar{height:var(--mast-h)}
.lp-bar .wrap{height:100%;display:flex;align-items:center;gap:var(--sp-5)}
.lp-brand{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--fg)}
.lp-logo{width:26px;height:26px;color:var(--fg);flex:0 0 auto}
.lp-nav{display:flex;gap:var(--sp-4);margin-left:auto;font-size:14px;color:var(--fg-muted)}
.lp-nav a{padding:6px 2px;border-radius:6px}
.lp-nav a:hover{color:var(--fg)}
.lp-lang{display:inline-flex;background:rgb(255 255 255 / .06);border-radius:9999px;padding:3px;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08)}
.lp-lang button{font-size:12px;font-weight:600;letter-spacing:.04em;padding:5px 10px;border-radius:9999px;color:var(--fg-subtle);min-width:40px}
.lp-lang button[aria-pressed="true"]{background:var(--surface-3);color:var(--fg)}
.lp-pitch{padding:var(--sp-8) 0 var(--sp-7)}
.lp-kicker{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-200);margin:0 0 var(--sp-4);padding:6px 12px;border-radius:9999px;background:rgb(168 59 255 / .12);box-shadow:inset 0 0 0 1px rgb(168 59 255 / .3)}
.lp-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brand-300);box-shadow:0 0 12px var(--brand-300)}
.lp-pitch h1{font-size:56px;line-height:1.04;letter-spacing:-.03em;font-weight:700;margin:0;max-width:780px;background:linear-gradient(180deg,#fff 0%,#ece3ff 55%,var(--brand-200) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-sub{font-size:19px;line-height:1.55;color:var(--fg-muted);margin:var(--sp-4) 0 0;max-width:660px}
.lp-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5)}
.lp-btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:9999px;font-size:15px;font-weight:600;color:var(--fg);background:rgb(255 255 255 / .06);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .12)}
.lp-btn:hover{background:rgb(255 255 255 / .1);transform:translateY(-1px)}
.lp-btn.primary{background:linear-gradient(180deg,var(--brand-300),var(--brand-500));color:#fff;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .14),0 12px 36px rgb(168 59 255 / .45)}
.lp-btn.primary:hover{background:linear-gradient(180deg,var(--brand-200),var(--brand-400));box-shadow:inset 0 0 0 1px rgb(255 255 255 / .2),0 16px 44px rgb(168 59 255 / .6)}
.lp-btn.primary::after{content:"";position:absolute;top:-40%;bottom:-40%;left:-60%;width:36%;background:linear-gradient(100deg,transparent,rgb(255 255 255 / .35),transparent);transform:skewX(-20deg)}
.lp-btn:focus-visible,.lp-lang button:focus-visible,.lp-nav a:focus-visible,.lp-brand:focus-visible{outline:2px solid var(--brand-300);outline-offset:2px}
.lp-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-6);max-width:840px}
.lp-tile{position:relative;background:rgb(255 255 255 / .045);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:16px;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .09),0 10px 30px rgb(0 0 0 / .25);padding:14px 16px;display:grid;gap:4px}
.lp-tile .l{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-subtle)}
.lp-tile .v{font-size:22px;font-weight:650;letter-spacing:-.01em}
.lp-tile .v.gain{color:var(--success)} .lp-tile .v.loss{color:var(--danger)}
.lp-live{position:absolute;top:14px;right:14px;width:8px;height:8px;border-radius:50%;background:var(--success)}
.lp-ticker{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-5);max-width:840px}
.lp-ticker-label{flex:0 0 auto;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-subtle)}
.lp-ticker-viewport{flex:1 1 auto;min-width:0;overflow:hidden;display:flex;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lp-ticker-track{display:flex;gap:8px;flex:0 0 auto;will-change:transform;padding-left:8px}
.lp-ticker-track span{font-size:12px;font-weight:600;padding:5px 10px;border-radius:9999px;background:rgb(255 255 255 / .05);box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08);color:var(--fg-muted);white-space:nowrap}
.lp-ticker-track span.gain{color:var(--success)} .lp-ticker-track span.loss{color:var(--danger)}
.lp-sec{padding:var(--sp-8) 0 0}
.lp-sec h2,.lp-stats-head h2{font-size:34px;letter-spacing:-.025em;font-weight:700;margin:0 0 var(--sp-5)}
.lp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.lp-steps li{position:relative;background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--card-ring),var(--card-shadow);padding:var(--sp-5)}
.lp-steps li:not(:last-child)::after{content:"";position:absolute;top:40px;right:calc(-1 * var(--sp-4));width:var(--sp-4);height:1px;background:linear-gradient(90deg,var(--brand-400),transparent)}
.lp-steps .n{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(180deg,var(--brand-300),var(--brand-500));color:#fff;font-size:13px;font-weight:700;box-shadow:0 6px 18px rgb(168 59 255 / .4)}
.lp-steps h3,.lp-trust h3{font-size:18px;font-weight:600;margin:var(--sp-3) 0 6px;letter-spacing:-.01em}
.lp-steps p,.lp-trust p{margin:0;color:var(--fg-muted);line-height:1.55;font-size:15px}
.lp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.lp-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--card-ring),var(--card-shadow);padding:var(--sp-5);display:grid;gap:var(--sp-4);align-content:start;min-height:132px}
.lp-card.live{box-shadow:var(--card-ring),var(--card-shadow),0 0 0 1px rgb(240 185 11 / .22),0 0 60px rgb(240 185 11 / .08)}
.lp-card.soon{background:transparent;box-shadow:none;border:1px dashed rgb(255 255 255 / .14);opacity:.75}
.lp-card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.lp-ex{font-size:22px;font-weight:700;letter-spacing:-.01em}
.lp-ex.binance{color:#F0B90B} .lp-ex.okx{color:var(--fg)} .lp-ex.bybit{color:#F7A600}
.lp-badge{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:9999px;background:rgb(255 255 255 / .06);color:var(--fg-subtle)}
.lp-badge.live{background:var(--gain-tint);color:var(--success);box-shadow:0 0 18px rgb(47 214 111 / .25)}
.lp-note{margin:var(--sp-4) 0 0;font-size:14px;color:var(--fg-muted)}
.lp-note a{color:var(--brand-200)}
.lp-note a:hover{color:var(--fg)}
.lp-trust{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.lp-trust li{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--card-ring),var(--card-shadow);padding:var(--sp-5)}
.lp-ic{display:block;width:30px;height:30px;color:var(--brand-200);filter:drop-shadow(0 0 12px rgb(168 59 255 / .5))}
.lp-trust h3{margin-top:var(--sp-3)}
.lp-risk{margin:var(--sp-5) 0 0;font-size:13px;color:var(--fg-subtle);max-width:720px;line-height:1.55}
.lp-stats-head{padding-top:var(--sp-8)}
.lp-stats-head h2{margin-bottom:var(--sp-2);scroll-margin-top:var(--sp-4)}
.lp-stats-sub{margin:0 0 var(--sp-5);font-size:16px;color:var(--fg-muted)}
.lp-foot a{color:var(--fg-muted)} .lp-foot a:hover{color:var(--fg)}
/* reveal: the landing fades in on its own, with a longer rise and a stagger inside each row */
html.js .lp .reveal{transform:translateY(14px);transition-duration:.55s}
html.js .lp .reveal.in{transform:none}
html.js .lp-steps li:nth-child(2),html.js .lp-cards > :nth-child(2),html.js .lp-trust li:nth-child(2){transition-delay:.08s}
html.js .lp-steps li:nth-child(3),html.js .lp-cards > :nth-child(3),html.js .lp-trust li:nth-child(3){transition-delay:.16s}
@media (prefers-reduced-motion:no-preference){
  .lp-aurora .a1{animation:lp-drift 18s ease-in-out infinite alternate}
  .lp-aurora .a2{animation:lp-drift 23s ease-in-out infinite alternate-reverse}
  .lp-aurora .a3{animation:lp-drift 27s ease-in-out infinite alternate}
  @keyframes lp-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(60px,40px,0) scale(1.08)}}
  .lp-btn{transition:background .15s,transform .15s,box-shadow .15s}
  .lp-btn.primary::after{animation:lp-shine 4.5s ease-in-out infinite}
  @keyframes lp-shine{0%,72%{left:-60%}100%{left:130%}}
  .lp-live{animation:lp-pulse 2.2s ease-out infinite}
  @keyframes lp-pulse{0%{box-shadow:0 0 0 0 rgb(47 214 111 / .55)}100%{box-shadow:0 0 0 10px rgb(47 214 111 / 0)}}
  .lp-ticker-track{animation:lp-marquee 42s linear infinite}
  .lp-ticker:hover .lp-ticker-track{animation-play-state:paused}
  @keyframes lp-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .lp-steps li,.lp-card,.lp-trust li{transition:transform .2s ease,box-shadow .2s ease,opacity .55s ease-out}
  .lp-steps li:hover,.lp-card.live:hover,.lp-trust li:hover{transform:translateY(-3px);box-shadow:var(--card-ring),0 24px 60px rgb(0 0 0 / .42)}
  .lp-nav a,.lp-lang button,.lp-note a{transition:color .12s,background .12s}
}
@media (max-width:1100px){
  .lp-steps,.lp-cards,.lp-trust{grid-template-columns:minmax(0,1fr)}
  .lp-steps li:not(:last-child)::after{display:none}
  .lp-pitch h1{font-size:48px}
}
@media (max-width:860px){
  .lp-bar .wrap{gap:var(--sp-3)}
  .lp-nav{display:none}   /* the phone keeps brand + language; the sections are one scroll away */
  .lp-lang{margin-left:auto}
  .lp-pitch{padding:var(--sp-6) 0 var(--sp-6)}
  .lp-pitch h1{font-size:36px;line-height:1.08}
  .lp-sub{font-size:16px}
  .lp-btn{flex:1 1 100%}
  .lp-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-tile .v{font-size:20px}
  .lp-sec{padding-top:var(--sp-7)}
  .lp-sec h2,.lp-stats-head h2{font-size:26px}
  .lp-stats-head{padding-top:var(--sp-7)}
  .lp-aurora i{filter:blur(56px)}
}
@media (max-width:480px){
  .lp-ticker-label{display:none}
}