.webhook-panel { max-width: 880px; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 5px 20px #14342b08; }
.webhook-panel > p { color: var(--muted); }
.badge { padding: 6px 10px; border-radius: 999px; background: #f3e7e9; color: #a33b49; font-size: 12px; font-weight: 700; }
.badge.enabled { background: #e2f7ef; color: #087d5e; }
.webhook-fields { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; margin: 24px 0; }
.webhook-fields label { font-size: 12px; font-weight: 700; }
.webhook-fields input { display: block; width: 100%; margin-top: 7px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #f8faf9; }
.secondary { padding: 11px 15px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; font-weight: 700; }
.token-box { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 16px; border: 1px solid #b9dfd3; border-radius: 10px; background: #f2fbf8; }
.token-box strong, .token-box small { grid-column: 1 / -1; }
.token-box code { padding: 10px; overflow-wrap: anywhere; background: #fff; border-radius: 7px; }
.webhook-actions { display: flex; gap: 10px; margin-top: 18px; }
.inline-message { min-height: 20px; margin-top: 14px; color: var(--muted); }
@media (max-width: 600px) { .webhook-fields { grid-template-columns: 1fr; } .webhook-actions { flex-direction: column; } }