/* ── Login page ── */
.login-body {
  min-height:100vh; display:flex;
  font-family:var(--font-body);
  background:#0d1f3c;
  overflow:hidden;
}

/* ══ LEFT PANEL ══ */
.login-panel {
  flex:0 0 46%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:60px 48px;
  position:relative; overflow:hidden;
  background:linear-gradient(145deg, #0a1628 0%, #0d1f3c 40%, #111d35 100%);
  animation: panel-enter .8s cubic-bezier(.22,1,.36,1) both;
}

@keyframes panel-enter {
  from { opacity:0; transform:translateX(-60px); }
  to   { opacity:1; transform:translateX(0); }
}

/* Animated mesh grid */
.login-panel::before {
  content:'';
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:48px 48px;
  animation:grid-drift 20s linear infinite;
  z-index:0;
}

@keyframes grid-drift {
  from { background-position:0 0; }
  to   { background-position:48px 48px; }
}

/* Rich atmospheric glow layers */
.login-panel::after {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 12% 95%,  rgba(200,16,46,.55)  0%, transparent 50%),
    radial-gradient(ellipse 55% 45% at 88% 5%,   rgba(44,74,138,.75)  0%, transparent 52%),
    radial-gradient(ellipse 40% 35% at 50% 50%,  rgba(29,52,97,.30)   0%, transparent 60%),
    radial-gradient(ellipse 30% 25% at 80% 75%,  rgba(200,16,46,.20)  0%, transparent 45%);
  animation: glow-breathe 8s ease-in-out infinite alternate;
  z-index:0;
}

@keyframes glow-breathe {
  from { opacity:.7; }
  to   { opacity:1; }
}

/* ── Rings ── */
.lp-ring {
  position:absolute; border-radius:50%;
  pointer-events:none; z-index:1;
  animation:ring-spin linear infinite;
}
.lp-ring:nth-child(1) { width:640px;height:640px; top:-240px;left:-240px; border:1px solid rgba(255,255,255,.05); animation-duration:50s; }
.lp-ring:nth-child(2) { width:440px;height:440px; bottom:-180px;right:-180px; border:1.5px solid rgba(200,16,46,.18); animation-duration:35s; animation-direction:reverse; }
.lp-ring:nth-child(3) { width:260px;height:260px; top:50%;left:50%; margin:-130px 0 0 -130px; border:1px solid rgba(255,255,255,.05); animation-duration:22s; }
.lp-ring:nth-child(4) { width:340px;height:340px; top:-60px;right:-80px; border:1px dashed rgba(200,16,46,.14); animation-duration:28s; animation-direction:reverse; }

@keyframes ring-spin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

/* ── Glowing particles ── */
.lp-particle {
  position:absolute; border-radius:50%;
  pointer-events:none; z-index:2;
  animation:particle-float ease-in-out infinite;
}

.lp-particle:nth-child(5)  { width:14px;height:14px; top:16%;left:12%; background:var(--wa-red); box-shadow:0 0 20px 6px rgba(200,16,46,.55); animation-duration:5s; }
.lp-particle:nth-child(6)  { width:8px; height:8px;  top:70%;right:14%; background:#fff; box-shadow:0 0 14px 4px rgba(255,255,255,.4); animation-duration:8s; animation-delay:1.5s; }
.lp-particle:nth-child(7)  { width:6px; height:6px;  top:52%;left:66%; background:var(--wa-red); box-shadow:0 0 12px 3px rgba(200,16,46,.5); animation-duration:6s; animation-delay:.8s; }
.lp-particle:nth-child(8)  { width:10px;height:10px; top:32%;right:22%; background:rgba(255,255,255,.6); box-shadow:0 0 16px 5px rgba(255,255,255,.25); animation-duration:10s; animation-delay:2s; }
.lp-particle:nth-child(9)  { width:5px; height:5px;  top:82%;left:28%; background:var(--wa-red); box-shadow:0 0 10px 3px rgba(200,16,46,.5); animation-duration:7s; animation-delay:.4s; }
.lp-particle:nth-child(10) { width:7px; height:7px;  top:10%;right:35%; background:rgba(255,255,255,.5); box-shadow:0 0 12px 4px rgba(255,255,255,.3); animation-duration:9s; animation-delay:3s; }
.lp-particle:nth-child(11) { width:4px; height:4px;  top:42%;left:20%; background:#fff; box-shadow:0 0 8px 2px rgba(255,255,255,.7); animation-duration:11s; animation-delay:1s; }
.lp-particle:nth-child(12) { width:9px; height:9px;  top:62%;right:40%; background:rgba(200,16,46,.7); box-shadow:0 0 14px 5px rgba(200,16,46,.4); animation-duration:13s; animation-delay:2.5s; }

@keyframes particle-float {
  0%,100% { transform:translateY(0) scale(1); }
  50%      { transform:translateY(-24px) scale(1.15); }
}

/* ── Shooting star ── */
.lp-star {
  position:absolute; z-index:2; pointer-events:none;
  width:2px; height:2px; background:#fff; border-radius:50%;
}
.lp-star::after {
  content:'';
  position:absolute; top:50%; right:0;
  width:80px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6));
  transform:translateY(-50%);
}
.lp-star:nth-child(13) { top:20%; left:60%; animation:shoot-star 4s 1s linear infinite; }
.lp-star:nth-child(14) { top:45%; left:30%; animation:shoot-star 5s 3s linear infinite; }

