/* One terminal: discovery stays beside the token, with activity below its chart. */
.unified-terminal{padding:0 20px;max-width:none}
.terminal-mobile-actions,.terminal-mobile-back{display:none}
/* pump.fun's coin-page proportions (owner, 29 Sep): 24% token rail, 55% chart column, 21% buy console, of the terminal's
   width; the rails keep 330px / 310px floors at the narrowest desktop windows (the chart column gives way first) */
.terminal-shell.term{grid-template-columns:minmax(330px,24%) minmax(0,1fr) minmax(310px,21%);grid-template-rows:auto;gap:0;margin:18px 0 30px;background:var(--bg);border-radius:10px;overflow:clip}
.terminal-shell>.terminal-discovery{grid-column:1;grid-row:1;min-width:0;border-right:1px solid var(--line);--terminal-sidebar-top:90px}
.terminal-shell>.terminal-main{grid-column:2;grid-row:1;min-width:0;background:var(--bg)}
.terminal-shell>.term-rail{grid-column:3;grid-row:1;display:flex;position:sticky;top:88px;max-height:calc(100 * var(--vh) - 104px);background:var(--panel)}
.terminal-main>.term-head{padding:22px 24px 18px;border-bottom:1px solid var(--line)}
.terminal-main .coin-top{gap:15px;align-items:center}
.terminal-main .coin-top h1{font-size:34px;line-height:1.1;font-stretch:100%;letter-spacing:-.025em}
.terminal-main .coin-ico.lg{width:58px;height:58px;border-radius:10px;object-fit:cover;flex:none}
.terminal-main .coin-meta{gap:8px;margin-top:10px;flex-wrap:wrap}
.terminal-main .coin-meta .tag,.terminal-main .coin-meta .copy{font-size:12px;letter-spacing:0}
.terminal-main .coin-meta .cf-open{font-size:12px}
/* the coin's five numbers in the header (owner, 29 Sep, design A; the stats row under the header is gone): a small label
   over a bold value, the old row's type. 73px in (the 58px logo + its 15px gap) so a second line starts under the name.
   The price's 24h change sits beside its value, green up, red down. */
