/* @tokens-start */
/* TOKENS: the only file in the project allowed to hold color literals.

   PROVENANCE (measured by scripts/brand-scan.mjs, enforced by scripts/gates.mjs)
   - anchor "brand": rgb(0,211,72), the most common pixel (94.97%) of brand/LOGO ZYNS PNG.png
                     = oklch(0.7545 0.2287 146.29)
   - anchor "white": rgb(255,255,255), the wordmark pixels of the same file
                     = oklch(1 0 146.29)
   - every other token is DERIVED: hue fixed at the measured brand hue 146.29, lightness and
     chroma chosen per role, chroma never above the brand's 0.2287. No other hue appears.

   Every value is an OKLCH triplet with an optional alpha. */
:root {
  /* anchors, straight from the logo pixels */
  --brand: oklch(0.7545 0.2287 146.29);
  --white: oklch(1 0 146.29);

  /* derived neutrals and tints at the brand hue */
  --bg: oklch(0.974 0.016 146.29);
  --bg-deep: oklch(0.945 0.03 146.29);
  --surface: var(--white);
  --ink: oklch(0.24 0.045 146.29);
  --ink-strong: oklch(0.17 0.04 146.29);
  --muted: oklch(0.5 0.05 146.29);
  --faint: oklch(0.66 0.045 146.29);
  --disabled: oklch(0.74 0.035 146.29);
  --accent-ink: oklch(0.46 0.14 146.29);
  --brand-soft: oklch(0.7545 0.2287 146.29 / 0.16);
  --brand-glow: oklch(0.7545 0.2287 146.29 / 0.34);
  --on-brand: var(--ink-strong);
  --on-ink: var(--white);

  --line: oklch(0.24 0.045 146.29 / 0.12);
  --line-soft: oklch(0.9 0.025 146.29);
  --chip: oklch(0.24 0.045 146.29 / 0.06);
  --chip-strong: oklch(0.24 0.045 146.29 / 0.1);
  --hover: oklch(0.7545 0.2287 146.29 / 0.1);
  --seg-ink-off: oklch(0.24 0.045 146.29 / 0.5);
  --scrim: oklch(0.17 0.04 146.29 / 0.4);
  --flash-up: oklch(0.7545 0.2287 146.29 / 0.3);
  --flash-down: oklch(0.24 0.045 146.29 / 0.12);
  --spot: oklch(0.7545 0.2287 146.29 / 0.14);
  --spot-edge: oklch(0.7545 0.2287 146.29 / 0.55);
  --mesh-a: oklch(0.7545 0.2287 146.29 / 0.3);
  --mesh-b: oklch(0.82 0.15 146.29 / 0.34);
  --mesh-c: oklch(1 0 146.29 / 0.9);
  --beam: oklch(0.7545 0.2287 146.29 / 0.95);
  --beam-soft: oklch(0.7545 0.2287 146.29 / 0.22);
  --skel: oklch(0.24 0.045 146.29 / 0.07);
  --skel-hi: oklch(0.24 0.045 146.29 / 0.13);
  --bg-glass: oklch(0.974 0.016 146.29 / 0.84);
  --surface-glass: oklch(1 0 146.29 / 0.7);

  --shadow-card: 0 4px 8px 0 oklch(0.24 0.045 146.29 / 0.03), 0 8px 12px 0 oklch(0.24 0.045 146.29 / 0.03), 0 0 0 0.5px oklch(0.9 0.025 146.29) inset;
  --shadow-lift: 0 14px 34px -10px oklch(0.4 0.12 146.29 / 0.28), 0 2px 6px oklch(0.24 0.045 146.29 / 0.06);
  --shadow-pill: 0 1px 2px oklch(0.24 0.045 146.29 / 0.06), 0 2px 4px oklch(0.24 0.045 146.29 / 0.03), 0 0 0 0.5px oklch(0.24 0.045 146.29 / 0.1);
  --shadow-side: 0 0.5px 0 0 oklch(0.9 0.025 146.29) inset;
  --shadow-brand: 0 10px 28px -8px oklch(0.7545 0.2287 146.29 / 0.55);
}

