:root{
  --deep:#020617;
  --navy:#06152b;
  --royal:#1f4ed8;
  --sky:#38bdf8;
  --gold:#f6d365;
  --white:#ffffff;
  --silver:#dbeafe;
}

.login-page{
  min-height:auto;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.14), transparent 35%),
    radial-gradient(circle at bottom right, rgba(246,211,101,.18), transparent 30%),
    linear-gradient(135deg,#020617,#06152b,#0f172a,#1e3a8a);

  padding:65px 20px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.login-card{
  width:100%;
  max-width:520px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  border-radius:32px;
  padding:38px;
  backdrop-filter:blur(14px);
  box-shadow:0 30px 60px rgba(0,0,0,.25);
}

.login-logo{
  text-align:center;
  margin-bottom:28px;
}

.login-logo h1{
  font-size:38px;
  font-weight:900;
  color:#fff;
}

.login-logo span{
  display:block;
  margin-top:8px;
  color:#dbeafe;
  font-size:15px;
}

.field{ margin-bottom:18px; }

label{
  display:block;
  margin-bottom:8px;
  color:#fff;
  font-weight:700;
  font-size:14px;
}

input{
  width:100%;
  padding:15px 16px;
  border:none;
  border-radius:16px;
  outline:none;

  font-size:16px;
  font-weight:700;
  letter-spacing:0.4px;

  background:#fff;
  color:#4b5563;
  caret-color:#1f4ed8;

  -webkit-text-fill-color:#4b5563;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

input:focus{
  box-shadow:0 0 0 4px rgba(56,189,248,.18);
}

.login-btn{
  width:100%;
  border:none;
  cursor:pointer;
  padding:16px;
  border-radius:16px;
  font-size:16px;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,#38bdf8,#1f4ed8);
  box-shadow:0 18px 35px rgba(31,78,216,.25);
}

.error-box{
  background:rgba(239,68,68,.18);
  color:#fff;
  padding:14px 16px;
  border-radius:16px;
  margin-bottom:18px;
  font-weight:700;
}

/* =========================
   LEGAL FOOTER
========================= */
.legal-footer{
  margin-top:22px;
  text-align:center;
  color:#dbeafe;
  font-size:14px;
  line-height:1.5;
}

.legal-footer p{
  margin-bottom:12px;
  opacity:0.9;
}

.legal-links{
  margin-bottom:10px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.legal-links a{
  color:#38bdf8;
  text-decoration:none;
  font-weight:700;
}

.legal-links a:hover{
  text-decoration:underline;
}

.legal-links span{
  opacity:0.6;
}