/* Caratteri dell'app, ospitati sul sito (da Google Fonts, licenza SIL Open Font License): Poppins 500–800 e Inter
   (variabile 400–800), solo alfabeto latino ed esteso, come prima. Il browser scarica «-latin-ext» solo se serve
   (unicode-range). Li usa tools/build_artifact.py per il sito pubblicato; l'artefatto e la versione locale
   restano su Google Fonts. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-latin-ext.521e24d174.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/inter-latin.1dc044f482.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500-latin-ext.0c19389564.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-500-latin.bba020c0fd.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600-latin-ext.b2accf62f0.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600-latin.fffe793f52.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700-latin-ext.a83d28cf2a.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700-latin.6af69d307c.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/poppins-800-latin-ext.d52e1d8948.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/poppins-800-latin.4fe5f87dec.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
:root{
  --bg:#F6F7FA;
  --surface:#FFFFFF;
  --surface-2:#F0F1F5;
  --surface-3:#E6E8EE;
  --ink:#24252A;
  --line:rgba(36,37,42,.07);
  --line-strong:rgba(36,37,42,.13);
  --muted:#83848C;
  --muted-2:#B4B5BC;
  --accent:#5CB85C;
  --accent-dim:#DEF7D3;
  --carb:#5B9BD9;
  --carb-dim:#D6EAFB;
  --protein:#fa7769;
  --protein-dim:#FBE0CC;
  --fat:#A48CE8;
  --fat-dim:#E3DAFC;
  /* numeri dei riquadri macro: stessa tinta, appena più scura per leggerli sul loro fondo (3:1, prima 2,1–2,4:1) */
  --carb-num:#4988C5;
  --protein-num:#D95A4E;
  --fat-num:#8870C9;
  --danger:#E85C4A;
  --veg:#2FA89B;      --veg-dim:#D5F0EC;
  --fruit:#E0679A;    --fruit-dim:#FBDCE8;
  --sauce:#D9A21B;    --sauce-dim:#FAEECB;
  /* fondi dei cerchi di Bevande e Integratori: distinti da Carboidrati (blu) e Grassi (viola) */
  --drink-tile:#CDEFF7; --supp-tile:#CBB6F3;   /* integratori: viola più scuro dei grassi (--fat-dim) */
  --supplement:#8452D6; --supplement-dim:#EAD9FC;
  --radius-m:18px;
  --radius-l:26px;
  --radius-xl:36px;
  --shadow: 0 16px 34px -18px rgba(36,37,42,.16);
  --on-ink: #FFFFFF;
  --warn:#E0663F;
  font-size:16px;
}
/* ---------- Tema scuro ---------- */
html[data-theme="dark"]{
  --bg:#141519;
  --surface:#1D1F25;
  --surface-2:#262930;
  --surface-3:#33373F;
  --ink:#F2F3F5;
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.14);
  --muted:#9A9DA6;
  --muted-2:#6C7079;
  --accent:#63C463;
  --accent-dim:#22331F;
  --carb:#6EA8E0;
  --carb-dim:#1D2A38;
  --protein:#fa7769;
  --protein-dim:#3A2A1D;
  --fat:#A48CE8;
  --fat-dim:#2A2340;
  --carb-num:var(--carb);
  --protein-num:var(--protein);
  --fat-num:var(--fat);
  --veg:#46C0B2;      --veg-dim:#17322F;
  --fruit:#EC7FAA;    --fruit-dim:#3A2029;
  --sauce:#E0B23A;    --sauce-dim:#33290F;
  --drink-tile:#13333B; --supp-tile:#3B2866;
  --supplement:#9A72E0; --supplement-dim:#2E2147;
  --shadow: 0 16px 34px -18px rgba(0,0,0,.6);
  --on-ink: #10120F;
}
/* il toast sul tema scuro ereditava il testo scuro di --on-ink sul fondo scuro: illeggibile (1,3:1) */
html[data-theme="dark"] .toast{background:var(--surface-2);color:var(--ink);}
html[data-theme="dark"] .hero-photo-circle{border-color:var(--surface);background:var(--surface);}

/* ---------- Apple-style squircle corners (superellisse n=4, ~60% smoothing, continuita G2) ---------- */
:root{
  --sq-tl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M0.00%2C0.00%20L100.00%2C0.00%20L80.19%2C0.04%20L71.99%2C0.15%20L65.72%2C0.35%20L60.45%2C0.62%20L55.83%2C0.97%20L51.68%2C1.39%20L47.90%2C1.90%20L44.41%2C2.48%20L41.17%2C3.14%20L38.14%2C3.88%20L35.30%2C4.70%20L32.62%2C5.61%20L30.10%2C6.59%20L27.72%2C7.66%20L25.46%2C8.82%20L23.33%2C10.05%20L21.32%2C11.38%20L19.41%2C12.80%20L17.61%2C14.31%20L15.91%2C15.91%20L14.31%2C17.61%20L12.80%2C19.41%20L11.38%2C21.32%20L10.05%2C23.33%20L8.82%2C25.46%20L7.66%2C27.72%20L6.59%2C30.10%20L5.61%2C32.62%20L4.70%2C35.30%20L3.88%2C38.14%20L3.14%2C41.17%20L2.48%2C44.41%20L1.90%2C47.90%20L1.39%2C51.68%20L0.97%2C55.83%20L0.62%2C60.45%20L0.35%2C65.72%20L0.15%2C71.99%20L0.04%2C80.19%20L0.00%2C100.00%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
  --sq-tr: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M100.00%2C0.00%20L0.00%2C0.00%20L19.81%2C0.04%20L28.01%2C0.15%20L34.28%2C0.35%20L39.55%2C0.62%20L44.17%2C0.97%20L48.32%2C1.39%20L52.10%2C1.90%20L55.59%2C2.48%20L58.83%2C3.14%20L61.86%2C3.88%20L64.70%2C4.70%20L67.38%2C5.61%20L69.90%2C6.59%20L72.28%2C7.66%20L74.54%2C8.82%20L76.67%2C10.05%20L78.68%2C11.38%20L80.59%2C12.80%20L82.39%2C14.31%20L84.09%2C15.91%20L85.69%2C17.61%20L87.20%2C19.41%20L88.62%2C21.32%20L89.95%2C23.33%20L91.18%2C25.46%20L92.34%2C27.72%20L93.41%2C30.10%20L94.39%2C32.62%20L95.30%2C35.30%20L96.12%2C38.14%20L96.86%2C41.17%20L97.52%2C44.41%20L98.10%2C47.90%20L98.61%2C51.68%20L99.03%2C55.83%20L99.38%2C60.45%20L99.65%2C65.72%20L99.85%2C71.99%20L99.96%2C80.19%20L100.00%2C100.00%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
  --sq-bl: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M0.00%2C100.00%20L100.00%2C100.00%20L80.19%2C99.96%20L71.99%2C99.85%20L65.72%2C99.65%20L60.45%2C99.38%20L55.83%2C99.03%20L51.68%2C98.61%20L47.90%2C98.10%20L44.41%2C97.52%20L41.17%2C96.86%20L38.14%2C96.12%20L35.30%2C95.30%20L32.62%2C94.39%20L30.10%2C93.41%20L27.72%2C92.34%20L25.46%2C91.18%20L23.33%2C89.95%20L21.32%2C88.62%20L19.41%2C87.20%20L17.61%2C85.69%20L15.91%2C84.09%20L14.31%2C82.39%20L12.80%2C80.59%20L11.38%2C78.68%20L10.05%2C76.67%20L8.82%2C74.54%20L7.66%2C72.28%20L6.59%2C69.90%20L5.61%2C67.38%20L4.70%2C64.70%20L3.88%2C61.86%20L3.14%2C58.83%20L2.48%2C55.59%20L1.90%2C52.10%20L1.39%2C48.32%20L0.97%2C44.17%20L0.62%2C39.55%20L0.35%2C34.28%20L0.15%2C28.01%20L0.04%2C19.81%20L0.00%2C0.00%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
  --sq-br: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M100.00%2C100.00%20L0.00%2C100.00%20L19.81%2C99.96%20L28.01%2C99.85%20L34.28%2C99.65%20L39.55%2C99.38%20L44.17%2C99.03%20L48.32%2C98.61%20L52.10%2C98.10%20L55.59%2C97.52%20L58.83%2C96.86%20L61.86%2C96.12%20L64.70%2C95.30%20L67.38%2C94.39%20L69.90%2C93.41%20L72.28%2C92.34%20L74.54%2C91.18%20L76.67%2C89.95%20L78.68%2C88.62%20L80.59%2C87.20%20L82.39%2C85.69%20L84.09%2C84.09%20L85.69%2C82.39%20L87.20%2C80.59%20L88.62%2C78.68%20L89.95%2C76.67%20L91.18%2C74.54%20L92.34%2C72.28%20L93.41%2C69.90%20L94.39%2C67.38%20L95.30%2C64.70%20L96.12%2C61.86%20L96.86%2C58.83%20L97.52%2C55.59%20L98.10%2C52.10%20L98.61%2C48.32%20L99.03%2C44.17%20L99.38%2C39.55%20L99.65%2C34.28%20L99.85%2C28.01%20L99.96%2C19.81%20L100.00%2C0.00%20Z%22%20fill%3D%22black%22%2F%3E%3C%2Fsvg%3E");
}
/* Metodo: 4 maschere-angolo a dimensione fissa (px) composte per sottrazione da un rettangolo pieno.
   Funziona a prescindere dal rapporto larghezza/altezza dell'elemento (a differenza di una singola
   maschera "stirata" con mask-size:100% 100%, che distorcerebbe la curvatura sugli elementi non quadrati).
   border-radius resta impostato come fallback per i browser senza supporto a CSS mask-composite.
   NB: .cat-tile NON è in questo elenco (a differenza di food-card/fam-card): ha sfondo trasparente,
   quindi non ha bisogno della squircle mask sul proprio box — e se ce l'avesse, questa maschera
   ritaglierebbe TUTTO il contenuto del bottone (icona + etichetta) dentro un rettangolo arrotondato,
   troncando in un rettangolo anche l'ombra hover circolare applicata al figlio .ic (icona rotonda
   58px) invece di lasciarla apparire come un alone tondo libero attorno all'icona. */
.food-card,
.fam-card {
  mask-image: linear-gradient(#000,#000), var(--sq-tl), var(--sq-tr), var(--sq-bl), var(--sq-br);
  mask-position: 0 0, top left, top right, bottom left, bottom right;
  mask-size: 100% 100%, var(--radius-m) var(--radius-m), var(--radius-m) var(--radius-m), var(--radius-m) var(--radius-m), var(--radius-m) var(--radius-m);
  mask-repeat: no-repeat;
  mask-mode: alpha, alpha, alpha, alpha, alpha;
  mask-composite: add, subtract, subtract, subtract, subtract;
  -webkit-mask-image: linear-gradient(#000,#000), var(--sq-tl), var(--sq-tr), var(--sq-bl), var(--sq-br);
  -webkit-mask-position: 0 0, top left, top right, bottom left, bottom right;
  -webkit-mask-size: 100% 100%, var(--radius-m) var(--radius-m), var(--radius-m) var(--radius-m), var(--radius-m) var(--radius-m), var(--radius-m) var(--radius-m);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-over, source-out, source-out, source-out, source-out;
}
.hero-arch-wrap, .qty-block, .nutri-card, .build-slot, .match-result-card, .bk-card, .addon-block, .match-form, .totals-card, .nutri-panel, .goal-current, .fit-card, .tracker, .weight-tile, .day-row, .swatch-block, .cm-card, .svc-card, .plan-card, .macro-alert, .week-summary, .sub-recap, .sub-status, .cutoff-card, .ph-stats, .pgroup, .about-card, .choice-card, .welcome-opt, .modal-card, .onb-cta, .metab-card, .weight-card, .weigh-btn, .weight-chart, .onb-preview, .scan-cta, .scanner-frame, .diary-summary, .manual-block{
  mask-image: linear-gradient(#000,#000), var(--sq-tl), var(--sq-tr), var(--sq-bl), var(--sq-br);
  mask-position: 0 0, top left, top right, bottom left, bottom right;
  mask-size: 100% 100%, var(--radius-l) var(--radius-l), var(--radius-l) var(--radius-l), var(--radius-l) var(--radius-l), var(--radius-l) var(--radius-l);
  mask-repeat: no-repeat;
  mask-mode: alpha, alpha, alpha, alpha, alpha;
  mask-composite: add, subtract, subtract, subtract, subtract;
  -webkit-mask-image: linear-gradient(#000,#000), var(--sq-tl), var(--sq-tr), var(--sq-bl), var(--sq-br);
  -webkit-mask-position: 0 0, top left, top right, bottom left, bottom right;
  -webkit-mask-size: 100% 100%, var(--radius-l) var(--radius-l), var(--radius-l) var(--radius-l), var(--radius-l) var(--radius-l), var(--radius-l) var(--radius-l);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-over, source-out, source-out, source-out, source-out;
}
.hero,
.share-card {
  mask-image: linear-gradient(#000,#000), var(--sq-tl), var(--sq-tr), var(--sq-bl), var(--sq-br);
  mask-position: 0 0, top left, top right, bottom left, bottom right;
  mask-size: 100% 100%, var(--radius-xl) var(--radius-xl), var(--radius-xl) var(--radius-xl), var(--radius-xl) var(--radius-xl), var(--radius-xl) var(--radius-xl);
  mask-repeat: no-repeat;
  mask-mode: alpha, alpha, alpha, alpha, alpha;
  mask-composite: add, subtract, subtract, subtract, subtract;
  -webkit-mask-image: linear-gradient(#000,#000), var(--sq-tl), var(--sq-tr), var(--sq-bl), var(--sq-br);
  -webkit-mask-position: 0 0, top left, top right, bottom left, bottom right;
  -webkit-mask-size: 100% 100%, var(--radius-xl) var(--radius-xl), var(--radius-xl) var(--radius-xl), var(--radius-xl) var(--radius-xl), var(--radius-xl) var(--radius-xl);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-over, source-out, source-out, source-out, source-out;
}
html[data-theme="dark"] .hero-price-pill,
html[data-theme="dark"] .ob-action-full,
html[data-theme="dark"] .modal-card{background:var(--surface-2);}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
/* Scala fissa, come un'app: lo scorrimento resta (verticale e orizzontale, per le strisce), niente zoom con
   due dita né con il doppio tocco. La mappa del rider e l'editor della foto gestiscono da soli i loro gesti. */
html{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  /* altezza dello schermo stabile: 100vh sui telefoni conta anche la barra del browser che va e viene */
  min-height:100vh;
  min-height:100svh;
  overscroll-behavior-y:none;
  /* iPhone in orizzontale: il contenuto non finisce sotto la tacca (in verticale vale 0) */
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}
button,a,[data-action],input,select,textarea,label{touch-action:manipulation;}
/* Sensazione da app: un tocco lungo su pulsanti, tab, card e barre non seleziona il testo né apre il menu del
   browser («Copia», «Condividi», «Salva immagine»); le immagini dell'interfaccia non si trascinano. I contenuti
   (descrizioni, numeri d'ordine, codici, indirizzi, valori) restano selezionabili; i campi di testo pure. */
:where(button, [data-action], #bottomnav, #topbar, #menubar, .back-row){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
:where(input, textarea, select){-webkit-user-select:auto;user-select:auto;-webkit-touch-callout:default;}
img:not(.share-preview){-webkit-user-drag:none;}
:where(button, [data-action], .brand-logo, .fp, .hero-photo-circle, .food-thumb) img{-webkit-touch-callout:none;}
/* Con una finestra aperta (conferma, foto, condivisione) la pagina sotto resta ferma dov'è */
html:has(#modal-root > *){overflow:hidden;}
/* Telefono: mentre si scrive la barra in basso e la card dell'ordine si tolgono, così non restano sopra la tastiera */
body.kb-open #bottomnav, body.kb-open #order-tracker-bar{display:none;}
/* Tocco: i controlli senza un effetto loro si «premono» appena (2%) mentre il dito è giù; quelli che ne hanno già
   uno (card, pulsanti, cuori...) tengono il loro. :where = priorità zero, nessuna regola esistente viene scavalcata */
:where(button, a[href], [data-action]:not(input):not(select):not(textarea):not(.modal-backdrop):not(.logo)):active{transform:scale(.98);}
h1,h2,h3,h4{margin:0;font-family:'Poppins',sans-serif;font-weight:600;letter-spacing:-.01em;}
p{margin:0;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input{font-family:inherit;color:inherit;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent-dim);color:var(--ink);}
.mono{font-family:'Inter',sans-serif;}

/* ---------- App shell ---------- */
#app-shell{
  max-width:1200px;
  margin:0 auto;
  position:relative;
  min-height:100vh;
  min-height:100svh;
  padding-bottom:104px;
}
#topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;
  background:var(--bg);
}
.logo{display:flex;align-items:center;height:46px;}
/* telefoni da 320 px (iPhone SE 1ª gen., 5/5s): logo alto 36 px + cerca + carrello non ci stavano e il carrello toccava il bordo */
@media (max-width:340px){#topbar .logo{height:38px;}}
.splash-screen{position:fixed;inset:0;overflow:hidden;background:#141519;display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .35s ease;}
.splash-screen.splash-out{opacity:0;pointer-events:none;}
.splash-anim{width:min(100vw,560px);aspect-ratio:1;}
.splash-anim svg{overflow:visible;}
.splash-anim svg>g{clip-path:none!important;}   /* lo zoom finale della V e il nero coprono tutto lo schermo, non solo il quadrato */
/* Logo ufficiale MACRO'S (icona + wordmark), fornito dall'utente in due
   varianti: solo una delle due è visibile alla volta, secondo il tema. */
.brand-logo{display:flex;align-items:center;height:100%;}
.brand-logo svg{height:100%;width:auto;display:block;}
.brand-logo img{height:100%;width:auto;display:block;}
.brand-logo-dark{display:none;}
html[data-theme="dark"] .brand-logo-light{display:none;}
html[data-theme="dark"] .brand-logo-dark{display:flex;}
.topbar-actions{display:flex;align-items:center;gap:8px;}
.icon-btn{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface);position:relative;color:var(--ink);
  box-shadow:0 2px 10px rgba(36,37,42,.06);
  transition:transform .15s ease, background .15s ease;
}
.icon-btn svg{width:20px;height:20px;}
.icon-btn:active{transform:scale(.9);}
@media (hover:hover){.icon-btn:hover{background:var(--surface-2);}}
.badge{
  position:absolute;top:-4px;right:-4px;
  background:var(--accent);color:#fff;
  font-family:'Inter',sans-serif;font-weight:700;font-size:11px;
  min-width:17px;height:17px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
  border:2px solid var(--bg);
}
/* Un alimento è entrato nel carrello: l'icona fa un piccolo saltello inclinandosi e il numero rimbalza appena (js/app/chrome.js) */
.icon-btn.cart-bump svg{animation:cart-hop .5s cubic-bezier(.3,.7,.4,1);}
.icon-btn.cart-bump .badge{animation:badge-pop .42s cubic-bezier(.3,1.5,.5,1);}
@keyframes cart-hop{
  0%{transform:translateY(0) rotate(0) scale(1);}
  28%{transform:translateY(-3px) rotate(-9deg) scale(1.12);}
  58%{transform:translateY(0) rotate(5deg) scale(.97);}
  100%{transform:translateY(0) rotate(0) scale(1);}
}
@keyframes badge-pop{0%{transform:scale(.5);}55%{transform:scale(1.2);}100%{transform:scale(1);}}
@media (prefers-reduced-motion: reduce){.icon-btn.cart-bump svg,.icon-btn.cart-bump .badge{animation:none;}}
.back-row{
  display:flex;align-items:center;gap:12px;padding:12px 20px;
  position:sticky;top:var(--topbar-h,78px);z-index:36;   /* il valore esatto lo scrive render() (syncStickyOffsets) */
  background:var(--bg);
}
.back-btn svg{width:18px;height:18px;}
.back-btn{
  width:38px;height:38px;border-radius:50%;background:var(--surface);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 10px rgba(36,37,42,.06);
}
.back-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;color:var(--ink);}

main#view{padding:0 20px 40px;}
/* Lieve dissolvenza quando si passa a una schermata diversa (non ad ogni ridisegno sullo stesso
   schermo: vedi animateViewChange in js/core/toggles.js). Leggero e breve di proposito. */
main#view.view-enter{animation:viewFadeIn .22s ease;}
@keyframes viewFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
/* Scorrimento laterale (js/core/toggles.js): avanti arriva da destra, indietro da sinistra. Breve (0,22 s) e
   interrompibile: il contenuto è già quello nuovo, si sposta solo la sua immagine */
main#view.view-push{animation:viewPush .22s cubic-bezier(.2,.8,.2,1);}
main#view.view-pop{animation:viewPop .22s cubic-bezier(.2,.8,.2,1);}
@keyframes viewPush{from{opacity:.35;transform:translateX(40px);}to{opacity:1;transform:none;}}
@keyframes viewPop{from{opacity:.35;transform:translateX(-40px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){main#view.view-push,main#view.view-pop{animation:none;}}
/* durante lo scorrimento la schermata non deve far comparire una barra orizzontale */
#app-shell{overflow-x:clip;}
@media (prefers-reduced-motion: reduce){main#view.view-enter{animation:none;}}

/* ---------- Bottom nav ---------- */
#bottomnav{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;justify-content:center;padding:14px 20px calc(14px + env(safe-area-inset-bottom));
}
/* La barra stessa è vetro smerigliato. Lo sfondo e la sfocatura stanno su un ::before (un
   livello "fratello" della bolla, non un suo antenato) e non su .nav-inner: se la barra
   avesse lei stessa il backdrop-filter, la bolla dentro di essa non potrebbe più sfocare
   niente (un backdrop-filter annidato dentro un altro viene annullato dal browser — verificato
   fianco a fianco sulla pagina reale). Aspetto identico a prima. */
.nav-inner{
  position:relative;
  width:100%;max-width:640px;
  display:flex;align-items:center;justify-content:space-between;
  padding:8px;border-radius:100px;
  /* Valori di trasparenza dati dall'utente (riferimento "liquid-glass-card"): fondo 10%,
     bordo base 20%, bordo superiore 65% (riflesso di luce principale), sinistro 45%. */
  border:1px solid rgba(255,255,255,.2);
  border-top-color:rgba(255,255,255,.65);
  border-left-color:rgba(255,255,255,.45);
  box-shadow:0 14px 34px -14px rgba(36,37,42,.22);
}
.nav-inner::before{
  content:'';position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:rgba(255,255,255,.06);
  /* saturazione 1.15 (era 1.9): sopra i pulsanti a gradiente e le card colorate la barra diventava
     verde fluo e le icone sparivano; così si vedono i colori veri, sfocati */
  backdrop-filter:blur(9px) saturate(1.15) brightness(1.06);
  -webkit-backdrop-filter:blur(9px) saturate(1.15) brightness(1.06);
  /* Spessore del vetro: riflesso in alto, luce più tenue in basso, bagliore interno lungo tutto
     il bordo (dove un vetro curvo raccoglie la luce) e un'ombra interna leggerissima sotto. */
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.75),
    inset 0 -1px 1px rgba(255,255,255,.3),
    inset 0 0 14px rgba(255,255,255,.3),
    inset 0 -10px 18px -14px rgba(20,22,30,.18);
}
/* Chromium: vera rifrazione (filtro SVG #lg-bar costruito da updateNavLens in chrome.js) —
   sfocatura minima, il contenuto sotto resta leggibile e si piega verso il bordo. */
html.lg-refract .nav-inner::before{
  backdrop-filter:blur(4px) url(#lg-bar) saturate(1.15) brightness(1.06);
  -webkit-backdrop-filter:blur(4px) url(#lg-bar) saturate(1.15) brightness(1.06);
}
.nav-item{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:7px;
  padding:11px;border-radius:100px;color:var(--muted);
  font-size:13px;font-weight:700;
  transition:color .18s ease,padding .18s ease;
}
.nav-ic{display:inline-flex;position:relative;z-index:1;}
/* Icone più evidenti sulla barra ora molto trasparente: più grandi, tratto più spesso e un
   leggero alone chiaro che le stacca da qualunque contenuto scorra sotto. */
.nav-item svg{width:21px;height:21px;flex-shrink:0;stroke-width:2.4;filter:drop-shadow(0 0 1.5px color-mix(in srgb, var(--bg) 85%, transparent));}
.nav-item.active svg{stroke-width:2.6;}
.nav-item.active{color:var(--accent);padding:11px 18px;}
.nav-label{white-space:nowrap;position:relative;z-index:1;}

/* Bolla della tab attiva: vetro chiaro e trasparente sopra la barra.
   - trasparenza: quasi nessuna tinta, si vede quello che c'è sotto;
   - blur leggero + saturazione e luminosità in più (vetro trasparente, non smerigliato);
   - highlight: riflesso ellittico in alto (::after) + filo di luce sul bordo superiore;
   - rifrazione: sottili frange rosso/azzurro sui bordi interni e icona un po' ingrandita,
     come vista attraverso una lente;
   - profondità: leggera ombra interna in basso;
   - bordo luminoso sottilissimo e ombra esterna molto morbida, così sembra appoggiata
     fisicamente SOPRA la barra.
   Funziona perché la bolla non è più dentro un elemento con backdrop-filter (vedi .nav-inner).
   Posizione/dimensione via JS (renderBottomnav in chrome.js, tecnica FLIP). */
.nav-indicator{
  position:absolute;left:0;top:0;z-index:1;border-radius:100px;box-sizing:border-box;
  border:1px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(1.5px) saturate(1.15) brightness(1.04);
  -webkit-backdrop-filter:blur(1.5px) saturate(1.15) brightness(1.04);
  box-shadow:
    0 10px 26px -10px rgba(20,22,30,.35),
    0 2px 6px -2px rgba(20,22,30,.14),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -8px 14px -10px rgba(20,22,30,.22),
    inset 2px 0 3px -2px rgba(255,70,120,.45),
    inset -2px 0 3px -2px rgba(60,170,255,.45);
  /* stessa corsa e stessa curva di prima, ma spostata con translate (niente ricalcolo della pagina) */
  transition:translate .4s cubic-bezier(.34,1.3,.4,1),
             width .4s cubic-bezier(.34,1.3,.4,1), height .4s cubic-bezier(.34,1.3,.4,1);
}
/* Chromium: la bolla è una lente — ingrandisce e piega quello che ha sotto (#lg-pill). */
html.lg-refract .nav-indicator{
  backdrop-filter:url(#lg-pill) saturate(1.15) brightness(1.05);
  -webkit-backdrop-filter:url(#lg-pill) saturate(1.15) brightness(1.05);
}
.nav-indicator::after{
  content:'';position:absolute;left:12%;right:12%;top:2px;height:45%;border-radius:100px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%);
  opacity:.55;
}
.nav-item.active .nav-ic{transform:scale(1.08);}
.nav-indicator.nav-ind-move{animation:navIndGlass .48s ease-out;}
@keyframes navIndGlass{
  0%{transform:scaleY(1);}
  40%{transform:scaleY(1.45);}
  100%{transform:scaleY(1);}
}
.nav-item-pop{animation:navItemPop .5s ease-out;}
@keyframes navItemPop{0%{transform:scale(1);}40%{transform:scale(1.22);}100%{transform:scale(1);}}
@media (prefers-reduced-motion: reduce){
  .nav-indicator{transition:none;}
  .nav-indicator.nav-ind-move{animation:none;}
  .nav-item-pop{animation:none;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 22px;border-radius:100px;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;
  transition:transform .12s ease, opacity .12s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.96);}
.btn-primary{color:#fff;}
.btn-dark{background:var(--ink);color:var(--on-ink);}
.btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong);}
.btn-ghost{background:var(--surface-2);color:var(--ink);}
.btn-block{width:100%;}
.btn-sm{padding:10px 16px;font-size:13px;}
.btn:disabled{opacity:.35;pointer-events:none;}

/* ---------- Hero ---------- */
.hero{
  padding:36px 24px;position:relative;overflow:hidden;
  border-radius:var(--radius-xl);
  background:linear-gradient(150deg,var(--accent-dim) 0%,var(--carb-dim) 55%,var(--surface) 100%);
  margin-top:16px;
}
.hero .eyebrow{
  font-family:'Inter',sans-serif;font-weight:700;font-size:12px;color:var(--accent);
  background:rgba(255,255,255,.6);padding:6px 12px;border-radius:100px;
  letter-spacing:.01em;margin-bottom:16px;display:inline-block;
}
/* Tema scuro: il fondo bianco al 60% sul riquadro scuro diventava grigio chiaro e il verde spariva (~1:1) */
html[data-theme="dark"] .hero .eyebrow{background:rgba(255,255,255,.08);}
.hero h1{font-size:min(42px, calc((100vw - 88px) * .13));line-height:1;margin-bottom:10px;color:var(--ink);}   /* sugli schermi stretti si riduce quel tanto che basta */
.hero h1 span{color:var(--accent);white-space:nowrap;}   /* «YOUR MACROS.» sempre su una riga */
.hero p.sub{color:var(--muted);font-size:15px;max-width:320px;margin-bottom:22px;line-height:1.4;}

@media(min-width:640px){}

/* ---------- Section ---------- */
.section{margin-top:34px;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;}
.section-head h2{font-size:20px;}
.section-head .see-all{font-size:12px;color:var(--muted);font-weight:700;}
.scroller{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;margin:0 -20px;padding-left:20px;padding-right:20px;}
.scroller::-webkit-scrollbar{display:none;}

.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.cat-grid8{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 8px;}
.cat-tile{
  background:transparent;border:none;border-radius:var(--radius-m);
  padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:9px;
  text-align:center;
  /* Il bottone è dentro una cella di grid a 4 colonne: senza questo si estende
     (justify-items:stretch di default) a tutta la larghezza della colonna, molto
     più larga del cerchio icona da 58px — risultato: l'area cliccabile/hover
     arrivava fino a metà strada verso la tile accanto. width:fit-content la
     restringe al contenuto reale (icona + etichetta), centrata con margin:auto. */
  width:fit-content;
  margin:0 auto;
}
.cat-tile .ic{
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;
  transition:transform .15s ease, box-shadow .15s ease;
}
@media (hover:hover){.cat-tile:hover .ic{transform:scale(1.08);box-shadow:0 6px 16px rgba(36,37,42,.16);}}
.cat-tile:active .ic{transform:scale(.92);}
.cat-tile span{font-size:12px;font-weight:600;color:var(--ink);}
.cat-tile .ic.ic-img img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.14));}
/* proteine: l'immagine è larga e bassa (pollo, bistecca, uovo), alla stessa misura sembrava più piccola delle altre */
.cat-tile .ic.ic-img img.ic-protein{width:100%;height:100%;}

/* Due box separati: "Crea il tuo pasto" e "Match i tuoi Macro" nella Home —
   stessa idea di .hero-ctas (colonna su mobile, riga da 640px), ma come
   card autonome invece di due bottoni dentro l'hero. */

@media(min-width:640px){}

/* ---------- Food / meal cards ---------- */
/* Scheda prodotto nello stile della scheda alimento: riquadro a gradiente della categoria (h-<categoria>) con il piatto
   in un cerchio bianco, sotto categoria, nome, macro nei riquadri colorati dei valori nutrizionali, calorie e prezzo. */
.food-card{
  background:var(--surface);border:none;border-radius:var(--radius-m);padding:8px;
  overflow:hidden;display:flex;flex-direction:column;cursor:pointer;
  box-shadow:0 2px 14px rgba(36,37,42,.05);
  transition:transform .15s ease, box-shadow .15s ease;
}
.food-card:active{transform:scale(.98);}
@media (hover:hover){.food-card:hover{box-shadow:0 8px 22px rgba(36,37,42,.09);}}
.food-thumb{
  position:relative;display:flex;align-items:center;justify-content:center;
  aspect-ratio:1 / .86;border-radius:calc(var(--radius-m) - 6px);overflow:hidden;
  background:var(--hero, var(--grad-green));
}
.food-thumb::before,.food-thumb::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none;}
.food-thumb::before{width:48%;aspect-ratio:1;right:-14%;top:-24%;}
.food-thumb::after{width:34%;aspect-ratio:1;left:-12%;bottom:-8%;background:rgba(255,255,255,.08);}
.fp{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:84%;aspect-ratio:1;
  border-radius:50%;overflow:hidden;background:#fff;border:3px solid #fff;box-shadow:0 12px 22px -8px rgba(0,0,0,.34);
}
html[data-theme="dark"] .fp{border-color:var(--surface);background:var(--surface);}
.fp-art,.fp-img,.fp-icon{display:block;width:100%;height:100%;}
.fp-img{object-fit:cover;}
.fp-icon{display:flex;align-items:center;justify-content:center;}
.food-thumb .heart{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;z-index:2;
  background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.14);display:flex;align-items:center;justify-content:center;}
.food-thumb .heart svg{width:15px;height:15px;}
.diet-warn{position:absolute;bottom:8px;left:8px;width:24px;height:24px;border-radius:50%;z-index:2;
  background:var(--danger);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff;}
.diet-warn svg{width:14px;height:14px;}
.food-card.diet-conflict{opacity:.6;}
.diet-conflict-label{font-size:11px;color:var(--danger);font-weight:700;}
.food-info{padding:11px 6px 6px;display:flex;flex-direction:column;gap:6px;flex:1;}
.food-info .tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;}
.food-info .tag:empty{display:none;}
.food-info .fname{font-family:'Poppins',sans-serif;font-size:14.5px;font-weight:600;line-height:1.2;color:var(--ink);}
.food-info .fmeta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;margin-top:auto;padding-top:4px;}
.fmeta .kcal{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);white-space:nowrap;}
.fmeta .price{font-family:'Inter',sans-serif;font-size:12px;font-weight:800;color:var(--accent);white-space:nowrap;margin-left:auto;
  background:var(--accent-dim);padding:3px 8px;border-radius:100px;}
.macro-mini{display:flex;flex-wrap:wrap;gap:4px;}
.mm{display:inline-flex;align-items:baseline;gap:3px;padding:3px 8px;border-radius:9px;background:var(--surface-2);color:var(--muted);
  font-family:'Poppins',sans-serif;font-size:11px;font-weight:600;line-height:1.3;}
.mm b{color:var(--ink);font-weight:600;}
.mm-p{background:var(--protein-dim);color:var(--protein);}
.mm-c{background:var(--carb-dim);color:var(--carb);}
.mm-f{background:var(--fat-dim);color:var(--fat);}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}

@media(min-width:640px){.grid-2{grid-template-columns:repeat(3,1fr);} }
@media(min-width:900px){.grid-2{grid-template-columns:repeat(4,1fr);} }

/* Pre / Intra / Post-workout (pagina Integratori): tre riquadri come le schede prodotto; quello scelto prende
   il gradiente degli integratori (h-supplement) con l'icona in un cerchio bianco */
.supp-seg{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:2px;}
.supp-opt{grid-column:span 2;}
.supp-opt{
  position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:10px 4px 9px;border:none;border-radius:var(--radius-m);background:var(--surface);color:var(--ink);
  box-shadow:0 2px 14px rgba(36,37,42,.05);font-family:'Poppins',sans-serif;font-weight:600;font-size:11.5px;line-height:1.15;
  text-align:center;transition:transform .12s ease, box-shadow .2s ease;
}
.supp-opt:active{transform:scale(.97);}
.supp-opt::before{content:'';position:absolute;width:44px;height:44px;border-radius:50%;right:-14px;top:-16px;background:rgba(255,255,255,.14);opacity:0;pointer-events:none;}
.so-ic{position:relative;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--supplement-dim);color:var(--supplement);}
.so-ic svg{width:17px;height:17px;}
.so-l{position:relative;}
.supp-opt.active{background:var(--hero);color:#fff;box-shadow:0 14px 24px -14px rgba(91,62,150,.7);}
.supp-opt.active::before{opacity:1;}
.supp-opt.active .so-ic{background:#fff;color:#6a45b8;box-shadow:0 8px 14px -8px rgba(0,0,0,.4);}
@media (hover:hover){.supp-opt:not(.active):hover{box-shadow:0 8px 22px rgba(36,37,42,.1);}}

/* ---------- Tabs / chips ---------- */
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:0 20px 12px;}
#menubar{position:sticky;top:var(--topbar-h,78px);z-index:38;background:var(--bg);padding-bottom:14px;}   /* spazio sotto le categorie (prima c'era la frase di sottotitolo) */
.tabs::-webkit-scrollbar{display:none;}
.tab{
  flex-shrink:0;padding:10px 16px;border-radius:100px;background:var(--surface);
  font-size:12.5px;font-weight:700;color:var(--muted);
  border:none;box-shadow:0 2px 10px rgba(36,37,42,.05);
}
.tab.active{background:var(--ink);color:var(--on-ink);}

.search-bar{
  display:flex;align-items:center;gap:10px;background:var(--surface);
  border-radius:100px;padding:13px 16px;box-shadow:0 2px 10px rgba(36,37,42,.05);
}
.search-bar input{background:none;border:none;outline:none;flex:1;font-size:14px;color:var(--ink);}
.search-bar input::placeholder{color:var(--muted-2);}
.search-bar svg{width:17px;height:17px;color:var(--muted);flex-shrink:0;}

/* ---------- Detail page ---------- */

.detail-desc{line-height:1.55;max-width:520px;}

/* ---------- Detail hero v2: arched color zone + circular photo ---------- */
.hero-arch-wrap{
  position:relative;margin-top:12px;border-radius:var(--radius-l);overflow:hidden;
  min-height:330px;display:flex;flex-direction:column;align-items:center;
}
.hero-arch-wrap .heart-lg{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;background:#FFFFFF;display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 4px 12px rgba(0,0,0,.14);transition:transform .12s ease;}
.hero-arch-wrap .heart-lg:active{transform:scale(.88);}
.hero-arch-wrap .heart-lg svg{width:20px;height:20px;}
.hero-arch-wrap .heart-lg.active{box-shadow:0 4px 14px rgba(240,151,90,.45);}
.hero-name-zone{position:relative;z-index:2;text-align:center;padding-top:54px;padding-left:28px;padding-right:28px;}
.hero-cal-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:13.5px;}
.hero-photo-circle{
  position:relative;z-index:2;border-radius:50%;overflow:hidden;
  border:5px solid #FFFFFF;margin-top:20px;background:#FFFFFF;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.hero-photo-circle img{width:100%;height:100%;object-fit:cover;}
.hero-photo-circle .glyph{font-size:64px;}

.hero-price-pill{
  position:relative;z-index:2;margin:-14px 0 20px;padding:13px 24px;border-radius:100px;font-weight:800;font-size:16px;
}

.qty-block{
  margin-top:26px;background:var(--surface);border:none;border-radius:var(--radius-l);
  box-shadow:0 2px 14px rgba(36,37,42,.05);
}
.qty-label{margin-bottom:14px;display:block;}
.qty-controls{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:16px;}
.qty-btn{
  width:46px;height:46px;border-radius:50%;background:var(--surface-2);border:none;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink);
  transition:transform .1s ease;
}
.qty-btn:active{transform:scale(.88);}
.qty-btn svg{width:18px;height:18px;}
.qty-value{min-width:120px;text-align:center;color:var(--ink);}
.qty-value input{
  width:100%;background:none;border:none;outline:none;text-align:center;font:inherit;color:inherit;
  border-bottom:1px dashed var(--line-strong);padding-bottom:2px;
}
.qty-value .unit{font-size:16px;color:var(--muted);margin-left:4px;font-weight:600;}
input[type=range].slider{
  -webkit-appearance:none;width:100%;outline:none;
}
input[type=range].slider::-webkit-slider-thumb{
  -webkit-appearance:none;border-radius:50%;cursor:pointer;
}
input[type=range].slider::-moz-range-thumb{border-radius:50%;cursor:pointer;}
.qty-hint{text-align:center;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;color:var(--muted);margin-top:10px;}
.range-minmax{display:flex;justify-content:space-between;font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);margin-top:8px;}

