.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-8) var(--space-5);
    color: var(--color-text-muted);

    &__icon {
        width: 3.5rem; height: 3.5rem;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 50%;
        background: var(--color-surface-alt);
        color: var(--color-text-muted);
        margin-bottom: var(--space-3);
    }
    &__title { font-size: var(--fs-md); color: var(--color-text); margin-bottom: var(--space-1); }
    &__message { max-width: 380px; font-size: var(--fs-sm); margin-bottom: var(--space-4); }
    &__custom { margin-top: var(--space-3); }
}