/* ============================================================================
   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}
/* The uppercase label. Six rules carried this exact run; it lives here and they keep only their own layout. */
.v2-bal-l,.v2-tab,.v2-modal .b-themes-h,.v2-fix-h,.v2-adv > summary,.v2-ptab{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{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}
/* Phone only (shown in the narrow block below): the way back to the panel once "← Feed" put it away. */
.v2-you{display:none;font:600 12px var(--sans);color:var(--ink-2);background:none;
  border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;cursor:pointer;min-height:40px}
.v2-you.on{color:var(--ink);border-color:var(--ink)}

.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}
/* The pill. The feed's theme chip, the chart's leg tabs and the builder's theme chips are one control. */
.v2-theme,.v2-two-main .bc-tabs button,.v2-modal .b-theme-chip{font:500 12px var(--sans);color:var(--ink-2);
  background:none;border:1px solid var(--line);border-radius:999px;cursor:pointer;transition:color .12s,border-color .12s}
.v2-theme:hover,.v2-two-main .bc-tabs button:hover,.v2-modal .b-theme-chip:hover{color:var(--ink)}
.v2-theme.on,.v2-two-main .bc-tabs button.on,.v2-modal .b-theme-chip.on{color:var(--ink);border-color:var(--ink)}
.v2-theme{flex:none;padding:5px 10px;white-space:nowrap}

/* A row, not a card. The whole thing is the target. */
/* The row that opens something. Seven lists share this exact body (feed row, leg, market, strategy,
   creator, call, holding); it was declared seven times under seven names. Once, here, ahead of all of
   them, so each keeps only its own grid and padding. */
.v2-row,.v2-leg.tap,.v2-mkt,.v2-earn,.v2-cre,.v2-call-row,.v2-hrow{width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
.v2-row:hover,.v2-leg.tap:hover,.v2-mkt:hover,.v2-earn:hover,.v2-cre:hover,.v2-call-row:hover,.v2-hrow:hover{background:var(--paper-2)}
.v2-row{display:block;padding:var(--s3) var(--v2-gut)}
.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-sm);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:var(--t-cap);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:var(--scrim);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 var(--paper);animation:v2rise .14s cubic-bezier(.16,1,.3,1)}
@keyframes v2rise{from{opacity:0}to{opacity:1}}
.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:var(--t-strong);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{padding:5px 11px}

/* Timeframe. */
.v2-two-main .bc-tf{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:var(--s2);flex:none}
/* The small chip: a slippage preset, a timeframe, a candle interval. One control, three homes. */
.v2-two-main .slip-preset,.v2-tf,.pc-seg button{font:var(--t-cap);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-two-main .slip-preset:hover,.v2-tf:hover,.pc-seg button:hover{color:var(--ink)}
.v2-two-main .slip-preset.on,.v2-tf.on,.pc-seg button.on{color:var(--ink);border-color:var(--ink)}
.v2-two-main .slip-preset{color:var(--ink-2);padding:4px 9px}

.v2-two-main .bc-canvas{width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--panel)}

/* ---- 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{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{padding:6px 11px}
.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-name{flex:1;min-width:0}
.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. */
/* `overflow:hidden` here assumed the header above the tabs was a bounded height. It is not: the
   add-money panel, the withdraw panel, the Solana rescue block and the arena door all stack into it,
   and with two of them open the header ate the viewport, squeezed .v2-prof-body to nothing, and left
   no way to reach anything — the panel could not scroll and neither could the column inside it.
   Scrolling as a FALLBACK: the lists still own their own scrolling via .v2-col, and this only engages
   when the fixed part has genuinely outgrown the screen. */
.v2-panel-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;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}
/* min-height so an empty one still holds its row — see the note in BarModal. */
.v2-leg-sub{font:400 11px var(--fig);color:var(--faint);margin-top:2px;min-height:14px}
.v2-leg-w{font:var(--t-num-sm);font-variant-numeric:tabular-nums;color:var(--ink-2);text-align:right}
.v2-leg-v{font:var(--t-num-sm);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: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{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:var(--t-strong)}
.v2-cand span{font:var(--t-cap);color:var(--ink-2)}

/* Advanced: present, never in the way. */
.v2-adv{margin-bottom:var(--s3)}
.v2-adv > summary{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:var(--t-label-sm);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);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-lg);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:var(--t-strong);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)}
/* Capped and scrollable in itself. Add-money lists every deposit route and is the tallest thing that
   can open in this column; unbounded it pushed the whole account below the fold. */
.v2-out{margin-top:var(--s3);padding:var(--s4);border:1px solid var(--line);border-radius:12px;
  background:var(--paper-2);max-height:min(46vh,380px);overflow-y:auto;overscroll-behavior:contain}
.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(--s3);padding:var(--s3);border:1px solid var(--warn);border-radius:10px;
  background:color-mix(in srgb, var(--warn) 8%, transparent)}
.v2-rescue-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
/* The amount reads inline with its label rather than as a headline number. It is a warning, not a
   position, and it is competing for height with the account underneath it. */
.v2-rescue-h{font:var(--t-body);color:var(--ink-2)}
.v2-rescue-h b{font:var(--t-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.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:var(--on-safe)}
.v2-cta.short{background:var(--degen);color:var(--on-degen)}
.v2-cta-sub{font:var(--t-cap);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-xl);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;
    min-height:40px;flex:none;align-self:flex-start}
  .v2-you{display:inline-flex;align-items:center}
  /* The market list drops its volume column here, the same template the modal's compact list uses; four
     columns with fixed minimums left the symbol ~64px on a 320px screen. */
  .v2-mkt{grid-template-columns:1fr auto auto}
  .v2-mkt-vol{display:none}
  /* Thumb-sized. These are all reached by touch on a phone and were 14 to 25px tall. */
  .v2-tf,.v2-trig-x,.v2-linkish,.v2-tab,.v2-theme,.v2-x,.v2-rail-tab,.v2-epos-b,.v2-arena-back{min-height:40px}
  .v2-theme{padding-top:0;padding-bottom:0;display:inline-flex;align-items:center}
}
@media (min-width:901px){ .v2-back{display:none} }
/* Narrower still: four things do not fit in 400px, and search is the one that matters. The number comes
   back the moment the panel does; the wordmark is a logo away. */
@media (max-width:600px){
  .v2-top{gap:var(--s3)}
  .v2-brand span,.v2-bal-l,.v2-bal-v{display:none}
  .v2-bal{gap:var(--s2)}
}


/* ---- 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:var(--t-strong);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;
  padding:11px var(--v2-gut)}
.v2-mkt.on{background:var(--panel)}
.v2-mkt-sym{font:var(--t-strong);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:var(--t-label-sm);color:var(--faint);flex:none}
.v2-mkt-px{font:var(--t-num-xs);font-variant-numeric:tabular-nums;color:var(--ink);
  min-width:74px;text-align:right}
.v2-mkt-ch{font:var(--t-num-xs);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:var(--t-cap);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}

/* ---- earn -----------------------------------------------------------------
   A strategy row carries one more thing than a market row does: what the yield
   is actually FOR. The APY is the loudest number, but the sentence under the
   name is the one that decides whether a buyer should be in it at all, so it
   gets a full row of its own rather than a tooltip. */
.v2-earn-head{font:var(--t-strong);color:var(--ink);flex:none}
.v2-earn{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
  grid-template-areas:"name apy tvl" "what what what";gap:2px var(--s3);align-items:center;
  padding:10px var(--v2-gut)}
.v2-earn.on{background:var(--panel)}
.v2-earn-name{grid-area:name;font:var(--t-strong);color:var(--ink);display:flex;align-items:center;gap:6px;min-width:0}
.v2-earn-apy{grid-area:apy;font:var(--t-num-sm);font-variant-numeric:tabular-nums;
  color:var(--safe);min-width:56px;text-align:right}
.v2-earn-tvl{grid-area:tvl;font:var(--t-cap);color:var(--faint);min-width:46px;text-align:right}
/* Wraps rather than truncates: an exit haircut hidden behind an ellipsis is the
   one cost a buyer would most want to have been told. */
.v2-earn-what{grid-area:what;font:var(--t-cap);color:var(--ink-2);line-height:1.45}

/* The tier heading is the editorial part of this screen. Each band says what you
   are being paid for, in the same words for every row under it. */
.v2-earn-tier{display:flex;flex-direction:column;gap:1px;padding:11px var(--v2-gut) 7px;
  border-bottom:1px solid var(--line);background:var(--paper-2)}
