/*
 * Transaction UI: the transaction sheet, the receipt, the header activity
 * pill and list, toasts, the holdings strip and the opening-window note.
 * Built only from the prototype's tokens (tokens.css) and in the shape of its
 * components (`.pick`, `.quote`, `.ql`, `.cta`, `.ghost`, `.copy`, `.stepper`);
 * no existing rule is changed. Motion is transform and opacity, 150-300 ms,
 * and stops under prefers-reduced-motion.
 */

/* ---------- trade box: opening window, sell all ---------- */
.capnote{margin-top:9px;padding:7px 10px;border-radius:10px;background:var(--accent-dim);color:var(--accent);font-size:11.5px;line-height:1.4}
.seg.quickamt.sellall{grid-template-columns:1fr}
/* A balance under Pay or Sell is a button: click to fill the max (KAS) or sell all (tokens). */
.balmax{padding:0;font-size:inherit;color:inherit;border-bottom:1px dashed transparent;transition:color .15s ease,border-color .15s ease}
.balmax:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- sheet frame ---------- */
.txovl{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.62);display:grid;place-items:center;padding:20px;
  animation:txfade .2s ease-out}
.txsheet{position:relative;background:var(--raise);border:1px solid var(--line);border-radius:28px;width:100%;max-width:440px;
  max-height:min(760px,92vh);overflow-y:auto;padding:22px 24px 24px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);outline:none;
  animation:txrise .22s cubic-bezier(.2,.8,.2,1)}
.txgrab{display:none}
.txhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.txhead h2{font-size:18px}
.txx{color:var(--muted);font-size:22px;line-height:1;width:32px;height:32px;border-radius:999px;display:grid;place-items:center}
.txx:hover{color:var(--ink);background:var(--surface-2)}
@keyframes txfade{from{opacity:0}to{opacity:1}}
@keyframes txrise{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:900px){
  .txovl{place-items:end stretch;padding:0}
  .txsheet{max-width:none;border-radius:28px 28px 0 0;border-bottom:none;max-height:92vh;
    padding-bottom:calc(22px + env(safe-area-inset-bottom));animation:txup .26s cubic-bezier(.2,.8,.2,1)}
  .txgrab{display:block;width:44px;height:5px;border-radius:3px;background:var(--surface-3);margin:-6px auto 12px}
}
@keyframes txup{from{transform:translateY(100%)}to{transform:none}}

/* ---------- progress track: numbered nodes on a connecting rail ---------- */
.txtrack{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:2px 0 18px;padding:0}
.txtrack li{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11.5px;font-weight:500;
  color:var(--muted);transition:color .25s ease}
.txtrack li:not(:first-child)::before{content:"";position:absolute;top:13px;right:calc(50% + 18px);width:calc(100% - 36px);height:2px;
  border-radius:2px;background:var(--surface-3)}
.txtrack li:not(:first-child)::after{content:"";position:absolute;top:13px;right:calc(50% + 18px);width:calc(100% - 36px);height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--brand));transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.txtrack li.done::after,.txtrack li.on::after{transform:scaleX(1)}
.txtrack li b{position:relative;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:600;background:var(--surface-2);border:1.5px solid var(--line);color:var(--muted);
  transition:background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease}
.txtrack li.done b{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-size:13px}
.txtrack li.on b{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-dim),0 0 18px var(--glow);animation:txstepglow 1.8s ease-in-out infinite}
.txtrack li.on{color:var(--ink)}
.txtrack li.done{color:var(--ink-2)}
@keyframes txstepglow{50%{box-shadow:0 0 0 6px var(--accent-dim),0 0 24px var(--glow)}}
@media (prefers-reduced-motion:reduce){.txtrack li.on b{animation:none}}

.txcaption{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin-bottom:14px;font-size:12.5px;color:var(--ink-2)}
.txcaption .txplan{margin-top:9px}

/* ---------- phase body ---------- */
.txbody{animation:txin .18s ease-out}
@keyframes txin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.txcenter{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:10px 4px 6px}
.txcenter h3{margin:4px 0 0;font-size:17px;font-weight:600;letter-spacing:-.01em}
.txcenter p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.5;max-width:40ch}
.txsmall{font-size:12px!important;color:var(--muted)!important}
.txwarn{font-size:12.5px;color:var(--warn);background:rgba(232,179,60,.13);border-radius:10px;padding:8px 10px;margin-top:8px;text-align:left}
.txfoot{margin-top:6px}
.txfoot .cta{margin-top:14px}
.txfoot .hint{text-align:center}
.txclose{display:flex;width:100%;justify-content:center;margin:10px 0 0}
.txbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.txbtns .ghost{justify-content:center;width:100%}

/* review: the two legs */
.txamts{display:flex;flex-direction:column;gap:7px}
.txamt{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:13px 15px}
.txamt .k{font-size:12px;color:var(--muted);margin-bottom:5px}
.txamt .row{display:flex;align-items:center;gap:10px}
.txamt .a{font-size:24px;font-weight:500;letter-spacing:-.02em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txamt .u{font-size:14px;font-weight:600;color:var(--ink-2)}
.txamt .s{font-size:11.5px;color:var(--muted);margin-top:5px}
.txmark{border-radius:50%;flex:none;display:inline-block;object-fit:cover}
.txmark.mini{display:inline-grid;place-items:center;font-size:9px;font-weight:700;color:var(--cream)}
.txlines .ql > span:first-child{display:flex;flex-direction:column;gap:2px}
.txlines .ql > span:last-child,.receipt .ql > span:last-child{white-space:nowrap}
.txnote{font-size:11px;color:var(--muted);font-weight:400}

/* plan */
.txplanbox{margin-top:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 13px}
.txplanhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;margin-bottom:9px}
.txplanhead b{font-weight:600}
.txplanhead span{font-size:12px;color:var(--muted)}
.txplan{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.txplan li{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-2)}
.txplan .n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:11px;font-weight:600;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);transition:background .2s,color .2s}
.txplan .t{flex:1;min-width:0}
.txplan .v{color:var(--muted);font-size:11.5px}
.txplan li.on .n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.txplan li.on .t{color:var(--ink)}
.txplan li.done .n{color:var(--accent);border-color:var(--accent)}

/* approve: the wallet waiting */
.txwallet{position:relative;width:64px;height:64px;border-radius:20px;background:var(--accent-dim);color:var(--accent);
  display:grid;place-items:center;margin-bottom:4px}
.txwallet svg{width:30px;height:30px}
.txwallet::after{content:"";position:absolute;inset:0;border-radius:20px;border:2px solid var(--accent);opacity:0;
  animation:txpulse 1.6s ease-out infinite}
@keyframes txpulse{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}

