.status-box {
  --status-box-accent: #94a3b8;

  backdrop-filter: blur(14px);
  background: linear-gradient(135deg, rgba(71, 85, 105, 0.34), rgba(148, 163, 184, 0.16));
  border: 0;
  border-radius: 0;
  box-shadow: 0 0.85rem 2rem rgba(0, 0, 0, 0.16);
  color: #e2e8f0;
  font-weight: 400;
  line-height: 1.5;
  margin: 0.7rem 0 1rem;
  overflow: hidden;
  padding: 0.95rem 1.1rem 0.95rem 1.35rem;
  position: relative;
}

.status-box::before {
  background: var(--status-box-accent);
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: 0.32rem;
}

.status-box a {
  color: inherit;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.status-box--info {
  --status-box-accent: #38bdf8;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.32), rgba(14, 165, 233, 0.18));
  color: #e0f2fe;
}

.status-box--success {
  --status-box-accent: #22c55e;
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.3), rgba(20, 184, 166, 0.16));
  color: #dcfce7;
}

.status-box--warning {
  --status-box-accent: #f59e0b;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.32), rgba(251, 191, 36, 0.16));
  color: #fef3c7;
}

.status-box--danger {
  --status-box-accent: #ef4444;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.34), rgba(244, 63, 94, 0.16));
  color: #fee2e2;
}

.status-box--neutral {
  --status-box-accent: #94a3b8;
}