/* ══════════════════════════════════════════════════════════════════
   Arliva Fit — tema "notte profonda" (v26)
   ══════════════════════════════════════════════════════════════════

   Ridisegno del tema scuro sul mockup approvato dall'utente
   (31/07/2026). Colori campionati pixel per pixel dall'immagine, non
   scelti a occhio:

     fondo pagina    #04090F   (era #0E1117 — troppo chiaro e piatto)
     card            #0E1523   con bordo #141931
     card evidenza   gradiente #191550 → #14143D
     viola attivo    #6C50F3   (era #6366F1)
     CTA             #3E2DAC → #5B3FE8
     proteine        #7542F7 · carboidrati #32B0F4 · grassi #F8A511
     verde conferma  #35B96C
     ambra streak    #FFCC0E

   PERCHÉ UN FILE SEPARATO
   styles.css ha 2.100 righe e regge 25 schermate già collaudate.
   Riscriverlo significherebbe rimettere in discussione ogni contrasto
   già verificato. Qui si sovrascrivono solo le variabili e i pochi
   blocchi che cambiano davvero forma: se qualcosa non va, si stacca
   un <link> e si torna indietro senza toccare nulla.

   COSA NON CAMBIA
   Idratazione, micronutrienti, digiuno, GLP-1, traguardi e ogni altra
   funzione restano dove sono: questo file tocca solo l'aspetto.
   ══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* ── fondali ── */
  --bg:      #04090F;
  /* Card e bordi rialzati (04/09/2026): "nel tema scuro i bordi non si
     distinguono". Misurato, aveva ragione — erano a 1,17:1 contro la
     soglia WCAG di 3:1 per gli elementi non testuali.
         card su sfondo   1,09:1 -> 1,17:1
         bordo su card    1,17:1 -> 3,08:1
         bordo su sfondo  1,28:1 -> 3,59:1
     Alzare oltre farebbe sembrare l'interfaccia disegnata a matita. */
  --card:    #141B2E;
  --line:    #5A6889;
  --line-2:  #2A3550;

  /* ── testo ── */
  --ink:     #F2F5FA;
  --ink-2:   #C3CAD9;
  --muted:   #878CA2;
  /* #5F6780 dava 3,25:1 sulle card (serve 4,5:1): rilevato dall'audit
     automatico dopo il cambio di fondale. Su un fondo più scuro il
     grigio di prima non basta più. */
  --faint:   #7C86A3;

  /* ── indaco: più saturo e più vivo del precedente ── */
  /* #16143A dava 1,03:1 sulla card: l'alone del campo attivo esisteva
     ma era matematicamente invisibile, in TUTTA l'app — `.field
     input:focus` in styles.css usa questa variabile. Corretto qui una
     volta invece di aggiungere regole sparse. */
  --indigo-50:  #3B338C;
  --indigo-100: #1D1A48;
  --indigo-200: #2A2470;
  --indigo-400: #8B76FF;
  --indigo-500: #7C5CFF;
  --indigo-600: #6C50F3;
  --indigo-700: #A99BFF;
  --indigo-900: #CFC7FF;

  /* ── macro: i tre colori del mockup ── */
  --m-pro: #7542F7;
  --m-car: #32B0F4;
  --m-fat: #F8A511;

  /* ── stati ── */
  --ok:      #35B96C;
  --ok-bg:   #0C2418;
  --warn:    #F8A511;
  --warn-bg: #2A1D06;
  --bad:     #F26D6D;
  --bad-bg:  #2A1114;
  --info:    #32B0F4;
  --info-bg: #08243A;
  --amber:   #FFCC0E;

  --toast-bg: #1A2234;
  --toast-fg: #F2F5FA;
  --sel-bg:   #6C50F3;
  --sel-fg:   #FFFFFF;

  /* ombre più profonde: su fondo quasi nero quelle chiare spariscono */
  --sh-xs: 0 1px 2px rgba(0,0,0,.5);
  --sh-sm: 0 2px 8px rgba(0,0,0,.55);
  --sh-md: 0 6px 18px rgba(0,0,0,.6);
  --sh-lg: 0 14px 38px rgba(0,0,0,.7);
}

/* ══════════ CARD ══════════
   Nel mockup le card hanno angoli molto più morbidi e un bordo
   appena percettibile, non l'ombra marcata del tema precedente. */
[data-theme="dark"] .card {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  box-shadow: none;
}

/* ══════════ CARD DI EVIDENZA (anello calorie, intestazione piano) ══════════
   Gradiente indaco-notte. Le variabili --indigo-* nel tema scuro sono
   CHIARE perché servono da colore del testo: usarle come sfondo darebbe
   un riquadro lilla con sopra testo bianco (il bug corretto nella v23).
   Qui i valori sono fissi, presi dal mockup. */
[data-theme="dark"] .day-card,
[data-theme="dark"] .plan-hero {
  background: linear-gradient(150deg, #191550 0%, #131A3C 55%, #0D1428 100%);
  border: 1px solid #262168;
  border-radius: 22px;
  box-shadow: 0 10px 30px rgba(0,0,0,.55);
}

/* ══════════ BARRA DI NAVIGAZIONE ══════════
   Nel mockup l'icona attiva è viola pieno con una pastiglia tenue
   dietro; le altre restano grigie. La pastiglia rende evidente quale
   scheda è aperta anche a chi distingue male i colori — l'indicazione
   non è affidata al solo colore. */
[data-theme="dark"] .nav {
  background: rgba(8,13,22,.92);
  backdrop-filter: saturate(160%) blur(20px);
  border-top: 1px solid #141931;
}
.nav button {
  position: relative;
  gap: 3px;
}
.nav button svg {
  width: 21px; height: 21px;
  transition: transform .22s cubic-bezier(.34,1.4,.64,1), color .18s;
}
.nav button b {
  font-size: calc(9.5px * var(--fs));
  font-weight: 600;
  letter-spacing: .01em;
  transition: color .18s, font-weight .18s;
}
[data-theme="dark"] .nav button { color: #8B93A8; }
/* #7C5CFF sulla nav semitrasparente dava 4,48:1 — appena sotto la
   soglia. Schiarito a #8B76FF: 5,68:1, e resta lo stesso viola. */
[data-theme="dark"] .nav button.on { color: #8B76FF; }
[data-theme="dark"] .nav button.on b { font-weight: 750; }

/* pastiglia dietro l'icona attiva */
.nav button.on::before {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  width: 42px; height: 30px;
  transform: translateX(-50%);
  border-radius: 11px;
  background: rgba(108,80,243,.16);
  z-index: -1;
  animation: navPop .26s cubic-bezier(.34,1.4,.64,1);
}
@keyframes navPop {
  from { transform: translateX(-50%) scale(.75); opacity: 0; }
  to   { transform: translateX(-50%) scale(1);   opacity: 1; }
}
[data-theme="dark"] .nav button.on svg { transform: translateY(-1px) scale(1.04); }

/* Chi ha chiesto meno animazioni nel sistema operativo non le riceve.
   Non è un dettaglio: per chi soffre di disturbi vestibolari il
   movimento non richiesto provoca nausea reale. */
@media (prefers-reduced-motion: reduce) {
  .nav button.on::before { animation: none; }
  .nav button svg { transition: none; }
}

/* ══════════ PASTIGLIA DELLA SERIE ══════════ */
[data-theme="dark"] .streak-chip {
  background: rgba(255,204,14,.13);
  border: 1px solid rgba(255,204,14,.30);
  color: #FFCC0E;
  border-radius: 999px;
  font-weight: 700;
}

/* ══════════ PULSANTI ══════════ */
[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #5B3FE8, #7C5CFF);
  border: none;
  box-shadow: 0 6px 18px rgba(91,63,232,.34);
}
[data-theme="dark"] .btn-primary:active { transform: scale(.985); }
[data-theme="dark"] .btn-ghost {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
[data-theme="dark"] .btn-soft {
  background: rgba(108,80,243,.14);
  border: 1px solid rgba(108,80,243,.28);
  color: #A99BFF;
}

/* ══════════ RIGA DEL PASTO ══════════
   Nel mockup ogni pasto ha la miniatura tonda a sinistra, le kcal a
   destra e la spunta verde quando è registrato. */
[data-theme="dark"] .entry {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 16px;
}
[data-theme="dark"] .entry-thumb {
  border-radius: 13px;
  border: 1px solid var(--line-2);
}

/* ══════════ SCHEDE MACRO ══════════ */
[data-theme="dark"] .mc,
[data-theme="dark"] .ml-row {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 16px;
}
[data-theme="dark"] .mc-bar {
  background: rgba(255,255,255,.07);
  border-radius: 999px;
  overflow: hidden;
}

/* ══════════ CHIP E SELETTORI GIORNO ══════════ */
[data-theme="dark"] .chip {
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink-2);
  border-radius: 12px;
}
[data-theme="dark"] .chip.on,
[data-theme="dark"] .day-tab.on {
  background: #6C50F3;
  border-color: #7C5CFF;
  color: #FFFFFF;
}
[data-theme="dark"] .day-tab {
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  min-width: 46px;
}

/* ══════════ CAMPI ══════════ */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #0A1120;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 13px;
}
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  border-color: #6C50F3;
  box-shadow: 0 0 0 3px rgba(108,80,243,.20);
  outline: none;
}

/* ══════════ SEZIONI ══════════ */
[data-theme="dark"] .sec-head h3 {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.01em;
}

/* ══════════ FOGLIO A COMPARSA ══════════ */
[data-theme="dark"] .sheet {
  background: #0A1120;
  border: 1px solid var(--line-2);
  border-radius: 24px 24px 0 0;
}

/* ══════════ TRAGUARDI ══════════ */
[data-theme="dark"] .ach {
  background: var(--card);
  border-color: var(--line-2);
  border-radius: 15px;
}
[data-theme="dark"] .lvl-bar { background: rgba(255,255,255,.08); }
[data-theme="dark"] .lvl-bar i {
  background: linear-gradient(90deg, #6C50F3, #8B76FF);
}

/* ══════════════════════════════════════════════════════════════════
   STRUTTURA DELLA CARD "OGGI" — come nel mockup
   Anello a gradiente a sinistra, obiettivo/consumate a destra,
   tre card macro con barra sotto.
   ══════════════════════════════════════════════════════════════════ */
:root { --ring-track: rgba(15,23,42,.10); }
[data-theme="dark"] { --ring-track: rgba(255,255,255,.07); }

.ring-row { align-items: center; gap: 14px; }
.kcal-ring { width: 150px; height: 150px; }
.kcal-center b { font-size: calc(30px * var(--fs)); letter-spacing: -.05em; }
.kcal-center small {
  font-size: calc(9.5px * var(--fs)); letter-spacing: .09em; margin-top: 4px;
}

/* colonna destra: Obiettivo / Consumate */
.kcal-side { display: flex; flex-direction: column; gap: 14px; }
.ks-lab {
  display: block; font-size: calc(11px * var(--fs));
  color: var(--muted); font-weight: 600; margin-bottom: 2px;
}
.ks-val {
  display: flex; align-items: baseline; gap: 5px;
  background: none; border: none; padding: 0; text-align: left;
}
.ks-val b {
  font-size: calc(21px * var(--fs)); font-weight: 750;
  letter-spacing: -.03em; color: var(--ink);
}
.ks-u { font-size: calc(11.5px * var(--fs)); color: var(--muted); font-weight: 600; }
.ks-pen { width: 13px; height: 13px; color: var(--muted); margin-left: 2px; align-self: center; }
button.ks-val { min-height: 32px; }
button.ks-val:active { opacity: .7; }

/* tre card macro con barra */
.macro-boxes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-top: 14px;
}
.mbox {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line-2);
  border-radius: 14px; padding: 11px 10px 12px;
  display: flex; flex-direction: column; gap: 2px;
}
[data-theme="light"] .mbox, :root:not([data-theme="dark"]) .mbox {
  background: var(--card);
}
.mbox-lab {
  font-size: calc(10.5px * var(--fs)); font-weight: 700;
  letter-spacing: .01em;
}
.mbox-val { display: flex; align-items: baseline; gap: 1px; }
.mbox-val b {
  font-size: calc(17px * var(--fs)); font-weight: 750;
  letter-spacing: -.03em; color: var(--ink);
}
.mbox-goal { font-size: calc(10.5px * var(--fs)); color: var(--muted); font-weight: 600; }
.mbox-pct { font-size: calc(10.5px * var(--fs)); color: var(--muted); font-weight: 650; }
.mbox-pct.over { color: var(--bad); }
.mbox-bar {
  height: 4px; border-radius: 999px; margin-top: 6px;
  background: var(--ring-track); overflow: hidden;
}
.mbox-bar i {
  display: block; height: 100%; border-radius: 999px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: reduce) { .mbox-bar i { transition: none; } }