.coin-stats{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px 30px;min-width:0;padding-left:73px}
.coin-stats:empty{display:none}
.cs-stat{min-width:0}
.cs-k{font:500 13px/1.4 var(--sans);letter-spacing:0;color:var(--muted);white-space:nowrap}
.cs-v{margin-top:3px;font:700 20px/1.3 var(--sans);letter-spacing:-.025em;color:var(--ink);white-space:nowrap}
.cs-v.brand{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cs-chg{margin-left:2px;font:600 13px/1.3 var(--sans);letter-spacing:0;color:var(--muted)}
.cs-chg.up{color:var(--up)}
.cs-chg.down{color:var(--down)}
.terminal-chart{padding:0;min-width:0}
.terminal-shell .chart-card{margin:0;border:0;border-radius:0;padding:0}
.terminal-shell #chart{min-height:440px}
/* once the chart is up on a desktop, coin.js sizes its stage (--fc-stage-height, 320 px at least) and a drag can take it
   to 240; the box's own floor would otherwise stretch the stage back past both */
@media(min-width:1100px){.terminal-shell #chart.fable-chart{min-height:0}}
.terminal-activity{border-top:1px solid var(--line);min-width:0;scroll-margin-top:95px}
.terminal-shell .terminal-activity-tabs{display:flex;gap:5px;margin:0;padding:0 18px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.terminal-shell .terminal-activity-tabs .ptab{padding:18px 14px;display:inline-flex;align-items:center;gap:7px;font:650 16px/1.2 var(--sans);border-bottom-width:2px;white-space:nowrap}
.terminal-shell .tpanel{padding:20px;gap:18px;min-width:0}
.terminal-shell .tpanel[hidden]{display:none!important}
.terminal-shell #panel-theses,.terminal-shell #panel-swaps,.terminal-shell #panel-holders{padding:0}
.terminal-shell #nativeTheses .ft-feed{border:0;border-radius:0}
.terminal-shell #nativeTheses .ft-heading{display:none}
.terminal-shell #nativeTheses .ft-controls{padding-top:14px}
/* the Trades tab (FableTraders.mountTrades) fills the panel: a block, not the old tape's clipped flex row */
.terminal-shell #liveTape{display:block;min-width:0}
@media(max-width:1350px) and (min-width:1100px){.terminal-shell .terminal-activity-tabs{padding:0 8px;gap:0}.terminal-shell .terminal-activity-tabs .ptab{padding:17px 12px}}
@media(max-width:1099px){
 .unified-terminal{padding:0 12px}.terminal-shell.term{grid-template-columns:minmax(0,1fr) 300px;overflow:visible;margin-top:12px}
 .terminal-shell>.terminal-discovery{grid-column:1/-1;grid-row:1;border-right:0;border-bottom:1px solid var(--line)}
 .terminal-shell>.terminal-main{grid-column:1;grid-row:2}
 .terminal-shell>.term-rail{grid-column:2;grid-row:2;top:80px}
 .terminal-main>.term-head{padding:16px}.terminal-main .coin-top h1{font-size:27px}.terminal-main .coin-meta .tag,.terminal-main .coin-meta .copy{font-size:10px}
 .cs-k{font-size:11px}.cs-v{font-size:17px}.cs-chg{font-size:11.5px}
 .terminal-shell .terminal-activity-tabs{padding:0 7px;gap:0}.terminal-shell .terminal-activity-tabs .ptab{font-size:13px;padding:16px 12px}
}
@media(max-width:759px){
 .terminal-mobile-actions{display:flex;gap:7px;position:fixed;bottom:0;left:0;right:0;z-index:35;padding:10px 12px max(10px,env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line)}
 .terminal-mobile-actions button{border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font:650 13px var(--sans);border-radius:6px;padding:12px 9px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;cursor:pointer}
 .terminal-mobile-actions #terminalBuy{background:var(--brand-sheen-sm);border-color:transparent;color:var(--brand-ink);box-shadow:var(--brand-bevel)}
 .terminal-mobile-actions #terminalSell{color:var(--down)}
 .terminal-mobile-back{display:block;width:100%;background:var(--panel);border:0;border-bottom:1px solid var(--line);padding:15px;text-align:left;color:var(--brand-text-solid);font:600 13px var(--sans);cursor:pointer}
 .unified-terminal{padding-bottom:70px!important}.terminal-shell #tradeCard,.terminal-shell .terminal-chart,.terminal-shell #terminalDiscovery{scroll-margin-top:120px}
 .unified-terminal{padding:0}.terminal-shell.term{display:flex;flex-direction:column;border:0;border-radius:0;margin:0;overflow:visible}
 .terminal-shell>.terminal-discovery,.terminal-shell>.terminal-main,.terminal-shell>.term-rail{width:100%;grid-column:auto!important;grid-row:auto!important}
 .terminal-shell>.terminal-main{order:1}.terminal-shell>.terminal-discovery{order:0}.terminal-shell>.term-rail{order:2;position:static;display:flex;max-height:none;border:1px solid var(--line);margin:18px 0 0}
 .terminal-main>.term-head{padding:18px 14px}.terminal-main .coin-top h1{font-size:26px}.terminal-main .coin-ico.lg{width:46px;height:46px}
 .terminal-shell #chart{min-height:400px}.terminal-shell .tpanel{padding:14px}
}

/* The three main views belong to every token; chart activity stays one level below. */
.terminal-main{container-type:inline-size}
/* The header (design A, 29 Sep): the name and tags, the coin's five numbers, then creator fees. Where the main column is
   wide enough that is one row; narrower (a 1440px window) the numbers take a second line under the name; narrower still
   the actions get a row of their own under the numbers; on phones the numbers go three to a row. From 1100px wide the
   compact desktop header further down (pump.fun's proportions, 29 Sep) replaces this, and the chart's height budget
   (coin.js FableCoinHeader) counts that one. The Chart / Vote / Fables switch is no longer in the header: since 30 Sep it
   is a full-width strip of its own under it (.token-primary-tabs below). */
.terminal-main>.term-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"top actions" "stats stats";align-items:end;gap:12px 28px}
.terminal-main>.term-head>.coin-top{grid-area:top;min-width:0}
.terminal-main>.term-head>.coin-stats{grid-area:stats}
.terminal-main>.term-head>.coin-header-actions{grid-area:actions}
/* tablets: the name and tags, the numbers, then the actions (desktop has its own compact header below) */
@container(max-width:859px){.terminal-main>.term-head{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "stats" "actions"}}
@container(max-width:760px){
 .terminal-main>.term-head>.coin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 14px;padding-left:0}
 .terminal-main>.term-head .cs-chg{display:block;margin:2px 0 0}
}
.coin-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin:0 0 2px auto;min-width:0;flex:none}
#creatorFeeAction{flex:none;display:flex}
.coin-header-actions .cf-btn{margin:0;min-height:42px;padding:10px 13px;border-radius:6px;font-size:13px;white-space:nowrap;font-stretch:100%}
/* Vote beacon: quiet view tabs beside the shared chocolate-metallic round clock. */
.token-primary-tabs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,2.6fr);align-items:center;gap:3px;min-width:0;margin:0;padding:9px 16px;border-bottom:1px solid var(--line);background:var(--bg)}
.token-primary-tabs button{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;height:46px;min-width:0;margin:0;padding:0 12px;white-space:nowrap;border:1px solid transparent;border-radius:5px;background:#17171a;color:#a6a3ad;box-shadow:none;text-shadow:none;font:750 16px/1.2 var(--sans);letter-spacing:0;cursor:pointer;transition:background .16s,color .16s,border-color .16s}
.token-primary-tabs button:hover{background:#222126;color:#f7f3ff}
.token-primary-tabs button[aria-selected=true],.token-primary-tabs button[aria-selected=true]:hover{background:#2a2930;border-color:#414047;color:#fcf8ff;box-shadow:inset 0 1px #ffffff08}
.token-primary-tabs button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.token-primary-tabs svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.9;fill:none;flex:none}
.token-primary-tabs img{width:32px;height:32px;margin:0 -5px;object-fit:cover;flex:none}
.analytics-brand{width:27px;height:27px;border-radius:7px;object-fit:cover;flex:none;box-shadow:0 0 0 1px #0006}
/* The existing open-state hook is retained; the readable status replaces its pulsing dot. */
.token-primary-tabs .tab-live{display:none}
/* The Vote tab's countdown shares the round clock, including its midnight close state. */
.token-primary-tabs .vote-tab{--vt-accent:var(--brand-hi);--vt-f:0;justify-content:flex-start;gap:12px;height:54px;margin-left:14px;padding:7px 13px;border:1px solid var(--brand);border-radius:6px;background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel);text-shadow:var(--brand-ink-shadow)}
.token-primary-tabs .vote-tab:hover{border-color:var(--brand-hi);background:var(--brand-sheen-sm-hover);color:var(--brand-ink)}
.token-primary-tabs .vote-tab[aria-selected=true],.token-primary-tabs .vote-tab[aria-selected=true]:hover{border-color:var(--brand-hi);background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel),0 0 12px color-mix(in srgb,var(--brand) 15%,transparent)}
.token-primary-tabs .vote-tab[aria-selected=true]:hover{background:var(--brand-sheen-sm-hover)}
.token-primary-tabs .vt-label,.token-primary-tabs .vt-meta{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.token-primary-tabs .vt-label b{font:inherit}
.token-primary-tabs .vt-status,.token-primary-tabs .vt-until{font:500 11px/1.2 var(--sans);color:color-mix(in srgb,var(--brand-ink) 85%,var(--brand-hi));white-space:nowrap}
.token-primary-tabs .vt-meta{margin-left:auto;align-items:flex-end}
.token-primary-tabs .vt-ring{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:3px;border-radius:50%;background:conic-gradient(var(--vt-accent) calc(var(--vt-f) * 1turn),color-mix(in srgb,var(--brand-ink) 20%,transparent) 0)}
.token-primary-tabs .vt-ring>i{width:100%;height:100%;border-radius:50%;background:var(--brand-mark);display:grid;place-items:center}
.token-primary-tabs .vt-ring svg{width:16px;height:16px;color:var(--vt-accent)}
.token-primary-tabs .vt-time,.token-primary-tabs .vt-done,.token-primary-tabs .vt-until{display:none}
.token-primary-tabs .vote-tab[data-vt=count] .vt-time,.token-primary-tabs .vote-tab[data-vt=count] .vt-until{display:block}
.token-primary-tabs .vt-time{font:600 13px/1.2 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--brand-ink)}
.token-primary-tabs .vt-time i{font-style:normal}
.token-primary-tabs .vt-time .vt-short{display:none}
.token-primary-tabs .vote-tab[data-vt=closing]{--vt-accent:#77e8b0}
.token-primary-tabs .vote-tab[data-vt=closing] .vt-done{display:inline-flex}
.token-primary-tabs .vt-done{align-items:center;gap:5px;font:700 12px/1.2 var(--sans);color:var(--vt-accent)}
.token-primary-tabs .vt-done svg{width:16px;height:16px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.token-primary-tabs .vote-tab.vt-fresh .vt-time{animation:vt-in .4s ease-out both}
@keyframes vt-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
 .token-primary-tabs button{transition:none}
 .token-primary-tabs .vote-tab.vt-fresh .vt-time{animation:none}
}
.activity-count{display:inline-flex;align-items:center;font:500 12px/1 var(--sans);background:var(--panel-2);color:var(--muted);padding:4px 6px;border-radius:5px}
.activity-count:empty{display:none}
.terminal-shell [data-section][hidden]{display:none!important}
.terminal-shell #panel-chart{min-width:0}
.terminal-shell #panel-vote,.terminal-shell #panel-analytics{min-height:650px}
.trader-profile-link{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trader-profile-link:hover{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-decoration:underline;text-underline-offset:3px}
.trader-profile-link:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.trader-avatar-link{display:block;line-height:0;border-radius:50%;overflow:visible}
.terminal-shell .th .who{font:650 14px/1.4 var(--sans)}
.terminal-shell .th .said{font:450 14px/1.55 var(--sans);margin-top:8px}
.terminal-shell .th .res{font-size:13px}.terminal-shell .th .res b{font-size:17px}
.analytics-receipt{display:block;margin-top:6px;color:var(--muted)}
.terminal-shell #postLink{display:block;width:100%;border:0;border-top:1px solid var(--line);padding:18px;color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font:600 14px var(--sans);text-align:center;cursor:pointer}
.terminal-shell #fableKpis{margin:0;grid-template-columns:repeat(3,minmax(0,1fr))}
.terminal-shell #fableKpis>div{min-width:0}.terminal-shell #fableKpis .v{font-size:24px}
@container(max-width:760px){
 .coin-header-actions{margin-left:0;gap:10px;flex-wrap:wrap}
 .coin-header-actions .cf-btn{font-size:12px;min-height:40px}
}
@container(max-width:440px){
 .coin-header-actions{display:grid;grid-template-columns:1fr;margin-top:14px}
 .terminal-shell #fableKpis{grid-template-columns:repeat(2,minmax(0,1fr))}.terminal-shell #fableKpis .v{font-size:21px}
 .terminal-shell .th{grid-template-columns:30px minmax(0,1fr);gap:9px}.terminal-shell .th .res{grid-column:2;text-align:left}.terminal-shell .th img{width:30px;height:30px}
}

/* ---- the compact desktop coin header (owner, 29 Sep: pump.fun's coin page). One block about pump's height, ~126 layout
   px (~95 screen px under the .75 page scale): on the left the 56px logo, the name at 32px (24 screen px) and the ticker,
   tags and socials on one line under it (two lines at a 1440px window); on the right the price with its 24h change and
   the other four numbers inline, and right under them creator fees. coin.js FableCoinHeader's chart budget (header: 126)
   counts this block with its tags on two lines; the Chart / Vote / Fables strip under it is its own line ("views": 72). Its fallbacks go by
   the window's width (@media), not the column's: WebKit measures container queries under html zoom in screen px, Chrome
   in page px, so a container threshold would switch at different windows in the two. This block sits after the tablet
   and phone container rules so it wins over them on desktop. */
@media(min-width:1100px){
 .terminal-main>.term-head{grid-template-columns:minmax(0,1fr) max-content;grid-template-areas:"top stats" "top actions";align-items:center;gap:8px 28px;padding:12px 24px}
 .terminal-main>.term-head>.coin-top{align-self:center}
 .terminal-main>.term-head>.coin-stats{display:flex;align-self:end;justify-content:flex-end;flex-wrap:nowrap;gap:0 22px;padding-left:0}
 .terminal-main>.term-head>.coin-header-actions{align-self:start;margin:0 0 0 auto;gap:10px}
 .terminal-main .coin-top{gap:12px}
 .terminal-main .coin-ico.lg{width:56px;height:56px;border-radius:9px}
 .terminal-main .coin-top h1{font-size:32px;line-height:1.15;overflow-wrap:anywhere}
 .terminal-main .coin-meta{gap:6px;margin-top:6px}
 .terminal-main .coin-meta .social-link.dex{width:26px;height:26px}
 .terminal-main .coin-meta .social-link.dex img{width:20px;height:20px}
 .cs-k{font:500 12px/1.35 var(--sans)}
 .cs-v{margin-top:2px;font:700 17px/1.2 var(--sans)}
 .cs-stat[data-stat=price] .cs-v{font-size:22px}
 .terminal-main>.term-head .cs-chg{display:inline;margin:0 0 0 2px;font-size:12px}
 .coin-header-actions .cf-btn{min-height:34px;padding:6px 11px;font-size:12px}
 /* The 53px Vote beacon keeps the desktop "views" budget at 72px including padding and border. */
 .token-primary-tabs{padding:9px 24px}
 .token-primary-tabs button{height:47px;gap:12px;padding:0 16px;font-size:21px}
 .token-primary-tabs .vote-tab{height:53px;padding:7px 16px}
 .token-primary-tabs .vt-status,.token-primary-tabs .vt-until{font-size:13px}
 .token-primary-tabs .vt-time{font-size:16px}
 .token-primary-tabs .vt-done{font-size:15px}
 .token-primary-tabs .vt-ring{width:37px;height:37px}
 .token-primary-tabs svg{width:28px;height:28px}
 .token-primary-tabs img{width:43px;height:43px;margin:0 -7px}
 /* a narrower chart column (windows up to 1230px wide: under ~880 page px): the name and tags, the numbers under the name,
    then the actions */
 @media(max-width:1230px){
  .terminal-main>.term-head{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "stats" "actions"}
  .terminal-main>.term-head>.coin-stats{justify-content:flex-start;flex-wrap:wrap;gap:8px 22px;padding-left:68px}
 }
 /* a very wide chart column (windows from 2460px: ~1780 page px): everything on one row */
 @media(min-width:2460px){
  .terminal-main>.term-head{grid-template-columns:minmax(0,1fr) max-content max-content;grid-template-areas:"top stats actions";column-gap:36px}
  .terminal-main>.term-head>.coin-stats,.terminal-main>.term-head>.coin-header-actions{align-self:center}
 }
}

/* Pump-style activity tabs, keeping Fable's neutral black and bronze. */
.terminal-activity{position:relative}
.terminal-shell .terminal-activity-tabs .ptab{font-size:18px;font-weight:600;padding:16px 15px;border-bottom-width:3px}
.terminal-shell .terminal-activity-tabs .ptab[aria-selected=true]{color:var(--ink);background:none;border-color:var(--brand);border-image:var(--brand-outline) 1}
@container(max-width:600px){ .terminal-shell .terminal-activity-tabs .ptab{font-size:15px;padding:15px 11px} }

/* ---- the buy console (owner, 29 Sep): the original layout, the balance under the amount, one small "You receive" line
   that follows the price, "Buying" with a spinning wheel, then a green check beside "You bought …" */
.trade-console .trade-balance{justify-content:center;align-items:center;gap:6px;margin-top:4px;color:var(--muted);font:500 13px/1.4 var(--sans)}
.trade-console .trade-balance b{font:600 13px/1.4 var(--mono);color:var(--ink)}
.trade-bal-logo{width:16px;height:16px;border-radius:50%;object-fit:cover;flex:none;vertical-align:-3px;background:#1b1815}
/* ---- "Pay with" (owner's pick, 7 Oct, option C "Pay with bar + big picker": the tiny "Trading from" line and its small
   list were "too small and hard to see and navigate through"). A tall bar right under the amount, the whole of it a tap
   target, and ONE big list of the account's wallets: a centred window on a laptop, a sheet from the bottom on a phone
   (640px and under). Fable's tokens and metal recipes only (fable.css): Change, '✓ Selected' and the switch buttons are the
   FILLED metal (--brand-sheen-sm + --brand-bevel, cream label); the waiting bar, the chosen row, 'Best for this …' and the
   small buttons wear the metal OUTLINE. Square corners in the rail, like the Buy press; the window keeps 8px. Dark only. */
.trade-console .pay-with{margin:12px 0 0;text-align:left}
.pw-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto auto;align-items:center;gap:10px;width:100%;min-height:66px;margin:0;padding:10px 10px 10px 12px;border:1px solid var(--line-2);border-radius:0;background:var(--panel-2);color:var(--ink);text-align:left;cursor:pointer;transition:background-color .15s}
.pw-row:hover:not(:disabled),.pw-row.wait{border-color:transparent;background:linear-gradient(var(--panel-2),var(--panel-2)) padding-box,var(--brand-outline) border-box}
.pw-row:focus-visible{outline:2px solid var(--brand-hi);outline-offset:2px}
.pw-row:disabled{cursor:default}
.pw-ico{position:relative;display:block;flex:none;width:38px;height:38px;border-radius:50%;background:#1b1815}
.pw-ico img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.pw-ico-x{display:grid;place-items:center;width:100%;height:100%;color:var(--muted);font-size:16px}
.pw-dot{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;border:2.5px solid var(--panel-2);background:var(--up)}
.pw-dot.wait{background:var(--brand-hi);animation:pwPulse 1.3s ease-in-out infinite}
.pw-dot.off{background:var(--panel-2);box-shadow:inset 0 0 0 2px var(--muted)}
/* waiting for the wallet extension to switch: a turning gold ring round the logo */
.pw-ico.wait::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid color-mix(in srgb,var(--brand) 22%,transparent);border-top-color:var(--brand-hi);border-right-color:var(--brand);animation:pwSpin 1s linear infinite}
.pw-name{display:flex;flex-direction:column;gap:4px;min-width:0}
.pw-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 15.5px/1.15 var(--sans);color:var(--ink)}
.pw-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 12.5px/1.2 var(--mono);color:var(--muted)}
.pw-bal{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.pw-bal b{font:700 14px/1.15 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.pw-bal b.short{color:var(--down)}
.pw-change{display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 10px 0 12px;background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel);font:750 13px/1 var(--sans)}
.pw-row:hover:not(:disabled) .pw-change{background:var(--brand-sheen-sm-hover)}
.pw-svg{display:inline-flex;flex:none}.pw-svg svg{display:block;width:100%;height:100%}
.pw-change .pw-svg{width:12px;height:12px}
.pw-note{margin-top:8px;font:500 12.5px/1.4 var(--sans);color:var(--muted);text-align:left}
.pw-note b{font:600 12.5px/1.4 var(--mono);color:var(--ink-2);white-space:nowrap}
.pw-note.short,.pw-note.short b{color:var(--down)}
.pw-note.ok,.pw-note.ok b{color:var(--up)}
.pw-note.ok{animation:pwFlash .35s ease-out}
.pw-tip{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:9px;margin-top:8px;padding:8px 8px 8px 10px;border:1px dashed var(--line-2);background:color-mix(in srgb,var(--brand) 5%,transparent);text-align:left}
.pw-tip .pw-ico{width:24px;height:24px}
.pw-tip>span{font:500 12.5px/1.35 var(--sans);color:var(--ink-2)}
.pw-tip>span b{font:600 12.5px/1.35 var(--mono);color:var(--ink);white-space:nowrap}
/* waiting: the panel hangs off the bar */
.pw-wait{padding:12px 12px 10px;border:1px solid transparent;border-top:0;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--brand-outline) border-box;text-align:left}
.pw-wait-head{display:flex;align-items:center;gap:9px;font:750 14.5px/1.3 var(--sans);color:var(--ink)}
.pw-wait-head b{font:700 14px/1.3 var(--mono)}
.pw-wait p{margin:6px 0 10px;font:500 12.5px/1.45 var(--sans);color:var(--ink-2)}
.pw-wait p b{font:600 12.5px/1.45 var(--mono);color:var(--ink);white-space:nowrap}
.pw-wait-acts{display:flex;flex-wrap:wrap;gap:8px}
.pw-wait-acts .pw-btn{flex:1 1 auto}
.pw-spin{flex:none;display:inline-block;width:15px;height:15px;border-radius:50%;border:2px solid color-mix(in srgb,var(--brand) 28%,transparent);border-top-color:var(--brand-hi);animation:pwSpin .8s linear infinite}
.pw-spin.sm{width:13px;height:13px;vertical-align:-2px;margin-right:7px}
/* small buttons: the metal outline; .fill: the metal itself */
.pw-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;margin:0;padding:0 12px;border:1px solid transparent;border-radius:0;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--brand-outline) border-box;color:var(--brand-text-solid);font:700 13px/1 var(--sans);white-space:nowrap;cursor:pointer}
.pw-btn:hover:not(:disabled){background:linear-gradient(var(--panel-2),var(--panel-2)) padding-box,var(--brand-outline) border-box;color:var(--brand-hi)}
.pw-btn.fill{border:0;background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel)}
.pw-btn.fill:hover:not(:disabled){background:var(--brand-sheen-sm-hover);color:var(--brand-ink)}
.pw-btn.sm{height:32px;padding:0 10px;font-size:12.5px}
.pw-btn:disabled{opacity:.5;cursor:not-allowed}
.pw-btn.pw-link{display:inline;height:auto;padding:0;border:0;background:none;color:var(--brand-text-solid);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pw-txt{display:block;margin:8px auto 0;padding:6px 4px;border:0;background:none;font:600 12.5px/1.2 var(--sans);color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pw-txt:hover{color:var(--ink)}
.pw-btn:focus-visible,.pw-txt:focus-visible,.pw-card:focus-visible,.pw-x:focus-visible{outline:2px solid var(--brand-hi);outline-offset:2px}
/* the picker */
.pw-ov{position:fixed;inset:0;z-index:112;display:grid;place-items:center;padding:16px 12px}
.pw-shade{position:absolute;inset:0;background:#0009;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.pw-sheet{position:relative;width:min(468px,100%);max-height:100%;overflow:auto;overscroll-behavior:contain;padding:22px;border:1px solid var(--line-2);border-radius:8px;background:var(--panel);box-shadow:0 24px 80px #0009;color:var(--ink);font:400 15px/1.5 var(--sans);text-align:left;animation:pwIn .18s ease-out}
.pw-grab{display:none}
.pw-sheet-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.pw-sheet-head h3{margin:0;font:750 21px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink)}
.pw-sheet-head p{margin:4px 0 0;font:500 13px/1.45 var(--sans);color:var(--muted)}
.pw-sheet-head p b{color:var(--ink-2);font-weight:600}
.pw-x{flex:none;display:grid;place-items:center;width:40px;height:40px;margin:0 0 0 auto;padding:0;border:1px solid var(--line-2);border-radius:8px;background:var(--panel-2);color:var(--ink);cursor:pointer}
.pw-x:hover{background:color-mix(in srgb,var(--ink) 8%,var(--panel))}
.pw-x .pw-svg{width:16px;height:16px}
.pw-list{display:flex;flex-direction:column;gap:8px}
.pw-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"ico main bal" "act act act";align-items:center;column-gap:12px;width:100%;margin:0;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background-color .12s,border-color .12s}
.pw-card:hover:not(:disabled){border-color:var(--line-2);background-color:color-mix(in srgb,var(--ink) 4%,var(--panel-2))}
.pw-card.sel,.pw-card.sel:hover{border:1.5px solid transparent;padding:11.5px;background:linear-gradient(color-mix(in srgb,var(--brand) 9%,var(--panel-2)),color-mix(in srgb,var(--brand) 9%,var(--panel-2))) padding-box,var(--brand-outline) border-box}
.pw-card>.pw-ico{grid-area:ico;width:40px;height:40px}
.pw-card-main{grid-area:main;display:flex;flex-direction:column;gap:3px;min-width:0}
.pw-card-name{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font:700 15.5px/1.25 var(--sans);color:var(--ink)}
.pw-card-addr{font:500 12.5px/1.25 var(--mono);color:var(--muted)}
.pw-card-state{display:block;font:500 12px/1.4 var(--sans);color:var(--muted)}
.pw-card-state.ok{color:var(--up)}
.pw-card-state .pw-sep{color:var(--muted)}
.pw-card-bal{grid-area:bal;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;white-space:nowrap}
.pw-card-bal b{font:700 15px/1.2 var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.pw-card-bal b.zero{color:var(--muted);font-weight:600}
.pw-card-bal .usd{font:500 11.5px/1.2 var(--mono);color:var(--muted)}
.pw-card-bal .alt{display:inline-flex;align-items:center;gap:4px;font:500 11.5px/1.2 var(--mono);color:var(--muted)}
.pw-card-bal .alt img{width:13px;height:13px;border-radius:50%;object-fit:cover;background:#1b1815}
.pw-card-act{grid-area:act;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.pw-card-act>span{display:block;min-width:0;font:500 12.5px/1.4 var(--sans);color:var(--ink-2)}
.pw-card-act>span b{font:600 12.5px/1.4 var(--mono);color:var(--ink);white-space:nowrap}
.pw-card-act .pw-btn{flex:none}
.pw-chip{display:inline-flex;align-items:center;gap:4px;height:21px;padding:0 9px;font:750 11px/1 var(--sans);font-style:normal;letter-spacing:.01em;white-space:nowrap}
.pw-chip.sel{background:var(--brand-sheen-sm);color:var(--brand-ink);box-shadow:var(--brand-bevel)}
.pw-chip.best{border:1px solid transparent;background:linear-gradient(var(--panel-2),var(--panel-2)) padding-box,var(--brand-outline) border-box;color:var(--brand-text-solid)}
.pw-chip .pw-svg{width:10px;height:10px}
.pw-card:not(.sel) .pw-dot.wait{animation:none}
/* the last row: Link another wallet (the wallets' own link flow) */
.pw-card.pw-add{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"ico main";border:1px dashed var(--line-2);background:transparent}
.pw-ico-add{display:grid;place-items:center;border:1px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--brand-outline) border-box;color:var(--brand-text-solid)}
.pw-ico-add .pw-svg{width:16px;height:16px}
.pw-add .pw-add-sub{font:500 12px/1.4 var(--sans)}
.pw-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font:500 12px/1.45 var(--sans);color:var(--muted)}
.pw-foot .pw-btn{flex:none}
@keyframes pwSpin{to{transform:rotate(360deg)}}
@keyframes pwPulse{50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-hi) 25%,transparent)}}
@keyframes pwIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pwUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes pwFlash{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:none}}
/* a narrow rail (the 300px column from 760 to 1099px, and the zoomed desktop up to 1290px, ~340-400 page px): the
   balance goes under the address (the list shows the dollars) */
