.fqbpro-query-editor.components-modal__frame {
  max-width: none;
  .components-modal__content {
    display: flex;
    flex-direction: column;
    margin-top: 0;
    padding: 0;
    overflow: hidden;
  }
  // WordPress 6.8 uses an unclassed content wrapper.
  .components-modal__content > .components-modal__children-container,
  .components-modal__content > div:last-child:not(.components-modal__header) {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .components-modal__header {
    display: none;
  }
}

.fqbpro-query-editor__workspace {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  position: relative;
}
.fqbpro-query-editor__workspace.is-navigation-collapsed { grid-template-columns: 52px minmax(0, 1fr); }
.fqbpro-query-editor__navigation {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 16px;
  border-right: 1px solid #ddd;
  background: #f7f7f7;
  overflow: auto;
  > .components-button { justify-content: flex-start; width: 100%; }
}
.fqbpro-query-editor__navigation.is-collapsed { padding: 16px 8px; overflow: hidden; }
.fqbpro-query-editor__title {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 8px 20px;
  h1 { flex: 1; margin: 4px 0 0; font-size: 16px; line-height: 1.4; font-weight: 600; }
  .components-button { flex: 0 0 auto; min-width: 30px; height: 30px; padding: 4px; }
}
.fqbpro-query-editor__navigation.is-collapsed .fqbpro-query-editor__title { margin: 0; }
.fqbpro-query-editor__draft-note { color: #646970; line-height: 1.6; margin: 24px 8px 0; }
.fqbpro-query-editor__actions {
  display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 20px 8px 0; border-top: 1px solid #ddd;
  > p { margin: 0 0 4px; color: #646970; font-size: 12px; line-height: 1.5; }
  > .components-button { width: 100%; min-height: 40px; justify-content: center; }
}
.fqbpro-query-editor__main {
  min-width: 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; padding: 0 48px 32px 32px;
  &::-webkit-scrollbar { display: none; }
}
.fqbpro-query-editor__scroll-rail {
  position: absolute; inset-block: 0; inset-inline-end: 0; z-index: 5;
  display: flex; flex-direction: column; width: 24px;
  border-inline-start: 1px solid #dcdcde; background: #f6f7f7;
  .components-button { flex: 0 0 24px; width: 24px; min-width: 24px; height: 24px; padding: 2px; }
  .components-button svg { width: 16px; height: 16px; }
}
.fqbpro-query-editor__scroll-track { position: relative; flex: 1; min-height: 0; touch-action: none; }
.fqbpro-query-editor__scroll-thumb {
  position: absolute; inset-inline: 4px; top: 0; border-radius: 10px; background: #777;
  cursor: grab; touch-action: none;
  &:active { cursor: grabbing; }
  &:focus-visible { outline: 2px solid #3858e9; outline-offset: 1px; }
}
.fqbpro-query-editor__section-heading { margin-bottom: 28px; padding-top: 32px; h2 { margin: 0 0 8px; font-size: 24px; } p { color: #646970; margin: 0; } }
.fqbpro-query-editor__settings { max-width: 920px; }
.fqbpro-query-editor__filters { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.fqbpro-query-editor__filter-sidebar { min-width: 0; }
.fqbpro-query-editor__add-control {
  display: flex; align-items: flex-end; gap: 8px; width: 100%; max-width: 560px; min-width: 0;
  > .components-base-control { flex: 1; min-width: 0; }
  > .components-button { flex: 0 0 auto; min-height: 40px; justify-content: center; }
}
.fqbpro-query-editor__control-workspace { min-width: 0; max-width: 920px; border: 1px solid #c3c4c7; border-radius: 6px; background: #fff; }
.fqbpro-query-editor__control-picker {
  display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; padding: 8px 12px 0;
  border-bottom: 1px solid #c3c4c7; border-radius: 5px 5px 0 0; background: #f6f7f7;
  > .components-button {
    display: flex; flex-direction: column; align-items: flex-start; height: auto; min-width: 120px;
    padding: 9px 13px 8px; border: 1px solid transparent; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0;
    text-align: left; gap: 2px; white-space: normal;
  }
  > .components-button[aria-selected="true"] { color: #1d2327; background: #fff; border-color: #c3c4c7; border-bottom-color: #3858e9; }
  > .components-button span { font-size: 11px; opacity: .75; }
}
.fqbpro-query-editor__control-workspace-content { min-width: 0; padding: 16px 24px 24px; }
.fqbpro-query-editor__control-tabs-help { margin: 0 0 16px; color: #646970; font-size: 12px; }
.fqbpro-query-editor__add-fields {
  display: flex; align-items: flex-end; gap: 12px;
  > .components-base-control { flex: 1; min-width: 0; max-width: 520px; margin: 0; }
  .components-base-control__field { margin-bottom: 0; }
  > .components-button { flex: 0 0 auto; min-height: 40px; }
}
.fqbpro-query-editor__filter-behavior {
  margin-top: 28px; padding: 20px; border: 1px solid #dcdcde; border-radius: 4px; background: #f9f9f9;
  > h3 { margin: 0 0 8px; font-size: 14px; }
  > p { margin: 0 0 20px; color: #646970; font-size: 12px; line-height: 1.6; }
}
.fqbpro-query-editor__control-settings { min-width: 0; }
.fqbpro-query-editor__control-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 20px; h3 { margin: 6px 0; } > div { display: flex; flex-wrap: wrap; justify-content: flex-end; } }
.fqbpro-query-editor__color-panel { box-sizing: border-box; width: 100%; margin-bottom: 20px; padding: 20px; border: 1px solid #ddd; border-radius: 4px; background: #fff; }
.fqbpro-query-editor__color-panel > .components-grid { width: 100%; border-top: 0; padding-top: 0; }
.fqbpro-query-editor__preview { padding: 24px; margin-bottom: 24px; border: 1px solid #ddd; border-radius: 4px; background: #fafafa; }
.fqbpro-query-editor__settings > .fqbpro-query-editor__preview,
.fqbpro-query-editor__control-settings > .fqbpro-query-editor__preview {
  position: sticky; top: 0; z-index: 3; max-height: min(38vh, 360px); overflow: auto;
  box-shadow: 0 4px 10px rgb(0 0 0 / 8%);
}
.fqbpro-query-editor__filter-settings-fields,
.fqbpro-query-editor__control-fields { padding-top: 24px; }
.fqbpro-query-editor .fqbpro-native-term-list { max-block-size: none; overflow: visible; overscroll-behavior: auto; scrollbar-gutter: auto; }
.fqbpro-query-editor__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 1080px; margin-bottom: 24px; }
.fqbpro-query-editor__card.components-button { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: auto; min-height: 128px; padding: 20px; white-space: normal; text-align: left; gap: 12px; line-height: 1.5; strong { font-size: 14px; } }
.fqbpro-query-editor__layout-diagram { display: flex; gap: 4px; width: 100%; min-height: 90px; > span { display: flex; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 2px; font-size: 11px; flex: 3; } > span:first-child { flex: 1; } &.is-top { flex-direction: column; } &.is-right { flex-direction: row-reverse; } }
.fqbpro-query-editor__starters { margin-bottom: 28px; }
.fqbpro-query-editor__canvas-styles { padding: 24px; margin-top: 24px; background: #f7f7f7; border: 1px solid #ddd; p { line-height: 1.7; } }
.fqbpro-query-editor .components-panel__body { border: 1px solid #ddd; margin-bottom: 16px; background: #fff; }
.fqbpro-query-editor .fqbpro-query-condition { padding: 16px; margin-bottom: 12px; border: 1px solid #ddd; border-radius: 3px; }
.fqbpro-query-editor .fqbpro-query-group > legend { padding-block: 8px; font-weight: 600; }
.fqbpro-query-editor .fqbpro-query-group > .components-button { margin-right: 8px; margin-bottom: 12px; }
.fqbpro-query-editor fieldset > legend { margin-bottom: 12px; }

.fqbpro-query-settings-launcher { padding: 16px; border-bottom: 1px solid #ddd; .components-button { width: 100%; min-height: 40px; justify-content: center; } }

// Core Query's content, display and filter panels duplicate the plugin dialog.
// Restrict this to the selected plugin variation; ordinary and v3 Queries keep Core's inspector.
.fqbpro-query-inspector-selected .block-editor-block-inspector {
  button[id$="-styles"],
  [id$="-settings-view"] > div > .components-grid { display: none; }
}

// Core controls no longer supply consistent outer spacing outside the inspector.
// Scope the rhythm to our modal and leave individual block inspectors untouched.
.fqbpro-query-editor__main {
  p { line-height: 1.6; }
  .components-base-control { margin-block: 0 20px; }
  .components-base-control__field { margin-bottom: 0; }
  .components-base-control__label { display: block; margin-bottom: 8px; }
  .components-base-control__help { margin-block: 8px 0; line-height: 1.6; }
  .components-base-control .components-base-control { margin-block: 0; }
  .components-checkbox-control { margin-bottom: 10px; }
  .components-notice { margin: 0 0 20px; padding: 12px; }
  .components-notice__content { margin-block: 0; line-height: 1.6; }
  .components-panel__body { padding: 20px; margin-bottom: 20px; border-radius: 4px; }
  .components-panel__body-title { margin: -20px -20px 20px; }
  .components-panel__body:not(.is-opened) .components-panel__body-title { margin-bottom: -20px; }
  .components-panel__body > :last-child:not(.components-panel__body-title),
  .fqbpro-query-editor__filter-behavior > :last-child { margin-bottom: 0; }
  .fqbpro-query-editor__add-fields > .components-base-control { margin-bottom: 0; }
  .fqbpro-query-editor__add-control > .components-base-control { margin-bottom: 0; }
  .fqbpro-query-editor__settings > h3 { margin: 0 0 20px; }
}

@media (max-width: 900px) {
  .fqbpro-query-editor__workspace { grid-template-columns: 170px minmax(0, 1fr); }
  .fqbpro-query-editor__main { padding: 0 40px 24px 24px; }
  .fqbpro-query-editor__section-heading { padding-top: 24px; }
  .fqbpro-query-editor__filters { gap: 20px; }
  .fqbpro-query-editor__cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .fqbpro-query-editor__workspace { display: flex; flex-direction: column; }
  .fqbpro-query-editor__navigation.is-collapsed { padding: 8px 12px; }
  .fqbpro-query-editor__navigation { flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 12px; border-right: 0; border-bottom: 1px solid #ddd; flex: 0 0 auto; > .components-button { width: auto; justify-content: center; flex: 1; } }
  .fqbpro-query-editor__title { width: 100%; margin: 0 0 4px; h1 { margin-top: 2px; } }
  .fqbpro-query-editor__return.components-button { flex: 0 0 100%; margin-top: 4px; }
  .fqbpro-query-editor__draft-note { display: none; }
  .fqbpro-query-editor__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; padding: 8px 0 0; > p { grid-column: 1 / -1; } }
  .fqbpro-query-editor__main { padding: 0 40px 20px 16px; }
  .fqbpro-query-editor__section-heading { padding-top: 20px; }
  .fqbpro-query-editor__add-fields { flex-direction: column; align-items: stretch; > .components-base-control { max-width: none; } }
  .fqbpro-query-editor__control-picker { padding-inline: 8px; }
  .fqbpro-query-editor__control-workspace-content { padding: 16px 12px 20px; }
}

.fqbpro-pattern-picker.components-modal__frame { width: min(1440px, calc(100vw - 48px)); max-width: none; }
.fqbpro-pattern-gallery { min-width: 0; }
.fqbpro-pattern-gallery__intro { margin: 0 0 24px; font-size: 15px; line-height: 1.6; }
.fqbpro-pattern-gallery__workspace { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); align-items: start; gap: 28px; }
.fqbpro-pattern-gallery__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fqbpro-pattern-gallery__card.components-button {
  display: flex; flex-direction: column; align-items: stretch; height: auto; gap: 10px; padding: 12px; border: 1px solid #dcdcde; border-radius: 4px; text-align: left; white-space: normal; color: #1e1e1e; line-height: 1.5;
  .fqbpro-pattern-gallery &[aria-pressed="true"] {
    &, &:hover, &:focus, &:active {
      outline: 2px solid var(--wp-admin-theme-color, #3858e9); outline-offset: -2px;
      background: #f0f4ff; color: #1e1e1e;
      > span:last-child { color: #50575e; }
    }
  }
  > strong { font-size: 13px; }
  > span:last-child { font-size: 12px; color: #50575e; }
}
.fqbpro-pattern-gallery__preview { position: sticky; top: 0; min-width: 0; border: 1px solid #dcdcde; padding: 16px; border-radius: 4px; background: #fff; h3 { margin: 0 0 16px; } > p { margin: 16px 0 0; color: #646970; font-size: 12px; line-height: 1.6; } }
.fqbpro-pattern-gallery__loading { display: flex; align-items: center; min-height: 180px; justify-content: center; gap: 8px; }
.fqbpro-pattern-gallery__footer { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; padding: 18px 0; margin-top: 24px; background: #fff; border-top: 1px solid #dcdcde; z-index: 1; }
.fqbpro-pattern-diagram {
  display: flex; flex-direction: column; gap: 9px; background: #f0f0f1; border-radius: 2px; padding: 10px; min-height: 118px;
  &.is-left, &.is-right { flex-direction: row; }
  &.is-right { flex-direction: row-reverse; }
  &.is-dark { background: #111827; }
  &.is-popup .fqbpro-pattern-diagram__filters { max-width: 42%; padding: 4px; background: #3858e9; }
  &.is-left .fqbpro-pattern-diagram__filters, &.is-right .fqbpro-pattern-diagram__filters { width: 28%; flex-direction: column; justify-content: flex-start; }
  &__filters { display: flex; gap: 4px; > i { display: block; flex: 1; min-height: 13px; max-height: 14px; background: #fff; border: 1px solid #9ca3af; border-radius: 2px; } }
  &__results { display: grid; flex: 1; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; > span { display: flex; flex-direction: column; gap: 4px; > i { min-height: 18px; background: #cad3dc; } > b { height: 3px; width: 80%; background: #8a98a7; } > b:last-child { width: 55%; } } &.is-list { grid-template-columns: 1fr; > span { padding: 2px; > i { display: none; } } } }
}
@media (max-width: 1100px) { .fqbpro-pattern-gallery__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .fqbpro-pattern-picker.components-modal__frame { width: 100%; }
  .fqbpro-pattern-gallery__workspace { grid-template-columns: 1fr; }
  .fqbpro-pattern-gallery__preview { position: static; }
}

.fqbpro-customizer-preview-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; min-width: 0; }
.fqbpro-customizer-preview-controls > * { min-width: 0; max-width: 100%; }
.fqbpro-customizer-preview-note { color: #646970; font-size: 12px; margin: 16px 0 0; }
.fqbpro-query-editor__return { margin-top: 16px; }
.fqbpro-query-editor__exit-modal .fqbpro-query-editor__return-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px;
  > .components-button { width: 100%; min-height: 40px; justify-content: center; white-space: normal; text-align: center; }
  > .components-button.is-primary { grid-column: 1 / -1; }
}

.fqbpro-setup-types, .fqbpro-setup-sources { max-height: 50vh; overflow-y: auto; padding: 8px; }
.fqbpro-setup-progress { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0; margin: 16px 0 24px; color: #646970; }
.fqbpro-setup-progress [aria-current="step"] { color: #1e1e1e; font-weight: 600; border-bottom: 2px solid var(--wp-admin-theme-color, #3858e9); }
.fqbpro-setup-source { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; border-bottom: 1px solid #ddd; padding: 16px 0; }
.fqbpro-setup-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
@media (max-width: 600px) { .fqbpro-setup-source { grid-template-columns: minmax(0, 1fr); gap: 8px; } }

.fqbpro-query-setup {
  .fqbpro-setup-progress { margin: 0 0 24px; padding-block: 8px; }
  h2 { margin: 0 0 16px; }
  p { margin: 0 0 24px; line-height: 1.6; }
  .fqbpro-post-type-note { color: #50575e; font-size: 13px; }
  .fqbpro-setup-types, .fqbpro-setup-sources { margin: 0 0 24px; padding: 8px; }
  .fqbpro-setup-types > legend { margin-bottom: 16px; font-weight: 600; }
  .components-base-control { margin: 0 0 16px; }
  .components-base-control__field { margin-bottom: 0; }
  .components-base-control__label { display: block; margin-bottom: 8px; }
  .components-base-control__help { margin: 8px 0 0; line-height: 1.6; }
  .components-checkbox-control__label { font-weight: 500; }
  .fqbpro-setup-actions { position: sticky; bottom: -24px; padding: 16px 0; background: #fff; border-top: 1px solid #dcdcde; z-index: 1; flex-wrap: wrap; }
  @media (max-width: 600px) { .fqbpro-setup-actions { bottom: -16px; } }
}
.fqbpro-query-editor__main .fqbpro-query-post-types .components-checkbox-control { margin-bottom: 16px; }

.fqbpro-catalog-visibility-toggle { margin-block: 8px 16px; }

.fqbpro-query-editor__categories { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-bottom: 16px; border-bottom: 1px solid #dcdcde; }
.fqbpro-query-editor__categories .components-button { min-height: 36px; }

.fqbpro-query-editor__content-area { position: relative; display: flex; flex: 1; min-width: 0; min-height: 0; overflow: hidden; }
.fqbpro-query-editor__main { flex: 1; min-height: 0; }