:root {
            --primary: #793A85;
            --primary-dark: #5e2d68;
            --secondary: #FFC107;
            --dark: #1a1a2e;
            --gray: #6c757d;
            --light: #f5f6fa;
        }

        * {
            box-sizing: border-box;
        }

        body {

            margin: 0;

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

            background:
                linear-gradient(
                    135deg,
                    #f8f3fa,
                    #eef2ff
                );

            min-height: 100vh;

            color: var(--dark);

        }

        .register-wrapper {

            min-height: 100vh;

            display: flex;

            align-items: center;

            justify-content: center;

            padding: 30px 15px;

        }

        .register-card {

            width: 100%;

            max-width: 950px;

            background: #fff;

            border-radius: 24px;

            overflow: hidden;

            box-shadow:
                0 20px 60px rgba(0,0,0,.12);

        }

        .register-left {

            background:
                linear-gradient(
                    135deg,
                    #793A85,
                    #5e2d68
                );

            color: #fff;

            padding: 50px 40px;

            height: 100%;

            display: flex;

            flex-direction: column;

            justify-content: center;

        }

        .register-left img {

            max-width: 190px;

            background: #fff;

            padding: 8px 12px;

            border-radius: 10px;

            margin-bottom: 30px;

        }

        .register-left h1 {

            font-size: 34px;

            font-weight: 800;

            margin-bottom: 15px;

        }

        .register-left p {

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

            font-size: 14px;

            line-height: 1.8;

        }

        .feature {

            display: flex;

            gap: 12px;

            align-items: center;

            margin-top: 18px;

            font-size: 13px;

        }

        .feature-icon {

            width: 36px;

            height: 36px;

            border-radius: 10px;

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

            display: flex;

            align-items: center;

            justify-content: center;

        }

        .register-right {

            padding: 40px;

        }

        .form-title {

            font-size: 27px;

            font-weight: 800;

            margin-bottom: 5px;

        }

        .form-subtitle {

            color: var(--gray);

            font-size: 13px;

            margin-bottom: 25px;

        }

        .form-label {

            font-size: 12px;

            font-weight: 700;

            margin-bottom: 7px;

        }

        .input-group-text {

            background: #f7f4f8;

            border-color: #e5e5e5;

            color: var(--primary);

        }

        .form-control {

            min-height: 46px;

            border-color: #e5e5e5;

            font-size: 13px;

        }

        .form-control:focus {

            border-color: var(--primary);

            box-shadow:
                0 0 0 3px rgba(121,58,133,.10);

        }

        .register-btn {

            width: 100%;

            border: 0;

            min-height: 50px;

            border-radius: 10px;

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

            color: #fff;

            font-weight: 700;

            font-size: 14px;

            transition: .2s;

        }

        .register-btn:hover {

            transform: translateY(-2px);

            box-shadow:
                0 8px 20px rgba(121,58,133,.25);

        }

        .login-text {

            text-align: center;

            margin-top: 20px;

            color: #777;

            font-size: 13px;

        }

        .login-text a {

            color: var(--primary);

            font-weight: 700;

        }

        .alert {

            font-size: 13px;

            border-radius: 10px;

        }

        .password-note {

            font-size: 11px;

            color: #888;

            margin-top: 5px;

        }

        @media(max-width: 767px) {

            .register-left {

                display: none;

            }

            .register-right {

                padding: 30px 22px;

            }

            .register-card {

                border-radius: 18px;

            }

            .form-title {

                font-size: 24px;

            }

        }