:root{
  --bg: #150A22;
  --fg: #F4EFFF;
  --muted: #B9A9E8;
  --line: #342351;
  --btnA: #B992FF;
  --btnB: #A16CFF;
  --field: #180E29;
  --placeholder: #8D7FCC;
  --shadow: rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--fg);
  font:400 16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  background:
    radial-gradient(1100px 700px at 70% -10%, rgba(161,108,255,.22), transparent 55%),
    radial-gradient(900px 600px at 20% -10%, rgba(185,146,255,.16), transparent 55%),
    #10071A;
}
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.07;z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;}

.nav{position:sticky;top:0;z-index:10;background:rgba(15,7,26,.3);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav__container{width:min(1200px,94%);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;padding:.9rem 0}
.nav__brand img{height:40px;display:block}

.main{min-height:calc(100svh - 72px);display:grid;place-items:center;padding:clamp(40px,8vh,80px) 16px 72px}
.card{width:min(520px,94vw);padding:26px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid var(--line);box-shadow:0 30px 80px var(--shadow),inset 0 0 60px rgba(175,135,255,.06)}
.card__logo{text-align:center;margin-bottom:18px}
.card__logo img{height:62px;filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))}
.card__logo h2{margin:10px 0 0;font-size:1rem;color:#d7caff;font-weight:800;letter-spacing:.06em}

.form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:.9rem;color:var(--muted)}
.input-wrap{position:relative}

.input{
  width:100%;
  padding:14px 44px 14px 14px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:var(--field);
  color:var(--fg);
  outline:none;
  transition:border .15s ease,box-shadow .15s ease,background .15s ease;
}
.input::placeholder{color:var(--placeholder)}
.input:focus{border-color:rgba(185,146,255,.8);box-shadow:0 0 0 4px rgba(185,146,255,.14);background:#120A22}
.input:valid{border-color:rgba(185,146,255,.6)}

.input:user-invalid{
  border-color:#ff6b81;
  box-shadow:0 0 0 4px rgba(255,107,129,.15);
}
.input:user-invalid:not(:focus){
  border-color:#ff6b81;
  box-shadow:0 0 0 4px rgba(255,107,129,.15);
}

.input:-moz-ui-invalid{
  border-color:#ff6b81;
  box-shadow:0 0 0 4px rgba(255,107,129,.15);
}
.input:-moz-ui-invalid:not(:focus){
  border-color:#ff6b81;
  box-shadow:0 0 0 4px rgba(255,107,129,.15);
}

.msg{
  display:block;
  font-size:.8rem;
  color:#ff9bad;
  margin-top:6px;
  opacity:0;
  transform:translateY(-2px);
  transition:.2s;
}
.input:user-invalid~.msg{opacity:1;transform:translateY(0)}
.input:-moz-ui-invalid~.msg{opacity:1;transform:translateY(0)}

.input:-webkit-autofill,
.input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--fg);
  box-shadow:0 0 0 1000px var(--field) inset,0 0 0 0 rgba(0,0,0,0);
  border-color:rgba(185,146,255,.6);
}

.form__error{margin:4px 2px 0;padding:10px 12px;border-radius:10px;background:#2a1638;border:1px solid #573078;color:#ffb6c1;font-size:.9rem}

.eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:transparent;border:0;padding:4px;color:#9b87e6;cursor:pointer}
.eye:hover{color:#cdbdff}
.eye[aria-pressed="true"] svg{opacity:.95}

.btn{margin-top:10px;width:100%;border:0;border-radius:10px;padding:12px 14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;background:linear-gradient(90deg,var(--btnB),var(--btnA));color:#120a22;font-weight:900;letter-spacing:.04em;box-shadow:0 14px 36px rgba(161,108,255,.42);position:relative;isolation:isolate}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.7;cursor:not-allowed}
.btn__spinner{width:0;height:0;border-radius:50%;border:2px solid transparent;border-left-color:#120a22;margin-right:0;transition:width .15s ease,height .15s ease,margin-right .15s ease}
.is-loading .btn__spinner{width:16px;height:16px;margin-right:8px;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px transparent inset!important;
  -webkit-text-fill-color:white!important;
  transition:background-color 5000s ease-in-out 0s;
}
input:-webkit-autofill::first-line{
  color:#fff!important;
  font-size:1rem;
  font-family:Roboto,sans-serif;
}