:root {
  --bg:#08080f; --hud-bg:rgba(10,10,18,.72);
  --frame:#00e7ff; --grid-major:#1e2a35; --grid-minor:rgba(30,42,53,.55);
  --label:#8fd3d4; --line:#36bdf8; --warn:#ff3b3b; --ok:#34d399; --mid:#ffe066;
}
html,body{margin:0;height:100%;background:var(--bg);color:#ddd;font:16px ui-monospace,monospace}
#cv{display:block;width:100vw;height:100vh;pointer-events:auto;position:fixed;top:0;left:0;z-index:2;touch-action:none}
canvas.spectrogram-layer,
canvas.waveform-layer{
  position:fixed;
  top:0;
  left:0;
  width:0;
  height:0;
  pointer-events:none;
  z-index:1;
}
.hud{
  position:fixed;top:10px;left:10px;z-index:9999;display:flex;gap:10px;align-items:center;pointer-events:auto;
  background:var(--hud-bg);border:1px solid #2b2f3a;border-radius:10px;padding:8px 10px;backdrop-filter:blur(6px)
}
.screensaver-active .hud,
.screensaver-active #optionsPanelNew {
  display:none !important;
}
.screensaver-active #recorderHud,
.screensaver-active .rec-processing,
.screensaver-active .rec-warning,
.screensaver-active .calibration-modal,
.screensaver-active .split-popup {
  display:none !important;
}
.hud select{accent-color:var(--frame);background:#0b0b12;color:#ddd;border:1px solid #333;border-radius:8px;padding:6px 10px;font:14px ui-monospace,monospace}
.hud label{display:flex;gap:6px;align-items:center}
.err{position:fixed;left:12px;top:12px;max-width:70vw;color:#fff;background:#7a1b1b;border:1px solid #3b0d0d;border-radius:8px;padding:8px 10px;display:none;z-index:99999;white-space:pre-wrap}

/* Options-Panel (responsive) */
.options { position:fixed; inset:80px 12px 20px 12px; z-index:9000; display:none; background:rgba(10,10,18,.85); border:1px solid #2b2f3a; border-radius:14px; padding:20px; padding-bottom:calc(20px + var(--options-kb-inset, 0px) + var(--options-extra-scroll, 42vh)); overflow:auto; backdrop-filter: blur(8px); }
.options h2{margin:0 0 12px 0; color:#cfefff; font:600 18px ui-monospace,monospace}
.grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap:12px}
.opt{ display:flex; align-items:center; gap:10px; background:#0c1017; border:1px solid #202633; border-radius:10px; padding:10px; flex-wrap:wrap; }
.opt label{min-width:150px; color:#9fc9ff}
.opt input[type="range"], .opt select, .opt input[type="number"], .opt input[type="color"]{ accent-color:var(--frame); background:#0b0b12; color:#ddd; border:1px solid #333; border-radius:8px; padding:6px 10px; font:16px ui-monospace,monospace }
.opt input[type="color"]{
  padding:2px;
  width:56px;
  height:34px;
  background:transparent;
  border:1px solid #333;
  border-radius:8px;
  appearance:auto;
  -webkit-appearance:auto;
}
.opt input[type="color"]::-webkit-color-swatch-wrapper{
  padding:0;
}
.opt input[type="color"]::-webkit-color-swatch{
  border:none;
  border-radius:6px;
}
.opt input[type="color"]::-moz-color-swatch{
  border:none;
  border-radius:6px;
}
#optionsPanelNew .offset-block{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex: 1 1 440px;
}
#optionsPanelNew .offset-row{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
}
#optionsPanelNew .offset-row .ch{
  min-width:12px;
  color:#cfefff;
}
#optionsPanelNew .offset-row input[type="range"]{
  flex: 1 1 340px;
  min-width: 340px;
}
#optionsPanelNew .offset-row .offset-val{
  min-width:80px;
  text-align:right;
  color:#cfefff;
}
#optionsPanelNew .offset-notes{
  flex: 1 0 100%;
  margin-left:160px;
  max-width: 440px;
}
#optionsPanelNew .offset-notes small{
  display:block;
}
@media (max-width: 520px){
  #optionsPanelNew .offset-row input[type="range"]{ min-width: 240px; }
  #optionsPanelNew .offset-notes{ margin-left:0; }
}
.opt select:disabled,
.opt input[type="range"]:disabled,
.opt input[type="number"]:disabled,
.opt input[type="color"]:disabled,
.opt button:disabled{
  opacity:0.55;
  cursor:not-allowed;
  filter:grayscale(0.35);
}
.opt small{opacity:.75}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.btn { background:#0b0f1a; color:#dff6ff; border:1px solid #284a5a; border-radius:10px; padding:8px 12px; cursor:pointer }
.btn:hover{background:#0e1422}
.btn-lg{font-size:22px; padding:18px 28px; border-radius:14px;}
.btn-danger-border{border-color:#d33;}
.btn-active{background:#12301f; border-color:#34d399; color:#eafff1; box-shadow:0 0 0 1px rgba(52,211,153,.3) inset;}
.rec-auto-armed{
  border-color:#ff9f1a;
  color:#fff4d9;
  animation: recAutoArmedBlink 0.8s ease-in-out infinite alternate;
}
.rec-auto-recording{
  border-color:#d33;
  background:#3a0d0d;
  color:#ffeaea;
  box-shadow:0 0 0 1px rgba(211,51,51,.28) inset;
  animation:none;
}
.btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
  filter:grayscale(0.35);
}

.split-popup{
  position:fixed;
  inset:0;
  z-index:9500;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(8,8,15,0.55);
  backdrop-filter:blur(3px);
  pointer-events:auto;
}
.split-popup__box{
  width:min(520px, calc(100vw - 24px));
  padding:14px 14px 10px;
  background:rgba(12,14,22,0.95);
  border:1px solid #284a5a;
  border-radius:14px;
  color:#e8f5ff;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
  font-family:ui-monospace,monospace;
}
.split-popup__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.split-popup__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 0;
}

#recorderHud{
  position:fixed;
  inset:0;
  z-index:9100;
  display:none;
  background:transparent;
  pointer-events:none;
}
.rec-floating{
  position:fixed;
  pointer-events:auto;
}
#recorderHud a{color:#9cf;}
.rec-list{
  background:rgba(10,12,18,0.8);
  border:1px solid #284a5a;
  border-radius:12px;
  padding:10px;
  min-width:220px;
  max-width:none;
  overflow-y:auto;
  color:#cfefff;
  font:14px ui-monospace,monospace;
  box-shadow:0 4px 18px rgba(0,0,0,0.25);
}
.rec-list h4{
  margin:0 0 6px 0;
  font:14px ui-monospace,monospace;
  color:#9fdba0;
}
.rec-list .rec-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.rec-list .rec-item:last-child{border-bottom:none;}
.rec-list .rec-name{flex:1; word-break:break-word;}
.rec-list .btn-compact{
  padding:6px 10px;
  font:13px ui-monospace,monospace;
  border-radius:8px;
}
.rec-list--external{
  padding:8px;
  font:13px ui-monospace,monospace;
}
.rec-list--external h4{
  margin:0 0 4px 0;
  font:13px ui-monospace,monospace;
}
.rec-list--external .rec-item{
  gap:8px;
  padding:4px 0;
}
.rec-list--external .btn-compact{
  padding:5px 8px;
  font:12px ui-monospace,monospace;
}
.rec-timer{
  display:block;
  color:#cfefff;
  font:600 37px ui-monospace,monospace;
  text-align:center;
}
.rec-timer .hund{
  font-size:18.5px;
  opacity:0.8;
  vertical-align:baseline;
}

.rec-label {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:18px 28px;
  border-radius:14px;
  background:#0f2c0f;
  color:#dff6dd;
  font:22px ui-monospace,monospace;
  min-width:220px;
}
.rec-label.active {
  background:#0f2c0f;
}
.rec-label.blink {
  animation: recBlink 0.8s ease-in-out infinite alternate;
}
@keyframes recBlink {
  from { background: #2d0a0a; }
  to   { background: #5c0f0f; }
}
@keyframes recAutoArmedBlink {
  from { background:#3a2204; }
  to   { background:#7a4708; }
}
.rec-processing{
  position:fixed;
  inset:0;
  z-index:9200;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(8,8,15,0.55);
  backdrop-filter:blur(3px);
  pointer-events:none;
}
.rec-processing-box{
  min-width:280px;
  padding:18px 26px;
  background:rgba(12,14,22,0.9);
  border:1px solid #284a5a;
  border-radius:14px;
  text-align:center;
  color:#e8f5ff;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.rec-processing-text{
  font:600 18px ui-monospace,monospace;
  margin:10px 0 4px;
  letter-spacing:0.3px;
}
.rec-processing-sub{
  font:14px ui-monospace,monospace;
  color:#9cb7d1;
}
.rec-spinner{
  width:54px;
  height:54px;
  border-radius:50%;
  margin:0 auto;
  border:4px solid rgba(0,231,255,0.25);
  border-top-color:#00e7ff;
  animation: recSpin 1s linear infinite;
}
@keyframes recSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.rec-warning{
  position:fixed;
  inset:0;
  z-index:9300;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(8,8,15,0.65);
  backdrop-filter:blur(4px);
  pointer-events:auto;
}
.rec-warning-box{
  max-width:460px;
  padding:18px 22px;
  background:rgba(12,14,22,0.95);
  border:1px solid #284a5a;
  border-radius:14px;
  color:#e8f5ff;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.rec-warning-box h3{
  margin:0 0 8px;
  font:600 18px ui-monospace,monospace;
  color:#9fdba0;
}
.rec-warning-box p{
  margin:0 0 10px;
  font:14px ui-monospace,monospace;
  color:#cfefff;
  line-height:1.5;
}
.rec-warning-ack{
  align-items:center;
  gap:10px;
  margin:10px 0 14px;
  color:#cfefff;
}
.rec-warning-box .btn{
  width:100%;
  justify-content:center;
}

.calibration-modal{
  position:fixed;
  inset:0;
  z-index:9400;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:70px 18px 24px;
  background:rgba(8,8,15,0.7);
  backdrop-filter:blur(4px);
  pointer-events:auto;
}
.calibration-box{
  width:100%;
  max-width:700px;
  max-height:78vh;
  overflow-y:auto;
  padding:18px 22px;
  background:rgba(12,14,22,0.95);
  border:1px solid #2f4d5d;
  border-radius:16px;
  color:#e8f5ff;
  box-shadow:0 10px 34px rgba(0,0,0,0.4);
  font-family:ui-monospace,monospace;
}
.calibration-box h3{
  margin:0 0 8px;
  font:600 19px ui-monospace,monospace;
  color:#c7ffe9;
}
.calibration-box h4{
  margin:12px 0 6px;
  font:600 16px ui-monospace,monospace;
  color:#9fdba0;
}
.calibration-box p{
  margin:0 0 8px;
  line-height:1.5;
  font:15px ui-monospace,monospace;
  color:#dcefff;
}
.calibration-box .calibration-quote{
  color:#c9e7ff;
  font-style:italic;
}
.calibration-divider{
  height:1px;
  margin:10px 0 8px;
  background:linear-gradient(90deg, transparent 0%, #24424f 15%, #3e5c74 50%, #24424f 85%, transparent 100%);
}
.calibration-box .btn{
  width:100%;
  justify-content:center;
  margin-top:6px;
}

/* --- Option Sections --- */
.opt-head { grid-column: 1 / -1; padding-top: 8px; }
.opt-head h3 { margin: 6px 0 2px; color: #c7ffe9; font: 600 16px ui-monospace, monospace; border-bottom: 1px solid #1e2a35; padding-bottom: 6px; }

#optionsPanelNew summary{font-size:17px;padding:8px 4px;}
#optionsPanelNew .opt{font-size:16px;}
.changelog-details { margin: 20px 0 0 5px; }
.changelog-content > .opt-group { margin-top: 0; }
.changelog-version { margin-left: 12px; }
.changelog-date { margin: 0; color: #8fd3d4; }
.changelog-heading { margin: 4px 0 0 12px; color: #8fd3d4; }
.changelog-list { margin: 2px 0 0 24px; color: #b2c7d9; }
.opt-w-110 { width: 110px !important; }
.opt-w-120 { width: 120px !important; }
.opt-w-140 { width: 140px !important; }
.opt-w-150 { width: 150px !important; }
.opt-w-180 { width: 180px !important; }
.opt-w-220 { width: 220px !important; }