:where([class^="ri-"])::before { content: "\f3c2"; }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        @keyframes drawCircle {
            0% { stroke-dashoffset: 283; }
            100% { stroke-dashoffset: 0; }
        }
        
        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        
        @keyframes fadeOut {
            0% { opacity: 1; }
            100% { opacity: 0; }
        }
        
        @keyframes scaleUp {
            0% { transform: scale(0.5); }
            100% { transform: scale(1); }
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            20%, 60% { transform: translateX(-10px); }
            40%, 80% { transform: translateX(10px); }
        }
        
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        .overlay.active {
            opacity: 1;
            pointer-events: auto;
        }
        
        .spinner {
            width: 64px;
            height: 64px;
            border: 5px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            border-top-color: #ffffff;
            animation: spin 1.5s linear infinite;
        }
        
        .success-icon, .error-icon {
            display: none;
            animation: scaleUp 0.3s ease forwards;
        }
        
        .success-circle {
            stroke-dasharray: 283;
            stroke-dashoffset: 283;
            animation: drawCircle 1s ease forwards;
        }
        
        .shake {
            animation: shake 0.4s ease;
        }
        
        .fade-out {
            animation: fadeOut 0.5s ease forwards;
        }
        
        input:focus, textarea:focus {
            outline: none;
            border-color: #4361ee;
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);
        }
        
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0px 1000px white inset;
            transition: background-color 5000s ease-in-out 0s;
        }