/* ════════════════════════════════════════════════════════════════════
   review — Watch-page re-skin (additive layer)
   product / design

   Purpose: make the app view (#wallet-view) a seamless continuation of
   the review landing (#sw-landing): same palette, same card language,
   same type register ("intelligence-observatory-meets-cinema").

   Contract:
   - Loaded AFTER styles.css. This file only overrides; it renames and
     removes nothing. app.js drives the DOM; we style what exists.
   - Every rule is scoped under #wallet-view so nothing leaks into the
     landing or other views. New tokens are declared on #wallet-view,
     never :root.
   - Dark is default; light is html[data-theme="light"] #wallet-view
     and is first-class (product reads light).
   - NOTE on specificity: the #wallet-view prefix beats styles.css's
     class-only mobile blocks, so every property we set that styles.css
     adjusts responsively is re-mirrored in the responsive section at
     the bottom of this file. If you add a property here, check
     styles.css's @media blocks for a counterpart.

   Surfaces pass 1 (sections 0–6): balance header, Wallet Health (hero),
   tab bar, transaction history.
   Surfaces pass 2 (sections 7–13): market lens/console, collectibles,
   tools (Write/Verify/Trace inner forms), Iconic, Wallet+ account.
   Out of scope for this file (outside #wallet-view, noted, untouched):
   the .wallet-plus-modal dialogs, the #wallet-plus-view route shell,
   the hidden #wallet-trace-view dogfood route, and the JS-created
   .community-payment-modal.
   ════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────
   0 · Scoped tokens (landing values, app-side)
   ──────────────────────────────────────────────── */
#wallet-view {
  /* Landing dark palette — global tokens already match; these add the
     landing-only values the app never had. */
  --wv-bg: #10141F;                     /* landing --swr-bg, deeper than app #141926 */
  --wv-btc-ink: var(--btc);             /* orange that is TEXT-safe per theme */
  --wv-btc-hover: #FFA94D;              /* landing --swr-btc-hover */
  --wv-btn-ink: #0A0D16;                /* ink on filled orange CTA */
  --wv-chip-bg: rgba(26, 32, 51, 0.5);  /* landing --swr-chip-bg */
  --wv-card-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.8),
                    0 0 0 1px rgba(247, 147, 26, 0.06);
  --wv-inset-bg: rgba(255, 255, 255, 0.025);  /* quiet inset panels inside cards */
  --wv-row-hover: rgba(247, 147, 26, 0.05);
  --wv-details-bg: rgba(0, 0, 0, 0.18);       /* tx expand pane */
  --wv-radius: 14px;                          /* landing card radius */
  --wv-pad: 24px;                             /* landing card padding */
  /* Lift under chrome controls (console, balance swap) so they read as
     objects instead of outlines. Paint-only — never changes geometry. */
  --wv-control-lift: 0 1px 2px rgba(0, 0, 0, 0.35);

  /* Deep observatory floor under the cards — same relationship the
     landing has to the topbar (#10141F region below a #141926 bar). */
  background: var(--wv-bg);
  padding-bottom: 56px;
}

html[data-theme="light"] #wallet-view {
  /* Landing light palette (cool paper) replaces the app's warm-paper
     light theme INSIDE the wallet view only. These override the global
     tokens for every descendant, which is what makes light feel like
     one product across landing → app. */
  /* Warm-paper retune (product 2026-07-16, Claude.ai reference): the cool
     blue-white family reads as "white colors" — oat/ivory instead. Kept in
     lockstep with the landing's #sw-landing light tokens (index.html). */
  --wv-bg: #F0EEE6;
  --bg: #F0EEE6;
  --surface: #FAF9F5;
  --raised: #F1EFE7;
  --border: #DED9CC;
  --border-strong: #C8C1B0;
  --text: #1F1E1D;
  --text-2: #66625A;
  /* Landing uses #8A8478 for text-3, but that fails AA at body sizes.
     #6B665D keeps the warm hue at ≥4.5:1 on ivory — legibility first. */
  --text-3: #6B665D;
  --positive: #16A34A;
  --negative: #DC2626;
  --warning: #D97706;
  --info: #0277BD;
  --wv-btc-ink: #B4670A;               /* landing --swr-btc-ink */
  --wv-btc-hover: #E07E00;
  --wv-btn-ink: #1A1204;
  --wv-chip-bg: rgba(250, 249, 245, 0.7);
  --wv-card-shadow: 0 20px 44px -26px rgba(64, 54, 32, 0.22),
                    0 0 0 1px rgba(247, 147, 26, 0.08);
  --wv-inset-bg: rgba(50, 44, 30, 0.035);
  --wv-row-hover: rgba(247, 147, 26, 0.06);
  --wv-details-bg: rgba(64, 54, 32, 0.04);
  /* Warm ink, not a dark-era black shadow, or the lift greys the paper. */
  --wv-control-lift: 0 1px 2px rgba(64, 54, 32, 0.10);
}

/* Let the content column breathe like the landing (was 768px). Below
   ~900px viewport this is a no-op — the founder-approved narrow
   rendering is untouched. */
#wallet-view .wallet-container {
  max-width: 880px;
}

/* Align the shared topbar to the 880px app body ONLY in the app view.
   The global topbar caps at --content-width (768px desktop); the app body
   is 880px, so the header sat narrower than the body — the desktop
   header/body misalignment. Scoped via :has() to the visible #wallet-view
   (app.js sets it display:flex on lookup, display:none on the landing), so
   the approved review landing nav width is untouched. Self-limiting on
   narrow: 880 > viewport there, so it fills 100% like before. */
.topbar:has(~ #wallet-view:not([style*="none"])) {
  max-width: 880px;
}

/* Same alignment for the shared footer — it also caps at --content-width
   (768px desktop), so its divider and text sat inboard of the 880px app
   body (founder catch, design). The footer follows #wallet-view in the DOM,
   so a plain sibling combinator scopes it; privacy/contact/landing keep
   the 768px footer. */
#wallet-view:not([style*="none"]) ~ .footer {
  max-width: 880px;
}

/* Shared micro-label register (landing .k): 11px, wide tracking, btc ink. */
#wallet-view .cmd-addr-label,
#wallet-view .cmd-chart-panel--header .mini-chart-label,
#wallet-view .tx-section-title {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wv-btc-ink);
}

/* ────────────────────────────────────────────────
   1 · Balance header — the confident hero figure
   ──────────────────────────────────────────────── */
