:root{color-scheme:light dark;--bg:#f8f7f4;--text:#242824;--muted:#646e65;--line:#dedfd8;--accent:#243d30;--button-text:#fff;--red:#c85b53}
@media(prefers-color-scheme:dark){:root{--bg:#181d1a;--text:#f2f4ee;--muted:#a7b1a8;--line:#343d36;--accent:#d3e8d9;--button-text:#172a20;--red:#ea8177}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px -apple-system,BlinkMacSystemFont,sans-serif}
main{max-width:560px;min-height:100dvh;margin:auto;padding:calc(env(safe-area-inset-top) + 20px) 24px calc(env(safe-area-inset-bottom) + 100px)}
header{display:flex;justify-content:space-between;align-items:center;margin:10px 0 20px;gap:12px}
h1{font-size:32px;font-weight:640;letter-spacing:-.04em;margin:0;overflow-wrap:anywhere}
h2{font-size:17px;margin:0 0 10px}
button,a{color:inherit;font:inherit}button{border:0;background:none;cursor:pointer;padding:11px 0}button:disabled{opacity:.45}
button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.quiet,#message,.status,.meta,.empty{color:var(--muted);font-size:13px}
.row{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;min-height:62px;border-bottom:1px solid var(--line);gap:12px}
.meta{display:block;margin-top:5px}.chevron{color:var(--muted)}
footer{position:fixed;inset:auto 0 0;text-align:center;background:var(--bg);padding:12px 24px calc(env(safe-area-inset-bottom) + 14px)}
#record,.actions button:last-child{background:var(--accent);color:var(--button-text);border-radius:99px;padding:14px 28px;min-width:118px;font-weight:600}
.dot{display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:50%;background:var(--red);vertical-align:2px}body.recording .dot{border-radius:2px}
section{border-top:1px solid var(--line);padding:18px 0}section p,details p{white-space:pre-wrap;line-height:1.65;overflow-wrap:anywhere}
details{border-top:1px solid var(--line);padding:14px 0}summary{cursor:pointer}
dialog{border:1px solid var(--line);border-radius:18px;background:var(--bg);color:var(--text);width:min(400px,calc(100% - 36px));padding:22px}
dialog::backdrop{background:#0005}textarea{display:block;width:100%;margin:10px 0 16px;font:inherit;padding:8px;border:1px solid var(--line);border-radius:8px;color:inherit;background:var(--bg)}
.actions{display:flex;justify-content:flex-end;gap:16px;align-items:center}.actions button:last-child{min-width:0;padding:8px 16px}
[hidden]{display:none!important}