.saas-setup { max-width: 560px; width: 100%; margin: 32px auto; padding: 0 12px; }
.saas-setup > img { object-fit: contain; margin-bottom: 24px; }
.saas-eyebrow { color: var(--primary); font-size: 12px; font-weight: 600; margin-bottom: 10px; }
.saas-setup h1, .saas-connect-page h1 { font-size: 28px; line-height: 1.25; margin-bottom: 10px; }
.saas-muted { color: var(--text-tertiary); font-size: 13px; overflow-wrap: anywhere; }
.saas-setup-form { display: grid; gap: 24px; margin-top: 32px; }
.saas-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.saas-field label span { font-weight: 400; color: var(--text-tertiary); }
.saas-field .form-input-styled { width: 100%; min-width: 0; border-radius: 6px; }
.saas-field-error { font-size: 12px; color: #b42318; margin-top: 6px; }
.saas-dialog { width: min(600px, calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: white; color: var(--text-primary); box-shadow: 0 24px 80px #0003; }
.saas-dialog::backdrop { background: #0006; }
.saas-dialog[open] { display: flex; flex-direction: column; }
.saas-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.saas-dialog-header h2 { font-size: 20px; font-weight: 600; margin: 0; }
.saas-dialog-body { padding: 20px 24px; overflow-y: auto; min-height: 0; }
.saas-dialog .firas-icon-button { background: white; cursor: pointer; }
body:has(.saas-dialog[open]) { overflow: hidden; }
.saas-connect-page { max-width: 760px; width: 100%; margin: 0 auto; }
.saas-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 24px; }
.saas-back .lucide, .saas-search .lucide { width: 18px; height: 18px; flex-shrink: 0; }
.saas-connect-workspace { margin-bottom: 20px; }
.ohy-channel-count-label { display: flex; align-items: center; gap: 7px; }
.ohy-channel-count { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 4px; background: #ededf0; color: #65676f; font-size: 10px; }
.ohy-logo-editor { display: flex; align-items: center; gap: 16px; }
.ohy-logo-preview { width: 64px; height: 64px; flex-shrink: 0; }
.ohy-logo-preview img, .ohy-logo-preview > span { width: 64px; height: 64px; border: 1px solid var(--border); border-radius: 6px; object-fit: contain; background: #f7f7f8; }
.ohy-logo-preview > span { display: grid; place-items: center; color: var(--text-tertiary); }
.ohy-logo-copy { min-width: 0; }
.ohy-logo-copy label { font-size: 13px; font-weight: 600; }
.ohy-logo-copy p { font-size: 11px; color: var(--text-tertiary); margin: 4px 0 10px; }
.ohy-logo-copy input { font-size: 12px; max-width: 100%; width: 100%; }
.ohy-logo-copy input::file-selector-button { border: 1px solid var(--border); padding: 7px 10px; border-radius: 5px; background: white; cursor: pointer; margin-right: 8px; }
.ohy-logo-status { font-size: 12px; color: var(--text-secondary); margin: 12px 0; overflow-wrap: anywhere; }
.ohy-logo-status[data-error="true"] { color: #be123c; }
.ohy-logo-actions { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; }
.ohy-logo-actions button:disabled { opacity: .5; cursor: not-allowed; }
#workspace-logo [hidden] { display: none; }
.saas-connect-workspace strong { color: var(--text-primary); margin-left: 6px; font-weight: 500; }
.ohy-meta-connect { width: 100%; max-width: 820px; margin: 0 auto; padding: 18px 12px 36px; }
.ohy-meta-title { display: flex; align-items: center; gap: 14px; margin: 20px 0 26px; }
.ohy-meta-title h1 { font-family: var(--font-display); font-size: 26px; line-height: 1.25; font-weight: 650; }
.ohy-meta-title .saas-provider-icon { width: 44px; height: 44px; }
.ohy-connection-target { display: flex; align-items: center; gap: 12px; padding: 18px 0; border-block: 1px solid var(--border); margin-bottom: 24px; }
.ohy-connection-target > .lucide { color: var(--primary); }
.ohy-connection-target > div { min-width: 0; }
.ohy-connection-target strong { display: block; font-size: 15px; overflow-wrap: anywhere; }
.ohy-connection-target span { font-size: 11px; color: var(--text-secondary); }
.ohy-connection-target .ohy-scope-label { margin-left: auto; text-align: right; }
.ohy-meta-authorize { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.ohy-meta-authorize > span { display: flex; align-items: center; gap: 6px; color: var(--text-tertiary); font-size: 11px; }
.ohy-meta-authorize > span .lucide { width: 14px; height: 14px; }
.ohy-meta-help details { border-bottom: 1px solid var(--border); padding: 16px 0; }
.ohy-meta-help summary { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ohy-meta-help summary > .lucide:last-child { margin-left: auto; transition: transform .15s; }
.ohy-meta-help details[open] summary > .lucide:last-child { transform: rotate(180deg); }
.ohy-meta-help p { color: var(--text-secondary); font-size: 12px; line-height: 1.7; margin: 14px 0 10px; max-width: 650px; }
.ohy-meta-help a, .ohy-picker-retry a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--brand-700); }
.ohy-existing-channels { margin-top: 30px; }
.ohy-existing-channels h2 { font-size: 15px; font-weight: 600; margin-bottom: 16px; overflow-wrap: anywhere; }
.ohy-existing-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.ohy-existing-row img { width: 36px; height: 36px; object-fit: cover; border-radius: 6px; }
.ohy-existing-row strong { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
.ohy-existing-row span { font-size: 11px; color: var(--text-secondary); }
.ohy-add-channels { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 24px; }
.ohy-connection-notice { font-size: 13px; padding: 16px 0; color: var(--text-secondary); }
.ohy-picker-toolbar { display: flex; justify-content: space-between; gap: 10px; margin: 18px 0 12px; font-size: 11px; color: var(--text-secondary); }
.ohy-picker-toolbar > div { display: flex; gap: 16px; }
.ohy-picker-toolbar button { color: var(--brand-700); cursor: pointer; }
.ohy-picker-row { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 10px; cursor: pointer; }
.ohy-picker-row[hidden], [data-page-no-results][hidden] { display: none; }
.ohy-picker-row:has(input:checked) { background: #fff5f6; border-color: #ee6675; }
.ohy-picker-row[data-unavailable] { background: #f7f7f8; cursor: not-allowed; }
.ohy-picker-row > input { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }
.ohy-picker-row > img, .ohy-picker-avatar { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; display: grid; place-items: center; flex-shrink: 0; background: #f5f5f6; }
.ohy-picker-name { flex: 1; min-width: 0; }
.ohy-picker-name strong { display: block; font-size: 13px; overflow-wrap: anywhere; }
.ohy-picker-name small { display: block; font-size: 11px; margin-top: 4px; color: var(--text-secondary); overflow-wrap: anywhere; }
.ohy-picker-name .ohy-picker-status { color: #187153; }
.ohy-picker-row[data-unavailable] .ohy-picker-status { color: #976015; }
.ohy-picker-followers { font-size: 11px; color: var(--text-secondary); }
.ohy-picker-footer { display: flex; gap: 10px; margin: 22px 0; }
.ohy-picker-footer button:disabled { opacity: .5; cursor: not-allowed; }
.ohy-picker-retry { display: flex; gap: 12px 24px; flex-wrap: wrap; padding: 18px 0; border-top: 1px solid var(--border); }
@media (max-width: 500px) {
  .ohy-meta-connect { padding: 8px 4px 24px; }
  .ohy-meta-title h1 { font-size: 22px; }
  .ohy-connection-target { flex-wrap: wrap; }
  .ohy-connection-target .ohy-scope-label { width: 100%; text-align: left; margin-left: 30px; }
  .ohy-picker-row { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .ohy-picker-followers { width: 100%; padding-left: 26px; }
  .ohy-picker-toolbar { flex-wrap: wrap; }
}
.saas-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; margin-bottom: 12px; color: var(--text-tertiary); }
.saas-search:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.saas-search input { border: 0; outline: 0; background: transparent; width: 100%; min-width: 0; font-size: 13px; color: var(--text-primary); }
.saas-provider { display: flex; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.saas-provider[hidden], .saas-no-results[hidden] { display: none; }
.saas-provider-icon { width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 6px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.saas-provider-name { flex: 1; min-width: 0; }
.saas-provider-name strong { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.saas-provider-name small { display: block; font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
.saas-provider button { flex-shrink: 0; font-size: 12px; }
.saas-provider button:disabled { cursor: not-allowed; color: var(--text-tertiary); background: #f6f6f6; }
.saas-no-results { padding: 24px 0; }
.saas-provider-primary { padding: 24px 0; }
.saas-provider-primary .saas-provider-name strong { font-size: 16px; }
.saas-provider-name p { font-size: 12px; line-height: 1.5; color: var(--text-secondary); margin-top: 5px; }
.saas-provider-primary .saas-provider-icon { width: 42px; height: 42px; }
.saas-provider-icon[data-platform="facebook"] { color: #1877f2; background: #f0f6ff; border-color: #dce8fa; }
.saas-provider-icon[data-platform="instagram"] { color: #c13584; background: #fff3f8; border-color: #f4dfeb; }
.saas-meta-settings { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 12px; color: var(--text-secondary); }
.saas-meta-settings .lucide, .saas-meta-links .lucide { width: 15px; height: 15px; }
.saas-other-channels { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 16px; }
.saas-other-channels summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }
.saas-other-channels summary::-webkit-details-marker { display: none; }
.saas-other-channels summary .lucide { width: 16px; height: 16px; }
.saas-other-channels[open] summary { margin-bottom: 20px; }
.saas-other-channels[open] summary .lucide { transform: rotate(180deg); }
.saas-meta-setup { width: 100%; max-width: 640px; margin: 16px auto; }
.saas-meta-setup h1 { font-size: 28px; font-weight: 600; margin-bottom: 8px; }
.saas-meta-callbacks { padding: 28px 0; margin-top: 24px; border-block: 1px solid var(--border); display: grid; gap: 16px; }
.saas-meta-callbacks h2 { font-size: 16px; font-weight: 600; }
.saas-copy-row { display: flex; gap: 8px; align-items: center; }
.saas-copy-row input { font-family: var(--font-mono); font-size: 12px; }
.saas-copy-row button { flex-shrink: 0; }
.saas-meta-notice { margin: 24px 0; font-size: 13px; }
.saas-meta-links { display: flex; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--border); padding-top: 24px; margin-top: 32px; }
.saas-meta-links a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-tertiary); }
.saas-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.saas-section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.saas-section-header h2 { margin: 0; }
.saas-start { border-bottom: 1px solid var(--border); padding: 20px 0; }
.saas-start h2 { font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.saas-start-steps { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.saas-start-steps a { display: inline-flex; gap: 8px; align-items: center; font-size: 12px; }
.saas-start-steps .lucide { height: 16px; width: 16px; color: var(--primary); }
@media (max-width: 480px) {
  .saas-setup { margin-top: 16px; }
  .saas-setup h1 { font-size: 24px; }
  .saas-dialog-header, .saas-dialog-body { padding: 16px; }
  .saas-provider { gap: 8px; }
  .saas-provider button { padding: 8px; font-size: 11px; }
  .saas-provider-primary { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
  .saas-provider-primary > button, .saas-provider-primary > a { grid-column: 2; justify-self: start; }
  .saas-meta-setup h1 { font-size: 24px; }
}
.ohy-instagram-methods { margin: 24px 0; }
.ohy-connect-method { padding: 22px 0; border-bottom: 1px solid var(--border); }
.ohy-method-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.ohy-method-heading > .lucide { flex-shrink: 0; width: 24px; height: 24px; color: #cc1744; }
.ohy-method-heading h2 { font-size: 18px; margin: 0 0 6px; }
.ohy-method-heading p, .ohy-connection-help > p { font-size: 13px; color: #62676e; line-height: 1.6; }
.ohy-connection-help { padding: 0 0 20px; }
.ohy-connection-help summary { cursor: pointer; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
