:root{ --bg:#0b0d10; --panel:#14181d; --ink:#e8eaed; --dim:#9aa0a6; --line:#2a2f37; --accent:#22d3ee; }
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.wrap{ max-width:760px; margin:0 auto; padding:20px 16px 48px; }
header h1{ margin:0; font-size:24px; letter-spacing:.5px; }
.sub{ margin:.25rem 0 1rem; color:var(--dim); }
.stage{ position:relative; width:100%; background:#000; border:1px solid var(--line);
  border-radius:10px; overflow:hidden; min-height:240px; }
#cam{ display:block; width:100%; height:auto; }
#overlay{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hint{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:24px; color:var(--dim); }
.bar{ display:flex; align-items:center; gap:10px; margin:14px 0; }
.spacer{ flex:1; }
.btn{ background:var(--accent); color:#06181c; border:0; border-radius:8px;
  padding:9px 16px; font:inherit; font-weight:600; cursor:pointer; }
.btn.ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn:disabled{ opacity:.45; cursor:default; }
.controls{ display:flex; flex-direction:column; gap:12px; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:14px; }
.knob-row{ display:grid; grid-template-columns:1fr minmax(120px,200px) auto; align-items:center; gap:12px; }
.knob-row > label{ display:flex; flex-direction:column; gap:2px; }
.knob-row .khint{ color:var(--dim); font-size:12px; }
.knob-row output{ color:var(--accent); min-width:64px; text-align:right; font-variant-numeric:tabular-nums; }
.knob{ -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:3px;
  background:var(--line); cursor:pointer; }
.knob::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px;
  border-radius:50%; background:var(--accent); border:0; cursor:pointer; }
.knob::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--accent);
  border:0; cursor:pointer; }
@media (max-width:560px){ .knob-row{ grid-template-columns:1fr auto; }
  .knob-row .knob{ grid-column:1 / -1; } }
.legend{ display:flex; flex-direction:column; gap:8px; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; }
.det{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.det.off{ opacity:.5; cursor:not-allowed; }
.det .swatch{ width:14px; height:14px; border-radius:3px; flex:0 0 auto; }
.det .name{ flex:1; }
.det .lat{ color:var(--dim); font-size:13px; min-width:120px; text-align:right; }
.note{ color:var(--dim); font-size:12.5px; margin-top:16px; }
code{ background:#0f1318; border:1px solid var(--line); border-radius:4px; padding:1px 5px; }
/* Used only by the framework error page (Error.razor); kept so it stays styled without Bootstrap. */
.text-danger{ color:#f87171; }