/* Figma community — node 449:36 desktop and 456:238 mobile. */

body.view-community {
  --community-ink: #191812;
  --community-muted: #706b5d;
  --community-soft: #9a927f;
  --community-yellow: #ffc928;
  --community-gold: #f2b91f;
  --community-mint: #10a48a;
  --community-orange: #e87722;
  --community-paper: rgba(255, 255, 255, 0.64);
  --community-paper-strong: rgba(255, 255, 255, 0.82);
  --community-line: rgba(60, 51, 29, 0.08);
  --community-shadow: 0 22px 56px rgba(104, 78, 10, 0.08);
  min-height: 100%;
  background: linear-gradient(112deg, #ffc928 0%, #ffdf68 28%, #fff0af 58%, #fffdf5 100%);
}

body.view-community .main {
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 0;
  background: transparent;
}

body.view-community .app-shell {
  background:
    radial-gradient(circle at 36% 8%, rgba(255, 244, 173, 0.58), transparent 28%),
    linear-gradient(112deg, #ffc928 0%, #ffdd62 27%, #fff0ae 57%, #fffdf5 100%);
}

@media (min-width: 981px) {
  body.view-community .main {
    grid-row: 1 / -1;
  }
}

.community-shell,
.community-modal,
.community-story-modal,
.community-action-sheet,
.community-admin-standalone {
  color: var(--community-ink, #191812);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.community-shell,
.community-shell *,
.community-modal *,
.community-story-modal *,
.community-action-sheet * {
  box-sizing: border-box;
}

.community-shell {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow: clip;
  background:
    radial-gradient(circle at 36% 8%, rgba(255, 244, 173, 0.58), transparent 28%),
    linear-gradient(112deg, #ffc928 0%, #ffdd62 27%, #fff0ae 57%, #fffdf5 100%);
}

.community-shell::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 79% 18%, rgba(255, 255, 255, 0.55), transparent 24%),
    linear-gradient(90deg, transparent 0 42%, rgba(255, 255, 255, 0.16) 68%, transparent 100%);
  content: "";
  pointer-events: none;
}

.community-shell button,
.community-shell input,
.community-shell textarea,
.community-shell select,
.community-modal button,
.community-modal input,
.community-modal textarea,
.community-modal select,
.community-action-sheet button,
.community-story-modal button,
.community-story-modal input {
  appearance: none;
  margin: 0;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.community-shell button,
.community-modal button,
.community-action-sheet button,
.community-story-modal button {
  border: 0;
  cursor: pointer;
}

.community-shell img,
.community-modal img,
.community-story-modal img,
.community-action-sheet img {
  display: block;
}

.community-shell button:focus-visible,
.community-modal button:focus-visible,
.community-modal input:focus-visible,
.community-modal textarea:focus-visible,
.community-modal select:focus-visible,
.community-action-sheet button:focus-visible,
.community-story-modal button:focus-visible,
.community-story-modal input:focus-visible {
  outline: 3px solid rgba(16, 164, 138, 0.28);
  outline-offset: 3px;
}

.community-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  object-fit: contain;
}

.community-copy-mobile {
  display: none;
}

.community-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.community-primary-button,
.community-secondary-button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 800;
}

.community-primary-button {
  color: #17150f;
  background: var(--community-yellow);
  box-shadow: 0 12px 26px rgba(231, 169, 0, 0.18);
}

.community-secondary-button {
  color: var(--community-ink);
  background: rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 0 0 1px rgba(70, 59, 29, 0.1);
}

.community-home-stage {
  width: min(1296px, 100%);
  margin: 0 auto;
  padding: 116px 0 42px;
}

.community-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(480px, 608px);
  align-items: start;
  gap: 28px;
}

/* Header */
.community-hero {
  display: grid;
  min-height: 116px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  align-items: center;
}

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

.community-hero-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
}

.community-hero-tools button {
  position: relative;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.community-hero-tools button i {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #e85252;
}

.community-hero-copy {
  align-self: start;
  padding-top: 9px;
}

.community-hero-date,
.community-hero h1,
.community-hero-subtitle {
  margin: 0;
}

.community-hero-date {
  color: #625932;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
}

.community-hero h1 {
  margin-top: 10px;
  color: #16150f;
  font-size: 34px;
  font-weight: 850;
  letter-spacing: -1px;
  line-height: 42px;
}

.community-hero-subtitle {
  margin-top: 4px;
  color: #8b761c;
  font-size: 13px;
  line-height: 20px;
}

/* Composer */
.community-composer-launcher,
.community-composer-card {
  display: grid;
  width: 100%;
  height: 116px;
  grid-template-columns: 48px minmax(0, 1fr) 56px;
  grid-template-rows: 58px 30px;
  align-items: center;
  gap: 0 16px;
  padding: 14px 20px 14px 18px;
  border: 0;
  border-radius: 26px;
  color: var(--community-ink);
  text-align: left;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.4)),
    rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 20px 46px rgba(112, 83, 9, 0.06);
  backdrop-filter: blur(24px) saturate(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(1.12);
}

.community-avatar {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  overflow: visible;
  border-radius: 50%;
}

.community-avatar > img:not(.community-online-dot):not(.community-moment-online),
.community-avatar > .community-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.community-avatar:not(.is-brand):not(.community-avatar-moment) {
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: rgba(235, 248, 246, 0.78);
}

.community-avatar:not(.is-brand):not(.community-avatar-moment) > .community-icon {
  inset: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  object-fit: contain;
}

.community-avatar-default,
.community-avatar-launcher {
  width: 48px;
  height: 48px;
}

.community-avatar-small {
  width: 40px;
  height: 40px;
}

.community-avatar-large {
  width: 54px;
  height: 54px;
}

.community-avatar-tiny {
  width: 34px;
  height: 34px;
}

.community-avatar-profile {
  width: 86px;
  height: 86px;
}

.community-online-dot {
  position: absolute;
  right: -1px;
  bottom: 0;
  width: 12px;
  height: 12px;
}

.community-avatar-launcher {
  grid-row: 1 / 3;
  align-self: center;
  border: 1px solid rgba(255, 255, 255, 0.86);
  background: rgba(255, 249, 225, 0.74);
}

.community-avatar-launcher .community-icon {
  width: 28px;
  height: 28px;
}

.community-composer-prompt {
  display: grid;
  align-self: end;
  gap: 5px;
  min-width: 0;
}

.community-composer-prompt strong {
  overflow: hidden;
  font-size: 15px;
  font-weight: 780;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-composer-prompt small {
  color: #999180;
  font-size: 12px;
  line-height: 16px;
}

.community-composer-tools {
  display: flex;
  align-self: start;
  gap: 10px;
}

.community-composer-tools i {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.48);
}

.community-composer-tools .community-icon {
  width: 18px;
  height: 18px;
}

.community-composer-action {
  display: grid;
  width: 52px;
  height: 52px;
  grid-column: 3;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 18px;
  background: var(--community-yellow);
  box-shadow: 0 10px 22px rgba(229, 166, 0, 0.16);
}

.community-composer-action .community-icon {
  width: 25px;
  height: 25px;
}

/* Moments and channels */
.community-moments {
  margin-top: 28px;
}

.community-moments-heading {
  display: flex;
  min-height: 22px;
  align-items: baseline;
  gap: 18px;
}

.community-moments-heading h2,
.community-moments-heading span,
.community-moments-heading small {
  margin: 0;
}

.community-moments-heading h2 {
  font-size: 15px;
  font-weight: 850;
  line-height: 20px;
}

.community-moments-heading span {
  color: #756e5e;
  font-size: 12px;
}

.community-moments-heading small {
  display: none;
  margin-left: auto;
  color: #8c8576;
  font-size: 11px;
}

.community-moment-list {
  display: flex;
  align-items: start;
  gap: 24px;
  margin-top: 10px;
}

.community-moment {
  display: grid;
  width: 62px;
  justify-items: center;
  gap: 6px;
  padding: 0;
  color: #4e493f;
  background: transparent;
}

.community-moment-ring {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid rgba(234, 155, 43, 0.64);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(255, 237, 166, 0.45);
}

.community-moment.is-own .community-moment-ring {
  border-color: rgba(255, 197, 29, 0.82);
}

.community-avatar-moment {
  width: 46px;
  height: 46px;
  background: rgba(240, 250, 250, 0.76);
}

.community-avatar-moment.is-cool {
  background: rgba(227, 247, 248, 0.82);
}

.community-avatar-moment .community-icon {
  width: 46px;
  height: 46px;
}

.community-moment:not(.is-own) .community-avatar-moment .community-icon {
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  object-fit: contain;
}

.community-moment-online {
  position: absolute;
  right: -1px;
  bottom: 0;
  width: 11px;
  height: 11px;
}

.community-moment b {
  width: 72px;
  font-size: 11px;
  font-weight: 650;
  line-height: 14px;
  text-align: center;
  white-space: nowrap;
}

.community-channel-row {
  display: flex;
  height: 44px;
  align-items: end;
  margin-top: 14px;
  border-bottom: 1px solid rgba(80, 62, 14, 0.1);
}

.community-feed-tabs {
  display: flex;
  height: 44px;
  align-items: end;
  gap: 36px;
}

.community-feed-tab {
  position: relative;
  height: 44px;
  padding: 0 0 14px;
  color: #756a50;
  background: transparent;
  font-size: 14px;
  font-weight: 650;
}

.community-feed-tab::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  content: "";
}

.community-feed-tab.is-active {
  color: #17150f;
  font-weight: 850;
}

.community-feed-tab.is-active::after {
  background: var(--community-yellow);
}

.community-topic-filters {
  display: none;
}

/* Main feed */
.community-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 824px) minmax(360px, 448px);
  align-items: start;
  gap: 24px;
  margin-top: 18px;
}

.community-main-column,
.community-feed,
.community-feed-list {
  min-width: 0;
}

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

.community-post-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 20px 24px;
  border: 0;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.43)),
    rgba(255, 251, 229, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    var(--community-shadow);
  backdrop-filter: blur(22px) saturate(1.08);
  -webkit-backdrop-filter: blur(22px) saturate(1.08);
}

.community-post-card.is-featured {
  min-height: 620px;
}

.community-post-author {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.community-post-author-copy {
  min-width: 0;
  flex: 1;
}

.community-post-author-copy > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.community-post-author-copy strong {
  color: #1c1a15;
  font-size: 15px;
  font-weight: 820;
  line-height: 20px;
}

.community-post-author-copy p {
  margin: 2px 0 0;
  color: #777063;
  font-size: 11px;
  line-height: 16px;
}

.community-day-badge,
.community-badge,
.community-post-tags span,
.community-detail-topic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.community-day-badge {
  height: 28px;
  padding: 0 14px;
  color: #736018;
  background: rgba(255, 210, 58, 0.25);
  font-size: 11px;
  font-weight: 650;
}

.community-card-more {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: transparent;
}

.community-card-more .community-icon {
  width: 22px;
  height: 22px;
}

.community-post-open {
  display: grid;
  width: 100%;
  gap: 7px;
  margin-top: 18px;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
}

.community-post-author + .community-post-open {
  margin-top: 18px;
}

.community-post-title {
  color: #17150f;
  font-size: 23px;
  font-weight: 850;
  letter-spacing: -0.45px;
  line-height: 30px;
}

.community-post-content {
  color: #786f5a;
  font-size: 14px;
  line-height: 22px;
}

.community-post-content > .community-copy-desktop {
  display: block;
  max-width: 520px;
}

.community-post-tags {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.community-post-tags span {
  height: 28px;
  padding: 0 13px;
  color: #1d83ac;
  background: rgba(205, 239, 246, 0.66);
  font-size: 11px;
  font-weight: 750;
}

.community-post-tags span + span {
  color: #168f77;
  background: rgba(199, 235, 194, 0.58);
}

.community-post-media {
  position: relative;
  display: block;
  width: 100%;
  height: 292px;
  margin-top: 14px;
  padding: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #e7c37d;
}

.community-post-tags + .community-post-media {
  margin-top: 14px;
}

.community-post-media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 54%;
}

.community-post-media > span {
  position: absolute;
  left: 16px;
  bottom: 14px;
  display: inline-flex;
  height: 38px;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border-radius: 19px;
  color: #655d50;
  background: rgba(248, 244, 236, 0.83);
  box-shadow: 0 8px 20px rgba(42, 31, 8, 0.1);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 11px;
}

.community-post-media > span .community-icon {
  width: 17px;
  height: 17px;
}

.community-real-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; overflow: hidden; border-radius: 22px; }
.community-real-media[data-community-media-count="1"] { grid-template-columns: 1fr; }
.community-real-media > button,
.community-real-media > video { width: 100%; min-height: 190px; max-height: 420px; overflow: hidden; border: 0; border-radius: 16px; background: rgba(244, 240, 226, 0.72); }
.community-real-media > button img,
.community-real-media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.community-real-media.is-detail > button,
.community-real-media.is-detail > video { min-height: 240px; max-height: 560px; }

.community-attachments {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.community-attachment-item {
  display: grid;
  min-height: 62px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-radius: 18px;
  color: var(--community-ink);
  text-align: left;
  background: rgba(255, 255, 255, 0.48);
}

.community-question-attachment {
  width: 100%;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.community-question-attachment:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 12px 28px rgba(89, 67, 11, 0.08);
}

.community-attachment-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 13px;
  background: rgba(255, 201, 40, 0.2);
}

.community-attachment-item > span:nth-child(2) {
  display: grid;
}

.community-attachment-item small {
  color: var(--community-muted);
  font-size: 10px;
}

.community-attachment-item strong {
  font-size: 12px;
}

.community-attachment-cta {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 12px;
  color: #137e6d;
  background: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 800;
}

.community-attachment-cta .community-icon {
  width: 14px;
  height: 14px;
}

.community-post-footer {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.community-post-actions {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 38px;
}

.community-post-actions > button,
.community-delete-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  color: #5f594d;
  background: transparent;
  font-size: 12px;
}

.community-post-actions > button.is-active {
  color: #b67b00;
}

.community-post-actions .community-icon {
  width: 20px;
  height: 20px;
}

.community-teacher-reply {
  display: grid;
  width: 100%;
  height: 40px;
  grid-template-columns: 38px 182px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 18px;
  color: #29261f;
  text-align: left;
  background: rgba(255, 255, 255, 0.55);
}

.community-teacher-reply > .community-icon {
  width: 36px;
  height: 36px;
}

.community-teacher-reply > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.community-teacher-reply > span .community-icon {
  width: 16px;
  height: 16px;
}

.community-teacher-reply b,
.community-teacher-reply small {
  font-size: 11px;
}

.community-teacher-reply small {
  margin-left: auto;
  color: #7f786b;
}

.community-teacher-reply > i {
  display: flex;
  height: 20px;
  align-items: center;
  gap: 4px;
}

.community-teacher-reply > i b {
  width: 2px;
  height: calc(2px + var(--wave) * 2px);
  border-radius: 2px;
  background: #38bea4;
}

.community-badge {
  min-height: 20px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 800;
}