#wallet-view .cmd-header.cmd-header-has-chart {
  height: auto;
  min-height: 196px;
  margin: 20px 0 0;                     /* detach from health card (was -1px weld) */
  padding: var(--wv-pad) 26px;
  border: 1px solid var(--border);
  border-radius: var(--wv-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 55%),
    var(--surface);
  box-shadow: var(--wv-card-shadow);
}

#wallet-view .cmd-header-left {
  padding-right: 26px;
  border-right: 1px solid var(--border);
  gap: 16px;
}

#wallet-view .cmd-header-right {
  padding-left: 26px;
}

/* Address line: kicker + refined mono chip + copy affordance */
#wallet-view .cmd-addr-sep { display: none; }  /* the "·" — kicker/chip split carries it now */

#wallet-view .cmd-addr-value {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--text);
  background: var(--wv-chip-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
}
#wallet-view .cmd-header-has-chart .cmd-addr-value {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Wallet+ scope <select> host reuses this class — keep it naked. */
#wallet-view .cmd-addr-value.wallet-plus-scope-host {
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-sans);   /* hosts a <select>, not an address */
}

#wallet-view .cmd-addr-copy {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--text-3);
}
#wallet-view .cmd-addr-copy svg { width: 12px; height: 12px; }

/* Balance: drop the orange bubble; let the figure carry the room —
   landing hero-number register. Colors stay on the existing
   [data-value-type] rules in styles.css (BTC orange / fiat text). */
#wallet-view .cmd-balance-card {
  background: transparent;
  border: none;
  padding: 4px 0;
  gap: 18px;
}

#wallet-view .cmd-balance-primary {
  font-size: clamp(30px, 4.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

#wallet-view .cmd-balance-secondary {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  opacity: 0.85;
}

#wallet-view .cmd-balance-values { gap: 4px; }

#wallet-view .qr-icon-btn {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--wv-chip-bg);
  border: 1px solid var(--border);
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
#wallet-view .qr-icon-btn:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

/* Sits ON the balance card (--surface), so it takes the next rung up the
   ladder (--raised) plus a lift. The redesign pass had flattened this to
   transparent, which read as see-through rather than as a control
   (product 2026-07-16). Orange stays the hover reward, not the rest state. */
#wallet-view .balance-swap-btn {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--raised);
  border: 1px solid var(--border-strong);
  box-shadow: var(--wv-control-lift);
}

/* Stats: clean cells — micro-label over a confident value */
#wallet-view .cmd-stats-row { gap: 20px; }

#wallet-view .cmd-stat {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

#wallet-view .cmd-stat-label {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

#wallet-view .cmd-stat-value {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

#wallet-view .cmd-stat-sep {
  width: 1px;
  height: 26px;
  background: var(--border);
  align-self: center;
}

/* Whole-life value chart, framed like a landing stage */
#wallet-view .cmd-chart-panel--header .mini-chart-header { margin-bottom: 8px; }

#wallet-view #chart-scale-toggle {
  min-width: 34px;
  height: 20px;
  padding: 2px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--wv-chip-bg);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
#wallet-view #chart-scale-toggle:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

/* Price-status pill → landing eyebrow-pill language */
#wallet-view .price-status-pill {
  padding: 3px 10px;
  border: 1px solid var(--border);
  background: var(--wv-chip-bg);
  color: var(--wv-btc-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ────────────────────────────────────────────────
   2 · Wallet Health — THE hero card (directive)
   Evidence-first: these are readouts, not scores. The orange ring is
   brand emphasis (landing "featured" treatment), never a verdict cue.
   ──────────────────────────────────────────────── */
#wallet-view .ai-insight-section {
  margin: 14px 0 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--btc) 30%, var(--border));
  border-radius: var(--wv-radius);
  background:
    radial-gradient(120% 130% at 50% -30%, rgba(247, 147, 26, 0.07), transparent 55%),
    var(--surface);
  box-shadow:
    0 0 0 1px rgba(247, 147, 26, 0.14),
    var(--wv-card-shadow);
  overflow: hidden;
}
#wallet-view .ai-insight-section:has(details[open]) { padding-bottom: 0; }

#wallet-view .ai-insight-header {
  padding: 16px 22px;
  gap: 10px;
  min-height: 0;
  transition: background 0.15s ease;
}
#wallet-view .ai-insight-header:hover {
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
#wallet-view .ai-insight-section:has(details[open]) .ai-insight-header {
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
}

#wallet-view .ai-insight-icon {
  color: var(--wv-btc-ink);
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 0 12px rgba(247, 147, 26, 0.5);
}

#wallet-view .ai-insight-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  color: var(--text);
}

/* Open/close affordance the <details> never had */
#wallet-view .ai-insight-header::after {
  content: "\25BE";                    /* ▾ */
  color: var(--text-3);
  font-size: 12px;
  line-height: 1;
  margin-left: 8px;
  transform: rotate(-90deg);
  transition: transform 0.18s ease;
}
#wallet-view .ai-insight-details[open] .ai-insight-header::after {
  transform: none;
}

/* Status chips — one tasteful language for summary pills, strip pills
   and per-check states. Tint + ink per status; no glyph verdicts. */
#wallet-view .health-summary-pill,
#wallet-view .wallet-health-strip-pill,
#wallet-view .health-status {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.5;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}

#wallet-view .health-status { min-width: 0; }

#wallet-view .health-summary-pill.good,
#wallet-view .health-status.good {
  color: var(--positive);
  background: color-mix(in srgb, var(--positive) 10%, transparent);
  border-color: color-mix(in srgb, var(--positive) 26%, transparent);
}
#wallet-view .health-summary-pill.warning,
#wallet-view .health-status.warning {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 11%, transparent);
  border-color: color-mix(in srgb, var(--warning) 28%, transparent);
}
#wallet-view .health-summary-pill.alert,
#wallet-view .health-status.alert {
  color: var(--negative);
  background: color-mix(in srgb, var(--negative) 10%, transparent);
  border-color: color-mix(in srgb, var(--negative) 28%, transparent);
}
#wallet-view .health-summary-pill.info,
#wallet-view .health-status.info {
  color: var(--info);
  background: color-mix(in srgb, var(--info) 9%, transparent);
  border-color: color-mix(in srgb, var(--info) 24%, transparent);
}

#wallet-view .wallet-health-strip-pill { gap: 8px; background: var(--wv-chip-bg); }
#wallet-view .wallet-health-strip-pill.good    { border-color: color-mix(in srgb, var(--positive) 26%, transparent); }
#wallet-view .wallet-health-strip-pill.warning { border-color: color-mix(in srgb, var(--warning) 28%, transparent); }
#wallet-view .wallet-health-strip-pill.alert   { border-color: color-mix(in srgb, var(--negative) 28%, transparent); }
#wallet-view .wallet-health-strip-pill.info    { border-color: color-mix(in srgb, var(--info) 24%, transparent); }

