.billing-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-sm);
  font-weight: 500;
  text-align: center;
}

.billing-banner--accent {
  background: var(--accent-muted, rgba(167, 139, 250, 0.10));
  color: var(--accent, #a78bfa);
}

.billing-banner--warning {
  background: var(--warning-bg, rgba(224, 144, 80, 0.12));
  color: var(--warning, #e09050);
}

.billing-banner--danger {
  background: var(--danger-bg, rgba(224, 124, 124, 0.12));
  color: var(--danger, #e07c7c);
}

.billing-banner__message {
  margin: 0;
}

.billing-banner__cta {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
  white-space: nowrap;
}

.billing-banner__cta:hover {
  opacity: 0.8;
}

@media (min-width: 769px) {
  .billing-banner {
    margin-left: var(--sidebar-width);
    transition: margin-left 0.25s var(--ease-out);
  }

  .nav--collapsed ~ .billing-banner,
  html.sidebar-collapsed .billing-banner {
    margin-left: var(--sidebar-collapsed);
  }
}