/*
 * 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:var(--r-panel);
  padding:13px var(--panel-pad);margin-bottom:var(--panel-gap);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 and header account states (phase4-plan.md section 3.6),
 * in the shared liquid-glass look (glass.css). 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}
/* The labels share the name of the full-width button modifier (`.wide`, components.css): keep the pill's own size. */
.connect.warn .wide{width:auto;margin-top:0}
.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}
/* Where to switch the account (the wallet's own choice; owner, 2026-10-25), under the account buttons. */
.switchhint{margin:-6px 20px 14px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.actmenu .switchhint{margin:-4px 8px 12px}

.pickfoot{padding:0 20px 18px;margin:0}

/* ---------- 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: liquid glass (styles/glass.css), rounded tiles, pill actions ---------- */
.ovl:has(> .walletpick){animation:txfade .2s ease-out}
.pick.walletpick{position:relative;max-height:min(760px,90vh);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}
.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}
.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(--glass-tile-hover);color:var(--muted)}
.walletpick .prow .r .soon{padding:4px 10px;background:var(--glass-tile-hover);border:1px solid var(--glass-line);color:var(--muted)}
.walletpick .prow.is-soon .r .soon{opacity:1}
.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 .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;border-bottom:none;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){
  .ovl:has(> .walletpick),.pick.walletpick{animation: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}

/* ---------- "Still waiting for <wallet>…" with Cancel (components/WalletWait.tsx) ---------- */
.wwait{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;font-size:13px;line-height:1.45;text-align:left}
.wwait > div{flex:1;min-width:0}
.wwait b{display:block;font-weight:600;font-size:13.5px}
.wwait .wwait-body{color:var(--muted)}
.wwait .wwait-cancel{flex:none;min-height:40px;padding:0 16px;border-radius:999px;font-weight:600;font-size:13px}
.wwait.inline{margin:14px 0 0}
.wwait.float{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:95;
  width:min(520px,calc(100vw - 32px))}
.wwait.glass{border-radius:20px}
.wwait:not(.glass):not(.glass-tile){background:var(--surface-2);border:1px solid var(--line)}
.wwait .wwait-cancel:not(.glass-btn){border:1px solid var(--line)}
.wwait.wake{flex-wrap:wrap}
.wwait.wake > div{flex-basis:100%}
.wwait .wwait-open{flex:1;display:grid;place-items:center;min-height:44px;padding:0 16px;border-radius:999px;font-weight:600;font-size:14px;text-decoration:none}

/* ---------- the wrong-network note's one-click switch ---------- */
.picknote .acts .switchnet{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:6px 14px}
.banner.walletbar button.switchnet{font-weight:600;color:var(--accent)}

/* Kaspire Mobile pairing: the QR code on white (every camera reads it), the App Link and the copy, the wait. */
.pairpanel{display:flex;flex-direction:column;align-items:stretch}
.pairpanel .qrwrap{align-self:center;margin:6px 0 12px;padding:10px;border-radius:18px;background:#fff;line-height:0}
.pairpanel .qrcode{width:min(220px,62vw);height:auto;display:block}
.pairpanel .hint{margin:0 20px 10px;text-align:center}
.pairpanel .acctbtns{align-items:stretch}
.pairpanel .acctbtns > *{margin:0;flex:1;height:40px;padding:0 12px;box-sizing:border-box}
.pairpanel .acctbtns .cta{justify-content:center;font-size:13.5px;display:inline-flex;align-items:center;border-radius:999px;text-decoration:none}
.pairpanel > .ghost{margin:0 16px 16px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}
/*
 * The terms consent dialog (`components/TermsConsent.tsx`): the wallet picker's liquid-glass look (glass.css: frosted
 * panel, glass tiles, glass-outline secondary button, pill notes), centred on wide screens and a bottom sheet on
 * phones. Colours come from the theme and glass tokens, so light and dark follow the page.
 */
.ovl.termsovl{animation:txfade .2s ease-out;z-index:70}
.pick.termspick{position:relative;max-width:440px;max-height:min(760px,92vh);overflow-y:auto;
  padding:26px 24px 20px;outline:none;
  animation:txrise .22s cubic-bezier(.2,.8,.2,1)}

.tc-top{display:flex;flex-direction:column;align-items:flex-start}
.tc-seal{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px;color:var(--accent-ink);
  background:linear-gradient(140deg,var(--accent),var(--brand,var(--accent)));box-shadow:0 8px 22px -10px var(--glow)}
.tc-eyebrow{margin:0 0 6px;font-size:11.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--accent)}
.tc-eyebrow.updated{color:var(--warn)}
.termspick h2{margin:0;font-size:21px;line-height:1.25;letter-spacing:-.02em}
.tc-body{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--ink-2,var(--muted))}

.tc-acct{display:flex;align-items:center;gap:12px;margin:18px 0 0;padding:10px 12px;border-radius:16px}
.tc-wtile{width:34px;height:34px;border-radius:11px;flex:none;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--accent-dim);color:var(--accent);overflow:hidden}
.tc-wtile.haslogo{background:transparent}
.tc-wtile img{width:100%;height:100%;object-fit:contain;display:block}
.tc-who{display:flex;flex-direction:column;min-width:0}
.tc-addr{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc-net{font-size:12px;color:var(--muted);margin-top:1px}

.tc-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.tc-list li{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 8px 8px 14px;border-radius:16px}
.tc-tick{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--accent);color:var(--accent-ink)}
.tc-doc{flex:1;min-width:0;display:flex;flex-direction:column}
.tc-name{font-size:14px;font-weight:600}
.tc-note{font-size:12px;color:var(--muted);margin-top:1px}
.tc-read{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:3px;min-width:64px;min-height:44px;padding:0 12px;border-radius:12px;
  font-size:13px;font-weight:600;color:var(--accent);text-decoration:none}
.tc-read:hover{background:var(--accent-dim)}
.tc-read:focus-visible,.tc-primary:focus-visible,.tc-secondary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.tc-sign{margin:14px 2px 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.tc-error{margin:12px 0 0;padding:11px 13px;border-radius:14px;font-size:13px;line-height:1.45;
  background:rgba(232,179,60,.12);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(232,179,60,.4)}

.tc-acts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.tc-primary,.tc-secondary{min-height:50px;border-radius:999px;font-size:15px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:0 20px;transition:filter .15s ease,background .15s ease,border-color .15s ease}
.tc-primary{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);box-shadow:0 10px 26px -14px var(--glow)}
.tc-primary:not(:disabled):hover{filter:brightness(1.07)}
.tc-primary:disabled{opacity:.6;cursor:default}
.tc-secondary{color:var(--ink)}
.tc-spin{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:tcspin .8s linear infinite}
@keyframes tcspin{to{transform:rotate(360deg)}}

.tc-chips{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;margin:14px 0 0;padding:0;font-size:11.5px;color:var(--muted)}
.tc-chips li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px}
.tc-chips li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}

@media(max-width:620px){
  .ovl.termsovl{place-items:end stretch;padding:0}
  .pick.termspick{max-width:none;border-radius:28px 28px 0 0;border-bottom:none;max-height:94vh;max-height:94dvh;
    padding:22px max(18px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
    animation:txup .26s cubic-bezier(.2,.8,.2,1)}
  .termspick h2{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .ovl.termsovl,.pick.termspick{animation:none}
  .tc-spin{animation-duration:2.4s}
}
/* A Kaspa name chip (owner, 2026-11-04): the pill style of `.pairchip`/`.cmt-badge`, beside the name and @handle.
 * The label shortens with an ellipsis so a long name never pushes a row wider than a phone; the suffix always shows.
 * Theme colours come from the tokens (dark and light). */
.kname{display:inline-flex;align-items:baseline;min-width:0;max-width:min(100%,22ch);padding:1px 8px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);color:var(--ink-2);font-size:11px;font-weight:600;line-height:1.6;
  white-space:nowrap;vertical-align:middle;flex:0 1 auto}
.kname-label{overflow:hidden;text-overflow:ellipsis;min-width:0}
.kname .ksfx{flex:none;color:var(--accent);font-weight:700}
.kname[data-service="dotk"] .ksfx{color:var(--ink-2)}

/* Where it sits */
.up-sub .kname{font-size:12px}
.lbwho .kname,.fmain .a .kname{margin-left:6px}
.cmt-head .kname{margin-left:0}
.up-fname .kname{justify-self:start;margin-top:2px}
.srch-sub .kname,.frow.ffollow .b .kname{margin-right:6px}
.admlb .lbwho .kname{margin:2px 0 0}

/* The editor's picker: profile-editor.css. */
@media (max-width:520px){
  .kname{max-width:min(100%,16ch)}
}
.srch-state .srch-note{display:block}
/* ---------- 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:var(--btn-h)}
.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}
}

/* ---------- liquid glass (owner, 2026-11-03): the shared tokens of styles/glass.css ---------- */
/* The board sits on a faint accent glow like the glass sheets; every row is a glass tile with the top highlight and
   the hairline edge light, lifting a little on hover. */
.lb.section{background:radial-gradient(70% 45% at 100% 0%,var(--lk-tint),transparent 70%),
  radial-gradient(60% 40% at 0% 0%,var(--lk-sheen),transparent 60%),var(--surface)}
.lbpanel{margin-top:10px}
.lbpanel .lbboard{padding-top:4px;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
.lbpanel .lbboard > .lbrow{grid-column:1 / -1}
.lbpanel .lbrow{position:relative;padding:10px 16px;border-radius:16px;border:1px solid var(--glass-line);
  background:linear-gradient(180deg,var(--glass-highlight),transparent 1.5px),var(--glass-tile);
  box-shadow:inset 0 1px 0 var(--glass-highlight),inset 1px 0 0 var(--glass-edge),inset -1px 0 0 var(--glass-edge);
  transition:transform .25s var(--lk-ease),background .2s ease,border-color .2s ease,box-shadow .2s ease}
.lbpanel .lbrow:hover{transform:translateY(-1px);background:linear-gradient(180deg,var(--glass-highlight),transparent 1.5px),var(--glass-tile-hover);
  border-color:color-mix(in srgb,var(--glass-glow) 60%,var(--glass-line));
  box-shadow:inset 0 1px 0 var(--glass-highlight),0 10px 30px -18px var(--glow)}
.lbpanel .lbrow.mine{border-color:var(--glass-glow);background:linear-gradient(180deg,var(--glass-highlight),transparent 1.5px),var(--accent-dim)}
/* The rank in a glass bead (the stepper's bead). */
.lbpanel .lbrank{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:12.5px;
  background:var(--glass-tile-deep);box-shadow:inset 0 1px 0 var(--glass-highlight),0 0 0 1px var(--glass-line)}
/* The profit in a glossy pill (green or red), the KAS under it. */
.lbpanel .lbval .lbmain > span{display:inline-block;padding:2px 10px;border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,var(--lk-gloss)),transparent 60%),color-mix(in srgb,currentColor 12%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 30%,transparent)}

/* ---------- the podium: the top three side by side, first in the middle and taller (2, 1, 3) ----------
   Compact, content centred; the top padding is 6 px more than the bottom, so the avatar's 4 px medal ring and the
   last line's leading leave the same visible gap above and below. */
.lbrow.medal{--medal:#AEB4BE}
.lbrow.medal.m1{--medal:#E3B34C}
.lbrow.medal.m3{--medal:#C98A55}
.lbpanel .lbboard > .lbrow.medal{grid-column:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:6px;padding:18px 14px 12px;border-radius:22px;overflow:hidden;
  border-color:color-mix(in srgb,var(--medal) 50%,var(--glass-line));
  background:linear-gradient(180deg,var(--glass-highlight),transparent 1.5px),
    radial-gradient(120% 80% at 50% -10%,color-mix(in srgb,var(--medal) 26%,transparent),transparent 65%),
    radial-gradient(90% 60% at 10% -12%,var(--lk-sheen),transparent 55%),var(--glass-tile);
  box-shadow:inset 0 1px 0 var(--glass-highlight),inset 1px 0 0 var(--glass-edge),inset -1px 0 0 var(--glass-edge),
    inset 0 -40px 60px -50px color-mix(in srgb,var(--medal) 70%,transparent),0 18px 40px -26px rgba(0,0,0,.6)}
.lbpanel .lbboard > .lbrow.medal:hover{border-color:color-mix(in srgb,var(--medal) 75%,transparent);transform:translateY(-2px)}
.lbpanel .lbboard > .lbrow.m1{order:-2;grid-column:2;grid-row:1;padding-top:22px;padding-bottom:16px}
.lbpanel .lbboard > .lbrow.m2{order:-3;grid-column:1;grid-row:1;align-self:end;min-height:178px}
.lbpanel .lbboard > .lbrow.m3{order:-1;grid-column:3;grid-row:1;align-self:end;min-height:178px}
.lbpanel .lbboard > .lbrow.medal .lbrank{position:absolute;top:10px;left:10px;width:26px;height:26px;font-size:12px;color:var(--medal);font-weight:700;
  background:color-mix(in srgb,var(--medal) 18%,var(--glass-tile-deep));box-shadow:inset 0 1px 0 var(--glass-highlight),0 0 0 1px color-mix(in srgb,var(--medal) 55%,transparent)}
.lbpanel .lbboard > .lbrow.medal .crav{box-shadow:0 0 0 2px var(--raise),0 0 0 4px var(--medal),0 10px 26px -10px var(--medal)}
.lbpanel .lbboard > .lbrow.m1 .crav{width:52px!important;height:52px!important}
.lbpanel .lbboard > .lbrow.medal .lbwho a{font-size:15px}
.lbpanel .lbboard > .lbrow.medal .lbval{text-align:center}
.lbpanel .lbboard > .lbrow.m1 .lbval .lbmain{font-size:19px}
/* First place: a slow light sweep across its glass (the glossy buttons' sweep). */
.lbpanel .lbboard > .lbrow.m1::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,calc(var(--lk-gloss) * .45)) 50%,transparent 65%);
  background-size:260% 100%;animation:lbsweep 5.5s var(--lk-ease) infinite}
@keyframes lbsweep{0%{background-position:130% 0}45%,100%{background-position:-130% 0}}

/* ---------- the window: a glass thumb slides under the chosen button ---------- */
.lb .lbwin .seg{position:relative;isolation:isolate;border-radius:999px;border:1px solid var(--glass-line);
  background:linear-gradient(180deg,var(--glass-highlight),transparent 1.5px),var(--glass-tile)}
.lb .lbwin[data-thumb="on"] .seg button[aria-pressed="true"]{background:transparent;box-shadow:none;color:var(--ink)}
.lb .lbwin[data-thumb="on"] .seg::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:0;
  width:var(--thumb-w);transform:translateX(var(--thumb-x));border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,var(--lk-gloss)),transparent 70%),var(--glass-tile-deep);
  box-shadow:inset 0 1px 0 var(--glass-highlight),0 0 0 1px var(--glass-line),0 6px 16px -8px var(--glow);
  transition:transform .42s var(--lk-spring),width .42s var(--lk-spring)}

/* ---------- your rank outside the top 10: a glass bar pinned to the bottom of the screen ---------- */
.lbme.lbbar{position:sticky;bottom:14px;z-index:5;margin-top:16px;padding:6px;border-top:0;border-radius:20px;
  border:1px solid var(--glass-glow);
  background:linear-gradient(180deg,var(--glass-highlight),transparent 1.5px),radial-gradient(90% 60% at 100% 0%,var(--lk-tint),transparent 65%),var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 var(--glass-highlight),var(--glass-shadow-pop)}
.lbme.lbbar .lbrow{background:transparent;padding:6px 10px}

