:root{--bg:#0d1420;--card:#172234ee;--fg:#eef3fa;--mut:#9fb0c8;--acc:#4da3ff;--red:#ff3b3b;--green:#2fe36b;--warn:#ffcf3a;--r:14px;--sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);--sal:env(safe-area-inset-left);--sar:env(safe-area-inset-right)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:15px/1.35 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden;overscroll-behavior:none}
button,select,input{font:inherit;color:inherit}
button{background:#25344c;border:1px solid #35496a;border-radius:10px;padding:9px 13px;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
button:hover{background:#2d3f5d}button:active{transform:translateY(1px)}
button.primary{background:var(--acc);border-color:var(--acc);color:#04121f;font-weight:700}
select,input[type=number],input[type=text]{background:#0f1828;border:1px solid #35496a;border-radius:8px;padding:7px 9px}
.hidden{display:none!important}.small{font-size:12.5px;color:var(--mut)}
#app{position:fixed;inset:0}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#flash{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s}
#flash.red{background:radial-gradient(circle at 20% 50%,#ff1e1e88,transparent 60%);opacity:1;transition:none}
#flash.green{background:radial-gradient(circle at 80% 50%,#1eff5a88,transparent 60%);opacity:1;transition:none}
#flash.both{background:linear-gradient(90deg,#ff1e1e77,transparent 45%,transparent 55%,#1eff5a77);opacity:1;transition:none}
/* HUD */
#hud{position:absolute;top:calc(8px + var(--sat));left:50%;transform:translateX(-50%);display:flex;align-items:stretch;gap:6px;pointer-events:none;z-index:5}
#hud .side{display:flex;align-items:center;gap:8px;background:#0b1220d8;border-radius:12px;padding:5px 10px;min-width:126px}
#hud .side.red{border-left:5px solid var(--red)}#hud .side.green{border-right:5px solid var(--green);justify-content:flex-end}
#hud .nm{font-size:12px;color:var(--mut);font-weight:600;max-width:84px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud .sc{font:800 30px/1 ui-monospace,Menlo,Consolas,monospace;min-width:34px;text-align:center}
#hud .lamp{width:20px;height:20px;border-radius:50%;background:#222;border:2px solid #444}
#hud .red .lamp.on{background:var(--red);box-shadow:0 0 18px var(--red)}#hud .green .lamp.on{background:var(--green);box-shadow:0 0 18px var(--green)}
#hud .lamp.white{background:#fff;box-shadow:0 0 12px #fff}
#hud .mid{background:#0b1220d8;border-radius:12px;padding:5px 12px;text-align:center;min-width:104px}
#clock{font:800 26px/1.05 ui-monospace,Menlo,Consolas,monospace;color:#ffd96a}#clock.run{color:#fff}
.call{position:absolute;top:calc(78px + var(--sat));left:50%;transform:translateX(-50%);font:800 clamp(22px,4.4vw,44px)/1.1 system-ui;text-shadow:0 2px 12px #000c;background:#0b1220b8;padding:6px 18px 8px;border-radius:14px;pointer-events:none;z-index:4;text-align:center;white-space:nowrap;opacity:0;transition:opacity .25s}
.call.show{opacity:1}.call small{display:block;font-size:.42em;font-weight:600;color:#d8e4f5}
.cue{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font:900 clamp(40px,10vw,110px)/1 system-ui;color:#fff;text-shadow:0 0 30px #4da3ff;pointer-events:none;z-index:4}
.drillbar{position:absolute;bottom:calc(10px + var(--sab));left:50%;transform:translateX(-50%);background:#0b1220d8;border-radius:12px;padding:6px 14px;z-index:5;white-space:nowrap}
#topBtns{position:absolute;top:calc(8px + var(--sat));right:calc(8px + var(--sar));display:flex;gap:6px;z-index:6}
#topBtns button{width:42px;height:42px;padding:0;background:#0b1220c8;font-size:18px}
/* camera inset */
.track{position:absolute;left:calc(8px + var(--sal));top:calc(8px + var(--sat));width:min(28vw,250px);z-index:6;background:#000;border-radius:10px;overflow:hidden;border:1px solid #35496a}
.tvid{position:relative;aspect-ratio:4/3}.tvid video,.tvid canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.track.mirror video{transform:scaleX(-1)}
.tq{display:flex;align-items:center;gap:6px;padding:3px 7px;font-size:12px;background:#0b1220}
.dot{width:10px;height:10px;border-radius:50%;background:#666;display:inline-block;flex:none}
.dot.good{background:var(--green)}.dot.ok{background:var(--warn)}.dot.bad{background:var(--red)}
/* touch pad */
.pad{position:absolute;left:0;right:0;bottom:calc(8px + var(--sab));display:flex;justify-content:space-between;align-items:flex-end;padding:0 calc(10px + var(--sal)) 0 calc(10px + var(--sar));pointer-events:none;z-index:5}
.pad>div{display:flex;gap:8px;pointer-events:auto;flex-wrap:wrap;align-items:flex-end}
.pad .pm{flex-direction:column;gap:6px}
.pad button{width:64px;height:64px;font-size:22px;border-radius:50%;background:#1b2a42cc;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;padding:0}
.pad button small{font-size:9.5px;color:var(--mut);margin-top:3px}
.pad button.sm{width:auto;height:34px;border-radius:17px;font-size:12px;padding:0 12px}
.pad button.big{width:84px;height:84px;background:#7a2130cc;border-color:#c33}
.pad button.held{background:var(--acc);color:#04121f}
body.haspad .drillbar{bottom:calc(96px + var(--sab))}
/* sheets */
.sheet{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#05080ea8;z-index:20;padding:calc(10px + var(--sat)) 10px calc(10px + var(--sab));overflow:auto}
.card{background:var(--card);backdrop-filter:blur(8px);border:1px solid #2b3d5a;border-radius:var(--r);padding:16px 18px;width:min(560px,100%);max-height:100%;overflow:auto;box-shadow:0 10px 40px #000a}
.card.wide{width:min(980px,100%)}
.card h2{margin:0 0 10px;font-size:20px}.card h3{margin:14px 0 4px;font-size:15px;color:#cfe0f7}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:12px}.brand img{width:52px;height:52px;border-radius:12px}.brand h1{margin:0;font-size:24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mode{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;padding:12px;min-height:70px}.mode span{font-size:12px;color:var(--mut)}
.row{display:flex;gap:8px;align-items:center;margin:10px 0;flex-wrap:wrap}.row.wrap{flex-wrap:wrap}
.lbl{min-width:118px;color:var(--mut);font-size:13px}
.seg{display:inline-flex;flex-wrap:wrap;gap:0;border:1px solid #35496a;border-radius:10px;overflow:hidden}
.seg button{border:0;border-radius:0;background:#1b2a42;padding:8px 11px;font-size:13.5px}.seg button.on{background:var(--acc);color:#04121f;font-weight:700}
label.inl{display:inline-flex;gap:7px;align-items:center}
.calib{display:grid;grid-template-columns:1.25fr 1fr;gap:14px}
.cvid{position:relative;background:#000;border-radius:10px;overflow:hidden;aspect-ratio:4/3}.cvid video,.cvid canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cvid.mirror video{transform:scaleX(-1)}
.cprog{position:absolute;left:0;right:0;bottom:0;height:7px;background:#0008}.cprog i{display:block;height:100%;width:0;background:var(--green);transition:width .15s}
.cmsg{position:absolute;left:8px;right:8px;top:8px;font-weight:700;text-shadow:0 1px 6px #000;font-size:15px}
.qbar{height:12px;border-radius:6px;background:#0d1626;overflow:hidden;margin:4px 0}.qbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--warn),var(--green));transition:width .2s}
.checks{list-style:none;padding:0;margin:8px 0;font-size:13px}.checks li{margin:3px 0}.checks li.ok::before{content:'✅ '}.checks li.no::before{content:'⬜ '}
.toast{position:absolute;left:50%;bottom:calc(110px + var(--sab));transform:translateX(-50%);background:#0b1220ee;border:1px solid #35496a;padding:10px 16px;border-radius:12px;z-index:30;text-align:center;max-width:90vw}
.toast small{display:block;color:var(--mut)}
.stat{display:grid;grid-template-columns:1fr auto;gap:2px 12px;font-size:14px;margin:6px 0}.stat b{text-align:right}
.res{font-size:30px;font-weight:800;text-align:center;margin:6px 0}.res .r{color:var(--red)}.res .g{color:var(--green)}
.help ul{margin:4px 0;padding-left:20px}.help li{margin:3px 0}.help p{margin:4px 0}
#ctlInfo{min-height:18px}
/* display / remote */
.dlink{position:absolute;left:calc(8px + var(--sal));bottom:calc(8px + var(--sab));display:flex;align-items:center;gap:8px;background:#0b1220d8;border-radius:12px;padding:6px 10px;z-index:7}
.dlink[data-state=connected] .dot{background:var(--green)}.dlink[data-state=waiting] .dot{background:var(--warn)}.dlink[data-state=offline] .dot,.dlink[data-state=error] .dot{background:var(--red)}
.dpair{position:absolute;right:calc(10px + var(--sar));bottom:calc(60px + var(--sab));display:flex;gap:14px;background:var(--card);border:1px solid #2b3d5a;border-radius:var(--r);padding:14px;z-index:8;max-width:94vw}
.dpair canvas{width:200px;height:200px;border-radius:8px;background:#fff}.dcode{font:800 38px/1 ui-monospace,Menlo,monospace;letter-spacing:3px;margin:8px 0;color:#ffd96a}
.dptitle{font-weight:800;font-size:18px}.dpair ol{padding-left:18px;margin:6px 0}
#remote{position:fixed;inset:0;overflow:auto}
.rjoin{max-width:520px;margin:0 auto;padding:calc(16px + var(--sat)) 16px}
.rjoin input{font-size:26px;letter-spacing:3px;width:9ch;text-transform:uppercase}
.rcam{position:fixed;inset:0;background:#000}
.rcam .tvid{position:absolute;inset:0;aspect-ratio:auto}
.rtop{position:absolute;top:calc(8px + var(--sat));left:8px;right:8px;display:flex;gap:8px;justify-content:space-between;z-index:3}
.rtop>div{background:#0b1220d8;border-radius:10px;padding:6px 10px;display:flex;gap:6px;align-items:center;font-size:13px}
.rconn[data-state=connected] .dot{background:var(--green)}.rconn[data-state=waiting] .dot,.rconn[data-state=connecting] .dot{background:var(--warn)}.rconn[data-state=offline] .dot,.rconn[data-state=error] .dot{background:var(--red)}
.rpanel{position:absolute;left:8px;right:8px;bottom:calc(8px + var(--sab));background:#0b1220e0;border-radius:12px;padding:8px 10px;z-index:3}
.rscan video{width:100%;max-height:50vh;background:#000;border-radius:10px}
.status.bad{color:var(--red)}.status.warn{color:var(--warn)}
@media (max-width:700px){.calib{grid-template-columns:1fr}.grid2{grid-template-columns:1fr 1fr}.lbl{min-width:0;width:100%}#hud .side{min-width:0;padding:4px 7px}#hud .nm{display:none}#hud .sc{font-size:24px}#clock{font-size:21px}.track{width:34vw}#topBtns button{width:38px;height:38px}}
@media (max-height:480px){.pad button{width:54px;height:54px}.pad button.big{width:70px;height:70px}.call{top:calc(58px + var(--sat))}.track{width:22vw}}
.cvid .tvid{position:absolute;inset:0;aspect-ratio:auto}.cvid.mirror video{transform:scaleX(-1)}

@media (max-width:560px){#topBtns{top:calc(66px + var(--sat))}#hud .mid{min-width:0;padding:4px 8px}#period{font-size:10px;white-space:nowrap}.call{top:calc(116px + var(--sat));font-size:26px}}