@media (min-width:760px) and (max-width:1289.98px){
 .pw-row{grid-template-columns:38px minmax(0,1fr) auto;grid-template-areas:"ico name chg" "ico bal chg";row-gap:5px}
 .pw-row>.pw-ico{grid-area:ico}.pw-row>.pw-name{grid-area:name}.pw-row>.pw-change{grid-area:chg}
 .pw-row>.pw-bal{grid-area:bal;flex-flow:row wrap;align-items:baseline;justify-content:flex-start;gap:0 8px;height:17px;overflow:hidden}
}
/* a phone: a little less air in the bar, so the address and the balance keep their full width beside Change */
@media (max-width:480px){ .pw-row{column-gap:8px;padding-left:10px}.pw-change{padding:0 9px 0 10px} }
/* the desktop page scale (html zoom .66825 from 1100px): the window zooms back by 1.33333, as the trader profile and the
   Position window do, so it reads large on a laptop */
@media (min-width:1100px){.pw-sheet{zoom:1.33333}}
/* a phone: the picker is a sheet from the bottom, and the page behind it holds still */
@media (max-width:640px){
 .pw-ov{place-items:end stretch;padding:0}
 .pw-sheet{width:auto;max-height:90%;padding:8px 14px calc(18px + env(safe-area-inset-bottom));border-bottom:0;border-radius:18px 18px 0 0;animation:pwUp .22s ease-out}
 .pw-grab{display:block;width:42px;height:5px;margin:0 auto 12px;border-radius:3px;background:var(--line-2)}
 body.pw-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.pw-spin,.pw-dot.wait,.pw-ico.wait::before,.pw-sheet,.pw-note.ok{animation:none}}
