:root{--bg:#fff;--fg:#1d2433;--mut:#5b667a;--card:#f5f7fb;--bd:#c9d1e0;--ac:#1456d8;--rec:#d6293e;--err:#b42318}
@media(prefers-color-scheme:dark){:root{--bg:#111;--fg:#eee;--mut:#9aa4b5;--card:#181c24;--bd:#3a4152;--ac:#6ea0ff;--rec:#ff6070;--err:#ff8a80}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 system-ui,sans-serif}
.frame{max-width:420px;margin:32px auto;padding:24px 16px;border:1px solid var(--bd);display:flex;flex-direction:column;align-items:center;gap:24px}
.card{width:100%;border:1px solid var(--bd);padding:24px 16px;display:flex;flex-direction:column;align-items:center;gap:16px;background:var(--card)}
.start{width:96px;height:96px;border-radius:50%;border:2px solid var(--fg);background:transparent;color:var(--fg);cursor:pointer;font:inherit}
.start:hover{border-color:var(--ac)}.start.recording{border-color:var(--rec);color:var(--rec);animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--rec) 25%,transparent)}}
.row{display:flex;align-items:center;gap:16px}.timer{font-variant-numeric:tabular-nums}
.btn{border:1px solid var(--fg);background:transparent;color:var(--fg);padding:6px 20px;cursor:pointer;font:inherit}
.btn:disabled{opacity:.4;cursor:not-allowed}.btn:hover:not(:disabled){border-color:var(--ac);color:var(--ac)}
.btn.preview{min-width:160px;padding:10px 20px}.btn[hidden]{display:none}
.status{margin:0;color:var(--mut);font-size:.9rem;text-align:center;min-height:2.7em}.status.err{color:var(--err)}
.hint{margin:0;color:var(--mut);font-size:.75rem;text-align:center}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px;z-index:10}
.modal{background:var(--bg);border:1px solid var(--bd);width:min(960px,100%);max-height:90vh;display:flex;flex-direction:column}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--bd)}
.modal-head h2{margin:0;font-size:1rem}.err{color:var(--err);margin:8px 16px 0}.note{color:var(--mut);font-size:.85rem;margin:0 0 4px}
.split{display:flex;min-height:0;flex:1}.pane{flex:1;min-width:0;padding:12px 16px;overflow:auto}.divider{width:1px;background:var(--bd)}
.pane h3{margin:0 0 8px;font-size:.95rem}.pane h4{margin:12px 0 4px;font-size:.8rem;color:var(--mut);font-weight:600}
audio{width:100%}.transcript{background:var(--card);border:1px solid var(--bd);padding:8px;white-space:pre-wrap}
pre{background:var(--card);border:1px solid var(--bd);padding:8px;margin:0;overflow:auto;font-size:.8rem}
@media(max-width:640px){.split{flex-direction:column}.divider{width:auto;height:1px}}
.login-title{margin:0;font-size:1.1rem}.card label{align-self:flex-start;font-size:.85rem;color:var(--mut)}
.field{width:100%;padding:8px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);font:inherit}