.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--white-rgb), var(--opacity-20));
    border-top-color: var(--white);
    border-radius: var(--rounded-full);
    animation: spin 600ms linear infinite;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-lg);
    padding: var(--spacing-12);
    text-align: center;

    i {
        font-size: var(--text-4xl);
        color: var(--text-muted);
    }

    h3 {
        font-size: var(--text-xl);
        font-weight: var(--font-semibold);
        color: var(--text-primary);
    }

    p {
        font-size: var(--text-base);
        color: var(--text-secondary);
    }
}

.page-loading .grid-container {
    opacity: 0;
    animation: fadeIn 400ms var(--ease-out) forwards;
    animation-delay: 200ms;
}