/* broadcast: an indeterminate beam */
.txbeam{width:100%;max-width:220px;height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden;margin:14px 0 6px}
.txbeam i{display:block;width:40%;height:100%;border-radius:2px;background:var(--accent);animation:txbeam 1s ease-in-out infinite}
@keyframes txbeam{from{transform:translateX(-100%)}to{transform:translateX(250%)}}

/* confirm: ten blocks */
.txconf{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;width:100%;max-width:280px;margin:12px 0 4px}
.txconf i{height:8px;border-radius:3px;background:var(--surface-3);position:relative;overflow:hidden}
.txconf i::after{content:"";position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s ease-out}
.txconf i.on::after{transform:scaleX(1)}
.txconfn{font-size:12.5px!important;color:var(--ink)!important}

/* spinner */
.txspin{display:inline-block;width:22px;height:22px;border-radius:50%;border:2.5px solid var(--surface-3);border-top-color:var(--accent);
  animation:txspin .8s linear infinite;flex:none}
.txspin.sm{width:12px;height:12px;border-width:2px}
@keyframes txspin{to{transform:rotate(360deg)}}

/* done: the check */
.txcheck{width:60px;height:60px;animation:txpop .26s cubic-bezier(.2,.9,.3,1.3)}
.txcheck svg{width:100%;height:100%;display:block}
.txcheck circle{fill:var(--accent-dim);stroke:var(--accent);stroke-width:2}
.txcheck path{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;
  transform-origin:26px 27px;animation:txtick .22s .12s ease-out both}
@keyframes txpop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes txtick{from{opacity:0;transform:scale(.5) rotate(-12deg)}to{opacity:1;transform:none}}

/* failed */
.txfail{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-size:22px;font-weight:700;
  background:var(--surface-2);color:var(--muted);animation:txpop .22s ease-out}
.txfail.warn{background:rgba(232,179,60,.13);color:var(--warn)}

/* ---------- receipt ---------- */
.receipt{margin-top:12px}
.rlegs{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.rleg{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 12px;min-width:0}
.rleg > div{min-width:0}
.rleg .a{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rleg .b{font-size:11.5px;color:var(--muted);margin-top:1px}
.receipt .quote .ql > span:first-child{display:flex;flex-direction:column;gap:2px}
.rtx{border-top:1px solid var(--line-soft);margin-top:10px;padding-top:11px;color:var(--muted)}
.rtxid{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.rtxid a.copy{text-decoration:none}
@media(max-width:420px){.rlegs{grid-template-columns:1fr}}

/* ---------- header activity ---------- */
.actwrap{position:relative;flex:none;display:flex;align-items:center;gap:16px}
.actwrap .connect{position:relative}
.connpend{display:none;position:absolute;top:-4px;right:-4px;background:var(--raise);box-shadow:0 0 0 2px var(--raise)}
.actpill{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink);transition:border-color .15s}
.actpill:hover{border-color:var(--accent)}
.actpill .lbl{font-weight:500;color:var(--ink-2)}
.actmenu{position:absolute;right:0;top:calc(100% + 10px);z-index:75;width:min(380px,calc(100vw - 24px));background:var(--raise);
  border:1px solid var(--line);border-radius:18px;padding:14px 8px 10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  animation:txdrop .18s ease-out;transform-origin:top right}
@keyframes txdrop{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.acthead{display:flex;align-items:center;gap:8px;padding:0 10px 8px;font-size:14px}
.actlist{list-style:none;margin:0;padding:0;max-height:min(420px,60vh);overflow-y:auto}
.actrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px}
.actrow:hover{background:var(--surface)}
.actmain{display:flex;align-items:center;gap:11px;flex:1;min-width:0;text-align:left}
.actmain .mini{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--cream);flex:none}
.actt{display:flex;flex-direction:column;min-width:0}
.actt .a{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actt .b{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.actr{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none;font-size:11.5px}
.actr .b{color:var(--muted)}
.actr .b a{color:var(--muted)}
.actr .b a:hover{color:var(--accent)}
.actstate{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);font-weight:500}
.actstate.confirmed{background:var(--accent-dim);color:var(--accent)}
.actstate.failed{background:rgba(240,112,95,.14);color:var(--bad)}
.actmenu .hint{padding:0 10px}
@media(max-width:620px){.actwrap .actbtn{display:none}.actwrap .connpend{display:inline-block}}

/* ---------- toasts ---------- */
.toasts{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 24px))}
.toast{display:flex;align-items:flex-start;gap:11px;background:var(--raise);border:1px solid var(--line);border-radius:16px;
  padding:12px 12px 12px 14px;box-shadow:0 20px 50px -20px rgba(0,0,0,.7);animation:txtoast .24s cubic-bezier(.2,.8,.2,1)}
.toast.ok{border-color:var(--glow)}
@keyframes txtoast{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.toasticon{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:12px;font-weight:700;
  background:var(--accent-dim);color:var(--accent)}
.toasticon.bad{background:rgba(240,112,95,.14);color:var(--bad)}
.toastbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--muted)}
.toastbody b{font-size:13.5px;font-weight:600;color:var(--ink)}
.toastlinks{display:flex;gap:12px;margin-top:3px}
.toastlinks button,.toastlinks a{font-size:12px;font-weight:600;color:var(--accent);text-decoration:none}
.toastx{color:var(--muted);font-size:18px;line-height:1;padding:0 2px}
.toastx:hover{color:var(--ink)}
@media(max-width:900px){.toasts{left:12px;right:12px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom))}}

/* ---------- holdings strip ---------- */
.holdings{display:flex;align-items:center;gap:13px;background:var(--raise);border:1px solid var(--line);border-radius:18px;
  padding:13px 16px;margin-bottom:18px;animation:txin .2s ease-out}
.holdings .hmain{flex:1;min-width:0}
.holdings .a{font-size:14px;font-weight:500}
.holdings .b{font-size:12px;color:var(--muted);margin-top:2px}
.holdings .hpend{color:var(--accent)}
.holdings .hsell{height:38px;flex:none}
@media(max-width:560px){.holdings{flex-wrap:wrap}.holdings .hsell{width:100%;justify-content:center}}

@media (prefers-reduced-motion:reduce){
  .txovl,.txsheet,.txbody,.txcheck,.txcheck path,.txfail,.actmenu,.toast,.holdings{animation:none!important}
  .txwallet::after,.txbeam i{animation:none!important}
  .txspin{animation-duration:2.4s}
  .txtrack li i::after,.txconf i::after{transition:none}
}

/* ---------- rounder sheet interior ---------- */
.txsheet .txamt,.txsheet .txcaption,.txsheet .txplanbox{border-radius:20px}
.txsheet .cta{border-radius:999px}

