/* items.css */

.items {
    margin-top: 0;
    display: grid;
    gap: 0.875rem;
    animation: fadeIn 0.5s ease-out 0.2s both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Empty state */
.items:empty::before {
    content: "Your list is empty! Add some items to get started.";
    display: block;
    text-align: center;
    padding: 3rem 2rem;
    color: var(--color-text-muted);
    font-size: 1rem;
    font-style: italic;
    animation: fadeIn 0.5s ease-out;
}