.login-page {min-height:100vh;display:flex;flex-direction:column;}
.login-page .wrap {flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:40px 20px 60px;}
.login-hero {text-align:center;}
.login-hero .eyebrow {margin-bottom:8px;}
.login-hero h1 {margin:0;font-size:28px;color:#f5f7ff;}
.login-hero p {margin:8px 0 0;color:#9bb3d1;}

.login-card {
  width:min(520px,94vw);
  margin:0 auto;
  padding:22px;
  display:grid;
  gap:14px;
}
.login-card .pkg-head {padding:14px;}
.login-card .pkg-body {gap:12px;}

.login-field {display:grid;gap:8px;font-weight:700;}
.login-input {
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.16);
  background:linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color:#e8eef6;
  font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}
.login-input::placeholder {color:#8fa6c7;}
.login-input:focus {outline:none;border-color:rgba(22,197,255,0.6);box-shadow:0 0 0 2px rgba(22,197,255,0.2);}

.login-actions {display:flex;gap:10px;flex-wrap:wrap;}
.login-note {color:#9bb3d1;font-size:13px;}
.login-error {color:#ffd1d1;background:rgba(255,99,99,0.14);border:1px solid rgba(255,99,99,0.35);padding:10px 12px;border-radius:12px;font-weight:700;}

@media (max-width: 640px) {
  .login-card {padding:18px;}
  .login-actions .btn {flex:1 1 100%;}
}