/* ---------- trade box: Buy and Sell tabs carry their colour ---------- */
.tradetabs .tabpills{border-radius:999px}
.tradetabs .tabpills button{border-radius:999px;padding:7px 20px;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.tradetabs .tabpills button:first-child:hover{color:var(--ok)}
.tradetabs .tabpills button:last-child:hover{color:var(--bad)}
.tradetabs .tabpills button:first-child[aria-pressed="true"]{background:var(--ok);color:var(--accent-ink);font-weight:600;
  box-shadow:0 4px 14px -4px var(--glow)}
.tradetabs .tabpills button:last-child[aria-pressed="true"]{background:var(--bad);color:#fff;font-weight:600;
  box-shadow:0 4px 14px -4px rgba(240,112,95,.45)}
/*
 * Design tokens and base rules, ported verbatim from prototype/index.html
 * (the approved visual baseline). Dark is the default theme; light is
 * `:root[data-theme="light"]`. Do not edit values here without a matching
 * change to the prototype: this file is the design system.
 */
img{max-width:100%}
[hidden]:not([hidden=until-found]){display:none!important}
:root{
  --ground:#0A0A0B; --raise:#0F1011; --surface:#131315; --surface-2:#1A1A1D; --surface-3:#232327;
  --line:#242428; --line-soft:#1D1D21;
  --ink:#F3F4F4; --ink-2:#C9CACD; --muted:#84858C;
  --accent:#4DD4C4; --accent-ink:#04241F; --accent-dim:rgba(77,212,196,.15);
  --brand:#4DBFB4; --cream:#F4F1E6; --charcoal:#2C2F30;
  --ok:#4DD4C4; --warn:#E8B33C; --bad:#F0705F;
  --glow:rgba(77,212,196,.30);
}
:root[data-theme="light"]{
  --ground:#F2F5F5; --raise:#FFFFFF; --surface:#FFFFFF; --surface-2:#EAEFEF; --surface-3:#DFE6E6;
  --line:#DCE4E4; --line-soft:#E7EDED;
  --ink:#0D1618; --ink-2:#3A484B; --muted:#6A787B;
  --accent:#0B8779; --accent-ink:#FFFFFF; --accent-dim:rgba(11,135,121,.12);
  --ok:#0B8779; --warn:#996213; --bad:#B4453A;
  --glow:rgba(11,135,121,.20);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
h1,h2{margin:0;font-weight:600;letter-spacing:-.02em;text-wrap:balance}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.wrap{max-width:1280px;margin:0 auto;padding:0 22px}
/*
 * Component styles, ported verbatim from prototype/index.html (lines 36-510).
 * Every screen of the app is built from these classes. Additions that the
 * prototype does not have live in app.css, never here.
 */
/* ---------- top banner ---------- */
.banner{background:var(--raise);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.banner .wrap{display:flex;align-items:center;gap:10px;justify-content:center;padding-top:9px;padding-bottom:9px;text-align:center}
.banner b{color:var(--ink);font-weight:600}
.banner .pip{width:6px;height:6px;border-radius:50%;background:var(--warn);flex:none}
.banner button{color:var(--muted);font-size:16px;line-height:1;margin-left:4px}

/* ---------- header ---------- */
header .wrap{display:flex;align-items:center;gap:16px;height:70px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit;flex:none}
.logo{width:46px;height:46px;flex:none;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}

.navpill{display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--line)}
.navpill button{padding:7px 16px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);
  transition:background .15s,color .15s;white-space:nowrap}
.navpill button[aria-selected="true"]{background:var(--surface-3);color:var(--ink)}
.navpill button:hover{color:var(--ink)}
.spacer{flex:1}
.iconbtn{width:40px;height:40px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;flex:none;color:var(--ink-2);transition:color .15s,border-color .15s}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}
.iconbtn svg{width:22px;height:22px;display:block}
.connect{padding:9px 20px;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  font-weight:600;font-size:14px;white-space:nowrap}
.connect:hover{filter:brightness(1.08)}