.v2-earn-tier-l{font:var(--t-label-sm);letter-spacing:.14em;text-transform:uppercase}
.v2-earn-tier-b{font:var(--t-cap);color:var(--faint)}
.v2-earn-tier.safe .v2-earn-tier-l{color:var(--safe)}
.v2-earn-tier.credit .v2-earn-tier-l{color:var(--ink-2)}
.v2-earn-tier.risky .v2-earn-tier-l{color:var(--degen)}

/* The APY panel stands in for the chart on an earn bar. Same slot, same reserved
   height, so the legs list never slides up into a gap and jumps back. */
.v2-earn-chart{flex:1;min-height:120px;margin-top:var(--s3);display:flex;flex-direction:column;
  justify-content:center;gap:6px}
/* loading: EarnChart renders the shared .v2-chart-skel. One shimmer rule, not two. */
.v2-earn-chart.empty{align-items:flex-start}
.v2-earn-chart-top{display:flex;align-items:baseline;gap:var(--s2)}
.v2-earn-now{font:var(--t-num-lg);font-variant-numeric:tabular-nums;color:var(--safe)}
.v2-earn-cap{font:var(--t-cap);color:var(--faint)}
.v2-earn-svg{width:100%;height:52px;display:block;overflow:visible}
.v2-earn-line{fill:none;stroke:var(--safe);stroke-width:1.5px;stroke-linejoin:round}
.v2-earn-area{fill:var(--safe);opacity:.10}
.v2-earn-chart-foot{display:flex;justify-content:space-between;font:var(--t-label-sm);color:var(--faint)}

/* The risky-tier acknowledgement. Sits directly above the CTA rather than in a
   modal of its own: a dialog you dismiss is read once, a line you must tick to
   enable the button is read every time until you have agreed to it. */
.v2-ack{display:flex;gap:9px;align-items:flex-start;margin-bottom:10px;padding:10px 11px;
  border:1px solid var(--line-2);border-radius:10px;background:var(--paper-2);
  font:var(--t-cap);color:var(--ink);line-height:1.45;cursor:pointer}
.v2-ack.done{border-color:var(--line);background:none;color:var(--faint)}
.v2-ack input{flex:none;margin-top:1px;accent-color:var(--ink)}
.v2-up{color:var(--safe)}

/* The strategy panel. An earn bar has one leg and nothing worth listing, so the
   space a legs list would take goes to what the thing actually IS. */
.v2-vault{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s3) 0;
  border-bottom:1px solid var(--line)}
.v2-vault-desc{display:flex;gap:10px;align-items:flex-start;
  font:400 12px var(--mono);color:var(--ink-2);line-height:1.5}
