/* ============================================================================
   Group Page Builder — per-block styling, new block types, drag-and-drop grid.
   Loaded AFTER group-desktop.css / app-desktop.css so its selectors win ties.
   Pairs with group-builder.js (see its header for the data model).

   Specificity note: existing rules set block backgrounds/titles at up to
   `body.darkMode #groupPageBlocksList > .groupPageBlock` (1,2,1). Styled-block
   rules below use `:is(#groupPageBlocksList, #gbStylePreview)` + a doubled
   `.gbStyled` class so a leader's explicit choice always wins, in light and dark
   mode alike (custom colors are shown as chosen in both themes).
   ============================================================================ */

/* ---------- 0. Vertical stacks: several blocks sharing one grid cell (same row + columns) ---------- */
/* Phones/tablets have no grid — the stack box vanishes and its blocks flow in page order. */
.gbStack { display: contents; }
@media (min-width: 1200px) {
  #groupPageBlocksList > .gbStack { display: flex; flex-direction: column; gap: 18px; min-width: 0; align-self: start; }
  /* the base card look group-desktop.css gives every DIRECT child block */
  #groupPageBlocksList > .gbStack > .groupPageBlock {
    margin: 0; min-width: 0; padding: 18px; border: 1px solid rgba(24,39,66,.08); border-radius: 18px;
    background: #fff; box-shadow: 0 7px 20px rgba(24,39,66,.07);
  }
  body.darkMode #groupPageBlocksList > .gbStack > .groupPageBlock { border-color: var(--dm-line); background: var(--dm-panel); box-shadow: none; }
  #groupPageBlocksList.is-customizing > .gbStack > .groupPageBlock { border-color: rgba(194,145,45,.28); }
  /* extra room between stacked blocks while editing: the chrome bar overhangs each block's top */
  #groupPageBlocksList.gbGridEditing > .gbStack { gap: 30px; position: relative; z-index: 1; }
}
/* ---------- 1. Per-block style (all widths, desktop + mobile) ---------- */
body :is(#groupPageBlocksList, #gbStylePreview) .groupPageBlock.gbStyled.gbStyled { position: relative; }
body :is(#groupPageBlocksList, #gbStylePreview) .groupPageBlock.gbHasBg.gbStyled { background: var(--gb-bg); }
body :is(#groupPageBlocksList, #gbStylePreview) .groupPageBlock.gbHasRadius.gbStyled { border-radius: var(--gb-radius); }
body :is(#groupPageBlocksList, #gbStylePreview) .groupPageBlock.gbHasPad.gbStyled { padding: var(--gb-pad); }
body :is(#groupPageBlocksList, #gbStylePreview) .groupPageBlock.gbShadow.gbStyled { box-shadow: 0 16px 38px rgba(24,39,66,.22); }
body :is(#groupPageBlocksList, #gbStylePreview) .groupPageBlock.gbBorder.gbStyled { border: 2px solid var(--gb-accent, currentColor); }
body :is(#groupPageBlocksList, #gbStylePreview) .groupPageBlock.gbHideTitle.gbStyled .groupPageBlockTitle { display: none; }
body :is(#groupPageBlocksList, #gbStylePreview) .groupPageBlock.gbAlignCenter.gbStyled { text-align: center; }
body :is(#groupPageBlocksList, #gbStylePreview) .groupPageBlock.gbAlignCenter.gbStyled :is(.gbBlockHead, .gbButtonWrap, .gbBannerInner, .gbInfoRow) { justify-content: center; }

body :is(#groupPageBlocksList, #gbStylePreview) .groupPageBlock.gbHasText.gbStyled,
body :is(#groupPageBlocksList, #gbStylePreview) .groupPageBlock.gbHasText.gbStyled :is(.groupPageBlockTitle, .groupPageBlockBody, .groupPageBlockCaption, .groupPageBlockQuestion, .groupPageBlockPollOptionLabelRow, .groupPageBlockPollMeta, .gbInfo, .gbInfoLines, .gbInfoNote, .gbEmpty, .gbButtonNote, .gbAnnText, .gbAnnMeta) {
  color: var(--gb-text);
}
body :is(#groupPageBlocksList, #gbStylePreview) .groupPageBlock.gbHasFont.gbStyled,
body :is(#groupPageBlocksList, #gbStylePreview) .groupPageBlock.gbHasFont.gbStyled *:not(.mdi):not([class*="mdi-"]) {
  font-family: var(--gb-font);
}
body :is(#groupPageBlocksList, #gbStylePreview) .groupPageBlock.gbHasAccent.gbStyled :is(.groupPageBlockLinkBtn, .gbButton, .gbBannerBtn, .groupPageBlockPollBarFill, .gbPreviewBtn) {
  background: var(--gb-accent); color: var(--gb-accent-ink, #fff);
}
body :is(#groupPageBlocksList, #gbStylePreview) .groupPageBlock.gbHasAccent.gbStyled :is(.gbViewAll, .gbInfoDirections, .gbInfoIcon, .gbPlanKind, .gbPreviewLink) { color: var(--gb-accent); }

/* ---------- 2. New block types ---------- */
.gbBlockHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.gbBlockHead .groupPageBlockTitle { margin: 0; }
.gbViewAll { border: none; background: none; cursor: pointer; padding: 0; font-size: 13px; font-weight: 700; color: var(--v2-gold, #c99b3f); display: inline-flex; align-items: center; gap: 2px; }
.gbEmpty { color: var(--v2-muted, #6b7280); font-size: 13px; padding: 8px 0; }
#groupPageBlocksList .groupPageBlock.gbGridManaged .gdBlockSizeControl { display: none; }

/* Memory Verse — a contained media card with a footer that can never outgrow the
   block's assigned grid cell. Compact blocks stack the reference and action; wider
   blocks keep them on one calm, balanced row. */
#groupPageBlocksList .groupPageBlock--verse {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
#groupPageBlocksList .groupPageBlock--verse > .groupPageBlockTitle { margin-bottom: 12px; }
.gbVerseMedia {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(145deg, #172945, #29496e);
}
#groupPageBlocksList .gbVerseMedia .groupPageBlockImg {
  width: 100%;
  height: 100%;
  min-width: 0;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  display: block;
  cursor: pointer;
}
.gbVersePlaceholder {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.78);
  font-size: 42px;
}
.gbVerseFooter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-top: 12px;
}
#groupPageBlocksList .gbVerseRef {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin: 0;
  color: var(--v2-green, #182742);
  text-align: left;
}
.gbVerseRef > .mdi {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(194,145,45,.13);
  color: var(--v2-gold, #c2912d);
  font-size: 19px;
}
.gbVerseRefText { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gbVerseRefText small {
  color: var(--v2-muted, #6b7280);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1.1;
  text-transform: uppercase;
}
.gbVerseRefText strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-family: 'Mongolian Baiti', 'Playfair Display', serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#groupPageBlocksList .gbVerseAddBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 0 1 auto;
  width: auto !important;
  min-width: 0;
  max-width: 100%;
  min-height: 42px;
  margin: 0 !important;
  padding: 9px 14px;
  box-sizing: border-box;
  border: 1px solid rgba(194,145,45,.34);
  border-radius: 999px;
  background: rgba(194,145,45,.10);
  color: var(--v2-green, #182742);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}
#groupPageBlocksList .gbVerseAddBtn .mdi { flex: 0 0 auto; font-size: 18px; color: var(--v2-gold, #c2912d); }
#groupPageBlocksList .gbVerseAddBtn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#groupPageBlocksList .gbVerseAddBtn:hover:not(:disabled) {
  border-color: var(--v2-green, #182742);
  background: var(--v2-green, #182742);
  color: #fff;
}
#groupPageBlocksList .gbVerseAddBtn:hover:not(:disabled) .mdi { color: #fff; }
#groupPageBlocksList .gbVerseAddBtn.isAdded {
  border-color: rgba(48,119,78,.28);
  background: rgba(48,119,78,.11);
  color: #25643d;
  opacity: 1;
}
#groupPageBlocksList .gbVerseAddBtn.isAdded .mdi { color: #30774e; }
#groupPageBlocksList .groupPageBlock--size-compact .gbVerseFooter {
  align-items: stretch;
  flex-direction: column;
  gap: 10px;
}
#groupPageBlocksList .groupPageBlock--size-compact .gbVerseAddBtn { width: 100% !important; }
body.darkMode #groupPageBlocksList .gbVerseRef { color: var(--dm-ink); }
body.darkMode .gbVerseRefText small { color: var(--dm-ink-muted); }
body.darkMode #groupPageBlocksList .gbVerseAddBtn {
  border-color: rgba(213,168,72,.34);
  background: rgba(213,168,72,.12);
  color: var(--dm-ink);
}

@media (max-width: 520px) {
  .gbVerseFooter { align-items: stretch; flex-direction: column; gap: 10px; }
  #groupPageBlocksList .gbVerseAddBtn { width: 100% !important; }
}

.gbSermonGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gbSermonCard {
  display: flex; gap: 12px; align-items: center; text-align: left; width: 100%;
  background: #fff; color: #1f2430; border: 1px solid rgba(24,39,66,.08); border-radius: 14px; padding: 10px; cursor: pointer;
}
.gbSermonCard:hover { box-shadow: 0 8px 20px rgba(24,39,66,.12); }
.gbSermonThumb { width: 96px; height: 64px; flex: 0 0 auto; border-radius: 9px; overflow: hidden; background: linear-gradient(135deg, #183050, #396081); display: grid; place-items: center; color: #fff; font-size: 22px; }
.gbSermonThumb img { width: 100%; height: 100%; object-fit: cover; }
.gbSermonInfo { display: flex; flex-direction: column; min-width: 0; }
.gbSermonDate { color: #6b7280; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.gbSermonTitle { font-weight: 700; font-size: 14px; line-height: 1.3; margin-top: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.gbPlanGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.gbPlanCard { display: flex; flex-direction: column; text-align: left; padding: 0; background: #fff; color: #1f2430; border: 1px solid rgba(24,39,66,.08); border-radius: 14px; overflow: hidden; cursor: pointer; }
.gbPlanCard:hover { box-shadow: 0 8px 20px rgba(24,39,66,.12); }
.gbPlanVisual { display: block; height: 104px; background: linear-gradient(135deg, #183050, #396081); }
.gbPlanVisual img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gbPlanBody { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px 13px; }
.gbPlanKind { display: flex; align-items: center; gap: 5px; color: var(--v2-gold, #c99b3f); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.gbPlanTitle { font-weight: 700; font-size: 13.5px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gbNewPlanTile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 150px;
  border: 1.5px dashed rgba(24,39,66,.22); border-radius: 14px; background: none; color: var(--v2-muted, #6b7280); cursor: pointer; font-weight: 600;
}
.gbNewPlanTile:hover { border-color: var(--v2-gold, #c99b3f); color: var(--v2-gold, #c99b3f); }
.gbNewPlanTile i { font-size: 26px; }

.gbAnnList { display: flex; flex-direction: column; gap: 10px; }
.gbAnnItem { display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; padding: 12px 14px; background: rgba(24,39,66,.04); border: 1px solid rgba(24,39,66,.06); border-radius: 12px; cursor: pointer; color: inherit; }
.gbAnnText { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.gbAnnMeta { font-size: 12px; opacity: .7; }

.gbButtonWrap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.gbButton, .gbBannerBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; cursor: pointer;
  padding: 12px 24px; border-radius: 999px; font-weight: 800; font-size: 15px;
  background: var(--v2-green, #182742); color: #fff;
}
.gbButton:hover, .gbBannerBtn:hover { filter: brightness(1.12); }
.gbButtonNote { font-size: 12.5px; opacity: .7; }
.gbAlignCenter .gbButtonWrap { align-items: center; }

.gbBanner { position: relative; border-radius: inherit; overflow: hidden; background: linear-gradient(120deg, #182742 0%, #2c4468 60%, #3a5478 100%); color: #fff; }
.gbBanner.hasImage { background-size: cover; background-position: center; min-height: 200px; }
.gbBanner.hasOverlay::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,16,30,.35), rgba(10,16,30,.72)); }
.gbBannerInner { position: relative; padding: 30px 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gbBannerTitle { margin: 0; font-size: 30px; line-height: 1.12; font-family: 'Mongolian Baiti', 'Playfair Display', serif; color: #fff; }
.gbBannerSub { margin: 0; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.88); max-width: 620px; }
.gbBannerBtn { margin-top: 6px; background: var(--v2-gold, #c99b3f); color: #182742; }
.gbAlignCenter .gbBannerInner { align-items: center; text-align: center; }
/* a Banner should run edge to edge inside its block (its own gradient/image is the card) */
.groupPageBlock--banner { padding: 0 !important; overflow: hidden; }
.groupPageBlock--banner .gbBanner { border-radius: 0; }

.gbInfo { display: flex; flex-direction: column; gap: 12px; }
.gbInfo .groupPageBlockTitle { margin: 0; }
.gbInfoRow { display: flex; gap: 12px; align-items: flex-start; }
.gbInfoIcon { font-size: 22px; color: var(--v2-gold, #c99b3f); flex: 0 0 auto; margin-top: 1px; }
.gbInfoLines { display: flex; flex-direction: column; gap: 3px; font-size: 14.5px; line-height: 1.45; }
.gbInfoDirections { margin-top: 6px; font-weight: 700; font-size: 13.5px; color: var(--v2-gold, #c99b3f); text-decoration: none; }
.gbInfoDirections:hover { text-decoration: underline; }
.gbInfoNote { font-size: 13px; opacity: .75; }

/* ---------- 3. Block editor modal: new fields + Style section ---------- */
.gbCheck { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 6px 0 10px; cursor: pointer; }
.gbCheckRow { padding: 4px 0; margin: 0; }
.gbStyleSection { margin: 18px 0 6px; border: 1px solid rgba(24,39,66,.12); border-radius: 14px; overflow: hidden; }
.gbStyleHead {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 16px;
  background: rgba(24,39,66,.04); border: none; cursor: pointer; font-weight: 800; font-size: 14px; color: inherit;
}
.gbStyleHead span { display: inline-flex; align-items: center; gap: 8px; }
.gbStyleBody { padding: 14px 16px 16px; }
.gbStylePreviewWrap { margin-bottom: 14px; }
#gbStylePreview .gbPreviewCard { margin: 0; }
.gbContrastHint { margin-top: 8px; font-size: 12.5px; color: #b45309; font-weight: 600; }
.gbStyleRow { margin-bottom: 14px; }
.gbStyleLabel { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .65; margin-bottom: 7px; }
.gbSwatchRow { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.gbSwatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(24,39,66,.18); cursor: pointer; padding: 0; display: grid; place-items: center; font-size: 15px; color: #6b7280; background: #fff; }
.gbSwatch.active { outline: 3px solid var(--v2-gold, #c99b3f); outline-offset: 2px; }
.gbColorInput { width: 34px; height: 30px; padding: 0; border: 1px solid rgba(24,39,66,.25); border-radius: 8px; background: none; cursor: pointer; }
.gbFontGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 190px; overflow-y: auto; padding: 2px; }
.gbFontOpt { padding: 8px 6px; border: 1px solid rgba(24,39,66,.14); border-radius: 9px; background: #fff; color: #1f2430; cursor: pointer; font-size: 14px; line-height: 1.2; text-align: center; }
.gbFontOpt.active { border-color: var(--v2-gold, #c99b3f); background: rgba(201,155,63,.16); font-weight: 700; }
.gbSeg { display: flex; flex-wrap: wrap; gap: 6px; }
.gbSeg button, .gbToggle { padding: 7px 12px; border: 1px solid rgba(24,39,66,.16); border-radius: 999px; background: #fff; color: #1f2430; cursor: pointer; font-size: 13px; font-weight: 600; }
.gbSeg button.active, .gbToggle.active { background: var(--v2-green, #182742); border-color: var(--v2-green, #182742); color: #fff; }
.gbToggleRow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.gbResetStyle { border: none; background: none; color: #b91c1c; font-weight: 700; font-size: 13px; cursor: pointer; padding: 4px 0; }

/* ---------- 4. Drag-and-drop grid editor (desktop, edit mode) ---------- */
@media (min-width: 1200px) {
  #groupPageBlocksList.gbGridEditing {
    position: relative;
    row-gap: 0;               /* the thin "new row" zones between rows act as the row gaps */
    padding-top: 6px;
  }
  .gbGuides {
    position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 18px; pointer-events: none; z-index: 0;
  }
  .gbGuideCol { background: rgba(24,39,66,.03); border-left: 1px dashed rgba(24,39,66,.10); border-right: 1px dashed rgba(24,39,66,.10); border-radius: 6px; }

  #groupPageBlocksList.gbGridEditing .gbEditBlock {
    position: relative; z-index: 1; margin: 0; outline: 2px solid rgba(201,155,63,.35); outline-offset: 0;
    transition: opacity .15s ease, outline-color .15s ease;
  }
  #groupPageBlocksList.gbGridEditing .gbEditBlock:hover,
  #groupPageBlocksList.gbGridEditing .gbEditBlock:focus-within { outline-color: var(--v2-gold, #c99b3f); }
  #groupPageBlocksList.gbGridEditing .gbEditBlock.gbMoving { opacity: .35; }
  #groupPageBlocksList.gbGridEditing .gbEditBlock.gbResizing { outline-color: #2f6fdd; }
  /* editing shows each block's real content, but not live: clicks belong to the chrome */
  #groupPageBlocksList.gbGridEditing .gbEditBlock > :not(.gbChrome):not(.gbResize) { pointer-events: none; }

  /* the chrome bar overhangs the block's top edge by 16px; nudge the content clear of it */
  #groupPageBlocksList.gbGridEditing .gbEditBlock > .gbChrome + * { margin-top: 12px; }
  .gbChrome {
    position: absolute; left: 10px; right: 10px; top: -16px; z-index: 5; height: 32px;
    display: flex; align-items: center; gap: 6px; padding: 0 6px;
    background: var(--v2-green, #182742); color: #fff; border-radius: 10px;
    box-shadow: 0 6px 16px rgba(24,39,66,.3);
  }
  .gbGrip { width: 30px; height: 26px; border: none; border-radius: 7px; background: rgba(255,255,255,.14); color: #fff; cursor: grab; display: grid; place-items: center; font-size: 18px; touch-action: none; padding: 0; }
  .gbGrip:hover, .gbGrip:focus-visible { background: rgba(255,255,255,.28); }
  .gbGrip:active { cursor: grabbing; }
  .gbChromeLabel { font-size: 12px; font-weight: 800; letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gbChromeLabel::after { content: attr(data-span); margin-left: 8px; font-weight: 600; opacity: .6; }
  .gbChromeSpacer { flex: 1 1 auto; }
  .gbChromeBtn { width: auto; min-width: 26px; height: 26px; border: none; border-radius: 7px; background: rgba(255,255,255,.14); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 16px; padding: 0 7px; }
  .gbChromeBtn span { font-size: 10px; font-weight: 800; letter-spacing: .01em; }
  .groupPageBlock--size-compact .gbChromeBtn { width: 26px; padding: 0; }
  .groupPageBlock--size-compact .gbChromeBtn span { display: none; }
  .gbChromeBtn:hover { background: rgba(255,255,255,.3); }
  .gbChromeDanger:hover { background: #b91c1c; }

  .gbResize { position: absolute; top: 24px; bottom: 12px; right: -10px; width: 18px; z-index: 6; cursor: ew-resize; touch-action: none; display: grid; place-items: center; }
  .gbResize::before { content: ''; width: 5px; height: 46px; max-height: 80%; border-radius: 999px; background: var(--v2-gold, #c99b3f); box-shadow: 0 0 0 3px rgba(255,255,255,.9); }

  .gbEmptyCell {
    align-self: stretch; min-height: 92px; z-index: 1; display: grid; place-items: center;
    border: 2px dashed rgba(201,155,63,.5); border-radius: 14px; background: rgba(201,155,63,.06);
    color: var(--v2-gold, #c99b3f); font-size: 26px; cursor: pointer; padding: 0; margin: 0 0 0 0;
  }
  .gbEmptyCell:hover { background: rgba(201,155,63,.16); }
  .gbNewRowZone {
    z-index: 1; height: 18px; min-height: 18px; padding: 0; border: none; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; position: relative;
  }
  .gbNewRowZone span { opacity: 0; transition: opacity .12s ease; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-gold, #c99b3f); background: var(--v2-cream, #fbf8ef); padding: 0 10px; position: relative; z-index: 1; }
  .gbNewRowZone::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(201,155,63,.0); transition: border-color .12s ease; }
  .gbNewRowZone:hover span, body.gbDragging .gbNewRowZone span { opacity: 1; }
  .gbNewRowZone:hover::before, body.gbDragging .gbNewRowZone::before { border-top-color: rgba(201,155,63,.6); }
  .gbEmptyState { padding: 46px 20px; text-align: center; color: var(--v2-muted, #6b7280); border: 2px dashed rgba(24,39,66,.2); border-radius: 16px; font-size: 14.5px; }

  .gbDropPreview { position: fixed; z-index: 9998; pointer-events: none; border: 2px solid var(--v2-gold, #c99b3f); background: rgba(201,155,63,.18); border-radius: 12px; display: none; box-shadow: 0 0 0 4px rgba(201,155,63,.14); }
  .gbDropPreview.invalid { border-color: #dc2626; background: rgba(220,38,38,.12); box-shadow: 0 0 0 4px rgba(220,38,38,.1); }
  .gbGhost { position: fixed; z-index: 9999; pointer-events: none; padding: 8px 14px; background: var(--v2-green, #182742); color: #fff; border-radius: 10px; font-weight: 800; font-size: 13px; box-shadow: 0 12px 28px rgba(24,39,66,.4); opacity: .95; }
  body.gbDragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
  body.gbDragging * { cursor: grabbing !important; }

  .gbTray {
    position: sticky; top: 8px; z-index: 30; margin: 0 0 22px; padding: 10px 14px 10px;
    background: #fff; border: 1px solid rgba(24,39,66,.1); border-radius: 16px; box-shadow: 0 10px 28px rgba(24,39,66,.12);
  }
  .gbTrayHead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
  .gbTrayTitle { font-weight: 800; font-size: 14px; color: var(--v2-green, #182742); }
  .gbTrayHint { flex: 1 1 auto; font-size: 12.5px; color: var(--v2-muted, #6b7280); }
  .gbTrayUndo { border: 1px solid rgba(24,39,66,.16); background: #fff; color: var(--v2-green, #182742); border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  .gbTrayUndo:disabled { opacity: .4; cursor: default; }
  .gbTrayTiles { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scroll-snap-type: x proximity; }
  .gbTrayTile {
    flex: 0 0 158px; min-height: 58px; padding: 8px 10px; display: flex; flex-direction: row; align-items: center; gap: 9px;
    background: rgba(24,39,66,.04); border: 1px solid rgba(24,39,66,.08); border-radius: 12px; color: var(--v2-green, #182742);
    cursor: grab; text-align: left; touch-action: none; user-select: none; scroll-snap-align: start;
  }
  .gbTrayTile i { flex: 0 0 auto; font-size: 23px; color: var(--v2-gold, #c99b3f); }
  .gbTrayTileCopy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .gbTrayTileCopy strong { color: inherit; font-size: 11.5px; line-height: 1.15; }
  .gbTrayTileCopy small { color: var(--v2-muted, #6b7280); font-size: 9.5px; line-height: 1.2; }
  .gbTrayTile:hover { background: rgba(201,155,63,.14); border-color: rgba(201,155,63,.5); }
  .gbStarter { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 0 14px; border-radius: 12px; background: rgba(201,155,63,.12); border: 1px solid rgba(201,155,63,.35); font-size: 13px; }
  .gbStarter i { font-size: 22px; color: var(--v2-gold, #c99b3f); }
  .gbStarter span { flex: 1 1 auto; }

  /* ---------- dark mode ---------- */
  body.darkMode .gbGuideCol { background: rgba(247,236,213,.03); border-color: rgba(247,236,213,.09); }
  body.darkMode .gbTray { background: var(--dm-panel); border-color: var(--dm-line); }
  body.darkMode .gbTrayTitle, body.darkMode .gbTrayTile { color: var(--dm-ink); }
  body.darkMode .gbTrayTile { background: rgba(247,236,213,.05); border-color: var(--dm-line); }
  body.darkMode .gbTrayUndo { background: var(--dm-panel); border-color: var(--dm-line); color: var(--dm-ink); }
  body.darkMode .gbTrayHint { color: var(--dm-ink-muted); }
  body.darkMode .gbNewRowZone span { background: var(--dm-bg); }
  body.darkMode .gbEmptyState { border-color: var(--dm-line); color: var(--dm-ink-muted); }
  body.darkMode .gbChrome { background: #0e1626; }
}

/* ---------- dark mode: new blocks + editor ---------- */
body.darkMode .gbSermonCard, body.darkMode .gbPlanCard { background: var(--dm-panel); color: var(--dm-ink); border-color: var(--dm-line); }
body.darkMode .gbSermonDate { color: var(--dm-ink-muted); }
body.darkMode .gbNewPlanTile { border-color: var(--dm-line); color: var(--dm-ink-muted); }
body.darkMode .gbAnnItem { background: rgba(247,236,213,.06); border-color: var(--dm-line); }
body.darkMode .gbEmpty, body.darkMode .gbButtonNote { color: var(--dm-ink-muted); }
body.darkMode .gbInfoLines, body.darkMode .gbInfoNote, body.darkMode .gbAnnText, body.darkMode .gbAnnMeta { color: var(--dm-ink); }
body.darkMode .gbButton { background: var(--dm-gold); color: var(--dm-bg); }
body.darkMode .gbViewAll, body.darkMode .gbInfoDirections, body.darkMode .gbInfoIcon, body.darkMode .gbPlanKind { color: var(--dm-gold); }
body.darkMode .gbStyleSection { border-color: var(--dm-line); }
body.darkMode .gbStyleHead { background: rgba(247,236,213,.05); }
body.darkMode .gbSwatch, body.darkMode .gbFontOpt, body.darkMode .gbSeg button, body.darkMode .gbToggle { background: var(--dm-panel); color: var(--dm-ink); border-color: var(--dm-line); }
body.darkMode .gbSeg button.active, body.darkMode .gbToggle.active { background: var(--dm-gold); border-color: var(--dm-gold); color: var(--dm-bg); }
body.darkMode .gbFontOpt.active { background: rgba(213,168,72,.2); border-color: var(--dm-gold); }
body.darkMode .gbContrastHint { color: #fbbf24; }

/* ============================================================================
   8. Designer Studio — template gallery, page settings, and full-screen preview
   ============================================================================ */
.gbDesignerStudio {
  margin: 0 0 18px; overflow: hidden; border: 1px solid rgba(24,39,66,.13); border-radius: 22px;
  background: #fff; box-shadow: 0 18px 45px rgba(24,39,66,.12); color: #182742;
}
.gbDesignerStudioTop {
  display: flex; align-items: center; gap: 14px; min-height: 86px; padding: 15px 18px;
  background: linear-gradient(120deg,#102743 0%,#193b61 68%,#254e78 100%); color: #fff;
}
.gbDesignerStudioMark { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 15px; background: rgba(209,163,63,.18); color: #e5bd65; font-size: 25px; border: 1px solid rgba(229,189,101,.28); }
.gbDesignerStudioCopy { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.gbDesignerStudioCopy small,.gbStudioSectionHead small { color: #c99b3f; font-size: 10px; line-height: 1.2; font-weight: 900; letter-spacing: .16em; }
.gbDesignerStudioCopy strong { font-family: Georgia,'Times New Roman',serif; font-size: 23px; line-height: 1.15; font-weight: 700; }
.gbDesignerStudioCopy em { color: rgba(255,255,255,.72); font-size: 12.5px; font-style: normal; line-height: 1.35; }
.gbDesignerTopActions { display: flex; align-items: center; gap: 8px; }
.gbStudioBtn { min-height: 42px; padding: 0 16px; border: 1px solid rgba(24,39,66,.14); border-radius: 12px; background: #fff; color: #182742; cursor: pointer; font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.gbStudioBtnPrimary { border-color: #d1a33f; background: #d1a33f; color: #102743; box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.gbStudioBtn:hover { transform: translateY(-1px); }
.gbDesignerStudioBody { display: grid; grid-template-columns: minmax(0,1fr) 260px; align-items: stretch; }
.gbTemplateMenu { min-width: 0; padding: 17px 16px 18px; }
.gbPageSettings { padding: 17px 15px; border-left: 1px solid rgba(24,39,66,.1); background: #fbfaf6; }
.gbStudioSectionHead { min-height: 39px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.gbStudioSectionHead > span { display: flex; flex-direction: column; gap: 2px; }
.gbStudioSectionHead strong { color: #182742; font: 700 17px/1.15 Georgia,'Times New Roman',serif; }
.gbStudioSectionHead em { max-width: 240px; color: #7b8190; font-size: 10.5px; line-height: 1.3; font-style: normal; text-align: right; }
.gbTemplateCards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.gbTemplateCard { min-width: 0; padding: 0; overflow: hidden; border: 1px solid rgba(24,39,66,.12); border-radius: 14px; background: #fff; color: #182742; cursor: pointer; text-align: left; box-shadow: 0 5px 14px rgba(24,39,66,.06); transition: transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.gbTemplateCard:hover,.gbTemplateCard:focus-visible { transform: translateY(-2px); border-color: rgba(201,155,63,.75); box-shadow: 0 11px 23px rgba(24,39,66,.12); outline: none; }
.gbTemplateCard.selected { border-color: #c99b3f; box-shadow: 0 0 0 2px rgba(201,155,63,.19),0 8px 22px rgba(24,39,66,.09); }
.gbTemplateShot { position: relative; height: 82px; overflow: hidden; padding: 6px; background: #f7f4ec; border-bottom: 1px solid rgba(24,39,66,.08); }
.gbMiniTop { height: 9px; display: flex; align-items: center; gap: 3px; margin-bottom: 5px; padding: 0 4px; border-radius: 3px; background: #fff; }
.gbMiniTop span { width: 30%; height: 3px; border-radius: 9px; background: #182742; margin-right: auto; }
.gbMiniTop i { width: 4px; height: 4px; border-radius: 50%; background: #c99b3f; }
.gbMiniHero { height: 31px; padding: 5px 7px; display: flex; flex-direction: column; justify-content: center; border-radius: 4px; background: linear-gradient(110deg,#152c49,#345b7e); color: #fff; }
.gbMiniHero b { font: 700 7px/1 Georgia,serif; }
.gbMiniHero small { margin-top: 2px; font-size: 3.5px; opacity: .72; }
.gbMiniGrid { height: 27px; display: grid; grid-template-columns: repeat(6,1fr); gap: 3px; margin-top: 4px; }
.gbMiniGrid i { border-radius: 3px; background: #fff; border: 1px solid rgba(24,39,66,.07); }
.gbMiniGrid i:nth-child(1) { grid-column: span 3; }.gbMiniGrid i:nth-child(2){grid-column:span 3}.gbMiniGrid i:nth-child(3){grid-column:span 2}.gbMiniGrid i:nth-child(4){grid-column:span 4}
.gbTemplateShot--study { background:#f2eee4}.gbTemplateShot--study .gbMiniHero{background:linear-gradient(105deg,#f1e5c7,#fff);color:#182742;border-left:4px solid #b8862f}.gbTemplateShot--study .gbMiniGrid i:nth-child(1){grid-column:span 4}.gbTemplateShot--study .gbMiniGrid i:nth-child(2){grid-column:span 2}
.gbTemplateShot--community { background:#edf1e8}.gbTemplateShot--community .gbMiniHero{background:linear-gradient(105deg,#315b49,#7f9b77)}.gbTemplateShot--community .gbMiniGrid i{border-radius:7px}.gbTemplateShot--community .gbMiniGrid i:nth-child(1){grid-column:span 2}.gbTemplateShot--community .gbMiniGrid i:nth-child(2){grid-column:span 4}
.gbTemplateShot--prayer { background:#eef3f7}.gbTemplateShot--prayer .gbMiniHero{background:linear-gradient(105deg,#516f8d,#92adc2)}.gbTemplateShot--prayer .gbMiniGrid{grid-template-columns:1fr}.gbTemplateShot--prayer .gbMiniGrid i{grid-column:auto!important;border-radius:8px}
.gbTemplateShot--ministry { background:#f1f2f4}.gbTemplateShot--ministry .gbMiniHero{background:linear-gradient(105deg,#111d2c,#263e59);border-radius:1px}.gbTemplateShot--ministry .gbMiniGrid i{border-radius:1px}.gbTemplateShot--ministry .gbMiniGrid i:nth-child(-n+3){grid-column:span 2}.gbTemplateShot--ministry .gbMiniGrid i:nth-child(4){display:none}
.gbTemplateCardCopy { display: flex; flex-direction: column; min-height: 119px; padding: 9px 10px 10px; }
.gbTemplateCardTitle { display: flex; align-items: center; gap: 6px; }
.gbTemplateCardTitle i { color: #b8862f; font-size: 15px; }.gbTemplateCardTitle strong { min-width:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.gbTemplateCardCopy > small { margin-top: 4px; color: #9a7027; font-size: 7.5px; font-weight: 900; letter-spacing: .11em; }
.gbTemplateCardCopy > em { flex:1 1 auto; margin-top: 5px; color:#747b87;font-size:9px;line-height:1.28;font-style:normal; }
.gbTemplateCardCopy > b { display:flex;align-items:center;gap:3px;margin-top:7px;color:#8b641d;font-size:8.5px; }
.gbTemplateCardBlank { display:grid;grid-template-rows:82px auto;background:#fffdf7; }
.gbBlankCanvas { display:grid;place-items:center;border-bottom:1px dashed rgba(24,39,66,.18);background:repeating-linear-gradient(0deg,transparent,transparent 14px,rgba(24,39,66,.035) 15px),repeating-linear-gradient(90deg,transparent,transparent 14px,rgba(24,39,66,.035) 15px);font-size:27px;color:#b8862f; }
.gbDesignChoice { padding: 10px 0; border-top: 1px solid rgba(24,39,66,.08); }
.gbDesignChoice > span { display:block;margin-bottom:7px;color:#545d6d;font-size:10.5px;font-weight:800; }
.gbDesignChoiceSeg { display:flex;gap:4px;padding:3px;border-radius:10px;background:#ecebe7; }
.gbDesignChoiceSeg button { flex:1 1 0;min-width:0;height:30px;padding:0 5px;border:0;border-radius:8px;background:transparent;color:#5d6572;cursor:pointer;font-size:9.5px;font-weight:800; }
.gbDesignChoiceSeg button.active { background:#fff;color:#182742;box-shadow:0 2px 6px rgba(24,39,66,.13); }
.gbPageAccentSwatches { display:flex;align-items:center;gap:7px; }
.gbPageAccentSwatches button { width:27px;height:27px;padding:0;border:3px solid #fff;border-radius:50%;cursor:pointer;box-shadow:0 0 0 1px rgba(24,39,66,.16); }
.gbPageAccentSwatches button.active { box-shadow:0 0 0 2px #182742; }
.gbPageSettingsHint { display:flex;gap:8px;margin-top:11px;padding:10px;border-radius:11px;background:#eef1f5;color:#5f6877;font-size:9.5px;line-height:1.35; }
.gbPageSettingsHint i { color:#2f628f;font-size:16px;flex:0 0 auto; }.gbPageSettingsHint strong{color:#182742}

/* Page-wide design choices. Per-block design settings still win through the higher
   gbStyled selectors above. */
#groupPageBlocksList[data-gb-width="standard"],.gbLiveClone[data-gb-width="standard"]{max-width:940px;margin-left:auto;margin-right:auto}
#groupPageBlocksList[data-gb-width="wide"],.gbLiveClone[data-gb-width="wide"]{max-width:1220px;margin-left:auto;margin-right:auto}
#groupPageBlocksList[data-gb-width="full"],.gbLiveClone[data-gb-width="full"]{max-width:none}
#groupPageBlocksList[data-gb-density="compact"],.gbLiveClone[data-gb-density="compact"]{gap:12px}
#groupPageBlocksList[data-gb-density="compact"] > .groupPageBlock,.gbLiveClone[data-gb-density="compact"] .groupPageBlock{padding:14px}
#groupPageBlocksList[data-gb-corners="square"] .groupPageBlock,.gbLiveClone[data-gb-corners="square"] .groupPageBlock{border-radius:5px!important}
#groupPageBlocksList[data-gb-corners="soft"] .groupPageBlock,.gbLiveClone[data-gb-corners="soft"] .groupPageBlock{border-radius:16px}
#groupPageBlocksList[data-gb-corners="round"] .groupPageBlock,.gbLiveClone[data-gb-corners="round"] .groupPageBlock{border-radius:25px}
#groupPageBlocksList[data-gb-theme="study"] .groupPageBlock,.gbLiveClone[data-gb-theme="study"] .groupPageBlock{border-color:rgba(184,134,47,.2);box-shadow:0 5px 18px rgba(24,39,66,.06)}
#groupPageBlocksList[data-gb-theme="study"] .groupPageBlockTitle,.gbLiveClone[data-gb-theme="study"] .groupPageBlockTitle{font-family:Georgia,'Times New Roman',serif;color:#102743}
#groupPageBlocksList[data-gb-theme="community"] .groupPageBlock,.gbLiveClone[data-gb-theme="community"] .groupPageBlock{background:#fffef9;border-color:rgba(66,100,75,.16);box-shadow:0 8px 24px rgba(44,74,55,.08)}
#groupPageBlocksList[data-gb-theme="community"] .groupPageBlockTitle,.gbLiveClone[data-gb-theme="community"] .groupPageBlockTitle{color:#315b49}
#groupPageBlocksList[data-gb-theme="prayer"] .groupPageBlock,.gbLiveClone[data-gb-theme="prayer"] .groupPageBlock{background:#fbfdff;border-color:rgba(103,136,168,.22);box-shadow:0 10px 28px rgba(49,83,111,.08)}
#groupPageBlocksList[data-gb-theme="prayer"] .groupPageBlockTitle,.gbLiveClone[data-gb-theme="prayer"] .groupPageBlockTitle{color:#3d5f7c}
#groupPageBlocksList[data-gb-theme="ministry"] .groupPageBlock,.gbLiveClone[data-gb-theme="ministry"] .groupPageBlock{border-color:rgba(24,39,66,.18);box-shadow:none}
#groupPageBlocksList[data-gb-theme="ministry"] .groupPageBlockTitle,.gbLiveClone[data-gb-theme="ministry"] .groupPageBlockTitle{text-transform:uppercase;letter-spacing:.055em;font:800 14px/1.2 Arial,sans-serif;color:#182742}
#groupPageBlocksList :is(.gbButton,.gbBannerBtn,.groupPageBlockLinkBtn),.gbLiveClone :is(.gbButton,.gbBannerBtn,.groupPageBlockLinkBtn){background:var(--gb-page-accent,#c99b3f)}

/* Full-screen, real-content template preview */
.gbTemplatePreview { position:fixed;inset:0;z-index:14000;display:grid;grid-template-rows:66px minmax(0,1fr);background:#e9edf2;color:#182742; }
.gbPreviewTopbar { display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);align-items:center;gap:16px;padding:0 18px;background:#102743;color:#fff;box-shadow:0 3px 14px rgba(0,0,0,.2); }
.gbPreviewBrand { display:flex;align-items:center;gap:10px;min-width:0 }.gbPreviewBrand>i{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(201,155,63,.17);color:#e2b858;font-size:21px}.gbPreviewBrand>span{display:flex;flex-direction:column;min-width:0}.gbPreviewBrand small{color:#d6aa4c;font-size:8px;font-weight:900;letter-spacing:.14em}.gbPreviewBrand strong{color:#fff;font:700 18px/1.2 Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gbPreviewDevices { display:flex;gap:3px;padding:3px;border:1px solid rgba(255,255,255,.12);border-radius:11px;background:rgba(255,255,255,.07) }.gbPreviewDevices button{height:35px;padding:0 11px;border:0;border-radius:8px;background:transparent;color:rgba(255,255,255,.68);cursor:pointer;font-size:11px;font-weight:700;display:flex;align-items:center;gap:5px}.gbPreviewDevices button.active{background:#fff;color:#182742}.gbPreviewDevices i{font-size:17px}
.gbPreviewActions { display:flex;align-items:center;justify-content:flex-end;gap:9px }.gbPreviewActions .gbStudioBtn{min-height:38px}.gbPreviewClose{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:11px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:20px}
.gbPreviewStage { min-height:0;overflow:auto;padding:24px;display:flex;align-items:flex-start;justify-content:center;background:radial-gradient(circle at 50% 0,#f8fafc 0,#e5eaf0 65%); }
.gbPreviewFrame { width:min(100%,1440px);min-height:calc(100vh - 114px);overflow:hidden;border:1px solid rgba(24,39,66,.16);border-radius:18px;background:#fbfaf6;box-shadow:0 28px 70px rgba(24,39,66,.2);transition:width .22s ease; }
.gbPreviewFrame[data-device="tablet"]{width:820px}.gbPreviewFrame[data-device="mobile"]{width:390px}.gbPreviewFrame[data-device="mobile"] .gbPreviewSiteHead{grid-template-columns:auto 1fr;padding:18px}.gbPreviewFrame[data-device="mobile"] .gbPreviewSiteHead>button{display:none}.gbPreviewFrame[data-device="mobile"] .gbPreviewSiteHead em{max-width:250px}.gbPreviewFrame[data-device="mobile"] .gbLiveClone{display:flex!important;flex-direction:column}.gbPreviewFrame[data-device="mobile"] .gbLiveClone .groupPageBlock{width:100%;grid-column:auto!important;grid-row:auto!important}
.gbPreviewSiteHead { min-height:154px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:16px;padding:26px 34px;color:#fff;background:linear-gradient(110deg,rgba(10,30,52,.96),rgba(24,61,95,.82)),linear-gradient(135deg,#395c7d,#bf9852); }
.gbPreviewGroupIcon{width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:rgba(255,255,255,.14);font-size:27px}.gbPreviewSiteHead>span:nth-child(2){display:flex;flex-direction:column;gap:3px}.gbPreviewSiteHead small{color:#e5bd65;font-size:9px;font-weight:900;letter-spacing:.15em}.gbPreviewSiteHead strong{font:700 clamp(25px,3vw,42px)/1.08 Georgia,serif}.gbPreviewSiteHead em{max-width:760px;color:rgba(255,255,255,.73);font-size:12px;line-height:1.35;font-style:normal}.gbPreviewSiteHead button{height:42px;padding:0 18px;border:1px solid rgba(255,255,255,.35);border-radius:12px;background:#fff;color:#182742;font-weight:800}
.gbPreviewContent{padding:22px}.gbLiveClone{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;pointer-events:none}.gbLiveClone>.groupPageBlock,.gbLiveClone>.gbStack>.groupPageBlock{min-width:0;padding:18px;border:1px solid rgba(24,39,66,.08);background:#fff;box-shadow:0 7px 20px rgba(24,39,66,.07)}.gbLiveClone>.gbStack{display:flex;flex-direction:column;gap:18px}.gbPreviewBlankState{grid-column:1/-1;min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:2px dashed rgba(24,39,66,.18);border-radius:20px;background:rgba(255,255,255,.55);color:#6a7380;text-align:center;padding:30px}.gbPreviewBlankState i{font-size:46px;color:var(--gb-page-accent,#c99b3f)}.gbPreviewBlankState strong{font:700 24px/1.2 Georgia,serif;color:#182742}.gbPreviewBlankState span{max-width:430px;font-size:13px;line-height:1.5}

/* Mobile (and desktop) standalone theme picker — see window.gbOpenThemePicker_. Reuses
   .gbTemplateMenu/.gbTemplateCards/.gbTemplateCard from the Designer Studio above verbatim;
   only the backdrop/panel/header here are new. Sits under .gbTemplatePreview's 14000 so a
   card's own preview layers cleanly on top of this. */
.gbThemeSheet { position:fixed; inset:0; z-index:13500; display:flex; align-items:flex-end; justify-content:center; background:rgba(15,23,38,.55); }
.gbThemeSheetPanel { width:100%; max-width:900px; max-height:88vh; overflow-y:auto; background:#fbfaf6; color:#182742; border-radius:20px 20px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.3); }
.gbThemeSheetHead { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 16px 10px; background:#102743; color:#fff; }
.gbThemeSheetHead small { display:block; color:#d6aa4c; font-size:9px; font-weight:900; letter-spacing:.14em; margin-bottom:2px; }
.gbThemeSheetHead strong { font:700 18px/1.2 Georgia,'Times New Roman',serif; }
.gbThemeSheetHead .gbPreviewClose { border-color:rgba(255,255,255,.18); }
.gbThemeSheetHint { margin:12px 16px 0; color:#7b8190; font-size:12px; line-height:1.4; }
.gbThemeSheet .gbTemplateMenu { padding-top:10px; }
@media (min-width:640px){ .gbThemeSheet { align-items:center; } .gbThemeSheetPanel { border-radius:20px; max-height:82vh; } }
body.darkMode .gbThemeSheetPanel { background:var(--dm-bg); color:var(--dm-ink); }
body.darkMode .gbThemeSheetHint { color:var(--dm-ink-muted); }

@media (max-width:1450px){.gbDesignerStudioBody{grid-template-columns:minmax(0,1fr) 230px}.gbTemplateCards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.gbDesignerStudioTop{align-items:flex-start;flex-wrap:wrap}.gbDesignerTopActions{width:100%}.gbDesignerTopActions .gbStudioBtn{width:100%}.gbDesignerStudioBody{grid-template-columns:1fr}.gbPageSettings{border-left:0;border-top:1px solid rgba(24,39,66,.1)}.gbTemplateCards{grid-template-columns:repeat(2,minmax(0,1fr))}.gbPreviewTopbar{grid-template-columns:1fr auto}.gbPreviewDevices{display:none}.gbPreviewBrand{min-width:0}.gbPreviewActions .gbStudioBtn{font-size:0}.gbPreviewActions .gbStudioBtn::after{content:'Use';font-size:12px}.gbPreviewStage{padding:10px}.gbPreviewFrame{border-radius:12px}.gbPreviewSiteHead{padding:18px}.gbPreviewContent{padding:12px}}
@media (max-width:560px){.gbTemplateCards{grid-template-columns:1fr}.gbTemplateShot{height:108px}.gbTemplateCardCopy{min-height:104px}.gbDesignerStudioCopy em{display:none}.gbPreviewTopbar{padding:0 10px}.gbPreviewBrand small{display:none}.gbPreviewBrand strong{font-size:15px}.gbPreviewActions .gbStudioBtn{padding:0 10px}.gbPreviewClose{width:36px;height:36px}.gbPreviewSiteHead{min-height:132px}.gbPreviewGroupIcon{width:42px;height:42px;font-size:22px}}

body.darkMode .gbDesignerStudio,body.darkMode .gbTemplateCard{background:var(--dm-panel);color:var(--dm-ink);border-color:var(--dm-line)}
body.darkMode .gbPageSettings{background:var(--dm-bg);border-color:var(--dm-line)}body.darkMode .gbStudioSectionHead strong,body.darkMode .gbTemplateCardTitle strong,body.darkMode .gbDesignChoiceSeg button.active,body.darkMode .gbPageSettingsHint strong{color:var(--dm-ink)}body.darkMode .gbTemplateCardCopy>em,body.darkMode .gbStudioSectionHead em,body.darkMode .gbDesignChoice>span{color:var(--dm-ink-muted)}body.darkMode .gbDesignChoiceSeg{background:rgba(255,255,255,.06)}body.darkMode .gbDesignChoiceSeg button.active{background:rgba(255,255,255,.12)}body.darkMode .gbPageSettingsHint{background:rgba(255,255,255,.05);color:var(--dm-ink-muted)}

/* ============================================================================
   9. Focused Designer navigation — keep advanced choices available without showing
   every control at once. Templates, page style, and the block library are drawers.
   ============================================================================ */
.gbDesignerStudioTop { min-height: 72px; padding: 11px 14px; }
.gbDesignerStudioMark { width: 42px; height: 42px; border-radius: 13px; font-size: 22px; }
.gbDesignerStudioCopy strong { font-size: 20px; }
.gbDesignerStudioCopy em { color: rgba(255,255,255,.66); }
.gbDesignerTopActions .gbStudioBtn { min-height: 38px; padding: 0 13px; border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.09); color: #fff; box-shadow: none; }
.gbDesignerTopActions .gbStudioBtn:hover,.gbDesignerTopActions .gbStudioBtn.active { border-color: rgba(229,189,101,.7); background: rgba(229,189,101,.18); color: #ffe4a0; }
.gbDesignerTopActions .gbStudioBtnPrimary { border-color: #d1a33f; background: #d1a33f; color: #102743; }
.gbDesignerStudioBody[hidden],.gbDesignerStudioBody .gbTemplateMenu[hidden],.gbDesignerStudioBody .gbPageSettings[hidden] { display: none !important; }
.gbDesignerStudioBody { display: block; border-top: 1px solid rgba(255,255,255,.08); }
.gbTemplateMenu { padding: 18px; }
.gbPageSettings { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0 16px; padding: 18px; border-left: 0; background: #fbfaf6; }
.gbPageSettings .gbStudioSectionHead { grid-column: 1 / -1; }
.gbPageSettings .gbPageSettingsHint { grid-column: 1 / -1; }

/* Block library becomes a compact sticky drawer. */
.gbTray { padding: 0; overflow: hidden; border-radius: 17px; }
.gbTrayHead { min-height: 64px; margin: 0; padding: 9px 11px; }
.gbTrayIdentity { min-width: 0; flex: 1 1 auto; display: flex; align-items: center; gap: 10px; }
.gbTrayIdentity > i { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: rgba(201,155,63,.13); color: #a9761d; font-size: 21px; }
.gbTrayIdentity > span { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gbTrayIdentity small { color: #a9761d; font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.gbTrayIdentity strong { color: #182742; font: 700 16px/1.15 Georgia,'Times New Roman',serif; }
.gbTrayIdentity em { color: #7c8390; font-size: 10.5px; font-style: normal; }
.gbTrayActions { display: flex; align-items: center; gap: 7px; }
.gbTrayToggle { min-height: 39px; padding: 0 12px; border: 0; border-radius: 11px; background: #182742; color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; }
.gbTrayToggle .gbTrayChevron { transition: transform .18s ease; }
.gbTrayOpen .gbTrayToggle .gbTrayChevron { transform: rotate(180deg); }
.gbTrayUndo { min-height: 37px; padding: 0 10px; }
.gbTrayBrowser { display: none; padding: 0 12px 13px; border-top: 1px solid rgba(24,39,66,.08); }
.gbTrayOpen .gbTrayBrowser { display: block; }
.gbTrayTools { display: grid; grid-template-columns: minmax(180px,300px) minmax(0,1fr); align-items: center; gap: 12px; padding: 11px 0; }
.gbTraySearchWrap { min-width: 0; height: 39px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(24,39,66,.13); border-radius: 11px; background: #fff; color: #737b88; }
.gbTraySearchWrap i { font-size: 18px; }
.gbTraySearch { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #182742; font: 600 11px/1.2 inherit; }
.gbTrayCategories { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 5px; overflow-x: auto; }
.gbTrayCategories button { min-height: 32px; padding: 0 10px; border: 1px solid rgba(24,39,66,.1); border-radius: 999px; background: #fff; color: #626b79; cursor: pointer; white-space: nowrap; font-size: 9.5px; font-weight: 800; }
.gbTrayCategories button.active { border-color: #182742; background: #182742; color: #fff; }
.gbTrayOpen .gbTrayTiles { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; overflow: visible; padding: 0; }
.gbTrayOpen .gbTrayTile { width: auto; min-height: 54px; padding: 8px 9px; cursor: grab; }
.gbTrayOpen .gbTrayTile i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: rgba(201,155,63,.12); font-size: 18px; }
.gbTrayOpen .gbTrayTileCopy strong { font-size: 10.5px; }
.gbTrayOpen .gbTrayTileCopy small { font-size: 8.5px; }
.gbTrayNoResults { min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #7a8290; text-align: center; }
.gbTrayNoResults i { color: #b8862f; font-size: 28px; }
.gbTrayNoResults strong { color: #182742; font-size: 12px; }
.gbTrayNoResults span { font-size: 10px; }

body.darkMode .gbTrayIdentity strong,body.darkMode .gbTraySearch{color:var(--dm-ink)}
body.darkMode .gbTrayIdentity em,body.darkMode .gbTrayNoResults{color:var(--dm-ink-muted)}
body.darkMode .gbTrayBrowser{border-color:var(--dm-line)}
body.darkMode .gbTraySearchWrap,body.darkMode .gbTrayCategories button{background:var(--dm-panel);border-color:var(--dm-line);color:var(--dm-ink)}
body.darkMode .gbTrayCategories button.active{background:var(--dm-gold);border-color:var(--dm-gold);color:var(--dm-bg)}

@media (max-width:1450px){.gbPageSettings{grid-template-columns:repeat(2,minmax(0,1fr))}.gbTrayOpen .gbTrayTiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.gbDesignerTopActions{width:auto;margin-left:auto}.gbDesignerTopActions .gbStudioBtn span{display:none}.gbDesignerTopActions .gbStudioBtn{width:39px;padding:0}.gbDesignerStudioCopy em{display:none}.gbPageSettings{grid-template-columns:1fr}.gbTrayTools{grid-template-columns:1fr}.gbTrayCategories{justify-content:flex-start}.gbTrayOpen .gbTrayTiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gbDesignerStudioTop{gap:8px}.gbDesignerStudioCopy strong{font-size:16px}.gbDesignerStudioCopy small{font-size:8px}.gbDesignerStudioMark{display:none}.gbDesignerTopActions{gap:4px}.gbTrayIdentity em,.gbTrayUndo span{display:none}.gbTrayOpen .gbTrayTiles{grid-template-columns:1fr}.gbTrayToggle span{display:none}.gbTrayToggle{width:39px;padding:0;justify-content:center}.gbTrayToggle .gbTrayChevron{display:none}}