:root {

            --primary: #635BFF;

            --primary-dark: #5148e5;

            --secondary: #9B51E0;

            --dark: #17172f;

            --text: #686a7b;

            --muted: #a1a3b1;

            --border: #e8e8f0;

            --white: #ffffff;

            --danger: #ef4444;

            --danger-bg: #fff1f1;

            --success: #16a765;

            --success-bg: #eafaf2;

        }


        * {

            box-sizing: border-box;

        }


        html,
        body {

            width: 100%;

            min-height: 100%;

            margin: 0;

        }


        body {

            font-family: "Inter", sans-serif;

            background: #f6f6fb;

            color: var(--text);

        }


        a {

            text-decoration: none;

        }


        /* =====================================================
           PAGE
        ===================================================== */

        .forgot-page {

            min-height: 100vh;

            display: flex;

        }


        /* =====================================================
           LEFT SHOWCASE
        ===================================================== */

        .forgot-showcase {

            position: relative;

            width: 50%;

            min-height: 100vh;

            overflow: hidden;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 50px;

            background:
                linear-gradient(
                    135deg,
                    #635BFF 0%,
                    #7656e8 45%,
                    #9B51E0 100%
                );

            color: white;

        }


        .circle {

            position: absolute;

            border-radius: 50%;

            background:
                rgba(255,255,255,.08);

        }


        .circle-one {

            width: 500px;

            height: 500px;

            top: -230px;

            left: -220px;

        }


        .circle-two {

            width: 370px;

            height: 370px;

            right: -140px;

            bottom: -160px;

        }


        .circle-three {

            width: 150px;

            height: 150px;

            right: 13%;

            top: 20%;

            background:
                rgba(255,255,255,.06);

        }


        .showcase-content {

            position: relative;

            z-index: 2;

            width: 100%;

            max-width: 550px;

        }


        .brand {

            display: flex;

            align-items: center;

            gap: 10px;

            color: white;

            font-size: 21px;

            font-weight: 900;

        }


        .brand-icon {

            width: 45px;

            height: 45px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: var(--primary);

            background: white;

            border-radius: 13px;

            box-shadow:
                0 12px 30px rgba(0,0,0,.15);

        }


        .showcase-title {

            margin-top: 75px;

            color: white;

            font-size: 45px;

            line-height: 1.08;

            font-weight: 900;

            letter-spacing: -1.6px;

        }


        .showcase-title span {

            color: #dedaff;

        }


        .showcase-text {

            max-width: 470px;

            margin-top: 18px;

            color:
                rgba(255,255,255,.76);

            font-size: 13px;

            line-height: 1.8;

        }


        /* =====================================================
           SECURITY CARD
        ===================================================== */

        .security-card {

            display: flex;

            align-items: center;

            gap: 12px;

            width: fit-content;

            margin-top: 35px;

            padding: 13px;

            background:
                rgba(255,255,255,.11);

            border:
                1px solid rgba(255,255,255,.13);

            border-radius: 12px;

            backdrop-filter: blur(15px);

        }


        .security-icon {

            width: 39px;

            height: 39px;

            display: flex;

            align-items: center;

            justify-content: center;

            color: white;

            background:
                rgba(255,255,255,.14);

            border-radius: 9px;

        }


        .security-title {

            color: white;

            font-size: 12px;

            font-weight: 900;

        }


        .security-text {

            margin-top: 3px;

            color:
                rgba(255,255,255,.62);

            font-size: 10px;

        }


        /* =====================================================
           RIGHT AREA
        ===================================================== */

        .forgot-area {

            width: 50%;

            min-height: 100vh;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 40px;

            background: white;

        }


        .forgot-container {

            width: 100%;

            max-width: 410px;

        }


        /* =====================================================
           MOBILE BRAND
        ===================================================== */

        .mobile-brand {

            display: none;

        }


        /* =====================================================
           BACK
        ===================================================== */

        .back-login {

            display: inline-flex;

            align-items: center;

            gap: 6px;

            margin-bottom: 28px;

            color: var(--muted);

            font-size: 12px;

            font-weight: 700;

            transition: .2s;

        }


        .back-login:hover {

            color: var(--primary);

        }


        /* =====================================================
           ICON
        ===================================================== */

        .forgot-icon {

            width: 58px;

            height: 58px;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-bottom: 19px;

            color: var(--primary);

            background: #f0efff;

            border-radius: 16px;

            font-size: 23px;

        }


        .forgot-heading {

            color: var(--dark);

            font-size: 28px;

            font-weight: 900;

            letter-spacing: -.8px;

        }


        .forgot-description {

            max-width: 370px;

            margin-top: 9px;

            color: var(--muted);

            font-size: 12px;

            line-height: 1.7;

        }


        /* =====================================================
           ALERT
        ===================================================== */

        .custom-alert {

            display: flex;

            align-items: flex-start;

            gap: 8px;

            margin-top: 20px;

            padding: 11px 12px;

            border-radius: 10px;

            font-size: 11px;

            line-height: 1.5;

        }


        .custom-alert.error {

            color: var(--danger);

            background: var(--danger-bg);

        }


        .custom-alert.success {

            color: var(--success);

            background: var(--success-bg);

        }


        /* =====================================================
           FORM
        ===================================================== */

        .forgot-form {

            margin-top: 25px;

        }


        .form-group {

            margin-bottom: 15px;

        }


        .form-label {

            display: block;

            margin-bottom: 7px;

            color: var(--dark);

            font-size: 11px;

            font-weight: 800;

        }


        .input-wrapper {

            position: relative;

        }


        .input-icon {

            position: absolute;

            top: 50%;

            left: 13px;

            z-index: 2;

            color: #999ba9;

            font-size: 14px;

            transform: translateY(-50%);

        }


        .form-control {

            width: 100%;

            height: 49px;

            padding:
                0 43px;

            color: var(--dark);

            background: #fafafe;

            border:
                1px solid var(--border);

            border-radius: 11px;

            box-shadow: none !important;

            font-size: 12px;

        }


        .form-control::placeholder {

            color: #b4b5c0;

        }


        .form-control:focus {

            background: white;

            border-color: var(--primary);

            box-shadow:
                0 0 0 4px rgba(99,91,255,.07) !important;

        }


        /* =====================================================
           RESET BUTTON
        ===================================================== */

        .reset-button {

            width: 100%;

            height: 49px;

            display: flex;

            align-items: center;

            justify-content: center;

            gap: 8px;

            margin-top: 20px;

            color: white;

            background:
                linear-gradient(
                    135deg,
                    var(--primary),
                    var(--secondary)
                );

            border: 0;

            border-radius: 11px;

            font-size: 12px;

            font-weight: 900;

            box-shadow:
                0 12px 25px rgba(99,91,255,.19);

            transition: .2s ease;

        }


        .reset-button:hover {

            color: white;

            transform: translateY(-1px);

            box-shadow:
                0 16px 30px rgba(99,91,255,.25);

        }


        .reset-button:disabled {

            opacity: .7;

            cursor: not-allowed;

            transform: none;

        }


        /* =====================================================
           INFO
        ===================================================== */

        .reset-info {

            display: flex;

            align-items: flex-start;

            gap: 9px;

            margin-top: 18px;

            padding: 11px;

            color: #77798a;

            background: #f8f8fc;

            border:
                1px solid #ededf3;

            border-radius: 10px;

            font-size: 10px;

            line-height: 1.6;

        }


        .reset-info i {

            color: var(--primary);

            font-size: 13px;

        }


        /* =====================================================
           LOGIN
        ===================================================== */

        .login-link {

            margin-top: 27px;

            text-align: center;

            color: var(--muted);

            font-size: 12px;

        }


        .login-link a {

            display: inline-flex;

            align-items: center;

            gap: 4px;

            color: var(--primary);

            font-weight: 900;

        }


        /* =====================================================
           MOBILE
        ===================================================== */

        @media(max-width: 767px) {


            body {

                background: white;

            }


            .forgot-page {

                display: block;

                min-height: 100vh;

            }


            .forgot-showcase {

                display: none;

            }


            .forgot-area {

                width: 100%;

                min-height: 100vh;

                display: block;

                padding:
                    22px 18px 30px;

            }


            .forgot-container {

                max-width: 100%;

            }


            .mobile-brand {

                display: flex;

                align-items: center;

                justify-content: center;

                gap: 8px;

                color: var(--dark);

                font-size: 18px;

                font-weight: 900;

                margin-bottom: 45px;

            }


            .mobile-brand-icon {

                width: 37px;

                height: 37px;

                display: flex;

                align-items: center;

                justify-content: center;

                color: white;

                background:
                    linear-gradient(
                        135deg,
                        var(--primary),
                        var(--secondary)
                    );

                border-radius: 11px;

                box-shadow:
                    0 8px 20px rgba(99,91,255,.18);

            }


            .back-login {

                margin-bottom: 22px;

                font-size: 9px;

            }


            .forgot-icon {

                width: 56px;

                height: 56px;

                margin-bottom: 18px;

            }


            .forgot-heading {

                font-size: 24px;

            }


            .forgot-description {

                max-width: 350px;

                font-size: 9.5px;

            }


            .forgot-form {

                margin-top: 24px;

            }


            .form-control {

                height: 52px;

                border-radius: 12px;

                font-size: 11px;

            }


            .reset-button {

                height: 52px;

                border-radius: 12px;

                font-size: 10.5px;

            }


            .reset-info {

                font-size: 7.5px;

            }


            .login-link {

                margin-top: 25px;

            }

        }


        @media(max-width: 380px) {


            .forgot-area {

                padding-left: 15px;

                padding-right: 15px;

            }


            .mobile-brand {

                margin-bottom: 38px;

            }


            .forgot-heading {

                font-size: 22px;

            }

        }