html.dark-mode {
  --bg: #131620;
  --bg-card: #1b1f2c;
  --surface: #171a26;
  --white: #1b1f2c;
  --text: #edeef2;
  --text-2: #b9bccb;
  --text-3: #7a7f95;
  --border: #2a2e3e;
  --border-dark: #383d50;
  --green-bg: #0d2418;
  --green: #3ecf8e;
  --amber-bg: #241d08;
  --amber: #d4a234;
  --red-bg: #2a0e12;
  --navy-pale: #16203a;
  --gold-pale: #201a0c;
  --chat-bg: #131620;
  --composer-bg: #1b1f2c;
  --composer-border: #383d50;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.2);
  --shadow: 0 4px 16px rgba(0,0,0,.4), 0 1px 4px rgba(0,0,0,.2);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.3);
}

html.dark-mode body { background: var(--bg); }

html.dark-mode .sidebar,
html.dark-mode .topbar,
html.dark-mode .modal,
html.dark-mode .modal-header,
html.dark-mode .modal-footer { background: var(--bg-card); }

html.dark-mode .login-right,
html.dark-mode .pending-card { background: var(--bg-card); }

html.dark-mode #login-screen { background: #0c0e16; }

html.dark-mode .card { background: var(--bg-card); border-color: var(--border); }

html.dark-mode .field input,
html.dark-mode .field select,
html.dark-mode .field textarea,
html.dark-mode .search-input,
html.dark-mode .filter-select {
  background: var(--bg);
  border-color: var(--border);
  color: var(--text);
}
html.dark-mode .field input:focus,
html.dark-mode .field select:focus,
html.dark-mode .field textarea:focus,
html.dark-mode .search-input:focus,
html.dark-mode .filter-select:focus {
  border-color: var(--navy-light);
  box-shadow: 0 0 0 3px rgba(61,81,136,.2);
}

html.dark-mode .btn-secondary {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border-dark);
}
html.dark-mode .btn-secondary:hover:not(:disabled) { background: var(--surface); }

html.dark-mode .btn-danger {
  background: var(--bg);
  color: #f0a4ac;
  border-color: #4a1820;
}
html.dark-mode .btn-danger:hover:not(:disabled) { background: var(--red-bg); }

html.dark-mode .btn-ghost:hover:not(:disabled) { background: var(--surface); }

html.dark-mode thead tr { background: var(--surface); }
html.dark-mode tbody tr:hover { background: var(--surface); }

html.dark-mode .stat-card { background: var(--bg-card); border-color: var(--border); }

html.dark-mode .toast { background: #edeef2; color: #131620; }
html.dark-mode .toast.success { background: #0d2418; color: #a7f3d0; border-left-color: #3ecf8e; }
html.dark-mode .toast.error { background: #2a0e12; color: #fca5a5; border-left-color: var(--crimson); }
html.dark-mode .toast.info { background: #0f1626; color: #a9c1ee; border-left-color: #6b8fd6; }

html.dark-mode .nav-item:hover { background: var(--surface); }
html.dark-mode .nav-item.active { background: #16203a; color: #a9c1ee; }
html.dark-mode .user-card:hover { background: var(--surface); }

html.dark-mode .modal-backdrop { background: rgba(0,0,0,.7); }

html.dark-mode .chunk-card { background: var(--bg-card); border-color: var(--border); }

/* Chat page */
html.dark-mode .chat-topbar { background: var(--bg-card); border-color: var(--border); }
html.dark-mode .msg-assistant .msg-bubble { color: var(--text); }
html.dark-mode .msg-user .msg-bubble { background: var(--navy-light); }
html.dark-mode .citation-chip { background: var(--surface); border-color: var(--border); color: var(--text-2); }
html.dark-mode .citation-chip:hover { border-color: var(--navy-light); }
html.dark-mode .composer-wrap { background: linear-gradient(0deg, var(--chat-bg) 55%, transparent); }
html.dark-mode .composer-box { background: var(--composer-bg); border-color: var(--composer-border); }
html.dark-mode .composer-box:focus-within { border-color: var(--navy-light); box-shadow: 0 0 0 3px rgba(61,81,136,.25); }
html.dark-mode .prompt-chip { background: var(--surface); border-color: var(--border); color: var(--text-2); }
html.dark-mode .prompt-chip:hover { border-color: var(--navy-light); color: var(--text); }