/* widgets/ui/empty_state — v1.1.5.881. Лише токени. */
.kp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 20px;
    border: 1px dashed var(--n-line);
    border-radius: var(--n-r-lg);
    background: var(--n-surface-2);
    text-align: center;
}
.kp-empty__icon { font-size: 34px; line-height: 1; opacity: .85; }
.kp-empty__title { color: var(--n-text); font-size: 16px; font-weight: 600; }
.kp-empty__text { color: var(--n-text-dim); font-size: 14px; max-width: 44ch; }
.kp-empty__action {
    margin-top: 6px;
    padding: 8px 16px;
    border-radius: var(--n-r-pill);
    border: 1px solid var(--n-accent-border);
    background: var(--n-accent-soft);
    color: var(--n-text-strong);
    text-decoration: none;
    font-size: 14px;
}
.kp-empty__action:hover { background: var(--n-bg-hover); }
.kp-empty--info { border-style: solid; background: var(--n-info-soft); }

/* v1.1.5.913 — розміри.
   sm: короткий стан усередині списку. Ієрархії немає, тож title тут — звичайний рядок:
   робити з «Не заповнено» заголовок означало б кричати там, де достатньо сказати.
   lg: стан цілої секції, коли на екрані більше нічого немає. */
.kp-empty--sm { padding: 16px 18px; gap: 6px; }
.kp-empty--sm .kp-empty__title {
    color: var(--n-text-dim);
    font-size: 14px;
    font-weight: var(--n-w-reg, 400);
}
.kp-empty--sm .kp-empty__icon { font-size: 22px; }
.kp-empty--lg { padding: 44px 18px; }