/* Alerts screen — segmented tabs, alert rows, rule rows, toast. */
.al-seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 2px; }
.al-seg.sm { border-radius: var(--r-sm); }
.al-seg-btn {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--text-3); font-size: var(--fs-sm); font-weight: 500;
  padding: 6px 14px; border-radius: var(--r-sm); transition: background var(--t-fast), color var(--t-fast);
}
.al-seg.sm .al-seg-btn { padding: 4px 11px; font-size: var(--fs-xs); }
.al-seg-btn:hover { color: var(--text-1); }
.al-seg-btn.active { background: var(--bg-4); color: var(--text-1); }

.al-empty {
  padding: 48px 16px; text-align: center; color: var(--text-3);
  font-size: var(--fs-sm); display: flex; flex-direction: column; align-items: center; gap: 4px;
}

.alert-row:last-child { border-bottom: 0 !important; }
.alert-row:hover { background: var(--hover); }

.al-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--bg-4); color: var(--text-1); border: 1px solid var(--border-strong);
  padding: 10px 16px; border-radius: var(--r-md); font-size: var(--fs-sm);
  box-shadow: var(--shadow-pop); z-index: 1000;
  animation: al-toast-in var(--t-med) var(--ease-out);
}
@keyframes al-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Nav bell badge (unacked count). */
.nav-alert-dot {
  margin-left: auto; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--live); color: #fff;
  font-size: var(--fs-2xs); font-weight: 700; font-family: var(--font-mono);
  display: inline-flex; align-items: center; justify-content: center;
}