/* The readouts: title · state chip · plain-language evidence */
#wallet-view .wallet-health-section {
  padding: 6px 22px 20px;
  gap: 0;
}

#wallet-view .health-check {
  display: grid;
  grid-template-columns: 148px max-content minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
}
#wallet-view .health-check + .health-check {
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

#wallet-view .health-title {
  width: auto;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}

#wallet-view .health-comment {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}

/* Wallet+ multi-card groups */
#wallet-view .health-card-group {
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
#wallet-view .health-card-group:first-child { border-top: none; padding-top: 6px; }

#wallet-view .health-card-group-header {
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.1em;
}
#wallet-view .health-card-group-name { color: var(--text); font-weight: 700; }
#wallet-view .health-card-group-addr {
  font-size: 11.5px;
  color: var(--text-3);
}

/* ────────────────────────────────────────────────
   3 · Tab bar — quiet segmented nav, landing register
   ──────────────────────────────────────────────── */
#wallet-view .wallet-tabs {
  margin: 26px 0 4px;
  padding: 0;
  gap: 2px;
  background: transparent;
  border-top: none;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

#wallet-view .wallet-tab {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
  padding: 12px 15px;
  border-bottom: 2px solid transparent;
  border-radius: 8px 8px 0 0;
}

#wallet-view .wallet-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

#wallet-view .wallet-tab.active {
  color: var(--text);
  background: transparent;
  border-bottom: 2px solid var(--btc);
  box-shadow: none;
}

#wallet-view .wallet-tab-sep {
  background: var(--border);
  margin: 12px 10px;
}

/* Tools trigger: same quiet register; active tool shows in orange ink */
#wallet-view .wt-scheme-a .wallet-tools-trigger {
  background: transparent;
  border-radius: 8px 8px 0 0;
  padding: 12px 13px;
}
#wallet-view .wt-scheme-a .wallet-tools-menu:has(.wallet-tools-item.active) .wallet-tools-trigger {
  background: transparent;
  color: var(--wv-btc-ink);
}

#wallet-view .wt-scheme-a .wallet-tools-popover {
  min-width: 168px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--wv-card-shadow);
}
#wallet-view .wt-scheme-a .wallet-tools-popover .wallet-tools-item {
  font-size: 13px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 8px;
  border-bottom: none;               /* menu items never carry the tab underline */
  color: var(--text-2);
}
#wallet-view .wt-scheme-a .wallet-tools-popover .wallet-tools-item.active {
  border-bottom: none;
  background: color-mix(in srgb, var(--btc) 8%, transparent);
}
#wallet-view .wt-scheme-a .wallet-tools-popover .wallet-tools-item:hover {
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
}
#wallet-view .wt-scheme-a .wallet-tools-popover .wallet-tools-item.active {
  color: var(--wv-btc-ink);
}

/* Login — the single filled CTA, exactly the landing's .watch-btn idiom */
#wallet-view .wt-scheme-a .wt-hero {
  background: var(--btc);
  color: var(--wv-btn-ink);
  border: 1px solid var(--btc);
  border-radius: 9px;
  font-size: 13px;
  font-weight: 650;
  padding: 8px 18px;
  transition: background 0.15s ease, transform 0.15s ease;
}
#wallet-view .wt-scheme-a .wt-hero:hover {
  background: var(--wv-btc-hover);
  border-color: var(--wv-btc-hover);
  color: var(--wv-btn-ink);
  transform: translateY(-1px);
}
#wallet-view .wt-scheme-a .wt-hero.active {
  background: var(--btc);
  border-color: var(--btc);
  color: var(--wv-btn-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--btc) 22%, transparent);
}

/* console switch — keep product's mechanics, soften the label register */
#wallet-view .wt-scheme-a .wt-console .wt-console-lab {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Unlike the swap chip, this pill sits on the page FLOOR (--wv-bg), so its
   surface is the card rung (--surface) — the same step the floor takes to
   become a card. Was transparent and read as see-through (product
   2026-07-16). The open-lens accent state below is left untouched. */
#wallet-view .wt-scheme-a .wt-console {
  background: var(--surface);
  box-shadow: var(--wv-control-lift);
}
#wallet-view .wt-scheme-a .wt-console:hover {
  background: var(--raised);
}
/* Keep the lens-open state winning over the rest surface. */
#wallet-view .wt-scheme-a .wt-console[aria-expanded="true"] {
  background: rgba(247, 147, 26, 0.08);
}

/* ────────────────────────────────────────────────
   4 · Transaction history — the ledger as a landing card
   ──────────────────────────────────────────────── */
#wallet-view .tx-section {
  margin: 16px 0 24px;
  padding: 20px var(--wv-pad) 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--wv-radius);
  box-shadow: var(--wv-card-shadow);
}

#wallet-view .tx-section-header {
  margin-bottom: 12px;
  padding-left: 0;
}

#wallet-view .download-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
#wallet-view .download-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

#wallet-view .wallet-notice {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--wv-inset-bg);
  padding: 13px 16px;
  box-shadow: none;
}

/* Rows: sans for prose, mono for money; clear direction, quiet chrome */
#wallet-view .tx-card { border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
#wallet-view .tx-card:last-child { border-bottom: none; }

#wallet-view .tx-row {
  font-family: var(--font-sans);
  padding: 13px 8px;
  gap: 14px;
  border-radius: 10px;
}
#wallet-view .tx-row:hover { background: var(--wv-row-hover); }
#wallet-view .tx-row--static:hover { background: none; }

#wallet-view .tx-icon {
  width: 34px;
  height: 34px;
  font-size: 14px;
}

#wallet-view .tx-label {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

#wallet-view .tx-from { font-size: 12.5px; color: var(--text-3); }
#wallet-view .tx-counterparty-addr { font-family: var(--font-mono); font-size: 12px; }
#wallet-view .tx-date { font-size: 12px; color: var(--text-3); }

#wallet-view .tx-btc {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
#wallet-view .tx-usd {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* Expand: the then-vs-now story, laid out like a landing spec sheet */
#wallet-view .tx-details {
  padding: 2px 22px 20px;
  background: var(--wv-details-bg);
  border-top: 1px solid var(--border);
}

#wallet-view .tx-detail-grid {
  gap: 16px 26px;
  margin-top: 16px;
}

#wallet-view .tx-detail-label {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.12em;
  color: var(--text-3);
}

