:root{
  --ink:#000000;
  --hud:#39ffc9;
  --hud-dim:rgba(57,255,201,0.35);
  --hud-faint:rgba(57,255,201,0.14);
  --amber:#ffb020;
  --red:#ff4d4d;
  --font-mono:'Share Tech Mono', monospace;
  --font-head:'Orbitron', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{
  width:100%; height:100%; background:var(--ink); overflow:hidden;
  font-family:var(--font-mono); color:var(--hud);
  -webkit-user-select:none; user-select:none;
}
#stage{ position:fixed; inset:0; background:#000; }
video{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
canvas#hud{ position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair; }
#noVideoBg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(57,255,201,0.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(57,255,201,0.025) 0px, rgba(57,255,201,0.025) 1px, transparent 1px, transparent 3px);
}
#scanlines{
  position:absolute; inset:0; pointer-events:none; mix-blend-mode:overlay; z-index:5;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 3px);
}
#vignette{
  position:absolute; inset:0; pointer-events:none; z-index:5;
  background:radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.65) 100%);
}
#sweep{
  position:absolute; left:0; right:0; height:120px; pointer-events:none; z-index:5;
  background:linear-gradient(180deg, transparent, rgba(57,255,201,0.06), transparent);
  animation:sweepMove 6s linear infinite;
}
@keyframes sweepMove{ 0%{ top:-120px; } 100%{ top:100%; } }

#gate{
  position:absolute; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px;
  background:#000; text-align:center; padding:24px;
}
#gate.hidden{ display:none; }
.gate-eyebrow{ font-size:11px; letter-spacing:0.35em; color:var(--hud-dim); }
.gate-title{ font-family:var(--font-head); font-size:22px; letter-spacing:0.08em; color:var(--hud); text-shadow:0 0 12px var(--hud-dim); }
.gate-sub{ font-size:12px; color:var(--hud-dim); max-width:360px; line-height:1.6; }
#enableBtn{
  font-family:var(--font-mono); font-size:13px; letter-spacing:0.15em;
  color:var(--hud); background:transparent; border:1px solid var(--hud);
  padding:12px 26px; cursor:pointer; text-transform:uppercase;
  box-shadow:0 0 14px rgba(57,255,201,0.15) inset;
}
#enableBtn:hover{ background:var(--hud-faint); }
#gateErr{ font-size:11px; color:var(--red); min-height:14px; }

.bracket{ position:absolute; width:46px; height:46px; pointer-events:none; z-index:10; }
.bracket span{ position:absolute; background:var(--hud); box-shadow:0 0 6px var(--hud-dim); }
.tl{ top:14px; left:14px; } .tr{ top:14px; right:14px; }
.bl{ bottom:14px; left:14px; } .br{ bottom:14px; right:14px; }
.tl span:nth-child(1), .tr span:nth-child(1), .bl span:nth-child(1), .br span:nth-child(1){ width:2px; height:100%; }
.tl span:nth-child(2), .tr span:nth-child(2), .bl span:nth-child(2), .br span:nth-child(2){ width:100%; height:2px; }
.tl span:nth-child(1){ left:0; } .tl span:nth-child(2){ top:0; }
.tr span:nth-child(1){ right:0; } .tr span:nth-child(2){ top:0; }
.bl span:nth-child(1){ left:0; } .bl span:nth-child(2){ bottom:0; }
.br span:nth-child(1){ right:0; } .br span:nth-child(2){ bottom:0; }

#topbar{
  position:absolute; top:0; left:0; right:0; z-index:10;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:16px 64px; font-size:11px; letter-spacing:0.08em;
}
#topbar .block{ min-width:120px; }
#topbar .label{ color:var(--hud-dim); font-size:9px; letter-spacing:0.2em; }
#topbar .value{ color:var(--hud); font-size:13px; margin-top:2px; text-shadow:0 0 8px var(--hud-dim); }
#topbar .center{ text-align:center; }

#compass{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:340px; height:34px; overflow:hidden; z-index:9; margin-top:2px; }
#compassTrack{ position:absolute; top:16px; left:0; height:18px; white-space:nowrap; font-size:10px; letter-spacing:2px; color:var(--hud-dim); }
#compassTrack .tick{ display:inline-block; width:34px; text-align:center; }
#compassTrack .card{ color:var(--hud); }
#compassCenter{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:1px; height:14px; background:var(--amber); box-shadow:0 0 6px var(--amber); }

