[data-login-root] [hidden] { display: none !important; }
[data-theme="dark"] .login-brand { background:#fff; border-radius:12px; padding:7px 10px; }
[data-theme="dark"] .auth-text-button { color:#60d4ef; }
[data-theme="dark"] .login-brand { background:#fff; border-radius:12px; padding:7px 10px; }
[data-theme="dark"] .auth-text-button { color:#60d4ef; }
.auth-emblem { display:grid; place-items:center; width:76px; height:76px; margin:0 auto 25px; border-radius:50%; color:#fff; background:linear-gradient(135deg,#00bbd8,#0053bf); box-shadow:0 0 0 11px rgba(16,149,231,.07); font-size:30px; }
[data-auth-content] .form-heading { text-align:center; }
.auth-back { display:inline-flex; gap:10px; align-items:center; margin-bottom:28px; color:var(--login-muted); text-decoration:none; font-size:13px; }
.auth-choices { display:grid; gap:14px; }
.auth-choice { display:flex; align-items:center; justify-content:center; gap:12px; width:100%; min-height:54px; padding:13px 18px; border:1px solid var(--login-border); border-radius:15px; background:var(--login-surface); color:var(--login-text); font-size:15px; font-weight:650; text-decoration:none; cursor:pointer; line-height:1.5; text-align:center; }
.auth-choice i { font-size:20px; }
.auth-choice:hover { border-color:var(--login-secondary); background:var(--login-soft); }
.auth-choice-primary,.auth-choice-primary:hover { background:var(--login-primary); color:white; border-color:var(--login-primary); }
.auth-divider { display:flex; align-items:center; gap:16px; margin:15px 0; font-size:11px; color:var(--login-muted); letter-spacing:1.5px; }
.auth-divider::before,.auth-divider::after { content:''; height:1px; background:var(--login-border); flex:1; }
.auth-text-button { border:0; background:none; color:var(--login-secondary); padding:10px; cursor:pointer; font-size:13px; line-height:1.5; }
.phone-prefix { padding:0 4px 0 16px; color:var(--login-text); font-weight:700; }
.auth-code-form { margin-top:22px; }
.auth-otp { text-align:center; letter-spacing:.55em; font-size:23px !important; font-weight:700; }
.auth-phone-status { font-size:13px; color:var(--login-muted); line-height:1.6; }
.auth-phone-status:empty { display:none; }
.auth-intro { position:relative; text-align:center; }
.intro-skip { display:block; margin-left:auto; margin-bottom:6px; }
.intro-art { position:relative; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:23px; min-height:250px; padding:25px 25px 32px; overflow:hidden; color:#fff; border-radius:25px; background:linear-gradient(145deg,#061c65,#005cf4 65%,#10bcd8); }
.intro-art::before { content:''; width:250px; height:250px; border-radius:50%; border:1px solid #34d4ed; position:absolute; bottom:-100px; right:-30px; background:#ffffff0b; }
.intro-category { font-size:12px; letter-spacing:1px; padding:7px 13px; border:1px solid #61deeb88; border-radius:30px; position:relative; }
.intro-illustration { position:relative; width:190px; height:145px; padding:20px; text-align:left; border-radius:18px; background:#fff; color:#005cf4; transform:rotate(-4deg); box-shadow:9px 10px 0 #05358255; }
.intro-illustration>i { font-size:30px; }
.intro-bars { display:flex; align-items:flex-end; gap:12px; height:55px; margin-top:8px; }
.intro-bars>span { width:20px; height:35%; border-radius:5px 5px 0 0; background:#b5d2ff; }
.intro-bars>span:nth-child(2) { height:55%; }.intro-bars>span:nth-child(3) { height:48%; }.intro-bars>span:nth-child(4) { height:75%; background:#5594fb; }.intro-bars>span:nth-child(5) { height:100%; background:#1764ef; }
.intro-check { position:absolute; right:-22px; bottom:-13px; display:grid; place-items:center; width:50px; height:50px; border-radius:50%; background:#15c5c8; color:#fff; font-size:25px; }
.intro-language>i { font-size:63px; }.intro-language>span { position:relative; font-size:15px; }
.auth-intro h2 { margin:27px 0 12px; font-size:clamp(24px,3vw,30px); letter-spacing:-.7px; line-height:1.25; }
.auth-intro p { color:var(--login-muted); line-height:1.8; font-size:15px; margin:0 auto; max-width:360px; min-height:64px; }
.intro-language-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:17px 0; }
.intro-language-options button { display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid var(--login-border); border-radius:14px; padding:17px; color:var(--login-text); background:var(--login-surface); cursor:pointer; }
.intro-language-options button.selected { border:2px solid var(--login-secondary); background:var(--login-soft); }
.intro-language-options span { font-size:11px; color:var(--login-muted); }
.intro-dots { display:flex; justify-content:center; gap:9px; margin:24px 0; }
.intro-dots span { width:7px; height:7px; border-radius:9px; background:#bdd4f2; }
.intro-dots .active { width:24px; background:var(--login-secondary); }
.intro-controls { display:flex; gap:12px; }.intro-controls>.btn-login { flex:1; }
.intro-back { width:56px; flex-shrink:0; }.intro-signin { margin-top:15px; }
.sr-only { position:absolute !important; width:1px !important; height:1px !important; min-height:0 !important; padding:0 !important; overflow:hidden !important; clip:rect(0,0,0,0); white-space:nowrap; }
@media(max-width:900px) { .login-panel { background:radial-gradient(ellipse at top right,rgba(16,149,231,.12),transparent 65%),var(--login-page); } }
@media(max-width:560px) { .auth-emblem { margin-top:28px; } .intro-art { min-height:245px; } .intro-language-options button { padding:14px; } .auth-intro h2 { font-size:26px; } .intro-signin { margin-top:18px; } .auth-intro { padding-bottom:15px; } }