/* Sol Street's own pieces, on top of base.css (the shell, buttons, forms, cards, feed, modal): the market's atoms (moves,
   tickers, sparklines, the chart), the allocation bar (a fund's holdings by weight, coloured by kind: the signature),
   the home page and its dark quote card, the heatmap, the screener, the quote page and its order ticket, the fill,
   the portfolio, the leaderboard, the IPO desk and How it works. Colours come from tokens.css. Nothing moves on its
   own except a price that just changed and the live dots. */

/* ---------- the market's atoms ---------- */
.chg { display: inline-flex; align-items: center; gap: 4px; font: 600 13px/1 var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chg.up { color: var(--up); }
.chg.down { color: var(--down); }
.chg.flat { color: var(--muted); }
.chg.pill { padding: 5px 8px; border-radius: 5px; }
.chg.pill.up { background: var(--up-soft); }
.chg.pill.down { background: var(--down-soft); }
.chg.pill.flat { background: var(--surface-3); }

/* a ticker: ink with paper letters (inverted on the dark card) */
.tkr { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 5px; flex: none; font: 700 12px/1 var(--font-mono); letter-spacing: 0.05em; color: var(--bg); background: var(--ink); white-space: nowrap; }
.tkr.sm { height: 20px; padding: 0 6px; font-size: 11px; border-radius: 4px; }
.tkr.lg { height: 30px; padding: 0 11px; border-radius: 6px; font-size: 14px; }
.tkr.xl { height: 40px; padding: 0 14px; border-radius: 7px; font-size: 19px; }
a.tkr:hover { background: var(--act); color: var(--on-act); }

.tok-icon { flex: none; border-radius: 50%; object-fit: cover; background: var(--surface-3); box-shadow: 0 0 0 1px var(--line-2); }
.tok-icon.drawn { display: inline-grid; place-items: center; font: 700 9px/1 var(--font-mono); color: var(--ink); background: var(--surface-3); }
.stack { display: inline-flex; align-items: center; }
.stack > * + * { margin-left: -7px; }
.stack .tok-icon { box-shadow: 0 0 0 2px var(--surface); }
.stack-more { margin-left: 4px !important; font: 600 11.5px var(--font-mono); color: var(--muted); }
/* a fund's face in lists: its three biggest holdings' logos, overlapping, the first on top */
.cluster { display: inline-flex; align-items: center; flex: none; }
.cluster > * { position: relative; }
.cluster > * + * { margin-left: -9px; }
.cluster > :nth-child(1) { z-index: 3; }
.cluster > :nth-child(2) { z-index: 2; }
.cluster .tok-icon { box-shadow: 0 0 0 2px var(--surface); }

.spark { display: block; flex: none; }
.spark svg { display: block; width: 100%; height: 100%; overflow: visible; }

.wbar { display: inline-grid; grid-template-columns: minmax(40px, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.wbar-track { height: 6px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.wbar-fill { display: block; height: 100%; border-radius: inherit; background: var(--k, var(--ink)); }
.wbar-num { font: 600 13px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); min-width: 52px; text-align: right; }

.flash-up { animation: flash-up 900ms var(--ease); }
.flash-down { animation: flash-down 900ms var(--ease); }
@keyframes flash-up { 0% { color: var(--up); } 100% { color: inherit; } }
@keyframes flash-down { 0% { color: var(--down); } 100% { color: inherit; } }

.kicker { justify-self: start; width: fit-content; }
.grad-down { font-style: italic; color: var(--down); }
.chip.live { color: var(--up); gap: 6px; }

/* ---------- the allocation bar: what a fund holds, by weight, coloured by kind ---------- */
.alloc { display: flex; gap: 2px; height: 8px; border-radius: 2px; overflow: hidden; }
.alloc.lg { height: 14px; gap: 3px; border-radius: 3px; }
.alloc-seg { min-width: 3px; background: var(--k, var(--muted)); }
.k-stock { --k: var(--k-stock); }
.k-preipo { --k: var(--k-preipo); }
.k-crypto { --k: var(--k-crypto); }
.k-meme { --k: var(--k-meme); }
.k-stable { --k: var(--k-stable); }
.alloc-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 600 11.5px var(--font-mono); letter-spacing: 0.04em; color: var(--ink-2); }
.alloc-key span { display: inline-flex; align-items: center; gap: 7px; }
.alloc-key i { width: 9px; height: 9px; border-radius: 2px; background: var(--k); }
.alloc-key b { color: var(--ink); font-weight: 700; }
.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; background: var(--k); flex: none; }

/* ---------- the chart ---------- */
.chart { display: grid; gap: 6px; }
.chart.empty { display: grid; place-items: center; border: 1px dashed var(--line-2); border-radius: var(--r); background: repeating-linear-gradient(90deg, transparent 0 39px, var(--line) 39px 40px); }
.chart-plot { position: relative; padding-right: 66px; user-select: none; touch-action: pan-y; cursor: crosshair; }
.chart-plot svg { display: block; overflow: visible; }
.chart .grid-line { stroke: var(--line); stroke-width: 1; }
.chart .start-line { stroke: var(--gold-ink); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.8; }
.night .chart .start-line { stroke: var(--gold); }
.chart-axis { position: absolute; top: 0; right: 0; bottom: 0; width: 62px; pointer-events: none; }
.chart-axis span { position: absolute; right: 0; transform: translateY(-50%); font: 500 11px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.chart-axis .chart-start { right: auto; left: -60px; color: var(--gold-ink); font-size: 9.5px; letter-spacing: 0.1em; }
.night .chart-axis .chart-start { color: var(--gold); }
.chart-axis .chart-last { padding: 5px 6px; border-radius: 4px; color: var(--bg); font-weight: 700; z-index: 1; }
.chart-time { display: flex; justify-content: space-between; padding-right: 66px; font: 500 11px var(--font-mono); color: var(--muted); }
.chart-cross { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--line-3); opacity: 0; pointer-events: none; }
.chart-dot { position: absolute; top: 0; left: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface); opacity: 0; pointer-events: none; }
.chart-tip { position: absolute; top: 0; left: 0; padding: 7px 10px; border-radius: 6px; background: var(--ink); color: var(--bg); font: 600 12px var(--font-mono); white-space: nowrap; opacity: 0; pointer-events: none; }
.chart-plot.hover .chart-cross, .chart-plot.hover .chart-dot, .chart-plot.hover .chart-tip { opacity: 1; }

