/* Global appearance controls and the compact connection header. */
:root{--text:#f4f5f6;--border:var(--line)}
/* Primary setting labels share the same ink as SPDT and additional settings. */
.setting-label{color:var(--text)}
.carbon-brand{margin-bottom:30px}
.carbon-topbar{flex-wrap:wrap;gap:12px 24px;padding-block:14px}
.demo-controls{align-items:baseline;gap:8px 12px;min-width:0}
.demo-controls>:is(.connection-model,.preview-state,.demo-disconnect){font-size:13px;line-height:20px}
.connection-model{font-weight:400;color:var(--white);white-space:nowrap}
.connection-model::after{content:'';display:inline-block;width:5px;height:5px;vertical-align:2px;margin-left:12px;border-radius:50%;background:var(--muted)}
.connection-model[data-link-state=connected]::after{background:#56cc8b}
html[data-theme=light] .connection-model[data-link-state=connected]::after{background:#227347}
.appearance-picker{width:100%;margin-top:4px}
.language-trigger>.language-chevron{display:none}
.appearance-trigger{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:38px;padding:8px 12px;border:0;border-radius:5px;background:transparent;color:var(--menu-muted);font:inherit;font-size:13px;line-height:20px;text-align:left;cursor:pointer}
.appearance-trigger:hover,.appearance-trigger[aria-expanded=true]{background:var(--menu-hover);color:var(--menu-text)}
.appearance-trigger:focus-visible{outline:1px solid var(--muted);outline-offset:-1px}
.appearance-value{min-width:0;overflow-wrap:anywhere}
.appearance-swatch{display:block;flex:0 0 12px;width:12px;height:12px;margin-inline:2px;border:0;border-radius:50%;background:var(--palette-swatch)}
.appearance-menu{position:fixed;z-index:80;box-sizing:border-box;padding:4px;border:1px solid var(--menu-border);border-radius:6px;background:var(--menu-surface);color:var(--menu-text);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;animation:appearance-open .12s ease-out}
.appearance-menu[hidden]{display:none}
.appearance-option{display:flex;align-items:center;gap:16px;min-height:32px;padding:6px 10px;border:0;border-radius:3px;font-size:13px;font-weight:400;line-height:20px;cursor:pointer;user-select:none}
.appearance-option[aria-selected=true]{background:var(--menu-hover)}
.appearance-option:hover,.appearance-option[data-active]{background:var(--menu-hover)}
@keyframes appearance-open{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.appearance-menu{animation:none}}
.mobile-appearance-picker{display:none}
@media(min-width:921px){
 .carbon-shell{--sidebar-width:190px}
 .carbon-sidebar{padding-inline:12px}
 .carbon-brand>img{width:148px}
 .carbon-nav a{padding-inline:10px;gap:10px;white-space:normal}
 .carbon-nav a>span{overflow-wrap:anywhere}
 .carbon-nav a[aria-current=page]:after{display:none}
}
@media(min-width:701px) and (max-width:920px){
 .appearance-trigger{width:44px;justify-content:center;padding:9px}
 .appearance-value{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
@media(max-width:700px){
 .carbon-topbar{justify-content:flex-start}
 .carbon-topbar>.demo-controls{flex-basis:auto;flex:1 1 auto}
 .carbon-topbar>.telemetry{flex:0 0 auto;width:auto}
 footer .footer-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;width:100%;max-width:100%}
 footer #save-status:empty{display:none}
 footer .mobile-language-picker,.mobile-appearance-picker{display:flex;justify-content:flex-end;width:100%;margin:0;flex:0 0 auto}
 footer .mobile-language-picker .language-trigger,.mobile-appearance-picker .appearance-trigger{width:144px;max-width:100%;min-height:38px;padding:8px 12px;gap:10px;font-size:13px;font-weight:400;line-height:20px}
 footer .language-trigger>.c-icon{width:16px;height:16px;flex-basis:16px}
 footer .language-trigger>.language-chevron{width:14px;height:14px;flex-basis:14px}
 .footer-meta .app-version{margin-top:8px;max-width:100%!important;text-align:right;overflow-wrap:anywhere}
}
@media(max-width:460px){
 .carbon-toolbar{flex-wrap:wrap;gap:14px}
 .carbon-toolbar>.section-heading{flex-basis:100%}
 .carbon-toolbar>.toolbar-controls{position:static}
 footer{flex-wrap:wrap}
 .footer-meta{flex:1 1 100%}
}
@media(pointer:coarse){.appearance-trigger,.mobile-appearance-picker .appearance-trigger,.appearance-option,.language-picker .language-trigger,.language-option{min-height:44px}}

/* Light surfaces use the same hierarchy as the charcoal theme. Semantic status
   colors have darker light-mode variants; user-selected DPI colors stay exact. */
:root[data-theme=light]{
 --muted:#565656;--line:#bdbdbd;--border:#bdbdbd;--panel:#ededed;--white:#242424;--text:#242424;
 --menu-surface:#ededed;--menu-border:#bdbdbd;--menu-hover:#c9c9c9;--menu-text:#242424;--menu-muted:#565656;
 --light-canvas:#dedede;--light-field:#e4e4e4;--light-hover:#c9c9c9;--light-strong:#333333;--light-danger:#a23337;
 background:var(--light-canvas);color:var(--text);color-scheme:light;
}
html[data-theme=light] body{background:var(--light-canvas);color:var(--text)}
html[data-theme=light] .carbon-sidebar{background:#d4d4d4}
html[data-theme=light] .carbon-brand>img{filter:brightness(0)}
html[data-theme=light] :is(.carbon-nav a,.preview-state,.telemetry-reading,.telemetry-reading b,.telemetry-reading>.c-icon,.profile-picker label,.small-note,.axis-link,.axis-heading>label,.axis-value>span,.range-limits,.unit,.help,.footnote,.card .footnote,.card>p,.text-button,.macro-item,.macro-item small,.macro-item>span:last-child,.macro-empty,.editor-meta,.event-index,.event-type,.delay-input,.event-empty,.event-empty p,.delay-options,.run-settings,.device-specs>div,.firmware-component-name span,.firmware-card>p.updater-note,.instruction-list>li,.instruction-list>li:before,.keyboard-note p,footer,.footer-meta .app-version,dialog p,dialog .field,.setting-info>p,.battery-impact,.performance-reset,.dpi-stage-count,.mapping-config,.changelog-entry ul){color:var(--muted)}
html[data-theme=light] :is(.card h2,.axis-value input,.dpi-value input,.editor-name,.device-specs b,.firmware-component-name b,.firmware-component-name h3,.instruction-list strong,.keyboard-note h3,.advanced summary,.changelog-version h3,.event-empty strong,.empty-editor h2,.record-capture>strong,.macro-assignment-dialog .field>label,.binding-playback>legend,.battery-impact>b,.dpi-stage-content,.number-stepper input){color:var(--text)}
html[data-theme=light] :is(.carbon-nav a:hover,.carbon-nav a[aria-current=page],.macro-item[aria-pressed=true],.icon-button:hover,.mapping-action-control>.edit-macro-binding:hover){background:var(--light-hover);color:var(--text);border-color:var(--line)}
html[data-theme=light] .macro-item:not([aria-pressed=true]):hover{background:var(--light-hover);color:var(--text)}
html[data-theme=light] :is(.icon-button,.info-button,.mapping-action-control>.edit-macro-binding,.macro-delete,.button-number,.connection-badge,.device-telemetry){color:var(--muted)}
html[data-theme=light] :is(.text-button:hover,.performance-reset:hover,.info-button:hover,.info-button[aria-describedby],.language-option:hover,.language-option[data-active],.select-option:hover:not([aria-disabled=true]),.select-option[data-active]){color:var(--text)}
html[data-theme=light] :is(.info-button:hover,.info-button[aria-describedby])::before{background:var(--light-hover)}
html[data-theme=light] :is(.button,.segment,.number-stepper,.form-select,.text-input,.inline-number,.keycap,kbd,.keyboard-note,.profile-picker select,.profile-picker .select-trigger){background:var(--light-field);border-color:var(--menu-border);color:var(--text)}
html[data-theme=light] body .select-trigger{background-color:var(--light-field);color:var(--text)}
html[data-theme=light] :is(.button:hover,.segment:hover,.number-stepper button:enabled:hover),html[data-theme=light] body .select-trigger:hover:not(:disabled),html[data-theme=light] body .select-trigger[aria-expanded=true]{background-color:var(--light-hover);border-color:#898989;color:var(--text)}
html[data-theme=light] :is(.button.primary,.segment[aria-pressed=true]){background:var(--light-strong);border-color:var(--light-strong);color:#fff}
html[data-theme=light] .button.primary:hover{background:#242424;border-color:#242424;color:#fff}
html[data-theme=light] .debounce-controls:disabled .segment[aria-pressed=true]:hover{background:var(--light-strong);border-color:var(--light-strong);color:#fff}
html[data-theme=light] .dpi-stages .segment{background:var(--light-field);border-color:var(--menu-border)}
html[data-theme=light] .dpi-stages .segment[aria-pressed=true]{background:var(--light-hover);border-color:#777}
html[data-theme=light] .dpi-stages .segment :is(span,strong){color:var(--text)}
html[data-theme=light] :is(.number-stepper button,.number-stepper>span,.select-trigger>.select-chevron){color:var(--muted)}
html[data-theme=light] .switch{background:var(--line);border-color:var(--muted)}
html[data-theme=light] .switch:after{background:var(--muted)}
html[data-theme=light] .switch[aria-checked=true]{background:var(--light-strong);border-color:var(--light-strong)}
html[data-theme=light] .switch[aria-checked=true]:after{background:#fff}
/* Share the compact DPI/angle handle ring across every theme and platform. */
input[type=range]:not(#dpi-color-hue)::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--panel)}
html[data-theme=light] input[type=range]:not(#dpi-color-hue){background:linear-gradient(to right,var(--light-strong) 0%,var(--light-strong) var(--fill,8%),var(--line) var(--fill,8%),var(--line) 100%)}
html[data-theme=light] input[type=range]:not(#dpi-color-hue)::-webkit-slider-thumb{background:var(--light-strong)}
html[data-theme=light] input[type=range]:not(#dpi-color-hue)::-moz-range-thumb{background:var(--light-strong)}
html[data-theme=light] input[type=radio]{accent-color:var(--light-strong)}
html[data-theme=light] :is(.mapping-row,.event-row,.device-specs>div,.battery-impact,.advanced,.select-group+.select-group,.connection-badge,.button-number){border-color:var(--line)}
html[data-theme=light] .sensor-controls>.setting-row{box-shadow:inset 0 -1px var(--line)}
html[data-theme=light] .sensor-controls>.setting-row:last-child{box-shadow:none}
html[data-theme=light] dialog{color:var(--text)}
html[data-theme=light] dialog::backdrop{background:#24242466}
html[data-theme=light] .toast{background:var(--light-strong);color:#fff}
html[data-theme=light] :is(.button.danger,.binding-error,.firmware-recovery,.settings-check-status.mismatch,.settings-check-status.error){color:var(--light-danger)}
html[data-theme=light] .axis-error{background:#fff1ef;border-color:#bf7470;color:#973c35}
html[data-theme=light] .macro-delete:hover:not(:disabled){background:#f8e8e7;color:var(--light-danger)}
html[data-theme=light] .recording{border-color:#b36161!important;background:#fae9e9!important}
html[data-theme=light] .record-capture{background:#fff2f0;border-color:#b87575;color:#973c35}
html[data-theme=light] .record-capture>span{color:#805451}
html[data-theme=light] #macro-warning{color:#805b15!important}
html[data-theme=light] #insert-error{color:var(--light-danger)!important}
html[data-theme=light] .battery-impact>b[data-impact=medium]{color:#805b15}
html[data-theme=light] .battery-impact>b[data-impact=high]{color:var(--light-danger)}
html[data-theme=light] :is(.firmware-success,.settings-check-status.match){color:#227347}
html[data-theme=light] :is(.signal-bars[data-signal-level=high],.telemetry-battery[data-battery-level=full]>.battery-icon){color:#05768d}
html[data-theme=light] .signal-bars[data-signal-level=medium]{color:#96700e}
html[data-theme=light] :is(.signal-bars[data-signal-level=low],.telemetry-battery[data-battery-level=low]>.battery-icon){color:#bb343e}
html[data-theme=light] .telemetry-battery[data-battery-level=normal]>.battery-icon{color:#227347}
html[data-theme=light] :is(.signal-bars[data-signal-level=unavailable],.telemetry-battery[data-battery-level=unavailable]>.battery-icon){color:#636363}
html[data-theme=light] .connection-empty.is-connecting::before{border-color:#bdbdbd;border-top-color:#333333}
html[data-theme=light] :is(.dpi-stage-value,.firmware-versions dd){color:var(--text)}
html[data-theme=light] :is(.firmware-versions dt,.firmware-progress>span,.dpi-color-fields>label){color:var(--muted)}
html[data-theme=light] .firmware-progress progress,html[data-theme=light] .firmware-progress progress::-webkit-progress-bar{background:#bdbdbd}
html[data-theme=light] .firmware-progress progress::-webkit-progress-value{background:#227347}
html[data-theme=light] .firmware-progress progress::-moz-progress-bar{background:#227347}
html[data-theme=light] .dpi-stage-color:hover::before,html[data-theme=light] .dpi-stage-color:focus-visible::before{background:var(--light-hover)}
html[data-theme=light],html[data-theme=light] :is(.macro-list,.event-list,.changelog-list,.select-menu,.language-menu,.diagnostics-report){scrollbar-color:#979797 #dedede}
html[data-theme=light] ::-webkit-scrollbar-track,html[data-theme=light]::-webkit-scrollbar-track,html[data-theme=light] ::-webkit-scrollbar-corner,html[data-theme=light]::-webkit-scrollbar-corner{background:#dedede}
html[data-theme=light] ::-webkit-scrollbar-thumb,html[data-theme=light]::-webkit-scrollbar-thumb{background:#979797;border-color:#dedede}
html[data-theme=light] ::-webkit-scrollbar-thumb:hover,html[data-theme=light]::-webkit-scrollbar-thumb:hover{background:#636363}