.v2-vault-logo{width:22px;height:22px;flex:none;border-radius:5px;background:var(--paper-2)}
.v2-vault-col{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.v2-vault-col-l{font:var(--t-label-sm);letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.v2-vault-chips{display:flex;gap:6px;flex-wrap:wrap}
/* Collateral is the honest answer to "where does the yield come from", so it gets
   a logo rather than a word: cbBTC is recognised before it is read. */
.v2-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 4px;
  border:1px solid var(--line);border-radius:999px;font:var(--t-cap);color:var(--ink)}
.v2-chip img{width:14px;height:14px;border-radius:50%}
.v2-chip-dot{width:14px;height:14px;border-radius:50%;background:var(--line-2)}
.v2-chip b{color:var(--faint);font-weight:400}
.v2-vault-warn{font:var(--t-cap);color:var(--degen);line-height:1.45}
.v2-vault-meta{display:flex;gap:var(--s2);align-items:center;
  font:var(--t-label-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* The projection. Net of every cost, so a one-month row that reads red is telling
   the truth about leaving early rather than flattering the deposit. */
.v2-proj{margin-top:var(--s3);padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--paper-2);display:flex;flex-direction:column;gap:5px}
.v2-proj-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);
  font:var(--t-label-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.v2-proj-be{text-transform:none;letter-spacing:.02em;color:var(--ink-2)}
.v2-proj-row{display:grid;grid-template-columns:1fr auto auto;gap:var(--s3);align-items:baseline;
  font:400 12px var(--mono);color:var(--ink-2)}
.v2-proj-row b{font:var(--t-num-sm);font-variant-numeric:tabular-nums;color:var(--ink)}
.v2-proj-row i{font:var(--t-num-xs);font-variant-numeric:tabular-nums;font-style:normal;
  min-width:62px;text-align:right}
.v2-proj-row i.up{color:var(--safe)} .v2-proj-row i.down{color:var(--degen)}
.v2-proj-foot{font:var(--t-label-sm);color:var(--faint);line-height:1.4;margin-top:2px}

/* Earn holdings, in the panel. The loudest thing is what the money is DOING —
   the rate and the dollars per year — because the balance alone looks identical
   to cash sitting still, which is exactly the thing this tab exists to disprove. */
.v2-earn-sum{display:flex;flex-direction:column;gap:2px;margin-bottom:var(--s3)}
.v2-earn-sum-v{font:var(--t-num-lg);font-variant-numeric:tabular-nums;color:var(--ink)}
.v2-earn-sum-r{font:var(--t-cap);color:var(--ink-2)}
.v2-earn-sum-r b{font-weight:400;color:var(--safe)}

.v2-epos{display:flex;flex-direction:column;gap:7px;padding:11px 0;
  border-bottom:1px solid var(--line)}
.v2-epos-top{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2)}
.v2-epos-name{display:flex;align-items:center;gap:6px;min-width:0;font:var(--t-strong);color:var(--ink)}
.v2-epos-name .nm,.v2-earn-name .nm{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.v2-epos-val{font:var(--t-num);font-variant-numeric:tabular-nums;color:var(--ink);flex:none}
/* Four rates on one line, wrapping rather than truncating: "a day" is the one that
   makes a small balance feel real, and it must not be the one that gets cut. */
.v2-epos-rate{display:flex;flex-wrap:wrap;gap:4px 12px;
  font:var(--t-cap);color:var(--ink-2)}
.v2-epos-rate span:first-child{color:var(--safe)}
.v2-epos-b{align-self:flex-start;margin-top:2px;background:none;border:1px solid var(--line);
  border-radius:8px;padding:5px 11px;font:var(--t-cap);color:var(--ink-2);cursor:pointer}
.v2-epos-b:hover{border-color:var(--line-2);color:var(--ink)}
.v2-tier{font:var(--t-label);letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border-radius:999px;border:1px solid var(--line);flex:none}
.v2-tier.safe{color:var(--safe)} .v2-tier.credit{color:var(--ink-2)} .v2-tier.risky{color:var(--degen)}

/* ---- the door -------------------------------------------------------------
   The rail is 300px, which is exactly why the rankings ended up buried in a tab
   nobody opened. A door needs room, so it sits at the top of the page about you.
   It carries the campaign rather than the word "Arena": a countdown with money on
   it is a reason to walk through a door, a label is not. */
.v2-door{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;cursor:pointer;
  margin:var(--s4) 0 var(--s5);padding:var(--s3) var(--s4);border-radius:var(--radius);
  border:1px solid var(--line-2);background:var(--paper-2);transition:border-color .12s,background .12s}
.v2-door:hover{border-color:var(--line-3);background:var(--panel)}
/* The one piece of decoration in v2, and the one place the brand's foil look is
   allowed on this surface. Transparent cutout, never a plate or a chrome render. */
.v2-door-art{width:72px;height:72px;flex:none;object-fit:contain}
.v2-door-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.v2-door-h{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap;
  font:600 15px var(--sans);color:var(--ink)}
.v2-door-days{font:var(--t-label-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--warn)}
.v2-door-sub{font:400 12px var(--mono);color:var(--ink-2);line-height:1.4}
.v2-door-go{margin-left:auto;flex:none;font:400 18px var(--mono);color:var(--faint)}
.v2-door:hover .v2-door-go{color:var(--ink)}

/* ---- the arena ------------------------------------------------------------
   A page in the right-hand column, in the slot the profile occupies, not a modal.
   It therefore inherits the panel's width and scrolling and needs no shell of its
   own — and it reuses .v2-ptabs so the tab strip is literally the profile's, which
   is what stops it reading as a different app. */
.v2-arena-back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  padding:6px 0;margin:0 0 var(--s3);font:400 12px var(--mono);color:var(--faint);transition:color .12s}
.v2-arena-back:hover{color:var(--ink)}
.v2-arena-id{margin-bottom:var(--s4)}
.v2-arena-title{font:var(--t-title);color:var(--ink);margin:0}
.v2-arena-sub{font:400 12px var(--mono);color:var(--faint);margin:3px 0 0}
.v2-arena-live{color:var(--ink-2)}
.v2-arena-head{display:flex;align-items:baseline;gap:var(--s3);margin:var(--s4) 0 var(--s3);
  padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.v2-arena-h{font:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0}
.v2-arena-note{font:var(--t-cap);color:var(--faint);margin-left:auto;text-align:right}
.v2-arena-ctl{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.v2-arena-ctl .v2-linkish{margin-left:auto}
.v2-arena-bare{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--line)}

/* The campaign. The only thing in the app with a deadline and a prize, so the only
   block that gets a border of its own. */
.v2-cup{border:1px solid var(--warn);border-radius:var(--radius);padding:var(--s4);
  background:color-mix(in srgb,var(--warn) 5%,transparent);margin-bottom:var(--s4)}
.v2-cup-pools{display:flex;gap:var(--s5);flex-wrap:wrap;font:400 12px var(--mono);color:var(--ink-2)}
.v2-cup-pools b{font:var(--t-num-md);color:var(--ink);display:block}
.v2-cup-rules{margin-top:var(--s3);font:var(--t-cap);color:var(--faint);line-height:1.5}
.v2-cup-rows{display:flex;flex-direction:column;gap:6px}
.v2-cup-row{display:grid;grid-template-columns:22px 20px minmax(0,1fr) auto auto;gap:var(--s2);
  align-items:center;font:400 12px var(--mono)}
.v2-cup-who{color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.v2-cup-vol{color:var(--faint)} .v2-cup-pay{color:var(--safe);min-width:52px;text-align:right}

/* Creators. Avatar and handle, their numbers shown but not the order. */
.v2-cre{display:grid;grid-template-columns:22px 24px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:10px 0}
.v2-cre-main{min-width:0}
.v2-cre-who{display:block;font:var(--t-strong);color:var(--ink)}
.v2-cre-sub{display:block;font:var(--t-cap);color:var(--faint);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.v2-cre-avg{font:var(--t-num-sm);font-variant-numeric:tabular-nums;text-align:right}
.v2-cre-avg.up{color:var(--safe)} .v2-cre-avg.down{color:var(--degen)}
.v2-cre-avg i{display:block;font:var(--t-label);font-style:normal;color:var(--ink-2);
  letter-spacing:.1em;text-transform:uppercase}

/* The points board, which has existed since Season 1 on a page the app never linked to. */
.v2-arena-pts{margin-top:var(--s4);display:flex;flex-direction:column;gap:4px}
.v2-pts-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;gap:var(--s3);
  align-items:baseline;font:400 12px var(--mono);color:var(--ink-2);padding:3px 0}
.v2-pts-row.me{color:var(--ink)}
.v2-pts-row.me .v2-pts-who{font-weight:600}
.v2-pts-who{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.v2-pts-n{font-variant-numeric:tabular-nums;color:var(--ink)}
.v2-pts-s{min-width:46px;text-align:right;color:var(--faint)}

.v2-arena-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s3)}
.v2-atheme{display:flex;flex-direction:column;gap:4px;text-align:left;cursor:pointer;
  padding:var(--s3);border:1px solid var(--line);border-radius:var(--radius-sm);background:none;
  transition:border-color .12s}
.v2-atheme:hover{border-color:var(--line-2)}
.v2-atheme-n{font:var(--t-strong);color:var(--ink)}
.v2-atheme-b{font:var(--t-cap);color:var(--faint);line-height:1.4}
.v2-atheme-t{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:2px;
  font:var(--t-label-sm);color:var(--ink-2)}
.v2-atheme-t span{display:inline-flex;align-items:center;gap:3px}

@media (max-width:640px){
  .v2-door-art{width:56px;height:56px}
  .v2-arena-themes{grid-template-columns:1fr}
}

/* ---- the call card --------------------------------------------------------
   Everywhere else a bar is a 60px row, which is right for scanning and wrong for
   the thing this product is about: someone argued something in public and it
   returned +300%. The argument is the largest object on the card and everything
   else gets quieter around it.

   Fraunces is switched back on HERE and nowhere else. app.css declares the face
   and ships the file, then html[data-zone="black"] aliases --serif to --sans, so
   v2 has been carrying a paid-for typeface it never uses. This is a token
   override scoped to one component, not a new colour: the "one accent, no
   decorative colour" rule in the header above still holds. */
.v2-call{--serif:"Fraunces",Georgia,"Times New Roman",serif;
  border-bottom:1px solid var(--line)}
.v2-call-hit{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:var(--s5) 0;transition:opacity .12s}
.v2-call-hit:hover{opacity:.82}

.v2-call-top{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s3)}
/* The position is context, not news. It sits in the same 22px slot a token logo
   uses on every other row, so cards and rows line up down the left edge. */
.v2-call-name{font:var(--t-cap);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.v2-call-fig{margin-left:auto;display:flex;align-items:baseline;gap:var(--s2);flex:none}
.v2-call-ret{font:var(--t-num-md);font-variant-numeric:tabular-nums}
.v2-call-ret.up{color:var(--safe)} .v2-call-ret.down{color:var(--degen)}
.v2-call-since{font:var(--t-label-sm);color:var(--faint)}

/* Three sizes because the live corpus runs 10 to 468 characters and one size
   cannot serve both. `pre-line` keeps the author's own line breaks; the clamp
   stops a 468-char thesis from owning the screen, and the full text is one tap
   away in the modal. */
.v2-call-thesis{font-family:var(--serif);color:var(--ink);margin:0 0 var(--s4) 22px;
  white-space:pre-line;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.v2-call-thesis.xl{font-size:clamp(22px,3.2vw,30px);line-height:1.2;font-weight:400;letter-spacing:-.01em}
.v2-call-thesis.lg{font-size:clamp(19px,2.4vw,23px);line-height:1.32;font-weight:400}
.v2-call-thesis.md{font-size:18px;line-height:1.45;font-weight:400}

.v2-call-by{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s3) 22px;
  font:400 12px var(--mono);color:var(--ink-2)}
.v2-call-av{width:20px;height:20px;border-radius:50%;flex:none;background:var(--panel)}
.v2-call-who{color:var(--ink)}
.v2-call-who.anon{color:var(--faint)}
.v2-call-buys{margin-left:auto;color:var(--faint)}

/* The modal's allocation bar is 64px because it is the subject there. Here it is
   the footnote under the argument, so it keeps the exact proportions and loses
   the height. */
.v2-alloc.slim{height:34px;margin:0 0 0 22px}
.v2-alloc.slim .v2-alloc-seg{padding:0 8px;gap:0}
.v2-alloc.slim .v2-alloc-seg b{font-size:12px}

/* No thesis, no card. Same facts, a sixth of the height — and the contrast is
   what makes a carded call read as having earned it. */
.v2-call-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:11px 0}
.v2-call-row-main{min-width:0}
.v2-call-row-name{display:block;font:var(--t-strong);color:var(--ink);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.v2-call-row-sub{display:block;font:var(--t-cap);color:var(--faint);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.v2-call-row-ret{font:var(--t-num-sm);font-variant-numeric:tabular-nums}
.v2-call-row-ret.up{color:var(--safe)} .v2-call-row-ret.down{color:var(--degen)}

@media (max-width:640px){
  .v2-call-thesis,.v2-call-by,.v2-alloc.slim{margin-left:0}
  .v2-call-top{gap:var(--s2)}
}

/* ---- 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:var(--on-safe)}
.v2-side-b.short.on{background:var(--degen);color:var(--on-degen)}
.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-xs);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:var(--scrim-soft)}
.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-xl);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-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}

/* ---- 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{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-xs);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-name{font:600 15px var(--sans);color:var(--ink);overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.v2-hero-n{font:var(--t-cap);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:var(--t-cap);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 <input> 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}
/* A floor, so a tall header can never collapse the body to zero height. Without it the tabs stayed
   visible while the thing they switch between had no room to render into. */
.v2-prof-body{flex:1;min-height:min(52vh,420px);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:var(--t-cap);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-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}
/* The same blocks, left-aligned, for a page column rather than the profile's right-hand topline. */
.v2-stats-l{justify-content:flex-start;margin-bottom:var(--s5)}
.v2-stats-l .v2-stat{text-align:left}
/* A list that loaded once and then lost its source: the old numbers stay, this says they are old. */
.v2-stale{font:var(--t-label);letter-spacing:.08em;text-transform:uppercase;color:var(--warn);
  padding:6px var(--v2-gut);border-bottom:1px solid var(--line)}
.v2-stat-v{font:var(--t-num);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;padding:11px 0}
.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-sm);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:var(--t-label-sm);letter-spacing:.08em;text-transform:uppercase}
/* nth-CHILD, not nth-of-type: every cell here is a <span>, 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)} }

/* ---- the allocation bar ---------------------------------------------------
   Two ends, in proportion. The legs are already listed on the left; this is the
   only place the split reads as a SHAPE rather than as numbers to compare, which
   is the whole idea of a barbell. Segments separate by opacity of the one accent
   rather than by colour — green and red are reserved for figures here. */
.v2-alloc{display:flex;gap:2px;margin-bottom:var(--s4);height:64px}
.v2-alloc-seg{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;
  gap:2px;padding:0 10px;border-radius:8px;background:var(--ink);color:var(--paper);overflow:hidden}
.v2-alloc-seg em{font:600 12px var(--sans);font-style:normal;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.v2-alloc-seg b{font:var(--t-num);font-variant-numeric:tabular-nums}
.v2-alloc-seg i{font:var(--t-label-sm);font-style:normal;opacity:.7;white-space:nowrap}
/* A 10% leg cannot hold a ticker, a percentage and a dollar figure. Each segment is its own query
   container, so a narrow one drops the label and then the dollars and keeps the percentage — the
   proportion stays exact rather than being fudged by a min-width. */
.v2-alloc-seg{container-type:inline-size}
@container (max-width:78px){ .v2-alloc-seg i{display:none} }
@container (max-width:52px){ .v2-alloc-seg em{display:none} }
@container (max-width:30px){ .v2-alloc-seg b{font-size:11px} }

/* ---- the balance strip ----------------------------------------------------
   Above the side switch, so it is true whichever side you are on. This used to
   be a line inside the buy breakdown that appeared only once the buy was
   unaffordable — so the sell side never showed it and the buy side showed it
   exactly too late. */
.v2-wallet{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding-bottom:var(--s3);margin-bottom:var(--s3);border-bottom:1px solid var(--line)}
.v2-wallet b{font:var(--t-num);font-variant-numeric:tabular-nums;color:var(--ink)}
.v2-wallet .v2-bal-l + b{margin-right:var(--s3)}

/* ---- the chart slot -------------------------------------------------------
   The chart used to be gated on the quote, so for 4-to-108 seconds there was no
   node here at all: .v2-two-main is a flex column, it collapsed, the legs list
   slid up into the gap and jumped back down when the chart finally mounted.
   Nothing below may change height when the data lands. */
.v2-chart-skel{flex:1;min-height:120px;position:relative;margin-top:var(--s3);
  border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.v2-chart-skel span{position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,var(--shimmer) 50%,transparent 80%);
  background-size:220% 100%;animation:v2shim 1.3s linear infinite}
@keyframes v2shim{from{background-position:180% 0}to{background-position:-80% 0}}

/* Styled-but-empty axes forever are indistinguishable from a broken chart, so
   both charts say which one they are. */
.v2-two-main .bc-canvas{position:relative}
.v2-chart-over{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:400 12px var(--fig);color:var(--faint);pointer-events:none;text-align:center;padding:0 var(--s4)}
.v2-spin,.pc-spin{width:20px;height:20px;border-radius:50%;border:2px solid var(--line-2);
  border-top-color:var(--ink-2);animation:v2spin .7s linear infinite;display:inline-block}
@keyframes v2spin{to{transform:rotate(360deg)}}

/* ---- one token's candles --------------------------------------------------
   PositionChart draws every holdings click and every search pick. Its styles
   lived in poschart.css, which nothing imported — so the container had no
   height (createChart fell back to 440px), the overlay was not positioned, and
   its spinner was a zero-size invisible span. Rewritten here in v2's language,
   flexing like the basket chart rather than a fixed 340px. */
.pos-chart{display:flex;flex-direction:column;flex:1;min-height:0;margin-top:var(--s3);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel)}
.pc-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:8px 10px;border-bottom:1px solid var(--line)}
.pc-seg{display:flex;gap:5px}
.pc-canvas{position:relative;width:100%;flex:1;min-height:140px}
.pc-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:400 12px var(--fig);color:var(--faint);pointer-events:none}
@media (max-width:900px){ .pos-chart{height:280px;flex:none} }