#wallet-view .tx-detail-value {
  font-size: 14px;
  line-height: 1.45;
}
#wallet-view .tx-detail-value.mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* "Value then" (4th) and "BTC price then" (6th) — the signature
   worth-then/worth-now readout gets the orange ink. Position-coupled to
   the detail-grid order app.js renders (Transaction, Net amount, Fee,
   Value then, Status, BTC price then, Block, Seen); if that order ever
   changes, update these indices. */
#wallet-view .tx-detail-grid .tx-detail-item:nth-child(4) .tx-detail-value,
#wallet-view .tx-detail-grid .tx-detail-item:nth-child(6) .tx-detail-value {
  color: var(--wv-btc-ink);
  font-weight: 600;
}

#wallet-view .tx-detail-actions { gap: 10px; margin-top: 18px; }

#wallet-view .tx-detail-button {
  border-radius: 9px;
  padding: 8px 14px;
  font-size: 12.5px;
  background: transparent;
  border: 1px solid var(--border);
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
#wallet-view .tx-detail-button:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

#wallet-view .tx-more-btn {
  border-radius: 999px;
  padding: 10px 26px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--border);
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
#wallet-view .tx-more-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

#wallet-view .tx-skeleton {
  height: 54px;
  border-radius: 10px;
  background: var(--wv-inset-bg);
  opacity: 1;
}

#wallet-view .tx-empty,
#wallet-view .tx-error,
#wallet-view .tx-note.tx-empty {
  background: var(--wv-inset-bg);
  border-color: var(--border);
  border-radius: 10px;
}

/* ────────────────────────────────────────────────
   5 · Responsive mirrors
   (Re-asserting styles.css's mobile intent above our specificity.)
   ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  #wallet-view .cmd-header.cmd-header-has-chart {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 20px;
    padding: 20px;
  }
  #wallet-view .cmd-header-left { border-right: none; padding-right: 0; }
  #wallet-view .cmd-header-right { padding-left: 0; }
}

@media (max-width: 700px) {
  #wallet-view .wallet-tab {
    padding: 10px 12px;
    font-size: 13px;
  }
  #wallet-view .wt-scheme-a .wallet-tools-trigger { padding: 10px 11px; }
  #wallet-view .wt-scheme-a .wt-hero { padding: 7px 14px; }
}

@media (max-width: 680px) {
  /* styles.css's two-tier strip: keep its flex-break separator invisible
     (our base .wallet-tab-sep background/margin would otherwise resurface). */
  #wallet-view .wt-scheme-a > .wallet-tab-sep { display: none; }
  #wallet-view .wt-scheme-a > .wallet-tab-sep[data-wallet-tab-sep="tools"] {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 0;
    margin: 0;
    background: none;
  }
  #wallet-view .wt-scheme-a > .wallet-tab[data-wallet-tab="iconic"] {
    padding: 6px 10px;
  }
}

@media (max-width: 600px) {
  /* Health readouts stack: title · chip on one line, evidence below */
  #wallet-view .health-check {
    grid-template-columns: minmax(0, 1fr) max-content;
    row-gap: 6px;
  }
  #wallet-view .health-title { grid-column: 1; }
  #wallet-view .health-status { grid-column: 2; justify-self: end; }
  #wallet-view .health-comment { grid-column: 1 / -1; }

  #wallet-view .cmd-stats-row { gap: 14px; }

  /* Health header wraps to two rows on narrow (title, then pills). The
     flex-flow caret would land alone on a third row — pin it to the
     title row's right edge instead. */
  #wallet-view .ai-insight-header { position: relative; padding-right: 44px; flex-wrap: wrap; }
  #wallet-view .ai-insight-header::after {
    position: absolute;
    right: 18px;
    top: 19px;
    margin-left: 0;
  }
  #wallet-view .ai-insight-summary { flex-basis: 100%; margin-top: 8px; }
}

@media (max-width: 480px) {
  #wallet-view .cmd-header.cmd-header-has-chart { padding: 18px 16px; }
  #wallet-view .cmd-header-right { padding: 4px 0 0; }
  #wallet-view .ai-insight-header { padding: 14px 16px; }
  #wallet-view .wallet-health-section { padding: 4px 16px 16px; }
  #wallet-view .tx-section { padding: 16px 16px 10px; }
  #wallet-view .tx-row { padding: 10px 4px; gap: 10px; }
  #wallet-view .tx-details { padding: 0 14px 16px; }
  #wallet-view .tx-detail-grid { gap: 12px; }
  #wallet-view .qr-icon-btn { width: 40px; height: 40px; }
}

@media (max-width: 400px) {
  #wallet-view .cmd-balance-primary { font-size: 26px; }
  #wallet-view .cmd-balance-secondary { font-size: 12.5px; }
  #wallet-view .qr-icon-btn { width: 38px; height: 38px; }
  #wallet-view .balance-swap-btn { width: 30px; height: 30px; }
}

/* ────────────────────────────────────────────────
   6 · Reduced motion — nothing essential moves
   ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #wallet-view .qr-icon-btn,
  #wallet-view .download-btn,
  #wallet-view .tx-detail-button,
  #wallet-view .tx-more-btn,
  #wallet-view .wt-scheme-a .wt-hero,
  #wallet-view .ai-insight-header,
  #wallet-view .ai-insight-header::after {
    transition: none;
  }
  #wallet-view .qr-icon-btn:hover,
  #wallet-view .download-btn:hover:not(:disabled),
  #wallet-view .tx-detail-button:hover,
  #wallet-view .tx-more-btn:hover:not(:disabled),
  #wallet-view .wt-scheme-a .wt-hero:hover {
    transform: none;
  }
  #wallet-view .tx-skeleton { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   PASS 2 — the deferred surfaces (design). Same contract as above:
   additive, #wallet-view-scoped, both themes first-class, evidence-first
   (orange = brand emphasis, never a verdict).

   SPECIFICITY NOTE (recurring pattern below): the #wallet-view prefix
   outranks every class-only state rule in styles.css (:hover, .active,
   .has-file, .is-dragging, :focus, :disabled…). Wherever we override a
   property that one of those state rules also sets, the state rule is
   re-declared here at #wallet-view strength — otherwise the state would
   silently die. If you add a property, grep styles.css for its states.
   ════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────
   7 · Market lens / console — the observatory instruments
   The three stacked panels (BTC market · mempool strip · fear&greed/
   difficulty card) stay ALWAYS-DARK in both themes — they are the
   cinema screen of the product; styles.css already pins their inner
   text light. What changes: the warm amber-on-#000 tint becomes the
   landing's deep-navy observatory floor, corners join the 14px card
   language, and every inner label moves to the landing register.
   Because the panels are theme-invariant, their tokens are declared
   once on #wallet-view and deliberately NOT remapped for light.
   ──────────────────────────────────────────────── */