/* Phones: the podium stacks (1, 2, 3) as tinted glass rows; avatars back to row size. */
@media(max-width:720px){
  .lbpanel .lbboard{grid-template-columns:minmax(0,1fr)}
  .lbpanel .lbboard > .lbrow.medal{grid-column:1;grid-row:auto;display:grid;flex-direction:initial;text-align:left;min-height:0;
    padding:12px 14px;border-radius:16px;align-self:auto;gap:10px}
  .lbpanel .lbboard > .lbrow.m1{order:-3}.lbpanel .lbboard > .lbrow.m2{order:-2}.lbpanel .lbboard > .lbrow.m3{order:-1}
  .lbpanel .lbboard > .lbrow.medal .lbrank{position:static}
  .lbpanel .lbboard > .lbrow.medal .crav,.lbpanel .lbboard > .lbrow.m1 .crav{width:34px!important;height:34px!important}
  .lbpanel .lbboard > .lbrow.medal .lbval{text-align:right}
  .lbpanel .lbboard > .lbrow.m1 .lbval .lbmain{font-size:17px}
}
@media(max-width:640px){
  .lbpanel .lbrow,.lbpanel .lbboard > .lbrow.medal{grid-template-columns:26px 30px minmax(0,1fr) auto;gap:10px;padding:10px 12px}
  .lbpanel .lbrank,.lbpanel .lbboard > .lbrow.medal .lbrank{width:26px;height:26px;font-size:12px}
  .lbpanel .lbrow .crav,.lbpanel .lbboard > .lbrow.medal .crav,.lbpanel .lbboard > .lbrow.m1 .crav{width:30px!important;height:30px!important}
}
@media(max-width:400px){
  .lbpanel .lbrow,.lbpanel .lbboard > .lbrow.medal{grid-template-columns:24px 30px minmax(76px,1fr) minmax(0,auto);gap:8px}
  .lbpanel .lbrank,.lbpanel .lbboard > .lbrow.medal .lbrank{width:24px;height:24px;font-size:11.5px}
}

/* Fallbacks: no blur or reduced transparency give a solid bar; reduced motion stops the sweep, the slide and the lift. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .lbme.lbbar{background:var(--glass-solid)} }
@media (prefers-reduced-transparency:reduce){ .lbme.lbbar{background:var(--glass-solid);-webkit-backdrop-filter:none;backdrop-filter:none} }
@media (prefers-reduced-motion:reduce){
  .lbpanel .lbboard > .lbrow.m1::after{animation:none;background:none}
  .lb .lbwin .seg::before,.lbpanel .lbrow{transition:none}
  .lbpanel .lbrow:hover,.lbpanel .lbboard > .lbrow.medal:hover{transform:none}
}

/* A row's figure: the profit, larger than the KAS 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:var(--fs-h1);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}
.prform textarea.prbio{min-height:76px;resize:vertical;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);padding:10px 12px;font:inherit;line-height:1.4}
/* 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],.prform textarea.prbio{font-size:16px}}
.prform .prpic{display:flex;align-items:center;gap:12px}
.prform .hint{margin:0}
.prform .prbio-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.prform .prbio-count{flex:none;color:var(--muted)}
.prform .prbio-count.over{color:var(--bad);font-weight:600}
/* 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:var(--fs-h1);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:var(--btn-h);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:var(--r-panel);background:var(--raise);padding:var(--panel-pad) var(--panel-pad) 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)}
.pairsub .up-src{margin-left:4px;padding:1px 6px;font-size:10.5px;vertical-align:1px}
/* No sideways scroll (owner, 2026-10-29): a holdings table narrower than its columns drops the price's and the share's
   second lines (the figures stay in the cells' tooltips); phones keep their own layout below. */
.ptable-wrap:has(.up-htable){container-type:inline-size}
@media(min-width:641px){
  @container (max-width:980px){
    .up-htable .up-hprice .pairsub,.up-htable .up-hshare .pairsub{display:none}
    .up-htable td:first-child{min-width:170px}
  }
}
.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-followwrap{flex:1 1 100%;justify-items:stretch}
  .up-follow-btn{width:100%}
  .up-err{text-align:left;max-width:none}
  .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:var(--r-tile);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:var(--btn-h);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:var(--btn-h-sm);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}}

/* The @username field of the profile editor and its availability line. */
.prform .handleinput{display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:var(--surface)}
.prform .handleinput span{color:var(--muted);font-weight:600}
.prform .handleinput input{border:none;background:none;padding:10px 0;flex:1;min-width:0;outline:none}
.handlestate.free,.handlestate.yours{color:var(--ok)}
.handlestate.taken{color:var(--bad)}
.up-handle{font-weight:600;color:var(--ink-2)}
/* The bio (owner, 2026-10-28): plain text with its line breaks, two lines until "more"; long words wrap. */
.up-bio{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:14px;line-height:1.45;color:var(--ink)}
.up-bio-text{white-space:pre-line;overflow-wrap:anywhere;min-width:0;max-width:62ch}
.up-bio-text.clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.up-bio-more{border:none;background:none;padding:0;font:inherit;font-size:13px;font-weight:600;color:var(--accent);cursor:pointer}
.up-followwrap{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.up-bell{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--muted);background:var(--surface)}
.up-bell.on{color:var(--accent);border-color:var(--accent)}
/* The wallet's KAS row at the top of Holdings. */
.up-kasmark{width:30px;height:30px;border-radius:50%;flex:none}
.up-src.wallet{background:var(--surface-2);color:var(--ink-2)}
/* Closed trades (owner, 2026-10-23): the summary and the order above the round trips. */
.closedhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.closedsum{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--ink-2)}
/* The profile editor ("Edit profile", ProfileEditor.tsx), on the glass sheet frame.
 * Each field is a `.prfield`: its label, its control and its hints close together, the fields further apart, so
 * the form reads as a list of fields rather than one run of lines. Labels are the strongest line, help text the
 * quietest. Theme colours come from the tokens (dark and light). */
.prsheet .prform{gap:20px;margin-top:4px}
/* The top row: the picture (itself the button, a camera badge on it) beside the display name and the @username. */
.prsheet .prtop{display:flex;align-items:center;gap:18px;min-width:0}
.prsheet .prform .prpic{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px}
.prsheet .prform label.prpic-btn{position:relative;display:block;width:76px;height:76px;border-radius:50%;cursor:pointer}
.prsheet .prpic-btn > :first-child{display:block;border-radius:50%;transition:filter .15s}
.prsheet .prpic-btn:hover > :first-child{filter:brightness(.82)}
.prsheet .prpic-btn:has(input:focus-visible){box-shadow:0 0 0 3px var(--accent-dim);border-radius:50%}
.prsheet .prpic-badge{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#04201c;border:2.5px solid var(--glass-solid,var(--bg));box-shadow:0 2px 8px rgba(0,0,0,.35);transition:transform .15s}
.prsheet .prpic-btn:hover .prpic-badge{transform:scale(1.08)}
.prsheet .prpic-busy{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;font-size:10.5px;font-weight:600}
.prsheet .prpic-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.prsheet .prpic-remove{background:none;border:none;padding:2px 4px;color:var(--muted);font:inherit;font-size:11.5px;cursor:pointer}
.prsheet .prpic-remove:hover{color:var(--bad)}
.prsheet .prnames{flex:1;min-width:0;display:grid;gap:12px}
/* The @username's hints under the whole row, close to it. */
.prsheet .prform .prhandle-hints{margin-top:-12px}
.prsheet .prfield{display:grid;gap:7px;min-width:0}
.prsheet .prform label{gap:7px}
.prsheet .prlabel{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.005em;line-height:1.3}
.prsheet .prform .hint{font-size:11.5px;line-height:1.45;color:var(--muted);margin:0}
.prsheet .prform .hint.handlestate.free,.prsheet .prform .hint.handlestate.yours{color:var(--ok)}
.prsheet .prform .hint.handlestate.taken{color:var(--bad)}

/* One control look for the text fields: the @username box matches the plain inputs. */
.prsheet .prform input[type=text],.prsheet .prform .handleinput,.prsheet .prform textarea.prbio{
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2);color:var(--ink);transition:border-color .15s,box-shadow .15s}
.prsheet .prform input[type=text]{height:42px;padding:0 13px}
.prsheet .prform .handleinput{height:42px;padding:0 13px;gap:2px}
.prsheet .prform .handleinput input[type=text]{height:40px;border:none;background:none;padding:0;box-shadow:none;border-radius:0}
.prsheet .prform input[type=text]::placeholder,.prsheet .prform textarea.prbio::placeholder{color:var(--muted)}
.prsheet .prform input[type=text]:focus,.prsheet .prform textarea.prbio:focus,.prsheet .prform .handleinput:focus-within{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.prsheet .prform .handleinput input[type=text]:focus{box-shadow:none}
.prsheet .prform .prbio-meta{margin-top:0}

/* The Kaspa name picker: a radio list, the dot and the name on one line, the reason a name cannot be shown under it. */
.prsheet .knpick{display:grid;gap:7px;margin:0;padding:0;border:none;min-width:0}
.prsheet .knpick legend{padding:0;margin:0 0 7px;float:none}
.prsheet .knpick > .hint:first-of-type{margin-top:-2px}
/* The options side by side, wrapping to a new row when they do not fit. */
.prsheet .knlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:2px 0}
.prsheet .prform label.knopt{display:flex;align-items:center;gap:11px;min-height:44px;padding:9px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:13px;cursor:pointer;min-width:0;
  transition:border-color .15s,background-color .15s}
.prsheet .knopt:hover{border-color:var(--surface-3)}
.prsheet .knopt:has(input:checked){border-color:var(--accent);background:var(--accent-dim)}
.prsheet .knopt:has(input:focus-visible){box-shadow:0 0 0 3px var(--accent-dim)}
.prsheet .knopt input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:0;border-radius:50%;
  border:1.5px solid var(--muted);background:transparent;display:grid;place-items:center;cursor:inherit;transition:border-color .15s}
.prsheet .knopt input::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .15s}
.prsheet .knopt input:checked{border-color:var(--accent)}
.prsheet .knopt input:checked::after{transform:scale(1)}
.prsheet .knopt input:focus-visible{outline:none}
.prsheet .knopt .kn-text{display:grid;gap:1px;min-width:0;flex:1}
.prsheet .knopt .kn-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;color:var(--ink);line-height:1.35}
.prsheet .knopt .kn-name.mono{font-size:12.5px}
.prsheet .knopt .kn-why{font-size:11.5px;line-height:1.35;color:var(--muted)}
/* A name that cannot be shown: still readable, quieter, its dot dashed, its reason under it. */
.prsheet .prform label.knopt.off{cursor:default;background:transparent;border-style:dashed}
.prsheet .knopt.off:hover{border-color:var(--line)}
.prsheet .knopt.off .kn-name{color:var(--ink-2)}
.prsheet .knopt.off input{border-style:dashed;opacity:.6}

/* More of the form below the body's edge: the edge fades, so a field under it reads as cut, not missing. */
.prsheet > .txbody.prmore{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 44px),transparent)}
.prsheet .txfoot .hint{font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:10px}

/* Desktop: a taller frame than the trade sheets' 760 px, so most of the form shows without scrolling. */
@media (min-width:901px){.txsheet.prsheet{max-height:min(880px,calc(100vh - 40px))}}
@media (max-width:900px){
  .prsheet .prform input[type=text],.prsheet .prform .handleinput{height:46px}
  .prsheet .prform .handleinput input[type=text]{height:44px}
}
@media (max-width:420px){
  .prsheet .prform{gap:18px}
  .prsheet .prtop{gap:14px}
  .prsheet .knlist{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .prsheet .prform label.knopt{padding:9px 11px}
}
@media (prefers-reduced-motion:reduce){
  .prsheet .knopt,.prsheet .knopt input,.prsheet .prpic-badge,.prsheet .prpic-btn > :first-child,.prsheet .knopt input::after,.prsheet .prform input[type=text],.prsheet .prform textarea.prbio{transition:none}
}
/* "Don't show a Kaspa name" wraps rather than being cut; only a name (mono) is shortened with an ellipsis. */
.prsheet .knopt .kn-name:not(.mono){white-space:normal}
/*
 * The token page's Comments tab (components/token/Comments.tsx) and the
 * chart's trader avatars tooltip (components/token/TradeChart.tsx). Built
 * from the design tokens of tokens.css, so both themes follow.
 *
 * Comments (redesign 2026-10-17): compact cards on the feed's surface, the author's identity and position up front
 * (name, Creator / holder badges, the holder's share and size), a quiet rail for replies, the composer with the
 * writer's avatar and a live character count, skeleton rows while loading and an empty state that invites the first
 * comment.
 */
.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}

/* ---------- composer ---------- */
.cmts{padding-top:2px}
.cmt-compose{display:flex;flex-direction:column;gap:8px;padding:12px 14px;margin:10px 0 8px;border:1px solid var(--line);
  border-radius:16px;background:var(--surface);transition:border-color .15s ease,box-shadow .15s ease}
.cmt-compose:not(.reply):not(.cmt-gate){display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;row-gap:8px}
.cmt-compose:not(.reply):not(.cmt-gate) > :not(.cmt-me){grid-column:2}
.cmt-me{grid-row:1 / span 2;line-height:0;padding-top:2px}
.cmt-compose.reply{margin:10px 0 2px;padding:10px 12px;border-radius:14px}
.cmt-compose textarea{width:100%;box-sizing:border-box;resize:none;min-height:44px;border:0;outline:0;background:transparent;
  color:var(--ink);font:inherit;font-size:14.5px;line-height:1.5;padding:6px 2px 2px}
.cmt-compose.reply textarea{min-height:34px;font-size:14px;padding-top:2px}
.cmt-compose textarea::placeholder{color:var(--muted)}
/* Phones: 16 px, below which iOS Safari zooms the page in on focus (mobile audit M-4). */
@media(max-width:900px){.cmt-compose textarea,.cmt-compose.reply textarea{font-size:16px}}
.cmt-compose:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.cmt-cbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--line-soft)}
.cmt-compose.reply .cmt-cbar{border-top:none;padding-top:0}
.cmt-attach{position:relative;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;color:var(--muted);cursor:pointer;flex:none}
.cmt-attach:hover,.cmt-attach:focus-within{color:var(--accent);background:var(--surface-2)}
.cmt-attach:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.cmt-attach input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.cmt-hint{flex:1 1 160px;min-width:0;font-size:12px;color:var(--muted)}
.cmt-hint.bad,.cmt-count.bad{color:var(--bad)}
.cmt-count{font-size:11.5px;color:var(--ink-2);font-variant-numeric:tabular-nums;padding:2px 7px;border-radius:999px;background:var(--surface-2)}
.cmt-count.near{color:var(--warn)}
.cmt-count.bad{background:color-mix(in srgb,var(--bad) 14%,transparent);font-weight:600}
.cmt-btn{flex:none;height:36px;padding:0 18px;border-radius:11px;background:var(--accent);color:var(--accent-ink);font-size:14px;font-weight:600;
  transition:filter .15s ease,opacity .15s ease}
.cmt-btn:hover:not(:disabled){filter:brightness(1.08)}
.cmt-btn:disabled{opacity:.45;cursor:not-allowed}
.cmt-cancel{margin:0}
.cmt-gate{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 14px;font-size:13.5px;color:var(--ink-2)}
.cmt-gate span{flex:1 1 240px}
.cmt-err{color:var(--bad);font-size:12.5px;margin:0}
.cmt-err.small{font-size:12px}
.cmt-picprev{position:relative;width:96px;height:96px;border-radius:12px;overflow:hidden;background:var(--surface-2)}
.cmt-picprev img{width:100%;height:100%;object-fit:cover;display:block}
.cmt-picprev .skl{display:block;width:100%;height:100%}
.cmt-picprev .txx{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;
  display:grid;place-items:center;font-size:16px;line-height:1}

