:root {
  color-scheme: light;
  --ws-bg: #f5f3ef; --ws-surface: #fcfbf9; --ws-text: #282d30; --ws-muted: #5f666c;
  --ws-line: #c9c8c5; --ws-work: #7460aa; --ws-personal: #985329; --ws-overlap: #397b82;
  --ws-selected: #e5dcf8; --ws-selected-text: #352454; --ws-track: #dbd9d5;
  --ws-alert: #a84231; --ws-focus: #7864af;
  --bg-color: var(--ws-bg); --surface-color: var(--ws-surface); --text-primary: var(--ws-text); --text-secondary: var(--ws-muted); --border-color: var(--ws-line);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ws-bg: #191d1e; --ws-surface: #222728; --ws-text: #f3eee7; --ws-muted: #bdc0be;
  --ws-line: #515959; --ws-work: #b19de9; --ws-personal: #ffb184; --ws-overlap: #7bc1c9;
  --ws-selected: #b5a0ee; --ws-selected-text: #201831; --ws-track: #394141;
  --ws-alert: #ffb3a7; --ws-focus: #c8b6ff;
}
@media(prefers-color-scheme:dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --ws-bg: #191d1e; --ws-surface: #222728; --ws-text: #f3eee7; --ws-muted: #bdc0be;
    --ws-line: #515959; --ws-work: #b19de9; --ws-personal: #ffb184; --ws-overlap: #7bc1c9;
    --ws-selected: #b5a0ee; --ws-selected-text: #201831; --ws-track: #394141;
    --ws-alert: #ffb3a7; --ws-focus: #c8b6ff;
  }
}
body { background-color: var(--ws-bg); color: var(--ws-text); }
:focus-visible { outline: 3px solid var(--ws-focus); outline-offset: 4px; }
.header, .clock-section, .card, .modal-content { background-color: var(--ws-surface); color: var(--ws-text); }
.header, .clock-section, .card { border-color: var(--ws-line) !important; }
.main-navigation { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.main-navigation a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ws-muted); font-size: 14px; text-decoration: none; }
.main-navigation a[aria-current="page"] { color: var(--ws-text); border-bottom: 2px solid var(--ws-work); font-weight: 700; }
.theme-switch { display: inline-flex; align-items: center; text-decoration: none; min-height: 40px; padding: 7px 12px; border: 1px solid var(--ws-line); background: var(--ws-surface); color: var(--ws-text); font: inherit; cursor: pointer; }
.modal-content input, .modal-content select, .modal-content textarea, .inline-project-editor input { background: var(--ws-surface); color: var(--ws-text); border-color: var(--ws-line); }
.projects-content label, .billing-content label, .projects-help, .project-widget p, .clock-stamps, .daily-work-totals { color: var(--ws-muted); }
.stamp-line time, .daily-work-totals strong, .project-month-summary > strong { color: var(--ws-text); }
.project-disclosure > summary { color: var(--ws-text); }
.project-disclosure > summary::after { color: var(--ws-muted); }
@media(max-width:768px) {
  .main-navigation { justify-content: center; gap: 18px; order: 3; width: 100%; }
  .header-content { flex-wrap: wrap; }
}
/* Header utilities must not inherit the full-width user-name rule. */
.header-content { flex-wrap: wrap; gap: 16px 24px; }
.user-info { flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.user-info > span { white-space: nowrap; }
.user-info .theme-switch { white-space: nowrap; gap: 4px; }
.user-info .theme-switch span { width: auto; margin: 0; }
@media(max-width:768px) {
  .header-content { gap: 6px; }
  .user-info { justify-content: center; gap: 5px; }
  .user-info .logout-btn, .user-info .theme-switch { font-size: 12px; min-height: 40px; padding: 7px 9px; margin-right: 0 !important; }
  .main-navigation { gap: 20px; }
}

.login-page .container { background: var(--ws-surface); }
.login-page .login-btn { background: var(--ws-selected); color: var(--ws-selected-text); }
.login-page input:focus, .login-page .register-btn:hover { background: var(--ws-surface); color: var(--ws-text); }