#wallet-view {
  --wv-console-bg: #0C101B;                 /* one step below --wv-bg — recessed instrument */
  --wv-console-border: #232B45;             /* cool hairline, replaces warm rgba borders */
  --wv-console-ink: #F0F2F5;                /* pinned light ink (panel is always dark) */
  --wv-console-muted: #98A2B8;              /* pinned cool muted (≥4.5:1 on console bg) */
  --wv-console-btc: #F7931A;                /* orange stays dark-theme-strength on the dark panel */
}

/* Overlay: deeper, calmer backdrop; the card is a landing modal */
#wallet-view .wallet-console-overlay.console-open {
  background: rgba(7, 10, 18, 0.62);
  backdrop-filter: blur(8px);
}

#wallet-view .wallet-console-overlay.console-open > .wallet-console-card {
  gap: 10px;
  padding: var(--wv-pad);
  border: 1px solid var(--border);
  border-radius: var(--wv-radius);
  background: var(--surface);
  box-shadow: var(--wv-card-shadow);
}

#wallet-view .wallet-console-overlay.console-open .wallet-console-close {
  border-radius: 12px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* The instrument panels: observatory navy under a faint orange dawn */
#wallet-view .btc-market-section,
#wallet-view .block-progress-strip,
#wallet-view .difficulty-card {
  border-color: var(--wv-console-border);
  background:
    linear-gradient(180deg, rgba(247, 147, 26, 0.05) 0%, rgba(247, 147, 26, 0.015) 100%),
    var(--wv-console-bg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(247, 147, 26, 0.05);
}

#wallet-view .btc-market-section { border-radius: var(--wv-radius); }
/* strip + difficulty keep their design welded pairing — split radius */
#wallet-view .block-progress-strip { border-radius: var(--wv-radius) var(--wv-radius) 0 0; }
#wallet-view .difficulty-card { border-radius: 0 0 var(--wv-radius) var(--wv-radius); }

#wallet-view .btc-market-left { border-right-color: rgba(247, 147, 26, 0.22); }

/* Panel headings — the shared orange micro-label register, pinned to
   dark-theme strength (the panel never changes theme). */
#wallet-view .btc-market-label,
#wallet-view .btc-market-chart-panel .mini-chart-label,
#wallet-view .block-progress-title,
#wallet-view .difficulty-card-title {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--wv-console-btc);
}

/* Inner inks: replace the warm-khaki (#9b8f74 / #f4f0e8) family with the
   landing's cool set — pinned, since theme vars would go dark-on-dark in
   light mode inside this always-dark panel. */
#wallet-view .btc-market-price { color: var(--wv-console-btc); }
#wallet-view .btc-market-meta-value { color: var(--wv-console-ink); }
#wallet-view .btc-market-meta-label,
#wallet-view .btc-market-inline-pnl .pnl-label { color: var(--wv-console-muted); }
#wallet-view .btc-market-meta-item { border-top-color: rgba(247, 147, 26, 0.2); }
#wallet-view .btc-market-ath-age { color: rgba(152, 162, 184, 0.85); }
#wallet-view .btc-market-delta.up { color: #4ADE80; }
#wallet-view .btc-market-delta.down { color: #F87171; }
#wallet-view .btc-market-delta.flat { color: rgba(152, 162, 184, 0.7); }
#wallet-view .btc-market-inline-pnl .pnl-val.down { color: #F87171; }

#wallet-view .btc-market-info-btn {
  border-color: rgba(152, 162, 184, 0.5);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(240, 242, 245, 0.85);
}
#wallet-view .btc-market-info-popover {
  border-color: rgba(247, 147, 26, 0.3);
  border-radius: 8px;
  background: rgba(10, 14, 24, 0.98);
  color: rgba(240, 242, 245, 0.92);
}

/* Status pills INSIDE the console keep dark-chip clothing in both themes
   (the section-1 pill restyle is theme-aware and would go paper-white
   against the dark instrument in light mode). */
#wallet-view .wallet-console-card .price-status-pill {
  border-color: rgba(247, 147, 26, 0.3);
  background: rgba(247, 147, 26, 0.1);
  color: #FFB866;
}

/* Mempool strip: pin the mined-blue + projected-gold cell inks so the
   light theme reads identically (styles.css's light overrides were dark
   inks that sank into the pinned dark cells). */
#wallet-view .cell-stack-top--mined { color: #7DD3FC; }
html[data-theme="light"] #wallet-view .cell-stack-top--projected { color: rgba(232, 216, 168, 0.75); }
html[data-theme="light"] #wallet-view .cell-stack-bot--mined { color: rgba(255, 255, 255, 0.85); }
html[data-theme="light"] #wallet-view .cell-stack-bot--projected { color: rgba(232, 216, 168, 0.78); }

/* Difficulty / F&G card: cool inks, legibility bumped (0.4→0.55+ whites) */
#wallet-view .difficulty-tab { color: rgba(240, 242, 245, 0.55); }
#wallet-view .difficulty-tab:hover { color: rgba(240, 242, 245, 0.82); }
#wallet-view .difficulty-tab.active { color: #7DD3FC; }       /* pinned; light --info would sink */
#wallet-view .difficulty-tab-sep { color: rgba(240, 242, 245, 0.22); }
#wallet-view .difficulty-progress { background: rgba(255, 255, 255, 0.07); }
#wallet-view .difficulty-metric-label { color: rgba(240, 242, 245, 0.6); }
#wallet-view .fng-row-end { color: rgba(240, 242, 245, 0.55); }
#wallet-view .fng-row-max { color: rgba(240, 242, 245, 0.5); }

/* ────────────────────────────────────────────────
   8 · Collectibles — the grid gets a landing card home
   The panel content used to float on the page floor; wrap it in the
   same card the History ledger lives in, and move the subtabs to the
   quiet segmented register of the main tab bar.
   ──────────────────────────────────────────────── */
#wallet-view #ord-panel {
  margin: 16px 0 24px;
  padding: 20px var(--wv-pad) 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--wv-radius);
  box-shadow: var(--wv-card-shadow);
}

#wallet-view .ord-summary-bar {
  padding: 0 0 10px;
  font-size: 13.5px;
  font-weight: 600;
}

#wallet-view .ord-subtabs { margin-top: 0; gap: 2px; }

