.opc-page .opc-community-row { align-items: stretch; }
.city-join-section { min-width: 0; display: grid; grid-template-rows: auto 1fr; }
/* The heading is outside the surface; both columns share heading/card tracks. */
@media (min-width: 1101px) {
  @supports (grid-template-rows: subgrid) {
    .opc-page .opc-community-row { grid-template-rows: auto 1fr; row-gap: 10px; }
    .opc-community-row > .recommended-panel,
    .opc-community-row > .city-join-section { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 10px; }
    .opc-community-row > .recommended-panel > .compact-heading,
    .city-join-section > .compact-heading { margin-bottom: 0; }
  }
}
.opc-page .city-join-panel {
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  align-self: stretch;
  border-color: #e9e7de;
  background: linear-gradient(125deg, #fffdf2 0%, #fff 65%);
}
.city-join-benefits { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: .75rem; font-weight: 650; line-height: 1.5; }
.city-join-benefits span { padding: 4px 6px; border-radius: 6px; white-space: nowrap; }
.city-join-benefits span:nth-child(1) { color: #1f55b3; background: #edf3ff; }
.city-join-benefits span:nth-child(2) { color: #946100; background: #fff4c2; }
.city-join-benefits span:nth-child(3) { color: #b74522; background: #fff0e9; }
.city-join-panel .hot-city-grid { gap: 6px; }
.city-join-option { min-width: 0; min-height: 32px; padding: 5px 8px; border: 1px solid #e6e9ef; border-radius: 8px; color: #363e4a; background: #fff; font: inherit; font-size: .875rem; font-weight: 650; line-height: 1.4; cursor: pointer; }
.city-join-option:hover { border-color: #a7bfff; background: #f3f7ff; }
.city-join-option[aria-pressed="true"] { border-color: #165cff; color: #fff; background: #165cff; }
.city-join-option:focus-visible, .city-join-button:focus-visible { outline: 2px solid #165cff; outline-offset: 2px; }
.city-join-actions { display: flex; align-items: stretch; }
.city-join-button { width: 100%; min-width: 0; min-height: 38px; flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 9px; border: 0; border-radius: 9px; background: #ffd500; color: #15191f; font: inherit; font-size: .875rem; font-weight: 750; line-height: 1.4; cursor: pointer; }
.city-join-button:hover:not(:disabled) { background: #ffdf38; }
.city-join-button [data-opc-join-label] { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.city-join-button > [aria-hidden] { flex: 0 0 auto; }
.city-join-button:disabled { background: #eee; color: #888; cursor: default; }
.city-join-panel .opc-empty { display: flex; align-items: center; justify-content: center; min-height: 70px; margin: 0; padding: 8px; border: 0; color: #747b87; font-size: .875rem; line-height: 1.5; }
@media (max-width: 1100px) {
  .opc-page .city-join-panel { align-self: start; gap: 12px; }
}
@media (max-width: 760px) {
  .city-join-option { min-height: 44px; }
  .city-join-button { min-height: 44px; }
}
.opc-page .entry-stats{font-variant-numeric:tabular-nums}
.community-stats-form{margin-top:24px}
.community-stats-form fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:18px}
.community-stats-form label{display:grid;gap:8px;color:#444;font-size:14px;font-weight:700}
.community-stats-form input[type="number"]{width:100%;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:#fff}
.community-stats-form small{font-size:12px;color:#777;font-weight:400}
.community-stats-form .community-note{color:#666;font-size:14px;line-height:1.7;margin:0 0 18px}
.community-stats-form .community-preview{padding:16px;border-radius:12px;background:#fff8cb;font-size:16px;font-weight:700;line-height:1.6}
.community-stats-form textarea[name="coveredCities"]{min-height:145px}
.community-stats-form input,.community-stats-form textarea{font-size:16px}
.community-stats-form [role="status"]{min-height:24px;line-height:1.6}