/* ---------- the new-comments pill ---------- */
.cmt-pillrow{position:sticky;top:12px;z-index:5;display:flex;justify-content:center;height:0;overflow:visible}
.cmt-pill{transform:translateY(4px);padding:7px 16px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:13px;
  font-weight:600;box-shadow:0 6px 24px var(--glow);animation:cmtpill .25s ease-out}
@keyframes cmtpill{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(4px)}}

/* ---------- empty and loading ---------- */
.cmt-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:40px 20px 36px}
.cmt-empty b{margin-bottom:2px}
.cmt-emptyicon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:10px;border-radius:16px;background:var(--accent-dim);color:var(--accent)}
.cmt-emptyicon svg{width:24px;height:24px}
.cmt-empty .cmt-btn{margin-top:14px}
.cmt-btn.ghostbtn{background:transparent;color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cmt-btn.ghostbtn:hover{background:var(--accent-dim);filter:none}
.cmt-sk .cmt-skhead{display:flex;gap:10px}
.cmt-sk .cmt-skhead .skl{display:inline-block}

/* ---------- the thread ---------- */
.cmt-list,.cmt-replies{list-style:none;margin:0;padding:0}
.cmt-list{overflow-anchor:auto}
.cmt{display:flex;gap:12px;padding:14px 6px;border-top:1px solid var(--line-soft);scroll-margin-top:90px;border-radius:0;transition:background .2s ease}
.cmt-list > .cmt:first-child{border-top:none}
.cmt-list > .cmt:hover{background:color-mix(in srgb,var(--surface) 60%,transparent)}
.cmt-replies{position:relative;margin-top:8px;padding-left:14px}
.cmt-replies::before{content:"";position:absolute;left:0;top:2px;bottom:8px;width:2px;border-radius:2px;background:var(--line)}
.cmt-replies .cmt{padding:8px 0 4px;border-top:none}
.cmt-replies .cmt:hover{background:transparent}
.cmt-av{flex:none;line-height:0;border-radius:50%;height:max-content}
.cmt-av .crav{box-shadow:0 0 0 1px var(--line)}
.cmt-main{flex:1;min-width:0}
.cmt-head{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;font-size:13px;line-height:1.35}
.cmt-name{color:var(--ink);font-weight:600;text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmt-name:hover{color:var(--accent)}
.cmt-addr{color:var(--muted);font-size:11.5px}
.cmt-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:1px 7px;border-radius:999px;background:var(--surface-2);
  color:var(--ink-2);white-space:nowrap;line-height:1.6}
.cmt-badge.creator{background:var(--accent-dim);color:var(--accent)}
.cmt-badge.holder{color:var(--ink-2);font-variant-numeric:tabular-nums}
.cmt-badge.holder .cmt-pos{font-size:10.5px;font-weight:500;color:var(--ink-2);padding-left:5px;border-left:1px solid var(--line)}
.cmt-badge.holder.t2 .cmt-pos{color:inherit}
.cmt-badge.holder.t2{background:var(--buy-dim);color:var(--buy)}
.cmt-badge.holder.t3{background:var(--buy);color:var(--buy-ink)}
.cmt-badge.holder.t3 .cmt-pos{color:inherit;opacity:.8;border-left-color:currentColor}
.cmt-badge.you{color:var(--muted);font-weight:500;background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
.cmt-time{margin-left:auto;display:inline-flex;gap:8px;color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.cmt-no{font-size:11px;opacity:.8}
.cmt-body{margin-top:4px;font-size:14.5px;line-height:1.55;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;outline:none}
.cmt-replies .cmt-body{font-size:14px}
.cmt-quote{display:inline;padding:0 3px;border-radius:5px;color:var(--accent);font-size:.92em;background:var(--accent-dim);cursor:pointer}
.cmt-quote:hover{filter:brightness(1.12)}
.cmt-pic{display:block;margin-top:8px;padding:0;border:0;background:var(--surface-2);border-radius:12px;overflow:hidden;width:200px;max-width:100%;
  aspect-ratio:1;cursor:zoom-in}
.cmt-pic.big{width:420px;cursor:zoom-out}
.cmt-pic img{width:100%;height:100%;object-fit:cover;display:block}
.cmt-pic.none{display:inline-block;width:auto;aspect-ratio:auto;padding:6px 10px;font-size:12px;color:var(--muted);cursor:default}
.cmt-actions{display:flex;align-items:center;gap:2px;margin-top:4px;margin-left:-8px}
.cmt-actions button{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 9px;border-radius:9px;font-size:12.5px;color:var(--muted);
  transition:color .15s ease,background .15s ease}
.cmt-actions button:hover:not(:disabled){color:var(--ink);background:var(--surface-2)}
.cmt-like .mono{font-size:12px;min-width:1ch}
.cmt-like:hover:not(:disabled){color:var(--bad)!important}
.cmt-like.on{color:var(--bad)}
.cmt-like.on .cmt-heart{animation:cmtheart .3s cubic-bezier(.2,.9,.3,1.4)}
@keyframes cmtheart{from{transform:scale(.6)}to{transform:none}}
.cmt-like:disabled{opacity:.7;cursor:default}
.cmt-status{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:6px;font-size:12.5px;color:var(--muted)}
.cmt-status .back{margin:0}
.cmt.signing,.cmt.sending{opacity:.72}
.cmt.failed .cmt-body{color:var(--ink-2)}
.cmt-more .back{margin:2px 0 0;font-size:12.5px;color:var(--accent)}
.cmt.in{animation:cmtin .9s ease-out}
.cmt.flash{animation:cmtflash 1.6s ease-out}
@keyframes cmtin{from{background:var(--accent-dim)}to{background:transparent}}
@keyframes cmtflash{0%,30%{background:var(--accent-dim)}100%{background:transparent}}
@media (prefers-reduced-motion: reduce){
  .cmt.in,.cmt.flash,.cmt-pill,.cmt-like.on .cmt-heart{animation:none}
}
@media (max-width: 560px){
  .cmt{gap:10px;padding:12px 2px}
  .cmt-time{margin-left:0}
  .cmt-pic.big{width:100%}
  .cmt-hint{flex-basis:100%;order:3}
  .cmt-post{margin-left:auto}
  .cmt-compose:not(.reply):not(.cmt-gate){grid-template-columns:28px minmax(0,1fr);column-gap:10px}
  .cmt-me .crav{width:28px!important;height:28px!important}
  .cmt-replies{padding-left:12px}
  /* The name links to the profile (the address is its title): no room for the address itself on a phone. */
  .cmt-addr{display:none}
}

/* ---------- chart overlay cards (commenter avatars, My swaps) ----------
 * One card for both overlays: a raised surface with a hairline border and a soft shadow, a caret pointing at the
 * marker or avatar (`--caret`, set from the card's placement: above the anchor when it fits, else below, kept inside
 * the chart's edges), a gentle rise on appearing (none under reduced motion).
 */
.lwc-avtip{position:absolute;z-index:3;pointer-events:auto;min-width:160px;max-width:260px;padding:10px 12px 11px;border-radius:12px;
  background:var(--surface-3);color:var(--ink);border:1px solid var(--line);font-size:12.5px;line-height:1.45;
  box-shadow:0 12px 32px -8px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.2);animation:lwccard .14s ease-out}
:root[data-theme="light"] .lwc-avtip{background:var(--surface);box-shadow:0 12px 32px -10px rgba(16,24,40,.24),0 2px 6px rgba(16,24,40,.08)}
@keyframes lwccard{from{opacity:0;translate:0 4px}to{opacity:1;translate:0 0}}
.lwc-avtip.below{animation-name:lwccardb}
@keyframes lwccardb{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
/* The caret: a small rotated square in the card's own colours, on the edge facing the anchor. */
.lwc-avtip::after{content:"";position:absolute;left:var(--caret,50%);bottom:-6px;width:10px;height:10px;margin-left:-5px;background:var(--surface-3);
  border:1px solid var(--line);border-top:0;border-left:0;transform:rotate(45deg);border-bottom-right-radius:2px}
:root[data-theme="light"] .lwc-avtip::after{background:var(--surface)}
.lwc-avtip.below::after{bottom:auto;top:-6px;transform:rotate(225deg)}
.lwc-avtip a{color:var(--ink);font-weight:600;text-decoration:none}
.lwc-avtip a:hover{color:var(--accent)}
.lwc-avtip .side.buy{color:var(--buy);font-weight:600}
.lwc-avtip .side.sell{color:var(--sell);font-weight:600}
.lwc-avtip .m{color:var(--muted)}
.lwc-avtip .av-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;white-space:nowrap}
.lwc-avtip .av-h a{min-width:0;overflow:hidden;text-overflow:ellipsis}
.lwc-avtip .av-h .m{flex:none;font-size:11.5px;font-variant-numeric:tabular-nums}
.chartctl .avbtn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.lwc-avlist{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lwc-avtip .c{color:var(--ink-2);white-space:normal;overflow-wrap:anywhere;margin:4px 0 0;font-size:13px;line-height:1.5}
@media (prefers-reduced-motion: reduce){.lwc-avtip{animation:none}}

/* ---------- chart trade markers (My swaps) ---------- */
.lwc:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:10px}
.lwc-mkchip{position:absolute;z-index:3;left:8px;top:8px;display:inline-flex;align-items:center;gap:8px;padding:5px 10px;border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);font-size:12px;color:var(--muted);white-space:nowrap;max-width:calc(100% - 16px);overflow:hidden}
.lwc-mkchip button{color:var(--accent);font-weight:600;font-size:12px;padding:0}
.lwc-mkchip button::before{content:"·";color:var(--muted);margin-right:8px;font-weight:400}
.lwc-mkchip[data-state="error"]{color:var(--ink-2)}
/* The side's colour runs along the card's top edge (a 2 px rule), the rest is the shared card. */
.lwc-mktip{--mk-side:var(--buy);min-width:0;max-width:340px;padding-top:11px;overflow:visible}
.lwc-mktip[data-side="sell"]{--mk-side:var(--sell)}
.lwc-mktip::before{content:"";position:absolute;left:12px;right:12px;top:-1px;height:2px;border-radius:0 0 2px 2px;background:var(--mk-side)}
.lwc-mktip.pinned{min-width:250px}
.lwc-mktip .side.buy{color:var(--buy)}.lwc-mktip .side.sell{color:var(--sell)}
.lwc-mktip .mk-h{display:flex;align-items:center;gap:10px;white-space:nowrap}
.lwc-mktip .mk-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px 2px 7px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.5;
  letter-spacing:.01em}
.lwc-mktip .mk-chip.buy{color:var(--buy);background:var(--buy-dim);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--buy) 30%,transparent)}
.lwc-mktip .mk-chip.sell{color:var(--sell);background:var(--sell-dim);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--sell) 30%,transparent)}
.lwc-mktip .mk-chev{flex:none}
.lwc-mktip .mk-time{font-size:11.5px;font-variant-numeric:tabular-nums;margin-left:auto}
.lwc-mktip .mk-main{margin-top:8px;font-size:15.5px;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.005em}
.lwc-mktip .mono{font-size:11.5px}
.lwc-mktip .mk-status{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:var(--warn)}
.lwc-mktip .mk-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:mkpulse 1.4s ease-in-out infinite}
.lwc-mktip[data-state="dropped"] .mk-status{color:var(--bad)}
.lwc-mktip[data-state="dropped"] .mk-status::before{animation:none}
@keyframes mkpulse{50%{opacity:.35}}
.lwc-mktip .mk-list{list-style:none;margin:10px 0 0;padding:8px 0 0;border-top:1px solid var(--line);display:grid;gap:1px}
.lwc-mktip .mk-list li{display:grid;grid-template-columns:auto minmax(0,1fr) 20px;gap:10px;align-items:center;white-space:nowrap;font-size:12px;line-height:1.35;
  padding:2px 6px;margin:0 -6px;border-radius:7px;font-variant-numeric:tabular-nums}
.lwc-mktip .mk-list li:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.lwc-mktip .mk-list li > span:nth-child(2){overflow:hidden;text-overflow:ellipsis}
.lwc-mktip .mk-list a{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;color:var(--accent);font-weight:500}
.lwc-mktip .mk-list a:hover{background:var(--accent-dim);color:var(--accent)}
.lwc-mktip .mk-f{display:flex;align-items:center;gap:12px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line-soft)}
.lwc-mktip .mk-f a{margin-left:auto;color:var(--accent);font-weight:600;font-size:12.5px}
.lwc-mktip .mk-f a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.lwc-mktip .mk-more{color:var(--accent);font-weight:600;font-size:12.5px;padding:0}
.lwc-mktip .mk-more:hover{text-decoration:underline;text-underline-offset:2px}
.lwc-mktip .mk-close{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;margin:-4px -6px -4px 0;border-radius:7px;color:var(--muted);
  font-size:12px;line-height:1}
.lwc-mktip .mk-close:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 8%,transparent)}
@media (prefers-reduced-motion: reduce){.lwc-mktip .mk-status::before{animation:none}}
/* Phones: the card is a sheet at the bottom of the screen, over the Buy/Sell bar (65), under the trade sheet (68+). */
@media(max-width:560px){
  .lwc-mktip,.lwc-mktip.below{position:fixed;left:0!important;right:0;top:auto!important;bottom:0;transform:none;z-index:66;min-width:0;max-width:none;max-height:70vh;max-height:70dvh;overflow-y:auto;
    border-radius:18px 18px 0 0;padding:24px 18px calc(16px + env(safe-area-inset-bottom));font-size:13px;border-bottom:0;
    box-shadow:0 -12px 36px rgba(0,0,0,.4);animation:mksheet .2s cubic-bezier(.2,.8,.2,1)}
  :root[data-theme="light"] .lwc-mktip,:root[data-theme="light"] .lwc-mktip.below{box-shadow:0 -12px 36px rgba(16,24,40,.18)}
  @keyframes mksheet{from{translate:0 24px;opacity:.4}to{translate:0 0;opacity:1}}
  /* A grab handle in the side's colour in place of the rule and the caret. */
  .lwc-mktip::before{display:none}
  .lwc-mktip::after,.lwc-mktip.below::after,:root[data-theme="light"] .lwc-mktip::after{left:50%;top:9px;bottom:auto;width:36px;height:4px;margin-left:-18px;
    border:0;border-radius:2px;transform:none;background:var(--mk-side)}
  .lwc-mktip .mk-main{font-size:18px;margin-top:10px}
  .lwc-mktip .mono{font-size:12.5px}
  .lwc-mktip .mk-list li{grid-template-columns:auto minmax(0,1fr) 32px;font-size:13px;padding:5px 6px}
  .lwc-mktip .mk-list a{width:32px;height:32px}
  .lwc-mktip .mk-close{width:36px;height:36px;font-size:15px;margin:-8px -8px -8px 0}
  .lwc-mktip .mk-f a,.lwc-mktip .mk-more{font-size:14px;padding:6px 0}
}
@media (max-width:560px) and (prefers-reduced-motion: reduce){.lwc-mktip,.lwc-mktip.below{animation:none}}
/* The Trades tab filtered to the wallet. */
.feedfilter{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 8px;padding:7px 12px;border-radius:999px;
  background:var(--accent-dim);color:var(--ink);font-size:12.5px}
.feedfilter .back{color:var(--accent);font-weight:600;font-size:12.5px;padding:0}

/*
 * The round Track trader button at the right end of the activity tabs: a crosshair, or the tracked trader's avatar ringed
 * in their hue (`--hue`, the ring their markers carry) with a small ✕ on its corner. The picker is a popover under it,
 * a sheet on a phone.
 */
