:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#2563eb;
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
}
*{box-sizing:border-box}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; background:var(--bg); color:#0f172a}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:linear-gradient(90deg,#ffffff, #f8fafc);box-shadow:0 1px 0 rgba(16,24,40,.04);flex-wrap:wrap}
.topbar h1{margin:0;font-size:1.1rem;order:1}
.header-weather{order:2;font-size:0.9rem;color:#0f172a;flex-basis:100%;padding:8px 0}
.header-weather div{display:inline;margin-right:12px}
.controls{display:flex;gap:8px;align-items:center;order:3}
.controls input{padding:8px;border-radius:8px;border:1px solid #e6edf3;min-width:200px}
.controls button{padding:8px 10px;border-radius:8px;border:0;background:var(--accent);color:#fff}

.container{padding:18px}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{background:var(--card);border-radius:12px;padding:14px;box-shadow:0 6px 18px rgba(14,30,37,0.06)}
.card h2{margin:0 0 10px 0;font-size:1rem}

.current{grid-column:span 12}
.forecast{grid-column:span 6}
.chart{grid-column:span 6}
.chart{min-height:560px}
.chart-stack{display:flex;flex-direction:column;gap:14px}
.chart-block h3{margin:0 0 8px 0;font-size:.92rem}
.chart canvas{display:block;width:100%;height:170px !important;max-height:170px !important}
.chart-block:last-child canvas{height:140px !important;max-height:140px !important}
.map{grid-column:span 6}
.pollen{grid-column:span 6}
.windy{grid-column:span 12}
.windy-frame{display:block;width:100%;height:520px;border:0;border-radius:10px;background:#eaf2ff}

#forecastList{display:flex;flex-direction:column;gap:8px}
.forecast-day{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:8px;background:#fbfdff;border:1px solid #eef5ff}

.pollen-item{display:inline-flex;gap:12px;align-items:center;padding:0;margin-right:16px}
.pollen-item:last-child{margin-right:0}
.pollen-section{margin-bottom:12px}
.pollen-section h3{margin:0 0 8px 0;font-size:.92rem}
.pollen-empty{padding:8px;border-radius:8px;background:#fbfdff;border:1px dashed #dbe7f5;color:var(--muted)}
.current-pollen{margin-top:10px;padding-top:10px;border-top:1px solid #eef2f7}
.current-pollen h3{margin:0 0 6px 0;font-size:.92rem;font-weight:600}
.current-pollen #currentPollenList{display:flex;flex-wrap:wrap;gap:0}
.pollen-level.low{background:rgba(16,185,129,0.08);color:var(--success)}
.pollen-level.moderate{background:rgba(245,158,11,0.08);color:var(--warning)}
.pollen-level.high{background:rgba(239,68,68,0.08);color:var(--danger)}

.footer{padding:12px;text-align:center;color:var(--muted);font-size:.9rem}

@media (max-width:900px){
  .grid{grid-template-columns:repeat(6,1fr)}
  .current{grid-column:span 6}
  .forecast{grid-column:span 3}
  .chart{grid-column:span 3}
  .map{grid-column:span 3}
  .pollen{grid-column:span 3}
  .windy{grid-column:span 6}
}

@media (max-width:600px){
  .controls input{min-width:120px}
  .grid{grid-template-columns:1fr}
  .current{grid-column:span 1;display:none}
  .forecast{grid-column:span 1}
  .chart{grid-column:span 1}
  .map{grid-column:span 1}
  .pollen{grid-column:span 1}
  .windy{grid-column:span 1}
  .topbar{flex-direction:column;align-items:flex-start}
  .topbar h1{order:1;width:100%}
  .header-weather{order:2;width:100%;flex-basis:auto;display:flex !important;flex-wrap:wrap;gap:12px}
  .header-weather div{display:block;margin-right:0;margin-bottom:4px}
  .controls{order:3;width:100%;margin-top:8px;flex-wrap:wrap}
  .controls input{min-width:100%}
  .controls button{flex:1}
  .windy-frame{height:420px}
}