/* app.hyperliquidterminal.site — near-black ground, one mint accent for action and price,
   Inter for words, Plex Mono for figures. Nothing decorative: no glow, no
   glass, no card around anything that is not operated. */
:root{
  --bg:#0A0D0C;
  --bg-2:#0E1211;
  --panel:#121817;
  --panel-2:#161D1B;
  --sunk:#080B0A;
  --mint:#97FCE4;
  --mint-2:#5EE6C6;
  --mint-dim:#2A6E5E;
  --mint-soft:rgba(151,252,228,.10);
  --mint-line:rgba(151,252,228,.28);
  --amber:#F5C46B;
  --up:#3DE6A8;
  --down:#F06E86;
  --ink:#E7F0ED;
  --ink-2:#9FB2AD;
  --ink-3:#788B85;
  --rule:#1C2624;
  --rule-2:#25322F;
  --r:14px;
  --r-sm:10px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}
*{box-sizing:border-box}
/* The hidden attribute must beat display rules on classes like .btn, or a
   hidden button still renders. */
[hidden]{display:none!important}
/* min-height:100% on body resolves against an html element of automatic
   height, so it resolved to nothing and the footer floated up the middle of
   any page shorter than the viewport. Viewport units are the height meant. */
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  min-height:100dvh;
  background:var(--bg);
  color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;
}
a{color:var(--mint);text-decoration:none}
a:hover{color:#B9FFEF}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--mint-line);outline-offset:2px}
.dim{color:var(--ink-2)}
.faint{color:var(--ink-3)}
.up{color:var(--up)}
.down{color:var(--down)}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.small{font-size:12px}
.mint{color:var(--mint)}
/* A run of zeros in a micro price is written as a count: 0.0{8}12. The count
   sits below the line, small, so the digits that matter stay the ones read. */
sub.z{font-size:.7em;vertical-align:-.22em;line-height:0;letter-spacing:0}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--rule)}
.hdr-in{max-width:1320px;margin:0 auto;padding:0 20px;height:56px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:600;flex:0 0 auto}
.brand:hover{color:var(--ink)}
.brand-mark{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:var(--mint-2);overflow:hidden}
/* The tile IS the bezel of the terminal mark, so the SVG inside draws only
   the screen, its prompt and the stand, and carries its own fills -- a
   blanket fill here would paint the phosphor dark along with the screen. */
.brand-mark svg{display:block}
.brand-dim{color:var(--ink-3);font-weight:500}
/* Pill chrome: nav, search and the wallet button are all capsules, which is
   what makes the bar read as one control strip rather than five widgets. */
.hnav{display:flex;gap:2px;margin-left:14px;background:var(--panel-2);border-radius:999px;padding:3px}
.nav-item{padding:7px 14px;border-radius:999px;color:var(--ink-3);font-weight:500;font-size:13px;line-height:1}
.nav-item:hover{color:var(--ink)}
.nav-item.active{color:var(--ink);background:var(--panel)}
.wallet-btn{margin-left:auto;font-size:13.5px}
.pill-btn{border-radius:999px;padding:9px 18px}
.menu-btn{display:none;background:var(--panel-2);border:0;border-radius:999px;color:var(--ink);padding:8px 12px;cursor:pointer;font-size:15px}

.subhdr{max-width:1320px;margin:0 auto;padding:0 20px 12px;display:flex;gap:10px;align-items:center}
.hsearch{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid transparent;border-radius:999px;padding:0 18px;height:42px}
.hsearch:focus-within{border-color:var(--mint-line)}
.hsearch-ic{color:var(--ink-3);font-size:15px}
.hsearch input{flex:1;background:none;border:0;color:var(--ink);font-family:var(--sans);font-size:14px;padding:0;height:100%;min-width:0}
.hsearch input::placeholder{color:var(--ink-3)}
.hsearch input:focus{outline:none}
.hsearch input::-webkit-search-cancel-button{-webkit-appearance:none}
.create-btn{flex:0 0 auto;border-radius:999px;height:42px;padding:0 20px;background:var(--panel-2);border-color:transparent;gap:6px}
.create-btn:hover{color:var(--mint);border-color:var(--mint-line)}

