/* ===== BASE STYLES ===== */
       

        body {           
            min-height: 100vh;           
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        /* ===== LOGIN CONTAINER ===== */
        .login-container {
            width: 100%;
            max-width: 500px;
            padding: 20px;
        }

        .login-box {
            background: var(--color-bg-card);
            border-radius: 15px;
            padding: 40px;
            box-shadow: var(--shadow-card);
            border: 1px solid var(--color-border);
            text-align: center;
        }

        /* ===== LOGO STYLES ===== */
        .logo-container {
            margin-bottom: 30px;
        }
        .logo-container img{
            width:250px;
        }

        /* ===== MESSAGE STYLES ===== */
        .message {
            font-size: 1.2rem;
            color: var(--color-text);
            margin-bottom: 30px;
            line-height: 1.5;
        }

        /* ===== CODE INPUT STYLES ===== */
        .code-input-container {
            margin-bottom: 30px;
            direction:ltr;
        }

        .code-inputs {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .code-input {
            width: 50px;
            height: 60px;
            border: 2px solid var(--color-border);
            border-radius: 10px;
            color: var(--color-text);
            font-size: 1.8rem;
            font-weight: bold;
            text-align: center;
            transition: all 0.3s ease;
            outline: none;
        }

        .code-input:not(:disabled) {
            border-color: var(--color-border);
        }

        .code-input:not(:disabled):focus {
            border-color: rgb(var(--color-primary));
            box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
            transform: translateY(-2px);
        }

        .code-input:disabled {
            background: rgba(var(--color-border-rgb,0.5));
            border-color: rgba(var(--color-border-rgb,0.5));
            cursor: default;
            opacity: 0.7;
        }

        .code-input.filled {
            border-color: var(--color-primary);
            background: rgba(var(--color-primary-rgb),0.5);
        }

        .code-input.filled:focus {
            border-color: var(--color-primary);
        }

        .code-input.error {
            border-color: var(--color-danger);
            background: rgba(244, 67, 54, 0.05);
        }

        /* Hide number input arrows */
        .code-input::-webkit-outer-spin-button,
        .code-input::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .code-input[type=number] {
            -moz-appearance: textfield;
        }

       
        /* ===== HELP MESSAGE STYLES ===== */
        .help-message {
            margin-top: 30px;
            padding: 20px;
            background: var(--color-bg);
        }       

        .help-text {
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .help-text strong {
            color: var(--color-primary);
        }
         /* ===== ERROR MESSAGE STYLES ===== */
        .error-message {
            margin-bottom: 30px;
            padding: 20px;
            background: var(--color-bg);
            color:rgb(255, 60, 60);
        }
        

       

        /* ===== ANIMATIONS ===== */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }

        .shake {
            animation: shake 0.5s ease-in-out;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in-up {
            animation: fadeInUp 0.5s ease-out;
        }

        /* ===== RESPONSIVE ADJUSTMENTS ===== */
        @media (max-width: 768px) {
            .login-box {
                padding: 30px 20px;
            }
            
            .logo-icon {
                width: 70px;
                height: 70px;
            }
            
            .logo-icon i {
                font-size: 30px;
            }
            
            .code-input {
                width: 45px;
                height: 55px;
                font-size: 1.6rem;
            }
            
            .message {
                font-size: 1.1rem;
            }
        }

        @media (max-width: 576px) {
            body {
                padding: 15px;
            }
            
            .login-container {
                padding: 10px;
            }
            
            .login-box {
                padding: 25px 15px;
            }
            
            .logo-icon {
                width: 60px;
                height: 60px;
            }
            
            .logo-icon i {
                font-size: 26px;
            }
            
            .code-input {
                width: 40px;
                height: 50px;
                font-size: 1.5rem;
            }
            
            .code-inputs {
                gap: 8px;
            }
            
            .message {
                font-size: 1rem;
            }
            
            .help-message {
                padding: 15px;
            }
        }

        @media (max-width: 400px) {
            .code-input {
                width: 35px;
                height: 45px;
                font-size: 1.4rem;
            }
            
            .code-inputs {
                gap: 6px;
            }
        }