body.auth-locked{
  overflow:hidden !important;
}

/* 🔹 Overlay con blur del fondo */
#authOverlay{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:rgba(2,6,23,.34);
  backdrop-filter:blur(26px) saturate(150%) brightness(.82);
  -webkit-backdrop-filter:blur(26px) saturate(150%) brightness(.82);
}

#authOverlay.show{
  display:flex !important;
}

/* 🔹 Card glass premium */
#authCard{
  width:min(460px,92vw);
  padding:42px 38px 34px;
  border-radius:26px;

  background:
    linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.05)),
    linear-gradient(180deg, rgba(15,23,42,.70), rgba(2,6,23,.58));

  border:1px solid rgba(255,255,255,.10);

  box-shadow:
    0 16px 38px rgba(2,6,23,.30),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);

  position:relative;
  overflow:hidden;
}

/* glow sutil */
#authCard::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:26px;
  background:
    radial-gradient(circle at 22% 0%, rgba(96,165,250,.24), transparent 38%),
    linear-gradient(120deg, rgba(255,255,255,.16), transparent 45%);
  opacity:.95;
  pointer-events:none;
}

#authCard > *{
  position:relative;
  z-index:1;
}

/* 🔹 Branding */
#authBrand{
  text-align:center;
  font-size:18px;
  font-weight:900;
  letter-spacing:.12em;
  color:#ffffff;
  margin-bottom:18px;
}

/* 🔹 Title */
#authCard h2{
  text-align:center;
  font-size:30px;
  font-weight:900;
  color:#ffffff;
  margin-bottom:8px;
}

/* 🔹 Subtitle */
#authSub{
  text-align:center;
  color:rgba(248,250,252,.92);
  font-size:14px;
  margin-bottom:26px;
}

/* 🔹 Labels */
.auth-label{
  display:block;
  font-size:13px;
  font-weight:700;
  color:#ffffff;
  margin:0 0 6px 2px;
}

/* 🔹 Inputs */
.auth-field{
  margin-bottom:16px;
}

.auth-field input,
.auth-field select{
  width:100%;
  height:52px;
  padding:0 16px;
  border-radius:12px;

  background:rgba(2,6,23,.50);
  border:1px solid rgba(255,255,255,.26);

  color:#ffffff;
  font-size:15px;
  font-weight:700;

  transition:all .2s ease;
}

/* placeholder */
.auth-field input::placeholder{
  color:rgba(248,250,252,.72);
}

/* focus */
.auth-field input:focus,
.auth-field select:focus{
  border-color:rgba(125,211,252,.85);
  box-shadow:0 0 0 4px rgba(56,189,248,.18);
  background:rgba(2,6,23,.68);
}

/* 🔹 Forgot password */
#authForgot{
  font-size:13px;
  color:#3b82f6;
  margin-bottom:18px;
  cursor:pointer;
}

/* 🔹 Button */
#authLoginBtn{
  width:100%;
  height:52px;
  border:none;
  border-radius:12px;

  background:linear-gradient(
    135deg,
    #3b82f6,
    #2563eb
  );

  color:#fff;
  font-size:16px;
  font-weight:800;

  cursor:pointer;
  transition:all .2s ease;

  box-shadow:0 12px 30px rgba(37,99,235,.35);
}

#authLoginBtn:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 40px rgba(37,99,235,.45);
}

/* 🔹 Footer */
#authFoot{
  margin-top:20px;
  text-align:center;
  font-size:13px;
  color:rgba(248,250,252,.86);
}

#authFoot span{
  color:#3b82f6;
  font-weight:700;
  cursor:pointer;
}

/* 🔹 Logout btn */
#authLogoutBtn{
  display:none;

  padding:10px 14px !important;
  border-radius:10px !important;

  background:rgba(15,23,42,.85) !important;
  border:1px solid rgba(255,255,255,.2) !important;

  color:#fff !important;
  font-weight:800 !important;

  box-shadow:0 10px 30px rgba(0,0,0,.18) !important;
}

.auth-logout-inline{
  position:static !important;
  z-index:auto !important;
  margin-left:8px !important;
}

/* Auth card matches app dark glass material */
#authOverlay #authCard{
  background:rgba(15,23,42,.72) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.35) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
}

#authOverlay #authCard h1,
#authOverlay #authCard h2,
#authOverlay .auth-title,
#authOverlay .auth-label{
  color:#f8fafc !important;
}

#authOverlay #authCard p,
#authOverlay .auth-subtitle{
  color:rgba(226,232,240,.78) !important;
}

#authOverlay .auth-field{
  background:rgba(15,23,42,.52) !important;
  border:1px solid rgba(148,163,184,.30) !important;
}

#authOverlay .auth-field input,
#authOverlay .auth-field select{
  color:#f8fafc !important;
}

#authOverlay .auth-field input::placeholder{
  color:rgba(203,213,225,.68) !important;
}

#authOverlay .auth-field:focus-within{
  border-color:rgba(56,189,248,.70) !important;
  box-shadow:0 0 0 3px rgba(14,165,233,.14) !important;
}

#authOverlay #authLoginBtn{
  background:linear-gradient(135deg,#0284c7,#0ea5e9) !important;
  color:#fff !important;
}

#authOverlay #authForgot,
#authOverlay #authSignup{
  color:#38bdf8 !important;
}