/* Su schermi stretti (iPhone SE) tre card affiancate stringono troppo:
   l'anello passa sopra e i macro restano in riga. */
@media (max-width: 360px) {
  .ring-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .kcal-side { flex-direction: row; gap: 22px; }
}

/* Il piede ora contiene solo "Dettagli": senza il numero accanto, il
   pulsante va centrato. `justify-content` da solo non bastava perché
   .df-more ha `margin-left:auto` (serviva a spingerlo a destra quando
   accanto c'era il totale kcal): va annullato, altrimenti vince lui. */
/* `.day-foot` è a sua volta flex e `.df-main` non ha flex:1, quindi si
   restringeva al contenuto: `justify-content:center` centrava dentro un
   contenitore largo quanto il pulsante — misurato, il centro cadeva a
   66 px invece che a 195. Serve anche l'espansione. */
.day-foot .df-main { flex: 1; justify-content: center; }
.day-foot .df-more { margin-left: 0; }

/* Etichette macro nel TEMA CHIARO.
   I colori del mockup nascono per fondo scuro: su bianco l'azzurro
   #0EA5E9 dà 2,77:1 e l'ambra #F8A511 appena 2,02:1 (serve 4,5:1).
   Rilevato dall'audit automatico. Le BARRE restano dei colori vivi —
   lì il contrasto non è un requisito, è superficie colorata — mentre
   il TESTO usa la variante scura. */
