/* Il verde e' quello del LOGO (#3c502d, misurato su assets/leo-logo-official.png), non un
    verde della chat: la scala e la ragione stanno in piattaforma.py, sopra il :root. Qui i
    valori sono ricopiati perche' la chat ha un foglio suo — se cambiano li', cambiano qui. */
 :root{
  --bg:#f6faf3; --primary:#3c502d; --primary-dk:#304024; --accent:#b07d0d;
  --blu:#0d6fd0; --blu-dk:#005EB8;   /* tema "verde chiaro": chrome chiaro, identita' verde (non usata altrove nel foglio) */
  --text:#1c2416; --muted:#68755f; --border:rgba(33,50,20,.12); --border-hi:rgba(37,60,20,.28);
  --card:#ffffff; --user-bg:#e7f0fb; --ehret-bg:#f2f6ef;
  --glow:rgba(60,80,45,.16); --radius:14px; --radius-hand:16px 14px 20px 16px / 14px 20px 16px 12px;
  --leo:#3c502d; --leo-dk:#304024; --blu:#0d6fd0;  /* alias per la barra app condivisa */
  --gold:#a8842f; --gold-hi:#c9a24a;   /* accenti PhAI, usati dai contenuti (non piu' dalla testata) */
  --leo-lite:#304024; --ink:#0c1222;
  --shell:#eef6e8; --shell-2:#f7fbf4; --shell-glass:rgba(255,255,255,.80); --shell-glass-hi:rgba(255,255,255,.93);
  --on-shell:#1c2416; --on-shell-mut:#68755f;
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
 }
 *{box-sizing:border-box;margin:0;padding:0}
 /* ── STOP a OGNI movimento di sfondo nella chat (aurora, particelle, sweep header): l'utente
    lo trovava fastidioso. Restano i gradienti, ma FERMI. Vale su ogni dimensione di schermo. ── */
 body::before,body::after,header::before,header::after,.bg-particles,.bg-particles span{animation:none!important}
 .bg-particles{display:none!important}
 html,body{height:100%}
 /* Altezza dell'app = viewport VISIBILE. Il default e' 100dvh; su mobile un piccolo script
    (in chat_page) la aggancia a visualViewport.height quando entra la tastiera, cosi' riga di
    scrittura E barra (ultimi figli del flex) restano sopra la tastiera. Niente toggle di
    classi/padding => niente loop, niente sfarfallio. */
 body{background:var(--bg);color:var(--text);font-family:var(--font);
  height:100dvh;display:flex;flex-direction:column;overflow:hidden;position:relative}
 /* Nella CHAT la barra in basso e' DENTRO il flusso (ultimo elemento della colonna): NON
    fissa, quindi non puo' "staccarsi"/ballare col viewport o con la tastiera. */
 @media(max-width:900px){
  body>nav.tabbar{position:static;transform:none!important;transition:none;flex-shrink:0;z-index:2;
   background:var(--card)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  body{padding-bottom:0!important}   /* lo spazio in basso lo occupa la barra stessa, in flusso */
 }
 /* ── sfondo futurista: aurora ambientale che respira + griglia tecnica (come il sito) ── */
 body::before{content:'';position:fixed;inset:-25%;pointer-events:none;z-index:0;
  background:radial-gradient(38% 48% at 14% 8%,rgba(60,80,45,.13),transparent 62%),
   radial-gradient(42% 52% at 88% 12%,rgba(13,111,208,.12),transparent 62%),
   radial-gradient(46% 50% at 78% 90%,rgba(201,162,74,.11),transparent 62%),
   radial-gradient(40% 42% at 18% 92%,rgba(60,80,45,.08),transparent 62%);
  animation:auroraDrift 26s ease-in-out infinite alternate}
 @keyframes auroraDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,-2%,0) scale(1.07)}100%{transform:translate3d(-2%,2%,0) scale(1.04)}}
 body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(rgba(33,50,20,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(33,50,20,.04) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask-image:radial-gradient(circle at 50% 22%,#000,transparent 80%);mask-image:radial-gradient(circle at 50% 22%,#000,transparent 80%)}
 @media(prefers-reduced-motion:reduce){body::before{animation:none}}
 /* particelle */
 .bg-particles{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
 .bg-particles span{position:absolute;border-radius:50%;
  background:radial-gradient(circle,var(--primary) 0%,transparent 70%);opacity:0;animation:floatp linear infinite}
 @keyframes floatp{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:.16}90%{opacity:.09}100%{transform:translateY(-20vh) scale(1.2);opacity:0}}
 /* ── QUI C'ERA LA TESTATA DELLA CHAT, e non c'e' piu' (22/08/2026) ────────────────────
    36 regole: `header`, `.home-link`, `.h-sep`, `.h-right`, `.menu-btn`, `.h-actions`,
    `.cal-btn`, `.pan-foot`, `.pill`. La chat adesso usa la STESSA testata dell'app —
    `piattaforma._appnav`, innestata da `chat_page.testata()` — quindi quelle regole non
    potevano piu' agganciare niente. Erano nate identiche a quelle dell'app e poi le due
    copie erano divergite fino ad avere voci, nomi e ALTEZZE diverse: e' esattamente il
    motivo per cui adesso ce n'e' una sola.
    Il marchio (`.leo`, `.rev`), l'account (`.acct`) e il selettore lingua (`.lang-sel`)
    restano qui perche' quegli elementi esistono ancora — ma dentro `.appnav`, dove a
    vincere sono le regole del foglio condiviso, che arrivano dopo e sono piu' specifiche. */
 /* L'UNICA RIGA CHE LA TESTATA CONDIVISA NON PORTA CON SE'. Qui il <body> e' una COLONNA
    flex alta quanto il viewport: senza `flex-shrink:0` la barra si schiaccia fino a sparire
    quando lo spazio verticale e' poco — telefono in orizzontale, o tastiera aperta. Ce
    l'aveva il vecchio `header` ed e' l'unica cosa che si e' persa buttandolo: trovata
    rendendo la finestra alta 110px. `.appnav` altrove vive in una pagina che scorre, quindi
    la' non serve e non sta nel foglio condiviso. */
 .appnav{flex-shrink:0}
 /* L'ETICHETTA DEL TETTO: quieta, allineata alla colonna di lettura, mai un allarme.
    E' un'informazione, non un rimprovero — su un'app di salute la differenza si sente. */
 .quota{flex-shrink:0;text-align:center;font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--muted);padding:2px 12px 6px}
 .quota.poche{color:var(--accent)}
 /* la carta che dice COSA FARE quando le domande finiscono: stessa forma della carta del
    ritorno, perche' e' la stessa cosa — Leo che parla, non un cartello. */
 .stop{align-self:flex-start;max-width:min(84%,520px);background:var(--card);
  border:2px solid rgba(33,50,20,.18);border-radius:16px 14px 20px 16px / 14px 20px 16px 12px;padding:15px 17px;
  display:flex;flex-direction:column;gap:6px;box-shadow:3px 3px 0 rgba(33,50,20,.10);transform:rotate(-.3deg)}
 .stop b{font-size:14px;font-weight:800;color:var(--text)}
 .stop span{font-size:13px;line-height:1.55;color:var(--muted)}
 .stop-go{display:flex;gap:9px;margin-top:8px;flex-wrap:wrap}
 .stop-go button{flex:1;min-width:130px;padding:10px 14px;border-radius:14px 12px 16px 12px / 12px 16px 12px 14px;font-family:var(--font);
  font-size:13px;font-weight:800;cursor:pointer;border:2.2px solid var(--ink,#0c1222);
  background:#fff;color:var(--ink,#0c1222);box-shadow:0 3px 10px rgba(33,50,20,.16);transform:rotate(-.2deg);transition:transform .14s,box-shadow .14s,filter .14s}
 .stop-go .stop-si{background:var(--primary);border-color:var(--ink,#0c1222);color:#fff;box-shadow:0 3px 10px rgba(33,50,20,.16)}
 .stop-go .stop-si:hover{filter:brightness(1.07);transform:rotate(0deg) translateY(-1px)}
 .stop-go .stop-no:hover{transform:rotate(0deg) translateY(-1px);box-shadow:0 3px 10px rgba(33,50,20,.16)}
 /* ── LA PORTA DEL RITORNO (22/08/2026) ────────────────────────────────────────────────
    La carta che chiede «vuoi che ti scriva io?». Sta NEL FLUSSO dei messaggi, dopo la prima
    risposta, e deve leggersi come una domanda di Leo — non come un banner: stesso raggio,
    stessa ombra e stesso allineamento delle sue bolle.
    I due bottoni hanno la STESSA dimensione e la stessa evidenza (`flex:1` a entrambi): il
    verde dice qual e' l'azione principale, non nasconde l'altra. Un «no» piu' piccolo o
    grigio in un angolo sarebbe una spinta, non una scelta — e su un'app di salute quella
    differenza non e' estetica. */
 .ritorno{align-self:flex-start;max-width:min(84%,520px);background:var(--card);
  border:2px solid rgba(33,50,20,.18);border-radius:16px 14px 20px 16px / 14px 20px 16px 12px;padding:15px 17px;
  display:flex;flex-direction:column;gap:6px;box-shadow:3px 3px 0 rgba(33,50,20,.10);transform:rotate(.3deg)}
 .ritorno b{font-size:14px;font-weight:800;color:var(--text)}
 .ritorno span{font-size:13px;line-height:1.55;color:var(--muted)}
 .rit-go{display:flex;gap:9px;margin-top:8px}
 .rit-go button{flex:1;padding:10px 14px;border-radius:14px 12px 16px 12px / 12px 16px 12px 14px;font-family:var(--font);
  font-size:13px;font-weight:800;cursor:pointer;border:2.2px solid var(--ink,#0c1222);
  background:#fff;color:var(--ink,#0c1222);box-shadow:0 3px 10px rgba(33,50,20,.16);transform:rotate(-.2deg);transition:transform .14s,box-shadow .14s,filter .14s}
 .rit-go .rit-si{background:var(--primary);border-color:var(--ink,#0c1222);color:#fff;box-shadow:0 3px 10px rgba(33,50,20,.16)}
 .rit-go .rit-si:hover{filter:brightness(1.07);transform:rotate(0deg) translateY(-1px)}
 .rit-go .rit-si:disabled{opacity:.6;cursor:default}
 .rit-go .rit-no:hover{transform:rotate(0deg) translateY(-1px);box-shadow:0 3px 10px rgba(33,50,20,.16)}

 /* Il filo colorato (verde/oro/blu) in fondo alla testata veniva dalla nav della VETRINA,
    dove corre su fondo bianco. Sul verde scuro dell'app diventava una riga gialla e blu che
    non appartiene a niente. Qui sotto la testata serve solo uno stacco: lo fa un'ombra. */
 /* IL FILO IN CIMA E' STATO TOLTO (22/08/2026), non spento. Era un rettangolo di 2px in
    `position:absolute;left:-100%`, cioe' interamente FUORI dallo schermo: si vedeva solo
    mentre l'animazione `sweep` lo faceva scorrere, e quell'animazione e' ferma per scelta
    dalla riga `animation:none!important` piu' in alto. Restava quindi una regola che
    nessuno poteva vedere. `header::after` era gia' nella stessa condizione: piu' in basso
    nel foglio c'e' `header::after{content:none}` che lo spegne. */
 /* niente "movimento" dietro un overlay aperto: congela sfondo animato + barra header */
 body:has(.modal-bg.on) .bg-particles span,body:has(.cal-bg.on) .bg-particles span{animation-play-state:paused}
 body:has(.modal-bg.on) .bg-particles,body:has(.cal-bg.on) .bg-particles{opacity:0;transition:opacity .2s}
 .avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
 /* mentre la risposta compare, un tocco la completa (vedi chat_script.py): l'unico indizio
    possibile senza aggiungere una scritta su ogni risposta — che andrebbe tradotta in quattro
    lingue e sarebbe rumore. Su mobile non si vede, e li' il tocco resta una scorciatoia. */
 .msg.ehret.scrivendo .bubble{cursor:pointer}
 .msg.ehret .avatar{background:transparent;padding:0;overflow:hidden}
 /* Il marchio della testata NON e' piu' il logo PhAI riusato dalla nav del sito: la chat e'
    l'app di Leo e porta il SUO marchio (.brand-leo) piu' l'uscita verso la vetrina
    (.home-link). Le regole stanno in fondo al foglio, col resto del guscio verde. */
 /* wordmark di Leo: ogni "Leo" reso come il suo logo -> LƎO (E rovesciata, verde)
    LA STESSA TRAPPOLA DELLA TESTATA, ma qui mordeva solo alle dimensioni del testo. Con
    `letter-spacing:.03em` lo stacco fra L e Ǝ vale 0.11 dell'altezza delle maiuscole: a 200px
    e' un buco netto, ma a 15px — la misura vera di una bolla — fa 1,2 pixel, che
    l'antialiasing chiude. Il piede della L si saldava al braccio della Ǝ e «LƎO» dentro una
    frase si leggeva come un blocco unico. Qui NON serve la spaziatura del logotipo (.18em):
    e' una parola dentro una frase, non un'insegna. Serve il minimo che regga a 15px.
    Il `letter-spacing:0` sulla Ǝ e il suo margine destro sono per la stessa ragione spiegata
    in fondo al foglio: e' un inline-block ribaltato, il tracking gli finisce dal lato
    sbagliato e dopo di lui non si somma affatto. */
 /* niente colore fisso: il marchio compare anche sulla barra verde scura e sulla barra in
    basso, dove un verde marchio su verde barra sparirebbe. Il verde resta dove il fondo e'
    chiaro per costruzione, cioe' dentro le bolle. */
 .leo{font-weight:800}
 .bubble .leo{color:var(--primary)}
 @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
 /* messaggi — colonna di lettura centrata, ombre morbide, ritmo verticale calmo */
 .messages{flex:1;overflow-y:auto;padding:24px max(18px,calc((100% - 900px)/2)) 12px;
  display:flex;flex-direction:column;gap:18px;overscroll-behavior:contain;position:relative;z-index:1}
 /* NB: niente scroll-behavior:smooth. Durante lo streaming lo scroll viene aggiornato a
    ogni frame: lo "smooth" inseguirebbe un bersaglio che si sposta e la pagina tremerebbe.
    Con incrementi da un frame lo scatto non si vede comunque. */
 .messages::-webkit-scrollbar{width:4px}
 .messages::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:4px}
 .msg{display:flex;gap:11px;max-width:min(84%,720px)}
 .msg.user{align-self:flex-end;max-width:min(76%,560px)}
 .msg.ehret{align-self:flex-start}
 /* L'INGRESSO DEI MESSAGGI (05/08/2026). Mancava: l'interfaccia aveva quindici animazioni
    e la cosa che si guarda di piu' — la bolla — compariva di scatto. Ogni messaggio ora
    sale di 12px sfumando, e lo fa DA DOVE VIENE: quella dell'utente da destra, quella di
    Leo da sinistra. E' un dettaglio di due pixel che il cervello legge come direzione.
    L'avatar arriva 60ms dopo con un rimbalzo appena accennato (la curva sfora l'1): senza
    quel ritardo bolla e avatar si muovono come un blocco solo, e sembra una diapositiva. */
 .msg{animation:msgIn .34s cubic-bezier(.22,.85,.3,1) both}
 .msg.user{animation-name:msgInUser}
 @keyframes msgIn{from{opacity:0;transform:translate(-7px,12px)}to{opacity:1;transform:none}}
 @keyframes msgInUser{from{opacity:0;transform:translate(7px,12px)}to{opacity:1;transform:none}}
 .msg.ehret .avatar{animation:avIn .44s cubic-bezier(.34,1.45,.64,1) .06s both}
 @keyframes avIn{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
 /* SPEGNERE l'animazione vuole `!important`, come gia' fa la riga sui passi di ragionamento.
    Non e' pigrizia: `.msg.user{animation-name}` pesa (0,2,0) e `.msg.ehret .avatar` (0,3,0),
    quindi una regola scritta su `.msg` non li spegnerebbe — resterebbe accesa proprio la
    meta' dei casi. Con l'important il comportamento non dipende dall'ordine delle righe.
    La cronologia riaperta non "entra": c'era gia'. La classe la mette `apriChat`. */
 .msg.nofx,.msg.nofx .avatar{animation:none!important}
 /* i tre puntini erano rimasti fuori da tutte le regole sul movimento ridotto: chi li ha
    chiesti spenti se li vedeva rimbalzare comunque, ed e' l'animazione piu' insistente
    della chat perche' e' in loop infinito mentre si aspetta. */
 @media(prefers-reduced-motion:reduce){.msg,.msg.user,.msg.ehret .avatar,
  .typing span{animation:none!important}}
 .avatar{width:32px;height:32px;border-radius:50%;flex-shrink:0;margin-top:1px;
  border:3px solid var(--ink,#0c1222);box-shadow:0 3px 10px rgba(33,50,20,.16);overflow:hidden}
 .body{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%}
 .bubble{padding:13px 17px;border-radius:var(--radius-hand);font-size:15px;line-height:1.58;
  overflow-wrap:break-word;text-wrap:pretty;-webkit-font-smoothing:antialiased}
 .msg.ehret .bubble{background:var(--card);border:2.2px solid rgba(33,50,20,.16);
  border-radius:16px 14px 20px 16px / 14px 20px 16px 12px;box-shadow:3px 3px 0 rgba(33,50,20,.10)}
 /* la bolla di GUASTO: ambra, non rossa. Qui non e' successo niente alla salute di
    nessuno — e' caduta la rete o il server ha singhiozzato. Il rosso su un'app di diabete
    e' un colore che si spende una volta sola, e non si spende per questo. */
 /* la tinta e' .13 e non .07 perche' MISURATA: a .07 il fondo veniva rgb(251,246,240) contro
    il bianco puro della bolla normale — un errore che si riconosce solo dopo averlo letto non
    e' segnalato. A .13 il fondo e' rgb(248,239,227), si distingue a colpo d'occhio, e il testo
    resta a 5,74:1 di contrasto (la soglia e' 4,5). L'icona porta il significato anche per chi
    il colore non lo distingue: mai affidarsi alla sola tinta. */
 .msg.ehret .bubble.err{display:flex;align-items:flex-start;gap:9px;
  background:rgba(200,130,40,.13);border-color:rgba(200,130,40,.48);color:#7d5606}
 .msg.ehret .bubble.err .err-i{flex-shrink:0;width:19px;height:19px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
  background:rgba(200,130,40,.28);color:#6d4a05;font-weight:800;font-size:12.5px;line-height:1}
 /* il RITMO VERTICALE va disinnescato qui dentro. `.bubble>*+*{margin-top:.62em}` serve a
    distanziare i blocchi di una risposta lunga, ma in questa bolla i due figli stanno
    AFFIANCATI: applicandosi al testo lo faceva cadere ~9px sotto l'icona. */
 .msg.ehret .bubble.err>*+*{margin-top:0}
 .msg.user .bubble{background:linear-gradient(135deg,var(--primary),var(--primary-dk));color:#fff;
  border:2.2px solid var(--ink,#0c1222);border-radius:16px 14px 20px 16px / 14px 20px 16px 12px;box-shadow:0 3px 10px rgba(33,50,20,.16)}
 .msg.user .bubble strong{color:#fff}
 .msg.user .bubble em{color:rgba(255,255,255,.88)}
 .bubble strong{color:var(--primary-dk);font-weight:700}
 .bubble em{color:var(--muted)}
 .bubble a{color:var(--primary-dk);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
 .bubble code{background:rgba(117,157,88,.09);border:1px solid rgba(60,80,45,.14);border-radius:5px;
  padding:.05em .35em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86em;color:var(--primary-dk);
  overflow-wrap:anywhere}
 /* ── RITMO VERTICALE (deciso QUI e solo qui) ────────────────────────────────────
    Un'unica distanza fra blocchi (--vr) invece di margini diversi per ogni tag:
    era la spaziatura disomogenea a far sembrare la risposta "sfilacciata".
    Margini solo FRA i blocchi (>*+*) = niente spazio sprecato ai bordi della bolla. */
 .bubble{--vr:.62em}
 .bubble>*{margin:0}
 .bubble>*+*{margin-top:var(--vr)}
 .bubble>ul+p,.bubble>ol+p,.bubble>p+ul,.bubble>p+ol{margin-top:.5em}
 .bubble ul,.bubble ol{padding-left:1.35em}
 .bubble li{margin:0}
 .bubble li+li{margin-top:.22em}
 .bubble li>ul,.bubble li>ol{margin-top:.22em}
 .bubble li::marker{color:var(--primary);font-weight:700}
 .bubble ol{list-style:decimal}
 .bubble ol li::marker{font-size:.9em}
 /* titoli dentro la bolla: gerarchia leggibile senza diventare un documento */
 .bubble .bh4{font-size:1.02em;font-weight:800;letter-spacing:.01em;color:var(--text)}
 .bubble .bh5{font-size:.82em;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--primary-dk)}
 .bubble>.bh4+*,.bubble>.bh5+*{margin-top:.3em}
 .bubble>*+.bh4,.bubble>*+.bh5{margin-top:1.05em}
 .bubble hr{border:0;height:1px;background:var(--border);margin:1em 0}
 .bubble blockquote{border-left:3px solid rgba(60,80,45,.35);padding:.1em 0 .1em .8em;color:var(--muted)}
 .bubble blockquote>*+*{margin-top:.4em}
 .bubble pre{background:rgba(33,50,20,.045);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;overflow-x:auto}
 .bubble pre code{background:none;border:0;padding:0;font-size:.82em;color:var(--text);line-height:1.5}
 /* tabelle: quelle "ingrediente | grammi" devono leggersi al volo, anche su telefono */
 .bubble .tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:10px}
 .bubble table{border-collapse:collapse;width:100%;font-size:.9em;font-variant-numeric:tabular-nums}
 .bubble th,.bubble td{padding:7px 11px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
 .bubble thead th{background:rgba(117,157,88,.07);font-weight:800;font-size:.86em;
  text-transform:uppercase;letter-spacing:.05em;color:var(--primary-dk)}
 .bubble tbody tr:last-child td{border-bottom:0}
 .msg.user .bubble a,.msg.user .bubble code{color:#fff}
 .msg.user .bubble code{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.25)}
 /* indicatore "sta scrivendo" */
 .typing{display:flex;gap:5px;padding:12px 15px}
 .typing span{width:7px;height:7px;border-radius:50%;background:var(--primary);opacity:.6;animation:bounce 1.2s infinite}
 .typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
 @keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-7px)}}
 /* pannello RAGIONAMENTO — timeline viva, quasi ipnotica */
 .steps{margin-bottom:6px;border-radius:16px 14px 20px 16px / 14px 20px 16px 12px;overflow:hidden;
  background:var(--card);border:2.2px solid rgba(33,50,20,.16);box-shadow:3px 3px 0 rgba(33,50,20,.10);
  transition:background .35s,border-color .35s,box-shadow .35s;transform:rotate(-.2deg)}
 .steps:not(.done):not(.collapsed){animation:stepsGlow 2.6s ease-in-out infinite}
 @keyframes stepsGlow{0%,100%{box-shadow:0 4px 18px rgba(60,80,45,.07)}50%{box-shadow:0 7px 28px rgba(60,80,45,.17)}}
 .steps.hidden{display:none}
 .steps.collapsed{background:transparent;border-color:transparent;box-shadow:none}
 .steps-head{display:flex;align-items:center;gap:8px;padding:9px 13px;font-size:10px;font-weight:800;
  color:rgba(60,80,45,.85);text-transform:uppercase;letter-spacing:.8px;cursor:pointer;border-bottom:1px solid rgba(117,157,88,.12)}
 .steps.collapsed .steps-head{border-bottom:none;color:rgba(117,157,88,.5);padding:5px 12px}
 /* IL MARCHIO DENTRO IL TESTO CHE LUCCICA (22/08/2026). Il bagliore era fatto con
    `background-clip:text` + `color:transparent`: il gradiente dipinge le lettere del
    CONTENITORE, ma la Ǝ del marchio e' un `inline-block` RIBALTATO — un oggetto che il
    browser dipinge per conto suo — e restava trasparente. In pagina si leggeva
    «L O STA RAGIONANDO», con un buco al posto della Ǝ.
    E' la stessa famiglia della trappola gia' scritta in piattaforma.py (`.brand-leo span`
    che prendeva anche la Ǝ): un selettore o un effetto che agisce sul contenitore senza
    sapere che dentro c'e' il marchio. Il marchio va sempre verificato DENTRO l'effetto.
    Ora il bagliore e' una MASCHERA che scorre sopra il testo dipinto normalmente: la
    maschera si applica all'elemento gia' reso, figli trasformati compresi. */
 .steps:not(.done) .steps-title{color:var(--primary);-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.38) 30%,#000 50%,rgba(0,0,0,.38) 70%);mask-image:linear-gradient(90deg,rgba(0,0,0,.38) 30%,#000 50%,rgba(0,0,0,.38) 70%);-webkit-mask-size:220% 100%;mask-size:220% 100%;animation:brilla 1.9s linear infinite}
 @keyframes brilla{to{-webkit-mask-position:-220% 0;mask-position:-220% 0}}
 .steps-dot{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 8px var(--primary);animation:pulse 1.8s ease-in-out infinite}
 .steps.done .steps-dot{animation:none;background:rgba(117,157,88,.45);box-shadow:none}
 .chevron{margin-left:auto;font-size:9px;transition:transform .25s}
 .steps.collapsed .chevron{transform:rotate(-90deg)}
 .steps-body{position:relative;padding:7px 0}
 .steps-body::before{content:"";position:absolute;left:23px;top:17px;bottom:17px;width:2px;border-radius:2px;
  background:linear-gradient(var(--primary),rgba(117,157,88,.12))}
 .steps.collapsed .steps-body{display:none}
 .step{display:flex;align-items:center;gap:11px;padding:6px 13px;font-size:11.5px;min-height:28px;position:relative;
  animation:stepIn .36s cubic-bezier(.2,.8,.2,1) both;transition:background .3s}
 @keyframes stepIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
 .step.active{background:rgba(117,157,88,.07)}
 .step-node{position:relative;z-index:1;width:22px;height:22px;flex-shrink:0;display:grid;place-items:center;
  border-radius:50%;background:var(--card);box-shadow:0 0 0 3px var(--card)}
 .step-ic{font-size:14px;flex-shrink:0;line-height:1.3}
 .step-lb{flex:1;min-width:0;line-height:1.5;color:var(--muted)}
 /* stesso bagliore, stessa ragione: qui il marchio non c'e' oggi, ma ci finirebbe il
    giorno che un nome di strumento contiene «Leo» — e nessuno se ne accorgerebbe. */
 .step.active .step-lb{color:var(--primary);font-weight:600;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.38) 30%,#000 50%,rgba(0,0,0,.38) 70%);mask-image:linear-gradient(90deg,rgba(0,0,0,.38) 30%,#000 50%,rgba(0,0,0,.38) 70%);-webkit-mask-size:220% 100%;mask-size:220% 100%;animation:brilla 1.6s linear infinite}
 .step-res{font-size:10px;color:var(--primary);background:rgba(117,157,88,.13);font-weight:700;
  padding:2px 9px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;flex-shrink:0}
 .reason{font-size:11.5px;color:var(--muted);font-style:italic;line-height:1.55;padding:6px 12px;border-bottom:1px solid rgba(117,157,88,.07)}
 .spin{width:15px;height:15px;border-radius:50%;flex-shrink:0;border:2px solid rgba(117,157,88,.22);border-top-color:var(--primary);animation:spin .7s linear infinite}
 @keyframes spin{to{transform:rotate(360deg)}}
 .check{width:18px;height:18px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;
  font-size:11px;font-weight:700;flex-shrink:0;animation:pop .32s cubic-bezier(.2,1.5,.4,1)}
 @keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
 .step-lb{display:flex;flex-direction:column;gap:2px}
.step-found{font-size:11px;color:var(--text);font-weight:600;animation:stepIn .5s cubic-bezier(.2,.8,.2,1) both}
.step-spark{display:block;color:var(--primary);opacity:.85;animation:stepIn .6s .1s cubic-bezier(.2,.8,.2,1) both}
@media(prefers-reduced-motion:reduce){.steps,.step,.spin,.check,.steps-title,.step.active .step-lb,.steps-dot{animation:none!important}
  /* una maschera ferma non e' un bagliore, e' un testo sbiadito ai bordi: si toglie */
  .steps-title,.step.active .step-lb{-webkit-mask-image:none!important;mask-image:none!important}}
 .cursor{display:inline-block;width:2px;height:1em;background:var(--primary);margin-left:1px;vertical-align:text-bottom;animation:blink .8s step-end infinite}
 @keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
 /* barra input */
 /* niente backdrop-filter qui: lo sfondo e' OPACO (--card = #fff), quindi il blur non si
    vede — ma obbliga il browser a tenere un layer di composizione e a ricalcolare lo sfondo
    a ogni frame, e la barra "vibra" mentre scorri o scrivi. Stessa ragione per cui e' gia'
    stato tolto da header e tabbar su mobile. */
 .input-bar{padding:14px 20px calc(14px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--border);
  display:flex;gap:10px;align-items:flex-end;flex-shrink:0;position:relative;z-index:10}
 textarea{flex:1;background:rgba(117,157,88,.04);border:1px solid var(--border);border-radius:12px;color:var(--text);
  font-family:var(--font);font-size:14px;padding:12px 15px;resize:none;outline:none;min-height:48px;max-height:140px;line-height:1.5;transition:border-color .2s,box-shadow .2s}
 textarea:focus{border-color:var(--border-hi);box-shadow:0 0 0 3px rgba(117,157,88,.08)}
 textarea::placeholder{color:var(--muted)}
 .send{background:var(--primary);color:#fff;border:3px solid var(--ink,#0c1222);border-radius:14px 12px 16px 12px / 12px 16px 12px 14px;
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;font-size:20px;
  box-shadow:0 3px 10px rgba(33,50,20,.16);transform:rotate(-.3deg);transition:transform .15s,box-shadow .15s,filter .15s}
 .send:hover:not(:disabled){transform:rotate(0deg) translateY(-1px);box-shadow:0 3px 10px rgba(33,50,20,.16);filter:brightness(1.06)}
 .send:active{transform:rotate(0deg) scale(.96)}
 .send:disabled{opacity:.4;cursor:not-allowed}
 /* microfono per l'input vocale (nascosto se il browser non lo supporta) */
 .mic{background:#fff;border:2px solid var(--ink,#0c1222);border-radius:14px 12px 16px 12px / 12px 16px 12px 14px;
  width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
  font-size:19px;color:var(--ink,#0c1222);box-shadow:0 3px 10px rgba(33,50,20,.16);transform:rotate(.3deg);transition:transform .15s,background .15s,color .15s,box-shadow .15s}
 .mic[hidden]{display:none}
 .mic:hover{background:rgba(117,157,88,.12);color:var(--text)}
 .mic:active{transform:scale(.95)}
 .mic.on{background:rgba(220,53,69,.14);border-color:rgba(220,53,69,.5);color:#c0392b;
  animation:micpulse 1.3s ease-in-out infinite}
 @keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(220,53,69,.35)}50%{box-shadow:0 0 0 7px rgba(220,53,69,0)}}
 @media(prefers-reduced-motion:reduce){.mic.on{animation:none}}
 .foot{font-size:.66rem;color:var(--muted);text-align:center;padding:0 20px 6px;position:relative;z-index:10}
 .ci-chat{background:rgba(13,111,208,.10)} .ci-glic{background:rgba(220,53,69,.10)}
 .ci-map{background:rgba(176,125,13,.12)}  .ci-area{background:rgba(60,80,45,.12)}
 .ci-inst{background:rgba(60,80,45,.12)}
 .ci-chat svg{stroke:#0d6fd0} .ci-glic svg{stroke:#dc3545} .ci-map svg{stroke:#b07d0d} .ci-area svg{stroke:#3c502d}
 .ci-inst svg{stroke:#3c502d}
 /* ACCOUNT: mai piu' email che sborda. Anonimo = CTA mese gratis; loggato = chip col
    puntino, SOLO il nome (ellissi vera su uno span block) e il badge giorni. */
 .acct{display:inline-flex;align-items:center;gap:7px;background:linear-gradient(135deg,var(--primary),#304024);
  border:1.5px solid transparent;color:#fff;border-radius:999px;padding:9px 16px;font-family:var(--font);
  font-size:12.5px;font-weight:800;cursor:pointer;white-space:nowrap;flex-shrink:0;max-width:200px;
  box-shadow:0 4px 14px rgba(60,80,45,.28);transition:transform .16s,filter .16s,box-shadow .16s}
 .acct:hover{filter:brightness(1.06);transform:translateY(-1px)}
 .acct .who{display:block;max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 /* saluto su DUE RIGHE: "Ciao" sopra piccolo, il nome sotto con tutta la larghezza del chip
    (su una riga "Giacobazzipietro" finiva tagliato a meta') */
 .acct .wh{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  line-height:1.12;min-width:0;text-align:left}
 .acct .wh i{font-style:normal;font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;opacity:.72}
 .acct .wh b{font-size:12.5px;font-weight:800;max-width:150px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
 .acct.in{background:rgba(138,174,111,.16);color:var(--on-shell,#f1f6ee);border-color:rgba(138,174,111,.5);box-shadow:none}
 .acct.in:hover{background:rgba(138,174,111,.24);filter:none}
 .acct .dot{width:8px;height:8px;border-radius:50%;background:var(--primary);
  box-shadow:0 0 0 3px rgba(60,80,45,.16);flex-shrink:0}
 /* avatar con l'INIZIALE: si capisce che e' il TUO profilo, e non sborda mai */
 .acct .av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--primary-dk));color:#fff;
  font-size:12px;font-weight:800;flex-shrink:0;box-shadow:0 2px 6px rgba(60,80,45,.3)}
 .acct .av svg{width:15px;height:15px;display:block}
 .acct.in{padding:6px 13px 6px 6px}
 .acct .gg{background:var(--primary);color:#fff;border-radius:999px;padding:2px 8px;
  font-size:10px;font-weight:800;flex-shrink:0;line-height:1.5}
 .lang-sel{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:999px;
  padding:8px 11px;font-family:var(--font);font-size:12px;font-weight:700;cursor:pointer;outline:none;flex-shrink:0;
  -webkit-appearance:none;appearance:none;transition:border-color .16s,color .16s}
 .lang-sel:hover{border-color:var(--primary);color:var(--text)}
 .lang-sel option{background:#fff;color:var(--text)}
 /* drawer calendario */
 .cal-bg{position:fixed;inset:0;height:100dvh;width:100%;background:rgba(0,0,0,.5);backdrop-filter:blur(3px);z-index:40;display:none;overflow:hidden}
 .cal-bg.on{display:flex;justify-content:flex-end}
 .cal-panel{position:relative;height:100%;width:min(420px,92vw);max-width:100%;background:var(--card);
  border-left:1px solid var(--border-hi);box-shadow:-20px 0 60px rgba(0,0,0,.5);display:flex;flex-direction:column;
  flex-shrink:0;animation:slidein .25s ease}
 @keyframes slidein{from{transform:translateX(100%)}to{transform:translateX(0)}}
 /* confronto giornata (previsto vs reale) + timeline */
 .cf-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
 .cf-ring{--p:0;width:66px;height:66px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:conic-gradient(var(--primary) calc(var(--p)*3.6deg),var(--border) 0);position:relative}
 .cf-ring::before{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--card)}
 .cf-ring b{position:relative;font-size:16px;font-weight:800;line-height:1}
 .cf-ring span{position:relative;font-size:7.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
 /* GENESI della voce: verde = seguito il piano di Leo · ambra = raccontato in chat */
 .og{display:inline-block;border-radius:8px;padding:2px 8px;margin:2px 3px 2px 0;font-size:11.5px;border:1px solid}
 .og-piano{background:rgba(60,80,45,.10);border-color:rgba(60,80,45,.35);color:var(--primary-dk)}
 .og-chat{background:rgba(176,125,13,.10);border-color:rgba(176,125,13,.35);color:#8a6108}
 .og-v{font-weight:800;opacity:.75;font-size:10.5px}
 .gam{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,rgba(60,80,45,.10),rgba(176,125,13,.07));
  border:1px solid rgba(60,80,45,.22);border-radius:13px;padding:11px 14px;margin-bottom:13px}
 .gam-st{font-size:21px;letter-spacing:2px;color:#e8b923;line-height:1;text-shadow:0 1px 5px rgba(232,185,35,.35)}
 .gam-off{color:var(--border-hi);text-shadow:none}
 .gam-tx{font-size:12px;color:var(--muted)}
 .gam-tx b{font-size:16px;color:var(--primary-dk);font-weight:800}
 .gam-tot{display:block;font-size:10.5px;margin-top:2px;opacity:.85}
 .gst{background:none;border:0;font-size:19px;color:var(--border-hi);cursor:pointer;padding:0 1px;line-height:1;transition:color .12s,transform .12s}
 .gst.on,.gst:hover{color:#e8b923;transform:scale(1.15)}
 .cf-ask{display:flex;align-items:center;gap:7px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--border);flex-wrap:wrap}
 .cf-askq{font-size:11.5px;color:var(--muted);margin-right:2px}
 .cf-yes,.cf-no{border-radius:9px;padding:6px 11px;font-family:var(--font);font-size:11.5px;font-weight:700;cursor:pointer;border:1px solid}
 .cf-yes{background:rgba(60,80,45,.12);border-color:var(--primary);color:var(--primary-dk)}
 .cf-yes:hover{background:rgba(60,80,45,.22)}
 .cf-no{background:transparent;border-color:var(--border-hi);color:var(--muted)}
 .cf-no:hover{background:rgba(60,80,45,.09);color:var(--text)}
 .cf-yes:disabled,.cf-no:disabled{opacity:.5;cursor:default}
 .cf-sum{font-size:13px}.cf-sum .muted{color:var(--muted)}
 .cf-rows{display:flex;flex-direction:column;gap:8px}
 .cf-row{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:var(--bg)}
 .cf-p{display:flex;align-items:center;gap:8px;margin-bottom:6px}
 .cf-pasto{font-weight:800;font-size:12px;text-transform:capitalize}
 .cf-ok{font-size:10px;font-weight:700;color:var(--primary)}
 .cf-miss{font-size:10px;font-weight:700;color:#b0770f;background:rgba(200,130,40,.14);padding:2px 8px;border-radius:999px}
 .cf-extra{font-size:10px;font-weight:700;color:var(--muted);background:rgba(159,170,150,.14);padding:2px 8px;border-radius:999px}
 .cf-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12.5px}
 .cf-c{display:flex;flex-direction:column;gap:2px}
 .cf-lab{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
 .cf-d{font-weight:700;font-size:11px}.cf-d.up{color:#c0392b}.cf-d.dn{color:var(--primary)}
 /* MOVIMENTO del giorno: stessa famiglia visiva del blocco vitalità (verde), perché è
    l'altra metà della stessa partita — quello che spendi cambia quello che puoi mangiare. */
 .mv{background:linear-gradient(135deg,rgba(60,80,45,.09),rgba(60,80,45,.03));
  border:1px solid rgba(60,80,45,.22);border-radius:14px;padding:12px 14px;margin:14px 0 2px}
 .mv-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--leo);margin-bottom:8px}
 .mv-nums{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
 .mv-nums b{color:var(--text);font-size:16px;font-weight:800}
 .mv-plus{color:var(--leo);font-weight:700}
 .mv-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
 .mv-i{background:var(--card);border:1px solid var(--border);border-radius:999px;padding:3px 10px;font-size:12px}
 .mv-i i{font-style:normal;color:var(--muted);font-weight:700}
 .mv-none{font-size:13px;color:var(--muted);line-height:1.5}
 .mv-sett{margin-top:10px;font-size:12px;color:var(--muted)}
 .mv-bar{height:5px;background:rgba(0,0,0,.10);border-radius:999px;overflow:hidden;margin-bottom:5px}
 .mv-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--leo),var(--leo-dk));border-radius:999px}
 /* il sonno usa la stessa scatola del movimento, in tinta notturna */
 .mv.sn{background:linear-gradient(135deg,rgba(13,111,208,.08),rgba(13,111,208,.03));
  border-color:rgba(13,111,208,.20)}
 .mv.sn .mv-h{color:var(--blu)}
 .sn-q{font-weight:700;border-radius:999px;padding:2px 11px;font-size:12px;align-self:center}
 .sn-buono{background:rgba(60,80,45,.14);color:var(--leo-dk)}
 .sn-medio{background:rgba(176,125,13,.14);color:var(--accent)}
 .sn-scarso{background:rgba(179,54,42,.12);color:#b3362a}
 .cf-histh{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 0 6px}
 .tl-chart{width:100%;height:152px;display:block}
 /* diario come un libro */
 .book-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px}
 .bday{margin-bottom:16px}
 .bday-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-bottom:2px solid var(--border);padding-bottom:6px;margin-bottom:8px}
 .bday-d{font-size:14px;font-weight:800;text-transform:capitalize} .bday-k{font-size:11px;font-weight:700;color:var(--muted)}
 .bmeal{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:7px}
 .bm-top{display:flex;align-items:center;gap:8px;margin-bottom:3px}
 .bm-pasto{font-weight:800;font-size:11.5px;text-transform:capitalize} .bm-ora{font-size:10.5px;color:var(--muted)}
 .bm-cg{margin-left:auto;font-size:10px;font-weight:700;color:var(--primary);background:rgba(60,80,45,.12);padding:2px 8px;border-radius:999px}
 .bm-desc{font-size:13.5px;font-weight:600;margin-bottom:6px}
 .bm-rate{display:flex;align-items:center;gap:7px}
 .br-lab{font-size:11px;color:var(--muted);font-weight:600}
 .br-sel{font-family:inherit;font-size:12.5px;font-weight:700;padding:4px 8px;border:1px solid var(--border-hi);border-radius:8px;background:var(--card);color:var(--text);cursor:pointer}
 .br-out{font-size:11px;color:var(--muted)}
 .pdf-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:10px 12px;margin-bottom:12px}
 .pdf-lab{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);flex-basis:100%}
 .pdf-bar input[type=date]{font-family:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text)}
 .pdf-arr{color:var(--muted)}
 .pdf-bar button{margin-left:auto;font-family:inherit;font-weight:800;font-size:12.5px;padding:8px 14px;border:none;border-radius:9px;background:var(--primary);color:#fff;cursor:pointer}
 /* HERO del tab Piano: Leo prepara la dieta del mese dai dati del paziente */
 .plan-month{width:100%;font-family:inherit;font-weight:800;font-size:15px;padding:14px;border:none;border-radius:13px;background:linear-gradient(135deg,var(--primary),var(--primary-dk));color:#fff;cursor:pointer;margin-bottom:9px;box-shadow:0 8px 22px rgba(60,80,45,.30);letter-spacing:.01em;transition:filter .15s,transform .12s}
 .plan-month:hover{filter:brightness(1.07);transform:translateY(-1px)}
 .plan-month:disabled{opacity:.75;cursor:default;transform:none;filter:none}
 /* 'Apri calendario' ora è secondario (soft) sotto l'hero */
 .calview-btn{width:100%;font-family:inherit;font-weight:700;font-size:13.5px;padding:11px;border:1px solid var(--border-hi);border-radius:12px;background:var(--card);color:var(--text);cursor:pointer;margin-bottom:10px}
 .calview-btn:hover{background:rgba(60,80,45,.07);border-color:var(--primary)}
 .shop-tog{display:inline-flex;background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:4px;gap:3px;margin-bottom:12px}
 .shop-tog button{border:none;background:transparent;border-radius:8px;padding:7px 16px;font-family:inherit;font-weight:700;font-size:12.5px;color:var(--muted);cursor:pointer}
 .shop-tog button.on{background:var(--card);color:var(--primary);box-shadow:0 1px 4px rgba(33,50,20,.12)}
 .cal-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);flex-shrink:0}
 .cal-tabs{display:flex;gap:6px;flex:1;flex-wrap:wrap}
 .cal-tabs button{flex:1;padding:8px 4px;border:1px solid var(--border);background:transparent;color:var(--muted);
  border-radius:9px;font-family:var(--font);font-weight:700;font-size:11px;cursor:pointer;white-space:nowrap}
 .cal-tabs button.on{background:rgba(117,157,88,.12);border-color:var(--border-hi);color:var(--primary)}
 .rec-meta{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.5}
 /* Il procedimento della ricetta salvata: numerato, discreto, sotto gli ingredienti. */
 .rec-steps{margin:7px 0 0;padding-left:17px;font-size:11.5px;color:var(--muted);line-height:1.55}
 .rec-steps li{margin-bottom:3px}
 .rec-del{color:#e06a5a;cursor:pointer;margin-left:4px}.rec-del:hover{text-decoration:underline}
 .rec-actions{display:flex;gap:8px;margin-bottom:10px}
 .rec-actions button{flex:1;background:rgba(117,157,88,.1);border:1px solid var(--border-hi);color:var(--primary);
  border-radius:9px;padding:9px 6px;font-family:var(--font);font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap}
 .rec-actions button:hover{background:rgba(117,157,88,.2)}
 .rec-form{flex-direction:column;gap:8px;margin-bottom:12px;padding:12px;border:1px solid var(--border);border-radius:12px;background:rgba(117,157,88,.03)}
 .rec-form input,.rec-form textarea{background:rgba(117,157,88,.04);border:1px solid var(--border);border-radius:9px;
  color:var(--text);font-family:var(--font);font-size:13.5px;padding:9px 11px;outline:none;width:100%;resize:vertical}
 .rec-form input:focus,.rec-form textarea:focus{border-color:var(--border-hi)}
 .cal-x{color:var(--muted);cursor:pointer;font-size:17px;padding:0 4px}
 .cal-x:hover{color:var(--text)}
 .cal-body{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px 14px calc(24px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;min-width:0}
 .cal-body::-webkit-scrollbar{width:4px}.cal-body::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:4px}
 /* cronologia chat */
 .hist-h{flex:1;font-weight:800;font-size:14px;letter-spacing:-.01em}
 .hist-top{padding:10px 14px 0;flex-shrink:0}
 .hist-new{width:100%;background:var(--primary);color:#fff;border:0;border-radius:11px;padding:10px 12px;
  font-family:var(--font);font-size:13px;font-weight:700;cursor:pointer}
 .hist-new:hover{background:var(--primary-dk)}
 .hist-item{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);
  border-radius:11px;padding:10px 12px;cursor:pointer;min-width:0}
 .hist-item:hover{border-color:var(--border-hi)}
 .hist-item.on{border-color:var(--primary);box-shadow:0 0 0 2px var(--glow)}
 .hist-tx{flex:1;min-width:0}
 .hist-ti{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .hist-dt{font-size:10.5px;color:var(--muted);margin-top:2px}
 .hist-del{color:var(--muted);font-size:14px;padding:2px 4px;border-radius:6px;flex-shrink:0}
 .hist-del:hover{color:#c0392b;background:rgba(192,57,43,.08)}
 .hist-empty{color:var(--muted);font-size:13px;text-align:center;padding:18px 6px;line-height:1.6}
 .day{border:1px solid var(--border);border-radius:12px;padding:10px 12px;background:rgba(117,157,88,.03)}
 .day.empty{opacity:.55}
 .day-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
 .day-name{font-weight:700;font-size:12.5px;color:var(--text);text-transform:capitalize}
 .day-kcal{font-size:11px;color:var(--primary);font-weight:700}
 .meal{font-size:11.5px;color:var(--muted);line-height:1.5;display:flex;gap:6px}
 .meal b{color:var(--text);font-weight:600;text-transform:capitalize;flex-shrink:0;min-width:66px}
 .rep{margin-bottom:4px}
 .rep-h{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);margin:8px 0 4px}
 .rep-i{font-size:12px;color:var(--text);line-height:1.7;display:flex;justify-content:space-between;
  border-bottom:1px solid rgba(117,157,88,.07);padding:1px 0}
 .rep-i span:last-child{color:var(--muted)}
 .cal-empty{color:var(--muted);font-size:12.5px;line-height:1.6;text-align:center;padding:30px 10px}
 .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:50;
  display:none;align-items:center;justify-content:center;padding:16px}
 .modal-bg.on{display:flex}
 .modal{background:var(--card);border:1px solid var(--border-hi);border-radius:16px;padding:22px;
  padding-bottom:calc(22px + env(safe-area-inset-bottom));
  width:100%;max-width:360px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.5);
  max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 .modal-x{position:absolute;top:12px;right:14px;color:var(--muted);cursor:pointer;font-size:16px}
 .modal-x:hover{color:var(--text)}
 .modal-tabs{display:flex;gap:6px;margin-bottom:16px}
 .modal-tabs button{flex:1;padding:9px;border:1px solid var(--border);background:transparent;color:var(--muted);
  border-radius:10px;font-family:var(--font);font-weight:700;font-size:13px;cursor:pointer}
 .modal-tabs button.on{background:rgba(117,157,88,.12);border-color:var(--border-hi);color:var(--primary)}
 #authForm{display:flex;flex-direction:column;gap:10px}
 #authForm input{background:rgba(117,157,88,.04);border:1px solid var(--border);border-radius:10px;
  color:var(--text);font-family:var(--font);font-size:14px;padding:11px 13px;outline:none}
 #authForm input:focus{border-color:var(--border-hi)}
 .modal-go{background:linear-gradient(135deg,var(--primary),var(--primary-dk));color:#fff;border:none;
  border-radius:10px;padding:12px;font-family:var(--font);font-weight:700;font-size:14px;cursor:pointer;margin-top:2px}
 .modal-err{color:#e06a5a;font-size:12px;margin-bottom:8px;min-height:0}
 .modal-note{font-size:11px;color:var(--muted);line-height:1.5;margin-top:12px}
 .modal-note b{color:var(--primary)}
 /* porta d'ingresso: la stessa tavola illustrata della vetrina, senza cambiare il flusso */
 .door-bg{position:fixed;inset:0;z-index:60;background:
   radial-gradient(55% 70% at 12% 8%,rgba(201,162,74,.14),transparent 70%),
   radial-gradient(55% 75% at 90% 14%,rgba(13,111,208,.13),transparent 72%),rgba(245,248,243,.88);
   -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
   display:none;align-items:center;justify-content:center;padding:18px;overflow-y:auto}
 .door-bg.on{display:flex}
 body:has(.door-bg.on) #pwaInstall{display:none!important}
 .door{background:var(--card);border:3px solid var(--ink);border-radius:24px 19px 28px 21px / 20px 28px 20px 25px;
   padding:14px 22px calc(22px + env(safe-area-inset-bottom));width:100%;max-width:520px;
   box-shadow:8px 8px 0 var(--ink),0 28px 76px rgba(33,50,20,.25);position:relative;transform:rotate(.15deg)}
 .door-scene{position:relative;margin-bottom:42px;border:2px solid var(--ink);border-radius:16px 13px 19px 14px;overflow:visible;background:#102a24;box-shadow:0 3px 10px rgba(33,50,20,.16);transform:rotate(-.35deg)}
 .door-scene::before{content:'COACH LEO';position:absolute;z-index:3;top:-12px;left:17px;padding:4px 9px;border:2px solid var(--ink);border-radius:999px;
   background:#fff;color:var(--ink);box-shadow:0 3px 10px rgba(33,50,20,.16);font-family:var(--mono);font-size:8px;font-weight:800;letter-spacing:.08em}
 .door-art{display:block;width:100%;height:auto;aspect-ratio:640/260;object-fit:cover;border-radius:13px 10px 16px 11px}
 .door-logo{position:absolute;z-index:2;left:50%;bottom:-35px;transform:translateX(-50%);width:72px;height:72px;display:block;object-fit:cover;
   border-radius:18px;border:2px solid #fff;outline:2px solid var(--ink);box-shadow:4px 5px 0 var(--ink),0 8px 22px rgba(0,0,0,.35)}
 .door h2{text-align:center;font-size:23px;font-weight:800;letter-spacing:.1px;margin-bottom:6px;line-height:1.2}
 .door h2 b{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
 .door-sub{text-align:center;color:var(--muted);font-size:12.5px;line-height:1.55;margin-bottom:16px}
 .door-benes{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
 .door-benes li{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--text);line-height:1.45}
 .door-benes li::before{content:'✓';display:grid;place-items:center;width:18px;height:18px;border:1.5px solid var(--ink);border-radius:6px 5px 7px 5px;
   background:var(--shell);color:var(--primary);font-size:10px;font-weight:900;box-shadow:1px 1px 0 var(--ink);flex:0 0 18px}
 .door form{display:flex;flex-direction:column;gap:10px}
 .door input{min-width:0;width:100%;background:rgba(117,157,88,.04);border:1.5px solid var(--border-hi);border-radius:11px 9px 13px 10px;color:var(--text);
   font-family:var(--font);font-size:14px;padding:12px 13px;outline:none;transition:border-color .15s,box-shadow .15s}
 .door input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(60,80,45,.12)}
 .door-go{background:linear-gradient(135deg,var(--primary),var(--primary-dk));color:#fff;border:2px solid var(--ink);border-radius:12px 10px 14px 11px;
   padding:12px;font-family:var(--font);font-weight:800;font-size:14.5px;cursor:pointer;box-shadow:0 3px 10px rgba(33,50,20,.16);transition:transform .14s,box-shadow .14s,filter .14s}
 .door-go:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 3px 10px rgba(33,50,20,.16)}
 .door-err{color:#e06a5a;font-size:12px;min-height:0;text-align:center}
 /* nome e cognome affiancati: due campi corti su una riga, uno sotto l'altro se stretto */
 .door-nomi{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;min-width:0}
 .door-nomi>input{min-width:0;width:100%}
 @media(max-width:380px){.door-nomi{grid-template-columns:1fr}}
 .door-alt{text-align:center;font-size:12px;color:var(--muted);margin-top:12px}
 .door-alt a{color:var(--primary);cursor:pointer;font-weight:600}
 .door-skip{display:block;text-align:center;width:100%;margin-top:14px;background:none;border:none;
   color:var(--muted);font-family:var(--font);font-size:12px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
 .door-skip:hover{color:var(--text)}
 @media(max-width:600px){
  .door-bg{padding:12px;align-items:flex-start}
  .door{margin:auto 0;padding:10px 14px calc(18px + env(safe-area-inset-bottom));border-radius:20px 16px 23px 17px;box-shadow:5px 5px 0 var(--ink),0 18px 48px rgba(33,50,20,.22)}
  .door-scene{margin-bottom:36px}
  .door-logo{width:62px;height:62px;bottom:-30px;border-radius:15px}
  .door h2{font-size:21px}
 }
 /* paywall (fine del mese gratis) */
 .pay-price{text-align:center;margin:8px 0 14px;line-height:1.3}
 .pay-price b{font-size:30px;color:var(--primary);font-weight:800}
 .pay-price span{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
 .pay-note{font-size:10.5px;color:var(--muted);line-height:1.5;text-align:center;margin-top:10px}
 .pay-note b{color:var(--primary)}
 .prof-abb{font-size:12px;color:var(--muted);line-height:1.5;margin-top:12px;padding-top:10px;border-top:1px solid var(--border)}
 .prof-abb b{color:var(--primary)}
 /* glicemia */
 .glic-title{font-weight:800;font-size:16px;margin-bottom:6px}
 .glic-sub{color:var(--muted);font-size:11.5px;margin-bottom:14px;line-height:1.55}
 .glic-sub b{color:var(--primary)}
 .glic-read{display:flex;align-items:baseline;gap:10px;margin:8px 0 2px}
 .glic-num{font-family:ui-monospace,Menlo,monospace;font-size:46px;font-weight:800;line-height:1}
 .glic-unit{color:var(--muted);font-size:14px}
 .glic-arrow{font-size:26px;margin-left:auto}
 .glic-label{font-size:13.5px;font-weight:700}
 .glic-meta{color:var(--muted);font-size:12px;margin-top:4px}
 .glic-live{color:var(--primary);font-size:11px}
 .glic-live::before{content:'';}
 .glic-hist{margin-top:18px;border-top:1px solid var(--border);padding-top:14px;min-height:266px}
 .glic-histh{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:9px}
 .glic-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
 .glic-kpis .kpi{background:var(--bg);border:1px solid var(--border);border-radius:11px;padding:8px 6px;text-align:center}
 .glic-kpis .kpi b{display:block;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text)}
 .glic-kpis .kpi span{font-size:10px;color:var(--muted)}
 .glic-chart{width:100%;height:176px;display:block}
 .glic-hint{margin-top:14px;font-size:13px;color:var(--muted);text-align:center;padding:16px;background:var(--bg);border-radius:12px}
 .demo-hint{background:linear-gradient(135deg,rgba(60,80,45,.12),rgba(13,111,208,.08));border:1px solid var(--border-hi);border-radius:11px;padding:9px 12px;margin-bottom:12px;font-size:12.5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
 .demo-hint a{color:#fff;background:linear-gradient(135deg,var(--primary),#304024);padding:5px 11px;border-radius:8px;font-weight:800;text-decoration:none;font-size:11.5px;margin-left:auto}
 /* toast di conferma salvataggio */
 .toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);z-index:80;
  background:linear-gradient(135deg,var(--primary),#304024);color:#fff;font-weight:700;font-size:14px;
  padding:12px 20px;border-radius:13px;box-shadow:0 12px 34px rgba(60,80,45,.42);display:flex;align-items:center;gap:9px;
  opacity:0;visibility:hidden;transition:opacity .25s,transform .25s,visibility .25s;max-width:90vw;pointer-events:none}
 .toast.on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
 .toast .tk{background:rgba(255,255,255,.25);width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;flex-shrink:0}
 @media(prefers-reduced-motion:reduce){.toast{transition:opacity .2s}}
 @media(max-width:420px){.glic-kpis{grid-template-columns:repeat(2,1fr)}}
 @keyframes glicpulse{0%,100%{opacity:1}50%{opacity:.35}}
 .glic-live{animation:glicpulse 2s ease-in-out infinite}
 .glic-actions{display:flex;gap:8px;margin-top:18px}
 .glic-actions button{flex:1;padding:10px;border:1px solid var(--border-hi);background:transparent;color:var(--text);
  border-radius:10px;font-family:var(--font);font-weight:700;font-size:13px;cursor:pointer}
 .glic-actions button:hover{background:rgba(117,157,88,.1)}
 #glicForm{display:flex;flex-direction:column;gap:10px}
 #glicForm input{background:rgba(117,157,88,.04);border:1px solid var(--border);border-radius:10px;
  color:var(--text);font-family:var(--font);font-size:14px;padding:11px 13px;outline:none}
 #glicForm input:focus{border-color:var(--border-hi)}
 .glic-guide{margin-top:14px;border-top:1px solid var(--border);padding-top:10px}
 .glic-guide summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--primary);list-style:none}
 .glic-guide summary::-webkit-details-marker{display:none}
 .glic-guide summary::before{content:'▸ ';font-size:10px}
 .glic-guide[open] summary::before{content:'▾ '}
 .glic-guide ol{margin:10px 0 8px;padding-left:20px;color:var(--muted);font-size:12.5px;line-height:1.6}
 .glic-guide ol b{color:var(--text)}
 .glic-guide p{color:var(--muted);font-size:11.5px;line-height:1.5;margin:4px 0 0}
 .glic-guide a{color:var(--primary)}
 /* profilo / onboarding */
 .prof-modal{max-width:400px;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
 .prof-h{font-weight:800;font-size:17px}
 .prof-s{color:var(--muted);font-size:12px;margin:2px 0 14px}
 .pref-sum:empty{display:none}
 .pref-sum{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:12px 13px;margin-bottom:14px}
 .pref-sum .ps-h{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:8px}
 .pref-sum .ps-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:7px}
 .pref-sum .ps-row:last-child{margin-bottom:0}
 .pref-sum .ps-lab{font-size:11px;font-weight:700;color:var(--muted);flex-shrink:0}
 .pref-sum .ps-chip{font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px}
 .pref-sum .ps-chip.love{background:rgba(60,80,45,.13);color:var(--primary)}
 .pref-sum .ps-chip.no{background:rgba(160,110,20,.14);color:#a06a12}
 .pref-sum .ps-chip.al{background:rgba(200,60,60,.12);color:#c0392b}
 #profForm{display:flex;flex-direction:column;gap:3px}
 .pl{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:9px 0 3px}
 .popt{text-transform:none;letter-spacing:0;font-weight:400;opacity:.7}
 #profForm select,#profForm input{background:rgba(117,157,88,.04);border:1px solid var(--border);border-radius:10px;
  color:var(--text);font-family:var(--font);font-size:14px;padding:10px 12px;outline:none;width:100%}
 #profForm select:focus,#profForm input:focus{border-color:var(--border-hi)}
 .prow{display:flex;gap:10px}.prow>div{flex:1;min-width:0}
 .prange{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;margin-top:8px;
  background:var(--border-hi);outline:none;padding:0;cursor:pointer}
 .prange::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;border:0}
 .prange::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--primary);cursor:pointer;border:0}
 .pchecks{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;margin-top:4px}
 .pchecks label{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--text);cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400}
 .pchecks input{width:auto;accent-color:var(--primary)}
 #profGo{margin-top:16px}
 .prof-report{width:100%;margin-top:12px;background:rgba(117,157,88,.1);border:1px solid var(--border-hi);color:var(--primary);
  border-radius:10px;padding:11px;font-family:var(--font);font-size:13.5px;font-weight:700;cursor:pointer}
 .prof-report:hover{background:rgba(117,157,88,.18)}
 .prof-danger{width:100%;margin-top:8px;background:transparent;border:1px solid rgba(192,57,43,.35);
  color:#c0392b;border-radius:11px;padding:10px 12px;font-family:var(--font);font-size:12.5px;
  font-weight:600;cursor:pointer}
 .prof-danger:hover{background:rgba(192,57,43,.08)}
 .prof-logout{width:100%;margin-top:8px;background:transparent;border:1px solid var(--border);color:var(--muted);
  border-radius:10px;padding:9px;font-family:var(--font);font-size:12.5px;cursor:pointer}
 .prof-logout:hover{color:var(--text);border-color:var(--border-hi)}
 @keyframes panIn{from{opacity:0;transform:translateY(-7px) scale(.98)}}
 /* responsive */
 @media(max-width:600px){                     /* così il menu a tendina non viene tagliato */
  /* lo spazio che avanza va al MARCHIO, non al tasto di ritorno: quello resta compatto */
  .brand-leo{flex:1;min-width:0}
  .acct{max-width:150px}
  .lang-sel{font-size:13px}
  .messages{padding:14px 12px 6px;gap:14px}.msg{max-width:92%}.msg.user{max-width:88%}
  .avatar{width:26px;height:26px}.bubble{font-size:13.5px;padding:11px 14px}
  .input-bar{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}.foot{font-size:.6rem}
  .modal{padding:18px 16px}
  .cal-panel{width:100%}                       /* drawer a tutta larghezza su mobile (100% del box fisso, no scroll) */
 }
 /* sotto i 430px il sottotitolo veniva troncato ("YOUR DIABET…"): meglio toglierlo che mozzarlo */
 @media(max-width:430px){.brand-leo>span{display:none}}
 @media(max-width:380px){.msg{max-width:96%}.acct{max-width:98px;font-size:10px}}
 /* ── MOBILE: scroll/rendering fluido — header opaco (niente blur pesante), aurora ferma,
    niente particelle (evita repaint continui durante lo scroll su telefono) ── */
 @media(max-width:900px){
  body::before{animation:none}
  .bg-particles{display:none}
 }
 /* flex-shrink:0 + nowrap: da loggato il chip col nome allarga la testata e senza queste due
    righe il marchio veniva stretto a larghezza 0, impilando L/Ǝ/O in colonna. */
 .brand-leo{display:flex;flex-direction:column;line-height:1.12;text-decoration:none;color:#f4fbef;min-width:0;flex-shrink:0}
 /* LA SPAZIATURA DEL MARCHIO, misurata sul logo (assets/leo-logo-official.png) invece che
    scelta a occhio. Nel logo le tre lettere sono STACCATE: il vuoto vale 0.30 dell'altezza
    delle maiuscole fra L e Ǝ, 0.35 fra Ǝ e O. Qui valeva 0.06 e 0.12 — la L e la Ǝ si
    toccavano e si leggevano come un blocco solo, non come tre lettere.
    Le colpe erano due, e sommate: `letter-spacing:.01em` (praticamente niente) piu' un
    margine NEGATIVO sulla E rovesciata, che le tirava addosso le vicine da tutti e due i
    lati. Con .16em e senza margine la parola torna larga 3.17 volte l'altezza delle
    maiuscole: esattamente il logo. Le PROPORZIONI delle lettere erano gia' giuste (L .74
    contro .72, Ǝ .78 contro .76, O 1.07 contro 1.04): Montserrat 800 e' il carattere giusto,
    era solo troppo stretto. Se ritocchi qui, ritocca anche `.appnav .brand-leo b`. */
 .brand-leo b{font-size:20px;font-weight:800;letter-spacing:0;white-space:nowrap}
 /* L'INSEGNA ha la spaziatura LARGA del logo, che e' un'altra cosa dal marchio dentro una
    frase: qui i vuoti misurati sono 0.309 e 0.349 dell'altezza delle maiuscole, contro 0.304
    e 0.348 del logo vero. I due valori sono diversi fra loro perche' lo sono anche nel logo:
    la O tonda ha bisogno di piu' aria della Ǝ squadrata.
    Perche' MARGINI e non `letter-spacing`: la Ǝ e' un `inline-block` ribaltato, e il tracking
    del contenitore (a) si applica anche dentro il riquadro, dove lo specchio se lo porta dal
    lato sbagliato — misurati 0.50 contro 0.14 — e (b) dopo un inline-block non si somma
    affatto, quindi il vuoto fra Ǝ e O non si muoveva di un pixel. Col margine i due si
    regolano separatamente e la regola vale anche senza `.leo` attorno. */
 .brand-leo b .rev{margin:0 .15em 0 .175em}
 /* `>span` e non `span`: dentro <b> c'e' anche la E rovesciata del marchio (<span class="rev">).
    Col selettore largo si rimpiccioliva, e al display:none sotto i 430px il logo diventava «L O». */
 /* 9px con .14em di spaziatura era al limite del leggibile: le lettere erano cosi' distanti
    da non fare piu' parola. Un filo piu' grandi e piu' vicine si legge; e piu' velate, cosi'
    il sottotitolo resta sotto al marchio invece di competerci. */
 .brand-leo>span{font-size:10px;letter-spacing:.085em;text-transform:uppercase;color:rgba(239,250,231,.60);
  font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .rev{display:inline-block;transform:scaleX(-1)}
 .acct.in{background:rgba(255,255,255,.10);color:#f4fbef;border-color:rgba(255,255,255,.20)}
 .acct.in:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.34)}
 /* l'omino: sul verde chiaro della testata il disco verde scuro sembrava un BUCO nel chip.
    Qui dentro il fondo e' gia' verde, quindi il disco va piu' chiaro del chip, non piu' scuro. */
 .acct.in .av{background:rgba(255,255,255,.20);box-shadow:none}
 /* i giorni di prova che restano: bianco pieno era l'oggetto piu' acceso di tutta la barra,
    piu' del marchio. Il verde chiaro della scala lo tiene leggibile e dentro la famiglia. */
 .acct .gg{background:#bacfaa;color:#26331c}
 /* CTA da anonimo: era un verde su verde che spariva nel fondo. Bianco su verde — ed è
    anche il verso giusto, visto che è l'invito all'azione della pagina. */
 .acct:not(.in){background:#fff;color:#26331c;box-shadow:0 4px 14px rgba(26,45,12,.22)}
 .acct:not(.in):hover{background:#f4fbef;color:#1d2716;filter:none}
 @media(max-width:900px){
  .brand-leo b{font-size:17px}
  /* la barra in basso e' l'altra meta' del guscio: stesso verde della testata */
  body>nav.tabbar{background:#3c502d!important;border-top:1px solid rgba(255,255,255,.16)}
  body>nav.tabbar a{color:rgba(235,247,226,.72)}
  body>nav.tabbar a.active{color:#fff}
  body>nav.tabbar a.active::after{background:#bacfaa}
  body>nav.tabbar a:active{background:rgba(255,255,255,.14)}
 }
 /* ── CARTOON LIGHT CHAT — armonia con www (stesso bordo ink, shadow, Montserrat) ma light ──
    Tutte le card della chat bianche con fumetto light, leggibili per referti lunghi.
    Stessa famiglia www: radius hand-drawn, shadow ink, rotate leggero, Montserrat. */
 .day,.bmeal,.hist-item,.modal,.door,.cal-panel,.pref-sum,.bday,.mv,.mv.sn,
 .prof-modal,.cal-panel,.glic-kpis .kpi,.shop-tog,.area-tab,.rec-actions button,
 .calview-btn,.plan-month,.glic-chart,.tl-chart{
  background:var(--card)!important;border:2.2px solid rgba(33,50,20,.16)!important;
  border-radius:16px 14px 20px 16px / 14px 20px 16px 12px!important;
  box-shadow:3px 3px 0 rgba(33,50,20,.10)!important;transform:rotate(-.2deg)}
 .day:nth-child(even),.bmeal:nth-child(even),.hist-item:nth-child(even),.area-tab:nth-child(even){transform:rotate(.3deg)}
 .day:hover,.bmeal:hover,.hist-item:hover,.area-tab:hover{transform:rotate(0deg) translateY(-1px);box-shadow:3px 3px 0 rgba(33,50,20,.12)!important}
 /* bottoni cartoon chat su light – come www */
 .area-tab,.shop-tog button,.rec-actions button,.calview-btn,.plan-month{
  border:2.2px solid var(--ink,#0c1222)!important;box-shadow:0 3px 10px rgba(33,50,20,.16)!important;
  border-radius:14px 12px 16px 12px / 12px 16px 12px 14px!important}
 .area-tab.on,.plan-month{background:var(--primary)!important;color:#fff!important;border-color:var(--ink,#0c1222)!important;box-shadow:0 3px 10px rgba(33,50,20,.16)!important}
 .area-tab{transform:rotate(-.2deg)} .area-tab:nth-child(even){transform:rotate(.2deg)}
 /* recipe/macro cards dentro chat bubbles mantengono bianco ma con cartoon leggero */
 .bubble .tbl-wrap,.bubble pre,.bubble blockquote{
  border:1.8px solid rgba(33,50,20,.14)!important;border-radius:12px 10px 14px 10px / 10px 14px 10px 12px!important;
  box-shadow:2px 2px 0 rgba(33,50,20,.08)!important}
 /* input-bar come card fumetto light sul light */
 .input-bar{border-top:2.2px solid rgba(33,50,20,.16)!important;box-shadow:0 -3px 0 rgba(33,50,20,.06);background:var(--card)!important}
 /* avatar LEO già con bordo 2.6px ink + shadow – garantito da .avatar */
 /* ghost button mai bianco su bianco dentro card bianche già gestito sopra */

/* LO STORICO PER GIORNO (05/10/2026): intestazione di ogni giornata nell'elenco, e il riquadro
   di una giornata passata (sola lettura). Stessi colori del sito, niente bordi neri. */
.hist-giorno{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#3c502d;margin:14px 0 6px;padding:0 4px}
.giorno-banner{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 12px 0;padding:10px 14px;border-radius:14px;background:#fbf7ec;border:1px solid #e8d9a8;font-size:13px;color:#4b4029}
.giorno-banner button{flex-shrink:0;border:none;border-radius:999px;padding:7px 14px;background:#3c502d;color:#fff;font-weight:700;font-size:13px;cursor:pointer}

/* LA CRONOLOGIA COME TENDINA (05/10/2026): scorre da SINISTRA, sotto la testata. Cosi' l'hamburger
   resta sempre visibile e cliccabile, e le due cose non si sovrappongono. Niente «nuova chat»:
   c'e' una sola chat per giornata. */
#histBg.cal-bg{top:64px;height:calc(100dvh - 64px);justify-content:flex-start;background:rgba(12,18,10,.38);z-index:30}
#histBg .cal-panel{width:min(84vw,340px);height:100%;max-height:none;border-left:none;border-right:1px solid var(--border);transform:translateX(-102%);transition:transform .26s cubic-bezier(.2,.7,.2,1);box-shadow:10px 0 34px rgba(0,0,0,.18)}
#histBg.on .cal-panel{transform:none}

/* LA VOCE «LE TUE CHAT» NEL MENU: stessa pelle delle altre voci del menu (era un pulsante bianco
   con bordo nero, testo quasi invisibile). */
.appnav .links button.l-hist{display:block;width:100%;text-align:left;background:transparent;border:none;border-radius:12px;color:#f4fbef;font:inherit;font-size:15px;font-weight:600;padding:13px 14px;margin:2px 0;cursor:pointer;box-shadow:none}
.appnav .links button.l-hist:hover{background:rgba(255,255,255,.12)}

/* IL PULSANTE DELLA CRONOLOGIA in testata (solo chat): un'icona a parte, accanto al marchio. */
.appnav .hist-top-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;margin-left:10px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.1);color:#f4fbef;cursor:pointer;flex-shrink:0}
.appnav .hist-top-btn:hover{background:rgba(255,255,255,.18)}

/* LA DATA SULLA STESSA RIGA DEL TITOLO: una chat al giorno, niente intestazioni in piu' */
.hist-riga{display:flex;align-items:baseline;gap:8px;min-width:0}
.hist-riga .hist-ti{flex:1;min-width:0}
.hist-when{font-size:11px;font-weight:700;color:var(--primary);letter-spacing:.04em;white-space:nowrap;flex-shrink:0}