/*
 * DLS Community presentation layer.
 * Styling direction is adapted from the individually generated Stitch screens;
 * page structure, content, behavior, and accessibility remain DLS-owned.
 */
:root {
  --community-navy: #11182f;
  --community-teal: #004e53;
  --community-teal-soft: #e8f7f6;
  --community-purple: #6d28d9;
  --community-page: #f8fafc;
  --community-surface: #ffffff;
  --community-text: #1e293b;
  --community-muted: #64748b;
  --community-border: #dce3eb;
  --community-shadow: 0 10px 28px rgba(15, 23, 42, .07);
}

/* ==========================================================================
   DLS Community Design System — authoritative Stitch implementation
   Source project: DLS Community Design System (17274308799224593327)
   HTML, application state, copy, permissions, and behavior remain DLS-owned.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --stitch-primary: #003639;
  --stitch-primary-container: #004e53;
  --stitch-primary-fixed: #b0edf3;
  --stitch-secondary: #575d78;
  --stitch-secondary-container: #e0e4ff;
  --stitch-tertiary: #6d28d9;
  --stitch-background: #f9f9ff;
  --stitch-surface: #ffffff;
  --stitch-surface-low: #f3f6ff;
  --stitch-surface-container: #e7eeff;
  --stitch-text: #0f1c2e;
  --stitch-muted: #596578;
  --stitch-border: #dce3eb;
  --stitch-outline: #bfc8c9;
  --stitch-success: #16794b;
  --stitch-warning: #8a5a00;
  --stitch-danger: #ba1a1a;
  --stitch-shadow-card: 0 4px 20px rgba(17, 24, 47, .04);
  --stitch-shadow-raised: 0 8px 32px rgba(17, 24, 47, .08);
  --stitch-radius-sm: 4px;
  --stitch-radius-md: 8px;
  --stitch-radius-lg: 12px;
  --stitch-radius-pill: 999px;
}

.dls-community-shell,
.dls-community-shell button,
.dls-community-shell input,
.dls-community-shell select,
.dls-community-shell textarea {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.dls-community-shell h1,
.dls-community-shell h2,
.dls-community-shell h3,
.dls-community-shell strong,
.community-page-header h1,
.timeline-header strong {
  font-family: "Hanken Grotesk", Inter, sans-serif;
  letter-spacing: 0;
}

.dls-community-shell {
  color: var(--stitch-text);
  background-color: var(--stitch-background);
  background-image: radial-gradient(circle at 1px 1px, rgba(220, 227, 235, .72) 1px, transparent 1px);
  background-size: 24px 24px;
}

.community-app {
  min-height: 100vh;
  color: var(--stitch-text);
  background: transparent;
}

.community-topbar {
  position: sticky;
  z-index: 60;
  top: 0;
  min-height: 72px;
  padding: 12px 24px;
  border-bottom: 1px solid rgba(220, 227, 235, .86);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 1px 0 rgba(15, 28, 46, .03);
  backdrop-filter: blur(12px);
}

.community-global-search {
  width: min(100%, 620px);
  min-height: 46px;
  margin-inline: auto;
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-pill);
  background: var(--stitch-surface-low);
  color: var(--stitch-muted);
}

.community-top-actions {
  gap: 12px;
}

.icon-button,
.community-button {
  border-radius: var(--stitch-radius-pill);
}

.icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid var(--stitch-border);
  background: var(--stitch-surface);
  color: var(--stitch-primary);
}

.community-button {
  min-height: 44px;
  padding: 10px 18px;
  font-weight: 700;
}

.community-button.primary,
.community-rail-create {
  color: #fff;
  background: var(--stitch-primary);
}

.community-button.secondary {
  color: var(--stitch-primary);
  border-color: var(--stitch-outline);
  background: var(--stitch-surface);
}

.community-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 720px) minmax(260px, 320px);
  align-items: start;
  width: min(100%, 1320px);
  min-height: calc(100vh - 72px);
  margin: 0 auto;
  gap: 24px;
}

.community-section-nav {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: calc(100vh - 104px);
  padding: 20px 12px;
  overflow: auto;
  border: 0;
  border-right: 1px solid var(--stitch-border);
  border-radius: 0;
  background: rgba(255, 255, 255, .92);
  box-shadow: none;
}

.community-network-brand {
  min-height: 62px;
  margin: 0 6px 12px;
  color: var(--stitch-primary);
}

.community-network-brand > .community-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: var(--stitch-radius-lg);
  color: #fff;
  background: var(--stitch-primary);
}

.community-view-button,
.community-exit-link {
  min-height: 48px;
  padding: 10px 14px;
  border: 0;
  border-radius: var(--stitch-radius-pill);
  color: var(--stitch-text);
  background: transparent;
  font-weight: 600;
}

.community-view-button:hover,
.community-exit-link:hover {
  background: var(--stitch-surface-low);
}

.community-view-button.active {
  color: var(--stitch-primary);
  background: var(--stitch-primary-fixed);
}

.community-rail-create {
  min-height: 46px;
  margin: 14px 6px 8px;
  border: 0;
  border-radius: var(--stitch-radius-pill);
}

.community-exit-link {
  margin-top: auto;
}

.community-content {
  min-width: 0;
  padding: 20px 0 88px;
}

.community-right-rail {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 16px;
  max-height: calc(100vh - 108px);
  padding-top: 20px;
  overflow: auto;
}

.rail-card,
.community-post,
.community-panel,
.feature-card,
.collection-card,
.community-empty,
.community-page-header,
.profile-hero {
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface);
  box-shadow: var(--stitch-shadow-card);
}

.rail-card {
  padding: 16px;
}

.timeline-header {
  min-height: 58px;
  padding: 8px 4px 14px;
  border-bottom: 1px solid var(--stitch-border);
  background: transparent;
}

.timeline-header strong {
  color: var(--stitch-text);
  font-size: 24px;
  line-height: 32px;
}

.timeline-header small,
.community-page-header p,
.post-copy p,
.feature-card p,
.collection-card p {
  color: var(--stitch-muted);
}

.feed-tabs {
  position: sticky;
  z-index: 35;
  top: 72px;
  display: flex;
  gap: 4px;
  margin: 0 0 12px;
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-lg);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
}

.feed-tabs button {
  min-height: 38px;
  padding: 8px 14px;
  border-radius: var(--stitch-radius-pill);
  white-space: nowrap;
}

.feed-tabs button.active {
  color: #fff;
  background: var(--stitch-primary);
}

.quick-composer {
  margin-bottom: 12px;
}

.quick-composer > button {
  min-height: 70px;
  padding: 12px 16px;
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface);
  box-shadow: var(--stitch-shadow-card);
}

.feed-list {
  display: grid;
  gap: 16px;
}

.community-post {
  overflow: clip;
}

.post-head {
  padding: 16px 16px 8px;
}

.author-avatar {
  width: 42px;
  height: 42px;
  border: 2px solid var(--stitch-surface);
  background: var(--stitch-primary-fixed);
  color: var(--stitch-primary);
  box-shadow: 0 0 0 1px var(--stitch-border);
}

.author-button strong {
  color: var(--stitch-text);
  font-size: 14px;
}

.author-button small,
.post-type {
  color: var(--stitch-muted);
}

.post-copy {
  padding: 4px 16px 14px;
}

.post-copy h2 {
  margin-bottom: 6px;
  color: var(--stitch-text);
  font-size: 20px;
  line-height: 28px;
}

.post-copy p {
  font-size: 15px;
  line-height: 23px;
}

.post-media {
  width: calc(100% - 24px);
  max-height: 560px;
  margin: 0 12px;
  object-fit: cover;
  border: 0;
  border-radius: var(--stitch-radius-lg);
  aspect-ratio: 4 / 3;
}

.post-meta,
.post-engagement {
  padding-inline: 16px;
}

.post-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 8px 12px 10px;
  padding-top: 8px;
  border-top: 1px solid var(--stitch-border);
}

.post-actions > button {
  min-height: 42px;
  border-radius: var(--stitch-radius-md);
  color: var(--stitch-muted);
}

.post-actions > button:hover,
.post-actions > button.active {
  color: var(--stitch-primary);
  background: var(--stitch-surface-low);
}

.teacher-post-tools {
  margin: 4px 12px 8px;
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-md);
  background: var(--stitch-surface-low);
}

.teacher-post-tools summary {
  padding: 10px 12px;
  color: var(--stitch-primary);
  font-weight: 700;
}

.teacher-post-tool-menu {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.teacher-post-tool-menu button {
  min-height: 42px;
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-md);
  background: var(--stitch-surface);
}

.community-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 148px;
  margin-bottom: 16px;
  padding: 24px;
  color: #fff;
  border-color: transparent;
  background: var(--stitch-primary);
  box-shadow: var(--stitch-shadow-raised);
}

.community-page-header h1 {
  margin: 5px 0;
  color: #fff;
  font-size: 32px;
  line-height: 40px;
}

.community-page-header p,
.community-page-header .community-kicker {
  color: rgba(255, 255, 255, .78);
}

.community-page-header .community-button.secondary {
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
  background: rgba(255, 255, 255, .12);
}

.card-grid,
.collection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.feature-card,
.collection-card {
  min-height: 230px;
  padding: 20px;
}

.feature-card h2,
.collection-card h2,
.community-panel h2 {
  color: var(--stitch-text);
}

.feature-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: var(--stitch-radius-lg);
  color: var(--stitch-primary);
  background: var(--stitch-primary-fixed);
}

/* Saved: private library treatment from the dedicated Stitch screen. */
.community-content[data-community-view="saved"] .community-page-header {
  background: linear-gradient(135deg, var(--stitch-primary), #176b70);
}

.community-content[data-community-view="saved"] .collection-card {
  position: relative;
  min-height: 200px;
  background: linear-gradient(145deg, #fff, var(--stitch-surface-low));
}

.community-content[data-community-view="saved"] .collection-card > .community-icon {
  width: 48px;
  height: 48px;
  color: var(--stitch-tertiary);
}

/* Groups: larger membership cards and dedicated discover hierarchy. */
.community-content[data-community-view="groups"] .community-page-header {
  background: linear-gradient(135deg, #073e42, #155f66);
}

.community-content[data-community-view="groups"] .feature-card {
  display: flex;
  min-height: 280px;
  flex-direction: column;
  gap: 12px;
}

.community-content[data-community-view="groups"] .feature-card .community-button {
  margin-top: auto;
}

/* Challenges: editorial cards from the challenge browse screen. */
.community-content[data-community-view="challenges"] .community-page-header {
  background: linear-gradient(135deg, #3b1767, var(--stitch-tertiary));
}

.community-content[data-community-view="challenges"] .feature-card.challenge {
  min-height: 300px;
  background: linear-gradient(145deg, #fff 58%, #f2edff);
}

/* Search: search-first layout with separate result surfaces. */
.community-content[data-community-view="search"] .community-search {
  min-height: 64px;
  margin-bottom: 16px;
  padding: 0 20px;
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-pill);
  background: var(--stitch-surface);
  box-shadow: var(--stitch-shadow-card);
}

.community-content[data-community-view="search"] .search-groups {
  display: grid;
  gap: 16px;
}

.community-content[data-community-view="search"] .search-groups > section {
  padding: 20px;
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface);
  box-shadow: var(--stitch-shadow-card);
}

.search-result {
  min-height: 58px;
  border-radius: var(--stitch-radius-md);
}

/* Notifications: compact timeline rows from the individual Stitch screen. */
.community-content[data-community-view="notifications"] .notification-list {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface);
  box-shadow: var(--stitch-shadow-card);
}

.community-content[data-community-view="notifications"] .notification-item {
  min-height: 76px;
  padding: 12px;
  border: 0;
  border-radius: var(--stitch-radius-md);
}

.community-content[data-community-view="notifications"] .notification-item.unread {
  background: var(--stitch-surface-container);
}

/* Profile: academic profile cover, identity block, and content tabs. */
.community-content[data-community-view="profile"] .profile-hero {
  overflow: clip;
  color: var(--stitch-text);
  background: var(--stitch-surface);
}

.community-content[data-community-view="profile"] .profile-cover {
  display: block;
  height: 190px;
  background:
    radial-gradient(circle at 20% 20%, rgba(176, 237, 243, .55), transparent 26%),
    radial-gradient(circle at 78% 55%, rgba(109, 40, 217, .28), transparent 32%),
    linear-gradient(135deg, #003639, #0e4e68 62%, #29114f);
}

.profile-main {
  padding: 0 24px 22px;
}

.profile-avatar {
  width: 104px;
  height: 104px;
  margin-top: -52px;
  border: 5px solid #fff;
  background: var(--stitch-primary-fixed);
  color: var(--stitch-primary);
}

.profile-content-tabs {
  display: flex;
  gap: 6px;
  margin-top: 16px;
  padding: 6px;
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface);
}

.profile-content-tabs button {
  min-height: 42px;
  flex: 1;
  border-radius: var(--stitch-radius-md);
}

.profile-content-tabs button.active {
  color: #fff;
  background: var(--stitch-primary);
}

.profile-media-grid {
  display: grid;
  margin-top: 16px;
}

/* Shorts: dedicated immersive viewer, intentionally unlike feed cards. */
.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] {
  min-height: calc(100vh - 92px);
  margin-top: 20px;
  padding: 16px;
  color: #fff;
  border-radius: var(--stitch-radius-lg);
  background: #050b12;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .community-page-header {
  min-height: auto;
  padding: 8px 4px 18px;
  border: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .feed-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .community-post {
  color: #fff;
  border-color: #283341;
  background: #0b131f;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .post-copy h2,
.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .post-copy p,
.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .author-button strong {
  color: #fff;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .post-media {
  width: calc(100% - 20px);
  max-height: 640px;
  margin: 0 10px;
  aspect-ratio: 9 / 16;
}

/* Teacher Hub and post analytics: individual operational workspaces. */
.teacher-hub-header,
.post-analytics-header,
.admin-page-heading {
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface);
  box-shadow: var(--stitch-shadow-card);
}

.teacher-hub-header,
.post-analytics-header {
  padding: 24px;
}

.teacher-hub-header h1,
.post-analytics-header h1,
.admin-page-heading h1 {
  color: var(--stitch-text);
  font-size: 32px;
  line-height: 40px;
}

.teacher-pulse-card {
  border-radius: var(--stitch-radius-lg);
  color: #fff;
  background: linear-gradient(135deg, var(--stitch-primary), #11646b);
  box-shadow: var(--stitch-shadow-raised);
}

.teacher-metric-grid,
.post-analytics-metrics,
.admin-metric-grid {
  gap: 12px;
}

.teacher-metric-card,
.post-analytics-metrics article,
.admin-metric-card {
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface);
  box-shadow: var(--stitch-shadow-card);
}

.teaching-hub-grid,
.post-analytics-grid,
.admin-dashboard-grid {
  gap: 16px;
}

.teacher-activity-item,
.teacher-review-item {
  border-radius: var(--stitch-radius-md);
}

/* Admin Control Center: dedicated two-column shell, not the social feed. */
.community-admin-app .community-topbar {
  padding-inline: 24px;
}

.admin-control-hero {
  width: min(calc(100% - 48px), 1320px);
  margin: 20px auto 0;
  padding: 24px 28px;
  border-radius: var(--stitch-radius-lg);
  color: #fff;
  background: linear-gradient(135deg, var(--stitch-primary), #176c73);
  box-shadow: var(--stitch-shadow-raised);
}

.admin-community-layout {
  grid-template-columns: 236px minmax(0, 1fr);
  width: min(100%, 1320px);
  gap: 24px;
}

.admin-community-content {
  padding: 20px 0 80px;
}

.admin-page-heading {
  padding: 24px;
}

.admin-metric-card {
  min-height: 112px;
}

.admin-moderation-table,
.admin-featured-list,
.admin-controls-grid,
.settings-form {
  border-radius: var(--stitch-radius-lg);
}

.setting-toggle {
  min-height: 88px;
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-md);
  background: var(--stitch-surface);
}

/* Dialog and composer styling follows the Create Post and report-flow screens. */
.community-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: min(88vh, 860px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface);
  box-shadow: 0 24px 80px rgba(15, 28, 46, .22);
}

.community-dialog::backdrop {
  background: rgba(15, 28, 46, .56);
  backdrop-filter: blur(5px);
}

.community-dialog-header {
  position: sticky;
  z-index: 2;
  top: 0;
  padding: 18px 22px;
  border-bottom: 1px solid var(--stitch-border);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(12px);
}

.community-dialog-body,
.community-form {
  padding: 20px 22px 24px;
}

.community-form {
  display: grid;
  gap: 16px;
}

.community-form label {
  display: grid;
  gap: 7px;
  color: var(--stitch-text);
  font-weight: 700;
}

.community-form input,
.community-form textarea,
.community-form select {
  min-height: 46px;
  padding: 11px 13px;
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-md);
  color: var(--stitch-text);
  background: var(--stitch-surface);
}

