/* Brand type, matching luxverium.com: Cormorant Garamond (display), Inter (body),
   IBM Plex Mono (addresses, hashes, key material). The website loads these from
   Google Fonts; the app cannot - it is deliberately CDN-free (no-CDN + SRI
   posture, and the extension's CSP blocks remote font hosts), so all three are
   self-hosted here exactly the way Montserrat used to be.
   Inter and Cormorant ship as VARIABLE fonts: one file each covers every weight,
   hence the weight RANGE in font-weight rather than a value per file. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../../fonts/cormorant.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../../fonts/inter.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../../fonts/plexmono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../../fonts/plexmono-500.woff2") format("woff2"); }

:root {
  /* Warm near-black canvas, muted gold accents - Luxverium brand */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", "Consolas", ui-monospace, monospace;
  --bg: #0b0a07;
  --bg-2: #0f0d09;
  --surface: #16130d;
  --surface-2: #1e1a12;
  --border: #2a2418;
  --border-soft: #201b13;
  --text: #f1ede3;
  --muted: #948c79;
  --gold: #cca85f;
  --gold-bright: #e8cc86;
  --gold-deep: #a67c3d;
  --accent-ink: #1a1305;
  --danger: #e06a5f;
  --danger-bg: #2a1613;
  --warn: #dc9a52;
  --ok: #6cc08a;
  --radius: 16px;
  /* Radius scale (dashboard redesign). One system, four steps, so nothing is
     rounded by feel: large cards, medium controls, small controls, pills. */
  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 12px;
  --shadow: 0 10px 40px rgba(0,0,0,0.5);
  /* Security-score palette. Deliberately muted: green means measured-secure,
     never "guaranteed safe". */
  --ok-ring: #5fcb91;
  --gold-grad: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 45%, var(--gold-deep) 100%);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  background:
    radial-gradient(900px 500px at 50% -12%, #1a150d 0%, rgba(26,21,13,0) 60%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

#app { max-width: 560px; margin: 0 auto; padding: 22px 16px 60px; }

/* ---- Dashboard shell: sidebar + content ---- */
#app.shell {
  max-width: 1200px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 22px;
  padding: 22px 20px 40px;
  align-items: start;
}
.sidebar {
  position: sticky; top: 22px;
  background: linear-gradient(180deg, var(--surface) 0%, #120f0a 100%);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 14px; display: flex; flex-direction: column; gap: 14px;
}
.sidebar .brand { padding: 4px 6px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-link {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: transparent; color: var(--muted); font-weight: 600; font-size: 14px;
  padding: 11px 12px; border-radius: 10px; text-align: left;
}
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.active { background: var(--surface-2); color: var(--gold-bright); box-shadow: inset 0 0 0 1px var(--border); }
.nav-ico { width: 20px; text-align: center; color: var(--gold-deep); font-size: 14px; flex: none; }
.nav-link.active .nav-ico { color: var(--gold); }
.nav-label { flex: 1; }
.nav-badge { display: none; background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 7px; }
.nav-badge.show { display: inline-block; }
.nav-ext { color: var(--gold-deep); font-size: 12px; opacity: 0.85; }
.nav-external:hover .nav-ext { color: var(--gold); }
.nav-toggle { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); text-align: left; font-weight: 600; }

.sidebar-foot { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.sidebar-foot .net-switch, .sidebar-foot .account-slot { width: 100%; }
.sidebar-foot .net-btn { width: 100%; justify-content: flex-start; }
.sidebar-foot .net-menu { left: 0; right: auto; top: auto; bottom: calc(100% + 6px); width: 100%; }
.sidebar-foot .pill { flex: 1; }

.content { min-width: 0; display: flex; flex-direction: column; }
.route-host { min-height: 44vh; }
.shell .entry-view { max-width: 560px; width: 100%; margin: 24px auto 0; }
.shell .footer { margin-top: auto; padding-top: 26px; }

/* Nav visibility: hidden until a wallet is active */
.shell-noauth .nav, .shell-noauth .nav-toggle { display: none; }

/* Page scaffolding inside routes */
.page-head { margin-bottom: 16px; }
.page-title {
  font-family: var(--font-head); font-size: 32px; font-weight: 600; margin: 0; letter-spacing: .4px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff 0%, var(--gold-bright) 160%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.page-sub { color: var(--muted); font-size: 13px; margin: 5px 0 0; }

/* Experienced ("advanced") mode - less text. The body.exp-terse class is set by
   the router on every non-learning route; it hides descriptive helper copy for a
   cleaner power-user interface. Safety warnings are NEVER tagged .exp-hide, so
   paste-swap / checksum / unlimited-approval notices always stay visible. The
   Tutorials, Learn glossary and FAQ never get .exp-terse, so they keep full text. */
body.exp-terse .page-sub,
body.exp-terse .exp-hide { display: none !important; }
.back-link { padding: 0 0 8px; }
.section-title { font-size: 14px; color: var(--gold-bright); font-weight: 700; margin: 22px 2px 6px; letter-spacing: .3px; }

.quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.quick-action { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 16px 8px; color: var(--text); }
.quick-action:hover { border-color: var(--gold-deep); transform: translateY(-1px); }
.qa-ico { font-size: 20px; color: var(--gold); }
.qa-label { font-size: 12px; font-weight: 600; color: var(--muted); }

/* ---- Dashboard: hero + trust ring + advisor ---- */
.dash-top { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; }
.hero-card {
  background:
    radial-gradient(120% 120% at 80% -20%, rgba(204,168,95,0.10) 0%, rgba(204,168,95,0) 55%),
    linear-gradient(180deg, var(--surface-2) 0%, #100d09 100%);
  text-align: center; border-color: #322a1a; display: flex; flex-direction: column; justify-content: center;
}
.hero-usd { font-family: var(--font-head); font-size: 44px; font-weight: 600; margin: 8px 0 4px; letter-spacing: -.5px; }
.hero-native { color: var(--gold); font-size: 13px; font-weight: 600; margin-bottom: 6px; }

.trust-card { display: flex; flex-direction: column; gap: 10px; }
.trust-ring { width: 116px; height: 116px; }
.trust-ring .ring-track { fill: none; stroke: var(--border); stroke-width: 9; }
.trust-ring .ring-value { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.trust-ring.strong .ring-value { stroke: var(--ok); }
.trust-ring.fair .ring-value { stroke: var(--warn); }
.trust-ring.at-risk .ring-value { stroke: var(--danger); }
.trust-ring .ring-score { fill: var(--text); font-size: 34px; font-weight: 600; text-anchor: middle; font-family: var(--font-head); }
.trust-ring .ring-band { fill: var(--muted); font-size: 11px; text-anchor: middle; letter-spacing: .5px; text-transform: uppercase; }
.trust-factors { display: flex; flex-direction: column; gap: 2px; }
.trust-factor { display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 6px 2px; border-bottom: 1px solid var(--border-soft); }
.trust-factor:last-child { border-bottom: none; }
.tf-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.trust-factor.ok .tf-dot { background: var(--ok); }
.trust-factor.warn .tf-dot { background: var(--warn); }
.trust-factor.bad .tf-dot { background: var(--danger); }
.tf-label { flex: 1; color: var(--text); }
.tf-delta { color: var(--danger); font-weight: 700; font-variant-numeric: tabular-nums; }

.exposure-panel .exposure-summary { margin-bottom: 14px; }
.advisor-tip { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.advisor-tip:last-child { border-bottom: none; }
.tip-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; margin-top: 1px; }
.advisor-tip.ok .tip-ico { background: rgba(108,192,138,0.14); color: var(--ok); }
.advisor-tip.warn .tip-ico { background: rgba(220,154,82,0.14); color: var(--warn); }
.advisor-tip.bad .tip-ico { background: var(--danger-bg); color: var(--danger); }
.tip-body { flex: 1; }
.tip-text { font-size: 13px; line-height: 1.5; color: var(--text); }
.advisor-tip .btn-link { padding: 4px 0 0; }

/* ---- Activity ---- */
.act-ico { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: var(--gold); background: var(--surface-2); border: 1px solid var(--border); flex: none; }

/* ---- WalletConnect / Connections ---- */
.wc-pair { display: flex; gap: 8px; margin-top: 10px; }
.wc-pair input { flex: 1; }
.wc-icon { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); background: var(--surface-2); }

/* Signed-message / typed-data preview inside the confirm gate */
.confirm-msg {
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap;
  word-break: break-word; max-height: 180px; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 9px; padding: 11px 12px;
  color: var(--text); margin: 8px 0;
}

@media (max-width: 840px) {
  /* PHONE SHELL. The old layout pinned this whole sidebar to the top of the page
     as a sticky pane: brand, hamburger, an eleven-item menu, language, network
     and the account pill, all above the content. That is the "freeze pane" the
     dashboard redesign removes. Now the sidebar becomes a slide-in DRAWER (the
     "more" sheet), a lightweight non-sticky header sits at the top of the content
     and scrolls away with it, and the only persistent element is the bottom bar.
     Reusing the sidebar as the drawer is what keeps one nav: it already holds
     every route, the approvals badge, language, network and the account pill. */
  #app.shell {
    display: block; grid-template-columns: none;
    padding: 0 16px calc(80px + env(safe-area-inset-bottom, 0px));
  }

  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 300;
    width: min(86vw, 330px); margin: 0;
    border-width: 0 1px 0 0; border-radius: 0 var(--r-lg) var(--r-lg) 0;
    box-shadow: 24px 0 60px rgba(0,0,0,0.55);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    transform: translateX(-102%);
    transition: transform .26s cubic-bezier(.22,.61,.36,1);
  }
  /* Delay visibility until the slide-out finishes, so a closed drawer is never a
     focus target sitting off-screen. */
  .sidebar:not(.nav-open) {
    visibility: hidden;
    transition: transform .26s cubic-bezier(.22,.61,.36,1), visibility 0s .26s;
  }
  .sidebar.nav-open { transform: none; visibility: visible; }
  /* Inside the drawer the menu is simply always open: the drawer IS the toggle. */
  .nav { display: flex; }
  .nav-toggle { display: none; }

  /* The phone chrome REVEAL rules are not here: .mhead and .bottom-nav declare
     their default `display: none` in the redesign block at the end of this file,
     and an equally specific rule later in the file wins. See "Phone chrome
     reveal" at the bottom. */
  .shell-noauth .content { padding-top: 22px; }

  .quick-actions { grid-template-columns: repeat(4, 1fr); }
  .dash-top { grid-template-columns: 1fr; }
  .footer { padding-top: 20px; }
}

/* Headlines: Helvetica stack (real Helvetica on macOS, Arial on Windows) */
.brand-name, .balance-value, .modal-title, .stat-num {
  font-family: var(--font-head);
}

.hidden { display: none !important; }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 22px; }
.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* Network switcher */
.net-switch { position: relative; }
.net-btn {
  display: flex; align-items: center; gap: 7px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; font-size: 13px; color: var(--text);
}
.net-btn:hover { border-color: var(--gold-deep); }
.net-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 8px currentColor; flex: none; }
.net-name { font-weight: 600; }
.net-caret { color: var(--muted); font-size: 10px; }
.net-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 210px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
  /* The list holds every chain (9+): cap its height and let it scroll so it can
     never spill past the viewport on a phone (the whole list was unreachable). */
  max-height: min(60vh, 340px); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.net-option {
  display: flex; align-items: center; gap: 10px; width: 100%; background: transparent;
  color: var(--text); font-weight: 600; font-size: 13px; padding: 10px 11px; border-radius: 9px; text-align: left;
}
.net-option:hover { background: var(--surface-2); }
.net-option.active { color: var(--gold-bright); }
.net-check { margin-left: auto; color: var(--gold); }
/* Language picker (bottom of the Menu, sidebar foot) - mirrors the net switcher */
.lang-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.lang-switch { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; font-size: 13px; color: var(--text);
}
.lang-btn:hover { border-color: var(--gold-deep); }
.lang-globe { font-size: 14px; flex: none; line-height: 1; }
.lang-name { font-weight: 600; }
.lang-caret { color: var(--muted); font-size: 10px; margin-left: auto; }
.lang-menu {
  position: absolute; left: 0; right: auto; bottom: calc(100% + 6px); z-index: 60; width: 100%; min-width: 180px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 2px;
  max-height: min(50vh, 260px); overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.lang-option {
  display: flex; align-items: center; gap: 10px; width: 100%; background: transparent;
  color: var(--text); font-weight: 600; font-size: 13px; padding: 10px 11px; border-radius: 9px; text-align: left;
}
.lang-option:hover { background: var(--surface-2); }
.lang-option.active { color: var(--gold-bright); }
.lang-check { margin-left: auto; color: var(--gold); }
.brand { display: flex; align-items: center; gap: 10px; }
.logo {
  width: 42px; height: 42px; flex: 0 0 auto; object-fit: contain;
  /* logo art sits on a black square - blend it into the warm-dark canvas */
  mix-blend-mode: lighten;
  filter: drop-shadow(0 0 10px rgba(204,168,95,0.25));
}
.brand-name {
  /* Sized + spaced to fit the fixed 250px sidebar column beside the QR-scan
     button; nowrap keeps "LUXVERIUM" on one line, the parent clips as a guard. */
  font-weight: 700; font-size: 17px; letter-spacing: 0.6px; text-transform: uppercase;
  white-space: nowrap;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
}
.brand-sub { color: var(--muted); font-size: 11px; letter-spacing: .5px; margin-top: 1px; }
.brand-text { flex: 1 1 auto; min-width: 0; overflow: hidden; }
/* Header QR scan: always-visible entry to the global scanner (routes to send /
   pairing by what it reads). Hidden before a wallet/watch session exists. */
.brand-scan {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; cursor: pointer; padding: 0;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--gold-bright); font-size: 18px; line-height: 1;
}
/* QR-code image button: a crisp scannable chip. White backing + rounded corners
   so the black-on-white code reads cleanly on the dark button. */
.brand-scan img {
  width: 28px; height: 28px; object-fit: contain; display: block;
  border-radius: 6px; background: #fff; padding: 2px;
}
.brand-scan:hover { border-color: var(--gold-deep); color: var(--gold); }
.brand-scan:hover img { box-shadow: 0 0 0 1px var(--gold-deep); }
.shell-noauth .brand-scan { display: none; }

/* Cards & panels */
.card, .panel {
  background: linear-gradient(180deg, var(--surface) 0%, #120f0a 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.panel { margin-top: 14px; }

/* Connect view */
.addr-row { display: flex; gap: 8px; margin-bottom: 12px; }
input[type="text"], input[type="number"] {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 11px; padding: 13px 14px; font-size: 14px; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* A password input with no class of its own used to fall back to the user
   agent's WHITE box (the entry screen's unlock field did exactly that until
   2026-08-30). This gives it the app's dark shape at ZERO specificity, so every
   call site that brings its own class still wins: an attribute selector counts
   as class-level specificity, and putting `input[type="password"]` in the rule
   above would have quietly restyled every password field in the app. */
:where(input[type="password"]) {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 11px; padding: 13px 14px; font-size: 14px; font-family: inherit; outline: none;
}
input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(204,168,95,0.12); }
input::placeholder { color: #6f6858; }

/* Buttons */
button {
  cursor: pointer; border: none; border-radius: 11px; font-weight: 600; font-size: 14px;
  padding: 13px 16px; transition: transform .05s ease, filter .15s ease, background .15s ease;
  font-family: inherit;
}
button:active { transform: translateY(1px); }
.btn-primary { background: var(--gold-grad); color: var(--accent-ink); font-weight: 700; box-shadow: 0 4px 16px rgba(166,124,61,0.3); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--gold-deep); }
.btn-danger { background: var(--danger-bg); color: var(--danger); border: 1px solid #4a2620; }
.btn-danger:hover { filter: brightness(1.15); }
.btn-link { background: none; color: var(--gold); padding: 6px; font-size: 13px; font-weight: 600; }
.btn-link:hover { color: var(--gold-bright); }
.btn-block { width: 100%; }
button:disabled { opacity: .45; cursor: not-allowed; }

.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Account slot */
.account-slot { display: flex; align-items: center; gap: 8px; }
.pill { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 8px 13px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.mode-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 8px currentColor; }
.mode-dot.watch { background: var(--gold); color: var(--gold); }
.mode-dot.local { background: var(--gold-bright); color: var(--gold-bright); }

/* CTA row on connect view */
.cta-row { display: flex; gap: 8px; margin-top: 10px; }
.cta-row .btn-block { width: 100%; }

/* ---- Modal overlay (create / import) ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(4,3,2,0.72); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 100; padding: 18px;
}
.modal-card {
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--surface) 0%, #100d09 100%);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px;
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-title { font-weight: 600; font-size: 21px; color: var(--gold-bright); }
.modal-x { background: none; color: var(--muted); font-size: 16px; padding: 4px 8px; }
.modal-x:hover { color: var(--text); }

.modal-warn {
  background: rgba(224,106,95,0.06); border: 1px solid #4a2620; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 16px; font-size: 13px; line-height: 1.55; color: var(--text);
}
.modal-warn.small { background: var(--surface-2); border-color: var(--border); color: var(--muted); }
.modal-warn b { color: var(--gold-bright); }
.warn-list { margin: 10px 0 0; padding-left: 18px; color: var(--muted); }
.warn-list li { margin-bottom: 7px; }
.warn-list b { color: var(--text); }

/* Mnemonic grid */
.field-label-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.field-cap { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.mnemonic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.mnemonic-word {
  display: flex; align-items: baseline; gap: 6px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 9px; padding: 9px 10px; font-size: 13px;
}
.mword-i { color: var(--gold-deep); font-size: 10px; min-width: 14px; font-variant-numeric: tabular-nums; }
.mword-t { color: var(--text); font-weight: 600; font-family: var(--font-mono); }

.addr-chip { background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.addr-chip b { color: var(--gold-bright); font-family: var(--font-mono); }

.secret-row { margin-bottom: 8px; }
.secret-hidden { display: none; }
.secret-hidden.revealed { display: block; margin-bottom: 12px; }
.secret-value {
  font-family: var(--font-mono); font-size: 12px; word-break: break-all;
  background: var(--surface-2); border: 1px solid #4a2620; border-radius: 9px; padding: 12px; color: var(--danger);
}

.ack-row { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 13px; color: var(--muted); cursor: pointer; }
.ack-row input { margin-top: 2px; accent-color: var(--gold); width: 16px; height: 16px; }

.btn-sm { padding: 6px 10px; font-size: 12px; }

/* Segmented control (import) */
.seg-row { display: flex; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 5px; margin-bottom: 14px; }
.seg { flex: 1; background: transparent; color: var(--muted); font-weight: 600; padding: 9px; }
.seg.active { background: var(--surface); color: var(--gold-bright); box-shadow: inset 0 0 0 1px var(--border); }
.import-input {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 11px; padding: 13px; font-size: 14px; font-family: var(--font-mono);
  resize: vertical; margin-bottom: 14px; outline: none;
}
.import-input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(204,168,95,0.12); }

/* Persistence opt-in (create/import) */
.persist-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; margin-bottom: 14px; }
.persist-toggle { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--text); cursor: pointer; }
.persist-toggle input { accent-color: var(--gold); width: 16px; height: 16px; }
.persist-pw { width: 100%; margin-top: 10px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text); border-radius: 9px; padding: 11px 12px; font-size: 14px; font-family: inherit; outline: none; }
.persist-pw:focus { border-color: var(--gold); }
.persist-pw:disabled { opacity: .45; }
.persist-note { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* Unlock view */
#connect-view input[type="password"] { width: 100%; margin-bottom: 12px; }

/* Receive QR */
.qr-frame {
  position: relative; width: 240px; max-width: 72%; margin: 16px auto 6px; aspect-ratio: 1 / 1;
  background: #f1ede3; border-radius: 16px; padding: 14px; box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.qr-svg { width: 100%; height: 100%; display: block; }
.qr-svg svg { display: block; border-radius: 4px; }
.qr-logo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 24%; height: 24%; background: #060504; border-radius: 12px;
  display: grid; place-items: center; box-shadow: 0 0 0 5px #f1ede3;
  overflow: hidden;
}
.qr-logo img { width: 108%; height: 108%; object-fit: contain; }

/* Balance card */
.balance-card {
  background:
    radial-gradient(120% 120% at 80% -20%, rgba(204,168,95,0.10) 0%, rgba(204,168,95,0) 55%),
    linear-gradient(180deg, var(--surface-2) 0%, #100d09 100%);
  text-align: center; border-color: #322a1a;
}
.balance-label { color: var(--muted); font-size: 12px; letter-spacing: .8px; text-transform: uppercase; }
.balance-value { font-size: 46px; font-weight: 600; margin: 8px 0; letter-spacing: -.5px; }
.balance-value small { font-size: 18px; color: var(--gold); font-weight: 700; }
.balance-addr { color: var(--muted); font-size: 13px; font-family: var(--font-mono); }

/* Tabs */
.tabs { display: flex; gap: 4px; margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 6px; }
.tab { flex: 1; background: transparent; color: var(--muted); position: relative; font-weight: 600; font-size: 13px; padding: 11px 6px; }
.tab.active { background: var(--surface-2); color: var(--gold-bright); box-shadow: inset 0 0 0 1px var(--border); }
.tab-badge { display: none; background: var(--danger); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; margin-left: 4px; }
.tab-badge.show { display: inline-block; }

/* Lists */
.row { display: flex; align-items: center; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--border-soft); }
.row:last-child { border-bottom: none; }
.row-main { display: flex; align-items: center; gap: 12px; }
.token-icon {
  width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2);
  display: grid; place-items: center; font-weight: 700; font-size: 12px; color: var(--gold);
  border: 1px solid var(--border);
}
/* Generated / curated coin marks (coinIcon.js). The SVG paints its own disc; a
   soft ring keeps it consistent with the old .token-icon slot. */
.coin-icon { display: inline-grid; place-items: center; flex: none; line-height: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border); }
.coin-icon svg { display: block; border-radius: 50%; }
/* An OFFICIAL mark from assets/chains renders as drawn: no circular clip and no
   ring. These files are not all discs (Ethereum's diamond and Monad's blob both
   sit on transparency), so cropping them round would cut the artwork and draw a
   border through empty space. The locally drawn token marks keep the disc. */
.coin-icon-file { border-radius: 0; box-shadow: none; }
/* The pixel cap lives in coinIcon.js (percentages cannot resolve here - see the
   comment there); this only keeps the aspect honest inside it. */
