:root {
  color-scheme: light;
  --surface-soft: #fbfcf9;
  --surface-raised: #fcfdfb;
  --input-border: #dce1da;
  --button-bg: #32694d;
  --button-hover: #28583f;
  --button-text: #fff;
  --focus: #659b77;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eeeeee;
  --muted: #aaaaaa;
  --line: #2c2c2c;
  --paper: #111111;
  --bg: #000000;
  --green: #dedede;
  --green-soft: #242424;
  --red: #f4a799;
  --surface-soft: #181818;
  --surface-raised: #0a0a0a;
  --input-border: #383838;
  --button-bg: #e7e7e7;
  --button-hover: #ffffff;
  --button-text: #111111;
  --focus: #aaaaaa;
}

.brand-icon { display: block; flex: none; border-radius: 7px; }
.heading-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.security-card { max-width: 540px; margin: 50px auto; padding: 32px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.security-card h1 { font-size: 28px; }
.security-card h2 { font-size: 18px; margin: 24px 0 12px; }
.security-card p { line-height: 1.6; margin: 12px 0; }
.security-card input { width: 100%; display: block; margin: 8px 0 18px; padding: 12px; }
.security-card #totp-qr { display: block; padding: 10px; background: white; margin: 20px auto; }
.security-card pre { padding: 20px; background: var(--surface-soft); line-height: 1.8; user-select: all; }
.sessions-section { border-top: 1px solid var(--line); margin-top: 32px; padding-top: 6px; }
.sentry-form input { display: block; width: 100%; padding: 8px; margin: 10px 0; }
.paused-notice { padding: 12px 20px; margin-bottom: 16px; background: var(--green-soft); border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
@media (max-width: 600px) { .security-card { margin: 24px 16px; padding: 24px; } .topbar { height: auto; min-height: 74px; } .topbar-right { flex-wrap: wrap; justify-content: end; } }
.theme-switch { display: inline-flex; flex: none; gap: 3px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); }
.theme-switch button { border: 0; border-radius: 5px; padding: 6px 10px; background: transparent; color: var(--muted); font-size: 11px; line-height: 1.5; }
.theme-switch button[aria-pressed="true"] { background: var(--green-soft); color: var(--green); font-weight: 600; }
.theme-switch button:hover { color: var(--ink); }
.login-tools { position: absolute; top: 26px; right: 30px; }
.login-page { padding: 90px 20px 50px; background: var(--bg); }
.login-card { width: 400px; background: var(--paper); border-color: var(--line); padding: 36px 38px; }
.login-card h1 { text-align: center; font-size: 34px; font-weight: 550; letter-spacing: -1px; }
.login-card form { margin-top: 30px; }
.login-card input { background: var(--surface-soft); }
.topbar { background: var(--surface-raised); }
input, textarea, select { border-color: var(--input-border); }
.primary { background: var(--button-bg); color: var(--button-text); }
.primary:hover:not(:disabled) { background: var(--button-hover); }
.secondary { background: var(--paper); border-color: var(--input-border); color: var(--ink); }
.secondary:hover { background: var(--surface-soft); }
.connection-details > div { background: var(--paper); color: var(--ink); }
.filters select, .filters input, th { background: var(--surface-soft); }
.metric:last-child { background: var(--green-soft); }
.media-toggle { background: var(--surface-soft); }
textarea:focus { border-color: var(--focus); outline-color: var(--green-soft); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline-color: var(--focus); }

[data-theme="dark"] .brand b,
[data-theme="dark"] .eyebrow,
[data-theme="dark"] .private-label,
[data-theme="dark"] .metric > span,
[data-theme="dark"] .connection-bar,
[data-theme="dark"] .tabs button,
[data-theme="dark"] .text-button,
[data-theme="dark"] th,
[data-theme="dark"] .username,
[data-theme="dark"] .sources { color: var(--muted); }
[data-theme="dark"] .metric small,
[data-theme="dark"] .time,
[data-theme="dark"] .send-note,
[data-theme="dark"] .empty p,
[data-theme="dark"] .empty-foot,
[data-theme="dark"] .table-footer,
[data-theme="dark"] .workspace-footer { color: #999999; }
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder { color: #999999; }
[data-theme="dark"] .tabs button.active,
[data-theme="dark"] .telegram-link,
[data-theme="dark"] .media-toggle,
[data-theme="dark"] .workspace-footer a,
[data-theme="dark"] .text-button:hover,
[data-theme="dark"] .title-dot { color: var(--green); }
[data-theme="dark"] .badge { background: #262626; color: #bbbbbb; }
[data-theme="dark"] .badge.ready { background: #292929; color: #dddddd; }
[data-theme="dark"] .badge.sent,
[data-theme="dark"] .badge.answered { background: #232323; color: #cccccc; }
[data-theme="dark"] .badge.error,
[data-theme="dark"] .badge.uncertain { background: #452d27; color: #f0b7a4; }
[data-theme="dark"] .badge.generating { background: #3f3924; color: #dfcf99; }
[data-theme="dark"] .edited-label { color: #ddc082; }
[data-theme="dark"] .case-error { color: var(--red); }
[data-theme="dark"] .empty-icon { background: var(--green-soft); border-color: var(--line); color: var(--green); }
[data-theme="dark"] .notice { background: #3d3522; color: #e2ce91; }
[data-theme="dark"] .toast { background: #e7e7e7; color: #171717; }
[data-theme="dark"] .dot { background: #777777; }
[data-theme="dark"] .dot.on { background: #dddddd; }

@media (max-width: 800px) { .topbar .private-label { display: none; } }
@media (max-width: 600px) {
  .topbar-right { gap: 10px; }
  .theme-switch button { padding: 6px 8px; font-size: 10px; }
  .login-tools { top: 20px; right: 20px; }
  .login-card { padding: 30px 26px; }
}
@media (max-width: 380px) {
  .topbar { padding: 0 12px; }
  .topbar .brand { gap: 7px; font-size: 16px; }
  .topbar .brand-icon { width: 28px; height: 28px; }
  .topbar-right { gap: 5px; }
  .topbar .text-button { font-size: 10px; }
}