.community-badge-gold { background: #fff0ae; color: #8f6500; }
.community-badge-mint { background: #dff7f0; color: #087d69; }
.community-badge-coral { background: #ffe7dc; color: #a84b2e; }
.community-badge-muted { background: #ebe8e0; color: #69645a; }

.community-moderation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.community-moderation-actions button {
  padding: 7px 10px;
  border-radius: 11px;
  color: #645d4e;
  background: rgba(255, 255, 255, 0.58);
  font-size: 11px;
}

/* Right rail */
.community-side-rail {
  display: grid;
  gap: 18px;
}

.community-live-card {
  display: grid;
  min-height: 244px;
  grid-template-columns: 60px minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: 0 14px;
  padding: 26px 24px 22px;
  border-radius: 28px;
  color: var(--community-ink);
  text-align: left;
  background:
    radial-gradient(circle at 83% 16%, rgba(255, 243, 177, 0.58), transparent 36%),
    linear-gradient(135deg, #ffc934, #ffdc71);
  box-shadow: 0 18px 42px rgba(205, 147, 0, 0.12);
}

.community-live-icon {
  display: grid;
  width: 56px;
  height: 56px;
  grid-row: 1 / 3;
  place-items: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.58);
}

.community-live-icon .community-icon {
  width: 26px;
  height: 26px;
}

.community-live-copy {
  display: grid;
  gap: 4px;
}

.community-live-copy small {
  color: #755d11;
  font-size: 11px;
  font-weight: 700;
}

.community-live-copy strong {
  font-size: 21px;
  font-weight: 850;
  line-height: 27px;
}

.community-live-copy em {
  color: #796c45;
  font-size: 11px;
  font-style: normal;
}

.community-live-meta {
  display: flex;
  grid-column: 1 / 3;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
}

.community-live-meta b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
}

.community-live-meta .community-icon {
  width: 18px;
  height: 18px;
}

.community-live-meta i {
  display: inline-flex;
  height: 40px;
  align-items: center;
  margin-left: auto;
  padding: 0 24px;
  border-radius: 16px;
  color: #fff;
  background: #1b1914;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.community-participant-stack {
  display: flex;
  grid-column: 1 / 3;
  align-self: end;
  align-items: center;
  margin-top: 12px;
}

.community-participant-stack .community-avatar + .community-avatar {
  margin-left: -10px;
}

.community-participant-stack small {
  margin-left: 8px;
  color: #837342;
  font-size: 10px;
}

.community-rail-card {
  height: 358px;
  min-height: 358px;
  padding: 24px;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.64), rgba(255, 255, 255, 0.42)),
    rgba(255, 255, 255, 0.36);
  box-shadow: var(--community-shadow);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.community-rail-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.community-rail-heading h2,
.community-rail-heading span {
  margin: 0;
}

.community-rail-heading h2 {
  font-size: 19px;
  line-height: 25px;
}

.community-rail-heading span {
  color: #8b8477;
  font-size: 11px;
}

.community-trend-list {
  display: grid;
  margin-top: 14px;
}

.community-trend-list > button {
  display: grid;
  min-height: 70px;
  grid-template-columns: 32px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(72, 62, 37, 0.07);
  color: inherit;
  text-align: left;
  background: transparent;
}

.community-trend-list > button > b {
  color: #a29b8d;
  font-size: 13px;
}

.community-trend-list > button:first-child > b {
  color: #ee7a21;
}

.community-trend-list > button span {
  display: grid;
  gap: 4px;
}

.community-trend-list strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-trend-list small {
  color: #999184;
  font-size: 10px;
}

.community-trend-list .community-icon {
  width: 18px;
  height: 18px;
}

.community-contributors {
  display: grid;
  width: 100%;
  height: 52px;
  grid-template-columns: 88px auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 0;
  color: inherit;
  text-align: left;
  background: transparent;
}

.community-contributors > strong {
  font-size: 11px;
}

.community-contributors > span {
  display: flex;
  align-items: center;
}

.community-contributors > span > .community-icon,
.community-contributors > span > .community-avatar {
  width: 34px;
  height: 34px;
}

.community-contributors > span > * + * {
  margin-left: -10px;
}

.community-contributors > small {
  color: #8d8577;
  font-size: 10px;
}

/* Feed states */
.community-feed-state,
.community-inline-error,
.community-feed-end {
  padding: 36px 20px;
  border-radius: 26px;
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
}

.community-feed-state {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.community-feed-state p,
.community-feed-end {
  margin: 0;
  color: var(--community-muted);
  font-size: 13px;
}

.community-loader {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(25, 24, 18, 0.12);
  border-top-color: #e3a800;
  border-radius: 50%;
  animation: community-spin 800ms linear infinite;
}

.community-post-skeleton {
  min-height: 220px;
  padding: 24px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.4);
}

.community-post-skeleton > * {
  display: block;
  height: 18px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.64);
}

.community-load-more {
  width: 100%;
  min-height: 46px;
  margin-top: 16px;
  border-radius: 18px;
  color: #6e6248;
  background: rgba(255, 255, 255, 0.5);
  font-weight: 700;
}

.community-feed-end {
  margin: 14px 0 0;
  padding: 16px;
  background: transparent;
}

@keyframes community-spin {
  to { transform: rotate(360deg); }
}

/* Shared subview shell */
.community-subview {
  width: min(1296px, 100%);
  min-height: calc(100vh - 158px);
  margin: 0 auto;
  padding: 116px 0 42px;
}

.community-subview[hidden],
.community-home-stage[hidden] {
  display: none;
}

.community-subview-header {
  display: grid;
  min-height: 92px;
  grid-template-columns: 190px minmax(0, 1fr) 190px;
  align-items: center;
  border-bottom: 1px solid rgba(64, 54, 27, 0.08);
}

.community-subview-back,
.community-subview-header-actions > button,
.community-subview-header-actions .community-joined-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: 15px;
  color: var(--community-ink);
  background: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  font-weight: 750;
}

.community-subview-back {
  width: max-content;
  padding-left: 10px;
  background: transparent;
}

.community-subview-back .community-icon {
  width: 20px;
  height: 20px;
}

.community-subview-header > div:nth-child(2) {
  text-align: center;
}

.community-subview-header h1,
.community-subview-header p {
  margin: 0;
}

.community-subview-header h1 {
  font-size: 28px;
  font-weight: 850;
  letter-spacing: -0.6px;
  line-height: 36px;
}

.community-subview-header p {
  margin-top: 3px;
  color: var(--community-muted);
  font-size: 12px;
}

.community-subview-header-actions {
  display: flex;
  justify-content: flex-end;
}

/* Search */
.community-search-form {
  display: grid;
  width: min(780px, 100%);
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 10px;
  margin: 26px auto 0;
}

.community-search-form label {
  display: grid;
  height: 58px;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.community-search-form input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--community-ink);
  background: transparent;
}

.community-search-form label button {
  padding: 6px;
  color: var(--community-muted);
  background: transparent;
  font-size: 12px;
}

.community-search-form > button {
  border-radius: 20px;
  background: var(--community-yellow);
  font-weight: 800;
}

.community-search-tabs,
.community-notification-tabs,
.community-channel-tabs {
  display: flex;
  width: min(780px, 100%);
  align-items: center;
  justify-content: center;
  gap: 34px;
  margin: 18px auto 0;
}

.community-search-tabs button,
.community-notification-tabs button,
.community-channel-tabs button,
.community-profile-posts nav button {
  position: relative;
  padding: 10px 2px 13px;
  color: #756e60;
  background: transparent;
  font-size: 13px;
  font-weight: 700;
}

.community-search-tabs button.is-active,
.community-notification-tabs button.is-active,
.community-channel-tabs button.is-active,
.community-profile-posts nav button.is-active {
  color: var(--community-ink);
}

.community-search-tabs button.is-active::after,
.community-notification-tabs button.is-active::after,
.community-channel-tabs button.is-active::after,
.community-profile-posts nav button.is-active::after {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--community-yellow);
  content: "";
}

.community-search-layout,
.community-notification-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
  gap: 24px;
  margin-top: 22px;
}

.community-search-results,
.community-search-aside > section,
.community-notification-list,
.community-notification-side > section,
.community-helper-card,
.community-event-content,
.community-reservation-card,
.community-profile-overview,
.community-profile-posts {
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: var(--community-shadow);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.community-search-results {
  padding: 22px 24px;
}

.community-search-results > header,
.community-notification-list > header,
.community-profile-posts > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.community-search-results > header h2,
.community-search-results > header span {
  display: inline;
  margin: 0;
}

.community-search-results > header h2 {
  font-size: 18px;
}

.community-search-results > header span {
  margin-left: 8px;
  color: var(--community-muted);
  font-size: 11px;
}

.community-search-results > header > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.48);
  font-size: 11px;
}

.community-search-result {
  display: grid;
  width: 100%;
  min-height: 138px;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(67, 57, 31, 0.07);
  color: inherit;
  text-align: left;
  background: transparent;
}

.community-search-result.has-photo {
  grid-template-columns: 44px minmax(0, 1fr) 132px;
}

.community-search-result > span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 10px;
}

.community-search-result > span > b {
  font-size: 13px;
}

.community-search-result > span > small {
  color: var(--community-muted);
  font-size: 10px;
}

.community-search-result strong,
.community-search-result p,
.community-search-result em {
  grid-column: 1 / 3;
}

.community-search-result strong {
  margin-top: 5px;
  font-size: 15px;
  line-height: 22px;
}

.community-search-result p {
  margin: 2px 0;
  color: var(--community-muted);
  font-size: 12px;
  line-height: 19px;
}

.community-search-result em {
  width: max-content;
  padding: 5px 9px;
  border-radius: 10px;
  color: #138b76;
  background: rgba(198, 238, 229, 0.6);
  font-size: 10px;
  font-style: normal;
}

.community-search-result em.is-gold {
  color: #8c6500;
  background: rgba(255, 218, 91, 0.44);
}

.community-search-result > img {
  width: 132px;
  height: 100px;
  border-radius: 18px;
  object-fit: cover;
}

.community-search-aside {
  display: grid;
  gap: 18px;
}

.community-search-aside > section {
  padding: 22px;
}

.community-search-aside h2,
.community-search-aside p {
  margin: 0;
}

.community-search-aside h2 {
  font-size: 17px;
}

.community-search-aside > section > p {
  margin-top: 3px;
  color: var(--community-muted);
  font-size: 11px;
}

.community-search-aside section > button {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: inherit;
  text-align: left;
  background: transparent;
}

.community-search-aside section > button > b {
  color: #d47722;
  font-size: 12px;
}

.community-search-aside section > button > span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.community-search-aside section > button > small,
.community-search-aside section > button > em {
  color: var(--community-muted);
  font-size: 10px;
  font-style: normal;
}

.community-search-aside section:last-child > button > span {
  display: grid;
  white-space: normal;
}

.community-search-aside section:last-child > button > em {
  padding: 6px 10px;
  border-radius: 10px;
  color: #8b6500;
  background: rgba(255, 214, 58, 0.32);
}

/* Notifications */
.community-notification-mobile-header,
.community-notification-quiet {
  display: none;
}

.community-notification-tabs {
  margin-top: 14px;
}

.community-notification-list {
  padding: 20px 22px;
}

.community-notification-list > header {
  padding: 4px 4px 10px;
}

.community-notification-list > header button {
  color: #997000;
  background: transparent;
  font-size: 11px;
}

.community-notification-row {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 82px;
  grid-template-columns: 42px 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(66, 56, 30, 0.07);
  color: inherit;
  text-align: left;
  background: transparent;
}

.community-notification-row.is-unread::before {
  position: absolute;
  left: -10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e05b45;
  content: "";
}

.community-notification-kind {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 208, 48, 0.22);
}

.community-notification-kind .community-icon {
  width: 16px;
  height: 16px;
}

.community-notification-row > span:nth-child(3) {
  min-width: 0;
}

.community-notification-row b {
  font-size: 13px;
}

.community-notification-row p {
  margin: 4px 0 0;
  color: var(--community-muted);
  font-size: 12px;
}

.community-notification-row time {
  color: #9d9587;
  font-size: 10px;
}

.community-notification-side {
  display: grid;
  gap: 18px;
}

.community-notification-side > section {
  padding: 22px;
}

.community-notification-side h2 {
  margin: 0;
  font-size: 17px;
}

.community-notification-side > section:first-child > strong {
  display: block;
  margin-top: 12px;
  font-size: 46px;
  line-height: 50px;
}

.community-notification-side > section:first-child > span {
  color: var(--community-muted);
  font-size: 11px;
}

.community-notification-side > section:first-child > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
}

.community-notification-side > section:first-child > div b {
  display: grid;
  gap: 3px;
  font-size: 17px;
}

.community-notification-side > section:first-child > div small {
  color: var(--community-muted);
  font-size: 10px;
  font-weight: 500;
}

.community-notification-side > section:first-child > p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 18px 0 0;
  color: var(--community-muted);
  font-size: 10px;
}

.community-notification-side label {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
}

.community-notification-side input {
  position: absolute;
  opacity: 0;
}

.community-notification-side label i {
  position: relative;
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background: #ded9cc;
}

.community-notification-side label i::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
  content: "";
  transition: transform 160ms ease;
}

.community-notification-side input:checked + i {
  background: #17aa8f;
}

.community-notification-side input:checked + i::after {
  transform: translateX(16px);
}

/* Channel */
.community-channel-mobile-header,
.community-channel-mobile-prompt,
.community-channel-mobile-stack {
  display: none;
}

