:root{
  /* Palette harmonized with your artwork */
  --plum: #39272E;
  --slate: #655157;
  --lav:  #948CA3;
  --lilac:#A395AF;
  --sand: #D6AF9A;
  --rose: #C49E91;

  --text: rgba(255,255,255,0.94);
  --muted: rgba(255,255,255,0.78);

  /* Make form readable */
  --card: rgba(20, 14, 18, 0.55);      /* darker glass */
  --card2: rgba(255,255,255,0.10);     /* subtle highlight */
  --cardBorder: rgba(255,255,255,0.18);

  --inputBg: rgba(255,255,255,0.14);
  --inputBorder: rgba(255,255,255,0.32);

  --focus: rgba(214,175,154,0.90);
  --shadow: rgba(0,0,0,0.45);
  --danger: #ff6b6b;

  /* matches your setup: /nodeRoot/assets/auth-bg.webp */
  --bgImage: url("../assets/auth-bg.webp");
}

*{ box-sizing:border-box; }

body{
  font-family: 'Poppins', sans-serif;
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 26px;
  color: var(--text);

  background:
    linear-gradient(135deg, rgba(57,39,46,0.78), rgba(148,140,163,0.35)),
    radial-gradient(900px 520px at 12% 10%, rgba(214,175,154,0.22), transparent 55%),
    radial-gradient(700px 420px at 88% 12%, rgba(148,140,163,0.16), transparent 60%),
    var(--bgImage);

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Works with BOTH: .auth-container OR old .container */
.auth-container,
.container{
  width:100%;
  display:flex;
  justify-content:center;
}

/* Works with BOTH: .auth-box OR old .form-container */
.auth-box,
.form-container{
  width:100%;
  max-width: 430px;
  padding: 38px 34px;
  text-align:center;

  background:
    radial-gradient(900px 300px at 50% 0%, var(--card2), transparent 60%),
    var(--card);

  border: 1px solid var(--cardBorder);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 70px var(--shadow);

  animation: fadeIn .55s ease;
}

@keyframes fadeIn{
  from{ opacity:0; transform: translateY(-10px); }
  to{ opacity:1; transform: translateY(0); }
}

h2{
  margin:0 0 22px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}

/* Works with BOTH: .error class OR #errorMessage id */
.error,
#errorMessage{
  display:none;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border-left: 4px solid var(--danger);
  background: rgba(255,107,107,0.14);
  color: rgba(255,240,240,0.95);
  font-size: 14px;
  text-align:left;
}

.form-group{
  margin-bottom: 18px;
  text-align:left;
}

.form-group input{
  width:100%;
  padding: 13px 14px;
  font-size: 15px;
  border-radius: 12px;
  border: 1px solid var(--inputBorder);
  background: var(--inputBg);
  color: var(--text);
  outline:none;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.form-group input::placeholder{
  color: rgba(255,255,255,0.70);
}

.form-group input:focus{
  border-color: var(--focus);
  box-shadow: 0 0 0 4px rgba(214,175,154,0.18);
  background: rgba(255,255,255,0.18);
}

/* Forgot password */
.forgot-password,
.link-right{
  display:block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  text-decoration:none;
  text-align:right;
}

.forgot-password:hover,
.link-right:hover{
  color: var(--text);
  text-decoration: underline;
}

/* ✅ Remember me alignment (supports BOTH markup styles) */
.remember,
.remember-group{
  margin-top: 6px;
  margin-bottom: 20px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.remember-label,
.remember-group label{
  display:flex;
  align-items:center;
  gap: 10px;
  cursor:pointer;
  user-select:none;
  color: var(--muted);
  font-size: 14px;
}

/* Make checkbox line up cleanly */
.remember-label input[type="checkbox"]{
  width: 16px;
  height: 16px;
  accent-color: var(--sand);
  transform: translateY(1px);
}

/* If you ever use the “toggle pill” version again */
.remember-group input[type="checkbox"]{
  width: 44px;
  height: 24px;
  appearance: none;
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 999px;
  position: relative;
  outline: none;
  transition: 0.2s ease;
}
.remember-group input[type="checkbox"]::after{
  content:"";
  position:absolute;
  top: 50%;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.86);
  transition: 0.2s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}
.remember-group input[type="checkbox"]:checked{
  background: linear-gradient(90deg, var(--sand), var(--rose));
}
.remember-group input[type="checkbox"]:checked::after{
  left: 22px;
  background: rgba(57,39,46,0.92);
}

/* ✅ Buttons: fix styling for BOTH .btn-primary and .btn-submit */
.btn-primary,
.btn-submit{
  width:100%;
  display:block;
  padding: 13px 14px;
  border:none;
  border-radius: 12px;
  cursor:pointer;

  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;

  color: rgba(35, 22, 27, 0.95);
  background: linear-gradient(90deg, var(--sand), #e7c7b7);
  box-shadow: 0 12px 32px rgba(214,175,154,0.28);

  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-primary:hover,
.btn-submit:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
  box-shadow: 0 16px 38px rgba(214,175,154,0.35);
}

.btn-primary:active,
.btn-submit:active{
  transform: translateY(0px);
}

.btn-primary:disabled,
.btn-submit:disabled{
  opacity: 0.75;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Works with BOTH: .switch-text OR old .switch-link */
.switch-text,
.switch-link{
  margin-top: 22px;
  font-size: 14px;
  text-align:center;
  color: var(--muted);
}

.switch-text a,
.switch-link a{
  color: rgba(255,255,255,0.92);
  text-decoration:none;
  border-bottom: 1px solid rgba(255,255,255,0.35);
}

.switch-text a:hover,
.switch-link a:hover{
  border-bottom-color: rgba(255,255,255,0.90);
}