/* ---------- search row ---------- */
.searchrow{display:flex;gap:10px;margin:26px 0 22px}
.searchbox{flex:1;display:flex;align-items:center;gap:10px;padding:0 16px;height:48px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px}
.searchbox:focus-within{border-color:var(--accent)}
.searchbox input{flex:1;background:none;border:none;outline:none;font-size:15px}
.searchbox input::placeholder{color:var(--muted)}
.kbd{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.ghost{height:48px;padding:0 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);
  font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ghost:hover{border-color:var(--accent)}
.ghost.solid{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.ghost.solid:hover{filter:brightness(1.08)}

/* ---------- section shell ---------- */
.section{background:var(--raise);border:1px solid var(--line);border-radius:20px;padding:24px;margin-bottom:22px}
.section.glow{border-color:var(--glow);box-shadow:0 0 0 1px var(--accent-dim),0 24px 60px -40px var(--glow)}
.shead{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.stitle{display:flex;align-items:center;gap:10px}
.stitle h2{font-size:23px}
.count{font-size:12px;font-weight:600;padding:3px 10px;border-radius:999px;
  background:var(--accent-dim);color:var(--accent)}
.count.plain{background:var(--surface-2);color:var(--muted)}
.sdesc{font-size:13px;color:var(--muted);margin:5px 0 0;max-width:52ch}
.segs{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.seg{display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.seg button{padding:6px 13px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted);white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface-3);color:var(--ink)}

/* ---------- token grid ---------- */
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
@media(max-width:1140px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:920px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:680px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.grid{grid-template-columns:1fr}}

.tcard{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:10px;
  display:flex;flex-direction:column;gap:9px;text-align:left;width:100%;
  transition:border-color .15s,transform .15s}
.tcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.thumb{position:relative;aspect-ratio:1;border-radius:15px;overflow:hidden;display:grid;place-items:center}
.thumb .init{font-size:34px;font-weight:700;color:var(--cream);letter-spacing:-.03em;opacity:.92}
.tag{position:absolute;top:8px;left:8px;font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px;
  background:rgba(10,10,11,.72);color:#F3F4F4;backdrop-filter:blur(6px);letter-spacing:.01em}
.tag.right{left:auto;right:8px}
.tag.ok{background:rgba(77,212,196,.9);color:#04241F}
.tag.warn{background:rgba(232,179,60,.92);color:#2A1D00}
.tbody{padding:0 4px 4px;display:flex;flex-direction:column;gap:6px}
.tname{font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tsym{font-size:12px;color:var(--muted)}
.tval{font-size:16px;font-weight:600;letter-spacing:-.01em}
.tval span{font-size:10.5px;color:var(--muted);font-weight:500;margin-left:3px;letter-spacing:.04em}
.prog{display:flex;align-items:center;gap:8px}
.track{flex:1;height:3px;border-radius:2px;background:var(--surface-3);overflow:hidden}
.track i{display:block;height:100%;background:var(--accent);border-radius:2px}
.pct{font-size:11px;color:var(--muted)}
.foot{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted);
  border-top:1px solid var(--line-soft);padding-top:7px;margin-top:1px}
.foot .live{color:var(--accent)}

.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:22px}
.pager button{min-width:34px;height:34px;padding:0 10px;border-radius:9px;font-size:13.5px;color:var(--muted)}
.pager button[aria-current="true"]{background:var(--ink);color:var(--ground);font-weight:600}
.pager button:hover:not([aria-current="true"]){background:var(--surface-2);color:var(--ink)}

/* ---------- detail ---------- */
.back{display:inline-flex;gap:7px;align-items:center;font-size:13.5px;color:var(--muted);margin:22px 0 14px}
.back:hover{color:var(--accent)}
.detail{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start;padding-bottom:40px}
@media(max-width:900px){.detail{grid-template-columns:1fr}}
.panel{background:var(--raise);border:1px solid var(--line);border-radius:18px;padding:20px}
.dhead{display:flex;gap:15px;align-items:center;margin-bottom:16px}
.dthumb{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;flex:none;
  font-size:24px;font-weight:700;color:var(--cream)}
.proof{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;
  background:var(--accent-dim);font-size:12.5px;color:var(--accent);line-height:1.45}
.proof.warn{background:rgba(232,179,60,.13);color:var(--warn)}
.proof b{font-weight:600}
.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13px;margin-top:16px}
.kv dt{color:var(--muted)}
.kv dd{margin:0;text-align:right;word-break:break-all}
.sectitle{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:0 0 14px}
.axis{font-size:10px;fill:var(--muted)}
.quads{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.quad{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.quad .k{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.quad .v{font-size:15px;font-weight:600;margin-top:2px}
@media(max-width:560px){.quads{grid-template-columns:repeat(2,1fr)}}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.field label{font-size:12px;color:var(--muted);display:flex;justify-content:space-between;gap:10px}
.input{padding:11px 13px;border-radius:11px;border:1px solid var(--line);background:var(--surface);
  width:100%;font-size:15px;outline:none}
.input:focus{border-color:var(--accent)}
.quote{border-top:1px solid var(--line-soft);margin-top:14px;padding-top:12px;display:grid;gap:7px;font-size:12.5px}
.ql{display:flex;justify-content:space-between;gap:12px}
.ql .v{font-weight:500}
.ql.total{font-size:14.5px;font-weight:600;border-top:1px solid var(--line-soft);padding-top:9px;margin-top:3px}
.hint{font-size:11.5px;color:var(--muted);margin:10px 0 0;line-height:1.45}
.wide{width:100%;justify-content:center;margin-top:14px}
button:disabled{opacity:.45;cursor:not-allowed}
button.connect:disabled:hover,.ghost.solid:disabled:hover{filter:none}

table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:500;padding:0 0 9px}
td{padding:9px 0;border-top:1px solid var(--line-soft)}
td.r,th.r{text-align:right}
.side{font-weight:600}.side.buy{color:var(--accent)}.side.sell{color:var(--bad)}
.scroll{overflow-x:auto}

/* ---------- create ---------- */
.create{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start;padding-bottom:40px}
@media(max-width:900px){.create{grid-template-columns:1fr}}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.help{font-size:12.5px;color:var(--muted);margin:6px 0 18px;line-height:1.5}

/* ---------- footer ---------- */
.footer{background:var(--raise);border:1px solid var(--line);border-radius:22px;
  padding:32px 32px 22px;margin:26px 0 36px}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.5fr;gap:34px}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.fbrand{display:flex;align-items:center;gap:10px}
.fbrand img{width:34px;height:34px;display:block}
.fbrand b{font-size:17px;font-weight:700;letter-spacing:-.025em}
.fdesc{color:var(--muted);font-size:12.5px;line-height:1.65;margin-top:13px;max-width:36ch}
.fcol h3{font-size:12.5px;color:var(--muted);font-weight:500;margin:0 0 11px}
.fcol a,.fcol button{display:block;font-size:13.5px;color:var(--ink-2);text-decoration:none;
  padding:4px 0;text-align:left;background:none}
.fcol a:hover,.fcol button:hover{color:var(--accent)}
.fnote{font-size:12.5px;color:var(--muted);line-height:1.65}
.fbot{display:flex;justify-content:space-between;align-items:center;gap:14px;
  border-top:1px solid var(--line-soft);margin-top:26px;padding-top:19px;
  font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.fsoc{display:flex;align-items:center;gap:10px}
.fsoc a{color:var(--muted);text-decoration:none}
.fsoc a:hover{color:var(--accent)}
.xbtn{width:30px;height:30px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-2)}
.xbtn:hover{border-color:var(--accent);color:var(--accent)}
.xbtn svg{width:13px;height:13px}

/* ---------- new pool ---------- */
.nphead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 0 20px}
.nphead h1{font-size:27px;letter-spacing:-.03em}
.npctl{margin-left:auto;display:flex;gap:9px;align-items:center}
.npwrap{display:grid;grid-template-columns:330px 1fr;gap:20px;align-items:start;padding-bottom:40px}
@media(max-width:900px){.npwrap{grid-template-columns:1fr}}
.rail{background:var(--raise);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.step{display:flex;gap:13px;align-items:center}
.stepnum{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:12.5px;font-weight:600;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.step.on .stepnum{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.step .t{font-size:14px;font-weight:500;color:var(--muted);line-height:1.3}
.step.on .t{color:var(--ink)}
.railline{width:1px;height:22px;background:var(--line);margin:5px 0 5px 14px}
.npcard{background:var(--raise);border:1px solid var(--line);border-radius:18px;padding:24px}
.npcard h2{font-size:17px}
.npcard p.d{font-size:13px;color:var(--muted);margin:6px 0 16px;line-height:1.5}
.selrow{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:18px;align-items:start}
@media(max-width:560px){.selrow{grid-template-columns:1fr}}
.tsel{display:flex;align-items:center;gap:10px;padding:0 15px;height:52px;box-sizing:border-box;
  border-radius:13px;background:var(--surface);border:1px solid var(--line);font-size:14.5px;
  font-weight:600;width:100%;text-align:left;line-height:1;transition:border-color .15s}
.tsel:not(.locked):hover{border-color:var(--accent)}
.tsel .cv{margin-left:auto;color:var(--muted);font-size:11.5px;line-height:1;flex:none}
.tsel img,.tsel .mini{width:23px;height:23px;border-radius:50%;flex:none}
.tsel .mini{display:grid;place-items:center;font-size:9.5px;font-weight:700;color:var(--cream)}
.tsel.empty{background:var(--ink);color:var(--ground);border-color:var(--ink)}
.tsel.empty .cv{color:var(--ground);opacity:.55}
.tsel.locked{opacity:.95}
.tierbox{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:13px 15px;
  display:flex;align-items:center;gap:14px;margin-bottom:20px}
.tierbox .a{font-size:15px;font-weight:600}
.tierbox .b{font-size:12px;color:var(--muted);margin-top:2px}
.tierbox .pill{margin-left:auto;padding:6px 12px;border-radius:999px;background:var(--surface-2);
  font-size:12px;color:var(--ink-2);flex:none}
.npbtn{width:100%;padding:15px;border-radius:14px;font-size:15px;font-weight:600;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.npbtn.go{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.npbtn.go:hover{filter:brightness(1.08)}
.depbox{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px;margin-bottom:12px}
.depbox:focus-within{border-color:var(--accent)}
.deprow{display:flex;align-items:center;gap:12px}
.deprow input{flex:1;min-width:0;background:none;border:none;outline:none;font-size:28px;font-weight:500;
  letter-spacing:-.02em;color:var(--ink)}
.deprow input::placeholder{color:var(--muted)}

/* ---------- token picker ---------- */
.ovl{position:fixed;inset:0;background:rgba(0,0,0,.62);display:grid;place-items:center;z-index:60;padding:20px}
.pick{background:var(--raise);border:1px solid var(--line);border-radius:20px;width:100%;max-width:420px;
  max-height:min(680px,86vh);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.7)}
.pickhead{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 14px}
.pickhead h2{font-size:18px}
.pickhead button{color:var(--muted);font-size:20px;line-height:1}
.pickhead button:hover{color:var(--ink)}
.picksearch{margin:0 20px 14px;display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:0 13px}
.picksearch:focus-within{border-color:var(--accent)}
.picksearch input{flex:1;min-width:0;background:none;border:none;outline:none;padding:12px 0;font-size:14.5px}
.quick{display:flex;gap:8px;padding:0 20px 14px;overflow-x:auto}
.qtile{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 11px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line);font-size:11.5px;font-weight:600;flex:none}
.qtile:hover{border-color:var(--accent)}
.qtile .mini,.qtile img{width:24px;height:24px;border-radius:50%}
.qtile .mini{display:grid;place-items:center;font-size:9px;font-weight:700;color:var(--cream)}
.picklbl{font-size:12px;color:var(--muted);padding:0 20px 8px;display:flex;align-items:center;gap:7px}
.picklist{overflow-y:auto;padding:0 10px 14px}
.prow{display:flex;align-items:center;gap:13px;padding:10px;border-radius:12px;width:100%;text-align:left}
.prow:hover{background:var(--surface)}
.prow .mini{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  font-weight:700;color:var(--cream);flex:none}
.prow .a{font-size:14.5px;font-weight:500}
.prow .b{font-size:12px;color:var(--muted);margin-top:1px}
.prow .r{margin-left:auto;text-align:right;font-size:12px;color:var(--muted)}

/* ---------- analytics ---------- */
.anhead{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.anhead h1{font-size:29px;letter-spacing:-.03em}
.anhead p{color:var(--muted);font-size:14px;margin:7px 0 0;max-width:56ch}
.anmeta{font-size:12px;color:var(--muted);margin-top:9px}
.anctl{display:flex;gap:10px;margin-left:auto;align-items:center;flex-wrap:wrap}
.outbtn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;
  background:var(--ink);color:var(--ground);font-size:13.5px;font-weight:600;white-space:nowrap}
.outbtn:hover{filter:brightness(.92)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;background:var(--surface)}
@media(max-width:760px){.tiles{grid-template-columns:1fr}}
.tile{padding:20px 22px;border-left:1px solid var(--line)}
.tile:first-child{border-left:none}
@media(max-width:760px){.tile{border-left:none;border-top:1px solid var(--line)}
  .tile:first-child{border-top:none}}
.tile .k{font-size:12.5px;color:var(--muted)}
.tile .v{font-size:40px;font-weight:600;letter-spacing:-.035em;line-height:1.15;margin:6px 0 8px}
.tile .d{font-size:12.5px;color:var(--muted)}
.tile .d.pos{color:var(--accent)}
.anfoot{font-size:12px;color:var(--muted);margin-top:16px;line-height:1.55}
.anpair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px;margin-bottom:40px}
@media(max-width:820px){.anpair{grid-template-columns:1fr}}
.barhead{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.barhead h2{font-size:18px}
.barhead .v{font-size:17px;font-weight:600}
.barsub{font-size:12.5px;color:var(--muted);margin:5px 0 16px}
.barbox{background:var(--surface);border-radius:13px;padding:16px 16px 10px}
.bars{display:flex;align-items:flex-end;gap:5px;height:180px}
.bars i{flex:1;background:var(--accent);opacity:.5;border-radius:3px 3px 0 0;min-height:3px;
  transition:opacity .15s}
.bars i.hot{opacity:1}
.barx{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:9px}

/* ---------- token page ---------- */
.tpage{display:grid;grid-template-columns:352px 1fr;gap:18px;align-items:start;padding-bottom:18px}
@media(max-width:980px){.tpage{grid-template-columns:1fr}}
.tradecard{background:var(--raise);border:1px solid var(--line);border-radius:20px;padding:18px}
.thead2{display:flex;gap:13px;align-items:center;margin-bottom:16px}
.thead2 .av{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;flex:none;
  font-size:17px;font-weight:700;color:var(--cream)}
.thead2 h1{font-size:21px;letter-spacing:-.02em}
.pairchip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 4px;border-radius:999px;
  background:var(--surface-2);font-size:11px;color:var(--ink-2);margin-left:7px;vertical-align:middle}
.pairchip img{width:15px;height:15px;border-radius:50%}
.swapwrap{position:relative;display:flex;flex-direction:column;gap:7px}
.spanel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:15px}
.spanel:focus-within{border-color:var(--accent)}
.spanel .lbl{font-size:12.5px;color:var(--muted);margin-bottom:6px}
.spanel .amt{display:flex;align-items:center;gap:10px}
.spanel .amt input{flex:1;min-width:0;background:none;border:none;outline:none;font-size:34px;
  font-weight:500;letter-spacing:-.03em;color:var(--ink);padding:0}
.spanel .amt input::placeholder{color:var(--muted)}
.spanel .sub{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);margin-top:8px}
.tokchip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 6px;border-radius:999px;
  background:var(--surface-2);font-size:14px;font-weight:600;flex:none;white-space:nowrap}
.tokchip img{width:22px;height:22px;border-radius:50%}
.tokchip .mini{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:8.5px;
  font-weight:700;color:var(--cream)}
/* In flow between the two panels (negative margins cancel its height plus one gap), so it stays on the seam when either panel grows. */
.swapmid{position:relative;align-self:center;margin:-20.5px 0;z-index:2;
  width:34px;height:34px;border-radius:11px;background:var(--surface-2);border:3px solid var(--raise);
  display:grid;place-items:center;color:var(--ink-2);font-size:14px}
.swapmid:hover{color:var(--accent)}
.cta{width:100%;padding:15px;border-radius:14px;background:var(--accent);color:var(--accent-ink);
  font-size:15.5px;font-weight:700;margin-top:14px}
.cta:hover{filter:brightness(1.08)}
.cta:disabled{opacity:.5;cursor:not-allowed}
.cta:disabled:hover{filter:none}

.chartcard{background:var(--raise);border:1px solid var(--line);border-radius:20px;padding:20px}
.statbar{display:flex;flex-wrap:wrap;gap:0;margin-bottom:18px}
.statbar > div{flex:1;min-width:130px;padding:0 20px;border-left:1px solid var(--line)}
.statbar > div:first-child{padding-left:0;border-left:none}
.statbar .k{font-size:11.5px;color:var(--muted);margin-bottom:4px}
.statbar .v{font-size:15px;font-weight:500}
.bigrow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.bignum{font-size:38px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.bigsub{font-size:13px;margin-top:5px}
.bigsub .pos{color:var(--accent);font-weight:600}
.bigsub .tf{color:var(--muted);margin-left:7px}
.chartinset{background:var(--surface);border-radius:16px;padding:10px 4px 4px}

.tabsrow{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.tabpills{display:flex;gap:3px;padding:4px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.tabpills button{padding:7px 15px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--muted)}
.tabpills button[aria-pressed="true"]{background:var(--surface-3);color:var(--ink)}
.tcount{margin-left:auto;font-size:12px;color:var(--muted);background:var(--surface-2);
  padding:3px 10px;border-radius:999px}
.feed{background:var(--raise);border:1px solid var(--line);border-radius:20px;padding:18px;margin-bottom:40px}
.frow{display:flex;align-items:center;gap:14px;padding:13px 4px;border-top:1px solid var(--line-soft)}
.frow:first-of-type{border-top:none}
.fdir{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;flex:none;
  background:var(--accent-dim);color:var(--accent)}
.fdir.sell{background:rgba(240,112,95,.14);color:var(--bad)}
.fmain{flex:1;min-width:0}
.fmain .a{font-size:14px;font-weight:500}
.fmain .b{font-size:11.5px;color:var(--muted);margin-top:2px}
.fright{text-align:right;flex:none}
.fright .a{font-size:14px;font-weight:500}
.fright .b{font-size:11.5px;color:var(--muted);margin-top:2px}
.fwhen{width:52px;text-align:right;font-size:12px;color:var(--muted);flex:none}
@media(max-width:520px){.fwhen{display:none}}

/* ---------- launch ---------- */
.backpill{display:inline-flex;align-items:center;gap:7px;padding:9px 16px 9px 12px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);font-size:13.5px;font-weight:500;margin:22px 0 16px}
.backpill:hover{border-color:var(--accent)}
.launch{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:24px;
  overflow:hidden;margin-bottom:40px}
@media(max-width:900px){.launch{grid-template-columns:1fr}}
.launch .form{background:var(--raise);padding:34px}
.launch .side{background:var(--surface);padding:34px 30px;display:flex;align-items:center;justify-content:center}
@media(max-width:900px){.launch .side{align-items:flex-start}}
.launch h1{font-size:30px;letter-spacing:-.03em;margin-bottom:24px}
.lrow{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:520px){.lrow{grid-template-columns:1fr}}
.lf{display:flex;flex-direction:column;gap:7px;margin-bottom:17px}
.lf > label{font-size:12.5px;color:var(--muted)}
.lin{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px 15px;
  font-size:14.5px;width:100%;outline:none;color:var(--ink)}
.launch .side .lin{background:var(--surface-2)}
.lin::placeholder{color:var(--muted)}
.lin:focus{border-color:var(--accent)}
textarea.lin{min-height:104px;resize:vertical;font-family:inherit;line-height:1.5}
.prefixed{display:flex;align-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:0 15px}
.prefixed:focus-within{border-color:var(--accent)}
.prefixed span{font-size:14.5px;color:var(--ink-2);white-space:nowrap}
.prefixed input{flex:1;min-width:0;background:none;border:none;outline:none;padding:13px 0 13px 2px;font-size:14.5px}
.prefixed input::placeholder{color:var(--muted)}
.imgpick{display:flex;align-items:center;gap:15px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:11px;cursor:pointer;width:100%;text-align:left}
.imgpick:hover{border-color:var(--accent)}
.imgtile{width:54px;height:54px;border-radius:14px;background:var(--surface-2);display:grid;place-items:center;
  flex:none;overflow:hidden;color:var(--muted);font-size:20px}
.imgtile img{width:100%;height:100%;object-fit:cover}
.imgpick b{font-weight:500;font-size:14.5px}
.imgpick small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.paired{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:12px 15px}
.kasmark{width:26px;height:26px;border-radius:50%;flex:none;display:block}
.lockicon{margin-left:auto;color:var(--muted);font-size:12px}
.lhelp{font-size:12px;color:var(--muted);margin:-9px 0 17px}
.devbuy{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px}
.devbuy:focus-within{border-color:var(--accent)}
.devrow{display:flex;align-items:center;gap:12px}
.devrow input{flex:1;min-width:0;background:none;border:none;outline:none;font-size:28px;font-weight:500;
  letter-spacing:-.02em;color:var(--ink)}
.devrow input::placeholder{color:var(--muted)}
.assetchip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px 6px 7px;border-radius:999px;
  background:var(--surface-2);font-size:13.5px;font-weight:600;flex:none}
details.adv{border-top:1px solid var(--line-soft);margin-top:4px}
details.adv > summary{list-style:none;cursor:pointer;padding:17px 0;font-size:14.5px;font-weight:500;
  display:flex;align-items:center;justify-content:space-between}
details.adv > summary::-webkit-details-marker{display:none}
details.adv > summary::after{content:"\25BE";color:var(--muted);font-size:11px}
details.adv[open] > summary::after{content:"\25B4"}
.duefoot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid var(--line-soft);padding:16px 0 18px;font-size:12.5px;color:var(--muted)}
.bigbtn{width:100%;padding:16px;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  font-size:15.5px;font-weight:700}
.bigbtn:hover{filter:brightness(1.08)}
.sumcard{background:var(--raise);border:1px solid var(--line);border-radius:20px;padding:24px;width:100%;max-width:330px}
.sumtile{width:74px;height:74px;border-radius:19px;background:var(--surface-2);display:grid;place-items:center;
  overflow:hidden;color:var(--muted);font-size:26px;margin-bottom:16px}
.sumtile img{width:100%;height:100%;object-fit:cover}
.sumcard h2{font-size:25px;letter-spacing:-.02em}
.sumtick{color:var(--muted);font-size:14px;margin:2px 0 18px}
.sumrow{display:flex;justify-content:space-between;gap:14px;padding:12px 0;font-size:13.5px;
  border-top:1px solid var(--line-soft)}
.sumrow .k{color:var(--muted)}
.sumrow .v{font-weight:500;text-align:right}

/* ---------- pool ---------- */
.phead{padding:30px 0 4px}
.phead h1{font-size:34px;letter-spacing:-.03em}
.phead p{color:var(--muted);font-size:15px;margin:8px 0 20px}
.pillbtns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.pillbtn{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;
  background:var(--accent-dim);color:var(--accent);font-weight:600;font-size:14.5px}
.pillbtn:hover{filter:brightness(1.15)}
.connbanner{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line);
  background:var(--raise);padding:38px 20px;text-align:center;margin-bottom:30px}
.connbanner h2{font-size:21px}
.connbanner p{color:var(--muted);font-size:13.5px;margin:7px 0 16px}
.connbanner .blob{position:absolute;border-radius:40%;background:var(--accent-dim);pointer-events:none}
.ptable-wrap{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--raise)}
table.pool{width:100%;border-collapse:collapse;font-size:13.5px}
table.pool th{background:var(--surface);padding:13px 16px;font-size:11.5px;text-transform:none;
  letter-spacing:0;color:var(--muted);font-weight:500;white-space:nowrap}
