/* ============================================================================
   Group Desktop UI — phase 1 of a broader desktop/large-tablet initiative.
   Scoped ENTIRELY to #groupDetailOverlay so it never affects Home/Reader/any
   other screen yet. Everything below a fresh 1200px breakpoint is invisible
   (display:none) — the existing mobile experience is completely untouched
   below that width. This is a pure additive layer: no existing Index.html
   markup is removed, only new sibling elements are shown/hidden.

   Loaded as its own file (not inlined into Index.html's own <style> block)
   per an explicit user decision this session — same page/DOM/session as
   everything else, purely a file-organization choice. Bump the ?v= query
   string on the <link> tag in Index.html whenever this file changes, so
   browsers don't serve a stale cached copy after a deploy.
   ============================================================================ */

/* ---------- New elements hidden by default; only shown at the desktop
   breakpoint below. Mobile is completely unaffected. ---------- */
#gdTopBar,
#gdSidebar,
#gdDesktopHeader,
#gdDashboard,
.gdWorkspaceModeBar,
.gdAdminWorkspacePanel,
.gdGroupPageSectionHeading {
  display: none;
}

/* Group access is one decision with two clear outcomes. These shared rules also
   style the visitor request surface on mobile; the desktop breakpoint below only
   widens the layouts. */
.groupAccessChooser {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.groupAccessChooser > button {
  min-width: 0;
  min-height: 86px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(24,39,66,.13);
  border-radius: 15px;
  background: #fff;
  color: #182742;
  text-align: left;
  cursor: pointer;
}
.groupAccessChooser > button.active {
  border-color: #bd8b28;
  background: #fff8e9;
  box-shadow: 0 0 0 2px rgba(189,139,40,.13);
}
.groupAccessChooser > button:disabled { opacity: .62; cursor: not-allowed; }
.groupAccessChoiceIcon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #f4ead3;
  color: #9a6b12;
  font-size: 20px;
}
.groupAccessChooser strong,
.groupAccessChooser small { display: block; }
.groupAccessChooser strong { font-size: 14px; }
.groupAccessChooser small { margin-top: 4px; color: #6f7580; font-size: 11px; line-height: 1.35; }

.groupVisitorPreviewNotice {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 12px;
  padding: 11px 13px;
  border: 1px solid rgba(194,145,45,.28);
  border-radius: 14px;
  background: #fff9eb;
  color: #182742;
}
.groupVisitorPreviewNotice > span {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #182f50;
  color: #fff;
  font-size: 18px;
}
.groupVisitorPreviewNotice > div { flex: 1 1 auto; min-width: 0; }
.groupVisitorPreviewNotice strong,
.groupVisitorPreviewNotice small { display: block; }
.groupVisitorPreviewNotice small { margin-top: 2px; color: #747982; font-size: 11px; }
.groupVisitorPreviewNotice button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(24,39,66,.14);
  border-radius: 999px;
  background: #fff;
  color: #182f50;
  font-weight: 800;
  cursor: pointer;
}

.groupJoinRequestCard {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid rgba(24,39,66,.10);
  border-radius: 18px;
  background: linear-gradient(135deg, #fffdf8, #fff8ea);
  box-shadow: 0 8px 24px rgba(24,39,66,.08);
}
.groupJoinRequestIcon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #182f50;
  color: #fff;
  font-size: 24px;
}
.groupJoinRequestEyebrow { color: #9a6b12; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.groupJoinRequestCopy h3 { margin: 3px 0 4px; color: #182742; font-family: 'Mongolian Baiti','Playfair Display',serif; font-size: 22px; }
.groupJoinRequestCopy p { margin: 0; color: #6f7580; font-size: 12px; line-height: 1.45; }
.groupJoinRequestStatus {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: #805909;
  font-size: 12px;
  font-weight: 800;
}
.groupJoinRequestButtons { display: flex; align-items: center; gap: 8px; }
.groupJoinRequestButtons .btn { width: auto; min-height: 44px; white-space: nowrap; }

body.darkMode .groupAccessChooser > button,
body.darkMode .groupVisitorPreviewNotice,
body.darkMode .groupJoinRequestCard { border-color: var(--dm-line); background: var(--dm-panel); color: var(--dm-ink); }
body.darkMode .groupAccessChooser > button.active { border-color: var(--dm-gold); background: rgba(213,168,72,.10); }
body.darkMode .groupAccessChooser strong,
body.darkMode .groupJoinRequestCopy h3 { color: var(--dm-ink); }
body.darkMode .groupAccessChooser small,
body.darkMode .groupVisitorPreviewNotice small,
body.darkMode .groupJoinRequestCopy p { color: var(--dm-ink-muted); }

@media (max-width: 699px) {
  .groupAccessChooser { grid-template-columns: 1fr; }
  .groupJoinRequestCard { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .groupJoinRequestButtons { grid-column: 1 / -1; }
  .groupJoinRequestButtons .btn { flex: 1 1 auto; }
  .groupVisitorPreviewNotice { align-items: flex-start; flex-wrap: wrap; }
  .groupVisitorPreviewNotice button { flex: 1 1 100%; }
}

/* ============================================================================
   Groups Library — unified desktop layout (September 2026)
   Keeps mobile unchanged while using desktop width as a library + starter rail.
   ============================================================================ */
@media (min-width: 1200px) {
  body.v2Design.desktopShellReady #groupsOverlay {
    background: #f7f4ed;
  }

  body.v2Design.desktopShellReady #groupsOverlay .groupsHubHero {
    flex: 0 0 142px;
    min-height: 142px;
    padding: 22px 28px 38px;
    background-position: center 44%;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsHubHero h2 {
    margin-top: 6px;
    font-size: 38px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsHubSubtitle {
    max-width: 640px;
    font-size: 13.5px;
  }

  body.v2Design.desktopShellReady #groupsOverlay .groupsHubToolbar {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(390px, 440px);
    align-items: center;
    gap: 14px;
    margin: -26px 24px 0;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsHubSearch input {
    height: 52px;
    border-radius: 16px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsHubTabs {
    min-width: 0;
    margin: 0 !important;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(11,27,49,.13);
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsHubTabs button {
    min-height: 42px;
  }

  body.v2Design.desktopShellReady #groupsOverlay .groupsHubScroll {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "heading starter"
      "cards starter";
    align-content: start;
    align-items: start;
    column-gap: 24px;
    row-gap: 12px;
    padding: 24px 24px 42px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsCatalogHeadingRow {
    grid-area: heading;
    margin: 0 2px 2px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsCatalogTitleLine {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsCatalogTitleLine h3 {
    margin-bottom: 3px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsCatalogCount {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 0 10px;
    border: 1px solid rgba(194,145,45,.2);
    border-radius: 999px;
    background: rgba(194,145,45,.1);
    color: #8a651c;
    font-size: 11px;
    font-weight: 800;
  }

  body.v2Design.desktopShellReady #groupsOverlay .groupsCardGrid {
    grid-area: cards;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupHubCard {
    border-radius: 18px;
    box-shadow: 0 8px 22px rgba(24,39,66,.09);
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupHubCardVisual {
    height: 140px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupHubCardBody {
    padding: 17px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupHubCardTitle {
    font-size: 21px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupHubCardDesc {
    min-height: 38px;
    margin: 7px 0 15px;
    font-size: 12.75px;
  }

  body.v2Design.desktopShellReady #groupsOverlay .groupsStartSection {
    grid-area: starter;
    position: sticky;
    top: 0;
    margin: 0;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 9px 24px rgba(24,39,66,.08);
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsHubScroll.groupsHubScrollFull {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "heading"
      "cards";
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsHubScroll.groupsHubScrollFull .groupsCardGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsStartSection .groupsSectionHeading {
    flex-direction: column;
    gap: 14px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsStartSection .groupsSectionHeading h3 {
    font-size: 25px;
  }
  body.v2Design.desktopShellReady #groupsOverlay #newGroupBtn.groupsPrimaryAction {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    border-radius: 13px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsTemplateRail {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 16px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsTemplateMini {
    min-height: 66px;
    padding: 12px;
    border-radius: 14px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsTemplateMiniIcon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    font-size: 21px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsTemplateMini strong {
    font-size: 13.5px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsTemplateMini small {
    font-size: 11px;
  }
}

@media (min-width: 1500px) {
  body.v2Design.desktopShellReady #groupsOverlay .groupsHubScroll {
    grid-template-columns: minmax(0, 1fr) 340px;
    column-gap: 28px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsCardGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) and (max-width: 1320px) {
  body.v2Design.desktopShellReady #groupsOverlay .groupsHubToolbar {
    grid-template-columns: minmax(300px, 1fr) minmax(360px, 410px);
    margin-left: 18px;
    margin-right: 18px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsHubScroll {
    grid-template-columns: minmax(0, 1fr) 292px;
    column-gap: 18px;
    padding-left: 18px;
    padding-right: 18px;
  }
  body.v2Design.desktopShellReady #groupsOverlay .groupsTemplateMini {
    padding: 10px;
  }
}

@media (min-width: 1200px) {
  body.darkMode.v2Design.desktopShellReady #groupsOverlay {
    background: var(--dm-bg);
  }
  body.darkMode.v2Design.desktopShellReady #groupsOverlay .groupsStartSection,
  body.darkMode.v2Design.desktopShellReady #groupsOverlay .groupHubCard,
  body.darkMode.v2Design.desktopShellReady #groupsOverlay .groupsTemplateMini {
    border-color: var(--dm-line);
    background: var(--dm-panel);
  }
  body.darkMode.v2Design.desktopShellReady #groupsOverlay .groupsCatalogCount {
    border-color: rgba(210,176,105,.25);
    background: rgba(210,176,105,.12);
    color: var(--dm-gold);
  }
}

@media (min-width: 1200px) {

  /* Hide the mobile-only chrome while a Group is open at this width — scoped
     to body:has(#groupDetailOverlay.show) so Home/Reader/etc. never lose
     their own bottom nav; only Groups goes into "desktop mode". */
  body:has(#groupDetailOverlay.show) #bottomNavBar { display: none !important; }
  /* The unified desktop shell (app-desktop.css) hides this screen's own #gdSidebar, so the tab
     row below is the ONLY way to reach Updates / People / Events / Media / Prayer / Volunteer /
     Manage on desktop. Restyled from the mobile icon-over-label bar into a plain sticky tab row;
     which tabs show is still decided by openGroupDetail (membership / volunteer / leader). */
  body.v2Design #groupDetailOverlay #groupDetailTabs {
    display: flex !important;
    position: sticky; top: 0; z-index: 25;
    gap: 4px; padding: 0 0 0; margin: 0 0 20px;
    background: var(--v2-cream, #faf8f2);
    border-radius: 0;
    border-bottom: 1px solid rgba(24,39,66,.12);
  }
  body.v2Design #groupDetailOverlay #groupDetailTabs button {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 10px 10px 0 0;
    font-size: 14px; font-weight: 700;
    color: #56606f;
    border-bottom: 3px solid transparent;
  }
  body.v2Design #groupDetailOverlay #groupDetailTabs button svg { width: 18px; height: 18px; flex: 0 0 auto; }
  body.v2Design #groupDetailOverlay #groupDetailTabs button:hover { background: rgba(24,39,66,.05); color: #17233c; }
  body.v2Design #groupDetailOverlay #groupDetailTabs button.active {
    background: transparent; color: var(--v2-green, #17233c); border-bottom-color: var(--v2-gold, #c99b3f);
  }
  body.v2Design #groupDetailOverlay.gdCanEditInfo #groupDetailTabs .gdDesktopOnlyTab { display: flex; margin-left: auto; }
  body.v2Design #groupDetailOverlay.gdCanUseAssistant #groupDetailTabs .gdDesktopAssistantTab {
    display: flex;
    color: #9a6b12;
    border-bottom-color: rgba(201,155,63,.5);
  }
  body.v2Design #groupDetailOverlay.gdCanUseAssistant #groupDetailTabs .gdDesktopAssistantTab:hover {
    background: #fff7e5;
    color: #7e560d;
  }
  body.darkMode.v2Design #groupDetailOverlay #groupDetailTabs { background: var(--dm-bg, #0d1524); border-bottom-color: var(--dm-line, rgba(247,236,213,.14)); }
  body.darkMode.v2Design #groupDetailOverlay #groupDetailTabs button { color: var(--dm-ink-muted, #b9b2a3); }
  body.darkMode.v2Design #groupDetailOverlay #groupDetailTabs button:hover { background: rgba(247,236,213,.06); color: var(--dm-ink, #f7ecd5); }
  body.darkMode.v2Design #groupDetailOverlay #groupDetailTabs button.active { color: var(--dm-gold, #d5a848); border-bottom-color: var(--dm-gold, #d5a848); }
  body.v2Design #groupDetailOverlay .groupWorkspaceHero { display: none !important; }
  body.v2Design #groupDetailOverlay #groupWorkspacePulse,
  body.v2Design #groupDetailOverlay .groupLeaderCommandCenter { display: none !important; }

  /* #groupDetailOverlay becomes the desktop shell: a full-width top bar row,
     then a sidebar + content two-column row beneath it. .groupWorkspaceModal
     (the EXISTING, unmoved mobile content column) becomes the content column
     — it isn't relocated in the DOM, just repositioned via grid-area, so
     nothing inside it needs to change to participate in this layout. */
  body.v2Design #groupDetailOverlay.show {
    display: grid;
    grid-template-columns: 264px 1fr;
    grid-template-rows: 64px 1fr;
    grid-template-areas: "topbar topbar" "sidebar content";
    background: var(--v2-cream);
    overflow: hidden;
  }
  #gdTopBar { grid-area: topbar; display: flex; }
  #gdSidebar { grid-area: sidebar; display: flex; }
  body.v2Design #groupDetailOverlay.show .groupWorkspaceModal {
    grid-area: content;
    width: 100%;
    max-width: none;
    margin: 0;
    height: 100%;
    /* Same fix as home-desktop.css's identical .landingContent rule: a grid item's
       default min-height:auto lets it grow past its track instead of scrolling
       internally, so long content gets silently clipped by the outer grid's
       overflow:hidden instead of being reachable via scroll. Applied here proactively
       (this exact bug was found and fixed on the Home Desktop UI). */
    min-height: 0;
    overflow-y: auto;
    padding: 28px 32px 40px;
  }
  body.v2Design #groupDetailOverlay.show .groupWorkspaceCard {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    /* The mobile card is a 760px-wide column with its own overflow:auto scroll region
       (confirmed via a live ancestor walk: max-width 760px, overflow auto, squeezed shorter
       than its own content by the flex column). Left alone, that produced a boxed,
       internally-scrolling panel inside the already-scrolling content column instead of
       the dashboard using the full available width/height. Release all of it so the
       .groupWorkspaceModal column is the one and only scroll region. */
    max-width: none;
    width: 100%;
    margin: 0;
    overflow: visible;
    flex: 0 0 auto;
    height: auto;
    max-height: none;
  }

  /* ---------- Top bar ---------- */
  #gdTopBar {
    align-items: center;
    gap: 20px;
    padding: 0 24px;
    background: #fff;
    border-bottom: 1px solid rgba(24,39,66,.08);
  }
  #gdTopBar .gdTopBarLogo {
    display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
    border: none; background: none; cursor: pointer;
    color: var(--v2-green); font-family: 'Mongolian Baiti', 'Playfair Display', serif;
    font-size: 19px; font-weight: 700;
  }
  #gdTopBar .gdTopBarLogo i { font-size: 22px; color: var(--v2-gold); }
  .gdTopBarSearch {
    flex: 1 1 auto; max-width: 420px; display: flex; align-items: center; gap: 8px;
    background: var(--v2-cream); border: 1px solid rgba(24,39,66,.1); border-radius: 999px;
    padding: 9px 14px; color: var(--v2-muted); cursor: pointer;
  }
  .gdTopBarSearch i { font-size: 17px; }
  .gdTopBarSearch input {
    flex: 1 1 auto; border: none; background: none; font-size: 13.5px; color: var(--v2-ink);
    cursor: pointer; pointer-events: none;
  }
  .gdTopBarRight { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .gdTopBarIconBtn {
    position: relative; width: 38px; height: 38px; border-radius: 50%;
    border: none; background: none; color: var(--v2-ink); font-size: 20px;
    display: grid; place-items: center; cursor: pointer;
  }
  .gdTopBarIconBtn:hover { background: rgba(24,39,66,.06); }
  .gdTopBarBadge {
    position: absolute; top: 5px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
    background: #c4402c; border: 1.5px solid #fff;
  }
  .gdTopBarAvatarBtn {
    display: flex; align-items: center; gap: 4px; border: none; background: none; cursor: pointer;
    color: var(--v2-muted); padding: 4px; border-radius: 999px;
  }
  .gdTopBarAvatarBtn:hover { background: rgba(24,39,66,.06); }
  .gdTopBarAvatarBtn img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
  .gdTopBarAvatarBtn .mdi-account-circle { font-size: 30px; color: var(--v2-green); }
  .gdTopBarAvatarBtn .mdi-chevron-down { font-size: 18px; }

  /* ---------- Sidebar ---------- */
  #gdSidebar {
    flex-direction: column; gap: 2px; padding: 16px 12px;
    background: var(--v2-green); overflow-y: auto;
  }
  .gdSidebarItem {
    display: flex; align-items: center; gap: 11px; border: none; background: none;
    border-radius: 10px; padding: 10px 12px; text-align: left; cursor: pointer;
    color: rgba(255,255,255,.72); font-size: 13.5px; font-weight: 600;
  }
  .gdSidebarItem i { font-size: 19px; flex: 0 0 auto; }
  .gdSidebarItem:hover { background: rgba(255,255,255,.08); color: #fff; }
  .gdSidebarItem.active { background: rgba(201,162,39,.22); color: #fff; }
  .gdSidebarAssistantBtn {
    margin-top: 8px;
    background: rgba(201,162,39,.18);
    border: 1px solid rgba(229,190,91,.28);
    color: #fff;
  }
  .gdSidebarAssistantBtn:hover { background: rgba(201,162,39,.28); }
  .gdSidebarAssistantBtn i { color: #f0c968; }
  .gdSidebarSpacer { flex: 1 1 auto; }
  .gdSidebarBackBtn { color: rgba(255,255,255,.5); font-weight: 700; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 14px; }
  .gdSidebarBackBtn:hover { color: #fff; background: none; }

  /* ---------- Desktop header (replaces the photo-hero on desktop) ---------- */
  #gdDesktopHeader {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
    margin-bottom: 24px;
  }
  .gdDesktopEyebrow { color: var(--v2-gold); font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
  #gdDesktopTitle { margin: 4px 0 6px; color: var(--v2-green); font-family: 'Mongolian Baiti', 'Playfair Display', serif; font-size: 38px; line-height: 1.05; }
  .gdDesktopMeta { color: var(--v2-gold); font-weight: 700; font-size: 13.5px; }
  .gdDesktopDescription { max-width: 760px; margin: 8px 0 0; color: var(--v2-muted); font-size: 14px; line-height: 1.5; }
  .gdDesktopHeaderActions { display: flex; gap: 10px; flex: 0 0 auto; }
  .gdBtnSecondary, .gdBtnPrimary {
    display: inline-flex; align-items: center; gap: 7px; border-radius: 11px;
    padding: 10px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
  }
  .gdBtnSecondary { border: 1px solid rgba(24,39,66,.16); background: #fff; color: var(--v2-green); }
  .gdBtnPrimary { border: none; background: var(--v2-green); color: #fff; }
  .gdBtnPrimary:hover { background: #0f1c33; }
  .gdBtnSecondary:hover { background: rgba(24,39,66,.04); }

  /* ---------- Explicit Group workspace modes ---------- */
  #gdCustomizeBtn { display: none !important; }
  .gdWorkspaceModeBar {
    position: sticky;
    top: 0;
    z-index: 28;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 76px;
    margin: 0 0 18px;
    padding: 12px 14px 12px 16px;
    border: 1px solid rgba(24,39,66,.12);
    border-radius: 17px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 11px 28px rgba(24,39,66,.11);
    backdrop-filter: blur(16px);
  }
  #groupDetailOverlay.gdHasWorkspaceModes .gdWorkspaceModeBar { display: flex; }
  .gdWorkspaceModeIdentity { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .gdWorkspaceModeIcon {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: #edf2f8;
    color: var(--v2-green);
    font-size: 23px;
  }
  .gdWorkspaceModeIdentity > div { min-width: 0; }
  .gdWorkspaceModeEyebrow {
    display: block;
    margin-bottom: 1px;
    color: var(--v2-gold);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
  }
  .gdWorkspaceModeIdentity strong {
    display: block;
    color: var(--v2-green);
    font-family: 'Mongolian Baiti', 'Playfair Display', serif;
    font-size: 18px;
    line-height: 1.1;
  }
  .gdWorkspaceModeIdentity small {
    display: block;
    margin-top: 3px;
    color: var(--v2-muted);
    font-size: 11.5px;
    line-height: 1.25;
    white-space: nowrap;
  }
  .gdWorkspaceModeTabs {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(24,39,66,.11);
    border-radius: 14px;
    background: #f2efe8;
  }
  .gdWorkspaceModeTabs button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #596270;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
  }
  .gdWorkspaceModeTabs button i { font-size: 18px; }
  .gdWorkspaceModeTabs button:hover { background: rgba(255,255,255,.65); color: var(--v2-green); }
  .gdWorkspaceModeTabs button.active {
    background: var(--v2-green);
    color: #fff;
    box-shadow: 0 6px 14px rgba(24,39,66,.2);
  }
  .gdWorkspaceModeBar[data-mode="admin"] {
    border-color: rgba(31,74,120,.28);
    background: rgba(245,249,253,.97);
  }
  .gdWorkspaceModeBar[data-mode="admin"] .gdWorkspaceModeIcon { background: #173b63; color: #fff; }
  .gdWorkspaceModeBar[data-mode="designer"] {
    border-color: rgba(201,155,63,.6);
    background: linear-gradient(120deg, rgba(17,39,68,.98), rgba(25,55,88,.98));
    box-shadow: 0 12px 30px rgba(12,31,54,.24), inset 0 0 0 1px rgba(255,255,255,.05);
  }
  .gdWorkspaceModeBar[data-mode="designer"] .gdWorkspaceModeIcon { background: rgba(214,171,77,.18); color: #e4bd65; }
  .gdWorkspaceModeBar[data-mode="designer"] .gdWorkspaceModeIdentity strong { color: #fff; }
  .gdWorkspaceModeBar[data-mode="designer"] .gdWorkspaceModeIdentity small { color: rgba(255,255,255,.72); }
  .gdWorkspaceModeBar[data-mode="designer"] .gdWorkspaceModeTabs { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
  .gdWorkspaceModeBar[data-mode="designer"] .gdWorkspaceModeTabs button { color: rgba(255,255,255,.76); }
  .gdWorkspaceModeBar[data-mode="designer"] .gdWorkspaceModeTabs button:hover { background: rgba(255,255,255,.1); color: #fff; }
  .gdWorkspaceModeBar[data-mode="designer"] .gdWorkspaceModeTabs button.active { background: #d1a33f; color: #102947; }
  #groupDetailOverlay.gdHasWorkspaceModes #groupDetailTabs { top: 86px; }

  .gdAdminWorkspacePanel {
    margin: 0 0 22px;
    padding: 20px;
    border: 1px solid rgba(24,57,94,.14);
    border-radius: 20px;
    background: linear-gradient(145deg, #f7fbff, #fff);
    box-shadow: 0 8px 24px rgba(24,39,66,.07);
  }
  #groupDetailOverlay.gdModeAdmin .gdAdminWorkspacePanel { display: block; }
  .gdAdminWorkspaceHeading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
  }
  .gdAdminWorkspaceHeading > div > span {
    display: block;
    color: #295f93;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .13em;
  }
  .gdAdminWorkspaceHeading h2 {
    margin: 3px 0 3px;
    color: var(--v2-green);
    font-family: 'Mongolian Baiti', 'Playfair Display', serif;
    font-size: 25px;
  }
  .gdAdminWorkspaceHeading p { margin: 0; color: var(--v2-muted); font-size: 12.5px; }
  .gdAdminWorkspaceBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #e8f0f8;
    color: #244f7b;
    font-size: 10.5px;
    font-weight: 800;
  }
  .gdAdminActionGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 10px; }
  .gdAdminActionCard {
    min-height: 86px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid rgba(24,57,94,.12);
    border-radius: 15px;
    background: #fff;
    color: var(--v2-green);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(24,39,66,.035);
  }
  .gdAdminActionCard:hover { border-color: rgba(201,155,63,.55); transform: translateY(-1px); box-shadow: 0 8px 18px rgba(24,39,66,.08); }
  .gdAdminActionIcon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #edf3f9;
    color: #245886;
    font-size: 21px;
  }
  .gdAdminActionCard > span:nth-child(2) { min-width: 0; flex: 1 1 auto; }
  .gdAdminActionCard strong { display: block; margin-bottom: 3px; font-size: 13.5px; }
  .gdAdminActionCard small { display: block; color: var(--v2-muted); font-size: 11.25px; line-height: 1.35; }
  .gdAdminActionCard > .mdi-arrow-right { color: var(--v2-gold); font-size: 18px; }

  #groupDetailOverlay.gdModeAdmin .gdGroupPageSectionHeading,
  #groupDetailOverlay.gdModeAdmin #groupPageCustomizePanel,
  #groupDetailOverlay.gdModeAdmin #groupPageBlocksList,
  #groupDetailOverlay.gdModeAdmin #groupPageRelatedSection,
  #groupDetailOverlay.gdModeDesigner .gdGroupPageSectionHeading { display: none !important; }
  #groupDetailOverlay.gdModeAdmin .gdQuickStrip { display: none; }
  #groupDetailOverlay.gdModeDesigner.show .groupWorkspaceModal {
    background: linear-gradient(180deg, #f5efe2 0, var(--v2-cream) 520px);
  }

  /* ---------- Dashboard ---------- */
  /* Leaders only — gdRenderHeader_ sets .gdIsLeaderDesktop from the viewer's real permissions.
     Until now nothing in CSS read that class, so visitors and non-members saw a zeroed stat
     shell that meant nothing to them. */
  #groupDetailOverlay.gdIsLeaderDesktop.gdModeAdmin #gdDashboard { display: block; }
  .gdStatsRow { display: flex; align-items: stretch; gap: 12px; margin-bottom: 28px; }
  .gdStatCard {
    flex: 1 1 0; display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid rgba(24,39,66,.08); border-radius: 14px; padding: 16px;
  }
  .gdStatIcon {
    width: 42px; height: 42px; border-radius: 11px; flex: 0 0 auto;
    background: rgba(201,162,39,.14); color: var(--v2-gold); font-size: 20px; display: grid; place-items: center;
  }
  .gdStatText { display: flex; flex-direction: column; }
  .gdStatText strong { color: var(--v2-ink); font-size: 22px; line-height: 1.1; }
  .gdStatText span { color: var(--v2-muted); font-size: 12.5px; }
  .gdStatCreateWrap { position: relative; flex: 0 0 auto; }
  .gdCreateDropdownBtn { height: 100%; }
  .gdCreateDropdownMenu {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 5; min-width: 190px;
    background: #fff; border: 1px solid rgba(24,39,66,.1); border-radius: 12px;
    box-shadow: 0 14px 30px rgba(24,39,66,.16); padding: 6px; display: flex; flex-direction: column; gap: 2px;
  }
  .gdCreateDropdownMenu button {
    display: flex; align-items: center; gap: 9px; border: none; background: none; text-align: left;
    padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--v2-ink); font-size: 13px; font-weight: 600;
  }
  .gdCreateDropdownMenu button:hover { background: rgba(24,39,66,.06); }

  /* Leader-only compact strip under the stats: quick actions as pills. (The Recent
     sermons / Plans / "This week" dashboard sections were removed — sermons and plans are
     page blocks now, see group-builder.css; the calendar blocks cover "This week".) */
  .gdQuickStrip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -12px 0 26px;
  }
  .gdQuickStripLabel {
    color: var(--v2-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .08em;
    text-transform: uppercase; margin-right: 4px;
  }
  .gdQuickActionRow {
    display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(24,39,66,.12); background: #fff;
    padding: 8px 14px; border-radius: 999px; cursor: pointer; color: var(--v2-ink); font-size: 13px; font-weight: 700;
  }
  .gdQuickActionRow:hover { background: rgba(24,39,66,.05); }
  .gdQuickActionRow i { color: var(--v2-gold); font-size: 17px; flex: 0 0 auto; }

  /* ---------- Add plan flow ---------- */
  .gdPlanOverlay {
    position: fixed;
    inset: 0;
    z-index: 206;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 36px 36px 36px 280px;
    background: rgba(13,24,42,.55);
    backdrop-filter: blur(6px);
  }
  .gdPlanOverlay.show { display: flex; }
  .gdPlanModal {
    width: min(620px, calc(100vw - 340px));
    max-height: calc(100vh - 80px);
    overflow: hidden;
    border: 1px solid rgba(194,145,45,.2);
    border-radius: 22px;
    background: #fffdf8;
    box-shadow: 0 30px 80px rgba(12,24,43,.3);
  }
  .gdPlanModal--library { width: min(820px, calc(100vw - 340px)); }
  .gdPlanModalHeader {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px 17px;
    border-bottom: 1px solid rgba(24,39,66,.09);
  }
  .gdPlanModalEyebrow {
    display: block;
    margin-bottom: 4px;
    color: var(--v2-gold);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .12em;
  }
  .gdPlanModalHeader h2 {
    margin: 0;
    color: var(--v2-green);
    font-family: 'Mongolian Baiti', 'Playfair Display', serif;
    font-size: 25px;
  }
  .gdPlanModalHeader p { margin: 4px 0 0; color: var(--v2-muted); font-size: 12.5px; }
  .gdPlanModalClose {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(24,39,66,.12);
    border-radius: 50%;
    background: #fff;
    color: var(--v2-green);
    font-size: 21px;
    cursor: pointer;
  }
  .gdPlanChoiceList { display: grid; gap: 12px; padding: 20px 24px 24px; }
  .gdPlanChoiceBtn {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 14px 16px;
    border: 1px solid rgba(24,39,66,.1);
    border-radius: 16px;
    background: #fff;
    color: var(--v2-green);
    text-align: left;
    cursor: pointer;
  }
  .gdPlanChoiceBtn:hover { border-color: rgba(194,145,45,.52); box-shadow: 0 10px 24px rgba(24,39,66,.08); }
  .gdPlanChoiceIcon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(194,145,45,.12);
    color: var(--v2-gold);
    font-size: 24px;
  }
  .gdPlanChoiceCopy strong { display: block; font-size: 15px; }
  .gdPlanChoiceCopy span { display: block; margin-top: 3px; color: var(--v2-muted); font-size: 12px; line-height: 1.4; }
  .gdPlanChoiceBtn > .mdi-chevron-right { color: var(--v2-gold); font-size: 22px; }
  .gdExistingPlanToolbar { padding: 16px 24px 12px; }
  .gdExistingPlanSearch {
    width: 100%;
    min-height: 46px;
    padding: 0 16px;
    border: 1px solid rgba(24,39,66,.13);
    border-radius: 999px;
    background: #fff;
    color: var(--v2-ink);
    font: inherit;
    font-size: 13px;
  }
  .gdExistingPlanList {
    display: grid;
    gap: 10px;
    max-height: min(520px, calc(100vh - 250px));
    padding: 0 24px 24px;
    overflow-y: auto;
  }
  .gdExistingPlanRow {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 12px 13px;
    border: 1px solid rgba(24,39,66,.09);
    border-radius: 14px;
    background: #fff;
  }
  .gdExistingPlanIcon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #f2eee3;
    color: var(--v2-gold);
    font-size: 22px;
  }
  .gdExistingPlanCopy { min-width: 0; }
  .gdExistingPlanCopy strong { display: block; overflow: hidden; color: var(--v2-green); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
  .gdExistingPlanCopy span { display: block; margin-top: 3px; color: var(--v2-muted); font-size: 11.5px; }
  .gdExistingPlanAddBtn {
    min-height: 40px;
    padding: 0 14px;
    border: 0;
    border-radius: 10px;
    background: var(--v2-green);
    color: #fff;
    font: inherit;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
  }
  .gdExistingPlanAddBtn:disabled { opacity: .55; cursor: wait; }
  .gdExistingPlanEmpty { padding: 28px; color: var(--v2-muted); font-size: 13px; text-align: center; }

  /* ---------- Community page blocks ----------
     The mobile page is a single stack. Desktop gives each block only the space
     its content needs: compact resources share a row, while dense libraries and
     calendars retain the full canvas. */
  .gdGroupPageSectionHeading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 34px 0 16px;
    padding-top: 28px;
    border-top: 1px solid rgba(24,39,66,.1);
  }
  .gdGroupPageSectionHeading span {
    display: block;
    margin-bottom: 4px;
    color: var(--v2-gold);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
  }
  .gdGroupPageSectionHeading h2 {
    margin: 0;
    color: var(--v2-green);
    font-family: 'Mongolian Baiti', 'Playfair Display', serif;
    font-size: 25px;
    line-height: 1.1;
  }
  .gdGroupPageSectionHeading p {
    max-width: 390px;
    margin: 0;
    color: var(--v2-muted);
    font-size: 12.5px;
    line-height: 1.45;
    text-align: right;
  }
  .gdCustomizePanel {
    position: sticky;
    top: 78px;
    z-index: 8;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin: 0 0 18px;
    padding: 14px 16px;
    border: 1px solid rgba(194,145,45,.28);
    border-radius: 16px;
    background: rgba(255,252,245,.97);
    box-shadow: 0 12px 30px rgba(24,39,66,.11);
    backdrop-filter: blur(12px);
  }
  .gdCustomizePanelIntro,
  .gdCustomizePanelActions {
    display: flex;
    align-items: center;
  }
  .gdCustomizePanelIntro { gap: 12px; min-width: 0; }
  .gdCustomizePanelIcon {
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--v2-green);
    color: #fff;
    font-size: 22px;
  }
  .gdCustomizePanelIntro strong {
    display: block;
    color: var(--v2-green);
    font-family: 'Mongolian Baiti', 'Playfair Display', serif;
    font-size: 17px;
  }
  .gdCustomizePanelIntro p {
    margin: 2px 0 0;
    color: var(--v2-muted);
    font-size: 12px;
  }
  .gdCustomizePanelActions { gap: 9px; flex: 0 0 auto; }
  .gdCustomizePanelCount {
    margin-right: 3px;
    color: var(--v2-gold);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
  }
  .gdCustomizePanel .gdBtnSecondary,
  .gdCustomizePanel .gdBtnPrimary {
    min-height: 42px;
    padding: 0 15px;
  }
  #groupPageBlocksList {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
  }
  #groupPageBlocksList > .groupPageBlock {
    grid-column: span 6;
    min-width: 0;
    margin: 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);
    transition: grid-column .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease, transform .2s ease;
  }
  #groupPageBlocksList > .groupPageBlock--feed,
  #groupPageBlocksList > .groupPageBlock--videoWidget,
  #groupPageBlocksList > .groupPageBlock--imageWidget,
  #groupPageBlocksList > .groupPageBlock--calendarMonth {
    grid-column: 1 / -1;
  }
  #groupPageBlocksList > .groupPageBlock--size-compact { grid-column: span 4; }
  #groupPageBlocksList > .groupPageBlock--size-standard { grid-column: span 6; }
  #groupPageBlocksList > .groupPageBlock--size-wide { grid-column: 1 / -1; }
  #groupPageBlocksList.is-customizing > .groupPageBlock {
    border-color: rgba(194,145,45,.28);
    box-shadow: 0 9px 24px rgba(24,39,66,.09);
  }
  #groupPageBlocksList > .groupPageBlock.is-dragging {
    opacity: .45;
    transform: scale(.985);
  }
  #groupPageBlocksList > .groupPageBlock.is-drop-before::before,
  #groupPageBlocksList > .groupPageBlock.is-drop-after::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 999px;
    background: var(--v2-gold);
    box-shadow: 0 0 0 4px rgba(194,145,45,.13);
  }
  #groupPageBlocksList > .groupPageBlock.is-drop-before::before { top: -12px; }
  #groupPageBlocksList > .groupPageBlock.is-drop-after::after { bottom: -12px; }
  #groupPageBlocksList > .groupPageBlock.is-drop-before,
  #groupPageBlocksList > .groupPageBlock.is-drop-after { position: relative; }
  #groupPageBlocksList .groupPageBlockTitle {
    margin: 0 0 12px;
    color: var(--v2-green);
    font-family: 'Mongolian Baiti', 'Playfair Display', serif;
    font-size: 20px;
    line-height: 1.2;
  }
  #groupPageBlocksList .groupPageBlockBody {
    color: var(--v2-ink);
    font-size: 13.5px;
    line-height: 1.6;
  }
  #groupPageBlocksList .groupPageBlock--verse {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px 14px;
  }
  #groupPageBlocksList .groupPageBlock--verse .groupPageBlockTitle,
  #groupPageBlocksList .groupPageBlock--verse .groupPageBlockImg,
  #groupPageBlocksList .groupPageBlock--verse .groupPageBlockManageRow {
    grid-column: 1 / -1;
  }
  #groupPageBlocksList .groupPageBlock--verse .groupPageBlockImg {
    width: 100%;
    max-height: 340px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 14px;
    background: #ebe7dc;
  }
  #groupPageBlocksList .groupPageBlock--verse .groupPageBlockCaption {
    margin: 0;
    color: var(--v2-gold);
    font-size: 12px;
    font-weight: 800;
    text-align: left;
  }
  #groupPageBlocksList .groupPageBlock--verse > .btn.secondary {
    width: auto !important;
    min-height: 42px;
    margin: 0 !important;
    padding: 9px 14px;
    white-space: nowrap;
  }
  #groupPageBlocksList .groupPageBlock--image .groupPageBlockImg {
    max-height: 340px;
    object-fit: cover;
    border-radius: 14px;
  }
  #groupPageBlocksList .groupPageBlockFeedRow {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    padding: 0;
    overflow: visible;
  }
  #groupPageBlocksList .groupPageBlock--size-standard .groupPageBlockFeedRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #groupPageBlocksList .groupPageBlock--size-compact .groupPageBlockFeedRow {
    grid-template-columns: minmax(0, 1fr);
  }
  #groupPageBlocksList .groupPageFeedCard {
    width: auto;
    min-width: 0;
    border: 1px solid rgba(24,39,66,.08);
    border-radius: 14px;
    box-shadow: 0 5px 14px rgba(24,39,66,.07);
  }
  #groupPageBlocksList .groupPageFeedCardImg,
  #groupPageBlocksList .groupPageFeedCardIcon,
  #groupPageBlocksList .groupPageFeedCardThumbWrap {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  #groupPageBlocksList .groupPageFeedCardImg { object-fit: cover; }
  #groupPageBlocksList .groupPageFeedCardTitle {
    padding: 9px 10px 11px;
    color: var(--v2-ink);
    font-size: 12px;
    line-height: 1.35;
  }
  #groupPageBlocksList .groupPageBlockLinksList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }
  #groupPageBlocksList .groupPageBlockLinkBtn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--v2-green);
  }
  #groupPageBlocksList .groupPageBlockManageRow {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(24,39,66,.09);
  }
  .gdBlockDragHandle,
  .gdBlockActionBtn,
  .gdBlockOrderButtons button,
  .gdBlockSizeControl button {
    min-height: 38px;
    border: 1px solid rgba(24,39,66,.12);
    background: #fff;
    color: var(--v2-green);
    font: inherit;
    font-size: 11.5px;
    font-weight: 750;
    cursor: pointer;
  }
  .gdBlockDragHandle,
  .gdBlockActionBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    border-radius: 10px;
  }
  .gdBlockDragHandle { cursor: grab; }
  .gdBlockDragHandle:active { cursor: grabbing; }
  .gdBlockDragHandle .mdi { font-size: 18px; }
  .gdBlockOrderButtons {
    display: inline-grid;
    grid-template-columns: repeat(2, 38px);
  }
  .gdBlockOrderButtons button { padding: 0; }
  .gdBlockOrderButtons button:first-child { border-radius: 10px 0 0 10px; }
  .gdBlockOrderButtons button:last-child { margin-left: -1px; border-radius: 0 10px 10px 0; }
  .gdBlockOrderButtons button:disabled { opacity: .35; cursor: default; }
  .gdBlockSizeControl {
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(66px, auto));
    margin-right: auto;
    padding: 3px;
    border-radius: 11px;
    background: #f2efe8;
  }
  .gdBlockSizeControl button {
    min-height: 32px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--v2-muted);
  }
  .gdBlockSizeControl button.active {
    background: var(--v2-green);
    color: #fff;
    box-shadow: 0 4px 10px rgba(24,39,66,.16);
  }
  .gdBlockRemoveBtn { color: #a23a34; }
  .gdBlockActionBtn:hover,
  .gdBlockDragHandle:hover,
  .gdBlockOrderButtons button:not(:disabled):hover { border-color: rgba(194,145,45,.52); background: #fffaf0; }
  #groupPageBlocksList .groupPageBlock--size-compact .groupPageBlockManageRow {
    flex-wrap: wrap;
  }
  #groupPageBlocksList .groupPageBlock--size-compact .gdBlockSizeControl {
    order: 5;
    width: 100%;
    grid-template-columns: repeat(3, 1fr);
  }

  @media (max-width: 1360px) {
    #groupPageBlocksList .groupPageBlockFeedRow {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* ---------- Dark mode ---------- */
  body.darkMode #gdTopBar { background: var(--dm-panel); border-bottom-color: var(--dm-line); }
  body.darkMode #gdTopBar .gdTopBarLogo,
  body.darkMode #gdDesktopTitle { color: var(--dm-gold); }
  body.darkMode .gdTopBarSearch { background: rgba(247,236,213,.06); border-color: var(--dm-line); color: var(--dm-ink-muted); }
  body.darkMode .gdTopBarSearch input { color: var(--dm-ink); }
  body.darkMode .gdTopBarIconBtn,
  body.darkMode .gdTopBarAvatarBtn { color: var(--dm-ink); }
  body.darkMode.v2Design #groupDetailOverlay.show { background: var(--dm-bg); }
  body.darkMode .gdStatCard,
  body.darkMode .gdQuickActionRow,
  body.darkMode .gdCreateDropdownMenu { background: var(--dm-panel); border-color: var(--dm-line); }
  body.darkMode .gdStatText strong,
  body.darkMode .gdQuickActionRow,
  body.darkMode .gdCreateDropdownMenu button,
  body.darkMode .gdDesktopDescription { color: var(--dm-ink); }
  body.darkMode .gdBtnSecondary { background: var(--dm-panel); border-color: var(--dm-line); color: var(--dm-ink); }
  body.darkMode .gdBtnPrimary { background: var(--dm-gold); color: var(--dm-bg); }
  body.darkMode .gdQuickActionRow:hover,
  body.darkMode .gdCreateDropdownMenu button:hover { background: rgba(247,236,213,.08); }
  body.darkMode .gdGroupPageSectionHeading { border-top-color: var(--dm-line); }
  body.darkMode .gdCustomizePanel {
    border-color: rgba(213,168,72,.28);
    background: rgba(30,35,43,.96);
    box-shadow: 0 12px 30px rgba(0,0,0,.28);
  }
  body.darkMode .gdCustomizePanelIntro strong { color: var(--dm-ink); }
  body.darkMode .gdCustomizePanelIntro p { color: var(--dm-ink-muted); }
  body.darkMode .gdBlockDragHandle,
  body.darkMode .gdBlockActionBtn,
  body.darkMode .gdBlockOrderButtons button {
    border-color: var(--dm-line);
    background: var(--dm-panel-2);
    color: var(--dm-ink);
  }
  body.darkMode .gdBlockSizeControl { background: var(--dm-panel-2); }
  body.darkMode .gdBlockSizeControl button { color: var(--dm-ink-muted); }
  body.darkMode .gdBlockSizeControl button.active { background: var(--dm-gold); color: var(--dm-bg); }
  body.darkMode .gdBlockRemoveBtn { color: #ee9a92; }
  body.darkMode .gdPlanModal { border-color: var(--dm-line); background: var(--dm-panel); }
  body.darkMode .gdPlanModalHeader { border-bottom-color: var(--dm-line); }
  body.darkMode .gdPlanModalHeader h2,
  body.darkMode .gdPlanChoiceBtn,
  body.darkMode .gdExistingPlanCopy strong { color: var(--dm-ink); }
  body.darkMode .gdPlanModalHeader p,
  body.darkMode .gdPlanChoiceCopy span,
  body.darkMode .gdExistingPlanCopy span,
  body.darkMode .gdExistingPlanEmpty { color: var(--dm-ink-muted); }
  body.darkMode .gdPlanModalClose,
  body.darkMode .gdPlanChoiceBtn,
  body.darkMode .gdExistingPlanSearch,
  body.darkMode .gdExistingPlanRow {
    border-color: var(--dm-line);
    background: var(--dm-panel-2);
    color: var(--dm-ink);
  }
  body.darkMode .gdExistingPlanIcon { background: rgba(213,168,72,.12); color: var(--dm-gold); }
  body.darkMode .gdGroupPageSectionHeading h2,
  body.darkMode #groupPageBlocksList .groupPageBlockTitle { color: var(--dm-gold); }
  body.darkMode .gdGroupPageSectionHeading p,
  body.darkMode #groupPageBlocksList .groupPageBlockBody { color: var(--dm-ink-muted); }
  body.darkMode #groupPageBlocksList > .groupPageBlock,
  body.darkMode #groupPageBlocksList .groupPageFeedCard {
    border-color: var(--dm-line);
    background: var(--dm-panel);
    box-shadow: none;
  }
  body.darkMode #groupPageBlocksList .groupPageFeedCardTitle { color: var(--dm-ink); }
}
/* Desktop-only tab (Manage): shown by the min-width 1200px rules above for leaders; never in the mobile tab bar. */
#groupDetailTabs .gdDesktopOnlyTab,
#groupDetailTabs .gdDesktopAssistantTab { display: none; }

/* ============================================================================
   Volunteer Hub + four-role Groups model
   Shared across phone, tablet, and desktop. The existing scheduling, matching,
   availability, and board functions still provide the data; these styles give
   those tools one clear, role-aware workspace.
   ============================================================================ */
.groupVolunteerPortal {
  --volunteer-accent: #b8892f;
  --volunteer-accent-soft: #fbf2dc;
  --volunteer-accent-ink: #76520f;
  display: grid;
  gap: 16px;
  color: #132846;
}
.groupVolunteerPortal[data-accent="navy"] { --volunteer-accent:#183557; --volunteer-accent-soft:#e8eef5; --volunteer-accent-ink:#183557; }
.groupVolunteerPortal[data-accent="sage"] { --volunteer-accent:#5f7c69; --volunteer-accent-soft:#eaf2ed; --volunteer-accent-ink:#3e5d49; }
.groupVolunteerPortal[data-accent="burgundy"] { --volunteer-accent:#8a4551; --volunteer-accent-soft:#f7e9ec; --volunteer-accent-ink:#713441; }
.groupVolunteerHero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--volunteer-accent) 24%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--volunteer-accent) 20%, transparent), transparent 34%),
    linear-gradient(135deg, #102a4a 0%, #183557 58%, #254767 100%);
  box-shadow: 0 18px 48px rgba(17,39,69,.16);
  color: #fff;
}
.groupVolunteerHero::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -100px;
  bottom: -130px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
}
.groupVolunteerHeroIcon {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: color-mix(in srgb, var(--volunteer-accent) 82%, #fff 18%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  color: #fff;
  font-size: 31px;
}
.groupVolunteerHeroCopy { position: relative; z-index: 1; min-width: 0; }
.groupVolunteerEyebrow,
.groupVolunteerSectionHeading > div > span {
  display: block;
  margin-bottom: 4px;
  color: color-mix(in srgb, var(--volunteer-accent) 68%, #fff 32%);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}
.groupVolunteerHero h2 {
  margin: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(27px, 4vw, 40px);
  line-height: 1.06;
}
.groupVolunteerHero p { max-width: 720px; margin: 7px 0 0; color: rgba(255,255,255,.78); font-size: 14px; line-height: 1.55; }
.groupVolunteerRolePill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
}
.groupVolunteerCustomizeBtn,
.groupVolunteerIconBtn {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.12);
  color: #fff;
  min-height: 44px;
  border-radius: 999px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.groupVolunteerCustomizePanel,
.groupVolunteerSection {
  border: 1px solid rgba(19,40,70,.1);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 32px rgba(17,39,69,.075);
}
.groupVolunteerCustomizePanel { padding: 20px; border-top: 4px solid var(--volunteer-accent); }
.groupVolunteerCustomizePanel .groupVolunteerIconBtn { width: 40px; padding: 0; border-color: rgba(19,40,70,.12); background: #fff; color: #132846; }
.groupVolunteerCustomizeGrid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 14px 18px; }
.groupVolunteerAccentField { align-self: end; }
.groupVolunteerAccentChoices { display: flex; align-items: center; gap: 11px; min-height: 46px; }
.groupVolunteerAccentChoices button {
  width: 34px;
  height: 34px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(19,40,70,.18);
  cursor: pointer;
}
.groupVolunteerAccentChoices button.active { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #132846; }
.groupVolunteerAccentChoices [data-volunteer-accent="gold"] { background:#b8892f; }
.groupVolunteerAccentChoices [data-volunteer-accent="navy"] { background:#183557; }
.groupVolunteerAccentChoices [data-volunteer-accent="sage"] { background:#5f7c69; }
.groupVolunteerAccentChoices [data-volunteer-accent="burgundy"] { background:#8a4551; }
.groupVolunteerDisplayChoices { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; }
.groupVolunteerDisplayChoices label { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:650; color:#34445e; }
.groupVolunteerNav {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(19,40,70,.1);
  border-radius: 16px;
  background: #f4f1e9;
}
.groupVolunteerNav button {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #536076;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.groupVolunteerNav button i { font-size: 18px; }
.groupVolunteerNav button.active { background:#fff; color:var(--volunteer-accent-ink); box-shadow:0 4px 16px rgba(17,39,69,.11); }
.groupVolunteerPanel { display:grid; gap:16px; }
.groupVolunteerStats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.groupVolunteerStats .groupWorkspacePulseItem {
  min-height: 88px;
  border: 1px solid rgba(19,40,70,.09);
  border-radius: 16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(17,39,69,.06);
}
.groupVolunteerStats .groupWorkspacePulseIcon { background:var(--volunteer-accent-soft); color:var(--volunteer-accent-ink); }
.groupVolunteerSection { padding:20px; }
.groupVolunteerSectionHeading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.groupVolunteerSectionHeading h3 { margin:0; color:#132846; font-family:Georgia,"Times New Roman",serif; font-size:21px; line-height:1.18; }
.groupVolunteerSectionHeading p { margin:5px 0 0; color:#697389; font-size:13px; line-height:1.45; }
.groupVolunteerSectionHeading > div > span { color:var(--volunteer-accent-ink); }
.groupVolunteerCardGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.groupVolunteerCardGrid > .liveEventCard,
.groupVolunteerBoardList > .liveEventCard,
.groupVolunteerCandidateGrid > .liveEventCard { margin:0 !important; border:1px solid rgba(19,40,70,.09) !important; border-radius:14px !important; box-shadow:none !important; background:#fbfaf7 !important; }
.groupVolunteerPreferenceChips .tagChip { border:1px solid rgba(19,40,70,.1); background:#f7f5ef; color:#35445a; }
.groupVolunteerPreferenceChips .tagChip.active { border-color:var(--volunteer-accent); background:var(--volunteer-accent-soft); color:var(--volunteer-accent-ink); }
.groupVolunteerAvailabilityGrid { max-width:100%; overflow-x:auto; border:1px solid rgba(19,40,70,.09); border-radius:14px; }
.groupVolunteerAskComposer { margin-top:14px; padding:14px; border-radius:14px; background:var(--volunteer-accent-soft); }
.groupVolunteerBoardComposer { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:end; gap:10px; padding:14px; border-radius:16px; background:#f7f5ef; }
.groupVolunteerBoardComposer > i { align-self:start; width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--volunteer-accent-soft); color:var(--volunteer-accent-ink); font-size:21px; }
.groupVolunteerBoardComposer textarea { min-height:76px; margin:0; resize:vertical; }
.groupVolunteerBoardList { display:grid; gap:12px; margin-top:14px; }
.groupBlockAudienceField { padding:12px; border:1px solid rgba(19,40,70,.1); border-radius:14px; background:#f8f6f0; }
.groupMemberRoleChip[data-group-role="manager"] { background:#e8eef5; color:#183557; }
.groupMemberRoleChip[data-group-role="volunteer"] { background:#eaf2ed; color:#3e5d49; }
.groupMemberRoleChip[data-group-role="member"] { background:#f5f1e7; color:#76520f; }
.groupMemberRolePicker { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); }
.groupMemberRolePicker button { min-width:0; }
.groupMemberPerms.is-hidden-for-role { display:none; }
.gdAdminActionCard.gdAdminActionLocked,
.gdAdminActionCard:disabled {
  cursor:not-allowed;
  opacity:.62;
  transform:none;
  box-shadow:none;
  border-style:dashed;
}
.gdAdminActionCard.gdAdminActionLocked::after { content:"Owner approval required"; display:block; color:var(--v2-muted,#697389); font-size:10.5px; font-weight:700; }

body.darkMode .groupVolunteerCustomizePanel,
body.darkMode .groupVolunteerSection,
body.darkMode .groupVolunteerStats .groupWorkspacePulseItem { background:var(--dm-panel); border-color:var(--dm-line); box-shadow:none; }
body.darkMode .groupVolunteerNav { background:var(--dm-panel-2); border-color:var(--dm-line); }
body.darkMode .groupVolunteerNav button { color:var(--dm-ink-muted); }
body.darkMode .groupVolunteerNav button.active { background:var(--dm-panel); color:var(--dm-gold); }
body.darkMode .groupVolunteerSectionHeading h3,
body.darkMode .groupVolunteerCustomizePanel { color:var(--dm-ink); }
body.darkMode .groupVolunteerSectionHeading p,
body.darkMode .groupVolunteerDisplayChoices label { color:var(--dm-ink-muted); }
body.darkMode .groupVolunteerBoardComposer,
body.darkMode .groupVolunteerCardGrid > .liveEventCard,
body.darkMode .groupVolunteerBoardList > .liveEventCard,
body.darkMode .groupVolunteerCandidateGrid > .liveEventCard,
body.darkMode .groupBlockAudienceField { background:var(--dm-panel-2) !important; border-color:var(--dm-line) !important; }

@media (max-width: 720px) {
  .groupVolunteerHero { grid-template-columns:auto minmax(0,1fr); padding:18px; align-items:start; }
  .groupVolunteerHeroIcon { width:48px; height:48px; border-radius:14px; font-size:24px; }
  .groupVolunteerCustomizeBtn { grid-column:1 / -1; width:100%; }
  .groupVolunteerCustomizeGrid { grid-template-columns:1fr; }
  .groupVolunteerNav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .groupVolunteerStats { grid-template-columns:1fr; }
  .groupVolunteerStats .groupWorkspacePulseItem { min-height:72px; }
  .groupVolunteerSection { padding:16px; }
  .groupVolunteerSectionHeading { flex-direction:column; }
  .groupVolunteerSectionHeading .btn { width:100%; }
  .groupVolunteerCardGrid { grid-template-columns:1fr; }
  .groupVolunteerBoardComposer { grid-template-columns:auto minmax(0,1fr); }
  .groupVolunteerBoardComposer .btn { grid-column:1 / -1; width:100%; }
}

@media (min-width: 1200px) {
  #groupDetailTabVolunteer { max-width:1180px; margin:0 auto; padding:4px 2px 30px; }
  .groupVolunteerHero { padding:30px 32px; }
  .groupVolunteerPanel { min-width:0; }
}

/* ============================================================================
   People directory — one calm hierarchy for members and leaders on every size.
   The existing invite/import/household and role-permission functions remain the
   source of truth; this layer only reorganizes their presentation.
   ============================================================================ */
body.v2Design #groupDetailTabMembers {
  --people-navy:#132846;
  --people-gold:#bd8b24;
  --people-ivory:#fbf7ed;
  color:var(--people-navy);
}
.groupPeopleIntro {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(390px,.9fr);
  align-items:end;
  gap:22px;
  padding:24px;
  margin-bottom:16px;
  border:1px solid rgba(19,40,70,.09);
  border-radius:22px;
  background:
    radial-gradient(circle at 91% 16%, rgba(194,145,45,.16), transparent 32%),
    linear-gradient(135deg,#fffdf8,#f5efe2);
  box-shadow:0 12px 30px rgba(17,39,69,.07);
}
.groupPeopleIntroCopy { min-width:0; }
.groupPeopleEyebrow { display:block; margin-bottom:6px; color:var(--people-gold); font-size:10.5px; font-weight:850; letter-spacing:.15em; line-height:1.2; }
.groupPeopleIntro h2 { margin:0; color:var(--people-navy); font-family:Georgia,"Times New Roman",serif; font-size:clamp(28px,3.2vw,42px); font-weight:600; line-height:1; }
.groupPeopleIntro p { max-width:560px; margin:9px 0 0; color:#687286; font-size:13.5px; line-height:1.5; }
.groupPeopleStats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.groupPeopleStat { min-width:0; min-height:72px; display:flex; align-items:center; gap:9px; padding:11px; border:1px solid rgba(19,40,70,.08); border-radius:15px; background:rgba(255,255,255,.8); }
.groupPeopleStat > i { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:rgba(194,145,45,.13); color:#9c6d11; font-size:18px; }
.groupPeopleStat span,.groupPeopleStat strong,.groupPeopleStat small { display:block; min-width:0; }
.groupPeopleStat strong { color:var(--people-navy); font-family:Georgia,"Times New Roman",serif; font-size:20px; line-height:1; }
.groupPeopleStat small { margin-top:4px; overflow:hidden; color:#747c8b; font-size:9.5px; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }

.groupPeopleTools { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:0 0 16px; }
.groupPeopleTool { min-width:0; min-height:70px; display:grid; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:11px; padding:12px 14px; border:1px solid rgba(19,40,70,.1); border-radius:16px; background:#fff; color:var(--people-navy); text-align:left; cursor:pointer; box-shadow:0 7px 20px rgba(17,39,69,.055); transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; }
.groupPeopleTool:hover { transform:translateY(-1px); border-color:rgba(189,139,36,.42); box-shadow:0 10px 24px rgba(17,39,69,.09); }
.groupPeopleTool > i:first-child { width:42px; height:42px; display:grid; place-items:center; border-radius:13px; background:#f5efe1; color:#9c6d11; font-size:21px; }
.groupPeopleTool > span,.groupPeopleTool strong,.groupPeopleTool small { display:block; min-width:0; }
.groupPeopleTool strong { font-size:13px; line-height:1.2; }
.groupPeopleTool small { margin-top:3px; color:#737c8d; font-size:10.5px; line-height:1.25; }
.groupPeopleTool > i:last-child { color:#a77719; font-size:17px; }
.groupPeopleToolPrimary { border-color:#213b5e; background:linear-gradient(135deg,#112642,#1d3a61); color:#fff; }
.groupPeopleToolPrimary > i:first-child { background:rgba(255,255,255,.12); color:#e3b84f; }
.groupPeopleToolPrimary small { color:rgba(255,255,255,.68); }
.groupPeopleToolPrimary > i:last-child { color:#e3b84f; }

.groupAccessQueue:empty { display:none; }
.groupAccessQueue { margin-bottom:16px; padding:16px; border:1px solid rgba(189,139,36,.24); border-radius:18px; background:#fffaf0; }
.groupAccessQueueHeading { margin:0 0 7px !important; padding:0 !important; }
.groupAccessQueueHeading:not(:first-child) { margin-top:14px !important; }
.groupAccessQueueHeading .topicSectionLabel { color:#8b6111; font-size:10.5px; letter-spacing:.1em; }
.groupAccessQueue .liveInviteMemberRow { min-height:50px; padding:8px 0; border-bottom-color:rgba(19,40,70,.09); }
.groupAccessQueue .liveInviteMemberRow .memberName { color:var(--people-navy); }
.groupAccessQueue .liveInviteRowActions button { min-height:36px; padding:7px 12px; border:1px solid rgba(19,40,70,.12); border-radius:10px; background:#fff; color:var(--people-navy); font-size:11px; font-weight:750; cursor:pointer; }
.groupAccessQueue .liveInviteApproveBtn { border-color:#173d35 !important; background:#173d35 !important; color:#fff !important; }

.groupPeopleDirectoryHeader { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:4px 0 12px; }
.groupPeopleDirectoryHeader h3 { margin:0; color:var(--people-navy); font-family:Georgia,"Times New Roman",serif; font-size:22px; font-weight:600; line-height:1.12; }
.groupPeopleDirectoryTools { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-width:min(100%,440px); }
.groupPeopleSearch { position:relative; flex:1 1 290px; margin:0 !important; }
.groupPeopleSearch > i { position:absolute; left:14px; top:50%; z-index:1; transform:translateY(-50%); color:#6b7585; font-size:19px; pointer-events:none; }
body.v2Design #groupDetailOverlay .groupPeopleSearch input { width:100%; min-height:44px; padding:10px 14px 10px 42px; border:1px solid rgba(19,40,70,.12); border-radius:13px; background:#fff; color:var(--people-navy); box-sizing:border-box; }
.groupPeopleSort { position:relative; flex:0 0 126px; }
.groupPeopleSort > i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#6b7585; font-size:17px; pointer-events:none; }
.groupPeopleSort select { width:100%; min-height:44px; padding:8px 27px 8px 36px; border:1px solid rgba(19,40,70,.12); border-radius:13px; background:#fff; color:var(--people-navy); font-size:12px; font-weight:700; cursor:pointer; }

.groupPeopleGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
body.v2Design #groupDetailOverlay .groupPeopleGrid .groupMemberRow { min-width:0; margin:0; padding:0; overflow:hidden; border:1px solid rgba(19,40,70,.09); border-radius:18px; background:#fff; box-shadow:0 8px 23px rgba(17,39,69,.065); }
.groupMemberSummary { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:11px; padding:15px; }
.groupMemberAvatar { width:48px; height:48px; display:grid; place-items:center; overflow:hidden; border-radius:15px; background:linear-gradient(145deg,#f3ead6,#fffaf0); color:#9b6d15; font-family:Georgia,"Times New Roman",serif; font-size:19px; font-weight:700; }
.groupMemberAvatar img { width:100%; height:100%; object-fit:cover; }
.groupMemberAvatarUploaded { border:1px dashed rgba(19,40,70,.24); background:#f5f3ed; color:#687286; font-family:inherit; font-size:21px; }
.groupMemberIdentity { min-width:0; }
.groupMemberIdentity .groupMemberRowName { display:block; overflow:hidden; color:var(--people-navy); font-family:Georgia,"Times New Roman",serif; font-size:16px; font-weight:650; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.groupMemberMeta { margin-top:5px; color:#7a8290; font-size:10.5px; line-height:1.35; }
.groupMemberTags { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.groupMemberRoleChip,.groupHouseholdBadge { min-height:23px; display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; font-size:9.5px; font-weight:800; line-height:1.1; }
.groupMemberManageBtn { min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:8px 10px; border:1px solid rgba(19,40,70,.12); border-radius:11px; background:#faf9f5; color:var(--people-navy); font-size:10.5px; font-weight:800; cursor:pointer; }
.groupMemberManageBtn i { font-size:17px; }
.groupMemberManageBtn[aria-expanded="true"] { border-color:#213b5e; background:#1a3456; color:#fff; }
.groupMemberManageBtn[aria-expanded="true"] i { transform:rotate(180deg); }
.groupMemberAdminPanel { display:none; padding:14px 15px 15px; border-top:1px solid rgba(19,40,70,.08); background:#fbfaf6; }
.groupMemberAdminPanel.is-open { display:block; }
.groupMemberAdminSection + .groupMemberAdminSection { margin-top:13px; padding-top:13px; border-top:1px solid rgba(19,40,70,.08); }
.groupMemberAdminLabel { display:flex; align-items:center; gap:6px; margin-bottom:8px; color:#76520f; font-size:9.5px; font-weight:850; letter-spacing:.09em; text-transform:uppercase; }
.groupMemberAdminLabel i { font-size:15px; }
.groupMemberRolePicker { margin:0 !important; }
.groupMemberPerms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:0; padding:0; border:0; }
.groupMemberPermToggle { min-width:0; min-height:38px; display:flex; align-items:center; gap:8px; margin:0 !important; padding:8px 9px; border:1px solid rgba(19,40,70,.08); border-radius:10px; background:#fff; color:#556072; font-size:10.5px; line-height:1.25; }
.groupMemberPermToggle input { accent-color:#a77719; }
.groupMemberNoteBtn { width:100%; min-height:40px; display:flex; align-items:center; justify-content:flex-start; gap:8px; margin:0; padding:9px 11px; border:1px solid rgba(19,40,70,.1); border-radius:11px; background:#fff; color:var(--people-navy); font-size:11px; font-weight:750; cursor:pointer; }
.groupMemberNoteBtn i { color:#9b6d15; font-size:17px; }
.groupMemberNoteWrap textarea { width:100%; box-sizing:border-box; margin-top:8px; }
.groupMemberActionRow { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; padding-top:12px; border-top:1px solid rgba(19,40,70,.08); }
.groupMemberActionRow .btn { min-height:36px; flex:1 1 auto; margin:0; padding:7px 10px; border-radius:10px; font-size:10.5px; }
.groupMemberRowUploaded { opacity:1; border-style:dashed !important; }
.groupMemberRowUploaded .groupMemberSummary { background:#fdfcf8; }

body.darkMode .groupPeopleIntro { border-color:var(--dm-line); background:linear-gradient(135deg,var(--dm-panel),var(--dm-panel-2)); box-shadow:none; }
body.darkMode .groupPeopleIntro h2,
body.darkMode .groupPeopleDirectoryHeader h3,
body.darkMode .groupMemberIdentity .groupMemberRowName { color:var(--dm-ink); }
body.darkMode .groupPeopleIntro p,
body.darkMode .groupPeopleTool small,
body.darkMode .groupMemberMeta { color:var(--dm-ink-muted); }
body.darkMode .groupPeopleStat,
body.darkMode .groupPeopleTool,
body.darkMode #groupDetailOverlay .groupPeopleSearch input,
body.darkMode .groupPeopleSort select,
body.darkMode #groupDetailOverlay .groupPeopleGrid .groupMemberRow,
body.darkMode .groupMemberPermToggle,
body.darkMode .groupMemberNoteBtn { background:var(--dm-panel); border-color:var(--dm-line); color:var(--dm-ink); box-shadow:none; }
body.darkMode .groupPeopleStat strong,
body.darkMode .groupMemberManageBtn { color:var(--dm-ink); }
body.darkMode .groupMemberAdminPanel { background:var(--dm-panel-2); border-color:var(--dm-line); }
body.darkMode .groupAccessQueue { background:rgba(213,168,72,.08); border-color:rgba(213,168,72,.25); }

@media (max-width: 840px) {
  .groupPeopleIntro { grid-template-columns:1fr; padding:19px; }
  .groupPeopleStats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .groupPeopleTools { grid-template-columns:1fr; }
  .groupPeopleTool { min-height:62px; }
  .groupPeopleDirectoryHeader { align-items:stretch; flex-direction:column; }
  .groupPeopleDirectoryTools { width:100%; min-width:0; }
  .groupPeopleGrid { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .groupPeopleIntro { padding:16px; border-radius:18px; }
  .groupPeopleIntro h2 { font-size:30px; }
  .groupPeopleStat { min-height:61px; padding:9px; }
  .groupPeopleStat > i { width:30px; height:30px; flex-basis:30px; font-size:16px; }
  .groupPeopleStat strong { font-size:17px; }
  .groupPeopleDirectoryTools { align-items:stretch; flex-direction:column; }
  .groupPeopleSearch,.groupPeopleSort { flex:1 1 auto; width:100%; }
  .groupMemberSummary { grid-template-columns:44px minmax(0,1fr) auto; padding:13px; }
  .groupMemberAvatar { width:44px; height:44px; border-radius:13px; }
  .groupMemberManageBtn span { display:none; }
  .groupMemberManageBtn { width:38px; padding:7px; }
  .groupMemberPerms { grid-template-columns:1fr; }
  .groupAccessQueue .liveInviteMemberRow { align-items:flex-start; flex-wrap:wrap; }
  .groupAccessQueue .liveInviteRowActions { width:100%; }
  .groupAccessQueue .liveInviteRowActions button { flex:1 1 0; }
}

/* ============================================================================
   Group Events — a full calendar workspace shared by Agenda, Week, and Month.
   Existing event data, permissions, RSVP, volunteer, and editing behavior stay intact.
   ============================================================================ */
body.v2Design #groupDetailTabCalendar {
  --calendar-navy:#132846;
  --calendar-navy-soft:#203d63;
  --calendar-gold:#bd8b24;
  --calendar-ivory:#fbf7ed;
  --calendar-line:rgba(19,40,70,.1);
  color:var(--calendar-navy);
}
.groupCalendarHero {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(430px,.9fr);
  align-items:end;
  gap:24px;
  margin-bottom:14px;
  padding:25px 26px;
  overflow:hidden;
  border:1px solid var(--calendar-line);
  border-radius:22px;
  background:
    radial-gradient(circle at 94% 10%,rgba(198,149,49,.2),transparent 34%),
    linear-gradient(135deg,#fffdf8,#f4eddf);
  box-shadow:0 12px 30px rgba(17,39,69,.07);
}
.groupCalendarHeroCopy { min-width:0; }
.groupCalendarEyebrow { display:block; margin-bottom:6px; color:var(--calendar-gold); font-size:10.5px; font-weight:850; letter-spacing:.15em; line-height:1.2; }
.groupCalendarHero h2 { margin:0; color:var(--calendar-navy); font-family:Georgia,"Times New Roman",serif; font-size:clamp(30px,3.2vw,43px); font-weight:600; line-height:1; }
.groupCalendarHero p { max-width:610px; margin:9px 0 0; color:#687286; font-size:13.5px; line-height:1.5; }
.groupCalendarHeroStats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.groupCalendarHeroStats > div { min-width:0; min-height:72px; display:flex; align-items:center; gap:10px; padding:11px; border:1px solid rgba(19,40,70,.08); border-radius:15px; background:rgba(255,255,255,.82); }
.groupCalendarHeroStats > div > i { flex:0 0 35px; width:35px; height:35px; display:grid; place-items:center; border-radius:11px; background:rgba(189,139,36,.13); color:#9c6d11; font-size:19px; }
.groupCalendarHeroStats span,.groupCalendarHeroStats strong,.groupCalendarHeroStats small { display:block; min-width:0; }
.groupCalendarHeroStats strong { overflow:hidden; color:var(--calendar-navy); font-family:Georgia,"Times New Roman",serif; font-size:19px; line-height:1.05; text-overflow:ellipsis; white-space:nowrap; }
.groupCalendarHeroStats small { margin-top:4px; overflow:hidden; color:#747c8b; font-size:9.5px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }

.groupCalendarToolbar { display:grid; gap:11px; margin-bottom:14px; padding:14px; border:1px solid var(--calendar-line); border-radius:19px; background:#fff; box-shadow:0 8px 24px rgba(17,39,69,.055); }
.groupCalendarPrimaryActions { display:flex; gap:9px; }
.groupCalendarPrimaryActions > div { flex:0 1 235px; margin:0 !important; }
.groupCalendarAction { width:100%; min-height:56px; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--calendar-line); border-radius:14px; background:#faf8f2; color:var(--calendar-navy); text-align:left; cursor:pointer; }
.groupCalendarAction > i { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:#efe8d8; color:#946713; font-size:21px; }
.groupCalendarAction span,.groupCalendarAction strong,.groupCalendarAction small { display:block; min-width:0; }
.groupCalendarAction strong { font-size:12.5px; line-height:1.15; }
.groupCalendarAction small { margin-top:3px; color:#78808e; font-size:9.5px; }
.groupCalendarActionPrimary { border-color:#1c385c; background:linear-gradient(135deg,#112642,#1d3a61); color:#fff; }
.groupCalendarActionPrimary > i { background:rgba(255,255,255,.12); color:#e4b94f; }
.groupCalendarActionPrimary small { color:rgba(255,255,255,.68); }
.groupCalendarSearchRow { display:grid; grid-template-columns:minmax(260px,1fr) auto; align-items:center; gap:10px; }
.groupCalendarSearch { position:relative; margin:0 !important; }
.groupCalendarSearch > i { position:absolute; left:14px; top:50%; z-index:1; transform:translateY(-50%); color:#6e7786; font-size:19px; pointer-events:none; }
body.v2Design #groupDetailOverlay .groupCalendarSearch input { width:100%; min-height:48px; padding:10px 14px 10px 42px; box-sizing:border-box; border:1px solid var(--calendar-line); border-radius:14px; background:#fbfaf7; color:var(--calendar-navy); }
.groupCalendarViewSegment { min-width:330px; display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); align-self:auto !important; margin:0 !important; padding:4px !important; border:1px solid var(--calendar-line) !important; border-radius:14px !important; background:#f3f0e9 !important; }
body.v2Design #groupDetailOverlay .groupCalendarViewSegment button { min-height:40px; display:flex; align-items:center; justify-content:center; gap:6px; padding:8px 13px; border:0 !important; border-radius:10px !important; background:transparent !important; color:#606a7a !important; font-size:11.5px; font-weight:750; box-shadow:none !important; }
body.v2Design #groupDetailOverlay .groupCalendarViewSegment button i { font-size:17px; }
body.v2Design #groupDetailOverlay .groupCalendarViewSegment button.active { background:#172f50 !important; color:#fff !important; box-shadow:0 4px 12px rgba(19,40,70,.18) !important; }

.groupCalendarViewSurface { min-height:330px; padding:19px; border:1px solid var(--calendar-line); border-radius:20px; background:#faf8f2; }
.groupCalendarSectionHeading { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 11px; }
.groupCalendarSectionHeading > span { display:flex; align-items:center; gap:6px; color:#8b6111; font-size:10.5px; font-weight:850; letter-spacing:.11em; }
.groupCalendarSectionHeading > span i { font-size:17px; }
.groupCalendarSectionHeading > small { color:#7a8290; font-size:10.5px; }
.groupCalendarCommitments { margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--calendar-line); }
.groupCalendarAgendaGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin:0 !important; }
body.v2Design #groupDetailOverlay .groupCalendarAgendaGrid > .groupCalendarEventCard,
body.v2Design #groupDetailOverlay .groupCalendarSelectedList > .groupCalendarEventCard {
  min-width:0;
  min-height:128px;
  align-items:flex-start;
  gap:13px;
  margin:0 !important;
  padding:14px;
  border:1px solid var(--calendar-line) !important;
  border-radius:17px !important;
  background:#fff !important;
  color:var(--calendar-navy) !important;
  box-shadow:0 8px 22px rgba(17,39,69,.065) !important;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
body.v2Design #groupDetailOverlay .groupCalendarAgendaGrid > .groupCalendarEventCard:hover,
body.v2Design #groupDetailOverlay .groupCalendarSelectedList > .groupCalendarEventCard:hover { transform:translateY(-1px); border-color:rgba(189,139,36,.42) !important; box-shadow:0 11px 26px rgba(17,39,69,.1) !important; }
body.v2Design #groupDetailOverlay .groupCalendarEventCard:focus-visible { outline:3px solid rgba(189,139,36,.34); outline-offset:2px; }
.groupCalendarEventCard .liveEventDateBadge { flex:0 0 52px; width:52px; border:1px solid rgba(19,40,70,.1); border-radius:12px; background:#fffdf8; }
.groupCalendarEventCard .liveEventDateMonth { padding:5px 0 4px; background:#173354; color:#f4cc67; font-size:9px; letter-spacing:.1em; }
.groupCalendarEventCard .liveEventDateDay { padding:7px 0 8px; color:#173354; font-family:Georgia,"Times New Roman",serif; font-size:23px; font-weight:600; }
.groupCalendarEventCard .liveEventInfo { min-width:0; }
.groupCalendarEventCategory { margin-bottom:4px; color:#9c6d11; font-size:8.5px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.groupCalendarEventCard .liveEventTitle { margin:0 0 6px; overflow:visible; color:var(--calendar-navy); font-family:Georgia,"Times New Roman",serif; font-size:17px; font-weight:650; line-height:1.15; text-overflow:clip; white-space:normal; }
.groupCalendarEventMeta { display:flex; flex-wrap:wrap; gap:5px 13px; color:#657084; font-size:10.5px; line-height:1.35; }
.groupCalendarEventMeta span { display:inline-flex; align-items:center; gap:4px; min-width:0; }
.groupCalendarEventMeta i { flex:0 0 auto; color:#a5761b; font-size:14px; }
.groupCalendarEventDescription { display:-webkit-box; margin-top:7px; overflow:hidden; color:#707887; font-size:10.5px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.groupCalendarEventStatus { display:inline-flex; align-items:center; gap:5px; margin-top:8px; padding:4px 8px; border-radius:999px; background:#f4eddd; color:#79540f; font-size:9.5px; font-weight:750; }
.groupCalendarEventStatus i { font-size:14px; }
.groupCalendarEventChevron { align-self:center; flex:0 0 auto; color:#a77719; font-size:20px; }
.groupCalendarCommitmentCard { background:linear-gradient(135deg,#fffdf8,#f7f1e4) !important; }
.groupCalendarLoadMore { width:100%; min-height:44px; margin-top:13px; border-radius:13px !important; }
.groupCalendarAgendaGrid > .notesEmpty { grid-column:1 / -1; min-height:180px; display:grid; place-items:center; margin:0; border:1px dashed rgba(19,40,70,.16); border-radius:16px; background:#fff; color:#7a8290; }
.groupCalendarEmptyState { align-content:center; justify-items:center; gap:7px; padding:28px; text-align:center; }
.groupCalendarEmptyState > i { width:46px; height:46px; display:grid; place-items:center; border-radius:14px; background:#f3ecdd; color:#9a6c14; font-size:23px; }
.groupCalendarEmptyState > strong { color:#173354; font-family:Georgia,"Times New Roman",serif; font-size:18px; font-weight:600; }
.groupCalendarEmptyState > span { max-width:420px; color:#78808d; font-size:11px; line-height:1.5; }

.groupCalendarGridToolbar { display:grid; grid-template-columns:44px minmax(0,1fr) auto 44px; align-items:center; gap:8px; margin-bottom:11px; }
.groupCalendarGridToolbar h3 { margin:0; color:var(--calendar-navy); font-family:Georgia,"Times New Roman",serif; font-size:22px; font-weight:600; text-align:center; }
.groupCalendarGridToolbar button { min-width:44px; height:44px; display:grid; place-items:center; padding:0 13px; border:1px solid var(--calendar-line); border-radius:12px; background:#fff; color:var(--calendar-navy); font:inherit; font-size:12px; font-weight:750; cursor:pointer; }
.groupCalendarGridToolbar button i { font-size:22px; }
.groupCalendarGridToolbar #groupCalendarPrevBtn,
.groupCalendarGridToolbar #groupCalendarNextBtn { background:#173354 !important; color:#fff !important; border-color:#173354 !important; }
.groupCalendarGridToolbar #groupCalendarTodayBtn { display:block; min-width:74px; background:#f3ecdd !important; color:#7b5712 !important; border-color:rgba(189,139,36,.26) !important; }
.groupCalendarWeekdayHeader { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; margin:0 0 6px; padding:0 4px; }
.groupCalendarWeekdayHeader span { color:#858b96; font-size:9.5px; font-weight:800; letter-spacing:.08em; text-align:center; text-transform:uppercase; }
.groupCalendarGridScroller { max-width:100%; overflow-x:auto; padding:2px; }
body.v2Design #groupDetailOverlay #groupCalendarDayGrid { gap:7px; }
body.v2Design #groupDetailOverlay #groupCalendarDayGrid .groupCalendarDayCell { min-width:0; min-height:116px; padding:9px; border:1px solid var(--calendar-line); border-radius:13px; background:#fff; color:var(--calendar-navy); box-shadow:0 4px 13px rgba(17,39,69,.035); }
body.v2Design #groupDetailOverlay #groupCalendarDayGrid.groupCalendarDayGrid--month .groupCalendarDayCell { min-height:98px; }
body.v2Design #groupDetailOverlay #groupCalendarDayGrid .groupCalendarDayCell:hover { border-color:rgba(189,139,36,.42); }
body.v2Design #groupDetailOverlay #groupCalendarDayGrid .groupCalendarDayCell.today { border:2px solid #c2922d; }
body.v2Design #groupDetailOverlay #groupCalendarDayGrid .groupCalendarDayCell.selected { border-color:#173354; background:#173354; box-shadow:0 8px 18px rgba(19,40,70,.2); }
body.v2Design #groupDetailOverlay #groupCalendarDayGrid .groupCalendarDayCell.otherPeriod { opacity:.46; }
body.v2Design #groupDetailOverlay #groupCalendarDayGrid .groupCalendarDayCellNum { margin-bottom:6px; font-family:Georgia,"Times New Roman",serif; font-size:15px; font-weight:650; }
body.v2Design #groupDetailOverlay #groupCalendarDayGrid .groupCalendarDayCellChip { margin-top:3px; padding:3px 5px; border-radius:5px; background:#f4efe3; color:#5f697a; font-size:8.5px; font-weight:700; line-height:1.25; }
body.v2Design #groupDetailOverlay #groupCalendarDayGrid .groupCalendarDayCell.selected .groupCalendarDayCellChip { background:rgba(255,255,255,.12); color:#fff; }
.groupCalendarSelectedHeading { display:flex; align-items:center; gap:8px; margin:18px 0 10px; padding-top:16px; border-top:1px solid var(--calendar-line); color:var(--calendar-navy); }
.groupCalendarSelectedHeading i { color:#a77719; font-size:20px; }
.groupCalendarSelectedHeading strong { font-family:Georgia,"Times New Roman",serif; font-size:18px; font-weight:600; }
.groupCalendarSelectedList { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; margin:0 !important; }
.groupCalendarSelectedList > .notesEmpty { grid-column:1 / -1; min-height:96px; display:grid; place-items:center; margin:0; border:1px dashed rgba(19,40,70,.14); border-radius:14px; background:#fff; }

body.v2Design #groupEventDetailOverlay { z-index:10040; padding:18px; background:rgba(9,20,35,.64); backdrop-filter:blur(5px); }
body.v2Design #groupEventDetailOverlay .groupEventDetailCard { width:min(850px,calc(100vw - 36px)); max-width:850px; max-height:min(88vh,900px); overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:24px; background:#fbfaf6; box-shadow:0 28px 80px rgba(8,21,38,.34); }
.groupEventDetailScroll { padding:0 22px 22px; }
body.v2Design #groupEventDetailOverlay .sheetModalCloseX { top:14px; right:14px; z-index:3; width:42px; height:42px; border:1px solid rgba(255,255,255,.2); background:#173354; color:#fff; box-shadow:0 6px 18px rgba(19,40,70,.2); }
.groupEventDetailCard > .modalActions { margin:0; padding:11px 18px 16px; border-top:1px solid rgba(19,40,70,.08); background:#fff; }
.groupEventDetailCard > .modalActions .btn { min-height:44px; border-radius:13px; }
.groupEventDetailScroll > .liveEventBanner { height:230px; margin:0 -22px 0; width:calc(100% + 44px); object-fit:cover; border-radius:0; background:#e9e5db; }
.groupEventDetailHero { margin:0 -22px 17px; padding:26px 25px 23px; border-bottom:1px solid rgba(19,40,70,.09); background:radial-gradient(circle at 94% 4%,rgba(198,149,49,.18),transparent 34%),linear-gradient(135deg,#fffdf8,#f4eddf); }
.groupEventDetailCategory { display:inline-flex; align-items:center; min-height:25px; margin-bottom:9px; padding:4px 9px; border-radius:999px; background:#efe4ca; color:#815b11; font-size:9px; font-weight:850; letter-spacing:.11em; }
body.v2Design #groupEventDetailOverlay #groupEventDetailTitle { margin:0; padding-right:48px; color:#132846; font-family:Georgia,"Times New Roman",serif; font-size:clamp(28px,4vw,39px); font-weight:600; line-height:1.06; }
.groupEventDetailMetaGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:19px; }
.groupEventDetailMetaCard { min-width:0; display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:11px; padding:13px; border:1px solid rgba(19,40,70,.1); border-radius:15px; background:rgba(255,255,255,.82); }
.groupEventDetailMetaCard > i { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#173354; color:#efc661; font-size:21px; }
.groupEventDetailMetaCard span,.groupEventDetailMetaCard small,.groupEventDetailMetaCard strong,.groupEventDetailMetaCard em { display:block; min-width:0; }
.groupEventDetailMetaCard small { margin-bottom:4px; color:#9b6d15; font-size:8.5px; font-style:normal; font-weight:850; letter-spacing:.1em; }
.groupEventDetailMetaCard strong { color:#132846; font-size:13px; font-weight:750; line-height:1.35; }
.groupEventDetailMetaCard em { margin-top:3px; color:#727b8a; font-size:10.5px; font-style:normal; line-height:1.35; }
.groupEventDetailMetaCard.is-tbd { opacity:.72; }
.groupEventDetailDescriptionCard { margin:15px 0; padding:17px 18px; border:1px solid rgba(19,40,70,.09); border-left:4px solid #bd8b24; border-radius:15px; background:#fff; }
.groupEventDetailDescriptionCard > span { display:flex; align-items:center; gap:6px; margin-bottom:8px; color:#8b6111; font-size:9.5px; font-weight:850; letter-spacing:.1em; }
.groupEventDetailDescriptionCard > span i { font-size:17px; }
.groupEventDetailDescriptionCard #groupEventDetailDescription { color:#4e596b; font-size:13.5px; line-height:1.65; }
.groupEventDetailCalendarActions { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:14px 0 !important; }
.groupEventDetailCalendarActions .btn { min-height:46px; display:flex; align-items:center; justify-content:center; gap:7px; margin:0 !important; border-radius:13px !important; }
.groupEventDetailCalendarActions .btn i { color:#9b6d15; font-size:18px; }
.groupEventDetailSectionTitle { display:flex; align-items:center; gap:8px; margin:20px 0 9px; color:#132846; font-family:Georgia,"Times New Roman",serif; font-size:20px; font-weight:600; }
.groupEventDetailSectionTitle i { color:#a77719; font-size:20px; }

body.darkMode .groupCalendarHero,
body.darkMode .groupCalendarToolbar,
body.darkMode .groupCalendarViewSurface { border-color:var(--dm-line); background:linear-gradient(135deg,var(--dm-panel),var(--dm-panel-2)); box-shadow:none; }
body.darkMode .groupCalendarHero h2,
body.darkMode .groupCalendarHeroStats strong,
body.darkMode .groupCalendarGridToolbar h3,
body.darkMode .groupCalendarSelectedHeading,
body.darkMode .groupEventDetailSectionTitle { color:var(--dm-ink); }
body.darkMode .groupCalendarHero p,
body.darkMode .groupCalendarHeroStats small,
body.darkMode .groupCalendarSectionHeading > small,
body.darkMode .groupCalendarEmptyState > span { color:var(--dm-ink-muted); }
body.darkMode .groupCalendarEmptyState > strong { color:var(--dm-ink); }
body.darkMode .groupCalendarHeroStats > div,
body.darkMode .groupCalendarToolbar,
body.darkMode #groupDetailOverlay .groupCalendarAgendaGrid > .groupCalendarEventCard,
body.darkMode #groupDetailOverlay .groupCalendarSelectedList > .groupCalendarEventCard,
body.darkMode #groupDetailOverlay #groupCalendarDayGrid .groupCalendarDayCell,
body.darkMode .groupCalendarSelectedList > .notesEmpty { border-color:var(--dm-line) !important; background:var(--dm-panel) !important; color:var(--dm-ink) !important; box-shadow:none !important; }
body.darkMode #groupEventDetailOverlay .groupEventDetailCard,
body.darkMode #groupEventDetailOverlay .groupEventDetailDescriptionCard { border-color:var(--dm-line); background:var(--dm-panel); }
body.darkMode #groupEventDetailOverlay .groupEventDetailHero { border-color:var(--dm-line); background:linear-gradient(135deg,var(--dm-panel),var(--dm-panel-2)); }
body.darkMode #groupEventDetailOverlay #groupEventDetailTitle,
body.darkMode #groupEventDetailOverlay .groupEventDetailMetaCard strong { color:var(--dm-ink); }
body.darkMode #groupEventDetailOverlay .groupEventDetailMetaCard { border-color:var(--dm-line); background:var(--dm-panel); }
body.darkMode #groupEventDetailOverlay .groupEventDetailDescriptionCard #groupEventDetailDescription { color:var(--dm-ink-muted); }

@media (min-width:1200px) {
  #groupDetailTabCalendar { width:100%; max-width:1480px; margin:0 auto; padding:4px 2px 34px; }
  .groupCalendarHero { padding:29px 31px; }
  body.v2Design #groupEventDetailOverlay .groupEventDetailCard { width:min(850px,calc(100vw - 72px)); }
}
@media (max-width:900px) {
  .groupCalendarHero { grid-template-columns:1fr; }
  .groupCalendarSearchRow { grid-template-columns:1fr; }
  .groupCalendarViewSegment { min-width:0; width:100%; }
  .groupCalendarAgendaGrid,.groupCalendarSelectedList { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .groupCalendarHero { gap:16px; margin-bottom:11px; padding:18px 16px; border-radius:18px; }
  .groupCalendarHero h2 { font-size:31px; }
  .groupCalendarHero p { font-size:12.5px; }
  .groupCalendarHeroStats { gap:6px; }
  .groupCalendarHeroStats > div { min-height:61px; display:block; padding:8px 6px; text-align:center; }
  .groupCalendarHeroStats > div > i { width:29px; height:29px; margin:0 auto 5px; font-size:16px; }
  .groupCalendarHeroStats strong { font-size:16px; }
  .groupCalendarHeroStats small { font-size:8px; }
  .groupCalendarToolbar { padding:11px; border-radius:16px; }
  .groupCalendarPrimaryActions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .groupCalendarPrimaryActions > div { min-width:0; }
  .groupCalendarAction { min-height:50px; grid-template-columns:32px minmax(0,1fr); gap:8px; padding:7px 8px; }
  .groupCalendarAction > i { width:32px; height:32px; font-size:18px; }
  .groupCalendarAction strong { font-size:10.5px; }
  .groupCalendarAction small { display:none; }
  body.v2Design #groupDetailOverlay .groupCalendarSearch input { min-height:44px; font-size:12px; }
  body.v2Design #groupDetailOverlay .groupCalendarViewSegment button { min-height:42px; padding:7px 4px; font-size:10.5px; }
  .groupCalendarViewSurface { min-height:280px; padding:13px; border-radius:17px; }
  .groupCalendarSectionHeading { align-items:flex-start; flex-direction:column; gap:3px; }
  body.v2Design #groupDetailOverlay .groupCalendarAgendaGrid > .groupCalendarEventCard,
  body.v2Design #groupDetailOverlay .groupCalendarSelectedList > .groupCalendarEventCard { min-height:0; padding:12px; }
  .groupCalendarEventCard .liveEventDateBadge { flex-basis:47px; width:47px; }
  .groupCalendarEventCard .liveEventTitle { font-size:16px; }
  .groupCalendarEventDescription { -webkit-line-clamp:2; }
  .groupCalendarGridToolbar { grid-template-columns:40px minmax(0,1fr) auto 40px; gap:5px; }
  .groupCalendarGridToolbar h3 { font-size:17px; }
  .groupCalendarGridToolbar button { min-width:40px; height:40px; padding:0 9px; }
  .groupCalendarGridToolbar .groupCalendarTodayBtn { min-width:58px; font-size:10px; }
  .groupCalendarWeekdayHeader { gap:3px; }
  body.v2Design #groupDetailOverlay #groupCalendarDayGrid { gap:3px; }
  body.v2Design #groupDetailOverlay #groupCalendarDayGrid .groupCalendarDayCell,
  body.v2Design #groupDetailOverlay #groupCalendarDayGrid.groupCalendarDayGrid--month .groupCalendarDayCell { min-height:64px; padding:5px 3px; border-radius:8px; }
  body.v2Design #groupDetailOverlay #groupCalendarDayGrid .groupCalendarDayCellNum { margin-bottom:3px; font-size:12px; }
  body.v2Design #groupDetailOverlay #groupCalendarDayGrid .groupCalendarDayCellChip { padding:2px 3px; font-size:7px; }
  .groupCalendarSelectedHeading { margin-top:14px; padding-top:13px; }
  body.v2Design #groupEventDetailOverlay { align-items:flex-end; padding:0; }
  body.v2Design #groupEventDetailOverlay .groupEventDetailCard { width:100%; max-width:none; max-height:calc(100dvh - 18px); border-radius:22px 22px 0 0; }
  .groupEventDetailScroll { padding:0 15px 18px; }
  .groupEventDetailScroll > .liveEventBanner { width:calc(100% + 30px); height:185px; margin:0 -15px; }
  .groupEventDetailHero { margin:0 -15px 14px; padding:22px 16px 17px; }
  body.v2Design #groupEventDetailOverlay #groupEventDetailTitle { font-size:29px; }
  .groupEventDetailMetaGrid { grid-template-columns:1fr; gap:7px; margin-top:15px; }
  .groupEventDetailMetaCard { min-height:62px; padding:10px; }
  .groupEventDetailDescriptionCard { padding:15px; }
  .groupEventDetailCalendarActions { grid-template-columns:1fr; }
}

/* ============================================================================
   Group Media library — videos, Bible Plans, and Live Plans share one calm,
   searchable surface. These styles intentionally live in the Group stylesheet
   even though the responsive portion also serves mobile: every selector is
   scoped to the Group Media tab and cannot affect the app's other libraries.
   ============================================================================ */
#groupDetailTabVideos { width:100%; max-width:1480px; margin:0 auto; padding:4px 2px 34px; }
.groupMediaHero {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px;
  margin-bottom:14px; padding:25px 27px; border:1px solid rgba(19,40,70,.1);
  border-radius:20px; background:linear-gradient(135deg,#fffdf8 0%,#f7ecd5 100%);
  box-shadow:0 10px 28px rgba(24,39,66,.08);
}
.groupMediaEyebrow { display:flex; align-items:center; gap:7px; margin-bottom:5px; color:#9b6d15; font-size:10px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.groupMediaEyebrow i { font-size:18px; }
.groupMediaHero h2 { margin:0; color:#132846; font-family:Georgia,"Times New Roman",serif; font-size:34px; font-weight:600; line-height:1.05; }
.groupMediaHero p { max-width:650px; margin:8px 0 0; color:#606a79; font-size:13px; line-height:1.55; }
.groupMediaStats { display:grid; grid-template-columns:repeat(3,minmax(78px,1fr)); gap:8px; }
.groupMediaStats > div { min-width:78px; padding:11px 12px; border:1px solid rgba(19,40,70,.09); border-radius:14px; background:rgba(255,255,255,.78); text-align:center; }
.groupMediaStats strong,.groupMediaStats small { display:block; }
.groupMediaStats strong { color:#132846; font-family:Georgia,"Times New Roman",serif; font-size:24px; line-height:1; }
.groupMediaStats small { margin-top:4px; color:#8b6111; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }

.groupMediaLeaderActions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:13px; }
.groupMediaLeaderActions > button { min-width:0; min-height:64px; display:grid; grid-template-columns:39px minmax(0,1fr); align-items:center; gap:10px; padding:10px 12px; border:1px solid rgba(19,40,70,.11); border-radius:15px; background:#fff; color:#132846; text-align:left; cursor:pointer; box-shadow:0 5px 14px rgba(24,39,66,.05); transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; }
.groupMediaLeaderActions > button:hover { transform:translateY(-1px); border-color:rgba(189,139,40,.5); box-shadow:0 8px 18px rgba(24,39,66,.09); }
.groupMediaLeaderActions > button > i { width:39px; height:39px; display:grid; place-items:center; border-radius:12px; background:#fff4d9; color:#a77719; font-size:21px; }
.groupMediaLeaderActions span,.groupMediaLeaderActions strong,.groupMediaLeaderActions small { display:block; min-width:0; }
.groupMediaLeaderActions strong { overflow:hidden; font-size:12px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.groupMediaLeaderActions small { margin-top:2px; overflow:hidden; color:#747d8b; font-size:9.5px; text-overflow:ellipsis; white-space:nowrap; }

.groupMediaAddPanel { margin:0 0 13px; padding:18px; border:1px solid rgba(189,139,40,.28); border-radius:17px; background:#fffdf8; box-shadow:0 9px 25px rgba(24,39,66,.08); }
.groupMediaAddPanelHead { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:13px; }
.groupMediaAddPanelHead span,.groupMediaAddPanelHead strong { display:block; }
.groupMediaAddPanelHead span { margin-bottom:2px; color:#9b6d15; font-size:9px; font-weight:850; letter-spacing:.12em; }
.groupMediaAddPanelHead strong { color:#132846; font-family:Georgia,"Times New Roman",serif; font-size:21px; font-weight:600; }
.groupMediaPanelClose { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(19,40,70,.12); border-radius:50%; background:#fff; color:#132846; font-size:24px; line-height:1; cursor:pointer; }
.groupMediaFormGrid { display:grid; grid-template-columns:1fr 1.35fr; gap:10px; }
.groupMediaPanelHelp { margin:-5px 0 13px; color:#687282; font-size:12px; line-height:1.45; }
.groupMediaAttachRow { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
.groupMediaAttachRow select { width:100%; min-height:46px; padding:0 13px; border:1px solid rgba(19,40,70,.16); border-radius:12px; background:#fff; color:#132846; font:inherit; }
.groupMediaAttachRow .btn { min-width:140px; margin:0; }
.groupMediaPanelDivider { display:flex; align-items:center; gap:10px; margin:13px 0; color:#89909a; font-size:10px; font-weight:800; text-transform:uppercase; }
.groupMediaPanelDivider::before,.groupMediaPanelDivider::after { height:1px; flex:1; background:rgba(19,40,70,.1); content:""; }
.groupMediaCreateNewBtn,.groupMediaSubmitBtn { width:100%; display:flex !important; align-items:center; justify-content:center; gap:7px; margin:0 !important; }

.groupMediaBrowseBar { display:grid; grid-template-columns:minmax(240px,1fr) auto; gap:11px; align-items:center; margin-bottom:15px; padding:11px; border:1px solid rgba(19,40,70,.09); border-radius:17px; background:#fff; box-shadow:0 6px 18px rgba(24,39,66,.06); }
.groupMediaSearch { min-width:0; display:flex; align-items:center; gap:8px; padding:0 13px; border:1px solid rgba(19,40,70,.13); border-radius:12px; background:#faf9f5; }
.groupMediaSearch i { flex:0 0 auto; color:#9b6d15; font-size:20px; }
body.v2Design #groupDetailOverlay .groupMediaSearch input { width:100%; min-width:0; height:44px; padding:0; border:0; outline:0; background:transparent; color:#132846; box-shadow:none; font-size:12.5px; }
.groupMediaFilterSegment { display:grid; grid-template-columns:repeat(4,auto); gap:3px; padding:3px; border:1px solid rgba(19,40,70,.1); border-radius:12px; background:#f4f3ef; }
.groupMediaFilterSegment button { min-height:38px; padding:0 13px; border:0; border-radius:9px; background:transparent; color:#626c7a; font-size:10.5px; font-weight:800; cursor:pointer; white-space:nowrap; }
.groupMediaFilterSegment button.active { background:#132846; color:#fff; box-shadow:0 4px 10px rgba(19,40,70,.2); }

.groupMediaGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:13px; }
.groupMediaCard { min-width:0; overflow:hidden; display:flex; flex-direction:column; border:1px solid rgba(19,40,70,.1); border-radius:17px; background:#fff; box-shadow:0 7px 20px rgba(24,39,66,.07); cursor:pointer; transition:transform .16s ease,box-shadow .16s ease; }
.groupMediaCard:hover { transform:translateY(-2px); box-shadow:0 11px 26px rgba(24,39,66,.11); }
.groupMediaCardVisual { position:relative; height:135px; overflow:hidden; background:linear-gradient(135deg,#172d4b,#294a6e); }
.groupMediaCardVisual img { width:100%; height:100%; display:block; object-fit:cover; }
.groupMediaCardFallback { width:100%; height:100%; display:grid; place-items:center; background:radial-gradient(circle at 75% 15%,rgba(209,166,70,.35),transparent 34%),linear-gradient(135deg,#152b48,#274869); color:#f4cf76; font-size:47px; }
.groupMediaCardType { position:absolute; top:9px; left:9px; display:flex; align-items:center; gap:5px; padding:5px 8px; border-radius:999px; background:rgba(255,253,248,.94); color:#8b6111; box-shadow:0 3px 10px rgba(0,0,0,.12); font-size:8px; font-weight:850; letter-spacing:.07em; text-transform:uppercase; }
.groupMediaPlay { position:absolute; inset:0; display:grid; place-items:center; }
.groupMediaPlay i { width:45px; height:45px; display:grid; place-items:center; border:2px solid rgba(255,255,255,.9); border-radius:50%; background:rgba(19,40,70,.72); color:#fff; font-size:24px; backdrop-filter:blur(5px); }
.groupMediaCardBody { min-width:0; flex:1; display:flex; flex-direction:column; padding:14px; }
.groupMediaCardBody h3 { margin:0; color:#132846; font-family:Georgia,"Times New Roman",serif; font-size:18px; font-weight:600; line-height:1.22; }
.groupMediaCardBody p { display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; margin:7px 0 0; color:#687282; font-size:11px; line-height:1.48; }
.groupMediaCardMeta { display:flex; align-items:center; gap:6px; margin-top:auto; padding-top:12px; color:#8b6111; font-size:9px; font-weight:750; }
.groupMediaCardFooter { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:11px; padding-top:10px; border-top:1px solid rgba(19,40,70,.08); }
.groupMediaCardOpen { display:flex; align-items:center; gap:5px; color:#132846; font-size:10px; font-weight:850; }
.groupMediaCardRemove { width:34px; height:34px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(177,59,59,.14); border-radius:10px; background:#fff7f5; color:#b13b3b; cursor:pointer; }
.groupMediaEmpty { grid-column:1/-1; min-height:245px; display:grid; place-items:center; padding:30px; border:1px dashed rgba(19,40,70,.18); border-radius:18px; background:#fff; text-align:center; }
.groupMediaEmpty i { width:54px; height:54px; display:grid; place-items:center; margin:0 auto 10px; border-radius:17px; background:#fff4d9; color:#a77719; font-size:29px; }
.groupMediaEmpty strong { display:block; color:#132846; font-family:Georgia,"Times New Roman",serif; font-size:21px; font-weight:600; }
.groupMediaEmpty span { display:block; max-width:360px; margin:6px auto 0; color:#747d8b; font-size:11.5px; line-height:1.5; }

body.darkMode .groupMediaHero,body.darkMode .groupMediaAddPanel,body.darkMode .groupMediaBrowseBar,body.darkMode .groupMediaLeaderActions > button,body.darkMode .groupMediaCard,body.darkMode .groupMediaEmpty { border-color:var(--dm-line); background:linear-gradient(135deg,var(--dm-panel),var(--dm-panel-2)); box-shadow:none; }
body.darkMode .groupMediaHero h2,body.darkMode .groupMediaStats strong,body.darkMode .groupMediaAddPanelHead strong,body.darkMode .groupMediaLeaderActions strong,body.darkMode .groupMediaCardBody h3,body.darkMode .groupMediaCardOpen,body.darkMode .groupMediaEmpty strong { color:var(--dm-ink); }
body.darkMode .groupMediaHero p,body.darkMode .groupMediaPanelHelp,body.darkMode .groupMediaLeaderActions small,body.darkMode .groupMediaCardBody p,body.darkMode .groupMediaEmpty span { color:var(--dm-ink-muted); }
body.darkMode .groupMediaSearch,body.darkMode .groupMediaAttachRow select { border-color:var(--dm-line); background:var(--dm-bg); color:var(--dm-ink); }
body.darkMode.v2Design #groupDetailOverlay .groupMediaSearch input { color:var(--dm-ink); }

/* Fourteen destinations were wider than the desktop content column. A stable
   7 x 2 grid at laptop widths keeps every destination visible; truly wide
   screens promote it to one row. Mobile continues to use the existing swipe rail. */
@media (min-width:1200px) {
  body.v2Design #groupDetailOverlay #groupDetailTabs { display:grid !important; grid-template-columns:repeat(7,minmax(0,1fr)) !important; gap:4px; padding:5px; border:1px solid rgba(24,39,66,.1); border-radius:14px; background:rgba(250,248,242,.97); box-shadow:0 5px 18px rgba(24,39,66,.06); }
  body.v2Design #groupDetailOverlay #groupDetailTabs button { min-width:0; min-height:42px; display:flex; justify-content:center; gap:6px; padding:8px 7px; border:0; border-radius:9px; font-size:11px; }
  body.v2Design #groupDetailOverlay #groupDetailTabs button svg { width:16px; height:16px; }
  body.v2Design #groupDetailOverlay #groupDetailTabs button.active { background:#132846; color:#fff; box-shadow:0 4px 10px rgba(19,40,70,.18); }
  body.v2Design #groupDetailOverlay.gdCanEditInfo #groupDetailTabs .gdDesktopOnlyTab { margin-left:0; }
  body.v2Design #groupDetailOverlay.gdCanUseAssistant #groupDetailTabs .gdDesktopAssistantTab { border-bottom:0; }
}
@media (min-width:1500px) {
  body.v2Design #groupDetailOverlay #groupDetailTabs { grid-template-columns:repeat(14,minmax(0,1fr)) !important; }
  body.v2Design #groupDetailOverlay #groupDetailTabs button { flex-direction:column; min-height:55px; gap:3px; padding:6px 3px; font-size:9.5px; }
}
@media (max-width:760px) {
  #groupDetailTabVideos { padding-top:0; }
  .groupMediaHero { grid-template-columns:1fr; gap:15px; padding:19px 16px; border-radius:18px; }
  .groupMediaHero h2 { font-size:29px; }
  .groupMediaStats { width:100%; }
  .groupMediaStats > div { min-width:0; padding:9px 5px; }
  .groupMediaStats strong { font-size:20px; }
  .groupMediaLeaderActions { grid-template-columns:1fr; gap:7px; }
  .groupMediaLeaderActions > button { min-height:58px; }
  .groupMediaAddPanel { padding:15px; }
  .groupMediaFormGrid,.groupMediaAttachRow,.groupMediaBrowseBar { grid-template-columns:1fr; }
  .groupMediaAttachRow .btn { width:100%; }
  .groupMediaFilterSegment { grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; }
  .groupMediaFilterSegment button { min-width:0; padding:0 4px; font-size:9px; }
  .groupMediaGrid { grid-template-columns:1fr; gap:10px; }
  .groupMediaCard { display:grid; grid-template-columns:118px minmax(0,1fr); min-height:132px; }
  .groupMediaCardVisual { width:118px; height:100%; min-height:132px; }
  .groupMediaCardBody { padding:12px; }
  .groupMediaCardBody h3 { font-size:16px; }
}
@media (max-width:420px) {
  .groupMediaCard { grid-template-columns:102px minmax(0,1fr); }
  .groupMediaCardVisual { width:102px; }
  .groupMediaCardMeta { display:none; }
}

/* ============================================================================
   Group Prayer Wall — shared care without the visual weight of an admin form.
   The cards also appear in My Prayer List, so their structure remains portable;
   the page shell, summary, composer, filters, and responsive grid stay scoped here.
   ============================================================================ */
#groupDetailTabPrayer {
  --prayer-navy:#132846;
  --prayer-gold:#bd8b24;
  --prayer-ivory:#fbf7ed;
  --prayer-sage:#315d4d;
  width:100%; max-width:1480px; margin:0 auto; padding:4px 2px 34px;
  color:var(--prayer-navy);
}
.groupPrayerHero {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(390px,.85fr); align-items:end; gap:25px;
  margin-bottom:13px; padding:26px 28px; overflow:hidden;
  border:1px solid rgba(19,40,70,.1); border-radius:22px;
  background:
    radial-gradient(circle at 92% 8%,rgba(196,148,52,.17),transparent 33%),
    linear-gradient(135deg,#fffdf8 0%,#f6efe1 100%);
  box-shadow:0 11px 30px rgba(24,39,66,.075);
}
.groupPrayerHeroCopy { min-width:0; }
.groupPrayerEyebrow { display:flex; align-items:center; gap:7px; margin-bottom:6px; color:#9b6d15; font-size:10px; font-weight:850; letter-spacing:.14em; }
.groupPrayerEyebrow i { font-size:19px; }
.groupPrayerHero h2 { margin:0; color:var(--prayer-navy); font-family:Georgia,"Times New Roman",serif; font-size:clamp(31px,3.2vw,43px); font-weight:600; line-height:1; }
.groupPrayerHero p { max-width:620px; margin:9px 0 0; color:#667185; font-size:13.5px; line-height:1.55; }
.groupPrayerStats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.groupPrayerStats > div { min-width:0; min-height:72px; display:flex; align-items:center; gap:9px; padding:11px; border:1px solid rgba(19,40,70,.08); border-radius:15px; background:rgba(255,255,255,.8); }
.groupPrayerStats > div > i { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:#f6ecd5; color:#9b6d15; font-size:18px; }
.groupPrayerStats span,.groupPrayerStats strong,.groupPrayerStats small { display:block; min-width:0; }
.groupPrayerStats strong { color:var(--prayer-navy); font-family:Georgia,"Times New Roman",serif; font-size:21px; line-height:1; }
.groupPrayerStats small { margin-top:4px; overflow:hidden; color:#7b8190; font-size:9px; font-weight:750; line-height:1.1; text-overflow:ellipsis; white-space:nowrap; }

.groupPrayerAddRow { margin-bottom:11px; }
.groupPrayerShareBtn { width:100%; min-height:66px; display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:12px; padding:11px 15px; border:1px solid rgba(19,40,70,.1); border-radius:17px; background:linear-gradient(135deg,#132846,#1d4168); color:#fff; text-align:left; cursor:pointer; box-shadow:0 8px 20px rgba(19,40,70,.15); transition:transform .16s ease,box-shadow .16s ease; }
.groupPrayerShareBtn:hover { transform:translateY(-1px); box-shadow:0 11px 25px rgba(19,40,70,.2); }
.groupPrayerShareBtn > i:first-child { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:#d5a32f; color:#132846; font-size:23px; }
.groupPrayerShareBtn > i:last-child { color:#e9c76f; font-size:22px; }
.groupPrayerShareBtn span,.groupPrayerShareBtn strong,.groupPrayerShareBtn small { display:block; min-width:0; }
.groupPrayerShareBtn strong { font-family:Georgia,"Times New Roman",serif; font-size:17px; font-weight:600; }
.groupPrayerShareBtn small { margin-top:3px; color:rgba(255,255,255,.7); font-size:10.5px; }

.groupPrayerAddForm { margin:0 0 12px; padding:19px; border:1px solid rgba(189,139,36,.28); border-radius:18px; background:#fffdf8; box-shadow:0 10px 27px rgba(24,39,66,.08); }
.groupPrayerFormHead { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px; }
.groupPrayerFormHead span,.groupPrayerFormHead strong { display:block; }
.groupPrayerFormHead span { color:#9b6d15; font-size:9px; font-weight:850; letter-spacing:.13em; }
.groupPrayerFormHead strong { margin-top:3px; color:var(--prayer-navy); font-family:Georgia,"Times New Roman",serif; font-size:22px; font-weight:600; }
.groupPrayerFormHead button { width:38px; height:38px; display:grid; place-items:center; flex:0 0 auto; border:1px solid rgba(19,40,70,.12); border-radius:50%; background:#fff; color:var(--prayer-navy); font-size:22px; cursor:pointer; }
.groupPrayerFormGrid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(270px,.6fr); gap:13px; }
.groupPrayerAddForm .field { margin:0; }
.groupPrayerAddForm .field > label { display:block; margin-bottom:6px; color:#516076; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
body.v2Design #groupDetailOverlay .groupPrayerAddForm textarea { width:100%; min-height:108px; padding:13px 14px; box-sizing:border-box; border:1px solid rgba(19,40,70,.14); border-radius:13px; background:#fff; color:var(--prayer-navy); font:inherit; font-size:13px; line-height:1.5; resize:vertical; }
.groupPrayerRequestField > small { display:block; margin-top:6px; color:#7e8490; font-size:9.5px; line-height:1.4; }
.groupPrayerSelectWrap { position:relative; }
.groupPrayerSelectWrap > i { position:absolute; left:13px; top:50%; z-index:1; transform:translateY(-50%); color:#9b6d15; font-size:19px; pointer-events:none; }
.groupPrayerSelectWrap select { width:100%; min-height:47px; padding:8px 34px 8px 41px; border:1px solid rgba(19,40,70,.14); border-radius:13px; background:#fff; color:var(--prayer-navy); font:inherit; font-size:11.5px; font-weight:700; cursor:pointer; }
.groupPrayerPrivacyNote { display:flex; align-items:flex-start; gap:7px; margin-top:9px; padding:10px; border-radius:11px; background:#f5efe1; color:#6d6045; font-size:9.5px; line-height:1.4; }
.groupPrayerPrivacyNote i { flex:0 0 auto; color:#9b6d15; font-size:16px; }
.groupPrayerFormActions { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.groupPrayerFormActions .btn { min-width:135px; min-height:43px; display:inline-flex; align-items:center; justify-content:center; gap:6px; margin:0; border-radius:11px; }

.groupPrayerBrowseBar { display:grid; grid-template-columns:minmax(230px,1fr) auto; align-items:center; gap:11px; margin-bottom:14px; padding:10px; border:1px solid rgba(19,40,70,.09); border-radius:17px; background:#fff; box-shadow:0 6px 18px rgba(24,39,66,.055); }
.groupPrayerSearch { min-width:0; display:flex; align-items:center; gap:8px; padding:0 13px; border:1px solid rgba(19,40,70,.13); border-radius:12px; background:#faf9f5; }
.groupPrayerSearch i { flex:0 0 auto; color:#9b6d15; font-size:20px; }
body.v2Design #groupDetailOverlay .groupPrayerSearch input { width:100%; min-width:0; height:44px; padding:0; border:0; outline:0; background:transparent; color:var(--prayer-navy); box-shadow:none; font-size:12.5px; }
.groupPrayerFilterSegment { display:grid; grid-template-columns:repeat(2,minmax(132px,1fr)); gap:3px; padding:3px; border:1px solid rgba(19,40,70,.1); border-radius:12px; background:#f4f3ef; }
.groupPrayerFilterSegment button { min-height:38px; display:flex; align-items:center; justify-content:center; gap:6px; padding:0 11px; border:0; border-radius:9px; background:transparent; color:#626c7a; font-size:10.5px; font-weight:800; cursor:pointer; }
.groupPrayerFilterSegment button i { font-size:16px; }
.groupPrayerFilterSegment button b { min-width:21px; padding:3px 6px; border-radius:999px; background:rgba(19,40,70,.08); font-size:8.5px; line-height:1; }
.groupPrayerFilterSegment button.active { background:var(--prayer-navy); color:#fff; box-shadow:0 4px 10px rgba(19,40,70,.2); }
.groupPrayerFilterSegment button.active b { background:rgba(255,255,255,.15); color:#f0cb73; }

.groupPrayerGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:13px; }
body.v2Design #groupDetailOverlay .groupPrayerCard,
.groupPrayerCard { min-width:0; margin:0; padding:0; overflow:hidden; border:1px solid rgba(19,40,70,.1); border-radius:18px; background:#fff; box-shadow:0 8px 23px rgba(24,39,66,.07); }
.groupPrayerCard.is-answered { border-color:rgba(49,93,77,.25); }
.groupPrayerCardTop { display:grid; grid-template-columns:43px minmax(0,1fr) auto; align-items:center; gap:10px; padding:14px 15px 10px; }
.groupPrayerAuthorAvatar { width:43px; height:43px; display:grid; place-items:center; overflow:hidden; border-radius:14px; background:linear-gradient(145deg,#f2e5ca,#fff9ec); color:#8b6111; font-family:Georgia,"Times New Roman",serif; font-size:15px; font-weight:700; }
.groupPrayerAuthorAvatar img { width:100%; height:100%; display:block; object-fit:cover; }
.groupPrayerAuthor { min-width:0; }
.groupPrayerAuthor strong,.groupPrayerAuthor span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.groupPrayerAuthor strong { color:var(--prayer-navy); font-size:12.5px; }
.groupPrayerAuthor span { margin-top:3px; color:#858b95; font-size:9.5px; }
.groupPrayerBadges { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:5px; }
.groupPrayerBadge { min-height:24px; display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:999px; font-size:8.5px; font-weight:800; white-space:nowrap; }
.groupPrayerBadge.is-private { background:#eef1f5; color:#4c5b70; }
.groupPrayerBadge.is-answered { background:#e8f2ed; color:#315d4d; }
.groupPrayerBadge i { font-size:13px; }
.groupPrayerCardBody { position:relative; min-height:90px; padding:15px 18px 14px 43px; border-top:1px solid rgba(19,40,70,.065); }
.groupPrayerCardBody > i { position:absolute; top:14px; left:16px; color:#d5a32f; font-size:20px; opacity:.75; }
.groupPrayerCardBody p { margin:0; color:#29384e; font-family:Georgia,"Times New Roman",serif; font-size:16px; line-height:1.55; white-space:pre-wrap; }
.groupPrayerSupport { display:flex; align-items:center; gap:6px; margin:0 15px; padding:10px 0; border-top:1px solid rgba(19,40,70,.065); color:#7e6b43; font-size:9.5px; font-weight:700; }
.groupPrayerSupport i { color:#b17e19; font-size:16px; }
.groupPrayerCardActions { display:grid; grid-template-columns:minmax(112px,auto) minmax(86px,auto) 1fr; align-items:center; gap:7px; padding:10px 12px 12px; background:#fbfaf7; }
.groupPrayerPrayBtn,.groupPrayerSaveBtn,.groupPrayerManageBtn { min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 11px; border:1px solid rgba(19,40,70,.11); border-radius:10px; background:#fff; color:var(--prayer-navy); font-size:10px; font-weight:800; cursor:pointer; white-space:nowrap; }
.groupPrayerPrayBtn i,.groupPrayerSaveBtn i,.groupPrayerManageBtn i { font-size:16px; }
.groupPrayerPrayBtn.active { border-color:var(--prayer-navy); background:var(--prayer-navy); color:#fff; }
.groupPrayerPrayBtn.active i { color:#e4b84e; }
.groupPrayerSaveBtn.active { border-color:rgba(189,139,36,.38); background:#fff6df; color:#805811; }
.groupPrayerManageActions { min-width:0; display:flex; justify-content:flex-end; gap:6px; }
.groupPrayerManageBtn { min-width:38px; color:#596477; }
.groupPrayerManageBtn.is-danger { border-color:rgba(177,59,59,.14); background:#fff7f5; color:#ad3a3a; }
.groupPrayerEmpty { grid-column:1/-1; min-height:240px; display:grid; place-items:center; align-content:center; padding:30px; border:1px dashed rgba(19,40,70,.18); border-radius:18px; background:#fff; text-align:center; }
.groupPrayerEmpty > i { width:54px; height:54px; display:grid; place-items:center; margin-bottom:10px; border-radius:17px; background:#f6ecd5; color:#a77719; font-size:28px; }
.groupPrayerEmpty > strong { color:var(--prayer-navy); font-family:Georgia,"Times New Roman",serif; font-size:21px; font-weight:600; }
.groupPrayerEmpty > span { max-width:370px; margin-top:6px; color:#747d8b; font-size:11.5px; line-height:1.5; }
.groupPrayerEmpty.is-loading { min-height:150px; }

body.darkMode .groupPrayerHero,body.darkMode .groupPrayerAddForm,body.darkMode .groupPrayerBrowseBar,body.darkMode .groupPrayerCard,body.darkMode .groupPrayerEmpty { border-color:var(--dm-line); background:linear-gradient(135deg,var(--dm-panel),var(--dm-panel-2)); box-shadow:none; }
body.darkMode .groupPrayerHero h2,body.darkMode .groupPrayerStats strong,body.darkMode .groupPrayerFormHead strong,body.darkMode .groupPrayerAuthor strong,body.darkMode .groupPrayerCardBody p,body.darkMode .groupPrayerEmpty > strong { color:var(--dm-ink); }
body.darkMode .groupPrayerHero p,body.darkMode .groupPrayerStats small,body.darkMode .groupPrayerAuthor span,body.darkMode .groupPrayerEmpty > span { color:var(--dm-ink-muted); }
body.darkMode .groupPrayerStats > div,body.darkMode .groupPrayerFormHead button,body.darkMode .groupPrayerAddForm textarea,body.darkMode .groupPrayerSelectWrap select,body.darkMode .groupPrayerSearch,body.darkMode .groupPrayerCardActions,body.darkMode .groupPrayerPrayBtn,body.darkMode .groupPrayerSaveBtn,body.darkMode .groupPrayerManageBtn { border-color:var(--dm-line) !important; background:var(--dm-bg) !important; color:var(--dm-ink) !important; }
body.darkMode.v2Design #groupDetailOverlay .groupPrayerSearch input { color:var(--dm-ink); }
body.darkMode .groupPrayerPrayBtn.active { background:var(--dm-gold) !important; color:#152540 !important; }
body.darkMode .groupPrayerPrivacyNote { background:rgba(213,168,72,.08); color:var(--dm-ink-muted); }

@media (max-width:900px) {
  .groupPrayerHero { grid-template-columns:1fr; }
  .groupPrayerFormGrid { grid-template-columns:1fr; }
  .groupPrayerGrid { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  #groupDetailTabPrayer { padding-top:0; }
  .groupPrayerHero { gap:16px; margin-bottom:10px; padding:18px 16px; border-radius:18px; }
  .groupPrayerHero h2 { font-size:31px; }
  .groupPrayerHero p { font-size:12px; }
  .groupPrayerStats { gap:6px; }
  .groupPrayerStats > div { min-height:59px; display:block; padding:8px 5px; text-align:center; }
  .groupPrayerStats > div > i { width:28px; height:28px; margin:0 auto 5px; font-size:15px; }
  .groupPrayerStats strong { font-size:17px; }
  .groupPrayerStats small { font-size:7.5px; }
  .groupPrayerShareBtn { min-height:61px; padding:9px 12px; }
  .groupPrayerShareBtn small { font-size:9px; }
  .groupPrayerAddForm { padding:15px; }
  .groupPrayerFormActions { display:grid; grid-template-columns:1fr 1fr; }
  .groupPrayerFormActions .btn { min-width:0; width:100%; }
  .groupPrayerBrowseBar { grid-template-columns:1fr; gap:8px; padding:9px; }
  .groupPrayerFilterSegment { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .groupPrayerFilterSegment button { min-width:0; }
  .groupPrayerCardTop { grid-template-columns:40px minmax(0,1fr); padding:12px 13px 9px; }
  .groupPrayerAuthorAvatar { width:40px; height:40px; border-radius:13px; }
  .groupPrayerBadges { grid-column:1/-1; justify-content:flex-start; padding-top:2px; }
  .groupPrayerCardBody { min-height:74px; padding:13px 15px 12px 39px; }
  .groupPrayerCardBody > i { top:12px; left:13px; }
  .groupPrayerCardBody p { font-size:15px; }
  .groupPrayerCardActions { grid-template-columns:1fr 1fr; }
  .groupPrayerManageActions { grid-column:1/-1; justify-content:stretch; }
  .groupPrayerManageBtn { flex:1 1 0; }
}
@media (max-width:390px) {
  .groupPrayerStats small { white-space:normal; }
  .groupPrayerShareBtn strong { font-size:15px; }
  .groupPrayerShareBtn small { display:none; }
  .groupPrayerManageBtn span { font-size:9px; }
}

/* ============================================================================
   Group Chat — channels and people are a directory, not one undifferentiated
   inbox. Existing Firestore threads, messages, permissions, uploads, mentions,
   replies, moderation, and realtime listeners remain the source of truth.
   ============================================================================ */
body.v2Design #groupDetailTabChat {
  --chat-navy:#132846;
  --chat-gold:#bd8b24;
  --chat-ivory:#fbf7ed;
  width:100%; max-width:1480px; min-height:0; margin:0 auto; padding:4px 2px 34px;
  color:var(--chat-navy);
}
.groupChatHero {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(390px,.82fr); align-items:end; gap:24px;
  margin-bottom:13px; padding:25px 27px; overflow:hidden; border:1px solid rgba(19,40,70,.1);
  border-radius:22px; background:radial-gradient(circle at 92% 8%,rgba(196,148,52,.16),transparent 34%),linear-gradient(135deg,#fffdf8,#f5eee0);
  box-shadow:0 11px 29px rgba(24,39,66,.075);
}
.groupChatHeroCopy { min-width:0; }
.groupChatEyebrow { display:flex; align-items:center; gap:7px; margin-bottom:6px; color:#9b6d15; font-size:10px; font-weight:850; letter-spacing:.14em; }
.groupChatEyebrow i { font-size:18px; }
.groupChatHero h2 { margin:0; color:var(--chat-navy); font-family:Georgia,"Times New Roman",serif; font-size:clamp(31px,3.2vw,43px); font-weight:600; line-height:1; }
.groupChatHero p { max-width:620px; margin:9px 0 0; color:#667185; font-size:13.5px; line-height:1.5; }
.groupChatStats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.groupChatStats > div { min-width:0; min-height:70px; display:flex; align-items:center; gap:9px; padding:10px; border:1px solid rgba(19,40,70,.08); border-radius:15px; background:rgba(255,255,255,.8); }
.groupChatStats > div > i { flex:0 0 34px; width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:#f6ecd5; color:#9b6d15; font-size:18px; }
.groupChatStats span,.groupChatStats strong,.groupChatStats small { display:block; min-width:0; }
.groupChatStats strong { color:var(--chat-navy); font-family:Georgia,"Times New Roman",serif; font-size:21px; line-height:1; }
.groupChatStats small { margin-top:4px; overflow:hidden; color:#7b8190; font-size:9px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }

.groupChatDirectoryBar { display:grid; grid-template-columns:minmax(260px,1fr) auto; align-items:center; gap:10px; margin-bottom:11px; padding:10px; border:1px solid rgba(19,40,70,.09); border-radius:17px; background:#fff; box-shadow:0 6px 18px rgba(24,39,66,.055); }
.groupChatDirectorySearch { min-width:0; display:flex; align-items:center; gap:8px; padding:0 13px; border:1px solid rgba(19,40,70,.13); border-radius:12px; background:#faf9f5; }
.groupChatDirectorySearch i { color:#9b6d15; font-size:20px; }
body.v2Design #groupDetailOverlay .groupChatDirectorySearch input { width:100%; min-width:0; height:44px; padding:0; border:0; outline:0; background:transparent; color:var(--chat-navy); box-shadow:none; font-size:12.5px; }
.groupChatFindPersonBtn { min-height:44px; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 16px; border:1px solid rgba(19,40,70,.13); border-radius:12px; background:#fff; color:var(--chat-navy); font-size:10.5px; font-weight:800; cursor:pointer; white-space:nowrap; }
.groupChatFindPersonBtn i { color:#9b6d15; font-size:18px; }

.groupChatNewChannelRow { margin-bottom:11px; }
.groupChatNewChannelBtn { width:100%; min-height:62px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:11px; padding:10px 14px; border:1px solid rgba(19,40,70,.1); border-radius:16px; background:linear-gradient(135deg,#132846,#1d4168); color:#fff; text-align:left; cursor:pointer; box-shadow:0 7px 18px rgba(19,40,70,.14); }
.groupChatNewChannelBtn > i:first-child { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:#d5a32f; color:#132846; font-size:22px; }
.groupChatNewChannelBtn > i:last-child { color:#e9c76f; font-size:21px; }
.groupChatNewChannelBtn span,.groupChatNewChannelBtn strong,.groupChatNewChannelBtn small { display:block; min-width:0; }
.groupChatNewChannelBtn strong { font-family:Georgia,"Times New Roman",serif; font-size:16px; font-weight:600; }
.groupChatNewChannelBtn small { margin-top:3px; color:rgba(255,255,255,.68); font-size:9.5px; }
.groupChatNewChannelForm { margin:0 0 11px; padding:18px; border:1px solid rgba(189,139,36,.28); border-radius:17px; background:#fffdf8; box-shadow:0 9px 24px rgba(24,39,66,.075); }
.groupChatNewChannelFormHead { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.groupChatNewChannelFormHead span,.groupChatNewChannelFormHead strong { display:block; }
.groupChatNewChannelFormHead span { color:#9b6d15; font-size:9px; font-weight:850; letter-spacing:.12em; }
.groupChatNewChannelFormHead strong { margin-top:3px; color:var(--chat-navy); font-family:Georgia,"Times New Roman",serif; font-size:20px; font-weight:600; }
.groupChatNewChannelFormHead button { width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(19,40,70,.11); border-radius:50%; background:#fff; color:var(--chat-navy); font-size:21px; cursor:pointer; }
.groupChatNewChannelForm > label { display:block; margin-bottom:6px; color:#596579; font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.groupChatChannelNameInput { position:relative; }
.groupChatChannelNameInput i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:#9b6d15; font-size:19px; }
body.v2Design #groupDetailOverlay .groupChatChannelNameInput input { width:100%; min-height:46px; box-sizing:border-box; padding:9px 13px 9px 41px; border:1px solid rgba(19,40,70,.14); border-radius:12px; background:#fff; color:var(--chat-navy); }
.groupChatNewChannelActions { display:flex; justify-content:flex-end; gap:8px; margin-top:11px; }
.groupChatNewChannelActions .btn { min-width:110px; min-height:40px; margin:0; border-radius:10px; }

.groupChatDirectory { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:13px; }
.groupChatDirectorySection { min-width:0; padding:17px; border:1px solid rgba(19,40,70,.09); border-radius:19px; background:#fff; box-shadow:0 7px 22px rgba(24,39,66,.06); }
.groupChatDirectoryHeading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:11px; }
.groupChatDirectoryHeading span,.groupChatDirectoryHeading h3 { display:block; }
.groupChatDirectoryHeading > div > span { margin-bottom:3px; color:#9b6d15; font-size:9px; font-weight:850; letter-spacing:.12em; }
.groupChatDirectoryHeading h3 { margin:0; color:var(--chat-navy); font-family:Georgia,"Times New Roman",serif; font-size:21px; font-weight:600; }
.groupChatDirectoryHeading > span { min-width:27px; padding:5px 8px; border-radius:999px; background:#f5efe1; color:#8b6111; font-size:9px; font-weight:850; text-align:center; }
.groupChatChannelList,.groupChatPeopleList { display:grid; gap:7px; }
body.v2Design #groupDetailOverlay .groupChatConvoRow { min-width:0; display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:11px; margin:0; padding:12px; border:1px solid rgba(19,40,70,.08); border-radius:14px; background:#fbfaf7; cursor:pointer; transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
body.v2Design #groupDetailOverlay .groupChatConvoRow:hover { transform:translateY(-1px); border-color:rgba(189,139,36,.38); background:#fff; box-shadow:0 7px 17px rgba(24,39,66,.08); }
body.v2Design #groupDetailOverlay .groupChatConvoAvatar,body.v2Design #groupDetailOverlay .groupChatConvoIcon { width:46px; height:46px; border-radius:14px; }
body.v2Design #groupDetailOverlay .groupChatConvoIcon { background:linear-gradient(145deg,#172f50,#244a72); color:#f0ca70; font-size:20px; }
.groupChatConvoTitleRow { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
body.v2Design #groupDetailOverlay .groupChatConvoName { color:var(--chat-navy); font-family:Georgia,"Times New Roman",serif; font-size:15px; font-weight:650; }
.groupChatDefaultBadge { padding:3px 6px; border-radius:999px; background:#f2e8d1; color:#8b6111; font-size:7px; font-weight:850; letter-spacing:.05em; }
body.v2Design #groupDetailOverlay .groupChatConvoSnippet { margin-top:3px; color:#757d8a; font-size:10.5px; }
body.v2Design #groupDetailOverlay .groupChatConvoMeta { min-width:42px; }
body.v2Design #groupDetailOverlay .groupChatConvoMeta > i { color:#9b6d15; font-size:19px; }
.groupChatChannelMembers { min-width:0; display:flex; align-items:center; gap:7px; margin-top:7px; color:#7a8290; font-size:8.5px; }
.groupChatChannelMembers > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.groupChatAvatarStack { display:flex; flex:0 0 auto; padding-left:3px; }
.groupChatMiniAvatar { width:20px; height:20px; display:grid; place-items:center; margin-left:-4px; overflow:hidden; border:2px solid #fbfaf7; border-radius:50%; background:#efe6d4; color:#805a13; object-fit:cover; font-size:7px; font-weight:850; }
.groupChatChannelRow.is-unread { border-color:rgba(189,139,36,.42) !important; background:#fffaf0 !important; }

.groupChatPersonRow { width:100%; min-width:0; min-height:72px; display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:11px; padding:12px; border:1px solid rgba(19,40,70,.08); border-radius:14px; background:#fbfaf7; color:var(--chat-navy); text-align:left; cursor:pointer; transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.groupChatPersonRow:hover { transform:translateY(-1px); border-color:rgba(189,139,36,.38); background:#fff; box-shadow:0 7px 17px rgba(24,39,66,.08); }
.groupChatPersonAvatar { width:46px; height:46px; display:grid; place-items:center; overflow:hidden; border-radius:14px; background:linear-gradient(145deg,#f2e5ca,#fff9ec); color:#8b6111; object-fit:cover; font-family:Georgia,"Times New Roman",serif; font-size:14px; font-weight:700; }
.groupChatPersonMain,.groupChatPersonTitle,.groupChatPersonMeta { min-width:0; display:flex; }
.groupChatPersonMain { flex-direction:column; }
.groupChatPersonTitle { align-items:center; flex-wrap:wrap; gap:6px; }
.groupChatPersonTitle strong { overflow:hidden; font-family:Georgia,"Times New Roman",serif; font-size:14.5px; font-weight:650; text-overflow:ellipsis; white-space:nowrap; }
.groupChatPersonTitle em { padding:3px 6px; border-radius:999px; background:#eef1f5; color:#516076; font-size:7.5px; font-style:normal; font-weight:850; }
.groupChatPersonTitle em[data-group-role="owner"],.groupChatPersonTitle em[data-group-role="manager"] { background:#e7edf5; color:#1f426a; }
.groupChatPersonTitle em[data-group-role="volunteer"] { background:#e8f1ec; color:#315d4d; }
.groupChatPersonMain > small { margin-top:4px; overflow:hidden; color:#757d8a; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.groupChatPersonMeta { min-width:41px; align-items:flex-end; flex-direction:column; gap:6px; }
.groupChatPersonMeta small { color:#8b919b; font-size:8.5px; }
.groupChatPersonMeta i { color:#9b6d15; font-size:19px; }
.groupChatPersonMeta b { width:9px; height:9px; border-radius:50%; background:#bd8b24; box-shadow:0 0 0 3px rgba(189,139,36,.14); }
.groupChatPersonRow.is-unread { border-color:rgba(189,139,36,.42); background:#fffaf0; }
.groupChatDirectoryEmpty { min-height:108px; display:grid; place-items:center; align-content:center; gap:7px; padding:18px; border:1px dashed rgba(19,40,70,.14); border-radius:13px; color:#7a8290; text-align:center; font-size:10.5px; }
.groupChatDirectoryEmpty i { color:#a77719; font-size:24px; }

body.v2Design #groupDetailOverlay #groupChatThreadView { width:100%; max-width:1120px; margin:0 auto; }
body.v2Design #groupDetailOverlay .groupChatThreadHeader { min-height:72px; display:grid; grid-template-columns:40px 44px minmax(0,1fr) auto; align-items:center; gap:11px; margin:0 0 10px; padding:12px 14px; border:1px solid rgba(19,40,70,.1); border-radius:17px; background:linear-gradient(135deg,#fffdf8,#f7f1e5); box-shadow:0 7px 20px rgba(24,39,66,.06); }
body.v2Design #groupDetailOverlay .groupChatThreadBackBtn { width:40px; height:40px; border:1px solid rgba(19,40,70,.1); background:#fff; }
body.v2Design #groupDetailOverlay .groupChatThreadHeaderAvatar,body.v2Design #groupDetailOverlay .groupChatThreadHeaderIcon { width:44px; height:44px; border-radius:14px; }
body.v2Design #groupDetailOverlay .groupChatThreadHeaderIcon { background:var(--chat-navy); color:#e1b650; }
body.v2Design #groupDetailOverlay .groupChatThreadHeaderTitle { color:var(--chat-navy); font-family:Georgia,"Times New Roman",serif; font-size:18px; font-weight:650; }
body.v2Design #groupDetailOverlay .groupChatThreadHeaderSubtitle { margin-top:3px; color:#7a8290; font-size:9.5px; }
body.v2Design #groupDetailOverlay .groupChatBody { min-height:320px; padding:15px 17px; border:1px solid rgba(19,40,70,.08); border-radius:17px 17px 0 0; background:#fff; }
body.v2Design #groupDetailOverlay .groupChatMsgRow { margin-top:15px; }
body.v2Design #groupDetailOverlay .groupChatMsgBubble { max-width:min(720px,78%); padding:10px 13px; border-color:rgba(19,40,70,.08); border-radius:13px; background:#f8f7f3; color:#2e3b4f; box-shadow:0 3px 10px rgba(24,39,66,.04); }
body.v2Design #groupDetailOverlay .groupChatComposerWrap { margin:0; padding:12px; border:1px solid rgba(19,40,70,.09); border-top:0; border-radius:0 0 17px 17px; background:#fbfaf7; box-shadow:0 7px 20px rgba(24,39,66,.06); }
body.v2Design #groupDetailOverlay .groupChatComposerRow { gap:7px; padding:5px; border:1px solid rgba(19,40,70,.12); border-radius:15px; background:#fff; }
body.v2Design #groupDetailOverlay .groupChatComposerRow textarea { min-height:42px; padding:10px 7px; border:0; outline:0; background:transparent; box-shadow:none; }
body.v2Design #groupDetailOverlay .groupChatComposerIconBtn { width:38px; height:38px; color:#7a8290; }
body.v2Design #groupDetailOverlay .groupChatSendBtn { width:40px; height:40px; background:var(--chat-navy); box-shadow:0 5px 12px rgba(19,40,70,.2); }

body.darkMode .groupChatHero,body.darkMode .groupChatDirectoryBar,body.darkMode .groupChatNewChannelForm,body.darkMode .groupChatDirectorySection,body.darkMode #groupDetailOverlay .groupChatThreadHeader,body.darkMode #groupDetailOverlay .groupChatBody,body.darkMode #groupDetailOverlay .groupChatComposerWrap { border-color:var(--dm-line); background:linear-gradient(135deg,var(--dm-panel),var(--dm-panel-2)); box-shadow:none; }
body.darkMode .groupChatHero h2,body.darkMode .groupChatStats strong,body.darkMode .groupChatNewChannelFormHead strong,body.darkMode .groupChatDirectoryHeading h3,body.darkMode #groupDetailOverlay .groupChatConvoName,body.darkMode .groupChatPersonTitle strong,body.darkMode #groupDetailOverlay .groupChatThreadHeaderTitle { color:var(--dm-ink); }
body.darkMode .groupChatHero p,body.darkMode .groupChatStats small,body.darkMode #groupDetailOverlay .groupChatConvoSnippet,body.darkMode .groupChatChannelMembers,body.darkMode .groupChatPersonMain > small,body.darkMode #groupDetailOverlay .groupChatThreadHeaderSubtitle { color:var(--dm-ink-muted); }
body.darkMode .groupChatStats > div,body.darkMode .groupChatDirectorySearch,body.darkMode .groupChatFindPersonBtn,body.darkMode #groupDetailOverlay .groupChatConvoRow,body.darkMode .groupChatPersonRow,body.darkMode .groupChatChannelNameInput input,body.darkMode #groupDetailOverlay .groupChatComposerRow { border-color:var(--dm-line) !important; background:var(--dm-bg) !important; color:var(--dm-ink) !important; }
body.darkMode.v2Design #groupDetailOverlay .groupChatDirectorySearch input { color:var(--dm-ink); }

@media (max-width:900px) {
  .groupChatHero { grid-template-columns:1fr; }
  .groupChatDirectory { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  body.v2Design #groupDetailTabChat { padding-top:0; }
  .groupChatHero { gap:15px; margin-bottom:10px; padding:18px 16px; border-radius:18px; }
  .groupChatHero h2 { font-size:31px; }
  .groupChatHero p { font-size:12px; }
  .groupChatStats { gap:6px; }
  .groupChatStats > div { min-height:59px; display:block; padding:8px 5px; text-align:center; }
  .groupChatStats > div > i { width:28px; height:28px; margin:0 auto 5px; font-size:15px; }
  .groupChatStats strong { font-size:17px; }
  .groupChatStats small { font-size:7.5px; }
  .groupChatDirectoryBar { grid-template-columns:1fr; gap:7px; padding:9px; }
  .groupChatFindPersonBtn { width:100%; }
  .groupChatNewChannelBtn { min-height:58px; }
  .groupChatNewChannelBtn small { font-size:8.5px; }
  .groupChatNewChannelForm { padding:15px; }
  .groupChatNewChannelActions { display:grid; grid-template-columns:1fr 1fr; }
  .groupChatNewChannelActions .btn { min-width:0; width:100%; }
  .groupChatDirectory { gap:10px; }
  .groupChatDirectorySection { padding:13px; border-radius:17px; }
  .groupChatDirectoryHeading h3 { font-size:19px; }
  body.v2Design #groupDetailOverlay .groupChatConvoRow,.groupChatPersonRow { grid-template-columns:42px minmax(0,1fr) auto; gap:9px; padding:10px; }
  body.v2Design #groupDetailOverlay .groupChatConvoAvatar,body.v2Design #groupDetailOverlay .groupChatConvoIcon,.groupChatPersonAvatar { width:42px; height:42px; border-radius:13px; }
  .groupChatChannelMembers { font-size:8px; }
  body.v2Design #groupDetailOverlay .groupChatThreadHeader { grid-template-columns:38px 40px minmax(0,1fr) auto; gap:8px; min-height:64px; padding:9px; border-radius:15px; }
  body.v2Design #groupDetailOverlay .groupChatThreadBackBtn { width:38px; height:38px; }
  body.v2Design #groupDetailOverlay .groupChatThreadHeaderAvatar,body.v2Design #groupDetailOverlay .groupChatThreadHeaderIcon { width:40px; height:40px; border-radius:12px; }
  body.v2Design #groupDetailOverlay .groupChatThreadHeaderTitle { font-size:16px; }
  body.v2Design #groupDetailOverlay .groupChatBody { min-height:260px; padding:12px 10px; }
  body.v2Design #groupDetailOverlay .groupChatMsgBubble { max-width:87%; font-size:13px; }
  body.v2Design #groupDetailOverlay .groupChatComposerWrap { padding:8px; }
  body.v2Design #groupDetailOverlay .groupChatComposerRow { gap:2px; padding:3px; }
  body.v2Design #groupDetailOverlay .groupChatComposerIconBtn { width:34px; height:38px; }
  body.v2Design #groupDetailOverlay .groupChatSendBtn { width:38px; height:38px; }
}
@media (max-width:390px) {
  .groupChatStats small { white-space:normal; }
  .groupChatNewChannelBtn small { display:none; }
  .groupChatChannelMembers > span { max-width:135px; }
  .groupChatPersonTitle em { display:none; }
  body.v2Design #groupDetailOverlay .groupChatThreadHeader { grid-template-columns:36px 36px minmax(0,1fr) auto; }
  body.v2Design #groupDetailOverlay .groupChatThreadHeaderAvatar,body.v2Design #groupDetailOverlay .groupChatThreadHeaderIcon { width:36px; height:36px; }
}