:root{
  --bg:#f6f7f9;
  --red1:#d94040;
  --red2:#eb4b4b;
  --card:#ffffff11;
  --muted:#8b98a5;
  --green:#16c172;
  --orange:#f6b042;
  --red:#f25c64;
}
*{box-sizing:border-box}
body{
  font-family:Inter, system-ui, Arial, Helvetica, sans-serif;
  margin:0;
  background:var(--bg);
  color:#222;
}
.topbar{
  display:flex;align-items:center;gap:16px;padding:14px 28px;background:#fff;border-bottom:1px solid #eee;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#3ecf8e,#2bb673);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.brand-text .title{font-weight:700}
.brand-text .subtitle{font-size:12px;color:var(--muted)}
.location select{padding:8px 12px;border-radius:8px;border:1px solid #e6eef5}
.listen button{background:linear-gradient(90deg,#ff6b4a,#ff8a4a);color:#fff;padding:8px 14px;border-radius:20px;border:none;box-shadow:0 6px 18px rgba(255,138,74,0.18)}

main{padding:24px 40px}
.hero{background:linear-gradient(180deg,#e64545,#c03434);border-radius:14px;padding:28px;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,0.08);}
.hero-inner{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.hero-left{display:flex;flex-direction:column;gap:8px}
.alert-icon{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;font-size:28px}
.hero-title{font-size:34px;font-weight:800}
.hero-sub{opacity:0.95}
.hero-cards{display:flex;gap:14px}
.card{background:rgba(255,255,255,0.08);padding:22px;border-radius:14px;min-width:220px}
.card .label{opacity:0.9}
.card .value{font-size:46px;font-weight:800;margin-top:6px}
.card.big{min-width:260px}

.status-row{margin-top:20px}
.heat-status{display:flex;justify-content:space-between;align-items:center}
.legend{display:flex;align-items:center;gap:10px}
.dot{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 -6px 10px rgba(0,0,0,0.15)}
.dot.green{background:linear-gradient(180deg,#6ee7a9,#16c172)}
.dot.orange{background:linear-gradient(180deg,#ffd06b,#f6b042)}
.dot.red{background:linear-gradient(180deg,#ff9aa3,#f25c64)}
.legend-label{font-size:13px;color:rgba(255,255,255,0.9)}
.current-status{display:flex;align-items:center;gap:10px}
.current-dot{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.12)}
.current-text{opacity:0.95}

.forecast-section{margin-top:28px}
.forecast-section h2{font-size:28px;margin:0 0 8px 0}
.advice{color:var(--red);font-weight:700;margin-bottom:8px}
.forecast-wrap{background:#fff;border-radius:12px;padding:18px;box-shadow:0 8px 20px rgba(12,24,40,0.06)}
.forecast{display:flex;gap:18px;overflow:auto;padding:18px;height:240px;align-items:flex-end}
.day-col{width:80px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px;height:100%}
.temp-label{font-weight:700;color:#222}
.bar{width:44px;height:160px;background:#f0f0f3;border-radius:22px;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.bar-fill{width:100%;border-radius:22px 22px 0 0;transition:height 600ms ease,background 300ms}
.day-name{font-size:13px;color:#666;text-align:center;height:36px;display:flex;align-items:flex-start;justify-content:center;line-height:1.2}
.footer{
  padding: 40px 28px 28px;
  background: #fff;
  border-top: 1px solid #eef0f3;
  margin-top: 40px;
}
.footer-inner{
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.footer-attribution{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.footer-logo-row{
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-badge{
  background: linear-gradient(135deg, #1a3a6e, #2558c4);
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.footer-badge.unicef{
  background: linear-gradient(135deg, #009be5, #0073b6);
}
.footer-x{
  font-size: 18px;
  color: #b0bac5;
  font-weight: 700;
}
.footer-credit{
  margin: 0;
  font-size: 14px;
  color: #5a6577;
  line-height: 1.65;
  max-width: 560px;
}
.footer-disclaimer{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fffbea;
  border: 1px solid #f6d860;
  border-left: 4px solid #f6b042;
  border-radius: 10px;
  padding: 14px 18px;
  max-width: 620px;
  width: 100%;
}
.disclaimer-icon{
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.disclaimer-text{
  font-size: 13.5px;
  color: #5a4a00;
  line-height: 1.6;
}
.footer-copy{
  margin: 0;
  font-size: 12px;
  color: #b0bac5;
}

@media (max-width:900px){
  .hero-inner{flex-direction:column;align-items:flex-start}
  .hero-cards{width:100%;order:2}
  .forecast{height:200px}
}

.spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3ecf8e;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}