/* =========================================
           REGISTER PAGE COLORS
        ========================================= */

        :root {
            --rg-bg: #090d12;
            --rg-card: #11161e;
            --rg-card2: #151b23;
            --rg-text: #f4f7f5;
            --rg-muted: #9ba5a0;
            --rg-border: rgba(255,255,255,.09);

            --rg-green: #39f58a;
            --rg-green-dark: #21c875;

            --rg-shadow: 0 20px 50px rgba(0,0,0,.25);
        }

        /* Light Theme */

        body.rg-light {
            --rg-bg: #f2f6f4;
            --rg-card: #ffffff;
            --rg-card2: #f8faf9;
            --rg-text: #17201b;
            --rg-muted: #68746e;
            --rg-border: rgba(0,0,0,.09);

            --rg-shadow: 0 15px 35px rgba(25,55,40,.10);
        }


        /* =========================================
           BODY
        ========================================= */

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            min-height: 100vh;

            background:
                radial-gradient(
                    circle at top right,
                    rgba(57,245,138,.08),
                    transparent 35%
                ),
                var(--rg-bg);

            color: var(--rg-text);

            font-family:
                Inter,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            transition: .3s ease;
        }


        /* =========================================
           REGISTER WRAPPER
        ========================================= */

        .rg-wrapper {
            width: 100%;
            max-width: 480px;
            min-height: 100vh;

            margin: auto;
            padding: 25px 16px;

            display: flex;
            align-items: center;
            justify-content: center;
        }


        /* =========================================
           REGISTER CARD
        ========================================= */

        .rg-card {
            width: 100%;

            padding: 28px 24px;

            background:
                linear-gradient(
                    145deg,
                    rgba(57,245,138,.07),
                    transparent 40%
                ),
                var(--rg-card);

            border: 1px solid var(--rg-border);
            border-radius: 24px;

            box-shadow: var(--rg-shadow);

            position: relative;
            overflow: hidden;
        }


        /* Top Glow */

        .rg-card::before {
            content: "";

            position: absolute;

            width: 150px;
            height: 150px;

            top: -90px;
            right: -70px;

            background: rgba(57,245,138,.12);

            filter: blur(25px);
            border-radius: 50%;
        }


        /* =========================================
           LOGO
        ========================================= */

        .rg-logo {
            text-align: center;
            margin-bottom: 24px;
        }

        .rg-logo-mark {
            width: 55px;
            height: 55px;

            margin: 0 auto 13px;

            display: flex;
            align-items: center;
            justify-content: center;

            border-radius: 16px;

            background:
                linear-gradient(
                    135deg,
                    var(--rg-green),
                    var(--rg-green-dark)
                );

            color: #07110b;

            font-size: 25px;

            box-shadow:
                0 10px 25px rgba(57,245,138,.20);
        }

        .rg-logo h1 {
            margin: 0;

            font-size: 24px;
            font-weight: 850;
            letter-spacing: -.5px;
        }

        .rg-logo h1 span {
            color: var(--rg-green);
        }

        .rg-logo p {
            margin: 7px 0 0;

            color: var(--rg-muted);

            font-size: 13px;
        }


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

        .rg-field {
            margin-bottom: 16px;
        }

        .rg-label {
            display: block;

            margin-bottom: 7px;

            color: var(--rg-text);

            font-size: 12px;
            font-weight: 750;
        }

        .rg-label span {
            color: var(--rg-green);
        }


        /* =========================================
           INPUT BOX
        ========================================= */

        .rg-input-box {
            position: relative;
        }

        .rg-input-icon {
            position: absolute;

            top: 50%;
            left: 15px;

            transform: translateY(-50%);

            color: var(--rg-muted);

            font-size: 16px;

            pointer-events: none;

            transition: .25s ease;
        }

        .rg-input {
            width: 100%;
            height: 50px;

            padding: 0 15px 0 45px;

            background: var(--rg-card2);

            border: 1px solid var(--rg-border);
            border-radius: 13px;

            color: var(--rg-text);

            outline: none;

            font-size: 13px;

            transition: .25s ease;
        }

        .rg-input::placeholder {
            color: var(--rg-muted);
            opacity: .65;
        }

        .rg-input:hover {
            border-color: rgba(57,245,138,.25);
        }

        .rg-input:focus {
            background: var(--rg-card2);

            border-color: var(--rg-green);

            box-shadow:
                0 0 0 3px rgba(57,245,138,.10);
        }

        .rg-input:focus + .rg-input-icon {
            color: var(--rg-green);
        }


        /* =========================================
           SPONSOR ID SPECIAL
        ========================================= */

        .rg-sponsor {
            background:
                linear-gradient(
                    90deg,
                    rgba(57,245,138,.08),
                    transparent
                ),
                var(--rg-card2);

            border-color: rgba(57,245,138,.20);
        }


        /* =========================================
           SUBMIT BUTTON
        ========================================= */

        .rg-submit {
            width: 100%;
            height: 52px;

            margin-top: 5px;

            border: 0;
            border-radius: 14px;

            background:
                linear-gradient(
                    135deg,
                    var(--rg-green),
                    var(--rg-green-dark)
                );

            color: #07110b;

            font-size: 14px;
            font-weight: 850;

            display: flex;
            align-items: center;
            justify-content: center;
            gap: 9px;

            cursor: pointer;

            position: relative;
            overflow: hidden;

            box-shadow:
                0 10px 25px rgba(57,245,138,.20);

            transition: .3s ease;
        }

        .rg-submit::before {
            content: "";

            position: absolute;

            top: 0;
            left: -100%;

            width: 60%;
            height: 100%;

            background:
                linear-gradient(
                    90deg,
                    transparent,
                    rgba(255,255,255,.35),
                    transparent
                );

            transform: skewX(-20deg);

            transition: .6s ease;
        }

        .rg-submit:hover {
            transform: translateY(-2px);

            box-shadow:
                0 14px 30px rgba(57,245,138,.30);
        }

        .rg-submit:hover::before {
            left: 130%;
        }

        .rg-submit i {
            transition: .3s ease;
        }

        .rg-submit:hover i {
            transform: translateX(5px);
        }

        .rg-submit:active {
            transform: scale(.98);
        }


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

        .rg-login {
            margin-top: 20px;

            text-align: center;

            color: var(--rg-muted);

            font-size: 13px;
        }

        .rg-login a {
            color: var(--rg-green);

            font-weight: 800;

            text-decoration: none;

            transition: .25s ease;
        }

        .rg-login a:hover {
            text-decoration: underline;
        }


        /* =========================================
           SECURITY TEXT
        ========================================= */

        .rg-security {
            margin-top: 18px;

            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;

            color: var(--rg-muted);

            font-size: 10px;
        }

        .rg-security i {
            color: var(--rg-green);
        }


        /* =========================================
           THEME BUTTON
        ========================================= */

        .rg-theme {
            position: absolute;

            top: 18px;
            right: 18px;

            width: 38px;
            height: 38px;

            border: 1px solid var(--rg-border);
            border-radius: 11px;

            background: var(--rg-card2);

            color: var(--rg-text);

            display: flex;
            align-items: center;
            justify-content: center;

            cursor: pointer;

            transition: .3s ease;
        }

        .rg-theme:hover {
            color: var(--rg-green);
            border-color: var(--rg-green);

            transform: rotate(15deg);
        }


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

        @media (max-width: 576px) {

            .rg-wrapper {
                padding: 18px 12px;
                align-items: flex-start;
                padding-top: 25px;
            }

            .rg-card {
                padding: 25px 17px;
                border-radius: 20px;
            }

            .rg-logo {
                margin-bottom: 22px;
            }

            .rg-logo h1 {
                font-size: 22px;
            }

            .rg-input {
                height: 48px;
            }

            .rg-submit {
                height: 50px;
            }
        }