table.pool td{padding:13px 16px;border-top:1px solid var(--line-soft);white-space:nowrap}
table.pool tr:hover td{background:var(--surface)}
table.pool .r,table.pool th.r{text-align:right}
.pair{display:flex;align-items:center;gap:11px;cursor:pointer}
.duo{position:relative;width:38px;height:26px;flex:none}
.duo > *{position:absolute;top:0;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:700;color:var(--cream);border:2px solid var(--raise);box-sizing:border-box}
.duo > *:first-child{left:0}
.duo > *:last-child{left:13px}
.pairname{font-weight:600}
.pairsub{font-size:11.5px;color:var(--muted)}
.chip2{display:inline-block;padding:2px 7px;border-radius:6px;background:var(--surface-3);
  font-size:11px;color:var(--ink-2);margin-right:5px}
.up{color:var(--accent);font-size:12px}

.pdetail{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start;padding:14px 0 40px}
@media(max-width:900px){.pdetail{grid-template-columns:1fr}}
.crumb{font-size:13px;color:var(--muted);padding:22px 0 14px}
.crumb button{color:var(--muted)}.crumb button:hover{color:var(--accent)}
.ctabs{display:flex;gap:22px;border-bottom:1px solid var(--line);margin-bottom:18px}
.ctabs button{padding:0 0 11px;font-size:14.5px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.ctabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.chartbox{background:radial-gradient(circle,var(--line) 1px,transparent 1px);background-size:26px 26px;
  border-radius:12px;padding:4px 0}
.tpills{display:flex;justify-content:flex-end;margin-top:10px}
.statcard{background:var(--raise);border:1px solid var(--line);border-radius:18px;padding:20px;margin-bottom:16px}
.statcard h2{font-size:19px;margin-bottom:16px}
.sblock{margin-bottom:18px}
.sblock:last-child{margin-bottom:0}
.sk{font-size:13px;color:var(--muted);margin-bottom:5px}
.sv{font-size:27px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:baseline;gap:8px}
.balrow{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px}
.balbar{height:5px;border-radius:3px;display:flex;overflow:hidden;gap:2px}
.balbar i{display:block;height:100%;border-radius:3px}
.actions{display:flex;gap:11px;margin-bottom:18px}
.actions .pillbtn{flex:1;justify-content:center}
.linkrow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;padding:7px 0}
.copy{padding:4px 9px;border-radius:7px;background:var(--surface-3);font-size:11px;color:var(--ink-2)}
.copy:hover{color:var(--accent)}