.community-form input:focus,
.community-form textarea:focus,
.community-form select:focus {
  outline: 3px solid rgba(176, 237, 243, .8);
  border-color: var(--stitch-primary);
}

.file-control,
.form-status {
  border-radius: var(--stitch-radius-md);
}

@media (max-width: 1180px) {
  .community-layout {
    grid-template-columns: 220px minmax(0, 720px);
    width: min(100%, 980px);
  }

  .community-right-rail {
    display: none;
  }

  .admin-community-layout {
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

@media (max-width: 800px) {
  .community-topbar {
    min-height: 60px;
    padding: 8px 14px;
  }

  .community-layout,
  .admin-community-layout {
    display: block;
    width: 100%;
  }

  .community-section-nav,
  .admin-control-hero,
  .admin-mobile-nav {
    display: none;
  }

  .community-content,
  .admin-community-content {
    min-height: calc(100vh - 128px);
    padding: 0 0 82px;
  }

  .community-mobile-brand {
    display: grid;
  }

  .community-mobile-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid var(--stitch-border);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
  }

  .community-mobile-nav .community-view-button {
    min-width: 0;
    min-height: 58px;
    padding: 6px 2px;
    border-radius: 0;
    font-size: 10px;
  }

  .community-mobile-nav .mobile-create .community-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #fff;
    background: var(--stitch-primary);
  }

  .community-global-search {
    width: 44px;
    min-height: 44px;
    margin-left: auto;
    padding: 0;
  }

  .community-global-search span {
    display: none;
  }

  .timeline-header {
    padding: 8px 14px;
    background: var(--stitch-surface);
  }

  .feed-tabs {
    top: 60px;
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .community-mobile-stories {
    display: flex;
    gap: 12px;
    padding: 14px 12px;
    overflow-x: auto;
    border-bottom: 1px solid var(--stitch-border);
    background: var(--stitch-surface);
  }

  .quick-composer {
    margin: 10px 10px 12px;
  }

  .feed-list {
    gap: 10px;
    padding: 0 10px;
  }

  .community-post {
    border-radius: var(--stitch-radius-lg);
  }

  .post-media {
    width: calc(100% - 20px);
    margin: 0 10px;
    aspect-ratio: 4 / 5;
  }

  .post-actions {
    margin-inline: 8px;
  }

  .post-actions > button {
    font-size: 0;
  }

  .post-actions > button span {
    display: none;
  }

  .community-page-header {
    min-height: 140px;
    margin: 0 10px 12px;
    padding: 20px;
    border-radius: 0 0 var(--stitch-radius-lg) var(--stitch-radius-lg);
  }

  .community-page-header h1 {
    font-size: 26px;
    line-height: 34px;
  }

  .community-page-header .community-button {
    align-self: flex-start;
  }

  .card-grid,
  .collection-grid,
  .teacher-metric-grid,
  .post-analytics-metrics,
  .admin-metric-grid,
  .teaching-hub-grid,
  .post-analytics-grid,
  .admin-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .card-grid,
  .collection-grid,
  .teaching-hub-page,
  .post-analytics-page,
  .admin-community-content > * {
    margin-inline: 10px;
  }

  .community-content[data-community-view="profile"] .profile-hero {
    margin: 0 10px;
  }

  .profile-cover {
    height: 140px;
  }

  .profile-main {
    grid-template-columns: auto minmax(0, 1fr);
    padding-inline: 16px;
  }

  .profile-avatar {
    width: 84px;
    height: 84px;
    margin-top: -42px;
  }

  .profile-content-tabs,
  .profile-media-grid {
    margin-inline: 10px;
  }

  .community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] {
    margin: 0;
    padding: 8px 8px 78px;
    border-radius: 0;
  }

  .community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .feed-list {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .post-media {
    max-height: calc(100vh - 210px);
  }

  .community-dialog {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }
}

/* Exact Stitch Community exports, authoritative v4.
   Geometry and component composition follow DLS Community Design System. */
:root {
  --stitch-primary: #003639;
  --stitch-primary-container: #004e53;
  --stitch-primary-fixed: #b0edf3;
  --stitch-secondary: #575d78;
  --stitch-secondary-container: #d8defe;
  --stitch-surface: #ffffff;
  --stitch-surface-low: #f0f3ff;
  --stitch-surface-container: #e7eeff;
  --stitch-surface-high: #dee8ff;
  --stitch-background: #f9f9ff;
  --stitch-text: #0f1c2e;
  --stitch-muted: #3f4849;
  --stitch-outline: #707979;
  --stitch-border: #dce3eb;
  --stitch-error: #ba1a1a;
  --stitch-error-container: #ffdad6;
  --stitch-shadow-card: 0 1px 3px rgba(0, 0, 0, .05), 0 4px 12px rgba(0, 0, 0, .03);
  --stitch-shadow-raised: 0 4px 20px rgba(17, 24, 47, .04);
}

html,
body {
  color: var(--stitch-text);
  background: var(--stitch-background);
}

.dls-community-shell {
  min-height: 100vh;
  color: var(--stitch-text);
  background: var(--stitch-background);
}

.dls-community-shell > .dls-sidebar {
  display: none !important;
}

.dls-community-main {
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
}

.dls-community-page {
  max-width: none;
}

.community-app {
  min-height: 100vh;
  font-family: Inter, system-ui, sans-serif;
  background: #fff;
}

.community-app h1,
.community-app h2,
.community-app h3,
.community-app strong,
.community-dialog h1,
.community-dialog h2,
.community-dialog h3 {
  font-family: "Hanken Grotesk", Inter, sans-serif;
}

.community-app:not(.community-admin-app) .community-topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: grid;
  grid-template-columns: 280px minmax(280px, 576px) auto;
  align-items: center;
  justify-content: center;
  gap: 32px;
  height: 64px;
  min-height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid #f0f1f3;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(16px);
}

.community-mobile-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  color: var(--stitch-primary);
  background: transparent;
  font-family: "Hanken Grotesk", Inter, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  text-align: left;
}

.community-mobile-brand strong {
  color: var(--stitch-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.community-global-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  color: var(--stitch-outline);
  background: #f3f4f6;
  box-shadow: none;
}

.community-global-search:hover,
.community-global-search:focus-visible {
  border: 0;
  color: var(--stitch-primary);
  background: #fff;
  outline: 2px solid rgba(0, 54, 57, .16);
}

.community-top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.community-top-actions .icon-button {
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
}

.community-button {
  border-radius: 999px;
}

.community-button.primary {
  color: #fff;
  background: var(--stitch-primary);
}

.community-app:not(.community-admin-app) .community-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 760px) 380px;
  width: min(100%, 1440px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 64px 0 0;
  gap: 0;
}

.community-app:not(.community-admin-app) .community-section-nav {
  position: fixed;
  top: 64px;
  bottom: 0;
  left: max(0px, calc((100vw - 1440px) / 2));
  z-index: 30;
  display: flex;
  width: 280px;
  padding: 24px 16px 36px;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  border: 0;
  border-right: 1px solid #f0f1f3;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.community-network-brand {
  display: none;
}

.community-app:not(.community-admin-app) .community-view-button,
.community-app:not(.community-admin-app) .community-exit-link {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 52px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  color: var(--stitch-secondary);
  background: transparent;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}

.community-app:not(.community-admin-app) .community-view-button.active {
  color: var(--stitch-primary);
  background: transparent;
  font-weight: 800;
}

.community-app:not(.community-admin-app) .community-view-button:hover,
.community-app:not(.community-admin-app) .community-exit-link:hover {
  color: var(--stitch-primary);
  background: #f3f4f6;
}

.community-rail-create {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 32px);
  min-height: 50px;
  margin: auto 16px 14px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--stitch-primary);
  font-size: 16px;
  font-weight: 800;
}

.community-app:not(.community-admin-app) .community-exit-link {
  margin-top: 0;
  font-size: 14px;
}

.community-app:not(.community-admin-app) .community-content {
  grid-column: 2;
  min-width: 0;
  min-height: calc(100vh - 64px);
  padding: 32px 32px 88px;
  border: 0;
  background: #fff;
}

.community-app:not(.community-admin-app) .community-right-rail {
  position: fixed;
  top: 64px;
  bottom: 0;
  right: max(0px, calc((100vw - 1440px) / 2));
  z-index: 20;
  display: flex;
  width: 380px;
  padding: 32px;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  border-left: 1px solid #f0f1f3;
  background: #fff;
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 24px;
  padding: 0 2px;
}

.timeline-header strong {
  display: block;
  color: var(--stitch-primary);
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -.02em;
}

.timeline-header small {
  color: var(--stitch-muted);
}

.timeline-header > span {
  display: none;
}

.feed-tabs {
  display: flex;
  gap: 24px;
  margin: -8px 0 24px;
  padding: 0;
  overflow-x: auto;
  border: 0;
  border-bottom: 1px solid #edf0f2;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.feed-tabs button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 2px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--stitch-secondary);
  background: transparent;
  font-size: 14px;
}

.feed-tabs button.active {
  border-bottom-color: var(--stitch-primary);
  color: var(--stitch-primary);
  background: transparent;
}

.discoveries-strip {
  margin: 0 0 28px;
}

.discoveries-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.discoveries-heading strong {
  color: var(--stitch-primary);
  font-size: 18px;
}

.community-mobile-stories {
  display: flex;
  gap: 12px;
  padding: 0 0 6px;
  overflow-x: auto;
  background: transparent;
}