.trackwrap{position:relative;display:inline-flex;flex:none;margin-left:8px}
.trackicon{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--line);color:var(--muted);cursor:pointer;transition:color .12s,border-color .12s,background .12s}
.trackicon:hover,.trackicon[aria-expanded="true"]{color:var(--ink);border-color:var(--ink-2)}
.trackicon:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.trackchip{--tk:hsl(var(--hue) 70% 62%);position:relative;display:inline-flex}
:root[data-theme="light"] .trackchip{--tk:hsl(var(--hue) 70% 40%)}
.trackchip .trackicon.on{border:0;background:none;line-height:0;box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--tk),0 0 0 7px color-mix(in srgb,var(--tk) 16%,transparent)}
.trackchip .trackx{position:absolute;top:-5px;right:-5px;display:inline-grid;place-items:center;width:16px;height:16px;padding:0;border-radius:50%;
  background:var(--surface-3);border:1px solid var(--line);color:var(--muted);cursor:pointer}
.trackchip .trackx:hover{color:var(--ink);border-color:var(--ink-2)}
.trackpick{position:absolute;z-index:20;top:calc(100% + 8px);right:0;width:320px;max-width:calc(100vw - 32px);padding:12px;border-radius:14px;
  text-align:left;animation:lwccard .14s ease-out}
/* Both themes: the glass frame's popover (`.gpop.glass`, glass-sheet.css) sets its surface, edge and shadow. */
.trackpick-h{font-size:13px;font-weight:600;margin:0 2px 8px}
.trackpick input{width:100%;box-sizing:border-box;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink);font-size:13.5px;outline:0}
.trackpick input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.trackpick input[aria-invalid="true"]{border-color:var(--bad)}
.trackpick-list,.trackpick-list ul{list-style:none;margin:0;padding:0}
.trackpick-list{max-height:300px;overflow-y:auto;margin-top:6px}
.trackpick-g{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:8px 4px 4px}
.trackopt{display:flex;align-items:center;gap:10px;padding:6px;border-radius:10px;cursor:pointer}
.trackopt.on{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.trackopt-av{--tk:hsl(var(--hue) 70% 62%);line-height:0;border-radius:50%;box-shadow:0 0 0 2px var(--surface-3),0 0 0 3.5px var(--tk)}
:root[data-theme="light"] .trackopt-av{--tk:hsl(var(--hue) 70% 40%);box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--tk)}
.trackopt-main{display:flex;flex-direction:column;min-width:0}
.trackopt-main b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trackopt-main .mono{font-size:11px;color:var(--muted)}
.trackpick-s{font-size:12px;color:var(--muted);padding:6px 4px 0;min-height:1em}
.trackpick-s:empty{display:none}
.trackpick-s.bad{color:var(--bad)}
@media (max-width:560px){
  .trackpick{position:fixed;left:0;right:0;top:auto;bottom:0;width:auto;max-width:none;border-radius:18px 18px 0 0;
    padding:16px 16px calc(16px + env(safe-area-inset-bottom));z-index:66;animation:mksheet .2s cubic-bezier(.2,.8,.2,1)}
  .trackpick input{height:44px;font-size:16px}
  .trackopt{padding:9px 6px}
}
@media (prefers-reduced-motion: reduce){.trackpick{animation:none}}
/* A tracked trader's card names them: their hue as a small ring beside the name. */
.lwc-mktip .mk-who{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--ink-2);margin:-2px 0 8px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.lwc-mktip .mk-hue{--tk:hsl(var(--hue) 70% 62%);flex:none;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 2.5px var(--tk)}
:root[data-theme="light"] .lwc-mktip .mk-hue{--tk:hsl(var(--hue) 70% 40%)}
/* A Trades or Holders row's "Show on chart". */
.fshowchart{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:6px;border-radius:7px;color:var(--muted);vertical-align:middle}
.fshowchart:hover{color:var(--accent);background:var(--accent-dim)}
a.ghost.pact{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);white-space:nowrap}
/* The average-entry rail toggle (phase 3): a dashed glyph, the accent when on. */
.chartctl .railbtn{display:inline-flex;align-items:center;gap:6px}
.chartctl .vwapbtn.railbtn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
/*
 * Token locks: the Lock dialog, the claim and extend sheets, My locks, the token page's badge and Locks tab.
 *
 * The sheets wear the shared glass frame (glass-sheet.css on the glass.css tokens: the frosted panel, the edge light,
 * the stepper's beads, the glossy pill, spring motion and the solid fallbacks); this file adds what only the lock
 * sheets hold (the amount field, the vesting tile, the release table, the warnings, the tick). Below the sheet rules:
 * the page parts (My locks, the Locks tab, the badge, the proof page) in the same look on the page's solid surfaces.
 *
 * `prefers-reduced-motion` stops this file's animations and hover lifts too.
 */
.locksheet{max-width:560px}
@media(max-width:900px){.locksheet{max-width:none}}
.lkintro{font-size:13px;color:var(--ink-2,var(--muted));margin:0 0 14px;line-height:1.45}
.lkamount{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:0 12px;height:44px}
.lkamount input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-size:17px;outline:none}
.lkquick{display:flex;gap:8px;margin-top:6px}
.lkquick .ghost{height:30px;padding:0 12px;font-size:12px}
.lksub{font-size:11.5px;color:var(--muted);line-height:1.45}
.lksub.warn{color:var(--warn)}
.lkinput{height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);padding:0 12px;font:inherit;width:100%;box-sizing:border-box;margin-top:6px}
@media(max-width:900px){.lkinput,.lkamount input{font-size:16px}}
.lktick-row{display:flex !important;align-items:flex-start;gap:8px;font-size:12.5px !important;color:var(--ink) !important;justify-content:flex-start !important;cursor:pointer;margin:8px 0}
.lktick-row input{margin-top:2px;accent-color:var(--accent)}
.lkvest{display:grid;gap:8px;padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.lkvest label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.lkvest > span{font-size:12px;color:var(--muted)}
.lktimeline{margin:4px 0 8px}
.lkbar{position:relative;height:10px;border-radius:99px;background:var(--surface-2);
  box-shadow:inset 0 1px 2px var(--lk-inset),inset 0 0 0 1px var(--line)}
.lkbar::before{content:"";position:absolute;inset:0;border-radius:inherit;transform-origin:left;
  background:linear-gradient(180deg,rgba(255,255,255,.30),transparent 60%),
    linear-gradient(90deg,color-mix(in srgb,var(--accent) 18%,transparent),var(--accent));
  animation:lkfill .9s var(--lk-ease) both}
.lktick{position:absolute;z-index:1;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9) 0 16%,transparent 48%),var(--accent);
  box-shadow:0 0 0 2px var(--lk-ring),0 0 10px var(--glow);animation:lkbead .5s .25s var(--lk-spring) both}
@keyframes lkfill{from{transform:scaleX(0)}to{transform:none}}
@keyframes lkbead{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}to{opacity:1;transform:translate(-50%,-50%)}}
.lkbarlab{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:6px}
.lktable{width:100%;border-collapse:collapse;font-size:12px;margin:6px 0}
.lktable th{font-weight:500;color:var(--muted);text-align:left;padding:4px 6px;border-bottom:1px solid var(--line-soft)}
.lktable td{padding:4px 6px;border-bottom:1px solid var(--line-soft)}
.lktable .r{text-align:right}
.lkwarn{margin-top:14px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--warn) 9%,transparent);font-size:12px;line-height:1.45}
.lkwarn ul{margin:6px 0 0;padding-left:18px;display:grid;gap:4px}
.lkfinal{display:grid;gap:3px;margin:0 0 10px;padding:10px 12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 12%,transparent);font-size:12.5px;line-height:1.45}
.lkfinal b{color:var(--warn);font-size:13px}
.lkfinal-to{font-weight:600}
.lkproblem{font-size:12px;color:var(--warn);margin:0 0 8px}
/* The token page's badge (next to the seal badge) and the creator's styling. */
/* A glass pill: a sheen along its top, a light sweep across it on hover; the creator's is tinted teal and glows. */
.lockbadge{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:99px;
  border:1px solid var(--line);color:var(--ink);font-size:12px;cursor:pointer;white-space:nowrap;
  background:linear-gradient(180deg,var(--lk-sheen),transparent 70%),var(--surface-2);
  box-shadow:inset 0 1px 0 var(--glass-highlight);transition:transform .4s var(--lk-spring),border-color .2s ease,box-shadow .25s ease}
.lockbadge::after{content:"";position:absolute;inset:0;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%)}
.lockbadge:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.lockbadge:hover::after{transform:translateX(120%);transition:transform .8s var(--lk-ease)}
.lockbadge:active{transform:scale(.96)}
.lockbadge.creator{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent);
  background:linear-gradient(180deg,var(--lk-sheen),transparent 70%),color-mix(in srgb,var(--accent) 12%,var(--surface-2));
  box-shadow:inset 0 1px 0 var(--glass-highlight),0 0 16px -6px var(--glow)}
/* The Locks tab and My locks: glass cards on the page's surface, a soft lift on hover, a release due glows. */
.lksum{display:grid;gap:4px;font-size:12.5px;margin:10px 0;padding:12px 14px;border-radius:var(--r-card);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--lk-sheen),transparent 1.5px),radial-gradient(120% 140% at 0% 0%,var(--lk-tint),transparent 60%),var(--raise);
  box-shadow:inset 0 1px 0 var(--glass-highlight)}
.lkrow .lkchip{margin-left:6px}
.frow.lkrow{border-radius:16px;padding-left:10px;padding-right:10px;transition:background .25s ease}
.frow.lkrow:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}
.frow.lkrow .fdir{background:radial-gradient(circle at 50% 15%,rgba(255,255,255,.22),transparent 65%),var(--accent-dim);
  box-shadow:inset 0 1px 0 var(--glass-highlight),0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.lkrow .ghost.pact{border-radius:999px;transition:transform .4s var(--lk-spring),border-color .2s ease,box-shadow .25s ease}
.lkrow .ghost.pact:not(:disabled):hover{box-shadow:0 0 18px -8px var(--glow)}
.lkrow .ghost.pact:not(:disabled):active{transform:scale(.95)}
.lkholder{display:block;font-size:11px;color:var(--muted)}
.lkdue{color:var(--accent);display:inline-flex;align-items:center;gap:6px}
.lkdue::before{content:"";width:7px;height:7px;border-radius:50%;flex:none;background:var(--accent);
  box-shadow:0 0 0 0 var(--glow);animation:lkdue 1.8s ease-out infinite}
/* My locks: one list of glass cards in a grid that follows the panel's width (1 to 3 a row), never sideways. */
.lkmine{container:lkmine/inline-size;min-width:0}
.lkmine .lkhint{font-size:11.5px;color:var(--muted);margin:14px 0 0}
/* The filters: segmented glass pills, the count beside each. */
.lkfilter{display:flex;flex-wrap:wrap;gap:4px;width:fit-content;max-width:100%;padding:4px;border-radius:999px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--lk-sheen),transparent 1.5px),var(--surface-2);box-shadow:inset 0 1px 3px var(--lk-inset)}
.lkfilter button{display:inline-flex;align-items:center;gap:6px;padding:var(--tab-py) var(--tab-px);border-radius:999px;font-size:var(--tab-fs);font-weight:500;color:var(--muted);
  white-space:nowrap;transition:background .3s ease,color .2s ease,box-shadow .3s ease,transform .45s var(--lk-spring)}
.lkfilter button:not(:disabled):hover{color:var(--ink)}
.lkfilter button:not(:disabled):active{transform:scale(.94)}
.lkfilter button:disabled{opacity:.45;cursor:default}
.lkfilter button[aria-pressed="true"]{color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.03)),color-mix(in srgb,var(--accent) 16%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 6px 16px -8px var(--glow)}
.lkf-n{font-size:11.5px;color:var(--muted)}
/* A narrow panel: the four pills as a 2 × 2 glass grid (never a row that scrolls sideways). */
@container lkmine (max-width:520px){
  .lkfilter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;border-radius:20px}
  .lkfilter button{justify-content:center;border-radius:16px;min-width:0;white-space:normal;text-align:center}
}
.lkfilter button[aria-pressed="true"] .lkf-n{color:var(--accent)}
.lkgrid{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@container lkmine (min-width:600px){.lkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container lkmine (min-width:940px){.lkgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@supports not (container-type:inline-size){@media(min-width:760px){.lkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}}
/* The token page's Locks tab: a glass summary over the cards (the share of supply locked, its bar, the next unlock,
   the creator's wallet, liquidity locked), side by side when the panel is wide, stacked when it is narrow. */
.lkhero{display:grid;gap:16px 28px;grid-template-columns:minmax(0,1fr);margin:12px 0 0;padding:var(--panel-pad);border-radius:var(--r-panel);
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  background:linear-gradient(180deg,var(--lk-sheen),transparent 1.5px),radial-gradient(90% 140% at 0% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 62%),var(--surface);
  box-shadow:inset 0 1px 0 var(--glass-highlight),0 26px 50px -38px rgba(0,0,0,.7),0 0 42px -26px var(--glow);animation:lkin .45s var(--lk-spring) both}
@container lkmine (min-width:720px){.lkhero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}}
.lkh-k{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.lkh-v{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-top:4px}
.lkh-v b{font-size:40px;line-height:1.05;letter-spacing:-.02em;font-weight:700}
.lkh-v span{font-size:15px;color:var(--ink-2)}
.lkh-bar{position:relative;height:10px;margin:14px 0 8px;border-radius:999px;overflow:hidden;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(255,255,255,.04)),var(--surface-2);box-shadow:inset 0 1px 3px var(--lk-inset)}
.lkh-bar span{position:absolute;inset:0 auto 0 0;border-radius:inherit;transform-origin:left center;animation:lkfill .9s var(--lk-spring) both;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 60%),var(--accent);box-shadow:0 0 14px -2px var(--glow)}
.lkh-sub{font-size:12.5px;color:var(--muted)}
.lkh-facts{display:grid;gap:10px;margin:0;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.lkh-facts>div{display:grid;gap:3px;padding:12px 14px;border-radius:var(--r-tile);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--lk-sheen),transparent 1.5px),var(--raise);box-shadow:inset 0 1px 0 var(--glass-highlight)}
.lkh-facts dt{font-size:11px;color:var(--muted)}
.lkh-facts dd{display:grid;gap:2px;margin:0}
.lkh-facts dd b{font-size:15px}
.lkh-facts dd span{font-size:11.5px;color:var(--muted)}
/* Locked forever: the pool's graduation liquidity, above the vesting locks, with its own infinity mark. */
.lkforever{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;align-items:center;margin:12px 0 0;padding:var(--panel-pad);border-radius:var(--r-panel);
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  background:linear-gradient(180deg,var(--lk-sheen),transparent 1.5px),radial-gradient(70% 160% at 100% 0%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 65%),var(--surface);
  box-shadow:inset 0 1px 0 var(--glass-highlight),0 0 48px -24px var(--glow);animation:lkin .45s var(--lk-spring) both}
.lkf-glyph{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;font-size:30px;line-height:1;color:var(--accent);
  background:radial-gradient(circle at 50% 15%,rgba(255,255,255,.25),transparent 65%),var(--accent-dim);
  box-shadow:inset 0 1px 0 var(--glass-highlight),0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent),0 0 24px -8px var(--glow)}
.lkf-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:2px 0 4px}
.lkf-v b{font-size:24px;letter-spacing:-.01em}
.lkf-v span{font-size:14px;color:var(--ink-2)}
.lkf-note{grid-column:1 / -1;margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
@media(prefers-reduced-motion:reduce){.lkforever{animation:none}}
/* A token page card's head: a lock glyph tile in place of the token's mark. */
.lkc-glyph{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:14px;color:var(--accent);
  background:radial-gradient(circle at 50% 15%,rgba(255,255,255,.22),transparent 65%),var(--accent-dim);
  box-shadow:inset 0 1px 0 var(--glass-highlight),0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)}
