/* Shared readable controls. Loaded after page styles, including observer pages.
   Desktop baseline: 2560 × 1440. No extra rendering loop or visual effects. */
:root{
 --control-bg:#21314c;--control-text:#f0f5ff;--control-border:#6a7d9a;
 --control-hover:#2b4060;--control-selected:#2b4164;--control-selected-text:#e3eeff;
 --control-selected-border:#9fbbf0;--primary-bg:#99baf3;--primary-text:#10233e;--primary-hover:#b3ceff;
 --disabled-bg:#182437;--disabled-text:#8192aa;--disabled-border:#3a4b65;
 --danger-bg:#442737;--danger-text:#ffb1bc;--danger-border:#bc798c;
 --success-bg:#163e37;--success-text:#a1e7ce;--success-border:#669c8b;
 --warning-bg:#382f20;--warning-text:#f5cc88;--warning-border:#aa8958;
 --field-bg:#101c30;--field-text:#edf3ff;--field-placeholder:#adbed5;
 --focus-color:#a6c6ff;--tx:#edf3ff;--dim:#b1bfd4;
 --label-bg:#101b2c;--label-text:#edf3ff;--label-border:#526782;--label-muted:#b3c2d7;
 color-scheme:dark;
}
:root[data-theme=light]{
 --control-bg:#fff;--control-text:#253a58;--control-border:#8293ad;
 --control-hover:#edf3fd;--control-selected:#e1ebfe;--control-selected-text:#183c75;
 --control-selected-border:#4d70ad;--primary-bg:#2b57ab;--primary-text:#fff;--primary-hover:#21478e;
 --disabled-bg:#eef1f5;--disabled-text:#68758a;--disabled-border:#c0cad8;
 --danger-bg:#fff0f2;--danger-text:#992236;--danger-border:#c96b7d;
 --success-bg:#e2f2eb;--success-text:#175c4b;--success-border:#598f7d;
 --warning-bg:#fff4df;--warning-text:#795015;--warning-border:#af843c;
 --field-bg:#fff;--field-text:#172b48;--field-placeholder:#526580;
 --focus-color:#2857b0;--tx:#172b48;--dim:#4c607c;--acc:#275bb1;
 --ok:#19634e;--warn:#8c5815;--err:#a62c40;
 --label-bg:#fff;--label-text:#1c304e;--label-border:#91a3bd;--label-muted:#4f6380;
 color-scheme:light;
}
:root body{font-family:Inter,"Microsoft YaHei",system-ui,sans-serif}
:root body h2{color:var(--tx)}
:root body.workbench-page{background:var(--bg);color:var(--tx)}
:root .workbench-page a{color:var(--acc)}
:root .workbench-page .warn{color:var(--warn)}
:root .workbench-page .ok{color:var(--ok)}
:root :is(.v-tag.ai,.zone.ai){color:var(--danger-text);background:var(--danger-bg);border-color:var(--danger-border)}
:root :is(.v-tag.drama,.zone.drama){color:var(--success-text);background:var(--success-bg);border-color:var(--success-border)}
:root .v-tag.mixed{color:var(--warn);background:var(--panel2)}
:root .tree-page{--tx:#edf3ff;--dim:#b1bfd4}
:root[data-theme=light] .tree-page{--tx:#172b48;--dim:#4c607c;--line:#c2cedf;--acc:#275bb1}

/* Node labels and content cards keep their own shape; ordinary actions share states. */
:root body button:not(:where(.node-label,.branch-button,.result-card,.theme-toggle,.cosmic-motion)),
:root #detail button:not(:where(.node-label)),:root #logoutDialog button{
 font-family:inherit;font-size:14px;font-weight:550;line-height:1.45;
 color:var(--control-text);background:var(--control-bg);border:1px solid var(--control-border);
 border-radius:8px;padding:8px 13px;min-height:38px;cursor:pointer;box-shadow:none;
 transition:background-color .12s,border-color .12s,color .12s;
}
:root body button:not(:where(.node-label,.branch-button,.result-card,.theme-toggle,.cosmic-motion)):hover:not(:disabled),
:root #detail button:hover:not(:disabled),:root #logoutDialog button:hover:not(:disabled){
 color:var(--control-text);background:var(--control-hover);border-color:var(--focus-color);
}
:root body :is(button.primary,.btn.primary,.save-btn,.btn-login),:root #detail .primary{
 color:var(--primary-text);background:var(--primary-bg);border-color:var(--primary-bg);font-weight:600;
}
:root body :is(button.primary,.btn.primary,.save-btn,.btn-login):hover:not(:disabled),:root #detail .primary:hover:not(:disabled){
 color:var(--primary-text);background:var(--primary-hover);border-color:var(--primary-hover);
}
:root body :is(button.danger,.btn.danger),:root #detail .danger{
 color:var(--danger-text);background:var(--danger-bg);border-color:var(--danger-border);
}
:root body :is(button.danger,.btn.danger):hover:not(:disabled){color:var(--danger-text);background:var(--danger-bg);border-color:var(--danger-text)}
:root body :is(.view-tools button[aria-pressed=true],.fbtn.active,.big-btn.selected),
:root #detail .detail-tabs button[aria-selected=true]{color:var(--control-selected-text);background:var(--control-selected);border-color:var(--control-selected-border)}
:root body #treeEditToggle[aria-pressed=true]{color:var(--success-text);background:var(--success-bg);border-color:var(--success-border);font-weight:650}
:root body #treeEditToggle[aria-pressed=true]:hover{color:var(--success-text);background:var(--success-bg);border-color:var(--success-text)}
:root body .big-btn.ai{--control-text:var(--danger-text);--control-bg:var(--danger-bg);--control-border:var(--danger-border);--control-hover:var(--danger-bg)}
:root body .big-btn.drama{--control-text:var(--success-text);--control-bg:var(--success-bg);--control-border:var(--success-border);--control-hover:var(--success-bg)}
:root body .big-btn:is(.mixed,.arming){--control-text:var(--warning-text);--control-bg:var(--warning-bg);--control-border:var(--warning-border);--control-hover:var(--warning-bg)}
:root body .big-btn:is(.ai,.drama,.mixed,.arming){color:var(--control-text);background:var(--control-bg);border-color:var(--control-border)}
:root body .big-btn.selected{box-shadow:inset 0 0 0 2px currentColor;transform:none}
:root body .fb-btn.err{color:var(--danger-text);background:var(--danger-bg);border-color:var(--danger-border)}
:root body .fb-btn.ok{color:var(--success-text);background:var(--success-bg);border-color:var(--success-border)}
:root body .fb-btn.active{box-shadow:inset 0 0 0 1px currentColor}
:root body .cosmic-motion{color:#c5d3e8;background:#101b2ce8;font-size:12px;opacity:.8}
:root body button:disabled,:root #detail button:disabled,:root #logoutDialog button:disabled{
 color:var(--disabled-text)!important;background:var(--disabled-bg)!important;border-color:var(--disabled-border)!important;opacity:1;cursor:not-allowed;box-shadow:none;
}
:root body :is(button,a,input,select,textarea,summary):focus-visible{
 outline:2px solid var(--focus-color);outline-offset:3px;
}
:root body :is(input:not([type=checkbox]):not([type=radio]),select,textarea),
:root #detail :is(input:not([type=checkbox]),textarea),:root body #q{
 background:var(--field-bg);color:var(--field-text);border-color:var(--control-border);font-size:14px;line-height:1.65;
}
:root body input:focus,:root body textarea:focus{background:var(--field-bg);color:var(--field-text)}
:root body ::placeholder{color:var(--field-placeholder);opacity:1}
:root body :is(input[type=checkbox],input[type=radio]){accent-color:var(--acc)}

