.webhook-topbar { grid-template-columns: minmax(0, 1fr) auto; }
.webhook-topbar a.button, .webhook-auth-actions a.button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.webhook-workspace { max-width: 1440px; }
.webhook-intro { padding: 28px 0; }
.webhook-auth { padding: var(--apple-card-padding); }
.webhook-intro h1 { margin: 8px 0 20px; font-family: var(--apple-font-display); font-size: 48px; font-weight: 600; line-height: 1.083493; letter-spacing: -.003em; }
.webhook-intro .muted { max-width: 1000px; }
.webhook-note, .webhook-ack-note, .webhook-json-note, .webhook-search-help { color: var(--muted); font-size: .8125rem; line-height: 1.6; }
.webhook-note { margin: 1rem 0 0; max-width: 1100px; }
.webhook-auth h2, .webhook-list-heading h2, .webhook-detail-heading h2 { margin: 0; font-family: var(--apple-font-display); font-size: var(--apple-section-size); font-weight: 600; line-height: var(--apple-section-line); letter-spacing: var(--apple-section-tracking); }
.webhook-auth-actions { display: flex; gap: .75rem; margin-top: 1rem; }
.webhook-data-panel { overflow: hidden; }
.webhook-list-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 28px 28px 8px; }
.webhook-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .75rem; padding: .75rem 1.5rem .25rem; }
.webhook-search-help { margin: .35rem 1.5rem 1rem; }
.webhook-list-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; padding: .75rem 1.5rem; border-block: 1px solid var(--border); background: var(--surface-soft); color: var(--muted); font-size: .75rem; }
.webhook-load-status { display: grid; gap: .1rem; min-width: 180px; }
.webhook-load-status > span { display: block; min-height: 1.5em; }
#webhookCount { color: var(--muted-strong); font-weight: 600; }
.webhook-error { padding: 1rem 1.5rem; color: var(--red); background: var(--red-soft); overflow-wrap: anywhere; }
.webhook-error p { margin: 0 0 .65rem; }
.webhook-table-wrap { min-width: 0; }
.webhook-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.webhook-table th { color: var(--muted-strong); font-size: .8125rem; font-weight: 600; }
.webhook-table th, .webhook-table td { padding: .9rem 1rem; vertical-align: top; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.webhook-table th:first-child, .webhook-table td:first-child { padding-left: 1.5rem; }
.webhook-table th:last-child, .webhook-table td:last-child { padding-right: 1.5rem; }
.webhook-table th:nth-child(1) { width: 12%; }
.webhook-table th:nth-child(2) { width: 37%; }
.webhook-table th:nth-child(3) { width: 23%; }
.webhook-table th:nth-child(4) { width: 16%; }
.webhook-table th:nth-child(5) { width: 12%; }
.webhook-event-id, .webhook-sender { display: block; font-weight: 650; }
.webhook-event-id { font-variant-numeric: tabular-nums; }
.webhook-event-type, .webhook-message, .webhook-comment-id, .webhook-time, .webhook-ack-time { display: block; margin: .3rem 0 0; }
.webhook-event-type, .webhook-comment-id, .webhook-time, .webhook-ack-time { color: var(--muted); font-size: .75rem; }
.webhook-message { white-space: pre-wrap; }
.webhook-comment-id { font-family: "Cascadia Mono", Consolas, monospace; }
.webhook-ack { display: inline-block; padding: .2rem .5rem; border-radius: 6px; font-size: .75rem; font-weight: 600; background: var(--green-soft); color: var(--green); }
.webhook-ack.pending { background: var(--amber-soft); color: #805400; }
.webhook-empty { text-align: center; margin: 0; padding: 2.5rem 1rem; color: var(--muted); }
.webhook-pagination { min-height: 76px; display: flex; justify-content: center; align-items: center; padding: 1rem; }
.webhook-ack-note { margin: 0; padding: 0 1.5rem 1.25rem; }
.webhook-detail-dialog { width: min(940px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--apple-card-shadow); overflow: auto; }
.webhook-detail-dialog::backdrop { background: #1d1d1f66; }
.webhook-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
#webhookDetailProgress { min-height: 1.5em; margin: .5rem 0; color: var(--muted); font-size: .8125rem; }
.webhook-detail-fields { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: .55rem 1rem; margin: 0; }
.webhook-detail-fields dt { color: var(--muted); font-size: .8125rem; }
.webhook-detail-fields dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.webhook-detail-dialog h3 { margin: 1.5rem 0 .25rem; font-size: 1rem; }
.webhook-json-note { margin: 0 0 .75rem; }
.webhook-raw-json { margin: 0; max-height: 420px; padding: 1rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-soft); font: .8125rem/1.6 "Cascadia Mono", Consolas, monospace; }
@media (max-width: 800px) {
  .webhook-topbar { gap: .75rem; }
  .webhook-topbar .brand span { display: none; }
  .webhook-intro { padding: 20px 0; }
  .webhook-auth { padding: 20px; }
  .webhook-intro h1 { font-size: 28px; line-height: 32px; letter-spacing: .007em; }
  .webhook-list-heading { padding: 1.25rem 1rem .5rem; }
  .webhook-search-form { grid-template-columns: minmax(0, 1fr); padding-inline: 1rem; }
  .webhook-search-help { margin-inline: 1rem; }
  .webhook-list-meta { padding-inline: 1rem; }
  .webhook-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .webhook-table tbody, .webhook-table tr, .webhook-table td { display: block; width: 100%; }
  .webhook-table tr { padding: 1rem; border-bottom: 1px solid var(--border); }
  .webhook-table td, .webhook-table td:first-child, .webhook-table td:last-child { padding: .4rem 0; border: 0; }
  .webhook-table td::before { content: attr(data-label); display: block; margin-bottom: .25rem; color: var(--muted-strong); font-size: .75rem; font-weight: 600; }
  .webhook-table td:last-child::before { display: none; }
  .webhook-ack-note { padding-inline: 1rem; }
  .webhook-detail-dialog { padding: 1rem; }
  .webhook-detail-fields { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .webhook-detail-fields dd { margin-bottom: .6rem; }
}
@media (max-width: 520px) {
  .webhook-topbar { grid-template-columns: minmax(0, 1fr); }
  .webhook-topbar > a.button { justify-self: start; }
}