.coin-icon-img { display: block; width: auto; height: auto; object-fit: contain; }
.tokm-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row-title { font-weight: 600; }
.row-sub { color: var(--muted); font-size: 12px; }
.row-sub a { color: var(--muted); text-decoration: none; }
.row-sub a:hover { color: var(--gold); }
.row-amount { font-weight: 700; text-align: right; }
.row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* Hold-to-reveal password field (dom.js passwordField) */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 42px; }
.pw-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; display: grid; place-items: center;
  background: transparent; border: none; border-radius: 8px; cursor: pointer;
  color: var(--muted); transition: color .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent; touch-action: none; user-select: none;
}
.pw-eye:hover { color: var(--gold); }
.pw-eye.on { color: var(--gold); background: rgba(204, 168, 95, 0.12); }
.pw-eye:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Approval-specific */
.exposure-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.stat { background: var(--surface-2); border: 1px solid var(--border); border-radius: 13px; padding: 15px; text-align: center; }
.stat-num { font-size: 29px; font-weight: 600; color: var(--gold-bright); }
.stat-num.danger { color: var(--danger); }
.stat-label { color: var(--muted); font-size: 11px; margin-top: 3px; letter-spacing: .4px; }
.cap-unlimited { color: var(--danger); font-weight: 700; }
.badge-warn { background: var(--danger-bg); color: var(--danger); border: 1px solid #4a2620; border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: .3px; }

.notice { background: var(--surface-2); border: 1px dashed var(--border); border-radius: 11px; padding: 14px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.notice code { color: var(--gold); background: rgba(204,168,95,.08); padding: 1px 6px; border-radius: 5px; }
.notice b { color: var(--text); }

/* Forms */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; letter-spacing: .4px; text-transform: uppercase; }
.field-row { display: flex; gap: 8px; }
select { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 11px; padding: 13px; font-size: 14px; font-family: inherit; }
select:focus { border-color: var(--gold); outline: none; }

/* Receive */
.receive-box { text-align: center; }
.addr-display { font-family: var(--font-mono); background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 16px; word-break: break-all; font-size: 15px; margin: 14px 0; color: var(--gold-bright); }

.footer { text-align: center; color: var(--muted); font-size: 11px; margin-top: 26px; line-height: 1.6; }

.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
.center-msg { text-align: center; color: var(--muted); padding: 30px 0; }
.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 12px 18px; font-size: 13px; box-shadow: var(--shadow); z-index: 200; max-width: 90%; }
.toast.err { border-color: #4a2620; color: var(--danger); }
.toast.ok { border-color: #22432f; color: var(--ok); }

/* ---- Pre-sign confirm modal ---- */
.confirm-card { max-width: 420px; }
.confirm-rows { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px; margin: 4px 0 16px; }
.confirm-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.confirm-line:last-child { border-bottom: none; }
.confirm-line-label { color: var(--muted); font-size: 12px; letter-spacing: .3px; text-transform: uppercase; flex: none; padding-top: 2px; }
.confirm-line-value { text-align: right; font-size: 14px; word-break: break-word; }
.confirm-line-value.mono { font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; color: var(--gold-bright); }
.confirm-line-value.strong { font-weight: 700; }
.confirm-risk { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 13px 14px; margin-bottom: 12px; font-size: 13px; line-height: 1.5; }
.confirm-risk.danger { background: var(--danger-bg); border: 1px solid #4a2620; color: var(--text); }
.confirm-risk.warn { background: rgba(220,154,82,0.08); border: 1px solid #4a3a20; color: var(--text); }
.confirm-risk b { color: var(--gold-bright); }
.confirm-risk-ico { font-weight: 800; flex: none; }
.confirm-risk.danger .confirm-risk-ico { color: var(--danger); }
.confirm-risk.warn .confirm-risk-ico { color: var(--warn); }
.confirm-safe { background: rgba(108,192,138,0.07); border: 1px solid #22432f; border-radius: 12px; padding: 12px 14px; margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.confirm-safe b { color: var(--ok); }
.confirm-foot-note { font-size: 12px; color: var(--muted); line-height: 1.5; margin: -6px 2px 14px; }
.confirm-actions { display: flex; gap: 8px; }

/* ---- Slide to confirm ------------------------------------------------------
   The approval gesture for every non-Fortress signature (confirmView.js). It
   stacks: the slider is the primary act and gets the full width, with Cancel
   underneath as ordinary text, so the two can never be confused for a pair of
   equally weighted buttons. */
.confirm-actions-slide { flex-direction: column; gap: 10px; }
.slide-confirm {
  position: relative; width: 100%; height: 56px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; place-items: center; isolation: isolate;
  touch-action: none;      /* the drag is ours; do not let the sheet scroll instead */
  user-select: none; -webkit-user-select: none; cursor: grab; overflow: hidden;
}
.slide-confirm:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.slide-confirm:active { cursor: grabbing; }
/* The travelled part of the track, drawn behind the label and knob. */
.slide-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(204,168,95,0.20), rgba(204,168,95,0.34));
}
.slide-label {
  position: relative; z-index: 1; font-weight: 700; font-size: 15px;
  color: var(--gold-bright); letter-spacing: .2px; padding: 0 56px;
  text-align: center; pointer-events: none;
}
.slide-chev {
  position: absolute; right: 18px; z-index: 1; color: var(--gold-deep);
  font-size: 17px; letter-spacing: -2px; pointer-events: none;
}
.slide-knob {
  position: absolute; left: 4px; top: 4px; width: 48px; height: 48px; z-index: 2;
  border-radius: 50%; background: var(--text);
  display: grid; place-items: center; pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
/* Three bars, the universal "drag me" mark from the reference. */
.slide-grip {
  width: 12px; height: 14px; background:
    linear-gradient(var(--bg-2) 0 0) 0 50% / 2px 100% no-repeat,
    linear-gradient(var(--bg-2) 0 0) 50% 50% / 2px 100% no-repeat,
    linear-gradient(var(--bg-2) 0 0) 100% 50% / 2px 100% no-repeat;
  opacity: .55;
}
/* Only while settling or on a key press. During a drag the knob must track the
   finger exactly, so `animating` is removed on pointerdown. */
.slide-confirm.animating .slide-knob,
.slide-confirm.animating .slide-fill { transition: transform .22s ease, width .22s ease; }
.slide-confirm.done { border-color: var(--gold); cursor: default; }
.slide-confirm.done .slide-fill { background: linear-gradient(90deg, rgba(204,168,95,0.34), rgba(204,168,95,0.5)); }
/* A destructive approval (revoke, unlimited cap) recolours the whole track, the
   same signal btn-danger carried before. */
.slide-confirm.danger .slide-fill { background: linear-gradient(90deg, rgba(224,90,90,0.22), rgba(224,90,90,0.38)); }
.slide-confirm.danger .slide-label { color: var(--danger); }
.slide-confirm.danger .slide-chev { color: var(--danger); }
.slide-confirm.danger.done .slide-fill { background: linear-gradient(90deg, rgba(224,90,90,0.38), rgba(224,90,90,0.55)); }
@media (prefers-reduced-motion: reduce) {
  .slide-confirm.animating .slide-knob,
  .slide-confirm.animating .slide-fill { transition: none; }
}
/* Auto-cancel countdown on the pre-sign gate. */
.confirm-countdown {
  text-align: center; font-size: 12px; color: var(--muted); margin: 2px 2px 14px;
  font-variant-numeric: tabular-nums; letter-spacing: .2px;
}
.confirm-countdown.urgent { color: var(--danger); font-weight: 700; }
/* A locked pre-sign gate: no click-away dismiss, and lifted above the intro and
   onboarding overlays so a restored pending request is always visible on boot. */
.modal-backdrop.confirm-locked { z-index: 5000; }
/* During the first-run onboarding journey (.onb is z-index 3800), a modal opened
   from its "Create / Import" step must sit ABOVE the onboarding overlay,
   or it renders behind it and looks like nothing happened (hit on a fresh Telegram
   Mini App / plugin session where onboarding actually runs). Below the confirm gate. */
body.onb-open .modal-backdrop { z-index: 4300; }
/* Same reason: a toast raised during onboarding must show above the onboarding
   overlay, not vanish behind it. */
body.onb-open .toast { z-index: 4400; }



/* ---- Token list header / tags / manage modal ---- */
.list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.list-head-title { font-weight: 700; font-size: 15px; }
.list-foot { text-align: center; color: var(--muted); font-size: 12px; padding-top: 14px; }
.tok-tag { font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 2px 7px; border-radius: 999px; vertical-align: middle; }
.tok-tag.trusted { background: rgba(108,192,138,0.12); color: var(--ok); border: 1px solid #22432f; }
.tok-tag.imported { background: rgba(204,168,95,0.10); color: var(--gold); border: 1px solid var(--border); }
.tok-tag.native { background: rgba(204,168,95,0.18); color: var(--gold); border: 1px solid var(--gold); }
.token-icon.native { background: rgba(204,168,95,0.14); border-color: var(--gold); }
.tokm-import { display: flex; gap: 8px; margin-bottom: 16px; }
.tokm-import input { flex: 1; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 11px; padding: 12px; font-size: 13px; font-family: var(--font-mono); outline: none; }
.tokm-import input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(204,168,95,0.12); }
.tokm-list { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 2px 12px; margin: 8px 0 16px; }
.tokm-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.tokm-row:last-child { border-bottom: none; }
.tokm-row.is-hidden { opacity: .5; }
.tokm-sym { font-weight: 600; font-size: 14px; }
.tokm-controls { display: flex; gap: 6px; flex: none; }

/* ---- Token import confirmation ---- */
.tokm-confirm-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin: 8px 0 14px; }
.tokm-confirm-sym { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tokm-kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border-soft); font-size: 13px; }
.tokm-kv:first-of-type { border-top: none; }
.tokm-kv-label { color: var(--muted); flex: none; }
.tokm-kv-val { color: var(--text); text-align: right; word-break: break-word; }
.tokm-kv-val.mono { font-family: var(--font-mono); font-size: 12px; }
.tokm-confirm-actions { display: flex; gap: 8px; }
.tokm-confirm-actions button { flex: 1; }

/* ---- Security panel ---- */
.sec-block { margin-bottom: 20px; }
.sec-block:last-child { margin-bottom: 0; }
.sec-block-title { font-weight: 700; font-size: 14px; color: var(--gold-bright); margin-bottom: 12px; letter-spacing: .2px; }
.sec-check { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.sec-check:last-child { border-bottom: none; }
.sec-check-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; margin-top: 1px; }
.sec-check.ok .sec-check-ico { background: rgba(108,192,138,0.14); color: var(--ok); }
.sec-check.warn .sec-check-ico { background: rgba(220,154,82,0.14); color: var(--warn); }
.sec-check.bad .sec-check-ico { background: var(--danger-bg); color: var(--danger); }
.sec-check.info .sec-check-ico { background: var(--surface-2); color: var(--gold); }
.sec-check-label { font-weight: 600; font-size: 14px; }
.sec-check-detail { color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-top: 3px; }
.sec-check-detail b { color: var(--text); }
.sec-list { margin: 6px 0 0; padding-left: 18px; }
.sec-list li { margin-bottom: 9px; font-size: 13px; line-height: 1.55; color: var(--text); }
.sec-list li b { color: var(--gold-bright); }
.sec-list li i { color: var(--ok); font-style: normal; }
.sec-list.muted li { color: var(--muted); }
.sec-list.muted li b { color: var(--text); }
.sec-list.check li::marker { content: "✓  "; color: var(--gold); }

/* ============================================================================
   Opening scene (intro.js) - flash -> compass -> tagline -> loading -> continue
   ========================================================================== */
.intro-open { overflow: hidden; }

.intro {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(60vmax 60vmax at 50% 46%, #17120a 0%, rgba(11,10,7,0) 62%),
    var(--bg);
  overflow: hidden;
  animation: introVeil 0.28s ease-out both;
}
.intro.intro-out { animation: introFadeOut 0.5s ease-in forwards; }

/* 1 - Flash of light: a warm gold burst that blooms then clears. */
.intro-flash {
  position: absolute; top: 46%; left: 50%;
  width: 120vmax; height: 120vmax; transform: translate(-50%, -50%) scale(0.05);
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle,
    rgba(255,246,224,0.95) 0%,
    rgba(232,204,134,0.75) 12%,
    rgba(204,168,95,0.35) 26%,
    rgba(166,124,61,0) 55%);
  mix-blend-mode: screen;
  animation: introFlash 0.55s cubic-bezier(0.22,0.61,0.36,1) both;
}

/* Star-shaped light rays (uses the bare star art) that expand out of the flash
   and dissolve as the full compass settles in. */
.intro-rays {
  position: absolute; top: 46%; left: 50%;
  width: clamp(320px, 90vmin, 900px); height: auto;
  transform: translate(-50%, -50%) scale(0.2) rotate(-25deg);
  opacity: 0; pointer-events: none;
  filter: blur(2px) brightness(1.4);
  mix-blend-mode: screen;
  animation: introRays 0.9s cubic-bezier(0.16,0.84,0.44,1) both;
}

.intro-stage {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 24px; max-width: 92vw;
}

/* 2 - Logo reveal: the compass fades up and settles from a slight over-scale. */
.intro-logo-wrap { line-height: 0; }
.intro-logo {
  /* The 3D mark is portrait (AR 0.807) where the old flat compass was nearly
     square, so the width is trimmed to keep the rendered HEIGHT about the same
     and the Get Started button above the fold on a phone. height:auto so the
     mark can never squash. */
  width: clamp(130px, 34vmin, 280px); height: auto;
  opacity: 0; transform: scale(1.16) rotate(-6deg);
  filter: drop-shadow(0 0 26px rgba(204,168,95,0.35));
  animation: introLogo 0.7s cubic-bezier(0.16,0.84,0.44,1) 0.3s both;
}

.intro-word {
  margin-top: 18px;
  font-family: var(--font-head);
  font-weight: 600; letter-spacing: 0.42em; text-indent: 0.42em;
  font-size: clamp(20px, 4.4vmin, 34px);
  background: var(--gold-grad); -webkit-background-clip: text;
  background-clip: text; color: transparent;
  opacity: 0; transform: translateY(6px);
  animation: introRise 0.55s ease-out 0.85s both;
}

/* 3 - Tagline fade in. */
.intro-tagline {
  margin-top: 14px; color: var(--gold-bright);
  font-size: clamp(15px, 2.6vmin, 20px); font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0; transform: translateY(6px);
  animation: introRise 0.5s ease-out 1.0s both;
}

/* 4 - Loading shimmer + line. */
.intro-loading {
  margin-top: 34px; width: clamp(150px, 30vmin, 240px); height: 2px;
  background: rgba(204,168,95,0.14); border-radius: 2px; overflow: hidden;
  opacity: 0; animation: introRise 0.3s ease-out 1.5s both;
}
.intro-loading-bar {
  display: block; width: 40%; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, rgba(232,204,134,0) 0%, var(--gold-bright) 50%, rgba(232,204,134,0) 100%);
  transform: translateX(-120%);
  animation: introShimmer 1.15s ease-in-out 1.6s infinite;
}
.intro-loading-text {
  margin-top: 12px; color: var(--muted);
  font-size: clamp(11px, 1.9vmin, 13px); letter-spacing: 0.04em;
  opacity: 0; animation: introRise 0.3s ease-out 1.55s both;
}

/* 5 - Continue button. */
.intro-continue {
  margin-top: 30px; padding: 13px 46px; border: 0; cursor: pointer;
  border-radius: 12px; font-family: var(--font-body); font-weight: 700;
  font-size: 15px; color: var(--accent-ink);
  background: var(--gold-grad);
  box-shadow: 0 8px 26px rgba(204,168,95,0.28);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  animation: introRise 0.35s ease-out 1.8s both;
}
.intro-continue:hover { filter: brightness(1.06); }
.intro-continue:active { transform: translateY(9px) scale(0.99); }

@keyframes introVeil { from { opacity: 0; } to { opacity: 1; } }
@keyframes introFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes introFlash {
  0%   { opacity: 0;    transform: translate(-50%,-50%) scale(0.05); }
  22%  { opacity: 1;    transform: translate(-50%,-50%) scale(0.6); }
  55%  { opacity: 0.5;  transform: translate(-50%,-50%) scale(1.15); }
  100% { opacity: 0;    transform: translate(-50%,-50%) scale(1.5); }
}
@keyframes introRays {
  0%   { opacity: 0;   transform: translate(-50%,-50%) scale(0.2)  rotate(-25deg); }
  30%  { opacity: 0.9; transform: translate(-50%,-50%) scale(0.9)  rotate(-8deg); }
  100% { opacity: 0;   transform: translate(-50%,-50%) scale(1.35) rotate(6deg); }
}
@keyframes introLogo {
  0%   { opacity: 0; transform: scale(1.16) rotate(-6deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes introRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes introShimmer {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}

/* Calm path for reduced-motion: show the final frame instantly, no motion. */
.intro-reduced .intro-flash,
.intro-reduced .intro-rays,
.intro-reduced .intro-loading,
.intro-reduced .intro-loading-bar { display: none; }
.intro-reduced { animation: none; }
.intro-reduced .intro-logo,
.intro-reduced .intro-word,
.intro-reduced .intro-tagline,
.intro-reduced .intro-loading-text,
.intro-reduced .intro-continue {
  animation: none; opacity: 1; transform: none;
}
.intro-reduced .intro-continue { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .intro, .intro * { animation-duration: 0.001s !important; }
}

/* ============================================================================
   New User Journey (onboarding.js) - full-screen guided flow, steps 02-09
   ========================================================================== */
.onb-open { overflow: hidden; }
.onb {
  position: fixed; inset: 0; z-index: 3800;
  background: var(--bg);
  display: flex; flex-direction: column;
  animation: onbFadeIn 0.35s ease-out both;
}
.onb.onb-out { animation: onbFadeOut 0.4s ease-in forwards; }
@keyframes onbFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes onbFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Progress rail */
.onb-rail {
  position: absolute; top: 18px; left: 0; right: 0; z-index: 5;
  display: flex; gap: 8px; justify-content: center; pointer-events: none;
}
.onb-dot { width: 22px; height: 3px; border-radius: 3px; background: rgba(204,168,95,0.2); transition: background 0.3s; }
.onb-dot.active { background: var(--gold-bright); }
.onb-dot.done { background: var(--gold-deep); }

.onb-viewport { position: relative; flex: 1; min-height: 0; }
.onb-slide { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; }
.onb-slide.in { opacity: 1; transform: none; }

/* A scene: background + scrim + content */
.onb-scene { position: absolute; inset: 0; overflow: hidden; }
.onb-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.onb-scrim {
  position: absolute; inset: 0;
  /* Content is centred (see .onb-content), so darken the MIDDLE the most: a soft
     central spotlight keeps the title/sub legible over any background image,
     with a lighter base wash top-and-bottom. */
  background:
    radial-gradient(118% 78% at 50% 50%, rgba(11,10,7,0.82) 0%, rgba(11,10,7,0.56) 58%, rgba(11,10,7,0.42) 100%),
    linear-gradient(180deg, rgba(11,10,7,0.4) 0%, rgba(11,10,7,0.32) 50%, rgba(11,10,7,0.5) 100%);
}
.onb-scene-head { position: absolute; top: 40px; left: 0; right: 0; padding: 0 20px; z-index: 4; height: 40px; }
.onb-back {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border);
  background: rgba(22,19,13,0.7); color: var(--text); font-size: 18px; cursor: pointer;
}
.onb-back:hover { border-color: var(--gold); color: var(--gold-bright); }

.onb-content {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; justify-content: center;
  gap: 14px; padding: 64px 24px 40px; max-width: 620px; margin: 0 auto;
  text-align: center;
  overflow-y: auto;                 /* tall steps stay reachable, don't clip */
}
.onb-title {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(30px, 5.6vmin, 46px); line-height: 1.12; margin: 0; color: var(--text);
  text-transform: uppercase;
}
.onb-sub { color: var(--muted); font-size: clamp(14px, 2.4vmin, 17px); margin: 0; line-height: 1.5; }
.onb-foot-note { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

/* Checklists (steps 03, 05) */
.onb-checks { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.onb-check { display: flex; align-items: center; gap: 12px; color: var(--text); font-size: 15px; }
.onb-check-mark {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  color: var(--accent-ink); background: var(--gold-grad);
}

/* Primary button */
.onb-primary {
  margin-top: 8px; padding: 15px 24px; border: 0; cursor: pointer; width: 100%;
  border-radius: 14px; font-family: var(--font-body); font-weight: 700; font-size: 16px;
  color: var(--accent-ink); background: var(--gold-grad);
  box-shadow: 0 10px 30px rgba(204,168,95,0.26);
}
.onb-primary:hover { filter: brightness(1.05); }
.onb-primary:active { transform: translateY(1px); }

/* 02 - path cards */
.onb-paths { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.onb-path-card {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  border: 1px solid var(--border); border-radius: 18px; min-height: 128px; padding: 0;
  background-size: cover; background-position: center; color: var(--text);
  transition: border-color 0.2s, transform 0.15s;
}
.onb-path-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.onb-path-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,10,7,0.85) 0%, rgba(11,10,7,0.5) 60%, rgba(11,10,7,0.2) 100%); }
.onb-path-body { position: relative; z-index: 2; padding: 20px 22px; }
.onb-path-title { font-family: var(--font-head); font-weight: 600; font-size: 22px; color: var(--gold-bright); }
.onb-path-desc { color: var(--text); font-size: 13.5px; margin-top: 4px; max-width: 74%; }
.onb-path-go {
  position: absolute; right: 18px; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--gold); color: var(--gold-bright); font-size: 18px;
}

/* 04 - setup cards */
.onb-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.onb-setup-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; color: var(--text);
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.onb-setup-card:hover { border-color: var(--gold); background: var(--surface-2); transform: translateY(-2px); }
.onb-setup-title { font-weight: 700; font-size: 16px; }
.onb-setup-desc { color: var(--muted); font-size: 13px; margin-top: 3px; }
.onb-setup-icon { font-size: 20px; color: var(--gold-bright); flex: 0 0 auto; }
.onb-lock-note { display: flex; align-items: center; gap: 10px; justify-content: center; color: var(--muted); font-size: 13px; margin-top: 6px; }
.onb-lock { color: var(--gold); }

/* 07 - tour */
.onb-tour-card {
  background: rgba(22,19,13,0.72); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 20px; text-align: left; backdrop-filter: blur(4px);
}
.onb-tour-title { font-weight: 700; font-size: 18px; color: var(--gold-bright); }
.onb-tour-desc { color: var(--text); font-size: 14px; margin-top: 4px; }
.onb-tour-dots { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }
.onb-tdot { width: 8px; height: 8px; border-radius: 50%; background: rgba(204,168,95,0.28); }
.onb-tdot.active { background: var(--gold-bright); }

/* 09 - all set */
.onb-allset { display: flex; flex-direction: column; gap: 14px; align-items: center; }

/* Desktop: two path cards side by side, content a touch roomier */
@media (min-width: 720px) {
  .onb-paths { flex-direction: row; }
  .onb-path-card { flex: 1; }
  .onb-content { padding: 64px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .onb, .onb-slide { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* ============================================================================
   Glossary: inline term links, top popover, and the Learn page
   ========================================================================== */
/* Inline link (Beginner mode). A <button> reset to read as inline text. */
.gloss-term {
  display: inline; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: var(--gold); cursor: pointer;
  border-bottom: 1px dotted var(--gold-deep); line-height: inherit;
}
.gloss-term:hover { color: var(--gold-bright); border-bottom-color: var(--gold); }

/* Top popover */
.gloss-pop {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-12px);
  width: calc(100% - 32px); max-width: 440px; z-index: 2600;
  opacity: 0; transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none;
}
.gloss-pop.in { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.gloss-pop-card {
  position: relative; background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--gold-deep); border-radius: 14px; box-shadow: 0 16px 44px rgba(0,0,0,0.55);
  padding: 16px 18px;
}
.gloss-pop-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--muted); font-size: 14px; cursor: pointer; }
.gloss-pop-x:hover { color: var(--text); }
.gloss-pop-cat { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.gloss-pop-term { font-family: var(--font-head); font-weight: 600; font-size: 20px; color: var(--gold-bright); margin: 3px 0 6px; }
.gloss-pop-def { color: var(--text); font-size: 14px; line-height: 1.5; }
.gloss-pop-more { margin-top: 12px; background: none; border: 0; color: var(--gold); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; }
.gloss-pop-more:hover { color: var(--gold-bright); }



/* ---- Our Partners: banner cards at the foot of every chain dashboard ----
   Kept deliberately quiet so it reads as a footer and does not compete with the
   balance/exposure cards above: a hairline rule and generous space separate it,
   the heading uses the small mono eyebrow (not the gold .section-title), and the
   cards rest at 88% opacity, coming to full only on hover. */
.partners { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--border); }
.partners-head {
  font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px;
}
/* The cards ride an auto-sliding horizontal rail (dashboardParts.js drives
   scrollLeft, the same mechanism the marketing site uses), so overflow-x is auto
   rather than hidden: that is what lets the reader also drag, wheel or swipe.
   Scrollbar hidden for a clean look, edges masked so cards fade in and out
   instead of being cut off. */
.partner-marquee {
  position: relative; width: 100%; overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.partner-marquee::-webkit-scrollbar { width: 0; height: 0; display: none; }
.partner-marquee.dragging { cursor: grabbing; }
.partner-marquee.dragging img { pointer-events: none; }
.partner-track { display: flex; width: max-content; align-items: stretch; gap: 12px; will-change: scroll-position; }
/* Small on purpose: at 200px these read as a quiet footer strip rather than
   three big banners, and several fit the rail at once so the slide is legible. */
.partner-card {
  flex: 0 0 200px; display: block; padding: 0; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  opacity: .88; transition: opacity .2s ease, border-color .2s ease, transform .2s ease;
}
.partner-card:hover { opacity: 1; border-color: var(--gold-deep); }
/* only the linked variant (a <button>) is interactive */
button.partner-card { cursor: pointer; }
button.partner-card:hover { transform: translateY(-2px); }
.partner-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  /* No auto-advance in this mode, so nothing is sliding out of the fade. */
  .partner-marquee { -webkit-mask-image: none; mask-image: none; }
}

/* Tutorial article title inside the Learn shell (a level below the page h1) */
.tut-detail-title { font-family: var(--font-head); font-size: 26px; font-weight: 600; margin: 6px 0 0; letter-spacing: .2px; }

/* ============================================================================
   Tutorials page
   ========================================================================== */
.tut-level {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border);
}
.tut-level.beginner { color: var(--ok); background: rgba(108,192,138,0.08); border-color: rgba(108,192,138,0.3); }
.tut-level.intermediate { color: var(--warn); background: rgba(220,154,82,0.08); border-color: rgba(220,154,82,0.3); }
.tut-mins { font-size: 12px; color: var(--muted); }

.tut-detail-meta { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.tut-body { display: flex; flex-direction: column; gap: 4px; }
.tut-section { padding: 6px 0; }
.tut-section + .tut-section { border-top: 1px solid var(--border-soft); }
.tut-section-title {
  font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-deep); margin: 12px 0 8px;
}
.tut-bullets { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.tut-bullets li { color: var(--text); font-size: 14.5px; line-height: 1.55; }
.tut-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 14px; }
.tut-step { color: var(--text); }
.tut-step::marker { color: var(--gold); font-weight: 700; }
.tut-step-title { font-weight: 700; font-size: 14.5px; color: var(--text); }
.tut-step-body { color: var(--muted); font-size: 14px; line-height: 1.55; margin-top: 3px; }

.tut-related { display: flex; flex-wrap: wrap; gap: 8px; }
.tut-term-link {
  background: var(--bg-2); border: 1px solid var(--border); color: var(--gold); cursor: pointer;
  font-size: 12.5px; padding: 5px 11px; border-radius: 999px; font-weight: 600;
}
.tut-term-link:hover { color: var(--gold-bright); border-color: var(--gold-deep); }

.tut-prevnext { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.tut-nav-btn {
  background: var(--surface); border: 1px solid var(--border); color: var(--text); cursor: pointer;
  font-size: 13px; font-weight: 600; padding: 10px 14px; border-radius: 10px; max-width: 48%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tut-nav-btn:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ---- Level-up quiz (quizView) + Settings skill-level row ------------------ */

.quiz-facts { margin: 12px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.quiz-facts li { color: var(--text); font-size: 14px; line-height: 1.5; }
.quiz-facts b { color: var(--gold-bright); }

.quiz-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.quiz-count { font-weight: 700; font-size: 13px; color: var(--gold-deep); letter-spacing: 0.02em; }
.quiz-tally { font-size: 12px; color: var(--muted); }

.quiz-bar { height: 4px; border-radius: 999px; background: var(--surface); overflow: hidden; margin-bottom: 16px; }
.quiz-bar-fill { height: 100%; background: var(--gold-grad); transition: width 0.25s ease; }

.quiz-q { font-size: 16.5px; font-weight: 700; color: var(--text); line-height: 1.45; margin-bottom: 14px; }

.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-opt {
  text-align: left; width: 100%; padding: 13px 15px; border-radius: 12px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-size: 14.5px; line-height: 1.4; transition: border-color 0.15s ease, background 0.15s ease;
}
.quiz-opt:hover:not(.locked) { border-color: var(--gold-deep); }
.quiz-opt.locked { cursor: default; }
.quiz-opt.correct { border-color: var(--ok); background: rgba(108,192,138,0.12); color: var(--text); }
.quiz-opt.correct::after { content: " ✓"; color: var(--ok); font-weight: 700; }
.quiz-opt.wrong { border-color: var(--danger); background: rgba(224,106,95,0.12); color: var(--text); }
.quiz-opt.wrong::after { content: " ✕"; color: var(--danger); font-weight: 700; }
.quiz-opt.locked:not(.correct):not(.wrong) { opacity: 0.55; }

.quiz-result { text-align: center; padding: 8px 0 4px; }
.quiz-score { font-family: var(--font-head); font-size: 46px; font-weight: 600; line-height: 1; }
.quiz-score.pass { color: var(--ok); }
.quiz-score.fail { color: var(--danger); }
.quiz-verdict { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }

.quiz-lock-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; }
.quiz-lock-time { font-family: var(--font-head); font-weight: 600; font-size: 25px; color: var(--gold-bright); }

/* ---- QR scan (camera) ----------------------------------------------------- */
/* A text input paired with a compact Scan button. */
.input-with-btn { display: flex; gap: 8px; align-items: stretch; }
.input-with-btn > input { flex: 1; min-width: 0; }
.btn-scan { flex: 0 0 auto; white-space: nowrap; font-weight: 600; color: var(--gold-bright); }
.btn-scan:hover { border-color: var(--gold-deep); }
.wc-pair-scan { margin-top: 8px; }
.wc-pair-scan .btn-scan { width: 100%; }

.qr-card { max-width: 420px; }
.qr-stage {
  position: relative; width: 100%; aspect-ratio: 1 / 1; margin-top: 4px;
  background: #000; border-radius: 14px; overflow: hidden; border: 1px solid var(--border);
}
.qr-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qr-reticle {
  position: absolute; inset: 18%; border: 2px solid var(--gold-bright); border-radius: 12px;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,0.28); pointer-events: none;
}
.qr-status { text-align: center; margin-top: 10px; font-size: 13px; color: var(--muted); min-height: 18px; }
.qr-status.err { color: var(--danger); }

/* ---- Notification popups (notify.js) -------------------------------------- */
.notify-root {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 4200; display: flex; flex-direction: column; gap: 10px; align-items: center;
  pointer-events: none; width: min(92vw, 400px);
}
.notify {
  pointer-events: auto; width: 100%; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--gold);
  border-radius: 12px; padding: 12px 14px; cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  opacity: 0; transform: translateY(-10px); transition: opacity 0.24s ease, transform 0.24s ease;
}
.notify.in { opacity: 1; transform: translateY(0); }
.notify.out { opacity: 0; transform: translateY(-10px); }
.notify-receive { border-left-color: var(--ok); }
.notify-swap { border-left-color: var(--gold-bright); }
.notify-success { border-left-color: var(--ok); }
.notify-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700;
  background: var(--surface-2); color: var(--gold-bright); border: 1px solid var(--border);
}
.notify-receive .notify-ico, .notify-success .notify-ico { color: var(--ok); }
.notify-body { flex: 1; min-width: 0; }
.notify-title { font-weight: 700; font-size: 14px; color: var(--text); }
.notify-detail { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.notify-x { flex: 0 0 auto; background: none; color: var(--muted); font-size: 13px; padding: 2px 6px; }
.notify-x:hover { color: var(--text); }

/* ---- Learning progress (progress.js: Learn + Tutorials) ------------------- */
.lp-panel .lp-head, .lp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lp-title { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); }
.lp-text { font-size: 13px; color: var(--muted); }
.lp-bar { height: 8px; border-radius: 999px; background: var(--surface); overflow: hidden; margin-top: 10px; border: 1px solid var(--border); }
.lp-fill { height: 100%; background: var(--gold-grad); width: 0; transition: width 0.35s ease; }
.tut-done-btn { margin-top: 16px; }
.tut-done-btn.done { background: rgba(108,192,138,0.14); color: var(--ok); box-shadow: none; }

