:root {
    color-scheme: light;
    --ink: #24343b;
    --muted: #65777b;
    --paper: #fffefa;
    --teal: #176b68;
    --teal-deep: #105553;
    --error-bg: #fff1ed;
    --error-ink: #873d31;
    font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
    color: var(--ink);
}

* { box-sizing: border-box; }

body {
    min-width: 320px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    background:
        radial-gradient(ellipse at 14% 12%, rgba(191, 219, 207, .48), transparent 37%),
        linear-gradient(145deg, #eef4f0 0%, #e8efec 48%, #f4f0e8 100%);
}

body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    content: "";
    background-image: repeating-linear-gradient(0deg, transparent 0 4px, rgba(44, 76, 68, .018) 5px);
    pointer-events: none;
}

.recovery-shell {
    width: min(100% - 36px, 486px);
    margin: 0 auto;
    padding: clamp(32px, 8vh, 82px) 0 30px;
}

.recovery-card {
    position: relative;
    padding: clamp(28px, 6vw, 48px);
    border: 1px solid rgba(185, 205, 197, .8);
    border-radius: 19px;
    background: var(--paper);
    box-shadow: 0 20px 56px rgba(40, 66, 59, .10), 0 2px 8px rgba(40, 66, 59, .04);
    animation: arrive .48s ease-out both;
}

.brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 34px;
    padding: 8px 12px;
    border: 1px solid #e4ece7;
    border-radius: 10px;
    background: #fff;
}

.brand img {
    display: block;
    width: auto;
    height: 35px;
    max-width: 180px;
    object-fit: contain;
}

.eyebrow {
    margin: 0 0 10px;
    color: var(--teal);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
}

h1 {
    margin: 0;
    font-size: clamp(1.75rem, 7vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.18;
}

.intro {
    margin: 14px 0 25px;
    color: var(--muted);
    font-size: .98rem;
    line-height: 1.65;
}

.field { margin: 0 0 19px; }

label {
    display: block;
    margin-bottom: 8px;
    color: #31484b;
    font-size: .91rem;
    font-weight: 600;
}

input[type="email"],
input[type="password"] {
    display: block;
    width: 100%;
    min-height: 51px;
    padding: 12px 14px;
    border: 1px solid #bdceca;
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    transition: border-color .18s ease, box-shadow .18s ease;
}

input:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 3px solid rgba(38, 128, 119, .28);
    outline-offset: 3px;
}

input:focus-visible {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(38, 128, 119, .10);
}

.field-help {
    margin: 7px 0 0;
    color: var(--muted);
    font-size: .82rem;
}

.primary-button {
    display: inline-flex;
    width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border: 1px solid var(--teal);
    border-radius: 8px;
    background: var(--teal);
    color: #fff;
    font: inherit;
    font-size: .96rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, transform .18s ease;
}

.primary-button:hover {
    border-color: var(--teal-deep);
    background: var(--teal-deep);
    transform: translateY(-1px);
}

.button-link { margin-top: 2px; }

.back-link {
    display: inline-block;
    margin-top: 21px;
    color: var(--teal);
    font-size: .91rem;
    font-weight: 600;
    text-decoration: none;
}

.back-link:hover { text-decoration: underline; }

.privacy-note {
    margin: 28px 0 0;
    padding-top: 17px;
    border-top: 1px solid #e8eeea;
    color: #7b8988;
    font-size: .78rem;
    line-height: 1.5;
}

.message {
    margin: 0 0 20px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: .91rem;
    line-height: 1.5;
}

.message.error {
    border: 1px solid #f0cec5;
    background: var(--error-bg);
    color: var(--error-ink);
}

[hidden] { display: none !important; }
[dir="rtl"] { text-align: right; }
[dir="rtl"] .eyebrow { letter-spacing: 0; }

@keyframes arrive {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 480px) {
    .recovery-shell { width: min(100% - 24px, 486px); padding-top: 22px; }
    .recovery-card { padding: 27px 22px; border-radius: 15px; }
    .brand { margin-bottom: 29px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}