/* Dark mode. Light surfaces use --card, so this mostly retints the shared tokens. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1116;
  --bg-alt: #151a22;
  --ink: #f2f4f7;
  --muted: #a8b0bd;
  --line: #2c3444;
  --card: #1b2230;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 16px 36px -16px rgba(0,0,0,.65);
  --ok: #34d399;
  --ok-bg: #064e3b;
}
html[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
html[data-theme="dark"] .nav,
html[data-theme="dark"] .app-page .nav { background: rgba(14,17,22,.92); }
html[data-theme="dark"] .tabbar { background: rgba(14,17,22,.96); }
html[data-theme="dark"] .logo-img { filter: invert(1); }
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .app-content label.btn { background: #f4f6f8; color: #0e1116; }
html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .app-content label.btn:hover { background: #e5e7eb; color: #0e1116; }
html[data-theme="dark"] .app-content label.btn-outline { background: var(--card); color: var(--ink); }
html[data-theme="dark"] .msg { background: #1e2430; color: var(--ink); }
html[data-theme="dark"] .msg-success { background: var(--ok-bg); color: #a7f3d0; border-color: #065f46; }
html[data-theme="dark"] .status-review { background: #1e1b4b; color: #c7d2fe; }
html[data-theme="dark"] .status-inactive { background: #3f1d1d; color: #fecaca; }
html[data-theme="dark"] .status-pending { background: var(--bg-alt); color: var(--muted); }
html[data-theme="dark"] .msg-info { background: #1e293b; color: #e2e8f0; border-color: #334155; }
html[data-theme="dark"] .fiat-soon { background: #171c2c; border-color: #312e81; }
html[data-theme="dark"] .fiat-soon .chip { background: #1e1b4b; color: #c7d2fe; }
html[data-theme="dark"] .account-note { background: #3b2f12; color: #fde68a; border-color: #92400e; }
html[data-theme="dark"] .account-dialog .pd-x:hover { background: #2c3444; }
html[data-theme="dark"] .msg-warning { background: #3b2f12; color: #fde68a; border-color: #92400e; }
html[data-theme="dark"] .msg-error { background: #3f1d1d; color: #fecaca; border-color: #7f1d1d; }
html[data-theme="dark"] .safety { background: linear-gradient(180deg, var(--bg) 0%, #1c1416 100%); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #8b93a1; }
html[data-theme="dark"] .logo-mark,
html[data-theme="dark"] .wallet-ico,
html[data-theme="dark"] .mini-steps li > span { background: #f4f6f8; color: #0e1116; }
html[data-theme="dark"] .data-table thead th { background: #151a22; }
html[data-theme="dark"] .data-table tbody tr:hover td { background: #222a3a; }
html[data-theme="dark"] .dropzone:hover,
html[data-theme="dark"] .dropzone.is-over,
html[data-theme="dark"] .demo-drop:hover,
html[data-theme="dark"] .demo-drop:focus-visible,
html[data-theme="dark"] .demo-drop.is-over,
html[data-theme="dark"] .frow.is-edited,
html[data-theme="dark"] .req-card,
html[data-theme="dark"] .guide-menu button:hover,
html[data-theme="dark"] .guide-menu button:focus-visible { background: #243049; color: var(--ink); }
html[data-theme="dark"] .payee-row { background: rgba(255,255,255,.06); }
/* These panels keep a light fill in dark mode. Body text uses --ink, which is light, so it has to be set back to a dark color. */
html[data-theme="dark"] .pd-payee.is-unlisted,
html[data-theme="dark"] .frow.needs-review { color: #78350f; }
html[data-theme="dark"] .pd-payee.is-new_address,
html[data-theme="dark"] .pd-payee.is-other_payee,
html[data-theme="dark"] .pd-payee.is-lookalike,
html[data-theme="dark"] .pd-dust.is-warn,
html[data-theme="dark"] .check-finding,
html[data-theme="dark"] .ben-warning { color: #7f1d1d; }
html[data-theme="dark"] .pd-payee.is-unlisted .btn-outline { background: #fff; color: #78350f; border-color: #d97706; }
html[data-theme="dark"] .pd-payee.is-new_address .btn-outline,
html[data-theme="dark"] .pd-payee.is-other_payee .btn-outline,
html[data-theme="dark"] .pd-payee.is-lookalike .btn-outline { background: #fff; color: #7f1d1d; border-color: #dc2626; }
html[data-theme="dark"] .is-loading .skel {
  background: linear-gradient(90deg, #1b2230 25%, #2a3344 37%, #1b2230 63%);
  background-size: 400% 100%;
}
html[data-theme="dark"] .cx-tile { background: var(--card); }

.nav-cta { align-items: center; }
.theme-toggle {
  width: 40px; height: 40px; display: grid; place-items: center; flex: none;
  border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  cursor: pointer; padding: 0;
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Brand indigo sits too close to the dark card. A light indigo ring stays visible there. */
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] select:focus-visible,
html[data-theme="dark"] textarea:focus-visible,
html[data-theme="dark"] .pay-dialog button:focus-visible,
html[data-theme="dark"] .pay-dialog a:focus-visible { outline-color: #c7d2fe; }
.theme-toggle svg { display: block; }
html:not([data-theme="dark"]) .theme-sun { display: none; }
html[data-theme="dark"] .theme-moon { display: none; }
.auth-theme { position: fixed; top: 16px; right: 16px; z-index: 40; }