/* ─────────────────────────────────────────────────────────────────────────────
   STOCKPILE — design system
   Midnight canvas, dark-glass surfaces, one violet→teal gradient used sparingly
   so it still means something when it appears. Everything below 1000px folds
   the sidebar into a slide-over; everything below 560px goes single column and
   holds together to 380px.

   Three rules govern the values in the application chrome:

   1. TYPE runs on one scale — the --fs-* tokens below, eleven steps, no
      improvisation. Figures get tighter and heavier as they get larger; labels
      get smaller, wider-tracked and dimmer as they matter less. A figure and
      its label are never the same weight, and anything numeric sets in tabular
      numerals so a 10s poll can rewrite it without the column shivering.
      (The whitepaper further down runs its own editorial scale on purpose —
      that is a document, not a dashboard.)
   2. LIGHT COMES FROM ABOVE. Every raised surface carries a 1px specular line
      across its top edge and a three-layer shadow — contact, mid, ambient. That
      pairing is what makes dark glass read as an object on a plane instead of
      a rectangle with a border.
   3. THE GRADIENT IS RATIONED. See the budget above .brand-tag.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #08080F;
  --bg-2: #0C0D1A;
  --panel: rgba(255, 255, 255, 0.035);
  --panel-2: rgba(255, 255, 255, 0.055);
  --border: rgba(255, 255, 255, 0.07);
  --border-2: rgba(255, 255, 255, 0.12);

  --violet: #8B5CF6;
  --violet-deep: #6D4AFF;
  --indigo: #5B4DFF;
  --teal: #2DD4BF;
  --mint: #14E8C8;

  --green: #22C55E;
  --red: #EF4444;
  --amber: #F5A524;

  --text: #FFFFFF;
  --text-2: #9CA3B8;
  --text-3: #5F6478;
  /* Between --text and --text-2: the resting colour of a figure that is data
     rather than a headline. Every mono value in a table or key/value row uses
     it, which is why it is a token instead of being pasted in eleven places. */
  --text-fig: #E6E8F2;

  --grad: linear-gradient(135deg, #8B5CF6, #2DD4BF);
  --grad-violet: linear-gradient(150deg, #6D4AFF 0%, #8B5CF6 100%);

  --radius: 22px;
  --radius-sm: 14px;
  --radius-xs: 10px;

  /* ── TYPE SCALE ─────────────────────────────────────────────────────────
     Ratio ≈1.2 above the body size, with two sub-body steps for labels. Every
     font-size in the application chrome resolves to one of these. */
  --fs-micro: 9.5px;   /* eyebrow, unit row, tagline, badge */
  --fs-label: 10.5px;  /* uppercase labels, table headers */
  --fs-xs: 11.5px;     /* captions, sub-values */
  --fs-sm: 12.5px;     /* secondary body, feed lines */
  --fs-md: 13.5px;     /* primary body, row names, nav */
  --fs-base: 14px;     /* body, card titles */
  --fs-lg: 15.5px;     /* step headings, panel titles */
  --fs-xl: 19px;       /* view title */
  --fs-2xl: 24px;      /* the stock being bought */
  --fs-3xl: 30px;      /* stat card figure */
  --fs-4xl: 40px;      /* hero figure */

  /* Tracking is a function of size: the bigger the type, the tighter it sets.
     Uppercase labels go the other way and open up. */
  --tr-label: 0.14em;
  --tr-label-wide: 0.22em;
  --tr-tight: -0.02em;
  --tr-tighter: -0.03em;
  --tr-hero: -0.045em;

  /* Contact / mid / ambient, plus the specular inset. Three shadow layers is
     what separates a lit object from a drop-shadowed div. */
  --shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 2px 5px -3px rgba(0, 0, 0, 0.6),
    0 12px 26px -12px rgba(0, 0, 0, 0.62),
    0 32px 66px -30px rgba(0, 0, 0, 0.85);
  --shadow-lift:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 4px 10px -4px rgba(0, 0, 0, 0.62),
    0 18px 38px -14px rgba(0, 0, 0, 0.7),
    0 46px 92px -38px rgba(0, 0, 0, 0.92);
  /* The specular line laid across the top edge of every raised surface. */
  --edge: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.17), transparent);

  --ring: 0 0 0 2px var(--bg), 0 0 0 4px rgba(139, 92, 246, 0.8);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t: 260ms var(--ease);
  --t-fast: 150ms var(--ease);

  --sidebar-w: 264px;
  --font-display: 'Outfit', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* The canvas is never flat: two very low-opacity radial glows sit behind
   everything, fixed, so scrolling doesn't drag the light with it. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 780px at 88% -12%, rgba(139, 92, 246, 0.16), transparent 62%),
    radial-gradient(900px 700px at 4% 108%, rgba(45, 212, 191, 0.12), transparent 60%),
    radial-gradient(700px 500px at 50% 40%, rgba(91, 77, 255, 0.06), transparent 70%),
    linear-gradient(180deg, #08080F 0%, #0B0C18 55%, #08080F 100%);
}
/* A whisper of grain kills the banding you get from big soft gradients. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; }
svg { display: block; }

::selection { background: rgba(139, 92, 246, 0.38); color: #fff; }

/* One focus treatment everywhere. Browsers' default ring is invisible on this
   canvas, so it is replaced rather than removed.
   The ring deliberately does NOT restate border-radius: `inherit` resolves to
   the PARENT's radius, which would square off every pill button the instant it
   took focus. Each focusable element already carries its own radius and
   box-shadow follows it, so there is nothing to say here. */
:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--ring); }

.mono {
  font-family: var(--font-mono);
  font-feature-settings: 'zero' 1, 'tnum' 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hidden { display: none !important; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.pos { color: var(--green); }
.neg { color: var(--red); }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Every figure on the page sets in one column width. Nothing here is
   decorative — a proportional 1 beside a proportional 8 makes a table of
   numbers shiver on each 10s poll, which is precisely what a live dashboard
   must never do. */
.big, .statc .v, .statc .sub, .cycle-clock, .cycle-units, .row-val, .row-qty,
.feed-r, .rot-impact, .rot-book, .kv .vv, .loop-strip .val, .nav-badge, .rank,
.chart-tip, .badge, .acct-chip .ad, .ca-chip .addr, .input, .rp-amount,
.ah-stat .v, .fig, .metric .mv, .tierchip, .paper-meta dd, .cluster .more,
table.tbl td, table.tbl th, table.ptable td, table.ptable th,
.toast .tb, .step .n, .sec-n, .rail-link .rn, .steps-ol .so {
  font-variant-numeric: tabular-nums;
}

/* ── scrollbars ───────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 20px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.22); background-clip: content-box; }

/* ═══ LAYOUT ═══════════════════════════════════════════════════════════════ */

.app { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  padding: 26px 16px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.010));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--border);
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.4);
  z-index: 60;
  transition: transform 380ms var(--ease);
}

.main {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 36px 96px;
}

/* ── brand ────────────────────────────────────────────────────────────────── */

.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 2px; }
/* The mark is the supplied artwork (/logo.png), keyed to transparency by
   src/scripts/render-assets.js. It is taller than it is wide — the plates
   cascade downward — so the height leads and the width follows, otherwise the
   stack gets squashed. */
.mark {
  width: auto;
  height: 40px;
  flex: none;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(139, 92, 246, 0.28));
}
.brand-word {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: var(--tr-tighter);
  color: #fff;
  line-height: 1;
}
/* THE GRADIENT — rationed.
   It is the loudest thing in this palette, so in the application chrome it is
   allowed exactly here: the tagline, the active nav marker, the account avatar,
   the primary button, the cycle progress bar, the chart stroke, and the line
   icons. Nowhere else. It was deliberately pulled OFF the rotation impact bars
   (twenty-plus of them per screen made it wallpaper) and off the About step
   numerals (the icon above each one already carried it). Every appearance below
   is marked, so the next person adding one can see the whole budget at once. */
.brand-tag {
  margin: 10px 0 0 8px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── nav ──────────────────────────────────────────────────────────────────── */

.side-nav { margin-top: 30px; display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.side-label {
  padding: 0 12px 8px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-3);
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.008em;
  color: var(--text-2);
  transition: color var(--t), background var(--t), transform var(--t-fast);
}
.nav-item .ico { width: 17px; height: 17px; flex: none; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.82; transition: opacity var(--t); }
.nav-item:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.nav-item:hover .ico { opacity: 1; }
.nav-item:active { transform: translateX(1px); }
.nav-item.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.065);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
/* GRADIENT — the only mark on the page that says "you are here". */
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 3px; height: 18px;
  margin-top: -9px;
  border-radius: 0 3px 3px 0;
  background: var(--grad);
  box-shadow: 0 0 12px -1px rgba(139, 92, 246, 0.9);
}
.nav-item.active .ico { opacity: 1; }
.nav-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(139, 92, 246, 0.18);
  border: 1px solid rgba(139, 92, 246, 0.24);
  color: #C4B5FD;
}

