/* SilaiLink UI kit — the Skin Lab component language over the classes every surface already uses.
   Loaded AFTER each page's own styles so it wins. Token-driven: works in Neon Noir and Warm. */
body{font-family:var(--f-body);letter-spacing:0;}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:9;background:var(--overlay);}
h1,h2,h3,h4,.wq,.stat .n,.stat b,.north b,.tile .v{font-family:var(--f-display);letter-spacing:var(--tracking);}
/* eyebrows: every small label goes mono, uppercase, tracked */
.wlbl,.sect,.stat span,.stat .l,.lbl,.cell-tag,.eyebrow,.ctrl-label,.tag,th,.who,.hier,.stamp,.readout .k,.tile .k,.tile .d,.otp-note,.side .grp b{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:var(--caps-track);text-transform:uppercase;color:var(--mut);font-weight:500;}
.wlbl{margin:10px 0 6px;}
/* panels & cards: flat 1px line, 5px radius, no candy glow (glow is reserved for the primary action) */
.panel,.card,.stat,.tier,.form,.north,.tile,.readout{border-radius:var(--radius) !important;border:1px solid var(--line) !important;box-shadow:none !important;background:var(--panel);}
.stat{padding:14px 16px;}
.stat .n,.stat b{font-size:30px;line-height:1;font-variant-numeric:tabular-nums;font-weight:700;}
.stat.hot .n,.stat.hot b{color:var(--ink);}
/* buttons: primary = solid accent with glow; .ghost = outlined accent */
.btn,button.btn,a.btn,.dlbtn,.wabtn{font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:var(--tracking);border-radius:var(--radius) !important;
  border:1px solid var(--ink);background:var(--ink);color:var(--on-ink);box-shadow:var(--glow);padding:10px 18px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;}
.btn.ghost,.wabtn{background:transparent;color:var(--ink);box-shadow:none;}
.btn.acc,.btn.mar{background:var(--amber);border-color:var(--amber);color:var(--on-amber);box-shadow:none;}
.btn.sm,.btn.small{padding:6px 12px;font-size:12.5px;}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none;}
/* pills with an LED */
.pill,.chip:not(.sl-theme *),.badge{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid currentColor;background:transparent;display:inline-flex;align-items:center;gap:6px;}
.pill::before,.chip.g::before,.chip.ok::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.pill.pB,.pill.run{color:var(--acc2);} .pill.pC{color:var(--amber);} .pill.ok,.chip.g{color:var(--good);} .pill.bad{color:var(--bad);} .pill.idle{color:var(--mut);}
/* tables: mono uppercase headers on a quiet line, no filled header bars; first cell in display font */
table th{background:transparent !important;color:var(--mut) !important;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:500;padding:0 12px 9px;border-bottom:1px solid var(--line);}
table td{border-top:1px solid var(--line);border-bottom:0;padding:10px 12px;vertical-align:middle;}
table tr td:first-child{font-family:var(--f-display);font-weight:600;}
table{background:transparent !important;box-shadow:none !important;border-radius:0 !important;}
/* inputs */
input:not([type=checkbox]):not([type=radio]),select,textarea{background:var(--bg) !important;border:1px solid var(--line) !important;border-radius:var(--radius) !important;color:var(--txt);font-family:var(--f-body);font-size:13.5px;padding:10px 12px;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink) !important;box-shadow:0 0 0 2px rgba(var(--ink-rgb),.18);}
/* factory portal tab nav → sidebar items with the inset accent bar */
.tnav .tlink{border-radius:var(--radius);font-size:13.5px;color:var(--mut);}
.tnav .tlink.on{color:var(--txt);background:var(--panel2);box-shadow:inset 2px 0 0 var(--ink);}
@media (max-width:920px){ .tnav .tlink.on{box-shadow:inset 0 -2px 0 var(--ink);} }
/* progress bars */
.bar i,.pbar i,.prog i{background:var(--ink);}
/* live / running state uses the cyan counter-light, never the primary */
.live,.run,.now .pill,.stg.now{color:var(--acc2);}
/* the theme switch stays as designed */
.sl-theme{font-family:var(--f-mono);text-transform:none;letter-spacing:0;}

