/* =========================================================
   BUILDING AGENCY — stile di base (app del cliente e area staff)
   Colori del brand: blu #2997FF, viola #8E44EC, rosa #FF2D87.
   La parte alimentare usa i verdi: vedi tema-nutrizione.css.
   ========================================================= */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter.woff2") format("woff2")}

/* Layout: app a una colonna (max 460px) con barra delle schede in basso — Oggi, Spesa, Guida.
   Oggi: saluto, tipo di giornata, anelli dei valori, prossimo pasto, pasti con spunta e alternative, acqua, settimana. */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{
  color-scheme:dark;
  --bg:#000000; --card:rgba(24,24,27,.74); --card2:rgba(34,34,38,.86); --sheet:#131315; --field:rgba(118,118,128,.18);
  --ink:#F5F5F7; --muted:#A1A1A6; --old:#6E6E73; --hair:rgba(255,255,255,.085); --hair2:rgba(255,255,255,.15);
  --green:#30D158; --acc:#4DA6FF; --teal:#8E44EC; --blue:#2997FF; --purple:#A270FF; --pink:#FF2D87; --amber:#FFD60A;
  --cP:#30D158; --cC:#2997FF; --cF:#A270FF;
  --brand:linear-gradient(100deg,#2997FF,#8E44EC 52%,#FF2D87);
  --nutri:linear-gradient(120deg,#2997FF,#8E44EC 55%,#FF2D87);
  --gloss:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.012) 40%,rgba(255,255,255,0));
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1); --soft:cubic-bezier(.34,1.25,.64,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.45;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  -webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;letter-spacing:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
::selection{background:rgba(41,151,255,.4)}
:focus-visible{outline:3px solid rgba(41,151,255,.55);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* ---------- Atmosfera ---------- */
.aura{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aura i{position:absolute;border-radius:50%;will-change:transform}
.aura .b1{width:90vmax;height:90vmax;left:-44vmax;top:-52vmax;background:radial-gradient(closest-side,rgba(41,151,255,.28),transparent);animation:a1 30s ease-in-out infinite alternate}
.aura .b2{width:70vmax;height:70vmax;right:-38vmax;top:28vh;background:radial-gradient(closest-side,rgba(142,68,236,.15),transparent);animation:a2 36s ease-in-out infinite alternate}
.aura .b3{width:80vmax;height:80vmax;left:-26vmax;bottom:-54vmax;background:radial-gradient(closest-side,rgba(41,151,255,.17),transparent);animation:a1 42s ease-in-out infinite alternate-reverse}
.aura::after{content:"";position:absolute;inset:0;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes a1{to{transform:translate(16vw,12vh) scale(1.1)}}
@keyframes a2{to{transform:translate(-14vw,18vh) scale(.92)}}
.spark{position:fixed;z-index:90;pointer-events:none;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%}
.spark.r{width:10px;height:4px;margin:-2px 0 0 -5px;border-radius:2px}

/* ---------- Struttura ---------- */
.app{position:relative;z-index:1;max-width:460px;margin:0 auto;padding-inline:18px;padding-block:18px calc(118px + env(safe-area-inset-bottom,0px))}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.mark{width:28px;height:28px;border-radius:9px;display:inline-grid;place-items:center;flex:none;font-size:11px;font-weight:800;letter-spacing:.02em;color:#fff;
  background:var(--brand);box-shadow:0 8px 20px -8px rgba(142,68,236,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;border-radius:999px;padding:5px 11px;white-space:nowrap}
.pill.ex{color:var(--amber);background:rgba(255,214,10,.1);border:1px solid rgba(255,214,10,.35)}
.view{display:flex;flex-direction:column;gap:16px}
.view.in{animation:vin .55s var(--ease) backwards}
@keyframes vin{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}
.card{position:relative;border-radius:24px;background:var(--gloss),var(--card);border:1px solid var(--hair)}
.label{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.rise{animation:rise .8s var(--ease) backwards;animation-delay:calc(var(--k,0) * 70ms + 80ms)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

/* ---------- Saluto ---------- */
.hello small{display:block;font-size:14px;font-weight:600;color:var(--acc)}
.hello h1{margin:2px 0 0;font-size:clamp(34px,9.6vw,42px);font-weight:700;line-height:1.06;letter-spacing:-.04em;text-wrap:balance}
.w{display:inline-block;animation:wordin 1s var(--ease) backwards;animation-delay:calc(.08s + var(--wi,0) * 90ms)}
@keyframes wordin{from{opacity:0;transform:translateY(.4em) rotate(1.5deg);filter:blur(12px)}}
.og{background:linear-gradient(100deg,#2997FF,#8E44EC 35%,#FF2D87 65%,#2997FF);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:wordin 1s var(--ease) backwards,flow 8s linear infinite;animation-delay:calc(.08s + var(--wi,0) * 90ms),0s;padding-bottom:.06em}
@keyframes flow{to{background-position:-250% 0}}

/* ---------- Tipo di giornata ---------- */
.seg{position:relative;display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));padding:4px;border-radius:999px;background:var(--field);border:1px solid var(--hair);isolation:isolate}
.seg::before{content:"";position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n,2));border-radius:999px;
  background:linear-gradient(180deg,#4A4A4E,#2C2C2F);box-shadow:0 4px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);
  transform:translateX(calc(var(--i,0) * 100%));transition:transform .5s var(--soft)}
.seg button{min-height:44px;border-radius:999px;font-size:15px;font-weight:500;color:var(--muted);transition:color .3s;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.seg button[aria-pressed="true"]{color:var(--ink);font-weight:600}
.seg .td{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.dayline{margin:-6px 4px 0;font-size:13px;color:var(--muted);line-height:1.5}
.dayline .link{margin-left:6px}
.dayline b{color:var(--ink);font-weight:600}
.link{color:var(--acc);font-weight:600;font-size:13px}

/* ---------- Anelli ---------- */
.rings{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;padding:20px 20px 20px 18px;overflow:hidden}
.rings::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .6s;
  background:conic-gradient(from var(--a),transparent 0deg 200deg,#2997FF 250deg,#8E44EC 300deg,#FF2D87 340deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 4.5s linear infinite}
.rings.full::after{opacity:1}
@keyframes spin{to{--a:360deg}}
.rg{position:relative;width:132px;height:132px;flex:none}
.rg svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.rg circle{fill:none;stroke-linecap:round}
.rg .tr{stroke-width:11;opacity:.18}
.rg .fl{stroke-width:11;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--f,0));transition:stroke-dashoffset 1.1s var(--ease);filter:drop-shadow(0 0 6px var(--gc))}
.rg .ctr{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.rg .ctr b{display:block;font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1}
.rg .ctr small{display:block;font-size:10.5px;color:var(--muted);margin-top:3px}
.rg .ok{width:30px;height:30px;margin:0 auto 2px;border-radius:50%;display:grid;place-items:center;background:var(--nutri);box-shadow:0 0 18px rgba(41,151,255,.8);animation:pop .6s var(--spring)}
.rg .ok svg{width:16px;height:16px;transform:none;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes pop{from{transform:scale(.3);opacity:0}}
.mx{display:flex;flex-direction:column;gap:11px;min-width:0}
.mx-r{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 8px}
.mx-r span{font-size:13.5px;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.mx-r span i{width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c)}
.mx-r b{font-size:15px;font-weight:600}
.mx-r b small{font-size:12px;font-weight:500;color:var(--old)}
.mx-r .bar{grid-column:1/-1;height:4px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.mx-r .bar i{display:block;height:100%;border-radius:inherit;background:var(--c);transform-origin:0 50%;transform:scaleX(var(--f,0));transition:transform 1.1s var(--ease)}
.mealsdone{font-size:12.5px;color:var(--old);margin-top:1px}

/* ---------- Prossimo pasto ---------- */
.next{display:flex;align-items:center;gap:14px;padding:15px 16px;width:100%;text-align:left;overflow:hidden;transition:transform .3s var(--ease)}
.next:active{transform:scale(.985)}
.next .nic{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;background:var(--nutri);box-shadow:0 12px 26px -12px rgba(41,151,255,.95),inset 0 1px 0 rgba(255,255,255,.3)}
.next .nic svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.next .nt{flex:1;min-width:0}
.next .nt small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.next .nt b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.25}
.next .nt span{display:block;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.next .cd{flex:none;text-align:right}
.next .cd b{display:block;font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.next .cd small{display:block;font-size:11.5px;color:var(--muted)}
.next.now .cd b{color:var(--acc)}
.next.alert .nt small{color:var(--amber)}
.next.alert .nic{background:linear-gradient(135deg,#FFD60A,#FF9F0A);box-shadow:0 12px 26px -12px rgba(255,159,10,.9),inset 0 1px 0 rgba(255,255,255,.3)}

/* ---------- Pasti ---------- */
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:10px 4px -4px}
.sec-h h2{white-space:nowrap}
.sec-h h2{margin:0;font-size:22px;font-weight:700;letter-spacing:-.025em}
.sec-h span{font-size:13px;color:var(--muted)}
.meal{overflow:hidden;transition:border-color .5s,box-shadow .5s}
.meal.is-next{border-color:rgba(41,151,255,.45);box-shadow:0 24px 60px -36px rgba(41,151,255,.8)}
.meal.done{border-color:rgba(41,151,255,.25)}
.meal-h{display:flex;align-items:center;gap:13px;padding:14px 16px 12px}
.chk{position:relative;width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);transition:box-shadow .3s,background .35s,transform .2s}
.chk:active{transform:scale(.88)}
.chk svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.chk path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .25s ease-in}
.chk[aria-pressed="true"]{background:var(--nutri);box-shadow:0 0 0 0 rgba(41,151,255,.6),0 0 18px rgba(41,151,255,.6);animation:chkpop .55s var(--spring)}
.chk[aria-pressed="true"] path{stroke-dashoffset:0;transition:stroke-dashoffset .4s var(--ease) .08s}
@keyframes chkpop{0%{transform:scale(.8)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
.meal-t{flex:1;min-width:0}
.meal-t b{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.meal-t b time{font-size:13px;font-weight:600;color:var(--acc);letter-spacing:0}
.meal-t small{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.meal-t small i{font-style:normal;color:var(--old)}
.badge{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#062b12;background:var(--acc);border-radius:999px;padding:2px 7px}
.meal.done .meal-t b{color:var(--muted)}
.items{border-top:1px solid rgba(255,255,255,.065)}
.it{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 16px 12px 63px;min-height:56px;position:relative;transition:background .25s,opacity .4s}
.it + .it{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.meal.done .it{opacity:.55}
.it .nm{flex:1;min-width:0}
.it .nm b{display:block;font-size:16px;font-weight:500;line-height:1.3}
.it .nm small{display:inline-flex;align-items:center;gap:5px;margin-top:2px;font-size:12px;font-weight:600;color:var(--acc)}
.it .nm small.sw{color:var(--amber)}
.it .nm small.nt{color:var(--old);font-weight:500}
.it .nm small svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.it .q{flex:none;font-size:16px;font-weight:600;text-align:right}
.it .q.free{font-weight:500;color:var(--muted);font-size:14.5px}
.it .sv{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(41,151,255,.14);transition:transform .4s var(--spring)}
.it .sv svg{width:13px;height:13px;fill:none;stroke:var(--acc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
button.it:hover{background:rgba(255,255,255,.035)}
button.it:active{background:rgba(255,255,255,.065)}
button.it:hover .sv{transform:rotate(180deg)}
.it.flash{animation:flash 1.1s var(--ease)}
@keyframes flash{0%{background:rgba(255,214,10,.2)}100%{background:transparent}}
.meal-note{margin:0;padding:10px 16px 14px 63px;font-size:13px;color:var(--muted);line-height:1.45;border-top:1px solid rgba(255,255,255,.05)}

/* ---------- Acqua ---------- */
.water{padding:16px 16px 14px}
.wh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:12px}
.wh b{font-size:17px;font-weight:600}
.wh span{font-size:14px;color:var(--muted)}
.wh span b{font-size:17px;color:var(--ink)}
.glasses{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.gl{position:relative;aspect-ratio:3/4;max-width:100%;border-radius:4px 4px 9px 9px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2);overflow:hidden;transition:transform .2s}
.gl:active{transform:scale(.9)}
.gl i{position:absolute;left:0;right:0;bottom:0;height:100%;transform-origin:50% 100%;transform:scaleY(0);background:linear-gradient(180deg,#7CC0FF,#2997FF);transition:transform .55s var(--soft);transition-delay:calc(var(--d,0) * 45ms)}
.gl.on i{transform:scaleY(.86)}
.gl.on{box-shadow:inset 0 0 0 1.5px rgba(124,192,255,.7),0 6px 16px -8px rgba(41,151,255,.9)}
.wfoot{margin:10px 0 0;font-size:12.5px;color:var(--old)}

/* ---------- Settimana ---------- */
.week{padding:16px}
.week-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:14px}
.week-h b{font-size:17px;font-weight:600}
.week-h span{font-size:13px;color:var(--muted)}
.wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;text-align:center}
.wd{display:flex;flex-direction:column;align-items:center;gap:6px}
.wd .ring{position:relative;width:34px;height:34px}
.wd .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.wd .ring circle{fill:none;stroke-width:4}
.wd .ring .t{stroke:rgba(255,255,255,.12)}
.wd .ring .f{stroke:url(#wg);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--f,0));transition:stroke-dashoffset 1s var(--ease)}
.wd .ring em{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700}
.wd.full .ring em{color:var(--acc)}
.wd small{font-size:10px;font-weight:600;letter-spacing:.04em;color:var(--old);text-transform:uppercase}
.wd.today small{color:var(--ink)}
.wd.today .ring{filter:drop-shadow(0 0 8px rgba(41,151,255,.6))}
.wd.fut{opacity:.4}
.wd .ty{width:5px;height:5px;border-radius:50%;background:var(--blue)}
.wd .ty.off{background:rgba(255,255,255,.25)}
.legend{display:flex;gap:14px;justify-content:center;margin-top:12px;font-size:11.5px;color:var(--old)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:6px;height:6px;border-radius:50%;background:var(--blue)}
.legend i.off{background:rgba(255,255,255,.25)}
.plain{align-self:center;font-size:14px;color:var(--muted);padding:8px 12px;border-radius:10px}
.plain:hover{color:var(--ink)}

/* ---------- Spesa ---------- */
.head2 h2{margin:0;font-size:34px;font-weight:700;letter-spacing:-.035em;line-height:1.08}
.head2 p{margin:6px 0 0;font-size:14.5px;color:var(--muted);line-height:1.45}
.prog{padding:14px 16px}
.prog-h{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--muted)}
.prog-h b{font-size:17px;color:var(--ink);font-weight:600}
.pbar{height:6px;border-radius:3px;background:rgba(255,255,255,.08);margin-top:10px;overflow:hidden}
.pbar i{display:block;height:100%;border-radius:inherit;background:var(--nutri);transform-origin:0 50%;transform:scaleX(var(--f,0));transition:transform .8s var(--ease);box-shadow:0 0 12px rgba(41,151,255,.6)}
.cat{overflow:hidden}
.cat-h{display:flex;align-items:center;gap:11px;padding:13px 16px 9px}
.cat-h .ci{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:linear-gradient(145deg,var(--c1),var(--c2))}
.cat-h .ci svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cat-h b{flex:1;font-size:16px;font-weight:600}
.cat-h span{font-size:12.5px;color:var(--old)}
.si{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:11px 16px;min-height:50px;border-top:1px solid rgba(255,255,255,.055);transition:background .25s}
.si:active{background:rgba(255,255,255,.05)}
.si .bx{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.8px rgba(255,255,255,.25);transition:background .3s,box-shadow .3s}
.si .bx svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.4);transition:opacity .25s,transform .4s var(--spring)}
.si .nm{flex:0 1 auto;min-width:0;font-size:15.5px;position:relative;transition:color .3s}
.si .nm::after{content:"";position:absolute;left:0;top:55%;height:1.5px;width:100%;background:var(--old);transform-origin:0 50%;transform:scaleX(0);transition:transform .4s var(--ease)}
.si .q{flex:none;font-size:15px;font-weight:600;transition:color .3s}
.si[aria-pressed="true"] .bx{background:var(--nutri);box-shadow:0 0 12px rgba(41,151,255,.6)}
.si[aria-pressed="true"] .bx svg{opacity:1;transform:none}
.si[aria-pressed="true"] .nm,.si[aria-pressed="true"] .q{color:var(--old)}
.si[aria-pressed="true"] .nm::after{transform:scaleX(1)}
.si .nm em{font-style:normal;color:var(--old);font-size:13px}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:999px;font-size:15.5px;font-weight:600;background:rgba(255,255,255,.07);border:1px solid var(--hair2);transition:transform .2s,background .3s}
.btn:active{transform:scale(.96)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.btn.pri{position:relative;overflow:hidden;color:#fff;border:0;background:linear-gradient(180deg,#4AA8FF,#1C86F2);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 30px -14px rgba(41,151,255,.95)}
.small{margin:0 6px;font-size:12.5px;color:var(--old);line-height:1.45}

/* ---------- Guida ---------- */
.pass{position:relative;isolation:isolate;overflow:hidden;border-radius:26px;padding:20px 20px 18px;display:flex;flex-direction:column;gap:16px;
  background:radial-gradient(140% 120% at 0% 0%,#2a2a36 0%,#141618 45%,#0a0a0c 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.22),0 40px 80px -40px rgba(41,151,255,.55)}
.pass::before{content:"";position:absolute;inset:0;z-index:-1;mix-blend-mode:screen;opacity:.6;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 6px),linear-gradient(115deg,transparent 30%,rgba(41,151,255,.35) 42%,rgba(142,68,236,.35) 50%,rgba(41,151,255,.3) 58%,transparent 72%);
  background-size:100% 100%,240% 240%;animation:holo 9s ease-in-out infinite alternate}
.pass::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--a),transparent 0deg 210deg,#2997FF 250deg,#8E44EC 290deg,#FF2D87 330deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spin 5s linear infinite}
@keyframes holo{from{background-position:0 0,0% 20%}to{background-position:0 0,100% 80%}}
.pass-t{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pass-t .brand{color:#fff;letter-spacing:.08em;text-transform:none;font-size:13.5px}
.pass small{display:block;font-size:11px;font-weight:500;color:rgba(235,235,245,.6)}
.pass h3{margin:2px 0 0;font-size:32px;font-weight:700;letter-spacing:-.04em;line-height:1.05;background:linear-gradient(180deg,#fff 35%,#BFC6D6);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.05em}
.pass p{margin:4px 0 0;font-size:13.5px;color:rgba(235,235,245,.78)}
.pass-b{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pf{padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.32);border:1px solid var(--hair)}
.pf b{display:block;font-size:14.5px;font-weight:600;margin-top:1px}
.steps{list-style:none;margin:0;padding:6px 16px;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(255,255,255,.06)}
.steps li:first-child{border-top:0}
.steps li::before{content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:13.5px;font-weight:700;color:#fff;background:var(--nutri);box-shadow:0 0 0 4px rgba(41,151,255,.12)}
.steps b{display:block;font-size:15.5px;font-weight:600}
.steps span{display:block;font-size:14px;color:var(--muted);line-height:1.4;margin-top:1px}
.tips{list-style:none;margin:0;padding:6px 16px}
.tips li{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-top:1px solid rgba(255,255,255,.06);font-size:15px;line-height:1.45}
.tips li:first-child{border-top:0}
.tips li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--acc);transform:translateY(-2px);box-shadow:0 0 8px var(--acc)}
.team{display:flex;flex-direction:column}
.tm{display:flex;align-items:center;gap:13px;padding:14px 16px}
.tm + .tm{border-top:1px solid rgba(255,255,255,.06)}
.tm .av{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:700;color:#fff}
.tm .av svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tm b{display:block;font-size:16px;font-weight:600}
.tm small{display:block;font-size:13.5px;color:var(--muted)}
.home{display:flex;gap:13px;align-items:flex-start;padding:15px 16px;font-size:14px;color:var(--muted);line-height:1.45}
.home svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.home b{color:var(--ink);font-weight:600}
.mega{display:block;text-align:center;font-size:clamp(34px,11.4vw,54px);font-weight:800;letter-spacing:-.055em;line-height:1.05;white-space:nowrap;margin-top:10px;padding-bottom:.1em;
  background-image:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%),linear-gradient(180deg,rgba(245,245,247,.22) 15%,rgba(245,245,247,.03));
  background-size:300% 100%,100% 100%;background-repeat:no-repeat;background-position:120% 0,0 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:megash 8s var(--ease) 1.5s infinite}
@keyframes megash{0%{background-position:120% 0,0 0}45%,100%{background-position:-20% 0,0 0}}

/* ---------- Barra delle schede ---------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:0 18px calc(14px + env(safe-area-inset-bottom,0px));pointer-events:none}
.tabs nav{pointer-events:auto;position:relative;max-width:424px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);padding:6px;border-radius:999px;isolation:isolate;
  background:rgba(28,28,31,.72);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--hair2);box-shadow:0 20px 50px -20px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08)}
.tabs nav::before{content:"";position:absolute;z-index:-1;top:6px;bottom:6px;left:6px;width:calc((100% - 12px) / 3);border-radius:999px;
  background:linear-gradient(180deg,rgba(41,151,255,.24),rgba(41,151,255,.12));box-shadow:inset 0 0 0 1px rgba(41,151,255,.35);
  transform:translateX(calc(var(--t,0) * 100%));transition:transform .5s var(--soft)}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 7px;border-radius:999px;font-size:11px;font-weight:600;color:var(--muted);transition:color .3s;position:relative}
.tab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--spring)}
.tab[aria-selected="true"]{color:var(--acc)}
.tab[aria-selected="true"] svg{transform:translateY(-1px) scale(1.08)}
.tab .dot{position:absolute;top:6px;left:calc(50% + 9px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--acc);color:#fff;font-size:10px;font-weight:800;display:grid;place-items:center}

/* ---------- Foglio delle alternative ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .35s}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;z-index:61;left:50%;bottom:0;width:min(520px,100%);max-height:88%;display:flex;flex-direction:column;
  background:var(--gloss),var(--sheet);border:1px solid var(--hair2);border-bottom:0;border-radius:30px 30px 0 0;
  padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,105%);transition:transform .5s var(--ease);box-shadow:0 -30px 80px -30px rgba(41,151,255,.35)}
.sheet.on{transform:translate(-50%,0)}
@media (min-width:720px){
  .sheet{top:50%;bottom:auto;border-radius:30px;border-bottom:1px solid var(--hair2);transform:translate(-50%,-46%) scale(.96);opacity:0;transition:transform .45s var(--ease),opacity .3s;pointer-events:none}
  .sheet.on{transform:translate(-50%,-50%);opacity:1;pointer-events:auto}
  .grab{display:none}
}
.grab{width:38px;height:5px;border-radius:3px;background:rgba(255,255,255,.22);margin:0 auto 12px;flex:none}
.sh-h{display:flex;align-items:flex-start;gap:12px;margin:2px 2px 0}
.sh-h div{flex:1;min-width:0}
.sh-h small{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.sh-h h3{margin:3px 0 0;font-size:23px;font-weight:700;letter-spacing:-.025em;line-height:1.2;text-wrap:balance}
.x{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;background:rgba(255,255,255,.08)}
.x svg{width:14px;height:14px;fill:none;stroke:var(--muted);stroke-width:2.6;stroke-linecap:round}
.sh-sub{margin:6px 2px 14px;font-size:14px;color:var(--muted)}
.opts{display:flex;flex-direction:column;gap:8px;overflow-y:auto;overscroll-behavior:contain;padding:2px;margin:0 -2px}
.op{display:flex;align-items:center;gap:13px;width:100%;text-align:left;padding:13px 14px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid var(--hair);transition:background .3s,border-color .3s,transform .2s}
.op:hover{background:rgba(255,255,255,.07)}
.op:active{transform:scale(.985)}
.op .rd{width:22px;height:22px;border-radius:50%;flex:none;border:1.5px solid #48484A;display:grid;place-items:center;transition:background .3s,border-color .3s}
.op .rd::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff;transform:scale(0);transition:transform .35s var(--spring)}
.op .on{flex:1;min-width:0}
.op .on b{display:block;font-size:16px;font-weight:500;line-height:1.3}
.op .on small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.op .on small em{font-style:normal;font-weight:600;color:var(--ink)}
.op .g{flex:none;font-size:17px;font-weight:700}
.op[aria-checked="true"]{border-color:rgba(41,151,255,.6);background:linear-gradient(135deg,rgba(41,151,255,.2),rgba(142,68,236,.1))}
.op[aria-checked="true"] .rd{background:var(--nutri);border-color:transparent;box-shadow:0 0 14px rgba(41,151,255,.7)}
.op[aria-checked="true"] .rd::after{transform:scale(1)}
.mm{display:flex;gap:4px;margin-top:7px;height:4px}
.mm i{height:100%;border-radius:2px;background:var(--c);opacity:.85}
.sh-foot{margin:14px 2px 0;font-size:12.5px;color:var(--old);line-height:1.45}

.toast{position:fixed;left:50%;bottom:calc(98px + env(safe-area-inset-bottom,0px));z-index:70;transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--bg);font-size:14px;font-weight:600;padding:11px 16px;border-radius:14px;max-width:calc(100% - 32px);text-align:center;transition:opacity .3s,transform .45s var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}


/* anello a spicchi: uno per pasto */
.rg .sg-t,.rg .sg{fill:none;stroke-width:12;stroke-linecap:round}
.rg .sg-t{stroke:rgba(255,255,255,.1)}
.rg .sg{stroke:url(#sgg);opacity:0;transition:opacity .5s var(--ease)}
.rg .sg.on{opacity:1;filter:drop-shadow(0 0 7px rgba(41,151,255,.75));animation:sgin .7s var(--spring) backwards}
@keyframes sgin{from{opacity:0;stroke-width:4}}
.rg .ctr b .of{font-size:15px;font-weight:600;color:var(--old)}
.rg .ctr b{font-size:30px}
.ml{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;min-width:0}
.ml li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:9px;font-size:15px;font-weight:500;transition:color .3s}
.ml li i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.22)}
.ml li i svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.ml li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ml li em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--acc)}
.ml li.ok{color:var(--muted)}
.ml li.ok i{background:var(--nutri);box-shadow:0 0 10px rgba(41,151,255,.6)}
.ml li.nx i{box-shadow:inset 0 0 0 1.6px var(--acc),0 0 10px rgba(41,151,255,.5)}

@media (max-width:360px){
  .rings{grid-template-columns:1fr;justify-items:center}
  .mx{width:100%}
  .glasses{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}