:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:#111827; color:#f9fafb; }
* { box-sizing:border-box; }
body { margin:0; min-height:100svh; background:linear-gradient(160deg,#111827,#1f2937); }
main { max-width:520px; margin:auto; padding:calc(22px + env(safe-area-inset-top)) 18px calc(26px + env(safe-area-inset-bottom)); }
h1 { margin:0 0 4px; font-size:28px; } h2 { margin-top:0; font-size:20px; }
.card { background:#1f2937; border:1px solid #374151; border-radius:16px; padding:18px; margin-top:18px; }
label { display:block; margin:13px 0; color:#d1d5db; font-size:14px; }
input { display:block; width:100%; margin-top:6px; border:1px solid #4b5563; border-radius:10px; background:#111827; color:#fff; padding:12px; font-size:16px; }
button { border:0; border-radius:12px; background:#2563eb; color:white; font-size:17px; font-weight:650; padding:14px 16px; width:100%; margin-top:10px; }
button.secondary { background:#374151; } button.small { font-size:14px; padding:10px; }
.row { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .row button { margin-top:4px; font-size:15px; }
.record { background:#dc2626; min-height:80px; font-size:24px; } .stop { background:#b45309; min-height:64px; font-size:20px; }
.timer { font-variant-numeric:tabular-nums; text-align:center; font-size:48px; font-weight:700; letter-spacing:1px; margin:8px 0; }
.muted { color:#9ca3af; } .hidden { display:none; } .status-card p { margin-bottom:0; word-break:break-word; }
#stealth-exit { position:fixed; left:0; bottom:0; width:185px; background:#172033; color:#f8fafc; border:1px solid #475569; border-radius:0 12px 0 0; opacity:.94; font-size:13px; padding:12px; z-index:10; }
body.stealth { background:#000; }
body.stealth main { max-width:none; min-height:100svh; padding:0; }
body.stealth header, body.stealth .status-card, body.stealth #sign-out, body.stealth #stealth { display:none; }
body.stealth #recorder-card { position:fixed; inset:0; margin:0; padding:0; border:0; border-radius:0; background:#000; }
body.stealth .timer, body.stealth #recording-state { color:#060606; opacity:.85; }
body.stealth .timer { position:absolute; top:env(safe-area-inset-top); right:9px; font-size:14px; }
body.stealth #recording-state { position:absolute; top:calc(env(safe-area-inset-top) + 26px); right:9px; font-size:9px; }
body.stealth #record { display:none; }
body.stealth #stop { position:fixed; right:8px; bottom:calc(8px + env(safe-area-inset-bottom)); width:auto; min-height:0; padding:7px 10px; background:#050505; color:#0b0b0b; font-size:11px; opacity:.35; }