@keyframes shoot-star {
  0%   { transform:translate(0,0) rotate(-30deg); opacity:1; }
  80%  { opacity:1; }
  100% { transform:translate(-200px, 120px) rotate(-30deg); opacity:0; }
}

/* ── Glowing orbs ── */
.lp-orb {
  position:absolute; border-radius:50%;
  pointer-events:none; z-index:0;
  animation:orb-pulse ease-in-out infinite;
}
.lp-orb:nth-child(15) { width:260px;height:260px; bottom:-60px;left:-60px; background:rgba(200,16,46,.22); filter:blur(55px); animation-duration:7s; }
.lp-orb:nth-child(16) { width:200px;height:200px; top:-40px;right:-30px; background:rgba(44,74,138,.35); filter:blur(50px); animation-duration:9s; animation-delay:2s; }
.lp-orb:nth-child(17) { width:140px;height:140px; top:45%;left:55%; background:rgba(200,16,46,.12); filter:blur(40px); animation-duration:11s; animation-delay:1s; }

@keyframes orb-pulse {
  0%,100% { transform:scale(1); opacity:.75; }
  50%      { transform:scale(1.3); opacity:1; }
}

/* ── Plane ── */
.lp-plane {
  position:absolute; bottom:10%; right:-2%;
  width:260px; opacity:.12; pointer-events:none; z-index:1;
  animation:plane-drift 18s ease-in-out infinite;
  filter:drop-shadow(0 0 20px rgba(255,255,255,.15));
}
@keyframes plane-drift {
  0%,100% { transform:translate(0,0) rotate(-9deg); }
  50%      { transform:translate(-22px,-16px) rotate(-5deg); }
}

/* ── Content ── */
.lp-content {
  position:relative; text-align:center;
  color:var(--wa-white); z-index:3;
  animation:content-rise .9s .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes content-rise {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:translateY(0); }
}

.lp-logo {
  width:175px; margin:0 auto 44px;
  filter:drop-shadow(0 4px 28px rgba(0,0,0,.45));
  transition:transform .35s ease, filter .35s ease;
}
.lp-logo:hover { transform:scale(1.06); filter:drop-shadow(0 8px 36px rgba(200,16,46,.45)); }

.lp-tagline {
  display:inline-block; font-size:10px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--wa-red); margin-bottom:14px; opacity:.95;
}

.lp-title { font-size:32px; font-weight:800; letter-spacing:-.5px; line-height:1.18; margin-bottom:16px; }
.lp-title em { font-style:normal; color:rgba(255,255,255,.40); display:block; font-size:21px; font-weight:600; margin-top:6px; }
.lp-sub { font-size:13px; color:rgba(255,255,255,.46); line-height:1.75; max-width:260px; margin:0 auto 44px; }

.lp-sep { display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:20px; }
.lp-sep-line    { width:48px; height:1px; background:rgba(255,255,255,.15); }
.lp-sep-diamond { width:7px; height:7px; background:var(--wa-red); transform:rotate(45deg); animation:diamond-pulse 2s ease-in-out infinite; }

@keyframes diamond-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(200,16,46,.7); }
  50%      { box-shadow:0 0 0 6px rgba(200,16,46,0); }
}

.lp-caption { font-size:11px; color:rgba(255,255,255,.24); letter-spacing:.8px; text-transform:uppercase; }

/* ══ RIGHT PANEL ══ */
.login-form-panel {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:48px 40px;
  background:linear-gradient(145deg, #eef1f8 0%, #e4eaf5 50%, #dde4f0 100%);
  position:relative; overflow:hidden;
  animation:form-panel-enter .8s .1s cubic-bezier(.22,1,.36,1) both;
}

/* Subtle background orb on right */
.login-form-panel::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(29,52,97,.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(200,16,46,.05) 0%, transparent 55%);
}

@keyframes form-panel-enter {
  from { opacity:0; transform:translateX(50px); }
  to   { opacity:1; transform:translateX(0); }
}