.lkc-glyph svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes lkfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.lkhero,.lkh-bar span{animation:none}}
/* A card: the glass of the proof page's cards, a soft lift on hover; a due release glows; a finished lock is quiet. */
.lkcard{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:var(--sp-4);border-radius:var(--r-panel);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--lk-sheen),transparent 1.5px),radial-gradient(120% 70% at 0% 0%,var(--lk-tint),transparent 60%),var(--surface);
  box-shadow:inset 0 1px 0 var(--glass-highlight),0 22px 44px -34px rgba(0,0,0,.65);
  animation:lkin .45s var(--lk-spring) both;transition:transform .45s var(--lk-spring),border-color .25s ease,box-shadow .3s ease}
.lkcard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.lkcard.is-due{border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  box-shadow:inset 0 1px 0 var(--glass-highlight),0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent),0 18px 44px -26px var(--glow)}
.lkcard.is-done{opacity:.62;background:linear-gradient(180deg,var(--lk-sheen),transparent 1.5px),var(--surface)}
.lkcard.is-done:hover{opacity:.85}
.lkc-top{display:flex;align-items:center;gap:12px;min-width:0}
.lkc-token{display:flex;align-items:center;gap:11px;min-width:0;flex:1;color:var(--ink);text-decoration:none;border-radius:14px}
.lkc-token .txmark{box-shadow:0 0 0 1px var(--glass-line),0 8px 18px -10px rgba(0,0,0,.6)}
.lkc-face{width:40px;height:40px;background:var(--surface-3)}
.lkc-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.lkc-name{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}
.lkc-token:hover .lkc-name{color:var(--accent)}
.lkc-amt{font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The lock's time passed: a glass ring that fills in the accent as the clock runs (owner, 2026-11-01). */
.lkc-ring{position:relative;flex:none;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 50% 15%,rgba(255,255,255,.10),transparent 60%),var(--surface-2);box-shadow:inset 0 1px 0 var(--glass-highlight)}
.lkc-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.lkc-ring circle{fill:none;stroke-width:4.5;stroke-linecap:round}
.lkc-ring .t{stroke:var(--line)}
/* The ring draws in once, then (fill "backwards", so the animation lets go) a new release sweeps it with a transition. */
.lkc-ring .f{stroke:var(--accent);filter:drop-shadow(0 0 3px var(--glow));animation:lkringin .9s .1s var(--lk-ease) backwards;transition:stroke-dasharray 1s var(--lk-ease),opacity .3s ease}
.lkc-ring .f.zero{opacity:0}
@keyframes lkringin{from{stroke-dasharray:0 100}}
.lkc-ring span{position:absolute;inset:0;display:grid;place-items:center;font-size:11.5px;font-weight:600;color:var(--ink)}
/* The releases before the last: dots on the ring, lit once paid. A due or releasing lock's ring breathes. */
.lkc-ring circle.mk{stroke:none;fill:var(--ink-2);opacity:.7}
.lkc-ring circle.mk.paid{fill:var(--accent-ink);opacity:1}
.lkc-ring.due .f{animation:lkringdue 1.6s ease-in-out infinite}
@keyframes lkringdue{50%{opacity:.55}}
/* The next unlock: a tile; due glows in the accent. */
.lkc-next{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;padding:10px 12px;border-radius:16px;
  font-size:13px;color:var(--ink-2);border:1px solid var(--line);background:var(--surface-2)}
.lkc-next b{font-weight:600;color:var(--ink)}
.lkc-next .mono{font-size:12.5px;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.lkc-next.due{border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  background:radial-gradient(120% 160% at 0% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 65%),var(--surface-2)}
.lkc-next b.lkdue{color:var(--accent)}
.lkc-facts{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin:0}
.lkc-facts > div{min-width:0}
.lkc-facts > div:last-child{text-align:right}
.lkc-facts dt{font-size:11px;color:var(--muted);margin-bottom:2px}
.lkc-facts dd{margin:0;font-size:12.5px;overflow-wrap:anywhere}
.lkc-tr{display:block;margin-top:1px;font-size:11px;color:var(--muted)}
.lkc-chips{display:flex;flex-wrap:wrap;gap:6px}
.lkc-chips:empty{display:none}
.lkc-chip{font-size:11.5px;font-weight:500;padding:3px 10px;border-radius:99px;color:var(--ink-2);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--lk-sheen),transparent 70%),var(--surface-2);white-space:nowrap}
.lkc-chip.accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:var(--accent-dim)}
.lkc-chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.lkc-who{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lkc-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.lkc-acts .ghost.pact{flex:1 1 auto;justify-content:center;display:inline-flex;align-items:center;border-radius:999px;color:var(--ink);text-decoration:none;
  background:linear-gradient(180deg,var(--lk-sheen),transparent 70%),var(--surface-2);box-shadow:inset 0 1px 0 var(--glass-highlight);
  transition:transform .4s var(--lk-spring),border-color .2s ease,box-shadow .25s ease}
.lkc-acts .ghost.pact:not(:disabled):hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 18px -8px var(--glow)}
.lkc-acts .ghost.pact:not(:disabled):active{transform:scale(.95)}
.lkc-acts .ghost.pact.primary{color:var(--accent-ink);border-color:var(--accent);font-weight:600;
  background:linear-gradient(180deg,rgba(255,255,255,var(--lk-gloss)),rgba(255,255,255,0) 48%),var(--accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 24px -14px var(--glow)}
@media (prefers-reduced-motion:reduce){
  .lkcard,.lkc-ring .f,.lkc-ring.due .f{animation:none!important}
  .lkc-ring .f{transition:none}
  .lkcard:hover,.lkfilter button:not(:disabled):active,.lkc-acts .ghost.pact:not(:disabled):active{transform:none}
}
.lkshift{display:grid;gap:8px}
/* The lock card's sheet: the landscape card above its actions. */
.shr-sheet.shr-wide{width:min(900px,100%)}
.shr-body.shr-col{grid-template-columns:minmax(0,1fr)}
.shr-col .shr-acts{flex-direction:row;flex-wrap:wrap}
.shr-col .shr-acts > *{flex:1 1 160px;justify-content:center;height:44px;display:inline-flex;align-items:center}

/* ---------- the sheets (the glass frame: glass-sheet.css): fields, vesting, the table, the warnings ---------- */
.locksheet .lkintro{color:var(--ink-2)}
.locksheet .lkvest{background:var(--glass-tile);border:1px solid var(--glass-line);border-radius:18px;padding:12px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);animation:lkin .4s var(--lk-spring) both}
.locksheet .lkamount{height:54px;border-radius:18px;padding:0 16px;border-color:var(--glass-line);background:var(--glass-tile);
  box-shadow:inset 0 1px 3px var(--lk-inset);transition:border-color .2s ease,box-shadow .3s ease}
.locksheet .lkamount input{font-size:20px;font-weight:500;letter-spacing:-.01em}
.locksheet .lkamount input:focus-visible{outline:none}
.locksheet .lkinput{height:44px;border-radius:14px;border-color:var(--glass-line);background:var(--glass-tile);
  box-shadow:inset 0 1px 3px var(--lk-inset);transition:border-color .2s ease,box-shadow .3s ease}
.locksheet .lkamount:focus-within,.locksheet .lkinput:focus{outline:none;border-color:var(--accent);
  box-shadow:inset 0 1px 3px var(--lk-inset),0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent),0 0 24px -8px var(--glow)}
.locksheet .lkinput::placeholder{color:var(--muted)}
.locksheet .lkquick .ghost{border-radius:999px;background:var(--glass-tile);border-color:var(--glass-line);color:var(--ink-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .45s var(--lk-spring),border-color .2s ease,background .2s ease,box-shadow .25s ease}
.locksheet .lkquick .ghost:hover{background:var(--glass-tile-hover);border-color:var(--glass-glow);color:var(--ink);box-shadow:0 0 18px -8px var(--glow)}
.locksheet .lkquick .ghost:active{transform:scale(.94)}
.locksheet .lkquick .ghost[aria-pressed="true"]{color:var(--ink);border-color:var(--accent);
  background:linear-gradient(180deg,rgba(255,255,255,.14),transparent),color-mix(in srgb,var(--accent) 14%,transparent)}
.locksheet .lktable{border-collapse:separate;border-spacing:0;border:1px solid var(--glass-line);border-radius:16px;overflow:hidden;
  background:var(--glass-tile);margin:10px 0}
.locksheet .lktable th{padding:8px 12px;border-bottom-color:var(--glass-line);background:rgba(255,255,255,.025)}
.locksheet .lktable td{padding:7px 12px;border-bottom-color:var(--glass-line)}
.locksheet .lktable tr:last-child td{border-bottom:none}
.locksheet .lkwarn{border-radius:18px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);
  background:radial-gradient(120% 120% at 0% 0%,color-mix(in srgb,var(--warn) 12%,transparent),transparent 70%),color-mix(in srgb,var(--warn) 6%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.locksheet .lkwarn b{color:var(--warn)}
.locksheet .lkbar{background:var(--glass-tile);box-shadow:inset 0 1px 2px var(--lk-inset),inset 0 0 0 1px var(--glass-line)}

/* ---------- the tick: a glass box that fills teal ---------- */
.locksheet .lktick-row input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:0;border-radius:7px;
  border:1.5px solid var(--lk-box);background:var(--glass-tile);display:grid;place-items:center;cursor:pointer;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .4s var(--lk-spring)}
.locksheet .lktick-row input::after{content:"";width:9px;height:5px;border:solid var(--accent-ink);border-width:0 0 2px 2px;
  transform:translateY(-1px) rotate(-45deg) scale(0);transition:transform .35s var(--lk-spring)}
.locksheet .lktick-row input:checked{border-color:var(--accent);box-shadow:0 0 14px -3px var(--glow);
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.40),transparent 70%),var(--accent)}
.locksheet .lktick-row input:checked::after{transform:translateY(-1px) rotate(-45deg) scale(1)}
.locksheet .lktick-row input:active{transform:scale(.88)}
.locksheet .txfoot .lktick-row{margin-top:14px}

/* Waiting for the wallet: a breathing glass tile with a wallet. */
.locksheet[data-phase="signing"] .txcenter::before{content:"";width:68px;height:68px;border-radius:22px;
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234DD4C4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V7a2 2 0 0 1 2-2h11v3'/%3E%3Crect x='3.5' y='8' width='17' height='11' rx='2.5'/%3E%3Ccircle cx='16' cy='13.5' r='1.2'/%3E%3C/svg%3E") center/30px no-repeat,
    radial-gradient(circle at 50% 10%,rgba(255,255,255,.26),transparent 60%),color-mix(in srgb,var(--accent) 14%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);animation:lkbreathe 2.2s ease-in-out infinite}
:root[data-theme="light"] .locksheet[data-phase="signing"] .txcenter::before{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23066A5F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8V7a2 2 0 0 1 2-2h11v3'/%3E%3Crect x='3.5' y='8' width='17' height='11' rx='2.5'/%3E%3Ccircle cx='16' cy='13.5' r='1.2'/%3E%3C/svg%3E") center/30px no-repeat,
    radial-gradient(circle at 50% 10%,rgba(255,255,255,.7),transparent 60%),color-mix(in srgb,var(--accent) 12%,transparent)}
@keyframes lkbreathe{0%,100%{transform:scale(1);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 0 var(--glow)}
  50%{transform:scale(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 10px transparent,0 0 34px -6px var(--glow)}}

/* ---------- reduced motion (the sheet's own: glass-sheet.css) ---------- */
@media (prefers-reduced-motion:reduce){
  .locksheet .lkvest,.lkbar::before,.lktick,.locksheet[data-phase="signing"] .txcenter::before,.lkdue::before{animation:none!important}
  .locksheet .lkquick .ghost:active,.locksheet .lktick-row input:active,.lockbadge:hover,.lockbadge:active,
  .lkrow .ghost.pact:not(:disabled):active{transform:none}
  .lockbadge::after{display:none}
}

/* ---------- the share sheet: the Landscape / Vertical switch, the vertical preview ---------- */
.lkshare .shr-body > .seg{justify-self:center;align-self:center}
.lkshare.is-vertical{width:min(560px,100%)}
.lkshare.is-vertical .shr-card{width:auto;height:min(64vh,640px);max-width:100%;margin:0 auto}
@media(max-width:900px){.lkshare.is-vertical .shr-card{height:min(58vh,560px)}}

/* ---------- the lock's proof page (/lock/{lockId}): phone first, glass cards on the page ---------- */
.lkproof{max-width:980px;padding-top:var(--sp-6);padding-bottom:48px;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--panel-gap)}
.lkp-skl{height:420px;border-radius:var(--r-panel)}
/* The seal: green only for a verified read, amber otherwise. */
.lkp-seal{display:flex;align-items:center;gap:14px;padding:14px var(--panel-pad);border-radius:var(--r-panel);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--lk-sheen),transparent 1.5px),var(--raise);box-shadow:inset 0 1px 0 var(--glass-highlight);
  animation:lkin .5s var(--lk-spring) both}
.lkp-seal > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.lkp-seal b{font-size:16px;letter-spacing:-.01em}
.lkp-seal span{font-size:12.5px;color:var(--ink-2);line-height:1.4}
.lkp-sealicon{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:20px}
.lkp-seal.ok{border-color:color-mix(in srgb,var(--ok) 45%,transparent);
  background:radial-gradient(120% 160% at 0% 0%,color-mix(in srgb,var(--ok) 16%,transparent),transparent 60%),linear-gradient(180deg,var(--lk-sheen),transparent 1.5px),var(--raise);
  box-shadow:inset 0 1px 0 var(--glass-highlight),0 18px 44px -26px var(--glow)}
.lkp-seal.ok b{color:var(--ok)}
.lkp-seal.ok .lkp-sealicon{background:radial-gradient(circle at 50% 12%,rgba(255,255,255,.4),transparent 60%),var(--ok);box-shadow:0 0 22px -4px var(--glow)}
.lkp-seal.ok svg{width:30px;height:30px;fill:none;stroke:var(--accent-ink);stroke-width:1.6;stroke-linejoin:round}
.lkp-seal.ok svg .tick{stroke-width:2.4;stroke-linecap:round;stroke-dasharray:14;stroke-dashoffset:14;animation:lkdraw .5s .3s cubic-bezier(.65,0,.35,1) forwards}
.lkp-seal.warn{border-color:color-mix(in srgb,var(--warn) 45%,transparent);
  background:radial-gradient(120% 160% at 0% 0%,color-mix(in srgb,var(--warn) 13%,transparent),transparent 60%),var(--raise)}
.lkp-seal.warn b{color:var(--warn)}
.lkp-seal.warn .lkp-sealicon{color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);
  background:radial-gradient(circle at 50% 12%,rgba(255,255,255,.2),transparent 60%),color-mix(in srgb,var(--warn) 14%,transparent)}
.lkp-seal.wait .lkp-sealicon{background:var(--surface-2)}

/* The hero: a large glass panel with the token, the share locked and the facts. */
.lkp-hero,.lkp-card{position:relative;border-radius:var(--r-panel);border:1px solid var(--line);padding:var(--panel-pad);
  background:linear-gradient(180deg,var(--lk-sheen),transparent 1.5px),radial-gradient(120% 70% at 0% 0%,var(--lk-tint),transparent 60%),var(--raise);
  box-shadow:inset 0 1px 0 var(--glass-highlight),0 30px 60px -40px rgba(0,0,0,.7);animation:lkin .55s var(--lk-spring) both}
.lkp-hero{padding:var(--panel-pad);background:linear-gradient(180deg,var(--lk-sheen),transparent 1.5px),radial-gradient(90% 80% at 100% 0%,var(--lk-tint),transparent 65%),
  radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%),var(--raise)}