.side-foot { padding: 14px 8px 0; border-top: 1px solid var(--border); margin-top: 14px; }
.mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-2);
}
.mode-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); flex: none; }
.mode-pill.live { border-color: rgba(34, 197, 94, 0.35); color: #86EFAC; background: rgba(34, 197, 94, 0.08); }
.mode-pill.live .dot { background: var(--green); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); animation: pulse 2.4s var(--ease) infinite; }
.mode-pill.demo { border-color: rgba(139, 92, 246, 0.4); color: #C4B5FD; background: rgba(139, 92, 246, 0.1); }
.mode-pill.demo .dot { background: var(--violet); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16); }
.mode-pill.preview { border-color: rgba(245, 165, 36, 0.32); color: #FCD9A0; background: rgba(245, 165, 36, 0.08); }
.mode-pill.preview .dot { background: var(--amber); box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.16); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

.side-note { margin-top: 10px; font-size: var(--fs-label); line-height: 1.6; color: var(--text-3); }

/* ── topbar ───────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 36px;
  background: rgba(8, 8, 15, 0.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 14px 30px -26px rgba(0, 0, 0, 0.95);
}
.view-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 0; }

/* The buy button. This is the one place in the chrome that gets the full
   gradient — everything else in the topbar is a quiet ghost control, so this
   reads as the single call to action without needing to be loud about it. */
.pill-buy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--grad);
  color: #0A0A12;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 6px 18px -8px rgba(139, 92, 246, 0.9);
  transition: transform var(--t), box-shadow var(--t), filter var(--t);
}
.pill-buy:hover {
  transform: translateY(-1px);
  filter: saturate(1.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.34) inset,
    0 12px 26px -10px rgba(139, 92, 246, 1);
}
.pill-buy:active { transform: translateY(0); }
.pill-buy .pill-ico {
  width: 15px; height: 15px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (prefers-reduced-motion: reduce) {
  .pill-buy, .pill-buy:hover { transform: none; transition: none; }
}
/* Narrow screens keep the icon and drop the words rather than wrapping. */
@media (max-width: 620px) {
  .pill-buy { padding: 0 12px; }
  .pill-buy span { display: none; }
  .pill-buy .pill-ico { width: 17px; height: 17px; }
}

.side-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--t), background var(--t), border-color var(--t), transform var(--t-fast);
}
.side-toggle:hover { color: #fff; background: var(--panel-2); border-color: var(--border-2); }
.side-toggle:active { transform: translateY(1px); }
.side-toggle svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; }

.ca-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 6px 0 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
  max-width: 100%;
  min-width: 0;
  transition: border-color var(--t), background var(--t);
}
.ca-chip:hover { border-color: var(--border-2); background: var(--panel-2); }
.ca-chip .lbl { color: var(--text-3); font-size: var(--fs-micro); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; }
.ca-chip .addr { color: var(--text-fig); letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: color var(--t), background var(--t), border-color var(--t), transform var(--t-fast);
}
.icon-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.solid svg { fill: currentColor; stroke: none; }
.icon-btn.lg {
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.icon-btn.lg:hover { border-color: var(--border-2); background: var(--panel-2); }
.icon-btn.lg svg { width: 15px; height: 15px; }

.acct-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 5px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
  background: var(--panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color var(--t), background var(--t);
}
.acct-chip:hover { border-color: rgba(139, 92, 246, 0.4); background: var(--panel-2); }
/* GRADIENT — 24px of it, carrying identity. */
.acct-chip .av {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--grad);
  display: grid;
  place-items: center;
  font-size: var(--fs-micro);
  font-weight: 700;
  color: #0A0A12;
  flex: none;
  box-shadow: 0 2px 8px -3px rgba(139, 92, 246, 0.9);
}
.acct-chip .ad { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: -0.01em; color: var(--text-fig); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ═══ BUTTONS ══════════════════════════════════════════════════════════════ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.008em;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--t-fast), box-shadow var(--t), background var(--t), border-color var(--t), color var(--t), opacity var(--t);
}
.btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px); transition-duration: 60ms; }
.btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }

/* GRADIENT — one primary action per screen, so it always means "do the
   thing this screen exists for". */
.btn-primary {
  background: var(--grad);
  color: #08080F;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 2px 6px -3px rgba(0, 0, 0, 0.6),
    0 8px 22px -10px rgba(139, 92, 246, 0.85);
}
.btn-primary:hover:not(:disabled) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 3px 8px -3px rgba(0, 0, 0, 0.6),
    0 14px 34px -10px rgba(139, 92, 246, 0.95);
}

.btn-violet { background: var(--grad-violet); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 22px -10px rgba(109, 74, 255, 0.9); }
.btn-violet:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 14px 34px -10px rgba(109, 74, 255, 1); }

.btn-ghost { background: var(--panel); border-color: var(--border); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.btn-ghost:hover:not(:disabled) { background: var(--panel-2); border-color: var(--border-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 20px -12px rgba(0, 0, 0, 0.9); }

.btn-quiet { background: transparent; border-color: var(--border); color: var(--text-2); }
.btn-quiet:hover:not(:disabled) { color: #fff; border-color: var(--border-2); background: rgba(255, 255, 255, 0.045); }

.btn-onviolet { background: rgba(255, 255, 255, 0.95); color: #3B1E9E; font-weight: 700; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.8); }
.btn-onviolet:hover:not(:disabled) { background: #fff; box-shadow: 0 12px 26px -10px rgba(0, 0, 0, 0.7); }
.btn-onviolet-ghost { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.btn-onviolet-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.4); }

.btn-sm { height: 32px; padding: 0 14px; font-size: var(--fs-sm); }
.btn-xs { height: 27px; padding: 0 11px; font-size: var(--fs-xs); gap: 5px; }
.btn-xs svg { width: 12px; height: 12px; }
.btn-block { width: 100%; }

.btn.pending { color: transparent !important; pointer-events: none; }
.btn.pending::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-top-color: rgba(255, 255, 255, 0.95);
  animation: spin 640ms linear infinite;
}
.btn-primary.pending::after, .btn-onviolet.pending::after { border-color: rgba(0, 0, 0, 0.25); border-top-color: rgba(0, 0, 0, 0.75); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ SURFACES ═════════════════════════════════════════════════════════════ */

.card {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
}

/* Light comes from above. One hairline of specular laid across the top edge of
   every raised surface — it is what stops dark glass reading as a flat swatch,
   because the eye needs a lit edge to believe the plane is tilted toward a
   source. Paired with the three-layer --shadow underneath it. */
.card::before,
.statc::before,
.rot-card::before,
.step::before,
.loop-strip::before,
.about-hero::before,
.abstract::before,
.metric::before,
.layer::before,
.case::before,
.modal::before,
.toast::before,
.rewards-panel::after {
  content: '';
  position: absolute;
  left: 18px; right: 18px; top: 0;
  height: 1px;
  background: var(--edge);
  pointer-events: none;
}
.rewards-panel::after { left: 24px; right: 24px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent); }
/* .diff is also a .card and would otherwise draw the line twice. */
.card.diff::before { display: none; }
/* These three are not positioned by default; the pseudo needs a containing box. */
.metric, .layer, .case, .abstract { position: relative; }

.card-pad { padding: 22px; }
.card-tight { padding: 16px 18px; }

.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.card-title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  line-height: 1.3;
  color: #fff;
}
.card-sub { font-size: var(--fs-xs); color: var(--text-3); margin-top: 4px; line-height: 1.55; max-width: 54ch; }

/* The label half of every figure/label pair. Small, wide, dim — it must never
   compete with the number it describes. */
.k {
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-3);
  line-height: 1.4;
}
.big {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: #fff;
}
.big-sm { font-size: 28px; letter-spacing: var(--tr-tighter); }

.divider { height: 1px; background: var(--border); margin: 18px 0; }

/* section rhythm */
.section { margin-top: 22px; }
.section:first-child { margin-top: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-2-wide { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 18px; }
.grid-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 18px; }
/* A grid item defaults to min-width:auto, so a card wrapping a min-width:560px
   table refuses to shrink below it and blows the page out horizontally on a
   phone. min-width:0 hands the constraint back to the .table-scroll, which is
   the element that is actually allowed to scroll. */
.grid-2 > *, .grid-2-wide > *, .grid-hero > *, .stat-row > *, .rot-grid > * { min-width: 0; }

/* ── stat cards ───────────────────────────────────────────────────────────── */

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.statc {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t), background var(--t);
}
.statc:hover {
  border-color: rgba(139, 92, 246, 0.3);
  background: var(--panel-2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.statc .v {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 600;
  letter-spacing: var(--tr-tighter);
  line-height: 1.1;
  margin-top: 10px;
  color: #fff;
}
.statc .sub { margin-top: 6px; font-size: var(--fs-xs); color: var(--text-3); letter-spacing: -0.005em; }

/* ═══ HERO / CYCLE ═════════════════════════════════════════════════════════ */

/* The countdown is the one element on this page that is always moving, so it is
   the one element built to be looked at. Everything here serves that: a bloom
   behind the numerals, a mono clock set tight enough that the digits read as a
   single object rather than a row of characters, and a progress track carrying
   a tick scale and a lit head, so the cycle's position is legible at a glance
   instead of having to be read. */
.cycle-card {
  display: flex;
  flex-direction: column;
  padding: 26px;
  overflow: hidden;
  isolation: isolate;
}
.cycle-card::after {
  content: '';
  position: absolute;
  right: -70px; top: -110px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.26), rgba(109, 74, 255, 0.08) 46%, transparent 68%);
  pointer-events: none;
  z-index: -1;
}
/* A live indicator on the eyebrow. The engine runs whether or not this page is
   being watched; the dot says so without spending a word on it. */