.mobile-story-item {
  display: grid;
  flex: 0 0 112px;
  height: 176px;
  padding: 10px;
  align-content: end;
  justify-items: start;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(155deg, #285f65, #07181b 70%);
  box-shadow: var(--stitch-shadow-card);
}

.mobile-story-item:nth-child(3n + 2) {
  background: linear-gradient(155deg, #5a6580, #182235 70%);
}

.mobile-story-item:nth-child(3n + 3) {
  background: linear-gradient(155deg, #387062, #12231f 70%);
}

.mobile-story-item > span {
  display: grid;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  place-items: center;
  border: 2px solid var(--stitch-primary-fixed);
  border-radius: 50%;
  background: #fff;
  color: var(--stitch-primary);
}

.mobile-story-item small {
  max-width: 92px;
  overflow: hidden;
  color: #fff;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-composer {
  margin: 0 0 18px;
}

.quick-composer > button {
  min-height: 64px;
  padding: 11px 14px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 16px;
  box-shadow: var(--stitch-shadow-card);
}

.quick-composer > button > strong {
  margin-left: auto;
  padding: 8px 18px;
  border-radius: 999px;
  color: #fff;
  background: var(--stitch-primary);
}

.feed-list {
  gap: 24px;
}

.community-post {
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--stitch-shadow-card);
}

.post-head {
  padding: 18px 18px 12px;
}

.post-copy {
  padding: 0 18px 16px;
}

.post-copy h2 {
  color: var(--stitch-primary);
  font-size: 20px;
}

.post-copy p {
  color: var(--stitch-muted);
  line-height: 1.55;
}

.post-media {
  width: calc(100% - 24px);
  max-height: 520px;
  margin: 0 12px;
  border-radius: 12px;
  object-fit: cover;
}

.post-meta {
  padding: 12px 18px;
}

.post-engagement {
  padding: 0 18px 10px;
  color: var(--stitch-muted);
  font-size: 12px;
}

.post-actions {
  margin: 0 12px;
  border-top: 1px solid #edf0f2;
}

.post-actions > button {
  min-height: 46px;
}

.rail-card {
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 16px;
  background: #f8f9fa;
  box-shadow: none;
}

.rail-destination {
  border-radius: 12px;
}

.community-safety-card {
  color: #fff;
  background: var(--stitch-primary);
}

/* Stitch create-post screen */
.community-dialog {
  width: min(1120px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 1px solid var(--stitch-border);
  border-radius: 12px;
  background-color: var(--stitch-background);
  background-image: radial-gradient(circle, #dce3eb 1px, transparent 1px);
  background-size: 24px 24px;
  box-shadow: 0 24px 72px rgba(15, 28, 46, .28);
}

.community-dialog::backdrop {
  background: rgba(15, 28, 46, .55);
  backdrop-filter: blur(4px);
}

.community-dialog-head {
  min-height: 64px;
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid var(--stitch-border);
  background: rgba(249, 249, 255, .9);
}

.community-dialog-head h2 {
  color: var(--stitch-primary);
  font-size: 24px;
}

.community-composer {
  padding: 18px;
}

.composer-type-picker {
  padding: 12px;
  border: 1px solid var(--stitch-border);
  border-radius: 12px;
  background: #fff;
}

.composer-layout {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 16px;
  margin-top: 12px;
}

.composer-creation-panel,
.composer-settings-panel {
  border: 1px solid var(--stitch-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--stitch-shadow-raised);
}

.composer-settings-panel {
  align-self: start;
}

.composer-guidance {
  border-radius: 8px;
  background: var(--stitch-surface-container);
}

.composer-actions {
  position: sticky;
  bottom: 0;
  margin: 0 -18px -18px;
  padding: 14px 18px;
  border-top: 1px solid var(--stitch-border);
  background: rgba(249, 249, 255, .94);
}

/* Stitch administrator control center */
.community-admin-app {
  min-height: 100vh;
  background-color: var(--stitch-background);
  background-image: radial-gradient(circle, #dce3eb 1px, transparent 1px);
  background-size: 24px 24px;
}

.community-admin-app .community-topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  height: 64px;
  min-height: 64px;
  padding: 0 24px 0 280px;
  border-bottom: 1px solid var(--stitch-border);
  background: rgba(249, 249, 255, .88);
  backdrop-filter: blur(12px);
}

.community-admin-app .community-mobile-brand {
  margin-right: auto;
}

.community-admin-app .community-global-search {
  display: none;
}

.community-admin-app .admin-community-layout {
  display: block;
  min-height: 100vh;
  padding: 64px 0 0 256px;
}

.community-admin-app .admin-section-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  display: flex;
  width: 256px;
  padding: 84px 0 24px;
  flex-direction: column;
  border: 0;
  border-right: 1px solid var(--stitch-border);
  border-radius: 0;
  background: var(--stitch-background);
  box-shadow: none;
}

.community-admin-app .admin-section-nav .community-network-brand {
  display: flex;
  margin: 0 24px 24px;
}

.community-admin-app .community-view-button,
.community-admin-app .community-exit-link {
  min-height: 52px;
  padding: 12px 24px;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 0;
  color: var(--stitch-muted);
  background: transparent;
}

.community-admin-app .community-view-button.active {
  border-left-color: var(--stitch-primary);
  color: var(--stitch-primary);
  background: rgba(216, 222, 254, .55);
}

.community-admin-app .community-exit-link {
  margin-top: auto;
}

.community-admin-app .admin-community-content {
  width: min(100%, 1184px);
  min-height: calc(100vh - 64px);
  margin: 0 auto;
  padding: 32px 24px 56px;
}

.community-admin-app .admin-page-heading {
  align-items: end;
  margin-bottom: 24px;
  padding: 0;
  color: var(--stitch-text);
  background: transparent;
  box-shadow: none;
}

.community-admin-app .admin-page-heading h1 {
  color: var(--stitch-primary);
  font-size: 32px;
}

.community-admin-app .admin-metric-card,
.community-admin-app .community-panel,
.community-admin-app .admin-controls-form {
  border: 1px solid var(--stitch-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--stitch-shadow-raised);
}

.community-admin-app .admin-metric-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.community-admin-app .admin-dashboard-grid {
  gap: 16px;
}

.admin-control-hero,
.admin-mobile-nav {
  display: none;
}

@media (max-width: 1180px) {
  .community-app:not(.community-admin-app) .community-topbar {
    grid-template-columns: 240px minmax(280px, 560px) auto;
  }

  .community-app:not(.community-admin-app) .community-layout {
    grid-template-columns: 240px minmax(0, 760px);
    width: min(100%, 1000px);
  }

  .community-app:not(.community-admin-app) .community-section-nav {
    left: max(0px, calc((100vw - 1000px) / 2));
    width: 240px;
  }

  .community-app:not(.community-admin-app) .community-right-rail {
    display: none;
  }
}

@media (max-width: 800px) {
  .community-app:not(.community-admin-app) .community-topbar {
    grid-template-columns: 1fr auto auto;
    height: 58px;
    min-height: 58px;
    padding: 0 14px;
    gap: 10px;
  }

  .community-app:not(.community-admin-app) .community-mobile-brand {
    display: flex;
    font-size: 18px;
  }

  .community-app:not(.community-admin-app) .community-global-search {
    width: 38px;
    min-height: 38px;
    padding: 0;
    justify-content: center;
    background: transparent;
  }

  .community-app:not(.community-admin-app) .community-global-search span {
    display: none;
  }

  .community-app:not(.community-admin-app) .community-top-actions .community-button {
    display: none;
  }

  .community-app:not(.community-admin-app) .community-layout {
    display: block;
    width: 100%;
    padding-top: 58px;
  }

  .community-app:not(.community-admin-app) .community-section-nav,
  .community-app:not(.community-admin-app) .community-right-rail {
    display: none;
  }

  .community-app:not(.community-admin-app) .community-content {
    min-height: calc(100vh - 58px);
    padding: 0 0 74px;
  }

  .community-mobile-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    min-height: 64px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--stitch-border);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(16px);
  }

  .community-mobile-nav .community-view-button {
    display: grid;
    width: auto;
    min-width: 0;
    min-height: 52px;
    padding: 4px;
    place-items: center;
    gap: 2px;
    border: 0;
    border-radius: 8px;
    color: var(--stitch-muted);
    background: transparent;
    font-size: 10px;
  }

  .community-mobile-nav .community-view-button.active {
    color: var(--stitch-primary);
    background: transparent;
  }

  .community-mobile-nav .mobile-create .community-icon {
    width: 40px;
    height: 40px;
    padding: 10px;
    border-radius: 50%;
    color: #fff;
    background: var(--stitch-primary);
  }

  .timeline-header {
    min-height: 48px;
    margin: 0;
    padding: 8px 14px;
    border-bottom: 1px solid var(--stitch-border);
  }

  .timeline-header strong {
    font-size: 18px;
    line-height: 24px;
  }

  .feed-tabs {
    position: sticky;
    top: 58px;
    z-index: 20;
    margin: 0;
    padding: 0 10px;
    background: rgba(255, 255, 255, .96);
  }

  .feed-tabs button {
    min-height: 44px;
  }

  .discoveries-strip {
    margin: 0;
    padding: 14px 0 10px;
    border-bottom: 1px solid var(--stitch-border);
  }

  .discoveries-heading {
    padding: 0 14px;
  }

  .community-mobile-stories {
    padding: 0 12px;
  }

  .mobile-story-item {
    flex-basis: 74px;
    width: 74px;
    height: auto;
    padding: 0;
    justify-items: center;
    overflow: visible;
    color: var(--stitch-text);
    background: transparent !important;
    box-shadow: none;
  }

  .mobile-story-item > span {
    width: 56px;
    height: 56px;
    margin: 0;
    border-width: 3px;
  }

  .mobile-story-item small {
    max-width: 72px;
    color: var(--stitch-muted);
    font-size: 10px;
  }

  .quick-composer {
    display: none;
  }

  .feed-list {
    gap: 10px;
    padding: 10px;
  }

  .community-post {
    border-radius: 12px;
  }

  .post-media {
    width: 100%;
    max-height: none;
    margin: 0;
    border-radius: 0;
    aspect-ratio: 4 / 5;
  }

  .post-actions {
    margin: 0;
  }

  .community-admin-app .community-topbar {
    height: 58px;
    min-height: 58px;
    padding: 0 14px;
  }

  .community-admin-app .admin-community-layout {
    padding: 58px 0 70px;
  }

  .community-admin-app .admin-section-nav {
    display: none;
  }

  .community-admin-app .admin-community-content {
    padding: 18px 14px 40px;
  }

  .community-admin-app .admin-mobile-nav {
    position: fixed;
    inset: auto 0 0;
    z-index: 60;
    display: flex;
    gap: 4px;
    padding: 7px;
    overflow-x: auto;
    border-top: 1px solid var(--stitch-border);
    background: #fff;
  }

  .community-admin-app .admin-mobile-nav .community-view-button {
    min-width: max-content;
    border: 0;
    border-radius: 8px;
  }

  .community-admin-app .admin-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .community-dialog {
    width: 100vw;
    max-height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .composer-layout {
    grid-template-columns: 1fr;
  }
}

.dls-community-shell,
.dls-community-shell button,
.dls-community-shell input,
.dls-community-shell select,
.dls-community-shell textarea {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dls-community-shell {
  color: var(--community-text);
  background-color: var(--community-page);
}

.community-workspace-hero,
.community-page-header,
.profile-hero {
  background: var(--community-navy);
}

.community-workspace-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 124px;
  margin-top: 22px;
  padding: 22px 28px;
  border-radius: 24px;
}

.community-workspace-hero h1 {
  margin: 8px 0 4px;
  font-size: 34px;
}

.community-workspace-hero p {
  max-width: 700px;
  font-size: 14px;
  line-height: 1.5;
}

.community-workspace-pill,
.community-workspace-scope {
  padding: 7px 11px;
  font-size: 12px;
}

.community-hero-actions {
  align-items: flex-end;
  min-width: 220px;
}

.community-layout {
  grid-template-columns: 196px minmax(0, 660px) minmax(250px, 300px);
  gap: 24px;
}

.community-mobile-brand,
.community-mobile-stories,
.profile-content-tabs,
.profile-media-grid {
  display: none;
}

.community-section-nav,
.rail-card,
.community-post,
.community-panel,
.feature-card,
.collection-card,
.community-empty {
  border-color: var(--community-border);
  border-radius: 24px;
  box-shadow: var(--community-shadow);
}

.community-section-nav {
  padding: 16px;
}

.community-discovery-card {
  display: grid;
  gap: 10px;
}

.rail-destination {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--community-text);
  text-align: left;
  transition: background-color 150ms ease, transform 150ms ease;
}

.rail-destination:hover {
  background: var(--community-teal-soft);
  transform: translateY(-1px);
}

.rail-destination > .material-symbols-outlined {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: #f1f5f9;
  color: var(--community-teal);
}

.rail-destination span {
  display: grid;
  gap: 2px;
}

.rail-destination small {
  color: var(--community-muted);
  font-size: 11px;
  line-height: 1.35;
}

.community-view-button {
  min-height: 46px;
  border-radius: 12px;
}

.community-view-button.active {
  background: var(--community-teal-soft);
  color: var(--community-teal);
}

.feed-tabs {
  border-color: var(--community-border);
  border-radius: 16px;
}

.feed-tabs button {
  border-radius: 11px;
}

.feed-tabs button.active,
.community-button.primary {
  background: var(--community-teal);
}

.quick-composer > button {
  border-color: var(--community-border);
  border-radius: 18px;
}

.community-post {
  overflow: clip;
}

.post-copy h2,
.feature-card h2,
.collection-card h2,
.community-panel h2 {
  color: var(--community-teal);
}

.post-media {
  aspect-ratio: 16 / 9;
}

.community-content[data-community-view="shorts"] .feed-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.community-content[data-community-view="shorts"] .community-post {
  align-self: start;
}

.community-content[data-community-view="shorts"] .post-media {
  aspect-ratio: 9 / 16;
  max-height: 620px;
}

.community-content[data-community-view="saved"] .collection-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.community-content[data-community-view="saved"] .collection-card {
  min-height: 190px;
  background: linear-gradient(145deg, #fff, #f4fbfb);
}

.community-content[data-community-view="groups"] .feature-card {
  min-height: 300px;
}

.community-content[data-community-view="challenges"] .feature-card.challenge {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  background: linear-gradient(145deg, #fff 55%, #f2edff);
}

.community-content[data-community-view="challenges"] .feature-card.challenge::after {
  position: absolute;
  right: -38px;
  bottom: -38px;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: rgba(109, 40, 217, .08);
  content: "";
}

.community-content[data-community-view="profile"] .profile-hero {
  border-radius: 24px;
}

.profile-cover {
  display: none;
}

.community-content[data-community-view="search"] .community-search {
  min-height: 62px;
  border-radius: 18px;
}

.community-content[data-community-view="search"] .search-groups > section,
.community-content[data-community-view="notifications"] .notification-list,
.community-content[data-community-view="moderation"] .moderation-list,
.community-content[data-community-view="settings"] .settings-form {
  padding: 22px;
  border: 1px solid var(--community-border);
  border-radius: 24px;
  background: var(--community-surface);
  box-shadow: var(--community-shadow);
}

.community-content[data-community-view="notifications"] .notification-item,
.community-content[data-community-view="moderation"] .moderation-item {
  border-radius: 16px;
}

.community-content[data-community-view="settings"] .setting-toggle {
  min-height: 96px;
  border-radius: 16px;
}

.community-dialog {
  border-color: var(--community-border);
  border-radius: 24px;
  color: var(--community-text);
}

.community-dialog-head h2 {
  color: var(--community-teal);
}

.community-composer-dialog {
  width: min(1120px, calc(100vw - 32px));
  padding: 0;
  overflow: hidden;
}

.community-composer-dialog .community-dialog-head {
  margin: 0;
  padding: 24px 28px 20px;
  background: var(--community-surface);
}

.community-composer {
  gap: 0;
}

.composer-type-picker {
  display: flex;
  gap: 8px;
  padding: 16px 28px;
  overflow-x: auto;
  border-bottom: 1px solid var(--community-border);
  background: #f8fafc;
}

.composer-type-picker > button,
.composer-more-type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 112px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--community-border);
  border-radius: 999px;
  background: var(--community-surface);
  color: var(--community-text);
  font-weight: 700;
}

.composer-type-picker > button:hover,
.composer-type-picker > button.active {
  border-color: var(--community-teal);
  background: var(--community-teal);
  color: #fff;
}

.composer-more-type {
  position: relative;
}

.composer-more-type select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.composer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(270px, .7fr);
  min-height: 520px;
}

