/* General Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Page base */
html, body { height: 100%; }
body {
  background-color: #000 !important;
  color: #fff !important;
  text-align: center;
  display: flex;
  flex-direction: column;
}


/* Login card */
.login-card {
  background-color: #e9eef6 !important;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(61,78,111,0.3) !important;
  width: 100% !important;
  max-width: 560px !important;   /* a bit wider by default */
  margin: 0 auto;
  padding: 2rem 1.5rem !important;
  text-align: center !important;
}

.login-card h2 {
  font-size: 2rem;
  color: #3d4e6f;
  margin-bottom: 1rem;
}

/* Inputs */
.form-control {
  color: #000;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 16px;
  margin-bottom: 1rem;
  width: 100% !important;
  min-height: 52px; /* comfy tap size */
}
.form-control::placeholder { color: #999; }
.form-control:focus {
  outline: none;
  box-shadow: 0 0 10px #3d4e6f;
  border-color: #3d4e6f;
}

/* Button */
form .login-button {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background-color: #3d4e6f;
  border: none;
  border-radius: 8px;
  transition: background-color .3s, color .3s, box-shadow .3s, border-color .3s;
}
.login-button:hover {
  background-color: #fff;
  color: #3d4e6f;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff;
  border: 1px solid #3d4e6f;
}

/* Footer text */
.footer-text {
  margin-top: 1.5rem;
  font-size: .95rem;
  color: #666;
}
.footer-text a { color: #000; text-decoration: none; }
.footer-text a:hover { color: #fff; }

/* Fallback so layout is decent before JS sets --header-h */
:root { --header-h: 64px; }

/* Wrapper: base styles common to all */
.auth-wrap {
  display: flex;
  width: 100%;
  padding: 16px;
}

/* Desktop / tablets: truly center the card */
@media (min-width: 601px) {
  .auth-wrap {
    align-items: center;
    justify-content: center;
    /* fill the viewport minus header; use dvh for reliable mobile/desktop */
    min-height: calc(100dvh - var(--header-h, 0px));
  }
}

/* Mobile: start BELOW the header, not centered */
@media (max-width: 600px) {
  .auth-wrap {
    align-items: flex-start;         /* top-align the card */
    justify-content: center;         /* keep it horizontally centered */
    min-height: auto;                /* don’t force full-height */
    padding-top: calc(var(--header-h, 0px) + 24px); /* drop it down */
    padding-bottom: 24px;            /* breathing room at bottom */
  }
}