:root{--brand:#1a7ff0;--brand2:#0ea5e9;--ink:#0f172a;--muted:#64748b;--accent:#f97316}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink)}
body.auth-page{
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 10% -10%,rgba(26,127,240,.25),transparent 50%),
    radial-gradient(900px 500px at 100% 0%,rgba(14,165,233,.2),transparent 45%),
    linear-gradient(180deg,#f0f7ff 0%,#eef2ff 40%,#f8fafc 100%);
  display:flex;flex-direction:column;
}
.auth-top{padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
.auth-top a{color:var(--brand);font-weight:600;text-decoration:none;font-size:14px}
.auth-top .logo{font-weight:800;font-size:1.25rem;background:linear-gradient(135deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent;text-decoration:none}
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:12px 16px 40px}
.auth-panel{
  width:100%;max-width:420px;
  background:#fff;border-radius:20px;padding:28px 24px;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 20px 50px rgba(15,23,42,.08);
  animation:authRise .5s ease both;
}
.auth-panel h1{margin:0;font-size:1.5rem;letter-spacing:-.02em}
.auth-lead{color:var(--muted);font-size:14px;margin:8px 0 18px;line-height:1.45}
.auth-panel label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-top:14px}
.auth-panel input{
  width:100%;padding:12px 14px;border:1.5px solid #e2e8f0;border-radius:12px;
  margin-top:6px;font-size:15px;background:#fff;
  transition:border-color .2s,box-shadow .2s,transform .15s;
}
.auth-panel input:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 4px rgba(26,127,240,.14);
}
.pw-row{display:flex;gap:8px;align-items:stretch}
.pw-row input{flex:1}
.pw-btn{
  border:1.5px solid #e2e8f0;background:#f8fafc;border-radius:12px;
  padding:0 12px;cursor:pointer;font-size:12px;font-weight:700;color:#475569;
  transition:background .15s,border-color .15s;
}
.pw-btn:hover{background:#eff6ff;border-color:#bfdbfe}
.auth-submit{
  width:100%;margin-top:20px;padding:13px;border:0;border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
  font-size:15px;font-weight:700;cursor:pointer;
  box-shadow:0 10px 24px rgba(26,127,240,.3);
  transition:transform .15s,filter .15s,box-shadow .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.auth-submit:hover{filter:brightness(1.05);transform:translateY(-1px)}
.auth-submit:active{transform:translateY(1px)}
.auth-submit:disabled{opacity:.75;cursor:wait;transform:none}
.auth-submit .spin{
  width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;display:none;
}
.auth-submit.loading .spin{display:inline-block}
.auth-foot{margin-top:18px;text-align:center;font-size:14px;color:var(--muted)}
.auth-foot a{color:var(--brand);font-weight:600;text-decoration:none}
.auth-foot a:hover{text-decoration:underline}
.auth-alert{
  padding:12px 14px;border-radius:12px;font-size:14px;margin-bottom:14px;
  animation:authPop .35s ease;
}
.auth-alert.err{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.auth-alert.ok{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
@keyframes authRise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes authPop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .auth-panel,.auth-alert{animation:none}
  .auth-submit{transition:none}
}