:root{color-scheme:light;--app-bg:#f7f8fa;--app-panel:#fff;--app-input:#fff;--app-soft:#f1f4f7;--app-text:#263647;--app-muted:#697a8b;--app-line:#e1e6ec;--app-accent:#4279c3;--app-on-accent:#fff}
:root[data-theme=dark]{color-scheme:dark;--app-bg:#15171a;--app-panel:#202328;--app-input:#191d22;--app-soft:#292e36;--app-text:#e0e6ed;--app-muted:#a1aebd;--app-line:#373e48;--app-accent:#8abaff;--app-on-accent:#152139;--line:var(--app-line);--soft:var(--app-soft);--muted:var(--app-muted);background:var(--app-bg);color:var(--app-text)}
body:not(.translator-page):not(.speech-page){--tr-bg:var(--app-bg);--tr-panel:var(--app-panel);--tr-text:var(--app-text);--tr-muted:var(--app-muted);--tr-line:var(--app-line);--tr-soft:var(--app-soft);--tr-accent:var(--app-accent)}
html[data-theme=dark] body:not(.translator-page):not(.speech-page){background:var(--app-bg);color:var(--app-text)}
html[data-theme=dark] :is(.control-panel,.model-card,.evaluation-panel,.history-stats>div,.tooltip,dialog){background-color:var(--app-panel);border-color:var(--app-line);color:var(--app-text)}
html[data-theme=dark] :is(.control-top,.control-main,.control-bottom,.transcript-section,.card-heading,.metrics,.card-footer,.access-user,.history-provider details,footer){border-color:var(--app-line)}
html[data-theme=dark] :is(.control-bottom,.transcript-section.source-section,.speaker-tools,.history-table th,.segmented,dialog pre,code){background-color:var(--app-soft);color:var(--app-muted);border-color:var(--app-line)}
html[data-theme=dark] :is(.history-table td,.history-table th){border-color:var(--app-line)}
html[data-theme=dark] :is(.history-table small,.history-table time,.history-pagination,.intro p,.auth-gate>p,.device-menu-note,.user-duration-group legend,.history-reason summary,.reference-grid label,.input-control label,.text-button,.copy-button,.model-name,.speaker-guide,.transcript-section h4,.provider-info h3,.cost-provider-list p){color:var(--app-muted)}
html[data-theme=dark] :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select,.reading-mode-label select,.speaker-tools select,.language-selectors select,.history-filters input){background-color:var(--app-input);color:var(--app-text);border-color:var(--app-line)}
html[data-theme=dark] :is(input,textarea)::placeholder{color:#8694a5}
html[data-theme=dark] :is(.secondary,.icon-button,.sample-chip,.settings-trigger){background-color:var(--app-panel);color:var(--app-text);border-color:var(--app-line)}
html[data-theme=dark] :is(.secondary,.sample-chip,.icon-button,.settings-trigger):hover{background-color:var(--app-soft)}
html[data-theme=dark] .button.primary{background:#337953;color:#fff}
html[data-theme=dark] .button.primary:hover{background:#3c8c62}
html[data-theme=dark] :is(.state-pill,.card-status){background:#303740;color:#bcc7d4;border-color:var(--app-line)}
html[data-theme=dark] :is(.state-pill.live,.card-status.ready,.card-status.done){background:#253c30;color:#b7dfbc}
html[data-theme=dark] :is(.card-status.error,.stop,.service-control,.notice.error,.microphone-toast){background:#48232c;color:#ffdce2;border-color:#995061}
html[data-theme=dark] :is(.service-control p,.service-control small){color:#efbbc4}
html[data-theme=dark] :is(.card-status.draining,.card-status.connecting){background:#3c3423;color:#dfc993}
html[data-theme=dark] .notice{background:#343125;border-color:#635b3b;color:#e1d6a4}
html[data-theme=dark] .notice.demo{background:#22334b;border-color:#3a5579;color:#bfd7f5}
html[data-theme=dark] :is(.partial,.utterance-text .partial){background:#293b31;color:#b9d5bf}
html[data-theme=dark] :is(.diff-reference,.diff-block ins){background:#25402d;color:#b7dfb9}
html[data-theme=dark] :is(.diff-error,.diff-block del){background:#47282a;color:#f0b4ab}
html[data-theme=dark] .model-card{--accent-soft:#3c2e23}
html[data-theme=dark] .model-card.openai{--accent-soft:#273d30}
html[data-theme=dark] .model-card.gemini{--accent-soft:#29324a}
html[data-theme=dark] .segmented button.selected{background:var(--app-panel);color:var(--app-text)}
html[data-theme=dark] .auth-gate{color:var(--app-text)}
html[data-theme=dark] .auth-gate h1.vero-auth-brand{color:var(--app-text)}
html[data-theme=dark] .auth-gate:is(.auth-checking,.vero-sign-in) h1.vero-auth-brand{-webkit-text-fill-color:transparent}
html[data-theme=dark] #playground-settings{--menu-hover:var(--app-soft)}
/* Retain compact transparent selects inside all settings menus. */
html[data-theme=dark] .settings-menu .settings-row select{background-color:transparent;color:var(--app-muted);border:0}
.theme-toggle-row{position:relative}
.theme-toggle-row input{position:absolute;right:15px;width:32px;height:22px;opacity:0;margin:0;cursor:pointer}
.theme-switch{margin-left:auto;width:30px;height:18px;flex:none;border-radius:20px;background:var(--app-line);position:relative;pointer-events:none}
.theme-switch::after{content:'';position:absolute;left:3px;top:3px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .15s}
.theme-toggle-row input:checked+.theme-switch{background:var(--app-accent)}
.theme-toggle-row input:checked+.theme-switch::after{transform:translateX(12px)}
.theme-toggle-row:has(input:focus-visible){outline:2px solid var(--app-accent);outline-offset:-2px}
/* Audience/OBS output must retain its transparent canvas. */
html:has(.speech-page[data-output=overlay]){background:transparent!important}

html[data-theme=dark] #users-query{background-color:var(--app-input);color:var(--app-text);border-color:var(--app-line)}