.composer-creation-panel {
  min-width: 0;
  padding: 28px;
  background: var(--community-surface);
}

.composer-settings-panel {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 28px;
  border-left: 1px solid var(--community-border);
  background: #f8fafc;
}

.composer-settings-panel h3 {
  margin: 0;
  color: var(--community-navy);
  font-size: 18px;
}

.composer-settings-panel small {
  color: var(--community-muted);
  font-weight: 500;
}

.composer-guidance {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding: 16px;
  border-radius: 16px;
  background: var(--community-teal-soft);
}

.composer-guidance > span {
  display: grid;
  flex: 0 0 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--community-teal);
  color: #fff;
}

.composer-guidance strong {
  color: var(--community-teal);
}

.composer-guidance p {
  margin: 3px 0 0;
  color: var(--community-muted);
  font-size: 13px;
  line-height: 1.45;
}

.composer-fields {
  display: grid;
  gap: 18px;
}

.composer-fields label {
  gap: 9px;
}

.optional-label {
  color: var(--community-muted);
  font-size: 12px;
  font-weight: 600;
}

.composer-dropzone {
  position: relative;
  display: grid !important;
  min-height: 230px;
  align-content: center;
  justify-items: center;
  gap: 8px !important;
  padding: 24px;
  border: 2px dashed #b8c7d3;
  border-radius: 20px;
  background: #f8fafc;
  color: var(--community-teal) !important;
  text-align: center;
  cursor: pointer;
}

.composer-dropzone:hover {
  border-color: var(--community-purple);
  background: #faf8ff;
}

.composer-dropzone .material-symbols-outlined {
  font-size: 40px;
}

.composer-dropzone span {
  color: var(--community-muted);
  font-size: 13px;
  font-weight: 500;
}

.composer-dropzone input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.composer-dropzone.compact {
  min-height: 142px;
}

.video-format-picker {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 4px;
  border-radius: 999px;
  background: #eef2f6;
}

.video-format-picker button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--community-muted);
  font-weight: 700;
}

.video-format-picker button.active {
  background: var(--community-surface);
  color: var(--community-teal);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}

.composer-type-video .video-dropzone {
  min-height: 280px;
  background: var(--community-navy);
  color: #fff !important;
}

.composer-type-video .video-dropzone span {
  color: rgba(255, 255, 255, .7);
}

.poll-option-editor {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.composer-safety-note {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: #eefbf4;
  color: #166534;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.composer-media-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.composer-media-preview figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--community-border);
  border-radius: 16px;
  background: var(--community-navy);
}

.composer-media-preview img,
.composer-media-preview video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.composer-media-preview figcaption {
  padding: 9px 12px;
  overflow: hidden;
  background: #fff;
  color: var(--community-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-composer > .form-status {
  margin: 0 28px;
}

.composer-actions {
  padding: 20px 28px 24px;
  border-top: 1px solid var(--community-border);
  background: var(--community-surface);
}

@media (max-width: 1100px) {
  .community-layout {
    grid-template-columns: 176px minmax(0, 1fr);
  }
}

@media (max-width: 800px) {
  .dls-community-shell .dls-sidebar {
    display: none;
  }

  .dls-community-main {
    margin-left: 0;
  }

  .composer-layout {
    grid-template-columns: 1fr;
  }

  .composer-settings-panel {
    border-top: 1px solid var(--community-border);
    border-left: 0;
  }

  .community-content[data-community-view="shorts"] .feed-list,
  .community-content[data-community-view="saved"] .collection-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .dls-community-main {
    padding: 0 0 94px;
  }

  .community-topbar {
    position: sticky;
    top: 0;
    min-height: 62px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--community-border);
    background: rgba(255, 255, 255, .96);
    gap: 8px;
  }

  .community-mobile-brand {
    display: grid;
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--community-navy);
    text-align: left;
  }

  .community-mobile-brand span {
    color: var(--community-teal);
    font-size: 12px;
    font-weight: 800;
  }

  .community-mobile-brand strong {
    font-size: 17px;
    line-height: 1.1;
  }

  .community-global-search {
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .community-top-actions {
    gap: 6px;
  }

  .community-top-actions .community-button {
    display: none;
  }

  .community-workspace-scope {
    width: 100%;
    white-space: normal;
  }

  .community-hero-actions {
    width: 100%;
  }

  .community-workspace-hero {
    display: none;
  }

  .community-mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    top: auto;
    z-index: 80;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    min-height: 72px;
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
    overflow: visible;
    border-top: 1px solid var(--community-border);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -8px 28px rgba(17, 24, 47, .08);
    backdrop-filter: blur(18px);
  }

  .community-mobile-nav .community-view-button {
    display: grid;
    justify-items: center;
    gap: 2px;
    min-width: 0;
    min-height: 54px;
    padding: 4px;
    border-radius: 14px;
    color: var(--community-muted);
    font-size: 11px;
    text-align: center;
  }

  .community-mobile-nav .community-view-button .material-symbols-outlined {
    font-size: 24px;
  }

  .community-mobile-nav .community-view-button.mobile-create {
    width: 54px;
    height: 54px;
    min-height: 54px;
    margin: -18px auto 0;
    border-radius: 50%;
    background: var(--community-teal);
    color: #fff;
    box-shadow: 0 8px 22px rgba(0, 78, 83, .28);
  }

  .community-mobile-nav .community-view-button.mobile-create span:last-child {
    display: none;
  }

  .community-layout {
    padding-top: 0;
  }

  .community-content {
    width: 100%;
  }

  .community-mobile-stories {
    display: flex;
    gap: 14px;
    padding: 14px 14px 12px;
    overflow-x: auto;
    border-bottom: 1px solid var(--community-border);
    background: #fff;
    scrollbar-width: none;
  }

  .community-mobile-stories::-webkit-scrollbar {
    display: none;
  }

  .mobile-story-item {
    display: grid;
    flex: 0 0 68px;
    justify-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--community-text);
  }

  .mobile-story-item > span {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--community-teal-soft);
    box-shadow: 0 0 0 2px var(--community-purple);
    color: var(--community-teal);
    font-size: 18px;
    font-weight: 800;
  }

  .mobile-story-item small {
    width: 68px;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-story-item.add-story > span {
    box-shadow: 0 0 0 2px var(--community-teal);
  }

  .feed-tabs {
    margin: 10px 12px;
    padding: 4px;
    border-radius: 999px;
  }

  .feed-tabs button {
    padding: 9px 13px;
    border-radius: 999px;
  }

  .quick-composer {
    margin: 10px 12px 14px;
  }

  .quick-composer > button {
    padding: 11px 13px;
    border-radius: 18px;
  }

  .feed-list {
    gap: 10px;
  }

  .community-post {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .post-head {
    padding: 14px 15px;
  }

  .post-copy {
    padding: 0 15px 14px;
  }

  .post-media {
    aspect-ratio: 4 / 5;
    max-height: none;
  }

  .post-meta {
    padding: 11px 15px;
  }

  .post-actions {
    justify-content: space-around;
  }

  .post-actions > button {
    flex: 0 1 auto !important;
    min-width: 48px;
    padding-inline: 8px;
    font-size: 0;
  }

  .post-actions > button .material-symbols-outlined,
  .post-actions > button span {
    font-size: 21px;
  }

  .community-page-header {
    margin: 12px;
    padding: 22px;
    border-radius: 20px;
  }

  .community-page-header h1 {
    font-size: 28px;
  }

  .community-content[data-community-view="shorts"] {
    min-height: calc(100vh - 134px);
    background: #050b12;
  }

  .community-content[data-community-view="shorts"] .community-page-header {
    display: none;
  }

  .community-content[data-community-view="shorts"] .feed-list {
    gap: 0;
  }

  .community-content[data-community-view="shorts"] .community-post {
    min-height: calc(100vh - 134px);
    border: 0;
    background: #050b12;
    color: #fff;
  }

  .community-content[data-community-view="shorts"] .post-head,
  .community-content[data-community-view="shorts"] .post-copy,
  .community-content[data-community-view="shorts"] .post-meta,
  .community-content[data-community-view="shorts"] .post-actions {
    position: relative;
    z-index: 2;
    background: transparent;
    color: #fff;
  }

  .community-content[data-community-view="shorts"] .post-media {
    width: 100%;
    max-height: calc(100vh - 134px);
    aspect-ratio: 9 / 16;
    object-fit: cover;
  }

  .community-content[data-community-view="shorts"] .post-actions {
    border-top-color: rgba(255, 255, 255, .2);
  }

  .community-content[data-community-view="shorts"] .post-actions > button {
    background: transparent;
    color: #fff;
  }

  .community-content[data-community-view="profile"] {
    padding-bottom: 18px;
  }

  .community-content[data-community-view="profile"] .profile-hero {
    position: relative;
    display: block;
    padding: 0 18px 22px;
    border-radius: 0 0 24px 24px;
    background: #fff;
    color: var(--community-text);
    box-shadow: none;
  }

  .profile-cover {
    display: block;
    height: 150px;
    margin: 0 -18px 0;
    background: linear-gradient(135deg, var(--community-teal), #16858c 58%, var(--community-purple));
  }

  .profile-avatar {
    width: 92px;
    height: 92px;
    margin-top: -46px;
    border: 5px solid #fff;
  }

  .profile-details {
    margin-top: 10px;
  }

  .profile-hero h1 {
    color: var(--community-navy);
    font-size: 27px;
  }

  .profile-hero p {
    color: var(--community-muted);
  }

  .profile-counts {
    justify-content: space-between;
    margin: 18px 0;
  }

  .community-content[data-community-view="profile"] .community-panel {
    margin: 12px;
  }

  .profile-content-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0 12px;
    border-bottom: 1px solid var(--community-border);
  }

  .profile-content-tabs button {
    padding: 13px 8px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--community-muted);
    font-weight: 700;
  }

  .profile-content-tabs button.active {
    border-color: var(--community-teal);
    color: var(--community-teal);
  }

  .profile-media-grid {
    display: grid;
    min-height: 210px;
    margin: 12px;
  }

  .profile-media-empty {
    display: grid;
    place-items: center;
    align-content: center;
    gap: 6px;
    color: var(--community-muted);
    text-align: center;
  }

  .community-composer-dialog {
    width: calc(100vw - 16px);
    border-radius: 18px;
  }

  .community-composer-dialog .community-dialog-head,
  .composer-creation-panel,
  .composer-settings-panel {
    padding: 20px;
  }

  .composer-type-picker {
    padding: 12px 20px;
  }

  .composer-type-picker > button,
  .composer-more-type {
    min-width: 96px;
  }

  .poll-option-editor,
  .composer-media-preview {
    grid-template-columns: 1fr;
  }

  .community-composer > .form-status {
    margin: 0 20px;
  }

  .composer-actions {
    padding: 16px 20px 20px;
  }
}

/* School administrator Community Control Center. Adapted from the five
   individualized Stitch admin screens; no feed styles are reused here. */
.community-admin-app {
  --admin-navy: #11182f;
  --admin-teal: #004e53;
  --admin-purple: #6d28d9;
  --admin-border: #dce3eb;
  max-width: 1460px;
  margin: 0 auto;
}

