/* ═══════════════════════════════════════════════════════════════════════════
   tour.css — The Premiere layer: wallet deposit sheet + cinematic tour system.
   Loads after portal.css; uses its semantic tokens (--bg/--surface/--accent/
   --money/--muted/--border…) plus _tokens.css primitives. Every transition
   here is neutered by portal.css's global prefers-reduced-motion kill switch —
   that IS the reduced-motion design; JS effects gate themselves.

   Z ladder (site-wide, verified): sidebar 55 · topbar 60 · mb-nav 70-85 ·
   tb-menu 90 · app modal 200 · WALLET SHEET 210 · TOUR 500-530 · FX CANVAS 900
   · toast 1000.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── § Wallet sheet ───────────────────────────────────────────────────────── */

.tpw-backdrop {
  position: fixed; inset: 0; bottom: auto; height: var(--vvh, 100%); z-index: 210;
  background: rgba(4, 4, 6, 0.66);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.24s ease;
}
.tpw-backdrop.is-open { opacity: 1; pointer-events: auto; }
body.tpw-open { overflow: hidden; }

.tpw {
  width: min(480px, calc(100vw - 32px));
  max-height: min(92vh, var(--tpw-vvh, 92vh));
  display: flex; flex-direction: column;
  background: #0a0a0a;
  border: 1px solid var(--border-strong, #262626);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
  transform: translateY(14px) scale(0.985);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.tpw-backdrop.is-open .tpw { transform: none; }
.tpw-grab { display: none; }

/* Header: one row — title, step counter, close — over a hairline progress
   bar that is also the header/body divider. 18px shared left edge with the
   body text. */
.tpw-head {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 14px 13px 18px;
}
.tpw-back {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border, #1c1c1c);
  color: var(--muted, #8a8a8a); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.tpw-back:hover { color: var(--text, #f0f0f0); border-color: var(--border-strong, #2c2c2c); }
.tpw-head-mid { flex: 1; min-width: 0; }
.tpw-title {
  margin: 0; font-family: var(--font-display, inherit);
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text, #f2f2f2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tpw-step {
  flex: none; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--muted-2, #6f6f78); font-variant-numeric: tabular-nums;
}
.tpw-step:empty { display: none; }
.tpw-x {
  flex: none; width: 30px; height: 30px; border-radius: 9px; font-size: 19px; line-height: 1;
  background: transparent; border: 1px solid transparent; color: var(--muted, #8a8a8a); cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tpw-x:hover { color: var(--text, #f0f0f0); border-color: var(--border, #222); }

/* Hairline step progress — also the header/body divider. Flat, no glow.
   Neutral fill on purpose: the sheet's color rule is ONE green per scene (the
   primary CTA); everything structural stays grayscale. */
.tpw-prog { display: block; height: 2px; background: var(--border, #1c1c1c); }
.tpw-prog-fill {
  display: block; height: 100%; width: 0;
  background: rgba(255, 255, 255, 0.32);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Close guard — replaces the body (which is display-hidden, DOM intact) as a
   plain centered panel in the sheet's own design language. No tinted banner. */
.tpw-guard[hidden] { display: none; }
.tpw-guard { padding: 14px 18px calc(20px + env(safe-area-inset-bottom)); text-align: center; }
.tpw-guard-h {
  margin: 10px 0 6px; font-family: var(--font-display, inherit);
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--text, #f2f2f2);
}
.tpw-guard-p { margin: 0 auto 8px; max-width: 34em; font-size: 13px; line-height: 1.6; color: var(--muted, #9a9a9a); }
.tpw-body[hidden] { display: none; }

.tpw-body { padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; }
.tpw-anim { animation: tpwScene 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes tpwScene { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.tpw-lead { font-size: 13.5px; line-height: 1.6; color: var(--muted, #9a9a9a); margin: 4px 0 14px; }
.tpw-note {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; font-size: 12.5px;
  background: var(--surface, #101012); border: 1px solid var(--border, #1c1c1c); color: var(--muted, #9a9a9a);
}
.tpw-hint { font-size: 12px; line-height: 1.55; color: var(--muted-2, #6f6f78); margin: 10px 2px 0; }
.tpw-fine { font-size: 11.5px; line-height: 1.55; color: var(--muted-2, #6f6f78); margin: 12px 2px; }
.tpw-err { margin: 10px 2px 0; font-size: 12.5px; color: #fca5a5; }
.tpw-nowrap { white-space: nowrap; }

/* Coin grid. Each coin art file is a full-bleed disc on a shared 500x500
   viewBox, so the icon needs no plate, no ring and no per-asset background —
   one width/height renders the whole set at identical size. --coin carries the
   brand hue for hover only. */
.tpw-coin-icon {
  display: block; flex: none; border-radius: 50%;
  /* Hairline + soft drop so the discs sit crisply on the dark surface. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 6px 14px -6px rgba(0, 0, 0, 0.6);
}

.tpw-coins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.tpw-coin {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 8px 13px; border-radius: 15px; cursor: pointer;
  background: var(--surface, #101012); border: 1px solid var(--border, #1c1c1c);
  transition: border-color 0.16s ease, transform 0.14s ease, background 0.16s ease, box-shadow 0.2s ease;
}
.tpw-coin .tpw-coin-icon { margin-bottom: 7px; }
/* Inside the tiles the network is a whisper, not a bordered chip. */
.tpw-coin .tpw-coin-net {
  border: none; padding: 0; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
}
.tpw-coin[data-asset="btc"]  { --coin: #F7931A; }
.tpw-coin[data-asset="eth"]  { --coin: #627EEA; }
.tpw-coin[data-asset="bnb"]  { --coin: #F0B90B; }
.tpw-coin[data-asset="usdt"] { --coin: #50AF95; }
.tpw-coin[data-asset="usdc"] { --coin: #2775CA; }
.tpw-coin[data-asset="ltc"]  { --coin: #345D9D; }
.tpw-coin:hover {
  background: #131316; transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--coin, #f59e0b) 55%, transparent);
  box-shadow: 0 10px 22px -14px var(--coin, #f59e0b);
}
.tpw-coin:active { transform: scale(0.965); }
.tpw-coin:focus-visible { outline: 2px solid var(--coin, #f59e0b); outline-offset: 2px; }
.tpw-coin-name { font-size: 13.5px; font-weight: 700; color: var(--text, #f0f0f0); letter-spacing: 0.01em; }
.tpw-coin-net {
  font-size: 10px; font-weight: 600; letter-spacing: 0.08em; color: var(--muted-2, #6f6f78);
  padding: 2px 7px; border-radius: 99px; border: 1px solid var(--border, #222); white-space: nowrap;
}

/* Amount scene */
.tpw-picked {
  display: flex; align-items: center; gap: 9px; margin: 2px 0 16px;
  padding: 8px 10px; border-radius: 12px;
  background: var(--surface, #101012); border: 1px solid var(--border, #1c1c1c);
}
.tpw-picked-name { font-size: 14px; font-weight: 700; color: var(--text, #f2f2f2); }
.tpw-picked-swap {
  margin-left: auto; background: none; border: none; cursor: pointer; padding: 4px 2px;
  font-size: 12px; font-weight: 600; color: var(--muted, #9a9a9a);
}
.tpw-picked-swap:hover { color: var(--text, #eee); text-decoration: underline; text-underline-offset: 2px; }
.tpw-amt-wrap {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 4px 10px;
  border-bottom: 1px solid var(--border-strong, #262626); margin-bottom: 14px;
  transition: border-color 0.18s ease;
}
/* Both fields are styled containers, so the global 2px accent box around them
   reads as a stray rectangle. Focus shows on the underline / the field itself
   — in neutral white, so the CTA keeps the only green on the scene. */
.tpw-amt-wrap:focus-within { border-bottom-color: rgba(255, 255, 255, 0.5); }
.tpw-amt:focus-visible, .tpw-txid:focus-visible { outline: none; }
.tpw-amt-cur { font-family: var(--font-display, inherit); font-size: 26px; font-weight: 700; color: var(--muted-2, #6f6f78); }
.tpw-amt {
  flex: 1; min-width: 0; background: transparent; border: none; outline: none;
  font-family: var(--font-display, inherit); font-size: 40px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text, #f4f4f4); font-variant-numeric: tabular-nums; padding: 0;
}
.tpw-amt::placeholder { color: #2e2e33; }
.tpw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.tpw-chip {
  padding: 8px 13px; border-radius: 99px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--surface, #101012); color: var(--muted, #9a9a9a);
  border: 1px solid var(--border, #1e1e1e); transition: all 0.14s ease;
}
.tpw-chip:hover { border-color: var(--border-strong, #2e2e2e); color: var(--text, #eee); }
.tpw-chip.is-on {
  background: #191920; border-color: rgba(255, 255, 255, 0.42);
  color: var(--text, #f2f2f2);
}

/* Buttons */
.tpw-btn {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 16px; margin-top: 10px; border-radius: 12px;
  font-size: 14.5px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}
.tpw-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tpw-btn-primary {
  background: var(--accent, #f59e0b); color: var(--accent-ink, #1a1102); font-weight: 800;
  box-shadow: 0 2px 14px var(--accent-glow, rgba(245, 158, 11, 0.3));
}
.tpw-btn-primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.07); box-shadow: 0 3px 18px var(--accent-glow, rgba(245, 158, 11, 0.35)); }
.tpw-btn-line { background: transparent; border-color: var(--border-strong, #2a2a2a); color: var(--text, #eee); }
.tpw-btn-line:hover:not(:disabled) { border-color: #3a3a3a; }
.tpw-btn-line.is-copied { border-color: rgba(52, 211, 153, 0.6); color: var(--money, #34d399); }
.tpw-btn-ghost { background: transparent; color: var(--muted, #9a9a9a); }
.tpw-btn-ghost:hover:not(:disabled) { color: var(--text, #eee); }
.tpw-btn-sm { width: auto; padding: 9px 13px; font-size: 12.5px; margin-top: 0; border-radius: 10px; }
.tpw-btn-xs { width: auto; padding: 6px 10px; font-size: 11.5px; margin-top: 0; border-radius: 8px; }

/* Address / txid summary strip — the running "what am I sending" line */
.tpw-sum {
  display: flex; align-items: center; gap: 11px; margin: 2px 0 14px;
  padding: 11px 13px; border-radius: 13px;
  background: var(--surface, #101012); border: 1px solid var(--border, #1c1c1c);
}
.tpw-sum-mid { flex: 1; min-width: 0; }
.tpw-sum-amt {
  font-family: var(--font-display, inherit); font-size: 19px; font-weight: 700;
  letter-spacing: -0.01em; color: var(--text, #f4f4f4); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.tpw-sum-sub { font-size: 12px; color: var(--muted, #8f8f97); margin-top: 1px; }

/* Address scene. QR centred so the address gets the sheet's full width — a
   BTC bech32 or an 0x address wraps badly in a side column. */
.tpw-qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 14px; }
.tpw-qr {
  width: 172px; padding: 8px; border-radius: 14px; background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.8);
}
.tpw-qr svg { display: block; width: 100%; height: auto; }
.tpw-qr-cap { margin: 0; font-size: 11.5px; color: var(--muted-2, #6f6f78); }
.tpw-addr-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2, #6f6f78); margin-bottom: 6px; }
.tpw-addr-block {
  display: flex; align-items: stretch; gap: 8px; margin-bottom: 12px;
  padding: 4px 4px 4px 11px; border-radius: 11px;
  background: var(--surface, #0d0d0d); border: 1px solid var(--border, #1e1e1e);
  transition: border-color 0.15s ease;
}
.tpw-addr-block:hover { border-color: var(--border-strong, #2a2a2a); }
.tpw-addr {
  flex: 1; min-width: 0; align-self: center;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; line-height: 1.5;
  word-break: break-all; color: var(--text, #eee); padding: 6px 0;
}
.tpw-copy {
  flex: none; align-self: center; padding: 9px 13px; border-radius: 9px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.01em;
  background: var(--surface-raise, #17171a); color: var(--text, #eee);
  border: 1px solid var(--border-strong, #2a2a2a);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.tpw-copy:hover { border-color: #3a3a3a; background: #1c1c20; }
.tpw-copy.is-copied { color: var(--money, #34d399); border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.08); }
.tpw-warn {
  padding: 10px 13px; border-radius: 11px; font-size: 12.5px; line-height: 1.55;
  background: rgba(245, 158, 11, 0.07); border: 1px solid rgba(245, 158, 11, 0.32); color: #fcd34d;
}
.tpw-refrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; font-size: 12.5px; color: var(--muted, #9a9a9a);
}
.tpw-ref {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; font-weight: 600;
  color: var(--text, #eee); background: var(--surface, #0d0d0d);
  border: 1px solid var(--border-strong, #2a2a2a); border-radius: 8px; padding: 5px 10px; cursor: pointer;
  transition: border-color 0.15s ease;
}
.tpw-ref:hover { border-color: #3a3a3a; }
.tpw-ref.is-copied { color: var(--money, #34d399); border-color: rgba(52, 211, 153, 0.5); background: rgba(52, 211, 153, 0.08); }

/* TXID scene */
.tpw-txid-row { display: flex; gap: 8px; align-items: center; }
.tpw-txid {
  flex: 1; min-width: 0; padding: 12px 13px; border-radius: 11px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px;
  background: var(--surface, #0d0d0d); color: var(--text, #eee);
  border: 1px solid var(--border-strong, #262626); outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tpw-txid:focus { border-color: rgba(255, 255, 255, 0.45); box-shadow: none; }

/* Done scene */
.tpw-busy { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 44px 0; color: var(--muted, #9a9a9a); font-size: 13.5px; }
.tpw-done-burst { display: flex; justify-content: center; padding: 10px 0 4px; }
/* Solid money-green disc, check punched out in the sheet's own bg. No glow. */
.tpw-done-check {
  width: 64px; height: 64px; border-radius: 50%; color: #0d0d10;
  background: var(--money, #34d399);
  display: inline-flex; align-items: center; justify-content: center;
  animation: tpwPop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tpwPop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.tpw-done-h {
  margin: 10px 0 4px; text-align: center; font-family: var(--font-display, inherit);
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--text, #f2f2f2);
}
.tpw-list { margin: 14px 0 4px; border: 1px solid var(--border, #1c1c1c); border-radius: 12px; overflow: hidden; }
.tpw-list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 13px; font-size: 13px; color: var(--muted, #9a9a9a);
}
.tpw-list-row + .tpw-list-row { border-top: 1px solid var(--border, #1a1a1a); }
.tpw-list-row strong { color: var(--text, #efefef); font-variant-numeric: tabular-nums; }
.tpw-list-coin { display: inline-flex; align-items: center; gap: 7px; }
.tpw-btn-line.is-copied, .tpw-ref.is-copied { border-color: var(--money-border, rgba(52, 211, 153, 0.5)); color: var(--money, #34d399); }

/* Mobile: same centered card as desktop (2026-08-06 owner ask — was a bottom
   sheet). --tpw-vvh keeps it clear of the iOS keyboard. */
@media (max-width: 720px) {
  .tpw {
    width: calc(100vw - 24px);
    max-height: min(88dvh, var(--tpw-vvh, 88dvh));
  }
  .tpw-coins { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .tpw-coin { padding: 13px 5px 11px; gap: 7px; }
  .tpw-coin:hover { transform: none; }
  .tpw-coin-net { font-size: 9px; letter-spacing: 0.05em; padding: 2px 5px; }
  .tpw-qr { width: 158px; }
  .tpw-amt { font-size: 34px; }
  .tpw-txid { font-size: 16px; }   /* under 16px, iOS zooms the page on focus */
}

/* ── § Tour system — letterbox, spotlight, dialogue, celebrations ─────────── */
@media (max-height: 480px) { .tour-bar { height: 22px !important; } }

/* Spotlight: the hole div paints the dim via a huge shadow; blockers do the
   hit-testing. Camera moves are CSS transitions of the rect. */
.tour-spot {
  position: fixed; z-index: 503; pointer-events: none; border-radius: 13px;
  box-shadow: 0 0 0 200vmax rgba(4, 4, 7, 0.78);
  border: 1.5px solid var(--accent, #f59e0b);
  transition: top 0.5s cubic-bezier(0.22, 1, 0.36, 1), left 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              width 0.5s cubic-bezier(0.22, 1, 0.36, 1), height 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease;
}
.tour-spot::after {
  content: ''; position: absolute; inset: -7px; border-radius: 18px;
  border: 1px solid var(--accent, #f59e0b);
  animation: tourRing 2.2s ease-in-out infinite;
}
@keyframes tourRing {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.02); }
}
.tour-vignette {
  position: fixed; inset: 0; z-index: 501; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.5) 100%);
  opacity: 0; transition: opacity 0.5s ease;
}
.tour-vignette.is-in { opacity: 1; }

/* Hit shields: full blocker or 4 edge panels around an interactive hole */
.tour-shield { position: fixed; z-index: 502; background: transparent; }

/* Letterbox bars */
.tour-bar {
  position: fixed; left: 0; right: 0; z-index: 510; background: #050506;
  height: clamp(40px, 6.5vh, 84px); pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.tour-bar-top { top: 0; transform: translateY(-101%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04); }
.tour-bar-bot { bottom: 0; transform: translateY(101%); height: calc(clamp(40px, 6.5vh, 84px) + env(safe-area-inset-bottom)); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04); }
.tour-bar.is-in { transform: none; }

/* Title cards */
.tour-title {
  position: fixed; inset: 0; z-index: 530; background: #050506;
  display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center;
  gap: 14px; padding: 28px; text-align: center; cursor: pointer;
  opacity: 0; transition: opacity 0.5s ease;
  overflow-y: auto;
}
.tour-title.is-in { opacity: 1; }
.tour-title-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--accent, #f59e0b);
}
.tour-title-h {
  font-family: var(--font-display, inherit); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(30px, 6.4vw, 56px); line-height: 1.1; color: #f4f4f6; max-width: 17ch;
  animation: tourTrackIn 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tourTrackIn {
  from { opacity: 0; letter-spacing: 0.12em; transform: translateY(8px); }
  to { opacity: 1; letter-spacing: -0.02em; transform: none; }
}
.tour-title-sub { font-size: 15px; line-height: 1.6; color: #a4a4ad; max-width: 44ch; }
.tour-title-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; }
.tour-title-hint { font-size: 11.5px; color: #5b5b63; letter-spacing: 0.04em; }

/* Dialogue card */
.tour-card {
  position: fixed; z-index: 520; width: min(360px, calc(100vw - 24px));
  background: rgba(8, 8, 8, 0.97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--border-strong, #2a2a2a); border-radius: 16px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6);
  padding: 14px 15px 13px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              top 0.45s cubic-bezier(0.22, 1, 0.36, 1), left 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.tour-card.is-in { opacity: 1; transform: none; }
.tour-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tour-gem { display: inline-flex; filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.5)); animation: tourGem 3s ease-in-out infinite; }
@keyframes tourGem { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.tour-card-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-2, #6f6f78);
}
.tour-dots { display: flex; gap: 5px; margin-left: auto; }
.tour-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong, #2c2c2c); transition: background 0.2s ease; }
.tour-dot.is-on { background: var(--accent, #f59e0b); box-shadow: 0 0 8px var(--accent-glow, rgba(245, 158, 11, 0.5)); }
.tour-dot.is-done { background: var(--accent, #f59e0b); opacity: 0.4; }
.tour-card-text { font-size: 14.5px; line-height: 1.62; color: #e6e6ea; min-height: 46px; }
.tour-card-text strong, .tour-card-text b { color: #fff; }
.tour-card-text em { color: var(--accent-2, #fbbf24); font-style: normal; }
.tour-cursor { display: inline-block; width: 7px; height: 15px; margin-left: 2px; vertical-align: -2px;
  background: var(--accent, #f59e0b); animation: tourBlink 0.85s steps(1) infinite; }
.tour-gem { filter: drop-shadow(0 0 8px var(--accent-glow, rgba(245, 158, 11, 0.5))); }
@keyframes tourBlink { 50% { opacity: 0; } }
.tour-card-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.tour-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 11px 18px; border-radius: 11px; font-size: 13.5px; font-weight: 800; cursor: pointer;
  background: var(--accent, #f59e0b); color: var(--accent-ink, #1a1102); border: none;
  transition: transform 0.12s ease, box-shadow 0.2s ease, filter 0.15s ease;
}
.tour-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.tour-skip {
  background: none; border: none; padding: 12px 10px; min-height: 44px; cursor: pointer;
  font-size: 12px; color: var(--muted-2, #6f6f78); margin-left: auto;
}
.tour-skip:hover { color: var(--muted, #9a9a9a); text-decoration: underline; text-underline-offset: 2px; }

/* 1000px, matching .mb-nav's breakpoint (portal.css) — 721-1000px used to get
   the desktop math and park the card under the tab bar. --tour-nav-h is the
   MEASURED tab-bar clearance (tour.js syncCardChrome), --tour-kb the live
   keyboard inset from visualViewport. */
@media (max-width: 1000px) {
  .tour-card {
    left: 10px !important; right: 10px; width: auto;
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom) + var(--tour-nav-h, 78px) + var(--tour-kb, 0px));
  }
  .tour-card.tour-card--nonav { bottom: calc(env(safe-area-inset-bottom) + 14px + var(--tour-kb, 0px)); }
  .tour-card.tour-card--top { top: calc(env(safe-area-inset-top) + 12px) !important; bottom: auto; }
}

/* Ambient coach chip — the tour waits while the user works the real UI */
.tour-coach {
  position: fixed; z-index: 515; right: 14px;
  bottom: calc(env(safe-area-inset-bottom) + var(--tour-nav-h, 84px) + var(--tour-kb, 0px) + 6px);
  display: flex; align-items: center; gap: 9px; max-width: min(300px, calc(100vw - 28px));
  padding: 10px 14px; border-radius: 14px;
  background: rgba(8, 8, 8, 0.96); border: 1px solid var(--accent-faint-border, rgba(245, 158, 11, 0.4));
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 0 22px var(--accent-soft, rgba(245, 158, 11, 0.12));
  font-size: 12.5px; line-height: 1.5; color: #e6e6ea;
  animation: tourCoachIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tourCoachIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 1001px) { .tour-coach { bottom: 18px; } }

/* Funds-landed count-up interrupt */
.tour-countup {
  position: fixed; inset: 0; z-index: 530;
  background: radial-gradient(90% 70% at 50% 40%, #0b0a08, #050506 78%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center;
  gap: 10px; padding: 28px; text-align: center;
  overflow-y: auto;   /* landscape phones: the stack outgrows the height */
  opacity: 0; transition: opacity 0.5s ease;
}
.tour-countup.is-in { opacity: 1; }
.tour-countup-eyebrow {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--money, #34d399);
}
.tour-countup-amt {
  font-family: var(--font-display, inherit); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(52px, 13vw, 104px); line-height: 1; color: var(--accent, #fbbf24);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 44px var(--accent-glow, rgba(245, 158, 11, 0.35));
  max-width: 100%; overflow-wrap: anywhere;
}
.tour-countup-h {
  font-family: var(--font-display, inherit); font-size: clamp(19px, 3vw, 26px); font-weight: 700;
  color: #f4f4f6; margin-top: 8px;
}
.tour-countup-sub { font-size: 14.5px; color: #a4a4ad; }
.tour-countup .tour-btn { margin-top: 20px; padding: 12px 22px; font-size: 14.5px; }
.tour-countup .tour-skip { margin: 8px 0 0; }

/* FX canvas (confetti / particles) */
.tour-fx-canvas { position: fixed; inset: 0; z-index: 900; pointer-events: none; }

/* The /demo showcase pill (z 9000) must never sit over tour dialogue or the
   wallet sheet — hide it while either layer is up. */
body.tour-open #tier-demo-banner, body.tpw-open #tier-demo-banner { display: none; }

/* ── § Dev-only tutorial controls (mounted by tour.js on localhost ONLY) ──── */
/* z 75: above content + the mobile tab bar (70), UNDER the mb-sheet/backdrop
   (80/85) and every modal — the dev pill must never photobomb a real surface. */
.tp-dev { position: fixed; z-index: 75; right: 14px; bottom: 14px; font-family: var(--font-sans, system-ui, sans-serif); }
@media (max-width: 720px) { .tp-dev { right: 10px; bottom: calc(env(safe-area-inset-bottom) + 74px); } }
body.tour-open .tp-dev, body.tpw-open .tp-dev { display: none; }
.tp-dev-toggle {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; cursor: pointer;
  font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--muted, #b5b5b5);
  background: rgba(8, 8, 8, .94); border: 1px solid var(--border-strong, #2a2a2a);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .12s ease, border-color .12s ease;
}
.tp-dev-toggle:hover { color: var(--text, #fff); border-color: var(--accent, #88ff6a); }
.tp-dev-menu {
  position: absolute; right: 0; bottom: calc(100% + 8px); width: 236px;
  display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 14px;
  background: #0a0a0a; border: 1px solid var(--border-strong, #2a2a2a); box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.tp-dev-menu[hidden] { display: none; }
.tp-dev-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-2, #6f6f78); padding: 4px 6px 6px;
}
.tp-dev-state { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted, #9a9a9a); font-variant-numeric: tabular-nums; }
.tp-dev-menu button {
  text-align: left; padding: 9px 10px; border-radius: 9px; cursor: pointer;
  font-size: 12.5px; font-weight: 500; font-family: inherit;
  background: var(--surface, #131316); color: var(--text, #eee); border: 1px solid var(--border, #1e1e1e);
  transition: border-color .12s ease, background .12s ease;
}
.tp-dev-menu button:hover { border-color: var(--accent, #88ff6a); background: #17171b; }
.tp-dev-note { font-size: 10px; color: var(--muted-2, #6f6f78); padding: 5px 6px 2px; line-height: 1.45; }
.tp-dev-note code { font-family: var(--font-mono, ui-monospace, monospace); color: var(--muted, #9a9a9a); }