/* ─────────────────────────────────────────────────────────────────────────────
 * site.css — the ONE stylesheet for the whole site.
 *
 * WHY ONE FILE
 *
 * While a stylesheet loaded per PAGE, a page could restyle the shell, and it did:
 * the accent flipped colour on navigating to /tx and the XNT box moved, because
 * that page's sheet carried a palette and 84 header rules. Guards caught those two
 * after the fact; this makes the whole class impossible instead.
 *
 * Every page's rules are SCOPED to .pagehost[data-page="<name>"], so a page cannot
 * reach the header, the rail, or another page — not by discipline, by selector.
 * Nothing loads or changes during browsing: one file, fetched once.
 *
 * Section 1 is the shell (header, rail, screener, theme variables) and is the only
 * part allowed at document level.
 * ───────────────────────────────────────────────────────────────────────────── */

/* ══ 1. SHELL ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/roboto-400.woff2') format('woff2')}@font-face{font-family:'Roboto';font-style:normal;font-weight:500 600;font-display:swap;src:url('/fonts/roboto-500.woff2') format('woff2')}@font-face{font-family:'Roboto';font-style:normal;font-weight:700 800;font-display:swap;src:url('/fonts/roboto-700.woff2') format('woff2')}@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/roboto-900.woff2') format('woff2')}html{font-family:'Roboto',sans-serif;font-synthesis:none;font-variant-numeric:tabular-nums;
    /* Mobile WebKit/Blink paint a translucent blue-grey highlight over whatever
     * you tap — any card, row or button — for as long as the tap registers,
     * because nothing on the page had ever told it not to. Every one of this
     * site's own click states (`.vcard:hover`, `.kp:hover`, table row hovers,
     * etc.) already gives its own feedback, so the browser's default flash is
     * pure noise on top of it, not a second cue. Set once, here, for the whole
     * document — the one place this belonged, `.xpanel` alone, was itself a
     * sign the reset had never been done sitewide. Does not touch keyboard
     * focus rings (a different mechanism, `:focus`/`:focus-visible`). */
    -webkit-tap-highlight-color:transparent}

  *{box-sizing:border-box}
  body{margin:0;background:#0f131a;color:#cdd4de;font-family:Roboto,sans-serif;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
  .mono{font-family:Roboto,sans-serif;font-variant-numeric:tabular-nums}
  .topctl{position:sticky;top:0;z-index:50;background:#04050a;border-bottom:1px solid #1b1f29;padding:13px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .topctl h1{margin:0;font-size:13px;font-weight:700}.topctl h1 b{color:#ff8a1e}.spacer{flex:1}
  .seg{display:inline-flex;background:#0d0f14;border:1px solid #1b1f29;border-radius:10px;padding:3px;gap:2px}
  .seg button{background:none;border:0;color:var(--dim);font:600 12px Roboto;padding:7px 12px;border-radius:7px;cursor:pointer}.seg button.on{background:#262c38;color:#e7ecf3}
  .desc{max-width:1100px;margin:12px auto 0;padding:0 18px;color:#7c8696;font-size:12.5px;line-height:1.5}
  .stage{padding:18px;display:flex;justify-content:center}
  .full{width:100%;max-width:1100px}.phone{width:404px;max-width:100%;border:10px solid #15171d;border-radius:34px;overflow:hidden;box-shadow:0 24px 70px #000b}

  /* themed palette (set on .page) */
  .page{position:relative;color:var(--ink);height:100vh;height:100dvh;overflow-x:hidden;overflow-y:scroll;isolation:isolate;background:var(--bgfx);
    /* Grey readability pass: ink 10.7→12.3:1, dim 5.3→7.1:1, faint 2.8→4.7:1
       contrast vs the #11151d panels — faint was below the 4.5:1 AA floor. */
    --ink:#b3bac6;--dim:#8f99a7;--faint:#7f8996;--line:#2c3342;--line2:#38404f;--up:#4bc294;--down:#eb818c;--orange:#ff9a3d;
    --bg:#181c25;--glass:rgba(22,26,34,.8);--barbg:rgba(22,26,34,.8);--tableglass:rgba(25,29,38,.62);--thbg:rgba(21,26,35,.94);
    --acc:#2dd4bf;--accInk:#052e28;
    /* --card: list/row card surface (a subtle lift over --bg); --panel: recessed
       chip surface. Both were used by .dk-card / .xpanel .xsi etc. but never
       defined, so those backgrounds fell back to transparent (dark) / a hardcoded
       dark (daylight). Defined here + in daylight below. */
    --card:#1b202a;--panel:#12161e;
    --bgfx:radial-gradient(70% 58% at 8% 0%,rgba(45,212,191,.196),transparent 66%),radial-gradient(56% 48% at 92% 2%,rgba(64,224,120,.147),transparent 66%),radial-gradient(80% 66% at 86% 110%,rgba(45,212,191,.147),transparent 66%),radial-gradient(64% 56% at 4% 104%,rgba(64,224,120,.112),transparent 66%),var(--bg)}
  .page[data-theme="blue"]{--acc:#3aa0ff;--accInk:#04101f;--bgfx:radial-gradient(70% 58% at 8% 0%,rgba(58,160,255,.196),transparent 66%),radial-gradient(56% 48% at 92% 2%,rgba(140,120,255,.147),transparent 66%),radial-gradient(80% 66% at 86% 110%,rgba(58,160,255,.147),transparent 66%),radial-gradient(64% 56% at 4% 104%,rgba(140,120,255,.112),transparent 66%),var(--bg)}
  .page[data-theme="purple"]{--acc:#a06bff;--accInk:#150733;--bgfx:radial-gradient(70% 58% at 8% 0%,rgba(160,107,255,.21),transparent 66%),radial-gradient(56% 48% at 92% 2%,rgba(240,110,200,.14),transparent 66%),radial-gradient(80% 66% at 86% 110%,rgba(160,107,255,.154),transparent 66%),radial-gradient(64% 56% at 4% 104%,rgba(240,110,200,.105),transparent 66%),var(--bg)}
  .page[data-theme="yellow"]{--acc:#ffd000;--accInk:#1a1400;--bgfx:radial-gradient(70% 58% at 8% 0%,rgba(255,208,0,.14),transparent 66%),radial-gradient(56% 48% at 92% 2%,rgba(255,150,60,.105),transparent 66%),radial-gradient(80% 66% at 86% 110%,rgba(255,208,0,.098),transparent 66%),radial-gradient(64% 56% at 4% 104%,rgba(255,150,60,.077),transparent 66%),var(--bg)}
  .page[data-theme="orange"]{--acc:#ff8a1e;--accInk:#1a0d00;--bgfx:radial-gradient(70% 58% at 8% 0%,rgba(255,138,30,.182),transparent 66%),radial-gradient(56% 48% at 92% 2%,rgba(255,100,130,.126),transparent 66%),radial-gradient(80% 66% at 86% 110%,rgba(255,138,30,.133),transparent 66%),radial-gradient(64% 56% at 4% 104%,rgba(255,100,130,.091),transparent 66%),var(--bg)}
  /* Daylight readability pass (mirror of the dark-theme one): --faint was
     #98a1b0 at 2.3:1 contrast vs the #eef1f6 bg — far below the 4.5:1 AA
     floor. Darkened: dim 5.3→6.9:1, faint 2.3→5.0:1. --ink stays (15.7:1). */
  .page[data-mode="daylight"]{--ink:#111826;--dim:#4a5361;--faint:#5f6875;--line:#e4e8ee;--line2:#d9dfe8;--up:#0c7d4f;--down:#d3233c;--orange:#ae5400;--acc:#197a6e;--accInk:#ffffff;--bg:#eef1f6;--glass:rgba(255,255,255,.82);--barbg:rgba(255,255,255,.82);--tableglass:rgba(255,255,255,.6);--thbg:rgba(246,248,251,.94);--card:#ffffff;--panel:#f4f6fa}
  /* ── Daylight accents ───────────────────────────────────────────────────────
     The accents above this line were tuned for a #181c25 page and were never
     overridden for daylight, so they were being used as TEXT on a near-white one.
     Measured on --bg #eef1f6: yellow 1.30:1, teal 1.64, --orange 1.87, orange
     2.08, blue 2.42, purple 3.07 — all far below the 4.5:1 AA floor, and
     `color:var(--acc)` carries 60 rules (links, headings, eyebrows, badges).
     --up 3.08 and --down 3.59 were short too.

     Each value below is its dark-theme accent DARKENED IN HSL — same hue, same
     saturation, lowered lightness only — to the first step that clears the floor.
     That keeps each theme identifiable; the bright original still paints the page
     wash, since --bgfx carries its own rgba() stops and is untouched.

     --accInk flips to #ffffff here: these accents are now dark, so an accent
     BUTTON is white-on-saturated (5.15–5.22:1), which is what a light theme wants
     anyway.

     On ordering: these compound selectors carry a class + TWO attributes, so they
     outrank both blocks above on specificity and apply wherever they sit. It is
     the [data-mode="daylight"] block itself that is order-dependent — it ties with
     [data-theme] at one class + one attribute, so it has to stay after the theme
     blocks or the greys stop overriding. Checked by moving these rules above the
     daylight block: the palette guard stayed green, which is the correct answer
     and not the one the earlier version of this comment claimed. */
  .page[data-theme="blue"][data-mode="daylight"]{--acc:#006cd1}
  .page[data-theme="purple"][data-mode="daylight"]{--acc:#823cff}
  .page[data-theme="yellow"][data-mode="daylight"]{--acc:#836a00}
  .page[data-theme="orange"][data-mode="daylight"]{--acc:#ae5300}
  .page:not(.ismob)[data-mode="daylight"]{background:linear-gradient(color-mix(in srgb,var(--bg) 78%,transparent),color-mix(in srgb,var(--bg) 78%,transparent)),var(--bgfx)}
  /* ── Daylight (light-mode) component fixes ──────────────────────────────────
     These components hardcoded DARK colors, so in daylight they showed as dark
     blobs, invisible white-on-white fields, or low-contrast text on the light bg.
     Overrides apply ONLY in daylight; dark mode is completely untouched.
     (Mockup-approved.) */
  .page[data-mode="daylight"] .swseg button{border-color:var(--line)}
  .page[data-mode="daylight"] .swfield{background:var(--panel);border-color:var(--line)}
  .page[data-mode="daylight"] .swsym{background:#e9edf3}
  .page[data-mode="daylight"] .swarrow{background:var(--card);border-color:var(--line);color:var(--dim)}
  .page[data-mode="daylight"] .swwarn{color:#9a6a00;background:#fff4dd;border-color:#f0dca8}
  .page[data-mode="daylight"] .swimp.warn{color:#9a6a00}
  .page[data-mode="daylight"] .badge.deg,.page[data-mode="daylight"] .tyico.deg{color:#a86a00;border-color:#e6d3a0}
  .page[data-mode="daylight"] .badge.warn{color:#9a6a00;border-color:#e8d29a}
  .page[data-mode="daylight"] .badge.ai{color:#0f8f7e;background:transparent;border-color:var(--line)}
  .page[data-mode="daylight"] .badge.nat{color:#0e8a7a;border-color:#bfe6df}
  .page[data-mode="daylight"] .ttag.lpa{color:#2f6fbf;border-color:#bcd4f0;background:#eef4fb}
  .page[data-mode="daylight"] .ttag.lpr{color:#a35f00;border-color:#f0d3a8;background:#fff3e2}
  .page[data-mode="daylight"] .ttag.xfer{background:#e8eef6;color:#3a6cb0}
  .page[data-mode="daylight"] .ttag.bro{background:#e6eef8;color:#2e6dae}
  .page[data-mode="daylight"] .ttag.bri{background:#dff3ec;color:#0e7a5b}
  /* brn/mnt had NO daylight variant, so they kept #3a1d1d / #3a371d — two dark
     blobs sitting on a white page next to five light chips. Seen, not deduced:
     they are unmistakable in a render of all five themes in both modes. */
  .page[data-mode="daylight"] .ttag.brn{background:#fdeaea;color:#b3261e}
  .page[data-mode="daylight"] .ttag.mnt{background:#fcf3dc;color:#8a6100}
  /* THE KNOCKOUT INVERTS IN DAYLIGHT, and it has to.
     .tibox is `background:currentColor`, so the chip's own colour is the box and
     .tico's near-black #0b0d12 is knocked out of it. On a light chip that colour
     is pulled two ways at once: dark enough for the LABEL to read on the chip
     (needs luminance <= 0.139) and light enough for a near-black GLYPH (needs
     >= 0.1975). There is no value satisfying both — the window is empty, so no
     amount of tuning the chip colours fixes it. Inverting does: a white glyph on
     the saturated box reads 4.91–6.54:1 across every daylight chip, and the same
     inversion covers the accent-boxed xdir/wrp for free now that the daylight
     accents are dark. Dark mode keeps its near-black knockout, untouched. */
  .page[data-mode="daylight"] .tico{stroke:#ffffff}
  .page[data-mode="daylight"] .hlabel{background:#e4e8ee;color:#4a5361}
  .page[data-mode="daylight"] .hlabel.pool{background:#c7cbff;color:#2e2a86;box-shadow:0 0 0 1px #8f95e8 inset}
  .page[data-mode="daylight"] .pname{background:#efe9ff;color:#6b4bbf;border-color:#d9ccf5}
  .page[data-mode="daylight"] .exbadge{background:#efe9ff;color:#6b4bbf;border-color:#d9ccf5}
  .page[data-mode="daylight"] .supcirc{background:#d6f5e6;color:#0f7a52}
  .page[data-mode="daylight"] .supbar{background:#e4e8ee}
  .page[data-mode="daylight"] .xpanel .xsi b.mnt{color:#a86a00}
  .page[data-mode="daylight"] .xpanel .xsi b.brn{color:#c0392b}
  .page[data-mode="daylight"] .xpanel .xsi b.bro{color:#2f6fb0}
  .page[data-mode="daylight"] .xpanel .xsi b.bri{color:#0f8060}
  .page[data-mode="daylight"] .srow:hover,.page[data-mode="daylight"] .sk-row:hover{background:rgba(0,0,0,.05)}
  .page[data-mode="daylight"] .gbar-t{background:rgba(0,0,0,.08)}
  .full .page{border:1px solid var(--line);border-radius:16px}
  .bgfx{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--bgfx)}
  /* desktop only: dim the mesh gradient by veiling it toward the base color */
  .page:not(.ismob){background:linear-gradient(color-mix(in srgb,var(--bg) 60%,transparent),color-mix(in srgb,var(--bg) 60%,transparent)),var(--bgfx)}
  /* Mobile had no wash over --bgfx, so the ambient accent glow showed full-strength.
     Add the same bg overlay so the glow is subtle on phones too — calmer, to match
     the softened palette. */
  .page.ismob{background:linear-gradient(color-mix(in srgb,var(--bg) 55%,transparent),color-mix(in srgb,var(--bg) 55%,transparent)),var(--bgfx)}
  .content{position:relative;z-index:2;display:flex;flex-direction:column;min-height:100%}.page a{color:inherit;text-decoration:none}
  /* Compact density — tightens list table, sidebar rows, and marquee */
  .page.dense table.tt{font-size:11.5px}
  .page.dense table.tt th{padding:7px 10px;font-size:8.5px}
  .page.dense table.tt td{padding:7px 10px}
  .page.dense .srow{padding:4px 6px !important}
  .page.dense .srow .sr,.page.dense .srow .schg,.page.dense .srow .sval{font-size:9px}
  .page.dense .lsb h4{font-size:9.5px;margin:8px 6px 4px !important}
  .page.dense .marq .g{font-size:10.5px}
  .page.dense .badge{font-size:7.5px;padding:1px 4px}

  .brand{display:flex;align-items:center;gap:8px}.brandlogo{height:23px;width:auto;display:block}.bt{font-weight:800;font-size:15px}.bt b{color:var(--orange)}
  .tdseg{display:inline-flex;background:var(--glass);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
  .tdseg button{background:none;border:0;color:var(--dim);font:600 12px Roboto;padding:6px 12px;border-radius:6px;cursor:pointer;white-space:nowrap}.tdseg button.on{background:var(--acc);color:var(--accInk)}
  /* Degen tab = the custom lift-off rocket (see DEGEN_ROCKET in app.js). The
     button becomes a flex row so the oversized 22px rocket sits centred beside
     the label without stretching the segment's height; negative margins let it
     overflow its line box rather than tallen the header bar. */
  .tdseg button[data-view="degen"]{display:inline-flex;align-items:center;gap:3px}
  .drkt{width:22px;height:22px;flex:none;overflow:visible;margin:-5px -2px;transform:rotate(43deg);animation:drkShake 1.6s ease-in-out infinite}
  .drkt .fl{fill:url(#drkFire);transform-box:fill-box;transform-origin:50% 60%;animation:drkThrust .3s ease-in-out infinite alternate}
  .drkt .bd{fill:url(#drkBody)}
  .drkt .ns{fill:#ff3b2e}
  .drkt .fn{fill:#ff6a1f}
  .drkt .wn{fill:#37d2ff;stroke:#0a2836;stroke-width:.6}
  @keyframes drkThrust{from{transform:scaleY(.62) scaleX(1.05);opacity:.72}to{transform:scaleY(1.18) scaleX(.9);opacity:1}}
  @keyframes drkShake{0%,100%{transform:rotate(43deg) translate(0,0)}20%{transform:rotate(43deg) translate(.5px,-.6px)}40%{transform:rotate(43deg) translate(-.5px,.4px)}60%{transform:rotate(43deg) translate(.4px,.5px)}80%{transform:rotate(43deg) translate(-.4px,-.4px)}}
  @media (prefers-reduced-motion:reduce){.drkt{animation:none;transform:rotate(43deg)}.drkt .fl{animation:none}}
  .search{position:relative;display:flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--line);border-radius:9px;padding:0 11px;min-width:60px}
  .search svg{width:15px;height:15px;color:var(--faint)}.search input{background:none;border:0;outline:none;color:var(--ink);font:500 13px Roboto;padding:9px 0;width:100%}.search input::placeholder{color:var(--faint)}
  /* Universal token-search dropdown: floats under the box on any page, so search
     never disturbs the current page's content. */
  .qdrop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:80;max-height:min(70vh,420px);overflow-y:auto;
    background:var(--panel,#11151d);border:1px solid var(--line);border-radius:10px;padding:5px;
    box-shadow:0 12px 34px rgba(0,0,0,.42)}
  .qdrop[hidden]{display:none}
  .qdmsg{padding:12px 12px;color:var(--faint);font:600 12px Roboto;text-align:center}
  .qditem{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:8px;cursor:pointer}
  .qditem:hover,.qditem.on{background:color-mix(in srgb,var(--ink) 6%,transparent)}
  .qditem .qdav img,.qditem .qdav svg,.qditem .qdav .avatar{width:26px;height:26px;border-radius:50%;flex:0 0 26px}
  .qdmeta{display:flex;flex-direction:column;min-width:0;flex:1}
  .qdsym{display:flex;align-items:center;gap:5px;font:700 13px Roboto;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .qdpair{font-weight:600;color:var(--faint)}
  .qdname{font:500 11px Roboto;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .qdpx{font:600 12px Roboto,sans-serif;color:var(--dim,var(--faint));white-space:nowrap}
  /* On mobile the search box is a narrow flex cell, so an absolute dropdown anchored
     to it is narrow too. Span the FULL viewport width instead: a fixed overlay just
     below the sticky header (--hh is its measured height, so it adapts per page). */
  .page.ismob .qdrop{position:fixed;top:calc(var(--hh,118px) + 4px);left:0;right:0;
    max-height:calc(100dvh - var(--hh,118px) - 16px);border-radius:0 0 12px 12px}
  /* When the dropdown shows real list rows (tkcRow cards), it IS the list: drop the
     inner padding so cards sit flush, and let the rounded dropdown clip them. */
  .qdrop.qdlist{padding:0}
  .qdrop .qdrows{background:var(--card)}
  .qdrop .qdrows .tkc:last-child{border-bottom:none}
  .xnt{display:flex;align-items:center;gap:6px;background:var(--glass);border:1px solid var(--line);border-radius:9px;padding:6px 9px;white-space:nowrap}
  .xnt .k{color:var(--faint);font-size:8.5px;text-transform:uppercase;letter-spacing:.5px}.xnt .v{font-family:Roboto,sans-serif;font-weight:700;font-size:12px;color:var(--acc)}.xnt .d{font-family:Roboto,sans-serif;font-size:10px;font-weight:700}
  .live{display:flex;align-items:center;gap:6px;color:var(--up);font-size:11px;font-weight:600;white-space:nowrap}
  /* The dot itself pulses (livepulse). On top of it a radiating ring (::after)
     expands and fades — a broadcast "ping" that reads as actively live rather than
     a dot that merely breathes. position:relative anchors the ring to the dot. */
  .live .dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--up);box-shadow:0 0 8px var(--up);animation:livepulse 1.6s ease-in-out infinite}
  .live .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--up);z-index:-1}
  @media (prefers-reduced-motion: no-preference){
    .live .dot::after{animation:livebeacon 1.8s ease-out infinite}
    @keyframes livebeacon{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(3);opacity:0}}
  }
  /* A stale feed must not look live — freeze BOTH the pulse and the ring. */
  .live.stale .dot{animation:none}
  .live.stale .dot::after{animation:none;opacity:0}
  .live.stale{color:#f5a524}.live.stale .dot{background:#f5a524;box-shadow:0 0 8px #f5a524;animation:none}
  @keyframes livepulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
  .livedot{width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 6px var(--up);animation:livepulse 1.6s ease-in-out infinite;flex:none;display:inline-block}
  .livedot.stale{background:#f5a524;box-shadow:0 0 6px #f5a524;animation:none}
  .js-xntv.flashup{animation:xflashup .7s ease}.js-xntv.flashdn{animation:xflashdn .7s ease}
  @keyframes xflashup{0%{color:var(--up);text-shadow:0 0 10px color-mix(in srgb,var(--up) 55%,transparent)}100%{color:var(--acc);text-shadow:none}}
  @keyframes xflashdn{0%{color:var(--down);text-shadow:0 0 10px color-mix(in srgb,var(--down) 55%,transparent)}100%{color:var(--acc);text-shadow:none}}
  .chip{background:var(--glass);border:1px solid var(--line);color:var(--dim);font:600 11.5px Roboto;padding:8px 11px;border-radius:9px;white-space:nowrap;cursor:pointer}
  .chip.on{border-color:var(--acc);color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}.chip.star.on{border-color:var(--orange);color:var(--orange);background:color-mix(in srgb,var(--orange) 12%,transparent)}

  /* dropdowns */
  .dd{position:relative}
  .ddbtn{display:flex;align-items:center;gap:7px;width:100%;justify-content:flex-start;background:var(--glass);border:1px solid var(--line);color:var(--dim);font:600 11.5px Roboto;padding:8px 11px;border-radius:9px;cursor:pointer;white-space:nowrap}
  .ddbtn .lbl{color:var(--faint);text-transform:uppercase;letter-spacing:.5px;font-size:9.5px}.ddbtn b{color:var(--ink);font-weight:700;font-size:12px}
  .ddbtn .car{width:8px;height:8px;border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);transform:rotate(45deg);margin:-3px 0 0 auto;transition:transform .15s}
  .dd.open .ddbtn{border-color:var(--acc);color:var(--ink)}.dd.open .ddbtn .car{transform:rotate(-135deg);margin-top:2px;border-color:var(--acc)}
  .ddmenu{position:absolute;top:calc(100% + 6px);left:0;min-width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:11px;padding:5px;box-shadow:0 18px 44px #000a;z-index:80;display:none}
  .dd.open{z-index:100}
  .page[data-mode="daylight"] .ddmenu{box-shadow:0 18px 44px #0002}
  .dd.open .ddmenu{display:block;animation:pop .12s ease-out}@keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1}}
  .ddmenu.right{left:auto;right:0}
  .ddopt{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:7px;cursor:pointer;font:600 12px Roboto;color:var(--dim)}
  .ddopt:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}.ddopt .ck{width:14px;color:var(--acc);opacity:0}.ddopt.on{color:var(--ink)}.ddopt.on .ck{opacity:1}
  .ddopt .sw{width:14px;height:14px;border-radius:4px;border:1px solid #8884}.ddopt .sub{margin-left:auto;color:var(--faint);font-size:10px;font-weight:500}.ddsep{height:1px;background:var(--line);margin:4px 6px}

  /* desktop command bar */
  .bar{display:flex;align-items:center;gap:10px;padding:11px 15px;background:var(--barbg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .bar .ddbtn{width:auto}

  /* MOBILE HEADER (Shezi spec) */
  .mhead{background:var(--barbg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .mrow{display:grid;align-items:center;gap:6px;padding:5px 8px}
  .mrow.r1{grid-template-columns:1fr auto 1fr;border-bottom:1px solid var(--line2)}
  .mrow.r1 .l{justify-self:start}.mrow.r1 .c{justify-self:center}.mrow.r1 .r{justify-self:end}
  .mrow.r2{grid-template-columns:1fr auto;border-bottom:1px solid var(--line2)}
  .mrow.r3{grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line2)}

  .marq{display:flex;align-items:center;border-bottom:1px solid var(--line);background:var(--tableglass);backdrop-filter:blur(8px);overflow:hidden;position:relative;z-index:0}
  .marq .lab{flex:none;padding:7px 12px;border-right:1px solid var(--line);color:var(--orange);font:700 9px Roboto;letter-spacing:.6px;text-transform:uppercase}
  .marq .vp{overflow:hidden;flex:1}.marq .track{display:flex;padding:7px 0;white-space:nowrap;animation:scroll 22s linear infinite;width:max-content}
  /* Each half of the track is a .gshalf with a fixed 100px LEADING gap before its #1
     chip: so on load #1 isn't flush against the left edge (it used to sit at x=0 and
     scroll off before it could be read), and every wrap shows the SAME 100px gap
     before #1 comes round again. The gap is leading (not a track padding) so it is
     part of the repeating unit — the two halves stay equal width and translateX(-50%)
     still wraps seamlessly. The last chip's trailing margin is zeroed so the gap
     before the next #1 is exactly 100px, not 100+margin. Same on every device (the
     mobile track padding is 0 too, below). */
  .marq .track .gshalf{display:flex;align-items:center;padding-left:100px}
  .marq .track .gshalf .gchip:last-child{margin-right:0}
  /* Pause the scroll while the pointer is over the marquee (and while a chip is
     focused), so the token you are aiming at stops moving before you click it. A
     continuously-scrolling target slides an adjacent chip under the cursor between
     aim and click, so the click opens the WRONG token — the exact issue users hit.
     The trending strip (.tschips) already does this on hover; the header marquee had
     been left out. `.tpause` is added by JS on pointerdown so TOUCH devices — which
     have no hover before a tap — freeze the row for the duration of the press too;
     it covers BOTH the marquee and the strip. */
  .marq:hover .track,.marq:focus-within .track,.marq.tpause .track,.tschips.tpause .tstrack{animation-play-state:paused}
  /* Spacing lives on each chip (margin-right), NOT a flex gap: the track holds two
     identical copies of the chip list and scrolls to -50%, so both copies must be
     exactly equal width INCLUDING trailing space. A flex `gap` omits the gap after
     the last chip, leaving -50% ~9px short of a clean wrap (visible stutter each
     loop); a uniform per-chip margin makes the loop seamless. */
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .gchip{display:inline-flex;gap:5px;align-items:center;font-size:11.5px;cursor:pointer;margin-right:18px}.gchip .ava{width:16px;height:16px;font-size:8px}.gchip .gr{color:var(--faint);font-size:10px}.gchip .gs{font-weight:700}.gchip .gp{color:var(--dim)}
  .av{border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;color:#06120f}
  .badge{font:700 8px Roboto;letter-spacing:.4px;text-transform:uppercase;padding:1px 5px;border-radius:4px;border:1px solid var(--line2);color:var(--dim)}.badge.deg{color:#ffce6a;border-color:#5a4a1f}.badge.grad{color:var(--up);border-color:#1f6f4f}
  /* "AI" marker — token made by a registered AI agent (Agent ID). Accent tag, matches the native/DEGEN badge scale. */
  .badge.ai{color:var(--acc);border-color:#5a3a12;background:#000}
  /* Degen skull badge: white skull on a fixed dark chip (masked from /degen.svg so
     it stays crisp + one colour). .grad adds a green check for graduated tokens. */
  .degico{position:relative;display:inline-block;width:16px;height:16px;border-radius:5px;background:#1b1e24;flex:none;vertical-align:middle}
  .degico::before{content:"";position:absolute;inset:1px;background:#fff;-webkit-mask:url(/degen.svg) center/contain no-repeat;mask:url(/degen.svg) center/contain no-repeat}
  /* graduated: big green check overlapping the top-right corner (skull stays visible) */
  .degico.grad::after{content:"";position:absolute;top:-4px;right:-4px;width:10px;height:10px;border-radius:50%;border:1.5px solid #12151b;box-sizing:border-box;background:#30d158 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.4 3.4 6.6-7.4' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/7px no-repeat}
  /* XDEX type badge: hexagon-X logo (masked from /xdex.svg) in brand blue */
  .xdexico{position:relative;display:inline-block;width:16px;height:16px;border-radius:5px;background:#0f1620;flex:none;vertical-align:middle}
  .xdexico::before{content:"";position:absolute;inset:1px;background:#2ea6ff;-webkit-mask:url(/xdex.svg) center/contain no-repeat;mask:url(/xdex.svg) center/contain no-repeat}
  .page.dense .degico,.page.dense .xdexico{width:14px;height:14px}
  /* Token-page type pill: icon + short label (skull→DGN, XDEX logo→XDEX). */
  .tyico{display:inline-flex;align-items:center;gap:5px;font:700 8px Roboto;letter-spacing:.4px;text-transform:uppercase;color:var(--dim);padding:2px 7px 2px 4px;border:1px solid var(--line2);border-radius:7px}
  .tyico .degico,.tyico .xdexico{width:14px;height:14px}
  .tyico.deg{color:#ffce6a;border-color:#5a4a1f}
  .tyico.xdex{color:#2ea6ff;border-color:#1f4a6f}
  /* Bonding-curve graduation progress bar (on-curve degen rows + token page). */
  .gbar{display:inline-flex;align-items:center;gap:5px;margin-top:2px;vertical-align:middle}
  .gbar-t{position:relative;width:64px;height:4px;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden;flex:none}
  .gbar-f{position:absolute;left:0;top:0;bottom:0;border-radius:3px;transition:width .3s ease}
  .gbar-p{font:700 9px Roboto;letter-spacing:.3px;font-variant-numeric:tabular-nums}
  .ismob .gbar-t{width:52px}
  .gxnt{font-size:9.5px;color:var(--faint);margin-top:2px;font-variant-numeric:tabular-nums}
  .up{color:var(--up)}.down{color:var(--down)}
  .tablewrap{padding:10px}
  table.tt{width:100%;min-width:600px;border-collapse:separate;border-spacing:0;font-size:13px;background:var(--tableglass);backdrop-filter:blur(3px);border:1px solid var(--line2);border-radius:13px}
  table.tt th{position:sticky;top:0;background:var(--thbg);backdrop-filter:blur(8px);color:var(--faint);font:600 9.5px Roboto;letter-spacing:.5px;text-transform:uppercase;text-align:right;padding:10px 12px;border-bottom:1px solid var(--line)}
  table.tt th.l{text-align:left}table.tt td{padding:12px;border-bottom:1px solid color-mix(in srgb,var(--ink) 5%,transparent);text-align:right;white-space:nowrap}
  table.tt td.l{text-align:left}table.tt tr:last-child td{border-bottom:0}table.tt tbody tr:hover td{background:color-mix(in srgb,var(--ink) 5%,transparent)}
  .tok{display:flex;align-items:center;gap:9px;min-width:0}.tok .sym{font-weight:700}.tok .pr{color:var(--faint);font-weight:600}
  .ismob .hideM{display:table-cell}
  .ismob .ddbtn{padding:6px 9px}
  .ismob .search{padding:0 9px}.ismob .search input{padding:6px 0}
  .ismob .xnt{padding:4px 8px}
  .ismob .tdseg{padding:2px}.ismob .tdseg button{padding:5px 10px}
  .ismob .marq .lab{padding:5px 10px}.ismob .marq .track{padding:5px 0}
  .mtop{position:relative;padding:5px 9px;border-bottom:1px solid var(--line2)}
  .mtop .logocol{position:absolute;left:9px;top:0;bottom:0;display:flex;align-items:center;z-index:2}
  .mtop .brand.big .brandlogo{height:82px;width:auto}
  .rightcol{display:flex;flex-direction:column;gap:6px;min-width:0}
  /* Row 1 clears the logo like rows 2–3. Segmented control + XNT price sit on one
     line when they fit; on narrow phones the XNT pill wraps to its own line (right-
     aligned) instead of overlapping the Degen control. */
  .rrow1{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 8px;padding-left:92px;min-width:0}
  .rrow1 .tdseg{margin-right:auto}
  .rrow2{display:flex;align-items:center;gap:7px;min-width:0;padding-left:92px}
  .rrow2 .search{flex:1;min-width:0}
  /* The Liq/Pair/Sort filters, now at the top of the list (mobile) instead of the
     header. Rendered only on mobile (listCtlMobileHTML), so no media guard needed;
     the dropdowns share the width equally, like the old header row did. */
  .listctlm{display:flex;align-items:center;gap:7px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--tableglass)}
  .listctlm .dd{flex:1;min-width:0}
  /* The logo column and the left rail below it are the SAME width, off one
     variable — otherwise the rail's right border cuts across the header at a
     different x and the whole left edge reads as misaligned. padding-left is 0
     so column 1 starts at the viewport edge exactly like the rail does. */
  /* The logo moved into the rail, so the header is content + XNT only. */
  .dtop{display:grid;grid-template-columns:1fr auto;gap:0 16px;align-items:stretch;
    padding:9px 15px;background:var(--barbg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  /* Logo, now at the top of the rail. It is bounded by the RAIL's width rather than
     by the header's height, so it cannot change size when the header grows — which
     is what made it spill over the column before.
     An explicit width is required: an inline SVG carries only a viewBox and no
     intrinsic size, so leaving it auto collapses it to zero and the logo vanishes. */
  .lnavlogo{display:flex;align-items:center;justify-content:center;padding:14px 10px 12px;
    border-bottom:1px solid var(--line);margin:-14px -10px 8px}
  .lnavlogo .brandlogo{width:calc(var(--railw) - 44px);height:auto;max-width:100%}
  .dtop .rightcol{display:flex;flex-direction:column;gap:8px;min-width:0}
  .dtop .rightcol .marq{border:1px solid var(--line);border-radius:9px;background:var(--tableglass)}
  .drow{display:flex;align-items:center;gap:10px;min-width:0}
  .drow .search{flex:1;min-width:0}
  .drow.drowm .search{flex:0 0 50%;min-width:240px;max-width:50%}
  .drow.drowm .tdseg button{font:600 12.5px Roboto;padding:7px 15px}
  .drow1{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
  .drow1 .dleft{min-width:0;display:flex}
  .drow1 .dleft .search{flex:1}
  .drow1 .tdseg{justify-self:center}
  .drow1 .dright{justify-self:end;display:flex;align-items:center;gap:10px}
  .drow2{display:flex;align-items:center;justify-content:center;gap:10px}
  .drow3{display:flex;align-items:center;gap:10px}
  .dspacer{flex:1}
  .dgap{flex:0 0 24px}
  .xntcol{display:flex;align-items:center;justify-content:center}
  /* background + label are theme tokens, not literals. They used to hardcode
     color-mix(--bg 22%, #000) and #c4ccd8 — fixed dark values that the daylight
     mode then had to override with a second rule each. --card is the surface token
     (dark lift in deep mode, white in daylight) and --dim the muted-label token, so
     one rule follows every theme and the two daylight overrides are gone. */
  .xntbox{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 16px;border:1px solid var(--acc);border-radius:12px;background:var(--card)}
  .xntbox .xk{font:700 12px Roboto;letter-spacing:.5px;text-transform:uppercase;color:var(--dim)}
  .xntbox .xv{font:800 26px Roboto;color:var(--acc);line-height:1}
  .xntbox .xrow{display:flex;align-items:center;gap:8px}
  .xntbox .xd{font:700 12px Roboto}
  /* Both XNT cards (desktop .xntbox, mobile header .xnt pill) link to the XNT page. */
  .xntlink{cursor:pointer;transition:border-color .12s ease,box-shadow .12s ease,transform .1s ease}
  .xntlink:hover{border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 22%,transparent)}
  .xntlink:active{transform:translateY(1px)}
  .xntlink:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
  .drow3 .search{flex:0 1 260px;min-width:150px}
  .dd[data-dd="liq"] .ddmenu{min-width:118px}
  .ddopt{white-space:nowrap}
  .ddbtn.tbtn{padding:7px 9px;gap:6px}
  .ddbtn.tbtn .sw.cur{width:36px;height:18px;border-radius:5px;border:1px solid #8886}
  .ddmenu.thmenu{min-width:0;padding:7px}
  .ddmenu.thmenu .ddopt.th{padding:6px;border-radius:7px;justify-content:center}
  .ddmenu.thmenu .ddopt.th .sw{width:44px;height:22px;border-radius:6px;border:1px solid #8886}
  .ddmenu.thmenu .ddopt.th.on{background:#36e0c41a}
  .ddmenu.thmenu .ddopt.th.on .sw{outline:2px solid var(--acc);outline-offset:1px}
  .dd.open .ddmenu.thmenu{display:flex;flex-direction:column;gap:8px;width:250px;max-width:82vw}
  .ddmenu.thmenu .throw{display:flex;flex-wrap:wrap;gap:5px}
  /* Inline spectrum color picker (custom accent): shade box + hue bar + hex. */
  .ddmenu.thmenu .thsep{height:1px;background:var(--line);margin:1px 0}
  .ddmenu.thmenu .thcustom{display:flex;flex-direction:column;gap:8px}
  .ddmenu.thmenu .thlab{font:700 10px Roboto,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
  .ddmenu.thmenu .thcustom.on .thlab{color:var(--acc)}
  .ddmenu.thmenu .thsv{position:relative;width:100%;height:118px;border-radius:8px;cursor:crosshair;border:1px solid var(--line);touch-action:none}
  .ddmenu.thmenu .thsv-thumb{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #0009,0 1px 4px #000a;transform:translate(-50%,-50%);pointer-events:none}
  .ddmenu.thmenu .thhue{-webkit-appearance:none;appearance:none;width:100%;height:12px;border-radius:999px;outline:none;cursor:pointer;background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
  .ddmenu.thmenu .thhue::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #0d1119;box-shadow:0 1px 4px #000a;cursor:pointer}
  .ddmenu.thmenu .thhue::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #0d1119;box-shadow:0 1px 4px #000a;cursor:pointer}
  .ddmenu.thmenu .thhexrow{display:flex;align-items:center;gap:7px}
  .ddmenu.thmenu .thhex-sw{width:18px;height:18px;border-radius:5px;border:1px solid #ffffff22;flex:none}
  .ddmenu.thmenu .thhex{flex:1;min-width:0;background:var(--bg);border:1px solid var(--line2);color:var(--ink);border-radius:6px;padding:5px 7px;font:600 12px Roboto,sans-serif}
  /* The left rail is HIDDEN (not removed — kept for future use); its three
     lists render as the .tstrip token ticker above the table instead, and the
     table takes the full width. To bring the rail back: restore
     grid-template-columns:15% 1fr and drop the .lsb{display:none}. */
  .maincols{display:grid;grid-template-columns:1fr;align-items:stretch;height:calc(100dvh - var(--hh,118px))}
  .lsb{display:none;border-right:1px solid var(--line);padding:8px 7px 14px;min-width:0;background:rgba(8,10,15,.3)}
  /* ── token ticker strip (Top/Degen/New tabs + drifting numbered chips) ── */
  .tstrip{display:flex;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--line);background:var(--tableglass);min-width:0;flex:0 0 auto}
  .tstabs{display:inline-flex;background:var(--glass);border:1px solid var(--line);border-radius:8px;padding:2px;flex:none}
  .tstabs button{appearance:none;background:none;border:1px solid transparent;font:700 10px Roboto;color:var(--dim);padding:4px 10px;border-radius:6px;text-transform:uppercase;letter-spacing:.5px;cursor:pointer}
  .tstabs button.on{background:var(--line2);color:var(--ink);border-color:var(--acc)}
  .tschips{overflow:hidden;min-width:0;flex:1}
  .tschips .tstrack{display:flex;width:max-content;will-change:transform;animation:tsdrift 26s linear infinite}
  .tschips:hover .tstrack{animation-play-state:paused}
  .tschips .tshalf{display:flex;gap:7px;padding-right:7px}
  @keyframes tsdrift{to{transform:translateX(-50%)}}
  /* Visible focus ring. The search input had outline:none with NO replacement,
     and the list rows / dropdown options / token tabs were not focusable at all,
     so a keyboard user had no way to see (or reach) what was selected. */
  :is(.dk-card,.tkc,.ddopt,.ttab,.copy,.dk-sortable,.tksort-chip,[data-open],[data-fav]):focus-visible,
  .search input:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
  /* Keyboard users only — never show the ring on a mouse click. */
  :is(.dk-card,.tkc,.ddopt,.ttab):focus:not(:focus-visible){outline:none}
  @media(prefers-reduced-motion:reduce){.marq .track{animation:none}.livedot{animation:none}.tschips{overflow-x:auto;scrollbar-width:none}.tschips .tstrack{animation:none}}
  .tchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--glass);border-radius:8px;padding:4px 9px;font-size:11px;flex:none;cursor:pointer;transition:border-color .15s ease}
  .tchip:hover{border-color:var(--acc)}
  .tchip .trk{font:700 9px Roboto;color:var(--faint);min-width:9px;text-align:right;flex:none}
  .tchip .ava{width:16px;height:16px;font-size:8px}
  .tchip .tsm{font-weight:700;white-space:nowrap}
  .tchip .tch{font-size:10px;font-weight:700;flex:none;margin-left:-3px}  /* % hugs the symbol */
  .tchip .tmc{font-size:10px;color:var(--faint);flex:none}
  .ismob .tstrip{padding:6px 10px}
  .ismob .tschips .tstrack{animation-duration:18s}
  .page[data-mode="daylight"] .lsb{background:rgba(255,255,255,.4)}
  .lsb h4{margin:7px 4px;font:700 14.5px Roboto;letter-spacing:.4px;text-transform:uppercase;color:var(--acc)}
  .lsb h4.t2{margin-top:15px;color:var(--acc)}
  .srow{display:flex;align-items:center;gap:6px;padding:5px 4px;border-radius:6px;min-width:0;cursor:pointer}
  .srow .ava{width:18px;height:18px;font-size:9px}
  .srow:hover{background:#ffffff10}
  .srow .sr{color:var(--faint);font:700 10px Roboto,sans-serif;width:14px;flex:none;text-align:right}
  .srow .ssym{font-weight:700;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
  .srow .schg{font-family:Roboto,sans-serif;font-size:10px;font-weight:700;flex:none}
  .srow .sval{font-family:Roboto,sans-serif;font-size:10.5px;color:var(--dim);flex:none;min-width:42px;text-align:right}
  .srow .sgrad{flex:none;font:700 7.5px Roboto;letter-spacing:.3px;color:var(--up);border:1px solid #1f6f4f;border-radius:4px;padding:0 4px;text-transform:uppercase}
  .srow .sdegen{flex:none;font:700 7.5px Roboto;letter-spacing:.3px;color:#c4a6ff;border:1px solid #5b3fa0;border-radius:4px;padding:0 4px;text-transform:uppercase}
  .maincol{min-width:0;overflow:auto;flex:1 1 auto;min-height:0}
  .maincol-wrap{display:flex;flex-direction:column;min-width:0;min-height:0}
  /* z-index above the sticky .dk-head list header (z-index:6) so open filter
     dropdowns overlay it instead of hiding under it; stays below .stickyhead (20). */
  .listctl{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--tableglass);flex:0 0 auto;position:relative;z-index:10}
  .ismob .listctl{display:none}
  .ismob .maincols{grid-template-columns:1fr}
  .ismob .lsb{display:none}
  .stickyhead{position:sticky;top:0;z-index:20}
  :root{--railw:150px}
  /* ── Global shell ─────────────────────────────────────────────────────────
     Header spans the full width and is sticky; the nav sits BELOW it, pinned to
     the left, and scrolls with its own sticky offset so it stays visible on a
     long list. Both are rendered once, outside #viewslot — a route change swaps
     only the content, so neither re-renders and there is no flash. */
  .ghead{display:grid;grid-template-columns:auto 1fr auto;gap:0 18px;align-items:center;
    padding:9px 18px;background:var(--barbg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .ghead .logocol{display:flex;align-items:center}
  .ghead .brand.big{display:flex;align-items:center;height:52px}
  .ghead .brand.big .brandlogo{height:52px;width:auto}
  .ghead .gmid{min-width:0;display:flex;align-items:center;gap:12px}
  .ghead .gmid .search{min-width:0;max-width:460px;flex:1}
  .ghead .gright{display:flex;align-items:center;gap:10px}

  /* STICKY FOOTER. .page is the scroll container at a definite height (100dvh), so
     .content can take min-height:100% off it and .shell can flex:1 into that. The
     footer then sits at the bottom of the pane on a short page instead of directly
     under the content — measured on a /tx-shaped page: 430px of dead space below it
     before, 0 after.
     align-items is stretch, not start, so .mainpane inherits the full height. That
     does not un-stick the rail: .lnav sets its own align-self:start, which is what
     its position:sticky needs. */
  .shell{display:grid;grid-template-columns:var(--railw) minmax(0,1fr);align-items:stretch;flex:1;min-height:0}
  .mainpane{min-width:0;display:flex;flex-direction:column}
  /* VERTICAL CENTRING FOR THE TOOL PAGES. /tx is one input and a button, so its
     column sat at the top of a tall pane with a large void beneath it — it was
     already centred horizontally, so that void was the only thing left to fix.
     Giving the slot and the host a height lets the wrap's `margin:auto` centre on
     BOTH axes; when a result comes back and the content outgrows the space the auto
     margins collapse to 0 and it scrolls normally, so this cannot trap content.
     Scoped with :has() so no other view's layout is touched. A browser without
     :has() simply keeps the old top-aligned column — a soft landing, not a break.
     These live in the shell section, not the page section, because they are the
     shell's own layout and a page rule may not name #viewslot. */
  #viewslot:has(> .pagehost[data-page="tx"]){display:flex;flex-direction:column;flex:1}
  #viewslot > .pagehost[data-page="tx"]{display:flex;flex-direction:column;flex:1}
  /* One continuous left column: logo at the top, nav below, full height. There is no
     seam between a logo column and a rail any more, so there is nothing to misalign. */
  .lnav{position:sticky;top:0;align-self:start;display:flex;flex-direction:column;gap:2px;
    padding:14px 10px;border-right:1px solid var(--line);min-height:100vh;background:var(--barbg)}
  .lnavb{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:10px;
    color:var(--ink2);font:600 11.5px Roboto;letter-spacing:.2px;text-align:center;text-decoration:none;
    border:1px solid transparent}
  .lnavb:hover{background:var(--glass);color:var(--ink)}
  .lnavb.on{color:var(--acc);background:var(--glass);border-color:color-mix(in srgb,var(--acc) 30%,transparent)}
  .lnavi{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .lnavsep{height:1px;background:var(--line);margin:10px 8px}
  /* LIVE indicator on the X1 LIVE rail button. The dot is the whole effect — a
     pulsing ring reads as "streaming" without the button having to shout, and it
     is the same visual language the feed's own status chip uses.
     --up rather than --acc: this says "connected", not "selected", and the accent
     already means the active page. Both are theme tokens, so it follows the theme.
     The animation is opt-OUT via prefers-reduced-motion; a permanently pulsing
     element in a fixed rail is exactly what that setting exists for, and the dot
     still shows (solid) when motion is off, so no information is lost. */
  .lnavb .lvdot,.msnb .lvdot{display:inline-block;width:6px;height:6px;border-radius:50%;
    background:var(--up);margin-right:5px;vertical-align:middle;flex:none}
  @media (prefers-reduced-motion: no-preference){
    .lnavb .lvdot,.msnb .lvdot{animation:lvpulse 1.8s ease-in-out infinite}
    @keyframes lvpulse{
      0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--up) 55%,transparent);opacity:1}
      55%{box-shadow:0 0 0 4px color-mix(in srgb,var(--up) 0%,transparent);opacity:.55}
    }
  }

  /* Screener-only furniture, now content rather than chrome. */
  .listtop{padding:10px 14px 0}
  .listtoprow{display:flex;align-items:center;gap:10px;margin:10px 0 0;flex-wrap:wrap}

  /* Mobile keeps the single-column layout: a 150px rail on a 390px screen would
     take 38% of the width. The nav collapses into the existing mobile chrome. */
  @media(max-width:820px){
    .shell{grid-template-columns:1fr}
    .lnav{display:none}
    .ghead{grid-template-columns:auto 1fr;gap:0 10px;padding:8px 10px}
    .ghead .gright{grid-column:1/-1;justify-content:space-between;margin-top:8px}
  }
  .lsb{overflow:auto}
  .rrow1>*{min-width:0}
  .tok-wrap{padding:14px;display:flex;flex-direction:column;gap:12px}
  .tcard{background:var(--tableglass);border:1px solid var(--line2);border-radius:14px}
  .tok-vitals{background:transparent;border:0;padding:0}
  .tok-vitals .tstats{gap:10px}
  .tok-head{padding:12px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .tok-head-l{display:flex;align-items:center;gap:11px;flex-wrap:wrap;min-width:0}
  .tok-id{display:flex;align-items:center;gap:11px;min-width:0}
  .tok-id .sym{font-weight:800;font-size:18px}.tok-id .pr{color:var(--faint);font-weight:600}.tok-id .nm{color:var(--faint);font-size:12px}
  .fav{cursor:pointer;color:var(--faint);font-size:20px;line-height:1}.fav.on{color:var(--orange)}
  /* Desktop: two-column head — left col stacks id row + badges row, hero pins
     right and vertically centers across both rows. tok-head-l/tbadges/tok-hero
     are already sibling children of .tok-head, so this is a pure CSS reflow
     (no markup change) via named grid areas. Mobile keeps its own flex/order
     rules below (.ismob .tok-head etc.) untouched. */
  .page:not(.ismob) .tok-head{display:grid;grid-template-columns:1fr auto;grid-template-areas:"left hero" "badges hero";column-gap:14px;row-gap:7px;align-items:center}
  .page:not(.ismob) .tok-head-l{grid-area:left}
  .page:not(.ismob) .tbadges{grid-area:badges;margin:0}
  .page:not(.ismob) .tok-hero{grid-area:hero;align-self:center;margin-left:0}
  /* vitals hero — donut + safety label + price + 24H, lives in the head row (design 3B). */
  .tok-hero{margin-left:auto}
  .vhero{display:flex;align-items:center;gap:12px}
  .vring{position:relative;width:58px;height:58px;flex:none;display:block}
  .vring svg{width:58px;height:58px;display:block}
  .vnum{position:absolute;inset:0;display:grid;place-items:center;font:800 15px Roboto}
  .vcol{display:flex;flex-direction:column;gap:2px;min-width:0}
  .vlbl{font:800 9.5px Roboto;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
  .vprice{font:800 22px Roboto;line-height:1.05;color:var(--ink);white-space:nowrap;letter-spacing:-.3px}
  .vchg{font:700 11.5px Roboto;white-space:nowrap}
  .tok-grid{display:grid;grid-template-columns:1.7fr 1fr;gap:12px;align-items:start}
  .tstats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .stat2{padding:11px 13px;background:var(--tableglass);border:1px solid var(--line);border-radius:11px;backdrop-filter:blur(6px)}
  .stat2 .k{color:var(--faint);font-size:9.5px;text-transform:uppercase;letter-spacing:.5px}
  .stat2 .v{font-family:Roboto,sans-serif;font-size:16px;font-weight:700;margin-top:4px}
  .tchart{padding:12px;display:flex;flex-direction:column;min-height:300px}
  .chart-top{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
  .chart-ctrls{display:flex;gap:6px;align-items:stretch}
  .chart-ctrls>.dd{flex:1;min-width:0}
  .chart-ctrls>.indmenu{flex:0 0 auto}
  .indmenu .indbtn{width:38px;padding:8px 0;justify-content:center;gap:0}
  .indmenu .indbtn svg{width:17px;height:17px;display:block}
  .indmenu .ddmenu{min-width:198px;padding:6px}
  .ind-group{font:700 9px Roboto;letter-spacing:.7px;text-transform:uppercase;color:var(--faint);padding:8px 9px 3px}
  .ind-item{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:7px;cursor:pointer;font:600 12px Roboto;color:var(--dim)}
  .ind-item:hover{background:var(--glass);color:var(--ink)}
  .ind-item .ind-chk{width:12px;text-align:center;color:var(--acc);font-size:11px;opacity:0}
  .ind-item.on .ind-chk{opacity:1}
  .ind-item.on{color:var(--ink)}
  .wsel{color:var(--acc);cursor:pointer;border-bottom:1px dotted rgba(54,224,196,.4)}
  .wsel:hover{border-bottom-color:var(--acc)}
  /* An X1NS name shown in place of a shortened address — solid underline + medium
     weight so it reads as a real name rather than a truncated address. */
  .wsel.x1nm{font-weight:600;border-bottom-style:solid}
  /* Universal address span (data-adr): name-painted + copy-injected, no chart click.
     Plain by default (inherits its surface), highlighted once it becomes an X1NS name. */
  .adr{color:inherit}
  .adr.x1nm{font-weight:600;color:var(--acc)}
  .wext{color:var(--faint);text-decoration:none;margin-left:3px;display:inline-flex;align-items:center;vertical-align:middle;line-height:1}
  .wext svg{width:14px;height:14px;display:block}
  .wext:hover{color:var(--ink)}

  /* ===== SVG icon set (replaces emoji/glyphs; device-consistent) ===== */
  .tibox{display:inline-flex;align-items:center;justify-content:center;padding:2px;border-radius:5px;background:currentColor;vertical-align:middle;line-height:0;margin-right:1px}
  .tico{width:11px;height:11px;display:block;fill:none;stroke:#0b0d12;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
  .gico{width:1em;height:1em;display:inline-block;vertical-align:-.13em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .gico.fill{fill:currentColor;stroke:none}
  .vsbar{padding:8px 12px 2px}
  .vsearch{width:100%;box-sizing:border-box;background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:500 13px Roboto;padding:8px 11px;outline:none}
  .vsearch::placeholder{color:var(--faint)}
  .vsearch:focus{border-color:var(--acc)}
  .tabsq{padding:8px 12px 6px;border-bottom:1px solid var(--line)}
  .tt .copy{font-size:11px}.tt .copy:hover{color:var(--acc)}
  .wchip{display:flex;align-items:center;gap:9px;background:var(--glass);border:1px solid var(--acc);border-radius:9px;padding:5px 10px;font:600 11px Roboto;color:var(--ink);margin-bottom:8px}
  .wchip .wcl{color:var(--acc)}
  /* Bonding-curve graduation progress bar (pre-graduation degen tokens only; hidden once graduated). */
  .curvebar{margin-bottom:8px;padding:8px 11px;background:var(--card);border:1px solid var(--line);border-radius:10px}
  .curvebar .cbrow{display:flex;align-items:center;gap:8px;margin-bottom:7px;font:700 11px Roboto;white-space:nowrap}
  .curvebar .cblabel{color:var(--dim);text-transform:uppercase;letter-spacing:.4px}
  .curvebar .cbpct{color:var(--acc)}
  .curvebar .cbxnt{margin-left:auto;color:var(--faint);font-weight:600;overflow:hidden;text-overflow:ellipsis}
  /* The track is NOT overflow:hidden — the rocket + graduation flag sit on top of it. */
  .curvebar .cbtrack{position:relative;height:9px;border-radius:9px;background:var(--glass)}
  /* A fixed orange-red → green gradient the width of the whole track, revealed as the
     bar fills (background-size, set inline per %). Tail stays orange-red; the head goes
     green as graduation nears. */
  .curvebar .cbfill{position:absolute;inset:0 auto 0 0;height:100%;min-width:3px;width:0;border-radius:9px;background-image:linear-gradient(90deg,var(--down),var(--orange) 48%,var(--up));background-repeat:no-repeat;background-position:left center;background-size:100% 100%;transition:width .4s ease}
  /* The rocket rides the fill head (left = progress %); the flag marks graduation. */
  .curvebar .cbrocket{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);font-size:15px;line-height:1;z-index:2;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4));pointer-events:none}
  .curvebar .cbrocket.fly{animation:cbbob 1.5s ease-in-out infinite}
  .curvebar .cbfin{position:absolute;top:50%;right:-2px;transform:translate(50%,-50%);font-size:13px;line-height:1;opacity:.8;pointer-events:none}
  @keyframes cbbob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-64%)}}
  @media (prefers-reduced-motion:reduce){.curvebar .cbrocket.fly{animation:none}}
  .wchip .wc{color:var(--faint)}
  .wchip .wx{margin-left:auto;cursor:pointer;color:var(--faint);font-size:13px;padding:0 2px}
  .wchip .wx:hover{color:var(--down)}
  .cdd{min-width:0}
  .cdd .ddbtn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:7px 9px;font:600 11px Roboto}
  .cdd .ddbtn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cdd .ddmenu{min-width:120px;z-index:60}
  .chart-meta{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--faint);min-height:14px}
  .chart-meta .hint{margin-left:auto}
  .seg2{display:inline-flex;background:var(--glass);border:1px solid var(--line);border-radius:8px;padding:3px;gap:2px}
  .seg2 button{background:none;border:0;color:var(--dim);font:600 11px Roboto;padding:5px 9px;border-radius:6px;cursor:pointer}
  .seg2 button.on{background:var(--acc);color:var(--accInk)}
  .chart-area{flex:1;border:1px solid var(--line);border-radius:10px;background:rgba(0,0,0,.14);display:grid;place-items:center;position:relative;overflow:hidden;min-height:230px}
  .chart-area .hint{position:absolute;top:10px;left:13px;color:var(--faint);font-size:11px}
  .tok-tabs{display:flex;flex-wrap:nowrap;gap:2px;border-bottom:1px solid var(--line);padding:0 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;touch-action:pan-x;scrollbar-width:thin}
  .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tscroll table.tt{min-width:560px}
  .ttab{padding:11px 14px;color:var(--dim);font:600 12px Roboto;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;flex:none}
  .ttab.on{color:var(--ink);border-bottom-color:var(--acc)}
  .cu-row{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.05)}
  .cu-row .ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;font-size:14px}
  .cu-row .ct{font-weight:600;font-size:13px}.cu-row .cs{color:var(--faint);font-size:11px}
  .cu-row .cd{margin-left:auto;color:var(--faint);font-size:11px;font-family:Roboto,sans-serif}
  .tag{font:700 8px Roboto;text-transform:uppercase;letter-spacing:.4px;padding:2px 6px;border-radius:5px;border:1px solid var(--line2)}
  .ismob .tok-grid{grid-template-columns:1fr}
  .trow{cursor:pointer}
  .brand.big{cursor:pointer}
  .backbtn{background:var(--glass);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:7px 11px;font:600 12px Roboto;cursor:pointer}
  .backbtn:hover{border-color:var(--acc);color:var(--acc)}
  .tok-main>.backbtn{align-self:flex-start;padding:4px 10px;font-size:11px;border-radius:8px;margin-bottom:-3px}
.page,.maincol,.lsb,.ddmenu,.tablewrap{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  *::-webkit-scrollbar{width:9px;height:9px}
  *::-webkit-scrollbar-track{background:transparent}
  *::-webkit-scrollbar-thumb{background:var(--line2);border-radius:8px;border:2px solid transparent;background-clip:content-box}
  *::-webkit-scrollbar-thumb:hover{background:var(--acc);background-clip:content-box}
  *::-webkit-scrollbar-corner{background:transparent}
.favx{cursor:pointer;color:var(--faint);font-size:14px}
  .favx.on{color:var(--orange)}
  table.tt th{z-index:3}
  .pinrow td{background:transparent}
  .badge.nat{color:var(--acc);border-color:#1b6f63}
  .metachip{border:1px solid var(--line);border-radius:7px;padding:4px 8px;color:var(--dim);cursor:pointer}
  .metachip:hover{border-color:var(--acc);color:var(--acc)}
.muted{color:var(--faint)}
  .ava{width:26px;height:26px;border-radius:50%;object-fit:cover;flex:none;display:inline-grid;place-items:center;font-weight:800;font-size:10px;color:#06121a;overflow:hidden;background:transparent}
  .tkn{display:inline-flex;flex-direction:column;min-width:0;vertical-align:middle}
  .symrow{display:flex;align-items:center;gap:5px;min-width:0}
  .symrow .sym{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .symrow .badge{flex:none}
  /* "Has profile" shield — rendered inline across list rows, the search dropdown,
     side lists, gainers chips and the token header. One base rule so every surface
     sizes it the same; the token header (.tokx-r1) bumps it up a touch. */
  .pshield{flex:none;display:inline-flex;align-items:center;line-height:0;vertical-align:middle;margin-left:3px}
  .pshield svg{width:14px;height:14px;display:block}
  .tokx-r1 .pshield{margin-left:5px}
  .tokx-r1 .pshield svg{width:18px;height:18px}
  .gchip .pshield{margin-left:2px}
  .gchip .pshield svg{width:12px;height:12px}
  .sk-row .pshield svg{width:12px;height:12px}
  .tnm{font-size:10px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
  .tmint{font-family:Roboto,sans-serif;font-size:9.5px;color:var(--faint);opacity:.85}
  .symrow .lmint{flex:none;display:inline-flex;align-items:center;gap:3px;cursor:pointer;font-size:9.5px}.symrow .lmint .copy{font-size:11px}.symrow .lmint:hover .copy{color:var(--acc)}
  .poolsel{background:var(--glass);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:7px 9px;font:600 11px Roboto;max-width:200px}
  .tbadges{display:flex;gap:6px;flex-wrap:wrap;padding:0 2px}
  .badge.ok{color:var(--up);border-color:#1f6f4f}.badge.warn{color:#ffcf6b;border-color:#7a5e22}.badge.deg{color:var(--orange);border-color:#7a4a16}
  .chart-host{position:relative;flex:1;min-height:340px;display:flex}
  .page:not(.ismob) .chart-host{min-height:508px}
  /* Vertical drawing-tool rail on the far left of the chart. Icon-only buttons,
     one per TOOLDEFS entry — new tools drop into the column automatically. The
     canvas sits to its right so the rail never covers candles. */
  .chart-tools{flex:0 0 auto;width:32px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 3px;border-right:1px solid var(--line)}
  .chart-canvas{position:relative;flex:1;min-width:0}
  .ctool{width:26px;height:26px;display:grid;place-items:center;border:1px solid transparent;border-radius:7px;color:var(--faint);background:transparent;cursor:pointer;padding:0}
  .ctool svg{width:16px;height:16px;display:block}
  .ctool:hover{color:var(--ink);background:color-mix(in srgb,var(--acc) 12%,transparent)}
  .ctool.on{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 55%,transparent);background:color-mix(in srgb,var(--acc) 14%,transparent)}
  .ctool-clear{margin-top:auto;color:var(--faint)}
  .ctool-clear:hover{color:var(--down);background:color-mix(in srgb,var(--down) 12%,transparent)}
  .ovbtn{position:absolute;top:8px;right:10px;z-index:6;font:700 11px Roboto;color:var(--down);background:var(--tableglass);border:1px solid var(--down);border-radius:7px;padding:4px 9px;cursor:pointer;backdrop-filter:blur(4px)}
  .logbtn{position:absolute;top:8px;left:10px;z-index:6;font:800 11px Roboto;letter-spacing:.8px;color:var(--dim);background:var(--tableglass);border:1.5px solid var(--faint);border-radius:8px;padding:5px 10px;cursor:pointer;backdrop-filter:blur(4px);transition:opacity .15s ease}
  .logbtn:hover{color:var(--ink);border-color:var(--acc)}
  /* hidden while the crosshair tooltip legend (candle info) occupies the same corner */
  .logbtn.ghost{opacity:0;pointer-events:none}
  /* Mobile: the crosshair tooltip wraps to multiple lines at the top-left AND persists
     after finger lift, so the button lives at the bottom-left there instead (above the
     x-axis and clear of .clrbtn at bottom:10px). */
  .page.ismob .logbtn{top:auto;bottom:36px}
  .logbtn.on{color:#04110c;background:var(--acc);border-color:var(--acc)}
  /* Desktop: LOG lives in the top chart toolbar (.chart-ctrls) as an inline toggle,
     matching the dropdown/indicator controls' height, rather than floating on the canvas. */
  .chart-ctrls>.logtb{flex:0 0 auto;font:800 11px Roboto;letter-spacing:.8px;color:var(--dim);background:var(--tableglass);border:1.5px solid var(--faint);border-radius:8px;padding:0 12px;cursor:pointer;transition:.15s ease}
  .chart-ctrls>.logtb:hover{color:var(--ink);border-color:var(--acc)}
  .chart-ctrls>.logtb.on{color:#04110c;background:var(--acc);border-color:var(--acc)}
  .clrbtn{position:absolute;left:10px;bottom:10px;z-index:6;font:600 10.5px Roboto;color:var(--faint);background:var(--tableglass);border:1px solid var(--line);border-radius:7px;padding:4px 9px;cursor:pointer;backdrop-filter:blur(4px)}
  .clrbtn:hover{color:var(--ink);border-color:var(--faint)}
  #chart{position:absolute;inset:0;opacity:0;transition:opacity .28s ease}
  .chart-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);font-size:12px}
  .legend .o{color:var(--ink);font-family:Roboto,sans-serif;margin:0 3px}
  .tmeta-card{padding:12px 14px;display:flex;flex-direction:column;gap:9px}
  .tmeta{display:flex;flex-direction:column;gap:10px}
  .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
  /* Supply stat cards (Minted / Burnt / Total / Circulating) */
  .scards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:0 0 12px}
  .scard{background:rgba(127,127,127,.05);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
  .scard .l{font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--faint)}
  .scard .v{font-size:17px;font-weight:800;color:var(--ink);margin-top:4px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .scard .s{font-size:10px;color:var(--faint);font-weight:600;margin-top:2px;min-height:12px}
  .scard.burn .s{color:var(--down)}
  .scard.circ .s{color:var(--up)}
  @media(max-width:640px){.scards{grid-template-columns:1fr 1fr}}
  .liqsec{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(127,127,127,.12);padding-top:10px}
  .lrow{display:flex;flex-direction:column;gap:4px}
  .lrow-h{display:flex;justify-content:space-between;gap:10px;font-size:12px}
  .lrow-h .mk{color:var(--faint)}
  .lbar{height:5px;background:rgba(127,127,127,.14);border-radius:3px;overflow:hidden}
  .lbar>span{display:block;height:100%;border-radius:3px}
.lsubwrap{display:flex;flex-direction:column;gap:8px;margin:-2px 0 0 13px;padding-left:11px;border-left:2px solid rgba(127,127,127,.18)}
.lsubwrap .lrow-h{font-size:11px}
.liqsubt{font-size:11px;color:var(--ink);font-weight:600;margin-top:2px}
.liqsubt .muted{font-weight:400}
.liqtbl{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
.liqtbl th{font:700 8.5px Roboto;letter-spacing:.3px;text-transform:uppercase;color:var(--faint);text-align:right;padding:0 0 4px;white-space:nowrap}
.liqtbl th:first-child{text-align:left}
.liqtbl td{padding:4px 0;text-align:right;white-space:nowrap;border-top:1px solid rgba(127,127,127,.08);font-variant-numeric:tabular-nums}
.liqtbl td:first-child{text-align:left;color:var(--dim)}
.liqtbl tr.sub td:first-child{padding-left:12px;color:var(--faint)}
.liqtbl .tk{color:var(--dim)}
.liqtbl .vu{color:var(--ink);font-weight:600}
.liqcards{display:flex;gap:6px;margin-top:6px}
.liqc{flex:1 1 0;min-width:0;background:rgba(127,127,127,.05);border:1px solid rgba(127,127,127,.10);border-radius:8px;padding:7px 8px;display:flex;flex-direction:column;gap:3px}
.liqc-l{font:700 8.5px Roboto;letter-spacing:.3px;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:3px;white-space:nowrap;overflow:hidden}
.liqc-l svg{flex:none}
.liqc-v{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.liqc-s{font-size:10px;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.liqc-s .muted{opacity:.6}
  /* Liquidity card (buildLiqHtml): header + launch bar + pool summary + three
     metric cards + market-cap bar. Sits inside the .tcard (which is the outer
     rounded border), so it paints no border of its own. Sizes are fluid so the
     three cards stay in ONE ROW even in the narrow rail / on a phone. */
  .lq2{display:flex;flex-direction:column}
  .lq2-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .lq2-lab{font-size:15px;font-weight:600;color:var(--ink)}
  .lq2-val{font-size:13.5px;color:var(--faint)}
  .lq2-g{color:var(--up)} .lq2-b{color:#3f9bf2} .lq2-o{color:var(--orange)}
  .page[data-mode="daylight"] .lq2-b{color:#1c60c4}
  .lq2-bar{height:12px;border-radius:7px;background:rgba(127,127,127,.16);overflow:hidden;margin-top:11px}
  .lq2-bar>span{display:block;height:100%;border-radius:7px;background:var(--up)}
  .lq2-poolrow{margin-top:22px}
  .lq2-pool{display:flex;align-items:center;gap:13px;color:var(--faint);font-size:13.5px}
  .lq2-pit{display:inline-flex;align-items:center;gap:7px}
  .lq2-pit svg{flex:none;color:var(--faint)}
  .lq2-psep{width:1px;height:15px;background:var(--line2);flex:none}
  /* "N pools" toggle + the per-pair liquidity breakdown it opens. */
  .lq2-poolsbtn{border:1px solid var(--line2);background:var(--glass,rgba(127,127,127,.06));border-radius:9px;padding:5px 9px;cursor:pointer;color:var(--faint);font:inherit;font-size:13.5px;transition:border-color .14s,color .14s}
  .lq2-poolsbtn:hover{border-color:color-mix(in srgb,var(--acc) 55%,transparent);color:var(--ink)}
  .lq2-poolsbtn .lq2-ck{flex:none;color:var(--faint);transition:transform .18s ease}
  .lq2-poolsbtn.open .lq2-ck{transform:rotate(90deg)}
  .lq2-poolsbtn.open{border-color:color-mix(in srgb,var(--acc) 45%,transparent);color:var(--ink)}
  .lqbk{margin-top:11px;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--panel)}
  .lqbk-hint{padding:9px 12px;font-size:11.5px;color:var(--faint);border-bottom:1px solid var(--line)}
  .lqbk-row{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border:none;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;font-variant-numeric:tabular-nums;transition:background .12s}
  .lqbk-row:last-child{border-bottom:none}
  .lqbk-row:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
  .lqbk-row.on{background:color-mix(in srgb,var(--acc) 10%,transparent)}
  .lqbk-pair{font-weight:700;font-size:13px;min-width:96px;flex:none}
  .lqbk-pair span{color:var(--faint);font-weight:600}
  .lqbk-bar{flex:1;height:7px;border-radius:4px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden;min-width:30px}
  .lqbk-bar i{display:block;height:100%;background:var(--acc);border-radius:4px;opacity:.9}
  .lqbk-v{font-weight:700;font-size:12.5px;color:var(--dim);min-width:64px;text-align:right;flex:none}
  .lqbk-go{flex:none;color:var(--faint)}
  .lqbk-row:hover .lqbk-go{color:var(--acc)}
  .lqbk-dust{padding:9px 12px;font-size:11.5px;color:var(--faint)}
  .lq2-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1.4vw,10px);margin-top:14px;margin-bottom:5px}
  .lq2-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:clamp(9px,2vw,13px) clamp(6px,1.3vw,8px);min-width:0}
  .lq2-cardh{display:flex;align-items:center;gap:6px;margin-bottom:clamp(8px,1.8vw,11px)}
  .lq2-ic{flex:none;display:inline-flex}
  .lq2-ic svg{width:clamp(14px,3.4vw,18px);height:auto}
  .lq2-cl{font-size:clamp(8.5px,1.9vw,10.5px);letter-spacing:.04em;text-transform:uppercase;color:var(--faint);font-weight:700;line-height:1.2}
  .lq2-cv{font-size:clamp(13px,3.9vw,19px);font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
  .lq2-tk{font-size:clamp(9px,2.1vw,11px);color:var(--faint);margin-top:clamp(5px,1.5vw,8px);line-height:1.25;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .lq2-sup{font-size:clamp(9px,2.1vw,11px);font-weight:600;margin-top:3px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mrow{display:flex;justify-content:space-between;gap:10px;font-size:12px;border-bottom:1px solid rgba(127,127,127,.08);padding:3px 0}
  .mrow .mk{color:var(--faint)}
  .mrow .mv{font-weight:600;text-align:right}
  .copy{cursor:pointer;color:var(--faint)}
  .copy:hover{color:var(--acc)}
  .copy-toast{position:fixed;background:var(--bg);color:var(--acc);border:1px solid var(--acc);border-radius:8px;padding:4px 9px;font:700 11px Roboto;letter-spacing:.3px;z-index:9999;opacity:0;pointer-events:none;transition:opacity .15s ease;white-space:nowrap;box-shadow:0 6px 20px #0007}
  .copy-toast.show{opacity:1}
  .tdesc{font-size:12px;color:var(--dim);line-height:1.5}
  .tsrc{font-size:10.5px;color:var(--faint)}
  .panectl{padding:9px 12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .minusd{margin-left:auto;background:var(--glass);color:var(--dim);border:1px solid var(--line);border-radius:8px;font:600 11px Roboto;padding:5px 6px;cursor:pointer}
  .minusd:focus{outline:none;border-color:var(--acc)}
  .ttag{font:700 9px Roboto;text-transform:uppercase;letter-spacing:.4px;padding:2px 7px;border-radius:5px;border:1px solid var(--line2)}
  .ttag.b{color:var(--up);border-color:#1f6f4f}.ttag.s{color:var(--down);border-color:#7a3340}
  .ttag.lpa{color:#5fb0ff;border-color:#2f5f9e}.ttag.lpr{color:#ffae57;border-color:#9e6a2f}
  .ttag.lpb{color:#c084fc;border-color:#7c3aed}
  .exbadge{font:700 8px Roboto;letter-spacing:.4px;color:#b9a3e8;background:#241f33;border:1px solid #4a3d6b;padding:1px 4px;border-radius:4px;margin-left:5px;vertical-align:middle}
  /* CRV = bonding-curve trade (pre-graduation). Amber, so it reads as a distinct
     class from the buy/sell tags. Colours are explicit (not var(--warn) — that
     token is only defined on admin.html, so it degrades to inherited text on the
     main app); a daylight override mirrors the .ttag.mnt amber above. */
  .crvbadge{font:700 8px Roboto;letter-spacing:.4px;text-transform:uppercase;color:#e8b54b;background:color-mix(in srgb,#e8b54b 13%,transparent);border:1px solid color-mix(in srgb,#e8b54b 42%,transparent);padding:1px 4px;border-radius:4px;margin-left:5px;vertical-align:middle}
.twapbadge{font:700 8px Roboto;letter-spacing:.4px;text-transform:uppercase;color:#5aa9e6;background:color-mix(in srgb,#5aa9e6 13%,transparent);border:1px solid color-mix(in srgb,#5aa9e6 42%,transparent);padding:1px 4px;border-radius:4px;margin-left:5px;vertical-align:middle}
  /* LIMIT = a limit / price-trigger order fill on xdex.xyz. Pink/magenta, chosen to
     read distinctly from CRV amber, TWAP blue AND EXCH lavender — all four can sit
     on one trade row. Base + daylight override, mirroring .twapbadge. */
  .limitbadge{font:700 8px Roboto;letter-spacing:.4px;text-transform:uppercase;color:#e879b8;background:color-mix(in srgb,#e879b8 13%,transparent);border:1px solid color-mix(in srgb,#e879b8 42%,transparent);padding:1px 4px;border-radius:4px;margin-left:5px;vertical-align:middle}
  .page[data-mode="daylight"] .crvbadge{color:#8a6100;background:#fbf1d8;border-color:#e6cf92}
  .page[data-mode="daylight"] .twapbadge{color:#0f5c94;background:#e2eefb;border-color:#a9cdee}
  .page[data-mode="daylight"] .limitbadge{color:#9d2b76;background:#fbe6f3;border-color:#eec0dd}
  .wlink{color:var(--acc);text-decoration:none}.txn{color:var(--faint);font-size:9px;border:1px solid var(--line);border-radius:4px;padding:1px 4px;text-decoration:none;margin-left:4px}
  .xcar,.xcarh{display:inline-block;width:11px;color:var(--faint);cursor:pointer;transition:transform .15s;user-select:none;font-size:10px}
  tr.xopen .xcar,tr.xopen .xcarh{transform:rotate(90deg);color:var(--acc)}
  tr.xrow{cursor:pointer}
  /* Row hover is the SAME neutral grey everywhere on the site — the token
     tables (table.tt above) and the wallet page (.wtab / the drawer) — so
     interacting with a row never flips to the accent colour on one surface
     and stays grey on another. (The wallet page's OPEN-row accent tint is a
     separate selected-state cue and is intentionally left as-is.) */
  tr.xrow:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
  #xpanel-row:hover>td,#xpanelh-row:hover>td{background:transparent}
  .xpanel tbody tr:hover td{background:transparent}
  .xpanel .xscroll tr:hover td{background:transparent}
  /* contain:inline-size — the row expander sits in a colspan cell; its wide,
     nowrap inner activity table would otherwise propagate its content width up
     through the cell and widen the whole .tt table on narrow viewports (adding
     a horizontal scrollbar on expand). Containment decouples the panel's inline
     size from its contents, so the inner table scrolls inside .xscroll instead
     of growing the outer table. Verified with a Playwright repro at 760/900/1280px. */
  .xpanel{background:color-mix(in srgb,var(--ink) 2.5%,transparent);margin:5px 0;overflow:hidden;box-sizing:border-box;contain:inline-size;width:100%;max-width:100%;border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);border-radius:8px;box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 12%,transparent),0 6px 20px rgba(0,0,0,.28);-webkit-tap-highlight-color:transparent}
  .xpanel .xhead{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);font-size:11px;color:#8b93a7}
  .xpanel .xscroll{max-height:320px;overflow:auto}
  .xpanel table{width:100%;border-collapse:separate;border-spacing:0;table-layout:auto;min-width:400px;font-size:12.5px}
  .ismob .xpanel{position:sticky;left:0;width:100%;max-width:100%;box-sizing:border-box;margin:0}
  .ismob .xpanel table{width:auto;min-width:100%;table-layout:auto}
  .ismob .xpanel td,.ismob .xpanel thead th{padding:7px 8px}
  .ismob .xpanel td:nth-child(2),.ismob .xpanel thead th:nth-child(2){padding-right:5px}
  .ismob .xpanel td:nth-child(3),.ismob .xpanel thead th:nth-child(3){padding-left:5px}
  .xpanel thead th{position:sticky;top:0;z-index:1;background:var(--panel,#11151d);color:var(--dim);font:700 10px Roboto;letter-spacing:.05em;text-transform:uppercase;text-align:right;padding:9px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
  .xpanel thead th.l{text-align:left}
  .xpanel td{padding:9px 12px;font-size:12.5px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
  /* Numeric cells. The site uses ONE face (Roboto); the aligned-figures look the
     old monospace cells had comes from tabular-nums (set on .xpanel td above and
     html-wide below), not a second font. This rule is kept as the shared hook for
     the two expanders' cell conventions — the token page tags numeric cells
     `.mono` (minus the left-aligned `.l` label cells), the /wallet drawer `.num`. */
  .xpanel td.mono:not(.l),.xpanel .xscroll table td.num{font-family:Roboto,sans-serif}
  /* The expander sits INSIDE a `table.tt` cell on the token page, and
     `table.tt td` (line ~248: 12px padding, --ink 5% border) outweighs
     `.xpanel td` and bleeds into this nested table — taller rows and a
     lighter separator than the /wallet drawer, whose .wtab td is 9px /
     --line 55%. Re-assert the drawer's metrics with enough specificity to
     win over table.tt AND the .ismob compaction, so the two match on
     desktop and mobile alike. (The wallet drawer's own .wtab td is more
     specific still, so it is unaffected.) */
  .xpanel .xscroll table td{padding:9px 12px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
  .xpanel .xscroll table tr:last-child td{border-bottom:none}
  .xpanel .xscroll table tbody tr:hover td{background:color-mix(in srgb,var(--ink) 5%,transparent)}
  .xpanel td.l{text-align:left}
  .xpanel tr:last-child td{border-bottom:none}
  .xnet-pos{color:var(--up)}.xnet-neg{color:var(--faint)}
  .xpanel .xnote{padding:9px 12px;font-size:10px;color:var(--faint);border-top:1px solid var(--line)}
  .xpanel .xsum{display:flex;flex-wrap:wrap;gap:6px;padding:9px 12px;border-bottom:1px solid var(--line);background:rgba(127,127,127,.03)}
  .xpanel .xsi{display:flex;flex-direction:column;gap:1px;min-width:60px;padding:4px 8px;border:1px solid var(--line);border-radius:6px;background:var(--panel,#11151d)}
  .xpanel .xsi i{font:600 9px Roboto;text-transform:uppercase;letter-spacing:.4px;color:var(--faint);font-style:normal}
  .xpanel .xsi b{font:700 12px Roboto;color:var(--ink)}
  .xpanel .xsi b.up{color:var(--up)}.xpanel .xsi b.down{color:var(--down)}.xpanel .xsi b.mnt{color:#ffd98a}.xpanel .xsi b.brn{color:#ff9a9a}.xpanel .xsi b.muted{color:var(--faint)}.xpanel .xsi b.bro{color:#7fd6ff}.xpanel .xsi b.bri{color:#5fe3c0}
  .xpanel .xsi-net{margin-left:auto;border-color:#2a3242}
  .hbar{display:inline-block;height:6px;background:var(--acc);border-radius:3px;margin-left:6px;vertical-align:middle;opacity:.5}
  .hbar.burn{background:#ff6b7d}
  tr.burntrow{background:color-mix(in srgb, #ff6b7d 7%, transparent)}
  tr.burntrow td{color:var(--faint)}
  .hlabel{display:inline-block;font:700 8px Roboto;padding:1px 4px;border-radius:4px;margin-left:5px;background:#333;color:#ccc}
  /* Token-symbol link: functions as a real <a> (right-click → open in new tab,
     copy link) but looks identical to the old text — inherits colour, no underline. */
  .tlink{color:inherit;text-decoration:none;cursor:pointer}
  .hlabel.burn{background:#3a1f1f;color:#ff9b9b}.hlabel.own{background:#1f2e3a;color:#9bd0ff}.hlabel.lp{background:#1f3a2e;color:#9bffce}.hlabel.pool{background:#3b3f9e;color:#eceaff;box-shadow:0 0 0 1px #6d72e0 inset}.hlabel.degen{background:#3a2f14;color:#ffce6a}
  .pname{display:inline-block;margin-top:3px;font:700 9.5px Roboto;letter-spacing:.2px;padding:1px 6px;border-radius:5px;background:#2a2338;color:#d9c7ff;border:1px solid #3d3352}
  .cupd-row{display:flex;align-items:center;gap:11px;padding:10px 12px;border-bottom:1px solid rgba(127,127,127,.08)}
  .cupd-badge{font:700 8px Roboto;text-transform:uppercase;padding:3px 7px;border-radius:5px;flex:none}
  .cupd-badge.good{color:var(--up);background:#27e08a1a}.cupd-badge.risk{color:var(--down);background:#ff5c721a}.cupd-badge.info{color:var(--dim);background:#ffffff10}
  .cupd-desc{font-size:12px;flex:1}.cupd-when{font-size:10.5px;color:var(--faint);font-family:Roboto,sans-serif}
  #tava{width:40px;height:40px;font-size:15px}
  .ismob .mgrid{grid-template-columns:1fr}
  .bico{vertical-align:-2px;margin-right:3px}
  .sico{vertical-align:-3px;margin-right:4px}
  .badge svg.bico{width:11px;height:11px}
  /* Bounded scroll box so the sticky <th> pins to the top of the table while
     scrolling instead of scrolling off with the page. overflow:auto keeps the
     horizontal scroll for wide tables too. Height is tunable.
     Applies to every token tab table (Transactions/Holders/LP/Early/Validators/
     Delegators) so the column header row stays visible in all tabs. */
  .tok-wrap .tablewrap,.tok-tabs-card .tablewrap{overflow:auto;-webkit-overflow-scrolling:touch;max-height:calc(100dvh - 150px)}
  .tok-wrap .panectl{position:sticky;left:0}
  .iconbtn{flex:none;display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:9px;background:var(--glass);color:var(--faint);cursor:pointer;font-size:15px;line-height:1}
  .iconbtn.on{color:var(--orange);border-color:var(--orange)}
  .iconbtn:active{transform:scale(.94)}
  th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
  th.sortable:hover{color:var(--ink)}
  th.acth{color:var(--acc)}
  .ismob .tok-wrap table.tt{min-width:0}
  .ismob .tok-wrap table.tt th,.ismob .tok-wrap table.tt td{padding-left:5px;padding-right:5px;font-size:11px}
  .ismob .tok-wrap table.tt th:first-child,.ismob .tok-wrap table.tt td:first-child{padding-left:8px}
  .ismob .tok-wrap table.tt th:last-child,.ismob .tok-wrap table.tt td:last-child{padding-right:8px}
  .sbwrap{padding:0 12px}
  .sbanner{display:flex;align-items:center;gap:9px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin:8px 0 4px;background:var(--tableglass);font-size:12px}
  .slabel{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;font:700 10px Roboto;flex:none}
  .sbanner .sstat{margin-left:auto;font-family:Roboto,sans-serif}
  #pane-txns,#pane-holders,#pane-lpholders,#pane-updates,#pane-validators,#pane-delegators,#pane-supply{min-height:60vh}
  .supwrap{padding:14px 12px}
  .suphead{margin-bottom:12px}
  .suptot{font-size:15px;font-weight:700}
  .supsub{font-size:11px;margin-top:3px}
  .supbar{display:flex;width:100%;height:22px;border-radius:6px;overflow:hidden;background:#1a1f28;margin-bottom:14px}
  .supseg{height:100%;display:block;min-width:1px}
  .supseg+.supseg{border-left:1px solid rgba(0,0,0,.28)}
  .supgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:640px){.supgrid{grid-template-columns:1fr}}
  .supgroup{background:rgba(127,127,127,.04);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
  .supgh{font-size:11px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.3px;display:flex;justify-content:space-between;margin-bottom:8px}
  .suprow{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:12px}
  .supdot{width:10px;height:10px;border-radius:3px;flex:none}
  .suplbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .supcap{display:block;font-size:9.5px;color:var(--faint);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .supamt{color:var(--ink);font-variant-numeric:tabular-nums}
  .suppct{width:58px;text-align:right;color:var(--faint);font-variant-numeric:tabular-nums}
  .suprow.subtot{border-top:1px solid var(--line);margin-top:6px;padding-top:7px}
  .supnote{font-size:10.5px;margin-top:10px;line-height:1.5}
  .supcirc{display:inline-block;margin-left:6px;font:700 8px Roboto;letter-spacing:.3px;text-transform:uppercase;padding:1px 5px;border-radius:4px;background:#0f3d2e;color:#6ee7b7;vertical-align:middle}
  .hrefbar{display:flex;align-items:center;gap:8px;padding:7px 12px 9px;font:600 11px Roboto;color:var(--faint)}
  .hrefbar .hreftxt{white-space:nowrap}
  .hrefbar.refreshing .hreftxt{color:var(--acc)}
  .hrefbar .hspin{width:11px;height:11px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--acc);opacity:.35;flex:none}
  .hrefbar.refreshing .hspin{opacity:1;animation:hspin .8s linear infinite}
  @keyframes hspin{to{transform:rotate(360deg)}}
  .hrefbar .hrefprog{flex:1;max-width:140px;height:2px;background:var(--line2);border-radius:2px;overflow:hidden}
  .hrefbar .hrefprog i{display:block;height:100%;width:100%;background:var(--acc);transform-origin:left;transform:scaleX(1);transition:transform 1s linear}
  .moreWrap{display:flex;justify-content:center;padding:14px 0 18px}
  .moreBtn{background:var(--tableglass);border:1px solid var(--line);color:var(--ink);font:600 12px Roboto;padding:9px 26px;border-radius:9px;cursor:pointer;transition:border-color .15s,background .15s}
  .moreBtn:hover{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
  .moreBtn:disabled{opacity:.6;cursor:default}
  .pagenav{display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0 4px;flex-wrap:wrap}
  .pagenav button{background:var(--tableglass);border:1px solid var(--line);color:var(--ink);font:600 11px Roboto;padding:5px 10px;border-radius:7px;cursor:pointer}
  .pagenav button:hover:not(:disabled){border-color:var(--acc)}
  .pagenav button:disabled{opacity:.4;cursor:default}
  .pagenav .pageinfo{display:inline-flex;align-items:center;gap:4px;color:var(--faint);font-size:11px}
  .pagenav .pagejump{width:46px;background:var(--thbg);border:1px solid var(--line);color:var(--ink);font:600 11px Roboto;padding:4px 6px;border-radius:6px;text-align:center}
  .vrow:hover{background:color-mix(in srgb,var(--acc) 7%,transparent)}
  .vdetail td{background:var(--thbg)}
  .ssval{display:inline-flex;align-items:center;gap:8px;cursor:help}
  .ssbar{display:inline-block;width:54px;height:5px;border-radius:3px;background:var(--line);overflow:hidden;vertical-align:middle}
  .ssfill{display:block;height:100%}
  .tok-cols{display:grid;grid-template-columns:minmax(190px,17%) 1fr minmax(190px,17%);gap:12px;align-items:start}
  .tok-main{display:flex;flex-direction:column;gap:12px;min-width:0}
  .tok-lsb,.tok-rsb{min-width:0;align-self:stretch}
  .sb-in{display:flex;flex-direction:column;gap:12px}
  /* Both calculators — the desktop rail (.oc-calc) and the mobile hero (.tok-calc) —
     are flex columns, so the swap button's align-self:center actually centres it.
     This used to be scoped to .tok-calc only, so on the rail the box was a plain
     block and the swap icon sat at the left. */
  .calc-box{display:flex;flex-direction:column;gap:7px;margin-top:9px}
  .calc-box .calc-field{flex:1;min-width:0}
  /* The XNT-equivalent line, under the output. A USD figure alone hides what the
     amount is worth in the chain's own unit. */
  .calc-xnt{font:700 11.5px Roboto;color:var(--acc);text-align:right;min-height:14px;margin-top:-2px}
  .calc-xnt:empty{display:none}
  .calc-field{display:flex;align-items:center;gap:8px;background:rgba(127,127,127,.06);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
  .calc-field .calc-in{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--ink);font:700 15px Roboto}
  .calc-field .calc-out{flex:1;min-width:0;color:var(--ink);font:700 15px Roboto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .calc-u{font:700 10px Roboto;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);flex:0 0 auto}
  .calc-swap{flex:0 0 auto;align-self:center;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--tableglass);color:var(--acc);cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center}
  .calc-swap:hover{border-color:var(--acc)}
  .ismob .tok-lsb,.ismob .tok-rsb{position:static}
  .psb{padding:12px 13px;display:flex;flex-direction:column;gap:10px}
  .psb-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .psb-title{font:700 13px Roboto;letter-spacing:.5px;text-transform:uppercase;color:var(--acc);display:flex;align-items:center;justify-content:space-between;gap:8px}
  .coll-ic{display:none;color:var(--faint);font-size:10px;flex:0 0 auto;transition:transform .15s}
  .profile-btn{background:var(--glass);border:1px solid var(--line);color:var(--ink);font:600 11px Roboto;padding:5px 10px;border-radius:7px;cursor:pointer}
  .profile-btn:hover{border-color:var(--acc)}
  .profile-msg{font-size:11px;color:var(--acc)}
  .profile-msg:empty{display:none}
  .psocials{display:flex;flex-wrap:wrap;gap:6px}
  .psoc{font:600 11px Roboto;padding:5px 9px;border-radius:7px;border:1px solid var(--line);color:var(--dim);text-decoration:none}
  a.psoc.on:hover{border-color:var(--acc);color:var(--ink)}
  .psoc.off{opacity:.42}
  .tok-rsb .tstats{display:flex;flex-direction:column;gap:10px}
  .tok-rsb .stat2{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;background:none;border:0;border-bottom:1px solid rgba(127,127,127,.08);border-radius:0;backdrop-filter:none}
  .tok-rsb .stat2 .v{margin-top:0;font-size:14px}
  .tok-rsb .mgrid{grid-template-columns:1fr}
  .agg-tfrow{display:flex;gap:4px;margin:0 0 4px;background:var(--thbg);border:1px solid var(--line2);border-radius:10px;padding:3px}
  .agg-tf{flex:1;text-align:center;background:transparent;color:var(--dim);border:0;border-radius:7px;padding:7px 13px;font:600 12px Roboto;cursor:pointer}
  .agg-tf.on{color:var(--ink);background:color-mix(in srgb,var(--acc) 22%,transparent);font-weight:700}
  .agg-h{font:700 9.5px Roboto;letter-spacing:.5px;text-transform:uppercase;color:var(--acc);margin:0}
  .agg-hrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 8px}
  .agg-hrow .agg-tfrow{flex:0 0 auto;width:auto}
  .agg-sub{display:block;font-size:11px;margin-top:2px;font-weight:600}
  .aggb{color:var(--up)} .aggs{color:var(--down)}
  .aggrow{padding:9px 0;border-bottom:1px solid rgba(127,127,127,.08)}
  .aggrow-top{display:flex;align-items:center;justify-content:space-between}
  .aggrow-top .k{color:var(--faint);font-size:9.5px;text-transform:uppercase;letter-spacing:.5px}
  .aggrow-top .aggtot{font-size:14px;font-weight:700}
  .aggrow-mid{text-align:center;font-size:12px;font-weight:700;margin:5px 0}
  .aggbar3{width:100%;height:8px;border-radius:4px;background:var(--down);overflow:hidden}
  .aggbar3>i{display:block;height:100%;background:var(--up)}
  /* ── token panel redesign (v3.68 — vitals moved to head row) ─────── */
  .shero-mini{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .shero-mini .mcard{background:var(--tableglass);border:1px solid var(--line2);border-radius:12px;padding:9px 11px}
  .shero-mini .mcard .k{font-size:9.5px;color:var(--faint);letter-spacing:.4px;text-transform:uppercase}
  .shero-mini .mcard .v{font-size:15px;font-weight:800;margin-top:2px}
  .shero-mini .mcard .ksub{font-size:10px;color:var(--faint);font-weight:600;margin-top:3px}
  .fdvsub{display:block;font-size:9px;color:var(--faint);font-weight:600;margin-top:1px;line-height:1.1}
  .hygrow{display:flex;gap:6px;margin:0}
  .hygpill{flex:1;text-align:center;font:600 11px Roboto;padding:6px 2px;border-radius:8px;border:1px solid var(--line2);color:var(--dim);white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:4px}
  .hygpill.ok{color:var(--dim);background:transparent;border-color:var(--line2)}
  .hygpill.bad{color:var(--down);background:rgba(226,75,74,.10);border-color:rgba(226,75,74,.35)}
  .hygpill svg{width:12px;height:12px}
  .aggrow-lbls{display:flex;justify-content:space-between;font-size:10px;margin-top:3px}
  .aggrow-lbls .b{color:var(--up)} .aggrow-lbls .s{color:var(--down)}
  .aggbar3.split{display:flex;background:transparent}
  .aggbar3.split>.bb{height:100%;background:var(--up)}
  .aggbar3.split>.ss{height:100%;background:var(--down)}
  .badge.bad{color:var(--down);border-color:#7a2222}
  .tok-head .tbadges{flex-wrap:wrap}
  .ismob .tok-cols{display:flex;flex-direction:column}
  .ismob .tok-lsb,.ismob .tok-main,.ismob .tok-rsb,.ismob .sb-in{display:contents}
  .ismob .backbtn{order:0}
  .ismob .tok-head{order:1;padding:8px 10px;gap:5px 8px;align-items:center}
  .ismob .tok-id{order:0;min-width:0}
  .ismob .tok-id .sym{font-size:15px}
  .ismob .tok-id .nm{font-size:10px}
  .ismob .fav{order:1;font-size:18px}
  .ismob .tok-hero{margin-left:auto}
  .ismob .vhero{gap:9px}
  .ismob .vring,.ismob .vring svg{width:46px;height:46px}
  .ismob .vnum{font-size:13px}
  .ismob .vprice{font-size:17px}
  .ismob .vlbl{font-size:8.5px}
  .ismob .vchg{font-size:10.5px}
  .ismob .tbadges{order:3;flex-basis:100%}
  .ismob .tchart{order:2;width:100%;min-width:100%}
  /* Full-bleed chart on phones: the TradingView iframe should own the whole screen
     width — cancel the page gutter with the centered-full-bleed trick and drop the
     card chrome (side borders/radius/padding) so not a pixel is wasted. */
  .ismob .tchart{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw;min-width:100vw;
    padding:0;border-left:0;border-right:0;border-radius:0}
  .ismob .tok-profile{order:3;width:100%;min-width:100%}
  .ismob .tok-swap{order:4;width:100%;min-width:100%}
  .ismob .tok-market{order:5;width:100%;min-width:100%}
  .ismob .tok-meta{order:6;width:100%;min-width:100%}
  .ismob .tok-tabs-card{order:7;min-width:0;max-width:100%;width:100%;overflow:hidden}
  .ismob .tok-tabs{min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ismob .tok-calc{order:8;width:100%;min-width:100%}
  .ismob .coll-ic{display:inline-flex;align-items:center;align-self:stretch;font-size:19px;line-height:1;padding-left:8px}
  .ismob .coll>.psb-title,.ismob .coll>.psb-head{cursor:pointer;user-select:none}
  .ismob .coll.collapsed .coll-ic{transform:rotate(-90deg)}
  .ismob .coll.collapsed>*:not(.psb-title):not(.psb-head){display:none}
  .ismob .tok-wrap{padding:6px;gap:6px}
  .ismob .tok-cols{gap:7px}
  .ismob .psb{padding:8px 10px;gap:6px}
  .ismob .tmeta{gap:6px}
  .ismob .panectl{padding:6px 9px}
  .ismob .pagenav{padding:7px 0 3px;gap:5px}
  .ismob .calc-field{padding:7px 9px;gap:7px}
  .ismob .tok-tabs{padding:0 2px}
  /* ---- list tweaks: bigger watchlist star + tighter side & rank-column gaps ---- */
  .favx{font-size:17px}
  .ismob .favx{font-size:19px}
  .maincol .tablewrap{padding:6px}
  .maincol table.tt th,.maincol table.tt td{padding-left:8px;padding-right:8px}
  .maincol table.tt th:first-child,.maincol table.tt td:first-child{padding-left:8px;padding-right:3px}
  .maincol table.tt th:nth-child(2),.maincol table.tt td:nth-child(2){padding-left:3px;padding-right:6px}
  .ismob .maincol .tablewrap{padding:4px}
  .ismob .maincol table.tt th,.ismob .maincol table.tt td{padding-left:6px;padding-right:6px}
  .ismob .maincol table.tt th:first-child,.ismob .maincol table.tt td:first-child{padding-left:6px;padding-right:2px}
  .ismob .maincol table.tt th:nth-child(2),.ismob .maincol table.tt td:nth-child(2){padding-left:2px;padding-right:4px}
  /* ---- inline transfer / burn / mint rows in the trades feed ---- */
  .ttag.xfer{background:#1d2b3a;color:#8ab8ff}
  .ttag.xdir{background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc)}
  .ttag.xdir .tico{stroke:var(--accInk)}
  .ttag.brn{background:#3a1d1d;color:#ff9a9a}
  .ttag.mnt{background:#3a371d;color:#ffd98a}
.ttag.wrp{background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc)}
  .ttag.wrp .tico{stroke:var(--accInk)}
  .ttag.bro{background:#10233a;color:#7fd6ff}
  .ttag.bri{background:#0f2e26;color:#5fe3c0}
  .brfee{font:600 9px Roboto;color:var(--faint)}
  .xfflow{display:inline-flex;align-items:center;gap:5px;flex-wrap:nowrap;white-space:nowrap}
  .xfarr{color:var(--faint)}
  /* ---- XDEX swap panel ---- */
  .tok-swap .swapbox{padding:4px 2px 2px}
  .swseg{display:flex;gap:5px;margin-bottom:9px}
  .swseg button{flex:1;padding:7px 0;border:1px solid rgba(255,255,255,.12);background:transparent;color:var(--faint);border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit}
  .swseg button.on.buy{background:rgba(54,224,196,.16);color:var(--up);border-color:rgba(54,224,196,.45)}
  .swseg button.on.sell{background:rgba(255,92,92,.14);color:var(--down);border-color:rgba(255,92,92,.45)}
  .swfield{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 10px}
  .swfield.out{margin-top:6px}
  .swfh{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--faint);margin-bottom:3px}
  .swinrow{display:flex;align-items:center;gap:8px}
  .swinrow input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--ink);font-size:18px;font-weight:600;font-family:inherit}
  .swout{flex:1;min-width:0;color:var(--ink);font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .swsym{font-size:13px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.08);padding:3px 8px;border-radius:7px;white-space:nowrap}
  .swmid{display:flex;justify-content:center;height:0;position:relative;z-index:1}
  .swarrow{position:relative;top:-2px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:#1a1d24;border:1px solid rgba(255,255,255,.14);border-radius:50%;cursor:pointer;color:var(--faint);font-size:13px}
  .swsub{font-size:11px;color:var(--faint);margin-top:4px}
  .swimp{font-size:11px;color:var(--faint)}
  .swimp.warn{color:#ffcf6b}.swimp.bad{color:var(--down)}
  .swwarn{font-size:11px;color:#ffcf6b;background:rgba(255,207,107,.1);border:1px solid rgba(255,207,107,.25);border-radius:8px;padding:6px 8px;margin-top:8px;line-height:1.35}
  /* Buy/Sell label uses the themed --accInk, like every other accent button
     (.tdseg button.on, .seg2 button.on). A hardcoded #fff cannot track the
     accent and measured 1.47:1 on yellow / 1.86:1 on the default — far below
     the 4.5:1 AA floor the readability passes above set — on the one control
     that signs fund-moving transactions. Guarded by test/accent-contrast.test.ts. */
  .swbtn{width:100%;margin-top:9px;padding:11px 0;border:0;border-radius:10px;background:var(--acc,#5b8cff);color:var(--accInk,#04130f);font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
  .swbtn:disabled{opacity:.5;cursor:default}
  .swstatus{font-size:11px;margin-top:7px;color:var(--up);word-break:break-all}
  .swstatus.bad{color:var(--down)}
  .swstatus a{color:var(--acc,#5b8cff)}
  .swfoot{font-size:10px;color:var(--faint);margin-top:8px;line-height:1.35;opacity:.85}
  .tok-swap .swx{font-size:10px;font-weight:700;color:var(--acc,#5b8cff);background:rgba(91,140,255,.16);padding:1px 5px;border-radius:5px;margin-left:6px;vertical-align:middle}

  /* ===== Responsive desktop scaling ===== */
  /* The layout switches to the mobile view at <=820px (JS). Everything wider gets the full
     desktop chrome, which was tuned for large monitors and clips on small/scaled desktops.
     These breakpoints shrink the fixed-size chrome (logo, XNT price box, gaps) as width drops,
     and let the control row wrap as a last resort, so nothing is cut off. Additive only. */
  @media (min-width:821px) and (max-width:1300px){
    .dtop{padding:8px 12px;gap:0 12px}
    .dtop .brand.big .brandlogo{max-height:104px}
    .drow{gap:8px}
    .dgap{flex:0 0 14px}
    .xntbox{padding:7px 12px}
    .xntbox .xv{font-size:21px}
    .xntbox .xk{font-size:10.5px}
    /* rail hidden: single column (was minmax(152px,16%) 1fr — restore with the rail) */
    .maincols{grid-template-columns:1fr}
  }
  @media (min-width:821px) and (max-width:1080px){
    .dtop{padding:7px 10px;gap:0 10px}
    .dtop .brand.big .brandlogo{max-height:76px}
    .drow.drowm{flex-wrap:wrap;row-gap:8px}
    .drow.drowm .dspacer{display:none}
    .drow.drowm .dgap{flex:0 0 10px}
    .drow.drowm .search{flex:1 1 200px;min-width:170px;max-width:none}
    .drow.drowm .tdseg button{padding:6px 11px;font-size:12px}
    .xntbox{padding:6px 10px}
    .xntbox .xv{font-size:18px}
    .xntbox .xk{font-size:9.5px;letter-spacing:.3px}
    /* rail hidden: single column (was 150px 1fr — restore with the rail) */
    .maincols{grid-template-columns:1fr}
    .lsb h4{font-size:13px}
  }


/* Mobile token cards — rendered by tkcRow() in app.js when device==='mobile'.
   Scoped to the mobile breakpoint so the desktop table is never affected.
   All colors come from the existing theme tokens. */
.modetgl{display:inline-flex;align-items:center;justify-content:center;background:var(--glass);border:1px solid var(--line);color:var(--dim);border-radius:9px;padding:6px 8px;cursor:pointer;flex:none}
.modetgl:hover{border-color:var(--acc);color:var(--ink)}
.modetgl .gico{width:15px;height:15px}
@media (max-width:820px){
.tksort{display:flex;gap:7px;padding:9px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--line);background:var(--card)}
.tksort::-webkit-scrollbar{display:none}
.tksort-chip{flex:none;font:700 11px Roboto;color:var(--dim);border:1px solid var(--line2);border-radius:8px;padding:5px 11px;cursor:pointer;white-space:nowrap;user-select:none;transition:background .14s,border-color .14s,color .14s,box-shadow .14s}
.tksort-chip:not(.on):hover{border-color:var(--acc);color:var(--ink)}
.tksort-chip.on{color:#08131a;background:var(--acc);border-color:var(--acc);box-shadow:0 3px 11px -3px color-mix(in srgb,var(--acc) 55%,transparent)}
}
/* The .tkc token card renders in TWO places: the mobile list AND the universal
   search dropdown (.qdrop .qdrows) on EVERY device. Its layout therefore has to be
   GLOBAL — trapped in the mobile media query it left the desktop search results as
   unstyled, overlapping blocks. Kept as one definition (no desktop copy to drift). */
.tkcards{background:var(--card)}
.tkc{display:flex;flex-direction:column;gap:4px;padding:10px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.tkc:active{background:rgba(127,127,127,.06)}
.tkc-r1,.tkc-r2{display:flex;align-items:center;gap:9px;min-width:0}
.tkc .ava{width:25px!important;height:25px!important;border-radius:50%!important;flex:none;box-shadow:0 0 0 1.5px var(--acc)}
.tkc-sym{font-weight:800;font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tkc-sym.deg{color:var(--ink)}
/* Watchlist ☆ leading row 1 — an affordance column before the avatar, so it never
   crowds the symbol, price, change chips or pills. Orange when starred. */
.tkc-fav{flex:none;display:inline-flex;align-items:center;color:var(--faint);cursor:pointer}
.tkc-fav .gico{width:17px;height:17px}
.tkc-fav.on{color:var(--orange)}
.tkc-pair{font-size:11px;font-weight:600;color:var(--faint)}
.tkc-sdot{flex:none;width:8px;height:8px;border-radius:50%}
.tkc .badge{flex:none}
.tkc-r1r{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.tkc-price{font-weight:800;font-size:13.5px;color:var(--ink)}
/* 1H + 24H change chips grouped together (matches desktop's two change columns). */
.tkc-chgs{display:flex;align-items:baseline;gap:10px}
.tkc-chg{display:flex;align-items:baseline;gap:4px;font-size:11px;font-weight:700}
.tkc-chg .tkc-lbl{font-size:9.5px;color:var(--faint);font-weight:600}
.tkc-chg.up{color:var(--up)}.tkc-chg.down{color:var(--down)}.tkc-chg.flat{color:var(--faint)}
.tkc-name{color:var(--dim);font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tkc-pills{margin-left:auto;display:flex;gap:7px;flex:none}
.tkc-pill{display:flex;align-items:baseline;gap:5px;border:1px solid var(--line2);border-radius:8px;padding:4px 8px}
.tkc-pill .l{font-size:9px;color:var(--faint);font-weight:700;letter-spacing:.3px}
.tkc-pill .v{font-size:10.5px;color:var(--dim);font-weight:700}
.tkc-empty{padding:40px 16px;text-align:center;color:var(--faint);font-size:12.5px}
/* Bonding-curve bar as its OWN full-width row on the token card (gradBarRow) — the
   token page curve bar's look (see .curvebar .cbfill): a track with a fixed
   orange-red → green gradient revealed as it fills, a 🚀 on the fill head and a 🎓
   flag. Full width because .tkc is a flex column and .tkc-r3 is a row of its own.
   Only on-curve degen cards emit it. Reuses the shared cbbob rocket keyframe. */
.tkc-r3{margin-top:1px}
.tkc-crv-top{display:flex;align-items:center;gap:8px;margin-bottom:4px;font:700 9.5px Roboto;white-space:nowrap}
.tkc-crv-lbl{color:var(--dim);text-transform:uppercase;letter-spacing:.4px}
.tkc-crv-pct{color:var(--acc)}
.tkc-crv-track{position:relative;height:7px;border-radius:7px;background:var(--glass)}
.tkc-crv-fill{position:absolute;inset:0 auto 0 0;height:100%;min-width:3px;width:0;border-radius:7px;background-image:linear-gradient(90deg,var(--down),var(--orange) 48%,var(--up));background-repeat:no-repeat;background-position:left center;background-size:100% 100%;transition:width .4s ease}
.tkc-crv-rocket{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);font-size:12px;line-height:1;z-index:2;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));pointer-events:none}
.tkc-crv-rocket.fly{animation:cbbob 1.5s ease-in-out infinite}
.tkc-crv-fin{position:absolute;top:50%;right:-2px;transform:translate(50%,-50%);font-size:11px;line-height:1;opacity:.8;pointer-events:none}


/* Desktop token cards — rendered by dkRow()/dkHead() in app.js when device==='desktop'.
   Fluid grid (minmax + fr) so every column fits at any width with NO horizontal scroll.
   Uniform card height/width; pills stretch to fill their cell so LIQ/VOL/MCAP align.
   All colors come from the existing theme tokens. */
.dkwrap{padding:2px 2px 8px}
.dk-head,.dk-card{display:grid;grid-template-columns:minmax(150px,1.9fr) minmax(70px,.95fr) minmax(48px,.6fr) minmax(52px,.65fr) minmax(70px,.95fr) minmax(70px,.95fr) minmax(78px,1fr) minmax(48px,.6fr) minmax(60px,.9fr);align-items:center}
.dk-head{height:32px;padding:0 4px;position:sticky;top:0;z-index:6;background:var(--bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.dk-hcell{min-width:0;padding:0 8px;color:var(--faint);font:700 10px Roboto;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-sortable{cursor:pointer;user-select:none}
.dk-sortable:hover{color:var(--dim)}
.dk-sortable.on{color:var(--acc)}
/* Centre the header labels for the centred pill columns (Liquidity/Volume/Mkt Cap):
   those cells use .dk-pill (width:100%, text centred), so a default left-aligned label
   sat off to the side of its value. Desktop dk layout only — mobile uses cards. */
.dk-head .dk-hcell:nth-child(5),.dk-head .dk-hcell:nth-child(6),.dk-head .dk-hcell:nth-child(7),.dk-head .dk-hcell:nth-child(9){text-align:center}
.dklist{display:flex;flex-direction:column;gap:8px}
.dk-card{min-height:58px;background:var(--card);border:1px solid var(--line);border-radius:12px;cursor:pointer;padding:0 4px}
/* Full-width bonding-curve row on the desktop card — spans every grid column, on its
   own row below the cells. Only on-curve degen cards emit it (gradBarRowDesk), so a
   normal card stays a single 58px row. Shares the .tkc-crv-* inner styling. */
.dk-crv{grid-column:1/-1;padding:1px 8px 8px}
.dk-card:hover{border-color:var(--acc)}
.dk-cell{min-width:0;padding:0 8px;display:flex;align-items:center}
.dk-end{justify-content:flex-end}
.dk-tok{gap:8px}
.dk-fav{flex:none;display:inline-flex;align-items:center;color:var(--faint);cursor:pointer}
.dk-fav .gico{width:15px;height:15px}
.dk-fav.on{color:var(--orange)}
.dk-card .ava{width:32px!important;height:32px!important;border-radius:50%!important;flex:none;box-shadow:0 0 0 1.5px var(--acc)}
.dk-txt{min-width:0}
/* overflow:visible so the graduated skull's green corner check (.degico.grad::after,
   which pokes out top/right of its 16px box) isn't clipped. Ellipsis still works: it
   lives on .dk-symtxt (min-width:0 lets that flex item shrink instead of pushing out). */
.dk-sym{display:flex;align-items:center;gap:6px;font-weight:800;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:visible}
.dk-sym.deg{color:var(--ink)}
.dk-symtxt{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dk-pair{font-size:11px;font-weight:600;color:var(--faint);flex:none}
.dk-sym .badge{flex:none}
.dk-nm{font-size:11px;color:var(--dim);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-price{font-weight:800;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-price sub{font-size:.66em;vertical-align:-.12em}
.dk-val{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-val.up{color:var(--up)}.dk-val.down{color:var(--down)}
.dk-pill{display:inline-flex;align-items:center;justify-content:center;width:100%;border:1px solid var(--line2);border-radius:8px;padding:5px 4px;font-size:11.5px;font-weight:700;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dk-trend{overflow:hidden;justify-content:center}
.dk-trend svg{width:100%;max-width:92px;height:22px}
.dk-empty{padding:40px 16px;text-align:center;color:var(--faint);font-size:12.5px}
/* ── Sidebar mini-cards — sidebarHTML() in app.js. 2-line card: symbol+badge / 24H+MCap. ── */
.scard{margin-bottom:14px}
.scard-h h4{margin:0 2px 8px;font:800 11px Roboto;letter-spacing:.5px;text-transform:uppercase;color:var(--acc)}
.scard-b{display:flex;flex-direction:column}
/* Dense one-line sidebar rows (replaced the two-line .sk-card): hairline dividers
   instead of bordered cards — same info at roughly half the rail height. */
.sk-row{display:flex;align-items:center;gap:7px;padding:5px 6px;min-width:0;cursor:pointer;border-radius:7px}
.sk-row:hover{background:#ffffff10}
.sk-row+.sk-row{border-top:1px solid var(--line)}
.sk-row .ava{width:17px!important;height:17px!important;border-radius:50%!important;flex:none;font-size:7.5px;box-shadow:0 0 0 1.4px var(--acc)}
.sk-row .degico{width:14px;height:14px}
.sk-sym{flex:1;font-weight:700;font-size:11.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sk-sym.deg{color:var(--ink)}
.sk-badge{flex:none;font:700 7px Roboto;letter-spacing:.3px;text-transform:uppercase;padding:1px 4px;border-radius:4px;border:1px solid var(--line2);color:var(--dim)}
.sk-badge.deg{color:var(--orange);border-color:#7a4a16;background:#ff8a1e14}
.sk-badge.ok{color:var(--up);border-color:#1f6f4f;background:#0f9d6314}
.sk-chg{flex:none;font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums}
.sk-chg.up{color:var(--up)}.sk-chg.down{color:var(--down)}
.sk-mc{flex:none;min-width:52px;text-align:right;font-size:10.5px;color:var(--dim);font-weight:700;font-variant-numeric:tabular-nums}


/* ===== Desktop token-page redesign — desktopTokenShell() in app.js.
   Scoped to .page:not(.ismob); the header (.dtop/.mtop) and the mobile token
   layout are never touched. Reuses .tok-hero/.vhero/.tt/.tmeta/.calc-box/.swapbox. ===== */
.tokx{padding:14px 16px 40px}
.tokx-hero{position:relative;overflow:hidden;margin-bottom:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 7%,var(--tableglass)),var(--tableglass) 62%)}
.tokx-hero::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--acc),transparent 70%)}
.tokx-top{display:flex;align-items:center;gap:14px;padding:11px 18px 10px}
.tokx-id{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:12px}
.tokx-id #tava{width:46px;height:46px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--acc);font-size:15px}
.tokx-idtext{min-width:0}
.tokx-r1{display:flex;align-items:center;gap:7px;min-width:0}
.tokx-r1 .sym{font-weight:800;font-size:20px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tokx-r1 .pr{color:var(--faint);font-weight:600;font-size:13px;flex:none}
.tokx-idtext .nm{color:var(--dim);font-size:12px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tokx-r1 .fav{font-size:15px;margin-left:3px;flex:none}
.tokx-right{flex:none;display:flex;align-items:center;gap:14px}
.tokx-right .tok-hero{margin-left:0}
/* security badges: full-width row below the identity/price line (deployed clean style) */
.tokx-badges{display:flex;flex-wrap:wrap;gap:6px;padding:2px 18px 11px}
/* metric strip (gap-based borders so they stay clean at any width) */
.tokx-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.metric-contents{display:contents}
.tokx-strip .hs{padding:9px 16px;min-width:0;background:var(--bg)}
.tokx-strip .hs .l{font-size:8.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
.tokx-strip .hs .v{font-size:16px;font-weight:800;color:var(--ink);margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tokx-strip .hs .s{font-size:10px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--faint)}
.tokx-strip .hs .s.up{color:var(--up)}
/* Token Chart "Key Stats" card = the same 6 metrics, 2-col grid (matches the metric strip look) */
#cKeyStats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
#cKeyStats .hs{background:var(--bg);padding:11px 15px;min-width:0}
#cKeyStats .hs .l{font-size:8.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
#cKeyStats .hs .v{font-size:18px;font-weight:800;color:var(--ink);margin-top:3px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cKeyStats .hs .s{font-size:10.5px;margin-top:1px;color:var(--faint)}
#cKeyStats .hs .s.up{color:var(--up)}
/* desktop: metrics live in the hero strip → hide the rail Key Stats card */
.page:not(.ismob) .oc-keystats{display:none}
/* mobile: metrics move to the Key Stats card after the chart → hide the hero strip cells (keep the tabs) */
.ismob #metricStrip{display:none}
/* tabs */
.tokx .tabsw{display:inline-flex;gap:4px;background:var(--glass);border:1px solid var(--line);border-radius:10px;padding:4px}
.tokx .tabsw button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--dim);font:700 12px Roboto;padding:7px 13px;border-radius:7px;cursor:pointer;white-space:nowrap}
.tokx .tabsw button.on{background:var(--acc);color:var(--accInk)}
/* split + rail */
/* No align-items:start — the two columns stretch to the same height (the taller one).
   The rail keeps its own height + sticky via align-self:start, so on a 2-col desktop
   the CENTER stretches to the rail's height and its tables card fills the gap (below),
   bottom-aligning the two columns. */
.tokx-split{display:grid;grid-template-columns:minmax(0,3fr) minmax(300px,1fr);gap:14px}
.tokx-left{display:flex;flex-direction:column;gap:14px;min-width:0}
.tokx-rail{display:flex;flex-direction:column;gap:14px;min-width:0;position:sticky;top:calc(var(--hh,72px) + 12px);align-self:start}
.tokx-card{overflow:hidden}
/* On a 2-col desktop, the tables card grows to fill the stretched center column so its
   bottom lines up with the right rail; the table scroll area takes the slack and the
   pager pins to the bottom. Only the ACTIVE pane flexes (inactive ones are display:none). */
@media (min-width:1081px){
  /* The chart card is fixed height so the tables card alone takes the slack (or
     scrolls) when JS clamps the center column to the rail's height (equalizeTokenColumns). */
  .tokx-left>.oc-chart{flex:none}
  .tokx-left>.oc-tables{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  /* The tab row + search bar keep their natural height; only the pane (table body)
     below absorbs the squeeze. .tok-tabs has overflow-x:auto, which makes overflow-y
     compute to auto too — a scroll container, whose flex min-height is 0 — so without
     flex:none it collapses to ~0 (hiding the tabs "under" the search bar) when the
     height-pin clamps this column short on a low-res / zoomed screen. */
  .tokx-left>.oc-tables>.tok-tabs,
  .tokx-left>.oc-tables>.vsbar{flex:none}
  /* …and the tab row STICKS to the top of the page scroll (flush under the global
     .stickyhead, whose measured height is --hh) so it stays reachable while the
     tables card is scrolled to read the table. The pin above makes .tokx-left as
     tall as the rail (often > the viewport), so the tables card scrolls up with the
     page and — without this — the tab row disappears behind .stickyhead, leaving the
     search bar as the topmost thing (the reported "tabs hidden under the search bar"
     on scroll). An opaque background is required so the table rows underneath don't
     show through the pinned row. This only works because .oc-tables clips with
     `overflow:clip`, NOT `hidden`: `hidden` would make the card the sticky scrollport
     (it scrolls with the page, so sticky would do nothing); `clip` clips identically
     without becoming a scroll container, so sticky resolves against #page. z-index
     stays below .stickyhead's 20 (they never overlap — the row pins AT --hh). */
  .tokx-left>.oc-tables>.tok-tabs{position:sticky;top:var(--hh,72px);z-index:6;background:var(--card)}
  .tokx-left>.oc-tables>[id^="pane-"]{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  /* the scroll region takes the slack so the table body fills the card and the
     pager below it lands at the bottom; drop the viewport max-height cap that
     otherwise stops it growing (flex-grow is bounded by the pane instead). */
  .tokx-left>.oc-tables .tablewrap{flex:1 1 auto;min-height:0;max-height:none}
  .tokx-left>.oc-tables .supwrap,
  .tokx-left>.oc-tables #cupd-list{flex:1 1 auto;min-height:0;overflow:auto}
}
.tokx-ch{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}
.tokx-ch h3{margin:0;font:800 11px Roboto;letter-spacing:.5px;text-transform:uppercase;color:var(--acc)}
.tokx-ch .agg-tfrow,.tokx-ch .swx{margin-left:auto}
  /* Calculator quote-currency selector (USD / XNT). */
  /* Accent-highlighted so it reads as an interactive control — a hint to pick the unit. */
  .calc-cur{margin-left:auto;background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 55%,transparent);border-radius:6px;font:800 10.5px Roboto;letter-spacing:.4px;padding:3px 8px;cursor:pointer;transition:background .12s,border-color .12s}
  .calc-cur:hover{background:color-mix(in srgb,var(--acc) 22%,transparent);border-color:var(--acc)}
  .calc-cur:focus{outline:1px solid var(--acc);outline-offset:1px}
  .calc-cur option{color:var(--ink);background:var(--card)}   /* readable dropdown list */
.tokx-pad{padding:10px 14px 12px}
/* ── Trade Activity redesign (buy-pressure gauge + stat blocks + maker row) ── */
#tagg{display:block}
.aggx-press{margin:2px 0 13px}
.aggx-press .plabels{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.aggx-press .pl{font:800 11px Roboto}
.aggx-press .pl .n{font:800 13px Roboto;font-variant-numeric:tabular-nums}
.aggx-press .pl.b{color:var(--up)} .aggx-press .pl.s{color:var(--down)}
.aggx-press .pl .cap{color:var(--faint);font:800 9px Roboto;letter-spacing:.5px;text-transform:uppercase;margin-right:6px}
.pbar{position:relative;height:9px;border-radius:5px;overflow:hidden;display:flex;box-shadow:inset 0 0 0 1px rgba(127,127,127,.08)}
.pbar .b{background:linear-gradient(90deg,color-mix(in srgb,var(--up) 55%,transparent),var(--up))}
.pbar .s{background:linear-gradient(90deg,var(--down),color-mix(in srgb,var(--down) 55%,transparent))}
.pbar .div{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--card);transform:translateX(-1px)}
.aggx-two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:11px 11px 0 0;overflow:hidden}
.aggx-cell{background:var(--tableglass);padding:11px 12px 12px}
.aggx-cell .k{color:var(--faint);font:800 9px Roboto;letter-spacing:.6px;text-transform:uppercase}
.aggx-cell .tot{font:800 21px Roboto;color:var(--ink);letter-spacing:-.4px;margin:2px 0 9px;font-variant-numeric:tabular-nums}
.aggx-cell .mini{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--down)}
.aggx-cell .mini>i{display:block;height:100%;background:var(--up)}
.aggx-cell .bs{display:flex;justify-content:space-between;margin-top:6px;font:700 11px Roboto;font-variant-numeric:tabular-nums}
.aggx-cell .bs .up{color:var(--up)} .aggx-cell .bs .dn{color:var(--down)}
.aggx-cell .bs .up::before{content:"\25B2 ";font-size:7px;vertical-align:1px}
.aggx-cell .bs .dn::before{content:"\25BC ";font-size:7px;vertical-align:1px}
.aggx-three{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-top:0;border-radius:0 0 11px 11px;overflow:hidden}
.aggx-three .cell{background:var(--tableglass);padding:9px 12px;text-align:center}
.aggx-three .cell .k{color:var(--faint);font:800 8.5px Roboto;letter-spacing:.5px;text-transform:uppercase}
.aggx-three .cell .v{font:800 16px Roboto;color:var(--ink);margin-top:2px;font-variant-numeric:tabular-nums}
.aggx-three .cell.bcell .v{color:var(--up)} .aggx-three .cell.scell .v{color:var(--down)}
/* profile tab */
.tokx-profcard{position:relative;overflow:hidden}
.tokx-banner{width:100%;aspect-ratio:3/1;position:relative;display:grid;place-items:center;background:radial-gradient(130% 165% at 50% -30%,color-mix(in srgb,var(--acc) 62%,transparent),transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--acc) 38%,var(--bg)),color-mix(in srgb,var(--acc) 14%,var(--bg)) 68%,var(--bg))}
.tokx-banner .blogo{width:120px;height:120px;border-radius:50%;background:#000;box-shadow:0 0 0 3px var(--acc),0 10px 30px rgba(0,0,0,.5);display:grid;place-items:center;color:#fff;font:900 38px Roboto}
.tokx-banner .blogo-img{width:120px;height:120px;border-radius:50%;object-fit:contain;background:transparent;box-shadow:0 0 0 3px var(--acc),0 10px 30px rgba(0,0,0,.5)}
/* uploaded 3:1 banner photo fills the box; hide the themed logo placeholder when present */
.tokx-banner .tokx-bimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.tokx-banner.has-banner{background:#0d0f14}
.tokx-banner.has-banner .blogo,.tokx-banner.has-banner .tokx-bhint{display:none}
.tokx-pupd{position:absolute;top:12px;right:12px;z-index:2;background:var(--acc);color:var(--accInk);border:0;border-radius:9px;padding:8px 14px;font:800 11.5px Roboto;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.tokx-profbody{padding:16px 18px 18px}
.tokx-profbody .psocials{display:flex;gap:9px;flex-wrap:wrap}
.tokx-profbody .tdesc{margin-top:14px;color:var(--dim);font-size:13px;line-height:1.6}
/* not-updated profile prompt shown in the description slot */
.prof-empty .free{color:var(--acc);font-weight:800}
.prof-empty .prof-spec{margin-top:11px;font-size:11.5px;color:var(--faint);white-space:normal}
.prof-empty .prof-spec b{color:var(--dim);font-weight:700}
/* key stats + reference rows */
.ksgrid{display:grid;grid-template-columns:1fr 1fr}
.ksgrid .ks{padding:11px 14px;border-top:1px solid var(--line)}
.ksgrid .ks:nth-child(odd){border-right:1px solid var(--line)}
.ksgrid .ks .l{font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--faint)}
.ksgrid .ks .v{font-size:16px;font-weight:800;color:var(--ink);margin-top:3px;font-variant-numeric:tabular-nums}
.seclist .sec-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 8%,transparent);font-size:12.5px}
.seclist .sec-row:last-child{border-bottom:0}
.seclist .sec-row .v{font-weight:700;font-variant-numeric:tabular-nums}
.seclist .sec-row .v.chk{color:var(--up)}
.seclist .sec-row .v.warn{color:var(--orange)}
/* ── Integrated profile: the banner + trust strip (Description / socials / Update
   Profile) live in the right rail on desktop and flow after the hero on mobile ──
   The banner is 3:1 (base .tokx-banner) and shown ONLY when one is uploaded, so a
   token with none adds no height. `.tokx-herobanner` sits AFTER `.tokx-banner` in the
   sheet, so at equal specificity it wins the display/border overrides. */
@property --tokxang{syntax:"<angle>";inherits:false;initial-value:0deg}
.tokx-herobanner{position:relative;border-top:1px solid var(--line);border-radius:0}
.tokx-herobanner:not(.has-banner){display:none}
/* Animated accent outline: a faint themed ring with a bright highlight sweeping the
   banner's perimeter — masked to a 2px border so it frames the image without covering
   it, and coloured off --acc so it tracks the active theme. */
.tokx-herobanner.has-banner::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;padding:2px;border-radius:inherit;
  background:conic-gradient(from var(--tokxang),
    color-mix(in srgb,var(--acc) 26%,transparent) 0deg,
    var(--acc) 42deg, color-mix(in srgb,#ffffff 78%,var(--acc)) 58deg, var(--acc) 76deg,
    color-mix(in srgb,var(--acc) 26%,transparent) 128deg,
    color-mix(in srgb,var(--acc) 26%,transparent) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:tokxOutline 4.2s linear infinite}
@keyframes tokxOutline{to{--tokxang:360deg}}
@media (prefers-reduced-motion:reduce){.tokx-herobanner.has-banner::after{animation:none}}
/* trust strip: a row with the "Description" toggle on the LEFT and, on the RIGHT,
   the social ICONS (Web / Telegram / X) + Update Profile. The Description button
   expands a full-width panel below the row that shows ONLY the description. */
/* Lives at the TOP of the right rail on desktop (above Trade Activity) and flows
   right after the hero on mobile — spacing comes from the rail gap / the mobile
   split gap, so no own margin. */
.tokx-trust{margin:0}
.tokx-trust-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 14px;background:var(--tableglass);border:1px solid var(--line);border-radius:12px}
.tokx-detbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--acc);font:800 12.5px Roboto;cursor:pointer;padding:6px 2px;flex:none}
.tokx-detbtn:hover{color:var(--ink)}
.tokx-detbtn .caret{display:inline-block;transition:transform .2s}
.tokx-detbtn[aria-expanded="true"] .caret{transform:rotate(90deg)}
.tokx-trust-right{flex:none;display:flex;align-items:center;gap:12px;margin-left:auto}
.tokx-trust-right .psocials{display:flex;gap:7px}
/* social links as icon buttons — a SET link is tinted with the theme accent; an
   UNSET one is dimmed. */
.tokx-trust .psoc{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:8px;border:1px solid var(--line);background:var(--glass);color:var(--dim);transition:color .15s,border-color .15s,background .15s}
.tokx-trust a.psoc.on{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 45%,var(--line));background:color-mix(in srgb,var(--acc) 10%,var(--glass))}
.tokx-trust a.psoc.on:hover{color:var(--acc);border-color:var(--acc);background:color-mix(in srgb,var(--acc) 18%,var(--glass))}
.tokx-trust .psoc.off{opacity:.4}
.tokx-trust .psoc svg{width:15px;height:15px;display:block}
.tokx-trust-upd{flex:none}
.tokx-detwrap{margin-top:12px;padding:0 10px}
.tokx-detwrap[hidden]{display:none}
.tokx-detdesc{margin:0;color:var(--dim);font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word}
@media (max-width:820px){
  .tokx-trust-row{border-radius:0;border-left:0;border-right:0;padding:8px 12px}
}
/* narrow desktop: stack columns, wrap metric strip (mobile UI takes over below 820) */
@media (max-width:1080px){
  .tokx-split{grid-template-columns:1fr}
  .tokx-rail{position:static}
  .tokx-strip{grid-template-columns:repeat(3,1fr)}
}
/* mobile: full-width edge-to-edge sections + compact hero (header stays untouched) */
@media (max-width:820px){
  .tokx{padding:0 0 28px}
  .tokx-hero{margin-bottom:8px}
  .tokx-hero,.tokx-card,.tokx-left>.tcard,.tokx-rail>.tcard,.tokx-profcard{border-radius:0;border-left:0;border-right:0}
  /* rail cards are DOM children of .tokx-rail (display:contents); force them to stretch full width in the flex column */
  .ismob .tokx-split>.tokx-left>.tcard,.ismob .tokx-split>.tokx-rail>.tcard{align-self:stretch;width:auto;max-width:none}
  /* compact vertical rhythm on mobile so the chart sits higher (no content removed) */
  .tokx-top{padding:8px 12px 6px;gap:9px}
  .tokx-id{gap:10px}
  .tokx-id #tava{width:40px;height:40px}
  .tokx-r1 .sym{font-size:16px}
  .tokx-badges{padding:0 12px 7px;gap:5px}
  /* Trade-activity timeframe control: drop to its own full-width row under the
     title on mobile so each button is a comfortable tap target, not a narrow chip */
  .tokx-ch{flex-wrap:wrap}
  .tokx-ch .agg-tfrow{margin-left:0;width:100%;flex-basis:100%}
  .agg-hrow{flex-wrap:wrap}
  .agg-hrow .agg-tfrow{flex:1 1 100%;width:100%}
  .agg-tf{padding:9px 0}
  .tokx-right{gap:9px}
  .tokx-strip{grid-template-columns:repeat(2,1fr)}
  /* single-column flow with explicit ordering: chart → key stats → trade activity →
     liquidity → token info → calculator → trade → transactions/tables */
  .tokx-split{display:flex;flex-direction:column;gap:8px}
  .tokx-left,.tokx-rail{display:contents}
  /* high-specificity so these beat the legacy .ismob .tchart/.tok-swap/.tok-tabs-card order rules */
  /* the banner + trust strip now live inside the rail (top, above Trade Activity on
     desktop); on mobile keep them right after the hero, before the chart —
     banner first, then the trust strip */
  .ismob .tokx-split .tokx-herobanner{order:-1}
  .ismob .tokx-split .tokx-trust{order:0}
  .ismob .tokx-split .oc-chart{order:1}.ismob .tokx-split .oc-keystats{order:2}.ismob .tokx-split .oc-agg{order:3}.ismob .tokx-split .oc-liq{order:4}.ismob .tokx-split .oc-info{order:5}.ismob .tokx-split .oc-trade{order:6}.ismob .tokx-split .oc-calc{order:7}.ismob .tokx-split .oc-tables{order:8}
  .tokx-banner{aspect-ratio:16/7}
  .tokx-banner.has-banner{aspect-ratio:3/1}
}
/* ── Mobile app-style bottom nav (opt-in via ?nav=1). Mobile only; desktop untouched.
   Groups the token page into Chart / Trades / Profile screens driven by
   #page[data-mscreen]; the bar is pinned to the bottom and clears the home
   indicator. Reuses every existing element id, so the live renderers/tabs work. ── */
/* MOBILE SITE NAV — the bottom bar for home and every content page. Same shape and
   feel as the token page's .mnav (below), so a phone has one consistent nav; the
   token page keeps its OWN Chart/Trades/Profile bar, so this is hidden there. The
   desktop rail is display:none under 820px, and this is its mobile replacement. */
.msnav{display:none}
@media (max-width:820px){
  .page.ismob .msnav{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;
    grid-template-columns:repeat(6,1fr);gap:2px;background:var(--barbg);backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);
    padding:7px 6px calc(7px + env(safe-area-inset-bottom))}
  /* The token page owns the bottom bar there (its own .mnav), so stand down. */
  .page.ismob[data-view="token"] .msnav{display:none}
  .msnb{border:0;background:transparent;color:var(--faint);display:flex;flex-direction:column;align-items:center;
    gap:3px;padding:5px 0;font:700 10px 'Roboto',sans-serif;cursor:pointer;border-radius:12px;
    text-decoration:none;min-width:0}
  .msnb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .msnb span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center}
  .msnb.on{color:var(--acc)}
  .msnb:focus-visible{outline:2px solid var(--acc);outline-offset:-3px}
  /* Clear the fixed bottom bar so the last row of content AND the footer are not
     hidden behind it — on EVERY mobile view, the token page included. The token page
     used to pad its .tokx instead, but the footer is a sibling of #viewslot, not a
     child of .tokx, so its tail sat under the token page's fixed .mnav. Padding the
     .mainpane (which contains the footer) is what actually clears it. */
  .page.ismob .mainpane{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  /* On mobile the footer flows right after the content — no push-to-bottom. The
     desktop sticky-footer (margin-top:auto) left a large empty void ABOVE the footer
     on a short page (e.g. the token Trades tab), which read as broken. */
  .page.ismob .sitefoot{margin-top:0}
}
.mnav{display:none}
@media (max-width:820px){
  #page.navon .mnav{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
    grid-template-columns:repeat(4,1fr);gap:2px;background:var(--barbg);backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);
    padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
  #page.navon[data-view="token"] .mnav{display:grid}
  /* No extra .tokx bottom padding: the footer follows the token content and the
     .mainpane padding above clears the fixed .mnav for both. An 80px pad here only
     widened the gap between the last content row and the footer. */
  .mnb{border:0;background:transparent;color:var(--faint);display:flex;flex-direction:column;align-items:center;
    gap:3px;padding:5px 0;font:700 10.5px 'Roboto',sans-serif;cursor:pointer;border-radius:12px;position:relative}
  .mnb svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .mnb.on{color:var(--acc)}
  .mnb:focus-visible{outline:2px solid var(--acc);outline-offset:-3px}
  /* Mobile bottom-nav screens:
       Token  = the whole page — hero + banner + trust strip + chart + tables + rail.
       Trades = the hero (no banner) + the transactions table only.
       Chart  = the hero (no banner) + a full-height chart only.
     The banner + trust strip appear ONLY on the Token screen. */
  #page.navon[data-mscreen="trades"] .tokx-herobanner,
  #page.navon[data-mscreen="chart"] .tokx-herobanner,
  #page.navon[data-mscreen="trades"] .tokx-trust,
  #page.navon[data-mscreen="chart"] .tokx-trust{display:none!important}
  /* Trades: hide the chart + every rail card, keep the tables card (transactions). */
  #page.navon[data-mscreen="trades"] #tokxChart .oc-chart,
  #page.navon[data-mscreen="trades"] #tokxChart .tokx-rail{display:none!important}
  /* Chart: hide the tables + every rail card, keep the chart — and make it full-height. */
  #page.navon[data-mscreen="chart"] #tokxChart .oc-tables,
  #page.navon[data-mscreen="chart"] #tokxChart .tokx-rail{display:none!important}
  #page.navon[data-mscreen="chart"] #tokxChart .oc-chart .chart-host{min-height:calc(100dvh - 210px)}
}
/* Add-to-Home-Screen hint — a slim ONE-LINE strip at the very top, above the
   marquee (mobile browser only; injected by setupInstallHint before .marq). */
.instbar{display:none;align-items:center;gap:9px;padding:8px 12px;
  background:linear-gradient(90deg,var(--acc),#54e2d2);color:var(--accInk);
  font:700 12px 'Roboto',sans-serif;border-bottom:1px solid rgba(0,0,0,.14)}
.instbar.show{display:flex}
.instbar .ib-ic{flex:none;font-size:15px;line-height:1}
.instbar .ib-tx{flex:1;min-width:0;line-height:1.35;white-space:normal;word-break:break-word}
.instbar .ib-go{flex:none;border:0;background:var(--accInk);color:var(--acc);font:800 11px 'Roboto',sans-serif;
  border-radius:7px;padding:5px 11px;cursor:pointer}
.instbar .ib-x{flex:none;border:0;background:transparent;color:var(--accInk);opacity:.75;font-size:17px;line-height:1;cursor:pointer;padding:0 3px}
.instbar .ib-x:hover{opacity:1}
@media (min-width:821px){.instbar{display:none!important}}


/* ══ 2. CONTENT PAGES (shared) ══════════════════════════════════════════════ */

/* Shared stylesheet for content pages rendered into the shell's #viewslot.
 *
 * WHY THIS FILE EXISTS
 *
 * The standalone pages each carried a full copy of this CSS *plus* a copy of the
 * header CSS. Loading such a file into the shell would restyle the global header —
 * so the header rules are deliberately NOT here. This is content only.
 *
 * A new page needs no CSS of its own: drop a fragment in public/views/, and it
 * inherits this. Page-specific rules go in public/views/<name>.css, which the
 * router loads on demand if it exists.
 *//* ── Page: a landing hero over a reference list. Document typography, not the
     app shell's density. *//* Full width inside the shell. The 1080px cap was for a standalone document that
     owned the whole viewport; the pane is already 150px narrower than the window,
     so centring inside a further cap left a wide empty margin on both sides.
     Prose stays readable regardless: .wrap p is capped at 66ch below, so the
     paragraphs hold their measure while tables, cards and grids use the room. */.pagehost .wrap{max-width:none;margin:0;padding:32px 28px 90px}.pagehost .wrap p{font-size:15.3px;line-height:1.72;color:var(--ink);max-width:66ch}
/* Prose links (the mailto on the API page, and any inline link) take the accent so
   they read as links, not body text — they inherited the ink colour before. Excludes
   .cta, which is a themed button with its own colour and background. Shared across
   content pages, in the shell's section 2, so a page section need not name #viewslot. */
.pagehost .wrap p a:not(.cta){color:var(--acc);text-decoration:none}
.pagehost .wrap p a:not(.cta):hover{text-decoration:underline}
.pagehost .muted{color:var(--dim)}.pagehost h2{font:700 20px Roboto;margin:56px 0 14px;letter-spacing:-.2px;scroll-margin-top:96px}.pagehost h3{font:700 12px Roboto;letter-spacing:1px;text-transform:uppercase;color:var(--faint);margin:26px 0 4px}.pagehost .eyebrow{font:700 11px Roboto;letter-spacing:1.3px;text-transform:uppercase;color:var(--acc);margin-bottom:10px}/* hero */.pagehost .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center}
  @media(max-width:900px){.pagehost .hero{grid-template-columns:1fr;gap:26px}}.pagehost .hero h1{font:900 42px/1.08 Roboto;letter-spacing:-1.4px;margin:10px 0 14px}.pagehost .hero h1 .g{background:linear-gradient(92deg,var(--acc),var(--up));-webkit-background-clip:text;
    background-clip:text;color:transparent}.pagehost .hero .sub{font-size:16.5px;line-height:1.7;color:var(--dim);max-width:46ch;margin:0 0 22px}
  @media(max-width:640px){.pagehost .hero h1{font-size:32px}}.pagehost .cta{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;background:var(--acc);
    color:var(--accInk);font:700 13.5px Roboto;border:0;cursor:pointer}.pagehost .cta:hover{text-decoration:none;filter:brightness(1.06)}.pagehost .cta.ghost{background:none;border:1px solid var(--line2);color:var(--ink)}.pagehost .stats{display:flex;gap:32px;margin:32px 0 0;flex-wrap:wrap}.pagehost .stat .n{font:900 26px Roboto;letter-spacing:-.6px;color:var(--ink)}.pagehost .stat .l{font:600 11px Roboto;letter-spacing:.9px;text-transform:uppercase;color:var(--faint);margin-top:2px}/* terminal card */.pagehost .term{border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:rgba(6,9,14,.72);
    box-shadow:0 10px 34px rgba(0,0,0,.34)}.pagehost .term .bar{display:flex;align-items:center;gap:7px;padding:9px 13px;border-bottom:1px solid var(--line);
    background:var(--barbg)}.pagehost .term .dot{width:10px;height:10px;border-radius:50%;background:var(--line2)}.pagehost .term .bar .ttl{margin-left:8px;font:600 11.5px Roboto,sans-serif;color:var(--faint);letter-spacing:.3px}.pagehost .term pre{margin:0;padding:15px 16px;background:none;border:0;font-size:12.8px;line-height:1.75;overflow-x:auto}.pagehost .k1{color:var(--acc)}.pagehost .k2{color:var(--up)}.pagehost .k3{color:var(--warn)}.pagehost .k4{color:var(--faint)}/* feature cards */.pagehost .ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.pagehost .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}
  @media(max-width:820px){.pagehost .grid3{grid-template-columns:1fr}}.pagehost .fcard{border:1px solid var(--line);border-radius:12px;background:var(--tableglass);padding:17px 18px}.pagehost .fcard .ic{color:var(--acc);margin-bottom:9px}.pagehost .fcard h4{margin:0 0 6px;font:700 14px Roboto}.pagehost .fcard p{margin:0;font-size:13.4px;line-height:1.6;color:var(--dim)}/* pricing */.pagehost .band{border:1px solid var(--line);border-radius:16px;background:var(--tableglass);padding:26px 28px;margin:26px 0}.pagehost .plans{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media(max-width:760px){.pagehost .plans{grid-template-columns:1fr}}.pagehost .pl{border:1px solid var(--line);border-radius:13px;padding:20px;background:var(--glass)}.pagehost .pl.hi{border-color:var(--acc);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent)}.pagehost .pl .nm{font:700 11px Roboto;letter-spacing:1px;text-transform:uppercase;color:var(--dim)}.pagehost .pl .px{font:900 30px Roboto;margin:6px 0 14px;letter-spacing:-1px}.pagehost .pl .px small{font:600 13px Roboto;color:var(--dim);letter-spacing:0}.pagehost .pl ul{list-style:none;margin:0 0 16px;padding:0}.pagehost .pl li{padding:6px 0 6px 22px;position:relative;font-size:13.6px;color:var(--ink)}.pagehost .pl li:before{content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;border-left:2px solid var(--acc);
    border-bottom:2px solid var(--acc);transform:rotate(-45deg)}/* endpoint reference */.pagehost .ep{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line);font-size:13.6px}.pagehost .ep:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}.pagehost .ep .m{font:700 10px Roboto;letter-spacing:.5px;color:var(--up);border-radius:5px;padding:2px 6px;
    border:1px solid color-mix(in srgb,var(--up) 40%,transparent);flex:none}.pagehost .ep code{font-family:Roboto,sans-serif;font-size:13px;color:var(--ink);flex:1;min-width:0}.pagehost .ep .d{color:var(--dim);font-size:12.8px;flex:none;max-width:40%;text-align:right}
  @media(max-width:700px){.pagehost .ep{flex-wrap:wrap;gap:8px}.pagehost .ep .d{max-width:100%;text-align:left;flex-basis:100%}}/* errors */.pagehost table.err{width:100%;max-width:760px;border-collapse:collapse;margin:14px 0;font-size:14px}.pagehost table.err th, .pagehost table.err td{padding:11px 13px;border-bottom:1px solid var(--line);text-align:left}.pagehost table.err th{font:700 11px Roboto;letter-spacing:.7px;text-transform:uppercase;color:var(--dim)}.pagehost table.err td.mono{font-family:Roboto,sans-serif;font-size:12.8px}.pagehost .note{border-left:3px solid var(--acc);background:var(--glass);border-radius:0 10px 10px 0;padding:12px 15px;margin:16px 0}.pagehost .note.warn{border-left-color:var(--warn)}.pagehost footer{border-top:1px solid var(--line);margin-top:56px;padding-top:20px;color:var(--faint);font-size:12.8px}


/* ══ 3. PAGE: support ══ scoped so it cannot reach anything else ══ */

/* ── support page
     Built from the components this stylesheet already defines (.plans/.pl,
     .grid3/.fcard, .band, .note, .stats) so the page reads as the same site
     rather than a second template. Only the pieces with no existing equivalent
     are added here: the address row, the tick list and the step list. *//* Address rows. The address must never be clipped or ellipsised — a partially
     shown address is one a visitor can mis-copy, and this is the one string on
     the site where that costs money. It wraps instead, on its own line, at a size
     that is comfortable to read character by character. */.pagehost[data-page="support"] .tgtlist{display:grid;gap:12px;margin:20px 0 6px}.pagehost[data-page="support"] .tgt{border:1px solid var(--line);border-radius:12px;background:var(--tableglass);padding:15px 17px;
    display:flex;align-items:center;gap:16px;flex-wrap:wrap}.pagehost[data-page="support"] .tgt .body{flex:1;min-width:0}.pagehost[data-page="support"] .tgtlab{font:700 11px Roboto;letter-spacing:.9px;text-transform:uppercase;color:var(--faint);margin-bottom:7px}.pagehost[data-page="support"] .tgtaddr{font-family:Roboto,sans-serif;font-size:13.5px;line-height:1.65;
    letter-spacing:.2px;color:var(--ink);word-break:break-all}.pagehost[data-page="support"] .copy{flex:none;padding:9px 17px;border:1px solid var(--line2);border-radius:9px;background:var(--glass);
    color:var(--ink);font:700 12.5px Roboto;cursor:pointer;transition:border-color .15s,color .15s}.pagehost[data-page="support"] .copy:hover{border-color:var(--acc);color:var(--acc)}.pagehost[data-page="support"] .copy.done{border-color:var(--acc);color:var(--acc)}/* Tick list inside the two option cards. */.pagehost[data-page="support"] .ticks{list-style:none;margin:14px 0 18px;padding:0}.pagehost[data-page="support"] .ticks li{position:relative;padding-left:24px;margin-bottom:9px;font-size:13.6px;line-height:1.55;color:var(--dim)}.pagehost[data-page="support"] .ticks li:before{content:"";position:absolute;left:2px;top:5px;width:11px;height:6px;
    border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg)}/* Numbered steps in the how-to band. */.pagehost[data-page="support"] .bandh{margin:0 0 14px;font:700 15px Roboto}.pagehost[data-page="support"] .steps{list-style:none;counter-reset:s;margin:0;padding:0}.pagehost[data-page="support"] .steps li{counter-increment:s;position:relative;padding-left:38px;margin-bottom:13px;
    font-size:14.2px;line-height:1.6;color:var(--dim)}.pagehost[data-page="support"] .steps li:last-child{margin-bottom:0}.pagehost[data-page="support"] .steps li:before{content:counter(s);position:absolute;left:0;top:-1px;width:25px;height:25px;
    border-radius:50%;background:var(--glass);border:1px solid var(--line2);color:var(--acc);
    font:800 12px Roboto;display:flex;align-items:center;justify-content:center}.pagehost[data-page="support"] .steps b{color:var(--ink)}.pagehost[data-page="support"] .pl p{font-size:14px;line-height:1.62;color:var(--dim);margin:0}.pagehost[data-page="support"] .pl .px{font-size:26px;margin:6px 0 12px}/* The stat row sits directly above the option cards and .stats only carries a top
     margin, so without this the numbers touch the card borders. */.pagehost[data-page="support"] .plans{margin:40px 0 8px}.pagehost[data-page="support"] .wrap h2{margin-top:46px}.pagehost[data-page="support"] .grid3{margin:22px 0 10px}

  @media(max-width:900px){.pagehost[data-page="support"] .plans{grid-template-columns:1fr}.pagehost[data-page="support"] .grid3{grid-template-columns:1fr}.pagehost[data-page="support"] .tgt{align-items:flex-start}
  }


/* ══ 3. PAGE: activity ══ scoped so it cannot reach anything else ══ */

/* The feed is a dense table: it uses the full pane rather than the shared
     document width, which is tuned for prose. */.pagehost[data-page="activity"] .wrap{max-width:none;margin:0;padding:26px 24px 80px}/* ── chain stats header ──
     Headline-and-secondary (not cards): the 24h window leads as one big figure, the
     other four (1H/12H/7D/30D) sit beside it. Flat and typographic — one accent, the
     rest neutral — which reads more like a trading dashboard than boxed cards. All
     colours are site tokens, so it resolves in both themes. */.pagehost[data-page="activity"] .actstats{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:2px 0 22px}.pagehost[data-page="activity"] .ashero{min-width:200px;display:flex;flex-direction:column;gap:6px}.pagehost[data-page="activity"] .ashk{font:700 11px Roboto;letter-spacing:1.4px;text-transform:uppercase;color:var(--acc)}.pagehost[data-page="activity"] .ashv{font:800 clamp(30px,5vw,46px)/1 Roboto,sans-serif;letter-spacing:-1px;color:var(--ink);font-variant-numeric:tabular-nums}.pagehost[data-page="activity"] .asht{font:500 14px Roboto,sans-serif;color:var(--dim);font-variant-numeric:tabular-nums}.pagehost[data-page="activity"] .asht b{color:var(--ink);font-weight:700}.pagehost[data-page="activity"] .asright{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.pagehost[data-page="activity"] .asseg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:3px}.pagehost[data-page="activity"] .asseg button{font:700 12px Roboto;color:var(--dim);background:none;border:0;border-radius:7px;padding:7px 12px;cursor:pointer;transition:color .12s,background .12s}.pagehost[data-page="activity"] .asseg button:hover{color:var(--ink)}.pagehost[data-page="activity"] .asseg button.on{background:var(--acc);color:var(--accInk)}.pagehost[data-page="activity"] .assparkwrap{display:flex;align-items:center;gap:9px}.pagehost[data-page="activity"] .asspk{font:700 9.5px Roboto;letter-spacing:.9px;text-transform:uppercase;color:var(--faint)}.pagehost[data-page="activity"] .asspark{width:132px;height:30px;display:block}.pagehost[data-page="activity"] .assparka{fill:color-mix(in srgb,var(--acc) 16%,transparent);stroke:none}.pagehost[data-page="activity"] .assparkl{fill:none;stroke:var(--acc);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}.pagehost[data-page="activity"] .asloading{width:100%;padding:12px 2px;color:var(--faint);font-size:13px}@media(max-width:560px){.pagehost[data-page="activity"] .actstats{gap:16px}.pagehost[data-page="activity"] .ashero{min-width:0}.pagehost[data-page="activity"] .asright{align-items:stretch;width:100%}.pagehost[data-page="activity"] .asseg{display:grid;grid-template-columns:repeat(5,1fr)}.pagehost[data-page="activity"] .asseg button{padding:8px 0;text-align:center}.pagehost[data-page="activity"] .assparkwrap{justify-content:space-between}.pagehost[data-page="activity"] .asspark{width:62%}}/* ── activity feed
     A dense table, not cards: the point is scanning many rows fast. Row height and
     type size are tuned for that rather than for a marketing page. */.pagehost[data-page="activity"] .actbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:18px 0 12px}.pagehost[data-page="activity"] .actlive{display:flex;align-items:center;gap:8px;font:700 12px Roboto;color:var(--dim);letter-spacing:.3px}.pagehost[data-page="activity"] .pulse{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 70%,transparent);animation:p 2s infinite}.pagehost[data-page="activity"] .pulse.off{background:var(--faint);animation:none}
  @keyframes p{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 60%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}.pagehost[data-page="activity"] .actfilters{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.pagehost[data-page="activity"] .chip{padding:6px 13px;border:1px solid var(--line);border-radius:8px;background:var(--glass);
    color:var(--dim);font:700 12px Roboto;cursor:pointer}.pagehost[data-page="activity"] .chip:hover{border-color:var(--line2);color:var(--ink)}.pagehost[data-page="activity"] .chip.on{border-color:var(--acc);color:var(--acc);background:var(--glass)}.pagehost[data-page="activity"] .minlab{display:flex;align-items:center;gap:6px;font:600 11.5px Roboto;color:var(--faint)}.pagehost[data-page="activity"] .minlab input{width:66px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;
    background:var(--glass);color:var(--ink);font:600 12px Roboto,sans-serif}/* Column widths are tuned so the eye travels a short distance from token to side
     to size — the three fields a scan is actually for. Letting the token column
     take 1.2fr opened a dead gap of ~350px between TOKEN and SIDE. */.pagehost[data-page="activity"] .acthead, .pagehost[data-page="activity"] .actrow{display:grid;
    grid-template-columns:52px minmax(120px,1fr) 54px minmax(80px,.7fr) minmax(80px,.7fr) minmax(84px,.72fr) minmax(96px,.7fr) 62px;
    gap:12px;align-items:center;padding:0 12px}/* Extra breathing room BEFORE the Trader column so the numeric block (USD/XNT/
    Tokens) reads as its own group, separated from the address columns. Applied to
    BOTH the header cell and the row cell so the two grids stay aligned. */.pagehost[data-page="activity"] .acthead span:nth-child(7), .pagehost[data-page="activity"] .actrow .tr{padding-left:20px}.pagehost[data-page="activity"] .acthead{font:700 10.5px Roboto;letter-spacing:.7px;text-transform:uppercase;color:var(--faint);
    padding-bottom:9px;border-bottom:1px solid var(--line)}.pagehost[data-page="activity"] .actrow{height:38px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);font-size:13px}.pagehost[data-page="activity"] .actrow:hover{background:var(--glass)}/* A new row fades in rather than snapping: on a fast feed a hard swap is hard to
     track with the eye. Kept short so it never queues behind the next update. */.pagehost[data-page="activity"] .actrow{animation:fi .28s ease-out}
  @keyframes fi{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.pagehost[data-page="activity"] .actrow{animation:none}.pagehost[data-page="activity"] .pulse{animation:none}}.pagehost[data-page="activity"] .actrow .t{color:var(--faint);font:600 12px Roboto,sans-serif}.pagehost[data-page="activity"] .actrow .tk{display:flex;align-items:center;gap:7px;min-width:0}.pagehost[data-page="activity"] .actrow .tk .ava{width:20px;height:20px;font-size:9px;flex:none;box-shadow:0 0 0 1px var(--line)}.pagehost[data-page="activity"] .actrow .tk a{font-weight:800;color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pagehost[data-page="activity"] .actrow .tk a:hover{color:var(--acc)}.pagehost[data-page="activity"] .actrow .usd{font:800 13px Roboto,sans-serif;color:var(--ink)}/* NOT .tok — that is a GLOBAL class (the list's token/pair cell) whose
    display:flex would left-align this number despite text-align:right. */.pagehost[data-page="activity"] .actrow .atok{font:600 12.5px Roboto,sans-serif;color:var(--dim)}.pagehost[data-page="activity"] .actrow .curve{font:700 9.5px Roboto;letter-spacing:.5px;text-transform:uppercase;color:var(--warn);
    border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);border-radius:5px;padding:1px 5px;
    margin-left:7px;font-style:normal;vertical-align:1px}.pagehost[data-page="activity"] .actrow .sd{font-weight:800;font-size:12px}.pagehost[data-page="activity"] .actrow.buy .sd{color:var(--up)}.pagehost[data-page="activity"] .actrow.sell .sd{color:var(--down)}.pagehost[data-page="activity"] .actrow .sz{font:600 12.5px Roboto,sans-serif;color:var(--dim)}.pagehost[data-page="activity"] .actrow .sz i{font-style:normal;font-size:10px;color:var(--faint);margin-left:4px}.pagehost[data-page="activity"] .actrow .tr a, .pagehost[data-page="activity"] .actrow .tx a{font:500 12px Roboto,sans-serif;color:var(--dim);text-decoration:none}.pagehost[data-page="activity"] .actrow .tr a:hover, .pagehost[data-page="activity"] .actrow .tx a:hover{color:var(--acc)}.pagehost[data-page="activity"] .ta{text-align:right}.pagehost[data-page="activity"] .actempty{padding:26px 12px;color:var(--faint);font-size:13.5px}.pagehost[data-page="activity"] .actmore{display:flex;justify-content:center;margin:18px 0 0}

  @media(max-width:820px){/* Keep ALL eight columns on a phone — they don't fit its width, so the strip
       scrolls SIDEWAYS inside .actscroll (never the page body). The header and rows
       share that one scroller and a matching min-width, so they stay column-aligned
       while scrolled. overflow-y is pinned hidden so the horizontal scroller can't
       spawn a nested vertical one — the page keeps its own vertical scroll. */.pagehost[data-page="activity"] .actscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.pagehost[data-page="activity"] .acthead, .pagehost[data-page="activity"] #actRows{min-width:660px}.pagehost[data-page="activity"] .acthead, .pagehost[data-page="activity"] .actrow{grid-template-columns:42px minmax(96px,1fr) 48px minmax(64px,.7fr) minmax(60px,.65fr) minmax(66px,.68fr) minmax(84px,.7fr) 52px;gap:9px;padding:0 10px}.pagehost[data-page="activity"] .acthead span:nth-child(7), .pagehost[data-page="activity"] .actrow .tr{padding-left:12px}
  }


/* ══ 3. PAGE: tx ══ scoped so it cannot reach anything else ══ */

/* NOTE: this page's palette block was removed. The shell owns the theme —
 * a page that redefines --acc/--bg/--ink overrides it for the WHOLE site the
 * moment the page is visited, so the accent changed colour on navigation and
 * did not change back. Page styles only below. */
@font-face{font-family:'Roboto';font-weight:400;font-display:swap;src:url('/fonts/roboto-400.woff2') format('woff2')}
  @font-face{font-family:'Roboto';font-weight:500;font-display:swap;src:url('/fonts/roboto-500.woff2') format('woff2')}
  @font-face{font-family:'Roboto';font-weight:700;font-display:swap;src:url('/fonts/roboto-700.woff2') format('woff2')}
  @font-face{font-family:'Roboto';font-weight:900;font-display:swap;src:url('/fonts/roboto-900.woff2') format('woff2')}/* ── same themed palette as the main screener (index.html .page vars) ── */.pagehost[data-page="tx"] *{box-sizing:border-box}.pagehost[data-page="tx"] a{color:var(--acc);text-decoration:none}.pagehost[data-page="tx"] .gico{width:1em;height:1em;display:inline-block;vertical-align:-.13em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.pagehost[data-page="tx"] .mono{font-family:Roboto,sans-serif}.pagehost[data-page="tx"] .up{color:var(--up)}.pagehost[data-page="tx"] .down{color:var(--down)}
























  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}.pagehost[data-page="tx"] .gchip .gs{font-weight:700}.pagehost[data-page="tx"] .gchip .gp{color:var(--dim)}.pagehost[data-page="tx"] .ava{width:16px;height:16px;border-radius:50%;object-fit:cover;flex:none;display:inline-grid;place-items:center;font-weight:800;font-size:8px;color:var(--bg);overflow:hidden;background:transparent}.pagehost[data-page="tx"] .dgap{flex:0 0 24px}.pagehost[data-page="tx"] .srow{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;cursor:pointer;font:600 12px Roboto;color:var(--dim)}.pagehost[data-page="tx"] .srow:hover{background:color-mix(in srgb,var(--ink) 7%,transparent);color:var(--ink)}.pagehost[data-page="tx"] .srow .ava{width:18px;height:18px;font-size:9px}.pagehost[data-page="tx"] .srow .ssym{color:var(--ink);font-weight:700}.pagehost[data-page="tx"] .srow .snm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.pagehost[data-page="tx"] .srow .spx{margin-left:auto;color:var(--dim);font-weight:500}.pagehost[data-page="tx"] .dspacer{flex:1}.pagehost[data-page="tx"] .dd{position:relative}.pagehost[data-page="tx"] .dd.open .ddbtn .car{transform:rotate(-135deg);margin-top:2px;border-color:var(--acc)}



  @keyframes pop{from{opacity:0;transform:translateY(-4px)}to{opacity:1}}.pagehost[data-page="tx"] .ddopt{padding:6px;border-radius:7px;cursor:pointer;display:flex;justify-content:center}.pagehost[data-page="tx"] .ddopt:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}.pagehost[data-page="tx"] .ddopt .sw{width:44px;height:22px;border-radius:6px;border:1px solid var(--line);display:block}.pagehost[data-page="tx"] .ddopt.on{background:var(--glass)}.pagehost[data-page="tx"] .ddopt.on .sw{outline:2px solid var(--acc);outline-offset:1px}










  @keyframes livepulse{0%, 100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.pagehost[data-page="tx"] .iconbtn{display:inline-flex;align-items:center;justify-content:center;background:var(--glass);border:1px solid var(--line);color:var(--dim);border-radius:9px;padding:6px 8px;cursor:pointer;flex:none}.pagehost[data-page="tx"] .iconbtn:hover{border-color:var(--acc);color:var(--ink)}.pagehost[data-page="tx"] .iconbtn .gico{width:15px;height:15px}


  @media (max-width:820px){.pagehost[data-page="tx"] .only-d{display:none!important}
  }/* responsive desktop scaling — same breakpoints as the token page */
  
  @media (min-width:821px) and (max-width:1300px){.pagehost[data-page="tx"] .dgap{flex:0 0 14px}



  }
  @media (min-width:821px) and (max-width:1080px){









  }/* ── page content ── */.pagehost[data-page="tx"] .wrap{max-width:760px;width:100%;margin:auto;padding:16px 14px 40px}.pagehost[data-page="tx"] h1{font-size:16px;font-weight:800;margin:0 0 3px}.pagehost[data-page="tx"] h1 b{color:var(--acc)}.pagehost[data-page="tx"] .sub{color:var(--faint);font-size:12px;margin:2px 0 16px;line-height:1.5}.pagehost[data-page="tx"] .bar{display:flex;gap:8px;align-items:center;margin-bottom:16px}.pagehost[data-page="tx"] .bar input{flex:1;background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:500 13px Roboto,sans-serif;padding:9px 11px;outline:none;min-width:0}.pagehost[data-page="tx"] .bar input:focus{border-color:var(--acc)}.pagehost[data-page="tx"] .bar button{background:var(--acc);color:var(--accInk);border:0;border-radius:8px;font:800 13px Roboto;padding:10px 16px;cursor:pointer}.pagehost[data-page="tx"] .bar button:disabled{opacity:.5;cursor:default}.pagehost[data-page="tx"] .card{border:1px solid var(--line);border-radius:12px;background:var(--tableglass);padding:14px;margin-bottom:12px}.pagehost[data-page="tx"] .verdict{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800}.pagehost[data-page="tx"] .verdict .ic{font-size:22px;line-height:1}.pagehost[data-page="tx"] .verdict.ok{color:var(--up)}.pagehost[data-page="tx"] .verdict.bad{color:var(--down)}.pagehost[data-page="tx"] .verdict.unk{color:var(--warn)}.pagehost[data-page="tx"] .vsub{color:var(--dim);font-size:12px;font-weight:400;margin-top:5px;line-height:1.5}.pagehost[data-page="tx"] .sect{font:800 11px Roboto;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:18px 0 8px}.pagehost[data-page="tx"] .ev{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--tableglass);margin-bottom:6px}.pagehost[data-page="tx"] .ev .ic{font-size:18px;line-height:1.25;flex:none}.pagehost[data-page="tx"] .ev .txt{font-size:13.5px;line-height:1.55;min-width:0;overflow-wrap:anywhere}.pagehost[data-page="tx"] .ev .why{color:var(--faint);font-size:11.5px;margin-top:3px;line-height:1.45}.pagehost[data-page="tx"] .ev b{font-weight:700}.pagehost[data-page="tx"] .ev.buy{border-color:color-mix(in srgb,var(--up) 40%,transparent)}.pagehost[data-page="tx"] .ev.sell{border-color:color-mix(in srgb,var(--down) 40%,transparent)}.pagehost[data-page="tx"] .amt{font-weight:700}.pagehost[data-page="tx"] .usd{color:var(--dim)}.pagehost[data-page="tx"] .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}.pagehost[data-page="tx"] .kv{border:1px solid var(--line);border-radius:10px;background:var(--tableglass);padding:10px 12px}.pagehost[data-page="tx"] .kv .k{font-size:10.5px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}.pagehost[data-page="tx"] .kv .v{font-size:13px;font-weight:600;overflow-wrap:anywhere}.pagehost[data-page="tx"] .kv .v .sm{font-size:11px;color:var(--faint);font-weight:400}.pagehost[data-page="tx"] table{width:100%;border-collapse:collapse;font-size:12.5px}.pagehost[data-page="tx"] th{text-align:left;color:var(--faint);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;padding:6px 8px;border-bottom:1px solid var(--line)}.pagehost[data-page="tx"] td{padding:7px 8px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);vertical-align:top}.pagehost[data-page="tx"] tr:last-child td{border-bottom:0}.pagehost[data-page="tx"] .status{color:var(--faint);font-size:13px;padding:20px 4px}.pagehost[data-page="tx"] .status.err{color:var(--down)}.pagehost[data-page="tx"] details{border:1px solid var(--line);border-radius:10px;background:var(--tableglass);padding:10px 12px;margin-top:16px}.pagehost[data-page="tx"] summary{cursor:pointer;font-weight:700;font-size:12.5px;color:var(--dim)}.pagehost[data-page="tx"] details p{font-size:12px;color:var(--faint);line-height:1.6;margin:8px 0 0}.pagehost[data-page="tx"] details p b{color:var(--dim)}.pagehost[data-page="tx"] .rawlink{font-size:12px;margin-top:14px;color:var(--faint)}.pagehost[data-page="tx"] .pill{display:inline-block;font:700 10px Roboto;padding:2px 8px;border-radius:6px;background:var(--glass);border:1px solid var(--line);color:var(--dim);margin:2px 3px 0 0}


/* ══ 3. PAGE: trace ══ scoped so it cannot reach anything else ══ */

/* NOTE: this page's palette block was removed. The shell owns the theme —
 * a page that redefines --acc/--bg/--ink overrides it for the WHOLE site the
 * moment the page is visited, so the accent changed colour on navigation and
 * did not change back. Page styles only below. */
@font-face{font-family:'Roboto';font-weight:400;font-display:swap;src:url('/fonts/roboto-400.woff2') format('woff2')}
  @font-face{font-family:'Roboto';font-weight:500;font-display:swap;src:url('/fonts/roboto-500.woff2') format('woff2')}
  @font-face{font-family:'Roboto';font-weight:700;font-display:swap;src:url('/fonts/roboto-700.woff2') format('woff2')}
  @font-face{font-family:'Roboto';font-weight:900;font-display:swap;src:url('/fonts/roboto-900.woff2') format('woff2')}.pagehost[data-page="trace"] *{box-sizing:border-box}.pagehost[data-page="trace"] a{color:var(--acc);text-decoration:none}.pagehost[data-page="trace"] h1{font-size:16px;font-weight:800;margin:0 0 3px}.pagehost[data-page="trace"] h1 b{color:var(--acc)}.pagehost[data-page="trace"] .home{font-size:12px;color:var(--faint)}.pagehost[data-page="trace"] .sub{color:var(--faint);font-size:12px;margin:2px 0 16px;line-height:1.5}.pagehost[data-page="trace"] .bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}.pagehost[data-page="trace"] input, .pagehost[data-page="trace"] select{background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--line);border-radius:8px;color:var(--ink);font:500 13px Roboto;padding:9px 11px;outline:none}.pagehost[data-page="trace"] input#w{flex:1 1 320px;min-width:200px;font-family:Roboto,sans-serif}.pagehost[data-page="trace"] input:focus, .pagehost[data-page="trace"] select:focus{border-color:var(--acc)}.pagehost[data-page="trace"] input.num{width:76px}.pagehost[data-page="trace"] label{font-size:11px;color:var(--faint);display:flex;flex-direction:column;gap:3px}.pagehost[data-page="trace"] button{background:var(--acc);color:var(--accInk);border:0;border-radius:8px;font:800 13px Roboto;padding:10px 16px;cursor:pointer}.pagehost[data-page="trace"] button:disabled{opacity:.5;cursor:default}.pagehost[data-page="trace"] .meta{font-size:11.5px;color:var(--faint);margin:2px 0 14px;line-height:1.6}.pagehost[data-page="trace"] .meta b{color:var(--ink)}.pagehost[data-page="trace"] .tree{display:flex;flex-direction:column;gap:2px}.pagehost[data-page="trace"] .node{position:relative}.pagehost[data-page="trace"] .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--glass)}.pagehost[data-page="trace"] .node.sold>.row{border-color:color-mix(in srgb,var(--down) 55%,transparent);background:color-mix(in srgb,var(--down) 8%,transparent)}.pagehost[data-page="trace"] .node.val>.row{border-color:color-mix(in srgb,var(--acc) 45%,transparent)}.pagehost[data-page="trace"] .addr{font-family:Roboto,sans-serif;font-weight:700;color:var(--ink)}.pagehost[data-page="trace"] .badge{font:700 10px Roboto;padding:2px 7px;border-radius:6px;white-space:nowrap}.pagehost[data-page="trace"] .b-val{color:var(--acc);background:color-mix(in srgb,var(--acc) 15%,transparent)}.pagehost[data-page="trace"] .b-in{color:var(--dim);background:var(--bg);border:1px solid var(--line);font-family:Roboto,sans-serif}.pagehost[data-page="trace"] .b-sold{color:var(--down);background:color-mix(in srgb,var(--down) 16%,transparent)}.pagehost[data-page="trace"] .t{color:var(--faint);font-size:10.5px}.pagehost[data-page="trace"] .kids{margin-left:16px;padding-left:14px;border-left:1px dashed var(--line);margin-top:2px;display:flex;flex-direction:column;gap:2px}.pagehost[data-page="trace"] .relay{color:var(--faint);font-size:10.5px;font-style:italic;margin:1px 0 1px 4px}.pagehost[data-page="trace"] .relaybox{margin:1px 0 1px 4px}.pagehost[data-page="trace"] summary.relay{cursor:pointer;list-style:none}.pagehost[data-page="trace"] summary.relay::-webkit-details-marker{display:none}.pagehost[data-page="trace"] .relaylist{margin:2px 0 3px 12px;padding-left:12px;border-left:1px dotted var(--line);display:flex;flex-direction:column;gap:2px}.pagehost[data-page="trace"] .relayitem{font-size:10.5px;font-family:Roboto,sans-serif}.pagehost[data-page="trace"] .status{color:var(--faint);font-size:13px;padding:20px 4px}.pagehost[data-page="trace"] .status.err{color:var(--down)}.pagehost[data-page="trace"] .legend{font-size:10.5px;color:var(--faint);margin-top:16px;line-height:1.7}.pagehost[data-page="trace"] .dot{display:inline-block;width:9px;height:9px;border-radius:3px;vertical-align:middle;margin-right:4px}


/* ══ 3. PAGE: reward-flow ══ scoped so it cannot reach anything else ══ */

/* This page's own semantic names. Scoped to .pagehost, NOT :root — at :root they
 * would leak to the whole site, which is how the accent changed on navigation.
 * Every one derives from a shell variable, so they follow the theme. Redesign
 * note: this page's warning color (behind-version badges, the warning KPI,
 * withdrawn/renamed labels) used to be var(--warn) — ~10 call sites — but
 * --warn is never DEFINED anywhere this page can see: not in site.css's
 * shared :root/.page blocks, only in admin.html's own separate copy. An
 * undefined custom property with no fallback is invalid at compute time, so
 * every one of those colors silently fell back to the inherited text color —
 * every warning on this page rendered with no warning color at all. This is
 * a known, already-documented gap (see the .crvbadge comment near line 826),
 * not something to paper over locally: test/page-theme-vars.test.ts reserves
 * --warn/--up/--down/etc. as SHELL-owned names a page section may never
 * define, even derived, so the fix here is the same one that comment already
 * uses — reference the real shell token, var(--orange), directly, everywhere
 * this page needs a warning color, instead of a name that doesn't exist. */.pagehost[data-page="reward-flow"]{
  --plane:var(--bg); --card2:rgba(255,255,255,.045); --mut:var(--faint);
  --good:var(--up); --crit:var(--down); --r:16px;
  --grad:linear-gradient(135deg,var(--acc),var(--up));
  --accfx:color-mix(in srgb,var(--acc) 16%,transparent);
  --accfx2:color-mix(in srgb,var(--acc) 30%,transparent);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -12px rgba(0,0,0,.55);
}/* NOTE: this page's palette block was removed. The shell owns the theme —
 * a page that redefines --acc/--bg/--ink overrides it for the WHOLE site the
 * moment the page is visited, so the accent changed colour on navigation and
 * did not change back. Page styles only below.
 * Redesign note: every glow/selection/border below used a HARD-CODED
 * rgba(124,140,255,…) — a fixed indigo that does not exist in any of this
 * site's five accent themes (teal default, blue, purple, yellow, orange) or
 * its daylight mode. On a teal or orange theme the mark icon, active chips
 * and KPI accent bars glowed indigo while the rest of the page (and the
 * shell nav around it) glowed the real accent — two different "accent"
 * colors on screen at once, which is the color mismatch this pass fixes.
 * They are now color-mix(...) off var(--acc), so the glow always matches
 * whatever theme is active, same as the rest of the shell. */.pagehost[data-page="reward-flow"] *{box-sizing:border-box}.pagehost[data-page="reward-flow"]{scroll-behavior:smooth}.pagehost[data-page="reward-flow"]::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(900px 500px at 12% -8%,var(--accfx),transparent 60%),
      radial-gradient(800px 500px at 92% 0%,color-mix(in srgb,var(--up) 10%,transparent),transparent 55%),
      radial-gradient(700px 600px at 50% 120%,color-mix(in srgb,var(--acc) 6%,transparent),transparent 60%);}.pagehost[data-page="reward-flow"] .app{max-width:1120px;margin:0 auto;padding:26px 16px 40px}.pagehost[data-page="reward-flow"] a{color:var(--acc);text-decoration:none}.pagehost[data-page="reward-flow"] .mono{font-family:Roboto,sans-serif}.pagehost[data-page="reward-flow"] ::selection{background:var(--accfx2)}/* header */.pagehost[data-page="reward-flow"] .hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px;
    animation:fade .5s ease both}.pagehost[data-page="reward-flow"] .hdr-l{display:flex;align-items:center;gap:14px;min-width:0}.pagehost[data-page="reward-flow"] .mark{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;
    background:var(--grad);color:var(--accInk);box-shadow:0 8px 22px -9px var(--accfx2);position:relative}.pagehost[data-page="reward-flow"] .mark svg{width:22px;height:22px}.pagehost[data-page="reward-flow"] h1{font-size:20px;font-weight:800;margin:0;letter-spacing:-.3px}.pagehost[data-page="reward-flow"] h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.pagehost[data-page="reward-flow"] .sub{color:var(--faint);font-size:12.5px;margin:2px 0 0}.pagehost[data-page="reward-flow"] .hdr-r{display:flex;gap:8px;flex-wrap:wrap}.pagehost[data-page="reward-flow"] .pill{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:999px;
    background:var(--card);border:1px solid var(--line);color:var(--dim);white-space:nowrap}.pagehost[data-page="reward-flow"] .pill .lab{color:var(--faint);font-weight:500}.pagehost[data-page="reward-flow"] .pill b{color:var(--ink);font-weight:700}.pagehost[data-page="reward-flow"] .epochbar{display:flex;align-items:center;gap:12px;margin:-2px 0 16px;font-size:12px;color:var(--faint);animation:fade .5s ease both}.pagehost[data-page="reward-flow"] .epochbar .track{flex:1;height:5px;border-radius:4px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden;min-width:80px}.pagehost[data-page="reward-flow"] .epochbar .track .fill{height:100%;width:0;background:var(--grad);border-radius:4px;transition:width 1s cubic-bezier(.2,.8,.2,1)}.pagehost[data-page="reward-flow"] .epochbar b{color:var(--ink);font-weight:700}
/* kpi grid — REDESIGN: the strip used to be one row of nine equal-weight tiles
 * (validator count next to network inflation next to sold-XNT, no hierarchy at
 * all — a wall of numbers). It is now two tiers: `.kpis` holds only the four
 * numbers someone opens this page to check (validators / delinquent / earned /
 * dumped), sized to actually read as headlines; everything else (behind-version,
 * network skip, median credits, inflation, active dumpers) moved into `.netstats`,
 * one slim label:value row below it — reference numbers, not headlines. */.pagehost[data-page="reward-flow"] .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:12px;margin-bottom:10px}.pagehost[data-page="reward-flow"] .kp{position:relative;background:var(--tableglass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r);padding:16px 17px;
    box-shadow:var(--shadow);overflow:hidden;animation:rise .5s ease both;transition:transform .18s,border-color .18s,background .18s}.pagehost[data-page="reward-flow"] .kp:hover{transform:translateY(-2px);border-color:var(--line2);background:var(--card2)}.pagehost[data-page="reward-flow"] .kp::after{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--grad);opacity:.85}.pagehost[data-page="reward-flow"] .kp.red::after{background:var(--down)}.pagehost[data-page="reward-flow"] .kp.warnb::after{background:var(--orange)}.pagehost[data-page="reward-flow"] .kp .ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;margin-bottom:10px;
    background:var(--accfx);color:var(--acc)}.pagehost[data-page="reward-flow"] .kp.red .ic{background:color-mix(in srgb,var(--crit) 15%,transparent);color:var(--crit)}.pagehost[data-page="reward-flow"] .kp.warnb .ic{background:color-mix(in srgb,var(--orange) 15%,transparent);color:var(--orange)}.pagehost[data-page="reward-flow"] .kp .ic svg{width:16px;height:16px}.pagehost[data-page="reward-flow"] .kp .kk{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.6px;font-weight:600}.pagehost[data-page="reward-flow"] .kp .kv{font-size:25px;font-weight:800;margin-top:3px;letter-spacing:-.5px}.pagehost[data-page="reward-flow"] .kp .kv.red{color:var(--crit)}.pagehost[data-page="reward-flow"] .kp .kv.warn{color:var(--orange)}.pagehost[data-page="reward-flow"] .kp .kv small{font-size:13px;color:var(--faint);font-weight:600}
/* secondary "reference" stat bar — quiet, single-line, no boxes */.pagehost[data-page="reward-flow"] .netstats{display:flex;flex-wrap:wrap;align-items:center;gap:3px 0;margin-bottom:20px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--ink) 2.5%,transparent);animation:fade .55s ease both}.pagehost[data-page="reward-flow"] .netstats:empty{display:none}.pagehost[data-page="reward-flow"] .nstat{display:flex;align-items:baseline;gap:6px;font-size:12px;padding:0 12px;border-right:1px solid var(--line);white-space:nowrap}.pagehost[data-page="reward-flow"] .nstat:last-child{border-right:0}.pagehost[data-page="reward-flow"] .nstat .nsk{color:var(--faint);font-weight:500}.pagehost[data-page="reward-flow"] .nstat .nsv{color:var(--ink);font-weight:700}.pagehost[data-page="reward-flow"] .nstat .nsv.warn{color:var(--orange)}.pagehost[data-page="reward-flow"] .nstat .nsv.red{color:var(--crit)}
/* toolbar */.pagehost[data-page="reward-flow"] .toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px;position:sticky;top:0;z-index:20;
    padding:12px 0;background:linear-gradient(180deg,var(--bg) 60%,transparent);animation:fade .5s ease both}.pagehost[data-page="reward-flow"] #q{flex:1;background:none;border:0;outline:0;color:var(--ink);font:inherit;font-size:13.5px;padding:11px 0}.pagehost[data-page="reward-flow"] #q::placeholder{color:var(--mut)}.pagehost[data-page="reward-flow"] .chips{display:flex;gap:7px;flex-wrap:wrap}.pagehost[data-page="reward-flow"] .chip{font-size:12.5px;font-weight:600;padding:9px 13px;border-radius:11px;border:1px solid var(--line);
    background:var(--card);color:var(--dim);cursor:pointer;user-select:none;transition:all .16s;white-space:nowrap}.pagehost[data-page="reward-flow"] .chip:hover{border-color:var(--line2);color:var(--ink)}.pagehost[data-page="reward-flow"] .chip.on{color:var(--accInk);background:var(--grad);border-color:transparent;box-shadow:0 6px 16px -8px var(--accfx2)}.pagehost[data-page="reward-flow"] .chip.on.red{background:var(--down)}.pagehost[data-page="reward-flow"] .chip.on.warnb{background:var(--orange)}/* validator cards */.pagehost[data-page="reward-flow"] .list{display:flex;flex-direction:column;gap:10px}.pagehost[data-page="reward-flow"] .vcard{background:var(--tableglass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
    box-shadow:var(--shadow);cursor:pointer;transition:transform .16s,border-color .16s,background .16s;
    animation:rise .45s ease both;position:relative;overflow:hidden}.pagehost[data-page="reward-flow"] .vcard:hover{transform:translateY(-2px);border-color:var(--line2);background:var(--card2)}.pagehost[data-page="reward-flow"] .vcard.delq{border-color:color-mix(in srgb,var(--crit) 40%,var(--line))}.pagehost[data-page="reward-flow"] .vcard.delq::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--down)}.pagehost[data-page="reward-flow"] .vhead{display:flex;align-items:center;gap:12px}.pagehost[data-page="reward-flow"] .avatar{position:relative;flex:none}.pagehost[data-page="reward-flow"] .logo{width:40px;height:40px;border-radius:11px;object-fit:cover;background:var(--panel);border:1px solid var(--line);display:block}.pagehost[data-page="reward-flow"] .lmono{display:inline-flex;align-items:center;justify-content:center;font:800 16px Roboto,sans-serif;color:var(--accInk);background:var(--grad)}.pagehost[data-page="reward-flow"] .sdot{position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;border:2.5px solid var(--plane);background:var(--faint)}.pagehost[data-page="reward-flow"] .sdot.ok{background:var(--good)}.pagehost[data-page="reward-flow"] .sdot.bad{background:var(--crit);animation:pulse 1.6s infinite}.pagehost[data-page="reward-flow"] .who{min-width:0;flex:1}.pagehost[data-page="reward-flow"] .vname{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.pagehost[data-page="reward-flow"] .vaddr{font-size:11px;color:var(--faint);margin-top:1px}.pagehost[data-page="reward-flow"] .badge{font:700 10px Roboto,sans-serif;padding:3px 8px;border-radius:7px;white-space:nowrap;letter-spacing:.2px}.pagehost[data-page="reward-flow"] .b-ok{color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent)}.pagehost[data-page="reward-flow"] .b-bad{color:var(--crit);background:color-mix(in srgb,var(--crit) 14%,transparent)}.pagehost[data-page="reward-flow"] .b-mut{color:var(--faint);background:color-mix(in srgb,var(--ink) 6%,transparent)}.pagehost[data-page="reward-flow"] .b-ver{color:var(--dim);background:color-mix(in srgb,var(--ink) 7%,transparent)}.pagehost[data-page="reward-flow"] .b-ver.behind{color:var(--orange);background:color-mix(in srgb,var(--orange) 15%,transparent)}.pagehost[data-page="reward-flow"] .b-sell{color:var(--crit);background:color-mix(in srgb,var(--crit) 14%,transparent)}.pagehost[data-page="reward-flow"] .b-hold{color:var(--good);background:color-mix(in srgb,var(--good) 13%,transparent)}.pagehost[data-page="reward-flow"] .b-recent{color:var(--orange);background:color-mix(in srgb,var(--orange) 14%,transparent)}.pagehost[data-page="reward-flow"] .renamed{font:700 9.5px Roboto,sans-serif;color:var(--orange);background:color-mix(in srgb,var(--orange) 14%,transparent);padding:2px 6px;border-radius:6px}.pagehost[data-page="reward-flow"] .chev{flex:none;color:var(--faint);transition:transform .22s;width:18px;height:18px}.pagehost[data-page="reward-flow"] .vcard.open .chev{transform:rotate(180deg)}
/* metric row — REDESIGN: these were bordered boxed tiles (`.m`), one per
 * number, on every single card in the list — the densest part of the old
 * page multiplied by every validator on screen. Now one quiet inline row of
 * label:value pairs with hairline dividers, no per-number box.
 * Named `.rfrow`/`.rfm`/`.rfmk`/`.rfmv`, NOT the generic `.mrow`/`.mi`/`.mk`/
 * `.mv` the first pass used — this is the exact "page-scoped class still
 * inherits from a GLOBAL rule of the same name" trap documented elsewhere in
 * this file (the wallet page's `.wchip`→`.wfchip` rename). `.mrow` is
 * ALREADY a real, unscoped, shared class (two different global meanings, at
 * line ~241 and ~808) with its own `justify-content:space-between` and
 * `.mrow .mk{}`/`.mrow .mv{}` children — none of which this page's higher-
 * specificity selector overrides unless it sets the SAME property, so the
 * metric row rendered spread edge-to-edge with right-aligned values instead
 * of packed left, on every card, in production. Verified via
 * getComputedStyle on the real rendered page, not by re-reading the rule. */.pagehost[data-page="reward-flow"] .rfrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}.pagehost[data-page="reward-flow"] .rfm{display:flex;align-items:baseline;gap:5px;font-size:12px;padding:0 11px;border-right:1px solid var(--line);white-space:nowrap}.pagehost[data-page="reward-flow"] .rfm:last-child{border-right:0}.pagehost[data-page="reward-flow"] .rfm .rfmk{color:var(--faint);font-weight:500}.pagehost[data-page="reward-flow"] .rfm .rfmv{color:var(--ink);font-weight:700}/* dump meter */.pagehost[data-page="reward-flow"] .meterwrap{margin-top:12px}.pagehost[data-page="reward-flow"] .meterhead{display:flex;justify-content:space-between;align-items:baseline;font-size:11px;color:var(--faint);margin-bottom:5px}.pagehost[data-page="reward-flow"] .meterhead b{color:var(--crit);font-weight:700}.pagehost[data-page="reward-flow"] .meterhead .pc{font-weight:800;font-size:13px}.pagehost[data-page="reward-flow"] .meter{height:7px;border-radius:6px;background:color-mix(in srgb,var(--ink) 7%,transparent);overflow:hidden}.pagehost[data-page="reward-flow"] .meter .fill{height:100%;width:0;border-radius:6px;transition:width 1s cubic-bezier(.2,.8,.2,1)}
/* expand detail */.pagehost[data-page="reward-flow"] .detail{overflow:hidden;max-height:0;opacity:0;transition:max-height .4s ease,opacity .3s ease,margin .3s}.pagehost[data-page="reward-flow"] .vcard.open .detail{max-height:1400px;opacity:1;margin-top:14px}.pagehost[data-page="reward-flow"] .grp{margin-bottom:14px}.pagehost[data-page="reward-flow"] .grp:last-of-type{margin-bottom:16px}.pagehost[data-page="reward-flow"] .grpk{font-size:10px;color:var(--acc);text-transform:uppercase;letter-spacing:.7px;font-weight:700;margin:0 0 6px 1px;
    display:flex;align-items:center;gap:6px}.pagehost[data-page="reward-flow"] .grpk::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--line),transparent)}
/* stat list — REDESIGN: this was the biggest offender. Four groups × up to
 * eight bordered, backgrounded tiles each = ~28 individually-boxed numbers
 * per expanded card, all the same visual weight whether the number was
 * "credits (last)" or "delinquent" — a spreadsheet pretending to be a card.
 * It's now a compact two-column key:value list — one hairline per row, no
 * per-number box — so it reads like a list of facts, and color is reserved
 * for the handful of values that are actually actionable (see detailHTML's
 * `color` argument). All the same data; a fifth of the visual weight. */.pagehost[data-page="reward-flow"] .dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));column-gap:18px}.pagehost[data-page="reward-flow"] .dli{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}.pagehost[data-page="reward-flow"] .dlk{font-size:12px;color:var(--faint);white-space:nowrap}.pagehost[data-page="reward-flow"] .dlv{font-size:12.5px;font-weight:700;color:var(--ink);text-align:right;overflow-wrap:anywhere}
.pagehost[data-page="reward-flow"] .tracebtn{margin-top:4px;width:100%;padding:12px;border-radius:12px;border:1px solid transparent;
    background:var(--grad);color:var(--accInk);font:800 13.5px Roboto,sans-serif;cursor:pointer;transition:filter .16s,transform .16s;
    box-shadow:0 8px 20px -10px var(--accfx2)}.pagehost[data-page="reward-flow"] .tracebtn:hover{filter:brightness(1.08);transform:translateY(-1px)}.pagehost[data-page="reward-flow"] .noflow{color:var(--faint);text-align:center;padding:12px;font-size:12.5px;background:color-mix(in srgb,var(--ink) 3%,transparent);border-radius:11px}/* states */.pagehost[data-page="reward-flow"] .empty{text-align:center;color:var(--faint);padding:60px 20px;font-size:13.5px}.pagehost[data-page="reward-flow"] .empty.err{color:var(--crit)}.pagehost[data-page="reward-flow"] .skel{height:86px;border-radius:var(--r);background:linear-gradient(100deg,var(--card) 30%,var(--card2) 50%,var(--card) 70%);
    background-size:200% 100%;animation:shimmer 1.3s infinite;border:1px solid var(--line);margin-bottom:10px}/* modal */.pagehost[data-page="reward-flow"] .modal{position:fixed;inset:0;background:rgba(4,6,12,.72);display:none;align-items:flex-end;justify-content:center;
    z-index:60;backdrop-filter:blur(6px);animation:fade .2s ease}.pagehost[data-page="reward-flow"] .modal.open{display:flex}.pagehost[data-page="reward-flow"] .modalbox{background:var(--plane);border:1px solid var(--line2);border-radius:20px 20px 0 0;width:100%;max-width:760px;
    max-height:88vh;display:flex;flex-direction:column;box-shadow:0 -20px 60px rgba(0,0,0,.6);animation:sheet .34s cubic-bezier(.2,.9,.2,1)}
  @media(min-width:640px){.pagehost[data-page="reward-flow"] .modal{align-items:center}.pagehost[data-page="reward-flow"] .modalbox{border-radius:20px;animation:pop .3s cubic-bezier(.2,.9,.2,1)}}.pagehost[data-page="reward-flow"] .modalhead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px;border-bottom:1px solid var(--line)}.pagehost[data-page="reward-flow"] .modaltitle{display:flex;align-items:center;gap:11px;min-width:0}.pagehost[data-page="reward-flow"] .modaltitle .name{font-weight:700;font-size:15px}.pagehost[data-page="reward-flow"] .modaltitle .addr{font-size:11px;color:var(--faint)}.pagehost[data-page="reward-flow"] .xbtn{background:var(--card);border:1px solid var(--line);color:var(--ink);width:34px;height:34px;border-radius:10px;
    font-size:16px;cursor:pointer;flex:none;transition:background .16s}.pagehost[data-page="reward-flow"] .xbtn:hover{background:var(--card2)}.pagehost[data-page="reward-flow"] .modalbody{padding:16px;overflow:auto}.pagehost[data-page="reward-flow"] .tracefoot{margin-top:12px;padding-top:11px;border-top:1px solid var(--line);color:var(--faint);font-size:11.5px}/* money-trail tree */.pagehost[data-page="reward-flow"] .tree{font-size:12px}.pagehost[data-page="reward-flow"] .node{margin:1px 0}.pagehost[data-page="reward-flow"] .node .row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:4px 0}.pagehost[data-page="reward-flow"] .node.val>.row{color:var(--acc)}.pagehost[data-page="reward-flow"] .kids{margin-left:14px;padding-left:13px;border-left:1px dashed var(--accfx2);margin-top:2px;display:flex;flex-direction:column;gap:2px}.pagehost[data-page="reward-flow"] summary.relay{cursor:pointer;list-style:none;color:var(--faint);font-size:11px;font-style:italic;margin:2px 0 2px 4px}.pagehost[data-page="reward-flow"] summary.relay::-webkit-details-marker{display:none}.pagehost[data-page="reward-flow"] .relaylist{margin:2px 0 3px 12px;padding-left:12px;border-left:1px dotted var(--accfx2);display:flex;flex-direction:column;gap:2px}.pagehost[data-page="reward-flow"] .relayitem{font-size:11px}.pagehost[data-page="reward-flow"] .b-val{font:800 9px Roboto,sans-serif;padding:2px 6px;border-radius:5px;color:var(--accInk);background:var(--grad)}.pagehost[data-page="reward-flow"] .b-auth{font:800 9px Roboto,sans-serif;padding:2px 6px;border-radius:5px;color:var(--orange);background:color-mix(in srgb,var(--orange) 15%,transparent)}.pagehost[data-page="reward-flow"] .b-in{color:var(--dim);font-size:11px}.pagehost[data-page="reward-flow"] .b-sold{font:700 10px Roboto,sans-serif;padding:2px 7px;border-radius:5px;color:var(--crit);background:color-mix(in srgb,var(--crit) 14%,transparent)}.pagehost[data-page="reward-flow"] .t{color:var(--mut);font-size:10px}.pagehost[data-page="reward-flow"] .addr{color:var(--dim)}

  @keyframes fade{from{opacity:0}to{opacity:1}}
  @keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(251,90,106,.6)}70%{box-shadow:0 0 0 7px rgba(251,90,106,0)}100%{box-shadow:0 0 0 0 rgba(251,90,106,0)}}
  @keyframes shimmer{to{background-position:-200% 0}}
  @keyframes sheet{from{transform:translateY(40px)}to{transform:translateY(0)}}
  @keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
  @media(prefers-reduced-motion:reduce){.pagehost[data-page="reward-flow"] *{animation:none!important;transition:none!important}}

/* ══ 3. PAGE: docs ══ scoped so it cannot reach anything else ══ */
  .pagehost[data-page="docs"] .dwrap{max-width:860px;margin:0 auto;padding:8px 2px 26px}
  .pagehost[data-page="docs"] .dhero{padding:12px 0 4px}
  .pagehost[data-page="docs"] .deyebrow{font:700 11px/1 Roboto,sans-serif;letter-spacing:2px;text-transform:uppercase;color:var(--acc)}
  .pagehost[data-page="docs"] h1{font-size:clamp(26px,4.5vw,38px);line-height:1.1;letter-spacing:-.8px;margin:12px 0 8px;font-weight:800;color:var(--ink)}
  .pagehost[data-page="docs"] .dsub{font-size:16px;color:var(--dim);max-width:60ch;margin:0}
  .pagehost[data-page="docs"] .dcards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 6px}
  .pagehost[data-page="docs"] .dcard{display:block;background:var(--tableglass);border:1px solid var(--line);border-radius:13px;padding:15px 16px;transition:transform .16s,border-color .16s}
  .pagehost[data-page="docs"] .dcard:hover{transform:translateY(-2px);border-color:var(--acc);text-decoration:none}
  .pagehost[data-page="docs"] .dcard .dn{font:700 11px/1 Roboto,sans-serif;color:var(--faint)}
  .pagehost[data-page="docs"] .dcard h3{margin:8px 0 4px;font-size:16px;font-weight:750;color:var(--ink)}
  .pagehost[data-page="docs"] .dcard p{margin:0;font-size:13px;color:var(--dim)}
  .pagehost[data-page="docs"] .dsec{padding-top:8px;scroll-margin-top:70px}
  .pagehost[data-page="docs"] .dpart{font:700 11px/1 Roboto,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--acc);margin-top:28px}
  .pagehost[data-page="docs"] h2{font-size:23px;font-weight:780;letter-spacing:-.4px;margin:4px 0 14px;border-bottom:1px solid var(--line);padding-bottom:10px;color:var(--ink)}
  .pagehost[data-page="docs"] h3{font-size:17px;font-weight:720;margin:24px 0 8px;scroll-margin-top:70px;color:var(--ink)}
  .pagehost[data-page="docs"] p{margin:0 0 12px;line-height:1.6;color:var(--ink)}
  .pagehost[data-page="docs"] ul,.pagehost[data-page="docs"] ol{margin:0 0 13px;padding-left:20px}
  .pagehost[data-page="docs"] li{margin:5px 0;line-height:1.55}
  .pagehost[data-page="docs"] b{color:var(--ink);font-weight:700}
  .pagehost[data-page="docs"] a{color:var(--acc);text-decoration:none}
  .pagehost[data-page="docs"] a:hover{text-decoration:underline}
  .pagehost[data-page="docs"] .dmuted{color:var(--dim);font-size:13.5px}
  .pagehost[data-page="docs"] .dsublbl{font:700 11px/1 Roboto,sans-serif;letter-spacing:.5px;text-transform:uppercase;color:var(--faint);margin:16px 0 6px}
  .pagehost[data-page="docs"] .dnote{border:1px solid var(--line);border-left:3px solid var(--acc);background:color-mix(in srgb,var(--acc) 7%,transparent);border-radius:0 10px 10px 0;padding:11px 14px;margin:14px 0;font-size:13.5px}
  .pagehost[data-page="docs"] .dnote.warn{border-left-color:var(--orange);background:color-mix(in srgb,var(--orange) 9%,transparent)}
  .pagehost[data-page="docs"] .dnote .dlbl{display:block;font:700 10px/1 Roboto,sans-serif;letter-spacing:.7px;text-transform:uppercase;color:var(--acc);margin-bottom:5px}
  .pagehost[data-page="docs"] .dnote.warn .dlbl{color:var(--orange)}
  .pagehost[data-page="docs"] .dtbl{overflow-x:auto;border:1px solid var(--line);border-radius:10px;margin:13px 0}
  .pagehost[data-page="docs"] table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:420px}
  .pagehost[data-page="docs"] thead th{text-align:left;font:700 10.5px/1.3 Roboto,sans-serif;letter-spacing:.4px;text-transform:uppercase;color:var(--faint);padding:9px 12px;background:var(--thbg);border-bottom:1px solid var(--line);white-space:nowrap}
  .pagehost[data-page="docs"] tbody td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5;color:var(--ink)}
  .pagehost[data-page="docs"] tbody tr:last-child td{border-bottom:0}
  .pagehost[data-page="docs"] code{background:var(--glass);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:12.5px;font-family:Roboto,sans-serif;white-space:nowrap;color:var(--ink)}
  .pagehost[data-page="docs"] td code{white-space:normal}
  .pagehost[data-page="docs"] .cp{position:relative;margin:13px 0}
  .pagehost[data-page="docs"] pre{background:var(--glass);border:1px solid var(--line);border-radius:11px;padding:14px 16px;overflow-x:auto;margin:0;font-size:12.6px;line-height:1.6;color:var(--ink)}
  .pagehost[data-page="docs"] pre code{background:none;border:0;padding:0;white-space:pre}
  .pagehost[data-page="docs"] .dcp{position:absolute;top:8px;right:8px;background:var(--card);border:1px solid var(--line);color:var(--dim);border-radius:7px;font:600 11px 'Roboto',sans-serif;padding:4px 9px;cursor:pointer}
  .pagehost[data-page="docs"] .dcp:hover{color:var(--ink);border-color:var(--acc)}
  .pagehost[data-page="docs"] .db{display:inline-block;font:700 9.5px/1.4 Roboto,sans-serif;letter-spacing:.5px;text-transform:uppercase;padding:2px 6px;border-radius:5px;vertical-align:middle;white-space:nowrap}
  .pagehost[data-page="docs"] .db.crv,.pagehost[data-page="docs"] .db.med{color:var(--orange);background:color-mix(in srgb,var(--orange) 14%,transparent);border:1px solid color-mix(in srgb,var(--orange) 42%,transparent)}
  .pagehost[data-page="docs"] .db.twap{color:rgba(90,169,230,1);background:rgba(90,169,230,.14);border:1px solid rgba(90,169,230,.4)}
  .pagehost[data-page="docs"] .db.limit{color:rgba(232,121,184,1);background:rgba(232,121,184,.14);border:1px solid rgba(232,121,184,.4)}
  .pagehost[data-page="docs"] .db.exch{color:rgba(160,120,225,1);background:rgba(138,107,208,.14);border:1px solid rgba(138,107,208,.4)}
  .pagehost[data-page="docs"] .db.buy,.pagehost[data-page="docs"] .db.low{color:var(--up);background:color-mix(in srgb,var(--up) 13%,transparent);border:1px solid color-mix(in srgb,var(--up) 42%,transparent)}
  .pagehost[data-page="docs"] .db.sell,.pagehost[data-page="docs"] .db.high{color:var(--down);background:color-mix(in srgb,var(--down) 12%,transparent);border:1px solid color-mix(in srgb,var(--down) 42%,transparent)}
  .pagehost[data-page="docs"] .db.ai{color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent)}
  /* the "Has profile" shield is a glyph, not a text pill — show it bare (no pill box) */
  .pagehost[data-page="docs"] .db.prof{padding:0;background:transparent;border:0;line-height:0}
  .pagehost[data-page="docs"] .dpill{display:inline-block;font:700 11px/1 Roboto,sans-serif;padding:3px 8px;border-radius:6px;border:1px solid var(--line2);background:var(--glass);color:var(--dim);margin:2px 2px 0 0}
  .pagehost[data-page="docs"] .drisk{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
  .pagehost[data-page="docs"] .dfoot{margin-top:34px;padding-top:16px;border-top:1px solid var(--line);color:var(--faint);font-size:12.5px}
  @media(max-width:640px){.pagehost[data-page="docs"] .dcards{grid-template-columns:1fr}}

/* ══ 4. SITE FOOTER ═════════════════════════════════════════════════════════ */
/* Rendered once by the shell, outside #viewslot, so browsing never re-renders it. */
/* margin-top:auto is the half that pushes it down; the height chain above is the
   other half, and neither works alone. */
/* Compact bar: brand · full disclaimer · links, in one low row that wraps to a
   stack on narrow screens. margin-top:auto is the half that pushes it down; the
   height chain above is the other half, and neither works alone. */
.sitefoot{margin-top:auto;padding:16px 24px 18px;border-top:1px solid var(--line);color:var(--faint);
  font:500 11px Roboto;letter-spacing:.15px;display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between}
.sitefoot .footbrand{flex:0 0 auto;font-weight:700;font-size:13px;color:var(--ink);letter-spacing:-.1px}
.sitefoot .footbrand small{display:block;font-weight:400;font-size:10.5px;color:var(--faint);letter-spacing:.2px;margin-top:2px}
/* The disclaimer takes the middle and stays kept-in-full, only smaller and tighter
   than before (11px / 1.5 vs 12px / 1.65). */
.sitefoot .footnote{flex:1 1 360px;min-width:240px}
.sitefoot .footnote p{margin:0 0 5px;font-size:11px;line-height:1.5}
.sitefoot .footnote p:last-child{margin-bottom:0}
.sitefoot .footlinks{flex:0 0 auto;font-size:11px;color:var(--faint)}
.sitefoot .footlinks a{color:var(--dim);text-decoration:none}
.sitefoot .footlinks a:hover{color:var(--acc)}

/* ── Legal pages (Privacy Policy, Terms of Use) ── a readable prose column on the
   shared page tokens, so both themes resolve; one warm-bordered note flags the
   template. */
.pagehost[data-page="privacy"] .legal,.pagehost[data-page="terms"] .legal{max-width:760px;margin:0 auto;padding:26px 22px 90px}
.pagehost[data-page="privacy"] .legal h1,.pagehost[data-page="terms"] .legal h1{font:900 32px/1.12 Roboto;letter-spacing:-.8px;margin:8px 0 6px;color:var(--ink)}
.pagehost[data-page="privacy"] .legal h2,.pagehost[data-page="terms"] .legal h2{font:700 18px Roboto;margin:30px 0 8px;color:var(--ink);letter-spacing:-.2px}
.pagehost[data-page="privacy"] .legal h3,.pagehost[data-page="terms"] .legal h3{font:700 12.5px Roboto;letter-spacing:.5px;margin:18px 0 4px;color:var(--faint);text-transform:uppercase}
.pagehost[data-page="privacy"] .legal p,.pagehost[data-page="privacy"] .legal li,.pagehost[data-page="terms"] .legal p,.pagehost[data-page="terms"] .legal li{font:400 14.5px/1.65 Roboto,sans-serif;color:var(--dim)}
.pagehost[data-page="privacy"] .legal b,.pagehost[data-page="terms"] .legal b{color:var(--ink);font-weight:700}
.pagehost[data-page="privacy"] .legal a,.pagehost[data-page="terms"] .legal a{color:var(--acc);text-decoration:none}
.pagehost[data-page="privacy"] .legal a:hover,.pagehost[data-page="terms"] .legal a:hover{text-decoration:underline}
.pagehost[data-page="privacy"] .legal ul,.pagehost[data-page="terms"] .legal ul{margin:8px 0;padding-left:20px}
.pagehost[data-page="privacy"] .legal li,.pagehost[data-page="terms"] .legal li{margin:5px 0}
.pagehost[data-page="privacy"] .lupd,.pagehost[data-page="terms"] .lupd{color:var(--faint);font-size:12.5px;margin:0 0 16px}
.pagehost[data-page="privacy"] .lnote,.pagehost[data-page="terms"] .lnote{background:color-mix(in srgb,var(--warn) 10%,transparent);border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);border-radius:11px;padding:12px 15px;font-size:13px;line-height:1.6;margin:0 0 24px}
.pagehost[data-page="privacy"] .lnote b,.pagehost[data-page="terms"] .lnote b{color:var(--warn)}
.pagehost[data-page="privacy"] .lfoot,.pagehost[data-page="terms"] .lfoot{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);font-size:13px}

/* ── Share: one button in the nav, opening a popover menu ───────────────────
   The Share button is a .lnavb / .msnb like any nav item, so it inherits the nav's
   look. The menu is one fixed-position popover (app.js positions it next to the
   clicked button) with a row per destination. */
/* The Share/More buttons are <button>s, so they need the reset the <a> items get for
   free — otherwise the native button background/font shows through in the rail. */
.lnavb.shbtn,.msnb.shbtn,.lnavb.morebtn,.msnb.morebtn{background:none;cursor:pointer;font-family:inherit;width:100%}
/* The X logo and the ••• dots are FILLED glyphs; the nav's icon rule is stroke-only,
   so fill them explicitly (the rail slot otherwise renders an invisible outline). */
.lnavb.xbtn .lnavi,.msnb.morebtn svg,.lnavb.morebtn svg{fill:currentColor;stroke:none}
.sharemenu{position:fixed;z-index:80;display:flex;flex-direction:column;gap:1px;padding:6px;min-width:184px;
  background:var(--barbg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.45)}
.sharemenu[hidden]{display:none}
.sharemenu.open{animation:pop .12s ease-out}
.sharemenu .shmi{display:flex;align-items:center;gap:11px;padding:9px 11px;border:0;border-radius:8px;
  background:transparent;color:var(--dim);font:600 13px Roboto;cursor:pointer;text-decoration:none;text-align:left;width:100%}
.sharemenu .shmi:hover{background:var(--glass);color:var(--ink)}
.sharemenu .shmi svg{width:17px;height:17px;fill:currentColor;flex:none}
.sharemenu .shmi svg.ln{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Copy link is the primary action (the honest path for Discord and anywhere without
   an intent), so its row reads in the accent. */
.sharemenu .shmi[data-sh="cp"]{color:var(--acc)}
.sharemenu .shmi[data-sh="cp"]:hover{color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}

/* ══ /wallet/<address> ════════════════════════════════════════════════════
   Scoped to .pagehost[data-page="wallet"], like every other content page.
   Colours come only from theme tokens — a token serves five themes AND two
   modes, so a literal is invisible on at least one of them.

   NOTE ON CLASS NAMES: a page-scoped selector wins on specificity only for the
   properties it DECLARES. `.wchip` and `.wlink` already exist as global rules
   (the token page's wallet chip and its links), so their display/background/
   margin leaked into anything reusing those names here. Page classes are
   prefixed `wf`/`wt`/`wp` for that reason — check with
   grep -o '\.<name>[{ ,:]' public/site.css before adding one. */
.pagehost[data-page="wallet"] *{box-sizing:border-box}
.pagehost[data-page="wallet"] .wrap{max-width:1240px;margin:0 auto;padding:22px 16px 60px}
.pagehost[data-page="wallet"] a{color:var(--acc);text-decoration:none}
.pagehost[data-page="wallet"] a:hover{text-decoration:underline}
.pagehost[data-page="wallet"] .mono{font-family:Roboto,sans-serif}
.pagehost[data-page="wallet"] .dim{color:var(--dim)}
.pagehost[data-page="wallet"] .up{color:var(--up)}
.pagehost[data-page="wallet"] .down{color:var(--down)}
/* Profit green / loss red in the positions table AND its drawer. Both live inside
   `table.wtab` (the drawer row is a nested `.wtab` row), so `.wtab td{color:var(--ink)}`
   (specificity 0,3,1) OUTWEIGHS a bare `.up`/`.down` (0,3,0) and paints every PnL
   cell --ink. The doubled class lifts these to (0,4,0) so they win over any
   element-level cell colour, in both surfaces, without !important. */
.pagehost[data-page="wallet"] .up.up{color:var(--up)}
.pagehost[data-page="wallet"] .down.down{color:var(--down)}
.pagehost[data-page="wallet"] .num{text-align:right}
.pagehost[data-page="wallet"] .status{color:var(--dim);font:500 13px Roboto;padding:16px 2px}

/* header */
.pagehost[data-page="wallet"] .whead{margin-bottom:16px}
.pagehost[data-page="wallet"] .wtitle{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pagehost[data-page="wallet"] .waddr{font:700 15px Roboto,sans-serif;color:var(--ink);word-break:break-all}
.pagehost[data-page="wallet"] .waddrsub{font:600 12px Roboto,sans-serif;color:var(--faint);word-break:break-all;margin-top:2px}
.pagehost[data-page="wallet"] .wcopybtn{border:1px solid var(--line);background:transparent;color:var(--dim);
  font:600 11px Roboto;padding:3px 9px;border-radius:6px;cursor:pointer}
.pagehost[data-page="wallet"] .wcopybtn:hover{color:var(--ink);border-color:var(--acc)}

/* The landing state at /wallet — one box, centred, nothing else competing with
   it. The watched-wallet bar renders underneath, so a returning reader lands on
   the wallets they already care about rather than an empty field. */
.pagehost[data-page="wallet"] .wfind{max-width:620px;margin:24px auto 28px;text-align:center}
.pagehost[data-page="wallet"] .wfindh{font:800 26px Roboto;color:var(--ink);margin:0 0 8px}
.pagehost[data-page="wallet"] .wfindp{font:500 13.5px Roboto;color:var(--dim);line-height:1.65;margin:0 0 18px}
.pagehost[data-page="wallet"] .wfindf{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pagehost[data-page="wallet"] .wfindi{flex:1 1 340px;min-width:0;border:1px solid var(--line);
  background:var(--glass);color:var(--ink);border-radius:10px;padding:11px 14px;
  font:500 13px Roboto,sans-serif}
.pagehost[data-page="wallet"] .wfindi:focus{outline:none;border-color:var(--acc)}
.pagehost[data-page="wallet"] .wfindb{border:1px solid var(--acc);background:var(--acc);color:var(--accInk);
  font:700 13px Roboto;padding:11px 22px;border-radius:10px;cursor:pointer;flex:none}
.pagehost[data-page="wallet"] .wfindb:hover{filter:brightness(1.08)}
.pagehost[data-page="wallet"] .wfinde{font:600 12.5px Roboto;color:var(--down);margin:12px 0 0}
.pagehost[data-page="wallet"] .wfindn{font:500 12px Roboto;color:var(--faint);margin:18px 0 0;line-height:1.6}

/* ★ watch, and the live marker beside it. The star is OUTLINE until watched and
   fills when it is — the same two states the token list uses, so one symbol
   means one thing across the site. */
.pagehost[data-page="wallet"] .wstar{border:1px solid var(--line);background:transparent;color:var(--dim);
  padding:3px 7px;border-radius:6px;cursor:pointer;line-height:0;display:inline-flex;align-items:center}
.pagehost[data-page="wallet"] .wstar:hover{border-color:var(--acc);color:var(--acc)}
.pagehost[data-page="wallet"] .wstar.on{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.pagehost[data-page="wallet"] .wstar .gico{width:14px;height:14px}
.pagehost[data-page="wallet"] .wlive{font:700 10px Roboto;letter-spacing:.04em;text-transform:uppercase;
  color:var(--up);border:1px solid color-mix(in srgb,var(--up) 40%,transparent);
  padding:2px 7px;border-radius:999px;display:inline-flex;align-items:center;gap:5px}
.pagehost[data-page="wallet"] .wlive::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--up);animation:wlivep 2s ease-in-out infinite}
@keyframes wlivep{0%,100%{opacity:1}50%{opacity:.25}}

/* The watched-wallet bar. One horizontal strip of chips; it scrolls sideways
   rather than wrapping into a block that pushes the page down. */
.pagehost[data-page="wallet"] .wrail{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  overflow-x:auto;padding:0 0 10px;margin:-4px 0 14px;scrollbar-width:thin}
.pagehost[data-page="wallet"] .wrlc{font:700 10px Roboto;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);flex:none}
.pagehost[data-page="wallet"] .wrli{display:inline-flex;align-items:center;gap:7px;flex:none;
  border:1px solid var(--line);background:var(--glass);border-radius:999px;padding:4px 6px 4px 10px}
.pagehost[data-page="wallet"] .wrli.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.pagehost[data-page="wallet"] .wrla{font:600 11px Roboto,sans-serif;color:var(--ink);text-decoration:none}
.pagehost[data-page="wallet"] .wrla:hover{color:var(--acc)}
.pagehost[data-page="wallet"] .wrlv{font:600 11px Roboto;color:var(--dim)}
.pagehost[data-page="wallet"] .wrlp{font:700 11px Roboto}
.pagehost[data-page="wallet"] .wrlp.up{color:var(--up)}
.pagehost[data-page="wallet"] .wrlp.down{color:var(--down)}
.pagehost[data-page="wallet"] .wrlx{border:0;background:transparent;color:var(--faint);cursor:pointer;
  font:700 13px Roboto;line-height:1;padding:0 4px;border-radius:4px}
.pagehost[data-page="wallet"] .wrlx:hover{color:var(--down)}
.pagehost[data-page="wallet"] .wrlnote{font:500 10.5px Roboto;color:var(--faint);flex:none;white-space:nowrap}
/* A live refresh changed the numbers — a brief tint, not a jump, so the page
   never moves under a reader mid-sentence. */
.pagehost[data-page="wallet"] .wpulse{animation:wpulsek 1.1s ease-out 1}
@keyframes wpulsek{0%{background:color-mix(in srgb,var(--acc) 14%,transparent)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){
  .pagehost[data-page="wallet"] .wpulse{animation:none}
  .pagehost[data-page="wallet"] .wlive::before{animation:none}
}

.pagehost[data-page="wallet"] .wtags{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.pagehost[data-page="wallet"] .wtag{font:600 11px Roboto;color:var(--dim);border:1px solid var(--line);
  background:var(--glass);padding:3px 8px;border-radius:999px}
.pagehost[data-page="wallet"] .wtag.val{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.pagehost[data-page="wallet"] .wtag.dev,.pagehost[data-page="wallet"] .wtag.grad{color:var(--up);
  border-color:color-mix(in srgb,var(--up) 45%,transparent)}
/* Burn address — the loudest tag: this is destroyed supply, not a portfolio. */
.pagehost[data-page="wallet"] .wtag.burn{color:var(--down);font-weight:700;
  border-color:color-mix(in srgb,var(--down) 55%,transparent);
  background:color-mix(in srgb,var(--down) 12%,transparent)}

/* the sentence, then the numbers */
.pagehost[data-page="wallet"] .wplain{margin:0 0 14px}
.pagehost[data-page="wallet"] .wplain p{font:500 13.5px Roboto;color:var(--dim);line-height:1.7;margin:0;max-width:80ch}
.pagehost[data-page="wallet"] .wplain b{color:var(--ink);font-weight:700}
.pagehost[data-page="wallet"] .wplain b.up,.pagehost[data-page="wallet"] .wplain .up{color:var(--up)}
.pagehost[data-page="wallet"] .wplain b.down,.pagehost[data-page="wallet"] .wplain .down{color:var(--down)}
.pagehost[data-page="wallet"] .wgap{display:block;margin-top:5px;font-size:12.5px;opacity:.82}
/* The merged PnL card: three label→value rows, value right-aligned and coloured. */
.pagehost[data-page="wallet"] .wpnl{display:flex;flex-direction:column;justify-content:center;gap:7px}
.pagehost[data-page="wallet"] .wpnl .wpr{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pagehost[data-page="wallet"] .wpr .k{font:600 10.5px Roboto;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.pagehost[data-page="wallet"] .wpr .v{font:800 15px Roboto;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.pagehost[data-page="wallet"] .wpr .v.up{color:var(--up)}
.pagehost[data-page="wallet"] .wpr .v.down{color:var(--down)}
/* Best / worst call: compact rows (symbol · signed PnL) inside the last card. */
.pagehost[data-page="wallet"] .wbw{display:flex;flex-direction:column;gap:3px;margin-top:5px}
.pagehost[data-page="wallet"] .wbwr{display:flex;justify-content:space-between;gap:6px;
  font:700 13px Roboto;font-variant-numeric:tabular-nums}
.pagehost[data-page="wallet"] .wbwr .s{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pagehost[data-page="wallet"] .wbwr .s.dim{color:var(--dim)}
.pagehost[data-page="wallet"] .wbwr .v{flex:none}
.pagehost[data-page="wallet"] .wbwr.up .v{color:var(--up)}
.pagehost[data-page="wallet"] .wbwr.down .v{color:var(--down)}

/* Four cards in ONE row on desktop; 2×2 on a phone (Portfolio+XNT, then
   PnL+Best/Worst). */
.pagehost[data-page="wallet"] .wsum{display:grid;grid-template-columns:repeat(4,1fr);
  gap:10px;margin-bottom:20px}
@media(max-width:560px){.pagehost[data-page="wallet"] .wsum{grid-template-columns:repeat(2,1fr)}}
.pagehost[data-page="wallet"] .wcard{border:1px solid var(--line);background:var(--glass);
  border-radius:11px;padding:12px 13px}
.pagehost[data-page="wallet"] .wcard .wk{font:600 11px Roboto;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.pagehost[data-page="wallet"] .wcard .wv{font:800 23px Roboto,sans-serif;color:var(--ink);margin-top:4px;
  font-variant-numeric:tabular-nums}
.pagehost[data-page="wallet"] .wcard.big .wv{font-size:27px}
.pagehost[data-page="wallet"] .wcard .wv.up{color:var(--up)}
.pagehost[data-page="wallet"] .wcard .wv.down{color:var(--down)}
.pagehost[data-page="wallet"] .wcard .wsubv{font:500 11px Roboto;color:var(--dim);margin-top:3px;min-height:14px}

.pagehost[data-page="wallet"] .wsec{margin-bottom:30px}
.pagehost[data-page="wallet"] .wsech{display:flex;align-items:center;gap:12px;margin-bottom:9px;flex-wrap:wrap}
.pagehost[data-page="wallet"] .wsech h2{font:800 15px Roboto;color:var(--ink);margin:0}
.pagehost[data-page="wallet"] .wnote{font:500 12px Roboto;color:var(--dim)}
.pagehost[data-page="wallet"] .whint{font:500 11.5px Roboto;color:var(--dim);margin:9px 2px 0;opacity:.8}
/* Positions pager — rendered above AND below the table (100 per page). */
.pagehost[data-page="wallet"] .wpg{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:9px 0}
.pagehost[data-page="wallet"] .wpgb{background:var(--tableglass);border:1px solid var(--line);color:var(--ink);font:600 11px Roboto;padding:5px 11px;border-radius:7px;cursor:pointer;transition:border-color .15s,background .15s}
.pagehost[data-page="wallet"] .wpgb:hover:not(:disabled){border-color:var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.pagehost[data-page="wallet"] .wpgb:disabled{opacity:.4;cursor:default}
.pagehost[data-page="wallet"] .wpgi{display:inline-flex;align-items:center;gap:5px;color:var(--faint);font:600 11px Roboto;padding:0 6px}
.pagehost[data-page="wallet"] .wpgd{color:var(--faint);opacity:.85;font-weight:500}
/* drawer kind filter (Buys / Sells / Transfers / Burns) — a compact segmented row */
.pagehost[data-page="wallet"] .wdkind{display:flex;gap:4px;flex-wrap:wrap;padding:8px 12px 0}
.pagehost[data-page="wallet"] .wdk{background:var(--tableglass);border:1px solid var(--line);color:var(--ink2,var(--faint));font:600 11px Roboto;padding:4px 10px;border-radius:7px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.pagehost[data-page="wallet"] .wdk:hover{border-color:var(--acc);color:var(--ink)}
.pagehost[data-page="wallet"] .wdk.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc)}

/* filter bar */
/* One divided toolbar — search · Show/Result/Venue dropdowns · time chips · Min $ ·
   Hide dust — separated by hairlines so it reads as a single control, not five
   segmented groups. Wraps gracefully on a narrow screen. */
.pagehost[data-page="wallet"] .wfbar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;
  border:1px solid var(--line);background:var(--glass);border-radius:12px;padding:4px 5px;margin-bottom:16px}
.pagehost[data-page="wallet"] .wfbar2{margin:10px 0 4px}
.pagehost[data-page="wallet"] .wfdiv{width:1px;align-self:stretch;background:var(--line);margin:5px 3px}
/* search */
.pagehost[data-page="wallet"] .wfsearch{display:inline-flex;align-items:center;gap:6px;padding:0 8px;color:var(--dim)}
.pagehost[data-page="wallet"] .wfico{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.7}
.pagehost[data-page="wallet"] .wfsearch input{width:120px;max-width:34vw;border:0;background:transparent;
  color:var(--ink);font:500 12.5px Roboto;padding:7px 0;outline:none}
.pagehost[data-page="wallet"] .wfsearch input::placeholder{color:var(--dim);opacity:.8}
.pagehost[data-page="wallet"] .wfsearch:focus-within{outline:2px solid var(--acc);outline-offset:1px;border-radius:7px}
/* dropdown pills (native <select>, restyled) */
.pagehost[data-page="wallet"] .wfsel{position:relative;display:inline-flex;align-items:center;gap:6px;
  padding:6px 22px 6px 10px;border-radius:8px;cursor:pointer}
.pagehost[data-page="wallet"] .wfsel:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.pagehost[data-page="wallet"] .wfsel .k{color:var(--faint);font:600 11.5px Roboto;letter-spacing:.2px;white-space:nowrap}
.pagehost[data-page="wallet"] .wfsel select{appearance:none;-webkit-appearance:none;border:0;background:transparent;
  color:var(--ink);font:700 12.5px Roboto;cursor:pointer;outline:none;padding:0}
.pagehost[data-page="wallet"] .wfsel select option{background:var(--card);color:var(--ink)}
.pagehost[data-page="wallet"] .wfcar{position:absolute;right:9px;width:6px;height:6px;border-right:1.5px solid var(--dim);
  border-bottom:1.5px solid var(--dim);transform:rotate(45deg) translateY(-1px);pointer-events:none}
.pagehost[data-page="wallet"] .wfsel.act{background:color-mix(in srgb,var(--acc) 13%,transparent)}
.pagehost[data-page="wallet"] .wfsel.act select{color:var(--acc)}
.pagehost[data-page="wallet"] .wfsel.act .wfcar{border-color:var(--acc)}
.pagehost[data-page="wallet"] .wfsel:focus-within{outline:2px solid var(--acc);outline-offset:-1px}
/* time chips */
.pagehost[data-page="wallet"] .wftime{display:inline-flex;gap:1px;border:0}
.pagehost[data-page="wallet"] .wftime .wfchip{border:0;background:transparent;color:var(--dim);
  font:600 12px Roboto;padding:6px 10px;border-radius:7px;cursor:pointer;white-space:nowrap}
.pagehost[data-page="wallet"] .wftime .wfchip:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.pagehost[data-page="wallet"] .wftime .wfchip.on{background:var(--acc);color:var(--accInk);font-weight:700}
.pagehost[data-page="wallet"] .wftime .wfchip:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
/* min $ */
.pagehost[data-page="wallet"] .wfmin{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;
  border-radius:8px;color:var(--faint);cursor:text}
.pagehost[data-page="wallet"] .wfmin .k{font:600 11.5px Roboto;white-space:nowrap}
.pagehost[data-page="wallet"] .wfmin input{width:38px;border:0;background:transparent;color:var(--ink);
  font:700 12.5px Roboto,sans-serif;padding:0;outline:none}
.pagehost[data-page="wallet"] .wfmin:focus-within{outline:2px solid var(--acc);outline-offset:-1px}
.pagehost[data-page="wallet"] .wfmin input::-webkit-outer-spin-button,
.pagehost[data-page="wallet"] .wfmin input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pagehost[data-page="wallet"] .wfmin input[type=number]{-moz-appearance:textfield}
/* hide-dust toggle */
.pagehost[data-page="wallet"] .wftoggle{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;
  color:var(--dim);font:600 12px Roboto;padding:6px 10px;border-radius:7px;cursor:pointer;white-space:nowrap}
.pagehost[data-page="wallet"] .wftoggle:hover{color:var(--ink);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.pagehost[data-page="wallet"] .wftoggle.on{color:var(--acc);background:color-mix(in srgb,var(--acc) 13%,transparent)}
.pagehost[data-page="wallet"] .wftoggle:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
/* clear */
.pagehost[data-page="wallet"] .wfreset{border:0;background:transparent;color:var(--acc);
  font:600 12px Roboto;cursor:pointer;padding:6px 8px;text-decoration:underline;text-underline-offset:2px}

/* tables — scroll inside their own container so the body never goes sideways */
.pagehost[data-page="wallet"] .wtabw{overflow-x:auto}
.pagehost[data-page="wallet"] .wtab{width:100%;border-collapse:collapse;font:500 12.5px Roboto}
.pagehost[data-page="wallet"] .wtab th{font:700 10px Roboto;color:var(--dim);text-align:left;
  padding:7px 9px;border-bottom:1px solid var(--line);white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}
.pagehost[data-page="wallet"] .wtab th.num{text-align:right}
/* Sortable header: click (or Enter/Space) to sort by that column. The active one
   goes accent and shows a ▲/▼; a null cell always sinks to the bottom. */
.pagehost[data-page="wallet"] .wtab th.wsort{cursor:pointer;user-select:none;white-space:nowrap;transition:color .12s}
.pagehost[data-page="wallet"] .wtab th.wsort:hover{color:var(--ink)}
.pagehost[data-page="wallet"] .wtab th.wsort.won{color:var(--acc)}
.pagehost[data-page="wallet"] .wtab th.wsort:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.pagehost[data-page="wallet"] .wsar{font-size:8px;margin-left:2px;vertical-align:1px}
.pagehost[data-page="wallet"] .wtab td{padding:9px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);
  color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.pagehost[data-page="wallet"] .wtab td.num{text-align:right;font-family:Roboto,sans-serif}
.pagehost[data-page="wallet"] .wtab tbody tr:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}

/* "NFTs holding" — a card grid. Each card is a link to the token page with a
   coloured monogram tile (we don't index NFT artwork, so the tile is a stable
   placeholder derived from the mint — no external image fetch). */
.pagehost[data-page="wallet"] .wngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
/* Presentational only — an NFT card is not a link, so no hover-lift or focus
   outline that would signal a click does something (it doesn't). */
.pagehost[data-page="wallet"] .wncard{display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:12px;background:var(--card);text-decoration:none}
.pagehost[data-page="wallet"] .wntile{position:relative;aspect-ratio:1/1;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#fff;font:800 30px Roboto;letter-spacing:-1px}
.pagehost[data-page="wallet"] .wnmono{text-shadow:0 1px 2px rgba(0,0,0,.35)}
/* The real artwork, laid over the monogram placeholder. Hidden until it actually
   loads (opacity:0) — otherwise a mint whose image /api/logo cannot resolve shows
   the browser's broken-image glyph ON TOP of the monogram. wireNftImg() adds
   `.loaded` on a successful load to fade it in; a failing image is removed after
   its retry budget, leaving the monogram tile visible. */
.pagehost[data-page="wallet"] .wnimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:inherit;opacity:0;transition:opacity .2s ease}
.pagehost[data-page="wallet"] .wnimg.loaded{opacity:1}
/* Loading spinner shown on the tile while the artwork is still being fetched into
   the DB (cold miss). Hidden once the image loads (wnok) or the retries give up
   (wndone) — a resolvable NFT shows a spinner then the picture; an unresolvable one
   settles on the monogram. */
.pagehost[data-page="wallet"] .wnspin{position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:wnspin .8s linear infinite;pointer-events:none}
.pagehost[data-page="wallet"] .wntile.wnok .wnspin,
.pagehost[data-page="wallet"] .wntile.wndone .wnspin{display:none}
@keyframes wnspin{to{transform:rotate(360deg)}}
.pagehost[data-page="wallet"] .wnmeta{display:flex;flex-direction:column;gap:2px;padding:10px 11px;min-width:0}
.pagehost[data-page="wallet"] .wnname{font:700 13px Roboto;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pagehost[data-page="wallet"] .wnsub{font:600 11px Roboto;color:var(--dim)}
/* Unrealised (paper) PnL on a buy row — dimmed so it never reads as locked-in.
   Keeps the up/down colour from the parent cell. */
.pagehost[data-page="wallet"] .wpaper{opacity:.68}
.pagehost[data-page="wallet"] .wprow{cursor:pointer}
.pagehost[data-page="wallet"] .wprow:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.pagehost[data-page="wallet"] .wpct{color:var(--dim);font-size:11px}
.pagehost[data-page="wallet"] .wpaid{opacity:.72}
.pagehost[data-page="wallet"] .warr{opacity:.55;font-size:10px;padding:0 1px}
.pagehost[data-page="wallet"] .wcrv{font:700 9px Roboto;color:var(--acc);
  border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);border-radius:4px;padding:1px 4px;margin-left:5px;vertical-align:1px}
.pagehost[data-page="wallet"] .wtwap{font:700 9px Roboto;color:rgba(90,169,230,1);
  border:1px solid rgba(90,169,230,.45);border-radius:4px;padding:1px 4px;margin-left:5px;vertical-align:1px}
.pagehost[data-page="wallet"] .wpart{font:600 10px Roboto;color:var(--dim);margin-left:4px;
  border:1px solid var(--line);border-radius:4px;padding:1px 4px;white-space:nowrap}

/* status: state encoded as form, not only as a number */
.pagehost[data-page="wallet"] .wpill{font:700 9.5px Roboto;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;white-space:nowrap}
.pagehost[data-page="wallet"] .wpill.open{background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc)}
.pagehost[data-page="wallet"] .wpill.closed{background:var(--glass);color:var(--dim)}
.pagehost[data-page="wallet"] .wpill.gift{background:color-mix(in srgb,var(--orange) 16%,transparent);color:var(--orange)}
.pagehost[data-page="wallet"] .wpill.nopx{background:var(--glass);color:var(--dim)}
.pagehost[data-page="wallet"] .wpill.moved{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
/* Scam / thin-liquidity danger: red pill, struck-through fake value, and an
   emphasised summary line. --down is the site's red, so it tracks the theme. */
.pagehost[data-page="wallet"] .wpill.danger{background:color-mix(in srgb,var(--down) 18%,transparent);color:var(--down)}
.pagehost[data-page="wallet"] .wnolq{color:var(--down);font-weight:700;white-space:nowrap}
.pagehost[data-page="wallet"] .wnolq s{opacity:.7}
.pagehost[data-page="wallet"] .wdangertext{display:block;margin-top:7px;color:var(--down);font-weight:600;font-size:12.5px}
.pagehost[data-page="wallet"] .xsi b.wdangerv{color:var(--down)}
.pagehost[data-page="wallet"] .xsi b.wdangerv s{opacity:.7}

/* Sold is a plain, NEUTRAL percentage in the positions table (no gauge, no
   colour): a sale is neither good nor bad, so it must not borrow the loss colour
   or contradict the profit column beside it. */

/* the expandable row.
   The panel itself reuses the token page's .xpanel / .xhead / .xsum / .xsi /
   .xscroll / .xnote — the same drawer the Transactions tab opens — so the two
   surfaces stay identical without a second set of styles to keep in step. Only
   the caret and the drawer cell are page-local.
   NOT reusing .xcar: the global rule is `.xcar,tr.xopen .xcarh{transform:rotate(90deg)}`,
   which rotates every .xcar unconditionally, so a closed row would point down. */
.pagehost[data-page="wallet"] .wcarc{width:16px;padding-right:0!important}
.pagehost[data-page="wallet"] .wcar{display:inline-block;color:var(--dim);font-size:10px;
  transition:transform .15s;user-select:none}
@media (prefers-reduced-motion:reduce){.pagehost[data-page="wallet"] .wcar{transition:none}}
.pagehost[data-page="wallet"] .wprow.wpopen .wcar{transform:rotate(90deg);color:var(--acc)}
.pagehost[data-page="wallet"] .wprow.wpopen>td{background:color-mix(in srgb,var(--acc) 7%,transparent)}
.pagehost[data-page="wallet"] .wpdraw>td{padding:0;border-bottom:1px solid var(--line)}
.pagehost[data-page="wallet"] .wpdraw:hover>td{background:transparent}
/* The drawer's inner table carries NO .wtab — it shares the one expander-table
   style on `.xpanel .xscroll table` (nowrap cells + sticky header included), so
   the token-page expander and this drawer can never drift. */
.pagehost[data-page="wallet"] .txn{font:600 9px Roboto;color:var(--dim);border:1px solid var(--line);
  border-radius:4px;padding:1px 4px;text-decoration:none}
.pagehost[data-page="wallet"] .txn:hover{color:var(--acc);border-color:var(--acc)}

/* the feed, inside the token view */
.pagehost[data-page="wallet"] .wfeed{display:flex;flex-direction:column}
.pagehost[data-page="wallet"] .wdayh{font:700 10.5px Roboto;color:var(--dim);text-transform:uppercase;
  letter-spacing:.06em;padding:15px 2px 6px;border-bottom:1px solid var(--line);margin-bottom:2px}
.pagehost[data-page="wallet"] .wev{display:flex;align-items:baseline;gap:10px;padding:7px 4px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 45%,transparent);font:500 13px Roboto;color:var(--ink)}
.pagehost[data-page="wallet"] .wev:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.pagehost[data-page="wallet"] .wev .wtime{flex:0 0 64px;white-space:nowrap;color:var(--dim);font:500 11.5px Roboto,sans-serif}
.pagehost[data-page="wallet"] .wev .wsent{flex:1 1 auto;line-height:1.55;min-width:0}
.pagehost[data-page="wallet"] .wev .wusd{flex:0 0 auto;color:var(--dim);font:500 12px Roboto,sans-serif;
  text-align:right;font-variant-numeric:tabular-nums}
.pagehost[data-page="wallet"] .wev .wtxl{flex:0 0 22px;text-align:right;font:600 11px Roboto}
.pagehost[data-page="wallet"] .wev .wtxl a{color:var(--dim)}
.pagehost[data-page="wallet"] .wev .wtxl a:hover{color:var(--acc)}

.pagehost[data-page="wallet"] .wmore{margin-top:12px;border:1px solid var(--line);background:transparent;
  color:var(--dim);font:600 12px Roboto;padding:7px 16px;border-radius:8px;cursor:pointer}
.pagehost[data-page="wallet"] .wmore:hover{color:var(--ink);border-color:var(--acc)}
.pagehost[data-page="wallet"] .wnotes{margin-top:34px;border-top:1px solid var(--line);padding-top:14px}
.pagehost[data-page="wallet"] .wnotes summary{font:600 12px Roboto;color:var(--dim);cursor:pointer}
.pagehost[data-page="wallet"] .wnotes p{font:500 12.5px Roboto;color:var(--dim);line-height:1.65;margin:10px 0}
.pagehost[data-page="wallet"] .wnotes b{color:var(--ink)}
.pagehost[data-page="wallet"] .wnotes .wsmall{font-size:11.5px;opacity:.8}

@media (max-width:640px){
  .pagehost[data-page="wallet"] .wev{flex-wrap:wrap;gap:4px 8px}
  .pagehost[data-page="wallet"] .wev .wsent{flex:1 1 100%;order:2}
  .pagehost[data-page="wallet"] .wev .wusd{order:3;margin-left:auto}
  .pagehost[data-page="wallet"] .wtokpl{margin-left:0;width:100%}
}