.sivar-inline-notice {
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  border: 1px solid rgb(var(--sivar-line));
  background: rgb(var(--sivar-surface));
  color: rgb(var(--sivar-ink-soft));
}

.sivar-inline-notice__title {
  display: block;
  margin-bottom: 2px;
  color: rgb(var(--sivar-ink));
}

.sivar-inline-notice__body {
  display: block;
}

.sivar-inline-notice--info {
  color: rgb(var(--sivar-blue));
  background: rgb(var(--sivar-blue) / 0.1);
  border-color: rgb(var(--sivar-blue) / 0.28);
}

.sivar-inline-notice--warning {
  color: rgb(var(--sivar-mustard));
  background: rgb(var(--sivar-mustard) / 0.12);
  border-color: rgb(var(--sivar-mustard) / 0.3);
}

.sivar-inline-notice--error {
  color: rgb(var(--sivar-red));
  background: rgb(var(--sivar-red) / 0.1);
  border-color: rgb(var(--sivar-red) / 0.3);
}

.sivar-inline-notice--success {
  color: rgb(var(--sivar-green));
  background: rgb(var(--sivar-green) / 0.08);
  border-color: rgb(var(--sivar-green) / 0.28);
}

.sivar-media-state-badge {
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 20px);
  border-radius: var(--r-pill);
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  background: rgb(0 0 0 / 0.58);
  border: 1px solid rgb(255 255 255 / 0.16);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
}

.sivar-media-state-badge--failed {
  background: rgb(var(--sivar-red) / 0.86);
  border-color: rgb(255 255 255 / 0.22);
}

.sivar-media-state-badge--ready {
  background: rgb(var(--sivar-green) / 0.86);
  border-color: rgb(255 255 255 / 0.22);
}

.sivar-staging-mode-banner {
  border-radius: 12px;
  padding: 11px 12px;
  color: rgb(var(--sivar-mustard));
  background: rgb(var(--sivar-mustard) / 0.13);
  border: 1px solid rgb(var(--sivar-mustard) / 0.34);
  font-size: 12px;
  line-height: 1.4;
}

.sivar-staging-mode-banner__title {
  display: block;
  margin-bottom: 2px;
  color: rgb(var(--sivar-ink));
  font-size: 12.5px;
}

.sivar-staging-mode-banner__body {
  display: block;
  color: rgb(var(--sivar-ink-soft));
}

.sivar-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgb(var(--sivar-ink-soft, 89 92 99));
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.sivar-status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgb(var(--sivar-ink-soft, 89 92 99));
}

.sivar-status-badge--mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 650;
}

.sivar-status-badge--live::before,
.sivar-status-badge--ok::before {
  background: rgb(var(--sivar-forest, var(--sivar-green, 45 107 71)));
}

.sivar-status-badge--verified::before {
  background: rgb(var(--sivar-red, var(--sivar-accent, 192 57 43)));
}

.sivar-status-badge--new::before,
.sivar-status-badge--warn::before {
  background: rgb(var(--sivar-mustard, 200 154 46));
}

.sivar-status-badge--bad::before {
  background: rgb(var(--sivar-clay, var(--sivar-red, 168 85 60)));
}

.sivar-status-badge--info::before,
.sivar-status-badge--muted::before,
.sivar-status-badge--neutral::before {
  background: rgb(var(--sivar-ink-soft, 89 92 99));
}

.sivar-status-badge--pulse::before {
  box-shadow: 0 0 0 3px rgb(var(--sivar-forest, var(--sivar-green, 45 107 71)) / 0.18);
}