/* ---- "Known / saved" recipient banner on the confirm gate ----------------- */
.confirm-risk.known { background: rgba(108,192,138,0.07); border: 1px solid #22432f; color: var(--text); }
.confirm-risk.known .confirm-risk-ico { color: var(--ok); }

/* ---- Address Book (addressBook.js + addressBookView.js) ------------------- */
.btn-sm { font-size: 12px; padding: 6px 12px; }
.ab-h { font-size: 14px; color: var(--gold-bright); font-weight: 700; margin: 0 0 12px; letter-spacing: .3px; }
.ab-add select { width: 100%; }
.ab-kind-hint { font-size: 12px; color: var(--muted); margin-top: 6px; min-height: 16px; }
.ab-kind-hint b { color: var(--text); }
.ab-kind-bad { color: var(--danger); }
.ab-list { display: flex; flex-direction: column; gap: 16px; }
.ab-group { margin: 0; }
.ab-rows { display: flex; flex-direction: column; }
.ab-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.ab-row:last-child { border-bottom: none; }
.ab-row-main { min-width: 0; flex: 1; }
.ab-row-top { display: flex; align-items: center; gap: 8px; }
.ab-row-name { font-weight: 700; color: var(--text); font-size: 14px; }
.ab-row-addr { font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-all; }
.ab-row-note { font-size: 12px; color: var(--muted); margin-top: 3px; font-style: italic; }
.ab-row-actions { flex: 0 0 auto; display: flex; gap: 6px; }
.ab-del:hover { color: var(--danger); border-color: var(--danger); }

/* Address-book hint under the Send recipient field. */
.ab-send-hint { margin-top: 8px; min-height: 0; }
.ab-send-hint:empty { margin-top: 0; }
.ab-send-known { font-size: 12.5px; color: var(--ok); font-weight: 600; }
.ab-send-known b { color: var(--text); }
.ab-send-savewrap { display: flex; gap: 8px; align-items: stretch; }
.ab-send-name { flex: 1; min-width: 0; }
.ab-send-save { flex: 0 0 auto; white-space: nowrap; color: var(--gold-bright); font-weight: 600; }
.ab-send-save:hover { border-color: var(--gold-deep); }
.ab-send-open { color: var(--gold-bright); font-weight: 600; }
.ab-send-open:hover { border-color: var(--gold-deep); }
/* Amount label row: label on the left, live selected-asset balance on the right. */
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.send-bal { color: var(--muted); font-size: 12px; font-weight: 600; text-align: right; }

/* ============================================================================
   Fortress Mode - the confirm-gate code challenge + the Lux Cards page.
   ============================================================================ */

/* Confirm-gate challenge (shown in place of the plain Approve button when
   Fortress Mode is on). The code must be supplied before anything signs. */
.fortress-gate { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.fortress-lead { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.fortress-lead b { color: var(--gold-bright); }
.fortress-lock { color: var(--gold); font-size: 13px; line-height: 1.4; flex: none; }
.fortress-code { letter-spacing: 1px; }
.fortress-err { min-height: 0; font-size: 12.5px; color: var(--danger); font-weight: 600; }
.fortress-err:empty { display: none; }
.fortress-methods { display: flex; gap: 8px; }
.fortress-methods .btn-block { margin: 0; }
.fortress-methods button[disabled] { opacity: .5; cursor: not-allowed; }
.pw-wrap.shake { animation: fortress-shake .32s ease; }
@keyframes fortress-shake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-6px); } 40% { transform: translateX(5px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}

/* ===== Access gate: the TEMPORARY secret wall shown before login =============
   Remove together with the prototype access code (see src/accessGate.js). ==== */
.access-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(900px 500px at 50% -12%, #1a150d 0%, rgba(26,21,13,0) 60%),
    var(--bg);
  animation: access-in .25s ease;
}
.access-overlay.access-out { animation: access-fade .24s ease forwards; }
@keyframes access-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes access-fade { from { opacity: 1; } to { opacity: 0; } }
.access-card {
  width: 100%; max-width: 360px; text-align: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px 26px; display: flex; flex-direction: column; gap: 12px;
}
.access-logo { width: 60px; height: 60px; margin: 0 auto 2px; }
.access-title {
  font-family: var(--font-head); font-weight: 600; font-size: 25px; letter-spacing: .5px;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
}
.access-sub { font-size: 12px; color: var(--gold-deep); letter-spacing: .4px; margin-top: -8px; }
.access-lead { font-size: 13.5px; color: var(--muted); margin: 6px 0 2px; }
.access-err { min-height: 0; font-size: 12.5px; color: var(--danger); font-weight: 600; }
.access-err:empty { display: none; }
.access-foot { font-size: 11px; color: var(--gold-deep); opacity: .8; margin-top: 2px; }

/* Telegram Mini App: give the shell the device safe-area top inset. */
html.in-telegram body { padding-top: env(safe-area-inset-top); }

/* ============================================================================
   DASHBOARD REDESIGN  ·  docs/new_ui/00 Dashboard Desc.md
   ----------------------------------------------------------------------------
   Composition rule: less framing, more space, stronger hierarchy, security
   first. Everything below is scoped either to the phone shell (.mhead,
   .bottom-nav, .drawer-scrim) or to the dashboard route (.route-dashboard,
   set by router.js), so no other page inherits it while the redesign rolls out
   page by page.

   Two habits worth keeping when editing here:
     - borders are scarce. Separate things with space, tone and type first; add
       a line only when a container is genuinely interactive or security-critical.
     - the section labels are eyebrows, not headings. They name a region without
       competing with the numbers inside it.
   ========================================================================== */

.lux-icon { flex: none; display: block; }

/* ---- Phone header ---------------------------------------------------------
   Not sticky, by design: it scrolls out of the way so the page reads as one
   continuous surface. Hidden above 840px, where the sidebar carries the brand. */
.mhead {
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 0 16px;
}
.mhead-brand {
  display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto;
  background: none; border: none; padding: 0; text-align: left;
}
.mhead-logo {
  width: 40px; height: 40px; flex: none; object-fit: contain;
  mix-blend-mode: lighten;
  filter: drop-shadow(0 0 10px rgba(204,168,95,0.22));
}
.mhead-text { display: flex; flex-direction: column; min-width: 0; }
.mhead-name {
  font-size: 18px; font-weight: 700; letter-spacing: 1.3px; line-height: 1.05;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--gold);
}
.mhead-tag {
  font-size: 10.5px; color: var(--muted); letter-spacing: 0; margin-top: 3px;
  line-height: 1.25;
  /* Wraps to a second line rather than ellipsing: the English tagline fits on
     one line at 375px, the Indonesian one does not, and clipping the brand
     promise mid-word is worse than a slightly taller header. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.mhead-actions { display: flex; align-items: center; gap: 7px; flex: none; }
.mhead-btn {
  width: 38px; height: 38px; border-radius: var(--r-sm); padding: 0;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--gold);
}
.mhead-btn:active { transform: scale(0.96); }
.mhead-avatar {
  height: 38px; padding: 0 7px 0 5px; border-radius: 999px;
  display: flex; align-items: center; gap: 3px;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.mhead-avatar:active { transform: scale(0.96); }
.avatar-disc {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  background: radial-gradient(120% 120% at 30% 25%, #cbb083 0%, #8d6f43 55%, #4c3a1f 100%);
}

/* ---- Bottom navigation ----------------------------------------------------
   The only persistent element on a phone, and deliberately lightweight: it sits
   ON the page rather than floating above it as a dock. */
.bottom-nav {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  /* Auto-flow rather than repeat(N): the bar takes its column count from however
     many tabs shellMobile.js renders, so changing that list never needs a CSS
     edit to match. It went 4 -> 5 when Connections got its own tab. */
  grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(11,10,7,0.92) 0%, var(--bg) 42%);
  border-top: 1px solid var(--border-soft);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.bnav-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 2px 7px; border-radius: var(--r-sm);
  background: transparent; border: none; color: var(--muted); font-weight: 600;
  transition: color .16s ease, background .16s ease;
  min-width: 0; /* a grid item defaults to min-content: without this the widest
                   label ("Connections", "Pengaturan") pushes the whole bar wider
                   than the screen instead of being clipped inside its own cell. */
}
/* Five tabs share a 320px screen in the worst case, so the label is sized to fit
   the longest one rather than the average. It never wraps: a two-line label makes
   that one tab taller and knocks the whole bar out of alignment, so anything that
   still will not fit ellipsizes inside its own cell. */
.bnav-label {
  font-size: 10px; letter-spacing: 0; line-height: 1.2;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Bahasa Indonesia's longest label ("Persetujuan") measures 58px against a 56px
   cell on a 320px screen, so the narrowest phones get a hair less type rather
   than an ellipsis on a navigation item, where a truncated word is the one thing
   the bar exists to avoid. */
@media (max-width: 360px) {
  .bnav-label { font-size: 9.5px; }
}
.bnav-item.active { color: var(--gold-bright); background: rgba(204,168,95,0.10); }
.bnav-item:active { transform: scale(0.97); }
/* Pinned off the ICON's edge, not the cell's: the cell narrowed when the bar went
   to five tabs, and a percentage offset would have walked the badge inward. */
.bnav-badge { position: absolute; top: 3px; right: calc(50% - 17px); }

/* ---- Drawer ---------------------------------------------------------------
   The sidebar, slid in. Only the scrim and the close button are new. */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 290; background: rgba(6,5,4,0.62);
  opacity: 0; pointer-events: none; transition: opacity .24s ease;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
body:has(.sidebar.nav-open) .drawer-scrim { opacity: 1; pointer-events: auto; }
.drawer-close {
  display: none; position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 32px; height: 32px; padding: 0; place-items: center;
  border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--muted); font-size: 13px; line-height: 1;
}
.drawer-close:hover { color: var(--text); border-color: var(--gold-deep); }

/* ---- Dashboard column -----------------------------------------------------
   One vertical stack at every width. On a phone it fills the page gutters; on a
   desktop it stays a readable column rather than stretching across the content
   area, because the design's hierarchy depends on the portfolio card and the
   score ring sitting close together. */
/* `width: 100%` is load-bearing, not decoration. #content is a column flex
   container, and an auto cross-axis margin turns OFF the default stretch, so a
   bare `max-width` makes the host size to its CONTENT and overflow a narrow
   phone. Pinning the width first and capping it second is what keeps the column
   inside its parent at 375px and centred at desktop widths. */
.route-dashboard { width: 100%; max-width: 520px; min-width: 0; margin: 0 auto; }
.route-dashboard .dash-top { display: block; }

/* Vertical rhythm. Spacing, not rules, is what separates these sections. */
.route-dashboard .trust-card { margin-top: 30px; }
.route-dashboard .quick-block { margin-top: 30px; }
.route-dashboard .exposure-panel { margin-top: 28px; }
.route-dashboard .advisor-panel { margin-top: 20px; }
.route-dashboard .holdings-panel { margin-top: 30px; }

.eyebrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 2px 12px;
}
.eyebrow, .eyebrow-text {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
}

/* ---- Portfolio card -------------------------------------------------------
   The strongest element on the page. A very subtle surface rather than a heavy
   border, with the wallet and network context inside it so there is ONE place
   that answers "which wallet, which chain". */
.route-dashboard .hero-card {
  position: relative; overflow: hidden; isolation: isolate;
  text-align: left; padding: 16px 18px 24px;
  border: 1px solid var(--border-soft); border-radius: var(--r-lg);
  background: linear-gradient(180deg, #17130d 0%, #100d09 100%);
  box-shadow: 0 12px 34px rgba(0,0,0,0.34);
}
/* Decorative particle terrain. Its own layer, so it can never move a number. */
.hero-wave {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../../assets/ui/dash-wave.webp") center bottom / cover no-repeat;
  opacity: 0.62;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.95) 55%, #000 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.95) 55%, #000 100%);
}
.hero-context {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.hero-wallet { min-width: 0; }
.hero-wallet-line { display: flex; align-items: center; gap: 4px; }
.hero-wallet-btn {
  display: flex; align-items: center; gap: 5px; padding: 2px 0;
  background: none; border: none; color: var(--text);
  font-size: 16.5px; font-weight: 600; letter-spacing: .1px;
}
.hero-wallet-btn .lux-icon { color: var(--muted); }
.hero-wallet-btn:hover { color: var(--gold-bright); }
.hero-copy {
  display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  background: none; border: none; border-radius: 7px; color: var(--muted);
}
.hero-copy:hover { color: var(--gold); background: rgba(204,168,95,0.10); }
.hero-addr {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  margin-top: 1px; letter-spacing: .2px;
}
.hero-net { flex: none; }
/* The chain pill: the one gold-edged control in the card, because it is the one
   thing here that changes what every number below it means. */
.route-dashboard .hero-net .net-btn {
  border-color: rgba(166,124,61,0.55); background: rgba(204,168,95,0.07);
  padding: 8px 11px; font-size: 12.5px; border-radius: 999px;
}
.route-dashboard .hero-net .net-name { color: var(--text); }
.route-dashboard .hero-net .net-menu { right: 0; left: auto; }

.hero-value { text-align: center; margin-top: 20px; }
.hero-value .balance-label {
  font-size: 10.5px; letter-spacing: 1.6px; color: var(--muted);
}
/* The reference is unambiguous that this number is a clean sans, not the
   Cormorant display face the page titles use. It is the one figure on the
   dashboard that has to read instantly. */
.route-dashboard .hero-usd {
  font-family: var(--font-body); font-size: 46px; font-weight: 600;
  letter-spacing: -1.4px; line-height: 1.08; color: var(--text);
  margin: 7px 0 5px; overflow-wrap: anywhere;
}
/* Size buckets set by setHero(). The reference shows "$3.10"; a real portfolio
   can be "$616,920,263.83", which at 46px overflows a 375px screen. Shrinking by
   length keeps the number on one line at every width without ever clipping it. */
.route-dashboard .hero-usd[data-size="md"] { font-size: 36px; letter-spacing: -1px; }
.route-dashboard .hero-usd[data-size="sm"] { font-size: 29px; letter-spacing: -.6px; }
.route-dashboard .hero-usd[data-size="xs"] { font-size: 23px; letter-spacing: -.3px; }
.route-dashboard .hero-native {
  color: var(--gold); font-size: 13.5px; font-weight: 600; margin: 0;
}

/* ---- Security score -------------------------------------------------------
   Borderless on purpose: the instrument is the ring, and a card around it would
   turn the centrepiece into another box. */
.route-dashboard .trust-card {
  background: none; border: none; box-shadow: none; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.trust-tap {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; padding: 4px 0; background: none; border: none;
}
.trust-tap:active { transform: scale(0.985); }
.trust-go {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.trust-tap:hover .trust-go { color: var(--gold); border-color: var(--gold-deep); }

.trust-ring { width: 168px; height: 174px; color: var(--ok-ring); }
.trust-ring.strong { color: var(--ok-ring); }
.trust-ring.good { color: var(--gold); }
.trust-ring.attention { color: var(--warn); }
.trust-ring.critical { color: var(--danger); }
.trust-ring.unknown { color: var(--muted); }
.trust-ring .ring-track { fill: none; stroke: rgba(241,237,227,0.07); stroke-width: 5; }
.trust-ring .ring-value {
  fill: none; stroke-width: 5; stroke-linecap: round;
  transition: stroke-dashoffset .9s cubic-bezier(.22,.61,.36,1);
}
.trust-ring .ring-score {
  fill: var(--text); font-family: var(--font-body); font-size: 34px; font-weight: 600;
  letter-spacing: -1.2px; text-anchor: middle;
}
.trust-ring .ring-band {
  fill: currentColor; font-size: 9.5px; font-weight: 700; letter-spacing: 1.8px;
  text-anchor: middle; text-transform: uppercase;
}
.trust-ring .ring-caption {
  fill: var(--muted); font-size: 6.4px; font-weight: 600; letter-spacing: 0.9px;
  text-anchor: middle; text-transform: uppercase;
}
.trust-ring .ring-shield-bg { fill: var(--bg); }
.trust-ring .ring-shield {
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
/* Score factors appear only when something actually cost points, so a clean
   wallet shows the instrument and nothing else. */
.route-dashboard .trust-factors {
  width: 100%; gap: 0; background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--r-md); padding: 4px 14px;
}
.route-dashboard .trust-factor { font-size: 12.5px; padding: 10px 0; }

/* ---- Quick actions --------------------------------------------------------
   Controls in a security application, not oversized buttons. */
.route-dashboard .quick-actions { grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 0; }
.route-dashboard .quick-action {
  gap: 9px; padding: 15px 6px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border-soft);
  transition: border-color .16s ease, transform .12s ease;
}
.route-dashboard .quick-action:hover { border-color: var(--gold-deep); transform: none; }
.route-dashboard .quick-action:active { transform: scale(0.97); }
.route-dashboard .qa-ico { color: var(--gold); display: block; }
.route-dashboard .qa-label { font-size: 11.5px; font-weight: 600; color: var(--text); }

/* ---- Exposure overview ----------------------------------------------------
   ONE instrument panel. Three metrics on a shared surface, divided by hairlines
   rather than each sitting in its own card, which is what made the old page feel
   fragmented. */
.route-dashboard .exposure-panel {
  padding: 16px 14px 14px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border-soft); box-shadow: none;
}
.route-dashboard .exposure-panel .eyebrow { margin: 0 4px 6px; }
.route-dashboard .exposure-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 12px;
}
.route-dashboard .stat {
  background: none; border: none; border-radius: 0; padding: 12px 6px 10px; text-align: center;
}
.route-dashboard .stat + .stat { border-left: 1px solid var(--border-soft); }
.stat-ico { display: grid; place-items: center; margin-bottom: 8px; color: var(--muted); }
.stat.ok .stat-ico { color: var(--ok-ring); }
.stat.attention .stat-ico { color: var(--gold); }
.stat.critical .stat-ico { color: var(--danger); }
.route-dashboard .stat-num {
  font-family: var(--font-body); font-size: 27px; font-weight: 600;
  letter-spacing: -.6px; color: var(--text);
}
.route-dashboard .stat.critical .stat-num { color: var(--danger); }
.route-dashboard .stat-label { font-size: 12px; letter-spacing: 0; color: var(--muted); margin-top: 4px; }
.exposure-cta {
  display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
  padding: 13px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  color: var(--text); font-size: 13.5px; font-weight: 600;
}
.exposure-cta:hover { border-color: var(--gold-deep); color: var(--gold-bright); }
.exposure-cta:active { transform: scale(0.985); }

/* ---- Advisor --------------------------------------------------------------
   Contextual intelligence, visually distinct from ordinary body copy. The orbit
   graphic is decorative and sits behind the text on its own layer. */
.route-dashboard .advisor-panel {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 16px 18px 18px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border-soft); box-shadow: none;
}
/* A corner ornament, not a half-card wash. The asset is cropped tight to the
   orbit and faded RADIALLY, so where a long piece of advice does reach into it
   the overlap reads as a watermark rather than a ring drawn across the words.
   Sized in vw-ish percentage terms so it keeps its proportion from 375px up. */
.advisor-art {
  position: absolute; right: -22px; top: 50%; transform: translateY(-50%);
  z-index: -1; width: 168px; height: 168px; pointer-events: none;
  background: url("../../assets/ui/advisor-orbit.webp") center / contain no-repeat;
  opacity: 0.78;
}
.advisor-main { max-width: 66%; }
.advisor-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.advisor-ico { display: grid; place-items: center; color: var(--gold); }
.advisor-panel.ok .advisor-ico { color: var(--ok-ring); }
.advisor-panel.warn .advisor-ico { color: var(--warn); }
.advisor-panel.bad .advisor-ico { color: var(--danger); }
.advisor-panel.unknown .advisor-ico { color: var(--muted); }
.route-dashboard .advisor-tip { display: block; padding: 0; border: none; }
.route-dashboard .advisor-tip + .advisor-tip { margin-top: 12px; }
.tip-lead { font-size: 14.5px; line-height: 1.45; color: var(--text); font-weight: 500; }
.tip-rest { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin-top: 3px; }
.route-dashboard .advisor-tip .btn-link { padding: 7px 0 0; }

