*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:'DM Sans',system-ui,sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}
.auth-bg{
  min-height:100vh;
  background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 50%,#0f172a 100%);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.auth-card{
  background:#fff;border-radius:20px;padding:40px;width:100%;max-width:420px;
  box-shadow:0 25px 60px rgba(0,0,0,.4);
}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:28px;justify-content:center}
.auth-brand-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px}
.auth-brand-name{font-size:20px;font-weight:800;letter-spacing:-.5px;color:#1e293b}
.auth-title{font-size:22px;font-weight:800;text-align:center;margin:0 0 6px;color:#1e293b;letter-spacing:-.5px}
.auth-subtitle{font-size:13px;color:#64748b;text-align:center;margin:0 0 24px}
.auth-alert{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;font-size:13px;padding:10px 14px;border-radius:8px;margin-bottom:16px;font-weight:500}
.auth-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#94a3b8;margin:0 0 10px}
.auth-field{margin-bottom:14px}
.auth-label{display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:5px}
.auth-input{width:100%;border:1.5px solid #e2e8f0;border-radius:9px;padding:10px 13px;font-size:14px;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s;background:#fff}
.auth-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.auth-input-wrap{position:relative}
.auth-input-wrap .auth-input{padding-right:40px}
.pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;font-size:16px;padding:4px}
.auth-btn{width:100%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:9px;padding:12px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:6px;transition:opacity .2s,transform .15s}
.auth-btn:hover{opacity:.92;transform:translateY(-1px)}
.auth-btn:active{transform:translateY(0)}
.auth-divider{text-align:center;font-size:11px;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.8px;margin:20px 0 12px;position:relative}
.auth-divider::before,.auth-divider::after{content:'';position:absolute;top:50%;width:30%;height:1px;background:#e2e8f0}
.auth-divider::before{left:0}.auth-divider::after{right:0}
.demo-creds{background:#f8f9fc;border-radius:10px;padding:12px;margin-bottom:16px}
.demo-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#475569;padding:4px 0}
.demo-row+.demo-row{border-top:1px solid #e2e8f0;margin-top:4px}
.demo-pw{font-family:monospace;background:#e0e7ff;color:#4f46e5;padding:1px 7px;border-radius:4px;font-size:11px;margin-left:auto}
.demo-fill-btn{background:none;border:1px solid #c7d2fe;border-radius:6px;color:#6366f1;font-size:11px;font-weight:600;padding:2px 10px;cursor:pointer;font-family:inherit;margin-left:6px;transition:background .15s}
.demo-fill-btn:hover{background:#e0e7ff}
.auth-footer{text-align:center;font-size:13px;color:#64748b;margin:16px 0 0}
.auth-footer a{color:#6366f1;font-weight:600;text-decoration:none}
.auth-footer a:hover{text-decoration:underline}
.auth-features{margin-top:20px;padding:14px;background:linear-gradient(135deg,#f0f0ff,#f5f3ff);border-radius:10px}
.feature-item{font-size:12px;color:#4f46e5;padding:3px 0;font-weight:500}
@media(max-width:480px){.auth-card{padding:28px 20px}}