/* Global semantic palette. Legacy component fallbacks retain the accepted light shades. */
:root{
 --bg-app:#f5f7f8;--bg-surface:#fff;--bg-elevated:#fff;--bg-input:#fff;
 --text-primary:#17273a;--text-secondary:#637080;--text-muted:#637080;
 --border-default:#e2e7eb;--brand-green:#187950;--brand-navy:#101f32;
 --danger:#ae3030;--warning:#74521b;--success:#187950;--link:#2468ad;
 --focus:#187950;--overlay:#08152799;--shadow-color:#0003;
 --navy:var(--brand-navy);--green:var(--brand-green);--ink:var(--text-primary);
 --muted:var(--text-muted);--line:var(--border-default);--paper:var(--bg-app);
 color-scheme:light;
}
:root[data-theme=dark]{
 color-scheme:dark;
 --bg-app:#101923;--bg-surface:#1a2735;--bg-elevated:#213245;--bg-input:#132130;
 --text-primary:#e7eef6;--text-secondary:#b8c6d5;--text-muted:#a9b9c9;
 --border-default:#3e5365;--brand-green:#187950;--brand-navy:#d9e8f8;
 --danger:#f4aaa4;--warning:#ebcd8d;--success:#8ad4af;--link:#9dcaff;
 --focus:#8ad4af;--overlay:#050c16b3;--shadow-color:#0006;
 --green:#8ad4af;--green-dark:#8ad4af;
 --theme-bg-surface:var(--bg-surface);--theme-bg-input:var(--bg-input);
 --theme-bg-elevated:var(--bg-elevated);--theme-bg-subtle:#203142;
 --theme-bg-inverse:#1c3044;--theme-bg-accent:#1c3b2e;
 --theme-bg-warning:#3c3323;--theme-bg-danger:#3e282e;
 --theme-bg-translucent:#1a2735f0;
 --theme-text-primary:var(--text-primary);--theme-text-secondary:var(--text-secondary);
 --theme-text-accent:var(--success);--theme-text-on-brand:#fff;--theme-text-on-tint:#102f22;
 --theme-border-default:var(--border-default);--theme-border-accent:#659b7d;
 --theme-border-danger:#a96669;--theme-danger:var(--danger);--theme-warning:var(--warning);
 --theme-link:var(--link);--theme-focus:var(--focus);--theme-shadow:var(--shadow-color);
 --theme-overlay:var(--overlay);--theme-brand-green:var(--brand-green);
}
html{background:var(--bg-app)}
dialog{background:var(--bg-elevated)}
:root[data-theme=dark] :is(input,textarea,select){color:var(--text-primary)}
:root[data-theme=dark] :is(input,textarea,select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]){background-color:var(--bg-input)}
:root[data-theme=dark] ::placeholder{color:var(--text-muted);opacity:1}
:root[data-theme=dark] :is(input,textarea,select):disabled{color:var(--text-muted);-webkit-text-fill-color:var(--text-muted)}
:root[data-theme=dark] input:-webkit-autofill{box-shadow:0 0 0 1000px var(--bg-input) inset;-webkit-text-fill-color:var(--text-primary);caret-color:var(--text-primary)}
/* Native/default button text and dialog controls must not inherit a light UA color. */
:root[data-theme=dark] :is(.close,.lang,.gallery-arrow){color:var(--text-primary)}
/* Preserve distinct incoming/outgoing surfaces and unchanged user photography. */
:root[data-theme=dark] .message-bubble{background:var(--theme-bg-subtle)}
:root[data-theme=dark] .message-bubble.outgoing,:root[data-theme=dark] .ha-user{background:var(--theme-bg-accent)}
/* Leaflet tiles/attribution stay original; only Hawzion's adjacent controls use tokens. */
.location-map-panel .leaflet-container{color-scheme:light}
:root[data-theme=dark] .location-map-panel .leaflet-control-scale-line{background:#fffffff0;color:#101f32}
/* Keep Google/Apple marks intact; elevate the Apple border on dark surfaces. */
:root[data-theme=dark] .auth-signin .auth-provider-apple{border-color:var(--border-default)}
:root[data-theme=dark] .auth-signin .auth2-password button{color:var(--text-primary)}
/* Existing auth input icons use monochrome background SVGs. Only the glyph tint changes. */
:root[data-theme=dark] .auth-signin #account-auth input[name=identity]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b9c9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E")}
:root[data-theme=dark] .auth-signin .auth2-password input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b9c9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V6a4 4 0 0 1 8 0v4M12 15v2'/%3E%3C/svg%3E")}
/* The only new layout is the compact preference control itself. */
.theme-settings{border:0;padding:0;margin:0 0 24px;min-width:0;max-width:520px}
.theme-settings legend{padding:0;margin-bottom:12px;font-weight:700}
.theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.theme-choice{position:relative;min-width:0}
.theme-choice input{position:absolute;width:1px;height:1px;opacity:0}
.theme-choice>span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 6px;border:1px solid var(--border-default);border-radius:9px;background:var(--bg-surface);color:var(--text-primary);font-size:14px;cursor:pointer}
.theme-choice svg{width:18px;height:18px;flex:none}
.theme-choice input:checked+span{border-color:var(--success);box-shadow:inset 0 0 0 1px var(--success);font-weight:700;background:var(--theme-bg-accent,#e7f3ed)}
.theme-choice input:focus-visible+span{outline:3px solid var(--focus);outline-offset:3px}
.theme-sync{font-size:13px;line-height:1.5;color:var(--text-muted);margin:10px 0 0}
.theme-sync[hidden]{display:none}