/* Списки, пустые состояния, плашки-уведомления (.list, .empty, .notice) */

/* ---------- списки ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: var(--s3);
  padding: var(--s2) 0; border-bottom: var(--border-w) solid var(--border); }
.list li:last-child { border-bottom: 0; }
.empty { color: var(--fg-muted); padding: var(--s4) 0; text-align: center; font-size: var(--fs-md); }
.notice { --notice-tone: var(--warn); --notice-bg: var(--warn-soft);
  display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3); border-radius: var(--r);
  background: var(--notice-bg); color: var(--fg); font-size: var(--fs-md);
  border: var(--border-w) solid var(--border); border-left: calc(var(--border-w) + 3px) solid var(--notice-tone); }   /* полоса слева — второй сигнал помимо оттенка фона */
.notice .icon { color: var(--notice-tone); margin-top: 2px; flex: none; }
.notice[role="status"], .notice.info { --notice-tone: var(--info); --notice-bg: var(--info-soft); }
.notice.error { --notice-tone: var(--danger); --notice-bg: var(--danger-soft); }
.notice.ok { --notice-tone: var(--success); --notice-bg: var(--success-soft); }
.card + .notice, .notice + .card { margin-top: var(--s4); }
/* пустое состояние с иконкой, заголовком и действием: <div class="empty-state"><svg class="icon">…</svg><h2>…</h2><p>…</p><a class="btn">…</a></div> */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--s2); max-width: 420px; margin: var(--s6) auto;
  padding: var(--s5); text-align: center; border: var(--border-w) dashed var(--border-strong); border-radius: var(--r-lg); }
.empty-state > .icon { width: calc(var(--icon-size) * 1.6); height: calc(var(--icon-size) * 1.6); color: var(--fg-muted); }
.empty-state :is(h1, h2) { font-size: var(--fs-xl); }
.empty-state p { margin: 0; color: var(--fg-muted); }
.empty-state .btn { margin-top: var(--s2); }
@media (prefers-reduced-motion: no-preference) { .notice[role="status"] .icon { animation: spin 1.6s linear infinite; } }