.admin-control-hero {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: flex-end;
  margin: 22px 0;
  padding: 30px 34px;
  color: #fff;
  background: var(--admin-navy);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(17,24,47,.13);
}

.admin-control-hero h1 {
  margin: 10px 0 6px;
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: 0;
}

.admin-control-hero p {
  max-width: 780px;
  margin: 0;
  color: #cbd5e1;
}

.admin-hero-status,
.admin-school-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
}

.admin-hero-status {
  padding: 10px 14px;
  color: #d1fae5;
  background: rgba(16,185,129,.15);
  border: 1px solid rgba(167,243,208,.28);
  border-radius: 8px;
  font-weight: 700;
}

.admin-school-chip {
  max-width: 260px;
  overflow: hidden;
  padding: 9px 12px;
  color: var(--admin-teal);
  background: #eefbf9;
  border: 1px solid #c7ece8;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
}

.admin-community-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.admin-section-nav {
  position: sticky;
  top: 88px;
  border-radius: 12px;
}

.admin-section-nav .community-view-button {
  min-height: 44px;
  border-radius: 8px;
}

.admin-community-content {
  min-width: 0;
}

.admin-mobile-nav {
  display: none;
}

.admin-page-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--admin-border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(15,23,42,.05);
}

.admin-page-heading h1 {
  margin: 4px 0;
  color: var(--admin-navy);
  font-size: clamp(26px, 3vw, 38px);
}

.admin-page-heading p {
  margin: 0;
  color: #64748b;
}

.health-score {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  min-width: 150px;
  padding: 14px 16px;
  color: #fff;
  background: var(--admin-teal);
  border-radius: 10px;
}

.health-score span {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.health-score strong {
  font-size: 34px;
}

.health-score small {
  margin-left: 5px;
}

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.admin-metric-grid.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-metric-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 96px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(15,23,42,.045);
}

.admin-metric-card > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--admin-teal);
  background: #e8f7f6;
  border-radius: 8px;
}

.admin-metric-card small,
.admin-metric-card strong {
  display: block;
}

.admin-metric-card small {
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.admin-metric-card strong {
  margin-top: 3px;
  color: var(--admin-navy);
  font-size: 27px;
}

.admin-metric-card.warning > span {
  color: #92400e;
  background: #fef3c7;
}

.admin-metric-card.danger > span {
  color: #b91c1c;
  background: #fee2e2;
}

.admin-dashboard-grid,
.admin-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.admin-dashboard-grid > .community-panel,
.admin-analytics-grid > .community-panel,
.admin-controls-form > .community-panel {
  margin: 0;
  border-radius: 12px;
}

.admin-panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.admin-panel-heading h2,
.admin-controls-form h2,
.admin-analytics-grid h2 {
  margin: 3px 0 0;
  color: var(--admin-navy);
  font-size: 20px;
}

.admin-bar-chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
  align-items: end;
  height: 210px;
  padding-top: 16px;
}

.admin-bar-chart > div {
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 5px;
  align-items: end;
  height: 100%;
  text-align: center;
}

.admin-bar-chart span {
  display: block;
  min-height: 4px;
  background: linear-gradient(180deg, #7c3aed, #004e53);
  border-radius: 5px 5px 2px 2px;
}

.admin-bar-chart strong {
  font-size: 12px;
}

.admin-bar-chart small {
  color: #64748b;
  font-size: 10px;
}

.admin-nova-summary {
  border-top: 4px solid var(--admin-purple) !important;
}

.admin-nova-summary ul {
  display: grid;
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.admin-nova-summary li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  align-items: start;
}

.admin-nova-summary li .community-icon {
  color: var(--admin-purple);
}

.admin-safety-snapshot {
  grid-column: 1 / -1;
}

.safety-stat-grid,
.admin-queue-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.safety-stat-grid .admin-metric-card {
  min-height: 80px;
}

.admin-data-list,
.admin-ranked-list {
  display: grid;
  gap: 0;
}

.admin-data-list > div,
.admin-ranked-list > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 54px;
  border-top: 1px solid #edf2f7;
}

.admin-data-list > div:first-child,
.admin-ranked-list > div:first-child {
  border-top: 0;
}

.admin-data-list small,
.admin-ranked-list em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
}

.admin-filter-bar {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin: 18px 0;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
}

.admin-filter-bar label,
.admin-controls-form label {
  display: grid;
  gap: 6px;
  color: var(--admin-navy);
  font-size: 12px;
  font-weight: 800;
}

.admin-queue-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 18px;
}

.admin-review-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid #e2e8f0;
}

.admin-review-row > div:last-child {
  display: flex;
  gap: 8px;
  align-items: center;
}

.admin-review-row p,
.admin-review-row small {
  display: block;
  margin: 5px 0 0;
  color: #64748b;
}

.admin-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-feature-grid article {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--admin-border);
  border-radius: 10px;
}

.admin-feature-grid h3,
.admin-feature-grid p {
  margin: 0;
}

.admin-feature-grid p {
  color: #64748b;
  font-size: 12px;
}

.admin-controls-form {
  display: grid;
  gap: 18px;
  margin: 18px 0 80px;
}

.admin-controls-form .settings-grid {
  margin: 16px 0;
}

.admin-sticky-save {
  position: sticky;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--admin-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15,23,42,.12);
  backdrop-filter: blur(14px);
}

.admin-sticky-save span {
  color: #64748b;
  font-size: 12px;
}

.admin-empty {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 24px;
  color: #64748b;
  text-align: center;
}

.admin-empty .community-icon {
  width: 28px;
  height: 28px;
  color: #059669;
}

.admin-empty strong {
  color: var(--admin-navy);
}

.admin-empty p {
  margin: 0;
}

@media (max-width: 1100px) {
  .admin-metric-grid,
  .admin-metric-grid.compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .safety-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .admin-control-hero,
  .admin-page-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-community-layout {
    display: block;
  }

  .admin-section-nav {
    display: none;
  }

  .admin-mobile-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-bottom: 16px;
    padding-bottom: 4px;
  }

  .admin-mobile-nav .community-view-button {
    flex: 0 0 auto;
    min-width: max-content;
  }

  .admin-dashboard-grid,
  .admin-analytics-grid {
    grid-template-columns: 1fr;
  }

  .admin-safety-snapshot {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .admin-control-hero,
  .admin-page-heading,
  .admin-dashboard-grid > .community-panel,
  .admin-analytics-grid > .community-panel,
  .admin-controls-form > .community-panel {
    border-radius: 8px;
  }

  .admin-metric-grid,
  .admin-metric-grid.compact,
  .safety-stat-grid,
  .admin-queue-summary,
  .admin-feature-grid {
    grid-template-columns: 1fr;
  }

  .admin-filter-bar,
  .admin-review-row {
    grid-template-columns: 1fr;
  }

  .admin-review-row > div:last-child {
    align-items: stretch;
  }

  .admin-review-row .community-button {
    flex: 1;
  }

  .admin-sticky-save {
    align-items: stretch;
    flex-direction: column;
  }
}

/*
 * Stitch social composition v5.
 * These rules intentionally replace the earlier dashboard-derived composition
 * while retaining the DLS Community data and safety layer.
 */
.dls-community-shell .dls-sidebar {
  display: none;
}

.dls-community-main {
  margin-left: 0;
  padding: 0 24px 56px;
}

.dls-community-page {
  max-width: none;
}

.community-app {
  min-height: 100vh;
}

.community-topbar {
  width: min(100%, 1280px);
  min-height: 72px;
  margin: 0 auto;
  padding: 10px 20px;
  border-right: 1px solid var(--community-border);
  border-bottom: 1px solid var(--community-border);
  border-left: 1px solid var(--community-border);
  border-radius: 0 0 20px 20px;
  background: rgba(255, 255, 255, .96);
}

.community-mobile-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--community-navy);
  text-align: left;
}

.community-mobile-brand > .community-icon {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 9px;
  place-items: center;
  border-radius: 12px;
  background: var(--community-navy);
  color: #fff;
}

.community-mobile-brand span {
  display: none;
}

.community-mobile-brand strong {
  font-size: 17px;
  letter-spacing: 0;
}

.community-global-search {
  width: min(48vw, 540px);
  min-height: 44px;
  margin-inline: auto;
  border-radius: 999px;
  background: #f6f3f5;
  box-shadow: none;
}

.community-icon,
[data-lucide] {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.dls-community-shell .material-symbols-outlined {
  display: none !important;
}

.community-workspace-hero {
  display: none;
}

.community-layout {
  grid-template-columns: 220px minmax(0, 640px) minmax(260px, 300px);
  width: min(100%, 1220px);
  margin: 0 auto;
  padding-top: 24px;
}

.community-section-nav {
  top: 96px;
  gap: 4px;
  padding: 12px;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(17, 24, 47, .04);
}

.community-section-nav h2 {
  padding: 8px 12px 5px;
  color: var(--community-muted);
  font-size: 11px;
  letter-spacing: .12em;
}

.community-view-button {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
}

.community-view-button .community-icon {
  width: 19px;
  height: 19px;
}

.community-right-rail {
  top: 96px;
  gap: 14px;
}

.rail-card {
  padding: 16px;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(17, 24, 47, .04);
}

.feed-tabs {
  padding: 4px;
  border-radius: 999px;
  box-shadow: none;
}

.feed-tabs button {
  padding: 9px 12px;
  border-radius: 999px;
  font-size: 13px;
}

.quick-composer {
  margin: 12px 0 16px;
}

.quick-composer > button {
  min-height: 70px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(17, 24, 47, .04);
}

.community-post {
  border-radius: 24px;
  box-shadow: 0 4px 20px rgba(17, 24, 47, .04);
}

.post-head {
  padding: 18px 20px 14px;
}

.post-copy {
  padding: 0 20px 18px;
}

.post-copy h2 {
  margin-bottom: 8px;
  color: var(--community-navy);
  font-size: 20px;
}

.post-copy p {
  color: #475569;
  line-height: 1.55;
}

.post-media {
  max-height: 600px;
  aspect-ratio: auto;
  object-fit: cover;
}

.post-actions {
  padding: 4px 8px;
}

.post-actions > button {
  min-height: 46px;
  border-radius: 999px;
  font-size: 13px;
}

.community-content[data-community-view="shorts"] .community-page-header {
  padding: 22px 24px;
  border-radius: 20px;
}

.community-content[data-community-view="shorts"] .feed-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.community-content[data-community-view="shorts"] .community-post {
  overflow: hidden;
  border-radius: 24px;
  background: #050b12;
  color: #fff;
}

.community-content[data-community-view="shorts"] .post-head,
.community-content[data-community-view="shorts"] .post-copy,
.community-content[data-community-view="shorts"] .post-meta,
.community-content[data-community-view="shorts"] .post-actions {
  background: transparent;
  color: #fff;
}

.community-content[data-community-view="shorts"] .post-copy h2,
.community-content[data-community-view="shorts"] .post-copy p,
.community-content[data-community-view="shorts"] .author-button,
.community-content[data-community-view="shorts"] .author-button small {
  color: #fff;
}

.community-content[data-community-view="shorts"] .post-media {
  width: 100%;
  max-height: none;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

.community-content[data-community-view="profile"] .profile-hero {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 28px 28px;
  border-radius: 24px;
  background: #fff;
  color: var(--community-text);
}

.profile-cover {
  display: block;
  height: 180px;
  margin: 0 -28px -54px;
  background: linear-gradient(135deg, var(--community-teal), #19848a 58%, var(--community-purple));
}

.profile-avatar {
  position: relative;
  width: 112px;
  height: 112px;
  border-color: #fff;
}

.profile-details {
  position: relative;
  margin-top: 14px;
}

.profile-hero h1 {
  color: var(--community-navy);
}

.profile-hero p {
  color: var(--community-muted);
}

.profile-content-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 16px;
  border-bottom: 1px solid var(--community-border);
}

.profile-content-tabs button {
  min-height: 48px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--community-muted);
  font-weight: 700;
}

.profile-content-tabs button.active {
  border-bottom-color: var(--community-teal);
  color: var(--community-teal);
}

.profile-media-grid {
  display: grid;
  min-height: 250px;
  place-items: center;
}

.profile-media-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--community-muted);
  text-align: center;
}

@media (max-width: 1100px) {
  .community-layout {
    grid-template-columns: 200px minmax(0, 640px);
  }

  .community-right-rail {
    display: none;
  }
}

@media (max-width: 800px) {
  .dls-community-main {
    padding-inline: 0;
  }

  .community-layout {
    display: block;
    width: 100%;
    padding-top: 0;
  }

  .community-section-nav {
    display: none;
  }
}

