/* Facebook connection uses the existing CRM palette and leaves other dialogs alone. */
#facebookConnectTopBtn.crm-fb-connect-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    font-weight: 700;
}
#facebookConnectTopBtn[hidden] {display: none;}
#page-accounts .header-controls {flex-wrap: wrap;}
.crm-fb-connect-dialog {
    width: min(480px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid var(--border-light);
    border-radius: 16px;
    background: var(--card-bg);
    color: var(--text-main);
    box-shadow: 0 25px 50px -12px #0008;
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
}
.crm-fb-connect-dialog::backdrop {background: #0009;}
.crm-fb-connect-dialog [hidden] {display: none !important;}
.crm-fb-connect-dialog .crm-fb-connect-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.crm-fb-connect-dialog .modal-title {font-size: 18px; line-height: 1.4;}
.crm-fb-connect-close {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-muted);
    font: inherit;
    font-size: 21px;
    cursor: pointer;
}
.crm-fb-connect-copyline {display: flex; gap: 8px; align-items: center; margin: 8px 0 12px;}
.crm-fb-connect-copyline .modal-input {min-width: 0; flex: 1; margin: 0; font-size: 12px;}
.crm-fb-connect-dialog .modal-input {font-size: 13px; transition: border-color 140ms ease, box-shadow 140ms ease;}
.crm-fb-connect-dialog .modal-label {font-size: 12px;}
.crm-fb-connect-dialog p {margin: 0 0 12px;}
.crm-fb-connect-hint {color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere;}
.crm-fb-connect-status {min-height: 24px; margin: 12px 0 0; font-weight: 600; overflow-wrap: anywhere;}
.crm-fb-connect-status[data-tone="error"] {color: var(--danger);}
.crm-fb-connect-status[data-tone="success"] {color: var(--success-color);}
.crm-fb-connect-setup {
    background: var(--input-bg);
    border: 1px solid var(--border-light);
    padding: 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    overflow-wrap: anywhere;
}
.crm-fb-connect-setup ol {padding-left: 20px; margin: 8px 0;}
.crm-fb-connect-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px;}
.crm-fb-connect-dialog .btn-save,
.crm-fb-connect-dialog .btn-cancel,
.crm-fb-connect-dialog .top-action-btn {font-size: 12px; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;}
.crm-fb-connect-dialog .crm-fb-connect-revoke {color: var(--danger);}
.crm-fb-connect-dialog :is(button, a, input, select):focus-visible {outline: 2px solid var(--accent); outline-offset: 3px;}
.crm-fb-connect-dialog button:disabled {opacity: .6; cursor: default;}
.crm-fb-connect-dialog button:active:not(:focus-visible):not(:disabled) {transform: scale(.98);}
@media (hover: hover) and (pointer: fine) {
    .crm-fb-connect-dialog button:not(:disabled):hover {border-color: var(--accent);}
}
@media (max-width: 520px) {
    .crm-fb-connect-dialog {padding: 20px;}
    .crm-fb-connect-copyline {flex-wrap: wrap;}
    .crm-fb-connect-copyline .modal-input {flex-basis: 100%;}
    #page-accounts [data-fb-reconnect] {white-space: normal;}
}
@media (prefers-reduced-motion: reduce) {
    .crm-fb-connect-dialog :is(button, input, select) {transition: none;}
}