/* @tokens-end */
/* Structure and motion. No color literals here: every color comes from tokens.css. */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, Roboto, sans-serif;
  --font-head: "SF Pro Rounded", ui-rounded, -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-pop: cubic-bezier(0.34, 1.45, 0.64, 1);
  --t-press: 0.11s;
  --t-quick: 0.15s;
  --t-fast: 0.25s;
  --t-medium: 0.35s;
  --t-slow: 0.4s;
  --t-vslow: 0.5s;
  --stagger: 40ms;
  --side-w: 262px;
  --pad: 28px;
  --head-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body {
  font: 15px/1.4667 var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
.sr-only, .sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 12px; }

.skip { position: fixed; left: 12px; top: -64px; z-index: 100; min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 9999px; background: var(--ink); color: var(--on-ink); font-weight: 600; font-size: 14px; transition: top var(--t-quick) var(--ease); }
.skip:focus { top: 12px; }

/* progress */
.progress { position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 90; background: var(--brand); box-shadow: 0 0 12px var(--brand-glow); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; pointer-events: none; }

/* shell */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100dvh; }
.col { min-width: 0; }

/* sidebar */
.side { position: sticky; top: 0; height: 100dvh; background: var(--surface); display: flex; flex-direction: column; z-index: 60; min-height: 0; }
.side-top { height: 60px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 20px; }
.side .side-close { display: none; }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; border-radius: 8px; transition: transform var(--t-press) var(--ease); }
.brand:active { transform: scale(0.97); }
.brand { color: var(--ink-strong); }
.wordmark { display: block; height: 22px; width: auto; fill: currentColor; }
.mark { display: block; width: 100%; height: 100%; }
.mark rect { fill: var(--brand); }
.mark path { fill: var(--white); }

.pinned { flex: none; display: grid; justify-items: center; gap: 4px; padding: 14px 20px 10px; }
.pinned__tile { width: 56px; height: 56px; border-radius: 28%; overflow: hidden; display: block; box-shadow: var(--shadow-brand); }
.pinned__name { font: 600 14px/20px var(--font-ui); margin-top: 2px; }
.pinned__meta { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 12px; color: var(--muted); }
.chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9999px; background: var(--brand-soft); color: var(--accent-ink); font: 600 10px/1 var(--font-ui); letter-spacing: 0.02em; white-space: nowrap; }

/* segmented control (measured: pill white, 0.15s) */
.seg { position: relative; display: inline-flex; align-items: center; padding: 4px; border-radius: 9999px; background: var(--chip); }
.seg__pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 9999px; background: var(--surface); box-shadow: var(--shadow-pill); transition: transform var(--t-fast) var(--ease), width var(--t-fast) var(--ease); }
.seg__item { position: relative; z-index: 1; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 9999px; font: 500 13px/1 var(--font-ui); color: var(--seg-ink-off); transition: color var(--t-quick) var(--ease), transform var(--t-press) var(--ease); }
.seg__item[aria-selected="true"] { color: var(--ink); }
.seg__item:active { transform: scale(0.97); }
.side-sort { margin: 6px 12px 0; display: flex; }
.side-sort .seg__item { flex: 1; padding: 0 8px; }

.side-group { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 4px; font-size: 12px; line-height: 18px; color: var(--muted); }
.side-list { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 0 12px 8px; scrollbar-width: thin; }
.side-list [data-skel] { position: absolute; left: 12px; right: 12px; top: 0; }
.side-bottom { flex: none; display: flex; gap: 10px; align-items: center; padding: 12px 16px 16px; box-shadow: var(--shadow-side); }
.circle { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 9999px; background: var(--chip-strong); color: var(--muted); transition: background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease), transform var(--t-press) var(--ease); }
.circle:hover { color: var(--ink); background: var(--line); }
.circle:active { transform: scale(0.94); }
.cta { flex: 1; min-height: 44px; border-radius: 9999px; background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-brand); font: 600 13px/1 var(--font-ui); display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; white-space: nowrap; transition: transform var(--t-press) var(--ease), background-color var(--t-quick) var(--ease); }
.cta:active { transform: scale(0.98); }
.cta[aria-disabled="true"] { background: var(--chip-strong); color: var(--muted); box-shadow: none; cursor: default; }
.cta[aria-disabled="true"]:active { transform: none; }