/* ---- Holdings -------------------------------------------------------------
   No outer card: the label sits on the page and each holding is its own small
   surface, which reads lighter than one panel full of divided rows. */
.route-dashboard .holdings-panel {
  background: none; border: none; box-shadow: none; padding: 0;
}
.route-dashboard .list-head { margin-bottom: 10px; padding: 0 2px; }
.route-dashboard .list-head-title {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}
.btn-manage {
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  border-radius: var(--r-sm); background: var(--surface);
  border: 1px solid var(--border-soft); color: var(--muted);
  font-size: 12.5px; font-weight: 600;
}
.btn-manage:hover { color: var(--gold-bright); border-color: var(--gold-deep); }
.route-dashboard .holdings-panel .row {
  padding: 13px 14px; border: 1px solid var(--border-soft); border-radius: var(--r-md);
  background: var(--surface);
}
.route-dashboard .holdings-panel .row + .row { margin-top: 8px; }
.route-dashboard .holdings-panel .row-title { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; }
.route-dashboard .holdings-panel .row-amount { font-weight: 600; font-size: 15px; letter-spacing: -.2px; }
.route-dashboard .holdings-panel .row-sub { font-weight: 500; margin-top: 2px; }
.route-dashboard .holdings-panel .tok-tag { font-weight: 600; padding: 2px 8px; }
.route-dashboard .holdings-panel .center-msg { padding: 22px 0; }
.route-dashboard .list-foot { padding: 12px 4px 0; }

/* Partners stays the quietest block on the page, and now needs its own breathing
   room since the holdings section above it no longer draws a card edge. */
.route-dashboard .partners { margin-top: 34px; }

/* ---- Desktop --------------------------------------------------------------
   The shell is unchanged above 840px: the sidebar is a static column again and
   the phone chrome is not rendered at all. The dashboard itself keeps the new
   single-column composition so both widths are the same design. */
@media (min-width: 841px) {
  .mhead, .bottom-nav, .drawer-scrim, .drawer-close { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar, .drawer-scrim, .trust-ring .ring-value { transition: none; }
  .bnav-item:active, .trust-tap:active, .quick-action:active,
  .exposure-cta:active, .mhead-btn:active, .mhead-avatar:active { transform: none; }
}

/* ============================================================================
   WALLETS PAGE REDESIGN  ·  docs/new_ui/01 Wallet Desc.md
   ----------------------------------------------------------------------------
   Same design system as the Dashboard, different job: the Dashboard answers
   "how secure am I", this page answers "which wallets do I have". The governing
   rule from the brief is that every wallet is an OBJECT and the page is a
   collection of those objects, so there is no parent card wrapping the list.

   Scoped to `.route-wallets` (router.js stamps `route-<id>` on the host), so the
   pages still awaiting their redesign pass are untouched.
   ========================================================================== */

.route-wallets { width: 100%; max-width: 520px; min-width: 0; margin: 0 auto; }

/* The page title is the Cormorant display face every page title now uses, kept
   in IVORY rather than the gold gradient: gold here would compete with the
   active wallet's border, which is the page's real signal. */
.route-wallets .page-head { margin: 4px 0 26px; }
.route-wallets .page-title {
  font-family: var(--font-head); font-size: 30px; font-weight: 700;
  letter-spacing: .4px; line-height: 1.1; color: var(--text);
  background: none; -webkit-text-fill-color: currentColor;
}
.route-wallets .eyebrow { margin: 0 2px 14px; }
.wcard-mode-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: none;
  color: var(--gold); background: rgba(204,168,95,0.09);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px;
}

/* ---- Wallet cards ---------------------------------------------------------
   Spacing between cards is the only separator; there is no list container. */
.wcard-list { display: flex; flex-direction: column; gap: 14px; }

.wcard {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 14px 15px 13px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, #14110c 0%, #100d09 100%);
  border: 1px solid var(--border-soft);
  transition: border-color .16s ease, background .16s ease;
}
.wcard:hover { border-color: var(--border); background: linear-gradient(180deg, #171309 0%, #120f0a 100%); }
/* Active reads as a SELECTED FINANCIAL ACCOUNT: a thin gold edge and a barely
   there ambient warmth. No glow, no scale, nothing that reads as a trophy. */
.wcard.active {
  border-color: rgba(166,124,61,0.75);
  background:
    radial-gradient(120% 140% at 88% 10%, rgba(204,168,95,0.07) 0%, rgba(204,168,95,0) 60%),
    linear-gradient(180deg, #191409 0%, #120f0a 100%);
  box-shadow: 0 0 0 1px rgba(204,168,95,0.06), 0 10px 30px rgba(0,0,0,0.34);
}
/* The particle terrain, anchored bottom-right where the reference puts it and
   faded into the card by the asset's own alpha. Almost invisible until looked
   at, and a little stronger on the active card. */
.wcard-art {
  position: absolute; right: -6px; bottom: -6px; z-index: -1;
  width: 46%; height: 62%; pointer-events: none;
  background: url("../../assets/ui/wallet-mesh.webp") right bottom / contain no-repeat;
  /* "Almost invisible until the user looks closely", per the brief. Any louder
     and it reads as noise behind the security score rather than as texture. */
  opacity: 0.20;
}
.wcard.active .wcard-art { opacity: 0.40; }

.wcard-head { display: flex; align-items: center; gap: 9px; }
.wcard-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: #4a4235;
}
.wcard-dot.on { background: var(--gold); box-shadow: 0 0 8px rgba(204,168,95,0.55); }
.wcard-name {
  font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: .1px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wcard-badge {
  flex: none; font-size: 10px; font-weight: 600; letter-spacing: .4px;
  color: var(--gold); border: 1px solid rgba(166,124,61,0.7);
  border-radius: 999px; padding: 2px 9px;
}
.wcard-head-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.wcard-check {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: var(--accent-ink);
}
.wcard-menu {
  width: 28px; height: 28px; padding: 0; border-radius: 8px; display: grid; place-items: center;
  background: none; border: none; color: var(--muted);
}
.wcard-menu:hover { color: var(--text); background: rgba(241,237,227,0.05); }

.wcard-addr { display: flex; align-items: center; gap: 3px; margin-top: 6px; }
.wcard-addr-text { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.wcard-addr-text.muted { font-family: var(--font-body); font-style: italic; }
.wcard-copy {
  width: 22px; height: 22px; padding: 0; border-radius: 6px; display: grid; place-items: center;
  background: none; border: none; color: var(--muted);
}
.wcard-copy:hover { color: var(--gold); background: rgba(204,168,95,0.10); }

.wcard-net {
  display: flex; align-items: center; gap: 7px; margin-top: 6px;
  font-size: 12.5px; color: var(--muted);
}
.wcard-net .net-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* Balance and Security share one row under a hairline, split by a second
   hairline. Both dividers are deliberately near invisible. */
.wcard-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border-soft);
}
.wstat { min-width: 0; padding-right: 12px; }
.wstat + .wstat { border-left: 1px solid var(--border-soft); padding-left: 14px; padding-right: 0; }
.wstat-label {
  font-size: 10px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 5px;
}
.wstat-usd {
  font-size: 20px; font-weight: 600; color: var(--text); letter-spacing: -.5px;
  line-height: 1.15; overflow-wrap: anywhere;
}
.wstat-usd[data-size="sm"] { font-size: 16px; letter-spacing: -.2px; }
.wstat-native { font-size: 12px; font-weight: 600; color: var(--gold); margin-top: 3px; }

.wsec { display: flex; align-items: center; gap: 6px; min-height: 26px; flex-wrap: wrap; }
.wsec-shield { display: grid; place-items: center; color: var(--ok-ring); }
.wsec-shield.good { color: var(--gold); }
.wsec-shield.attention { color: var(--warn); }
.wsec-shield.critical { color: var(--danger); }
.wsec-score { font-size: 19px; font-weight: 600; color: var(--text); letter-spacing: -.3px; }
.wsec-sep { color: var(--muted); font-size: 13px; }
.wsec-band { font-size: 13px; font-weight: 500; color: var(--ok-ring); }
.wsec-band.good { color: var(--gold); }
.wsec-band.attention { color: var(--warn); }
.wsec-band.critical { color: var(--danger); }
.wsec-muted { color: var(--muted); font-size: 17px; }
/* Past the auto-scan budget an approval scan is offered rather than performed:
   showing a score the app has not measured would be a lie the user cannot see. */
.wsec-check {
  display: flex; align-items: center; gap: 6px; padding: 6px 11px;
  border-radius: var(--r-sm); background: var(--surface-2);
  border: 1px solid var(--border-soft); color: var(--muted);
  font-size: 12px; font-weight: 600;
}
.wsec-check:hover { color: var(--gold-bright); border-color: var(--gold-deep); }

/* ---- Overflow menu -------------------------------------------------------- */
/* Fixed and body-mounted: see openWalletMenu(). The card clips its decorative
   mesh, and an absolutely positioned menu inside it was clipped away with it. */
.wcard-pop {
  position: fixed; z-index: 400; min-width: 190px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; gap: 1px;
}
.wcard-pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; border-radius: 9px; padding: 10px 11px;
  color: var(--text); font-size: 13px; font-weight: 500;
}
.wcard-pop-item .lux-icon { color: var(--muted); }
.wcard-pop-item:hover { background: var(--surface-2); }
.wcard-pop-item:hover .lux-icon { color: var(--gold); }
/* Destructive action, set apart at the bottom rather than sitting in the list. */
.wcard-pop-item.danger { margin-top: 5px; padding-top: 11px; border-top: 1px solid var(--border-soft); border-radius: 0 0 9px 9px; color: var(--danger); }
.wcard-pop-item.danger .lux-icon, .wcard-pop-item.danger:hover .lux-icon { color: var(--danger); }
.wcard-pop-item.danger:hover { background: var(--danger-bg); }

/* ---- Add wallet ----------------------------------------------------------- */
.watch-cta {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  width: 100%; margin-top: 22px; padding: 18px 14px;
  border-radius: var(--r-lg); background: transparent;
  border: 1px dashed var(--border); color: var(--gold);
}
.watch-cta:hover { border-color: var(--gold-deep); background: rgba(204,168,95,0.035); }
.watch-cta-title { display: flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--gold); }
.watch-cta-sub { font-size: 12.5px; color: var(--muted); font-weight: 400; }

