/* TAUFA Agent Chain explorer. One stylesheet.
   Brand tokens follow minpentaigamefi.xyz (SPEC-TAUFA 3). Light is the default; dark follows the system
   setting unless the visitor picks one with the toggle (html[data-theme]). */

/* ------------------------------------------------------------------ tokens */
:root {
  --page: #f6f4ff; --paper: #fdfcff; --ink: #1d1a3a; --ink2: #3f3b66; --dim: #6e6a8f; --faint: #9a96b9;
  --rule: #e6e1fb; --rule2: #d6cff7;
  --eth: #5b5ee8; --eth2: #4146c9; --deep: #272b6e; --field: #334488;
  --lav: #c9a7f5; --aqua: #33ddee; --lime: #a5ef7a; --pink: #f7a8d0; --peach: #ffcfae; --blue: #8fb6ff; --cyan: #7fe3f0;
  --prism: linear-gradient(90deg, #f7a8d0, #c9a7f5 30%, #8fb6ff 55%, #7fe3f0 78%, #a5ef7a);
  --gain: #16845c; --loss: #c2357a;
  --gain-bg: #e4f5ed; --loss-bg: #fbe7f1; --warn: #8a5300; --warn-bg: #fff1dc; --info-bg: #ecebff;
  --hover: #f3f0ff; --tint: #f0ecff; --tint2: #e9e4ff;
  --skel: #ece8fb; --skel-hi: #f7f5ff;
  --c1: #5b5ee8; --c2: #0e9aa7;
  --grid1: #e9e4fc; --grid2: #f0edfe;
  --idn-bg: #1d1a3a;
  --code-bg: #1d1a3a; --code-ink: #e9e6ff; --code-dim: #a39fc9;
  --shadow: 0 1px 0 rgba(39, 43, 110, .04), 0 12px 32px -20px rgba(39, 43, 110, .28);
  --shadow-lg: 0 2px 0 rgba(39, 43, 110, .04), 0 24px 48px -24px rgba(39, 43, 110, .35);
  --ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --r: 14px; --r-sm: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #100e26; --paper: #17153a; --ink: #ecebff; --ink2: #cfccf2; --dim: #a6a2cf; --faint: #7a76a6;
    --rule: #28255a; --rule2: #37336f;
    --eth: #8c8fff; --eth2: #b0b2ff; --deep: #e4e3ff; --field: #a9b6ff;
    --gain: #46c590; --loss: #f27db6;
    --gain-bg: rgba(70, 197, 144, .14); --loss-bg: rgba(242, 125, 182, .14); --warn: #ffc47e; --warn-bg: rgba(255, 196, 126, .12); --info-bg: rgba(140, 143, 255, .14);
    --hover: #1e1b47; --tint: #211e4c; --tint2: #2a2660;
    --skel: #221f4a; --skel-hi: #2d2a5c;
    --c1: #7376f2; --c2: #16a0ad;
    --grid1: rgba(201, 167, 245, .06); --grid2: rgba(201, 167, 245, .03);
    --idn-bg: #0c0a20;
    --code-bg: #0b0a1d; --code-ink: #e9e6ff; --code-dim: #8f8bbd;
    --shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 14px 32px -22px rgba(0, 0, 0, .7);
    --shadow-lg: 0 2px 0 rgba(0, 0, 0, .25), 0 28px 50px -26px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #100e26; --paper: #17153a; --ink: #ecebff; --ink2: #cfccf2; --dim: #a6a2cf; --faint: #7a76a6;
  --rule: #28255a; --rule2: #37336f;
  --eth: #8c8fff; --eth2: #b0b2ff; --deep: #e4e3ff; --field: #a9b6ff;
  --gain: #46c590; --loss: #f27db6;
  --gain-bg: rgba(70, 197, 144, .14); --loss-bg: rgba(242, 125, 182, .14); --warn: #ffc47e; --warn-bg: rgba(255, 196, 126, .12); --info-bg: rgba(140, 143, 255, .14);
  --hover: #1e1b47; --tint: #211e4c; --tint2: #2a2660;
  --skel: #221f4a; --skel-hi: #2d2a5c;
  --c1: #7376f2; --c2: #16a0ad;
  --grid1: rgba(201, 167, 245, .06); --grid2: rgba(201, 167, 245, .03);
  --idn-bg: #0c0a20;
  --code-bg: #0b0a1d; --code-ink: #e9e6ff; --code-dim: #8f8bbd;
  --shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 14px 32px -22px rgba(0, 0, 0, .7);
  --shadow-lg: 0 2px 0 rgba(0, 0, 0, .25), 0 28px 50px -26px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }
body {
  margin: 0; min-height: 100vh; color: var(--ink); background-color: var(--page);
  font: 500 14px/1.5 var(--ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background-image:
    linear-gradient(to right, var(--grid1) 1px, transparent 1px), linear-gradient(to bottom, var(--grid1) 1px, transparent 1px),
    linear-gradient(to right, var(--grid2) 1px, transparent 1px), linear-gradient(to bottom, var(--grid2) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px, 16px 16px, 16px 16px;
  overflow-x: hidden;
}
body.modal-open { overflow: hidden; }
a { color: var(--eth2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
code, kbd, pre { font-family: var(--mono); }
code { font-size: .92em; padding: .1em .38em; border-radius: 6px; background: var(--tint); color: var(--ink2); }
h1, h2, h3 { margin: 0; color: var(--deep); }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--eth); outline-offset: 2px; border-radius: 4px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.brk { word-break: break-all; overflow-wrap: anywhere; }
.dim { color: var(--dim); }
.small { font-size: 12.5px; }
.pad { padding: 16px 20px; }
.pad0 { margin: 0; }
.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--deep); color: #fff; font-weight: 700; }
.skip:focus { top: 12px; }
.eyebrow { margin: 0 0 8px; font: 800 11px/1.2 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--eth); }

/* ------------------------------------------------------------------ devnet banner */
.devnet {
  position: relative; z-index: 41; color: #3c2a10;
  background: repeating-linear-gradient(135deg, #ffe2c8 0 14px, #ffd8b4 14px 28px);
  border-bottom: 1px solid #f4c39a; font-size: 12.5px;
}
:root[data-theme="dark"] .devnet { color: #ffe6c8; background: repeating-linear-gradient(135deg, #3a2614 0 14px, #432c17 14px 28px); border-color: #5a3b1d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .devnet { color: #ffe6c8; background: repeating-linear-gradient(135deg, #3a2614 0 14px, #432c17 14px 28px); border-color: #5a3b1d; } }
.devnet-in { display: flex; align-items: center; gap: 12px; min-height: 34px; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.devnet b { font: 800 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: #3c2a10; color: #ffe2c8; }
:root[data-theme="dark"] .devnet b { background: #ffd8b4; color: #3a2614; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .devnet b { background: #ffd8b4; color: #3a2614; } }
.devnet-rpc { margin-left: auto; opacity: .85; }

/* ------------------------------------------------------------------ header */
.top {
  position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 90%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--prism); }
.top-row { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; flex: none; }
.brand:hover { text-decoration: none; }
.brand .logo { width: 36px; height: 36px; border-radius: 9px; flex: none; box-shadow: 0 6px 16px -8px rgba(39, 43, 110, .6); }
.word { display: flex; flex-wrap: wrap; align-items: baseline; line-height: 1.05; white-space: pre; }
.word > b { font: 800 17px/1.05 var(--ui); letter-spacing: -.01em; color: var(--deep); }
.word > b + span { font: 600 17px/1.05 var(--ui); letter-spacing: -.01em; color: var(--deep); }
.word small { flex-basis: 100%; margin-top: 4px; font: 700 10.5px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }

.search { position: relative; flex: 1 1 auto; max-width: 560px; margin: 0 auto; }
.search input {
  width: 100%; height: 42px; padding: 0 42px 0 42px; border-radius: 12px; border: 1px solid var(--rule2);
  background: var(--page); color: var(--ink); font: 500 14px/1 var(--ui); transition: border-color .15s, box-shadow .15s, background .15s;
}
.search input::placeholder { color: var(--faint); }
.search input:focus { outline: none; border-color: var(--eth); background: var(--paper); box-shadow: 0 0 0 4px color-mix(in srgb, var(--eth) 18%, transparent); }
.search input::-webkit-search-cancel-button { display: none; }
.search-i { position: absolute; left: 14px; top: 12px; color: var(--dim); pointer-events: none; }
.kbd { position: absolute; right: 10px; top: 10px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border: 1px solid var(--rule2); border-bottom-width: 2px; border-radius: 6px; font: 600 11px/1 var(--mono); color: var(--dim); background: var(--paper); }
.search input:focus ~ .kbd { display: none; }
.sugg { position: absolute; left: 0; right: 0; top: 48px; z-index: 60; padding: 6px; border: 1px solid var(--rule2); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow-lg); }
.sg { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ink); }
.sg:hover, .sg.on { background: var(--hover); text-decoration: none; }
.sg-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--tint); color: var(--eth); flex: none; }
.sg-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.sg-t { font: 700 10.5px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }

.top-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.head-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--rule2); background: var(--paper); color: var(--ink); font-size: 12.5px; white-space: nowrap;
}
.head-pill:hover { text-decoration: none; border-color: var(--eth); }
.head-pill .hp-l { color: var(--dim); font-weight: 600; }
.head-pill b { font-size: 13px; font-weight: 600; min-width: 62px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gain); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gain) 22%, transparent); flex: none; }
.head-pill.tick .dot { animation: tick .9s ease-out; }
.head-pill.stale .dot { background: #e0a43a; box-shadow: 0 0 0 3px rgba(224, 164, 58, .22); }
.head-pill.none .dot { background: var(--faint); box-shadow: none; }
@keyframes tick { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gain) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--r-sm);
  border: 1px solid var(--rule2); background: var(--paper); color: var(--ink); font: 700 13.5px/1 var(--ui); cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.btn:hover { text-decoration: none; border-color: var(--eth); background: var(--hover); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; }