/* status pill + live dot */
.pill { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px; border-radius: 9999px; background: var(--chip); font: 500 12px/1 var(--font-ui); color: var(--ink); white-space: nowrap; }
.dot { position: relative; width: 6px; height: 6px; border-radius: 9999px; background: var(--brand); flex: none; display: inline-block; }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--brand); opacity: 0; animation: ping 1.8s var(--ease) infinite; }
.pill[data-state="retry"] .dot, .pill[data-state="load"] .dot { background: var(--faint); }
.pill[data-state="retry"] .dot::after, .pill[data-state="load"] .dot::after { background: var(--faint); }
.pill[data-state="error"] .dot, .pill[data-state="inert"] .dot { background: var(--disabled); border-radius: 1px; }
.pill[data-state="error"] .dot::after, .pill[data-state="inert"] .dot::after { animation: none; }
@keyframes ping { 0% { opacity: 0.55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.6); } }

/* header: CA slot, socials */
.head { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px var(--pad); background: var(--bg-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.head__menu, .head__brand { display: none; }
.head__ca { min-width: 0; }
.head__social { display: flex; gap: 8px; justify-self: end; }
.social { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 9999px; background: var(--chip-strong); color: var(--ink); transition: background-color var(--t-quick) var(--ease), transform var(--t-press) var(--ease); }
.social svg { width: 18px; height: 18px; }
a.social:hover { background: var(--line); }
a.social:active { transform: scale(0.94); }
.social.is-inert { color: var(--disabled); background: var(--chip); cursor: default; }

.ca { position: relative; width: 100%; max-width: 760px; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 8px 8px 18px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-card); text-align: left; transition: transform var(--t-press) var(--ease), box-shadow var(--t-quick) var(--ease); }
.ca__label { flex: none; padding: 5px 10px; border-radius: 9999px; background: var(--brand-soft); font: 600 12px/1.2 var(--font-ui); color: var(--accent-ink); }
.ca__value { flex: 1; min-width: 0; font: 600 22px/1.25 var(--font-mono); letter-spacing: -0.01em; overflow-wrap: anywhere; word-break: break-all; }
.ca__pending { flex: 1; font: 600 22px/1.25 var(--font-head); letter-spacing: -0.01em; color: var(--faint); }
.ca__copy { flex: none; min-width: 44px; height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 12px; background: var(--chip-strong); font: 600 12px/1 var(--font-ui); color: var(--ink); transition: background-color var(--t-quick) var(--ease); }
.ca__copy svg { width: 16px; height: 16px; }
button.ca { cursor: pointer; }
button.ca:hover .ca__copy { background: var(--line); }
button.ca:active { transform: scale(0.995); }
.ca.is-inert { cursor: default; }
.ca.is-done .ca__copy { background: var(--brand); color: var(--on-brand); }
.ca__copy { background: var(--brand-soft); }

/* hero (measured: padding 108/24/48, mark 96, h1 34/650, sub 14, card r24) */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 72px 24px 48px; text-align: center; }
.mesh, .rings { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mesh__layer, .rings__layer { position: absolute; inset: 0; will-change: transform; }
.blob { position: absolute; border-radius: 9999px; filter: blur(70px); }
.blob--a { width: 520px; height: 520px; left: -140px; top: -160px; background: radial-gradient(circle, var(--mesh-a), transparent 70%); animation: drift-a 19s ease-in-out infinite alternate; }
.blob--b { width: 460px; height: 460px; right: -120px; top: 20px; background: radial-gradient(circle, var(--mesh-b), transparent 70%); animation: drift-b 23s ease-in-out infinite alternate; }
.blob--c { width: 420px; height: 420px; left: 38%; bottom: -220px; background: radial-gradient(circle, var(--mesh-c), transparent 70%); animation: drift-a 29s ease-in-out infinite alternate-reverse; }
@keyframes drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(80px, 50px, 0) scale(1.18); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-90px, 40px, 0) scale(0.92); } }
.rings__svg { position: absolute; left: 50%; top: 50%; width: 800px; height: 800px; margin: -400px 0 0 -400px; fill: none; stroke: var(--line); stroke-width: 1; }
.rings__z { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; fill: none; stroke: var(--line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.hero__body { position: relative; max-width: 592px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero__mark { width: 96px; height: 96px; border-radius: 28%; overflow: hidden; display: block; box-shadow: var(--shadow-brand); transition: transform var(--t-slow) var(--ease); }
.hero__mark:hover { transform: rotate(-4deg) scale(1.04); }
h1 { margin-top: 24px; font: 650 34px/1.18 var(--font-head); letter-spacing: -0.02em; text-wrap: balance; }
.sub { margin-top: 10px; max-width: 420px; font-size: 14px; line-height: 22px; color: var(--muted); text-wrap: balance; }

.composer { width: 100%; margin-top: 28px; }
.composer__beam { position: relative; border-radius: 24px; }
.composer__card { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100px; padding: 16px 16px 16px 22px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-card); transition: box-shadow var(--t-quick) var(--ease); }
.composer__input { width: 100%; height: 44px; padding: 10px 0; border: 0; outline: 0; background: transparent; font-size: 16px; line-height: 24px; text-align: left; }
.composer__input::placeholder { color: var(--faint); opacity: 1; }
.send { align-self: flex-end; width: 44px; height: 44px; border-radius: 9999px; display: grid; place-items: center; background: var(--disabled); color: var(--on-ink); transition: background-color var(--t-quick) var(--ease), transform var(--t-press) var(--ease); }
.send:active { transform: scale(0.94); }
.composer.has-text .send { background: var(--brand); color: var(--on-brand); }
@property --beam-angle { syntax: "<angle>"; initial-value: 0deg; inherits: true; }
.composer__beam::after { content: ""; position: absolute; inset: 0; border-radius: 24px; padding: 1.5px; pointer-events: none; opacity: 0; background: conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, var(--beam-soft) 60%, var(--beam) 66%, var(--beam-soft) 72%, transparent 78%, transparent 100%); -webkit-mask: linear-gradient(var(--ink) 0 0) content-box, linear-gradient(var(--ink) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--ink) 0 0) content-box exclude, linear-gradient(var(--ink) 0 0); transition: opacity 0.6s ease; }
.composer__beam:focus-within::after { opacity: 1; animation: beam-spin 3.4s linear infinite; }
@keyframes beam-spin { to { --beam-angle: 360deg; } }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; margin-top: 4px; }
.chip-btn { min-height: 44px; padding: 6px 0; display: inline-flex; align-items: center; }
.chip-btn span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 9999px; background: var(--chip); font-size: 12px; color: var(--muted); transition: background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease), transform var(--t-press) var(--ease); }
.chip-btn:hover span { background: var(--chip-strong); color: var(--ink); }
.chip-btn:active span { transform: scale(0.96); }
.chip-btn[aria-pressed="true"] span { background: var(--ink); color: var(--on-ink); }

