:root{
  --deep:#1c261d;
  --teal:#2e5237;
  --teal-2:#23402b;
  --teal-soft:rgba(46,82,55,0.12);
  --water:#2b8fd6;
  --water-soft:rgba(43,143,214,0.14);
  --mist:#f4f1e8;
  --mist-2:#ebe6da;
  --card:#fffdf8;
  --ink:#1c261d;
  --ink-soft:#4e5a4a;
  --ink-muted:#5d6959;
  --amber:#b8741f;
  --amber-soft:rgba(201,130,47,0.14);
  --danger:#c1503f;
  --warning:var(--amber);
  --success:#2f9e6e;
  --line:rgba(28,38,29,0.12);
  --line-strong:rgba(28,38,29,0.24);
  --grid:rgba(28,38,29,0.08);
  --shadow:0 1px 2px rgba(28,38,29,0.05);
  --ease:cubic-bezier(.4,0,.2,1);
  --tabbar-h:64px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --deep:#e9e4d3; --teal:#8fb89a; --teal-2:#a7cdb0; --teal-soft:rgba(143,184,154,0.16);
    --water:#5aaee8; --water-soft:rgba(90,174,232,0.16);
    --mist:#171d15; --mist-2:#1f261b; --card:#1d2419;
    --ink:#e9e4d3; --ink-soft:#b9c2ad; --ink-muted:#98a58d;
    --amber:#e0a75e; --amber-soft:rgba(224,167,94,0.15); --danger:#e18271;
    --success:#5cc493;
    --line:rgba(233,228,211,0.12); --line-strong:rgba(233,228,211,0.24); --grid:rgba(233,228,211,0.08);
    --shadow:0 1px 2px rgba(0,0,0,0.3), 0 10px 28px -14px rgba(0,0,0,0.6);
  }
}
:root[data-theme="dark"]{
  --deep:#e9e4d3; --teal:#8fb89a; --teal-2:#a7cdb0; --teal-soft:rgba(143,184,154,0.16);
  --water:#5aaee8; --water-soft:rgba(90,174,232,0.16);
  --mist:#171d15; --mist-2:#1f261b; --card:#1d2419;
  --ink:#e9e4d3; --ink-soft:#b9c2ad; --ink-muted:#98a58d;
  --amber:#e0a75e; --amber-soft:rgba(224,167,94,0.15); --danger:#e18271;
  --success:#5cc493;
  --line:rgba(233,228,211,0.12); --line-strong:rgba(233,228,211,0.24); --grid:rgba(233,228,211,0.08);
  --shadow:0 1px 2px rgba(0,0,0,0.3), 0 10px 28px -14px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Instrument Sans',system-ui,sans-serif;
  background:var(--mist);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',Georgia,serif; font-weight:600; letter-spacing:-0.01em;}
svg{width:18px; height:18px; flex:none;}
a{color:var(--teal-2);}
[hidden]{display:none !important;}

.app-shell{max-width:560px; margin:0 auto; min-height:100vh; position:relative;}

/* ---------- Intestazione ---------- */
header{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(155deg, #12746e, #0a5a56);
  color:#fff;
  padding:14px 16px;
  padding-top:max(14px, env(safe-area-inset-top));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  box-shadow:0 4px 16px -6px rgba(13,59,61,0.4);
}
.brand{display:flex; align-items:center; gap:10px; min-width:0;}
.brand-mark{
  width:38px; height:38px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:rgba(255,255,255,0.16);
}
.brand-mark svg{width:20px; height:20px;}
.brand-text{min-width:0;}
.brand-text h1{margin:0; font-size:18px; font-weight:700; line-height:1.15;}
.brand-text > span{font-size:11.5px; opacity:0.9; display:flex; align-items:center; gap:6px; white-space:nowrap;}
#btn-torna{
  width:auto; background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.25);
  color:#fff; padding:8px 12px; border-radius:20px; cursor:pointer;
  font-family:'Instrument Sans',sans-serif; font-size:12.5px; font-weight:600;
  display:flex; align-items:center; gap:6px;
}
#btn-torna svg{width:14px; height:14px;}
#theme-toggle{
  width:36px; height:36px; flex:none; border-radius:50%; padding:0;
  background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.25);
  color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#theme-toggle svg{width:17px; height:17px;}
.header-actions{display:flex; align-items:center; gap:8px;}
.dot{display:inline-block; width:8px; height:8px; border-radius:50%; flex:none;}
.dot.green{background:#7ee2b2; box-shadow:0 0 0 3px rgba(126,226,178,0.25);}
.dot.red{background:#ffb0a3; box-shadow:0 0 0 3px rgba(255,176,163,0.25);}
.dot.grey{background:rgba(255,255,255,0.6);}

main{padding:16px 16px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom)); max-width:560px; margin:0 auto;}

