auth.css

.auth-screen{
  width:100vw;height:100vh;display:grid;place-items:center;padding:24px;
  background:
    radial-gradient(circle at 15% 15%,rgba(156,91,255,.34),transparent 30%),
    radial-gradient(circle at 85% 85%,rgba(92,43,150,.28),transparent 34%),
    linear-gradient(145deg,#0d0713,#170b23);
}
.auth-card{
  width:min(420px,100%);padding:30px;border:1px solid rgba(255,255,255,.09);border-radius:24px;
  background:rgba(35,19,51,.82);box-shadow:0 28px 90px rgba(0,0,0,.46);backdrop-filter:blur(26px)
}
.auth-brand{
  width:58px;height:58px;margin:0 auto 12px;display:grid;place-items:center;border-radius:19px;
  background:linear-gradient(145deg,#8d5cff,#c177ff);color:white;font-size:31px;font-weight:850;
  box-shadow:0 15px 40px rgba(145,83,230,.35)
}
.auth-card h1{margin:0;text-align:center;font-size:29px}
.auth-card>p{margin:5px 0 22px;text-align:center;color:#b4a8c3}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:18px;border-radius:12px;background:rgba(0,0,0,.2)}
.auth-tabs button{border:0;border-radius:9px;padding:9px;background:transparent;color:#a99bb8;cursor:pointer;font-weight:700}
.auth-tabs button.active{background:rgba(155,108,255,.2);color:white}
#authForm{display:grid;gap:14px}
#authForm label{display:grid;gap:7px;color:#c6bad1;font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.05em}
#authForm input{width:100%;height:44px;border:1px solid rgba(255,255,255,.08);border-radius:11px;outline:0;padding:0 12px;background:rgba(0,0,0,.2);color:white}
#authForm input:focus{border-color:rgba(177,125,255,.6);box-shadow:0 0 0 3px rgba(155,108,255,.08)}
.auth-error{min-height:18px;color:#ff8ca4;font-size:12px;line-height:1.35}
.auth-submit{height:44px;border:0;border-radius:11px;background:linear-gradient(135deg,#8d5cff,#c177ff);color:white;cursor:pointer;font-weight:750}
.auth-submit:hover{filter:brightness(1.08)}
.auth-submit:disabled{cursor:not-allowed;opacity:.55}
.auth-card .auth-note{margin:16px 0 0;font-size:11px;color:#8f819d}