:root { color-scheme:dark; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:#071426; color:#f8fbff; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; min-height:100%; }
body { background:radial-gradient(circle at 50% 33%,#142840 0,#09192d 51%,#061321 100%); }
button,textarea { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.5; cursor:wait; }
button:focus-visible,summary:focus-visible,label:focus-within { outline:3px solid #fff; outline-offset:4px; }
.app-shell { width:min(100%,440px); min-height:100dvh; margin:auto; display:flex; flex-direction:column; border-left:1px solid #253c58; border-right:1px solid #253c58; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:calc(25px + env(safe-area-inset-top)) 24px 0; }
.brand { font-size:32px; font-weight:800; letter-spacing:-1.2px; white-space:nowrap; }
.brand span { color:#ff7826; }
.connection { max-width:160px; color:#a9bad2; font-size:12px; line-height:1.3; text-align:right; }
.connection::before { content:""; display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#eda050; }
.connection.ready::before { background:#35d493; }
.connection.error::before { background:#f07575; }
main { flex:1; padding:0 24px 28px; }
.intro { margin-top:45px; text-align:center; }
.eyebrow { color:#ff9958; font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; margin:0 0 10px; }
.intro h1 { font-size:38px; letter-spacing:-1px; line-height:1.1; margin:0; }
.intro p:last-child { color:#afc0d8; font-size:16px; line-height:1.45; max-width:310px; margin:13px auto 0; min-height:46px; }
.primary-action { display:flex; flex-direction:column; align-items:center; text-align:center; margin:38px auto 0; }
.record-button { touch-action:none; display:grid; place-items:center; width:200px; height:200px; border:7px solid #ff7826; border-radius:50%; background:radial-gradient(circle at 40% 29%,#233a51,#102238 72%); box-shadow:0 0 0 15px #ff751009,0 0 48px #ff751028,inset 0 0 32px #0004; color:#ff7826; transition:transform .15s ease,box-shadow .15s ease; user-select:none; -webkit-user-select:none; }
.record-button:active { transform:scale(.97); }
.record-button.recording { animation:pulse 1.2s infinite; background:#47251f; }
.record-button svg { width:64px; height:64px; fill:#ff7826; stroke:#ff7826; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.record-button svg path { fill:none; }
.primary-action strong { font-size:19px; margin-top:28px; }
.primary-action small { font-size:14px; color:#a9bad2; margin-top:8px; }
@keyframes pulse { 50% { box-shadow:0 0 0 27px #ff751000,0 0 64px #ff751077; } }
.glasses-panel { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:42px; padding:18px; border:2px solid #45617d; border-radius:16px; background:#14283e; }
.glasses-panel > svg { width:34px; height:34px; flex:none; fill:none; stroke:#ff9958; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.glasses-panel strong { font-size:17px; }
.glasses-panel p { margin:6px 0 0; color:#a9bad2; font-size:13px; }
.photo-preview { display:flex; align-items:center; gap:15px; margin-top:10px; padding:10px; border:1px solid #34506d; border-radius:12px; }
.photo-preview { width:100%; }
.photo-preview img { width:58px; height:58px; object-fit:cover; border-radius:8px; }
.photo-preview button { padding:12px; border:0; background:none; color:#ffad7a; font-weight:700; }
.answer-card { border:1px solid #42617e; border-radius:16px; background:#11283e; margin-top:28px; padding:18px 20px; }
.answer-heading { color:#ff9958; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.answer-card p { font-size:22px; line-height:1.38; margin:10px 0 0; white-space:pre-wrap; }
.replay-button { display:flex; align-items:center; gap:10px; min-height:50px; margin-top:14px; padding:0; border:0; background:none; color:#ffad7a; font-size:15px; font-weight:700; }
.replay-button svg { width:24px; height:24px; fill:currentColor; }
.backup { margin-top:25px; color:#a9bad2; font-size:14px; }
.backup summary { width:max-content; padding:12px 0; cursor:pointer; }
.backup form { margin-top:8px; }
.backup label { display:block; margin-bottom:8px; color:#fff; }
.backup textarea { width:100%; min-height:90px; resize:vertical; border:1px solid #45617d; border-radius:12px; padding:13px; outline:none; background:#09192d; color:#fff; font-size:17px; line-height:1.4; }
.backup textarea:focus { border-color:#ff9958; }
.send-button { width:100%; min-height:52px; margin-top:10px; border:0; border-radius:12px; background:#ff7826; color:#101722; font-weight:800; }
footer { padding:16px 24px calc(20px + env(safe-area-inset-bottom)); color:#8ea5bf; font-size:12px; line-height:1.5; text-align:center; }
#toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(14px); width:max-content; max-width:min(90vw,400px); padding:12px 16px; border-radius:10px; background:#eef4fb; color:#142338; font-size:14px; line-height:1.4; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; z-index:10; }
#toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }
@media (max-height:740px) { .topbar { padding-top:calc(16px + env(safe-area-inset-top)); } .intro { margin-top:26px; } .primary-action { margin-top:22px; } .record-button { width:155px; height:155px; } .glasses-panel { margin-top:25px; } }
@media (min-width:700px) { body { padding:24px; } .app-shell { min-height:calc(100dvh - 48px); border:1px solid #29435f; border-radius:28px; overflow:hidden; box-shadow:0 20px 80px #0006; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }