:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --text: #e5edf1;
  --page: #10171b;
  --surface: #182227;
  --surface-soft: #202f35;
  --muted-text: #afc0c8;
  --subtle-text: #a1b3bc;
  --line: #34464f;
  --primary: #2f6c56;
  --primary-hover: #397e64;
  --on-primary: #ffffff;
  --accent: #83dbaf;
  --tint-bg: #21342d;
  --tint-text: #bce3c7;
  --tint-line: #3e5949;
  --success-bg: #21372d;
  --success-text: #8ed5a5;
  --success-line: #365a42;
  --warning-bg: #362e1e;
  --warning-text: #f0cb85;
  --warning-line: #66552e;
  --danger-bg: #3a252a;
  --danger-text: #f4acaa;
  --danger-line: #684149;
  --info-bg: #21323f;
  --info-text: #aed1ed;
  --focus: #88d8b3;
  --placeholder: #96adb8;
  --code-bg: #14271e;
  --code-text: #d7e7d2;
  --shadow: #00000050;
  --backdrop: #00000099;
}
.theme-toggle { min-height: 36px; font-size: 14px; padding: 7px 12px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.theme-toggle::before { content: ''; display: block; flex-shrink: 0; width: 16px; height: 16px; background: currentColor; mask: url('/static/moon.svg') center / contain no-repeat; }
:root[data-theme='dark'] .theme-toggle::before { mask-image: url('/static/sun.svg'); }
.theme-toggle[aria-pressed="true"] { border-color: var(--accent, #237754); }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
.header-actions > a { font-size: 12px; }
.login-theme { margin-bottom: 20px; }
dialog { background: var(--surface, #fff); }
@media (max-width: 600px) {
  .portal-header, .docs-header { flex-wrap: wrap; gap: 12px; }
  .header-actions { gap: 12px; }
  .top-right { gap: 12px; }
  .topbar { height: auto; min-height: 74px; padding-top: 12px; padding-bottom: 12px; flex-wrap: wrap; gap: 12px; }
}