/* Shell colors only. Canvas, SVG plots, material swatches and 3D scenes retain
   their authored colors; no inversion/filter or business DOM replacement. */
:root{--bg:#f6f8fb;--panel:#fff;--raised:#edf2f6;--border:#b9c8d4;--text:#142331;--muted:#43566b;--action:#24656d;--action-hover:#1b5057;--action-text:#fff;--focus:#156c9a;--gold:var(--action);--green:#186b59;--blue:#315ba0;--red:#a52b39;color-scheme:light}
:root[data-theme=dark]{--bg:#152330;--panel:#203241;--raised:#293f51;--border:#60788c;--text:#e6eff4;--muted:#9bafbe;--action:#9cdbd9;--action-hover:#b8ece8;--action-text:#152330;--focus:#9bd8ff;--gold:var(--action);--green:#8ad5bc;--blue:#a5c8ff;--red:#ffb5bd;color-scheme:dark}
#themeToggle{display:block;flex:none;align-self:stretch;padding:9px 10px;background:#254862;color:#f0f7fc;border:1px solid #84a4bb;font-size:12px;min-height:40px;white-space:nowrap}
#themeToggle:hover{background:#335d79}#themeToggle:focus-visible{outline:3px solid #9bd8ff}
@media(max-width:960px){#themeToggle{align-self:center;margin-left:auto}}
body{background:var(--bg);color:var(--text)}
:root[data-theme=dark] :where(button,input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea){background:var(--panel)!important;color:var(--text)!important;border-color:var(--border)!important}
:root[data-theme=dark] button:hover{background:var(--raised)!important}
:root[data-theme=dark] :is(button.primary,.tabs button.active,.scaleNav button.active){background:var(--action)!important;color:var(--action-text)!important}
:root[data-theme=dark] :is(button,input,select,textarea,summary,a):focus-visible{outline-color:var(--focus)}
:root[data-theme=dark] :is(.visualpanel,.inspector,.chartpanel,.phenomena,.evidencecard,.sourcecard,dialog,.sample,.timeline){background:var(--panel);color:var(--text);border-color:var(--border)}
:root[data-theme=dark] :is(.inspecttitle,.viewerbar,.scaleNav,.pattern-control,.equipmentPanel,.inspector details,.lessonGrid button,.statusline,#spectrumResult,#runRecords .sourcecard){background:var(--raised);color:var(--text);border-color:var(--border)}
:root[data-theme=dark] :is(.controlhead label,.pattern-control label,.timelineheading,.timelineheading span:last-child,.timelinefooter,.metric b,.lessonGrid b,summary,#guide li){color:var(--text)}
:root[data-theme=dark] :is(.muted,.hint,.intro,.workspace-title p,.control>small,.pattern-control small,.equipmentPanel summary span,.equipmentPanel small,.metric em,.sample small,.lessonGrid p){color:var(--muted)}
:root[data-theme=dark] :is(a,.textbutton,.eyebrow,.inspecttitle span,.calibration b,.lessonGrid span,.sample .pattern-tag){color:var(--action)}
:root[data-theme=dark] .note{background:#223f46;color:#cae8e8;border-color:var(--action)}
:root[data-theme=dark] :is(th,caption){background:var(--raised);color:var(--text)}
:root[data-theme=dark] :is(td,th,fieldset){border-color:var(--border)}
:root[data-theme=dark] .error{color:var(--red)}
:root[data-theme=dark] .dirty{color:#ffd18c!important}
:root[data-theme=dark] :is(input[aria-invalid=true],input:invalid){background:#4c2936!important;border-color:var(--red)!important}
:root[data-theme=dark] .equipmentPanel p{color:var(--muted)}
/* Explicit overrides for dynamically authored light cards; preserve stage
   highlight differences and keep independent fixed-color drawing contexts. */
:root[data-theme=dark] .program-equipment{background:var(--panel)!important;color:var(--text)!important;border-color:var(--border)!important}
:root[data-theme=dark] [aria-label="当前声明阶段"]{background:var(--raised)!important;color:var(--text)!important;border-color:var(--border)!important}
:root[data-theme=dark] [aria-label="当前声明阶段"] p{color:var(--muted)!important}
:root[data-theme=dark] #recipeProgramStages>span{color:#142331!important;color-scheme:light}
:root[data-theme=dark] .program-equipment-viewport{color:#243d4a;color-scheme:light}
:root[data-theme=dark] .program-equipment-viewport p{color:#243d4a!important}
:root[data-theme=dark] .recipe-feature-viewport p{color:#dce9ff!important}
:root[data-theme=dark] #recipeObservationWorkspace :is(.recipe-observation-heading,.recipe-observation-toolbar,.recipe-observation-independent,#recipeProgramStatus){background:var(--raised);color:var(--text)}
:root[data-theme=dark] #recipeObservationWorkspace :is(.recipe-observation-badge,.recipe-observation-geometry .recipe-observation-badge){background:var(--raised);color:var(--action)}
:root[data-theme=dark] #recipeObservationWorkspace :is(.recipe-observation-kicker,.recipe-observation-toolbar-title,#recipeProgramReplayStatus){color:var(--action)}
/* Keep navigation distinct from dark shell form controls. */
:root[data-theme=dark] nav button{background:transparent!important;color:#d3dfeb!important}
:root[data-theme=dark] nav button.active{background:#dcefed!important;color:#15394c!important}
:root[data-theme=dark] :is(.filmEditor,.processLedgerPanel,.equipmentComponents){background:var(--raised);color:var(--text);border-color:var(--border)}
:root[data-theme=dark] :is(.filmEditor legend,.filmFields label,.processLedgerPanel summary,.equipmentPanel summary,.equipmentPanel>label){color:var(--text)}
:root[data-theme=dark] :is(.stateHeading span,#processLedger p,#processLedger small){color:var(--muted)}
:root[data-theme=dark] .stateHeading b{color:var(--action)}

/* Keep action tokens true in both themes. Explicit hover preserves readable
   foregrounds rather than inheriting the generic control hover background. */
.primary{background:var(--action);color:var(--action-text);border-color:var(--action)}
.primary:hover{background:var(--action-hover);color:var(--action-text);border-color:var(--action-hover)}
:root[data-theme=dark] button.primary:hover{background:var(--action-hover)!important;color:var(--action-text)!important}
:root[data-theme=dark] #themeToggle{background:var(--panel)!important;color:var(--text)!important;border-color:var(--border)!important}
:root[data-theme=dark] #themeToggle:hover{background:var(--raised)!important}
/* Both themes: unbroken record identities must wrap inside their grid cards.
   Evidence tables keep their own scroll area rather than widening the page. */
#research,#research>.sourcecard,#research .filmFields,#runRecords,#runRecords>.sourcecard{min-width:0}
#research>.sourcecard,#research :is(pre,textarea,#comparisonTable,#comparisonPlots){max-width:100%}
#runRecords{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
#runRecords>.sourcecard{overflow-wrap:anywhere}
#runRecords :is(b,p,a){overflow-wrap:anywhere;word-break:normal}
#research :is(pre,#comparisonTable){overflow-x:auto}
#research table{max-width:100%;overflow-x:auto}

.execution-endpoint{border-top:2px solid var(--border, #64748b);margin-top:24px;padding-top:16px}.endpoint-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}.endpoint-fields label{display:flex;flex-direction:column;gap:5px;min-width:0}.endpoint-fields label[hidden]{display:none}.endpoint-fields input,.endpoint-fields select,.endpoint-fields textarea{width:100%;box-sizing:border-box;min-width:0}.endpoint-fields .endpoint-csv{grid-column:1/-1}.execution-endpoint table{width:100%;margin:12px 0}.execution-endpoint th{text-align:left}.execution-endpoint>div:last-child{display:flex;flex-wrap:wrap;gap:8px}.execution-endpoint>div:last-child details{width:100%}