.lkp-token{display:flex;align-items:center;gap:14px}
.lkp-token > div{min-width:0;flex:1}
.lkp-face{width:52px;height:52px;border-radius:50%;flex:none;object-fit:cover;display:grid;place-items:center;font-weight:700;color:var(--cream);
  box-shadow:0 0 0 1px var(--glass-line),0 8px 20px -10px rgba(0,0,0,.6)}
.lkp-name{display:block;font-size:18px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lkp-name:hover{color:var(--accent)}
.lkp-sub{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin-top:2px}
.lkp-chip{font-family:Archivo,-apple-system,sans-serif;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:99px;color:var(--accent);
  background:var(--accent-dim);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.lkp-chip.plain{color:var(--ink-2);background:var(--surface-2);border-color:var(--line)}
.lkp-live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);padding:4px 10px;border-radius:99px;border:1px solid var(--line);background:var(--surface)}
.lkp-live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:lkdue 1.8s ease-out infinite}
.lkp-figure{display:flex;align-items:center;gap:16px;margin:22px 0 18px}
.lkp-lock{flex:none;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  background:radial-gradient(circle at 50% 10%,rgba(255,255,255,.24),transparent 60%),color-mix(in srgb,var(--accent) 14%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 34px -10px var(--glow)}
.lkp-lock svg{width:32px;height:32px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lkp-figure h1{font-size:clamp(26px,6.4vw,40px);line-height:1.1;letter-spacing:-.03em}
.lkp-amount{font-size:15px;color:var(--ink-2);margin-top:6px;overflow-wrap:anywhere}
.lkp-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--line)}
.lkp-facts > div{background:var(--surface);padding:11px 14px;min-width:0}
.lkp-facts > div:last-child:nth-child(odd){grid-column:1/-1}
.lkp-facts dt{font-size:11.5px;color:var(--muted);margin-bottom:3px}
.lkp-facts dd{margin:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lkp-facts a{color:var(--ink);text-decoration:none}
.lkp-facts a:hover{color:var(--accent)}
.lkp-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.lkp-acts > *{flex:1 1 140px;justify-content:center;display:inline-flex;align-items:center;height:48px;border-radius:999px;text-decoration:none}
.lkp-acts .cta{flex-basis:100%;margin:0;padding:0;
  background:linear-gradient(180deg,rgba(255,255,255,var(--lk-gloss)),rgba(255,255,255,0) 48%),linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 84%,#000));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 28px -14px var(--glow);transition:transform .45s var(--lk-spring)}
.lkp-acts .cta:active{transform:scale(.97)}
.lkp-acts .ghost{color:var(--ink);transition:transform .45s var(--lk-spring),border-color .2s ease}
.lkp-acts .ghost:active{transform:scale(.96)}

/* The schedule and the proof trail. */
.lkp-cols{display:grid;gap:16px}
@media(min-width:900px){.lkp-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.lkp-card h2{font-size:var(--fs-h3);margin-bottom:var(--sp-3)}
.lkp-next{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:14px 16px;border-radius:18px;margin-bottom:14px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 65%),var(--surface)}
.lkp-next span{font-size:12.5px;color:var(--ink-2)}
.lkp-next b{font-size:26px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.lkp-next b.lkdue{font-size:18px;color:var(--accent)}
.lkp-next small{flex-basis:100%;font-size:12px;color:var(--muted)}
.lkp-next small.lkp-auto{color:var(--accent)}
.lkp-rel,.lkp-trail{list-style:none;margin:0;padding:0;position:relative}
.lkp-rel li,.lkp-trail li{position:relative;display:grid;align-items:center;gap:2px 12px;padding:9px 0 9px 30px;font-size:13px}
.lkp-rel li{grid-template-columns:minmax(0,1fr) auto}
.lkp-rel li .lkp-when{grid-column:1;font-size:12px;color:var(--muted)}
.lkp-rel li em{grid-column:2;grid-row:1/3;font-style:normal;font-size:12px;font-weight:600;color:var(--muted)}
.lkp-rel li.due em{color:var(--accent)}
.lkp-rel li.paid em{color:var(--ink-2)}
/* The rail and its dots: paid filled, due ringed and glowing, upcoming hollow. */
.lkp-rel li::before,.lkp-trail li::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--line)}
.lkp-rel li:first-child::before,.lkp-trail li:first-child::before{top:50%}
.lkp-rel li:last-child::before,.lkp-trail li:last-child::before{bottom:50%}
.lkp-rel li.paid::before{background:color-mix(in srgb,var(--accent) 60%,transparent)}
.lkp-rel li > i,.lkp-trail li > i{position:absolute;left:2px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;
  background:var(--raise);border:2px solid var(--surface-3)}
.lkp-rel li.paid > i,.lkp-trail li > i{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.7) 0 18%,transparent 50%),var(--accent);border-color:var(--accent)}
.lkp-rel li.due > i{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-dim),0 0 14px var(--glow);animation:txstepglow 1.8s ease-in-out infinite}
.lkp-trail li{grid-template-columns:minmax(0,1fr) auto}
.lkp-trail li > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.lkp-trail li b{font-weight:600}
.lkp-trail li span{font-size:12px;color:var(--muted)}
.lkp-trail li.extend > i{background:var(--raise);border-color:var(--accent)}
.lkp-trail .copy{font-size:12px;color:var(--accent);text-decoration:none;white-space:nowrap}
.lkp-trail .copy:hover{text-decoration:underline}
.lkp-holds{margin:14px 0 0;padding:12px 14px;border-radius:16px;font-size:12.5px;line-height:1.5;color:var(--ink-2);background:var(--surface);border:1px solid var(--line)}
@media(max-width:560px){
  .lkproof{padding-top:14px}
}
@media (prefers-reduced-motion:reduce){
  .lkp-seal,.lkp-hero,.lkp-card,.lkp-live i,.lkp-rel li.due > i{animation:none!important}
  .lkp-seal.ok svg .tick{animation:none!important;stroke-dashoffset:0}
  .lkp-acts .cta:active,.lkp-acts .ghost:active{transform:none}
}
.lkshare .shr-acts a.ghost{color:var(--ink);text-decoration:none}

/* Vesting made easy (owner, 2026-10-29): the end date under "How long", the plain-English summary, the custom interval
   row, and the glass calendar (a month grid; days outside the 7-day-to-5-year range greyed out). */
.lkends{margin-top:8px;font-size:12.5px;color:var(--ink-2)}
.lksummary{margin:4px 0 14px;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  background:linear-gradient(180deg,var(--lk-sheen),transparent 1.5px),color-mix(in srgb,var(--accent) 7%,var(--surface-2));font-size:13px;line-height:1.5}
.lkstep{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lkstep .lkinput{width:84px;flex:none}
.lkcal{margin-top:10px;padding:12px;border-radius:18px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--lk-sheen),transparent 1.5px),var(--surface-2);box-shadow:inset 0 1px 0 var(--glass-highlight)}
.lkcal-head{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.lkcal-title{flex:1;text-align:center;font-size:14px;text-transform:capitalize}
.lkcal-nav{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--surface-3);color:var(--ink);font-size:15px;line-height:1}
.lkcal-nav:disabled{opacity:.35;cursor:default}
.lkcal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.lkcal-wd{font-size:11px;color:var(--muted);text-align:center;padding:2px 0;text-transform:uppercase}
.lkcal-day{height:36px;border-radius:10px;border:1px solid transparent;background:none;color:var(--ink);font-size:13px;font-variant-numeric:tabular-nums;
  transition:background .2s ease,border-color .2s ease,transform .3s var(--lk-spring)}
.lkcal-day:not(:disabled):hover{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.lkcal-day:not(:disabled):active{transform:scale(.94)}
.lkcal-day:disabled{color:var(--muted);opacity:.35;cursor:default}
.lkcal-day.on{background:var(--accent);color:var(--accent-ink);font-weight:700;box-shadow:0 0 14px -4px var(--glow)}
.lkcal-day:focus-visible,.lkcal-nav:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lkcal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:12.5px;flex-wrap:wrap}
.lkcal-time{display:flex;align-items:center;gap:8px}
.lkcal-time .lkinput{width:140px}
@media(prefers-reduced-motion:reduce){.lkcal-day{transition:none}}
/* The length and unlock options as separate pill chips (owner, 2026-10-29): no bar around them, so they wrap tightly
   and take less room; never scrolled out of view. The chosen one is the accent glass pill. */
.lkwrap .seg,.gsheet .lkwrap .seg{display:flex;flex-wrap:wrap;gap:6px;padding:0;border:none;border-radius:0;background:none;box-shadow:none;overflow:visible}
.lkwrap .seg button{flex:none;padding:6px 12px;font-size:12.5px;border-radius:999px;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--lk-sheen),transparent 1.5px),var(--surface-2)}
.lkwrap .seg button:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.lkwrap .seg button[aria-pressed="true"]{border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
/* Custom dates (owner, 2026-10-29): a row per date (the date opens the calendar, the amount beside it), then the actions. */
.lkdates{gap:10px}
.lkdate-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:8px;align-items:center}
.lkdate-row .lkinput{margin-top:0}
.lkdate-when{display:grid;gap:2px;text-align:left;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface-3);color:var(--ink);font-size:12px}
.lkdate-when b{font-size:13px}
.lkdate-when[aria-expanded="true"]{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.lkdate-x{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:none;color:var(--muted);font-size:16px}
.lkdate-x:hover{color:var(--ink)}
.lkdate-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.lkdate-acts .lksub{margin-left:auto}
/* Setup cells left by a lock that did not finish (BF-3): a quiet note above the list, its action beside it. */
.lksetup{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--accent) 7%,transparent);font-size:12.5px;line-height:1.45}
.lksetup>div{display:grid;gap:3px;min-width:0;flex:1 1 260px}
.lksetup .ghost.pact{border-radius:999px}
/* The extend sheet's due releases (LK-03): the note above the shift, its "Extend without claiming" link and tick. */
.lkdue{margin:0 0 12px}
.lkdue .lktick-row{margin-top:8px}
.lklink{background:none;border:0;padding:0;margin-top:6px;min-height:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline}
/* The launch countdown (GoLive.tsx): one centred column on the page ground, the clock in the accent. */
.golive{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:32px 16px;text-align:center;
  background:radial-gradient(ellipse 70% 50% at 50% 40%,var(--accent-dim),transparent 70%),var(--ground)}
.golive-logo{width:88px;height:88px;border-radius:24px}
.golive-brand{font-size:20px;font-weight:700;display:flex;align-items:center;gap:10px}
.golive-net{font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-dim);padding:3px 10px;border-radius:999px}
.golive h1{font-size:clamp(20px,4.6vw,30px);max-width:640px;margin-top:6px}
.golive-clock{display:flex;gap:clamp(8px,2.4vw,16px);margin:10px 0 4px}
.golive-cell{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:clamp(64px,19vw,104px);
  padding:16px 10px 12px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.golive-num{font-size:clamp(30px,8vw,54px);font-weight:500;line-height:1;color:var(--accent)}
.golive-lbl{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-family:Archivo,-apple-system,sans-serif}
.golive-at{margin:6px 0 0;font-size:15px;color:var(--ink-2)}
.golive-sub{margin:0;font-size:13px;color:var(--muted)}
.golive-x{margin-top:8px;font-size:14px;color:var(--accent);text-decoration:none}
.golive-x:hover{text-decoration:underline}
/*
 * 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}
/*
 * Spacing scale (one set of steps for every screen): spacing steps, panel padding and the gap between panels, the
 * space under a header, radii, title sizes, tab and button heights, list rows. Phones take the smaller panel values.
 */
:root{
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  --panel-pad:20px;--panel-gap:20px;--head-gap:16px;
  --r-panel:20px;--r-card:16px;--r-tile:12px;--r-pill:999px;
  --fs-h1:28px;--fs-h2:20px;--fs-h3:17px;
  --tab-py:7px;--tab-px:14px;--tab-fs:13.5px;
  --btn-h-sm:34px;--btn-h:40px;--btn-h-lg:48px;
  --row-py:12px;
}
@media(max-width:620px){:root{--panel-pad:16px;--panel-gap:16px;--head-gap:12px;--fs-h1:24px;--fs-h2:18px}}
/*
 * 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{height:var(--btn-h);display:inline-flex;align-items:center;justify-content:center;padding:0 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:var(--sp-6) 0 var(--panel-gap)}
.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:var(--r-panel);padding:var(--panel-pad);margin-bottom:var(--panel-gap)}
.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:var(--head-gap)}
.stitle{display:flex;align-items:center;gap:10px}
.stitle h2{font-size:var(--fs-h2)}
.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:var(--tab-py) var(--tab-px);border-radius:999px;font-size:var(--tab-fs);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:var(--panel-gap)}
.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:var(--sp-6) 0 var(--sp-3)}
.back:hover{color:var(--accent)}
.detail{display:grid;grid-template-columns:1fr 340px;gap:var(--panel-gap);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:var(--r-panel);padding:var(--panel-pad)}
.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.wait{background:rgba(150,152,160,.12);color:var(--muted)}
.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 var(--sp-3)}
.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:var(--r-tile);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:var(--panel-gap);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:var(--r-panel);
  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 var(--panel-gap)}
.nphead h1{font-size:var(--fs-h1);letter-spacing:-.03em}
.npctl{margin-left:auto;display:flex;gap:9px;align-items:center}
.npwrap{display:grid;grid-template-columns:330px 1fr;gap:var(--panel-gap);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:var(--r-panel);padding:var(--panel-pad)}
.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:var(--r-panel);padding:var(--panel-pad)}
.npcard h2{font-size:var(--fs-h3)}
.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:var(--panel-gap)}
.anhead h1{font-size:var(--fs-h1);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:var(--panel-gap);margin-top:var(--panel-gap);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:var(--fs-h2)}
.barhead .v{font-size:17px;font-weight:600}
.barsub{font-size:12.5px;color:var(--muted);margin:5px 0 var(--head-gap)}
.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:var(--panel-gap);align-items:start;padding-bottom:var(--panel-gap)}
@media(max-width:980px){.tpage{grid-template-columns:1fr}}
.tradecard{background:var(--raise);border:1px solid var(--line);border-radius:var(--r-panel);padding:var(--panel-pad)}
.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:var(--r-panel);padding:var(--panel-pad)}
.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:var(--sp-3)}
.tabpills{display:flex;gap:3px;padding:4px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.tabpills button{padding:var(--tab-py) var(--tab-px);border-radius:9px;font-size:var(--tab-fs);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:var(--r-panel);padding:var(--panel-pad);margin-bottom:40px}
.frow{display:flex;align-items:center;gap:14px;padding:var(--row-py) 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:var(--sp-6) 0 var(--sp-3)}
.backpill:hover{border-color:var(--accent)}
.launch{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r-panel);
  overflow:hidden;margin-bottom:40px}
@media(max-width:900px){.launch{grid-template-columns:1fr}}
.launch .form{background:var(--raise);padding:var(--sp-8)}
.launch .side{background:var(--surface);padding:var(--sp-8);display:flex;align-items:center;justify-content:center}
@media(max-width:900px){.launch .side{align-items:flex-start}}
.launch h1{font-size:var(--fs-h1);letter-spacing:-.03em;margin-bottom:var(--panel-gap)}
.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:15px;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:var(--r-panel);padding:var(--panel-pad);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:var(--sp-6) 0 0}
.phead h1{font-size:var(--fs-h1);letter-spacing:-.03em}
.phead p{color:var(--muted);font-size:15px;margin:8px 0 var(--panel-gap)}
.pillbtns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:var(--panel-gap)}
.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:var(--r-panel);border:1px solid var(--line);
  background:var(--raise);padding:38px 20px;text-align:center;margin-bottom:var(--panel-gap)}
.connbanner h2{font-size:var(--fs-h2)}
.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:var(--r-card);overflow:hidden;background:var(--raise)}
table.pool{width:100%;border-collapse:collapse;font-size:13.5px}
table.pool th{background:var(--surface);padding:var(--row-py) 16px;font-size:11.5px;text-transform:none;
  letter-spacing:0;color:var(--muted);font-weight:500;white-space:nowrap}
table.pool td{padding:var(--row-py) 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:var(--panel-gap);align-items:start;padding:14px 0 40px}
@media(max-width:900px){.pdetail{grid-template-columns:1fr}}
.crumb{font-size:13px;color:var(--muted);padding:var(--sp-6) 0 var(--sp-3)}
.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:var(--r-panel);padding:var(--panel-pad);margin-bottom:var(--panel-gap)}
.statcard h2{font-size:var(--fs-h2);margin-bottom:var(--head-gap)}
.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}

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

/* ---------- Share (components/share/ShareLink.tsx): a menu on a wider screen, a bottom sheet on a phone ---------- */
.sharewrap{position:relative;display:inline-flex}
.sharemenu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;min-width:190px;padding:6px;border-radius:14px;
  background:var(--raise);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px}
