:root{
 --mx:50%;
 --my:50%;
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;min-height:100%;overflow:hidden}
body{
 min-height:100vh;
 background:#0a1020;
 color:#fff;
}

.login-bg{
 position:fixed;
 inset:0;
 overflow:hidden;
 background:
   radial-gradient(circle at var(--mx) var(--my),rgba(112,85,255,.18),transparent 28%),
   linear-gradient(145deg,#09101f 0%,#111a34 50%,#101633 100%);
}
.login-bg:before{
 content:"";
 position:absolute;
 inset:-40%;
 background:
   repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 46px),
   repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 46px);
 transform:perspective(700px) rotateX(66deg) translateY(24%);
 transform-origin:center;
 animation:gridMove 14s linear infinite;
}
.grid-glow{
 position:absolute;
 width:520px;height:520px;border-radius:50%;
 left:50%;top:50%;transform:translate(-50%,-50%);
 background:radial-gradient(circle,rgba(97,77,255,.22),transparent 65%);
 filter:blur(15px);
 animation:pulseGlow 5s ease-in-out infinite;
}

.orb{
 position:absolute;
 border-radius:50%;
 filter:blur(2px);
 opacity:.8;
}
.orb-1{
 width:430px;height:430px;
 background:radial-gradient(circle at 30% 30%,#6f55ff,#322b90 58%,transparent 72%);
 left:-130px;top:-120px;
 animation:floatOne 12s ease-in-out infinite;
}
.orb-2{
 width:360px;height:360px;
 background:radial-gradient(circle at 35% 35%,#274edb,#143e76 58%,transparent 74%);
 right:-100px;bottom:-90px;
 animation:floatTwo 14s ease-in-out infinite;
}
.orb-3{
 width:180px;height:180px;
 background:radial-gradient(circle,#7a62ff 0,#4034a3 55%,transparent 72%);
 right:18%;top:16%;
 opacity:.28;
 animation:floatThree 9s ease-in-out infinite;
}

.login-wrap{
 position:relative;
 z-index:5;
 min-height:100vh;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:24px;
}
.login-card{
 width:min(410px,94vw);
 position:relative;
 padding:38px 34px 34px;
 border-radius:24px;
 background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.06));
 border:1px solid rgba(255,255,255,.15);
 box-shadow:
   0 30px 80px rgba(0,0,0,.38),
   inset 0 1px 0 rgba(255,255,255,.10);
 backdrop-filter:blur(24px);
 -webkit-backdrop-filter:blur(24px);
 animation:cardIn .7s cubic-bezier(.2,.8,.2,1) both;
}
.login-card:before{
 content:"";
 position:absolute;
 inset:-1px;
 border-radius:24px;
 padding:1px;
 background:linear-gradient(130deg,rgba(130,106,255,.8),rgba(255,255,255,.08),rgba(65,130,255,.45));
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;
 mask-composite:exclude;
 pointer-events:none;
}

.brand-mark{
 width:58px;height:58px;
 margin:0 auto 30px;
 display:grid;
 place-items:center;
 border-radius:17px;
 background:linear-gradient(135deg,#7259ff,#4055e9);
 font-size:18px;
 font-weight:900;
 letter-spacing:.03em;
 box-shadow:
   0 14px 28px rgba(68,67,214,.38),
   0 0 0 8px rgba(105,83,255,.08);
 animation:logoFloat 4s ease-in-out infinite;
}

form{display:flex;flex-direction:column;gap:14px}
.field{position:relative}
.field input{
 width:100%;
 height:54px;
 border-radius:14px;
 border:1px solid rgba(255,255,255,.13);
 background:rgba(7,13,29,.48);
 color:#fff;
 outline:none;
 padding:0 58px 0 44px;
 font-size:13px;
 transition:.2s ease;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.field input::placeholder{color:rgba(226,232,255,.46)}
.field input:focus{
 border-color:rgba(129,105,255,.85);
 background:rgba(9,16,36,.62);
 box-shadow:0 0 0 4px rgba(109,84,255,.12),0 9px 22px rgba(0,0,0,.14);
}
.field-icon{
 position:absolute;
 left:16px;top:50%;
 transform:translateY(-50%);
 color:#9f92ff;
 font-size:12px;
 pointer-events:none;
}
.show-btn{
 position:absolute;
 right:10px;top:50%;
 transform:translateY(-50%);
 border:0;
 color:#c1b8ff;
 background:rgba(120,96,255,.12);
 border-radius:9px;
 padding:7px 9px;
 font-size:10px;
 font-weight:800;
 cursor:pointer;
}
.show-btn:hover{background:rgba(120,96,255,.22)}

.login-btn{
 margin-top:6px;
 height:54px;
 border:0;
 border-radius:14px;
 background:linear-gradient(135deg,#7055ef,#4258e6);
 color:#fff;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:12px;
 font-size:13px;
 font-weight:900;
 cursor:pointer;
 box-shadow:0 14px 28px rgba(48,51,176,.35);
 transition:.2s ease;
}
.login-btn:hover{
 transform:translateY(-2px);
 box-shadow:0 18px 35px rgba(48,51,176,.45);
}
.login-btn:active{transform:translateY(0)}
.arrow{font-size:18px}

.login-error{
 margin:-6px 0 16px;
 padding:10px 12px;
 border:1px solid rgba(255,102,125,.28);
 background:rgba(154,33,52,.18);
 border-radius:10px;
 text-align:center;
 color:#ffb6c1;
 font-size:11px;
 font-weight:700;
}

@keyframes cardIn{
 from{opacity:0;transform:translateY(20px) scale(.97)}
 to{opacity:1;transform:none}
}
@keyframes logoFloat{
 0%,100%{transform:translateY(0)}
 50%{transform:translateY(-7px)}
}
@keyframes gridMove{
 from{transform:perspective(700px) rotateX(66deg) translateY(24%) translateX(0)}
 to{transform:perspective(700px) rotateX(66deg) translateY(24%) translateX(46px)}
}
@keyframes pulseGlow{
 0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.92)}
 50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
}
@keyframes floatOne{
 0%,100%{transform:translate(0,0) rotate(0deg)}
 50%{transform:translate(55px,35px) rotate(12deg)}
}
@keyframes floatTwo{
 0%,100%{transform:translate(0,0)}
 50%{transform:translate(-50px,-30px)}
}
@keyframes floatThree{
 0%,100%{transform:translate(0,0) scale(1)}
 50%{transform:translate(-25px,35px) scale(1.13)}
}

@media(max-width:560px){
 .login-wrap{padding:16px}
 .login-card{padding:30px 22px 26px;border-radius:20px}
 .brand-mark{width:52px;height:52px;border-radius:15px;margin-bottom:25px}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation:none!important;transition:none!important}
}