#wallet-view .ord-subtab {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
  padding: 10px 13px;
  border-radius: 8px 8px 0 0;
}
#wallet-view .ord-subtab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
#wallet-view .ord-subtab.active {
  color: var(--text);
  border-bottom-color: var(--btc);
  background: transparent;
}

/* Cards inside the card: quiet insets, 12px inner radius (one step in
   from the 14px shell — landing nesting rule). */
#wallet-view .inscription-card {
  background: var(--wv-inset-bg);
  border-radius: 12px;
  box-shadow: none;
}
#wallet-view .inscription-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.5);
}
#wallet-view .inscription-meta {
  background: transparent;
  border-top-color: color-mix(in srgb, var(--border) 70%, transparent);
}

#wallet-view .ord-balance-card {
  background: var(--wv-inset-bg);
  border-radius: 12px;
  box-shadow: none;
}
#wallet-view .ord-balance-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -16px rgba(0, 0, 0, 0.45);
}

#wallet-view .ord-empty {
  background: var(--wv-inset-bg);
  border-radius: 12px;
  box-shadow: none;
}

/* Load-more joins the tx-more-btn idiom; retry gets AA ink on orange */
#wallet-view .ord-load-more-btn {
  background: transparent;
  border: 1px solid var(--border);
  padding: 10px 26px;
  font-size: 13px;
  font-weight: 600;
}
#wallet-view .ord-load-more-btn:hover:not(:disabled) {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: none;
}
#wallet-view .ord-error-retry {
  border-radius: 9px;
  color: var(--wv-btn-ink);            /* was #fff on orange — fails AA */
  font-weight: 650;
}
#wallet-view .ord-error-retry:hover {
  background: var(--wv-btc-hover);
  border-color: var(--wv-btc-hover);
}

/* ────────────────────────────────────────────────
   9 · Tools inner forms — Write / Verify (+Community) / Trace
   The .tx-section shells are already landing cards (section 4). This
   section brings the controls inside up to register: micro-labels,
   chip-quiet inputs with the orange focus ring, pill chips, and ONE
   filled CTA per form.
   ──────────────────────────────────────────────── */

/* Shared input register (all tools) */
/* background-COLOR only — .community-select carries its dropdown arrow
   as a background-image; the shorthand would erase it. */
#wallet-view .verify-input,
#wallet-view .write-input,
#wallet-view .community-select,
#wallet-view .community-textarea {
  background-color: var(--wv-chip-bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-size: 13.5px;
}
/* focus ring re-declared — see SPECIFICITY NOTE */
#wallet-view .verify-input:focus,
#wallet-view .write-input:focus,
#wallet-view .community-select:focus,
#wallet-view .community-textarea:focus {
  border-color: var(--btc);
  box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.12);
  background-color: var(--surface);
}

/* Field labels → landing micro-label register */
#wallet-view .write-label,
#wallet-view .community-label,
#wallet-view .community-submit-title,
#wallet-view .write-status-title {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
#wallet-view .write-label-hint {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* Beta/Soon pill → eyebrow-pill language, AA ink both themes */
#wallet-view .wt-panel-header-pill {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 3px 10px;
}
#wallet-view .wt-panel-header-pill--preview {
  color: var(--wv-btc-ink);
  border-color: color-mix(in srgb, var(--btc) 30%, transparent);
  background: color-mix(in srgb, var(--btc) 9%, transparent);
}

/* ── Write ── */
#wallet-view .write-dropzone {
  border: 1.5px dashed var(--border-strong);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 30%, rgba(247, 147, 26, 0.05), transparent 60%),
    var(--wv-inset-bg);
  box-shadow: none;
}
#wallet-view .write-dropzone:hover,
#wallet-view .write-dropzone.is-dragover {
  border-color: var(--btc);
  background:
    radial-gradient(circle at 50% 30%, rgba(247, 147, 26, 0.09), transparent 60%),
    var(--wv-inset-bg);
  transform: translateY(-1px);
}
#wallet-view .write-dropzone.has-file {
  border: 1px solid var(--border);
  background: var(--wv-inset-bg);
  transform: none;
}

#wallet-view .write-fee-chip {
  background: var(--wv-chip-bg);
  font-size: 12px;
  padding: 5px 11px;
}
#wallet-view .write-fee-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
#wallet-view .write-fee-chip.active {
  border-color: color-mix(in srgb, var(--btc) 55%, transparent);
  color: var(--wv-btc-ink);
  background: color-mix(in srgb, var(--btc) 8%, transparent);
}

#wallet-view .write-estimate {
  background: var(--wv-inset-bg);
  border-radius: 10px;
  box-shadow: none;
  padding: 16px 18px;
}
#wallet-view .write-estimate-row.write-estimate-total strong {
  color: var(--wv-btc-ink);
}

/* The form's single filled CTA — exactly the .wt-hero / landing idiom.
   Ink flips from #fff (fails AA on orange) to the dark button ink. */
#wallet-view .write-submit-btn {
  border-radius: 9px;
  background: var(--btc);
  border-color: var(--btc);
  color: var(--wv-btn-ink);
  font-size: 13px;
  font-weight: 650;
  padding: 0 18px;
}
#wallet-view .write-submit-btn:hover:not(:disabled) {
  background: var(--wv-btc-hover);
  border-color: var(--wv-btc-hover);
  color: var(--wv-btn-ink);
  transform: translateY(-1px);
}
#wallet-view .write-submit-btn:disabled {
  background: var(--raised);
  border-color: var(--border);
  color: var(--text-3);
  transform: none;
}

#wallet-view .write-status-card {
  background: var(--wv-inset-bg);
  border-radius: 12px;
  box-shadow: none;
}

/* ── Verify + Community ── */
#wallet-view .verify-search { gap: 10px; }

/* Empty-state prose: drop the italic whisper; quiet inset panel instead
   (same clothing as .wallet-notice). Also dresses the Trace placeholder. */
#wallet-view .verify-empty {
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
  background: var(--wv-inset-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 16px;
}
#wallet-view .verify-error { border-radius: 10px; }

#wallet-view .trust-card {
  background: var(--wv-inset-bg);
  border-radius: 12px;
  padding: 18px 20px;
}
#wallet-view .trust-headline {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.005em;
}
#wallet-view .trust-provenance-badge {
  border-radius: 999px;
  background: var(--wv-chip-bg);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  padding: 2px 8px;
}
/* chips keep their evidence-state colors from styles.css — only the
   silhouette joins the pill register (no verdict styling added) */
#wallet-view .trust-chip {
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  padding: 2px 9px;
}
#wallet-view .trust-summary { font-size: 13.5px; line-height: 1.6; }

