@media (max-width: 1199px) {
  #main-content {
    flex-direction: column;
  }

  #left-panel {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px;
  }

  #dashboard {
    flex: 1;
    min-width: 300px;
  }

  #nowcast-panel {
    flex: 1;
    min-width: 300px;
  }

  #map-container {
    min-height: 420px;
  }

  #bottom-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sector-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  #layer-switcher {
    gap: 2px;
  }

  .layer-btn span {
    display: none;
  }

  .layer-btn {
    padding: 7px 10px;
  }

  #ai-chat-panel {
    width: 360px;
    height: 460px;
    right: 14px;
    bottom: 96px;
  }
}

@media (max-width: 767px) {
  #topbar {
    padding: 0 12px;
    height: 54px;
  }

  .logo-sub {
    display: none;
  }

  .logo-text {
    font-size: 18px;
  }

  .logo-icon {
    font-size: 22px;
  }

  #layer-switcher {
    padding: 3px;
    gap: 0;
  }

  .layer-btn {
    padding: 6px 8px;
    font-size: 11px;
  }

  .layer-btn svg {
    width: 14px;
    height: 14px;
  }

  #left-panel {
    flex-direction: column;
    padding: 10px;
  }

  #dashboard {
    min-width: 0;
  }

  .location-dropdown {
    width: 280px;
    left: -10px;
  }

  .city-search-input {
    font-size: 16px;
  }

  .temp-value {
    font-size: 48px;
  }

  .weather-details {
    gap: 6px;
  }

  .detail-item {
    padding: 6px 8px;
  }

  #map-container {
    min-height: 320px;
  }

  #forecast-section {
    padding: 14px;
  }

  .forecast-day-card {
    flex: 0 0 85px;
    padding: 12px 8px;
  }

  .forecast-day-card .day-high {
    font-size: 15px;
  }

  .forecast-day-card .day-low {
    font-size: 12px;
  }

  #bottom-grid {
    grid-template-columns: 1fr;
    padding: 0 12px 14px;
    gap: 12px;
  }

  .sector-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  #sector-section {
    padding: 0 12px 14px;
  }

  #life-index-section {
    margin: 0 12px 20px;
  }

  .life-index-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .life-index-card {
    padding: 12px 8px;
  }

  .life-index-card .li-score {
    font-size: 20px;
  }

  #ai-chat-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    bottom: 0;
    right: 0;
    border-radius: 0;
  }

  #ai-toggle {
    width: 52px;
    height: 52px;
    font-size: 24px;
  }

  .modal-content {
    width: 95%;
    padding: 18px;
  }

  #hourly-section {
    margin: 0 12px 14px;
    padding: 14px;
  }

  #hourly-chart {
    min-width: 600px;
    height: 140px;
  }

  .hourly-card {
    min-width: 62px;
    padding: 8px 8px 6px;
  }

  .hourly-card .h-icon {
    font-size: 18px;
  }

  .hourly-card .h-temp {
    font-size: 14px;
  }

  .section-title {
    font-size: 16px;
  }

  .panel-title {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .topbar-center {
    order: 3;
  }

  #layer-switcher {
    position: fixed;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    background: rgba(6, 13, 26, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  }

  .sector-grid {
    grid-template-columns: 1fr 1fr;
  }

  .sector-card {
    padding: 16px 12px;
  }

  .sector-icon {
    font-size: 28px;
  }

  .sector-name {
    font-size: 14px;
  }

  .sector-desc {
    font-size: 10px;
  }

  .aqi-circle {
    width: 80px;
    height: 80px;
  }

  .aqi-value {
    font-size: 24px;
  }
}