.empty{text-align:center;padding:52px 20px;color:var(--muted);font-size:13.5px;line-height:1.6}
.empty b{color:var(--ink);display:block;font-size:16px;margin-bottom:7px;font-weight:600}
/*
 * Additions the prototype does not have, each required by ux-plan.md
 * section 3.1 or by live data. Built only from the prototype's tokens; every
 * prototype class keeps its own rules (components.css).
 */

/* ---------- status bars (feed paused, node behind): the banner component ---------- */
.statusbar{background:var(--surface)}
.banner .pip.bad{background:var(--bad)}

/* ---------- header lag dot (ux-plan section 4) ---------- */
.lag{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);white-space:nowrap;flex:none}
.lagdot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.lagdot.ok{background:var(--ok);box-shadow:0 0 0 3px var(--accent-dim)}
.lagdot.warn{background:var(--warn)}
.lagdot.bad{background:var(--bad)}
@media(max-width:620px){.lag span{display:none}}

/* ---------- King of the Hill + live tape row ---------- */
.hillrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;margin-bottom:22px}
.hillrow > .section{margin-bottom:0;display:flex;flex-direction:column;min-width:0}
@media(max-width:900px){.hillrow{grid-template-columns:1fr}}
.hillcard{display:grid;grid-template-columns:168px minmax(0,1fr);gap:18px;align-items:center;width:100%;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:10px;
  transition:border-color .15s,transform .15s}
