:root {
  color-scheme: dark;
  --bg: #070b13;
  --panel: #0e1523;
  --panel-2: #121c2d;
  --line: rgba(255,255,255,.09);
  --text: #f7f8fb;
  --muted: #9aa7bb;
  --accent: #f2b84b;
  --accent-2: #ffd886;
  --danger: #ef5b63;
  --ok: #42c88a;
  --radius: 20px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin:0; min-height:100vh; background: radial-gradient(circle at 90% 0%, rgba(242,184,75,.12), transparent 34rem), radial-gradient(circle at 10% 30%, rgba(58,116,255,.08), transparent 28rem), var(--bg); color:var(--text); }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.shell { width:min(980px,100%); margin:0 auto; padding:24px 16px 48px; }
.hero { display:flex; gap:24px; align-items:end; justify-content:space-between; padding:18px 4px 26px; }
.eyebrow { color:var(--accent); font-size:.76rem; font-weight:800; letter-spacing:.16em; margin:0 0 8px; }
h1 { font-size:clamp(2.4rem,10vw,4.8rem); line-height:.94; margin:0; letter-spacing:-.055em; }
.subtitle { max-width:620px; color:var(--muted); line-height:1.55; margin:14px 0 0; }
.library-link { color:#111; background:var(--accent); padding:12px 15px; border-radius:999px; text-decoration:none; font-weight:800; white-space:nowrap; }
.panel { background:linear-gradient(180deg,rgba(255,255,255,.035),transparent),var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; margin-bottom:16px; box-shadow:0 18px 50px rgba(0,0,0,.18); }
.notice { margin:0 0 16px; padding:13px 15px; border-radius:14px; border:1px solid rgba(239,91,99,.4); color:#ffd3d6; background:rgba(239,91,99,.09); }
.section-head { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:18px; }
.section-head > div:first-child { display:flex; gap:12px; align-items:center; }
.step { width:36px; height:36px; display:grid; place-items:center; border-radius:12px; color:#111; background:var(--accent); font-weight:900; flex:0 0 auto; }
h2 { margin:0; font-size:1.16rem; }
.section-head p,.editor-head p { margin:3px 0 0; color:var(--muted); font-size:.88rem; line-height:1.45; }
.tracks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.track-card { padding:14px; border-radius:16px; background:var(--panel-2); border:1px solid var(--line); }
.track-card.loaded { border-color:rgba(242,184,75,.45); }
.track-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.track-number { font-weight:900; font-size:.92rem; color:var(--accent-2); }
.file-button input { position:absolute; opacity:0; pointer-events:none; }
.file-button span,.ghost,.download { border:1px solid var(--line); background:rgba(255,255,255,.045); color:var(--text); border-radius:11px; padding:9px 11px; font-weight:700; cursor:pointer; text-decoration:none; display:inline-block; }
.file-button input:disabled + span { opacity:.45; cursor:not-allowed; }
.track-name { min-height:2.5em; margin:12px 0 8px; color:var(--muted); font-size:.85rem; overflow-wrap:anywhere; }
.preview-row { display:flex; align-items:center; gap:10px; margin:8px 0 12px; }
.preview-state { color:var(--muted); font-size:.76rem; }
.preview-button.playing { border-color:rgba(242,184,75,.48); color:var(--accent-2); }
.track-volume,.master-row { display:grid; grid-template-columns:auto 1fr 54px; gap:10px; align-items:center; }
.track-volume label,.master-row label { font-size:.82rem; color:var(--muted); }
output { text-align:right; font-variant-numeric:tabular-nums; font-size:.82rem; color:var(--accent-2); }
input[type="range"] { width:100%; accent-color:var(--accent); }
.master-row { background:rgba(255,255,255,.025); border:1px solid var(--line); padding:12px; border-radius:14px; }
.quality-toggle { display:flex; gap:10px; align-items:flex-start; margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); }
.quality-toggle input { margin-top:3px; accent-color:var(--accent); }
.quality-toggle span { display:grid; gap:2px; }
.quality-toggle small { color:var(--muted); line-height:1.35; }
.session-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
button { border:0; cursor:pointer; }
button:disabled { opacity:.45; cursor:not-allowed; }
.primary,.danger { min-height:52px; border-radius:14px; font-weight:900; padding:12px 16px; }
.primary { background:var(--accent); color:#111; }
.primary.small { min-height:42px; }
.danger { background:rgba(239,91,99,.14); color:#ffd2d5; border:1px solid rgba(239,91,99,.28); }
.status { padding:7px 10px; border-radius:999px; font-size:.76rem; font-weight:800; }
.status.idle { background:rgba(255,255,255,.06); color:var(--muted); }
.status.recording { background:rgba(239,91,99,.14); color:#ff9fa4; animation:pulse 1.5s infinite; }
.status.done { background:rgba(66,200,138,.13); color:#8ce4ba; }
@keyframes pulse { 50% { opacity:.6; } }
.meter-wrap { margin-top:16px; }
.meter-label { display:flex; justify-content:space-between; color:var(--muted); font-size:.8rem; margin-bottom:7px; }
.meter { height:8px; background:rgba(255,255,255,.065); overflow:hidden; border-radius:999px; }
.meter > div { height:100%; width:0%; background:linear-gradient(90deg,var(--ok),var(--accent)); transition:width .08s linear; }
.hint,.quality-info { color:var(--muted); line-height:1.45; font-size:.82rem; margin:12px 0 0; }
.quality-info { color:#c8d4e5; }
.results-grid { display:grid; gap:12px; }
.results-grid.compact { margin-top:12px; }
.result-card { padding:14px; background:var(--panel-2); border:1px solid var(--line); border-radius:16px; }
.result-card.accent { border-color:rgba(242,184,75,.38); }
.result-card h3,.mix-editor h3 { margin:0 0 10px; font-size:1rem; }
audio { display:block; width:100%; margin-bottom:10px; }
.result-actions { display:flex; flex-wrap:wrap; gap:9px; align-items:center; }
.share-message { color:var(--muted); font-size:.84rem; min-height:1.2em; }
.final-title-row { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.pill { font-size:.72rem; color:var(--accent-2); background:rgba(242,184,75,.1); padding:5px 8px; border-radius:999px; }
.mix-editor { margin-top:14px; padding:14px; border-radius:16px; background:rgba(255,255,255,.02); border:1px solid var(--line); }
.editor-tracks { display:grid; gap:9px; margin-top:14px; }
.editor-track { padding:12px; border-radius:14px; background:var(--panel-2); border:1px solid var(--line); }
.editor-track-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:10px; }
.editor-track-name { font-size:.88rem; overflow-wrap:anywhere; }
.editor-track-kind { color:var(--muted); font-size:.72rem; white-space:nowrap; }
.editor-controls { display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.stems-details { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.stems-details summary { cursor:pointer; color:var(--muted); font-weight:700; }
footer { text-align:center; color:#6f7c90; font-size:.76rem; padding:18px 8px 0; }
@media (max-width:700px) {
  .hero { align-items:flex-start; flex-direction:column; }
  .tracks { grid-template-columns:1fr; }
  .section-head { align-items:flex-start; }
  .master-row { grid-template-columns:1fr 54px; }
  .master-row label { grid-column:1 / -1; }
  .session-controls { grid-template-columns:1fr; }
  .editor-track .track-volume { grid-template-columns:1fr 54px; }
  .editor-track .track-volume label { grid-column:1 / -1; }
}

.voice-quality-box {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  margin: 14px 0;
  border: 1px solid rgba(245, 183, 64, .28);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}
.voice-quality-box select {
  width: 100%;
  background: #111827;
  color: #f8fafc;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
}
.voice-quality-box small { color: #aab4c6; line-height: 1.35; }
.voice-test-row { display: grid; gap: 10px; margin: 12px 0 4px; }
.voice-test-row audio { width: 100%; }

/* V4 — mini players, resultado dentro da gravação e teste de voz separado */
.mini-player {
  display: grid;
  gap: 9px;
  margin: 8px 0 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.mini-player-buttons {
  display: grid;
  grid-template-columns: 42px 56px 56px 1fr;
  gap: 7px;
  align-items: center;
}
.icon-button,
.mini-seek-button {
  min-height: 38px;
  padding: 7px 9px;
  text-align: center;
}
.icon-button {
  font-size: 1rem;
  padding-inline: 0;
}
.preview-state {
  justify-self: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  font-size: .75rem;
}
.preview-seek {
  width: 100%;
  margin: 0;
}
.results-inside {
  margin-top: 18px;
}
.results-divider {
  height: 1px;
  background: var(--line);
  margin: 0 0 18px;
}
.results-subhead {
  margin-bottom: 12px;
}
.results-subhead h3 {
  margin: 0;
  font-size: 1.05rem;
}
.results-subhead p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.45;
}
.voice-test-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
#voiceTestResult {
  margin-top: 12px;
}

@media (max-width:700px) {
  .mini-player-buttons {
    grid-template-columns: 42px 52px 52px 1fr;
  }
  .mini-seek-button {
    padding-inline: 5px;
    font-size: .78rem;
  }
  .preview-state {
    font-size: .72rem;
  }
  .voice-test-controls {
    grid-template-columns: 1fr;
  }
}