/* ---------- Barra di navigazione ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; justify-content:center;
  background:var(--card); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 20px -12px rgba(13,59,61,0.25);
}
.tabbar button{
  flex:1; max-width:112px; height:var(--tabbar-h); width:auto; padding:6px 2px 8px;
  background:none; border:none; border-radius:0; color:var(--ink-muted);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-family:'Instrument Sans',sans-serif; font-size:11px; font-weight:600; cursor:pointer; position:relative;
}
.tabbar button svg{width:22px; height:22px;}
.tabbar button.active{color:var(--teal-2);}
.tabbar button.active::before{
  content:""; position:absolute; top:0; left:28%; right:28%; height:3px; border-radius:0 0 3px 3px; background:var(--teal);
}
.tabbar button:active{transform:none;}

.sezione-titolo{
  font-size:13px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--ink-soft); margin:22px 4px 10px; font-family:'Instrument Sans',sans-serif;
}

/* ---------- Riquadri ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
}
.card h2{
  margin:0 0 4px; font-size:16.5px; font-weight:700;
  display:flex; align-items:center; gap:8px;
}
.card h2 .ic{width:19px; height:19px; color:var(--teal);}
.card > p{color:var(--ink-soft); font-size:13px; margin:0 0 14px; line-height:1.5;}
.card-head-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px;}
.card-head-row h2{margin:0;}

/* ---------- Cruscotto: stato attuale ---------- */
.hero{
  display:grid; grid-template-columns:auto 1fr; gap:6px 16px; align-items:center;
  padding:18px; border-radius:22px; color:#fff;
  background:linear-gradient(150deg, #1a8a82 0%, #0b5f5a 100%);
  box-shadow:0 14px 32px -16px rgba(10,90,86,0.7);
  position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; right:-40px; top:-60px; width:200px; height:200px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%); pointer-events:none;
}
.hero-attivo{background:linear-gradient(150deg, #2b8fd6 0%, #115e9c 100%); box-shadow:0 14px 32px -16px rgba(17,94,156,0.75);}
.hero-pausa, .hero-avviso{background:linear-gradient(150deg, #5d7577 0%, #3b5153 100%); box-shadow:0 14px 32px -16px rgba(40,60,62,0.7);}
.hero-ring{position:relative; width:96px; height:96px;}
.hero-ring > svg{width:96px; height:96px; transform:rotate(-90deg);}
.ring-track{fill:none; stroke:rgba(255,255,255,0.18); stroke-width:9;}
.ring-fill{fill:none; stroke:#fff; stroke-width:9; stroke-linecap:round; transition:stroke-dashoffset 1s linear;}
.hero-ring-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;}
.hero-ring .hero-icon{width:26px; height:26px;}
.hero-time{font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:15px; font-variant-numeric:tabular-nums;}
.hero-time:empty{display:none;}
.hero-attivo .hero-icon{animation:goccia 1.4s var(--ease) infinite;}
@keyframes goccia{0%,100%{transform:translateY(0);} 50%{transform:translateY(3px);}}
.hero-text{display:flex; flex-direction:column; gap:3px; min-width:0; position:relative; z-index:1;}
.hero-kicker{font-size:11.5px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; opacity:0.85;}
.hero-title{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:21px; line-height:1.2;}
.hero-sub{font-size:13px; opacity:0.9; line-height:1.4;}
.btn-stop{
  grid-column:1 / -1; margin-top:10px; position:relative; z-index:1;
  background:#fff; color:#b3402f; box-shadow:0 6px 16px -8px rgba(0,0,0,0.4);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-stop svg{width:16px; height:16px;}

/* ---------- Zone ---------- */
.zone-grid{display:grid; gap:10px;}
.zona-tile{
  position:relative; overflow:hidden; width:100%; text-align:left;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:14px; border-radius:16px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); box-shadow:var(--shadow);
  font-family:'Instrument Sans',sans-serif; font-weight:500; font-size:14px; cursor:pointer;
}
.zona-num{
  width:42px; height:42px; border-radius:13px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--teal-soft); color:var(--teal-2);
  font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:19px; position:relative; z-index:1;
}
.zona-num.piccolo{width:34px; height:34px; border-radius:10px; font-size:15px;}
.zona-info{display:flex; flex-direction:column; gap:3px; min-width:0; position:relative; z-index:1;}
.zona-info strong{font-size:15px; font-weight:700;}
.zona-info span{font-size:12.5px; color:var(--ink-soft);}
.zona-prossima{display:flex; align-items:center; gap:5px;}
.zona-prossima svg{width:13px; height:13px;}
.zona-stato{display:flex; flex-direction:column; align-items:flex-end; gap:6px; position:relative; z-index:1;}
.badge-zona{color:var(--ink-muted);}
.badge-zona svg{width:17px; height:17px;}
.pill{
  font-size:11px; font-weight:700; padding:4px 9px; border-radius:20px; white-space:nowrap;
  background:var(--mist-2); color:var(--ink-soft);
}
.pill.aperta{background:var(--water); color:#fff;}
.pill.coda{background:var(--water-soft); color:var(--water);}
.pill.sete{background:var(--amber-soft); color:var(--amber);}
.zona-tile.aperta{border-color:transparent; background:linear-gradient(180deg, var(--card), var(--water-soft));}
.zona-tile.aperta .zona-num{background:var(--water); color:#fff;}
.zona-acqua{position:absolute; inset:0; pointer-events:none; opacity:0;}
.zona-tile.aperta .zona-acqua{opacity:1;}
.zona-acqua i{
  position:absolute; top:-14px; width:6px; height:10px; border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:var(--water); opacity:0.55; animation:cade 1.6s linear infinite;
}
.zona-acqua i:nth-child(1){left:18%; animation-delay:0s;}
.zona-acqua i:nth-child(2){left:36%; animation-delay:.5s;}
.zona-acqua i:nth-child(3){left:54%; animation-delay:.2s;}
.zona-acqua i:nth-child(4){left:70%; animation-delay:.9s;}
.zona-acqua i:nth-child(5){left:86%; animation-delay:.35s;}
@keyframes cade{0%{transform:translateY(0); opacity:0;} 15%{opacity:0.55;} 100%{transform:translateY(110px); opacity:0;}}
@media (prefers-reduced-motion: reduce){
  .zona-acqua i, .hero-attivo .hero-icon{animation:none;}
  .ring-fill{transition:none;}
}

/* ---------- Meteo ---------- */
.meteo-giorni{display:grid; grid-template-columns:repeat(4, 1fr); gap:8px;}
.meteo-giorno{
  display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  padding:12px 4px; border-radius:14px; background:var(--mist-2);
}
.meteo-giorno span{font-size:11.5px; font-weight:600; color:var(--ink-soft);}
.meteo-giorno b{font-family:'Instrument Sans',sans-serif; font-size:14px;}
.meteo-giorno small{font-size:11px; color:var(--ink-soft);}
.meteo-icona{width:26px; height:26px; color:var(--amber);}
.meteo-giorno.piove{background:var(--water-soft);}
.meteo-giorno.piove .meteo-icona{color:var(--water);}
.temp-num{font-size:24px !important; line-height:26px;}
.meteo-vuoto{grid-column:1 / -1; display:flex; align-items:center; gap:10px; color:var(--ink-soft); font-size:13px; padding:6px 2px;}
.meteo-nota{font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:12px 2px 14px;}
.btn-group{display:flex; gap:8px;}
.btn-group button{display:flex; align-items:center; justify-content:center; gap:6px;}
.btn-group svg{width:14px; height:14px;}

/* ---------- Piante ---------- */
.filtri{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 12px; scrollbar-width:none;}
.filtri::-webkit-scrollbar{display:none;}
.chip{
  width:auto; flex:none; padding:8px 14px; border-radius:20px; font-size:13px; font-weight:600;
  background:var(--card); color:var(--ink-soft); border:1px solid var(--line-strong);
}
.chip span{opacity:0.7; margin-left:2px;}
.chip.active{background:var(--teal); border-color:var(--teal); color:#fff;}
.piante-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;}
.pianta-card{
  width:100%; text-align:left; display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:14px; border-radius:18px; border:1px solid var(--line); background:var(--card);
  color:var(--ink); box-shadow:var(--shadow); font-family:'Instrument Sans',sans-serif; font-weight:500; cursor:pointer;
}
.pianta-card.sete{border-color:rgba(201,130,47,0.45);}
.pianta-info{display:flex; flex-direction:column; gap:2px; min-width:0; width:100%;}
.pianta-info strong{font-size:14.5px; font-weight:700; line-height:1.25; overflow-wrap:anywhere;}
.pianta-zona{font-size:12px; color:var(--ink-soft);}
.pianta-riga{font-size:12px; font-weight:600; color:var(--teal-2); margin-top:3px;}
.pianta-card.sete .pianta-riga{color:var(--amber);}

.gauge{position:relative; width:60px; height:60px; flex:none;}
.gauge svg{width:100%; height:100%; transform:rotate(-90deg);}
.gauge-track{fill:none; stroke:var(--mist-2); stroke-width:6;}
.gauge-fill{fill:none; stroke:var(--teal); stroke-width:6; stroke-linecap:round;}
.gauge.presto .gauge-fill{stroke:var(--water);}
.gauge.sete .gauge-track{stroke:var(--amber-soft);}
.gauge.spento .gauge-fill{stroke:transparent;}
.gauge-centro{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;}
.gauge-centro b{font-family:'Instrument Sans',sans-serif; font-size:18px;}
.gauge-centro span{font-size:9.5px; color:var(--ink-soft); margin-top:2px;}
.gauge.sete .gauge-centro b{color:var(--amber);}
.gauge-lg{width:76px; height:76px;}
.gauge-lg .gauge-centro b{font-size:22px;}

.vuoto{text-align:center; padding:40px 20px; color:var(--ink-soft); font-size:14px;}
.vuoto svg{width:44px; height:44px; color:var(--teal); opacity:0.7;}
.vuoto p{margin:8px 0; line-height:1.5;}

/* Scheda della pianta (pannello dal basso) */
.sheet-backdrop{position:fixed; inset:0; z-index:40; background:rgba(5,20,21,0.45); opacity:0; transition:opacity .2s var(--ease);}
.sheet-backdrop.open{opacity:1;}
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:41; margin:0 auto; max-width:560px;
  max-height:88vh; overflow-y:auto;
  background:var(--card); border-radius:24px 24px 0 0; padding:10px 18px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px -12px rgba(0,0,0,0.4);
  transform:translateY(100%); transition:transform .22s var(--ease);
}
.sheet.open{transform:translateY(0);}
.sheet-grip{width:40px; height:4px; border-radius:4px; background:var(--line-strong); margin:0 auto 14px;}
.sheet-head{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; margin-bottom:16px;}
.sheet-head h2{margin:0 0 4px; font-size:20px;}
.icon-btn{
  width:36px; height:36px; padding:0; border-radius:50%; align-self:start;
  display:flex; align-items:center; justify-content:center;
  background:var(--mist-2); color:var(--ink-soft); border:none;
}

/* ---------- Programma ---------- */
.timeline{display:flex; flex-direction:column; gap:0; margin-top:4px;}
.timeline-riga{display:grid; grid-template-columns:18px 1fr; gap:10px; padding:8px 0; position:relative;}
.timeline-riga:not(:last-child)::before{content:""; position:absolute; left:5px; top:24px; bottom:-8px; width:2px; background:var(--line-strong);}
.timeline-punto{width:12px; height:12px; border-radius:50%; background:var(--teal); margin-top:4px; box-shadow:0 0 0 3px var(--teal-soft);}
.timeline-riga strong{display:block; font-size:14px;}
.timeline-riga span{font-size:12.5px; color:var(--ink-soft);}

.zona-row{padding:14px;}
.zona-top{display:flex; gap:8px; align-items:center;}
.zona-top input{
  padding:10px; border:1px solid var(--line-strong); border-radius:10px; background:var(--mist-2);
  color:var(--ink); font-family:'Instrument Sans',sans-serif; font-size:14px; min-width:0;
}
.zona-nome{flex:1; font-weight:600;}
.zona-orario{width:120px; flex:none; font-family:'Instrument Sans',sans-serif !important; font-weight:700;}
.zona-opzioni{display:flex; flex-wrap:wrap; gap:8px 16px; margin-top:12px; font-size:13px; color:var(--ink-soft);}
.zona-opzioni label{display:flex; align-items:center; gap:7px;}
.zona-opzioni input[type="checkbox"]{accent-color:var(--teal); width:17px; height:17px;}
.zona-portata-val{
  width:62px; padding:6px; border:1px solid var(--line-strong); border-radius:8px;
  background:var(--mist-2); color:var(--ink); font-size:13px;
}

.switch{position:relative; display:inline-block; width:50px; height:28px; flex:none;}
.switch input{opacity:0; width:0; height:0; position:absolute;}
.switch span{position:absolute; inset:0; border-radius:28px; background:var(--line-strong); cursor:pointer; transition:background 0.2s var(--ease);}
.switch span::before{content:""; position:absolute; width:22px; height:22px; left:3px; top:3px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.25); transition:transform 0.2s var(--ease);}
.switch input:checked + span{background:var(--teal);}
.switch input:checked + span::before{transform:translateX(22px);}
.switch input:focus-visible + span{outline:2px solid var(--teal); outline-offset:2px;}

/* ---------- Consumi ---------- */
.stat-row{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; margin-bottom:14px;}
.stat-tile{
  background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:3px; min-width:0;
}
.stat-label{font-size:12px; color:var(--ink-soft); font-weight:500;}
.stat-value{font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:24px; line-height:1.2; color:var(--ink);}
.stat-note{font-size:11.5px; color:var(--ink-muted);}
.chart-card h2{font-size:15.5px;}
.chart-sub{font-size:12.5px !important; margin:0 0 10px !important;}
.chart{width:100%; overflow:hidden;}
.chart svg{width:100%; height:auto; display:block;}
.chart .griglia{stroke:var(--grid); stroke-width:1;}
.chart .base{stroke:var(--line-strong); stroke-width:1;}
.chart .asse{fill:var(--ink-muted); font-size:10.5px; font-family:'Instrument Sans',sans-serif;}
.chart .asse.oggi{fill:var(--ink); font-weight:600;}
.chart .etichetta{fill:var(--ink); font-size:11px; font-weight:600; font-family:'Instrument Sans',sans-serif;}
.chart .barra{fill:var(--teal);}
.chart .hit{fill:transparent; cursor:pointer;}
.chart .hit.attivo{fill:var(--teal-soft);}
.chart-tooltip{
  position:fixed; z-index:60; pointer-events:none; max-width:260px;
  background:var(--ink); color:var(--card); font-size:12px; font-weight:600; line-height:1.35;
  padding:7px 10px; border-radius:8px; box-shadow:0 6px 18px -6px rgba(0,0,0,0.4);
}
.tabella-dati{margin-top:10px; font-size:13px;}
.tabella-dati summary{cursor:pointer; color:var(--teal-2); font-weight:600; font-size:12.5px;}
.tabella-dati table{width:100%; border-collapse:collapse; margin-top:8px;}
.tabella-dati th, .tabella-dati td{padding:6px 4px; border-bottom:1px solid var(--line); text-align:left;}
.tabella-dati th{font-size:11.5px; color:var(--ink-soft); font-weight:600;}
.tabella-dati td:not(:first-child), .tabella-dati th:not(:first-child){text-align:right; font-variant-numeric:tabular-nums;}

.barra-zona{display:grid; grid-template-columns:minmax(0, 7.5em) 1fr auto; align-items:center; gap:10px; padding:7px 0; cursor:default;}
.barra-nome{font-size:12.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.barra-traccia{height:14px; border-radius:0 4px 4px 0; position:relative;}
.barra-valore{height:100%; background:var(--teal); border-radius:0 4px 4px 0; min-width:0;}
.barra-zona.attivo .barra-valore{background:var(--teal-2);}
.barra-num{font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums;}
.barra-num small{color:var(--ink-muted); font-weight:500;}

/* ---------- Diario ---------- */
.log-item{padding:11px 2px; border-bottom:1px solid var(--line); display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;}
.log-item:last-child{border-bottom:none;}
.log-icona{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--water-soft); color:var(--water);}
.log-icona.saltata{background:var(--mist-2); color:var(--ink-soft);}
.log-icona svg{width:17px; height:17px;}
.log-details{display:flex; flex-direction:column; gap:3px; min-width:0;}
.log-title{font-weight:700; font-size:13.5px;}
.log-subtitle{display:flex; flex-wrap:wrap; gap:4px;}
.log-time{color:var(--ink-soft); font-size:11.5px; text-align:right;}
.log-plants{font-size:11.5px; color:var(--ink-soft);}
.badge{font-size:10.5px; padding:3px 7px; border-radius:6px; font-weight:700; white-space:nowrap;}
.badge.auto{background:var(--teal-soft); color:var(--teal-2);}
.badge.manual{background:var(--amber-soft); color:var(--amber);}
.badge.esito{background:rgba(193,80,63,0.12); color:var(--danger);}
#lista-log{max-height:420px; overflow-y:auto;}
#lista-log .hint{text-align:center; padding:20px 10px; color:var(--ink-soft); font-size:13px;}

/* ---------- Controlli ---------- */
button{width:100%; padding:13px; border:none; border-radius:13px; font-size:14.5px; font-weight:700; cursor:pointer; transition:transform 0.15s var(--ease), opacity 0.2s var(--ease), background 0.2s var(--ease); font-family:'Instrument Sans',sans-serif;}
button:active{transform:scale(0.98);}
button:disabled{opacity:0.55; cursor:not-allowed; transform:none;}
button:focus-visible, .chip:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.btn-icon{display:inline-flex; align-items:center; justify-content:center; gap:8px;}
.btn-icon svg{width:16px; height:16px;}
.btn-primary{background:linear-gradient(155deg, #12746e, #0a5a56); color:#fff; box-shadow:0 6px 16px -6px rgba(18,116,110,0.55);}
.btn-secondary{background:var(--mist-2); color:var(--ink); border:1px solid var(--line-strong);}
/* link che sembra un bottone secondario (es. "Installa il firmware") */
a.btn-link-secondario{display:flex; width:100%; margin-top:8px; padding:13px; border-radius:13px; font-size:14.5px; font-weight:700; text-decoration:none; white-space:nowrap; box-sizing:border-box;}
.errore-connessione{margin:10px 0; padding:11px 13px; border-radius:12px; font-size:13.5px; font-weight:600; line-height:1.45;
  color:var(--danger); background:rgba(193,80,63,0.1); border:1px solid rgba(193,80,63,0.35);}
.btn-warning{background:var(--water); color:#fff; box-shadow:0 6px 16px -6px rgba(43,143,214,0.55);}
.btn-danger{background:transparent; color:var(--danger); border:1px solid rgba(193,80,63,0.35);}
.status-message{margin:10px 0 0; font-size:12.5px; font-weight:600; text-align:center; line-height:1.5;}
.status-message:empty{display:none;}
.btn-link-danger{
  width:auto; background:none; border:none; color:var(--danger); font-size:12.5px;
  font-weight:600; padding:12px 4px 2px; text-decoration:underline; text-underline-offset:2px; display:block; margin:0 auto;
}

.form-group{margin-bottom:14px;}
.form-group label{display:block; margin-bottom:6px; font-weight:600; font-size:12.5px; color:var(--ink-soft);}
.form-group label b{color:var(--ink); font-family:'Instrument Sans',sans-serif;}
.form-group input:not([type="range"]), .form-group select{
  width:100%; padding:11px 12px; border:1px solid var(--line-strong); border-radius:11px;
  font-family:'Instrument Sans',sans-serif; font-size:15px; background:var(--mist-2); color:var(--ink);
  appearance:none; -webkit-appearance:none;
}
.form-group input[type="range"]{width:100%; accent-color:var(--water); height:28px;}
.form-group.select-wrap{position:relative;}
.form-group.select-wrap::after{
  content:""; position:absolute; right:14px; top:36px; width:8px; height:8px;
  border-right:2px solid var(--ink-soft); border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg); pointer-events:none;
}
.form-group input:focus, .form-group select:focus{outline:2px solid var(--teal); outline-offset:1px;}
.two-cols{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.hint-small{margin:8px 2px 0; font-size:12px; color:var(--ink-soft); line-height:1.5;}
.hint-small:empty{display:none;}
.manual-card{transition:box-shadow .3s var(--ease);}
.manual-card.evidenzia{box-shadow:0 0 0 3px var(--water-soft), var(--shadow);}

.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;}
.info-box{
  background:var(--mist-2); border:1px solid var(--line);
  padding:11px 13px; border-radius:13px; display:flex; flex-direction:column; gap:3px; position:relative; cursor:pointer;
}
.info-box .label{font-size:11px; color:var(--ink-soft); font-weight:600;}
.edit-inline{
  font-family:'Instrument Sans',sans-serif; font-size:16px; font-weight:700;
  background:none; border:none; padding:0 14px 0 0; margin:0; width:100%;
  color:var(--ink); appearance:none; -webkit-appearance:none; cursor:pointer;
}
.info-box.editable::after{
  content:""; position:absolute; right:12px; bottom:15px; width:6px; height:6px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor; opacity:0.4;
  transform:rotate(45deg); pointer-events:none;
}
input.edit-inline{cursor:text;}
.edit-inline:focus{outline:none; text-decoration:underline; text-decoration-color:var(--teal);}
.watering-status{font-size:12.5px; color:var(--ink-soft); margin:0; line-height:1.45;}

.warn-banner{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--amber-soft); border:1px solid rgba(201,130,47,0.3);
  color:var(--amber); border-radius:12px; padding:11px 13px; font-size:12.5px; line-height:1.5; font-weight:600;
  margin:14px 0 0;
}
.warn-banner svg{width:16px; height:16px; flex:none; margin-top:1px;}
.ok-banner{background:rgba(47,158,110,0.1); border-color:rgba(47,158,110,0.35); color:var(--success);}
#messaggio-globale{margin:0 0 14px;}

@media (min-width: 520px){
  .zone-grid{grid-template-columns:1fr;}
  .piante-grid{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .stat-row{grid-template-columns:repeat(4, minmax(0, 1fr));}
}
@media (max-width: 360px){
  .meteo-giorni{grid-template-columns:repeat(2, 1fr);}
  .hero{grid-template-columns:1fr;}
}

/* ---------- Aggiornamento centralina ---------- */
.versioni{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px;}
.versioni div{background:var(--mist-2); border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; gap:2px;}
.versioni span{font-size:11px; color:var(--ink-soft); font-weight:600;}
.versioni b{font-family:'Instrument Sans',sans-serif; font-size:18px;}
#btn-installa-agg{margin-top:8px;}
.progress{height:8px; border-radius:8px; background:var(--mist-2); overflow:hidden; margin-top:12px;}
.progress div{height:100%; width:0; background:var(--teal); transition:width .2s var(--ease);}
.more-small{margin-top:12px; font-size:12.5px; color:var(--ink-soft);}
.more-small summary{cursor:pointer; font-weight:600; color:var(--teal-2);}
.more-small input{margin-top:8px; font-size:12.5px;}

/* ---------- Terreno (sensori) ---------- */
.terreno-grid{display:grid; gap:10px;}
.terreno-card{padding:14px 16px; margin:0;}
.terreno-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.terreno-top strong{font-size:14.5px;}
.terreno-num{font-family:'Instrument Sans',sans-serif; font-weight:700; font-size:26px; font-variant-numeric:tabular-nums;}
.terreno-num small{font-size:14px; font-weight:600; color:var(--ink-soft);}
/* barra 0-100%: fascia ideale colorata e segno della lettura attuale */
.terreno-barra{position:relative; height:10px; border-radius:6px; background:var(--line-strong); margin:10px 0 8px; overflow:visible;}
.terreno-ideale{position:absolute; top:0; bottom:0; border-radius:6px; background:var(--teal-soft); border:1px solid var(--teal);}
.terreno-segno{position:absolute; top:-4px; width:4px; height:18px; margin-left:-2px; border-radius:2px; background:var(--ink);}
.terreno-riga{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:12.5px; color:var(--ink-soft);}
.stato-terreno{font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap; background:var(--mist-2); color:var(--ink-soft);}
.stato-terreno.secco{background:rgba(193,80,63,0.14); color:var(--danger);}
.stato-terreno.in-asciugatura{background:var(--amber-soft); color:var(--amber);}
.stato-terreno.idratato{background:rgba(47,158,110,0.14); color:var(--success);}
.stato-terreno.molto-bagnato{background:var(--water-soft); color:var(--water);}
.terreno-grafico{display:block; width:100%; height:38px; margin-top:8px;}
.terreno-grafico polyline{fill:none; stroke:var(--teal); stroke-width:2; vector-effect:non-scaling-stroke;}
.terreno-grafico rect{fill:var(--teal-soft);}
.terreno-vuoto{padding:14px 16px; margin:0; font-size:13px; color:var(--ink-soft); line-height:1.5;}
.umid-chip{font-weight:700; color:var(--teal-2);}
.aria-riga{margin:10px 4px 0;}

/* impostazioni del sensore nella scheda Programma */
.zona-sensore{margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-soft);}
.zona-sensore > .etichetta{display:block; font-weight:700; color:var(--ink); margin-bottom:8px; font-size:13px;}
.scelta-modo{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
.scelta-modo label{display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 8px; border:1px solid var(--line-strong); border-radius:11px; cursor:pointer; text-align:center; font-weight:600; color:var(--ink-soft);}
.scelta-modo input{position:absolute; opacity:0; pointer-events:none;}
.scelta-modo label:has(input:checked){border-color:var(--teal); background:var(--teal-soft); color:var(--teal-2);}
.solo-sensore{margin-top:10px; display:grid; gap:10px;}
.solo-sensore[hidden]{display:none;}
.riga-campi{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;}
.riga-campi label{display:flex; align-items:center; gap:6px;}
.riga-campi input{padding:7px 8px; border:1px solid var(--line-strong); border-radius:8px; background:var(--mist-2); color:var(--ink); font-size:14px; font-family:'Instrument Sans',sans-serif;}
.riga-campi input[type="number"]{width:64px;}
.soglie-zona{line-height:1.5;}
.soglie-zona b{color:var(--ink);}
.avviso-soglie, .card > p.avviso-soglie{color:var(--amber); font-weight:600;}
.terreno-card > p.hint-small{margin:8px 0 0; font-size:12.5px; line-height:1.45;}
details.calibra{border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:var(--mist);}
details.calibra summary{cursor:pointer; font-weight:700; color:var(--ink);}
details.calibra ol{margin:10px 0 0; padding-left:20px; line-height:1.55;}
details.calibra li{margin-bottom:8px;}
details.calibra .btn-secondary{margin-top:6px; padding:10px;}

/* ---------- Cloud ---------- */
.link-neutro{color:var(--ink-soft);}
.cloud-riga{display:flex; align-items:center; gap:8px; font-size:13.5px; margin:0 0 10px; line-height:1.45;}
.cloud-riga .dot{flex:none;}
.cloud-azioni{display:grid; gap:8px;}
.account-box{margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:12px; font-size:13px; color:var(--ink-soft);}
.account-box b{color:var(--ink);}
.account-box button{margin-top:8px;}

/* ---------- Dettagli di interazione (guida di stile) ----------
   Ogni azione ha un contenitore visibile e icone SVG, mai emoji. */
.btn-secondary{
  background:color-mix(in srgb, var(--teal) 14%, var(--mist-2));
  border:1.5px solid color-mix(in srgb, var(--teal) 55%, transparent);
  color:var(--ink);
}
.btn-secondary:active{background:color-mix(in srgb, var(--teal) 24%, var(--mist-2));}
.btn-danger{
  background:color-mix(in srgb, var(--danger) 10%, transparent);
  border:1.5px solid color-mix(in srgb, var(--danger) 55%, transparent);
}
.more-small summary, .tabella-dati summary{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
  background:var(--teal-soft); color:var(--teal-2); font-weight:700; cursor:pointer;
  user-select:none; -webkit-user-select:none;
}
.status-message .ic, [id^="calibra-esito-"] .ic{width:15px; height:15px; vertical-align:-0.2em; margin-right:6px;}

/* Interruttore al posto della casella, come "Irrigazione automatica" */
input.toggle{
  -webkit-appearance:none; appearance:none; margin:0; flex:none; cursor:pointer; position:relative;
  width:50px; height:28px; border-radius:28px; background:var(--line-strong);
  transition:background 0.2s var(--ease);
}
input.toggle::before{
  content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.25); transition:transform 0.2s var(--ease);
}
input.toggle:checked{background:var(--teal);}
input.toggle:checked::before{transform:translateX(22px);}
input.toggle:focus-visible{outline:2px solid var(--teal); outline-offset:2px;}
.zona-opzioni .riga-toggle{display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;}
.zona-opzioni input.toggle{width:50px; height:28px;}

/* ---------- Stile A «Erbario raffinato» ----------
   Lo stesso stile di Erbario: fondo avorio, verde bosco, titoli Fraunces,
   testo Instrument Sans. Il blu resta per l'acqua (valvola aperta). */
body{font-size:16px;}
a{color:var(--teal);}

/* Intestazione chiara come in Erbario: titolo grande, pulsanti tondi a filo */
header{
  background:color-mix(in srgb, var(--mist) 94%, transparent);
  color:var(--ink); box-shadow:none; border-bottom:1px solid var(--line);
}
.brand-mark{background:var(--teal); color:var(--card); border-radius:10px;}
.brand-text h1{font-size:24px; font-weight:600; letter-spacing:-0.02em;}
.brand-text > span{color:var(--ink-soft); opacity:1;}
#btn-torna{background:transparent; border:1px solid var(--line-strong); color:var(--ink);}
#theme-toggle{width:44px; height:44px; background:transparent; border:1px solid var(--line-strong); color:var(--ink);}
.dot.green{background:var(--success); box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent);}
.dot.red{background:var(--danger); box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 25%, transparent);}
.dot.grey{background:var(--ink-muted);}
header :where(button, a[href]):focus-visible{outline-color:var(--teal);}

/* Cruscotto: il verde bosco del cruscotto di Erbario (il blu resta per l'acqua) */
.hero:not(.hero-attivo):not(.hero-pausa):not(.hero-avviso){
  background:linear-gradient(155deg, #2f5f3e 0%, #1c3a27 55%, #132a1b 100%);
  box-shadow:0 14px 32px -16px rgba(19,42,27,0.6);
}

/* Schede e campi: carta chiara con un filo */
.card{background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow);}
.btn-primary{background:var(--teal); color:var(--on-fill); box-shadow:none;}
.sezione-titolo{letter-spacing:0.08em; color:var(--teal);}

/* ---------- Rifiniture di accessibilità (controllo con ui-ux-pro-max) ----------
   Lo stile non cambia: stessi colori di riempimento, caratteri e forme.
   Si alzano solo i minimi: testo a 4.5:1 sul suo sfondo, zone da toccare di
   44 px, niente testo sotto i 12 px (barra in basso a 11), focus visibile,
   meno movimento per chi lo chiede al sistema. */
:root{
  --ink-muted:#5d6959;
  /* Colori usati come TESTO: un tono più scuro del riempimento. */
  --water-ink:#1a68a3; --amber-ink:#8a5510; --danger-ink:#a3402c; --success-ink:#1c6d4a;
  /* Riempimento blu con testo bianco sopra. */
  --water-fill:#1f74b3; --on-fill:#fff;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink-muted:#98a58d;
    --water-ink:var(--water); --amber-ink:var(--amber); --danger-ink:var(--danger); --success-ink:var(--success);
    --water-fill:var(--water); --on-fill:#06201f;
  }
}
:root[data-theme="dark"]{
  --ink-muted:#98a58d;
  --water-ink:var(--water); --amber-ink:var(--amber); --danger-ink:var(--danger); --success-ink:var(--success);
  --water-fill:var(--water); --on-fill:#06201f;
}

/* Contrasto */
.pill.coda, .stato-terreno.molto-bagnato{color:var(--water-ink);}
.pill.sete, .badge.manual, .stato-terreno.in-asciugatura, .pianta-card.sete .pianta-riga,
.gauge.sete .gauge-centro b, .avviso-soglie, .card > p.avviso-soglie{color:var(--amber-ink);}
.badge.esito, .stato-terreno.secco, .btn-danger{color:var(--danger-ink);}
.stato-terreno.idratato{color:var(--success-ink);}
.pill.aperta, .zona-tile.aperta .zona-num, .btn-warning{background:var(--water-fill); color:var(--on-fill);}
.chip.active{color:var(--on-fill);}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .btn-warning{box-shadow:none;} }
:root[data-theme="dark"] .btn-warning{box-shadow:none;}