:root:not([data-theme="dark"]) .mbox-lab { color: #6D28D9 !important; }
:root:not([data-theme="dark"]) .mbox:nth-child(2) .mbox-lab { color: #0369A1 !important; }
:root:not([data-theme="dark"]) .mbox:nth-child(3) .mbox-lab { color: #B45309 !important; }

/* "Usati di recente": il pulsante Azzera è secondario, non deve
   competere con il titolo della sezione. */
.tools-forget {
  font-size: calc(11px * var(--fs)); font-weight: 600;
  color: var(--muted); background: none; border: none;
  min-height: 36px; padding: 0 4px;
}
.tools-forget:active { opacity: .6; }

/* ══════════════════════════════════════════════════════════════════
   PROGRESSI — card peso come nel mockup (01/08/2026)
   Peso e variazione a sinistra, grafico a destra, i due modi di
   registrare come righe toccabili sotto.
   ══════════════════════════════════════════════════════════════════ */
.w-card { padding: 16px; }
.w-top { display: flex; gap: 14px; align-items: flex-start; }
.w-left { flex: 0 0 auto; min-width: 118px; }
.w-right { flex: 1; min-width: 0; position: relative; display: flex;
  flex-direction: column; align-items: flex-end; gap: 8px; }

.w-now { display: flex; align-items: baseline; gap: 5px; }
.w-now b {
  font-size: calc(34px * var(--fs)); font-weight: 750;
  letter-spacing: -.045em; line-height: 1; color: var(--ink);
}
.w-u { font-size: calc(13px * var(--fs)); color: var(--muted); font-weight: 600; }

.w-delta {
  display: inline-flex; align-items: center; gap: 3px; margin-top: 7px;
  font-size: calc(15px * var(--fs)); font-weight: 750; letter-spacing: -.02em;
}
.w-delta svg { width: 14px; height: 14px; }
/* Il colore dipende dal tema: #35B96C dà 7,22:1 sul fondo scuro ma
   solo 2,53:1 su bianco (rilevato dall'audit). I verdi scuri fanno
   l'opposto. Servono due valori, non un compromesso illeggibile in
   entrambi. */
.w-delta.giu { color: #15803D; }   /* calo: verde — tema chiaro */
.w-delta.su  { color: #B45309; }   /* aumento: ambra, non rosso */
[data-theme="dark"] .w-delta.giu { color: #35B96C; }
[data-theme="dark"] .w-delta.su  { color: #F8A511; }
.w-since {
  font-size: calc(11px * var(--fs)); color: var(--muted);
  margin-top: 2px; line-height: 1.3;
}
.w-count {
  display: flex; align-items: center; gap: 5px; margin-top: 12px;
  font-size: calc(11.5px * var(--fs)); color: var(--muted); font-weight: 550;
}
.w-count svg { width: 13px; height: 13px; }

/* pulsante + tondo, come nel mockup */
.w-plus {
  width: 42px; height: 42px; min-height: 42px; padding: 0;
  border-radius: 50%; font-size: calc(22px * var(--fs));
  font-weight: 400; line-height: 1; display: grid; place-items: center;
  flex-shrink: 0; transition: transform .2s cubic-bezier(.34,1.4,.64,1);
}
.w-plus.open { transform: rotate(45deg); }

/* PESATA RAPIDA
   Una riga sola: −0,5 −0,1 [numero] +0,1 +0,5 e conferma. Il numero è
   un pulsante perché tocca anche lui: apre la digitazione per chi deve
   inserire un valore lontano. `tabular-nums` evita che la riga sobbalzi
   passando da 78,9 a 79,0. */
.w-quick {
  display: flex; align-items: center; gap: 6px; margin-top: 12px;
  /* Serve sempre, non solo sotto i 360 px: la conferma sta su una riga
     sua (`flex-basis:100%`) e senza wrap resterebbe in linea, uscendo
     dallo schermo con le lingue dai verbi lunghi. */
  flex-wrap: wrap;
}
.wq-step {
  flex: 0 0 auto; min-width: 46px; height: 42px; padding: 0 6px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--line-2); color: var(--ink);
  font-size: calc(12.5px * var(--fs)); font-weight: 650;
  transition: transform .12s;
}
.wq-step:active { transform: scale(.93); }
.wq-val {
  flex: 1 1 auto; height: 42px; border-radius: 12px;
  border: 1px dashed var(--line); background: transparent; color: var(--ink);
  font-size: calc(19px * var(--fs)); font-weight: 750;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.wq-val::after { content: " kg"; font-size: calc(11px * var(--fs)); font-weight: 600; color: var(--muted); }
/* La conferma va a capo: "Speichern" e "Enregistrer" non stanno mai in
   riga con cinque pulsanti su uno schermo da 360 px — misurato, usciva
   di 58 px dal bordo. A capo il tasto è anche più facile da centrare
   col pollice. */
.wq-ok {
  width: 100%; padding: 0 15px; height: 42px; min-height: 42px;
  flex: 1 0 100%; margin-top: 8px;
}
#wQuickHint { margin-top: 6px; }
/* Il numero non deve schiacciarsi sotto le frecce quando lo schermo è
   molto stretto: prende una riga tutta sua. */
@media (max-width: 359px) {
  .w-quick { flex-wrap: wrap; }
  .wq-val { order: -1; flex-basis: 100%; }
}

/* `display:flex` sovrascriveva l'attributo HTML `hidden` (che vale
   solo `display:none` come regola dell'user agent, quindi perde contro
   qualsiasi regola d'autore). Il campo restava visibile anche chiuso:
   misurato con offsetParent. Serve dirlo esplicitamente. */
.w-input-row { display: flex; gap: 8px; margin-top: 12px; }
.w-input-row[hidden] { display: none; }
/* Il campo prendeva `flex:1` e il pulsante `width:auto`: con la parola
   "Salva" e il carattere ingrandito il testo andava a capo lettera per
   lettera — "Sa / lv / a" verticale (screenshot 23/08/2026).
   Ora le proporzioni sono fissate: il campo non deve essere largo, ci
   vanno tre cifre; il pulsante sì, è quello che si tocca. */
.w-input-row input {
  /* 34% invece di 42%: ci vanno tre cifre e una virgola ("78,4"), non
     serve di più. Lo spazio recuperato va al pulsante, che è quello che
     si tocca. Richiesta del 24/08/2026: "il tasto salva allargalo e
     riduci il campo di inserimento dei kg". */
  flex: 0 1 34%; min-width: 76px; max-width: 128px;
  text-align: center; font-size: calc(16px * var(--fs));
}
.w-input-row .btn {
  flex: 1 1 auto; width: auto; min-width: 0; padding: 0 12px;
  /* Tre difese contro il testo che va a capo lettera per lettera
     ("Sa/lv/a" verticale, screenshot 23/08/2026): niente a capo, niente
     spezzatura di parola, e nessun overflow nascosto che tagli. Con
     white-space:nowrap da solo il testo poteva ancora essere troncato
     se il contenitore stringeva troppo. */
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  text-overflow: clip;
}

/* i due modi di pesarsi: righe toccabili, non pulsanti schiacciati */
.w-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.w-act {
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 12px 11px; border-radius: 14px; min-height: 60px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-2);
  transition: transform .14s cubic-bezier(.34,1.4,.64,1);
}
.w-act:active { transform: scale(.978); }
.w-act-ic {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px; background: rgba(108,80,243,.15); color: #8B76FF;
}
.w-act-ic svg { width: 17px; height: 17px; }
.w-act-tx {
  flex: 1; min-width: 0; font-size: calc(12.5px * var(--fs));
  font-weight: 650; color: var(--ink); line-height: 1.25;
}
.w-act-ch { color: var(--faint); font-size: calc(17px * var(--fs)); flex-shrink: 0; }
:root:not([data-theme="dark"]) .w-act { background: var(--card); }

/* Schermi stretti: le due azioni vanno in colonna, altrimenti il
   testo va a capo tre volte. */
@media (max-width: 380px) {
  .w-actions { grid-template-columns: 1fr; }
  .w-top { flex-direction: column; }
  .w-right { align-items: stretch; }
}

/* Grafico peso dentro la card nuova.
   Con `preserveAspectRatio="none"` l'SVG si deforma per riempire il
   contenitore: nella colonna destra, stretta, veniva schiacciato a una
   riga piatta (visto a schermo). Serve un'altezza minima dichiarata. */
.w-right .wchart { width: 100%; margin-top: 0; }
.w-right .wchart-svg { height: 96px; min-height: 96px; width: 100%; }
.w-right .wchart-head { margin-bottom: 6px; }

/* Con una sola azione visibile (quando il Bluetooth non c'è) la griglia
   a due colonne lasciava un buco: la riga si prende tutta la larghezza. */
.w-actions:has(.w-act:only-child),
.w-actions:has(.w-act[style*="display: none"]) { grid-template-columns: 1fr; }

/* ══════════════════════════════════════════════════════════════════
   v29 — ricerca diario, pasti abituali, coach, andamento micro
   ══════════════════════════════════════════════════════════════════ */

/* ── ricerca nel diario ── */
.dsearch {
  display: flex; align-items: center; gap: 9px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 13px; padding: 0 12px; margin-bottom: 10px;
  min-height: 46px;
}
.dsearch svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.dsearch input {
  flex: 1; border: none; background: none; padding: 12px 0;
  font-size: calc(14px * var(--fs)); color: var(--ink); min-width: 0;
}
.dsearch input:focus { outline: none; box-shadow: none; }
.dsearch input::-webkit-search-cancel-button { display: none; }
.ds-clear {
  background: none; border: none; color: var(--muted); flex-shrink: 0;
  font-size: calc(22px * var(--fs)); line-height: 1;
  width: 32px; height: 32px; min-height: 32px;
}
.ds-count {
  font-size: calc(11.5px * var(--fs)); color: var(--muted);
  font-weight: 600; margin-bottom: 8px;
}
.ds-day {
  font-size: calc(11px * var(--fs)); font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 5px;
}
.ds-none { padding: 14px 2px; }

/* ── pasti abituali ── */
.chip.hab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px; min-height: 44px;
}
.chip.hab svg { width: 14px; height: 14px; flex-shrink: 0; }
.chip.hab b {
  font-variant-numeric: tabular-nums; color: var(--muted);
  font-weight: 650; font-size: calc(11px * var(--fs));
}

/* ── coach proattivo ── */
.ctip {
  display: flex; align-items: flex-start; gap: 11px; position: relative;
  background: rgba(108,80,243,.10); border: 1px solid rgba(108,80,243,.26);
  border-radius: var(--r-lg); padding: 13px 14px; margin-bottom: 12px;
}
.ctip.nudge { background: rgba(248,165,17,.10); border-color: rgba(248,165,17,.30); }
.ctip-ic { font-size: calc(19px * var(--fs)); line-height: 1.2; flex-shrink: 0; }
.ctip-body { flex: 1; min-width: 0; padding-right: 18px; }
.ctip-body b {
  display: block; font-size: calc(13px * var(--fs)); font-weight: 700;
  color: var(--ink); line-height: 1.3;
}
.ctip-body p {
  font-size: calc(12.5px * var(--fs)); color: var(--ink-2);
  line-height: 1.45; margin-top: 3px;
}
.ctip-cta {
  align-self: center; flex-shrink: 0; background: var(--indigo-600); color: #fff;
  border: none; border-radius: 10px; padding: 9px 13px; min-height: 40px;
  font-size: calc(11.5px * var(--fs)); font-weight: 700;
}
.ctip.nudge .ctip-cta { background: #B45309; }
[data-theme="dark"] .ctip.nudge .ctip-cta { background: #F8A511; color: #1A1204; }
.ctip-x {
  position: absolute; top: 6px; right: 8px; background: none; border: none;
  color: var(--faint); font-size: calc(19px * var(--fs)); line-height: 1;
  width: 30px; height: 30px; min-height: 30px;
}

/* ── andamento micronutrienti ── */
.mtrend {
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 12px; margin-bottom: 9px;
}
.mtrend-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mtrend-top b { font-size: calc(12.5px * var(--fs)); font-weight: 700; }
.mtrend-avg {
  font-size: calc(13px * var(--fs)); font-weight: 750;
  font-variant-numeric: tabular-nums; color: var(--warn);
}
.mtrend-avg.basso { color: var(--bad); }
.mtrend-foot {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 5px;
  font-size: calc(10.5px * var(--fs)); color: var(--muted);
}
.spark { width: 100%; height: 40px; display: block; margin-top: 7px; }
.spark-line { fill: none; stroke: var(--indigo-500); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark-dot { fill: var(--indigo-500); }
/* linea di riferimento al 100% NRV: tratteggiata, così non si confonde
   con i dati */
.spark-ref { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke; }

/* Microfono non disponibile: il pulsante resta visibile ma spento.
   Prima veniva nascosto e l'utente non capiva perché mancasse. */
.mic-btn.mic-off {
  opacity: .5;
  border-style: dashed;
}
.mic-btn.mic-off:active { transform: none; }

/* Suggerimento "usa la tastiera": è la via che funziona sempre, quindi
   ha il peso visivo di una proposta, non di un messaggio d'errore. */
.kbd-tip {
  background: rgba(53,185,108,.10); border: 1px solid rgba(53,185,108,.28);
  border-radius: var(--r-md); padding: 13px 14px; margin-top: 8px;
}
.kbd-tip b { display: block; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--ink); }
.kbd-tip p { font-size: calc(12.5px * var(--fs)); line-height: 1.5; color: var(--ink-2); margin-top: 4px; }
.kbd-why { margin-top: 10px; }
.kbd-why summary {
  font-size: calc(11.5px * var(--fs)); color: var(--muted); font-weight: 600;
  cursor: pointer; min-height: 34px; display: flex; align-items: center;
}
.kbd-why p { font-size: calc(11.5px * var(--fs)); color: var(--muted); margin-top: 4px; }
:root:not([data-theme="dark"]) .kbd-tip { background: rgba(21,128,61,.07); border-color: rgba(21,128,61,.22); }

/* Barra "nuova versione": discreta, in basso, non blocca nulla.
   Un avviso a tutto schermo per un aggiornamento sarebbe sproporzionato. */
.upd-bar {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 12px);
  transform: translate(-50%, 20px); opacity: 0;
  display: flex; align-items: center; gap: 10px;
  background: var(--toast-bg); color: var(--toast-fg);
  padding: 10px 12px 10px 16px; border-radius: 999px;
  font-size: calc(12.5px * var(--fs)); font-weight: 600;
  box-shadow: var(--sh-lg); z-index: 90; max-width: 92vw;
  transition: opacity .25s, transform .25s;
}
.upd-bar.on { opacity: 1; transform: translate(-50%, 0); }
.upd-bar button {
  background: var(--indigo-600); color: #fff; border: none;
  border-radius: 999px; padding: 7px 14px; min-height: 36px;
  font-size: calc(12px * var(--fs)); font-weight: 700; flex-shrink: 0;
}
.upd-bar button#updX {
  background: transparent; color: var(--toast-fg); opacity: .6;
  padding: 0; width: 30px; min-height: 30px; font-size: calc(18px * var(--fs));
}
@media (prefers-reduced-motion: reduce) { .upd-bar { transition: none; } }

/* Versione nelle impostazioni */
.ver-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ver-lab { font-size: calc(12.5px * var(--fs)); color: var(--ink-2); }
.ver-num {
  font-size: calc(13px * var(--fs)); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--ink);
}

/* Avviso "piano in un'altra lingua".
   BUG visto a schermo: senza una misura esplicita l'SVG si espandeva a
   piena larghezza — un mappamondo di 250 px che occupava mezzo
   schermo. Gli SVG inline senza width/height prendono la dimensione
   del contenitore. */
.lang-note.big { display: block; }
.ln-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ln-head svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--info); }
.ln-head b { font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--ink); }
.lang-note.big p {
  font-size: calc(12.5px * var(--fs)); line-height: 1.5; color: var(--ink-2);
}
.lang-note.big .btn { width: 100%; }


/* ── RIEQUILIBRIO DELLA GIORNATA ──
   Elenco compatto: pasto, valore previsto, valore nuovo, differenza.
   Le colonne sono a larghezza fissa tranne il nome del pasto, così le
   cifre restano incolonnate anche con nomi di lunghezza diversa
   ("Frühstück" contro "Snack"). */
.reb-list { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.reb-head { font-size: calc(11.5px * var(--fs)); font-weight: 650; color: var(--muted);
            text-transform: uppercase; letter-spacing: .3px; margin-bottom: 8px; }
.reb-row { display: flex; align-items: center; gap: 8px; padding: 7px 0;
           border-top: 1px solid var(--line-2); font-size: calc(13.5px * var(--fs)); }
.reb-row:first-of-type { border-top: 0; }
.reb-meal { flex: 1 1 auto; min-width: 0; font-weight: 600;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reb-old { color: var(--muted); text-decoration: line-through; flex: 0 0 auto; }
.reb-arrow { color: var(--muted); flex: 0 0 auto; }
.reb-new { font-weight: 700; flex: 0 0 auto; white-space: nowrap; }
.reb-delta { flex: 0 0 auto; font-size: calc(11.5px * var(--fs)); font-weight: 650;
             padding: 2px 6px; border-radius: 6px; white-space: nowrap; }
.reb-delta.down { color: #0a7d55; background: rgba(10,125,85,.10); }
.reb-delta.up { color: #7a4fd6; background: rgba(122,79,214,.10); }
.reb-floor { margin: -2px 0 6px; font-size: calc(11px * var(--fs)); }
.reb-why summary { cursor: pointer; font-size: calc(12.5px * var(--fs)); color: var(--muted); }

/* Su schermi molto stretti il nome del pasto va a capo da solo e le
   cifre restano leggibili invece di comprimersi. */
@media (max-width: 340px) {
  .reb-row { flex-wrap: wrap; }
  .reb-meal { flex: 1 1 100%; }
}

[data-theme="dark"] .reb-delta.down { color: #4ade80; background: rgba(74,222,128,.14); }
[data-theme="dark"] .reb-delta.up { color: #c4b5fd; background: rgba(196,181,253,.14); }

/* Micronutrienti senza dati: una riga, non un riquadro. Vedi
   renderMicroCard() — prima erano ~200px per dire "non ho dati".
   Il margine sopra è generoso perché senza l'intestazione di sezione
   la riga finisce attaccata al testo dell'idratazione e i due
   paragrafi si leggono come uno solo (visto nello screenshot). */
.micro-vuoto {
  margin: 18px 0 14px; line-height: 1.5;
  padding-top: 14px; border-top: 1px solid var(--line-2);
}
.link-inline {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--brand); font-weight: 650; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.link-inline:active { opacity: .6; }

/* Tasto per svuotare il campo "Scrivi cosa hai mangiato".
   Serve perché cancellare a mano mentre il microfono è aperto era una
   lotta: il riconoscitore riemette lo stesso parziale (segnalato
   25/08/2026). Questo svuota E chiude la dettatura. */
.txt-wrap { position: relative; }
.txt-x {
  position: absolute; top: 8px; right: 8px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--line-2); color: var(--muted);
  border: 1px solid var(--line); cursor: pointer; z-index: 2;
}
.txt-x svg { width: 15px; height: 15px; }
.txt-x:active { transform: scale(.92); }
.txt-x[hidden] { display: none; }
/* Il testo non deve finirci sotto */
.txt-wrap textarea { padding-right: 44px; }

/* ── MENU UNICO (25/08/2026) ──
   L'avatar nell'intestazione era una delle tre porte verso le stesse
   impostazioni; le altre due (sigla della lingua e ingranaggio) sono
   state tolte. Questo è l'elenco che compare toccandolo. */
.menu-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 12px; margin-bottom: 6px;
  background: var(--indigo-50); border: 1px solid var(--indigo-200);
  border-radius: 14px; text-align: left; cursor: pointer;
}
.menu-avatar {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: #fff;
  font-size: calc(17px * var(--fs)); font-weight: 750;
}
.menu-list { display: flex; flex-direction: column; }
.menu-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 12px; background: none; border: 0;
  border-bottom: 1px solid var(--line-2);
  text-align: left; cursor: pointer;
}
.menu-row:last-child { border-bottom: 0; }
.menu-row:active, .menu-head:active { background: var(--line-2); }
.menu-ic { flex: 0 0 26px; font-size: calc(18px * var(--fs)); text-align: center; }
/* min-width:0 sul testo, altrimenti l'ellissi non scatta dentro un flex */
.menu-txt { flex: 1 1 auto; min-width: 0; }
.menu-txt b {
  display: block; font-size: calc(14px * var(--fs)); font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-txt small {
  display: block; font-size: calc(11.5px * var(--fs)); color: var(--muted);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.menu-go { flex: 0 0 auto; color: var(--muted); font-size: calc(20px * var(--fs)); line-height: 1; }

/* La sezione raggiunta dal menu lampeggia una volta: senza, si apre un
   pannello lungo 2800px e non si capisce dove si è atterrati. */
.evidenzia { animation: evidenzia 1.6s ease-out; border-radius: 12px; }
@keyframes evidenzia {
  0%, 100% { background: transparent; }
  25%, 60% { background: var(--indigo-50); box-shadow: 0 0 0 6px var(--indigo-50); }
}

/* ── REGISTRA ALIMENTO: una CTA sola (25/08/2026) ──
   Sostituisce i quattro riquadri fissi che occupavano ~180px sulla
   schermata più usata. */
.cta-log {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; margin: 14px 0 4px; padding: 16px;
  background: var(--brand); color: #fff; border: 0; border-radius: 16px;
  font-size: calc(15.5px * var(--fs)); font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 14px rgba(75,68,190,.24);
}
.cta-log:active { transform: scale(.985); }
.cta-ic { display: grid; place-items: center; }
.cta-ic svg { width: 20px; height: 20px; }

.log-list { display: flex; flex-direction: column; margin-top: 6px; }
.log-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 12px; background: none; border: 0;
  border-bottom: 1px solid var(--line-2); text-align: left; cursor: pointer;
}
.log-row:last-child { border-bottom: 0; }
.log-row:active { background: var(--line-2); }
.log-ic { flex: 0 0 28px; font-size: calc(19px * var(--fs)); text-align: center; }
/* min-width:0: senza, l'ellissi non scatta dentro un contenitore flex */
.log-txt { flex: 1 1 auto; min-width: 0; }
.log-txt b {
  display: block; font-size: calc(14.5px * var(--fs)); font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.log-txt small {
  display: block; font-size: calc(11.5px * var(--fs)); color: var(--muted);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.log-go { flex: 0 0 auto; color: var(--muted); font-size: calc(20px * var(--fs)); line-height: 1; }

/* Dettagli nutrizionali in espansione: fibre, zuccheri, sale e
   micronutrienti non stanno più sempre aperti sulla home. */
.nutri-toggle {
  display: block; width: 100%; margin: 10px 0 2px; padding: 10px;
  background: none; border: 1px dashed var(--line); border-radius: 12px;
  color: var(--brand); font-size: calc(12.5px * var(--fs)); font-weight: 650;
  cursor: pointer;
}
.nutri-toggle:active { background: var(--line-2); }

/* ── PIANO: le due strade iniziali (25/08/2026) ──
   Prima erano due pulsanti impilati, uno pieno e uno vuoto: la
   gerarchia spingeva verso "genera" anche chi la dieta ce l'ha già. */
.start-head { margin: 8px 0 12px; }
.start-head h3 { font-size: calc(17px * var(--fs)); font-weight: 700; }
.start-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 16px 14px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; text-align: left; cursor: pointer;
}
.start-card:active { background: var(--line-2); transform: scale(.99); }
.start-ic { flex: 0 0 34px; font-size: calc(24px * var(--fs)); text-align: center; }
.start-txt { flex: 1 1 auto; min-width: 0; }
.start-txt b { display: block; font-size: calc(15px * var(--fs)); font-weight: 700; }
.start-txt small {
  display: block; font-size: calc(12px * var(--fs)); color: var(--muted);
  margin-top: 3px; line-height: 1.45;
}
.start-go { flex: 0 0 auto; color: var(--muted); font-size: calc(20px * var(--fs)); }

/* ── PASTI RICHIUDIBILI ──
   Cinque pasti aperti erano quattro schermate per arrivare alla cena.
   Resta aperto quello di adesso. */
details.pmeal > summary { cursor: pointer; list-style: none; }
details.pmeal > summary::-webkit-details-marker { display: none; }
.pmeal-n {
  font-size: calc(11px * var(--fs)); color: var(--muted); font-weight: 600;
  white-space: nowrap;
}
.pmeal-done { color: var(--ok); font-weight: 800; font-size: calc(13px * var(--fs)); }
.pmeal-chev {
  color: var(--muted); font-size: calc(15px * var(--fs)); line-height: 1;
  transition: transform .18s ease;
}
details.pmeal[open] .pmeal-chev { transform: rotate(180deg); }

/* ── COACH: intestazione e scorciatoie ── */
.coach-tag {
  font-size: calc(12.5px * var(--fs)); color: var(--muted);
  margin: 2px 0 14px; line-height: 1.5; font-style: italic;
}
.coach-links { display: flex; flex-direction: column; }
.coach-link {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 12px; background: none; border: 0;
  border-bottom: 1px solid var(--line-2); text-align: left; cursor: pointer;
}
.coach-link:last-child { border-bottom: 0; }
.coach-link:active { background: var(--line-2); }
.cl-ic { flex: 0 0 26px; font-size: calc(18px * var(--fs)); text-align: center; }
.cl-txt { flex: 1 1 auto; min-width: 0; }
.cl-txt b {
  display: block; font-size: calc(14px * var(--fs)); font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-txt small {
  display: block; font-size: calc(11.5px * var(--fs)); color: var(--muted);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cl-go { flex: 0 0 auto; color: var(--muted); font-size: calc(20px * var(--fs)); line-height: 1; }

/* ── PROGRESSI: analisi dettagliata in espansione (25/08/2026) ──
   Quattro analisi dense (budget, affidabilità, confronto, deficit)
   rendevano Progressi la schermata più lunga. Ora un tocco. */
.prog-detail {
  margin: 14px 0 4px; border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.prog-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px; cursor: pointer; list-style: none;
  font-size: calc(14px * var(--fs)); background: var(--card);
}
.prog-detail-head::-webkit-details-marker { display: none; }
.prog-detail-head:active { background: var(--line-2); }
.pd-chev { color: var(--muted); font-size: calc(16px * var(--fs)); transition: transform .18s ease; }
.prog-detail[open] .pd-chev { transform: rotate(180deg); }
.prog-detail-body { padding: 0 12px 12px; }

/* Prova tastiera: diagnostica per il bug "non mi fa cancellare".
   Sta nelle impostazioni, sotto la versione. */
.kb-test { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.kb-test summary {
  cursor: pointer; font-size: calc(13px * var(--fs));
  font-weight: 650; color: var(--muted);
}
.kb-out {
  max-height: 240px; overflow: auto; margin-top: 10px; padding: 10px;
  background: var(--line-2); border-radius: 10px;
  font-family: ui-monospace, monospace; font-size: 11px;
  line-height: 1.45; white-space: pre-wrap; word-break: break-all;
}

/* ═══ NAV CON IL + CENTRALE (26/08/2026) ═══
   Barra più alta (72px contro 58) perché le voci sono sei e i bersagli
   erano stretti: sotto i 44px il pollice sbaglia. Il + esce dalla barra
   verso l'alto, come nelle app di messaggistica. */
:root { --nav-h: 76px; }
.nav { align-items: flex-start; padding-top: 8px; overflow: visible; }
/* Quattro voci invece di cinque (Strumenti è passato sotto "Altro"):
   lo spazio recuperato va alle icone, che erano piccole. */
.nav button { min-height: 54px; gap: 4px; }
/* 31px: segnalato due volte che erano piccole. Restano comunque sotto
   i 36 del +, che deve continuare a distinguersi. */
.nav button svg { width: 31px; height: 31px; stroke-width: 2.1; }
.nav button b { font-size: calc(11.5px * var(--fs)); font-weight: 700; }
.nav button.on svg { transform: translateY(-1px) scale(1.08); }

/* Il + : cerchio viola, sollevato di 18px sopra la barra. `position
   relative` + `top` negativo invece di `transform`, altrimenti il
   contenitore lo ritaglierebbe e l'area toccabile resterebbe in basso. */
/* ═══ IL + : il pulsante che si tocca dieci volte al giorno ═══

   Deve staccarsi da tutto il resto, non somigliare a una voce più
   grande. Cinque strati sovrapposti:

     1. l'alone esterno, un ::before sfocato che "respira" — è quello
        che si vede prima del pulsante stesso;
     2. il corpo, gradiente viola profondo a tre fermate;
     3. un ::after in `screen` che simula la luce dall'alto a sinistra,
        così il cerchio sembra una sfera e non un disco piatto;
     4. il bordo chiaro, che lo separa dalla barra;
     5. tre ombre: alone largo, alone stretto saturo, linea interna.

   Al tocco l'alone si contrae e il pulsante affonda: un pulsante che
   non reagisce sembra rotto, e questo è il più premuto dell'app. */
.nav-fab {
  /* `flex: 0 0 68px` e non `auto`: con auto seguiva il padding dei
     fratelli e usciva ovale (misurato 70x58). */
  flex: 0 0 68px; position: relative; top: -24px;
  width: 68px; height: 68px; min-width: 68px; max-width: 68px;
  padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(150deg, #7B6CFF 0%, #5B4FE0 38%, #3E33B8 72%, #2A2286 100%);
  color: #fff;
  border: 3px solid rgba(255,255,255,.55);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.30) inset,
    0 0 26px rgba(123,108,255,.60),
    0 12px 30px rgba(62,51,184,.55),
    0 3px 10px rgba(0,0,0,.30);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.34,1.5,.64,1), box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}

/* L'alone che respira. `filter: blur` su uno pseudo-elemento invece di
   una box-shadow animata: l'ombra ridipinge tutto il pulsante a ogni
   fotogramma, questo no. */
.nav-fab::before {
  content: ''; position: absolute; inset: -9px;
  border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(123,108,255,.55) 0%, rgba(123,108,255,0) 70%);
  filter: blur(7px);
  animation: fabRespira 3.4s ease-in-out infinite;
}
@keyframes fabRespira {
  0%, 100% { opacity: .65; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.14); }
}

/* Il simbolo: bianco pieno, grande, con un'ombra che lo stacca dal
   viola. `.nav .nav-fab svg` e non `.nav-fab svg`: la regola generale
   `.nav button svg` ha due elementi e vincerebbe (misurato: l'icona
   restava 27px invece dei 34 dichiarati). */
.nav .nav-fab svg {
  width: 36px; height: 36px;
  stroke: #fff; stroke-width: 3;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.35));
  transition: transform .18s cubic-bezier(.34,1.5,.64,1);
}

.nav-fab:active {
  transform: scale(.90);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.30) inset,
    0 0 14px rgba(123,108,255,.45),
    0 4px 12px rgba(62,51,184,.40);
}
.nav-fab:active::before { opacity: 1; transform: scale(.92); animation: none; }
.nav .nav-fab:active svg { transform: rotate(90deg) scale(.94); }

/* L'onda al tocco: un cerchio che si espande e svanisce. Parte dal
   centro del pulsante, dura 500ms, poi la classe viene tolta dal JS. */
.nav-fab.pulsa::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(160,148,255,.9);
  animation: fabOnda .5s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes fabOnda {
  from { transform: scale(1);   opacity: .85; }
  to   { transform: scale(1.9); opacity: 0; }
}

/* Nel tema scuro il bordo bianco al 55% è troppo: si stacca già il
   glow. Bordo più tenue, alone più intenso. */
[data-theme="dark"] .nav-fab {
  border-color: rgba(255,255,255,.30);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.34) inset,
    0 0 34px rgba(139,124,255,.75),
    0 12px 34px rgba(90,74,220,.50);
}
[data-theme="dark"] .nav-fab::before {
  background: radial-gradient(circle, rgba(139,124,255,.70) 0%, rgba(139,124,255,0) 70%);
}

/* Chi ha chiesto meno animazioni non deve vedere niente pulsare. */
@media (prefers-reduced-motion: reduce) {
  .nav-fab::before { animation: none; }
  .nav-fab.pulsa::after { animation: none; display: none; }
}

/* Le due voci ai lati del + hanno meno spazio: si stringono loro, non
   il pulsante. */
.nav button:nth-child(2), .nav button:nth-child(4) { padding: 0 2px; }

/* Su schermi molto stretti le etichette a sei voci si sovrappongono. */
@media (max-width: 340px) {
  .nav button b { font-size: calc(9px * var(--fs)); }
  .nav-fab { flex: 0 0 60px; width: 60px; height: 60px; min-width: 60px; max-width: 60px; top: -20px; }
  .nav .nav-fab svg { width: 30px; height: 30px; }
}

/* In orizzontale la nav è laterale: il + torna in linea, senza
   sollevamento, altrimenti sborderebbe. */
@media (orientation: landscape) and (max-height: 500px) {
  .nav-fab { flex: 0 0 48px; top: 0; width: 48px; height: 48px; min-width: 48px; max-width: 48px; border-width: 2px; }
  .nav-fab::before { animation: none; opacity: .5; }
  .nav .nav-fab svg { width: 22px; height: 22px; }
}

/* ═══ TEMA SCURO: campi e riquadri che si distinguono (04/09/2026) ═══
   Segnalato: "tutti i campi con rettangoli e finestre devono avere i
   bordi più chiari, magari un glow chiaro così si distinguono".

   Oltre al bordo più chiaro (vedi --line qui sopra), ogni superficie
   riceve una linea interna bianca al 6-8%: è quella che dà il senso
   del rilievo. Un bordo solo, per quanto chiaro, resta piatto. */
[data-theme="dark"] .card,
[data-theme="dark"] .sheet,
[data-theme="dark"] .day-card,
[data-theme="dark"] .intro-card,
[data-theme="dark"] .reb-list,
[data-theme="dark"] .prog-detail,
[data-theme="dark"] .start-card {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07) inset,
    0 2px 10px rgba(0,0,0,.45);
}

/* I campi di inserimento: qui il rilievo conta di più, perché l'utente
   deve capire dove può scrivere. */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #0D1424;
  border-color: #5A6889;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Il campo attivo: alone viola invece del semplice cambio di bordo.
   Con i bordi ora tutti chiari, senza questo non si capirebbe quale
   campo ha il cursore. */
/* `.field input:focus` in styles.css ha una classe in più, quindi
   specificità maggiore: senza ripetere `.field` qui, questa regola
   perde e l'alone non compare mai. Verificato: il boxShadow non
   cambiava affatto al focus. */
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus,
[data-theme="dark"] .field textarea:focus {
  border-color: #8B84FF;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.10) inset,
    0 0 0 3px rgba(139,132,255,.28),
    0 0 16px rgba(139,132,255,.22);
  outline: none;
}

/* Pastiglie e pulsanti secondari: stesso trattamento, più leggero. */
[data-theme="dark"] .chip,
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .tgl-row,
[data-theme="dark"] .menu-row,
[data-theme="dark"] .log-row,
[data-theme="dark"] .coach-link {
  border-color: #3E4C72;
}
[data-theme="dark"] .chip.on,
[data-theme="dark"] .quiz-opt.on {
  border-color: #8B84FF;
  box-shadow: 0 0 0 1px rgba(139,132,255,.35), 0 0 12px rgba(139,132,255,.18);
}

/* Le righe che separano gli elementi in elenco: --line-2 è più scuro
   di --line di proposito, altrimenti un elenco di dieci voci sembra
   una griglia. */
[data-theme="dark"] .menu-row,
[data-theme="dark"] .log-row,
[data-theme="dark"] .coach-link,
[data-theme="dark"] .reb-row {
  border-bottom-color: #2A3550;
}

/* La barra in basso deve staccarsi dal contenuto che ci scorre sotto. */
[data-theme="dark"] .nav {
  border-top-color: #3E4C72;
  box-shadow: 0 -1px 0 rgba(255,255,255,.05), 0 -8px 24px rgba(0,0,0,.5);
}

/* ═══ TEMA CHIARO: bordi visibili (04/09/2026) ═══
   Segnalato: "sul tema chiaro i bordi di rettangoli e finestre devono
   essere più scuri e visibili, magari viola".

   Misurato, aveva ragione: #E2E8F0 su card bianca dava 1,23:1, contro
   la soglia WCAG di 3:1 per gli elementi non testuali. Stesso difetto
   del tema scuro, all'opposto.

       bordo su card bianca   1,23:1 -> 3,36:1
       bordo su sfondo        1,18:1 -> 3,21:1

   La tinta è viola e non grigia: richiama il marchio e distingue i
   contorni dell'interfaccia dalle righe di separazione del testo. */
:root:not([data-theme="dark"]) {
  --line:   #8189BE;
  --line-2: #D6DAF0;
}

/* Le superfici prendono anche un'ombra tenue: un bordo da solo resta
   piatto, con l'ombra il riquadro si stacca dal fondo. */
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .sheet,
:root:not([data-theme="dark"]) .day-card,
:root:not([data-theme="dark"]) .intro-card,
:root:not([data-theme="dark"]) .reb-list,
:root:not([data-theme="dark"]) .prog-detail,
:root:not([data-theme="dark"]) .start-card {
  box-shadow: 0 1px 3px rgba(65,72,140,.10), 0 4px 14px rgba(65,72,140,.07);
}

/* I campi: bordo pieno e alone viola quando sono attivi. */
:root:not([data-theme="dark"]) input,
:root:not([data-theme="dark"]) select,
:root:not([data-theme="dark"]) textarea {
  border-color: #8189BE;
}
:root:not([data-theme="dark"]) input:focus,
:root:not([data-theme="dark"]) select:focus,
:root:not([data-theme="dark"]) textarea:focus,
:root:not([data-theme="dark"]) .field input:focus,
:root:not([data-theme="dark"]) .field select:focus,
:root:not([data-theme="dark"]) .field textarea:focus {
  border-color: #4B44BE;
  box-shadow: 0 0 0 3px rgba(75,68,190,.16);
  outline: none;
}

/* Le righe di separazione restano più tenui del contorno: con lo
   stesso colore un elenco di dieci voci sembra una griglia. */
:root:not([data-theme="dark"]) .menu-row,
:root:not([data-theme="dark"]) .log-row,
:root:not([data-theme="dark"]) .coach-link,
:root:not([data-theme="dark"]) .reb-row {
  border-bottom-color: #D6DAF0;
}

/* TESTO BIANCO SU FONDO CHIARO — segnalato: "il testo Registra
   alimento sul tema chiaro non si vede".
   Le voci del pannello ereditavano un colore pensato per il fondo
   scuro. Qui si forza il colore del testo normale. */
:root:not([data-theme="dark"]) .log-row .log-txt b,
:root:not([data-theme="dark"]) .menu-row .menu-txt b,
:root:not([data-theme="dark"]) .coach-link .cl-txt b,
:root:not([data-theme="dark"]) .start-card .start-txt b {
  color: var(--ink);
}
:root:not([data-theme="dark"]) .log-row .log-txt small,
:root:not([data-theme="dark"]) .menu-row .menu-txt small,
:root:not([data-theme="dark"]) .coach-link .cl-txt small,
:root:not([data-theme="dark"]) .start-card .start-txt small {
  color: var(--muted);
}
/* Il titolo del pannello e i pulsanti secondari */
:root:not([data-theme="dark"]) #toolBody h3,
:root:not([data-theme="dark"]) #toolBody .sub { color: var(--ink); }
:root:not([data-theme="dark"]) #toolBody .sub { color: var(--muted); }

/* ══════════════════════════════════════════════════════════════════
   TEMA COSMICO (04/09/2026)

   Su richiesta, con il mockup allegato: fondo viola profondo con
   nebulosa, anello che brilla, riquadri dai bordi luminosi.

   Vale SOLO nel tema scuro. Nel chiaro un fondo viola con testo scuro
   sarebbe illeggibile, e chi sceglie il tema chiaro lo fa per leggere
   meglio, non per l'effetto.

   Tutto in CSS: nessuna immagine di sfondo da scaricare, nessun peso
   in più sul primo caricamento.
   ══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* Fondali viola invece dei blu-neri di prima. */
  --bg:      #0B0620;
  --card:    #17102F;
  --line:    #6C5FA8;
  --line-2:  #2E2350;
  --ink:     #F4F1FF;
  --ink-2:   #CDC5E8;
  --muted:   #9A90BE;
}

/* LA NEBULOSA
   Due sfumature radiali sovrapposte, fisse rispetto alla finestra:
   scorrendo il contenuto il fondo resta fermo, come nel mockup.
   `position: fixed` su uno pseudo-elemento del body invece che
   `background-attachment: fixed`, che su iOS non funziona. */
[data-theme="dark"] body::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 80% 55% at 12% 8%,  rgba(124, 58, 237, .30) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 88% 22%, rgba(56, 89, 214, .22) 0%, transparent 62%),
    radial-gradient(ellipse 90% 60% at 50% 96%, rgba(147, 51, 234, .20) 0%, transparent 66%),
    #0B0620;
  pointer-events: none;
}