button.hillcard:hover{border-color:var(--accent);transform:translateY(-2px)}
@media(max-width:420px){.hillcard{grid-template-columns:1fr}}
.hillbody{display:flex;flex-direction:column;gap:9px;padding:4px 8px 4px 0;min-width:0}
.hillbody .tname{font-size:19px}
.hillbody .tval{font-size:20px}
.hillnote{font-size:12px;color:var(--muted)}

.tape{max-height:318px;overflow-y:auto;margin:-6px -6px 0;padding:0 6px;scrollbar-width:thin}
.tape .frow{width:100%;text-align:left}
.tape button.frow:hover .fmain .a{color:var(--accent)}
.tapeempty{padding:40px 20px}
.frow.in{animation:tapein .7s ease-out}
@keyframes tapein{
  from{opacity:0;transform:translateY(-6px);background:var(--accent-dim)}
  40%{opacity:1;transform:none;background:var(--accent-dim)}
  to{background:transparent}
}

/* ---------- live data ---------- */
.thumbimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tag.bad{background:rgba(240,112,95,.92);color:#2A0B06}

/* ---------- skeletons (loading; no spinners) ---------- */
.skel{pointer-events:none}
.skel:hover{transform:none;border-color:var(--line)}
.sk,.skl{background:var(--surface-2);position:relative;overflow:hidden}
.skl{display:block;border-radius:6px}
.sk::after,.skl::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--surface-3),transparent);transform:translateX(-100%);
  animation:skel 1.4s ease-in-out infinite}
@keyframes skel{to{transform:translateX(100%)}}

