/* ============================================================
   SoftWave — Login Page  (Full-screen animated background)
   ============================================================ */

#login {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; overflow: hidden;
  font-family: var(--f);
  background: #ffffff;
}

/* ══════════════════════════════════════════════════════════
   ANIMATED BACKGROUND — white canvas with motion
   ══════════════════════════════════════════════════════════ */

.login-aurora {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(14,165,233,.10) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 20%, rgba(99,102,241,.09) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(16,185,129,.07) 0%, transparent 45%),
    radial-gradient(ellipse at 70% 60%, rgba(236,72,153,.06) 0%, transparent 40%);
  animation: auroraShift 14s ease-in-out infinite alternate;
}
@keyframes auroraShift {
  0%   { transform: scale(1) rotate(0deg);   opacity: .8; }
  100% { transform: scale(1.08) rotate(2deg); opacity: 1; }
}

.login-circuit {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(0deg,   transparent 24%, rgba(14,165,233,.045) 25%, rgba(14,165,233,.045) 26%, transparent 27%),
    linear-gradient(90deg,  transparent 24%, rgba(14,165,233,.045) 25%, rgba(14,165,233,.045) 26%, transparent 27%);
  background-size: 72px 72px;
  animation: circuitScroll 22s linear infinite;
}
@keyframes circuitScroll {
  0%   { background-position: 0 0; }
  100% { background-position: 72px 72px; }
}

.orb {
  position: absolute; border-radius: 50%;
  filter: blur(70px); pointer-events: none;
  animation: orbFloat 22s ease-in-out infinite;
}
.orb1 {
  width: 600px; height: 600px; top: -180px; left: -140px;
  background: radial-gradient(circle, rgba(14,165,233,.1), transparent 68%);
}
.orb2 {
  width: 480px; height: 480px; bottom: -120px; right: -100px;
  background: radial-gradient(circle, rgba(99,102,241,.09), transparent 68%);
  animation-duration: 28s; animation-direction: reverse;
}
.orb3 {
  width: 360px; height: 360px; top: 35%; left: 55%;
  background: radial-gradient(circle, rgba(16,185,129,.07), transparent 68%);
  animation-duration: 18s;
}
.orb4 {
  width: 280px; height: 280px; top: 10%; right: 20%;
  background: radial-gradient(circle, rgba(236,72,153,.06), transparent 68%);
  animation-duration: 24s; animation-direction: reverse;
}
@keyframes orbFloat {
  0%,100% { transform: translate(0, 0); }
  25%      { transform: translate(25px, -30px); }
  50%      { transform: translate(-15px, 20px); }
  75%      { transform: translate(20px, 15px); }
}

.ll-deco {
  position: absolute; pointer-events: none;
  font-size: 52px; opacity: .045;
  animation: decoFloat 18s ease-in-out infinite;
  user-select: none;
}
.ll-deco-1 { top: 8%;   left: 6%;   animation-duration: 16s; }
.ll-deco-2 { top: 15%;  right: 8%;  animation-duration: 22s; animation-direction: reverse; font-size: 38px; opacity: .035; }
.ll-deco-3 { bottom: 20%; left: 10%; animation-duration: 19s; font-size: 44px; }
.ll-deco-4 { bottom: 12%; right: 12%; animation-duration: 25s; animation-direction: reverse; font-size: 36px; opacity: .04; }
.ll-deco-5 { top: 50%;  left: 3%;  animation-duration: 21s; font-size: 30px; opacity: .03; }
.ll-deco-6 { top: 45%;  right: 5%; animation-duration: 17s; font-size: 34px; opacity: .03; }
@keyframes decoFloat {
  0%,100% { transform: translate(0, 0)    rotate(-6deg); }
  33%      { transform: translate(12px, -18px) rotate(4deg); }
  66%      { transform: translate(-10px, 14px) rotate(-2deg); }
}