/* ---- search: what the guard already knows -------------------------------
   Every leg of every bar gets a pool walk, a honeypot probe and a real sell
   test. That verdict was discarded the moment the quote returned, so a token we
   had PROVEN sellable looked identical to one we had proven worthless. It is
   remembered now and shown here. No badge means never tested, which is not the
   same as unsafe — most of the long tail has simply never been in a bar. */
.tsearch-row .gd{font:var(--t-label-sm);letter-spacing:.04em;text-transform:uppercase;
  border:1px solid currentColor;border-radius:4px;padding:1px 4px;margin-left:6px;white-space:nowrap}
.tsearch-row .gd.ok{color:var(--safe)}
.tsearch-row .gd.no{color:var(--degen)}
/* Real traded volume, beside the name. It is the number a scammer cannot fake. */
.tsearch-row .n em{font-style:normal;color:var(--faint);opacity:.8}

/* ---- chain marks ----------------------------------------------------------
   The logo replaces the label. "RH" / "ETH" / "SOL" read as jargon and took as
   much room as the ticker next to them; a mark is recognised before it is read.
   The chain is still announced to a screen reader and on hover — see the <title>
   in ChainMark.tsx — so the picture replaces the word on screen, not the fact. */
.tsearch-meta .s .ch-mark{flex:none;border-radius:50%;display:block}
.am-on svg,.am-rchain svg{flex:none;border-radius:50%;vertical-align:-2px;margin-right:6px}
.am-on,.am-rchain{display:inline-flex;align-items:center}

/* ---- the receipt ----------------------------------------------------------
   A trade is the one moment this app should feel like something happened. It
   used to end on a grey line of text with the transaction in 11px type
   underneath, and a Solana sell had no link at all. */
.v2-receipt{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--s5) var(--s3) 0;animation:v2rise .26s cubic-bezier(.2,.7,.3,1)}
.v2-tick{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--safe) 12%,transparent);color:var(--safe);font:600 22px var(--sans);margin-bottom:var(--s4)}
.v2-receipt.warn .v2-tick{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}
.v2-tick svg{stroke:currentColor;overflow:visible}
/* the ring sweeps, then the tick strokes itself on */
.v2-tick-ring{stroke:currentColor;opacity:.3;stroke-dasharray:88;stroke-dashoffset:88;
  animation:v2draw .42s ease-out forwards}
