@font-face{
font-family:'reg';
src:url('reg.woff2')
}
@font-face{
font-family:'bold';
src:url('bold.woff2')
}
@font-face{
font-family:'med';
src:url('med.woff2')
}
*{
outline:none;
max-width:100%;
font-family:'reg', sans-serif;
box-sizing:border-box;
margin:0;
}
html,body,main{
height:100%;
}
body{
margin:0;
background: url('bg.png')  no-repeat  fixed center center / cover;
font-size:14px;
color:#484848;
}
main{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
padding:20px;
}
.form{
background:white;
padding:60px 40px;
border-radius:16px;
width:480px;
position:relative;
box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
.header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:30px;
}
.back-btn{
font-size:24px;
color:#1a1a1a;
text-decoration:none;
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
}
.close-btn{
font-size:28px;
cursor:pointer;
color:#666;
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
transition:background 0.2s;
text-decoration:none;
}
.close-btn:hover{
background:#f0f0f0;
}
.logo-small{
width:100px;
display:flex;
justify-content:center;
}
.logo-small img{
max-height:36px;
width:auto;
}
.logo{
background:transparent;
padding:0;
border-radius:0;
width:100%;
display:flex;
flex-direction:column;
align-items:center;
margin-bottom:30px;
}
.logo img{
width:80px;
}
.text{
margin:20px 0 30px 0;
text-align:left;
}
h2{
margin-bottom:8px;
color:#1a1a1a;
font-family:'bold';
font-size:28px;
font-weight:700;
}
.subtitle{
color:#666;
font-size:16px;
display:block;
margin-top:8px;
}
.text span{
color:#666;
font-size:14px;
}
.text span a{
color:#573395;
text-decoration:none;
font-weight:600;
}
.text span a:hover{
text-decoration:underline;
}
.col{
margin:20px 0;
}
label{
display:none;
}
.input-wrapper{
position:relative;
}
.input-icon{
position:absolute;
left:16px;
top:50%;
transform:translateY(-50%);
color:#666;
font-size:18px;
}
input{
width:100%;
border:1px solid #ccc;
border-radius:8px;
padding:14px 16px;
font-size:16px;
transition:border 0.2s;
background:white;
}
input.with-icon{
padding-left:48px;
}
input:focus{
border-color:#1a1a1a;
outline:none;
}
button{
background:#0d0221;
width:100%;
border:none;
color:white;
font-family:'bold';
font-size:16px;
padding:16px;
border-radius:25px;
cursor:pointer;
margin-top:20px;
transition:background 0.2s;
font-weight:600;
}
button:hover{
background:#1a0a3a;
}
.info-box{
background:#d4f8d4;
border-radius:8px;
padding:16px;
margin-top:24px;
display:flex;
align-items:flex-start;
gap:12px;
}
.info-icon{
color:#2d7d2d;
font-size:20px;
font-weight:bold;
flex-shrink:0;
margin-top:2px;
}
.info-text{
flex:1;
}
.info-text strong{
display:block;
color:#1a1a1a;
margin-bottom:4px;
font-family:'med';
}
.info-text p{
color:#666;
font-size:14px;
line-height:1.4;
margin:0;
}
.footer{
margin-top:32px;
text-align:center;
}
.resend-link{
color:#666;
text-decoration:none;
font-size:14px;
}
.resend-link:hover{
text-decoration:underline;
color:#1a1a1a;
}
.error-message{
background:#fff0f0;
color:#d32f2f;
padding:12px 16px;
border-radius:8px;
margin-bottom:16px;
font-size:14px;
border-left:4px solid #d32f2f;
}
.col a{
color:#573395;
text-decoration:underline;
}
.links{
font-size:13px;
text-align:center;
margin-top:30px;
color:#666;
}
.links span{
display:block;
margin:8px 0;
line-height:1.5;
}
.links strong{
font-weight:600;
color:#1a1a1a;
}
.terms-footer{
margin-top:32px;
text-align:center;
font-size:13px;
color:#666;
}
.terms-footer p{
margin:8px 0;
line-height:1.5;
}
.terms-footer a{
color:#573395;
text-decoration:none;
}
.terms-footer a:hover{
text-decoration:underline;
}
@media (max-width:700px){
.form{
padding:40px 25px;
width:90%;
max-width:100%;
}
body{
background:white;
height:auto;
}
h2{
font-size:24px;
}
.links{
margin-top:24px;
text-align:center;
}
}
input.error{
border:1px solid red;
}