@media (max-width: 600px) {
  .dls-community-main {
    padding: 0 0 calc(76px + env(safe-area-inset-bottom));
  }

  .community-topbar {
    min-height: 64px;
    padding: 8px 14px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .community-mobile-brand > .community-icon {
    width: 34px;
    height: 34px;
    padding: 8px;
    border-radius: 10px;
  }

  .community-mobile-brand strong {
    font-size: 16px;
  }

  .community-global-search,
  .icon-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
  }

  .community-global-search span {
    display: none;
  }

  .community-top-actions {
    gap: 5px;
  }

  .community-mobile-nav {
    min-height: 68px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }

  .community-mobile-nav .community-view-button {
    min-height: 50px;
    padding: 3px 2px;
    font-size: 10px;
  }

  .community-mobile-nav .community-view-button .community-icon {
    width: 22px;
    height: 22px;
  }

  .community-mobile-nav .community-view-button.mobile-create {
    width: 52px;
    height: 52px;
    min-height: 52px;
    margin-top: -17px;
  }

  .community-mobile-stories {
    padding: 12px 14px;
  }

  .feed-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 10px 12px;
    overflow: hidden;
  }

  .feed-tabs button {
    min-width: 0;
    padding-inline: 4px;
    font-size: 11px;
  }

  .quick-composer > button {
    min-height: 62px;
  }

  .community-post {
    border-radius: 0;
  }

  .post-head {
    padding: 14px;
  }

  .post-copy {
    padding: 0 14px 14px;
  }

  .post-media {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  .post-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 42px;
    padding: 4px 6px;
    overflow: hidden;
  }

  .post-actions > button {
    min-width: 0;
    padding: 8px 4px;
    font-size: 0;
  }

  .post-actions > button .community-icon {
    width: 22px;
    height: 22px;
  }

  .community-content[data-community-view="shorts"] {
    min-height: calc(100dvh - 132px);
    background: #050b12;
  }

  .community-content[data-community-view="shorts"] .community-page-header {
    display: none;
  }

  .community-content[data-community-view="shorts"] .feed-list {
    display: block;
  }

  .community-content[data-community-view="shorts"] .community-post {
    position: relative;
    min-height: calc(100dvh - 132px);
    border-radius: 0;
  }

  .community-content[data-community-view="shorts"] .post-media {
    width: 100%;
    height: calc(100dvh - 132px);
    aspect-ratio: auto;
    object-fit: cover;
  }

  .community-content[data-community-view="shorts"] .post-copy {
    position: absolute;
    right: 70px;
    bottom: 74px;
    left: 14px;
    z-index: 3;
    padding: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .7);
  }

  .community-content[data-community-view="shorts"] .post-head {
    position: absolute;
    right: 64px;
    bottom: 178px;
    left: 14px;
    z-index: 3;
    padding: 0;
  }

  .community-content[data-community-view="shorts"] .post-copy h2 {
    margin-bottom: 4px;
    font-size: 18px;
    line-height: 1.2;
  }

  .community-content[data-community-view="shorts"] .post-copy p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .community-content[data-community-view="shorts"] .post-meta {
    display: none;
  }

  .community-content[data-community-view="shorts"] .post-actions {
    position: absolute;
    right: 8px;
    bottom: 60px;
    z-index: 4;
    display: grid;
    grid-template-columns: 48px;
    gap: 8px;
    border: 0;
  }

  .community-content[data-community-view="shorts"] .post-actions > button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .44);
    color: #fff;
    backdrop-filter: blur(12px);
  }

  .community-content[data-community-view="profile"] .profile-hero {
    padding: 0 18px 22px;
    border-radius: 0 0 24px 24px;
  }

  .profile-cover {
    height: 150px;
    margin: 0 -18px -46px;
  }

  .profile-avatar {
    width: 92px;
    height: 92px;
  }

  .profile-hero h1 {
    margin: 5px 0 2px;
    font-size: 28px;
  }

  .profile-counts {
    justify-content: space-between;
    max-width: 320px;
  }
}

/* Stitch teacher Community layer: shared feed with role-specific controls. */
.teacher-post-tools {
  margin: 0 20px 14px;
  border: 1px solid #dce3eb;
  border-radius: 12px;
  background: #f8fafc;
}

.teacher-post-tools summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 14px;
  color: #004e53;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.teacher-post-tools summary::-webkit-details-marker {
  display: none;
}

.teacher-post-tools summary::after {
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
  transition: transform 150ms ease;
}

.teacher-post-tools[open] summary::after {
  transform: rotate(225deg);
}

.teacher-post-tool-menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 12px 12px;
}

.teacher-post-tool-menu button,
.teacher-quick-actions button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 42px;
  padding: 9px 11px;
  color: #11182f;
  font: 700 13px/1.25 Inter, sans-serif;
  text-align: left;
  background: #fff;
  border: 1px solid #dce3eb;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.teacher-post-tool-menu button:hover,
.teacher-quick-actions button:hover {
  border-color: #6d28d9;
  box-shadow: 0 4px 12px rgba(17, 24, 47, .08);
  transform: translateY(-1px);
}

.teacher-post-tool-menu button.danger {
  color: #b42318;
}

.teacher-post-tool-menu .community-icon,
.teacher-quick-actions .community-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #004e53;
}

.teaching-hub-page,
.post-analytics-page {
  display: grid;
  gap: 18px;
}

.teacher-hub-header,
.post-analytics-header {
  display: flex;
  align-items: end;
  gap: 24px;
  justify-content: space-between;
  padding: 24px 26px;
  color: #fff;
  background: #11182f;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(17, 24, 47, .12);
}

.teacher-hub-header h1,
.post-analytics-header h1 {
  margin: 4px 0 6px;
  color: #fff;
  font: 800 clamp(30px, 4vw, 44px)/1.05 Inter, sans-serif;
}

.teacher-hub-header p,
.post-analytics-header p {
  max-width: 760px;
  margin: 0;
  color: #dce3eb;
}

.teacher-hub-header .community-kicker,
.post-analytics-header .community-kicker {
  color: #a78bfa;
}

.teacher-hub-header label {
  display: grid;
  gap: 7px;
  min-width: 210px;
  color: #fff;
  font-weight: 800;
}

.teacher-hub-header select {
  color: #11182f;
  background: #fff;
  border: 0;
}

.teacher-pulse-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #dce3eb;
  border-left: 5px solid #6d28d9;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(17, 24, 47, .06);
}

.teacher-pulse-card h2,
.teacher-section-heading h2,
.teacher-hub-rail h2,
.post-assignment-panel h2 {
  margin: 3px 0 5px;
  color: #11182f;
  font: 800 21px/1.2 Inter, sans-serif;
}

.teacher-pulse-card p,
.post-assignment-panel p {
  margin: 0;
  color: #64748b;
}

.teacher-pulse-icon {
  display: grid;
  width: 48px;
  height: 48px;
  color: #6d28d9;
  background: #ede9fe;
  border-radius: 12px;
  place-items: center;
}

.teacher-live-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  color: #0f766e;
  font: 800 12px/1 Inter, sans-serif;
}

.teacher-live-status i {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(34, 197, 94, .12);
}

.teacher-metric-grid,
.post-analytics-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.teacher-metric-card,
.post-analytics-metrics article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 16px;
  background: #fff;
  border: 1px solid #dce3eb;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(17, 24, 47, .04);
}

.teacher-metric-card .community-icon,
.post-analytics-metrics .community-icon {
  width: 21px;
  height: 21px;
  color: #004e53;
}

.teacher-metric-card span,
.post-analytics-metrics span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.teacher-metric-card strong,
.post-analytics-metrics strong {
  color: #11182f;
  font: 800 27px/1 Inter, sans-serif;
}

.teaching-hub-grid,
.post-analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr);
  gap: 18px;
  align-items: start;
}

.community-panel.teacher-activity-panel,
.community-panel.teacher-insights-card,
.community-panel.teacher-quick-actions,
.community-panel.teacher-moderation-panel,
.community-panel.teacher-participation-panel,
.community-panel.post-assignment-panel {
  padding: 20px;
  border-radius: 12px;
}

.teacher-hub-rail {
  display: grid;
  gap: 18px;
}

.teacher-section-heading {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.teacher-section-heading > span {
  padding: 7px 10px;
  color: #6d28d9;
  font-size: 12px;
  font-weight: 800;
  background: #ede9fe;
  border-radius: 999px;
}

.teacher-activity-item,
.teacher-review-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid #e2e8f0;
}

.teacher-activity-icon {
  display: grid;
  width: 40px;
  height: 40px;
  color: #004e53;
  background: #e6f7f6;
  border-radius: 10px;
  place-items: center;
}

.teacher-activity-item strong,
.teacher-review-item strong {
  display: block;
  color: #11182f;
}

.teacher-activity-item p,
.teacher-review-item p {
  display: -webkit-box;
  overflow: hidden;
  margin: 3px 0;
  color: #64748b;
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.teacher-activity-item small,
.teacher-review-item small {
  color: #8491a3;
}

.teacher-insights-card {
  border-top: 4px solid #6d28d9 !important;
}

.teacher-insights-card ul {
  display: grid;
  gap: 10px;
  margin: 14px 0 18px;
  padding: 0;
  list-style: none;
}

.teacher-insights-card li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  color: #334155;
  font-size: 13px;
}

.teacher-insights-card li .community-icon {
  width: 17px;
  color: #6d28d9;
  flex: 0 0 auto;
}

.teacher-quick-actions {
  display: grid;
  gap: 8px;
}

.teacher-quick-actions h2 {
  margin-bottom: 8px;
}

.teacher-review-item {
  grid-template-columns: minmax(0, 1fr) auto;
}

.teacher-review-item > div:last-child {
  display: flex;
  gap: 8px;
}

.post-analytics-header {
  align-items: center;
}

.post-analytics-header > div {
  flex: 1;
}

.post-analytics-header > .community-button {
  color: #fff;
  background: transparent;
  border-color: rgba(255,255,255,.3);
}

.post-analytics-header h1 {
  font-size: clamp(27px, 3vw, 38px);
}

.post-analytics-metrics {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.post-analytics-metrics article {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.post-analytics-metrics strong {
  grid-column: 1 / -1;
}

.teacher-participant-table {
  overflow-x: auto;
}

.teacher-participant-table > div {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) repeat(3, minmax(70px, .55fr)) minmax(110px, .8fr);
  gap: 10px;
  align-items: center;
  min-width: 620px;
  padding: 12px 4px;
  color: #475569;
  border-top: 1px solid #e2e8f0;
}

.teacher-participant-table .teacher-participant-head {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  border-top: 0;
}

.post-assignment-panel {
  display: grid;
  gap: 12px;
}

.post-assignment-panel label {
  display: grid;
  gap: 6px;
  color: #11182f;
  font-weight: 800;
}

.post-assignment-panel hr {
  width: 100%;
  border: 0;
  border-top: 1px solid #e2e8f0;
}

@media (max-width: 1180px) {
  .post-analytics-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .teacher-hub-header,
  .post-analytics-header,
  .teacher-pulse-card {
    align-items: stretch;
    flex-direction: column;
  }

  .teacher-hub-header,
  .post-analytics-header {
    display: flex;
  }

  .teacher-pulse-card {
    display: flex;
  }

  .teacher-live-status {
    align-self: flex-start;
  }

  .teaching-hub-grid,
  .post-analytics-grid {
    grid-template-columns: 1fr;
  }

  .teacher-post-tool-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-analytics-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .teacher-post-tools {
    margin: 0 12px 12px;
  }

  .teacher-post-tool-menu {
    grid-template-columns: 1fr;
  }

  .teacher-hub-header,
  .post-analytics-header,
  .teacher-pulse-card,
  .community-panel.teacher-activity-panel,
  .community-panel.teacher-insights-card,
  .community-panel.teacher-quick-actions,
  .community-panel.teacher-moderation-panel,
  .community-panel.teacher-participation-panel,
  .community-panel.post-assignment-panel {
    border-radius: 0;
  }

  .teacher-hub-header {
    padding: 20px 16px;
  }

  .teacher-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 12px;
  }

  .teacher-metric-card:nth-child(n+5) {
    display: none;
  }

  .teacher-activity-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .teacher-activity-item > button {
    grid-column: 2;
    justify-self: start;
  }

  .teacher-review-item {
    grid-template-columns: 1fr;
  }

  .teacher-review-item > div:last-child {
    justify-content: stretch;
  }

  .teacher-review-item .community-button {
    flex: 1;
  }
}

/* Social network edition
 * Visual direction: continuous timeline and media-first hierarchy informed by
 * the DLS Stitch Social Stream, X timelines, and Instagram desktop/mobile.
 */
.dls-community-shell .dls-sidebar {
  display: none;
}

.dls-community-main {
  margin-left: 0;
  padding: 0;
}

.dls-community-page {
  max-width: none;
}

.community-app:not(.community-admin-app) {
  --social-rail: #11182f;
  --social-rail-muted: #9ca8bd;
  --social-line: #e5e9ef;
  --social-hover: #f2f5f7;
  width: min(100%, 1440px);
  min-height: 100vh;
  margin-inline: auto;
  background: #fff;
}

.community-app:not(.community-admin-app) .community-topbar {
  min-height: 66px;
  padding: 8px max(18px, calc((100vw - 1380px) / 2));
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid var(--social-line);
  backdrop-filter: blur(16px);
}

.community-app:not(.community-admin-app) .community-global-search {
  width: min(46vw, 560px);
  min-height: 44px;
  margin-left: 254px;
  color: #6b7280;
  background: #f3f5f7;
  border: 1px solid transparent;
  border-radius: 8px;
}

.community-app:not(.community-admin-app) .community-global-search:hover,
.community-app:not(.community-admin-app) .community-global-search:focus-visible {
  background: #fff;
  border-color: #b8c3ce;
  box-shadow: 0 0 0 3px rgba(0, 78, 83, .08);
}

.community-app:not(.community-admin-app) .community-layout {
  grid-template-columns: 224px minmax(540px, 720px) 310px;
  gap: 0;
  width: min(100%, 1254px);
  min-height: calc(100vh - 66px);
  margin-inline: auto;
  padding: 0;
  border-right: 1px solid var(--social-line);
  border-left: 1px solid var(--social-line);
}

.community-app:not(.community-admin-app) .community-section-nav {
  position: sticky;
  top: 66px;
  display: flex;
  flex-direction: column;
  align-self: start;
  min-height: calc(100vh - 66px);
  padding: 18px 14px;
  color: #fff;
  background: var(--social-rail);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.community-network-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 2px 8px 22px;
}

