@media (max-width: 1024px) {
  .hero-card,
  .auth-grid,
  .admin-grid,
  .grid-2,
  .grid-3,
  .cms-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .app-shell { padding: 18px 12px 120px; }
  .topbar { align-items: flex-start; }
  .topbar h1 { font-size: 24px; }
  .card-top-row, .card-middle-row { align-items: flex-start; }
  .metric-card strong { font-size: 20px; }
  .section-head { flex-direction: column; align-items: flex-start; }
}


@media (max-width: 980px) {
  .detail-page-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .cms-gallery-preview-list {
    grid-template-columns: 1fr;
  }
  .detail-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 820px) {
  .detail-lightbox-dialog {
    width: 100vw;
    height: 100vh;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 8px;
    padding: 0 8px;
  }
  .detail-lightbox-close,
  .detail-lightbox-nav {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
  .detail-zoom-chip {
    right: 10px;
    bottom: 10px;
    font-size: 11px;
    padding: 7px 10px;
  }
}

@media (max-width: 900px) {
  .home-card-strip,
  .member-page-panel .resident-card-hero,
  .reward-card { grid-template-columns: 1fr; }
  .reward-thumb { width:100%; aspect-ratio: 16 / 10; height:auto; }
  .reward-action { justify-content:flex-start; }
}
@media (max-width: 640px) {
  .customer-nav .nav-btn { font-size:13px; padding:13px 6px; }
  .member-mini-stats,
  .member-links-grid { grid-template-columns: 1fr; }
}