/* Small text/icon actions stay compact, but no longer rely on faint pastel text. */
:root body :is(button.text-btn,button.tag-edit-link,button.console-link,button.line-time){
 color:var(--acc);background:transparent;border-color:transparent;padding:6px 8px;min-height:32px;font-size:13px;
}
:root body :is(button.close-btn,button.back-btn){font-size:21px;min-width:38px;padding:4px 8px}
:root body #themeBtn{font-size:22px;line-height:1;min-width:38px;padding:6px}
:root body .pw-toggle{min-height:30px;font-size:13px;padding:4px 8px}
:root #detail .text-btn,:root #detail .tag-edit-link,:root #detail .line-time{font-size:13px;min-height:32px;color:var(--acc);background:transparent;border-color:transparent;padding:5px 7px}
:root #detail .close-btn{font-size:23px;min-width:38px;padding:2px 8px}
:root #detail .detail-tag{color:var(--control-selected-text);background:var(--control-selected);border-color:var(--control-selected-border);font-size:13px;min-height:32px;padding:5px 10px}
:root #detail .detail-tabs{gap:10px}
:root #detail .detail-tabs button{border-radius:6px 6px 0 0;font-size:14px;min-height:38px}
:root #detail .like-row button{color:var(--danger-text);background:var(--danger-bg);border-color:var(--danger-border)}
:root #logoutDialog #confirmLogout{color:var(--primary-text);background:var(--primary-bg);border-color:var(--primary-bg)}
:root #logoutDialog #logoutError{color:var(--err)}

/* Reading sizes and auxiliary states shared by the library, intake and management. */
:root .owner-main,:root .owner-panel{font-size:15px}
:root :is(.owner-hint,.owner-sub,.owner-status,.console-footnote,.console-update,.model-usage p,.model-usage small,.model-usage span,.voice-switch,.console-metric>small){font-size:13px;line-height:1.8}
:root :is(.model-usage strong,.console-metric>span,.console-table){font-size:13px}
:root :is(.meter-state.is-good,.history-guard){color:var(--ok)}
:root .meter-state.is-uncertain{color:var(--warn)}
:root .owner-error{color:var(--err)}
:root .owner-bar a{color:var(--dim);font-size:14px}
:root .owner-bar a.current{color:var(--tx);font-weight:650}
:root .card h4{font-size:16px}
:root .card p{font-size:14px;line-height:1.75}
:root :is(.mech,.mech b,.tag,.mech-tag){font-size:13px}
:root #detail :is(.line-text,.summary-text,.sk-value,.source-record,.attr){font-size:14px;line-height:1.9}
:root #detail :is(.video-controls-note,.source-link-box,.source-link-box small,.source-url,.sk-label,.mini-heading,.selection-tools button,.copy-actions span,.like-row small){font-size:12px}
:root #detail .summary-text{font-size:16px}
:root #detail .transcript-line{grid-template-columns:18px 46px minmax(0,1fr)}
:root #detail .transcript-line:not(:has(.line-time)){grid-template-columns:18px minmax(0,1fr)}
:root #detail .transcript-line .line-text{min-width:0}
:root #detail .transcript-line input{width:15px;height:15px}
:root .login-wrap .hint,:root .login-wrap .footer{opacity:1;color:var(--dim)}
:root .login-wrap .btn-login{font-size:16px;min-height:44px}
:root[data-theme=light] body:has(.login-wrap){background:var(--bg-gradient)}
:root[data-theme=light] .login-wrap .card{box-shadow:0 12px 36px #233c6214}

/* Tree labels are HTML text, independent of the canvas pixel budget. */
:root .tree-page .node-label{
 font-size:14px;font-weight:500;line-height:1.45;letter-spacing:0;max-width:280px;
 color:var(--label-text);background:var(--label-bg);border:1px solid var(--label-border);
 padding:5px 9px;border-radius:6px;text-shadow:none;box-shadow:none;
}
:root .tree-page .node-label.mechanism{font-size:16px;font-weight:650;padding:6px 10px;border-inline-start:3px solid var(--branch-color)}
:root .tree-page .node-label.root{font-size:18px;font-weight:650;letter-spacing:.5px;padding:8px 13px;max-width:290px}
:root .tree-page .node-label.is-dim{opacity:1;color:var(--label-muted);border-color:var(--line);background:var(--label-bg)}
:root .tree-page .node-label:is(:hover,:focus-visible,.is-selected){color:var(--label-text);background:var(--label-bg);border-color:var(--focus-color)}
:root .tree-page .node-label.is-selected{box-shadow:0 0 0 1px var(--control-selected-border)}
:root .tree-page .branch-button{font-size:14px;line-height:1.5;color:var(--tx)}
:root .tree-page .branch-button .count{font-size:13px;opacity:1;color:var(--dim)}
:root .tree-page .branch-button:is([aria-pressed=true],.editor-current){background:var(--control-selected);color:var(--control-selected-text);border-color:var(--control-selected-border)}
:root .tree-page :is(.intro,.nav-section,.stage-heading,.tree-edit-guide,.editor-breadcrumb,.tree-editor label,.tree-editor .muted,.tree-editor details,.tree-edit-notice,.map-legend,#mapHint){font-size:13px;line-height:1.7;opacity:1}
:root .tree-page .tree-edit-guide{color:var(--success-text)}
:root .tree-page :is(#treeEditToggle,.add-branch){font-size:14px}
:root .tree-page .view-badge{font-size:11px}
:root .tree-page .main-nav a{font-size:14px}
:root .tree-page .editor-root-target{font-size:13px;border-style:dashed}
:root .tree-page .tree-editor{width:355px}
:root .tree-page .result-card strong{font-size:15px}
:root .tree-page .result-card p{font-size:14px;line-height:1.7}
:root .tree-page .result-card small,:root .tree-page .result-footer{font-size:12px}
:root .tree-page .tree-drop-target{outline-color:var(--success-border)!important;background:var(--success-bg)!important;color:var(--success-text)!important}
:root .tree-page .tree-drop-invalid{outline-color:var(--danger-border)!important;color:var(--danger-text)!important}
@media(prefers-reduced-motion:reduce){:root body button{transition:none}}

/* Keyboard focus for lists rendered as divs (mechanism tree, theme switch). */
:root body :is(.mech,.theme-toggle,[role=button]):focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}