:root{
    --primary:#2563EB; --primary-dark:#1D4ED8; --primary-hover:#1E40AF;
    --accent:#7062FF; --accent-soft:#A99FFF; --aqua:#78D5DF; --sky:#62ADFF;
    
    
    --cta-bg:linear-gradient(180deg,#93E1EA 0%,#78D5DF 55%,#5FC3CE 100%); --cta-ink:#0B1020; --cta-glow:rgba(120,213,223,.45); --cta-bd:rgba(255,255,255,.30); --cta-hi:inset 0 1px 0 rgba(255,255,255,.6);
    
    --sel:#7062FF; --sel-bd:rgba(112,98,255,.65); --sel-fill:rgba(112,98,255,.16); --sel-dot:#7062FF;
    --link:#62ADFF; --focus:#7062FF;
    
    --ghost-bg:rgba(112,98,255,.20); --ghost-bd:rgba(112,98,255,.62);
    
    --dis-bg:rgba(255,255,255,.10); --dis-ink:rgba(255,255,255,.66);
    
    --ok-dark:#7CE7AD; --warn-dark:#F3D28A; --danger-dark:#FF8A8A;
    --green:#33905D; 
    --bg-deep:#0B1020; --bg-deep-alt:#11162B; --accent-dark:#2F2E4A;
    --app:#F9FAFB; --card:#FFFFFF; --subtle:#F3F4F6; --border:#E5E7EB; --border-strong:#D1D5DB;
    --text:#111827; --text-2:#4B5563; --muted:#6B7280; --on-dark:#FFFFFF; --on-dark-mut:rgba(255,255,255,.85); --placeholder:#7A7C82;
    
    color-scheme:dark;
    --success:#16A34A; --success-soft:#DCFCE7; --danger:#DC2626; --danger-soft:#FEE2E2; --warning:#D97706;
    --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --pill:999px;
    --glass:rgba(255,255,255,.06); --glass-bd:rgba(255,255,255,.13); --glass-blur:blur(14px) saturate(140%);
    /* Velature: schiariscono il fondo scuro, SCURISCONO quello chiaro. Prima erano
       scritte a mano come bianco trasparente, e nel tema chiaro sparivano. */
    --fill-soft:rgba(255,255,255,.06); --fill-press:rgba(255,255,255,.12);
    --sh-card:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
    --sh-float:0 12px 32px rgba(11,16,32,.24);
    --sh-glow:0 0 40px rgba(112,98,255,.45);
    --motion:250ms cubic-bezier(.4,0,.2,1);
    --spring:cubic-bezier(.34,1.56,.64,1);
    --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --font-display:'DM Sans','Inter',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible,[onclick]:focus-visible{outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 4px rgba(255,255,255,.9)}
  .cs-day-row:focus,.cs-slot:focus,.tag-vr:focus,a[role="button"]:focus,.v3h-faq-q:focus{outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 4px rgba(255,255,255,.9)}
  html,body{height:100%}
  
  body{font-family:var(--font); color:var(--text); background:var(--bg-deep); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip;}
  .stage{position:fixed; inset:0; z-index:0; background:var(--bg-deep);}
  .app{position:relative; z-index:1; min-height:100%; max-width:480px; margin:0 auto; display:flex; flex-direction:column; padding:0 16px calc(28px + env(safe-area-inset-bottom));}

  .topbar{position:relative; display:flex; align-items:center; justify-content:space-between; padding:calc(14px + env(safe-area-inset-top)) 2px 14px;}
  
  .btn-theme{position:absolute; left:50%; top:calc(14px + env(safe-area-inset-top)); z-index:2; transform:translateX(-50%); appearance:none; cursor:pointer; flex:none; display:none; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--pill); border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:var(--on-dark); -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%); transition:var(--motion)}
  .btn-theme:hover{background:rgba(255,255,255,.16)}
  .btn-theme .ic-moon{display:none}
  html[data-theme="light"] .btn-theme .ic-sun{display:none}
  html[data-theme="light"] .btn-theme .ic-moon{display:block}
  html[data-theme="light"] .btn-theme{border-color:rgba(15,23,42,.14); background:rgba(15,23,42,.05); color:#16284A}
  html[data-theme="light"] .btn-theme:hover{background:rgba(15,23,42,.10)}
  /* flex:none — con un nome lungo ("Susanna Angela") il pulsante dell'account si allargava
     a spese del logo, che veniva schiacciato e finiva sotto al tondo di WhatsApp */
  .brand{display:flex; align-items:center; gap:9px; cursor:pointer; flex:none}
  .brand img{height:26px; width:auto; display:block}
  .brand .tag{font:600 10px/1 var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-mut); border:1px solid rgba(255,255,255,.22); padding:4px 7px; border-radius:var(--pill);}
  .btn-login{appearance:none; border:1px solid rgba(255,255,255,.28); cursor:pointer; background:rgba(255,255,255,.08); color:var(--on-dark); font:600 14px var(--font); padding:9px 16px; border-radius:var(--pill); backdrop-filter:blur(12px) saturate(140%); transition:var(--motion); display:flex; align-items:center; gap:8px;}
  .btn-login:hover{background:rgba(255,255,255,.16)}
  /* Il nome resta su una riga e, se non ci sta, finisce con i puntini: andando a capo
     faceva crescere il pulsante in altezza e sbilanciava tutta la testata */
  .btn-login{max-width:58vw}
  .btn-login > span:not(.avatar){min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .btn-login .avatar{flex:none}
  .topbar-actions{display:flex; align-items:center; gap:9px; min-width:0}
  /* Dentro l'ordine il pulsante dell'area non serve e porta fuori strada: chi sta
     ordinando ha una cosa sola da fare. Chi e' gia' cliente la porta la trova dove
     conta davvero, nel passaggio dei dati ("Hai gia' un account? Accedi"), e se
     risulta gia' servito a quell'indirizzo glielo diciamo li' con un riquadro apposta.
     Sulla home (/ordina/indirizzo) il pulsante RESTA: li' e' l'ingresso dei clienti.
     Vale su ogni schermo, telefono compreso.
     Stesso meccanismo della schermata di benvenuto (v3-area.css), ma la regola sta
     qui perche' quel foglio si carica in differita e il pulsante farebbe in tempo a
     comparire e sparire. */
  html[data-vista="/ordina/indirizzo/conferma"] #authBtn,
  html[data-vista="/ordina/box"] #authBtn,
  html[data-vista="/ordina/consegna"] #authBtn,
  html[data-vista="/ordina/dati"] #authBtn{display:none}
  .btn-call{position:relative; flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--pill); border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:var(--on-dark); -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%); text-decoration:none; transition:var(--motion)}
  .btn-call:hover{background:rgba(255,255,255,.16)}
  .btn-call-dot{position:absolute; top:-1px; right:-1px; width:11px; height:11px; border-radius:50%; background:var(--green); border:2px solid var(--bg-deep); box-shadow:0 0 0 0 rgba(51,144,93,.55); animation:waPulse 2s ease-out infinite}
  @keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(51,144,93,.55)}70%{box-shadow:0 0 0 6px rgba(51,144,93,0)}100%{box-shadow:0 0 0 0 rgba(51,144,93,0)}}
  .avatar{width:30px; height:30px; border-radius:var(--pill); background:linear-gradient(180deg,var(--accent),var(--primary)); color:#fff; font:700 12px var(--font); display:grid; place-items:center;}

  .hero{padding:18px 4px 10px; color:var(--on-dark)}
  .hero h1{font-family:var(--font-display); font-weight:800; font-size:33px; line-height:1.08; letter-spacing:-.02em; margin-bottom:12px;}
  .hero h1 .grad{background:linear-gradient(100deg,var(--aqua),var(--accent-soft)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
  .hero p{color:var(--on-dark-mut); font-size:15.5px; line-height:1.5; max-width:24em}
  
  #addrOverlay{z-index:80; align-items:flex-start}
  #addrOverlay .modal{border-radius:0 0 24px 24px; padding:calc(10px + env(safe-area-inset-top)) 20px 22px; transform:translateY(-100%); box-shadow:0 18px 50px rgba(8,11,22,.6); background:rgba(17,22,43,.92); -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%); border:1px solid rgba(255,255,255,.14); border-top:none; color:#fff}
  #addrOverlay.open .modal{transform:none}
  #addrOverlay .grab{display:none}
  
  #addrOverlay .modal h2{color:#fff}
  #addrOverlay .modal .sub{color:var(--on-dark-mut)}
  #addrOverlay .xclose{color:rgba(255,255,255,.7)}
  #addrOverlay .search .ico{color:var(--link)}
  #addrOverlay .search input{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff; box-shadow:none}
  #addrOverlay .search input::placeholder{color:rgba(255,255,255,.55)}
  #addrOverlay .search input:focus{border-color:rgba(112,98,255,.6); box-shadow:0 0 0 4px rgba(112,98,255,.14)}
  #addrOverlay #addrstatus{color:rgba(255,255,255,.85)}
  #addrOverlay .sugg{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16)}
  #addrOverlay .sugg:hover{background:rgba(255,255,255,.14); border-color:rgba(112,98,255,.55)}
  #addrOverlay .sugg .m{color:#fff}
  #addrOverlay .sugg .s{color:rgba(255,255,255,.72)}
  #addrOverlay .sugg .pin{background:rgba(112,98,255,.16); color:var(--link)}
  #addrOverlay .sugg-head{color:rgba(255,255,255,.62)}
  
  .civ-ask{margin-top:4px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:14px; padding:13px}
  .civ-ask-t{font:800 14px var(--font); color:#fff; margin-bottom:3px}
  .civ-ask-s{font:500 12.5px/1.45 var(--font); color:rgba(255,255,255,.75); margin-bottom:11px}
  .civ-ask-err{font:600 12px var(--font); color:#FF8A8A; margin-bottom:9px}
  .civ-ask-row{display:flex; gap:9px}
  .civ-ask-row input{flex:1; min-width:0; font:600 15px var(--font); color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:11px; padding:11px 13px; outline:none}
  .civ-ask-row input:focus{border-color:rgba(112,98,255,.6); box-shadow:0 0 0 3px rgba(112,98,255,.14)}
  .civ-ask-go{flex:none; appearance:none; border:1px solid var(--cta-bd); cursor:pointer; background:var(--cta-bg); color:var(--cta-ink); font:800 14px var(--font); padding:0 18px; border-radius:11px}
  
  .celebrate{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; transition:opacity .25s}
  .celebrate.show{opacity:1}
  .celebrate-card{background:rgba(17,22,43,.97); border:1.5px solid var(--ok-dark); border-radius:20px; padding:20px 26px; text-align:center; transform:scale(.78) translateY(8px); transition:transform .4s var(--spring); box-shadow:0 16px 44px rgba(0,0,0,.55), 0 0 36px rgba(124,231,173,.35)}
  .celebrate.show .celebrate-card{transform:scale(1) translateY(0)}
  .celebrate-emoji{font-size:42px; line-height:1; margin-bottom:7px}
  .celebrate-txt{font:800 17px var(--font-display); color:var(--ok-dark)}
  
  #filtersOverlay .modal, #roFiltersOverlay .modal{background:rgba(17,22,43,.97); color:#fff; -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%); border:1px solid rgba(255,255,255,.14)}
  #filtersOverlay .modal h2, #roFiltersOverlay .modal h2{color:#fff}
  #filtersOverlay .xclose, #roFiltersOverlay .xclose{color:rgba(255,255,255,.7)}
  #filtersOverlay #filtersBody, #roFiltersOverlay #roFiltersBody{display:flex; flex-direction:column}
  #filtersOverlay .flab, #roFiltersOverlay .flab{color:rgba(255,255,255,.6); margin:20px 0 8px 2px}
  #filtersOverlay #filtersBody .flab:first-child, #roFiltersOverlay #roFiltersBody .flab:first-child{margin-top:8px}
  #filtersOverlay .fselfull, #roFiltersOverlay .fselfull{background:rgba(255,255,255,.08); border:1.5px solid rgba(255,255,255,.2); color:#fff}
  #filtersOverlay .fselfull option, #roFiltersOverlay .fselfull option{color:#111}
  
  /* Modale di accesso: seguiva il tema solo a meta'. `.modal` usa var(--card), che nel
     wizard resta BIANCO anche col tema scuro (la ridefinisce solo l'area clienti), quindi
     sul fondo notturno della home compariva un foglio bianco.
     Non basta scurire il fondo: titolo, etichette, testi e campi sono di colore scuro, e
     sarebbero diventati illeggibili. Vanno rigirati tutti insieme. */
  #loginOverlay .modal{background:rgba(17,22,43,.97); color:var(--on-dark); -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%); border:1px solid rgba(255,255,255,.14)}
  #loginOverlay .modal h2{color:var(--on-dark)}
  #loginOverlay .modal .sub,
  #loginOverlay .modal label,
  #loginOverlay .modal .alt{color:var(--on-dark-mut)}
  #loginOverlay .modal .xclose{color:var(--on-dark-mut)}
  #loginOverlay .modal .grab{background:rgba(255,255,255,.22)}
  /* I campi si vestono sull'INPUT, mai sul riquadro che lo contiene: bordo, raggio e fondo
     stanno li' (.field.plain input, piu' sotto). Vestendo il contenitore compariva un
     rettangolo attorno al campo arrotondato. Sono gli stessi valori dei fogli scuri
     dell'app (.sheet .field.plain input), gia' collaudati. */
  #loginOverlay .modal .field.plain input{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:var(--on-dark)}
  #loginOverlay .modal .field.plain input::placeholder{color:rgba(255,255,255,.5)}
  /* Senza questo il fuoco riporterebbe il campo a fondo bianco con dentro il testo
     bianco - illeggibile proprio mentre ci si scrive. */
  #loginOverlay .modal .field.plain input:focus{border-color:rgba(112,98,255,.6); background:rgba(255,255,255,.12); box-shadow:0 0 0 3px rgba(112,98,255,.14)}
  /* Quando il browser compila da solo email e password ridipinge il campo con un colore
     suo, che sul fondo scuro salta all'occhio. Non si puo' cambiare con `background`:
     l'unica strada che Chrome lascia e' coprirlo con un'ombra interna piena. Il colore e'
     quello che risulta dal campo (bianco all'8%) sopra il fondo della modale. */
  #loginOverlay .modal input:-webkit-autofill,
  #loginOverlay .modal input:-webkit-autofill:hover,
  #loginOverlay .modal input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--on-dark);
    -webkit-box-shadow:0 0 0 1000px rgb(36,41,59) inset;
    caret-color:var(--on-dark);
  }

  /* Pulsante Google della modale del sito: lo disegna la libreria di Google, a noi resta
     lo spazio attorno. Il separatore parte spento e si accende solo se il pulsante arriva
     davvero (v. disegnaAccessoGoogleWeb). */
  #loginOverlay .gsi-sep{display:none; margin:14px 0 12px}
  /* `color-scheme:light` sembra sbagliato su una modale scura, e invece serve proprio li'.
     Il pulsante di Google vive in un riquadro chiuso: quando la pagina dichiara tema scuro,
     Chrome dipinge di bianco il fondo di quel riquadro, e attorno al pulsante compare una
     cornice bianca — con TUTTE e tre le vesti, provate una per una. Dicendo al riquadro che
     li' dentro il tema e' chiaro, Chrome smette di ridipingerlo e resta solo il pulsante.
     E' una contromisura nota a un difetto di Chrome, non si vede su Safari. */
  #loginOverlay .gsi-box{display:flex; justify-content:center; min-height:0; color-scheme:light}
  #loginOverlay .gsi-box > div{max-width:100%}

  #chemOverlay .modal{background:rgba(17,22,43,.97); color:#fff; -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%); border:1px solid rgba(255,255,255,.14)}
  #chemOverlay h2{color:#fff}
  #chemOverlay .xclose{color:rgba(255,255,255,.7)}
  #chemOverlay .sub{color:rgba(255,255,255,.72)}
  #chemOverlay .chemtable .cc{border-bottom-color:rgba(255,255,255,.1)}
  #chemOverlay .chemtable .ccl{color:rgba(255,255,255,.72)}
  #chemOverlay .chemtable .ccv{color:#fff}
  #chemOverlay .chemtable .ccv i{color:rgba(255,255,255,.55)}
  .chem-imgbox{display:flex; align-items:center; justify-content:center; background:#C9D8EC; border-radius:16px; padding:14px; margin:6px auto 14px; max-width:210px; min-height:172px}
  .chem-img{display:block; height:150px; width:auto; max-width:100%; object-fit:contain; filter:drop-shadow(0 10px 16px rgba(20,30,60,.25))}
  
  #civicCta{position:relative; overflow:hidden}
  #civicCta::after{content:''; position:absolute; top:0; bottom:0; left:0; width:55%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:translateX(-160%) skewX(-14deg); animation:ctaShine 2.8s ease-in-out 1s infinite; pointer-events:none}
  @media(min-width:520px){ #addrOverlay .modal{border-radius:24px; margin:16px 16px 0} }

  .steps{display:flex; align-items:center; gap:6px; padding:22px 2px 14px}
  .step{display:flex; align-items:center; gap:7px; flex:1}
  .step .dot{width:26px; height:26px; border-radius:var(--pill); flex:none; display:grid; place-items:center; font:700 12px var(--font); background:rgba(255,255,255,.10); color:var(--on-dark-mut); border:1px solid rgba(255,255,255,.18); transition:var(--motion);}
  .step .lbl{font:600 12px var(--font); color:var(--on-dark-mut); white-space:nowrap}
  .step .bar{height:2px; flex:1; border-radius:2px; background:rgba(255,255,255,.14)}
  .step:last-child .bar{display:none}
  .step.active .dot{background:var(--on-dark); color:var(--primary-dark); border-color:transparent; box-shadow:var(--sh-glow)}
  .step.active .lbl{color:var(--on-dark)}
  .step.done .dot{background:var(--sel-dot); color:#fff; border-color:transparent}

  .sheet{background:rgba(17,22,43,.86); -webkit-backdrop-filter:blur(20px) saturate(150%); backdrop-filter:blur(20px) saturate(150%); border:1px solid rgba(255,255,255,.13); border-radius:var(--r-xl); padding:22px 18px 20px; box-shadow:var(--sh-float); color:#fff; animation:rise 480ms var(--spring) both;}
  @keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
  .sheet h2{font-family:var(--font-display); font-weight:700; font-size:21px; letter-spacing:-.01em; margin-bottom:4px}
  .sheet .sub{color:var(--muted); font-size:13.5px; margin-bottom:18px}

  
  .search{position:relative}
  .search .ico{position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--primary); pointer-events:none}
  .search input{width:100%; font:600 16.5px var(--font); color:var(--text); padding:17px 15px 17px 48px; border:2px solid var(--primary); border-radius:var(--r-md); background:#fff; box-shadow:0 4px 14px rgba(37,99,235,.12); transition:var(--motion);}
  .search input::placeholder{color:var(--placeholder); font-weight:500}
  .search input:focus{outline:none; box-shadow:0 0 0 4px rgba(37,99,235,.15)}
  .hint{font:500 12.5px var(--font); color:var(--muted); margin:9px 4px 0; display:flex; align-items:center; gap:6px}

  .sugg-list{margin-top:10px; display:flex; flex-direction:column; gap:2px}
  .sugg-head{font:700 10.5px var(--font); color:var(--muted); text-transform:uppercase; letter-spacing:.05em; padding:6px 4px 5px}
  .sugg{display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer; background:#fff; border:1px solid var(--border); border-radius:var(--r-md); padding:13px 14px; transition:var(--motion); animation:rise 240ms var(--spring) both;}
  .sugg:hover{border-color:var(--primary); background:#F5F8FF}
  .sugg .pin{width:34px;height:34px;flex:none;border-radius:var(--pill);background:#EFF4FF;color:var(--primary);display:grid;place-items:center}
  .sugg .txt{min-width:0}
  .sugg .m{display:block; font:700 14.5px var(--font); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .sugg .s{display:block; font:500 12.5px var(--font); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

  .geo{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; cursor:pointer; background:var(--subtle); border:1px solid var(--border); color:var(--primary); font:600 14px var(--font); padding:13px; border-radius:var(--r-md); margin-top:12px; transition:var(--motion)}
  .geo:hover{background:#EFF4FF; border-color:var(--primary)}

  .field.plain input{width:100%; font:500 16px var(--font); color:var(--text); padding:14px 15px; border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--subtle); transition:var(--motion);}
  .field.plain input:focus{outline:none; border-color:var(--primary); background:#fff; box-shadow:0 0 0 3px rgba(37,99,235,.14)}

  .cta{appearance:none; border:1px solid var(--cta-bd); cursor:pointer; width:100%; font:700 16px var(--font); color:var(--cta-ink); padding:16px; border-radius:var(--r-md); background:var(--cta-bg); box-shadow:0 8px 20px var(--cta-glow), var(--cta-hi); transition:var(--motion); margin-top:18px;}
  .cta:disabled{background:var(--dis-bg); color:var(--dis-ink); box-shadow:none; cursor:not-allowed; opacity:1}
  .cta:not(:disabled):hover{transform:translateY(-1px); box-shadow:0 12px 26px rgba(37,99,235,.40)}
  .cta.off{background:var(--dis-bg); color:var(--dis-ink); box-shadow:none; pointer-events:none; transform:none}

  .cov{margin:12px 0 0; padding:13px 14px; border-radius:var(--r-md); font:600 13.5px var(--font); display:flex; align-items:center; gap:9px; animation:rise 300ms ease both;}
  .cov.ok{background:var(--success-soft); color:#0f5132}
  .cov.no{background:var(--danger-soft); color:#842029}
  .cov.no a{color:inherit; text-decoration:underline; cursor:pointer; font-weight:700}
  .cov.load{background:var(--subtle); color:var(--muted)}
  .cov.warn{background:#fff4d6; color:#7a5b00}
  .spin{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sp .7s linear infinite;flex:none}
  @keyframes sp{to{transform:rotate(360deg)}}

  
  .map-toggle{position:absolute; top:8px; right:8px; z-index:5; appearance:none; border:1px solid rgba(255,255,255,.25); cursor:pointer; background:rgba(11,16,32,.8); color:#fff; font:700 11.5px var(--font); padding:7px 11px; border-radius:999px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 4px 12px rgba(0,0,0,.4)}
  .mapcap{font:500 11.5px var(--font); color:var(--muted); margin:0 2px 14px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  .mapcap b{font-weight:700; color:var(--text-2)}
  .addrline{font:600 15px var(--font); color:var(--text); display:flex; gap:8px; align-items:flex-start}
  
  .sheet .sub{color:var(--on-dark-mut)}
  .sheet .addrline{color:#fff}
  .sheet .field.plain input{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#fff}
  .sheet .field.plain input::placeholder{color:rgba(255,255,255,.5)}
  .sheet .field.plain input:focus{border-color:rgba(112,98,255,.6); background:rgba(255,255,255,.12); box-shadow:0 0 0 3px rgba(112,98,255,.14)}
  .sheet .cov.ok{background:rgba(22,163,74,.20); border:1px solid rgba(22,163,74,.34); color:#9be7b4}
  .sheet .cov.no{background:rgba(220,38,38,.20); border:1px solid rgba(220,38,38,.34); color:#fca5a5}
  .sheet .cov.load{background:rgba(255,255,255,.06); color:var(--on-dark-mut)}
  .sheet .cov.warn{background:rgba(240,195,109,.18); border:1px solid rgba(240,195,109,.40); color:#f3d28a}
  .sheet .mapcap{color:var(--on-dark-mut)}
  .sheet .mapcap b{color:#fff}

  
  .sec-title{color:var(--on-dark); font:700 15px var(--font-display); margin:4px 2px 12px; display:flex; justify-content:space-between; align-items:center}
  .sec-title .count{color:var(--on-dark-mut); font:600 12px var(--font)}
  .skel{background:linear-gradient(90deg,#1a2140,#222a4d,#1a2140); background-size:200% 100%; animation:shimmer 1.2s infinite; border-radius:var(--r-md); height:70px; margin-bottom:10px}
  @keyframes shimmer{to{background-position:-200% 0}}

  .filters{position:sticky; top:0; z-index:30; margin:0 -16px 10px; padding:10px 16px 8px; background:var(--bg-deep);}
  .filters::after{content:""; position:absolute; left:0; right:0; bottom:-12px; height:12px; background:linear-gradient(180deg, rgba(11,16,32,.35), transparent); pointer-events:none}
  .search2{position:relative; margin-bottom:9px}
  .search2 svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--on-dark-mut); z-index:1}
  .search2 input{width:100%; box-sizing:border-box; font:500 15px var(--font); color:#fff; padding:12px 14px 12px 40px; border:1.5px solid var(--glass-bd); border-radius:var(--r-md); background:rgba(255,255,255,.06); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur)}
  .search2 input::placeholder{color:rgba(255,255,255,.5)}
  .search2 input:focus{outline:none; border-color:var(--link); box-shadow:0 0 0 3px rgba(112,98,255,.2)}
  .fsugg{position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:35; background:rgba(17,22,43,.98); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%); border:1px solid var(--glass-bd); border-radius:14px; overflow:hidden; box-shadow:0 16px 36px rgba(0,0,0,.55); display:none}
  .fsugg.open{display:block}
  .fsugg-row{display:flex; align-items:center; gap:10px; width:100%; appearance:none; background:none; border:none; border-bottom:1px solid rgba(255,255,255,.08); cursor:pointer; padding:10px 12px; text-align:left}
  .fsugg-row:last-child{border-bottom:none}
  .fsugg-row:active{background:rgba(255,255,255,.06)}
  .fsugg-ic{width:28px; height:28px; flex:none; object-fit:contain; border-radius:6px; background:#fff}
  .fsugg-ic.emoji{display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1); font-size:15px}
  .fsugg-n{flex:1; min-width:0; font:700 13.5px var(--font); color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .fsugg-h{flex:none; font:700 10px var(--font); text-transform:uppercase; letter-spacing:.05em; color:var(--on-dark-mut)}
  .ftoks{display:none; flex-wrap:nowrap; gap:7px; margin-bottom:9px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px}
  .ftoks::-webkit-scrollbar{display:none}
  .ftok{flex:none; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; appearance:none; cursor:pointer; background:var(--sel-fill); color:#fff; border:1px solid var(--sel-bd); border-radius:var(--pill); padding:6px 8px 6px 10px; font:700 12.5px var(--font)}
  .ftok-clear{flex:none; display:inline-flex; align-items:center; justify-content:center; appearance:none; cursor:pointer; background:var(--ghost-bg); border:1px solid var(--ghost-bd); color:var(--on-dark); border-radius:var(--pill); padding:6px 12px; -webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%)}
  .ftok-clear:active{background:rgba(255,255,255,.22)}
  .ftok-clear svg{width:16px; height:16px}
  .ftok-ic{width:16px; height:16px; object-fit:contain; border-radius:3px}
  .ftok-x{font:800 15px/1 var(--font); opacity:.6}
  .fchips{display:flex; gap:7px; overflow-x:auto; padding-bottom:2px}
  .fchips::-webkit-scrollbar{display:none}
  
  .fgroups{display:none}
  .fsel{flex:none; font:600 11.5px var(--font); padding:6px 11px; border-radius:var(--pill); border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.10); color:var(--on-dark); appearance:none; -webkit-appearance:none; cursor:pointer}
  .fsel.on{background:var(--sel-fill); color:#fff; border-color:var(--sel-bd); font-weight:700}
  .fsel option{color:#111}
  .fbtn{flex:none; display:inline-flex; align-items:center; gap:5px; font:700 11.5px var(--font); padding:6px 11px; border-radius:var(--pill); border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.10); color:var(--on-dark); cursor:pointer}
  .fbtn.on{background:var(--sel-fill); color:#fff; border-color:var(--sel-bd)}
  .fcount{background:var(--sel); color:#fff; font:700 10px var(--font); min-width:15px; height:15px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; padding:0 4px}
  .qf{flex:none; display:inline-flex; align-items:center; gap:4px; font:600 11.5px var(--font); padding:6px 11px; border-radius:var(--pill); border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.10); color:var(--on-dark); cursor:pointer; white-space:nowrap}
  .qf.on{background:var(--sel-fill); color:#fff; border-color:var(--sel-bd); font-weight:700}
  /* Ordinamento della lista acque: sta in testa alle pastiglie dei filtri, stesso
     aspetto, ma e' una <select> (le voci sono cinque e si escludono a vicenda). */
  .fsort{flex:none; display:inline-flex; align-items:center; gap:4px; padding:0 9px 0 10px; border-radius:var(--pill); border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.10); color:var(--on-dark); cursor:pointer; white-space:nowrap}
  .fsort.on{background:var(--sel-fill); border-color:var(--sel-bd)}
  .fsort-ic{font:800 12px var(--font); opacity:.8; line-height:1}
  .fsort select{appearance:none; -webkit-appearance:none; border:none; background:none; color:inherit; font:600 11.5px var(--font); padding:6px 2px; cursor:pointer; max-width:44vw}
  .fsort.on select{font-weight:700}
  .fsort select:focus{outline:none}
  .fsort option{color:#111}
  /* Rientro alla spiegazione del box: chi ha chiuso l'avviso all'arrivo deve poterlo
     riaprire, come in v2 col messaggio in testata. */
  .sec-i{margin-left:auto; flex:none; appearance:none; cursor:pointer; display:inline-flex; align-items:center; gap:4px; font:700 11.5px var(--font); color:var(--on-dark); background:var(--fill-soft); border:1px solid var(--glass-bd); border-radius:var(--pill); padding:6px 11px}
  .sec-i:active{background:var(--fill-press)}
  .flab{display:block; font:600 12.5px var(--font); color:var(--text-2); margin:12px 0 6px 2px}
  .fselfull{width:100%; font:500 15px var(--font); color:var(--text); padding:12px 14px; border:1.5px solid var(--border); border-radius:var(--r-md); background:var(--subtle); appearance:none; -webkit-appearance:none}
  .tag-vr{background:#dcf5ec !important; color:#06502F !important; font-weight:700 !important; display:inline-flex; align-items:center; gap:3px; cursor:pointer}
  .vr-info{display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; background:#0a7a52; color:#fff; font:700 9px var(--font); margin-left:3px; cursor:pointer}
  .sec-title .chgaddr{color:var(--link); font:600 12px var(--font); cursor:pointer; margin-left:auto; text-decoration:none}
  .wlist{display:flex; flex-direction:column; gap:12px}
  .wcard{display:flex; gap:13px; align-items:stretch; background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-bd); border-radius:var(--r-lg); padding:12px; box-shadow:0 4px 16px rgba(0,0,0,.22); animation:rise 320ms var(--spring) both}
  .wcleft{position:relative; overflow:hidden; flex:none; width:124px; min-height:152px; border-radius:12px; cursor:pointer; background:#C9D8EC}
  .wcblur{display:none}
  .wcimg{position:absolute; inset:0; margin:auto; max-width:82%; max-height:88%; width:auto; height:auto; object-fit:contain; z-index:1; filter:drop-shadow(0 10px 16px rgba(20,30,60,.22))}
  .wtaste{position:absolute; top:7px; left:7px; z-index:2; display:inline-flex; align-items:center; gap:5px; width:fit-content; max-width:calc(100% - 14px); background:rgba(11,16,32,.66); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; font:700 10px var(--font); padding:4px 8px; border-radius:12px; line-height:1.18; pointer-events:none}
  .wt-lbl{min-width:0}
  .fzdots{display:inline-flex; align-items:center; gap:1.5px; flex:none}
  .fz-dot{width:7px; height:10px; display:inline-flex; align-items:center; justify-content:center; border:none; background:none; border-radius:0}
  .fz-dot svg{width:100%; height:100%; display:block; overflow:visible}
  .fz-dot path{fill:none; stroke:currentColor; stroke-width:1.4; opacity:.9}
  .fz-dot.on path{fill:currentColor; stroke:currentColor; stroke-width:.8; opacity:1}
  .fz-bolt{font-size:11px; line-height:1; margin-left:2px}
  .wcright{flex:1; min-width:0; display:flex; flex-direction:column; gap:7px}
  
  .wc-info, .wc-buy{display:contents}
  .wcard .wbrand{font:800 15px var(--font-display); color:#fff; display:flex; align-items:center; gap:7px; flex-wrap:wrap; line-height:1.1}
  .wcard .wmeta{display:flex; flex-wrap:wrap; gap:4px}
  .wcard .wmeta .tag{font:600 10.5px var(--font); color:rgba(255,255,255,.92); background:rgba(255,255,255,.12); border-radius:5px; padding:2px 6px}
  .wcard .wfmt{font:500 12px/1.35 var(--font); color:rgba(255,255,255,.78); display:block; margin:1px 0}
  .wcard .wfmt b{font-weight:700; color:#fff}
  
  .premium{display:inline-block; background:linear-gradient(135deg,#e6ecf6 0%,#aab6cc 40%,#f1f4fa 52%,#94a2bd 100%); color:#2a3550; font:800 9px var(--font); padding:2px 7px; border-radius:6px; text-transform:uppercase; letter-spacing:.05em; border:1px solid rgba(255,255,255,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 1px 2px rgba(11,16,32,.3)}
  .wprem{margin-top:-3px}
  .wchem{display:flex; align-items:center; flex-wrap:wrap; gap:3px 7px; border:1px solid var(--glass-bd); border-radius:8px; padding:6px 8px; background:rgba(255,255,255,.05)}
  .wchem-stats{display:flex; align-items:center; gap:7px; flex-wrap:nowrap}
  .wchem-stat{display:inline-flex; align-items:baseline; gap:4px; white-space:nowrap}
  .wchem-k{font:700 7.5px var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-mut)}
  .wchem-stat b{font:800 12px var(--font); color:var(--on-dark)}
  .wchem-stat i{font-style:normal; font:500 8.5px var(--font); color:var(--on-dark-mut)}
  .wchem .cc{display:flex; justify-content:space-between; align-items:baseline; padding:2.5px 0; border-bottom:1px dotted rgba(255,255,255,.12)}
  .wchem .cc:last-child{border-bottom:none}
  .wchem .ccl{font:500 11px var(--font); color:var(--on-dark-mut)}
  .wchem .ccv{font:700 12px var(--font); color:#fff; white-space:nowrap}
  .wchem .ccv i{font-style:normal; font-weight:500; font-size:9px; color:rgba(255,255,255,.5); margin-left:2px}
  .wchem-na{color:var(--on-dark-mut); font:500 12px var(--font)}
  .wchem-more{margin-left:auto; background:none; border:none; cursor:pointer; color:var(--link); font:700 9px var(--font); padding:4px 0; white-space:nowrap}
  .chemtable{max-height:48vh; overflow-y:auto; margin-top:6px}
  .chemtable .cc{display:flex; justify-content:space-between; align-items:baseline; padding:9px 2px; border-bottom:1px solid var(--subtle)}
  .chemtable .ccl{font:500 14px var(--font); color:var(--text-2)}
  .chemtable .ccv{font:700 14px var(--font); color:var(--text); white-space:nowrap}
  .chemtable .ccv i{font-style:normal; font-weight:500; font-size:11px; color:var(--muted)}
  .wprice{display:flex; flex-direction:column; line-height:1.15; margin-top:auto}
  .wprice .pval{font:800 17px var(--font); color:#fff}
  .wprice .pval-old{font-size:.68em; font-weight:600; text-decoration:line-through; opacity:.5; margin-right:3px}
  .wprice .pval-new{color:#7CE7AD}
  .wprice .plab{font:500 10.5px var(--font); color:var(--on-dark-mut)}
  .addbtn{position:relative; overflow:hidden; width:100%; margin-top:9px; appearance:none; border:1px solid rgba(112,98,255,.85); cursor:pointer; font:700 13.5px var(--font); color:#fff; padding:11px 16px; border-radius:12px; background:rgba(112,98,255,.34); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transition:var(--motion)}
  .addbtn::after{content:''; position:absolute; top:0; bottom:0; left:0; width:55%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:translateX(-160%) skewX(-14deg); pointer-events:none; opacity:0}
  .box-need .addbtn::after{opacity:1; animation:ctaShine 2.8s ease-in-out 1s infinite}
  .wcontact{background:var(--glass); border:1px solid var(--glass-bd); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-radius:20px; padding:20px 18px; text-align:center}
  .wcontact-h{font:800 16px var(--font-display); color:#fff; margin-bottom:5px}
  .wcontact-p{max-width:280px; margin:0 auto 14px; font:500 13px/1.45 var(--font); color:rgba(255,255,255,.74)}
  .wcontact-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; font:800 14px var(--font); color:#fff; background:var(--green); border-radius:12px; padding:12px 20px; box-shadow:0 8px 20px rgba(51,144,93,.35)}
  .wcontact-btn svg{width:19px; height:19px}
  /* flex-wrap: quando l'acqua e' nel box compaiono insieme "Nel box: N", "Rimuovi" e
     i due pulsanti da 44px (misura minima per il dito, non si tocca). Su schermi
     stretti non ci stanno in riga: senza il ritorno a capo il "piu'" usciva dal
     riquadro bianco della scheda. min-width:0 serve alla colonna di sinistra per
     potersi restringere invece di spingere fuori il resto. */
  .card-stepper{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px; flex-wrap:wrap}
  .card-stepper .card-step{flex:0 0 auto; margin-left:auto}
  .card-inbox{font:700 12px var(--font); color:var(--link)}
  .card-step{display:inline-flex; align-items:center; gap:10px}
  .card-step .qbtn{width:32px; height:32px; border-radius:9px; border:1px solid var(--ghost-bd); background:var(--ghost-bg); color:#fff; font:700 18px/1 var(--font)}
  .card-step b{font:800 15px var(--font); color:#fff; min-width:18px; text-align:center}
  
  .card-inbox-col{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0}
  .card-remove{appearance:none; background:none; border:none; padding:0; font:700 11px var(--font); color:#E24B4A; cursor:pointer}
  .card-rm-x{font-weight:800; margin-right:1px}
  
  .ro-wgroup{display:flex; flex-direction:column; gap:12px}
  .ro-wgroup + .ro-wgroup{margin-top:12px}
  .ro-wgroup-head{font:800 12px var(--font); letter-spacing:.04em; text-transform:uppercase; color:var(--on-dark-mut); padding:2px 2px 0}
  .addbtn:hover{transform:translateY(-1px)}
  .addbtn.added{background:var(--success); color:#fff; border-color:transparent; box-shadow:none}
  .box-spacer{height:118px}
  
  .bx-deliv{display:inline-flex; align-items:center; gap:5px; max-width:100%; appearance:none; border:none; background:none; padding:0; margin:0; cursor:pointer; font:600 11px var(--font); color:var(--on-dark-mut); white-space:nowrap}
  .bx-deliv-ic{flex:none; font-size:12px; line-height:1}
  .bx-deliv-tx{overflow:hidden; text-overflow:ellipsis; text-transform:capitalize}
  .bx-deliv-i{flex:none; width:13px; height:13px; border-radius:50%; border:1px solid var(--on-dark-mut); display:inline-flex; align-items:center; justify-content:center; font:700 9px var(--font); line-height:1}
  
  .enudge{position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(8,11,22,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
  .enudge.open{display:flex; animation:enudgeFade .2s ease}
  @keyframes enudgeFade{from{opacity:0}to{opacity:1}}
  .enudge-card{position:relative; width:100%; max-width:318px; background:var(--card,#fff); border-radius:20px; padding:24px 22px; text-align:center; box-shadow:0 20px 54px rgba(0,0,0,.45); animation:enudgePop .28s cubic-bezier(.34,1.4,.5,1)}
  @keyframes enudgePop{from{transform:scale(.86); opacity:0}to{transform:scale(1); opacity:1}}
  .enudge-emoji{font-size:40px; line-height:1; margin-bottom:10px}
  .enudge-h{font:800 18px var(--font-display); color:var(--text); margin-bottom:6px}
  .enudge-p{font:500 13.5px var(--font); color:var(--muted); line-height:1.5; margin-bottom:18px}
  .enudge-btn{appearance:none; border:1px solid var(--cta-bd); cursor:pointer; width:100%; font:800 15px var(--font); color:var(--cta-ink); background:var(--cta-bg); border-radius:13px; padding:14px; box-shadow:0 8px 22px var(--cta-glow), var(--cta-hi); animation:enudgeBtnPulse 1.6s ease-in-out infinite}
  @keyframes enudgeBtnPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
  
  .wlist.nudge-pulse .addbtn{animation:addNudgePulse 1s ease 0s 3}
  @keyframes addNudgePulse{0%,100%{transform:translateY(0) scale(1); box-shadow:0 4px 12px rgba(112,98,255,.4)}50%{transform:translateY(-1px) scale(1.07); box-shadow:0 7px 18px rgba(112,98,255,.7)}}
  
  .dlv{padding:14px 16px 0}
  .dlv-h{font:800 21px var(--font-display); color:var(--on-dark); margin:8px 0 4px}
  .dlv-onreq{background:var(--glass); border:1px solid var(--glass-bd); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border-radius:16px; padding:22px 18px; text-align:center; margin-top:10px}
  .dlv-onreq-ic{font-size:34px; margin-bottom:8px}
  .dlv-onreq-h{font:800 17px var(--font-display); color:var(--sky); margin-bottom:6px}
  .dlv-onreq-p{font:500 13.5px var(--font); color:rgba(255,255,255,.78); line-height:1.5}
  
  .cs-group{margin-top:16px}
  .cs-group:first-of-type{margin-top:6px}
  .cs-group-head{display:flex; align-items:baseline; justify-content:space-between; padding:4px 4px 9px}
  .cs-group-title{font:700 11.5px var(--font); letter-spacing:.07em; text-transform:uppercase; color:var(--on-dark-mut)}
  .cs-group-hint{font:500 11.5px var(--font); color:var(--on-dark-mut); text-transform:capitalize}
  .cs-list{display:flex; flex-direction:column; gap:9px}
  
  .cs-day{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-bd); border-radius:16px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.22)}
  .cs-day-row{display:flex; align-items:center; gap:13px; padding:13px 14px; cursor:pointer}
  .cs-cal{flex:none; width:46px; height:50px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; background:rgba(255,255,255,.10); border:1px solid var(--glass-bd)}
  .cs-cal-dow{font:700 10px var(--font); letter-spacing:.05em; text-transform:uppercase; color:var(--on-dark-mut)}
  .cs-cal-num{font:700 20px var(--font-display); line-height:1; color:#fff; margin-top:1px}
  .cs-cal-mon{font:600 9.5px var(--font); color:var(--on-dark-mut); text-transform:uppercase; letter-spacing:.04em; margin-top:2px}
  .cs-main{flex:1; min-width:0}
  .cs-rel{font:600 12.5px var(--font); color:var(--on-dark-mut)}
  .cs-day.selected .cs-rel{color:rgba(255,255,255,.82)}
  .cs-tag{flex:none; font:700 13px var(--font); padding:5px 11px; border-radius:999px; white-space:nowrap}
  .cs-tag.free{color:#7CE7AD; background:rgba(22,163,74,.20)}
  .cs-tag.fee{color:#fff; background:rgba(255,255,255,.14)}
  .cs-chev{flex:none; width:20px; height:20px; color:var(--on-dark-mut); display:flex; align-items:center; justify-content:center; transition:.2s}
  .cs-chev svg{width:18px; height:18px}
  .cs-day.selected{border-color:rgba(112,98,255,.55); background:rgba(255,255,255,.12); box-shadow:0 0 0 1px rgba(112,98,255,.35), 0 10px 26px rgba(0,0,0,.34)}
  .cs-day.selected .cs-cal{background:var(--sel); border-color:var(--sel)}
  .cs-day.selected .cs-cal-dow, .cs-day.selected .cs-cal-mon{color:rgba(255,255,255,.88)}
  .cs-day.selected .cs-cal-num{color:#fff}
  .cs-day.selected .cs-chev{color:var(--link); transform:rotate(180deg)}
  .cs-slots{border-top:1px solid var(--glass-bd); padding:13px 14px 14px; background:rgba(255,255,255,.04)}
  .cs-slots-lbl{font:700 11px var(--font); letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-mut); margin-bottom:10px; display:flex; align-items:center; gap:6px}
  .cs-slots-lbl svg{width:13px; height:13px}
  .cs-noslot{font:500 13px var(--font); color:var(--on-dark-mut)}
  .cs-slot{display:flex; align-items:center; gap:12px; padding:14px 15px; border-radius:12px; border:1.5px solid var(--glass-bd); background:rgba(255,255,255,.05); cursor:pointer; margin-bottom:8px; transition:.12s}
  .cs-slot:last-child{margin-bottom:0}
  .cs-radio{flex:none; width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.42); position:relative; background:transparent}
  .cs-slot-main{flex:1; min-width:0}
  .cs-slot-name{font:600 14.5px var(--font); color:#fff; line-height:1.2}
  .cs-slot-time{font:400 12px var(--font); color:var(--on-dark-mut); margin-top:2px}
  .cs-slot-note{font:600 11.5px var(--font); color:#7CE7AD; margin-top:4px; display:flex; align-items:center; gap:5px}
  .cs-slot-note svg{width:12px; height:12px}
  .cs-slot-price{flex:none; font:700 13px var(--font); white-space:nowrap; color:#fff}
  .cs-slot-price.free{color:#7CE7AD} .cs-slot-price.fee{color:#fff}
  .cs-unit{font-weight:500; color:rgba(255,255,255,.55); font-size:11px}
  .cs-slot.active{border-color:rgba(112,98,255,.6); background:rgba(112,98,255,.14)}
  .cs-slot.active .cs-radio{border-color:var(--link)}
  .cs-slot.active .cs-radio:after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--sel-dot)}
  .cs-slot.active .cs-slot-name{color:#fff}
  
  .cs-day.selected > .cs-day-row .cs-radio{border-color:var(--link)}
  .cs-day.selected > .cs-day-row .cs-radio:after{content:""; position:absolute; inset:3px; border-radius:50%; background:var(--sel-dot)}
  .dlv-bar{position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:480px; z-index:40; display:flex; align-items:center; gap:12px; cursor:pointer; background:rgba(17,22,43,.96); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); border-top:1px solid rgba(255,255,255,.12); border-radius:18px 18px 0 0; padding:16px 16px calc(13px + env(safe-area-inset-bottom)); box-shadow:0 -10px 34px rgba(0,0,0,.5)}
  .dlv-grab{position:absolute; top:6px; left:50%; transform:translateX(-50%); width:38px; height:4px; border-radius:3px; background:rgba(255,255,255,.3)}
  .dlv-bar-see{display:block; font:700 10.5px var(--font); letter-spacing:.02em; color:var(--link)}
  .dlv-bar-l{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; color:#fff}
  .dlv-bar-tot{font:800 18px var(--font-display); color:#fff}
  .dlv-bar-sub{font:600 11px var(--font); color:var(--on-dark-mut)}
  .dlv-cta{flex:none; appearance:none; border:1px solid var(--cta-bd); cursor:pointer; font:800 15px var(--font); color:var(--cta-ink); background:var(--cta-bg); border-radius:13px; padding:13px 22px; box-shadow:0 8px 20px var(--cta-glow), var(--cta-hi)}
  .dlv-cta.off{opacity:1; background:var(--dis-bg); color:var(--dis-ink); box-shadow:none}
  
  .dlv-cta:not(.off), .dt-next:not(.off){position:relative; overflow:hidden; animation:ctaNudge 3s ease-in-out 1.2s infinite}
  .dlv-cta:not(.off)::after, .dt-next:not(.off)::after{content:''; position:absolute; top:0; bottom:0; left:0; width:55%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); transform:translateX(-160%) skewX(-14deg); animation:ctaShine 2.8s ease-in-out 1s infinite; pointer-events:none}
  
  .dati{padding:14px 16px 0}
  .dati-h{font:800 21px var(--font-display); color:var(--on-dark); margin:8px 0 4px}
  .dt-recap{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-bd); border-radius:16px; padding:13px 15px; margin-bottom:16px; display:flex; flex-direction:column; gap:7px}
  .dt-recap-row{display:flex; align-items:center; justify-content:space-between; gap:12px; font:600 12.5px var(--font); color:var(--on-dark-mut)}
  .dt-recap-row b{color:#fff; font-weight:700; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:62%}
  
  .dt-card{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-bd); border-radius:16px; padding:16px; margin-bottom:14px; box-shadow:0 4px 16px rgba(0,0,0,.22)}
  .dt-sub2{font:600 13px var(--font); color:var(--on-dark-mut); margin-bottom:9px}
  .dt-field{display:flex; flex-direction:column; gap:5px; margin-top:11px}
  .dt-lbl{font:700 12.5px var(--font); color:var(--on-dark-mut)}
  .dt-lbl i{font-weight:500; color:rgba(255,255,255,.5); font-style:normal}
  .dt-in{width:100%; box-sizing:border-box; appearance:none; border:1.5px solid var(--glass-bd); border-radius:12px; padding:12px 13px; font:600 15px var(--font); color:#fff; background:rgba(255,255,255,.06); outline:none}
  .dt-in:focus{border-color:var(--link); box-shadow:0 0 0 3px rgba(112,98,255,.20)}
  .dt-in::placeholder{color:rgba(255,255,255,.5); font-weight:500}
  .dt-area{resize:vertical; min-height:46px; line-height:1.4}
  
  .dt-cardbox{margin-top:14px; padding-top:14px; border-top:1px dashed var(--glass-bd)}
  .dt-cardrow{display:flex; gap:10px; margin-top:12px}
  .dt-cardrow .dt-field{flex:1 1 0; min-width:0}
  .dt-stripe{min-height:46px; padding:14px 13px}
  .dt-stripe.StripeElement--focus{border-color:var(--link); box-shadow:0 0 0 3px rgba(112,98,255,.20)}
  .dt-stripe.StripeElement--invalid{border-color:#FF9090}
  .dt-card-msg{display:block; font:700 12px var(--font); color:var(--on-dark-mut); margin-top:8px; min-height:1px}
  .dt-card-msg.err{color:#FF9090}
  html[data-theme="light"] .dt-stripe{background:#FFFFFF}
  html[data-theme="light"] .dt-card-msg.err{color:#A0111A}
  .dt-grid2{display:flex; gap:10px}
  .dt-grid2 .dt-field{flex:1; min-width:0}
  .dt-tabs{display:flex; gap:6px; background:rgba(255,255,255,.06); border:1px solid var(--glass-bd); border-radius:12px; padding:4px; margin-bottom:6px}
  .dt-tab{flex:1; appearance:none; border:none; cursor:pointer; background:none; border-radius:9px; padding:10px; font:700 13.5px var(--font); color:var(--on-dark-mut)}
  .dt-tab.on{background:rgba(255,255,255,.18); color:#fff}
  .dt-toggle{display:flex; align-items:center; gap:9px; margin-top:13px; font:600 13px var(--font); color:var(--on-dark-mut); cursor:pointer}
  .dt-toggle input{width:18px; height:18px; accent-color:var(--link)}
  .dt-pays{display:flex; flex-direction:column; gap:9px}
  .dt-pay{appearance:none; cursor:pointer; display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.05); border:1.5px solid var(--glass-bd); border-radius:12px; padding:13px 12px; font:700 13.5px var(--font); color:#fff}
  .dt-pay.sel{border-color:rgba(112,98,255,.6); background:rgba(112,98,255,.14)}
  
  .dt-pay-main{display:flex; flex-direction:column; gap:7px; min-width:0; flex:1}
  
  /* I loghi delle carte sono un dettaglio rassicurante, non il contenuto della schermata:
     a 20px andavano a capo su due righe e riempivano mezzo riquadro, rubando l'occhio al
     metodo che il cliente deve scegliere. Rimpiccioliti stanno tutti su una riga sola. */
  .dt-cardlogos{display:flex; align-items:center; flex-wrap:wrap; gap:4px}
  .cardlogo{height:13px; width:auto; display:block; background:#fff; border:1px solid rgba(15,23,42,.10); border-radius:3px; padding:2px 3px; box-sizing:content-box}
  .dt-paynote{font:500 12px var(--font); color:var(--on-dark-mut); background:rgba(255,255,255,.06); border-radius:11px; padding:10px 12px; margin-top:11px; line-height:1.45}
  .dt-coupon{margin-top:12px; border-top:1px solid var(--glass-bd); padding-top:8px}
  .dt-coupon-toggle{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; min-height:44px; appearance:none; background:none; border:none; cursor:pointer; color:var(--link); font:700 13px var(--font); padding:4px 2px; text-align:left}
  .dt-coupon-cv{flex:none; width:15px; height:15px; color:var(--on-dark-mut); transition:transform .2s ease}
  .dt-coupon-cv svg{width:100%; height:100%; display:block}
  .dt-coupon.open .dt-coupon-cv{transform:rotate(180deg)}
  .dt-coupon-body{display:none; margin-top:6px}
  .dt-coupon.open .dt-coupon-body{display:block}
  .dt-coupon-body .coupon-row{background:var(--glass); border:1px solid var(--glass-bd)}
  .dt-coupon-body .coupon-row{width:100%; box-sizing:border-box}
  .dt-coupon-body .coupon-row input{color:var(--on-dark); min-width:0}
  .dt-coupon-body .coupon-row input::placeholder{color:var(--on-dark-mut)}
  .dt-coupon-body .coupon-btn{background:#4A3FB0; border-color:#4A3FB0; color:#fff}
  .dt-coupon-body .coupon-msg.info{color:var(--on-dark-mut)}
  .dt-coupon-body .coupon-msg.ok{color:#7CE7AD}
  .dt-coupon-body .coupon-msg.err{color:#FF9090}
  html[data-theme="light"] .dt-coupon-body .coupon-msg.ok{color:#0A5028}
  html[data-theme="light"] .dt-coupon-body .coupon-msg.err{color:#A0111A}
  .lead-modal{text-align:center; max-width:400px}
  .lead-gift{font-size:38px; line-height:1; margin-bottom:6px}
  .lead-title{font:800 21px var(--font-display); margin:0 0 6px; color:var(--text); line-height:1.2}
  .lead-sub{color:var(--muted); margin:0 0 18px}
  .lead-lbl{display:block; text-align:left; font:600 11px var(--font); color:var(--muted); margin-bottom:5px}
  .lead-field{display:flex; align-items:stretch; border:2px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:12px}
  .lead-field:focus-within{border-color:#15803D}
  .lead-pre{flex:none; display:flex; align-items:center; padding:0 12px; background:var(--subtle); color:var(--muted); font:600 13px var(--font); border-right:1px solid var(--border); white-space:nowrap}
  .lead-field input{flex:1; min-width:0; border:none; background:none; outline:none; font:600 15px var(--font); color:var(--text); padding:12px 12px}
  .lead-field input::placeholder{color:var(--placeholder)}
  .lead-consent{display:flex; align-items:flex-start; gap:8px; text-align:left; font:500 11px var(--font); color:var(--muted); line-height:1.4; margin-bottom:4px; cursor:pointer}
  .lead-consent input{flex:none; margin-top:2px}
  .lead-consent a{color:#1B3A93; text-decoration:underline}
  .lead-msg{min-height:16px; font:600 12px var(--font); margin:6px 0 0}
  .lead-msg.info{color:var(--muted)}
  .lead-msg.ok{color:#0A7B3E}
  .lead-msg.err{color:#C81E1E}
  .lead-cta{width:100%; min-height:48px; border:none; border-radius:12px; background:#15803D; color:#fff; font:700 15.5px var(--font); cursor:pointer; margin-top:10px}
  .lead-cta:active{transform:scale(.99)}
  .lead-offer{font:500 11px var(--font); color:var(--muted); margin-top:8px; opacity:.85}
  /* Spazio stretto sotto la testata: il saluto costava 18px di aria che servivano
     al "Riordina ora", che sullo schermo di un telefono restava tagliato in basso.
     4/9: il saluto e' stato tolto del tutto (il nome sta in testata, nel pulsante
     dell'account), quindi .ar-head e .ar-hi non servono piu' a nessuno. */
  .ar-wrap{padding:0 0 44px}
  .ar-sub{font:500 13px var(--font); color:var(--on-dark-mut); margin-top:3px}
  .ar-cards{display:flex; flex-direction:column; gap:10px; margin-bottom:16px}
  .ar-card{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--glass); border:1px solid var(--glass-bd); border-radius:14px; padding:14px; cursor:pointer; color:var(--on-dark)}
  .ar-ic{flex:none; font-size:20px}
  .ar-ct{flex:1; min-width:0; display:flex; flex-direction:column}
  .ar-ct b{font:700 14.5px var(--font); color:var(--on-dark)}
  .ar-ct i{font-style:normal; font:500 12px var(--font); color:var(--on-dark-mut); margin-top:2px}
  .ar-chev{flex:none; color:var(--on-dark-mut); font-size:22px; line-height:1}
  .ar-stats{display:flex; gap:10px; margin-bottom:18px}
  .ar-stat{flex:1; background:var(--glass); border:1px solid var(--glass-bd); border-radius:14px; padding:14px; text-align:center}
  .ar-stat b{display:block; font:800 22px var(--font-display); color:var(--on-dark)}
  .ar-stat span{font:600 10.5px var(--font); color:var(--on-dark-mut); text-transform:uppercase; letter-spacing:.05em}
  .ar-logout{width:100%; min-height:46px; background:none; border:1px solid var(--glass-bd); border-radius:12px; color:var(--on-dark-mut); font:700 13px var(--font); cursor:pointer}
  .ar-back{background:none; border:none; color:var(--link); font:700 13px var(--font); cursor:pointer; padding:6px 0; margin-bottom:4px}
  .ar-h2{font:800 22px var(--font-display); color:var(--on-dark); margin:4px 0 14px}
  .ar-h3{font:800 13px var(--font); color:var(--on-dark); margin:18px 0 10px; text-transform:uppercase; letter-spacing:.05em}
  .ar-box{background:var(--glass); border:1px solid var(--glass-bd); border-radius:14px; padding:2px 14px}
  .ar-row{display:flex; justify-content:space-between; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--glass-bd)}
  .ar-row:last-child{border-bottom:none}
  .ar-row span{font:500 13px var(--font); color:var(--on-dark-mut)}
  .ar-row b{font:700 14px var(--font); color:var(--on-dark); text-align:right; word-break:break-word}
  .ar-addrs{display:flex; flex-direction:column; gap:10px}
  .ar-addr{background:var(--glass); border:1px solid var(--glass-bd); border-radius:12px; padding:12px 14px}
  .ar-addr-main{font:700 14px var(--font); color:var(--on-dark)}
  .ar-addr-sub{font:500 12.5px var(--font); color:var(--on-dark-mut); margin-top:2px}
  .ar-addr-ph{font:600 12.5px var(--font); color:var(--on-dark-mut); margin-top:5px}
  .ar-empty,.ar-note{font:500 12.5px var(--font); color:var(--on-dark-mut)}
  .ar-note{margin-top:14px; opacity:.85}
  .ar-imp{display:flex; align-items:center; gap:10px; background:rgba(245,158,11,.16); border:1px solid rgba(245,158,11,.42); border-radius:12px; padding:10px 12px; margin-bottom:14px}
  .ar-imp .ar-imp-t{flex:1; min-width:0; font:600 12.5px var(--font); color:var(--on-dark)}
  .ar-imp .ar-imp-x{flex:none; background:#F59E0B; color:#1A1205; border:none; border-radius:9px; padding:7px 12px; font:700 12px var(--font); cursor:pointer}
  /* La navigazione laterale dell'area esiste SOLO da 1200px in su
     (v3-area-desktop.css la riaccende): sul telefono e dentro l'app la barra
     in basso resta l'unica navigazione, e questo blocco non deve nemmeno
     comparire per un istante.
     Sta qui e non in v3-area.css di proposito: quel foglio si carica in
     differita (media="print" onload) e il menu farebbe in tempo a lampeggiare
     in cima alla pagina. Stessa ragione per cui ci sta la regola di #authBtn. */
  .ar-side{display:none}
  .ar-ogroup{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-bd); border-radius:14px; margin-bottom:12px; overflow:hidden}
  .ar-ord{padding:12px 14px; border-bottom:1px solid var(--glass-bd)}
  .ar-ord:last-child{border-bottom:none}
  .ar-ord-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
  .ar-od{font:700 13.5px var(--font); color:var(--on-dark)}
  .ar-oid{font:600 11.5px var(--font); color:var(--on-dark-mut); margin-left:6px; letter-spacing:.02em}
  .ar-om{font:500 12.5px var(--font); color:var(--on-dark-mut); margin-top:3px}
  /* Riga della consegna gia' fissata: e' l'unica data che interessa a chi guarda un
     ordine "programmato", quindi si stacca dal grigio del resto della card. */
  .ar-osched{display:flex; align-items:center; gap:6px; margin-top:6px; padding:6px 9px; border-radius:10px; font:600 12.5px var(--font); color:var(--ok-dark); background:color-mix(in srgb, var(--ok-dark) 12%, transparent); border:1px solid color-mix(in srgb, var(--ok-dark) 26%, transparent)}
  .ar-osched b{font-weight:800}
  .ar-op{font:500 12px var(--font); color:var(--on-dark-mut); margin-top:6px; display:flex; align-items:center; gap:8px}
  .ar-op-ic{flex:none; width:26px; height:26px; border-radius:6px; background:rgba(255,255,255,.06); overflow:hidden; display:flex; align-items:center; justify-content:center}
  .ar-op-ic img{width:100%; height:100%; object-fit:contain}
  .ar-op-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ar-op b{font-weight:700; color:var(--on-dark); flex:none}
  .ar-ob{flex:none; font:700 11px var(--font); padding:4px 9px; border-radius:999px; white-space:nowrap}
  .ar-ob-ok{background:rgba(22,163,74,.18); color:var(--ok-dark)}
  .ar-ob-go{background:rgba(98,173,255,.18); color:var(--sky)}
  .ar-ob-warn{background:rgba(217,119,6,.20); color:var(--warn-dark)}
  .ar-ob-bad{background:rgba(220,38,38,.18); color:var(--danger-dark)}
  /* --- Tastiera aperta -----------------------------------------------------
     `--tastiera` la misura v3-area.js con visualViewport: quanto schermo sta
     coprendo la tastiera. Vale zero quando la pagina e' gia' stata accorciata da
     qualcun altro (Android 15, o WebView recente), quindi queste regole si
     accendono solo dove servono davvero.
     Le barre ancorate in fondo salgono sopra la tastiera invece di restarci sotto,
     e la pagina guadagna spazio sotto per poter scorrere fino all'ultimo campo. */
  :root{ --tastiera: 0px }
  body.con-tastiera .app{ padding-bottom: calc(28px + var(--tastiera)) }
  body.con-tastiera .boxbar,
  body.con-tastiera .dlv-bar,
  body.con-tastiera .ro-bar,
  body.con-tastiera .ro-choicebar{ bottom: var(--tastiera) }
  /* I modali sono fogli ancorati al bordo basso di uno strato che copre tutto lo
     schermo (.overlay e' inset:0): senza questo restano sotto la tastiera, proprio
     mentre si scrive nei loro campi. Accorciando lo strato, il foglio si appoggia
     sopra la tastiera. Stessa cosa per i fogli a scomparsa. */
  body.con-tastiera .overlay{ bottom: var(--tastiera) }
  body.con-tastiera .dsheet,
  body.con-tastiera .ar-sheet{ bottom: var(--tastiera) }