#wallet-view .community-summary {
  background: var(--wv-inset-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
}
#wallet-view .community-report {
  background: var(--wv-inset-bg);
  border-radius: 10px;
}
#wallet-view .community-report-votes {
  border-top-color: color-mix(in srgb, var(--border) 70%, transparent);
}
#wallet-view .community-vote-btn { border-radius: 999px; }
#wallet-view .community-empty {
  font-style: normal;
  font-size: 13px;
  color: var(--text-3);
}
#wallet-view .community-category-pill { border-radius: 999px; }
/* AA: plain category pill ink in light (severity variants keep their own inks) */
html[data-theme="light"] #wallet-view .community-category-pill:not(.community-severity-info):not(.community-severity-warning):not(.community-severity-danger) {
  color: #B4670A;
}
html[data-theme="light"] #wallet-view .community-severity-info    { color: #4C51BF; }
html[data-theme="light"] #wallet-view .community-severity-warning { color: #A16207; }
html[data-theme="light"] #wallet-view .community-severity-danger  { color: #B91C1C; }

#wallet-view .community-submit-cost {
  border: 1px solid color-mix(in srgb, var(--btc) 25%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--btc) 9%, transparent);
  color: var(--wv-btc-ink);
  font-size: 11px;
  padding: 3px 10px;
}

#wallet-view .severity-pill {
  background: var(--wv-chip-bg);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11.5px;
}
/* severity states re-declared (see SPECIFICITY NOTE); semantic colors
   unchanged in dark, AA-corrected inks in light */
#wallet-view .severity-pill:hover {
  border-color: var(--border-strong);
  color: var(--text-2);
}
#wallet-view .severity-pill.active[data-severity="info"]    { background: rgba(99, 102, 241, 0.12); color: #818CF8; border-color: rgba(99, 102, 241, 0.3); }
#wallet-view .severity-pill.active[data-severity="warning"] { background: rgba(245, 158, 11, 0.12); color: var(--warning); border-color: rgba(245, 158, 11, 0.3); }
#wallet-view .severity-pill.active[data-severity="danger"]  { background: rgba(239, 68, 68, 0.12); color: var(--negative); border-color: rgba(239, 68, 68, 0.3); }
html[data-theme="light"] #wallet-view .severity-pill.active[data-severity="info"]    { color: #4C51BF; }
html[data-theme="light"] #wallet-view .severity-pill.active[data-severity="warning"] { color: #A16207; }
html[data-theme="light"] #wallet-view .severity-pill.active[data-severity="danger"]  { color: #B91C1C; }

/* Tinted accent button (Check / Add card / Wallet+ forms) — landing
   button voice: sentence case, 9px radius, quiet tint, AA ink. */
#wallet-view .btn-accent {
  min-height: 32px;
  padding: 0 16px;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--btc) 35%, transparent);
  background: color-mix(in srgb, var(--btc) 10%, transparent);
  color: var(--wv-btc-ink);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: none;
}
#wallet-view .btn-accent:hover {
  background: color-mix(in srgb, var(--btc) 16%, transparent);
  border-color: color-mix(in srgb, var(--btc) 55%, transparent);
  transform: translateY(-1px);
}

/* ────────────────────────────────────────────────
   10 · Iconic — the museum joins the observatory
   The museum room is already always-dark with its own light-theme token
   remap (styles.css) — deliberately preserved. Moves here: the room
   itself becomes a landing card (14px frame + shadow) instead of a bare
   rounded rect, vitrines soften to the 10px inner radius, wall-label
   captions take the brand micro-ink, and the flipbook arrows get a real
   hover (styles.css referenced the undefined --text-1 there).
   ──────────────────────────────────────────────── */
#wallet-view .wallet-tab-panel.active[data-wallet-panel="iconic"].iconic-museum {
  margin: 16px auto 24px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(247, 147, 26, 0.04), transparent 60%),
    #0B0F1A;
  border: 1px solid #232B45;                /* pinned — the room is always dark */
  border-radius: var(--wv-radius);
  box-shadow: var(--wv-card-shadow);
  overflow: hidden;                         /* vignettes stay inside the 14px frame */
}

#wallet-view .iconic-frame,
#wallet-view .iconic-coinbase,
#wallet-view .iconic-evidence-frame {
  border-radius: 10px;
}
#wallet-view .iconic-frame-mat { border-radius: 6px; }

/* Wall-label captions: brand ink (museum pins --btc to #F7931A in both
   themes, so var(--btc) is safe here). Tracking stays museum-wide. */
#wallet-view .iconic-evidence-cap-label {
  color: var(--btc);
  font-weight: 650;
}

/* Flipbook arrows — quiet chrome, live hover */
#wallet-view .iconic-nav-arrow {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
}
#wallet-view .iconic-nav-arrow:hover {
  color: #F0F2F5;
  border-color: rgba(247, 147, 26, 0.55);
  background: rgba(247, 147, 26, 0.08);
}

/* ────────────────────────────────────────────────
   11 · Wallet+ account surfaces (as mounted in the tab host)
   Scope note: these rules dress the shared shell ONLY while app.js
   mounts it inside #wallet-view (#wallet-plus-tab-host). The modal and
   the standalone route render outside #wallet-view and keep styles.css.
   ──────────────────────────────────────────────── */

/* Panels → landing cards */
#wallet-view .wallet-plus-block,
#wallet-view .wallet-plus-unavailable,
#wallet-view .wallet-plus-key-panel,
#wallet-view .wallet-plus-card-panel,
#wallet-view .wallet-plus-settings-section {
  padding: var(--wv-pad);
  border-radius: var(--wv-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 55%),
    var(--surface);
  box-shadow: var(--wv-card-shadow);
}

/* Section kickers → orange micro-label register */
#wallet-view .wallet-plus-kicker,
#wallet-view .wallet-plus-section-title {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.13em;
  color: var(--wv-btc-ink);
}

/* Account header — the Wallet+ hero. Same featured-ring treatment as
   the Wallet Health card (brand emphasis, not status): replaces the
   flat orange wash. */