/* ---- the quote in ONE line (owner's pick A, 7 Oct: "trimmed in place"; his text rule: labels of 1-4 words, the detail in
   the ⓘ and ⚙ popovers). "You receive", the price impact, "Min received … · 1% slippage" and the Slippage row fold into
   [logo] ≈ 5.13M FABLE · ⚙ 1% · ⓘ, the amount in the green the "You receive" line wore. Nothing smaller than the old
   lines (a laptop sees the page at zoom .66825); the whole line is a tap target for ⓘ, ⚙ and ⓘ are thumb-tall */
.trade-q{position:relative;display:flex;align-items:center;gap:2px;margin:12px 0 0;padding:2px 2px 2px 12px;border:1px dashed var(--line-2);text-align:left}
.trade-q .trade-recv{flex:1 1 auto;display:flex;align-items:center;gap:8px;min-width:0;min-height:40px;overflow:hidden;white-space:nowrap;cursor:pointer}
.trade-recv .trade-bal-logo{width:18px;height:18px}
.trade-recv-v{flex:none;font:700 15px/1.2 var(--mono);color:var(--up);font-variant-numeric:tabular-nums}
.trade-recv-v.down{color:var(--down)}
.trade-recv-v.none{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;font:600 13px/1.2 var(--sans);color:var(--muted)}
.trade-recv-v.warn{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;font:600 13px/1.2 var(--sans);color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.trade-recv-sym{min-width:0;overflow:hidden;text-overflow:ellipsis;font:600 13px/1.2 var(--mono);color:var(--ink-2)}
.trade-recv .trade-impact{flex:none;font:700 13px/1.2 var(--mono);color:var(--down)}
.tq-btn{flex:none;display:inline-flex;align-items:center;gap:5px;height:40px;margin:0;padding:0 9px;border:0;border-radius:0;background:none;color:var(--muted);font:600 13px/1 var(--mono);cursor:pointer;transition:color .12s}
.tq-btn svg{display:block;flex:none;width:16px;height:16px}
.tq-btn:hover,.tq-btn[aria-expanded="true"]{color:var(--ink)}
.tq-btn.hi,.tq-btn.hi:hover{color:var(--down)}
.tq-btn:focus-visible{outline:2px solid var(--brand-hi);outline-offset:-2px}
/* the popovers hang under the line at its right edge, over the press, until the same button, Escape or a tap elsewhere */
.tq-pop{position:absolute;top:calc(100% + 6px);right:-1px;z-index:6;width:min(272px,calc(100% + 2px));margin:0;padding:10px 14px;border:1px solid var(--line-2);background:var(--panel);box-shadow:0 18px 44px -12px #0009;text-align:left;animation:pwIn .14s ease-out}
.tq-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:5px 0;font:500 13px/1.35 var(--sans);color:var(--muted)}
.tq-row+.tq-row{border-top:1px solid var(--line)}
.tq-row b{font:700 13.5px/1.35 var(--mono);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.tq-row b.hi{color:var(--down)}
.tq-pop.slip-row{justify-content:space-between;gap:6px 12px;margin:0;padding:12px 14px}
.tq-pop .slip-label{font:650 13px/1 var(--sans);color:var(--ink-2)}
.tq-pop .slip-box{height:36px;padding:0 10px}
.tq-pop .slip-box input{width:4em;font-size:14px}
.tq-pop .slip-box span{font-size:13px}
.tq-pop .slip-note{margin:2px 0 0;font:600 12.5px/1.4 var(--sans);color:var(--muted);text-align:left}
.tq-pop .slip-note.warn{color:var(--down)}
.trade-recv-lower{display:block;margin:10px auto 0;padding:4px 0;border:0;color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font:650 13px/1.4 var(--sans);text-decoration:underline;cursor:pointer}
.trade-console:has(#externalTradeLink:not([hidden])) .tq-btn{display:none}
@media (prefers-reduced-motion:reduce){.tq-pop{animation:none}}
.trade-console .trade-action.busy{position:relative;overflow:hidden;pointer-events:none;display:flex;align-items:center;justify-content:center;gap:10px}
.trade-console .trade-action.busy::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,240,214,.18) 50%,transparent 70%);transform:translateX(-100%);animation:tradeSweep 1.3s ease-in-out infinite}
.trade-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid color-mix(in srgb,var(--brand-ink) 30%,transparent);border-top-color:var(--brand-ink);animation:tradeSpin .7s linear infinite;flex:none}
@keyframes tradeSpin{to{transform:rotate(360deg)}}
@keyframes tradeSweep{to{transform:translateX(100%)}}
.trade-done{display:flex;align-items:center;gap:14px;min-height:58px;padding:12px 16px;border:1px solid color-mix(in srgb,var(--up) 55%,transparent);border-radius:12px;background:color-mix(in srgb,var(--up) 9%,var(--panel));box-shadow:0 0 22px -6px color-mix(in srgb,var(--up) 45%,transparent);animation:tradeDoneIn .35s cubic-bezier(.2,1.4,.4,1) both}
.trade-done[hidden]{display:none}
.trade-check{position:relative;width:40px;height:40px;flex:none}
.trade-check svg{width:40px;height:40px;overflow:visible}
.trade-check circle{fill:#07120b;stroke:var(--up);stroke-width:2.4;stroke-dasharray:95;stroke-dashoffset:95;animation:tradeRing .45s ease-out .05s forwards}
.trade-check path{fill:none;stroke:var(--up);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:tradeTick .32s ease-out .45s forwards}
.trade-check::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--up);opacity:0;animation:tradePop .6s ease-out .7s}
.trade-check::before{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 color-mix(in srgb,var(--up) 55%,transparent);animation:tradeGlow 1.2s ease-out .7s}
@keyframes tradeRing{to{stroke-dashoffset:0}}
@keyframes tradeTick{to{stroke-dashoffset:0}}
@keyframes tradePop{0%{opacity:.8;transform:scale(.8)}100%{opacity:0;transform:scale(1.6)}}
@keyframes tradeGlow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--up) 55%,transparent)}100%{box-shadow:0 0 0 16px transparent}}
@keyframes tradeDoneIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.trade-check:has(circle) path{stroke:var(--up)}
.trade-done .trade-check svg path{animation-fill-mode:forwards}
.trade-done-words{min-width:0}
.trade-done-head{font:600 15px/1.3 var(--sans);color:var(--ink)}
.trade-done-head b{color:var(--up);font-weight:800}
.trade-done-sub{margin-top:3px;font:500 12px/1.4 var(--sans);color:var(--muted)}
.trade-done-sub a{color:var(--brand);background:var(--brand-sheen-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none}
/* black and green only (owner, 29 Sep: no yellow): a near-black disc, a green ring that draws itself, a green tick */
@media (prefers-reduced-motion:reduce){.trade-spin,.trade-console .trade-action.busy::after,.trade-done,.trade-check circle,.trade-check path,.trade-check::after,.trade-check::before{animation:none}.trade-check circle{stroke-dashoffset:0}.trade-check path{stroke-dashoffset:0}}
.trade-console .trade-action[hidden]{display:none!important}
/* the coin's picture: click to view it large (owner, 29 Sep) */
.coin-ico.zoomable{cursor:zoom-in;transition:transform .15s}.coin-ico.zoomable:hover{transform:scale(1.04)}.coin-ico.zoomable:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.coin-lightbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:rgba(5,4,3,.82);backdrop-filter:blur(4px);cursor:zoom-out;animation:coinLbIn .18s ease-out}
.coin-lightbox-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px}
.coin-lightbox-fig img{width:min(62vmin,560px);height:min(62vmin,560px);object-fit:cover;border-radius:22px;background:var(--panel);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px var(--line-2)}
.coin-lightbox-fig figcaption{font:600 16px/1.2 var(--sans);color:var(--ink-2)}
.coin-lightbox-x{position:absolute;top:22px;right:26px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--panel);color:var(--ink);font-size:24px;line-height:1;cursor:pointer}
@keyframes coinLbIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.coin-lightbox{animation:none}.coin-ico.zoomable{transition:none}}

