:root {
  color-scheme: light;
  background: var(--page-bg);
  --page-bg: #ffffff;
  --page-secondary: #fafafb;
  --panel-bg: #ffffff;
  --sidebar-bg: #f7f7f8;
  --control-bg: #ffffff;
  --composer-bg: #f6f6f7;
  --bubble-bg: #f0f1f3;
  --hover-bg: #eaeaec;
  --selected-bg: #e5e6e9;
  --chat-ink: #24262b;
  --secondary-ink: #44474e;
  --muted: #657387;
  --chat-muted: #777b84;
  --chat-border: #e0e3e8;
  --line: var(--chat-border);
  --control-border: #cbd2dc;
  --blue: #2855c7;
  --focus: #24735c;
  --primary-bg: #24735c;
  --primary-ink: #ffffff;
  --send-bg: #25292d;
  --send-ink: #ffffff;
  --private-bg: #fcf8ef;
  --private-border: #eee4cf;
  --private-ink: #7b6236;
  --code-bg: #f0f2f4;
  --badge-bg: #eaf0fc;
  --badge-ink: #325494;
  --active-bg: #e8f6ef;
  --active-ink: #247044;
  --paused-bg: #fff4dc;
  --paused-ink: #8a6418;
  --disabled-bg: #eef1f5;
  --disabled-ink: #657387;
  --danger: #9c2531;
  --danger-bg: #b42f42;
  --toast-bg: #203852;
  --toast-ink: #ffffff;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #202329;
  --page-secondary: #1d2026;
  --panel-bg: #252930;
  --sidebar-bg: #181b20;
  --control-bg: #1f232a;
  --composer-bg: #2b3038;
  --bubble-bg: #303640;
  --hover-bg: #2c313a;
  --selected-bg: #343b45;
  --chat-ink: #edf0f5;
  --secondary-ink: #d3d9e2;
  --muted: #adb6c4;
  --chat-muted: #adb6c4;
  --chat-border: #3b424d;
  --control-border: #515b6a;
  --blue: #9ac5ff;
  --focus: #75d0b5;
  --primary-bg: #62c5a5;
  --primary-ink: #102a22;
  --send-bg: #edf0f5;
  --send-ink: #202329;
  --private-bg: #302c23;
  --private-border: #5c5036;
  --private-ink: #e0c78f;
  --code-bg: #191d23;
  --badge-bg: #2b3c54;
  --badge-ink: #c0d8fc;
  --active-bg: #1e3e32;
  --active-ink: #a3e2bd;
  --paused-bg: #44371f;
  --paused-ink: #f1d392;
  --disabled-bg: #363d47;
  --disabled-ink: #c0c8d4;
  --danger: #ffadb4;
  --danger-bg: #b23949;
  --toast-bg: #dce9e5;
  --toast-ink: #192923;
  scrollbar-color: #626c7b #202329;
}

body, .workspace-main { background: var(--page-bg); color: var(--chat-ink); }
.workspace-page { background: var(--page-secondary); }
.chat-sidebar { background: var(--sidebar-bg); border-color: var(--chat-border); }
.chat-sidebar a { color: var(--secondary-ink); }
.chat-sidebar a:hover { background: var(--hover-bg); }
.chat-sidebar a.selected { background: var(--selected-bg); color: var(--chat-ink); }
.sidebar-caption, .conversation-link small, .sidebar-account small,
.read-only-note, .thinking,
.message-label, .from-user .message-label { color: var(--muted); }
.sidebar-bottom, .sidebar-account, .chat-topbar, .topic-card details,
.analysis-row, .checklist-item, .user-row, .project-row { border-color: var(--chat-border); }
.card, .modal { background: var(--panel-bg); color: var(--chat-ink); border-color: var(--chat-border); }
.modal-heading { border-color: var(--chat-border); }
.modal-body form > div { margin-bottom: 18px; }
.modal-body form > div > input, .modal-body form > div > textarea,
.modal-body form > div > select { margin-bottom: 0; }
.modal::backdrop { background: #11172299; }
.brand-mark, .chat-sidebar .brand-mark, .welcome-symbol, .assistant-symbol { background: #24735c; color: #ffffff; }
button { background: var(--panel-bg); color: var(--chat-ink); border-color: var(--chat-border); }
button:hover, .chat-topbar button:hover { background: var(--hover-bg); }
button.primary, .workspace button.primary { background: var(--primary-bg); color: var(--primary-ink); border-color: var(--primary-bg); }
button.primary:hover, .workspace button.primary:hover { filter: brightness(1.08); }
button.danger, .error { color: var(--danger); }
.modal button.danger { background: var(--danger-bg); color: #ffffff; border-color: var(--danger-bg); }
.modal button.danger:hover { filter: brightness(1.1); }
.chat-topbar button, .mobile-menu { background: var(--composer-bg); color: var(--chat-ink); }
input, textarea, select, .workspace-page input, .workspace-page textarea,
.workspace-page select, .chat-welcome select {
  background: var(--control-bg); color: var(--chat-ink); border-color: var(--control-border);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"] { accent-color: var(--primary-bg); }
.chat-composer { background: var(--composer-bg); border-color: var(--control-border); }
.chat-composer:focus-within { border-color: var(--focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 12%, transparent); }
.chat-composer textarea { background: transparent; color: var(--chat-ink); border: 0; }
.chat-composer .send-button { background: var(--send-bg); color: var(--send-ink); }
.chat-composer .send-button:hover { background: var(--primary-bg); color: var(--primary-ink); }
.chat-message.from-user { background: var(--bubble-bg); }
.chat-text code, .chat-text pre, .private-turn pre, .upload-help pre,
.private-box pre { background: var(--code-bg); color: var(--chat-ink); }
.private-turn, .private-box, .notice { background: var(--private-bg); border-color: var(--private-border); color: var(--private-ink); }
.private-turn summary { color: var(--private-ink); }
.analysis-row a { color: var(--chat-ink); }
.badge { background: var(--badge-bg); color: var(--badge-ink); }
.badge.private { background: var(--paused-bg); color: var(--paused-ink); }
.badge.status-active { background: var(--active-bg); color: var(--active-ink); }
.badge.status-paused { background: var(--paused-bg); color: var(--paused-ink); }
.badge.status-expired, .badge.status-missing { background: var(--disabled-bg); color: var(--disabled-ink); }
.admin-filters button.selected { background: var(--badge-bg); color: var(--badge-ink); border-color: var(--control-border); }
#toast { background: var(--toast-bg); color: var(--toast-ink); }
.token-issued { background: var(--panel-bg); border-color: var(--control-border); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.chat-composer textarea:focus-visible { outline: none; }
.login-heading { margin-bottom: 30px; }
.login-heading .brand { margin: 0; }
@media (max-width: 420px) {
  .login-heading .brand { font-size: 19px; gap: 8px; }
}