/* ---------- layout ---------- */
.page{flex:1;width:100%;max-width:1320px;margin:0 auto;padding:14px 20px 56px}
.loading{padding:60px 0;text-align:center;color:var(--ink-2);display:flex;gap:10px;justify-content:center;align-items:center}
.spinner{width:14px;height:14px;border-radius:50%;border:2px solid var(--rule-2);border-top-color:var(--mint);animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--rule);background:var(--bg-2);margin-top:auto}
.foot-in{max-width:1320px;margin:0 auto;padding:34px 20px 10px;display:grid;grid-template-columns:2fr 1fr 1fr 2fr;gap:28px}
.foot-brand p{margin:10px 0 0;font-size:12.5px;color:var(--ink-3);line-height:1.55;max-width:44ch}
.foot-col h3{margin:0 0 10px;font-size:12px;font-weight:600;color:var(--ink-2)}
.foot-col a{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:7px}
.foot-col a:hover{color:var(--mint)}
.foot-col p{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.55}
.foot-bottom{max-width:1320px;margin:0 auto;padding:16px 20px 22px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;font-size:12px;color:var(--ink-3)}
.foot-links{margin-left:auto;display:flex;gap:16px}
.foot-links a{color:var(--ink-3)}
.foot-links a:hover{color:var(--mint)}

/* ---------- panels & typography ---------- */
/* A box means "this is operated": the chart and the trade form. Everything
   that is only read sits on the page with a hairline above it. */
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:18px;padding:18px 20px;margin:0 0 14px}
.panel>h2{margin:0 0 10px;font-size:16px;font-weight:600}
.panel h3{margin:18px 0 6px;font-size:14px;font-weight:600;color:var(--amber)}
.panel p{margin:8px 0;color:var(--ink-2)}
.panel p.lead{color:var(--ink)}
.panel.prose{background:none;border:0;border-top:1px solid var(--rule);border-radius:0;padding:16px 0 4px;margin:0}
.panel.prose:first-child,.title-row+.panel.prose,.prose>.panel.prose:first-child{border-top:0;padding-top:0}
.panel.prose p{max-width:68ch}
.prose{max-width:72ch}
.prose td:first-child{color:var(--ink-2);white-space:nowrap}
.eyebrow,.stat .k,.tip-name{font:500 12px/1.2 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink-3)}
.title-row{margin-bottom:14px}
h1.title,.thead h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.link{color:var(--mint);font-weight:500}

/* ---------- board sections ---------- */
.section{margin:0 0 34px}
/* The graduated shelf is tinted and ruled, so what already made it reads as a
   different shelf from what is still climbing -- one glance, no reading. */
.section.grad{background:linear-gradient(180deg,rgba(151,252,228,.05),rgba(151,252,228,0) 60%),var(--bg-2);border:1px solid var(--rule-2);border-radius:20px;padding:20px 20px 22px}
.section-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.section-head h2{margin:0;font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.count-chip{font-size:12.5px;font-weight:600;color:var(--mint);background:var(--mint-soft);border-radius:999px;padding:4px 12px;font-variant-numeric:tabular-nums}
.section-sub{margin:7px 0 0;font-size:13px;color:var(--ink-3)}
.section-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0 0}
.section-tools .grp{display:flex;gap:2px;background:var(--panel-2);border-radius:999px;padding:3px}
.section-head .grp{margin-left:auto;display:flex;gap:2px;background:var(--panel-2);border-radius:999px;padding:3px}
.pill{border:0;background:transparent;color:var(--ink-3);font-size:12.5px;font-weight:500;padding:6px 13px;border-radius:999px;cursor:pointer;line-height:1.2}
.pill:hover{color:var(--ink)}
.pill.active{background:var(--panel);color:var(--ink)}
.pill.quiet{background:none;color:var(--ink-3)}

/* ---------- token cards ---------- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:18px}
.tcard{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:10px;color:var(--ink);transition:border-color .12s,background-color .12s}
.tcard:hover{border-color:var(--mint-line);background:var(--panel-2);color:var(--ink)}
.tmedia{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--sunk);display:flex;align-items:center;justify-content:center}
.tmedia img{width:100%;height:100%;object-fit:cover;display:block}
.tmedia .ph{font-family:var(--mono);font-size:26px;font-weight:600;color:var(--rule-2);letter-spacing:-1px}
.tbadge{position:absolute;left:9px;top:9px;display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:4px 9px;border-radius:999px;background:rgba(8,11,10,.78);color:var(--ink-2);line-height:1.35}
.tbadge.live{color:var(--mint)}
.tbadge.filled{color:var(--amber)}
.tbadge.soon{color:var(--amber)}

/* Countdown, on the card and on the token page. The figure is monospaced so
   the last second does not shift the two before it as the digits change. */
