.socialhero-settings { max-width: 1240px; }
.socialhero-settings__heading { display: flex; align-items: center; gap: 10px; margin: 22px 0 12px; }
.socialhero-settings__heading h1 { margin: 0; }
.socialhero-settings__version { color: #646970; }
.socialhero-settings__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; margin-top: 20px; }
.socialhero-settings__primary, .socialhero-settings__secondary { min-width: 0; }
.socialhero-settings__card { box-sizing: border-box; margin: 0 0 20px; padding: 20px; border: 1px solid #dcdcde; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.socialhero-settings__card h2 { margin: 0 0 14px; font-size: 16px; }
.socialhero-settings__card-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.socialhero-settings__card-heading h2 { margin-bottom: 0; }
.socialhero-badge { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.socialhero-badge--success { background: #bbf7d0; color: #166534; }
.socialhero-badge--warning { background: #fef3c7; color: #92400e; }
.socialhero-credentials-summary, .socialhero-settings__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.socialhero-credentials-summary { margin: 16px 0; }
.socialhero-credentials-summary > div { min-width: 0; padding: 12px; border-radius: 8px; background: #f6f7f7; }
.socialhero-credentials-summary label, .socialhero-field label { display: block; margin-bottom: 6px; color: #50575e; font-weight: 600; }
.socialhero-credential-preview input { box-sizing: border-box; width: 100%; min-height: 24px; padding: 0; border: 0; background: transparent; color: #1d2327; font-weight: 600; opacity: 1; cursor: not-allowed; }
.socialhero-credential-preview input:disabled { background: transparent; color: #1d2327; opacity: 1; -webkit-text-fill-color: #1d2327; }
.socialhero-settings__security-note { max-width: 760px; }
.socialhero-settings__error-note { color: #b32d2e; font-weight: 600; }
.socialhero-credentials-form { margin-top: 16px; padding-top: 4px; }
.socialhero-credentials-form.is-hidden { display: none; }
.socialhero-inline-status { margin: 14px 0; padding: 8px 12px; border-left: 4px solid #2271b1; background: #f0f6fc; }
.socialhero-inline-status p { margin: 0; }
.socialhero-inline-status.is-hidden { display: none; }
.socialhero-inline-status.is-success { border-left-color: #00a32a; background: #edfaef; }
.socialhero-inline-status.is-error { border-left-color: #d63638; background: #fcf0f1; }
.socialhero-webhook-information { margin-top: 18px; }
.socialhero-webhook-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.socialhero-field { min-width: 0; }
.socialhero-field--full { grid-column: 1 / -1; }
.socialhero-field select, .socialhero-field input { width: 100%; min-height: 38px; }
.socialhero-field input[readonly] { background: #f6f7f7; color: #50575e; }
.socialhero-field .description { margin: 5px 0 0; }
.socialhero-information-list { margin: 0; }
.socialhero-information-list > div { margin: 0 0 15px; }
.socialhero-information-list > div:last-child { margin-bottom: 0; }
.socialhero-information-list dt { margin-bottom: 4px; font-weight: 600; }
.socialhero-information-list dd { margin: 0; overflow-wrap: anywhere; }
.socialhero-toggle { display: flex; align-items: center; gap: 9px; margin: 14px 0; color: #3c434a; }
.socialhero-toggle input { appearance: none; width: 34px; height: 18px; margin: 0; border: 0; border-radius: 999px; background: #8c8f94; opacity: 1; }
.socialhero-toggle input:checked { background: #2271b1; }
.socialhero-toggle input:checked::before { transform: translateX(16px); }
.socialhero-toggle input::before { content: ''; display: block; width: 14px; height: 14px; margin: 2px; border-radius: 50%; background: #fff; box-shadow: none; transition: transform .15s ease; }
@media (max-width: 782px) { .socialhero-settings__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .socialhero-credentials-summary, .socialhero-settings__fields { grid-template-columns: 1fr; } }