/* ---------- home: the hero and the dark quote card ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.98fr); gap: clamp(32px, 5vw, 72px); align-items: start; padding-top: clamp(40px, 6vw, 88px); padding-bottom: clamp(24px, 4vw, 48px); }
.hero-copy { display: grid; gap: 24px; align-content: start; }
.hero-title { display: grid; font: var(--display-weight) clamp(44px, 4.9vw, 76px)/0.98 var(--font-display); letter-spacing: -0.03em; }
.hero-title .grad { padding-bottom: 0.04em; }
.ctas { gap: 12px; flex-wrap: wrap; }
/* the market's numbers, printed like a data strip: a heavy rule on top, hairlines between */
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 8px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line-2); }
.hero-stats:empty { min-height: 80px; }
.hstat { display: grid; gap: 8px; align-content: start; padding: 14px 16px 14px 0; }
.hstat + .hstat { padding-left: 16px; border-left: 1px solid var(--line-2); }
.hstat-value { font: 700 22px/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hstat-main .hstat-value { color: var(--act-ink); }

.terminal { position: relative; min-width: 0; }
.terminal-skel { display: grid; gap: 14px; padding: 20px; border-radius: var(--r-lg); background: var(--night); min-height: 460px; }
.terminal-skel .sk { background: linear-gradient(90deg, var(--night-2), var(--night-3), var(--night-2)); background-size: 200% 100%; }
.terminal-card, .glow-card { position: relative; display: grid; gap: 16px; padding: 20px; border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line-2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 40px 80px -36px rgba(0, 0, 0, 0.9); }
.term-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.term-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.term-id > div { display: grid; gap: 3px; min-width: 0; }
.term-name { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.term-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.term-quote { display: grid; justify-items: end; gap: 7px; }
.term-price { font: 700 32px/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.term-alloc { display: grid; gap: 10px; }
.term-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.term-bar .seg { margin: 0; }

/* the home ticket: amount, quick picks, total, button */
.order-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.order-strip .amount { grid-column: 1; }
.order-strip .quick { grid-column: 2; align-self: center; }
.order-strip .costs, .order-strip .btn, .order-strip .todo { grid-column: 1 / -1; }
.order-strip .costs { font-size: 13px; }

/* ---------- home: sections ---------- */
.heat-legend { display: flex; align-items: center; gap: 10px; font: 500 12px var(--font-mono); color: var(--muted); }
.heat-scale { width: 140px; height: 8px; border-radius: 2px; background: linear-gradient(90deg, var(--heat-down), var(--heat-mid) 50%, var(--heat-up)); }

.heatmap { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); grid-auto-rows: 100px; grid-auto-flow: dense; gap: 3px; padding: 3px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.heatmap.skeleton { display: block; padding: 0; }
.tile { position: relative; display: grid; align-content: space-between; padding: 12px; border-radius: 7px; overflow: hidden; color: #fff; transition: box-shadow var(--t-fast) var(--ease); }
.tile:hover { box-shadow: inset 0 0 0 2px var(--ink); z-index: 1; }
.tile.pale { color: var(--ink); }
.tile.pale .tile-chg { color: var(--ink-2); }
.tile.big { grid-column: span 2; grid-row: span 2; }
.tile-code { font: 700 15px/1 var(--font-mono); letter-spacing: 0.02em; }
.tile.big .tile-code { font: 600 clamp(26px, 2.6vw, 38px)/1 var(--font-display); letter-spacing: -0.02em; }
.tile-name { font-size: 12.5px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile:not(.big) .tile-name { display: none; }
.tile-chg { font: 700 14px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.tile.big .tile-chg { font-size: 22px; }

.movers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.movers-card { padding: 8px 8px 6px; }
.movers-card .card-head { padding: 10px 10px 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.movers-list { display: grid; }
.mover { display: grid; grid-template-columns: auto auto minmax(0, 1fr) 90px 74px 92px; align-items: center; gap: 12px; padding: 10px; border-radius: 7px; }
.mover:hover { background: var(--surface-2); }
.mover-name { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mover-price { font: 600 14px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.mover .chg { justify-self: end; }

/* how it works: three printed columns, each under a heavy rule, with a big serif number */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.step { position: relative; display: grid; gap: 12px; align-content: start; padding-top: 18px; border-top: 2px solid var(--ink); }
.step-n { font: 600 44px/1 var(--font-display); color: var(--act-ink); letter-spacing: -0.02em; }
.step h3 { font: 600 26px/1.1 var(--font-display); letter-spacing: -0.015em; }
.step p { color: var(--ink-2); font-size: 15.5px; }
.step-art { display: grid; gap: 8px; margin-top: 6px; padding: 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-2); font: 600 13px var(--font-mono); box-shadow: var(--shadow); }
.mini-tick { display: flex; justify-content: space-between; gap: 10px; }
.mini-tick b { color: var(--ink); }
.mini-input { display: flex; align-items: baseline; justify-content: space-between; padding: 10px 12px; border-radius: 7px; border: 1.5px solid var(--act); }
.mini-input b { font-size: 22px; }
.mini-input span, .mini-total { color: var(--muted); font-size: 12px; }
.mini-fill { color: var(--up); }
.mini-fill.dim { color: var(--muted); font-weight: 500; font-size: 12px; }

.ipo-empty { display: grid; gap: 12px; justify-items: start; padding: clamp(22px, 3vw, 34px); border-left: 4px solid var(--gold); }
.ipo-empty h3 { font: 600 28px/1.1 var(--font-display); letter-spacing: -0.015em; }
.feed-card { padding: 6px 18px; }

/* the closing call: the dark card again, with the mint key */
.closing { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(28px, 5vw, 64px); border-radius: 20px; background: var(--bg); border: 1px solid var(--line-2); border-top: 3px solid var(--act); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.closing-title { display: grid; font: var(--display-weight) clamp(36px, 5vw, 66px)/1 var(--font-display); letter-spacing: -0.025em; margin-bottom: 14px; }
.closing-side { display: grid; gap: 14px; }
.closing .ca { background: var(--surface); border-color: var(--line-3); }

/* the asset board: what Sol Street lists, still, each asset marked by its kind */
.assets { padding-top: clamp(56px, 7vw, 96px); }
.assets .section-head { margin-bottom: 20px; }
.asset-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; }
.asset { display: flex; align-items: center; gap: 11px; height: 58px; padding: 0 14px 0 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-2); border-left: 4px solid var(--k, var(--line-3)); min-width: 0; }
.asset > span { display: grid; gap: 3px; min-width: 0; }
.asset b { font: 700 14px/1 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asset-kind { font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.asset .chg { font-size: 12.5px; margin-left: auto; }
.asset-tags { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.asset-tags .chip { border: 0; background: none; padding: 0; height: auto; gap: 7px; color: var(--ink-2); }

/* ---------- fund cards ---------- */
.fcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; }
.fcard { position: relative; display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
a.fcard:hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--shadow-lift); }
.fcard-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fcard-name { font: 600 20px/1.15 var(--font-display); letter-spacing: -0.01em; min-height: 2.3em; }
.fcard-price { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fcard-unit { font: 700 24px/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.fcard-spark { width: calc(100% + 32px) !important; height: 50px !important; margin: 0 -16px; }
.fcard .spark.empty { border-bottom: 1px dashed var(--line-2); }
.fcard-foot { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.fcard-foot .fine.mono { margin-left: auto; }
.fcard.skeleton { min-height: 250px; }
.fcard.preview { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft), var(--shadow); }
.fcard.preview::after { content: "PREVIEW"; position: absolute; top: 18px; right: 62px; font: 700 10px var(--font-mono); letter-spacing: 0.14em; color: var(--gold-ink); }

/* ---------- Markets: the screener ---------- */
.markets-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.breadth { display: grid; grid-template-columns: repeat(3, auto); gap: 8px 22px; padding: 14px 18px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-2); min-width: 300px; box-shadow: var(--shadow); }
.breadth:empty { min-height: 74px; }
.breadth-item { display: grid; gap: 4px; }
.breadth-item b { font: 700 20px/1 var(--font-mono); }
.breadth-bar { grid-column: 1 / -1; display: flex; height: 6px; border-radius: 2px; overflow: hidden; gap: 2px; }
.bb-up { background: var(--up-fill); }
.bb-down { background: var(--down-fill); }
.sector-tabs { margin-bottom: 12px; }
.controls > .row { margin-left: auto; flex-wrap: nowrap; }
.controls > .row .search { margin-left: 0; flex: 0 1 300px; min-width: 0; }
.controls > .row .seg { flex: none; }
.funds-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0 14px; }

.screener { border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.screener.skeleton { display: grid; gap: 1px; padding: 0; }
.screener .sk-row { height: 62px; border-radius: 0; }
.sc-row { display: grid; grid-template-columns: 34px minmax(220px, 1.6fr) 90px 98px 120px 130px 110px 70px 82px; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--line); transition: background var(--t-fast); }
.sc-row:first-child { border-top: 0; }
a.sc-row:hover { background: var(--surface-2); }
.sc-head { padding-top: 11px; padding-bottom: 11px; background: var(--bg-2); font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.sc-n { font: 500 13px var(--font-mono); color: var(--muted); }
.sc-fund { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sc-name { display: grid; min-width: 0; }
.sc-name b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-price, .sc-vol, .sc-holders { font: 600 14px var(--font-mono); font-variant-numeric: tabular-nums; }
.sc-hold { display: grid; gap: 6px; min-width: 0; }
.sc-vol, .sc-holders { color: var(--ink-2); font-weight: 500; }
.sc-go { justify-self: end; }
.sc-go .btn { pointer-events: none; }
a.sc-row:hover .sc-go .btn { background: var(--act); color: var(--on-act); border-color: var(--act-2); }

/* ---------- the quote page ---------- */
.quote-head { display: grid; gap: 14px; padding-top: clamp(24px, 3vw, 40px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 12px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.crumbs a:hover { color: var(--act-ink); }
.q-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; }
.q-id { display: grid; gap: 12px; }
.q-title { font: var(--display-weight) clamp(34px, 4.6vw, 60px)/1 var(--font-display); letter-spacing: var(--display-tracking); }
.q-thesis { color: var(--ink-2); max-width: 60ch; }
.q-quote { display: grid; justify-items: end; gap: 10px; text-align: right; }
.q-price { font: 700 clamp(40px, 5vw, 62px)/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.q-moves { display: flex; align-items: center; gap: 12px; }
.since { font: 600 13px var(--font-mono); }
.q-quote .fine { max-width: 34ch; }
.q-alloc { display: grid; gap: 10px; margin-top: 6px; padding-top: 16px; border-top: 2px solid var(--ink); }

.quote-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 22px; align-items: start; margin-top: 22px; }
.quote-main { display: grid; gap: 22px; min-width: 0; }
.chart-card { display: grid; gap: 16px; }
.chart-card .card-head .row { gap: 12px; flex-wrap: wrap; }
.keystats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.ks { display: grid; gap: 6px; padding: 12px 14px; background: var(--surface-2); }
.ks b { font: 600 15px var(--font-mono); font-variant-numeric: tabular-nums; }

.comp-card .card-head { align-items: flex-end; }
.comp-card .card-head > .fine { max-width: 30ch; text-align: right; }
.comp { display: grid; }
.comp-row { display: grid; grid-template-columns: 30px minmax(0, 1.4fr) minmax(140px, 1fr) 100px 90px; gap: 14px; align-items: center; padding: 11px 4px; border-top: 1px solid var(--line); }
.comp-head { border-top: 0; padding-top: 4px; font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.comp-row.mini { grid-template-columns: 26px minmax(0, 1fr) minmax(120px, 1.2fr); padding: 9px 0; }
.comp-n { font: 500 12px var(--font-mono); color: var(--muted); }
.comp-tok { display: flex; align-items: center; gap: 10px; min-width: 0; }
.comp-tok > span { display: grid; min-width: 0; }
.comp-tok b { font: 700 14px var(--font-mono); }
.comp-tok .fine { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-price { font: 500 13.5px var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.comp-row > .chg { justify-self: end; }

.ticket-side { position: sticky; top: calc(var(--top-h) + 20px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.notes { display: grid; gap: 9px; font-size: 13.5px; color: var(--ink-2); }
.notes li { display: flex; gap: 9px; align-items: flex-start; }
.notes .icon { flex: none; margin-top: 2px; color: var(--up); }
.coin-box { display: grid; gap: 12px; border-left: 4px solid var(--gold); }
.coin-pic { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; box-shadow: 0 0 0 1px var(--line-2); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; font-size: 14px; }
.facts dt { font: 500 11.5px/1.9 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.facts dd { min-width: 0; overflow-wrap: anywhere; }

/* ---------- the order ticket: a printed slip with a heavy rule on top ---------- */
.pad { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); border-top: 3px solid var(--ink); box-shadow: var(--shadow-lift); }
.pad-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pad-tabs { display: inline-flex; padding: 3px; border-radius: 7px; background: var(--bg-2); border: 1px solid var(--line-2); }
.pad-tab { padding: 6px 16px; border-radius: 5px; font: 700 12.5px var(--font-mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.pad-tab.on { background: var(--act); color: var(--on-act); }
a.pad-tab:hover { color: var(--down); }
.pad-title { font: 600 22px/1.15 var(--font-display); letter-spacing: -0.015em; }
.pad-title .muted { font: 500 14px var(--font-text); letter-spacing: 0; }

.amount { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 16px; border-radius: 9px; background: var(--surface); border: 1.5px solid var(--line-3); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.night .amount { background: var(--bg-2); }
.amount:focus-within { border-color: var(--act); box-shadow: 0 0 0 3px var(--act-soft); }
.amount input { flex: 1; width: 0; min-width: 0; border: 0; outline: 0; background: none; color: var(--ink); font: 700 26px var(--font-mono); font-variant-numeric: tabular-nums; }
.amount span { font: 700 14px var(--font-mono); color: var(--muted); }
.quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.quick button { height: 34px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: 600 13px var(--font-mono); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
.night .quick button { background: var(--surface-2); }
.quick button:hover { border-color: var(--line-3); color: var(--ink); }
.quick button[aria-pressed="true"] { border-color: var(--ink); color: var(--bg); background: var(--ink); }
.get { min-height: 40px; }
/* buying is green: the ticket's key is the mint key itself */

.legs { display: grid; gap: 2px; }
.leg { display: flex; align-items: center; gap: 9px; padding: 6px 0; font: 500 13px var(--font-mono); font-variant-numeric: tabular-nums; }
.leg-n { width: 20px; color: var(--muted); font-size: 11px; }
.leg-sym { color: var(--ink); }
.leg-dots { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--line-3); transform: translateY(-3px); }
.leg-amt { color: var(--ink-2); text-align: right; }
.leg-amt.up { color: var(--up); }
.leg-amt.missed { color: var(--down); }
.tx-link { color: var(--act-ink); }
.tx-link:hover { text-decoration: underline; }

.costs { display: grid; grid-template-columns: 1fr auto; gap: 7px 14px; font-size: 13.5px; }
.costs dt { color: var(--muted); }
.costs dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.costs .total { padding-top: 9px; margin-top: 2px; border-top: 1px solid var(--line-2); color: var(--ink); font-weight: 700; font-size: 15px; }
.costs dd.total { color: var(--ink); }
.todo { min-height: 1.2em; font-size: 13px; color: var(--ink-2); text-align: center; }
.todo:empty { display: none; }

/* ---------- the flow and the fill ---------- */
.flow-steps { display: grid; gap: 10px; margin: 4px 0 8px; }
.flow-steps li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--muted); }
.flow-steps li.now, .flow-steps li.done { color: var(--ink); }
.flow-steps li.bad { color: var(--down); }
.flow-mark { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-3); font: 600 12px var(--font-mono); }
.flow-steps li.now .flow-mark { border-color: var(--act); color: var(--act-ink); box-shadow: 0 0 0 4px var(--act-soft); }
.flow-steps li.done .flow-mark { background: var(--up-fill); border-color: var(--up-fill); color: #fff; }
.flow-steps li.bad .flow-mark { border-color: var(--down); color: var(--down); }
.big-line { font-size: 18px; line-height: 1.4; }
.big-line b { color: var(--ink); }

.fill { display: grid; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-2); border-top: 3px solid var(--up-fill); }
.fill.sell { border-top-color: var(--act); }
.fill-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fill-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 5px; background: var(--up-fill); color: #fff; font: 800 12px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.fill.sell .fill-badge { background: var(--act); color: var(--on-act); }

/* ---------- Portfolio ---------- */
.pf-summary { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 1px; margin-bottom: 22px; border-radius: var(--r-lg); overflow: hidden; background: var(--line-2); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.pf-summary > div { display: grid; gap: 7px; align-content: start; padding: 18px 20px; background: var(--surface); }
.pf-total { background: var(--ink) !important; color: var(--bg); }
.pf-total .label { color: var(--on-light); opacity: 0.62; }
.pf-value { font: 700 clamp(26px, 3vw, 36px)/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pf-stat b { font: 700 19px/1 var(--font-mono); }
.pf-stat .chg { justify-self: start; }
.positions { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.position { display: grid; gap: 14px; align-content: start; }
.pos-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pos-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pos-id > span { display: grid; min-width: 0; }
.pos-id b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-id:hover b { color: var(--act-ink); }
.pos-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); }
.pos-nums > div { display: grid; gap: 5px; align-content: start; }
.pos-nums b { font: 700 15px var(--font-mono); }
.pos-nums .chg { justify-self: start; font-size: 15px; }
.pos-legs summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; font-size: 13.5px; color: var(--ink-2); }
.pos-legs summary::-webkit-details-marker { display: none; }
.pos-legs summary::after { content: "+"; margin-left: auto; font: 600 16px var(--font-mono); color: var(--muted); }
.pos-legs[open] summary::after { content: "–"; }
.pos-legs .legs { margin-top: 8px; }
.sell-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.connect-empty .big-icon { display: inline-grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; font-size: 30px; color: var(--act-ink); background: var(--act-soft); }

/* ---------- Leaderboard ---------- */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 4px 0 22px; align-items: end; }
.podium:empty { display: none; }
.podium-spot { position: relative; display: grid; gap: 8px; justify-items: center; text-align: center; padding: 24px 16px 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.podium-spot.gold { order: 2; padding-top: 40px; border-top: 4px solid var(--gold); }
.podium-spot.silver { order: 1; border-top: 4px solid #c4c4cc; }
.podium-spot.bronze { order: 3; border-top: 4px solid #d08a52; }
.medal { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 600 20px var(--font-display); color: var(--on-light); }
.gold .medal { background: var(--gold); }
.silver .medal { background: #e4e4e7; }
.bronze .medal { background: #f0c09a; }
.podium-who { font: 700 16px var(--font-mono); }
.podium-val { font: 700 22px var(--font-mono); color: var(--up); }
.lb { border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.lb-row { display: grid; grid-template-columns: 70px minmax(0, 1.4fr) minmax(0, 1fr) 140px; gap: 14px; align-items: center; padding: 13px 18px; border-top: 1px solid var(--line); }
.lb-head { border-top: 0; background: var(--bg-2); font: 600 11px var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.lb-n { font: 700 14px var(--font-mono); color: var(--muted); }
.lb-row.gold .lb-n { color: var(--gold-ink); }
.lb-row.silver .lb-n { color: #a1a1aa; }
.lb-row.bronze .lb-n { color: #a8602b; }
.lb-who { font: 600 14px var(--font-mono); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-who a:hover { color: var(--act-ink); }
.lb-sub { font-size: 13.5px; color: var(--ink-2); }
.lb-val { font: 700 14px var(--font-mono); text-align: right; }
.lb-total { background: var(--bg-2); }
.lb-total .lb-val { color: var(--up); }

/* ---------- How it works ---------- */
.how-steps { display: grid; gap: 18px; }
.how-step { display: grid; grid-template-columns: 116px minmax(0, 1fr) minmax(0, 420px); gap: clamp(16px, 3vw, 36px); align-items: center; padding: clamp(18px, 3vw, 28px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.how-step .step-n { font: 600 60px/0.9 var(--font-display); color: var(--act-ink); }
.how-step h3 { font: 600 28px/1.1 var(--font-display); letter-spacing: -0.015em; margin-bottom: 8px; }
.how-step p { color: var(--ink-2); }
.how-art { display: grid; gap: 10px; background: var(--surface-2); box-shadow: none; }
.prose { display: grid; gap: 14px; max-width: 760px; }
.prose p { color: var(--ink-2); }
.prose b { color: var(--ink); }
.faq { display: grid; gap: 0; max-width: 860px; margin-top: 6px; border-top: 2px solid var(--ink); }
.faq details { padding: 18px 2px; border-bottom: 1px solid var(--line-2); }
.faq summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 600 20px var(--font-mono); color: var(--act-ink); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin-top: 10px; color: var(--ink-2); max-width: 64ch; }
.risk-list { display: grid; gap: 8px; max-width: 860px; }
.risk-list li { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2); }
.risk-list li::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 5px; background: var(--down); color: #fff; font: 800 13px var(--font-mono); }

/* ---------- the IPO desk ---------- */
.launch-grid { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: clamp(20px, 3vw, 36px); align-items: start; }
.launch-steps { display: grid; gap: 16px; min-width: 0; }
.wstep { display: grid; gap: 14px; padding: clamp(18px, 2.6vw, 26px); border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.wstep-title { display: flex; align-items: center; gap: 12px; font: 600 24px/1 var(--font-display); letter-spacing: -0.015em; }
.wstep-title .n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; border: 1.5px solid var(--line-3); font: 700 14px var(--font-mono); color: var(--muted); transition: all var(--t); }
.wstep-title .n.ok { background: var(--up-fill); border-color: var(--up-fill); color: #fff; }
.wstep > p { color: var(--ink-2); }
.picker { display: grid; gap: 12px; }
.picker-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.picker-tabs button { height: 32px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: 600 12px var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; }
.picker-tabs button[aria-pressed="true"] { border-color: var(--ink); color: var(--bg); background: var(--ink); }
.picker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; max-height: 320px; overflow: auto; padding: 2px; }
.pick { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; transition: border-color var(--t-fast); }
.pick:hover { border-color: var(--line-3); }
.pick[aria-pressed="true"] { border-color: var(--act); background: var(--act-soft); box-shadow: inset 0 0 0 1px var(--act); }
.pick span { display: grid; min-width: 0; }
.pick b { font: 700 13px var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chosen { display: grid; gap: 6px; }
.chosen-row { display: grid; grid-template-columns: 24px 22px minmax(0, 1fr) minmax(120px, 180px) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line-2); font: 13.5px var(--font-mono); }
.chosen-row .ctl { display: flex; gap: 3px; }
.chosen-row .ctl button { width: 30px; height: 30px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2); font: 600 13px var(--font-mono); cursor: pointer; }
.chosen-row .ctl button:hover { border-color: var(--act); color: var(--act-ink); }
.launch-side { position: sticky; top: calc(var(--top-h) + 20px); display: grid; gap: 16px; }
.resume:empty { display: none; }

/* ---------- 404 and unknown tickers ---------- */
.halted { display: grid; gap: 16px; justify-items: center; text-align: center; padding: clamp(60px, 12vw, 140px) 0; }
.halted h1 { font: var(--display-weight) clamp(36px, 6vw, 76px)/1 var(--font-display); letter-spacing: var(--display-tracking); }

/* the main button's hover is its own lift (base.css); no light sweeps, no glows, no drifting lights */

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) {
  .sc-row { grid-template-columns: 30px minmax(200px, 1.6fr) 84px 96px 110px 110px 82px; }
  .sc-holders, .sc-go, .sc-head span:nth-child(8), .sc-head span:nth-child(9) { display: none; }
  .keystats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .quote-grid, .launch-grid { grid-template-columns: minmax(0, 1fr); }
  .ticket-side, .launch-side { position: static; }
  /* one column: the ticket comes straight after the chart, before the composition and the trades */
  .quote-main { display: contents; }
  .chart-card { order: 1; }
  .ticket-side { order: 2; }
  .comp-card { order: 3; }
  .quote-main > .feed-card { order: 4; }
  .how-step { grid-template-columns: 70px minmax(0, 1fr); }
  .how-step .how-art { grid-column: 1 / -1; }
  .closing { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .movers { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .markets-head { grid-template-columns: minmax(0, 1fr); }
  .controls > .row { margin-left: 0; width: 100%; }
  .controls > .row .search { flex: 1; width: auto; min-width: 0; }
  .breadth { min-width: 0; }
  .sc-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; padding: 12px 14px; }
  .sc-n, .sc-spark, .sc-hold, .sc-vol, .sc-head { display: none; }
  .sc-fund { gap: 10px; }
  .sc-name .fine { display: none; }
  .sc-fund .cluster .tok-icon { width: 22px !important; height: 22px !important; }
  .sc-fund .cluster > * + * { margin-left: -8px; }
  .sc-fund .tkr { height: 22px; padding: 0 6px; font-size: 11px; }
  .q-top { grid-template-columns: minmax(0, 1fr); }
  .q-quote { justify-items: start; text-align: left; }
  .pf-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-total { grid-column: 1 / -1; }
  .lb-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .lb-sub, .lb-head span:nth-child(3) { display: none; }
}
@media (max-width: 560px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hstat:nth-child(3) { padding-left: 0; border-left: 0; }
  .hstat:nth-child(n + 3) { border-top: 1px solid var(--line-2); }
  .hstat-value { font-size: 19px; }
  .term-price { font-size: 26px; }
  .term-bar .stack { display: none; }
  .terminal-card { padding: 16px; }
  .order-strip { grid-template-columns: minmax(0, 1fr); }
  .order-strip .quick { grid-column: 1; }
  .heatmap { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 58px; gap: 2px; padding: 2px; }
  .tile { padding: 7px; border-radius: 5px; }
  .tile.big { grid-row: span 1; }
  .tile.big .tile-name { display: none; }
  .tile-code, .tile.big .tile-code { font: 700 11px/1 var(--font-mono); }
  .tile-chg, .tile.big .tile-chg { font-size: 11px; }
  .tile.big .tile-code { font-size: 14px; }
  .tile.big .tile-chg { font-size: 13px; }
  .mover { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  .mover .mover-price { display: none; }
  .mover .spark { display: none; }
  .keystats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .comp-row { grid-template-columns: 22px minmax(0, 1fr) 110px 76px; gap: 10px; }
  .comp-price, .comp-head span:nth-child(4) { display: none; }
  .comp-card .card-head { flex-direction: column; align-items: flex-start; }
  .comp-card .card-head > .fine { text-align: left; }
  .wbar { grid-template-columns: 1fr; gap: 4px; }
  .wbar-num { text-align: left; }
  .chart-plot, .chart-time { padding-right: 56px; }
  .chart-axis { width: 52px; }
  .chart-time span:nth-child(2), .chart-time span:nth-child(3) { display: none; }
  .podium { grid-template-columns: minmax(0, 1fr); }
  .podium-spot.gold, .podium-spot.silver, .podium-spot.bronze { order: 0; padding-top: 22px; }
  .positions { grid-template-columns: minmax(0, 1fr); }
  .chosen-row { grid-template-columns: 22px 22px minmax(0, 1fr) auto; }
  .chosen-row .wbar { display: none; }
  .how-step { grid-template-columns: minmax(0, 1fr); }
  .how-step .step-n { font-size: 42px; }
  .heat-legend { display: none; }
  .asset-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .asset { height: 50px; gap: 8px; padding: 0 10px 0 9px; }
  .asset .tok-icon { width: 26px !important; height: 26px !important; }
  .asset b { font-size: 13px; }
  .asset .chg { display: none; }
}

/* ==================== 2026-11-05: the terminal, the explorer, the race, profiles and follows ==================== */
/* the hero: the stronger headline, the lede, the biggest stocks live */
.hero-lede { font-size: clamp(18px, 1.6vw, 21px); color: var(--ink-2); max-width: 30em; }
.hero-stocks { display: grid; gap: 10px; }
.hero-stocks .kicker { margin-bottom: 0; }
.stock-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.stock-chip { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line-2); transition: border-color var(--t-fast), transform var(--t-fast); }
.stock-chip:hover { border-color: var(--line-3); transform: translateY(-1px); }
.stock-chip .tok-icon { grid-row: span 2; }
.sc-id { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.sc-id b { font: 700 13.5px var(--font-mono); }
.sc-name { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-quote { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font: 600 12.5px var(--font-mono); font-variant-numeric: tabular-nums; }
.sc-quote .chg { font-size: 11.5px; }

/* the explorer: six tabs over a grid of market cards */
.explore { padding-top: clamp(28px, 4vw, 48px); }
.seg.explore-tabs { display: flex; width: 100%; margin-bottom: 18px; padding: 4px; }
.explore-tabs button { flex: 1 0 auto; height: 40px; padding: 0 16px; font-size: 13px; }
.explore-tabs button[aria-pressed="true"] { background: var(--act); color: var(--on-act); box-shadow: none; }
.explore-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.explore-grid > .fcards { grid-column: 1 / -1; }
.mkt-card { position: relative; display: grid; gap: 10px; align-content: start; padding: 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2); overflow: hidden; transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); }
.mkt-card:hover { transform: translateY(-2px); border-color: var(--line-3); box-shadow: var(--shadow-lift); }
.mkt-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line-2); }
.mkt-card.is-up::before { background: var(--up); }
.mkt-card.is-down::before { background: var(--down); }
.mkt-top { display: flex; align-items: center; gap: 10px; }
.mkt-top .chip { margin-left: auto; }
.mkt-rank { font: 700 12px var(--font-mono); color: var(--muted); letter-spacing: 0.06em; }
.mkt-id { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mkt-name { font: 600 16px/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-spark { width: calc(100% + 28px) !important; height: 44px !important; margin: 0 -14px; }
.mkt-quote { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mkt-price { font: 700 20px/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.mkt-metric { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); font: 600 12.5px var(--font-mono); }
.mkt-metric b { font-weight: 700; }

/* the terminal: live quote, big ranges, the crosshair, the two panels */
.term-quote { gap: 6px; }
.term-live { display: inline-flex; align-items: center; gap: 7px; font: 700 10.5px var(--font-mono); letter-spacing: 0.12em; color: var(--up); }
.term-updated { color: var(--muted); font-weight: 600; letter-spacing: 0.02em; text-transform: none; }
.term-updated::before { content: "· "; }
.term-moves { display: flex; align-items: center; gap: 10px; }
.term-since { font: 600 12px var(--font-mono); }
.term-since.up { color: var(--up); }
.term-since.down { color: var(--down); }
.term-bar { flex-wrap: wrap; }
.seg.range-tabs { padding: 4px; gap: 4px; background: var(--bg-2); border-color: var(--line-3); }
.range-tabs button { height: 36px; min-width: 64px; padding: 0 16px; font-size: 14px; font-weight: 800; letter-spacing: 0.06em; }
.range-tabs button[aria-pressed="true"], .night .range-tabs button[aria-pressed="true"] { background: var(--act); color: var(--on-act); box-shadow: none; }
.term-hint { color: var(--muted); }
.term-panels { display: grid; gap: 12px; padding-top: 4px; border-top: 1px solid var(--line-2); }
.seg.panel-tabs { padding: 0; gap: 18px; border: 0; border-radius: 0; background: none; }
.panel-tabs button { height: 38px; padding: 0; border-radius: 0; font: 700 13px var(--font-text); letter-spacing: 0; color: var(--muted); border-bottom: 2px solid transparent; }
.panel-tabs button[aria-pressed="true"], .night .panel-tabs button[aria-pressed="true"] { background: none; color: var(--ink); border-bottom-color: var(--act); box-shadow: none; }
.term-panel { min-height: 120px; }
.bk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.bk-head b { font-size: 15px; }
.breakdown, .contrib { display: grid; gap: 2px; }
.bk-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); font: 600 12.5px var(--font-mono); font-variant-numeric: tabular-nums; }
.bk-row.bk-cols { border-top: 0; padding: 0 0 4px; font: 600 10.5px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.bk-tok { display: flex; align-items: center; gap: 9px; min-width: 0; }
.bk-tok > span { display: grid; gap: 1px; min-width: 0; }
.bk-tok b { font: 700 13px var(--font-mono); }
.bk-tok .fine { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-text); }
.bk-bar { position: relative; display: flex; align-items: center; gap: 8px; }
.bk-bar span { display: block; height: 8px; border-radius: 3px; background: var(--muted); flex: none; }
.bk-bar.k-stock span { background: var(--k-stock); }
.bk-bar.k-preipo span { background: var(--k-preipo); }
.bk-bar.k-crypto span { background: var(--k-crypto); }
.bk-bar.k-meme span { background: var(--k-meme); }
.bk-bar.k-stable span { background: var(--k-stable); }
.bk-bar em { font-style: normal; color: var(--ink-2); font-size: 12px; }
.bk-sol { text-align: right; }
.bk-get { text-align: right; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breakdown > .fine { margin-top: 6px; }
.ct-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 90px; gap: 12px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.ct-row .bk-tok .fine { display: flex; gap: 6px; align-items: center; }
.ct-row .chg { font-size: 11px; }
.ct-bar { position: relative; height: 12px; }
.ct-bar::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--line-3); }
.ct-bar span { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.ct-bar .up { left: 50%; background: var(--up); }
.ct-bar .down { right: 50%; background: var(--down); }
.ct-val { text-align: right; font: 700 13px var(--font-mono); font-variant-numeric: tabular-nums; }
.ct-val.up, .ct-total .up { color: var(--up); }
.ct-val.down, .ct-total .down { color: var(--down); }
.ct-total { display: flex; justify-content: space-between; padding-top: 10px; border-top: 2px solid var(--line-3); font: 700 13px var(--font-mono); }

/* the chart's crosshair: a line across, the price on the axis, a tag with the exact price, time and move */
.chart-cross-y { position: absolute; left: 0; right: 66px; top: 0; height: 1px; background: var(--line-3); opacity: 0; pointer-events: none; }
.chart-axis .chart-hover { padding: 4px 6px; border-radius: 4px; background: var(--ink); color: var(--bg); font-weight: 700; z-index: 2; opacity: 0; }
.chart-plot.hover .chart-cross-y, .chart-plot.hover .chart-hover { opacity: 1; }
.chart-tip { display: grid; gap: 3px; min-width: 160px; padding: 9px 11px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); }
.tip-price { font: 800 16px var(--font-mono); font-variant-numeric: tabular-nums; }
.tip-time { font: 500 11px var(--font-mono); opacity: 0.75; }
.tip-chg { font: 700 11.5px var(--font-mono); }
.tip-chg.up { color: #15803d; }
.tip-chg.down { color: #dc2626; }

/* this week's race */
.race-card { display: grid; gap: 18px; padding: clamp(20px, 3vw, 28px); border-radius: var(--r-lg); background: var(--bg); border: 1px solid var(--line-2); border-top: 3px solid var(--gold); }
.race-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.race-head h3 { font: 600 26px/1.1 var(--font-display); margin-top: 6px; }
.race-left { font: 600 13px var(--font-mono); color: var(--muted); white-space: nowrap; }
.race-left b { font-size: 20px; color: var(--ink); }
.race-top { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.race-top li { display: grid; grid-template-columns: 34px minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.race-fund { display: flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; }
.race-fund span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race-who { color: var(--ink-2); font: 600 13px var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.race-who:hover, .race-fund:hover span:last-child { color: var(--act-ink); }
.race-ret { font: 800 16px var(--font-mono); font-variant-numeric: tabular-nums; }
.race-ret.up { color: var(--up); }
.race-ret.down { color: var(--down); }
.medal.sm, .race-top .medal { width: 30px; height: 30px; font-size: 14px; }
.medal.gold { background: var(--gold); }
.medal.silver { background: #e4e4e7; }
.medal.bronze { background: #f0c09a; }

/* follow, share, a wallet's face, a winner's badge */
.btn.follow { gap: 8px; }
.follow-star { font-size: 15px; line-height: 1; color: var(--gold-ink); }
.follow-n { font: 700 12px var(--font-mono); color: var(--muted); padding-left: 8px; border-left: 1px solid var(--line-2); }
.btn.follow.on { border-color: var(--act); color: var(--act-ink); background: var(--act-soft); }
.share { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.avatar { display: inline-block; flex: none; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2); }
.avatar svg { display: block; }
.who-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.who-link:hover { color: var(--act-ink); }
.badge-win { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 5px; background: var(--gold); color: var(--on-light); font: 800 11px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }

@media (max-width: 1040px) {
  .explore-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 84px; }
  .bk-row .bk-get { display: none; }
  .race-top li { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .race-top .race-who { display: none; }
}
@media (max-width: 560px) {
  .explore-grid { grid-template-columns: minmax(0, 1fr); }
  .stock-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explore-tabs button { padding: 0 12px; font-size: 12px; }
  .ct-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 76px; }
  .range-tabs button { min-width: 56px; padding: 0 12px; }
  .term-hint { display: none; }
}

/* the home terminal's dense panels: two columns of one-line rows */
.bk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.bk-cell { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 9px; row-gap: 5px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.bk-cell-id { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.bk-cell-id b { font: 700 12.5px var(--font-mono); }
.bk-cell-id .fine { font: 500 11px var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-cell-sol { font: 700 12.5px var(--font-mono); font-variant-numeric: tabular-nums; }
.bk-cell-bar { grid-column: 2 / -1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.bk-cell-bar span { display: block; height: 100%; background: var(--muted); }
.bk-cell-bar.k-stock span { background: var(--k-stock); }
.bk-cell-bar.k-preipo span { background: var(--k-preipo); }
.bk-cell-bar.k-crypto span { background: var(--k-crypto); }
.bk-cell-bar.k-meme span { background: var(--k-meme); }
.bk-cell-bar.k-stable span { background: var(--k-stable); }
.ct-cell { display: grid; grid-template-columns: 22px 64px minmax(0, 1fr) 52px; gap: 9px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
.ct-cell > b:first-of-type { font: 700 12.5px var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-cell .ct-val { font-size: 12.5px; }
.contrib.dense .ct-total, .breakdown.dense + .fine { margin-top: 4px; }
.stock-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1300px) { .stock-chip .sc-name { display: none; } }
@media (max-width: 560px) { .bk-grid { grid-template-columns: minmax(0, 1fr); } .stock-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-id { justify-content: space-between; }
.sc-id .chg { font-size: 11px; }
.sc-quote { justify-content: flex-start; gap: 8px; }
.sc-quote .sc-name { font-family: var(--font-text); }
.stock-chip .sc-name { display: none; }

/* the quote page: follow and share beside the title, the performance record */
.q-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.q-thesis .who-link { vertical-align: middle; }
.quote-main > .terminal-card { box-shadow: var(--shadow-lift); }
.perf { display: grid; gap: 18px; }
.pf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line-2); }
.pf-tile { display: grid; gap: 6px; align-content: start; padding: 14px 14px 14px 0; }
.pf-tile + .pf-tile { padding-left: 14px; border-left: 1px solid var(--line-2); }
.pf-tile b { font: 800 22px/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.pf-tile b.up { color: var(--up); }
.pf-tile b.down { color: var(--down); }
.pf-tile b.flat { color: var(--muted); }
.pf-vol { display: grid; gap: 10px; }
.pf-vol-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.vol-bars { display: flex; align-items: flex-end; gap: 5px; height: 96px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.vol-bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; }
.vol-fill { display: block; width: 100%; border-radius: 3px 3px 0 0; background: var(--surface-3); transition: background var(--t-fast); }
.vol-bar:last-child .vol-fill { background: var(--act); }
.vol-bar:hover .vol-fill { background: var(--ink-2); }
.vol-bar em { position: absolute; bottom: -18px; right: 0; font: 600 10px var(--font-mono); font-style: normal; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }

/* a creator's profile */
.profile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-top: clamp(32px, 5vw, 64px); padding-bottom: 24px; flex-wrap: wrap; }
.profile-id { display: flex; gap: 22px; align-items: flex-start; min-width: 0; }
.profile-id > div { display: grid; gap: 8px; min-width: 0; }
.profile-id .kicker { margin-bottom: 0; }
.profile-name { font: var(--display-weight) clamp(36px, 4.4vw, 56px)/1 var(--font-display); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.profile-bio { max-width: 40em; }
.profile-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.profile-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 24px; }
.profile-edit { display: grid; gap: 12px; max-width: 620px; margin-bottom: 8px; }
.field { display: grid; gap: 6px; }
.field > span { font: 600 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.field textarea.input { height: auto; min-height: 64px; padding-top: 10px; resize: vertical; font-family: var(--font-text); }
.creator-fund { display: grid; gap: 8px; }
.cf-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.cf-meta span { display: grid; gap: 4px; }
.cf-meta b { font: 700 13px var(--font-mono); }
.cf-meta b.up { color: var(--up); }
.cf-meta b.down { color: var(--down); }

/* the leaderboard's boards */
.board-head { margin-bottom: 18px; }
.board-head:empty { display: none; }
.board-race { border-top-color: var(--gold); }
.lb-val.up { color: var(--up); }
.lb-val.down { color: var(--down); }
.podium-val.up { color: var(--up); }
.podium-val.down { color: var(--down); }
.podium-face { display: inline-flex; }
.lb-sub .who-link, .lb-who .who-link { font-weight: 600; }
.board-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.bench { display: grid; gap: 2px; }
.bench-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--line); }
.bench-row:first-child { border-top: 0; }
.bench-row > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bench-row b { font: 700 14px var(--font-mono); }
.bench-row b.up { color: var(--up); }
.bench-row b.down { color: var(--down); }
.bench-row b.flat { color: var(--muted); }
.bench-row:hover > span:nth-child(2) { color: var(--act-ink); }

/* following */
.creator-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.creator-chip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); }
.creator-chip > span { display: grid; gap: 2px; min-width: 0; }
.creator-chip:hover { border-color: var(--line-3); }

@media (max-width: 1040px) {
  .profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profile-stats .hstat:nth-child(4) { padding-left: 0; border-left: 0; }
}
@media (max-width: 860px) {
  .q-actions, .profile-actions { align-items: flex-start; }
  .pf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pf-tile:nth-child(3) { padding-left: 0; border-left: 0; }
  .board-split { grid-template-columns: minmax(0, 1fr); }
  .cf-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .profile-id { flex-direction: column; }
  .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-stats .hstat { padding-left: 0 !important; border-left: 0 !important; }
}