/* Shared semantic colors; light-mode fallbacks stay in the component styles. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
 color-scheme: dark;
 --canvas: #171717;
 --surface: #222222;
 --ink: #e7e7e7;
 --muted: #adadad;
 --brand: #7ed49a;
 --brand-hover: #98e2af;
 --tint: #303030;
 --accent: #a0cc70;
 --line: #3b3b3b;
 --focus: #86d89f;
 --danger: #f1a69b;
 --shadow: 0 8px 30px #00000024;
 --theme-surface: var(--surface);
 --theme-soft: #292929;
 --theme-input: #1c1c1c;
 --theme-hover: #333333;
 --theme-border: var(--line);
 --theme-border-strong: #686868;
 --theme-text: var(--ink);
 --theme-muted: var(--muted);
 --theme-placeholder: #969696;
 --theme-positive: #9ed7a4;
 --theme-reserved: #6cae79;
 --theme-danger: var(--danger);
 --theme-purple: #cbb9e6;
 --theme-warning: #e7c18a;
 --theme-warning-bg: #372f20;
 --theme-warning-border: #6d5b37;
 --theme-danger-bg: #3d2825;
 --theme-danger-border: #795049;
 --theme-danger-fill: #f5bbb0;
 --theme-on-brand: #14291b;
 --theme-on-brand-muted: #2b4d35;
 --theme-progress: var(--brand);
 --theme-shadow: #00000040;
 --theme-backdrop: #000000b3;
 --theme-knob: #e0e0e0;
}
.theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 8px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); }
.theme-toggle:hover { color: var(--brand); border-color: var(--focus); background: var(--tint); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .theme-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
.auth-header-actions { display: flex; align-items: center; gap: 18px; }
.auth-header-note { font-size: 11px; color: var(--muted); }
:root[data-theme="dark"] .answer-navigation input:checked::before { background: var(--theme-on-brand); }
/* Google illustrations reproduce the external screens, including their overlays. */
.onboarding-link-picture,.setup-mini,.import-tutorial,.setup-editor-image,.setup-menu-photo,.setup-code-photo,.setup-manifest-photo,.setup-property-photo,.setup-secret-photo,.setup-deployment-photo,.setup-completion-photo { color-scheme: light; color: #203d32; }
@media(max-width:700px) {
 .auth-header-note { display: none; }
 .auth-header-actions { gap: 9px; }
 .header-actions > .theme-toggle { width: 33px; height: 33px; padding: 7px; }
}
@media(max-width:360px) { .header-actions { gap: 6px; } }