@layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            .btn-hover {
                @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-300;
            }
            .fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .certificate-bg {
                background-image: linear-gradient(135deg, #f5f7fa 0%, #e4eaf3 100%);
                position: relative;
                overflow: hidden;
            }
            .certificate-bg::before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-image: 
                    linear-gradient(rgba(22, 93, 255, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(22, 93, 255, 0.05) 1px, transparent 1px);
                background-size: 20px 20px;
                z-index: 1;
            }
            .certificate-overlay {
                background: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(2px);
                position: relative;
                z-index: 2;
            }
            .certificate-border {
                border: 2px dashed rgba(22, 93, 255, 0.2);
                border-radius: 8px;
            }
        }