* {
            box-sizing: border-box;
        }

        html, body {
            width: 100%;
            overflow-x: hidden;
            margin: 0;
            background: var(--bg-register) no-repeat center center fixed;
            background-size: cover;
            font-family: 'UnifrakturCook', 'Arial', sans-serif;
            color: #fff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        body::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            z-index: 1;
        }

        main {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1rem;
            width: 100%;
            position: relative;
            z-index: 2;
        }

        .register-container {
            max-width: 480px;
            width: calc(100% - 2rem);
            background: #1a1a1a7c;
            border: 3px solid #f1c40f;
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(241, 196, 15, 0.4), 0 0 40px rgba(0, 0, 0, 0.8);
            padding: 2rem;
            animation: pulse 3s infinite ease-in-out;
            transition: transform 0.3s ease;
        }

        .register-container:hover {
            transform: translateY(-5px) rotate(1deg);
        }

        @keyframes pulse {
            0%, 100% { box-shadow: 0 8px 24px rgba(241, 196, 15, 0.4), 0 0 40px rgba(0, 0, 0, 0.8); }
            50% { box-shadow: 0 8px 32px rgba(241, 196, 15, 0.6), 0 0 48px rgba(0, 0, 0, 0.9); }
        }

        .register-form {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .register-title {
            font-size: 3rem;
            font-family: 'UnifrakturCook', sans-serif;
            color: #f1c40f;
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
            margin-bottom: 1.5rem;
            text-align: center;
            letter-spacing: 1px;
        }

        .register-form form {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .register-form input {
            width: 100%;
            padding: 0.9rem;
            font-size: 1.1rem;
            font-family: 'Arial', sans-serif;
            background: #2c2c2c;
            color: #fff;
            border: 2px solid #f1c40f;
            border-radius: 6px;
            outline: none;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 0.7rem;
        }

        .register-form input:focus {
            border-color: #ffe600;
            box-shadow: 0 0 8px rgba(255, 230, 0, 0.6);
        }

        .register-form input::placeholder {
            color: #999;
            font-size: 1rem;
        }

        .g-recaptcha {
            margin: 1.2rem auto 0.5rem;
            display: flex;
            justify-content: center;
        }

        .register-button {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
            color: #fff;
            border: 2px solid #f1c40f;
            padding: 0.9rem 1.8rem;
            font-size: 1.3rem;
            border-radius: 6px;
            cursor: var(--hover-wow-gif) 16 16, auto;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .register-button:hover {
            background: linear-gradient(135deg, #0e65d6ff 0%, #26a938ff 100%);
            transform: scale(1.05);
            box-shadow: 0 4px 16px rgba(231, 76, 60, 0.6);
        }

        .register-form .error {
            color: #e74c3c;
            font-size: 1.1rem;
            font-family: 'Arial', sans-serif;
            text-align: center;
            margin: 0.6rem 0 0;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
        }

        .register-form .success {
            color: #2ecc71;
            font-size: 1.1rem;
            font-family: 'Arial', sans-serif;
            text-align: center;
            margin: 0.6rem 0 0;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
        }

        .login-link-container {
            text-align: center;
            font-size: 1.1rem;
            font-family: 'UnifrakturCook', sans-serif;
            color: #fff;
            margin-top: 1.2rem;
        }

        .login-link-container a {
            color: #f1c40f;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .login-link-container a:hover {
            color: #ffe600;
            text-decoration: underline;
        }

        @media (max-width: 767px) {
            html, body {
                width: 100%;
                overflow-x: hidden;
            }

            main {
                padding: 0;
                margin-top: 80px;
            }

            .register-container {
                max-width: 100%;
                width: calc(100% - 1.5rem);
                padding: 1.5rem;
                margin: 1.5rem auto;
                box-shadow: 0 6px 16px rgba(241, 196, 15, 0.3);
            }

            .register-container:hover {
                transform: translateY(-3px) rotate(0.5deg);
            }

            .register-title {
                font-size: 2.4rem;
            }

            .register-form input {
                font-size: 1rem;
                padding: 0.8rem;
            }

            .register-button {
                font-size: 1.2rem;
                padding: 0.8rem 1.5rem;
            }

            .g-recaptcha {
                transform: scale(0.85);
                transform-origin: center;
            }

            .login-link-container {
                font-size: 1rem;
                margin-top: 1rem;
            }

            .register-form .error, .register-form .success {
                font-size: 1rem;
            }
        }

        @media (max-width: 576px) {
            .register-title {
                font-size: 2rem;
            }

            .register-form input {
                font-size: 0.95rem;
                padding: 0.7rem;
            }

            .register-button {
                font-size: 1.1rem;
                padding: 0.7rem 1.2rem;
            }

            .g-recaptcha {
                transform: scale(0.77);
            }

            .login-link-container {
                font-size: 0.95rem;
            }

            .register-form .error, .register-form .success {
                font-size: 0.95rem;
            }
        }