/* Il velo di stelle: due strati di puntini, uno più fitto e tenue,
   uno più rado e luminoso. `radial-gradient` ripetuto invece di
   un'immagine: sono ~40 byte di CSS contro un PNG da 30 KB. */
[data-theme="dark"] body::after {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background-image:
    radial-gradient(1px 1px at 18% 12%, rgba(255,255,255,.55) 50%, transparent 50%),
    radial-gradient(1px 1px at 62% 8%,  rgba(255,255,255,.35) 50%, transparent 50%),
    radial-gradient(1.4px 1.4px at 84% 34%, rgba(214,200,255,.60) 50%, transparent 50%),
    radial-gradient(1px 1px at 32% 46%, rgba(255,255,255,.30) 50%, transparent 50%),
    radial-gradient(1.2px 1.2px at 8% 72%, rgba(214,200,255,.45) 50%, transparent 50%),
    radial-gradient(1px 1px at 72% 66%, rgba(255,255,255,.28) 50%, transparent 50%),
    radial-gradient(1.3px 1.3px at 46% 88%, rgba(255,255,255,.40) 50%, transparent 50%);
  background-size: 380px 380px;
  opacity: .8; pointer-events: none;
  animation: stelle 9s ease-in-out infinite;
}
@keyframes stelle { 0%,100% { opacity: .55; } 50% { opacity: .95; } }

