:root{color-scheme:light}
#theme-toggle{display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
#theme-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#theme-toggle .theme-moon{display:none}
:root[data-theme=dark]{color-scheme:dark;--surface:#2b2b2b;--raised:#373737;--border:#494949;--text:#e4e4e4;--muted:#adadad;--accent:#acacac}
:root[data-theme=dark] #theme-toggle .theme-sun{display:none}
:root[data-theme=dark] #theme-toggle .theme-moon{display:block}
:root[data-theme=dark] body{background:#202020;color:var(--text)}
:root[data-theme=dark] :is(.topbar,.toolbar,.assets-panel,.properties-panel,.left-editor-panel,.left-editor-panel .panel-heading,dialog,.studio-color-picker,.font-popup){background:var(--surface);color:var(--text);border-color:var(--border)}
:root[data-theme=dark] :where(button,select,textarea,input:not([type=range]):not([type=checkbox]):not([type=file]):not([type=color])){background:var(--raised);color:var(--text);border-color:var(--border)}
:root[data-theme=dark] button:hover{background:#454545}
:root[data-theme=dark] button.primary{background:#535353;border-color:#616161;color:#fff}
:root[data-theme=dark] button.primary:hover{background:#606060}
:root[data-theme=dark] :is(.document-title,.section-title,.image-info-heading strong){color:var(--text)}
:root[data-theme=dark] :is(small,.muted,.member-name,.badge,.selection-hint,.asset-tip,.history-help,.history-note,.history-number,.history-state,.check-label,.measurement-note,.prototype-note,.fill-card p,.fill-card label,.extra-properties label,.extra-properties p,.font-picker-field>label,.font-group-label,.stage-caption,.paper-label,.paper-bottom-label,dialog p,#font-info,#font-results,#draft-state,#draw-settings p,#image-info-values dt,#context-title,#context-opacity,.studio-color-picker .color-hex-label){color:var(--muted)}
:root[data-theme=dark] :is(.badge,.divider,.fill-card,.prototype-note,.rotation-field,.field-grid label,.history-list,.history-row,.saved-design,.context-style-field,#context-opacity,#image-info-values>div,.font-popup #font-results,.left-editor-panel>.assets-panel:not([hidden])+#properties-content:not([hidden])){border-color:var(--border)}
:root[data-theme=dark] :is(.divider,.context-separator){background:var(--border)}
:root[data-theme=dark] .tool-rail{background:#252525;border-color:var(--border)}
:root[data-theme=dark] .tool-rail button{background:transparent;color:var(--muted);border-color:transparent}
:root[data-theme=dark] .tool-rail button:hover{background:var(--raised);color:var(--text)}
:root[data-theme=dark] :is(.tool-rail button[aria-pressed=true],.history-sidebar #tab-history,.history-row.current,.group-status,.quality,.color-mode){background:#323232;color:var(--accent);border-color:#4e4e4e}
:root[data-theme=dark] :is(.history-row.current .history-jump,.history-row.current .history-state,.group-status small,.quality p,#font-info a,.asset-tip>span,.upload-zone strong,#image-info-values dd){color:var(--accent)}
:root[data-theme=dark] .group-status>svg{fill:#323232}
:root[data-theme=dark] .quality.warning{background:#433625;color:#f1c17e}
:root[data-theme=dark] .quality.warning p{color:#d2b591}
:root[data-theme=dark] .stage-panel{background-color:#1e1e1e;background-image:radial-gradient(#3b3b3b .7px,transparent .7px)}
:root[data-theme=dark] .stage-caption b{background:var(--raised);color:var(--muted)}
:root[data-theme=dark] .stage-footer{background:#252525e8;border-color:var(--border);color:var(--muted)}
/* Print surfaces and actual color swatches retain their original colors. */
:root[data-theme=dark] #paper{color-scheme:light;background:#fff;box-shadow:0 7px 30px #0006}
:root[data-theme=dark] :is(.field-grid label,.history-list,.font-search-wrap,.upload-zone){background:#262626;border-color:var(--border);color:var(--muted)}
:root[data-theme=dark] .upload-zone.dragging{background:#3a3a3a}
:root[data-theme=dark] :is(.history-jump,.history-remove,.flyout-close,.font-option,.color-picker-heading button){background:transparent}
:root[data-theme=dark] :is(.font-option.is-active,.font-option:hover,.history-jump:hover){background:#3c3c3c}
:root[data-theme=dark] .font-option[aria-selected=true]{color:var(--accent)}
:root[data-theme=dark] :is(#history-delete,.history-remove:hover){background:#3c2d2d;color:#f2a897;border-color:#65473f}
:root[data-theme=dark] #studio-confirm{border-color:var(--border)}
:root[data-theme=dark] .confirm-symbol{background:#373737;color:var(--accent)}
:root[data-theme=dark] #confirm-message{color:var(--muted)}
:root[data-theme=dark] #studio-context{background:#2f2f2ff7;border-color:var(--border);color:var(--text);box-shadow:0 12px 40px #0006}
:root[data-theme=dark] #studio-context button{background:transparent;color:var(--text)}
:root[data-theme=dark] #studio-context button:hover{background:#404040;color:var(--accent)}
:root[data-theme=dark] #studio-context .context-danger{color:#f2a897}
:root[data-theme=dark] .saved-design .design-thumbnail{background:#3c3c3c;border-color:var(--border)}
:root[data-theme=dark] :is(.left-editor-panel,.studio-color-picker,.font-popup,dialog){box-shadow:0 12px 40px #0005}
:root[data-theme=dark] dialog::backdrop{background:#0c0c0ca6}
:root[data-theme=dark] :is(#dtf-app *,#font-options,.studio-color-picker){scrollbar-color:#686868 transparent}
:root[data-theme=dark] #dtf-app ::-webkit-scrollbar-thumb{background-color:#686868}
:root[data-theme=dark] #dtf-app ::-webkit-scrollbar-thumb:hover{background-color:#848484}
@media(max-width:1100px){.top-actions{gap:6px}.top-actions>button{padding:8px 10px}.topbar{gap:16px}.document-title{min-width:0}#design-title{display:inline-block;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}}

:root[data-theme=dark] :is(#font-trigger,#add-font,#local-font-paths input,#design-name){background:var(--raised);color:var(--text);border-color:var(--border)}
:root[data-theme=dark] .design-name-label{color:var(--muted)}
/* Explicit surface selectors override light input backgrounds in nested widgets. */
:root[data-theme=dark] :is(#properties-content,#studio-context,.studio-color-picker,dialog) :is(input[type=number],input[type=text],input[type=search],textarea,select,.color-hex){background:#383838;color:#f5f5f5;border-color:#646464;caret-color:#fff;opacity:1}
:root[data-theme=dark] :is(#properties-content,#studio-context,.studio-color-picker,dialog) input::placeholder,
:root[data-theme=dark] :is(#properties-content,dialog) textarea::placeholder{color:#b9b9b9;opacity:1}
:root[data-theme=dark] :is(#properties-content,#studio-context) input[type=color]{background:#383838;border-color:#646464}
:root[data-theme=dark] #text-tools .field-grid label{background:transparent;color:#cecece;border:0}
:root[data-theme=dark] .text-settings-section{border-color:#505050}
:root[data-theme=dark] #text-tools .text-settings-section h3{color:#e7e7e7}
:root[data-theme=dark] #properties-content .extra-properties{border-color:#505050}
:root[data-theme=dark] #text-tools small{color:#bcbcbc}
:root[data-theme=dark] #studio-context .context-style-field label{color:#e0e0e0}
:root[data-theme=dark] #context-opacity output{color:#bebebe}
:root[data-theme=dark] #properties>.field-grid>label,
:root[data-theme=dark] #properties>.rotation-field{background:#383838;border-color:#646464;color:#c8c8c8}
:root[data-theme=dark] #properties-content #properties>:is(.field-grid,.rotation-field) input{background:transparent;border:0;color:#f5f5f5}
:root[data-theme=dark] #properties>.field-grid>label:focus-within,
:root[data-theme=dark] #properties>.rotation-field:focus-within{border-color:#acacac;box-shadow:0 0 0 2px #acacac26}
:root[data-theme=dark] #properties-content :is(input,textarea,select,button):focus-visible,
:root[data-theme=dark] #studio-context :is(input,button):focus-visible{border-color:#acacac;box-shadow:0 0 0 2px #acacac33}
:root[data-theme=dark] #properties-content #properties>:is(.field-grid,.rotation-field) input:focus-visible{outline:none;box-shadow:none}


/* AB Studio: monochrome identity, with semantic warnings kept in color. */
:root{--surface:#fff;--raised:#f3f3f3;--border:#dedede;--text:#202020;--muted:#727272;--accent:#222}
:root[data-theme=dark]{--surface:#242424;--raised:#303030;--border:#444;--text:#ededed;--muted:#b1b1b1;--accent:#e5e5e5}
.ab-brand-mark,.ab-loading-mark{display:block;flex:none;border-radius:10px}
.ab-loading-mark{margin:0 auto 16px}
.brand{min-width:210px}.brand strong{letter-spacing:-.5px}
button.primary{background:#171717;border-color:#171717;color:#fff}
button.primary:hover{background:#333;border-color:#333}
:root[data-theme=dark] button.primary{background:#ededed;border-color:#ededed;color:#171717}
:root[data-theme=dark] button.primary:hover{background:#fff}
:root[data-theme=dark] .ab-brand-mark,:root[data-theme=dark] .ab-loading-mark{outline:1px solid #555}
#add-images{white-space:nowrap;font-size:12px}

:root{--panel-help:#606060}
:root[data-theme=dark]{--panel-help:#c4c4c4}
:root :is(.left-editor-panel,.history-sidebar) :is(.selection-hint,.measurement-note,.layer-caption small,.history-help,.history-note,.group-status small,.check-label,.section-title small){color:var(--panel-help)}
:root #properties-content :is(.extra-properties p,small),:root #font-info,:root #font-results{color:var(--panel-help)}

:root #properties-content :is(.selection-hint,.measurement-note,.check-label,.section-title small),:root #layers-panel .layer-caption small,:root #history-panel :is(.history-help,.history-note){color:var(--panel-help)}

/* Separate the pasteboard from the surrounding editor panels. */
:root .stage-panel{background-color:#d7d7d7;background-image:radial-gradient(#c5c5c5 .7px,transparent .7px)}
:root[data-theme=dark] .stage-panel{background-color:#3b3b3b;background-image:radial-gradient(#484848 .7px,transparent .7px)}