/* Theme overrides are separate from layout, so both themes share the same UI. */
:root { color-scheme: light; }
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-size: 11px;
}
.theme-toggle > span:first-child { font-size: 17px; line-height: 1; }
.theme-toggle:hover { border-color: #ac555a; }
.login-form-wrap { position: relative; }
.login-theme { position: absolute; top: 26px; right: 30px; }
#password-form { margin-top: 28px; }
#password-form > p { font-size: 12px; margin: 10px 0 24px; }
.form-panel hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }

:root[data-theme="dark"] {
  color-scheme: dark;
  color: #e4e8ee;
  background: #101317;
  --ink: #e4e8ee;
  --muted: #a1aab7;
  --border: #303640;
  --paper: #1b2027;
  --accent: #e34249;
}
[data-theme="dark"] .topbar,
[data-theme="dark"] .panel,
[data-theme="dark"] .stat,
[data-theme="dark"] .module-card,
[data-theme="dark"] .login,
[data-theme="dark"] dialog { background: #1b2027; border-color: #303640; }
[data-theme="dark"] .sidebar { background: #14171c; border-color: #303640; }
[data-theme="dark"] .login-story { background: #121519; }
[data-theme="dark"] .breadcrumb b,
[data-theme="dark"] .module-card button { color: #d3dae3; }
[data-theme="dark"] .heading p,
[data-theme="dark"] .panel-head p,
[data-theme="dark"] .panel-head button,
[data-theme="dark"] .module-info p,
[data-theme="dark"] .module-card p,
[data-theme="dark"] .stat-top,
[data-theme="dark"] .stat small,
[data-theme="dark"] .check-item p,
[data-theme="dark"] .empty,
[data-theme="dark"] .field small,
[data-theme="dark"] .setup-step p,
[data-theme="dark"] .login-form > p,
[data-theme="dark"] .login-foot,
[data-theme="dark"] .activity-item time,
[data-theme="dark"] .footer,
[data-theme="dark"] .text-button { color: #a3adba; }
[data-theme="dark"] .heading .eyebrow,
[data-theme="dark"] .login-form .eyebrow { color: #ed8c92; }
[data-theme="dark"] .pill,
[data-theme="dark"] .button,
[data-theme="dark"] .search,
[data-theme="dark"] .field input:not([type="checkbox"]),
[data-theme="dark"] .field textarea,
[data-theme="dark"] .field select {
  background: #15191f;
  border-color: #3b4350;
  color: #dbe2eb;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #8994a4; }
[data-theme="dark"] .button:hover { background: #292f38; }
[data-theme="dark"] .button.primary { background: #d9343d; border-color: #e54d55; color: #fff; }
[data-theme="dark"] .button.primary:hover { background: #b82731; }
[data-theme="dark"] .button.dark { background: #303844; color: #fff; }
[data-theme="dark"] .panel-head,
[data-theme="dark"] .module-row,
[data-theme="dark"] .check-item,
[data-theme="dark"] .activity-item,
[data-theme="dark"] .module-card button,
[data-theme="dark"] .dialog-head,
[data-theme="dark"] .check-field,
[data-theme="dark"] .setup-step,
[data-theme="dark"] .login-foot { border-color: #303640; }
[data-theme="dark"] .module-icon,
[data-theme="dark"] .avatar,
[data-theme="dark"] .tag,
[data-theme="dark"] .setup-step::before,
[data-theme="dark"] .setup-step code { background: #2a313b; border-color: #3a424e; color: #bcc7d5; }
[data-theme="dark"] .tag.pending { background: #3c3020; color: #e4bd7b; }
[data-theme="dark"] .tag.on { background: #203a2e; color: #8bd1a9; }
[data-theme="dark"] .notice { background: #30291d; border-color: #55472e; color: #dfc18e; }
[data-theme="dark"] .notice button { color: #efca8e; }
[data-theme="dark"] .notice-symbol { border-color: #b2935b; }
[data-theme="dark"] .hint-box { background: #232a33; border-color: #394350; color: #c0cad7; }
[data-theme="dark"] .preview-bar { background: #342126; border-color: #593038; color: #e0a9af; }
[data-theme="dark"] .filter { color: #aab5c4; }
[data-theme="dark"] .filter.active { background: #2c3440; border-color: #465363; color: #f4f7fb; }
[data-theme="dark"] .form-error { color: #ff9da4; }
[data-theme="dark"] .check-number { border-color: #536071; color: #bbc8d9; }
[data-theme="dark"] .hero-card { border: 1px solid #3a424e; background: #232831; }
[data-theme="dark"] .login-foot a { color: #bac5d6; }
[data-theme="dark"] dialog::backdrop { background: #020407ba; }
@media (max-width: 640px) {
  .theme-toggle { padding: 6px 9px; }
  .top-actions .theme-toggle > span:last-child { display: none; }
  .login-theme { top: 16px; right: 20px; }
  .login-form-wrap { padding-top: 70px; }
}