:root{--bg:#3a4154;--top:#2d3347;--panel:#1e2434;--panel2:#111827;--green:#3dd6a3;--greenDark:#0a3d2a;--muted:#a0aab8;--red:#f87171;--yellow:#facc15}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden}body{background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:white}.app{width:100vw;height:100vh;display:flex;flex-direction:column;background:var(--bg)}.topbar{height:58px;background:var(--top);display:flex;align-items:center;justify-content:space-between;padding:7px 14px;border-bottom:1px solid rgba(255,255,255,.08)}.brandBlock{display:flex;align-items:center;gap:10px}.logo{height:42px;width:auto;object-fit:contain}.brandText{font-size:25px;font-weight:900;letter-spacing:.01em}.status{display:flex;align-items:center;gap:8px;color:#c8cdd8;font-size:12px;white-space:nowrap;flex:1;margin:0 16px}.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(61,214,163,.8)}.exitBtn{background:#42222b;border:1px solid rgba(248,113,113,.4);color:#fecaca;border-radius:7px;padding:6px 16px;font-size:13px;font-weight:900;cursor:pointer;letter-spacing:.05em;white-space:nowrap}.exitBtn:hover{background:#5a2d38}.jobbar{height:38px;background:#252c3d;display:grid;grid-template-columns:1fr 1fr 1.3fr 1fr;border-bottom:1px solid rgba(255,255,255,.08)}.jobitem{padding:5px 10px;border-right:1px solid rgba(255,255,255,.08);overflow:hidden}.jobitem:last-child{border-right:0}.lbl{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em;line-height:1}.val{display:block;color:white;font-size:15px;font-weight:800;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.main{flex:1;min-height:0;padding:10px;display:grid;grid-template-columns:1fr 255px;gap:10px}.mix{min-height:0;background:var(--panel);border-radius:9px;padding:12px;display:flex;flex-direction:column}.step{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.pill{background:#2d3550;border:1px solid rgba(255,255,255,.12);color:var(--green);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.pill.correction{color:var(--yellow);border-color:var(--yellow)}.mode{color:var(--muted);font-size:13px;font-weight:700}.product{background:var(--panel2);border-radius:10px;padding:12px;text-align:center}.product .lbl{font-size:13px}.product-code{font-size:72px;font-weight:950;letter-spacing:.03em;line-height:.95;margin-top:5px}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.metric{background:#2d3550;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px 10px;text-align:center}.metric .lbl{font-size:12px}.metric-val{font-size:31px;line-height:1.05;font-weight:900;margin-top:5px}.scale{flex:1;min-height:0;margin-top:10px;background:#151d2b;border:2px solid #4b5563;border-radius:12px;display:flex;flex-direction:column;justify-content:center;align-items:center}.scale.far{border-color:var(--red);box-shadow:0 0 24px rgba(248,113,113,.12)}.scale.close{border-color:var(--yellow);box-shadow:0 0 24px rgba(250,204,21,.13)}.scale.ready{border-color:var(--green);box-shadow:0 0 24px rgba(61,214,163,.25)}.scale.overState{border-color:var(--red);box-shadow:0 0 24px rgba(248,113,113,.25)}.scale .lbl{font-size:14px}.weight{font-size:88px;font-weight:950;letter-spacing:.02em;line-height:.95;margin-top:6px;color:white}.scale.far .weight,.scale.overState .weight{color:var(--red)}.scale.close .weight{color:var(--yellow)}.scale.ready .weight{color:var(--green)}.instruction{margin-top:6px;color:#d1d5db;font-size:23px;font-weight:900;letter-spacing:.04em}.next{height:70px;margin-top:10px;border:0;border-radius:9px;background:#2d3550;color:#7d8797;font-size:30px;font-weight:950;letter-spacing:.08em;width:100%}.next.ready{background:var(--green);color:var(--greenDark);cursor:pointer}.next.accept{background:#f59e0b;color:#451a03;cursor:pointer}.next.warn{background:#854d0e;color:#fef08a;border:1px solid rgba(250,204,21,.5);cursor:pointer}.side{min-height:0;display:flex;flex-direction:column;gap:10px}.progress{flex:1;min-height:0;background:var(--panel2);border-radius:9px;padding:10px;display:flex;flex-direction:column}.progress-title,.quick-title{color:var(--green);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}.list{min-height:0;display:flex;flex-direction:column;gap:5px;overflow:hidden}.ing{display:grid;grid-template-columns:30px 1fr 70px;align-items:center;gap:6px;min-height:32px;background:#2d3550;border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:5px 7px;color:#fff}.ing.current{border-color:var(--green);box-shadow:0 0 0 1px rgba(61,214,163,.5)}.ing.done{opacity:.48}.ing.correction{border-color:var(--yellow)}.num{color:var(--muted);font-weight:900;font-size:12px}.code{font-weight:900;font-size:15px}.grams{text-align:right;color:#d1d5db;font-size:13px;font-weight:800}.quick{flex-shrink:0;background:var(--panel2);border-radius:9px;padding:10px}.quick-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.smallbtn{min-height:42px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:#2d3550;color:white;font-size:13px;font-weight:900}footer{height:20px;text-align:center;font-size:10px;color:#8e98aa;background:#252c3d;padding-top:4px}.overlay{position:fixed;inset:0;background:rgba(17,24,39,.76);display:none;align-items:center;justify-content:center;padding:16px;z-index:50}.overlay.open{display:flex}.popup{width:min(760px,94vw);background:var(--panel);border-radius:12px;padding:16px;box-shadow:0 18px 60px rgba(0,0,0,.45)}.popup-title{color:var(--green);font-size:15px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}.key-display{background:#111827;border-radius:8px;min-height:58px;display:flex;align-items:center;justify-content:flex-end;padding:0 16px;color:white;font-size:34px;font-weight:950;letter-spacing:.06em;margin-bottom:10px}.searchDisplay{justify-content:center;font-size:24px}.keypad,.miniKeypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.miniKeypad{gap:5px;margin-bottom:10px}.k,.mk{min-height:50px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#2d3550;color:white;font-size:20px;font-weight:950}.k{min-height:58px;font-size:25px}.mk{min-height:44px;font-size:15px}.k.go{grid-column:span 2;background:var(--green);color:var(--greenDark)}.over{border:2px solid var(--red)}.over .popup-title{color:var(--red)}.over-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.over-card{background:#2d3550;border-radius:8px;padding:12px}.over-card b{display:block;font-size:25px;margin-top:5px}.actions,.simGrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:12px}.action{min-height:66px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#2d3550;color:white;font-size:15px;font-weight:950}.action.primary{background:var(--green);color:var(--greenDark)}.action.danger{background:#42222b;color:#fecaca;border-color:rgba(248,113,113,.45)}.finish{background:var(--green);color:var(--greenDark);border:0;border-radius:9px;min-height:70px;width:100%;font-size:28px;font-weight:950;letter-spacing:.05em;margin-top:14px}.searchbar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}.searchChoice{min-height:42px;border:1px solid rgba(255,255,255,.1);border-radius:7px;background:#2d3550;color:white;font-weight:900}.searchChoice.active{background:var(--green);color:var(--greenDark)}.resultList{max-height:320px;overflow:auto;display:flex;flex-direction:column;gap:8px}.result{border:1px solid rgba(255,255,255,.1);border-radius:8px;background:#2d3550;color:white;padding:11px;text-align:left;font-weight:900}.result small{display:block;color:#c8cdd8;margin-top:4px;font-weight:700}
/* Close button — prominent large version for find popup */
.closeBtnLarge{width:100%;min-height:58px;margin-top:14px;border:2px solid rgba(255,255,255,.2);border-radius:9px;background:#2d3550;color:white;font-weight:900;font-size:18px;letter-spacing:.06em;cursor:pointer}.closeBtnLarge:hover{background:#3a4466;border-color:rgba(255,255,255,.35)}
.closeBtn{width:100%;min-height:46px;margin-top:12px;border:0;border-radius:8px;background:#2d3550;color:white;font-weight:900}.finishBox{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.finishBox div{background:#2d3550;border-radius:8px;padding:14px}.finishBox b{display:block;font-size:22px;margin-top:5px}
/* New volume callout */
.newVolBox{background:#1a2235;border:1px solid rgba(250,204,21,.45);border-radius:7px;padding:8px 12px;color:var(--yellow);font-size:13px;font-weight:900;text-align:center;margin-bottom:10px}
/* RO confirm view */
.confirmSummary{font-size:16px;font-weight:900;color:white;margin-bottom:4px}.confirmMeta{font-size:12px;color:var(--muted);margin-bottom:10px}.confirmRoLabel{font-size:11px;font-weight:900;color:var(--green);text-transform:uppercase;letter-spacing:.07em;margin-bottom:4px}.roKeypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.roKeypad .k{min-height:54px;font-size:22px}.confirmActions{display:grid;grid-template-columns:1fr 1.6fr;gap:10px}
/* Sim dock */
.overlay.simDock{background:transparent;align-items:flex-end;justify-content:flex-end;pointer-events:none;padding:10px}.overlay.simDock .popup{pointer-events:auto;width:270px;max-width:270px;padding:12px;border:1px solid rgba(61,214,163,.45)}.simPopupPanel .popup-title{margin-bottom:8px}.simReadout{background:#111827;border-radius:8px;padding:9px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:8px}.simReadout span{color:#fff;font-size:18px;font-weight:950}.simReadout b{color:#3dd6a3;font-size:16px}.overlay.simDock .simGrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:0}.overlay.simDock .action{min-height:46px;font-size:13px}
/* Pour bar */
.pourWrap{width:88%;margin-top:14px}.pourTop{display:flex;justify-content:space-between;align-items:center;font-size:15px;font-weight:950;letter-spacing:.06em;color:#d1d5db;margin-bottom:6px}.pourTrack{width:100%;height:34px;background:#0f172a;border:1px solid rgba(255,255,255,.16);border-radius:999px;overflow:hidden;box-shadow:inset 0 0 10px rgba(0,0,0,.35)}.pourBar{height:100%;width:0%;background:var(--green);transition:width .04s linear}.pourBar.far{background:var(--green)}.pourBar.close{background:var(--yellow)}.pourBar.micro{background:#fb923c}.pourBar.ready{background:#38bdf8}.pourBar.over{background:var(--red)}
@media(max-width:900px){.main{grid-template-columns:1fr 220px}.product-code{font-size:60px}.weight{font-size:72px}.metric-val{font-size:26px}}

/* Scale settings popup */
.settingsScaleChoice{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:12px}
.scaleTypeBtn{background:#2d3550;border:2px solid rgba(255,255,255,.1);border-radius:9px;color:white;padding:14px 10px;cursor:pointer;text-align:center}
.scaleTypeBtn.active{border-color:var(--green);background:#1a3a2a}
.scaleTypeBtn:hover{border-color:rgba(255,255,255,.3)}
.scaleTypeName{font-size:16px;font-weight:900;letter-spacing:.05em}
.scaleTypeSub{font-size:11px;color:var(--muted);margin-top:4px;font-weight:700}
.scaleTypeBtn.psNotItem{background:#3a1f24;border-color:rgba(220,80,80,.45)}
.scaleTypeBtn.psNotItem .scaleTypeName{color:#ff8a8a}
.scaleTypeBtn.psNotItem:hover{border-color:rgba(220,80,80,.85)}
.comPortSelect{width:100%;background:#111827;border:1px solid rgba(255,255,255,.15);border-radius:7px;color:white;font-size:16px;font-weight:900;padding:10px 12px;margin-top:6px}
.settingsResult{min-height:24px;font-size:13px;font-weight:900;margin-top:10px;padding:8px 12px;border-radius:7px;text-align:center}
.settingsResult.ok{background:#0a3d2a;color:var(--green);border:1px solid rgba(61,214,163,.3)}
.settingsResult.fail{background:#42222b;color:#fecaca;border:1px solid rgba(248,113,113,.3)}
/* Find Mix — source badge (online vs offline/jsonl) */
.srcBadge{display:inline-block;font-size:10px;font-weight:900;letter-spacing:.06em;padding:2px 6px;border-radius:4px;vertical-align:middle;margin-right:5px}
.srcBadge.online{background:#0a3d2a;color:var(--green);border:1px solid rgba(61,214,163,.4)}
.srcBadge.offline{background:#3a2e0a;color:var(--yellow);border:1px solid rgba(250,204,21,.4)}
.result.offlineResult{border-color:rgba(250,204,21,.3)}
/* Confirm view — Formula vs Poured amount choice */
.amountChoiceRow{margin-bottom:12px}
.amtChoiceGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.amtChoice{min-height:54px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:#2d3550;color:white;font-weight:900;font-size:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer}
.amtChoice small{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.amtChoice.active{background:var(--green);color:var(--greenDark);border-color:var(--green)}
.amtChoice.active small{color:var(--greenDark)}
/* Topbar online reachability indicator */
.onlineStatus{display:flex;align-items:center;gap:6px;color:#c8cdd8;font-size:12px;white-space:nowrap;margin-right:14px;font-weight:700}
.dot.red{background:var(--red);box-shadow:0 0 10px rgba(248,113,113,.8)}
.dot.gray{background:#6b7280;box-shadow:none}
.dot.yellow{background:var(--yellow);box-shadow:0 0 10px rgba(250,204,21,.8)}
.statusDetailLink{background:none;border:0;color:#7dd3fc;font-size:11px;font-weight:900;text-decoration:underline;cursor:pointer;padding:0 0 0 6px;letter-spacing:.03em}
.statusDetailLink:hover{color:#bae6fd}
/* Status Detail popup */
.statusBlock{background:#111827;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:12px 14px;margin-bottom:10px}
.statusBlock.incident{border-color:rgba(250,204,21,.5);background:#2a2410}
.statusBlock.ok{border-color:rgba(61,214,163,.35);background:#0a2a1f}
.statusBlock h4{font-size:11px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.statusBlock .statusText{font-size:15px;font-weight:800;color:white;line-height:1.4}
.statusBlock .incidentItem{font-size:13px;font-weight:700;color:#e5e7eb;line-height:1.45;padding:6px 0;border-top:1px solid rgba(255,255,255,.06)}
.statusBlock .incidentItem:first-of-type{border-top:0;padding-top:0}
.statusFetched{font-size:11px;color:var(--muted);text-align:center;margin:8px 0 4px}
.statusLoading{text-align:center;color:var(--muted);padding:30px 10px;font-weight:700}
.statusError{background:#42222b;border:1px solid rgba(248,113,113,.35);color:#fecaca;padding:12px;border-radius:8px;font-weight:700;text-align:center}
/* Topbar — CSS grid with explicit columns so the online status / Status Detail link /
   EXIT button can never be pushed off-screen by a long scale-connected label. The
   scale column (minmax 0,1fr) is the only one that flexes; everything else holds
   its content size, and the scale label ellipsis-truncates if it can't fit. */
.topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:14px;justify-content:initial}
.status{margin:0;min-width:0}
.status #linkedStatus{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;display:block}
.onlineStatus{margin:0}
/* Clickable jobbar items (currently just RO) */
.jobitem.clickable{cursor:pointer;transition:background .12s}
.jobitem.clickable:hover{background:rgba(61,214,163,.08)}
.jobitem.clickable .editHint{color:var(--green);font-size:9px;opacity:.7;margin-left:4px}
/* Driver-missing topbar state — red text + pulsing dot so it's impossible to miss */
.status.driverMissing #linkedStatus{color:var(--red);font-weight:900}
.status.driverMissing .dot{background:var(--red);box-shadow:0 0 12px rgba(248,113,113,.9);animation:pulseRed 1.2s ease-in-out infinite}
@keyframes pulseRed{0%,100%{opacity:1}50%{opacity:.45}}
/* Export Offline Mixes popup */
.exportPresets{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.rangeChoice{background:#2d3550;border:2px solid rgba(255,255,255,.1);border-radius:7px;color:#fff;padding:8px 12px;cursor:pointer;font-size:13px;font-weight:800}
.rangeChoice.active{border-color:var(--green);background:#1a3a2a}
.exportDates{display:flex;gap:14px;margin-bottom:6px;font-size:13px;color:var(--muted);align-items:center}
.exportDates input{margin-left:6px;background:#222a40;border:1px solid rgba(255,255,255,.15);border-radius:6px;color:#fff;padding:6px 8px;font-size:13px}
.exportSelectAll{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:#e5e7eb;margin:6px 0;cursor:pointer}
.exportRow{display:flex;align-items:center;gap:10px;cursor:pointer;text-align:left}
.exportRow input[type=checkbox]{flex:none;width:20px;height:20px;cursor:pointer}
/* Alphanumeric RO keypad (QWERTY + digits) */
.roKeys{gap:6px;margin-bottom:12px}
.roKeys .mk{min-height:46px;font-size:16px}
.roKeys .mk.num{background:#3f63a6;color:#eaf3ff;border-color:rgba(125,211,252,.45)}
.pourModeChoice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
/* Paint Systems — POS-style tiles */
.psGroupTitle{font-size:11px;font-weight:900;color:var(--green);text-transform:uppercase;letter-spacing:.07em;margin:6px 0 4px}
.psGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:4px}
.psTile{min-height:46px;border-radius:8px;border:2px solid rgba(255,255,255,.12);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:5px 6px;text-align:center;font-weight:900}
.psTile .psLabel{font-size:13px;line-height:1.08}
.psTile .psSub{font-size:8.5px;font-weight:800;opacity:.7}
.ps-undercoat{background:#6b7280;color:#fff;border-color:#7c8694}
.ps-clear{background:#f3f4f6;color:#111827;border-color:#d1d5db}
.ps-sealer{background:#3f63a6;color:#eaf3ff;border-color:#5b7fb8}
.ps-uncat{background:#222a40;color:#cbd5e1;border-color:rgba(255,255,255,.15)}
.psTile.psEdit{outline:2px dashed var(--green);outline-offset:2px}
.psTile:hover{filter:brightness(1.06)}
/* Mix mode: dim the standard action buttons (can't navigate away mid-mix); Abort stays live. */
.quick-buttons.mixmode .smallbtn:not(.abortMixBtn):not(#simBtn){opacity:.32;pointer-events:none;filter:saturate(.4)}
.abortMixBtn{background:#42222b;border:1px solid rgba(248,113,113,.45);color:#fecaca}
.abortMixBtn:hover{background:#5a2d38}
.abortMixBtn.armed{background:#7f1d1d;color:#fff;border-color:#f87171;animation:abortPulse .9s ease-in-out infinite}
@keyframes abortPulse{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.4)}50%{box-shadow:0 0 0 4px rgba(248,113,113,.12)}}
.key-display.roReq{color:var(--red)}