/* ===== INVION v5 Login — Cosmic Command Center ===== */
/* Scoped under .inv-login to avoid global conflicts */

.inv-login {
  --bg:#fafaff; --bg-subtle:#f3f2fa; --surface:rgba(255,255,255,0.55); --surface-solid:#ffffff;
  --surface-hover:rgba(255,255,255,0.7); --text:#0f0e1a; --text-sec:#6b6a80; --text-muted:#9998ad;
  --primary:#6c5ce7; --primary-light:#a29bfe; --primary-glow:rgba(var(--v5-primary-rgb),0.25);
  --cyan:#00cec9; --cyan-glow:rgba(var(--v5-cyan-rgb),0.2); --pink:#fd79a8; --pink-glow:rgba(var(--v5-pink-rgb),0.15);
  --red:#ff4757; --green:#00b894; --amber:#fdcb6e;
  --border:rgba(var(--v5-primary-rgb),0.12); --border-subtle:rgba(0,0,0,0.05);
  --glass:rgba(255,255,255,0.45); --glass-strong:rgba(255,255,255,0.65);
  --glass-border:rgba(var(--v5-primary-rgb),0.12);
  --glow-sm:0 0 20px rgba(var(--v5-primary-rgb),0.12); --glow-md:0 0 40px rgba(var(--v5-primary-rgb),0.2);
  --glow-lg:0 0 80px rgba(var(--v5-primary-rgb),0.25);

  position:fixed;inset:0;z-index:1;
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  transition:background .5s,color .4s;
}

.inv-login.dark {
  --bg:#06050e; --bg-subtle:#0c0b18; --surface:rgba(17,16,42,0.5); --surface-solid:#11102a;
  --surface-hover:rgba(25,24,64,0.6); --text:#eae8f4; --text-sec:#8d8ba8; --text-muted:#5a587a;
  --primary:#a29bfe; --primary-light:#c8c4ff; --primary-glow:rgba(var(--v5-primary-rgb),0.25);
  --cyan:#55efc4; --cyan-glow:rgba(var(--v5-cyan-rgb),0.15); --pink:#fd79a8; --red:#ff6b6b;
  --green:#55efc4; --amber:#ffeaa7;
  --border:rgba(var(--v5-primary-rgb),0.1); --border-subtle:rgba(255,255,255,0.04);
  --glass:rgba(17,16,42,0.45); --glass-strong:rgba(17,16,42,0.65);
  --glass-border:rgba(var(--v5-primary-rgb),0.12);
  --glow-sm:0 0 20px rgba(var(--v5-primary-rgb),0.1); --glow-md:0 0 40px rgba(var(--v5-primary-rgb),0.18);
  --glow-lg:0 0 80px rgba(var(--v5-primary-rgb),0.22);
}

/* ===== COSMIC BACKGROUND ===== */
.inv-login .cosmos{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;}

.inv-login .star{position:absolute;width:2px;height:2px;background:white;border-radius:50%;
  animation:inv-twinkle var(--d,3s) ease-in-out infinite alternate;animation-delay:var(--dl,0s);opacity:0;}
.inv-login .star.c{width:3px;height:3px;background:var(--sc);}
@keyframes inv-twinkle{0%{opacity:0;transform:scale(.5)}100%{opacity:var(--mo,.7);transform:scale(1)}}

.inv-login:not(.dark) .star{display:none;}
.inv-login:not(.dark) .shooting-star{display:none;}
.inv-login:not(.dark) .particle{display:none;}

.inv-login .neb{position:absolute;border-radius:50%;filter:blur(140px);animation:inv-drift 16s ease-in-out infinite alternate;}
.inv-login .neb-1{width:700px;height:700px;top:-20%;right:-15%;background:radial-gradient(circle,var(--primary-glow),transparent 70%);animation-duration:18s;}
.inv-login .neb-2{width:600px;height:600px;bottom:-25%;left:-10%;background:radial-gradient(circle,var(--cyan-glow),transparent 70%);animation-duration:14s;animation-delay:-4s;}
.inv-login .neb-3{width:450px;height:450px;top:35%;left:40%;background:radial-gradient(circle,var(--pink-glow),transparent 70%);animation-duration:12s;animation-delay:-8s;}
.inv-login .neb-4{width:350px;height:350px;top:60%;right:25%;background:radial-gradient(circle,rgba(var(--v5-primary-rgb),0.08),transparent 70%);animation-duration:20s;animation-delay:-2s;}
@keyframes inv-drift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(30px,-25px) scale(1.1)}}

