@import url("../assets/portfolio-palette.css");
:root,html[data-theme="white"]{--bg:var(--portfolio-bg);--panel:var(--portfolio-panel);--panel2:var(--portfolio-input);--line:var(--portfolio-line);--line2:var(--portfolio-line-strong);--text:var(--portfolio-text);--muted:var(--portfolio-muted);--soft:var(--portfolio-soft);--hover:var(--portfolio-accent-soft);--active:var(--portfolio-accent-soft);--accent:var(--portfolio-accent)}
html[data-theme] body{background:var(--bg);color:var(--text)}
html[data-theme] .appbar,html[data-theme] .rail{background:var(--portfolio-elevated);border-color:var(--line);color:var(--text)}
html[data-theme] .brandMark{background:var(--portfolio-accent-soft);border-color:var(--portfolio-accent-border);color:var(--accent)}
html[data-theme] .brand>.brandMark{color:var(--accent)}
html[data-theme] .brand>span:last-child,html[data-theme] .filemeta,html[data-theme] .themeControl{color:var(--muted)}
html[data-theme] .primaryButton,html[data-theme] .primaryPanelButton{background:var(--accent);color:var(--portfolio-accent-ink);border:1px solid var(--accent)}
html[data-theme] .primaryButton:hover,html[data-theme] .primaryPanelButton:hover{background:var(--accent);filter:brightness(1.08)}
html[data-theme] .rail button,html[data-theme] .viewbar button{color:var(--muted)}
html[data-theme] .rail button:hover,html[data-theme] .rail button.active,html[data-theme] .viewbar button:hover,html[data-theme] .viewbar button.active{background:var(--hover);color:var(--accent)}
html[data-theme] .rail button.active:before{background:var(--accent)}
html[data-theme] .rail button[data-tooltip]::after{background:var(--panel2);border-color:var(--line2);color:var(--text)}
html[data-theme] .inspector,html[data-theme] .panelHead,html[data-theme] .loadingCard,html[data-theme] .modalCard{background:var(--panel);border-color:var(--line)}
html[data-theme] .panelHead small,html[data-theme] .modalHead small,html[data-theme] .loadingTop small,html[data-theme] .sectionTitle{color:var(--accent)}
html[data-theme] select,html[data-theme] input[type=number],html[data-theme] input[type=text],html[data-theme] button.subtleButton,html[data-theme] .panel button:not(.iconButton):not(.linkButton):not(.primaryPanelButton),html[data-theme] .themeControl select{background:var(--panel2);border-color:var(--line2);color:var(--text)}
html[data-theme] select:focus,html[data-theme] input:focus{border-color:var(--accent)}
html[data-theme] button:focus-visible,html[data-theme] a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
html[data-theme] label,html[data-theme] .settingRow,html[data-theme] .rangeWithValue output{color:var(--soft)}
html[data-theme] .help,html[data-theme] .drop span,html[data-theme] .statusHint,html[data-theme] .playbackSummary,html[data-theme] .advancedGroup summary{color:var(--muted)}
html[data-theme] .advancedGroup,html[data-theme] .fitGroup,html[data-theme] .waypointRow{border-color:var(--line)}
html[data-theme] .outputList,html[data-theme] .queryResult,html[data-theme] .pathList,html[data-theme] .segmented,html[data-theme] .modalCard canvas{background:var(--bg);border-color:var(--line)}
html[data-theme] .outputItem{color:var(--soft);border-color:var(--line)}
html[data-theme] .outputItem:hover,html[data-theme] .outputItem.active{background:var(--hover);color:var(--accent)}
html[data-theme] .segmented button.active{background:var(--hover)!important;color:var(--accent)!important}
html[data-theme] .switchRow input,html[data-theme] .miniSwitch i{background:var(--line2)}
html[data-theme] .switchRow input:checked,html[data-theme] .miniSwitch input:checked+i{background:var(--accent)}
html[data-theme] .switchRow input:checked:after,html[data-theme] .miniSwitch input:checked+i:after{background:var(--portfolio-accent-ink)}
html[data-theme] input[type=range]{accent-color:var(--accent)}
html[data-theme] .viewport{background:var(--bg)}
html[data-theme] .viewbar,html[data-theme] .legend,html[data-theme] .toast{background:var(--panel);border-color:var(--line2);color:var(--text)}
html[data-theme] .drop strong,html[data-theme] .legendTitle,html[data-theme] .legendTicks{color:var(--text)}
html[data-theme] .drop svg{color:var(--accent)}
html[data-theme] .loading,html[data-theme] .modal{background:color-mix(in srgb,var(--bg) 85%,transparent)}
html[data-theme] .progressTrack{background:var(--panel2)}
html[data-theme] .progressBar{background:var(--accent)}
html[data-theme] .waypointRow{background:var(--panel)}
html[data-theme] .waypointRow span{color:var(--text)}
html[data-theme] .waypointRow span b{background:var(--hover);color:var(--accent)}
html[data-theme] .waypointAddSlot{border-color:var(--line2)!important;color:var(--muted)!important}
html[data-theme] .waypointAddSlot:hover,html[data-theme] .waypointAddSlot.active{border-color:var(--accent)!important;background:var(--hover)!important;color:var(--accent)!important}
html[data-theme] .tmMedia button{color:var(--muted)!important}
html[data-theme] .tmMedia button:hover,html[data-theme] .tmMedia button.active,html[data-theme] .compactToggle.active{background:var(--hover)!important;color:var(--accent)!important}
html[data-theme] .imprintLink:hover{color:var(--accent)}
html[data-theme] .tmSpeed output,html[data-theme] .playTimeRow output,html[data-theme] .loadingPhase{color:var(--text)}