/* ---- Brutalist neon: 2px hard edges, zero radius, offset shadows, Archivo Black uppercase headlines ---- */
:root[data-theme="brutal"] .panel,:root[data-theme="brutal"] .card,:root[data-theme="brutal"] .stat,:root[data-theme="brutal"] .tier,:root[data-theme="brutal"] .form,:root[data-theme="brutal"] .north,:root[data-theme="brutal"] .tile,:root[data-theme="brutal"] .readout{border-width:2px !important;border-radius:0 !important;}
:root[data-theme="brutal"] .stat,:root[data-theme="brutal"] .tier.hot,:root[data-theme="brutal"] .north{box-shadow:5px 5px 0 var(--acc2) !important;}
:root[data-theme="brutal"] h1{font-family:'Archivo Black','Chakra Petch',sans-serif;text-transform:uppercase;letter-spacing:-.01em;}
:root[data-theme="brutal"] h2,:root[data-theme="brutal"] .wq{font-family:'Archivo Black','Chakra Petch',sans-serif;text-transform:uppercase;font-weight:400;}
:root[data-theme="brutal"] .btn,:root[data-theme="brutal"] button.btn,:root[data-theme="brutal"] a.btn,:root[data-theme="brutal"] .dlbtn,:root[data-theme="brutal"] .wabtn{border-width:2px;border-radius:0 !important;text-transform:uppercase;font-family:'Chakra Petch','Mukta',sans-serif;letter-spacing:.06em;}
:root[data-theme="brutal"] .btn:not(.ghost):not(.sm):not(.small){box-shadow:5px 5px 0 var(--acc2);}
:root[data-theme="brutal"] .btn.ghost{box-shadow:none;border-color:var(--txt);color:var(--txt);}
:root[data-theme="brutal"] .pill,:root[data-theme="brutal"] .chip:not(.sl-theme *),:root[data-theme="brutal"] .badge,:root[data-theme="brutal"] .bar,:root[data-theme="brutal"] .bar i{border-radius:0 !important;}
:root[data-theme="brutal"] input:not([type=checkbox]):not([type=radio]),:root[data-theme="brutal"] select,:root[data-theme="brutal"] textarea{border-width:2px !important;border-radius:0 !important;}
:root[data-theme="brutal"] input:focus,:root[data-theme="brutal"] select:focus,:root[data-theme="brutal"] textarea:focus{box-shadow:4px 4px 0 var(--acc2);}
:root[data-theme="brutal"] table th{border-bottom:2px solid var(--line);}
:root[data-theme="brutal"] table td{border-top:1px solid var(--line2);}
:root[data-theme="brutal"] .tnav .tlink.on{box-shadow:inset 3px 0 0 var(--ink);border-radius:0;}
:root[data-theme="brutal"] .sl-theme{border-width:2px;}
:root[data-theme="brutal"] body{background-image:none;}

/* ---- Terminal / CRT: VT323 everywhere, zero radius, 1px phosphor lines, uppercase headings ---- */
:root[data-theme="crt"] body,:root[data-theme="crt"] input,:root[data-theme="crt"] select,:root[data-theme="crt"] textarea,:root[data-theme="crt"] button{font-family:'VT323','IBM Plex Mono',monospace;font-size:17px;}
:root[data-theme="crt"] h1{font-size:34px;text-transform:uppercase;} :root[data-theme="crt"] h2{text-transform:uppercase;}
:root[data-theme="crt"] .panel,:root[data-theme="crt"] .card,:root[data-theme="crt"] .stat,:root[data-theme="crt"] .tier,:root[data-theme="crt"] .form,:root[data-theme="crt"] .north,:root[data-theme="crt"] .tile,:root[data-theme="crt"] .readout,:root[data-theme="crt"] .btn,:root[data-theme="crt"] .pill,:root[data-theme="crt"] .chip:not(.sl-theme *),:root[data-theme="crt"] .badge,:root[data-theme="crt"] .bar,:root[data-theme="crt"] .bar i,:root[data-theme="crt"] input:not([type=checkbox]),:root[data-theme="crt"] select,:root[data-theme="crt"] textarea{border-radius:0 !important;}
:root[data-theme="crt"] .btn{box-shadow:none;}
:root[data-theme="crt"] .wlbl,:root[data-theme="crt"] .stat span,:root[data-theme="crt"] th{font-size:13px;}
/* ---- Clean tech-noir: no bloom anywhere ---- */
:root[data-theme="technoir"] .btn{box-shadow:none;}
:root[data-theme="technoir"] .stat.hot .n,:root[data-theme="technoir"] .stat.hot b{color:var(--ink);}