.sharemenu button{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 12px;border-radius:10px;font-size:14px;color:var(--ink)}
.sharemenu button:hover,.sharemenu button:focus-visible{background:rgba(255,255,255,.06)}
.sharescrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1000}
.sharesheet{position:fixed;left:0;right:0;bottom:0;z-index:1001;background:var(--raise);border-top:1px solid var(--line);
  border-radius:22px 22px 0 0;padding:10px 16px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.sharesheet .sharegrab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 6px}
.sharesheet .sharetitle{font-weight:700;font-size:17px;margin:0 4px 4px}
.sharesheet button{width:100%}
.sharesheet .ghost{padding:14px;border-radius:999px;font-size:15px}

/* ---------- A trader in a list, and the profile card it opens on hover (components/trader/TraderLink.tsx) ---------- */
.traderlink{display:inline-flex;align-items:center;gap:7px;min-width:0;color:var(--ink);text-decoration:none}
.traderlink .tname{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.traderlink .tname.mono{font-weight:500;color:var(--ink-2)}
.traderlink:hover .tname{color:var(--accent)}
.hovercard{position:fixed;z-index:1200;width:300px;box-sizing:border-box;padding:14px;border-radius:16px;background:var(--raise);
  border:1px solid var(--line);box-shadow:0 22px 50px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:10px;font-size:13px}
.hovercard .hc-head{display:flex;gap:12px;align-items:center;min-width:0}
.hovercard .hc-who{min-width:0}
.hovercard .hc-name{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hovercard .hc-sub{display:flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--ink-2);font-size:12px;margin-top:2px}
.hovercard .hc-bio{margin:0;color:var(--ink-2);line-height:1.4;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hovercard .hc-stats{display:flex;gap:14px;color:var(--ink-2)}
.hovercard .hc-stats b{color:var(--ink)}
.hovercard .hc-link{color:var(--accent);text-decoration:none;font-weight:600;font-size:12.5px}
.profhover{display:inline-flex;min-width:0;max-width:100%}
/* In a feed row's second line: the row's small size (the name was taking the link's own). */
.fmain .b .traderlink,.fmain .b .traderlink .tname{font-size:inherit}
.fmain .b .traderlink .tname.mono{color:var(--muted)}
/* A named trader in a row whose second line is set in the mono face: the name in the text face, an address stays mono. */
.fmain .b .traderlink .tname:not(.mono){font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink-2);font-variant-numeric:normal}
/*
 * 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)}

/* ---------- Leading the Pod + live tape row ---------- */
.hillrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--panel-gap);margin-bottom:var(--panel-gap)}
.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)}

/* The Live card's Everyone | Following switch: small, at the top right beside the title at every width. */
.tapebox .shead{flex-wrap:nowrap}
.tapebox .shead > div:first-child{flex:1 1 auto;min-width:0}
.tapescope{flex:none;margin-left:auto}
.tapescope .seg{padding:2px;gap:1px}
.tapebox .shead .tapescope .seg button{min-height:0;padding:4px 10px;font-size:12.5px;border:1px solid transparent}
.tapebox .shead .tapescope .seg button[aria-pressed="true"]{border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.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}
.tapemore{display:block;margin:10px auto 4px;height:var(--btn-h-sm);padding:0 16px;border-radius:10px;font-size:13px}
.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}
/* The price scale's A (fit the prices) and L (logarithmic) switches, over the bottom of the price scale above the time
   axis, centred on it (the chart sets the width to the scale's, kept when hidden), shown only while the pointer or a
   finger is on the scale or a switch has the keyboard focus (owner, 2026-10-25); on: the accent text and border of the other chart switches. */
.lwc-scale{position:absolute;z-index:4;right:0;bottom:32px;width:60px;display:flex;justify-content:center;gap:4px;
  opacity:0;pointer-events:none;transition:opacity .12s ease}
/* Keyboard focus shows them too; a mouse click's focus does not keep them up once the pointer leaves the scale. */
.lwc-scale.show,.lwc-scale:has(:focus-visible){opacity:1;pointer-events:auto}
.lwc-scale button{width:22px;height:22px;padding:0;border-radius:6px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--muted);font:600 11px/1 var(--mono, ui-monospace, monospace);cursor:pointer}
.lwc-scale button:hover{color:var(--ink);border-color:var(--line-strong, var(--muted))}
.lwc-scale button[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
.lwc-scale button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (pointer:coarse){.lwc-scale button{width:26px;height:26px;font-size:12px}}
/*
 * Shown whenever it applies (owner, 2026-10-28): scrolled back in time, » at the bottom right of the plot. (The ▲ / ▼
 * off-view chip is gone: A at the price scale is the way back.)
 */
.lwc-now{position:absolute;z-index:4;bottom:36px;width:26px;height:22px;display:grid;place-items:center;padding:0;border-radius:6px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--muted);cursor:pointer}
.lwc-now:hover{color:var(--ink);border-color:var(--line-strong, var(--muted))}
.lwc-now:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (pointer:coarse){.lwc-now{width:30px;height:26px}}
/*
 * A live trade (owner, 2026-10-28): the last-price tag flashes the side's colour and, in line mode, the line's end
 * pulses, for about 600 ms. Drawn over the canvas, never in the pointer's way; none under reduced motion.
 */
.lwc-pulse{position:absolute;inset:0;z-index:3;pointer-events:none;--pulse:var(--buy)}
.lwc-pulse.sell{--pulse:var(--sell)}
.lwc-pulse .pulsetag{position:absolute;right:0;height:20px;transform:translateY(-50%);border-radius:3px;
  box-shadow:0 0 0 2px var(--pulse),0 0 12px var(--pulse);animation:lwc-tag .6s ease-out forwards}
.lwc-pulse .dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--pulse);
  animation:lwc-dot .6s ease-out forwards}
@keyframes lwc-tag{from{opacity:.9}to{opacity:0}}
@keyframes lwc-dot{from{opacity:.9;box-shadow:0 0 0 0 var(--pulse)}to{opacity:0;box-shadow:0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.lwc-pulse{display:none}}
.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}
/*
 * The hovered candle's open, high, low, close and volume, after its change on the line under the price (owner,
 * 2026-10-24). The line keeps the price's width (it takes no room of its own) and runs on into the free space at its
 * right, so the controls and the chart never move; a phone leaves out the volume and cuts what does not fit.
 */
.chartcard{overflow-x:clip}
.chartcard .bigsub{contain:inline-size;white-space:nowrap}
.ohlcline{display:inline-flex;align-items:baseline;gap:0 9px;margin-left:10px;font-size:11px;letter-spacing:-.01em;color:var(--ink)}
.ohlcline .k{color:var(--muted);margin-right:3px}
.ohlcline .k.sep{margin:0 5px}
.ohlcline .pos{color:var(--ok)}
.ohlcline .neg{color:var(--bad)}
@media(max-width:620px){
  .chartcard .bigsub{overflow:hidden;text-overflow:ellipsis}
  .ohlcline{gap:0 8px;margin-left:8px;font-size:11px}
}
.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;overscroll-behavior:contain;
    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:var(--btn-h-sm);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)}
/* Holding actions (owner, 2026-10-29): the glyph alone in a wide table, glyph and label on phones; `title` is the tooltip. */
.ghost.pact.ico{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:34px;padding:0}
.ghost.pact.ico .pact-l{display:none}
/* The hover / focus tip, to the left of the button (inside the table's scroll box, which clips above and below). */
.ghost.pact.ico[data-tip]{position:relative}
.ghost.pact.ico[data-tip]::after{content:attr(data-tip);position:absolute;right:calc(100% + 8px);top:50%;transform:translate(4px,-50%);width:max-content;max-width:240px;padding:7px 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font-size:12px;font-weight:500;line-height:1.35;text-align:left;white-space:normal;box-shadow:0 8px 24px -10px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:5}
.ghost.pact.ico[data-tip]:hover::after,.ghost.pact.ico[data-tip]:focus-visible::after{opacity:1;transform:translate(0,-50%);transition-delay:.25s}
@media(prefers-reduced-motion:reduce){.ghost.pact.ico[data-tip]::after{transition:none}}
.plink{padding:0;font-weight:inherit}
.plink:hover{color:var(--accent)}
.pfpanel{padding-top:0}
.pfsub{font-size:var(--fs-h3);margin:var(--sp-6) 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}
  .ghost.pact.ico{width:auto;padding:0 14px}
  .ghost.pact.ico .pact-l{display:inline}
  .ghost.pact.ico[data-tip]::after{display:none}
}

/*
 * 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:var(--panel-gap)}
.anpair.antrio{margin-bottom:var(--panel-gap)}
.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:var(--head-gap)}
.anboard .stitle h2{font-size:var(--fs-h2)}
.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: one slim switch (Leading the Pod | Live | Following) above the panel it shows; compact
   live rows (action and token, the trader under it; the dollar amount and time on the right) (owner, 2026-11-08) ---------- */
.hillswitch{margin:0 0 10px}
.hillswitch .seg{display:grid;grid-template-columns:repeat(3,1fr);width:100%;padding:2px;border-radius:10px;box-sizing:border-box;min-height:0}
.hillswitch .seg button{padding:4px 0;font-size:12.5px;border-radius:8px;min-height:0;height:auto;line-height:1.15;text-align:center;justify-content:center}
.hillrow.phoneview .tapebox{display:flex}
.hillrow.phoneview .tapebox .sdesc{display:none}
.hillrow.phoneview .tape .frow{gap:10px}
.hillrow.phoneview .tape .fmain{flex:1;min-width:0}
.hillrow.phoneview .tape .fmain .a,.hillrow.phoneview .tape .fmain .b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hillrow.phoneview .tape .fright .b{display:none}
.hillrow.phoneview .tape .fwhen{font-size:11px}

/* ---------- Explore on phones: no live feed; token grids become two rows of compact cards that swipe sideways ---------- */
@media(max-width:620px){
  .hillrow:not(.phoneview) .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:var(--panel-gap);margin-bottom:var(--panel-gap)}
.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}
  .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:var(--fs-h1);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:var(--panel-gap)}
.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:var(--panel-gap)}
.pptxhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:var(--head-gap)}
.pptxhead h2{font-size:var(--fs-h3)}
.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:var(--fs-h1);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:var(--r-panel);padding:var(--panel-pad)}
@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%}
  .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 .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}
}
/* 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}
  /* A flex line, so the trader's picture and name set its height (an inline line box added ~5 px under them, and the
     gap to the third line looked bigger than the one to the first; owner, 2026-11-08). */
  .feed .frow[data-txid] .fmain .b{grid-column:2;grid-row:2;margin-top:0;min-width:0;white-space:nowrap;display:flex;align-items:center}
  .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:var(--panel-pad)}
  .launch .form,.launch .side{padding:var(--panel-pad)}
}
/* 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)}
  /* One 12 px step between the header's button row, the tabs, the search row and the first card (owner, 2026-10-23). */
  header .wrap{padding-top:8px;row-gap:12px}
  header .brand .logo{width:42px;height:42px}
  #app > :first-child{margin-top:12px}
  .searchrow{margin-bottom: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}
}
/* The Explore switch (Leading the Pod / Live / Following) sits right under the search bar and the nav tabs, so on a
   phone it is a slim strip (owner, 2026-11-08): 26 px buttons, still taking taps 7 px above and below. */
@media(max-width:620px){
  .hillswitch .seg:not(.lpunit):not(.quickamt) button{min-height:26px;padding:3px 0;font-size:12px}
}
@media(max-width:620px) and (pointer:coarse){
  .hillswitch .seg:not(.lpunit):not(.quickamt) button::after{inset:-7px 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))}
  /* The keyboard going down: the sheet glides down with it rather than waiting for iOS and snapping. */
  .tpage > .tradecard.open.kbdrop{transition:transform .25s ease,visibility .25s,bottom .25s cubic-bezier(.2,.8,.2,1),max-height .25s cubic-bezier(.2,.8,.2,1)}
}
/* 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))}

/* Launch protection under the developer buy (Create): label and the KAS choices on one row, the hint below. */
.devprotect{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.devprotecthead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;font-weight:500}
.protecton{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 8px;border-radius:999px;background:var(--accent-dim);color:var(--accent);font-size:12px;font-weight:600}
.protecton svg{width:14px;height:14px}

/* The Following feed rows (Explore's Live panel): the follower's avatar, who did what, the comment quoted. */
.frow.ffollow .ffav{flex:none;display:flex}
.frow.ffollow .fmain .a b{font-weight:600}
.frow.ffollow .ffhandle{color:var(--muted);margin-right:6px}
.frow.ffollow .ffquote{color:var(--ink-2);font-style:italic;overflow-wrap:anywhere}
/*
 * 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:var(--panel-gap)}
@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 (owner, 2026-11-08: one layout on every screen, TokenHero.tsx) ----------
 * Top: avatar, the name block (name row; chips with the meta line; the description) and the market cap block pinned
 * top right. Under a hairline: one action row, Share and the links on the left, the token id pill on the right.
 */
.thero{background:var(--raise);border:1px solid var(--line);border-radius:var(--r-panel);padding:14px var(--panel-pad) 12px;
  display:flex;flex-direction:column;gap:11px}
.thero-top{display:flex;align-items:center;gap:18px}
.thero-av{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative;overflow:hidden;
  font-size:21px;font-weight:700;color:var(--cream);box-shadow:0 0 0 1px var(--line-soft)}
