/* ============================================================
   Arliva Fit — design system
   Clinico: bianco, indaco, dato leggibile.
   ============================================================ */

:root {
  /* brand */
  --indigo-50:  #EEF2FF;
  --indigo-100: #E0E7FF;
  --indigo-200: #C7D2FE;
  --indigo-400: #818CF8;
  --indigo-500: #6366F1;
  --indigo-600: #4F46E5;
  --indigo-700: #4338CA;
  --indigo-900: #312E81;

  --amber:  #F5A524;
  --amber-l:#FEF3C7;

  /* neutri clinici */
  --ink:    #0F172A;
  --ink-2:  #334155;
  --muted:  #55637A;   /* era #64748B: 4,26:1 su fondo indaco chiaro, sotto soglia */
  /* #94A3B8 su bianco dava 2,56:1: sotto il minimo WCAG di 4,5.
     Colpiva le etichette della barra di navigazione e i giorni della
     settimana, cioè testo che serve leggere davvero. #64748B dà 4,76:1
     e resta visivamente "tenue". */
  --faint:  #64748B;
  --line:   #E2E8F0;
  --line-2: #F1F5F9;
  --bg:     #F8FAFC;
  --card:   #FFFFFF;

  /* Avviso a comparsa: coppia fondo/testo esplicita, mai derivata da
     --ink, che si inverte fra i temi e rendeva il testo illeggibile. */
  --toast-bg: #0F172A;
  --toast-fg: #FFFFFF;

  /* ── Superfici "invertite" ──────────────────────────────────────
     Elementi selezionati/attivi disegnati con fondo pieno scuro e
     testo chiaro: chip attive, giorni del piano, pulsanti scuri.
     Prima usavano `background: var(--ink); color: #fff`, ma --ink è
     il colore del TESTO e nel tema scuro diventa quasi bianco:
     risultato, bianco su bianco. Qui la coppia è esplicita e non si
     inverte mai. */
  --sel-bg: #0F172A;
  --sel-fg: #FFFFFF;
  --sel-line: #0F172A;

  /* semantici
     --ok era #059669: su fondo bianco dà 3,77:1, sotto la soglia AA di
     4,5 richiesta per il testo normale. Si vedeva su "-0,5 kg" nella
     scheda peso e sulle percentuali dei micronutrienti. #047857 mantiene
     lo stesso verde ma arriva a 5,48:1. Il colore di RIEMPIMENTO delle
     barre resta quello acceso (--q1): lì non c'è testo sopra. */
  --ok:     #047857;
  --ok-bg:  #ECFDF5;
  --warn:   #B45309;   /* era #D97706: 3,19:1 su bianco, illeggibile per i valori */
  --warn-bg:#FFFBEB;
  --bad:    #C81E1E;   /* era #DC2626: 4,41:1 su fondo rosa, appena sotto soglia */
  --bad-bg: #FEF2F2;
  --info:   #0284C7;
  --info-bg:#F0F9FF;

  /* macro */
  --m-pro: #7C3AED;
  --m-car: #0EA5E9;
  --m-fat: #F59E0B;
  --m-fib: #10B981;

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  --sh-xs: 0 1px 2px rgba(15,23,42,.05);
  --sh-sm: 0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --sh-md: 0 4px 14px rgba(15,23,42,.08);
  --sh-lg: 0 12px 32px rgba(15,23,42,.12);
  --sh-xl: 0 24px 56px rgba(15,23,42,.18);

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --nav-h: 64px;

  /* Scala tipografica: un solo moltiplicatore governa tutta l'app, così
     "testo grande" non rompe gli allineamenti come farebbe uno zoom. */
  --fs: 1;
  --f-xs: calc(11px * var(--fs));
  --f-sm: calc(12.5px * var(--fs));
  --f-md: calc(15px * var(--fs));
  --f-lg: calc(17px * var(--fs));
}

/* ============================================================
   TEMA SCURO
   Non è un'inversione dei colori: i grigi diventano blu-notte
   (come fanno Cronometer e Yazio) perché il nero puro su OLED
   crea uno stacco troppo duro con le card, e l'indaco del brand
   va schiarito o su fondo scuro perde leggibilità (WCAG AA).
   ============================================================ */
[data-theme="dark"] {
  --indigo-50:  #1E1B4B;
  --indigo-100: #262262;
  --indigo-200: #363080;
  --indigo-400: #818CF8;
  --indigo-500: #818CF8;
  --indigo-600: #6366F1;   /* schiarito: #4F46E5 su fondo scuro è illeggibile */
  --indigo-700: #A5B4FC;
  --indigo-900: #C7D2FE;

  --amber:  #FBBF24;
  --amber-l:#422006;

  --ink:    #E7EAF0;       /* non bianco puro: riduce l'abbagliamento */
  --ink-2:  #B4BCCC;
  --muted:  #8A93A6;
  --faint:  #646D80;
  --line:   #2A3142;
  --line-2: #222838;
  --bg:     #0E1117;
  --card:   #161B24;

  /* Nel tema scuro l'avviso resta scuro con testo chiaro: un riquadro
     bianco che compare sopra un'interfaccia nera abbaglia, oltre a
     essere stato la causa del testo bianco su bianco. */
  --toast-bg: #262E3E;
  --toast-fg: #F5F7FA;

  /* Selezione nel tema scuro: indaco pieno, non "quasi bianco".
     Resta ben distinguibile dal fondo (#0E1117) e il testo bianco
     sopra ha 7,4:1. */
  --sel-bg: #4F46E5;
  --sel-fg: #FFFFFF;
  --sel-line: #4F46E5;

  --ok:     #34D399;
  --ok-bg:  #06281F;
  --warn:   #FBBF24;
  --warn-bg:#2C1F04;
  --bad:    #F87171;
  --bad-bg: #2D1214;
  --info:   #38BDF8;
  --info-bg:#04222F;

  --m-pro: #A78BFA;
  --m-car: #38BDF8;
  --m-fat: #FBBF24;
  --m-fib: #34D399;

  /* Le ombre chiare spariscono sul buio: si usa il bordo come rilievo */
  --sh-xs: 0 1px 2px rgba(0,0,0,.4);
  --sh-sm: 0 1px 3px rgba(0,0,0,.5);
  --sh-md: 0 4px 14px rgba(0,0,0,.5);
  --sh-lg: 0 12px 32px rgba(0,0,0,.6);
  --sh-xl: 0 24px 56px rgba(0,0,0,.7);

  color-scheme: dark;
}

/* Le immagini e i grafici non devono "brillare" sul fondo scuro */
[data-theme="dark"] img,
[data-theme="dark"] .thumb { filter: brightness(.92); }



* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; min-height: 100%; overscroll-behavior-y: none; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  font-size: var(--f-md);
  /* il cambio tema non deve "sbattere": transizione breve, solo sui colori */
  transition: background-color .18s ease, color .18s ease;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
h1,h2,h3,h4,h5 { margin: 0; line-height: 1.25; letter-spacing: -.021em; }
p { margin: 0; }
input, select { -webkit-appearance: none; appearance: none; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  padding-bottom: calc(var(--nav-h) + var(--safe-b) + 12px);
  position: relative;
  overflow-x: hidden;
  background: var(--bg);
}

/* ───────── topbar ───────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: calc(var(--safe-t) + 12px) 16px 10px;
  background: rgba(248,250,252,.88);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.topbar.scrolled { border-bottom-color: var(--line); }
.brand { display: flex; align-items: center; gap: 9px; }
.brand img { width: 30px; height: 30px; border-radius: 9px; display: block; }
.brand-txt { font-size: calc(17.5px * var(--fs)); font-weight: 700; letter-spacing: -.03em; }
.brand-txt i { font-style: normal; font-weight: 400; color: var(--indigo-700); }

.tb-actions { display: flex; align-items: center; gap: 7px; }
.lang-tog {
  display: flex; background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px; box-shadow: var(--sh-xs);
}
.lang-tog button {
  font-size: calc(11px * var(--fs)); font-weight: 700; padding: 8px 12px;
  border-radius: 999px; color: var(--faint); letter-spacing: .03em; transition: .16s;
  min-height: 34px; min-width: 42px;
}
.lang-tog button.on { background: var(--sel-bg); color: var(--sel-fg); }

.ic-btn {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--card); border: 1px solid var(--line);
  display: grid; place-items: center;
  box-shadow: var(--sh-xs); transition: .16s; color: var(--ink-2);
}
.ic-btn:active { transform: scale(.94); background: var(--line-2); }
.ic-btn svg { width: 17px; height: 17px; }

/* ───────── views ───────── */
.view { display: none; padding: 2px 16px 0; animation: fade .3s ease both; }
.view.on { display: block; }
@keyframes fade { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }

/* ───────── ring dashboard ───────── */
.day-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 18px;
  box-shadow: var(--sh-sm);
}
.day-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.day-greet { font-size: calc(12px * var(--fs)); color: var(--muted); font-weight: 550; }
.day-title { font-size: calc(18px * var(--fs)); font-weight: 700; margin-top: 1px; }

.streak-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--amber-l); border: 1px solid #FDE68A;
  color: #92400E; padding: 5px 10px; border-radius: 999px;
  font-size: calc(12px * var(--fs)); font-weight: 700; white-space: nowrap; flex-shrink: 0;
}

.ring-row { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.kcal-ring { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
/* Il vecchio anello usava stroke-dasharray e serviva ruotarlo di -90°
   per partire dall'alto. Il nuovo anello a settori calcola già gli angoli
   partendo da mezzogiorno: ruotarlo lo sfaserebbe di un quarto di giro. */
.kcal-ring svg { display: block; }
.kcal-center {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
}
.kcal-center b { font-size: calc(27px * var(--fs)); font-weight: 750; letter-spacing: -.045em; line-height: 1; display: block; }
.kcal-center small { font-size: calc(10px * var(--fs)); color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; display: block; margin-top: 3px; }
.kcal-center .over { color: var(--bad); }

/* Legenda dei macro: ora è a fianco dell'anello a settori, una riga per
   macro. Le vecchie regole imponevano una colonna con la barra sotto:
   con l'anello nuovo le barre non servono più. */
.macro-legend { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ml-name { font-size: calc(11.5px * var(--fs)); font-weight: 650; color: var(--ink-2); display: flex; align-items: center; gap: 5px; }
.ml-dot { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }
.ml-val { font-size: calc(11.5px * var(--fs)); font-weight: 650; color: var(--muted); }
.ml-val b { color: var(--ink); font-weight: 700; }

.day-foot {
  display: flex; gap: 8px; margin-top: 15px; padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.df-item { flex: 1; text-align: center; }
.df-item b { display: block; font-size: calc(15px * var(--fs)); font-weight: 700; letter-spacing: -.02em; }
.df-item small { font-size: calc(10px * var(--fs)); color: var(--muted); font-weight: 600; }

/* ───────── log CTA ───────── */
.log-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }
.log-btn {
  border-radius: var(--r-lg); padding: 15px 13px;
  display: flex; align-items: center; gap: 11px;
  transition: transform .14s cubic-bezier(.34,1.4,.64,1), box-shadow .18s;
  text-align: left;
}
.log-btn:active { transform: scale(.975); }
.log-btn.primary {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--indigo-600), var(--indigo-700) 70%, var(--indigo-900));
  color: #fff; box-shadow: 0 8px 22px rgba(67,56,202,.32);
  padding: 17px 16px;
}
.log-btn.ghost { background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-xs); }
.lb-ic {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; flex-shrink: 0;
}
.log-btn.primary .lb-ic { background: rgba(255,255,255,.16); }
.log-btn.ghost .lb-ic { background: var(--indigo-50); color: var(--indigo-700); }
.lb-ic svg { width: 20px; height: 20px; }
.lb-txt b { display: block; font-size: calc(14.5px * var(--fs)); font-weight: 700; letter-spacing: -.02em; }
.lb-txt small { font-size: calc(11.5px * var(--fs)); opacity: .72; font-weight: 500; }
.log-btn.ghost .lb-txt small { color: var(--muted); opacity: 1; }

/* ───────── sections ───────── */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 22px 0 10px;
}
.sec-head h3 { font-size: calc(15px * var(--fs)); font-weight: 700; }
.sec-head button, .sec-head a { font-size: calc(12.5px * var(--fs)); font-weight: 650; color: var(--indigo-600); }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 15px; box-shadow: var(--sh-xs);
}

.empty {
  text-align: center; padding: 30px 20px;
  border: 1px dashed var(--line); border-radius: var(--r-lg);
  background: var(--card);
}
.empty svg { width: 30px; height: 30px; color: var(--faint); margin-bottom: 9px; }
.empty p { color: var(--muted); font-size: calc(13px * var(--fs)); }

/* ───────── meal groups ───────── */
.meal-group { margin-bottom: 12px; }
.mg-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3px 7px; gap: 8px;
}
.mg-name { font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.mg-name svg { width: 14px; height: 14px; color: var(--muted); }
.mg-kcal { font-size: calc(12px * var(--fs)); font-weight: 650; color: var(--muted); }

.entry {
  display: flex; align-items: center; gap: 11px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 10px 12px;
  margin-bottom: 6px; box-shadow: var(--sh-xs);
  width: 100%; text-align: left; transition: .15s;
}
.entry:active { background: var(--line-2); transform: scale(.99); }
.entry-thumb {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--line-2); overflow: hidden;
  display: grid; place-items: center; font-size: calc(17px * var(--fs));
}
/* Emoji e immagine occupano la stessa cella: l'immagine copre l'emoji
   finché carica, altrimenti `onerror` la nasconde e sotto c'è già il
   ripiego. */