.community-channel-hero {
  position: relative;
  min-height: 236px;
  margin-top: 24px;
  padding: 38px 42px;
  overflow: hidden;
  border-radius: 32px;
  background:
    radial-gradient(circle at 84% 24%, rgba(255, 255, 255, 0.58), transparent 32%),
    linear-gradient(125deg, #ffc928, #ffe27b 62%, #fff1bd);
  box-shadow: 0 22px 52px rgba(199, 146, 0, 0.12);
}

.community-channel-hero > small {
  color: #836718;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.community-channel-hero h2,
.community-channel-hero p {
  margin: 0;
}

.community-channel-hero h2 {
  margin-top: 12px;
  font-size: 32px;
  line-height: 40px;
}

.community-channel-hero p {
  margin-top: 6px;
  color: #746339;
  font-size: 14px;
}

.community-channel-hero > div {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 24px;
  color: #6c603f;
  font-size: 11px;
}

.community-channel-hero > button {
  position: absolute;
  right: 42px;
  bottom: 38px;
  display: inline-flex;
  height: 46px;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border-radius: 17px;
  color: #fff;
  background: #1a1813;
  font-weight: 800;
}

.community-channel-tabs {
  width: 100%;
  justify-content: flex-start;
  margin-top: 14px;
  border-bottom: 1px solid rgba(70, 58, 26, 0.08);
}

.community-channel-layout,
.community-event-layout,
.community-profile-layout {
  display: grid;
  grid-template-columns: minmax(0, 824px) minmax(330px, 448px);
  align-items: start;
  gap: 24px;
  margin-top: 20px;
}

.community-channel-layout > aside {
  display: grid;
  gap: 18px;
}

.community-helper-card {
  padding: 22px;
}

.community-helper-card h2,
.community-helper-card p {
  margin: 0;
}

.community-helper-card h2 {
  font-size: 18px;
}

.community-helper-card > p {
  margin-top: 3px;
  color: var(--community-muted);
  font-size: 11px;
}

.community-helper-card > button {
  display: grid;
  width: 100%;
  min-height: 64px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  color: inherit;
  text-align: left;
  background: transparent;
}

.community-helper-card > button > span {
  display: grid;
}

.community-helper-card > button small {
  color: var(--community-muted);
  font-size: 10px;
}

.community-helper-card > button em {
  color: #c08100;
  font-size: 13px;
  font-style: normal;
}

.community-channel-event {
  display: grid;
  min-height: 174px;
  gap: 7px;
  padding: 24px;
  border-radius: 26px;
  color: #1a1813;
  text-align: left;
  background: linear-gradient(135deg, #ffc82e, #ffe383);
}

.community-channel-event small {
  color: #7a5d0d;
}

.community-channel-event strong {
  font-size: 20px;
}

.community-channel-event span {
  color: #766846;
  font-size: 11px;
}

.community-channel-event b {
  align-self: end;
  font-size: 12px;
}

/* Event */
.community-event-mobile,
.community-profile-mobile,
.community-story-mobile-controls {
  display: none;
}

.community-event-hero {
  display: grid;
  min-height: 312px;
  grid-template-columns: minmax(0, 1fr) 44%;
  gap: 34px;
  margin-top: 24px;
  padding: 36px;
  overflow: hidden;
  border-radius: 32px;
  background: linear-gradient(130deg, #ffc82f, #ffe385 64%, #fff1bd);
}

.community-event-hero > div {
  align-self: center;
}

.community-event-hero small,
.community-event-hero h2,
.community-event-hero p,
.community-event-hero span {
  margin: 0;
}

.community-event-hero > div > small {
  color: #7f6211;
  font-weight: 800;
}

.community-event-hero h2 {
  margin-top: 12px;
  font-size: 38px;
  letter-spacing: -1px;
  line-height: 46px;
}

.community-event-hero p {
  margin-top: 6px;
  font-size: 16px;
}

.community-event-hero > div > span {
  display: block;
  margin-top: 12px;
  color: #756841;
  font-size: 12px;
}

.community-event-hero > div > div {
  display: flex;
  gap: 32px;
  margin-top: 26px;
}

.community-event-hero > div > div b {
  display: grid;
  grid-template-columns: 22px auto;
  align-items: center;
  gap: 3px 7px;
  font-size: 12px;
}

.community-event-hero > div > div small {
  grid-column: 2;
  color: #756a4b;
  font-size: 9px;
}

.community-event-hero > img {
  width: 100%;
  height: 240px;
  align-self: center;
  border-radius: 24px;
  object-fit: cover;
}

.community-event-content,
.community-reservation-card {
  padding: 28px;
}

.community-event-content > h2,
.community-event-content > p {
  margin: 0;
}

.community-event-content > h2 {
  font-size: 22px;
}

.community-event-content > p {
  margin-top: 8px;
  color: var(--community-muted);
  font-size: 13px;
  line-height: 22px;
}

.community-event-content > div {
  display: grid;
  min-height: 76px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(70, 59, 31, 0.07);
}

.community-event-content > div > b {
  color: #d17f1b;
}

.community-event-content > div > span {
  display: grid;
}

.community-event-content > div small,
.community-event-content > div em {
  color: var(--community-muted);
  font-size: 10px;
  font-style: normal;
}

.community-event-content > button {
  display: grid;
  width: 100%;
  min-height: 72px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 0;
  color: inherit;
  text-align: left;
  background: transparent;
}

.community-event-content > button > span {
  display: grid;
}

.community-event-content > button small {
  color: var(--community-muted);
  font-size: 10px;
}

.community-event-content > button em {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #0b8d76;
  font-size: 10px;
  font-style: normal;
}

.community-reservation-card {
  position: sticky;
  top: 100px;
}

.community-reservation-card h2,
.community-reservation-card p,
.community-reservation-card h3 {
  margin: 0;
}

.community-reservation-card > p {
  margin-top: 4px;
  color: var(--community-muted);
  font-size: 11px;
}

.community-reservation-card > strong {
  display: block;
  margin-top: 20px;
  font-size: 34px;
}

.community-reservation-card > button {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  border-radius: 18px;
  background: var(--community-yellow);
  font-weight: 850;
}

.community-reservation-card > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--community-muted);
  font-size: 10px;
}

.community-reservation-card h3 {
  margin-top: 28px;
  font-size: 13px;
}

.community-reservation-card > div {
  display: flex;
  align-items: center;
  margin-top: 10px;
}

.community-reservation-card > div .community-avatar + .community-avatar {
  margin-left: -9px;
}

.community-reservation-card > div small {
  margin-left: 10px;
  color: var(--community-muted);
  font-size: 10px;
}

/* Profile */
.community-profile-layout {
  grid-template-columns: 360px minmax(0, 1fr);
  margin-top: 24px;
}

.community-profile-overview,
.community-profile-posts {
  overflow: hidden;
  padding: 24px;
}

.community-profile-cover {
  height: 110px;
  margin: -24px -24px 0;
  background: linear-gradient(130deg, #ffc82e, #ffe682 70%, #fff3c7);
}

.community-profile-overview > .community-avatar {
  margin-top: -43px;
  border: 5px solid rgba(255, 255, 255, 0.88);
}

.community-profile-overview > h2 {
  display: inline-block;
  margin: 14px 8px 0 0;
  font-size: 24px;
}

.community-profile-overview > span {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 10px;
  color: #997000;
  background: rgba(255, 210, 58, 0.28);
  font-size: 10px;
}

.community-profile-overview > small {
  display: block;
  margin-top: 3px;
  color: var(--community-muted);
}

.community-profile-overview > p {
  margin: 14px 0 0;
  color: var(--community-muted);
  font-size: 12px;
  line-height: 20px;
}

.community-profile-overview > div:not(.community-profile-cover) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.community-profile-overview > div > button {
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 15px;
  background: var(--community-yellow);
  font-size: 12px;
  font-weight: 800;
}

.community-profile-overview > div > button + button {
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 0 0 1px rgba(72, 61, 31, 0.08);
}

.community-profile-overview dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 24px 0 0;
  padding: 18px 0;
  border-top: 1px solid rgba(66, 55, 28, 0.07);
  border-bottom: 1px solid rgba(66, 55, 28, 0.07);
}

.community-profile-overview dl div {
  text-align: center;
}

.community-profile-overview dt {
  font-size: 20px;
  font-weight: 850;
}

.community-profile-overview dd {
  margin: 3px 0 0;
  color: var(--community-muted);
  font-size: 9px;
}

.community-profile-overview h3 {
  margin: 20px 0 6px;
  font-size: 14px;
}

.community-profile-overview ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.community-profile-overview li {
  display: grid;
  min-height: 48px;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.community-profile-overview li > .community-icon {
  width: 30px;
  height: 30px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(255, 205, 43, 0.22);
}

.community-profile-overview li span {
  display: grid;
  font-size: 11px;
  font-weight: 700;
}

.community-profile-overview li small {
  color: var(--community-muted);
  font-size: 9px;
  font-weight: 500;
}

.community-profile-posts > header h2,
.community-profile-posts > header span {
  margin: 0;
}

.community-profile-posts > header h2 {
  font-size: 20px;
}

.community-profile-posts > header span {
  color: var(--community-muted);
  font-size: 11px;
}

.community-profile-posts nav {
  display: flex;
  gap: 28px;
  margin: 8px 0 14px;
  border-bottom: 1px solid rgba(69, 57, 29, 0.07);
}

.community-profile-posts .community-post-card {
  box-shadow: none;
  background: rgba(255, 255, 255, 0.36);
}

/* Modals */
.community-modal,
.community-story-modal,
.community-action-sheet {
  position: fixed;
  z-index: 3200;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  overflow: auto;
  background: rgba(35, 29, 14, 0.24);
  backdrop-filter: blur(18px) saturate(1.05);
  -webkit-backdrop-filter: blur(18px) saturate(1.05);
}

.community-modal.is-open,
.community-story-modal.is-open,
.community-action-sheet.is-open {
  display: flex;
}

body.community-modal-open {
  overflow: hidden;
}

.community-dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 56px);
  overflow: auto;
  border-radius: 30px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.91), rgba(255, 253, 242, 0.79)),
    rgba(255, 255, 255, 0.84);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 36px 90px rgba(62, 47, 10, 0.18);
  backdrop-filter: blur(24px) saturate(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(1.08);
}

.community-dialog-header {
  display: flex;
  min-height: 96px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 30px 20px;
  border-bottom: 1px solid rgba(63, 53, 27, 0.07);
}

.community-dialog-header h2,
.community-dialog-header p {
  margin: 0;
}

.community-dialog-header h2 {
  font-size: 26px;
  font-weight: 850;
  line-height: 34px;
}

.community-dialog-header p {
  margin-top: 2px;
  color: var(--community-muted);
  font-size: 11px;
}

.community-compose-mobile-header,
.community-detail-mobile-header,
.community-privacy-label,
.community-publish-arrow,
.community-comment-pinned {
  display: none;
}

.community-icon-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.62);
}

.community-compose-form {
  padding: 22px 30px 28px;
}

.community-type-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.community-type-options legend,
.community-field > span,
.community-compose-attachment-zone > span {
  margin-bottom: 8px;
  color: #5e584b;
  font-size: 11px;
  font-weight: 750;
}

.community-type-options legend {
  grid-column: 1 / 4;
}

.community-type-options label {
  position: relative;
}

.community-type-options input {
  position: absolute;
  opacity: 0;
}

.community-type-options span {
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  color: #6d6554;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: inset 0 0 0 1px rgba(72, 61, 31, 0.08);
  font-size: 12px;
  font-weight: 750;
}

.community-type-options input:checked + span {
  color: #18160f;
  background: rgba(255, 207, 50, 0.42);
  box-shadow: inset 0 0 0 1px rgba(225, 163, 0, 0.2);
}

.community-form-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.community-field {
  position: relative;
  display: grid;
}

.community-field input,
.community-field select,
.community-field textarea {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--community-ink);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 0 0 1px rgba(69, 58, 29, 0.08);
}

.community-field input,
.community-field select {
  height: 46px;
  padding: 0 14px;
  border-radius: 15px;
}

.community-content-field {
  margin-top: 16px;
}

.community-field textarea {
  height: 142px;
  resize: vertical;
  padding: 14px;
  border-radius: 17px;
  line-height: 22px;
}

.community-content-field > small {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: #9b9487;
  font-size: 9px;
}

.community-compose-attachment-zone {
  margin-top: 16px;
}

.community-media-picker { display: flex; min-height: 78px; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed rgba(18, 145, 122, 0.34); border-radius: 18px; color: #2f6e63; background: rgba(238, 251, 246, 0.46); cursor: pointer; }
.community-media-picker > .community-icon { width: 28px; height: 28px; }
.community-media-picker > span { display: grid; gap: 3px; }
.community-media-picker strong { color: var(--community-ink); font-size: 12px; }
.community-media-picker small,
.community-compose-media-item figcaption small { color: var(--community-muted); font-size: 9px; }
.community-media-picker input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.community-media-picker:focus-within { outline: 2px solid rgba(14, 143, 119, 0.42); outline-offset: 2px; }
.community-compose-media-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.community-compose-media-item { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr) 32px; align-items: center; gap: 10px; min-width: 0; margin: 0; padding: 8px; border-radius: 16px; background: rgba(255, 255, 255, 0.56); box-shadow: inset 0 0 0 1px rgba(70, 59, 29, 0.06); }
.community-compose-media-item > img,
.community-compose-media-item > video { width: 70px; height: 58px; border-radius: 12px; object-fit: cover; }
.community-compose-media-item figcaption { display: grid; min-width: 0; overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.community-compose-media-item > button { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, 0.7); }
.community-media-picker.is-compact { min-height: 74px; }

.community-compose-demo-attachment,
.community-compose-attachment {
  display: grid;
  min-height: 82px;
  grid-template-columns: 76px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 0 0 1px rgba(70, 59, 29, 0.06);
}

.community-compose-demo-attachment > img {
  width: 76px;
  height: 60px;
  border-radius: 13px;
  object-fit: cover;
}

.community-compose-demo-attachment > span,
.community-compose-attachment > div {
  display: grid;
  gap: 3px;
}

.community-compose-demo-attachment b,
.community-compose-attachment strong {
  font-size: 12px;
}

.community-compose-demo-attachment small,
.community-compose-attachment small {
  color: var(--community-muted);
  font-size: 9px;
}

.community-compose-demo-attachment i {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-style: normal;
}

.community-compose-demo-attachment i .community-icon {
  width: 15px;
  height: 15px;
}

.community-compose-demo-attachment i em {
  width: 86px;
  height: 3px;
  border-radius: 3px;
  background: #6bcbb8;
}

.community-compose-demo-attachment > button,
.community-compose-attachment > button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
}

.community-privacy-row {
  display: grid;
  width: 100%;
  min-height: 58px;
  grid-template-columns: 28px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 0 12px;
  border-radius: 17px;
  color: inherit;
  text-align: left;
  background: rgba(255, 255, 255, 0.4);
}