#wallet-view .wallet-plus-account-head {
  padding: var(--wv-pad);
  border: 1px solid color-mix(in srgb, var(--btc) 30%, var(--border));
  border-radius: var(--wv-radius);
  background:
    radial-gradient(120% 130% at 50% -30%, rgba(247, 147, 26, 0.07), transparent 55%),
    var(--surface);
  box-shadow:
    0 0 0 1px rgba(247, 147, 26, 0.14),
    var(--wv-card-shadow);
}
#wallet-view .wallet-plus-account-head h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Entry choice cards */
#wallet-view .wallet-plus-choice {
  border-radius: var(--wv-radius);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 55%),
    var(--surface);
  box-shadow: var(--wv-card-shadow);
}
#wallet-view .wallet-plus-choice:hover,
#wallet-view .wallet-plus-choice:focus-visible {
  border-color: color-mix(in srgb, var(--btc) 45%, var(--border));
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(247, 147, 26, 0.14),
    var(--wv-card-shadow);
}

/* Plan comparison table */
#wallet-view .wallet-compare {
  /* base caps this at --content-width (768) while the choice cards above
     fill the container — the two stacked blocks read as different widths
     (founder catch, design). Match the cards' span. */
  width: 100%;
  padding: 20px var(--wv-pad);
  border-radius: var(--wv-radius);
  box-shadow: var(--wv-card-shadow);
}
#wallet-view .wallet-compare-title {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.13em;
  color: var(--wv-btc-ink);
  padding-left: 0;
}
#wallet-view .wc-row {
  padding: 5px 0;
  border-bottom-color: color-mix(in srgb, var(--border) 60%, transparent);
}
#wallet-view .wc-cell { font-size: 13px; }
#wallet-view .wc-cell.wc-plus {
  background: color-mix(in srgb, var(--btc) 7%, transparent);
  border-radius: 6px;
}

/* Fields: chip-quiet inputs, micro-labels, orange focus ring */
#wallet-view .wallet-plus-field > span:first-child {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
#wallet-view .wallet-plus-field input,
#wallet-view .wallet-plus-field textarea,
#wallet-view .wallet-plus-field select {
  background-color: var(--wv-chip-bg);
  border-radius: 9px;
}
#wallet-view .wallet-plus-field input:focus,
#wallet-view .wallet-plus-field textarea:focus,
#wallet-view .wallet-plus-field select:focus {
  border-color: var(--btc);
  box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.12);
  background-color: var(--surface);
}
#wallet-view .wallet-plus-icon-btn {
  border-radius: 8px;
  background: var(--wv-chip-bg);
}

/* Wallet-Key dropzone mirrors the Write dropzone voice */
#wallet-view .wallet-plus-drop {
  border-radius: 12px;
  background: var(--wv-inset-bg);
}
#wallet-view .wallet-plus-drop.is-dragging {
  border-color: var(--btc);
  background: color-mix(in srgb, var(--btc) 8%, transparent);
  color: var(--wv-btc-ink);
}

/* Status banner + quiet secondary buttons */
#wallet-view .wallet-plus-status {
  border-radius: 10px;
  background: var(--wv-inset-bg);
}
#wallet-view .settings-change-btn {
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 600;
}

/* Saved-address rows: the orange wash retires (the balance header
   dropped its bubble in section 1) — quiet inset + the per-card color
   bar carries identity. is-primary re-declared per SPECIFICITY NOTE. */
#wallet-view .pro-card-row {
  border-radius: 12px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--pro-card-color, var(--border));
  background: var(--wv-inset-bg);
}
#wallet-view .pro-card-row.is-primary {
  border-color: color-mix(in srgb, var(--pro-card-color) 34%, var(--border));
}
#wallet-view .pro-card-name-input {
  background: var(--wv-chip-bg);
  border-radius: 8px;
  font-size: 13px;
}
#wallet-view .pro-card-name-input:focus {
  border-color: var(--btc);
  box-shadow: 0 0 0 3px rgba(247, 147, 26, 0.12);
  background: var(--surface);
}

/* Add-card button height pairs with its 36px inputs (align-items: end) */
#wallet-view .wallet-plus-card-form .btn-accent { min-height: 36px; }

/* ────────────────────────────────────────────────
   12 · Responsive mirrors — pass 2
   (Re-asserting styles.css's mobile intent above our specificity.)
   ──────────────────────────────────────────────── */
@media (max-width: 700px) {
  /* styles.css squeezes Wallet+ panels at 760px; our 24px pad outranks
     it, so mirror at the file's 700px step. */
  #wallet-view .wallet-plus-block,
  #wallet-view .wallet-plus-unavailable,
  #wallet-view .wallet-plus-key-panel,
  #wallet-view .wallet-plus-card-panel,
  #wallet-view .wallet-plus-settings-section,
  #wallet-view .wallet-plus-account-head,
  #wallet-view .wallet-compare {
    padding: 18px;
  }
}

@media (max-width: 680px) {
  /* styles.css's bottom-sheet console at 680 (padding/corner squeeze)
     re-asserted over our desktop card values */
  #wallet-view .wallet-console-overlay.console-open > .wallet-console-card {
    gap: 8px;
    padding: 14px;
    border-radius: var(--wv-radius) var(--wv-radius) 0 0;
  }
}

@media (max-width: 480px) {
  #wallet-view #ord-panel { padding: 16px 16px 12px; }
  #wallet-view .trust-card { padding: 14px; }
  #wallet-view .write-estimate { padding: 14px; }
  #wallet-view .wallet-plus-block,
  #wallet-view .wallet-plus-unavailable,
  #wallet-view .wallet-plus-key-panel,
  #wallet-view .wallet-plus-card-panel,
  #wallet-view .wallet-plus-settings-section,
  #wallet-view .wallet-plus-account-head,
  #wallet-view .wallet-compare {
    padding: 16px;
  }
  #wallet-view .wallet-plus-account-head h2 { font-size: 19px; }
}

/* ────────────────────────────────────────────────
   13 · Reduced motion — pass 2 additions
   ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #wallet-view .btn-accent,
  #wallet-view .write-submit-btn,
  #wallet-view .write-dropzone,
  #wallet-view .ord-load-more-btn,
  #wallet-view .inscription-card,
  #wallet-view .ord-balance-card,
  #wallet-view .wallet-plus-choice,
  #wallet-view .wallet-console-overlay.console-open .wallet-console-close {
    transition: none;
  }
  #wallet-view .btn-accent:hover,
  #wallet-view .write-submit-btn:hover:not(:disabled),
  #wallet-view .write-dropzone:hover,
  #wallet-view .write-dropzone.is-dragover,
  #wallet-view .ord-load-more-btn:hover:not(:disabled),
  #wallet-view .inscription-card:hover,
  #wallet-view .ord-balance-card:hover,
  #wallet-view .wallet-plus-choice:hover,
  #wallet-view .wallet-plus-choice:focus-visible {
    transform: none;
  }
  #wallet-view .ord-skeleton-card { animation: none; }
}