:root{
  --auth-bg:#f6f7fb;
  --auth-card:rgba(255,255,255,.88);
  --auth-text:#171522;
  --auth-muted:#777487;
  --auth-border:#e8e6ef;
  --auth-primary:#7c3aed;
  --auth-cyan:#0891b2;
  --auth-danger:#dc2626;
  --auth-success:#059669;
}
*{box-sizing:border-box}
.auth-page{
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
  color:var(--auth-text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 10% 10%,rgba(124,58,237,.12),transparent 32%),
    radial-gradient(circle at 90% 90%,rgba(8,145,178,.12),transparent 30%),
    linear-gradient(145deg,#fafaff 0%,#f4f5fa 100%);
  overflow-x:hidden;
}
.auth-page:before{
  content:"";
  position:fixed;
  width:420px;height:420px;
  border-radius:50%;
  border:1px solid rgba(124,58,237,.08);
  top:-220px;right:-180px;
  pointer-events:none;
}
.auth-shell{width:100%;max-width:430px;animation:authIn .55s ease both}
@keyframes authIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.auth-brand{
  display:flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;color:var(--auth-text)!important;
  font-size:21px;font-weight:800;letter-spacing:-.02em;
  margin-bottom:20px;
}
.auth-brand .brand-mark{
  width:40px;height:40px;border-radius:13px;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--auth-primary),var(--auth-cyan));
  box-shadow:0 10px 25px rgba(124,58,237,.25);
}
.auth-card{
  background:var(--auth-card);
  border:1px solid rgba(255,255,255,.85);
  border-radius:25px;
  padding:28px;
  box-shadow:0 24px 70px rgba(25,18,50,.12),0 2px 8px rgba(25,18,50,.04);
  backdrop-filter:blur(18px);
}
.auth-head{text-align:center;margin-bottom:24px}
.auth-head h1{font-size:25px;font-weight:800;letter-spacing:-.035em;margin:0 0 7px}
.auth-head p{margin:0;color:var(--auth-muted);font-size:14px}
.auth-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border-radius:999px;
  background:#f3efff;color:#6941c6;
  font-size:11px;font-weight:700;margin-bottom:13px;
}
.auth-badge i{width:6px;height:6px;border-radius:50%;background:#7c3aed;display:block}
.auth-field{margin-bottom:16px}
.auth-label{
  display:flex;justify-content:space-between;align-items:center;
  font-size:13px;font-weight:700;margin-bottom:7px;
}
.auth-input-wrap{position:relative}
.auth-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:#9a96a8;pointer-events:none;
}
.auth-input{
  width:100%;height:50px;border:1px solid var(--auth-border);
  border-radius:14px;background:#fff;padding:0 45px;
  color:var(--auth-text);font-size:14px;outline:none;
  transition:.2s ease;
}
.auth-input::placeholder{color:#aaa7b5}
.auth-input:focus{
  border-color:#a78bfa;
  box-shadow:0 0 0 4px rgba(124,58,237,.10);
}
.auth-toggle{
  position:absolute;right:7px;top:7px;width:36px;height:36px;
  border:0;border-radius:10px;background:transparent;color:#918d9e;
  cursor:pointer;display:grid;place-items:center;
}
.auth-toggle:hover{background:#f5f3fa;color:#5b5668}
.auth-submit{
  width:100%;height:50px;border:0;border-radius:14px;
  color:#fff;font-weight:800;font-size:14px;cursor:pointer;
  background:linear-gradient(135deg,var(--auth-primary),var(--auth-cyan));
  box-shadow:0 12px 24px rgba(124,58,237,.20);
  transition:.2s ease;margin-top:3px;
}
.auth-submit:hover{transform:translateY(-1px);box-shadow:0 15px 30px rgba(124,58,237,.27)}
.auth-submit:active{transform:translateY(0)}
.auth-bottom{text-align:center;color:var(--auth-muted);font-size:13px;margin:20px 0 0}
.auth-bottom a{color:var(--auth-primary);font-weight:800;text-decoration:none}
.auth-bottom a:hover{text-decoration:underline}
.auth-divider{display:flex;align-items:center;gap:10px;margin:20px 0 0;color:#aaa6b5;font-size:11px}
.auth-divider:before,.auth-divider:after{content:"";height:1px;background:var(--auth-border);flex:1}
.auth-alert{
  border-radius:13px!important;border:1px solid!important;
  font-size:13px!important;padding:11px 13px!important;margin-bottom:16px!important;
}
.auth-alert.alert-danger{background:#fff5f5;border-color:#fecaca!important;color:#b91c1c}
.auth-alert.alert-success{background:#f0fdf8;border-color:#a7f3d0!important;color:#047857}
.password-meter{display:flex;gap:4px;margin-top:8px}
.password-meter span{height:4px;flex:1;border-radius:99px;background:#e9e7ef;transition:.2s}
.password-hint{font-size:11px;color:#9a96a8;margin-top:6px}
@media(max-width:480px){
 .auth-page{padding:18px 12px}
 .auth-card{padding:23px 18px;border-radius:21px}
 .auth-head h1{font-size:23px}
}