/* Palette fallbacks.

   These rules were written against the zecscriptions token names, and
   app.html defines a different set, so on zec.fun every var() here
   resolved to nothing. Each name falls back to zec.fun's equivalent and
   then to a literal, so the modal is coherent on either site.

   `--accent: var(--cyan, ...)` is the load-bearing one: app.css defines
   --cyan, so zec.fun's wallet comes out cyan like the rest of that site,
   while zecscriptions has no --cyan and lands on gold. Pages loading
   styles.css override the whole block anyway, since it declares these
   names after this file is imported.
   ============================================ */
:root {
  --accent:        var(--cyan, #f4b728);
  --accent-bright: var(--cyan, #ffd76a);
  --accent-glow:   rgba(0, 255, 255, 0.28);
  --grad-gold:     linear-gradient(135deg, var(--cyan, #ffd76a) 0%, var(--cyan, #f4b728) 100%);
  --bg-elev:       var(--fill, #1b1b24);
  --bg-card:       var(--bg, #14141b);
  --bg-raised:     var(--fill-2, #1f1f29);
  --line-2:        var(--card-line, #2a2a36);
  --text-dim:      var(--muted, #a8aab8);
  --red:           var(--tr-red, #ef4444);
  --warn:          var(--gold, #b8860b);
  --mono:          ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================
   WALLET UI
   Extracted from styles.css so zec.fun (app.html) gets the same wallet
   modal as the zecscriptions pages. app.html loads only app.css, which
   never had any of these rules, so the whole wallet flow — including the
   recovery-phrase backup screen — rendered as unstyled HTML there.

   Both stylesheets pull this file in, so there is one copy of these
   rules rather than two that drift apart.
   ============================================ */

/* ============================================
   WALLET MODAL
   ============================================ */
.wallet-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.wallet-modal-backdrop[hidden] { display: none; }

.wallet-modal {
  background: var(--bg);
  border: 1px solid var(--line-2);
  width: 100%;
  max-width: 520px;
  /* Use 100dvh (dynamic viewport height) so iOS Safari's address bar +
     keyboard shrinking doesn't push the bottom of the modal off-screen.
     Fall back to 100vh for browsers without dvh support. */
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 2px;
  animation: walletPop 0.18s ease-out;
}

@keyframes walletPop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.wallet-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}

.wallet-modal-head h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.wallet-modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 2px;
  transition: color 0.15s ease;
}
.wallet-modal-close:hover { color: var(--text); }

.wallet-list {
  list-style: none;
  padding: 8px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wallet-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s ease;
}

.wallet-option:hover {
  background: var(--bg-elev);
  border-color: var(--line-2);
}

.wallet-option-icon {
  width: 36px;
  height: 36px;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}

.wallet-option-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.wallet-option-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.wallet-option-blurb {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.wallet-option-status {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  letter-spacing: 0.08em;
}

.wallet-modal-foot {
  padding: 14px 24px 20px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-align: center;
}

.wallet-modal-foot a {
  color: var(--accent);
  margin-left: 4px;
}

/* ----- Step 2: address entry ----- */
.wallet-addr-step {
  padding: 20px 24px 24px;
}

.wallet-back-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  transition: color 0.15s ease;
}
.wallet-back-btn:hover { color: var(--accent); }

.wallet-addr-hint {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-elev);
}

.wallet-addr-label {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.wallet-addr-input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 2px;
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.wallet-addr-input:focus { border-color: var(--accent); }
.wallet-addr-input::placeholder { color: var(--text-muted); }

.wallet-addr-error {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--red, #f44);
  min-height: 18px;
  margin: 8px 0;
}

.wallet-addr-submit {
  margin-bottom: 16px;
}

.wallet-addr-note {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* ============================================
   WALLET MODAL · new in-browser flow
   ============================================ */
.ww-intro {
  padding: 18px 24px 0;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}
.ww-intro code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
}

.ww-actions {
  padding: 18px 24px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ww-or {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding: 2px 0;
}

.ww-import { font-family: inherit; }
.ww-import summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  padding: 10px 0;
  letter-spacing: 0.04em;
  text-align: center;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.ww-import summary::-webkit-details-marker { display: none; }
.ww-import summary:hover { border-color: var(--accent); color: var(--text); }
.ww-import[open] summary { border-color: var(--accent); color: var(--text); margin-bottom: 12px; }

.ww-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 4px 0 8px;
}

.ww-input {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 12px 14px;
  border-radius: 2px;
  outline: none;
  margin-bottom: 12px;
  transition: border-color 0.15s ease;
}
.ww-input:focus { border-color: var(--accent); }

.ww-error {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--red);
  letter-spacing: 0.02em;
  margin-top: 8px;
  min-height: 14px;
}

.ww-warn {
  margin: 18px 24px 24px;
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  background: rgba(248, 113, 113, 0.04);
  border-left: 2px solid var(--red);
  border-radius: 2px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}
.ww-warn strong { color: var(--red); font-weight: 600; }

.ww-warn-inline {
  padding: 10px 12px;
  border-left: 2px solid var(--red);
  background: rgba(248, 113, 113, 0.04);
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 10px 0 12px;
}

/* Connected state */
.ww-addr-block {
  display: flex;
  gap: 18px;
  padding: 20px 24px;
  align-items: flex-start;
}
.ww-qr {
  flex-shrink: 0;
  width: 152px;
  height: 152px;
  background: #fff;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ww-qr svg { display: block; }
.ww-addr-side {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ww-addr-row {
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 10px 12px;
}
.ww-addr {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text);
  word-break: break-all;
  line-height: 1.5;
}
.ww-addr-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ww-action.btn {
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.04em;
  flex: 1;
  text-align: center;
}
.ww-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  line-height: 1.55;
}
.ww-hint code { color: var(--accent); }

.ww-divider {
  height: 1px;
  background: var(--line);
  margin: 0 24px;
}

/* .ww-reveal styling now comes from .ww-collapsible (above). The class
   is retained on the <details> element so any JS that still queries it
   by class name keeps working. */

.ww-key-row {
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 10px 12px;
  margin: 10px 0;
}
.ww-key {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  word-break: break-all;
  line-height: 1.5;
}
.ww-key-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

/* ============================================
   WALLET MODAL · backup-key view (post-generate)
   The single most important moment in the wallet lifecycle: the
   user just generated a wallet, the key is visible exactly once
   in this screen, and they need to copy/save it before continuing.
   Visually loud — red warning panel, key prominently displayed.
   ============================================ */
.ww-backup {
  padding: 8px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ww-backup-warn {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(248, 113, 113, 0.07);
  border: 1px solid rgba(248, 113, 113, 0.45);
  border-left: 3px solid var(--red);
  border-radius: 2px;
}
.ww-backup-warn-mark {
  flex-shrink: 0;
  color: var(--red);
  font-size: 18px;
  line-height: 1.4;
}
.ww-backup-warn-body {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
}
.ww-backup-warn-body strong { color: var(--text); font-weight: 600; }

.ww-backup-key-row {
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 12px 14px;
}
.ww-backup-key {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent);
  word-break: break-all;
  line-height: 1.55;
  display: block;
}

.ww-backup-tip {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
  padding: 4px 2px;
}

/* Recovery phrase: a numbered grid, sized to be copied onto paper by eye
   rather than skimmed. Two columns keeps all twelve visible without
   scrolling on a phone, which matters because a phrase the user has to
   scroll to finish reading is one they stop reading. */
.ww-backup-words {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin: 0;
  padding: 12px 14px 12px 30px;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  counter-reset: ww-word;
  list-style: none;
}
.ww-backup-words li {
  counter-increment: ww-word;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--accent);
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.ww-backup-words li::before {
  content: counter(ww-word);
  color: var(--text-dim);
  font-size: 11px;
  min-width: 16px;
  text-align: right;
  flex: none;
}
.ww-backup-words li span { word-break: break-all; }

@media (max-width: 380px) {
  .ww-backup-words { grid-template-columns: minmax(0, 1fr); }
}

.ww-backup-hexwrap {
  border-top: 1px solid var(--line-2);
  padding-top: 10px;
  margin-top: 2px;
}
.ww-backup-hexwrap > summary {
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
}
.ww-backup-hexwrap > summary:hover { color: var(--text); }
.ww-backup-hexwrap .ww-backup-key-row { margin: 10px 0; }

/* Standing reminder on the deposit screen while no backup is confirmed.
   Deliberately not dismissible: the condition it describes is one where
   incoming funds can be lost, and it goes away by fixing that. */
.ww-backup-nag {
  background: var(--bg-elev);
  border: 1px solid var(--warn, #b8860b);
  border-left-width: 3px;
  border-radius: 2px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-dim);
}
.ww-backup-nag strong { color: var(--text); display: block; margin-bottom: 2px; }

/* ============================================
   WALLET MODAL · receive view (default)
   Single-job screen: show address + QR + copy.
   Settings + key export live behind the gear.
   ============================================ */
.wallet-modal-receive .wallet-modal-head { padding-bottom: 12px; }

/* Receive / Send toggle that sits below the header. Two prominent
   buttons that act as tabs — the active one is outlined in accent
   gold + faintly tinted. Tapping swaps the body below. */
.ww-tab-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 22px 16px;
}
.ww-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  cursor: pointer;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 14px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ww-tab:hover { color: var(--text); border-color: var(--text-muted); }
.ww-tab-active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(244, 183, 40, 0.06);
}
.ww-tab-icon { flex-shrink: 0; }
.ww-tab-label { font-weight: 500; letter-spacing: 0.01em; }

.ww-tab-body { padding: 0; }

/* Send form: address + amount + Max button + balance/fee + Send. */
.ww-send {
  padding: 4px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ww-send .ww-label { margin-top: 8px; }
.ww-send-addr {
  width: 100%;
  font-family: var(--mono);
  font-size: 12px;
}

.ww-amount-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ww-send-amount {
  flex: 1;
  font-family: var(--mono);
  font-size: 14px;
}
.ww-amount-unit {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  padding: 0 4px;
}
.ww-amount-max {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ww-amount-max:hover { color: var(--accent); border-color: var(--accent); }

.ww-send-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 12px 14px;
  margin: 14px 0 4px;
}
.ww-send-meta-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
}
.ww-send-meta-row span { color: var(--text-dim); }
.ww-send-meta-row strong { color: var(--text); font-weight: 500; }

.ww-send #wwSendBtn { margin-top: 14px; }

/* Collapsible burn-risk warning below the send button — mostly
   advisory; users who already know what they're doing skip it. */
.ww-send-warn {
  margin-top: 14px;
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 2px;
  background: rgba(248, 113, 113, 0.04);
}
.ww-send-warn summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--red);
  letter-spacing: 0.02em;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ww-send-warn summary::-webkit-details-marker { display: none; }
/* Visual affordance that the row is expandable. Chevron at the right
   edge that rotates 90° when the details element is open. Same pattern
   we use elsewhere; signals "click me" without needing tooltips. */
.ww-send-warn summary::after {
  content: '▸';
  margin-left: auto;
  color: var(--red);
  font-size: 11px;
  transition: transform 0.15s ease;
}
.ww-send-warn[open] summary::after { transform: rotate(90deg); }
.ww-send-warn[open] summary { border-bottom: 1px solid rgba(248, 113, 113, 0.25); }
.ww-send-warn-body {
  padding: 10px 12px 12px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* Send success screen (replaces the form after broadcast). */
.ww-send-success {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ww-success-mark-big {
  width: 64px; height: 64px;
  border: 2px solid var(--green);
  color: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  line-height: 1;
  margin-bottom: 8px;
}
.ww-success-title-big {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.ww-success-sub-big {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.ww-head-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ww-head-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ww-head-btn:hover { color: var(--text); border-color: var(--line-2); }

.ww-back-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ww-back-btn:hover { color: var(--text); border-color: var(--line-2); }

.ww-receive {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 8px 24px 28px;
}
.ww-receive-qr {
  background: #fff;
  border-radius: 4px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ww-receive-qr svg { display: block; }
.ww-receive-addr {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text);
  text-align: center;
  word-break: break-all;
  line-height: 1.5;
  padding: 10px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  width: 100%;
  max-width: 380px;
}
.ww-receive-copy {
  max-width: 380px;
  width: 100%;
}
.ww-receive-hint {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
  text-align: center;
  max-width: 380px;
  margin: 0;
}

/* ============================================
   WALLET MODAL · settings view
   ============================================ */
.ww-settings { padding: 8px 0 20px; }

.ww-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-top: 1px solid var(--line);
}
.ww-setting-row:first-child { border-top: 0; }

.ww-setting-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.ww-setting-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.ww-setting-value {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.ww-setting-action {
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.ww-setting-danger:hover {
  color: var(--red) !important;
  border-color: var(--red) !important;
}

.ww-settings-warn {
  margin: 8px 24px 0;
  padding: 14px 16px;
  background: rgba(248, 113, 113, 0.05);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-left: 3px solid var(--red);
  border-radius: 2px;
}
.ww-settings-warn-head {
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  margin-bottom: 6px;
}
.ww-settings-warn-body {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* Threat-model disclosure (collapsible). Calmer styling than the
   red warning — this is reference info, not "act now". */
.ww-settings-disclosure {
  margin: 8px 24px 0;
  padding: 0 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
}
.ww-settings-disclosure summary {
  cursor: pointer;
  padding: 12px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  font-family: var(--sans);
  list-style: none;
}
.ww-settings-disclosure summary::-webkit-details-marker { display: none; }
.ww-settings-disclosure summary::after {
  content: '+';
  float: right;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 14px;
}
.ww-settings-disclosure[open] summary::after { content: '−'; }
.ww-settings-disclosure-body {
  padding: 0 0 14px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
}
.ww-settings-disclosure-body p { margin: 0 0 10px; }
.ww-settings-disclosure-body p:last-child { margin: 0; }
.ww-settings-disclosure-body strong { color: var(--text); font-weight: 500; }

/* ============================================
   WALLET MODAL · UTXO splitter (mint slots)
   ============================================ */
.ww-split-body {
  padding: 8px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ww-split-explain {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
}
.ww-split-field {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ww-split-field label {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-width: 60px;
}
.ww-split-field input {
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 16px;
  padding: 10px 12px;
  width: 80px;
  border-radius: 2px;
}
.ww-split-hint {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-muted);
}
.ww-split-summary {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ww-split-line {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
}
.ww-split-line strong {
  color: var(--text);
  font-weight: 500;
}
.ww-split-total {
  border-top: 1px solid var(--line);
  padding-top: 8px;
  margin-top: 4px;
}
.ww-split-total strong { color: var(--accent); font-size: 13px; }
.ww-split-have { font-size: 11.5px; color: var(--text-muted); }
.ww-split-have strong { color: var(--text-dim); font-weight: 400; }

.ww-split-success {
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ww-split-success-mark {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: #000;
  font-size: 24px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.ww-split-success-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.ww-split-success-sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.5;
  max-width: 380px;
}

/* ============================================
   WALLET MODAL · export-key view
   ============================================ */
.ww-export-body {
  padding: 8px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Legacy class kept for backwards compat with any code that still
   references it. New modal views don't emit this. */
.ww-meta-row {
  padding: 8px 24px 16px;
  display: flex;
  justify-content: flex-end;
}

/* Generic collapsible row used for the burn-risk warning and the
   reveal-key block. Both are secondary information — keep them out
   of the user's face on the primary "here's how to receive ZEC"
   surface, but easy to expand when they want. */
.ww-collapsible {
  margin: 0 24px 6px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: transparent;
  transition: border-color 0.15s ease;
}
.ww-collapsible[open] { border-color: var(--text-muted); }
.ww-collapsible summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
.ww-collapsible summary::-webkit-details-marker { display: none; }
.ww-collapsible summary::after {
  content: '▸';
  margin-left: auto;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.ww-collapsible[open] summary::after { transform: rotate(90deg); }
.ww-collapsible summary:hover { color: var(--text); }
.ww-collapsible-mark {
  color: var(--text-muted);
  font-size: 13px;
}
.ww-collapsible-body {
  padding: 4px 14px 14px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.ww-collapsible-body strong { color: var(--text); font-weight: 600; }

/* The burn-risk variant: same structure as a normal collapsible but
   slightly more visually charged so it stands out from the reveal-key
   row sitting right below it. */
.ww-collapsible-warn { border-color: rgba(248, 113, 113, 0.35); }
.ww-collapsible-warn[open] { border-color: rgba(248, 113, 113, 0.55); }
.ww-collapsible-warn .ww-collapsible-mark { color: var(--red); }
.ww-collapsible-warn summary { color: var(--text); }

/* Legacy burn-warn block kept for any references that still use it.
   The connected modal no longer emits this block; it lives inside
   ww-collapsible-warn now. */
.ww-burn-warn {
  margin: 18px 24px 0;
  padding: 14px 16px;
  background: rgba(248, 113, 113, 0.06);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-left: 3px solid var(--red);
  border-radius: 2px;
}
.ww-burn-warn-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.45;
}
.ww-burn-warn-head strong {
  color: var(--text);
  font-weight: 600;
}
.ww-burn-warn-mark {
  color: var(--red);
  font-size: 16px;
  line-height: 1.2;
  flex-shrink: 0;
}
.ww-burn-warn-body {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
  padding-left: 26px;
}

.ww-row-actions {
  display: flex;
  gap: 10px;
  padding: 12px 24px 24px;
}
.ww-row-action {
  flex: 1;
  color: var(--text-dim);
  border-color: var(--line-2);
  font-size: 12px;
  padding: 10px 12px;
  letter-spacing: 0.04em;
}
.ww-row-action:hover {
  color: var(--text);
  border-color: var(--accent);
}
.ww-row-action.ww-disconnect:hover {
  color: var(--red);
  border-color: var(--red);
}

.ww-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.ww-label-row .ww-label { margin: 0; }

.ww-label-opt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: none;
  margin-left: 6px;
}

.ww-badge {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 2px;
  border: 1px solid var(--line-2);
  text-transform: uppercase;
}
.ww-badge-locked {
  color: var(--green);
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.06);
}
.ww-badge-warn {
  color: var(--accent);
  border-color: rgba(244, 183, 40, 0.4);
  background: rgba(244, 183, 40, 0.05);
}

.ww-import-help {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: var(--bg-elev);
}
.ww-import-help code { font-family: var(--mono); color: var(--accent); font-size: 11px; }

/* ============================================
   WALLET MODAL · entry view (no wallet yet)
   Two big choice tiles. Nothing else. The intro
   paragraph and warnings used to dominate this
   screen — moved into the per-path next steps.
   ============================================ */
.ww-entry {
  padding: 28px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ww-entry-choice {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 2px;
  align-items: center;
  padding: 18px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
  color: var(--text);
}
.ww-entry-choice:hover { border-color: var(--accent); }
.ww-entry-choice:disabled { opacity: 0.6; cursor: default; }

.ww-entry-choice-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
  font-family: var(--mono);
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  text-align: center;
  align-self: center;
}
.ww-entry-choice-label {
  grid-row: 1;
  grid-column: 2;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.ww-entry-choice-sub {
  grid-row: 2;
  grid-column: 2;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}

.ww-entry-choice-primary {
  background: rgba(244, 183, 40, 0.08);
  border-color: rgba(244, 183, 40, 0.4);
}
.ww-entry-choice-primary:hover {
  border-color: var(--accent);
  background: rgba(244, 183, 40, 0.12);
}

.ww-entry-tagline {
  margin-top: 8px;
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  line-height: 1.55;
}

/* Import view body — same padding pattern as receive view. */
.ww-import-body {
  padding: 16px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ww-import-body .ww-input { margin: 0; }
.ww-import-body .ww-import-textarea { margin-bottom: 0; }

/* Tab toggle inside the Import details: lets the user choose between
   pasting a 12-word recovery phrase (Trust Wallet etc.) and pasting a
   single 64-hex private key (Zerdinals backup, Trust Wallet Developer
   Mode export). Default is the phrase tab since that's the more
   common artifact users have access to. */
.ww-import-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.ww-import-tab {
  padding: 9px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ww-import-tab:hover { color: var(--text); border-color: var(--text-muted); }
.ww-import-tab-active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(244, 183, 40, 0.06);
}

.ww-import-pane[hidden] { display: none; }

/* Textarea for the recovery phrase. Mono-spaced so 12 words break
   sensibly; auto-wraps with no horizontal scroll. */
.ww-import-textarea {
  width: 100%;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 2px;
  outline: none;
  resize: vertical;
  min-height: 56px;
  margin-bottom: 8px;
  line-height: 1.5;
}
.ww-import-textarea:focus { border-color: var(--accent); }

/* Per-pane help/warn blocks. The phrase warn is red because pasting
   a seed phrase is a higher-risk action; the priv-key tip is neutral. */
.ww-import-warn {
  margin: 4px 0 12px;
  padding: 12px 14px;
  background: rgba(248, 113, 113, 0.05);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-left: 3px solid var(--red);
  border-radius: 2px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
}
.ww-import-warn strong { color: var(--red); font-weight: 600; }
.ww-import-warn em { color: var(--text); font-style: normal; }
.ww-import-warn code { font-family: var(--mono); color: var(--accent); font-size: 11px; }

.ww-import-tip {
  margin: 4px 0 12px;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.55;
}

@media (max-width: 520px) {
  .ww-addr-block { flex-direction: column; align-items: center; }
  .ww-addr-side { width: 100%; }
}


/* ============================================
   INSCRIPTION WALLET MODAL (commit-reveal flow)
   ============================================ */
.iw-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.78);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.iw-modal {
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  width: 560px; max-width: 100%;
  /* 100dvh accounts for the iOS soft keyboard pushing the viewport up;
     90vh would leave the Confirm button below the keyboard with no scroll. */
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--sans);
  color: var(--text);
}
.iw-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
}
.iw-modal-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.iw-modal-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px;
}
.iw-modal-close:hover { color: var(--text); }

.iw-modal-body { padding: 8px 22px 22px; }
.iw-step {
  display: grid; grid-template-columns: 28px 1fr; gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0.45;
  transition: opacity 0.2s;
}
.iw-step:last-child { border-bottom: none; }
.iw-step-active, .iw-step-done { opacity: 1; }

.iw-step-num {
  width: 28px; height: 28px;
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px;
  color: var(--text-dim);
}
.iw-step-active .iw-step-num {
  border-color: var(--accent); color: var(--accent);
}
.iw-step-done .iw-step-num {
  border-color: var(--green); color: var(--green);
}
.iw-step-title {
  font-weight: 600; font-size: 14px; margin-bottom: 8px;
}
.iw-step-body { font-size: 13px; color: var(--text-dim); line-height: 1.55; }
.iw-step-body strong { color: var(--text); font-weight: 500; }

.iw-addr-box {
  margin: 12px 0;
  display: flex; gap: 8px; align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  padding: 10px 12px;
}
.iw-addr {
  flex: 1; font-family: var(--mono); font-size: 12px;
  color: var(--text); word-break: break-all;
}
.iw-copy {
  background: transparent; border: 1px solid var(--line-2);
  color: var(--text-dim); padding: 4px 10px;
  font-size: 11px; cursor: pointer;
  font-family: var(--mono);
}
.iw-copy:hover { color: var(--accent); border-color: var(--accent); }

.iw-hint { color: var(--text-muted); font-size: 12px; margin-top: 10px; }

.iw-txid-input {
  display: block; width: 100%; margin: 12px 0;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  color: var(--text); padding: 10px 12px;
  font-family: var(--mono); font-size: 12px;
}
.iw-txid-input:focus { outline: none; border-color: var(--accent); }

.iw-look-up, .iw-broadcast {
  background: var(--accent); color: #000;
  border: none; padding: 9px 16px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.iw-look-up:disabled, .iw-broadcast:disabled {
  background: var(--line-2); color: var(--text-muted); cursor: not-allowed;
}
.iw-look-up:hover:not(:disabled), .iw-broadcast:hover:not(:disabled) {
  background: var(--accent-dim);
}

.iw-reveal-preview { margin: 12px 0; }
.iw-kv {
  display: flex; justify-content: space-between;
  font-size: 12px; padding: 4px 0;
}
.iw-kv span { color: var(--text-dim); }
.iw-kv strong { color: var(--text); font-weight: 500; }

.iw-mono { font-family: var(--mono); font-size: 12px; color: var(--accent); word-break: break-all; }

.iw-error { color: var(--red); font-size: 12px; margin-top: 8px; min-height: 1.2em; }

/* ============================================
   IW · in-browser fund+sign flow (v3)
   ============================================ */
.iw-primary-btn {
  background: var(--accent); color: #000;
  border: none; padding: 12px 16px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  cursor: pointer;
  width: 100%;
  border-radius: 2px;
  transition: background 0.15s ease;
}
.iw-primary-btn:hover:not(:disabled) { background: #fff; }
.iw-primary-btn:disabled {
  background: var(--line-2);
  color: var(--text-muted);
  cursor: default;
}

/* Password unlock prompt (only shown when wallet is encrypted) */
.iw-pwd-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 8px 8px;
  gap: 12px;
}
.iw-pwd-icon { font-size: 32px; line-height: 1; }
.iw-pwd-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.iw-pwd-hint {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
  max-width: 360px;
}
.iw-pwd-input {
  width: 100%;
  max-width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  padding: 11px 14px;
  border-radius: 2px;
  outline: none;
}
.iw-pwd-input:focus { border-color: var(--accent); }
.iw-pwd-prompt .iw-primary-btn { max-width: 320px; }

/* Confirm screen */
.iw-confirm {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 12px 0 8px;
}
.iw-confirm-headline {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.iw-confirm-sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-top: -10px;
}
.iw-confirm-cost {
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.iw-kv-total {
  border-top: 1px solid var(--line);
  padding-top: 10px !important;
  margin-top: 6px;
}
.iw-kv-total strong { color: var(--accent) !important; font-size: 14px !important; }
.iw-balance-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  padding: 0 4px;
}
.iw-balance-label { color: var(--text-dim); letter-spacing: 0.02em; }
.iw-balance-row strong { color: var(--text); font-weight: 500; }
.iw-confirm-foot {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.02em;
  margin-top: 4px;
}

/* ============================================
   IW · gas selector (mint/deploy/transfer)
   ============================================ */
.iw-gas-picker {
  margin: 4px 0 8px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.iw-gas-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.iw-gas-head .iw-gas-sub {
  text-transform: none;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.iw-gas-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.iw-gas-btn {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s ease;
  text-align: center;
}
.iw-gas-btn:hover {
  border-color: var(--text-dim);
}
.iw-gas-btn-active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  font-weight: 600;
}
.iw-gas-custom-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.iw-gas-custom-wrap input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 2px;
}
.iw-gas-custom-hint {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
}
.iw-gas-foot {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 8px;
  letter-spacing: 0.01em;
}

/* Success state */
.iw-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 16px;
  gap: 10px;
}
.iw-success-mark {
  font-size: 38px;
  color: var(--green);
  width: 64px; height: 64px;
  border: 2px solid var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}
.iw-success-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.iw-success-sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
  max-width: 360px;
  margin-bottom: 10px;
}
.iw-success-kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 2px;
}
.iw-success-kv span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}
.iw-success-kv code { font-size: 11px; }



/* ============================================
   Buttons, scoped to the wallet modals.

   `.btn` and friends live in styles.css, which app.html never loads, so on
   zec.fun every button in this flow rendered as bare text — including
   "I've written it down" on the backup screen. Scoping copies here keeps
   the pages that DO load styles.css unaffected (same declarations, higher
   specificity, same result) while giving app.html working buttons.
   ============================================ */
.wallet-modal .btn,
.iw-modal .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 9px;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.wallet-modal .btn-primary,
.iw-modal .btn-primary {
  background: var(--grad-gold, linear-gradient(135deg, #ffd76a 0%, #f4b728 100%));
  color: var(--on-cyan, #1a1200);
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 4px 16px -4px var(--accent-glow, rgba(244,183,40,0.35));
}
.wallet-modal .btn-primary:hover:not(:disabled),
.iw-modal .btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #ffdd85 0%, #ffc94d 45%, #f4b728 100%);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 10px 30px -6px var(--accent-glow, rgba(244,183,40,0.35));
}
.wallet-modal .btn-primary:active:not(:disabled),
.iw-modal .btn-primary:active:not(:disabled) { transform: translateY(0); }
.wallet-modal .btn-primary:disabled,
.iw-modal .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.wallet-modal .btn-secondary,
.iw-modal .btn-secondary {
  background: var(--bg-card, #14141b);
  color: var(--text, #e8e8ef);
  border-color: var(--line-2, #2a2a36);
}
.wallet-modal .btn-secondary:hover,
.iw-modal .btn-secondary:hover {
  border-color: var(--accent, #f4b728);
  background: var(--bg-raised, #1b1b24);
  color: var(--accent-bright, #ffd76a);
  transform: translateY(-2px);
}
.wallet-modal .btn-block,
.iw-modal .btn-block { width: 100%; }