:root{--p:#6366f1;--pd:#4f46e5;--pl:#818cf8;--bg:#f8fafc;--c:#fff;--t:#1e293b;--ts:#64748b;--b:#e2e8f0;--g:#10b981;--r:#ef4444;--w:#f59e0b;--rad:16px;--sh:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);--sh-lg:0 10px 40px rgba(0,0,0,.12);--e:cubic-bezier(.4,0,.2,1)}
[data-theme="dark"]{--bg:#0f172a;--c:#1e293b;--t:#f1f5f9;--ts:#94a3b8;--b:#334155}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','HarmonyOS Sans',Roboto,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.lc{background:var(--c);border-radius:var(--rad);box-shadow:var(--sh-lg);max-width:420px;width:100%;overflow:hidden;animation:slideUp .6s var(--e)}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
.lh{background:linear-gradient(135deg,var(--pd),#7c3aed);padding:40px 32px;text-align:center;color:#fff;position:relative;overflow:hidden}
.lh::before{content:'';position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 60%);animation:rotate 20s linear infinite}
@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.lh h1{font-size:24px;font-weight:600;margin-bottom:8px;position:relative;z-index:1}
.lh p{font-size:14px;opacity:.85;position:relative;z-index:1}
.lb{padding:32px}
.fg{margin-bottom:20px}
.fg label{display:block;font-size:13px;font-weight:500;color:var(--t);margin-bottom:6px}
.fg input{width:100%;padding:12px 14px;border:1.5px solid var(--b);border-radius:10px;font-size:14px;transition:all .2s var(--e);outline:none;background:var(--c);color:var(--t)}
.fg input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.btn{width:100%;padding:12px;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s var(--e);position:relative;overflow:hidden}
.btn-p{background:linear-gradient(135deg,var(--pd),#7c3aed);color:#fff}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(79,70,229,.4)}
.btn-p:active{transform:translateY(0)}
.btn-p:disabled{opacity:.6;cursor:not-allowed;transform:none}
.err{background:#fef2f2;color:var(--r);padding:10px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;animation:shake .4s var(--e);display:none;border:1px solid #fecaca}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.sec-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.15);font-size:11px;margin-top:12px;position:relative;z-index:1}
.sec-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#4ade80;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}