:root{--ink:#0b2034;--muted:#6b7d8e;--blue:#0b75d1;--cyan:#24b7e5;--line:rgba(13,50,80,.10);--glass:rgba(255,255,255,.82);--shadow:0 22px 70px rgba(18,61,92,.12)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(180deg,#eef9ff 0,#f7fbfd 420px,#f5f8fa 100%);min-height:100vh}.sky-glow{position:absolute;inset:0 0 auto;height:560px;pointer-events:none;background:radial-gradient(circle at 78% 10%,rgba(255,211,94,.23),transparent 24%),radial-gradient(circle at 18% 4%,rgba(47,174,235,.18),transparent 27%)}.shell{width:min(1280px,calc(100% - 40px));margin:auto}.site-header{height:86px;border-bottom:1px solid rgba(9,55,87,.08);background:rgba(248,253,255,.70);backdrop-filter:blur(18px);position:relative;z-index:10}.header-inner{height:100%;display:flex;align-items:center;gap:34px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-width:max-content}.brand strong{display:block;font-size:18px;letter-spacing:-.4px}.brand small{display:block;font-size:11px;color:var(--muted);margin-top:2px}.brand-mark{width:43px;height:43px;position:relative}.brand-sun{position:absolute;width:25px;height:25px;border-radius:50%;background:#ffc83d;right:1px;top:2px;box-shadow:0 0 24px rgba(255,183,0,.45)}.brand-cloud{position:absolute;width:32px;height:13px;border-radius:20px;background:#fff;left:1px;bottom:7px;box-shadow:0 4px 10px rgba(28,79,111,.15)}.brand-cloud:before,.brand-cloud:after{content:"";position:absolute;border-radius:50%;background:#fff}.brand-cloud:before{width:16px;height:16px;left:5px;top:-8px}.brand-cloud:after{width:12px;height:12px;right:3px;top:-5px}.top-nav{display:flex;gap:6px;margin-left:auto}.top-nav a{padding:9px 13px;border-radius:12px;text-decoration:none;color:#53697b;font-size:13px;font-weight:650}.top-nav a:hover,.top-nav .active{background:#fff;color:var(--blue);box-shadow:0 6px 22px rgba(17,69,103,.08)}.live-pill{font-size:11px;font-weight:800;letter-spacing:.8px;background:#fff;padding:9px 12px;border-radius:999px;box-shadow:0 6px 24px rgba(18,61,92,.08);white-space:nowrap}.live-pill i,.refresh-badge i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#20c77a;margin-right:6px;box-shadow:0 0 0 5px rgba(32,199,122,.12);animation:pulse 1.8s infinite}.live-pill span{font-weight:600;color:var(--muted);margin-left:4px}@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(32,199,122,0)}}.hero{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;padding:70px 0 54px}.eyebrow,.kicker{font-size:10px;font-weight:850;letter-spacing:1.8px;color:#3383b7}.hero-main{display:flex;align-items:center;gap:25px;margin-top:14px}.temperature{font-size:92px;line-height:.88;font-weight:250;letter-spacing:-7px}.temperature sup{font-size:38px;vertical-align:top;position:relative;top:7px;letter-spacing:0}.condition{font-size:21px;font-weight:700;margin:13px 0 0 5px}.updated{font-size:12px;color:var(--muted);margin:20px 0 0 5px}.updated strong{color:#43596b}.weather-symbol{width:126px;height:100px;position:relative}.weather-symbol .sun{position:absolute;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6a0 0,#ffd34e 36%,#ffad22 100%);right:5px;top:2px;box-shadow:0 0 45px rgba(255,183,31,.42)}.weather-symbol .cloud{position:absolute;height:28px;width:78px;border-radius:30px;background:linear-gradient(#fff,#e8f3f8);bottom:10px;left:3px;filter:drop-shadow(0 10px 10px rgba(37,77,104,.15))}.weather-symbol .cloud:before,.weather-symbol .cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.weather-symbol .cloud:before{width:42px;height:42px;left:14px;top:-23px}.weather-symbol .cloud:after{width:29px;height:29px;right:7px;top:-14px}.weather-symbol .c2{transform:scale(.62);opacity:.68;left:54px;bottom:0}.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-content:center}.metric{min-height:104px;background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.9);border-radius:20px;padding:18px;display:flex;align-items:center;gap:13px;box-shadow:0 12px 35px rgba(25,70,99,.06);backdrop-filter:blur(12px)}.metric-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#edf8fd;font-size:16px}.metric small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.7px;font-weight:750}.metric strong{display:block;font-size:23px;margin-top:3px;letter-spacing:-.7px}.metric strong.small-value{font-size:16px;letter-spacing:-.2px}.metric em{font-style:normal;font-size:12px;color:var(--muted);font-weight:650}.metric span:not(.metric-icon){font-size:10px;color:#8b9aa7}.section-grid{display:grid;grid-template-columns:1.65fr .75fr;gap:20px;margin-bottom:20px}.card{background:var(--glass);border:1px solid rgba(255,255,255,.95);border-radius:26px;box-shadow:var(--shadow);overflow:hidden;backdrop-filter:blur(15px)}.card-head{padding:24px 26px 18px;display:flex;justify-content:space-between;align-items:center}.card-head h2{font-size:24px;margin:4px 0 0;letter-spacing:-.8px}.refresh-badge{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:#587083;font-weight:750}.webcam-frame{height:410px;display:block;position:relative;overflow:hidden;background:#dfeaf0}.webcam-frame img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}.webcam-frame:hover img{transform:scale(1.015)}.cam-overlay{position:absolute;left:20px;bottom:18px;color:#fff;background:rgba(5,24,38,.48);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18);padding:10px 13px;border-radius:12px}.cam-overlay b,.cam-overlay small{display:block}.cam-overlay b{font-size:11px;letter-spacing:1.2px}.cam-overlay small{font-size:9px;opacity:.75;margin-top:2px}.card-foot{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;font-size:11px;color:var(--muted)}.card-foot button{border:0;background:transparent;color:var(--blue);font-weight:750;cursor:pointer}.rain-card{padding-bottom:20px}.rain-drop{font-size:24px}.rain-today{margin:4px 26px 20px;padding:24px;border-radius:20px;background:linear-gradient(135deg,#edfaff,#f7fcff);border:1px solid #e1f3fa}.rain-today span{display:block;color:var(--muted);font-size:11px}.rain-today strong{display:block;font-size:48px;letter-spacing:-2px;margin-top:3px}.rain-today em{font-size:15px;font-style:normal;color:var(--muted);letter-spacing:0}.rain-row{display:flex;justify-content:space-between;padding:13px 27px;border-bottom:1px solid var(--line);font-size:12px}.rain-progress{margin:22px 27px 4px}.rain-progress-top{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.track{height:7px;border-radius:20px;background:#e6eff3;margin:9px 0 7px;overflow:hidden}.track i{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#34b8e7,#1475ce)}.rain-progress small{font-size:10px;color:#8293a1}.atmosphere{margin-bottom:42px}.atmo-now{font-size:10px;color:var(--muted);letter-spacing:1px}.skyline{height:255px;position:relative;overflow:hidden;background:linear-gradient(180deg,#78c9f4 0%,#cdefff 67%,#f9dca7 100%);transition:background 1s}.stars{position:absolute;inset:0;opacity:0;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:57px 49px}.orb{position:absolute;width:42px;height:42px;border-radius:50%;background:#ffd34d;box-shadow:0 0 30px rgba(255,201,55,.65);left:50%;top:35px;transition:all .7s}.cloud-layer{position:absolute;inset:0}.cloud-layer i{position:absolute;width:110px;height:30px;background:rgba(255,255,255,.72);border-radius:40px;filter:blur(.3px);animation:drift 35s linear infinite}.cloud-layer i:before,.cloud-layer i:after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud-layer i:before{width:55px;height:55px;left:17px;top:-28px}.cloud-layer i:after{width:40px;height:40px;right:12px;top:-19px}.far{opacity:.5;transform:scale(.7)}.far i:nth-child(1){top:65px;left:-100px}.far i:nth-child(2){top:35px;left:38%;animation-delay:-15s}.far i:nth-child(3){top:80px;left:80%;animation-delay:-25s}.near i:nth-child(1){top:112px;left:18%;animation-duration:48s}.near i:nth-child(2){top:98px;left:72%;animation-duration:43s;animation-delay:-18s}@keyframes drift{from{transform:translateX(-90px)}to{transform:translateX(180px)}}.horizon{position:absolute;left:-3%;right:-3%;bottom:38px;height:38px;background:linear-gradient(170deg,transparent 48%,rgba(28,77,76,.24) 49%,rgba(24,64,63,.35) 100%);filter:blur(.3px)}.time-line{position:absolute;left:0;right:0;bottom:0;height:42px;background:rgba(8,31,49,.18);backdrop-filter:blur(6px);display:grid;grid-template-columns:repeat(9,1fr);align-items:center;color:#fff;padding:0 18px}.time-line span{font-size:9px;text-align:center;opacity:.8}.time-line span.now{font-weight:850;opacity:1}.atmo-note{font-size:11px;color:var(--muted);margin:0;padding:14px 25px 20px}.site-footer{padding:30px 0 45px;color:#718391}.site-footer .shell{display:flex;justify-content:space-between;font-size:11px}.site-footer strong{color:#425a6d}@media(max-width:900px){.top-nav{display:none}.header-inner{gap:10px}.live-pill{margin-left:auto}.hero{grid-template-columns:1fr;padding:45px 0 35px;gap:30px}.hero-stats{grid-template-columns:repeat(3,1fr)}.section-grid{grid-template-columns:1fr}.webcam-frame{height:auto;aspect-ratio:16/9}}@media(max-width:620px){.shell{width:min(100% - 24px,1280px)}.site-header{height:72px}.brand small{display:none}.brand-mark{transform:scale(.86)}.live-pill span{display:none}.hero{padding-top:32px}.temperature{font-size:74px}.weather-symbol{width:100px;transform:scale(.86);transform-origin:left center}.hero-main{gap:8px}.hero-stats{grid-template-columns:repeat(2,1fr);gap:8px}.metric{min-height:90px;padding:13px}.metric strong{font-size:20px}.card{border-radius:20px}.card-head{padding:20px 18px 14px}.card-head h2{font-size:21px}.refresh-badge{display:none}.rain-today{margin-left:18px;margin-right:18px}.rain-row,.rain-progress{margin-left:0;margin-right:0;padding-left:20px;padding-right:20px}.webcam-frame{aspect-ratio:4/3}.skyline{height:220px}.time-line{padding:0 4px}.atmo-note{padding-left:18px;padding-right:18px}.site-footer .shell{display:block}.site-footer span{display:block;margin-top:6px}}

/* V2: Ecowitt + colore */
body{background:linear-gradient(180deg,#edfaff 0,#f7fbfd 48%,#eef7fb 100%)}
.site-header{background:rgba(247,252,255,.78);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.hero{position:relative;overflow:hidden;border-radius:0 0 42px 42px;padding-left:28px;padding-right:28px;background:radial-gradient(circle at 12% 10%,rgba(52,183,255,.18),transparent 32%),radial-gradient(circle at 88% 25%,rgba(255,197,64,.20),transparent 28%)}
.metric{transition:transform .2s ease,box-shadow .2s ease;border:1px solid rgba(255,255,255,.72)}.metric:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(18,65,91,.10)}
.metric.humidity{background:linear-gradient(145deg,#f8fdff,#e8f8ff)}.metric.wind{background:linear-gradient(145deg,#fbffff,#ecfbf8)}.metric.pressure{background:linear-gradient(145deg,#fffefd,#fff6df)}.metric.dew{background:linear-gradient(145deg,#fbfdff,#eef1ff)}.metric.gust{background:linear-gradient(145deg,#fff,#f3f7fa)}.metric.sunmetric{background:linear-gradient(145deg,#fffdf8,#fff2cf)}
.metric-svg{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.7)}.metric-svg svg,.rain-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.humidity .metric-svg{color:#149ee4}.wind .metric-svg{color:#20a98d}.pressure .metric-svg{color:#df9b18}.dew .metric-svg{color:#6677dc}.gust .metric-svg{color:#617789}.sunmetric .metric-svg{color:#eaa70c}
.webcam-card{background:linear-gradient(160deg,#fff,#f6fbfe)}.rain-card{background:linear-gradient(160deg,#fff,#eefaff)}.rain-icon{width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:#e6f7ff;color:#0797db}.rain-today{background:linear-gradient(135deg,#eaf9ff,#dff4ff)}
.atmosphere{overflow:hidden}.skyline{background:linear-gradient(180deg,#68c8f2 0%,#bfeaff 58%,#ffe8ba 100%);transition:background .8s ease}.skyline.night{background:linear-gradient(180deg,#08142f 0%,#18365b 58%,#744d68 100%)}
.atmo-note{color:#6f8290}
@media(max-width:720px){.hero{border-radius:0 0 28px 28px;padding-left:16px;padding-right:16px}.hero-stats{grid-template-columns:1fr 1fr}.metric{min-width:0}.metric strong.small-value{font-size:17px}}

/* V3 - doppia webcam */
.cam-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 14px 4px}.cam-grid .webcam-frame{height:auto;aspect-ratio:16/9;border-radius:18px}.cam-grid .cam-overlay{left:14px;bottom:14px}.webcam-card .card-foot{padding-top:12px}
@media(max-width:720px){.cam-grid{grid-template-columns:1fr;padding:0 10px 4px}.cam-grid .webcam-frame{aspect-ratio:16/9}}
\n/* V4 - atmospheric timeline polish */\n.skyline{overflow:hidden;isolation:isolate}\n.skyline:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,18,48,.46) 0%,rgba(69,117,175,.18) 18%,rgba(255,184,113,.20) 27%,rgba(255,255,255,.04) 48%,rgba(255,190,105,.18) 76%,rgba(21,42,86,.38) 100%);pointer-events:none;z-index:0}\n.skyline:after{content:"";position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to top,rgba(19,67,77,.22),transparent);pointer-events:none}\n.now-line{position:absolute;top:10px;bottom:31px;width:1px;background:rgba(255,255,255,.82);z-index:8;filter:drop-shadow(0 0 4px rgba(0,0,0,.18));transition:left .5s ease}\n.now-line i{position:absolute;top:-2px;left:-4px;width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.18)}\n.now-line span{position:absolute;top:11px;left:8px;padding:3px 7px;border-radius:999px;background:rgba(10,34,58,.56);backdrop-filter:blur(8px);color:#fff;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}\n.orb{z-index:3;box-shadow:0 0 28px rgba(255,197,72,.52),0 0 65px rgba(255,197,72,.24)}\n.orb.moon{box-shadow:0 0 24px rgba(229,239,255,.45),0 0 55px rgba(199,220,255,.18)}\n.cloud-layer{z-index:4}.horizon{z-index:5}.time-line{z-index:9}\n@media(max-width:700px){.now-line span{display:none}}\n
/* V5 - cielo astronomico dinamico: alba/tramonto reali + CET/CEST automatico */
.skyline{background:linear-gradient(90deg,#07132f 0%,#122d58 19%,#e89a78 27%,#74c9f2 34%,#68c8f2 66%,#ef9f75 76%,#172f5d 83%,#07132f 100%)}
.skyline:before{background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 55%,rgba(255,205,132,.14));z-index:0}
.sky-phases{position:absolute;inset:0;z-index:0;pointer-events:none}
.stars{z-index:1;opacity:.58;mask-image:linear-gradient(90deg,#000 0%,#000 21%,transparent 31%,transparent 70%,#000 82%,#000 100%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 21%,transparent 31%,transparent 70%,#000 82%,#000 100%)}
.orb{opacity:0;pointer-events:none;transition:left .8s linear,top .8s linear,opacity .5s ease}
.orb.visible{opacity:1}
.sun-orb{background:#ffd34d;z-index:3;box-shadow:0 0 28px rgba(255,197,72,.72),0 0 75px rgba(255,197,72,.35)}
.moon-orb{width:34px;height:34px;background:#f2f5ef;z-index:3;box-shadow:0 0 22px rgba(229,239,255,.58),0 0 55px rgba(199,220,255,.24)}
.moon-orb:after{content:"";position:absolute;width:30px;height:30px;border-radius:50%;background:#17315d;left:10px;top:-4px;opacity:.82}
.astro-marker{position:absolute;bottom:42px;top:auto;z-index:8;width:1px;height:34px;background:rgba(255,255,255,.45)}
.astro-marker i{position:absolute;bottom:-3px;left:-3px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.15)}
.astro-marker span{position:absolute;bottom:37px;left:50%;transform:translateX(-50%);font-size:8px;font-weight:800;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45);white-space:nowrap}
.astro-marker.sunrise span:before{content:"ALBA ";opacity:.7}.astro-marker.sunset span:before{content:"TRAMONTO ";opacity:.7}
.now-line{top:8px;bottom:42px}.now-line span{top:8px}
.time-line{display:block}.time-line span{position:absolute;top:50%;transform:translate(-50%,-50%)}.time-line span:first-child{transform:translate(0,-50%)}.time-line span:last-child{transform:translate(-100%,-50%)}
.skyline.night .cloud-layer{filter:brightness(.55) saturate(.75)}
.skyline.twilight .horizon{background:linear-gradient(170deg,transparent 48%,rgba(56,75,76,.25) 49%,rgba(30,57,65,.40) 100%)}
@media(max-width:700px){.astro-marker span{font-size:7px}.astro-marker.sunrise span:before,.astro-marker.sunset span:before{content:""}}


/* V6 - sole, orizzonte e indicatore ADESSO */
.skyline{--warm:0;}
.sun-orb{z-index:6;transform:translate(-50%,-50%);transition:left .7s ease,top .7s ease,opacity .7s ease;}
.horizon{z-index:5;bottom:42px;height:42px;}
.cloud-layer{z-index:7;}
.astro-marker{z-index:8;}
.now-line{z-index:10;}
.time-line{z-index:11;}
.now-line span{left:50%;transform:translateX(-50%);top:10px;}
.skyline.twilight{background:linear-gradient(180deg,#6baed8 0%,#e4a080 58%,#ffbd72 100%);}
.skyline.golden{background:linear-gradient(180deg,#69bce7 0%,#b9dce5 47%,#ffc17b 82%,#ee8d65 100%);}
.skyline.night{background:linear-gradient(180deg,#07132f 0%,#142d54 58%,#5c405f 100%);}
.skyline.twilight .sun-orb,.skyline.golden .sun-orb{box-shadow:0 0 35px rgba(255,183,57,.82),0 0 90px rgba(255,133,48,.40);background:#ffc33e;}
@media(max-width:700px){.now-line span{display:none}}

/* V7 - tramonto occultato realmente dal profilo della Murgia */
.sun-orb{z-index:5;}
.cloud-layer{z-index:6;}
.horizon{
  z-index:8;
  bottom:42px;
  height:58px;
  background:linear-gradient(168deg,
    transparent 0%,
    transparent 48%,
    rgba(72,101,91,.88) 49%,
    rgba(54,80,75,.96) 72%,
    rgba(42,66,64,1) 100%);
  filter:none;
  pointer-events:none;
}
/* Secondo strato: riempie completamente tutto ciò che sta sotto il crinale. */
.horizon:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-42px;height:46px;
  background:rgba(42,66,64,1);
}
/* Il glow resta nel cielo, il disco invece viene fisicamente coperto dal terreno. */
.skyline.golden .horizon,.skyline.twilight .horizon{
  background:linear-gradient(168deg,
    transparent 0%,
    transparent 48%,
    rgba(104,105,82,.90) 49%,
    rgba(68,82,72,.97) 73%,
    rgba(45,66,63,1) 100%);
}
.astro-marker{z-index:10;}
.now-line{z-index:11;}
.time-line{z-index:12;}
.astro-marker.sunset span{bottom:42px;transform:translateX(-78%);}
.astro-marker.sunrise span{bottom:42px;transform:translateX(-22%);}

/* V8 - timeline 24h: un solo cielo continuo, niente Sole/Luna decorativi */
.skyline{
  --dawn-astro:0%;
  --dusk-astro:100%;
  background:#58b9e8;
  transition:none;
}
.skyline:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,0) 47%,rgba(255,218,162,.13) 100%);
}
.skyline:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:34%;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(to top,rgba(18,52,67,.20),transparent);
}
.skyline .sun-orb,.skyline .moon-orb{display:none!important}
.stars{
  position:absolute;
  inset:0;
  z-index:2;
  opacity:1;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.98) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(218,235,255,.82) 0 1px,transparent 1.4px),
    radial-gradient(circle,rgba(255,255,255,.65) 0 .8px,transparent 1.25px);
  background-size:71px 59px,103px 83px,47px 67px;
  background-position:9px 13px,31px 4px,17px 38px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 var(--dawn-astro),transparent calc(var(--dawn-astro) + 5%),transparent calc(var(--dusk-astro) - 5%),#000 var(--dusk-astro),#000 100%);
  mask-image:linear-gradient(90deg,#000 0%,#000 var(--dawn-astro),transparent calc(var(--dawn-astro) + 5%),transparent calc(var(--dusk-astro) - 5%),#000 var(--dusk-astro),#000 100%);
  animation:starTwinkle 4.8s ease-in-out infinite alternate;
}
.stars:after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.95) 0 1.35px,transparent 1.8px);
  background-size:137px 109px;background-position:23px 19px;
  animation:starTwinkle 3.2s ease-in-out infinite alternate-reverse;
}
@keyframes starTwinkle{from{opacity:.60}to{opacity:1}}
.horizon{z-index:5;background:linear-gradient(170deg,transparent 48%,rgba(46,75,76,.24) 49%,rgba(29,57,65,.40) 100%)}
.cloud-layer{z-index:6}
.astro-marker{z-index:9}
.now-line{z-index:11}
.time-line{z-index:12}
.astro-marker span{bottom:42px;background:rgba(7,29,51,.34);padding:3px 6px;border-radius:8px;backdrop-filter:blur(4px)}
.atmo-note{background:rgba(255,255,255,.72)}


/* V9 - stelle sparse e cursore ORA */
.stars{background:none!important;animation:none!important;mask-image:none!important;-webkit-mask-image:none!important;overflow:hidden}
.stars:after{display:none!important}
.stars b{position:absolute;display:block;border-radius:50%;background:#fff;box-shadow:0 0 3px rgba(220,238,255,.75);pointer-events:none}
.stars b:nth-child(n+55):nth-child(-n+108){/* campo serale */}
.stars b.twinkle{animation:starSparkle 4s ease-in-out infinite alternate}
.stars b.bright{box-shadow:0 0 4px #fff,0 0 9px rgba(195,224,255,.9)}
@keyframes starSparkle{0%{opacity:.22;transform:scale(.72)}45%{opacity:.95;transform:scale(1.18)}100%{opacity:.48;transform:scale(.88)}}
/* Nascondi le stelle generate nella fascia diurna usando due finestre notte dinamiche. */
.stars{clip-path:polygon(0 0,var(--dawn-astro) 0,var(--dawn-astro) 100%,0 100%,0 0)}
.stars:before{content:""}
/* Secondo campo notte: i singoli astri a destra restano visibili tramite clip individuale. */
.stars b:nth-child(n+55){display:none}
.skyline .stars-evening{display:none}
.now-line{top:0;bottom:42px;width:2px;background:linear-gradient(to bottom,rgba(255,255,255,.98),rgba(255,255,255,.58));box-shadow:0 0 9px rgba(255,255,255,.32)}
.now-line:after{content:"";position:absolute;bottom:-1px;left:-4px;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.17),0 0 10px rgba(255,255,255,.5)}
.now-line span{top:9px;left:50%;transform:translateX(-50%);font-size:9px;padding:4px 8px;background:rgba(5,26,48,.68);border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 12px rgba(0,0,0,.12)}
/* V9 visibility is controlled by JS so both night windows work */
.stars{clip-path:none!important}
.stars b:nth-child(n+55){display:block}
\n\n/* V10 - cielo atmosferico morbido + cursore ORA inequivocabile */\n.skyline{position:relative;background:#67bde8;isolation:isolate}\n.skyline:before{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 56%,rgba(10,32,48,.12));z-index:1}\n.skyline:after{height:30%;background:linear-gradient(to top,rgba(8,31,48,.22),transparent);z-index:2}\n.now-line{display:block!important;position:absolute!important;top:0!important;bottom:42px!important;width:2px!important;z-index:50!important;background:rgba(255,255,255,.96)!important;box-shadow:0 0 0 1px rgba(8,37,62,.12),0 0 12px rgba(255,255,255,.5)!important;pointer-events:none}\n.now-line:before{content:"";position:absolute;top:0;bottom:0;left:-6px;width:14px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent)}\n.now-line:after{content:"";position:absolute;bottom:-5px;left:-5px;width:10px;height:10px;border-radius:50%;background:#1684e8;border:2px solid #fff;box-shadow:0 0 0 3px rgba(12,65,108,.18),0 0 10px rgba(255,255,255,.65)}\n.now-line i{display:none!important}\n.now-line span{display:block!important;position:absolute!important;top:10px!important;left:50%!important;transform:translateX(-50%)!important;padding:5px 9px!important;border-radius:999px!important;background:rgba(7,38,66,.78)!important;border:1px solid rgba(255,255,255,.45)!important;color:#fff!important;font-size:9px!important;font-weight:850!important;letter-spacing:.06em!important;white-space:nowrap!important;box-shadow:0 5px 16px rgba(4,28,49,.20)!important}\n@media(max-width:700px){.now-line span{display:block!important;font-size:8px!important;padding:4px 6px!important}}\n

/* V11 - cursore ORA esterno alla scena, indipendente da cielo/nuvole/overflow */
.atmosphere{position:relative!important}
.current-time-marker{position:absolute;display:block;z-index:9999;pointer-events:none;width:0;top:86px;height:255px;left:50%}
.current-time-marker i{position:absolute;display:block;left:-1px;top:0;bottom:42px;width:2px;background:rgba(255,255,255,.98);box-shadow:0 0 0 1px rgba(7,42,69,.22),0 0 10px rgba(255,255,255,.85)}
.current-time-marker i:before{content:"";position:absolute;inset:0 auto 0 -5px;width:12px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent)}
.current-time-marker b{position:absolute;display:block;left:-6px;bottom:35px;width:12px;height:12px;border-radius:50%;background:#1684e8;border:2px solid #fff;box-shadow:0 0 0 3px rgba(8,55,94,.24),0 0 12px rgba(255,255,255,.8)}
.current-time-marker span{position:absolute;display:block;top:9px;left:0;transform:translateX(-50%);padding:5px 9px;border-radius:999px;background:rgba(5,37,65,.88);border:1px solid rgba(255,255,255,.65);color:#fff;font-size:9px;font-weight:850;letter-spacing:.06em;white-space:nowrap;box-shadow:0 5px 16px rgba(4,28,49,.25)}
@media(max-width:620px){.current-time-marker{height:220px}.current-time-marker span{font-size:8px;padding:4px 6px}}

/* V12 - pioggia leggibile + dati derivati dalla logica storica */
.rain-today>span{display:block;color:var(--muted);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.rain-today strong{display:flex;align-items:baseline;gap:7px;font-size:58px;line-height:1;font-weight:850;letter-spacing:-2.8px;color:#0b5e91;margin:8px 0 10px}
.rain-today strong>span{display:inline!important;color:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important}
.rain-today strong em{font-size:17px;font-weight:750;color:#537488;letter-spacing:0}
.rain-today>small{display:block;font-size:12px;color:#49677a}
.derived{margin-top:18px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(242,249,253,.94))}
.derived-badge{padding:7px 11px;border-radius:999px;background:#e8f6fc;color:#1478a9;font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}
.derived-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 22px 24px}
.derived-grid article{min-height:130px;padding:18px;border:1px solid rgba(24,91,126,.08);border-radius:18px;background:rgba(255,255,255,.72);box-shadow:0 10px 30px rgba(25,74,103,.045)}
.derived-grid article small{display:block;color:#6c8190;font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.derived-grid article strong{display:block;font-size:27px;line-height:1.1;color:#153a54}
.derived-grid article strong em{font-size:13px;font-style:normal;color:#6b8190;font-weight:700}
.derived-grid article p{margin:9px 0 0;color:#728694;font-size:10px;line-height:1.45}
@media(max-width:900px){.derived-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.rain-today strong{font-size:52px}.derived-grid{grid-template-columns:1fr;padding:0 14px 18px}.derived-grid article{min-height:0}}

/* V13 - grande icona meteo pilotata dal motore storico NewCielo.aspx */
.weather-live-icon{position:relative;width:126px;height:100px;flex:0 0 126px;filter:drop-shadow(0 14px 16px rgba(26,67,94,.13));overflow:visible}
.wx-sun,.wx-moon,.wx-cloud,.wx-rain,.wx-snow,.wx-lightning,.wx-stars{position:absolute;display:block}
.wx-sun{width:48px;height:48px;border-radius:50%;left:10px;top:7px;background:radial-gradient(circle at 38% 35%,#fff5a9 0 8%,#ffd95c 28%,#ffb82e 72%);box-shadow:0 0 0 9px rgba(255,200,56,.10),0 0 28px rgba(255,185,40,.35);animation:wxPulse 4.5s ease-in-out infinite}
.wx-moon{display:none;width:45px;height:45px;left:12px;top:6px;border-radius:50%;background:linear-gradient(135deg,#fff,#dceaff);box-shadow:0 0 25px rgba(216,235,255,.48)}
.wx-moon:after{content:"";position:absolute;width:38px;height:38px;border-radius:50%;left:13px;top:-6px;background:#dff3ff}
.wx-stars{display:none;inset:0}.wx-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:wxTwinkle 2.8s ease-in-out infinite}.wx-stars i:nth-child(1){left:5px;top:10px}.wx-stars i:nth-child(2){left:64px;top:8px;animation-delay:-1.1s}.wx-stars i:nth-child(3){left:79px;top:30px;animation-delay:-2s}
.wx-cloud{width:78px;height:29px;border-radius:30px;background:linear-gradient(180deg,#fff,#dceaf1);left:39px;top:49px;box-shadow:0 7px 15px rgba(40,76,96,.13);transition:.5s}
.wx-cloud:before,.wx-cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.wx-cloud:before{width:43px;height:43px;left:11px;top:-23px}.wx-cloud:after{width:34px;height:34px;right:8px;top:-16px}
.wx-cloud-back{left:27px;top:36px;transform:scale(.76);opacity:.72}.wx-cloud-front{animation:wxFloat 5s ease-in-out infinite}
.wx-rain{display:none;left:51px;top:77px;width:62px;height:24px}.wx-rain i{position:absolute;width:3px;height:13px;border-radius:4px;background:linear-gradient(#72cfff,#168cd5);transform:rotate(14deg);animation:wxRain .8s linear infinite}.wx-rain i:nth-child(1){left:6px}.wx-rain i:nth-child(2){left:23px;animation-delay:-.35s}.wx-rain i:nth-child(3){left:40px;animation-delay:-.12s}.wx-rain i:nth-child(4){left:55px;animation-delay:-.55s}
.wx-snow{display:none;left:48px;top:72px;width:66px;color:#fff;text-shadow:0 1px 5px #69a8cf;font-size:18px}.wx-snow i{position:absolute;font-style:normal;animation:wxSnow 2.2s linear infinite}.wx-snow i:nth-child(2){left:24px;animation-delay:-.8s}.wx-snow i:nth-child(3){left:49px;animation-delay:-1.5s}
.wx-lightning{display:none;left:76px;top:69px;width:17px;height:30px;background:#ffd742;clip-path:polygon(48% 0,100% 0,67% 40%,100% 40%,22% 100%,39% 55%,0 55%);filter:drop-shadow(0 0 5px rgba(255,211,48,.8));animation:wxFlash 4s steps(1) infinite}
.weather-live-icon[data-state="sereno"] .wx-cloud,.weather-live-icon[data-state="sereno"] .wx-cloud-back{display:none}
.weather-live-icon[data-state="poconuvoloso"] .wx-cloud-back{display:none}.weather-live-icon[data-state="poconuvoloso"] .wx-cloud-front{transform:scale(.78);transform-origin:right bottom;left:47px;top:53px}
.weather-live-icon[data-state="nuvoloso"] .wx-sun{opacity:.75;transform:scale(.82)}
.weather-live-icon[data-state="moltonuvoloso"] .wx-sun,.weather-live-icon[data-state="coperto"] .wx-sun,.weather-live-icon[data-state="pioggia"] .wx-sun,.weather-live-icon[data-state="temporale"] .wx-sun,.weather-live-icon[data-state="neve"] .wx-sun{display:none}
.weather-live-icon[data-state="moltonuvoloso"] .wx-cloud,.weather-live-icon[data-state="coperto"] .wx-cloud,.weather-live-icon[data-state="pioggia"] .wx-cloud,.weather-live-icon[data-state="temporale"] .wx-cloud,.weather-live-icon[data-state="neve"] .wx-cloud{background:linear-gradient(180deg,#edf3f6,#aebfca)}
.weather-live-icon[data-state="coperto"] .wx-cloud-front,.weather-live-icon[data-state="pioggia"] .wx-cloud-front,.weather-live-icon[data-state="temporale"] .wx-cloud-front{background:linear-gradient(180deg,#c8d5dc,#718796)}
.weather-live-icon[data-state="pioggia"] .wx-rain,.weather-live-icon[data-state="temporale"] .wx-rain{display:block}.weather-live-icon[data-state="temporale"] .wx-lightning{display:block}.weather-live-icon[data-state="neve"] .wx-snow{display:block}
.weather-live-icon[data-night="1"] .wx-sun{display:none!important}.weather-live-icon[data-night="1"] .wx-moon{display:block}.weather-live-icon[data-night="1"] .wx-stars{display:block}
.weather-live-icon[data-night="1"][data-state="moltonuvoloso"] .wx-moon,.weather-live-icon[data-night="1"][data-state="coperto"] .wx-moon,.weather-live-icon[data-night="1"][data-state="pioggia"] .wx-moon,.weather-live-icon[data-night="1"][data-state="temporale"] .wx-moon,.weather-live-icon[data-night="1"][data-state="neve"] .wx-moon{display:none}
.condition-detail{font-size:10px;color:#8395a2;margin-top:4px;letter-spacing:.02em}
@keyframes wxFloat{50%{margin-top:-2px}}@keyframes wxPulse{50%{box-shadow:0 0 0 12px rgba(255,200,56,.07),0 0 34px rgba(255,185,40,.42)}}@keyframes wxRain{0%{transform:translateY(-4px) rotate(14deg);opacity:0}25%{opacity:1}100%{transform:translateY(10px) rotate(14deg);opacity:0}}@keyframes wxSnow{0%{transform:translateY(-3px) translateX(0);opacity:0}25%{opacity:1}100%{transform:translateY(17px) translateX(5px);opacity:0}}@keyframes wxFlash{0%,88%,92%,100%{opacity:0}89%,91%{opacity:1}}@keyframes wxTwinkle{50%{opacity:.25;transform:scale(.55)}}
@media(max-width:620px){.weather-live-icon{width:104px;height:90px;flex-basis:104px;transform:scale(.88);transform-origin:left center}}

/* V14 - prodotti del motore storico */
.forecast-lab{margin-top:18px;background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(242,249,253,.96))}
.forecast-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 22px 16px}.forecast-chip{padding:18px;border-radius:18px;border:1px solid rgba(24,91,126,.08);background:rgba(255,255,255,.76);min-height:132px}.forecast-chip small,.subhead small{display:block;color:#6c8190;font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.forecast-chip strong{display:block;margin-top:8px;font-size:30px;line-height:1.08;color:#143a54}.forecast-chip strong em{font-size:14px;font-style:normal;color:#718797}.forecast-chip p{margin:8px 0 0;color:#718797;font-size:10px;line-height:1.45}.air-chip strong{color:#c77b12}.t850-panel,.thermal-panel{margin:0 22px 16px;padding:18px;border-radius:20px;background:rgba(236,247,252,.72);border:1px solid rgba(24,91,126,.07)}.subhead{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:15px}.subhead h3{margin:3px 0 0;font-size:18px;color:#102f46}.subhead>span{font-size:10px;color:#718797}.t850-strip{display:grid;grid-template-columns:repeat(12,1fr);gap:7px}.t850-hour{padding:10px 4px;border-radius:12px;background:#fff;text-align:center;box-shadow:0 5px 15px rgba(25,74,103,.04)}.t850-hour small{display:block;font-size:9px;color:#8093a0;margin-bottom:5px}.t850-hour b{font-size:13px;color:#173d57}.t850-hour.up b{color:#d34b3f}.t850-hour.down b{color:#286eb8}.t850-hour.flat b{color:#37805c}.t850-hour i{font-style:normal;font-size:10px;margin-left:2px}.thermal-chart{position:relative;height:290px;background:#fff;border-radius:16px;padding:10px}.chart-note{font-size:10px;color:#748895;margin:10px 2px 0}.chart-note code{font-family:inherit;font-weight:800;color:#2877a4}.loading-soft{color:#8295a1;font-size:11px}@media(max-width:900px){.forecast-summary{grid-template-columns:1fr 1fr}.extreme-chip{grid-column:1/-1}.t850-strip{grid-template-columns:repeat(6,1fr)}}@media(max-width:620px){.forecast-summary{grid-template-columns:1fr;padding:0 14px 14px}.extreme-chip{grid-column:auto}.t850-panel,.thermal-panel{margin:0 14px 14px;padding:14px}.t850-strip{grid-template-columns:repeat(4,1fr)}.subhead{align-items:start;flex-direction:column}.thermal-chart{height:250px}}

/* V19 - il grafico storico esce dal monitor CRT: canvas fluido */
.thermal-chart{width:100%;box-sizing:border-box;overflow:hidden}
.thermal-chart canvas#chartTemp{display:block;width:100%!important;height:100%!important;max-width:none!important}
@media(max-width:620px){.thermal-chart{height:230px;padding:6px}}


/* V20 - climatologia storica, finalmente fuori dal corridoio da 320px */
.climate-lab{margin-top:18px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(243,249,252,.97))}.decade-panel{margin:0 22px 16px;padding:18px;border-radius:20px;background:rgba(236,247,252,.72);border:1px solid rgba(24,91,126,.07)}.decade-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.decade-item{background:#fff;border-radius:15px;padding:14px 16px;box-shadow:0 5px 15px rgba(25,74,103,.04)}.decade-item small{font-size:11px;color:#607988;font-weight:750}.decade-item div{display:flex;align-items:center;gap:9px;margin-top:8px}.decade-item b{font-size:23px}.decade-item div span{color:#9aabb5}.dec-min{color:#2674b8}.dec-max{color:#c54d3e}.decade-item p{margin:5px 0 0;font-size:9px;color:#8a9aa4}.climate-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 22px 14px}.climate-panel{padding:18px;border-radius:20px;background:rgba(236,247,252,.72);border:1px solid rgba(24,91,126,.07);min-width:0}.climate-chart{position:relative;height:330px;background:#fff;border-radius:16px;padding:10px;overflow:hidden}.climate-chart canvas{display:block;width:100%!important;height:100%!important;max-width:none!important}.heatmap-panel{margin:0 22px 16px}.climate-heatmap{height:310px}.climate-note{margin:0 24px 20px}
@media(max-width:900px){.climate-grid{grid-template-columns:1fr}.decade-strip{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:620px){.decade-panel,.heatmap-panel{margin:0 14px 14px;padding:14px}.decade-strip{grid-template-columns:1fr}.climate-grid{margin:0 14px 14px;gap:12px}.climate-panel{padding:14px}.climate-chart{height:270px;padding:6px}.climate-heatmap{height:250px}.climate-note{margin:0 16px 16px}}

.chart-debug{margin:10px 14px 14px;padding:10px 12px;border-radius:10px;background:#fff3cd;color:#664d03;font:12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}

/* V29 - ECharts nativo: niente canvas ereditati, niente eval, responsive reale */
.echart-host{width:100%;height:100%;min-width:0}
.thermal-chart,.climate-chart{overflow:hidden}
@media(max-width:620px){
 .thermal-chart{height:270px;padding:4px}
 .climate-chart{height:285px;padding:4px}
 .climate-heatmap{height:270px}
 .echart-host{min-width:0!important}
}

/* V38 - lettura dati live più immediata */
.metric small{font-size:12px}
.metric strong{font-size:29px;line-height:1.05;margin-top:5px;letter-spacing:-.8px}
.metric strong.small-value{font-size:21px;line-height:1.08}
.metric em{font-size:14px}
.metric span:not(.metric-icon):not(.metric-svg){font-size:12px}
@media(max-width:620px){
 .metric small{font-size:11px}
 .metric strong{font-size:26px}
 .metric strong.small-value{font-size:19px}
 .metric em{font-size:13px}
}

/* V39 — visual refresh: professional / atmospheric / data-first */
:root{
 --ink:#10212d;--muted:#647784;--blue:#087fa8;--cyan:#18a9c7;
 --line:rgba(14,45,62,.11);--glass:rgba(255,255,255,.94);
 --shadow:0 18px 50px rgba(9,36,52,.10);
}
body{
 color:var(--ink);
 background:
  radial-gradient(circle at 78% -5%,rgba(21,151,184,.10),transparent 30%),
  radial-gradient(circle at 8% 4%,rgba(17,63,88,.08),transparent 28%),
  linear-gradient(180deg,#f2f6f8 0,#edf3f6 48%,#f5f7f8 100%);
}
.sky-glow{opacity:.34;filter:saturate(.65)}
.site-header{
 height:92px;background:rgba(247,250,251,.88);
 border-bottom:1px solid rgba(13,47,66,.12);
 box-shadow:0 8px 30px rgba(15,42,57,.045);
}
.brand strong{font-size:20px;font-weight:800;letter-spacing:-.55px}
.brand small{font-size:12px;color:#687d89}
.top-nav a{font-size:12px;font-weight:750}
.hero{gap:44px;padding:62px 0 50px}
.eyebrow,.kicker{font-size:11px;letter-spacing:1.55px;color:#087fa8}
.temperature{font-size:98px;font-weight:310;letter-spacing:-7px;color:#0b2738}
.condition{font-size:23px;font-weight:760;letter-spacing:-.3px}
.updated{font-size:13px}
.hero-stats{gap:14px}
.metric{
 min-height:116px;padding:20px 19px;gap:15px;border-radius:14px;
 background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,249,250,.96))!important;
 border:1px solid rgba(15,57,78,.10);
 box-shadow:0 9px 25px rgba(11,45,63,.065);
 backdrop-filter:none;position:relative;overflow:hidden;
}
.metric:before{
 content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
 background:linear-gradient(180deg,#13a3c3,#176f9a);
 opacity:.9
}
.metric:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(11,45,63,.11)}
.metric-svg,.metric-icon{
 width:42px;height:42px;border-radius:10px;
 background:#eaf2f5!important;border:1px solid rgba(14,67,91,.07)
}
.metric small{font-size:12px!important;letter-spacing:.85px;color:#5e7480}
.metric strong{font-size:31px!important;line-height:1.02!important;font-weight:760;letter-spacing:-1px;color:#102c3c}
.metric strong.small-value{font-size:23px!important}
.metric em{font-size:15px!important;color:#617783}
.metric span:not(.metric-icon):not(.metric-svg){font-size:12px!important;color:#758894}
.card,.climate-lab{
 border-radius:18px;border:1px solid rgba(14,48,66,.10);
 background:rgba(255,255,255,.94);
 box-shadow:0 15px 44px rgba(12,40,55,.085);
 backdrop-filter:none;
}
.card-head{padding:26px 28px 20px}
.card-head h2{font-size:25px;letter-spacing:-.65px}
.refresh-badge{font-size:11px;color:#647b88}
.cam-overlay{
 background:rgba(5,24,34,.72);border-radius:8px;
 border:1px solid rgba(255,255,255,.16)
}
.cam-overlay b{font-size:12px}.cam-overlay small{font-size:10px}
.rain-today,.t850-panel,.thermal-panel,.decade-panel,.climate-panel{
 border-radius:13px;background:#f4f8fa;
 border:1px solid rgba(15,61,82,.09);
}
.rain-today strong{font-size:54px;color:#102d3d}
.rain-today span,.rain-row{font-size:13px}
.rain-progress-top{font-size:11px}
.track{height:8px;background:#dde8ed}.track i{background:linear-gradient(90deg,#16a5c4,#126f9a)}
.subhead h3{font-size:20px}.subhead>span{font-size:11px}
.t850-hour{border-radius:8px;box-shadow:none;border:1px solid rgba(13,56,76,.08)}
.t850-hour small{font-size:10px}.t850-hour b{font-size:14px}
.decade-item{border-radius:10px;box-shadow:none;border:1px solid rgba(13,56,76,.08)}
.decade-item small{font-size:12px}.decade-item b{font-size:25px}.decade-item p{font-size:10px}
.thermal-chart,.climate-chart{border-radius:10px}
.card-foot{font-size:12px}
.air-chip,.legacy-chip{border-radius:10px}
.air-chip small,.legacy-chip small{font-size:11px}
.air-chip strong,.legacy-chip strong{font-size:20px}
/* Riduce l'effetto "pillola/giocattolo" globale */
button,.refresh-badge,.archive-link{border-radius:7px!important}
@media(max-width:900px){
 .hero{gap:28px}
 .temperature{font-size:84px}
}
@media(max-width:620px){
 .shell{width:min(100% - 22px,1280px)}
 .site-header{height:78px}
 .hero{padding:38px 0 34px}
 .temperature{font-size:76px}
 .condition{font-size:20px}
 .metric{min-height:108px;padding:17px 15px}
 .metric strong{font-size:28px!important}
 .metric strong.small-value{font-size:21px!important}
 .metric small{font-size:11px!important}
 .metric em{font-size:14px!important}
 .card-head{padding:21px 20px 16px}
 .card-head h2{font-size:22px}
}

/* V40 — WOW pass: atmospheric dark hero + editorial data UI */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Manrope:wght@400;500;600;700;800&display=swap');

html,body{font-family:"Manrope","Segoe UI",Arial,sans-serif}
body{
 background:
   radial-gradient(circle at 85% 4%,rgba(27,153,186,.12),transparent 24%),
   linear-gradient(180deg,#e9eef1 0,#f3f6f7 35%,#eef2f4 100%);
}
.site-header{
 background:#081923;
 border-bottom:1px solid rgba(255,255,255,.08);
 box-shadow:0 10px 34px rgba(4,19,28,.18);
}
.brand{color:#f4fbff}
.brand strong{font-size:21px;font-weight:800}
.brand small{color:#8ea8b5}
.top-nav a{color:#abc0ca;font-size:13px;font-weight:700;border-radius:7px}
.top-nav a:hover,.top-nav .active{
 background:rgba(255,255,255,.08);color:#fff;box-shadow:none
}
.live-pill{
 background:rgba(255,255,255,.07);color:#eaf8fc;
 border:1px solid rgba(255,255,255,.10);box-shadow:none;border-radius:8px
}
.live-pill span{color:#8fa8b4}
.hero{
 margin:26px auto 34px;
 padding:42px 42px 40px;
 border-radius:24px;
 grid-template-columns:.9fr 1.1fr;
 background:
  radial-gradient(circle at 72% 12%,rgba(37,197,222,.22),transparent 24%),
  radial-gradient(circle at 18% 0%,rgba(62,126,157,.16),transparent 29%),
  linear-gradient(135deg,#0b2230 0%,#102d3d 48%,#0c1d29 100%);
 box-shadow:0 28px 70px rgba(8,34,48,.24);
 overflow:hidden;
}
.hero:before{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:
  linear-gradient(120deg,transparent 0 54%,rgba(255,255,255,.035) 54.2% 54.7%,transparent 54.9%),
  radial-gradient(circle at 88% 90%,rgba(255,255,255,.04),transparent 23%);
}
.hero>div{position:relative;z-index:1}
.hero .eyebrow{color:#58d2e7;font-size:12px;letter-spacing:1.8px}
.hero-main{margin-top:18px;gap:28px}
.temperature{
 font-family:"Barlow Condensed","Arial Narrow","Segoe UI",sans-serif;
 font-size:118px;line-height:.78;font-weight:900;letter-spacing:-3px;
 color:#f7fcff;text-shadow:0 7px 26px rgba(0,0,0,.22)
}
.temperature sup{
 font-family:"Manrope","Segoe UI",sans-serif;
 font-size:34px;font-weight:800;top:3px;color:#73d8e9
}
.condition{
 margin-top:20px;font-size:26px;font-weight:800;letter-spacing:-.45px;color:#f3fbff
}
.updated{font-size:13px;color:#8fa9b6;margin-top:16px}
.updated strong{color:#c8d9e1}
.weather-symbol{transform:scale(1.10);transform-origin:left center}
.hero-stats{gap:12px}
.metric{
 min-height:122px;padding:18px 18px 17px;border-radius:12px!important;
 background:rgba(255,255,255,.065)!important;
 border:1px solid rgba(255,255,255,.11)!important;
 box-shadow:none!important;backdrop-filter:blur(9px)!important;
}
.metric:before{width:2px;background:linear-gradient(180deg,#52d7ea,#178aae)}
.metric:hover{
 transform:translateY(-2px);background:rgba(255,255,255,.09)!important;
 box-shadow:0 15px 30px rgba(0,0,0,.14)!important
}
.metric-svg,.metric-icon{
 width:40px;height:40px;background:rgba(255,255,255,.08)!important;
 border:1px solid rgba(255,255,255,.08)!important
}
.metric small{font-size:12px!important;color:#9bb3bf!important;letter-spacing:1px}
.metric strong{
 font-family:"Barlow Condensed","Arial Narrow","Segoe UI",sans-serif;
 font-size:37px!important;line-height:.96!important;font-weight:800!important;
 color:#f8fcff!important;letter-spacing:-.5px!important
}
.metric strong.small-value{font-size:29px!important}
.metric em{font-size:14px!important;color:#a8bdc7!important}
.metric span:not(.metric-icon):not(.metric-svg){font-size:12px!important;color:#86a0ac!important}

/* editorial cards below hero */
.card,.climate-lab{
 background:#fbfcfd;border:1px solid rgba(14,45,61,.11);
 border-radius:16px;box-shadow:0 14px 35px rgba(11,38,53,.08)
}
.card-head h2{font-size:27px;font-weight:800;color:#102532}
.card-head .kicker,.subhead small{font-size:11px;letter-spacing:1.4px;color:#0a86aa;font-weight:800}
.subhead h3{font-size:21px;font-weight:800;color:#122b39}
.card-foot{font-size:12px}
.rain-today,.t850-panel,.thermal-panel,.decade-panel,.climate-panel{
 background:#f0f4f6;border:1px solid rgba(15,55,74,.09);border-radius:11px
}
.rain-today strong{
 font-family:"Barlow Condensed","Arial Narrow","Segoe UI",sans-serif;
 font-size:60px;font-weight:800;letter-spacing:-1px
}
.rain-row{font-size:13px}
.decade-item{background:#fff;border-radius:8px}
.decade-item b{
 font-family:"Barlow Condensed","Arial Narrow","Segoe UI",sans-serif;
 font-size:30px;font-weight:800
}
.t850-hour{border-radius:7px}
.thermal-chart,.climate-chart{background:#fff;border-radius:8px}

/* stronger visual hierarchy for supporting data */
.air-chip strong,.legacy-chip strong{
 font-family:"Barlow Condensed","Arial Narrow","Segoe UI",sans-serif;
 font-size:25px;font-weight:800
}
.air-chip small,.legacy-chip small{font-size:12px}
.atmo-copy,.chart-note,.climate-note{font-size:12px!important;line-height:1.55}

/* webcams: more cinematic */
.webcam-frame{background:#0c1c25}
.webcam-frame img{filter:saturate(1.03) contrast(1.03)}
.cam-overlay{
 background:rgba(4,16,23,.74);border-radius:7px;padding:11px 14px
}
.cam-overlay b{font-size:12px}.cam-overlay small{font-size:10px}

/* mobile */
@media(max-width:900px){
 .hero{padding:34px 26px;border-radius:18px}
 .temperature{font-size:100px}
 .metric strong{font-size:34px!important}
}
@media(max-width:620px){
 .site-header{background:#081923}
 .hero{margin:16px auto 24px;padding:28px 18px 24px;border-radius:15px}
 .hero-main{gap:18px}
 .temperature{font-size:88px;letter-spacing:-2px}
 .temperature sup{font-size:27px}
 .condition{font-size:22px}
 .updated{font-size:12px}
 .metric{min-height:108px;padding:15px 13px}
 .metric strong{font-size:31px!important}
 .metric strong.small-value{font-size:25px!important}
 .metric small{font-size:11px!important}
 .card-head h2{font-size:23px}
}

/* V42 - etichetta ORA sopra la linea verticale */
.now-line{top:30px}
.now-line span{
 top:-25px;
 left:50%;
 transform:translateX(-50%);
 padding:4px 8px;
}
.now-line i{top:-2px}

/* V43 — temperatura più umana + hero mobile finalmente sana */
.temperature{
 font-size:96px!important;
 letter-spacing:-2px!important;
 line-height:.82!important;
}
.temperature sup{
 font-size:30px!important;
 top:2px!important;
}
.weather-symbol{
 transform:scale(1)!important;
}
.hero{
 grid-template-columns:.82fr 1.18fr!important;
 gap:34px!important;
}
@media(max-width:900px){
 .hero{
  grid-template-columns:1fr!important;
  gap:26px!important;
 }
 .hero-stats{
  grid-template-columns:repeat(3,1fr)!important;
 }
 .temperature{
  font-size:84px!important;
 }
}
@media(max-width:620px){
 .hero{
  display:block!important;
  padding:24px 16px 18px!important;
 }
 .hero-main{
  gap:14px!important;
  align-items:center!important;
 }
 .temperature{
  font-size:64px!important;
  line-height:.9!important;
  letter-spacing:-1.5px!important;
 }
 .temperature sup{
  font-size:22px!important;
  top:0!important;
 }
 .weather-symbol{
  width:82px!important;
  height:68px!important;
  transform:scale(.78)!important;
  transform-origin:left center!important;
  flex:0 0 72px!important;
 }
 .condition{
  font-size:19px!important;
  margin-top:12px!important;
 }
 .updated{
  font-size:11px!important;
  margin-top:12px!important;
 }
 .hero-stats{
  margin-top:22px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  width:100%!important;
 }
 .metric{
  min-height:92px!important;
  padding:13px 12px!important;
  gap:10px!important;
 }
 .metric-svg,.metric-icon{
  width:34px!important;
  height:34px!important;
 }
 .metric strong{
  font-size:26px!important;
 }
 .metric strong.small-value{
  font-size:21px!important;
 }
 .metric small{
  font-size:10px!important;
 }
 .metric em{
  font-size:12px!important;
 }
}
@media(max-width:380px){
 .temperature{
  font-size:58px!important;
 }
 .hero-main{
  gap:10px!important;
 }
 .hero-stats{
  grid-template-columns:1fr 1fr!important;
 }
}

/* V44 - marker ORA confinato dentro il cielo + temperatura più equilibrata */
.current-time-marker{
 top:0!important;
 height:100%!important;
 z-index:20!important;
}
.current-time-marker span{
 top:7px!important;
 left:0!important;
 transform:translateX(-50%)!important;
}
.current-time-marker i{
 top:30px!important;
 bottom:35px!important;
}
.current-time-marker b{
 bottom:29px!important;
}
.temperature{
 font-size:88px!important;
}
.temperature sup{
 font-size:28px!important;
}
@media(max-width:900px){
 .temperature{font-size:76px!important}
}
@media(max-width:620px){
 .temperature{font-size:58px!important}
 .temperature sup{font-size:20px!important}
}
@media(max-width:380px){
 .temperature{font-size:54px!important}
}

/* V45 - ingranditi solo i dati delle metriche richieste (non radiazione solare) */
.metric.humidity strong,
.metric.pressure strong,
.metric.dew strong,
.metric.gust strong{
 font-size:43px!important;
 line-height:.94!important;
}
.metric.wind strong.small-value{
 font-size:34px!important;
 line-height:.98!important;
}
.metric.humidity em,
.metric.wind em,
.metric.pressure em,
.metric.dew em,
.metric.gust em{
 font-size:15px!important;
}
@media(max-width:900px){
 .metric.humidity strong,
 .metric.pressure strong,
 .metric.dew strong,
 .metric.gust strong{font-size:40px!important}
 .metric.wind strong.small-value{font-size:31px!important}
}
@media(max-width:620px){
 .metric.humidity strong,
 .metric.pressure strong,
 .metric.dew strong,
 .metric.gust strong{font-size:34px!important}
 .metric.wind strong.small-value{font-size:27px!important}
 .metric.humidity em,
 .metric.wind em,
 .metric.pressure em,
 .metric.dew em,
 .metric.gust em{font-size:13px!important}
}

/* V46 - metriche principali molto piu leggibili */
.metric.humidity strong,
.metric.pressure strong,
.metric.dew strong,
.metric.gust strong{
  font-size:52px !important;
  line-height:.92 !important;
  font-weight:900 !important;
  letter-spacing:-1.6px !important;
  color:#f4fbff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.12);
}
.metric.wind strong.small-value{
  font-size:38px !important;
  line-height:.95 !important;
  font-weight:900 !important;
  letter-spacing:-1.1px !important;
  color:#f4fbff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.12);
}
.metric.wind strong.small-value #windDir{
  display:inline-block;
  font-size:.62em !important;
  font-weight:800 !important;
  letter-spacing:.8px !important;
  margin-right:8px;
  vertical-align:baseline;
  color:#b9d8e7 !important;
}
.metric.humidity em,
.metric.wind em,
.metric.pressure em,
.metric.dew em,
.metric.gust em{
  font-size:17px !important;
  font-weight:800 !important;
  color:#b6cddd !important;
}
.metric.humidity strong span,
.metric.pressure strong span,
.metric.dew strong span,
.metric.gust strong span,
.metric.wind strong span{
  font-size:1em !important;
  font-weight:inherit !important;
  color:inherit !important;
}
@media (max-width: 1100px){
  .metric.humidity strong,
  .metric.pressure strong,
  .metric.dew strong,
  .metric.gust strong{font-size:46px !important}
  .metric.wind strong.small-value{font-size:34px !important}
}
@media (max-width: 760px){
  .metric.humidity strong,
  .metric.pressure strong,
  .metric.dew strong,
  .metric.gust strong{font-size:40px !important}
  .metric.wind strong.small-value{font-size:30px !important}
  .metric.humidity em,
  .metric.wind em,
  .metric.pressure em,
  .metric.dew em,
  .metric.gust em{font-size:15px !important}
}
@media (max-width: 620px){
  .metric.humidity strong,
  .metric.pressure strong,
  .metric.dew strong,
  .metric.gust strong{font-size:34px !important}
  .metric.wind strong.small-value{font-size:26px !important}
  .metric.wind strong.small-value #windDir{display:block;font-size:.52em !important;margin-right:0;margin-bottom:2px}
}

/* V47 - metriche chiare e barre di lettura */
.metric>div{flex:1;min-width:0}
.metric strong{display:flex;align-items:flex-end;gap:6px;flex-wrap:wrap}
.metric.humidity strong #humidity,
.metric.pressure strong #pressure,
.metric.dew strong #dew,
.metric.gust strong #windgust{
  font-size:46px !important;
  line-height:.92 !important;
  font-weight:900 !important;
  letter-spacing:-1.6px !important;
  color:#f5fbff !important;
  display:inline-block !important;
}
.metric.wind strong.small-value #windDir{
  font-size:22px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.8px !important;
  color:#d4eaf3 !important;
  margin-right:6px !important;
}
.metric.wind strong.small-value #windspeed{
  font-size:30px !important;
  line-height:.95 !important;
  font-weight:900 !important;
  letter-spacing:-1px !important;
  color:#f5fbff !important;
  display:inline-block !important;
}
.metric.humidity strong em,
.metric.pressure strong em,
.metric.dew strong em,
.metric.gust strong em{
  font-size:16px !important;
  line-height:1 !important;
  font-weight:800 !important;
  color:#b6cdd8 !important;
  margin-bottom:6px !important;
}
.metric.wind strong.small-value em{
  font-size:15px !important;
  line-height:1 !important;
  font-weight:800 !important;
  color:#b6cdd8 !important;
  margin-bottom:4px !important;
}
.metric.sunmetric strong #solar{
  font-size:36px !important;
  line-height:.95 !important;
  font-weight:900 !important;
  letter-spacing:-1.2px !important;
  color:#fff6da !important;
  display:inline-block !important;
}
.metric.sunmetric strong em{
  font-size:15px !important;
  line-height:1 !important;
  font-weight:800 !important;
  color:#dfd3a7 !important;
  margin-bottom:4px !important;
}
.metric.sunmetric > div > span{
  display:flex !important;
  align-items:baseline !important;
  gap:6px !important;
  margin-top:6px !important;
  font-size:12px !important;
  color:#b9c29d !important;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:700;
}
.metric.sunmetric > div > span b{
  font-size:24px !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#fff1b7 !important;
}
.metric-gauges{margin-top:10px;display:grid;gap:8px}
.metric-gauge-row{display:grid;grid-template-columns:46px 1fr;gap:8px;align-items:center}
.metric-gauge-caption{font-size:10px;color:#8ea9b6;letter-spacing:.8px;text-transform:uppercase;font-weight:800}
.metric-gauge{position:relative;height:8px;border-radius:999px;background:rgba(1,10,16,.58);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.metric-gauge i{display:block;height:100%;width:0;border-radius:inherit;transition:width .55s ease}
.metric.humidity .metric-gauge i{background:linear-gradient(90deg,#2de8ff 0%,#1b97ff 100%)}
.metric.pressure .metric-gauge i{background:linear-gradient(90deg,#38d5ff 0%,#67e285 52%,#ffd25f 100%)}
.metric.dew .metric-gauge i{background:linear-gradient(90deg,#7ab6ff 0%,#6d6eff 100%)}
.metric.gust .metric-gauge i{background:linear-gradient(90deg,#a2c9d9 0%,#42d0bf 100%)}
.metric.sunmetric .metric-gauge.solar i{background:linear-gradient(90deg,#ffdd76 0%,#ff9d27 100%)}
.metric.sunmetric .metric-gauge.uv i{background:linear-gradient(90deg,#9be86a 0%,#f4d14e 60%,#ff8a42 100%)}

@media (max-width:1100px){
  .metric.humidity strong #humidity,
  .metric.pressure strong #pressure,
  .metric.dew strong #dew,
  .metric.gust strong #windgust{font-size:40px !important}
  .metric.wind strong.small-value #windspeed{font-size:26px !important}
  .metric.sunmetric strong #solar{font-size:31px !important}
}
@media (max-width:760px){
  .metric.humidity strong #humidity,
  .metric.pressure strong #pressure,
  .metric.dew strong #dew,
  .metric.gust strong #windgust{font-size:34px !important}
  .metric.wind strong.small-value #windDir{font-size:18px !important}
  .metric.wind strong.small-value #windspeed{font-size:23px !important}
  .metric.sunmetric strong #solar{font-size:28px !important}
  .metric.sunmetric > div > span b{font-size:20px !important}
}
@media (max-width:620px){
  .metric.humidity strong #humidity,
  .metric.pressure strong #pressure,
  .metric.dew strong #dew,
  .metric.gust strong #windgust{font-size:30px !important}
  .metric.humidity strong em,
  .metric.pressure strong em,
  .metric.dew strong em,
  .metric.gust strong em,
  .metric.wind strong.small-value em{font-size:13px !important;margin-bottom:4px !important}
  .metric-gauge-row{grid-template-columns:40px 1fr}
}

/* V48 - stessi pesi e barre della V47, dimensioni riportate a equilibrio */
.metric.humidity strong #humidity,
.metric.pressure strong #pressure,
.metric.dew strong #dew,
.metric.gust strong #windgust{
  font-size:38px !important;
  letter-spacing:-1.1px !important;
}
.metric.wind strong.small-value #windDir{
  font-size:18px !important;
  margin-right:5px !important;
}
.metric.wind strong.small-value #windspeed{
  font-size:27px !important;
  letter-spacing:-.7px !important;
}
.metric.humidity strong em,
.metric.pressure strong em,
.metric.dew strong em,
.metric.gust strong em{
  font-size:14px !important;
  margin-bottom:4px !important;
}
.metric.wind strong.small-value em{
  font-size:13px !important;
  margin-bottom:3px !important;
}
.metric.sunmetric strong #solar{
  font-size:30px !important;
}
.metric.sunmetric strong em{
  font-size:13px !important;
  margin-bottom:3px !important;
}
.metric.sunmetric > div > span b{
  font-size:19px !important;
}
@media (max-width:1100px){
  .metric.humidity strong #humidity,
  .metric.pressure strong #pressure,
  .metric.dew strong #dew,
  .metric.gust strong #windgust{font-size:35px !important}
  .metric.wind strong.small-value #windspeed{font-size:25px !important}
  .metric.sunmetric strong #solar{font-size:28px !important}
}
@media (max-width:760px){
  .metric.humidity strong #humidity,
  .metric.pressure strong #pressure,
  .metric.dew strong #dew,
  .metric.gust strong #windgust{font-size:31px !important}
  .metric.wind strong.small-value #windDir{font-size:16px !important}
  .metric.wind strong.small-value #windspeed{font-size:22px !important}
  .metric.sunmetric strong #solar{font-size:25px !important}
}
@media (max-width:620px){
  .metric.humidity strong #humidity,
  .metric.pressure strong #pressure,
  .metric.dew strong #dew,
  .metric.gust strong #windgust{font-size:29px !important}
  .metric.wind strong.small-value #windspeed{font-size:21px !important}
  .metric.sunmetric strong #solar{font-size:24px !important}
}

/* V49 - nuvole osservate dalla storia giornaliera ECO */
#skyline .cloud-layer{display:none!important}
.cloud-history-canvas{
 position:absolute;inset:0;width:100%;height:100%;
 z-index:4;pointer-events:none;
}
#skyline .horizon{z-index:5}
#skyline .astro-marker{z-index:7}
#skyline .time-line{z-index:9}
#skyline .current-time-marker{z-index:20!important}

/* V50 - GIF storiche MeteoPutignano */
.cloud-history-canvas{display:none!important}
.cloud-history-layer{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
.cloud-history-layer .cloud-sprite,.cloud-history-layer .phen-sprite{
 position:absolute;display:block;transform-origin:center center;image-rendering:auto;will-change:transform,opacity}
.cloud-history-layer .cloud-sprite{filter:blur(1.25px) saturate(.94) contrast(.96);opacity:.48}
.cloud-history-layer .cloud-high{z-index:1;filter:blur(1.75px) saturate(.9);opacity:.34}
.cloud-history-layer .cloud-mid{z-index:2;filter:blur(1.45px) saturate(.92);opacity:.40}
.cloud-history-layer .cloud-low{z-index:3;filter:blur(1.15px) saturate(.96);opacity:.50}
.cloud-history-layer .cloud-rain{z-index:4;filter:blur(1.35px) saturate(.88);opacity:.58}
.cloud-history-layer .phen-rain,.cloud-history-layer .phen-snow{
 z-index:9;filter:blur(4px);opacity:.34;mix-blend-mode:screen}
.cloud-history-layer .phen-lightning{
 z-index:11;filter:blur(.45px) drop-shadow(0 0 8px rgba(210,235,255,.75));opacity:.9}
@media(max-width:620px){
 .cloud-history-layer .cloud-sprite{filter:blur(.95px) saturate(.95)}
 .cloud-history-layer .phen-rain,.cloud-history-layer .phen-snow{filter:blur(3px)}
}


/* V53 - cielo: via il rettangolo/collina, più spazio al cielo reale */
#skyline .horizon,
#skyline .horizon:after{
 display:none !important;
}