.btn .i { width: 17px; height: 17px; }
.btn-primary { border-color: transparent; background: var(--eth); color: #fff; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--eth) 85%, transparent); }
.btn-primary:hover { background: var(--eth2); border-color: transparent; color: #fff; }
:root[data-theme="dark"] .btn-primary { background: #6a6df0; }
:root[data-theme="dark"] .btn-primary:hover { background: #5b5ee8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary { background: #6a6df0; } :root:not([data-theme="light"]) .btn-primary:hover { background: #5b5ee8; } }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 20px; font-size: 14.5px; border-radius: 12px; }
.btn-icon { width: 34px; padding: 0; }
.icon-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--rule2); border-radius: 10px; background: var(--paper); color: var(--ink2); cursor: pointer; }
.icon-btn:hover { border-color: var(--eth); color: var(--eth); }
.icon-btn .sun { display: none; }
:root[data-theme="dark"] .icon-btn .sun { display: block; }
:root[data-theme="dark"] .icon-btn .moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icon-btn .sun { display: block; } :root:not([data-theme="light"]) .icon-btn .moon { display: none; } }
.menu-btn { display: none; }

.nav { border-top: 1px solid var(--rule); }
.nav-in { display: flex; gap: 2px; height: 44px; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.nav-in::-webkit-scrollbar { display: none; }
.nav a { position: relative; display: flex; align-items: center; padding: 0 12px; font: 700 13.5px/1 var(--ui); color: var(--dim); white-space: nowrap; }
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a.on { color: var(--deep); }
.nav a.on::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--prism); }
.nav a.nav-build { margin-left: auto; color: var(--eth2); }

/* ------------------------------------------------------------------ status strip */
.strip { font-size: 13px; border-bottom: 1px solid var(--rule); }
.strip-in { display: flex; gap: 10px; align-items: center; padding-top: 9px; padding-bottom: 9px; }
.strip-warn { background: var(--warn-bg); color: var(--warn); }
.strip-bad { background: var(--loss-bg); color: var(--loss); }