.community-network-brand > .community-icon {
  width: 31px;
  height: 31px;
  color: #66e2d5;
}

.community-network-brand span {
  display: grid;
}

.community-network-brand strong {
  color: #fff;
  font-size: 18px;
}

.community-network-brand small {
  color: var(--social-rail-muted);
  font-size: 11px;
}

.community-app:not(.community-admin-app) .community-view-button {
  gap: 13px;
  min-height: 46px;
  padding: 10px 12px;
  color: #d7ddea;
  font-size: 14px;
  border-radius: 8px;
}

.community-app:not(.community-admin-app) .community-view-button .community-icon {
  width: 20px;
  height: 20px;
}

.community-app:not(.community-admin-app) .community-view-button:hover,
.community-app:not(.community-admin-app) .community-view-button.active {
  color: #fff;
  background: rgba(255, 255, 255, .11);
}

.community-app:not(.community-admin-app) .community-view-button.active {
  box-shadow: inset 3px 0 #66e2d5;
}

.community-rail-create {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  margin: 18px 6px 0;
  color: #09282b;
  font-weight: 800;
  background: #66e2d5;
  border: 0;
  border-radius: 999px;
}

.community-rail-create:hover {
  background: #8deade;
}

.community-exit-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: auto 6px 0;
  padding: 12px;
  color: var(--social-rail-muted);
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
}

.community-exit-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.community-app:not(.community-admin-app) .community-content {
  min-height: calc(100vh - 66px);
  background: #fff;
  border-right: 1px solid var(--social-line);
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--social-line);
}

.timeline-header > div {
  display: grid;
  gap: 2px;
}

.timeline-header strong {
  color: #11182f;
  font-size: 20px;
}

.timeline-header small {
  color: #758195;
}

.timeline-header > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #087443;
  font-size: 12px;
  font-weight: 800;
}