.thero-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:6px}
.thero-title{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;line-height:1}
.thero-title h1{font-size:26px;letter-spacing:-.025em;line-height:1.1;min-width:0;overflow-wrap:anywhere}
.thero-sym{font-size:14px;color:var(--muted)}
.thero-title .wstar{margin:-6px 0;width:30px;height:30px;border-color:transparent;background:none}
.thero-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;min-width:0}
.thero-chips{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.thero-chips .pairchip{margin-left:0;height:26px;font-size:12.5px;gap:6px;padding:0 11px 0 5px}
.thero-chips .pairchip img{width:16px;height:16px}
.thero-chips .lockbadge{height:26px;font-size:12.5px;color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  background:color-mix(in srgb,var(--accent) 9%,var(--surface-2))}
/* The meta line, "· by … · launched …": each item carries its own dot. */
.thero-meta{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 0;font-size:13px;color:var(--muted);min-width:0}
.thero-meta .mi{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.thero-meta .mi::before{content:"·";margin:0 9px;color:var(--muted)}
.thero-meta a{color:var(--muted);text-decoration:none}
.thero-meta .crby-name{color:var(--ink);font-weight:600}
/* A creator without a name shows the short address: plain weight and a size smaller, so the line stays one line. */
.thero-meta .crby .mono{color:var(--ink-2);font-weight:400;font-size:.92em}
.thero-meta a:hover,.thero-meta a:hover .crby-name{color:var(--accent)}
.thero-desc{display:flex;align-items:flex-end;gap:6px;min-width:0;max-width:680px;margin-top:1px}
.thero-desc p{margin:0;font-size:13.5px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.thero-desc[data-open="true"] p{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
.thero-more{flex:none;background:none;border:0;padding:0;min-height:0;font:inherit;font-size:12.5px;line-height:1.45;color:var(--accent);cursor:pointer}
.thero-more:hover{text-decoration:underline}
.thero-cap{flex:none;min-width:0;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.thero-cap .k{font-size:12.5px;color:var(--muted)}
.thero-cap .v{font-size:32px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.thero-cap .v .u{font-size:15px;color:var(--muted);margin-left:6px;font-weight:500;letter-spacing:0}
.thero-cap .usd{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:0 8px;font-size:13px;color:var(--muted)}
.thero-cap .usd > * + *::before{content:"·";margin-right:8px}
.thero-prog{font-size:13px;color:var(--muted)}
.thero-prog b{color:var(--accent);font-weight:600}
/* the action row */
.thero-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;
  border-top:1px solid var(--line-soft);padding-top:11px}
.thero-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.thero-links a,.thero-links .sharewrap > .tl-icon{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;min-height:0;
  border-radius:999px;border:1px solid var(--line-soft);background:var(--surface-2);color:var(--ink-2);text-decoration:none;
  font-size:12.5px;font-weight:500;transition:color .15s,border-color .15s,filter .15s}
.thero-links a:hover,.thero-links .sharewrap > .tl-icon:hover,.thero-links .sharewrap > .tl-icon[aria-expanded="true"]{color:var(--accent);border-color:var(--accent)}
.thero-links .tl-icon{width:30px;padding:0}
.thero-links .tl-icon svg{width:13px;height:13px}
.thero-links .tl-text{padding:0 11px;color:var(--ink)}
.thero-links .sharewrap > .tl-share{width:auto;padding:0 13px 0 11px;background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.thero-links .sharewrap > .tl-share:hover,.thero-links .sharewrap > .tl-share[aria-expanded="true"]{color:var(--accent-ink);border-color:var(--accent);filter:brightness(1.08)}
/* Share is the row's first button: its menu opens to the right, inside the page (it was cut off on the left). */
.thero-links .sharemenu{left:0;right:auto}
.thero-ids{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;margin-left:auto}
.thero-idcopy .idc-id{display:inline-flex;min-width:0;overflow:hidden;white-space:nowrap}
.thero-idcopy .idc-h{min-width:0;overflow:hidden}
.thero-idcopy .idc-t,.thero-idcopy > svg{flex:none}
.thero-idcopy{display:inline-flex;align-items:center;gap:6px;height:28px;min-height:0;padding:0 10px;border-radius:8px;border:1px solid var(--line-soft);
  background:var(--surface-2);color:var(--muted);font-size:12px;cursor:pointer;text-decoration:none}
.thero-idcopy .mono{color:var(--ink-2)}
.thero-idcopy:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:1180px) and (min-width:981px){
  .thero-cap .v{font-size:27px}
}
/* Phones: the same layout, smaller. The price per token heads the chart card, so it leaves the market cap block. */
@media(max-width:620px),(max-height:500px) and (max-width:950px) and (orientation:landscape){
  .thero{padding:14px 14px 12px;gap:12px}
  .thero-top{gap:11px;align-items:flex-start}
  .thero-av{width:46px;height:46px;font-size:16px}
  .thero-main{gap:6px;padding-top:0}
  .thero-title{gap:4px 6px}
  .thero-title h1{font-size:20px}
  .thero-sym{font-size:12.5px}
  .thero-title .wstar{width:26px;height:26px}
  .thero-chips .pairchip,.thero-chips .lockbadge{height:24px;font-size:11.5px}
  .thero-chips .pairchip img{width:14px;height:14px}
  .thero-meta{flex-basis:100%;font-size:12px}
  /* One line: a long creator address is cut with an ellipsis before the launch time would wrap. */
  .thero-meta{flex-wrap:nowrap}
  .thero-meta .crby{flex:0 1 auto;min-width:0;overflow:hidden}
  .thero-meta .crby .mono,.thero-meta .crby-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .thero-meta .crby .mono{font-size:11px}
  .thero-meta .mi:not(.crby){flex:none}
  .thero-meta .mi:first-child::before{content:none}
  .thero-meta .mi::before{margin:0 6px}
  .thero-cap{gap:1px}
  .thero-cap .k{font-size:11px}
  .thero-cap .v{font-size:20px}
  .thero-cap .usd{font-size:11.5px}
  .thero-cap .sub{display:none}
  .thero-prog{font-size:11.5px}
  /* One line however many links the token declares (owner, 2026-11-08): the links never wrap and the id pill gives
     way instead: the whole id where it fits, else its ending (…4211), else the copy glyph alone; the taps still reach 40 px through the ::after in app.css. */
  .thero-actions{padding-top:12px;gap:8px;flex-wrap:nowrap;container:thero-row / inline-size}
  .thero-links{gap:5px;flex:none;flex-wrap:nowrap}
  .thero-links a,.thero-links .sharewrap > .tl-icon{height:30px;font-size:12px}
  .thero-links .tl-icon{width:30px}
  .thero-links .tl-icon svg{width:14px;height:14px}
  .thero-links .tl-text{padding:0 10px}
  .thero-links .sharewrap > .tl-share{width:30px;padding:0}
  .thero-links .tl-share .tl-word{display:none}
  .thero-ids{flex:0 1 auto;min-width:0;flex-wrap:nowrap;gap:6px}
  .thero-idcopy{flex:0 1 auto;min-width:0;height:28px;padding:0 8px;gap:5px;font-size:11px}
  .thero-idcopy .idc-word{display:none}
  .thero-idcopy .idc-h{display:none}
  .thero-idcopy.pool{white-space:nowrap}
  .thero-idcopy.pool .mono{min-width:0;overflow:hidden;text-overflow:ellipsis}
}
/* A wide phone row (430 px screens and up) has room for the whole short id. */
@container thero-row (min-width:356px){
  .thero-idcopy .idc-h{display:inline}
}
/* Smaller phones (a row under 330 px, e.g. 375–390 px screens): tighter buttons, so the id keeps at least its tail. */
@container thero-row (max-width:330px){
  .thero-links{gap:4px}
  .thero-links a,.thero-links .sharewrap > .tl-icon{height:28px}
  .thero-links .tl-icon,.thero-links .sharewrap > .tl-share{width:28px}
  .thero-links .tl-icon svg{width:13px;height:13px}
  .thero-links .tl-text{padding:0 8px;font-size:11.5px}
  .thero-idcopy{padding:0 7px}
}
/* Narrow phones (a row under 300 px, 320–360 px screens): the id pill is its copy glyph (the id is in its label). */
@container thero-row (max-width:300px){
  .thero-links{gap:3px}
  .thero-links a,.thero-links .sharewrap > .tl-icon{height:26px}
  .thero-links .tl-icon,.thero-links .sharewrap > .tl-share{width:26px}
  .thero-links .tl-icon svg{width:12px;height:12px}
  .thero-links .tl-text{padding:0 7px;font-size:11px}
  .thero-idcopy{height:26px;padding:0 6px}
  .thero-idcopy .idc-id{display:none}
}

/* ---------- 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:4px 10px;border-radius:999px;font-size:11.5px;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, Avg entry and Comments: their own row at the top right, above the chart type and the timeframes. */
.chartctl .chartopts{display:flex;flex:1 1 100%;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px}
/*
 * Wider screens (owner, 2026-10-24): one row, the price on the left and, at the right, the chart type, the timeframes
 * and the toggles as icon buttons; when the card is too narrow the controls wrap under the price, at the right. On a
 * phone the controls' wrapper is a plain row of the column.
 */
.chartctl .chartmodes{display:contents}
@media(min-width:641px) and (min-height:501px),(min-width:951px){
  /* 10 px above the line under the price (from the timeframes) and 10 px below it (to the chart) (owner, 2026-10-24). */
  .chartcard > .bigrow{align-items:flex-start;gap:12px 16px;margin-bottom:10px}
  .chartcard > .bigrow .bigsub{margin-top:9.6px}
  .chartcard > .bigrow > .chartctl{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;margin-left:auto;padding-top:6px}
  .chartcard > .bigrow > .chartctl > .chartmodes{order:1;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px}
  .chartcard > .bigrow > .chartctl > .chartopts{order:2;flex:none;gap:5px}
  /* Compact, so the price and the controls share the row on a card of about 650 px. */
  .chartcard > .bigrow > [data-price-unit]{flex:0 1 auto;min-width:0}
  .chartcard > .bigrow > .chartctl{gap:6px;flex:1 1 0;min-width:max-content}
  .chartcard > .bigrow .chartmodes .tabpills,.chartcard > .bigrow .chartmodes .seg{padding:3px}
  .chartcard > .bigrow .chartmodes .tabpills button{padding:5px 9px;font-size:12px}
  .chartcard > .bigrow .chartmodes .tabpills button.modeicon{padding:5px 9px;display:inline-grid;place-items:center;line-height:0}
  .chartcard > .bigrow .chartmodes .seg button{padding:5px 8px;font-size:12px}
  .chartcard > .bigrow .chartopts.icons .vwapbtn{width:30px;height:30px;border-radius:9px}
}
/* The toggles as icon buttons: rounded squares, coloured when on (My swaps and Avg entry teal, Comments amber). */
.chartctl .chartopts.icons .vwapbtn{width:34px;height:34px;padding:0;border-radius:10px;display:inline-grid;place-items:center;font-size:0}
.chartctl .chartopts.icons .mybtn::before{display:none}
.chartctl .chartopts.icons .vwapbtn:hover:not(:disabled){color:var(--ink)}
.chartctl .chartopts.icons .vwapbtn[aria-pressed="true"]{background:color-mix(in srgb,currentColor 10%,var(--surface-2))}
.chartctl .tfdesk{position:relative;display:inline-flex}
.chartctl .tfdesk .tfmore{padding-left:10px;padding-right:10px}
.chartctl .tfmore > span[aria-hidden]{font-size:15px;line-height:1;vertical-align:-1px}
.chartctl .tfphone{position:relative;display:flex;gap:6px;align-items:center}
.chartctl .tfphone .tfpill{flex:1 1 0;min-width:0;text-align:center;white-space:nowrap}
.chartctl .tfphone .tfpill[aria-pressed="true"]{color:var(--accent);border-color:var(--accent)}
/* The menu wears the glass frame's popover (`.gpop.glass`, glass-sheet.css): its surface, edge, radius and shadow. */
.chartctl .tfmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:flex;flex-direction:column;min-width:96px;padding:4px}
.chartctl .tfmenu button{padding:9px 12px;border:0;background:none;color:var(--ink-2);font-size:13px;text-align:left;border-radius:8px}
.chartctl .tfmenu button[aria-checked="true"]{color:var(--accent);background:var(--surface-2)}
/* 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:var(--r-tile)}
.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%)}}
/* The figures (KAS raised · curve tokens sold, DC-01) keep one line while there is room, and wrap right-aligned before they squeeze the bar. */
.cb-v{font-size:12.5px;color:var(--muted);flex:0 1 auto;min-width:0;max-width:60%;text-align:right}
.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:var(--r-tile);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:760px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats .stat:last-child{grid-column:1 / -1}
}
/* Phones: nothing scrolls sideways. */
@media(max-width:620px){
  .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}
}

@media(max-width:640px){
  .chartctl .seg{flex:0 1 auto;min-width:0}
  .chartctl .chartopts{justify-content:flex-start}
}

/*
 * 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 price per token leaves its market cap block (the price heads the chart card).
 * - 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){
  #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){
  .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 .chartopts{order: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}
  /* The phone timeframes (owner, 2026-10-23): 5m, 15m, 1h, 4h and ▾ as pills the size of My swaps and Comments. */
  .chartcard .chartctl .tfphone{order:2;flex:1 1 100%}
  /* One step between the toggles, the chart type, the timeframes and the Curve bar (owner, 2026-10-24). */
  .chartcard .chartctl{gap:10px}
  .chartcard .curvebar{margin-top:10px}
}

/* 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}
  .bigrow > .chartctl{justify-content:flex-start}
}

/* The token's About tab: the creator's description as plain text, line breaks kept. */
.aboutText{margin:0;padding:18px 20px 22px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;color:var(--ink-2);font-size:14.5px}

/* ---------- chart market cap switch (owner, 2026-10-28): a round MC button, accent while on ---------- */
.capbtn{width:34px;height:34px;padding:0;border-radius:999px;display:inline-grid;place-items:center;align-self:center;flex:none;
  font:600 11px/1 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;color:var(--muted);background:var(--surface-2);border:1px solid var(--line)}
.capbtn:hover:not(:disabled){color:var(--ink)}
.capbtn.on{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 10%,var(--surface-2))}
.capbtn:disabled{opacity:.45;cursor:default}

/* the drawing layer over the trade chart */
.lwc-draw{--draw:#e8a33d;position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden}
.lwc-draw.active{pointer-events:auto;cursor:crosshair;touch-action:none}
/* drawings in their own amber, apart from the price line's accent */
.lwc-draw .draw-line line{stroke:var(--draw);stroke-width:2}
.lwc-draw .draw-line circle{fill:var(--surface);stroke:var(--draw);stroke-width:1.5}
.lwc-draw .draw-line.preview line{stroke-dasharray:4 3}
/* a wide invisible stroke takes the click or tap on a line (the layer itself lets the chart pan) */
.lwc-draw .draw-line line.hit{stroke:transparent;stroke-width:16;pointer-events:stroke;cursor:pointer}
.lwc-draw .draw-line.sel line:not(.hit){stroke-width:2.4}
.lwc-draw .draw-line.sel circle{fill:var(--draw)}
.draw-del{position:absolute;z-index:4;transform:translate(-50%,-50%);display:grid;place-items:center;width:28px;height:28px;padding:0;
  border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--bad);cursor:pointer;box-shadow:0 2px 8px rgb(0 0 0 / .25)}
.draw-del:hover,.draw-del:focus-visible{background:var(--bad);color:#fff;border-color:var(--bad)}
@media (pointer:coarse){.draw-del{width:36px;height:36px}}
.lwc-draw .draw-ruler rect{stroke:none}
.lwc-draw .draw-ruler.up rect{fill:color-mix(in srgb,var(--ok) 16%,transparent)}
.lwc-draw .draw-ruler.down rect{fill:color-mix(in srgb,var(--bad) 16%,transparent)}
.lwc-draw .draw-ruler line{stroke-width:1.2;stroke-dasharray:3 3}
.lwc-draw .draw-ruler.up line{stroke:var(--ok)}
.lwc-draw .draw-ruler.down line{stroke:var(--bad)}
.draw-label{position:absolute;z-index:3;width:180px;height:42px;transform:translateX(-50%);pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 6px;
  font:600 11.5px/1.35 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.draw-label b,.draw-label span{padding:1px 7px;color:#fff;white-space:nowrap}
.draw-label b{border-radius:6px 6px 0 0}
.draw-label span{font-weight:500;font-size:10.5px;border-radius:0 0 6px 6px}
.draw-label.up b,.draw-label.up span{background:var(--ok)}
.draw-label.down b,.draw-label.down span{background:var(--bad)}
.lwc-drawhint{position:absolute;z-index:3;left:50%;top:8px;transform:translateX(-50%);padding:5px 12px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--line);font-size:12px;color:var(--ink-2);white-space:nowrap;pointer-events:none;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis}
.chartopts .capbtn{width:30px;height:30px}
/* touch: a bigger target */
@media (pointer:coarse){.chartopts .capbtn{width:36px;height:36px}}