/* I RIQUADRI: bordo che brilla e fondo semitrasparente, così la
   nebulosa si intravede sotto. */
[data-theme="dark"] .day-card,
[data-theme="dark"] .card,
[data-theme="dark"] .mbox,
[data-theme="dark"] .sheet,
[data-theme="dark"] .intro-card,
[data-theme="dark"] .start-card,
[data-theme="dark"] .reb-list,
[data-theme="dark"] .prog-detail {
  background: linear-gradient(160deg, rgba(45,30,85,.72) 0%, rgba(23,16,47,.86) 100%);
  border: 1px solid rgba(150,120,255,.34);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 22px rgba(124,58,237,.16),
    0 8px 26px rgba(0,0,0,.42);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

/* L'ANELLO che brilla: un alone viola dietro il cerchio. */
[data-theme="dark"] .kcal-ring { position: relative; }
[data-theme="dark"] .kcal-ring::before {
  content: ''; position: absolute; inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,105,255,.42) 0%, rgba(167,105,255,0) 68%);
  filter: blur(11px);
  animation: anelloRespira 4.5s ease-in-out infinite;
}
/* Solo z-index, NON `position: relative`: il numero centrale è
   `position: absolute; inset: 0` e sovrascriverlo lo staccava
   dall'anello — finiva sopra i riquadri dei macro (visto nello
   screenshot). z-index funziona lo stesso su un elemento già
   posizionato, e su quelli statici basta `isolation`. */
