body{font-size:11px;line-height:1.9;padding:24px 16px 56px}
main{max-width:560px;margin-inline:auto}
h1{margin:0 0 20px;font-weight:400;font-size:clamp(14px,4.4vw,20px);line-height:1.4}
.fx-lab-heading h2{margin:0;font-weight:400;font-size:clamp(13px,3.8vw,18px);line-height:1.5}




/* Visualizador de áudio retrô */
.waveform-frame {
  margin: 14px 0 4px;
  padding: 10px;
  border: 3px solid var(--line);
  background: var(--bg);
}
.waveform-heading {
  margin-bottom: 8px;
  font-family: "Press Start 2P", monospace;
  font-size: 8px;
  line-height: 1.8;
  color: var(--fg);
}
#liveWaveform {
  display: block;
  width: 100%;
  height: 112px;
  background: var(--bg);
  border: 1px solid var(--line);
  image-rendering: pixelated;
}
.waveform-caption {
  margin: 7px 0 0;
  font-family: var(--font-text);
  color: var(--mute);
  font-size: 11px;
  line-height: 1.5;
}


/* Presets extras: botões compactos que quebram linha em telas menores */
.presets {
  gap: 8px;
  margin-bottom: 24px;
}
.presets button {
  min-height: 38px;
  padding: 10px 12px;
  line-height: 1.5;
}
.presets button:focus-visible {
  outline: 3px dashed var(--fg);
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .presets {
    gap: 7px;
  }
  .presets button {
    flex: 1 1 calc(50% - 7px);
    min-width: 0;
  }
}


/* Área de presets personalizados — mantém a estética retrô */
.custom-presets {
  margin: 0 0 24px;
  padding: 14px;
  border: 3px solid var(--line);
  min-width: 0;
}
.custom-presets h3 {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.7;
}
.save-preset-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.save-preset-row .file-label {
  margin: 4px 0 0;
}
#customPresetName {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  color: var(--fg);
  font: 12px/1.5 var(--font-text);
}
#customPresetName:focus-visible,
.custom-presets button:focus-visible {
  outline: 3px dashed var(--fg);
  outline-offset: 3px;
}
.custom-preset-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.custom-preset-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.custom-preset-name {
  overflow-wrap: anywhere;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.5;
}
.custom-preset-item button,
#savePresetBtn {
  font-size: 9px;
  padding: 10px;
}
@media (max-width: 420px) {
  .custom-preset-item {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .custom-preset-name {
    grid-column: 1 / -1;
  }
}


/* Voice Studio 2.0 additions */
.waveform-frame{margin:16px 0;padding:12px;border:2px dashed var(--line)}
.waveform-heading{font-size:9px;line-height:1.8;margin-bottom:8px}
#liveWaveform{display:block;width:100%;height:112px;border:1px solid var(--line);background:var(--bg)}
.waveform-caption{font-family:var(--font-text);font-size:12px;color:var(--mute);margin:8px 0 0}
.processed-record-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.processed-record-actions button{font-size:9px}
#stopProcessedBtn{background:var(--bg);color:var(--fg)}
@media(max-width:480px){.processed-record-actions button{flex:1 1 100%}}


/* FX LAB */
.studio-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.studio-nav-link{display:inline-block;padding:10px 12px;border:2px solid var(--line);color:var(--fg);text-decoration:none;font-size:9px}
.studio-nav-link:hover,.studio-nav-link.active{background:var(--fg);color:var(--bg)}
.fx-lab{border:3px solid var(--line);padding:16px;margin:0 0 20px;min-width:0}
.fx-lab-heading h3{font-size:clamp(12px,3vw,16px);font-weight:400;margin:0 0 12px}
.eyebrow,.ab-label{font-size:9px;letter-spacing:.08em;margin:0 0 8px;color:var(--mute)}
.ab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.ab-card{border:2px dashed var(--line);padding:12px;min-width:0}
.ab-card button{margin:4px 5px 4px 0}
.ab-label{color:var(--fg)}
.fx-lab-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fx-lab-actions .small{margin:0;flex:1 1 220px}
.fx-tip{margin:14px 0 0}
@media(max-width:520px){
  .ab-grid{grid-template-columns:1fr}
}


/* Interruptores individuais: desligar preserva os valores dos controles. */
.effect-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 70px;
  margin: 0 0 8px;
  padding: 4px 6px;
  border: 2px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 9px;
  line-height: 1.4;
  cursor: pointer;
}
.effect-switch-track {
  position: relative;
  display: inline-flex;
  flex: 0 0 34px;
  align-items: center;
  width: 34px;
  height: 18px;
  border: 2px solid var(--line);
  background: var(--bg);
  transition: background-color 120ms ease;
}
.effect-switch-thumb {
  width: 10px;
  height: 10px;
  margin-left: 2px;
  background: var(--fg);
  transition: transform 120ms ease;
}
.effect-switch[aria-checked="true"] .effect-switch-track { background: var(--fg); }
.effect-switch[aria-checked="true"] .effect-switch-thumb { background: var(--bg); transform: translateX(16px); }
.effect-switch-state { min-width: 22px; font-size: 8px; text-align: center; }
.effect-switch.is-off { color: var(--mute); }
.effect-switch:focus-visible { outline: 3px dashed var(--fg); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .effect-switch-track, .effect-switch-thumb { transition: none; }
}


.voice-shortcuts {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 36px;
}


/* Tema manual do Voice Studio */
html[data-theme="light"]{
  --bg:#fff;
  --fg:#000;
  --mute:#555;
  --line:#000;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#0b0d12;
  --fg:#edf0f7;
  --mute:#b8bdca;
  --line:#757d8e;
  color-scheme:dark;
}
.voice-toolbar{display:flex;justify-content:flex-end;margin:0 0 10px}
.theme-toggle{display:flex;align-items:center;gap:6px;padding:8px 10px;border:2px solid var(--line);background:var(--bg);color:var(--fg);font:7px var(--font);white-space:nowrap;cursor:pointer}
.theme-toggle small{font:6px var(--font)}
.theme-toggle:hover{background:var(--fg);color:var(--bg)}
html[data-theme="dark"] .warn{background:#131722}
html[data-theme="dark"] fieldset,
html[data-theme="dark"] .control-panel,
html[data-theme="dark"] .ab-card,
html[data-theme="dark"] .fx-lab{background:#131722;color:var(--fg)}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] audio{color-scheme:dark}


.audio-file-limits{margin:8px 0 0;padding:10px 12px;border-left:3px solid var(--line);background:color-mix(in srgb,var(--bg) 92%,var(--fg));}