.inv-login:not(.dark) .cosmos{background:linear-gradient(180deg,#e8e4ff 0%,#f0edff 30%,#fafaff 60%,#f5f0ff 100%);}
.inv-login:not(.dark) .neb{filter:blur(100px);}
.inv-login:not(.dark) .neb-1{width:1200px;height:500px;top:auto;bottom:-10%;right:-15%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,0.9),rgba(230,225,255,0.5),transparent 70%);animation-duration:25s;}
.inv-login:not(.dark) .neb-2{width:1000px;height:400px;top:auto;bottom:-5%;left:-10%;
  background:radial-gradient(ellipse,rgba(255,255,255,0.85),rgba(200,240,255,0.4),transparent 70%);animation-duration:20s;}
.inv-login:not(.dark) .neb-3{width:800px;height:350px;top:auto;bottom:5%;left:30%;
  background:radial-gradient(ellipse,rgba(255,255,255,0.8),rgba(240,220,255,0.3),transparent 70%);animation-duration:22s;}
.inv-login:not(.dark) .neb-4{width:600px;height:600px;top:-10%;right:20%;bottom:auto;
  background:radial-gradient(circle,rgba(var(--v5-primary-rgb),0.08),rgba(var(--v5-cyan-rgb),0.04),transparent 70%);}

.inv-login .shooting-star{position:absolute;width:80px;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0.6),transparent);
  transform:rotate(35deg);animation:inv-shoot 5s ease-in-out infinite;opacity:0;}
.inv-login .shooting-star:nth-child(6){animation-delay:3s;top:25%;left:65%;width:55px;transform:rotate(40deg);}
@keyframes inv-shoot{0%{opacity:0;transform:rotate(35deg) translateX(0)}3%{opacity:0.7}12%{opacity:0;transform:rotate(35deg) translateX(-350px)}100%{opacity:0}}

.inv-login .particle{position:absolute;width:var(--sz,4px);height:var(--sz,4px);background:var(--pc,var(--primary));
  border-radius:50%;opacity:0;animation:inv-floatup var(--fd,9s) ease-in-out infinite;animation-delay:var(--fdl,0s);}
@keyframes inv-floatup{0%{opacity:0;transform:translateY(100vh) scale(0)}10%{opacity:.4}90%{opacity:.4}100%{opacity:0;transform:translateY(-80px) scale(1)}}

/* ===== WARP CANVAS ===== */
.inv-login .warp-canvas{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;}
.inv-login .warp-canvas.active{opacity:1;}

/* ===== THEME TOGGLE ===== */
.inv-login .pill{display:flex;background:var(--surface);backdrop-filter:blur(8px);border:1px solid var(--glass-border);
  border-radius:999px;padding:2px;position:absolute;top:1.5rem;right:1.5rem;z-index:20;}
.inv-login .pill button{padding:.22rem .65rem;border-radius:999px;border:none;background:transparent;
  color:var(--text-muted);cursor:pointer;font-size:.6rem;font-weight:600;font-family:inherit;
  transition:all .3s cubic-bezier(.4,0,.2,1);}
.inv-login .pill button.on{background:var(--primary);color:white;box-shadow:var(--glow-sm);}

/* ===== THEME FADE ===== */
.inv-login .theme-fade{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0;
  transition:opacity .4s cubic-bezier(.4,0,.2,1);}
.inv-login .theme-fade.in{opacity:1;}

