:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #020305;
  color: #f4f7ff;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #020305; }
button, select, input { font: inherit; }
button, select, .file-button {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(17,23,36,.80);
  color: #f7f9ff;
  border-radius: 10px;
  padding: 9px 12px;
  backdrop-filter: blur(14px);
}
button:hover, select:hover, .file-button:hover { border-color: rgba(118,209,255,.65); background: rgba(26,36,56,.90); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { border-color: rgba(79,203,255,.62); background: rgba(13,75,104,.82); }
#visualizer { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: default; }
.topbar {
  position: fixed; top: 12px; left: 12px; right: 12px; z-index: 5;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  background: rgba(3,7,14,.66); backdrop-filter: blur(18px);
}
.brand { margin-right: auto; display: flex; gap: 9px; align-items: baseline; }
.brand strong { font-size: 17px; }
.brand span { font-size: 12px; color: #90a2bc; }
.engine-control { display: flex; align-items: center; gap: 8px; color: #b8c5d9; font-size: 13px; }
.audio-panel {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 5;
  padding: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
  background: rgba(3,7,14,.69); backdrop-filter: blur(18px);
}
.audio-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.status { margin-top: 8px; color: #a9bad1; font-size: 13px; }
.status.ok { color: #79e8a9; }
.status.error { color: #ff8d9b; }
.capture-hint { margin-top: 5px; color: #8191aa; font-size: 11px; line-height: 1.35; }
.meters { display: grid; grid-template-columns: repeat(4, minmax(80px, 1fr)); gap: 8px; margin-top: 8px; }
.meters span { font-size: 10px; color: #70819b; }
.meters i { display: block; height: 4px; margin-top: 3px; border-radius: 10px; background: linear-gradient(90deg,#68ddff var(--value,0%),rgba(255,255,255,.08) var(--value,0%)); }
.settings-panel {
  position: fixed; z-index: 10; top: 84px; right: 12px; bottom: 150px; width: min(460px, calc(100vw - 24px));
  overflow: auto; padding: 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px;
  background: rgba(5,9,17,.95); box-shadow: 0 25px 70px rgba(0,0,0,.55); backdrop-filter: blur(22px);
  scrollbar-width: thin;
}
.hidden { display: none !important; }
.settings-head { display: flex; align-items: center; justify-content: space-between; }
.settings-head h2 { margin: 0; font-size: 19px; }
.settings-head button { font-size: 21px; padding: 2px 10px; min-width: 42px; }
.settings-section { margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.10); }
.settings-section:first-of-type { border-top: 0; padding-top: 0; }
.settings-section h3 { margin: 0 0 11px; font-size: 15px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.section-title-row h3 { margin: 0; }
.section-title-row button { padding: 7px 10px; font-size: 12px; }
.setting-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; margin: 15px 0; }
.setting-row label { font-size: 13px; color: #c6d2e5; }
.setting-row output { font-variant-numeric: tabular-nums; color: #76d9ff; font-size: 12px; white-space: nowrap; }
.setting-row input { grid-column: 1 / -1; width: 100%; accent-color: #65d7ff; }
.select-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 52%); gap: 10px; align-items: center; margin: 14px 0; color: #c6d2e5; font-size: 13px; }
.select-row select { width: 100%; }
.check-row { display: flex; align-items: center; gap: 9px; margin: 13px 0; color: #c6d2e5; font-size: 13px; }
.check-row input { width: 17px; height: 17px; accent-color: #65d7ff; }
.band-selector {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 12px 0 15px; padding: 10px 12px 11px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 11px;
}
.band-selector legend { padding: 0 6px; color: #c6d2e5; font-size: 13px; }
.band-selector label { display: inline-flex; align-items: center; gap: 7px; color: #d8e3f4; font-size: 13px; }
.band-selector input { width: 17px; height: 17px; accent-color: #65d7ff; }
.preset-controls { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.file-button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.file-button input { display: none; }
.file-button.wide { width: 100%; margin-top: 8px; }
.note, .help { color: #8799b4; font-size: 12px; line-height: 1.45; }
.common-settings > button { width: 100%; margin-top: 7px; }
.diagnostics {
  position: fixed; z-index: 7; left: 18px; top: 84px; margin: 0;
  white-space: pre-line; padding: 9px 11px; border-radius: 10px;
  background: rgba(0,0,0,.68); border: 1px solid rgba(255,255,255,.11);
  color: #b8d9ec; font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  pointer-events: none;
}
body.fullscreen-ui-hidden .topbar,
body.fullscreen-ui-hidden .audio-panel,
body.fullscreen-ui-hidden .settings-panel,
body.fullscreen-ui-hidden .diagnostics { display: none !important; }
body.fullscreen-ui-hidden #visualizer { cursor: none; }
@media (max-width: 720px) {
  .topbar { align-items: stretch; }
  .brand { width: 100%; }
  .engine-control { flex: 1; }
  .engine-control select { width: 100%; }
  .meters { grid-template-columns: repeat(2, 1fr); }
  .settings-panel { top: 136px; bottom: 170px; }
  .select-row { grid-template-columns: 1fr; }
}