:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background:#0b1116; color:#f3f5f2; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; min-height:100dvh; background:radial-gradient(circle at 75% 5%,#18372f 0,transparent 35%),#0b1116; }
.shell { width:min(100%,480px); margin:auto; min-height:100dvh; padding:calc(28px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:30px; }
header { display:flex; align-items:center; gap:14px; }
.mark { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:#9bf2c7; color:#092319; font-weight:900; font-size:24px; box-shadow:0 12px 30px #62d7a72b; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:0; font-size:34px; letter-spacing:-1.2px; } h2 { font-size:22px; }
.eyebrow,.label { margin:0 0 3px; color:#9eaaa4; font-size:12px; text-transform:uppercase; letter-spacing:.13em; font-weight:700; }
.card { background:#121c22e8; border:1px solid #27363d; border-radius:26px; padding:24px; box-shadow:0 22px 70px #0006; }
form { display:grid; gap:12px; } label { font-size:13px; color:#b7c2bd; }
input { width:100%; border:1px solid #35464d; background:#0b1318; color:white; padding:15px; border-radius:13px; font-size:17px; outline:none; }
input:focus { border-color:#83ddb6; box-shadow:0 0 0 3px #83ddb620; }
.password-field { position:relative; }
.password-field input { padding-right:58px; }
.password-toggle { position:absolute; top:50%; right:5px; transform:translateY(-50%); width:44px; height:44px; display:grid; place-items:center; padding:0; border:0; border-radius:10px; color:#b7c2bd; background:transparent; touch-action:manipulation; }
.password-toggle:hover { color:#e8f2ed; background:#ffffff0a; }
.password-toggle:focus-visible { outline:2px solid #83ddb6; outline-offset:1px; }
.password-toggle svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.password-icon-hide { display:none; }
.password-toggle.password-visible .password-icon-show { display:none; }
.password-toggle.password-visible .password-icon-hide { display:inline; }
button { font:inherit; cursor:pointer; touch-action:none; }
.primary,.secondary { width:100%; border:0; border-radius:14px; padding:15px 18px; font-weight:800; }
.primary { color:#092319; background:#9bf2c7; } .secondary { color:#dffbef; background:#244338; }
.link { display:block; margin:22px auto 0; padding:8px; border:0; background:transparent; color:#89968f; }
.status-row { display:flex; align-items:center; gap:9px; color:#cbd4d0; margin-bottom:22px; }
.dot { width:10px; height:10px; border-radius:50%; background:#77817d; box-shadow:0 0 0 5px #77817d18; }
.dot.listening { background:#ff776f; box-shadow:0 0 0 7px #ff776f24; animation:pulse 1s infinite; }
.dot.processing { background:#f3c969; box-shadow:0 0 0 6px #f3c96922; }
.dot.speaking { background:#77dcb0; box-shadow:0 0 0 7px #77dcb024; animation:pulse 1.3s infinite; }
.talk-button { width:230px; height:230px; margin:8px auto 18px; border-radius:50%; border:1px solid #8ee8bf; color:#092319; background:linear-gradient(145deg,#b0fbd8,#70d6aa); box-shadow:0 18px 55px #60c99e35,inset 0 -7px 18px #24976c33; display:flex; flex-direction:column; gap:12px; align-items:center; justify-content:center; font-weight:900; font-size:18px; user-select:none; }
.talk-button.recording { transform:scale(.96); background:linear-gradient(145deg,#ff9a92,#f35f58); border-color:#ffaca6; box-shadow:0 12px 45px #ff5e5144; }
.talk-button:disabled { filter:saturate(.2); opacity:.55; }
.mic { font-size:34px; line-height:1; }
#hint { color:#89968f; text-align:center; font-size:13px; line-height:1.45; }
.exchange { margin-top:22px; padding-top:20px; border-top:1px solid #2b393f; }
.exchange p:not(.label) { line-height:1.55; color:#e6ebe8; }
.error { min-height:20px; margin:12px 0 0; color:#ff938d; font-size:13px; }
.hidden { display:none !important; }
@keyframes pulse { 50% { transform:scale(1.25); } }
@media (max-height:680px) { .shell { gap:16px; padding-top:18px; } .talk-button { width:190px; height:190px; } }