:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; background:#f4f7fb; color:#102a43; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at top,#d9f3ec 0,#f4f7fb 42%); }
.shell { width:min(760px,100%); min-height:100vh; margin:auto; padding:24px 18px calc(24px + env(safe-area-inset-bottom)); }
.card,.status-card,.messages,.feedback { background:rgba(255,255,255,.92); border:1px solid #d9e2ec; border-radius:24px; box-shadow:0 18px 50px rgba(16,42,67,.08); }
.login-card { max-width:420px; margin:10vh auto 0; padding:34px; }
.eyebrow { margin:0 0 8px; color:#0b8f73; font-size:12px; font-weight:800; letter-spacing:.18em; }
h1 { margin:0; font-size:clamp(28px,6vw,44px); line-height:1.05; }
h2 { font-size:18px; margin:0 0 12px; }
.muted,#hint { color:#627d98; }
label { display:grid; gap:7px; margin-top:18px; font-size:14px; font-weight:700; }
input { width:100%; border:1px solid #bcccdc; border-radius:14px; padding:13px 14px; font:inherit; }
button { border:0; border-radius:14px; padding:13px 18px; background:#0b8f73; color:white; font:inherit; font-weight:800; cursor:pointer; }
button:disabled { opacity:.45; cursor:not-allowed; }
form button { width:100%; margin-top:24px; }
.error { color:#b42318; min-height:1.4em; }
.hidden { display:none!important; }
.coach { display:grid; gap:16px; min-height:calc(100vh - 48px); grid-template-rows:auto auto 1fr auto auto; }
header { display:flex; align-items:center; justify-content:space-between; }
.ghost { background:transparent; color:#486581; border:1px solid #bcccdc; }
.status-card { padding:16px 20px; display:flex; align-items:center; gap:14px; }
.status-card small { color:#829ab1; display:block; }.status-card strong { display:block; margin-top:3px; }
.status-dot { width:13px; height:13px; border-radius:50%; background:#0b8f73; box-shadow:0 0 0 7px rgba(11,143,115,.13); }
.messages { min-height:280px; padding:18px; overflow:auto; }
.bubble { max-width:86%; margin:10px 0; padding:12px 15px; border-radius:18px; line-height:1.55; }
.bubble.replayable { cursor:pointer; }
.bubble.replayable:active { transform:scale(.99); }
.bubble.user { margin-left:auto; background:#d9f3ec; border-bottom-right-radius:5px; }
.bubble.assistant { background:#eaf0f6; border-bottom-left-radius:5px; }
.feedback { padding:18px; border-left:4px solid #f6ad55; }
footer { text-align:center; padding-top:8px; }
.voice-controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 auto 14px; max-width:520px; text-align:left; }
.voice-controls label { display:grid; gap:6px; margin:0; color:#486581; font-size:12px; font-weight:700; }
.voice-controls select { width:100%; border:1px solid #bcccdc; border-radius:10px; padding:9px 10px; background:white; color:#102a43; }
.voice-controls input { width:100%; accent-color:#0b8f73; }
.voice-controls output { color:#627d98; font-size:12px; font-weight:600; }
.record { width:180px; min-height:58px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; gap:10px; }
.footer-actions { margin-top:10px; }
.footer-actions button { padding:8px 14px; font-size:13px; }
.record span { width:15px; height:15px; border-radius:50%; background:#fff; }
.record.recording { background:#d64545; animation:pulse 1.4s infinite; }
@keyframes pulse { 50% { transform:scale(1.03); box-shadow:0 0 0 12px rgba(214,69,69,.12); } }
@media (max-width:540px) { .shell{padding:18px 12px}.login-card{padding:26px}.coach{min-height:calc(100vh - 36px)} .voice-controls{grid-template-columns:1fr} }