/* Shared component tokens keep all three palettes consistent across every page. */
html[data-theme="white"]{
  color-scheme:light;--canvas:#FCFFFF;--card:#FFFFFF;--sidebar:#F5FBFE;
  --ink:#18384B;--secondary:#637F90;--edge:#DCEAF0;--field:#FCFFFF;
  --soft:#EFF8FC;--selected:#DFF2FC;--accent:#0593C6;--accent-ink:#052C3C;
  --accent-text:#087CA5;--pink:#DB3996;--pink-soft:#FFF3FA;--pink-ink:#A62470;
  --positive:#247660;--positive-soft:#ECF9F5;--positive-edge:#C5E6DC;
  --shadow:0 6px 22px #32769907;--radius:16px;--backdrop:#163D5666;
}
html[data-theme="dark"]{
  color-scheme:dark;--canvas:#11171D;--card:#19222B;--sidebar:#151D25;
  --ink:#E6EEF4;--secondary:#9CADBC;--edge:#30404D;--field:#121B23;
  --soft:#202D38;--selected:#173849;--accent:#0593C6;--accent-ink:#001E2B;
  --accent-text:#71CAE8;--pink:#DB3996;--pink-soft:#332334;--pink-ink:#F0A9D3;
  --positive:#9DD3BC;--positive-soft:#1B302B;--positive-edge:#365347;
  --shadow:none;--radius:14px;--backdrop:#03090DD9;
}
html[data-theme="paper"]{
  color-scheme:light;--canvas:#EEEADF;--card:#F9F6EE;--sidebar:#E6E3D7;
  --ink:#303C36;--secondary:#68746B;--edge:#CECDBD;--field:#FDFBF6;
  --soft:#E8EBDD;--selected:#D9E3D6;--accent:#416657;--accent-ink:#FFFFFF;
  --accent-text:#385E4D;--pink:#AA5B48;--pink-soft:#F3E5DD;--pink-ink:#934631;
  --positive:#3D6552;--positive-soft:#E5EBDD;--positive-edge:#BFCFBA;
  --shadow:0 2px 0 #C7C9B626;--radius:7px;--backdrop:#363B3299;
}
html[data-theme]{--bg:var(--canvas);--surface:var(--card);--surface2:var(--soft);--line:var(--edge);--text:var(--ink);--muted:var(--secondary);--red:var(--pink-ink);--green:var(--positive);background:var(--canvas)}
html[data-theme] body{color:var(--ink);background:var(--canvas)}
html[data-theme] .sidebar{background:var(--sidebar);border-color:var(--edge)}
html[data-theme] .brand,html[data-theme] h1,html[data-theme] h2,html[data-theme] h3,html[data-theme] .panel h2{color:var(--ink)}
html[data-theme] .brand small,html[data-theme] .eyebrow,html[data-theme] .nav-title,html[data-theme] .muted,html[data-theme] small{color:var(--secondary)}
html[data-theme] .brand-icon{background:var(--accent);color:var(--accent-ink);box-shadow:none}
html[data-theme] nav button{color:var(--secondary);background:transparent;border:0}
html[data-theme] nav button:hover{color:var(--ink);background:var(--soft)}
html[data-theme] nav button.active{color:var(--accent-text);background:var(--selected);box-shadow:inset 3px 0 var(--accent)}
html[data-theme] nav button.active span{color:var(--accent-text)}
html[data-theme] nav b{background:var(--card);color:var(--secondary)}
html[data-theme] .sidebar-footer{border-color:var(--edge)}
html[data-theme] .status-dot{background:var(--positive);box-shadow:none}
html[data-theme] .panel,html[data-theme] .metric,html[data-theme] .device-card,html[data-theme] .settings-grid .panel{background:var(--card);border-color:var(--edge);box-shadow:var(--shadow);border-radius:var(--radius)}
html[data-theme] .workspace-main>.panel:first-child{background:var(--card)}
html[data-theme] .metric>p,html[data-theme] .metric>small,html[data-theme] .metric h2 small,html[data-theme] .stage,html[data-theme] .field-help,html[data-theme] .launch-footer,html[data-theme] .empty-state p,html[data-theme] .jobs>.muted,html[data-theme] .job small{color:var(--secondary)}
html[data-theme] .metric>p span{background:var(--soft);color:var(--accent-text)}
html[data-theme] .metric:nth-child(4)>p span{background:var(--pink-soft);color:var(--pink-ink)}
html[data-theme] .meter{background:var(--soft)}
html[data-theme] .meter i{background:var(--accent)}
html[data-theme] button,html[data-theme] .button{background:var(--soft);color:var(--ink);border-color:var(--edge);box-shadow:none}
html[data-theme] button:hover,html[data-theme] .button:hover{background:var(--selected);border-color:var(--accent)}
html[data-theme] .primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
html[data-theme] .primary:hover{background:var(--accent);filter:brightness(1.09);color:var(--accent-ink)}
html[data-theme] .secondary{background:var(--card)}
html[data-theme] .danger-outline,html[data-theme] #start-auto{background:var(--pink-soft);border-color:var(--edge);color:var(--pink-ink)}
html[data-theme] .danger-outline:hover,html[data-theme] #start-auto:hover{background:var(--pink-soft);border-color:var(--pink)}
html[data-theme] .danger{background:var(--pink);border-color:var(--pink);color:var(--canvas)}
html[data-theme] .text-button{background:transparent;color:var(--secondary);border:0}
html[data-theme] .text-button:hover{background:transparent;color:var(--accent-text)}
html[data-theme] .pill{color:var(--positive);background:var(--positive-soft);border-color:var(--positive-edge)}
html[data-theme] .pill.neutral{color:var(--secondary);background:var(--soft);border-color:var(--edge)}
html[data-theme] .pill.warn{color:var(--pink-ink);background:var(--pink-soft);border-color:var(--edge)}
html[data-theme] .launch-panel{background:var(--card);border-top:3px solid var(--accent)}
html[data-theme] .launch-panel>.eyebrow,html[data-theme] .settings-grid .panel>.eyebrow{color:var(--accent-text)}
html[data-theme] .settings-grid .panel:nth-child(4)>.eyebrow{color:var(--pink-ink)}
html[data-theme] label{color:var(--secondary)}
html[data-theme] input:not([type=checkbox]),html[data-theme] select,html[data-theme] textarea{background:var(--field);border-color:var(--edge);color:var(--ink);box-shadow:none}
html[data-theme] input:not([type=checkbox]):hover,html[data-theme] select:hover,html[data-theme] textarea:hover{border-color:var(--accent)}
html[data-theme] input::placeholder,html[data-theme] textarea::placeholder{color:var(--secondary);opacity:.75}
html[data-theme] .check input{accent-color:var(--accent)}
html[data-theme] .input-unit em{color:var(--secondary)}
html[data-theme] .estimate{background:var(--soft);border-color:var(--edge)}
html[data-theme] .estimate span{color:var(--secondary)}
html[data-theme] .estimate strong{color:var(--accent-text)}
html[data-theme] .launch-footer,html[data-theme] .settings-footer{border-color:var(--edge)}
html[data-theme] .empty-icon{background:var(--soft);border-color:var(--edge);color:var(--accent-text);box-shadow:none}
html[data-theme] .empty-state button{color:var(--accent-text);background:var(--soft);border-color:var(--edge)}
html[data-theme] .panel-bottom{color:var(--secondary);background:var(--soft);border-color:var(--edge);border-radius:0 0 var(--radius) var(--radius)}
html[data-theme] .file-tag{color:var(--accent-text);background:var(--soft);border-color:var(--edge)}
html[data-theme] .package-name{color:var(--accent-text)}
html[data-theme] .job{color:var(--ink);border-color:var(--edge)}
html[data-theme] .job i{background:var(--positive)}
html[data-theme] .job.error i,html[data-theme] .job.error p{color:var(--pink-ink);background:var(--pink)}
html[data-theme] .job.error p{background:transparent}
html[data-theme] .job.running i,html[data-theme] .job.queued i{background:var(--accent)}
html[data-theme] .compact-device{background:var(--soft);border-color:var(--edge)}
html[data-theme] .compact-device>span:first-child{background:var(--selected);color:var(--accent-text)}
html[data-theme] .notice{background:var(--soft);border-color:var(--edge);color:var(--ink)}
html[data-theme] .notice.error{background:var(--pink-soft);border-color:var(--pink);color:var(--pink-ink)}
html[data-theme] .device-top{background:var(--soft);border-color:var(--edge)}
html[data-theme] .device-top strong{color:var(--ink)}
html[data-theme] .device-screen{background:var(--field)}
html[data-theme] .device-info{background:var(--card)}
html[data-theme] .device-info>p{color:var(--ink)}
html[data-theme] .device-info>small{color:var(--secondary)}
html[data-theme] .terminal{background:var(--field);border-color:var(--edge);box-shadow:none}
html[data-theme] .log-line{color:var(--secondary)}
html[data-theme] .log-line.error,html[data-theme] .error{color:var(--pink-ink)}
html[data-theme] .login-shell{background:var(--canvas)}
html[data-theme] .login-card{background:var(--card);border-color:var(--edge);box-shadow:var(--shadow)}
html[data-theme] .login-card .brand-icon:after{background:var(--pink);border-color:var(--card)}
html[data-theme] .login-card .eyebrow{color:var(--accent-text)}
html[data-theme] .login-card .muted,html[data-theme] .login-card small{color:var(--secondary)}
html[data-theme] dialog{background:var(--card);color:var(--ink);border-color:var(--edge);box-shadow:var(--shadow);border-radius:var(--radius)}
html[data-theme] dialog::backdrop{background:var(--backdrop)}
html[data-theme] #viewer .viewer-content{background:var(--field);border-color:var(--edge)}
html[data-theme] .viewer-content p{color:var(--secondary)}
html[data-theme] .toast{background:var(--positive-soft);border-color:var(--positive-edge);color:var(--positive)}
html[data-theme] .toast.error{background:var(--pink-soft);border-color:var(--pink);color:var(--pink-ink)}
.theme-picker{display:flex;align-items:center;gap:8px;margin:0;font-size:11px;white-space:nowrap}
.theme-picker select{width:118px;min-height:35px;margin:0;padding:7px 8px;font-size:11px}
.login-theme-picker{position:absolute;top:23px;right:26px;z-index:2}
html[data-theme="paper"] .brand,html[data-theme="paper"] h1,html[data-theme="paper"] h2,html[data-theme="paper"] h3{font-family:Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:-.4px}
html[data-theme="paper"] header h1{font-size:31px}
html[data-theme="paper"] .eyebrow{font-family:ui-monospace,Consolas,monospace;letter-spacing:1px}
html[data-theme="paper"] .metric h2{font-family:ui-monospace,Consolas,monospace;font-size:27px;letter-spacing:-1px}
html[data-theme="paper"] .brand-icon,html[data-theme="paper"] button,html[data-theme="paper"] .button,html[data-theme="paper"] input,html[data-theme="paper"] textarea,html[data-theme="paper"] select,html[data-theme="paper"] .empty-icon,html[data-theme="paper"] .estimate{border-radius:5px}
html[data-theme="paper"] .launch-panel{border-top:3px double var(--accent)}
html[data-theme="paper"] .pill{border-radius:4px}
html[data-theme="paper"] .login-card{border-radius:8px}
@media(max-width:1150px){.header-actions{gap:9px}.theme-picker>span{display:none}.theme-picker select{width:100px}}
@media(max-width:600px){header{align-items:flex-start;flex-wrap:wrap;gap:15px}.header-actions{justify-content:space-between;flex-wrap:wrap;width:100%}.theme-picker>span{display:inline}.theme-picker select{width:120px}.login-theme-picker{top:17px;right:18px}.login-theme-picker>span{display:none}html[data-theme] .sidebar{background:var(--sidebar)}html[data-theme="paper"] header h1{font-size:25px}.login-card{margin-top:50px}}