/* ===== LOGIN CARD ===== */
.inv-login .login-card{
  width:400px;backdrop-filter:blur(30px) saturate(1.5);-webkit-backdrop-filter:blur(30px) saturate(1.5);
  border-radius:28px;padding:2.5rem 2.5rem 2rem;background:var(--glass-strong);
  border:1px solid var(--glass-border);
  box-shadow:0 12px 48px rgba(0,0,0,0.08),inset 0 0 0 1px rgba(255,255,255,0.18);
  animation:inv-cardIn 1s cubic-bezier(.16,1,.3,1) .3s both;position:relative;z-index:5;
}
.inv-login:not(.dark) .login-card{background:rgba(255,255,255,0.82);}
.inv-login.dark .login-card{box-shadow:0 12px 48px rgba(0,0,0,0.6),var(--glow-md),inset 0 0 0 1px rgba(var(--v5-primary-rgb),0.06);}
@keyframes inv-cardIn{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}

/* Orbital decoration */
.inv-login .login-orbit{width:80px;height:80px;margin:0 auto 1rem;position:relative;animation:inv-logoIn 1.2s cubic-bezier(.16,1,.3,1) .4s both;}
.inv-login .orbit-core{position:absolute;inset:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--cyan));
  box-shadow:0 0 30px var(--primary-glow),0 0 60px rgba(var(--v5-cyan-rgb),0.15);
  animation:inv-corePulse 3s ease-in-out infinite;}
@keyframes inv-corePulse{0%,100%{box-shadow:0 0 30px var(--primary-glow),0 0 60px rgba(var(--v5-cyan-rgb),0.15)}
  50%{box-shadow:0 0 40px var(--primary-glow),0 0 80px rgba(var(--v5-cyan-rgb),0.25)}}
.inv-login .orbit-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid transparent;
  border-top-color:var(--primary);border-right-color:var(--cyan);
  animation:inv-orbitSpin 4s linear infinite;opacity:.6;}
.inv-login .orbit-ring-2{position:absolute;inset:6px;border-radius:50%;border:1px solid transparent;
  border-bottom-color:var(--pink);border-left-color:var(--primary-light);
  animation:inv-orbitSpin 6s linear infinite reverse;opacity:.4;}
@keyframes inv-orbitSpin{to{transform:rotate(360deg)}}
.inv-login .orbit-dot{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--cyan);
  top:-1px;left:50%;margin-left:-3px;box-shadow:0 0 10px var(--cyan-glow);
  animation:inv-orbitSpin 4s linear infinite;transform-origin:3px 41px;}

/* Fail shake */
@keyframes inv-denied{
  0%{transform:scale(1.1);box-shadow:0 0 60px rgba(var(--v5-red-rgb),0.4),0 0 0 2px rgba(var(--v5-red-rgb),0.5),inset 0 0 30px rgba(var(--v5-red-rgb),0.05)}
  18%{transform:scale(1) translateX(-6px)}
  36%{transform:scale(1) translateX(5px)}
  52%{transform:scale(1) translateX(-4px)}
  66%{transform:scale(1) translateX(3px)}
  78%{transform:scale(1) translateX(-1px)}
  100%{transform:scale(1) translateX(0);box-shadow:none}
}
.inv-login .login-card.denied{animation:inv-denied .55s cubic-bezier(.36,.07,.19,.97) both;}

/* Logo */
.inv-login .logo{text-align:center;margin-bottom:.15rem;animation:inv-logoIn 1.2s cubic-bezier(.16,1,.3,1) .5s both;}
.inv-login .logo h1{font-size:1.8rem;font-weight:900;letter-spacing:-.04em;
  background:linear-gradient(135deg,var(--primary),var(--cyan) 60%,var(--pink));
  background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;animation:inv-gshift 4s ease-in-out infinite;}
