:root{--giallo:#A87B00;--bg:#EEF0EC;--pannello:#F8F9F6;--warm2:#F2A65A;--card:#fff;--ink:#1F2A2C;--mute:#5F6A6C;--line:#DDE1DC;--warm:#D9622B;--green:#2F7D5B;--amber:#9A6209;--err:#B3261E}
@media (prefers-color-scheme:dark){:root{--giallo:#E6C04D;--bg:#141A1B;--pannello:#192021;--warm2:#C98A4A;--card:#1F2728;--ink:#EDF0EE;--mute:#A3ADAE;--line:#323C3D;--warm:#F08A55;--green:#6CC59A;--amber:#E0AE5A;--err:#FF9A90}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
main{max-width:520px;margin:0 auto;padding:16px}
h1{font-size:26px;margin:4px 0}h2{font-size:17px;margin:0 0 8px}
.menu{display:flex;gap:4px;padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line);overflow-x:auto}
.menu a{color:var(--ink);text-decoration:none;font-weight:600;font-size:14px;padding:8px 10px;border-radius:9px;white-space:nowrap}
.sub{color:var(--mute);font-size:13.5px;margin:0 0 12px}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin:0 0 10px}
.card.vecchia{opacity:.72}
.h{display:flex;justify-content:space-between;align-items:center;gap:8px}
.t{font-size:32px;font-weight:700;margin:3px 0 1px;letter-spacing:-.02em}.t small{font-size:14px;font-weight:500;color:var(--mute);letter-spacing:0;margin-left:7px}
.m{display:flex;justify-content:space-between;gap:10px;color:var(--mute);font-size:13px}
.pill{font-size:12px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--line);color:var(--mute);white-space:nowrap}.pill.su{background:var(--warm);color:#fff}
.bat{color:var(--amber);font-weight:600;white-space:nowrap}.bat.ok{color:var(--green)}
.errore{color:var(--err);border:1px solid var(--err);border-radius:10px;padding:10px 12px;margin:0 0 10px}
.avviso{background:var(--card);border-left:4px solid var(--amber);border-radius:8px;padding:9px 12px;margin:0 0 10px;font-size:14px}
.bene{color:var(--green);margin:0 0 10px}
label{display:block;font-size:14px;font-weight:600;margin-bottom:10px}
input,select{display:block;width:100%;font:inherit;margin-top:4px;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.btn{font:inherit;font-weight:600;width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);cursor:pointer}
.btn.p{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btns{display:flex;gap:8px}.btns form{flex:1}
.link{text-align:center;font-size:14px}.link a{color:var(--ink)}
.det{font-size:13px;margin:2px 0;color:var(--mute);overflow-wrap:anywhere}
.tutta{margin-bottom:12px}
.comandi{display:grid;grid-template-columns:48px 48px 1fr 1fr;gap:6px;margin-top:10px}
.tondo{font-size:20px;padding:8px 0}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chip{font-size:13px;border:1px solid var(--line);border-radius:99px;padding:6px 12px;background:var(--card);color:var(--ink);text-decoration:none}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.giorno{display:grid;grid-template-columns:34px 1fr;align-items:center;font-size:13px;font-weight:600;margin-bottom:8px}
.barra{position:relative;height:30px;background:var(--line);border-radius:7px;overflow:hidden}
.fascia{position:absolute;top:0;bottom:0;background:var(--warm);color:#fff;font-style:normal;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;overflow:hidden}
.asse{display:flex;justify-content:space-between;margin-left:34px;color:var(--mute);font-size:11px}
.riga-fascia{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px;padding:4px 2px}
.mini{width:auto;font-size:13px;padding:6px 12px}
.giorni{display:flex;flex-wrap:wrap;gap:4px 10px;margin-bottom:10px}
.spunta{display:flex;align-items:center;gap:5px;font-weight:500;margin:0}.spunta input{width:auto;margin:0}
.tre{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.regola{font-size:14px;margin:6px 0 10px}
.interruttore{width:42px;height:24px;border-radius:99px;border:0;background:var(--line);position:relative;cursor:pointer;padding:0}
.interruttore:after{content:"";position:absolute;width:20px;height:20px;left:2px;top:2px;background:#fff;border-radius:50%}
.interruttore.on{background:var(--green)}.interruttore.on:after{left:20px}
h3{font-size:14px;margin:8px 0 4px}

/* Pagina unica come il disegno approvato: tre colonne larghe, una sola sul telefono */
main.largo{max-width:1320px}
.ph{background:var(--pannello);border:1px solid var(--line);border-radius:26px;padding:20px 16px;margin-bottom:16px;min-width:0}
.top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.top span{color:var(--mute);font-size:13px}
.top h1{margin:0}
.colonne{display:block}
@media (min-width:1100px){.colonne{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}.solo-stretto{display:none}}
.ph .card{margin-bottom:10px}
.m{align-items:baseline}
details>summary{cursor:pointer;list-style:none}details>summary::-webkit-details-marker{display:none}
.regola-valvola{margin-top:6px}.regola-valvola>summary{font-size:12.5px;color:var(--mute)}.regola-valvola>summary:before{content:"▸ "}.regola-valvola[open]>summary:before{content:"▾ "}
.avvisi{margin:8px 0}.avvisi>summary{font-size:13.5px;font-weight:600;padding:8px 2px;color:var(--amber)}
.piede{margin:10px 0 0}
.fascia{cursor:grab;user-select:none;touch-action:none}.fascia.bassa{background:var(--warm2);color:#4b2c0e}
.legenda{display:flex;gap:12px;font-size:12px;color:var(--mute);margin:12px 0}.legenda u{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;text-decoration:none;vertical-align:-1px}
.c-alta{background:var(--warm)}.c-bassa{background:var(--warm2)}.c-off{background:var(--line)}
.scelta{margin-top:6px;color:var(--ink);font-size:15px}
.griglia{margin-bottom:14px}.chi-griglia{font-size:13px;font-weight:600;margin:0 0 6px}.chi-griglia small{font-weight:500;color:var(--mute);margin-left:6px}
.fascia.attiva{outline:2px solid var(--ink);outline-offset:-2px}
#sel-modifica{margin-top:8px}.sel-bottoni{display:flex;gap:8px}
.piede-azione{margin-top:12px}.piede-azione>summary{display:block;text-align:center;box-sizing:border-box}.piede-azione[open]>summary{margin-bottom:10px}
.regola em{font-style:normal;font-weight:700;color:var(--warm)}
.togli{text-align:right}.link-btn{background:none;border:0;color:var(--mute);font:inherit;font-size:12.5px;cursor:pointer;padding:0;text-decoration:underline}
.settimana{margin-bottom:4px}

/* Schede più compatte, comandi sempre visibili */
.ph .card{padding:10px 12px;margin-bottom:8px}
.t{font-size:27px;margin:1px 0 0}.t small{font-size:13px}
.m{font-size:12.5px}
.gradi{display:grid;grid-template-columns:36px minmax(44px,1fr) 36px auto;gap:5px;margin-top:8px;align-items:stretch}
.gradi input{margin:0;padding:5px 4px;text-align:center;font-weight:700;border-radius:9px}
.gradi .btn,.onoff .btn{padding:6px 8px;font-size:13.5px;border-radius:9px}
.gradi .tondo{font-size:18px;padding:3px 0}.gradi .imposta{width:auto}
.onoff{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:5px}
.bat{display:inline-flex;align-items:center;gap:5px}
.pila{flex:none}
.liv-verde{color:var(--green)}.liv-gialla{color:var(--giallo)}.liv-rossa{color:var(--err)}

.stato{font-size:13px;font-weight:600;margin:6px 0 0;padding:5px 9px;border-radius:8px;background:var(--bg);color:var(--green)}
.stato.attesa{color:var(--amber)}
.flag{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0 12px}.flag.attivo{border-color:var(--green)}.flag .det{margin:2px 0 0}.flag form{flex:none}
.tasto-link{display:block;text-align:center;box-sizing:border-box;text-decoration:none;margin-top:8px}
.riga-scelta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 6px}
.scorciatoia{font:inherit;font-size:12px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--ink);padding:2px 9px;cursor:pointer}
.elenco-valvole{display:grid;gap:6px;margin-bottom:12px}.elenco-valvole small{color:var(--mute)}
.crea .tre{margin-bottom:10px}