:root{
  --panel:#ffffffee; --ink:#111827; --accent:#0ea5e9; --muted:#64748b;
  --ok:#16a34a; --warn:#f59e0b; --bad:#dc2626;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{color:#fff;touch-action:none}
#stage{position:fixed;inset:0;background:#000}
#panelCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#topbar{
  position:absolute;left:10px;top:10px;right:118px;display:flex;gap:8px;flex-wrap:wrap;
  pointer-events:none;z-index:5
}
.chip{background:#000b;border:1px solid #475569;border-radius:10px;padding:6px 9px;font-size:12px;line-height:1.15;backdrop-filter:blur(4px)}
.chip b{font-size:16px;font-variant-numeric:tabular-nums}
.chip.ok{border-color:var(--ok)}.chip.warn{border-color:var(--warn)}.chip.bad{border-color:var(--bad)}
#version{
  position:absolute;right:10px;top:10px;z-index:20;padding:8px 11px;border-radius:999px;
  background:#000c;border:1px solid #64748b;font:600 12px system-ui;color:#e2e8f0;pointer-events:none
}
#menuTab{
  position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:40;width:38px;height:70px;
  padding:0;border-radius:0 14px 14px 0;border:1px solid #94a3b8;border-left:0;
  background:rgba(15,23,42,.58);color:#fff;font-size:21px;backdrop-filter:blur(6px);opacity:.66;
  touch-action:manipulation
}
#menuTab:active{opacity:1}
.floating-menu{
  position:absolute;left:48px;top:50%;transform:translateY(-50%);z-index:39;
  width:190px;background:rgba(255,255,255,.96);color:var(--ink);padding:8px;border-radius:14px;
  border:1px solid #cbd5e1;box-shadow:0 10px 30px #0008;display:grid;gap:7px;touch-action:auto
}
#controls{
  position:absolute;left:10px;bottom:10px;z-index:10;width:min(1140px,calc(100vw - 20px));
  background:var(--panel);color:var(--ink);border-radius:14px;border:1px solid #cbd5e1;
  padding:10px;box-shadow:0 10px 30px #0007;display:grid;gap:8px;max-height:44vh;overflow:auto;
  touch-action:auto;-webkit-overflow-scrolling:touch
}
.controls-head,.cal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
button,select,input{
  min-height:40px;border-radius:10px;border:1px solid #cbd5e1;background:#fff;color:#111827;
  font:600 14px system-ui;padding:7px 10px
}
button{background:var(--accent);border-color:var(--accent);color:#fff;cursor:pointer}
button.secondary{background:#64748b;border-color:#64748b}
button.danger{background:#b91c1c;border-color:#b91c1c}
button.ghost{background:#e2e8f0;border-color:#cbd5e1;color:#334155}
button.smallbtn{min-width:38px;min-height:34px;padding:4px 9px}
button:active{transform:translateY(1px)}
label{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:650}
input[type=range]{padding:0;min-height:30px}
#vorSelect{min-width:330px;max-width:62vw}
#obsRange{width:210px}
#diag{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:#334155;white-space:pre-wrap}
.small{font-size:11px;color:#475569}
.hidden{display:none!important}

#calibrationSidebar{
  display:none;position:absolute;right:8px;top:56px;bottom:8px;z-index:30;width:min(278px,42vw);
  background:rgba(255,255,255,.96);color:var(--ink);border:1px solid #cbd5e1;border-radius:14px;
  box-shadow:0 10px 30px #0008;padding:11px;overflow:auto;touch-action:auto;-webkit-overflow-scrolling:touch
}
.calibrating #calibrationSidebar{display:grid;align-content:start;gap:13px}
.calibrating #controls{display:none!important}
.cal-left #calibrationSidebar{right:auto;left:48px}
.cal-label{display:grid;gap:5px;align-items:stretch}
.cal-label select{width:100%}
.cal-control{display:grid;gap:4px}
.cal-control input[type=range]{width:100%}
.cal-line{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#334155}
.cal-line b{font-variant-numeric:tabular-nums;color:#0f172a}
.cal-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.cal-actions #calSide{grid-column:1/-1}

.panel-mode #controls,.panel-mode #topbar,.panel-mode #calibrationSidebar,.panel-mode #version{display:none!important}
.panel-mode #menuTab{opacity:.38}

@media(max-width:760px){
  #controls{max-height:54vh}
  #vorSelect{min-width:240px;max-width:90vw}
  .chip b{font-size:14px}
  #calibrationSidebar{width:min(250px,62vw);top:46px}
}