/* ------------------------------------------------------------------ main layout */
main { display: block; padding: 28px 0 56px; min-height: 60vh; }
main:focus { outline: none; }
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 4px 0 22px; flex-wrap: wrap; }
.ph-main { min-width: 0; flex: 1 1 520px; }
.ph h1 { font: 800 30px/1.15 var(--ui); letter-spacing: -.025em; color: var(--deep); }
.ph-sub { margin-top: 10px; max-width: 760px; color: var(--dim); font-size: 14.5px; line-height: 1.55; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ph-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.ph-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.h-hash { font-size: 26px; letter-spacing: -.03em; }
.ph h1 .num { font-family: var(--ui); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.ph h1 .mono { font-size: inherit; }
.h-addr, .h-agent, .h-tok, .h-pair { display: flex; align-items: center; gap: 14px; }
.h-addr .idn, .h-agent .idn, .h-tok .idn { border-radius: 12px; box-shadow: var(--shadow); }
.h-id { font: 600 22px/1 var(--mono); color: var(--dim); letter-spacing: -.03em; }
.h-name { font: 600 18px/1 var(--ui); color: var(--dim); letter-spacing: 0; margin-left: 4px; }
.q { color: var(--eth2); }
.chip-i {
  display: inline-block; min-height: 30px; padding: 5px 11px; border-radius: 999px; line-height: 18px; white-space: nowrap;
  background: var(--paper); border: 1px solid var(--rule); color: var(--ink2); font-size: 12.5px; font-weight: 600;
}
.chip-i > .i { width: 15px; height: 15px; color: var(--eth); vertical-align: -3px; margin-right: 6px; }
.chip-i .chip-ag, .chip-i .ad { margin-left: 4px; }
.chip-i b { color: var(--ink); }

.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; }
.grid2 > .card { margin-bottom: 0; }
.grid2.grid-top { align-items: start; }
.grid-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.grid-main > .card { margin-bottom: 20px; }
.grid-side { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; align-items: start; }
.grid-side > .card, .grid-side > div > .card { margin-bottom: 0; }
.grid-side > div { display: grid; gap: 20px; min-width: 0; }
.grid-chart { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.stack { display: grid; gap: 20px; }

/* ------------------------------------------------------------------ cards */
.card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: 20px; min-width: 0; overflow: hidden; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--rule); }
.card-t { display: flex; align-items: center; gap: 12px; min-width: 0; }
.card-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--tint); color: var(--eth); flex: none; }
.card-ic .i { width: 17px; height: 17px; }
.card-h h2 { font: 800 15px/1.25 var(--ui); color: var(--ink); letter-spacing: -.01em; }
.card-h p { margin-top: 2px; font-size: 12.5px; color: var(--dim); }
.card-a { display: flex; align-items: center; gap: 8px; flex: none; }
.card-b { padding: 18px 20px; }
.card-b.flush { padding: 0; }
.linkish { padding: 0; border: 0; background: none; font: inherit; color: var(--eth2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-more { display: inline-flex; align-items: center; gap: 4px; font: 700 12.5px/1 var(--ui); color: var(--eth2); white-space: nowrap; }
.link-more .i { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ hero (overview) */
.hero { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 32px; align-items: stretch; margin: 6px 0 26px; }
.hero-text { padding: 18px 0 8px; display: flex; flex-direction: column; justify-content: center; }
.hero h1 { font: 800 clamp(32px, 3.9vw, 50px)/1.06 var(--ui); letter-spacing: -.035em; color: var(--deep); max-width: 15ch; }
.grad { background: linear-gradient(90deg, #5b5ee8, #8f6ff0 48%, #1d9fb0); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="dark"] .grad { background-image: linear-gradient(90deg, #a5a7ff, #c9a7f5 50%, #7fe3f0); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grad { background-image: linear-gradient(90deg, #a5a7ff, #c9a7f5 50%, #7fe3f0); } }
.lede { margin-top: 18px; max-width: 60ch; font-size: 15.5px; line-height: 1.62; color: var(--ink2); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 24px 0 0; padding: 0; list-style: none; color: var(--dim); font-size: 13px; }
.hero-facts li { display: flex; align-items: center; gap: 7px; }
.hero-facts li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--prism); }
.hero-facts b { color: var(--ink); font-family: var(--mono); font-weight: 600; letter-spacing: -.02em; }

.burn-card {
  position: relative; padding: 22px 24px 18px; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-lg); isolation: isolate;
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.burn-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 18px; padding: 1.5px; background: var(--prism); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.burn-card::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: 18px; background: radial-gradient(420px 220px at 12% 0%, color-mix(in srgb, var(--pink) 22%, transparent), transparent 70%), radial-gradient(420px 260px at 100% 100%, color-mix(in srgb, var(--cyan) 20%, transparent), transparent 70%), var(--paper); }
.bc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bc-l { display: inline-flex; align-items: center; gap: 8px; font: 800 12px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.bc-l .i { color: #e0609d; }
.live-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: var(--gain-bg); color: var(--gain); font: 800 10.5px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; }
.live-tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.6s ease-in-out infinite; }
.live-tag.paused { background: var(--warn-bg); color: var(--warn); }
@keyframes blink { 50% { opacity: .25; } }
.bc-v { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.bc-num { font: 800 clamp(30px, 3.4vw, 44px)/1 var(--ui); letter-spacing: -.035em; color: var(--deep); font-variant-numeric: tabular-nums; }
.bc-u { font: 800 15px/1 var(--ui); color: var(--dim); letter-spacing: .02em; }
.bc-sub { font-size: 13px; color: var(--dim); }
.bc-sub b { color: var(--gain); font-family: var(--mono); font-weight: 600; }
.bc-bar { position: relative; height: 8px; border-radius: 999px; background: var(--tint2); overflow: hidden; margin: 6px 0 2px; }
.bc-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--prism); transition: width .8s ease; }
.bc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bc-grid > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; background: var(--page); border: 1px solid var(--rule); min-width: 0; }
.bc-k { font: 700 11.5px/1.2 var(--ui); color: var(--dim); }
.bc-grid b { font: 600 17px/1.2 var(--mono); letter-spacing: -.03em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.bc-grid small { font-size: 11.5px; color: var(--faint); }
.bc-chart { margin-top: 2px; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 76px; }
.bc-ct { display: flex; justify-content: space-between; font: 700 11px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.bc-spark { flex: 1 1 auto; min-height: 52px; }
.bc-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font: 700 12.5px/1 var(--ui); }
.bc-link .i { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ stat tiles */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { position: relative; padding: 14px 14px 12px; background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); min-width: 0; transition: border-color .15s, transform .15s; }
.stat[data-go] { cursor: pointer; }
.stat[data-go]:hover { border-color: var(--rule2); transform: translateY(-1px); }
.stat-l { display: flex; align-items: center; gap: 7px; font: 700 12px/1.2 var(--ui); color: var(--dim); white-space: nowrap; overflow: hidden; }
.stat-l > span { overflow: hidden; text-overflow: ellipsis; }
.stat-l .i { width: 15px; height: 15px; color: var(--eth); }
.live-dot { width: 6px; height: 6px; margin-left: auto; border-radius: 50%; background: var(--gain); animation: blink 1.6s ease-in-out infinite; flex: none; }
.stat-v { margin-top: 10px; font: 800 22px/1.15 var(--ui); letter-spacing: -.03em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 26px; }
.stat-v .num { font-family: var(--ui); font-variant-numeric: normal; letter-spacing: -.03em; }
.stat-v .amt .num { font-family: var(--ui); }
.stat-v .unit, .unit-s { margin-left: 5px; font: 700 12px/1 var(--ui); color: var(--dim); letter-spacing: 0; }
.stat-s { margin-top: 4px; font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-spark { margin-top: 6px; height: 34px; }

/* ------------------------------------------------------------------ lists (overview) */
.list { display: flex; flex-direction: column; }
.li {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(0, 1.25fr) auto; align-items: center; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--rule); min-height: 64px;
}
.li:last-child { border-bottom: 0; }
.li[data-go] { cursor: pointer; }
.li[data-go]:hover { background: var(--hover); }
.li-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--tint); color: var(--eth); }
.li-ic .i { width: 18px; height: 18px; }
.li-main, .li-mid, .li-end { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.li-end { align-items: flex-end; text-align: right; }
.li-t { font-weight: 700; font-size: 14px; color: var(--eth2); }
.li-main .age, .li-sub { font-size: 12px; color: var(--dim); }
.li-k { font: 700 10.5px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.li-flow { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.li-flow > * { min-width: 0; }
.arr { display: inline-grid; place-items: center; color: var(--faint); flex: none; }
.arr .i { width: 14px; height: 14px; }
.li-block .li-t { font-size: 15px; }
.li-tx { grid-template-columns: 38px minmax(112px, .7fr) minmax(0, 1.7fr) auto; }
.li-flow .chip-n { max-width: 84px; }
.li-2 { grid-template-columns: minmax(0, 1fr) auto; }
.li-tx .li-ic.k-swap { color: #7a4fd8; background: color-mix(in srgb, var(--lav) 28%, transparent); }
.li-tx .li-ic.k-deploy { color: #b5641f; background: color-mix(in srgb, var(--peach) 45%, transparent); }
.li-tx .li-ic.k-bridge { color: #2f7d2a; background: color-mix(in srgb, var(--lime) 35%, transparent); }
.li-tx .li-ic.k-announce { color: #b8336f; background: color-mix(in srgb, var(--pink) 35%, transparent); }
.li-tx .li-ic.k-transfer { color: #1f7f8c; background: color-mix(in srgb, var(--cyan) 32%, transparent); }
.li-sys { grid-template-columns: minmax(0, 1fr) auto; min-height: 56px; }
.li-sys b { font-size: 13.5px; color: var(--ink); }
.li-sys .li-end { flex-direction: row; align-items: center; gap: 4px; }
.li-res { grid-template-columns: 38px minmax(0, 1fr) auto; }
.li-ann { grid-template-columns: 38px minmax(0, 1fr); align-items: start; }
.ann-k { font: 800 10.5px/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--eth); }
.ann-t { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.list-tape .li, .li-trade { grid-template-columns: 74px minmax(0, 1fr) minmax(0, 1fr) auto; }
.burn-amt .num { color: var(--ink); }

/* new-row flash */
.is-new { animation: arrive 1.8s ease-out; }
@keyframes arrive {
  0% { background: color-mix(in srgb, var(--eth) 16%, transparent); transform: translateY(-4px); opacity: .4; }
  25% { transform: none; opacity: 1; }
  100% { background: transparent; }
}
.tr-buy.is-new { animation-name: arrive-buy; }
.tr-sell.is-new { animation-name: arrive-sell; }
@keyframes arrive-buy { 0% { background: color-mix(in srgb, var(--gain) 22%, transparent); transform: translateY(-4px); opacity: .4; } 25% { transform: none; opacity: 1; } 100% { background: transparent; } }
@keyframes arrive-sell { 0% { background: color-mix(in srgb, var(--loss) 20%, transparent); transform: translateY(-4px); opacity: .4; } 25% { transform: none; opacity: 1; } 100% { background: transparent; } }

/* feed */
.feed { display: flex; flex-direction: column; }
.feed .li { border-bottom: 1px solid var(--rule); }
.feed-i { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--rule); align-items: start; }
.feed-i:last-child { border-bottom: 0; }
.feed-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); color: var(--eth); }
.feed-ic .i { width: 16px; height: 16px; }
.feed-i.k-join .feed-ic { background: color-mix(in srgb, var(--lime) 35%, transparent); color: #2f7d2a; }
.feed-i.k-deploy .feed-ic, .feed-i.k-token .feed-ic { background: color-mix(in srgb, var(--peach) 45%, transparent); color: #b5641f; }
.feed-i.k-pair .feed-ic, .feed-i.k-trade .feed-ic { background: color-mix(in srgb, var(--lav) 30%, transparent); color: #7a4fd8; }
.feed-i.k-exit .feed-ic, .feed-i.k-burnSync .feed-ic { background: color-mix(in srgb, var(--pink) 35%, transparent); color: #b8336f; }
:root[data-theme="dark"] .feed-i.k-join .feed-ic { color: #a5ef7a; } :root[data-theme="dark"] .feed-i.k-deploy .feed-ic, :root[data-theme="dark"] .feed-i.k-token .feed-ic { color: #ffcfae; } :root[data-theme="dark"] .feed-i.k-pair .feed-ic, :root[data-theme="dark"] .feed-i.k-trade .feed-ic { color: #c9a7f5; } :root[data-theme="dark"] .feed-i.k-exit .feed-ic, :root[data-theme="dark"] .feed-i.k-burnSync .feed-ic { color: #f7a8d0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .feed-i.k-join .feed-ic { color: #a5ef7a; } :root:not([data-theme="light"]) .feed-i.k-deploy .feed-ic, :root:not([data-theme="light"]) .feed-i.k-token .feed-ic { color: #ffcfae; } :root:not([data-theme="light"]) .feed-i.k-pair .feed-ic, :root:not([data-theme="light"]) .feed-i.k-trade .feed-ic { color: #c9a7f5; } :root:not([data-theme="light"]) .feed-i.k-exit .feed-ic, :root:not([data-theme="light"]) .feed-i.k-burnSync .feed-ic { color: #f7a8d0; } }
.feed-b p { font-size: 13.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.feed-m { display: flex; gap: 10px; align-items: center; margin-top: 3px; font-size: 12px; color: var(--dim); flex-wrap: wrap; }
.feed-l { display: inline-flex; gap: 10px; }
.feed-l a { font-weight: 700; }

/* ------------------------------------------------------------------ chips, links, pills */
.ad, .chip-ag, .tok, .pairl { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; color: var(--eth2); vertical-align: middle; }
.ad .mono { font-size: 12.5px; white-space: nowrap; }
.ad .sys { font-weight: 700; }
.idn { flex: none; border-radius: 4px; }
.idn-bg { fill: var(--idn-bg); }
.chip-ag { padding: 2px 8px 2px 3px; border-radius: 999px; background: var(--tint); color: var(--ink); font-weight: 700; font-size: 12.5px; }
.chip-ag:hover { background: var(--tint2); text-decoration: none; }
.chip-ag .idn { border-radius: 50%; }
.chip-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.chip-id { font-family: var(--mono); font-size: 11.5px; font-weight: 500; color: var(--dim); }
.tok { font-weight: 700; color: var(--ink); }
.tok small { font-weight: 500; color: var(--dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tok:hover, .pairl:hover { text-decoration: none; color: var(--eth2); }
.pairl { font-weight: 700; color: var(--ink); white-space: nowrap; }
.pair-ic { display: inline-flex; flex: none; }
.pair-ic .idn + .idn { margin-left: -6px; box-shadow: 0 0 0 2px var(--paper); border-radius: 4px; }
.pair-ic-lg .idn { border-radius: 10px; }
.pair-ic-lg .idn + .idn { margin-left: -12px; box-shadow: 0 0 0 3px var(--page); }
.slash { margin: 0 3px; color: var(--faint); font-weight: 500; }
.hl { color: var(--eth2); white-space: nowrap; }
.ext { display: inline-flex; align-items: center; gap: 4px; }
.i-ext { width: 13px; height: 13px; opacity: .7; }
.more { margin-left: 6px; font: 700 11px/1 var(--mono); color: var(--dim); padding: 3px 6px; border-radius: 999px; background: var(--tint); }
.unk { color: var(--faint); cursor: help; }
.amt { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.unit { font: 700 10.5px/1 var(--ui); letter-spacing: .04em; color: var(--dim); }
.created { display: inline-flex; align-items: center; gap: 6px; color: var(--dim); font-size: 12.5px; }
.created .i { width: 15px; height: 15px; color: #b5641f; }

.pill { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font: 700 11.5px/1 var(--ui); background: var(--tint); color: var(--ink2); white-space: nowrap; }
.pill .i { width: 13px; height: 13px; }
.pill.k-transfer { background: color-mix(in srgb, var(--cyan) 30%, transparent); color: #17707c; }
.pill.k-call { background: var(--tint); color: var(--eth2); }
.pill.k-deploy { background: color-mix(in srgb, var(--peach) 50%, transparent); color: #9a5216; }
.pill.k-swap { background: color-mix(in srgb, var(--lav) 34%, transparent); color: #6a3fcc; }
.pill.k-bridge { background: color-mix(in srgb, var(--lime) 38%, transparent); color: #2b6e27; }
.pill.k-announce { background: color-mix(in srgb, var(--pink) 38%, transparent); color: #a32a62; }
:root[data-theme="dark"] .pill.k-transfer { color: #8ff0fb; } :root[data-theme="dark"] .pill.k-deploy { color: #ffc89a; } :root[data-theme="dark"] .pill.k-swap { color: #d9c2ff; } :root[data-theme="dark"] .pill.k-bridge { color: #bff59c; } :root[data-theme="dark"] .pill.k-announce { color: #ffc0de; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pill.k-transfer { color: #8ff0fb; } :root:not([data-theme="light"]) .pill.k-deploy { color: #ffc89a; } :root:not([data-theme="light"]) .pill.k-swap { color: #d9c2ff; } :root:not([data-theme="light"]) .pill.k-bridge { color: #bff59c; } :root:not([data-theme="light"]) .pill.k-announce { color: #ffc0de; } }
.mk { display: inline-flex; align-items: center; gap: 6px; max-width: 210px; height: 26px; padding: 0 9px 0 7px; border-radius: 8px; background: var(--page); border: 1px solid var(--rule); font: 500 11.5px/1 var(--mono); color: var(--ink2); white-space: nowrap; vertical-align: middle; }
.mk span { overflow: hidden; text-overflow: ellipsis; }
.mk .i { width: 14px; height: 14px; flex: none; color: var(--eth); }
.mk.k-transfer .i { color: #1f8f9d; } .mk.k-deploy .i { color: #b5641f; } .mk.k-swap .i { color: #7a4fd8; } .mk.k-bridge .i { color: #2f7d2a; } .mk.k-announce .i { color: #b8336f; }
:root[data-theme="dark"] .mk.k-transfer .i { color: #7fe3f0; } :root[data-theme="dark"] .mk.k-deploy .i { color: #ffcfae; } :root[data-theme="dark"] .mk.k-swap .i { color: #c9a7f5; } :root[data-theme="dark"] .mk.k-bridge .i { color: #a5ef7a; } :root[data-theme="dark"] .mk.k-announce .i { color: #f7a8d0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mk.k-transfer .i { color: #7fe3f0; } :root:not([data-theme="light"]) .mk.k-deploy .i { color: #ffcfae; } :root:not([data-theme="light"]) .mk.k-swap .i { color: #c9a7f5; } :root:not([data-theme="light"]) .mk.k-bridge .i { color: #a5ef7a; } :root:not([data-theme="light"]) .mk.k-announce .i { color: #f7a8d0; } }
.method { display: inline-block; max-width: 170px; padding: 3px 8px; border-radius: 7px; background: var(--page); border: 1px solid var(--rule); font: 500 11.5px/1.3 var(--mono); color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font: 700 12px/1 var(--ui); white-space: nowrap; }
.badge .i { width: 14px; height: 14px; }
.badge.big { height: 34px; padding: 0 14px; font-size: 13px; }
.b-ok { background: var(--gain-bg); color: var(--gain); }
.b-bad { background: var(--loss-bg); color: var(--loss); }
.b-warn { background: var(--warn-bg); color: var(--warn); }
.b-info { background: var(--info-bg); color: var(--eth2); }
.b-na { background: var(--tint); color: var(--dim); }
.st { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none; }
.st .i { width: 12px; height: 12px; stroke-width: 2.6; }
.st-ok { background: var(--gain-bg); color: var(--gain); }
.st-fail { background: var(--loss-bg); color: var(--loss); }
.st-na { background: var(--tint); color: var(--faint); }
.txh { display: inline-flex; align-items: center; gap: 8px; }
.side { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px 0 7px; border-radius: 8px; font: 800 11.5px/1 var(--ui); letter-spacing: .02em; white-space: nowrap; }
.side .i { width: 14px; height: 14px; stroke-width: 2.4; }
.side.buy { background: var(--gain-bg); color: var(--gain); }
.side.sell { background: var(--loss-bg); color: var(--loss); }
.side.na { background: var(--tint); color: var(--dim); }
.src { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font: 700 11.5px/1 var(--ui); background: var(--warn-bg); color: var(--warn); }
.ok-t { display: inline-flex; align-items: center; gap: 5px; color: var(--gain); }
.ok-t .i { width: 14px; height: 14px; }

.copy { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: 4px; border: 0; border-radius: 7px; background: transparent; color: var(--faint); cursor: pointer; vertical-align: middle; flex: none; }
.copy:hover { background: var(--tint); color: var(--eth); }
.copy .i { width: 15px; height: 15px; }
.copy .i-ok { display: none; color: var(--gain); }
.copy.done .i-ok { display: block; }
.copy.done .i-copy { display: none; }

/* ------------------------------------------------------------------ tables */
.tbl-wrap { width: 100%; overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { padding: 11px 12px; text-align: left; font: 800 10.5px/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); background: color-mix(in srgb, var(--page) 70%, var(--paper)); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.tbl td { padding: 12px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th:first-child, .tbl td:first-child { padding-left: 20px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 20px; }
.tbl .r { text-align: right; }
.tbl tbody tr[data-go] { cursor: pointer; }
.tbl tbody tr[data-go]:hover td { background: var(--hover); }
.tbl td .num { font-size: 12.5px; }
.tbl td .age { color: var(--dim); font-size: 12.5px; }
.tbl-c td { padding-top: 10px; padding-bottom: 10px; }
.tbl-folded .more-row { display: none; }
.tbl td[colspan] { white-space: normal; padding: 0; }
.tbl-tape td { padding-top: 10px; padding-bottom: 10px; }
.gas { display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 8px; justify-content: start; }
.gas .meter { grid-column: 1 / -1; width: 100%; min-width: 96px; }
.gas-p { font: 600 11px/1 var(--mono); color: var(--dim); }
.res { display: inline-block; line-height: 1.5; text-align: right; }
.share { display: inline-flex; align-items: center; gap: 8px; }
.share .meter { width: 90px; }
.meter { position: relative; display: inline-block; height: 6px; border-radius: 999px; background: var(--tint2); overflow: hidden; vertical-align: middle; }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--c1); }
.meter-na { width: 60px; opacity: .5; }
.m-gas i { background: var(--prism); }
.m-wide { width: 160px; margin-left: 4px; }

/* ------------------------------------------------------------------ key/value */
.kv { margin: 0; display: grid; }
.kv-r { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--rule); align-items: center; }
.kv-r:first-child { padding-top: 0; }
.kv-r:last-child { border-bottom: 0; padding-bottom: 0; }
.kv dt { color: var(--dim); font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; }
.kv dd { margin: 0; min-width: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; overflow-wrap: anywhere; }
.help { display: inline-grid; color: var(--faint); cursor: help; }
.help .i { width: 14px; height: 14px; }
.wallets { display: grid; gap: 6px; }
.kv-modal .kv-r { grid-template-columns: 150px minmax(0, 1fr); }

/* fee split */
.split { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); }
.split-bar { display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; background: var(--tint2); }
.split-bar i { display: block; height: 100%; }
.split-bar i.s1 { background: var(--c1); border-radius: 6px 0 0 6px; }
.split-bar i.s2 { background: var(--c2); border-radius: 0 6px 6px 0; }
.split-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 10px; font-size: 12.5px; color: var(--dim); }
.split-legend span { display: inline-flex; align-items: center; gap: 7px; }
.split-legend b { color: var(--ink); font-weight: 600; }
.lg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.lg.s1 { background: var(--c1); }
.lg.s2 { background: var(--c2); }
.legend { display: inline-flex; gap: 14px; font-size: 12.5px; color: var(--dim); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }

/* logs */
.logs { display: grid; gap: 12px; }
.log { border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--page) 55%, var(--paper)); }
.log-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.log-i { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--tint); color: var(--dim); font-size: 11.5px; }
.log-n { font-weight: 800; color: var(--ink); }
.log-a { margin-left: auto; font-size: 12.5px; color: var(--dim); display: inline-flex; align-items: center; gap: 6px; }
.args { margin-top: 10px; display: grid; gap: 6px; }
.arg { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; font-size: 13px; align-items: center; }
.arg-n { font: 600 12px/1.3 var(--mono); color: var(--dim); }
.arg-v { min-width: 0; overflow-wrap: anywhere; }
.argtext { white-space: pre-wrap; }
.raw { margin-top: 10px; }
.raw summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--eth2); }
.raw-b { display: grid; gap: 6px; margin-top: 8px; font-size: 12px; }
.raw-b > div { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; }
.code-raw { margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--code-bg); color: var(--code-ink); font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all; max-height: 260px; overflow: auto; }

/* ------------------------------------------------------------------ tabs, pager, notes, states */
.tabs { display: flex; gap: 6px; margin: 0 0 16px; padding: 4px; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule); width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border-radius: 9px; font: 700 13px/1 var(--ui); color: var(--dim); white-space: nowrap; }
.tab:hover { color: var(--ink); background: var(--hover); text-decoration: none; }
.tab.on { background: var(--deep); color: var(--paper); }
:root[data-theme="dark"] .tab.on { background: #5b5ee8; color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tab.on { background: #5b5ee8; color: #fff; } }
.tab-n { font: 600 11px/1 var(--mono); opacity: .7; }
.tab-n:empty { display: none; }
.card-h-tabs { flex-wrap: wrap; }
.seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 11px; background: var(--page); border: 1px solid var(--rule); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg-b { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; font: 700 12.5px/1 var(--ui); color: var(--dim); cursor: pointer; white-space: nowrap; }
.seg-b:hover { color: var(--ink); background: var(--hover); }
.seg-b.on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(39, 43, 110, .12), 0 0 0 1px var(--rule2); }
.tabp[hidden] { display: none; }
.card-kv2 .kv { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px; }
.card-kv2 .kv-r:nth-last-child(2):nth-child(odd) { border-bottom: 0; padding-bottom: 0; }
.card-kv2 .kv-r:nth-child(2) { padding-top: 0; }
.pager { display: flex; justify-content: center; padding: 14px; border-top: 1px solid var(--rule); }
.pager-end { color: var(--faint); font-size: 12.5px; }
.note { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 20px; font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.note .i { width: 15px; height: 15px; margin-top: 1px; color: var(--faint); }
.card-b .note { margin: 14px 0 0; }

.sk { display: inline-block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--skel) 0, var(--skel-hi) 40%, var(--skel) 80%); background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; vertical-align: middle; }
.sk-v { width: 60%; height: 22px; }
.sk-ic { width: 38px; height: 38px; border-radius: 10px; }
.sk-block { display: block; width: 100%; border-radius: var(--r); margin-bottom: 20px; }
.sk-row .li-main .sk { height: 11px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.empty { padding: 40px 24px; text-align: center; color: var(--dim); }
.empty-ic { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: var(--tint); color: var(--eth); }
.empty-ic .i { width: 24px; height: 24px; }
.empty h3 { font: 800 16px/1.3 var(--ui); color: var(--ink); margin-bottom: 6px; }
.empty p { max-width: 460px; margin: 0 auto; font-size: 13.5px; line-height: 1.55; }
.err-box { display: flex; align-items: flex-start; gap: 14px; margin: 16px; padding: 16px 18px; border-radius: 12px; background: var(--loss-bg); color: var(--ink); }
.err-box > .i { color: var(--loss); width: 22px; height: 22px; flex: none; margin-top: 1px; }
.err-box > div { flex: 1; min-width: 0; }
.err-box b { display: block; font-size: 14px; }
.err-box p { margin-top: 3px; font-size: 13px; color: var(--ink2); overflow-wrap: anywhere; }
.err-box .err-hint { color: var(--dim); }
.nf { max-width: 640px; margin: 48px auto; text-align: center; }
.nf-ic { width: 56px; height: 56px; color: var(--lav); }
.nf h1 { margin: 12px 0 8px; font: 800 28px/1.2 var(--ui); }
.nf p { color: var(--dim); margin-bottom: 16px; line-height: 1.6; }

/* ------------------------------------------------------------------ charts */
.chart { width: 100%; min-height: 120px; }
.chart:focus-visible { outline-offset: 4px; }
.chart-svg { display: block; overflow: visible; }
.chart-none { display: grid; place-items: center; text-align: center; color: var(--dim); font-size: 13px; border: 1px dashed var(--rule2); border-radius: 12px; padding: 16px; }
.c-grid { stroke: var(--rule); stroke-width: 1; shape-rendering: crispEdges; }
.c-axis { stroke: var(--rule2); stroke-width: 1; shape-rendering: crispEdges; }
.c-lbl { fill: var(--dim); font: 500 10.5px var(--mono); }
.c-y { text-anchor: end; }
.c-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-line.s1 { stroke: var(--c1); } .c-line.s2 { stroke: var(--c2); }
.c-area { stroke: none; }
.c-area.s1 { fill: var(--c1); fill-opacity: .1; } .c-area.s2 { fill: var(--c2); fill-opacity: .1; }
.c-end, .c-hdot { stroke: var(--paper); stroke-width: 2; }
.c-end.s1, .c-hdot.s1 { fill: var(--c1); } .c-end.s2, .c-hdot.s2 { fill: var(--c2); }
.c-cross { stroke: var(--faint); stroke-width: 1; pointer-events: none; }
.c-bar.s1 { fill: var(--c1); } .c-bar.s2 { fill: var(--c2); }
.c-bhit { cursor: crosshair; }
.c-bhit.on { fill: color-mix(in srgb, var(--eth) 8%, transparent); }
.c-hit { cursor: crosshair; }
.c-wick.up { stroke: var(--gain); } .c-wick.down { stroke: var(--loss); }
.c-wick { stroke-width: 1.2; }
.c-candle.up { fill: var(--paper); stroke: var(--gain); stroke-width: 1.4; }
.c-candle.down { fill: var(--loss); stroke: var(--loss); stroke-width: 1; }
.tip { position: fixed; z-index: 80; pointer-events: none; min-width: 140px; max-width: 280px; padding: 9px 11px; border-radius: 10px; background: var(--deep); color: #fff; box-shadow: var(--shadow-lg); font-size: 12px; }
:root[data-theme="dark"] .tip { background: #2e2a66; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tip { background: #2e2a66; } }
.tip-t { font: 700 11px/1.3 var(--ui); opacity: .75; margin-bottom: 5px; }
.tip-r { display: flex; align-items: center; gap: 7px; margin-top: 3px; }
.tip-r b { font: 600 12.5px/1.2 var(--mono); }
.tip-r span { opacity: .75; }
.tip-k { width: 12px; height: 3px; border-radius: 2px; background: #fff; flex: none; }
.tip-k.s1 { background: #8f92ff; } .tip-k.s2 { background: #3fc7d4; } .tip-k.up { background: #46c590; } .tip-k.down { background: #f27db6; }

/* ------------------------------------------------------------------ network band (overview) */
.net-band { margin-top: 4px; border-radius: 18px; padding: 24px 26px; background: radial-gradient(600px 240px at 0% 0%, rgba(201, 167, 245, .35), transparent 60%), radial-gradient(500px 240px at 100% 100%, rgba(127, 227, 240, .28), transparent 60%), var(--deep); color: #ecebff; box-shadow: var(--shadow-lg); }
:root[data-theme="dark"] .net-band { background: radial-gradient(600px 240px at 0% 0%, rgba(201, 167, 245, .22), transparent 60%), radial-gradient(500px 240px at 100% 100%, rgba(127, 227, 240, .16), transparent 60%), #1f1c4c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .net-band { background: radial-gradient(600px 240px at 0% 0%, rgba(201, 167, 245, .22), transparent 60%), radial-gradient(500px 240px at 100% 100%, rgba(127, 227, 240, .16), transparent 60%), #1f1c4c; } }
.net-in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 22px; align-items: center; }
.net-band .eyebrow { color: #c9a7f5; }
.net-band h2 { color: #fff; font: 800 22px/1.2 var(--ui); letter-spacing: -.02em; }
.net-band .dim { color: #c9c6ef; margin-top: 6px; }
.net-band .dim b { color: #fff; }
.net-rpc { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
.net-k { font: 800 10.5px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #c9a7f5; flex: none; }
.net-rpc code { background: transparent; color: #fff; padding: 0; font-size: 13px; min-width: 0; }
.net-rpc .copy { color: #c9c6ef; }
.net-rpc .copy:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.net-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.net-band .btn:not(.btn-primary) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .28); }
.net-band .btn:not(.btn-primary):hover { background: rgba(255, 255, 255, .08); }
.net-band .btn-primary { background: #fff; color: var(--deep); }
:root[data-theme="dark"] .net-band .btn-primary { background: #fff; color: #1d1a3a; }

/* ------------------------------------------------------------------ bridge / burn / build */
.check-card { margin-bottom: 20px; padding: 22px 24px; border-radius: 18px; background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.check-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--prism); }
.check-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.check-h h2 { font: 800 20px/1.25 var(--ui); letter-spacing: -.02em; }
.check-h .dim { margin-top: 6px; max-width: 70ch; line-height: 1.55; }
.eq { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.2fr); gap: 14px; align-items: stretch; margin-top: 20px; }
.eq-i { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--page); border: 1px solid var(--rule); min-width: 0; }
.eq-i b .num { font: 700 20px/1.2 var(--ui); letter-spacing: -.03em; }
.eq-i .amt { flex-wrap: wrap; }
.eq-k { font: 700 12px/1.2 var(--ui); color: var(--dim); }
.eq-op { display: grid; place-items: center; font: 600 24px/1 var(--mono); color: var(--faint); }
.eq-gap { background: color-mix(in srgb, var(--lav) 14%, var(--paper)); }
.eq-parts { font-size: 12px; color: var(--dim); line-height: 1.45; }
.check-f { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--rule); font-size: 12.5px; color: var(--dim); }
.check-f span { display: inline-flex; align-items: center; gap: 6px; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr); gap: 10px; align-items: stretch; margin-bottom: 20px; }
.flow-i { padding: 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.flow-i b { display: block; margin: 10px 0 4px; font-size: 14px; color: var(--ink); }
.flow-i p { font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.flow-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--tint); color: var(--eth); }
.flow-a { display: grid; place-items: center; color: var(--faint); }
.flow-a .i { width: 18px; height: 18px; }

.burn-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; margin-bottom: 20px; padding: 24px 26px; border-radius: 18px; background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.burn-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--prism); }
.bh-main { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.bh-k { display: inline-flex; align-items: center; gap: 7px; font: 700 12.5px/1.2 var(--ui); color: var(--dim); }
.bh-k .i { color: #e0609d; width: 17px; height: 17px; }
.bh-v { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bh-v .bc-num { font-size: clamp(32px, 4vw, 52px); }
.bh-s { font-size: 13px; color: var(--dim); }
.bh-s b { color: var(--gain); font-family: var(--mono); font-weight: 600; }
.bh-side { display: grid; gap: 12px; }
.bh-side > div { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--page); border: 1px solid var(--rule); }
.bh-side b { font: 600 20px/1.2 var(--mono); letter-spacing: -.03em; color: var(--ink); }
.bh-side small { font-size: 12px; color: var(--faint); }

.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.step-n { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--deep); color: var(--paper); font: 800 13px/1 var(--ui); }
:root[data-theme="dark"] .step-n { background: #5b5ee8; color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .step-n { background: #5b5ee8; color: #fff; } }
.steps b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 3px; }
.steps p { font-size: 13.5px; color: var(--dim); line-height: 1.55; overflow-wrap: anywhere; }

.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 20px; }
.toc a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule2); background: var(--paper); font: 700 12.5px/1 var(--ui); color: var(--ink2); }
.toc a:hover { border-color: var(--eth); color: var(--eth); text-decoration: none; }
.sec { margin-top: 28px; scroll-margin-top: 140px; }
.sec-h { margin-bottom: 16px; }
.sec-h h2 { font: 800 24px/1.2 var(--ui); letter-spacing: -.02em; }
.sec-h .dim { margin-top: 6px; max-width: 80ch; line-height: 1.55; }
#bNet { scroll-margin-top: 140px; }
.code { border-radius: 14px; overflow: hidden; background: var(--code-bg); border: 1px solid var(--rule); box-shadow: var(--shadow); min-width: 0; }
.code-h { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px 8px 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); font: 600 12px/1 var(--mono); color: var(--code-dim); }
.code-h .copy { color: var(--code-dim); }
.code-h .copy:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.code pre { margin: 0; padding: 16px; overflow-x: auto; font-size: 12.5px; line-height: 1.7; color: var(--code-ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.code code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* ------------------------------------------------------------------ verify (static) */
.verify { padding: 4px 0 40px; display: none; }
html:not(.js) .verify, body[data-route="home"] .verify, body[data-route="build"] .verify { display: block; }
.verify-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; padding: 26px 28px; border-radius: 18px; background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.verify-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--prism); }
.verify-intro h2 { font: 800 24px/1.2 var(--ui); letter-spacing: -.02em; margin-bottom: 8px; }
.verify-intro > p { color: var(--dim); line-height: 1.55; }
.verify-kv { margin: 18px 0 0; display: grid; gap: 0; }
.verify-kv > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--rule); font-size: 13px; }
.verify-kv > div:last-child { border-bottom: 0; }
.verify-kv dt { color: var(--dim); font-weight: 600; }
.verify-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.verify-steps { margin: 0; padding: 0 0 0 20px; display: grid; gap: 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink2); }
.verify-steps b { color: var(--ink); }
.verify-steps pre { margin: 8px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--code-bg); color: var(--code-ink); font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.verify-steps pre code { background: none; color: inherit; padding: 0; }
.nojs { padding: 40px 0 8px; }
html:not(.js) main { min-height: 0; padding-bottom: 24px; }
html:not(.js) .search, html:not(.js) .top-actions { display: none; }
.nojs h1 { font: 800 30px/1.2 var(--ui); margin-bottom: 10px; }
.nojs p { max-width: 640px; color: var(--dim); line-height: 1.6; }

/* ------------------------------------------------------------------ footer */
.foot { border-top: 1px solid var(--rule); background: var(--paper); position: relative; }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--prism); opacity: .8; }
.foot-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px; padding-top: 36px; padding-bottom: 40px; }
.brand-foot .logo { width: 32px; height: 32px; }
.brand-foot .word { max-width: none; }
.foot-note { margin-top: 14px; max-width: 360px; font-size: 13.5px; line-height: 1.55; color: var(--ink2); }
.foot-small { margin-top: 8px; font-size: 12px; color: var(--dim); }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.foot-cols > div { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.foot-cols h3 { font: 800 11px/1.2 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; }
.foot-cols a { font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.foot-cols a:hover { color: var(--eth); }
.foot-dim { font-size: 13px; color: var(--faint); }
.foot-addr { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; font-weight: 600; color: var(--ink2); }
.foot-addr code { align-self: flex-start; padding: 0; background: none; font-size: 11px; font-weight: 500; color: var(--faint); }

/* ------------------------------------------------------------------ toast, modal */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translate(-50%, 16px); opacity: 0; padding: 11px 16px; border-radius: 12px; background: var(--deep); color: #fff; font-weight: 600; font-size: 13.5px; box-shadow: var(--shadow-lg); transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast-ok { background: #13734f; }
.toast-bad { background: #a52a66; }
:root[data-theme="dark"] .toast { background: #2e2a66; }
.modal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; }
.modal[hidden] { display: none; }
.modal-bg { position: absolute; inset: 0; background: rgba(16, 14, 38, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-card { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 26px 26px 22px; border-radius: 18px; background: var(--paper); border: 1px solid var(--rule); box-shadow: var(--shadow-lg); }
.modal-card:focus { outline: none; }
.modal-card h2 { font: 800 20px/1.25 var(--ui); margin: 0 36px 10px 0; }
.modal-card > p { color: var(--ink2); font-size: 13.5px; line-height: 1.55; margin-bottom: 14px; }
.modal-x { position: absolute; right: 14px; top: 14px; }

/* ------------------------------------------------------------------ responsive */
@media (max-width: 1180px) {
  .top-row { gap: 14px; }
  .word small { display: none; }
  .wallet-btn span { display: none; }
  .wallet-btn { width: 38px; padding: 0; }
  .eq { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .eq .eq-op:nth-of-type(4), .eq-gap { grid-column: 1 / -1; }
  .eq-op:nth-child(4) { display: none; }
  .flow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .flow-a { display: none; }
}
@media (max-width: 1040px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hero h1 { max-width: 20ch; }
  .grid2, .grid-wide, .grid-side, .grid-chart { grid-template-columns: minmax(0, 1fr); }
  .card-kv2 .kv { grid-template-columns: minmax(0, 1fr); }
  .card-kv2 .kv-r:nth-child(2) { padding-top: 11px; }
  .net-in { grid-template-columns: minmax(0, 1fr); }
  .verify-card { grid-template-columns: minmax(0, 1fr); }
  .foot-in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .head-pill .hp-l { display: none; }
}
@media (max-width: 860px) {
  .wrap { padding: 0 20px; }
  .top-row { height: 60px; }
  .search { order: 5; flex: 1 0 100%; max-width: none; margin: 0 0 10px; }
  .top-row { flex-wrap: wrap; height: auto; padding-top: 10px; row-gap: 10px; }
  .top-actions { margin-left: auto; }
  .kbd { display: none; }
  .menu-btn { display: inline-grid; }
  .nav { display: none; }
  .top.menu-open .nav { display: block; }
  .nav-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; padding-top: 8px; padding-bottom: 12px; gap: 2px; overflow: visible; }
  .nav a { height: 42px; padding: 0 12px; border-radius: 10px; }
  .nav a.on { background: var(--tint); }
  .nav a.on::after { left: 0; top: 10px; bottom: 10px; right: auto; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  .nav a.nav-build { margin-left: 0; }
  .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kv-r { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .kv-r dt { font-size: 12px; }
  .li, .li-tx { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .li-2 { grid-template-columns: minmax(0, 1fr) auto; }
  .li .li-mid { grid-column: 2 / -1; grid-row: 2; }
  .li-trade, .list-tape .li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .li-trade .li-mid { grid-column: 1 / -1; }
  .ph h1 { font-size: 26px; }
  .h-hash { font-size: 22px; }
  /* tables turn into stacked cards */
  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tr { padding: 12px 16px; border-bottom: 1px solid var(--rule); }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl td { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 5px 0; border: 0; white-space: normal; text-align: right; min-height: 30px; }
  .tbl td:first-child, .tbl td:last-child { padding-left: 0; padding-right: 0; }
  .tbl td::before { content: attr(data-label); margin-right: auto; padding-right: 12px; font: 700 10.5px/1.2 var(--ui); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); text-align: left; flex: none; }
  .tbl td.r { text-align: right; }
  .tbl td.hide-sm { display: none; }
  .tbl td > * { min-width: 0; }
  .tbl td[colspan] { display: block; padding: 0; }
  .tbl td[colspan]::before { display: none; }
  .tbl .sk-row td::before { display: none; }
  .tbl tbody tr[data-go]:hover td { background: transparent; }
  .tbl tbody tr[data-go]:hover { background: var(--hover); }
  .gas { justify-items: end; }
  .gas .meter { min-width: 80px; width: 80px; }
  .res { text-align: right; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  main { padding-top: 20px; }
  .word > b, .word > b + span { font-size: 16px; }
  .head-pill { padding: 0 10px; }
  .head-pill b { min-width: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stats-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-3 .stat:last-child { grid-column: 1 / -1; }
  .stat-v { font-size: 20px; }
  .hero h1 { font-size: 33px; }
  .lede { font-size: 14.5px; }
  .hero-cta .btn { width: 100%; }
  .burn-card { padding: 18px 16px 14px; }
  .bc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .bc-grid b { font-size: 15px; }
  .card-h { padding: 14px 16px; }
  .card-b { padding: 16px; }
  .li { padding: 12px 16px; gap: 10px; }
  .feed-i { padding: 12px 16px; }
  .devnet-rpc { display: none; }
  .devnet-in { gap: 8px; font-size: 12px; }
  .stat-v { white-space: normal; }
  .stat-v .amt { display: inline; }
  .stat-v .unit { white-space: nowrap; }
  .seg { flex-wrap: wrap; }
  .tabs { width: 100%; }
  .ph-actions { width: 100%; }
  .eq { grid-template-columns: minmax(0, 1fr); }
  .eq-op { display: none; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .burn-hero { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .verify-card { padding: 20px 18px; }
  .verify-kv > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arg { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .log-a { margin-left: 0; }
  .net-band { padding: 20px 18px; }
  .check-card { padding: 18px 16px; }
  .h-addr .idn, .h-agent .idn, .h-tok .idn { width: 40px; height: 40px; }
}
@media (max-width: 420px) {
  .top .word > b + span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .split-bar i, .meter i, .bc-bar i { forced-color-adjust: none; }
}