.community-privacy-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 12px; margin-top: 14px; }
.community-teacher-notify { display: flex; min-height: 58px; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 17px; background: rgba(255, 255, 255, 0.4); }
.community-teacher-notify > input { width: 18px; height: 18px; accent-color: #12917a; }
.community-teacher-notify > span { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 2px 7px; }
.community-teacher-notify .community-icon { grid-row: 1 / 3; width: 20px; height: 20px; }
.community-teacher-notify b { font-size: 11px; }
.community-teacher-notify small { color: var(--community-muted); font-size: 9px; }
.community-comments-empty { padding: 28px 14px; border-radius: 16px; color: var(--community-muted); background: rgba(255, 255, 255, 0.42); font-size: 11px; line-height: 18px; text-align: center; }
.practice-community-compose-modal { position: fixed; z-index: 3600; inset: 0; display: none; align-items: center; justify-content: center; padding: 24px; color: #17212f; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", sans-serif; }
.practice-community-compose-modal.is-open { display: flex; }
.practice-community-compose-backdrop { position: absolute; inset: 0; background: rgba(35, 31, 20, 0.22); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.practice-community-compose-sheet { position: relative; width: min(560px, 100%); max-height: calc(100dvh - 48px); overflow: auto; border: 1px solid rgba(255, 255, 255, 0.88); border-radius: 30px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(249, 255, 252, 0.82)); box-shadow: inset 0 1px 0 #fff, 0 34px 90px rgba(45, 55, 49, 0.2); backdrop-filter: blur(28px) saturate(1.12); -webkit-backdrop-filter: blur(28px) saturate(1.12); }
.practice-community-compose-heading { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 14px; padding: 24px 26px 18px; border-bottom: 1px solid rgba(78, 99, 92, 0.08); }
.practice-community-compose-heading > button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 17px; background: rgba(255, 255, 255, 0.76); box-shadow: inset 0 0 0 1px rgba(90, 111, 104, 0.08); }
.practice-community-compose-heading > button img { width: 20px; height: 20px; }
.practice-community-compose-heading h2, .practice-community-compose-heading p { margin: 0; }
.practice-community-compose-heading h2 { margin-top: 2px; font-size: 24px; line-height: 31px; }
.practice-community-compose-heading small { color: #0b9785; font-size: 10px; font-weight: 850; letter-spacing: 0.8px; }
.practice-community-compose-heading p { margin-top: 3px; color: #7b8894; font-size: 11px; }
.practice-community-compose-form { display: grid; gap: 14px; padding: 20px 26px 26px; }
.practice-community-question-card { display: grid; min-height: 66px; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 20px; background: linear-gradient(120deg, rgba(228, 253, 246, 0.86), rgba(255, 250, 226, 0.7)); box-shadow: inset 0 0 0 1px rgba(104, 193, 173, 0.14); }
.practice-community-question-card > img { width: 42px; height: 42px; padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.72); }
.practice-community-question-card > span { display: grid; min-width: 0; gap: 2px; }
.practice-community-question-card small { color: #0a8d7c; font-size: 10px; font-weight: 800; }
.practice-community-question-card strong { overflow: hidden; font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.practice-community-question-card em { padding: 7px 10px; border-radius: 12px; color: #8b6b12; background: rgba(255, 218, 102, 0.34); font-size: 9px; font-style: normal; font-weight: 800; }
.practice-community-content-field { display: grid; gap: 8px; }
.practice-community-content-field > span, .practice-community-audience legend { color: #596873; font-size: 11px; font-weight: 800; }
.practice-community-content-field textarea { width: 100%; min-height: 132px; resize: vertical; padding: 15px 16px; border: 1px solid rgba(111, 137, 129, 0.16); border-radius: 20px; outline: 0; color: #17212f; background: rgba(255, 255, 255, 0.74); box-shadow: inset 0 1px 0 #fff; font: inherit; font-size: 13px; font-weight: 500; line-height: 21px; }
.practice-community-content-field textarea:focus { border-color: rgba(11, 159, 140, 0.42); box-shadow: 0 0 0 4px rgba(14, 176, 154, 0.09); }
.practice-community-audience { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; border: 0; }
.practice-community-audience legend { margin-bottom: 8px; }
.practice-community-audience input { position: absolute; opacity: 0; pointer-events: none; }
.practice-community-audience span { display: grid; height: 38px; place-items: center; border: 1px solid rgba(128, 147, 141, 0.16); border-radius: 15px; background: rgba(255, 255, 255, 0.62); font-size: 11px; font-weight: 760; }
.practice-community-audience input:checked + span { border-color: rgba(7, 162, 142, 0.26); color: #087d70; background: rgba(222, 251, 243, 0.9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.76); }
.practice-community-teacher-notify { display: grid; min-height: 54px; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 11px; padding: 9px 12px; border-radius: 17px; background: rgba(255, 246, 211, 0.64); }
.practice-community-teacher-notify > input { width: 18px; height: 18px; accent-color: #12917a; }
.practice-community-teacher-notify > span { display: grid; gap: 2px; }
.practice-community-teacher-notify b { font-size: 11px; }
.practice-community-teacher-notify small { color: #817762; font-size: 9px; }
.practice-community-compose-actions { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
.practice-community-compose-actions button { height: 46px; border: 0; border-radius: 17px; font-size: 12px; font-weight: 850; }
.practice-community-compose-actions button:first-child { color: #64727d; background: rgba(255, 255, 255, 0.68); box-shadow: inset 0 0 0 1px rgba(99, 118, 112, 0.1); }
.practice-community-compose-actions button:last-child { color: #fff; background: linear-gradient(180deg, #18b9a5, #0a9a87); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 12px 24px -16px rgba(4, 118, 103, 0.76); }
body.practice-community-compose-open { overflow: hidden; }

.community-privacy-row > span {
  display: grid;
}

.community-privacy-row b {
  font-size: 12px;
}

.community-privacy-row small {
  color: var(--community-muted);
  font-size: 9px;
}

.community-form-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  color: #148573;
  font-size: 10px;
}

.community-form-note .community-icon {
  width: 15px;
  height: 15px;
}

.community-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.community-form-error {
  min-height: 16px;
  margin: 8px 0 0;
  color: #b13f2f;
  font-size: 10px;
}

/* Detail modal */
.community-detail-dialog {
  width: min(1180px, 100%);
}

.community-detail-mobile-author {
  display: none;
}

.community-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  align-items: start;
}

.community-detail-post {
  padding: 26px 30px 32px;
  border-right: 1px solid rgba(65, 54, 28, 0.07);
}

.community-detail-post > .community-post-author > button[data-community-follow] {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  color: #816100;
  background: rgba(255, 205, 44, 0.3);
  font-size: 11px;
  font-weight: 800;
}

.community-detail-topic {
  min-height: 26px;
  margin-top: 20px;
  padding: 0 10px;
  color: #118874;
  background: rgba(201, 240, 230, 0.54);
  font-size: 10px;
}

.community-detail-post > h3 {
  margin: 12px 0 0;
  font-size: 25px;
  line-height: 34px;
}

.community-detail-content {
  margin: 8px 0 0;
  color: var(--community-muted);
  font-size: 13px;
  line-height: 22px;
}

.community-detail-photo {
  width: 100%;
  height: 300px;
  margin-top: 18px;
  border-radius: 22px;
  object-fit: cover;
}

.community-related-practice {
  display: grid;
  width: 100%;
  min-height: 72px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 18px;
  color: inherit;
  text-align: left;
  background: rgba(255, 215, 78, 0.24);
}

.community-related-practice > span:first-child {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.community-related-practice > span:nth-child(2) {
  display: grid;
}

.community-related-practice small {
  color: var(--community-muted);
  font-size: 9px;
}

.community-related-practice em {
  color: #846200;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.community-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
}

.community-detail-actions > button,
.community-report-disclosure > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  color: #625b4d;
  background: transparent;
  font-size: 11px;
  list-style: none;
  cursor: pointer;
}

.community-report-disclosure form {
  display: grid;
  gap: 10px;
  width: 280px;
  margin-top: 8px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.community-report-disclosure label {
  display: grid;
  gap: 5px;
  font-size: 10px;
}

.community-report-disclosure select,
.community-report-disclosure textarea {
  width: 100%;
  border: 0;
  border-radius: 10px;
  background: #f7f3e8;
}

.community-comments {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 152px);
  overflow: auto;
  padding: 24px 26px 26px;
}

.community-comments-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.community-comments-heading h3,
.community-comments-heading span {
  margin: 0;
}

.community-comments-heading h3 {
  font-size: 19px;
}

.community-comments-heading span {
  color: var(--community-muted);
  font-size: 10px;
}

.community-comments-heading button {
  margin-left: auto;
  color: #8e6b00;
  background: transparent;
  font-size: 10px;
}

.community-comment-list {
  margin-top: 10px;
}

.community-comment {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  align-items: start;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(66, 54, 27, 0.07);
}

.community-comment header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.community-comment header strong {
  font-size: 11px;
}

.community-comment header time {
  margin-left: auto;
  color: #9c9589;
  font-size: 9px;
}

.community-comment p {
  margin: 5px 0 0;
  color: #5f594d;
  font-size: 11px;
  line-height: 18px;
}

.community-comment > button {
  padding: 5px;
  background: transparent;
}

.community-comment > button .community-icon {
  width: 17px;
  height: 17px;
}

.community-teacher-highlight {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 15px;
  background: rgba(205, 241, 231, 0.5);
}

.community-teacher-highlight b,
.community-teacher-highlight p {
  margin: 0;
  font-size: 10px;
}

.community-teacher-highlight p {
  margin-top: 3px;
  color: #53655e;
  line-height: 16px;
}

.community-comment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 16px;
}

.community-comment-form label {
  position: relative;
}

.community-comment-form textarea {
  width: 100%;
  min-height: 46px;
  resize: vertical;
  padding: 13px 60px 10px 13px;
  border: 0;
  border-radius: 16px;
  outline: 0;
  background: rgba(255, 255, 255, 0.66);
}

.community-comment-form label > small {
  position: absolute;
  right: 10px;
  bottom: 8px;
  color: #9f978a;
  font-size: 8px;
}

.community-comment-form .community-form-error {
  grid-column: 1 / 3;
}

.community-detail-loading {
  display: grid;
  min-height: 380px;
  place-items: center;
  align-content: center;
  gap: 12px;
}

/* Story */
.community-story-modal {
  z-index: 1180;
}

.community-story-viewer {
  position: relative;
  display: grid;
  width: min(1296px, 100%);
  max-height: calc(100vh - 56px);
  grid-template-columns: minmax(0, 1fr) 420px;
  overflow: hidden;
  border-radius: 30px;
  background: rgba(255, 254, 247, 0.92);
  box-shadow: 0 36px 90px rgba(44, 33, 8, 0.22);
}

.community-story-progress {
  position: absolute;
  z-index: 3;
  top: 14px;
  right: 18px;
  left: 18px;
  display: flex;
  gap: 5px;
}

.community-story-progress i {
  height: 3px;
  flex: 1;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.42);
}

.community-story-progress i.is-complete,
.community-story-progress i.is-current {
  background: rgba(255, 255, 255, 0.92);
}

.community-story-viewer > header {
  position: absolute;
  z-index: 4;
  top: 28px;
  right: 436px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.community-story-viewer > header > span:not(.community-avatar) {
  display: grid;
  flex: 1;
}

.community-story-viewer > header small {
  color: rgba(255, 255, 255, 0.76);
  font-size: 9px;
}

.community-story-viewer > header button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: rgba(18, 16, 11, 0.2);
}

.community-story-media {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: #2a2418;
}

.community-story-media > img {
  width: 100%;
  height: 100%;
  min-height: 720px;
  object-fit: cover;
}

.community-story-media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16, 13, 8, 0.28), transparent 36%, rgba(14, 11, 7, 0.58));
  content: "";
}

.community-story-media > div {
  position: absolute;
  z-index: 2;
  right: 46px;
  bottom: 48px;
  left: 46px;
  color: #fff;
}

.community-story-media h2,
.community-story-media p {
  margin: 0;
}

.community-story-media h2 {
  font-size: 30px;
  line-height: 40px;
}

.community-story-media p {
  max-width: 590px;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  line-height: 22px;
}

.community-story-media span {
  display: inline-flex;
  margin-top: 14px;
  padding: 7px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 10px;
}

.community-story-conversation {
  max-height: calc(100vh - 56px);
  overflow: auto;
  padding: 34px 26px 24px;
}

.community-story-conversation > header h2,
.community-story-conversation > header p {
  margin: 0;
}

.community-story-conversation > header h2 {
  font-size: 21px;
}

.community-story-conversation > header p {
  margin-top: 3px;
  color: var(--community-muted);
  font-size: 10px;
}

.community-story-likes {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 0 14px;
  border-radius: 18px;
  background: rgba(255, 209, 49, 0.2);
}

.community-story-likes span {
  color: var(--community-muted);
  font-size: 10px;
}

.community-story-conversation > h3 {
  margin: 22px 0 6px;
  font-size: 13px;
}

.community-story-conversation > article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  padding: 12px 0;
}

.community-story-conversation > article > span {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 8px;
}

.community-story-conversation article b,
.community-story-conversation article small {
  font-size: 10px;
}

.community-story-conversation article small {
  color: var(--community-muted);
}

.community-story-conversation article p {
  grid-column: 1 / 3;
  margin: 0;
  color: #5f594d;
  font-size: 11px;
  line-height: 17px;
}

.community-story-conversation form {
  position: sticky;
  bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  margin-top: 16px;
  padding-top: 10px;
  background: rgba(255, 254, 247, 0.92);
}

.community-story-conversation form label {
  display: grid;
  height: 44px;
  grid-template-columns: 20px 20px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 0 11px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
}

.community-story-conversation form label .community-icon {
  width: 17px;
  height: 17px;
}

.community-story-conversation form input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 11px;
}

.community-story-conversation form > button {
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--community-yellow);
}

/* Action sheet */
.community-action-sheet {
  z-index: 1220;
  align-items: flex-end;
  padding: 20px;
}

.community-actions-panel {
  position: relative;
  width: min(430px, 100%);
  padding: 24px;
  border-radius: 28px;
  background: rgba(255, 254, 248, 0.94);
  box-shadow: 0 30px 70px rgba(50, 38, 10, 0.22);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.community-actions-handle {
  display: none;
}

.community-actions-panel > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
}

.community-actions-panel h2,
.community-actions-panel p,
.community-actions-panel h3 {
  margin: 0;
}

.community-actions-panel h2 {
  font-size: 21px;
}

.community-actions-panel header p {
  margin-top: 4px;
  color: var(--community-muted);
  font-size: 10px;
}

.community-actions-panel header button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.66);
}

.community-share-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 22px;
}

.community-share-options button {
  display: grid;
  min-height: 100px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border-radius: 20px;
  color: inherit;
  background: rgba(255, 255, 255, 0.62);
}

.community-share-options button > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 16px;
  background: rgba(255, 205, 43, 0.24);
}

.community-share-options button b {
  font-size: 11px;
}

.community-copy-feedback {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--community-muted);
  font-size: 9px;
}

.community-copy-feedback .community-icon {
  width: 14px;
  height: 14px;
}

.community-actions-panel hr {
  height: 1px;
  margin: 20px 0 16px;
  border: 0;
  background: rgba(68, 56, 29, 0.08);
}

.community-actions-panel > h3 {
  font-size: 12px;
}

.community-action-row {
  display: flex;
  width: 100%;
  height: 52px;
  align-items: center;
  gap: 12px;
  padding: 0;
  color: inherit;
  background: transparent;
  font-size: 12px;
  text-align: left;
}

.community-action-row.is-danger {
  color: #b34735;
}

/* Admin */
.community-admin-panel,
.community-admin-standalone {
  width: min(1296px, 100%);
  margin: 24px auto 0;
}

.community-admin-card {
  padding: 24px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.64);
}

.community-admin-heading,
.community-admin-tools,
.community-admin-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.community-admin-heading {
  justify-content: space-between;
}

.community-admin-heading h2,
.community-admin-heading p {
  margin: 0;
}

.community-admin-heading p {
  color: var(--community-muted);
  font-size: 11px;
}

.community-admin-tools select,
.community-admin-tools button {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.68);
}

.community-admin-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.community-admin-row {
  justify-content: space-between;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.46);
}

.community-admin-row > div:first-child {
  display: grid;
  gap: 4px;
}

.community-admin-row small,
.community-admin-state {
  color: var(--community-muted);
  font-size: 11px;
}

.community-live-region {
  position: fixed;
  z-index: 1600;
  right: 20px;
  bottom: 24px;
  max-width: min(360px, calc(100vw - 40px));
  padding: 12px 16px;
  border-radius: 16px;
  color: #fff;
  background: rgba(25, 24, 18, 0.9);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
  font-size: 12px;
}