/* ticker */
.ticker { overflow: hidden; border-block: 0.5px solid var(--line); background: var(--surface-glass); -webkit-mask-image: linear-gradient(90deg, transparent, var(--ink) 5%, var(--ink) 95%, transparent); mask-image: linear-gradient(90deg, transparent, var(--ink) 5%, var(--ink) 95%, transparent); }
.ticker__track { display: flex; width: max-content; animation: marquee 56s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.tick { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; font-size: 13px; white-space: nowrap; }
.tick__px { color: var(--muted); }
.tick--skel i { display: block; height: 10px; border-radius: 9999px; background: var(--skel); animation: pulse 1.4s ease-in-out infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* content */
.content { max-width: 1120px; margin: 0 auto; padding: 32px var(--pad) 24px; display: grid; gap: 20px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile, .card, .panel { position: relative; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-card); }
.tile { padding: 18px 20px; display: grid; gap: 6px; transition: transform var(--t-fast) var(--ease); }
.tile:hover { transform: translateY(-2px); }
.tile__label { font-size: 12px; color: var(--muted); line-height: 18px; }
.tile__value { font: 650 28px/1.1 var(--font-head); letter-spacing: -0.02em; min-height: 31px; }
.tile__sub { font-size: 12px; color: var(--faint); min-height: 18px; }

.panel { overflow: hidden; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px 24px 12px; }
.panel h2 { font: 650 20px/1.2 var(--font-head); letter-spacing: -0.015em; }
.panel__sub { margin-top: 4px; font-size: 13px; color: var(--muted); }
.panel__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.board-cols, .row { display: grid; grid-template-columns: 44px minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr) 44px; column-gap: 16px; align-items: center; }
.board-cols { padding: 6px 24px 6px; font-size: 12px; color: var(--muted); }
.r { text-align: right; }
.swap { display: grid; padding: 0 12px 8px; }
.swap > * { grid-area: 1 / 1; min-width: 0; }
.skel-list { transition: opacity var(--t-slow) var(--ease), filter var(--t-slow) var(--ease); }
.skel-list.is-out { opacity: 0; filter: blur(2px); pointer-events: none; }
.skel-list.is-gone { display: none; }

.row { position: relative; height: 64px; padding: 0 12px; border-radius: 12px; transition: background-color var(--t-quick) var(--ease), transform var(--t-press) var(--ease); }
.row:hover { background: var(--hover); }
.row.is-enter { animation: enter var(--t-slow) var(--ease) both; animation-delay: calc(var(--i, 0) * var(--stagger)); }
@keyframes enter { 0% { opacity: 0; transform: translateY(8px); filter: blur(2px); } 100% { opacity: 1; transform: none; filter: none; } }
.row.flash-up { animation: flash-up 0.9s var(--ease); }
.row.flash-down { animation: flash-down 0.9s var(--ease); }
@keyframes flash-up { 0% { background-color: var(--flash-up); } 100% { background-color: transparent; } }
@keyframes flash-down { 0% { background-color: var(--flash-down); } 100% { background-color: transparent; } }
.avatar { position: relative; width: 44px; height: 44px; border-radius: 28%; overflow: hidden; background: var(--chip-strong); display: grid; place-items: center; font: 650 17px/1 var(--font-head); color: var(--muted); flex: none; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.avatar img.is-loaded { opacity: 1; }
.row__id { display: grid; gap: 2px; min-width: 0; }
.row__name { font: 500 14px/20px var(--font-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__sym { display: flex; }
.row .num { font-size: 13px; font-weight: 500; text-align: right; white-space: nowrap; }
.chg { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.chg { color: var(--accent-ink); }
.chg.down { color: var(--muted); }
.spark { width: 34px; height: 14px; flex: none; fill: none; stroke: var(--accent-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.chg.down .spark { stroke: var(--faint); }
.copy { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 9999px; color: var(--muted); transition: background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease), transform var(--t-press) var(--ease); }
.copy:hover { background: var(--chip-strong); color: var(--ink); }
.copy:active { transform: scale(0.92); }
.copy.is-done { background: var(--brand); color: var(--on-brand); }
.copy svg { width: 16px; height: 16px; }
.row__vol, .row__liq { text-align: right; }
.row__lab { display: none; }

/* skeleton rows */
.srow { height: 64px; padding: 0 12px; display: grid; grid-template-columns: 44px minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 1fr) minmax(0, 1fr) 44px; column-gap: 16px; align-items: center; }
.srow i { display: block; height: 12px; border-radius: 9999px; background: var(--skel); animation: pulse 1.4s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 60ms); }
.srow i:first-child { width: 44px; height: 44px; border-radius: 28%; }
.srow i:last-child { width: 24px; height: 24px; justify-self: center; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.note { min-height: 0; padding: 0 24px; font-size: 13px; color: var(--muted); }
.note:not(:empty) { padding: 4px 24px 18px; }
.empty { padding: 28px 24px; text-align: center; color: var(--muted); font-size: 14px; }

/* compact (sidebar) rows */
.side .row { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-areas: "av name price" "av sym chg"; column-gap: 10px; row-gap: 0; height: 60px; padding: 0 8px; }
.side .row .avatar { grid-area: av; }
.side .row__id { display: contents; }
.side .row__name { grid-area: name; align-self: end; }
.side .row__sym { grid-area: sym; align-self: start; }
.side .row__price { grid-area: price; align-self: end; }
.side .row .chg { grid-area: chg; align-self: start; }
.side .row__vol, .side .row__liq, .side .copy, .side .spark { display: none; }
.side .srow { height: 60px; grid-template-columns: 44px 1fr 40px; padding: 0 8px; }
.side .srow i:nth-child(n+4) { display: none; }
.side .srow i:nth-child(3) { width: 40px; }

/* spotlight */
[data-spot]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--spot), transparent 70%); transition: opacity var(--t-fast) var(--ease); }
[data-spot]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), var(--spot-edge), transparent 70%); -webkit-mask: linear-gradient(var(--ink) 0 0) content-box, linear-gradient(var(--ink) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--ink) 0 0) content-box exclude, linear-gradient(var(--ink) 0 0); transition: opacity var(--t-fast) var(--ease); }
[data-spot]:hover::before, [data-spot]:hover::after { opacity: 1; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.card { padding: 24px; display: grid; gap: 8px; align-content: start; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.card__glyph { width: 40px; height: 40px; margin-bottom: 8px; padding: 8px; border-radius: 12px; background: var(--brand-soft); fill: none; stroke: var(--accent-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font: 600 17px/1.3 var(--font-head); letter-spacing: -0.01em; }
.card p { font-size: 14px; line-height: 22px; color: var(--muted); }

/* register */
.rec-list { list-style: none; padding: 0 12px 12px; display: grid; }
.rec { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 12px; border-radius: 12px; transition: background-color var(--t-quick) var(--ease); }
.rec:hover { background: var(--hover); }
.rec__label { font: 500 14px/20px var(--font-ui); }
.rec__val { font-size: 13px; color: var(--muted); text-align: right; overflow-wrap: anywhere; }
.state { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 9999px; background: var(--chip); font: 500 12px/1 var(--font-ui); color: var(--muted); }
.state.is-stated { background: var(--brand); color: var(--on-brand); }
.rec__right { display: flex; align-items: center; gap: 12px; min-width: 0; }

.foot { max-width: 1120px; margin: 0 auto; padding: 24px var(--pad) 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 13px; }

/* reveal (JS flips is-in via spring solver) */
.js [data-reveal]:not(.is-in) { opacity: 0; }
.scrim { display: none; }

/* flash: value-change on numbers */
.num.flash { animation: numflash 0.8s var(--ease); border-radius: 6px; }
@keyframes numflash { 0% { background-color: var(--flash-up); } 100% { background-color: transparent; } }

/* tablet / mobile */
@media (max-width: 1100px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 859px) {
  :root { --pad: 16px; }
  .shell { display: block; }
  .side { position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); transform: translateX(-104%); visibility: hidden; transition: transform var(--t-medium) var(--ease), visibility 0s linear var(--t-medium); box-shadow: var(--shadow-lift); }
  .side.is-open { transform: none; visibility: visible; transition: transform var(--t-medium) var(--ease); }
  .side .side-close { display: grid; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 55; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity var(--t-medium) var(--ease); }
  .scrim.is-open { opacity: 1; pointer-events: auto; }
  .head { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "menu brand social" "ca ca ca"; row-gap: 10px; padding: 10px var(--pad) 12px; }
  .head__menu { display: grid; grid-area: menu; }
  .head__brand { display: inline-flex; grid-area: brand; }
  .head__social { grid-area: social; }
  .head__ca { grid-area: ca; }
  .ca { padding: 8px 6px 8px 14px; gap: 10px; min-height: 52px; }
  .ca__label { display: none; }
  .ca__value, .ca__pending { font-size: 17px; }
  .hero { padding: 40px 16px 32px; }
  .cards { grid-template-columns: 1fr; }
  .board-cols { display: none; }
  .row { height: auto; min-height: 84px; padding: 8px; grid-template-columns: 44px minmax(0, 1fr) auto auto; grid-template-areas: "av id price chg" "av vol liq copy"; row-gap: 2px; column-gap: 10px; }
  .row .avatar { grid-area: av; }
  .row__id { grid-area: id; }
  .row__price { grid-area: price; }
  .row .chg { grid-area: chg; }
  .row__vol { grid-area: vol; text-align: left; }
  .row__liq { grid-area: liq; text-align: left; }
  .row .copy { grid-area: copy; }
  .row__vol, .row__liq { font-size: 12px; color: var(--muted); }
  .row__lab { display: inline; color: var(--faint); margin-right: 4px; }
  .row .spark { display: none; }
  .srow { grid-template-columns: 44px minmax(0, 1fr) 64px; height: 76px; }
  .srow i:nth-child(n+4) { display: none; }
  .panel__head { padding: 18px 16px 10px; }
  .swap { padding: 0 4px 8px; }
  .seg__item { padding: 0 12px; }
  .tile__value { font-size: 22px; min-height: 24px; }
  .stats { gap: 8px; }
  .tile { padding: 14px 14px; border-radius: 20px; }
  .rec { flex-wrap: wrap; }
  .side .row { grid-template-columns: 44px minmax(0, 1fr) auto; }
}
@media (max-width: 400px) {
  h1 { font-size: 30px; }
  .row .chg { font-size: 11px; }
}

/* reduced motion: instant fallback for every animation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal]:not(.is-in) { opacity: 1; }
  .ticker { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ticker__track [aria-hidden="true"] { display: none; }
  .progress { transition: none; }
}