/* Famiglie di colore dei servizi: verde = Weekly Box (con un tocco di blu in fondo),
   blu = Consulenza (con un tocco di verde in fondo). Condivise da schede e banner. */
:root{
  --grad-green:linear-gradient(135deg,#12a062 0%,#2ab871 40%,#1699cd 100%);
  --grad-blue:linear-gradient(135deg,#1783c2 0%,#2ba4de 40%,#16ab69 100%);
  --glow-green:rgba(18,160,98,.7);
  --glow-blue:rgba(23,131,194,.7);
  --grad-amber:linear-gradient(135deg,#c2670f 0%,#a8480f 100%);
  --glow-amber:rgba(194,103,15,.7);
}

/* ---------- Consulenza nutrizionale ---------- */
.pro-av{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',sans-serif;font-weight:600;font-size:17px;color:var(--ink);flex-shrink:0;
  box-shadow:0 0 0 3px var(--surface),0 4px 12px rgba(36,37,42,.12);}
.pro-av.big{width:64px;height:64px;font-size:22px;}
.pro-id{min-width:0;flex:1;}
.pro-name{font-family:'Poppins',sans-serif;font-weight:600;font-size:15.5px;line-height:1.25;}
.pro-role{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.35;}
.bk-who-head{display:flex;align-items:center;gap:13px;margin-top:16px;}
.banner-hero,.bk-card{position:relative;overflow:hidden;margin-top:16px;padding:22px 20px;border-radius:var(--radius-l);color:#fff;
  background:var(--grad-blue);box-shadow:0 16px 30px -18px var(--glow-blue);}
.banner-hero.green{background:var(--grad-green);box-shadow:0 16px 30px -18px var(--glow-green);}
.banner-hero::after,.bk-card::after{content:'';position:absolute;right:-50px;top:-50px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.1);pointer-events:none;}
.banner-hero .sh-badge{position:relative;display:inline-block;background:rgba(255,255,255,.2);color:#fff;}
.bk-card>*{position:relative;}
.banner-title{position:relative;font-size:24px;line-height:1.15;margin-top:12px;text-wrap:balance;}
.banner-sub{position:relative;font-size:13px;line-height:1.5;opacity:.92;margin-top:8px;}
.banner-list{position:relative;display:grid;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22);}
.banner-list div{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.4;}
.banner-list svg{width:16px;height:16px;stroke:#fff;flex-shrink:0;margin-top:1px;}
.pro-card{background:var(--surface);border-radius:var(--radius-l);padding:18px;margin-top:12px;box-shadow:0 2px 14px rgba(36,37,42,.06);display:flex;flex-direction:column;gap:14px;}
.pro-head{display:flex;align-items:center;gap:14px;}
.pro-chip{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:3px 10px 3px 8px;border-radius:100px;background:var(--accent-dim);color:var(--ink);font-size:11px;font-weight:700;}
.pro-chip svg{width:12px;height:12px;stroke:var(--accent);}
.pro-focus{margin:0;font-size:13px;line-height:1.5;color:var(--muted);}
.pro-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface-2);}
.pro-free{display:flex;align-items:center;gap:10px;min-width:0;}
.pro-free svg{width:20px;height:20px;stroke:var(--accent);flex-shrink:0;}
.pro-free span{display:block;font-size:11px;color:var(--muted);font-weight:600;line-height:1.3;}
.pro-free b{display:block;font-size:13px;color:var(--ink);font-weight:800;}
.pro-price{flex-shrink:0;text-align:right;font-family:'Inter',sans-serif;font-weight:800;font-size:18px;line-height:1.1;}
.pro-price small{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-top:2px;}
.pro-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pro-actions .btn{display:flex;align-items:center;justify-content:center;gap:7px;}
.pro-actions .btn svg{width:17px;height:17px;}

/* ---------- Chat con il professionista ---------- */
.chat-head{display:flex;align-items:center;gap:13px;margin-top:14px;padding:12px 14px;border-radius:var(--radius-l);background:var(--surface);box-shadow:0 2px 12px rgba(36,37,42,.06);}
.chat-note{margin-top:10px;padding:8px 12px;border-radius:12px;background:var(--surface-2);color:var(--muted);font-size:11.5px;line-height:1.45;}
.chat-thread{display:flex;flex-direction:column;gap:6px;margin-top:14px;padding-bottom:6px;}
.chat-day{align-self:center;margin:10px 0 4px;padding:3px 12px;border-radius:100px;background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:700;}
.chat-row{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:100%;}
.chat-row.me{align-items:flex-end;}
.chat-bubble{max-width:82%;padding:10px 13px 6px;border-radius:18px 18px 18px 6px;background:var(--surface);color:var(--ink);font-size:14px;line-height:1.45;box-shadow:0 2px 10px rgba(36,37,42,.06);overflow-wrap:anywhere;}
.chat-row.me .chat-bubble{border-radius:18px 18px 6px 18px;background:var(--accent);color:#fff;box-shadow:none;}
.chat-time{display:block;text-align:right;font-size:11px;opacity:.6;margin-top:3px;font-variant-numeric:tabular-nums;}
.chat-bubble.typing{display:flex;gap:4px;padding:14px 16px;}
.chat-bubble.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted-2);animation:chatDot 1.1s ease-in-out infinite;}
.chat-bubble.typing i:nth-child(2){animation-delay:.16s;}
.chat-bubble.typing i:nth-child(3){animation-delay:.32s;}
@keyframes chatDot{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-4px);opacity:1;}}
.chat-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;}
.chat-cta svg{width:15px;height:15px;}
.chat-quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.chat-quick.gone{display:none;}
.chat-chip{padding:9px 14px;border-radius:100px;background:var(--surface);color:var(--ink);font-size:12.5px;font-weight:600;text-align:left;box-shadow:0 2px 10px rgba(36,37,42,.06);border:1.5px solid var(--line);}
@media (hover:hover){.chat-chip:hover{border-color:var(--accent);color:var(--accent);}}
.chat-composer{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 20px calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);}
.cc-inner{display:flex;align-items:center;gap:10px;max-width:640px;margin:0 auto;}
.cc-inner .text-input{flex:1;min-width:0;margin:0;}
.chat-send{flex-shrink:0;width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;}
.chat-send svg{width:20px;height:20px;stroke:#fff;}
body.chat-on #bottomnav{display:none;}
body.chat-on .toast{bottom:calc(88px + env(safe-area-inset-bottom,0px));}
@media (prefers-reduced-motion: reduce){.chat-bubble.typing i{animation:none;opacity:.7;}}
.day-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;}
.day-strip::-webkit-scrollbar{display:none;}
.day-chip{flex-shrink:0;width:52px;padding:10px 0;border-radius:14px;background:var(--surface);
  box-shadow:0 2px 10px rgba(36,37,42,.05);text-align:center;}
.day-chip.active{background:var(--ink);color:var(--on-ink);}
.dc-dow{display:block;font-size:11px;font-weight:700;opacity:.65;}
.dc-num{display:block;font-family:'Inter',sans-serif;font-weight:800;font-size:16px;margin-top:2px;}
.slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.time-chip{padding:11px 4px;border-radius:12px;background:var(--surface);font-family:'Inter',sans-serif;
  font-weight:700;font-size:12.5px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.time-chip.active{background:var(--accent);color:#fff;}
.time-chip.taken,.time-chip:disabled{opacity:.35;}
.bk-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.bk-badge{font-size:11px;font-weight:800;color:#fff;background:rgba(255,255,255,.2);padding:4px 11px;border-radius:100px;}
.bk-price{font-family:'Inter',sans-serif;font-weight:800;font-size:16px;}
.bk-when{font-family:'Poppins',sans-serif;font-weight:600;font-size:20px;}
.bk-who{font-size:13px;opacity:.9;margin-top:5px;}
.bk-mode{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;margin-top:12px;
  padding-top:12px;border-top:1px solid rgba(255,255,255,.22);}
.bk-mode svg{width:15px;height:15px;stroke:#fff;}
a.btn svg{width:17px;height:17px;flex-shrink:0;}
.nutri-card{
  margin-top:18px;background:var(--surface);border:none;border-radius:var(--radius-l);display:flex;align-items:center;box-shadow:0 2px 14px rgba(36,37,42,.05);
}
.nutri-stats{flex:1;display:grid;grid-template-columns:1fr 1fr;}
.nutri-stat .val{transition:color .2s ease;}
.nutri-stat .lbl{font-size:11px;color:var(--muted);margin-top:2px;}
.nutri-stat.p .val{color:var(--protein-num);}
.nutri-stat.c .val{color:var(--carb-num);}
.nutri-stat.f .val{color:var(--fat-num);}

.detail-ctas{display:flex;gap:10px;margin-top:24px;}

/* ---------- Build ---------- */
.build-slot{
  background:var(--surface);border:none;border-radius:var(--radius-l);
  padding:16px;display:flex;align-items:center;gap:14px;margin-bottom:12px;cursor:pointer;
  box-shadow:0 2px 14px rgba(36,37,42,.05);
}
.build-slot .ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:22px;}
.build-slot .body{flex:1;min-width:0;}
.build-slot .step-lbl{font-size:11px;color:var(--muted);font-weight:700;}
.build-slot .step-val{font-size:15px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);}
.build-slot .chev{color:var(--muted);flex-shrink:0;}
.bs-main{display:flex;align-items:center;gap:14px;flex:1;min-width:0;text-align:left;}
.bs-clear{width:30px;height:30px;border-radius:50%;background:var(--surface-2);color:var(--danger);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.bs-clear svg{width:13px;height:13px;}
.addon-block{background:var(--surface);border-radius:var(--radius-l);padding:18px;margin-top:12px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.ab-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;}
.ab-label{font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;}
.ab-price{font-family:'Inter',sans-serif;font-size:12px;font-weight:800;color:var(--accent);}
.ab-seg{display:flex;gap:8px;}
.ab-opt{flex:1;background:var(--surface-2);border:1.5px solid transparent;border-radius:14px;padding:11px 6px;text-align:center;transition:transform .1s ease;}
.ab-opt:active{transform:scale(.96);}
.ab-opt.active{border-color:var(--accent);background:var(--accent-dim);}
.abo-n{display:block;font-family:'Inter',sans-serif;font-weight:800;font-size:18px;}
.abo-l{display:block;font-size:11px;color:var(--muted);font-weight:700;margin-top:2px;}
.ab-note{font-size:11px;color:var(--muted);margin-top:12px;}
.comp-list{list-style:none;margin:0;padding:0;}
.comp-list li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink);}
.comp-list li:first-child{border-top:0;padding-top:0;}
.comp-list b{font-family:'Poppins',sans-serif;font-weight:600;white-space:nowrap;}
.cook-opt{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 4px 11px;}
.cook-ic{display:block;width:100%;max-width:62px;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 8px 14px -8px rgba(0,0,0,.34);}
html[data-theme="dark"] .cook-ic{background:var(--surface);}
.cook-ic svg{display:block;width:100%;height:100%;}
.cook-ic img{display:block;width:100%;height:100%;object-fit:cover;}
.cook-opt .abo-l{font-size:11px;line-height:1.15;margin-top:0;color:var(--ink);}
.bowl-add-topping{width:100%;border:none;font:inherit;color:inherit;text-align:left;display:flex;align-items:center;justify-content:space-between;cursor:pointer;}
.bowl-add-topping .qty-btn{background:var(--accent-dim);color:var(--accent);}
.bowl-row{display:flex;gap:10px;}
.bowl-row .addon-block{flex:1;min-width:0;padding:20px 12px;}
.bowl-row .ab-head{justify-content:center;text-align:center;}
.bowl-row .ab-label{font-size:14px;}
.bowl-row .qty-controls{gap:8px;margin-bottom:0;}
.bowl-row .qty-value{min-width:auto;font-size:15px;}
.bowl-row .qty-btn{width:38px;height:38px;}
.bowl-row .qty-btn svg{width:14px;height:14px;}
.bowl-topping-close{width:26px;height:26px;border-radius:50%;background:var(--surface-2);border:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--muted);}
.bowl-topping-close svg{width:12px;height:12px;}
.bowl-topping-group-label{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;margin:14px 0 8px;}
.bowl-topping-grid{display:flex;flex-wrap:wrap;gap:8px;}
.bowl-topping-grid .cook-opt{flex:0 0 calc(25% - 6px);min-width:0;}   /* righe da 4 (creme, sciroppi, condimenti) */
.build-slot .step-val.empty{color:var(--muted-2);font-weight:500;}
.extra-chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.extra-chip{padding:8px 12px;border-radius:100px;background:var(--surface-2);font-size:11.5px;font-weight:700;color:var(--ink);}
.extra-chip.active{background:var(--accent);color:#fff;}

/* ---------- Match ---------- */
.match-form{background:var(--surface);border:none;border-radius:var(--radius-l);margin-top:16px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.match-field label{display:flex;justify-content:space-between;margin-bottom:8px;}
.match-field label .v{font-family:'Inter',sans-serif;color:var(--ink);font-size:15px;font-weight:800;}
.kcal-derived{
  display:flex;align-items:center;justify-content:space-between;
}
.kcal-derived .n{color:var(--ink);}
.kcal-derived .l{font-size:11px;color:var(--muted);font-weight:600;}

.match-result-card{
  background:var(--surface);border:none;border-radius:var(--radius-l);
  padding:18px;display:flex;gap:14px;margin-bottom:12px;align-items:center;
  box-shadow:0 2px 14px rgba(36,37,42,.05);
}
.match-result-card.top{border:none;background:var(--accent-dim);}
.mr-thumb{width:64px;height:64px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:28px;}
.mr-body{flex:1;min-width:0;}
.mr-top{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.mr-name{font-size:14.5px;font-weight:700;color:var(--ink);}
/* Configurazione calcolata dal Match (grammature/topping della crema di riso, taglia della pasta...) */
.mr-config{margin-top:4px;font-size:11.5px;font-weight:600;line-height:1.35;color:var(--accent);}
.mr-macros{display:flex;gap:10px;margin-top:6px;font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);}
.mr-ctas{display:flex;gap:8px;margin-top:10px;}

/* ---------- Cart ---------- */
.cart-item{display:flex;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);}
.cart-item .thumb{flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:24px;}
.cart-item .info{flex:1;min-width:0;}
.cart-item .nm{color:var(--ink);}
.cart-item .gm{font-family:'Inter',sans-serif;color:var(--muted);margin-top:2px;}
.cart-item .macros{font-family:'Inter',sans-serif;}
.cart-item .right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;}

.totals-card{background:var(--surface);border:none;border-radius:var(--radius-l);padding:20px;margin-top:18px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.nutri-panel{background:var(--surface);border-radius:var(--radius-l);padding:20px;margin-top:18px;box-shadow:0 2px 16px rgba(36,37,42,.07);}
.np-label{font-size:11.5px;font-weight:800;color:var(--muted);}
.np-items{font-size:12px;color:var(--muted);margin-top:4px;}

.empty-state{
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:60px 20px;color:var(--muted);
  gap:14px;
}

/* ---------- Checkout ---------- */
.seg-control{display:flex;background:var(--surface-2);border-radius:100px;padding:4px;margin-top:8px;}
.seg-btn{flex:1;text-align:center;padding:10px;border-radius:100px;font-size:13px;font-weight:700;color:var(--muted);}
.field-group{margin-top:20px;}
.field-group label{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px;display:block;}
.text-input{width:100%;background:var(--surface-2);border:1.5px solid transparent;border-radius:14px;padding:14px 16px;font-size:14px;color:var(--ink);outline:none;}
.pay-option{display:flex;align-items:center;gap:12px;background:var(--surface);border:none;border-radius:14px;padding:14px 16px;margin-bottom:8px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.pay-option .radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-strong);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.pay-option.active .radio{border-color:var(--accent);}
.pay-option.active .radio::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--accent);}
.order-line{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;color:var(--muted);}
.order-line b{color:var(--ink);}

.confirm-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 0 40px;}
/* Card di apertura con lo stesso gradiente usato altrove nell'app (banner fedeltà, hero degli
   alimenti): molto più d'impatto del semplice cerchio su sfondo bianco di prima. */
