:root{ --bg:#0b0f17; --card:#131a26; --line:#1f2a3a; --fg:#e7edf5; --muted:#8b99ac; --accent:#4f8cff; --accent2:#7c5cff; --danger:#ff5c72; }
*{ box-sizing:border-box; } html,body{ height:100%; }
body{ margin:0; background:radial-gradient(1200px 600px at 50% -10%, #16233a 0%, var(--bg) 60%); color:var(--fg);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; display:flex; min-height:100%; align-items:center; justify-content:center; padding:24px; }
.card{ width:100%; max-width:560px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:28px; box-shadow:0 20px 60px rgba(0,0,0,.4); }
.brand{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
h1{ margin:0 0 4px; font-size:26px; }
.sub{ color:var(--muted); margin:0 0 22px; font-size:14px; }
.talk{ width:150px; height:150px; border-radius:50%; border:none; cursor:pointer; display:block; margin:8px auto 18px;
  font-size:17px; font-weight:600; color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent2)); transition:transform .1s, box-shadow .2s; box-shadow:0 0 0 0 rgba(79,140,255,.5); }
.talk:hover{ transform:translateY(-2px); }
.talk.on{ background:linear-gradient(135deg,#ff5c72,#ff8f5c); animation:pulse 1.6s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,92,114,.5);} 70%{box-shadow:0 0 0 22px rgba(255,92,114,0);} 100%{box-shadow:0 0 0 0 rgba(255,92,114,0);} }
.status{ text-align:center; color:var(--muted); min-height:22px; margin-bottom:16px; font-size:14px; }
.log{ background:#0d1420; border:1px solid var(--line); border-radius:12px; padding:12px; height:230px; overflow-y:auto; font-size:14px; }
.log:empty::before{ content:"Диалог появится здесь…"; color:var(--muted); }
.line{ margin:6px 0; } .line .r{ display:inline-block; min-width:44px; font-weight:600; margin-right:8px; color:var(--accent); }
.line.user .r{ color:#5fd39a; } .line.bot .r{ color:var(--accent); }
.foot{ margin-top:16px; text-align:center; font-size:12px; color:var(--muted); }
.foot a{ color:var(--muted); }
form.login{ display:flex; gap:10px; margin-top:8px; }
input[type=password]{ flex:1; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:#0d1420; color:var(--fg); font-size:15px; }
button.go{ padding:12px 18px; border:none; border-radius:10px; background:var(--accent); color:#fff; font-weight:600; cursor:pointer; }
.err{ color:var(--danger); font-size:13px; min-height:18px; margin-top:8px; }