/* Compact, native keyboard-accessible appearance selector. */
.header{position:relative;z-index:10}
.appearance-control{position:relative;flex-shrink:0}
.appearance-trigger{display:flex;align-items:center;gap:7px;list-style:none;border:1px solid var(--line);border-radius:24px;padding:7px 10px;font-size:.75rem;color:var(--text);background:var(--bg);min-height:36px;white-space:nowrap}
.appearance-trigger::-webkit-details-marker{display:none}
.appearance-trigger>svg{width:17px;height:17px}
.appearance-trigger>svg.appearance-chevron{width:12px;height:12px;color:var(--muted)}
.appearance-trigger .appearance-icon-light,.appearance-trigger .appearance-icon-dark{display:none}
[data-appearance="light"] .appearance-icon-auto,[data-appearance="dark"] .appearance-icon-auto{display:none}
[data-appearance="light"] .appearance-trigger .appearance-icon-light,[data-appearance="dark"] .appearance-trigger .appearance-icon-dark{display:block}
.appearance-control[open] .appearance-trigger,.appearance-trigger:hover{border-color:var(--blue);color:var(--blue)}
.appearance-trigger:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.appearance-control[open] .appearance-chevron{transform:rotate(180deg)}
.appearance-panel{position:absolute;z-index:30;right:0;top:calc(100% + 12px);width:255px;padding:16px 12px 12px;border:1px solid var(--line);border-radius:16px;background:var(--bg);box-shadow:0 16px 45px #162d4926}
.appearance-panel fieldset{border:0;margin:0;padding:0;min-width:0}
.appearance-panel legend{padding:0 8px 10px;font-size:.72rem;font-weight:600;color:var(--muted);letter-spacing:.04em}
.appearance-option{position:relative;display:flex;align-items:center;gap:12px;padding:11px 10px;border:1px solid transparent;border-radius:10px;cursor:pointer;font-size:.83rem;line-height:1.5}
.appearance-option>svg{width:20px;height:20px;color:var(--muted)}
.appearance-option small{display:block;font-size:.66rem;color:var(--muted);margin-top:2px}
.appearance-option input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.appearance-option:has(input:checked){background:var(--panel);border-color:var(--line)}
.appearance-option:has(input:checked)>svg{color:var(--blue)}
.appearance-option:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:1px}
.appearance-option:hover{background:var(--panel)}
.appearance-option i{margin-left:auto;width:6px;height:6px;border-radius:50%;background:transparent;flex-shrink:0}
.appearance-option:has(input:checked) i{background:var(--blue)}
.appearance-panel>p{font-size:.64rem;line-height:1.8;border-top:1px solid var(--line);padding:10px 8px 0;margin-top:10px}
.ambient-bar{background:#f8fafc;border-bottom:1px solid #e8edf3}
.ambient-inner{display:flex;justify-content:space-between;align-items:center;min-height:35px;gap:15px;font-size:.66rem;color:#5f7186}
.ambient-clock,.ambient-state{display:flex;align-items:center;gap:8px}
.ambient-clock svg{width:14px;height:14px;color:#68839e}
.ambient-clock time{font-variant-numeric:tabular-nums;letter-spacing:.03em;color:#355773}
.ambient-state{gap:7px}
.ambient-state i{width:4px;height:4px;border-radius:50%;background:#397eac}
[data-theme="dark"] .appearance-trigger{background:#101d30;border-color:#2a405d}
[data-theme="dark"] .appearance-panel{background:#0f1d30;border-color:#2c4462;box-shadow:0 20px 55px #0009}
[data-theme="dark"] .appearance-option:has(input:checked){background:#182d46;border-color:#385775}
[data-theme="dark"] .appearance-option:hover{background:#172a42}
[data-theme="dark"] .ambient-bar{background:#0a1525;border-color:#21324a}
[data-theme="dark"] .ambient-inner{color:#a4b9cd}
[data-theme="dark"] .ambient-clock time{color:#dae9f6}
[data-theme="dark"] .ambient-clock svg{color:#83bde2}
[data-theme="dark"] .ambient-state i{background:#79d8d3;box-shadow:0 0 8px #79d8d33b}
@media(max-width:1100px){.header-actions{gap:12px}.appearance-trigger{padding:7px 9px;font-size:.72rem}.appearance-panel{width:245px}}
@media(max-width:560px){.header-actions{justify-content:flex-end}.appearance-trigger{padding:6px 10px}.ambient-inner{min-height:33px;font-size:.63rem}.ambient-clock,.ambient-state{gap:6px}.appearance-panel{right:0;width:min(255px,calc(100vw - 40px))}}
@media(prefers-reduced-motion:reduce){.appearance-trigger svg{transition:none}}