.entry-thumb > * { grid-area: 1 / 1; }
.entry-thumb img { width: 100%; height: 100%; object-fit: cover; }
.entry-thumb:not(.ph) { border: 1px solid var(--line); }
.entry-body { flex: 1; min-width: 0; }
.entry-name {
  font-size: calc(13.5px * var(--fs)); font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.entry-meta { font-size: calc(11px * var(--fs)); color: var(--muted); margin-top: 1px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.entry-kcal { text-align: right; flex-shrink: 0; }
.entry-kcal b { display: block; font-size: calc(14px * var(--fs)); font-weight: 700; letter-spacing: -.02em; }
.entry-kcal small { font-size: calc(9.5px * var(--fs)); color: var(--faint); font-weight: 600; }

/* source badge */
.src {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1.5px 6px; border-radius: 5px;
  font-size: calc(9.5px * var(--fs)); font-weight: 700; letter-spacing: .01em;
  text-transform: uppercase;
}
.src svg { width: 9px; height: 9px; }
/* Colori scuriti apposta: --ok e --info sui rispettivi fondi tenui davano
   3,58:1 e 3,84:1. Sono le etichette di provenienza del dato, cioè proprio
   quelle che devono essere leggibili a colpo d'occhio. */
.src.verified { background: var(--ok-bg); color: #047857; }
.src.ai { background: var(--indigo-50); color: var(--indigo-700); }
.src.usda { background: var(--info-bg); color: #0369A1; }
.src.manual { background: var(--line-2); color: var(--muted); }

/* ───────── scores ───────── */
.ns-badge {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 6px;
  font-size: calc(12px * var(--fs)); font-weight: 800; color: #fff; flex-shrink: 0;
}
.ns-a { background: #038141; } .ns-b { background: #85BB2F; }
.ns-c { background: #FECB02; color: #4a3a00; } .ns-d { background: #EE8100; }
.ns-e { background: #E63E11; color: #000; }   /* nero: 5,06:1, il bianco dava 4,15 */

.nova-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 6px;
  font-size: calc(10px * var(--fs)); font-weight: 700;
}
.nova-1 { background: var(--ok-bg); color: var(--ok); }
.nova-2 { background: #F0FDF4; color: #15803D; }
.nova-3 { background: var(--warn-bg); color: var(--warn); }
.nova-4 { background: var(--bad-bg); color: var(--bad); }

/* ───────── search / scanner sheet ───────── */
.sheet-bg {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(2px);
  display: none; align-items: flex-end; justify-content: center;
}
.sheet-bg.on { display: flex; animation: fade .22s both; }
.sheet {
  background: var(--card); width: 100%; max-width: 480px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 7px 16px calc(18px + var(--safe-b));
  max-height: 90vh; overflow-y: auto;
  animation: up .3s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes up { from { transform: translateY(100%);} to { transform:none;} }
.grab { width: 34px; height: 4px; background: var(--line); border-radius: 99px; margin: 7px auto 14px; }
/* X di chiusura: resta in alto anche scorrendo, perché lo sheet può
   essere molto più alto dello schermo (una dieta di 7 giorni non ci sta
   mai). `sticky` invece di `fixed`: dentro un contenitore che scorre,
   fixed si ancorerebbe alla finestra e finirebbe sopra altri pannelli. */
.sheet { position: relative; }
.sheet-x {
  position: sticky; top: 0; float: right; z-index: 5;
  width: 34px; height: 34px; margin: -30px -4px 0 0;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--line-2); color: var(--muted);
  border: 1px solid var(--line);
}
.sheet-x svg { width: 17px; height: 17px; }
.sheet-x:active { transform: scale(.92); }
.sheet h3 { font-size: calc(17px * var(--fs)); font-weight: 700; margin-bottom: 3px; }
.sheet .sub { font-size: calc(12.5px * var(--fs)); color: var(--muted); margin-bottom: 15px; }

.field { margin-bottom: 13px; }
.field label { display: block; font-size: calc(11.5px * var(--fs)); font-weight: 650; color: var(--ink-2); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 11px 12px; font-size: calc(15px * var(--fs)); background: var(--card);
  outline: none; transition: .16s; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--indigo-500); box-shadow: 0 0 0 3px var(--indigo-50);
}
.field-row { display: flex; gap: 9px; }
.field-row .field { flex: 1; }
.hint { font-size: calc(11px * var(--fs)); color: var(--muted); margin-top: 4px; }

.search-bar { position: relative; margin-bottom: 12px; }
.search-bar input { padding-left: 36px; }
.search-bar svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--faint); pointer-events: none;
}
.sb-spin { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }

.res-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.res-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--card);
  text-align: left; width: 100%; transition: .14s;
}
.res-item:active { background: var(--indigo-50); border-color: var(--indigo-200); }
.res-item .ri-body { flex: 1; min-width: 0; }
.res-item .ri-name { font-size: calc(13.5px * var(--fs)); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-item .ri-meta { font-size: calc(11px * var(--fs)); color: var(--muted); margin-top: 1px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.res-item .ri-kcal { font-size: calc(13px * var(--fs)); font-weight: 700; flex-shrink: 0; }

/* chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-2); transition: .14s;
}
.chip.on { background: var(--sel-bg); border-color: var(--sel-line); color: var(--sel-fg); }
.chip.sm { padding: 4px 9px; font-size: calc(11px * var(--fs)); }

/* ───────── buttons ───────── */
.btn {
  border-radius: var(--r-md); padding: 13px 18px;
  font-size: calc(14.5px * var(--fs)); font-weight: 650; text-align: center;
  transition: .15s; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; width: 100%;
  /* Le traduzioni inglesi e il testo ingrandito (fino al 130%) possono
     eccedere: meglio andare a capo che farsi tagliare la parola. */
  min-width: 0; white-space: normal; overflow-wrap: anywhere; line-height: 1.25;
}
.btn:active { transform: scale(.98); }
.btn svg { width: 17px; height: 17px; }
.btn-primary { background: var(--indigo-600); color: #fff; box-shadow: 0 3px 10px rgba(79,70,229,.26); }
.btn-primary:disabled { background: var(--indigo-200); box-shadow: none; }
.btn-dark { background: var(--sel-bg); color: var(--sel-fg); }
.btn-ghost { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.btn-soft { background: var(--indigo-50); color: var(--indigo-700); }
.btn-danger { background: var(--bad-bg); color: var(--bad); }
/* I pulsanti affiancati devono dividersi lo spazio, non prendere ognuno
   il 100% (`.btn` ha `width: 100%`, pensato per l'uso a tutta larghezza).
   Senza `flex: 1`, "Replace plan" straripava; con un `flex` senza base
   si restringeva a una lettera. `flex: 1 1 auto` parte dal contenuto e
   comprime solo se serve.
   Il selettore [style*="flex:0"] NON funziona: l'attributo inline scritto
   nel markup ha uno spazio ("flex:0 0 auto"), e comunque affidarsi al
   testo dell'attributo è fragile. Si usa una classe esplicita. */
.btn-row { display: flex; gap: 8px; align-items: stretch; }
.btn-row > .btn { flex: 1 1 auto; min-width: 0; width: auto; }
.btn-row > .btn-icon { flex: 0 0 auto; }

/* ───────── camera ───────── */
.cam { position: fixed; inset: 0; z-index: 90; background: #000; display: none; flex-direction: column; }
.cam.on { display: flex; }
.cam video { flex: 1; width: 100%; object-fit: cover; background: #000; }
.cam-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  padding: calc(var(--safe-t) + 12px) 16px 12px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.55), transparent);
}
.cam-top button {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.18); backdrop-filter: blur(8px);
  color: #fff; display: grid; place-items: center; flex-shrink: 0;
}
.cam-top button svg { width: 17px; height: 17px; }
.cam-mode {
  display: flex; gap: 3px; background: rgba(0,0,0,.42);
  padding: 3px; border-radius: 999px; backdrop-filter: blur(8px);
}
.cam-mode button {
  width: auto; height: auto; border-radius: 999px; background: transparent;
  padding: 6px 13px; font-size: calc(11.5px * var(--fs)); font-weight: 650; color: rgba(255,255,255,.65);
}
.cam-mode button.on { background: #fff; color: var(--ink); }

.cam-frame {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-56%);
  width: min(72vw, 280px); aspect-ratio: 1;
  z-index: 2; pointer-events: none; transition: .3s;
}
.cam-frame.barcode { aspect-ratio: 1.9; width: min(80vw, 320px); }
.cam-frame i { position: absolute; width: 26px; height: 26px; border: 3px solid #fff; }
.cam-frame i:nth-child(1){ top:0; left:0; border-right:0; border-bottom:0; border-radius:12px 0 0 0;}
.cam-frame i:nth-child(2){ top:0; right:0; border-left:0; border-bottom:0; border-radius:0 12px 0 0;}
.cam-frame i:nth-child(3){ bottom:0; left:0; border-right:0; border-top:0; border-radius:0 0 0 12px;}
.cam-frame i:nth-child(4){ bottom:0; right:0; border-left:0; border-top:0; border-radius:0 0 12px 0;}
.cam-frame .laser {
  position: absolute; left: 8%; right: 8%; height: 2px;
  background: linear-gradient(90deg, transparent, #F5A524, transparent);
  border: 0; border-radius: 0; width: auto;
  animation: laser 2s ease-in-out infinite;
}
@keyframes laser { 0%,100%{ top: 18%; } 50% { top: 78%; } }

.cam-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  padding: 18px 16px calc(var(--safe-b) + 26px);
  display: flex; align-items: center; justify-content: space-around;
  background: linear-gradient(0deg, rgba(0,0,0,.62), transparent);
}
.shutter {
  width: 68px; height: 68px; border-radius: 50%;
  background: #fff; border: 4px solid rgba(255,255,255,.35);
  box-shadow: 0 0 0 2px rgba(0,0,0,.2); transition: transform .12s;
}
.shutter:active { transform: scale(.9); }
.cam-side {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.18); backdrop-filter: blur(8px);
  color: #fff; display: grid; place-items: center;
}
.cam-side svg { width: 19px; height: 19px; }
.cam-hint {
  position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 108px);
  text-align: center; color: #fff; font-size: calc(12px * var(--fs)); font-weight: 550;
  z-index: 3; text-shadow: 0 1px 4px rgba(0,0,0,.6); padding: 0 30px;
}
.cam-error {
  position: absolute; inset: 0; z-index: 4; background: #0A0A0A;
  display: none; place-items: center; padding: 28px; text-align: center; color: #fff;
}
.cam-error.on { display: grid; }
.cam-error .btn { max-width: 300px; }

/* ───────── analysing ───────── */
.analysing { text-align: center; padding: 40px 20px; }
.scan-box {
  position: relative; width: 148px; height: 148px; margin: 0 auto 22px;
  border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg);
  background: var(--line-2);
}
.scan-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-box::after {
  content: ''; position: absolute; left: 0; right: 0; height: 42%;
  background: linear-gradient(180deg, transparent, rgba(99,102,241,.5), transparent);
  animation: scan 1.6s ease-in-out infinite;
}
@keyframes scan { 0%,100% { top: -42%; } 50% { top: 100%; } }
.an-title { font-size: calc(17px * var(--fs)); font-weight: 700; margin-bottom: 5px; }
.an-step { color: var(--muted); font-size: calc(13px * var(--fs)); min-height: 19px; transition: .25s; }
.an-bar { width: 168px; height: 4px; background: var(--line); border-radius: 99px; margin: 16px auto 0; overflow: hidden; }
.an-bar i { display: block; height: 100%; background: var(--indigo-600); border-radius: 99px; transition: width .45s ease; }

/* ───────── result ───────── */
.res-hero {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  box-shadow: var(--sh-md); background: var(--ink); margin-bottom: 12px;
}
.res-hero img { width: 100%; height: 176px; object-fit: cover; display: block; }
.res-hero .grad { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,14,28,.92) 6%, rgba(9,14,28,.28) 50%, transparent 76%); }
.res-hero .txt { position: absolute; left: 15px; right: 15px; bottom: 13px; color: #fff; }
.res-hero .nm { font-size: calc(19px * var(--fs)); font-weight: 700; letter-spacing: -.03em; }
.res-hero .pt { font-size: calc(12px * var(--fs)); opacity: .82; margin-top: 2px; font-weight: 500; }
.res-hero .tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,.94); color: var(--ink);
  padding: 4px 10px; border-radius: 999px;
  font-size: calc(10px * var(--fs)); font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  display: flex; align-items: center; gap: 4px;
}
.res-hero .tag svg { width: 10px; height: 10px; }

