@layer components {
  .empty {
    display: grid; justify-items: center; gap: 8px;
    margin: 4px; padding: var(--sp-7) var(--sp-4);
    border: 1.5px dashed var(--line-strong); border-radius: var(--r-card);
    text-align: center;
  }
  .empty__icon {
    width: 56px; height: 56px; display: grid; place-items: center;
    border-radius: 18px;
    background: color-mix(in srgb, var(--c, var(--c-gray)) 14%, transparent);
    color: var(--c-ink, var(--c-gray-ink));
  }
  .empty__title { font-weight: var(--fw-bold); overflow-wrap: anywhere; }
  .empty__text { max-width: 36ch; font-size: var(--fs-s); color: var(--text-2); line-height: 1.5; }
}