/* ============================================================
   Shared components — used by every page
   ============================================================ */

/* ── buttons ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 14px;
  border-radius:var(--r-sm);font-size:var(--fs-13);font-weight:600;background:var(--card);color:var(--ink);
  box-shadow:0 0 0 1px var(--line);transition:background var(--fast),box-shadow var(--fast),color var(--fast);white-space:nowrap}
.btn:hover{background:var(--hover);box-shadow:0 0 0 1px var(--line-strong)}
.btn--primary{background:var(--jade);color:var(--on-accent);box-shadow:none}
.btn--primary:hover{background:var(--jade);filter:brightness(1.06);box-shadow:var(--glow-jade-hi)}
.btn--dark{background:var(--sunk);color:var(--ink);box-shadow:0 0 0 1px var(--line-strong)}
.btn--dark:hover{background:var(--sunk-2)}
.btn--ghost{background:transparent;box-shadow:none;color:var(--ink-2)}
.btn--ghost:hover{color:var(--ink);background:var(--hover);box-shadow:none}
.btn--sell{background:var(--coral);color:#fff;box-shadow:none}
.btn--sell:hover{filter:brightness(1.06);box-shadow:var(--glow-coral)}
.btn--block{width:100%;min-height:44px;font-size:var(--fs-15);font-weight:700;border-radius:var(--r-md)}
.btn:disabled{background:var(--sunk);color:var(--ink-4);box-shadow:0 0 0 1px var(--line);cursor:not-allowed;filter:none;opacity:1}
.iconbtn{width:34px;height:34px;border-radius:var(--r-sm);background:var(--sunk);color:var(--ink-2);display:grid;place-items:center;
  font-size:var(--fs-14);box-shadow:0 0 0 1px var(--line);transition:var(--fast);flex:none}
.iconbtn:hover{background:var(--sunk-2);color:var(--ink);box-shadow:0 0 0 1px var(--line-strong)}
.iconbtn:disabled{color:var(--ink-4);background:var(--sunk);box-shadow:0 0 0 1px var(--line)}
.text-action{color:var(--jade-deep);font-size:var(--fs-12);font-weight:600}
.text-action:hover{text-decoration:underline}
.text-action:disabled{color:var(--ink-4);cursor:default;text-decoration:none}

/* ── chips & badges ────────────────────────────────────── */
.chip{padding:6px 12px;border-radius:var(--r-pill);font-size:var(--fs-12);font-weight:600;color:var(--ink-2);background:var(--sunk);
  box-shadow:0 0 0 1px var(--line);transition:var(--fast);white-space:nowrap}
.chip:hover{color:var(--ink);background:var(--sunk-2)}
.chip[aria-pressed="true"]{background:var(--jade-wash);color:var(--jade-deep);box-shadow:0 0 0 1px var(--jade-soft)}
.badge{font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;letter-spacing:.02em;text-transform:uppercase;flex:none;line-height:1.4;
  background:var(--sunk);color:var(--ink-3);box-shadow:0 0 0 1px var(--line)}
.badge--grad{background:var(--jade-wash);color:var(--jade-deep);box-shadow:none}
.badge--near{background:var(--amber-wash);color:var(--amber-deep);box-shadow:none}
.badge--fresh{background:var(--peri-wash);color:var(--peri-deep);box-shadow:none}
.badge--beta{background:var(--amber-wash);color:var(--amber-deep);box-shadow:none}
.status-badge{display:inline-flex;font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;background:var(--sunk);color:var(--ink-3);
  box-shadow:0 0 0 1px var(--line);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;line-height:1.4}
