:root {
  --bg: #1e1e2e; --text: #cdd6f4; --panel: #313244;
  --primary: #89b4fa; --danger: #f38ba8; --success: #a6e3a1;
}
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg); color: var(--text);
  margin: 0; padding: 2rem; display: flex; justify-content: center;
}
.container {
  max-width: 600px; width: 100%; background: var(--panel);
  padding: 2rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
h1 { margin-top: 0; font-size: 1.8rem; text-align: center; }
h2 { font-size: 1.2rem; border-bottom: 2px solid #45475a; padding-bottom: 0.5rem; margin-top: 1.5rem; }
.section { margin-bottom: 1.5rem; }
.disabled { opacity: 0.3; pointer-events: none; }
.btn {
  padding: 0.8rem 1.5rem; border: none; border-radius: 8px;
  font-size: 1rem; font-weight: bold; cursor: pointer; transition: 0.2s; color: #111;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--primary); }
.btn-danger { background: var(--danger); }
.btn-success { background: var(--success); width: 100%; font-size: 1.2rem; margin-top: 1rem;}
.btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-2px); }
.presets { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.preset-btn { background: #45475a; color: var(--text); flex: 1 1 calc(33% - 1rem); }
.preset-btn.active { background: var(--primary); color: #111; }
#status-text { font-size: 0.9rem; color: #a6adc8; text-align: center; margin-top: 1rem; }
audio { width: 100%; margin-top: 1rem; outline: none; }