/* =========================================================
   STATES — skeletons, empty, error, loading
   ========================================================= */

/* ── Skeleton loaders ────────────────────────────────── */
.kz-skel {
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: kz-skel 1.4s var(--ease-in-out) infinite;
  border-radius: var(--r-sm);
  display: block;
}
@keyframes kz-skel {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.kz-skel--text   { height: 14px; margin: 6px 0; }
.kz-skel--title  { height: 22px; width: 60%; margin: 8px 0; }
.kz-skel--avatar { width: 44px; height: 44px; border-radius: 50%; }
.kz-skel--card   { height: 120px; border-radius: var(--r-lg); }

/* ── Empty state ─────────────────────────────────────── */
.kz-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--r-xl);
}
.kz-empty__icon {
  width: 64px; height: 64px;
  border-radius: 50%; margin: 0 auto 20px;
  background: var(--surface-2);
  display: grid; place-items: center;
  color: var(--text-3);
}
.kz-empty h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px; color: var(--text); }
.kz-empty p { font-size: 14px; color: var(--text-2); margin: 0 0 22px; max-width: 42ch; margin-left: auto; margin-right: auto; }

/* ── Error inline banner ─────────────────────────────── */
.kz-error {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--verdict-spam-bg);
  color: var(--verdict-spam);
  border-radius: var(--r-md);
  font-size: 14px;
  border: 1px solid color-mix(in oklch, var(--verdict-spam) 30%, transparent);
}
.kz-error__icon { flex: none; }
.kz-error__title { font-weight: 700; margin: 0 0 2px; }
.kz-error__msg   { color: color-mix(in oklch, var(--verdict-spam) 80%, var(--text-2)); margin: 0; }

/* ── 404 / 500 ───────────────────────────────────────── */
.kz-notfound {
  text-align: center; padding: 80px 20px 40px;
}
.kz-notfound__code {
  font-family: var(--font-mono);
  font-size: clamp(80px, 14vw, 180px);
  line-height: 1; letter-spacing: -.04em;
  font-weight: 800;
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 16px;
}
.kz-notfound__title { font-size: 28px; font-weight: 800; margin: 0 0 12px; letter-spacing: -.02em; }
.kz-notfound__sub { color: var(--text-2); font-size: 16px; max-width: 50ch; margin: 0 auto 32px; }