.status-badge.good{background:var(--jade-wash);color:var(--jade-deep);box-shadow:0 0 0 1px var(--jade-soft)}
.status-badge.pending{background:var(--amber-wash);color:var(--amber-deep);box-shadow:none}
.status-badge.xstock-badge{background:var(--peri-wash);color:var(--peri-deep);box-shadow:none}
.tinypill{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--jade-wash);color:var(--jade-deep);letter-spacing:.03em;text-transform:uppercase}
.swatch{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.plogo{width:16px;height:16px;border-radius:50%;flex:none;display:inline-block;vertical-align:middle;overflow:hidden}
.plogo svg{width:100%;height:100%;display:block}
.plogo[src$="/near.svg"],.asset-logo[src$="/near.svg"]{background:#fff;padding:5px;box-sizing:border-box}
.pairchip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);font-weight:650;color:var(--ink);
  background:var(--sunk);box-shadow:0 0 0 1px var(--line);border-radius:var(--r-pill);padding:4px 9px 4px 5px;white-space:nowrap}
.pairchip .swatch:not(.plogo){margin-left:4px}
.star{color:var(--ink-4);font-size:15px;line-height:1;transition:var(--fast);cursor:pointer}
.star:hover,.star.on{color:var(--amber)}
.live-missing{color:var(--ink-4);border-bottom:1px dotted var(--ink-4);cursor:help;font-weight:500}

/* ── segmented control ─────────────────────────────────── */
.seg{display:flex;gap:2px;background:var(--sunk);border-radius:var(--r-sm);padding:3px;box-shadow:0 0 0 1px var(--line)}
.seg button{padding:5px 11px;border-radius:6px;font-size:var(--fs-12);font-weight:600;color:var(--ink-3);transition:var(--fast);min-height:26px}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 0 0 1px var(--line-strong)}
.seg button:disabled{opacity:.45;cursor:default}

/* ── avatar + curve ring ───────────────────────────────── */
.ring{position:relative;flex:none}
.ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.av{position:absolute;inset:5px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:-.02em}
.ring--lg .av{inset:6px;font-size:18px}
/* Generated token identity: round, hue by hash, one hairline. */
.token-art{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;flex:none;
  box-shadow:0 0 0 1px var(--line-strong);color:var(--jade-deep);background:var(--jade-wash)}
.token-art.peri{color:var(--peri-deep);background:var(--peri-wash)}
.token-art.azure{color:var(--azure-deep);background:var(--azure-wash)}
.token-art.amber{color:var(--amber-deep);background:var(--amber-wash)}
.token-art svg{width:88%;height:88%}
.token-art>img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.asset-logo{display:block;object-fit:contain;border-radius:50%;width:44px;height:44px}

/* ── surfaces ──────────────────────────────────────────── */
.card{background:var(--card);box-shadow:var(--e1);border-radius:var(--r-lg)}
.card--raised{box-shadow:var(--e3)}
.sunkbox{background:var(--sunk);box-shadow:0 0 0 1px var(--line);border-radius:var(--r-sm);padding:10px 12px;min-width:0}
.sunkbox .k{font-size:var(--fs-11);color:var(--ink-3);font-weight:600;letter-spacing:.02em}
.sunkbox .v{font-size:var(--fs-15);font-weight:700;margin-top:3px;letter-spacing:-.01em;overflow-wrap:anywhere}
.sunkbox small{font-size:var(--fs-11);color:var(--ink-3);font-weight:500}

