/* ====== AUTH PAGE (DARK DEFAULT) ======================================= */
body {
  /* Dark gradient background */
  background: linear-gradient(135deg, #4a90e2 10%, #000 90%);
  font-family: Arial, sans-serif;
  color: #fff;
  min-height: 100vh;

  /* Important: don't fight the fixed header */
  display: block;
  /* give space below your 75px fixed header so the card never sits under it */
  padding-top: 100px;
}

/* Auth card */
.container {
  margin: 0 auto 48px;
  width: 30%;
  background-color: rgba(0, 0, 0, 0.9);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  text-align: center;
}

.container h1 {
  margin-bottom: 25px;
  font-size: 32px;
  font-weight: bold;
  color: #ffffff;
}

.container .form-group {
  margin-bottom: 20px;
  text-align: left;
  width: 100%;
}

.container label {
  display: block;
  margin-bottom: 8px;
  color: #aaaaaa;
  font-weight: bold;
}

.container input,
.container button {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 15px;
}

.container input {
  border: 1px solid rgba(255,255,255,0.3);
  background-color: rgba(255,255,255,0.1);
  color: #ffffff;
  transition: background-color .3s ease, border-color .3s ease;
}

.container input::placeholder {
  color: #bbbbbb;
}

.container input:focus {
  border-color: #4a90e2;
  outline: none;
  background-color: rgba(255,255,255,0.2);
}

.container button {
  background-color: #4a90e2;
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, transform .1s ease;
}
.container button:active { transform: scale(.98); }

.container button:hover {
  background-color: #357acb;
}

.container #register {
  background-color: #333333;
  color: #ffffff;
  opacity: 0.95;
}
.container #register:hover {
  background-color: #222222;
  color: #4a90e2;
}

.container #password_reset {
  background-color: transparent;
  color: #4a90e2;
  display: inline-block;
  text-decoration: none;
  font-weight: bold;
}
.container #password_reset:hover {
  color: #ffffff;
  text-decoration: underline;
}

.container #email_error,
.container #password_error {
  color: red;
  font-size: 14px;
  margin-top: -10px;
}

/* ====== LIGHT THEME (follows body.light) ================================ */
body.light {
  background: linear-gradient(135deg, #ffffff 10%, #e6ecf8 90%);
  color: #000;
}

body.light .container {
  background-color: rgba(255,255,255,0.95);
  box-shadow: 0 8px 24px rgba(16,24,40,0.12);
  border: 1px solid rgba(16,24,40,0.04);
}

body.light .container h1 { color: #111827; }

body.light .container label { color: #374151; }

body.light .container input {
  border: 1px solid rgba(0,0,0,0.18);
  background-color: #f7f9fc;
  color: #111827;
}
body.light .container input::placeholder { color: #8a95a6; }
body.light .container input:focus {
  border-color: #2563eb;
  background-color: #ffffff;
}

body.light .container button {
  background-color: #2563eb;
  color: #ffffff;
}
body.light .container button:hover {
  background-color: #1d4ed8;
}

body.light .container #register {
  background-color: #eef2f7;
  color: #111827;
}
body.light .container #register:hover {
  background-color: #e3e9f3;
  color: #2563eb;
}

body.light .container #password_reset {
  color: #2563eb;
}
body.light .container #password_reset:hover {
  color: #0f172a;
  text-decoration: underline;
}

/* ====== RESPONSIVE ======================================================= */
@media (max-width: 1024px) {
  .container { width: 50%; }
}
@media (max-width: 768px) {
  body { padding-top: 90px; }
  .container {
    width: 100%;
    min-height: calc(100vh - 90px);
    padding: 20px;
    border-radius: 0;
    margin: 0 auto;
  }
  .container h1 { font-size: 28px; }
  .container button { font-size: 16px; padding: 12px; }
}