*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0a0a0f;
  --bg-elev:#131318;
  --bg-hover:#1a1a22;
  --border:#23232e;
  --border-hover:#32323e;
  --text:#e8e8ec;
  --text-dim:#a1a1ad;
  --text-mute:#6b6b78;
  --brand:#6366f1;
  --brand-hover:#4f46e5;
  --ok:#22c55e;
  --err:#ef4444;
  --radius:12px;
  --radius-sm:8px;
  --shadow-lg:0 10px 30px rgba(0,0,0,.5);
}

html{color-scheme:dark}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;min-height:100vh;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}
::selection{background:var(--brand);color:white}

@keyframes spin{to{transform:rotate(360deg)}}

.login-shell{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:radial-gradient(circle at 50% 0%,rgba(99,102,241,.08) 0%,transparent 50%);
}
.login-card{
  width:100%;max-width:420px;
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:36px 32px 28px;
  box-shadow:var(--shadow-lg);
}
.login-brand{display:flex;gap:14px;align-items:center;margin-bottom:32px}
.login-brand .brand-dot{
  width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,var(--brand),#8b5cf6);
  box-shadow:0 6px 20px rgba(99,102,241,.35);
  flex-shrink:0;
}
.login-brand h1{font-size:1.15rem;font-weight:700;margin-bottom:2px}
.login-brand p{font-size:.82rem;color:var(--text-mute)}

.field{margin-bottom:16px}
.field label{
  display:block;font-size:.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-dim);margin-bottom:7px;
}
.field input{
  width:100%;padding:11px 14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);font-size:.9rem;
  outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.field input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(99,102,241,.15);
}

.btn-primary{
  width:100%;padding:12px 16px;
  background:var(--brand);color:white;
  border:none;border-radius:var(--radius-sm);
  font-size:.9rem;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .15s,transform .1s;
  margin-top:8px;
}
.btn-primary:hover:not(:disabled){background:var(--brand-hover)}
.btn-primary:active:not(:disabled){transform:scale(.99)}
.btn-primary:disabled{opacity:.7;cursor:wait}

.spinner{
  width:16px;height:16px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:white;
  border-radius:50%;
  animation:spin .7s linear infinite;
}

.error{
  margin-top:16px;padding:10px 12px;
  background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.25);
  border-radius:var(--radius-sm);
  color:#fca5a5;
  font-size:.82rem;
  text-align:center;
}

.login-footer{
  margin-top:24px;text-align:center;
  font-size:.78rem;color:var(--text-mute);
}
.login-footer a{color:var(--text-dim);transition:color .15s}
.login-footer a:hover{color:var(--text)}