:root {
  --bg: #0d0d0d;
  --panel: #111311;
  --panel-2: #191f16;
  --border: #5a6845;
  --text: #ffffff;
  --muted: #5a6845;
  --prex-green: #d4fd49;
}
html, body { margin:0; height:100%; background:var(--bg); color:var(--text); font-family:'Ramabhadra', system-ui, sans-serif; }

/* Panel */
.panel {
  position: fixed;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid #5a6845;
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  min-width: 360px;
  max-width: 92vw;
  user-select: none;
  z-index: 10;
}
.panel-header {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-bottom:1px solid var(--border); background:#0f120f;
  cursor: grab; border-top-left-radius:4px; border-top-right-radius:4px;
}
.title { flex:1; text-align:center; letter-spacing:.5px; }
.panel-body { font-size: 12px; padding:18px; display:flex; flex-direction:column; gap:10px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.label { display:flex; align-items:center; gap:8px; color:#fff; }
.select, .range { background:#0f120f; color:#fff; border:1px solid var(--border); border-radius:4px; padding:4px 8px; font-family:inherit; }
.range { width: 160px; }
.checkbox { gap:4px; align-items:center; }
.note { color: var(--muted); font-size: 12px; }

/* ===== Friendly, modern sliders ===== */
.range{
  --h: 28px;
  --track:#101410;
  --trackEdge:#5a6845;
  --fill:#d4fd49;
  --thumb:#d4fd49;
  --thumbEdge:#d4fd49;

  appearance:none;
  width:220px; height:var(--h);
  background:transparent; border:none; padding:0; outline:none; cursor:pointer;
}

/* Track (WebKit) */
.range::-webkit-slider-runnable-track{
  height:8px; border-radius:999px; border:1px solid var(--trackEdge);
  background:
    linear-gradient(var(--fill),var(--fill)) 0/ calc(var(--p,0%)) 100% no-repeat,
    linear-gradient(180deg, var(--track), #0e100e);
}
/* Thumb (WebKit) */
.range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:27px; height:27px; border-radius:50%;
  border-radius: 4px;
  background: var(--thumb);
  margin-top:-4px;
  transition:transform .15s ease, box-shadow .15s ease;
}

/* Track/Thumb (Firefox) */
.range::-moz-range-track{
  height:8px; border-radius:999px; border:1px solid var(--trackEdge);
  background:
    linear-gradient(var(--fill),var(--fill)) 0/ calc(var(--p,0%)) 100% no-repeat,
    linear-gradient(180deg, var(--track), #0e100e);
}
.range::-moz-range-thumb{
  width:27px; height:27px; border-radius:50%;
  border-radius: 4px;
  background: var(--thumb);
  background: none;
  transition:transform .15s ease, box-shadow .15s ease;
}

/* States */
.range:active::-webkit-slider-thumb,
.range:active::-moz-range-thumb{ transform:scale(.96); }
.range:focus-visible{ border-radius:8px; }
.range:disabled{ opacity:.5; cursor:not-allowed; }

/* Value pill placed to the right of each slider */
.range-pill{
  min-width:48px; padding:4px 8px; text-align:center;
  font-size: 12px; color:#e9f4cb;
  background:#0f120f; border:1px solid rgba(212,253,73,.45);
  border-radius:4px;
}
.label{ gap:18px; } /* a touch more space between label text, slider, and pill */

/* Allow JS to control visibility with .show */
#cam {
  display: none;            /* removed !important */
  border:1px solid var(--border);
}

/* Shown state (matches your JS applyCamVisibility) */
#cam.show { display: block; }

/* Let the canvas overlay the video inside .camwrap */
#camCanvas {
  display: none;            /* start hidden; shown via .show */
  position: absolute;       /* was static */
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  border-radius: 4px;
}

/* Shown state */
#camCanvas.show { display: block; }

/* Wrapper must be positioned for absolute overlay to anchor */
.camwrap {
  position: relative;
  width: clamp(520px, 85vw, 960px);
  padding: 20px;
}