*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#6366f1;--primary-dark:#4f46e5;
  --bg:#0f0f1a;--card:#1a1a2e;--border:#2d2d44;
  --text:#e2e8f0;--muted:#94a3b8;--accent:#a78bfa;
}
body{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--bg);font-family:'Segoe UI',system-ui,sans-serif;color:var(--text);}
.login-wrap{width:100%;max-width:420px;padding:2rem 1.5rem;}
.brand{text-align:center;margin-bottom:2.5rem;}
.brand-logo{width:64px;height:64px;background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;
  margin:0 auto 1rem;}
.brand h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;}
.brand p{color:var(--muted);font-size:.9rem;margin-top:.25rem;}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:2rem;}
.form-group{margin-bottom:1.25rem;}
label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.4rem;font-weight:500;}
input[type=text],input[type=password]{width:100%;background:#12122a;border:1px solid var(--border);
  border-radius:8px;padding:.7rem 1rem;color:var(--text);font-size:.95rem;outline:none;
  transition:border-color .2s;}
input:focus{border-color:var(--primary);}
.btn-login{width:100%;background:var(--primary);color:#fff;border:none;border-radius:8px;
  padding:.8rem;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s;margin-top:.5rem;}
.btn-login:hover{background:var(--primary-dark);}
.btn-login:disabled{opacity:.6;cursor:not-allowed;}
.error-msg{color:#f87171;font-size:.85rem;text-align:center;margin-top:.75rem;min-height:1.2em;}
.spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;}
@keyframes spin{to{transform:rotate(360deg)}}