/* Testo: niente sotto i 12 px */
.brand-text > span, .hero-kicker, .pill, .meteo-giorno span, .meteo-giorno small, .stat-note,
.tabella-dati th, .log-time, .log-plants, .badge, .info-box .label, .versioni span, .stato-terreno{font-size:12px;}
.chart .asse{font-size:12px;}
.chart .etichetta{font-size:12px;}

/* Zone da toccare di 44 px */
.btn-primary, .btn-secondary, .btn-warning, .btn-danger, .btn-stop{min-height:44px;}
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.form-group select, .card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.card select{min-height:44px;}
.form-group input[type="range"], input[type="range"]{height:44px;}
.barra-num small{font-size:12px;}
.gauge-centro span{font-size:12px;}
.chip span{opacity:1;}
.warn-banner{color:var(--amber-ink);}
.riga-toggle{min-height:44px;}
/* La fila dei filtri scorre e taglia ciò che sborda: spazio per l'area da toccare. */
.filtri{padding-top:6px; margin-top:-4px;}
.more-small summary, .tabella-dati summary, details.calibra summary{min-height:44px; display:flex; align-items:center; gap:6px;}
.chip, #btn-torna, #theme-toggle, input.toggle{position:relative;}
.chip::after, #btn-torna::after, #theme-toggle::after, input.toggle::after{
  content:""; position:absolute; left:50%; top:50%;
  width:max(100%, 44px); height:max(100%, 44px);
  transform:translate(-50%, -50%);
}

/* Focus da tastiera: un anello uguale ovunque */
:where(button, a[href], summary, select, input, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--teal); outline-offset:2px;
}
header :where(button, a[href]):focus-visible{outline-color:#fff;}

/* Chi chiede meno movimento al sistema lo ottiene ovunque */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important; animation-iteration-count:1 !important;
    transition-duration:0.01ms !important; scroll-behavior:auto !important;
  }
}

/* Cruscotto: il verde e il blu partono un tono più scuro, così il testo
   bianco resta leggibile (4.5:1) anche nell'angolo più chiaro. */
.hero:not(.hero-attivo):not(.hero-pausa):not(.hero-avviso){background:linear-gradient(150deg, #15807a 0%, #0b5f5a 100%);}
.hero-attivo{background:linear-gradient(150deg, #1d76b8 0%, #115e9c 100%);}
.hero-kicker{opacity:1;}