.v2-tick-path{stroke:currentColor;stroke-dasharray:22;stroke-dashoffset:22;
  animation:v2draw .3s .2s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes v2draw{to{stroke-dashoffset:0}}
.v2-receipt-t{font:600 17px/1.35 var(--sans);color:var(--ink);max-width:30ch}
/* A partial fill has a sentence to say, not a headline: smaller, left-aligned, full width. */
.v2-receipt.warn .v2-receipt-t{color:var(--warn);font:var(--t-small);text-align:left;max-width:none;align-self:stretch}
/* one row per transaction, because a cross-chain sell really is several */
.v2-txs{display:flex;flex-direction:column;gap:6px;margin-top:var(--s4);width:100%}
.v2-tx{display:flex;align-items:center;gap:8px;justify-content:center;
  font:400 12px var(--fig);color:var(--ink-2);text-decoration:none;
  border:1px solid var(--line);border-radius:10px;padding:9px 12px;transition:border-color .12s,color .12s}
.v2-tx:hover{color:var(--ink);border-color:var(--ink)}
.v2-tx svg{flex:none;border-radius:50%}
.v2-tx-go{margin-left:auto;opacity:.6}
/* Respect a reduced-motion preference: the states still differ, they just stop moving. */
@media (prefers-reduced-motion:reduce){
  .v2-receipt,.v2-tick-ring,.v2-tick-path,.v2-skel,.v2-chart-skel span,.v2-spin,.pc-spin,
  .v2-modal,.v2-scrim,.v2-panel-in{animation:none}
  .v2-tick-ring,.v2-tick-path{stroke-dashoffset:0}
}

/* ---- what you hold, on the sell side --------------------------------------
   "Sell 50%" means nothing on its own. This is the quantity that percentage is
   a percentage OF: every leg, its token amount, and what the current slice is
   worth. The whole block used to be hidden whenever the engine's index had not
   caught up with a buy — which is exactly when someone wants to sell. */
.v2-hold{margin-bottom:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.v2-hold-r{display:grid;grid-template-columns:1fr auto auto;gap:var(--s3);align-items:baseline;padding:5px 0}
.v2-hold-s{font:var(--t-strong);color:var(--ink);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.v2-hold-a{font:var(--t-num-xs);font-variant-numeric:tabular-nums;color:var(--ink-2);
  text-align:right;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:140px}
.v2-hold-v{font:var(--t-num-xs);font-variant-numeric:tabular-nums;color:var(--ink);
  text-align:right;min-width:72px;white-space:nowrap}
.v2-hold-v em{font-style:normal;color:var(--faint);font-size:11px}

/* ── The House ─────────────────────────────────────────────────────────────────────────────────── */
.v2-house-t{padding:12px 0;border-top:1px solid var(--line)}
.v2-house-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s2);align-items:baseline}
.v2-house-act{font:var(--t-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.v2-house-what{font:var(--t-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-house-usd{font:var(--t-num-sm);color:var(--ink-2)}
.v2-house-pnl{font:var(--t-num-sm)}
.v2-house-pnl.up{color:var(--safe)}.v2-house-pnl.down{color:var(--degen)}
.v2-house-by{font:var(--t-cap);color:var(--ink-2);margin-top:4px}
.v2-house-why{font:var(--t-body);margin:6px 0 4px;max-width:60ch}
.v2-house-when{font:var(--t-cap);color:var(--faint);margin-top:6px}
.v2-house-note{font:var(--t-cap);color:var(--ink-2);padding:8px 0}
.v2-house-sig{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s2);align-items:baseline;padding:8px 0;border-top:1px solid var(--line)}
.v2-house-sig-t{font:var(--t-small);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:480px){.v2-house-sig{grid-template-columns:auto minmax(0,1fr)}.v2-house-sig .v2-house-when{grid-column:1/-1}}

/* ── The House, the show ─────────────────────────────────────────────────────────────────────────
   The second sanctioned exception to "no decorative colour, nothing draws attention to the interface"
   (the Arena door is the first). A machine with real money, awake or asleep, thinking in front of you.
   Foil colours only, the brand's balloon palette; the numbers stay mono and tabular. */
.hs-page{--hs-txt:#ececf2;--hs-mute:#a9a9b6;--hs-dim:#7c7c88;--foil-a:#c9b8ff;--foil-b:#9ff0d6;--foil-c:#ffc9a8}
.hs-page .v2-linkish{color:var(--hs-txt)}
.hs-hero{position:relative;display:flex;align-items:center;gap:var(--s4);padding:var(--s4);margin:var(--s3) 0 var(--s4);
  border-radius:var(--radius);background:var(--paper-2);isolation:isolate;overflow:hidden}
.hs-hero::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--hs-a,0deg),#c9b8ff,#9ff0d6,#ffc9a8,#e8e8f0,#c9b8ff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:hs-spin 9s linear infinite;opacity:.9}
.hs-hero.thinking::before{animation-duration:2.2s;opacity:1}
.hs-hero.paused::before{animation-play-state:paused;opacity:.35}
.hs-hero::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;
  background:radial-gradient(60% 80% at 20% 50%,rgba(201,184,255,.14),transparent 60%),radial-gradient(50% 70% at 85% 30%,rgba(159,240,214,.10),transparent 60%)}
@property --hs-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes hs-spin{to{--hs-a:360deg}}
.hs-mascot-wrap{position:relative;flex:none;width:120px;height:120px;display:grid;place-items:center}
.hs-halo{position:absolute;inset:8px;border-radius:999px;background:radial-gradient(circle,rgba(201,184,255,.35),rgba(159,240,214,.12) 55%,transparent 72%);
  filter:blur(6px);animation:hs-pulse 3.2s ease-in-out infinite}
.hs-hero.thinking .hs-halo{animation-duration:.9s;background:radial-gradient(circle,rgba(159,240,214,.55),rgba(201,184,255,.2) 55%,transparent 72%)}
.hs-hero.paused .hs-halo{animation:none;opacity:.25}
.hs-mascot{position:relative;width:120px;height:120px;object-fit:contain;animation:hs-float 5s ease-in-out infinite;filter:drop-shadow(0 12px 18px rgba(0,0,0,.35))}
.hs-hero.thinking .hs-mascot{animation:hs-float 1.6s ease-in-out infinite,hs-tilt 1.1s ease-in-out infinite}
.hs-hero.paused .hs-mascot{animation:none;filter:grayscale(.6) drop-shadow(0 12px 18px rgba(0,0,0,.35))}
@keyframes hs-float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes hs-tilt{0%,100%{transform:translateY(-4px) rotate(-6deg) scale(1.02)}50%{transform:translateY(-10px) rotate(6deg) scale(1.05)}}
@keyframes hs-pulse{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.08);opacity:1}}
.hs-hero-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.hs-status{display:flex;align-items:center;gap:8px;font:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.hs-status-sub{font:var(--t-cap);letter-spacing:0;text-transform:none;color:var(--hs-mute);margin-left:4px}
.hs-dot{width:8px;height:8px;border-radius:999px;background:var(--faint);flex:none}
.hs-dot.on{background:var(--safe);box-shadow:0 0 0 0 rgba(31,164,99,.6);animation:hs-ping 1.1s ease-out infinite}
.hs-dot.idle{background:#c9b8ff;box-shadow:0 0 10px rgba(201,184,255,.6)}
.hs-dot.off{background:var(--degen)}
@keyframes hs-ping{0%{box-shadow:0 0 0 0 rgba(31,164,99,.6)}100%{box-shadow:0 0 0 12px rgba(31,164,99,0)}}
.hs-value{font:var(--t-num-xl);font-size:44px;letter-spacing:-.02em;line-height:1;
  background:linear-gradient(100deg,var(--ink),#c9b8ff 60%,#9ff0d6);-webkit-background-clip:text;background-clip:text;color:transparent}
.hs-pnl{font:var(--t-num-md)}.hs-pnl.up{color:var(--safe)}.hs-pnl.down{color:var(--degen)}
.hs-pnl-sub{font:var(--t-cap);color:var(--hs-mute)}
.hs-sub{display:flex;flex-wrap:wrap;gap:4px 14px;font:var(--t-cap);color:var(--hs-mute)}
/* the terminal */
.hs-term{margin:0 0 var(--s4);padding:12px 14px;border-radius:var(--radius);background:#000;color:#d9d9de;
  font:400 12.5px/1.6 var(--mono);border:1px solid var(--line-2);position:relative;overflow:hidden;min-height:52px}
.hs-term.live{border-color:rgba(159,240,214,.5);box-shadow:inset 0 0 40px rgba(159,240,214,.06)}
.hs-term-l{white-space:pre-wrap;word-break:break-word}
.hs-term-l.no{color:#f0616d}.hs-term-l.ok{color:#22c55e}
.hs-cursor{display:inline-block;color:#9ff0d6;animation:hs-blink 1s steps(2,start) infinite}
@keyframes hs-blink{to{visibility:hidden}}
/* a scan across what it holds while it thinks */
.hs-scan{position:relative;overflow:hidden}
.hs-scan.on::after{content:"";position:absolute;left:0;right:0;height:38%;top:-40%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(159,240,214,.10),transparent);animation:hs-scan 1.8s linear infinite}
@keyframes hs-scan{to{top:110%}}
.hs-cta{background:linear-gradient(100deg,#c9b8ff,#9ff0d6,#ffc9a8);color:#000;border:0;position:relative;overflow:hidden}
.hs-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);animation:hs-sheen 3.4s ease-in-out infinite}
@keyframes hs-sheen{0%,60%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.hs-glow{border-radius:var(--radius);padding:8px 12px;box-shadow:0 0 0 1px rgba(201,184,255,.35),0 0 24px rgba(201,184,255,.12)}
/* trade cards */
.hs-card{animation:hs-in .4s ease-out both}
.hs-card.newest{box-shadow:inset 3px 0 0 #9ff0d6;padding-left:10px}
@keyframes hs-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hs-chip{display:inline-flex;align-items:center;font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink);white-space:nowrap}
.hs-chip.vol{border-color:rgba(255,201,168,.7);color:#ffc9a8;background:rgba(255,201,168,.08);margin-left:6px;padding:2px 6px}
.hs-chip.pitch,.hs-chip.tracked{border-color:rgba(201,184,255,.6);color:#c9b8ff;background:rgba(201,184,255,.08)}
.hs-chip.found{border-color:rgba(159,240,214,.6);color:#9ff0d6;background:rgba(159,240,214,.08)}
.hs-chip.open,.hs-chip.perp_open{border-color:rgba(31,164,99,.6);color:var(--safe);background:rgba(31,164,99,.08)}
.hs-chip.close,.hs-chip.perp_close{border-color:rgba(255,90,60,.6);color:var(--degen);background:rgba(255,90,60,.08)}
.hs-chip.rotate{border-color:rgba(201,184,255,.7);color:#c9b8ff;background:rgba(201,184,255,.08)}
.hs-by{display:flex;align-items:center;gap:6px}
.hs-av{width:18px;height:18px;border-radius:999px;object-fit:cover;border:1px solid var(--line-2)}
.hs-code{font:var(--t-num-xs);background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
@media (max-width:520px){.hs-hero{flex-direction:column;align-items:flex-start}.hs-value{font-size:38px}}
@media (prefers-reduced-motion:reduce){.hs-hero::before,.hs-halo,.hs-mascot,.hs-dot.on,.hs-cursor,.hs-scan.on::after,.hs-cta::after,.hs-card{animation:none}}
/* the charts */
.hs-eq-box{width:100%;margin-bottom:var(--s3)}
.hs-eq{display:block;color:#c9b8ff}
.hs-eq.up{color:var(--safe)}.hs-eq.down{color:var(--degen)}
.hs-eq-base{stroke:var(--line-3);stroke-dasharray:3 4}
.hs-eq-empty{font:var(--t-cap);color:var(--hs-mute);padding:10px 0 16px}
.hs-crowd{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s2);align-items:center;margin:4px 0 10px}
.hs-crowd-l{font:var(--t-cap);color:var(--hs-mute)}
.hs-crowd-bar{display:block;height:6px;border-radius:999px;background:linear-gradient(90deg,rgba(255,90,60,.35),rgba(31,164,99,.35));position:relative;overflow:hidden}
.hs-crowd-bar i{display:block;height:100%;width:50%;background:linear-gradient(90deg,#c9b8ff,#9ff0d6);transition:width .6s ease}
.hs-crowd-v{font:var(--t-num-sm)}.hs-crowd.up .hs-crowd-v{color:var(--safe)}.hs-crowd.down .hs-crowd-v{color:var(--degen)}
.hs-radar-box{width:100%;margin:0 0 var(--s3);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-2);overflow:hidden}
.hs-radar{display:block}
.hs-grid{stroke:var(--line);stroke-width:1}
.hs-axis{font:500 11px var(--mono);fill:var(--hs-mute)}.hs-axis.dim{fill:var(--hs-dim)}
.hs-pt circle{fill:#c9b8ff;fill-opacity:.55;stroke:#c9b8ff;stroke-opacity:.9;transition:r .3s}
.hs-pt.up circle{fill:var(--safe);stroke:var(--safe)}.hs-pt.down circle{fill:var(--degen);stroke:var(--degen)}
.hs-pt:hover circle{fill-opacity:.9}
.hs-pt .hs-ring{fill:none;stroke:#9ff0d6;stroke-width:2;stroke-opacity:.9;animation:hs-ringpulse 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes hs-ringpulse{0%{transform:scale(.8);stroke-opacity:.9}100%{transform:scale(1.5);stroke-opacity:0}}
.hs-lbl{font:600 11px var(--mono);fill:var(--ink)}
.hs-toks{display:flex;flex-direction:column;margin-bottom:var(--s4)}
.hs-tok{display:grid;grid-template-columns:28px minmax(0,1.3fr) 90px minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.1fr) 56px;gap:10px;align-items:center;
  width:100%;text-align:left;padding:8px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);cursor:pointer;transition:background .12s}
.hs-tok:hover{background:var(--paper-2)}
.hs-tok.held{box-shadow:inset 3px 0 0 #9ff0d6;padding-left:8px}
.hs-tok.thin .hs-bar,.hs-tok.thin .hs-spark{opacity:.55}.hs-tok.thin .hs-tok-id i{color:var(--hs-dim)}
.hs-tok-id{display:flex;flex-direction:column;min-width:0}.hs-tok-id b{font:var(--t-strong)}.hs-tok-id i{font:var(--t-cap);font-style:normal;color:var(--hs-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-spark{width:90px;height:28px;color:var(--hs-dim)}.hs-spark.up{color:var(--safe)}.hs-spark.down{color:var(--degen)}
.hs-tok-attn{display:flex;flex-direction:column}.hs-tok-attn b{font:var(--t-num-sm)}.hs-tok-attn i{font:var(--t-cap);font-style:normal;color:var(--hs-mute);white-space:nowrap}
.hs-tok-bar{display:grid;grid-template-columns:34px 1fr 34px;gap:6px;align-items:center;font:var(--t-cap);color:var(--hs-mute)}
.hs-tok-bar i{font-style:normal}.hs-tok-bar .r{text-align:right;font:var(--t-num-xs);color:var(--ink)}
.hs-bar{display:block;height:5px;border-radius:999px;background:rgba(255,90,60,.25);overflow:hidden}
.hs-bar i{display:block;height:100%;background:#c9b8ff;transition:width .6s ease}
.hs-bar.buy{background:rgba(255,90,60,.25)}.hs-bar.buy i{background:var(--safe)}
.hs-bar.foil{background:rgba(255,255,255,.08)}.hs-bar.foil i{background:linear-gradient(90deg,var(--foil-a),var(--foil-c))}
.hs-tok-chg{font:var(--t-num-sm);text-align:right}.hs-tok-chg.up{color:var(--safe)}.hs-tok-chg.down{color:var(--degen)}
@media (max-width:640px){.hs-tok{grid-template-columns:28px minmax(0,1.2fr) 70px 56px}.hs-tok-attn,.hs-tok-bar{display:none}}
/* small token logos on the House page: the base .v2-pfp is the 52px profile avatar */
.v2-pfp.sm{width:22px;height:22px;object-fit:cover}
.hs-tok .v2-pfp.sm{width:26px;height:26px}
/* ── the House, lower half: the same foil vocabulary as the hero, all the way down ── */
.hs-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin:var(--s4) 0 var(--s2);padding-bottom:6px;position:relative;
  font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hs-txt)}
.hs-h::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--foil-a),var(--foil-b) 40%,transparent 80%);opacity:.7}
.hs-h-n{font:var(--t-cap);letter-spacing:0;text-transform:none;color:var(--hs-mute);text-align:right}
.hs-empty{font:var(--t-body);color:var(--hs-mute);padding:10px 0 14px}
.hs-when{font:var(--t-cap);color:var(--hs-mute)}
.hs-coins{display:inline-flex;align-items:center;gap:6px;min-width:0}
.hs-coins .v2-pfp.sm{margin-left:-6px;border:1.5px solid var(--paper);width:22px;height:22px}.hs-coins .v2-pfp.sm:first-child{margin-left:0}
.hs-coins-t{font:var(--t-strong);color:var(--hs-txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v2-pfp.md{width:34px;height:34px;object-fit:cover}
/* hero: what it holds */
.hs-held{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:2px 0}
.hs-held-c{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 5px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--hs-txt);cursor:pointer;font:var(--t-cap)}
.hs-held-c b{font:var(--t-strong)}.hs-held-c i{font:var(--t-num-xs);font-style:normal;color:var(--hs-mute)}.hs-held-c em{font:var(--t-num-xs);font-style:normal}
.hs-held-c em.up,.hs-held-pnl.up,.hs-hold-chg.up,.hs-trade-pnl.up,.hs-hold-meta b.up,.hs-hold-txt b.up{color:var(--safe)}
.hs-held-c em.down,.hs-held-pnl.down,.hs-hold-chg.down,.hs-trade-pnl.down,.hs-hold-meta b.down,.hs-hold-txt b.down{color:var(--degen)}
.hs-held.on .hs-held-c{box-shadow:0 0 0 1px rgba(159,240,214,.5),0 0 14px rgba(159,240,214,.18)}
.hs-held-pnl{font:var(--t-num-sm)}.hs-held-pnl i{font:var(--t-cap);font-style:normal;color:var(--hs-mute);margin-left:4px}
.hs-held-cash{font:var(--t-cap);color:var(--hs-mute)}
/* fresh flow */
.hs-flow{display:flex;flex-direction:column;margin-bottom:var(--s3)}
.hs-fl{display:grid;grid-template-columns:28px minmax(0,1.4fr) minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,.9fr) 64px;gap:10px;align-items:center;
  width:100%;text-align:left;padding:9px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--hs-txt);cursor:pointer;transition:background .12s}
.hs-fl:hover{background:var(--paper-2)}
.hs-fl.held{box-shadow:inset 3px 0 0 var(--foil-b);padding-left:8px}
.hs-fl .hs-tok-chg i{display:block;font:var(--t-cap);font-style:normal;color:var(--hs-mute)}
@media (max-width:640px){.hs-fl{grid-template-columns:28px minmax(0,1.4fr) 64px}.hs-fl .hs-tok-bar,.hs-fl .hs-tok-attn{display:none}}
/* holding now */
.hs-hold{position:relative;padding:var(--s3);margin-bottom:var(--s3);border-radius:var(--radius);background:var(--paper-2);isolation:isolate;overflow:hidden}
.hs-hold::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--hs-a,0deg),var(--foil-a),var(--foil-b),var(--foil-c),#e8e8f0,var(--foil-a));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.6;animation:hs-spin 14s linear infinite}
.hs-hold.on::before{animation-duration:3s;opacity:.9}
.hs-hold-legs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s3)}
.hs-hold-leg{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--hs-txt);cursor:pointer}
.hs-hold-leg:hover{background:rgba(255,255,255,.07)}
.hs-hold-sym{display:flex;flex-direction:column}.hs-hold-sym b{font:var(--t-strong)}.hs-hold-sym i{font:var(--t-num-xs);font-style:normal;color:var(--hs-mute)}
.hs-hold-chg{font:var(--t-num-sm);font-style:normal;margin-left:6px}
.hs-hold-meta{display:grid;grid-template-columns:auto auto auto auto auto auto;gap:4px 12px;align-items:baseline;justify-content:start;margin-bottom:var(--s3)}
.hs-hold-k{font:var(--t-cap);color:var(--hs-mute)}.hs-hold-meta b{font:var(--t-num-sm)}
.hs-hold-rule{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s3)}
.hs-hold-track{display:block;height:5px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.hs-hold-track i{display:block;height:100%;background:linear-gradient(90deg,var(--foil-a),var(--foil-b));transition:width .6s ease}
.hs-hold-txt{font:var(--t-cap);color:var(--hs-mute)}.hs-hold-txt b{font:var(--t-num-xs)}
.hs-hold .hs-cta{width:100%}
/* perp */
.hs-perp{border-radius:var(--radius);padding:8px 12px;margin-bottom:var(--s3);box-shadow:0 0 0 1px rgba(201,184,255,.35),0 0 24px rgba(201,184,255,.12)}
.hs-perp-l{display:flex;justify-content:space-between;gap:var(--s3);padding:6px 0;border-bottom:1px solid var(--line);font:var(--t-body);color:var(--hs-txt)}.hs-perp-l:last-child{border-bottom:0}
.hs-perp-l b{font:var(--t-num-sm)}.hs-perp-l b.up{color:var(--safe)}.hs-perp-l b.down{color:var(--degen)}
/* every trade */
.hs-trades{display:flex;flex-direction:column;gap:10px;margin-bottom:var(--s3)}
.hs-trade{position:relative;padding:12px 14px;border-radius:var(--radius);border:1px solid var(--line-2);background:var(--paper-2);animation:hs-in .4s ease-out both}
.hs-trade.newest{border-color:rgba(159,240,214,.5);box-shadow:0 0 22px rgba(159,240,214,.08)}
.hs-trade.close,.hs-trade.perp_close{border-color:rgba(255,201,168,.35)}
.hs-trade-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center}
.hs-trade-what{display:flex;align-items:center;gap:10px;min-width:0}
.hs-trade-usd{font:var(--t-num-sm);color:var(--hs-mute);white-space:nowrap}
.hs-trade-pnl{display:flex;flex-direction:column;align-items:flex-end}.hs-trade-pnl b{font:var(--t-num-md)}.hs-trade-pnl i{font:var(--t-cap);font-style:normal;color:var(--hs-mute);white-space:nowrap}
.hs-by{display:flex;align-items:center;gap:6px;font:var(--t-cap);color:var(--hs-mute);margin-top:8px}
.hs-av{width:18px;height:18px;border-radius:999px;object-fit:cover;border:1px solid var(--line-2);flex:none}
.hs-av.lg{width:30px;height:30px}
.hs-why{margin:8px 0 6px;padding:8px 10px;border-radius:8px;background:#000;border:1px solid var(--line);font:400 12.5px/1.55 var(--mono);color:#d9d9de;white-space:pre-wrap;word-break:break-word}
.hs-why::before{content:"> ";color:var(--foil-b)}
.hs-metrics{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.hs-metric{font:var(--t-num-xs);color:var(--hs-txt);padding:3px 8px;border-radius:999px;border:1px solid var(--line-2);background:rgba(201,184,255,.06)}
.hs-trade .hs-when{margin-top:6px}
/* pitch, calls, watch */
.hs-pitch{margin-bottom:var(--s3)}
.hs-pitch-cmd{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 12px;border-radius:var(--radius);background:#000;border:1px solid var(--line-2);font:400 12.5px/1.5 var(--mono);color:#d9d9de}
.hs-pitch-ps{color:var(--foil-b)}
.hs-pitch-sub{font:var(--t-cap);color:var(--hs-mute);margin:8px 0 4px;max-width:60ch}
.hs-calls{display:flex;flex-direction:column;margin-bottom:var(--s3)}
.hs-call{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.hs-call .hs-av{width:26px;height:26px;margin-top:2px}
.hs-call-b{display:flex;flex-direction:column;gap:4px;min-width:0}
.hs-call-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.hs-call-top .v2-linkish{font:var(--t-strong)}
.hs-likes{font:var(--t-num-xs);color:var(--hs-mute)}
.hs-call-t{font:var(--t-body);color:var(--hs-txt);max-width:64ch}
.hs-call-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.hs-call-legs{display:inline-flex;align-items:center;gap:10px;padding:4px 10px 4px 6px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--hs-txt);cursor:pointer;max-width:100%}
.hs-call-legs:hover{background:rgba(255,255,255,.07)}
.hs-call-go{font:var(--t-cap);color:var(--foil-b);white-space:nowrap}
.hs-watch{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-bottom:var(--s3)}
.hs-w{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--hs-txt);cursor:pointer;text-align:left;min-width:0}
.hs-w:hover{background:rgba(255,255,255,.07)}
.hs-w-b{display:flex;flex-direction:column;gap:3px;min-width:0}.hs-w-b b{font:var(--t-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hs-w-b i{font:var(--t-cap);font-style:normal;color:var(--hs-mute)}
.hs-w-wt{display:block;height:3px;width:90px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.hs-w-wt i{display:block;height:100%;background:linear-gradient(90deg,var(--foil-a),var(--foil-b))}
.hs-w.blocked{border-color:rgba(255,90,60,.5);background:rgba(255,90,60,.05)}
.hs-w.blocked b{text-decoration:line-through;color:var(--hs-mute)}.hs-w-x{color:var(--degen)!important}
@media (max-width:520px){.hs-hold-meta{grid-template-columns:auto auto}.hs-trade-top{grid-template-columns:auto minmax(0,1fr)}.hs-trade-pnl{grid-column:1/-1;flex-direction:row;gap:8px;align-items:baseline}}
@media (prefers-reduced-motion:reduce){.hs-hold::before,.hs-trade{animation:none}}
/* ── the House, round three: ring, tape, positions, voices, flashes ── */
.hs-mascot-wrap{width:148px;height:148px}
.hs-ring-svg{position:absolute;inset:0;transform:rotate(-90deg)}
.hs-ring-bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:3}
.hs-ring-fg{fill:none;stroke:url(#hsRingG);stroke:var(--foil-b);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 6px rgba(159,240,214,.6))}
.hs-ring-svg.spin{animation:hs-ringspin 1.4s linear infinite}
@keyframes hs-ringspin{to{transform:rotate(270deg)}}
.hs-value.flash-up{animation:hs-flash-up .9s ease-out}
.hs-value.flash-down{animation:hs-flash-down .9s ease-out}
@keyframes hs-flash-up{0%{text-shadow:0 0 22px rgba(31,164,99,.9);transform:scale(1.03)}100%{text-shadow:none;transform:none}}
@keyframes hs-flash-down{0%{text-shadow:0 0 22px rgba(255,90,60,.9);transform:scale(1.03)}100%{text-shadow:none;transform:none}}
.hs-held-c.up{border-color:rgba(31,164,99,.5)}.hs-held-c.down{border-color:rgba(255,90,60,.45)}
.hs-held-c em.up{color:var(--safe)}.hs-held-c em.down{color:var(--degen)}
.hs-held-c .hs-coins .v2-pfp.sm{width:20px;height:20px}
.hs-held-slot{font:var(--t-cap);color:var(--hs-mute);padding:4px 10px;border:1px dashed var(--line-2);border-radius:999px}
/* the tape */
.hs-tape{position:relative;overflow:hidden;margin:0 0 var(--s3);padding:7px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hs-tape-run{display:inline-flex;gap:28px;white-space:nowrap;animation:hs-tape 60s linear infinite;will-change:transform}
.hs-tape:hover .hs-tape-run{animation-play-state:paused}
@keyframes hs-tape{to{transform:translateX(-50%)}}
.hs-tape-i{font:500 11.5px/1 var(--mono);color:var(--hs-txt);letter-spacing:.02em}
.hs-tape-i b{font-weight:700;letter-spacing:.12em;margin-right:6px;font-size:10.5px}
.hs-tape-i.vol b{color:var(--foil-c)}.hs-tape-i.found b{color:var(--foil-b)}.hs-tape-i.call b,.hs-tape-i.pitch b{color:var(--foil-a)}
.hs-tape-i.up b{color:var(--safe)}.hs-tape-i.down b{color:var(--degen)}
.hs-term-l.think{color:var(--foil-b);animation:hs-fadein .4s ease-out}
@keyframes hs-fadein{from{opacity:0}to{opacity:1}}
/* positions */
.hs-positions{display:flex;flex-direction:column;gap:12px;margin-bottom:var(--s3)}
.hs-pos{position:relative;padding:var(--s3);border-radius:var(--radius);background:var(--paper-2);isolation:isolate;overflow:hidden;animation:hs-in .4s ease-out both}
.hs-pos::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;z-index:-1;
  background:conic-gradient(from var(--hs-a,0deg),var(--foil-a),var(--foil-b),var(--foil-c),#e8e8f0,var(--foil-a));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;animation:hs-spin 16s linear infinite}
.hs-pos.on::before{animation-duration:3s;opacity:.9}
.hs-pos::after{content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;opacity:.5}
.hs-pos.up::after{background:radial-gradient(70% 90% at 100% 0%,rgba(31,164,99,.14),transparent 60%)}
.hs-pos.down::after{background:radial-gradient(70% 90% at 100% 0%,rgba(255,90,60,.14),transparent 60%)}
.hs-pos-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3);margin-bottom:10px}
.hs-pos-legs{display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.hs-pos-legs .hs-spark{width:70px;height:24px}
.hs-pos-pnl{display:flex;flex-direction:column;align-items:flex-end;flex:none}.hs-pos-pnl b{font:var(--t-num-lg)}.hs-pos-pnl i{font:var(--t-cap);font-style:normal;color:var(--hs-mute);white-space:nowrap}
.hs-pos-pnl.up b{color:var(--safe)}.hs-pos-pnl.down b{color:var(--degen)}
.hs-pos-range{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin:2px 0 10px;font:var(--t-num-xs);color:var(--hs-mute)}
.hs-pos-stop{color:var(--degen)}.hs-pos-tp{color:var(--safe)}
.hs-pos-track{position:relative;display:block;height:6px;border-radius:999px;background:linear-gradient(90deg,rgba(255,90,60,.35),rgba(255,255,255,.08) 38%,rgba(31,164,99,.35))}
.hs-pos-track i{position:absolute;top:50%;transform:translate(-50%,-50%)}
.hs-pos-track i.zero{width:1px;height:12px;background:rgba(255,255,255,.35)}
.hs-pos-track i.mark{width:12px;height:12px;border-radius:999px;border:2px solid var(--paper);transition:left .8s ease}
.hs-pos-track i.mark.up{background:var(--safe);box-shadow:0 0 10px rgba(31,164,99,.8)}.hs-pos-track i.mark.down{background:var(--degen);box-shadow:0 0 10px rgba(255,90,60,.8)}
.hs-pos .hs-cta{width:100%;margin-top:4px}
/* voices */
.hs-voices{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s3)}
.hs-voice{display:grid;grid-template-columns:22px auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--hs-txt);cursor:pointer;text-align:left}
.hs-voice:hover{background:rgba(255,255,255,.07)}
.hs-voice-n{font:var(--t-num-xs);color:var(--hs-mute);text-align:center}
.hs-voice-b{display:flex;flex-direction:column;gap:2px;min-width:0}.hs-voice-b b{font:var(--t-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hs-voice-b i{font:var(--t-cap);font-style:normal;color:var(--hs-mute)}
.hs-voice-p{display:flex;flex-direction:column;align-items:flex-end}.hs-voice-p b{font:var(--t-num-md)}.hs-voice-p i{font:var(--t-cap);font-style:normal;color:var(--hs-mute)}
.hs-voice.up .hs-voice-p b{color:var(--safe)}.hs-voice.down .hs-voice-p b{color:var(--degen)}
.hs-voice:first-child{border-color:rgba(255,201,168,.6);box-shadow:0 0 18px rgba(255,201,168,.12)}
@media (max-width:520px){.hs-mascot-wrap{width:120px;height:120px}.hs-ring-svg{width:120px;height:120px}.hs-pos-top{flex-direction:column}.hs-pos-pnl{align-items:flex-start}}
@media (prefers-reduced-motion:reduce){.hs-tape-run,.hs-ring-svg.spin,.hs-pos::before,.hs-value.flash-up,.hs-value.flash-down{animation:none}}
/* the mind log, the pitch button, the rules */
.hs-mind{margin:0 0 var(--s3);border:1px solid var(--line);border-radius:var(--radius);background:#000;overflow:hidden}
.hs-mind summary{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:8px 12px;cursor:pointer;list-style:none;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hs-txt)}
.hs-mind summary::-webkit-details-marker{display:none}
.hs-mind summary::before{content:"▸ ";color:var(--foil-b)}.hs-mind[open] summary::before{content:"▾ "}
.hs-mind-l{max-height:320px;overflow:auto;border-top:1px solid var(--line)}
.hs-mind-r{display:grid;grid-template-columns:44px auto minmax(0,1fr);gap:10px;align-items:start;padding:7px 12px;border-bottom:1px solid var(--line);font:400 12px/1.5 var(--mono);color:#d9d9de}
.hs-mind-r:last-child{border-bottom:0}
.hs-mind-w{color:var(--hs-mute)}.hs-mind-x i{font-style:normal;color:#f0616d}
.hs-mind-r.hold .hs-chip{color:var(--hs-mute)}
.hs-pitch-go{margin-left:auto;font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#000;background:linear-gradient(100deg,var(--foil-a),var(--foil-b),var(--foil-c));padding:7px 12px;border-radius:999px;text-decoration:none;white-space:nowrap}
.hs-rules{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s3)}
.hs-rule{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);font:var(--t-body);color:var(--hs-txt)}
.hs-rule b{font:600 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--foil-a)}
.hs-rule em{font-style:normal;font:var(--t-num-sm)}.hs-rule em.up{color:var(--safe)}.hs-rule em.down{color:var(--degen)}
.hs-stale{font:var(--t-cap);color:var(--foil-c);padding:3px 8px;border:1px dashed rgba(255,201,168,.5);border-radius:6px;width:max-content;max-width:100%}
/* An exit the chain keeps refusing. Dashed while it is still retrying, solid once the bar has been
   set aside: the difference matters, because one is a hiccup and the other is a bag that is not
   coming back through the front door. */
.hs-pos-stuck{display:flex;flex-direction:column;gap:2px;margin:0 0 var(--s3);padding:7px 10px;border-radius:8px;border:1px dashed rgba(240,97,109,.45);background:rgba(240,97,109,.06)}
.hs-pos-stuck.on{border-style:solid;border-color:rgba(240,97,109,.75)}
.hs-pos-stuck b{font:600 11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--degen)}
.hs-pos-stuck span{font:var(--t-cap);color:var(--hs-mute);overflow-wrap:anywhere}

/* "Say the trade" (v2/ThesisBox.tsx): the bar builds while you type. */
.v2-thesisbox{margin:var(--s3,14px) 0 var(--s2,10px)}
.v2-thesisbox-in{position:relative}
.v2-thesisbox-in .v2-field{padding-left:30px;margin-bottom:0}
.v2-thesisbox-k{position:absolute;left:12px;top:50%;transform:translateY(-50%);font:600 18px var(--sans);color:var(--faint);pointer-events:none}
.v2-thesisbox-in.busy .v2-thesisbox-k{color:var(--ink);animation:v2-thesis-pulse .9s ease-in-out infinite}
@keyframes v2-thesis-pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.v2-thesisbox-in.busy .v2-thesisbox-k{animation:none}}