@media (prefers-reduced-motion:reduce){
  .frow.in,.sk::after,.skl::after{animation:none!important}
  .tcard:hover,button.hillcard:hover{transform:none}
}

/*
 * Token page additions (phase4-plan.md section 3.2, ux-plan.md section 3.3).
 * Every rule below is built from the prototype's tokens and sits on top of
 * the ported `.tpage`, `.tradecard`, `.chartcard`, `.feed` classes.
 */

/* ---------- header row: sealed badge, phase pill, creator ---------- */
.tag.inline{position:static;display:inline-flex;align-items:center;cursor:pointer}
.tag.inline:hover{filter:brightness(1.08)}
.tmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:-4px 0 16px}
.tmeta .pairchip{margin-left:0}
.pairchip.plain{padding:2px 9px}
.fmain .pairchip.plain{font-family:inherit}

/* ---------- trade box ---------- */
.tradetabs{margin-bottom:12px}
.seg.quickamt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:10px}
.seg.quickamt button{width:100%;padding-left:0;padding-right:0;text-align:center}
.proof.neutral{background:var(--surface-2);color:var(--ink-2)}
.proof.tradenote a,.proof.tradenote a:visited{color:inherit;text-decoration:underline}
.stepper{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:10px 0 0;padding:0}
.stepper li{padding:3px 10px;border-radius:999px;background:var(--surface-3);font-size:11.5px;color:var(--muted)}
.stepper li.done{color:var(--accent)}
.stepper li[aria-current="step"]{background:var(--accent);color:var(--accent-ink)}

/* ---------- chart card ---------- */
.statbar .usd{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;font-weight:400}
.bigsub .neg{color:var(--bad);font-weight:600}
.prooflink{width:100%;text-align:left}
.prooflink:hover{filter:brightness(1.1)}

/* ---------- feed: ghost rows, links ---------- */
.feed .fright .b a{color:var(--muted)}
.feed .fright .b a:hover{color:var(--accent)}
.feedmore{display:flex;justify-content:center;border-top:1px solid var(--line-soft)}
.feedmore .back{margin:12px 0 0}
.frow.ghost{opacity:.6}
.frow.ghost.accepted{opacity:1}
.frow.ghost.missed .fdir{background:var(--surface-2);color:var(--muted)}
.proofpanel .kv{margin-top:18px}
.proofpanel .kv a{color:var(--ink)}
.proofpanel .kv a:hover{color:var(--accent)}

/* ---------- mobile: trade box as a bottom sheet with a persistent Buy / Sell bar ---------- */
.thead-m,.sheetclose,.tradebar,.sheetscrim{display:none}
@media(max-width:900px){
  .thead-m{display:block}
  .tpage > .tradecard{position:fixed;left:0;right:0;bottom:0;z-index:70;max-height:88vh;overflow-y:auto;
    border-radius:22px 22px 0 0;border-bottom:none;transform:translateY(105%);visibility:hidden;
    transition:transform .25s ease,visibility .25s;box-shadow:0 -14px 40px rgba(0,0,0,.35)}
  .tpage > .tradecard.open{transform:none;visibility:visible}
  .tpage > .tradecard .thead-d{display:none}
  .sheetclose{display:block;width:44px;height:5px;border-radius:3px;background:var(--surface-3);margin:-4px auto 14px}
  .tradebar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:65;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--raise);border-top:1px solid var(--line)}
  .tradebar .cta{margin-top:0;flex:1;padding:13px}
  .tradebar .sellcta{background:var(--surface-2);color:var(--ink);border:1px solid var(--line)}
  .sheetscrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:68}
  body:has(.tradebar){padding-bottom:72px}
}
@media(max-width:560px){
  .statbar{display:grid;grid-template-columns:1fr 1fr;gap:12px 0}
  .statbar > div{min-width:0;padding:0 14px}
  .statbar > div:nth-child(odd){border-left:none;padding-left:0}
}
@media (prefers-reduced-motion:reduce){
  .tpage > .tradecard{transition:none}
}

/* ---------- narrow screens: the header's nav pill shrinks and scrolls instead of widening the page (375 px rule) ---------- */
@media(max-width:620px){
  header .navpill{min-width:0;flex-shrink:1;overflow-x:auto;scrollbar-width:none}
  header .navpill::-webkit-scrollbar{display:none}
  header .navpill button{flex:none;padding:7px 12px}
  header .spacer{display:none}
  header .lag,header .iconbtn,header .connect{flex:none}
}

/*
 * Create screen additions (phase4-plan.md section 3.3, ux-plan.md section 3.2).
 * Built from the prototype's tokens on top of the ported `.launch`, `.lf`,
 * `.tierbox`, `.sumcard` classes.
 */

/* ---------- field notes: validation, "ticker in use" ---------- */
.lnote{font-size:12px;color:var(--muted);line-height:1.4}
.lnote.warn{color:var(--warn)}
.lnote.bad{color:var(--bad)}
.lf > label span{color:var(--muted);font-size:11.5px;margin-left:4px}

/* ---------- preset picker: the new-pool tier box as a choice ---------- */
button.tierbox{width:100%;text-align:left;margin-bottom:10px;transition:border-color .15s}
button.tierbox:hover{border-color:var(--accent)}
button.tierbox[aria-pressed="true"]{border-color:var(--accent)}
button.tierbox[aria-pressed="true"] .pill{background:var(--accent);color:var(--accent-ink)}
.tierbox .b.mono{font-size:11.5px;margin-top:4px;line-height:1.5}
details.adv[open]{padding-bottom:8px}

/* ---------- summary card sections ---------- */
.sumcard .sumhead{font-size:12px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:20px 0 2px}
.sumtile{position:relative}

/* ---------- content-addressed image whose bytes do not match the declared hash ---------- */
.imgwarn{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:10.5px;color:var(--cream);
  font-family:inherit;letter-spacing:0;line-height:1.2;padding:0 4px}
.sumtile .imgwarn{bottom:4px;font-size:9px;color:var(--muted)}

/* ---------- launch celebration (static under reduced motion) ---------- */
.launch .form{position:relative}
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-12px;width:8px;height:12px;border-radius:2px;opacity:0;animation:confetti 1.5s ease-in forwards}
@keyframes confetti{
  0%{opacity:1;transform:translateY(0) rotate(0)}
  100%{opacity:0;transform:translateY(520px) rotate(540deg)}
}
@media (prefers-reduced-motion:reduce){
  .confetti{display:none}
  button.tierbox{transition:none}
}

/* ---------- narrow screens: the launch grid's tracks never grow past the viewport (375 px rule) ---------- */
.launch > .form,.launch > .side{min-width:0}
.tierbox > div{min-width:0}
.tierbox .b.mono{overflow-wrap:anywhere}
.imgpick > span:last-child{min-width:0}
@media(max-width:520px){.sumrow .v{overflow-wrap:anywhere}}