.ruler{ position:absolute; top:80px; bottom:150px; width:26px; z-index:9; }
.ruler.left{ left:20px; } .ruler.right{ right:20px; }
.ruler .tick{ position:absolute; left:0; right:0; height:1px; background:var(--hud-dim); }
.ruler.right .tick{ left:auto; right:0; }
.ruler .tick.major{ background:var(--hud); }
.ruler .lbl{ position:absolute; font-size:9px; color:var(--hud-dim); left:6px; }
.ruler.right .lbl{ left:auto; right:6px; }

#recbar{
  position:absolute; top:66px; left:50%; transform:translateX(-50%); z-index:10;
  display:flex; align-items:center; gap:14px; font-size:10px; letter-spacing:0.1em; color:var(--hud-dim);
  flex-wrap:wrap; justify-content:center;
}
#recDot{ width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red); animation:pulseDot 1.4s ease-in-out infinite; }
@keyframes pulseDot{ 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }
#clipBtn, #notesToggle{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em; color:var(--hud);
  background:rgba(57,255,201,0.06); border:1px solid var(--hud); padding:7px 16px; cursor:pointer; text-transform:uppercase;
}
#clipBtn:hover, #notesToggle:hover{ background:var(--hud-faint); }
#clipBtn:active, #notesToggle:active{ transform:scale(0.97); }
#clipBtn.flash{ background:var(--hud); color:#00110b; }
#visionStatus{ font-size:9px; letter-spacing:0.15em; color:var(--hud-dim); }

#bottombar{ position:absolute; bottom:0; left:0; right:0; z-index:10; padding:10px 0 16px; }
#ticker{ overflow:hidden; white-space:nowrap; border-top:1px solid var(--hud-faint); border-bottom:1px solid var(--hud-faint); padding:6px 0; }
#tickerTrack{ display:inline-block; font-size:11px; color:var(--hud-dim); letter-spacing:0.06em; animation:tickerScroll 22s linear infinite; padding-left:100%; }
#tickerTrack b{ color:var(--hud); font-weight:400; }
@keyframes tickerScroll{ 0%{ transform:translateX(0); } 100%{ transform:translateX(-100%); } }
#statusrow{ display:flex; justify-content:space-between; padding:8px 64px 0; font-size:10px; color:var(--hud-dim); letter-spacing:0.1em; flex-wrap:wrap; gap:6px; }
#statusrow .dotstat{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--hud); margin-right:6px; box-shadow:0 0 6px var(--hud); vertical-align:1px; }

#toast{
  position:absolute; bottom:96px; left:50%; transform:translateX(-50%) translateY(10px);
  font-size:11px; color:var(--hud); background:rgba(0,0,0,0.7); border:1px solid var(--hud-dim);
  padding:8px 16px; letter-spacing:0.08em; z-index:20; opacity:0; transition:opacity 0.3s ease, transform 0.3s ease; pointer-events:none;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

#notesPanel{
  position:absolute; top:0; right:-320px; width:300px; height:100%; z-index:40;
  background:rgba(0,8,6,0.95); border-left:1px solid var(--hud-dim);
  transition:right 0.25s ease; display:flex; flex-direction:column;
}
#notesPanel.open{ right:0; }
.notes-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px; border-bottom:1px solid var(--hud-faint); font-size:12px; letter-spacing:0.1em;
}
.notes-head button{ background:none; border:none; color:var(--hud); font-size:20px; cursor:pointer; line-height:1; }
.notes-body{ padding:16px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; }
.notes-body label{ font-size:10px; color:var(--hud-dim); letter-spacing:0.1em; margin-top:6px; }
.notes-body input, .notes-body textarea{
  background:rgba(57,255,201,0.05); border:1px solid var(--hud-faint); color:var(--hud);
  font-family:var(--font-mono); font-size:12px; padding:8px; resize:vertical;
}
.notes-body textarea{ min-height:140px; }
.notes-actions{ display:flex; gap:8px; margin-top:6px; }
.notes-actions button{
  flex:1; font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em; color:var(--hud);
  background:rgba(57,255,201,0.06); border:1px solid var(--hud); padding:8px; cursor:pointer; text-transform:uppercase;
}
.notes-actions button:hover{ background:var(--hud-faint); }
.notes-hint{ font-size:10px; color:var(--hud-dim); line-height:1.6; margin-top:10px; }

@media (max-width:640px){
  #topbar{ padding:14px 16px; font-size:10px; }
  .ruler{ display:none; }
  #compass{ width:220px; }
  #statusrow{ padding:8px 16px 0; }
  #notesPanel{ width:88vw; right:-88vw; }
}