:root {
  color-scheme: light;
  --qs-surface: #fff;
  --qs-action: #2563eb;
  --qs-action-hover: #1d4ed8;
  --qs-danger-action: #b83939;
  --qs-success-action: #257a55;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --qs-bg: #0c1422;
  --qs-surface: #152238;
  --qs-soft: #1b2b43;
  --qs-text: #e7eef9;
  --qs-muted: #afbdd1;
  --qs-border: #354861;
  --qs-primary: #93b7ff;
  --qs-primary-dark: #adc9ff;
  --qs-primary-soft: #203858;
  --qs-sidebar: #0d192a;
  --qs-sidebar-muted: #b0bed1;
  --qs-warning: #f6ca7b;
  --qs-warning-soft: #3c3020;
  --qs-danger: #ffaca8;
  --qs-danger-soft: #42272e;
  --qs-success: #8bdeb0;
  --qs-success-soft: #1a3b31;
  --qs-shadow: 0 3px 18px rgba(0,0,0,.18);
}
.theme-toggle { white-space: nowrap; flex-shrink: 0; }
.theme-toggle[aria-pressed="true"] { border-color: var(--qs-primary); }
.topbar__actions { margin-left: auto; }
.auth-form-panel { position: relative; }
.auth-theme-control { position: absolute; top: 20px; right: 24px; }
.auth-form-panel { padding-top: 90px; padding-bottom: 60px; }
:root[data-theme="dark"] .topbar { background: #152238; }
:root[data-theme="dark"] :is(.mobile-workflow-nav, .modal-dialog, .auth-form-card) { background: var(--qs-surface); }
:root[data-theme="dark"] :is(input, select, textarea) { background-color: var(--qs-soft); border-color: var(--qs-border); }
:root[data-theme="dark"] :is(.legacy-frame, .auth-page) { background: var(--qs-bg); }
:root[data-theme="dark"] .legacy-frame-wrap { background: var(--qs-bg); }
:root[data-theme="dark"] .pipeline-board > section { background: var(--qs-soft); }
:root[data-theme="dark"] .pipeline-board h2 small { background: var(--qs-surface); }
:root[data-theme="dark"] .sales-filters :is(input,select) { color: var(--qs-text); }
:root[data-theme="dark"] .opportunity-card { color: var(--qs-text); }
:root[data-theme="dark"] :is(.settings-nav__item, .settings-nav__item strong, .form-field > span) { color: var(--qs-text); }
:root[data-theme="dark"] .button--secondary:hover { border-color: var(--qs-primary); }
/* Preserve the white lettering on filled actions; link/focus blue can be lighter. */
:root[data-theme="dark"] :is(.button--primary, .brand__mark, .avatar) { color: #fff; }
@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; }
  .topbar__actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .global-search { width: min(100%, 230px); }
  .auth-theme-control { top: 16px; right: 16px; }
  .auth-form-panel { padding-top: 82px; }
}