:root{--bg: #07151b;--panel: #0d252d;--panel2: #0a1c22;--line: #24424a;--teal: #16d4c4;--ink: #eaf7f6;--muted: #8da7ad;--red: #ff7866;--amber: #f2a84a}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--ink);font:14px Segoe UI,Malgun Gothic,system-ui,sans-serif;overflow:hidden}button{font:inherit;color:var(--ink);background:#102f38;border:1px solid var(--line);border-radius:6px;padding:6px 10px;cursor:pointer}button:hover{border-color:var(--teal)}button.on,button.play{background:var(--teal);color:#032421;border-color:var(--teal);font-weight:700}button.ghost{background:transparent}input,select{font:inherit;color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:6px 8px}.boot{display:grid;place-items:center;height:100%;color:var(--muted)}.login-wrap{display:grid;place-items:center;height:100%}.login-card{width:320px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;gap:8px}.login-card label{color:var(--muted);font-size:12px;margin-top:8px}.login-card button[type=submit]{margin-top:18px;background:var(--teal);color:#032421;font-weight:700;padding:10px}.login-err{color:var(--red);font-size:12px;margin-top:6px}.login-brand,.brand{display:flex;align-items:center;gap:10px}.mark{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;border:2px solid var(--teal);color:var(--teal);font-weight:800;font-size:20px}.brand strong,.login-brand strong{display:block;letter-spacing:1px}.brand small,.login-brand small{color:var(--muted);font-size:11px}.studio{height:100%;display:grid;grid-template-rows:62px 1fr 64px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--line)}.top-mid{display:flex;align-items:center;gap:16px}.frame-counter{color:var(--muted)}.frame-counter b{color:var(--ink);font-size:16px}.frame-counter .ts{margin-left:12px;color:var(--teal);font-variant-numeric:tabular-nums}.top-right{display:flex;align-items:center;gap:10px}.who{color:var(--muted)}.banner-err{background:#3a1512;color:var(--red);padding:6px 16px;font-size:13px}.main{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,.55fr) 300px;gap:1px;background:var(--line);min-height:0}.sonar-panel,.cam-col,.rail{background:var(--bg);min-height:0}.panel-title,.cam-label,.rail-head{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--teal)}.sonar-panel{display:grid;grid-template-rows:34px 1fr}.panel-title{display:flex;align-items:center;gap:10px;padding:9px 12px}.panel-title small{color:var(--muted);font-weight:600}.sonar-stage{display:grid;place-items:center;background:#2c3336;min-height:0;overflow:hidden}.sonar-img{max-width:100%;max-height:100%;object-fit:contain}.cam-col{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}.main.camera-only{grid-template-columns:minmax(0,1fr) 300px}.main.camera-only .sonar-panel{display:none}.main.camera-only .cam-col{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.cam-tile{position:relative;display:grid;place-items:center;background:#0a171c;overflow:hidden}.cam-tile img{width:100%;height:100%;object-fit:contain}.cam-label{position:absolute;left:8px;top:7px;z-index:2;display:flex;align-items:center;gap:8px;background:#030c10c7;padding:4px 7px;border-radius:4px}.cam-empty{color:#668087;font-size:12px}.sync-badge{font-size:10px;font-weight:700;padding:2px 5px;border-radius:3px;letter-spacing:0}.sync-badge.ok{background:#16d4c433;color:var(--teal)}.sync-badge.out{background:#ff786633;color:var(--red)}.rail{padding:10px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.rail-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px}.rail-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.lens-card{border-color:#16d4c46b}.lens-toggle{display:flex;align-items:center;gap:9px;padding:9px 10px;margin-bottom:8px;border:1px solid var(--line);border-radius:7px;color:var(--muted);cursor:pointer;background:#0512177a}.lens-toggle.active{border-color:var(--teal);color:var(--teal);background:#16d4c417}.lens-toggle:has(input:disabled){cursor:not-allowed;opacity:.55}.lens-toggle input{width:16px;height:16px;accent-color:var(--teal)}.lens-note,.lens-warn{display:block;color:var(--muted);font-size:11px;line-height:1.45;margin:5px 0 8px}.lens-warn{color:var(--amber)}.kv{display:flex;justify-content:space-between;padding:4px 0;color:var(--muted);font-size:13px}.kv b{color:var(--ink);font-variant-numeric:tabular-nums}.offset-row{display:grid;grid-template-columns:54px 1fr 48px;align-items:center;gap:8px;margin:6px 0;font-size:12px}.offset-row b{color:var(--teal);text-align:right;font-variant-numeric:tabular-nums}.offset-row input[type=number]{width:100%}.transport{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:0 16px;background:var(--panel);border-top:1px solid var(--line)}.tp-btns{display:flex;gap:5px}.tp-btns button{padding:6px 9px;min-width:34px}.scrub{width:100%;accent-color:var(--teal)}.fps{display:flex;align-items:center;gap:4px;color:var(--muted)}.fps button{padding:4px 8px;min-width:28px}.sel{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}.sel select{color:var(--ink)}.panel-title .hint{margin-left:auto;color:var(--muted);font-weight:500;font-size:10px}.hover-img{position:relative;width:100%;height:100%}.hover-img img{width:100%;height:100%;object-fit:contain;cursor:crosshair}.hover-img.big{position:absolute;top:0;right:0;bottom:0;left:0}.depth-readout{position:absolute;z-index:5;pointer-events:none;transform:translateZ(0);background:#030c10e6;border:1px solid var(--teal);border-radius:6px;padding:4px 8px;color:var(--ink);white-space:nowrap;line-height:1.2}.depth-readout b{color:var(--teal);font-size:14px}.depth-readout small{display:block;color:var(--muted);font-size:10px}.fs{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#02080beb;display:grid;place-items:center;padding:24px}.fs-inner{width:min(96vw,1400px);height:min(94vh,1000px);background:var(--panel);border:1px solid var(--line);border-radius:12px;display:grid;grid-template-rows:44px 1fr;overflow:hidden}.fs-head{display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid var(--line);color:var(--teal);font-weight:800;letter-spacing:1px}.fs-body{position:relative;display:grid;place-items:stretch;background:#10171b;min-height:0;overflow:hidden}.fs-body img{width:100%;height:100%;object-fit:contain}.fs-fill{position:absolute;top:0;right:0;bottom:0;left:0}.fs-body .hover-img{width:100%;height:100%}