:root{
  /* Colori serie (personalizza per match con il sito) */
  --col-temp: #f45b5b;        /* Temperatura */
  --col-hdex: #e18726;        /* Humidex */
  --col-wbulb: #e18726;       /* Wet bulb */
  --col-dew: #f45b5b;         /* Dew point */
  --col-rh: #7cb5ec;          /* Umidità relativa */
  --col-rain-rate: #7cb5ec;   /* Pioggia istantanea (barre) */
  --col-rain-cum: #3f3fb2;    /* Pioggia cumulata (linea) */
  --col-wind: #7db7ed;        /* Vento medio */
  --col-gust: #d526d5;        /* Raffica */
  --col-wdir: #000000;        /* Direzione vento */
  --col-press: #000000;       /* Pressione */
  --col-solar: #f08a15;       /* Radiazione solare */
  --col-uv: #ee25cc;          /* Indice UV */

  --bg: #ffffff;      /* sfondo pagina */
  --panel: #ffffff;   /* sfondo pannello */
  --grid: #e5e7eb;    /* griglie assi */
  --text: #111827;    /* testi */
}
html,body{height:100%}
/*
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Noto Sans',sans-serif;margin:0;background:var(--bg);color:var(--text)}
header{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.9);backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid #e5e7eb}
*/
.wrap{max-width:1200px;margin:0 auto;padding:16px}
h1{font-size:20px;margin:0}
.grid{max-width:1200px;margin:0 auto;padding:16px;display:grid;gap:16px}
@media(min-width:900px){ .grid{grid-template-columns:1fr} }
.panel{background:var(--panel);border:1px solid #e5e7eb;border-radius:0px;padding:10px}
.panel h2{font-size:15px;margin:0 0 6px 6px;font-weight:600;color:#1f2937}

.chart{height:360px; position:relative}
#rose{height:420px}
canvas{width:100% !important;height:100% !important}

/* Controlli per-grafico (overlay) */
.chart-ctrl{position:absolute;top:-15px;right:10px;display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.85);border:1px solid #e5e7eb;backdrop-filter:saturate(140%) blur(6px);box-shadow:0 2px 6px rgba(0,0,0,.04)}
.chart-ctrl label{font-size:12px;opacity:.8}
.chart-ctrl input[type="range"]{accent-color:#6ea8fe;width:120px}

.badge{font:12px/1.8 system-ui;background:#19202a;border:1px solid #2a3341;border-radius:999px;padding:2px 8px;color:#c7d0dc}
.badge.small{font-size:11px;padding:1px 6px}

.hint{opacity:.8;font-size:13px}