@keyframes inv-logoIn{from{opacity:0;transform:translateY(-20px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes inv-gshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

.inv-login .login-sub{text-align:center;font-size:.78rem;color:var(--text-muted);margin-bottom:1.8rem;animation:inv-fadeIn .8s .7s both;}
@keyframes inv-fadeIn{from{opacity:0}to{opacity:1}}

/* Form groups */
.inv-login .fg{margin-bottom:1rem;animation:inv-fgIn .6s cubic-bezier(.16,1,.3,1) both;}
.inv-login .fg:nth-child(1){animation-delay:.8s}
.inv-login .fg:nth-child(2){animation-delay:.9s}
@keyframes inv-fgIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}}

/* Input with icon */
.inv-login .fi-wrap{position:relative;display:flex;align-items:center;}
.inv-login .fi-icon{position:absolute;left:14px;color:var(--text-muted);pointer-events:none;transition:color .3s;flex-shrink:0;}
.inv-login .fi-wrap:focus-within .fi-icon{color:var(--primary);}
.inv-login .fi{width:100%;height:48px;padding:0 1rem 0 2.6rem;border:1.5px solid var(--border);border-radius:14px;
  background:var(--surface);color:var(--text);font-size:.875rem;font-family:inherit;outline:none;
  backdrop-filter:blur(8px);transition:all .3s cubic-bezier(.4,0,.2,1);}
.inv-login:not(.dark) input.fi,
.inv-login:not(.dark) input.fi:focus,
.inv-login:not(.dark) input.fi:active,
.inv-login:not(.dark) input.fi:hover{
  background-color:#ffffff !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-color:rgba(var(--v5-primary-rgb),0.18) !important;
  color:#0f0e1a !important;
}
.inv-login:not(.dark) input.fi:-webkit-autofill,
.inv-login:not(.dark) input.fi:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #ffffff inset !important;
  -webkit-text-fill-color:#0f0e1a !important;
  background-color:#ffffff !important;
}
.inv-login .fi::placeholder{color:var(--text-muted);font-weight:400;}
.inv-login .fi:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow),var(--glow-sm);}
.inv-login .fi.error{border-color:rgba(var(--v5-red-rgb),0.4) !important;box-shadow:0 0 12px rgba(var(--v5-red-rgb),0.12) !important;}
.inv-login .pw-w .fi{padding-right:2.8rem;}
.inv-login .pw-w{position:relative;display:flex;align-items:center;}
.inv-login .pw-b{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;
  color:var(--text-muted);cursor:pointer;padding:4px;transition:color .2s;}
.inv-login .pw-b:hover{color:var(--primary);}

/* Divider */
.inv-login .login-divider{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0;animation:inv-fgIn .6s cubic-bezier(.16,1,.3,1) 1s both;}
.inv-login .login-divider::before,.inv-login .login-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.inv-login .login-divider span{font-size:.6rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;}

/* Error message */
.inv-login .err-msg{font-size:.72rem;color:var(--red);text-align:center;margin-top:.75rem;
  opacity:0;transform:translateY(-5px);transition:opacity .4s,transform .4s;}
.inv-login .err-msg.show{opacity:1;transform:translateY(0);}

/* Launch button */
.inv-login .lbtn{width:100%;height:50px;border:none;border-radius:14px;font-size:.9rem;font-weight:700;
  font-family:inherit;color:white;cursor:pointer;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  background:linear-gradient(135deg,var(--primary),var(--cyan));
  box-shadow:0 4px 20px var(--primary-glow);transition:all .4s cubic-bezier(.4,0,.2,1);
  animation:inv-fgIn .6s cubic-bezier(.16,1,.3,1) 1.1s both;}
.inv-login .lbtn:hover{transform:translateY(-2px);box-shadow:var(--glow-lg),0 8px 30px var(--primary-glow);}
.inv-login .lbtn:active{transform:translateY(0) scale(.98);}
.inv-login .lbtn:disabled{opacity:.7;cursor:not-allowed;transform:none;}
.inv-login .lbtn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:inv-shimmer 3s ease-in-out infinite;}
@keyframes inv-shimmer{0%{left:-100%}50%{left:100%}100%{left:100%}}

/* Ripple */
.inv-login .rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);animation:inv-ripX .6s ease-out;pointer-events:none;}
@keyframes inv-ripX{to{transform:scale(4);opacity:0}}

/* Spinner */
.inv-login .spinner{display:inline-block;width:20px;height:20px;border:2.5px solid rgba(255,255,255,.3);
  border-top-color:white;border-radius:50%;animation:inv-spin .6s linear infinite;}
@keyframes inv-spin{to{transform:rotate(360deg)}}

/* Footer */
.inv-login .login-ft{text-align:center;margin-top:1.25rem;font-size:.65rem;color:var(--text-muted);animation:inv-fadeIn .8s 1.2s both;letter-spacing:.02em;}
