:root{
  --bg:#052a56; /* deep blue */
  --card-bg: rgba(255,255,255,0.06);
  --card-border: rgba(255,255,255,0.08);
  --accent: #ffffff;
  --muted: rgba(255,255,255,0.8);
}
body.login-body{height:100vh;margin:0;font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;background:var(--bg);color:var(--accent);display:flex;align-items:stretch;justify-content:center}
.page-header{position:fixed;left:28px;top:18px;color:var(--accent)}
.page-header small{display:block;color:rgba(255,255,255,0.75);font-weight:600}
.page-header h1{margin:6px 0 0 0;font-size:28px}

.login-wrap{width:100%;max-width:1400px;padding:48px 80px;box-sizing:border-box;display:flex;gap:40px;align-items:center;justify-content:center}

/* Left branding */
.brand{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.brand p{margin:0;color:rgba(255,255,255,0.85);max-width:520px;text-align:center}
.brand .logo{max-width:420px;width:420px;height:auto;filter:brightness(1) ;}

/* Right card */
.card-wrap{width:420px;flex:0 0 420px;display:flex;align-items:center;justify-content:center}
.glass-card{
  width:100%;background: rgba(109, 119, 126, 0.296);border:1px solid rgba(255,255,255,0.06);border-radius:18px;padding:30px;box-shadow:0 28px 40px rgba(2,12,36,0.6);backdrop-filter: blur(8px) saturate(120%);-webkit-backdrop-filter: blur(8px) saturate(120%);
}
.glass-card h3{margin:0 0 8px 0;font-size:20px;text-align:center;font-weight:700}
.glass-card p.subtitle{margin:0 0 16px 0;color:var(--muted);font-size:0.95rem;text-align:center}

.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:0.86rem;color:rgba(255,255,255,0.8);margin-bottom:8px}
.form-control{width:100%;padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.04);color:var(--accent);outline:none;font-size:0.95rem;box-sizing:border-box;}
.form-control::placeholder{color:rgba(255,255,255,0.45)}

.btn-primary{display:block;width:100%;padding:12px;border-radius:10px;border:none;background:#ffffff;color:#052a56;font-size:1rem;font-weight:800;cursor:pointer;margin-top:12px;box-shadow:0 6px 18px rgba(3,22,42,0.4)}

/* small subtle footer shadow to match print */
.glass-card{position:relative}
.glass-card:after{content:'';position:absolute;left:16px;right:16px;bottom:-22px;height:28px;border-radius:14px;background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.35));filter:blur(12px);opacity:0.7}

/* Responsive */
@media (max-width:900px){
  .page-header{position:static;text-align:center;padding:18px 24px}
  .login-wrap{flex-direction:column;align-items:center;padding:24px}
  .brand{order:2;align-items:center;text-align:center;padding-left:0}
  .card-wrap{order:1;width:100%;max-width:480px}
  .brand .logo{width:60%}
}

/* small helper for accessibility focus */
.form-control:focus{box-shadow:0 0 0 3px rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.12)}

/* Flash Alerts Overrides */
.alert {
  padding: 8px 10px;
  margin-bottom: 15px;
  border-radius: 8px;
  font-size: 0.9rem;
  text-align: center;
}
.alert-danger {
  color: #ffd2d2;
  background: rgba(255,0,0,0.04);
  /* border: 1px solid rgba(255,0,0,0.1); remove border since background is quite subtle and red text already shows */
}