.login-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lp-dot {
  position: absolute; border-radius: 50%;
  background: rgba(14,165,233,.18);
  animation: dotRise linear infinite;
}
.lp-dot:nth-child(1)  { width:4px;  height:4px;  left:10%; animation-duration:12s; animation-delay:0s;    }
.lp-dot:nth-child(2)  { width:3px;  height:3px;  left:25%; animation-duration:16s; animation-delay:2s;    background:rgba(99,102,241,.15); }
.lp-dot:nth-child(3)  { width:5px;  height:5px;  left:40%; animation-duration:10s; animation-delay:4s;    }
.lp-dot:nth-child(4)  { width:3px;  height:3px;  left:55%; animation-duration:14s; animation-delay:1s;    background:rgba(16,185,129,.15); }
.lp-dot:nth-child(5)  { width:4px;  height:4px;  left:70%; animation-duration:18s; animation-delay:3s;    }
.lp-dot:nth-child(6)  { width:3px;  height:3px;  left:85%; animation-duration:11s; animation-delay:5s;    background:rgba(236,72,153,.12); }
.lp-dot:nth-child(7)  { width:5px;  height:5px;  left:18%; animation-duration:15s; animation-delay:6s;    background:rgba(99,102,241,.12); }
.lp-dot:nth-child(8)  { width:3px;  height:3px;  left:63%; animation-duration:13s; animation-delay:7s;    }
.lp-dot:nth-child(9)  { width:4px;  height:4px;  left:33%; animation-duration:20s; animation-delay:2.5s;  background:rgba(16,185,129,.12); }
.lp-dot:nth-child(10) { width:3px;  height:3px;  left:78%; animation-duration:17s; animation-delay:8s;    }
@keyframes dotRise {
  0%   { bottom: -10px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .6; }
  100% { bottom: 105%; opacity: 0; }
}

/* ══════════════════════════════════════════════════════════
   LOGIN CARD
   ══════════════════════════════════════════════════════════ */
.lw {
  position: relative; z-index: 10;
  width: 420px; max-width: 95vw;
  animation: loginAppear .8s cubic-bezier(.16,1,.3,1) both;
}
@keyframes loginAppear {
  from { opacity: 0; transform: translateY(30px) scale(.97); }
}

.login-brand {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 22px; text-align: center;
}
.login-logo-ring {
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 20px rgba(14,165,233,.25));
  animation: logoFloat 5s ease-in-out infinite;
}
@keyframes logoFloat {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.login-title {
  font-size: 32px; font-weight: 900; letter-spacing: -.03em;
  color: var(--tx); line-height: 1.1;
}
.login-title span {
  background: linear-gradient(135deg, var(--c1), var(--c2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.login-subtitle { font-size: 12px; color: var(--t3); margin-top: 5px; letter-spacing: .02em; }
.login-welcome  { text-align: center; margin-bottom: 20px; }
.login-welcome-sub { font-size: 13px; color: var(--t3); }

.lf {
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(14,165,233,.12); border-radius: 22px;
  padding: 30px 32px;
  box-shadow: 0 4px 6px rgba(0,0,0,.04), 0 20px 56px rgba(14,165,233,.12), 0 1px 0 rgba(255,255,255,.95) inset;
}

.lfi { margin-bottom: 14px; }
.lfl {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--t3); margin-bottom: 7px; display: block;
}
.lfi input {
  width: 100%; padding: 13px 16px; border-radius: 11px;
  background: #f8fafc; border: 1.5px solid var(--sb);
  color: var(--tx); font-size: 14px; font-family: var(--f);
  outline: none; transition: all .2s; box-sizing: border-box;
}
.lfi input:focus {
  border-color: var(--c1); background: #fff;
  box-shadow: 0 0 0 3px rgba(14,165,233,.1);
}

.lerr {
  color: var(--er); font-size: 12px; padding: 10px 14px;
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 8px; margin-bottom: 12px; display: none;
}

.lbtn {
  width: 100%; padding: 14px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
  color: #fff; font-size: 15px; font-weight: 700; font-family: var(--f);
  transition: all .25s; letter-spacing: .01em;
  box-shadow: 0 4px 18px rgba(14,165,233,.35);
  position: relative; overflow: hidden;
}
.lbtn::after {
  content: '';
  position: absolute; top: -50%; left: -70%; width: 35%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg); transition: left .55s ease;
}
.lbtn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(14,165,233,.45); }
.lbtn:hover::after { left: 140%; }
.lbtn:active { transform: translateY(0); }

.login-footer {
  margin-top: 16px; text-align: center;
  font-size: 10px; color: var(--t3); letter-spacing: .04em;
}

/* Hide old unused elements */
.login-badges, .login-grid, .login-bg { display: none !important; }

/* ── Password show/hide toggle ──────────────────────────── */
.lfi-pw-wrap {
  position: relative; display: flex; align-items: center;
}
.lfi-pw-wrap input {
  padding-right: 44px;
}
.lfi-eye {
  position: absolute; right: 12px;
  background: none; border: none; cursor: pointer;
  color: #94a3b8; padding: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s; line-height: 1; flex-shrink: 0;
}
.lfi-eye:hover { color: #0ea5e9; }

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .lw { width: 100%; max-width: 100%; padding: 0 12px; }
  .lf { padding: 22px 18px; border-radius: 16px; }
  .login-title { font-size: 26px; }
  .login-logo-ring img { width: 80px !important; height: 80px !important; }
}