.login-card {
  width:100%; max-width:390px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 10px 60px rgba(29,52,97,.16), 0 2px 10px rgba(29,52,97,.08), inset 0 1px 0 rgba(255,255,255,.9);
  padding:44px 40px;
  position:relative;
  animation:card-rise .7s .4s cubic-bezier(.22,1,.36,1) both;
  transition:box-shadow .35s ease, transform .35s ease;
}
.login-card:hover {
  box-shadow:0 20px 80px rgba(29,52,97,.20), 0 4px 20px rgba(29,52,97,.10), inset 0 1px 0 rgba(255,255,255,.9);
  transform:translateY(-3px);
}
@keyframes card-rise {
  from { opacity:0; transform:translateY(24px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.login-accent-bar {
  height:4px;
  background:linear-gradient(90deg, var(--wa-red) 0%, #e85070 35%, var(--wa-navy-light) 70%, var(--wa-navy) 100%);
  border-radius:22px 22px 0 0;
  margin:-44px -40px 40px;
  position:relative; overflow:hidden;
}
.login-accent-bar::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  transform:translateX(-100%);
  animation:shimmer 2s .7s ease both;
}
@keyframes shimmer { to { transform:translateX(200%); } }

.login-card h1 { font-size:25px; font-weight:800; color:var(--wa-text); margin-bottom:5px; }
.login-sub { color:var(--wa-muted); font-size:13px; margin-bottom:32px; }
.login-card form { display:flex; flex-direction:column; }
.login-field { display:flex; flex-direction:column; margin-bottom:18px; }

.login-field label {
  font-size:12px; font-weight:700; color:var(--wa-text);
  margin-bottom:8px; letter-spacing:.3px;
  transition:color .2s;
}
.login-field:focus-within label { color:var(--wa-navy); }

.login-field input {
  width:100%; padding:13px 16px;
  border:1.5px solid rgba(213,213,213,.8);
  border-radius:11px; font-size:14px;
  font-family:var(--font-body); color:var(--wa-text);
  background:rgba(250,251,252,.9);
  outline:none;
  transition:border-color .22s, box-shadow .22s, background .22s, transform .22s;
}
.login-field input:focus {
  border-color:var(--wa-navy);
  box-shadow:0 0 0 4px rgba(29,52,97,.10);
  background:#fff;
  transform:translateY(-2px);
}

.login-error {
  color:var(--wa-red); font-size:12px;
  margin-bottom:8px; padding:9px 13px;
  background:rgba(200,16,46,.07);
  border-radius:8px; border-left:3px solid var(--wa-red);
  animation:shake .4s ease;
}
@keyframes shake {
  0%,100% { transform:translateX(0); }
  20% { transform:translateX(-7px); }
  60% { transform:translateX(7px); }
  80% { transform:translateX(-3px); }
}

#login-btn {
  margin-top:12px; padding:15px;
  background:linear-gradient(135deg, var(--wa-navy) 0%, #2a4a8e 50%, var(--wa-navy-light) 100%);
  background-size:200% 200%;
  color:var(--wa-white); border:none;
  border-radius:11px; font-weight:700; font-size:15px;
  cursor:pointer; letter-spacing:.5px;
  transition:transform .22s, box-shadow .22s, background-position .4s;
  box-shadow:0 6px 28px rgba(29,52,97,.38);
  position:relative; overflow:hidden;
}
#login-btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform:translateX(-100%);
  transition:transform .55s ease;
}
#login-btn:hover:not(:disabled)::after { transform:translateX(100%); }
#login-btn:hover:not(:disabled) {
  transform:translateY(-3px);
  box-shadow:0 14px 40px rgba(29,52,97,.46);
  background-position:right center;
}
#login-btn:active:not(:disabled) { transform:translateY(0); box-shadow:0 4px 14px rgba(29,52,97,.28); }
#login-btn:disabled { opacity:.6; cursor:not-allowed; }

/* ── Relogin modal ── */
.relogin-overlay {
  position:fixed; inset:0;
  background:rgba(10,22,40,.65); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; z-index:9999;
}
.relogin-overlay[hidden] { display:none; }
.relogin-card {
  width:100%; max-width:340px; background:#fff;
  border-radius:18px; box-shadow:0 20px 60px rgba(0,0,0,.24);
  padding:28px 28px 24px;
  animation:card-pop .3s cubic-bezier(.22,1,.36,1);
}
@keyframes card-pop {
  from { opacity:0; transform:scale(.88) translateY(20px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.relogin-card h3 { font-size:16px; margin-bottom:4px; color:var(--wa-text); }
.relogin-card p  { font-size:12px; color:var(--wa-muted); margin-bottom:16px; }
.relogin-card input {
  width:100%; padding:10px 12px;
  border:1.5px solid var(--wa-border); border-radius:9px;
  font-size:14px; font-family:var(--font-body); margin-bottom:10px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.relogin-card input:focus { border-color:var(--wa-navy); box-shadow:0 0 0 3px rgba(29,52,97,.09); }
.relogin-actions { display:flex; gap:8px; margin-top:6px; }
.relogin-actions button {
  flex:1; padding:10px; border:none; border-radius:9px;
  font-weight:700; font-size:13px; cursor:pointer;
  transition:filter .18s, transform .15s;
}
.relogin-actions button:hover { filter:brightness(1.08); transform:translateY(-1px); }
#relogin-submit { background:var(--wa-navy); color:#fff; }
#relogin-logout  { background:var(--wa-bg); color:var(--wa-text); }

@media (max-width:720px) {
  .login-panel { display:none; }
  .login-form-panel { background:linear-gradient(145deg,#0d1f3c,#1a3060); }
  .login-card { background:rgba(255,255,255,.95); }
}