/*
 * The footer's Legal column (Footer.tsx, `.fgrid.has-legal`): five columns on
 * desktop; on tablets the brand spans the row, then Product | Verify and
 * Legal | Risk notice; on phones (app.css: two columns, brand and risk notice
 * full width) Legal spans the row with its four links in two columns.
 */
.fgrid.has-legal{grid-template-columns:1.5fr 1fr 1fr 1fr 1.5fr;gap:30px}
@media(max-width:1100px){
  .fgrid.has-legal{grid-template-columns:1fr 1fr 1fr;gap:28px}
  .fgrid.has-legal > :first-child,.fgrid.has-legal > :last-child{grid-column:1 / -1}
}
@media(max-width:860px){
  .fgrid.has-legal{grid-template-columns:1fr 1fr}
  .fgrid.has-legal > :last-child{grid-column:auto}
}
@media(max-width:520px){
  .fgrid.has-legal{gap:26px 18px}
  .fgrid.has-legal > :last-child{grid-column:1 / -1}
  .fgrid.has-legal > .flegal{grid-column:1 / -1;display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
  .fgrid.has-legal > .flegal h3{grid-column:1 / -1}
}
/*
 * 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; the Liquidity box's "All" shares ---------- */
.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)}
/* The most a buy can spend right now, under Pay: a button that fills it. */
.capnote.maxnote{display:block;width:100%;text-align:left;background:transparent;border:1px dashed var(--line);color:var(--muted);cursor:pointer;font:inherit;font-size:11.5px;transition:color .15s ease,border-color .15s ease}
.capnote.maxnote:hover,.capnote.maxnote[aria-pressed="true"]{color:var(--accent);border-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;max-height:92dvh;
    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 .hmerge{color:var(--warn);font-weight:600}
.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)}

/* ---------- liquidity form: Add and Remove tabs carry the Buy and Sell colours ---------- */
.lpsidetabs{border-radius:999px}
.lpsidetabs button{border-radius:999px;padding:7px 20px;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.lpsidetabs button[data-side="add"]:hover{color:var(--ok)}
.lpsidetabs button[data-side="remove"]:hover{color:var(--bad)}
.lpsidetabs button[data-side="add"][aria-pressed="true"]{background:var(--ok);color:var(--accent-ink);font-weight:600;
  box-shadow:0 4px 14px -4px var(--glow)}
.lpsidetabs button[data-side="remove"][aria-pressed="true"]{background:var(--bad);color:#fff;font-weight:600;
  box-shadow:0 4px 14px -4px rgba(240,112,95,.45)}

/* ---------- trade box: share-of-balance slider and the slippage chip (2026-10-14) ---------- */
.balslider label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:6px}
.balslider.off{opacity:.55}
.balslider input[type=range]{margin:0}
.balstops{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
.balstops button{padding:4px 0;border-radius:8px;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:12px;cursor:pointer}
.balstops button[aria-pressed="true"]{border-color:var(--accent);color:var(--ink)}
.balstops button:disabled{cursor:default}
.slipchip{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.slipbtn{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:999px;padding:4px 12px;font-size:12px;cursor:pointer}
.slipbtn .mono{color:var(--ink);margin-left:4px}
.slipbtn[aria-expanded="true"]{border-color:var(--accent)}
.slippanel{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;width:100%}
.slippanel button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:8px;padding:4px 10px;font-size:12px;cursor:pointer}
.slippanel button[aria-pressed="true"]{border-color:var(--accent);color:var(--ink)}
.slippanel button:disabled{opacity:.5;cursor:default}
.slippanel input{width:84px;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:8px;padding:4px 8px;font-size:12px}
/* Phones: 16 px, below which iOS Safari zooms the page in on focus (mobile audit M-4). */
@media(max-width:900px){.slippanel input{font-size:16px;padding:2px 8px}}

/* ---------- slippage prompt (after repeated failures) and "Adjust slippage" (after a busy end) ---------- */
.slipask{display:flex;flex-direction:column;gap:10px;width:100%;text-align:left;margin-top:6px}
.slipask p{margin:0;max-width:none}
.slipopts{display:grid;gap:8px}
.slipopt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:11px 13px;color:var(--ink-2);font:inherit;font-size:12.5px;line-height:1.4;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.slipopt b{flex:none;min-width:40px;font-size:15px;color:var(--ink)}
.slipopt:hover,.slipopt:focus-visible{border-color:var(--accent);background:var(--accent-dim);outline:none}
.slipnow{display:flex;align-items:center;gap:12px;padding:0 13px;font-size:12px;color:var(--muted)}
.slipnow b{flex:none;min-width:40px;font-weight:500}
.slipremember{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.slipremember input{accent-color:var(--accent);width:15px;height:15px;margin:0}
.tradenote .slipask{margin-top:8px}
.tradenote .slipopt{padding:9px 11px}
.txadjust{display:flex;width:100%;justify-content:center;margin-top:10px}
/*
 * Wallet picker, header account states and onboarding checklist
 * (phase4-plan.md section 3.6). Built on the prototype's picker overlay
 * (`.ovl`, `.pick`, `.pickhead`, `.picklbl`, `.picklist`, `.prow`), the
 * `.connect` button, `.proof` notes and the banner; only modifiers here.
 */

/* ---------- header button: restoring (skeleton), wrong network ---------- */
.connect.restoring{background:var(--surface-2);color:transparent;position:relative;overflow:hidden;pointer-events:none;min-width:118px}
.connect.restoring::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}
.connect.warn{background:rgba(232,179,60,.13);color:var(--warn);box-shadow:inset 0 0 0 1px rgba(232,179,60,.35)}
.connect.warn .narrow{display:none}
.connect.warn::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--warn);
  margin-right:8px;vertical-align:middle;position:relative;top:-1px}

/* ---------- picker rows ---------- */
.walletpick{max-width:440px}
.walletpick .picklist{padding-bottom:6px}
.walletpick .prow .a,.walletpick .prow .b{display:block}
.walletpick .prow > span:nth-child(2){min-width:0}
.walletpick .picklbl{padding-top:4px}
.prow .mini.wmini{background:var(--surface-3);color:var(--ink);font-size:13px}
.prow .mini.wmini.on{background:var(--accent-dim);color:var(--accent)}
.prow .mini.wmini img{width:22px;height:22px;display:block}
.prow:disabled{cursor:default}
.prow:disabled:hover{background:none}
.prow:disabled .mini,.prow:disabled .a{opacity:.55}
.prow .r .go{color:var(--accent);font-weight:600;font-size:12.5px;white-space:nowrap}
.prow .r .soon{display:inline-block;white-space:nowrap;padding:2px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-weight:500}
.prow .r .det{display:inline-flex;align-items:center;gap:6px}
.prow .r .det::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.prow.busy .r .go{color:var(--muted)}
a.prow{color:inherit;text-decoration:none}
.picknote{margin:0 20px 14px}
.picknote .proof{width:100%}
.picknote .proof > div{flex:1;min-width:0}
.picknote .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.picknote .acts .copy{font-weight:600}

