*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  background:#000;
  display:grid;place-items:center;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

.aurora{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.aurora::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 60% at 50% 120%,rgba(20,20,30,.8),transparent);
  z-index:1;
}
.streak{position:absolute;border-radius:50%;mix-blend-mode:screen;}

.s1{
  width:900px;height:280px;
  background:radial-gradient(ellipse,rgba(220,60,30,.75) 0%,rgba(200,40,10,.3) 50%,transparent 75%);
  filter:blur(55px);
  right:-100px;top:40%;
  animation:drift1 18s linear infinite;
}
.s2{
  width:700px;height:160px;
  background:radial-gradient(ellipse,rgba(230,140,20,.7) 0%,rgba(200,100,0,.3) 50%,transparent 75%);
  filter:blur(45px);
  right:0;top:52%;
  animation:drift2 22s linear infinite;
}
.s3{
  width:800px;height:200px;
  background:radial-gradient(ellipse,rgba(40,190,120,.65) 0%,rgba(20,160,90,.25) 55%,transparent 80%);
  filter:blur(50px);
  right:-60px;top:62%;
  animation:drift3 25s linear infinite;
}
.s4{
  width:600px;height:140px;
  background:radial-gradient(ellipse,rgba(30,150,220,.6) 0%,rgba(10,100,200,.25) 55%,transparent 80%);
  filter:blur(40px);
  right:20px;top:72%;
  animation:drift4 20s linear infinite;
}
.s5{
  width:500px;height:220px;
  background:radial-gradient(ellipse,rgba(160,30,180,.55) 0%,rgba(120,10,140,.2) 55%,transparent 80%);
  filter:blur(60px);
  right:-80px;top:30%;
  animation:drift5 30s linear infinite;
}
.s6{
  width:600px;height:30px;
  background:linear-gradient(90deg,transparent,rgba(120,180,255,.5),rgba(200,240,255,.6),rgba(120,180,255,.3),transparent);
  filter:blur(8px);
  left:-150px;top:58%;
  animation:driftleft 28s linear infinite;
}
.s7{
  width:400px;height:14px;
  background:linear-gradient(90deg,transparent,rgba(255,80,80,.4),rgba(100,255,180,.4),transparent);
  filter:blur(6px);
  left:-80px;top:60%;
  animation:driftleft2 24s linear infinite;
}
.s8{
  width:700px;height:400px;
  background:radial-gradient(ellipse,rgba(180,60,20,.18) 0%,transparent 65%);
  filter:blur(80px);
  left:30%;top:30%;
  animation:drift2 35s linear infinite;
}

@keyframes drift1{
  0%{transform:translateY(0) translateX(0) scaleX(1);}
  40%{transform:translateY(-80px) translateX(50px) scaleX(1.12);}
  70%{transform:translateY(-30px) translateX(20px) scaleX(1.05);}
  100%{transform:translateY(0) translateX(0) scaleX(1);}}
@keyframes drift2{
  0%{transform:translateY(0) scaleX(1);}
  35%{transform:translateY(70px) scaleX(.9);}
  65%{transform:translateY(30px) scaleX(1.06);}
  100%{transform:translateY(0) scaleX(1);}}
@keyframes drift3{
  0%{transform:translateY(0) scaleX(1) rotate(0deg);}
  30%{transform:translateY(-60px) scaleX(1.1) rotate(-3deg);}
  65%{transform:translateY(-20px) scaleX(.96) rotate(1deg);}
  100%{transform:translateY(0) scaleX(1) rotate(0deg);}}
@keyframes drift4{
  0%{transform:translateY(0) scaleX(1);}
  40%{transform:translateY(-90px) scaleX(1.18);}
  70%{transform:translateY(-40px) scaleX(1.05);}
  100%{transform:translateY(0) scaleX(1);}}
@keyframes drift5{
  0%{transform:translateX(0) translateY(0) scaleX(1);}
  35%{transform:translateX(-60px) translateY(80px) scaleX(1.12);}
  65%{transform:translateX(-20px) translateY(30px) scaleX(0.95);}
  100%{transform:translateX(0) translateY(0) scaleX(1);}}
@keyframes driftleft{
  0%{transform:rotate(-8deg) scaleX(1) translateX(0);opacity:.65;}
  40%{transform:rotate(-4deg) scaleX(1.4) translateX(80px);opacity:.35;}
  70%{transform:rotate(-7deg) scaleX(1.15) translateX(40px);opacity:.55;}
  100%{transform:rotate(-8deg) scaleX(1) translateX(0);opacity:.65;}}
@keyframes driftleft2{
  0%{transform:rotate(-6deg) scaleX(1) translateX(0);opacity:.45;}
  45%{transform:rotate(-10deg) scaleX(1.5) translateX(60px);opacity:.25;}
  70%{transform:rotate(-7deg) scaleX(1.2) translateX(30px);opacity:.38;}
  100%{transform:rotate(-6deg) scaleX(1) translateX(0);opacity:.45;}}

.card{
  position:relative;z-index:2;
  background:rgba(28,28,32,0.88);
  backdrop-filter:blur(28px) saturate(1.4);
  -webkit-backdrop-filter:blur(28px) saturate(1.4);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  width:440px;max-width:96vw;
  padding:50px 40px 48px;
  box-shadow:0 40px 100px rgba(0,0,0,.6), 0 0 0 0.5px rgba(255,255,255,.06);
}

.logo-wrap{
  width:96px;height:96px;border-radius:50%;overflow:hidden;
  margin:0 auto 30px;background:#fff;
  box-shadow:0 4px 24px rgba(0,0,0,.35);
}
.logo-wrap img{width:100%;height:100%;object-fit:cover;object-position:center 28%;}

.heading{font-size:24px;font-weight:800;color:#fff;letter-spacing:-.5px;margin-bottom:8px;text-align:center;}
.subhead{font-size:13.5px;color:rgba(255,255,255,.38);margin-bottom:34px;text-align:center;}

.fields{display:flex;flex-direction:column;gap:14px;}
.field{
  position:relative;display:flex;align-items:center;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;overflow:hidden;
  transition:border-color .15s;
}
.field:focus-within{border-color:rgba(79,178,134,.55);}
.field .fi{
  width:48px;display:grid;place-items:center;
  color:rgba(255,255,255,.3);flex:none;
}
.field .fi svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;}
.field input{
  flex:1;background:none;border:none;outline:none;
  color:#fff;font-family:inherit;font-size:15px;padding:16px 14px 16px 0;
  line-height:1;
}
.field input::placeholder{color:rgba(255,255,255,.28);}
.field .toggle{
  width:44px;display:grid;place-items:center;
  color:rgba(255,255,255,.3);cursor:pointer;flex:none;background:none;border:none;
}
.field .toggle:hover{color:rgba(255,255,255,.6);}
.field .toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;}

.forgot{text-align:center;margin-top:10px;}
.forgot a{font-size:13px;color:rgba(79,178,134,.8);text-decoration:none;font-weight:500;}
.forgot a:hover{color:#4fb286;}

.btn-primary{
  width:100%;margin-top:28px;
  padding:16px;border:none;border-radius:12px;
  background:#fff;color:#111;
  font-family:inherit;font-size:15.5px;font-weight:700;
  cursor:pointer;letter-spacing:-.1px;
  transition:filter .14s, transform .1s;
}
.btn-primary:hover{filter:brightness(.94);}
.btn-primary:active{transform:scale(.99);}
.btn-primary:disabled{opacity:.6;cursor:default;filter:none;transform:none;}

.error-msg{
  min-height:18px;
  margin-top:13px;
  font-size:12.5px;
  color:#e07070;
  text-align:center;
}