body {
                background: linear-gradient(135deg, #FFE8FE 0%, #F8E8FF 100%);
                font-family: 'Poppins', sans-serif;
                min-height: 100vh;
            }

            .logo-font {
                font-family: 'Spicy Rice', cursive;
                color: #FF319F;
                text-shadow: 1px 1px 2px rgba(255, 49, 159, 0.1);
            }

            .logo-topg-font {
                font-family: 'Spicy Rice', cursive;
                color: #ffffff;
                text-shadow:
                    0 8px 30px rgba(255, 49, 159, 0.25),
                    0 6px 80px rgba(0, 0, 0, 0.12),
                    0 5px 0 #9c0068,
                    5px 5px 0 #ff9ef7,
                    0 0 5px #ffffff;
                letter-spacing: 1px;
                font-weight: 900;
                filter: drop-shadow(0 2px 8px #ff319f55);


            }



            .auth-container {
                background-color: white;
                border-radius: 32px;
                box-shadow:
                    0 12px 48px 0 rgba(0, 0, 0, 0.45) !important;
                border: 1px solid rgba(255, 255, 255, 0.8);
                z-index: 10;
            }

            .input-field {
                background-color: #F5F5F5;
                border: 2px solid transparent;
                border-radius: 8px;
                padding: 14px 18px;
                width: 100%;
                font-size: 16px;
                transition: all 0.3s ease;
            }

            .input-field:focus {
                outline: none;
                background-color: white;
                border-color: #FF319F;
                box-shadow: 0 0 0 3px rgba(255, 49, 159, 0.1);
            }

            .input-field::placeholder {
                color: #999999;
            }

            .btn {
                background-color: #E5E5E5;
                font-family: 'Poppins', sans-serif;
                font-weight: 91;
                transition: all 0.3s ease;
                border-radius: 8px;
                border: none;
                padding: 12px 28px;
                font-size: 16px;
                cursor: pointer;
            }

            .btn:hover {
                background-color: #D5D5D5;
                transform: translateY(-1px);
            }

            .pink-btn {
                background-color: #FF319F;
                color: white;
            }

            .pink-btn:hover {
                background-color: #E91E63;
                transform: translateY(-2px);
                box-shadow: 0 4px 12px rgba(255, 49, 159, 0.3);
            }

            .link-text {
                font-family: 'Poppins', sans-serif;
                font-weight: 500;
                text-decoration: none;
                color: #FF319F;
                transition: all 0.3s ease;
                cursor: pointer;
            }

            .link-text:hover {
                color: #E91E63;
                text-decoration: underline;
            }

            .blind-icon {
                width: 90px;
                height: 110px;
                filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
                transition: all 0.3s ease;
            }

            .blind-icon:hover {
                transform: scale(1.05);
                filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.2));
            }

            .dna-icon {
                width: 115px;
                height: 95px;
                filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.15));
                transition: all 0.3s ease;
            }

            .dna-icon:hover {
                transform: scale(1.05);
                filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.2));
            }

            .tab-active {
                border-bottom: 3px solid #FF319F;
                color: #FF319F;
                font-weight: 600;
            }

            .req-item.valid {
                color: #10B981;
                font-weight: 500;
            }

            .password-strength.weak #strengthBar {
                background-color: #EF4444;
                width: 25%;
            }

            .password-strength.medium #strengthBar {
                background-color: #F59E0B;
                width: 50%;
            }

            .password-strength.strong #strengthBar {
                background-color: #10B981;
                width: 75%;
            }

            .password-strength.very-strong #strengthBar {
                background-color: #047857;
                width: 100%;
            }

            .otp-input {
                background-color: #F5F5F5;
                border: 2px solid transparent;
                border-radius: 12px;
                padding: 16px 20px;
                width: 100%;
                text-align: center;
                letter-spacing: 8px;
                font-size: 24px;
                font-weight: bold;
                transition: all 0.3s ease;
            }

            .otp-input:focus {
                outline: none;
                background-color: white;
                border-color: #FF319F;
                box-shadow: 0 0 0 3px rgba(255, 49, 159, 0.1);
            }

            .otp-input::placeholder {
                color: #999999;
                letter-spacing: 4px;
            }

            /* Smooth animations */
            @keyframes shake {

                0%,
                100% {
                    transform: translateX(0);
                }

                10%,
                30%,
                50%,
                70%,
                90% {
                    transform: translateX(-5px);
                }

                20%,
                40%,
                60%,
                80% {
                    transform: translateX(5px);
                }
            }

            .animate-shake {
                animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
            }

            /* Better message styling */
            .error-message {
                background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
                border-left: 4px solid #EF4444;
                color: #DC2626;
                padding: 12px 16px;
                border-radius: 8px;
            }

            .success-message {
                background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
                border-left: 4px solid #10B981;
                color: #047857;
                padding: 12px 16px;
                border-radius: 8px;
            }

            .warning-message {
                background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
                border-left: 4px solid #F59E0B;
                color: #92400E;
                padding: 12px 16px;
                border-radius: 8px;
            }

            .info-message {
                background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
                border-left: 4px solid #3B82F6;
                color: #1E40AF;
                padding: 12px 16px;
                border-radius: 8px;
            }

            /* Enhanced mobile responsiveness */
            @media (max-width: 768px) {
                .auth-container {
                    border-radius: 24px;
                    margin: 16px;
                }

                .input-field {
                    padding: 12px 16px;
                    font-size: 16px;
                }

                .btn {
                    padding: 12px 24px;
                    font-size: 15px;
                }
            }

            .otp-input::placeholder {
                color: #888888;
                letter-spacing: 3px;
            }

            @keyframes shake {

                0%,
                100% {
                    transform: translateX(0);
                }

                10%,
                30%,
                50%,
                70%,
                90% {
                    transform: translateX(-5px);
                }

                20%,
                40%,
                60%,
                80% {
                    transform: translateX(5px);
                }
            }

            .animate-shake {
                animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
            }

            /* Ensure hidden forms are truly hidden */
            .hidden {
                display: none !important;
            }

            /* Form visibility states */
            #otpForm.hidden,
            #loginForm.hidden,
            #registerForm.hidden {
                display: none !important;
            }

            /* Extra large text sizing */
            .text-\[8rem\] {
                font-size: 8rem !important;
                line-height: 0.9 !important;
            }

            .text-\[10rem\] {
                font-size: 10rem !important;
                line-height: 0.9 !important;
            }

            .text-\[12rem\] {
                font-size: 12rem !important;
                line-height: 0.9 !important;
            }

            .hide-below-884 {
                display: none !important;
            }

            @media (min-width: 884px) {
                .hide-below-884 {
                    display: initial !important;
                }
            }