.cycle-card > .k { display: flex; align-items: center; gap: 8px; }
.cycle-card > .k::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  flex: none;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.14), 0 0 10px rgba(45, 212, 191, 0.7);
  animation: pulse 2.4s var(--ease) infinite;
}
.cycle-clock {
  display: flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--font-mono);
  font-size: clamp(42px, 6.6vw, 64px);
  font-weight: 700;
  letter-spacing: var(--tr-hero);
  line-height: 0.98;
  margin: 16px 0 8px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' 1, 'tnum' 1;
  color: #fff;
  text-shadow: 0 0 40px rgba(139, 92, 246, 0.32);
}
.cycle-clock b { font-weight: 700; }
.cycle-clock .sep {
  color: var(--text-3);
  font-weight: 500;
  padding: 0 2px;
  animation: colon 1.6s var(--ease) infinite;
}
@keyframes colon { 0%, 100% { opacity: 1; } 50% { opacity: 0.38; } }

.cycle-units {
  display: flex;
  gap: 26px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-label-wide);
  color: var(--text-3);
  text-transform: uppercase;
}

.cycle-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.035);
  margin-top: 22px;
}
/* Eight notches laid over the fill: the track becomes a scale you can read a
   position off, not merely a bar that gets longer. */
.cycle-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(8, 8, 15, 0.55) 0 1px, transparent 1px 12.5%);
}
/* GRADIENT — the cycle itself, filling left to right. */
.cycle-bar i {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--grad);
  box-shadow: 0 0 16px -2px rgba(139, 92, 246, 0.75);
  transition: width 900ms var(--ease);
}
.cycle-bar i::before {
  content: '';
  position: absolute;
  right: -3px; top: 50%;
  width: 10px; height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  animation: head 2.4s var(--ease) infinite;
}
@keyframes head {
  0%, 100% { box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.22), 0 0 14px 2px rgba(45, 212, 191, 0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(45, 212, 191, 0.10), 0 0 20px 3px rgba(45, 212, 191, 0.80); }
}
.cycle-foot { margin-top: 16px; font-size: var(--fs-xs); color: var(--text-3); line-height: 1.55; }

.buying-card { padding: 26px; display: flex; flex-direction: column; }
.buying-now { display: flex; align-items: center; gap: 14px; margin: 18px 0 4px; }
.buying-now .name {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: var(--tr-tighter);
  line-height: 1.18;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.buying-now .tick { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: -0.01em; color: var(--text-2); margin-top: 3px; }
.buying-next {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.buying-next .k { margin-right: auto; }
.buying-next .mono { color: var(--text-fig); font-size: var(--fs-sm); }

.loop-strip {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
  padding: 14px 20px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.024);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  font-size: var(--fs-sm);
}
.loop-strip .lbl {
  color: var(--text-3);
  margin-right: 8px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}
.loop-strip .val { color: var(--text-fig); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500; letter-spacing: -0.01em; }
.loop-strip .sep { width: 1px; height: 15px; background: var(--border); }

/* ═══ REWARDS PANEL (the one violet surface) ═══════════════════════════════ */

.rewards-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 24px;
  background: var(--grad-violet);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 4px 12px -6px rgba(0, 0, 0, 0.5),
    0 30px 66px -28px rgba(109, 74, 255, 0.9);
  display: flex;
  flex-direction: column;
  min-height: 260px;
}
.rewards-panel::before {
  content: '';
  position: absolute;
  right: -70px; bottom: -110px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.34), transparent 66%);
  pointer-events: none;
}
.rewards-panel .k { color: rgba(255, 255, 255, 0.6); }
.rewards-panel .big { color: #fff; }
.rp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; position: relative; }
.rp-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; letter-spacing: var(--tr-tight); color: #fff; margin-top: 3px; }
.rp-amount { margin: 16px 0 2px; position: relative; letter-spacing: -0.04em; text-shadow: 0 6px 26px rgba(0, 0, 0, 0.28); }
.rp-sub { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.72); line-height: 1.55; position: relative; }
/* margin-top:auto pins the actions to the bottom of the panel. It works for the
   signed-out block too because that wrapper is display:contents — its children
   are flex items of the panel itself, not of an intermediate div. */
.rp-actions { display: flex; gap: 9px; flex-wrap: wrap; margin-top: auto; padding-top: 20px; position: relative; }
.rp-empty { margin-top: 18px; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.8); line-height: 1.65; position: relative; }

/* stock icons clustered on the violet panel */
.cluster { display: flex; align-items: center; margin: 18px 0 0; position: relative; min-height: 42px; }
.cluster .sicon { margin-left: -12px; box-shadow: 0 0 0 2.5px #6B49F5, 0 6px 14px -6px rgba(0, 0, 0, 0.6); }
.cluster .sicon:first-child { margin-left: 0; }
.cluster .more {
  margin-left: -12px;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 0 0 2.5px #6B49F5;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tr-tight);
  color: #fff;
  font-family: var(--font-mono);
}

/* ═══ STOCK ICON ═══════════════════════════════════════════════════════════ */

/* Stock identity tile.
   Two states from one box: a real brand mark on a dark disc (.has-logo), or a
   monogram in the company's colour. Both read as the same component, so a
   holdings list mixing them still looks like one system rather than a fallback
   showing through. --ic carries the brand colour. */
.sicon {
  --ic: #8B5CF6;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ic);
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--ic) 26%, transparent), transparent 70%),
    #14162A;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--ic) 34%, transparent) inset,
    0 4px 14px -8px rgba(0, 0, 0, 0.9);
  user-select: none;
  overflow: hidden;
}
/* color-mix is well supported, but a browser without it would render the tile
   with no tint at all — this keeps a visible ring in that case. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .sicon { background: #14162A; box-shadow: 0 0 0 1px rgba(255,255,255,0.12) inset; }
}
/* The xStock artwork is a full-bleed square with its own background and the
   xStocks "x" watermark — not a transparent glyph. So it FILLS the disc.
   Insetting it would float a small square inside a tinted circle and lose the
   thing that makes these read as real tokens. */
.sicon.has-logo {
  background: #14162A;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10) inset,
    0 4px 14px -8px rgba(0, 0, 0, 0.9);
}
.sicon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
/* The monogram carries the full ticker, so the type has to step down as the
   ticker gets longer or AVGO/PLTR would overflow the disc. */
.sicon[data-len="2"] { font-size: 15px; }
.sicon[data-len="3"] { font-size: 12px; }
.sicon[data-len="4"] { font-size: 9.5px; letter-spacing: -0.03em; }

.sicon.sm { width: 32px; height: 32px; font-size: 10.5px; }
.sicon.sm[data-len="2"] { font-size: 11.5px; }
.sicon.sm[data-len="3"] { font-size: 9.5px; }
.sicon.sm[data-len="4"] { font-size: 7.5px; letter-spacing: -0.03em; }

.sicon.lg { width: 52px; height: 52px; font-size: 16px; }
.sicon.lg[data-len="2"] { font-size: 18px; }
.sicon.lg[data-len="3"] { font-size: 15px; }
.sicon.lg[data-len="4"] { font-size: 12px; letter-spacing: -0.03em; }

/* Nothing on this page should ever produce a sideways scroll. Wide content
   (tables, the rotation grid) scrolls inside its own container instead. */
html, body { max-width: 100%; overflow-x: hidden; }

/* ═══ HOLDINGS / ROWS ══════════════════════════════════════════════════════ */

