:root{
  --navy:#122036; --navy-2:#1c3355; --amber:#e5a13a; --amber-dim:#f3c983;
  --bg:#eef1f4; --line:#dde2e8; --text:#1c2530; --text-dim:#5b6672; --red:#b3462c;
}
*{box-sizing:border-box;}
body{
  margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, #274469 100%);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:20px;
}
.login-wrap{width:100%; max-width:380px;}
.login-card{
  background:#fff; border-radius:14px; padding:32px 28px; box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.login-logo{font-size:19px; font-weight:800; color:var(--navy); text-align:center;}
.login-sub{text-align:center; color:var(--text-dim); font-size:13px; margin:4px 0 24px;}
.login-alert{
  background:#fbf5e8; border:1px solid #f0dca6; color:#8a6d10; font-size:12.5px;
  padding:10px 12px; border-radius:8px; margin-bottom:16px;
}
.login-alert-error{background:#fbe1dc; border-color:#f0b8a8; color:var(--red);}
#loginForm label{display:block; font-size:12.5px; color:var(--text-dim); margin:14px 0 5px; font-weight:600;}
#loginForm input{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:8px;
  font-size:15px; background:#fbfbfc;
}
#loginForm input:focus{outline:2px solid var(--amber-dim); border-color:var(--amber);}
#loginBtn{
  width:100%; margin-top:22px; padding:12px; border:none; border-radius:8px;
  background:var(--amber); color:var(--navy); font-weight:700; font-size:15px; cursor:pointer;
}
#loginBtn:hover{background:var(--amber-dim);}
#loginBtn:disabled{opacity:.6; cursor:default;}
.login-footer{text-align:center; font-size:11px; color:var(--text-dim); margin:22px 0 0;}

@media (max-width:420px){
  .login-card{padding:26px 20px; border-radius:12px;}
}