/* ── header ────────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:60;background:var(--bg-blur);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);min-height:56px;padding:0 var(--page-x);display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:9px;flex:none;margin-right:10px;color:var(--ink);white-space:nowrap}
.brand-logo{display:block;height:27px;width:auto;color:var(--ink)}
.brand-logo svg{height:100%;width:auto;display:block}
.logo{width:28px;height:28px;border-radius:8px;display:block;flex:none}
.wordmark{font-family:var(--font-display);font-weight:750;font-size:19px;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.wordmark i{font-style:normal;color:var(--jade)}
.netpill{display:none}
.beacon{width:7px;height:7px;border-radius:50%;background:var(--jade);box-shadow:0 0 0 3px var(--jade-wash);display:inline-block}
.search{flex:1;min-width:140px;max-width:340px;position:relative}
.search input{width:100%;background:var(--sunk);box-shadow:0 0 0 1px var(--line);border-radius:var(--r-sm);
  padding:0 40px 0 34px;height:36px;font-size:var(--fs-13);transition:var(--fast)}
.search input:focus{box-shadow:0 0 0 1px var(--jade-soft),0 0 0 4px var(--jade-wash)}
.search .mag{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3);pointer-events:none;display:flex}
.search kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font:inherit;font-size:10px;font-weight:600;
  color:var(--ink-3);background:var(--card);box-shadow:0 0 0 1px var(--line);border-radius:4px;padding:2px 5px}
.top .header-explore,.top .btn--pairs{display:inline-flex;align-items:center;gap:5px;background:transparent;box-shadow:none;
  color:var(--ink-2);font-size:var(--fs-13);font-weight:600;padding:0 10px;min-height:34px;border-radius:var(--r-sm)}
.top .header-explore:hover,.top .btn--pairs:hover{color:var(--ink);background:var(--hover);box-shadow:none}
.top .header-explore[aria-current="page"],.top .btn--pairs[aria-current="page"]{color:var(--ink);background:var(--sunk);box-shadow:0 0 0 1px var(--line)}
.top .xstocks-nav-link{color:var(--peri)}
.top .xstocks-nav-link:hover{color:var(--peri-deep)}
.top #launchBtn{margin-left:6px}
.theme-toggle{width:34px;height:34px;flex:none}
.top #walletBtn{gap:8px}
.top #walletBtn .wallet-glyph{width:8px;height:8px;border-radius:50%;background:var(--ink-4);display:inline-block;font-size:0;flex:none}
.top #walletBtn.is-connected .wallet-glyph{background:var(--jade)}

/* Contract status line and the market ribbon share one strip under the header. */
.review-banner{display:flex;align-items:center;gap:8px;min-height:26px;padding:4px var(--page-x);font-size:var(--fs-11);
  color:var(--ink-3);background:var(--sunk);border-bottom:1px solid var(--line);line-height:1.4}