.rows { display: flex; flex-direction: column; }
.row-item {
  display: flex;
  align-items: center;
  gap: 13px;
  /* Negative margin equal to the padding so the hover plate bleeds to the card
     gutter while the content stays on the card's own text edge. */
  padding: 13px 10px;
  margin: 0 -10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  transition: background var(--t);
  border-radius: 12px;
}
.row-item:last-child { border-bottom: 0; }
.row-item:hover { background: rgba(255, 255, 255, 0.035); }
.row-main { min-width: 0; flex: 1; }
.row-name { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-tick { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: -0.01em; color: var(--text-3); margin-top: 2px; }
.row-right { text-align: right; flex: none; }
.row-val { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.015em; color: #fff; }
.row-qty { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: -0.01em; color: var(--text-3); margin-top: 2px; }
.row-actions { display: flex; gap: 6px; flex: none; margin-left: 4px; }

/* ═══ EMPTY STATES ═════════════════════════════════════════════════════════
   These are components, not fallback text. Every one of them says what will
   fill the space and why it is empty right now, and offers the action that
   moves things along where there is one. None of them may read as an error —
   an empty panel on this site means "not yet", never "something broke". */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 22px;
  color: var(--text-2);
  /* The rotation host is an auto-fill grid: without this the empty state would
     be laid out as one 238px card in the first column instead of centring
     across the space it is explaining. Inert everywhere else. */
  grid-column: 1 / -1;
}
.empty-ic {
  position: relative;
  width: 56px; height: 56px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(circle at 50% 38%, rgba(139, 92, 246, 0.22), transparent 68%),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 0 0 8px rgba(139, 92, 246, 0.05), 0 14px 30px -18px rgba(109, 74, 255, 0.9);
}
.empty-ic svg {
  width: 22px; height: 22px;
  stroke: url(#icon-grad);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.empty-t {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #fff;
}
.empty-b {
  margin: 6px 0 0;
  max-width: 46ch;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-3);
}
.empty-b b { color: var(--text-2); font-weight: 600; }
.empty-a { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin-top: 18px; }
/* Most empty states sit inside a card that already gives them an edge. The
   rotation grid is bare page, so this one draws its own — a dashed outline
   reads as "reserved space", which is exactly what it is. */
.rot-grid > .empty {
  border: 1px dashed var(--border-2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.018);
}
/* Inside the violet rewards panel the same component has to survive on a light
   background, so it inverts rather than getting its own markup. */
.rewards-panel .empty-b { color: rgba(255, 255, 255, 0.72); }
.rewards-panel .empty-ic { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.12); box-shadow: none; }

/* ═══ CHART ════════════════════════════════════════════════════════════════ */