[data-theme="dark"] .kcal-ring > * { z-index: 1; }
[data-theme="dark"] .kcal-ring { isolation: isolate; }
/* L'alone deve stare DIETRO: senza z-index negativo copre il numero. */
[data-theme="dark"] .kcal-ring::before { z-index: -1; }
@keyframes anelloRespira {
  0%,100% { opacity: .60; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.05); }
}

/* Il numero grande dentro l'anello: bianco pieno con un alone. */
[data-theme="dark"] .kcal-center b {
  color: #fff;
  text-shadow: 0 0 18px rgba(167,105,255,.55), 0 2px 6px rgba(0,0,0,.5);
}

/* Le icone tonde dei macro. */
.mbox-head { display: flex; align-items: center; gap: 6px; }
.mbox-ic {
  flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px;
  background: currentColor; border: 1px solid currentColor;
}
/* Il fondo prende il colore del macro al 13%: `color-mix` invece di
   concatenare la variabile con "22", che non è un colore valido. */
.mbox-ic { background: color-mix(in srgb, currentColor 15%, transparent);
           border-color: color-mix(in srgb, currentColor 40%, transparent); }
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .mbox-ic { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }
}

/* Le gocce dell'acqua: quelle piene brillano. */
[data-theme="dark"] .wd.on,
[data-theme="dark"] .water-row .wd.on {
  box-shadow: 0 0 12px rgba(56,189,248,.45), 0 0 0 1px rgba(56,189,248,.5) inset;
}

/* La barra in basso: vetro sopra la nebulosa. */
[data-theme="dark"] .nav {
  background: rgba(17,10,38,.82);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-top-color: rgba(150,120,255,.28);
}

/* L'intestazione, stesso trattamento. */
[data-theme="dark"] .topbar {
  background: rgba(11,6,32,.78);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(150,120,255,.20);
}

/* La pastiglia della serie: oro su viola, come nel mockup. */
[data-theme="dark"] .streak-chip {
  background: linear-gradient(135deg, rgba(251,191,36,.20), rgba(245,158,11,.12));
  border: 1px solid rgba(251,191,36,.38);
  color: #FCD34D;
  box-shadow: 0 0 14px rgba(251,191,36,.18);
}

