* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
        }

        body {
            min-height: 100vh;
            background: #050b1b;
            color: #fff;
        }

        .register-container {
            display: flex;
            min-height: 100vh;
            overflow: hidden;
        }

        /* LEFT SIDE */

        .left-section {
            width: 53.5%;
            padding: 70px 7%;
            background:
                radial-gradient(ellipse at top right,
                    #142e66 0%, transparent 55%),
                linear-gradient(135deg, #0b1a3e, #050b1b 75%);
            border-right: 1px solid #244579;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 20px;
            position: relative;
            z-index: 1;
        }

        .logo-icon {
            width: 105px;
            height: 105px;
            border-radius: 25px;
            border: 5px solid #142c60;
            background: linear-gradient(135deg, #020817, #172b50);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 42px;
            font-weight: bold;
            color: #38aaff;
        }

        .logo-text h2 {
            font-size: 34px;
            letter-spacing: 12px;
        }

        .logo-text p {
            color: #83b7ff;
            font-style: italic;
            margin-top: 5px;
        }

        .hero-content {
            position: relative;
            z-index: 1;
        }

        .hero-content h1 {
            font-size: clamp(38px, 4vw, 76px);
            font-weight: 800;
            font-style: italic;
            color: #39aaff;
            margin-bottom: 15px;
        }

        .hero-content p {
            font-size: 17px;
            line-height: 1.6;
            color: #c4d7f9;
            max-width: 470px;
        }

        .footer {
            color: #7da9e7;
            font-size: 13px;
            position: relative;
            z-index: 1;
        }

        /* RIGHT SIDE */

        .right-section {
            width: 46.5%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px 25px;
            background: #050b1b;
        }

        .register-card {
            width: 100%;
            max-width: 480px;
            padding: 43px 40px;
            border: 1px solid #21477e;
            border-radius: 25px;
            background: linear-gradient(
                145deg,
                #0e1d40,
                #0a1635
            );
            box-shadow: 0 15px 50px rgba(0,0,0,.25);
        }

        .register-card h2 {
            font-size: 36px;
            font-style: italic;
            margin-bottom: 8px;
        }

        .subtitle {
            color: #83b5f5;
            font-size: 15px;
            margin-bottom: 30px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .form-control {
            width: 100%;
            height: 53px;
            border: 1px solid #244b86;
            border-radius: 12px;
            padding: 0 16px;
            background: #07122f;
            color: #fff;
            outline: none;
            font-size: 14px;
            transition: .3s;
        }

        .form-control::placeholder {
            color: #6487bc;
        }

        .form-control:focus {
            border-color: #3984ff;
            box-shadow: 0 0 0 3px rgba(57,132,255,.12);
        }

        input[type="file"].form-control {
            padding: 12px;
            height: auto;
            min-height: 53px;
            cursor: pointer;
        }

        input[type="file"]::file-selector-button {
            background: #244b86;
            color: white;
            border: none;
            border-radius: 6px;
            padding: 7px 12px;
            margin-right: 10px;
            cursor: pointer;
        }

        .register-btn {
            width: 100%;
            height: 54px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(90deg, #306bf0, #4d89ff);
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            margin-top: 8px;
            transition: .3s;
            box-shadow: 0 8px 25px rgba(47,107,240,.25);
        }

        .register-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(47,107,240,.4);
        }

        .login-link {
            text-align: center;
            color: #91b9f5;
            margin-top: 25px;
            font-size: 14px;
        }

        .login-link a {
            color: #4385ff;
            font-weight: bold;
            text-decoration: none;
        }

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

        .error {
            color: #ff7777;
            font-size: 12px;
            margin-top: 6px;
        }

        @media(max-width: 900px) {
            .left-section {
                width: 45%;
                padding: 45px 5%;
            }

            .right-section {
                width: 55%;
            }

            .register-card {
                padding: 35px 25px;
            }

            .logo-text h2 {
                font-size: 24px;
                letter-spacing: 7px;
            }

            .logo-icon {
                width: 75px;
                height: 75px;
            }
        }

        @media(max-width: 650px) {
            .register-container {
                flex-direction: column;
            }

            .left-section {
                width: 100%;
                min-height: 240px;
                padding: 30px 25px;
                gap: 35px;
            }

            .hero-content h1 {
                font-size: 38px;
            }

            .hero-content p {
                font-size: 14px;
            }

            .footer {
                display: none;
            }

            .right-section {
                width: 100%;
                padding: 35px 18px;
            }

            .register-card {
                max-width: 480px;
                padding: 30px 22px;
            }

            .register-card h2 {
                font-size: 30px;
            }
        }

        .validation-message {
    color: red;
    font-size: 12px;
    display: block;
    margin-top: 5px;
}

#responseMessage {
    margin: 10px 0;
    font-size: 14px;
}

#registerBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}