.authPage{
min-height:100vh;
width:100%;
display:flex;
align-items:center;
justify-content:center;
padding:30px;
position:relative;
overflow:hidden;
background:radial-gradient(circle at 15% 20%,rgba(34,197,94,.16),transparent 35%),radial-gradient(circle at 85% 80%,rgba(59,130,246,.12),transparent 35%),linear-gradient(135deg,#07110d 0%,#0b1914 50%,#06100c 100%);
}
.authPage::before{
content:"";
position:absolute;
width:600px;
height:600px;
top:-300px;
right:-200px;
border-radius:50%;
background:rgba(34,197,94,.08);
filter:blur(80px);
pointer-events:none;
}
.authPage::after{
content:"";
position:absolute;
width:500px;
height:500px;
bottom:-250px;
left:-200px;
border-radius:50%;
background:rgba(16,185,129,.08);
filter:blur(90px);
pointer-events:none;
}
.authCard{
width:100%;
max-width:430px;
padding:42px;
position:relative;
z-index:1;
border:1px solid rgba(255,255,255,.12);
border-radius:28px;
background:rgba(255,255,255,.075);
backdrop-filter:blur(28px);
-webkit-backdrop-filter:blur(28px);
box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
color:#fff;
animation:authCardShow .5s ease-out;
}
.authCardRegister{
max-width:460px;
}
@keyframes authCardShow{
from{
opacity:0;
transform:translateY(25px) scale(.97);
}
to{
opacity:1;
transform:translateY(0) scale(1);
}
}
.authLogo{
width:76px;
height:76px;
margin:0 auto 22px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid rgba(34,197,94,.3);
border-radius:22px;
background:rgba(34,197,94,.1);
color:#4ade80;
font-size:32px;
box-shadow:0 10px 35px rgba(34,197,94,.12);
}
.authTitle{
margin:0;
text-align:center;
font-size:29px;
line-height:1.2;
font-weight:700;
letter-spacing:-.5px;
}
.authSubtitle{
margin:10px 0 34px;
text-align:center;
color:rgba(255,255,255,.55);
font-size:14px;
}
.authField{
margin-bottom:21px;
}
.authField label{
display:block;
margin-bottom:9px;
color:rgba(255,255,255,.82);
font-size:14px;
font-weight:600;
}
.inputWrapper{
position:relative;
}
.inputWrapper i{
position:absolute;
left:17px;
top:50%;
transform:translateY(-50%);
color:rgba(74,222,128,.85);
font-size:15px;
pointer-events:none;
transition:.25s;
}
.inputWrapper input{
box-sizing:border-box;
width:100%;
height:54px;
padding:0 17px 0 48px;
border:1px solid rgba(255,255,255,.11);
border-radius:15px;
outline:none;
background:rgba(255,255,255,.065);
color:#fff;
font-family:inherit;
font-size:15px;
transition:.25s;
}
.inputWrapper input::placeholder{
color:rgba(255,255,255,.32);
}
.inputWrapper input:hover{
border-color:rgba(255,255,255,.2);
background:rgba(255,255,255,.085);
}
.inputWrapper input:focus{
border-color:rgba(74,222,128,.65);
background:rgba(255,255,255,.1);
box-shadow:0 0 0 3px rgba(34,197,94,.08),0 8px 25px rgba(0,0,0,.12);
}
.inputWrapper:focus-within i{
color:#4ade80;
}
.authError{
margin-top:7px;
padding-left:3px;
color:#f87171;
font-size:13px;
}
.authButton{
width:100%;
height:54px;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
border:0;
border-radius:15px;
background:linear-gradient(135deg,#22c55e,#16a34a);
color:#06150b;
font-family:inherit;
font-size:15px;
font-weight:700;
cursor:pointer;
box-shadow:0 10px 28px rgba(34,197,94,.18);
transition:.25s;
}
.authButton i{
font-size:14px;
}
.authButton:hover{
transform:translateY(-2px);
box-shadow:0 14px 35px rgba(34,197,94,.3);
}
.authButton:active{
transform:translateY(0);
}
.authLink{
display:block;
margin-top:19px;
text-align:center;
color:#86efac;
font-size:14px;
text-decoration:none;
transition:.2s;
}
.authLink:hover{
color:#4ade80;
}
.authRegister{
margin-top:27px;
padding-top:23px;
border-top:1px solid rgba(255,255,255,.08);
text-align:center;
color:rgba(255,255,255,.52);
font-size:14px;
}
.authRegister a{
margin-left:4px;
color:#4ade80;
font-weight:600;
text-decoration:none;
transition:.2s;
}
.authRegister a:hover{
color:#86efac;
}
@media(max-width:520px){
.authPage{
padding:18px;
}
.authCard{
padding:32px 24px;
border-radius:23px;
}
.authCardRegister{
max-width:100%;
}
.authLogo{
width:68px;
height:68px;
font-size:28px;
}
.authTitle{
font-size:25px;
}
}