:root[data-theme="dark"] {
  --ink: #f0eefb;
  --muted: #aaa8be;
  --forest: #786de0;
  --green: #a79cff;
  --mint: #29264a;
  --cream: #10111a;
  --paper: #191b29;
  --line: #35374a;
  --gold: #d4b478;
  --blue: #86b5bd;
  --danger: #ef8797;
  --coral: #b8a8d0;
  --cyan: #91c2ba;
  --shadow: 0 22px 65px rgba(0, 0, 0, .3);
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 8% 18%, rgba(124, 106, 78, .14), transparent 28rem),
    radial-gradient(circle at 92% 8%, rgba(92, 118, 135, .13), transparent 31rem),
    linear-gradient(145deg, #10111a 0%, #12131d 48%, #0d0f17 100%);
}

:root[data-theme="dark"] .ambient-one { background: linear-gradient(145deg, rgba(91, 122, 132, .11), rgba(104, 91, 160, .13)); }
:root[data-theme="dark"] .ambient-two { background: rgba(150, 118, 75, .09); }
:root[data-theme="dark"] .brand b,
:root[data-theme="dark"] .eyebrow,
:root[data-theme="dark"] .hero-copy h1 em,
:root[data-theme="dark"] .text-button,
:root[data-theme="dark"] .add-device-link { color: var(--green); }
:root[data-theme="dark"] .hero-copy > p { color: #d4d2df; }
:root[data-theme="dark"] .brand-mark { background: linear-gradient(145deg, #403b82, #6b5fb3); }
:root[data-theme="dark"] .trust-row span { border-color: #3d3a5c; background: rgba(33, 34, 50, .7); color: #c1bfd0; }
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .auth-card { border-color: rgba(131, 122, 184, .25); background: rgba(25, 27, 41, .9); }
:root[data-theme="dark"] .auth-card::before { background: #8b7fe2; }
:root[data-theme="dark"] .auth-tabs,
:root[data-theme="dark"] .balance-chart-ranges { background: #232534; }
:root[data-theme="dark"] .auth-tabs { border-color: #44415f; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); }
:root[data-theme="dark"] .auth-tab { color: #c0becd; }
:root[data-theme="dark"] .auth-tab:hover:not(.active) { background: #2d2f41; color: #f0eefb; }
:root[data-theme="dark"] .auth-tab.active {
  background: linear-gradient(110deg, #5145bd, #7062e0);
  color: #fff;
  box-shadow: 0 6px 17px rgba(68, 53, 190, .42);
}
:root[data-theme="dark"] .auth-tab:focus-visible { outline-color: rgba(179, 169, 255, .62); }
:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select,
:root[data-theme="dark"] .secondary-button,
:root[data-theme="dark"] .allocation-presets button { border-color: var(--line); background: #202230; color: var(--ink); }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color: #77798c; }
:root[data-theme="dark"] .primary-button { background: linear-gradient(110deg, #564ba4, #786bd1); }
:root[data-theme="dark"] .primary-button:hover { background: linear-gradient(110deg, #6256b7, #8476df); }
:root[data-theme="dark"] #login-form .primary-button {
  border-color: #a89eff;
  background: linear-gradient(110deg, #5145bd, #7062e0);
  color: #fff;
  box-shadow: 0 14px 34px rgba(68, 53, 190, .42), 0 0 0 3px rgba(167, 156, 255, .14);
}
:root[data-theme="dark"] #login-form .primary-button:hover {
  background: linear-gradient(110deg, #5c50cb, #7d6feb);
  box-shadow: 0 16px 38px rgba(68, 53, 190, .5), 0 0 0 3px rgba(167, 156, 255, .2);
}
:root[data-theme="dark"] #login-form .primary-button:focus-visible { outline-color: rgba(179, 169, 255, .62); }
:root[data-theme="dark"] #logout-button { border-color: #5d587d; background: rgba(34, 35, 52, .85); color: #c1b9ff; }
:root[data-theme="dark"] #logout-button:hover { background: #292a3c; }
:root[data-theme="dark"] .nav-item {
  border: 1px solid transparent;
  color: #cbc9d6;
  transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
}
:root[data-theme="dark"] .nav-item:hover:not(.active) {
  border-color: #3f4157;
  background: #252736;
  color: #fff;
}
:root[data-theme="dark"] .nav-item.active {
  border-color: #968af0;
  background: linear-gradient(110deg, #493eaa, #6859d5);
  color: #fff;
  box-shadow: 0 7px 18px rgba(64, 49, 176, .32);
}
:root[data-theme="dark"] .nav-item.active span { color: #fff; }
:root[data-theme="dark"] .nav-item:focus-visible {
  outline: 3px solid rgba(179, 169, 255, .58);
  outline-offset: 2px;
}
:root[data-theme="dark"] .safety-card,
:root[data-theme="dark"] .user-actions button { background: #22242f; }
:root[data-theme="dark"] .phase-pill,
:root[data-theme="dark"] .total-badge { border-color: #514d70; color: #b9afff; background: rgba(49, 46, 78, .72); }
:root[data-theme="dark"] .readiness { background: linear-gradient(130deg, rgba(31, 32, 48, .95), rgba(37, 34, 61, .9)), var(--paper); }
:root[data-theme="dark"] .metric-icon.green,
:root[data-theme="dark"] .readiness-list > div > span { color: #bcb4ff; background: #2d2948; }
:root[data-theme="dark"] .metric-icon.gold { color: #dfc28e; background: #383126; }
:root[data-theme="dark"] .metric-icon.blue { color: #9dc5cb; background: #23363a; }
:root[data-theme="dark"] .passkey-row,
:root[data-theme="dark"] .enrollment-code-panel { border-color: var(--line); background: #202230; }
:root[data-theme="dark"] .enrollment-code-panel strong { color: var(--green); }
:root[data-theme="dark"] .usage-track,
:root[data-theme="dark"] .status-label,
:root[data-theme="dark"] .action-label,
:root[data-theme="dark"] .action-label.hold,
:root[data-theme="dark"] .action-label.no-action { background: #292b38; color: #bbb9c9; }
:root[data-theme="dark"] .action-label.sell,
:root[data-theme="dark"] .status-label.failed,
:root[data-theme="dark"] .status-label.disabled,
:root[data-theme="dark"] .status-label.rejected { background: #452830; color: var(--danger); }
:root[data-theme="dark"] .status-label.active,
:root[data-theme="dark"] .status-label.completed { background: #263d38; color: #8ed5c3; }
:root[data-theme="dark"] .status-label.pending { background: #403623; color: #e0bf7d; }
:root[data-theme="dark"] .analysis-history-row { border-color: var(--line); }
:root[data-theme="dark"] .analysis-history-row:hover { border-color: #716b9e; }
:root[data-theme="dark"] .balance-chart-grid { stroke: #343747; }
:root[data-theme="dark"] .activity-dot { box-shadow: 0 0 0 4px #25383d; }
:root[data-theme="dark"] .activity-dot.risk_rejection,
:root[data-theme="dark"] .activity-dot.analysis_failed { box-shadow: 0 0 0 4px #41272e; }
:root[data-theme="dark"] .allocation-control input[type="range"] { background: linear-gradient(90deg, var(--slider-color) 0 var(--range-progress, 50%), #343644 var(--range-progress, 50%) 100%); }
:root[data-theme="dark"] .allocation-warning { border-color: #7d6744; background: #332b1f; color: #e3c58f; }
:root[data-theme="dark"] .allocation-warning small { color: #c4aa79; }
:root[data-theme="dark"] .how-step-number { color: #555767; }
:root[data-theme="dark"] .how-step-copy li { color: #cbc9d6; }
:root[data-theme="dark"] .how-note,
:root[data-theme="dark"] .guardrail-grid span { background: #21342f; color: #a9d7c8; }
:root[data-theme="dark"] .danger-note { background: #3b242a; color: #f0a2ae; }
:root[data-theme="dark"] .how-chip-grid span,
:root[data-theme="dark"] .record-grid span,
:root[data-theme="dark"] .action-card { background: #202230; color: var(--ink); }
:root[data-theme="dark"] .confidence-card { border-color: #6a583c; background: #30291f; }
:root[data-theme="dark"] .confidence-card > strong,
:root[data-theme="dark"] .confidence-card > span { color: #e4c58d; }
:root[data-theme="dark"] .confidence-card > span { background: #3b3225; }
:root[data-theme="dark"] .example-callout { border-color: #3f514c; background: #202d2a; }
:root[data-theme="dark"] .example-callout p { color: #c4d2ce; }
:root[data-theme="dark"] .how-summary { background: linear-gradient(135deg, #302b22, #202e2a); }
:root[data-theme="dark"] .message.error { background: #44262d; color: #f0a0ab; }
:root[data-theme="dark"] .message.success { background: #213a33; color: #92d5c1; }

@media (max-width: 850px) {
  :root[data-theme="dark"] .sidebar { border-bottom-color: #333247; background: rgba(16, 17, 26, .92); }
  :root[data-theme="dark"] .mobile-nav-toggle,
  :root[data-theme="dark"] .sidebar nav,
  :root[data-theme="dark"] .nav-item { border-color: #38394d; background: rgba(29, 30, 45, .96); }
  :root[data-theme="dark"] .mobile-nav-toggle strong { color: var(--ink); }
}

@media (max-width: 560px) {
  :root[data-theme="dark"] .topbar { background: rgba(16, 17, 26, .92); }
}