.tbar .cd{font-family:var(--mono);font-weight:600;color:var(--amber)}
.cd-panel{text-align:center;padding:14px 12px 12px}
.cd-big{font-size:30px;font-weight:600;letter-spacing:-.5px;color:var(--amber);line-height:1.15;font-variant-numeric:tabular-nums}
.cd-when{font-size:12px;color:var(--ink-3);margin-top:5px}
.cd-note{font-size:12px;line-height:1.5;color:var(--ink-3);margin:10px 2px 12px}
.tbody{padding:11px 2px 2px;min-width:0}
.tname{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}
.tsym{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
/* The market cap is the figure a launchpad is scanned for, so it is the one
   thing on the card set larger than the name. */
.tmc{font-family:var(--mono);font-size:15.5px;font-weight:600;margin-top:8px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.3px}
.tmc .k{font-family:var(--sans);font-size:11px;font-weight:500;color:var(--ink-3);margin-left:5px;letter-spacing:.3px}
.tmc .usd{font-size:12px;font-weight:400;letter-spacing:0}
.tfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.tfoot .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcard .bar{margin:9px 0 1px}
.grid-empty{border:1px dashed var(--rule-2);border-radius:18px;padding:38px 20px;text-align:center;color:var(--ink-3);margin-top:20px}

/* ---------- king of the hill ---------- */
/* The pinned token. Mint rather than the king card's amber, because this is
   the platform's own launch and mint is what the site uses for its own voice;
   amber stays the colour of "closest to bonding", which is a different claim.
   .pre is the pre-launch state, where the clock is the headline. */
.pin{display:flex;gap:18px;align-items:center;background:var(--panel);border:1px solid var(--mint-line);border-radius:18px;padding:16px 18px;margin-bottom:18px;color:var(--ink)}
.pin:hover{border-color:var(--mint);color:var(--ink)}
.pin.pre{background:linear-gradient(180deg,var(--mint-soft),transparent),var(--panel)}
.pin .avatar{width:72px;height:72px;border-radius:14px}
.pin-body{flex:1;min-width:0}
.pin .eyebrow{color:var(--mint)}
.pin-cd{font-size:30px;font-weight:600;letter-spacing:-.5px;color:var(--mint);line-height:1.15;font-variant-numeric:tabular-nums;margin:2px 0 2px}
.pin-name{font-size:18px;font-weight:600;margin:2px 0 4px;display:flex;gap:8px;align-items:baseline}
.pin-when{font-size:12px;color:var(--ink-3);margin-top:6px}
.pin .bar{margin-top:10px}
/* No bar in the graduated state, so its label carries the gap instead. */
.pin.done .bar-label{margin-top:10px}
@media (max-width:620px){.pin{flex-wrap:wrap}.pin-cd{font-size:26px}}

.king{display:flex;gap:18px;align-items:center;background:var(--panel);border:1px solid rgba(245,196,107,.35);border-radius:18px;padding:16px 18px;margin-bottom:18px;color:var(--ink)}
.king:hover{border-color:var(--amber);color:var(--ink)}
.king .avatar{width:72px;height:72px;border-radius:14px}
.king-body{flex:1;min-width:0}
.king .eyebrow{color:var(--amber)}
.king-name{font-size:18px;font-weight:600;margin:2px 0 4px;display:flex;gap:8px;align-items:baseline}
.king .bar{margin-top:10px}

/* ---------- toolbar ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0 0 10px}
.toolbar .grp{display:flex;gap:0;align-items:center}
.pill{border:0;background:transparent;color:var(--ink-3);font-size:12px;font-weight:500;padding:6px 9px;border-radius:var(--r-sm);cursor:pointer}
.pill:hover{color:var(--ink)}
.pill.active{background:var(--panel-2);color:var(--ink)}
.toolbar .count{margin-left:auto;font-size:12px;color:var(--ink-3)}

.card-name{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-sym{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-2);flex:0 0 auto}
.card-meta{font-size:12px;color:var(--ink-3);margin-top:3px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mcap{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.mcap .k{font-family:var(--sans);font-weight:500;color:var(--ink-3);font-size:12px;margin-right:6px}
.mcap .usd{font-size:12px;font-weight:500;color:var(--ink-3)}
.avatar{flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--sunk);border:1px solid var(--rule-2);border-radius:var(--r-sm);color:var(--ink-2);font-family:var(--mono);font-size:12px;font-weight:600}
.avatar.sm{width:28px;height:28px;font-size:9px;letter-spacing:-.3px}
.avatar.md{width:56px;height:56px}
.avatar.lg{width:96px;height:96px;font-size:18px;border-radius:16px}
/* The feed's token chip. */
.avatar.xs{width:20px;height:20px;font-size:8px;border-radius:5px;letter-spacing:-.4px}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* Status is a word. Amber only while the curve is between filling and its
   pool opening, because that is the one state that is about to change. */
.tag{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.tag.filled{color:var(--amber)}

/* ---------- progress ---------- */
.bar{height:4px;background:var(--rule-2);border-radius:2px;margin:8px 0 4px;overflow:hidden}
.bar-fill{height:100%;background:var(--mint);border-radius:2px;transition:width .3s ease}
.bar-fill.any{min-width:5px}
.bar-fill.done{background:var(--up)}
.bar-label{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- token page ---------- */
.tpage{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.taside{position:sticky;top:74px}
.thead{display:flex;gap:18px;align-items:flex-start}
.thead-body{flex:1;min-width:0}
.thead .card-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.thead .card-sym{font-size:13px}
.thead .tag{font-size:13px}
.addr-row{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:12px;color:var(--ink-3)}
.addr-row a{font-family:var(--mono);color:var(--ink-2)}
.addr-row a:hover{color:var(--mint)}
.desc{margin:10px 0 0;color:var(--ink-2);white-space:pre-wrap;line-height:1.55;max-width:68ch}
.links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip{font-size:12px;font-weight:500;padding:5px 12px;border-radius:999px;border:1px solid var(--rule-2);color:var(--ink);background:var(--sunk)}
.chip:hover{border-color:var(--mint-line);color:var(--mint)}
.kv{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:12px;font-size:13px;color:var(--ink-2)}
.kv .k{color:var(--ink-3);margin-right:6px}
.kv .v{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.bond-panel .big{font-family:var(--mono);font-size:28px;font-weight:500;line-height:1.2;color:var(--ink);margin:2px 0}
.bond-panel p{max-width:68ch}
.tx-note{font-family:var(--mono);font-size:12px;margin:10px 0 0}
.tx-note.note-ok{color:var(--up)}
.tx-note.note-err{color:var(--down)}

/* ---------- trade panel ---------- */
.trade{background:var(--panel);border:1px solid var(--rule);border-radius:18px;padding:16px;margin:0}
.trade .facts{margin-top:14px}
.tabs{display:flex;gap:4px;background:var(--sunk);border:1px solid var(--rule);border-radius:999px;padding:4px;margin-bottom:14px}
.tab{flex:1;background:transparent;border:0;border-radius:999px;color:var(--ink-2);font-size:13px;font-weight:600;padding:9px;cursor:pointer}
.tab.active{background:var(--panel-2);color:var(--mint)}
.tab.sell.active{color:var(--down)}
.amt-wrap,.suffix{position:relative}
.amt-wrap input{font-family:var(--mono);font-size:22px;font-weight:500;padding:14px 84px 14px 14px;height:auto}
.suffix input{padding-right:64px}
.amt-unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.suffix .amt-unit{right:12px}
.bal{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);margin:6px 2px 0}
.bal .num{font-family:var(--mono)}
.quick{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.quick .pill{background:var(--sunk);border:1px solid var(--rule);flex:1;text-align:center;font-family:var(--mono);font-size:12px;padding:6px 8px;color:var(--ink-2)}
.quick .pill:hover{border-color:var(--mint-line);color:var(--mint)}
.quote{background:var(--sunk);border:1px solid var(--rule);border-radius:var(--r-sm);padding:10px 12px;margin-top:12px;font-size:12px;font-family:var(--mono);font-variant-numeric:tabular-nums}
.quote:empty{display:none}
.quote .qline{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.quote .qline+.qline{margin-top:5px}
/* One wallet holding most of the supply is worth reading as a warning. */
.quote .qline.warn>span:last-child{color:var(--down)}
.quote .dim{font-family:var(--sans)}
.quote a{color:var(--ink);border-bottom:1px solid var(--rule-2)}
.quote a:hover{color:var(--mint);border-color:var(--mint-line)}
.slip{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:12px;font-size:12px;color:var(--ink-3)}
.slip .pill{padding:4px 9px;font-family:var(--mono);font-size:11px;border:1px solid var(--rule);background:var(--sunk)}
.slip .pill.active{border-color:var(--mint-line);color:var(--mint)}
.slip .slip-wrap{display:inline-flex;align-items:center;gap:3px}
/* The global input rule is width:100% and a form's padding; this one sits in a
   row of pills and has to look like one of them. */
.slip input.slip-in{width:54px;padding:4px 7px;font-family:var(--mono);font-size:11px;text-align:right;border-color:var(--rule)}
.slip .slip-note{font-size:11px;color:var(--ink-3)}
.trade .btn.block{margin-top:14px}
.btn.block{width:100%;padding:13px 16px;font-size:15px}
.btn.sell{background:var(--down);border-color:var(--down);color:#1b0a0e}
.btn.sell:hover:not(:disabled){filter:brightness(1.08)}

/* ---------- forms & buttons ---------- */
.field{margin:10px 0}
.field label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.hint,.field .hint{font-size:12px;color:var(--ink-3);margin-top:6px}
input,select,textarea{
  width:100%;background:var(--sunk);border:1px solid var(--rule-2);border-radius:var(--r);color:var(--ink);
  font-family:var(--sans);font-size:14px;padding:11px 12px;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--mint-line);box-shadow:0 0 0 3px var(--mint-soft)}
input.mono{font-family:var(--mono)}
textarea{resize:vertical;min-height:84px;line-height:1.45}
.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1 1 200px}
.row.three>.field{flex:1 1 150px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--panel-2);color:var(--ink);border:1px solid var(--rule-2);border-radius:999px;
  font-family:var(--sans);font-size:13px;font-weight:600;padding:9px 18px;cursor:pointer;white-space:nowrap;
}
.btn:hover:not(:disabled){border-color:var(--mint-line);color:var(--mint)}
.btn.primary{background:var(--mint);color:#04100D;border-color:var(--mint)}
.btn.primary:hover:not(:disabled){background:#B6FFEC;border-color:#B6FFEC;color:#04100D}
.btn.ghost{background:transparent}
.btn.small{padding:7px 12px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.btn-row.center{justify-content:center}
.note{font-size:12px;margin-top:8px}
.note-ok{color:var(--up)}
.note-err{color:var(--down)}
.split{font-family:var(--sans);font-size:13px;color:var(--ink-3)}
.split .num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--mint)}
.slider{display:flex;flex-direction:column;gap:4px}
/* The track is painted from JS so the filled part ends at the thumb. */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;padding:0;margin:12px 0;border:0;border-radius:2px;
  background:var(--rule-2);cursor:pointer;box-shadow:none}
input[type=range]:focus{outline:none;box-shadow:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--mint);border:2px solid var(--bg);box-shadow:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--mint-soft)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--mint);border:2px solid var(--bg);box-shadow:none}
input[type=range]::-moz-range-track{height:4px;background:transparent;border:0}
.stack{display:flex;flex-direction:column;gap:8px}
/* The image picker: one wide target, the thumbnail on the left. */
.dropzone{display:flex;align-items:center;gap:14px;width:100%;background:var(--sunk);border:1px solid var(--rule-2);border-radius:14px;padding:12px 14px;cursor:pointer;transition:border-color .12s,background-color .12s}
.dropzone:hover,.dropzone.over{border-color:var(--mint-line);background:var(--panel-2)}
.dropzone.busy{opacity:.6;pointer-events:none}
.dz-thumb{flex:0 0 auto;width:56px;height:56px;border-radius:12px;background:var(--panel-2);border:1px solid var(--rule-2);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--ink-3)}
.dz-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dz-thumb svg{width:22px;height:22px;display:block}
.dz-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.dz-title{font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dz-sub{font-size:12px;color:var(--ink-3);line-height:1.45}
.dz-remove{flex:0 0 auto;background:none;border:0;color:var(--ink-3);font-family:var(--sans);font-size:12px;font-weight:500;cursor:pointer;padding:7px 12px;border-radius:999px}
.dz-remove:hover{color:var(--down);background:var(--panel)}

/* ---------- launch page ---------- */
.cpage{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.caside{position:sticky;top:74px}
.section-title{margin:22px 0 8px;font-size:14px;font-weight:600;color:var(--ink)}
.section-title:first-child{margin-top:4px}
.preview-note{font-size:12px;color:var(--ink-3);margin:10px 2px 0;max-width:52ch}
.pv-card{background:var(--panel);border:1px solid var(--rule);border-radius:18px;padding:18px;margin-top:8px}
.pv-thumb{width:88px;height:88px;border-radius:14px;background:var(--sunk);border:1px solid var(--rule-2);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--ink-3);margin-bottom:16px}
.pv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pv-thumb svg{width:26px;height:26px;display:block}
.pv-name{font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.2;overflow-wrap:anywhere}
.pv-ticker{font-size:13.5px;color:var(--ink-2);margin-top:3px;overflow-wrap:anywhere}
.pv-name.pv-empty,.pv-ticker.pv-empty{color:var(--ink-3)}
/* The terms, one row each, the way a receipt reads. */
.summary{display:grid;grid-template-columns:auto 1fr;gap:0;font-size:13px;margin-top:18px}
.summary .k{color:var(--ink-3);padding:9px 0;border-top:1px solid var(--rule)}
.summary .v{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;color:var(--ink);padding:9px 0 9px 14px;border-top:1px solid var(--rule)}

/* ---------- misc ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-3);font-weight:500}
code{background:var(--sunk);border:1px solid var(--rule);border-radius:var(--r-sm);padding:1px 6px;font-family:var(--mono);font-size:12px;color:var(--mint-2)}
.mono-addr{font-family:var(--mono);font-size:12px;color:var(--ink-2);word-break:break-all}
.empty{padding:40px 20px;text-align:center;color:var(--ink-3);border:1px dashed var(--rule-2);border-radius:16px}
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:80;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--panel);border:1px solid var(--rule-2);border-radius:18px;padding:20px;min-width:300px;box-shadow:var(--shadow)}
.modal h2{margin:0 0 12px;font-size:16px}
.modal .btn{width:100%;justify-content:flex-start;margin-top:6px}

/* ---------- chart ---------- */
.chart{padding:16px 18px 12px}
.chart-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.chart-headline{min-width:0}
.chart-price{font-family:var(--mono);font-size:28px;font-weight:500;letter-spacing:-.3px;line-height:1.2;margin-top:2px;color:var(--ink);font-variant-numeric:tabular-nums}
.chart-when{font-size:12px;color:var(--ink-3);display:flex;gap:9px;align-items:baseline;margin-top:1px}
.chart-when .chg{font-weight:600;font-family:var(--mono)}
.chart-ctl{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.chart-ctl .grp{display:flex;gap:0}
.chart-wrap{position:relative;margin-top:6px}
.area{width:100%;height:auto;display:block;font-family:var(--mono);overflow:visible}
.area .grid{stroke:var(--rule);stroke-width:1;stroke-dasharray:3 5}
.area .ylab,.area .xlab{fill:var(--ink-3);font-size:11px}
.area .fill{fill:url(#areaFill)}
.area .g-top{stop-color:var(--mint);stop-opacity:.30}
.area .g-bot{stop-color:var(--mint);stop-opacity:0}
.area .line{fill:none;stroke:var(--mint);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.area .cross{stroke:var(--ink-3);stroke-width:1}
.area .dot{fill:var(--mint);stroke:var(--bg);stroke-width:2}
.area .ahead{fill:var(--bg);opacity:.55}
.chart-tip{position:absolute;background:var(--panel-2);border:1px solid var(--rule-2);border-radius:var(--r);
  padding:8px 11px;font-family:var(--mono);pointer-events:none;box-shadow:var(--shadow);white-space:nowrap}
.tip-val{font-size:15px;font-weight:600;color:var(--ink);margin:1px 0}
.tip-when{font-size:11px;color:var(--ink-3)}
.chart-empty{height:300px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--ink-3);text-align:center;padding:0 16px}
.chart-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:11px;color:var(--ink-3)}
.chart-foot .pill{font-size:11px;padding:3px 9px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  /* minmax(0,…) so wide content inside a column scrolls in place instead of
     widening the page. */
  .tpage,.cpage{grid-template-columns:minmax(0,1fr)}
  .taside,.caside{position:static}
  /* A live buy box leads on a phone; a static "trade elsewhere" note does not. */
  .taside{order:-1}
  .taside:has(.trade-static){order:0}
  .avatar.lg{width:72px;height:72px}
  .foot-in{grid-template-columns:1fr 1fr;gap:24px}
  .foot-brand,.foot-col.wide{grid-column:1/-1}
}
@media (max-width:820px){
  .hnav{display:none;position:absolute;top:56px;left:14px;right:14px;background:var(--panel-2);border-radius:14px;padding:8px;flex-direction:column;z-index:4}
  .hnav.open{display:flex}
  .nav-item{padding:9px 12px;border-radius:10px}
  .menu-btn{display:block;order:3}
  .hdr-in{position:relative;gap:8px}
  .wallet-btn{margin-left:auto;padding:9px 14px}
  .subhdr{padding-bottom:10px}
  .page{padding:12px 14px 44px}
  .tgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-top:16px}
  .section.grad{padding:18px 14px 20px;border-radius:18px}
  .section-head h2{font-size:20px}
  .tmc{font-size:15px}
  .section-head .grp{margin-left:0}
  .hero-stats,.stat-row,.kv-strip{gap:6px 20px}
  .thead{gap:14px}
  .king{flex-wrap:wrap}
  .dz-sub{display:none}
  .chart-price{font-size:24px}
  .chart-empty{height:230px}
}
@media (max-width:600px){
  .tgrid{grid-template-columns:1fr 1fr;gap:10px}
  .avatar.lg{width:56px;height:56px}
  .foot-in{grid-template-columns:1fr;gap:22px}
}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

/* ---------- late additions ---------- */
.trade .btn.block:first-child{margin-top:0}
/* The launch preview is one card at the width the aside gives it. */

/* The bonded figure reads beside its own bar, not in the line below it. */
.tbar{display:flex;align-items:center;gap:9px;margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tbar .bar{flex:1;margin:0}
.tcard .tfoot{margin-top:9px}

/* ---------- the board's figures ---------- */
/* One line of figures above the lists, in the register of the token page's
   kv line: a label, the number, a quieter reading after it. Wraps; never
   truncates a number. */
.kv-strip{display:flex;flex-wrap:wrap;gap:6px 26px;margin:2px 0 22px;font-size:13px;color:var(--ink-2)}
.kv-strip .stat{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.kv-strip .stat .v{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.kv-strip .stat .sub{font-family:var(--mono);font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* ---------- a token's tape ---------- */
.tape{padding:16px 18px 10px}
.tape-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.tape-head h2{margin:0}
.tape-rows{display:flex;flex-direction:column}
/* One grid for every row, so the columns line up down the list rather than
   each row deciding its own widths. */
.tape-row{display:grid;grid-template-columns:16px minmax(0,1fr) auto 56px;gap:12px;align-items:center;
  padding:9px 6px;border-top:1px solid var(--rule);color:var(--ink);border-radius:8px}
.tape-row:first-of-type{border-top:0}
.tape-row:hover{background:var(--panel-2);color:var(--ink)}
.tape-dir{font-size:13px;line-height:1}
.tape-row.buy .tape-dir{color:var(--up)}
.tape-row.sell .tape-dir{color:var(--down)}
.tape-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.tape-amt{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tape-who{font-size:11.5px;color:var(--ink-3)}
.tape-val{display:flex;flex-direction:column;gap:1px;text-align:right;font-size:13px;white-space:nowrap}
.tape-val .usd{font-size:11.5px}
.tape-when{text-align:right;font-size:11.5px;color:var(--ink-3)}
.tape-more{display:flex;justify-content:center;padding:12px 0 6px;border-top:1px solid var(--rule)}
.tape-empty{padding:26px 6px;text-align:center;color:var(--ink-3);display:flex;gap:10px;align-items:center;justify-content:center}
@media (max-width:600px){
  /* The trader is the first thing worth losing: it is not what the row is
     being scanned for. */
  .tape-row{grid-template-columns:14px minmax(0,1fr) auto 44px;gap:9px}
  .tape-who{display:none}
}

}

/* The wrong-chain warning beside the wallet button. Amber, not red: nothing is
   broken, the wallet is just somewhere else. */
.chain-warn{color:var(--amber);border-color:rgba(245,196,107,.45)}