.ribbon{display:flex;align-items:center;gap:0;height:38px;padding:0 var(--page-x);border-bottom:1px solid var(--line);
  background:var(--card);overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.ribbon::-webkit-scrollbar{display:none}
.rib{display:flex;align-items:baseline;gap:7px;padding:0 16px;border-right:1px solid var(--line);font-size:var(--fs-12);flex:none;line-height:1}
.rib:first-child{padding-left:0}
.rib:last-child{border-right:0}
.rib .k{color:var(--ink-3);font-weight:500}
.rib .v{font-weight:700;color:var(--ink)}
.rib .d{font-size:var(--fs-11);font-weight:600}

/* ── trade form (shared by panel, token page and sheet) ── */
.toggle{display:flex;background:var(--sunk);border-radius:var(--r-sm);padding:3px;gap:3px;margin-bottom:10px;box-shadow:0 0 0 1px var(--line)}
.toggle button{flex:1;padding:8px;border-radius:6px;font-weight:700;font-size:var(--fs-13);color:var(--ink-3);transition:var(--fast)}
.toggle button[aria-pressed="true"]{background:var(--jade-wash);color:var(--jade-deep);box-shadow:0 0 0 1px var(--jade-soft)}
.toggle button[aria-pressed="true"].is-sell{background:var(--coral-wash);color:var(--coral-deep);box-shadow:0 0 0 1px rgba(255,107,107,.45)}
.amtbox{background:var(--sunk);box-shadow:0 0 0 1px var(--line);border-radius:var(--r-md);padding:10px 12px;transition:var(--fast)}
.amtbox:focus-within{box-shadow:0 0 0 1px var(--jade-soft),0 0 0 4px var(--jade-wash)}
.amtbox .r1{display:flex;justify-content:space-between;font-size:var(--fs-11);color:var(--ink-3);margin-bottom:2px;font-weight:600}
.amtbox .r2{display:flex;align-items:center;gap:10px}
.amtbox input{flex:1;min-width:0;font-family:var(--font-display);font-size:var(--fs-24);font-weight:700;letter-spacing:-.02em;padding:2px 0}
.amtbox input::placeholder{color:var(--ink-4)}
.assetpill{display:inline-flex;align-items:center;gap:6px;background:var(--card);box-shadow:0 0 0 1px var(--line);border-radius:var(--r-pill);padding:4px 10px 4px 5px;font-weight:700;font-size:var(--fs-12);flex:none}
.assetpill .swatch:not(.plogo){margin-left:4px}
.quick{display:flex;gap:5px;margin:8px 0 10px}
.quick button{flex:1;padding:6px 0;border-radius:6px;font-size:var(--fs-12);font-weight:600;color:var(--ink-2);background:var(--sunk);box-shadow:0 0 0 1px var(--line);transition:var(--fast)}
.quick button:hover{color:var(--ink);box-shadow:0 0 0 1px var(--line-strong)}
.quick button:disabled{opacity:.5;cursor:default}
.lines{margin-bottom:10px}
.lines div{display:flex;justify-content:space-between;padding:4px 0;font-size:var(--fs-12);color:var(--ink-3)}
.lines div b{font-weight:650;color:var(--ink)}
.lines .lead{padding-bottom:8px;margin-bottom:4px;border-bottom:1px dashed var(--line)}
.lines .lead b{font-size:var(--fs-15)}
.note{margin-top:10px;padding:10px 12px;border-radius:var(--r-sm);background:var(--amber-wash);font-size:var(--fs-12);color:var(--amber-deep);line-height:1.45}
.note b{font-weight:700}
.pairlock{font-size:var(--fs-11);color:var(--ink-3);margin-top:10px;display:flex;gap:7px;align-items:flex-start;line-height:1.4}
.pairlock b{color:var(--ink-2)}

/* ── tabs ──────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button,.tabs a{padding:10px 12px;font-size:var(--fs-13);color:var(--ink-3);font-weight:600;position:relative;white-space:nowrap;transition:var(--fast);flex:none}
.tabs button:hover,.tabs a:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;border-radius:2px;background:var(--jade)}
.tabs button span{font-size:var(--fs-11);color:var(--ink-4);margin-left:5px;font-weight:600}

/* ── trade feed ────────────────────────────────────────── */
.trades{display:flex;flex-direction:column}
.tr{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:var(--fs-12)}
.tr:last-child{border-bottom:0}
.tr.is-new{animation:pop .5s ease-out}
@keyframes pop{from{background:var(--jade-wash)}to{background:transparent}}
.sideb{font-size:10px;font-weight:800;padding:2px 0;border-radius:4px;text-align:center;letter-spacing:.04em}
.sideb--b{background:var(--jade-wash);color:var(--jade-deep)}
.sideb--s{background:var(--coral-wash);color:var(--coral-deep)}
.tr .who{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-mono);font-size:var(--fs-11)}
.tr .amt{font-weight:650;text-align:right;display:block}
.tr .ago{font-size:var(--fs-11);color:var(--ink-4);text-align:right;display:block}

/* ── key/value list ────────────────────────────────────── */
.kv{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:var(--fs-12);color:var(--ink-3);border-bottom:1px dashed var(--line)}
.kv:last-child{border-bottom:0}
.kv b{font-weight:600;color:var(--ink);text-align:right;overflow-wrap:anywhere}

