* {
box-sizing: border-box;
}
html,
body {
margin:0;
min-height:100%;
font-family:Inter, Arial, sans-serif;
background:
radial-gradient(
circle at top,
#12345f 0%,
#07111f 45%,
#030812 100%
);
color:#eef4ff;
}
.container {
width:100%;
max-width:1200px;
margin:0 auto;
padding:0 25px;
}
.header {
height:90px;
display:flex;
align-items:center;
}
.logo {
display:flex;
align-items:center;
gap:15px;
text-decoration:none;
color:white;
}
.logo-icon img {
width:58px;
height:58px;
object-fit:contain;
}
.logo-text h3 {
margin:0;
font-size:24px;
letter-spacing:1px;
}
.logo-text span {
color:#8ca5ca;
font-size:13px;
}
main {
min-height:calc(100vh - 150px);
display:flex;
justify-content:center;
align-items:center;
}
.forgot-wrapper {
width:100%;
display:flex;
justify-content:center;
padding:40px 20px;
}
.forgot-modal {
width:700px;
max-width:100%;
padding:42px;
border-radius:22px;
background:
linear-gradient(
180deg,
#08182d 0%,
#061120 100%
);
border:1px solid rgba(56,116,203,.35);
box-shadow:
0 30px 70px rgba(0,0,0,.65),
inset 0 1px rgba(255,255,255,.05);
backdrop-filter:blur(20px);
}
.forgot-modal h1 {
margin:0 0 35px;
font-size:34px;
font-weight:700;
}
.steps {
display:flex;
align-items:center;
justify-content:center;
margin-bottom:45px;
}
.line {
width:90px;
height:2px;
background:#26456e;
}
.step {
display:flex;
flex-direction:column;
align-items:center;
color:#8093b4;
}
.step span {
width:52px;
height:52px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
border:2px solid #345683;
font-weight:700;
}
.step p {
margin:10px 0 0;
font-size:14px;
}
.step.active {
color:white;
}
.step.active span {
border-color:#4b8fff;
background:
radial-gradient(
circle,
#123a73 0%,
#08192d 80%
);
box-shadow:
0 0 10px rgba(57,132,255,.5),
0 0 25px rgba(57,132,255,.25);
}
.description {
color:#a7b9d4;
line-height:1.7;
margin-bottom:25px;
font-size:17px;
}
.input {
height:64px;
display:flex;
align-items:center;
padding:0 22px;
border-radius:15px;
background:#091728;
border:1px solid #224d86;
}
.input svg {
color:#6f9de5;
}
.input:focus-within {
border-color:#58a4ff;
box-shadow:
0 0 25px rgba(54,129,255,.2);
}
.input input {
width:100%;
margin-left:15px;
background:none;
border:none;
outline:none;
color:white;
font-size:18px;
}
.input input::placeholder {
color:#7388a8;
}
.buttons {
display:flex;
gap:20px;
margin-top:35px;
}
.btn {
flex:1;
height:58px;
border-radius:14px;
display:flex;
justify-content:center;
align-items:center;
text-decoration:none;
font-size:16px;
cursor:pointer;
transition:.25s;
}
.btn-back {
background:#0a1b31;
border:1px solid #24446d;
color:white;
}
.btn-back:hover {
background:#102542;
}
.btn-send {
border:none;
color:white;
font-weight:600;
background:
linear-gradient(
90deg,
#1467ff,
#2f8dff
);
box-shadow:
0 10px 35px rgba(37,117,255,.35);
}
.btn-send:hover {
transform:translateY(-2px);
box-shadow:
0 18px 40px rgba(45,128,255,.45);
}
.forgot-alert {
padding:15px;
border-radius:12px;
margin-bottom:20px;
}
.forgot-alert--error {
background:#35151b;
border:1px solid #8e3040;
color:#ffb4be;
}
.forgot-success {
text-align:center;
}
.success-icon {
width:70px;
height:70px;
margin:0 auto 20px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#0d3d2a;
color:#5cffb0;
font-size:40px;
}
.forgot-success h2 {
margin:0 0 15px;
font-size:28px;
}
.forgot-success p {
color:#a7b9d4;
line-height:1.6;
}
.security {
margin-top:30px;
display:flex;
justify-content:center;
align-items:center;
gap:10px;
text-align:center;
color:#6f89ad;
font-size:14px;
}
.security svg {
color:#4c8cff;
}
.footer {
height:60px;
display:flex;
align-items:center;
color:#7185a5;
font-size:14px;
}
.footer p {
margin:0;
}
@media(max-width:700px) {
.forgot-modal {
padding:25px;
}
.forgot-modal h1 {
font-size:26px;
}
.steps {
transform:scale(.85);
}
.line {
width:40px;
}
.buttons {
flex-direction:column;
}
}