/* ===== Temi e sfondi ===== */
:root{
  /* tema chiaro «crema»: carta calda come Paritoo, con il verde e l'arancio di JustDomu */
  --fondo:#F7F5EF; --fondo-img:none;
  --superficie:#FFFEF9; --inchiostro:#1A1F18; --testo:#3B4238; --tenue:#575D54;
  --linea:#DFDDD5; --chip:#EDEAE1; --accento:#2E6B5C; --su-accento:#FFFFFF;
  --arancio:#9A4614; --arancio-chiaro:#F6E3D6; --arancio-testo:#4A3326;
  --scuro:#1A1F18; --su-scuro:#FFFEF9; --scuro-tenue:#B9C0B4; --scuro-linea:#575D54;
  --raggio:20px;
  --font-titoli:'Outfit',system-ui,sans-serif;
  --font-testo:'Cifre','Atkinson Hyperlegible',system-ui,sans-serif;
  color-scheme:light;
}
/* RAL 9010 «bianco puro»: il bianco caldo delle pareti (#F2EFE7, valore indicativo per lo schermo) */
body[data-sfondo="ral9010"]{--fondo:#F2EFE7;--superficie:#FBFAF6;--chip:#E7E3D8;--linea:#DDD8CB}
body[data-sfondo="salvia"]{--fondo:#DCE5DE;--chip:#CFDAD2;--linea:#C3CFC6}
body[data-sfondo="sabbia"]{--fondo:#EFE7DA;--chip:#E5DACA;--linea:#DDD1BF;--superficie:#FBF8F2}
body[data-sfondo="trama"]{--fondo-img:radial-gradient(#CFCBBE 1.2px,transparent 1.6px);}
body[data-sfondo="alba"]{--fondo-img:linear-gradient(160deg,#F4E4D2 0%,#E8ECE6 55%,#D9E4E0 100%)}
/* scuro come il cielo di Roadjust: blu notte, non verde-nero; il verde resta solo negli accenti */
body[data-sfondo="lavagna"],body[data-sfondo="notte"],body[data-sfondo="crepuscolo"],body[data-sfondo="cielo"],body[data-sfondo="foto"],body[data-sfondo="scena"]{
  --fondo:#1A2638; --superficie:#22314A; --inchiostro:#EEF4FB; --testo:#CFDBE8; --tenue:#9FB1C4;
  --linea:#2F4058; --chip:#2A3A52; --accento:#62B8A2; --su-accento:#08131F;
  --arancio:#E08A4F; --arancio-chiaro:#3B2C22; --arancio-testo:#F1D3BF;
  --scuro:#EEF4FB; --su-scuro:#0F1B2A; --scuro-tenue:#4A5D75; --scuro-linea:#9FB1C4;
  color-scheme:dark;
}
body[data-sfondo="notte"]{--fondo:#0C1828;--superficie:#16243A;--linea:#26364D;--chip:#1E2E45;
  --fondo-img:linear-gradient(180deg,#123052 0%,#0C1A2C 55%,#081322 100%)}
/* Crepuscolo, come l'avvio dell'app Hue: dal quasi nero in alto al viola, al rosa e alla pesca in basso */
body[data-sfondo="crepuscolo"]{--fondo:#151019;--superficie:rgba(36,24,46,.62);--chip:rgba(255,255,255,.09);--linea:rgba(255,255,255,.12);--accento:#F0A3C4;--su-accento:#2A1028;
  --fondo-img:linear-gradient(180deg,#121014 0%,#1C1424 26%,#3E1D48 48%,#8C4483 68%,#D97CA3 84%,#F6C6A8 100%)}
body[data-sfondo="crepuscolo"] .atmosfera i:nth-child(1){background:#7C3FD6;opacity:.32}
body[data-sfondo="crepuscolo"] .atmosfera i:nth-child(2){background:#FF8FB1;opacity:.28}
body[data-sfondo="crepuscolo"] .atmosfera i:nth-child(3){background:#FFC59E;opacity:.26}
body[data-sfondo="foto"]{
  --fondo:#111;
  --fondo-img:linear-gradient(rgba(10,14,13,.45),rgba(10,14,13,.6)),var(--foto);
  --superficie:rgba(24,32,29,.88);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background-color:var(--fondo);
  background-image:var(--fondo-img);
  background-size:cover;background-position:center;background-attachment:fixed;
  color:var(--inchiostro);font-family:var(--font-testo);font-size:17px;line-height:1.4;
  -webkit-font-smoothing:antialiased;
}
body[data-sfondo="trama"]{background-size:22px 22px;background-attachment:scroll}
/* come un'app: niente selezione del testo con la pressione lunga (i campi di testo restano selezionabili) */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}
/* niente attesa del doppio tocco (zoom): pulsanti e link rispondono subito */
button,a,label,summary,[role="button"]{touch-action:manipulation}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
svg.pieno{fill:currentColor;stroke:none}
h1,h2,h3,p{margin:0}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
.nascosto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--accento);outline-offset:2px}

/* ===== Struttura ===== */
.schermo{min-height:calc(100dvh - var(--alto-testata));padding:28px 36px 24px;display:flex;flex-direction:column;gap:20px}
.schermo[hidden]{display:none}
.card{background:var(--superficie);border:0;border-radius:var(--raggio);padding:18px 20px;display:flex;flex-direction:column;gap:12px}
.card.scura{background:var(--scuro);color:var(--su-scuro);border:0}
.tenue{color:var(--tenue)}
.tenue-chiaro{color:var(--scuro-tenue)}
.forte{font-weight:700}
.titoletto{font:500 19px var(--font-titoli);color:var(--tenue)}
.card h2{font:600 20px var(--font-titoli)}
.nota-demo{font-size:14.5px;color:var(--tenue);letter-spacing:.3px;text-transform:uppercase;opacity:.85}
.nota-chiara{font-size:16px;color:var(--scuro-tenue)}

.tondo{width:48px;height:48px;border-radius:50%;border:1px solid var(--linea);background:var(--superficie);display:inline-flex;align-items:center;justify-content:center}
.pillola{height:46px;padding:0 16px;border-radius:23px;border:0;background:var(--chip);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:15px}
.pillola[aria-pressed="true"]{background:var(--accento);color:var(--su-accento)}
.tasto{height:52px;padding:0 22px;border-radius:15px;border:0;font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.tasto.accento{background:var(--accento);color:var(--su-accento)}
.tasto.arancio{background:var(--arancio);color:#fff}
.tasto.contorno{background:transparent;border:1px solid var(--linea)}
.tasto.chiaro{background:var(--su-scuro);color:var(--scuro)}
.tasto.contorno-chiaro{background:transparent;border:1px solid var(--scuro-linea);color:var(--su-scuro)}
.riga-tasti{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.riga-spazio{display:flex;justify-content:space-between;align-items:baseline;gap:12px}

/* ===== Casa ===== */
.casa-griglia{flex:1;display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,1.2fr) minmax(270px,.9fr);gap:28px;min-height:0}
.col-sinistra,.col-centro,.col-destra{display:flex;flex-direction:column;gap:14px;min-width:0}
.riga-data{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.azioni-testa{display:flex;gap:8px}
.data{display:flex;flex-direction:column;gap:2px;padding-bottom:.55em;font:500 20px/1.15 var(--font-titoli);color:var(--tenue)}
.data-giorno{text-transform:capitalize;color:var(--inchiostro);font-weight:600}
.data-mese{text-transform:lowercase}
.orologio{font:300 104px/.9 var(--font-titoli);letter-spacing:-4px;font-variant-numeric:tabular-nums;text-align:right}
.frase{font:400 30px/1.2 var(--font-titoli);white-space:pre-line}

.meteo{margin-top:auto}
.meteo-ora{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.meteo-valori{flex:1}
.meteo-temp{font:300 42px/1 var(--font-titoli)}
.meteo-avviso{flex-basis:100%;font-weight:700;font-size:15px;line-height:1.3;color:var(--m-pioggia)}
.meteo-avviso:empty{display:none}
/* Meteo a colori, come in Roadjust: ogni tempo ha la sua tinta, l'icona sta in un riquadrino velato dello stesso colore */
:root{--m-sole:#C98A0B;--m-variabile:#C9760A;--m-luna:#5B6FD6;--m-nuvole:#6B7F93;--m-nebbia:#7D8A99;--m-pioggia:#0B7FB5;--m-neve:#3A9FD0;--m-temporale:#7A4FD0}
body[data-sfondo="lavagna"],body[data-sfondo="notte"],body[data-sfondo="cielo"],body[data-sfondo="foto"],body[data-sfondo="scena"]{--m-sole:#F5C542;--m-variabile:#FFB84D;--m-luna:#8FA3FF;--m-nuvole:#9FB1C4;--m-nebbia:#9FB1C4;--m-pioggia:#5AD1FF;--m-neve:#A8E6FF;--m-temporale:#B58BFF}
.m-sole{--c:var(--m-sole)} .m-variabile{--c:var(--m-variabile)} .m-luna{--c:var(--m-luna)} .m-nuvole{--c:var(--m-nuvole)}
.m-nebbia{--c:var(--m-nebbia)} .m-pioggia{--c:var(--m-pioggia)} .m-neve{--c:var(--m-neve)} .m-temporale{--c:var(--m-temporale)}
.icona-meteo{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:var(--c,var(--tenue));background:color-mix(in srgb,var(--c,var(--tenue)) 16%,transparent)}
.icona-meteo svg{width:26px;height:26px;color:inherit}
.icona-meteo.grande{width:68px;height:68px;border-radius:20px;flex:none}
.icona-meteo.grande svg{width:44px;height:44px;stroke-width:1.5}
/* il sole e la luna un po' pieni: si riconoscono a colpo d'occhio */
.m-sole svg circle,.m-luna svg path,.m-variabile svg circle{fill:color-mix(in srgb,var(--c) 30%,transparent)}
.meteo-ore{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;text-align:center;font-size:16px;color:var(--tenue)}
.meteo-ore div{display:flex;flex-direction:column;align-items:center;gap:4px}
.meteo-ore b{color:var(--inchiostro)}
.meteo-luogo{font-size:15px}

.suggerimenti{display:flex;flex-direction:column;gap:12px}
.suggerimento{background:var(--superficie);border:1px solid var(--linea);border-radius:18px;padding:16px 18px;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;row-gap:10px;align-items:start}
/* urgente: lo dicono l'icona e il pulsante, non tutto il riquadro */
.suggerimento svg{width:30px;height:30px;color:var(--accento)}
.suggerimento.urgente svg{color:var(--arancio)}
.suggerimento div{flex:1;min-width:0}
.suggerimento h3{font:600 19px/1.25 var(--font-titoli)}
.suggerimento p{font-size:15px;color:var(--testo);margin-top:3px}
.suggerimento > :last-child{grid-column:2;justify-self:start}
.suggerimento .tasto{height:38px;padding:0 16px;font-size:16px;border-radius:12px}
.suggerimento.fatto{opacity:.55}

.notizie{flex:1;min-height:0}
.notizie-testa{display:flex;justify-content:space-between;align-items:center;gap:12px}
.notizie-testa .pillola{background:transparent;border:1px solid var(--linea);font-weight:700}
.notizie-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;overflow:auto}
.notizie-lista li{padding:10px 0;border-bottom:1px solid var(--chip)}
.notizie-lista li:last-child{border-bottom:0}
.notizie-lista a{text-decoration:none;font-weight:700;font-size:16px;line-height:1.3;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notizie-lista li:nth-child(n+5){display:none}
.notizie-lista a:hover{text-decoration:underline}
.notizie-lista small{display:block;font-size:15px;color:var(--tenue);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}

.in-casa{gap:8px;padding:14px 18px}
.in-casa-testa{display:flex;justify-content:space-between;align-items:baseline}
.in-casa-testa h2{font-size:18px}
.stanze{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;font-size:15px}
.stanze div{display:flex;justify-content:space-between}
.stanze span{color:var(--testo)}
.stanze b{font-variant-numeric:tabular-nums}
.persone{display:flex;gap:14px;flex-wrap:wrap}
.in-casa .persone{padding-top:10px;margin-top:2px;border-top:1px solid var(--linea)}
.in-casa .persone:empty{display:none}
.persona{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:15px;color:var(--tenue)}
.persona span{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--chip);color:var(--inchiostro)}
.persona.tu span{background:var(--accento);color:var(--su-accento)}
.persona.fuori span{background:transparent;border:1.5px dashed var(--tenue)}

.mini-lettore{background:var(--superficie);color:var(--inchiostro);border:1px solid var(--linea);border-radius:18px;padding:12px 14px;text-decoration:none;display:flex;align-items:center;gap:12px}
.mini-copertina{width:46px;height:46px;border-radius:12px;background:var(--accento);color:var(--su-accento);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.mini-copertina img{width:100%;height:100%;object-fit:cover;background:#fff}
.mini-testo{flex:1;min-width:0}
.mini-sopra{display:block;font-size:15px;color:var(--tenue)}
.mini-titolo{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-stato svg{width:26px;height:26px}

.tasto-esco{margin-top:auto;min-height:64px;border-radius:18px;background:transparent;border:1.5px solid var(--accento);color:var(--accento);text-decoration:none;display:flex;align-items:center;gap:16px;padding:0 22px}
.tasto-esco svg{width:26px;height:26px}
.tasto-esco .grande,.tasto-uscita .grande{display:block;font:500 20px var(--font-titoli)}
.tasto-esco .piccolo,.tasto-uscita .piccolo{display:block;font-size:16px;opacity:.85}

.barra-chiedi{display:flex;align-items:center;gap:12px;background:var(--superficie);border:1px solid var(--linea);border-radius:36px;padding:8px 10px 8px 8px;min-height:72px}
.microfono{width:56px;height:56px;border-radius:50%;border:0;background:var(--accento);color:var(--su-accento);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.microfono.ascolta{animation:pulsa 1.2s ease-in-out infinite}
@keyframes pulsa{50%{box-shadow:0 0 0 10px color-mix(in srgb,var(--accento) 25%,transparent)}}
.barra-chiedi input{flex:1;min-width:180px;height:52px;border:0;background:transparent;font-size:19px;outline:none}
.scorciatoie{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}

/* ===== Schermate interne ===== */
.testa-schermo{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.torna{height:48px;padding:0 18px 0 12px;border-radius:24px;background:var(--superficie);border:1px solid var(--linea);text-decoration:none;display:inline-flex;align-items:center;gap:8px;align-self:flex-start}
.titolo-grande{font:400 42px/1.12 var(--font-titoli)}
.titolo-medio{font:400 32px var(--font-titoli)}
.grande-testo{font-size:18px}
.due-colonne{flex:1;display:flex;gap:32px;flex-wrap:wrap}
.colonna{flex:1 1 440px;display:flex;flex-direction:column;gap:18px;min-width:0}
.colonna.fondo{justify-content:flex-end;flex:0 1 400px}
.etichetta{font:500 18px var(--font-titoli)}
.valore-grande{font:300 40px/1 var(--font-titoli)}
.valore-grande .tenue{font-size:20px}

.barra-potenza{position:relative;height:56px;display:flex;border-radius:14px;overflow:hidden;background:var(--chip)}
.seg.s1,.q.s1{background:#1A2420}
.seg.s2,.q.s2{background:#3D5A50}
.seg.s3,.q.s3{background:#7E918A}
.seg.forno,.q.forno{background:repeating-linear-gradient(135deg,#F6E3D6 0 10px,#E9C4A9 10px 20px);border-left:2px solid #9A4614}
.seg.forno.acceso{background:#C9763A}
.limite{position:absolute;top:0;bottom:0;width:3px;background:#9A4614}
.legenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px;color:var(--testo)}
.legenda.verticale{flex-direction:column}
.legenda li{display:flex;align-items:center;gap:8px}
.legenda .q{width:14px;height:14px;border-radius:4px}
.legenda .avviso{color:var(--arancio);font-weight:700}
.legenda .lim{width:3px;height:16px;background:#9A4614}
.q.sole{background:#E9B88F}.q.f3{background:var(--accento)}.q.f2{background:#8FB3A6}.q.f1{background:var(--linea)}
.proposta{font:400 26px/1.25 var(--font-titoli)}
.grafico-sole{display:flex;align-items:flex-end;gap:4px;height:150px;border-bottom:1px solid var(--linea);margin-top:8px}
.grafico-sole span{flex:1;border-radius:4px 4px 0 0;background:#E9B88F}
.grafico-sole span.vuoto{background:var(--chip)}
.grafico-sole span.migliore{background:#C9763A}
.grafico-fasce{display:flex;gap:4px;height:14px}
.grafico-fasce span{flex:1;border-radius:3px}
.assi{display:flex;justify-content:space-between;font-size:16px;color:var(--tenue)}

/* ===== Musica ===== */
.musica-griglia{flex:1;display:grid;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:28px;min-height:0}
.lettore{padding:26px;gap:18px}
.copertina{aspect-ratio:16/9;border-radius:18px;background:var(--accento);color:var(--su-accento);display:flex;align-items:center;justify-content:center;overflow:hidden}
.copertina svg{width:80px;height:80px;stroke-width:1.2}
.copertina img{max-width:60%;max-height:80%;object-fit:contain;border-radius:12px;background:#fff;padding:8px}
.lettore-titolo{font:500 28px/1.15 var(--font-titoli);margin-top:4px}
.comandi-lettore{display:flex;align-items:center;justify-content:center;gap:22px}
.tondo-grande{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--scuro-linea);color:var(--su-scuro)}
.tondo-enorme{width:78px;height:78px;border-radius:50%;border:0;background:var(--su-scuro);color:var(--scuro);display:flex;align-items:center;justify-content:center}
.tondo-enorme svg{width:32px;height:32px}
.volume{display:flex;align-items:center;gap:12px;margin-top:auto;color:var(--scuro-tenue)}
.volume input{flex:1;accent-color:#8FB3A6;height:32px}
.stazioni{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0}
.cerca-radio input{width:100%;height:56px;border-radius:28px;border:1px solid var(--linea);background:var(--superficie);padding:0 22px;font-size:18px}
.generi{display:flex;flex-wrap:wrap;gap:8px}
.lista-stazioni{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;overflow:auto;align-content:start;flex:1;min-height:200px}
.stazione{display:flex;align-items:center;gap:10px;background:var(--superficie);border:1px solid var(--linea);border-radius:16px;padding:8px 8px 8px 10px}
.stazione.attiva{border:2px solid var(--accento)}
.stazione .suona{flex:1;min-width:0;display:flex;align-items:center;gap:12px;background:none;border:0;text-align:left;padding:4px;min-height:52px}
.logo-radio{width:44px;height:44px;border-radius:10px;background:var(--chip);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.logo-radio img{width:100%;height:100%;object-fit:contain;background:#fff}
.nome-radio{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dettaglio-radio{display:block;font-size:15px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.preferita{width:44px;height:44px;border-radius:50%;border:0;background:transparent;color:var(--tenue);display:flex;align-items:center;justify-content:center}
.preferita[aria-pressed="true"]{color:var(--arancio)}
.preferita[aria-pressed="true"] svg{fill:currentColor}

/* ===== Esco ===== */
.avviso-arancio{background:var(--arancio-chiaro);color:var(--arancio-testo);border-radius:18px;padding:16px 20px;display:flex;align-items:center;gap:16px}
.avviso-arancio svg{width:32px;height:32px;color:var(--arancio)}
.avviso-arancio div{flex:1}
.avviso-arancio[hidden]{display:none}
.controlli{list-style:none;margin:0;padding:6px 20px;gap:0}
.controlli li{display:flex;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--chip)}
.controlli li:last-child{border-bottom:0}
.spunta{width:26px;height:26px;color:var(--accento);stroke-width:2}
.tasto-uscita{min-height:132px;border-radius:28px;border:0;background:var(--accento);color:var(--su-accento);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:0 30px;text-align:left}
.tasto-uscita.uscito{background:var(--scuro);color:var(--su-scuro)}
.tasto-uscita .grande{font-size:32px}

/* ===== Notte ===== */
.schermo.notte{background:#0F1513;color:#C9D1CC;padding:56px 72px 48px;cursor:pointer}
.orologio-notte{font:200 200px/1 var(--font-titoli);letter-spacing:-8px;color:#E4EAE6;font-variant-numeric:tabular-nums}
.frase-notte{font:300 34px/1.25 var(--font-titoli);white-space:pre-line;max-width:820px;color:#E4EAE6;margin-top:16px}
.tenue-notte{color:#8E9B95;font-size:18px}
/* salvaschermo: agenda dei prossimi giorni a sinistra, conto alla rovescia a destra */
.notte-colonne{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;margin-top:40px}
.agenda-notte,.arrivo-notte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.agenda-notte ul{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.agenda-notte ul li{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;font-size:21px;color:#E4EAE6}
.giorno-notte{font:500 17px var(--font-titoli);color:#8E9B95;text-transform:capitalize}
.ora-notte{color:#8E9B95;font-variant-numeric:tabular-nums;font-size:17px;padding-top:3px}
.arrivo-notte li{display:flex;flex-direction:column;gap:2px;font-size:20px;color:#E4EAE6}
.arrivo-notte b{font:500 15px var(--font-testo);color:#5FA08E;letter-spacing:.3px}
.agenda-notte .vuoto{color:#8E9B95;font-size:18px}
@media (max-width:760px){ .notte-colonne{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:24px} .agenda-notte ul li{grid-template-columns:92px minmax(0,1fr);font-size:18px} }
.notte-fondo{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.notte-info{display:flex;gap:36px;flex-wrap:wrap}
.etichetta-notte{font-size:16px;letter-spacing:1px;text-transform:uppercase;color:#6E7C76;margin-bottom:4px}
.tasto-notte{height:56px;padding:0 22px;border-radius:28px;border:1px solid #2C3833;color:#C9D1CC;text-decoration:none;display:flex;align-items:center}

/* ===== Risposta e finestre ===== */
.risposta{position:fixed;left:50%;bottom:108px;transform:translateX(-50%);max-width:min(720px,calc(100vw - 32px));background:var(--scuro);color:var(--su-scuro);padding:16px 22px;border-radius:18px;font-size:18px;box-shadow:0 8px 30px rgba(0,0,0,.25);z-index:20}
.finestra{border:0;border-radius:24px;padding:0;background:var(--superficie);color:var(--inchiostro);width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 48px)}
.finestra::backdrop{background:rgba(10,14,13,.5)}
.finestra form{padding:24px;display:flex;flex-direction:column;gap:14px}
.finestra-testa{display:flex;justify-content:space-between;align-items:center}
.finestra-testa h2{font:500 26px var(--font-titoli)}
.finestra input[type="text"],.finestra input[type="search"]{flex:1;min-width:200px;height:52px;border-radius:14px;border:1px solid var(--linea);background:var(--fondo);padding:0 16px;font-size:17px}
.griglia-sfondi{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.sfondo-scelta{border:2px solid transparent;border-radius:18px;background:none;padding:6px;display:flex;flex-direction:column;gap:6px;text-align:left}
.sfondo-scelta[aria-pressed="true"]{border-color:var(--accento)}
.anteprima{height:84px;border-radius:12px;border:1px solid var(--linea);background-size:cover;background-position:center}
.foto-sfondo{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.risultati-citta{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.risultati-citta button{width:100%;text-align:left;min-height:48px;border-radius:12px;border:1px solid var(--linea);background:var(--fondo);padding:8px 14px}

/* ===== Schermi piccoli ===== */
/* ===== Dispositivi ===== */
#dispositivi{max-width:1100px;margin:0 auto;width:100%}
.disp-sintesi{font:400 21px/1.35 var(--font-titoli);color:var(--inchiostro)}
.disp-sintesi .allerta{color:var(--arancio);font-weight:500}
.disp-gruppi{columns:2 380px;column-gap:16px}
.disp-gruppo{break-inside:avoid;margin:0 0 16px;gap:4px}
.disp-gruppo.allerta{column-span:all;box-shadow:inset 4px 0 0 var(--arancio)}
.disp-gruppo h2{font:600 17px var(--font-titoli)}
.disp-elenco{list-style:none;margin:0;padding:0}
.disp{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--linea)}
.disp:first-child{border-top:0}
.disp-punto{width:10px;height:10px;border-radius:50%;background:var(--accento)}
.disp.giu .disp-punto{background:transparent;border:2px solid var(--arancio)}
.disp-testo{display:flex;flex-direction:column;gap:1px;min-width:0}
.disp-testo b{font-weight:700;overflow-wrap:anywhere}
.disp-testo small{font-size:16px;line-height:1.3}
.disp-stato{color:var(--tenue)}
.disp.giu .disp-stato{color:var(--arancio);font-weight:700}
.disp-batteria{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-variant-numeric:tabular-nums;color:var(--testo);white-space:nowrap}
.disp-batteria svg{width:26px;height:14px;stroke-width:1.5}
.disp-batteria .livello{fill:var(--accento);stroke:none}
.disp-batteria.bassa{color:var(--arancio);font-weight:700}
.disp-batteria.bassa .livello{fill:var(--arancio)}
#dispositivi .schede-consumi button{white-space:nowrap}
@media (max-width:520px){#dispositivi .schede-consumi{align-self:stretch}#dispositivi .schede-consumi button{flex:1;padding:0 8px}}
@media (max-width:1100px){
  .casa-griglia{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .col-destra{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
  .col-destra > *{flex:1 1 260px}
  .tasto-esco{margin-top:0}
}
@media (max-width:760px){
  .schermo{padding:18px 16px}
  .casa-griglia,.musica-griglia{grid-template-columns:minmax(0,1fr)}
  .orologio{font-size:76px}
  .frase{font-size:24px}
  .titolo-grande{font-size:32px}
  .barra-chiedi{flex-wrap:wrap;border-radius:24px}
  .scorciatoie{width:100%}
  .schermo.notte{padding:32px 20px}
  .orologio-notte{font-size:110px;letter-spacing:-4px}
  .frase-notte{font-size:26px}
}

/* ===== TV ===== */
.tv-griglia{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)}
.schermo-tv{padding:16px;gap:12px}
.video{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
.video iframe{width:100%;height:100%;border:0}
.video-vuoto{display:flex;flex-direction:column;align-items:center;gap:10px;color:#9AA8A1}
.video-vuoto svg{width:56px;height:56px;stroke-width:1.3}
.canale-esterno{font-size:14.5px;color:var(--tenue);text-transform:uppercase;letter-spacing:.3px}
@media (max-width:760px){.tv-griglia{grid-template-columns:minmax(0,1fr)}}

/* ===== Tablet orizzontale: la schermata Casa sta tutta nello schermo ===== */
@media (min-width:1101px) and (min-height:640px){
  #casa{height:calc(100dvh - var(--alto-testata));overflow:hidden}
  #casa .casa-griglia{grid-template-rows:minmax(0,1fr)}
  #casa .col-centro{min-height:0}
  #casa .notizie{min-height:0;overflow:hidden}
  #casa .notizie-lista{min-height:0}
  /* la colonna Casa (in casa, tapparelle, musica, foto, uscita) scorre al suo interno invece di uscire dallo schermo */
  #casa .col-destra{min-height:0;overflow-y:auto;scrollbar-width:none;padding-bottom:4px}
  #casa .col-destra::-webkit-scrollbar{display:none}
  #casa .col-destra > *{flex:0 0 auto}
  #casa .col-destra > .cornice{min-height:120px}
  #casa .tasto-esco{margin-top:0}
}
.notizie-lista a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
a.tasto{text-decoration:none}
.lista-stazioni{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

/* ===== Multimedia ===== */
.schede{display:flex;gap:8px;margin-left:auto}
.pannello{flex:1;display:flex;flex-direction:column;gap:16px;min-height:0}
.pannello[hidden]{display:none}
.griglia-foto{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;align-content:start}
.griglia-foto li{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--chip)}
.griglia-foto .apri-foto{width:100%;height:100%;padding:0;border:0;background:none}
.griglia-foto img{width:100%;height:100%;object-fit:cover;display:block}
.togli{position:absolute;top:8px;right:8px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(15,21,19,.65);color:#fff;display:flex;align-items:center;justify-content:center}
.aggiungi-link{display:flex;flex-direction:column;gap:8px}
.aggiungi-link input,#pannello-video input[type="url"]{flex:1;min-width:200px;height:52px;border-radius:14px;border:1px solid var(--linea);background:var(--superficie);padding:0 16px;font-size:17px}
.video video{width:100%;height:100%;background:#000}
.servizi{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-content:start}
.servizio p{color:var(--testo)}
.servizio-testa{display:flex;align-items:center;gap:14px}
.logo-servizio{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font:600 22px var(--font-titoli);color:#fff;flex-shrink:0}
.logo-servizio.radio{background:var(--accento)}
.logo-servizio.apple{background:#C93A4F}
.logo-servizio.spotify{background:#1A7F45}
.logo-servizio.amazon{background:#3B4A63}
.servizio.non-disponibile{opacity:.75}
.lista-playlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.lista-playlist button{width:100%;min-height:52px;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--linea);background:var(--fondo);border-radius:12px;padding:6px 10px}
.lista-playlist img{width:40px;height:40px;border-radius:8px;object-fit:cover}
.lista-playlist .attiva{border:2px solid var(--accento)}

.cornice{flex:1;min-height:120px;border-radius:18px;overflow:hidden;position:relative;background:var(--chip);text-decoration:none;display:flex}
.cornice img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity 1.2s ease}
.cornice-vuota{margin:auto;display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--tenue);font-size:15px;text-align:center;padding:12px}
/* senza foto la cornice è solo una riga: niente grande riquadro vuoto */
.cornice:has(> .cornice-vuota:not([hidden])){flex:none;min-height:0;background:var(--superficie);border:1px solid var(--linea)}
.cornice-vuota:not([hidden]){margin:0;flex-direction:row;gap:12px;padding:14px 16px;color:var(--inchiostro);font-weight:700}
.cornice-vuota svg{color:var(--tenue)}
.cornice-vuota svg{width:32px;height:32px}

/* Aggiornamento disponibile: una riga discreta in fondo, sopra la barra del telefono */
.aggiornamento{position:fixed;left:50%;bottom:calc(16px + var(--alto-barra,0px) + var(--sotto-barra,env(safe-area-inset-bottom,0px)));transform:translateX(-50%);z-index:19;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:6px 6px 6px 16px;border-radius:999px;background:var(--superficie);color:var(--testo);border:1px solid var(--linea);box-shadow:0 6px 20px rgba(0,0,0,.12);font-size:16px}
.aggiornamento[hidden]{display:none}
.aggiornamento span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.aggiornamento .aggiorna{flex:none;height:32px;padding:0 14px;border:0;border-radius:16px;background:var(--accento);color:var(--su-accento);font:700 15.5px var(--font-testo)}
.aggiornamento .chiudi{flex:none;width:32px;height:32px;border:0;border-radius:16px;background:transparent;color:var(--tenue);font-size:20px;line-height:1}
.presentazione{position:fixed;inset:0;background:#000;z-index:40;cursor:pointer}
.presentazione[hidden]{display:none}
.presentazione img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1.5s ease}
.presentazione img.visibile{opacity:1}
.presentazione-ora{position:absolute;left:40px;bottom:32px;font:300 64px/1 var(--font-titoli);color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6)}
.chiudi-presentazione{position:absolute;top:24px;right:24px;background:rgba(0,0,0,.4);border-color:rgba(255,255,255,.3);color:#fff}
[hidden]{display:none!important}
.tv-griglia > .schermo-tv{align-self:start}
/* più specifica di .finestra input[type="text"]: i campi diretti del modulo non si schiacciano */
.finestra form > input[type]{flex:none}

/* ===== Casa vera (dal Nucleo JustDomu) ===== */
.in-casa-piede{display:flex;justify-content:space-between;align-items:center;gap:8px}
.in-casa-piede .pillola{text-decoration:none}
/* Tapparelle: nome e stato a sinistra, apri/ferma/chiudi a destra */
.tapparelle-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.tapparella{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid var(--linea)}
.tapparella:first-child{border-top:0}
.tapparella-testo{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.tapparella-testo b{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tapparella .stato{font-size:15px;color:var(--tenue);font-variant-numeric:tabular-nums}
.tapparella.muta .tapparella-testo{color:var(--tenue);font-style:italic}
.tasti-tapparella{display:flex;gap:6px;flex:none}
.tasto-tapparella{width:42px;height:36px;border-radius:12px;border:1px solid var(--linea);background:var(--superficie);color:var(--inchiostro);display:grid;place-items:center;touch-action:manipulation}
.tasto-tapparella svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tasto-tapparella:disabled{opacity:.4}
.tasto-tapparella:active:not(:disabled){background:var(--chip)}

/* Luci: icone come le app dell'iPhone. Accesa, l'icona si riempie di luce calda fino all'intensità */
#luci{--calda-1:#FFE3A6;--calda-2:#F6B24A;--calda-icona:#5B3410;--alone:rgba(246,170,60,.42);-webkit-user-select:none;user-select:none}
/* la pressione lunga è nostra: iOS non deve sollevare l'icona come un'immagine, selezionare testo o aprire menu */
#luci *{-webkit-touch-callout:none;-webkit-user-drag:none}
.luce-tasto *{pointer-events:none}
.luci-testa{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.luci-comandi{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:-6px}
.luci-comandi .pillola{height:38px;padding:0 14px;font-size:16px;font-weight:600;background:transparent;border:1px solid var(--linea)}
.luci-comandi .pillola[aria-pressed="true"]{background:var(--accento);border-color:var(--accento);color:var(--su-accento);font-weight:700}
.luci-titolo{font:400 34px/1.1 var(--font-titoli);letter-spacing:-.01em}
#luci-sotto{font-size:15px;margin-top:2px}
.luci-tasti{display:flex;gap:8px;flex:none}
.luci-tasti button{touch-action:manipulation}
.luci-testa .pillola{height:38px;padding:0 14px;font-size:16px;font-weight:700;flex:none}
.luci-testa .pillola svg{width:18px;height:18px;stroke-width:2.2}
.luci-testa .pillola.spegni{background:var(--inchiostro);color:var(--fondo)}
.luci-plancia{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:22px 12px;align-content:start;padding:6px 0}
/* per stanza: ogni stanza larga quante sono le sue luci (max una riga), le piccole riempiono i buchi */
.luci-plancia.per-stanza{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-auto-flow:row dense;gap:12px 8px}
.stanza{grid-column:span var(--n,1);display:flex;flex-direction:column;gap:10px;padding:10px 4px 12px;border-radius:20px;background:color-mix(in srgb,var(--superficie) 55%,transparent)}
.stanza h2{padding:0 8px;font:700 14px var(--font-testo);letter-spacing:.05em;text-transform:uppercase;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stanza h2 .accese{color:var(--arancio);letter-spacing:0;text-transform:none;font-weight:600}
.stanza-icone{position:relative;display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:16px 4px}
.luce{position:relative;display:flex;justify-content:center;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.luce-tasto{display:flex;flex-direction:column;align-items:center;gap:7px;width:100%;min-width:0;padding:0;border:0;background:none;color:var(--inchiostro);font:inherit;-webkit-tap-highlight-color:transparent}
/* il quadrato arrotondato delle app (raggio 22,5%), con la luce che sale dal basso */
.luce-quadro{position:relative;width:min(76px,100%);aspect-ratio:1;border-radius:22.5%;overflow:hidden;display:grid;place-items:center;
  background:var(--superficie);box-shadow:inset 0 0 0 1px var(--linea),0 1px 2px rgba(0,0,0,.06);transition:box-shadow .3s,transform .15s}
/* regolabile: barra sottile in basso con l'intensità; vuota da spenta */
.luce-barra{position:absolute;left:16%;right:16%;bottom:10%;height:4px;border-radius:2px;background:color-mix(in srgb,var(--tenue) 22%,transparent);overflow:hidden}
.luce-livello{display:block;height:100%;width:var(--livello,0%);border-radius:inherit;background:var(--calda-2);transition:width .35s cubic-bezier(.2,.8,.2,1)}
.luce.accesa .luce-barra{background:rgba(91,52,16,.16)}
.luce.accesa .luce-livello{background:var(--calda-icona)}
.luce-icona{position:relative;display:grid;place-items:center;color:var(--tenue)}
.luce-icona svg{width:32px;height:32px;stroke-width:1.6}
.luce-nome{max-width:100%;font-size:16px;font-weight:700;line-height:1.15;text-align:center;white-space:pre-line;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.luce-stanza{max-width:100%;margin-top:-5px;font-size:14px;color:var(--tenue);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.luce-tasto:active .luce-quadro{transform:scale(.94)}
/* «non risponde», «accendo…»: si legge tutto, anche su due righe */
.luce-stanza.avviso{white-space:normal;line-height:1.15}
.luce.accesa .luce-quadro{background:linear-gradient(to top,var(--calda-2),var(--calda-1));box-shadow:0 6px 22px var(--alone),inset 0 0 0 1px color-mix(in srgb,var(--calda-2) 55%,transparent)}
.luce.accesa .luce-icona{color:var(--calda-icona)}
.luce.accesa .luce-icona svg{fill:rgba(255,255,255,.55)}
/* intensità: il «%» in alto a destra apre il cursore */
.luce-pct{position:absolute;top:-8px;right:calc(50% - 46px);min-width:34px;height:24px;padding:0 7px;border-radius:12px;border:0;
  background:var(--superficie);color:var(--inchiostro);font:700 13.5px/24px var(--font-testo);font-variant-numeric:tabular-nums;box-shadow:0 2px 8px rgba(0,0,0,.18)}
/* luci a colori: accese, l'icona prende il colore vero della luce; spente, un puntino arcobaleno */
.luce.colorata .luce-quadro{background:linear-gradient(to top,rgb(var(--rgb)),color-mix(in srgb,rgb(var(--rgb)) 55%,#fff));box-shadow:0 6px 22px rgb(var(--rgb) / .45),inset 0 0 0 1px rgb(var(--rgb) / .6)}
.luce.colorata.scura .luce-icona{color:#fff}
.luce.colorata.scura .luce-icona svg{fill:rgba(255,255,255,.25)}
.luce.colorata.scura .luce-barra{background:rgba(255,255,255,.3)}
.luce.colorata.scura .luce-livello{background:#fff}
.luce.rgb .luce-quadro::before{content:"";position:absolute;top:9%;left:9%;width:8px;height:8px;border-radius:50%;background:conic-gradient(#ff4b3e,#ffc400,#3ddc84,#36a3ff,#a35bff,#ff4b3e)}
.luce.rgb.accesa .luce-quadro::before{display:none}
/* finestra dell'intensità: bianchi e colori */
.regola-colori{display:flex;flex-direction:column;gap:10px}
.campioni{display:flex;flex-wrap:wrap;gap:10px}
.campioni-nome{font-size:15px;color:var(--tenue);margin:2px 0 -4px}
.campione{width:40px;height:40px;border-radius:50%;border:0;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);touch-action:manipulation}
.campione[aria-pressed="true"]{box-shadow:0 0 0 3px var(--superficie),0 0 0 5px var(--inchiostro)}
.luce.muta .luce-quadro{background:transparent;box-shadow:inset 0 0 0 1.5px var(--linea)}
.luce.muta .luce-quadro{background-image:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--linea) 60%,transparent) 6px 7px)}
.luce.muta .luce-nome,.luce.muta .luce-stanza{color:var(--tenue)}
.luce.in-corso .luce-icona{animation:lampeggia 1s ease-in-out infinite}
@keyframes lampeggia{50%{opacity:.35}}
/* Modifica: le icone tremano come le app del telefono; quella presa segue il dito */
.luci-plancia.in-modifica{touch-action:none}
.in-modifica .luce{cursor:grab}
.in-modifica .luce-quadro{animation:trema .26s ease-in-out infinite alternate}
.in-modifica .luce:nth-child(odd) .luce-quadro{animation-delay:-.13s}
.luce.sollevata{z-index:5;cursor:grabbing;pointer-events:none}
.luce.sollevata .luce-quadro{animation:none;box-shadow:0 14px 30px rgba(0,0,0,.28)}
@keyframes trema{from{rotate:-2deg}to{rotate:2deg}}
@media (prefers-reduced-motion:reduce){.in-modifica .luce-quadro{animation:none;box-shadow:inset 0 0 0 2px var(--accento)}.luce.in-corso .luce-icona{animation:none}}
.luce-tasto:focus-visible{outline:none}
.luce-tasto:focus-visible .luce-quadro{outline:3px solid var(--accento);outline-offset:3px}
.luci-vuota{grid-column:1/-1;width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:17px}
.luci-vuota .pillola{font-weight:700}
.finestra-regola{width:min(420px,calc(100vw - 32px))}
.regola-testa{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.regola-testa h2{font:600 22px var(--font-titoli)}
.regola-testa b{font-size:18px;color:var(--arancio);font-variant-numeric:tabular-nums}
#regola-livello{width:100%;height:44px;accent-color:var(--arancio)}
.in-casa-piede .pillola{height:34px;padding:0 14px;font-size:16px}
.mascherato{-webkit-text-security:disc}
/* telefoni: il pulsante dei suggerimenti va sotto il testo, il titolo resta leggibile */
@media (max-width:520px){
  .suggerimento{flex-wrap:wrap}
  .suggerimento div{flex:1 1 calc(100% - 48px)}
  .suggerimento .tasto{margin-left:48px}
}

/* ===== iPad in verticale: la riga sotto le colonne non schiaccia nessun riquadro ===== */
@media (min-width:601px) and (max-width:1100px){
  .col-destra > .cornice,.col-destra > .mini-lettore,.col-destra > .tasto-esco{flex:1 1 220px;min-width:200px}
  .col-destra > .persone{flex:0 0 auto}
}

/* ===== Telefono: un pannello alla volta ===== */
.barra-pannelli{display:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media (max-width:600px){
  /* barra più bassa: usa solo una parte della zona sicura in fondo (la linea dell'iPhone sta comunque sotto) */
  :root{--alto-barra:58px;--sotto-barra:max(calc(env(safe-area-inset-bottom,0px) - 16px),6px)}
  body{padding-bottom:calc(var(--alto-barra) + var(--sotto-barra))}
  /* le schermate che scorrono finiscono sopra il microfono e la sfumatura della barra */
  .schermo:not(#casa):not(.notte){padding-bottom:64px}
  .barra-pannelli{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;
    height:calc(var(--alto-barra) + var(--sotto-barra));padding:0 6px var(--sotto-barra);
    background:transparent;isolation:isolate
  }
  /* fondo della barra: velato e sfocato, sfuma verso l'alto senza linea di stacco */
  .barra-pannelli::before{content:"";position:absolute;inset:-30px 0 0;z-index:-1;pointer-events:none;
    background:color-mix(in srgb,var(--superficie) 80%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    -webkit-mask-image:linear-gradient(to bottom,transparent,#000 32px);mask-image:linear-gradient(to bottom,transparent,#000 32px)}
  .barra-pannelli button{border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:13.5px;color:var(--tenue);min-width:0}
  .barra-pannelli button svg{width:24px;height:24px}
  .barra-pannelli button[aria-current="true"]{color:var(--accento);font-weight:700}
  /* microfono al centro: un cerchio piccolo pieno, alla stessa altezza delle altre icone, con la sua scritta */
  .barra-pannelli .tasto-voce{color:var(--accento);font-weight:700}
  .cerchio-voce{width:30px;height:30px;margin:-3px 0;border-radius:50%;background:var(--accento);color:var(--su-accento);display:grid;place-items:center;
    box-shadow:0 3px 10px color-mix(in srgb,var(--accento) 40%,transparent)}
  .barra-pannelli .tasto-voce .cerchio-voce svg{width:17px;height:17px;stroke-width:2}
  .tasto-voce.ascolta .cerchio-voce{animation:pulsa 1.2s ease-in-out infinite}

  /* la schermata Casa occupa lo schermo; i pannelli scorrono di lato, ognuno scorre in verticale */
  #casa{height:calc(100dvh - var(--alto-barra) - var(--sotto-barra) - var(--alto-testata));min-height:0;padding:14px 0 10px;gap:10px;overflow:hidden}
  #casa .casa-griglia{display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;min-height:0;flex:1}
  #casa .casa-griglia::-webkit-scrollbar{display:none}
  #casa .col-sinistra,#casa .col-centro,#casa .col-destra{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;padding:4px 16px 16px;flex-direction:column;flex-wrap:nowrap}
  #casa .col-destra > *{flex:0 0 auto}
  /* col dito si scorre nello stesso ordine della barra: Casa, Comandi, Avvisi */
  #casa .col-destra{order:2}
  #casa .col-centro{order:3}
  #casa .col-destra .cornice:not(:has(> .cornice-vuota:not([hidden]))){min-height:160px} /* più alta solo quando mostra le foto */
  #casa .tasto-esco{margin-top:0}
  .orologio{font-size:68px}
  .frase{font-size:23px}

  /* «Chiedi alla casa»: si apre dal microfono al centro della barra, sopra la barra stessa */
  body > .barra-chiedi{display:none}
  body > .barra-chiedi.aperta{display:flex;position:fixed;left:12px;right:12px;z-index:22;bottom:calc(var(--alto-barra) + var(--sotto-barra) + 14px);
    min-height:58px;padding:6px 8px 6px 6px;flex-wrap:nowrap;box-shadow:0 12px 34px rgba(0,0,0,.2)}
  body > .barra-chiedi .microfono{width:46px;height:46px}
  body > .barra-chiedi input{min-width:0;height:44px;font-size:17px}
  body > .barra-chiedi .scorciatoie{display:none}
  /* la risposta della casa occupa la larghezza e sta sopra il foglio «Chiedi» */
  .risposta{left:16px;right:16px;transform:none;max-width:none;font-size:17px;bottom:calc(var(--alto-barra) + var(--sotto-barra) + 86px)}
  /* prima pagina: «In casa» subito sotto la frase; orologio un po' più piccolo per farci stare tutto */
  #casa .col-sinistra .in-casa{flex:0 0 auto}
  /* sul tablet il meteo sta in fondo alla colonna; sul telefono segue subito, senza vuoti */
  #casa .col-sinistra .meteo{margin-top:0}

  #luci{padding:14px 16px 12px;gap:14px;min-height:calc(100dvh - var(--alto-barra) - var(--sotto-barra) - var(--alto-testata))}
  /* sul telefono: 4 icone per riga, come la schermata Home */
  .luci-titolo{font-size:28px}
  .luci-testa .pillola,.luci-comandi .pillola{height:34px;padding:0 12px;font-size:15.5px}
  .luci-tasti{gap:6px}
  .luci-plancia,.luci-plancia.per-stanza{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 6px}
  .luci-plancia.per-stanza{gap:10px 6px}
  .stanza-icone{gap:10px 2px}
  /* per stanza sul telefono: più compatta, per stare in una schermata */
  .per-stanza .stanza{padding:8px 2px 10px;gap:8px;border-radius:18px}
  .per-stanza .stanza h2{font-size:13px;padding:0 8px}
  .per-stanza .luce-quadro{width:min(58px,100%)}
  .per-stanza .luce-icona svg{width:25px;height:25px}
  .per-stanza .luce-tasto{gap:5px}
  .per-stanza .luce-pct{right:calc(50% - 38px)}
  .luce-quadro{width:min(68px,100%)}
  .luce-icona svg{width:28px;height:28px}
  .luce-nome{font-size:15px}
  .luce-stanza{font-size:13.5px}
  .luce-pct{right:calc(50% - 42px)}
}
/* sul telefono la riga di stato sopra il titolo delle Luci è superflua (la fascia dice già Demo o Casa vera) */
@media (max-width:600px){ #luci .testa-schermo{display:none} }

/* ===== Menu ☰ ===== */
.finestra-menu{width:min(560px,calc(100vw - 32px))}
.menu-sezione{display:flex;flex-direction:column;gap:8px;padding-top:6px;border-top:1px solid var(--linea)}
.menu-sezione h3{font:600 15px var(--font-testo);letter-spacing:.6px;text-transform:uppercase;color:var(--tenue);margin:8px 0 2px}
.menu-riga,.menu-voce{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:52px;font-size:17px}
.menu-voce{border:0;background:none;padding:0;text-align:left;cursor:pointer;border-radius:12px}
.menu-voce > span:last-child{font-size:24px;color:var(--tenue)}
.menu-riga small,.menu-voce small{display:block;font-size:15.5px;color:var(--tenue);margin-top:2px}
.segmentato{display:inline-flex;background:var(--chip);border-radius:14px;padding:3px;gap:2px;flex-shrink:0}
.segmentato button{border:0;background:none;border-radius:11px;padding:8px 12px;font-size:15px;color:var(--testo)}
.segmentato button[aria-checked="true"]{background:var(--superficie);color:var(--inchiostro);font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.interruttore{appearance:none;-webkit-appearance:none;width:52px;height:32px;border-radius:16px;background:var(--chip);position:relative;flex-shrink:0;cursor:pointer;transition:background .2s}
.interruttore::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:var(--superficie);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.interruttore:checked{background:var(--accento)}
.interruttore:checked::after{transform:translateX(20px)}
.menu-elenco{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px}
.menu-elenco li{display:flex;flex-direction:column}
.menu-elenco span{color:var(--tenue)}
.menu-info{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;font-size:15px}
.menu-info dt{color:var(--tenue)}
.menu-info dd{margin:0}
@media (prefers-reduced-motion:reduce){.interruttore,.interruttore::after{transition:none}}

/* Menu ☰ come elenco: modalità in cima, righe con icona e freccia, versione in fondo */
.menu-modalita{display:flex;flex-direction:column;gap:8px}
.menu-modalita h3{font:600 15px var(--font-testo);letter-spacing:.6px;text-transform:uppercase;color:var(--tenue);margin:4px 0 0}
.segmentato.largo{display:grid;grid-template-columns:1fr 1fr}
.segmentato.largo button{padding:12px;font-size:17px}
.menu-lista{list-style:none;margin:0 -24px;padding:0;border-top:1px solid var(--linea)}
.menu-lista > li{border-bottom:1px solid var(--linea)}
.menu-lista .menu-riga{width:100%;display:flex;align-items:center;gap:14px;min-height:62px;padding:8px 24px;border:0;background:none;text-align:left;font-size:17px;color:inherit;cursor:pointer;list-style:none}
.menu-lista .menu-riga::-webkit-details-marker{display:none}
.menu-lista .menu-riga > svg{width:24px;height:24px;color:var(--tenue)}
.menu-lista .testo{flex:1;min-width:0;font-weight:500}
.menu-lista .freccia{font-size:24px;color:var(--tenue);transition:transform .2s}
.menu-dettagli[open] .freccia{transform:rotate(90deg)}
.menu-dettagli .menu-elenco,.menu-dettagli .menu-info{padding:0 24px 16px 62px}
.menu-versione{text-align:center;color:var(--tenue);font-size:16px;margin-top:4px}
@media (max-width:600px){ .menu-lista li.menu-riga{flex-wrap:wrap} }
.menu-lista a.menu-riga{text-decoration:none}
.menu-contatto{padding:0 24px 16px 62px;margin:0;font-size:15px;color:var(--tenue)}
.menu-contatto a{color:var(--accento)}

/* ===== Avvisi: elenco senza riquadri ===== */
.avvisi{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.avviso{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start}
.avviso-icona svg{width:26px;height:26px;color:var(--tenue)}
.avviso.importante .avviso-icona svg{color:var(--arancio)}
.avviso b{display:block;font:600 19px/1.25 var(--font-titoli)}
.avviso span:not(.avviso-icona){display:block;font-size:15px;color:var(--tenue);margin-top:2px}
.avviso.nessuno{display:block;color:var(--tenue);font-size:17px}

.menu-calendari .menu-scelta{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;cursor:pointer;color:var(--inchiostro)}
.menu-calendari .menu-scelta small{display:block;font-size:15px;color:var(--tenue)}

/* energia nel riquadro In casa */
.energia-casa{font-size:16px;color:var(--testo);font-variant-numeric:tabular-nums;text-decoration:none}
.energia-casa:not(:empty)::after{content:" ›";color:var(--accento);font-weight:700}
.energia-casa:empty{display:none}
/* telefono: numero di luci accese sul pulsante Luci; il pulsante «Luci» del riquadro diventa superfluo */
.barra-pannelli button{position:relative}
.badge{position:absolute;top:6px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--arancio);color:#fff;font:700 13px/18px var(--font-testo);text-align:center}
@media (max-width:600px){ #vai-luci{display:none} }

/* meteo: 4 giorni con la pioggia in mm (come in Home Assistant) */
.meteo-ore.giorni{grid-template-columns:repeat(4,minmax(0,1fr))}
.meteo-ore.giorni span:first-child{text-transform:capitalize}
.meteo-ore .mm{font-size:14.5px;font-weight:700;color:var(--m-pioggia);font-variant-numeric:tabular-nums}
.meteo-ore .nascosto-vis{visibility:hidden}

/* ===== Salvaschermo: cielo animato, notte, assente ===== */
.schermo.notte{position:relative;overflow:hidden}
.cielo{position:absolute;inset:0;width:100%;height:100%;display:none;z-index:0}
.schermo.notte > :not(.cielo){position:relative;z-index:1}
.schermo.notte[data-modo="giorno"]{background:#4f97d9}
.schermo.notte[data-modo="giorno"] .cielo{display:block}
/* sul cielo il testo resta leggibile: bianco con un'ombra morbida */
.schermo.notte[data-modo="giorno"] :is(.orologio-notte,.frase-notte,.agenda-notte,.arrivo-notte,.notte-info,.giorno-notte,.ora-notte,.etichetta-notte){color:#fff;text-shadow:0 1px 14px rgba(15,30,50,.55)}
.schermo.notte[data-modo="giorno"] .arrivo-notte b{color:#FFE7B8}
.schermo.notte[data-modo="giorno"] .tasto-notte{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(15,30,50,.18)}
/* nessuno in casa: quasi spento, nessuna informazione in vista */
.schermo.notte[data-modo="assente"]{background:#000}
.schermo.notte[data-modo="assente"] :is(.frase-notte,.notte-colonne,.notte-fondo){display:none}
.schermo.notte[data-modo="assente"] .orologio-notte{font-size:64px;letter-spacing:-2px;color:#3A4440}
.schermo.notte[data-modo="giorno"] .notte-colonne{background:rgba(18,34,54,.38);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:24px;padding:24px 28px}
.schermo.notte[data-modo="giorno"] .notte-fondo{background:rgba(18,34,54,.32);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:20px;padding:14px 18px;margin-top:20px}
.schermo.notte[data-modo="giorno"] .orologio-notte{text-shadow:0 2px 30px rgba(15,30,50,.45)}
/* il salvaschermo sta sempre tutto nello schermo: orologio in proporzione all'altezza, agenda che si accorcia */
.schermo.notte{height:100dvh;min-height:0}
.orologio-notte{font-size:clamp(96px,19vh,200px);letter-spacing:-.04em}
.notte-colonne{margin-top:clamp(16px,3.5vh,40px);flex:1;min-height:0;overflow:hidden;align-content:start}
.notte-fondo{margin-top:16px}

/* ===== Consumi ===== */
#consumi{max-width:980px;margin:0 auto;width:100%}
.consumi-sintesi{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font:400 21px/1.35 var(--font-titoli);color:var(--inchiostro)}
.schede-consumi{display:flex;gap:6px;background:var(--chip);border-radius:14px;padding:4px;align-self:flex-start}
.schede-consumi button{border:0;background:transparent;border-radius:10px;height:36px;padding:0 14px;font:600 16px var(--font-testo);color:var(--testo)}
.schede-consumi button[aria-selected="true"]{background:var(--superficie);color:var(--inchiostro);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.grafico-consumi{gap:10px}
.grafico-consumi h2{font:600 17px var(--font-titoli)}
.grafico-consumi .riga-spazio b{font-variant-numeric:tabular-nums;font-size:15px}
.grafico-barre{width:100%;height:auto;display:block;overflow:visible}
.grafico-barre rect,.grafico-barre text{stroke:none}
.grafico-barre .questo{fill:var(--arancio)}
.grafico-barre .prima{fill:var(--tenue);opacity:.22}
.grafico-barre .asse{stroke:var(--linea);stroke-width:1}
.grafico-barre .scala,.grafico-barre .etichetta-asse{fill:var(--tenue);font:14px var(--font-testo)}
.grafico-barre .tocco{fill:transparent;cursor:pointer}
.grafico-barre .tocco.scelta{fill:var(--accento);opacity:.1}
@media (max-width:600px){
  #consumi{padding:14px 16px 16px;gap:14px}
  .consumi-sintesi{font-size:18px}
  .schede-consumi{align-self:stretch}
  .schede-consumi button{flex:1;padding:0 6px}
  .grafico-consumi .riga-spazio{flex-direction:column;gap:2px}
  #consumi .torna{display:none}
}

/* ===== Fascia fissa in alto, in vetro come iOS (come JustMeteo): il nome a sinistra, il menu a destra ===== */
:root{--alto-testata:calc(56px + env(safe-area-inset-top,0px));--alto-striscia:0px;--banda-fondo:#F6EAD5;--banda-testo:#85560F;--banda-linea:#D9B98A}
body[data-sfondo="lavagna"],body[data-sfondo="notte"],body[data-sfondo="crepuscolo"],body[data-sfondo="cielo"],body[data-sfondo="foto"],body[data-sfondo="scena"]{--banda-fondo:#2C2318;--banda-testo:#DDB277;--banda-linea:#5A4527}
body{padding-top:var(--alto-testata)}
body.demo{--alto-striscia:32px;--alto-testata:calc(88px + env(safe-area-inset-top,0px))}
.barra-app{position:fixed;z-index:40;top:0;left:0;right:0;height:var(--alto-testata);padding-top:env(safe-area-inset-top,0px);
  display:flex;flex-direction:column;view-transition-name:barra-app;
  background:color-mix(in srgb,var(--fondo) 58%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
  box-shadow:0 .5px 0 transparent;transition:background .35s ease,box-shadow .35s ease}
/* il salvaschermo Notte resta a schermo intero, senza fascia */
body[data-schermo="notte"]{padding-top:0}
body[data-schermo="notte"] .barra-app{display:none}
.barra-app.staccata{background:color-mix(in srgb,var(--fondo) 76%,transparent);box-shadow:0 .5px 0 color-mix(in srgb,var(--inchiostro) 14%,transparent)}
.marchio{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--inchiostro);font:700 21px/1 var(--font-titoli);letter-spacing:-.045em;flex:none}
.marchio img{width:28px;height:28px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.barra-riga{position:relative;flex:1;display:flex;align-items:center;gap:10px;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))}
/* Demo, come Paritoo: striscia a tutta larghezza in cima, testo centrato, maiuscolo, ben visibile */
.striscia-demo{flex:none;height:var(--alto-striscia);display:flex;align-items:center;justify-content:center;width:100%;border:0;cursor:pointer;
  background:var(--banda-fondo);box-shadow:inset 0 -1px 0 var(--banda-linea);color:var(--banda-testo);font:800 15px/1 var(--font-testo);letter-spacing:.2em;text-transform:uppercase}
.striscia-demo[hidden]{display:none}
/* il nome della pagina compare al centro solo scorrendo, come il titolo piccolo delle app Apple */
.barra-titolo{position:absolute;left:50%;bottom:0;height:56px;display:flex;align-items:center;transform:translate(-50%,6px);opacity:0;pointer-events:none;
  font:600 17px var(--font-titoli);letter-spacing:-.01em;color:var(--inchiostro);white-space:nowrap;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.barra-app.con-titolo .barra-titolo{opacity:1;transform:translate(-50%,0)}
.barra-riga #apri-menu{margin-left:auto}
.tondo.vetro{width:42px;height:42px;border:0;background:color-mix(in srgb,var(--superficie) 55%,transparent);box-shadow:inset 0 0 0 .5px color-mix(in srgb,var(--inchiostro) 14%,transparent),0 1px 2px rgba(0,0,0,.06);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.tondo.vetro svg{width:22px;height:22px}
/* sul telefono, quando compare il titolo della pagina, il nome e la capsula Demo si fanno da parte */
.marchio span{transition:opacity .2s ease}
@media (max-width:600px){.barra-app.con-titolo .marchio span{opacity:0;pointer-events:none}}

/* ===== Atmosfera: aloni di colore lentissimi dietro tutto, per dare vita al vetro ===== */
.atmosfera{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.atmosfera i{position:absolute;width:62vmax;height:62vmax;border-radius:50%;filter:blur(60px);opacity:.16;will-change:transform}
.atmosfera i:nth-child(1){left:-18vmax;top:-22vmax;background:var(--accento);animation:deriva-a 46s ease-in-out infinite alternate}
.atmosfera i:nth-child(2){right:-24vmax;top:18vh;background:#E39A55;animation:deriva-b 58s ease-in-out infinite alternate}
.atmosfera i:nth-child(3){left:10vw;bottom:-30vmax;background:#7FB6A6;opacity:.12;animation:deriva-a 64s ease-in-out infinite alternate-reverse}
body[data-sfondo="foto"] .atmosfera{display:none}
@keyframes deriva-a{to{transform:translate(14vmax,10vmax) scale(1.12)}}
@keyframes deriva-b{to{transform:translate(-12vmax,-8vmax) scale(.92)}}

/* ===== Pagina leggera: niente riquadri né fondi sui singoli elementi, il contenuto poggia sullo sfondo (come JustMeteo).
   Restano solo i fondi che servono: le icone delle luci (sono pulsanti), gli avvisi, le foto, il lettore scuro. ===== */
.card:not(.scura){background:transparent;border:0;border-radius:0;box-shadow:none;padding:6px 0;-webkit-backdrop-filter:none;backdrop-filter:none}
.icona-meteo{background:transparent!important}
.stanza{background:transparent;padding:0;border-radius:0}
.disp-gruppo.allerta{box-shadow:none}
.disp-gruppo.allerta h2{color:var(--arancio)}
.barra-pannelli::before{-webkit-backdrop-filter:blur(22px) saturate(1.8)!important;backdrop-filter:blur(22px) saturate(1.8)!important}

/* ===== Menu: tendina in vetro sotto il ☰, che si apre con un piccolo rimbalzo dall'angolo ===== */
#finestra-menu{position:fixed;margin:0;inset:calc(var(--alto-testata) + 6px) max(12px,env(safe-area-inset-right)) auto auto;width:min(380px,calc(100vw - 24px));max-height:calc(100dvh - var(--alto-testata) - 24px);overflow-y:auto;
  border-radius:24px;background:color-mix(in srgb,var(--superficie) 70%,transparent);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.7),inset 0 0 0 .5px color-mix(in srgb,var(--inchiostro) 12%,transparent),0 30px 80px -24px rgba(0,0,0,.35);transform-origin:top right}
#finestra-menu[open]{animation:menu-apri .34s cubic-bezier(.2,.9,.3,1.12)}
#finestra-menu::backdrop{background:rgba(0,0,0,.08)}
/* all'apertura la selezione va sul titolo (niente anello sul primo pulsante, come le finestre di iOS) */
dialog h2[tabindex="-1"]:focus{outline:none}
@keyframes menu-apri{from{opacity:0;transform:scale(.86) translateY(-10px)}}

/* ===== Movimento: tocchi che rispondono, pagine che si dissolvono ===== */
.pillola,.tondo,.campione,.segmentato button,.schede-consumi button{transition:transform .25s cubic-bezier(.2,.8,.2,1.2),background .2s ease}
.pillola:active,.tondo:active,.campione:active{transform:scale(.94)}
.barra-pannelli{view-transition-name:barra-basso}
::view-transition-old(root),::view-transition-new(root){animation-duration:.26s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-new(root){animation-name:entra}
@keyframes entra{from{opacity:0;transform:translateY(8px) scale(.995)}}
@media (prefers-reduced-motion:reduce){
  .atmosfera i,#finestra-menu[open]{animation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ===== Accesso alla casa vera (pagina servita dal nucleo) ===== */
.accesso{position:fixed;inset:0;z-index:100;background:var(--fondo);display:grid;place-items:center;padding:24px 16px;overflow-y:auto}
.accesso-scheda{width:min(400px,100%);display:flex;flex-direction:column;gap:12px;background:var(--superficie);border:1px solid var(--linea);border-radius:24px;padding:28px 24px}
.accesso-passo{display:flex;flex-direction:column;gap:12px}
.accesso-scheda h1{font:500 28px var(--font-titoli)}
.accesso-scheda input{height:52px;border-radius:14px;border:1px solid var(--linea);background:var(--fondo);color:var(--inchiostro);padding:0 16px;font-size:17px}
.accesso-scheda #acc-codice:not(:placeholder-shown),.accesso-scheda #primo-codice:not(:placeholder-shown){letter-spacing:.3em;font-size:20px}
.accesso-logo{width:52px;height:52px}
.accesso-errore{color:#B4462F;min-height:1.3em;font-weight:700}
.accesso-errore:empty{min-height:0}
.accesso-segreto{font:600 16px ui-monospace,Menlo,monospace;letter-spacing:.08em;word-break:break-all;user-select:all;background:var(--fondo);border-radius:12px;padding:10px 12px}
.accesso-demo{background:none;border:0;color:var(--tenue);text-decoration:underline;font-size:15px;cursor:pointer;align-self:center;padding:6px}

/* ===== Sfondo «Cielo»: il cielo vivo di JustMeteo (js/cielo-meteo.js) in un canvas fisso dietro tutto.
   I colori della pagina sono quelli di JustMeteo: testo chiaro e riquadri bianchi semitrasparenti,
   che prendono il colore del cielo che c'è dietro. Un velo scurisce appena l'alto e il basso. ===== */
.cielo,.velo-cielo{display:none;position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
body[data-sfondo="cielo"] .cielo,body[data-sfondo="cielo"] .velo-cielo{display:block}
body[data-sfondo="cielo"] .atmosfera{display:none}
.velo-cielo{background:radial-gradient(132% 104% at 50% 40%,transparent 52%,rgba(0,0,0,.28) 100%),
  linear-gradient(180deg,rgba(4,10,20,.46) 0%,rgba(4,10,20,0) 20%,rgba(4,10,20,0) 62%,rgba(4,10,20,.44) 100%)}
body[data-sfondo="cielo"]{--fondo:#0A1222;--superficie:rgba(255,255,255,.115);--chip:rgba(255,255,255,.10);--linea:rgba(255,255,255,.10);
  --inchiostro:#EEF4FB;--testo:#E2EBF5;--tenue:#B3C4D5;--accento:#5AD1FF;--su-accento:#04111D;--riquadro:rgba(255,255,255,.115);
  background-color:#0A1222}

/* ===== Fascia in alto come MoonSky: icona a sinistra (grande quanto il tasto del menu), JUSTDOMU.COM piccolo al centro,
   menu a destra. Ferma in cima non ha fondo: lo sfondo arriva fino in cima, sotto l'ora del telefono. ===== */
:root{--alto-testata:calc(64px + env(safe-area-inset-top,0px))}
body.demo{--alto-testata:calc(96px + env(safe-area-inset-top,0px))}
.barra-app{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.barra-app.staccata{background:color-mix(in srgb,var(--fondo) 72%,transparent);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8)}
/* sugli sfondi chiari l'ora e la batteria (bianche) restano leggibili grazie a un velo che sfuma */
body:not(.fondo-scuro) .barra-app::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + 10px);pointer-events:none;
  background:linear-gradient(rgba(26,31,24,.34),rgba(26,31,24,0))}
.marchio img{width:42px;height:42px;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.18),inset 0 0 0 .5px rgba(255,255,255,.2)}
.barra-centro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none;white-space:nowrap}
.barra-nome{font:700 13px/1 var(--font-testo);letter-spacing:.24em;text-transform:uppercase;color:var(--accento)}
.barra-centro .barra-titolo{position:static;height:auto;transform:translateY(-3px);font:500 15px/1.1 var(--font-titoli);color:var(--tenue);opacity:0;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.barra-app.con-titolo .barra-centro .barra-titolo{opacity:1;transform:none}
.barra-centro .barra-titolo:empty{display:none}
.tondo.vetro{width:44px;height:44px}

/* ===== Adesso: tre moduli. In cima ora e data a sinistra, chi è in casa a destra ===== */
.riga-data{align-items:center}
.ora-data{display:flex;flex-direction:column;gap:6px;min-width:0}
.ora-data .orologio{text-align:left;line-height:.92;font-size:clamp(64px,6.6vw,104px)}
.riga-data{flex-wrap:wrap;row-gap:12px}
.ora-data .data{flex-direction:row;padding:0;font-size:21px;white-space:nowrap}
.persone{display:flex;gap:14px;flex:none}
.persone .persona{font-size:15px;gap:5px}
.persone .persona span{width:46px;height:46px;font-size:19px;background:var(--chip);color:var(--inchiostro)}
.persone .persona.dentro{color:var(--accento);font-weight:700}
.persone .persona.dentro span{background:var(--accento);color:var(--su-accento)}
.persone .persona.fuori span{background:transparent;border:1.5px solid var(--tenue);color:var(--tenue)}
.persone .persona.ignoto span{background:transparent;border:1.5px dashed var(--tenue);color:var(--tenue)}

/* In casa: caratteri più grandi; i consumi in una riga con il fulmine */
.in-casa-testa h2,.meteo .in-casa-testa h2{font:600 23px var(--font-titoli)}
.in-casa-testa .tenue{font-size:17px}
.stanze{font-size:19px;gap:8px 18px}
.energia-casa{display:flex;align-items:center;gap:8px;font-size:18px;margin-top:4px}
.energia-casa b{font-size:20px}
.energia-casa:not(:empty)::after{margin-left:auto;font-size:22px}
.energia-icona{display:grid;place-items:center;color:#E3A33A}
.energia-icona svg{width:22px;height:22px;fill:currentColor;stroke:none}

/* Fuori: adesso, poi oggi e domani in due barre (JustMeteo), poi il sole e la luna (MoonSky) */
.meteo{gap:14px}
.meteo .in-casa-testa .tenue{font-size:15px}
.meteo-temp{font-size:48px}
.meteo-sensore:empty{display:none}
.meteo-giorni{display:flex;flex-direction:column;gap:8px}
/* Oggi e domani come le righe dei giorni di JustMeteo: un riquadro ciascuno, la barra in alto e sotto minima e massima */
.giorno-riga{display:grid;grid-template-columns:80px 40px minmax(0,1fr) 66px;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;
  background:var(--riquadro,color-mix(in srgb,var(--inchiostro) 6%,transparent))}
.giorno-nome{display:flex;flex-direction:column;gap:2px}
.giorno-nome b{font:700 20px/1.1 var(--font-titoli);color:var(--inchiostro)}
.giorno-nome small{font-size:15px;color:var(--tenue)}
.giorno-riga .icona-meteo{display:grid;place-items:center}
.giorno-riga .icona-meteo svg{width:36px;height:36px;stroke-width:1.5}
.giorno-scala{display:flex;flex-direction:column;gap:6px;min-width:0}
.giorno-temp{display:flex;justify-content:space-between;align-items:baseline;font-variant-numeric:tabular-nums}
.giorno-min{font-size:18px;color:var(--tenue)}
.giorno-max{font-size:21px;font-weight:700;color:var(--inchiostro)}
.giorno-pioggia{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:18px;font-weight:600;color:var(--m-pioggia);font-variant-numeric:tabular-nums}
.giorno-pioggia svg{width:17px;height:17px}
.giorno-barra{position:relative;height:8px;border-radius:99px;background:var(--chip)}
.giorno-barra i{position:absolute;top:0;bottom:0;border-radius:99px;background:linear-gradient(90deg,#5AD1FF,#FFB84D)}
.giorno-barra .adesso{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px rgba(10,18,34,.55),0 1px 4px rgba(0,0,0,.3)}
body[data-sfondo="cielo"] .giorno-riga .icona-meteo{color:var(--inchiostro)}
.cielo-righe{display:flex;flex-direction:column;gap:10px;padding-top:12px;border-top:1px solid var(--linea)}
.cielo-riga{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;font-size:17px;color:var(--testo)}
.cielo-riga:empty{display:none}
.cielo-voce{display:inline-flex;align-items:center;gap:7px}
.cielo-voce b{color:var(--inchiostro);font-variant-numeric:tabular-nums}
.cielo-icona{display:grid;place-items:center}
.cielo-icona svg{width:24px;height:24px}
.cielo-icona.alba,.cielo-icona.tramonto{color:#E8A04A}
.cielo-nota{font-size:15px;color:var(--tenue)}
.disco-luna{width:22px;height:22px;margin:1px}
.disco-luna .ombra{fill:color-mix(in srgb,var(--tenue) 28%,transparent);stroke:none}
.disco-luna .luce{fill:#EDE3C4;stroke:none}
.meteo-luogo{font-size:15px}

@media (max-width:600px){
  .ora-data .orologio{font-size:72px;letter-spacing:-3px}
  .ora-data .data{font-size:19px}
  .persone{gap:10px}
  .frase{font-size:22px}
  .giorno-riga{grid-template-columns:66px 34px minmax(0,1fr) 58px;gap:10px;padding:12px 14px}
  .giorno-nome b{font-size:18px}
  .giorno-riga .icona-meteo svg{width:32px;height:32px}
  .giorno-pioggia{font-size:16px}
  .cielo-riga{font-size:16px;gap:4px 14px}
  /* barra in basso: icone più grandi; al centro il tasto per chiedere, grande, tondo e senza scritta */
  :root{--alto-barra:66px}
  .barra-pannelli button{font-size:14px;gap:4px}
  .barra-pannelli button svg{width:28px;height:28px}
  .cerchio-voce{width:56px;height:56px;margin:-14px 0 0;box-shadow:0 6px 18px color-mix(in srgb,var(--accento) 45%,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
  .barra-pannelli .tasto-voce .cerchio-voce svg{width:27px;height:27px;stroke-width:2}
}

/* Adesso senza la frase: i tre moduli respirano un po' di più, senza bordi né riquadri */
#casa .col-sinistra .in-casa,#casa .col-sinistra .meteo{margin-top:10px}

/* ===== Adesso, terza versione: persone a sinistra, ora a destra; Fuori centrato come Meteo di Apple;
   titoli delle sezioni piccoli e spaziati; alba, tramonto e luna in tre colonne senza riquadri ===== */
.ora-data{align-items:flex-end;text-align:right}
.ora-data .orologio{text-align:right}
.ora-data .data{justify-content:flex-end}
.etichetta{font:700 13.5px/1.2 var(--font-testo)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue)}
.in-casa-testa{align-items:center}
.meteo-ora{flex-direction:column;align-items:center;gap:2px;text-align:center}
.meteo-ora .meteo-temp{font:300 48px/1 var(--font-titoli);margin:6px 0 4px 10px}
.meteo-desc{display:flex;align-items:center;gap:6px;font-size:19px;color:var(--inchiostro)}
.meteo-desc .icona-meteo svg{width:24px;height:24px}
.meteo-ora .meteo-sensore{font-size:15px}
.meteo-ora .meteo-avviso{flex-basis:auto;margin-top:4px}
.cielo-colonne{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:6px;text-align:center}
.cielo-colonne:empty{display:none}
.cielo-colonna{display:flex;flex-direction:column;align-items:center;gap:3px}
.cielo-colonna .cielo-icona svg{width:30px;height:30px}
.cielo-colonna .disco-luna{width:28px;height:28px;margin:1px}
.cielo-colonna .etichetta{font-size:12px!important;letter-spacing:.12em;margin-top:4px}
.cielo-colonna b{font:600 21px/1.15 var(--font-titoli);color:var(--inchiostro);font-variant-numeric:tabular-nums}
.cielo-colonna .cielo-nota{font-size:14px;line-height:1.25}

/* ===== Fuori, quarta versione: titolo e tempo di adesso a sinistra, a destra l'arco dell'aria di JustMeteo.
   Icone del tempo di JustMeteo, piene e colorate; i colori cambiano con lo sfondo come là. ===== */
:root{--jm-sole:#F6AB1C;--jm-luna:#6B78C9;--jm-nube:#7B93A9;--jm-nube-fondo:rgba(123,147,169,.18);--jm-nube-retro:rgba(123,147,169,.5);--jm-pioggia:#1189D0;--jm-neve:#4F9ED0;--jm-lampo:#FFB84D;--alone-arco:rgba(255,255,255,.9)}
body.fondo-scuro{--jm-sole:#FFC857;--jm-luna:#DFE8FF;--jm-nube:#CFE0EE;--jm-nube-fondo:rgba(207,224,238,.16);--jm-nube-retro:rgba(207,224,238,.45);--jm-pioggia:#6FC9FF;--jm-neve:#DBEEFF;--alone-arco:rgba(0,0,0,.45)}
svg.jm{stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.meteo > .etichetta{align-self:flex-start}
.meteo-ora{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;text-align:left}
.meteo-adesso{display:flex;flex-direction:column;gap:2px;min-width:0}
.meteo-riga{display:flex;align-items:center;gap:10px}
.meteo-riga .icona-meteo svg{width:52px;height:52px}
.meteo-ora .meteo-temp{font:300 48px/1 var(--font-titoli);margin:0}
.meteo-desc{font-size:19px;color:var(--inchiostro)}
.aria{position:relative;width:150px;flex:none}
.aria[hidden]{display:none}
.aria svg{display:block;width:100%;height:auto}
.aria-alone{fill:var(--alone-arco)}
.aria-punto{fill:var(--inchiostro)}
.aria-valore{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;line-height:1}
.aria-valore strong{font:600 34px/1 var(--font-titoli);letter-spacing:-.03em;color:var(--inchiostro)}
.aria-valore span{font-size:14px;font-weight:700;margin-top:3px}
.giorno-riga .icona-meteo svg{width:38px;height:38px}
.cielo-colonna .cielo-icona.alba,.cielo-colonna .cielo-icona.tramonto{color:var(--jm-sole)}
.cielo-colonna .cielo-icona svg{stroke-width:1.8}
.sfera-luna{display:block;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 34% 30%,#FFF7DD 0%,#F5D58A 42%,#D9A441 100%);box-shadow:0 0 14px rgba(245,213,138,.45)}
.meteo-fonte{font-size:13px;text-align:center;opacity:.8}
@media (max-width:600px){.aria{width:132px}.aria-valore strong{font-size:30px}}

/* ===== Crepuscolo, più vicino all'avvio di Hue: quasi nero in alto, poi viola, rosa e pesca in fondo;
   il viola un po' più acceso a destra, il rosa più caldo a sinistra. Liscio: i veli che si muovono quasi spenti. ===== */
body[data-sfondo="crepuscolo"]{--fondo:#121014;--riquadro:rgba(255,255,255,.10);
  --fondo-img:radial-gradient(70% 38% at 100% 66%,rgba(92,52,140,.55),transparent 70%),
    radial-gradient(80% 36% at 0% 78%,rgba(232,110,160,.45),transparent 70%),
    linear-gradient(180deg,#111111 0%,#15121A 24%,#2A1834 40%,#4C2155 50%,#7E3A7C 62%,#B85C99 73%,#DE85A6 83%,#F1B3AA 92%,#F9D6B2 100%)}
body[data-sfondo="crepuscolo"] .atmosfera i:nth-child(n){opacity:.07}
/* il chiaro resta in fondo, dietro la barra: il testo sta sempre sul viola o sul nero */
body[data-sfondo="crepuscolo"]{--tenue:#D9C6DD;--testo:#F1E6F1;--riquadro:rgba(24,12,32,.30);
  --fondo-img:radial-gradient(70% 34% at 100% 72%,rgba(92,52,140,.5),transparent 70%),
    radial-gradient(80% 30% at 0% 84%,rgba(232,110,160,.4),transparent 70%),
    linear-gradient(180deg,#111111 0%,#141118 30%,#24152E 44%,#43204E 55%,#6E3270 66%,#A04F8C 77%,#D27BA2 87%,#EFAFAA 94%,#F9D6B2 100%)}

/* Fuori: l'arco dell'aria a sinistra, il tempo di adesso a destra */
.meteo-ora .aria{order:-1}
.meteo-adesso{align-items:flex-end;text-align:right}
/* …un po' più verso il centro, non attaccati ai bordi */
.meteo-ora{justify-content:space-evenly;gap:20px}

/* sotto l'arco il suo nome: chi lo vede la prima volta sa che è la qualità dell'aria */
.aria-nome{text-align:center;margin-top:6px;font-size:12px!important}
/* la nota della casa compare solo quando c'è qualcosa da dire (nucleo che non risponde, collegamento in corso) */
.nota-demo:empty{display:none}
.in-casa-piede:not(:has(.nota-demo:not(:empty))):not(:has(.pillola:not([hidden]):not(:empty))){display:none}
.aria .aria-valore{bottom:21px}

/* ===== Luci come tessere-cursore (proposta A, come Google Home): la tessera è il cursore.
   Spenta: vetro come i riquadri di JustMeteo. Accesa: chiara e calda, e la luce la riempie da sinistra
   fino all'intensità, del suo colore. Trascinando di lato il riempimento segue il dito. ===== */
.luci-plancia,.luci-plancia.per-stanza{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.luci-plancia.per-stanza{display:flex;flex-direction:column;gap:16px}
.stanza{padding:0;gap:8px}
.stanza h2{padding:0 2px}
.stanza-icone{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.luce{display:block;touch-action:pan-y}
.luce-tasto{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:1px;width:100%;min-height:92px;padding:10px 12px 11px;
  border-radius:18px;overflow:hidden;text-align:left;isolation:isolate;touch-action:pan-y;
  background:var(--riquadro,color-mix(in srgb,var(--inchiostro) 7%,transparent));color:var(--inchiostro);
  transition:transform .2s cubic-bezier(.2,.8,.2,1),background .25s ease}
.luce-tasto:active{transform:scale(.97)}
.luce.regolando .luce-tasto{transform:scale(1.02)}
.luce-riempi{position:absolute;inset:0 auto 0 0;z-index:-1;width:var(--livello,0%);background:transparent;transition:width .3s cubic-bezier(.2,.8,.2,1)}
.luce.regolando .luce-riempi{transition:none}
.luce-icona{position:absolute;top:10px;left:11px;color:var(--tenue)}
.luce-icona svg{width:24px;height:24px;stroke-width:1.7}
.luce-nome{max-width:100%;font-size:16px;font-weight:700;line-height:1.15;text-align:left;white-space:normal;-webkit-line-clamp:2}
.luce-stanza{margin:0;font-size:14px;text-align:left;color:var(--tenue)}
.luce-stanza.luce-avviso{color:var(--arancio)}
/* accesa: tessera chiara e calda, la luce più piena fino all'intensità; testo scuro ovunque */
.luce.accesa .luce-tasto{background:#FFF1D6;color:#3A2410;box-shadow:0 6px 20px rgba(246,170,60,.28)}
.luce.accesa .luce-riempi{background:linear-gradient(90deg,#FFC95C,#FFDF95)}
.luce.accesa .luce-icona{color:#8A5214}
.luce.accesa .luce-icona svg{fill:rgba(255,200,90,.55)}
.luce.accesa .luce-stanza{color:#7A4E1C;font-weight:700;font-variant-numeric:tabular-nums}
/* a colori: la stessa cosa nel colore vero della luce, schiarito perché il testo resti leggibile */
.luce.colorata .luce-tasto{background:color-mix(in srgb,rgb(var(--rgb)) 22%,#fff);color:#231A2A;box-shadow:0 6px 20px rgb(var(--rgb) / .3)}
.luce.colorata .luce-riempi{background:linear-gradient(90deg,color-mix(in srgb,rgb(var(--rgb)) 70%,#fff),color-mix(in srgb,rgb(var(--rgb)) 48%,#fff))}
.luce.colorata .luce-icona,.luce.colorata .luce-stanza{color:color-mix(in srgb,rgb(var(--rgb)) 60%,#000)}
.luce.colorata .luce-icona svg{fill:color-mix(in srgb,rgb(var(--rgb)) 40%,transparent)}
.luce.muta .luce-tasto{background:transparent;box-shadow:inset 0 0 0 1.5px var(--linea)}
.luce.muta .luce-nome{color:var(--tenue)}
.luce.in-corso .luce-icona{animation:lampeggia 1s ease-in-out infinite}
/* tasto delle regolazioni in alto a destra; sulle luci a colori, spente, un puntino arcobaleno */
.luce-altro{position:absolute;top:6px;right:6px;width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--tenue);z-index:2}
.luce-altro svg{width:20px;height:20px}
.luce.accesa .luce-altro{color:#8A5214}
.luce.colorata .luce-altro{color:color-mix(in srgb,rgb(var(--rgb)) 60%,#000)}
.luce.rgb:not(.accesa) .luce-altro::after{content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:conic-gradient(#ff4b3e,#ffc400,#3ddc84,#36a3ff,#a35bff,#ff4b3e)}
.luce-pct,.luce-barra{display:none}
/* modifica: le tessere tremano come le app; quella presa segue il dito */
.in-modifica .luce-tasto{animation:trema .26s ease-in-out infinite alternate}
.in-modifica .luce:nth-child(odd) .luce-tasto{animation-delay:-.13s}
.luce.sollevata .luce-tasto{animation:none;box-shadow:0 14px 30px rgba(0,0,0,.3)}
.luce-tasto:focus-visible{outline:3px solid var(--accento);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.in-modifica .luce-tasto{animation:none;box-shadow:inset 0 0 0 2px var(--accento)}}
@media (max-width:600px){
  .luci-plancia,.luci-plancia.per-stanza,.stanza-icone{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .luci-plancia.per-stanza{gap:14px}
  .luce-tasto{min-height:88px;padding:9px 10px 10px;border-radius:16px}
  .luce-nome{font-size:15px}
  .luce-stanza{font-size:13px}
}
.luce-stanza,.luce-stanza.luce-avviso{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.luce.rgb:not(.accesa) .luce-altro::after{top:3px;right:3px}
.luci-plancia.per-stanza .stanza{padding:0;gap:8px}

/* icone a due toni: la parte che fa luce appena velata da spenta, piena del colore della luce da accesa */
.luce-icona svg,.luce.accesa .luce-icona svg,.luce.colorata .luce-icona svg{width:26px;height:26px;fill:none;stroke-width:1.6}
.luce-icona .v{fill:color-mix(in srgb,var(--tenue) 16%,transparent)}
.luce.accesa .luce-icona .v{fill:#FFD27A}
.luce.colorata .luce-icona .v{fill:color-mix(in srgb,rgb(var(--rgb)) 75%,#fff)}
.luce.muta .luce-icona .v{fill:none}
.luce-icona svg,.luce.accesa .luce-icona svg,.luce.colorata .luce-icona svg{width:30px;height:30px;stroke-width:1.7}

/* ===== Regolazione di una luce, come in Hue: finestra scura, cerchio grande con il segnaposto da trascinare ===== */
.finestra-regola{width:min(440px,calc(100vw - 24px));padding:18px 18px 20px;border-radius:28px;background:#17181C;color:#F4F4F2;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.finestra-regola::backdrop{background:rgba(0,0,0,.55)}
.finestra-regola form{display:flex;flex-direction:column;gap:18px}
.regola-testa{display:flex;align-items:center;gap:12px}
.regola-titolo{flex:1;min-width:0}
.regola-titolo h2{font:600 22px var(--font-titoli);color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.regola-titolo p{font-size:15px;color:#A9ABB2}
.regola-fatto{height:38px;padding:0 16px;border:0;border-radius:19px;background:rgba(255,255,255,.12);color:#fff;font:700 15px var(--font-testo);letter-spacing:.04em;text-transform:uppercase}
.interruttore{position:relative;width:52px;height:32px;flex:none;border:0;border-radius:16px;background:rgba(255,255,255,.18);transition:background .2s ease}
.interruttore i{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.interruttore[aria-checked="true"]{background:#34C759}
.interruttore[aria-checked="true"] i{transform:translateX(20px)}
.interruttore:disabled{opacity:.4}
/* il cerchio: colori tutt'intorno e bianco al centro, oppure i bianchi dal caldo al freddo */
.ruota{position:relative;width:min(100%,340px);aspect-ratio:1;margin:0 auto;border-radius:50%;touch-action:none;cursor:crosshair;
  background:radial-gradient(closest-side,#fff,rgba(255,255,255,0)),conic-gradient(red,yellow,lime,cyan,blue,magenta,red);
  box-shadow:0 0 60px rgba(255,255,255,.08);transition:filter .3s ease}
.ruota[data-modo="bianco"]{background:var(--bianchi)}
.ruota[hidden]{display:none}
.ruota.spenta{filter:saturate(.6) brightness(.75)}
/* il segnaposto: una goccia bianca con dentro il colore scelto, la punta sul punto */
.ruota-perno{position:absolute;width:44px;height:44px;margin:-50px 0 0 -22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#F7F6F2;
  box-shadow:0 4px 14px rgba(0,0,0,.35);pointer-events:none;display:grid;place-items:center}
.ruota-perno i{width:26px;height:26px;border-radius:50%;background:var(--scelto,#fff);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.regola-piede{display:flex;align-items:center;justify-content:space-between;gap:12px}
.regola-modi{display:flex;gap:6px;padding:6px;border-radius:30px;background:rgba(255,255,255,.1)}
.regola-modi[hidden]{display:none}
.regola-modi button{width:46px;height:46px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center}
.regola-modi button[aria-checked="true"]{box-shadow:inset 0 0 0 2.5px #fff}
.regola-modi i{width:32px;height:32px;border-radius:50%}
.modo-colori{background:radial-gradient(closest-side,#fff,rgba(255,255,255,0)),conic-gradient(red,yellow,lime,cyan,blue,magenta,red)}
.modo-bianchi{background:linear-gradient(#FFB45C,#FFF4E2 60%,#DDEBFF)}
/* intensità: una pillola che si riempie seguendo il dito */
.regola-intensita{position:relative;flex:1;max-width:220px;height:56px;margin-left:auto;border-radius:28px;overflow:hidden;background:rgba(255,255,255,.12);
  display:flex;align-items:center;gap:8px;padding:0 18px;touch-action:none;cursor:ew-resize;isolation:isolate}
.regola-intensita[hidden]{display:none}
.regola-intensita .riempi{position:absolute;inset:0 auto 0 0;z-index:-1;width:var(--livello,0%);background:linear-gradient(90deg,#C9C9C4,#F2F1EC)}
.regola-intensita svg{width:24px;height:24px;color:#1A1A1A;mix-blend-mode:difference;filter:invert(1)}
.regola-intensita b{margin-left:auto;font:700 16px var(--font-testo);font-variant-numeric:tabular-nums;color:#fff;mix-blend-mode:difference}
#regola-accesa::after{content:none}
/* luce che regola solo l'intensità: al posto del cerchio un cursore grande e verticale, come nel Centro di Controllo */
.solo-intensita .regola-piede{justify-content:center;padding:6px 0 4px}
.solo-intensita .regola-intensita{flex:none;width:132px;max-width:none;height:min(52vh,330px);margin:0 auto;border-radius:36px;
  flex-direction:column-reverse;justify-content:flex-start;padding:22px 0;gap:10px;cursor:ns-resize}
.solo-intensita .regola-intensita .riempi{inset:auto 0 0 0;width:auto;height:var(--livello,0%);background:linear-gradient(0deg,#FFC95C,#FFE6A8)}
.solo-intensita .regola-intensita svg{width:30px;height:30px}
.solo-intensita .regola-intensita b{margin:0;font-size:20px}

/* icona e numero dell'intensità: chiari sul grigio, scuri sulla luce */
.regola-intensita svg,.regola-intensita b{mix-blend-mode:normal;filter:none;color:#F4F4F2}
.regola-intensita.icona-coperta svg,.regola-intensita.numero-coperto b{color:#4A2C0E}

/* la finestra di regolazione occupa tutto lo schermo, trasparente: il riquadro scuro è il modulo al centro */
.finestra-regola{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;inset:0;padding:12px;border-radius:0;background:rgba(0,0,0,.5);box-shadow:none}
.finestra-regola[open]{display:grid;place-items:center}
.finestra-regola::backdrop{background:transparent}
.finestra-regola form{width:min(440px,100%);padding:18px 18px 20px;border-radius:28px;background:#17181C;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.finestra-regola{cursor:pointer}.finestra-regola form{cursor:auto}
.regola-velo{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;background:transparent;cursor:default;-webkit-tap-highlight-color:transparent}
.finestra-regola form{position:relative;z-index:1}

/* ordinamento delle luci: l'icona delle frecce e due scelte, Auto e Manuale */
.luci-ordine{display:inline-flex;align-items:center;gap:6px;color:var(--tenue)}
.luci-ordine[hidden]{display:none}
.luci-ordine > svg{width:24px;height:24px}
#modifica-luci[aria-checked="true"]{min-width:76px}
/* «Spegni tutto» in alto, sulla stessa riga del titolo «2 luci accese» */
.luci-testa{align-items:flex-start}
.luci-testa .pillola.spegni{margin-top:-2px}
/* caratteri della pagina Luci alla grandezza di Apple: 17 pt per i testi e i comandi, mai sotto i 15 */
@media (max-width:600px){
  .luce-nome{font-size:17px}
  .luce-stanza{font-size:15px}
  .luci-testa .pillola,.luci-comandi .pillola{height:40px;font-size:17px}
  #luci .segmentato button{font-size:17px;padding:8px 13px}
  #luci-sotto{font-size:17px}
}

/* ===== Comandi: elenco delle parti della casa, come le Impostazioni dell'iPhone ===== */
.sezioni{display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:var(--riquadro,color-mix(in srgb,var(--inchiostro) 6%,transparent))}
.sezione{display:flex;align-items:center;gap:14px;min-height:60px;padding:7px 14px;text-decoration:none;color:var(--inchiostro);position:relative}
.sezione + .sezione::before{content:"";position:absolute;top:0;left:66px;right:0;height:1px;background:var(--linea)}
.sezione:active{background:color-mix(in srgb,var(--inchiostro) 8%,transparent)}
.sezione-icona{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;color:#fff}
.sezione-icona svg{width:22px;height:22px;stroke-width:1.9}
.s-tapparelle{background:#3E8ED0}.s-clima{background:#E8743B}.s-condizionatore{background:#3BA0C8}.s-telecamere{background:#5E6670}
.s-dispositivi{background:#3F9B6E}.s-consumi{background:#E3A33A}.s-media{background:#9B5BD0}
.s-consumi svg{fill:#fff;stroke:none}
.sezione-testo{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sezione-testo b{font-size:17px}
.sezione-testo small{font-size:15px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sezione-testo small:empty{display:none}
.sezione-freccia{width:20px;height:20px;color:var(--tenue);flex:none}
/* nella schermata Tapparelle il titolo del riquadro è già quello della pagina */
#tapparelle-schermo .tapparelle .in-casa-testa h2{display:none}

/* ===== Riscaldamento e clima: una riga per zona, la temperatura di adesso e quella voluta con − e + ===== */
.clima-zone{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.clima-zona{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;
  background:var(--riquadro,color-mix(in srgb,var(--inchiostro) 6%,transparent))}
.clima-zona.accesa{box-shadow:inset 4px 0 0 #E8743B}
.clima-zona.accesa.fresca{box-shadow:inset 4px 0 0 #3E8ED0}
.clima-zona.muta{opacity:.6}
.clima-testo{display:flex;flex-direction:column;min-width:0}
.clima-testo b{font-size:18px}
.clima-modo{font-size:15px;color:var(--tenue)}
.clima-zona.accesa .clima-modo{color:#C9612C;font-weight:700}
.clima-zona.accesa.fresca .clima-modo{color:#2F7AB8}
.clima-adesso,.clima-voluta{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.clima-gradi{font:300 30px var(--font-titoli);font-variant-numeric:tabular-nums}
.clima-adesso small,.clima-voluta small{font-size:13px}
.clima-obiettivo{display:flex;align-items:center;gap:8px}
.clima-voluta b{font-size:19px;font-variant-numeric:tabular-nums;min-width:46px;text-align:center}
.clima-tasto{width:40px;height:40px;border-radius:50%;border:0;background:var(--chip);color:var(--inchiostro);font-size:22px;line-height:1}
.clima-tasto:disabled{opacity:.4}
@media (max-width:600px){.clima-zona{grid-template-columns:minmax(0,1fr) auto;row-gap:10px}.clima-obiettivo{grid-column:1/-1;justify-content:flex-end}}

/* ===== Telecamere ===== */
.telecamere-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.telecamera{display:flex;flex-direction:column;gap:8px}
.telecamera-quadro{aspect-ratio:16/9;border-radius:16px;display:grid;place-items:center;color:var(--tenue);
  background:var(--riquadro,color-mix(in srgb,var(--inchiostro) 7%,transparent))}
.telecamera-quadro svg{width:36px;height:36px}
.telecamera-testo{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.telecamera-testo b{font-size:17px}
.telecamera-stato{font-size:15px;color:var(--tenue)}
.telecamera-stato.registra{color:#D9473F;font-weight:700}
.telecamera-stato.registra::before{content:"● "}
.vuoto-sezione{font-size:17px}
/* zona del clima più compatta: a sinistra nome e gradi di adesso, a destra la temperatura voluta */
.clima-zona,.clima-zona:is(*){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"testo obiettivo" "adesso obiettivo";row-gap:0;padding:12px 14px 12px 16px}
.clima-testo{grid-area:testo;flex-direction:row;align-items:baseline;gap:8px}
.clima-adesso{grid-area:adesso;flex-direction:row;align-items:baseline;gap:6px}
.clima-gradi{font-size:28px}
.clima-obiettivo{grid-area:obiettivo;grid-column:auto!important;justify-content:flex-end}

/* barra in basso a sette voci: Casa, Comandi, Luci · Chiedi · Musica, News, Avvisi */
@media (max-width:600px){
  .barra-pannelli{grid-template-columns:repeat(7,minmax(0,1fr));padding:0 2px var(--sotto-barra)}
  .barra-pannelli button{font-size:12.5px;gap:4px;letter-spacing:-.01em}
  .barra-pannelli button svg{width:26px;height:26px}
  .cerchio-voce{width:52px;height:52px}
  #notizie .card.notizie{padding-top:4px}
}
/* «FUORI» più vicino all'arco dell'aria e alla temperatura (l'arco ha già il suo margine in alto) */
.meteo > .etichetta + .meteo-ora{margin-top:-12px}

/* ===== Ritorno come MoonSky: «‹ Casa» in alto a sinistra al posto dell'icona; i vecchi tasti «torna» spariscono ===== */
.barra-indietro{display:inline-flex;align-items:center;gap:2px;height:44px;padding-right:8px;text-decoration:none;color:var(--accento);font:600 19px var(--font-titoli);flex:none}
.barra-indietro[hidden]{display:none}
.barra-indietro svg{width:26px;height:26px;stroke-width:2.2}
body.pagina-interna .marchio{display:none}
.testa-schermo .torna{display:none}
.testa-schermo:not(:has(> :not(.torna):not(:empty))){display:none}

/* ===== Più spazio utile: fascia in alto più bassa, meno vuoti fra i moduli ===== */
:root{--alto-testata:calc(54px + env(safe-area-inset-top,0px))}
body.demo{--alto-testata:calc(86px + env(safe-area-inset-top,0px))}
.marchio img{width:38px;height:38px;border-radius:11px}
.tondo.vetro{width:40px;height:40px}
@media (max-width:600px){
  #casa{padding-top:4px}
  #casa .col-sinistra{gap:10px}
  #casa .col-sinistra .in-casa,#casa .col-sinistra .meteo{margin-top:2px}
  .card:not(.scura){padding:2px 0}
  .schermo:not(#casa):not(.notte){padding-top:8px}
}

/* ===== Fuori più grande: arco dell'aria e tempo di adesso ===== */
.aria{width:176px}
.aria-valore strong{font-size:40px}
.aria-valore span{font-size:16px}
.meteo-riga .icona-meteo svg{width:64px;height:64px}
.meteo-ora .meteo-temp{font-size:62px}
.meteo-desc{font-size:20px}
@media (max-width:600px){.aria{width:168px}.aria-valore strong{font-size:38px}}

/* ===== Alba, tramonto e luna in un riquadro come Oggi e Domani, e più colore sugli sfondi chiari ===== */
.cielo-colonne{padding:14px 8px;border-radius:18px;background:var(--riquadro,color-mix(in srgb,var(--inchiostro) 6%,transparent))}
body:not(.fondo-scuro){--jm-sole:#E8890C;--jm-nube:#6E8499;--jm-nube-fondo:rgba(110,132,153,.22)}
body:not(.fondo-scuro) .cielo-colonna .cielo-icona.alba,body:not(.fondo-scuro) .cielo-colonna .cielo-icona.tramonto{color:#E07B0C}
body:not(.fondo-scuro) #aria-giudizio{filter:brightness(.72) saturate(1.4)}
body:not(.fondo-scuro) .cielo-colonna .etichetta{color:var(--testo)}
body.pagina-interna .barra-nome{display:none}
/* sugli sfondi chiari l'alone verde non sta più in cima: sotto l'ora del telefono il colore è lo stesso della barra del browser */
body:not(.fondo-scuro) .atmosfera i:nth-child(1){top:22vh}

/* barra in basso a cinque: Comandi, Luci · Chiedi · Musica, Avvisi */
@media (max-width:600px){
  .barra-pannelli{grid-template-columns:repeat(5,minmax(0,1fr));padding:0 6px var(--sotto-barra)}
  .barra-pannelli button{font-size:13.5px}
  .barra-pannelli button svg{width:28px;height:28px}
  .cerchio-voce{width:56px;height:56px}
}

/* ===== Consumi: adesso in grande, quattro riquadri, il grafico, in fondo la fonte ===== */
.consumi-adesso{display:flex;align-items:center;gap:10px;margin-top:-4px}
.consumi-adesso[hidden]{display:none}
.consumi-adesso .energia-icona svg{width:34px;height:34px}
.consumi-adesso b{font:300 52px/1 var(--font-titoli);font-variant-numeric:tabular-nums}
.consumi-adesso .tenue{font-size:17px;align-self:flex-end;padding-bottom:6px}
.consumi-sintesi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.consumo-riquadro{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:18px;background:var(--riquadro,color-mix(in srgb,var(--inchiostro) 6%,transparent))}
.consumo-riquadro .etichetta{font-size:12.5px!important}
.consumo-valore{font-size:16px;color:var(--tenue)}
.consumo-valore b{font:600 28px/1.15 var(--font-titoli);color:var(--inchiostro);font-variant-numeric:tabular-nums}
.consumo-nota{font-size:15px;line-height:1.3;color:var(--testo)}
.consumo-riquadro.piu .consumo-nota{color:#D9733A;font-weight:700}
.consumo-riquadro.meno .consumo-nota{color:#2E9B6E;font-weight:700}
.grafico-consumi{padding:14px 14px 10px!important;border-radius:18px!important;background:var(--riquadro,color-mix(in srgb,var(--inchiostro) 6%,transparent))!important}
.grafico-consumi h2{font-size:18px}
#consumi-totale{font-size:15px;font-weight:600;color:var(--tenue)}
#consumi-valore{font-size:15px}
.consumi-fonte{font-size:13px;text-align:center}
#consumi .testa-schermo{display:none}
/* arco e tempo di adesso affiancati anche sui telefoni stretti: misure un po' più contenute */
.meteo-ora{flex-wrap:nowrap}
.aria{width:150px}
.aria-valore strong{font-size:34px}
.meteo-riga .icona-meteo svg{width:50px;height:50px}
.meteo-ora .meteo-temp{font-size:52px}
.meteo-desc{font-size:18px}
@media (max-width:600px){.aria{width:142px}.aria-valore strong{font-size:32px}.meteo-adesso{min-width:0}}
/* pagina Casa sul telefono: caratteri un po' più contenuti (restano a 15–17 pt per il testo) */
@media (max-width:600px){
  .ora-data .orologio{font-size:62px}
  .ora-data .data{font-size:17px}
  .persone .persona span{width:40px;height:40px;font-size:17px}
  .persone .persona{font-size:14px}
  .stanze{font-size:17px}
  .in-casa-testa .tenue{font-size:15px}
  .energia-casa{font-size:16px}
  .energia-casa b{font-size:17px}
  .meteo-ora .meteo-temp{font-size:46px}
  .meteo-riga .icona-meteo svg{width:44px;height:44px}
  .meteo-desc{font-size:16px}
  .meteo-ora .meteo-sensore{font-size:14px}
  .aria{width:128px}
  .aria-valore strong{font-size:28px}
  .aria-valore span{font-size:14px}
  .giorno-nome b{font-size:17px}
  .giorno-nome small{font-size:14px}
  .giorno-max{font-size:18px}
  .giorno-min{font-size:16px}
  .giorno-pioggia{font-size:15px}
  .giorno-riga .icona-meteo svg{width:30px;height:30px}
  .cielo-colonna b{font-size:18px}
  .cielo-colonna .cielo-nota{font-size:13px}
}
/* tessere delle luci: caratteri come prima (nome 15, stato 13) e tessera un po' più alta,
   così anche un nome su due righe («Balcone Camera») sta sotto l'icona senza coprirla */
@media (max-width:600px){
  .luce-nome{font-size:15px}
  .luce-stanza{font-size:13px}
  .luce-tasto{min-height:104px}
}
.luce-nome{overflow-wrap:normal;word-break:normal;-webkit-hyphens:manual;hyphens:manual}
@media (max-width:600px){.luce-nome.lungo{font-size:13.5px;letter-spacing:-.01em}}

/* ===== Elettricità: contatore dal vivo, curva delle 24 ore, ripartizione, salute dell'impianto ===== */
.contatore{display:flex;flex-direction:column;align-items:center;gap:6px}
.contatore[hidden]{display:none}
.contatore-arco{position:relative;width:min(300px,82vw)}
.contatore-arco svg{width:100%;height:auto;display:block;overflow:visible}
.contatore-valore{position:absolute;left:0;right:0;bottom:2px;display:flex;flex-direction:column;align-items:center}
.contatore-valore strong{font:300 52px/1 var(--font-titoli);letter-spacing:-.03em;color:var(--inchiostro);font-variant-numeric:tabular-nums}
.contatore-valore span{font-size:15px;color:var(--tenue);margin-top:6px}
.contatore-margine{font-size:16px;color:var(--testo);text-align:center;margin-top:4px}
.contatore-vivo{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--tenue)}
.punto-vivo{width:8px;height:8px;border-radius:50%;background:var(--tenue);opacity:.5}
.contatore.in-diretta .punto-vivo{background:#4FE0A4;opacity:1;animation:vivo 2s ease-in-out infinite}
@keyframes vivo{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.contatore.in-diretta .punto-vivo{animation:none}}
.grafico-tocco svg{touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.grafico-linea .linea{fill:none;stroke:var(--accento);stroke-width:1.6;stroke-linejoin:round}
.grafico-linea .area{fill:var(--accento);opacity:.2}
.grafico-linea .limite{stroke:#FF6F7D;stroke-dasharray:4 4;stroke-width:1}
.grafico-linea .cursore{stroke:var(--inchiostro);stroke-width:1;opacity:.6}
.grafico-linea .cursore-punto{fill:var(--inchiostro)}
svg [hidden]{display:none}
.ripartizione-barra{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px}
.rip-luci{background:#FFD24D}.rip-prese{background:#5AD1FF}.rip-resto{background:color-mix(in srgb,var(--tenue) 55%,transparent)}
.ripartizione-legenda{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:15px}
.ripartizione-legenda li{display:flex;align-items:center;gap:6px}
.pallino{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}
.elenco-carichi,.righe-impianto{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.elenco-carichi li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--linea);font-size:16px}
.elenco-carichi b{font-variant-numeric:tabular-nums;white-space:nowrap}
.riga-impianto{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--linea)}
.riga-impianto:first-child{border-top:0}
.riga-testo{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.riga-testo b{font-size:16.5px}
.riga-testo small{font-size:14px;color:var(--tenue);line-height:1.3}
.riga-valore{font:500 18px var(--font-titoli);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--inchiostro)}
.tono-ok .pallino{background:#4FE0A4}.tono-attenzione .pallino{background:#FFD24D}.tono-allarme .pallino{background:#FF6F7D}
.tono-info .pallino{background:color-mix(in srgb,var(--tenue) 60%,transparent)}


.bollino-fm{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;padding:1px 6px;margin-right:6px;border-radius:6px;background:var(--accento);color:var(--su-accento);vertical-align:1px}


/* ===== Musica (rifatta il 10/10): una scheda In ascolto, un campo solo, una riga di filtri ===== */
.mini-lettore[hidden]{display:none}
#musica{--rq:var(--riquadro,color-mix(in srgb,var(--inchiostro) 7%,transparent))}
#musica .musica-griglia{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:820px){#musica .musica-griglia{grid-template-columns:minmax(0,1fr);gap:18px}}
.in-ascolto{background:var(--rq);border-radius:24px;padding:18px;display:flex;flex-direction:column;gap:16px;color:var(--inchiostro);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.ia-testa{display:flex;align-items:center;gap:14px;min-width:0}
#musica .copertina{width:72px;height:72px;aspect-ratio:auto;flex:none;border-radius:16px;background:var(--chip);color:var(--inchiostro);display:flex;align-items:center;justify-content:center;overflow:hidden}
#musica .copertina svg{width:34px;height:34px;stroke-width:1.5}
#musica .copertina img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;background:#fff;padding:6px;border-radius:0}
.ia-testo{min-width:0;display:flex;flex-direction:column;gap:2px}
#musica .lettore-titolo{font:600 21px/1.2 var(--font-titoli);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lettore-stato{font-size:15px;color:var(--tenue);margin:0}
.ia-comandi{display:flex;align-items:center;justify-content:center;gap:28px}
.ia-tasto{width:48px;height:48px;border-radius:50%;border:0;background:transparent;color:var(--inchiostro);display:flex;align-items:center;justify-content:center}
.ia-tasto svg{width:24px;height:24px}
.ia-play{width:64px;height:64px;border-radius:50%;border:0;background:var(--accento);color:var(--su-accento);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.18)}
.ia-play svg{width:28px;height:28px}
.ia-volume{display:flex;align-items:center;gap:10px}
.ia-vol{width:40px;height:40px;flex:none;border-radius:50%;border:0;background:var(--chip);color:var(--inchiostro);display:flex;align-items:center;justify-content:center}
.ia-vol svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#musica .ia-volume input{flex:1;min-width:0;height:32px;accent-color:var(--accento)}
.ia-vol-valore{min-width:3ch;text-align:right;font-size:15px;color:var(--tenue);font-variant-numeric:tabular-nums}
.ia-uscita{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--linea);padding-top:14px}
.ia-uscita>span:first-child{font-size:15px;color:var(--tenue);white-space:nowrap}
.ia-scelta{position:relative;min-width:0}
.ia-scelta select{-webkit-appearance:none;appearance:none;max-width:100%;height:40px;border:0;border-radius:20px;background:var(--chip);color:var(--inchiostro);padding:0 36px 0 16px;font:600 16px var(--font-testo);text-overflow:ellipsis}
.ia-scelta svg{position:absolute;right:12px;top:50%;width:16px;height:16px;transform:translateY(-50%);pointer-events:none;fill:none;stroke:currentColor;stroke-width:2}
#musica .stazioni{display:flex;flex-direction:column;gap:12px;min-width:0}
#musica .cerca-radio{position:relative}
#musica .cerca-radio svg{position:absolute;left:16px;top:50%;width:20px;height:20px;transform:translateY(-50%);fill:none;stroke:var(--tenue);stroke-width:2;stroke-linecap:round;pointer-events:none}
#musica .cerca-radio input{width:100%;height:48px;border-radius:24px;border:0;background:var(--chip);color:var(--inchiostro);padding:0 18px 0 46px;font-size:17px}
.proposta-radio{height:46px;border:0;border-radius:23px;background:var(--accento);color:var(--su-accento);font:600 16px var(--font-testo);padding:0 18px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proposta-radio[hidden]{display:none}
.filtri-radio{display:flex;gap:4px;background:var(--chip);border-radius:14px;padding:4px}
.filtro{flex:1;min-width:0;height:38px;border:0;border-radius:10px;background:transparent;color:var(--testo);font:600 15px var(--font-testo);display:flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.filtro[aria-pressed="true"]{background:var(--superficie);color:var(--inchiostro);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.filtro-menu{position:relative}
.filtro-menu span{overflow:hidden;text-overflow:ellipsis}
.filtro-menu .freccia svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;display:block}
.filtro-menu select{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;-webkit-appearance:none;appearance:none;cursor:pointer}
.stazioni-stato{margin:0;font-size:15px}
.stazioni-stato:empty{display:none}
#musica .lista-stazioni{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px;overflow:visible;min-height:0}
#musica .lista-stazioni:empty{display:none}
#musica .stazione{background:var(--rq);border:0;border-radius:16px;padding:4px 6px 4px 8px}
#musica .stazione.attiva{box-shadow:inset 0 0 0 2px var(--accento)}
#musica .stazione.trovata{flex-wrap:wrap;gap:8px;padding:10px 12px}
.trovata-testo{flex:1 1 200px;display:flex;flex-direction:column;gap:2px;min-width:0}
.nome-trovata{font-weight:700;font-size:16px;border:0;border-bottom:1px solid var(--linea);background:transparent;color:var(--inchiostro);padding:4px 0}
.trovata-tasti{display:flex;gap:6px}
.fonte-radio{margin:6px 0 0;font-size:13px;color:var(--tenue);text-align:center}

/* ===== Scene illustrate (scene.js): sullo strato fisso dietro la pagina, così su iPhone coprono sempre lo schermo
   intero (anche sotto l'ora) e non si allungano con la pagina. Un velo leggero tiene leggibili le scritte. ===== */
body[data-sfondo="scena"]{--fondo:#0C0E18;--fondo-img:none;--superficie:rgba(12,14,24,.58);--chip:rgba(255,255,255,.13);--linea:rgba(255,255,255,.14);
  --riquadro:rgba(10,12,22,.42);--accento:var(--accento-scena,#62B8A2);--su-accento:#120E1C;background-image:none}
body[data-sfondo="scena"] .atmosfera{display:block;background-image:linear-gradient(180deg,rgba(6,8,16,.42) 0%,rgba(6,8,16,.12) 32%,rgba(6,8,16,.18) 60%,rgba(6,8,16,.55) 100%),var(--scena);background-size:cover;background-position:center}
body[data-sfondo="scena"] .atmosfera i{display:none}
/* scelta dello sfondo come in Hue: gruppi con una fila di schede da scorrere */
.griglia-sfondi{display:flex;flex-direction:column;gap:18px;grid-template-columns:none}
.gruppo-sfondi h3{font:700 13px var(--font-testo);letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);margin:0 0 8px}
.fila-sfondi{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,42%);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;-webkit-overflow-scrolling:touch}
@media (min-width:700px){.fila-sfondi{grid-auto-columns:minmax(170px,24%)}}
.fila-sfondi .sfondo-scelta{position:relative;scroll-snap-align:start;padding:0;border:2px solid transparent;border-radius:16px;overflow:hidden}
.fila-sfondi .sfondo-scelta[aria-pressed="true"]{border-color:var(--accento)}
.fila-sfondi .anteprima{display:block;height:96px;border:0;border-radius:14px;background-size:cover;background-position:center 62%}
.sfondo-nome{position:absolute;left:10px;right:8px;bottom:8px;font-weight:700;font-size:15px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sfondo-scelta.chiara .sfondo-nome{color:#2B2A26;text-shadow:none}

/* In ascolto: nome (PS), brano (RT), genere (PTY); con una copertina vera la foto diventa grande */
.ia-brano{margin:2px 0 0;font-size:16px;line-height:1.3;color:var(--inchiostro);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ia-brano b{font-weight:700}
.ia-info{margin:4px 0 0;font-size:14px;color:var(--tenue);display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
.ia-info:empty{display:none}
.ia-info .bollino-fm{margin-right:0}
.in-ascolto.con-foto .ia-testa{flex-direction:column;align-items:stretch;text-align:left}
#musica .in-ascolto.con-foto .copertina{width:100%;height:auto;aspect-ratio:1;max-height:320px;border-radius:20px}
#musica .in-ascolto.con-foto .copertina img{object-fit:cover;padding:0;background:transparent}
.ia-testo-tasto{align-self:flex-start;display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:0;border-radius:18px;background:var(--chip);color:var(--inchiostro);font:600 15px var(--font-testo)}
.ia-testo-tasto[hidden]{display:none}
.ia-testo-tasto svg{width:18px;height:18px}
.testo-canzone{white-space:pre-line;font-size:18px;line-height:1.6;color:var(--inchiostro);max-height:62vh;overflow:auto;padding:4px 2px 12px}
.fonte-testo{font-size:13px;margin-top:8px}
.ia-programma{margin:2px 0 0;font-size:14px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ia-dopo{margin:-4px 0 0;font-size:14px;color:var(--tenue)}
.ia-programma[hidden],.ia-dopo[hidden]{display:none}

/* ===== Home e testata (10/10, richieste di Marco) ===== */
/* 1. «Sabato 10 ottobre»: un carattere solo, un poco più grande */
.data{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;column-gap:.3em;font:600 22px/1.15 var(--font-titoli);color:var(--inchiostro)}
.data-giorno,.data-mese{font:inherit;color:inherit}
/* 2-3. senza i titoli «In casa» e «Fuori»: l'umidità resta a destra, l'arco dell'aria è più grande */
.in-casa-testa{justify-content:flex-end}
.meteo > .etichetta + .meteo-ora{margin-top:0}
.aria{width:200px}
.aria-valore strong{font-size:44px}
.aria-valore span{font-size:17px}
@media (max-width:600px){.aria{width:184px}.aria-valore strong{font-size:42px}}
.aria-nome{font-size:13px!important;margin-top:4px}
/* 6. il nome del sito sempre alla stessa altezza: il nome della pagina compare sotto senza spostarlo */
.barra-centro{display:block;text-align:center}
.barra-centro .barra-nome{display:block}
.barra-centro .barra-titolo{position:absolute;left:50%;top:calc(100% + 4px);transform:translate(-50%,-3px)}
.barra-app.con-titolo .barra-centro .barra-titolo{transform:translate(-50%,0)}
/* 7. il menu grande quanto l'icona di JustDomu, con le righe più grandi */
.tondo.vetro{width:42px;height:42px}
.marchio img{width:42px;height:42px}
.tondo.vetro svg{width:26px;height:26px;stroke-width:2}
/* Fuori: tempo di adesso e arco dell'aria più vicini al centro; il sensore su due righe («Il sensore» / «segna 18,7°»);
   senza sensore esterno l'icona del tempo si fa più grande */
.meteo-ora{justify-content:center;gap:clamp(14px,6vw,40px)}
.meteo-sensore span{display:block}
.meteo:not(.con-sensore) .meteo-riga .icona-meteo svg{width:64px;height:64px}
@media (max-width:600px){.meteo:not(.con-sensore) .meteo-riga .icona-meteo svg{width:58px;height:58px}}
/* «Sto uscendo» è il primo dei Comandi */
#casa .col-destra > .tasto-esco{margin-top:0}
/* Musica: il muto in fondo al cursore; sull'iPhone (volume solo dai tasti) una nota al posto del cursore */
.ia-volume [hidden]{display:none!important}
.ia-muto[aria-pressed="true"]{background:var(--accento);color:var(--su-accento)}
.ia-vol-nota{flex:1;min-width:0;font-size:15px;color:var(--tenue)}
/* Luci per stanza: una riga leggera fra una stanza e l'altra, il nome della stanza ben leggibile */
.luci-plancia.per-stanza .stanza + .stanza{border-top:1px solid var(--linea);padding-top:14px}
.luci-plancia.per-stanza .stanza h2{font:600 19px var(--font-titoli);letter-spacing:0;text-transform:none;color:var(--inchiostro);padding:0 2px}
.luci-plancia.per-stanza .stanza h2 .accese{font:500 15px var(--font-testo)}
.luci-plancia.per-stanza .stanza + .stanza{border-top-color:color-mix(in srgb,var(--inchiostro) 16%,transparent);border-radius:0}
/* «11 luci in 6 stanze» su una riga accanto a «Spegni tutto» */
.luci-titolo{font-size:clamp(22px,6.4vw,34px);white-space:nowrap}
/* Telecamere: la foto di adesso, a richiesta */
.telecamera-quadro{overflow:hidden}
.telecamera-quadro img{width:100%;height:100%;object-fit:cover;display:block}
.telecamera-testo{align-items:center}
.telecamera-guarda{height:36px;padding:0 16px;font-size:15px;font-weight:600;flex:none}
/* Musica: «Testo» a destra; «Suona su» con l'icona per più dispositivi in fondo; la finestra con le spunte */
.ia-testo-tasto{align-self:flex-end}
.ia-uscita .ia-scelta{margin-left:auto}
.ia-casse svg{width:22px;height:22px}
.scelta-casse{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.scelta-casse li + li{border-top:1px solid var(--linea)}
.scelta-cassa{display:flex;align-items:center;gap:14px;min-height:54px;font-size:17px;font-weight:600;cursor:pointer}
.scelta-cassa input{width:22px;height:22px;accent-color:var(--accento);flex:none}
.scelta-cassa small{margin-left:auto;font-weight:400}
.scelta-cassa.muta{opacity:.55}
.finestra-casse{width:min(440px,calc(100vw - 32px))}
@media (max-width:600px){
  .ia-uscita{gap:8px}
  .ia-scelta select{font-size:15px;padding:0 28px 0 12px}
  .ia-scelta svg{right:9px}
}
/* Telecamere: nome e stato su due righe, a destra Foto e Video */
.telecamera-nome{display:flex;flex-direction:column;min-width:0}
.telecamera-nome .telecamera-stato{font-size:14px}
.telecamera-tasti{display:flex;gap:8px;flex:none}
.telecamera-guarda{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 14px}
.telecamera-guarda svg{width:18px;height:18px}
.telecamera-guarda[disabled]{opacity:.55}
.telecamera-quadro{position:relative}
.telecamera-quadro.dal-vivo::after{content:"● dal vivo";position:absolute;top:10px;left:10px;padding:3px 9px;border-radius:10px;background:rgba(0,0,0,.55);color:#fff;font:700 13px var(--font-testo)}
/* Home: i consumi in cima al riquadro, ben leggibili; l'umidità di casa sotto le stanze */
.in-casa .energia-casa{color:var(--inchiostro);padding:10px 14px;margin:0;border-radius:14px;background:color-mix(in srgb,var(--inchiostro) 8%,transparent)}
.in-casa .energia-casa .tenue{color:var(--inchiostro);opacity:.8}
.in-casa .in-casa-testa{justify-content:flex-end}
/* arco dell'aria: il numero, «Aria fuori», poi il giudizio */
.aria .aria-valore .aria-nome{font:600 14px var(--font-testo);letter-spacing:0;text-transform:none;color:var(--tenue);margin-top:4px}
.aria .aria-valore #aria-giudizio{margin-top:2px}
.aria .aria-valore{bottom:-12px}
.aria{padding-bottom:14px}
/* Demo pubblica: chi non è entrato vede solo la casa di prova */
body.visitatore .menu-modalita,body.visitatore .menu-lista li:has(#apri-impostazioni){display:none}
/* senza sensore esterno l'icona del tempo prende il posto della scritta: ben più grande */
.meteo:not(.con-sensore) .meteo-riga .icona-meteo{width:auto;height:auto}
.meteo:not(.con-sensore) .meteo-riga .icona-meteo svg{width:84px;height:84px}
@media (max-width:600px){.meteo:not(.con-sensore) .meteo-riga .icona-meteo svg{width:74px;height:74px}}
/* Risposte (avviso breve) come in Paritoo: i colori del tema rovesciati, chiaro sul tema scuro e scuro sul chiaro,
   una pillola al centro sopra la barra, non più il riquadro nero */
.risposta{background:var(--inchiostro);color:var(--fondo,#111);border-radius:24px;padding:12px 20px;font-size:16px;font-weight:600;line-height:1.35;text-align:center;
  max-width:min(30rem,calc(100vw - 32px));box-shadow:0 1px 2px rgba(0,0,0,.18),0 6px 18px rgba(0,0,0,.18)}
@media (max-width:600px){.risposta{left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);font-size:15.5px}}
/* consumi: Ieri · Oggi · Ora, un po' staccati dalle temperature delle stanze */
.in-casa .energia-casa{margin-bottom:6px;gap:6px;flex-wrap:nowrap;white-space:nowrap}
.energia-parte{display:inline-flex;gap:4px;align-items:baseline}
.energia-punto{opacity:.5}
@media (max-width:380px){.in-casa .energia-casa{font-size:14.5px}.in-casa .energia-casa b{font-size:15.5px}}
/* Fuori: «Sereno» e la scritta del sensore al centro, sotto l'icona e la temperatura insieme */
.meteo-ora .meteo-adesso{display:grid;grid-template-columns:auto auto;column-gap:10px;row-gap:2px;align-items:center;justify-items:center;text-align:center}
.meteo-ora .meteo-adesso .meteo-riga{display:contents}
.meteo-ora #meteo-icona{grid-column:1;grid-row:1}
.meteo-ora #meteo-temp{grid-column:2;grid-row:1}
.meteo-ora .meteo-desc{grid-column:1 / -1;grid-row:2}
.meteo-ora .meteo-sensore{grid-column:1 / -1;grid-row:3;text-align:center}
.meteo-ora .meteo-avviso{grid-column:1 / -1;grid-row:4}
/* arco dell'aria un po' più in alto rispetto al tempo di adesso */
.meteo-ora .aria{transform:translateY(-10px)}
/* consumi: la freccia in fondo disegnata (non un carattere), così sta esattamente a metà altezza come icona e testi */
.in-casa .energia-casa:not(:empty)::after{content:"";flex:none;width:8px;height:8px;margin:0 3px 0 auto;border:solid var(--accento);border-width:0 2.5px 2.5px 0;border-radius:1px;transform:rotate(-45deg)}
/* Auto: batteria grande, una barra, poi le righe */
.s-auto{background:#4C6A92}
.auto-batteria{display:flex;flex-direction:column;gap:12px;margin:8px 0 18px}
.auto-percento{display:flex;align-items:baseline;gap:12px}
.auto-percento b{font:300 64px/1 var(--font-titoli);letter-spacing:-.02em}
.auto-percento span{font-size:17px;color:var(--tenue)}
.auto-barra{position:relative;height:16px;border-radius:8px;background:color-mix(in srgb,var(--inchiostro) 12%,transparent);overflow:hidden}
.auto-pieno{position:absolute;inset:0 auto 0 0;border-radius:8px}
.auto-pieno.in-carica{background-image:linear-gradient(90deg,transparent 0,rgba(255,255,255,.35) 50%,transparent 100%)!important;background-size:60px 100%;animation:auto-carica 1.6s linear infinite}
@keyframes auto-carica{from{background-position:-60px 0}to{background-position:60px 0}}
@media (prefers-reduced-motion:reduce){.auto-pieno.in-carica{animation:none}}
.auto-tetto{position:absolute;top:0;bottom:0;width:2px;background:var(--inchiostro);opacity:.5}
.auto-righe{list-style:none;margin:0;padding:0;border-radius:18px;background:var(--riquadro,color-mix(in srgb,var(--inchiostro) 6%,transparent))}
.auto-righe li{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;padding:0 16px;font-size:17px}
.auto-righe li + li{border-top:1px solid var(--linea)}
.auto-fonte{font-size:14px;margin-top:12px}
/* ===== Routine e sveglie (come i Flussi di Homey e le sveglie di Alexa) ===== */
.s-routine{background:#2F9E6B}.s-sveglie{background:#C2862B}
.routine-testa{display:flex;align-items:center;gap:12px;margin:6px 0 12px}
.routine-testa .segmentato{flex:1}
.routine-piu{width:46px;height:46px;flex:none;border:0;border-radius:50%;background:var(--accento);color:var(--su-accento);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.routine-piu svg{width:24px;height:24px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.routine-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.routine-riga{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:999px;background:var(--riquadro,color-mix(in srgb,var(--inchiostro) 7%,transparent))}
.routine-riga.spenta{opacity:.6}
.routine-play{width:46px;height:46px;flex:none;border:0;border-radius:50%;background:#3DBE5A;color:#fff;display:grid;place-items:center}
.routine-play svg{width:22px;height:22px;fill:currentColor}
.routine-testo,.sveglia-testo{flex:1;min-width:0;border:0;background:none;color:inherit;text-align:left;display:flex;flex-direction:column;gap:2px;padding:0;font:inherit;cursor:pointer}
.routine-testo b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.routine-testo small{font-size:14px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sveglia-riga{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:20px;background:var(--riquadro,color-mix(in srgb,var(--inchiostro) 7%,transparent))}
.sveglia-riga.spenta .sveglia-testo{opacity:.55}
.sveglia-ora{font:400 40px/1 var(--font-titoli);letter-spacing:-.01em}
.sveglia-nome{font-size:15px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sveglia-giorni{display:flex;gap:4px;margin-top:6px}
.sveglia-giorni span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:600;color:var(--tenue)}
.sveglia-giorni span.attivo{background:color-mix(in srgb,var(--inchiostro) 14%,transparent);color:var(--inchiostro)}
/* interruttore come iOS */
.interruttore{width:52px;height:32px;flex:none;border:0;border-radius:16px;background:color-mix(in srgb,var(--inchiostro) 22%,transparent);position:relative;cursor:pointer;transition:background .2s}
.interruttore::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.interruttore[aria-checked="true"]{background:var(--accento)}
.interruttore[aria-checked="true"]::after{transform:translateX(20px)}
.routine-idee{margin-top:22px}
.routine-idee h2{font:600 15px var(--font-testo);color:var(--tenue);margin:0 0 8px}
.routine-idee ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.idea{width:100%;text-align:left;border:1.5px dashed color-mix(in srgb,var(--inchiostro) 25%,transparent);background:transparent;color:inherit;border-radius:18px;padding:12px 16px;display:flex;flex-direction:column;gap:2px;font:inherit;cursor:pointer}
.idea b{font-size:16px}.idea small{font-size:14px;color:var(--tenue)}
/* la finestra */
.finestra-routine{width:min(560px,calc(100vw - 24px))}
.r-campo{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--tenue)}
.r-campo input,.r-campo select,.r-azione select,.r-numero{height:44px;border-radius:12px;border:1px solid var(--linea);background:var(--superficie);color:var(--inchiostro);padding:0 12px;font:500 16px var(--font-testo);min-width:0}
#r-quando-box{display:flex;flex-direction:column;gap:12px}
.r-orario{display:flex;flex-direction:column;gap:10px}
.r-ora{height:56px;border-radius:14px;border:1px solid var(--linea);background:var(--superficie);color:var(--inchiostro);font:400 32px var(--font-titoli);padding:0 14px;width:max-content}
.r-giorni{display:flex;gap:6px}
.giorno{width:38px;height:38px;border-radius:50%;border:1px solid var(--linea);background:transparent;color:var(--tenue);font-weight:700}
.giorno[aria-pressed="true"]{background:var(--accento);border-color:var(--accento);color:var(--su-accento)}
.r-allora{font:600 18px var(--font-titoli);margin:6px 0 0}
.r-azioni{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.r-azione{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:14px;background:color-mix(in srgb,var(--inchiostro) 5%,transparent)}
.r-azione-cosa{display:flex;gap:8px;align-items:center}
.r-azione-cosa select{flex:1}
.r-numero{width:84px;flex:none}
.tondo.piccolo{width:36px;height:36px;flex:none}
.r-aggiungi{align-self:flex-start;height:40px;padding:0 16px}
.r-scorciatoie{display:flex;flex-wrap:wrap;gap:6px}
.r-scorciatoie .pillola{height:34px;padding:0 12px;font-size:14px;background:transparent;border:1px solid var(--linea)}
.r-tasti{display:flex;justify-content:space-between;gap:10px;margin-top:8px}
.r-tasti .tasto{flex:1}
.r-togli[hidden]{display:none}
.finestra-routine .r-campo input,.finestra-routine .r-campo select{height:46px;border-radius:12px;border:1px solid var(--linea);background:var(--superficie);color:var(--inchiostro);padding:0 12px;font:500 17px var(--font-testo);width:100%}
/* la finestra della routine scorre: i suoi pezzi non si schiacciano */
.finestra-routine form > *{flex-shrink:0}
.finestra-routine .r-campo input{min-height:46px}
/* Telecamere: il sottotitolo un po' più vicino al titolo */
#telecamere .titolo-medio + .disp-sintesi{margin-top:-8px}
/* «+ Aggiungi un'azione» apre il menu del sistema; le idee in griglia come le proposte di Google Home */
.r-aggiungi{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.r-aggiungi select{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer;font-size:16px}
.routine-idee ul{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.idea{border:0!important;background:var(--riquadro,color-mix(in srgb,var(--inchiostro) 7%,transparent))!important;border-radius:22px!important;padding:16px!important;gap:6px!important;min-height:150px;justify-content:flex-start}
.idea-icona svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.idea-icona{margin-bottom:auto;padding-bottom:12px}
.idea b{font-size:17px;line-height:1.2}
.idea small{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}