/* ── chart animation ───────────────────────────────────── */
.draw{stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw .9s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.fade{animation:fade .6s .3s both}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ── modal ─────────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(4px);z-index:80;display:grid;place-items:center;padding:24px;animation:fade .18s both}
.modal{background:var(--card);border-radius:16px;box-shadow:var(--e3);width:min(820px,100%);max-height:90vh;overflow-y:auto;animation:rise .22s var(--ease)}
@keyframes rise{from{transform:translateY(12px) scale(.985);opacity:0}to{transform:none;opacity:1}}
.modal__head{padding:20px 24px 0;display:flex;align-items:flex-start;gap:14px}
.modal__head h2{font-size:var(--fs-20)}
.modal__head p{margin:3px 0 0;color:var(--ink-3);font-size:var(--fs-12)}
.steps{display:flex;gap:0;padding:16px 24px 0}
.step{flex:1;display:flex;align-items:center;gap:9px;padding:8px 0;border-top:2px solid var(--line);transition:var(--mid)}
.step .k{font-size:10px;font-weight:800;color:var(--ink-4);width:20px;height:20px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 1px var(--line);background:var(--sunk)}
.step .v{font-size:var(--fs-12);font-weight:600;color:var(--ink-3);white-space:normal}
.step[data-on="true"]{border-top-color:var(--jade)}
.step[data-on="true"] .k{background:var(--jade);color:var(--on-accent);box-shadow:none}
.step[data-on="true"] .v{color:var(--ink)}
.step[data-done="true"]{border-top-color:var(--jade-soft)}
.step[data-done="true"] .k{background:var(--jade-wash);color:var(--jade-deep);box-shadow:0 0 0 1px var(--jade-soft)}
.step[data-done="true"] .v{color:var(--ink-2)}
.modal__body{padding:18px 24px}
.modal__foot{display:flex;align-items:center;gap:10px;padding:14px 24px 20px;border-top:1px solid var(--line);flex-wrap:wrap}
.field{background:var(--sunk);box-shadow:0 0 0 1px var(--line);border-radius:var(--r-sm);padding:10px 12px;width:100%;font-size:var(--fs-14);transition:var(--fast);color:var(--ink)}
.field:focus{box-shadow:0 0 0 1px var(--jade-soft),0 0 0 4px var(--jade-wash);outline:none}
.field[readonly]{color:var(--ink-2)}
.flabel{font-size:var(--fs-12);font-weight:650;display:block;margin-bottom:6px;color:var(--ink-2)}
.plist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:320px;overflow-y:auto;padding:2px}
.pitem{display:flex;align-items:center;gap:10px;background:var(--sunk);box-shadow:0 0 0 1px var(--line);border-radius:var(--r-md);padding:10px 11px;text-align:left;transition:var(--fast);min-width:0}
.pitem:hover{box-shadow:0 0 0 1px var(--line-strong);background:var(--hover)}
.pitem[aria-pressed="true"]{background:var(--jade-wash);box-shadow:0 0 0 1.5px var(--jade)}
.pitem.is-stock[aria-pressed="true"]{background:var(--peri-wash);box-shadow:0 0 0 1.5px var(--peri)}
.pico{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--on-accent);font-weight:700;font-size:13px;flex:none;overflow:hidden;background:var(--jade)}
.pico img{width:100%;height:100%;display:block}
.pitem .t{font-weight:700;font-size:var(--fs-13);display:flex;align-items:center;gap:6px}
.pitem .s{font-size:var(--fs-11);color:var(--ink-3);display:block;white-space:normal;overflow-wrap:anywhere}
.disclosure{margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--peri-wash);color:var(--peri-deep);font-size:var(--fs-12);line-height:1.5}
.review{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}

/* ── toast ─────────────────────────────────────────────── */
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,12px);background:var(--ink);color:var(--on-ink);padding:10px 16px;border-radius:var(--r-md);
  font-size:var(--fs-13);font-weight:600;box-shadow:var(--e3);opacity:0;pointer-events:none;transition:var(--slow) var(--ease);z-index:95;max-width:calc(100vw - 32px);text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ── quick buy (compact trigger on rows and cards) ─────── */
.qbuy,.quick-buy-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:32px;padding:0 11px;border-radius:var(--r-sm);
  font-size:var(--fs-12);font-weight:700;background:var(--jade-wash);color:var(--jade-deep);box-shadow:0 0 0 1px var(--jade-soft);transition:var(--fast);white-space:nowrap;flex:none}
.qbuy:hover,.quick-buy-button:hover:not(:disabled){background:var(--jade);color:var(--on-accent);box-shadow:none}
.qbuy[data-state="sold"]{background:var(--sunk);color:var(--ink-3);box-shadow:0 0 0 1px var(--line);cursor:default}
.qbuy--card{width:100%;min-height:36px}

