:root {
    --recovery-primary: #2369d8;
    --recovery-primary-dark: #174ea6;
    --recovery-text: #14213a;
    --recovery-muted: #65728b;
    --recovery-border: #cfddf4;
    --recovery-surface: #ffffff;
    --recovery-page: #eef5ff;
    --recovery-success: #147a51;
    --recovery-error: #c52b2b;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--recovery-text); }
.recovery-page { min-height: 100vh; background: radial-gradient(circle at top, #dceaff 0, var(--recovery-page) 42%, #f8fbff 100%); }
.recovery-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; }
.recovery-card { width: min(100%, 620px); padding: 30px; border: 1px solid var(--recovery-border); border-radius: 24px; background: var(--recovery-surface); box-shadow: 0 24px 70px rgba(35, 75, 135, .14); }
.recovery-back { display: inline-flex; align-items: center; gap: 8px; color: var(--recovery-primary); font-weight: 700; text-decoration: none; }
.recovery-back:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid rgba(35, 105, 216, .28); outline-offset: 2px; }
.recovery-header { text-align: center; margin: 22px 0 26px; }
.recovery-header img { width: 82px; height: 82px; object-fit: contain; border-radius: 18px; }
.recovery-header span { display: block; margin-top: 12px; color: var(--recovery-primary); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.recovery-header h1 { margin: 5px 0 8px; font-size: clamp(1.8rem, 5vw, 2.35rem); line-height: 1.1; }
.recovery-header p, .recovery-step p { margin: 0; color: var(--recovery-muted); line-height: 1.55; }
.recovery-step { margin: 0 0 18px; padding: 20px; border: 1px solid var(--recovery-border); border-radius: 18px; }
.recovery-step legend { padding: 0 8px; font-weight: 800; font-size: 1rem; }
.recovery-step legend b { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 7px; border-radius: 50%; color: #fff; background: var(--recovery-primary); }
.recovery-step label { display: block; margin: 3px 0 8px; font-weight: 700; }
.recovery-phone-row, .recovery-code-row { display: flex; align-items: stretch; gap: 10px; }
.recovery-phone-input { flex: 1; display: flex; align-items: center; min-width: 0; border: 1px solid var(--recovery-border); border-radius: 13px; background: #fff; overflow: hidden; }
.recovery-phone-input span { padding-left: 14px; color: var(--recovery-text); font-weight: 700; }
.recovery-phone-input input, .recovery-code-row input { width: 100%; min-width: 0; padding: 14px; border: 0; background: transparent; color: inherit; font: inherit; }
.recovery-code-row input { flex: 1; border: 1px solid var(--recovery-border); border-radius: 13px; font-size: 1.2rem; font-weight: 800; letter-spacing: .28em; text-align: center; }
.recovery-button { min-height: 50px; padding: 0 18px; border-radius: 13px; font: inherit; font-weight: 800; cursor: pointer; transition: .18s ease; }
.recovery-button:disabled { cursor: wait; opacity: .65; }
.recovery-primary { border: 1px solid var(--recovery-primary); color: #fff; background: var(--recovery-primary); }
.recovery-primary:hover:not(:disabled) { background: var(--recovery-primary-dark); }
.recovery-outline { border: 1px solid var(--recovery-primary); color: var(--recovery-primary); background: transparent; }
.recovery-outline:hover:not(:disabled) { color: #fff; background: var(--recovery-primary); }
.recovery-status { min-height: 24px; margin: 4px 3px 18px; font-weight: 700; line-height: 1.45; }
.recovery-status.is-success { color: var(--recovery-success); }
.recovery-status.is-error { color: var(--recovery-error); }
.recovery-status.is-pending { color: var(--recovery-primary); }
.recovery-security { display: flex; gap: 12px; align-items: flex-start; padding: 15px; border-radius: 15px; color: #28537e; background: #edf6ff; }
.recovery-security i { font-size: 1.35rem; }
.recovery-security p { margin: 0; line-height: 1.45; }

@media (max-width: 560px) {
    .recovery-card { padding: 22px 16px; border-radius: 18px; }
    .recovery-phone-row, .recovery-code-row { flex-direction: column; }
    .recovery-button { width: 100%; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --recovery-text: #eef5ff;
        --recovery-muted: #aab8cf;
        --recovery-border: #31445f;
        --recovery-surface: #101d2d;
        --recovery-page: #08121f;
        --recovery-success: #61d8a3;
        --recovery-error: #ff8c8c;
    }
    .recovery-page { background: radial-gradient(circle at top, #142b49 0, var(--recovery-page) 50%, #060d17 100%); }
    .recovery-phone-input, .recovery-code-row input { background: #142438; }
    .recovery-security { color: #b9d8f4; background: #142a42; }
}