/* ---------- connected account block in the picker / activity menu ---------- */
.acct{display:flex;align-items:center;gap:12px;margin:0 20px 14px;padding:12px 14px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line)}
.acct .mini{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--accent-dim);color:var(--accent)}
.acct .a{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct .b{font-size:12px;color:var(--muted);margin-top:1px}
.acct > div{flex:1;min-width:0}
.acctbtns{display:flex;gap:8px;margin:0 20px 16px}
.acctbtns .ghost{flex:1;justify-content:center;height:40px;font-size:13.5px;display:inline-flex;align-items:center}
.actmenu .acct{margin:0 6px 10px}
.actmenu .acctbtns{margin:0 6px 12px}

/* ---------- onboarding checklist ---------- */
.onb{margin:4px 20px 18px;padding:14px 14px 6px;border-radius:14px;background:var(--surface);border:1px solid var(--line)}
.onbhead{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;margin-bottom:8px}
.onbhead b{font-weight:600}
.onbhead button{font-size:12px;color:var(--muted)}
.onbhead button:hover{color:var(--ink)}
.onb ol{list-style:none;margin:0;padding:0}
.onb li{display:flex;align-items:flex-start;gap:11px;padding:8px 0;border-top:1px solid var(--line-soft);font-size:13px}
.onb li:first-child{border-top:none}
.onb .tick{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:11px;font-weight:700;
  border:1.5px solid var(--line);color:var(--muted);margin-top:1px}
.onb li.done .tick{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.onb li.done .t{color:var(--muted)}
.onb .t{font-weight:500}
.onb .d{font-size:12px;color:var(--muted);margin-top:1px}
.onb .d a,.onb .d button{color:var(--accent);font-weight:600;font-size:12px;text-decoration:none}
.onb .d a:hover,.onb .d button:hover{text-decoration:underline}
.onbshow{margin:0 20px 16px;font-size:12px;color:var(--muted)}
.onbshow:hover{color:var(--ink)}
.pickfoot{padding:0 20px 18px;margin:0}

/* visually hidden, read by screen readers */
.onb .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- wrong-network bar (the prototype's banner) ---------- */
.banner.walletbar button.copy{font-size:11.5px;color:var(--ink-2);margin-left:6px;line-height:1.3}
.banner.walletbar button.copy:hover{color:var(--accent)}

@media(max-width:620px){
  .connect.restoring{min-width:96px}
  .connect.warn{padding:9px 14px}
  .connect.warn .wide{display:none}
  .connect.warn .narrow{display:inline}
}
@media (prefers-reduced-motion:reduce){
  .connect.restoring::after{animation:none}
}

/* ---------- picker look: rounded cards, pill actions, a soft accent glow (matches the transaction sheet) ---------- */
.ovl:has(> .walletpick){background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:txfade .2s ease-out}
.pick.walletpick{position:relative;border-radius:28px;max-height:min(760px,90vh);
  /* A shade lighter than the page and the cards behind it, so the sheet reads as its own layer. */
  background:radial-gradient(120% 60% at 50% -10%,var(--accent-dim),transparent 60%),var(--surface-2);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px var(--line),0 0 60px -30px var(--glow);
  border:none;animation:txrise .22s cubic-bezier(.2,.8,.2,1)}
.walletpick .pickhead{padding:24px 24px 16px}
.walletpick .pickhead h2{font-size:20px;letter-spacing:-.02em}
.walletpick .pickhead button{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:var(--surface-2)}
.walletpick .pickhead button:hover{background:var(--surface-3)}
.walletpick .picklbl{padding:6px 24px 10px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.walletpick .picklist{display:flex;flex-direction:column;gap:8px;padding:0 16px 12px}
.walletpick .prow{padding:12px 14px;border-radius:18px;background:var(--raise);border:1px solid var(--line);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease}
.walletpick .prow:not(:disabled):hover{background:var(--surface);border-color:var(--accent);transform:translateY(-1px);
  box-shadow:0 8px 24px -12px var(--glow)}
.walletpick .prow:disabled{background:transparent;border-style:dashed}
.walletpick .prow:disabled:hover{background:transparent}
.walletpick .prow .mini.wmini{width:42px;height:42px;border-radius:14px;font-size:13px}
.walletpick .prow .mini.wmini.on{background:linear-gradient(140deg,var(--accent),var(--brand));color:var(--accent-ink);
  box-shadow:0 6px 16px -8px var(--glow)}
.walletpick .prow .a{font-size:15px;font-weight:600}
.walletpick .prow .r .go{display:inline-block;padding:7px 14px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:12.5px}
.walletpick .prow.busy .r .go{background:var(--surface-3);color:var(--muted)}
.walletpick .prow .r .soon{padding:4px 10px}
.walletpick .picknote{margin:0 16px 14px}
.walletpick .picknote .proof{border-radius:18px}
.walletpick .acct{margin:0 16px 12px;border-radius:18px}
.walletpick .acctbtns{margin:0 16px 16px}
.walletpick .acctbtns .ghost{border-radius:999px}
.walletpick .onb{margin:6px 16px 18px;border-radius:20px;padding:16px 16px 8px}
.walletpick .onb .tick{width:22px;height:22px}
.walletpick .pickfoot{padding:0 24px 22px}
@media(max-width:620px){
  .ovl:has(> .walletpick){place-items:end stretch;padding:0}
  .pick.walletpick{max-width:none;border-radius:28px 28px 0 0;max-height:92vh;max-height:92dvh;padding-bottom:env(safe-area-inset-bottom);
    animation:txup .26s cubic-bezier(.2,.8,.2,1)}
}
@media (prefers-reduced-motion:reduce){
  .walletpick .prow:not(:disabled):hover{transform:none}
}

/* ---------- wallet logos: the PNG itself, no tile behind it ---------- */
.walletpick .prow .mini.wmini.haslogo,.walletpick .prow .mini.wmini.haslogo.on,.acct .mini.wmini.haslogo{
  background:transparent;box-shadow:none;border-radius:0;padding:0;overflow:visible}
.mini.wmini.haslogo img{width:100%;height:100%;display:block;object-fit:contain}
.walletpick .prow .mini.wmini.haslogo img{width:42px;height:42px}
.acct .mini.wmini.haslogo img{width:36px;height:36px}
.prow:disabled .mini.wmini.haslogo img{filter:grayscale(1);opacity:.5}
.acct .mini.wmini{width:36px;height:36px}
/* ---------- watchlist star ---------- */
.wstar{display:inline-grid;place-items:center;width:30px;height:30px;padding:0;line-height:0;border-radius:999px;color:var(--muted);flex:none;
  background:transparent;border:1px solid transparent;transition:color .15s,border-color .15s,background .15s}
/* A star's points carry its weight low: lifted by a pixel so it reads centred in its circle. */
.wstar svg{width:17px;height:17px;display:block;transform:translateY(-1px)}
.wstar:hover{color:var(--accent);border-color:var(--line)}
.wstar.on{color:var(--warn)}
.wstar:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* On a token card: over the thumbnail's top right corner (the badge sits top left). */
.tcardwrap{position:relative;display:flex;min-width:0}
.tcardwrap > .tcard{flex:1;min-width:0}
.tcardwrap:hover > .tcard{border-color:var(--accent)}
.wstar.oncard{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.45);color:#fff;border-color:transparent}
.wstar.oncard.on{color:var(--warn)}
.wstar.oncard:hover{background:rgba(0,0,0,.6)}
@media(max-width:620px){.wstar.oncard{top:12px;right:12px;width:26px;height:26px}.wstar.oncard svg{width:15px;height:15px}}

/* In the token page title and in search results. */
.thero-title .wstar{width:34px;height:34px;border-color:var(--line)}
.srch-opt .wstar{margin-left:auto}

/* Watchlist panels (the owner's Watchlist tab, and /portfolio without a wallet). */
.wlsync{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:12.5px;color:var(--muted);margin:4px 0 14px}
.wlsync label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.wlsync .warntext{color:var(--warn)}
.wlsync button{font-size:12.5px;font-weight:600;color:var(--accent)}
.ptable .wstar{width:28px;height:28px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/*
 * The top bar's search sheet: a centred panel under the header on desktop, a full-width sheet from the top on
 * phones (the header itself only gains one 40 px icon button). Colours are the tokens of tokens.css.
 */
.srch-ovl{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.45);display:flex;justify-content:center;align-items:flex-start;padding:72px 16px 16px;box-sizing:border-box}
.srch-sheet{width:min(640px,100%);max-height:min(620px,calc(100vh - 96px));display:flex;flex-direction:column;background:var(--raise);
  border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden}
.srch-bar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.srch-glyph{display:inline-flex;color:var(--muted)}
.srch-glyph svg{width:20px;height:20px}
.srch-bar input{flex:1;min-width:0;height:36px;border:none;outline:none;background:none;color:var(--ink);font:inherit;font-size:16px}
.srch-bar input::-webkit-search-cancel-button{display:none}
.srch-close{flex:none;height:28px;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:12px;cursor:pointer}
.srch-cancel{display:none}
.srch-body{overflow-y:auto;padding:6px 8px 10px}
.srch-list,.srch-list ul{list-style:none;margin:0;padding:0}
.srch-group{margin-top:6px}
.srch-ghead{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.srch-ghead button{background:none;border:none;color:var(--muted);font:inherit;text-transform:none;letter-spacing:0;cursor:pointer}
.srch-ghead button:hover{color:var(--accent)}
.srch-opt{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;cursor:pointer;min-width:0}
.srch-opt.on{background:var(--surface-2)}
.srch-thumb{width:30px;height:30px;flex:none;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;font-weight:700;color:#fff;object-fit:cover}
.srch-recent{width:30px;height:30px;flex:none;display:inline-grid;place-items:center;color:var(--muted);font-size:16px}
.srch-main{display:grid;min-width:0}
.srch-main b{display:flex;align-items:center;gap:6px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srch-sub{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srch-state{padding:10px 12px 4px;font-size:13px;color:var(--muted);line-height:1.45}
.srch-state:empty{display:none}
@media(max-width:620px){
  .srch-ovl{padding:0;align-items:stretch;background:var(--ground)}
  .srch-sheet{width:100%;max-height:none;height:100%;border:none;border-radius:0;box-shadow:none}
  .srch-bar{padding:10px 12px}
  /* A phone has no Escape key: the close button reads Cancel, in a 44 px tap target (mobile audit M-9). */
  .srch-close{height:44px;padding:0 6px;border:none;background:none;color:var(--accent);font-size:15px;font-weight:600}
  .srch-close .srch-esc{display:none}
  .srch-close .srch-cancel{display:inline}
}
/* ---------- header alerts bell ---------- */
.alwrap{position:relative;flex:none}
.bellbtn{position:relative}
.bellbadge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:grid;place-items:center;
  font-size:10.5px;font-weight:700;background:var(--accent);color:var(--accent-ink);box-shadow:0 0 0 2px var(--raise)}
.alertmenu{right:-60px}
/* Phones: full width under the header's first row. Anchored to the header, not the screen (it was `fixed` at 64 px
   from the top, so with the banners above the header it covered the bell itself; mobile audit M-10). */
@media(max-width:620px){
  header .wrap{position:relative}
  header .alwrap{position:static}
  header .alertmenu{position:absolute;left:12px;right:12px;top:66px;width:auto}
}
.alertmenu .acthead .spacer{flex:1}
.allink{font-size:12px;font-weight:600;color:var(--accent)}
.allink:hover{text-decoration:underline}
.alrow.unread .actt .a{font-weight:650}
.alrow .actt .b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.aldot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.alfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 0}
.alfoot .hint{padding:0}
.alsignin{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 10px 8px;padding:8px 10px;border-radius:8px;background:var(--surface-2)}
.alsignin .hint{padding:0;margin:0}
.alsignin .allink{flex:none}
p.alsignin{display:block}

.alsettings{display:flex;flex-direction:column;gap:10px;padding:2px 10px 6px;max-height:min(520px,70vh);overflow-y:auto}
.alhead{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.alcheck{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13.5px}
.alcheck input{margin-top:3px;accent-color:var(--accent)}
.alcheck > span{display:flex;flex-direction:column;gap:1px}
.alcheck .hint{font-size:11.5px;padding:0}
.alnote{color:var(--warn)}
.althreshold{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.althreshold input{width:64px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:0 8px;font:inherit}
/* Phones: 16 px, below which iOS Safari zooms the page in on focus (mobile audit M-4). */
@media(max-width:900px){.althreshold input{font-size:16px}}
.altoasts{bottom:auto;top:84px}
@media(max-width:900px){.altoasts{top:auto;bottom:calc(84px + env(safe-area-inset-bottom))}}
/* Room for the bell on phones: the account button drops the network prefix of its address. */
@media(max-width:480px){header .connect .addrpfx{display:none}}
/* A token's logo in the inbox and the toasts; white behind transparent PNGs, like token cards. */
img.altok{background:#fff;object-fit:cover}
/* The leaderboard (screens/Leaderboard.tsx). */
/* The boards above the window, together on the right of the title; the window keeps its place when the
   followers board (which has none) is chosen, so the boards do not jump. */
.lb .lbctl{display:grid;gap:8px;justify-items:end}
.lb .lbtabs .seg{display:flex;flex-wrap:wrap}
/* The window: a small pill under the boards, right-aligned. */
.lb .lbwin{min-height:30px}
.lb .lbwin .seg{display:inline-flex;padding:3px}
.lb .lbwin .seg button{padding:4px 10px;font-size:12px}
@media(max-width:900px){
  .lb .lbctl{margin-left:0;width:100%;justify-items:stretch}
  .lb .lbwin{justify-self:start}
  .lb .lbtabs .seg{flex-wrap:nowrap}
  .lb .lbtabs .seg button{flex:1 1 0;min-width:0;text-align:center}
}
/* Phones: the four boards on one line, with their short names. */
@media(max-width:620px){
  .lb .lbtabs .seg{flex-wrap:nowrap}
  .lb .lbtabs .seg button{flex:1 1 0;min-width:0;padding:6px 4px;font-size:12.5px;text-align:center}
  .lb .lbtabs .seg .segfull{display:none}
  .lb .lbtabs .seg .segshort{display:inline}
}
.lblist{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.lbrow{display:grid;grid-template-columns:30px 34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 8px;border-radius:12px}
.lbrow:hover{background:var(--surface-2)}
.lbrow.mine{background:var(--accent-dim)}
.lbrank{color:var(--muted);text-align:center;font-size:13px}
.lbwho{min-width:0}
.lbwho a{color:var(--ink);font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.lbwho a:hover{color:var(--accent)}
.lbwho .pairchip{margin-left:6px}
.lbsub{color:var(--muted);font-size:12px;margin-top:2px}
.lbval{text-align:right}
.lbval .pos{color:var(--ok)}
.lbval .neg{color:var(--bad)}
.lbmore{margin:12px auto 0;display:block;height:40px}
.lbme{margin-top:14px;padding-top:10px;border-top:1px solid var(--line-soft)}
.lbnote{margin:12px 4px 0}
.skl-row{grid-template-columns:1fr}
@media(max-width:640px){
  .lbrow{grid-template-columns:20px 30px minmax(0,1fr) auto;gap:10px}
  .lbwho a{font-size:13.5px}
  .lbpfx{display:none}
  .lbrow .lbwho a,.lbrow .lbwho .lbsub{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* Narrow phones (mobile audit M-8): the figure column took its full width ("+614,234.82 KAS") and left the trader's name
   a few characters ("qry4……"). The name keeps at least 76 px; the KAS line under the profit wraps instead. */
@media(max-width:400px){
  .lbrow{grid-template-columns:20px 30px minmax(76px,1fr) minmax(0,auto);gap:8px}
  .lbval{min-width:0}
  .lbval .lbmain{white-space:nowrap}
}

.lbpanel{margin-top:6px}
.lbboard{padding-top:4px;gap:7px}
.lbpanel .lbrow{background:color-mix(in srgb,var(--surface-2) 70%,transparent);padding:9px 16px;border-radius:12px}
.lbpanel .lbrow:hover{background:var(--surface-3)}
.lbpanel .lbrow.mine{background:var(--accent-dim)}
@media(max-width:640px){
  .lbpanel .lbrow{padding:10px 12px}
}

/* The top three: the medal colour on the border, a tint, and the rank. */
.lbrow.medal{--medal:#AEB4BE;border:1px solid color-mix(in srgb,var(--medal) 55%,transparent);
  background:linear-gradient(100deg,color-mix(in srgb,var(--medal) 16%,transparent),transparent 70%),color-mix(in srgb,var(--surface-2) 70%,transparent)}
.lbpanel .lbrow.medal{background:linear-gradient(100deg,color-mix(in srgb,var(--medal) 16%,transparent),transparent 70%),color-mix(in srgb,var(--surface-2) 70%,transparent)}
.lbrow.medal.m1{--medal:#E3B34C}
.lbrow.medal.m3{--medal:#C98A55}
.lbrow.medal .lbrank{color:var(--medal);font-weight:700}
.lbrow.medal .crav{box-shadow:0 0 0 2px var(--raise),0 0 0 3.5px var(--medal)}

/* A row's figure: the profit, larger than the return under it. */
.lbval .lbmain{font-size:17px;font-weight:600}
.lbval .lbsub{font-size:11.5px}
/*
 * Creator rewards: the owner's Launches tab of the trader page (summary tiles, the per-token table that becomes cards under 640 px
 * through the shared `.ptable` rules), the detail drawer, the claim sheet's list (inside `tx.css`'s sheet) and the
 * token page's creator chip. Colours are the tokens of tokens.css; nothing scrolls sideways at 375 px.
 */
.crtab{display:grid;gap:16px}
.tiles.crtiles{margin-bottom:2px;grid-template-columns:repeat(4,minmax(0,1fr))}
.crtiles .tile{position:relative;min-width:0}
.crtiles .tile .v{font-size:34px;overflow-wrap:anywhere}
.crtiles .tile .v .u{font-size:15px;font-weight:500;color:var(--muted);margin-left:7px;letter-spacing:0}
@media(max-width:1100px){
  .tiles.crtiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crtiles .tile:nth-child(3){border-left:none}
  .crtiles .tile:nth-child(n+3){border-top:1px solid var(--line)}
}
@media(max-width:760px){.tiles.crtiles{grid-template-columns:1fr}.crtiles .tile{border-left:none}}
@media(max-width:560px){.crtiles .tile .v{font-size:30px}}
.crclaimall{height:36px;margin-top:12px;padding:0 18px}
.crclaimall:disabled{opacity:.45;cursor:not-allowed}
.crtable .crrow{cursor:pointer}
.crtable .pairsub .chip2{padding:0 5px;font-size:11px}
.crtable td:first-child{min-width:240px}
.crpos{color:var(--accent)}
.crrate{font-size:12px}
.crnote{margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--muted);max-width:420px;white-space:normal}
.crnote.placeholder,.crnote.awaiting-graduation{color:var(--warn)}
.crprog{margin-top:6px;display:grid;gap:4px;justify-items:end}
.crprog-bar{width:120px;max-width:100%;height:6px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.crprog-bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.crfoot{margin-top:4px}
@media(max-width:640px){
  .crtable td:first-child{min-width:0}
  .crprog{justify-items:start}
  .crnote{max-width:none}
}

/* ---------- detail drawer: from the right on desktop, a bottom sheet on phones ---------- */
.crdrawer-ovl{place-items:stretch end;padding:0}
.crdrawer{position:relative;background:var(--raise);border-left:1px solid var(--line);width:min(520px,100%);height:100%;overflow-y:auto;
  padding:22px 24px 32px;outline:none;box-sizing:border-box}
.crdrawer .txgrab{display:none}
.crd-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.crd-name{flex:1;min-width:0}
.crd-name h2{font-size:20px;margin:0;overflow-wrap:anywhere}
.crd-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:6px 0 10px}
.crd-figs > div{background:var(--surface-2);border-radius:12px;padding:10px 12px;min-width:0}
.crd-figs .k{font-size:11.5px;color:var(--muted)}
.crd-figs .v{font-size:15px;margin-top:2px;overflow-wrap:anywhere}
.crd-claim{height:40px;width:100%;margin:6px 0 4px}
.crd-open{height:40px;width:100%;margin-top:12px}
.crd-sub{font-size:15px;margin:22px 0 10px}
.creatorchart{height:200px}
.crd-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12px;color:var(--ink-2);margin-top:8px}
.crd-legend .lg{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:-4px}
.crd-legend .lg.curve{background:var(--accent)}
.crd-legend .lg.pool{background:var(--muted)}
.crd-payouts{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.crd-payouts li{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:10px 12px;border-top:1px solid var(--line-soft);font-size:13px}
.crd-payouts li:first-child{border-top:none}
.crd-payouts .when{color:var(--muted);white-space:nowrap}
.crd-payouts .amt{color:var(--accent);white-space:nowrap}
@media(max-width:900px){
  .crdrawer-ovl{place-items:end stretch}
  .crdrawer{width:100%;height:auto;max-height:88vh;max-height:88dvh;border-left:none;border-top:1px solid var(--line);border-radius:24px 24px 0 0;padding:14px 16px 28px}
  .crdrawer .txgrab{display:block}
}
@media(max-width:420px){
  .crd-payouts li{grid-template-columns:1fr auto;row-gap:2px}
  .crd-payouts .src{grid-column:1}
}

/* ---------- claim sheet: one line per claim ---------- */
.claimlist{list-style:none;margin:12px 0 4px;padding:0;display:grid;gap:8px}
.claimlist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--surface-2);border-radius:14px;padding:10px 12px}
.claimlist .cl-main{min-width:0}
.claimlist .cl-a{font-size:13.5px}
.claimlist .cl-src{color:var(--muted);font-size:12px}
.claimlist .cl-b{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.claimlist .cl-v{font-size:13px;white-space:nowrap}
.claimlist li[data-state="accepted"] .cl-v{color:var(--accent)}
.claimlist li[data-state="failed"] .cl-b,.claimlist li[data-state="skipped"] .cl-b{color:var(--warn)}

/* ---------- token page: the creator's chip under the header ---------- */
.crchip{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;margin:10px 0 0;padding:6px 8px 6px 12px;border-radius:999px;
  background:var(--accent-dim);color:var(--ink);font-size:13px;max-width:100%;box-sizing:border-box}
.crchip b{color:var(--accent);font-weight:600}
.crchip button{height:28px;padding:0 12px;border-radius:999px}

/* ---------- the account menu's link to the Creator tab ---------- */
.acctlink{display:block;margin:0 20px 12px;padding:10px 12px;border-radius:12px;background:var(--surface-2);color:var(--ink);font-size:13.5px;text-decoration:none}
.acctlink:hover{color:var(--accent)}
.actmenu .acctlink{margin:0 6px 10px}
/* stacked account links (My profile, Creator rewards) sit closer together */
.acctlink + .acctlink{margin-top:-6px}
.walletpick .acctlink{margin:0 16px 12px}

/* ---------- creator identity: avatar, the token page's byline, the public creator page ---------- */
.crav{display:inline-block;flex:none;border-radius:50%;overflow:hidden;vertical-align:middle}
.crav img{width:100%;height:100%;object-fit:cover;display:block}
.crby{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.crby:hover{color:var(--accent)}
.crby-name{font-weight:500;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crprofile{display:grid;gap:18px}
.crp-head{display:flex;gap:18px;align-items:center;min-width:0}
.crp-id{min-width:0}
.crp-id h1{margin:0;font-size:28px;overflow-wrap:anywhere}
.crp-addr{font-size:12px;color:var(--muted);overflow-wrap:anywhere;margin-top:4px}
.crp-x{margin-top:8px;font-size:13.5px}
.crp-x a{color:var(--accent);text-decoration:none}
.crp-record{grid-template-columns:repeat(3,minmax(0,1fr))}
.crp-record .tile .v{font-size:32px}
.crp-record .tile .v .u{font-size:15px;font-weight:500;color:var(--muted);margin-left:7px}
.crp-tokens{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.crp-token{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;padding:12px 14px;
  border:1px solid var(--line);border-radius:14px;background:var(--raise);color:inherit;cursor:pointer}
.crp-token:hover{border-color:var(--accent)}
.crp-tname{display:grid;min-width:0}
.crp-tname b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crp-tfig{display:grid;justify-items:end}
@media(max-width:560px){
  .crp-head{flex-direction:column;align-items:flex-start}
  .crp-record{grid-template-columns:1fr}
  .crp-record .tile{border-left:none;border-top:1px solid var(--line)}
  .crp-record .tile:first-child{border-top:none}
  .crp-tokens{grid-template-columns:1fr}
}

/* ---------- the Creator tab's profile strip and editor ---------- */
.crme{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--raise)}
.crme-id{flex:1;min-width:0}
.crme-id b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crme .ghost{height:36px;padding:0 14px}
.crme-link{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-size:13.5px;background:none}
.crme-link:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:560px){
  .crme-id{flex:1 1 calc(100% - 56px)}
  .crme .ghost,.crme .crme-link{flex:1;justify-content:center}
}
.prform{display:grid;gap:12px;margin-top:8px}
.prform label{display:grid;gap:6px;font-size:13px;color:var(--ink-2)}
.prform input[type=text]{height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);padding:0 12px;font:inherit}
/* Phones: 16 px, below which iOS Safari zooms the page in on focus (mobile audit M-4). */
@media(max-width:900px){.prform input[type=text]{font-size:16px}}
.prform .prpic{display:flex;align-items:center;gap:12px}
.prform .hint{margin:0}
/* CR-5: what is not paid yet, apart from what was paid, and when it pays. */
.crexplain{margin:10px 2px 16px;font-size:13px;line-height:1.5;max-width:860px}
.crd-waiting{font-size:13px;line-height:1.5;margin:4px 0 10px}
.crchip-unpaid{color:var(--muted);cursor:help}
/*
 * The trader page (`/u/:address`, also the connected wallet's own page): identity row, follow counts and button, the
 * value card with its chart, the owner's figures and the "View as visitor" bar, the Holdings table (cards under 640 px through the shared `.ptable` rules), the follow list sheet. Colours are the
 * tokens of tokens.css; nothing scrolls sideways at 390 px.
 */
.uprof{display:grid;gap:20px}
.up-head{display:flex;gap:18px;align-items:center;min-width:0}
.up-id{flex:1;min-width:0;display:grid;gap:6px}
.up-id h1{margin:0;font-size:28px;display:flex;align-items:center;gap:10px;min-width:0}
.up-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.up-sub{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:13px;color:var(--ink-2);min-width:0}
.up-addr{color:var(--muted)}
.up-icon{display:inline-flex;align-items:center;justify-content:center;height:28px;min-width:28px;padding:0 8px;border-radius:999px;
  border:1px solid var(--line);background:none;color:var(--ink-2);font-size:12px;text-decoration:none;cursor:pointer}
.up-icon:hover{border-color:var(--accent);color:var(--accent)}
.up-counts{display:flex;gap:16px;font-size:13.5px;color:var(--muted)}
.up-counts button{background:none;border:none;padding:0;color:inherit;font:inherit;cursor:pointer}
.up-counts button:disabled{cursor:default}
.up-counts b{color:var(--ink);font-weight:600;margin-right:4px}
.up-counts button:not(:disabled):hover b{color:var(--accent)}
.up-followwrap{display:grid;gap:6px;justify-items:end;flex:none}
.up-follow-btn{height:40px;min-width:112px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;text-decoration:none}
.up-follow-btn.solid{background:var(--accent);color:var(--accent-ink);border:none;font-weight:600}
.up-follow-btn.solid:hover{filter:brightness(1.06)}
.up-follow-btn:disabled{opacity:.5;cursor:not-allowed}
.up-err{max-width:260px;text-align:right;margin:0}

.up-value{border:1px solid var(--line);border-radius:20px;background:var(--raise);padding:18px 20px 12px;display:grid;gap:12px;min-width:0}
.up-vhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.up-vhead .k{font-size:13px;color:var(--muted)}
.up-vhead .v{font-size:38px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.up-vhead .v .u{font-size:16px;font-weight:500;color:var(--muted);margin-left:8px}
.up-vhead .d{font-size:13.5px}
.up-value .lwc{height:240px}
.up-vnote{margin:0}

.up-tcount{color:var(--muted);font-weight:500;margin-left:2px}
.up-htable td:first-child{min-width:200px}
.up-src.curve{background:var(--accent-dim);color:var(--accent)}
.up-src.pool{background:var(--surface-3);color:var(--ink-2)}
.up-launches{display:grid;gap:16px}

.up-flist{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;max-height:60vh;overflow-y:auto}
.up-flist button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:8px 10px;border-radius:12px;background:none;border:none;color:inherit;cursor:pointer}
.up-flist button:hover{background:var(--surface-2)}
.up-fname{display:grid;min-width:0}
.up-fname b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:640px){
  .up-head{flex-wrap:wrap;align-items:flex-start}
  .up-id{flex:1 1 calc(100% - 90px)}
  .up-id h1{font-size:23px}
  .up-followwrap{flex:1 1 100%;justify-items:stretch}
  .up-follow-btn{width:100%}
  .up-err{text-align:left;max-width:none}
  .up-value{padding:14px 14px 10px;border-radius:16px}
  .up-vhead .v{font-size:30px}
  .up-value .lwc{height:200px}
  .up-htable td:first-child{min-width:0}
}
.up-edit-btn{background:var(--surface-2);color:var(--ink);border:1px solid var(--line);font-weight:600;cursor:pointer}
.up-edit-btn:hover:not(:disabled){border-color:var(--accent);color:var(--ink)}

/* The owner's view of this page (screens/profile/panels.tsx): small figures under the value chart, the counting notes
   behind a toggle, Edit profile beside View as visitor, and the bar that says the owner is viewing as a visitor. */
.pfstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:14px 0 4px}
.pffig{padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);min-width:0}
.pffig .k{font-size:12px;color:var(--muted)}
.pffig .v{font-size:21px;font-weight:600;margin:3px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pffig .v .u{font-size:12px;color:var(--muted);font-weight:500}
.pffig .d{font-size:12px;color:var(--muted)}
.pfinfo{margin:10px 0 0;font-size:12.5px;color:var(--muted)}
.pfinfo summary{cursor:pointer;width:max-content;color:var(--ink-2)}
.pfinfo summary:hover{color:var(--accent)}
.pfinfo p{margin:8px 0 0;line-height:1.5}
.up-ownerbtns{display:flex;flex-direction:column;gap:8px;align-items:stretch}
/* Scoped under .up-ownerbtns so the generic `.ghost` (components.css, loaded later) cannot repaint it: a pill the height
   of Edit profile, accent text on the accent tint. */
.up-ownerbtns .up-publink{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;
  border-radius:999px;color:var(--accent);background:var(--accent-dim);border:1px solid transparent;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.up-ownerbtns .up-publink:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:620px){.up-ownerbtns{flex-direction:row}}
.up-preview{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin:0 0 14px;padding:10px 14px;
  border-radius:12px;background:var(--accent-dim);color:var(--ink);font-size:13.5px}
.up-preview button{height:34px;padding:0 14px;border-radius:999px;font-weight:600}

/*
 * Holdings on phones (audit 2026-10-18, P-5): one line per holding (the token, its value and P&L, a chevron); the
 * chevron opens the row's balance, price, value, source, P&L, share and actions under it. Desktop keeps the table
 * (the summary cell is hidden there).
 */
.up-htable td.up-hsum{display:none}
@media(max-width:640px){
  table.pool.up-htable tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px 14px;padding:10px 12px 10px 14px}
  table.pool.up-htable td:first-child{grid-column:1;grid-row:1;align-self:center}
  table.pool.up-htable td.up-hsum{display:block;grid-column:2;grid-row:1;justify-self:end;align-self:center}
  table.pool.up-htable tr:not(.open) td:not(:first-child):not(.up-hsum){display:none}
  table.pool.up-htable tr.open td.pactcell{grid-column:1 / -1}
  .up-hexp{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 2px 0 8px;border-radius:10px;color:var(--ink);text-align:right}
  .up-hsv{display:grid;justify-items:end;gap:1px;font-size:14.5px;font-weight:600}
  .up-hsv .pnl{font-size:12px;font-weight:500}
  .up-hchev{color:var(--muted);transition:transform .2s}
  .up-hexp[aria-expanded="true"] .up-hchev{transform:rotate(180deg)}
  .up-hexp:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
}
@media (prefers-reduced-motion:reduce){.up-hchev{transition:none}}
/*
 * 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;
  --buy:#3FB950; --sell:#F85149;
  --buy-ink:#04170A; --sell-ink:#1E0604; --buy-dim:rgba(63,185,80,.14); --sell-dim:rgba(248,81,73,.14);
  --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:#596669;
  --accent:#08776B; --accent-ink:#FFFFFF; --accent-dim:rgba(8,119,107,.12);
  --ok:#08776B; --warn:#996213; --bad:#B4453A;
  --buy:#1A7F37; --sell:#CF222E;
  --buy-ink:#FFFFFF; --sell-ink:#FFFFFF; --buy-dim:rgba(26,127,55,.10); --sell-dim:rgba(207,34,46,.09);
  --glow:rgba(8,119,107,.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 .segshort{display:none}
.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);color:inherit;text-decoration:none;
  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)}
.fsub{margin:16px 4px 2px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.frow.covenant .fdir{background:var(--surface-2);color:var(--muted)}
.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)}
/* Phones: text fields at 16 px, below which iOS Safari zooms the page in on focus (mobile audit M-4). */
@media(max-width:900px){.lin,.prefixed span,.prefixed input,.searchbox input,.picksearch input{font-size:16px}}
.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}
.imgrow{display:flex;gap:10px;align-items:stretch}
.imgrow .imgpick{flex:1;min-width:0}
.imgrow .imgadjust{height:auto;flex:none;padding:0 16px}
.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}
.lhelp.warn{color:var(--warn)}
.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)}
/* A very small price with its zeros counted (components/PriceNum.tsx): `$0.0₅767`. The count sits low and small, as on
   trading screens, drawn from `data-n`; the hidden zeros keep the plain decimal for screen readers and copying. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.zp{white-space:nowrap;position:relative}
.zp .zsub{font-size:.6em;line-height:0;vertical-align:-.32em;margin:0 .06em;letter-spacing:0;font-weight:inherit}
.zp .zsub::before{content:attr(data-n)}
.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}
/* A full id in an empty state ("No indexed token has the covenant id …") wraps instead of widening a phone's page. */
.empty .mono{overflow-wrap:anywhere}

/* Pool rows: the token's short id beside its name (tickers are not unique, audit E2E-4). */
.pairsub .pid{color:var(--muted);font-size:11px;margin-left:6px}

/* A USD figure without a fresh KAS/USD price: dimmed placeholder, the reason in its tooltip. */
.usd-off{opacity:.55;cursor:help}

/* Analytics: the $SEAL buyback & burn panel. */
.burn .burnhead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 14px; margin-top: 8px; }
.burn .burnhero .v { font-size: 34px; }
.burn .burnusd { color: var(--text); font-weight: 700; }
.burn .burnwin { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.burn .burnwin .seg { flex-wrap: wrap; }
.burn .burnstats, .burn .burnfacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.burn .burnfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0; }
.burn .burnstats > div, .burn .burnfacts > div { background: var(--surface2, var(--surface)); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.burn dt { color: var(--muted); font-size: 12px; }
.burn dd { margin: 4px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.burn .burnchart { margin: 8px 0 16px; }
.burn .burnchart .lwc { height: 200px; }
.burn .burnpager { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.burn .burnpager .ghost { height: 36px; padding: 0 14px; }
@media (max-width: 760px) {
  .burn .burnhead { grid-template-columns: 1fr; }
  .burn .burnstats { grid-template-columns: 1fr; gap: 8px; }
  .burn .burnstats > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .burn .burnstats dd { margin: 0; text-align: right; }
  .burn .burnwin .seg { flex-wrap: nowrap; overflow-x: auto; }
  .burn .burnwin .seg button { white-space: nowrap; }
  .burn .burnfacts { grid-template-columns: 1fr; }
  .burn .burnhero .v { font-size: 26px; }
}
.burn .sdesc a { color: var(--accent); text-decoration: underline; }
/* the token's own logo in the trade box's asset chip sits on white, like every token image */
.tsel img.tokmark{background:#fff;object-fit:cover}
/* Explore's search bar opens the search pop-up: a button dressed as the box. */
.searchbox.searchopen{cursor:text;font:inherit;text-align:left;color:var(--muted)}
.searchbox.searchopen .ph{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.searchbox.searchopen:hover{border-color:var(--accent)}
/* Create: a small, faint KAS mark in an empty image tile (the white backing is for uploaded logos only). */
.sumtile img.tileph,.imgtile img.tileph{width:22%;height:22%;object-fit:contain;background:none;opacity:.9}
.sumtile,.imgtile{overflow:hidden}
/* Light theme: the KAS placeholder in black. */
:root[data-theme="light"] .sumtile img.tileph,:root[data-theme="light"] .imgtile img.tileph{filter:brightness(0)}
/* Market cap on the cards and the hill (components/MarketCap.tsx): the dollar figure, then the KAS figure under it. */
.tcap .tcapkas{font-size:11.5px;color:var(--muted);margin-top:1px}
/* Analytics live figures (screens/Analytics.tsx): the tile of a figure that just changed flashes, green when it rose. */
.tile.flash-up0{animation:tileup0 1.4s ease-out}
.tile.flash-up1{animation:tileup1 1.4s ease-out}
.tile.flash-down0{animation:tiledown0 1.4s ease-out}
.tile.flash-down1{animation:tiledown1 1.4s ease-out}
.tile.flash-up0 .v,.tile.flash-up1 .v{color:var(--accent);transition:color .2s}
.tile .v{transition:color 1.2s}
@keyframes tileup0{0%,25%{background:var(--accent-dim)}100%{background:transparent}}
@keyframes tileup1{0%,25%{background:var(--accent-dim)}100%{background:transparent}}
@keyframes tiledown0{0%,25%{background:var(--surface-2)}100%{background:transparent}}
@keyframes tiledown1{0%,25%{background:var(--surface-2)}100%{background:transparent}}
.anlive{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 10px;border-radius:999px;background:var(--accent-dim);
  color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.02em;vertical-align:middle}
.anlive i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:anlive 1.6s ease-in-out infinite}
.anlive.paused{background:var(--surface-2);color:var(--muted)}
.anlive.paused i{background:var(--muted);animation:none}
@keyframes anlive{0%{box-shadow:0 0 0 0 var(--glow)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.anlive i,.tile[class*=flash-]{animation:none}}
.antitle{display:flex;align-items:center;flex-wrap:wrap}
/* Analytics bar charts (screens/Analytics.tsx): the bar under the pointer lights up and a readout names it. */
.barplot{position:relative}
.bars{touch-action:pan-y;cursor:crosshair}
.bars i.on{opacity:1;background:var(--accent);box-shadow:0 0 12px var(--glow)}
.bartip{position:absolute;top:-6px;transform:translate(-50%,-100%);z-index:2;pointer-events:none;display:grid;gap:1px;
  padding:7px 10px;border-radius:9px;background:var(--surface-3);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.35);
  white-space:nowrap;text-align:center}
.bartip[data-edge=start]{transform:translate(-12%,-100%);text-align:left}
.bartip[data-edge=end]{transform:translate(-88%,-100%);text-align:right}
.bartip b{font-size:14px;color:var(--ink)}
.bartip span{font-size:11.5px;color:var(--muted)}
/* A graduated token's line in place of the curve bar (TokenCard.tsx `Progress`), the bar row's height. */
.prog.done{min-height:16px}
.pdone{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.pdone i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
/*
 * 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}}

/* ---------- Leading the Pod + 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)}
/* Phones: the card stays side by side, compact like the token cards (small art left, details right). */
@media(max-width:620px){
  .hillcard{grid-template-columns:104px minmax(0,1fr);gap:14px;padding:8px;border-radius:18px}
  .hillcard .thumb{border-radius:13px}
  .hillcard .thumb .init{font-size:24px}
  .hillcard .thumb .tag{top:6px;left:6px;font-size:9.5px;padding:2px 7px}
  .hillbody{gap:5px;padding:2px 4px 2px 0}
  .hillbody .tname{font-size:15.5px}
  .hillbody .tval{font-size:16px;white-space:nowrap}
  .hillnote{font-size:11px}
  .hill .sdesc{font-size:13px}
}
.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)}
/* Protected-name warning (TM-3): not a button; may wrap on a narrow card. */
.tag.inline.protected-name{cursor:help;white-space:normal;line-height:1.25;padding:2px 8px;margin-left:6px;vertical-align:middle}
.tag.inline.protected-name:hover{filter:none}
.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}
.bigsub .tf + .tf{margin-left:0}
.bigsub .tf + .tf::before{content:"·";margin:0 6px}
/* The trading chart (lightweight-charts) fills its inset; the canvas follows the container, so nothing scrolls sideways. */
.lwc{position:relative;height:300px;min-width:0}
.lwc-canvas{position:absolute;inset:0}
.lwc-skeleton .skl{position:absolute;inset:6px 6px 4px;border-radius:12px}
.lwc-empty{position:absolute;z-index:3;left:50%;top:38%;transform:translate(-50%,-50%);padding:6px 12px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;color:var(--muted);pointer-events:none;white-space:nowrap}
.lwc-tip{position:absolute;top:8px;z-index:3;transform:translateX(12px);padding:8px 10px;border-radius:10px;font-size:11.5px;line-height:1.5;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);pointer-events:none;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.lwc-tip .t{color:var(--muted);margin-bottom:2px}
.lwc-tip .k{color:var(--muted);margin:0 5px 0 0}
.lwc-tip .k:not(:first-child){margin-left:10px}
.lwc-tip .pos{color:var(--ok)}
.lwc-tip .neg{color:var(--bad)}
.lwc-tip .n{color:var(--muted);font-size:10.5px;margin-top:2px}
.curveunit{font-size:11.5px;color:var(--muted);margin-top:4px}
.tabsrow .vwapbtn{margin-left:auto;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:500;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line)}
.tabsrow .vwapbtn[aria-pressed="true"]{color:var(--warn);border-color:var(--warn)}
@media(max-width:560px){
  .lwc{height:240px}
  .chartcard .tabpills button{padding:7px 10px;font-size:13px;white-space:nowrap}
  .bigrow .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .bigrow .seg::-webkit-scrollbar{display:none}
  .bigrow .seg button{flex:none;padding:6px 11px}
}
.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}
.feedpager{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line-soft);padding-top:12px}
.feedpager .back{margin:0;min-width:36px;padding:6px 10px}
.feedpager .pnum[aria-current="page"]{background:var(--surface-3);color:var(--ink)}
.feedpager .pgap{color:var(--muted);padding:0 2px}
.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}
}

/* The language button's mark (EN, 简, 繁) in the site font, the icons' colour. */
header .langmark{font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:700;font-size:13px;line-height:1;letter-spacing:.06em;color:var(--ink-2);text-decoration:none;flex:none}
header span.langmark{cursor:default;user-select:none}
header span.langmark:hover{border-color:var(--line);color:var(--ink-2)}

/* ---------- narrow screens (tablets and phones): the nav pill takes its own full-width row under the logo and
   wallet, so the header never runs past the page edge or squeezes a connected account; it scrolls sideways
   rather than widening the page (375 px rule) ---------- */
@media(max-width:1080px){
  header .wrap{flex-wrap:wrap;height:auto;row-gap:14px;column-gap:10px;padding-top:12px;padding-bottom:0}
  #app > :first-child{margin-top:18px}
  header .navpill{order:10;flex:1 0 100%;min-width:0;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
  header .navpill::-webkit-scrollbar{display:none}
  /* Each tab keeps its whole label and the row scrolls sideways when they do not all fit. */
  header .navpill button{flex:1 0 auto;padding:7px 8px;font-size:13.5px;text-align:center;white-space:nowrap}
  header .lag,header .iconbtn,header .connect{flex:none}
}
/* Phones: Portfolio leaves the tab row (it stays in the account menu), so the other five fit on one line; the language
   button shows on Explore only (where there is no search button), so Connect keeps its place on the first row. */
@media(max-width:620px){
  header .phonehide{display:none}
  header .navpill button[data-nav="portfolio"]{display:none}
}
@media(max-width:389px){
  header .navpill button{padding:7px 5px}
  /* Small phones: slightly smaller round buttons, so Connect stays on the first row. */
  header .wrap{column-gap:6px}
  header .iconbtn{width:36px;height:36px}
  header .iconbtn svg{width:20px;height:20px}
  header .brand .logo{width:40px;height:40px}
}

/*
 * 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}}

/*
 * The trader page's tables (phase4-plan.md section 3.4): the pool table
 * (`.ptable-wrap`, `table.pool`, `.pair`, `.chip2`) and the feed card's
 * tabs. Every rule below is built from the prototype's tokens.
 */
.pnl.gain{color:var(--ok)}
.pnl.loss{color:var(--bad)}
.pmuted{color:var(--muted)}
.pwarntext{color:var(--warn)}
.ptable td{vertical-align:middle}
.ptable .pairsub{white-space:nowrap}
.pair:hover .pairname{color:var(--accent)}
.chip2.pwarn{margin:5px 0 0;background:rgba(232,179,60,.13);color:var(--warn)}
.chip2.pmerging{margin:5px 0 0;background:var(--accent-dim);color:var(--accent)}
.pacts{display:flex;gap:8px;justify-content:flex-end}
.ghost.pact{height:34px;padding:0 14px;border-radius:10px;font-size:13px}
.ghost.pact.warn{border-color:var(--warn);color:var(--warn)}
.ghost.pact:disabled{opacity:.45;cursor:not-allowed}
.ghost.pact:disabled:hover{border-color:var(--line)}
.plink{padding:0;font-weight:inherit}
.plink:hover{color:var(--accent)}
.pfpanel{padding-top:8px}
.pfsub{font-size:17px;margin:24px 0 4px}
/* Narrow screens: each table row becomes a two-column block, labelled from `data-k` (375 px rule, no sideways scroll). */
@media(max-width:640px){
  .ptable thead{display:none}
  .ptable,.ptable tbody{display:block;width:100%}
  .ptable tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 14px;padding:14px 16px;border-top:1px solid var(--line-soft)}
  .ptable tr:first-child{border-top:none}
  table.pool.ptable td{display:block;padding:0;border-top:none;white-space:normal;text-align:left;min-width:0}
  table.pool.ptable tr:hover td{background:none}
  .ptable td:first-child,.ptable td.pactcell{grid-column:1/-1}
  .ptable td[data-k]::before{content:attr(data-k);display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
  .ptable .pairsub{white-space:normal}
  .ptable .skl{margin-left:0!important}
  .pacts{justify-content:stretch}
  .pacts .pact{flex:1;justify-content:center}
}

/*
 * Analytics (phase4-plan.md, `/analytics`): the prototype's analytics section (`.anhead`, `.anctl`, `.tiles`, `.anfoot`),
 * its `.anpair` chart sections (`.barhead`, `.barbox`, `.bars`) and the pool table for the leaderboards. Every rule below
 * is built from the prototype's tokens.
 */
.an .tiles.anrow{margin-top:14px}
.an .tiles.anrow2{grid-template-columns:repeat(2,1fr)}
.an .tiles.anrow1{grid-template-columns:1fr}
@media(max-width:760px){.an .tiles.anrow2{grid-template-columns:1fr}}
.an .tile{min-width:0}
.an .tile .v{overflow-wrap:anywhere}
.an .tile .v .u{font-size:15px;font-weight:500;color:var(--muted);margin-left:7px;letter-spacing:0}
@media(max-width:560px){.an .tile .v{font-size:32px}}
.anwarn{color:var(--warn)}
/* Three charts side by side, as the prototype pairs two; one column on narrow screens. */
.anpair.antrio{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.anpair.antrio{grid-template-columns:1fr}}
.anpair.anone{grid-template-columns:1fr}
.anpair > .section{margin:0;min-width:0}
.anpair.anboards{margin-top:0;margin-bottom:22px}
.anpair.antrio{margin-bottom:22px}
.barempty{height:180px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:13px;padding:0 12px}
.barx span{white-space:nowrap}
.anboard .shead{margin-bottom:14px}
.anboard .stitle h2{font-size:19px}
.anaddr{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
/* Phones: the window control takes its own row under the title; the segment scrolls inside itself (375 px rule). */
@media(max-width:620px){
  .an .anhead .anctl{margin-left:0;width:100%}
  .an .anhead .anctl .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .an .anhead .anctl .seg::-webkit-scrollbar{display:none}
  .an .anhead .anctl .seg button{flex:none}
}

/* ---------- footer on phones: Product and Verify side by side; the brand and the risk notice span both columns ---------- */
@media(max-width:520px){
  .fgrid{grid-template-columns:1fr 1fr;gap:26px 18px}
  .fgrid > :first-child,.fgrid > :last-child{grid-column:1 / -1}
  .footer{padding:26px 22px 20px}
}

/* ---------- Explore search row on phones: search and Create share the row; Pool stays in the nav ---------- */
@media(max-width:520px){
  .searchrow .searchbox{min-width:0;padding:0 14px}
  .searchrow .searchbox .kbd{display:none}
  .searchrow #toPool{display:none}
  .searchrow #toCreate{flex:none;padding:0 16px}
}
/* Explore sort and phase tabs on narrow phones: each row scrolls inside itself instead of widening the page. */
@media(max-width:520px){
  .segs{margin-left:0;max-width:100%;min-width:0}
  .segs .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .segs .seg::-webkit-scrollbar{display:none}
  .segs .seg button{flex:none}
}

/* ---------- Explore on phones: no live feed; token grids become two rows of compact cards that swipe sideways ---------- */
@media(max-width:620px){
  .hillrow .tapebox{display:none}
  .section .grid{grid-template-columns:none;grid-auto-flow:column;
    grid-template-rows:auto;grid-auto-columns:calc((100% - 12px) / 2.3);gap:12px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -4px;padding:2px 4px 6px}
  /* One row until there are enough tokens to fill two (5 or more), then two rows. */
  .section .grid:has(> :nth-child(5)){grid-template-rows:repeat(2,auto)}
  .section .grid::-webkit-scrollbar{display:none}
  .section .grid > *{scroll-snap-align:start;min-width:0}
  .section .grid .tcard{padding:8px;gap:7px;border-radius:16px}
  .section .grid .thumb{border-radius:12px}
  .section .grid .thumb .init{font-size:24px}
  .section .grid .tbody{gap:4px;padding:0 2px 2px}
  .section .grid .tname{font-size:13px}
  .section .grid .tsym{font-size:11px}
  .section .grid .tval{font-size:14px}
  .section .grid .foot{font-size:10px}
  .section .grid .foot > :first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .section .grid .foot > :last-child{white-space:nowrap;flex:none;margin-left:6px}
  .section .grid .tval{white-space:nowrap}
  .section .grid .tval span{font-size:9.5px;margin-left:2px}
}

/*
 * Pool (phase4-plan.md section 3.5): the prototype's Pool view (`.phead`, `.pillbtns`, `.connbanner`, `table.pool`,
 * `.pair`, `.duo`, `.chip2`) and its pool-detail stat cards (`.statcard`, `.sblock`, `.balbar`, `.linkrow`) on the
 * token page. Every rule below is built from the prototype's tokens.
 */
.prank{color:var(--muted);font-size:12px;width:18px;flex:none;text-align:right}
.pair[role="link"]:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.pooltable .pairsub .chip2{margin-right:5px}
.duo img:first-child{object-fit:cover}
.poolstats{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}
.poolstats .statcard{margin-bottom:0;min-width:0}
.poolstats .sv{flex-wrap:wrap}
.poolstats .sv .up{font-weight:500}
.poolstats .linkrow .copy,.poolstats .linkrow a.copy{text-decoration:none;white-space:nowrap}
@media(max-width:760px){.poolstats{grid-template-columns:1fr}}
@media(max-width:520px){
  .phead{padding-top:8px}
  .phead h1{font-size:28px}
  .pillbtns .pillbtn{flex:1;justify-content:center;padding:11px 14px;font-size:13.5px}
  .poolstats .sv{font-size:22px}
}
/* Quote lines of a pool swap: the fee split under the label, price impact in amber when large. */
.ql .qnote{display:block;font-size:11px;color:var(--muted);margin-top:2px;font-weight:400}
.ql:has(.qnote) > span:last-child{white-space:nowrap;flex:none;margin-left:10px}
.ql.warnline .v,.ql.warnline .mono{color:var(--warn)}
.ql.warnline > span:first-child{color:var(--warn)}

/*
 * Liquidity (docs/plan/liquidity-plan.md section 8): the "Deposits open" / "Swap only" chip on pool rows and the
 * pool card, the Liquidity tab of the feed card (`.lppanel`: two `.lpcard`s for the pool and the position, the fee
 * display, the Add / Remove pills and a `.spanel` form) and the Portfolio's fourth tile. Built from the prototype's
 * tokens and components only.
 */
.chip2.lpopen{background:var(--accent-dim);color:var(--accent)}
.lppanel{padding-top:4px}
.lphead{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:4px 0 14px}
.lphead .lptitle{margin:0 2px 0 0;font-size:15px;font-weight:600;letter-spacing:-.01em}
.lphead .lpdetail{flex:1 1 100%;font-size:12.5px;color:var(--muted);line-height:1.45}
.lpgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.lpcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-width:0;margin-bottom:12px}
.lpgrid .lpcard{margin-bottom:0}
.lpcard h3{margin:0 0 8px;font-size:14px;font-weight:600;letter-spacing:-.01em}
.lpcard .quote.lpq{border-top:none;margin-top:0;padding-top:0}
.lpcard .hint{margin-top:10px}
.lpmore{margin-top:10px}
.lpmore summary{font-size:12.5px;color:var(--ink-2);cursor:pointer}
.lpmore summary:hover{color:var(--accent)}
.lptabs{margin:14px 0 10px}
.lpform .spanel .lbl{display:flex;align-items:center;justify-content:space-between;gap:10px}
.seg.lpunit{padding:2px;gap:1px}
.seg.lpunit button{padding:4px 10px;font-size:12px}
.lpquick{grid-template-columns:1fr 1fr}
.lpform .cta{margin-top:14px}
.lpform .quote .ql > span:first-child{min-width:0}
@media(max-width:760px){.lpgrid{grid-template-columns:1fr}}
@media(max-width:520px){
  /* Four feed pills and the count no longer fit on one line: the count drops under the pills instead of widening the page. */
  .feed .tabsrow{flex-wrap:wrap}
  .feed .tabsrow .tabpills{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .feed .tabsrow .tabpills::-webkit-scrollbar{display:none}
  .feed .tabsrow .tabpills button{flex:none;padding:7px 11px;font-size:13px}
  .feed .tabsrow .tcount{margin-left:auto}
  .lpform .spanel .amt input{font-size:28px}
  .lpquick{grid-template-columns:1fr}
  .lpform .quote .ql{flex-wrap:wrap}
  .lpform .quote .ql:has(.qnote) > span:last-child{white-space:normal;margin-left:0;flex:1 1 100%;text-align:right}
}

/* ---------- desktop header: the bar's content sits centred in the band between the banner and the page content ---------- */
@media(min-width:621px){
  header .wrap{height:auto;padding-top:24px;padding-bottom:24px}
  #app > :first-child{margin-top:0}
}

/*
 * Pool page (`/pool/:id`, `/pool/:id/add`, `/pool/:id/remove`): the prototype's pool detail (`.crumb`, `.dhead`,
 * `.pdetail`, `.ctabs`, `.tpills`, `.statcard`, `.sblock`, `.balbar`, `.linkrow`, `.actions` with `.pillbtn`) and its
 * transactions table in the pool table's style. Every rule below is built from the prototype's tokens.
 */
.pphead{display:flex;align-items:flex-start;gap:16px 22px;flex-wrap:wrap;margin-bottom:4px}
.pphead .dhead{flex:1 1 420px;min-width:0;margin-bottom:0;align-items:flex-start}
.pphead .duo{width:58px;height:40px;margin-top:2px}
.pphead .duo > *{width:40px;height:40px;font-size:14px}
.pphead .duo > *:last-child{left:18px}
.pphead h1{font-size:26px;letter-spacing:-.025em}
.ppchips{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:8px}
.ppchips .chip2{margin-right:0}
.ppchips .copy{text-decoration:none;white-space:nowrap}
.ppdetail{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45;max-width:70ch}
.ppactions{flex:none;margin:4px 0 0;align-items:center}
.ppactions .pillbtn{flex:none}
.pillbtn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.pprefuse{max-width:260px;font-size:12px;line-height:1.4;color:var(--muted);padding:8px 12px;border:1px dashed var(--line);border-radius:12px}
.ppgrid{padding-top:18px}
.ppmain,.ppaside{min-width:0}
.ppaside .hint{margin-top:0}
.poolchart .ctabs{margin-bottom:14px}
.poolchart .sv{font-size:28px}
.poolchart .sv .svu{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:0}
.poolchart .sk .up,.poolchart .sk .down{margin-left:4px}
.down{color:var(--bad);font-size:12px}
.statcard .snote{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4}
.statcard .sv{flex-wrap:wrap}
.srow{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:3px 0}
.srow > span:first-child{color:var(--ink-2)}
.srow .mono{text-align:right}
.lpcardpos .quote.lpq{border-top:none;margin-top:0;padding-top:0}
.pptx{margin-top:22px}
.pptxhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.pptxhead h2{font-size:17px}
.pptable td a{color:var(--muted);text-decoration:none}
.pptable td a:hover{color:var(--accent)}
.pptable tr.in td{animation:tapein .7s ease-out}
.depth{position:relative;padding:4px 6px 6px}
.depth svg{display:block}
.depthtip{position:absolute;top:8px;left:50%;transform:translateX(-50%);max-width:calc(100% - 24px);padding:7px 10px;border-radius:10px;font-size:11.5px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink);pointer-events:none;text-align:center}
.depthrows{display:grid;gap:6px;margin-top:8px;font-size:12.5px}
.depthrow{display:grid;grid-template-columns:auto auto 1fr auto auto 1fr;gap:4px 8px;align-items:baseline}
.depthrow .pos{color:var(--ok);font-weight:600}
.depthrow .neg{color:var(--bad);font-weight:600}
.lpactions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.openpool{margin:12px 0}.openpool h3{margin:0 0 6px}.openpool .quote{margin:8px 0}.openpool .cta{width:100%}
.lpformhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.lpformhead h1{font-size:24px;letter-spacing:-.025em}
.lpformpair{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:14px}
.lppage .lpform-card{margin-bottom:0;min-width:0}
.lpaside .lpcard{background:var(--raise);border-radius:18px;padding:16px 18px}
@media (prefers-reduced-motion:reduce){.pptable tr.in td{animation:none}}
/* Phones: the actions sit under the header at full width, the cards stack, the chart spans the page (375 px rule). */
@media(max-width:620px){
  .pphead .dhead{flex-basis:100%}
  .pphead h1{font-size:22px}
  .ppactions{width:100%;margin-top:0}
  .ppactions .pillbtn{flex:1;justify-content:center;padding:11px 14px}
  .pprefuse{max-width:none;flex:1}
  .ppdetail{font-size:12px}
  .poolchart{padding:14px}
  .poolchart .ctabs{gap:16px;overflow-x:auto;scrollbar-width:none}
  .poolchart .ctabs::-webkit-scrollbar{display:none}
  .poolchart .ctabs button{flex:none}
  .poolchart .sv{font-size:23px}
  .poolchart .tpills .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .poolchart .tpills .seg button{flex:none}
  .depthrow{grid-template-columns:auto auto 1fr;font-size:12px}
  .lpformhead h1{font-size:21px}
  .lppage .lpform-card{padding:16px}
}
/* Stat labels (`.sk`) share their name with the skeleton block: inside the stat cards and the chart headline they are text. */
.statcard .sk,.poolchart .sk{background:none;overflow:visible}
.statcard .sk::after,.poolchart .sk::after{display:none}
/* Liquidity lines: the note runs under the label and the value at full width. */
.ql.lprow{flex-wrap:wrap;row-gap:0}
.ql.lprow > .qnote{order:3;flex:1 1 100%;margin-top:1px}
.ql.lprow > span:last-child{order:2;white-space:nowrap;margin-left:auto}
.lpform .quote .ql.lprow:has(.qnote) > span:last-child{flex:none;margin-left:auto;text-align:right}
.pptable .pu{display:none}
@media(max-width:900px){
  /* The chart, then the position and the stats, then the transactions. */
  .ppgrid > .ppmain{display:contents}
  .ppgrid > .ppmain > .poolchart{order:1}
  .ppgrid > .ppaside{order:2}
  .ppgrid > .ppmain > .pptx{order:3;margin-top:0}
}
@media(max-width:640px){
  /* Transactions on phones: type and KAS, then time and tokens, then the wallet; no column labels. */
  .pptable tr{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:11px 14px}
  .pptable td[data-k]::before{display:none}
  table.pool.ptable.pptable td.ptype{grid-row:1;grid-column:1}
  table.pool.ptable.pptable td.pkas{grid-row:1;grid-column:2;text-align:right}
  table.pool.ptable.pptable td.ptime{grid-row:2;grid-column:1;font-size:11.5px;color:var(--muted)}
  table.pool.ptable.pptable td.ptok{grid-row:2;grid-column:2;text-align:right;font-size:11.5px;color:var(--muted)}
  table.pool.ptable.pptable td.pwallet{grid-row:3;grid-column:1 / -1;font-size:11.5px;color:var(--muted)}
  .pptable .pu{display:inline}
  .pptable .ptype .pairsub{display:inline;margin-left:6px}
}
/* Token images sit on white: a transparent PNG logo shows clean white behind it (not the id-coloured tile), in both
   themes. Solid images cover it, so they look the same. The initials tile keeps its gradient when there is no image. */
.thumbimg,img.txmark,.duo img:first-child,.sumtile img,.imgtile img{background:#fff}
/* Holders: the share of supply first, names linked to profiles. */
.hsum{padding:8px 4px 12px;color:var(--ink-2);font-size:13px}
.hrow{gap:12px}
.hrow .hrank{width:22px;text-align:center;color:var(--muted);font-size:12px;flex:none}
.hrow .fmain .a a{color:var(--ink);text-decoration:none;font-weight:600}
.hrow .fmain .a a:hover{color:var(--accent)}
.hrow.covenant .fmain .a{font-weight:600}
/* What an LP position made (LpEarningsLines): two headline figures, then the breakdown. */
.lpearn{margin-bottom:12px}
.lpearn-head{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:10px}
.lpearn-head .k{font-size:12px;color:var(--muted)}
.lpearn-head .v{font-size:20px;font-weight:600;margin-top:2px}
.lpearn-head .v .u{font-size:12px;color:var(--muted);font-weight:500}
.lpearn-head .d{font-size:12px;color:var(--muted);margin-top:2px}
.lpearn .up,.lpearned .up{color:var(--accent);font-size:inherit}
.lpearn .down{color:var(--bad);font-size:inherit}
.lpearn-none{margin:0 0 10px}
.lpdetails{margin-top:10px}.lpdetails[open] summary{margin-bottom:10px}
.lpdetails .lpearn{margin-bottom:6px}
.lpsub{margin:12px 0 6px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
/* The pool stats panel: the LP example line and the collapsed share accounting. */
.lpexample{margin-top:8px;font-size:13px;line-height:1.45}
.sadvanced>summary{cursor:pointer;list-style:none}
.sadvanced>summary::before{content:'▸ ';color:var(--muted)}
.sadvanced[open]>summary::before{content:'▾ '}
.sadvanced .srow{margin-top:6px}
@media (max-width:420px){.lpearn-head .v{font-size:18px}}

/* Language menu (components/LanguageMenu.tsx): a small popover under the header's language button. */
header .langwrap{position:relative;flex:none}
header .langmenu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:168px;padding:6px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 32px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:2px}
header .langmenu button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:40px;padding:8px 12px;
  border-radius:10px;text-align:left;font-size:14px;color:var(--ink-2)}
header .langmenu button:hover,header .langmenu button:focus-visible{background:var(--surface-2);color:var(--ink);outline-offset:-2px}
header .langmenu button[aria-checked="true"]{color:var(--ink);font-weight:600}
header .langmenu svg{width:16px;height:16px;color:var(--accent);flex:none}
header .langmark:lang(zh){font-size:15px;letter-spacing:0}

/* Chinese text: the site fonts carry no CJK glyphs, so Latin and digits stay in Archivo and Chinese falls
   through to the system's Chinese face. Tight Latin letter-spacing on headings is dropped for CJK. */
:root:lang(zh-CN) body{font-family:Archivo,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC","Source Han Sans SC","Segoe UI",sans-serif}
:root:lang(zh-TW) body{font-family:Archivo,-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei","Noto Sans CJK TC","Noto Sans TC","Source Han Sans TC","Segoe UI",sans-serif}
:root:lang(zh) h1,:root:lang(zh) h2,:root:lang(zh) h3{letter-spacing:0}
:root:lang(zh) body{line-break:strict}
/* Recent trades: the trader's address opens their profile. */
.feed .fmain .ftrader{color:inherit;text-decoration:none}
.feed .fmain .ftrader:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/*
 * Phone pass (docs/ux/2026-10-18-mobile/MOBILE_UX_AUDIT.md). Desktop is untouched: every rule sits under a phone-width
 * or touch (pointer:coarse) query.
 */
/* M-1: Recent trades rows on phones. The right column (USD, then "KAS · venue · tx") kept its whole width and squeezed
   the left one to a few characters, so the amount broke onto three lines and the trader's address ran under the KAS
   figure. The row becomes a grid: the trade and its USD value on the first line, the trader and the time (hidden on
   phones until now) on the second, the KAS amount, venue and tx link on the third. */
@media(max-width:520px){
  .feed .frow[data-txid]{display:grid;grid-template-columns:26px minmax(0,1fr) auto;column-gap:12px;row-gap:3px;align-items:center}
  .feed .frow[data-txid] > .fdir{grid-column:1;grid-row:1 / span 3}
  .feed .frow[data-txid] > .fmain,.feed .frow[data-txid] > .fright{display:contents}
  .feed .frow[data-txid] .fmain .a{grid-column:2;grid-row:1;min-width:0}
  .feed .frow[data-txid] .fright .a{grid-column:3;grid-row:1;text-align:right;white-space:nowrap}
  .feed .frow[data-txid] .fmain .b{grid-column:2;grid-row:2;margin-top:0;min-width:0;white-space:nowrap}
  .feed .frow[data-txid] > .fwhen{display:block;grid-column:3;grid-row:2;width:auto;font-size:11.5px;white-space:nowrap}
  .feed .frow[data-txid] .fright .b{grid-column:2 / -1;grid-row:3;margin-top:0;text-align:left}
  /* M-2: Holders rows: the share and the amount move under the holder's name, so the address never breaks in two. */
  .feed .hrow:not(.covenant){flex-wrap:wrap;row-gap:2px}
  .feed .hrow:not(.covenant) .fmain .a a{white-space:nowrap}
  .feed .hrow:not(.covenant) .fright{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;padding-left:76px;text-align:left}
  .feed .hrow:not(.covenant) .fright .b{margin-top:0}
}
/* M-3: the trade sheet's button stays in reach. Once a quote shows, the sheet is taller than the screen and the Buy or
   Sell button sat below the fold; its dock now sticks to the bottom of the sheet (reaching over the sheet's 18 px
   padding) while the quote scrolls under it. Desktop leaves the dock unstyled. */
@media(max-width:900px){
  .tpage > .tradecard > .ctadock{position:sticky;bottom:-18px;z-index:2;padding:8px 0 10px;background:var(--raise)}
  .tpage > .tradecard > .ctadock > .cta{margin-top:6px}
  /* M-7: the sheet measures against the visible screen (dvh), not the tallest one, so Safari's toolbar never hides
     its top; browsers without dvh keep the vh rule above. */
  .tpage > .tradecard{max-height:88dvh}
}
/* M-5: more room on narrow phones: a 16 px page gutter and slimmer card padding (cards nested two deep left 268 px of a
   360 px screen for content). */
@media(max-width:520px){
  .wrap{padding-left:16px;padding-right:16px}
  .section{padding:18px}
  .feed{padding:14px}
  .chartcard{padding:14px}
  .launch .form{padding:22px 18px}
  .launch .side{padding:22px 16px}
}
/* M-6: touch targets. Small controls keep their look and gain an invisible hit area of about 44 px around them. */
@media(pointer:coarse){
  .banner .wrap > button,.fshowchart,.feed .fright .b a,.trackicon,.copy,.thero-links a,.wstar:not(.oncard),.up-icon{position:relative}
  .banner .wrap > button::after,.fshowchart::after,.wstar::after,.trackicon::after,.up-icon::after{content:"";position:absolute;inset:-10px}
  .feed .fright .b a::after,.copy::after,.thero-links a::after{content:"";position:absolute;inset:-12px -6px}
}

/*
 * Phone pass 2 (owner-approved proposals of docs/ux/2026-10-18-mobile/MOBILE_UX_AUDIT.md). Phone width (≤620 px) or a
 * phone on its side (landscape, ≤500 px tall); desktop is untouched.
 */
/* P-1: the banners take one short line (the testnet notice's short form), the header's two rows sit closer. */
.banner .bn-short{display:none}
@media(max-width:620px),(max-height:500px) and (max-width:950px) and (orientation:landscape){
  .banner{font-size:12px}
  .banner .wrap{padding-top:6px;padding-bottom:6px;gap:8px}
  .banner .bn-full{display:none}
  .banner .bn-short{display:inline}
}
@media(max-width:620px){
  /* The chart's "no trades" note sits low on the left, clear of the price line and the last-price label. */
  .lwc-empty{left:10px;top:auto;bottom:40px;transform:none;max-width:calc(100% - 100px)}
  header .wrap{padding-top:8px;row-gap:8px}
  header .brand .logo{width:42px;height:42px}
  #app > :first-child{margin-top:12px}
}
/* A phone on its side: the header keeps one row band (logo, buttons) over the tabs, tighter, and the Buy/Sell bar is
   slimmer, so the page starts higher on a 390 px tall screen. */
@media(max-height:500px) and (max-width:950px) and (orientation:landscape){
  header .wrap{padding-top:6px;padding-bottom:6px;row-gap:6px}
  header .brand .logo{width:36px;height:36px}
  header .iconbtn{width:36px;height:36px}
  header .connect{padding:7px 16px}
  header .navpill button{padding:5px 8px}
  #app > :first-child{margin-top:8px}
}
@media(max-height:500px) and (max-width:900px) and (orientation:landscape){
  .tradebar{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .tradebar .cta{padding:9px}
  body:has(.tradebar){padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* P-7: chips and tabs on phones. Segmented controls, tab pills, the chart's toggles and the header tabs are 36 px tall
   (were 25-34) and, on touch screens, take taps 4 px above and below too: a 44 px target. The unit toggle inside the
   liquidity amount field and its quick amounts keep their size (they sit inside a field). */
@media(max-width:620px){
  .seg:not(.lpunit):not(.quickamt) button,.tabpills button,.chartctl .vwapbtn,header .navpill button{min-height:36px}
  .seg:not(.lpunit):not(.quickamt) button,.tabpills button{display:inline-flex;align-items:center;justify-content:center}
  .lb .lbwin .seg button{padding:4px 12px;font-size:13px}
}
@media(max-width:620px) and (pointer:coarse){
  .seg:not(.lpunit):not(.quickamt) button,.tabpills button,.chartctl .vwapbtn,header .navpill button{position:relative}
  .seg:not(.lpunit):not(.quickamt) button::after,.tabpills button::after,.chartctl .vwapbtn::after,header .navpill button::after{
    content:"";position:absolute;inset:-4px 0}
}
/* P-13: with the keyboard open (hooks/useKeyboardLift.ts sets --kb and --vvh), the trade sheet sits on top of it and
   fits the visible screen, so the docked button stays in view while an amount is typed. */
@media(max-width:900px){
  .tpage > .tradecard.open{bottom:var(--kb,0px);max-height:min(88dvh,calc(var(--vvh,100dvh) - 8px))}
}
/* P-12: the alerts panel and the Track trader picker dim the page behind them on phones; a tap on it closes them. */
.popscrim{display:none}
@media(max-width:620px){
  .alscrim{display:block;position:fixed;inset:0;z-index:74;background:rgba(0,0,0,.45);animation:txfade .18s ease-out}
}
@media(max-width:560px){
  .trackscrim{display:block;position:fixed;inset:0;z-index:66;background:rgba(0,0,0,.45);animation:txfade .18s ease-out}
  html .trackpick{z-index:67}
}
@media (prefers-reduced-motion:reduce){.popscrim{animation:none!important}}
/* P-11: the feed's tab row (and a segmented row such as Explore's filters) fades at an end where more is cut off
   (hooks/useEdgeFade.ts sets `data-fade`). */
.tabpills[data-fade="end"],.seg[data-fade="end"]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
.tabpills[data-fade="start"],.seg[data-fade="start"]{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 36px),transparent)}
.tabpills[data-fade="both"],.seg[data-fade="both"]{-webkit-mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
/* P-6: Explore's cards on phones: no content text under 12 px (it was 9.5-11.5 px). */
@media(max-width:620px){
  .section .grid .tsym,.section .grid .foot,.section .grid .pct,.hillbody .pct,.tcap .tcapkas,.hillnote{font-size:12px}
  .section .grid .tval span,.hillbody .tval span{font-size:12px}
  .section .grid .tag,.hillcard .thumb .tag{font-size:12px;padding:2px 8px}
}

/*
 * P-10: safe areas. index.html sets `viewport-fit=cover`, so the page reaches under an iPhone's notch, Dynamic Island
 * and home bar, and `env(safe-area-inset-*)` reports them (0 elsewhere, so desktop is unchanged). The page content is
 * inset on every side; each fixed bar and bottom sheet keeps its own padding or the inset, whichever is larger, and its
 * background still reaches the screen's edge. `html` raises these over the lazily loaded sheets' own rules.
 */
body{padding-top:env(safe-area-inset-top);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
@media(max-width:900px){
  html .tradebar{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
  html body:has(.tradebar){padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  html .tpage > .tradecard{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));
    padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  /* The docked trade button stays above the home bar; its dock's background fills the strip under it. */
  html .tpage > .tradecard > .ctadock{bottom:calc(-18px - env(safe-area-inset-bottom));padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  html .txovl{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  html .crdrawer-ovl{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  html .crdrawer{padding-bottom:calc(28px + env(safe-area-inset-bottom))}
  html .toasts{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}
}
@media(max-height:500px) and (max-width:900px) and (orientation:landscape){
  html body:has(.tradebar){padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}
@media(max-width:620px){
  html .ovl:has(> .walletpick){padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
  html .srch-ovl{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
}
@media(max-width:560px){
  html .lwc-mktip,html .lwc-mktip.below{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
  html .trackpick{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
}
html .shr-ovl{padding:max(24px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
/*
 * Token page layout (owner request 2026-10-10): the identity header with the
 * market cap across the top of the chart column (`.thero`), the chart card's
 * controls on the right of the price (`.chartctl`), the live Curve bar
 * (`.curvebar`), the stats strip (`.stats`), and the trade card as its own
 * sticky card on the right. Built only from the prototype's tokens, cards,
 * pills and radii; loaded after app.css, whose phone rules stay in force.
 */

/* ---------- columns: chart column left, trade card right (sticky on desktop) ---------- */
.tpage.tlayout{grid-template-columns:minmax(0,1fr) 368px}
.tmain{min-width:0;display:flex;flex-direction:column;gap:18px}
@media(max-width:980px){.tpage.tlayout{grid-template-columns:minmax(0,1fr)}}
@media(min-width:981px){
  .tpage.tlayout > .tradecard{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow-y:auto;scrollbar-width:thin}
}

/* ---------- identity header ---------- */
.thero{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;
  background:var(--raise);border:1px solid var(--line);border-radius:20px;padding:18px 22px}
.thero-id{display:flex;gap:15px;align-items:center;min-width:0;flex:1}
.thero-av{width:60px;height:60px;border-radius:17px;display:grid;place-items:center;flex:none;position:relative;overflow:hidden;
  font-size:21px;font-weight:700;color:var(--cream)}
.thero-main{min-width:0;flex:1}
.thero-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.thero-title h1{font-size:27px;letter-spacing:-.025em;line-height:1.15;min-width:0;overflow-wrap:anywhere}
.thero-sym{font-size:14px;color:var(--muted)}
.thero-title .pairchip{margin-left:0}
/* The "·" separators sit in the column gap; one that would start a wrapped line falls outside the box and is clipped. */
.thero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;margin-top:9px;font-size:12.5px;color:var(--muted);overflow:hidden}
.thero-meta .mi{position:relative;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.thero-meta .mi + .mi::before{content:"·";position:absolute;left:-13px;color:var(--muted)}
.thero-meta .pairchip{margin-left:0;font-size:11.5px}
.thero-meta a{color:var(--ink-2);text-decoration:none}
.thero-meta a:hover{color:var(--accent)}
.thero-cap{text-align:right;flex:none;min-width:0}
.thero-cap .k{font-size:11.5px;color:var(--muted)}
.thero-cap .v{font-size:27px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin-top:2px}
.thero-cap .v .u{font-size:14px;color:var(--muted);margin-left:6px;font-weight:500;letter-spacing:0}
.thero-cap .usd{font-size:12px;color:var(--muted)}
.thero-cap .sub{font-size:12px;color:var(--ink-2);margin-top:6px}
.thero-cap .sub span{color:var(--muted)}

/* ---------- chart card: pills and timeframes on the right of the price ---------- */
.chartctl{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.chartctl .tabpills button{padding:6px 12px;font-size:13px}
.chartctl .vwapbtn{padding:6px 12px;border-radius:999px;font-size:12px;font-weight:500;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--line)}
.chartctl .vwapbtn[aria-pressed="true"]{color:var(--warn);border-color:var(--warn)}
/* My swaps: the teal dot when on; disabled (with its hint) without a wallet. */
.chartctl .mybtnwrap{display:inline-flex}
.chartctl .mybtn{display:inline-flex;align-items:center;gap:6px}
.chartctl .mybtn::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5}
.chartctl .mybtn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.chartctl .mybtn[aria-pressed="true"]::before{background:var(--accent);opacity:1;box-shadow:0 0 6px var(--glow)}
.chartctl .mybtn:disabled{opacity:.55;cursor:not-allowed}

/* ---------- live Curve bar ---------- */
.curvebar{display:flex;align-items:center;gap:14px;margin-top:16px;padding:12px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px}
.cb-k{font-size:13px;font-weight:600;flex:none}
.cb-track{flex:1;min-width:60px;height:10px;border-radius:999px;background:var(--surface-3);overflow:hidden;position:relative}
.cb-fill{display:block;height:100%;min-width:2px;border-radius:999px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--brand),var(--accent));transition:width .6s cubic-bezier(.2,.7,.2,1)}
.cb-shine{position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:cbshine 1.1s ease-out 1}
@keyframes cbshine{to{transform:translateX(100%)}}
.cb-v{font-size:12.5px;color:var(--muted);white-space:nowrap;flex:none}
.cb-v b{color:var(--ink);font-weight:600}
.cb-track.cb-bal{display:flex;gap:2px;background:none}
.cb-bal i{display:block;flex:1;height:100%;border-radius:999px}
.cb-track .skl{position:absolute;inset:0;border-radius:999px}
@media (prefers-reduced-motion:reduce){
  .cb-fill{transition:none!important}
  .cb-shine{display:none}
}

/* ---------- stats strip ---------- */
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:14px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:10px 12px;min-width:0}
.stat .k{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.stat .v{font-size:15px;font-weight:600;margin-top:2px;overflow-wrap:anywhere}
.stat .s{font-size:11px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}

/* ---------- narrower screens ---------- */
@media(max-width:1180px) and (min-width:981px){
  .thero{flex-wrap:wrap}
  .thero-cap{text-align:left;flex-basis:100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
  .thero-cap .sub{margin-top:0}
}
@media(max-width:760px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats .stat:last-child{grid-column:1 / -1}
}
/* Phones: the header stacks (avatar and name, the meta line wrapping, the market cap below); nothing scrolls sideways. */
@media(max-width:620px){
  .tmain{gap:14px}
  .thero{flex-direction:column;align-items:stretch;padding:16px;gap:14px}
  .thero-id{align-items:flex-start;gap:12px}
  .thero-av{width:48px;height:48px;border-radius:14px;font-size:17px}
  .thero-title h1{font-size:22px}
  .thero-meta .mi{white-space:normal}
  .thero-cap{text-align:left;border-top:1px solid var(--line-soft);padding-top:12px;
    display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
  .thero-cap .k{flex-basis:100%}
  .thero-cap .v{font-size:24px;margin-top:0}
  .thero-cap .sub{flex-basis:100%;margin-top:2px}
  .chartctl{justify-content:flex-start;width:100%;min-width:0}
  .chartctl .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .chartctl .seg::-webkit-scrollbar{display:none}
  .chartctl .seg button{flex:none;padding:6px 11px}
  .curvebar{flex-wrap:wrap;gap:8px 12px}
  .cb-track{order:3;flex:1 1 100%}
  .cb-v{margin-left:auto;white-space:normal;text-align:right}
}

/* ---------- compact header: the avatar spans exactly the name and meta lines, which sit flush beside it ---------- */
.thero{padding:14px 18px;gap:12px 24px}
.thero-id{gap:12px;align-items:center}
.thero-av{width:52px;height:52px;border-radius:15px;font-size:18px}
.thero-main{display:flex;flex-direction:column;justify-content:center;min-height:52px;gap:5px}
.thero-title{gap:4px 8px;line-height:1}
.thero-title h1{font-size:22px;line-height:1.1}
.thero-sym{font-size:13px}
.thero-meta{margin-top:0;gap:4px 14px;font-size:12px;line-height:1.3}
.thero-meta .mi + .mi::before{left:-9px}
.thero-meta .pairchip{padding-top:1px;padding-bottom:1px}
.thero-cap .v{font-size:23px}
.thero-cap .sub{margin-top:3px}
@media(max-width:1180px) and (min-width:981px){
  .thero-cap{padding-left:64px}
}
@media(max-width:620px){
  .thero{padding:14px;gap:10px}
  .thero-av{width:44px;height:44px;border-radius:13px;font-size:16px}
  .thero-main{min-height:44px}
  .thero-title h1{font-size:20px}
  .thero-cap{padding-left:0}
}
/* the copy button and the pair chip sit at text height so the meta line stays on one row at mid widths */
.thero-meta .thero-idcopy button,.thero-meta .thero-idcopy .copy{padding:1px 7px;font-size:11px;line-height:1.5;border-radius:6px;min-height:0;height:auto}
.thero-meta .pairchip{font-size:11px;gap:4px;padding-left:3px;padding-right:8px}
.thero-meta .pairchip img{width:14px;height:14px}
/* the declaration's links and kascov sit in the header's top right corner; the market cap starts under them */
.thero{position:relative}
.thero-links{position:absolute;top:10px;right:12px;display:flex;align-items:center;gap:6px;z-index:1}
.thero-links a{display:inline-flex;align-items:center;justify-content:center;height:26px;border-radius:8px;border:1px solid var(--line-soft);
  background:var(--panel-2,rgba(255,255,255,.03));color:var(--ink-2);text-decoration:none;font-size:11.5px;transition:color .15s,border-color .15s}
.thero-links a:hover{color:var(--accent);border-color:var(--accent)}
.thero-links .tl-icon{width:26px}
.thero-links .tl-text{padding:0 9px}
.thero-cap{padding-top:26px}
.thero-title .pairchip{font-size:11px;gap:4px;padding-top:1px;padding-bottom:1px}
.thero-title .pairchip img{width:14px;height:14px}
@media(max-width:1180px) and (min-width:981px){
  .thero-id{padding-right:150px}
  .thero-cap{padding-top:0}
}
@media(max-width:620px){
  .thero-links{position:static;order:1}
  .thero-cap{order:2;padding-top:12px}
}
/* Phones: My swaps and Comments on the timeframe row, at its right end (the timeframes scroll if the row is short). */
@media(max-width:640px){
  .chartctl .seg{flex:0 1 auto;min-width:0}
  .chartctl .mybtnwrap{flex:none;margin-left:auto}
  .chartctl .avbtn{flex:none}
  .chartctl .vwapbtn{padding:6px 10px}
}

/*
 * Phone pass 2, P-1 (docs/ux/2026-10-18-mobile/MOBILE_UX_AUDIT.md): on a phone the chart starts near the top.
 * - The header's market cap and price per token leave (the price heads the chart card, the market cap is in the stats
 *   strip under it); on a phone on its side too.
 * - The header card and the back link sit tighter.
 * - The chart card reads price, chart, then its controls (type, timeframe, My swaps, Comments), the Curve bar and the
 *   stats: the controls move under the chart instead of pushing it down.
 */
@media(max-width:620px),(max-height:500px) and (max-width:950px) and (orientation:landscape){
  .thero-cap{display:none}
  #back{margin:4px 0 8px}
  .chartcard{display:flex;flex-direction:column}
  .chartcard > *{order:5}
  .chartcard > .bigrow{display:contents}
  .bigrow > [data-price-unit]{order:1;margin-bottom:10px}
  .chartcard > .chartinset{order:2}
  .bigrow > .chartctl{order:3;margin-top:12px}
}
@media(max-width:620px){
  .thero{padding:12px 14px;gap:8px}
  .bignum{font-size:34px}
  /*
   * The chart's controls on a phone (owner, 2026-10-18): My swaps, Avg entry and Comments first, smaller, on one row;
   * then the chart type and the timeframes, each spanning the card with its buttons sharing the width.
   */
  .chartcard .chartctl .mybtnwrap,.chartcard .chartctl .railbtn,.chartcard .chartctl .avbtn{order:0}
  .chartcard .chartctl .mybtnwrap{margin-left:0}
  .chartcard .chartctl .tabpills{order:1}
  .chartcard .chartctl .seg{order:2}
  .chartcard .chartctl .vwapbtn{min-height:30px;padding:4px 10px;font-size:11.5px}
  .chartcard .chartctl .tabpills,.chartcard .chartctl .seg{flex:1 1 100%;width:100%;max-width:none;overflow:visible;display:flex}
  .chartcard .chartctl .tabpills button,.chartcard .chartctl .seg button{flex:1 1 0;min-width:0;padding-left:4px;padding-right:4px;text-align:center}
}
/* A phone on its side: no back link (the tabs are right above), and the header card on one line. */
@media(max-height:500px) and (max-width:950px) and (orientation:landscape){
  #back{display:none}
  .thero{padding:10px 16px}
  .bigrow > .chartctl{justify-content:flex-start}
}