body[data-page="login"]{
  min-height:100vh;margin:0;overflow-x:hidden;
  background:
    linear-gradient(rgba(36,49,83,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(36,49,83,.08) 1px,transparent 1px),
    radial-gradient(circle at 14% 18%,rgba(126,62,255,.18),transparent 32%),
    radial-gradient(circle at 86% 20%,rgba(20,205,255,.14),transparent 30%),
    radial-gradient(circle at 52% 100%,rgba(32,244,149,.08),transparent 32%),
    #030712;
  background-size:42px 42px,42px 42px,auto,auto,auto,auto;
}
body[data-page="login"]::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 0 43%,rgba(255,255,255,.018) 43.2% 43.5%,transparent 43.7%),
             radial-gradient(circle at center,transparent 35%,rgba(0,0,0,.45) 100%);
}
.login-bg.login-v2{min-height:100vh;display:grid;place-items:center;padding:34px;box-sizing:border-box;position:relative;overflow:hidden}
.login-v2 .login-orb{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(100px);opacity:.22;pointer-events:none}
.login-v2 .login-orb-a{background:#8638ff;left:-210px;top:-180px}
.login-v2 .login-orb-b{background:#18cfff;right:-210px;bottom:-190px}
.login-shell{
  position:relative;z-index:2;width:min(980px,96vw);min-height:590px;
  display:grid;grid-template-columns:1.08fr .92fr;
  border:1px solid rgba(105,169,255,.18);border-radius:30px;overflow:hidden;
  background:rgba(5,11,27,.82);
  box-shadow:0 36px 110px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter:blur(24px);
}
.login-showcase{
  position:relative;padding:54px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(145deg,rgba(18,35,74,.88),rgba(7,15,37,.92)),#08142c;
}
.login-showcase::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 10% 10%,rgba(137,58,255,.28),transparent 37%),
             radial-gradient(circle at 90% 74%,rgba(26,219,255,.2),transparent 33%),
             linear-gradient(130deg,transparent 0 48%,rgba(255,255,255,.025) 48.2% 48.6%,transparent 48.8%);
}
.login-showcase::after{
  content:"";position:absolute;right:-80px;bottom:-110px;width:380px;height:380px;
  border:1px solid rgba(92,218,255,.16);border-radius:50%;
  box-shadow:0 0 0 44px rgba(92,218,255,.025),0 0 0 88px rgba(142,71,255,.02);
}
.showcase-top,.showcase-bottom{position:relative;z-index:2}
.login-brand{display:flex;align-items:center;gap:15px;margin-bottom:68px}
.login-brand-mark{
  width:54px;height:54px;display:grid;place-items:center;border-radius:17px;font-size:28px;
  background:linear-gradient(145deg,rgba(132,67,255,.95),rgba(22,200,255,.9));
  box-shadow:0 14px 36px rgba(70,103,255,.26),inset 0 1px 0 rgba(255,255,255,.28);
}
.login-brand b{display:block;font-size:21px;letter-spacing:.04em}
.login-brand small{display:block;margin-top:3px;color:#84a0c9;font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:10px}
.login-access-pill{
  display:inline-flex;align-items:center;gap:9px;width:max-content;padding:9px 13px;margin-bottom:20px;
  border-radius:999px;border:1px solid rgba(48,246,151,.22);background:rgba(25,202,116,.07);
  color:#67ffa8;font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;
}
.login-access-pill i{width:8px;height:8px;border-radius:50%;background:#37f495;box-shadow:0 0 16px #37f495}
.login-showcase h2{max-width:520px;margin:0;font-size:clamp(42px,5vw,66px);line-height:.98;letter-spacing:-.055em}
.login-showcase h2 span{
  display:block;background:linear-gradient(90deg,#a45cff 0%,#45ccff 72%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.login-showcase p{max-width:500px;margin:24px 0 0;color:#aebdd5;font-size:16px;line-height:1.7}
.login-feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:42px}
.login-feature{padding:14px;border-radius:15px;background:rgba(3,10,26,.46);border:1px solid rgba(121,164,255,.11)}
.login-feature span{display:block;font-size:21px;margin-bottom:8px}
.login-feature b{display:block;font-size:12px}
.login-feature small{display:block;margin-top:3px;color:#7890b3;font-size:10px}
.showcase-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#7187a9;font-size:11px}
.showcase-bottom strong{color:#9eb3d0}
.login-card.login-card-v2{
  width:auto;padding:54px 48px;border:0;border-radius:0;
  background:linear-gradient(180deg,rgba(8,16,38,.96),rgba(4,10,25,.98));
  box-shadow:none;backdrop-filter:none;display:flex;flex-direction:column;justify-content:center;gap:0;
}
.login-card-v2 .login-mobile-brand{display:none}
.login-card-v2 .eyebrow{color:#b869ff;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:900}
.login-card-v2 h1{margin:10px 0 10px;font-size:40px;line-height:1.08;letter-spacing:-.04em}
.login-card-v2 .login-subtitle{margin:0 0 34px;color:#91a4c3;line-height:1.65}
.login-card-v2 .alert{margin-bottom:16px;padding:13px 15px;border-radius:13px;background:rgba(255,67,107,.10);border:1px solid rgba(255,77,117,.28);color:#ff9eb7}
.login-field{display:block;margin-bottom:15px}
.login-field > span{display:block;margin:0 0 8px 3px;color:#9fb1cc;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.login-input-wrap{position:relative;display:flex;align-items:center}
.login-input-icon{position:absolute;left:16px;z-index:2;color:#758aaa;font-style:normal;font-size:17px}
.login-card-v2 input{
  width:100%;height:57px;padding:0 48px;border:1px solid rgba(111,150,214,.17);border-radius:15px;
  box-sizing:border-box;background:rgba(2,8,21,.72);color:#eef5ff;outline:none;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.login-card-v2 input::placeholder{color:#637592}
.login-card-v2 input:focus{background:rgba(5,14,34,.94);border-color:rgba(112,83,255,.72);box-shadow:0 0 0 4px rgba(121,73,255,.11),0 0 28px rgba(72,113,255,.09)}
.password-toggle{
  position:absolute;right:10px;width:38px!important;height:38px!important;padding:0!important;border-radius:11px!important;
  background:rgba(255,255,255,.045)!important;color:#91a5c5!important;box-shadow:none!important;
  border:1px solid rgba(255,255,255,.06)!important;cursor:pointer;
}
.login-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:3px 2px 24px;color:#7086a8;font-size:11px}
.login-meta span:first-child{display:flex;align-items:center;gap:7px}
.login-meta span:first-child::before{content:"";width:7px;height:7px;border-radius:50%;background:#2eef91;box-shadow:0 0 13px #2eef91}
.login-submit{
  position:relative;width:100%;height:57px!important;border:0!important;border-radius:15px!important;overflow:hidden;
  background:linear-gradient(110deg,#7340ff 0%,#4b7dff 48%,#18c9ee 100%)!important;color:#fff!important;
  font-size:14px;font-weight:900;letter-spacing:.02em;box-shadow:0 15px 36px rgba(66,92,255,.28)!important;
  cursor:pointer;transition:transform .18s,box-shadow .18s,filter .18s;
}
.login-submit::before{content:"";position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);transition:transform .55s}
.login-submit:hover{transform:translateY(-2px);filter:saturate(1.12);box-shadow:0 20px 44px rgba(66,92,255,.38)!important}
.login-submit:hover::before{transform:translateX(110%)}
.login-security{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:23px;color:#667c9e;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}
@media(max-width:800px){
  .login-bg.login-v2{padding:18px}
  .login-shell{grid-template-columns:1fr;min-height:auto;width:min(480px,96vw)}
  .login-showcase{display:none}
  .login-card.login-card-v2{padding:36px 26px}
  .login-card-v2 .login-mobile-brand{display:flex;align-items:center;gap:12px;margin-bottom:34px}
  .login-card-v2 .login-mobile-brand .login-brand-mark{width:46px;height:46px;border-radius:14px;font-size:23px}
  .login-card-v2 h1{font-size:34px}
}