:root{
  --bg:#faf9f6; --card:#ffffff; --ink:#1b1f23; --muted:#6a7077; --line:#e3e1db;
  --accent:#1f6f6b; --accent-ink:#ffffff; --rec:#c8372d; --ok:#2f7d4f;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#14171a; --card:#1c2024; --ink:#eceae4; --muted:#9aa0a6; --line:#2c3238; --accent:#4fb3ad; --accent-ink:#0c1514; --rec:#ef6a60; --ok:#6cc28f; }
}
*{box-sizing:border-box}
html{font-size:18px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;line-height:1.5}
#app{max-width:34rem;margin:0 auto;padding:1.5rem 1.25rem 4rem;min-height:100vh}
.screen{animation:in .35s ease both}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.screen,.pulse{animation:none!important}}
h1{font-size:1.7rem;line-height:1.2;margin:1.5rem 0 .5rem;font-weight:600}
h2{font-size:1.2rem;margin:1.5rem 0 .5rem;font-weight:600}
p{margin:.5rem 0}
.muted{color:var(--muted);font-size:.9rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.1rem;margin:1rem 0}
label{display:block;font-weight:500;margin:1rem 0 .3rem}
input,select{width:100%;font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.7rem .8rem}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.check{display:flex;gap:.7rem;align-items:flex-start;margin:.8rem 0;font-weight:400}
.check input{width:1.3rem;height:1.3rem;margin-top:.15rem;flex:none}
button{font:inherit;cursor:pointer;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink);padding:.75rem 1.1rem}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
button:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:.7rem;justify-content:space-between;align-items:center;margin-top:1.5rem}
.row.end{justify-content:flex-end}
.err{color:var(--rec);font-weight:500;min-height:1.5rem;margin-top:.8rem}
.progress{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin:1rem 0 .3rem}
.progress>i{display:block;height:100%;background:var(--accent);transition:width .4s ease}
.group{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:1.8rem}
.prompt{font-size:2.1rem;line-height:1.2;font-weight:600;margin:.3rem 0 .4rem}
.recwrap{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin:2rem 0 1rem}
.mic{width:116px;height:116px;border-radius:50%;border:none;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:.95rem;font-weight:600;padding:0;transition:transform .15s ease}
.mic:active{transform:scale(.96)}
.mic.recording{background:var(--rec)}
.mic.recording.pulse{animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--rec) 45%,transparent)}70%{box-shadow:0 0 0 22px transparent}100%{box-shadow:0 0 0 0 transparent}}
.meter{width:70%;height:6px;border-radius:6px;background:var(--line);overflow:hidden;visibility:hidden}
.meter.on{visibility:visible}
.meter>i{display:block;height:100%;width:0;background:var(--rec);transition:width .08s linear}
.status{min-height:1.4rem;font-size:.9rem;color:var(--muted)}
.status.ok{color:var(--ok)}
.status.bad{color:var(--rec)}
.actions{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
audio{width:100%;max-width:20rem}
.list{list-style:none;padding:0;margin:1rem 0}
.list li{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.65rem .2rem;border-bottom:1px solid var(--line)}
.list button{padding:.3rem .8rem;font-size:.85rem}
.tag{font-size:.85rem;font-weight:600}
.tag.ok{color:var(--ok)}.tag.skip{color:var(--muted)}.tag.todo{color:var(--rec)}
.link{background:none;border:none;color:var(--muted);text-decoration:underline;padding:.4rem}
dialog{border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--ink);max-width:26rem;padding:1.4rem}
dialog::backdrop{background:rgba(0,0,0,.45)}