:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #08101d; color: #edf4ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #183052 0, #08101d 52%); }
.shell { width: min(100% - 32px, 680px); margin: 0 auto; padding: max(40px, env(safe-area-inset-top)) 0 40px; }
.eyebrow, .label { margin: 0 0 6px; color: #71d6c3; font-size: .78rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2.2rem, 10vw, 4rem); letter-spacing: -.055em; }
.lede { color: #b7c5d9; line-height: 1.6; }
.card { margin-top: 24px; padding: 24px; border: 1px solid #30435e; border-radius: 22px; background: rgba(15, 27, 45, .9); box-shadow: 0 20px 50px rgba(0,0,0,.24); }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
h2 { margin: 0; font-size: 1.35rem; }
.status-dot { width: 14px; height: 14px; border-radius: 50%; background: #69809d; box-shadow: 0 0 0 6px rgba(105,128,157,.14); }
body[data-state="recording"] .status-dot { background: #ff5c75; box-shadow: 0 0 0 7px rgba(255,92,117,.15); animation: pulse 1.6s infinite; }
label { display: block; margin: 22px 0 8px; color: #c6d3e4; font-weight: 650; }
input { width: 100%; padding: 14px 15px; border: 1px solid #405572; border-radius: 12px; background: #0b1627; color: inherit; font: inherit; }
.buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
button, .link-button { min-height: 48px; border: 0; border-radius: 13px; padding: 12px 16px; font: inherit; font-weight: 750; cursor: pointer; text-align: center; text-decoration: none; }
.primary { background: #71d6c3; color: #071813; }
.secondary { background: #293b55; color: #edf4ff; }
button:disabled { cursor: not-allowed; opacity: .45; }
.hint, .signed-out p { color: #9fb0c6; line-height: 1.55; }
.transcript { min-height: 110px; white-space: pre-wrap; font-size: 1.15rem; line-height: 1.7; }
.interim { color: #8295ad; font-size: 1.05rem; line-height: 1.7; }
.message { min-height: 24px; color: #ffd28c; line-height: 1.5; }
.logout-form { text-align: center; }
.text-button { background: transparent; color: #91a5bf; text-decoration: underline; }
.signed-out .link-button { display: inline-flex; align-items: center; margin-top: 8px; }
@keyframes pulse { 50% { transform: scale(.78); opacity: .65; } }
@media (max-width: 480px) { .buttons { grid-template-columns: 1fr; } .card { padding: 20px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }