:root{
  --bg:#f4f6fa;
  --card:#ffffff;
  --muted:#7d8a95;
  --primary:#0b6fa8;
  --accent:#2aa2df;
  --good:#2ecc71;
  --warn:#f1c40f;
  --bad:#e74c3c;

  /* Night Mode */
  --bg-dark:#0b1220;
  --card-dark:#0f1720;
  --text-dark:#e6edf3;
  --muted-dark:#98a1ab;
  --glass: rgba(255,255,255,0.6);
}

*{ box-sizing:border-box; margin:0; padding:0; font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

html,body{ height:100%; }

body{
  background: linear-gradient(180deg, #f7fbff 0%, var(--bg) 100%);
  color:#0f1b23;
  transition: background-.25s,color .25s;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* dark mode toggles at root for JS convenience */
.dark{
  background: linear-gradient(180deg,#07101a 0%, var(--bg-dark) 100%);
  color:var(--text-dark);
}

/* Header */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 32px;
  gap:20px;
}

.title-wrap h1{ font-size:20px; letter-spacing:0.2px; }
.subtitle{ color:var(--muted); font-size:13px; margin-top:4px; }

.controls{ display:flex; gap:12px; align-items:center; }

/* search */
.search-wrap{ display:flex; gap:8px; align-items:center; }
#cityInput{
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(15,27,35,0.06);
  min-width:260px;
  background:transparent;
  transition:box-shadow .15s, border-color .15s;
  outline:none;
}
#cityInput:focus{ box-shadow:0 6px 20px rgba(11,111,168,0.08); border-color:var(--primary); }

#searchBtn{
  padding:10px 14px;
  border-radius:10px;
  border:0;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  color:#fff;
  font-weight:700;
  cursor:pointer;
  box-shadow: 0 6px 20px rgba(42,162,223,0.14);
}

/* small controls */
.toggle{ font-size:13px; color:var(--muted); display:flex; align-items:center; gap:8px; }
#themeToggle, #settingsBtn{
  padding:8px 10px;
  border-radius:10px;
  border:0;
  background:transparent;
  color:var(--primary);
  cursor:pointer;
  font-size:16px;
}

/* Grid layout */
.container{
  padding:28px;
  display:grid;
  gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  max-width:1200px;
  margin:0 auto;
}

/* Card */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.9), var(--card));
  border-radius:14px;
  padding:18px;
  box-shadow: 0 8px 30px rgba(18,39,55,0.06);
  transition: transform .18s, box-shadow .18s, background .18s;
  overflow:hidden;
}
.card:hover{ transform: translateY(-6px); box-shadow: 0 18px 50px rgba(18,39,55,0.08); }
.dark .card{
  background: linear-gradient(180deg, rgba(18,26,35,0.6), var(--card-dark));
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}

.card h2{ font-size:16px; margin-bottom:8px; }

/* card head layout */
.card-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }

/* AQI */
.aqi-top{ display:flex; align-items:center; gap:12px; }
.aqi-number{ font-size:38px; font-weight:800; color:#0e2230; }
.dark .aqi-number{ color:var(--text-dark); }

.aqi-label{
  padding:6px 12px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  min-width:88px;
  text-align:center;
}

/* AQI variants */
.aqi-label.good{ background:#e9f7ee; color:#1d8c47; }
.aqi-label.moderate{ background:#fff9ec; color:#c07b00; }
.aqi-label.unhealthy{ background:#fff0f0; color:#c0392b; }
.aqi-label.very{ background:#f5e6f0; color:#7b1f5a; }

/* details */
.aqi-details{ display:flex; gap:18px; margin-top:12px; color:var(--muted); font-size:14px; }
.dark .aqi-details{ color:var(--muted-dark); }

/* chart wrapper */
.chart-wrap{ height:160px; margin-top:12px; }
.chart-wrap.small{ height:120px; }

/* Weather */
.weather-main{ display:flex; align-items:center; gap:14px; margin-top:8px; }
.weather-temp{ font-size:34px; font-weight:800; }
.weather-desc{ color:var(--muted); }

/* Map */
#map{ width:100%; height:300px; border-radius:10px; overflow:hidden; background:#e9eef4; }
.dark #map{ background:#0a1116 }

/* Energy / waste */
.energy-number, .waste-number{ font-size:20px; font-weight:700; color:#172832; }
.dark .energy-number, .dark .waste-number{ color:var(--text-dark); }

/* Transport */
.transport-list{ font-size:15px; line-height:26px; margin-top:8px; }
.status-text{ padding:6px 10px; border-radius:8px; font-weight:700; font-size:13px; display:inline-block; }
.status-good{ background:#e9f7ee; color:#1d8c47; }
.status-delay{ background:#fff7e0; color:#c07b00; }
.status-bad{ background:#fff0f0; color:#c0392b; }

/* Modal */
.modal{ position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(2,6,23,0.5); display:flex; align-items:center; justify-content:center; z-index:60; }
.modal.hidden{ display:none; }
.modal-content{ width:380px; background:linear-gradient(180deg,#fff, #f7fbff); padding:18px; border-radius:12px; box-shadow: 0 20px 60px rgba(18,39,55,0.12); }
.dark .modal-content{ background: linear-gradient(180deg,#0a0f15, #0f1720); color:var(--text-dark); box-shadow: 0 30px 80px rgba(0,0,0,0.6); }

.modal-content input{ width:100%; padding:10px; margin-top:8px; margin-bottom:12px; border-radius:8px; border:1px solid rgba(15,27,35,0.06); }

/* Responsive tweaks */
@media (max-width:720px){
  .container{ padding:14px; grid-template-columns: 1fr; }
  #cityInput{ min-width:140px;}
}