.chart-wrap { position: relative; width: 100%; }
.chart-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
/* GRADIENT — the value curve, which is the argument this chart is making. */
.chart-line { fill: none; stroke: url(#chart-stroke); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chart-area { fill: url(#chart-fill); }
.chart-dot { fill: #fff; stroke: var(--teal); stroke-width: 2.5; }
.chart-cross { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-grid { stroke: rgba(255, 255, 255, 0.05); stroke-width: 1; }
.chart-tip {
  position: absolute;
  pointer-events: none;
  transform: translate(-50%, -120%);
  padding: 8px 11px;
  border-radius: 10px;
  border: 1px solid var(--border-2);
  background: rgba(12, 13, 26, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.95);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 160ms var(--ease);
  z-index: 5;
}
.chart-tip.on { opacity: 1; }
.chart-tip .t { font-family: var(--font-mono); color: var(--text-3); font-size: var(--fs-micro); font-weight: 400; margin-top: 3px; }

/* ═══ TABLES ═══════════════════════════════════════════════════════════════ */

.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
/* A table sitting straight on a .card rather than inside .card-pad has to
   supply its own gutter, or its first column starts 22px to the left of the
   heading above it. */
.card:not(.card-pad) > .table-scroll { padding: 0 22px 8px; }

table.tbl { width: 100%; border-collapse: collapse; min-width: 560px; }
table.tbl th {
  text-align: left;
  padding: 0 14px 12px;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.tbl td { padding: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.045); font-size: 13px; vertical-align: middle; }
/* Flush the outer columns to the card's own gutter so the grid of numbers lines
   up with the title above it instead of floating 14px inside it. */
table.tbl th:first-child, table.tbl td:first-child { padding-left: 0; }
table.tbl th:last-child, table.tbl td:last-child { padding-right: 0; }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl tbody tr { transition: background var(--t); }
table.tbl tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
table.tbl .num { text-align: right; white-space: nowrap; }
table.tbl td.mono { letter-spacing: -0.015em; color: var(--text-fig); }
table.tbl td.dim { color: var(--text-3); }
.cell-stock { display: flex; align-items: center; gap: 11px; }
.cell-stock .row-name { font-size: 13px; }
.rank { display: inline-block; width: 24px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; color: var(--text-3); }
.rank.top { color: #C4B5FD; font-weight: 700; }

/* ═══ BADGES ═══════════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: 7px;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-2);
  white-space: nowrap;
}
.badge.deep { border-color: rgba(45, 212, 191, 0.34); background: rgba(45, 212, 191, 0.1); color: #7DE8DA; }
.badge.core { border-color: rgba(139, 92, 246, 0.36); background: rgba(139, 92, 246, 0.11); color: #C4B5FD; }
.badge.thin { border-color: rgba(245, 165, 36, 0.3); background: rgba(245, 165, 36, 0.09); color: #F6CE8E; }
.badge.ok { border-color: rgba(34, 197, 94, 0.32); background: rgba(34, 197, 94, 0.09); color: #86EFAC; }
/* Not an error state. A name below the bar is the gate doing its job, so it
   reads amber-neutral rather than red-alarming. */
.badge.off { border-color: rgba(245, 165, 36, 0.30); background: rgba(245, 165, 36, 0.09); color: #F5C97B; }
.badge.sim { border-color: rgba(139, 92, 246, 0.3); background: rgba(139, 92, 246, 0.09); color: #C4B5FD; }

/* ═══ ROTATION ═════════════════════════════════════════════════════════════ */

.rot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 14px; }
.rot-card {
  position: relative;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  transition: transform var(--t), border-color var(--t), background var(--t), box-shadow var(--t), opacity var(--t);
}
.rot-card:hover {
  transform: translateY(-3px);
  border-color: rgba(139, 92, 246, 0.28);
  background: var(--panel-2);
  box-shadow: var(--shadow-lift);
}
.rot-card.skipped { opacity: 0.78; }
.rot-card.skipped:hover { opacity: 1; }
.rot-top { display: flex; align-items: center; gap: 11px; }
.rot-name { font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-tick { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: -0.01em; color: var(--text-3); margin-top: 2px; }
.rot-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 16px; }
.rot-impact { font-family: var(--font-mono); font-size: var(--fs-md); font-weight: 500; letter-spacing: var(--tr-tight); line-height: 1.2; color: var(--text-fig); }
.rot-impact span {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-3);
}
.rot-depth { height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); margin-top: 14px; overflow: hidden; }
/* Deliberately NOT the brand gradient. Twenty-plus of these on one screen turned
   the gradient into wallpaper. A single hue that flips to amber the moment a
   name fails its gate says something instead of decorating. */
.rot-depth i {
  display: block;
  height: 100%;
  /* A name that quoted at 0.000% impact gets an inline width of 0, and a bar
     with no fill reads as "not measured" rather than "measured, and excellent"
     — which is the opposite of the truth. The floor keeps a visible tick. */
  min-width: 5px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 10px -2px rgba(45, 212, 191, 0.65);
  transition: width var(--t), background var(--t);
}
.rot-card.skipped .rot-depth i { background: var(--amber); box-shadow: none; }

/* Pool size and holder count, under the impact bar. These are the concrete
   numbers behind the percentage — deliberately quiet, because they are context
   rather than the headline. Both collapse to nothing when unknown, so the card
   never shows an orphaned label. */
.rot-book {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--text-3);
  letter-spacing: -0.015em;
}
.rot-book span:empty { display: none; }

/* ═══ ACTIVITY ═════════════════════════════════════════════════════════════ */

.feed { display: flex; flex-direction: column; max-height: 620px; overflow-y: auto; padding-right: 4px; }
.feed-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 8px;
  margin: 0 -8px;
  border-radius: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background var(--t);
}
.feed-item:last-child { border-bottom: 0; }
.feed-item:hover { background: rgba(255, 255, 255, 0.03); }
.feed-ic {
  width: 30px; height: 30px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--text-2);
}
.feed-ic svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.feed-ic.buy { background: rgba(139, 92, 246, 0.13); border-color: rgba(139, 92, 246, 0.3); color: #C4B5FD; }
.feed-ic.in { background: rgba(34, 197, 94, 0.11); border-color: rgba(34, 197, 94, 0.28); color: #86EFAC; }
.feed-ic.out { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.24); color: #FCA5A5; }
.feed-body { min-width: 0; flex: 1; }
.feed-t { font-size: var(--fs-sm); color: var(--text-fig); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-t b { font-weight: 600; color: #fff; }
.feed-s { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: -0.01em; color: var(--text-3); margin-top: 2px; }
.feed-r { text-align: right; flex: none; font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.015em; }

/* ═══ FORMS ════════════════════════════════════════════════════════════════ */

.field { margin-bottom: 14px; }
.field > label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-2);
  margin-bottom: 8px;
}
.input-wrap { position: relative; display: flex; align-items: center; }
.input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: -0.015em;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.input::placeholder { color: var(--text-3); }
.input:hover:not(:disabled) { border-color: var(--border-2); }
.input:focus { border-color: rgba(139, 92, 246, 0.65); background: rgba(255, 255, 255, 0.05); }
.input:disabled { opacity: 0.5; cursor: not-allowed; }
.input.with-suffix { padding-right: 92px; }
.input-suffix {
  position: absolute;
  right: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.input-unit { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: -0.01em; color: var(--text-3); }
.max-btn {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  background: rgba(255, 255, 255, 0.06);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #C4B5FD;
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
}
.max-btn:hover:not(:disabled) { background: rgba(139, 92, 246, 0.24); border-color: rgba(139, 92, 246, 0.5); color: #fff; }
.max-btn:active:not(:disabled) { transform: translateY(1px); }
.max-btn:disabled { opacity: 0.42; cursor: not-allowed; }

.btn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.kv { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: var(--fs-sm); }
.kv:last-child { border-bottom: 0; }
.kv .kk { color: var(--text-3); }
.kv .vv { font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: -0.015em; color: var(--text-fig); text-align: right; }

.addr-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border-2);
  background: rgba(255, 255, 255, 0.022);
}
.addr-box .a { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: -0.01em; color: var(--text-fig); word-break: break-all; line-height: 1.55; min-width: 0; flex: 1; }

.qr-box {
  width: 168px;
  height: 168px;
  border-radius: 16px;
  background: #fff;
  padding: 10px;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.7), 0 18px 44px -22px rgba(0, 0, 0, 0.95);
}
.qr-box img, .qr-box svg { width: 100%; height: 100%; display: block; }
.qr-box.empty-qr { background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--border-2); box-shadow: none; color: var(--text-3); font-size: var(--fs-xs); line-height: 1.6; text-align: center; padding: 16px; }

.note {
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.024);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-2);
}
.note.warn { border-color: rgba(245, 165, 36, 0.26); background: rgba(245, 165, 36, 0.055); color: #EBCB9B; }
.note.violet { border-color: rgba(139, 92, 246, 0.28); background: rgba(139, 92, 246, 0.07); color: #CFC5F5; }
.note b { color: #fff; font-weight: 600; }

/* ═══ ABOUT ════════════════════════════════════════════════════════════════ */

/* The hero is the one place on the site allowed to open with a statement
   rather than a number. It still ends on measured figures — the stat strip is
   fed from /api/overview, never hardcoded. */
.about-hero {
  position: relative;
  overflow: hidden;
  padding: 34px 32px 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
}
.about-hero::after {
  content: '';
  position: absolute;
  right: -110px; top: -140px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.20), transparent 66%);
  pointer-events: none;
}
.about-hero > * { position: relative; }
.ah-eyebrow {
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ah-title {
  margin: 16px 0 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.038em;
  line-height: 1.08;
  color: #fff;
}
.ah-lede {
  margin: 16px 0 0;
  max-width: 72ch;
  font-size: var(--fs-base);
  line-height: 1.78;
  color: var(--text-2);
}
.ah-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.ah-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.ah-stat .v {
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: var(--tr-tighter);
  line-height: 1.1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.ah-stat .s { margin-top: 4px; font-size: var(--fs-xs); color: var(--text-3); }

/* Section headings between the About blocks. Quiet, so the cards keep the
   weight — this is a signpost, not a headline. */
.sec-head { margin-bottom: 14px; }
.sec-head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.024em;
  color: #fff;
}
.sec-head p { margin: 5px 0 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-3); }

.diff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.diff-grid > * { min-width: 0; }
.diff { display: flex; flex-direction: column; }
.diff .sico { width: 22px; height: 22px; stroke: url(#icon-grad); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.diff h3 {
  margin: 14px 0 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: var(--tr-tight);
  line-height: 1.3;
  color: #fff;
}
.diff p { margin: 0 0 12px; font-size: 13px; line-height: 1.78; color: var(--text-2); }
.diff p:last-child { margin-bottom: 0; }
.diff b { color: #fff; font-weight: 600; }
.diff sup { font-size: 0.72em; }
.diff .fine { font-size: var(--fs-xs); line-height: 1.65; color: var(--text-3); }

/* Measured figures pulled out of the prose. Mono, bordered, deliberately
   undecorated — they are receipts, not badges. */
.figs { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.fig {
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: -0.015em;
  color: var(--text-2);
  white-space: nowrap;
}

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.step {
  position: relative;
  padding: 20px 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow);
  transition: border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t);
}
.step:hover { border-color: var(--border-2); background: var(--panel-2); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
/* Set solid, not clipped to the gradient. The icon directly above it already
   carries the gradient, and two of them inside one 18px-radius card is
   exactly the overuse this palette is rationing against. */
.step .n {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #C4B5FD;
}
.step h3 { margin: 10px 0 7px; font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 600; letter-spacing: var(--tr-tight); line-height: 1.25; }
.step p { margin: 0; font-size: var(--fs-sm); line-height: 1.7; color: var(--text-2); }
/* GRADIENT — the line icons. */
.step .sico { width: 22px; height: 22px; stroke: url(#icon-grad); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 12px; }

.prose p { margin: 0 0 12px; font-size: 13px; line-height: 1.78; color: var(--text-2); }
.prose p:last-child { margin-bottom: 0; }
.prose b { color: #fff; font-weight: 600; }
.prose ul { margin: 0 0 12px; padding-left: 18px; }
.prose li { font-size: 13px; line-height: 1.78; color: var(--text-2); margin-bottom: 8px; }
.prose li::marker { color: var(--violet); }
.prose h4 { margin: 22px 0 9px; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 600; letter-spacing: var(--tr-tight); color: #fff; }
.prose h4:first-child { margin-top: 0; }

/* ═══ TOASTS / MODAL ═══════════════════════════════════════════════════════ */

#toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  position: relative;
  padding: 13px 16px;
  border-radius: 16px;
  border: 1px solid var(--border-2);
  background: rgba(14, 15, 28, 0.95);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lift);
  animation: toast-in 420ms var(--ease);
  border-left: 3px solid var(--violet);
}
.toast.ok { border-left-color: var(--green); }
.toast.err { border-left-color: var(--red); }
.toast .tt { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.toast .tb { font-size: var(--fs-xs); color: var(--text-2); margin-top: 3px; line-height: 1.55; word-break: break-word; }
@keyframes toast-in { from { opacity: 0; transform: translateX(26px) scale(0.97); } to { opacity: 1; transform: none; } }

.modal-back {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(4, 4, 10, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fade 240ms var(--ease);
  overflow-y: auto;
}
.modal {
  width: 100%;
  max-width: 430px;
  border-radius: var(--radius);
  border: 1px solid var(--border-2);
  background: linear-gradient(180deg, rgba(20, 21, 38, 0.98), rgba(11, 12, 24, 0.98));
  box-shadow: var(--shadow-lift);
  padding: 24px;
  animation: modal-in 340ms var(--ease);
}
.modal h3 { margin: 0 0 5px; font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: var(--tr-tight); }
.modal .mp { font-size: var(--fs-sm); color: var(--text-2); line-height: 1.7; margin: 0 0 18px; }
.modal-close { position: absolute; top: 14px; right: 14px; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ═══ VIEWS ════════════════════════════════════════════════════════════════ */

/* A view switch is a short piece of choreography rather than a hard cut: the
   sections of the incoming screen rise into place one after another, ~60ms
   apart. Long enough to be felt, short enough that the last one has landed
   before the eye arrives.
   The stagger is deliberately NOT applied to list rows. Those are reconciled by
   key on a 10s poll, and syncList()'s insertBefore counts as a re-insert — so a
   row-level entrance would restart every time the ordering changed and make the
   page twitch on its own data. Sections are static markup; rows are not. */
.view { display: none; }
.view.active { display: block; }
.view.active > * { animation: view-in 420ms var(--ease) both; }
.view.active > *:nth-child(1) { animation-delay: 0ms; }
.view.active > *:nth-child(2) { animation-delay: 60ms; }
.view.active > *:nth-child(3) { animation-delay: 120ms; }
.view.active > *:nth-child(4) { animation-delay: 175ms; }
.view.active > *:nth-child(5) { animation-delay: 225ms; }
.view.active > *:nth-child(6) { animation-delay: 270ms; }
.view.active > *:nth-child(n+7) { animation-delay: 310ms; }
@keyframes view-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }

/* A figure that changed on the last poll. Bloom and brightness only — never a
   colour change, because a green delta, a red one and a white total all have to
   survive it and still be the colour they were. Applied by setText() in app.js,
   which is the single place any live figure is written. */
.flash { animation: fig-flash 900ms var(--ease); }
@keyframes fig-flash {
  0%   { filter: brightness(1.5); text-shadow: 0 0 22px rgba(45, 212, 191, 0.65), 0 0 8px rgba(45, 212, 191, 0.35); }
  55%  { filter: brightness(1.1); }
  100% { filter: brightness(1); text-shadow: 0 0 0 rgba(45, 212, 191, 0); }
}

.scrim { display: none; position: fixed; inset: 0; z-index: 55; background: rgba(4, 4, 10, 0.6); backdrop-filter: blur(3px); }
.scrim.on { display: block; animation: fade 240ms var(--ease); }

/* ═══ WHITEPAPER ═══════════════════════════════════════════════════════════
   Typography is the design here. One measure (~72ch), numbered sections
   separated by a hairline rule, monospace reserved for figures and formulas,
   and a sticky contents rail that only exists when there is room for it.
   Everything wide — tables, formulas — scrolls inside its own container so the
   page itself never scrolls sideways, right down to 380px.
   ───────────────────────────────────────────────────────────────────────── */

.paper {
  display: grid;
  grid-template-columns: 196px minmax(0, 72ch);
  gap: 60px;
  justify-content: center;
  /* Deliberately NOT `align-items: start`. A sticky element can only travel
     inside its own containing block, so shrink-wrapping the rail column to its
     content would let it scroll away after the first screen. Stretching it to
     the article's height is what gives the rail somewhere to stick. */
  align-items: stretch;
}

/* ── contents rail ────────────────────────────────────────────────────────── */

.paper-rail-inner {
  position: sticky;
  /* Clears the sticky topbar (~62px) with breathing room. */
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 1px solid var(--border);
  padding-left: 3px;
}
.rail-head {
  padding: 0 0 12px 12px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}
.rail-link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 9px;
  width: 100%;
  padding: 7px 8px 7px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  text-align: left;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-3);
  cursor: pointer;
  transition: color var(--t), background var(--t);
}
.rail-link::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background var(--t);
}
.rail-link:hover { color: #C8CDDD; background: rgba(255, 255, 255, 0.03); }
.rail-link.on { color: #fff; }
.rail-link.on::before { background: var(--grad); }
.rail-link .rn {
  flex: none;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--text-3);
  transition: color var(--t);
}
.rail-link.on .rn { color: #C4B5FD; }

/* ── the document ─────────────────────────────────────────────────────────── */

.paper-body { min-width: 0; color: #ADB4C6; }
.paper-body p { margin: 0 0 18px; font-size: 15px; line-height: 1.78; }
.paper-body p:last-child { margin-bottom: 0; }
.paper-body b { color: #fff; font-weight: 600; }
.paper-body i { color: #C8CDDD; font-style: italic; }
.paper-body p.lede {
  font-size: 16.5px;
  line-height: 1.7;
  letter-spacing: -0.005em;
  color: #DDE1EC;
}

/* Inline monospace. `.tt` on a table cell or a metric only wants the face —
   the chip treatment is scoped to running prose, where it has to separate an
   identifier from the sentence around it. */
.paper-body .tt { font-family: var(--font-mono); }
.paper-body p .tt,
.paper-body li .tt,
.paper-body figcaption .tt,
.paper-body .callout .tt {
  font-size: 0.86em;
  color: #D8CFFA;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.16);
  border-radius: 5px;
  padding: 1px 5px;
  /* Not `nowrap`: a long identifier in a 380px column would push the page
     sideways. break-word only splits a token that cannot fit on a line of its
     own, so ordinary names stay intact. */
  overflow-wrap: break-word;
}

/* ── masthead ─────────────────────────────────────────────────────────────── */

.paper-head { padding-bottom: 34px; border-bottom: 1px solid var(--border); }
.paper-eyebrow {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.paper-head h1 {
  margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: clamp(25px, 3.6vw, 35px);
  font-weight: 600;
  letter-spacing: -0.032em;
  line-height: 1.14;
  color: #fff;
  text-wrap: balance;
}
.paper-standfirst {
  margin: 18px 0 0 !important;
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  color: var(--text-2);
  max-width: 58ch;
}
.paper-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 30px 0 0;
}
.paper-meta dt {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.paper-meta dd {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: #E6E8F2;
  overflow-wrap: anywhere;
}

/* ── sections ─────────────────────────────────────────────────────────────── */

.paper-sec { margin-top: 40px; }
.paper-sec + .paper-sec {
  margin-top: 54px;
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.paper-sec h2 {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.25;
  color: #fff;
}
.sec-n {
  display: block;
  margin-bottom: 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.paper-sec h3 {
  margin: 34px 0 14px;
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #fff;
}

/* ── abstract ─────────────────────────────────────────────────────────────── */

.abstract {
  padding: 26px 28px;
  border-radius: var(--radius);
  border: 1px solid rgba(139, 92, 246, 0.22);
  background: linear-gradient(160deg, rgba(139, 92, 246, 0.08), rgba(45, 212, 191, 0.03));
}
.abstract-h {
  margin: 0 0 14px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C4B5FD;
}
.abstract p { margin: 0 !important; font-size: 15.5px !important; line-height: 1.8 !important; color: #C9CEDF; }

/* ── lists ────────────────────────────────────────────────────────────────── */

.paper-ol, .paper-ul { margin: 20px 0; padding-left: 24px; }
.paper-ol li, .paper-ul li { font-size: 15px; line-height: 1.75; margin-bottom: 12px; }
.paper-ol li:last-child, .paper-ul li:last-child { margin-bottom: 0; }
.paper-ol li::marker { font-family: var(--font-mono); font-size: 12.5px; color: #C4B5FD; }
.paper-ul li::marker { color: var(--violet); }
.paper-ul.risks li { margin-bottom: 16px; }

.steps-ol { list-style: none; margin: 24px 0; padding: 0; }
.steps-ol li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 11px 0;
  font-size: 14px;
  line-height: 1.65;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}
.steps-ol li:last-child { border-bottom: 0; }
.steps-ol .st { min-width: 0; }
.steps-ol .so {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: #0A0A14;
  background: var(--grad);
}

/* ── figures, tables, formulas ────────────────────────────────────────────── */

.paper-fig { margin: 28px 0; }
.paper-fig figcaption, .formula figcaption {
  margin-top: 13px;
  padding-left: 13px;
  border-left: 2px solid var(--border-2);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text-3);
}
.paper-fig figcaption b, .formula figcaption b { color: #C4B5FD; font-weight: 600; }

table.ptable { width: 100%; border-collapse: collapse; min-width: 460px; }
table.ptable th {
  text-align: left;
  padding: 0 12px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border-2);
  white-space: nowrap;
}
table.ptable td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
  font-size: 12.5px;
  line-height: 1.55;
  color: #C2C8D8;
  vertical-align: top;
}
table.ptable tbody tr:last-child td { border-bottom: 0; }
table.ptable tbody tr { transition: background var(--t); }
table.ptable tbody tr:hover td { background: rgba(255, 255, 255, 0.022); }
table.ptable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.ptable td.tt { font-family: var(--font-mono); font-size: 12px; color: #E6E8F2; white-space: nowrap; }
table.ptable td.ok { color: #5EEAD4; }
table.ptable td.bad { color: #F19191; }
table.ptable td.vcell { color: var(--text-3); font-size: 11.5px; }
table.ptable tr.total td { border-top: 1px solid var(--border-2); color: #fff; font-weight: 600; }
table.ptable.params { min-width: 610px; }
table.ptable.params td:first-child { font-size: 11px; }

.tierchip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tierchip.deep { color: #5EEAD4; border-color: rgba(45, 212, 191, 0.3); background: rgba(45, 212, 191, 0.09); }
.tierchip.core { color: #C4B5FD; border-color: rgba(139, 92, 246, 0.3); background: rgba(139, 92, 246, 0.09); }
.tierchip.thin { color: #EBCB9B; border-color: rgba(245, 165, 36, 0.28); background: rgba(245, 165, 36, 0.08); }

.formula { margin: 28px 0; }
.formula pre {
  margin: 0;
  padding: 18px 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(9, 9, 18, 0.6);
  box-shadow: inset 2px 0 0 rgba(139, 92, 246, 0.55);
}
.formula code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: #D6DBEA;
  white-space: pre;
}

.callout {
  margin: 28px 0;
  padding: 18px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(139, 92, 246, 0.24);
  background: rgba(139, 92, 246, 0.06);
  font-size: 14px;
  line-height: 1.75;
  color: #C9CEDF;
}

/* ── measured-figure strips and side-by-side panels ───────────────────────── */

.metric-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 0; }
.metric-row > * { min-width: 0; }
.metric {
  padding: 16px 16px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.metric .mv {
  font-family: var(--font-mono);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
}
.metric .mv.ok { color: #5EEAD4; }
.metric .mk { margin-top: 8px; font-size: 10.5px; line-height: 1.5; letter-spacing: 0.03em; color: var(--text-3); }

.layer-grid, .case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0; }
.layer-grid > *, .case-grid > * { min-width: 0; }
.layer, .case {
  padding: 18px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--panel);
}
.layer-k, .case-k {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.layer-t { margin-top: 9px; font-size: 14px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.case h4 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
.layer p, .case p { margin: 11px 0 0 !important; font-size: 13px !important; line-height: 1.7 !important; color: var(--text-2); }

.paper-end { margin-top: 48px; }
.end-rule { display: block; width: 64px; height: 2px; border-radius: 2px; background: var(--grad); margin-bottom: 18px; }
.paper-end p { font-size: 13.5px !important; line-height: 1.75 !important; color: var(--text-3); }

/* ── whitepaper responsive ────────────────────────────────────────────────── */

/* Wide screens have slack in the gutter, so figures step outside the measure
   rather than squeezing a five-column table into a reading column. */
@media (min-width: 1320px) {
  .paper-fig, .metric-row, .layer-grid, .case-grid { margin-left: -38px; margin-right: -38px; }
}

@media (max-width: 1160px) {
  .paper { grid-template-columns: minmax(0, 72ch); }
  .paper-rail { display: none; }
}

@media (max-width: 720px) {
  .paper-sec h2 { font-size: 19.5px; }
  .paper-body p, .paper-ol li, .paper-ul li { font-size: 14.5px; }
  .paper-body p.lede { font-size: 15.5px; }
  .paper-standfirst { font-size: 14.5px !important; }
  .abstract { padding: 20px; }
  .abstract p { font-size: 14.5px !important; }
  .paper-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-row, .layer-grid, .case-grid { grid-template-columns: 1fr; }
  .metric .mv { font-size: 22px; }
  .paper-sec + .paper-sec { margin-top: 42px; padding-top: 38px; }
}

@media (max-width: 400px) {
  .paper-head h1 { font-size: 23px; }
  .formula pre { padding: 14px 15px; }
  .formula code { font-size: 11.5px; }
  .callout { padding: 15px 16px; font-size: 13.5px; }
  .steps-ol li { font-size: 13.5px; gap: 11px; }
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════════════════════ */

@media (max-width: 1160px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  .sidebar { transform: translateX(-100%); box-shadow: 0 0 80px rgba(0, 0, 0, 0.8); }
  .sidebar.open { transform: none; }
  .main { margin-left: 0; }
  .side-toggle { display: inline-flex; }
  .topbar { padding: 12px 18px; }
  .content { padding: 22px 18px 84px; }
  .grid-2, .grid-2-wide, .grid-hero, .diff-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .view-title { font-size: 17px; }
  .ca-chip .lbl { display: none; }
  .ca-chip { max-width: 170px; }
  .big { font-size: 34px; }
  .big-sm { font-size: 25px; }
  .statc .v { font-size: 27px; }
  .card-pad { padding: 18px; }
  .card:not(.card-pad) > .table-scroll { padding: 0 18px 8px; }
  .rewards-panel, .cycle-card, .buying-card { padding: 20px; }
  .rewards-panel::after { left: 20px; right: 20px; }
  /* The specular edge tracks the surface padding, or it would over-run a
     narrower card and end short of its corners. */
  .card::before, .statc::before, .rot-card::before, .step::before,
  .loop-strip::before, .about-hero::before, .abstract::before, .metric::before,
  .layer::before, .case::before, .modal::before, .toast::before { left: 14px; right: 14px; }
  .about-hero { padding: 26px 22px 22px; }
  .ah-title { font-size: 30px; max-width: none; }
  .ah-lede { font-size: var(--fs-md); }
  .empty { padding: 32px 16px; }
}

/* The topbar is the one row that cannot wrap, so below 640px it sheds cargo in
   priority order rather than pushing the account chip off the right edge:
   the Buy label goes first, then Telegram, then the CA chip and X. Every one of
   them is still reachable — the CA lives on the About screen, the socials in
   the sidebar footer — so nothing becomes unavailable, only less prominent. */
@media (max-width: 640px) {
  #pump-link .btn-label { display: none; }
  #pump-link { padding: 0 10px; }
  #tg-link { display: none !important; }
  .acct-chip .ad { max-width: 88px; }
}

@media (max-width: 470px) {
  .ca-chip, #x-link { display: none !important; }
}

@media (max-width: 560px) {
  .stat-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  .statc { padding: 14px; }
  .statc .v { font-size: 24px; }
  .steps { grid-template-columns: 1fr; }
  .btn-pair { grid-template-columns: 1fr; }
  .rot-grid { grid-template-columns: 1fr; }
  .loop-strip { gap: 4px 18px; padding: 13px 16px; }
  #toasts { right: 12px; left: 12px; bottom: 12px; max-width: none; }
  .qr-box { width: 100%; max-width: 220px; height: auto; aspect-ratio: 1; }
  .ah-stats { gap: 12px; }
  .ah-stat .v { font-size: 21px; }
  .ah-actions .btn { flex: 1 1 auto; }
}

@media (max-width: 400px) {
  .content { padding: 16px 12px 72px; }
  .topbar { padding: 10px 12px; gap: 8px; }
  .ca-chip { max-width: 128px; }
  .big { font-size: 30px; }
  .big-sm { font-size: 23px; }
  .statc .v { font-size: 21px; }
  .card-pad { padding: 15px; }
  .card:not(.card-pad) > .table-scroll { padding: 0 15px 8px; }
  .rewards-panel, .cycle-card, .buying-card { padding: 17px; }
  .btn { padding: 0 14px; }
  .cycle-units { gap: 20px; }
  .loop-strip .sep { display: none; }
  .about-hero { padding: 22px 16px 18px; }
  .ah-title { font-size: 25px; }
  .ah-stats { grid-template-columns: 1fr; gap: 14px; }
  .empty { padding: 28px 12px; }
  .empty-b { font-size: 12px; }
}

/* ═══ REDUCED MOTION ═══════════════════════════════════════════════════════ */

/* animation-delay has to be zeroed alongside the duration. The view-switch
   stagger uses fill-mode `both`, so a surviving 310ms delay would hold those
   sections at opacity 0 — a screen that starts blank, which is a far worse
   outcome than the motion the preference was expressing a dislike of. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .statc:hover, .rot-card:hover, .step:hover, .btn:hover:not(:disabled),
  .icon-btn:hover, .side-toggle:active, .nav-item:active,
  .max-btn:active { transform: none !important; }
  .cycle-card > .k::before, .cycle-clock .sep, .cycle-bar i::before,
  .mode-pill.live .dot { animation: none !important; }
}

/* ── wallet-less account ──────────────────────────────────────────────────── */

.or-rule { display: flex; align-items: center; gap: 12px; margin: 16px 0 14px; color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; }
.or-rule::before, .or-rule::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* The recovery key. Deliberately the loudest element on its screen: monospace,
   generous, selectable, and word-broken so it never overflows on mobile. */
.key-box {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(139, 92, 246, 0.10);
  border: 1px solid rgba(139, 92, 246, 0.34);
  color: #fff;
  font-size: 13px;
  line-height: 1.6;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}

.rk-ack {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0 12px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  line-height: 1.5;
}
.rk-ack input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--violet); flex: none; cursor: pointer; }
.rk-ack:hover { color: #fff; }

/* A key account with no wallet attached is one lost file away from losing its
   balance, so the prompt to attach one stays visible rather than being a
   one-time toast. */
.recover-warn {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  margin-bottom: 16px;
  border-radius: var(--radius-sm);
  background: rgba(245, 165, 36, 0.09);
  border: 1px solid rgba(245, 165, 36, 0.30);
  color: #F5D9A5;
  font-size: 13px;
  line-height: 1.55;
}
.recover-warn svg { width: 17px; height: 17px; flex: none; margin-top: 1px; stroke: var(--amber); stroke-width: 1.9; fill: none; }

/* ═══ FIRST-VISIT WALKTHROUGH ══════════════════════════════════════════════ */

.tour-back {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(4, 4, 10, 0.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: tourIn 260ms var(--ease);
}
@keyframes tourIn { from { opacity: 0 } to { opacity: 1 } }

.tour {
  width: 100%; max-width: 880px;
  max-height: calc(100vh - 40px);
  display: flex; flex-direction: column;
  border-radius: 26px;
  padding: 20px 24px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.022)), var(--bg-2);
  border: 1px solid var(--border-2);
  box-shadow: 0 1px 0 rgba(255,255,255,0.09) inset, 0 50px 100px -30px rgba(0,0,0,0.95);
  overflow: hidden;
}

.tour-top { display: flex; align-items: center; gap: 12px; flex: none; }
.tour-mark { width: 26px; height: auto; }
.tour-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); letter-spacing: 0.04em; }
.tour-skip {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 12.5px; color: var(--text-3); padding: 6px 8px; border-radius: 8px;
  transition: color var(--t);
}
.tour-skip:hover { color: #fff; }

.tour-body {
  flex: 1; min-height: 0; overflow-y: auto;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: center;
  padding: 18px 2px 20px;
}

.tour-copy h2 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15;
}
.tour-copy p { margin: 0; font-size: 14px; line-height: 1.62; color: var(--text-2); }

/* The mock panel. Same surfaces as the real product so the tour reads as a
   preview of the thing rather than an advert for it. */
.tour-panel {
  border-radius: var(--radius);
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.tour-panel.enter { opacity: 0; transform: translateY(10px); }

.tour-row { display: flex; align-items: center; gap: 11px; padding: 9px 2px; }
.tour-ico {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  overflow: hidden; background: #14162A;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10) inset;
}
.tour-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-row-id { min-width: 0; flex: 1; }
.tour-row-id b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.tour-row-id span { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.tour-row-val { text-align: right; }
.tour-row-val b { display: block; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tour-row-val span { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }

.tour-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 2px 2px 10px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.tour-card-head span { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--text-3); }
.tour-usd { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

.tour-flow { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tour-flow-step { flex: 1; text-align: center; padding: 10px 6px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.03); }
.tour-flow-step b { display: block; font-size: 14px; font-weight: 600; margin-top: 3px; }
.tour-chip { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--text-3); }
.tour-arrow { flex: none; }
.tour-arrow svg { width: 16px; height: 16px; stroke: var(--violet); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.tour-gate-row { display: flex; align-items: center; gap: 10px; }
.tour-gate-row .tour-row { flex: 1; }
.tour-gate-row.off { opacity: 0.72; }
.tour-badge {
  flex: none; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 4px 8px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap;
}
.tour-badge.ok { border-color: rgba(34,197,94,0.32); background: rgba(34,197,94,0.10); color: #86EFAC; }
.tour-badge.off { border-color: rgba(245,165,36,0.32); background: rgba(245,165,36,0.10); color: #F5C97B; }

.tour-wd { display: flex; align-items: center; gap: 10px; padding: 12px 0 14px; }
.tour-wd-leg { flex: 1; text-align: center; }
.tour-wd-leg span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--text-3); }
.tour-wd-leg b { display: block; font-family: var(--font-mono); font-size: 14px; margin-top: 3px; }
.tour-fake-btn {
  width: 100%; padding: 10px; border: 0; border-radius: 999px;
  background: var(--grad); color: #0A0A12;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  pointer-events: none;
}

.tour-ways { display: grid; gap: 10px; }
.tour-way { padding: 13px 14px; border-radius: var(--radius-sm); background: rgba(255,255,255,0.03); border: 1px solid var(--border); }
.tour-way svg { width: 18px; height: 18px; stroke: var(--violet); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 7px; }
.tour-way b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 3px; }
.tour-way span { display: block; font-size: 12px; line-height: 1.5; color: var(--text-2); }

.tour-note { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
.tour-mini { margin-top: 8px; }

.tour-foot { flex: none; display: flex; align-items: center; gap: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.tour-dots { display: flex; gap: 7px; }
.tour-dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.16); cursor: pointer; transition: background var(--t), transform var(--t); }
.tour-dot:hover { background: rgba(255,255,255,0.32); }
.tour-dot.on { background: var(--violet); transform: scale(1.25); }

.tour-actions { margin-left: auto; display: flex; gap: 9px; }
.tour-prev, .tour-next {
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  border: 1px solid var(--border-2); background: rgba(255,255,255,0.05); color: #fff;
  transition: background var(--t), transform var(--t), opacity var(--t);
}
.tour-prev:hover:not(:disabled), .tour-next:hover { background: rgba(255,255,255,0.10); }
.tour-prev:disabled { opacity: 0.35; cursor: default; }
.tour-next.final { background: var(--grad); border-color: transparent; color: #0A0A12; padding: 9px 22px; }
.tour-next.final:hover { transform: translateY(-1px); }

.tour-fine { flex: none; margin: 11px 0 0; text-align: center; font-size: 10.5px; color: var(--text-3); }

@media (max-width: 720px) {
  .tour { padding: 16px 16px 14px; border-radius: 20px; }
  .tour-body { grid-template-columns: 1fr; gap: 18px; padding: 14px 0 16px; }
  /* Copy leads on a small screen; the mock panel supports it underneath. */
  .tour-copy { order: -1; }
  .tour-copy h2 { font-size: 21px; }
  .tour-actions { margin-left: auto; }
  .tour-prev { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-back { animation: none; }
  .tour-panel { transition: none; }
  .tour-next.final:hover { transform: none; }
}

/* ── pre-first-cycle banner ────────────────────────────────────────────────
   Only visible until the first distribution lands. It exists because a fresh
   dashboard is otherwise all zeros, and a visitor cannot tell "not started
   yet" apart from "broken". */
.prelaunch {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 22px;
  margin-bottom: 20px;
  border-radius: var(--radius);
  background:
    radial-gradient(700px 220px at 12% -40%, rgba(139, 92, 246, 0.16), transparent 70%),
    var(--panel);
  border: 1px solid rgba(139, 92, 246, 0.26);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, var(--shadow);
}
.pre-mark { flex: none; padding-top: 2px; }
.pre-mark img { height: 40px; width: auto; display: block; filter: drop-shadow(0 4px 14px rgba(139,92,246,0.35)); }
.pre-body { min-width: 0; }
.prelaunch h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 19px; font-weight: 600; letter-spacing: -0.025em;
}
.prelaunch p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); max-width: 68ch; }
.prelaunch p b { color: #fff; font-variant-numeric: tabular-nums; }
.pre-actions { display: flex; flex-wrap: wrap; gap: 9px; }

@media (max-width: 560px) {
  .prelaunch { flex-direction: column; gap: 12px; padding: 17px 16px; }
  .pre-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── stake: the ordered path ───────────────────────────────────────────────
   Numbered because the layout alone implies the wrong order — the Stake box
   renders above the Deposit card, and a newcomer with an empty balance needs
   to be told to deposit first. Steps light up as they complete.

   Named `pathstep`, not `step`: `.steps`/`.step` already belong to the How it
   works cards further up this file, and reusing them silently reflowed that
   page from four columns to three. */
.pathsteps {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.pathstep {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 16px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--border);
  transition: border-color var(--t), background var(--t);
}
.pathstep-n {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-2);
  transition: background var(--t), color var(--t);
}
.pathstep b { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 3px; letter-spacing: -0.01em; }
/* Direct children only — the ticker symbol lives in a span inside the <b>, and
   a blanket `.pathstep span` turned it into a block, breaking the title over
   three lines. */
.pathstep > div > span { display: block; font-size: 12px; line-height: 1.5; color: var(--text-2); }
.pathstep .sym-slot { display: inline; font: inherit; color: inherit; white-space: nowrap; }
.pathstep em { font-style: normal; color: #fff; }

/* done — the user has cleared this step */
.pathstep.done { border-color: rgba(34, 197, 94, 0.28); background: rgba(34, 197, 94, 0.05); }
.pathstep.done .pathstep-n { background: rgba(34, 197, 94, 0.18); color: #86EFAC; }
/* now — the step they are on */
.pathstep.now { border-color: rgba(139, 92, 246, 0.38); background: rgba(139, 92, 246, 0.06); }
.pathstep.now .pathstep-n { background: var(--grad); color: #0A0A12; }

@media (max-width: 760px) {
  .pathsteps { grid-template-columns: 1fr; gap: 9px; }
  .pathstep { padding: 13px 14px; }
}

/* ── nav: not yet shipped ──────────────────────────────────────────────────
   A nav entry for something that does not exist. Rendered as a <span>, not an
   <a>, so it is genuinely inert rather than a link that silently does nothing:
   no hover lift, no pointer, and it is skipped by keyboard navigation. The
   badge is the whole point — the row has to read as deliberately unfinished
   rather than broken. */
.nav-item.nav-soon {
  cursor: default;
  color: var(--text-3);
  opacity: 0.72;
}
.nav-item.nav-soon:hover { background: none; color: var(--text-3); }
.nav-item.nav-soon:hover .ico { opacity: 0.82; }
.nav-item.nav-soon:active { transform: none; }
.nav-item.nav-soon .soon {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 999px;
  color: #C7B6FF;
  background: rgba(139, 92, 246, 0.14);
  border: 1px solid rgba(139, 92, 246, 0.3);
}

@media (max-width: 980px) {
  /* The sidebar collapses to icons; a text badge would overflow it. */
  .nav-item.nav-soon .soon { display: none; }
}