/* toolbar-specific styles (extracted) */
:root{
  --hud-cyan:#00ffff;
  --hud-cyan-mid:#00c9d9;
  --hud-cyan-soft:#bff7ff;
  --hud-border:rgba(0,255,255,.35);
  --hud-panel:rgba(4,16,20,.92);
  --hud-glow:0 0 18px rgba(0,255,255,.18), inset 0 0 12px rgba(0,255,255,.06);
  --hud-orange:#ff9d1e;
  --hud-ink:#00171b;
}

/* Toolbar frame */
.toolbar{
  position: absolute; left: 0;top: 0;z-index: 30;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px 10px;
  border:1px solid var(--hud-border);
  border-radius:14px;
  background:var(--hud-panel);
  color:var(--hud-cyan-soft);
  box-shadow:var(--hud-glow);
  backdrop-filter: blur(6px);
  font:600 12px/1.2 "Inter", system-ui, Segoe UI, Roboto, Arial;
}

/* Buttons -> cyan HUD chips */
.btn{
  appearance:none;
  border:1px solid var(--hud-border);
  border-radius:12px;
  padding:7px 10px;
  background:rgba(0,255,255,.06);
  color:var(--hud-cyan-soft);
  box-shadow:var(--hud-glow);
  cursor:pointer;
  transition:filter .15s ease, background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:hover{ filter:brightness(1.08) }
.btn:active{ transform:translateY(1px) }

/* Optional "ON" state your JS can toggle: 
   document.getElementById('toggle').classList.toggle('on') */
.btn.on{
  background:linear-gradient(180deg, var(--hud-cyan), var(--hud-cyan-mid));
  color:var(--hud-ink);
  border-color:rgba(0,255,255,.6);
  box-shadow:0 0 18px rgba(0,255,255,.45), inset 0 0 10px rgba(255,255,255,.12);
}
/* Disabled look */
.btn[disabled]{
  opacity:.55; cursor:not-allowed;
  filter:none; transform:none;
}

/* Zoom note */
.note{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 10px;
  border:1px solid var(--hud-border);
  border-radius:10px;
  background:rgba(0,255,255,.04);
  color:var(--hud-cyan-soft);
  box-shadow:var(--hud-glow);
}
.note b{ color:#eaffff; font-weight:800 }

/* Status badge (shown/hidden via inline style you already have) */
.badge{
  display:inline-flex; align-items:center;
  padding:5px 10px; border-radius:999px;
  border:1px solid var(--hud-border);
  background:rgba(0,255,255,.08);
  color:#90f5ff; font-weight:800; letter-spacing:.02em;
  box-shadow:var(--hud-glow);
}

/* Checkbox groups (keep native input for JS; just frame them) */
label{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 10px;
  border:1px solid var(--hud-border);
  border-radius:10px;
  background:rgba(0,255,255,.04);
  box-shadow:var(--hud-glow);
  font:600 12px/1.2 "Inter", system-ui, Segoe UI, Roboto, Arial;
}
label input[type="checkbox"]{
  width:14px; height:14px; accent-color:#00e1ff;
}
label .note{ /* nested note spans inside labels inherit without extra frame */
  padding:0; border:0; background:transparent; box-shadow:none;
}

/* Small-screen wrap */
@media (max-width: 800px){
  .toolbar{ left:12px; right:12px; top:12px; gap:8px }
}