/* 社群页面 — 2x2 二维码网格，对齐小程序 pages/community/community */
#page-community { min-height: 100vh; background: #F0FAF8; padding: 3.2vw 3.2vw 0; box-sizing: border-box; }

/* 头部：突出主题 */
.community-header { text-align: center; padding: 5.33vw 0 4.27vw; }
.community-header-title { font-size: 4.8vw; font-weight: 700; color: #2D3A3A; display: block; letter-spacing: 1px; }
.community-header-sub { font-size: 3.2vw; color: #98A8A8; display: block; margin-top: 1.07vw; }

/* 2x2 网格 */
.community-grid { display: flex; flex-wrap: wrap; }
.community-cell { width: 50%; box-sizing: border-box; padding: 1.6vw; }
.community-img-wrap {
  background: #fff; border-radius: 2.67vw; padding: 3.2vw;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.community-qr-img { width: 36vw; height: 36vw; border-radius: 1.6vw; display: block; margin: 0 auto; }
.community-qr-ph {
  width: 36vw; height: 36vw; border-radius: 1.6vw;
  background: #F5F5F5; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cm-spinner {
  width: 6.4vw; height: 6.4vw; border: 3px solid #E0E0E0;
  border-top-color: #1DB9A6; border-radius: 50%;
  animation: cm-spin 0.8s linear infinite;
}
@keyframes cm-spin { to { transform: rotate(360deg); } }
.community-qr-ph span { font-size: 3.2vw; color: #98A8A8; margin-top: 1.6vw; }

/* 卡片标题与说明 */
.community-cell-title { font-size: 3.73vw; font-weight: 600; color: #2D3A3A; display: block; text-align: center; margin-top: 1.6vw; }
.community-cell-desc { font-size: 2.93vw; color: #6B7B7B; display: block; text-align: center; margin-top: 0.53vw; line-height: 1.4; padding: 0 1.07vw; }

/* 底部安全区 */
.community-safe-bottom { height: 6.4vw; }

/* 错误状态 */
.community-error { display: flex; flex-direction: column; align-items: center; padding: 20vw 0; color: #98A8A8; font-size: 3.73vw; gap: 2.13vw; }
.community-error-icon { font-size: 10.67vw; }
.community-error-btn { background: #1DB9A6; color: #fff; padding: 2.13vw 6.4vw; border-radius: 5.33vw; font-size: 3.73vw; cursor: pointer; }
.community-error-btn:active { opacity: 0.8; }

/* ===== PC 模式（非手机端防御）：宽屏下 vw 会拉伸变形，这里用固定 px 覆盖，并把页面约束在手机宽度内居中 ===== */
html.pc-mode body { background: #eef5f4; }
html.pc-mode #page-community {
  max-width: 420px;
  margin: 0 auto;
  padding: 16px 16px 0;
  min-height: 100vh;
  background: #F0FAF8;
  box-shadow: 0 0 24px rgba(0,0,0,0.06);
}
html.pc-mode .community-header { padding: 20px 0 16px; }
html.pc-mode .community-header-title { font-size: 18px; }
html.pc-mode .community-header-sub { font-size: 12px; margin-top: 4px; }
html.pc-mode .community-cell { padding: 6px; }
html.pc-mode .community-img-wrap { border-radius: 10px; padding: 12px; }
html.pc-mode .community-qr-img { width: 150px; height: 150px; border-radius: 6px; }
html.pc-mode .community-qr-ph { width: 150px; height: 150px; border-radius: 6px; }
html.pc-mode .cm-spinner { width: 24px; height: 24px; border-width: 3px; }
html.pc-mode .community-qr-ph span { font-size: 12px; margin-top: 6px; }
html.pc-mode .community-cell-title { font-size: 14px; margin-top: 6px; }
html.pc-mode .community-cell-desc { font-size: 11px; margin-top: 2px; padding: 0 4px; line-height: 1.4; }
html.pc-mode .community-safe-bottom { height: 24px; }
html.pc-mode .community-error { padding: 75px 0; font-size: 14px; gap: 8px; }
html.pc-mode .community-error-icon { font-size: 40px; }
html.pc-mode .community-error-btn { padding: 8px 24px; border-radius: 20px; font-size: 14px; }