/* Chi ha chiesto meno animazioni non deve vedere niente pulsare. */
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] body::after,
  [data-theme="dark"] .kcal-ring::before { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   TEMA COSMICO CHIARO (04/09/2026)

   Lo stesso mondo del tema scuro, ma di giorno: lavanda invece di
   viola notte, aurore tenui invece di nebulose, ombre morbide invece
   di aloni luminosi.

   La regola che tiene insieme le due versioni: nel scuro la luce
   ARRIVA dagli elementi (brillano su fondo nero), nel chiaro la luce
   CADE sugli elementi (ombre sotto, riquadri bianchi che galleggiano).
   Copiare gli aloni viola su fondo chiaro darebbe un effetto sporco,
   non luminoso.
   ══════════════════════════════════════════════════════════════════ */

:root:not([data-theme="dark"]) {
  --bg:      #F6F3FE;
  --card:    #FFFFFF;
  /* #8F7EC8 e non #C9BEEC: la lavanda tenue dava 1,74:1 sulla card
     bianca e faceva REGREDIRE la correzione dei bordi chiesta poco
     prima (era arrivata a 3,36:1). Misurato dopo il cambio, non
     ipotizzato. Questo resta lavanda ma raggiunge 3,51:1. */
  --line:    #8F7EC8;
  --line-2:  #E3DCF6;
  --ink:     #1E1633;
  --ink-2:   #4A3D6B;
  --muted:   #7C6F9C;
}

/* L'AURORA: le stesse tre sfumature del tema scuro, molto più tenui.
   `position: fixed` su uno pseudo-elemento e non `background-attachment`,
   che su iOS non funziona. */
:root:not([data-theme="dark"]) body::before {
  content: ''; position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 80% 55% at 10% 6%,   rgba(167, 139, 250, .28) 0%, transparent 62%),
    radial-gradient(ellipse 70% 50% at 92% 26%,  rgba(196, 181, 253, .30) 0%, transparent 64%),
    radial-gradient(ellipse 95% 55% at 45% 100%, rgba(216, 180, 254, .26) 0%, transparent 68%),
    #F6F3FE;
  pointer-events: none;
}

/* Il pulviscolo: nel chiaro le stelle bianche sparirebbero, quindi
   sono granelli viola chiarissimi. Molto più tenui: su fondo chiaro
   l'occhio li nota il triplo. */
:root:not([data-theme="dark"]) body::after {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background-image:
    radial-gradient(1.4px 1.4px at 22% 16%, rgba(139, 92, 246, .22) 50%, transparent 50%),
    radial-gradient(1px 1px   at 68% 10%,  rgba(167, 139, 250, .18) 50%, transparent 50%),
    radial-gradient(1.6px 1.6px at 86% 40%, rgba(139, 92, 246, .16) 50%, transparent 50%),
    radial-gradient(1.2px 1.2px at 12% 66%, rgba(167, 139, 250, .20) 50%, transparent 50%),
    radial-gradient(1px 1px   at 54% 84%,  rgba(139, 92, 246, .14) 50%, transparent 50%);
  background-size: 420px 420px;
  opacity: .75; pointer-events: none;
  animation: pulviscolo 11s ease-in-out infinite;
}
@keyframes pulviscolo { 0%,100% { opacity: .5; } 50% { opacity: .9; } }

/* I RIQUADRI: bianchi che galleggiano sull'aurora. Niente
   `backdrop-filter` qui — su fondo chiaro sfoca senza che si veda la
   differenza, e costa prestazioni su ogni scorrimento. */
:root:not([data-theme="dark"]) .day-card,
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .mbox,
:root:not([data-theme="dark"]) .sheet,
:root:not([data-theme="dark"]) .intro-card,
:root:not([data-theme="dark"]) .start-card,
:root:not([data-theme="dark"]) .reb-list,
:root:not([data-theme="dark"]) .prog-detail {
  background: rgba(255,255,255,.94);
  /* .52 e non .30: al 30% il bordo spariva sul bianco. */
  border: 1px solid rgba(143,126,200,.52);
  box-shadow:
    0 1px 2px rgba(76,51,140,.06),
    0 6px 20px rgba(107,70,193,.10),
    0 16px 40px rgba(107,70,193,.06);
}

/* L'ANELLO: alone lavanda invece che viola acceso. */
:root:not([data-theme="dark"]) .kcal-ring { position: relative; isolation: isolate; }
:root:not([data-theme="dark"]) .kcal-ring::before {
  content: ''; position: absolute; inset: -10px; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,.35) 0%, rgba(167,139,250,0) 70%);
  filter: blur(13px);
  animation: anelloRespira 4.5s ease-in-out infinite;
}
:root:not([data-theme="dark"]) .kcal-ring > * { z-index: 1; }
:root:not([data-theme="dark"]) .kcal-center b {
  color: var(--ink);
  text-shadow: 0 1px 2px rgba(255,255,255,.9);
}

/* Le icone tonde: fondo pastello del colore del macro. */
.ks-block { position: relative; }
.ks-ic {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 11px;
  font-size: 16px; margin-right: 9px; float: left;
}
.ks-ic-goal { background: rgba(167,139,250,.20); }
.ks-ic-eat  { background: rgba(96,165,250,.20); }
[data-theme="dark"] .ks-ic-goal { background: rgba(167,105,255,.22); }
[data-theme="dark"] .ks-ic-eat  { background: rgba(96,165,250,.20); }

/* Le gocce piene: azzurro pieno su bordo azzurro, come nel mockup. */
:root:not([data-theme="dark"]) .wd.on {
  background: rgba(56,189,248,.16);
  border-color: rgba(56,189,248,.55);
  box-shadow: 0 1px 4px rgba(56,189,248,.20);
}

/* Barra e intestazione: vetro bianco sull'aurora. */
:root:not([data-theme="dark"]) .nav {
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-top-color: rgba(167,139,250,.28);
  box-shadow: 0 -6px 24px rgba(107,70,193,.08);
}
:root:not([data-theme="dark"]) .topbar {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid rgba(167,139,250,.22);
}

/* La pastiglia della serie: oro tenue su bianco. */
:root:not([data-theme="dark"]) .streak-chip {
  background: #fff;
  border: 1px solid rgba(251,191,36,.45);
  color: #B45309;
  box-shadow: 0 2px 8px rgba(180,83,9,.10);
}

/* Il + resta viola pieno: è l'unico elemento che deve "bucare" il
   fondo chiaro, e il bordo bianco lo stacca dalla barra. */
:root:not([data-theme="dark"]) .nav-fab {
  border-color: #fff;
  /* Quattro ombre come nel tema scuro: sostituendone tre si perdeva
     l'ombra di appoggio e il pulsante sembrava incollato alla barra. */
  box-shadow:
    0 0 0 1px rgba(255,255,255,.45) inset,
    0 0 22px rgba(139,92,246,.45),
    0 10px 26px rgba(107,70,193,.38),
    0 3px 10px rgba(60,40,120,.22);
}

@media (prefers-reduced-motion: reduce) {
  :root:not([data-theme="dark"]) body::after,
  :root:not([data-theme="dark"]) .kcal-ring::before { animation: none; }
}

/* La traccia dell'anello: lavanda invece di grigio.
   L'arco colorato c'era già (gradiente viola→azzurro in
   kcalRingGradient), ma il cerchio VUOTO dietro era
   `rgba(15,23,42,.10)`, cioè grigio ardesia: nello screenshot l'anello
   sembrava spento anche col tema cosmico attivo. */
:root:not([data-theme="dark"]) { --ring-track: rgba(167,139,250,.22); }
[data-theme="dark"]            { --ring-track: rgba(167,105,255,.18); }

/* Più respiro fra le card, così l'aurora si vede fra un riquadro e
   l'altro invece di restare coperta. */
.view > .day-card { margin-bottom: 16px; }
.mbox { border-radius: 16px; }

/* Le barre dei macro: piene del colore del macro, come nel mockup.
   Prima la traccia era dello stesso grigio dell'anello. */
.mbox-bar { background: color-mix(in srgb, currentColor 12%, transparent); }
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .mbox-bar { background: var(--ring-track); }
}

/* ══════════════════════════════════════════════════════════════════
   TEMA CHIARO COSMICO — rifiniture dal mockup (04/09/2026)

   Il fondo lavanda e le card bianche c'erano già. Qui le differenze
   di struttura che si vedono confrontando riga per riga:
   Obiettivo/Consumate come due card staccate, angoli più morbidi,
   frecce in riquadri, gocce dell'acqua più grandi.
   ══════════════════════════════════════════════════════════════════ */

/* OBIETTIVO e CONSUMATE: due card separate accanto all'anello, non due
   righe di testo. Nel mockup hanno lo stesso peso visivo dei riquadri
   dei macro, e l'icona tonda a sinistra. */
.kcal-side { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-width: 0; }
.ks-block {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line);
  position: relative;
}
:root:not([data-theme="dark"]) .ks-block {
  background: rgba(255,255,255,.94);
  border-color: rgba(143,126,200,.38);
  box-shadow: 0 1px 2px rgba(76,51,140,.05), 0 4px 14px rgba(107,70,193,.07);
}
[data-theme="dark"] .ks-block {
  background: linear-gradient(160deg, rgba(45,30,85,.66) 0%, rgba(23,16,47,.82) 100%);
  border-color: rgba(150,120,255,.30);
}
/* `float: left` era un rimedio veloce: dentro un flex non serve e
   rompe l'allineamento verticale. */
.ks-ic { float: none; margin-right: 0; flex: 0 0 38px; width: 38px; height: 38px; }
/* Etichetta sopra, numero sotto: nel mockup sono incolonnati. */
.ks-block > .ks-lab,
.ks-block > .ks-val { display: block; }
.ks-block { flex-wrap: wrap; }
.ks-block .ks-lab { flex: 1 1 100%; order: 1; margin-left: 48px; margin-bottom: -2px; }
.ks-block .ks-val { flex: 1 1 100%; order: 2; margin-left: 48px; }
.ks-ic { order: 0; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); }

/* Angoli più morbidi ovunque, come nel mockup. */
:root:not([data-theme="dark"]) .day-card,
:root:not([data-theme="dark"]) .card { border-radius: 20px; }
.mbox { border-radius: 18px; }

/* LE FRECCE del giorno: riquadri con bordo, non icone nude. */
.dn-arrow {
  width: 40px; height: 40px; border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--card);
}
:root:not([data-theme="dark"]) .dn-arrow {
  background: rgba(255,255,255,.9);
  border-color: rgba(143,126,200,.42);
  color: var(--ink-2);
}
[data-theme="dark"] .dn-arrow {
  background: rgba(45,30,85,.5);
  border-color: rgba(150,120,255,.28);
}
.dn-arrow svg { width: 17px; height: 17px; }

/* LE GOCCE dell'acqua: più grandi e con l'angolo arrotondato, come
   nel mockup. Quelle piene si riempiono di azzurro. */
.water-row { gap: 7px; }
.wd { border-radius: 11px; }
:root:not([data-theme="dark"]) .wd {
  border: 1.5px solid rgba(143,126,200,.30);
  background: rgba(255,255,255,.7);
}
:root:not([data-theme="dark"]) .wd.on {
  background: rgba(56,189,248,.14);
  border-color: rgba(56,189,248,.60);
}

