:root{
  --card:#0b1220cc;
  --border:#ffffff22;
  --text:#e2e8f0;
  --muted:#94a3b8;
  --accent:#4f46e5;
}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:#050814}
.bg{position:fixed;inset:0;overflow:hidden}
.bg video{width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.05)}
.overlay{position:absolute;inset:0;background:radial-gradient(1200px 700px at 20% 10%, #00000066 0%, #000000aa 55%, #000000dd 100%)}
.loginWrap{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.loginCard{
  width:min(420px, 92vw);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  backdrop-filter: blur(10px);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  animation:pop 650ms ease both;
}
@keyframes pop{from{transform:translateY(10px);opacity:.2}to{transform:translateY(0);opacity:1}}
.brandTitle{font-weight:900;font-size:20px}
.brandSub{color:var(--muted);font-size:12px;margin-top:4px}
.field{margin-top:14px;display:flex;flex-direction:column;gap:6px}
label{font-size:12px;color:var(--muted)}
input{
  padding:11px 12px;border-radius:12px;border:1px solid #ffffff1f;
  background:#0b1220; color:var(--text); outline:none;
}
input:focus{border-color:#ffffff40}
.btnPrimary{
  width:100%;margin-top:16px;padding:11px 12px;border-radius:12px;border:0;
  background:linear-gradient(90deg,var(--accent),#7c3aed);
  color:white;font-weight:800;cursor:pointer;
  transition:transform 120ms ease, filter 120ms ease;
}
.btnPrimary:hover{transform:translateY(-1px);filter:brightness(1.06)}
.err{margin-top:10px;color:#fecaca;font-size:12px;min-height:16px}
.footer{margin-top:14px;color:#94a3b8;font-size:11px;opacity:.9;text-align:center}