:root { color-scheme: light; }
.appearance-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; }
.appearance-card p { min-height: 0; margin-bottom: 0; }
.appearance-card .field { flex: 0 0 190px; margin-top: 0; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e3eff5;
  --muted: #a1b8c7;
  --line: #345060;
  --paper: #0f1d28;
  --white: #172a38;
  --blue: #7dd7ee;
  --blue-dark: #9ae2f2;
  --mint: #1a3c33;
  --mint-ink: #9ee0c9;
  --amber-ink: #e7bd72;
  --done: #263642;
  --danger: #ffb1aa;
  --shadow: 0 18px 42px rgba(0, 0, 0, .18);
  --pickup-bg: #1b3b30;
  --pickup-line: #426c57;
  --reception-bg: #3b3424;
  --reception-line: #78653c;
  --delivery-bg: #1c374a;
  --delivery-line: #426b86;
  --surface-soft: #1c3140;
  --surface-input: #112532;
  --surface-hover: #284657;
  --surface-blocked: #3d292e;
  --blocked-line: #79515a;
  --button-bg: #176f88;
  --button-hover: #1c819c;
  --button-text: #ffffff;
  --on-accent: #112532;
  --pickup-text: #b1e3c3;
  --reception-text: #f6d996;
  --delivery-text: #b0def7;
  --scrim: #020a12bd;
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .tabs { border-color: var(--line); }
html[data-theme="dark"] .brand-mark { background: var(--surface-hover); color: var(--ink); }
html[data-theme="dark"] .role-badge { background: var(--surface-soft); }
html[data-theme="dark"] .chip,
html[data-theme="dark"] .slot,
html[data-theme="dark"] .secondary-button,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .modal-actions { background: var(--white); }
html[data-theme="dark"] .chip.active { background: var(--surface-hover); color: var(--ink); border-color: var(--blue); }
html[data-theme="dark"] .date-controls input,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea { background: var(--surface-input); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--muted); opacity: .85; }
html[data-theme="dark"] .metric,
html[data-theme="dark"] .staff-row,
html[data-theme="dark"] .admin-card,
html[data-theme="dark"] .result { background: var(--surface-soft); border-color: var(--line); }
html[data-theme="dark"] .extra-item { background: var(--surface-soft); border-color: var(--delivery-line); }
html[data-theme="dark"] .primary-button { background: var(--button-bg); border-color: var(--button-bg); color: var(--button-text); }
html[data-theme="dark"] .primary-button:hover { background: var(--button-hover); }
html[data-theme="dark"] .secondary-button:hover { background: var(--surface-hover); }
html[data-theme="dark"] .danger-button { background: var(--surface-blocked); border-color: var(--blocked-line); }
html[data-theme="dark"] .modal-backdrop { background: var(--scrim); }
html[data-theme="dark"] .toast { background: var(--surface-hover); color: var(--ink); border: 1px solid var(--line); }
html[data-theme="dark"] .unread-dot { box-shadow: 0 0 0 2px var(--white); }
html[data-theme="dark"] .notification-track { background: var(--line); }
html[data-theme="dark"] .staff-square.selected { color: var(--on-accent); }
html[data-theme="dark"] .priority-mark,
html[data-theme="dark"] .priority-inline { color: var(--on-accent); }
html[data-theme="dark"] .slot.busy { background: var(--pickup-bg); border-color: var(--pickup-line); }
html[data-theme="dark"] .slot.busy .slot-state { color: var(--pickup-text); }
html[data-theme="dark"] .slot.reception { background: var(--reception-bg); border-color: var(--reception-line); }
html[data-theme="dark"] .slot.reception .slot-state { color: var(--reception-text); }
html[data-theme="dark"] .slot.delivery { background: var(--delivery-bg); border-color: var(--delivery-line); }
html[data-theme="dark"] .slot.delivery .slot-state { color: var(--delivery-text); }
html[data-theme="dark"] .slot.done { background: var(--done); border-color: var(--line); }
html[data-theme="dark"] .slot.blocked { background: var(--surface-blocked); border-color: var(--blocked-line); }

@media (max-width: 420px) {
  .appearance-card { flex-direction: column; align-items: stretch; gap: 16px; }
  .appearance-card .field { flex-basis: auto; }
}