:root{
  --bg: #0b1023;
  --glass: rgba(255,255,255,.06);
  --glass-2: rgba(255,255,255,.08);
  --border: rgba(255,255,255,.15);
  --text: #fff;
  --muted: #cbd5e1;
  --brand: #60a5fa;
  --accent: #22d3ee;
  --good:#34d399; --warn:#f59e0b; --bad:#ef4444;
  --chip-bg: rgba(255,255,255,.08);
  --chip-on: #0ea5e9;
  --k-feels: #8ab4ff; /* line + chip borders color map */
  --k-hum:   #38bdf8;
  --k-wind:  #f59e0b;
  --k-air:   #22c55e;
  --k-rain:  #a78bfa;
  --maxw: 1200px;
}

/* Global */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 50% -20%, rgba(159,18,228,.28), transparent),
              radial-gradient(1200px 800px at 50% 120%, rgba(14,165,233,.18), transparent),
              #0b1023 url("./bg.png") top center / cover no-repeat fixed;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 20px;
  width:100%;
  background:rgba(15,20,44,.38); /* lighter until scroll */
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
}
.site-header.opacity-boost{ background:rgba(90,30,140,.69); } /* on scroll */
.brand{display:flex; align-items:center; gap:10px}
.mark{width:26px;height:26px}
.site-header h1{font-size:22px;margin:0;font-weight:800;letter-spacing:.2px}
.nav{display:flex; gap:8px; align-items:center}
.chip{
  background:var(--chip-bg); border:1px solid var(--border);
  color:#fff;padding:8px 12px;border-radius:999px;cursor:pointer
}
.nav-chip.active{box-shadow:0 0 0 2px var(--chip-on) inset}

/* Units toggle (shrunk) */
.unit-toggle{display:flex;gap:6px;align-items:center;background:var(--chip-bg);border:1px solid var(--border);border-radius:999px;padding:4px 6px}
.unit-toggle input{display:none}
.unit-toggle label{padding:4px 8px;border-radius:999px;cursor:pointer;color:#001018;background:rgba(255,255,255,.92);font-weight:800}
.unit-toggle input:checked + label{background:var(--accent);color:#07121a}

/* Search row */
.search-row{max-width:var(--maxw); margin:20px auto 0; padding:0 16px}
.search-wrap{display:grid;grid-template-columns:1fr auto auto;gap:10px}
.search{
  padding:12px 14px;border-radius:14px;border:1px solid var(--border);
  background:rgba(255,255,255,.06);color:#fff
}
.btn{font-weight:700;border-radius:12px;cursor:pointer}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--accent));border:0;color:#06121a;padding:10px 14px}
.btn-ghost{background:transparent;border:1px solid var(--border);color:#fff;padding:10px 14px}
.btn-icon{background:var(--chip-bg);border:1px solid var(--border);color:#fff;padding:10px 12px;border-radius:14px}
.suggestions{list-style:none;margin:8px 0 0;padding:0;border:1px solid var(--border);border-radius:14px;overflow:hidden;display:none}
.suggestions.show{display:block}
.suggestions li{padding:10px 12px;background:rgba(255,255,255,.06);cursor:pointer}
.suggestions li:hover{background:rgba(255,255,255,.12)}

/* Layout */
.container{
  max-width:var(--maxw);
  margin:18px auto 40px;
  padding:0 16px; /* same visual width as header (header has 20px) */
  display:grid; gap:18px;
  grid-template-columns:1.05fr 1fr;
}
.card{background:var(--glass); border:1px solid var(--border); border-radius:18px; padding:14px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mini-nav{display:flex;gap:8px}

/* FIRST CARD — mimic concept */
.now{grid-column:1/2}
.now .now-grid{display:grid; grid-template-columns:1fr; gap:8px}
.now .left{padding:12px 8px}
.place-name{font-size:22px;font-weight:800}
.cond{color:var(--muted);margin-top:4px}
.temp{font-size:clamp(54px, 10vw, 92px);font-weight:800;line-height:.95;margin:.3rem 0 10px}
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.kpi{
  display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
  background:rgba(255,255,255,.06); border:2px solid transparent; border-radius:14px; padding:10px;
  transition:border-color .2s, box-shadow .2s, transform .1s;
}
.kpi.active[data-key="feels"]{border-color:var(--k-feels)}
.kpi.active[data-key="humidity"]{border-color:var(--k-hum)}
.kpi.active[data-key="wind"]{border-color:var(--k-wind)}
.kpi.active[data-key="air"]{border-color:var(--k-air)}
.kpi.active[data-key="rain"]{border-color:var(--k-rain)}
.k-label{color:var(--muted);font-size:12px}
.k-val{font-weight:800}
.ico{width:18px;height:18px;display:inline-block;filter:drop-shadow(0 0 6px rgba(255,255,255,.25))}
.ico.thermometer{background:url('./icons/therm.svg') center/contain no-repeat}
.ico.droplet{background:url('./icons/hum.svg') center/contain no-repeat}
.ico.wind{background:url('./icons/wind.svg') center/contain no-repeat}
.ico.aqi{background:url('./icons/air.svg') center/contain no-repeat}
.ico.rain{background:url('./icons/rain.svg') center/contain no-repeat}

/* CHART CARD */
.hourly{grid-column:2/3}
.chart-wrap{position:relative}
#hourlyChart{display:block;width:100%!important;height:260px!important}
.hourly-scroller{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(82px, 1fr);
  gap:10px;overflow-x:auto;padding:10px 2px
}
.hour-item{background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:14px;padding:10px;text-align:center}
.h-time{font-size:12px;color:#dbeafe}
.h-icon{height:26px;background-size:24px 24px;background-position:center;background-repeat:no-repeat;margin:2px 0}
.h-temp{font-weight:800}

/* DAILY + EXTRA */
.daily{grid-column:1/2}
.daily-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.day-card{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:14px;padding:12px;text-align:center}
.day-name{font-weight:700}
.day-temps{font-weight:800}
.day-ico{height:28px;background-size:24px 24px;background-position:center;background-repeat:no-repeat;margin:6px auto}
.day-card.sunny{background:linear-gradient(180deg, rgba(253,230,138,.25), transparent)}
.day-card.cloudy{background:linear-gradient(180deg, rgba(148,163,184,.22), transparent)}
.day-card.rainy{background:linear-gradient(180deg, rgba(167,139,250,.24), transparent)}

.daily-extra{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.extra-card{background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:14px;padding:12px}
.extra-title{color:#cbd5e1;margin-bottom:6px}
.extra-val{font-weight:800}

/* Radar */
.radar{grid-column:2/3}
.radar-map{height:320px;border-radius:14px;overflow:hidden;border:1px solid var(--border)}
.radar-controls{display:flex;gap:8px;align-items:center}
.progress{height:6px;width:220px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden}
.progress #rvProgress{height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--accent));}

/* Favorites chips */
.favorites{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.favorite-pill{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid var(--border);cursor:pointer}

/* Footer */
.site-footer{max-width:var(--maxw);margin:26px auto 36px;padding:0 16px;text-align:center;color:#e2e8f0}
.site-footer a{color:#86e7ff;text-decoration:underline}

/* Responsive */
@media (max-width: 1080px){
  .container{grid-template-columns:1fr; gap:18px}
  .hourly{grid-column:auto}
  .daily,.radar{grid-column:auto}
}
@media (max-width: 720px){
  .nav .chip{padding:6px 10px}
  .search-wrap{grid-template-columns:1fr auto auto}
  body{background-size:110% auto} /* more clouds visible on mobile */
  .kpis{grid-template-columns:repeat(3,1fr)}
  .daily-grid{grid-template-columns:repeat(3,1fr)}
  .daily-extra{grid-template-columns:1fr}
}