@layer utilities {
    .content-auto {
        content-visibility: auto;
    }

    .w-full {
        width: 100%;
    }

    .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .card-hover {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .card-hover:hover {
        transform: translateY(-4px);
        box-shadow:
            0 10px 25px -5px rgba(0, 0, 0, 0.1),
            0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }

    .video-hover-play:hover .play-icon {
        opacity: 1;
        transform: scale(1.1);
    }

    .video-hover-play:hover img {
        filter: brightness(0.7);
    }

    .badge-open {
        border-radius: 9999px;
        background-color: rgb(34 197 94 / 0.2);
        padding-left: 0.625rem;
        padding-right: 0.625rem;
        padding-top: 0.125rem;
        padding-bottom: 0.125rem;
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 600;
        --tw-text-opacity: 1;
        color: rgb(22 163 74 / var(--tw-text-opacity, 1));
    }

    .badge-full {
        border-radius: 9999px;
        background-color: rgb(234 179 8 / 0.2);
        padding-left: 0.625rem;
        padding-right: 0.625rem;
        padding-top: 0.125rem;
        padding-bottom: 0.125rem;
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 600;
        --tw-text-opacity: 1;
        color: rgb(202 138 4 / var(--tw-text-opacity, 1));
    }

    .badge-closed {
        border-radius: 9999px;
        background-color: rgb(239 68 68 / 0.2);
        padding-left: 0.625rem;
        padding-right: 0.625rem;
        padding-top: 0.125rem;
        padding-bottom: 0.125rem;
        font-size: 0.75rem;
        line-height: 1rem;
        font-weight: 600;
        --tw-text-opacity: 1;
        color: rgb(220 38 38 / var(--tw-text-opacity, 1));
    }

    /* header / quota / 背景模糊用的共用 utility */
    .backdrop-blur-sm {
        backdrop-filter: blur(4px);
    }

    .quota-bar {
        height: 8px;
        border-radius: 4px;
        background-color: #374151;
        overflow: hidden;
    }

    .quota-progress {
        height: 100%;
        background-color: #FF6A00;
        border-radius: 4px;
    }

    .pulse-animation {
        animation: pulse 2s infinite;
    }

    @keyframes pulse {
        0% {
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }
    }

    .border-\[\#E5E7EB\] {
        --tw-border-opacity: 1;
        border-color: rgb(31 41 55 / var(--tw-border-opacity, 1));
    }
}