/* =========  COLOR TOKENS  ========= */
:root{
  --blue1:#4aa8ff;   /* light sky */
  --blue2:#2563eb;   /* vivid royal */
  --blue3:#0f2a3b;   /* deep navy */
  --darkblue:#020b18;/* very dark page background */
}

/* =========  GLOBAL BASICS  ========= */
html{scroll-behavior:smooth;}
body{
  background:var(--darkblue);
  font-family:'Inter',system-ui,sans-serif;
  color:#f2f6fb;
}

/* ---------- Auth background ---------- */
.auth-bg{
  min-height:100vh;
  background:var(--darkblue);
  color:#fff;
}

/* ---------- Auth card ---------- */
.auth-card{
  width:100%;
  max-width:420px;
  border-radius:.85rem;
  overflow:hidden;
  backdrop-filter:saturate(160%) blur(14px);
  background:rgba(20,30,50,.88);
  border:1px solid rgba(74,168,255,.4);
  color:#fff;
}

/* ---------- Toggle buttons ---------- */
.auth-toggle{
  padding:1rem 0;
  background:transparent;
  border:none;
  color:var(--blue1);
  font-weight:600;
  transition:background .25s,color .25s;
}
.auth-toggle.active,
.auth-toggle:hover{
  background:rgba(37,99,235,.25);
  color:#fff;
}

/* ---------- Form inputs ---------- */
.form-control,
.form-control:focus{
  color:#fff;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(74,168,255,.5);
}
.form-control::placeholder{color:#a8c3e0;}
.form-label{color:#c9ddf5;}

/* Override for consistent white text inside the card */
.auth-card .form-label {
  color: #f2f6fb;
}
.auth-card .text-muted {
  color: #f2f6fb !important; /* Override Bootstrap's !important */
}

/* ---------- Password toggle wrapper ----------
   IMPORTANT: The label is OUTSIDE .pw-wrapper,
   so the wrapper's height equals the input's height.
*/
.pw-wrapper{ position:relative; }
.pw-wrapper input.form-control{
  padding-right:2.75rem;   /* space for the eye button */
  line-height:1.5;
}
.pw-wrapper .toggle-pass{
  position:absolute;
  top:50%;
  right:.6rem;
  transform:translateY(-50%);   /* perfect vertical centering */
  z-index:2;

  height:1.75rem;
  width:1.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-width:1px;
}

/* Checkboxes & links */
.form-check-label a{color:var(--blue1);text-decoration:underline;}
.form-check-input:checked{
  background-color:var(--blue2);
  border-color:var(--blue2);
}

/* Buttons */
.btn-primary{
  background-color:var(--blue2);
  border-color:var(--blue2);
}
.btn-primary:hover{
  background-color:var(--blue1);
  border-color:var(--blue1);
  color:#000;
}
.btn-success{
  background-color:var(--blue1);
  border-color:var(--blue1);
  color:#000;
}
.btn-success:hover{
  background-color:#fff;
  border-color:#fff;
  color:var(--blue3);
}
.btn-outline-light{
  border-color:var(--blue1);
  color:var(--blue1);
}
.btn-outline-light:hover{
  background-color:var(--blue1);
  color:#000;
}

/* Validation */
.was-validated .form-control:invalid,
.form-control.is-invalid{
  border-color:#dc3545;
}

/* Glass util (kept for future use) */
.glass{
  backdrop-filter:saturate(180%) blur(14px);
  background:rgba(255,255,255,.06);
}