/* "Not enough ETH" (owner, 30 Sep): a red line that pops in above the trade button when a press can't be covered */
.trade-error{margin:0 0 8px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--down) 55%,transparent);border-radius:8px;background:color-mix(in srgb,var(--down) 13%,var(--panel));color:var(--down);font:650 13px/1.35 var(--sans);text-align:center}
.trade-error.pop{animation:tradeErr .34s cubic-bezier(.3,1.4,.5,1)}
@keyframes tradeErr{0%{opacity:0;transform:translateY(4px) scale(.97)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.trade-error.pop{animation:none}}

/* "Firepower" (owner, 30 Sep: "more heroic ... a nice tint"): a big stretched heading in ember gold with a soft glow, over
   the vault's amount; the tag beside it drops to its own line when the rail is narrow */
.firepot-head{flex-wrap:wrap;row-gap:8px}
/* Stack Vote where a single row would squeeze its status or full countdown. */
@container(max-width:620px){
 .token-primary-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 3px;padding:10px 12px}
 .token-primary-tabs button{height:44px;font-size:16px}
 .token-primary-tabs .vote-tab{grid-column:1/-1;margin-left:0;height:60px;padding:9px 13px}
 .token-primary-tabs .vt-time{font-size:14px}
 .token-primary-tabs .vt-status,.token-primary-tabs .vt-until{font-size:12px}
}
.firepot-head .card-title.card-title{font:900 23px/1 var(--sans);font-stretch:116%;letter-spacing:.05em;text-transform:uppercase;color:#ffb347;background:linear-gradient(100deg,#fff0cc 0%,#f8c878 26%,#ff9f43 62%,#ff5a1f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 9px rgba(255,122,26,.3))}