/* Project-wide compact semantic badges and opt-in blink utility. */
.app-badge {
  --app-badge-bg: rgba(148, 163, 184, .12);
  --app-badge-border: rgba(148, 163, 184, .28);
  --app-badge-color: #e2e8f0;
  --app-badge-glow: rgba(148, 163, 184, .10);
  align-items: center;
  background: var(--app-badge-bg);
  border: 1px solid var(--app-badge-border);
  border-radius: .34rem;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, .08),
    0 .18rem .55rem rgba(2, 6, 23, .24),
    0 0 .65rem var(--app-badge-glow);
  color: var(--app-badge-color);
  display: inline-flex;
  font-size: .68rem;
  font-weight: 850;
  gap: .3rem;
  justify-content: center;
  letter-spacing: .01em;
  line-height: 1;
  min-height: 1.45rem;
  padding: .28rem .46rem;
  vertical-align: middle;
  white-space: nowrap;
}

.app-badge--success {
  --app-badge-bg: linear-gradient(145deg, rgba(22, 163, 74, .24), rgba(5, 150, 105, .14));
  --app-badge-border: rgba(74, 222, 128, .42);
  --app-badge-color: #bbf7d0;
  --app-badge-glow: rgba(34, 197, 94, .16);
}

.app-badge--warning {
  --app-badge-bg: linear-gradient(145deg, rgba(217, 119, 6, .25), rgba(245, 158, 11, .14));
  --app-badge-border: rgba(251, 191, 36, .44);
  --app-badge-color: #fef3c7;
  --app-badge-glow: rgba(245, 158, 11, .17);
}

.app-badge--danger {
  --app-badge-bg: linear-gradient(145deg, rgba(220, 38, 38, .24), rgba(244, 63, 94, .13));
  --app-badge-border: rgba(248, 113, 113, .43);
  --app-badge-color: #fecaca;
  --app-badge-glow: rgba(239, 68, 68, .17);
}

.app-badge--info {
  --app-badge-bg: linear-gradient(145deg, rgba(37, 99, 235, .24), rgba(14, 165, 233, .14));
  --app-badge-border: rgba(96, 165, 250, .43);
  --app-badge-color: #dbeafe;
  --app-badge-glow: rgba(59, 130, 246, .17);
}

.app-badge--neutral {
  --app-badge-bg: linear-gradient(145deg, rgba(100, 116, 139, .20), rgba(71, 85, 105, .12));
  --app-badge-border: rgba(148, 163, 184, .30);
  --app-badge-color: #d7e0ec;
  --app-badge-glow: rgba(100, 116, 139, .10);
}

/* Explicit utility: one second cycle, visible for 500 ms and hidden for 500 ms. */
.app-blink,
.blink {
  animation: app-blink 1s steps(1, end) infinite;
}

@keyframes app-blink {
  0%, 49.999% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .app-blink,
  .blink {
    animation: none !important;
  }
}