.recover-page { background: #ffffff; min-height: calc(100vh - 120px); padding: 40px 16px; display: flex; align-items: center; justify-content: center; }
.footer { display: none !important; }
.recover-page, .recover-page * { box-sizing: border-box; }
.recover-card {
    --green:#1a6b3c;
    --green-light:#e8f5ee;
    --dark:#0f0f0f;
    --mid:#888;
    --light:#ccc;
    --border:#e8e8e8;
    --white:#fff;
    --red:#d63f3f;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 420px;
    padding: 36px 40px 32px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(17,24,39,.08);
}
.recover-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--green); }
.recover-steps-wrap { margin-bottom: 28px; }
.recover-steps-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.recover-steps-label { font-size:11.5px; font-weight:600; color:var(--mid); letter-spacing:.02em; }
.recover-steps-label span { color:var(--dark); font-weight:700; }
.recover-steps-title { font-size:11.5px; font-weight:500; color:var(--light); }
.recover-steps-track { width:100%; height:3px; background:var(--border); border-radius:99px; overflow:hidden; }
.recover-steps-fill { height:100%; background:var(--green); border-radius:99px; transition:width .45s cubic-bezier(.4,0,.2,1); }
.recover-card-icon {
    width:42px; height:42px; background:var(--green-light); border-radius:10px;
    display:flex; align-items:center; justify-content:center; margin-bottom:18px;
}
.recover-card-icon svg { width:20px; height:20px; stroke:var(--green); }
.recover-title { font-size:22px; font-weight:700; color:var(--dark); letter-spacing:-.4px; line-height:1.2; margin-bottom:7px; }
.recover-sub { font-size:13.5px; color:var(--mid); line-height:1.65; margin-bottom:26px; }
.recover-sub strong { color:var(--dark); font-weight:600; }
.recover-alert { padding:12px 14px; border-radius:10px; font-size:13px; line-height:1.5; margin-bottom:16px; }
.recover-alert.success { background:#ecfdf3; border:1px solid #a7f3d0; color:#065f46; }
.recover-alert.error { background:#fef2f2; border:1px solid #fecaca; color:#991b1b; }
.recover-field { margin-bottom: 20px; }
.recover-field label { display:block; font-size:10.5px; font-weight:600; color:var(--mid); text-transform:uppercase; letter-spacing:1.1px; margin-bottom:8px; }
.recover-field-suffix { position:relative; }
.recover-field input {
    width:100%; border:none; border-bottom:1.5px solid var(--border); outline:none;
    padding:10px 36px 10px 0; font-size:14px; color:var(--dark); background:transparent; transition:border-color .2s;
}
.recover-field input:focus { border-bottom-color: var(--dark); }
.recover-eye-btn {
    position:absolute; right:0; top:50%; transform:translateY(-50%);
    background:none; border:none; cursor:pointer; padding:4px; color:var(--light);
}
.recover-eye-btn:hover { color:var(--mid); }
.recover-btn {
    width:100%; background:var(--dark); color:#fff; border:none; border-radius:8px; padding:13px;
    font-size:14px; font-weight:600; cursor:pointer; transition:background .2s, transform .1s;
}
.recover-btn:hover { background:#222; }
.recover-btn:active { transform:scale(.99); }
.recover-success-state { text-align:center; padding:8px 0 4px; }
.recover-success-circle {
    width:52px; height:52px; background:var(--green-light); border-radius:50%;
    display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
}
.recover-success-circle svg { width:24px; height:24px; stroke:var(--green); }
.recover-success-title { font-size:20px; font-weight:700; color:var(--dark); margin-bottom:9px; }
.recover-success-text { font-size:13.5px; color:var(--mid); line-height:1.65; margin-bottom:22px; }
.recover-back-link { text-align:center; margin-top:18px; font-size:12.5px; color:var(--mid); }
.recover-back-link a { color:var(--dark); text-decoration:none; font-weight:600; }
.recover-back-link a:hover { text-decoration:underline; }
@media (max-width: 480px) {
    .recover-card { padding: 28px 24px 24px; border-radius: 12px; }
    .recover-title { font-size: 20px; }
}