.confirm-hero{width:100%;position:relative;overflow:hidden;background:var(--grad-blue);box-shadow:0 18px 34px -16px var(--glow-blue);
  border-radius:var(--radius-l);padding:36px 20px 30px;display:flex;flex-direction:column;align-items:center;color:#fff;}
.confirm-hero::before{content:'';position:absolute;right:-60px;top:-60px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.1);pointer-events:none;}
.confirm-hero::after{content:'';position:absolute;left:-50px;bottom:-55px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none;}
.confirm-hero > *{position:relative;z-index:1;}
.confirm-hero h2{color:#fff;}
.confirm-hero p{color:rgba(255,255,255,.92)!important;}
.confirm-check{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:22px;background:rgba(255,255,255,.2);}
.confirm-check svg{width:36px;height:36px;stroke:#fff;}
.order-num{font-family:'Inter',sans-serif;color:#fff;opacity:.85;font-size:14px;margin-top:6px;font-weight:700;}
.confirm-points{margin-top:14px;background:rgba(255,255,255,.22);color:#fff;font-weight:800;font-size:13px;padding:9px 18px;border-radius:100px;}

/* ---------- Tracking ordine ---------- */
.order-tracker{width:100%;margin-top:28px;text-align:left;background:var(--surface);border-radius:var(--radius-l);
  padding:18px 18px 6px;box-shadow:0 2px 14px rgba(36,37,42,.06);}
.ot-step{display:flex;align-items:flex-start;gap:12px;padding-bottom:22px;position:relative;}
.ot-step:not(:last-child)::before{content:'';position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--line-strong);transition:background-color .6s ease;}
.ot-step.done:not(:last-child)::before{background:var(--accent);}
.ot-dot{width:24px;height:24px;border-radius:50%;background:var(--line-strong);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;z-index:1;position:relative;transition:background-color .5s ease;}
.ot-dot svg{width:13px;height:13px;stroke:#fff;}
.ot-step.done .ot-dot{background:var(--accent);}
.ot-step.current .ot-dot{background:var(--accent);}
/* "Lampeggia": la fase in corso ha un anello che pulsa verso l'esterno in loop — si riconosce a
   colpo d'occhio quale fase è attiva ORA, non solo qual è stata raggiunta. */
.ot-step.current .ot-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--accent);animation:otPulse 1.6s ease-out infinite;}
@keyframes otPulse{0%{transform:scale(.8);opacity:.9;}100%{transform:scale(1.7);opacity:0;}}
@media (prefers-reduced-motion: reduce){.ot-step.current .ot-dot::after{animation:none;}}
.ot-body{display:flex;flex-direction:column;gap:7px;padding-top:2px;}
.ot-label{font-size:13.5px;font-weight:700;color:var(--muted);}
.ot-step.done .ot-label,.ot-step.current .ot-label{color:var(--ink);}
/* Avanzamento dentro la fase in corso, aggiornato ad ogni giro del poll (router.js): i pallini
   non scattano solo da una fase all'altra, si vede il tempo che passa dentro quella attuale. */
.ot-progress{display:block;width:130px;max-width:55vw;height:4px;border-radius:2px;background:var(--line-strong);overflow:hidden;}
.ot-progress i{display:block;height:100%;background:var(--accent);border-radius:2px;transition:width 1s linear;}
.ot-body{flex:1;min-width:0;}

/* ---------- Scena animata a lato della fase in corso ----------
   Solo la fase attiva ne ha una (le altre righe restano compatte, un pallino e un'etichetta,
   come chiesto: "lasciando statiche le icone degli step già completati"). */
.ot-anim{flex-shrink:0;align-self:center;width:64px;height:64px;display:flex;align-items:center;justify-content:center;}
.ot-anim svg{display:block;overflow:visible;}
@media (max-width:380px){.ot-anim{width:52px;height:52px;}}

/* Ordine ricevuto: lo scontrino esce dal POS con un rimbalzo, una volta sola (non è un'attesa,
   è una conferma già avvenuta). */
.ot-ticket{transform:translateY(34px);transform-origin:36px 38px;animation:otTicketOut .85s ease-out .2s both;}
@keyframes otTicketOut{0%{transform:translateY(34px);}60%{transform:translateY(-5px);}78%{transform:translateY(2px);}90%{transform:translateY(-1px);}100%{transform:translateY(0);}}

/* In preparazione: tre atti sulla stessa scena, in loop continuo di 8s —
   1) la bilancia pesa (i cubetti cadono, il display si accende)
   2) si inclina e versa
   3) il wok sfrigola sul fuoco, con vapore che sale, finché il ciclo non ricomincia. */
.ot-scale{animation:otScalePhase 8s ease-in-out infinite;transform-origin:36px 46px;}
@keyframes otScalePhase{
  0%,33%{opacity:1;transform:rotate(0deg);}
  38%{opacity:1;transform:rotate(-16deg);}
  45%,96%{opacity:0;transform:rotate(-16deg);}
  100%{opacity:1;transform:rotate(0deg);}
}
.ot-scale-led{animation:otLed 8s step-end infinite;}
@keyframes otLed{0%,18%{opacity:.35;}22%,36%{opacity:1;}37%,100%{opacity:.35;}}
.ot-cube-a,.ot-cube-b{animation:otCubesPhase 8s ease-in infinite;}
@keyframes otCubesPhase{
  0%{opacity:1;transform:translateY(0);}
  16%{opacity:1;transform:translateY(30px);}
  20%{opacity:1;transform:translateY(27px);}
  26%,100%{opacity:0;transform:translateY(30px);}
}
.ot-cube-b{animation-delay:.15s;}
.ot-pan{animation:otPanPhase 8s ease-in-out infinite;}
@keyframes otPanPhase{
  0%,38%{opacity:0;transform:translateY(6px);}
  46%,96%{opacity:1;transform:translateY(0);}
  100%{opacity:0;transform:translateY(6px);}
}
.ot-flames path{animation:otFlame .55s ease-in-out infinite alternate;transform-origin:bottom center;}
.ot-flames path:last-child{animation-delay:.2s;}
@keyframes otFlame{0%{transform:scaleY(1);}100%{transform:scaleY(.78);}}
.ot-sizzle circle{animation:otSizzle .45s ease-in-out infinite alternate;}
.ot-sizzle circle:nth-child(2){animation-delay:.1s;}
.ot-sizzle circle:nth-child(3){animation-delay:.2s;}
.ot-sizzle circle:nth-child(4){animation-delay:.3s;}
@keyframes otSizzle{0%{transform:translateY(0);}100%{transform:translateY(-2.4px);}}
.ot-steam-a,.ot-steam-b,.ot-steam-c{animation:otSteamRise 1.8s ease-in-out infinite;transform-origin:bottom center;}
.ot-steam-b{animation-delay:.3s;}
.ot-steam-c{animation-delay:.6s;}
@keyframes otSteamRise{0%{opacity:0;transform:translateY(4px) scaleY(.7);}40%{opacity:.8;}100%{opacity:0;transform:translateY(-7px) scaleY(1.1);}}
@media (prefers-reduced-motion: reduce){.ot-scale,.ot-scale-led,.ot-cube-a,.ot-cube-b,.ot-pan,.ot-flames path,.ot-sizzle circle,.ot-steam-a,.ot-steam-b,.ot-steam-c{animation:none;}.ot-cube-a,.ot-cube-b{opacity:0;}.ot-pan{opacity:1;}.ot-scale{opacity:0;}}

/* In consegna: un piccolo scooter avanza lungo un tratteggio — indicazione a colpo d'occhio,
   il percorso vero con le strade è nella card della mappa qui sotto. */
.ot-onway-path{animation:otDashFlow 1s linear infinite;}
@keyframes otDashFlow{to{stroke-dashoffset:-18;}}
.ot-scooter{animation:otScooterMove 2.6s ease-in-out infinite;}
@keyframes otScooterMove{
  0%{transform:translate(6px,42px);opacity:0;}
  8%{opacity:1;}
  50%{transform:translate(30px,26px);opacity:1;}
  92%{opacity:1;}
  100%{transform:translate(54px,42px);opacity:0;}
}
@media (prefers-reduced-motion: reduce){.ot-onway-path,.ot-scooter{animation:none;}.ot-scooter{opacity:1;transform:translate(30px,26px);}}

/* Consegnato: il pacchetto passa di mano, coriandoli in festa — una volta sola, è un traguardo
   raggiunto, non un'attesa: niente loop infinito qui. */
.ot-package{transform:translateX(-16px);animation:otPkgPass 1s cubic-bezier(.34,1.15,.4,1) .1s both;}
@keyframes otPkgPass{0%{transform:translateX(-16px);}100%{transform:translateX(0);}}
.ot-hand-l{animation:otHandL .5s ease-out .1s both;}
@keyframes otHandL{0%{transform:translateX(0);}100%{transform:translateX(4px);}}
.ot-hand-r{animation:otHandR .5s ease-out .5s both;}
@keyframes otHandR{0%{transform:translateX(0);}100%{transform:translateX(-4px);}}
.ot-confetti rect,.ot-confetti circle{opacity:0;}
.ot-confetti *:nth-child(odd){animation:otConfettiL 1.1s ease-out .35s both;}
.ot-confetti *:nth-child(even){animation:otConfettiR 1.1s ease-out .45s both;}
@keyframes otConfettiL{0%{opacity:0;transform:scale(.3) translate(0,0);}30%{opacity:1;}100%{opacity:0;transform:scale(1) translate(-7px,18px) rotate(-90deg);}}
@keyframes otConfettiR{0%{opacity:0;transform:scale(.3) translate(0,0);}30%{opacity:1;}100%{opacity:0;transform:scale(1) translate(7px,18px) rotate(90deg);}}
@media (prefers-reduced-motion: reduce){.ot-package,.ot-hand-l,.ot-hand-r{animation:none;}.ot-package{transform:none;}.ot-confetti *{animation:none;opacity:0;}}

/* Card del rider + mappa live (solo delivery, fase "in consegna") */
.delivery-rider-card{width:100%;margin-top:14px;background:var(--surface);border-radius:var(--radius-l);
  padding:16px;box-shadow:0 2px 14px rgba(36,37,42,.06);}
.drc-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.drc-avatar{width:44px;height:44px;border-radius:50%;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.drc-name{font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;}
.drc-eta{font-size:12.5px;color:var(--accent);font-weight:700;margin-top:2px;}
/* Quando il rider è vicino, l'ETA (già "In consegna" nel passo qui sopra) pulsa piano invece di
   introdurre una fase in più: stesso sobrio "quasi arrivato" senza aggiungere allarmismo */
.dmap-close .drc-eta{animation:drcPulse 1.4s ease-in-out infinite;}
@keyframes drcPulse{0%,100%{opacity:1;}50%{opacity:.55;}}
@media (prefers-reduced-motion: reduce){.dmap-close .drc-eta{animation:none;}}
/* isolation: i livelli di Leaflet hanno z-index 400-1000; senza un contesto proprio la mappa passava
   sopra la barra di navigazione (z-index 50) e la barra in alto mentre si scorre */
.delivery-map{position:relative;isolation:isolate;z-index:0;border-radius:var(--radius-m);overflow:hidden;background:var(--surface-2);}
.delivery-map-canvas{width:100%;height:220px;}
.dmap-pin{display:block;width:14px;height:14px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 1px 6px rgba(0,0,0,.35);}
.dmap-rider{display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:20px;background:var(--surface);border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.25);}
/* Etichette "MACRO'S"/"Casa tua" sui due capolinea della mappa — altrimenti sono solo due
   puntini indistinguibili, il punto della richiesta era proprio vedere chiaramente partenza e
   arrivo. */
.leaflet-tooltip.dmap-tooltip{background:var(--ink);color:#fff;border:none;border-radius:8px;font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;padding:4px 9px;box-shadow:0 2px 8px rgba(0,0,0,.3);}
.leaflet-tooltip.dmap-tooltip::before{border-top-color:var(--ink)!important;}

/* ---------- Barra ordine attivo (persistente sopra la nav, come Deliveroo/Glovo) ---------- */
#order-tracker-bar{position:fixed;left:0;right:0;z-index:49;display:none;justify-content:center;padding:0 20px;}
/* Card ordine attivo (renderOrderTrackerBar in chrome.js): scura, con anello e segmenti live */
.otb-card{width:100%;max-width:640px;display:flex;align-items:center;gap:4px;text-align:left;
  background:linear-gradient(135deg, #2A2C33, #1B1C21);color:#fff;border-radius:22px;padding:10px 6px 10px 10px;
  box-shadow:0 16px 32px -14px rgba(20,22,30,.5), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;}
/* Si vede che è cliccabile: al passaggio del mouse sulla parte che apre il tracking la card si
   solleva un poco, si schiarisce e l'ombra cresce; al tocco/clic si "preme" (utile anche su telefono,
   dove l'hover non esiste). La freccia per ridurla ha il suo hover a parte. */
.otb-main{cursor:pointer;}
@media (hover:hover){
  .otb-card:has(.otb-main:hover){transform:translateY(-2px);background:linear-gradient(135deg, #34363E, #22232A);
    box-shadow:0 20px 36px -14px rgba(20,22,30,.6), inset 0 1px 0 rgba(255,255,255,.12);}
  .otb-bubble:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 18px 32px -12px rgba(20,22,30,.65), inset 0 1px 0 rgba(255,255,255,.12);}
}
.otb-card:has(.otb-main:active){transform:scale(.98);}
.otb-bubble:active{transform:scale(.94);}
.otb-enter{animation:otbIn .35s cubic-bezier(.2,.8,.3,1);}
@keyframes otbIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.otb-ic{position:relative;width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.otb-ring{position:absolute;inset:0;width:48px;height:48px;}
.otb-ring circle{fill:none;stroke-width:3.5;}
.otb-ring-track{stroke:rgba(255,255,255,.12);}
.otb-ring-fill{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 1s linear;}
.otb-emoji{font-size:20px;line-height:1;position:relative;}
.otb-emoji svg{display:block;width:21px;height:21px;}
.otb-pop{animation:otbPop .5s ease-out;}
@keyframes otbPop{0%{transform:scale(.4);opacity:0;}60%{transform:scale(1.15);opacity:1;}100%{transform:scale(1);}}
.otb-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.otb-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.otb-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px;min-width:0;}
/* il taglio con "…" solo sul testo: sul titolo intero tagliava a metà l'alone del puntino live */
.otb-tx{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.otb-in{animation:otbTitleIn .4s ease-out;}
@keyframes otbTitleIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:none;}}
/* puntino "live": pulsazione lenta e leggera */
.otb-live{width:7px;height:7px;margin-left:4px;border-radius:50%;background:var(--accent);flex-shrink:0;box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);animation:otbLive 2s ease-out infinite;}
@keyframes otbLive{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);}70%,100%{box-shadow:0 0 0 7px transparent;}}
.otb-eta{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;color:rgba(255,255,255,.65);flex-shrink:0;}
.otb-eta b{font-size:15px;font-weight:800;color:#fff;}
.otb-steps{display:flex;gap:4px;}
.otb-seg{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.14);overflow:hidden;position:relative;}
.otb-seg i{display:block;width:100%;height:100%;border-radius:4px;background:var(--accent);
  translate:calc(var(--p,0) * 100% - 100%) 0;transition:translate 1s linear;}   /* scorre invece di allargarsi */
/* segmento in corso: un riflesso che scorre piano, per far capire che sta avanzando */
.otb-seg.cur::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-100%);animation:otbShine 2.2s ease-in-out infinite;}
@keyframes otbShine{to{transform:translateX(100%);}}
.otb-sub{font-family:'Inter',sans-serif;font-size:11px;color:rgba(255,255,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.otb-main{flex:1;min-width:0;display:flex;align-items:center;gap:12px;text-align:left;color:inherit;}
/* Riduci a icona: freccia verso il basso, area di tocco ampia */
.otb-min{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.7);}
.otb-min svg{width:16px;height:16px;transform:rotate(90deg);}
@media (hover:hover){ .otb-min:hover{background:rgba(255,255,255,.1);color:#fff;} }
/* Versione ridotta: solo la bolla con icona della fase + anello verde live, a destra sopra la nav */
#order-tracker-bar.otb-mini-on{pointer-events:none;}
.otb-wrap{width:100%;max-width:640px;display:flex;justify-content:flex-end;}
.otb-bubble{pointer-events:auto;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease;
  background:linear-gradient(135deg, #2A2C33, #1B1C21);color:#fff;box-shadow:0 14px 28px -12px rgba(20,22,30,.55), inset 0 1px 0 rgba(255,255,255,.08);}   /* bianca come nella card: l'icona della fase è a tratto (currentColor) */
.otb-bubble-in{animation:otbBubbleIn .35s cubic-bezier(.2,.8,.3,1.2);}
/* Atterraggio dopo la riduzione: schiacciamento elastico + onda verde che si allarga */
.otb-bubble{position:relative;}
.otb-bubble-land{animation:otbLand .6s cubic-bezier(.3,.7,.3,1);}
@keyframes otbLand{0%{transform:scale(1);}25%{transform:scale(1.16,.84);}50%{transform:scale(.92,1.08);}72%{transform:scale(1.04,.97);}100%{transform:scale(1);}}
.otb-bubble-land::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
  animation:otbRipple .7s ease-out forwards;}
@keyframes otbRipple{from{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent);}to{box-shadow:0 0 0 18px transparent;}}
.otb-bubble-land .otb-ring-fill{animation:otbRingGlow .8s ease-out;}
@keyframes otbRingGlow{0%{filter:drop-shadow(0 0 0 transparent);}40%{filter:drop-shadow(0 0 5px var(--accent));}100%{filter:drop-shadow(0 0 0 transparent);}}
/* durante la trasformazione il clip-path taglia il box-shadow della card: l'ombra la fa il contenitore */
#order-tracker-bar.otb-morphing{filter:drop-shadow(0 12px 18px rgba(20,22,30,.3));}
#order-tracker-bar.otb-morphing .otb-card{box-shadow:none;transition:none;transform:none;}
@keyframes otbBubbleIn{from{opacity:0;transform:scale(.5);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  .otb-enter,.otb-bubble-in,.otb-bubble-land,.otb-bubble-land::after,.otb-bubble-land .otb-ring-fill,.otb-pop,.otb-in,.otb-live,.otb-seg.cur::after{animation:none;}
  .otb-ring-fill,.otb-seg i,.otb-card,.otb-bubble{transition:none;}
}
body.chat-on #order-tracker-bar{display:none;}
body.otb-on #app-shell{padding-bottom:184px;}

/* ---------- Split conto / ordini ricorrenti ---------- */
.split-toggle-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);
  border-radius:16px;padding:14px 16px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.split-stepper{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:12px;}
.split-stepper .qty-value{font-size:16px;min-width:110px;font-weight:800;}
.split-result{text-align:center;margin-top:10px;font-size:13px;color:var(--muted);}
.split-result b{color:var(--ink);font-size:15px;}

/* ---------- Fedeltà / streak / riordino ---------- */

.usual-ic{width:42px;height:42px;border-radius:12px;background:var(--accent-dim);color:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.usual-ic svg{width:19px;height:19px;}

.usual-cta{font-size:12px;font-weight:800;color:var(--accent);background:var(--accent-dim);padding:9px 14px;border-radius:100px;flex-shrink:0;}
/* Interruttori. Lo stato fermo (traccia grigia o verde, pallino bianco) non cambia; js/core/toggles.js aggiunge
   .ts-turn-on / .ts-turn-off solo all'interruttore che l'utente ha appena cambiato.
   Accensione: il pallino si allunga scorrendo e rimbalza, la traccia si riempie con un'onda verde-azzurra che parte
   dal pallino, un anello di luce si allarga e sei scintille nei colori dei macro schizzano fuori. Spegnimento: il
   pallino si schiaccia e torna indietro con un piccolo contraccolpo, la traccia si svuota e un anello grigio svanisce. */
.toggle-switch{position:relative;width:42px;height:25px;border-radius:100px;background:var(--line-strong);flex-shrink:0;}
.toggle-switch.on{background:var(--accent);}
.toggle-switch .ts-knob{position:absolute;z-index:1;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);}
.toggle-switch.on .ts-knob{left:20px;}
.ts-fill{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;}
.ts-fill::before{content:"";position:absolute;left:-19.5px;top:-19.5px;width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,#3DDC97,#3AB7F0);opacity:0;transform:scale(0);}
.toggle-switch::after{content:"";position:absolute;left:28px;top:11px;width:3px;height:3px;border-radius:50%;opacity:0;pointer-events:none;
  box-shadow:9px 0 0 var(--accent),4.5px 7.8px 0 var(--carb),-4.5px 7.8px 0 var(--fat),-9px 0 0 var(--protein),-4.5px -7.8px 0 var(--accent),4.5px -7.8px 0 var(--carb);}
.toggle-switch.ts-turn-on{animation:ts-track-on .62s linear both,ts-ring-on .7s ease-out both;}
.ts-turn-on .ts-knob{animation:ts-knob-on .62s both;}
.ts-turn-on .ts-fill::before{animation:ts-flood .62s cubic-bezier(.2,.7,.2,1) both;}
.toggle-switch.ts-turn-on::after{animation:ts-spark .5s ease-out .26s forwards;}   /* partono quando il pallino arriva; forwards, non both: durante il ritardo restano invisibili */
.toggle-switch.ts-turn-off{animation:ts-track-off .5s ease-out both,ts-ring-off .55s ease-out both;}
.ts-turn-off .ts-knob{animation:ts-knob-off .5s both;}
@keyframes ts-track-on{0%,52%{background:var(--line-strong);}53%,100%{background:var(--accent);}}
@keyframes ts-track-off{0%{background:var(--accent);}100%{background:var(--line-strong);}}
@keyframes ts-ring-on{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent);}100%{box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 0%,transparent);}}
@keyframes ts-ring-off{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--muted) 40%,transparent);}100%{box-shadow:0 0 0 7px color-mix(in srgb,var(--muted) 0%,transparent);}}
@keyframes ts-flood{0%{opacity:1;transform:scale(0);}55%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(1);}}
@keyframes ts-spark{0%{opacity:1;transform:scale(.35);}65%{opacity:1;}100%{opacity:0;transform:scale(1.9);}}
@keyframes ts-knob-on{
  0%{transform:translateX(-17px) scale(1,1);animation-timing-function:cubic-bezier(.3,0,.2,1);}
  30%{transform:translateX(-5px) scale(1.32,.86);animation-timing-function:cubic-bezier(.2,.8,.3,1);}
  58%{transform:translateX(3px) scale(.88,1.1);animation-timing-function:ease-in-out;}
  78%{transform:translateX(-1px) scale(1.04,.98);animation-timing-function:ease-out;}
  100%{transform:translateX(0) scale(1,1);}
}
@keyframes ts-knob-off{
  0%{transform:translateX(17px) scale(1,1);animation-timing-function:cubic-bezier(.3,0,.2,1);}
  30%{transform:translateX(5px) scale(1.28,.88);animation-timing-function:cubic-bezier(.2,.8,.3,1);}
  58%{transform:translateX(-2px) scale(.9,1.08);animation-timing-function:ease-in-out;}
  80%{transform:translateX(.5px) scale(1.03,.99);animation-timing-function:ease-out;}
  100%{transform:translateX(0) scale(1,1);}
}
@media (prefers-reduced-motion: reduce){
  .toggle-switch.ts-turn-on,.toggle-switch.ts-turn-off,.ts-turn-on .ts-knob,.ts-turn-off .ts-knob,
  .ts-turn-on .ts-fill::before,.toggle-switch.ts-turn-on::after{animation:none;}
}
.diary-train-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);
  border-radius:16px;padding:14px 16px;margin-top:14px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.dtr-body{flex:1;min-width:0;display:block;}
.dtr-title{display:block;}
.dtr-sub{display:block;font-size:11px;color:var(--muted);margin-top:2px;}
.challenge-card{background:var(--surface);border-radius:16px;padding:14px 16px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.chal-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;}
.chal-title{font-size:13px;font-weight:800;line-height:1.35;}
.chal-reward{font-size:11px;font-weight:800;color:var(--accent);background:var(--accent-dim);padding:4px 9px;border-radius:100px;flex-shrink:0;}
.chal-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:9px;}
.chal-progress{font-size:11.5px;font-weight:700;color:var(--muted);}
.chal-claimed{display:flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;color:var(--accent);}
.chal-claimed svg{width:14px;height:14px;}
/* ---------- Traguardi (badge permanenti) ----------
   A differenza delle Sfide (settimanali, azzerate ogni settimana), i
   traguardi sono conquiste a vita: una volta sbloccati restano per sempre
   nella collezione, sbiaditi finché non vengono raggiunti. */
.badge-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:14px;}
.badge-tile{background:var(--surface);border-radius:16px;padding:16px 12px;text-align:center;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.badge-tile.locked{opacity:.4;}
.chal-badge{font-size:15px;color:var(--sauce);}
.chal-badge svg{width:15px;height:15px;vertical-align:-2px;}
.badge-ic{width:48px;height:48px;border-radius:50%;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:22px;}
.badge-tile.locked .badge-ic{background:var(--surface-2);filter:grayscale(1);}
.badge-name{font-size:12.5px;font-weight:800;margin-top:10px;line-height:1.3;}
.badge-date{font-size:11px;color:var(--muted);margin-top:4px;}
/* Card di condivisione: locandina scura con i colori del brand, uguale nei due temi (si salva con uno screenshot).
   Le variabili di testo sono ridefinite qui dentro, così anche l'anello dei macro (che usa var(--ink)) resta leggibile. */
.share-card-wrap{display:flex;justify-content:center;margin-top:18px;filter:drop-shadow(0 26px 26px rgba(18,160,98,.26));}
.share-card{--ink:#F4F6F8;--muted:#A5ABB5;--line:rgba(255,255,255,.09);--line-strong:rgba(255,255,255,.15);
  position:relative;isolation:isolate;overflow:hidden;width:100%;max-width:340px;padding:26px 22px 24px;
  display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--ink);border-radius:var(--radius-xl);
  background:radial-gradient(90% 46% at 4% 0%,rgba(18,160,98,.6),transparent 70%),
    radial-gradient(90% 46% at 100% 100%,rgba(22,153,205,.55),transparent 70%),
    linear-gradient(180deg,#151A20,#0E1217);}
.share-card-logo{height:58px;display:flex;justify-content:center;}
.share-card .brand-logo-light{display:none;}
.share-card .brand-logo-dark{display:flex;}
.share-card-ring{position:relative;margin-top:26px;}
.share-card-ring .fr-num{font-size:40px;font-weight:700;}
.share-card-ring .fr-sub{font-size:14px;}
.share-card-ring::before{content:"";position:absolute;inset:-28px;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(61,220,151,.3),rgba(58,183,240,.15) 62%,transparent);}
.share-card-macros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:100%;margin-top:26px;}
.share-card-macros div{display:flex;flex-direction:column;align-items:center;padding:13px 4px 11px;border-radius:16px;
  background:rgba(255,255,255,.07);box-shadow:inset 0 2px 0 var(--k);}
