/* Shared appearance tokens for current screens and future modules. */
:root {
    --surface-backdrop: #00000040;
    --surface-page: color-mix(in srgb,var(--accent,#1763e6) 6%,#f6f6f6);
    --muted: var(--text-secondary);
    --line: color-mix(in srgb,var(--accent,#1763e6) 18%,transparent);
    --surface-public-input: #f1f1f0;
    --surface-public-input-focus: #f8f8f7;
    --border-public-input: #d8d9d8;
    --surface-glass: linear-gradient(135deg,#ffffffc9,#ffffff8c);
    --border-surface: #fffffff2;
    --text-primary: #25282e;
    --text-secondary: #5f6369;
    --text-subtle: #6b6f75;
    --surface-field: color-mix(in srgb,var(--accent,#1763e6) 2%,#fff);
    --surface-field-focus: #ffffff;
    --text-placeholder: #787d85;
    --text-link: #2862b7;
    --surface-error: #fff0ef;
    --text-error: #a12e26;
    --border-error: #efcfca;
    --text-warning: #946000;
    --text-success: #187447;
    --surface-success: #e4f5eb;
    --surface-warning: #fff1cf;
    --border-warning: #e6cd92;
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --surface-public-input: #1e1e1e;
    --surface-public-input-focus: #282828;
    --border-public-input: #414141;
    --surface-backdrop: #000000a8;
    --surface-page: #141414;
    --text-primary: #f2f2f2;
    --text-secondary: #c4c4c4;
    --text-subtle: #b0b0b0;
    --surface-field: #242424;
    --surface-field-focus: #2b2b2b;
    --text-placeholder: #a6a6a6;
    --surface-glass: linear-gradient(135deg,#2b2b2be8,#222222e6);
    --surface-button: #303030c9;
    --border-surface: #ffffff26;
    --text-link: #91baff;
    --surface-error: #442426;
    --text-error: #ffc0b9;
    --border-error: #87504f;
    --text-warning: #f4cb75;
    --text-success: #91dfb3;
    --surface-success: #203b2d;
    --surface-warning: #3c3322;
    --border-warning: #74603b;
    --blue: #91baff;
    --muted: var(--text-secondary);
    --line: #ffffff26;
}
body { background: var(--surface-page); color: var(--text-primary); }
.wordmark, input, dialog { color: var(--text-primary); }
.glass-button { color: var(--text-primary); }
.input-wrap > .icon, .visibility-button { color: var(--text-secondary); }
.top-caption, .eyebrow, label { color: var(--text-secondary); }
.field-hint, .security-note, footer { color: var(--text-subtle); }
.input-wrap { --field-fill: var(--surface-field); background: var(--field-fill); transition: border-color .2s, box-shadow .2s; }
.input-wrap:focus-within { --field-fill: var(--surface-field-focus); background: var(--field-fill); }
/* Cover the browser's autofill paint with the exact field surface, including focus.
   Keep standard and WebKit selectors separate for browsers supporting only one. */
input:autofill {
    box-shadow: 0 0 0 1000px var(--field-fill, var(--surface-field)) inset;
    -webkit-text-fill-color: var(--text-primary);
    color: var(--text-primary);
    caret-color: var(--text-primary);
}
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px var(--field-fill, var(--surface-field)) inset;
    box-shadow: 0 0 0 1000px var(--field-fill, var(--surface-field)) inset;
    -webkit-text-fill-color: var(--text-primary);
    color: var(--text-primary);
    caret-color: var(--text-primary);
}
input::placeholder { color: var(--text-placeholder); }
.text-button { color: var(--text-link); }
.feedback { background: var(--surface-error); color: var(--text-error); border-color: var(--border-error); }
#workspace-feedback { color: var(--text-error); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.theme-control { position: relative; padding: 0; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; }
.theme-control .icon { width: 21px; height: 21px; pointer-events: none; }
.theme-control > span { position: absolute; display: grid; place-items: center; transition: opacity .2s ease, transform .25s ease; }
.theme-control .theme-sun { opacity: 0; transform: rotate(-65deg) scale(.6); }
:root[data-theme="dark"] .theme-control .theme-moon { opacity: 0; transform: rotate(65deg) scale(.6); }
:root[data-theme="dark"] .theme-control .theme-sun { opacity: 1; transform: rotate(0) scale(1); }
.theme-control:focus-visible { outline: 2px solid var(--text-link); outline-offset: 3px; }
:root[data-theme="dark"] .wallpaper { background: linear-gradient(125deg,#111111,#1c1c1c 48%,#161616); }
:root[data-theme="dark"] .orb-one { opacity: .28; filter: brightness(.4) saturate(1.3); }
:root[data-theme="dark"] .orb-two { opacity: .3; filter: brightness(.45) saturate(1.2); }
:root[data-theme="dark"] .orb-three { background: #383838; }
:root[data-theme="dark"] .glass { background: var(--surface-glass); border-color: var(--border-surface); box-shadow: 0 24px 70px #0004,inset 0 1px 1px #ffffff13; }
:root[data-theme="dark"] .glass-button { background: var(--surface-button); color: var(--text-primary); border-color: var(--border-surface); box-shadow: 0 3px 10px #0002,inset 0 1px 1px #ffffff0c; }
:root[data-theme="dark"] .glass-button:hover { background: var(--surface-hover); }
:root[data-theme="dark"] .app-icon { background: #ffffff12; box-shadow: 0 8px 20px #0003,inset 0 1px 2px #ffffff24; }
:root[data-theme="dark"] .input-wrap > .icon,
:root[data-theme="dark"] .visibility-button { color: var(--text-secondary); }
:root[data-theme="dark"] .visibility-button[aria-pressed="true"] { color: var(--text-link); }
:root[data-theme="dark"] .input-wrap:focus-within { border-color: #7aafff; box-shadow: 0 0 0 3px #7aafff25; }
:root[data-theme="dark"] #caps-lock { color: #f0ce83; }
:root[data-theme="dark"] .footer-divider { background: #ffffff36; }
:root[data-theme="dark"] dialog::backdrop { background: var(--surface-backdrop); }
:root[data-theme="dark"] .success-icon { background: #204638; color: #a1e7c2; }
:root[data-theme="dark"] #branch-list li { background: var(--surface-field); }
@media(max-width:1050px) { .top-caption { display: none; } }
@media(max-width:600px) {
    .header-actions { gap: 7px; }
}
@media(max-width:360px) {
    .topbar { padding-inline: 16px; gap: 10px; }
    .wordmark { gap: 6px; font-size: 19px; }
}