:root {
  color-scheme: light;
  --overlay: rgba(15, 23, 42, 0.45);
  --hover-border: #cbd0d8;
  --panel-head-bg: linear-gradient(to bottom, #fafbfc, var(--surface));
  --code-block-bg: #f4f5f7;
  --code-block-text: #1a1d24;
  --danger: #b91c1c;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --danger-hover-bg: #fee2e2;
  --danger-hover-border: #fca5a5;
  --success: #15803d;
  --success-bg: rgba(21, 128, 61, 0.08);
  --snippet-bg: #f8f9fb;
  --table-stripe: #fafbfc;
  --tip-bg: #fafbfc;
  --menu-active-bg: #eff6ff;
  --menu-active-border: #bfdbfe;
  --pager-hover-bg: #eff6ff;
  --pager-hover-border: #bfdbfe;
  --input-bg: var(--surface);
  --on-accent: #fff;
  --badge-yes-bg: #ecfdf5;
  --badge-yes-text: #047857;
  --badge-yes-border: #a7f3d0;
  --handle-border: #fff;
  --focus-ring: rgba(37, 99, 235, 0.15);
  --chart-grid: #e8eaef;
  --chart-axis: #cbd0d8;
  --chart-text: #5c6370;
  --chart-pv: #2563eb;
  --chart-uv: #94a3b8;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1419;
  --surface: #1a1f26;
  --surface-2: #242b33;
  --border: #2d3640;
  --text: #e8eaed;
  --muted: #9aa0a6;
  --accent: #5b9cf6;
  --accent-hover: #7ab3ff;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  --overlay: rgba(0, 0, 0, 0.62);
  --hover-border: #3d4654;
  --panel-head-bg: linear-gradient(to bottom, #222830, #1a1f26);
  --code-block-bg: #0d1117;
  --code-block-text: #e6edf3;
  --danger: #f87171;
  --danger-bg: #3f1d24;
  --danger-border: #7f1d1d;
  --danger-hover-bg: #4a2028;
  --danger-hover-border: #991b1b;
  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.12);
  --snippet-bg: #242b33;
  --table-stripe: #1e242c;
  --tip-bg: #1e242c;
  --menu-active-bg: #1e3a5f;
  --menu-active-border: #2563eb;
  --pager-hover-bg: #1e3a5f;
  --pager-hover-border: #3b6ec9;
  --input-bg: #141a21;
  --on-accent: #fff;
  --badge-yes-bg: rgba(74, 222, 128, 0.12);
  --badge-yes-text: #4ade80;
  --badge-yes-border: rgba(74, 222, 128, 0.35);
  --handle-border: #1a1f26;
  --focus-ring: rgba(91, 156, 246, 0.25);
  --chart-grid: #2d3640;
  --chart-axis: #3d4654;
  --chart-text: #9aa0a6;
  --chart-pv: #5b9cf6;
  --chart-uv: #64748b;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--bg);
  border-color: var(--hover-border);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle .theme-icon-sun {
  display: none;
}

.theme-toggle .theme-icon-moon {
  display: block;
}

[data-theme="dark"] .theme-toggle .theme-icon-sun {
  display: block;
}

[data-theme="dark"] .theme-toggle .theme-icon-moon {
  display: none;
}

[data-theme="dark"] .form-row input,
[data-theme="dark"] .form-row textarea,
[data-theme="dark"] .form-row select {
  background: var(--input-bg);
  color: var(--text);
}

[data-theme="dark"] #editor {
  background: var(--input-bg);
  color: var(--text);
}

[data-theme="dark"] .vditor--dark .vditor-reset {
  color: var(--text);
}

[data-theme="dark"] .export-dropdown-menu,
[data-theme="dark"] .account-dropdown,
[data-theme="dark"] .modal,
[data-theme="dark"] .toast-save-success {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .modal-tabs button {
  background: var(--surface-2);
  color: var(--muted);
}

[data-theme="dark"] .modal-tabs button.active {
  background: var(--surface);
  color: var(--text);
}

[data-theme="dark"] ::selection {
  background: rgba(91, 156, 246, 0.35);
  color: var(--text);
}