/* Compact desktop/tablet keeps the Figma desktop grammar. */
@media (min-width: 981px) and (max-width: 1180px) {
  .community-shell {
    padding: 0;
  }

  .community-home-stage,
  .community-subview {
    width: calc(100% - 40px);
    padding-top: 88px;
  }

  .community-top-row {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 48%);
    gap: 20px;
  }

  .community-main-grid,
  .community-channel-layout {
    grid-template-columns: minmax(0, 1.48fr) minmax(300px, 0.82fr);
    gap: 18px;
  }

  .community-event-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(290px, 0.65fr);
  }

  .community-post-card {
    padding-inline: 20px;
  }

  .community-post-actions {
    gap: 22px;
  }

  .community-live-card,
  .community-rail-card {
    padding-inline: 20px;
  }

  .community-moment-list {
    gap: 17px;
  }

  .community-detail-dialog {
    width: calc(100vw - 40px);
  }

  .community-detail-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  }

  .community-search-layout,
  .community-notification-layout {
    grid-template-columns: minmax(0, 1fr) 310px;
  }
}

/* Mobile — node 456:238, 390 × 844. */
@media (max-width: 980px) {
  body.view-community {
    min-height: 100dvh;
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
    background: linear-gradient(150deg, #ffc928 0%, #ffe271 44%, #fff0b6 73%, #fffdf6 100%);
  }

  body.view-community .app-shell,
  body.view-community .main {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  .community-shell {
    width: 100vw;
    min-height: 100dvh;
    margin-top: 0;
    margin-left: calc((100% - 100vw) / 2);
    padding: 0;
    overflow: hidden;
    background:
      radial-gradient(circle at 88% 4%, rgba(255, 255, 255, 0.54), transparent 27%),
      linear-gradient(150deg, #ffc928 0%, #ffe271 44%, #fff0b6 73%, #fffdf6 100%);
  }

  .community-home-stage {
    display: flex;
    width: min(362px, calc(100% - 28px));
    flex-direction: column;
    margin: 0 auto;
    padding: 14px 0 calc(104px + env(safe-area-inset-bottom));
  }

  .community-top-row {
    display: contents;
  }

  .community-hero {
    order: 1;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    grid-template-columns: 44px minmax(0, 1fr) 90px;
    gap: 12px;
  }

  .community-hero-avatar {
    display: block;
  }

  .community-avatar-hero {
    width: 44px;
    height: 44px;
  }

  .community-hero-copy {
    align-self: center;
    padding: 0;
  }

  .community-hero-date,
  .community-copy-desktop {
    display: none;
  }

  .community-copy-mobile {
    display: inline;
  }

  .community-post-content > .community-copy-mobile {
    display: inline;
  }

  .community-hero h1 {
    margin: 0;
    overflow: hidden;
    font-size: 18px;
    letter-spacing: -0.3px;
    line-height: 23px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .community-hero-subtitle {
    margin-top: 1px;
    color: #7e714d;
    font-size: 11px;
    line-height: 16px;
  }

  .community-hero-tools {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  .community-hero-tools button {
    position: relative;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.46);
  }

  .community-hero-tools button i {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 5px;
    height: 5px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: #e85252;
  }

  .community-moments {
    order: 2;
    margin-top: 20px;
  }

  .community-moments-heading {
    min-height: 20px;
    gap: 0;
  }

  .community-moments-heading h2 {
    font-size: 14px;
  }

  .community-moments-heading span {
    display: none;
  }

  .community-moments-heading small {
    display: block;
  }

  .community-moment-list {
    justify-content: space-between;
    gap: 0;
    margin-top: 1px;
  }

  .community-moment:nth-child(n + 6) {
    display: none;
  }

  .community-moment {
    width: 58px;
    gap: 3px;
  }

  .community-moment-ring {
    width: 48px;
    height: 48px;
    border-width: 1.6px;
    box-shadow: 0 0 0 2px rgba(255, 237, 166, 0.42);
  }

  .community-avatar-moment,
  .community-avatar-moment .community-icon {
    width: 42px;
    height: 42px;
  }

  .community-moment b {
    width: 58px;
    font-size: 9px;
    line-height: 12px;
  }

  .community-composer-launcher,
  .community-composer-card {
    order: 3;
    width: 100%;
    height: 80px;
    grid-template-columns: 42px minmax(0, 1fr) 44px;
    grid-template-rows: 38px 24px;
    gap: 0 10px;
    margin-top: 10px;
    padding: 9px 10px 9px 13px;
    border-radius: 24px;
  }

  .community-home-stage .community-composer-launcher {
    margin-top: 4px;
  }

  .community-avatar-launcher {
    width: 42px;
    height: 42px;
  }

  .community-composer-prompt {
    align-self: center;
  }

  .community-composer-prompt strong {
    font-size: 14px;
  }

  .community-composer-prompt small {
    display: none;
  }

  .community-composer-tools {
    align-self: center;
    gap: 6px;
  }

  .community-composer-tools i {
    width: 25px;
    height: 25px;
    background: transparent;
  }

  .community-composer-tools i:nth-child(2) {
    display: none;
  }

  .community-composer-tools .community-icon {
    width: 19px;
    height: 19px;
  }

  .community-composer-action {
    width: 44px;
    height: 44px;
    border-radius: 16px;
  }

  .community-channel-row {
    order: 4;
    height: 29px;
    margin-top: 20px;
    overflow: hidden;
  }

  .community-feed-tabs {
    width: 100%;
    height: 29px;
    justify-content: space-between;
    gap: 0;
  }

  .community-feed-tab {
    height: 29px;
    padding: 0 12px 8px;
    font-size: 13px;
  }

  .community-feed-tab:first-child {
    padding-left: 12px;
  }

  .community-feed-tab:nth-child(n + 6) {
    display: none;
  }

  .community-main-grid {
    display: flex;
    order: 5;
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    margin-top: 9px;
  }

  .community-load-more,
  .community-feed-end,
  .community-rail-card {
    display: none;
  }

  .community-post-card,
  .community-post-card.is-featured {
    width: 100%;
    min-height: 0;
    max-height: none;
    padding: 14px;
    border-radius: 26px;
  }

  .community-avatar-default {
    width: 40px;
    height: 40px;
  }

  .community-post-author {
    gap: 10px;
  }

  .community-post-author-copy strong {
    font-size: 13px;
    line-height: 17px;
  }

  .community-post-author-copy p {
    margin-top: 0;
    font-size: 9px;
    line-height: 13px;
  }

  .community-day-badge {
    display: none;
  }

  .community-card-more {
    width: 30px;
    height: 30px;
  }

  .community-post-open {
    gap: 3px;
    margin-top: 8px;
  }

  .community-post-author + .community-post-open {
    margin-top: 8px;
  }

  .community-post-title {
    font-size: 17px;
    letter-spacing: -0.3px;
    line-height: 23px;
  }

  .community-post-content {
    overflow: hidden;
    color: #766d5a;
    font-size: 11px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .community-post-content > .community-copy-desktop {
    display: none;
  }

  .community-post-tags,
  .community-teacher-reply,
  .community-moderation-actions {
    display: none;
  }

  .community-attachments {
    display: grid;
    margin-top: 9px;
  }

  .community-question-attachment {
    min-height: 58px;
    grid-template-columns: 36px minmax(0, 1fr) 70px;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 18px;
    background: linear-gradient(120deg, rgba(230, 252, 246, 0.84), rgba(255, 248, 218, 0.62));
    box-shadow: inset 0 0 0 1px rgba(111, 192, 174, 0.13);
  }

  .community-question-attachment .community-attachment-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.7);
  }

  .community-question-attachment small {
    overflow: hidden;
    color: #0b8d7c;
    font-size: 8px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .community-question-attachment strong {
    overflow: hidden;
    font-size: 10px;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .community-question-attachment .community-attachment-cta {
    min-height: 32px;
    justify-content: center;
    padding: 0 8px;
    border-radius: 12px;
    font-size: 9px;
  }

  .community-post-media {
    height: 170px;
    margin-top: 10px;
    border-radius: 20px;
  }

  .community-post-media > span {
    left: 12px;
    bottom: 10px;
    height: 34px;
    padding: 0 13px;
    border-radius: 17px;
    font-size: 9px;
  }

  .community-post-footer {
    min-height: 40px;
    margin-top: 5px;
  }

  .community-post-actions {
    justify-content: space-between;
    gap: 0;
  }

  .community-post-actions > button {
    gap: 6px;
    padding: 7px 3px;
    font-size: 10px;
  }

  .community-post-actions .community-icon {
    width: 19px;
    height: 19px;
  }

  .community-side-rail {
    gap: 0;
  }

  .community-live-card {
    width: 100%;
    min-height: 70px;
    max-height: 70px;
    grid-template-columns: 50px minmax(0, 1fr) 43px;
    grid-template-rows: 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 24px;
  }

  .community-live-icon {
    width: 50px;
    height: 50px;
    grid-row: auto;
    border-radius: 16px;
  }

  .community-live-copy {
    gap: 1px;
  }

  .community-live-copy small {
    font-size: 11px;
  }

  .community-live-copy strong {
    font-size: 14px;
    line-height: 18px;
  }

  .community-live-copy em {
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .community-live-meta {
    display: grid;
    width: 42px;
    height: 42px;
    grid-column: 3;
    grid-row: 1;
    place-items: center;
    margin: 0;
    border-radius: 15px;
    background: #1b1914;
  }

  .community-live-meta b,
  .community-live-meta i {
    display: none;
  }

  .community-live-meta::after {
    width: 22px;
    height: 22px;
    background: url("/assets/community/icon-send.svg?v=community-figma-v1-20260712") center / contain no-repeat;
    content: "";
    filter: invert(1);
  }

  .community-participant-stack {
    display: none;
  }

  /* Mobile subviews */
  .community-subview {
    width: min(362px, calc(100% - 28px));
    min-height: calc(100dvh - 28px);
    margin: 0 auto;
    padding: 0 0 calc(104px + env(safe-area-inset-bottom));
  }

  .community-subview-header {
    min-height: 66px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .community-subview-back {
    width: 42px;
    height: 42px;
    justify-content: center;
    padding: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.48);
  }

  .community-subview-back span {
    display: none;
  }

  .community-subview-header h1 {
    font-size: 18px;
    line-height: 24px;
  }

  .community-subview-header p {
    display: none;
  }

  .community-subview-header-actions > button {
    width: 42px;
    height: 42px;
    min-height: 42px;
    justify-content: center;
    padding: 0;
    border-radius: 16px;
    font-size: 0;
  }

  .community-subview-header-actions > button .community-icon {
    width: 20px;
    height: 20px;
  }

  .community-search-page .community-subview-header-actions > button {
    width: auto;
    min-width: 42px;
    padding: 0 4px;
    background: transparent;
    font-size: 12px;
  }

  .community-notification-page > .community-subview-header,
  .community-channel-page > .community-subview-header {
    display: none;
  }

  .community-notification-mobile-header {
    position: relative;
    display: flex;
    height: 62px;
    align-items: flex-start;
    justify-content: space-between;
  }

  .community-notification-mobile-header > div {
    padding-top: 10px;
  }

  .community-notification-mobile-header h1,
  .community-notification-mobile-header p {
    margin: 0;
  }

  .community-notification-mobile-header h1 {
    font-size: 24px;
    font-weight: 850;
    letter-spacing: -0.5px;
    line-height: 36px;
  }

  .community-notification-mobile-header p {
    margin-top: 2px;
    color: #8c6509;
    font-size: 10px;
    font-weight: 650;
    line-height: 15px;
  }

  .community-notification-mobile-header > button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    margin-top: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
  }

  .community-notification-mobile-header > button .community-icon {
    width: 20px;
    height: 20px;
  }

  .community-channel-mobile-header {
    display: grid;
    height: 62px;
    grid-template-columns: 44px minmax(0, 1fr) 78px;
    align-items: start;
    gap: 14px;
  }

  .community-channel-mobile-back {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    margin-top: 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
  }

  .community-channel-mobile-back .community-icon {
    width: 20px;
    height: 20px;
  }

  .community-channel-mobile-header > div {
    min-width: 0;
    padding-top: 10px;
  }

  .community-channel-mobile-header h1,
  .community-channel-mobile-header p {
    margin: 0;
    white-space: nowrap;
  }

  .community-channel-mobile-header h1 {
    overflow: hidden;
    font-size: 22px;
    font-weight: 850;
    letter-spacing: -0.5px;
    line-height: 33px;
    text-overflow: ellipsis;
  }

  .community-channel-mobile-header p {
    overflow: hidden;
    margin-top: 2px;
    color: #8b8477;
    font-size: 10px;
    line-height: 15px;
    text-overflow: ellipsis;
  }

  .community-channel-mobile-joined {
    width: 78px;
    height: 34px;
    margin-top: 18px;
    border-radius: 17px;
    color: #287a4a;
    background: rgba(237, 248, 240, 0.94);
    font-size: 11px;
    font-weight: 800;
  }

  .community-search-form {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 14px;
  }

  .community-search-form label {
    height: 50px;
    border-radius: 19px;
  }

  .community-search-form label button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 210, 54, 0.28);
  }

  .community-search-form label button .community-icon {
    width: 18px;
    height: 18px;
  }

  .community-search-form > button {
    display: none;
  }

  .community-search-tabs,
  .community-notification-tabs,
  .community-channel-tabs {
    width: 100%;
    justify-content: space-between;
    gap: 0;
    overflow: auto;
  }

  .community-search-tabs {
    height: 44px;
    padding: 4px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.46);
    overflow: hidden;
  }

  .community-search-tabs button {
    height: 36px;
    flex: 1 1 25%;
    padding: 0;
    border-radius: 18px;
  }

  .community-search-tabs button:last-child {
    display: none;
  }

  .community-search-tabs button.is-active {
    background: rgba(255, 213, 59, 0.28);
  }

  .community-search-tabs button.is-active::after {
    display: none;
  }

  .community-notification-tabs,
  .community-channel-tabs {
    display: grid;
    height: 44px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    margin-top: 14px;
    padding: 4px;
    overflow: hidden;
    border: 0;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.48);
  }

  .community-notification-tabs button,
  .community-channel-tabs button {
    height: 36px;
    flex: 1 1 25%;
    padding: 0;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 650;
  }

  .community-notification-tabs button.is-active,
  .community-channel-tabs button.is-active {
    color: #8d6100;
    background: rgba(255, 230, 154, 0.96);
    font-weight: 800;
  }

  .community-notification-tabs button.is-active::after,
  .community-channel-tabs button.is-active::after {
    display: none;
  }

  .community-notification-tabs button:nth-child(5) {
    display: none;
  }

  .community-channel-tabs {
    height: 42px;
    padding: 3px 4px;
    border-radius: 21px;
  }

  .community-search-layout,
  .community-notification-layout,
  .community-channel-layout,
  .community-event-layout,
  .community-profile-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 14px;
  }

  .community-search-results,
  .community-notification-list,
  .community-event-content,
  .community-reservation-card,
  .community-profile-overview,
  .community-profile-posts {
    padding: 16px;
    border-radius: 24px;
  }

  .community-search-results {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .community-search-results > header {
    min-height: 36px;
    padding: 0 2px;
  }

  .community-search-result {
    min-height: 116px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 14px 16px;
    border-bottom-color: rgba(66, 55, 26, 0.08);
    background: rgba(255, 255, 255, 0.58);
  }

  .community-search-result:first-of-type {
    border-radius: 24px 24px 0 0;
  }

  .community-search-result:last-of-type {
    border-bottom: 0;
    border-radius: 0 0 24px 24px;
  }

  .community-search-result.has-photo {
    grid-template-columns: 40px minmax(0, 1fr) 76px;
  }

  .community-search-result > img {
    width: 76px;
    height: 56px;
    align-self: center;
    border-radius: 14px;
  }

  .community-search-result strong {
    font-size: 13px;
    line-height: 19px;
  }

  .community-search-result p {
    display: none;
  }

  .community-search-result em {
    display: none;
  }

  .community-search-aside,
  .community-notification-side,
  .community-channel-layout > aside {
    display: none;
  }

  .community-search-page .community-search-aside {
    display: grid;
    gap: 0;
    margin-top: 12px;
  }

  .community-search-page .community-search-aside > section:first-child {
    display: none;
  }

  .community-search-page .community-search-aside > section:last-child {
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .community-search-page .community-search-aside > section:last-child > h2,
  .community-search-page .community-search-aside > section:last-child > p {
    display: inline;
  }

  .community-search-page .community-search-aside > section:last-child > p {
    margin-left: 16px;
  }

  .community-search-page .community-search-aside > section:last-child > button {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.58);
  }

  .community-search-page .community-search-aside > section:last-child > button:first-of-type {
    margin-top: 12px;
    border-radius: 22px 22px 0 0;
  }

  .community-search-page .community-search-aside > section:last-child > button:nth-of-type(2) {
    border-radius: 0 0 22px 22px;
  }

  .community-search-page .community-search-aside > section:last-child > button:nth-of-type(n + 3) {
    display: none;
  }

  .community-notification-layout {
    display: block;
    margin-top: 16px;
  }

  .community-notification-page .community-notification-list {
    height: 498px;
    padding: 12px 12px 4px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.64);
    box-shadow: 0 10px 24px rgba(93, 73, 21, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .community-notification-list > header {
    display: none;
  }

  .community-notification-row {
    position: relative;
    height: 80px;
    min-height: 80px;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
    padding: 0;
    border: 0;
  }

  .community-notification-row::after {
    position: absolute;
    right: 2px;
    bottom: 10px;
    left: 58px;
    height: 1px;
    background: rgba(98, 93, 82, 0.09);
    content: "";
  }

  .community-notification-row:last-child::after {
    display: none;
  }

  .community-notification-row.is-unread::before {
    top: 0;
    left: -14px;
    width: 3px;
    height: 62px;
    border-radius: 2px;
    background: #f5bd2d;
  }

  .community-notification-kind {
    position: absolute;
    z-index: 2;
    top: 28px;
    left: 30px;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: rgba(255, 231, 160, 0.98);
  }

  .community-notification-row:not(.is-unread) .community-notification-kind {
    background: rgba(240, 238, 231, 0.98);
  }

  .community-notification-kind .community-icon {
    width: 14px;
    height: 14px;
  }

  .community-notification-row .community-avatar.is-warm {
    background: #fff1b8;
  }

  .community-notification-row .community-avatar.is-cool,
  .community-channel-mobile-author .community-avatar.is-cool {
    background: #dff3fa;
  }

  .community-notification-row > span:nth-child(3) {
    display: block;
    min-width: 0;
  }

  .community-notification-row b {
    display: block;
    overflow: hidden;
    font-size: 12px;
    line-height: 18px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .community-notification-row p {
    overflow: hidden;
    margin-top: 7px;
    font-size: 11px;
    line-height: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .community-notification-row time {
    display: block;
    margin-top: 2px;
    color: #999184;
    font-size: 9px;
    line-height: 13px;
    white-space: nowrap;
  }

  .community-notification-quiet {
    display: grid;
    height: 72px;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin-top: 14px;
    padding: 13px 16px;
    border-radius: 22px;
    background: rgba(255, 241, 188, 0.64);
  }

  .community-notification-quiet > .community-icon {
    width: 20px;
    height: 20px;
    margin-top: 3px;
  }

  .community-notification-quiet > span {
    display: grid;
    gap: 6px;
  }

  .community-notification-quiet b {
    color: #755407;
    font-size: 12px;
    line-height: 18px;
  }

  .community-notification-quiet small {
    color: #8b7745;
    font-size: 10px;
    line-height: 15px;
  }

  .community-channel-desktop-hero,
  .community-channel-layout {
    display: none;
  }

  .community-channel-mobile-prompt {
    position: relative;
    display: block;
    height: 112px;
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 24px;
    background: rgba(255, 215, 87, 0.68);
    box-shadow: 0 10px 24px rgba(93, 73, 21, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .community-channel-mobile-prompt > small,
  .community-channel-mobile-prompt > h2,
  .community-channel-mobile-prompt > p {
    position: absolute;
    left: 15px;
    margin: 0;
  }

  .community-channel-mobile-prompt > small {
    top: 13px;
    color: #946400;
    font-size: 10px;
    font-weight: 800;
    line-height: 15px;
  }

  .community-channel-mobile-prompt > h2 {
    top: 37px;
    font-size: 18px;
    font-weight: 850;
    letter-spacing: -0.25px;
    line-height: 27px;
    white-space: nowrap;
  }

  .community-channel-mobile-prompt > p {
    top: 72px;
    color: #73644a;
    font-size: 10px;
    line-height: 15px;
  }

  .community-channel-mobile-prompt > button {
    position: absolute;
    top: 57px;
    right: 15px;
    display: flex;
    width: 68px;
    height: 38px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 17px;
    color: #815a08;
    background: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    font-weight: 800;
  }

  .community-channel-mobile-prompt > button .community-icon {
    width: 20px;
    height: 20px;
  }

  .community-channel-mobile-stack {
    display: grid;
    gap: 14px;
    margin-top: 14px;
  }

  .community-channel-mobile-post,
  .community-channel-mobile-event {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 24px;
    color: inherit;
    text-align: left;
    background: rgba(255, 255, 255, 0.64);
    box-shadow: 0 10px 24px rgba(93, 73, 21, 0.07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .community-channel-mobile-post {
    height: 292px;
  }

  .community-channel-mobile-author {
    position: absolute;
    top: 13px;
    left: 13px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .community-channel-mobile-author > span:last-child {
    display: grid;
    gap: 3px;
  }

  .community-channel-mobile-author b {
    font-size: 12px;
    line-height: 18px;
  }

  .community-channel-mobile-author small {
    color: #999184;
    font-size: 9px;
    line-height: 13px;
  }

  .community-channel-mobile-post > strong {
    position: absolute;
    top: 69px;
    left: 13px;
    width: 332px;
    font-size: 17px;
    font-weight: 850;
    letter-spacing: -0.2px;
    line-height: 25px;
  }

  .community-channel-mobile-post > p {
    position: absolute;
    top: 127px;
    left: 13px;
    width: 332px;
    margin: 0;
    color: #625d52;
    font-size: 11px;
    line-height: 16px;
    white-space: nowrap;
  }

  .community-channel-mobile-voice {
    position: absolute;
    top: 173px;
    left: 13px;
    width: 334px;
    height: 54px;
    border-radius: 18px;
    background: rgba(255, 243, 200, 0.78);
  }

  .community-channel-mobile-voice > i {
    position: absolute;
    top: 9px;
    left: 10px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 14px;
    background: #f7bc22;
  }

  .community-channel-mobile-voice > i .community-icon {
    width: 20px;
    height: 20px;
  }

  .community-channel-mobile-voice > em {
    position: absolute;
    top: 21px;
    left: 62px;
    width: 182px;
    height: 10px;
    border-radius: 5px;
    background: rgba(225, 193, 91, 0.84);
  }

  .community-channel-mobile-voice > small {
    position: absolute;
    top: 18px;
    left: 274px;
    color: #837968;
    font-size: 9px;
    font-weight: 650;
    line-height: 13px;
  }

  .community-channel-mobile-metrics {
    position: absolute;
    top: 251px;
    left: 15px;
    display: grid;
    height: 18px;
    grid-template-columns: 58px 56px 18px;
    align-items: center;
    gap: 18px;
  }

  .community-channel-mobile-metrics > span {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .community-channel-mobile-metrics .community-icon {
    width: 18px;
    height: 18px;
  }

  .community-channel-mobile-metrics b {
    color: #625c50;
    font-size: 10px;
    font-weight: 650;
    line-height: 15px;
  }

  .community-channel-mobile-metrics > span:first-child b {
    color: #8d5e00;
  }

  .community-channel-mobile-event {
    height: 150px;
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
  }

  .community-channel-mobile-live {
    position: absolute;
    top: 13px;
    left: 13px;
    display: flex;
    width: 78px;
    height: 28px;
    align-items: center;
    gap: 8px;
    padding-left: 10px;
    border-radius: 14px;
    color: #8d6100;
    background: rgba(255, 240, 179, 0.94);
    font-size: 10px;
    font-weight: 800;
  }

  .community-channel-mobile-live > i {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: #e98d14;
  }

  .community-channel-mobile-event > strong {
    position: absolute;
    top: 55px;
    left: 13px;
    font-size: 15px;
    font-weight: 850;
    line-height: 22px;
  }

  .community-channel-mobile-event > small {
    position: absolute;
    top: 83px;
    left: 13px;
    color: #817a6d;
    font-size: 10px;
    line-height: 15px;
  }

  .community-channel-mobile-event-clock {
    position: absolute;
    top: 111px;
    left: 13px;
  }

  .community-channel-mobile-event-clock .community-icon {
    width: 18px;
    height: 18px;
  }

  .community-channel-mobile-event > b {
    position: absolute;
    top: 95px;
    left: 245px;
    display: grid;
    width: 102px;
    height: 38px;
    place-items: center;
    border-radius: 17px;
    color: #493708;
    background: #f7bc22;
    font-size: 11px;
    font-weight: 800;
  }

  .community-event-hero {
    min-height: 340px;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 14px;
    padding: 24px 20px;
    border-radius: 26px;
  }

  .community-event-hero h2 {
    font-size: 30px;
    line-height: 38px;
  }

  .community-event-hero > img {
    height: 150px;
    border-radius: 19px;
  }

  .community-event-content > div {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .community-reservation-card {
    position: static;
  }

  .community-profile-overview {
    text-align: center;
  }

  .community-profile-overview > div:not(.community-profile-cover) {
    max-width: 300px;
    margin-inline: auto;
  }

  .community-profile-posts .community-post-card,
  .community-channel-feed .community-post-card {
    min-height: 352px;
    max-height: none;
  }

  /* Mobile modals */
  .community-modal,
  .community-story-modal {
    align-items: stretch;
    padding: 0;
    overflow: hidden;
  }

  body.community-modal-open .mobile-primary-dock {
    display: none;
  }

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

  /* Figma M3 · 发布动态 (390 × 844). */
  .community-compose-dialog {
    overflow-y: auto;
    background: linear-gradient(110deg, #ffd548 0%, #ffe581 49%, #fff6ce 100%);
  }

  .community-compose-dialog > .community-dialog-header {
    display: none;
  }

  .community-compose-mobile-header {
    display: flex;
    height: 72px;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
  }

  .community-compose-mobile-header > button {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.64);
  }

  .community-compose-mobile-header > button .community-icon {
    width: 22px;
    height: 22px;
  }

  .community-compose-mobile-header h2,
  .community-compose-mobile-header p {
    margin: 0;
  }

  .community-compose-mobile-header h2 {
    font-size: 20px;
    font-weight: 850;
    line-height: 25px;
  }

  .community-compose-mobile-header p {
    color: #81754f;
    font-size: 10px;
    line-height: 14px;
  }

  .community-compose-form {
    padding: 12px 14px 74px;
  }

  .community-type-options {
    height: 56px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 14px 36px;
    column-gap: 8px;
    row-gap: 6px;
  }

  .community-type-options legend,
  .community-field > span,
  .community-compose-attachment-zone > span,
  .community-privacy-label {
    margin: 0;
    color: #716846;
    font-size: 10px;
    font-weight: 650;
    line-height: 16px;
  }

  .community-type-options legend {
    grid-column: 1 / 4;
    line-height: 14px;
  }

  .community-type-options span {
    height: 36px;
    border-radius: 18px;
    color: #68614e;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: none;
    font-size: 12px;
    font-weight: 560;
  }

  .community-type-options input:checked + span {
    color: #5a4610;
    background: rgba(255, 220, 104, 0.78);
    box-shadow: none;
    font-weight: 700;
  }

  .community-form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    margin-top: 20px;
  }

  .community-field > span,
  .community-compose-attachment-zone > span,
  .community-privacy-label {
    margin-bottom: 4px;
  }

  .community-field input,
  .community-field select {
    height: 46px;
    padding: 0 16px;
    border-radius: 16px;
  }

  .community-field input,
  .community-field select,
  .community-field textarea {
    background: rgba(255, 255, 255, 0.7);
    box-shadow: none;
    font-size: 13px;
  }

  .community-content-field {
    margin-top: 20px;
  }

  .community-field textarea {
    height: 142px;
    resize: none;
    padding: 13px 14px 28px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 21px;
  }

  .community-content-field > small {
    right: 16px;
    top: -20px;
    bottom: auto;
    color: #93876a;
    font-size: 9px;
    line-height: 14px;
  }

  .community-compose-attachment-zone {
    margin-top: 20px;
  }

  .community-compose-demo-attachment,
  .community-compose-attachment {
    height: 94px;
    min-height: 94px;
    grid-template-columns: 92px minmax(0, 1fr) 36px;
    gap: 14px;
    padding: 10px;
    border-radius: 20px;
    background: rgba(255, 244, 197, 0.58);
    box-shadow: none;
  }

  .community-compose-demo-attachment > img {
    width: 92px;
    height: 74px;
    border-radius: 15px;
  }

  .community-compose-demo-attachment > span,
  .community-compose-attachment > div {
    align-content: center;
    gap: 2px;
  }

  .community-compose-demo-attachment b,
  .community-compose-attachment strong {
    font-size: 12px;
    line-height: 17px;
  }

  .community-compose-demo-attachment small,
  .community-compose-attachment small {
    font-size: 9px;
    line-height: 14px;
  }

  .community-compose-demo-attachment i {
    width: 152px;
    height: 24px;
    gap: 7px;
    margin-top: 4px;
    padding: 0 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.72);
  }

  .community-compose-demo-attachment i .community-icon {
    width: 14px;
    height: 14px;
  }

  .community-compose-demo-attachment i em {
    width: 68px;
  }

  .community-compose-demo-attachment > button,
  .community-compose-attachment > button {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.68);
  }

  .community-privacy-field {
    margin-top: 18px;
  }

  .community-privacy-label {
    display: block;
    margin-bottom: 6px;
  }

  .community-privacy-row {
    height: 54px;
    min-height: 54px;
    margin: 0;
    padding: 0 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.68);
  }

  .community-privacy-row > .community-icon:first-child {
    width: 22px;
    height: 22px;
  }

  .community-privacy-row b {
    font-size: 12px;
    line-height: 17px;
  }

  .community-privacy-row small {
    font-size: 9px;
    line-height: 13px;
  }

  .community-form-note {
    height: 36px;
    margin: 12px 0 0;
    padding: 0 12px;
    border-radius: 18px;
    color: #28715f;
    background: rgba(231, 248, 239, 0.76);
    font-size: 10px;
  }

  .community-form-note .community-icon {
    width: 16px;
    height: 16px;
  }

  .community-compose-form > .community-dialog-actions {
    position: fixed;
    z-index: 5;
    right: 0;
    bottom: 0;
    left: 0;
    height: 64px;
    margin: 0;
    padding: 8px 14px 10px;
    background: rgba(255, 255, 255, 0.9);
  }

  .community-compose-form > .community-dialog-actions .community-secondary-button {
    display: none;
  }

  .community-compose-form > .community-dialog-actions .community-primary-button {
    width: 100%;
    min-height: 46px;
    border-radius: 18px;
    background: #ffb812;
    box-shadow: none;
    font-size: 13px;
  }

  .community-publish-arrow {
    display: inline-flex;
  }

  .community-publish-arrow .community-icon {
    width: 16px;
    height: 16px;
  }

  .community-compose-form > .community-form-error {
    display: none;
  }

  /* Figma M4 · 动态详情 (390 × 844). */
  .community-detail-dialog {
    overflow-y: auto;
    background: linear-gradient(110deg, #ffd548 0%, #ffe581 49%, #fff6ce 100%);
  }

  .community-detail-dialog > .community-detail-header {
    display: none;
  }

  .community-detail-mobile-header {
    position: sticky;
    z-index: 5;
    top: 0;
    display: grid;
    height: 66px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    background: rgba(255, 247, 210, 0.86);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  .community-detail-mobile-header > button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.62);
  }

  .community-detail-mobile-header > button .community-icon {
    width: 22px;
    height: 22px;
  }

  .community-detail-mobile-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 850;
    line-height: 26px;
  }

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

  .community-detail-post {
    padding: 16px 14px 0;
    border: 0;
  }

  .community-detail-mobile-author {
    display: flex;
  }

  .community-detail-desktop-author {
    display: none;
  }

  .community-detail-post .community-post-author {
    height: 44px;
    gap: 14px;
  }

  .community-detail-post .community-avatar-large {
    width: 44px;
    height: 44px;
  }

  .community-detail-post .community-post-author-copy strong {
    font-size: 13px;
    line-height: 18px;
  }

  .community-detail-post .community-post-author-copy p {
    color: #81754f;
    font-size: 9px;
    line-height: 14px;
  }

  .community-detail-post .community-post-author-copy .community-badge,
  .community-detail-post .community-card-more {
    display: none;
  }

  .community-detail-post > .community-post-author > button[data-community-follow] {
    width: 78px;
    min-height: 36px;
    padding: 0;
    border-radius: 18px;
    color: #24715f;
    background: rgba(229, 248, 239, 0.88);
    font-size: 11px;
    font-weight: 750;
  }

  .community-detail-topic {
    height: 26px;
    min-height: 26px;
    margin-top: 12px;
    padding: 0 12px;
    color: #267967;
    background: rgba(238, 250, 241, 0.9);
    font-size: 10px;
  }

  .community-detail-post > h3 {
    margin: 14px 0 0;
    font-size: 21px;
    letter-spacing: -0.25px;
    line-height: 28px;
  }

  .community-detail-content {
    margin: 6px 0 0;
    overflow: hidden;
    color: #6e644e;
    font-size: 12px;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .community-detail-photo {
    height: 188px;
    margin-top: 26px;
    border-radius: 21px;
    object-position: center 48%;
  }

  .community-detail-post > .community-attachments {
    display: none;
  }

  .community-related-practice {
    height: 70px;
    min-height: 70px;
    grid-template-columns: 48px minmax(0, 1fr) 72px;
    gap: 12px;
    margin-top: 14px;
    padding: 10px 14px 10px 12px;
    border-radius: 20px;
    background: rgba(255, 245, 200, 0.62);
  }

  .community-related-practice > span:first-child {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #ffbd16;
  }

  .community-related-practice > span:first-child .community-copy-mobile {
    display: grid;
    place-items: center;
  }

  .community-related-practice > span:first-child .community-icon {
    width: 22px;
    height: 22px;
    color: #493708;
  }

  .community-related-practice b {
    font-size: 12px;
    line-height: 18px;
  }

  .community-related-practice small {
    font-size: 9px;
    line-height: 14px;
  }

  .community-related-practice em {
    display: grid;
    height: 36px;
    place-items: center;
    border-radius: 18px;
    color: #6f5510;
    background: rgba(255, 255, 255, 0.74);
    font-size: 10px;
  }

  .community-detail-actions {
    display: grid;
    height: 44px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 12px;
    padding: 0 8px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.64);
  }

  .community-detail-actions > button {
    justify-content: center;
    gap: 7px;
    padding: 0;
    color: #514b3d;
    font-size: 10px;
  }

  .community-detail-actions > button .community-icon {
    width: 19px;
    height: 19px;
  }

  .community-detail-actions > :nth-child(n + 5),
  .community-detail-post > .community-moderation-actions {
    display: none;
  }

  .community-comments {
    position: static;
    max-height: none;
    padding: 10px 14px 94px;
  }

  .community-comments-heading {
    height: 32px;
  }

  .community-comments-heading h3 {
    font-size: 17px;
    line-height: 24px;
  }

  .community-comments-heading span {
    color: #665f4e;
    font-size: 11px;
  }

  .community-comments-heading button {
    height: 32px;
    padding: 0 16px;
    border-radius: 16px;
    color: #8c6712;
    background: rgba(255, 237, 163, 0.64);
    font-size: 9px;
  }

  .community-comment-list {
    margin-top: 10px;
  }

  .community-comment-list > .community-comment:nth-child(n + 2),
  .community-teacher-highlight {
    display: none;
  }

  .community-comment {
    position: relative;
    height: 94px;
    grid-template-columns: 38px minmax(0, 1fr) 22px;
    gap: 10px;
    padding: 12px;
    border: 0;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.64);
  }

  .community-comment .community-avatar-small {
    width: 38px;
    height: 38px;
  }

  .community-comment header strong {
    font-size: 11px;
    line-height: 16px;
  }

  .community-comment header time,
  .community-comment header .community-badge {
    display: none;
  }

  .community-comment p {
    margin-top: 4px;
    overflow: hidden;
    color: #655f51;
    font-size: 9px;
    line-height: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .community-comment-pinned {
    display: inline-flex;
    height: 18px;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    padding: 0 8px;
    border-radius: 9px;
    color: #28715f;
    background: rgba(231, 248, 239, 0.88);
    font-size: 8px;
    font-weight: 700;
  }

  .community-comment-pinned .community-icon {
    width: 12px;
    height: 12px;
  }

  .community-comment > button {
    padding: 0;
  }

  .community-comment-form {
    position: fixed;
    z-index: 6;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 76px;
    grid-template-columns: minmax(0, 1fr) 50px;
    align-items: start;
    gap: 8px;
    margin: 0;
    padding: 8px 0 18px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .community-comment-form textarea {
    height: 50px;
    min-height: 50px;
    resize: none;
    padding: 15px 14px;
    border-radius: 25px;
    background: rgba(245, 243, 234, 0.92);
    font-size: 10px;
    line-height: 20px;
  }

  .community-comment-form label > small,
  .community-comment-form > .community-form-error,
  .community-comment-form .community-primary-button > span {
    display: none;
  }

  .community-comment-form .community-primary-button {
    width: 50px;
    height: 50px;
    min-height: 50px;
    padding: 0;
    border-radius: 50%;
    background: #ffb812;
    box-shadow: none;
  }

  .community-comment-form .community-primary-button .community-icon {
    width: 22px;
    height: 22px;
  }

  .community-story-viewer {
    display: block;
    width: 100%;
    max-height: 100dvh;
    min-height: 100dvh;
    overflow: auto;
    border-radius: 0;
  }

  .community-story-viewer > header {
    position: absolute;
    top: 24px;
    right: 14px;
    left: 14px;
  }

  .community-story-media {
    min-height: 64dvh;
  }

  .community-story-media > img {
    min-height: 64dvh;
  }

  .community-story-media > div {
    right: 20px;
    bottom: 28px;
    left: 20px;
  }

  .community-story-media h2 {
    font-size: 23px;
    line-height: 31px;
  }

  .community-story-conversation {
    max-height: none;
    min-height: 36dvh;
    padding: 22px 16px 92px;
  }

  .community-story-conversation form {
    position: fixed;
    right: 12px;
    bottom: 12px;
    left: 12px;
    padding: 8px;
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(42, 31, 8, 0.12);
  }

  .community-action-sheet {
    padding: 0;
  }

  .community-actions-panel {
    width: 100%;
    min-height: 484px;
    padding: 28px 20px calc(24px + env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0;
  }

  .community-actions-handle {
    display: block;
    width: 38px;
    height: 4px;
    margin: -16px auto 16px;
    border-radius: 4px;
    background: rgba(83, 75, 60, 0.2);
  }

  .community-share-options {
    gap: 10px;
  }

  .community-share-options button {
    min-height: 96px;
  }

  /* Figma mobile event, profile, story and action surfaces (M6–M9). */
  body.community-subview-event {
    overflow: hidden;
  }

  body.community-subview-event > .mobile-primary-dock {
    display: none;
  }

  .community-event-page {
    position: fixed;
    z-index: 210;
    inset: 0;
    min-height: 100dvh;
    overflow-y: auto;
    background: linear-gradient(94deg, #ffc928 2.6%, #ffe889 39%, #fff5ce 78%, #fffefa 127%);
  }

  .community-event-page > .community-subview-header,
  .community-profile-page > .community-subview-header {
    position: relative;
    z-index: 6;
    width: calc(100% - 28px);
    min-height: 72px;
    margin: 0 auto;
    border: 0;
  }

  .community-event-page > .community-subview-header h1,
  .community-profile-page > .community-subview-header h1 {
    font-size: 20px;
    line-height: 30px;
  }

  .community-event-page > .community-subview-header :is(.community-subview-back, .community-subview-header-actions > button),
  .community-profile-page > .community-subview-header :is(.community-subview-back, .community-subview-header-actions > button) {
    width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.58);
  }

  .community-event-page > :is(.community-event-hero, .community-event-layout),
  .community-profile-page > .community-profile-layout {
    display: none;
  }

  .community-event-mobile {
    position: absolute;
    top: 0;
    right: 14px;
    left: 14px;
    display: block;
    height: 844px;
  }

  .community-event-mobile-hero {
    position: absolute;
    top: 76px;
    left: 0;
    width: 100%;
    height: 226px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 24px;
    box-shadow: 0 10px 26px rgba(93, 73, 21, 0.08);
  }

  .community-event-mobile-hero > img { width: 100%; height: 100%; object-fit: cover; }
  .community-event-mobile-hero::after { position: absolute; right: 0; bottom: 0; left: 0; height: 142px; background: rgba(36, 29, 16, 0.44); content: ""; }
  .community-event-mobile-live { position: absolute; z-index: 2; top: 13px; left: 13px; display: flex; height: 28px; align-items: center; gap: 8px; padding: 0 10px; border-radius: 14px; color: #8d6100; background: rgba(255, 240, 179, 0.92); font-size: 10px; font-weight: 800; }
  .community-event-mobile-live i { width: 8px; height: 8px; border-radius: 50%; background: #e98d14; }
  .community-event-mobile-hero > div { position: absolute; z-index: 2; top: 121px; left: 15px; color: #fff; }
  .community-event-mobile-hero h2 { margin: 0; font-size: 24px; line-height: 36px; }
  .community-event-mobile-hero p { margin: 2px 0 0; color: #fff1d3; font-size: 13px; line-height: 19px; }
  .community-event-mobile-hero small { display: block; margin-top: 11px; color: #f0e4cc; font-size: 10px; line-height: 15px; }

  .community-event-mobile-meta { position: absolute; top: 316px; left: 0; display: grid; width: 100%; height: 76px; grid-template-columns: 116px 116px 1fr; padding: 15px 13px 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 22px; background: rgba(255, 255, 255, 0.62); box-shadow: 0 10px 26px rgba(93, 73, 21, 0.08); backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); }
  .community-event-mobile-meta > div { display: grid; align-content: start; justify-items: start; }
  .community-event-mobile-meta .community-icon { width: 20px; height: 20px; }
  .community-event-mobile-meta b { margin-top: 7px; color: #4a453c; font-size: 10px; line-height: 15px; }

  .community-event-mobile-plan { position: absolute; top: 414px; left: 0; width: 100%; }
  .community-event-mobile-plan > h2 { margin: 0; color: #343129; font-size: 15px; line-height: 22px; }
  .community-event-mobile-plan > p { margin: 6px 0 0; color: #6a6459; font-size: 11px; line-height: 16px; }
  .community-event-mobile-agenda { display: grid; height: 146px; margin-top: 21px; padding: 9px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 22px; background: rgba(255, 255, 255, 0.6); box-shadow: 0 10px 26px rgba(93, 73, 21, 0.08); backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); }
  .community-event-mobile-agenda > div { display: grid; height: 44px; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
  .community-event-mobile-agenda > div > b { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 12px; color: #287a4a; background: rgba(237, 248, 240, 0.96); font-size: 9px; }
  .community-event-mobile-agenda > div > b.is-gold { color: #8d6100; background: rgba(255, 230, 154, 0.96); }
  .community-event-mobile-agenda strong { color: #413d34; font-size: 11px; }
  .community-event-mobile-agenda span { padding-right: 14px; color: #817a6d; font-size: 9px; }

  .community-event-mobile-host { position: absolute; top: 640px; left: 0; display: grid; width: 100%; height: 72px; grid-template-columns: 48px minmax(0, 1fr) 72px; align-items: center; gap: 16px; padding: 0 12px; border-radius: 22px; color: #3b372f; text-align: left; background: rgba(255, 243, 202, 0.7); }
  .community-event-mobile-host > span { display: grid; gap: 3px; }
  .community-event-mobile-host > span b { font-size: 12px; line-height: 18px; }
  .community-event-mobile-host > span small { color: #81786a; font-size: 10px; line-height: 15px; }
  .community-event-mobile-host > em { display: flex; height: 34px; align-items: center; justify-content: center; gap: 5px; border-radius: 16px; color: #287a4a; background: rgba(237, 248, 240, 0.94); font-size: 10px; font-style: normal; font-weight: 800; }
  .community-event-mobile-host > em .community-icon { width: 20px; height: 20px; }
  .community-event-mobile-participants { position: absolute; top: 726px; left: 0; display: flex; width: 100%; height: 42px; align-items: center; border-radius: 18px; background: rgba(255, 255, 255, 0.52); }
  .community-event-mobile-participants > div { display: flex; margin-left: 10px; }
  .community-event-mobile-participants .community-avatar-tiny { width: 32px; height: 32px; }
  .community-event-mobile-participants .community-avatar-tiny + .community-avatar-tiny { margin-left: -4px; }
  .community-event-mobile-participants > span { margin-left: 20px; color: #6c6559; font-size: 10px; }
  .community-event-mobile-participants > .community-icon { position: absolute; top: 12px; right: 20px; width: 18px; height: 18px; }
  .community-event-reserve-footer { position: fixed; z-index: 220; right: 0; bottom: 0; left: 0; height: 66px; padding: 8px 14px 10px; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(13px); -webkit-backdrop-filter: blur(13px); }
  .community-event-reserve-footer button { display: flex; width: 100%; height: 48px; align-items: center; justify-content: center; gap: 12px; border-radius: 19px; color: #493708; background: #f7bc22; font-size: 13px; font-weight: 850; }
  .community-event-reserve-footer .community-icon { width: 20px; height: 20px; }

  .community-profile-page { position: relative; min-height: 722px; }
  .community-profile-mobile { position: relative; display: block; width: 100%; height: 650px; }
  .community-profile-mobile-card { position: absolute; top: 4px; left: 0; width: 100%; height: 214px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 26px; background: rgba(255, 255, 255, 0.64); box-shadow: 0 10px 24px rgba(93, 73, 21, 0.07); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .community-profile-mobile-cover { position: absolute; top: 0; left: 0; width: 100%; height: 92px; background: linear-gradient(90deg, rgba(255, 211, 77, 0.86), rgba(255, 244, 202, 0.68)); }
  .community-profile-mobile-card::after { position: absolute; top: -61px; left: 239px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, 0.42); content: ""; }
  .community-profile-mobile-card > .community-avatar-profile { position: absolute; z-index: 2; top: 55px; left: 17px; width: 72px; height: 72px; }
  .community-profile-mobile-card > h2 { position: absolute; z-index: 2; top: 63px; left: 107px; margin: 0; font-size: 21px; line-height: 31px; }
  .community-profile-mobile-card > small { position: absolute; z-index: 2; top: 94px; left: 107px; color: #756e62; font-size: 10px; line-height: 15px; }
  .community-profile-mobile-card > em { position: absolute; z-index: 2; top: 65px; right: 17px; display: grid; width: 68px; height: 26px; place-items: center; border-radius: 13px; color: #287a4a; background: rgba(237, 248, 240, 0.96); font-size: 9px; font-style: normal; font-weight: 800; }
  .community-profile-mobile-card > p { position: absolute; z-index: 2; top: 137px; right: 17px; left: 17px; margin: 0; color: #5f5a50; font-size: 11px; line-height: 16px; }
  .community-profile-mobile-card > div:last-child { position: absolute; z-index: 2; top: 175px; right: 17px; left: 17px; display: grid; grid-template-columns: minmax(0, 206px) 110px; gap: 10px; }
  .community-profile-mobile-card > div:last-child button { display: flex; height: 34px; align-items: center; justify-content: center; gap: 8px; border-radius: 16px; color: #493708; background: #f7bc22; font-size: 11px; font-weight: 800; }
  .community-profile-mobile-card > div:last-child button + button { color: #5b554b; background: rgba(243, 240, 231, 0.96); }
  .community-profile-mobile-card > div:last-child .community-icon { width: 20px; height: 20px; }
  .community-profile-mobile-stats { position: absolute; top: 232px; left: 0; display: grid; width: 100%; height: 74px; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 11px 21px 0; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 22px; background: rgba(255, 255, 255, 0.58); box-shadow: 0 10px 24px rgba(93, 73, 21, 0.07); }
  .community-profile-mobile-stats dt { font-size: 19px; font-weight: 850; line-height: 28px; }
  .community-profile-mobile-stats > div:first-child dt { color: #b77b00; }
  .community-profile-mobile-stats dd { margin: 3px 0 0; color: #8c8477; font-size: 9px; line-height: 13px; }
  .community-profile-mobile-badges { position: absolute; top: 320px; left: 0; display: grid; width: 100%; height: 48px; grid-template-columns: 1fr 1fr; align-items: center; border-radius: 18px; background: rgba(255, 242, 194, 0.62); }
  .community-profile-mobile-badges > span { display: flex; align-items: center; gap: 10px; padding-left: 12px; color: #765407; }
  .community-profile-mobile-badges .community-icon { width: 20px; height: 20px; }
  .community-profile-mobile-badges b { font-size: 11px; }
  .community-profile-mobile-tabs { position: absolute; top: 382px; left: 0; display: grid; width: 100%; height: 42px; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 3px 4px; border-radius: 21px; background: rgba(255, 255, 255, 0.46); }
  .community-profile-mobile-tabs button { height: 36px; border-radius: 18px; color: #655f53; background: transparent; font-size: 11px; }
  .community-profile-mobile-tabs button.is-active { color: #8d6100; background: rgba(255, 230, 154, 0.96); font-weight: 800; }
  .community-profile-mobile-post { position: absolute; top: 438px; left: 0; width: 100%; height: 212px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 24px; background: rgba(255, 255, 255, 0.62); box-shadow: 0 10px 24px rgba(93, 73, 21, 0.07); backdrop-filter: blur(11px); -webkit-backdrop-filter: blur(11px); }
  .community-profile-mobile-post-open { position: absolute; z-index: 1; inset: 0; width: 100%; color: inherit; text-align: left; background: transparent; }
  .community-profile-mobile-post-open > small { position: absolute; top: 13px; left: 13px; color: #8e877a; font-size: 9px; line-height: 13px; }
  .community-profile-mobile-post-open > h2 { position: absolute; top: 39px; left: 13px; width: 210px; margin: 0; font-size: 15px; line-height: 22px; }
  .community-profile-mobile-post-open > p { position: absolute; top: 89px; left: 13px; margin: 0; color: #6d665a; font-size: 10px; line-height: 15px; }
  .community-profile-mobile-post-open > img { position: absolute; top: 0; right: 0; width: 122px; height: 144px; object-fit: cover; }
  .community-profile-mobile-post-open > span { position: absolute; top: 125px; left: 13px; display: grid; width: 82px; height: 26px; place-items: center; border-radius: 13px; color: #287a4a; background: rgba(237, 248, 240, 0.94); font-size: 10px; }
  .community-profile-mobile-post > footer { position: absolute; z-index: 2; top: 171px; left: 13px; display: flex; align-items: center; gap: 32px; }
  .community-profile-mobile-post > footer button { display: flex; height: 26px; align-items: center; gap: 6px; color: #625c50; background: transparent; font-size: 10px; }
  .community-profile-mobile-post > footer button:first-child { color: #8d5e00; }
  .community-profile-mobile-post > footer .community-icon { width: 18px; height: 18px; }

  .community-story-modal { background: #201a0e; }
  .community-story-viewer { width: 100%; height: 100dvh; max-height: 100dvh; min-height: 100dvh; overflow: hidden; background: #201a0e; }
  .community-story-media { position: absolute; inset: 0; height: 100dvh; min-height: 100dvh; }
  .community-story-media > img { width: 100%; height: 100%; min-height: 100dvh; object-fit: cover; }
  .community-story-media::after { background: linear-gradient(180deg, rgba(27, 22, 12, 0.28) 0, rgba(27, 22, 12, 0.12) 220px, transparent 42%, rgba(27, 22, 12, 0.58) 56%, rgba(27, 22, 12, 0.68) 100%); }
  .community-story-progress { top: 16px; right: 14px; left: 14px; gap: 8px; }
  .community-story-progress i { position: relative; height: 4px; background: rgba(255, 255, 255, 0.34); }
  .community-story-progress i:nth-child(-n + 3) { background: rgba(255, 255, 255, 0.92); }
  .community-story-progress i:nth-child(4) { background: rgba(255, 255, 255, 0.34); }
  .community-story-progress i:nth-child(4)::after { position: absolute; inset: 0 auto 0 0; width: 58%; border-radius: inherit; background: #f7c33a; content: ""; }
  .community-story-viewer > header { top: 34px; right: 12px; left: 14px; gap: 10px; }
  .community-story-viewer > header > .community-avatar-default { width: 44px; height: 44px; }
  .community-story-viewer > header > span b { font-size: 13px; line-height: 20px; }
  .community-story-viewer > header small { color: #f4ebd7; font-size: 9px; line-height: 14px; }
  .community-story-viewer > header button { width: 42px; height: 42px; border-radius: 16px; background: rgba(30, 26, 18, 0.28); }
  .community-story-media > div { top: 598px; right: 16px; bottom: auto; left: 16px; height: 152px; }
  .community-story-media h2 { height: 70px; font-size: 23px; line-height: 35px; }
  .community-story-media p { position: absolute; top: 74px; left: 0; margin: 0; color: #f3e8cc; font-size: 11px; line-height: 17px; }
  .community-story-media span { position: absolute; top: 122px; left: 0; width: 106px; height: 30px; justify-content: center; margin: 0; padding: 0; border-radius: 15px; color: #fff7e4; font-size: 10px; font-weight: 800; line-height: 30px; text-align: center; }
  .community-story-conversation { display: none; }
  .community-story-mobile-controls { position: fixed; z-index: 7; right: 14px; bottom: 24px; left: 14px; display: grid; height: 54px; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; }
  .community-story-mobile-reactions { display: grid; grid-template-columns: 58px 46px; overflow: hidden; border-radius: 20px; background: rgba(255, 255, 255, 0.18); }
  .community-story-mobile-reactions button { display: flex; align-items: center; justify-content: center; gap: 7px; color: #fff; background: transparent; font-size: 11px; }
  .community-story-mobile-reactions .community-icon { width: 20px; height: 20px; }
  .community-story-mobile-reactions button.is-active { background: rgba(247, 195, 58, 0.18); }
  .community-story-mobile-reply { position: relative; display: block; height: 54px; margin: 0; padding: 0 58px 0 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.18); }
  .community-story-mobile-reply input { width: 100%; height: 54px; border: 0; outline: 0; color: #fff6e1; background: transparent; font-size: 11px; }
  .community-story-mobile-reply input::placeholder { color: #fff6e1; }
  .community-story-mobile-reply button { position: absolute; top: 7px; right: 14px; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 16px; background: #f7bc22; }
  .community-story-mobile-reply button .community-icon { width: 20px; height: 20px; }

  .community-action-sheet { padding: 0; background: rgba(46, 38, 22, 0.28); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .community-actions-panel { width: 100%; height: 484px; min-height: 484px; padding: 0; border-radius: 28px 28px 0 0; background: rgba(255, 255, 255, 0.92); }
  .community-actions-handle { position: absolute; top: 10px; left: 50%; display: block; width: 56px; height: 5px; margin: 0; transform: translateX(-50%); border-radius: 3px; background: rgba(185, 177, 164, 0.8); }
  .community-actions-panel > header { position: absolute; top: 30px; right: 14px; left: 18px; height: 54px; }
  .community-actions-panel h2 { font-size: 19px; line-height: 28px; }
  .community-actions-panel header p { margin-top: 2px; color: #8a8275; font-size: 10px; line-height: 15px; }
  .community-actions-panel header button { width: 40px; height: 40px; border-radius: 15px; background: rgba(242, 239, 231, 0.96); }
  .community-share-options { position: absolute; top: 106px; right: 18px; left: 18px; display: grid; height: 100px; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
  .community-share-options button { min-height: 100px; border-radius: 20px; background: rgba(255, 255, 255, 0.58); }
  .community-share-options button > span { width: 52px; height: 52px; border-radius: 18px; }
  .community-share-options button:nth-child(1) > span { background: rgba(238, 248, 240, 0.98); }
  .community-share-options button:nth-child(2) > span { background: rgba(255, 242, 190, 0.98); }
  .community-share-options button:nth-child(3) > span { background: rgba(242, 240, 233, 0.98); }
  .community-share-options button > span .community-icon { width: 20px; height: 20px; }
  .community-share-options button b { font-size: 10px; }
  .community-copy-feedback { position: absolute; top: 220px; right: 18px; left: 18px; display: flex; height: 42px; align-items: center; gap: 12px; margin: 0; padding: 0 12px; border-radius: 17px; color: #34714c; background: rgba(238, 248, 240, 0.88); font-size: 10px; }
  .community-copy-feedback .community-icon { width: 20px; height: 20px; }
  .community-actions-panel hr { position: absolute; top: 278px; right: 18px; left: 18px; height: 1px; margin: 0; }
  .community-actions-panel > h3 { position: absolute; top: 298px; left: 18px; color: #81796c; font-size: 11px; line-height: 16px; }
  .community-action-row { position: absolute; right: 18px; left: 18px; width: auto; height: 52px; padding: 0 14px; border-radius: 17px; background: rgba(247, 244, 236, 0.94); font-size: 12px; }
  .community-action-row:first-of-type { top: 326px; }
  .community-action-row:last-of-type { top: 388px; background: rgba(255, 240, 236, 0.84); }
  .community-action-row .community-icon { width: 20px; height: 20px; }

  .community-live-region {
    right: 14px;
    bottom: 104px;
    left: 14px;
    max-width: none;
    text-align: center;
  }

  .community-admin-panel,
  .community-admin-standalone {
    width: 100%;
  }
}

@media (max-width: 980px) {
  .community-privacy-field,
  .community-compose-media-list { grid-template-columns: 1fr; }
  .community-real-media > button,
  .community-real-media > video { min-height: 156px; max-height: 360px; }
  .community-real-media.is-detail > button,
  .community-real-media.is-detail > video { min-height: 210px; max-height: 500px; }
  .community-compose-media-item { grid-template-columns: 64px minmax(0, 1fr) 32px; }
  .community-compose-media-item > img,
  .community-compose-media-item > video { width: 64px; height: 54px; }
  .practice-community-compose-modal { align-items: flex-end; padding: 0; }
  .practice-community-compose-sheet { width: 100%; max-height: calc(100dvh - 20px); border-radius: 30px 30px 0 0; box-shadow: 0 -22px 70px rgba(45, 55, 49, 0.18); }
  .practice-community-compose-heading { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 18px 18px 14px; }
  .practice-community-compose-heading > button { width: 42px; height: 42px; }
  .practice-community-compose-heading h2 { font-size: 21px; line-height: 28px; }
  .practice-community-compose-form { gap: 12px; padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); }
  .practice-community-question-card { min-height: 62px; }
  .practice-community-content-field textarea { min-height: 116px; resize: none; }
}

@media (max-width: 370px) {
  .community-shell {
    padding-inline: 10px;
  }

  .community-feed-tab {
    padding-inline: 9px;
  }

  .community-moment {
    width: 54px;
  }

  .community-post-actions > button {
    gap: 3px;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .community-loader {
    animation: none;
  }

  .community-notification-side label i::after {
    transition: none;
  }
}