.share-card-macros b{font-family:'Poppins',sans-serif;font-size:21px;font-weight:700;line-height:1.1;}
.share-card-macros small{font-size:12px;font-weight:600;color:var(--muted);margin-left:1px;}
.share-card-macros span{margin-top:5px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--k);}
.share-card-items{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}
.sci-row{position:relative;padding-left:16px;font-size:12.5px;font-weight:600;line-height:1.35;text-align:left;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.sci-row::before{content:"";position:absolute;left:1px;top:.5em;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#3DDC97,#3AB7F0);}
.sci-row.more{color:var(--muted);font-weight:700;}
.sci-row.more::before{background:var(--muted);opacity:.55;}
.share-card-tag{margin-top:20px;font-family:'Poppins',sans-serif;font-weight:600;font-size:13px;letter-spacing:.01em;
  background:linear-gradient(90deg,#4BE3A0,#4CC0F2);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---------- Profile ---------- */

.avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--carb));display:flex;align-items:center;justify-content:center;font-family:'Poppins',sans-serif;font-weight:600;font-size:22px;color:#fff;overflow:hidden;flex-shrink:0;}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}

.goal-current{position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;background:var(--grad-blue);color:#fff;box-shadow:0 16px 30px -18px var(--glow-blue);border-radius:var(--radius-l);padding:16px 18px;}
.gc-ic{width:38px;height:38px;border-radius:12px;background:rgba(255,255,255,.2);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.gc-ic svg{width:18px;height:18px;}
.gc-body{flex:1;min-width:0;}
.gc-name{font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;}
.gc-sub{font-size:11.5px;opacity:.9;margin-top:2px;}
.goal-opts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px;}
.goal-opt{text-align:left;background:var(--surface);border:1.5px solid transparent;border-radius:14px;padding:12px 13px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.goal-opt.active{border-color:var(--accent);background:var(--accent-dim);}
.go-name{display:block;font-size:13px;font-weight:700;}
.go-sub{display:block;font-size:11px;color:var(--muted);margin-top:3px;line-height:1.35;}

.macro-input-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:none;border-radius:14px;padding:14px 16px;margin-bottom:10px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.macro-input-row label{font-size:13px;font-weight:700;color:var(--muted);}
.macro-input-row input{background:none;border:none;outline:none;text-align:right;font-family:'Inter',sans-serif;font-weight:800;font-size:16px;width:70px;color:var(--ink);}
.order-row{background:var(--surface);border:none;margin-bottom:10px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.order-row .top{display:flex;justify-content:space-between;}

/* ---------- Analisi del pasto e suggerimenti ---------- */
.fit-card{border-radius:var(--radius-l);padding:16px 18px;margin-top:12px;}
.fit-head{display:flex;align-items:center;gap:8px;}
.fit-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.fit-tag{font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;}
.fit-desc{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.5;}
.fit-contrib{font-size:11.5px;color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px solid rgba(36,37,42,.08);line-height:1.5;}
.fit-contrib b{color:var(--ink);}
.sugg-card{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border-radius:16px;padding:12px 14px;margin-bottom:8px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.sg-ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sg-body{flex:1;min-width:0;}
.sg-title{font-size:13px;font-weight:800;}
.sg-sub{font-size:11px;color:var(--muted);margin-top:3px;}
.sg-plus{color:var(--accent);flex-shrink:0;display:flex;}
.sg-plus svg{width:18px;height:18px;}

/* ---------- Menu a due livelli ---------- */
.fixed-portion{font-family:'Inter',sans-serif;font-weight:800;font-size:26px;text-align:center;padding:8px 0 4px;}

.fam-card{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--surface);border-radius:var(--radius-m);padding:14px 16px;box-shadow:0 2px 12px rgba(36,37,42,.05);}
.fam-card.chosen{outline:1.5px solid var(--accent);}
.fam-list{display:flex;flex-direction:column;gap:10px;}

.fam-card:active{transform:scale(.98);}
.fm-ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.fm-ic.fm-ic-img img{width:82%;height:82%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.14));}
.fm-body{flex:1;min-width:0;display:block;}
.fm-name{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;}
.fm-count{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;}
.fm-chev{color:var(--muted-2);flex-shrink:0;display:flex;}
.fm-chev svg{width:16px;height:16px;}

.diary-date{display:flex;align-items:center;gap:6px;}
.diary-date svg{width:15px;height:15px;color:var(--muted-2);}
.tracker-grid{display:grid;margin-top:12px;}
.tracker{background:var(--surface);border-radius:var(--radius-l);padding:15px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.tracker-water{background:var(--carb-dim);}
.tracker-steps{background:var(--protein-dim);}
.tk-head{display:flex;align-items:baseline;justify-content:space-between;}
.tk-name{font-size:12px;font-weight:800;color:var(--muted);}
.tk-val{font-family:'Inter',sans-serif;font-weight:800;font-size:16px;}
.tk-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px;}
.tk-sub{font-size:11px;color:var(--muted);font-weight:600;margin-top:9px;line-height:1.3;}
.tk-btn{width:26px;height:26px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tk-btn:disabled{opacity:.35;}
.tk-btn svg{width:12px;height:12px;}
.tk-link{font-size:11px;font-weight:800;color:var(--accent);flex-shrink:0;}
.tk-stepper{display:flex;align-items:center;}
.tk-edit-btn{background:var(--accent-dim);color:var(--accent);}
.weight-tile{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--surface);border-radius:var(--radius-l);padding:15px 17px;margin-top:11px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.wt-ic{width:36px;height:36px;border-radius:12px;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wt-ic svg{width:17px;height:17px;}
.wt-body{flex:1;min-width:0;display:block;}
.wt-name{display:block;font-size:14px;font-weight:700;}
.wt-sub{display:block;font-size:11px;color:var(--muted);margin-top:2px;}
.day-row{display:block;width:100%;text-align:left;background:var(--surface);border:1.5px solid transparent;border-radius:var(--radius-l);padding:15px 17px;margin-bottom:10px;box-shadow:0 2px 12px rgba(36,37,42,.05);}
.day-row.current{border-color:var(--accent);}
.dr-top{display:flex;align-items:baseline;justify-content:space-between;}
.dr-date{font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;}
.dr-kcal{font-family:'Inter',sans-serif;font-weight:800;font-size:14px;}
.dr-kcal small{font-size:11px;color:var(--muted);font-weight:600;}
.dr-meta{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);font-weight:600;}
.dr-meals{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);}
.dr-meal{display:flex;align-items:baseline;gap:8px;padding:3px 0;}
.drm-name{font-size:11px;font-weight:800;color:var(--accent);min-width:62px;flex-shrink:0;}
.drm-items{flex:1;min-width:0;font-size:11.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.drm-kcal{font-family:'Inter',sans-serif;font-size:11px;font-weight:800;color:var(--muted);flex-shrink:0;}
.dr-empty{margin-top:11px;padding-top:11px;border-top:1px solid var(--line);font-size:11px;color:var(--muted-2);}
.swatch-block{background:var(--surface);border-radius:var(--radius-l);padding:18px;margin-top:16px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.sw-label{font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;color:var(--ink);}
.sw-value{color:var(--muted);font-weight:500;}
.flavor-grid{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:8px;margin-top:14px;}
.flavor-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 4px 10px;
  border:none;border-radius:16px;background:var(--surface-2);color:var(--ink);
  font-family:'Poppins',sans-serif;font-weight:600;font-size:11px;line-height:1.15;text-align:center;
  transition:transform .12s ease, box-shadow .2s ease, background-color .2s ease;
}
.flavor-card:active{transform:scale(.96);}
.fl-dot{
  position:relative;width:38px;height:38px;border-radius:50%;
  background:var(--sw);   /* ripiego: browser senza color-mix (Safari/iOS < 16.2), il colore del gusto resta */
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb,var(--sw) 45%,#fff) 0, var(--sw) 58%, color-mix(in srgb,var(--sw) 78%,#000) 100%);
  box-shadow:inset 0 0 0 1px rgba(36,37,42,.1), 0 7px 10px -6px color-mix(in srgb,var(--sw) 75%,#000);
}
.fl-dot::after{content:'';position:absolute;left:20%;top:15%;width:34%;height:22%;border-radius:50%;background:rgba(255,255,255,.55);transform:rotate(-30deg);}
.fl-name{position:relative;}
.flavor-card.active{background:color-mix(in srgb,var(--sw) 16%,var(--surface));box-shadow:0 0 0 2px var(--sw);}
.flavor-card.active::after{
  content:'';position:absolute;top:6px;right:6px;width:16px;height:16px;border-radius:50%;
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center/10px no-repeat;
}
@media (hover:hover){.flavor-card:not(.active):hover{background:var(--surface-3);}}
.sw-sub{font-size:11.5px;color:var(--muted);margin-top:16px;}
/* yogurt e crema di riso: richiamo al menu Frutta sotto i topping */
.fruit-link{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--fruit-dim, var(--surface-2));color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.4;}
.ab-seg.ab-seg-wrap{flex-wrap:wrap;}
.ab-seg.ab-seg-wrap .ab-opt{flex:1 1 calc(33.33% - 8px);min-width:0;}
.qty-raw{font-weight:600;color:var(--muted);text-transform:none;}
.fruit-link.nuts-link{margin-top:8px;background:var(--fat-dim);}
/* grammatura del topping sotto il suo gruppo: si apre scendendo (righe della griglia 0fr→1fr) e sfumando */
.topping-qty{display:grid;grid-template-rows:1fr;margin-top:12px;}
.tq-inner{overflow:hidden;min-height:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;border-radius:16px;background:var(--surface-2);}
.tq-label{font-size:12px;font-weight:700;color:var(--muted);}
.topping-qty.tq-in{animation:tqOpen .34s cubic-bezier(.2,.8,.2,1) both;}
.topping-qty.tq-in .tq-inner{animation:tqFade .34s cubic-bezier(.2,.8,.2,1) both;}
@keyframes tqOpen{from{grid-template-rows:0fr;margin-top:0;}to{grid-template-rows:1fr;margin-top:12px;}}
@keyframes tqFade{from{opacity:0;transform:translateY(-8px) scale(.97);}to{opacity:1;transform:none;}}
.topping-qty.tq-out{animation:tqOpen .26s cubic-bezier(.4,0,.6,1) reverse both;pointer-events:none;}
.topping-qty.tq-out .tq-inner{animation:tqFade .26s cubic-bezier(.4,0,.6,1) reverse both;}
@media (prefers-reduced-motion: reduce){.topping-qty.tq-in,.topping-qty.tq-in .tq-inner,.topping-qty.tq-out,.topping-qty.tq-out .tq-inner{animation:none;}}
/* gusti con foto (Monster): righe da 4 che si allargano per riempire tutto il riquadro (7 gusti = 4 + 3) */
.fl-icon{width:46px;height:46px;object-fit:contain;display:block;filter:drop-shadow(0 4px 5px rgba(36,37,42,.16));}
.flavor-grid.has-pics .flavor-card{min-width:0;padding:10px 4px 10px;}
/* coppetta del gelato (gelatoSizesHtml): la stessa coppa in tre misure */
.cup-grid .flavor-card{padding:10px 4px 12px;gap:2px;}
.cup-pic{height:64px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:4px;}
.cup-pic img{width:calc(76px * var(--cup-s,1));height:auto;display:block;filter:drop-shadow(0 5px 5px rgba(36,37,42,.18));}
.cup-g{font-size:10.5px;color:var(--muted);font-weight:500;}
.cup-price{font-size:12.5px;font-weight:800;color:var(--accent);margin-top:2px;}
.fl-pic{width:100%;height:92px;object-fit:contain;display:block;filter:drop-shadow(0 6px 6px rgba(36,37,42,.18));}
.flavor-grid.has-pics .fl-name{font-size:10.5px;}

/* ---------- Carrello: porzioni e rimozione ---------- */
.qty-row{display:flex;align-items:center;gap:8px;margin-top:9px;}
.qty-mini{width:26px;height:26px;border-radius:8px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.qty-mini:disabled{opacity:.35;}
.qty-mini svg{width:12px;height:12px;}
.qty-n{font-family:'Inter',sans-serif;font-weight:800;font-size:14px;min-width:18px;text-align:center;}
.remove-line{display:flex;align-items:center;justify-content:flex-end;gap:5px;width:100%;
  font-size:11.5px;font-weight:700;color:var(--danger);margin-top:6px;padding:4px 0;}
.remove-line svg{width:13px;height:13px;}
.pr-unit{font-size:11px;color:var(--muted);font-weight:600;}

/* ---------- Match: campo numerico e composizioni ---------- */
.mf-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
.mf-num{display:flex;align-items:baseline;gap:3px;}
.mf-num input{width:44px;background:none;border:none;outline:none;text-align:right;font-family:'Inter',sans-serif;font-weight:800;}
.mf-num span{font-size:12px;color:var(--muted);font-weight:700;}
.cm-card{background:var(--surface);border-radius:var(--radius-l);padding:16px;margin-bottom:12px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.cm-card.best{background:var(--accent-dim);}
.cm-badge{font-size:11px;font-weight:800;color:#fff;background:var(--accent);padding:4px 10px;border-radius:100px;}

.menu-hint svg{width:13px;height:13px;vertical-align:-2px;}

.swap-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border:1.5px solid transparent;border-radius:16px;padding:13px 15px;margin-bottom:9px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.swap-row.current{border-color:var(--accent);background:var(--accent-dim);}
/* Match: obiettivo di ogni categoria ben visibile, nel colore del macro */
.mm-goal{display:inline-flex;align-items:baseline;gap:6px;padding:6px 13px;border-radius:999px;color:#fff;background:var(--mc);box-shadow:0 8px 16px -10px var(--mc);white-space:nowrap;}
.mm-goal small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;opacity:.9;}
.mm-goal b{font-family:'Inter',sans-serif;font-size:18px;font-weight:800;line-height:1;}
/* Match: famiglie a tendina (Riso, Pasta, Pollo…) */
.match-fam .mf-chev{flex-shrink:0;display:flex;color:var(--muted);transition:transform .2s;transform:rotate(90deg);}
.match-fam .mf-chev svg{width:18px;height:18px;}
.match-fam.open .mf-chev{transform:rotate(-90deg);}
.match-fam.has-pick{border-color:color-mix(in srgb, var(--accent) 45%, transparent);}
.match-opt{margin:-2px 0 10px;}
.match-opt .addon-block,.match-opt .swatch-block{margin-top:0;}
.match-fam-list{margin:-3px 0 12px 14px;padding-left:10px;border-left:2px solid var(--line);}
.swap-row.disabled,.swap-row:disabled{opacity:.4;filter:grayscale(.4);cursor:not-allowed;pointer-events:none;box-shadow:none;}
.sr-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sr-ic.sr-ic-img{overflow:hidden;}
.sr-ic.sr-ic-img img{width:88%;height:88%;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.14));}   /* foto vere al posto delle vecchie icone (Match) */
.sr-body{flex:1;min-width:0;display:block;}
.sr-name{display:block;font-size:13.5px;font-weight:700;}
.sr-meta{display:block;font-size:11px;color:var(--muted);margin-top:3px;}
.sr-right{text-align:right;flex-shrink:0;}
.sr-g{display:block;font-family:'Inter',sans-serif;font-weight:800;font-size:14px;}
.sr-match{display:block;font-size:11px;font-weight:800;color:var(--accent);margin-top:2px;}
.cm-totals{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}
.cm-totals b{display:block;font-family:'Inter',sans-serif;font-weight:800;font-size:13.5px;}
.cm-totals span{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-top:2px;}

/* ---------- Servizi: Weekly Box e consulenza ---------- */
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-top:10px;}
.svc-card{display:flex;flex-direction:column;text-align:left;border-radius:var(--radius-l);
  padding:16px;min-height:158px;color:#fff;position:relative;overflow:hidden;transition:transform .12s ease;}
.svc-card:active{transform:scale(.97);}
.svc-card.box,.svc-card.coach,.svc-card.build,.svc-card.match{min-height:172px;}
.svc-card.box,.svc-card.build{background:var(--grad-green);box-shadow:0 16px 30px -18px var(--glow-green);}
.svc-card.coach,.svc-card.match{background:var(--grad-blue);box-shadow:0 16px 30px -18px var(--glow-blue);}
.svc-card.box .svc-sub,.svc-card.coach .svc-sub,.svc-card.build .svc-sub,.svc-card.match .svc-sub{padding-right:34px;}
.svc-card>.svc-go{position:absolute;right:14px;bottom:14px;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;transition:transform .2s ease,background-color .2s ease;}
.svc-go svg{width:15px;height:15px;stroke:#fff;}
@media (hover:hover){.svc-card:hover .svc-go{transform:translateX(2px);background:rgba(255,255,255,.32);}}
.svc-card.supplements{background:linear-gradient(150deg,#5B3E96 0%,#8B6FD9 55%,#C4B3F2 100%);}
/* Due card dell'hero (Home): stesso componente di .svc-card (Weekly Box /
   Consulenza) ma nel riquadro colorato in cima, non nel profilo — quindi
   niente stato dinamico in alto a destra, solo icona + nome + sottotitolo. */
.hero .svc-grid{margin-top:20px;}
.svc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:auto;}
/* card della Home (Crea il tuo pasto / Match): il testo segue subito l'icona invece di finire in fondo;
   le due card restano alte uguali e la freccia resta nell'angolo in basso */
.svc-card.build .svc-top,.svc-card.match .svc-top{margin-bottom:0;}
.svc-ic{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.svc-ic svg{width:17px;height:17px;}
.svc-state{font-size:11px;font-weight:800;background:rgba(255,255,255,.9);color:var(--ink);
  padding:3px 8px;border-radius:100px;white-space:nowrap;}
.svc-state.new{background:rgba(255,255,255,.25);color:#fff;}
.svc-name{font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;line-height:1.2;margin-top:14px;}
.svc-sub{font-size:11px;opacity:.85;margin-top:6px;line-height:1.4;}

/* ---------- Abbonamento ---------- */

.sh-badge{display:inline-block;font-size:11px;font-weight:800;color:var(--accent);background:rgba(255,255,255,.7);padding:5px 12px;border-radius:100px;}

.sub-steps{display:flex;gap:6px;margin-top:18px;}
.ss-dot{flex:1;height:4px;border-radius:2px;background:var(--surface-3);}
.ss-dot.on{background:var(--accent);}
.sub-steplbl{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:10px;}
.plan-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);border:1.5px solid transparent;border-radius:var(--radius-l);padding:18px;margin-bottom:11px;box-shadow:0 2px 12px rgba(36,37,42,.05);}
.plan-card.active{border-color:var(--accent);background:var(--accent-dim);}
.pc-reco{display:inline-block;font-size:11px;font-weight:800;color:var(--on-ink);background:var(--ink);padding:3px 10px;border-radius:100px;margin-bottom:7px;}
.macro-alert{background:var(--protein-dim);border-radius:var(--radius-l);padding:16px;margin-top:12px;}
.ma-title{font-size:14px;font-weight:800;}
.ma-sub{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.45;}
.ma-acts{display:flex;gap:8px;margin-top:12px;}
.pause-count{font-size:11.5px;color:var(--muted);margin-top:10px;text-align:center;}
.pause-count b{color:var(--ink);}
.lp-dates{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--muted);margin-top:8px;}
.lp-dates b{color:var(--ink);}
.lp-note{font-size:11px;color:var(--muted-2);margin-top:9px;line-height:1.45;}
.pc-left{flex:1;min-width:0;}
.pc-name{font-family:'Poppins',sans-serif;font-weight:600;font-size:17px;}
.pc-sub{font-size:11.5px;color:var(--muted);margin-top:3px;}
.pc-right{text-align:right;flex-shrink:0;}
.pc-price{font-family:'Inter',sans-serif;font-weight:800;font-size:17px;}
.pc-week{font-size:11px;color:var(--muted);font-weight:600;}
.pc-save{display:inline-block;margin-top:5px;font-size:11px;font-weight:800;color:#fff;background:var(--accent);padding:3px 8px;border-radius:100px;}
.week-summary{background:var(--surface);border-radius:var(--radius-l);padding:18px;margin-top:14px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.ws-top{display:flex;align-items:flex-start;justify-content:space-between;}
.ws-big{font-family:'Inter',sans-serif;font-weight:800;font-size:20px;}
.ws-lbl{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px;}
.sub-modes{display:flex;gap:9px;margin-top:14px;}
.sub-modes .btn{font-size:13px;padding:12px 14px;}
.sub-modes svg{width:15px;height:15px;}
.sub-week{margin-top:16px;}
.sub-day{margin-bottom:14px;}
.sd-name{font-size:12px;font-weight:800;color:var(--muted);margin-bottom:7px;}
.sd-slot{display:block;width:100%;text-align:left;background:var(--surface);border:1.5px dashed var(--line-strong);border-radius:16px;padding:12px 14px;margin-bottom:8px;}
.sd-slot.filled{border-style:solid;border-color:transparent;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.sd-main{display:block;min-width:0;flex:1;}
.sd-slot.editing{display:flex;align-items:center;gap:12px;border-style:solid;border-color:var(--accent);cursor:pointer;}
.sd-edit-ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;animation:sdPop .28s ease-out both;}
.sd-edit-ic svg{width:16px;height:16px;}
@keyframes sdPop{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
@media (prefers-reduced-motion: reduce){.sd-edit-ic{animation:none;}}
.sds-label{display:block;font-size:11px;font-weight:800;color:var(--accent);}
.sds-name{display:block;font-size:14px;font-weight:700;margin-top:3px;}
.sds-macros{display:block;font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);margin-top:3px;}
.pick-meal{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border-radius:16px;padding:13px 15px;margin-bottom:9px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.pm-ic{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pm-body{flex:1;min-width:0;display:block;}
.pm-name{display:block;font-size:14px;font-weight:700;}
.pm-macros{display:block;font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);margin-top:3px;}
.pm-score{font-family:'Inter',sans-serif;font-weight:800;font-size:13px;color:var(--accent);flex-shrink:0;}
.slot-row{display:flex;gap:8px;flex-wrap:wrap;}
.slot-chip{padding:11px 15px;border-radius:100px;background:var(--surface);font-size:12.5px;font-weight:700;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.slot-chip.active{background:var(--ink);color:var(--on-ink);}
.sub-recap{background:var(--surface);border-radius:var(--radius-l);padding:18px;margin-top:20px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.sr-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding:5px 0;}
.sr-row.saved b{color:var(--accent);}
.sr-row.total{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-size:15px;color:var(--ink);font-weight:700;}
.sub-status{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;background:var(--grad-green);color:#fff;box-shadow:0 16px 30px -18px var(--glow-green);border-radius:var(--radius-l);padding:16px 18px;margin-top:16px;}
.sub-status.paused{background:var(--grad-amber);box-shadow:0 16px 30px -18px var(--glow-amber);}
.sub-status::after,.goal-current::after,.onb-preview::after{content:'';position:absolute;right:-34px;top:-44px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none;}
.sub-status>*,.goal-current>*,.onb-preview>*{position:relative;z-index:1;}
.st-left{flex:1;min-width:0;}
.st-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;}
.st-sub{font-size:11.5px;opacity:.9;margin-top:3px;}
.st-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.st-dot.on,.st-dot.off{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.28);}
.cutoff-card{position:relative;overflow:hidden;background:var(--grad-green);color:#fff;border-radius:var(--radius-l);padding:18px;margin-top:12px;box-shadow:0 16px 30px -18px var(--glow-green);}
.cutoff-card.soon{background:var(--grad-amber);box-shadow:0 16px 30px -18px var(--glow-amber);}
.cutoff-card.urgent{background:linear-gradient(135deg,#c73a2b 0%,#9e2418 100%);box-shadow:0 16px 30px -18px rgba(199,58,43,.7);}
.cutoff-card::after{content:'';position:absolute;right:-46px;top:-46px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.1);pointer-events:none;}
.cb-top{position:relative;display:flex;align-items:center;gap:12px;}
.cb-ic{flex:0 0 auto;width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;}
.cb-ic svg{width:22px;height:22px;stroke:#fff;}
.cb-heads{min-width:0;flex:1;}
.cb-label{font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;line-height:1.25;}
.cb-when{font-size:11.5px;opacity:.88;margin-top:2px;line-height:1.35;}
.cb-flag{flex:0 0 auto;align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:#fff;color:#8a2a12;padding:4px 9px;border-radius:100px;}
.cb-clock{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;}
.cb-unit{background:rgba(255,255,255,.16);border-radius:14px;padding:11px 6px 9px;text-align:center;}
.cb-unit b{display:block;font-family:'Poppins',sans-serif;font-weight:700;font-size:32px;line-height:1;font-variant-numeric:tabular-nums;}
.cb-unit span{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.88;margin-top:6px;}
.banner-bar{position:relative;height:6px;border-radius:99px;background:rgba(255,255,255,.26);margin-top:14px;overflow:hidden;}
.banner-level{position:relative;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22);}
.banner-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;font-weight:800;}
.banner-meta .next{opacity:.85;font-weight:700;}
.banner-hint{position:relative;font-size:11.5px;opacity:.92;margin:6px 0 0;}
.banner-level .banner-bar{margin-top:9px;}
.banner-bar i{display:block;height:100%;border-radius:inherit;background:#fff;transition:width .6s ease;}
.cb-note{position:relative;font-size:11.5px;opacity:.92;margin-top:12px;line-height:1.5;}
@media (prefers-reduced-motion: reduce){.banner-bar i{transition:none;}}
.sub-actions{display:flex;gap:9px;margin-top:14px;}
.sub-actions .btn{font-size:13px;padding:12px 14px;}
.label-preview{margin-top:22px;}
.lp-title{font-size:11.5px;font-weight:800;color:var(--muted);margin-bottom:9px;}
.lp-box{background:var(--surface);border:1.5px dashed var(--line-strong);border-radius:14px;padding:14px;}
.lp-name{font-family:'Inter',sans-serif;font-weight:800;font-size:13px;}
.lp-meal{font-size:13px;font-weight:700;margin-top:6px;}
.lp-macros{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);margin-top:3px;}
.lp-heat{font-size:11px;color:var(--muted-2);margin-top:9px;padding-top:9px;border-top:1px solid var(--line);}

/* ---------- Profilo: hub a sezioni ---------- */
.profile-hero{display:flex;align-items:center;gap:14px;margin-top:16px;}
.ph-body{flex:1;min-width:0;}
.ph-name{font-family:'Poppins',sans-serif;font-weight:600;font-size:19px;}
.ph-sub{color:var(--muted);font-size:12.5px;margin-top:2px;}
.ph-stats{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:var(--grad-green);color:#fff;border-radius:var(--radius-l);padding:18px 12px;margin-top:16px;text-align:center;box-shadow:0 16px 30px -18px var(--glow-green);}
.ph-stats::after{content:'';position:absolute;right:-40px;top:-46px;width:130px;height:130px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none;}
.ph-stats>*{position:relative;z-index:1;}
.phs-val{font-family:'Inter',sans-serif;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;}
.phs-lbl{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;opacity:.92;margin-top:4px;font-weight:700;}
.phs-dot{flex-shrink:0;width:7px;height:7px;border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.9);}
.pgroup-label{font-size:11.5px;font-weight:800;color:var(--muted);margin:24px 0 9px;padding-left:4px;}
.pgroup{background:var(--surface);border-radius:var(--radius-l);overflow:hidden;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.prow{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:14px 16px;transition:background-color .2s ease;}
@media (hover:hover){.prow:hover{background:var(--surface-2);}}
.prow + .prow{border-top:1px solid var(--line);}
.pr-ic{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ink);}
.pr-ic svg{width:17px;height:17px;}
.pr-label{flex:1;min-width:0;font-size:14px;font-weight:700;}
.pr-value{font-size:12.5px;color:var(--muted);font-weight:600;flex-shrink:0;max-width:44%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pr-chev{color:var(--muted-2);flex-shrink:0;display:flex;}
.pr-chev svg{width:15px;height:15px;}
.opt-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);border-radius:16px;padding:15px 16px;margin-bottom:9px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.opt-row.active{outline:1.5px solid var(--accent);background:var(--accent-dim);}
.or-body{display:block;}
.or-title{display:block;font-size:14px;font-weight:700;}
.or-sub{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;}
.or-check{color:var(--accent);flex-shrink:0;display:flex;}
.or-check svg{width:17px;height:17px;}
.note-box{background:var(--surface-2);border-radius:14px;padding:12px 14px;margin-top:16px;font-size:11.5px;color:var(--muted);line-height:1.5;}
.voucher-input{display:flex;gap:10px;margin-top:14px;}
.voucher-input .text-input{flex:1;}
.voucher-active{background:var(--accent-dim);border-radius:16px;padding:14px 16px;margin-top:14px;}
.va-top{display:flex;align-items:center;justify-content:space-between;}
.va-code{font-family:'Inter',sans-serif;font-weight:800;font-size:15px;}
.va-remove{font-size:12px;font-weight:800;color:var(--danger);}
.va-label{font-size:12px;color:var(--muted);margin-top:4px;}
.about-card{background:var(--surface);border-radius:var(--radius-l);padding:26px;text-align:center;margin-top:16px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.ab-logo{font-family:'Poppins',sans-serif;font-weight:800;font-size:24px;}
/* Info e supporto: logo intero con il simbolo di marchio registrato */
.about-card .ab-logo{display:flex;justify-content:center;align-items:flex-start;}
.ab-logo-mark{display:block;height:92px;position:relative;}
.ab-reg{position:absolute;left:100%;top:0;margin-left:3px;font-family:'Inter',sans-serif;font-size:13px;font-weight:700;line-height:1;color:var(--ink);margin-top:-2px;}
.ab-claim{color:var(--muted);font-size:13px;margin-top:6px;}
.ab-ver{color:var(--muted-2);font-size:11.5px;margin-top:14px;}

/* ---------- Menu unificato con composizione ---------- */
.menu-hint{font-size:13px;color:var(--muted);margin:14px 0 16px;line-height:1.45;}
.tab-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-left:6px;vertical-align:middle;}
.tab.active .tab-dot{background:#fff;}
.food-card.picked{box-shadow:inset 0 0 0 2px var(--accent);}   /* un contorno esterno verrebbe tagliato dalla maschera ad angoli morbidi */
.picked-badge{position:absolute;top:8px;right:8px;z-index:2;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 0 0 2px #fff;display:flex;align-items:center;justify-content:center;}
.picked-badge svg{width:13px;height:13px;}
.composer{position:sticky;bottom:96px;z-index:45;display:flex;align-items:center;gap:10px;
  background:var(--surface);border-radius:100px;padding:8px 8px 8px 10px;margin-top:20px;
  box-shadow:0 14px 34px -12px rgba(36,37,42,.3);}
.composer.empty{justify-content:center;padding:14px;background:var(--surface-2);box-shadow:none;}

/* ---------- Consegna ---------- */
.geo-btn{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--accent-dim);border-radius:16px;padding:14px 16px;}
.geo-btn svg{width:20px;height:20px;color:var(--accent);flex-shrink:0;}
.geo-title{display:block;font-size:13.5px;font-weight:800;color:var(--ink);}
.geo-sub{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;}
.addr-grid{display:grid;grid-template-columns:2.2fr 1fr;gap:12px;margin-top:12px;}
.addr-grid2{display:grid;grid-template-columns:1.6fr 1fr;gap:12px;margin-top:12px;}
.addr-grid label,.addr-grid2 label{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px;display:block;}
.addr-summary{background:var(--surface);border-radius:16px;padding:16px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.as-row{display:flex;gap:12px;align-items:flex-start;}
.as-row + .as-row{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}
.as-ic{color:var(--muted);flex-shrink:0;display:flex;margin-top:1px;}
.as-ic svg{width:17px;height:17px;}
.as-strong{font-size:13.5px;font-weight:800;}
.as-sub{font-size:11.5px;color:var(--muted);margin-top:2px;}
.addr-missing{background:var(--protein-dim);border-radius:14px;padding:12px 14px;margin-top:16px;font-size:12px;color:var(--ink);line-height:1.5;}

/* ---------- Ordine al tavolo ---------- */
.choice-block{margin-top:16px;}
.choice-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:23px;}
.choice-sub{color:var(--muted);font-size:13px;margin-top:5px;margin-bottom:16px;}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.choice-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;
  border-radius:var(--radius-l);padding:20px 18px;min-height:158px;transition:transform .12s ease;}
.choice-card:active{transform:scale(.97);}
.choice-card.in-loco{background:var(--accent-dim);}
.choice-card.deliv{background:var(--carb-dim);}
.cc-ic{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.choice-card.in-loco .cc-ic{color:var(--accent);}
.choice-card.deliv .cc-ic{color:var(--carb);}
.cc-ic svg{width:22px;height:22px;}
.cc-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:17px;color:var(--ink);}
.cc-sub{font-size:11.5px;color:var(--muted);line-height:1.45;}
/* Home, «Dove vuoi mangiare?» (stessa disposizione, stile nuovo): schede bianche con bordo sottile colorato,
   icona piena nel colore della scelta e freccia in basso a destra; il ritiro è una pillola bianca con icona */
.where-block .choice-card{position:relative;background:var(--surface);box-shadow:0 2px 14px rgba(36,37,42,.06);border:1.5px solid transparent;}
.where-block .choice-card.in-loco{border-color:color-mix(in srgb, var(--accent) 35%, transparent);}
.where-block .choice-card.deliv{border-color:color-mix(in srgb, var(--carb) 35%, transparent);}
.where-block .choice-card .cc-ic{border-radius:50%;color:#fff;}
.where-block .choice-card.in-loco .cc-ic{background:var(--accent);color:#fff;}
.where-block .choice-card.deliv .cc-ic{background:var(--carb);color:#fff;}
.where-block .cc-go{position:absolute;right:14px;bottom:14px;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-2);color:var(--ink);}
.where-block .cc-go svg{width:15px;height:15px;}
.where-block .cc-sub{padding-right:30px;}
.where-block .choice-third{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 14px 10px 10px;color:var(--ink);border:1.5px solid color-mix(in srgb, var(--fat) 35%, transparent);}
.where-block .ct-ic{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--fat);color:#fff;flex-shrink:0;}
.where-block .ct-ic svg{width:16px;height:16px;}
.where-block .ct-txt{flex:1;}
.where-block .ct-chev{display:flex;color:var(--muted);}
.where-block .ct-chev svg{width:16px;height:16px;}
html[data-theme="dark"] .where-block .choice-card .cc-ic{color:#fff;}

.choice-third{width:100%;text-align:center;margin-top:12px;padding:13px;border-radius:100px;
  background:var(--surface);font-size:13px;font-weight:700;color:var(--muted);box-shadow:0 2px 10px rgba(36,37,42,.05);}
.welcome-wrap{display:flex;flex-direction:column;justify-content:center;min-height:88vh;min-height:88svh;padding:0 4px;}
.welcome-logo{display:flex;align-items:center;justify-content:flex-start;align-self:flex-start;width:auto;height:96px;margin-bottom:30px;}   /* logo con la scritta sotto */
.welcome-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:30px;line-height:1.15;}
.welcome-sub{color:var(--muted);font-size:14px;margin-top:8px;margin-bottom:26px;}
.welcome-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);border-radius:var(--radius-l);padding:18px;margin-bottom:11px;box-shadow:0 2px 14px rgba(36,37,42,.06);transition:transform .12s ease;}
.welcome-opt:active{transform:scale(.98);}
.wo-ic{width:46px;height:46px;border-radius:14px;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wo-ic svg{width:22px;height:22px;}
.wo-body{flex:1;min-width:0;display:block;}
.wo-title{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;}
.wo-sub{display:block;font-size:12px;color:var(--muted);margin-top:3px;}
.wo-chev{color:var(--muted-2);flex-shrink:0;display:flex;}
.wo-chev svg{width:16px;height:16px;}
.mode-bar{display:flex;align-items:center;gap:8px;width:100%;background:var(--surface);border-radius:100px;padding:10px 14px 10px 12px;margin-top:14px;box-shadow:0 2px 12px rgba(36,37,42,.06);}
.mb-main{display:flex;align-items:center;gap:12px;flex:1;min-width:0;text-align:left;}
.mode-bar.warn{background:var(--protein-dim);}
.mb-ic{width:34px;height:34px;border-radius:50%;background:var(--accent-dim);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mode-bar.warn .mb-ic{background:#fff;color:var(--protein);}
.mb-ic svg{width:16px;height:16px;}
.mb-body{flex:1;min-width:0;display:block;}
.mb-title{display:block;}
.mb-sub{display:block;font-size:11px;color:var(--muted);margin-top:1px;}
.mb-change{font-size:12px;font-weight:800;color:var(--accent);flex-shrink:0;padding:8px 12px;border-radius:100px;background:var(--accent-dim);}
/* stesso colore del riquadro scelto in «Dove vuoi mangiare?»: tavolo verde, delivery azzurro, ritiro viola */
.mode-bar{border:1.5px solid transparent;--mbc:var(--accent);--mbd:var(--accent-dim);}
.mode-bar.mb-table{--mbc:var(--accent);--mbd:var(--accent-dim);}
.mode-bar.mb-delivery{--mbc:var(--carb);--mbd:var(--carb-dim);}
.mode-bar.mb-pickup{--mbc:var(--fat);--mbd:var(--fat-dim);}
.mode-bar{border-color:color-mix(in srgb, var(--mbc) 35%, transparent);}
.mode-bar .mb-ic,.mode-bar.warn .mb-ic{background:var(--mbc);color:#fff;}
.mode-bar .mb-change{color:var(--mbc);background:var(--mbd);}
/* dato mancante (tavolo o indirizzo): stessa barra, solo la riga sotto in rosso */
.mode-bar.warn{background:var(--surface);}
.mode-bar.warn .mb-sub{color:var(--protein);font-weight:700;}

.table-set{display:flex;align-items:center;gap:13px;background:var(--surface);border-radius:16px;padding:14px 16px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.ts-num{width:44px;height:44px;border-radius:13px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Inter',sans-serif;font-weight:800;font-size:19px;flex-shrink:0;}
.ts-body{flex:1;min-width:0;}
.ts-title{font-size:14px;font-weight:800;}
.ts-sub{font-size:11.5px;color:var(--muted);margin-top:2px;}
.ts-change{font-size:12px;font-weight:800;color:var(--accent);flex-shrink:0;}
.confirm-table{margin-top:14px;background:rgba(255,255,255,.22);color:#fff;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;padding:10px 20px;border-radius:100px;}

/* ---------- Modale interno ---------- */
.modal-card[tabindex="-1"]:focus{outline:none;}   /* il focus va sulla finestra (core/overlays.js): nessun anello attorno a tutta la finestra */
.modal-backdrop{position:fixed;inset:0;z-index:200;background:rgba(20,21,25,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:24px;}
.modal-card{background:var(--surface);border-radius:var(--radius-l);padding:22px;width:100%;max-width:360px;box-shadow:0 24px 60px -20px rgba(20,21,25,.5);}
.modal-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:18px;}
.modal-msg{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.55;}
.modal-actions{display:flex;gap:10px;margin-top:20px;}

/* ---------- Profilo nutrizionale e onboarding ---------- */
.macro-input-row > div:first-child{display:flex;align-items:center;gap:8px;}
.macro-share{font-family:'Inter',sans-serif;font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);padding:2px 7px;border-radius:100px;}
.kcal-mode{margin:4px 0 12px;}
.km-label{font-size:12px;font-weight:700;color:var(--muted);}
.origin-badge{display:flex;align-items:center;gap:10px;border-radius:16px;padding:12px 14px;margin:-4px 0 14px;}
.origin-badge.auto{background:var(--accent-dim);}
.origin-badge.manual{background:var(--carb-dim);flex-direction:column;align-items:stretch;gap:11px;padding:14px;}
.ob-headline{display:flex;align-items:center;gap:10px;}
.ob-action-full{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;font-size:12.5px;font-weight:800;color:var(--ink);background:#fff;padding:11px 14px;border-radius:100px;box-shadow:0 2px 8px rgba(36,37,42,.08);}
.ob-action-full svg{width:14px;height:14px;}
.origin-badge .ob-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.origin-badge.auto .ob-dot{background:var(--accent);}
.origin-badge.manual .ob-dot{background:var(--carb);}
.ob-action{font-size:11.5px;font-weight:800;color:var(--ink);background:rgba(255,255,255,.75);padding:7px 12px;border-radius:100px;flex-shrink:0;align-self:center;}
.ob-title{font-size:12.5px;font-weight:800;color:var(--ink);}
.ob-sub{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.45;}

.macro-warn{background:var(--protein-dim);border-radius:14px;padding:12px 14px;margin-top:10px;font-size:11.5px;color:var(--ink);line-height:1.5;}
.macro-warn div + div{margin-top:6px;}
.mw-ic{display:inline-flex;vertical-align:-2px;margin-right:6px;color:var(--protein-num);}
.mw-ic svg{width:14px;height:14px;}

.onb-cta{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--grad-blue);color:#fff;box-shadow:0 16px 30px -18px var(--glow-blue);border-radius:var(--radius-l);padding:18px 20px;margin-top:16px;}
.onb-cta .chev{margin-left:auto;opacity:.85;display:flex;}
.onb-cta .chev svg{width:16px;height:16px;}
.onb-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;}
.onb-sub{font-size:12px;opacity:.92;margin-top:4px;line-height:1.45;}
.metab-card{background:var(--surface);border-radius:var(--radius-l);padding:18px;margin-top:16px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.metab-row{display:flex;align-items:center;justify-content:space-between;}
.metab-item{flex:1;text-align:center;}
.metab-sep{width:1px;align-self:stretch;background:var(--line);}
.mi-val{font-family:'Inter',sans-serif;font-weight:800;font-size:19px;}
.mi-lbl{font-size:11px;color:var(--muted);margin-top:3px;font-weight:600;line-height:1.3;}
.metab-note{font-size:11.5px;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid var(--line);line-height:1.5;}
.weight-card{background:var(--surface);border-radius:var(--radius-l);padding:18px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.weight-row{display:flex;justify-content:space-between;align-items:flex-start;}
.w-val{font-family:'Inter',sans-serif;font-weight:800;font-size:18px;}
.w-lbl{font-size:11px;color:var(--muted);margin-top:2px;font-weight:600;}
.weigh-btn{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--ink);color:var(--on-ink);border-radius:var(--radius-l);padding:15px 18px;margin-top:12px;}
.weigh-btn.done{background:var(--accent-dim);color:var(--ink);}
.wb-ic{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.weigh-btn.done .wb-ic{background:var(--accent);color:#fff;}
.wb-ic svg{width:16px;height:16px;}
.wb-body{flex:1;min-width:0;display:block;}
.wb-title{display:block;font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;}
.wb-sub{display:block;font-size:11px;opacity:.65;margin-top:2px;}
.weight-chart{background:var(--surface);border-radius:var(--radius-l);padding:16px;margin-top:12px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.wc-head{display:flex;justify-content:space-between;font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:10px;}
.onb-progress{display:flex;gap:6px;margin-top:18px;}
.onb-dot{flex:1;height:4px;border-radius:2px;background:var(--surface-3);transition:background .25s ease;}
.onb-dot.on{background:var(--accent);}
.onb-step-lbl{font-size:11.5px;color:var(--muted);font-weight:700;margin-top:10px;}
.onb-q{font-family:'Poppins',sans-serif;font-weight:600;font-size:22px;margin-top:8px;}
.onb-hint{color:var(--muted);font-size:13px;margin-top:6px;margin-bottom:16px;}
.onb-opt{display:block;width:100%;text-align:left;background:var(--surface);border:1.5px solid transparent;border-radius:16px;padding:14px 16px;margin-bottom:9px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.onb-opt.active{border-color:var(--accent);background:var(--accent-dim);}
.oo-title{font-size:14px;font-weight:700;}
.oo-sub{font-size:11.5px;color:var(--muted);margin-top:3px;}
.onb-seg{display:flex;gap:9px;}
.onb-seg .onb-opt{margin-bottom:0;text-align:center;}
.onb-preview{position:relative;overflow:hidden;background:var(--grad-green);color:#fff;box-shadow:0 16px 30px -18px var(--glow-green);border-radius:var(--radius-l);padding:18px;margin-top:20px;}
.conf-badge{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:4px 9px;border-radius:20px;background:var(--surface-3);color:var(--muted);}
.conf-badge.conf-high,.conf-badge.conf-personalized{background:var(--accent-dim);color:var(--accent);}
.conf-badge.conf-good{background:var(--carb-dim);color:var(--carb);}
.opv-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;margin-bottom:14px;}
.opv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center;}
.opv-val{font-family:'Inter',sans-serif;font-weight:800;font-size:17px;}
.opv-lbl{font-size:11px;color:var(--muted);margin-top:2px;font-weight:600;}
.opv-permeal{font-size:11.5px;color:var(--muted);margin-top:14px;padding-top:12px;border-top:1px solid rgba(36,37,42,.1);line-height:1.5;}
.opv-permeal b{color:var(--ink);}
.onb-preview .opv-lbl{display:flex;align-items:center;justify-content:center;gap:5px;color:#fff;opacity:.92;font-weight:700;}
.onb-preview .opv-permeal{color:#fff;opacity:.92;border-top-color:rgba(255,255,255,.22);}
.onb-preview .opv-permeal b{color:#fff;}
.onb-nav{display:flex;gap:10px;margin-top:26px;}

/* ---------- Diario alimentare ---------- */
.dp-badge{font-size:11px;font-weight:700;color:var(--muted);background:var(--surface-2);padding:2px 7px;border-radius:100px;margin-left:5px;vertical-align:middle;}
.pick-group{font-size:11.5px;font-weight:700;color:var(--muted);margin:14px 0 9px;}
.group-chips{display:flex;flex-wrap:wrap;gap:8px;}
.group-chip{padding:10px 15px;border-radius:100px;background:var(--surface);font-size:12.5px;font-weight:700;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.scan-cta{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--ink);color:var(--on-ink);border-radius:var(--radius-l);padding:16px 18px;margin-top:16px;}
.scan-cta > svg{width:24px;height:24px;flex-shrink:0;}
.scan-cta .chev{margin-left:auto;opacity:.5;display:flex;}
.scan-cta .chev svg{width:16px;height:16px;}
.sc-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;}
.sc-sub{font-size:11.5px;opacity:.6;margin-top:2px;}
.scanner-frame{position:relative;margin-top:16px;border-radius:var(--radius-l);overflow:hidden;background:#101114;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;}
.scanner-frame video{width:100%;height:100%;object-fit:cover;}
.scan-overlay{position:absolute;inset:14% 10%;border:2px solid rgba(255,255,255,.85);border-radius:14px;}
.scan-line{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:scanmove 2s ease-in-out infinite;}
@keyframes scanmove{0%,100%{top:12%}50%{top:88%}}
.scan-status{position:absolute;bottom:12px;left:0;right:0;text-align:center;color:#fff;font-size:12px;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.7);}
/* Anello che gira accanto al testo, solo durante la vera attesa di rete (Open Food Facts) — non
   un caricamento finto: il resto dell'app è sincrona e non ha altri momenti d'attesa reali. */
.scan-spinner{display:inline-block;width:11px;height:11px;margin-right:6px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;vertical-align:-1px;animation:scanSpin .7s linear infinite;}
@keyframes scanSpin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.scan-spinner{animation:none;}}

.diary-datebar{display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
.diary-date{font-family:'Poppins',sans-serif;font-weight:600;font-size:19px;}
.diary-summary{border-radius:var(--radius-l);margin-top:14px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.micro-card{background:var(--surface);border-radius:var(--radius-l);padding:18px 20px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
/* Micronutrienti a scomparsa nel Diario (chiusi di default) */
.micro-toggle{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:14px;padding:14px 18px;border:0;
  background:var(--surface);border-radius:var(--radius-l);box-shadow:0 2px 14px rgba(36,37,42,.05);font:inherit;color:inherit;cursor:pointer;}
.micro-toggle .mt-chev{display:flex;color:var(--muted);transform:rotate(90deg);transition:transform .25s ease;}
.micro-toggle .mt-chev svg{width:18px;height:18px;}
.micro-toggle.open .mt-chev{transform:rotate(-90deg);}
.micro-toggle.open{border-radius:var(--radius-l) var(--radius-l) 0 0;box-shadow:none;}
.micro-card-open{border-radius:0 0 var(--radius-l) var(--radius-l);border-top:1px solid var(--line);padding-top:14px;}
@media (prefers-reduced-motion: reduce){ .micro-toggle .mt-chev{transition:none;} }
.ds-head{display:flex;align-items:center;}
.ds-big{color:var(--ink);}
.ds-lbl{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px;}
.ds-ring{flex-shrink:0;}
.dq-row{margin-bottom:13px;}
.dq-row:last-child{margin-bottom:0;}
.dq-top{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:6px;}
.dq-top b{color:var(--ink);}
.dq-track{height:7px;border-radius:4px;background:var(--surface-3);overflow:hidden;}
.dq-fill{height:100%;border-radius:4px;transition:width .3s ease;}
.diary-pick{display:flex;align-items:center;gap:12px;background:var(--surface);border-radius:16px;padding:12px 14px;margin-bottom:9px;cursor:pointer;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.dp-thumb{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dp-body{flex:1;min-width:0;}
.dp-name{font-size:13.5px;font-weight:700;}
.dp-meta{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);margin-top:2px;}
.dp-plus{color:var(--accent);flex-shrink:0;display:flex;}
.dp-plus svg{width:18px;height:18px;}
.manual-block{background:var(--surface);border-radius:var(--radius-l);padding:20px;margin-top:22px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.mb-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;margin-bottom:4px;}
.manual-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
.manual-grid label{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px;display:block;}

.toast{
  /* centrato con left/right + margin auto: con left:50% la larghezza massima era metà schermo e sul
     telefono il testo andava a capo su più righe */
  position:fixed;bottom:calc(118px + env(safe-area-inset-bottom,0px));left:16px;right:16px;margin:0 auto;width:fit-content;max-width:480px;
  background:var(--ink);color:var(--on-ink);padding:12px 20px;border-radius:24px;
  font-size:13px;font-weight:700;z-index:210;box-shadow:var(--shadow);   /* sopra le finestre (z-index 200): «Valore non valido» di un prompt si legge */
  display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .25s ease, transform .25s ease;
}
.toast.show{opacity:1;transform:translateY(-6px);}

@media(min-width:900px){
  #topbar,main#view,.back-row{padding-left:32px;padding-right:32px;}
  .scroller{margin:0 -32px;padding-left:32px;padding-right:32px;}
  .hero h1{font-size:58px;}
}

/* ---------- Hover fluido: icone e tasti (solo dispositivi con mouse) ---------- */
@media (hover:hover) and (pointer:fine){

  /* Bottoni pillola */
  .btn{transition:transform .12s ease, opacity .12s ease, filter .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;}
  .btn-primary:hover{filter:brightness(1.08);}
  .btn-dark:hover{filter:brightness(1.4);}
  .btn-outline:hover{background:var(--surface-2);border-color:var(--accent);color:var(--accent);}
  .btn-ghost:hover{background:var(--surface-3);color:var(--accent);}

  /* Icone circolari */
  .icon-btn,
.back-btn,
.qty-btn,
.qty-mini,
.tk-btn,
.bs-clear {
    transition:background-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
  }
  .icon-btn:hover{background:var(--surface-3);color:var(--accent);}
  .back-btn:hover{background:var(--surface-2);color:var(--accent);}
  .qty-btn:hover{background:var(--surface-3);color:var(--accent);}
  .qty-mini:hover:not(:disabled){background:var(--surface-3);color:var(--accent);}

  .tk-btn:hover:not(:disabled){background:var(--surface-3);color:var(--accent);}
  .bs-clear:hover{background:var(--protein-dim);}

  /* Cuoricini preferiti (colore gestito inline sull'elemento: serve !important per far vincere l'hover) */
  .food-thumb .heart,
.hero-arch-wrap .heart-lg,
.heart-lg {
    transition:background-color .2s ease, color .2s ease, transform .15s ease;
  }
  .food-thumb .heart:hover,
.hero-arch-wrap .heart-lg:hover,
.heart-lg:hover {
    background:#fff;color:var(--protein) !important;
  }

  /* Nav in basso e tab del menu */
  .nav-item{transition:all .18s ease, color .2s ease, background-color .2s ease;}
  .nav-item:not(.active):hover{color:var(--accent);background:var(--surface-2);}
  .tab{transition:background-color .2s ease, color .2s ease, box-shadow .2s ease;}
  .tab:not(.active):hover{color:var(--accent);background:var(--surface-2);}
  .seg-btn{transition:color .2s ease;}
  .seg-btn:not(.active):hover{color:var(--ink);}

  /* Chip e pillole selezionabili */
  .day-chip,
.time-chip,
.slot-chip,
.group-chip,
.extra-chip {
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  }
  .day-chip:not(.active):hover,
.slot-chip:not(.active):hover,
.group-chip:hover {
    background:var(--surface-3);color:var(--accent);
  }
  .time-chip:not(.active):not(:disabled):hover{background:var(--surface-3);color:var(--accent);}
  .extra-chip:not(.active):hover{background:var(--accent-dim);color:var(--accent);}
  .choice-third:hover{background:var(--surface-2);color:var(--ink);}

  /* Card e righe cliccabili a sfondo neutro */
  .fam-card,.pick-meal,.diary-pick,.weight-tile,.sugg-card,.food-card,
  .goal-opt,.ab-opt,.plan-card,.swap-row,.sd-slot,.opt-row,.onb-opt,.welcome-opt,.day-row{
    transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  }
  .fam-card:hover,.pick-meal:hover,.diary-pick:hover,.weight-tile:hover,.sugg-card:hover,.food-card:hover{
    background:var(--surface-2);
  }
  .goal-opt:not(.active):hover,.ab-opt:not(.active):hover,.plan-card:not(.active):hover,
  .opt-row:not(.active):hover,.onb-opt:not(.active):hover{
    border-color:var(--line-strong);background:var(--surface-2);
  }
  .swap-row:not(.current):not(.disabled):hover{background:var(--surface-2);border-color:var(--line-strong);}
  .sd-slot:not(.filled):hover{background:var(--surface-2);border-color:var(--accent);}
  .day-row:not(.current):hover{border-color:var(--line-strong);background:var(--surface-2);}
  .welcome-opt:hover{background:var(--surface-2);}

  /* Card e CTA a sfondo colorato: si usa filter (background inline/da classe resta intatto) */
  .weigh-btn,
.scan-cta,
.onb-cta,
.geo-btn,
.choice-card,
.svc-card {
    transition:filter .2s ease, background-color .2s ease, box-shadow .2s ease, transform .15s ease;
  }
  .weigh-btn:hover,
.scan-cta:hover,
.onb-cta:hover,
.choice-card:hover,
.svc-card:hover {filter:brightness(1.08);}

  .geo-btn:hover{filter:brightness(1.05);}

  /* Link e azioni testuali */
  .va-remove,.remove-line,.ts-change,.mb-change,.tk-link,.see-all{
    transition:color .2s ease, opacity .2s ease;
  }
  .va-remove:hover,.remove-line:hover{color:var(--danger);opacity:.75;}
  .ts-change:hover,.mb-change:hover,.tk-link:hover{color:var(--ink);}
}

/* ---------- Iscrizione ---------- */
.signup{padding-bottom:8px;}
.su-top{display:flex;align-items:center;gap:14px;padding-top:18px;}
.su-body{padding-bottom:12px;}
.su-row{margin-top:12px;}
.su-row label{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px;display:block;}
.su-row .onb-seg .onb-opt{padding:13px 10px;}
.su-row input[type="date"]{min-height:48px;display:block;-webkit-appearance:none;appearance:none;}
.su-cta{position:sticky;bottom:0;z-index:5;margin:0 -20px;padding:22px 20px calc(16px + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,transparent,var(--bg) 34%);}
.su-me{display:flex;align-items:center;gap:14px;margin-top:4px;}
.su-me .avatar{width:60px;height:60px;font-size:24px;}
.su-me-name{font-family:'Poppins',sans-serif;font-weight:600;font-size:17px;}
.su-me-sub{color:var(--muted);font-size:12.5px;margin-top:2px;}
.su-facts{background:var(--surface);border-radius:var(--radius-m);padding:4px 16px;margin-top:16px;box-shadow:0 2px 10px rgba(36,37,42,.05);}
.su-fact{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;font-size:13px;border-bottom:1px solid var(--line);}
.su-fact:last-child{border-bottom:0;}
.su-fact b{font-variant-numeric:tabular-nums;}
.su-note{color:var(--muted);font-size:12px;text-align:center;margin-top:14px;}
.photo-picker{display:flex;flex-direction:column;align-items:center;gap:10px;margin:4px 0 22px;}
.pp-avatar{width:112px;height:112px;border-radius:50%;background:var(--surface-2);border:2px dashed var(--line-strong);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);}
.pp-avatar svg{width:34px;height:34px;}
.pp-avatar.has{border:0;box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--accent);}
.pp-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.pp-cap{font-size:12px;font-weight:700;color:var(--muted);}
.pp-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;}
.pp-actions .btn svg{width:15px;height:15px;}
.pp-remove{font-size:12px;font-weight:700;color:var(--muted);padding:8px 10px;}
@keyframes suIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@keyframes suPop{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:none;}}
.su-anim .su-body{animation:suIn .32s cubic-bezier(.22,.61,.36,1) both;}
.su-anim .onb-preview{animation:suPop .5s cubic-bezier(.22,.61,.36,1) .12s both;}
@media (prefers-reduced-motion:reduce){.su-anim .su-body,.su-anim .onb-preview{animation:none;}}

.su-tag{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:100px;background:var(--surface-2);color:var(--muted);font-size:11px;font-weight:700;vertical-align:2px;}
.su-method.active .su-tag{background:var(--surface);color:var(--ink);}
.signup .onb-eyebrow{font-size:11.5px;font-weight:800;color:var(--accent);margin-top:14px;}
.selfie-card{text-align:center;}
.selfie-frame{width:min(100%,260px);aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:#000;margin:14px auto 0;box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent);}
.selfie-frame video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block;}
.selfie-status{min-height:18px;margin-top:12px;font-size:12.5px;color:var(--muted);}

.method-note{margin-top:14px;background:var(--surface-2);border-radius:14px;padding:12px 14px;font-size:12px;color:var(--muted);line-height:1.5;}
.method-note summary{cursor:pointer;font-weight:800;color:var(--ink);font-size:12.5px;}
.method-note p{margin-top:8px;}

/* Editor foto profilo */
.photoed-view{width:min(100%,260px);aspect-ratio:1/1;border-radius:50%;overflow:hidden;margin:16px auto 0;touch-action:none;cursor:grab;background:var(--surface-2);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent);outline:none;}
.photoed-view:active{cursor:grabbing;}
.photoed-view:focus-visible{box-shadow:0 0 0 3px var(--surface),0 0 0 6px var(--ink);}
.photoed-view canvas{width:100%;height:100%;display:block;}
.photoed-zoom{display:flex;align-items:center;gap:10px;margin-top:18px;}
.photoed-zoom input[type=range]{flex:1;min-width:0;accent-color:var(--accent);}
.photoed-step{width:34px;height:34px;flex-shrink:0;border-radius:50%;border:1px solid var(--line-strong);font-size:18px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;}
.photoed-hint{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center;}
/* Avatar del profilo cliccabile → Dati personali */
.avatar-link{position:relative;flex-shrink:0;border-radius:50%;display:block;}

/* Consulenze: nutrizione e allenamento nella stessa pagina */
.consult-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px;padding:5px;border-radius:100px;background:var(--surface-2);}
.ctab{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 8px;border-radius:100px;font-size:13.5px;font-weight:800;color:var(--muted);transition:background-color .2s ease,color .2s ease;}
.ctab svg{width:17px;height:17px;flex-shrink:0;}
.ctab.active{color:#fff;}
.ctab.active.nutri{background:var(--grad-green);box-shadow:0 8px 18px -10px var(--glow-green);}
.ctab.active.train{background:var(--grad-blue);box-shadow:0 8px 18px -10px var(--glow-blue);}
.ctab-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;}
.ctab.active .ctab-dot{background:#fff;}
.bk-card.green{background:var(--grad-green);box-shadow:0 16px 30px -18px var(--glow-green);}
.pref-block{margin-top:14px;}
.pref-lbl{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px;}
.pref-chips{display:flex;flex-wrap:wrap;gap:8px;}
.pref-chip{padding:11px 16px;}

/* Iscrizione con Google/Apple: dati già presi dall'account */
.su-account{display:flex;align-items:center;gap:13px;padding:14px;border-radius:var(--radius-l);background:var(--surface);box-shadow:0 2px 12px rgba(36,37,42,.06);}
.sa-prov{width:38px;height:38px;flex-shrink:0;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;}
.sa-prov svg{width:20px;height:20px;}
.sa-body{min-width:0;flex:1;}
.sa-lbl{font-size:11px;font-weight:700;color:var(--muted);}
.sa-name{font-family:'Poppins',sans-serif;font-weight:600;font-size:15.5px;line-height:1.3;margin-top:2px;overflow-wrap:anywhere;}
.sa-mail{font-size:12.5px;color:var(--muted);margin-top:1px;overflow-wrap:anywhere;}
.sa-edit{flex-shrink:0;padding:9px 14px;border-radius:100px;background:var(--surface-2);font-size:12.5px;font-weight:800;}

/* Avvertenza */
.disc-page{margin-top:18px;}
.disc-body p{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--ink);}
.disc-body b{font-weight:800;}
.disc-when{margin-top:18px;font-size:12px;color:var(--muted);font-weight:600;}
.disc-ack{margin-top:18px;padding:16px;border-radius:var(--radius-l);background:var(--surface);box-shadow:0 2px 12px rgba(36,37,42,.06);}
.disc-short{margin:0;font-size:13px;line-height:1.5;color:var(--muted);}
.disc-more{margin-top:10px;}
.disc-more summary{cursor:pointer;font-size:12.5px;font-weight:800;color:var(--accent);}
.disc-more .disc-body p{font-size:12.5px;line-height:1.55;}
.disc-check{display:flex;align-items:flex-start;gap:11px;width:100%;margin-top:14px;text-align:left;font-size:14px;font-weight:700;line-height:1.4;}
.dc-box{width:24px;height:24px;flex-shrink:0;border-radius:8px;border:2px solid var(--line-strong);display:flex;align-items:center;justify-content:center;background:var(--surface);}
.dc-box svg{width:15px;height:15px;stroke:#fff;}
.disc-check.on .dc-box{background:var(--accent);border-color:var(--accent);}
.disc-ack .addr-missing{margin-top:12px;}
.disc-modal{max-width:400px;}
.disc-scroll{max-height:min(52vh,420px);overflow-y:auto;margin-top:6px;padding-right:4px;overscroll-behavior:contain;scrollbar-width:thin;
  background:linear-gradient(var(--surface) 30%,transparent) center top,linear-gradient(transparent,var(--surface) 70%) center bottom,
    radial-gradient(farthest-side at 50% 0,rgba(0,0,0,.16),transparent) center top,radial-gradient(farthest-side at 50% 100%,rgba(0,0,0,.16),transparent) center bottom;
  background-repeat:no-repeat;background-size:100% 28px,100% 28px,100% 9px,100% 9px;background-attachment:local,local,scroll,scroll;}
.disc-scroll .disc-body p{font-size:13px;line-height:1.55;}
.link-inline{font-size:12px;font-weight:800;color:var(--accent);text-decoration:underline;padding:4px 0;}

/* Sfide: sezioni settimanali e mensili */
.chal-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:22px;}
.chal-sec{font-family:'Poppins',sans-serif;font-weight:600;font-size:16px;}
.chal-left{font-size:11.5px;font-weight:700;color:var(--muted);text-align:right;}
.chal-list{margin-top:10px;display:flex;flex-direction:column;gap:12px;}
.chal-reward.month{background:var(--carb-dim);color:var(--carb);}

/* ============ Scheda alimento — stile a gradiente (come schede e banner dei servizi) ============
   Il fondo della testata cambia per categoria (classe h-<categoria>, usata anche dalle schede nel menu);
   la foto resta quella caricata, senza filtri né ritagli aggiuntivi. */
.hero-arch-wrap{--hero:var(--grad-green);background:var(--hero);color:#fff;}
.h-protein{--hero:linear-gradient(135deg,#e5533f 0%,#f0765a 45%,#f59a63 100%);}
.h-carb{--hero:linear-gradient(135deg,#2f6fc0 0%,#3f8fdc 45%,#38b0d8 100%);}
.h-fat{--hero:linear-gradient(135deg,#6a4fca 0%,#8a6fe0 50%,#a78cf0 100%);}
.h-veg{--hero:linear-gradient(135deg,#12917f 0%,#22a993 50%,#3cbf8a 100%);}
.h-fruit{--hero:linear-gradient(135deg,#d6467a 0%,#ea6a86 50%,#f2966f 100%);}
.h-sauce{--hero:linear-gradient(135deg,#c4691a 0%,#dc8626 50%,#eaa93c 100%);}
.h-drink{--hero:var(--grad-blue);}
.h-meal{--hero:var(--grad-green);}
.h-dessert{--hero:linear-gradient(135deg,#d94f8c 0%,#ec6fa0 50%,#f39aa9 100%);}
.h-supplement{--hero:linear-gradient(150deg,#5B3E96 0%,#8B6FD9 55%,#C4B3F2 100%);}
.hero-arch-wrap::before,.hero-arch-wrap::after{content:'';position:absolute;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none;z-index:1;}
.hero-arch-wrap::before{width:210px;height:210px;right:-70px;top:-70px;}
.hero-arch-wrap::after{width:150px;height:150px;left:-55px;bottom:46px;background:rgba(255,255,255,.08);}
.hero-cat{position:absolute;top:18px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:100px;
  background:rgba(255,255,255,.22);color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.01em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.hero-cat i{width:7px;height:7px;border-radius:50%;background:#fff;}
.hero-serif-name{font-family:'Poppins',sans-serif;font-weight:600;font-size:25px;line-height:1.2;color:#fff;letter-spacing:-.005em;text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.14);}
.hero-cal-row{width:fit-content;margin:12px auto 0;padding:7px 14px;border-radius:100px;background:rgba(255,255,255,.2);color:#fff;opacity:1;font-weight:700;}
.hero-cal-row svg{width:15px;height:15px;}
.hero-photo-circle{width:184px;height:184px;box-shadow:0 18px 34px -10px rgba(0,0,0,.34);}
/* Foto o disegno del piatto: è già un piatto visto dall'alto, quindi niente cerchio bianco attorno —
   il piatto stesso, grande, con la sua ombra; cresce appena con la grammatura (--plate-s) */
.hero-photo-circle.is-plate{width:min(78vw,300px);height:auto;aspect-ratio:1;margin-top:6px;border:0;border-radius:0;background:none;overflow:visible;
  box-shadow:none;filter:drop-shadow(0 20px 22px rgba(0,0,0,.28));
  transform:scale(var(--plate-s,1));transition:transform .35s cubic-bezier(.34,1.3,.4,1);}
.hero-photo-circle.is-plate img,.hero-photo-circle.is-plate .fp-art{width:100%;height:100%;object-fit:contain;}
html[data-theme="dark"] .hero-photo-circle.is-plate{background:none;border:0;}
.hero-arch-wrap:has(.is-plate) .hero-price-pill{margin-top:-30px;}
@media (prefers-reduced-motion: reduce){.hero-photo-circle.is-plate{transition:none;}}
.hero-price-pill{background:#fff;color:#1c1d22;box-shadow:0 12px 24px -10px rgba(0,0,0,.3);font-family:'Poppins',sans-serif;}
html[data-theme="dark"] .hero-price-pill{background:#fff;color:#1c1d22;}
.detail-desc{font-size:14.5px;color:var(--muted);margin-top:18px;}

/* quantità: pulsante "+" a gradiente, valore in Poppins, barra che si riempie */
.qty-block{padding:20px 20px 22px;}
.qty-label{font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;color:var(--ink);}
.qty-btn[data-action="gr-inc"],.qty-btn[data-action="serv-inc"],.qty-btn[data-delta="1"]{background:var(--grad-green);color:#fff;box-shadow:0 10px 18px -10px var(--glow-green);}
.qty-btn:disabled{opacity:.4;}
.qty-value{font-family:'Poppins',sans-serif;font-weight:600;font-size:34px;}
input[type=range].slider{height:8px;border-radius:8px;
  background:linear-gradient(90deg,#2ab871,#1699cd) 0 / var(--fill,0%) 100% no-repeat, var(--surface-3);}
input[type=range].slider::-webkit-slider-thumb{width:26px;height:26px;background:#fff;border:0;box-shadow:0 0 0 4px #1699cd,0 4px 10px rgba(22,153,205,.4);}
input[type=range].slider::-moz-range-thumb{width:20px;height:20px;background:#fff;border:0;box-shadow:0 0 0 4px #1699cd;}

/* valori nutrizionali: riquadri colorati come i macro del resto dell'app */
.nutri-card{padding:18px;gap:16px;}
.nutri-stats{gap:10px;}
.nutri-stat{border-radius:16px;padding:11px 13px;background:var(--surface-2);}
.nutri-stat.c{background:var(--carb-dim);}
.nutri-stat.p{background:var(--protein-dim);}
.nutri-stat.f{background:var(--fat-dim);}
.nutri-stat .val{font-family:'Poppins',sans-serif;font-weight:600;font-size:18px;}
.nutri-stat .lbl{font-weight:700;}

/* pulsante di aggiunta a gradiente */
.detail-ctas .btn-primary{background:var(--grad-green);box-shadow:0 16px 28px -14px var(--glow-green);padding:17px 22px;font-size:16px;}
.qty-value:has(input){display:flex;align-items:baseline;justify-content:center;gap:2px;}
.qty-value:has(input) input{width:4.4ch;}
/* Safari su iPhone dà ai campi un margine interno e un'altezza di riga sua: con il numero a 34px le cifre
   venivano tagliate ai lati e in alto. Margini a zero, riga esplicita, niente stile nativo. */
.qty-value input{-webkit-appearance:none;appearance:none;border-radius:0;padding:0 0 2px;margin:0;min-width:0;height:auto;line-height:1.4;}

/* ============ Anello dei macro degli alimenti (animato) ============ */
.ring-wrap{flex-shrink:0;}
.fring{display:block;overflow:visible;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.fr-track{fill:none;stroke:var(--surface-3);}
.fr-arc{fill:none;stroke:currentColor;stroke-linecap:round;filter:drop-shadow(0 2px 3px color-mix(in srgb,currentColor 42%,transparent));
  transition:stroke-dasharray .65s cubic-bezier(.22,1,.36,1),stroke-dashoffset .65s cubic-bezier(.22,1,.36,1),opacity .25s ease,filter .25s ease;}
.fr-c{color:var(--carb);}
.fr-p{color:var(--protein);}
.fr-f{color:var(--fat);}
.fr-arcs{transform-box:fill-box;transform-origin:center;transform:rotate(-90deg);}
/* ingresso: l'anello ruota in posizione mentre gli archi si disegnano uno dopo l'altro */
.fr-in .fr-arcs{animation:fr-spin 1.1s cubic-bezier(.22,1,.36,1) backwards;}
.fr-in .fr-arc{animation:fr-draw 1s cubic-bezier(.22,1,.36,1) var(--d,0s) backwards;}
@keyframes fr-spin{from{transform:rotate(-250deg);}to{transform:rotate(-90deg);}}
@keyframes fr-draw{from{stroke-dasharray:.01 var(--circ);opacity:0;}25%{opacity:1;}to{stroke-dasharray:var(--dash) var(--circ);}}
/* tocco su carbo/proteine/grassi: l'arco si accende, gli altri si attenuano */
.fring[data-focus] .fr-arc{opacity:.2;}
.fring[data-focus="c"] .fr-c,.fring[data-focus="p"] .fr-p,.fring[data-focus="f"] .fr-f{opacity:1;filter:drop-shadow(0 0 6px currentColor);}
button.nutri-stat{text-align:left;border:0;font:inherit;color:inherit;cursor:pointer;transition:transform .12s ease,box-shadow .2s ease;-webkit-tap-highlight-color:transparent;}
button.nutri-stat:active{transform:scale(.97);}
.nutri-stat.c.on{box-shadow:0 0 0 2px var(--carb);}
.nutri-stat.p.on{box-shadow:0 0 0 2px var(--protein);}
.nutri-stat.f.on{box-shadow:0 0 0 2px var(--fat);}
@media (max-width:359px){.nutri-card{flex-direction:column;}}
@media (prefers-reduced-motion: reduce){
  .fr-in .fr-arcs,.fr-in .fr-arc{animation:none;}
  .fr-arc,button.nutri-stat{transition:none;}
}

/* Numeri con caduta a molla e centro dell'anello */
.ring-wrap{position:relative;}
.fr-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;text-align:center;}
.fr-num{font-family:'Poppins',sans-serif;font-weight:600;font-size:21px;line-height:1.1;color:var(--ink);}
.fr-sub{font-family:'Inter',sans-serif;font-weight:700;font-size:11px;color:var(--muted);margin-top:1px;}
.pd{position:relative;display:inline-block;}
.pc{display:inline-block;}
/* Cifre che cambiano: stesso movimento di prima ma più breve e senza rimbalzo (prima 0,6–0,8 s con
   un'oscillazione oltre il punto d'arrivo: a ogni tocco su «+» si muovevano ~20 cifre per quasi un secondo) */
.pd-in{animation:pd-in .32s cubic-bezier(.22,1,.36,1) backwards;}
.pd-swap{animation:pd-swap .26s cubic-bezier(.22,1,.36,1) backwards;}
.pd-old{position:absolute;left:0;top:0;pointer-events:none;animation:pd-out .18s cubic-bezier(.4,0,1,1) forwards;}
@keyframes pd-in{from{opacity:0;transform:translateY(-.75em) scale(.78);filter:blur(5px);}50%{opacity:1;filter:blur(0);}to{opacity:1;transform:none;filter:blur(0);}}
@keyframes pd-swap{from{opacity:0;transform:translateY(-.6em) scale(.85);filter:blur(4px);}45%{opacity:1;filter:blur(0);}to{opacity:1;transform:none;filter:blur(0);}}
@keyframes pd-out{to{opacity:0;transform:translateY(.7em) scale(.85);filter:blur(4px);}}
@media (prefers-reduced-motion: reduce){.pd-in,.pd-swap{animation:none;}.pd-old{display:none;}}

/* ============ Match: schermata a gradiente, in linea con le altre ============ */
.match-hero{margin-top:0;}   /* subito sotto il logo, come «Dove vuoi mangiare?» in Home */
.preset-row{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px;}
.preset-row::-webkit-scrollbar{display:none;}
.preset-chip{flex-shrink:0;padding:10px 16px;border-radius:100px;background:var(--surface);font-size:13px;font-weight:700;
  box-shadow:0 2px 10px rgba(36,37,42,.06);transition:transform .12s ease,background-color .2s ease;}
.preset-chip:active{transform:scale(.95);}
.preset-chip.on{background:var(--grad-blue);color:#fff;}
/* «Un pasto dei miei macro» finché i macro non sono calcolati: spento, al tocco invita a calcolarli */
.preset-chip.preset-off{background:var(--surface-2);color:var(--muted);opacity:.6;}
.match-form{padding:18px;}
.match-field{margin-bottom:12px;padding:14px 16px 16px;border-radius:20px;}
.match-field.mf-c{background:var(--carb-dim);}
.match-field.mf-p{background:var(--protein-dim);}
.match-field.mf-f{background:var(--fat-dim);}
.match-field label{font-family:'Poppins',sans-serif;font-size:14px;font-weight:600;color:var(--ink);}
.mf-num{background:var(--surface);border-radius:12px;padding:5px 12px;}
.mf-num input{font-size:18px;}
input[type=range].mslider{background:linear-gradient(90deg,color-mix(in srgb,var(--mc) 55%,#fff),var(--mc)) 0 / var(--fill,0%) 100% no-repeat,color-mix(in srgb,var(--mc) 16%,var(--surface));height:9px;border-radius:9px;}
input[type=range].mslider::-webkit-slider-thumb{width:26px;height:26px;background:#fff;border:0;box-shadow:0 0 0 4px var(--mc),0 5px 12px rgba(0,0,0,.22);}
input[type=range].mslider::-moz-range-thumb{width:20px;height:20px;background:#fff;border:0;box-shadow:0 0 0 4px var(--mc);}
.kcal-derived{background:var(--surface-2);border-radius:20px;padding:14px 18px;margin-top:4px;}
.kcal-derived .n{font-family:'Poppins',sans-serif;font-size:26px;font-weight:600;line-height:1.15;}
.match-cta{background:var(--grad-green);box-shadow:0 16px 28px -14px var(--glow-green);padding:17px 22px;font-size:16px;}
.fr-static{cursor:default;}



/* riepilogo "Il tuo pasto" */
/* Riepilogo "Il tuo pasto" del Match (renderMatchSummarySection in match.js) */
.mms-card{background:var(--surface);border-radius:var(--radius-l);padding:18px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.mms-top{display:flex;align-items:center;gap:16px;}
.mms-ring{flex-shrink:0;}
.mms-info{flex:1;min-width:0;}
.mms-pct{font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;color:var(--muted);margin-top:8px;line-height:1.2;}
.mms-pct b{font-size:26px;color:var(--ink);margin-right:2px;}
.mms-bar{height:6px;border-radius:100px;background:var(--surface-2);margin-top:9px;overflow:hidden;}
.mms-bar i{display:block;height:100%;border-radius:inherit;background:var(--grad-green);}
.mms-price{flex-shrink:0;align-self:flex-start;text-align:right;background:var(--accent-dim);border-radius:14px;padding:8px 12px;}
.mms-price b{display:block;font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;color:var(--accent);line-height:1.1;}
.mms-price span{display:block;font-size:11px;font-weight:700;color:var(--muted);margin-top:2px;}
.mms-macros{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
.mms-row{border-radius:16px;padding:11px 13px;background:var(--mms-dim);}
.mms-c{--mms-col:var(--carb);--mms-dim:var(--carb-dim);}
.mms-p{--mms-col:var(--protein);--mms-dim:var(--protein-dim);}
.mms-f{--mms-col:var(--fat);--mms-dim:var(--fat-dim);}
.mms-rh{display:flex;align-items:center;gap:7px;}
.mms-dot{width:8px;height:8px;border-radius:50%;background:var(--mms-col);flex-shrink:0;}
.mms-nm{font-size:12px;font-weight:700;color:var(--ink);flex:1;}
.mms-rh .md{margin-top:0;font-size:11px;background:var(--surface);padding:2px 8px;border-radius:100px;}
.mms-val{display:flex;align-items:baseline;gap:5px;margin-top:6px;}
.mms-val b{font-family:'Poppins',sans-serif;font-weight:700;font-size:20px;color:var(--mms-col);line-height:1;}
.mms-val span{font-size:11.5px;font-weight:600;color:var(--muted);}
.mms-track{height:5px;border-radius:100px;background:var(--line);background:color-mix(in srgb, var(--mms-col) 18%, var(--surface));margin-top:8px;overflow:hidden;}
.mms-track i{display:block;height:100%;border-radius:inherit;background:var(--mms-col);}
.mms-pricebig b{color:var(--accent);}
.mms-note{font-size:11px;font-weight:700;color:var(--muted);margin-top:2px;}
.mms-rh .md-share{color:var(--mms-col);}
/* Riepilogo usato fuori dal Match (Crea il tuo pasto, pianificatore): stesso distacco dal blocco sopra */
.build-slot + .mms-card, .mms-card{margin-top:20px;}
/* Indicatore % del Match nello stile del ring dei macro */
.pct-ring{flex-shrink:0;}
.fr-pct{color:var(--accent);}
.pct-ring .fr-num{font-size:13.5px;font-weight:700;}
.pct-ring .fr-num small{font-size:.62em;font-weight:700;margin-left:1px;}
.mr-pct{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;}
.mr-pct-l{font-size:9.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);text-transform:lowercase;}
.mr-thumb.mr-thumb-img{overflow:hidden;}
.mr-thumb.mr-thumb-img img{width:90%;height:90%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.14));}
@media (min-width:640px){ .mms-macros{grid-template-columns:repeat(3,1fr);} }
@media (max-width:380px){ .mms-top{gap:12px;} .mms-pct b{font-size:22px;} }
.md{display:block;font-size:11px;font-weight:800;margin-top:2px;}
.md-ok{color:var(--accent);}
.md-over{color:var(--danger);}
.md-under{color:var(--muted);}
.mm-note{margin:-8px 0 12px;font-size:12px;line-height:1.5;color:var(--muted);}

/* piatti pronti trovati */
.mr-macros span{padding:3px 8px;border-radius:100px;background:var(--surface-2);font-weight:700;}
.mr-macros .mm-c{background:var(--carb-dim);color:var(--carb);}
.mr-macros .mm-p{background:var(--protein-dim);color:var(--protein);}
.mr-macros .mm-f{background:var(--fat-dim);color:var(--fat);}

/* ============ Coerenza visiva: pulsanti, segmenti, stati vuoti, liste ============ */
.banner-hero.coral{background:linear-gradient(135deg,#e5533f 0%,#f0765a 45%,#f59a63 100%);box-shadow:0 16px 30px -18px rgba(229,83,63,.7);}

/* pulsante principale a gradiente in tutta l'app */
.btn-primary{background:var(--grad-green);box-shadow:0 14px 26px -14px var(--glow-green);}
.btn-primary:disabled{box-shadow:none;}
/* interruttori a segmenti (Al tavolo / Ritiro / Delivery, calcolo, ...) */
.seg-btn.active{background:var(--grad-green);color:#fff;box-shadow:0 10px 18px -12px var(--glow-green);}
/* campo attivo */
.text-input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(92,184,92,.18);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);}   /* rgba: browser senza color-mix */
/* stati vuoti: emoji in un cerchio morbido */
.empty-state .glyph{display:flex;align-items:center;justify-content:center;width:88px;height:88px;margin:0 auto 14px;border-radius:50%;
  background:var(--accent-dim);font-size:38px;opacity:1;}
.empty-state .glyph svg{width:36px;height:36px;color:var(--accent);stroke-width:1.8;}
/* conferma d'ordine */
/* spunta verde sul fondo azzurro della conferma (sfumatura blu come le altre tab) */
.confirm-check{background:var(--grad-green);box-shadow:0 18px 30px -14px var(--glow-green);}

/* liste e riepiloghi: stessi riquadri colorati del resto dell'app */
.order-row{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:20px;}
.or-ic{width:44px;height:44px;flex-shrink:0;border-radius:14px;background:var(--carb-dim);display:flex;align-items:center;justify-content:center;}
.or-ic svg{width:21px;height:21px;stroke:var(--carb);}
.or-body{flex:1;min-width:0;}
.order-row .top{font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);}
.order-row .items{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.4;}
.or-price{flex-shrink:0;padding:7px 13px;border-radius:100px;background:var(--accent-dim);color:var(--ink);font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;}

/* ============ Carrello e Diario: grafica alleggerita ============
   Un solo tipo di scheda (bianca, angoli grandi, ombra leggera). Il colore compare solo dove dice qualcosa
   (macro, barre di avanzamento, interruttori attivi) o dove c'è un'azione (pulsante principale). */

/* macro in una riga */
.mline{display:inline-flex;flex-wrap:wrap;gap:0 9px;}
.mline b{font-weight:800;}
.mline .c b{color:var(--carb);}
.mline .p b{color:var(--protein);}
.mline .f b{color:var(--fat);}

/* ---- Carrello: righe in un'unica scheda ---- */
.cart-list{margin-top:14px;padding:2px 16px;background:var(--surface);border-radius:var(--radius-l);box-shadow:0 2px 14px rgba(36,37,42,.05);}
.cart-item:last-child{border-bottom:0;}
.cart-item .thumb{width:52px;height:52px;border-radius:14px;overflow:hidden;}
.cart-item .thumb .thumb-img,.od-thumb .thumb-img{width:100%;height:100%;object-fit:contain;display:block;}
.cart-item .thumb svg.fp-art,.od-thumb svg.fp-art{width:100%;height:100%;display:block;}
.cart-item .nm{font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;}
.cart-item .gm{font-size:11.5px;font-weight:600;}
.cart-item .macros{font-size:11px;color:var(--muted);margin-top:3px;}
.cart-item .right{align-self:stretch;justify-content:space-between;}
.cart-item .pr{font-family:'Poppins',sans-serif;font-weight:600;font-size:15px;color:var(--ink);}
.cart-item .remove-line{width:auto;margin:0;padding:6px;justify-content:center;color:var(--muted-2);}
.cart-item .remove-line svg{width:16px;height:16px;}
/* Voce che esce dal carrello (cestino): svanisce scivolando appena a sinistra mentre la riga si richiude (js/features/cart.js) */
.cart-item-out{overflow:hidden;opacity:0;transform:translateX(-16px);padding-top:0;padding-bottom:0;border-bottom-width:0;pointer-events:none;
  transition:opacity .2s ease-out,transform .28s ease-in,height .28s cubic-bezier(.4,0,.2,1) .06s,padding .28s cubic-bezier(.4,0,.2,1) .06s,border-width .28s ease .06s;}
@media (prefers-reduced-motion: reduce){.cart-item-out{transition:none;}}

/* ---- Carrello: totale ---- */
.cs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.cs-titles{min-width:0;}
.cs-price{font-family:'Poppins',sans-serif;font-weight:600;font-size:28px;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums;}
.cs-voucher{margin-top:4px;font-size:12px;font-weight:700;color:var(--accent);}
.cs-body{display:flex;align-items:center;gap:18px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
.cs-rows{flex:1;min-width:0;}
.cs-row{display:flex;align-items:center;gap:8px;padding:6px 0;}
.cs-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.cs-name{flex:1;min-width:0;font-size:12px;font-weight:700;}
.cs-val{font-family:'Inter',sans-serif;font-weight:800;font-size:13px;white-space:nowrap;}
.cs-val small{font-size:11px;color:var(--muted);}
.cs-pct{width:34px;text-align:right;font-size:11px;font-weight:700;color:var(--muted);}

/* ---- Carrello: azioni ---- */
.cart-go{margin-top:20px;}
.cart-links{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 22px;margin-top:12px;}
.cart-links button{display:inline-flex;align-items:center;gap:6px;padding:8px 2px;font-size:12.5px;font-weight:700;color:var(--accent);text-align:center;}
.cart-links svg{width:15px;height:15px;flex-shrink:0;}
.cart-clear{display:block;width:100%;margin:2px 0 4px;padding:10px;font-size:12px;font-weight:700;color:var(--muted);text-align:center;}
@media (hover:hover){.cart-clear:hover{color:var(--danger);}}

/* ---- Diario: riepilogo ---- */
.diary-summary{padding:20px;background:var(--surface);}
.ds-head{justify-content:flex-start;gap:20px;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line);}
.ds-ringwrap{position:relative;width:108px;height:108px;flex-shrink:0;}
.ds-ring{display:block;}
.dsr-fill{color:var(--accent);transition:none;}
.dsr-fill.dsr-over{color:var(--danger);}
/* le righe dei macro del Diario riusano quelle del riepilogo pasto (.mms-*): qui niente bordo sopra, c'è già quello di .ds-head */
.ds-macros{margin-top:0;padding-top:0;border-top:0;}
.ds-ring.anim .dsr-fill{animation:dsr-draw 1.1s cubic-bezier(.22,1,.36,1) .05s backwards;}
@keyframes dsr-draw{from{stroke-dashoffset:var(--circ);}to{stroke-dashoffset:var(--off);}}
.ds-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.ds-cnum{font-family:'Poppins',sans-serif;font-weight:600;font-size:24px;line-height:1.05;font-variant-numeric:tabular-nums;}
.ds-csub{font-size:11px;font-weight:700;color:var(--muted);margin-top:1px;}
.ds-info{flex:1;min-width:0;}
.ds-big{font-family:'Poppins',sans-serif;font-weight:600;font-size:32px;line-height:1.05;font-variant-numeric:tabular-nums;}
.ds-info .ds-lbl{font-size:12px;margin-top:3px;}
.ds-goal{margin-top:10px;font-size:12px;font-weight:700;color:var(--ink);}

/* ---- Diario: giorno di allenamento / libero in una scheda ---- */
.dt-group{margin-top:12px;overflow:hidden;background:var(--surface);border-radius:var(--radius-l);box-shadow:0 2px 14px rgba(36,37,42,.05);}
.dt-group .diary-train-row{margin:0;border-radius:0;background:transparent;box-shadow:none;padding:14px 18px;}
.dt-group .diary-train-row + .diary-train-row{border-top:1px solid var(--line);}
.dtr-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;}

/* ---- Diario: acqua e passi in una scheda a due colonne ---- */
.tracker-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;overflow:hidden;background:var(--surface);border-radius:var(--radius-l);box-shadow:0 2px 14px rgba(36,37,42,.05);}
.tracker-grid .tracker{padding:16px;border-radius:0;background:transparent;box-shadow:none;-webkit-mask:none;mask:none;}
.tracker-grid .tracker + .tracker{border-left:1px solid var(--line);}
.tk-head{margin-bottom:4px;}
.tracker .tk-val{font-family:'Poppins',sans-serif;font-weight:600;font-size:22px;line-height:1.15;margin-bottom:9px;font-variant-numeric:tabular-nums;}
.tracker .tk-val small{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:var(--muted);}
.tk-head .tk-edit-btn{width:24px;height:24px;margin:-4px -4px 0 0;background:transparent;color:var(--muted-2);}
.tk-stepper{flex-wrap:wrap;gap:4px 12px;}

/* ---- Diario: note e pasti ---- */
.diary-note{margin:10px 6px 0;font-size:11px;line-height:1.5;color:var(--muted);}

/* suggerimenti: un'unica scheda con righe separate */
.sugg-list{margin-top:10px;padding:2px 16px;background:var(--surface);border-radius:var(--radius-l);box-shadow:0 2px 14px rgba(36,37,42,.05);}
.sugg-list .sugg-card{margin:0;padding:12px 0;border-radius:0;background:transparent;box-shadow:none;}
.sugg-list .sugg-card + .sugg-card{border-top:1px solid var(--line);}

/* Calorie = il totale, quindi diverso dai macro: scuro quando l'anello mostra il totale, neutro quando è acceso un macro. Un tocco riporta sul totale */
.nutri-stat.kcal{background:var(--surface-2);transition:background-color .25s ease,transform .12s ease;}
.nutri-stat.kcal .val{color:var(--ink);}
.nutri-stat.kcal .lbl{display:flex;align-items:center;gap:5px;transition:color .25s ease,opacity .25s ease;}
.nutri-stat.kcal .ns-ic{display:flex;flex-shrink:0;}
.nutri-stat.kcal .ns-ic svg{width:13px;height:13px;}
.nutri-stat.kcal.on{background:var(--ink);}
.nutri-stat.kcal.on .val{color:var(--on-ink);}
.nutri-stat.kcal.on .lbl{color:var(--on-ink);opacity:.78;}
@media (prefers-reduced-motion: reduce){.nutri-stat.kcal,.nutri-stat.kcal .lbl{transition:none;}}

/* ---------- Aggiungi alimento (Diario) ---------- */
.dadd-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:14px;padding:4px;background:var(--surface);border-radius:100px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.dadd-slot{border:0;background:transparent;border-radius:100px;padding:10px 4px;font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;transition:background .2s ease,color .2s ease;}
.dadd-slot.active{background:var(--accent);color:#fff;box-shadow:0 6px 14px -8px var(--glow-green);}
.dadd-search{margin-top:14px;padding:15px 18px;}
.dadd-search input{font-size:15px;}
.dadd-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.dadd-qa{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;border:0;cursor:pointer;font:inherit;
  background:var(--surface);color:var(--ink);border-radius:var(--radius-l);padding:16px;box-shadow:0 2px 14px rgba(36,37,42,.05);transition:transform .12s ease,box-shadow .2s ease;}
.dadd-qa:active{transform:scale(.97);}
.dadd-qa .dqa-ic{width:40px;height:40px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--accent-dim);color:var(--accent);margin-bottom:8px;}
.dadd-qa .dqa-ic svg{width:21px;height:21px;}
.dadd-qa .dqa-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;line-height:1.2;}
.dadd-qa .dqa-sub{font-size:11px;line-height:1.35;color:var(--muted);}
.dadd-qa-scan{background:var(--grad-green);color:#fff;box-shadow:0 14px 26px -16px var(--glow-green);}
.dadd-qa-scan .dqa-ic{background:rgba(255,255,255,.22);color:#fff;}
.dadd-qa-scan .dqa-sub{color:rgba(255,255,255,.85);}
.dadd-qa.active{box-shadow:0 0 0 2px var(--accent);}
.dadd-h{margin-top:22px;}
.dadd-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;background:var(--surface);border-radius:var(--radius-l);padding:18px 10px;box-shadow:0 2px 14px rgba(36,37,42,.05);}
.dadd-cats .cat-tile span:last-child{font-size:11.5px;}
#dadd-manual{margin-top:14px;}

/* ---------- Diario: pasti (una card per pasto) ---------- */
.dm-list{display:flex;flex-direction:column;gap:14px;margin-top:14px;}
/* Gerarchia: il PASTO è l'intestazione forte (icona grande, nome e kcal grandi); gli ALIMENTI sono
   figli, raccolti in un riquadro rientrato e più tenue, con una linea del colore del pasto a
   sinistra che li "aggancia" all'intestazione, e testi/miniature più piccoli.
   --dm = colore del pasto (inline su .dm-card). */
.dm-card{background:var(--surface);border-radius:var(--radius-l);box-shadow:0 2px 14px rgba(36,37,42,.05);padding:16px 14px 14px;}
.dm-head{display:flex;align-items:center;gap:12px;}
.dm-ic{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dm-ic svg{width:23px;height:23px;}
.dm-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.dm-trow{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.dm-name{font-family:'Poppins',sans-serif;font-weight:700;font-size:17.5px;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;gap:7px;}
.dm-count{font-family:'Inter',sans-serif;font-size:11px;font-weight:800;color:var(--dm);background:color-mix(in srgb, var(--dm) 14%, transparent);border-radius:100px;min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;}
.dm-sub{font-family:'Inter',sans-serif;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;}
.dm-sub .mline{flex-wrap:nowrap;}
.dm-kcal{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;color:var(--muted);flex-shrink:0;white-space:nowrap;}
.dm-kcal b{font-family:'Poppins',sans-serif;font-size:19px;font-weight:700;color:var(--ink);}
.dm-add{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--accent-dim);color:var(--accent);}
.dm-add svg{width:17px;height:17px;stroke-width:2.6;}
.dm-card-empty .dm-add{background:var(--accent);color:#fff;}
.dm-items{margin:14px 0 0 30px;padding:2px 12px;background:var(--surface-2);border-radius:16px;position:relative;}
.dm-items::before{content:'';position:absolute;left:-8px;top:-14px;bottom:18px;width:2px;border-radius:2px;background:color-mix(in srgb, var(--dm) 45%, transparent);}
.dm-item{display:flex;align-items:center;gap:10px;padding:9px 0;}
.dm-item + .dm-item{border-top:1px solid var(--line-strong);}
.dm-thumb{width:30px;height:30px;border-radius:9px;background:var(--surface);color:var(--muted);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.dm-thumb svg{width:16px;height:16px;}
.dm-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.dm-iname{font-weight:600;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-imeta{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;}
.dm-imeta .mline{flex-wrap:nowrap;}
.dm-det{color:var(--muted);}
.dm-det::before{content:'·';margin-right:6px;}
.dm-ikcal{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;color:var(--muted);flex-shrink:0;white-space:nowrap;}
.dm-ikcal b{font-size:13px;font-weight:700;color:var(--ink);}
.dm-del{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--muted-2);margin-right:-6px;}
.dm-del svg{width:12px;height:12px;}
@media (hover:hover){
  .dm-del:hover{background:var(--surface-2);color:var(--danger);}
  .dm-add:hover{filter:brightness(.97);}
}

/* Rimozione di un alimento dal diario: la riga scivola via sfumando e lo spazio si richiude
   (come .cart-item-out). .dm-item-slide = la riga che esce; .dm-item-out = ciò che si chiude in
   altezza (la riga, oppure l'intero blocco se era l'ultima del pasto). */
.dm-item-slide{opacity:0;transform:translateX(-24px);pointer-events:none;transition:opacity .2s ease-out,transform .28s ease-in;}
.dm-item-out{overflow:hidden;padding-top:0;padding-bottom:0;margin-top:0;border-top-width:0;pointer-events:none;
  transition:height .28s cubic-bezier(.4,0,.2,1) .06s,padding .28s cubic-bezier(.4,0,.2,1) .06s,margin .28s cubic-bezier(.4,0,.2,1) .06s,border-width .28s ease .06s;}
@media (prefers-reduced-motion: reduce){.dm-item-slide,.dm-item-out{transition:none;}}

/* ---------- Ordine → diario: "Lo aggiungiamo al tuo diario?" (conferma ordine + Diario) ---------- */
.odp-card{width:100%;box-sizing:border-box;text-align:left;margin-top:20px;padding:16px;background:var(--surface);border-radius:var(--radius-l);
  box-shadow:0 2px 14px rgba(36,37,42,.05);border:1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);}
.diary-summary ~ .odp-card, .weight-tile ~ .odp-card{margin-top:14px;}
.odp-head{display:flex;align-items:flex-start;gap:12px;}
.odp-ic{width:42px;height:42px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--accent-dim);color:var(--accent);}
.odp-ic svg{width:21px;height:21px;}
.odp-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.odp-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:15.5px;color:var(--ink);}
.odp-sub{font-family:'Inter',sans-serif;font-size:12px;color:var(--muted);}
.odp-sub b{color:var(--ink);font-weight:800;}
.odp-macros{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);}
.odp-q{font-size:12px;font-weight:700;color:var(--muted);margin-top:14px;}
.odp-slots{margin-top:8px;background:var(--surface-2);box-shadow:none;}
.odp-actions{display:flex;gap:8px;margin-top:14px;}
.odp-actions .btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;}
.odp-actions .btn-primary{flex:1.6;}
.odp-actions .btn svg{width:15px;height:15px;stroke-width:2.6;}
.odp-done{display:flex;align-items:center;gap:12px;padding:12px 14px;border-color:transparent;}
.odp-done .odp-ic{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;}
.odp-done .odp-ic svg{width:16px;height:16px;stroke-width:2.8;}
.odp-done .odp-title{font-size:14px;}
.odp-link{font-size:12.5px;font-weight:800;color:var(--accent);padding:8px 12px;border-radius:100px;background:var(--accent-dim);flex-shrink:0;}

/* Cambiare idea sull'ordine nel diario: "Modifica" (sposta pasto / rimuovi) e "Non aggiunto → Aggiungi" */
.odp-done{flex-wrap:wrap;}
.odp-done .odp-link{display:inline-flex;align-items:center;gap:5px;}
.odp-done .odp-link svg{width:13px;height:13px;stroke-width:2.8;}
.odp-link-ghost{background:var(--surface-2);color:var(--ink);}
.odp-edit{width:100%;margin-top:2px;padding-top:12px;border-top:1px solid var(--line);}
.odp-edit .odp-q{margin-top:0;}
.odp-remove{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--danger);padding:6px 0;}
.odp-remove svg{width:14px;height:14px;}
.odp-hint{font-size:11px;color:var(--muted);margin-top:6px;}
.odp-off .odp-ic{background:var(--surface-2);color:var(--muted);}
.odp-off .odp-sub{font-size:11.5px;}

/* ---------- Ordini effettuati: elenco e pagina del singolo ordine ---------- */
.ol-list{display:flex;flex-direction:column;gap:10px;margin-top:14px;}
.ol-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;background:var(--surface);border-radius:20px;box-shadow:0 2px 10px rgba(36,37,42,.05);transition:transform .15s ease, box-shadow .2s ease;}
@media (hover:hover){ .ol-row:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(36,37,42,.22);} }
.ol-row:active{transform:scale(.99);}
.ol-ic{width:44px;height:44px;flex-shrink:0;border-radius:14px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:21px;color:var(--ink);}
.ol-ic svg{width:22px;height:22px;}
.ol-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.ol-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ol-num{font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);}
.ol-items{font-size:12.5px;font-weight:600;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;}
.ol-meta{font-size:11.5px;color:var(--muted);line-height:1.45;}
.ol-diary{display:inline-flex;align-items:center;gap:3px;color:var(--accent);font-weight:700;}
.ol-diary svg{width:12px;height:12px;}
.ol-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex-shrink:0;}
.ol-chev{display:flex;color:var(--muted-2);}
.ol-chev svg{width:15px;height:15px;}
.os-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;padding:3px 9px;border-radius:100px;white-space:nowrap;}
.os-chip svg{width:11px;height:11px;stroke-width:3;}
.os-active{background:var(--accent-dim);color:var(--accent);}
.os-active i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:otbLive 2s ease-out infinite;}
.os-done{background:var(--surface-2);color:var(--muted);}
.os-sched{background:var(--carb-dim);color:var(--carb);}
.od-head{display:flex;align-items:center;gap:12px;margin-top:14px;padding:16px;background:var(--surface);border-radius:var(--radius-l);box-shadow:0 2px 14px rgba(36,37,42,.05);}
.od-ic{width:50px;height:50px;border-radius:16px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;color:var(--ink);}
.od-ic svg{width:25px;height:25px;}
.od-head-body{flex:1;min-width:0;}
.od-num{font-family:'Poppins',sans-serif;font-weight:700;font-size:18px;color:var(--ink);}
.od-when{font-size:12.5px;color:var(--muted);margin-top:2px;}
.od-track{margin-top:12px;}
.od-label{margin-top:22px;}
.od-items{background:var(--surface);border-radius:var(--radius-l);box-shadow:0 2px 14px rgba(36,37,42,.05);padding:4px 14px;}
.od-item{display:flex;align-items:center;gap:12px;padding:12px 0;}
.od-item + .od-item{border-top:1px solid var(--line);}
.od-thumb{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.od-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.od-item-name{font-weight:700;font-size:13.5px;color:var(--ink);}
.od-qty{color:var(--accent);}
.od-item-meta{font-size:11.5px;color:var(--muted);}
.od-item-macros{font-family:'Inter',sans-serif;font-size:11px;color:var(--muted);}
.od-item-price{font-family:'Poppins',sans-serif;font-weight:600;font-size:13.5px;color:var(--ink);flex-shrink:0;}
.od-empty{font-size:12.5px;color:var(--muted);padding:10px 0;}
.od-info{margin-top:14px;background:var(--surface);border-radius:var(--radius-l);box-shadow:0 2px 14px rgba(36,37,42,.05);padding:6px 16px;}
.od-info-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;font-size:13px;color:var(--muted);}
.od-info-row + .od-info-row{border-top:1px solid var(--line);}
.od-info-row b{color:var(--ink);font-weight:700;text-align:right;}
.od-reorder{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:8px;}
.od-reorder svg{width:16px;height:16px;}
@media (prefers-reduced-motion: reduce){ .os-active i{animation:none;} .ol-row{transition:none;} }

/* Fonte dei dati nutrizionali certificati (CREA): obbligatoria dove si usano quei valori */
.crea-source{font-size:11px;line-height:1.45;color:var(--muted);margin-top:14px;display:flex;gap:5px;align-items:flex-start;}
.crea-source svg{width:12px;height:12px;flex-shrink:0;margin-top:1px;color:var(--accent);stroke-width:3;}
.crea-source a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;}
.crea-source-top{margin-top:6px;}

/* Animazione Lottie "In preparazione": riempie il riquadro dell'animazione del tracking */
.ot-lottie{display:block;width:100%;height:100%;}
.ot-lottie svg{width:100% !important;height:100% !important;}
.ot-lottie:not(.ot-lottie-on) svg{width:64px !important;height:64px !important;}

/* Tracking (riprogettato): card con bordo sfumato nei colori dei tasti gradiente del sito
   (--grad-green: verde → azzurro). In alto la fase in corso in grande e il tempo che manca, al
   centro i passaggi a sinistra e la scena animata a destra, in fondo la barra complessiva. */
.order-tracker{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;
  padding:16px 0 0;border:1.5px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(135deg,rgba(18,160,98,.55),rgba(42,184,113,.25) 45%,rgba(22,153,205,.55)) border-box;
  box-shadow:0 22px 44px -26px var(--glow-green),0 2px 10px rgba(36,37,42,.05);}

/* intestazione */
.ot-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:0 16px 0 18px;}
.ot-head-l{min-width:0;}
.ot-live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#12a062;background:rgba(18,160,98,.10);padding:4px 9px 4px 8px;border-radius:100px;}
.ot-live i{width:7px;height:7px;border-radius:50%;background:#2ab871;box-shadow:0 0 0 0 rgba(42,184,113,.6);animation:otLive 1.6s ease-out infinite;}
@keyframes otLive{0%{box-shadow:0 0 0 0 rgba(42,184,113,.55);}100%{box-shadow:0 0 0 7px rgba(42,184,113,0);}}
.ot-live svg{width:11px;height:11px;stroke:currentColor;stroke-width:3;}
.ot-title{margin-top:8px;font-family:'Poppins',sans-serif;font-weight:700;font-size:21px;line-height:1.15;letter-spacing:-.01em;
  background:var(--grad-green);-webkit-background-clip:text;background-clip:text;color:transparent;}
.ot-sub{margin-top:3px;font-size:12px;font-weight:600;color:var(--muted);}
.ot-eta{flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:70px;padding:8px 12px;border-radius:18px;
  color:#fff;background:var(--grad-green);box-shadow:0 12px 22px -12px var(--glow-green);text-align:center;}
.ot-eta-k{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.85;}
.ot-eta b{font-family:'Poppins',sans-serif;font-size:22px;font-weight:700;line-height:1.1;white-space:nowrap;}
.ot-eta small{font-size:12px;font-weight:600;}
.ot-done .ot-eta{width:50px;height:50px;min-width:0;padding:0;border-radius:50%;}
.ot-eta > svg{width:24px;height:24px;stroke:#fff;stroke-width:3;}

/* corpo: passaggi + scena */
.ot-main{position:relative;display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:4px;align-items:center;padding:4px 2px 0 18px;}
.ot-steps{position:relative;z-index:1;grid-column:1;grid-row:1;padding-top:6px;}
.ot-hero{position:relative;z-index:1;grid-column:2;grid-row:1;align-self:stretch;display:flex;align-items:center;justify-content:center;
  margin:0;}
.ot-hero .ot-anim{width:100%;height:100%;max-width:none;align-self:stretch;}
.ot-hero .ot-anim > svg{width:100%;height:100%;}
@media (max-width:380px){.ot-title{font-size:19px;} .order-tracker .ot-label{font-size:12.5px;}}

/* passaggi: pallini e linea nel gradiente dei tasti; sotto la fase in corso la linea si riempie
   man mano (--f, aggiornata ogni secondo da router.js) */
.order-tracker .ot-step{padding-bottom:20px;}
.order-tracker .ot-step:not(:last-child)::before{left:11px;top:26px;bottom:2px;width:3px;border-radius:3px;background:var(--line);}
.order-tracker .ot-step.done:not(:last-child)::before{background:linear-gradient(180deg,#12a062,#2ab871);}
.order-tracker .ot-step.current:not(:last-child)::after{content:'';position:absolute;left:11px;top:26px;width:3px;border-radius:3px;
  height:calc(100% - 28px);transform-origin:top;transform:scaleY(var(--f,0));background:linear-gradient(180deg,#2ab871,#1699cd);transition:transform 1s linear;}
.order-tracker .ot-dot{background:var(--line);box-shadow:inset 0 0 0 2px var(--line-strong);}
.order-tracker .ot-step.done .ot-dot{background:var(--grad-green);box-shadow:0 4px 10px -4px var(--glow-green);}
.order-tracker .ot-step.current .ot-dot{background:var(--grad-green);box-shadow:0 0 0 4px rgba(42,184,113,.16),0 6px 14px -4px var(--glow-green);}
.order-tracker .ot-step.current .ot-dot::before{content:'';width:8px;height:8px;border-radius:50%;background:#fff;}
.order-tracker .ot-step.current .ot-dot::after{border-color:#2ab871;}
.order-tracker .ot-label{font-size:13.5px;}
.order-tracker .ot-step.current .ot-label{font-weight:800;color:var(--ink);}
.order-tracker .ot-step:not(.done):not(.current) .ot-label{color:var(--muted-2, var(--muted));font-weight:600;}
.ot-done .ot-step.current .ot-dot::before{display:none;}
.ot-done .ot-step.current .ot-dot::after{animation:none;opacity:0;}

/* barra complessiva a tutta larghezza sul fondo della card, con un riflesso che scorre */
.ot-bar{position:relative;overflow:hidden;height:6px;margin-top:2px;background:var(--line);background:color-mix(in srgb, var(--line) 70%, transparent);}
.ot-bar i{position:relative;display:block;height:100%;background:var(--grad-green);border-radius:0 6px 6px 0;overflow:hidden;width:100%;translate:calc(var(--p,0) * 100% - 100%) 0;transition:translate 1s linear;}
.ot-bar i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:otShine 2.4s ease-in-out infinite;}
.ot-done .ot-bar i{border-radius:0;}
.ot-done .ot-bar i::after{animation:none;display:none;}
@keyframes otShine{0%{transform:translateX(-100%);}60%,100%{transform:translateX(100%);}}
@media (prefers-reduced-motion: reduce){.ot-live i,.ot-bar i::after{animation:none;}}
/* "Consegnato": inquadrata sul sacchetto, le braccia dei due che se lo passano escono dai lati e sfumano */
.ot-hero .ot-lottie-delivered{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 84%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24%,#000 84%,transparent 100%);}
/* Riquadro dell'animazione ad altezza fissa: prima l'SVG Lottie prendeva l'altezza dalla larghezza e su
   schermi larghi la card cresceva (fino a ~400px) e la scena usciva dal rettangolo. container-type:size
   serve alla scena orizzontale "in consegna" per adattarsi al più piccolo tra larghezza e altezza. */
.ot-hero{height:220px;container-type:size;}
@media (min-width:600px){.ot-hero{height:260px;}}
.ot-hero .ot-anim{display:flex;align-items:center;justify-content:center;overflow:visible;}
/* animazioni dell'ordine (tavolo, consegna, ritiro) più grandi del 20% */
.ot-hero .ot-anim > .ot-lottie{scale:var(--ot-s,1);}
@media (max-width:380px){.ot-hero{height:190px;}}

/* Link secondario sotto i pulsanti (Password dimenticata?) */
.su-demo-skip{display:block;margin:12px auto 0;padding:6px 10px;font-size:13px;font-weight:700;color:var(--muted);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb, var(--muted) 45%, transparent);}
@media (hover:hover){.su-demo-skip:hover{color:var(--ink);}}
/* "Ordine ricevuto": la spunta coi coriandoli risultava bassa rispetto ai passaggi, alzata un po' */
.ot-hero .ot-lottie-received{transform:translateY(-14%);}
/* "In preparazione" e "In consegna": alzate leggermente, come chiesto ("Consegnato" resta com'è) */
.ot-hero .ot-lottie[data-anim="preparing"],.ot-hero .ot-lottie-onway{transform:translateY(-8%);}
/* Telefono: l'animazione sta in altezza esattamente tra il primo passaggio ("Ordine ricevuto") e l'ultimo
   ("Consegnato"). Il riquadro non ha più un'altezza fissa: con container-type:size non conta nel calcolo
   della riga, quindi si allunga quanto l'elenco dei passaggi (senza spazio sotto l'ultimo, spostato sul
   contenitore) e la scena si adatta dentro. Niente spostamenti verso l'alto: è già allineata. */
@media (max-width:599px){
  .ot-hero{height:auto;}
  .ot-steps{padding-top:0;}
  .order-tracker .ot-step:last-child{padding-bottom:0;}
  .ot-main{padding-top:14px;padding-bottom:20px;}
  .ot-hero .ot-lottie-received,.ot-hero .ot-lottie[data-anim="preparing"],.ot-hero .ot-lottie-onway{transform:none;}
}
/* Stesso rimedio per gli altri numeri scritti in un campo (grammi dei macro nel Match, macro manuali):
   su iPhone il margine interno nativo tagliava le cifre */
.mf-num input,.macro-input-row input{-webkit-appearance:none;appearance:none;border-radius:0;padding:0;margin:0;min-width:0;line-height:1.4;}
.mf-num input{width:3.6ch;}

/* ---------- Chiudi la giornata (Diario di oggi) ----------
   Stesso linguaggio del riquadro dell'ordine: bordo sottile sfumato nei colori dei tasti gradiente */
.close-day{margin-top:14px;padding:16px 16px 12px;border-radius:var(--radius-l);border:1.5px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(135deg,rgba(18,160,98,.55),rgba(42,184,113,.25) 45%,rgba(22,153,205,.55)) border-box;
  box-shadow:0 18px 36px -26px var(--glow-green),0 2px 10px rgba(36,37,42,.05);}
.cd-head{display:flex;align-items:center;gap:12px;}
.cd-ic{width:40px;height:40px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:var(--grad-green);color:#fff;box-shadow:0 10px 18px -10px var(--glow-green);}
.cd-ic svg{width:21px;height:21px;stroke:#fff;}
.cd-htxt{min-width:0;}
.cd-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:16.5px;line-height:1.2;
  background:var(--grad-green);-webkit-background-clip:text;background-clip:text;color:transparent;}
.cd-sub{margin-top:2px;font-size:12.5px;font-weight:600;color:var(--muted);}
.cd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.cd-chip{font-size:12px;font-weight:700;padding:5px 10px;border-radius:100px;}
.cd-chip b{font-weight:800;}
.cd-p{background:var(--protein-dim);color:var(--protein);}
.cd-c{background:var(--carb-dim);color:var(--carb);}
.cd-f{background:var(--fat-dim);color:var(--fat);}
.cd-note{margin-top:10px;font-size:12.5px;color:var(--muted);line-height:1.45;}
.cd-meal{margin-top:12px;border-radius:16px;background:var(--surface-2);padding:4px 12px;}
.cd-row{display:flex;align-items:center;gap:10px;padding:8px 0;}
.cd-row + .cd-row{border-top:1px solid var(--line);}
.cd-thumb{width:38px;height:38px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--surface);}
.cd-thumb > *{width:100%;height:100%;object-fit:cover;}
.cd-thumb .fp-icon svg{width:26px;height:26px;}
.cd-name{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--ink);}
.cd-g{font-family:'Poppins',sans-serif;font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap;}
.cd-g small{font-size:11px;color:var(--muted);margin-left:1px;}
.cd-fit{margin:10px 2px 0;font-size:12px;font-weight:700;color:#12a062;}
.close-day .cd-add{margin-top:12px;}
.cd-alt{display:block;margin:8px auto 0;padding:6px 10px;font-size:13px;font-weight:700;color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:color-mix(in srgb, var(--muted) 45%, transparent);}
.close-day.cd-done{display:flex;align-items:center;gap:12px;padding:14px 16px;}
.cd-htxt{flex:1;}
.cd-x{align-self:flex-start;flex-shrink:0;width:30px;height:30px;margin:-4px -6px 0 0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--muted);background:var(--surface-2);}
.cd-x svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;}
.cd-done .cd-x{align-self:center;margin:0 -4px 0 0;}
.cd-notify{display:flex;align-items:center;gap:6px;margin-top:0;text-decoration:none;font-weight:600;font-size:12.5px;}
.cd-notify svg{width:15px;height:15px;stroke:currentColor;}
.section + .close-day, .hero + .close-day{margin-top:18px;}

/* Giornata centrata: l'anello del Diario si chiude con un lampo di luce, una volta al giorno */
.ds-ringwrap.ds-closed::after{content:'';position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 rgba(42,184,113,.55),inset 0 0 0 0 rgba(255,255,255,0);animation:dsClosedGlow 1.4s ease-out 1.1s both;}
.ds-ringwrap.ds-closed .dsr-fill{animation:dsr-draw 1.1s cubic-bezier(.22,1,.36,1) .05s backwards, dsClosedArc 1.4s ease-out 1.1s both;}
@keyframes dsClosedGlow{0%{box-shadow:0 0 0 0 rgba(42,184,113,.55);}60%{box-shadow:0 0 0 14px rgba(42,184,113,0);}100%{box-shadow:0 0 0 14px rgba(42,184,113,0);}}
@keyframes dsClosedArc{0%,100%{filter:none;}35%{filter:drop-shadow(0 0 6px rgba(42,184,113,.9)) brightness(1.25);}}
@media (prefers-reduced-motion: reduce){.ds-ringwrap.ds-closed::after,.ds-ringwrap.ds-closed .dsr-fill{animation:none;}}

/* ---------- App installabile: invito in Home, barra "nuova versione", permesso notifiche ---------- */
.pwa-card{position:relative;display:flex;align-items:flex-start;gap:12px;margin-top:18px;padding:14px 40px 14px 14px;border-radius:var(--radius-l);
  border:1.5px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(135deg,rgba(18,160,98,.5),rgba(22,153,205,.5)) border-box;
  box-shadow:0 14px 30px -24px var(--glow-green);}
.pwa-ic{width:40px;height:40px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--grad-green);box-shadow:0 10px 18px -10px var(--glow-green);}
.pwa-ic svg{width:20px;height:20px;stroke:#fff;}
.pwa-txt{min-width:0;flex:1;}
.pwa-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:15px;color:var(--ink);}
.pwa-sub{margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--muted);font-weight:600;}
.pwa-share{display:inline-flex;vertical-align:-3px;width:17px;height:17px;color:#1699cd;}
.pwa-share svg{width:17px;height:17px;}
.pwa-btn{margin-top:10px;padding:8px 16px;border-radius:100px;font-size:13px;font-weight:800;color:#fff;background:var(--grad-green);box-shadow:0 10px 18px -10px var(--glow-green);}
.pwa-x{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);}
.pwa-x svg{width:15px;height:15px;}
.pwa-update{position:fixed;left:16px;right:16px;margin:0 auto;width:fit-content;max-width:520px;bottom:calc(100px + env(safe-area-inset-bottom,0px));z-index:60;
  display:flex;align-items:center;gap:12px;padding:10px 10px 10px 16px;border-radius:24px;line-height:1.3;
  background:linear-gradient(135deg,#2A2C33,#1B1C21);color:#fff;font-size:13px;font-weight:700;box-shadow:0 14px 28px -12px rgba(20,22,30,.55);}
/* «Sei offline»: piccola, nello spazio vuoto sopra il logo, non copre nulla e non intercetta i tocchi (js/core/net.js) */
.net-pill{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 2px);transform:translateX(-50%);z-index:45;pointer-events:none;
  display:flex;align-items:center;gap:6px;height:16px;padding:0 9px;border-radius:100px;white-space:nowrap;
  background:linear-gradient(135deg,#2A2C33,#1B1C21);color:#fff;font-size:10.5px;font-weight:700;line-height:1;}
.net-dot{width:6px;height:6px;border-radius:50%;background:var(--warn);}
.pwa-update button{flex-shrink:0;padding:8px 14px;border-radius:100px;background:var(--grad-green);color:#fff;font-weight:800;font-size:12.5px;}
.notif-perm .btn{display:inline-flex;}

/* ---------- Card condivisibile ---------- */
.hero-arch-wrap .hero-share{position:absolute;top:14px;right:64px;width:42px;height:42px;border-radius:50%;background:#FFFFFF;color:#1c1d22;
  display:flex;align-items:center;justify-content:center;z-index:3;box-shadow:0 4px 12px rgba(0,0,0,.14);transition:transform .12s ease;}
.hero-arch-wrap .hero-share:active{transform:scale(.9);}
.hero-arch-wrap .hero-share svg{width:18px;height:18px;}
.share-btn{display:flex;align-items:center;justify-content:center;gap:8px;}
.share-btn svg{width:17px;height:17px;}
.share-sheet{max-width:380px;}
.share-preview{display:block;width:100%;max-height:58vh;object-fit:contain;margin:12px 0 4px;border-radius:18px;box-shadow:0 14px 30px -18px rgba(20,22,30,.5);}
.share-sheet .btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;}
.share-sheet .btn-primary svg{width:17px;height:17px;}

/* ---------- Ordine di gruppo ---------- */
.grp-start{display:flex;align-items:center;gap:12px;width:100%;margin:6px 0 14px;padding:12px 14px;border-radius:var(--radius-l);
  background:var(--surface);box-shadow:0 2px 12px rgba(36,37,42,.05);text-align:left;}
.grp-ic{width:38px;height:38px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--grad-green);box-shadow:0 10px 18px -10px var(--glow-green);}
.grp-ic svg{width:19px;height:19px;stroke:#fff;}
.grp-start-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.grp-start-txt b{font-family:'Poppins',sans-serif;font-size:14.5px;font-weight:700;color:var(--ink);}
.grp-start-txt span{font-size:12px;font-weight:600;color:var(--muted);line-height:1.35;}
.grp-plus{width:30px;height:30px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--accent-dim);color:#12a062;}
.grp-plus svg{width:16px;height:16px;}
.grp-card{margin:6px 0 14px;padding:14px;border-radius:var(--radius-l);border:1.5px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,rgba(18,160,98,.5),rgba(22,153,205,.5)) border-box;
  box-shadow:0 14px 30px -24px var(--glow-green);}
.grp-head{display:flex;align-items:flex-start;gap:12px;}
.grp-head > div{flex:1;min-width:0;}
.grp-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:15.5px;color:var(--ink);}
.grp-sub{margin-top:2px;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.4;}
.grp-end{flex-shrink:0;font-size:12.5px;font-weight:800;color:var(--muted);padding:6px 4px;}
.grp-people{display:flex;gap:8px;overflow-x:auto;margin:12px -14px 0;padding:2px 14px 4px;scrollbar-width:none;}
.grp-people::-webkit-scrollbar{display:none;}
.grp-chip{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 14px;border-radius:16px;background:var(--surface-2);
  border:1.5px solid transparent;min-width:74px;}
.grp-chip-n{font-size:13px;font-weight:800;color:var(--ink);white-space:nowrap;}
.grp-chip-v{font-family:'Poppins',sans-serif;font-size:12px;font-weight:600;color:var(--muted);}
.grp-chip.on{border-color:#2ab871;background:var(--accent-dim);}
.grp-chip.on .grp-chip-v{color:#12a062;}
.grp-chip.add{flex-direction:row;align-items:center;gap:4px;font-size:13px;font-weight:800;color:#12a062;background:transparent;border:1.5px dashed color-mix(in srgb, #2ab871 60%, transparent);}
.grp-chip.add svg{width:14px;height:14px;}
.grp-invite{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px;padding:10px;border-radius:14px;
  font-size:13px;font-weight:800;color:#1699cd;background:var(--carb-dim);}
.grp-invite svg{width:16px;height:16px;}
.grp-link{display:block;margin:10px 0 0 50px;font-size:12.5px;font-weight:700;color:var(--muted);text-decoration:underline;text-underline-offset:3px;}
.grp-section{margin-top:6px;}
.grp-section + .grp-section{margin-top:16px;}
.grp-sec-head{display:flex;align-items:baseline;justify-content:space-between;padding:0 4px 8px;font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;color:var(--ink);}
.grp-sec-head b{font-weight:700;color:#12a062;}
.grp-empty{padding:14px 16px;font-size:12.5px;color:var(--muted);background:var(--surface);border-radius:var(--radius-m);}
.grp-assign-row{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:11.5px;font-weight:700;color:var(--muted);}
.grp-assign,.grp-current{font:inherit;font-weight:800;color:var(--ink);background:var(--surface-2);border:none;border-radius:10px;padding:4px 8px;max-width:150px;}
.grp-for{display:flex;align-items:center;gap:8px;margin-top:18px;padding:10px 14px;border-radius:14px;background:var(--accent-dim);font-size:13px;font-weight:700;color:#12a062;}
.grp-for svg{width:16px;height:16px;stroke:#12a062;flex-shrink:0;}
.grp-for .grp-current{margin-left:auto;background:var(--surface);}
.grp-quotas{margin-top:14px;padding:14px 16px;border-radius:var(--radius-l);background:var(--surface);box-shadow:0 2px 12px rgba(36,37,42,.05);}
.grp-q-title{font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:6px;}
.grp-q-row{display:flex;justify-content:space-between;padding:7px 0;font-size:13.5px;font-weight:700;color:var(--ink);}
.grp-q-row + .grp-q-row{border-top:1px solid var(--line);}
.grp-q-row b{font-family:'Poppins',sans-serif;font-weight:700;color:#12a062;}
.grp-link-input{width:100%;margin-top:12px;font-size:12px;}

/* Stati vuoti con le illustrazioni Lottie del tracking (carrello, ordini, diario) */
.empty-state .empty-lottie{display:block;width:min(210px,58vw);height:auto;margin:0 auto 6px;}
.empty-state .empty-lottie:not(.ot-lottie-on){height:auto;}
.empty-state .empty-lottie.ot-lottie-on svg{display:block;}
/* carrello vuoto: il sacchetto è inquadrato da fermo; quando si capovolge (pochi fotogrammi) esce un poco dal riquadro invece di venire tagliato */
.empty-state .empty-lottie[data-anim="emptyCart"] svg{overflow:visible;}
/* carrello vuoto un po' più piccolo (-12%) */
.empty-state .empty-lottie[data-anim="emptyCart"]{width:min(185px,51vw);}

/* Transizione card → scheda: la foto vola nel cerchio della scheda */
::view-transition-group(food-hero){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.8,.2,1);}
::view-transition-old(root),::view-transition-new(root){animation-duration:.24s;}
::view-transition-old(food-hero),::view-transition-new(food-hero){height:100%;object-fit:cover;overflow:hidden;border-radius:50%;}
/* il piatto grande della scheda non ha cerchio né ritaglio: arriva intero, con la sua ombra */
::view-transition-new(food-hero){object-fit:contain;overflow:visible;border-radius:0;}

/* Scheletri di caricamento: una luce che scorre al posto di mappa e animazioni finché non sono pronte */
@keyframes skelShine{from{background-position:-160% 0;}to{background-position:260% 0;}}
.delivery-map:empty,
.ot-hero .ot-lottie:not(.ot-lottie-on):not(.ot-lottie-off),
.empty-state .empty-lottie:not(.ot-lottie-on):not(.ot-lottie-off){
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%) var(--surface-2);
  background-size:60% 100%;background-repeat:no-repeat;animation:skelShine 1.3s ease-in-out infinite;}
.delivery-map:empty{min-height:220px;}
.ot-hero .ot-lottie:not(.ot-lottie-on):not(.ot-lottie-off){border-radius:24px;width:78%;height:70%;}
.empty-state .empty-lottie:not(.ot-lottie-on):not(.ot-lottie-off){border-radius:50%;width:150px;height:150px;}
.ot-hero .ot-lottie:not(.ot-lottie-on):not(.ot-lottie-off) > *,
.empty-state .empty-lottie:not(.ot-lottie-on):not(.ot-lottie-off) > *{visibility:hidden;}
html[data-theme="dark"] .delivery-map:empty,
html[data-theme="dark"] .ot-hero .ot-lottie:not(.ot-lottie-on):not(.ot-lottie-off),
html[data-theme="dark"] .empty-state .empty-lottie:not(.ot-lottie-on):not(.ot-lottie-off){
  background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);}
@media (prefers-reduced-motion: reduce){.delivery-map:empty,.ot-lottie:not(.ot-lottie-on),.empty-lottie:not(.ot-lottie-on){animation:none;}}

/* Weekly Box: totale della settimana mentre si compone */
.ws-price{margin:-4px 0 12px;font-size:13px;font-weight:600;color:var(--muted);}
.ws-price b{color:var(--ink);font-weight:800;}
.ws-price span{color:#12a062;}

/* ---------- Aree di tocco ----------
   I controlli piccoli restano grandi uguali alla vista, ma il dito li prende su almeno 44×44 px:
   un livello invisibile (::after) allarga la zona sensibile. position:relative solo dove il
   componente non si posiziona già da sé (:where → specificità zero). */
:where(.back-btn,.tk-btn,.tk-link,.qty-mini,.remove-line,.dm-add,.dm-del,.tab,.seg-btn,.slot-chip,.diary-date,.see-all,
       .link-inline,.dadd-slot,.preset-chip,.icon-btn,.heart,.cd-x,.fav-btn){position:relative;}
.back-btn::after,.icon-btn::after{content:'';position:absolute;inset:-4px;}
.tk-btn::after{content:'';position:absolute;inset:-10px;}
.qty-mini::after,.dm-del::after{content:'';position:absolute;inset:-9px;}
.remove-line::after{content:'';position:absolute;inset:-8px;}
.heart::after,.cd-x::after{content:'';position:absolute;inset:-7px;}
.dm-add::after{content:'';position:absolute;inset:-4px;}
.tab::after,.seg-btn::after,.dadd-slot::after,.preset-chip::after,.slot-chip::after{content:'';position:absolute;inset:-4px 0;}
.diary-date::after{content:'';position:absolute;inset:-6px 0;}
.link-inline::after{content:'';position:absolute;inset:-11px 0;}
.see-all::after,.tk-link::after{content:'';position:absolute;inset:-14px -6px;}
/* «Inserisci» e «Sincronizza» dei passi: sul telefono vanno uno sopra l'altro (4 px tra i due) e le zone allargate si
   coprivano, così toccando «Inserisci» si apriva «Sincronizza». Ognuno si allarga solo dal suo lato. */
.tk-stepper .tk-link:first-child::after{bottom:-2px;}
.tk-stepper .tk-link:last-child::after{top:-2px;}

/* Focus da tastiera: un anello che compare solo navigando con Tab (non al tocco né al clic).
   I campi di testo restano esattamente come prima (:where → qualunque regola esistente vince). */
:where(:focus-visible:not(input,textarea,select)){outline:2px solid var(--ink);outline-offset:3px;}

/* il logo in alto porta alla Home */
#topbar .logo[data-action]{cursor:pointer;}

/* Integratori = marchio proprietario Elevate Nutrition: logo sopra le fasce orarie (nero sul tema chiaro, bianco sul tema scuro) */
.brand-elevate{display:flex;justify-content:center;margin:6px 0 14px;}
.brand-elevate img{height:62px;width:auto;}
.brand-elevate .be-dark{display:none;}
html[data-theme="dark"] .brand-elevate .be-light{display:none;}
html[data-theme="dark"] .brand-elevate .be-dark{display:block;}

/* ---------- Tema scuro: leggibilità ----------
   Il verde del tema scuro (#63C463) è chiaro: il testo bianco sopra si leggeva male (2,2:1).
   Dove il verde fa da fondo a testo o icone bianche si usa un verde più profondo (≥4,5:1). */
html[data-theme="dark"] :is(.badge,.chat-row.me .chat-bubble,.chat-send,.time-chip.active,.extra-chip.active,.cm-badge,.pc-save,
  .picked-badge,.ts-num,.weigh-btn.done .wb-ic,.dadd-slot.active,.dm-card-empty .dm-add,.odp-done .odp-ic){background:#2A7F39;}
/* riquadri delle icone di «Mangio qui» e «Delivery»: il fondo quasi bianco spegneva l'icona colorata */
html[data-theme="dark"] .cc-ic{background:rgba(255,255,255,.1);}

/* Messaggi fissi in basso: non si coprono tra loro né coprono la card dell'ordine in corso */
body.otb-on .toast{bottom:calc(184px + env(safe-area-inset-bottom,0px));}
body.otb-on .pwa-update{bottom:calc(178px + env(safe-area-inset-bottom,0px));}
body.has-pwa-update .toast{bottom:calc(184px + env(safe-area-inset-bottom,0px));}
body.otb-on.has-pwa-update .toast{bottom:calc(250px + env(safe-area-inset-bottom,0px));}
/* pulsanti delle finestre di conferma: sui telefoni stretti (320 px) «Azzera tutto» usciva dalla card */
.modal-actions > *{flex:1 1 0;min-width:0;padding-left:12px;padding-right:12px;white-space:normal;}
/* card «Lo aggiungiamo al tuo diario?»: su telefoni stretti «Aggiungi a Spuntini» usciva dalla card */
.odp-actions .btn{min-width:0;white-space:normal;text-align:center;line-height:1.2;padding-left:10px;padding-right:10px;}

/* Avviso «Obiettivi d'esempio» (profilo demo): i numeri mostrati non sono dell'utente */
.own-macros-note{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:14px 0;padding:14px 16px;border-radius:var(--radius-m);background:var(--surface);box-shadow:0 2px 14px rgba(36,37,42,.05);}
.own-macros-note .omn-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted);line-height:1.4;}
.own-macros-note .omn-txt b{font-family:'Poppins',sans-serif;font-size:14.5px;color:var(--ink);}
.own-macros-note .btn{flex-shrink:0;white-space:nowrap;}

/* micronutrienti del Diario: quando per alcuni alimenti il dato non c'è lo si dice (non si stima) */
.dq-note{margin-top:5px;font-size:11px;color:var(--muted);}

/* Condimenti: riquadro che spiega la grammatura automatica (non si sceglie a mano) */
.cond-info{margin-top:14px;padding:14px 16px;border-radius:var(--radius-m);background:var(--accent-dim);}
.cond-info-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);}
.cond-info-body{margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--muted);}
.cond-info-g{margin-top:10px;font-size:13px;color:var(--ink);}
.cond-info-g b{font-family:'Poppins',sans-serif;font-size:17px;color:var(--ink);}

/* «Nessuno» nei topping/condimenti: non più una card intera, un piccolo pulsante accanto al titolo per toglierlo */

/* Proteine in barattolo (features/jar.js) */
.jar-table{background:var(--surface);border-radius:20px;padding:16px 18px;margin-top:14px;box-shadow:var(--shadow-sm,0 6px 18px rgba(20,21,25,.06));}
.jar-title{font-weight:700;font-size:14px;margin-bottom:8px;}
.jar-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line,rgba(0,0,0,.06));font-size:13px;}
.jar-row:first-of-type{border-top:0;}
.jar-row.sub{padding-left:14px;color:var(--ink-2,#6b6e76);}
.jar-row b{font-weight:600;white-space:nowrap;}
.jar-amino{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;}
.jar-amino .jar-row:nth-child(2){border-top:0;}
@media (max-width:420px){.jar-amino{grid-template-columns:1fr;}.jar-amino .jar-row:nth-child(2){border-top:1px solid var(--line,rgba(0,0,0,.06));}}
.jar-patents{display:flex;flex-wrap:wrap;gap:8px;}
.jar-patent{padding:6px 12px;border-radius:100px;background:var(--supp-tile,#efe9fb);color:var(--supplement,#6a45b8);font-weight:600;font-size:12px;}

/* Formato: schede compatte, icona nello stile delle sezioni degli integratori, peso/dosi e prezzo */
.jar-sizes{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.jar-size-opt{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;border-radius:14px;min-height:58px;
  background:var(--surface-2);color:var(--ink);font-family:'Poppins',sans-serif;text-align:left;
  transition:transform .12s ease, box-shadow .2s ease, background-color .2s ease;}
.jar-size-opt:active{transform:scale(.97);}
.jar-size-opt.active{background:color-mix(in srgb,var(--supplement) 10%,var(--surface));box-shadow:0 0 0 2px var(--supplement);}
@media (hover:hover){.jar-size-opt:not(.active):hover{background:var(--surface-3);}}
.jz-ic{flex-shrink:0;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--supplement-dim);color:var(--supplement);}
.jz-ic svg{width:17px;height:17px;}
.jar-size-opt.active .jz-ic{background:var(--supplement);color:#fff;}
.jz-txt{display:flex;flex-direction:column;min-width:0;flex:1;}
.jz-w{font-size:13.5px;font-weight:700;line-height:1.2;}
.jz-doses{font-size:10.5px;color:var(--muted);font-weight:500;line-height:1.3;}
.jz-end{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0;}
.jz-price{font-size:13px;font-weight:700;color:var(--supplement);white-space:nowrap;}
.jz-badge{padding:1px 6px;border-radius:100px;background:var(--accent);color:#fff;font-size:9.5px;font-weight:700;}
.jar-sizes.single{grid-template-columns:minmax(0,320px);}
.jar-vnr{font-style:normal;font-weight:500;color:var(--muted);font-size:11px;margin-left:6px;}
@media (max-width:420px){.jar-sizes{grid-template-columns:1fr;}}
.cart-sec-label{display:flex;align-items:center;gap:6px;margin:16px 0 8px;}
.cart-sec-label svg{width:15px;height:15px;}
.cart-sec-label:first-child{margin-top:4px;}
/* «Qualità Premium» sugli integratori in polvere: oro come le etichette dei flaconi */
.prem-badge,.prem-pill{display:inline-flex;align-items:center;gap:4px;border-radius:100px;font-weight:700;letter-spacing:.02em;
  background:linear-gradient(135deg,#F6D77A,#D9A93A);color:#3A2A06;box-shadow:0 4px 10px -4px rgba(120,80,0,.45);}
.prem-badge svg,.prem-pill svg{width:11px;height:11px;fill:currentColor;stroke:none;}
.prem-badge{position:absolute;left:8px;top:8px;z-index:2;padding:3px 8px;font-size:9.5px;}
.prem-pill{margin:6px auto 2px;padding:4px 11px;font-size:11px;}

/* ---------- Curiosità (notifiche educative): pagina della curiosità e «Notifiche e consigli» (js/features/curiosity.js) ---------- */
.cur-page{margin-top:14px;padding:22px 20px;border-radius:var(--radius-l);background:var(--surface);box-shadow:0 2px 14px rgba(36,37,42,.05);}
.cur-cat{display:inline-block;padding:4px 11px;border-radius:100px;background:var(--accent-dim);color:var(--ink);font-size:11.5px;font-weight:800;}
.cur-title{font-family:'Poppins',sans-serif;font-size:22px;line-height:1.25;font-weight:700;margin:12px 0 0;color:var(--ink);}
.cur-body{font-size:15px;line-height:1.55;margin:10px 0 0;color:var(--ink);}
.cur-sec{margin-top:20px;}
.cur-h{font-size:11.5px;font-weight:800;color:var(--muted);margin:0 0 6px;text-transform:uppercase;letter-spacing:.04em;}
.cur-text{font-size:14px;line-height:1.55;margin:0;color:var(--ink);}
.cur-note b{color:var(--ink);}
.cur-sources{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.5;color:var(--muted);}
.cur-sources a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.cur-audience{margin:16px 0 0;font-size:12px;color:var(--muted);}
.cur-disclaimer{margin:6px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted-2);}
.cur-rel{margin-top:8px;margin-bottom:0;box-shadow:none;background:var(--surface-2);}
.cur-rel .or-check svg{width:16px;height:16px;}
.cur-empty .glyph svg{width:30px;height:30px;}
.cur-empty-title{font-family:'Poppins',sans-serif;font-weight:700;font-size:16px;color:var(--ink);margin:0;}
.cur-skel{height:22px;border-radius:10px;background:var(--surface-2);margin-top:12px;}
.cur-skel:first-child{width:40%;margin-top:0;}
.cur-skel-s{height:14px;}
.cur-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.edu-sec{margin-top:8px;}
.edu-intro{font-size:12.5px;color:var(--muted);margin:0 0 4px 4px;line-height:1.45;}
.edu-card{display:flex;align-items:flex-start;gap:12px;padding:14px;border-radius:var(--radius-l);border:1.5px solid transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,rgba(18,160,98,.5),rgba(22,153,205,.5)) border-box;}
.edu-card .pwa-btn[disabled]{opacity:.6;}
.edu-label{font-size:12px;font-weight:800;color:var(--muted);margin:16px 0 8px 4px;}
.edu-freq{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.edu-chip{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px;border-radius:14px;background:var(--surface);
  font-size:13px;font-weight:700;color:var(--ink);box-shadow:0 2px 10px rgba(36,37,42,.05);}
.edu-chip svg{width:15px;height:15px;}
.edu-chip.active{outline:1.5px solid var(--accent);background:var(--accent-dim);}
.edu-window{display:flex;gap:10px;}
.edu-field{flex:1;display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;color:var(--muted);}
.edu-field > span{padding-left:4px;}
.edu-field select{min-height:44px;}
.edu-hint{font-size:11.5px;color:var(--muted);margin:8px 0 0 4px;line-height:1.45;}
.push-debug{margin-top:22px;padding:14px;border-radius:16px;border:1.5px dashed var(--muted-2);}
.push-debug .pgroup-label{margin-top:0;}
.push-debug-btns{display:flex;flex-wrap:wrap;gap:8px;}
.push-debug-out{margin:12px 0 0;white-space:pre-wrap;word-break:break-word;font-size:11px;line-height:1.45;color:var(--ink);max-height:320px;overflow:auto;}
.push-debug-out:empty{display:none;}

/* Modifica dal carrello: «Modifica» su ogni voce; un pasto composto si apre con i suoi alimenti e − / + (cart.js) */
.cart-edit{display:inline-flex;align-items:center;gap:5px;margin-left:6px;min-height:28px;padding:0 10px;border-radius:100px;background:var(--surface-2);
  font-size:12px;font-weight:700;color:var(--ink);}
.cart-edit svg{width:13px;height:13px;}
.cart-edit[aria-expanded="true"]{background:var(--accent-dim);outline:1.5px solid var(--accent);}
.cart-item:has(.cart-parts){flex-wrap:wrap;}
.cart-parts{flex-basis:100%;margin-top:2px;display:flex;flex-direction:column;gap:6px;}
.cp-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:12px;background:var(--surface-2);}
.cp-name{flex:1;min-width:0;font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cp-qty{min-width:56px;text-align:center;font-family:'Inter',sans-serif;font-size:12.5px;font-weight:800;}
.cp-fixed{font-size:11.5px;color:var(--muted);font-weight:700;}
.cp-row .qty-mini{background:var(--surface);}

/* Match: topping e condimenti sotto l'alimento scelto (matchToppingHtml in match.js) */
.sr-top{display:block;font-size:11px;font-weight:700;color:var(--ink);margin-top:3px;}
.mt-qty{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin-top:12px;padding:12px 14px;border-radius:16px;background:var(--surface-2);}
.mt-qty .tq-label{font-size:12px;font-weight:700;color:var(--muted);text-align:center;}
.mt-qty .qty-controls{justify-content:center;gap:22px;}
.mt-qty .qty-value{font-size:24px;min-width:72px;}
/* Match: topping e condimenti come nella scheda alimento (card con foto in righe da 4) */
.match-top.addon-block,.match-top-ask.addon-block{margin:-2px 0 12px;}
.match-top-ask .mta-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.match-top-ask .mta-sel{font-size:11.5px;font-weight:700;color:var(--accent);}
.match-top .mt-auto{margin:10px 0 0;}
.match-top .mt-foot{margin:12px 0 0;}

/* Info e supporto: crediti ed easter egg dei coriandoli (profile.js, confettiRain) */
.ab-credits{margin:22px 8px 0;text-align:center;font-size:11.5px;line-height:1.5;color:var(--muted);}
.about-card .ab-logo{cursor:default;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
.confetti-rain{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden;}
.confetti-rain i{position:absolute;top:-24px;display:block;opacity:.95;animation-name:confettiFall;animation-timing-function:cubic-bezier(.3,.6,.5,1);animation-fill-mode:both;}
@keyframes confettiFall{from{transform:translate(0,0) rotate(0);}to{transform:translate(var(--dx),110vh) rotate(var(--rot));}}
/* ® accanto alla scritta «macro's» (in basso nel logo con la scritta sotto), non nell'angolo vuoto in alto a destra */
.about-card .ab-reg{margin-top:60px;margin-left:-2px;}
/* Home: «Dove vuoi mangiare?» subito sotto il logo (il margine della sezione si sommava alla barra in alto) */
.choice-block.where-block{margin-top:0;}

/* Carrello: scelta di cosa aggiungere dal suggerimento («Ti manca la verdura?») */
.sugg-modal{max-height:80vh;display:flex;flex-direction:column;}
.sugg-pick-list{overflow:auto;margin-top:10px;-webkit-overflow-scrolling:touch;}
.sugg-pick .sg-ic img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}

/* Voce composta alimento + topping (carrello, ordini): la base e le aggiunte in piccolo nell'angolo (cartItemInfo) */
.thumb{position:relative;}
.thumb-combo{display:contents;}
.thumb-top{position:absolute;right:3px;bottom:3px;width:22px;height:22px;border-radius:50%;overflow:hidden;background:#fff;
  box-shadow:0 0 0 2px var(--surface),0 3px 8px -2px rgba(0,0,0,.3);display:flex;align-items:center;justify-content:center;}
.thumb-top-1{right:21px;}
.thumb-top img{width:100%;height:100%;object-fit:cover;}
.thumb-top svg{width:14px;height:14px;}

/* Diario: sposta una voce in un altro pasto (diary-move-open) */
.dm-move{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--muted-2);}
.dm-move svg{width:14px;height:14px;}
.dm-move-list{margin-top:12px;}