/* ============================================================================
Barbell v2 — the trading surface.
Built on app.css's tokens and type scale, but with its own posture. The old
app was a set of editorial pages with a trade form on one of them: heroes,
eyebrows, generous margins, a display serif. This is an instrument. The feed
and the panel are on screen together, nothing navigates, and the numbers are
the loudest thing in the room.
Rules this file follows:
- Hairlines, not boxes. A border earns its place by separating two things
that would otherwise be confused.
- Numbers are mono and tabular, always. A price must not change width as it
ticks.
- One accent (--ink, which is white on black). Green and red are reserved
for figures. No decorative colour anywhere.
- Motion is 120ms and only ever a cross-fade. Nothing slides, bounces or
draws attention to the interface rather than the money.
============================================================================ */
:root{
--v2-rail:300px; /* the feed column */
--v2-top:52px; /* the top bar */
--v2-row:60px; /* one feed row */
--v2-gut:20px;
}
/* ---- frame ---------------------------------------------------------------- */
/* Every figure on this surface is tabular, inherited rather than repeated per rule — a number that
changes width as it ticks is the one thing an instrument must not do. */
.v2,.v2-scrim{font-variant-numeric:tabular-nums}
.v2{position:relative;z-index:1;height:100dvh;display:grid;
grid-template-rows:var(--v2-top) 1fr;
grid-template-columns:minmax(260px,var(--v2-rail)) 1fr;
grid-template-areas:"top top" "feed panel";
overflow:hidden}
.v2-top{grid-area:top;display:flex;align-items:center;gap:var(--s4);
padding:0 var(--v2-gut);border-bottom:1px solid var(--line);min-width:0}
.v2-brand{display:flex;align-items:center;gap:9px;font:700 16px/1 var(--sans);letter-spacing:-.01em;flex:none}
.v2-brand img{width:22px;height:22px}
.v2-top .tsearch{flex:1;max-width:520px;min-width:0}
.v2-bal{margin-left:auto;display:flex;align-items:center;gap:var(--s3);flex:none}
.v2-bal-v{font:var(--t-num);font-variant-numeric:tabular-nums}
.v2-bal-l{font:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
/* ---- the feed ------------------------------------------------------------- */
.v2-feed{grid-area:feed;border-right:1px solid var(--line);overflow-y:auto;overscroll-behavior:contain}
.v2-feed-head{position:sticky;top:0;z-index:2;background:var(--paper);
padding:var(--s3) var(--v2-gut);border-bottom:1px solid var(--line);display:flex;gap:var(--s2);align-items:center}
.v2-tab{font:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
background:none;border:0;padding:6px 0;margin-right:var(--s3);cursor:pointer;border-bottom:1px solid transparent}
.v2-tab.on{color:var(--ink);border-bottom-color:var(--ink)}
.v2-new{margin-left:auto;font:600 12px var(--sans);color:var(--paper);background:var(--ink);
border:0;border-radius:999px;padding:7px 13px;cursor:pointer}
.v2-themes{display:flex;gap:6px;padding:var(--s3) var(--v2-gut);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.v2-themes::-webkit-scrollbar{display:none}
.v2-theme{flex:none;font:500 12px var(--sans);color:var(--ink-2);background:none;
border:1px solid var(--line);border-radius:999px;padding:5px 10px;cursor:pointer;white-space:nowrap}
.v2-theme.on{color:var(--ink);border-color:var(--ink)}
/* A row, not a card. The whole thing is the target. */
.v2-row{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
padding:var(--s3) var(--v2-gut);border-bottom:1px solid var(--line);
transition:background .12s}
.v2-row:hover{background:var(--paper-2)}
.v2-row.on{background:var(--panel)}
.v2-row.on .v2-row-name{color:var(--ink)}
.v2-row-top{display:flex;align-items:baseline;gap:var(--s2)}
.v2-row-name{font:600 14px/1.25 var(--sans);color:var(--ink);flex:1;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-row-ret{font:var(--t-num);font-size:13px;font-variant-numeric:tabular-nums;flex:none}
.v2-row-ret.up{color:var(--safe)} .v2-row-ret.down{color:var(--degen)}
.v2-row-sub{display:flex;align-items:center;gap:6px;margin-top:5px;min-width:0}
.v2-row-toks{font:400 12px var(--mono);color:var(--ink-2);flex:1;min-width:0;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-row-by{font:400 11px var(--mono);color:var(--faint);flex:none}
.v2-avs{display:flex;flex:none}
.v2-avs img{width:16px;height:16px;border-radius:50%;background:var(--panel);
border:1px solid var(--paper);margin-left:-5px}
.v2-avs img:first-child{margin-left:0}
/* ---- the bar modal --------------------------------------------------------
A bar opens OVER the app rather than replacing part of it, so whatever you were doing is still
there when you close it. Same internal shape as the panel: a body that scrolls and an action footer
that does not. */
.v2-scrim{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
padding:var(--s5);background:rgba(0,0,0,.68);backdrop-filter:blur(3px);
animation:v2fade .12s ease-out}
@keyframes v2fade{from{opacity:0}to{opacity:1}}
.v2-modal{position:relative;display:flex;flex-direction:column;min-height:0;
width:min(1060px,100%);height:min(90dvh,920px);
background:var(--paper);border:1px solid var(--line-2);border-radius:18px;overflow:hidden;
box-shadow:0 40px 120px -40px #000;animation:v2rise .14s cubic-bezier(.16,1,.3,1)}
@keyframes v2rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.v2-modal-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--s5)}
.v2-modal-in{max-width:100%}
.v2-x{position:absolute;top:10px;right:12px;z-index:2;width:32px;height:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--ink-2);
background:var(--paper);border:1px solid var(--line);cursor:pointer;transition:color .12s,border-color .12s}
.v2-x:hover{color:var(--ink);border-color:var(--ink)}
@media (max-width:900px){
.v2-scrim{padding:0;align-items:flex-end}
.v2-modal{width:100%;height:auto;max-height:92dvh;border-radius:18px 18px 0 0;border-bottom:0}
}
/* Inside the modal: the thing on the left, what you might do about it on the right. Opening a bar is
not a declaration that you want to buy it, so the action column offers both sides and the left column
is sized to show the chart and the weights without scrolling. */
.v2-two{display:grid;grid-template-columns:1fr 340px;grid-template-rows:minmax(0,1fr);min-height:0;flex:1}
/* The left column never scrolls. It is a column of three: the header and the weights take what they
need, and the chart takes whatever is left. Sizing the chart to a fixed height instead meant it fit a
two-leg bar on a 900px screen and nothing else — a third leg or a shorter window and it scrolled. */
.v2-two-main{min-width:0;display:flex;flex-direction:column;overflow:hidden;padding:var(--s5)}
.v2-two-main .barchart{flex:1;min-height:0;display:flex;flex-direction:column}
.v2-two-main .bc-canvas{flex:1;min-height:120px;height:auto}
/* Many legs get their own scroll rather than squeezing the chart out of existence. */
.v2-two-main .v2-legs{flex:none;max-height:34%;overflow-y:auto;overscroll-behavior:contain}
.v2-two-side{min-width:0;display:flex;flex-direction:column;justify-content:flex-start;
border-left:1px solid var(--line);padding:var(--s6) var(--s5) var(--s5);
overflow-y:auto;overscroll-behavior:contain;background:var(--paper-2)}
/* buy or sell, chosen rather than inferred */
.v2-side{display:flex;gap:6px;padding:4px;border:1px solid var(--line);border-radius:999px;margin-bottom:var(--s4)}
.v2-side-b{flex:1;font:600 13px var(--sans);color:var(--ink-2);background:none;border:0;border-radius:999px;
padding:9px 0;cursor:pointer;transition:background .12s,color .12s}
.v2-side-b.on{background:var(--ink);color:var(--paper)}
.v2-side-b:disabled{opacity:.35;cursor:not-allowed}
.v2-side-b:disabled.on{background:var(--ink);opacity:1}
@media (max-width:900px){
.v2-two{grid-template-columns:1fr;overflow-y:auto}
.v2-two-main{overflow:visible;display:block}
.v2-two-main .bc-canvas{height:240px;flex:none}
.v2-two-main .v2-legs{max-height:none;overflow:visible}
.v2-two-side{border-left:0;border-top:1px solid var(--line);overflow:visible}
}
/* ---- the chart ------------------------------------------------------------
BarChart is reused as-is, but its styles live in buy.css, which belongs to the old buy page and is
not loaded here. Rather than pull that whole file in, the few classes it renders are dressed in this
UI's own language. Without these the chart's furniture had no styling at all: "since called" ran
into its own figure, and the token tabs rendered as "BarbellNVDAai17z". */
.v2-two-main .barchart{min-width:0}
.v2-two-main .bc-overall{display:flex;gap:var(--s5);margin-bottom:var(--s3);flex:none}
.v2-two-main .bc-o{display:flex;flex-direction:column;gap:3px}
.v2-two-main .bc-o-l{font:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.v2-two-main .bc-o-v{font:var(--t-num-lg);font-variant-numeric:tabular-nums;color:var(--ink)}
.v2-two-main .bc-o-v.up{color:var(--safe)} .v2-two-main .bc-o-v.down{color:var(--degen)}
/* Which leg you are looking at: the composite, or one coin. */
.v2-two-main .bc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--s2);flex:none}
.v2-two-main .bc-tabs button{font:500 12px var(--sans);color:var(--ink-2);background:none;
border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer;transition:color .12s,border-color .12s}
.v2-two-main .bc-tabs button:hover{color:var(--ink)}
.v2-two-main .bc-tabs button.on{color:var(--ink);border-color:var(--ink)}
/* Timeframe. */
.v2-two-main .bc-tf{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:var(--s2);flex:none}
.v2-two-main .slip-preset{font:400 11px var(--mono);color:var(--ink-2);background:none;
border:1px solid var(--line);border-radius:7px;padding:4px 9px;cursor:pointer;transition:color .12s,border-color .12s}
.v2-two-main .slip-preset:hover{color:var(--ink)}
.v2-two-main .slip-preset.on{color:var(--ink);border-color:var(--ink)}
.v2-two-main .bc-canvas{width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.v2-two-main .b-perf-empty{font:var(--t-small);color:var(--faint);padding:var(--s5) 0}
/* ---- the theme picker, in the builder --------------------------------------
Same story as the chart: ThemePicker is reused as-is and every one of its classes is defined in
buy.css, which v2 does not load. Dressed here instead of dragging the old page's stylesheet in. */
.v2-modal .b-themes{margin-top:var(--s4)}
.v2-modal .b-themes-h{font:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:var(--s2)}
.v2-modal .b-themes-h span{text-transform:none;letter-spacing:0;color:var(--faint);margin-left:6px}
.v2-modal .b-themes-row{display:flex;flex-wrap:wrap;gap:6px}
.v2-modal .b-theme-chip{font:500 12px var(--sans);color:var(--ink-2);background:none;
border:1px solid var(--line);border-radius:999px;padding:6px 11px;cursor:pointer;transition:color .12s,border-color .12s}
.v2-modal .b-theme-chip:hover{color:var(--ink)}
.v2-modal .b-theme-chip.on{color:var(--ink);border-color:var(--ink)}
.v2-modal .b-theme-chip.new{color:var(--faint);border-style:dashed}
.v2-modal .b-theme-new{display:flex;gap:6px;margin-top:var(--s3)}
.v2-modal .b-theme-emoji{width:56px;flex:none;text-align:center}
.v2-modal .b-theme-name{flex:1;min-width:0}
.v2-modal .b-theme-emoji,.v2-modal .b-theme-name{font:400 14px var(--sans);color:var(--ink);
background:var(--paper-2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.v2-modal .b-theme-go{flex:none;font:600 12px var(--sans);color:var(--paper);background:var(--ink);
border:0;border-radius:10px;padding:9px 14px;cursor:pointer}
.v2-modal .b-theme-go:disabled{opacity:.4;cursor:not-allowed}
.v2-modal .b-theme-msg{font:var(--t-small);color:var(--ink-2);margin-top:var(--s2)}
.v2-modal .b-theme-use{font:600 12px var(--sans);color:var(--ink);background:none;
border:1px solid var(--line-2);border-radius:999px;padding:4px 10px;cursor:pointer;margin-left:4px}
/* ---- the panel ------------------------------------------------------------ */
.v2-panel{grid-area:panel;display:flex;flex-direction:column;min-height:0;overflow:hidden}
/* The panel itself does NOT scroll. It was one long page: a 760px strip centred in a 1,620px column,
everything stacked, and leverage so far down it read as a separate app. Now the shell is fixed and
only the columns inside it move — same posture as the rail, which is the one list that should. */
.v2-panel-scroll{flex:1;min-height:0;overflow:hidden;display:flex;padding:var(--s5) var(--s5) 0}
.v2-panel-in{flex:1;min-width:0;min-height:0;width:100%;max-width:1500px;margin:0 auto;
display:flex;flex-direction:column;animation:v2in .12s ease-out}
@keyframes v2in{from{opacity:0}to{opacity:1}}
.v2-head{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s4)}
.v2-pfp{width:52px;height:52px;border-radius:50%;flex:none;background:var(--panel);
border:1px solid var(--line-2);object-fit:cover}
.v2-title{font:600 26px/1.15 var(--sans);letter-spacing:-.02em;min-width:0;word-break:break-word}
.v2-meta{display:flex;align-items:center;gap:var(--s2);margin-top:6px;flex-wrap:wrap}
.v2-by{font:400 12px var(--mono);color:var(--ink-2)}
.v2-thesis{font:var(--t-body);color:var(--ink-2);margin-top:var(--s2);max-width:60ch}
.v2-share{flex:none;font:600 12px var(--sans);color:var(--ink-2);background:none;
border:1px solid var(--line-2);border-radius:999px;padding:7px 14px;cursor:pointer;transition:color .12s,border-color .12s}
.v2-share:hover{color:var(--ink);border-color:var(--ink)}
.v2-guard{display:inline-flex;align-items:center;gap:6px;font:var(--t-label);letter-spacing:.06em;
text-transform:uppercase;color:var(--safe)}
.v2-guard .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.v2-guard.warn{color:var(--warn)}
/* legs: a table, because that is what it is */
.v2-legs{margin:var(--s4) 0}
.v2-leg{display:grid;grid-template-columns:22px 1fr auto auto;gap:var(--s3);align-items:center;
padding:11px 0;border-bottom:1px solid var(--line)}
.v2-leg:last-child{border-bottom:0}
.v2-leg img{width:22px;height:22px;border-radius:50%;background:var(--panel)}
.v2-leg-sym{font:600 14px var(--sans);display:flex;align-items:center;gap:7px;min-width:0}
.v2-leg-sub{font:400 11px var(--mono);color:var(--faint);margin-top:2px}
.v2-leg-w{font:var(--t-num);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right}
.v2-leg-v{font:var(--t-num);font-size:13px;font-variant-numeric:tabular-nums;text-align:right;min-width:74px}
/* A leg row that opens something. It must look like it does, because a row that reads as tappable and
is not is exactly the dead end this rebuild set out to remove. */
.v2-leg.tap{width:100%;background:none;border:0;border-bottom:1px solid var(--line);
cursor:pointer;text-align:left;transition:background .12s}
.v2-leg.tap:hover{background:var(--paper-2)}
.v2-leg.tap:disabled{cursor:default}
.v2-leg.tap:disabled:hover{background:none}
.v2-leg-w.up{color:var(--safe)} .v2-leg-w.down{color:var(--degen)}
/* A leg and, when something is wrong with it, the way to fix it. */
.v2-legrow{border-bottom:1px solid var(--line)}
.v2-legrow:last-child{border-bottom:0}
.v2-legrow .v2-leg{border-bottom:0}
.v2-leg-sub.ok{color:var(--safe)}
.v2-leg-sub.no{color:var(--degen)}
.v2-leg-sub.confirm{color:var(--warn)}
.v2-fix{margin:0 0 var(--s3);padding:var(--s3);border:1px solid var(--line-2);border-radius:10px;background:var(--paper-2)}
.v2-fix-h{font:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.v2-fix-sub{font:var(--t-small);color:var(--ink-2)}
.v2-cand{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;background:none;
border:1px solid var(--line);border-radius:9px;padding:8px 10px;margin-top:6px;cursor:pointer;color:var(--ink)}
.v2-cand:hover{border-color:var(--ink)}
.v2-cand b{font:600 13px var(--sans)}
.v2-cand span{font:400 11px var(--mono);color:var(--ink-2)}
/* Advanced: present, never in the way. */
.v2-adv{margin-bottom:var(--s3)}
.v2-adv > summary{font:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
cursor:pointer;list-style:none}
.v2-adv > summary::-webkit-details-marker{display:none}
.v2-adv > summary::after{content:" ▾";opacity:.6}
.v2-adv[open] > summary::after{content:" ▴"}
.v2-adv > summary:hover{color:var(--ink)}
.v2-adv-in{margin-top:var(--s3)}
.v2-tag.long{color:var(--safe);border-color:var(--safe)}
.v2-tag.short{color:var(--degen);border-color:var(--degen)}
.v2-tag{font:400 10px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);
border:1px solid var(--line-2);border-radius:4px;padding:1px 4px}
/* The action block: presets, amount, the line of truth, one button. It is the reason the screen exists,
so it is a fixed footer of the panel rather than something you scroll to find. */
.v2-act{flex:none;border-top:1px solid var(--line-2);background:var(--paper);
padding:var(--s4) var(--s5) var(--s5)}
.v2-presets{display:flex;gap:var(--s2);margin-bottom:var(--s3)}
.v2-preset{flex:1;font:var(--t-num);font-size:14px;color:var(--ink-2);background:none;
border:1px solid var(--line);border-radius:10px;padding:11px 0;cursor:pointer;transition:border-color .12s,color .12s}
.v2-preset:hover{border-color:var(--line-3)}
.v2-preset.on{color:var(--ink);border-color:var(--ink)}
.v2-amt{display:flex;align-items:center;gap:var(--s2);border:1px solid var(--line-2);
border-radius:12px;padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
.v2-amt .cur{font:var(--t-num);font-size:22px;color:var(--ink-2)}
.v2-amt input{flex:1;min-width:0;font:600 30px/1 var(--mono);font-variant-numeric:tabular-nums;
color:var(--ink);background:none;border:0;outline:0;padding:0}
.v2-amt .unit{font:var(--t-label);letter-spacing:.08em;color:var(--faint)}
.v2-lines{margin-bottom:var(--s4)}
.v2-line{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
font:400 12px var(--mono);color:var(--ink-2);padding:4px 0;font-variant-numeric:tabular-nums}
.v2-line > span:first-child{min-width:0}
.v2-line > b,.v2-line > span:last-child{flex:none;white-space:nowrap}
.v2-line b{color:var(--ink);font-weight:600}
.v2-line.total{color:var(--ink);border-top:1px solid var(--line);margin-top:6px;padding-top:9px}
/* A partial fill is not a success. It gets the colour of the thing it is. */
.v2-line.total.warn{color:var(--warn)}
.v2-line.total.warn > span{white-space:normal;line-height:1.45}
.v2-cta{width:100%;font:600 16px/1 var(--sans);color:var(--paper);background:var(--ink);
border:0;border-radius:12px;padding:16px;cursor:pointer;transition:opacity .12s}
.v2-cta:hover:not(:disabled){opacity:.88}
.v2-cta:disabled{opacity:.35;cursor:not-allowed}
.v2-block{margin-top:var(--s4)}
/* Money in, money out, and the key. Three equal choices, because they are. */
.v2-money{display:flex;gap:6px;margin-top:var(--s4)}
.v2-money-b{flex:1;font:600 13px var(--sans);color:var(--ink-2);background:none;
border:1px solid var(--line);border-radius:10px;padding:11px 0;cursor:pointer;transition:color .12s,border-color .12s}
.v2-money-b:hover{color:var(--ink)}
.v2-money-b.on{color:var(--ink);border-color:var(--ink)}
.v2-out{margin-top:var(--s3);padding:var(--s4);border:1px solid var(--line);border-radius:12px;background:var(--paper-2)}
.v2-out-row{display:flex;gap:6px;margin-top:8px;align-items:center}
.v2-out-row .v2-in{flex:1;min-width:0}
.v2-out-note{font:var(--t-small);color:var(--ink-2);margin-bottom:var(--s3)}
.v2-in{width:100%;font:400 14px var(--mono);color:var(--ink);background:var(--paper);
border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-top:8px}
.v2-in::placeholder{color:var(--faint)}
.v2-cta.sm{flex:none;width:auto;font-size:13px;padding:10px 16px;border-radius:10px}
/* Money the user cannot see is money they can lose. This only appears when there is some. */
.v2-rescue{margin-top:var(--s4);padding:var(--s4);border:1px solid var(--warn);border-radius:12px;
background:color-mix(in srgb, var(--warn) 8%, transparent)}
.v2-rescue-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.v2-cta.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-2)}
.v2-cta.ghost:hover{color:var(--ink);border-color:var(--ink)}
.v2-cta.long{background:var(--safe);color:#05130b}
.v2-cta.short{background:var(--degen);color:#190604}
.v2-cta-sub{font:400 11px var(--mono);color:var(--faint);text-align:center;margin-top:9px}
/* position, receipt, status */
.v2-pos{display:flex;align-items:baseline;gap:var(--s4);margin:var(--s4) 0}
.v2-pos-v{font:var(--t-num-lg);font-size:34px;font-variant-numeric:tabular-nums}
.v2-pos-p{font:var(--t-num);font-variant-numeric:tabular-nums}
.v2-pos-p.up{color:var(--safe)} .v2-pos-p.down{color:var(--degen)}
.v2-status{font:400 12px var(--mono);color:var(--ink-2);margin-top:var(--s3);min-height:16px}
.v2-status.err{color:var(--degen)}
.v2-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
height:100%;gap:var(--s3);color:var(--faint);font:var(--t-body);text-align:center;padding:var(--s6)}
.v2-skel{height:10px;border-radius:4px;background:var(--line);margin:8px 0;
animation:v2pulse 1.2s ease-in-out infinite}
@keyframes v2pulse{0%,100%{opacity:.5}50%{opacity:1}}
/* ---- narrow: the panel becomes a sheet over the feed ---------------------- */
@media (max-width:900px){
.v2{grid-template-columns:1fr;grid-template-areas:"top" "feed"}
.v2-panel{grid-area:feed;position:fixed;inset:var(--v2-top) 0 0 0;background:var(--paper);
z-index:5;padding:var(--s4) var(--s4) var(--s7)}
.v2-panel.hidden{display:none}
.v2-back{display:inline-flex;align-items:center;gap:6px;font:var(--t-label);letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-2);background:none;border:0;padding:0 0 var(--s3);cursor:pointer}
}
@media (min-width:901px){ .v2-back{display:none} }
/* ---- scrollbars ----------------------------------------------------------- */
/* Every scrolling region in the app, including the two inside the modal — those were left out and so
showed the operating system's scrollbar in the middle of a dark panel. */
.v2-feed,.v2-panel-scroll,.v2-two-main,.v2-two-side,.v2-two-main .v2-legs{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.v2-feed::-webkit-scrollbar,.v2-panel-scroll::-webkit-scrollbar,
.v2-two-main::-webkit-scrollbar,.v2-two-side::-webkit-scrollbar,.v2-two-main .v2-legs::-webkit-scrollbar{width:10px}
.v2-feed::-webkit-scrollbar-track,.v2-panel-scroll::-webkit-scrollbar-track,
.v2-two-main::-webkit-scrollbar-track,.v2-two-side::-webkit-scrollbar-track,.v2-two-main .v2-legs::-webkit-scrollbar-track{background:transparent}
.v2-feed::-webkit-scrollbar-thumb,.v2-panel-scroll::-webkit-scrollbar-thumb,
.v2-two-main::-webkit-scrollbar-thumb,.v2-two-side::-webkit-scrollbar-thumb,
.v2-two-main .v2-legs::-webkit-scrollbar-thumb{
background:var(--line-2);border-radius:999px;border:3px solid transparent;background-clip:content-box}
.v2-feed::-webkit-scrollbar-thumb:hover,.v2-panel-scroll::-webkit-scrollbar-thumb:hover,
.v2-two-main::-webkit-scrollbar-thumb:hover,.v2-two-side::-webkit-scrollbar-thumb:hover{
background:var(--line-3);background-clip:content-box}
/* ---- rail tabs ------------------------------------------------------------
Feed and Markets are peers over one column, so they sit above everything the
column holds — above the feed's own sort tabs, not beside them. Two levels of
tab in one header would read as one confused row of six buttons. */
.v2-rail-tabs{display:flex;border-bottom:1px solid var(--line)}
.v2-rail-tab{flex:1;font:600 13px var(--sans);color:var(--ink-2);background:none;border:0;
border-bottom:2px solid transparent;padding:13px 0;cursor:pointer;transition:color .12s,border-color .12s}
.v2-rail-tab:hover{color:var(--ink)}
.v2-rail-tab.on{color:var(--ink);border-bottom-color:var(--ink)}
/* ---- markets --------------------------------------------------------------
A market row is a feed row's twin: identity left, figures right, one line.
Prices tick every five seconds, so every number here is tabular — a mark that
changes width as it moves makes the whole column jitter. */
.v2-mkt-head{display:flex;gap:var(--s2);align-items:center;padding:var(--s3) var(--v2-gut);
border-bottom:1px solid var(--line)}
.v2-mkt-q{flex:1;min-width:0;font:400 12px var(--mono);color:var(--ink);background:var(--paper-2);
border:1px solid var(--line);border-radius:8px;padding:6px 9px;outline:none}
.v2-mkt-q:focus{border-color:var(--line-3)}
.v2-mkt-q::placeholder{color:var(--faint)}
.v2-mkt{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:var(--s3);align-items:center;
width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
padding:11px var(--v2-gut);cursor:pointer;transition:background .12s}
.v2-mkt:hover{background:var(--paper-2)}
.v2-mkt.on{background:var(--panel)}
.v2-mkt-sym{font:600 13px var(--sans);color:var(--ink);display:flex;align-items:center;gap:6px;
min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* the max-leverage badge never wins space from the price: it is the least useful thing in the row */
.v2-mkt-lev{font:400 10px var(--mono);color:var(--faint);flex:none}
.v2-mkt-px{font:var(--t-num);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink);
min-width:74px;text-align:right}
.v2-mkt-ch{font:var(--t-num);font-size:12px;font-variant-numeric:tabular-nums;min-width:60px;text-align:right}
.v2-mkt-ch.up{color:var(--safe)} .v2-mkt-ch.down{color:var(--degen)}
.v2-mkt-vol{font:400 11px var(--mono);color:var(--faint);min-width:46px;text-align:right}
.v2-mkt-list{overflow-y:auto}
/* Inside the builder's sheet the list is one scroll region among several, so it
is capped rather than allowed to grow the sheet past the viewport. */
.v2-mkt-list.compact{max-height:38vh;margin:0 calc(var(--v2-gut) * -1)}
.v2-mkt-list.compact .v2-mkt{grid-template-columns:1fr auto auto}
/* ---- leverage -------------------------------------------------------------
Long and short are the only place in v2 where a control is coloured, and they
earn it: the direction of a leveraged position is the one thing that must
never be misread. */
.v2-side-b.long.on{background:var(--safe);color:#05130b}
.v2-side-b.short.on{background:var(--degen);color:#190604}
.v2-presets.lev{flex-wrap:wrap}
.v2-presets.lev .v2-preset{flex:1 0 52px;font-size:13px}
.v2-sidedot{width:22px;height:22px;border-radius:50%;background:var(--panel);
border:2px solid var(--line-2);box-sizing:border-box}
.v2-sidedot.long{border-color:var(--safe)} .v2-sidedot.short{border-color:var(--degen)}
/* a resting trigger order, under the position it protects */
.v2-trig{display:flex;align-items:center;gap:8px;padding:6px 0 6px 30px;
font:var(--t-num);font-size:12px;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.v2-trig-x{margin-left:auto;font:400 12px var(--sans);color:var(--faint);background:none;
border:0;cursor:pointer;padding:2px 6px}
.v2-trig-x:hover{color:var(--degen)}
.v2-posrow{display:flex;gap:6px;padding:0 0 var(--s3) 30px;flex-wrap:wrap}
.v2-posrow .v2-cta.sm{flex:1 0 auto;font-size:12px;padding:8px 12px}
/* ---- nested layer ---------------------------------------------------------
One layer over the modal, no deeper. The scrim is lighter than the modal's so
the thing underneath stays legible — you are adding to that bar, not leaving
it, and the sheet should read as attached to it rather than as a new place. */
.v2-scrim.nested{z-index:50;background:rgba(0,0,0,.45)}
.v2-sheet{position:relative;width:min(520px,94vw);max-height:min(84dvh,720px);overflow-y:auto;
background:var(--paper);border:1px solid var(--line-2);border-radius:18px;
padding:var(--s5) var(--v2-gut) var(--s5)}
/* ---- locked while working -------------------------------------------------
A perp deposit chains four steps and two signatures over about a minute, and
a withdraw runs for minutes. The close button stays visible and explains
itself rather than disappearing, so the modal never looks broken. */
.v2-modal.locked{box-shadow:0 0 0 1px var(--line-3)}
.v2-x:disabled{opacity:.3;cursor:progress}
.v2-x:disabled:hover{color:var(--ink-2);border-color:var(--line)}
/* the market's own candles, sized like the basket chart it replaces */
.v2-two-main .pc{display:flex;flex-direction:column;flex:1;min-height:0;margin-top:var(--s3)}
.v2-two-main .pc-cv{flex:1;min-height:140px;height:auto!important;border-radius:12px;
border:1px solid var(--line);background:var(--panel)}
/* ---- net worth ------------------------------------------------------------
The first number on the panel and the largest thing on it. Everything else in
the profile is a breakdown of this, so it gets the weight and nothing below it
competes. */
.v2-net{margin-top:var(--s5)}
.v2-net-v{font:var(--t-num);font-size:34px;line-height:1.05;font-variant-numeric:tabular-nums;
color:var(--ink);margin-top:4px}
.v2-net-sub{display:flex;gap:var(--s3);margin-top:6px;
font:400 12px var(--mono);color:var(--faint);flex-wrap:wrap}
.v2-net-p{font:var(--t-num);font-size:14px;font-variant-numeric:tabular-nums;margin-top:8px}
.v2-net-p.up{color:var(--safe)} .v2-net-p.down{color:var(--degen)}
.v2-net-since{color:var(--faint);font-size:11px}
/* No axes and no labels: it answers "which way" and nothing else. A second
reading would need a real chart, and there is one in the modal. */
.v2-spark{display:block;width:100%;height:44px;margin-top:10px}
.v2-net-tfs{display:flex;gap:5px;margin-top:8px}
.v2-tf{font:400 11px var(--mono);color:var(--faint);background:none;border:1px solid var(--line);
border-radius:7px;padding:3px 9px;cursor:pointer;transition:color .12s,border-color .12s}
.v2-tf:hover{color:var(--ink)}
.v2-tf.on{color:var(--ink);border-color:var(--ink)}
/* ---- profile tabs ---------------------------------------------------------
In a panel that is always on screen, the cost of a section is vertical space,
not a click. These hide four sections behind one row so net worth keeps the
top of the fold. */
.v2-ptabs{display:flex;gap:var(--s3);margin:var(--s6) 0 var(--s4);border-bottom:1px solid var(--line)}
.v2-ptab{font:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
background:none;border:0;border-bottom:2px solid transparent;padding:0 0 9px;cursor:pointer;
transition:color .12s,border-color .12s}
.v2-ptab:hover{color:var(--ink)}
.v2-ptab.on{color:var(--ink);border-bottom-color:var(--ink)}
/* a ranking position, in the slot a token logo uses on every other row */
.v2-rank{width:22px;font:var(--t-num);font-size:12px;font-variant-numeric:tabular-nums;
color:var(--faint);text-align:center}
/* an author's handle is a link to their record */
.v2-by.link{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;
text-decoration-color:var(--line-3);text-underline-offset:3px}
.v2-by.link:hover{color:var(--ink);text-decoration-color:var(--ink)}
/* figures inside a summary row carry the same colours as everywhere else */
.v2-line .up,.v2-line b.up{color:var(--safe)}
.v2-line .down,.v2-line b.down{color:var(--degen)}
.v2-pos-v.up{color:var(--safe)} .v2-pos-v.down{color:var(--degen)}
/* ---- guard dot on a feed row ----------------------------------------------
4px, before the name. The verdict is already fetched for every row; showing
nothing while it is still in flight is deliberate — an absent dot means "not
checked yet", and a grey one would read as a quiet all-clear. */
.v2-dot{width:5px;height:5px;border-radius:50%;flex:none;margin-right:1px}
.v2-dot.ok{background:var(--safe)}
.v2-dot.no{background:var(--degen)}
.v2-dot.confirm{background:var(--warn)}
/* ---- theme hero -----------------------------------------------------------
A house theme IS a bar, already built and guarded. Picking its chip used to
just filter the list and hide the one thing worth opening. */
.v2-hero{padding:var(--s4) var(--v2-gut);border-bottom:1px solid var(--line);background:var(--paper-2)}
.v2-hero-top{display:flex;align-items:center;gap:var(--s3)}
.v2-hero-emoji{font-size:22px;line-height:1;flex:none}
.v2-hero-name{font:600 15px var(--sans);color:var(--ink);overflow:hidden;
white-space:nowrap;text-overflow:ellipsis}
.v2-hero-n{font:400 11px var(--mono);color:var(--faint);flex:none}
.v2-hero-blurb{font:var(--t-small);color:var(--ink-2);margin-top:6px}
/* character counter under the thesis, so the cap is visible before it bites */
.v2-count{font:400 11px var(--mono);color:var(--faint);margin-top:6px}
/* ---- a text field ---------------------------------------------------------
.v2-amt is a WRAPPER whose colours live on `.v2-amt input`, so putting that
class straight on an inherited the border and none of the palette —
the name and thesis boxes rendered as white browser defaults on a black page.
This is the field itself, not a frame around one. */
.v2-field{display:block;width:100%;font:400 15px var(--sans);color:var(--ink);
background:var(--paper-2);border:1px solid var(--line-2);border-radius:12px;
padding:13px var(--s3);outline:none;margin-bottom:8px;transition:border-color .12s}
.v2-field:focus{border-color:var(--ink)}
.v2-field::placeholder{color:var(--faint)}
.v2-field.big{font:600 18px var(--sans)}
/* ---- the profile, as a dashboard ------------------------------------------
Fixed head, fixed tabs, scrolling columns. Net worth and the money controls
never move, because they are the answer to "how am I doing" and "get me in or
out" — neither should ever be below the fold. */
.v2-prof-head{flex:none}
.v2-prof-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);
gap:0 var(--s6);align-items:start;overflow:hidden}
/* Leverage is a TAB, not a second column. Side by side the two lists competed
for the same height and the perps one was always the half that got cut. */
.v2-col{min-width:0;min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain;
padding-bottom:var(--s6)}
.v2-col > .v2-bal-l:first-child{margin-top:0!important}
.v2-prof-foot{flex:none;padding:var(--s3) 0;border-top:1px solid var(--line)}
.v2-prof-foot .v2-cta{width:auto}
/* a column's own header: what it is on the left, its running total on the right */
.v2-colhead{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
margin-bottom:var(--s3);flex-wrap:wrap}
.v2-colhead-n{font:400 11px var(--mono);color:var(--faint)}
.v2-colhead-n .up{color:var(--safe)} .v2-colhead-n .down{color:var(--degen)}
.v2-col{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.v2-col::-webkit-scrollbar{width:8px}
.v2-col::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:4px}
.v2-col::-webkit-scrollbar-track{background:transparent}
/* Narrow: one column, and the panel goes back to being a page. A fixed shell
needs height to divide, and a phone has none to spare. */
@media (max-width:1080px){
.v2-prof-body,.v2-prof-body.two{grid-template-columns:minmax(0,1fr);overflow:visible}
.v2-col{overflow:visible;height:auto}
.v2-panel-scroll{overflow-y:auto;overscroll-behavior:contain}
.v2-panel-in{max-width:760px}
}
/* ---- stats -----------------------------------------------------------------
A label above a value. These were .v2-line rows, which are built for the
modal's narrow action column where a label and a number sit at opposite ends
of 300px. In a 1,500px panel that same markup reads as stray lines of grey
text with the numbers stranded across the room. */
/* Beside the name now, not under the chart, and sized to match: these are a
breakdown, not a headline. The headline is net worth and there is only one. */
.v2-stats{display:flex;flex-wrap:wrap;gap:var(--s5);justify-content:flex-end}
.v2-stat{min-width:78px;text-align:right}
.v2-stat-v{font:var(--t-num);font-size:14px;font-variant-numeric:tabular-nums;
color:var(--ink);margin-top:4px}
.v2-stat-v.up{color:var(--safe)} .v2-stat-v.down{color:var(--degen)}
/* ---- a holding, as a row of columns ---------------------------------------
.v2-leg puts a name and a figure at opposite ends, which works at 300px in the
modal and strands the numbers across the room at 1,200px in the panel. The
engine already returns the amount, the price and the unrealized figure; a
holdings list with only two numbers in it is not a holdings list. */
.v2-hrow{display:grid;grid-template-columns:22px minmax(80px,1.4fr) 1fr 1fr 1.1fr minmax(80px,.8fr);
gap:var(--s3);align-items:center;width:100%;text-align:left;background:none;border:0;
border-bottom:1px solid var(--line);padding:11px 0;cursor:pointer;transition:background .12s}
.v2-hrow:hover{background:var(--paper-2)}
.v2-hrow:disabled{cursor:default}
.v2-hrow:disabled:hover{background:none}
.v2-hrow img{width:22px;height:22px;border-radius:50%;background:var(--panel)}
.v2-hcell{font:var(--t-num);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-2);
text-align:right;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.v2-hcell.val{color:var(--ink)}
.v2-hcell.pnl.up{color:var(--safe)} .v2-hcell.pnl.down{color:var(--degen)}
.v2-hcell .sub{opacity:.65;font-size:11px}
/* Narrow: amount and price are the first things to go — value and PnL are why
anyone opened this. */
@media (max-width:1240px){
.v2-hrow{grid-template-columns:22px minmax(0,1fr) auto minmax(70px,auto)}
.v2-hrow .v2-hcell.num:not(.pnl){display:none}
}
/* the column names. Same grid as a row so the labels sit over their own figures. */
.v2-hhead{padding:0 0 7px;border-bottom:1px solid var(--line-2);cursor:default}
.v2-hhead:hover{background:none}
.v2-hhead .v2-bal-l{text-align:right;font-size:10px}
/* nth-CHILD, not nth-of-type: every cell here is a , including the empty one over the logo
column, so :first-of-type matched nothing and "coin" sat right-aligned over blank space instead of
above the symbols. Children are 1 logo, 2 coin, 3 amount, 4 price, 5 unrealized, 6 value. */
.v2-hhead > :nth-child(2){text-align:left}
@media (max-width:1240px){
.v2-hhead > :nth-child(3),.v2-hhead > :nth-child(4){display:none}
}
/* Where the curve would be. A silent gap reads as a broken chart. */
.v2-spark-none{height:44px;display:flex;align-items:center;font:400 11px var(--fig);color:var(--faint)}
/* ---- the head band --------------------------------------------------------
Identity left, breakdown and money right. Three stacked blocks used to sit
between the name and the chart and push it off the fold; none of them is a
headline and all of them fit in the space next to a name. */
.v2-topline{display:flex;align-items:flex-start;justify-content:space-between;
gap:var(--s6);flex-wrap:wrap;margin-bottom:var(--s4)}
.v2-topline .v2-head{margin-bottom:0;flex:1 1 240px;min-width:0}
.v2-topline-r{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s3);flex:0 1 auto}
.v2-topline-r .v2-money{margin-top:0}
.v2-topline-r .v2-money-b{flex:0 0 auto;font-size:12px;padding:7px 12px}
/* Narrow: the band stacks and the controls go full width, where a thumb is. */
@media (max-width:820px){
.v2-topline-r{align-items:stretch;width:100%}
.v2-stats{justify-content:flex-start}
.v2-stat{text-align:left}
.v2-topline-r .v2-money-b{flex:1}
}
/* ---- the coins side column ------------------------------------------------
A holdings table stops earning width after its last column. What belongs
beside it is what to do next and what just happened. */
.v2-prof-body.two{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.v2-acts{display:flex;flex-direction:column;gap:8px;margin-top:var(--s3)}
.v2-act-b{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;
text-align:left;background:var(--paper-2);border:1px solid var(--line-2);border-radius:12px;
padding:12px var(--s3);cursor:pointer;transition:border-color .12s,background .12s}
.v2-act-b:hover{border-color:var(--ink)}
.v2-act-b b{font:600 14px var(--sans);color:var(--ink)}
.v2-act-b span{font:400 12px var(--fig);color:var(--faint)}
.v2-linkish{font:400 11px var(--fig);color:var(--ink-2);background:none;border:0;cursor:pointer;padding:0}
.v2-linkish:hover{color:var(--ink)}
@media (max-width:1080px){ .v2-prof-body.two{grid-template-columns:minmax(0,1fr)} }