.alerts-section {
  margin-top: 1rem;
  padding: 1.1rem;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.alert-heading { align-items: center; }
.alert-counts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
  margin-top: .85rem;
}
.alert-counts > div {
  min-width: 0;
  padding: .62rem;
  border-radius: .7rem;
  background: var(--surface-soft);
}
.alert-counts span { display: block; color: var(--muted); font-size: .7rem; font-weight: 700; }
.alert-counts strong { display: block; margin-top: .08rem; font-size: 1.08rem; }
.alert-message { min-height: 1.2rem; margin: .65rem 0 0; color: var(--muted); font-size: .8rem; }
.alert-list { display: grid; gap: .55rem; margin-top: .75rem; }
.alert-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .65rem;
  align-items: start;
  min-width: 0;
  padding: .68rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background: var(--surface-soft);
}
.alert-state {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: .22rem .45rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  font-size: .67rem;
  font-weight: 800;
  white-space: nowrap;
}
.alert-state-delivered { color: var(--good); }
.alert-state-failed { color: var(--bad); }
.alert-state-digest_pending { color: var(--accent); }
.alert-state-pending { color: var(--warn); }
.alert-body { min-width: 0; }
.alert-title { margin: 0; overflow-wrap: anywhere; font-size: .87rem; }
.alert-meta, .alert-error { margin-top: .2rem; color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }
.alert-error { color: var(--bad); }
.alert-price { white-space: nowrap; font-size: .88rem; }
.alert-link { color: var(--accent); text-underline-offset: .15em; }

@media (max-width: 640px) {
  .alerts-section { padding: .85rem; border-radius: .85rem; box-shadow: none; }
  .alert-heading { align-items: flex-start; }
  .alert-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alert-card { grid-template-columns: 1fr auto; }
  .alert-state { grid-column: 1 / -1; width: fit-content; }
}