#themeToggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;flex:0 0 40px;padding:0}
/* Palette from the main generator: navy surfaces, cool blue accents. */
:root[data-theme=dark]{color-scheme:dark;--blue:#5b9fff;--line:#3a506b;--muted:#afc0d7;color:#e8f0fb;background:#111d2c}
:root[data-theme=dark] body{background:radial-gradient(circle at 50% 0,#20364f 0,#142334 34rem,#111d2c 72%)}
:root[data-theme=dark] header{background:#142030;border-color:#354b65}
:root[data-theme=dark] .brand{color:#f1f6ff}
:root[data-theme=dark] :is(.brand-light,.muted,.hint,.source,.text-button,.setting-label,.control-label,label,.subhead,.subhead span,.left-bottom,.left-bottom b,.small-icon,.modal-heading p,.modal-note,.template-card>span,.template-dialog-head p,.template-dialog-foot,.sheet-heading p,.sheet-actions span){color:#afc0d7}
:root[data-theme=dark] :is(main,dialog,.paper-size-panel,.canvas-toolbar,.download-options){background:#1c2b3e;color:#e8f0fb;border-color:#3a506b}
:root[data-theme=dark] :is(button,input,select,textarea){background-color:#17273b;color:#e8f0fb;border-color:#496581}
:root[data-theme=dark] input::placeholder{color:#9aafca}
:root[data-theme=dark] button:hover{background:#263e5b;border-color:#5b9fff}
:root[data-theme=dark] :is(.primary,.paper-segments [aria-pressed=true]){background:#176fe5;color:#fff;border-color:#176fe5}
:root[data-theme=dark] .primary:hover{background:#2a82f3}
:root[data-theme=dark] :is(.badge,.pill,.key){background:#243c59;color:#bad6ff}
:root[data-theme=dark] :is(.workspace,#sheetPreview){background-color:#111d2c}
:root[data-theme=dark] #stage{background-image:radial-gradient(#354b65 .7px,transparent .7px)}
:root[data-theme=dark] :is(footer,#dimension){color:#afc0d7}
:root[data-theme=dark] :is(.divider){background:#3a506b}
:root[data-theme=dark] .compact-top :is(.size-control select,.code-control select,#canvasOrientation,#formatSettings){background-color:#17273b;color:#e8f0fb;border-color:#496581}
:root[data-theme=dark] .paper-segments{background:#132238;border-color:#36506f}
:root[data-theme=dark] .paper-segments button{color:#afc0d7;background:transparent}
:root[data-theme=dark] .paper-segments [aria-pressed=true]{background:#176fe5;color:#fff}
:root[data-theme=dark] .compact-top .template-trigger{background:#243c59;color:#c6dfff;border:0}
:root[data-theme=dark] .compact-top .template-trigger:hover{background:#2d4b70}
:root[data-theme=dark] :is(.template-trigger small,.template-trigger .template-icon){color:#9bc6ff}
:root[data-theme=dark] #layers .layer{background:#17273b;border-color:#3a506b;color:#e8f0fb}
:root[data-theme=dark] #layers .layer:is(:hover,.hovered){background:#263e5b;border-color:#5b9fff;box-shadow:none}
:root[data-theme=dark] #layers .layer.active{background:#243f64;color:#bad9ff;border-color:#3a506b;box-shadow:none}
:root[data-theme=dark] #layers .layer .select-layer{background:none;color:inherit}
:root[data-theme=dark] :is(.layer .symbol,.layer .delete){color:#afc0d7}
:root[data-theme=dark] :is(.prop-heading,.chosen,.template-library>aside,.library-format-controls,.library-notice,.stepper){background:#213248;color:#e8f0fb;border-color:#3a506b}
:root[data-theme=dark] :is(.stepper input,.stepper button){background:transparent;color:#c6dfff}
:root[data-theme=dark] :is(.buttons .on,.catalog-item.selected,#templateCategories [aria-pressed=true],.orientation-toggle [aria-pressed=true]){background:#243f64;color:#bad9ff;border-color:#507caf}
:root[data-theme=dark] :is(.template-card,.chosen-item){background:#17273b;border-color:#3a506b;color:#e8f0fb}
:root[data-theme=dark] .template-card:hover{background:#213248;border-color:#5b9fff}
:root[data-theme=dark] .template-thumb{background:#111d2c}
:root[data-theme=dark] :is(#search,.source select){background-color:#17273b;color:#afc0d7}
:root[data-theme=dark] :is(.catalog-item .ci-icon,.catalog-item .tick){color:#bad9ff}
:root[data-theme=dark] .code-error{color:#ff718a}
:root[data-theme=dark] dialog::backdrop{background:#020b18aa}
:root[data-theme=dark] #toast{background:#e0ebfb;color:#142030}
/* Printed artwork is independent of the interface theme. */
:root[data-theme=dark] :is(#board,.template-thumb>svg,#sheetPreview>svg,.symbol-preview,.inline-text-editor){color-scheme:light;background:#fff;color:#111}
:root[data-theme=dark] #board{box-shadow:0 5px 24px #0005}
:root[data-theme=dark] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23afc0d7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E")!important}
