* { box-sizing: border-box; }
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; font-family:Inter,Arial,sans-serif; background:radial-gradient(circle at top,#263b68,#0b1020 55%,#05070d); color:white; }
.login-card { width:min(460px,92vw); padding:42px 35px; border-radius:28px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(20px); box-shadow:0 25px 80px rgba(0,0,0,.45); text-align:center; }
.logo { width:76px; height:76px; margin:auto auto 20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:34px; background:rgba(255,255,255,.12); }
h1 { margin:0 0 8px; font-size:23px; }
.subtitle { color:#aeb8cc; line-height:1.6; margin-bottom:28px; }
.phrase-box { margin:25px 0; padding:22px; border-radius:18px; background:rgba(0,0,0,.25); }
.phrase-label { font-size:12px; text-transform:uppercase; letter-spacing:2px; color:#8f9bb3; margin-bottom:10px; }
.phrase { font-size:27px; font-weight:700; letter-spacing:1px; }
.mic { width:90px; height:90px; margin:20px auto; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:38px; background:rgba(91,124,255,.15); border:2px solid rgba(91,124,255,.35); transition:.2s; }
.mic.listening { animation:pulse 1.2s infinite; background:rgba(85,220,150,.18); border-color:rgba(85,220,150,.7); }
@keyframes pulse { 0%{transform:scale(1);box-shadow:0 0 0 0 rgba(85,220,150,.45)} 70%{transform:scale(1.06);box-shadow:0 0 0 22px rgba(85,220,150,0)} 100%{transform:scale(1)} }
.status { min-height:28px; margin:20px 0; color:#b9c3d8; font-size:14px; line-height:1.5; }
button { width:100%; border:0; border-radius:16px; padding:17px; font-size:16px; font-weight:700; cursor:pointer; color:white; background:linear-gradient(135deg,#5b7cff,#7d4cff); transition:transform .15s,opacity .15s; }
button:hover { transform:translateY(-2px); }
button:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.small { margin-top:22px; color:#7f8ba3; font-size:12px; line-height:1.5; }
.profile-link {
    display: block;
    width: fit-content;
    margin: 12px auto 0;
    padding: 8px 20px;
    color: #8b7cff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    transition: 0.2s ease;
}

.profile-link:hover {
    color: #ffffff;
    background: rgba(139, 124, 255, 0.12);
}