.webhook-docs-page,
.webhook-admin-page {
  background: var(--bg-canvas, var(--chat-bg, var(--bg-body)));
  color: var(--text-primary, var(--chat-text));
}

.webhook-shell,
.webhook-admin-grid,
.webhook-panel,
.webhook-section,
.webhook-event-card,
.webhook-code-card,
.webhook-health-card,
.webhook-endpoint-card,
.webhook-attempt-card,
.webhook-health-banner {
  border: 1px solid var(--border-subtle, var(--chat-border));
  background: var(--bg-surface, var(--chat-panel));
  border-radius: 18px;
}

.webhook-shell {
  width: min(1120px, calc(100vw - 32px));
  margin: 32px auto 48px;
  display: grid;
  gap: 20px;
}

.webhook-hero,
.webhook-section,
.webhook-panel {
  padding: 24px;
}

.webhook-proof-lines,
.webhook-best-practices,
.webhook-retry-list {
  margin: 12px 0 0;
  padding-left: 18px;
}

.webhook-subhead,
.webhook-event-card p,
.webhook-attempt-card p,
.webhook-empty,
.webhook-inline-check span,
.webhook-form small,
.webhook-event-card__domain,
.webhook-health-card small {
  color: var(--text-secondary, var(--chat-muted));
}

.webhook-code-grid,
.webhook-health-grid,
.webhook-admin-grid {
  display: grid;
  gap: 16px;
}

.webhook-code-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.webhook-code-card,
.webhook-event-card,
.webhook-health-card,
.webhook-endpoint-card,
.webhook-attempt-card {
  padding: 16px;
}

.webhook-code-card pre,
.webhook-event-card pre,
.webhook-secret-once {
  overflow-x: auto;
  padding: 14px;
  border-radius: 14px;
  background: var(--bg-elevated, var(--chat-surface));
  border: 1px solid var(--border-subtle, var(--chat-border));
}

.webhook-events-table,
.webhook-endpoint-list,
.webhook-attempt-list {
  display: grid;
  gap: 14px;
}

.webhook-event-card__head,
.webhook-panel__head,
.webhook-endpoint-card,
.webhook-action-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.webhook-event-card__status,
.webhook-endpoint-card__meta span,
.webhook-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--bg-elevated, var(--chat-surface));
  border: 1px solid var(--border-subtle, var(--chat-border));
  font-size: 0.82rem;
}

.webhook-form {
  display: grid;
  gap: 16px;
}

.webhook-form label,
.webhook-form fieldset {
  display: grid;
  gap: 8px;
}

.webhook-form input,
.webhook-form textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border-subtle, var(--chat-border));
  background: var(--bg-elevated, var(--chat-surface));
  color: inherit;
  padding: 12px 14px;
}

.webhook-inline-check {
  display: flex;
  gap: 10px;
  align-items: center;
}

.webhook-event-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.webhook-health-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.webhook-health-banner {
  padding: 16px 18px;
}

.webhook-health-banner.tone-healthy {
  background: var(--bg-surface, var(--chat-panel));
}

.webhook-health-banner.tone-warning,
.webhook-health-banner.tone-critical {
  background: var(--bg-elevated, var(--chat-surface));
}

.webhook-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.webhook-facts div,
.webhook-health-card {
  display: grid;
  gap: 4px;
}

@media (max-width: 900px) {
  .webhook-code-grid,
  .webhook-health-grid,
  .webhook-admin-grid,
  .webhook-event-choices,
  .webhook-facts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 375px) {
  .webhook-shell {
    width: min(100vw - 20px, 1120px);
    margin: 20px auto 32px;
  }

  .webhook-hero,
  .webhook-section,
  .webhook-panel {
    padding: 18px;
  }

  .webhook-panel__head,
  .webhook-endpoint-card,
  .webhook-action-row,
  .webhook-event-card__head {
    flex-direction: column;
    align-items: flex-start;
  }
}