/* ============ 响应式 ============ */
@media (max-width: 1024px) and (min-width: 769px) {
  :root { --panel-w: 320px; }
}

@media (max-width: 768px) {
  .topbar { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 8px; }
  .brand { font-size: 16px; }
  .topnav { order: 3; width: 100%; overflow-x: auto; gap: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .nav-tab { flex: none; font-size: 14px; padding: 8px 16px; }

  .main { display: flex; flex-direction: column; height: auto; min-height: 0; }
  .map-wrap { height: 44vh; min-height: 260px; flex: none; }
  .panel { border-left: none; border-top: 1px solid var(--border); height: auto; min-height: 0; overflow: visible; }
}

@media (max-width: 360px) {
  .weather-grid { grid-template-columns: 1fr; }
}