.qpop{width:min(380px,100%);padding:18px 20px 20px}
.qpop__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.qpop__head h3{font-size:var(--fs-17);line-height:1.15}
.qpop__head .s{font-size:var(--fs-12);color:var(--ink-3)}
.qpop__amts{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-bottom:12px}
.qpop__amts button{background:var(--sunk);box-shadow:0 0 0 1px var(--line);border-radius:var(--r-sm);padding:11px 6px;transition:var(--fast);font-weight:650;font-size:var(--fs-14)}
.qpop__amts button:hover{background:var(--sunk-2)}
.qpop__amts button[aria-pressed="true"]{background:var(--jade-wash);color:var(--jade-deep);box-shadow:0 0 0 1px var(--jade-soft)}
.qpop__amts .sub{display:block;font-size:var(--fs-11);color:var(--ink-3);font-weight:500;margin-top:2px}
.qpop .lines{margin-bottom:2px}
.qpop__more{width:100%;text-align:center;font-size:var(--fs-12);color:var(--ink-3);padding:10px 0 0;display:block}
.qpop__more:hover{color:var(--ink)}

/* ── horizontal slider (pair chips) ────────────────────── */
.slider{position:relative}
.slider__track{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth;cursor:grab;padding:1px}
.slider__track::-webkit-scrollbar{display:none}
.slider__track.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.slider__track.is-dragging *{pointer-events:none}
.slider__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--card);box-shadow:var(--e2);color:var(--ink-2);opacity:0;pointer-events:none;transition:var(--fast)}
.slider__btn:hover{color:var(--ink);transform:translateY(-50%) scale(1.06)}
.slider__btn[data-show="true"]{opacity:1;pointer-events:auto}
.slider__btn--l{left:-6px}
.slider__btn--r{right:-6px}
.slider__fade{position:absolute;top:0;bottom:0;width:44px;pointer-events:none;z-index:2;opacity:0;transition:var(--fast)}
.slider__fade[data-show="true"]{opacity:1}
.slider__fade--l{left:0;background:linear-gradient(90deg,var(--card),transparent)}
.slider__fade--r{right:0;background:linear-gradient(270deg,var(--card),transparent)}

/* ── detail dialog (native <dialog>) ───────────────────── */
.detail-dialog{border:0;padding:0;width:min(560px,calc(100% - 28px));max-height:90dvh;border-radius:var(--r-lg);box-shadow:var(--e3);color:var(--ink);background:var(--card)}
.detail-dialog::backdrop{background:var(--scrim);backdrop-filter:blur(4px)}
.detail-heading{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.detail-heading h2{font-size:var(--fs-17)}
.detail-body{padding:20px;overflow-wrap:anywhere}
.detail-body p{font-size:var(--fs-13);color:var(--ink-2);line-height:1.6}
.detail-body .account-id{font-size:var(--fs-11)}
.detail-body label input,.detail-body label textarea{background:var(--sunk);box-shadow:0 0 0 1px var(--line);border-radius:var(--r-sm)}
.detail-token{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.detail-token p{margin:2px 0;font-size:var(--fs-12)}
.detail-values{margin:0}
.detail-values>div{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px dashed var(--line);font-size:var(--fs-12)}
.detail-values dt{color:var(--ink-3)}
.detail-values dd{margin:0;font-weight:650;text-align:right}
.technical-details{font-size:var(--fs-12);color:var(--ink-3);margin-top:16px}
.technical-details summary{cursor:pointer;font-weight:600}
.account-id{font-family:var(--font-mono);font-size:var(--fs-11);overflow-wrap:anywhere;color:var(--ink-2)}
.catalog-notice{font-size:var(--fs-12);line-height:1.55;padding:12px;border-radius:var(--r-sm);background:var(--sunk);box-shadow:0 0 0 1px var(--line);color:var(--ink-2)}