.kpi-row { display: flex; gap: 9px; margin-bottom: 11px; }
.kpi {
  flex: 1; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 13px; box-shadow: var(--sh-xs); text-align: center;
}
.kpi b { display: block; font-size: calc(22px * var(--fs)); font-weight: 750; letter-spacing: -.04em; line-height: 1.1; }
.kpi small { font-size: calc(10px * var(--fs)); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.macro-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }
.mc {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 12px; box-shadow: var(--sh-xs);
}
.mc-top { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.mc-dot { width: 8px; height: 8px; border-radius: 2.5px; }
.mc-name { font-size: calc(11px * var(--fs)); font-weight: 650; color: var(--ink-2); }
.mc-val { font-size: calc(19px * var(--fs)); font-weight: 750; letter-spacing: -.035em; }
.mc-val span { font-size: calc(11px * var(--fs)); font-weight: 600; color: var(--muted); margin-left: 1px; }
.mc-bar { height: 3.5px; background: var(--line-2); border-radius: 99px; margin-top: 7px; overflow: hidden; }
.mc-bar i { display: block; height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(.2,.8,.2,1); }

.micro-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.micro {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 9px 7px; text-align: center;
}
.micro b { display: block; font-size: calc(13.5px * var(--fs)); font-weight: 700; }
.micro small { font-size: calc(9.5px * var(--fs)); color: var(--muted); font-weight: 600; }
.micro .rdi { font-size: calc(9px * var(--fs)); color: var(--indigo-600); font-weight: 700; margin-top: 1px; }

/* pros cons */
.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.pc { border-radius: var(--r-md); padding: 12px; border: 1px solid; }
.pc.good { background: var(--ok-bg); border-color: #A7F3D0; }
.pc.bad { background: var(--bad-bg); border-color: #FECACA; }
.pc h5 { font-size: calc(10px * var(--fs)); font-weight: 750; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; }
.pc.good h5 { color: var(--ok); } .pc.bad h5 { color: var(--bad); }
.pc ul { margin: 0; padding-left: 14px; }
.pc li { font-size: calc(11.5px * var(--fs)); line-height: 1.5; color: var(--ink-2); }

/* swap card */
.swap {
  background: linear-gradient(135deg, var(--indigo-50), #F5F3FF);
  border: 1px solid var(--indigo-200);
  border-radius: var(--r-lg); padding: 14px;
}
.swap-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.swap-head svg { width: 16px; height: 16px; color: var(--indigo-600); }
.swap-head b { font-size: calc(12.5px * var(--fs)); font-weight: 700; color: var(--indigo-900); }
.swap-item { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(99,102,241,.16); }
.swap-item:first-of-type { border-top: 0; }
.swap-arrow { color: var(--indigo-400); flex-shrink: 0; }
.swap-arrow svg { width: 15px; height: 15px; display: block; }
.swap-txt { flex: 1; min-width: 0; }
.swap-txt b { display: block; font-size: calc(12.5px * var(--fs)); font-weight: 650; }
.swap-txt small { font-size: calc(11px * var(--fs)); color: var(--muted); }
.swap-save {
  font-size: calc(11px * var(--fs)); font-weight: 750; color: var(--ok);
  background: #fff; padding: 3px 8px; border-radius: 6px; flex-shrink: 0;
}

/* tips */
.tip { display: flex; gap: 10px; align-items: flex-start; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; box-shadow: var(--sh-xs); }
.tip-n {
  width: 21px; height: 21px; border-radius: 6px; background: var(--indigo-50);
  color: var(--indigo-700); display: grid; place-items: center;
  font-size: calc(10.5px * var(--fs)); font-weight: 750; flex-shrink: 0;
}
.tip p { font-size: calc(12.5px * var(--fs)); line-height: 1.5; color: var(--ink-2); }

.tag-row { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-item {
  background: var(--warn-bg); border: 1px solid #FDE68A; color: #92400E;
  padding: 4px 9px; border-radius: 999px; font-size: calc(10.5px * var(--fs)); font-weight: 650;
}

.disclaim { font-size: calc(10.5px * var(--fs)); color: var(--faint); text-align: center; line-height: 1.5; margin-top: 12px; }

/* ───────── coach ───────── */
.coach-hero {
  background: linear-gradient(135deg, var(--indigo-700), var(--indigo-900));
  border-radius: var(--r-xl); padding: 18px; color: #fff;
  box-shadow: 0 10px 26px rgba(49,46,129,.28); position: relative; overflow: hidden;
}
.coach-hero::after {
  content:''; position: absolute; right: -40px; top: -50px;
  width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle, rgba(245,165,36,.28), transparent 68%);
}
.coach-q { font-size: calc(15.5px * var(--fs)); font-weight: 650; line-height: 1.4; position: relative; }
.coach-hero small { font-size: calc(11px * var(--fs)); opacity: .78; display: block; margin-top: 8px; position: relative; font-weight: 500; }

.coach-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 14px; display: flex; gap: 12px;
  box-shadow: var(--sh-xs); margin-top: 9px;
}
.cc-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.cc-ic svg { width: 18px; height: 18px; }
.coach-card h4 { font-size: calc(13.5px * var(--fs)); font-weight: 700; margin-bottom: 3px; }
.coach-card p { font-size: calc(12.5px * var(--fs)); color: var(--ink-2); line-height: 1.5; }
.cc-label { font-size: calc(9.5px * var(--fs)); color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-top: 5px; }

.insight {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--indigo-500);
  border-radius: var(--r-md); padding: 13px; margin-top: 9px; box-shadow: var(--sh-xs);
}
.insight.warn { border-left-color: var(--warn); }
.insight.good { border-left-color: var(--ok); }
.insight b { font-size: calc(12.5px * var(--fs)); font-weight: 700; display: block; margin-bottom: 3px; }
.insight p { font-size: calc(12px * var(--fs)); color: var(--ink-2); line-height: 1.5; }

/* ───────── progress ───────── */
.chart-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 15px; box-shadow: var(--sh-xs); }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.chart-head b { font-size: calc(13.5px * var(--fs)); font-weight: 700; }
.chart-head small { font-size: calc(11.5px * var(--fs)); color: var(--muted); }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 96px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; height: 100%; justify-content: flex-end; }
.bar-col .bar {
  width: 100%; max-width: 26px; border-radius: 5px 5px 2px 2px;
  background: var(--indigo-500); min-height: 3px; transition: height .5s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.bar-col .bar.over { background: var(--bad); }
.bar-col .bar.under { background: var(--indigo-200); }
.bar-col span { font-size: calc(9.5px * var(--fs)); color: var(--faint); font-weight: 600; }
.goal-line { position: relative; height: 0; }
.goal-line i {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1.5px dashed var(--faint);
}

.week-strip { display: flex; gap: 5px; margin-top: 12px; }
.ws { flex: 1; text-align: center; }
.ws span { display: block; font-size: calc(9px * var(--fs)); color: var(--muted); font-weight: 650; margin-bottom: 4px; text-transform: uppercase; }
.ws i {
  display: grid; place-items: center; height: 26px; border-radius: 7px;
  background: var(--line-2); font-style: normal; font-size: calc(11px * var(--fs)); color: var(--faint);
}
.ws.done i { background: var(--indigo-600); color: #fff; font-weight: 700; }
.ws.today i { box-shadow: 0 0 0 2px var(--indigo-200); }

/* water */
/* `flex-wrap` è indispensabile: con più di dieci gocce la riga spingeva
   il pulsante "+" oltre il bordo dello schermo, e i tester non potevano
   più toccarlo (report 19/08/2026). Andando a capo la riga cresce in
   altezza invece che in larghezza. */
.water-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
/* Con il ritorno a capo servono una base minima e una massima: senza,
   una riga da tre elementi li stirerebbe per tutta la larghezza. */
.water-row .wd { flex: 1 1 26px; max-width: 46px; }
.wd {
  flex: 1; height: 34px; border-radius: 8px;
  border: 1.5px solid var(--line); background: var(--card);
  display: grid; place-items: center; transition: .16s;
}
.wd svg { width: 15px; height: 15px; color: var(--line); }
.wd.on { background: var(--info-bg); border-color: #7DD3FC; }
.wd.on svg { color: var(--info); }

/* TEMA SCURO — le gocce vuote erano quasi invisibili.
   Il bordo usava --line (#2A3142) su card #161B24: contrasto 1,33:1,
   sotto il minimo di 3:1 richiesto per un elemento d'interfaccia.
   Segnalato il 15/08/2026. Bordo azzurro tenue + un alone interno che
   suggerisce il "vuoto da riempire"; quelle piene restano più accese,
   così la differenza resta leggibile a colpo d'occhio. */
[data-theme="dark"] .wd {
  border-color: #5B7BA8;                       /* 3,98:1 sulla card */
  background: rgba(56, 189, 248, .04);
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, .07);
}
[data-theme="dark"] .wd svg { color: #7C97BD; }
[data-theme="dark"] .wd.on {
  border-color: #38BDF8;
  background: rgba(56, 189, 248, .16);
  box-shadow: 0 0 10px rgba(56, 189, 248, .30), inset 0 0 6px rgba(56, 189, 248, .18);
}
[data-theme="dark"] .wd.on svg { color: #7DD3FC; }
[data-theme="dark"] .wd-add {
  border-color: #6D7FB8;
  background: rgba(124, 141, 255, .06);
}
[data-theme="dark"] .wd-add svg { color: #A5B4FC; }
/* Il "+" aggiunge un bicchiere alla volta: è l'azione di tutti i giorni,
   mentre toccare una goccia serve a correggere il totale. Si distingue
   dalle gocce con il tratteggio, così non sembra l'undicesima goccia. */
.wd-add {
  flex: 0 0 34px; border-style: dashed; border-color: var(--indigo-200);
}
.wd-add svg { width: 16px; height: 16px; color: var(--indigo-700); }
.wd-add:active { transform: scale(.94); }

/* fasting */
.fast-ring { position: relative; width: 116px; height: 116px; margin: 0 auto; }
.fast-ring svg { transform: rotate(-90deg); }
.fast-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.fast-center b { font-size: calc(21px * var(--fs)); font-weight: 750; letter-spacing: -.04em; display: block; line-height: 1; }
.fast-center small { font-size: calc(9.5px * var(--fs)); color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; }

/* ───────── nav ───────── */
.nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  height: calc(var(--nav-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(16px);
  border-top: 1px solid var(--line);
  display: flex; z-index: 50;
}
.nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; color: var(--faint); transition: .16s;
}
.nav button svg { width: 20px; height: 20px; transition: transform .2s cubic-bezier(.34,1.4,.64,1); }
.nav button b { font-size: calc(9.5px * var(--fs)); font-weight: 650; }
.nav button.on { color: var(--indigo-600); }
.nav button.on svg { transform: translateY(-1px) scale(1.06); }

/* ───────── misc ───────── */
/* L'avviso usava `background: var(--ink); color: #fff`.
   Nel tema chiaro funziona (--ink è quasi nero). Nel tema SCURO --ink
   diventa #E7EAF0, cioè quasi bianco: testo bianco su fondo bianco,
   contrasto 1,1:1, illeggibile. Servono due variabili dedicate, non
   una riusata al contrario. */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + var(--safe-b) + 14px);
  transform: translate(-50%, 16px);
  background: var(--toast-bg); color: var(--toast-fg);
  padding: 11px 18px; border-radius: 999px;
  font-size: calc(12.5px * var(--fs)); font-weight: 600; box-shadow: var(--sh-lg);
  z-index: 100; opacity: 0; pointer-events: none; transition: .25s;
  max-width: 88vw; text-align: center;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

.spin {
  width: 15px; height: 15px; border: 2px solid var(--line);
  border-top-color: var(--indigo-600); border-radius: 50%;
  animation: rot .7s linear infinite; display: inline-block;
}
@keyframes rot { to { transform: rotate(360deg); } }

.skel {
  background: linear-gradient(90deg, var(--line-2) 25%, #fff 50%, var(--line-2) 75%);
  background-size: 200% 100%; animation: shim 1.3s infinite; border-radius: var(--r-lg);
}
@keyframes shim { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

.err-box { background: var(--bad-bg); border: 1px solid #FECACA; border-radius: var(--r-lg); padding: 16px; text-align: center; }
.err-box p { font-size: calc(13px * var(--fs)); color: #991B1B; line-height: 1.5; }

.gem-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card); border: 1px solid var(--line);
  color: var(--muted); padding: 5px 11px; border-radius: 999px;
  font-size: calc(10.5px * var(--fs)); font-weight: 650;
}
.gem-badge .dot { width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo-500), #0EA5E9); flex-shrink: 0; }
.center { text-align: center; }
.mt8{margin-top:8px} .mt12{margin-top:12px} .mt16{margin-top:16px} .mb8{margin-bottom:8px}

/* onboarding */
.ob { position: fixed; inset: 0; z-index: 95; background: var(--bg); display: none; overflow-y: auto; }
.ob.on { display: block; }
.ob-inner { max-width: 480px; margin: 0 auto; padding: calc(var(--safe-t) + 30px) 22px calc(var(--safe-b) + 24px); min-height: 100dvh; display: flex; flex-direction: column; }
.ob-logo { width: 56px; height: 56px; border-radius: 16px; margin-bottom: 20px; }
.ob h1 { font-size: calc(25px * var(--fs)); font-weight: 750; letter-spacing: -.035em; margin-bottom: 7px; }
.ob .lead { font-size: calc(14px * var(--fs)); color: var(--muted); line-height: 1.55; margin-bottom: 22px; }
.ob-step { display: none; } .ob-step.on { display: block; animation: fade .3s both; }
.opt-grid { display: grid; gap: 8px; }
.opt {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  background: var(--card); text-align: left; transition: .16s; width: 100%;
}
.opt.on { border-color: var(--indigo-600); background: var(--indigo-50); }
.opt-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--line-2); display: grid; place-items: center; flex-shrink: 0; }
.opt.on .opt-ic { background: #fff; }
.opt-ic svg { width: 18px; height: 18px; color: var(--ink-2); }
.opt.on .opt-ic svg { color: var(--indigo-600); }
.opt b { display: block; font-size: calc(14px * var(--fs)); font-weight: 650; }
.opt small { font-size: calc(11.5px * var(--fs)); color: var(--muted); }
.ob-foot { margin-top: auto; padding-top: 22px; }
.ob-dots { display: flex; gap: 5px; justify-content: center; margin-bottom: 14px; }
.ob-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: .2s; }
.ob-dots i.on { background: var(--indigo-600); width: 18px; border-radius: 99px; }

@media (min-width: 520px) { .app { box-shadow: 0 0 50px rgba(15,23,42,.07); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ═══════════ PIANO DEL DIETOLOGO ═══════════ */
/* ── Intestazione del piano ──────────────────────────────────────
   BUG (segnalato dall'utente, 31/07/2026): "Generato da Arliva Fit" e le
   etichette kcal/pasti/giorni erano quasi invisibili.

   Causa: il gradiente usava var(--indigo-700) e var(--indigo-900), che
   nel TEMA SCURO sono deliberatamente INVERTITI (#A5B4FC e #C7D2FE) per
   servire da colore del TESTO su fondo scuro. Usati come SFONDO davano
   un fondo lilla chiarissimo con sopra testo bianco:

       h3 bianco su #A5B4FC  →  1,99:1
       .meta   su #C7D2FE    →  1,44:1     (WCAG AA chiede 4,5:1)

   Ora il gradiente ha variabili proprie che restano scure in entrambi i
   temi, così il bianco sopra è sempre leggibile. Le etichette non usano
   più `opacity` ma un bianco esplicito più carico: a 11,5 px l'opacità
   .8 era tenue anche nel tema chiaro. */
.plan-hero {
  --hero-a: var(--indigo-700);
  --hero-b: var(--indigo-900);
  background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
  border-radius: var(--r-xl); padding: 17px; color: #fff;
  box-shadow: 0 10px 26px rgba(49,46,129,.26); position: relative; overflow: hidden;
}
[data-theme="dark"] .plan-hero {
  /* nel tema scuro le --indigo-* alte sono chiare: qui servono valori fissi */
  --hero-a: #3730A3;
  --hero-b: #1E1B4B;
  box-shadow: 0 10px 26px rgba(0,0,0,.38);
}
.plan-hero::after { content:''; position:absolute; right:-40px; top:-50px; width:150px; height:150px;
  border-radius:50%; background: radial-gradient(circle, rgba(245,165,36,.26), transparent 68%); }
.plan-hero h3 { font-size: calc(16.5px * var(--fs)); font-weight: 700; position: relative; }
/* prima opacity .8 → 5,64:1; ora 8,6:1 su #4338CA */
.plan-hero .who {
  font-size: calc(12px * var(--fs)); color: rgba(255,255,255,.94);
  font-weight: 600; margin-top: 3px; position: relative;
}
.plan-hero .meta { display: flex; gap: 14px; margin-top: 12px; position: relative; flex-wrap: wrap; }
/* etichette piccole: bianco pieno, niente opacity */
.plan-hero .meta div {
  font-size: calc(11.5px * var(--fs)); color: rgba(255,255,255,.95); font-weight: 600;
}
.plan-hero .meta b { display: block; font-size: calc(17px * var(--fs)); font-weight: 750; letter-spacing: -.03em; color: #fff; }

.day-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 3px 0 5px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.day-tabs::-webkit-scrollbar { display: none; }
.day-tab {
  flex: 0 0 auto; padding: 8px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card);
  font-size: calc(12.5px * var(--fs)); font-weight: 650; color: var(--ink-2); transition: .15s; white-space: nowrap;
}
.day-tab.on { background: var(--sel-bg); border-color: var(--sel-line); color: var(--sel-fg); }
.day-tab.today:not(.on) { border-color: var(--indigo-400); color: var(--indigo-700); }

.pmeal { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px; box-shadow: var(--sh-xs); margin-bottom: 9px; }
.pmeal.now { border-color: var(--indigo-400); box-shadow: 0 0 0 3px var(--indigo-50); }
.pmeal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pmeal-name { font-size: calc(13px * var(--fs)); font-weight: 700; display: flex; align-items: center; gap: 7px; }
.pmeal-name svg { width: 15px; height: 15px; color: var(--muted); }
.pmeal-time { font-size: calc(11.5px * var(--fs)); color: var(--muted); font-weight: 600; }
.now-badge { background: var(--indigo-600); color: #fff; font-size: calc(9px * var(--fs)); font-weight: 750;
  padding: 2px 7px; border-radius: 5px; text-transform: uppercase; letter-spacing: .04em; }

.pitem { display: flex; align-items: flex-start; gap: 9px; padding: 8px 0; border-top: 1px solid var(--line-2); }
.pitem:first-of-type { border-top: 0; padding-top: 0; }
.pitem-check {
  width: 21px; height: 21px; border-radius: 6px; border: 1.5px solid var(--line);
  background: var(--card); flex-shrink: 0; display: grid; place-items: center; margin-top: 1px; transition: .15s;
}
.pitem-check svg { width: 12px; height: 12px; color: #fff; opacity: 0; }
.pitem-check.on { background: var(--ok); border-color: var(--ok); }
.pitem-check.on svg { opacity: 1; }
.pitem-body { flex: 1; min-width: 0; }
.pitem-food { font-size: calc(13.5px * var(--fs)); font-weight: 600; line-height: 1.35; }
.pitem-check.on + .pitem-body .pitem-food { text-decoration: line-through; color: var(--muted); }
.pitem-qty { font-size: calc(11.5px * var(--fs)); color: var(--indigo-700); font-weight: 650; }
.pitem-alt { font-size: calc(11px * var(--fs)); color: var(--muted); margin-top: 2px; line-height: 1.4; }
.pitem-log { flex-shrink: 0; padding: 5px 9px; border-radius: 8px; background: var(--indigo-50);
  color: var(--indigo-700); font-size: calc(11px * var(--fs)); font-weight: 700; align-self: center; }

.rule-list { display: flex; flex-direction: column; gap: 6px; }
.rule { display: flex; gap: 8px; align-items: flex-start; font-size: calc(12.5px * var(--fs)); color: var(--ink-2); line-height: 1.45; }
.rule svg { width: 14px; height: 14px; color: var(--indigo-500); flex-shrink: 0; margin-top: 2px; }

.adh-bar { height: 7px; background: var(--line-2); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.adh-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ok); transition: width .6s cubic-bezier(.2,.8,.2,1); }

.drop-zone {
  border: 1.5px dashed var(--indigo-200); border-radius: var(--r-lg);
  background: var(--indigo-50); padding: 26px 18px; text-align: center; transition: .18s;
}
.drop-zone svg { width: 30px; height: 30px; color: var(--indigo-500); margin-bottom: 9px; }
.drop-zone b { display: block; font-size: calc(14px * var(--fs)); font-weight: 700; margin-bottom: 3px; }
.drop-zone small { font-size: calc(12px * var(--fs)); color: var(--muted); }
.thumb-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.thumb-row img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }

/* ═══════════ MICRONUTRIENTI ═══════════ */
.micro-head { display: flex; align-items: baseline; justify-content: space-between; margin: 16px 0 8px; }
.micro-head b { font-size: calc(11px * var(--fs)); font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.mrow { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.mrow:last-child { border-bottom: 0; }
.mrow-name { flex: 0 0 40%; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); }
/* Da quale alimento arriva il nutriente. Va sotto al nome e non
   accanto: su uno schermo da 390 px "Vitamina B12 (yogurt greco)"
   su una riga sola spingerebbe fuori la barra e la percentuale. */
.mrow-from {
  display: block; font-size: calc(10px * var(--fs)); font-weight: 500;
  color: var(--faint); margin-top: 1px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mrow-from::before { content: '('; }
.mrow-from::after  { content: ')'; }
.mrow-track { flex: 1; height: 6px; background: var(--line-2); border-radius: 99px; overflow: hidden; position: relative; }
.mrow-track i { display: block; height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.mrow-pct { flex: 0 0 62px; text-align: right; font-size: calc(11.5px * var(--fs)); font-weight: 700; }
.mrow-val { font-size: calc(10px * var(--fs)); color: var(--faint); font-weight: 600; }

.m-full  { background: var(--ok); }
.m-good  { background: #65A30D; }
.m-low   { background: var(--warn); }
.m-very-low { background: #E2E8F0; }
.m-over  { background: var(--bad); }

.gap-card { background: var(--warn-bg); border: 1px solid #FDE68A; border-radius: var(--r-md); padding: 12px; margin-top: 8px; }
.gap-card b { font-size: calc(12.5px * var(--fs)); font-weight: 700; color: #92400E; display: block; margin-bottom: 3px; }
.gap-card p { font-size: calc(12px * var(--fs)); color: #78350F; line-height: 1.45; }

.est-note { display: inline-flex; align-items: center; gap: 5px; font-size: calc(10.5px * var(--fs)); color: var(--muted);
  background: var(--line-2); padding: 4px 9px; border-radius: 999px; font-weight: 600; }

/* ═══════════ STRUMENTI ═══════════ */
.tool-card {
  display: flex; align-items: center; gap: 13px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 15px; box-shadow: var(--sh-xs);
  width: 100%; text-align: left; transition: .16s; margin-bottom: 9px;
}
.tool-card:active { transform: scale(.985); background: var(--line2); }
.tool-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.tool-ic svg { width: 20px; height: 20px; }
.tool-txt { flex: 1; min-width: 0; }
.tool-txt b { display: block; font-size: calc(14px * var(--fs)); font-weight: 700; letter-spacing: -.02em; }
.tool-txt small { font-size: calc(11.5px * var(--fs)); color: var(--muted); line-height: 1.4; display: block; margin-top: 1px; }
.tool-card .chev { color: var(--faint); flex-shrink: 0; }
.tool-card .chev svg { width: 16px; height: 16px; display: block; }
.tool-badge { font-size: calc(8.5px * var(--fs)); font-weight: 750; text-transform: uppercase; letter-spacing: .05em;
  background: var(--indigo-600); color: #fff; padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: 1.5px; }

/* questionario */
.quiz-progress { display: flex; gap: 4px; margin-bottom: 16px; }
.quiz-progress i { flex: 1; height: 3px; border-radius: 99px; background: var(--line); transition: .25s; }
.quiz-progress i.on { background: var(--indigo-600); }
.quiz-q { font-size: calc(18px * var(--fs)); font-weight: 750; letter-spacing: -.03em; margin-bottom: 4px; }
.quiz-s { font-size: calc(12.5px * var(--fs)); color: var(--muted); margin-bottom: 16px; line-height: 1.45; }
.quiz-opt {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 13px; border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--card); margin-bottom: 7px; transition: .15s;
}
.quiz-opt.on { border-color: var(--indigo-600); background: var(--indigo-50); }
.quiz-opt b { display: block; font-size: calc(14px * var(--fs)); font-weight: 650; }
.quiz-opt small { font-size: calc(11.5px * var(--fs)); color: var(--muted); }
.quiz-check {
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line);
  flex-shrink: 0; display: grid; place-items: center; transition: .15s;
}
.quiz-opt.on .quiz-check { background: var(--indigo-600); border-color: var(--indigo-600); }
.quiz-check svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
.quiz-opt.on .quiz-check svg { opacity: 1; }

/* ristorante */
.pick {
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px;
  background: var(--card); box-shadow: var(--sh-xs); margin-bottom: 9px; position: relative;
}
.pick.top { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.pick-rank {
  position: absolute; top: -8px; left: 13px; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center; font-size: calc(11px * var(--fs)); font-weight: 800; color: #fff; background: var(--muted);
}
.pick.top .pick-rank { background: var(--ok); }
.pick-name { font-size: calc(14.5px * var(--fs)); font-weight: 700; margin: 4px 0 5px; letter-spacing: -.02em; }
.pick-why { font-size: calc(12.5px * var(--fs)); color: var(--ink-2); line-height: 1.45; }
.pick-macros { display: flex; gap: 12px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-2); flex-wrap: wrap; }
.pick-macros span { font-size: calc(11.5px * var(--fs)); color: var(--muted); }
.pick-macros b { color: var(--ink); font-weight: 700; }
.pick-tweak {
  display: flex; gap: 6px; align-items: flex-start; margin-top: 9px;
  background: var(--warn-bg); border-radius: 8px; padding: 7px 9px;
  font-size: calc(11.5px * var(--fs)); color: #92400E; line-height: 1.4;
}
.pick-tweak svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 1.5px; }
.budget-bar { display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--sh-xs); }
.budget-bar b { font-size: calc(21px * var(--fs)); font-weight: 750; letter-spacing: -.04em; }
.avoid-item { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: calc(12.5px * var(--fs)); }
.avoid-item:first-of-type { border-top: 0; }
.avoid-item .x { color: var(--bad); flex-shrink: 0; }
.avoid-item .x svg { width: 13px; height: 13px; display: block; }
.avoid-item small { color: var(--muted); font-size: calc(11px * var(--fs)); }

/* ricette */
.recipe { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px; background: var(--card); box-shadow: var(--sh-xs); margin-bottom: 9px; }
.recipe-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.recipe-name { font-size: calc(14.5px * var(--fs)); font-weight: 700; letter-spacing: -.02em; }
.recipe-time { font-size: calc(11px * var(--fs)); color: var(--muted); font-weight: 650; white-space: nowrap; }
.recipe-macros { display: flex; gap: 10px; margin: 8px 0; flex-wrap: wrap; }
.recipe-macros span { font-size: calc(11px * var(--fs)); color: var(--muted); background: var(--line-2); padding: 3px 8px; border-radius: 6px; }
.recipe-macros b { color: var(--ink); }
.recipe-gap { font-size: calc(11.5px * var(--fs)); color: var(--ok); background: var(--ok-bg); padding: 7px 9px; border-radius: 8px; margin: 8px 0; line-height: 1.4; }
.recipe-steps { margin: 8px 0 0; padding-left: 16px; }
.recipe-steps li { font-size: calc(12px * var(--fs)); color: var(--ink-2); line-height: 1.5; margin-bottom: 3px; }
.detected { display: flex; flex-wrap: wrap; gap: 5px; }
.detected span { font-size: calc(11px * var(--fs)); background: var(--indigo-50); color: var(--indigo-700);
  padding: 4px 9px; border-radius: 999px; font-weight: 600; }

/* spesa */
.aisle-head { display: flex; align-items: center; gap: 7px; margin: 14px 0 7px; }
.aisle-head b { font-size: calc(11.5px * var(--fs)); font-weight: 750; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.aisle-head i { flex: 1; height: 1px; background: var(--line); font-style: normal; }
.shop-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-sm); margin-bottom: 5px; width: 100%; text-align: left; }
.shop-item.done { opacity: .5; }
.shop-item.done .shop-name { text-decoration: line-through; }
.shop-check { width: 19px; height: 19px; border-radius: 5px; border: 1.5px solid var(--line);
  flex-shrink: 0; display: grid; place-items: center; }
.shop-item.done .shop-check { background: var(--ok); border-color: var(--ok); }
.shop-check svg { width: 11px; height: 11px; color: #fff; opacity: 0; }
.shop-item.done .shop-check svg { opacity: 1; }
.shop-name { flex: 1; font-size: calc(13px * var(--fs)); font-weight: 600; }
.shop-qty { font-size: calc(12px * var(--fs)); color: var(--indigo-700); font-weight: 700; }

/* suggerimento contestuale */
.nudge {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--indigo-50), #F5F3FF);
  border: 1px solid var(--indigo-200); border-radius: var(--r-md);
  padding: 11px 13px; margin-top: 12px;
  /* Il riquadro del suggerimento e la card blu sotto avevano solo 12 px
     fra loro e due sfondi indaco quasi uguali: sembravano un blocco
     unico. Segnalato nel report del 19/08/2026 («insufficient visual
     separation»). Lo stacco lo dà lo spazio, non un'altra cornice. */
  margin-bottom: 14px;
}
.nudge-ic { font-size: calc(16px * var(--fs)); flex-shrink: 0; line-height: 1; }
.nudge-txt { flex: 1; font-size: calc(12.5px * var(--fs)); color: var(--indigo-900); line-height: 1.4; font-weight: 550; }
.nudge-cta {
  flex-shrink: 0; background: var(--indigo-600); color: #fff;
  font-size: calc(11px * var(--fs)); font-weight: 700; padding: 7px 11px; border-radius: 8px;
  min-height: 32px; white-space: nowrap;
}
.nudge-cta:active { transform: scale(.96); }

/* Invito a creare l'account: presente ma non bloccante. Variante "risk"
   (ambra) quando il browser è iOS fuori da una PWA installata, dove
   Safari cancella davvero i dati dopo 7 giorni di inattività. */
.auth-banner {
  display: flex; align-items: center; gap: 9px;
  background: var(--card); border: 1px solid var(--indigo-200);
  border-left: 3px solid var(--indigo-600);
  border-radius: var(--r-md); padding: 10px 8px 10px 12px; margin-top: 10px;
}
.auth-banner.risk { border-color: #FDE68A; border-left-color: #F59E0B; background: #FFFBEB; }
.ab-ic { font-size: calc(15px * var(--fs)); flex-shrink: 0; line-height: 1; }
.ab-txt { flex: 1; font-size: calc(12px * var(--fs)); color: var(--ink-2); line-height: 1.4; }
.auth-banner.risk .ab-txt { color: #78350F; }
.ab-cta {
  flex-shrink: 0; background: var(--indigo-600); color: #fff;
  font-size: calc(11px * var(--fs)); font-weight: 700; padding: 7px 11px; border-radius: 8px;
  min-height: 32px; white-space: nowrap;
}
.auth-banner.risk .ab-cta { background: #B45309; }
.ab-cta:active { transform: scale(.96); }
.ab-x {
  flex-shrink: 0; background: none; color: var(--ink-3);
  font-size: calc(13px * var(--fs)); line-height: 1; min-width: 32px; min-height: 32px;
  padding: 0; border-radius: 8px;
}
.ab-x:active { background: var(--bg-2); }

/* Pulsante "Accedi con Google": lo rende la libreria GIS in un iframe,
   quindi non possiamo restilizzarlo — lo centriamo e basta. Se il client ID
   non è configurato il contenitore resta vuoto e viene nascosto da JS. */
.gbtn-box { display: flex; justify-content: center; margin-top: 12px; min-height: 0; }
.gbtn-box:empty { display: none; }

/* Separatore "oppure" fra accesso Google e form email */
.or-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 4px; color: var(--ink-3); font-size: calc(11.5px * var(--fs));
}
.or-sep::before, .or-sep::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.gbtn-box[style*="none"] + .or-sep { display: none; }

/* Selettore a segmenti (tema, dimensione testo): tocco ampio, stato chiaro */
.seg {
  display: flex; gap: 6px; background: var(--line-2);
  border: 1px solid var(--line); border-radius: 14px; padding: 4px;
}
.seg-b {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 4px; border-radius: 10px; min-height: 52px;
  font-size: calc(11px * var(--fs)); font-weight: 650; color: var(--muted);
  background: transparent; transition: background .15s, color .15s;
}
.seg-b .seg-ic { font-size: calc(15px * var(--fs)); line-height: 1; }
.seg-b.on {
  background: var(--card); color: var(--indigo-700);
  box-shadow: var(--sh-sm); font-weight: 750;
}
.seg-b:active { transform: scale(.97); }

/* Pulsante di dettatura: pulsa mentre ascolta, così si capisce che è vivo */
.mic-row { display: flex; margin-top: -4px; }
.mic-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 44px;
}
.mic-btn .mic-ic { display: inline-flex; }
.mic-btn .mic-ic svg { width: 16px; height: 16px; }
.mic-btn.rec {
  background: var(--bad-bg); border-color: var(--bad); color: var(--bad);
  animation: micPulse 1.4s ease-in-out infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,30,30,.34); }
  50%      { box-shadow: 0 0 0 7px rgba(200,30,30,0); }
}
@media (prefers-reduced-motion: reduce) { .mic-btn.rec { animation: none; } }

/* Grafico del peso con media mobile */
.wchart { margin-top: 12px; }
.wchart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.wchart-lbl { font-size: calc(10.5px * var(--fs)); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; }
.wchart-trend { font-size: calc(12.5px * var(--fs)); font-weight: 750; }
.wchart-svg { width: 100%; height: 96px; display: block; overflow: visible; }
.wchart-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-top: 6px; font-size: calc(10px * var(--fs)); color: var(--muted);
}
.wchart-legend { display: inline-flex; align-items: center; gap: 4px; }
.wchart-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.wchart-legend .dot-avg { background: var(--indigo-500); }
.wchart-legend .dot-raw { background: var(--faint); opacity: .55; }

.chip.qa { font-size: calc(11.5px * var(--fs)); padding: 8px 12px; min-height: 36px; }

/* Link testuali nelle intestazioni: area di tocco comoda anche col pollice */
.sec-head button, .sec-head a {
  min-height: 32px; padding: 6px 2px 6px 10px; margin: -6px -2px -6px 0;
}

/* icona profilo: pallino verde quando l'account è attivo */
.ic-btn.signed { position: relative; }
.ic-btn.signed::after {
  content: ''; position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); border: 1.5px solid var(--card);
}

/* ═══════════ navigazione fra i giorni ═══════════ */
.day-nav {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2);
}
.dn-arrow {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--card);
  display: grid; place-items: center; color: var(--ink-2); transition: .15s;
}
.dn-arrow:active { transform: scale(.93); background: var(--line-2); }
.dn-arrow svg { width: 15px; height: 15px; }
.dn-date {
  flex: 1; text-align: center; font-size: calc(12.5px * var(--fs)); font-weight: 650; color: var(--muted);
}
.day-nav.past .dn-date { color: var(--indigo-700); }
.dn-today {
  font-size: calc(11px * var(--fs)); font-weight: 700; padding: 7px 11px; border-radius: 8px;
  background: var(--indigo-600); color: #fff; white-space: nowrap; min-height: 32px;
}
/* Quando non sei su oggi la card cambia bordo: impossibile non accorgersene */
.day-nav.past { border-top-color: var(--indigo-200); }
.day-card:has(.day-nav.past) { border-color: var(--indigo-400); box-shadow: 0 0 0 3px var(--indigo-50); }

/* ============================================================
   CORREZIONI TEMA SCURO — in fondo di proposito: hanno la stessa
   specificità delle regole chiare, quindi devono venire dopo.
   ============================================================ */
/* I gradienti che nel tema chiaro vanno dal chiaro allo scuro, al buio si
   invertono e diventano macchie luminose. Qui li si riporta nella gamma
   giusta invece di lasciarli seguire ciecamente le variabili. */
[data-theme="dark"] .log-btn.primary {
  background: linear-gradient(135deg, #4338CA, #3730A3 70%, #312E81);
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
[data-theme="dark"] .coach-hero {
  background: linear-gradient(135deg, #312E81, #1E1B4B);
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
}
[data-theme="dark"] .swap {
  background: linear-gradient(135deg, #1E1B4B, #201C52);
}
[data-theme="dark"] .nudge {
  background: linear-gradient(135deg, #1B1F3A, #1E1B4B);
}
/* Il selettore di lingua attivo era nero su nero */
[data-theme="dark"] .lang-tog { background: var(--line-2); }
[data-theme="dark"] .lang-tog button.on { background: var(--indigo-600); color: #fff; }
/* Barra di navigazione: sul buio serve un bordo, l'ombra non si vede */
[data-theme="dark"] .nav { background: var(--card); border-top: 1px solid var(--line); }
[data-theme="dark"] .topbar { background: rgba(14,17,23,.86); }
[data-theme="dark"] .topbar.scrolled { border-bottom: 1px solid var(--line); }
/* Le card hanno bisogno di un bordo esplicito: al buio l'ombra sparisce */
[data-theme="dark"] .card { border: 1px solid var(--line); }

/* ── Testi con colore ESADECIMALE FISSO ──────────────────────────
   Questi colori erano scritti a mano nel tema chiaro (marrone scuro su
   giallo chiaro, rosso scuro su rosa...). Nel tema scuro lo SFONDO segue
   le variabili e diventa scuro, ma il testo restava scuro: illeggibile.
   Misurato prima della correzione: streak "0 giorni" a 2,06:1, contro il
   minimo WCAG AA di 4,5:1.
   Regola generale: se lo sfondo è chiaro il testo va scuro, e viceversa. */
[data-theme="dark"] .streak-chip {
  background: #3A2A08; border-color: #6B4E10; color: #FCD34D;
}
[data-theme="dark"] .err-box p { color: #FCA5A5; }
[data-theme="dark"] .gap-card b { color: #FCD34D; }
[data-theme="dark"] .gap-card p { color: #E7C9A0; }
[data-theme="dark"] .auth-banner.risk { background: #2C1F04; border-color: #6B4E10; }
[data-theme="dark"] .auth-banner.risk .ab-txt { color: #FCD34D; }
[data-theme="dark"] .auth-banner.risk .ab-cta { background: #B45309; color: #fff; }

/* Nutri-Score e NOVA: sono pastiglie con sfondo CHIARO fisso (giallo,
   verde, arancio) perché sono standard riconoscibili a colpo d'occhio.
   Qui lo sfondo resta chiaro apposta, quindi il testo deve restare SCURO. */
/* A ed E hanno fondi scuri (verde bosco, rosso mattone): lì il testo va
   bianco. B, C e D hanno fondi chiari e tengono il testo nero. */
[data-theme="dark"] .ns-b, [data-theme="dark"] .ns-d,
[data-theme="dark"] .nova-1, [data-theme="dark"] .nova-3,
[data-theme="dark"] .nova-4 { color: #1A1A1A; }
[data-theme="dark"] .ns-a { color: #fff; }
/* Il rosso Nutri-Score E (#E63E11) è un colore ufficiale e non si tocca:
   sopra ci va il nero PURO (5,06:1). Né il bianco (4,15) né #1A1A1A (4,20)
   raggiungono la soglia: qui i 26 punti di grigio fanno la differenza. */
[data-theme="dark"] .ns-e { color: #000; }

/* Le etichette di provenienza usano colori scuriti per il tema chiaro:
   sui fondi scuri servono le tinte chiare, o il contrasto crolla a 2,78:1. */
[data-theme="dark"] .src.verified { color: #34D399; }
[data-theme="dark"] .src.usda { color: #7DD3FC; }
[data-theme="dark"] .ns-c { color: #4a3a00; }
[data-theme="dark"] .nova-2 { background: #DCFCE7; color: #14532D; }

/* --faint (grigio tenue) su fondo scuro dava 3,32:1: sotto la soglia.
   Vale per la barra di navigazione e per tutte le etichette secondarie. */
[data-theme="dark"] { --faint: #8B94A8; }
[data-theme="dark"] .nav button { color: #98A1B5; }
[data-theme="dark"] .lang-tog button { color: #98A1B5; }

/* Il bianco su indaco chiaro dava 4,47:1, appena sotto il minimo:
   scurendo di poco il fondo si arriva sopra 4,5 senza cambiare aspetto. */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .nudge-cta,
[data-theme="dark"] .ab-cta,
[data-theme="dark"] .tool-badge { background: #4338CA; color: #fff; }
[data-theme="dark"] .lang-tog button.on { background: #4F46E5; color: #fff; }
[data-theme="dark"] .nav button.on { color: #A5B4FC; }

/* Link e pulsanti testuali in indaco: #6366F1 su fondo scuro dà 3,87-4,23:1.
   Serve la tinta più chiara della scala, che arriva sopra 7:1. */
[data-theme="dark"] a[href^="/privacy"],
[data-theme="dark"] a[href^="/termini"],
[data-theme="dark"] .sec-head button,
[data-theme="dark"] .sec-head a { color: #A5B4FC !important; }

/* ── Nuovi componenti ────────────────────────────────────────── */

/* Avviso medico: presente ma non allarmistico */
.med-note {
  display: flex; align-items: flex-start; gap: 8px;
  border: 1px solid var(--line); border-left: 3px solid var(--muted);
  border-radius: var(--r-sm); padding: 9px 11px; margin-top: 10px;
  font-size: calc(11.5px * var(--fs)); line-height: 1.45; color: var(--ink-2);
}
.med-note svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

/* Copia giorno precedente */
.copy-prev {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px; min-height: 44px;
}
.copy-prev svg { width: 15px; height: 15px; }

/* Interruttori dei promemoria */
.tgl-row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 2px; min-height: 48px; text-align: left;
  border-bottom: 1px solid var(--line-2);
}
.tgl-row:last-child { border-bottom: none; }
.tgl-txt { flex: 1; display: block; }
.tgl-txt b { display: block; font-size: calc(13px * var(--fs)); font-weight: 650; color: var(--ink); }
.tgl-txt small { display: block; font-size: calc(11px * var(--fs)); color: var(--muted); margin-top: 1px; }
.tgl {
  flex-shrink: 0; width: 44px; height: 26px; border-radius: 999px;
  background: var(--line); position: relative; transition: background .18s;
}
.tgl i {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--card); box-shadow: var(--sh-sm);
  transition: transform .18s;
}
.tgl.on { background: var(--indigo-600); }
.tgl.on i { transform: translateX(18px); }

/* Etichetta: segnalazioni sugli ingredienti */
.flag-row {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 11px; border-radius: var(--r-sm); margin-top: 6px;
  border: 1px solid var(--line); background: var(--card);
}
.flag-row.flag-avoid { border-color: #FCA5A5; background: var(--bad-bg); }
.flag-row.flag-watch { border-color: #FDE68A; background: var(--warn-bg); }
.flag-ic { font-size: calc(13px * var(--fs)); line-height: 1.2; flex-shrink: 0; }
.flag-txt { flex: 1; }
.flag-txt b { display: block; font-size: calc(12.5px * var(--fs)); font-weight: 700; color: var(--ink); }
.flag-txt small { display: block; font-size: calc(11.5px * var(--fs)); color: var(--ink-2); margin-top: 2px; line-height: 1.4; }

/* Grafico correlazione deficit/peso */
.corr-svg { width: 100%; height: 74px; display: block; overflow: visible; }
.corr-legend {
  display: flex; gap: 14px; justify-content: center; margin-top: 8px;
  font-size: calc(10.5px * var(--fs)); color: var(--muted);
}
.corr-legend span { display: inline-flex; align-items: center; gap: 5px; }
.corr-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.corr-verdict {
  margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line); border-left-width: 3px; background: var(--bg);
}
.corr-verdict b { display: block; font-size: calc(12.5px * var(--fs)); margin-bottom: 3px; }
.corr-verdict p { font-size: calc(11.5px * var(--fs)); color: var(--ink-2); line-height: 1.45; }

[data-theme="dark"] .flag-row.flag-avoid { border-color: #7F1D1D; background: #2D1214; }
[data-theme="dark"] .flag-row.flag-watch { border-color: #6B4E10; background: #2C1F04; }
[data-theme="dark"] .corr-verdict { background: var(--line-2); }
[data-theme="dark"] .med-note { border-left-color: var(--indigo-400); }

/* ── Dettagli richiudibili in home ── */
.df-main { display: flex; align-items: center; gap: 14px; }
.df-more {
  margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: calc(11px * var(--fs)); font-weight: 650; color: var(--muted);
  min-height: 32px; padding: 0 4px;
}
.df-more svg { width: 13px; height: 13px; transition: transform .18s; }
.df-more.open svg { transform: rotate(180deg); }
.df-extra {
  display: flex; gap: 14px; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line-2);
}
.df-extra[hidden] { display: none; }

/* ── Momento di soddisfazione ── */
.celeb {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  z-index: 90; pointer-events: none; background: rgba(15,23,42,.28);
  animation: celebIn .22s ease-out;
}
.celeb.out { animation: celebOut .35s ease-in forwards; }
.celeb-card {
  background: var(--card); border-radius: var(--r-xl); padding: 26px 30px;
  box-shadow: var(--sh-xl); text-align: center; max-width: 280px;
}
.celeb-card b { display: block; font-size: calc(16px * var(--fs)); font-weight: 750; margin-top: 12px; }
.celeb-card span { display: block; font-size: calc(12.5px * var(--fs)); color: var(--muted); margin-top: 4px; }
.celeb-ring svg { width: 54px; height: 54px; }
.celeb-arc { animation: celebArc .7s cubic-bezier(.4,0,.2,1) forwards; }
.celeb-tick { stroke-dasharray: 30; stroke-dashoffset: 30; animation: celebTick .4s .45s ease-out forwards; }
@keyframes celebIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes celebOut { to { opacity: 0 } }
@keyframes celebArc { to { stroke-dashoffset: 0 } }
@keyframes celebTick { to { stroke-dashoffset: 0 } }
@media (prefers-reduced-motion: reduce) {
  .celeb, .celeb-arc, .celeb-tick { animation: none; }
  .celeb-arc { stroke-dashoffset: 0; }
  .celeb-tick { stroke-dashoffset: 0; }
}

/* ── Affidabilità del diario ── */
.rel-card { border-left: 3px solid var(--line); }
.rel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rel-head b { font-size: calc(14px * var(--fs)); font-weight: 750; }
.rel-days { font-size: calc(10.5px * var(--fs)); color: var(--muted); white-space: nowrap; }
.rel-body { font-size: calc(12.5px * var(--fs)); line-height: 1.5; color: var(--ink-2); margin-top: 6px; }
.rel-nums { display: flex; gap: 16px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.rel-nums div { flex: 1; text-align: center; }
.rel-nums b { display: block; font-size: calc(17px * var(--fs)); font-weight: 750; }
.rel-nums small { display: block; font-size: calc(10px * var(--fs)); color: var(--muted); margin-top: 1px; }
.rel-tip {
  margin-top: 10px; padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--warn-bg); border: 1px solid #FDE68A;
  font-size: calc(11.5px * var(--fs)); color: #78350F; line-height: 1.4;
}

/* ── Confronto allo scaffale ── */
.cmp-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cmp-slot {
  aspect-ratio: 3/4; border: 2px dashed var(--line); border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; background: var(--bg); overflow: hidden; min-height: 120px;
}
.cmp-slot span { font-size: calc(24px * var(--fs)); font-weight: 750; color: var(--faint); }
.cmp-slot small { font-size: calc(10.5px * var(--fs)); color: var(--muted); }
.cmp-slot.full { border-style: solid; border-color: var(--indigo-400); padding: 0; }
.cmp-slot img { width: 100%; height: 100%; object-fit: cover; }
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.cmp-card {
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px;
  background: var(--card); position: relative;
}
.cmp-card.win { border-color: var(--ok); border-width: 2px; }
.cmp-badge {
  position: absolute; top: -9px; left: 10px; background: var(--ok); color: #fff;
  font-size: calc(9.5px * var(--fs)); font-weight: 750; padding: 2px 7px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .04em;
}
.cmp-card b { display: block; font-size: calc(12.5px * var(--fs)); font-weight: 700; line-height: 1.3; }
.cmp-kcal { font-size: calc(11px * var(--fs)); color: var(--muted); margin: 3px 0 7px; }
.cmp-li { font-size: calc(11px * var(--fs)); line-height: 1.45; margin-top: 3px; }
.cmp-li.ok { color: var(--ok); }
.cmp-li.no { color: var(--bad); }

/* ── Codice per il nutrizionista ── */
.share-code {
  font-size: calc(21px * var(--fs)); font-weight: 750; text-align: center;
  letter-spacing: .1em; color: var(--ok); font-variant-numeric: tabular-nums;
}

/* Istruzioni per il professionista: il codice senza l'indirizzo è
   inutilizzabile, quindi l'indirizzo ha lo stesso peso visivo. */
.pro-howto {
  background: var(--indigo-50); border: 1px solid var(--indigo-200);
  border-radius: var(--r-md); padding: 13px 14px;
}
.pro-howto-h { display: flex; align-items: center; gap: 8px; }
.pro-howto-h b { font-size: calc(13px * var(--fs)); font-weight: 750; color: var(--ink); }
.pro-howto-i {
  width: 17px; height: 17px; flex-shrink: 0; color: var(--indigo-700);
  stroke-linecap: round; stroke-linejoin: round;
}
.pro-howto-p {
  font-size: calc(12.5px * var(--fs)); line-height: 1.5;
  color: var(--ink-2); margin-top: 7px;
}
.pro-url {
  margin-top: 9px; padding: 10px 12px; border-radius: 10px;
  background: var(--card); border: 1px dashed var(--indigo-300, var(--indigo-200));
  font-size: calc(13px * var(--fs)); font-weight: 700; text-align: center;
  color: var(--indigo-700); cursor: pointer; word-break: break-all;
  /* l'indirizzo si tocca per copiarlo: deve sembrare toccabile */
  min-height: 44px; display: flex; align-items: center; justify-content: center;
}
.pro-url:active { transform: scale(.985); }
[data-theme="dark"] .pro-howto { background: rgba(99,102,241,.10); border-color: rgba(99,102,241,.35); }
[data-theme="dark"] .pro-url { background: var(--card); border-color: rgba(99,102,241,.45); }

[data-theme="dark"] .rel-tip { background: #2C1F04; border-color: #6B4E10; color: #FCD34D; }
[data-theme="dark"] .celeb { background: rgba(0,0,0,.5); }

/* ── Gerarchia dei pasti nel diario ────────────────────────────
   Il pasto in corso risalta con un bordo indaco; quelli già passati
   sbiadiscono ma restano leggibili (0.72 di opacità, non meno:
   sotto quel valore il contrasto scende sotto la soglia WCAG). */
.meal-group.now { border-left: 3px solid var(--indigo-600); padding-left: 9px; margin-left: -12px; }
.meal-group.now .mg-name { color: var(--indigo-700); font-weight: 750; }
.meal-group.past { opacity: .72; }

/* ── Pasto non ancora consumato: riga con le TRE strade ──────────
   Prima era una riga con un "+" che apriva sempre e solo la fotocamera
   in modalita' codice a barre. Chi voleva scrivere il nome o dettarlo
   doveva chiudere tutto e ripartire dal pulsante centrale.
   Ora le tre azioni sono visibili e distinte: foto, testo, voce.

   Contrasti misurati con la formula WCAG (soglia 3:1 non-testo,
   4.5:1 testo):
     bianco su #6C50F3 (cerchio pieno) .... 5,15:1
     bianco su #5B4FE0 (fondo gradiente) .. 5,77:1
     --line #9184D0 su card #17102F ....... 5,57:1   (bordo, scuro)
     --line #8F7EC8 su card #FFFFFF ....... 3,51:1   (bordo, chiaro) */
.meal-empty {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 13px; margin-top: 9px; min-height: 62px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: transparent; color: var(--muted);
  transition: border-color .15s, background .15s;
}
.meal-empty .me-ic {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--line-2); color: var(--ink-2);
}
.meal-empty .me-ic svg { width: 20px; height: 20px; }
.meal-empty .me-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.meal-empty .me-txt b {
  font-size: calc(14.5px * var(--fs)); font-weight: 700; color: var(--ink);
  line-height: 1.25;
}
.meal-empty .me-txt small {
  font-size: calc(11.5px * var(--fs)); color: var(--muted); line-height: 1.3;
  overflow-wrap: anywhere;
}
.meal-empty .me-acts { flex: 0 0 auto; display: flex; gap: 8px; }

/* Il singolo pulsante: cerchio pieno + etichetta sotto.
   La parola sotto non e' decorazione: senza, il microfono e la matita
   si confondono al primo sguardo, e questa e' la schermata che si usa
   di corsa. */
.me-act {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.me-act-ic {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #7C5CFF, #6C50F3 55%, #5B4FE0);
  color: #fff;
  box-shadow: 0 2px 8px rgba(91,79,224,.34), 0 0 0 1px rgba(255,255,255,.14) inset;
  transition: transform .12s, box-shadow .12s;
}
.me-act-ic svg { width: 19px; height: 19px; }
.me-act-lb {
  font-size: calc(10.5px * var(--fs)); font-weight: 600; color: var(--muted);
  line-height: 1;
}
.me-act:active .me-act-ic { transform: scale(.92); box-shadow: 0 1px 4px rgba(91,79,224,.4); }

/* Il pasto in corso: bordo pieno e alone, come prima */
.meal-empty.now { border-color: var(--indigo-200); background: var(--indigo-50); }
.meal-empty.now .me-txt b { color: var(--indigo-700); }
.meal-empty.now .me-ic { background: var(--indigo-600); color: #fff; }

[data-theme="dark"] .meal-empty.now { background: #1E1B4B; border-color: #363080; }
[data-theme="dark"] .meal-empty .me-ic { background: var(--line-2); color: var(--ink-2); }

/* Il glow viola si vede solo sul fondo scuro */
[data-theme="dark"] .me-act-ic {
  box-shadow: 0 0 12px rgba(124,92,255,.42), 0 2px 8px rgba(0,0,0,.34),
              0 0 0 1px rgba(255,255,255,.16) inset;
}

/* Schermi stretti: tre pulsanti da 40px piu' il testo non ci stanno.
   Misurato a 360px: il suggerimento veniva schiacciato a zero. */
@media (max-width: 400px) {
  .meal-empty { gap: 8px; padding: 11px 10px; }
  .meal-empty .me-ic { flex-basis: 32px; width: 32px; height: 32px; }
  .meal-empty .me-ic svg { width: 17px; height: 17px; }
  .meal-empty .me-txt small { display: none; }
  .meal-empty .me-acts { gap: 6px; }
  .me-act-ic { width: 36px; height: 36px; }
  .me-act-ic svg { width: 17px; height: 17px; }
}

/* ── SCALA COLORI UNICA per la qualità ────────────────────────
   Prima Health Score, Nutri-Score, NOVA e aderenza usavano scale
   diverse: quattro legende da imparare. Ora una sola progressione
   verde → ambra → rosso, con questi quattro gradini. */
:root {
  --q1: #059669;   /* ottimo   */
  --q2: #65A30D;   /* buono    */
  --q3: #D97706;   /* medio    */
  --q4: #C81E1E;   /* scarso   */
  --q-info: #0369A1;  /* informativo: #0284C7 su bianco dava 4,10:1 */
}
[data-theme="dark"] {
  --q1: #34D399; --q2: #A3E635; --q3: #FBBF24; --q4: #F87171;
  --q-info: #7DD3FC;
}

/* ── Anello a settori ── */
.kcal-ring { position: relative; width: 132px; height: 132px; flex-shrink: 0; }
.kcal-center {
  position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; background: none; border: none; padding: 0;
  flex-direction: column; cursor: pointer;
}
.kcal-center > div { text-align: center; position: relative; }
.kcal-why {
  position: absolute; top: -6px; right: -14px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--line-2); color: var(--muted);
  font-size: calc(9.5px * var(--fs)); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.kcal-center:active .kcal-why { background: var(--indigo-600); color: #fff; }

/* legenda macro compatta accanto all'anello */
.ml-row {
  display: flex; align-items: baseline; gap: 7px;
  padding: 5px 0; font-size: calc(12px * var(--fs));
}
.ml-row .ml-name { flex: 1; display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.ml-row .ml-val { font-variant-numeric: tabular-nums; }
.ml-row .ml-val b { font-weight: 700; }
.ml-row .ml-goal { color: var(--muted); font-size: calc(11px * var(--fs)); }
.ml-row .ml-pct {
  min-width: 38px; text-align: right; font-size: calc(11px * var(--fs));
  font-weight: 650; color: var(--muted);
}
.ml-row .ml-pct.over { color: var(--q3); }

/* riga calorie in home: un solo numero, non tre */
.df-item.wide { flex: 1; }
.df-of { color: var(--muted); font-weight: 600; font-size: .72em; }

/* ── Schermate vuote che spiegano ── */
.intro-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px 18px; margin-top: 10px; text-align: center;
}
.intro-ic {
  width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 14px;
  background: var(--indigo-50); color: var(--indigo-700);
  display: flex; align-items: center; justify-content: center;
}
.intro-ic svg { width: 22px; height: 22px; }
.intro-card > b { display: block; font-size: calc(15px * var(--fs)); font-weight: 700; }
.intro-list { list-style: none; padding: 0; margin: 12px 0 0; text-align: left; }
.intro-list li {
  position: relative; padding: 7px 0 7px 22px;
  font-size: calc(12.5px * var(--fs)); color: var(--ink-2); line-height: 1.45;
}
.intro-list li::before {
  content: ''; position: absolute; left: 4px; top: 14px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--indigo-400);
}

/* esempi del Coach a diario vuoto */
.coach-demo {
  display: flex; gap: 10px; text-align: left; padding: 10px 12px; margin-top: 8px;
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-md);
}
.coach-demo .cd-ic { font-size: calc(16px * var(--fs)); line-height: 1.3; }
.coach-demo b { display: block; font-size: calc(12.5px * var(--fs)); font-weight: 700; }
.coach-demo small { display: block; font-size: calc(11.5px * var(--fs)); color: var(--ink-2); margin-top: 2px; line-height: 1.45; }

/* ── Perché questi numeri ── */
.why-step { display: flex; align-items: flex-start; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.why-step:last-of-type { border-bottom: none; }
.why-n {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 8px;
  background: var(--indigo-50); color: var(--indigo-700);
  font-size: calc(11px * var(--fs)); font-weight: 750;
  display: flex; align-items: center; justify-content: center;
}
.why-txt { flex: 1; }
.why-txt b { display: block; font-size: calc(12.5px * var(--fs)); font-weight: 700; }
.why-txt p { font-size: calc(11.5px * var(--fs)); color: var(--ink-2); line-height: 1.45; margin-top: 2px; }
.why-val {
  flex-shrink: 0; font-size: calc(13px * var(--fs)); font-weight: 750;
  color: var(--indigo-700); font-variant-numeric: tabular-nums;
}
.why-sep { height: 1px; background: var(--line); margin: 12px 0; }

/* ── Budget settimanale ── */
.wk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wk-head b { font-size: calc(24px * var(--fs)); font-weight: 750; letter-spacing: -.03em; }
.wk-head small { display: block; font-size: calc(11px * var(--fs)); color: var(--muted); margin-top: 1px; }
.wk-state { font-size: calc(12px * var(--fs)); font-weight: 700; white-space: nowrap; }
.wk-bar { height: 7px; border-radius: 999px; background: var(--line-2); overflow: hidden; margin-top: 11px; }
.wk-bar i { display: block; height: 100%; border-radius: 999px; transition: width .3s; }
.wk-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: calc(10.5px * var(--fs)); color: var(--muted); }

/* ── Confronto con te stesso ── */
.self-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.self-row:last-child { border-bottom: none; }
.self-name { flex: 1; font-size: calc(12.5px * var(--fs)); color: var(--ink-2); }
.self-now { font-size: calc(13px * var(--fs)); font-weight: 700; font-variant-numeric: tabular-nums; }
.self-diff {
  min-width: 52px; text-align: right; font-size: calc(12px * var(--fs));
  font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums;
}
.self-diff.up { color: var(--q1); }
.self-diff.down { color: var(--q3); }

/* ── "Come si prepara" nel piano ── */
.pmeal-cook {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo-50); color: var(--indigo-700);
}
.pmeal-cook svg { width: 15px; height: 15px; }
.pmeal-cook:active { transform: scale(.94); }
[data-theme="dark"] .pmeal-cook { background: var(--line-2); color: var(--indigo-400); }

/* ══════════════════════════════════════════════════════════════
   MARGINE ONESTO — intervallo invece del numero finto-preciso

   Lo studio NIDDK/NIH presentato a NUTRITION 2026 (26 luglio) ha
   mostrato che le app foto-caloriche sottostimano di 250-345 kcal a
   pasto. Invece di nascondere l'incertezza dietro un numero secco la
   rendiamo visibile: è la differenza fra uno strumento che illude e
   uno di cui ci si può fidare.
   ══════════════════════════════════════════════════════════════ */

/* Il numero-intervallo nella riga dei KPI */
.range-num { font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.range-sep { opacity: .45; margin: 0 1px; font-weight: 400; }

/* La scheda toccabile sotto i KPI */
.honest-card {
  display: block; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--q-info);
  border-radius: 14px; padding: 12px 14px; margin-top: 10px;
}
.honest-card:active { transform: scale(.99); }
.honest-head { display: flex; align-items: center; gap: 8px; }
.honest-head b { font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--ink); flex: 1; }
.honest-ico {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--q-info); color: #FFFFFF;
  font-size: calc(12px * var(--fs)); font-weight: 800; line-height: 1;
}
.honest-chev { color: var(--faint); font-size: calc(17px * var(--fs)); line-height: 1; }
.honest-why {
  font-size: calc(12px * var(--fs)); color: var(--muted);
  line-height: 1.5; margin-top: 6px;
}
.honest-fat {
  font-size: calc(11.5px * var(--fs)); color: var(--q3);
  font-weight: 650; line-height: 1.45; margin-top: 5px;
}

/* Il pannello esplicativo */
.honest-block p {
  font-size: calc(13px * var(--fs)); color: var(--ink-2);
  line-height: 1.6; margin-bottom: 10px;
}
.honest-block p:last-child { margin-bottom: 0; }
.honest-hi {
  background: var(--indigo-50); border-radius: 12px;
  padding: 12px 14px; margin: 12px 0;
}
.honest-hi b { font-size: calc(12.5px * var(--fs)); color: var(--ink); line-height: 1.5; font-weight: 650; }
[data-theme="dark"] .honest-hi { background: var(--line-2); }

/* La barra dell'intervallo */
.hr-bar { margin: 18px 0 26px; padding: 0 4px; }
.hr-track {
  height: 10px; border-radius: 5px; position: relative;
  background: linear-gradient(90deg, var(--q1) 0%, var(--q2) 45%, var(--q3) 100%);
}
/* La tacca del centro: era dentro .hr-bar ma posizionata rispetto a un
   antenato senza `position`, quindi finiva fuori dalla barra e non si
   vedeva. Ora è ancorata a .hr-track, che è relative. */
.hr-mid {
  position: absolute; top: -4px; width: 3px; height: 18px;
  border-radius: 2px; background: var(--ink);
  transform: translateX(-50%);
  box-shadow: 0 0 0 2px var(--card);
}
.hr-labels {
  position: relative; display: flex; justify-content: space-between;
  margin-top: 8px; font-size: calc(12px * var(--fs));
  font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums;
}
.hr-mid-lab {
  position: absolute; transform: translateX(-50%);
  color: var(--ink); font-weight: 800;
}

/* `.lead` esisteva solo dentro .ob (onboarding): serve anche nei fogli */
#toolBody .lead {
  font-size: calc(13px * var(--fs)); color: var(--muted);
  line-height: 1.55; margin-bottom: 12px;
}

/* ══════════════════════════════════════════════════════════════
   ANNULLA DOPO ELIMINAZIONE
   L'avviso porta con sé il pulsante: annullare non deve costare
   più di un tocco, e deve stare dov'è già lo sguardo.
   ══════════════════════════════════════════════════════════════ */
.toast.with-undo {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 9px 9px 18px; pointer-events: auto;
}
.toast-msg { flex: 1; }
/* Il pulsante eredita il colore del testo dell'avviso invece di forzare
   il bianco: così resta leggibile in entrambi i temi. Il fondo è una
   velatura chiara, che funziona perché l'avviso è scuro in tutti e due. */
.toast-undo {
  background: rgba(255,255,255,.18); color: var(--toast-fg);
  border-radius: 999px; padding: 7px 15px;
  font-size: calc(12.5px * var(--fs)); font-weight: 750;
  white-space: nowrap; flex-shrink: 0;
}
.toast-undo:active { background: rgba(255,255,255,.30); }

/* ══════════════════════════════════════════════════════════════
   MODIFICA RAPIDA DELLA PORZIONE
   ══════════════════════════════════════════════════════════════ */
.qp-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 14px 0 10px; flex-wrap: wrap;
}
.qp-kcal {
  font-size: calc(30px * var(--fs)); font-weight: 780;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.qp-head small { color: var(--muted); font-size: calc(12px * var(--fs)); margin-left: 5px; }
.qp-gwrap {
  display: flex; align-items: center; gap: 2px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 3px;
}
.qp-step {
  width: 36px; height: 36px; border-radius: 9px;
  font-size: calc(19px * var(--fs)); font-weight: 700;
  color: var(--indigo-600); background: var(--card);
  display: grid; place-items: center;
}
.qp-step:active { transform: scale(.92); }
.qp-g {
  width: 58px; text-align: center; border: none; background: none;
  font-size: calc(16px * var(--fs)); font-weight: 750; color: var(--ink);
  font-variant-numeric: tabular-nums; padding: 0;
}
.qp-g::-webkit-outer-spin-button, .qp-g::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.qp-g { -moz-appearance: textfield; }
.qp-unit { color: var(--muted); font-size: calc(12.5px * var(--fs)); font-weight: 600; }
/* Lo slider: senza `-webkit-appearance:none` e una traccia esplicita,
   iOS e Chrome mostravano solo il pallino su sfondo bianco — sembrava
   un puntino sospeso nel vuoto. Si vedeva solo guardando lo screenshot. */
.qp-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; margin: 6px 0 16px; height: 22px;
  background: transparent; display: block;
}
.qp-range::-webkit-slider-runnable-track {
  height: 6px; border-radius: 999px; background: var(--line);
}
.qp-range::-moz-range-track {
  height: 6px; border-radius: 999px; background: var(--line);
}
.qp-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%; margin-top: -8px;
  background: var(--indigo-600); border: 3px solid var(--card);
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
}
.qp-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--card);
  background: var(--indigo-600); box-shadow: 0 1px 4px rgba(0,0,0,.28);
}
.qp-range:active::-webkit-slider-thumb { transform: scale(1.12); }

/* ══════════════════════════════════════════════════════════════
   RICERCA CON STORICO
   ══════════════════════════════════════════════════════════════ */
/* MINIATURA — l'emoji sta sempre nel contenitore e l'immagine le va
   SOPRA, in griglia sulla stessa cella: se non carica basta nasconderla
   e riappare l'emoji, senza ricostruire HTML dentro un attributo.
   `position: relative` non serve: `place-items: center` su una griglia
   a cella unica sovrappone già i due figli. */
.ri-thumb {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  background: var(--bg); display: grid; place-items: center;
  overflow: hidden; font-size: calc(18px * var(--fs));
}
.ri-thumb > * { grid-area: 1 / 1; }
.ri-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Le foto dei prodotti hanno spesso sfondo bianco: in tema scuro un
   bordo sottile evita che sembrino ritagli incollati sopra la card. */
.ri-thumb:not(.ph) { border: 1px solid var(--line); }
.ri-plus {
  width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
  background: var(--indigo-50); color: var(--indigo-700);
  display: grid; place-items: center;
  font-size: calc(18px * var(--fs)); font-weight: 700; line-height: 1;
}
[data-theme="dark"] .ri-plus { background: var(--line-2); color: var(--indigo-400); }

/* ══════════════════════════════════════════════════════════════
   RIEPILOGO SETTIMANALE
   ══════════════════════════════════════════════════════════════ */
.rv-loading { display: flex; align-items: center; gap: 10px;
  font-size: calc(12.5px * var(--fs)); color: var(--muted); }
.rv-card { border-left: 3px solid var(--indigo-600); }
.rv-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.rv-head b { font-size: calc(14.5px * var(--fs)); font-weight: 750; }
.rv-period { font-size: calc(11.5px * var(--fs)); color: var(--muted); margin-top: 2px; }
.rv-close {
  margin-left: auto; width: 28px; height: 28px; border-radius: 8px;
  color: var(--muted); font-size: calc(13px * var(--fs));
  display: grid; place-items: center; flex-shrink: 0;
}
.rv-close:active { background: var(--bg); }

.rv-bars { display: flex; align-items: flex-end; gap: 5px; height: 52px; margin-bottom: 14px; }
.rv-col { flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.rv-bar { width: 100%; border-radius: 4px 4px 2px 2px; background: var(--q1); }
.rv-bar.off { background: var(--line); }
.rv-bar.off-target { background: var(--q3); }

.rv-headline {
  font-size: calc(14px * var(--fs)); font-weight: 700; color: var(--ink);
  line-height: 1.45; margin-bottom: 12px;
}
.rv-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--line-2);
}
.rv-row:last-of-type { border-bottom: none; }
.rv-lab { font-size: calc(12.5px * var(--fs)); color: var(--ink-2); flex: 1; }
.rv-val { font-size: calc(14px * var(--fs)); font-weight: 750; font-variant-numeric: tabular-nums; }
.rv-note { font-size: calc(11px * var(--fs)); color: var(--muted); }

.rv-block { margin-top: 12px; }
.rv-block p {
  font-size: calc(12.5px * var(--fs)); color: var(--ink-2);
  line-height: 1.55; margin-top: 3px;
}
.rv-tag {
  font-size: calc(10.5px * var(--fs)); font-weight: 750;
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.rv-win .rv-tag { color: var(--q1); }
.rv-focus .rv-tag { color: var(--q3); }
.rv-text {
  font-size: calc(12.5px * var(--fs)); color: var(--ink-2);
  line-height: 1.6; margin-top: 12px;
}
.rv-next {
  font-size: calc(12px * var(--fs)); color: var(--ink);
  line-height: 1.5; margin-top: 12px; padding: 10px 12px;
  background: var(--indigo-50); border-radius: 10px; font-weight: 600;
}
[data-theme="dark"] .rv-next { background: var(--line-2); }
.rv-foods { margin-top: 14px; }
.rv-foods .chips { margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════
   ATTIVITÀ FISICA
   ══════════════════════════════════════════════════════════════ */
.ac-bonus { border-left: 3px solid var(--q1); }
.ac-none { border-left: 3px solid var(--line); }
.ac-big { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; }
.ac-big b { font-size: calc(26px * var(--fs)); font-weight: 780; color: var(--q1); letter-spacing: -.03em; }
.ac-big small { color: var(--muted); font-size: calc(12px * var(--fs)); }
.ac-bonus p, .ac-none p { font-size: calc(12.5px * var(--fs)); color: var(--ink-2); line-height: 1.5; }
.ac-cap { color: var(--q3) !important; font-size: calc(11.5px * var(--fs)) !important; margin-top: 5px; }
.ac-row { display: flex; align-items: center; gap: 8px; }
.ac-row b { font-size: calc(13px * var(--fs)); }
.ac-ok { color: var(--q1); font-size: calc(11px * var(--fs)); }
.ac-deadline {
  font-size: calc(11.5px * var(--fs)); color: var(--ink-2);
  line-height: 1.5; margin-top: 8px; padding: 9px 11px;
  background: var(--warn-bg, var(--bg)); border-radius: 9px;
  border-left: 2px solid var(--q3);
}

/* Avviso "questo piano è in un'altra lingua". Informativo, non allarmante:
   il piano funziona, semplicemente il testo generato resta com'era. */
.lang-note {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--info-bg); border-left: 3px solid var(--q-info);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
}
.lang-note span {
  flex: 1; min-width: 180px;
  font-size: calc(11.5px * var(--fs)); color: var(--ink-2); line-height: 1.5;
}
.lang-note button {
  background: var(--q-info); color: #FFFFFF;
  border-radius: 999px; padding: 6px 14px; flex-shrink: 0;
  font-size: calc(11.5px * var(--fs)); font-weight: 700;
}
.lang-note button:active { transform: scale(.95); }
[data-theme="dark"] .lang-note button { background: var(--indigo-600); }

/* ══════════════════════════════════════════════════════════════
   BILANCIA BLUETOOTH — spiegazione
   Il pulsante di collegamento sparisce dove il Bluetooth non c'è
   (iPhone, Firefox): questo riquadro resta sempre e dice perché.
   ══════════════════════════════════════════════════════════════ */
.bt-link {
  display: block; width: 100%; text-align: left; margin-top: 8px;
  font-size: calc(12px * var(--fs)); font-weight: 650;
  color: var(--indigo-600); padding: 4px 0;
}
/* Nel tema scuro --indigo-600 (#6366F1) su card #161B24 dà 3,87:1,
   sotto la soglia AA. --indigo-400 arriva a 8,66:1. */
[data-theme="dark"] .bt-link { color: var(--indigo-400); }
.bt-help {
  background: var(--bg); border-radius: 12px;
  padding: 12px 14px; margin-top: 8px;
}
.bt-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bt-head b { font-size: calc(12.5px * var(--fs)); font-weight: 700; }
.bt-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--muted); flex-shrink: 0;
}
.bt-dot.on { background: var(--q1); }
.bt-why {
  font-size: calc(11.5px * var(--fs)); color: var(--ink-2);
  line-height: 1.55; margin-bottom: 10px;
}
.bt-steps {
  margin: 0 0 10px 16px; padding: 0;
  font-size: calc(11.5px * var(--fs)); color: var(--ink-2); line-height: 1.6;
}
.bt-steps li { margin-bottom: 4px; }
.bt-note {
  font-size: calc(10.5px * var(--fs)); color: var(--muted); line-height: 1.5;
}

/* Nota sui riferimenti non-NRV in fondo ai micronutrienti */
.micro-foot {
  font-size: calc(10.5px * var(--fs)); color: var(--muted);
  line-height: 1.5; margin-top: 12px;
}
.mrow-pct sup { font-size: .7em; opacity: .75; }

/* ══════════════════════════════════════════════════════════════
   RICETTARIO E DISPENDIO REALE
   ══════════════════════════════════════════════════════════════ */
.rc-count {
  font-size: calc(11.5px * var(--fs)); color: var(--muted);
  margin: 2px 0 8px;
}

.ad-hero {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 14px 0 6px;
}
.ad-big {
  font-size: calc(34px * var(--fs)); font-weight: 780;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.ad-hero small { color: var(--muted); font-size: calc(12.5px * var(--fs)); margin-left: 6px; }
.ad-conf {
  font-size: calc(11px * var(--fs)); font-weight: 700;
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}
/* I tre livelli usano le variabili --q, che il tema scuro ridefinisce:
   un colore fisso qui sarebbe illeggibile su fondo nero. */
.ad-conf.hi  { background: var(--ok-bg);   color: var(--ok); }
.ad-conf.mid { background: var(--warn-bg); color: var(--q3); }
.ad-conf.lo  { background: var(--line-2);  color: var(--muted); }
.ad-apply { border-left: 3px solid var(--indigo-600); }
.ad-apply b { font-size: calc(13.5px * var(--fs)); font-weight: 750; }
.ad-apply p {
  font-size: calc(12px * var(--fs)); color: var(--ink-2);
  line-height: 1.5; margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════
   CONFERMA PRIMA DI SALVARE
   L'AI sbaglia nome e porzione più spesso di quanto sembri: si
   correggono qui, dove costa un tocco, invece che nel diario.
   ══════════════════════════════════════════════════════════════ */
.confirm-box {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--indigo-600);
  border-radius: 14px; padding: 14px; margin-top: 14px;
}
.cf-head { display: flex; align-items: center; gap: 8px; }
.cf-head b { font-size: calc(13.5px * var(--fs)); font-weight: 750; }
.cf-ic {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--indigo-600); color: #fff;
  font-size: calc(11px * var(--fs)); font-weight: 800; line-height: 1;
}
.cf-sub {
  font-size: calc(11.5px * var(--fs)); color: var(--muted);
  line-height: 1.5; margin: 5px 0 10px;
}
.cf-lab {
  display: block; font-size: calc(11px * var(--fs)); font-weight: 650;
  color: var(--ink-2); margin-bottom: 4px;
}
.cf-input {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-size: calc(14px * var(--fs));
  color: var(--ink); background: var(--bg); margin-bottom: 10px;
}
.cf-input:focus { outline: 2px solid var(--indigo-600); outline-offset: -1px; }
.cf-row { display: flex; gap: 10px; }
.cf-row > div { min-width: 0; }
.cf-live {
  font-size: calc(12.5px * var(--fs)); font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

/* Il pulsante pulsa dopo una scansione "Rapido": prima salvava da solo,
   ora l'ultimo tocco è dell'utente e va reso evidente. */
@keyframes cf-pulse {
  0%, 100% { box-shadow: 0 3px 10px rgba(79,70,229,.26); }
  50%      { box-shadow: 0 3px 22px rgba(79,70,229,.75); }
}
.btn.pulse { animation: cf-pulse 1.1s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .btn.pulse { animation: none; } }

/* ══════════════════════════════════════════════════════════════
   RIFERIMENTO DIMENSIONALE nella fotocamera
   Sostituisce il sensore di profondità, che dal browser non è
   raggiungibile su iOS. Facoltativo: chi lo ignora non perde nulla.
   ══════════════════════════════════════════════════════════════ */
.cam-ref {
  position: absolute; left: 12px; right: 12px;
  bottom: calc(var(--safe-b) + 132px); z-index: 4;
}
.ref-toggle {
  background: rgba(0,0,0,.62); color: #fff;
  border-radius: 999px; padding: 8px 15px;
  font-size: calc(12px * var(--fs)); font-weight: 650;
  backdrop-filter: blur(8px);
}
.ref-list {
  margin-top: 8px; background: rgba(0,0,0,.82); border-radius: 14px;
  padding: 12px; backdrop-filter: blur(10px); max-height: 46vh; overflow-y: auto;
}
.ref-why {
  font-size: calc(11px * var(--fs)); color: rgba(255,255,255,.82);
  line-height: 1.5; margin-bottom: 10px;
}
.ref-item {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px; margin-bottom: 5px;
  color: #fff; font-size: calc(12.5px * var(--fs)); font-weight: 600;
  background: rgba(255,255,255,.09);
}
.ref-item small {
  display: block; font-weight: 400; opacity: .68;
  font-size: calc(10.5px * var(--fs)); margin-top: 2px;
}
.ref-item.on { background: var(--indigo-600); }
.ref-item:active { transform: scale(.98); }

/* ══════════════════════════════════════════════════════════════
   MODALITÀ GLP-1
   Il 25-40% del peso perso con questi farmaci è massa magra.
   L'anello grande delle proteine è la cosa che deve saltare
   all'occhio: è l'unico numero che protegge il muscolo.
   ══════════════════════════════════════════════════════════════ */
.glp-ring-row { display: flex; align-items: center; gap: 16px; margin: 14px 0; }
.glp-ring { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.glp-ring-in {
  position: absolute; inset: 0; display: grid; place-items: center;
  line-height: 1.1; text-align: center;
}
.glp-ring-in b { font-size: calc(21px * var(--fs)); font-weight: 780; display: block; }
.glp-ring-in small { font-size: calc(10.5px * var(--fs)); color: var(--muted); }
.glp-ring-txt { flex: 1; min-width: 0; }
.glp-ring-txt b { font-size: calc(13.5px * var(--fs)); font-weight: 750; }
.glp-ring-txt p {
  font-size: calc(12px * var(--fs)); color: var(--ink-2);
  line-height: 1.5; margin: 3px 0 5px;
}
.glp-alert {
  background: var(--warn-bg); border-left: 3px solid var(--q3);
  border-radius: 10px; padding: 11px 13px; margin: 12px 0;
}
.glp-alert b { font-size: calc(12.5px * var(--fs)); font-weight: 750; color: var(--q3); }
.glp-alert p {
  font-size: calc(11.5px * var(--fs)); color: var(--ink-2);
  line-height: 1.55; margin-top: 4px;
}
.glp-meal {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line-2);
}
.glp-meal:last-child { border-bottom: none; }
.glp-meal-n {
  display: flex; align-items: center; gap: 7px;
  font-size: calc(12.5px * var(--fs)); color: var(--ink-2);
}
.glp-meal-n svg { width: 15px; height: 15px; }
.glp-meal-v {
  font-size: calc(12.5px * var(--fs)); font-weight: 700;
  color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.glp-meal-v.ok { color: var(--ok); }

/* ── Obiettivo passi e contapassi ────────────────────────────────
   Aggiunti il 31/07/2026: il pannello accettava i passi ma non li
   confrontava con nulla, quindi non c'era niente da notificare. */
.step-goal { display: flex; align-items: center; gap: 13px; }
.sg-ring { position: relative; width: 58px; height: 58px; flex-shrink: 0; }
.sg-ring-txt { position: absolute; inset: 0; display: grid; place-items: center; }
.sg-ring-txt b { font-size: calc(14px * var(--fs)); font-weight: 750; letter-spacing: -.02em; }
.sg-ring-txt b span { font-size: calc(9px * var(--fs)); font-weight: 650; }
.sg-body { flex: 1; min-width: 0; }
.sg-body b { display: block; font-size: calc(13.5px * var(--fs)); font-weight: 700; color: var(--ink); }
.sg-body small { display: block; font-size: calc(11.5px * var(--fs)); color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.sg-edit {
  flex-shrink: 0; background: none; border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 11px; min-height: 40px;
  font-size: calc(11.5px * var(--fs)); font-weight: 650; color: var(--ink-2);
}
.sg-edit:active { background: var(--line-2); }

.pedo-lead { font-size: calc(12.5px * var(--fs)); line-height: 1.5; color: var(--ink-2); }
.pedo-off { font-size: calc(12.5px * var(--fs)); line-height: 1.5; color: var(--ink-2); }
.pedo-live {
  display: flex; align-items: baseline; gap: 8px; justify-content: center;
  margin-top: 11px; padding: 13px; border-radius: var(--r-md);
  background: var(--line-2); transition: background .2s;
}
.pedo-live.on { background: var(--ok-bg); }
.pedo-live b { font-size: calc(30px * var(--fs)); font-weight: 750; letter-spacing: -.03em; color: var(--ink); }
.pedo-live.on b { color: var(--ok); }
.pedo-live small { font-size: calc(11.5px * var(--fs)); color: var(--muted); font-weight: 600; }

/* Pannello installazione: l'elenco dei passi aveva il primo punto
   attaccato al paragrafo sopra (visto a schermo, non dai test). */
#installBox .bt-steps { margin-top: 10px; }

/* ── Traguardi e livelli ─────────────────────────────────────────
   Sobri di proposito: niente coriandoli né colori sgargianti. In
   un'app di nutrizione la gamification deve incoraggiare la costanza,
   non trasformarsi in una slot machine. */
.ach-count {
  font-size: calc(11.5px * var(--fs)); font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lvl-card { padding: 14px; }
.lvl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lvl-top b { font-size: calc(15px * var(--fs)); font-weight: 750; letter-spacing: -.02em; }
.lvl-top span { font-size: calc(11.5px * var(--fs)); color: var(--muted); font-variant-numeric: tabular-nums; }
.lvl-bar {
  height: 8px; border-radius: 999px; background: var(--line-2);
  overflow: hidden; margin-top: 9px;
}
.lvl-bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--indigo-500), var(--indigo-600));
  transition: width .45s cubic-bezier(.4,0,.2,1);
}
.lvl-next { font-size: calc(11.5px * var(--fs)); color: var(--ink-2); margin-top: 8px; }

.ach-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px; margin-top: 10px;
}
.ach {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 11px 7px; border-radius: var(--r-md);
  background: var(--card); border: 1px solid var(--line);
  text-align: center; min-height: 82px; justify-content: center;
}
.ach-ic { font-size: calc(21px * var(--fs)); line-height: 1; }
.ach-lab {
  font-size: calc(10px * var(--fs)); font-weight: 650; line-height: 1.3;
  color: var(--ink-2);
}
.ach.bronze { border-color: #D8A25E; background: rgba(216,162,94,.09); }
.ach.silver { border-color: #9CA3AF; background: rgba(156,163,175,.11); }
.ach.gold   { border-color: #D4A017; background: rgba(212,160,23,.12); }
.ach.plat   { border-color: var(--indigo-400); background: var(--indigo-50); }
/* non ancora ottenuti: visibili ma spenti, mai barrati o "falliti" */
.ach.off { opacity: .55; border-style: dashed; }
.ach-pct {
  font-size: calc(9.5px * var(--fs)); font-weight: 700; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ach-more { margin-top: 10px; }
.ach-more summary {
  font-size: calc(12px * var(--fs)); font-weight: 650; color: var(--indigo-700);
  cursor: pointer; padding: 8px 0; min-height: 40px; display: flex; align-items: center;
}
[data-theme="dark"] .ach.bronze { background: rgba(216,162,94,.14); }
[data-theme="dark"] .ach.gold   { background: rgba(212,160,23,.16); }

/* ═══════════════ QUANTO NE MANGIO — calcolo porzioni ═══════════════
   Tutti i colori vengono dalle variabili del tema: la stessa regola
   vale in chiaro e in scuro, senza un secondo blocco da tenere
   allineato a mano (è così che nascono i contrasti da 1,44:1). */
.pz-list { display: flex; flex-direction: column; gap: 8px; }

.pz-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line);
}
.pz-row.locked { border-color: var(--m-pro); background: var(--indigo-50); }
.pz-emo { font-size: calc(21px * var(--fs)); line-height: 1; flex-shrink: 0; }
.pz-info { flex: 1; min-width: 0; }
.pz-info b {
  display: block; font-size: calc(13.5px * var(--fs)); font-weight: 650;
  color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pz-info small { font-size: calc(10.5px * var(--fs)); color: var(--muted); }

/* I grammi sono il risultato: devono leggersi a colpo d'occhio, senza
   competere con il nome dell'alimento. */
.pz-g { text-align: right; flex-shrink: 0; }
.pz-g b { font-size: calc(19px * var(--fs)); font-weight: 750; letter-spacing: -.03em; color: var(--ink); }
.pz-g small { font-size: calc(11px * var(--fs)); color: var(--muted); margin-left: 1px; }
.pz-k { font-size: calc(10.5px * var(--fs)); color: var(--muted); margin-top: -1px; }

/* 44x44 è la dimensione minima raccomandata per un bersaglio tattile:
   il lucchetto si tocca col pollice, non col mouse. */
.pz-lock {
  flex-shrink: 0; width: 44px; height: 44px; margin: -6px -6px -6px 0;
  border: 0; background: none; cursor: pointer;
  font-size: calc(16px * var(--fs)); line-height: 1; opacity: .45;
  border-radius: 12px; transition: opacity .15s, background .15s;
}
.pz-lock:hover { opacity: .8; background: var(--chip); }
.pz-lock.on { opacity: 1; }

.pz-sum { padding: 13px; border-radius: 15px; background: var(--chip); border: 1px solid var(--line); }
.pz-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 11px; font-size: calc(12px * var(--fs));
  font-weight: 650; color: var(--ink-2);
}
.pz-head b { font-size: calc(21px * var(--fs)); font-weight: 750; letter-spacing: -.03em; color: var(--ink); }
.pz-head small { font-size: calc(11px * var(--fs)); font-weight: 500; color: var(--muted); }

.pz-m { margin-bottom: 9px; }
.pz-m:last-child { margin-bottom: 0; }
.pz-ml {
  display: flex; justify-content: space-between;
  font-size: calc(11.5px * var(--fs)); color: var(--ink-2); margin-bottom: 4px;
}
.pz-ml small { color: var(--muted); }

.pz-bar { display: flex; height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pz-bar i { display: block; border-radius: 4px; transition: width .3s ease; }
.pz-bar i.p { background: var(--m-pro); }
.pz-bar i.c { background: var(--m-car); }
.pz-bar i.f { background: var(--m-fat); }
/* Lo sforamento si vede, non si nasconde: la parte oltre il 100% è rossa. */
.pz-bar u { display: block; background: var(--bad); border-radius: 0 4px 4px 0; }

.pz-verdict {
  padding: 11px 13px; border-radius: 13px; text-align: center;
  font-size: calc(13px * var(--fs)); font-weight: 650;
}
.pz-verdict.ok { background: var(--ok-bg); color: var(--ok); }
.pz-verdict.warn { background: var(--warn-bg); color: var(--warn); }
.pz-verdict.bad { background: var(--bad-bg); color: var(--bad); }

.pz-warn { display: flex; flex-direction: column; gap: 7px; }
.pz-warn div {
  padding: 10px 12px; border-radius: 12px;
  background: var(--warn-bg); color: var(--warn);
  font-size: calc(12px * var(--fs)); line-height: 1.45;
}

.pz-why summary {
  cursor: pointer; font-size: calc(11.5px * var(--fs));
  color: var(--muted); font-weight: 600; padding: 6px 0;
}
.pz-why p {
  font-size: calc(11.5px * var(--fs)); color: var(--ink-2);
  line-height: 1.55; margin-top: 6px;
}

/* ═══════════════ SELETTORE LINGUA ═══════════════
   Il doppio pulsante IT|EN non scala oltre due lingue: nell'intestazione
   resta la sigla di quella attiva, l'elenco vive in Impostazioni. */
.lang-now {
  min-width: 38px; height: 32px; padding: 0 9px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--card); color: var(--ink-2);
  font-size: calc(11.5px * var(--fs)); font-weight: 750; letter-spacing: .02em;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.lang-now:hover { background: var(--chip); border-color: var(--m-pro); }

.lang-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  min-height: 48px; padding: 10px 13px; margin-bottom: 7px;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--card); cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.lang-row:last-of-type { margin-bottom: 0; }
.lang-row:hover { background: var(--chip); }
.lang-row.on { border-color: var(--m-pro); background: var(--indigo-50); }
.lang-flag { font-size: calc(19px * var(--fs)); line-height: 1; }
/* Il nome è scritto nella lingua stessa: chi ha aperto l'app in una
   lingua che non capisce deve poter riconoscere la propria. */
.lang-name { flex: 1; font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--ink); }
/* `--m-pro` è il viola delle barre macro: in tema scuro theme-v26 lo
   tiene a #7542F7, che sul fondale della riga attiva dà 3,25:1 — sotto
   la soglia di 4,5:1 e segnalato da audit-dark. `--indigo-700` è la
   variabile pensata per il TESTO e cambia col tema: 5,7:1 in chiaro,
   7,4:1 in scuro. */
.lang-row.on .lang-name { color: var(--indigo-700); }
.lang-tick { color: var(--indigo-700); font-weight: 800; font-size: calc(14px * var(--fs)); }

/* ═══════════════ COME SI PREPARA ═══════════════ */
.pitem-body { border: 0; background: none; text-align: left; padding: 0;
  flex: 1; min-width: 0; cursor: pointer; font: inherit; color: inherit; }
.pitem-body:active { opacity: .6; }

.prep-ready { padding: 10px 13px; border-radius: 12px;
  background: var(--ok-bg); color: var(--ok);
  font-size: calc(12.5px * var(--fs)); font-weight: 650; }
.prep-list { display: flex; flex-direction: column; gap: 10px; }
.prep-way { padding: 12px 14px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--line); }
.prep-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 7px; }
.prep-head b { font-size: calc(14px * var(--fs)); font-weight: 700; color: var(--ink); }
.prep-min { font-size: calc(11px * var(--fs)); color: var(--muted); white-space: nowrap; }
.prep-steps { margin: 0; padding-left: 19px; }
.prep-steps li { font-size: calc(12.5px * var(--fs)); line-height: 1.55;
  color: var(--ink-2); margin-bottom: 4px; }
.prep-steps li:last-child { margin-bottom: 0; }
/* Gli ingredienti in più vanno distinti dai passaggi: un piano fissa
   quella quantità per un motivo, e aggiungerne altre va visto. */
.prep-adds { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: calc(11.5px * var(--fs)); color: var(--muted); }
.prep-note { padding: 10px 13px; border-radius: 12px;
  background: var(--warn-bg); color: var(--warn);
  font-size: calc(12px * var(--fs)); line-height: 1.5; }

/* Azioni irreversibili: staccate dal resto da una linea, così non si
   toccano per inerzia dopo aver scorso le impostazioni. */
.danger-zone { padding-top: 14px; border-top: 1px solid var(--line); }

/* Nel piano non ci sono foto: le voci arrivano dall'AI come testo, e
   cercarle una per una su Open Food Facts vorrebbe dire dieci
   richieste di rete per aprire una schermata. L'emoji dedotta dal
   nome dà lo stesso aiuto — riconoscere la riga a colpo d'occhio —
   senza costo. */
.pitem-emo { margin-right: 6px; font-size: calc(15px * var(--fs)); }

/* Campo grammi nella conferma di "Scrivi": stretto e in linea, perché
   sta dentro una card già densa e non deve rubare la scena al nome. */
.txt-gram { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.txt-gram label { font-size: calc(11.5px * var(--fs)); color: var(--muted); font-weight: 650; }
.txt-gram input {
  width: 84px; padding: 7px 9px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font-size: calc(13px * var(--fs)); font-weight: 650; text-align: right;
}
.txt-gram input:focus { border-color: var(--m-pro); outline: none; }

/* Diagnostica della dettatura: chiusa per difetto, si apre solo quando
   serve. Non è per l'utente comune ma per rispondere a "non funziona"
   senza dover indovinare. */
.ver-diag summary { cursor: pointer; font-size: calc(11.5px * var(--fs));
  color: var(--muted); font-weight: 650; padding: 6px 0; }
.ver-diag-body { padding-top: 6px; }
.ver-diag-body .ver-row { font-size: calc(12px * var(--fs)); padding: 3px 0; }

/* ═══════════════ PRODOTTI NELLE SOSTITUZIONI ═══════════════
   Il consiglio del Coach è generico ("una barretta proteica a basso
   contenuto di zucchero"); qui sotto ci sono prodotti veri che quel
   criterio lo rispettano davvero, coi numeri verificati. */
.swap-prods { padding: 2px 0 10px 0; }
.swap-prods-lab {
  font-size: calc(10.5px * var(--fs)); font-weight: 750; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em; margin: 4px 0 7px;
}
.swap-prod {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; margin-bottom: 6px; text-align: left;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); cursor: pointer; transition: background .14s;
}
.swap-prod:active { background: var(--chip); }
.swap-prod-img {
  width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0;
  overflow: hidden; background: var(--bg);
  display: grid; place-items: center; font-size: calc(17px * var(--fs));
}
.swap-prod-img > * { grid-area: 1 / 1; }
.swap-prod-img img { width: 100%; height: 100%; object-fit: cover; }
.swap-prod-txt { flex: 1; min-width: 0; }
.swap-prod-txt b {
  display: block; font-size: calc(12.5px * var(--fs)); font-weight: 650; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.swap-prod-txt small { font-size: calc(10.5px * var(--fs)); color: var(--muted); }
/* Va detto da dove escono: nessun accordo commerciale, solo numeri. */
.swap-prods-note {
  font-size: calc(10.5px * var(--fs)); color: var(--muted);
  line-height: 1.45; margin-top: 6px;
}

/* ── TRASCINA UNA VOCE FRA I PASTI (diary-dnd.js) ──
   Il fantasma segue il dito; il gruppo sotto si illumina. Senza il
   riscontro visivo non si capisce dove si sta rilasciando. */
.entry.dnd-source { opacity: .35; }
.dnd-ghost { pointer-events: none; }
.meal-group.dnd-over,
.meal-empty.dnd-over {
  outline: 2px dashed var(--brand, #4338CA);
  outline-offset: 2px;
  background: color-mix(in srgb, var(--brand, #4338CA) 8%, transparent);
  border-radius: 14px;
}
/* Durante la pressione prolungata il testo non deve selezionarsi:
   su Android comparirebbe la lente di ingrandimento del sistema. */
#diaryBody .entry { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* ═══════════════════════════════════════════════════════════════
   ORIZZONTALE (landscape)
   ═══════════════════════════════════════════════════════════════
   Segnalato nel report dei tester del 19/08/2026: ruotando il
   telefono l'app restava in colonna da 480 px al centro, con due
   fasce vuote ai lati, e la barra di navigazione continuava a
   mangiare 64 px in basso su 390 px di altezza totale — un sesto
   dello schermo. Il contenuto risultava tagliato.

   Non era rotto il layout: semplicemente non esisteva una sola
   regola per l'orizzontale. Verificato: zero occorrenze di
   `orientation` in tutto il CSS.

   La soglia è sull'ALTEZZA, non sull'orientamento: un telefono
   ruotato e una finestra bassa hanno lo stesso problema, e
   `orientation: landscape` è vero anche su un tablet alto 800 px,
   dove invece va benissimo il layout normale.
   ══════════════════════════════════════════════════════════════ */
@media (orientation: landscape) and (max-height: 500px) {
  /* La colonna può allargarsi: 480 px al centro di 844 lascia due
     fasce morte da 180 px ciascuna. */
  .app {
    max-width: 100%;
    padding-bottom: 12px;          /* la nav non è più in basso */
    padding-left: calc(var(--nav-w-land) + var(--safe-l, 0px));
  }

  /* La navigazione passa di lato: in verticale toglie altezza dove
     ce n'è poca, di lato usa la larghezza che avanza. */
  .nav {
    left: 0; bottom: 0; top: 0;
    transform: none;
    width: var(--nav-w-land); max-width: none;
    height: 100%;
    padding-bottom: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    border-top: none;
    border-right: 1px solid var(--line);
  }
  .nav button { padding: 7px 2px; }
  .nav svg { width: 20px; height: 20px; }
  .nav b { font-size: calc(9px * var(--fs)); }

  /* La barra in alto non deve restare appiccicata: con 390 px di
     altezza ogni pixel sprecato si vede. */
  .topbar { padding-top: calc(var(--safe-t) + 6px); padding-bottom: 6px; }

  /* I pannelli a comparsa partivano da sotto occupando tutto: qui
     resterebbe visibile una striscia. Meglio centrati e più larghi. */
  .sheet {
    max-width: 620px; max-height: 94vh;
    border-radius: var(--r-xl);
    margin: 3vh auto;
  }

  /* Le schermate di scansione e attesa erano pensate verticali. */
  .scan-box { max-height: 40vh; }
}

/* Larghezza della barra laterale in orizzontale. Sta fuori dalla
   media query perché serve anche nel calcolo del padding. */
:root { --nav-w-land: 62px; }

/* ═══════════════════════════════════════════════════════════════════
   PANNELLO "REGISTRA ALIMENTO" — rifatto 05/09/2026 su image-5.png

   Prima: cinque righe identiche distinte solo dall'emoji. Per capire
   quale scegliere bisognava leggerle tutte, e la foto — che e' quella
   che fa il lavoro vero — aveva lo stesso peso visivo della ricerca.

   Ora: tre riquadri affiancati per le strade principali (foto, testo,
   voce) con la foto evidenziata, due righe larghe per codice a barre
   e ricerca, poi gli alimenti rapidi e gli ultimi inseriti.

   Contrasti misurati con la formula WCAG:
     bordo --line #9184D0 su card scura #17102F ... 5,57:1
     bordo --line #8F7EC8 su card chiara #FFFFFF .. 3,51:1
     bordo acceso #7C5CFF su #17102F .............. 4,20:1
     bordo acceso #7C5CFF su #FFFFFF .............. 4,35:1
     bianco su cerchio #6C50F3 .................... 5,15:1
   Tutti sopra la soglia 3:1 per gli elementi non testuali.
   ═══════════════════════════════════════════════════════════════════ */

.lg-h { font-size: calc(24px * var(--fs)); font-weight: 800; margin: 0 0 2px; letter-spacing: -.02em; }
.lg-sub { font-size: calc(14px * var(--fs)); color: var(--muted); margin: 0 0 16px; }

/* ── I tre riquadri grandi ─────────────────────────────────────── */
.lg-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-bottom: 10px; align-items: stretch;
}
.lg-card {
  position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 7px;
  padding: 16px 10px 13px; min-width: 0;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--card); color: var(--ink); cursor: pointer;
  transition: transform .12s, border-color .12s, box-shadow .12s;
  -webkit-tap-highlight-color: transparent;
}
.lg-card:active { transform: scale(.97); }

/* Quello evidenziato: bordo acceso e alone. E' la strada consigliata,
   non un semplice primo elemento della lista. */
.lg-card.main { border-color: #7C5CFF; box-shadow: 0 0 0 1px #7C5CFF inset, 0 0 18px rgba(124,92,255,.22); }
.lg-ai {
  position: absolute; top: 9px; right: 9px;
  font-size: calc(10px * var(--fs)); font-weight: 800; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px;
  background: linear-gradient(145deg, #7C5CFF, #5B4FE0); color: #fff;
}
.lg-ic {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #7C5CFF, #6C50F3 55%, #5B4FE0); color: #fff;
  box-shadow: 0 3px 12px rgba(91,79,224,.34);
}
.lg-ic svg { width: 25px; height: 25px; }
/* A 412px ogni riquadro ha 119px netti. Con --fs 1.16 un titolo a
   13.5px manda "Inserisci manualmente" a tre righe e la descrizione a
   quattro: i riquadri diventano alti 200px e il pannello non entra
   piu' nello schermo. Misurato, non stimato. */
/* Niente `-webkit-line-clamp` qui. Serviva a uniformare le altezze dei
   tre riquadri, ma quelle le uniforma gia' la griglia (`align-items:
   stretch` e' il valore predefinito). L'unico effetto era tagliare le
   parole: "Inserisci manualmente" diventava "Inserisci manual…" in
   italiano, francese e portoghese. Il testo va a capo, e i riquadri
   restano alti uguali perche' e' la griglia a decidere. */
.lg-t {
  font-size: calc(12.5px * var(--fs)); font-weight: 700; line-height: 1.22;
  overflow-wrap: break-word;
}
.lg-s {
  font-size: calc(10.5px * var(--fs)); color: var(--muted); line-height: 1.3;
  overflow-wrap: break-word;
}
.lg-go {
  width: 26px; height: 26px; border-radius: 50%; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--muted); flex: 0 0 26px;
}
/* Nei riquadri grandi la freccia va in fondo, non subito sotto il
   testo: con descrizioni di lunghezza diversa ("Dicci cosa hai
   mangiato" e' meta' di "Riconosco gli alimenti e calcolo i valori")
   le tre frecce finivano a tre altezze diverse. `margin-top: auto`
   spinge in fondo lo spazio libero della colonna flex. */
.lg-card .lg-go { margin-top: auto; }
.lg-go svg { width: 13px; height: 13px; }
.lg-card.main .lg-go { border-color: #7C5CFF; color: #A78BFA; }

/* ── Le due righe larghe ───────────────────────────────────────── */
/* Una colonna sola, non due.
   Misurato a 412px: due colonne lasciano 73px netti al testo (183 di
   colonna meno icona 40, freccia 26, due gap e il padding). Con 73px
   "Lebensmittel" (70px), "nutritionnelles" (69px) e "code-barres"
   (55px) finivano spezzate a meta' parola in tedesco e francese, e in
   italiano "Scansiona il codice a barre" occupava tre righe.
   A piena larghezza il testo ha 292px: ci stanno tutte le lingue.
   Il mockup le mostra affiancate, ma il mockup e' in italiano e con
   testi piu' corti di quelli veri. */
.lg-wides { display: grid; grid-template-columns: 1fr; gap: 9px; margin-bottom: 18px; align-items: stretch; }
.lg-wide {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 13px 12px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); color: var(--ink); cursor: pointer; text-align: left;
  transition: transform .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
}
.lg-wide:active { transform: scale(.98); }
.lg-wic {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo-600); color: #fff;
}
.lg-wic svg { width: 21px; height: 21px; }
.lg-wtx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lg-wtx b {
  font-size: calc(12px * var(--fs)); font-weight: 700; line-height: 1.22;
  overflow-wrap: break-word;
}
.lg-wtx small {
  font-size: calc(10.5px * var(--fs)); color: var(--muted); line-height: 1.28;
  overflow-wrap: break-word;
}
.lg-wide .lg-go { margin-top: 0; flex: 0 0 26px; }

/* ── Intestazione di sezione ───────────────────────────────────── */
.lg-sec { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; }
.lg-sec-ic {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--indigo-500);
}
.lg-sec-ic svg { width: 16px; height: 16px; }
.lg-sec b { flex: 1 1 auto; font-size: calc(14.5px * var(--fs)); font-weight: 700; }
.lg-sec-go {
  display: flex; align-items: center; gap: 3px; background: transparent; border: 0;
  font-size: calc(12.5px * var(--fs)); font-weight: 650; color: var(--indigo-500);
  cursor: pointer; padding: 4px;
}
.lg-sec-go svg { width: 13px; height: 13px; }

/* ── Aggiungi rapidamente: sei riquadri ────────────────────────── */
.lg-quick {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px; margin-bottom: 18px; align-items: stretch;
}
.lg-q {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 4px; min-width: 0;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--card); color: var(--ink); cursor: pointer;
  transition: transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.lg-q:active { transform: scale(.95); }
.lg-q-im {
  width: 34px; height: 34px; border-radius: 9px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; line-height: 1;
}
.lg-q-im img { width: 100%; height: 100%; object-fit: cover; }
.lg-q-n {
  font-size: calc(9px * var(--fs)); font-weight: 600; color: var(--ink-2);
  line-height: 1.18; text-align: center;
  /* Tre righe, non due: il riquadro e' largo 56px e "Caffe' senza
     zucchero" con due righe usciva come "Caffe' senza..". Le altezze
     restano uniformi perche' la griglia allinea gli elementi in
     stretch: e' il contenitore a decidere, non il contenuto. */
  overflow-wrap: break-word;
}

/* ── Ultimi inseriti: tre riquadri ─────────────────────────────── */
.lg-last {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin-bottom: 16px; align-items: stretch;
}
.lg-l {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 10px; border: 1px solid var(--line); border-radius: 13px;
  background: var(--card); color: var(--ink); cursor: pointer; text-align: left;
  transition: transform .12s;
  -webkit-tap-highlight-color: transparent;
}
.lg-l:active { transform: scale(.97); }
.lg-l-im {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; line-height: 1; background: var(--line-2);
}
.lg-l-im img { width: 100%; height: 100%; object-fit: cover; }
.lg-l-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lg-l-tx b {
  font-size: calc(10.5px * var(--fs)); font-weight: 700; line-height: 1.2;
  /* `white-space: nowrap` troncava "Caffe' espresso" a "Caffe' ...". */
  overflow-wrap: break-word;
}
.lg-l-tx small { font-size: calc(10.5px * var(--fs)); color: var(--muted); line-height: 1.2; }

/* ── Il consiglio ──────────────────────────────────────────────── */
.lg-tip {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--card);
}
.lg-tip-ic { flex: 0 0 22px; color: var(--indigo-500); margin-top: 1px; }
.lg-tip-ic svg { width: 20px; height: 20px; }
.lg-tip-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lg-tip-tx b { font-size: calc(12.5px * var(--fs)); font-weight: 700; color: var(--indigo-500); }
.lg-tip-tx small { font-size: calc(11.5px * var(--fs)); color: var(--muted); line-height: 1.4; }
.lg-tip-x {
  flex: 0 0 22px; width: 22px; height: 22px; padding: 0;
  background: transparent; border: 0; color: var(--muted); cursor: pointer;
}
.lg-tip-x svg { width: 15px; height: 15px; }

/* Il tasto Chiudi con la linea luminosa sotto, come nel mockup */
.lg-close { position: relative; }
[data-theme="dark"] .lg-close {
  border-color: var(--line);
  box-shadow: 0 3px 14px rgba(124,92,255,.3);
}

/* Il glow dei riquadri vale solo sul fondo scuro */
[data-theme="dark"] .lg-ic { box-shadow: 0 0 16px rgba(124,92,255,.38), 0 3px 12px rgba(0,0,0,.3); }

/* ── Schermi stretti ───────────────────────────────────────────── */
@media (max-width: 400px) {
  .lg-h { font-size: calc(21px * var(--fs)); }
  .lg-grid { gap: 7px; }
  .lg-card { padding: 13px 6px 11px; border-radius: 15px; }
  .lg-ic { width: 44px; height: 44px; }
  .lg-ic svg { width: 22px; height: 22px; }
  .lg-t { font-size: calc(12px * var(--fs)); }
  /* La descrizione dei riquadri grandi sparisce: a 360px con --fs 1.16
     "Riconosco gli alimenti e calcolo i valori" occupa quattro righe in
     una colonna da 105px e i tre riquadri diventano alti il doppio. */
  .lg-s { display: none; }
  .lg-wides { gap: 8px; }
  .lg-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .lg-last { grid-template-columns: 1fr; gap: 6px; }
  .lg-l-tx b { font-size: calc(12.5px * var(--fs)); }
}

/* ═══════════════════════════════════════════════════════════════════
   AVVISO "STAI PER PERDERE DEI DATI"  (v77, 05/09/2026)

   Compare quando il diario del dispositivo ha molte più voci
   dell'account con cui si è appena entrati. Nasce dal caso reale del
   04/09: 157 voci sul telefono, 5 sull'account sbagliato.

   Contrasti misurati (WCAG):
     ambra #FBBF24 su card scura #17102F ..... 10,92:1
     ambra #B45309 su card chiara #FFFFFF .....  5,02:1
   Un solo ambra per entrambi i temi non esiste: #F59E0B è 8,49:1 sul
   scuro ma 2,15:1 sul chiaro, sotto ogni soglia. Servono due valori.
   ═══════════════════════════════════════════════════════════════════ */

.cw-ic {
  width: 46px; height: 46px; border-radius: 50%; margin: 2px auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--warn-bg, #FEF3C7); color: #B45309;
}
.cw-ic svg { width: 24px; height: 24px; }
[data-theme="dark"] .cw-ic { background: #3A2A08; color: #FBBF24; }

.cw-t {
  font-size: calc(19px * var(--fs)); font-weight: 780; text-align: center;
  letter-spacing: -.02em; margin: 0 0 8px;
}
.cw-s {
  font-size: calc(13.5px * var(--fs)); color: var(--ink-2); line-height: 1.55;
  text-align: center; margin: 0 0 16px;
}

/* I due numeri a confronto: è il cuore dell'avviso.
   Vedere "157 → 5" comunica il rischio in un colpo d'occhio, molto
   meglio di una frase che si legge di fretta e si approva. */
.cw-box {
  display: flex; align-items: center; gap: 10px; margin-bottom: 18px;
  padding: 14px 12px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--card);
}
.cw-r { flex: 1 1 0; min-width: 0; text-align: center; }
.cw-r b {
  display: block; font-size: calc(26px * var(--fs)); font-weight: 800;
  line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.cw-r small {
  display: block; font-size: calc(10.5px * var(--fs)); color: var(--muted);
  margin-top: 3px; line-height: 1.25;
}
/* Il primo riquadro è quello che si perde: numero in ambra */
.cw-r:first-child b { color: #B45309; }
[data-theme="dark"] .cw-r:first-child b { color: #FBBF24; }
.cw-vs { flex: 0 0 auto; color: var(--muted); font-size: calc(18px * var(--fs)); }

.cw-note {
  font-size: calc(11.5px * var(--fs)); color: var(--muted);
  line-height: 1.45; text-align: center; margin: 12px 0 0;
}

@media (max-width: 380px) {
  .cw-t { font-size: calc(17px * var(--fs)); }
  .cw-r b { font-size: calc(22px * var(--fs)); }
  .cw-box { gap: 6px; padding: 12px 8px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PAYWALL, TAPPE DELLA PROVA, BADGE  (v77, 05/09/2026)

   Contrasti misurati (WCAG):
     bianco su pillola #6C50F3 ............ 5,15:1
     bordo #7C5CFF su card scura .......... 4,20:1
     bordo #7C5CFF su card chiara ......... 4,35:1
     verde #059669 su card chiara ......... 3,77:1
     verde #10B981 su card scura .......... 7,19:1
   Il verde è sdoppiato per tema: #10B981 sul chiaro fa 2,54:1, sotto
   soglia, e #059669 sullo scuro perde forza. Un valore solo non basta.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Badge nell'intestazione: solo negli ultimi 5 giorni ─────────── */
.trial-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px 6px 9px; border-radius: 999px; border: 0;
  background: linear-gradient(145deg, #7C5CFF, #5B4FE0); color: #fff;
  font-size: calc(11.5px * var(--fs)); font-weight: 700; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 8px rgba(91,79,224,.3);
}
.trial-pill svg { width: 12px; height: 12px; transform: rotate(180deg); }
.trial-pill:active { transform: scale(.96); }
@media (max-width: 380px) { .trial-pill { padding: 5px 8px; font-size: calc(10.5px * var(--fs)); } }

/* ── Paywall ─────────────────────────────────────────────────────── */
.pw-crown {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #7C5CFF, #5B4FE0); color: #fff;
  box-shadow: 0 4px 16px rgba(91,79,224,.36);
}
.pw-crown svg { width: 28px; height: 28px; }
.pw-h {
  font-size: calc(21px * var(--fs)); font-weight: 800; text-align: center;
  letter-spacing: -.025em; margin: 0 0 6px; line-height: 1.2;
}
.pw-sub {
  font-size: calc(13px * var(--fs)); color: var(--muted); text-align: center;
  line-height: 1.5; margin: 0 0 18px;
}

.pw-list { display: flex; flex-direction: column; gap: 11px; margin-bottom: 18px; }
.pw-b { display: flex; align-items: flex-start; gap: 11px; }
.pw-b-ic {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo-600); color: #fff;
}
.pw-b-ic svg { width: 20px; height: 20px; }
.pw-b-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-b-tx b { font-size: calc(13.5px * var(--fs)); font-weight: 700; line-height: 1.25; }
.pw-b-tx small { font-size: calc(11.5px * var(--fs)); color: var(--muted); line-height: 1.4; }

/* ── I due prezzi ────────────────────────────────────────────────── */
.pw-prezzi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; align-items: stretch; }
.pw-p {
  position: relative; text-align: center; padding: 15px 8px 13px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card);
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
}
.pw-p small { font-size: calc(11px * var(--fs)); color: var(--muted); font-weight: 600; }
.pw-p b {
  font-size: calc(22px * var(--fs)); font-weight: 800; letter-spacing: -.03em;
  line-height: 1.15; font-variant-numeric: tabular-nums;
}
.pw-p span:last-child { font-size: calc(10.5px * var(--fs)); color: var(--muted); line-height: 1.3; }
.pw-p.best {
  border-color: #7C5CFF; padding-top: 21px;
  box-shadow: 0 0 0 1px #7C5CFF inset, 0 0 18px rgba(124,92,255,.2);
}
.pw-best {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  font-size: calc(8.5px * var(--fs)); font-weight: 800; letter-spacing: .06em;
  padding: 3px 10px; border-radius: 0 0 9px 9px;
  background: linear-gradient(145deg, #7C5CFF, #5B4FE0); color: #fff;
  white-space: nowrap;
}

/* La riga che toglie l'ansia di chi valuta: cosa succede ai miei dati */
.pw-safe {
  display: flex; align-items: flex-start; gap: 7px; margin: 0 0 16px;
  font-size: calc(11.5px * var(--fs)); line-height: 1.45; color: var(--ink-2);
}
.pw-safe svg { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 2px; color: #059669; }
[data-theme="dark"] .pw-safe svg { color: #10B981; }

.pw-cta { font-size: calc(15px * var(--fs)); font-weight: 750; }
.pw-note {
  font-size: calc(11px * var(--fs)); color: var(--muted); text-align: center;
  line-height: 1.45; margin: 10px 0 0;
}
.pw-fatto {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border-radius: 14px; font-weight: 700;
  font-size: calc(14px * var(--fs));
  background: var(--good-bg, #ECFDF5); color: #059669; border: 1px solid #A7F3D0;
}
.pw-fatto svg { width: 18px; height: 18px; }
[data-theme="dark"] .pw-fatto { background: #06281C; color: #10B981; border-color: #12503A; }

/* ── Tappe della prova ───────────────────────────────────────────── */
.tp-top {
  width: 50px; height: 50px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo-50); color: var(--indigo-600);
}
.tp-top svg { width: 25px; height: 25px; }
[data-theme="dark"] .tp-top { background: #241C52; color: #A78BFA; }

.tp-h {
  font-size: calc(21px * var(--fs)); font-weight: 800; text-align: center;
  letter-spacing: -.025em; margin: 0 0 12px; line-height: 1.2;
}
.tp-uno {
  font-size: calc(14.5px * var(--fs)); text-align: center; color: var(--ink-2);
  line-height: 1.55; margin: 0 0 16px;
}

/* La griglia dei numeri veri: `auto-fit` perché le voci variano —
   chi non ha pesato non deve vedere un riquadro "0 pesate". */
.tp-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 9px; margin-bottom: 16px;
}
.tp-r {
  text-align: center; padding: 13px 8px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card);
}
.tp-r b {
  display: block; font-size: calc(20px * var(--fs)); font-weight: 800;
  letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.tp-r small {
  display: block; font-size: calc(10.5px * var(--fs)); color: var(--muted);
  margin-top: 3px; line-height: 1.3;
}
.tp-learn {
  font-size: calc(13px * var(--fs)); color: var(--indigo-500); text-align: center;
  font-weight: 650; line-height: 1.45; margin: 0 0 16px;
}

/* Fine prova: l'elenco di ciò che NON si perde. È il messaggio
   principale, non un dettaglio. */
.tp-keep {
  padding: 14px; border-radius: 14px; margin-bottom: 16px;
  border: 1px solid #A7F3D0; background: var(--good-bg, #ECFDF5);
}
.tp-keep b { display: block; font-size: calc(13px * var(--fs)); font-weight: 750; color: #059669; margin-bottom: 7px; }
.tp-keep ul { margin: 0; padding-left: 17px; }
.tp-keep li { font-size: calc(12px * var(--fs)); color: var(--ink-2); line-height: 1.55; margin-bottom: 3px; }
[data-theme="dark"] .tp-keep { background: #06281C; border-color: #12503A; }
[data-theme="dark"] .tp-keep b { color: #10B981; }

/* ── Oltre i 90 giorni in FREE ───────────────────────────────────── */
.hist-lim {
  padding: 16px; border-radius: 16px; margin: 12px 0;
  border: 1px solid var(--line); background: var(--card); text-align: center;
}
.hist-lim b { display: block; font-size: calc(14px * var(--fs)); font-weight: 750; margin-bottom: 6px; }
.hist-lim p { font-size: calc(12.5px * var(--fs)); color: var(--muted); line-height: 1.5; margin: 0 0 13px; }
/* Il tasto per scaricare viene PRIMA di quello per abbonarsi: se uno
   se ne va, deve andarsene con i suoi dati in mano. */
.hist-lim .btn + .btn { margin-top: 8px; }

@media (max-width: 380px) {
  .pw-h, .tp-h { font-size: calc(19px * var(--fs)); }
  .pw-p b { font-size: calc(19px * var(--fs)); }
  .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════════════
   BENVENUTO PROVA · VOCE MENU PRO · CONTATORE CREDITI   (v78)

   Contrasti misurati (WCAG):
     bianco su #6C50F3 ............... 5,15:1
     bianco su #5B4FE0 ............... 5,77:1
     ambra #B45309 su card chiara .... 5,02:1
     ambra #D97706 su card scura ..... 5,72:1
   L'ambra è sdoppiato: #B45309 sullo scuro fa 3,63:1 e #D97706 sul
   chiaro 3,19:1 — entrambi passerebbero appena la soglia non-testo ma
   non quella del testo (4,5:1). Un valore per tema li tiene sopra.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Benvenuto al giorno 1 ───────────────────────────────────────── */
.bv-top {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #7C5CFF, #5B4FE0); color: #fff;
  box-shadow: 0 4px 18px rgba(91,79,224,.4);
}
.bv-top svg { width: 30px; height: 30px; }
.bv-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bv-list li {
  display: flex; align-items: center; gap: 11px;
  font-size: calc(13.5px * var(--fs)); color: var(--ink-2); line-height: 1.4;
}
.bv-ic {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo-50); color: var(--indigo-600);
}
.bv-ic svg { width: 18px; height: 18px; }
[data-theme="dark"] .bv-ic { background: #241C52; color: #A78BFA; }
.bv-note {
  font-size: calc(11.5px * var(--fs)); color: var(--muted); text-align: center;
  line-height: 1.5; margin: 0 0 16px;
}

/* ── Voce "Arliva Fit PRO" nel menu ──────────────────────────────── */
.pro-row {
  margin-top: 10px; border: 1px solid #7C5CFF; border-radius: 14px;
  background: var(--card);
}
.pro-row .menu-ic {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #7C5CFF, #5B4FE0); color: #fff;
}
.pro-row .menu-ic svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.pro-row .menu-txt b { color: var(--indigo-500); }
[data-theme="dark"] .pro-row { box-shadow: 0 0 14px rgba(124,92,255,.18); }

/* ── Contatore crediti nel pannello Registra alimento ────────────── */
.cr-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  padding: 11px 12px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card);
}
.cr-ic {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo-50); color: var(--indigo-600);
}
.cr-ic svg { width: 17px; height: 17px; }
[data-theme="dark"] .cr-ic { background: #241C52; color: #A78BFA; }
.cr-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cr-tx b { font-size: calc(12.5px * var(--fs)); font-weight: 700; line-height: 1.25; overflow-wrap: break-word; }
.cr-tx small { font-size: calc(10.5px * var(--fs)); color: var(--muted); line-height: 1.35; overflow-wrap: break-word; }
.cr-go {
  flex: 0 0 auto; padding: 6px 12px; border-radius: 999px; border: 0;
  background: linear-gradient(145deg, #7C5CFF, #5B4FE0); color: #fff;
  font-size: calc(11px * var(--fs)); font-weight: 800; letter-spacing: .04em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cr-go:active { transform: scale(.94); }

/* Crediti finiti: ambra, non rosso. Non è un errore dell'utente. */
.cr-row.vuoto { border-color: #F2C14E; background: var(--warn-bg, #FEF3C7); }
.cr-row.vuoto .cr-ic { background: #FDE9B5; color: #B45309; }
.cr-row.vuoto .cr-tx b { color: #B45309; }
[data-theme="dark"] .cr-row.vuoto { border-color: #6A4E10; background: #2A1F06; }
[data-theme="dark"] .cr-row.vuoto .cr-ic { background: #3A2A08; color: #FBBF24; }
[data-theme="dark"] .cr-row.vuoto .cr-tx b { color: #FBBF24; }

@media (max-width: 380px) {
  .cr-row { gap: 8px; padding: 10px; }
  .cr-tx small { display: none; }
  .bv-list li { font-size: calc(12.5px * var(--fs)); }
}

/* ═══════════════════════════════════════════════════════════════════
   CONFRONTO FREE / PRO nel paywall   (v79, 05/09/2026)

   Nasce da una segnalazione precisa: il benvenuto diceva "non si
   blocca niente" e l'utente ha capito — giustamente — che alla fine
   dei 15 giorni non sarebbe cambiato nulla. Era falso: le analisi AI
   passano da 40 a 3 al giorno e il Coach da 25 a 2. Il testo e' stato
   corretto, e qui si aggiunge il confronto riga per riga, che e'
   l'unica forma che non lascia spazio a interpretazioni.

   Contrasti misurati (WCAG, soglia 4,5:1 per il testo):
     FREE  #8B93A7 su scuro ... 5,93:1   ·  #64748B su chiaro ... 4,76:1
     PRO   #A78BFA su scuro ... 6,70:1   ·  #6C50F3 su chiaro ... 5,15:1
   Sdoppiati per tema: nessun singolo valore supera 4,5:1 su entrambi
   i fondi (#A78BFA sul chiaro fa 2,72:1, #64748B sullo scuro 3,83:1).
   ═══════════════════════════════════════════════════════════════════ */

.pw-cmp {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--card); overflow: hidden; margin-bottom: 14px;
}
.pw-cmp-h,
.pw-cmp-r {
  display: grid; grid-template-columns: 1fr 68px 74px;
  align-items: center; gap: 6px; padding: 9px 12px;
}
.pw-cmp-h {
  border-bottom: 1px solid var(--line);
  font-size: calc(9.5px * var(--fs)); font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; text-align: center;
}
.pw-cmp-free { color: var(--muted); }
.pw-cmp-pro  { color: #6C50F3; }
[data-theme="dark"] .pw-cmp-pro { color: #A78BFA; }

.pw-cmp-r + .pw-cmp-r,
.pw-cmp-h + .pw-cmp-r { border-top: 1px solid var(--line-2); }
.pw-cmp-r:first-of-type { border-top: 0; }

.pw-cmp-v {
  font-size: calc(11.5px * var(--fs)); font-weight: 600; color: var(--ink-2);
  line-height: 1.3; overflow-wrap: break-word;
}
.pw-cmp-f,
.pw-cmp-p {
  font-size: calc(11px * var(--fs)); font-weight: 700; text-align: center;
  line-height: 1.25; overflow-wrap: break-word;
}
.pw-cmp-f { color: #64748B; }
.pw-cmp-p { color: #6C50F3; }
[data-theme="dark"] .pw-cmp-f { color: #8B93A7; }
[data-theme="dark"] .pw-cmp-p { color: #A78BFA; }

/* Le righe in cui FREE e PRO danno la stessa cosa: nessun contrasto
   fra le colonne. Mostrare "sempre / sempre" in due colori diversi
   suggerirebbe una differenza che non c'e'. */
.pw-cmp-r.pari .pw-cmp-p { color: #64748B; }
[data-theme="dark"] .pw-cmp-r.pari .pw-cmp-p { color: #8B93A7; }

@media (max-width: 380px) {
  .pw-cmp-h, .pw-cmp-r { grid-template-columns: 1fr 58px 62px; padding: 8px 9px; gap: 4px; }
  .pw-cmp-v { font-size: calc(10.5px * var(--fs)); }
  .pw-cmp-f, .pw-cmp-p { font-size: calc(10px * var(--fs)); }
}