:root {
            --recovery-navy: #0f172a;
            --recovery-indigo: #312e81;
            --recovery-gold: #d4a94e;
            --recovery-text: #0f172a;
            --recovery-muted: #64748b;
            --recovery-line: #dfe6ee;
            --recovery-surface: #f6f8fb;
        }

        *, *::before, *::after { box-sizing: border-box; }

        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            overflow: hidden;
        }

        body {
            background: var(--recovery-surface);
            color: var(--recovery-text);
            font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            -webkit-font-smoothing: antialiased;
        }

        a { font: inherit; }

        .recovery-page {
            width: 100%;
            height: 100vh;
            height: 100dvh;
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(440px, .92fr);
            overflow: hidden;
        }

        .recovery-brand-panel {
            height: 100%;
            min-height: 0;
            padding: clamp(28px, 4vw, 58px);
            position: relative;
            isolation: isolate;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            background:
                radial-gradient(circle at 72% 24%, rgba(99,102,241,.26), transparent 30%),
                radial-gradient(circle at 20% 83%, rgba(212,169,78,.13), transparent 28%),
                linear-gradient(145deg, #080d18 0%, #10192b 54%, #211e53 100%);
            color: #fff;
        }

        .recovery-brand-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -3;
            opacity: .25;
            background-image:
                linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
            background-size: 64px 64px;
            mask-image: linear-gradient(to bottom, black, transparent 86%);
        }

        .recovery-brand-panel::after {
            content: '';
            width: 460px;
            height: 460px;
            position: absolute;
            right: -196px;
            bottom: -226px;
            z-index: -2;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 50%;
            box-shadow:
                0 0 0 54px rgba(255,255,255,.025),
                0 0 0 108px rgba(255,255,255,.018);
        }

        .recovery-orb {
            position: absolute;
            z-index: -1;
            border-radius: 50%;
            pointer-events: none;
            filter: blur(1px);
        }

        .recovery-orb-one {
            width: 220px;
            height: 220px;
            top: 13%;
            right: 7%;
            border: 1px solid rgba(255,255,255,.11);
            background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.01));
        }

        .recovery-orb-two {
            width: 62px;
            height: 62px;
            top: 13%;
            right: 33%;
            background: rgba(212,169,78,.13);
            box-shadow: 0 0 70px rgba(212,169,78,.16);
        }

        .recovery-brand-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .recovery-brand-signature,
        .recovery-brand-security {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: rgba(255,255,255,.72);
            font-size: .54rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
        }

        .recovery-brand-signature::before {
            content: '';
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--recovery-gold);
            box-shadow: 0 0 0 5px rgba(212,169,78,.11);
        }

        .recovery-brand-security {
            color: rgba(255,255,255,.38);
            letter-spacing: .05em;
            text-transform: none;
        }

        .recovery-brand-security i { color: #86efac; }

        .recovery-brand-content {
            width: min(540px, 100%);
            margin: auto;
            padding: clamp(28px, 5vh, 56px) 0;
            position: relative;
            text-align: center;
        }

        .recovery-logo-stage {
            width: clamp(182px, 15vw, 220px);
            height: clamp(182px, 15vw, 220px);
            margin: 0 auto;
            padding: 14px;
            position: relative;
            border: 1px solid rgba(255,255,255,.16);
            border-radius: 42px;
            background: rgba(255,255,255,.055);
            box-shadow: 0 34px 80px rgba(0,0,0,.30);
            backdrop-filter: blur(18px);
        }

        .recovery-logo-stage::before,
        .recovery-logo-stage::after {
            content: '';
            position: absolute;
            pointer-events: none;
        }

        .recovery-logo-stage::before {
            inset: -17px;
            border: 1px solid rgba(255,255,255,.06);
            border-radius: 54px;
        }

        .recovery-logo-stage::after {
            width: 46px;
            height: 2px;
            left: 50%;
            bottom: -33px;
            background: linear-gradient(90deg, transparent, var(--recovery-gold), transparent);
            transform: translateX(-50%);
        }

        .recovery-logo {
            width: 100%;
            height: 100%;
            padding: 18px;
            border-radius: 30px;
            display: grid;
            place-items: center;
            overflow: hidden;
            background: #fff;
            box-shadow: inset 0 0 0 1px rgba(15,23,42,.06), 0 18px 38px rgba(0,0,0,.18);
        }

        .recovery-logo img { width: 100%; height: 100%; object-fit: contain; }

        .recovery-brand-name {
            margin-top: 52px;
            display: block;
            color: #f0d28d;
            font-size: .56rem;
            font-weight: 850;
            letter-spacing: .22em;
            text-transform: uppercase;
        }

        .recovery-brand-content h1 {
            margin: 14px 0 0;
            color: #fff;
            font-size: clamp(1.75rem, 2.6vw, 2.75rem);
            line-height: 1.06;
            font-weight: 900;
            letter-spacing: -.045em;
        }

        .recovery-brand-content h1 span {
            display: block;
            color: rgba(255,255,255,.62);
            font-weight: 650;
        }

        .recovery-brand-content > p {
            max-width: 390px;
            margin: 14px auto 0;
            color: rgba(226,232,240,.58);
            font-size: .68rem;
            line-height: 1.65;
        }

        .recovery-brand-footer {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            color: rgba(226,232,240,.42);
            font-size: .51rem;
        }

        .recovery-brand-footer span { display: inline-flex; align-items: center; gap: 6px; }
        .recovery-brand-footer i { color: #86efac; }

        .recovery-content-panel {
            height: 100%;
            min-height: 0;
            padding: clamp(20px, 4vw, 56px);
            position: relative;
            display: grid;
            place-items: center;
            overflow: hidden;
            background:
                radial-gradient(circle at 100% 0%, rgba(99,102,241,.055), transparent 30%),
                #f8fafc;
        }

        .recovery-content-panel::before {
            content: '';
            width: 190px;
            height: 190px;
            position: absolute;
            top: -100px;
            right: -80px;
            border: 28px solid rgba(99,102,241,.035);
            border-radius: 50%;
            pointer-events: none;
        }

        .recovery-content-wrap { width: min(430px, 100%); position: relative; z-index: 1; }

        .recovery-mobile-brand {
            margin-bottom: 20px;
            display: none;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .recovery-mobile-brand > span {
            width: 45px;
            height: 45px;
            padding: 5px;
            border: 1px solid #e2e8f0;
            border-radius: 13px;
            display: grid;
            place-items: center;
            background: #fff;
            box-shadow: 0 8px 24px rgba(15,23,42,.08);
        }

        .recovery-mobile-brand img { width: 100%; height: 100%; object-fit: contain; }
        .recovery-mobile-brand strong,
        .recovery-mobile-brand small { display: block; }
        .recovery-mobile-brand strong { color: #0f172a; font-size: .75rem; font-weight: 850; }
        .recovery-mobile-brand small { margin-top: 2px; color: #b7791f; font-size: .48rem; font-weight: 800; letter-spacing: .12em; }

        .recovery-card {
            padding: clamp(22px, 3vw, 30px);
            border: 1px solid #e2e8f0;
            border-radius: 24px;
            background: rgba(255,255,255,.92);
            box-shadow: 0 24px 65px rgba(15,23,42,.11);
            backdrop-filter: blur(14px);
        }

        .recovery-icon {
            width: 56px;
            height: 56px;
            border: 1px solid #e0e7ff;
            border-radius: 17px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg,#eef2ff,#f5f3ff);
            color: #4f46e5;
            font-size: 1.18rem;
            box-shadow: 0 10px 24px rgba(79,70,229,.10);
        }

        .recovery-card-heading { margin-top: 19px; }
        .recovery-card-heading > span { display: block; color: #6366f1; font-size: .51rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
        .recovery-card-heading h2 { margin: 6px 0 0; color: #0f172a; font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 900; letter-spacing: -.04em; }
        .recovery-card-heading p { margin: 9px 0 0; color: #64748b; font-size: .64rem; line-height: 1.65; }

        .recovery-admin-notice {
            margin-top: 20px;
            padding: 13px;
            border: 1px solid #e0e7ff;
            border-radius: 15px;
            display: flex;
            align-items: center;
            gap: 11px;
            background: linear-gradient(135deg, #f8faff, #f5f3ff);
        }

        .recovery-admin-notice > span {
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            border-radius: 11px;
            display: grid;
            place-items: center;
            background: #fff;
            color: #4f46e5;
            box-shadow: 0 8px 20px rgba(79,70,229,.09);
        }

        .recovery-admin-notice strong,
        .recovery-admin-notice small { display: block; }
        .recovery-admin-notice strong { color: #1e293b; font-size: .59rem; }
        .recovery-admin-notice small { margin-top: 3px; color: #64748b; font-size: .51rem; line-height: 1.5; }

        .recovery-back-btn {
            width: 100%;
            min-height: 52px;
            margin-top: 20px;
            padding: 0 17px;
            border-radius: 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: linear-gradient(135deg, var(--recovery-navy), var(--recovery-indigo));
            color: #fff;
            text-decoration: none;
            box-shadow: 0 14px 30px rgba(49,46,129,.22);
            transition: .2s ease;
        }

        .recovery-back-btn:hover { color: #fff; box-shadow: 0 18px 36px rgba(49,46,129,.3); transform: translateY(-2px); }
        .recovery-back-btn > span { display: inline-flex; align-items: center; gap: 8px; font-size: .64rem; font-weight: 850; }
        .recovery-back-btn > i { width: 29px; height: 29px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.1); font-size: .63rem; }

        .recovery-footer {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
            color: #94a3b8;
            font-size: .49rem;
        }

        .recovery-footer span { display: inline-flex; align-items: center; gap: 5px; }

        @media (max-width: 1100px) {
            .recovery-page { grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr); }
            .recovery-brand-panel { padding-inline: 34px; }
            .recovery-logo-stage { width: 176px; height: 176px; border-radius: 38px; }
            .recovery-logo { border-radius: 27px; }
        }

        @media (max-width: 860px) {
            .recovery-page { display: block; }
            .recovery-brand-panel { display: none; }
            .recovery-content-panel { height: 100vh; height: 100dvh; padding: 20px; }
            .recovery-mobile-brand { display: flex; }
            .recovery-content-wrap { width: min(450px, 100%); }
        }

        @media (max-width: 480px) {
            .recovery-content-panel { padding: 16px; }
            .recovery-card { padding: 20px 17px; }
            .recovery-footer { justify-content: center; }
            .recovery-footer > span:last-child { display: none; }
        }

        @media (max-height: 650px) {
            .recovery-brand-panel { padding-block: 24px; }
            .recovery-brand-content { padding-block: 18px; }
            .recovery-logo-stage { width: 150px; height: 150px; border-radius: 34px; }
            .recovery-logo { padding: 14px; border-radius: 24px; }
            .recovery-brand-name { margin-top: 42px; }
            .recovery-brand-content h1 { font-size: 1.65rem; }
            .recovery-content-panel { padding-block: 14px; }
            .recovery-mobile-brand { margin-bottom: 12px; }
            .recovery-card { padding-block: 18px; }
            .recovery-icon { width: 48px; height: 48px; border-radius: 15px; }
            .recovery-card-heading { margin-top: 14px; }
            .recovery-admin-notice,
            .recovery-back-btn { margin-top: 14px; }
            .recovery-footer { margin-top: 12px; }
        }

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