/* Il titolo di sezione con l'icona tonda accanto (Idratazione). */
.sec-head { align-items: center; }

/* La riga dei micronutrienti vuoti: nel mockup è una card con icona,
   non una riga di testo sciolto. */
:root:not([data-theme="dark"]) .micro-vuoto,
[data-theme="dark"] .micro-vuoto {
  border-top: 0; padding: 13px 15px; margin: 12px 0 14px;
  border-radius: 16px; border: 1px solid var(--line);
}
:root:not([data-theme="dark"]) .micro-vuoto {
  background: rgba(255,255,255,.75);
  border-color: rgba(143,126,200,.32);
}
[data-theme="dark"] .micro-vuoto {
  background: rgba(45,30,85,.42);
  border-color: rgba(150,120,255,.24);
}

/* Su schermi stretti l'anello e le due card si impilano: senza questo
   le card finirebbero a 90px di larghezza. */
@media (max-width: 400px) {
  .ring-row { gap: 11px; }
  .kcal-ring { width: 132px; height: 132px; flex: 0 0 132px; }
  .ks-ic { width: 34px; height: 34px; flex-basis: 34px; font-size: 15px; }
  .ks-block .ks-lab, .ks-block .ks-val { margin-left: 42px; }
}

/* ══════════════════════════════════════════════════════════════════
   LOGO NUOVO, TESTI PIÙ GRANDI, BORDI SCURI PIÙ CHIARI (04/09/2026)
   ══════════════════════════════════════════════════════════════════ */

/* Il logo esteso nell'intestazione: un PNG unico invece di simbolo e
   testo separati. `width: auto` con altezza fissa: il file è
   284x96 e vincolare la larghezza lo schiaccerebbe. */
/* Il blocco che stava qui (v72) e stato rimosso il 05/09/2026:
   dichiarava `display: block` su .brand .brand-logo, cioe su ENTRAMBI
   i loghi, e con la stessa specificita delle regole che ne nascondono
   uno. Sul telefono si vedeva il logo doppio. Le regole valide sono
   piu sotto, con `!important` per non ricascarci. */
.brand { gap: 0; }
.brand-txt { display: none; }   /* il testo e dentro il PNG */


/* TESTI PIÙ GRANDI: il valore sta in app.js (fontScale), non qui.
   applyFontScale() scrive `--fs` in linea sull'elemento <html> e uno
   stile in linea vince su qualsiasi foglio: la regola qui non aveva
   alcun effetto (misurato: --fs restava 1). */

/* BORDI DEL TEMA SCURO, ancora più chiari.
   Terza segnalazione sullo stesso punto. Misurato prima e dopo:
       #5A6889  ->  3,08:1   (prima correzione)
       #6C5FA8  ->  3,36:1   (con il tema cosmico)
       #9184D0  ->  5,61:1   (adesso)
   Oltre questo il bordo diventa più chiaro del testo secondario e
   l'occhio va sulle cornici invece che sui contenuti. */
[data-theme="dark"] {
  --line:   #9184D0;
  --line-2: #4A3D78;
}

/* Anche i bordi delle card cosmiche, che usano un rgba() proprio e
   non la variabile: senza questo restavano al 34%. */
[data-theme="dark"] .day-card,
[data-theme="dark"] .card,
[data-theme="dark"] .mbox,
[data-theme="dark"] .sheet,
[data-theme="dark"] .intro-card,
[data-theme="dark"] .start-card,
[data-theme="dark"] .reb-list,
[data-theme="dark"] .prog-detail,
[data-theme="dark"] .ks-block {
  border-color: rgba(180,165,255,.55);
}

/* I campi di inserimento: bordo pieno, si deve vedere dove si scrive. */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  border-color: #9184D0;
  border-width: 1.5px;
}

/* Le righe di separazione restano più scure del contorno: con lo
   stesso colore un elenco di dieci voci sembra una griglia. */
[data-theme="dark"] .menu-row,
[data-theme="dark"] .log-row,
[data-theme="dark"] .coach-link,
[data-theme="dark"] .reb-row {
  border-bottom-color: #4A3D78;
}

/* Pastiglie e pulsanti secondari */
[data-theme="dark"] .chip,
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .tgl-row,
[data-theme="dark"] .dn-arrow,
[data-theme="dark"] .wd {
  border-color: #7A6DB8;
}

/* ══════════════════════════════════════════════════════════════════
   LOGHI PER TEMA, INTERRUTTORE, TUTTO PIÙ GRANDE (05/09/2026)
   ══════════════════════════════════════════════════════════════════ */

/* DUE loghi sovrapposti nel DOM, uno solo visibile per volta.
   Alternarli in CSS e non in JavaScript: cambiando `src` da script si
   vedrebbe il logo sbagliato per un istante a ogni caricamento, e a
   ogni cambio di tema ci sarebbe uno sfarfallio. */
/* Tutti con `.brand` davanti: `.brand .brand-logo { display: block }`
   ha due selettori e batteva `.brand-logo-chiaro { display: none }`
   che ne aveva uno. Nel tema scuro si vedevano ENTRAMBI i loghi,
   affiancati. Misurato: 2 immagini visibili invece di 1. */
.brand .brand-logo {
  height: 38px; width: auto; min-width: 0; max-width: none;
  border-radius: 0;
}
/* `!important`: qui `display` non e estetica ma una condizione logica
   — uno O l'altro, mai entrambi. Senza, qualunque regola con due
   selettori scritta piu avanti li rende visibili tutti e due, ed e
   gia successo (logo doppio segnalato il 05/09/2026). */
.brand .brand-logo-chiaro { display: block !important; }
.brand .brand-logo-scuro  { display: none  !important; }
[data-theme="dark"] .brand .brand-logo-chiaro { display: none  !important; }
[data-theme="dark"] .brand .brand-logo-scuro  { display: block !important; }
.brand .brand-logo-chiaro { filter: drop-shadow(0 1px 2px rgba(60,40,120,.14)); }
[data-theme="dark"] .brand .brand-logo { filter: none; }
/* Sotto i 360px l'intestazione con logo + due pulsanti da 42px non
   ci sta: misurato, sbordava di 13 elementi a 320px. */
@media (max-width: 380px) {
  .brand .brand-logo { height: 30px; }
  .ic-btn { width: 38px; height: 38px; }
  .ic-btn svg { width: 19px; height: 19px; }
  .tb-actions { gap: 6px; }
}
@media (max-width: 340px) {
  .brand .brand-logo { height: 26px; }
  .ic-btn { width: 34px; height: 34px; }
}

/* L'INTERRUTTORE del tema: sole o luna, quella giusta per volta. */
.tema-sw { position: relative; }
.tema-sw svg { width: 21px; height: 21px; transition: transform .25s cubic-bezier(.34,1.4,.64,1); }
/* Un simbolo alla volta, mai due. Stesso motivo dei loghi: segnalato
   il 05/09/2026 che si vedevano sole e luna insieme. */
.tema-sw .tema-sole { display: block !important; }
.tema-sw .tema-luna { display: none  !important; }
[data-theme="dark"] .tema-sw .tema-sole { display: none  !important; }
[data-theme="dark"] .tema-sw .tema-luna { display: block !important; }
.tema-sw:active svg { transform: rotate(40deg) scale(.9); }
[data-theme="dark"] .tema-sw {
  color: #FCD34D;                       /* la luna è dorata */
  border-color: rgba(251,191,36,.32);
}
:root:not([data-theme="dark"]) .tema-sw { color: #B45309; }

/* TUTTO PIÙ GRANDE — quarta richiesta.
   `--fs` (in app.js) ingrandisce i testi. Qui crescono gli elementi
   che hanno dimensioni fisse in px e che `--fs` non tocca: bersagli
   tattili, spaziature, riquadri. */
.ic-btn { width: 42px; height: 42px; }
.ic-btn svg { width: 21px; height: 21px; }
.topbar { min-height: 62px; }

/* Campi di inserimento: più alti e con più respiro dentro. */
input, select, textarea { min-height: 50px; padding: 13px 15px; }
.field { margin-bottom: 16px; }
.field label { margin-bottom: 7px; }

/* Pulsanti */
.btn { min-height: 50px; padding: 14px 18px; }
.chip { min-height: 38px; padding: 8px 14px; }

/* Riquadri: più imbottitura, angoli più morbidi */
.card, .day-card, .mbox, .intro-card { padding: 16px; }
.sheet { padding: 20px 18px calc(20px + var(--safe-b)); }

/* Le voci degli elenchi: bersagli più comodi */
.menu-row, .log-row, .coach-link, .tgl-row { padding: 16px 13px; }
.menu-ic, .log-ic, .cl-ic { font-size: calc(20px * var(--fs)); }

/* Le gocce dell'acqua */
.wd { width: 30px; height: 30px; }

/* L'anello resta proporzionato al resto */
.kcal-ring { width: 160px; height: 160px; flex: 0 0 160px; }
@media (max-width: 400px) {
  .kcal-ring { width: 140px; height: 140px; flex: 0 0 140px; }
}

/* I tre riquadri macro a 360px: con i testi al 116% "Carboidrati" e
   il valore non ci stanno in tre colonne da 108px. Misurato: 6
   elementi fuori dallo schermo. */
@media (max-width: 380px) {
  .macro-boxes { gap: 7px; }
  .card, .day-card, .mbox, .intro-card { padding: 13px; }
  .mbox { padding: 11px 9px; }
  .mbox-lab { font-size: calc(10.5px * var(--fs)); }
  .mbox-ic { flex-basis: 19px; width: 19px; height: 19px; font-size: 11px; }
  .mbox-head { gap: 4px; }
  .mbox-val b { font-size: calc(17px * var(--fs)); }
}

/* A 320px anche con le riduzioni un riquadro macro sbordava di poco.
   `minmax(0, 1fr)` invece di tre colonne uguali: senza il minimo a 0
   il contenuto impone la propria larghezza e la griglia si allarga
   oltre lo schermo. È il difetto classico di CSS Grid. */
@media (max-width: 340px) {
  .macro-boxes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .mbox { padding: 9px 6px; min-width: 0; overflow: hidden; }
  .mbox-lab { font-size: calc(9.5px * var(--fs)); }
  .mbox-goal { font-size: calc(9px * var(--fs)); }
}