* { box-sizing: border-box; }
:root {
    --primary: #5c55d4;
    --primary-dark: #423ba8;
    --ink: #12345b;
    --muted: #66758b;
    --border: #dbe2ef;
}
body {
    margin: 0;
    min-height: 100vh;
    padding: 16px;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 15% 10%, rgba(102, 95, 216, .15), transparent 28rem),
        #f5f6fa;
}
.recovery-page {
    flex: 1;
    width: 100%;
    display: grid;
    place-items: center;
}
.recovery-card {
    width: min(100%, 440px);
    padding: 30px;
    background: #fff;
    border: 1px solid rgba(219, 226, 239, .9);
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(27, 43, 77, .11);
}
.recovery-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.recovery-logo { width: 48px; height: 48px; object-fit: contain; }
.recovery-app { margin: 0; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.recovery-title { margin: 4px 0 0; font-size: 22px; }
.recovery-copy { margin: 0 0 22px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.recovery-label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; }
.recovery-input {
    width: 100%;
    min-height: 46px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #aab5c7;
    border-radius: 8px;
    background: #fff;
    font-size: 16px;
}
.recovery-input:focus { outline: 3px solid rgba(92, 85, 212, .18); border-color: var(--primary); }
.recovery-button {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(135deg, #817bea, var(--primary) 70%);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
}
.recovery-message { margin: 0 0 20px; padding: 13px 14px; border-radius: 9px; font-size: 14px; line-height: 1.45; }
.recovery-message.success { color: #087443; background: #eaf8f1; border: 1px solid #a8dfc4; }
.recovery-message.error { color: #a62222; background: #fff0f0; border: 1px solid #f0b1b1; }
.recovery-back { display: block; margin-top: 18px; color: var(--primary-dark); text-align: center; font-size: 14px; font-weight: 700; text-decoration: none; }
.recovery-footer { padding: 14px 0 2px; color: #315177; text-align: center; font-size: 12px; }
@media (max-width: 600px) {
    body { padding: 10px; }
    .recovery-card { padding: 24px 20px; border-radius: 14px; }
    .recovery-title { font-size: 20px; }
}