:root{
  --bg1: #0f172a;
  --bg2: #071233;
  --accent: #7c3aed;
  --muted: #94a3b8;
}
html,body{height:100%;}
body{margin:0;font-family:Inter,Segoe UI,Arial;background:linear-gradient(135deg,var(--bg1),var(--bg2));color:#e6eef8}

.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:3rem;position:relative;overflow:hidden}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45}
.orb-1{width:420px;height:420px;left:-80px;top:-60px;background:radial-gradient(circle at 30% 30%, #2dd4bf, transparent 30%),linear-gradient(45deg,#06b6d4,#7c3aed)}
.orb-2{width:360px;height:360px;right:-100px;bottom:-80px;background:linear-gradient(45deg,#c084fc,#06b6d4)}

.login-card{position:relative;z-index:2;width:420px;max-width:92%;padding:2.2rem;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));backdrop-filter: blur(8px);box-shadow:0 10px 30px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.04)}
.brand{font-weight:700;font-size:1.5rem;margin-bottom:1rem}
.field{margin-bottom:.9rem}
.input{width:100%;padding:.85rem 1rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(10,12,20,0.4);color:inherit}
.field-row{display:flex;justify-content:space-between;align-items:center;margin:.4rem 0 .9rem}
.remember{color:var(--muted);font-size:.85rem}
.forgot{color:var(--muted);font-size:.85rem;text-decoration:none}
.actions{display:flex;gap:.6rem;margin-top:.6rem}
.btn{padding:.6rem 1rem;border-radius:10px;border:0;cursor:pointer}
.btn.primary{background:var(--accent);color:white;box-shadow:0 6px 18px rgba(124,58,237,0.18)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.hint{margin-top:1rem;font-size:.85rem;color:var(--muted)}

.success{display:flex;align-items:center;gap:.6rem;padding:.8rem;border-radius:8px;background:linear-gradient(90deg,rgba(34,197,94,0.12),rgba(16,185,129,0.08));color:#d1fae5}
.check{width:36px;height:36px;border-radius:50%;background:linear-gradient(45deg,#10b981,#34d399);display:flex;align-items:center;justify-content:center;font-weight:700}

@media (max-width:420px){.login-card{padding:1rem}}