.wadd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.wadd-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 15px 14px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border-soft); text-align: left;
}
.wadd-tile:hover { border-color: var(--gold-deep); }
.wadd-tile.primary { border-color: rgba(166,124,61,0.6); background: linear-gradient(180deg, #191409 0%, #14110c 100%); }
.wadd-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.wadd-tile .lux-icon { color: var(--muted); }
.wadd-tile.primary .wadd-title { color: var(--gold); }
.wadd-tile.primary .lux-icon { color: var(--gold); }
.wadd-sub { font-size: 11.5px; color: var(--muted); line-height: 1.35; }

/* ---- Device security note -------------------------------------------------
   Reassurance, not a banner: no card, no background, just a quiet line. */
/* Block flow, not flex: the lock rides IN the text so a wrapped second line
   starts under the sentence rather than being indented past a flex column. */
.device-note {
  display: block; margin-top: 22px; padding: 0 10px;
  font-size: 12px; line-height: 1.55; color: var(--muted); text-align: center;
}
.device-note-ico { display: inline-grid; vertical-align: -3px; margin-right: 6px; }
.device-note-ico { color: var(--ok-ring); }
.device-note-sep { opacity: .5; }
.device-note-warn { color: var(--muted); }

/* The shell footer repeats this page's device note almost word for word, so the
   page keeps its own line and the generic one steps aside here. */
#route-host.route-wallets ~ .footer { display: none; }

/* The address field must fill the modal; the shared input style does not stretch
   on its own and the placeholder was clipping mid-word. */
.watch-field { margin-top: 12px; }
.watch-field input { width: 100%; }

.wallets-empty {
  padding: 20px 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border-soft);
}

/* ---- Narrow phones --------------------------------------------------------
   At 375px the two stat columns still fit; below that the brief allows them to
   stack rather than shrinking the type, which is what this does. */
@media (max-width: 340px) {
  .wcard-stats { grid-template-columns: 1fr; }
  .wstat + .wstat {
    border-left: none; border-top: 1px solid var(--border-soft);
    padding-left: 0; margin-top: 12px; padding-top: 12px;
  }
  .wadd-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .wcard, .wcard-menu, .wadd-tile, .watch-cta { transition: none; }
}

/* ============================================================================
   CONNECTIONS PAGE REDESIGN  ·  docs/new_ui/02 Connections.md
   ----------------------------------------------------------------------------
   Third page of the redesign, same system as the Dashboard and the Wallets page.
   Its job is different from both: the Dashboard answers "how secure am I", the
   Wallets page answers "which wallets do I have", and this one answers "who can
   talk to my wallet, and does any of them need attention".

   Two rules from the brief drive nearly every choice below:
     - three levels of hierarchy, and only the MIDDLE one gets a card. Page
       sections are typography and space (.eyebrow); functional components are
       cards (status, connect, each connection); supporting information is a
       lightweight row or a disclosure (the notice, the two accordions).
     - the page is a sequence of sections, never one giant container.

   Scoped to `.route-connections` (router.js stamps `route-<id>` on the host), so
   the pages still awaiting their pass keep exactly what they have.
   ========================================================================== */

.route-connections { width: 100%; max-width: 520px; min-width: 0; margin: 0 auto; }

/* Cormorant title in ivory, matching the Wallets page: gold at this size would
   compete with the status card and the review badges, which are the page's real
   signals. */
.route-connections .page-head { margin: 4px 0 24px; }
.route-connections .page-title {
  font-family: var(--font-head); font-size: 30px; font-weight: 700;
  letter-spacing: .4px; line-height: 1.1; color: var(--text);
  background: none; -webkit-text-fill-color: currentColor;
}
.route-connections .page-sub { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.route-connections .eyebrow { margin: 28px 2px 12px; }
.conn-total {
  font-size: 11.5px; font-weight: 600; letter-spacing: .4px; color: var(--muted);
  text-transform: none;   /* the eyebrow uppercases its label; the count is a value */
}

/* ---- Connection status ----------------------------------------------------
   ONE card carrying both numbers (§8). The shield sits in its own column so the
   decoration can never push a value around. */
.conn-status {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 18px 18px 14px; border-radius: var(--r-lg);
  border: 1px solid rgba(166,124,61,0.34);
  background:
    radial-gradient(120% 150% at 12% 50%, rgba(204,168,95,0.055) 0%, rgba(204,168,95,0) 62%),
    linear-gradient(180deg, #17130d 0%, #100d09 100%);
  box-shadow: 0 12px 34px rgba(0,0,0,0.32);
}
.conn-status-art {
  flex: none; width: 96px; height: 96px; align-self: center;
  background: url("../../assets/ui/connection-shield.webp") center / contain no-repeat;
}
.conn-status-body { min-width: 0; flex: 1 1 auto; }
.conn-status-label {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted);
}
.conn-counts { display: flex; align-items: flex-start; gap: 0; margin-top: 12px; }
.cstat { min-width: 0; padding-right: 14px; }
.cstat + .cstat { border-left: 1px solid var(--border-soft); padding-left: 16px; padding-right: 0; }
.cstat-head { display: flex; align-items: center; gap: 8px; }
.cstat-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cstat-dot.ok { background: var(--ok-ring); box-shadow: 0 0 8px rgba(95,203,145,0.45); }
.cstat-dot.warn { background: var(--gold); box-shadow: 0 0 8px rgba(204,168,95,0.45); }
.cstat-num {
  font-size: 24px; font-weight: 600; color: var(--text); letter-spacing: -.5px; line-height: 1.1;
  display: inline-flex; align-items: center; min-height: 26px;
}
.cstat-label { font-size: 12.5px; margin-top: 3px; }
.cstat-label.ok { color: var(--ok-ring); }
.cstat-label.warn { color: var(--gold); }
.conn-status-note { margin-top: 12px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.conn-status-note.warn { color: var(--warn); }

/* ---- Connect an app -------------------------------------------------------
   Scanning is the primary path on a phone, so it is a tile with its own weight;
   pasting is the fallback and stays deliberately quiet. */
.conn-pair {
  margin-top: 24px; padding: 16px; border-radius: var(--r-lg);
  border: 1px solid var(--border-soft); background: var(--surface);
}
.conn-pair-label {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.conn-pair-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.conn-scan {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 18px 10px; border-radius: var(--r-md); text-align: center;
  background: linear-gradient(180deg, #1b1610 0%, #14110c 100%);
  border: 1px solid rgba(166,124,61,0.45); color: var(--gold);
}
.conn-scan:hover { border-color: var(--gold); background: linear-gradient(180deg, #201a11 0%, #16120c 100%); }
.conn-scan:disabled { opacity: .45; }
.conn-scan-ico { color: var(--gold); display: grid; place-items: center; margin-bottom: 2px; }
.conn-scan-title { font-size: 14px; font-weight: 600; color: var(--gold); }
.conn-scan-sub { font-size: 11.5px; color: var(--muted); }
/* The OR is a divider, not a label: a hairline runs through the gap and the word
   sits in it, so the two methods read as alternatives rather than as steps. */
.conn-or {
  position: relative; display: grid; place-items: center; width: 26px;
  font-size: 11px; font-weight: 600; letter-spacing: 1px; color: var(--muted);
}
.conn-or::before, .conn-or::after {
  content: ""; position: absolute; left: 50%; width: 1px; background: var(--border-soft);
}
.conn-or::before { top: 4px; bottom: calc(50% + 14px); }
.conn-or::after { top: calc(50% + 14px); bottom: 4px; }
.conn-paste { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* The instruction is a LABEL above the field, not a placeholder inside it: at
   the reference's width the field is ~160px and swallows the middle of the
   sentence. `wc:…` stays in the placeholder as the example. */
.conn-paste-label {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .3px; color: var(--muted);
}
.route-connections input.conn-uri {
  width: 100%; min-width: 0; padding: 12px 13px; border-radius: var(--r-sm);
  background: var(--bg-2); border: 1px solid var(--border-soft); color: var(--text);
  font-family: var(--font-mono); font-size: 12.5px;
}
.route-connections input.conn-uri::placeholder { font-family: var(--font-body); color: var(--muted); }
.route-connections input.conn-uri:focus { outline: none; border-color: var(--gold-deep); }
.route-connections input.conn-uri.bad { border-color: var(--danger); }
/* Outlined, not a gold slab. §10 gives the SCAN tile the strongest emphasis on
   a phone, and a solid gold button beside it takes that emphasis away; §47 says
   not every button is gold. This is also what the reference draws. */
.conn-connect {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 14px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600;
  flex: 1 1 auto;
  background: rgba(204,168,95,0.06); color: var(--gold);
  border: 1px solid rgba(166,124,61,0.65); box-shadow: none;
}
.conn-connect:hover:not(:disabled) { background: rgba(204,168,95,0.12); border-color: var(--gold); color: var(--gold-bright); }
.conn-connect:disabled { opacity: .6; }
/* The error state is never colour alone: the button changes its words and takes
   an icon, and the reason is spelled out underneath. */
.conn-connect.bad {
  background: var(--danger-bg); color: var(--danger);
  border: 1px solid rgba(224,106,95,0.5); font-size: 13px;
}
.conn-err { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--danger); }
.conn-limit {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft);
  font-size: 12px; line-height: 1.5; color: var(--muted);
}
.conn-limit b { color: var(--text); font-weight: 600; }
.conn-limit code { font-family: var(--font-mono); font-size: 11.5px; color: var(--gold); }

/* ---- Connection cards -----------------------------------------------------
   One card per connection, separated by space alone. Identity first, then the
   measured exposure under a hairline: the same shape the Wallets page uses for
   balance and security, so the two pages read as one product. */
.conn-list { display: flex; flex-direction: column; gap: 12px; }
.ccard {
  padding: 14px 15px 13px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, #14110c 0%, #100d09 100%);
  border: 1px solid var(--border-soft);
  transition: border-color .16s ease;
}
.ccard:hover { border-color: var(--border); }
/* Significant exposure makes the card more prominent (§41). A warmer edge, not a
   glow: the point is to be noticed, not to alarm. */
.ccard.band-attention { border-color: rgba(166,124,61,0.55); }
.ccard.band-critical {
  border-color: rgba(224,106,95,0.5);
  background: linear-gradient(180deg, #1a110f 0%, #120d0b 100%);
}
.ccard-head { display: flex; align-items: flex-start; gap: 11px; }
.ccard-logo {
  width: 40px; height: 40px; flex: none; border-radius: 12px; object-fit: cover;
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.ccard-logo.fallback { display: grid; place-items: center; color: var(--muted); }
.ccard-id { min-width: 0; flex: 1 1 auto; }
.ccard-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ccard-name {
  font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: .1px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Small badges, never giant pills (§15). */
.ccard-badge {
  flex: none; font-size: 10px; font-weight: 600; letter-spacing: .3px;
  border-radius: 999px; padding: 2px 8px; border: 1px solid transparent;
}
.ccard-badge.ok { color: var(--ok-ring); background: rgba(95,203,145,0.10); border-color: rgba(95,203,145,0.28); }
.ccard-badge.warn { color: var(--gold); background: rgba(204,168,95,0.10); border-color: rgba(166,124,61,0.5); }
.ccard-badge.bad { color: var(--danger); background: rgba(224,106,95,0.10); border-color: rgba(224,106,95,0.42); }
.ccard-domain {
  font-size: 12.5px; color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ccard-menu {
  width: 28px; height: 28px; padding: 0; flex: none; border-radius: 8px;
  display: grid; place-items: center; background: none; border: none; color: var(--muted);
}
.ccard-menu:hover { color: var(--text); background: rgba(241,237,227,0.05); }

.ccard-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; font-size: 12.5px; color: var(--muted);
}
.ccard-net { display: flex; align-items: center; gap: 7px; min-width: 0; }
.ccard-net .lux-icon { color: var(--gold-deep); }
.ccard-time { display: flex; align-items: center; gap: 5px; flex: none; font-size: 11.5px; }

/* Three values in ONE horizontal group with hairline dividers, never three
   cards (§16). */
.ccard-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft);
}
.cmetric { min-width: 0; text-align: center; }
.cmetric + .cmetric { border-left: 1px solid var(--border-soft); }
.cmetric-num {
  font-size: 18px; font-weight: 600; color: var(--text); line-height: 1.2;
  display: flex; align-items: center; justify-content: center; min-height: 22px;
}
.cmetric-label {
  font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase;
  color: var(--muted); margin-top: 3px;
}
.ccard-sec { display: flex; align-items: center; gap: 7px; margin-top: 9px; flex-wrap: wrap; }
.ccard-shield { display: grid; place-items: center; color: var(--ok-ring); }
.ccard-shield.attention { color: var(--warn); }
.ccard-shield.critical { color: var(--danger); }
.ccard-shield.unknown { color: var(--muted); }
.ccard-sec-text { font-size: 13px; font-weight: 500; color: var(--ok-ring); }
.ccard-sec-text.attention { color: var(--warn); }
.ccard-sec-text.critical { color: var(--danger); }
.ccard-sec-text.unknown { color: var(--muted); font-size: 12.5px; }
.ccard-sec-link {
  margin-left: auto; display: flex; align-items: center; gap: 2px; padding: 4px 6px;
  background: none; border: none; color: var(--gold); font-size: 12.5px; font-weight: 600;
}
.ccard-sec-link:hover { color: var(--gold-bright); }

/* Bulk disconnect stays reachable without putting a disconnect control on every
   card (§47): one quiet row under the list, and only when there is more than one. */
.conn-all {
  width: 100%; margin-top: 12px; padding: 11px; border-radius: var(--r-sm);
  background: none; border: 1px solid var(--border-soft); color: var(--muted);
  font-size: 12.5px; font-weight: 600;
}
.conn-all:hover { color: var(--danger); border-color: rgba(224,106,95,0.42); }

/* ---- Empty state ----------------------------------------------------------
   Breathing room, not a giant rectangle (§38). */
.conn-empty { padding: 26px 18px 22px; text-align: center; }
.conn-empty-ico {
  display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  color: var(--gold-deep); border: 1px solid var(--border); background: rgba(204,168,95,0.045);
}
.conn-empty-title { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--text); }
.conn-empty-text {
  margin: 6px auto 0; max-width: 300px; font-size: 12.5px; line-height: 1.5; color: var(--muted);
}
.conn-empty-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 10px 18px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600;
  color: var(--gold); border: 1px solid rgba(166,124,61,0.5);
}
.conn-empty-cta:hover { border-color: var(--gold); color: var(--gold-bright); }

/* ---- The distinction this page exists to protect --------------------------
   Connection is not approval (§20). A lightweight row, not a card: it qualifies
   the list above it rather than competing with it. */
.conn-notice {
  display: flex; align-items: center; gap: 11px; margin-top: 16px;
  padding: 13px 14px; border-radius: var(--r-md);
  background: rgba(204,168,95,0.045); border: 1px solid var(--border-soft);
}
.conn-notice-ico { flex: none; color: var(--gold-deep); display: grid; place-items: center; }
.conn-notice-text { min-width: 0; flex: 1 1 auto; font-size: 12.5px; line-height: 1.45; color: var(--text); }
.conn-notice-text .muted { color: var(--muted); }
.conn-notice-link {
  flex: none; display: flex; align-items: center; gap: 2px; padding: 4px 2px;
  background: none; border: none; color: var(--gold); font-size: 12.5px; font-weight: 600;
}
.conn-notice-link:hover { color: var(--gold-bright); }

/* ---- Disclosures ----------------------------------------------------------
   Both sections open independently and neither is open by default: the page's
   first job is the connections, and the education is one tap away. The panel
   animates on grid-template-rows so the body's own height is what animates, with
   no magic max-height to outgrow. */
.conn-acc {
  margin-top: 12px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border-soft); overflow: hidden;
}
.route-connections .conn-acc:first-of-type { margin-top: 24px; }
.conn-acc-head {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 15px 14px; background: none; border: none;
}
.conn-acc-ico { flex: none; display: grid; place-items: center; color: var(--gold); }
.conn-acc-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.conn-acc-title {
  font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text);
}
.conn-acc-sub { font-size: 12.5px; color: var(--muted); }
.conn-acc-chev {
  flex: none; display: grid; place-items: center; color: var(--muted);
  transition: transform .22s ease;
}
.conn-acc.open .conn-acc-chev { transform: rotate(180deg); }
.conn-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; }
.conn-acc.open .conn-acc-panel { grid-template-rows: 1fr; }
.conn-acc-body { min-height: 0; overflow: hidden; }
.conn-acc.open .conn-acc-body { border-top: 1px solid var(--border-soft); }

/* One expanded card holding every capability, separated by hairlines rather than
   framed one by one (§21, §23). */
.perm-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px; }
.perm-row + .perm-row { border-top: 1px solid var(--border-soft); }
.perm-check {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  color: var(--ok-ring); background: rgba(95,203,145,0.10);
}
.perm-title { font-size: 14px; font-weight: 600; color: var(--text); }
.perm-desc { margin-top: 4px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

/* Gold bullets, not green checks: these are LIMITS on a connected app, and the
   check mark would read as six more things it is allowed to do (§26). */
.guar-list { margin: 0; padding: 14px 16px 16px 16px; list-style: none; }
.guar-list li {
  position: relative; padding-left: 18px; font-size: 13px; line-height: 1.55; color: var(--text);
}
.guar-list li + li { margin-top: 12px; }
.guar-list li::before {
  content: "•"; position: absolute; left: 2px; top: -1px; color: var(--gold); font-size: 15px;
}

/* ---- Connection details modal --------------------------------------------- */
.conn-detail { margin-top: 14px; }
.conn-detail-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; font-size: 13px;
}
.conn-detail-row + .conn-detail-row { border-top: 1px solid var(--border-soft); }
.conn-detail-key { color: var(--muted); flex: none; }
.conn-detail-val {
  color: var(--text); text-align: right; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Narrow phones --------------------------------------------------------
   Below 360px the connect card stacks: scan on top, then the OR, then the paste
   field. The brief allows the layout to stack but not the type to shrink (§29). */
/* Phones at or under 400px get the SPEC's own preferred connect layout (§10):
   the scan tile, the OR, then a full-width URI field. Side by side, the field is
   about 150px wide and eats its own placeholder, which is exactly the squeeze
   §29 says to answer by stacking rather than by shrinking anything. The
   reference's side-by-side arrangement survives at the width it was drawn at. */
@media (max-width: 400px) {
  .conn-pair-grid { grid-template-columns: 1fr; }
  .conn-or { width: auto; height: 20px; }
  .conn-or::before, .conn-or::after {
    top: 50%; bottom: auto; height: 1px; width: auto; left: 0; right: 0; transform: translateY(-.5px);
  }
  .conn-or::before { right: calc(50% + 18px); left: 0; }
  .conn-or::after { left: calc(50% + 18px); right: 0; }
}

/* Genuinely small screens only. The timestamp is the least load-bearing thing on
   a connection card (§18 allows moving it to the detail view), and it is still
   in the card's own detail modal. */
@media (max-width: 359px) {
  .conn-status { padding-left: 12px; gap: 10px; }
  .conn-status-art { width: 72px; height: 72px; }
  .ccard-time { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .conn-acc-panel, .conn-acc-chev, .ccard { transition: none; }
}

/* ============================================================================
   APPROVALS PAGE REDESIGN  ·  docs/new_ui/03 Approval.md
   ----------------------------------------------------------------------------
   The simplest of the four security pages, and deliberately so: the brief is
   largely a list of things that must NOT appear here (no advisor, no tips, no
   "what is an approval", no second score). Three surfaces only - the exposure
   summary, the section label, and either the approval cards or one clean state.

   SCOPED TO `.ap-page`, NOT TO `.route-approvals`. The approvals route is shared:
   on Bitcoin, TRON and Solana it renders those chains' own approval views, and
   scoping to the route class would restyle three pages this pass never opened.
   ========================================================================== */

.ap-page { width: 100%; max-width: 520px; min-width: 0; margin: 0 auto; }

.ap-page .page-head { margin: 4px 0 24px; }
.ap-page .page-title {
  font-family: var(--font-head); font-size: 30px; font-weight: 700;
  letter-spacing: .4px; line-height: 1.1; color: var(--text);
  background: none; -webkit-text-fill-color: currentColor;
}
.ap-page .page-sub { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.ap-page .eyebrow { margin: 28px 2px 14px; }
.ap-total {
  font-size: 11.5px; font-weight: 600; letter-spacing: .4px; color: var(--muted);
  text-transform: none;   /* the eyebrow uppercases its label; the count is a value */
}

/* ---- Exposure summary -----------------------------------------------------
   ONE instrument. The three metrics are separated by hairlines, never by three
   rounded cards, which is what this page used to do (§11, §13). */
.ap-summary {
  padding: 16px 12px 18px; border-radius: var(--r-lg);
  border: 1px solid rgba(166,124,61,0.30);
  background: linear-gradient(180deg, #17130d 0%, #100d09 100%);
}
.ap-summary-label {
  text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}
.ap-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.ap-metric { min-width: 0; padding: 0 8px; text-align: center; }
.ap-metric + .ap-metric { border-left: 1px solid var(--border-soft); }
/* Gold, because these three numbers ARE the page's headline. Nothing else here
   is gold, which is what keeps them readable as the answer (§7). */
.ap-metric-num {
  display: flex; align-items: center; justify-content: center; min-height: 34px;
  font-size: 28px; font-weight: 600; color: var(--gold); letter-spacing: -.5px; line-height: 1.1;
}
.ap-metric-num.warn { color: var(--warn); }
.ap-metric-label {
  margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--muted);
  overflow-wrap: break-word;
}

/* ---- List states ----------------------------------------------------------
   Scanning, failed and clean share one calm centred card. */
.ap-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 30px 20px; border-radius: var(--r-lg);
  border: 1px solid rgba(166,124,61,0.22);
  background: linear-gradient(180deg, #14110c 0%, #100d09 100%);
}
.ap-state-title { margin-top: 14px; font-size: 16px; font-weight: 600; color: var(--text); }
.ap-state-text {
  margin: 7px auto 0; max-width: 290px; font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.ap-state-ico { display: grid; place-items: center; color: var(--muted); }
.ap-state-ico.warn { color: var(--warn); }
.ap-retry {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  padding: 9px 16px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  color: var(--muted); font-size: 12.5px; font-weight: 600;
}
.ap-retry:hover { color: var(--gold-bright); border-color: var(--gold-deep); }

/* The clean mark: a gold shield with a green check inside it, on a very quiet
   ring. Restrained glow only - this is a security utility, not a celebration. */
.ap-shield {
  position: relative; display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 50%;
  color: var(--gold); border: 1px solid rgba(166,124,61,0.45);
  background: radial-gradient(circle at 50% 45%, rgba(204,168,95,0.07) 0%, rgba(204,168,95,0) 70%);
}
.ap-shield-check {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -46%);
  display: grid; place-items: center; color: var(--ok-ring);
}
.ap-clean-badge { margin-top: 16px; }

/* ---- Approval cards -------------------------------------------------------
   Token, spender, allowance + network, then the security state. Spacing between
   cards is the only separator; there is no list container. */
.ap-list { display: flex; flex-direction: column; gap: 14px; }
.ap-card {
  padding: 14px 16px 12px; border-radius: var(--r-lg); text-align: left;
  background: linear-gradient(180deg, #14110c 0%, #100d09 100%);
  border: 1px solid var(--border-soft);
  transition: border-color .16s ease;
}
.ap-card:hover { border-color: var(--border); }
.ap-card:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
/* Severity warms the EDGE only. An unlimited allowance is a reason to look, not
   a reason to paint the card red (§25). */
.ap-card.risk-review { border-color: rgba(166,124,61,0.45); }
.ap-card.risk-high { border-color: rgba(220,154,82,0.50); }
.ap-card.risk-critical {
  border-color: rgba(224,106,95,0.50);
  background: linear-gradient(180deg, #1a110f 0%, #120d0b 100%);
}

.ap-card-head { display: flex; align-items: center; gap: 11px; }
.ap-token { min-width: 0; flex: 1 1 auto; }
.ap-symbol {
  font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: .1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-token-kind { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ap-token-ico { flex: none; display: grid; place-items: center; }
.ap-menu {
  width: 28px; height: 28px; padding: 0; flex: none; border-radius: 8px;
  display: grid; place-items: center; background: none; border: none; color: var(--muted);
}
.ap-menu:hover { color: var(--text); background: rgba(241,237,227,0.05); }

.ap-field { min-width: 0; }
.ap-card .ap-field { margin-top: 10px; }
.ap-field-label {
  font-size: 10px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.ap-spender {
  font-size: 14px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-spender-addr { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ap-row2 { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; }
.ap-net-field { text-align: right; }
.ap-allowance { font-size: 15px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.ap-allowance.unlimited { color: var(--warn); }
.ap-net {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  font-size: 13px; color: var(--muted);
}
.ap-net .lux-icon { color: var(--gold-deep); }

/* Compressed rhythm, never compressed TYPE: §35 forbids shrinking the type to
   save height, so the spacing is what gives way. */
.ap-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft);
}
.ap-review { display: flex; align-items: center; gap: 2px; color: var(--gold); font-size: 12.5px; font-weight: 600; }
.ap-card:hover .ap-review { color: var(--gold-bright); }

/* Compact badges that support the card rather than dominating it (§24). */
.ap-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  border: 1px solid transparent;
}
.ap-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.ap-badge.clean { color: var(--ok-ring); background: rgba(95,203,145,0.10); border-color: rgba(95,203,145,0.28); }
.ap-badge.review { color: var(--gold); background: rgba(204,168,95,0.10); border-color: rgba(166,124,61,0.50); }
.ap-badge.high { color: var(--warn); background: rgba(220,154,82,0.10); border-color: rgba(220,154,82,0.42); }
.ap-badge.critical { color: var(--danger); background: rgba(224,106,95,0.10); border-color: rgba(224,106,95,0.42); }

/* ---- Detail / revoke sheet ------------------------------------------------
   §28's detail screen and §29's revoke sheet are one surface: the facts, then
   the button, with the on-chain cost stated before it. */
.ap-sheet-head { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.ap-sheet-head .ap-badge { margin-top: 6px; }
.ap-detail { margin-top: 16px; }
.ap-detail-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; font-size: 13px;
}
.ap-detail-row + .ap-detail-row { border-top: 1px solid var(--border-soft); }
.ap-detail-key { color: var(--muted); flex: none; }
.ap-detail-val {
  color: var(--text); text-align: right; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ap-explorer {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  margin-top: 14px; padding: 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border-soft); background: var(--surface-2);
  color: var(--gold); font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.ap-explorer:hover { border-color: var(--gold-deep); color: var(--gold-bright); }
.ap-revoke-note {
  margin: 16px 0 12px; font-size: 12px; line-height: 1.55; color: var(--muted);
}

/* ---- Narrow phones --------------------------------------------------------
   The three metric labels wrap to two lines rather than shrinking (§35). Below
   340px the allowance and the network stack instead of sharing a row. */
@media (max-width: 340px) {
  .ap-metric { padding: 0 5px; }
  .ap-metric-num { font-size: 24px; }
  .ap-row2 { grid-template-columns: 1fr; gap: 0; }
  .ap-net-field { text-align: left; }
  .ap-net { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-card { transition: none; }
}

/* ============================================================================
   SPENDING CAP PAGE REDESIGN  ·  docs/new_ui/04 Spending Cap.md
   ----------------------------------------------------------------------------
   §48 calls this "one of the simplest management surfaces in Luxverium", and the
   brief is largely a list of what must not appear (no second dashboard, no
   advisor, no tips, no scores, no duplicate Add cap). Three surfaces only: the
   status card, the section label with its Add cap button, and either the cap
   cards or one empty state.

   SCOPED TO `.sc-page`, NOT TO `.route-caps`. The caps route is shared: on
   Bitcoin, TRON and Solana it renders those chains' approval views, so scoping
   to the route class would restyle three pages this pass never opened. The
   prefix is `sc-` rather than `cap-` because `.cap-unlimited` already belongs to
   the TRON and Solana approval views.
   ========================================================================== */

/* width first, cap second: an auto cross-axis margin inside the #content column
   flex would otherwise size this to its content and overflow a 375px phone. */
.sc-page { width: 100%; max-width: 520px; min-width: 0; margin: 0 auto; }

.sc-page .page-head { margin: 4px 0 24px; }
.sc-page .page-title {
  font-family: var(--font-head); font-size: 30px; font-weight: 700;
  letter-spacing: .4px; line-height: 1.1; color: var(--text);
  background: none; -webkit-text-fill-color: currentColor;
}
.sc-page .page-sub { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.sc-page .eyebrow { margin: 30px 2px 16px; }

/* ---- Spending cap status --------------------------------------------------
   ONE instrument with hairline dividers, never three rounded cards (§8, §9). No
   icon, no shield: §9 keeps this card purely informational. */
.sc-status {
  padding: 16px 12px 18px; border-radius: var(--r-lg);
  border: 1px solid rgba(166,124,61,0.30);
  background: linear-gradient(180deg, #17130d 0%, #100d09 100%);
}
.sc-status-label {
  text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}
.sc-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.sc-metric { min-width: 0; padding: 0 8px; text-align: center; }
.sc-metric + .sc-metric { border-left: 1px solid var(--border-soft); }
/* Gold, because these three numbers are the page's headline (§40). */
.sc-metric-num {
  display: flex; align-items: center; justify-content: center; min-height: 34px;
  font-size: 28px; font-weight: 600; color: var(--gold); letter-spacing: -.5px; line-height: 1.1;
}
/* §11 / §26: unlimited access warms to the warning colour, never to red. */
.sc-metric-num.warn { color: var(--warn); }
.sc-metric-label {
  margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--muted);
  overflow-wrap: break-word;
}

/* ---- Add cap --------------------------------------------------------------
   Compact and inside the section header (§15). The eyebrow sets uppercase and
   1.5px tracking on its children, so both are reset here. */
.sc-add {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 8px 14px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid rgba(166,124,61,0.45);
  color: var(--gold); font-size: 13px; font-weight: 600;
  letter-spacing: normal; text-transform: none;
  transition: background-color .16s ease, border-color .16s ease;
}
.sc-add:hover { color: var(--gold-bright); border-color: var(--gold); }
.sc-add:active { background: #1d1811; }
/* §42's disabled state: muted grey, and it means something - the wallet cannot
   sign, so there is no cap it could set. */
.sc-add:disabled { color: var(--muted); border-color: var(--border-soft); opacity: .55; }

/* ---- List states ----------------------------------------------------------
   Scanning, failed and empty share one calm centred card. */
.sc-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 30px 20px; border-radius: var(--r-lg);
  border: 1px solid rgba(166,124,61,0.22);
  background: linear-gradient(180deg, #14110c 0%, #100d09 100%);
}
/* §21 asks the empty state for real breathing room without letting it swallow
   the screen: taller than the other two states, and no taller. */
.sc-empty { padding: 44px 20px; }
.sc-state-title { margin-top: 16px; font-size: 17px; font-weight: 600; color: var(--text); }
.sc-state-text {
  margin: 9px auto 0; max-width: 280px; font-size: 13px; line-height: 1.6; color: var(--muted);
}
.sc-state-ico { display: grid; place-items: center; color: var(--muted); }
.sc-state-ico.warn { color: var(--warn); }
.sc-retry {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  padding: 9px 16px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  color: var(--muted); font-size: 12.5px; font-weight: 600;
}
.sc-retry:hover { color: var(--gold-bright); border-color: var(--gold-deep); }

/* The §18 mark: the wallet line icon with a small shield-check badge, on a
   dashed ring. Line art and a quiet ornament, the way the reference draws it -
   a visual anchor, not an illustration. */
.sc-ring {
  position: relative; display: grid; place-items: center;
  width: 92px; height: 92px; border-radius: 50%;
  color: var(--gold); border: 1px dashed rgba(166,124,61,0.42);
  background: radial-gradient(circle at 50% 45%, rgba(204,168,95,0.06) 0%, rgba(204,168,95,0) 70%);
}
.sc-ring-shield {
  position: absolute; right: 18px; bottom: 18px;
  display: grid; place-items: center; padding: 2px; border-radius: 50%;
  color: var(--gold-bright); background: #100d09;
}

/* ---- Cap cards ------------------------------------------------------------
   Token, spender, the cap, then network and status. Spacing between cards is
   the only separator; there is no list container. */
.sc-list { display: flex; flex-direction: column; gap: 14px; }
.sc-card {
  padding: 14px 16px 12px; border-radius: var(--r-lg); text-align: left;
  background: linear-gradient(180deg, #14110c 0%, #100d09 100%);
  border: 1px solid var(--border-soft);
  transition: border-color .16s ease;
}
.sc-card:hover { border-color: var(--border); }
.sc-card:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
/* Severity warms the EDGE only (§25): a cap worth reviewing is not a card worth
   painting red. Same restraint the Approvals cards use. */
.sc-card.risk-review { border-color: rgba(166,124,61,0.45); }
.sc-card.risk-high { border-color: rgba(220,154,82,0.50); }
.sc-card.risk-critical {
  border-color: rgba(224,106,95,0.50);
  background: linear-gradient(180deg, #1a110f 0%, #120d0b 100%);
}

.sc-card-head { display: flex; align-items: center; gap: 11px; }
.sc-token { min-width: 0; flex: 1 1 auto; }
.sc-symbol {
  font-size: 17px; font-weight: 600; color: var(--text); letter-spacing: .1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-token-kind { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.sc-token-ico { flex: none; display: grid; place-items: center; }
.sc-menu {
  width: 28px; height: 28px; padding: 0; flex: none; border-radius: 8px;
  display: grid; place-items: center; background: none; border: none; color: var(--muted);
}
.sc-menu:hover { color: var(--text); background: rgba(241,237,227,0.05); }

.sc-field { min-width: 0; }
.sc-card .sc-field { margin-top: 12px; }
.sc-field-label {
  font-size: 10px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 4px;
}
.sc-spender {
  font-size: 14px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-spender-addr { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* §24: the cap is why the page exists, so it carries the largest type on the
   card. Unlimited is gold, not red (§26). */
.sc-cap {
  display: flex; align-items: center; gap: 6px;
  font-size: 18px; font-weight: 600; color: var(--text);
  letter-spacing: -.2px; overflow-wrap: anywhere;
}
.sc-cap.unlimited { color: var(--warn); }

.sc-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 13px; padding-top: 10px; border-top: 1px solid var(--border-soft);
}
.sc-net { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.sc-net .lux-icon { color: var(--gold-deep); }

.sc-badge {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  border: 1px solid transparent;
}
.sc-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sc-badge.clean { color: var(--ok-ring); background: rgba(95,203,145,0.10); border-color: rgba(95,203,145,0.28); }
.sc-badge.review { color: var(--gold); background: rgba(204,168,95,0.10); border-color: rgba(166,124,61,0.50); }
.sc-badge.high { color: var(--warn); background: rgba(220,154,82,0.10); border-color: rgba(220,154,82,0.42); }
.sc-badge.critical { color: var(--danger); background: rgba(224,106,95,0.10); border-color: rgba(224,106,95,0.42); }

/* ---- Detail / edit / add sheets -------------------------------------------
   One sheet shape for all three (§27, §28, §29). The on-chain cost is stated
   before the buttons, never after. */
.sc-sheet-head { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.sc-sheet-head .sc-badge { margin-top: 6px; }
.sc-detail { margin-top: 16px; }
.sc-detail-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; font-size: 13px;
}
.sc-detail-row + .sc-detail-row { border-top: 1px solid var(--border-soft); }
.sc-detail-key { color: var(--muted); flex: none; }
.sc-detail-val {
  color: var(--text); text-align: right; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sc-explorer {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  margin-top: 14px; padding: 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border-soft); background: var(--surface-2);
  color: var(--gold); font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.sc-explorer:hover { border-color: var(--gold-deep); color: var(--gold-bright); }
.sc-note { margin: 16px 0 12px; font-size: 12px; line-height: 1.55; color: var(--muted); }
.sc-field-block { margin-top: 16px; margin-bottom: 0; }
/* The base input rule is `flex: 1` with no width, written for the `.field-row`
   flex containers elsewhere. A standalone input in a sheet sizes to its
   content instead, which leaves it visibly narrower than the selects above
   it. Pin it so every field in a sheet shares one left and right edge. */
.sc-field-block input, .sc-field-block select { width: 100%; }
.sc-hidden { display: none; }
/* §28 wants the destructive control to read differently from a normal action,
   so Edit and Remove stack rather than sharing a row as equals. */
.sc-actions { display: flex; flex-direction: column; gap: 10px; }
.sc-actions .btn-ghost, .sc-actions .btn-danger {
  display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0;
}

/* ---- Narrow phones --------------------------------------------------------
   §43: labels wrap, type does not shrink. Below 340px the metric numbers give a
   little and nothing else does. */
@media (max-width: 340px) {
  .sc-metric { padding: 0 5px; }
  .sc-metric-num { font-size: 24px; }
  .sc-add { padding: 8px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-card, .sc-add { transition: none; }
}

/* ============================================================================
   ACTIVITY PAGE REDESIGN  ·  docs/new_ui/05 Activity.md
   ----------------------------------------------------------------------------
   §60: "quiet, factual, and focused on history", and §36/§58 rule out the charts,
   filters, tabs and scores that would make it anything else. Three cards, no
   parent card around them (§43), and visually quieter than the Dashboard (§42).

   SCOPED TO `.ac-page`, NOT TO `.route-activity`. The activity route is shared:
   on Bitcoin, TRON and Solana it renders those chains' own activity views, so
   scoping to the route class would restyle three pages this pass never opened.
   The prefix is `ac-` because `.act-ico` already exists further up this file.
   ========================================================================== */

/* width first, cap second: an auto cross-axis margin inside the #content column
   flex would otherwise size this to its content and overflow a 375px phone. */
.ac-page { width: 100%; max-width: 520px; min-width: 0; margin: 0 auto; }

.ac-page .page-head { margin: 4px 0 24px; }
.ac-page .page-title {
  font-family: var(--font-head); font-size: 30px; font-weight: 700;
  letter-spacing: .4px; line-height: 1.1; color: var(--text);
  background: none; -webkit-text-fill-color: currentColor;
}
.ac-page .page-sub { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }

/* ---- The three cards ------------------------------------------------------
   §47: the session and on-chain cards are a deliberate PAIR, so they share one
   shape and differ only in what they hold. §48 lets the summary sit tighter. */
.ac-card {
  display: block; width: 100%; text-align: left;
  padding: 20px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, #14110c 0%, #100d09 100%);
  border: 1px solid rgba(166,124,61,0.22);
}
.ac-card + .ac-card { margin-top: 20px; }
.ac-card-nav { transition: border-color .16s ease; }
.ac-card-nav:hover { border-color: rgba(166,124,61,0.45); }
.ac-card-nav:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.ac-card-head { display: flex; align-items: center; gap: 15px; }
.ac-card-main { min-width: 0; flex: 1 1 auto; }
.ac-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}
.ac-card-state {
  margin-top: 5px; font-size: 20px; font-weight: 600; color: var(--text);
  letter-spacing: -.2px; line-height: 1.25; overflow-wrap: anywhere;
}
/* The description belongs to the TEXT column, not to the card: §9 and §16 both
   draw it starting under the eyebrow, clear of the mark. Indenting by the ring
   plus the head gap keeps that alignment without nesting it inside the head,
   which would pull the ring off the vertical centre of the eyebrow + state. */
.ac-card-text {
  margin-top: 12px; padding-left: 67px;
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
/* The mark sits on the same quiet ring the other pages use. §42 asks for subtle
   gold rings and nothing heavier - no orbital graphics on this page. */
.ac-ring {
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  color: var(--gold); border: 1px solid rgba(166,124,61,0.40);
  background: radial-gradient(circle at 50% 45%, rgba(204,168,95,0.07) 0%, rgba(204,168,95,0) 70%);
}
.ac-chev { flex: none; display: grid; place-items: center; color: var(--gold-deep); }
.ac-card-nav:hover .ac-chev { color: var(--gold); }

/* ---- Session events -------------------------------------------------------
   §12's compact chronological list, inside the session card rather than in a
   container of its own. The hairline between rows is the only separator. */
.ac-events { margin-top: 16px; }
.ac-event {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 0; text-align: left; background: none; border: none;
  color: inherit; text-decoration: none;
}
.ac-event + .ac-event { border-top: 1px solid var(--border-soft); }
.ac-event .lux-icon { flex: none; color: var(--gold-deep); }
.ac-event:hover .ac-event-title { color: var(--gold-bright); }
.ac-event-ico {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  color: var(--gold); background: var(--surface-2); border: 1px solid var(--border-soft);
}
/* §14: restrained. Only a revoke leans on a status colour, because taking a
   permission back is the one event here with a security meaning. */
.ac-event.kind-revoke .ac-event-ico { color: var(--ok-ring); border-color: rgba(95,203,145,0.28); }
.ac-event-main { min-width: 0; flex: 1 1 auto; display: block; }
.ac-event-title {
  display: block; font-size: 14px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-event-sub {
  display: block; margin-top: 2px; font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Activity summary -----------------------------------------------------
   §25: gold metric ICONS, ivory values, muted labels, thin dividers. This is the
   opposite weighting to the Spending Cap status card, where the numbers are the
   page's headline; here they are just counts. */
/* §48 asks the summary to sit tighter than the two navigation cards. Its
   vertical padding is trimmed below theirs to do that; it still measures a
   little taller, because it carries FOUR stacked rows (icon, number, label,
   range) against their two, and §49 forbids shrinking the type to close the
   gap. The rhythm gives way, the type does not. */
.ac-summary { padding: 16px 12px; }
.ac-summary .ac-eyebrow { padding: 0 8px; }
.ac-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 14px; }
.ac-metric { min-width: 0; padding: 0 8px; text-align: center; }
.ac-metric + .ac-metric { border-left: 1px solid var(--border-soft); }
.ac-metric-ico { display: grid; place-items: center; color: var(--gold); }
.ac-metric-num {
  margin-top: 6px; font-size: 26px; font-weight: 600; color: var(--text);
  letter-spacing: -.5px; line-height: 1.1;
}
.ac-metric-label {
  margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--muted);
  overflow-wrap: break-word;
}

/* §24/§55: understated, and never a filter panel. The static variant is what
   renders while the log spans one session and no second range would differ. */
.ac-range {
  position: relative; display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 14px; color: var(--muted);
}
.ac-range .lux-icon { pointer-events: none; }
.ac-range-static { font-size: 13px; }
.ac-range-select {
  width: auto; padding: 4px 4px 4px 8px; border: none; background: none;
  color: var(--muted); font-size: 13px; font-family: inherit;
  appearance: none; -webkit-appearance: none;
}
.ac-range-select:focus { outline: none; border: none; }
.ac-range:hover, .ac-range:hover .ac-range-select { color: var(--text); }

/* ---- On-chain history sub-page --------------------------------------------
   §18/§33's dedicated screen. A sub-page of this route, so the bottom bar keeps
   pointing at Activity while you are in it. */
.ac-back {
  display: inline-flex; align-items: center; gap: 5px; margin: 0 0 14px;
  padding: 0; background: none; border: none;
  color: var(--muted); font-size: 13px; font-weight: 600;
}
.ac-back:hover { color: var(--gold-bright); }
.ac-back-chev { display: grid; place-items: center; transform: rotate(180deg); }
.ac-subnet {
  display: flex; align-items: center; gap: 7px; margin: -12px 2px 16px;
  font-size: 13px; color: var(--muted);
}
.ac-subnet .lux-icon { color: var(--gold-deep); }
.ac-list {
  padding: 4px 18px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, #14110c 0%, #100d09 100%);
  border: 1px solid rgba(166,124,61,0.22);
}
.ac-tx { padding: 13px 0; }

.ac-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 30px 2px;
}
.ac-state-title { margin-top: 14px; font-size: 16px; font-weight: 600; color: var(--text); }
.ac-state-text {
  margin: 7px auto 0; max-width: 290px; font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.ac-state-ico { display: grid; place-items: center; color: var(--gold-deep); }
.ac-state-ico.warn { color: var(--warn); }
.ac-retry {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px;
  padding: 9px 16px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  color: var(--muted); font-size: 12.5px; font-weight: 600;
}
.ac-retry:hover { color: var(--gold-bright); border-color: var(--gold-deep); }

/* ---- Event detail sheet ---------------------------------------------------- */
.ac-detail { margin-top: 4px; }
.ac-detail-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; font-size: 13px;
}
.ac-detail-row + .ac-detail-row { border-top: 1px solid var(--border-soft); }
.ac-detail-key { color: var(--muted); flex: none; }
.ac-detail-val {
  color: var(--text); text-align: right; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ac-explorer {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  margin-top: 16px; padding: 10px; border-radius: var(--r-sm);
  border: 1px solid var(--border-soft); background: var(--surface-2);
  color: var(--gold); font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.ac-explorer:hover { border-color: var(--gold-deep); color: var(--gold-bright); }
.ac-note { margin-top: 16px; font-size: 12px; line-height: 1.55; color: var(--muted); }

/* ---- Narrow phones --------------------------------------------------------
   §49: descriptions wrap and the three columns hold. Only below 340px, where
   three labels genuinely cannot share a row, does the summary stack. */
@media (max-width: 360px) {
  .ac-card { padding: 17px; }
  .ac-ring { width: 46px; height: 46px; }
  .ac-card-text { padding-left: 0; }   /* the indent costs more than it buys here */
  .ac-card-state { font-size: 18px; }
  .ac-metric { padding: 0 4px; }
  .ac-metric-num { font-size: 23px; }
}
@media (max-width: 320px) {
  .ac-metrics { grid-template-columns: 1fr; }
  .ac-metric + .ac-metric {
    border-left: none; border-top: 1px solid var(--border-soft); padding-top: 14px; margin-top: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ac-card-nav { transition: none; }
}

/* ============================================================================
   ADDRESS BOOK PAGE + ADD ADDRESS SHEET  ·  docs/new_ui/06 Address Book.md
   ----------------------------------------------------------------------------
   The brief is about the Add Address BOTTOM SHEET (06B). Its §19 assumes the page
   already looks like 06A - a search row, a "+ Add address" action, an empty state
   with its own CTA and a "Recently added" strip - which this codebase did not
   have, so the page was brought to its own mockup as the minimum the sheet needs
   to attach to. §27's other six screens were not touched.

   Prefix is `abk-`, NOT `ab-`: the previous page's `.ab-*` rules are still in
   this file above, and `.ab-send-*` belongs to sendView.
   ========================================================================== */

/* width first, cap second: an auto cross-axis margin inside the #content column
   flex would otherwise size this to its content and overflow a 375px phone. */
.abk-page { width: 100%; max-width: 520px; min-width: 0; margin: 0 auto; }

.abk-page .page-head { margin: 4px 0 20px; }
.abk-page .page-title {
  font-family: var(--font-head); font-size: 30px; font-weight: 700;
  letter-spacing: .4px; line-height: 1.1; color: var(--text);
  background: none; -webkit-text-fill-color: currentColor;
}
.abk-page .page-sub { margin: 8px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.abk-page .eyebrow { margin: 0 0 14px; }

/* ---- Toolbar: search + Add address ---------------------------------------- */
.abk-toolbar { display: flex; align-items: stretch; gap: 10px; margin-bottom: 18px; }
.abk-search {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px;
  padding: 0 13px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border-soft);
}
.abk-search:focus-within { border-color: var(--gold-deep); }
.abk-search .lux-icon { flex: none; color: var(--muted); }
/* The base input rule is `flex: 1` with no width and its own border/background,
   all of which the search shell already provides. */
.abk-search-input {
  flex: 1 1 auto; min-width: 0; padding: 12px 0; border: none; background: none;
  color: var(--text); font-size: 14px; font-family: inherit;
}
.abk-search-input:focus { outline: none; border: none; box-shadow: none; }
.abk-search-input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.5); }

.abk-add {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 0 15px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid rgba(166,124,61,0.50);
  color: var(--gold); font-size: 13.5px; font-weight: 600;
  transition: border-color .16s ease, color .16s ease;
}
.abk-add:hover { color: var(--gold-bright); border-color: var(--gold); }

/* ---- Cards ---------------------------------------------------------------- */
.abk-card {
  padding: 18px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, #14110c 0%, #100d09 100%);
  border: 1px solid rgba(166,124,61,0.22);
}
.abk-card + .abk-card { margin-top: 18px; }
.abk-recent { padding: 16px 18px; }

/* ---- Empty state ----------------------------------------------------------
   The ONE place on this page carrying a CTA, and it opens the same sheet the
   toolbar button does (§19). */
.abk-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 30px 8px 26px;
}
.abk-empty-ico {
  display: grid; place-items: center; color: var(--gold);
  filter: drop-shadow(0 0 12px rgba(204,168,95,0.22));
}
.abk-empty-title { margin-top: 20px; font-size: 18px; font-weight: 600; color: var(--text); }
.abk-empty-text {
  margin: 9px auto 0; max-width: 300px; font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
.abk-cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  padding: 14px 24px; border-radius: 14px; border: none;
  background: linear-gradient(180deg, #e7c883 0%, #c69b45 100%);
  color: #14110c; font-size: 15px; font-weight: 700;
  box-shadow: 0 6px 22px rgba(198,155,69,0.20);
}
.abk-cta:hover { filter: brightness(1.05); }
.abk-cta:active { filter: brightness(0.96); }
/* A search that matched nothing is not an empty address book, so it gets neither
   the artwork nor the CTA. */
.abk-nomatch { padding: 26px 8px; }
.abk-nomatch .abk-empty-ico { color: var(--muted); filter: none; }
.abk-nomatch .abk-empty-title { margin-top: 12px; font-size: 16px; }

/* ---- Saved rows ------------------------------------------------------------ */
.abk-rows { display: flex; flex-direction: column; }
.abk-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 0; min-width: 0;
}
.abk-row + .abk-row { border-top: 1px solid var(--border-soft); }
.abk-rows-tight .abk-row { padding: 10px 0; }
.abk-row-ico {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--gold); background: var(--surface-2); border: 1px solid var(--border-soft);
}
/* §12: the type is legible from the mark alone, without reading the name. */
.abk-row.type-exchange .abk-row-ico { color: var(--gold-bright); }
.abk-row.type-contract .abk-row-ico { color: var(--muted); }
.abk-row-main { flex: 1 1 auto; min-width: 0; }
.abk-row-name {
  font-size: 14.5px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.abk-row-addr {
  margin-top: 2px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.abk-row-note {
  margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.abk-row-side { flex: none; display: flex; align-items: center; gap: 4px; }
.abk-row-net {
  font-size: 11px; font-weight: 600; letter-spacing: .3px; color: var(--muted);
  padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-soft);
  white-space: nowrap;
}
.abk-row-menu {
  width: 28px; height: 28px; padding: 0; flex: none; border-radius: 8px;
  display: grid; place-items: center; background: none; border: none; color: var(--muted);
}
.abk-row-menu:hover { color: var(--text); background: rgba(241,237,227,0.05); }

.abk-viewall {
  display: inline-flex; align-items: center; gap: 2px; padding: 0;
  background: none; border: none; color: var(--gold); font-size: 12.5px; font-weight: 600;
  letter-spacing: normal; text-transform: none;
}
.abk-viewall:hover { color: var(--gold-bright); }
.abk-recent-empty {
  display: flex; align-items: center; gap: 13px;
  padding: 16px 14px; border-radius: var(--r-sm);
  border: 1px dashed var(--border-soft);
}
.abk-recent-ico { flex: none; display: grid; place-items: center; color: var(--muted); }
.abk-recent-title { font-size: 14px; color: var(--text); }
.abk-recent-text { margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }

/* ============================================================================
   ADD ADDRESS BOTTOM SHEET (06B)
   §2: rises from the bottom over a plain dark overlay that keeps the page
   visible behind it. §14: the header and the Save button stay put, the form
   between them scrolls.
   ========================================================================== */
/* The phone bottom bar is z-index 200 and every `.modal-backdrop` in this app is
   100, so a modal tall enough to reach the bottom of the screen is drawn UNDER
   the bar. A centred dialog usually clears it; a bottom sheet cannot, and its
   Save button is exactly what would be hidden. Raised for THIS sheet only -
   restacking every modal in the app is a change this pass has no business
   making. Still below the onboarding (4300) and pre-sign gate (5000) layers,
   which must stay on top of everything. */
.abk-backdrop { align-items: end; padding: 0; z-index: 300; }
.abk-sheet {
  width: 100%; max-width: 520px; margin: 0 auto;
  max-height: 92vh; display: flex; flex-direction: column;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, #17130d 0%, #0f0c08 100%);
  border: 1px solid rgba(166,124,61,0.28); border-bottom: none;
  box-shadow: 0 -18px 50px rgba(0,0,0,0.55);
  animation: abk-rise .28s cubic-bezier(.22,.8,.3,1);
}
@keyframes abk-rise { from { transform: translateY(14%); } to { transform: none; } }

.abk-grip {
  width: 48px; height: 5px; border-radius: 999px; margin: 10px auto 0;
  background: rgba(241,237,227,0.20);
}
/* The title stays optically centred even though Cancel and X are different
   widths: the two side cells are given the same fixed basis (§3). */
.abk-sheet-head {
  display: grid; grid-template-columns: 5.5rem 1fr 5.5rem; align-items: center;
  padding: 12px 18px 14px;
}
.abk-sheet-title { text-align: center; font-size: 17px; font-weight: 600; color: var(--text); }
.abk-cancel {
  justify-self: start; padding: 0; background: none; border: none;
  color: var(--text); font-size: 14px; font-weight: 500;
}
.abk-cancel:hover { color: var(--gold-bright); }
.abk-close {
  justify-self: end; width: 30px; height: 30px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  color: var(--text); font-size: 13px;
}
.abk-close:hover { border-color: var(--gold-deep); color: var(--gold-bright); }

.abk-sheet-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 4px 18px 8px;
  -webkit-overflow-scrolling: touch;
}
.abk-sheet-foot {
  flex: none; padding: 14px 18px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(15,12,8,0) 0%, #0f0c08 30%);
}

.abk-label {
  display: block; margin: 22px 0 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--muted);
}
.abk-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.abk-label-row .abk-label { margin-bottom: 9px; }
.abk-count { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---- Address type cards (§4) ---------------------------------------------- */
.abk-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.abk-type {
  display: flex; flex-direction: column; gap: 7px; min-width: 0;
  padding: 12px 11px 13px; text-align: left; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border-soft);
  transition: border-color .16s ease, background-color .16s ease;
}
.abk-type-head { display: flex; align-items: flex-start; justify-content: space-between; }
.abk-type-ico { display: grid; place-items: center; color: var(--muted); }
/* The selection indicator of §4: a small gold disc, empty until chosen. */
.abk-type-dot {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--border); background: none;
}
.abk-type-title {
  font-size: 12.5px; font-weight: 600; color: var(--text); line-height: 1.3;
  overflow-wrap: anywhere;
}
.abk-type-desc { font-size: 11px; line-height: 1.4; color: var(--muted); }
.abk-type.on {
  border-color: var(--gold); background: #1a150e;
  box-shadow: 0 0 0 1px rgba(204,168,95,0.16), 0 0 18px rgba(204,168,95,0.10);
}
.abk-type.on .abk-type-ico { color: var(--gold); }
.abk-type.on .abk-type-dot { border-color: var(--gold); background: var(--gold); }

/* ---- Fields ---------------------------------------------------------------- */
.abk-sheet-body input[type="text"], .abk-sheet-body input[type="search"] { width: 100%; }
.abk-field { position: relative; display: flex; align-items: center; }
.abk-field > input { width: 100%; padding-right: 84px; }
.abk-field-btns {
  position: absolute; right: 6px; display: flex; align-items: center; gap: 2px;
}
.abk-field-btn {
  width: 34px; height: 34px; padding: 0; border-radius: 9px;
  display: grid; place-items: center;
  background: none; border: none; color: var(--muted);
}
.abk-field-btn:hover, .abk-field-btn:focus-visible { color: var(--gold-bright); background: rgba(204,168,95,0.08); }
.abk-field-btns .abk-field-btn + .abk-field-btn { border-left: 1px solid var(--border-soft); border-radius: 0 9px 9px 0; }

/* §6: an inline message, warm rather than alarming, and restrained on the
   positive side - a valid address is the expected case, not an achievement. */
.abk-msg:empty { display: none; }
.abk-msg { margin-top: 8px; font-size: 12px; line-height: 1.4; }
.abk-msg-bad, .abk-msg-ok { display: inline-flex; align-items: center; gap: 6px; }
.abk-msg-bad { color: var(--warn); }
.abk-msg-ok { color: var(--ok-ring); }
.abk-sheet-body input.bad { border-color: rgba(220,154,82,0.55); }
.abk-sheet-body input.good { border-color: rgba(95,203,145,0.40); }

/* ---- Network selector (§7) ------------------------------------------------- */
.abk-net {
  display: flex; align-items: center; gap: 10px; padding: 0 13px 0 12px;
  border-radius: 11px; background: var(--surface-2); border: 1px solid var(--border);
}
.abk-net:focus-within { border-color: var(--gold); }
.abk-net .lux-icon { flex: none; color: var(--muted); pointer-events: none; }
.abk-net-ico { flex: none; display: grid; place-items: center; }
.abk-net select {
  flex: 1 1 auto; min-width: 0; padding: 13px 0; border: none; background: none;
  color: var(--text); font-size: 14px; font-family: inherit;
  appearance: none; -webkit-appearance: none;
}
.abk-net select:focus { outline: none; border: none; }

/* ---- Duplicate notice (§11) ------------------------------------------------ */
.abk-dup:empty { display: none; }
.abk-dup {
  margin-top: 20px; padding: 14px 15px; border-radius: 14px;
  background: rgba(220,154,82,0.06); border: 1px solid rgba(220,154,82,0.35);
}
.abk-dup-title { font-size: 14px; font-weight: 600; color: var(--warn); }
.abk-dup-text { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.abk-dup-actions { display: flex; gap: 9px; margin-top: 12px; }
.abk-dup-edit, .abk-dup-cancel {
  padding: 8px 14px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 600;
}
.abk-dup-edit { background: var(--surface-2); border: 1px solid var(--gold-deep); color: var(--gold); }
.abk-dup-edit:hover { color: var(--gold-bright); border-color: var(--gold); }
.abk-dup-cancel { background: none; border: 1px solid var(--border-soft); color: var(--muted); }
.abk-dup-cancel:hover { color: var(--text); }

/* ---- Save CTA (§9) --------------------------------------------------------- */
.abk-save {
  width: 100%; min-height: 54px; border-radius: 15px; border: none;
  background: linear-gradient(180deg, #e7c883 0%, #c69b45 100%);
  color: #14110c; font-size: 15.5px; font-weight: 700;
  box-shadow: 0 6px 22px rgba(198,155,69,0.20);
  transition: filter .16s ease, box-shadow .16s ease;
}
.abk-save:hover:not(:disabled) { filter: brightness(1.05); }
.abk-save:active:not(:disabled) { filter: brightness(0.95); }
/* §9: disabled must stay READABLE. It loses the glow and most of its saturation,
   never its label and never its place. */
.abk-save:disabled {
  background: #241d13; color: #8a7f6a; box-shadow: none; cursor: default;
}

/* ---- Narrow phones (§13) --------------------------------------------------- */
@media (max-width: 380px) {
  .abk-type { padding: 11px 9px 12px; }
  .abk-type-title { font-size: 12px; }
  .abk-type-desc { font-size: 10.5px; }
}
/* The reference keeps search and Add address on ONE row at 375, and they fit
   there with room to spare. They only stack once the search box would be too
   narrow to show a real query. */
@media (max-width: 344px) {
  .abk-toolbar { flex-wrap: wrap; }
  .abk-search { flex: 1 1 100%; }
  .abk-add { flex: 1 1 100%; justify-content: center; padding: 11px 15px; }
}
/* Three type cards genuinely cannot hold a title and a description this narrow,
   so they stack rather than shrinking the type below readable (§13). */
@media (max-width: 330px) {
  .abk-types { grid-template-columns: 1fr; }
  .abk-type { flex-direction: row; align-items: center; gap: 11px; }
  .abk-type-head { flex: none; }
  .abk-type-desc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .abk-sheet { animation: none; }
  .abk-type, .abk-add, .abk-save { transition: none; }
}

/* ============================================================================
   LUX CARDS PAGE REDESIGN  ·  docs/new_ui/07 Lux Cards.md
   ----------------------------------------------------------------------------
   §1 and §23 set the whole tone: this page has to look like it shipped with the
   Dashboard, Wallets and Connections screens, so almost nothing below is new
   design. The card surface, the eyebrow, the ring around a mark, the gold pill
   and the primary button all come from the pages that went first; what is here
   is the arrangement (§5: three cards, then the app's existing footer).

   SCOPED TO `.lx-page`. The luxcards route is chain-agnostic (router.js renders
   this one view on every chain), so `.route-luxcards` would have been safe here
   too, but the wrapper keeps the habit the shared routes forced on the other
   passes and reads the same way.

   §13's list of things to avoid is the reason there is no glass, no blur, no
   bright gold outline and no glow: one hairline warm border, one restrained
   vertical gradient, and space doing the separating.
   ========================================================================== */

/* width first, cap second: an auto cross-axis margin inside the #content column
   flex would otherwise size this to its content and overflow a 375px phone. */
.lx-page { width: 100%; max-width: 520px; min-width: 0; margin: 0 auto; }

.lx-card {
  padding: 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #14110c 0%, #100d09 100%);
  border: 1px solid rgba(166,124,61,0.22);
}
.lx-card + .lx-card { margin-top: 20px; }

/* §12's major section title: uppercase and strong, but still type rather than
   decoration. Slightly brighter than the `ac-`/`conn-` eyebrows because on this
   page it is also the only thing naming the section. */
.lx-eyebrow {
  margin: 0 0 16px;
  font-size: 13px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--text);
}

/* ---- 1. Lux Cards (§6) -----------------------------------------------------
   The mockup is drawn at 426px and puts the artwork beside the copy. At 375 that
   leaves the text column near 130px, so the two stack below 440px and the card
   art takes the full width. §16 asks for exactly this kind of adaptation. */
.lx-hero { display: flex; flex-direction: column; gap: 16px; }
.lx-art {
  position: relative; min-width: 0;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(232,204,134,0.14);
}
.lx-art img { display: block; width: 100%; height: auto; }
/* The ribbon is the ONLY thing drawn over the artwork: the card carries its own
   branding, and §6 asks for the asset to be preserved rather than dressed up. */
/* Corner-band geometry, which is easy to get wrong: rotated 45 degrees, the
   band reaches 0.707 * width/2 above its own centre, so a band placed near the
   top of the frame has its first letters clipped by the overflow that keeps it
   inside the rounded corner. 156px wide needs its centre 55px down, which is
   what `top` sets here: both ends then die on the card edges and the text sits
   in the middle of the visible run. */
.lx-ribbon {
  position: absolute; top: 44px; right: -30px; width: 156px;
  padding: 4px 0; text-align: center; transform: rotate(45deg);
  background: rgba(9,8,5,0.88); color: var(--gold-bright);
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.lx-hero-copy { min-width: 0; }
.lx-title {
  margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25;
  letter-spacing: -.2px; color: var(--gold-bright);
}
.lx-desc { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
/* §6's understated status pill. Outline and a barely-there wash, not a chip of
   solid gold: it is reporting a state, not selling one. */
.lx-badge {
  display: inline-block; margin-top: 16px;
  padding: 8px 15px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--gold); border: 1px solid rgba(166,124,61,0.45);
  background: rgba(204,168,95,0.06);
}

@media (min-width: 440px) {
  .lx-hero { flex-direction: row; align-items: center; gap: 20px; }
  .lx-art { flex: 0 1 56%; }
  .lx-hero-copy { flex: 1 1 0; }
}

/* ---- 2. Approval methods (§7) ----------------------------------------------
   Mark plus label and nothing else: no chevron, no description, no badge. The
   row is a button, so it carries a real 64px touch target (§16) and a focus
   ring, but it must never grow a trailing indicator. */
.lx-methods { display: flex; flex-direction: column; gap: 12px; }
.lx-method {
  display: flex; align-items: center; gap: 16px;
  width: 100%; min-height: 64px; padding: 10px 16px;
  text-align: left; border-radius: var(--r-md);
  border: 1px solid rgba(166,124,61,0.18);
  background: linear-gradient(180deg, #17130d 0%, #120f0a 100%);
  color: var(--text);
  transition: border-color .16s ease;
}
.lx-method:hover { border-color: rgba(166,124,61,0.45); }
.lx-method:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.lx-method-ico {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 12px; color: var(--gold);
  border: 1px solid rgba(166,124,61,0.40);
  background: radial-gradient(circle at 50% 40%, rgba(204,168,95,0.09) 0%, rgba(204,168,95,0) 70%);
}
.lx-method-label { font-size: 16.5px; font-weight: 500; letter-spacing: -.1px; min-width: 0; }

/* ---- 3. Fortress Mode (§8) -------------------------------------------------
   The art is the shield the Connections page already uses, at the size that page
   uses it. §8 allows the orbital graphic only because it exists; nothing new was
   drawn for this page. */
.lx-fort { display: flex; align-items: center; gap: 12px; }
.lx-fort-art {
  flex: none; width: 100px; height: 100px; align-self: center;
  background: url("../../assets/ui/connection-shield.webp") center / contain no-repeat;
}
.lx-fort-body { min-width: 0; flex: 1 1 auto; }
.lx-status-row { display: flex; align-items: baseline; gap: 20px; margin-top: 14px; }
.lx-status-label { font-size: 13px; color: var(--muted); }
.lx-state { font-size: 13px; font-weight: 600; letter-spacing: .8px; color: var(--text); }
/* Green is the app's "measured secure" colour, so it belongs to the ON state and
   to nothing else here (§11). OFF is a neutral fact, not a warning. */
.lx-state.on { color: var(--ok); }
.lx-cta { width: 100%; margin-top: 16px; }
/* §8's supporting message: same divider treatment as the other pages, quieter
   type, and the shield mark rather than a second icon language. */
.lx-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
}
.lx-note .lux-icon { flex: none; color: var(--gold-deep); margin-top: 1px; }

/* ---- Narrow phones ---------------------------------------------------------
   Below 360 the shield would squeeze the description into four lines, so it
   gives its width back rather than the text (§14: do not compress everything to
   fit more content). */
@media (max-width: 360px) {
  .lx-card { padding: 16px; }
  .lx-fort-art { width: 76px; height: 76px; }
  .lx-title { font-size: 18.5px; }
  .lx-method-label { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .lx-method { transition: none; }
}

/* ============================================================================
   LUXVERIUM LEARN REDESIGN  ·  docs/new_ui/08A Learn.md · 08B Tutorial.md ·
                                 08C Glossary.md
   ----------------------------------------------------------------------------
   Three tabs of one page, so everything shared lives at the top of this block:
   the tab bar, the hero, the progress bar, the section labels, the search field
   and the empty state. Each tab then adds only what is its own.

   SCOPED TO `.ln-page`. The Learn routes are chain-agnostic, so the route class
   would have been safe, but there are three of them (learn / tutorials /
   glossary) and one wrapper is simpler than three selectors. The prefix is `ln-`
   because `.lux-tabs` belonged to the COMPANY shell while that page was still
   awaiting its pass. Company has `.cp-tabs` of its own now, and `.lux-tabs` is
   gone; the two bars stay separate so a change to one cannot restyle the other.

   The briefs suggest their own colour tokens (08A section 37, 08B section 17,
   08C section 24) and all three say to use the app's existing ones where they
   exist. They do, so nothing here defines a new colour: gold, ivory, muted and
   the green completion state are the app's.
   ========================================================================== */

/* width first, cap second: an auto cross-axis margin inside the #content column
   flex would otherwise size this to its content and overflow a 375px phone. */
.ln-page { width: 100%; max-width: 520px; min-width: 0; margin: 0 auto; }

/* ---- Tab bar (08B section 6) ----------------------------------------------
   One segmented container, three equal sections, one raised gold tab. Each tab
   is a real route change (see luxLearnView.js), so this is navigation, not a
   toggle. */
.ln-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 6px; border-radius: 18px;
  background: linear-gradient(180deg, #141109 0%, #100d09 100%);
  border: 1px solid rgba(166,124,61,0.18);
}
.ln-tab {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 46px; padding: 8px 6px; border-radius: 13px;
  background: none; border: 1px solid transparent; color: var(--muted);
  font-size: 11.5px; font-weight: 600; letter-spacing: .9px; text-transform: uppercase;
  transition: color .16s ease, border-color .16s ease;
}
.ln-tab .lux-icon { color: inherit; }
.ln-tab:hover { color: var(--text); }
.ln-tab.active {
  color: var(--gold-bright);
  background: linear-gradient(180deg, #1d1810 0%, #171208 100%);
  border-color: rgba(166,124,61,0.45);
  box-shadow: inset 0 0 18px rgba(204,168,95,0.07);
}
.ln-tab:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.ln-body { margin-top: 20px; }

/* ---- Hero, shared by the three tabs ---------------------------------------
   08A section 16 is the rule for all of them: the artwork is decoration and the
   message is the content, so the art is a background and never an <img> that
   could push the copy around. */
.ln-hero {
  position: relative; overflow: hidden;
  padding: 22px; border-radius: var(--r-lg);
  border: 1px solid rgba(166,124,61,0.30);
  background: linear-gradient(180deg, #14110c 0%, #0e0c08 100%);
}
.ln-hero-path {
  background:
    url("../../assets/ui/learn-path.webp") right center / auto 116% no-repeat,
    linear-gradient(180deg, #14110c 0%, #0e0c08 100%);
}
.ln-hero-tut {
  background:
    url("../../assets/ui/learn-orbit.webp") right center / cover no-repeat,
    linear-gradient(180deg, #14110c 0%, #0e0c08 100%);
}
/* The path artwork keeps its negative space on the left, so the copy is capped
   rather than centred: the words sit ON the empty half (08A section 15). */
.ln-hero-path .ln-hero-copy { max-width: 64%; }
/* 08A section 14: do not put text on the bright parts of the artwork. A
   left-to-right scrim gives the copy solid ground and lets the art come through
   on the right, where the flag and the road are. Every direct child of the hero
   is positioned, so all of them paint above it. */
.ln-hero-path::before, .ln-hero-tut::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    #100d09 0%, rgba(16,13,9,0.90) 34%, rgba(16,13,9,0.30) 66%, rgba(16,13,9,0) 100%);
}
/* The orbit artwork carries a large circle of its own, and at phone width it
   lands right where the real progress ring goes. The scrim on this hero
   therefore keeps a floor of opacity all the way across, so the measured ring
   is the only circle that reads as a control. */
.ln-hero-tut::before {
  background: linear-gradient(90deg,
    #100d09 0%, rgba(16,13,9,0.88) 42%, rgba(16,13,9,0.62) 100%);
}
.ln-hero > * { position: relative; }
.ln-hero-top { display: flex; align-items: center; gap: 16px; }
.ln-hero-copy { min-width: 0; flex: 1 1 auto; }
.ln-hero-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold);
}
.ln-hero-title {
  margin: 8px 0 0; font-size: 27px; font-weight: 700; line-height: 1.15;
  letter-spacing: -.6px; color: var(--text);
}
.ln-hero-sub { margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.ln-hero-count { margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.ln-hero .ln-bar { margin-top: 16px; }
.ln-hero-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 16px; padding: 14px; border-radius: 14px; font-size: 15px;
}

/* ---- Progress bar, shared ---------------------------------------------------
   One track, one gold fill, and the width is always set from a measured
   percentage: nothing here may be styled to look further along than it is. */
.ln-bar { height: 6px; border-radius: 999px; background: #241e15; overflow: hidden; }
.ln-bar-fill { height: 100%; border-radius: 999px; background: var(--gold-grad); }

/* ---- Section labels, shared ----------------------------------------------- */
.ln-sec-label {
  display: block; margin: 24px 0 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold);
}
.ln-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ln-sec-count { font-size: 12.5px; color: var(--muted); }

/* ---- Search field, shared -------------------------------------------------- */
.ln-search {
  display: flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 14px; border-radius: 16px;
  background: #12100b; border: 1px solid rgba(166,124,61,0.22);
}
.ln-search:focus-within { border-color: var(--gold-deep); }
.ln-search .lux-icon { flex: none; color: var(--muted); }
.ln-search-input {
  flex: 1 1 auto; min-width: 0; width: 100%;
  background: none; border: 0; outline: none; padding: 0;
  color: var(--text); font-size: 14.5px; font-family: inherit;
}
.ln-search-input::placeholder { color: var(--muted); }
.ln-search-input:focus { box-shadow: none; border: 0; }

/* ---- Empty state, shared (08A section 32, 08C section 19) ------------------ */
.ln-empty { padding: 26px 4px; }
.ln-empty-title { font-size: 15px; font-weight: 600; color: var(--text); }
.ln-empty-sub { margin-top: 6px; font-size: 13px; color: var(--muted); }

/* ============================ PATH TAB ==================================== */

/* ---- Learn progress (08A section 10) --------------------------------------
   The one card on this page allowed a gold border and a trace of glow; section
   41 spends the glow budget here, on the primary CTA and on the active filter. */
.ln-prog {
  display: flex; align-items: center; gap: 14px;
  margin-top: 16px; padding: 16px 18px; border-radius: var(--r-lg);
  border: 1px solid rgba(166,124,61,0.42);
  background:
    radial-gradient(120% 150% at 10% 50%, rgba(204,168,95,0.055) 0%, rgba(204,168,95,0) 62%),
    linear-gradient(180deg, #16120b 0%, #100d09 100%);
  box-shadow: 0 0 26px rgba(204,168,95,0.05);
}
.ln-prog-ico, .ln-start-ico {
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%; color: var(--gold);
  border: 1px solid rgba(166,124,61,0.45);
  background: radial-gradient(circle at 50% 45%, rgba(204,168,95,0.08) 0%, rgba(204,168,95,0) 70%);
}
.ln-prog-body { min-width: 0; flex: 1 1 auto; }
.ln-prog-title {
  font-size: 13px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--gold-bright);
}
.ln-prog-count { margin: 4px 0 10px; font-size: 13px; color: var(--text); }

/* ---- Web3 From Zero (08A section 12) -------------------------------------- */
.ln-start {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding: 16px 18px; border-radius: var(--r-lg);
  border: 1px solid rgba(166,124,61,0.30);
  background: linear-gradient(180deg, #16120b 0%, #100d09 100%);
}
.ln-start-body { flex: 1 1 150px; min-width: 0; }
.ln-start-title {
  font-size: 14px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--gold-bright);
}
.ln-start-sub { margin-top: 3px; font-size: 13px; color: var(--muted); }
.ln-start-pill {
  display: inline-block; margin-top: 9px; padding: 4px 12px; border-radius: 999px;
  font-size: 12px; color: var(--gold); border: 1px solid rgba(166,124,61,0.45);
}
.ln-start-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 18px; border-radius: 14px; font-size: 14px;
}

/* ---- Topic pills (08A section 19) -----------------------------------------
   Only the active pill is strongly highlighted: section 19 says so twice. */
.ln-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ln-chip {
  padding: 9px 15px; border-radius: 999px; font-size: 13px; font-weight: 500;
  color: var(--muted); background: #12100b; border: 1px solid rgba(166,124,61,0.18);
}
.ln-chip:hover { color: var(--text); }
.ln-chip.active {
  color: var(--gold-bright); border-color: var(--gold);
  background: rgba(204,168,95,0.08);
}

.ln-results { margin-top: 4px; }
.ln-group {
  margin: 24px 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold);
}

/* ---- Term card (08A sections 21 to 27) ------------------------------------ */
.ln-term {
  padding: 18px; border-radius: var(--r-md);
  border: 1px solid rgba(166,124,61,0.18);
  background: linear-gradient(180deg, #141109 0%, #100d09 100%);
}
.ln-term + .ln-term { margin-top: 12px; }
.ln-term.is-read { border-color: rgba(108,192,138,0.20); }
.ln-term.flash { animation: learnFlash 1.4s ease-out; }
@keyframes learnFlash {
  0% { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(204,168,95,0.35); }
  100% { border-color: rgba(166,124,61,0.18); box-shadow: none; }
}
/* Two columns and TOP alignment: at 375 the term and its badge often need two
   lines, and the read state has to stay on the term's own line rather than drift
   to the middle of a two-line block (the reference keeps it beside the title). */
.ln-term-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 6px 10px; }
.ln-term-headline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.ln-term-title { margin: 0; font-size: 19px; font-weight: 700; color: var(--gold-bright); }
.ln-native, .ln-term-tag {
  font-size: 11px; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  color: var(--gold); border: 1px solid rgba(166,124,61,0.45);
}
.ln-term-tag { color: var(--muted); border-color: var(--border); }
/* Read state is a control as well as a report (section 28), and green is
   reserved for completion (section 27). */
.ln-read {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 0 4px; background: none; border: 0; font-size: 12.5px; font-weight: 500;
  color: var(--muted);
}
.ln-read .lux-icon { flex: none; }
.ln-read.on { color: var(--ok); }
.ln-term-def { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--text); }
.ln-term-why { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.ln-term-why b { color: var(--gold); }
.ln-term-toggle {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; padding: 0;
  background: none; border: 0; color: var(--gold); font-size: 13px; font-weight: 600;
}
.ln-term-toggle .lux-icon { transition: transform .18s ease; }
.ln-term-toggle.open .lux-icon { transform: rotate(180deg); }
.ln-term-details {
  display: none; flex-direction: column; gap: 12px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft);
}
.ln-term-details.open { display: flex; }
.ln-field-label {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 700; margin-bottom: 3px;
}
.ln-field-text { font-size: 14px; line-height: 1.55; color: var(--text); }
.ln-related { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.ln-related-label { font-size: 12.5px; color: var(--muted); }
.ln-related-link {
  padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  color: var(--gold); background: #12100b; border: 1px solid rgba(166,124,61,0.22);
}
.ln-related-link:hover { color: var(--gold-bright); border-color: var(--gold-deep); }
/* The term-to-tutorial link, under its own divider (section 25). */
.ln-term-tut {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 14px; padding: 14px 0 0; text-align: left;
  border: 0; border-top: 1px solid var(--border-soft); border-radius: 0;
  background: none; color: var(--gold); font-size: 13.5px; font-weight: 600;
}
.ln-term-tut:hover { color: var(--gold-bright); }
.ln-term-tut-ico {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 8px; border: 1px solid rgba(166,124,61,0.45);
}

/* ========================= TUTORIALS TAB ================================== */

/* ---- Progress ring (08B section 7) ----------------------------------------
   The arc's dash offset is the ONLY place the percentage becomes geometry, so
   the ring cannot disagree with the number printed inside it. */
.ln-ring { position: relative; flex: none; width: 112px; height: 112px; display: grid; place-items: center; }
.ln-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ln-ring-track { fill: none; stroke: rgba(166,124,61,0.35); stroke-width: 3; }
.ln-ring-arc { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.ln-ring-text { position: relative; text-align: center; line-height: 1.2; }
.ln-ring-pct { font-size: 22px; font-weight: 700; color: var(--text); }
.ln-ring-frac { font-size: 12px; color: var(--ok); }
.ln-ring-label { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }

/* ---- Continue learning (08B section 9) ------------------------------------ */
.ln-continue {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px; text-align: left; border-radius: var(--r-lg);
  border: 1px solid rgba(166,124,61,0.20);
  background: linear-gradient(180deg, #141109 0%, #100d09 100%);
}
.ln-continue:hover { border-color: rgba(166,124,61,0.45); }
.ln-continue-num {
  position: relative; flex: none; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(166,124,61,0.45);
  color: var(--gold-bright); font-size: 19px; font-weight: 700;
}
.ln-continue-clock {
  position: absolute; right: -3px; bottom: -3px;
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  background: #100d09; color: var(--gold);
}
.ln-continue-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 0; }
.ln-continue-eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--gold);
}
.ln-continue-title { font-size: 15.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
.ln-continue-intro { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.ln-continue-meta { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.ln-continue-cta {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  color: var(--gold); font-size: 13.5px; font-weight: 600;
}

/* ---- Lesson timeline (08B sections 10, 11) --------------------------------
   The rail is drawn by the rows themselves (a full-height line behind each row
   plus one across the gap above it), so it always ends at the last row and never
   runs on into the expander. */
.ln-lessons { display: flex; flex-direction: column; gap: 8px; }
.ln-row {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 14px 14px 36px; text-align: left;
  border-radius: var(--r-md); border: 1px solid rgba(166,124,61,0.14);
  background: #100d09;
}
.ln-row::after {
  content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 1px;
  background: rgba(166,124,61,0.25);
}
.ln-row + .ln-row::before {
  content: ""; position: absolute; left: 14px; top: -9px; height: 9px; width: 1px;
  background: rgba(166,124,61,0.25);
}
.ln-row-node {
  position: relative; z-index: 1; flex: none;
  width: 13px; height: 13px; margin-left: -30px; border-radius: 50%;
  border: 1px solid rgba(166,124,61,0.5); background: #0d0b07;
}
.ln-row.is-done .ln-row-node { background: var(--gold); border-color: var(--gold); }
.ln-row.is-current .ln-row-node { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(204,168,95,0.16); }
.ln-row-num { flex: none; width: 22px; font-size: 15px; font-weight: 700; color: var(--muted); }
.ln-row.is-current .ln-row-num { color: var(--gold-bright); }
.ln-row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.ln-row-title { font-size: 14.5px; font-weight: 600; color: var(--text); line-height: 1.3; }
.ln-row-meta { font-size: 12px; color: var(--muted); }
.ln-row-state { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.ln-row-state.done { color: var(--ok); }
.ln-row-state.current { color: var(--gold); font-weight: 600; }
.ln-row-state.todo { color: var(--muted); }
.ln-row.is-current {
  border-color: rgba(166,124,61,0.55);
  background: linear-gradient(180deg, #181309 0%, #120f0a 100%);
}
.ln-row:hover { border-color: rgba(166,124,61,0.40); }
.ln-more {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 4px; padding: 14px; border-radius: var(--r-md);
  background: none; border: 1px dashed rgba(166,124,61,0.25);
  color: var(--gold); font-size: 13.5px; font-weight: 600;
}
.ln-more .lux-icon { transition: transform .18s ease; }
.ln-more.open .lux-icon { transform: rotate(180deg); }

/* ---- Explore more (08B section 13) ----------------------------------------
   A secondary navigation element, and section 13 says to keep it that way. */
.ln-explore {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px; text-align: left; border-radius: var(--r-lg);
  border: 1px solid rgba(166,124,61,0.20);
  background: linear-gradient(180deg, #141109 0%, #100d09 100%);
}
.ln-explore:hover { border-color: rgba(166,124,61,0.45); }
.ln-explore-ico {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 14px; font-size: 17px; font-weight: 600; color: var(--gold-bright);
  border: 1px solid rgba(166,124,61,0.45); background: rgba(204,168,95,0.05);
}
.ln-explore-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.ln-explore-title { font-size: 16px; font-weight: 600; color: var(--text); }
.ln-explore-sub { font-size: 12.5px; color: var(--muted); }
.ln-explore-cta {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  color: var(--gold); font-size: 13.5px; font-weight: 600;
}

/* ========================== GLOSSARY TAB ================================== */

/* ---- Hero artwork (08C section 9) -----------------------------------------
   Drawn rather than shipped: it is line work in the app's own gold, so it needs
   no file and cannot drift from the tokens. Kept quiet per section 30. */
.ln-gloss-art { flex: none; width: 118px; height: 118px; opacity: .92; }
.ln-gloss-orbit ellipse { fill: none; stroke: rgba(166,124,61,0.55); stroke-width: 1; stroke-dasharray: 2 6; }
.ln-gloss-book { filter: drop-shadow(0 0 7px rgba(204,168,95,0.30)); }
.ln-gloss-book path { fill: none; stroke: var(--gold); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.ln-gloss-aa { fill: var(--gold-bright); font-size: 34px; font-weight: 600; text-anchor: middle; font-family: var(--font-body); }
.ln-gloss-star { fill: var(--gold-bright); }

/* ---- Statistics strip (08C section 10) ------------------------------------ */
.ln-stats {
  display: flex; margin-top: 18px; border-radius: var(--r-md);
  border: 1px solid rgba(166,124,61,0.18); background: rgba(0,0,0,0.28);
}
.ln-stat { flex: 1 1 0; min-width: 0; padding: 14px 8px; text-align: center; }
.ln-stat + .ln-stat { border-left: 1px solid var(--border-soft); }
.ln-stat-num { font-size: 22px; font-weight: 700; color: var(--gold-bright); line-height: 1.1; }
.ln-stat-label { margin-top: 3px; font-size: 12px; color: var(--muted); }

/* ---- Search, sort, alphabet (08C sections 11, 12) ------------------------- */
.ln-tools { display: flex; gap: 10px; margin-top: 16px; }
.ln-tools .ln-search { flex: 1 1 auto; min-width: 0; }
.ln-sort {
  flex: none; display: flex; align-items: center; gap: 6px;
  height: 50px; padding: 0 10px 0 12px; border-radius: 16px;
  background: #12100b; border: 1px solid rgba(166,124,61,0.22); color: var(--muted);
}
.ln-sort-select {
  background: none; border: 0; outline: none; padding: 0;
  color: var(--text); font-size: 13px; font-family: inherit;
}
.ln-alpha {
  display: flex; gap: 8px; margin-top: 12px; padding-bottom: 4px;
  overflow-x: auto; scrollbar-width: none;
}
.ln-alpha::-webkit-scrollbar { display: none; }
.ln-alpha-btn {
  flex: none; display: grid; place-items: center;
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px;
  font-size: 13px; color: var(--muted);
  background: #12100b; border: 1px solid rgba(166,124,61,0.18);
}
.ln-alpha-btn.active { color: var(--gold-bright); border-color: var(--gold); background: rgba(204,168,95,0.08); }

/* ---- Term cards (08C sections 4, 14, 42) ----------------------------------
   NO mark on the left. The term is the anchor, and the whitespace is the design;
   section 4 and section 42 both say the previous icon version was too crowded. */
.ln-gloss-list { display: flex; flex-direction: column; gap: 10px; }
.ln-gterm {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 15px 12px 15px 18px; border-radius: var(--r-md);
  border: 1px solid rgba(166,124,61,0.14);
  background: linear-gradient(180deg, #141109 0%, #100d09 100%);
}
.ln-gterm-open, .ln-gterm-main {
  flex: 1 1 auto; min-width: 0; padding: 0; text-align: left;
  background: none; border: 0; color: inherit; border-radius: 0;
}
.ln-gterm-open:hover .ln-gterm-title { color: var(--gold-bright); }
.ln-gterm-title { margin: 0; font-size: 15.5px; font-weight: 600; color: var(--text); }
.ln-gterm-def { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.ln-save {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; border-radius: 12px;
  background: none; border: 0; color: var(--gold-deep);
}
.ln-save:hover { color: var(--gold); }
.ln-save.on { color: var(--gold-bright); }
.ln-save.on .lux-icon { fill: currentColor; }

/* ---- Narrow phones ---------------------------------------------------------
   The mockups are drawn at 426px. At 375 the hero cannot hold a 112px ring and a
   27px headline side by side, and a lesson row cannot hold a title and a state
   label on one line, so both give way rather than squeezing the words. */
@media (max-width: 430px) {
  .ln-hero { padding: 18px; }
  .ln-hero-title { font-size: 24px; }
  .ln-hero-path .ln-hero-copy { max-width: 70%; }
  .ln-ring { width: 92px; height: 92px; }
  .ln-ring-pct { font-size: 19px; }
  .ln-start-cta { flex: 1 1 100%; justify-content: center; }
  .ln-continue-cta {
    flex: 1 0 100%; justify-content: flex-end;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft);
  }
  .ln-continue { flex-wrap: wrap; }
  .ln-row { flex-wrap: wrap; row-gap: 8px; }
  .ln-row-state { width: 100%; justify-content: flex-end; }
  .ln-gloss-art { width: 96px; height: 96px; }
}

@media (max-width: 360px) {
  .ln-tab { flex-direction: column; gap: 3px; font-size: 10px; letter-spacing: .6px; }
  .ln-hero-title { font-size: 22px; }
  .ln-prog, .ln-start { padding: 14px; }
  .ln-prog-ico, .ln-start-ico { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ln-term.flash { animation: none; }
  .ln-tab, .ln-term-toggle .lux-icon, .ln-more .lux-icon { transition: none; }
}

/* ============================================================================
   COMPANY REDESIGN  ·  docs/new_ui/09 Company.md
   ----------------------------------------------------------------------------
   Three tabs of one page (About Us, Links, FAQ), so the shared parts come first:
   the tab bar, the card, the card head with its mark and gold label, and the
   social footer two of the tabs render.

   SCOPED TO `.cp-page`. The tab bar is deliberately NOT the Learn bar: the two
   pages draw the same control with different label lengths, and one changing
   must never silently restyle the other. `.lux-tabs`, which both used to share,
   is gone with this pass.

   Section 12's list is why there is no glow on most of this: near-black ground,
   espresso surfaces, one hairline bronze border, gold as an accent only.
   ========================================================================== */

/* width first, cap second: an auto cross-axis margin inside the #content column
   flex would otherwise size this to its content and overflow a 375px phone. */
.cp-page { width: 100%; max-width: 520px; min-width: 0; margin: 0 auto; }

.cp-head-page { margin: 4px 0 20px; }
.cp-head-page .page-title {
  font-family: var(--font-head); font-size: 30px; font-weight: 700;
  letter-spacing: .2px; line-height: 1.1; color: var(--text);
  background: none; -webkit-text-fill-color: currentColor;
}
.cp-head-page .page-sub { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ---- Tab bar (section 2) --------------------------------------------------- */
.cp-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: 6px; border-radius: 18px;
  background: linear-gradient(180deg, #141109 0%, #100d09 100%);
  border: 1px solid rgba(166,124,61,0.18);
}
.cp-tab {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 8px 6px; border-radius: 13px;
  background: none; border: 1px solid transparent; color: var(--muted);
  font-size: 13.5px; font-weight: 500;
  transition: color .16s ease, border-color .16s ease;
}
.cp-tab .lux-icon { color: inherit; flex: none; }
.cp-tab:hover { color: var(--text); }
.cp-tab.active {
  color: var(--gold-bright); font-weight: 600;
  background: linear-gradient(180deg, #1d1810 0%, #171208 100%);
  border-color: rgba(166,124,61,0.45);
  box-shadow: inset 0 0 18px rgba(204,168,95,0.07);
}
.cp-tab:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.cp-body { margin-top: 18px; }

/* ---- Card + head, shared by all three tabs -------------------------------- */
.cp-card {
  position: relative; overflow: hidden; display: block; width: 100%; text-align: left;
  padding: 20px; border-radius: var(--r-lg);
  border: 1px solid rgba(166,124,61,0.22);
  background: linear-gradient(180deg, #14110c 0%, #100d09 100%);
}
.cp-card + .cp-card { margin-top: 16px; }
.cp-head { position: relative; display: flex; align-items: flex-start; gap: 14px; }
.cp-head-ico {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px; color: var(--gold);
  border: 1px solid rgba(166,124,61,0.45);
  background: rgba(204,168,95,0.05);
}
.cp-head-body { min-width: 0; flex: 1 1 auto; padding-top: 3px; }
.cp-head-title {
  margin: 0; font-size: 14px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--gold-bright); line-height: 1.3;
}
.cp-head-sub { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---- Social footer (section 5) --------------------------------------------
   Icons only, on the Links tab and the FAQ tab. The label sits on a rule, which
   is the reference's FOLLOW US treatment. */
.cp-follow { margin-top: 26px; }
.cp-follow-label {
  display: flex; align-items: center; gap: 14px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--gold); text-align: center;
}
.cp-follow-label::before, .cp-follow-label::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, rgba(166,124,61,0) 0%, rgba(166,124,61,0.45) 100%);
}
.cp-follow-label::after { background: linear-gradient(90deg, rgba(166,124,61,0.45) 0%, rgba(166,124,61,0) 100%); }
.cp-socials {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px;
}
.cp-social {
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0;
  border-radius: 50%; color: var(--gold);
  background: #12100b; border: 1px solid rgba(166,124,61,0.28);
  transition: border-color .16s ease, color .16s ease;
}
.cp-social svg { width: 20px; height: 20px; display: block; }
.cp-social:hover { color: var(--gold-bright); border-color: var(--gold); }
.cp-social:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* ============================ ABOUT US TAB ================================ */

/* The two artworks are decoration and nothing else (section 3: "visual only"),
   so they are backgrounds under a scrim rather than elements that could take a
   click or push the copy around. The scrim keeps the left half solid, which is
   where both images left their negative space. */
/* Scale matters more than it looks: at "auto 108%" the compass filled the whole
   card and the founder copy sat ON the star. Sized to the RIGHT-HAND column and
   pinned there, it stays where the reference puts it and the words keep solid
   ground. The scrim then carries a floor of opacity across the copy column. */
.cp-about {
  background:
    url("../../assets/ui/company-compass.webp") right -14px center / auto 62% no-repeat,
    linear-gradient(180deg, #14110c 0%, #100d09 100%);
}
.cp-mission {
  background:
    url("../../assets/ui/company-summit.webp") right -10px bottom -6px / auto 78% no-repeat,
    linear-gradient(180deg, #14110c 0%, #100d09 100%);
}
.cp-about::before, .cp-mission::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    #100d09 0%, rgba(16,13,9,0.95) 46%, rgba(16,13,9,0.55) 74%, rgba(16,13,9,0.15) 100%);
}
.cp-about > *, .cp-mission > * { position: relative; }

.cp-about-copy { margin-top: 16px; max-width: 62%; }
.cp-para { margin: 0; font-size: 14px; line-height: 1.65; color: var(--text); }
.cp-para + .cp-para { margin-top: 14px; }
.cp-mission-copy { margin-top: 16px; max-width: 62%; }
.cp-mission-line {
  margin: 8px 0 0; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--text);
}

/* ---- Values (section 3) ---------------------------------------------------
   One card, three rows, a hairline between them and a quiet ring per row. */
.cp-values { margin-top: 6px; }
.cp-value { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; }
.cp-value + .cp-value { border-top: 1px solid var(--border-soft); }
.cp-value-mark {
  flex: none; margin-top: 2px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(166,124,61,0.55);
  background: radial-gradient(circle at 50% 45%, rgba(204,168,95,0.10) 0%, rgba(204,168,95,0) 70%);
}
.cp-value-body { min-width: 0; flex: 1 1 auto; }
.cp-value-title { font-size: 15.5px; font-weight: 600; color: var(--text); }
.cp-value-text { margin-top: 4px; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ============================== LINKS TAB ================================= */

.cp-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.cp-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 12px 14px; text-align: left; border-radius: var(--r-md);
  border: 1px solid rgba(166,124,61,0.14);
  background: #100d09; color: var(--text);
  transition: border-color .16s ease;
}
.cp-row:hover { border-color: rgba(166,124,61,0.45); }
.cp-row:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.cp-row-ico {
  flex: none; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px; color: var(--gold);
  border: 1px solid rgba(166,124,61,0.35);
  background: rgba(204,168,95,0.04);
}
.cp-row-ico svg { width: 20px; height: 20px; display: block; }
.cp-row-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.cp-row-label { font-size: 15.5px; font-weight: 500; color: var(--text); }
.cp-row-sub { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.cp-row-chev { flex: none; display: grid; place-items: center; color: var(--gold-deep); }
.cp-row:hover .cp-row-chev { color: var(--gold); }

/* =============================== FAQ TAB ================================== */

/* The header card carries the compass too, at a tighter crop than About Us so
   the mark sits behind the two copy lines rather than beside them. */
/* The FAQ header takes the same compass, but as a CORNER mark at a fixed pixel
   height: this card is short, so a percentage size scaled the star up until the
   two copy lines sat on top of it. */
.cp-faq-head {
  background:
    url("../../assets/ui/company-compass.webp") right -10px top -12px / auto 132px no-repeat,
    linear-gradient(180deg, #14110c 0%, #100d09 100%);
}
.cp-faq-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    #100d09 0%, rgba(16,13,9,0.94) 52%, rgba(16,13,9,0.62) 82%, rgba(16,13,9,0.25) 100%);
}
.cp-faq-head > * { position: relative; }

/* One card per question (section 6), collapsed by default and single-open. */
.cp-page .faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.cp-page .faq-item {
  border-radius: var(--r-md); border: 1px solid rgba(166,124,61,0.16);
  background: linear-gradient(180deg, #141109 0%, #100d09 100%);
  overflow: hidden;
}
.cp-page .faq-item.open { border-color: rgba(166,124,61,0.42); }
.cp-page .faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 17px 16px; text-align: left; border-radius: 0;
  background: none; border: 0; color: var(--text);
  font-size: 15px; font-weight: 600; line-height: 1.35;
}
.cp-page .faq-item.open .faq-q { color: var(--gold-bright); }
.cp-page .faq-q-text { min-width: 0; }
.cp-page .faq-chevron { flex: none; display: grid; place-items: center; color: var(--gold-deep); }
.cp-page .faq-chevron .lux-icon { transition: transform .18s ease; }
.cp-page .faq-item.open .faq-chevron { color: var(--gold); }
.cp-page .faq-item.open .faq-chevron .lux-icon { transform: rotate(180deg); }
.cp-page .faq-answer { display: none; padding: 0 16px 18px; }
.cp-page .faq-item.open .faq-answer { display: block; border-top: 1px solid var(--border-soft); padding-top: 14px; }
.cp-page .faq-para { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--muted); }
.cp-page .faq-para + .faq-para { margin-top: 12px; }

/* The support card that closes the questions (section 9). */
.cp-contact { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.cp-contact:hover { border-color: rgba(166,124,61,0.45); }
.cp-contact-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.cp-contact-title { font-size: 15.5px; font-weight: 600; color: var(--text); }
.cp-contact-sub { font-size: 12.5px; color: var(--muted); }
.cp-contact-cta {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  padding: 10px 14px; border-radius: 12px;
  border: 1px solid rgba(166,124,61,0.45); color: var(--gold);
  font-size: 13.5px; font-weight: 600;
}
.cp-contact:hover .cp-contact-cta { color: var(--gold-bright); border-color: var(--gold); }

/* ---- Narrow phones ---------------------------------------------------------
   Below 430 the artwork keeps its place but the copy takes more of the width,
   and the FAQ contact card stacks so its button keeps a real touch target. */
@media (max-width: 430px) {
  .cp-card { padding: 18px; }
  .cp-about-copy, .cp-mission-copy { max-width: 70%; }
  .cp-contact { flex-wrap: wrap; }
  .cp-contact-cta { flex: 1 0 100%; justify-content: center; margin-top: 4px; }
  /* Seven marks on one row is the reference's arrangement, and it survives 375
     only if they shrink: 7 x 41 plus six 8px gaps is 335 inside a 343 column. */
  .cp-socials { gap: 8px; }
  .cp-social { width: 41px; height: 41px; }
  .cp-social svg { width: 18px; height: 18px; }
}

@media (max-width: 360px) {
  .cp-tab { flex-direction: column; gap: 3px; font-size: 12px; }
  .cp-head-page .page-title { font-size: 26px; }
  .cp-about-copy, .cp-mission-copy { max-width: 100%; }
  /* Seven marks cannot fit one row at 320, so they wrap. They keep the 41px
     size the 430 rule sets rather than shrinking below a comfortable target. */
}

@media (prefers-reduced-motion: reduce) {
  .cp-tab, .cp-row, .cp-social, .cp-page .faq-chevron .lux-icon { transition: none; }
}

/* ============================================================================
   SETTINGS REDESIGN  ·  docs/new_ui/10 Settings.md
   ----------------------------------------------------------------------------
   Section 23 sets the shape: Settings is a CONTROL CENTER, so the page is a list
   of doors (category, setting, description, navigation) and every control it
   used to hold lives on its own destination. The same `.st-` block styles both
   halves: the menu, and the sub-pages behind it.

   SCOPED TO `.st-page`, which both the menu and every destination wrap
   themselves in.
   ========================================================================== */

/* width first, cap second: an auto cross-axis margin inside the #content column
   flex would otherwise size this to its content and overflow a 375px phone. */
.st-page { width: 100%; max-width: 520px; min-width: 0; margin: 0 auto; }

/* ---- Page header + gear (sections 4, 5) -----------------------------------
   The artwork is decoration: it sits BESIDE the copy in its own column, so it
   can never overlap the title, and it gives its width back first when the screen
   narrows (section 5 asks for exactly that). */
.st-head { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 26px; }
.st-head-copy { min-width: 0; flex: 1 1 auto; }
.st-head .page-title {
  font-family: var(--font-head); font-size: 30px; font-weight: 700;
  letter-spacing: .2px; line-height: 1.1; color: var(--text);
  background: none; -webkit-text-fill-color: currentColor;
}
.st-head .page-sub { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.st-gear {
  flex: none; width: 132px; height: 122px; margin-top: -6px;
  background: url("../../assets/ui/settings-gear.webp") center / contain no-repeat;
}

/* ---- Section labels (section 6) ------------------------------------------- */
.st-label {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-size: 12px; font-weight: 600; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--gold);
}
.st-demo {
  padding: 3px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.1px;
  color: var(--gold-bright); border: 1px solid rgba(166,124,61,0.55);
  background: rgba(204,168,95,0.07);
}
.st-group + .st-group { margin-top: 24px; }

/* ---- Grouped rows (section 12) --------------------------------------------
   One container per category with a hairline between its rows, NOT one card per
   row: section 12 says so in as many words. */
.st-rows {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid rgba(166,124,61,0.20);
  background: linear-gradient(180deg, #14110c 0%, #100d09 100%);
}
/* The demo group carries a stronger edge, which is how the reference marks it as
   experimental (section 11). */
.st-rows.is-demo { border-color: rgba(166,124,61,0.55); }
.st-row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px; text-align: left; border: 0; border-radius: 0;
  background: none; color: var(--text);
  transition: background-color .16s ease;
}
.st-row + .st-row { border-top: 1px solid var(--border-soft); }
.st-row:hover { background: rgba(204,168,95,0.04); }
.st-row:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: -2px; }
.st-row-ico {
  flex: none; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 13px; color: var(--gold);
  border: 1px solid rgba(166,124,61,0.40);
  background: rgba(204,168,95,0.04);
}
.st-row-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.st-row-title { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.25; }
.st-row-sub { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.st-row-chev { flex: none; display: grid; place-items: center; color: var(--gold-deep); }
.st-row:hover .st-row-chev { color: var(--gold); }

/* ---- Destinations ----------------------------------------------------------
   The pages behind the rows are forms and facts, so they keep the app's `.panel`
   surface. Only the chrome around them is new. */
.st-back {
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: 10px; padding: 6px 0; background: none; border: 0;
  color: var(--gold); font-size: 13.5px; font-weight: 600;
}
.st-back .lux-icon { transform: rotate(180deg); }
.st-back:hover { color: var(--gold-bright); }
.st-sub-head { margin: 0 0 18px; }
.st-sub-head .page-title {
  font-family: var(--font-head); font-size: 25px; font-weight: 700;
  letter-spacing: .2px; color: var(--text);
  background: none; -webkit-text-fill-color: currentColor;
}
.st-sub-head .page-sub { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.st-card + .st-card { margin-top: 14px; }
.st-block-title {
  font-size: 12px; font-weight: 600; letter-spacing: 1.3px;
  text-transform: uppercase; color: var(--gold); margin-bottom: 12px;
}
/* The real network switcher, embedded rather than rebuilt, so the page and the
   header can never disagree about the active chain. */
.st-net-switch { margin-bottom: 14px; }
.st-net-switch .net-btn { width: 100%; justify-content: space-between; }

/* ---- Narrow phones (section 17) --------------------------------------------
   The gear gives its width back before the copy does, and below 360 it goes
   entirely rather than squeezing the title into three lines. */
@media (max-width: 430px) {
  .st-gear { width: 104px; height: 96px; }
  .st-row { padding: 14px; gap: 12px; }
  .st-row-ico { width: 42px; height: 42px; }
}

@media (max-width: 360px) {
  .st-gear { display: none; }
  .st-head .page-title { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .st-row { transition: none; }
}

/* ============================================================================
   ENTRY SCREENS REDESIGN  ·  mockup/Relogin-No Wallet.png · Relogin-With Wallet.png
   ----------------------------------------------------------------------------
   The two screens before a wallet is active. They have no written brief, so the
   references are the brief, and both draw the same three pieces: a BRAND CARD
   with the logo, the tagline and the two preferences; the ACTION CARD; and one
   quiet trust line under it.

   `#connect-view` is no longer a card itself (it was `.card.connect-card`): it
   is a plain column that holds the two cards, which is what let the brand card
   exist at all.
   ========================================================================== */

.entry-view { display: block; width: 100%; max-width: 520px; margin: 0 auto; }

/* ---- Brand + preferences ---------------------------------------------------
   The sidebar is an unreachable drawer before login, so this is where language
   and network live on the entry screen. Both are the sidebar's own factories. */
.en-brand {
  position: relative; overflow: hidden;
  padding: 18px; border-radius: var(--r-lg);
  border: 1px solid rgba(166,124,61,0.28);
  background:
    url("../../assets/ui/dash-wave.webp") right -30px top -40px / 62% auto no-repeat,
    linear-gradient(180deg, #14110c 0%, #100d09 100%);
}
/* The ornament is a whisper: the reference shows it as a faint dotted wave in
   the corner, well behind the type. */
.en-brand::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, #100d09 0%, rgba(16,13,9,0.92) 45%, rgba(16,13,9,0.72) 100%);
}
.en-brand > * { position: relative; }
.en-brand-head { display: flex; align-items: center; gap: 13px; }
.en-logo { flex: none; width: 44px; height: 44px; display: block; }
.en-brand-text { min-width: 0; }
.en-name {
  font-size: 19px; font-weight: 700; letter-spacing: 2.4px; color: var(--gold-bright);
  line-height: 1.15;
}
.en-tag { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.en-rule { height: 1px; margin: 16px 0 14px; background: var(--border-soft); }
.en-pref-label {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.en-prefs { display: flex; flex-direction: column; gap: 10px; }
/* Both pickers are full-width rows here, unlike the compact sidebar copies. */
.en-pref .lang-switch, .en-pref .net-switch { width: 100%; }
.en-pref .lang-btn, .en-pref .net-btn {
  width: 100%; justify-content: flex-start; gap: 12px;
  height: 52px; padding: 0 16px; border-radius: var(--r-md);
  background: #12100b; border: 1px solid rgba(166,124,61,0.22);
  font-size: 15px; color: var(--text);
}
.en-pref .lang-caret, .en-pref .net-caret { margin-left: auto; color: var(--gold-deep); }
.en-pref .lang-name, .en-pref .net-name { font-weight: 600; }

/* Above 840 the sidebar COLUMN is visible on the entry screen, and it already
   carries the brand, the language picker and the network switcher, so this card
   would be a second copy of all three. It belongs to the phone layout, which is
   the one both references were drawn in and the one where the sidebar is an
   unreachable drawer. */
@media (min-width: 841px) {
  .en-brand { display: none; }
}

/* ---- Action card ----------------------------------------------------------- */
.en-card {
  margin-top: 16px; padding: 26px 20px 22px; border-radius: var(--r-lg);
  border: 1px solid rgba(166,124,61,0.22);
  background: linear-gradient(180deg, #14110c 0%, #100d09 100%);
  text-align: center;
}
.en-mark { display: block; width: 108px; height: 108px; margin: 0 auto 6px; }
.en-ring { fill: none; stroke: rgba(166,124,61,0.45); stroke-width: 1; }
.en-ring-2 { stroke: rgba(166,124,61,0.22); stroke-dasharray: 2 7; }
.en-dot { fill: var(--gold); }
.en-star { fill: var(--gold-bright); }
.en-glyph { fill: none; stroke: var(--gold-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.en-glyph-fill { fill: var(--gold-bright); }

/* The display face, which is what both references use for these two lines. */
.en-title {
  margin: 6px 0 8px; font-family: var(--font-head); font-weight: 600;
  font-size: 30px; line-height: 1.2; letter-spacing: .2px; color: var(--text);
}
.en-sub { margin: 0 auto 20px; max-width: 34ch; font-size: 14px; line-height: 1.55; color: var(--muted); }
.en-sub b { color: var(--gold-bright); font-weight: 600; }

.en-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px; border-radius: 14px; font-size: 15.5px;
}
.en-alt-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px; border-radius: 14px; font-size: 14.5px;
  background: #14110b; border: 1px solid rgba(166,124,61,0.22); color: var(--text);
}
.en-alt-btn:hover { border-color: var(--gold-deep); }
.en-card .en-alt-btn.btn-block { margin-top: 10px; }
/* The password field the unlock screen puts above its button. */
.en-card .pw-wrap { margin-bottom: 12px; }
.en-card .en-pw {
  width: 100%; height: 52px; border-radius: var(--r-md);
  background: #12100b; border: 1px solid rgba(166,124,61,0.45);
  padding-right: 44px; /* room for the hold-to-reveal eye */
}

.en-divider {
  display: flex; align-items: center; gap: 12px; margin: 18px 0 14px;
  font-size: 12.5px; color: var(--muted);
}
.en-divider::before, .en-divider::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--border-soft);
}
.en-addr-row { display: flex; gap: 10px; }
.en-addr-input {
  flex: 1 1 auto; min-width: 0; height: 52px; border-radius: var(--r-md);
  background: #12100b; border: 1px solid rgba(166,124,61,0.45);
}
.en-watch { flex: none; padding: 0 20px; height: 52px; border-radius: var(--r-md); }
/* Two buttons side by side on the unlock screen (the reference's "or" row). */
.en-alt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---- Trust line ------------------------------------------------------------
   The app's key-storage disclaimer is the shared footer below this area, so the
   entry screens add only their own one-line reassurance. */
.en-trust {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 18px; font-size: 13px; color: var(--muted);
}
.en-trust .lux-icon { flex: none; color: var(--gold-deep); }
.en-trust-card {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid rgba(166,124,61,0.18);
  background: linear-gradient(180deg, #14110c 0%, #100d09 100%);
}
.en-trust-spark { flex: none; color: var(--gold-bright); display: grid; place-items: center; }
.en-trust-text { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); text-align: left; }
.en-trust-seal {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; color: var(--gold);
  border: 1px solid rgba(166,124,61,0.35);
  background: radial-gradient(circle at 50% 45%, rgba(204,168,95,0.08) 0%, rgba(204,168,95,0) 70%);
}

/* ---- Narrow phones --------------------------------------------------------- */
@media (max-width: 380px) {
  .en-title { font-size: 26px; }
  .en-mark { width: 92px; height: 92px; }
  .en-card { padding: 22px 16px 18px; }
  .en-alt { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .en-alt-btn { transition: none; }
}

/* ===== Maintenance wall ======================================================
   Shown instead of the app when control/luxctl.py has maintenance ON for this
   surface (see src/ui/maintenanceView.js). It reuses the access gate's overlay
   and card so the two walls read as the same object in different states, and
   adds only what is genuinely new: the status badge, the heading, the admin
   note and the quiet access-code affordance.

   Placed at the END of the file with the rest of the appended block. Nothing
   here defaults to display:none, so it needs no companion reveal rule - unlike
   the phone chrome below, which does. Keep the phone-chrome reveal last. ==== */
.maint-card { gap: 10px; }
.maint-badge {
  align-self: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold-deep);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px;
}
.maint-h {
  font-family: var(--font-head); font-weight: 600;
  font-size: 18px; line-height: 1.3; color: var(--text);
  margin: 2px 0 0;
}
/* The admin's own line, so it has to stand apart from the fixed copy without
   shouting: a left rule and the surface tint, no colour of its own. */
.maint-note {
  font-size: 13px; line-height: 1.5; color: var(--text);
  text-align: left;
  background: var(--surface-2, rgba(255, 255, 255, .03));
  border-left: 2px solid var(--gold-deep);
  border-radius: 6px;
  padding: 9px 12px;
  margin: 2px 0;
  /* An admin can paste a long address or URL into /note; without this it would
     widen the card past the 360px cap rather than wrapping. */
  overflow-wrap: anywhere;
}
/* Deliberately understated. A visitor should read the maintenance message, not
   hunt for a password box, so this looks like a footnote until it is clicked. */
.maint-codelink {
  background: none; border: 0; padding: 4px;
  font: inherit; font-size: 11.5px; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.maint-codelink:hover { color: var(--gold-deep); }
.maint-code { display: flex; flex-direction: column; gap: 10px; }
/* REQUIRED, not defensive. `display: flex` above beats the user-agent's
   `[hidden] { display: none }` (same specificity, later rule wins), so without
   this the code field is visible to every visitor and the "I have an access
   code" link below it does nothing. Any rule that gives a hideable element a
   display value needs its own [hidden] companion. */
.maint-code[hidden] { display: none; }
/* .pw-wrap already fills its container, but the input inside it is `flex: 1`
   with no width (written for .field-row), so pin the width here rather than
   letting the field size to its own content. Same trap as the sheet fields. */
.maint-code .pw-wrap input { width: 100%; }


/* ---- Phone chrome reveal --------------------------------------------------
   Deliberately the LAST rule in this file. .mhead and .bottom-nav default to
   display:none a few hundred lines above; a reveal placed in the earlier phone
   media block would be overridden by them, since both have the same specificity
   and the later rule wins. Keep this block at the bottom. */
@media (max-width: 840px) {
  .mhead { display: flex; }
  .bottom-nav { display: grid; }
  .drawer-close { display: grid; }
  /* The phone header already carries a scan button, so the sidebar's copy is a
     duplicate inside the drawer, and it sits exactly where the close control goes. */
  .brand-scan { display: none; }
  /* Before a wallet exists there is nothing to navigate, so the phone chrome
     stays away and the entry screen provides its own top spacing. The bar is a
     sibling of #app, not a descendant, so it needs the body's copy of the state:
     `.shell-noauth .bottom-nav` never matched it. */
  .shell-noauth .mhead, body.noauth .bottom-nav { display: none; }
}