:root{
  --ink:#1d2a32; --ink-soft:#5c6b74; --sky:#2f97d6; --sky-deep:#1f78b4;
  --sun:#ffb23e; --sun-deep:#f59218; --rain:#5b8def; --paper:#fbf6ec;
  --card:#ffffff; --line:#eee6d6; --shadow:0 18px 40px -22px rgba(31,42,50,.30);
  --shadow-soft:0 8px 24px -16px rgba(31,42,50,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Figtree',sans-serif;color:var(--ink);
  background:radial-gradient(120% 60% at 50% -10%, #cdeafb 0%, #e8f3f3 38%, var(--paper) 72%);
  min-height:100vh;display:flex;justify-content:center;padding:22px 16px 40px;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.app{width:100%;max-width:452px}

/* ---- sfondo adattivo al meteo ---- */
body.sky-sun{background:radial-gradient(120% 60% at 50% -10%, #ffe6b0 0%, #cdeafb 38%, var(--paper) 75%)}
body.sky-cloud{background:radial-gradient(120% 60% at 50% -10%, #d4e2ec 0%, #e8f0f3 40%, var(--paper) 76%)}
body.sky-rain{background:radial-gradient(120% 60% at 50% -10%, #aebfd6 0%, #d6e0ec 40%, var(--paper) 78%)}
body.sky-storm{background:radial-gradient(120% 60% at 50% -10%, #8f9ec2 0%, #c2cbe0 40%, var(--paper) 80%)}
body.sky-snow{background:radial-gradient(120% 60% at 50% -10%, #e7eef6 0%, #eef4f8 40%, var(--paper) 76%)}
body.sky-fog{background:radial-gradient(120% 60% at 50% -10%, #d8dde0 0%, #e6eaec 42%, var(--paper) 78%)}
body.sky-night{background:radial-gradient(120% 70% at 50% -10%, #2b3a55 0%, #44597e 34%, #9aa7bd 70%, var(--paper) 100%)}
body.sky-night .place h1,body.sky-night .temp,body.sky-night .nowmeta .cond{color:#1d2a32}

.top{display:flex;align-items:center;gap:9px;justify-content:center;margin:8px 0 0;opacity:0;animation:rise .7s .05s forwards}
.tagline{text-align:center;font-family:'Fraunces',serif;font-style:italic;font-weight:600;font-size:15px;color:var(--sky-deep);margin:13px auto 30px;letter-spacing:.1px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#eaf5fc;border:1px solid #cfe8f7;border-radius:30px;padding:7px 16px;opacity:0;animation:rise .7s .11s forwards}
.taglinewrap{text-align:center}
.tagline i{width:5px;height:5px;border-radius:50%;background:var(--sun-deep);display:block;flex:none}
.mark{width:38px;height:38px;flex:none}
.mark .ray{transform-origin:21px 22px;animation:spin 22s linear infinite}
.word{font-family:'Fraunces',serif;font-weight:600;font-size:25px;letter-spacing:-.3px}
.word .q{color:var(--sun-deep)}

.hero{text-align:center;opacity:0;animation:rise .7s .14s forwards}
.hello{font-family:'Fraunces',serif;font-weight:500;font-size:30px;line-height:1.18;letter-spacing:-.5px;margin-bottom:18px}
.hello b{font-weight:600;background:linear-gradient(90deg,var(--sky-deep),var(--sky));-webkit-background-clip:text;background-clip:text;color:transparent}
.search{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:30px;padding:13px 18px;box-shadow:var(--shadow-soft);transition:.25s}
.search:focus-within{border-color:#bfe0f5;box-shadow:0 0 0 4px rgba(47,151,214,.12),var(--shadow-soft)}
.search svg{flex:none}
.search input{border:none;outline:none;font:inherit;font-size:16px;flex:1;background:none;color:var(--ink)}
.search input::placeholder{color:#9aa7ae}
.search button{border:none;background:var(--sky-deep);color:#fff;font:inherit;font-weight:600;font-size:14px;border-radius:22px;padding:8px 16px;cursor:pointer}
.loc{font-size:13px;color:var(--ink-soft);margin-top:12px;display:flex;gap:6px;align-items:center;justify-content:center}
.loc b{color:var(--sky-deep);font-weight:600}
.geobtn{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:9px 16px;font:inherit;font-size:14px;font-weight:600;color:var(--sky-deep);cursor:pointer;box-shadow:var(--shadow-soft);transition:.2s}
.geobtn:hover{border-color:#bfe0f5;background:#f6fbfe}
.geobtn:disabled{opacity:.6;cursor:default}

.card{background:var(--card);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:22px 22px 8px;margin-top:26px;overflow:hidden;opacity:0;animation:rise .7s .26s forwards}
.place{display:flex;justify-content:space-between;align-items:baseline}
.place h1{font-family:'Fraunces',serif;font-weight:600;font-size:20px;letter-spacing:-.2px}
.place span{font-size:12.5px;color:var(--ink-soft);font-weight:500}

.now{display:flex;align-items:center;gap:14px;margin:14px 0 4px}
.temp{font-family:'Fraunces',serif;font-weight:500;font-size:74px;line-height:.9;letter-spacing:-2px}
.temp sup{font-size:26px;font-weight:500;top:-1.4em;color:var(--ink-soft)}
.nowmeta{flex:1}
.nowmeta .cond{font-weight:600;font-size:16px;margin-bottom:2px}
.nowmeta .sub{font-size:13px;color:var(--ink-soft)}
.bigicon{font-size:54px;flex:none;line-height:1}

.nowcast{display:flex;align-items:center;gap:11px;background:linear-gradient(100deg,#eef5ff,#e7f0ff);border:1px solid #d8e6ff;border-radius:16px;padding:12px 14px;margin:14px 0 4px}
.nowcast .drop{font-size:26px;flex:none}
.nowcast b{color:var(--rain)}
.nowcast .t{font-size:14px;line-height:1.3}
.nowcast .t span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:1px}

.conf{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-soft);background:#f3efe4;border-radius:20px;padding:5px 11px;margin:12px 0 4px;font-weight:500}
.conf i{width:7px;height:7px;border-radius:50%;background:var(--sun-deep);display:block}
.conf.alta i{background:#3fb27f}
.conf.media i{background:var(--sun-deep)}
.conf.bassa i{background:#e2664f}
.anchor{font-size:11.5px;color:var(--sky-deep);background:#eaf5fc;border:1px solid #cfe8f7;border-radius:14px;padding:6px 11px;margin:8px 0 2px;display:inline-block;font-weight:500}
.anchor b{font-weight:700}

/* ---- pagina precisione ---- */
.prec{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.precrow{display:flex;align-items:center;gap:12px}
.precname{width:34%;font-weight:600;font-size:13.5px}
.precbars{flex:1;display:flex;flex-direction:column;gap:5px}
.precbar{display:flex;align-items:center;gap:8px;font-size:12px}
.precbar .lab{width:46px;color:var(--ink-soft)}
.precbar .val{font-family:'Fraunces',serif;font-weight:600;padding:2px 9px;border-radius:8px}
.precbar .val.raw{background:#f3efe4;color:var(--ink-soft)}
.precbar .val.ok{background:#e7f6ee;color:#2f9e6b}
.precgain{font-family:'Fraunces',serif;font-weight:700;font-size:18px;width:64px;text-align:right}
.precgain.pos{color:#2f9e6b}
.precgain.neg{color:#d9624c}

/* ---- consigli di oggi ---- */
.advice{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-soft);padding:4px 16px 12px;margin-top:16px;opacity:0;animation:rise .7s .30s forwards}
.advrow{display:flex;align-items:flex-start;gap:12px;padding:10px 2px;border-top:1px solid var(--line)}
.advrow:first-of-type{border-top:none}
.advic{font-size:24px;width:32px;text-align:center;flex:none;line-height:1.2}
.advtxt{font-size:13px;line-height:1.35}
.advtxt b{display:block;font-weight:600;margin-bottom:1px}
.advtxt span{color:var(--ink-soft);font-size:12px}

/* ---- pagina privacy ---- */
.pp{font-size:13px;line-height:1.5;margin:6px 0;color:var(--ink)}
.pph{font-family:'Fraunces',serif;font-size:15px;font-weight:600;margin:16px 0 4px}

.hours{display:flex;gap:9px;overflow-x:auto;padding:16px 2px 18px;margin:6px -22px 0;padding-left:22px;padding-right:22px;scroll-snap-type:x mandatory}
.hours::-webkit-scrollbar{display:none}
.hr{flex:none;width:62px;background:#fbfaf6;border:1px solid var(--line);border-radius:16px;padding:11px 8px 12px;text-align:center;scroll-snap-align:start;transition:.2s}
.hr:first-child{background:linear-gradient(180deg,#fff6e6,#fffdf8);border-color:#f3e2bf}
.hr .h{font-size:12px;color:var(--ink-soft);font-weight:600}
.hr .ic{font-size:19px;margin:5px 0 4px}
.hr .tp{font-weight:700;font-size:15px;font-family:'Fraunces',serif}
.hr .rn{font-size:10.5px;color:var(--rain);font-weight:600;margin-top:5px}
.hr .wd{font-size:10px;color:var(--ink-soft);margin-top:3px}
.hr .rn.dry{color:#c2b89e}

.legend{display:flex;gap:16px;justify-content:center;font-size:11px;color:var(--ink-soft);padding:2px 0 18px;border-top:1px solid var(--line);margin-top:2px;padding-top:14px}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:9px;height:9px;border-radius:3px;display:block}

.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px;opacity:0;animation:rise .7s .3s forwards}
.chip{font-size:13px;color:var(--sky-deep);background:#eaf5fc;border:1px solid #cfe8f7;border-radius:20px;padding:7px 13px;font-weight:600}
.chip:hover{background:#dcecf8;background:#d8edfa}

.trust{text-align:center;font-size:12.5px;color:var(--ink-soft);margin-top:22px;line-height:1.5;opacity:0;animation:rise .7s .38s forwards}
.trust b{color:var(--ink);font-weight:600}
.foot{text-align:center;font-size:10.5px;color:#a89e8a;margin-top:18px;line-height:1.6;opacity:0;animation:rise .7s .46s forwards}
.foot a{color:#8a8270;text-decoration:underline}
.badge{display:inline-block;font-size:10px;color:var(--sun-deep);background:#fff4e0;border:1px solid #ffe3b0;border-radius:20px;padding:3px 10px;margin-bottom:14px;font-weight:600;letter-spacing:.3px}
.back{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--sky-deep);font-weight:600;margin-top:18px}

/* ---- 7 giorni ---- */
.days{background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow-soft);padding:4px 16px 8px;margin-top:16px;opacity:0;animation:rise .7s .32s forwards}
.dayh{font-size:10.5px;color:var(--ink-soft);font-weight:600;padding:13px 2px 4px;letter-spacing:.4px;text-transform:uppercase}
.day{display:flex;align-items:center;gap:9px;padding:11px 2px;border-top:1px solid var(--line)}
.day:first-of-type{border-top:none}
.day .dl{width:52px;font-weight:600;font-size:14px}
.day .di{font-size:20px;width:26px;text-align:center}
.day .dc{flex:1;font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:6px;min-width:0}
.day .dc b{font-weight:500;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.day .dr{font-size:11.5px;color:var(--rain);font-weight:600;width:38px;text-align:right}
.day .dt{font-family:'Fraunces',serif;font-weight:600;font-size:14px;width:62px;text-align:right}
.day .dt .mn{color:var(--ink-soft);font-weight:500}
.dayconf{font-size:9px;padding:2px 6px;border-radius:10px;font-weight:700;flex:none}
.dayconf.alta{background:#e7f6ee;color:#2f9e6b}
.dayconf.media{background:#fff4e0;color:var(--sun-deep)}
.dayconf.bassa{background:#fbecea;color:#d9624c}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;opacity:1!important;transform:none!important}}