.community-app:not(.community-admin-app) .feed-tabs {
  position: sticky;
  top: 66px;
  z-index: 12;
  gap: 0;
  margin: 0;
  padding: 0 8px;
  overflow-x: auto;
  background: rgba(255, 255, 255, .96);
  border: 0;
  border-bottom: 1px solid var(--social-line);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.community-app:not(.community-admin-app) .feed-tabs button {
  position: relative;
  min-height: 51px;
  padding: 10px 14px;
  color: #6b7280;
  background: transparent;
  border-radius: 0;
}

.community-app:not(.community-admin-app) .feed-tabs button.active {
  color: #11182f;
  background: transparent;
}

.community-app:not(.community-admin-app) .feed-tabs button.active::after {
  position: absolute;
  right: 14px;
  bottom: 0;
  left: 14px;
  height: 3px;
  background: #004e53;
  border-radius: 3px 3px 0 0;
  content: "";
}

.community-app:not(.community-admin-app) .quick-composer {
  margin: 0;
  border-bottom: 1px solid var(--social-line);
}

.community-app:not(.community-admin-app) .quick-composer > button {
  min-height: 74px;
  padding: 14px 18px;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.quick-composer > button > span:nth-child(2) {
  flex: 1;
}

.quick-composer > button > strong {
  padding: 8px 14px;
  color: #fff;
  font-size: 12px;
  background: #004e53;
  border-radius: 999px;
}

.community-app:not(.community-admin-app) .feed-list {
  gap: 0;
}

.community-app:not(.community-admin-app) .community-post {
  overflow: visible;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--social-line);
  border-radius: 0;
  box-shadow: none;
}

.community-app:not(.community-admin-app) .community-post:hover {
  background: #fcfdfd;
}

.community-app:not(.community-admin-app) .post-head {
  padding: 16px 18px 10px;
}

.community-app:not(.community-admin-app) .author-avatar {
  width: 44px;
  height: 44px;
  color: #fff;
  background: linear-gradient(145deg, #004e53, #6d28d9);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #d8dee6;
}

.community-app:not(.community-admin-app) .author-button strong {
  color: #11182f;
  font-size: 14px;
}

.community-app:not(.community-admin-app) .author-button small {
  color: #7b8595;
  font-size: 12px;
}

.post-head-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.community-app:not(.community-admin-app) .post-type {
  padding: 5px 8px;
  color: #465568;
  background: #eef2f5;
  border-radius: 999px;
}

.post-overflow {
  display: grid;
  width: 34px;
  height: 34px;
  color: #687587;
  background: transparent;
  border: 0;
  border-radius: 50%;
  place-items: center;
}

.post-overflow:hover {
  color: #004e53;
  background: #e8f7f6;
}

.community-app:not(.community-admin-app) .post-copy {
  padding: 2px 18px 14px 72px;
}

.community-app:not(.community-admin-app) .post-copy h2 {
  margin-bottom: 6px;
  color: #162033;
  font-size: 18px;
  line-height: 1.3;
}

.community-app:not(.community-admin-app) .post-copy p {
  color: #3d4858;
  font-size: 14px;
  line-height: 1.55;
}

.community-app:not(.community-admin-app) .post-media {
  width: calc(100% - 90px);
  max-height: 620px;
  margin: 0 18px 0 72px;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  background: #0c1422;
  border: 1px solid #dce2e8;
  border-radius: 8px;
}

.community-app:not(.community-admin-app) .post-poll {
  padding: 0 18px 14px 72px;
}

.community-app:not(.community-admin-app) .post-meta {
  gap: 7px;
  padding: 10px 18px 6px 72px;
}

.community-app:not(.community-admin-app) .post-meta span {
  padding: 5px 8px;
  color: #4f6570;
  font-size: 11px;
  font-weight: 700;
  background: #edf7f7;
  border-radius: 999px;
}

.post-engagement {
  display: flex;
  justify-content: flex-end;
  gap: 17px;
  padding: 6px 18px 10px 72px;
  color: #7b8595;
  font-size: 11px;
}

.post-engagement strong {
  color: #4a5565;
}

.community-app:not(.community-admin-app) .post-actions {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-left: 62px;
  border-top: 0;
}

.community-app:not(.community-admin-app) .post-actions > button {
  gap: 6px;
  min-width: 0;
  min-height: 44px;
  padding: 7px 5px;
  color: #697587;
  font-size: 11px;
  background: transparent;
  border-radius: 8px;
}

.community-app:not(.community-admin-app) .post-actions > button:hover,
.community-app:not(.community-admin-app) .post-actions > button.active {
  color: #004e53;
  background: #e8f7f6;
}

.community-app:not(.community-admin-app) .post-actions .community-icon {
  width: 18px;
  height: 18px;
}

.community-app:not(.community-admin-app) .teacher-post-tools {
  margin: 4px 18px 5px 72px;
  background: #f7f9fb;
  border-color: #e2e7ed;
  border-radius: 8px;
}

.community-app:not(.community-admin-app) .teacher-post-tools summary {
  min-height: 40px;
  color: #4b5565;
  font-size: 12px;
}

.community-app:not(.community-admin-app) .teacher-post-tool-menu {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.community-app:not(.community-admin-app) .community-right-rail {
  top: 82px;
  gap: 12px;
  padding: 16px;
}

.community-app:not(.community-admin-app) .rail-card {
  padding: 15px;
  background: #f5f7f9;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
}

.community-app:not(.community-admin-app) .rail-card h2 {
  color: #1b2637;
  font-size: 15px;
}

.community-app:not(.community-admin-app) .story-row {
  gap: 9px;
}

.community-app:not(.community-admin-app) .story-avatar > span {
  width: 45px;
  height: 45px;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #6d28d9;
}

.community-app:not(.community-admin-app) .rail-destination {
  padding: 10px 8px;
  border-radius: 8px;
}

.community-app:not(.community-admin-app) .rail-destination:hover {
  background: #fff;
  transform: none;
}

.community-safety-card {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.community-safety-card > .community-icon {
  width: 23px;
  height: 23px;
  color: #087443;
  flex: 0 0 auto;
}

.community-safety-card p {
  margin: 4px 0 0;
  color: #657083;
  font-size: 12px;
  line-height: 1.45;
}

.community-app:not(.community-admin-app) .community-page-header {
  margin: 0;
  padding: 24px;
  color: #11182f;
  background: #fff;
  border-bottom: 1px solid var(--social-line);
  border-radius: 0;
  box-shadow: none;
}

.community-app:not(.community-admin-app) .community-page-header h1 {
  color: #11182f;
  font-size: 28px;
}

.community-app:not(.community-admin-app) .community-page-header p {
  color: #64748b;
}

.community-app:not(.community-admin-app) .community-page-header .community-kicker {
  color: #6d28d9;
}

.community-app:not(.community-admin-app) .card-grid,
.community-app:not(.community-admin-app) .collection-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.community-app:not(.community-admin-app) .feature-card,
.community-app:not(.community-admin-app) .collection-card {
  min-height: 220px;
  padding: 22px;
  background: #fff;
  border: 0;
  border-right: 1px solid var(--social-line);
  border-bottom: 1px solid var(--social-line);
  border-radius: 0;
  box-shadow: none;
}

.community-app:not(.community-admin-app) .feature-card:nth-child(even),
.community-app:not(.community-admin-app) .collection-card:nth-child(even) {
  border-right: 0;
}

.community-app:not(.community-admin-app) .feature-card:hover,
.community-app:not(.community-admin-app) .collection-card:hover {
  background: #f8fafb;
}

.community-app:not(.community-admin-app) .feature-card .community-button {
  justify-self: start;
}

.community-app:not(.community-admin-app) .profile-hero {
  padding: 0;
  color: #11182f;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
}

.community-app:not(.community-admin-app) .profile-cover {
  display: block;
  height: 190px;
  background:
    linear-gradient(125deg, rgba(0, 78, 83, .9), rgba(14, 138, 144, .72) 52%, rgba(109, 40, 217, .72)),
    linear-gradient(45deg, #004e53, #6d28d9);
}

.profile-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 0 24px 20px;
}

.community-app:not(.community-admin-app) .profile-avatar {
  width: 116px;
  height: 116px;
  margin-top: -58px;
  background: #fff;
  border: 5px solid #fff;
  box-shadow: 0 0 0 1px #dbe1e8;
}

.community-app:not(.community-admin-app) .profile-details {
  margin-top: 14px;
}

.community-app:not(.community-admin-app) .profile-hero h1 {
  color: #11182f;
  font-size: 28px;
}

.community-app:not(.community-admin-app) .profile-hero p {
  color: #596579;
}

.community-app:not(.community-admin-app) .profile-main > .community-button,
.community-app:not(.community-admin-app) .profile-main > .profile-actions {
  margin-top: 18px;
}

.community-app:not(.community-admin-app) .interest-list {
  margin: 0;
  padding: 0 24px 20px 158px;
}

.community-app:not(.community-admin-app) .profile-content-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  border-top: 1px solid var(--social-line);
  border-bottom: 1px solid var(--social-line);
}

.community-app:not(.community-admin-app) .profile-content-tabs button {
  min-height: 48px;
  color: #6b7280;
  background: #fff;
  border: 0;
  border-bottom: 3px solid transparent;
}

.community-app:not(.community-admin-app) .profile-content-tabs button.active {
  color: #11182f;
  border-bottom-color: #004e53;
}

.community-app:not(.community-admin-app) .profile-media-grid {
  display: grid;
  min-height: 330px;
  margin: 0;
}

.community-app:not(.community-admin-app) .profile-media-empty {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  color: #728095;
  text-align: center;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] {
  background: #050b12;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .community-page-header {
  color: #fff;
  background: #050b12;
  border-color: #26303e;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .community-page-header h1 {
  color: #fff;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .feed-list {
  grid-template-columns: 1fr;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .community-post {
  color: #fff;
  background: #050b12;
  border-color: #26303e;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .post-copy h2,
.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .post-copy p,
.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .author-button strong {
  color: #fff;
}

@media (max-width: 1180px) {
  .community-app:not(.community-admin-app) .community-layout {
    grid-template-columns: 214px minmax(520px, 720px);
    width: min(100%, 934px);
  }

  .community-app:not(.community-admin-app) .community-right-rail {
    display: none;
  }

  .community-app:not(.community-admin-app) .community-global-search {
    margin-left: 214px;
  }
}

@media (max-width: 800px) {
  .community-app:not(.community-admin-app) .community-topbar {
    padding: 8px 14px;
  }

  .community-app:not(.community-admin-app) .community-global-search {
    margin-left: auto;
  }

  .community-app:not(.community-admin-app) .community-layout {
    display: block;
    width: 100%;
    min-height: 0;
    border: 0;
  }

  .community-app:not(.community-admin-app) .community-section-nav {
    display: none;
  }

  .community-app:not(.community-admin-app) .community-content {
    min-height: calc(100vh - 138px);
    border: 0;
  }
}

@media (max-width: 600px) {
  .dls-community-main {
    padding-bottom: 74px;
  }

  .community-app:not(.community-admin-app) .community-topbar {
    min-height: 58px;
  }

  .community-app:not(.community-admin-app) .community-mobile-brand {
    display: grid;
  }

  .community-app:not(.community-admin-app) .community-mobile-brand > .community-icon {
    display: none;
  }

  .community-app:not(.community-admin-app) .timeline-header {
    min-height: 55px;
    padding: 8px 14px;
  }

  .community-app:not(.community-admin-app) .timeline-header strong {
    font-size: 18px;
  }

  .community-app:not(.community-admin-app) .feed-tabs {
    top: 58px;
    padding: 0;
  }

  .community-app:not(.community-admin-app) .feed-tabs button {
    min-height: 46px;
    padding-inline: 12px;
  }

  .community-app:not(.community-admin-app) .community-mobile-stories {
    padding: 13px 12px;
    background: #fff;
  }

  .community-app:not(.community-admin-app) .quick-composer > button {
    min-height: 66px;
    padding: 11px 13px;
  }

  .quick-composer > button > strong {
    display: none;
  }

  .community-app:not(.community-admin-app) .community-post {
    border-radius: 0;
  }

  .community-app:not(.community-admin-app) .post-head {
    padding: 13px 14px 9px;
  }

  .community-app:not(.community-admin-app) .post-head-actions .post-type {
    display: none;
  }

  .community-app:not(.community-admin-app) .post-copy {
    padding: 2px 14px 13px;
  }

  .community-app:not(.community-admin-app) .post-copy h2 {
    font-size: 17px;
  }

  .community-app:not(.community-admin-app) .post-media {
    width: 100%;
    max-height: none;
    margin: 0;
    aspect-ratio: 4 / 5;
    border: 0;
    border-radius: 0;
  }

  .community-app:not(.community-admin-app) .post-poll {
    padding: 0 14px 14px;
  }

  .community-app:not(.community-admin-app) .post-meta,
  .community-app:not(.community-admin-app) .post-engagement {
    padding-right: 14px;
    padding-left: 14px;
  }

  .community-app:not(.community-admin-app) .post-actions {
    margin-left: 0;
    padding: 2px 6px 6px;
  }

  .community-app:not(.community-admin-app) .post-actions > button {
    min-height: 42px;
    font-size: 0;
  }

  .community-app:not(.community-admin-app) .post-actions > button span {
    display: none;
  }

  .community-app:not(.community-admin-app) .post-actions .community-icon {
    width: 21px;
    height: 21px;
  }

  .community-app:not(.community-admin-app) .teacher-post-tools {
    margin: 4px 12px 8px;
  }

  .community-app:not(.community-admin-app) .card-grid,
  .community-app:not(.community-admin-app) .collection-grid {
    grid-template-columns: 1fr;
  }

  .community-app:not(.community-admin-app) .feature-card,
  .community-app:not(.community-admin-app) .collection-card {
    min-height: 190px;
    border-right: 0;
  }

  .community-app:not(.community-admin-app) .community-page-header {
    margin: 0;
    padding: 20px 16px;
    border-radius: 0;
  }

  .community-app:not(.community-admin-app) .profile-cover {
    height: 135px;
  }

  .profile-main {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0 16px 16px;
  }

  .community-app:not(.community-admin-app) .profile-avatar {
    width: 86px;
    height: 86px;
    margin-top: -43px;
  }

  .community-app:not(.community-admin-app) .profile-details {
    margin-top: 9px;
  }

  .community-app:not(.community-admin-app) .profile-hero h1 {
    font-size: 23px;
  }

  .community-app:not(.community-admin-app) .profile-counts {
    gap: 15px;
    margin-top: 12px;
  }

  .community-app:not(.community-admin-app) .profile-main > .community-button,
  .community-app:not(.community-admin-app) .profile-main > .profile-actions {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .community-app:not(.community-admin-app) .interest-list {
    padding: 0 16px 15px;
  }
}

/* Final authority: these rules intentionally follow legacy compatibility rules. */
.dls-community-shell {
  color: var(--stitch-text);
  background-color: var(--stitch-background);
  background-image: radial-gradient(circle at 1px 1px, rgba(220, 227, 235, .72) 1px, transparent 1px);
  background-size: 24px 24px;
}

.dls-community-shell h1,
.dls-community-shell h2,
.dls-community-shell h3,
.dls-community-shell strong {
  font-family: "Hanken Grotesk", Inter, sans-serif;
}

.community-app:not(.community-admin-app) .community-topbar,
.community-admin-app .community-topbar {
  min-height: 72px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--stitch-border);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(12px);
}

.community-app:not(.community-admin-app) .community-layout {
  grid-template-columns: 232px minmax(0, 720px) minmax(260px, 320px);
  width: min(100%, 1320px);
  gap: 24px;
  border: 0;
}

.community-app:not(.community-admin-app) .community-section-nav,
.community-admin-app .community-section-nav {
  top: 88px;
  padding: 20px 12px;
  border: 0;
  border-right: 1px solid var(--stitch-border);
  border-radius: 0;
  color: var(--stitch-text);
  background: rgba(255, 255, 255, .94);
  box-shadow: none;
}

.community-app:not(.community-admin-app) .community-view-button,
.community-app:not(.community-admin-app) .community-exit-link,
.community-admin-app .community-view-button,
.community-admin-app .community-exit-link {
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--stitch-radius-pill);
  color: var(--stitch-text);
  background: transparent;
}

.community-app:not(.community-admin-app) .community-view-button.active,
.community-admin-app .community-view-button.active {
  color: var(--stitch-primary);
  background: var(--stitch-primary-fixed);
}

.community-app:not(.community-admin-app) .community-content {
  padding: 20px 0 88px;
  border: 0;
  background: transparent;
}

.community-app:not(.community-admin-app) .feed-list {
  gap: 16px;
}

.community-app:not(.community-admin-app) .community-post {
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-lg);
  background: var(--stitch-surface);
  box-shadow: var(--stitch-shadow-card);
}

.community-app:not(.community-admin-app) .post-media {
  width: calc(100% - 24px);
  margin: 0 12px;
  border: 0;
  border-radius: var(--stitch-radius-lg);
  aspect-ratio: 4 / 3;
}

.community-app:not(.community-admin-app) .community-page-header {
  min-height: 148px;
  margin: 0 0 16px;
  padding: 24px;
  border: 0;
  border-radius: var(--stitch-radius-lg);
  color: #fff;
  background: var(--stitch-primary);
  box-shadow: var(--stitch-shadow-raised);
}

.community-app:not(.community-admin-app) .community-page-header h1,
.community-app:not(.community-admin-app) .community-page-header p,
.community-app:not(.community-admin-app) .community-page-header .community-kicker {
  color: #fff;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] {
  min-height: calc(100vh - 92px);
  margin-top: 20px;
  padding: 16px;
  border-radius: var(--stitch-radius-lg);
  background: #050b12;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .community-page-header {
  min-height: auto;
  padding: 8px 4px 18px;
  background: transparent;
  box-shadow: none;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .feed-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .post-media {
  width: calc(100% - 20px);
  max-height: 640px;
  margin: 0 10px;
  aspect-ratio: 9 / 16;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="profile"] .profile-cover {
  display: block;
  height: 190px;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="profile"] .profile-hero {
  overflow: clip;
  border: 1px solid var(--stitch-border);
  border-radius: var(--stitch-radius-lg);
  color: var(--stitch-text);
  background: var(--stitch-surface);
  box-shadow: var(--stitch-shadow-card);
}

@media (max-width: 1180px) {
  .community-app:not(.community-admin-app) .community-layout {
    grid-template-columns: 220px minmax(0, 720px);
    width: min(100%, 980px);
  }
}

@media (max-width: 800px) {
  .community-app:not(.community-admin-app) .community-topbar,
  .community-admin-app .community-topbar {
    min-height: 60px;
    padding: 8px 14px;
  }

  .community-app:not(.community-admin-app) .community-layout {
    display: block;
    width: 100%;
  }

  .community-app:not(.community-admin-app) .community-section-nav {
    display: none;
  }

  .community-app:not(.community-admin-app) .community-content {
    padding: 0 0 82px;
  }

  .community-app:not(.community-admin-app) .feed-list {
    gap: 10px;
    padding: 0 10px;
  }

  .community-app:not(.community-admin-app) .community-post {
    border-radius: var(--stitch-radius-lg);
  }

  .community-app:not(.community-admin-app) .post-media {
    width: calc(100% - 20px);
    margin: 0 10px;
    aspect-ratio: 4 / 5;
  }

  .community-app:not(.community-admin-app) .community-page-header {
    min-height: 140px;
    margin: 0 10px 12px;
    padding: 20px;
    border-radius: 0 0 var(--stitch-radius-lg) var(--stitch-radius-lg);
  }

  .community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] {
    margin: 0;
    padding: 8px 8px 78px;
    border-radius: 0;
  }

  .community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] .feed-list {
    grid-template-columns: 1fr;
    padding: 0;
  }
}

/* Stitch export lock.
   Keep this block last: older compatibility selectors above must not alter the
   approved DLS Community Design System geometry. */
.dls-community-shell > .dls-sidebar {
  display: none !important;
}

.dls-community-main {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
}

.community-app:not(.community-admin-app) .community-topbar {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 50 !important;
  display: grid !important;
  grid-template-columns: 280px minmax(280px, 576px) auto !important;
  align-items: center !important;
  gap: 32px !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 24px !important;
}

.community-app:not(.community-admin-app) .community-mobile-brand {
  display: flex !important;
}

.community-app:not(.community-admin-app) .community-layout {
  display: grid !important;
  grid-template-columns: 280px minmax(0, 760px) 380px !important;
  width: min(100%, 1440px) !important;
  min-height: 100vh !important;
  margin: 0 auto !important;
  padding: 64px 0 0 !important;
  gap: 0 !important;
}

.community-app:not(.community-admin-app) .community-section-nav {
  position: fixed !important;
  top: 64px !important;
  bottom: 0 !important;
  left: max(0px, calc((100vw - 1440px) / 2)) !important;
  width: 280px !important;
  padding: 24px 16px 36px !important;
  border-right: 1px solid #f0f1f3 !important;
  background: #fff !important;
}

.community-app:not(.community-admin-app) .community-content {
  grid-column: 2 !important;
  min-width: 0 !important;
  min-height: calc(100vh - 64px) !important;
  padding: 32px 32px 88px !important;
  background: #fff !important;
}

.community-app:not(.community-admin-app) .community-right-rail {
  position: fixed !important;
  top: 64px !important;
  bottom: 0 !important;
  right: max(0px, calc((100vw - 1440px) / 2)) !important;
  display: flex !important;
  width: 380px !important;
  padding: 32px !important;
  border-left: 1px solid #f0f1f3 !important;
  background: #fff !important;
}

.community-app:not(.community-admin-app) .community-view-button.active {
  color: var(--stitch-primary) !important;
  background: transparent !important;
}

.community-app:not(.community-admin-app) .community-post {
  border: 1px solid rgba(0, 0, 0, .06) !important;
  border-radius: 16px !important;
}

.community-app:not(.community-admin-app) .post-media {
  width: calc(100% - 24px) !important;
  max-height: 520px !important;
  margin: 0 12px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
}

.community-app:not(.community-admin-app) .community-content[data-community-view="shorts"] {
  background: #050b12 !important;
}

.community-admin-app .community-topbar {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 50 !important;
  display: flex !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 24px 0 280px !important;
}

.community-admin-app .admin-community-layout {
  display: block !important;
  min-height: 100vh !important;
  padding: 64px 0 0 256px !important;
}

.community-admin-app .admin-section-nav {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  z-index: 60 !important;
  display: flex !important;
  width: 256px !important;
  padding: 84px 0 24px !important;
  border-right: 1px solid var(--stitch-border) !important;
  background: var(--stitch-background) !important;
}

.community-admin-app .admin-community-content {
  width: min(100%, 1184px) !important;
  min-height: calc(100vh - 64px) !important;
  margin: 0 auto !important;
  padding: 32px 24px 56px !important;
}

.community-admin-app .admin-control-hero,
.community-admin-app .admin-mobile-nav {
  display: none !important;
}

@media (max-width: 1180px) and (min-width: 801px) {
  .community-app:not(.community-admin-app) .community-topbar {
    grid-template-columns: 240px minmax(280px, 560px) auto !important;
  }

  .community-app:not(.community-admin-app) .community-layout {
    grid-template-columns: 240px minmax(0, 760px) !important;
    width: min(100%, 1000px) !important;
  }

  .community-app:not(.community-admin-app) .community-section-nav {
    left: max(0px, calc((100vw - 1000px) / 2)) !important;
    width: 240px !important;
  }

  .community-app:not(.community-admin-app) .community-right-rail {
    display: none !important;
  }
}

@media (max-width: 800px) {
  .community-app:not(.community-admin-app) .community-topbar {
    grid-template-columns: 1fr auto auto !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 14px !important;
    gap: 10px !important;
  }

  .community-app:not(.community-admin-app) .community-mobile-brand {
    display: flex !important;
    font-size: 18px !important;
  }

  .community-app:not(.community-admin-app) .community-global-search {
    width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
    background: transparent !important;
  }

  .community-app:not(.community-admin-app) .community-global-search span,
  .community-app:not(.community-admin-app) .community-top-actions .community-button {
    display: none !important;
  }

  .community-app:not(.community-admin-app) .community-layout {
    display: block !important;
    width: 100% !important;
    padding-top: 58px !important;
  }

  .community-app:not(.community-admin-app) .community-section-nav,
  .community-app:not(.community-admin-app) .community-right-rail {
    display: none !important;
  }

  .community-app:not(.community-admin-app) .community-content {
    min-height: calc(100vh - 58px) !important;
    padding: 0 0 74px !important;
  }

  .community-app:not(.community-admin-app) .post-media {
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    aspect-ratio: 4 / 5 !important;
  }

  .community-admin-app .community-topbar {
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 14px !important;
  }

  .community-admin-app .admin-community-layout {
    padding: 58px 0 70px !important;
  }

  .community-admin-app .admin-section-nav {
    display: none !important;
  }

  .community-admin-app .admin-community-content {
    padding: 18px 14px 40px !important;
  }

  .community-admin-app .admin-mobile-nav {
    display: flex !important;
  }
}