.ar-subs{display:flex; flex-direction:column; gap:14px; margin-bottom:18px}
  .ar-scard{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-bd); border-radius:18px; padding:15px; box-shadow:0 6px 22px rgba(0,0,0,.24)}
  .ar-sub-top{display:flex; align-items:center; gap:8px; margin-bottom:11px}
  .ar-tbadge{display:inline-flex; align-items:center; gap:5px; font:800 11.5px var(--font); padding:5px 11px; border-radius:999px; white-space:nowrap}
  .ar-tbadge.auto{background:rgba(22,163,74,.18); color:var(--ok-dark)}
  .ar-tbadge.manual{background:rgba(125,125,140,.22); color:var(--on-dark)}
  .ar-sbadge{margin-left:auto; font:700 10.5px var(--font); padding:4px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em}
  .ar-sbadge.active{background:rgba(98,173,255,.18); color:var(--sky)}
  .ar-sbadge.paused{background:rgba(217,119,6,.20); color:var(--warn-dark)}
  .ar-sub-addr{display:flex; align-items:flex-start; gap:7px; font:600 13px var(--font); color:var(--on-dark); margin-bottom:12px}
  .ar-sub-addr i{font-style:normal; flex:none}
  .ar-sub-prods{display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px; -webkit-overflow-scrolling:touch}
  .ar-sub-prods::-webkit-scrollbar{height:0}
  .ar-pchip{flex:none; width:88px; text-align:center}
  .ar-pthumb{position:relative; width:88px; height:88px; border-radius:13px; background:#fff; border:1px solid var(--glass-bd); overflow:hidden; display:flex; align-items:center; justify-content:center}
  .ar-pthumb img{width:100%; height:100%; object-fit:contain; padding:7px}
  .ar-pqty{position:absolute; right:5px; bottom:5px; background:var(--primary); color:#fff; font:800 11px var(--font); padding:2px 7px; border-radius:999px}
  .ar-pname{display:block; font:600 11px var(--font); color:var(--on-dark-mut); margin-top:6px; line-height:1.25; max-height:2.5em; overflow:hidden}
  .ar-sub-meta{display:flex; flex-wrap:wrap; gap:6px 12px; font:600 12px var(--font); color:var(--on-dark-mut); padding:11px 0; border-top:1px solid var(--glass-bd)}
  .ar-sub-meta b{color:var(--on-dark)}
  button.ar-sub-meta-tap{width:100%; background:none; border-left:none; border-right:none; border-bottom:none; cursor:pointer; text-align:left; align-items:center}
  .ar-meta-edit{margin-left:auto; color:#57b6ff; font-weight:700}

  
  .fq-val{text-align:center; margin:2px 0 16px}
  .fq-pre{font:600 13px var(--font); color:var(--on-dark-mut); vertical-align:middle}
  .fq-val b{font:800 34px var(--font-display,var(--font)); color:var(--on-dark); vertical-align:middle; margin:0 4px}
  .fq-unit{font:600 15px var(--font); color:var(--on-dark); vertical-align:middle}
  .fq-badge{display:block; margin:8px auto 0; width:max-content; font:700 11px var(--font); color:#06231a; background:#3ddc9a; border-radius:20px; padding:3px 11px; visibility:hidden}
  .fq-badge.show{visibility:visible}
  .fq-ctrl{display:flex; align-items:center; gap:11px}
  .fq-sbtn{flex:none; width:46px; height:46px; border-radius:13px; border:1px solid var(--glass-bd); background:var(--glass); color:var(--on-dark); font-size:23px; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1}
  .fq-sbtn:active{transform:scale(.93)}
  .fq-sbtn:disabled{opacity:.32; cursor:default}
  .fq-bar{flex:1; position:relative; padding:26px 0 22px}
  .fq-slider{width:100%; accent-color:#3d8ff0; margin:0; display:block; height:26px}
  .fq-mk-top{position:absolute; top:0; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; pointer-events:none; z-index:2}
  .fq-mk-bot{position:absolute; top:53px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; pointer-events:none; z-index:2}
  .fq-tick{width:2px; height:9px; border-radius:1px; background:currentColor; opacity:.9}
  .fq-mk-lbl{font:700 10.5px var(--font); white-space:nowrap; pointer-events:auto; line-height:1.1}
  .fq-mk-top .fq-mk-lbl{margin-bottom:3px}
  .fq-mk-bot .fq-mk-lbl{margin-top:3px}
  .fq-mk-lbl.rec, .fq-tick.rec{color:#3ddc9a}
  .fq-mk-lbl.rec{cursor:pointer}
  .fq-mk-lbl.today, .fq-tick.today{color:var(--on-dark-mut)}
  .fq-ends{position:absolute; left:0; right:0; bottom:0; display:flex; justify-content:space-between; font:600 10.5px var(--font); color:var(--on-dark-mut)}
  .fq-why{font:600 12px var(--font); color:var(--on-dark-mut); text-align:center; margin:0 0 16px}
  .fq-why b{color:var(--link); font-weight:700}
  .fq-note{text-align:center; font:600 11.5px var(--font); color:var(--on-dark-mut); margin:24px 0 16px}
  .ar-btn.fq-cta{flex:none; display:flex; width:100%; min-height:58px; font-size:16px; margin:4px 0 0}
  .fq-ok{text-align:center; padding:6px 0 2px}
  .fq-ok-ic{width:50px; height:50px; border-radius:50%; background:#123a2c; color:#3ddc9a; display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 11px}
  .fq-ok-t{font:800 17px var(--font-display,var(--font)); color:var(--on-dark)}
  .fq-ok-v{font:700 13px var(--font); color:var(--ok-dark); margin-top:3px}
  .fq-ok-w{font:600 12px var(--font); color:var(--on-dark-mut); margin:13px 0 2px}
  .fq-link{display:block; width:100%; text-align:center; background:none; border:none; color:var(--link); font:700 12.5px var(--font); margin-top:16px; cursor:pointer; padding:6px}

  
  .pc-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:11px}
  .pc-navb{flex:none; width:38px; height:38px; border-radius:11px; border:1px solid var(--glass-bd); background:var(--glass); color:var(--on-dark); font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center}
  .pc-navb:active{transform:scale(.92)}
  .pc-navb:disabled{opacity:.28; cursor:default}
  .pc-title{font:800 15px var(--font-display,var(--font)); color:var(--on-dark); text-transform:capitalize}
  .pc-head{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-bottom:7px}
  .pc-head span{text-align:center; font:700 10px var(--font); color:var(--on-dark-mut)}
  .pc-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px}
  .pc-cell{aspect-ratio:1; border-radius:10px; border:1px solid transparent; background:none; color:var(--on-dark-mut); opacity:.4; font:700 12.5px var(--font); display:flex; align-items:center; justify-content:center; cursor:default; padding:0}
  .pc-cell.empty{opacity:0; pointer-events:none}
  .pc-cell.served{background:rgba(61,143,240,.15); border-color:rgba(61,143,240,.34); color:var(--link); opacity:1; cursor:pointer}
  .pc-cell.served:active{transform:scale(.9)}
  .pc-cell.current{opacity:1; border-color:#3ddc9a; color:var(--on-dark); box-shadow:inset 0 0 0 1px rgba(61,220,154,.45)}
  .pc-cell.sel{background:#2f7fe0; border-color:#7ab0f0; color:#fff; box-shadow:none}
  .pc-legend{display:flex; align-items:center; justify-content:center; gap:7px; font:600 11px var(--font); color:var(--on-dark-mut); margin-top:12px}
  .pc-lg-cur{flex:none; width:13px; height:13px; border-radius:5px; border:1px solid #3ddc9a; box-shadow:inset 0 0 0 1px rgba(61,220,154,.45)}
  .pc-sel{text-align:center; font:600 13px var(--font); color:var(--on-dark-mut); margin:15px 0 14px; min-height:18px}
  .pc-sel b{color:var(--on-dark); font-weight:800}
  .pc-cta{width:100%; min-height:52px}
  .ar-sub-pay{display:flex; align-items:center; gap:8px; font:600 12.5px var(--font); color:var(--on-dark-mut); margin-bottom:13px}
  .ar-sub-cta{display:flex; gap:9px}
  .ar-btn{flex:1; min-height:44px; border-radius:12px; font:800 13.5px var(--font); cursor:pointer; border:1px solid var(--glass-bd); background:var(--glass); color:var(--on-dark); display:inline-flex; align-items:center; justify-content:center; gap:6px}
  .ar-btn.primary{background:var(--cta-bg); border-color:var(--cta-bd); color:var(--cta-ink); box-shadow:0 6px 16px var(--cta-glow), var(--cta-hi)}
  .ar-btn:active{transform:scale(.985)}
  .ar-empty-subs{text-align:center; padding:26px 16px; background:var(--glass); border:1px solid var(--glass-bd); border-radius:18px; margin-bottom:18px}
  .ar-empty-subs .em{font-size:34px}
  .ar-empty-subs p{font:600 14px var(--font); color:var(--on-dark); margin:8px 0 14px}
  /* Il pulsante senza padding orizzontale si stringeva sul testo. */
  .ar-empty-subs .ar-btn{display:inline-flex; width:auto; min-width:200px; padding:0 26px; flex:none}
  
  .ar-sheet-scrim{position:fixed; inset:0; background:rgba(7,10,20,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .2s; z-index:80}
  .ar-sheet-scrim.open{opacity:1; pointer-events:auto}
  /* Il foglio resta blu notte anche nel tema chiaro. Dentro, quindi, "su fondo scuro"
     deve continuare a valere chiaro: senza queste due righe i testi seguirebbero il
     tema e diventerebbero scuri su scuro, illeggibili. */
  /* I fogli SEGUONO il tema, non restano blu notte: un pannello scuro che sale dentro
     un'app chiara faceva sembrare l'app fatta a pezze, ed era la causa delle correzioni
     una-per-una che si rincorrevano (testo bianco su fondo bianco e viceversa). */

  /* Le barre in basso del riordino seguono il tema come quella del catalogo (.boxbar):
     restavano blu notte, e sopra ci finiva testo scuro perche' --on-dark segue il tema */
  html[data-theme="light"] .ro-bar,
  html[data-theme="light"] .ro-choicebar{background:#FFFFFF; -webkit-backdrop-filter:none; backdrop-filter:none; border-top:1px solid rgba(15,23,42,.10); box-shadow:0 -6px 18px rgba(16,24,40,.07)}
  .ar-sheet{position:fixed; left:0; right:0; bottom:0; max-width:520px; margin:0 auto; background:var(--bg-deep-alt); border:1px solid var(--glass-bd); border-bottom:none; border-radius:20px 20px 0 0; padding:8px 16px calc(16px + env(safe-area-inset-bottom)); transform:translateY(102%); transition:transform .26s cubic-bezier(.22,1,.36,1); z-index:81; max-height:88vh; overflow-y:auto}
  .ar-sheet.open{transform:translateY(0)}
  .ar-sheet-grab{width:42px; height:5px; border-radius:999px; background:var(--fill-press); margin:6px auto 12px}
  .ar-sheet-h{font:800 18px var(--font-display); color:var(--on-dark); margin-bottom:4px}
  .ar-sheet-sub{font:500 12.5px var(--font); color:var(--on-dark-mut); margin-bottom:14px}
  .ar-demo-note{display:flex; align-items:center; gap:8px; background:rgba(96,98,255,.14); border:1px solid rgba(96,98,255,.34); border-radius:12px; padding:10px 12px; font:600 12px var(--font); color:#C7C8FF; margin:14px 0}
  .ar-seg{display:flex; gap:8px; background:var(--fill-soft); border:1px solid var(--glass-bd); border-radius:13px; padding:5px}
  .ar-seg button{flex:1; min-height:40px; border:none; background:none; color:var(--on-dark-mut); font:700 13px var(--font); border-radius:9px; cursor:pointer}
  .ar-seg button.on{background:var(--primary); color:#fff}
  .ar-qrow{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--glass-bd)}
  .ar-qrow:last-child{border-bottom:none}
  .ar-qthumb{width:48px; height:48px; border-radius:10px; background:#fff; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center}
  .ar-qthumb img{width:100%; height:100%; object-fit:contain; padding:4px}
  .ar-qname{flex:1; min-width:0; font:600 13px var(--font); color:var(--on-dark)}
  .ar-stepper{display:flex; align-items:center; gap:10px; flex:none}
  .ar-stepper button{width:32px; height:32px; border-radius:9px; border:1px solid var(--glass-bd); background:var(--glass); color:var(--on-dark); font:800 16px var(--font); cursor:pointer}
  .ar-stepper b{min-width:20px; text-align:center; font:800 14px var(--font); color:var(--on-dark)}
  .ar-fld{margin:12px 0}
  .ar-fld label{display:block; font:700 12px var(--font); color:var(--on-dark-mut); margin-bottom:5px}
  .ar-fld input{width:100%; min-height:46px; background:var(--fill-soft); border:1px solid var(--glass-bd); border-radius:11px; padding:0 13px; color:var(--on-dark); font:600 14px var(--font)}
  .ar-fld input::placeholder{color:var(--placeholder,#7A7C82)}
  .dt-card{margin:2px 0 4px; padding:2px 13px 13px; border:1.5px solid rgba(112,98,255,.35); border-radius:12px; background:rgba(112,98,255,.07)}
  
  .dt-acc{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-bd); border-radius:16px; margin-bottom:11px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,.22)}
  .dt-acc-head{display:flex; align-items:center; gap:11px; width:100%; appearance:none; background:none; border:none; cursor:pointer; padding:15px}
  .dt-acc-no{flex:none; width:24px; height:24px; border-radius:8px; background:var(--fill-press); color:var(--on-dark); font:800 13px var(--font); display:flex; align-items:center; justify-content:center}
  .dt-acc-no.ok{background:var(--green)}
  .dt-acc-t{font:800 15.5px var(--font-display); color:var(--on-dark); flex:none}
  .dt-acc.open .dt-acc-t{flex:1}
  .dt-acc-sum{flex:1; min-width:0; text-align:right; font:600 12.5px var(--font); color:var(--on-dark-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .dt-acc-cv{flex:none; width:18px; height:18px; color:var(--on-dark-mut); display:flex; align-items:center; justify-content:center; transition:.2s}
  .dt-acc-cv svg{width:18px; height:18px}
  .dt-acc.open .dt-acc-cv{transform:rotate(180deg); color:var(--link)}
  .dt-acc-body{padding:0 15px 16px}
  .dt-next{appearance:none; border:1px solid var(--cta-bd); cursor:pointer; width:100%; margin-top:16px; font:800 14.5px var(--font); color:var(--cta-ink); background:var(--cta-bg); border-radius:12px; padding:13px; box-shadow:0 6px 16px var(--cta-glow), var(--cta-hi)}
  .dt-next.off{opacity:1; background:var(--dis-bg); color:var(--dis-ink); box-shadow:none}
  .dt-confirm{display:block; width:100%; margin-top:14px; padding:15px 16px; border:1px solid var(--cta-bd); border-radius:14px; font:800 15px var(--font); letter-spacing:-.01em; color:var(--cta-ink); background:var(--cta-bg); box-shadow:0 8px 20px var(--cta-glow), var(--cta-hi); cursor:pointer; transition:var(--motion)}
  .dt-confirm.off{background:var(--dis-bg); color:var(--dis-ink); box-shadow:none}
  .dt-svcs{display:grid; grid-template-columns:1fr 1fr; gap:9px}
  .dt-svc{appearance:none; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--fill-soft); border:1.5px solid var(--glass-bd); border-radius:13px; padding:13px 10px; text-align:center}
  .dt-svc.sel{border-color:rgba(112,98,255,.6); background:rgba(112,98,255,.14)}
  .dt-svc-ic{width:48px; height:48px; object-fit:contain}
  .dt-svc-n{font:700 12.5px var(--font); color:var(--on-dark); line-height:1.25}
  .dt-svc-p{font:700 12px var(--font)}
  .dt-svc-p.free{color:#7CE7AD} .dt-svc-p.fee{color:var(--on-dark)}

  
  .ar-water{display:flex; align-items:center; gap:14px; margin:13px 0 4px; padding:12px 13px; border-radius:14px; background:var(--fill-soft); border:1px solid var(--glass-bd)}
  .ar-goccia{width:64px; height:auto; flex:none; display:block}
  .ar-water-txt{flex:1; min-width:0}
  .ar-water-days{font:700 14px var(--font); color:var(--on-dark)}
  .ar-water-msg{font:600 11.5px var(--font); color:var(--on-dark-mut); margin-top:4px; line-height:1.4}
  
  .ar-goccia-wait .ar-truck{animation:arTruckBob 2.4s ease-in-out infinite}
  @keyframes arTruckBob{0%,100%{transform:translate(58px,120px)}50%{transform:translate(64px,120px)}}
  .ar-sheet-note{font:600 13px var(--font); color:var(--on-dark-mut); margin:0 0 12px; line-height:1.5}
  
  .ar-water-tap{appearance:none; -webkit-appearance:none; width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit}
  .ar-water-tap:active{background:var(--fill-soft)}
  .ar-oblock .ar-water-tap:active{background:none}
  .ar-water-hint{margin-top:6px; font:700 12px var(--font); color:var(--sky,#62ADFF)}
  .ar-fb-pills{display:flex; flex-direction:column; gap:8px; margin:4px 0 6px}
  .ar-fb-pill{appearance:none; -webkit-appearance:none; display:flex; align-items:center; gap:12px; width:100%; padding:11px 13px; border:1px solid var(--glass-bd); border-radius:12px; background:var(--fill-soft); color:var(--on-dark); font:700 14px var(--font); cursor:pointer}
  .ar-fb-pill:active{background:var(--fill-press)}
  .ar-fb-pill:disabled{opacity:.5; cursor:default}
  .ar-fb-drop{width:22px; height:29px; flex:none}
  .ar-fb-err{min-height:16px; font:600 12px var(--font); color:#FF6B6B; margin-top:6px}

  /* NPS ("Consiglieresti Fontilio a un amico?"), dentro il foglio .ar-sheet.
     Undici numeri tutti uguali, niente colori a semaforo: colorare la scala spinge il
     voto. Il selezionato prende il viola della selezione, come tutto il resto del v3. */
  .ar-nps-x{position:absolute; top:14px; right:14px; width:36px; height:36px; border-radius:50%; border:1px solid var(--glass-bd); background:var(--fill-soft); color:var(--on-dark); display:grid; place-items:center; cursor:pointer; font:600 20px/1 var(--font); padding:0}
  .ar-nps-x:active{background:var(--fill-press)}
  .ar-nps-head{display:flex; align-items:flex-start; gap:12px; padding-right:40px; margin-top:2px}
  .ar-nps-head .ar-sheet-h{font-size:20px; line-height:1.2}
  .ar-nps-goccia{height:auto; flex:none; display:block}
  .ar-nps-scale{display:flex; flex-direction:column; gap:5px; margin:14px 0 4px}
  .ar-nps-n{appearance:none; -webkit-appearance:none; width:100%; min-height:40px; border-radius:12px; border:1px solid var(--glass-bd); background:var(--fill-soft); color:var(--on-dark); cursor:pointer; display:flex; align-items:center; gap:12px; padding:0 8px 0 5px; text-align:left; transition:background .15s, border-color .15s}
  .ar-nps-n i{font:800 15px var(--font-display); font-style:normal; width:30px; height:30px; border-radius:50%; background:var(--fill-press); color:var(--on-dark); display:grid; place-items:center; flex:none; font-variant-numeric:tabular-nums}
  .ar-nps-n span{font:600 13.5px var(--font); color:var(--on-dark-mut)}
  .ar-nps-n:active{background:var(--fill-press)}
  .ar-nps-n.sel{background:var(--sel-fill); border-color:var(--sel)}
  .ar-nps-n.sel i{background:var(--sel); color:#fff}
  .ar-nps-n.sel span{color:var(--on-dark)}
  .ar-nps-n:disabled{cursor:default}
  .ar-nps-later{display:block; width:100%; margin-top:14px; appearance:none; -webkit-appearance:none; background:none; border:none; color:var(--on-dark-mut); font:600 14px var(--font); padding:10px; cursor:pointer; border-radius:10px}
  .ar-nps-later:active{background:var(--fill-soft)}
  .ar-nps-chip{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--sel-bd); background:var(--sel-fill); color:var(--on-dark); font:700 13px var(--font); padding:6px 12px 6px 6px; border-radius:999px; margin:4px 0 14px}
  .ar-nps-chip i{font-style:normal; width:26px; height:26px; border-radius:50%; background:var(--sel); color:#fff; display:grid; place-items:center; font:800 14px var(--font-display)}
  .ar-nps-chip small{font:600 11.5px var(--font); color:var(--on-dark-mut)}
  .ar-nps-why{width:100%; min-height:96px; resize:none; padding:12px 14px; border-radius:14px; border:1px solid var(--glass-bd); background:var(--fill-soft); color:var(--on-dark); font:500 14px/1.5 var(--font); display:block}
  .ar-nps-why::placeholder{color:var(--on-dark-mut); opacity:.7}
  .ar-nps-cta{width:100%; min-height:50px; margin-top:14px; font-size:16px}
  .ar-nps-thanks{text-align:center; padding:8px 0 4px}
  .ar-nps-thanks .ar-nps-goccia{margin:0 auto 10px; animation:npsPop .5s var(--spring) both}
  @keyframes npsPop{from{transform:scale(.6); opacity:0} to{transform:none; opacity:1}}
  .ar-nps-bar{height:3px; border-radius:2px; background:var(--fill-press); margin-top:18px; overflow:hidden}
  .ar-nps-bar i{display:block; height:100%; width:100%; background:var(--sel); transform-origin:left; animation:npsDrain 3.2s linear both}
  @keyframes npsDrain{from{transform:scaleX(1)} to{transform:scaleX(0)}}
  @media (prefers-reduced-motion: reduce){ .ar-nps-thanks .ar-nps-goccia, .ar-nps-bar i{animation:none} .ar-nps-n{transition:none} }

  
  .ar-box{display:block; width:100%; text-align:left; margin:12px 0; padding:10px; border:1px solid var(--glass-bd); border-radius:14px; background:var(--fill-soft); cursor:pointer; appearance:none; -webkit-appearance:none}
  .ar-box:active{background:var(--fill-soft)}
  .ar-box .bx-crates{padding:1px 0}
  
  .ar-box .bx-slot{width:56px; height:67px; border-radius:9px; position:relative}
  .ar-box .bx-crate{gap:7px; padding:9px; border-radius:12px}
  .ar-box .bx-slot.full img{padding-top:9px; box-sizing:border-box}
  .ar-box-hint{display:block; margin-top:10px; font:700 12.5px var(--font); color:var(--sky,#62ADFF)}
  
  .ar-oblock{margin:12px 0; padding:12px 13px; border:1px solid var(--glass-bd); border-radius:16px; background:var(--fill-soft)}
  .ar-lo-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px}
  .ar-lo-lbl{font:600 10.5px var(--font); color:var(--on-dark-mut); text-transform:uppercase; letter-spacing:.05em}
  .ar-oblock .ar-box{margin:0; padding:0; border:none; background:none}
  .ar-oblock .ar-box:active{background:none}
  .ar-oblock .ar-water{margin:12px 0 0; padding:12px 0 0; border:none; border-top:1px solid var(--glass-bd); border-radius:0; background:none}
  
  .ar-btn-reorder{flex-direction:column; gap:2px; line-height:1.2}
  .ar-btn-main{font:800 16px var(--font)}
  .ar-btn-sub{font:600 11px var(--font); opacity:.85; letter-spacing:.01em}
  
  .ar-wlist{margin:12px 0; display:flex; flex-direction:column}
  
  .ar-sheet-acts{display:flex; gap:10px; margin-top:14px; padding-top:14px; border-top:1px solid var(--glass-bd)}
  .ar-sheet-link{flex:1; appearance:none; -webkit-appearance:none; border:1px solid var(--glass-bd); background:var(--fill-soft); color:var(--on-dark); font:700 13px var(--font); padding:11px 10px; border-radius:11px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px}
  .ar-sheet-link:active{background:var(--fill-press)}
  .ar-sheet-link.ar-sheet-go{background:var(--cta-bg); border-color:var(--cta-bd); color:var(--cta-ink)}
  .ar-wi{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--glass-bd)}
  .ar-wi:last-child{border-bottom:none}
  .ar-wi-img{width:44px; height:54px; object-fit:contain; background:#fff; border-radius:8px; flex:none; padding:3px}
  .ar-wi-mid{flex:1; min-width:0}
  .ar-wi-name{font:700 14.5px var(--font); color:var(--on-dark); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ar-wi-sub{font:600 12px var(--font); color:var(--on-dark-mut); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ar-wi-qty{font:800 14px var(--font); color:var(--sky,#62ADFF); flex:none}
  
  .ar-wi-fizz{display:flex; align-items:center; gap:7px; margin-top:4px}
  .ar-wi-fizz-l{font:600 11.5px var(--font); color:var(--on-dark-mut)}
  .ar-wi-fizz .fzdots{display:inline-flex; gap:2px; align-items:center}
  .ar-wi-fizz .fz-dot{width:9px; height:12px; display:inline-block}
  /* Il colore va messo sul TRACCIATO, non sull'<svg>: il path ha gia' un fill:none
     suo, che vince, e le gocce restavano disegnate col colore ereditato — scuro su
     scuro, quindi invisibili. La variabile segue il tema da sola. */
  .ar-wi-fizz .fz-dot svg{width:100%; height:100%}
  .ar-wi-fizz .fz-dot path{fill:var(--on-dark-mut); stroke:var(--on-dark-mut); opacity:.45}
  .ar-wi-fizz .fz-dot.on path{fill:var(--sky,#62ADFF); stroke:var(--sky,#62ADFF); opacity:1}
  .ar-wi-fizz .fz-bolt{font-size:11px}

  
  .ar-deliv{display:flex; align-items:center; gap:10px; margin:12px 0; padding:12px 13px; border-radius:14px; background:rgba(98,173,255,.10); border:1px solid rgba(98,173,255,.22)}
  
  .ro-pay .ar-deliv-date{margin-top:6px}
  .ro-pay .ar-deliv-meta{margin-top:6px}
  .ar-deliv-info{flex:1; min-width:0}
  .ar-deliv-lbl{font:600 10.5px var(--font); color:var(--on-dark-mut); text-transform:uppercase; letter-spacing:.05em}
  .ar-deliv-date{font:800 16px var(--font); color:var(--on-dark); margin-top:1px}
  .ar-deliv-meta{font:600 12px var(--font); color:var(--on-dark-mut); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ar-deliv-rel{font:700 12.5px var(--font); color:#54D69B; margin-top:3px}
  .ar-deliv-acts{display:flex; flex-direction:column; gap:6px; flex:none}
  .ar-deliv-edit{border:1px solid var(--glass-bd); background:var(--fill-soft); color:var(--on-dark); font:700 12px var(--font); padding:7px 14px; border-radius:10px; cursor:pointer; white-space:nowrap}
  .ar-deliv-edit.ghost{background:none; color:var(--on-dark-mut)}
  .ar-deliv-empty{background:var(--fill-soft); border-color:var(--glass-bd); color:var(--on-dark-mut)}
  
  .ar-deliv-pending{background:rgba(244,184,96,.12); border-color:rgba(244,184,96,.30)}
  .ar-deliv-pending .ar-deliv-meta{white-space:normal}

  /* Pagamento non riuscito: rosso tenue, non un errore di sistema ma una cosa da sistemare. */
  .ar-deliv-failed{background:rgba(255,107,107,.12); border-color:rgba(255,107,107,.32)}
  .ar-deliv-failed .ar-deliv-meta{white-space:normal}
  /* Il tasto che porta all'addebito e' pieno, non fantasma: e' l'azione della card. */
  .ar-deliv-edit.pay{background:#FF6B6B; border-color:#FF6B6B; color:#FFFFFF}

  /* Foglio "Completa il pagamento": l'importo e' la cosa piu' grande, e' quello che si paga. */
  .pn-amount{font:800 30px var(--font); color:var(--on-dark); margin-top:6px}
  .pn-meta{font:600 12.5px var(--font); color:var(--on-dark-mut); margin:2px 0 12px}
  .pn-card{display:flex; align-items:center; gap:9px; padding:11px 12px; border-radius:12px; background:var(--fill-soft); border:1px solid var(--glass-bd)}
  .pn-card-txt{font:700 14px var(--font); color:var(--on-dark)}

  
  .ar-btn-big{position:relative; overflow:hidden; width:100%; margin-top:6px; font-size:16px; padding:15px}
  .ar-btn-big::after{content:""; position:absolute; top:0; bottom:0; left:-40%; width:35%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); animation:arShine 2.8s ease-in-out infinite; pointer-events:none}
  @keyframes arShine{0%{left:-40%} 60%,100%{left:135%}}
  .ar-btn-wide{width:100%; margin-top:9px}

  
  .ar-menu{display:flex; flex-direction:column; gap:4px}
  .ar-menu-i{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:15px 8px; border:none; background:none; color:var(--on-dark); font:700 15px var(--font); cursor:pointer; border-radius:10px}
  .ar-menu-i:active{background:var(--fill-soft)}
  .ar-menu-i.danger{color:#FF7B7B}
  .ar-menu-ic{font-size:18px; width:24px; text-align:center; flex:none}
  
  .ar-osec{margin-bottom:18px}
  .ar-osec-head{display:flex; align-items:center; gap:9px; margin:0 2px 9px}
  .ar-osec-addr{font:600 12.5px var(--font); color:var(--on-dark-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
  
  .ar-ord-foot{display:flex; justify-content:flex-end; align-items:center; gap:16px; margin-top:9px}
  .ar-ord-reorder{padding:5px 4px; background:none; border:none; color:var(--link); font:700 12.5px var(--font); cursor:pointer}
  .ar-ord-reorder:active{opacity:.6}
  
  .ar-ord-inv{padding:5px 4px; background:none; border:none; color:var(--on-dark-mut); font:700 12.5px var(--font); cursor:pointer}
  .ar-ord-inv:active{opacity:.6}
  .ar-ord-inv:disabled{opacity:.5; cursor:default}
  
  .ar-omy{font:800 11.5px var(--font); color:var(--on-dark-mut); text-transform:uppercase; letter-spacing:.06em; margin:16px 2px 8px}
  #arOrdList > .ar-omy:first-child{margin-top:2px}
  .ar-pager{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:16px 2px 4px}
  .ar-pg-btn{border:1px solid var(--glass-bd); background:var(--fill-soft); color:var(--on-dark); font:700 12.5px var(--font); padding:9px 13px; border-radius:10px; cursor:pointer}
  .ar-pg-btn:disabled{opacity:.4; cursor:default}
  .ar-pg-info{font:600 12px var(--font); color:var(--on-dark-mut)}
  
  .ar-subpick-note{font:600 13px var(--font); color:var(--on-dark-mut); margin:2px 2px 12px}
  .ar-subpick-ctx{font:700 13px var(--font); color:var(--on-dark-mut); margin:0 2px 12px}
  .ar-subpick{display:flex; flex-direction:column; gap:10px}
  .ar-subpick-row{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:14px; border:1px solid var(--glass-bd); border-radius:14px; background:var(--fill-soft); cursor:pointer; appearance:none; -webkit-appearance:none}
  .ar-subpick-row:active{background:var(--fill-soft)}
  .ar-subpick-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
  .ar-subpick-main{font:700 14.5px var(--font); color:var(--on-dark); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
  .ar-subpick-sub{font:600 12.5px var(--font); color:var(--on-dark-mut)}
  .ar-subpick-arr{flex:none; font:800 20px var(--font); color:var(--on-dark-mut)}

  
  .ro-list{display:flex; flex-direction:column; margin:8px 0}
  .ro-row.ro-zero{opacity:.45}
  .ro-step{display:flex; align-items:center; flex:none; background:var(--fill-soft); border:1px solid var(--glass-bd); border-radius:12px; overflow:hidden}
  .ro-b{appearance:none; -webkit-appearance:none; border:none; background:none; color:var(--on-dark); font:700 18px var(--font); width:38px; height:40px; cursor:pointer}
  .ro-b:active{background:var(--fill-press)}
  .ro-q{min-width:26px; text-align:center; font:800 15px var(--font)}
  .ro-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px; padding-top:14px; border-top:1px solid var(--glass-bd)}
  .ro-tot{font:600 14px var(--font); color:var(--on-dark)} .ro-tot b{font-weight:800}
  .ro-foot .ar-btn-big{width:auto; flex:none; padding:14px 22px; margin:0}
  
  .ro-spacer{height:104px}
  .ro-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; 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:11px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow:0 -10px 34px rgba(0,0,0,.5)}
  .ro-bar-meta{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
  .ro-bar-stat{font:800 13.5px var(--font); line-height:1.2}
  .ro-bar-stat.ok{color:var(--ok-dark,#34D399)} .ro-bar-stat.warn{color:var(--warn-dark,#FBBF24)}
  .ro-bar-cnt{font:600 11.5px var(--font); color:var(--on-dark-mut)}
  .ro-bar-cta{flex:none; appearance:none; -webkit-appearance:none; border:1px solid var(--cta-bd); background:var(--cta-bg); color:var(--cta-ink); font:800 14px var(--font); padding:13px 20px; border-radius:13px; cursor:pointer; box-shadow:0 6px 16px var(--cta-glow), var(--cta-hi)}
  .ro-bar-cta.off{opacity:.5; filter:grayscale(.4); box-shadow:none}
  .ro-bar-arr{margin-left:2px}
  
  .ro-opt{background:var(--glass); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-bd); border-radius:18px; padding:15px; box-shadow:0 6px 22px rgba(0,0,0,.24)}
  .ro-opt-a{border-color:rgba(98,173,255,.42)}
  .ro-opt-h{display:flex; align-items:flex-start; gap:11px; margin-bottom:12px}
  .ro-opt-ic{flex:none; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; background:rgba(98,173,255,.16)}
  .ro-opt-tt{flex:1; min-width:0}
  .ro-opt-t{font:800 16px var(--font-display); color:var(--on-dark)}
  .ro-opt-s{font:600 12.5px var(--font); color:var(--on-dark-mut); margin-top:3px; line-height:1.4}
  /* --- Aiutaci a migliorare: due scelte, un riquadro di testo -------- */
  .ar-fb-intro{font:500 13.5px/1.5 var(--font); color:var(--on-dark-mut); margin:0 0 14px}
  .fb-kinds{display:flex; gap:10px; margin-bottom:14px}
  .fb-kind{flex:1; min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:7px;
    appearance:none; cursor:pointer; border:1px solid var(--glass-bd); background:var(--fill-soft);
    color:var(--on-dark); border-radius:12px; padding:10px 12px; font:700 13px var(--font); text-align:left}
  .fb-kind.on{background:var(--sel-fill); border-color:var(--sel-bd)}
  .fb-kind-ic{flex:none; font-size:16px}
  .fb-kind-t{min-width:0}
  .fb-ta{width:100%; box-sizing:border-box; min-height:120px}
  .fb-esito{min-height:16px; font:600 12.5px var(--font); margin:8px 0 0}
  .fb-esito.err{color:#FF6B6B}
  .fb-note{font:500 11.5px/1.5 var(--font); color:var(--on-dark-mut); margin:12px 0 0}

  .ro-cases{font:700 12.5px var(--font); color:var(--on-dark-mut); margin:0 0 10px}
  .ro-crate{margin:2px 0 12px; padding:10px; border:1px solid var(--glass-bd); border-radius:14px; background:var(--fill-soft)}
  .ro-crate .bx-crate{gap:6px; padding:8px; border-radius:12px}
  .ro-crate .bx-slot{width:56px; height:67px; border-radius:9px; position:relative}
  .ro-crate .bx-slot.full img{padding-top:8px; box-sizing:border-box}
  /* E' la stessa pillola del listino delle acque (.wtaste, in v3-base.css):
     stesso fondo, stesso colore, stesse gocce, e i due temi arrivano da
     li' senza copiare niente. Qui cambia solo dove si appoggia — in cima
     alla miniatura invece che nell'angolo della scheda — e il fianco piu'
     stretto, perche' dentro non c'e' la parola ma solo le gocce.
     Vale su ogni schermo: le miniature sono cresciute abbastanza da
     reggerla anche sul telefono (46px nella conferma, 56 in dashboard);
     sopra i 1200px il foglio desktop la riporta alla misura del listino. */
  .bx-fz{top:4px; left:50%; right:auto; transform:translateX(-50%); padding:2px 5px; border-radius:9px}
  .bx-fz .fz-dot{width:6px; height:9px}
  /* Il fondo della miniatura e' quello delle schede del listino (.wcleft,
     #C9D8EC): un colore solo per tutti e due i temi, come li'. Prende il
     posto del bianco di .bx-slot.full, che nel tema chiaro si portava
     dietro anche un contorno interno che il listino non ha. */
  .ro-crate .bx-slot.full,
  .ar-box .bx-slot.full{background:#C9D8EC; box-shadow:none}
  
  .bx-crate.ghost{background:transparent; border-style:dashed; opacity:.55}
  
  .ro-crate .bx-crates{flex-wrap:nowrap; gap:10px}
  
  .ro-fld{border:1px solid var(--glass-bd); border-radius:14px; background:var(--fill-soft); margin:12px 0; overflow:hidden}
  .ro-fld-head{display:flex; align-items:center; gap:10px; width:100%; background:none; border:0; color:var(--on-dark); font:700 14px var(--font); padding:14px; cursor:pointer; text-align:left; -webkit-appearance:none; appearance:none}
  .ro-fld-ic{font-size:16px; flex:none}
  .ro-fld-lbl{flex:1}
  .ro-fld-chev{color:var(--on-dark-mut); flex:none; display:inline-flex; transition:transform .2s}
  .ro-fld-chev svg{display:block; width:18px; height:18px}
  .ro-fld.open .ro-fld-chev{transform:rotate(180deg)}
  .ro-fld-body{display:none; padding:0 14px 14px}
  .ro-fld.open .ro-fld-body{display:block}
  .ro-fld-input{width:100%; box-sizing:border-box; background:var(--fill-soft); border:1px solid var(--glass-bd); border-radius:10px; color:var(--on-dark); font:500 14px var(--font); padding:11px 12px; outline:none}
  .ro-fld-input::placeholder{color:var(--on-dark-mut)}
  .ro-fld-input:focus{border-color:var(--sky,#62ADFF)}
  textarea.ro-fld-input{resize:vertical; min-height:66px; line-height:1.4}
  .ro-fld-hint{font:500 11.5px var(--font); color:var(--on-dark-mut); margin-top:7px}
  .ro-coupon-row{display:flex; gap:8px}
  .ro-coupon-row .ro-fld-input{flex:1}
  .ro-coupon-apply{flex:none; border:0; border-radius:10px; background:var(--sky,#62ADFF); color:#06121f; font:800 13px var(--font); padding:0 18px; cursor:pointer; -webkit-appearance:none; appearance:none}
  .ro-coupon-apply:active{opacity:.85}
  .ro-coupon-msg{font:600 12px var(--font); margin-top:8px}
  .ro-coupon-msg.ok{color:#54D69B}
  .ro-coupon-msg.err{color:#FF6B6B}
  .ro-coupon-msg.info{color:var(--on-dark-mut)}
  
  .ar-recap{margin:12px 0; padding:12px 14px; border:1px solid var(--glass-bd); border-radius:14px; background:var(--fill-soft)}
  .ar-recap-lbl{font:600 10.5px var(--font); color:var(--on-dark-mut); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px}
  .ar-recap-row{display:flex; justify-content:space-between; gap:14px; padding:7px 0; font:500 13px var(--font)}
  .ar-recap-row + .ar-recap-row{border-top:1px solid rgba(255,255,255,.07)}
  .ar-recap-k{color:var(--on-dark-mut); flex:none}
  .ar-recap-v{color:var(--on-dark); text-align:right; min-width:0}
  
  .ar-deliv-addr{margin-top:7px; line-height:1.4}
  .ar-deliv-name{display:block; font:700 12.5px var(--font); color:var(--on-dark)}
  .ar-deliv-street{display:block; font:600 12px var(--font); color:var(--on-dark-mut); margin-top:1px}
  
  .ar-card-line{display:flex; align-items:center; gap:8px}
  .ar-card-logo{flex:none; display:inline-flex; line-height:0}
  .ar-card-logo svg{display:block; width:25px; height:auto; border-radius:3px}
  
  .ro-bill-line{font:600 13px var(--font); color:var(--on-dark); padding:5px 0; line-height:1.4}
  .ro-bill-line + .ro-bill-line{border-top:1px solid rgba(255,255,255,.07)}
  .ro-bill-edit{margin-top:11px; width:100%; appearance:none; -webkit-appearance:none; border:1px solid var(--glass-bd); background:var(--fill-soft); color:var(--on-dark); font:700 12.5px var(--font); padding:10px 12px; border-radius:10px; cursor:pointer}
  .ro-bill-edit:active{background:var(--fill-press)}
  .ro-bill-form{display:flex; flex-direction:column; gap:2px; margin-top:4px}
  .ro-bill-flbl{font:600 11px var(--font); color:var(--on-dark-mut); margin:9px 0 3px}
  .ro-opt-note{display:flex; gap:8px; align-items:flex-start; font:600 12px var(--font); color:var(--warn-dark,#FBBF24); background:rgba(217,119,6,.14); border:1px solid rgba(217,119,6,.30); border-radius:11px; padding:9px 11px; margin:2px 0 4px}
  
  .ro-choicebar{position:fixed; left:50%; transform:translateX(-50%); bottom:0; width:100%; max-width:480px; z-index:40; display:flex; flex-direction:column; gap:8px; 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:12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow:0 -10px 34px rgba(0,0,0,.5)}
  .ro-cbar-primary{position:relative; overflow:hidden; appearance:none; -webkit-appearance:none; width:100%; border:1px solid var(--cta-bd); background:var(--cta-bg); color:var(--cta-ink); font:800 15px var(--font); padding:15px; border-radius:13px; cursor:pointer; box-shadow:0 6px 16px var(--cta-glow), var(--cta-hi)}
  .ro-cbar-primary::after{content:""; position:absolute; top:0; bottom:0; left:-40%; width:35%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); animation:arShine 2.8s ease-in-out infinite; pointer-events:none}
  .ro-cbar-primary.off::after{display:none}
  .ro-cbar-ghost{appearance:none; -webkit-appearance:none; width:100%; border:1px solid var(--glass-bd); background:var(--glass); color:var(--on-dark); font:800 13.5px var(--font); padding:12px; border-radius:12px; cursor:pointer}
  .ro-cbar-primary:active, .ro-cbar-ghost:active{transform:scale(.99)}
  .ro-cbar-primary.off{opacity:.5; filter:grayscale(.4); box-shadow:none}
  
  .ro-cf-lbl{font:800 14px var(--font); color:var(--on-dark); margin-bottom:9px}
  .ro-cf-edit{width:100%; margin-top:11px; min-height:42px; border-radius:11px; border:1px solid var(--glass-bd); background:var(--fill-soft); color:var(--on-dark); font:800 13.5px var(--font); cursor:pointer}
  .ro-cf-edit:active{transform:scale(.99)}
  .ro-cf-tot{display:flex; align-items:baseline; justify-content:space-between; padding:0 2px 2px}
  .ro-cf-tot span{font:600 12.5px var(--font); color:var(--on-dark-mut)}
  .ro-cf-tot b{font:800 20px var(--font-display); color:var(--on-dark)}
  
  .tot-dec{font-size:.6em; font-weight:inherit; vertical-align:super; line-height:0; margin-left:1px}
  
  .ro-rolist{display:flex; flex-direction:column; gap:7px; margin-top:4px}
  .ro-rolist-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--glass-bd); border-radius:11px; background:var(--fill-soft)}
  .ro-rolist-ico{flex:none; width:32px; height:32px; border-radius:8px; background:var(--fill-soft); display:flex; align-items:center; justify-content:center; overflow:hidden}
  .ro-rolist-ico img{width:100%; height:100%; object-fit:contain}
  .ro-rolist-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
  .ro-rolist-name{font:800 13.5px var(--font); color:var(--on-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .ro-rolist-sub{font:600 11.5px var(--font); color:var(--on-dark-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .ro-rolist-qty{flex:none; font:800 14px var(--font-display); color:var(--on-dark); padding-left:6px}
  .ro-rolist-note{display:flex; gap:7px; align-items:flex-start; font:600 11.5px var(--font); color:var(--on-dark-mut); margin-top:10px; line-height:1.4}

.ro-cel{position:relative; overflow:hidden; padding:26px 12px 30px; text-align:center}

.ro-cel-halo{position:absolute; left:50%; top:78px; width:230px; height:230px; margin:-115px 0 0 -115px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(120,213,223,.42) 0%, rgba(98,173,255,.18) 45%, transparent 70%);
  animation:roHalo 1100ms cubic-bezier(.2,.8,.3,1) both}
@keyframes roHalo{0%{transform:scale(.3); opacity:0} 45%{opacity:1} 100%{transform:scale(1.25); opacity:.85}}

.ro-cel-ring{position:absolute; left:50%; top:78px; width:96px; height:96px; margin:-48px 0 0 -48px;
  border-radius:50%; border:2px solid rgba(120,213,223,.55); pointer-events:none;
  animation:roRing 1500ms cubic-bezier(.15,.7,.25,1) 1 both}
.ro-cel-ring:nth-of-type(2){animation-delay:.45s}
.ro-cel-ring:nth-of-type(3){animation-delay:.9s}
@keyframes roRing{0%{transform:scale(.55); opacity:.75} 100%{transform:scale(2.6); opacity:0}}

.ro-cel-mark{position:relative; width:104px; height:104px; margin:24px auto 4px; display:block}
.ro-cel-mark circle{fill:rgba(120,213,223,.14); stroke:var(--aqua); stroke-width:3;
  stroke-dasharray:302; stroke-dashoffset:302; animation:roDraw 620ms cubic-bezier(.5,0,.3,1) 120ms forwards}
.ro-cel-mark path{fill:none; stroke:#fff; stroke-width:6.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:60; stroke-dashoffset:60; animation:roDraw 420ms cubic-bezier(.5,0,.3,1) 560ms forwards}
@keyframes roDraw{to{stroke-dashoffset:0}}

.ro-cel-pop{animation:roPop 620ms cubic-bezier(.2,1.5,.4,1) 560ms both}
@keyframes roPop{0%{transform:scale(.86)} 55%{transform:scale(1.06)} 100%{transform:scale(1)}}

.ro-cel-drops{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.ro-cel-drop{position:absolute; top:-24px; width:9px; height:12px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  opacity:0; animation:roDrop 2400ms cubic-bezier(.35,.1,.6,1) forwards}
@keyframes roDrop{
  0%{opacity:0; transform:translateY(-10px) rotate(0deg) scale(.7)}
  12%{opacity:1}
  80%{opacity:1}
  100%{opacity:0; transform:translateY(560px) rotate(220deg) scale(1)}}

.ro-cel-in{animation:roUp 620ms cubic-bezier(.2,.8,.3,1) both}
@keyframes roUp{from{opacity:0; transform:translateY(16px)} to{opacity:1; transform:none}}

.ro-cel h2{font:800 27px/1.2 var(--font-display); color:var(--on-dark); margin:14px 0 6px}
.ro-cel-sub{font:600 14.5px var(--font); color:var(--on-dark-mut); margin:0 auto 16px; max-width:300px; line-height:1.5}
.ro-cel-amount{font:800 34px var(--font-display); color:var(--aqua); letter-spacing:-.5px;
  text-shadow:0 0 26px rgba(120,213,223,.45)}
.ro-cel-card{background:var(--card-bg,rgba(255,255,255,.06)); border:1px solid rgba(255,255,255,.10);
  border-radius:16px; padding:14px 16px; max-width:330px; margin:8px auto 0; text-align:left}
.ro-cel-row{display:flex; align-items:center; gap:10px; padding:7px 0}
.ro-cel-row + .ro-cel-row{border-top:1px solid rgba(255,255,255,.07)}
.ro-cel-ic{flex:none; font-size:17px; width:22px; text-align:center}
.ro-cel-lbl{font:700 10.5px var(--font); letter-spacing:.6px; text-transform:uppercase; color:var(--on-dark-mut)}
.ro-cel-val{font:700 14.5px var(--font); color:var(--on-dark); text-transform:capitalize}

@keyframes roFade{from{opacity:0} to{opacity:1}}

.ac-card{display:flex; align-items:center; gap:11px; background:var(--glass); border:1px solid var(--glass-bd);
  border-radius:14px; padding:12px 13px; margin-bottom:9px}
.ac-card-l{flex:none}
.ac-card-b{flex:1; min-width:0}
.ac-card-n{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font:700 14.5px var(--font); color:var(--on-dark)}
.ac-card-x{font:600 11.5px var(--font); color:var(--on-dark-mut); margin-top:2px}
.ac-tag{font:700 9.5px var(--font); letter-spacing:.5px; text-transform:uppercase; padding:3px 8px; border-radius:999px}
.ac-tag.use{background:rgba(98,173,255,.18); color:var(--sky)}
.ac-tag.exp{background:rgba(217,119,6,.20); color:var(--warn-dark,#f0a94a)}
.ac-del{flex:none; width:38px; height:38px; border-radius:11px; border:1px solid rgba(255,255,255,.12);
  background:var(--fill-soft); color:var(--on-dark-mut); font-size:16px; cursor:pointer; line-height:1}
.ac-del:active{transform:scale(.92)}
.ac-lock{flex:none; width:38px; text-align:center; font-size:15px; opacity:.5}
.ac-add{width:100%; min-height:46px; margin-top:4px}
.ac-chk{display:flex; align-items:center; gap:9px; font:600 13px var(--font); color:var(--on-dark);
  margin:12px 2px 2px; cursor:pointer}
.ac-chk input{width:18px; height:18px; accent-color:var(--sel); flex:none}

.ac-toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:9999;
  max-width:min(420px,92vw); padding:13px 18px; border-radius:13px; text-align:center;
  background:rgba(18,58,44,.96); color:#eafff6; border:1px solid rgba(61,220,154,.35);
  font:600 13.5px var(--font); box-shadow:0 10px 30px rgba(0,0,0,.35);
  animation:acToastIn 260ms cubic-bezier(.2,.8,.3,1) both}
.ac-toast.err{background:rgba(70,26,26,.96); color:#ffe9e9; border-color:rgba(240,110,110,.38)}
.ac-toast.out{animation:acToastOut 320ms ease forwards}
@keyframes acToastIn{from{opacity:0; transform:translate(-50%,14px)} to{opacity:1; transform:translate(-50%,0)}}
@keyframes acToastOut{to{opacity:0; transform:translate(-50%,10px)}}

.ro-cardpick{display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  background:var(--glass); border:1px solid var(--glass-bd); border-radius:14px; padding:12px 13px; margin-bottom:8px}
.ro-cardpick.sel{border-color:var(--sel-bd); background:var(--sel-fill)}
.ro-cardpick.exp{opacity:.72}
.ro-cardpick-l{flex:none}
.ro-cardpick-b{flex:1; min-width:0}
.ro-cardpick-n{display:flex; align-items:center; gap:7px; flex-wrap:wrap; font:700 14.5px var(--font); color:var(--on-dark)}
.ro-cardpick-x{display:block; font:600 11.5px var(--font); color:var(--on-dark-mut); margin-top:2px}
.ro-cardpick-r{flex:none; width:22px; text-align:center; font:800 16px var(--font); color:var(--sel)}

.ac-wallets{margin:4px 0 2px; min-height:0}
/* Dentro l'app al posto del pulsante di Stripe c'e' una riga che dice cosa succedera':
   la finestra del portafoglio la apre il tasto di conferma, non un pulsante qui dentro. */
.ac-wallet-nativo{padding:11px 13px; border-radius:12px; background:var(--fill-soft);
  font:600 13px/1.4 var(--font); color:var(--on-dark-mut); text-align:center}

/* Il pulsante del portafoglio dentro l'app.
   Nero e con il logo vero, come vogliono Google e Apple: un cliente riconosce Google Pay
   dal pulsante prima ancora di leggere. Niente azzurro - quello e' il colore delle NOSTRE
   conferme, e due pulsanti uguali di fianco confondono su quale sia l'azione principale.
   Resta nero anche a tema chiaro: e' il marchio, non la nostra tavolozza. */
.ac-wallet-btn{display:flex; align-items:center; justify-content:center; gap:7px;
  width:100%; min-height:50px; padding:0 16px; border:none; border-radius:12px;
  background:#000; color:#fff; cursor:pointer;
  font:600 17px/1 var(--font); letter-spacing:.2px}
.ac-wallet-btn:active{opacity:.82}
.ac-wallet-btn[disabled]{opacity:.5}
.ac-wallet-btn svg{display:block; flex:none}
/* GOOGLE PAY: pulsante BIANCO col marchio ufficiale scuro. Qui il fondo dell'app e' quasi
   nero e un pulsante nero non staccherebbe: e' uno dei due rilievi con cui Google ha
   respinto la richiesta il 4/9. L'immagine e' il marchio ufficiale e non si tocca; il
   riquadro le lascia aria sopra e sotto (50px di pulsante, 24px di marchio). */
.ac-wallet-btn.google{background:#fff}
.ac-wallet-btn.google img{display:block; flex:none; height:24px; width:auto}
.ac-oppure{display:flex; align-items:center; gap:10px; margin:14px 2px 6px;
  font:600 11.5px var(--font); color:var(--on-dark-mut); text-transform:uppercase; letter-spacing:.5px}
.ac-oppure::before,.ac-oppure::after{content:""; flex:1; height:1px; background:var(--fill-press)}

  /* --- Accesso a tutta pagina (porta d'ingresso dell'app) ------------------
     Nel browser l'accesso resta il modale: qui siamo dentro #view, dove non
     arrivano le regole scritte per .modal, quindi il poco che serve sta qui. */
  .acc{max-width:420px; margin:0 auto; padding:18px 2px 40px}
  /* Colori "su fondo scuro": qui si sta dentro #view, non dentro un modale chiaro.
     Con var(--text) (#111827, quasi nero) il titolo spariva contro lo sfondo. */
  .acc-t{font-family:var(--font-display); font-size:26px; font-weight:800; letter-spacing:-.02em; margin:6px 0 6px; color:var(--on-dark)}
  .acc-s{color:var(--on-dark-mut); font-size:14.5px; line-height:1.5; margin-bottom:22px}
  .acc-l{display:block; font:600 12.5px var(--font); color:var(--on-dark-mut); margin:0 0 6px 2px}
  .acc .field.plain{margin-bottom:14px}
  /* I campi qui stanno su fondo scuro, non dentro un modale chiaro: con lo stile di
     serie erano due rettangoli bianchi sparati in mezzo al blu notte. Stessi colori
     degli altri campi dell'area (--fill-soft + bordo di vetro), che seguono il tema. */
  .acc .field.plain input{background:var(--fill-soft); border:1px solid var(--glass-bd); color:var(--on-dark)}
  .acc .field.plain input:focus{border-color:var(--accent); background:var(--fill-press); box-shadow:0 0 0 3px rgba(112,98,255,.18)}
  .acc-err,.acc-ok{font:600 13px var(--font); padding:11px 13px; border-radius:var(--r-md); margin-bottom:14px; display:none}
  .acc-err{background:var(--danger-soft); color:#842029}
  .acc-ok{background:rgba(22,163,74,.16); color:var(--ok-dark)}
  .acc-alt{text-align:center; color:var(--on-dark-mut); font-size:13.5px; margin-top:18px}
  .acc-alt.sep{border-top:1px solid var(--glass-bd); padding-top:16px; margin-top:22px}
  /* Filtro "mostra anche i rimborsati": una riga sola, con quanti sono. Sta sopra la
     lista perche' spiega cosa si sta guardando, non e' un'opzione da cercare. */
  .ar-filtro-rimb{display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:11px 13px;
                  border:1px solid var(--glass-bd); border-radius:var(--r-md); background:var(--fill-soft);
                  font:600 13.5px var(--font); color:var(--on-dark-mut); cursor:pointer}
  .ar-filtro-rimb input{flex:none; width:19px; height:19px; accent-color:var(--accent); cursor:pointer}
  .ar-filtro-rimb span:first-of-type{flex:1; min-width:0}
  .ar-filtro-n{flex:none; font:700 12px var(--font); padding:2px 9px; border-radius:999px;
               background:var(--fill-press); color:var(--on-dark)}

  /* Nella schermata di apertura il pulsante dell'account non serve: "Accedi" sta gia'
     sotto, grande. Due porte per la stessa cosa fanno solo esitare. */
  html[data-vista="/benvenuto"] #authBtn{display:none}

  /* --- Porta d'ingresso dell'app: tre immagini, poi il modulo ------------------------
     La colonna occupa l'altezza disponibile e divide lo spazio in due: le immagini si
     prendono quello che avanza, i pulsanti restano ancorati in basso dove arriva il
     pollice. Cosi' la schermata tiene su telefoni bassi e alti senza scorrimento. */
  .bv{display:flex; flex-direction:column; gap:16px; min-height:calc(100vh - 150px); padding:4px 0 calc(18px + env(safe-area-inset-bottom))}
  .bv-slider{position:relative; flex:1; min-height:230px; border-radius:22px; overflow:hidden;
             background:var(--fill-soft); box-shadow:0 14px 36px rgba(0,0,0,.28)}
  .bv-slide{position:absolute; inset:0; opacity:0; transition:opacity .6s ease; pointer-events:none}
  .bv-slide.on{opacity:1; pointer-events:auto}
  .bv-slide picture, .bv-slide img{display:block; width:100%; height:100%; object-fit:cover}
  /* Velo scuro solo in basso: le foto sono chiare in alto e il testo ci sparirebbe.
     Sta sull'immagine in entrambi i temi, quindi il testo resta bianco fisso. */
  .bv-testo{position:absolute; left:0; right:0; bottom:0; padding:44px 20px 20px; color:#fff;
            background:linear-gradient(180deg, rgba(8,12,22,0) 0%, rgba(8,12,22,.62) 45%, rgba(8,12,22,.88) 100%)}
  .bv-testo h2{margin:0 0 5px; font:800 21px/1.22 var(--font-display); letter-spacing:-.01em; text-wrap:balance}
  .bv-testo p{margin:0; font:500 14px/1.45 var(--font); color:rgba(255,255,255,.88)}

  .bv-punti{display:flex; justify-content:center; gap:7px}
  .bv-punto{width:7px; height:7px; padding:0; border:none; border-radius:50%; cursor:pointer;
            background:var(--on-dark-mut); opacity:.32; transition:width .25s, opacity .25s}
  .bv-punto.on{width:20px; border-radius:99px; opacity:1; background:var(--accent)}
  /* L'area toccabile e' piu' grande del pallino: 7px non si centrano con un dito */
  .bv-punto{position:relative}
  .bv-punto::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:34px; height:34px}

  .bv-azioni{display:flex; flex-direction:column; gap:11px}
  /* Riflesso che scorre, lo stesso del pulsante di conferma dell'ordine: qui dice
     "si comincia da qui" fra due pulsanti che altrimenti peserebbero uguale. */
  .bv-cta{width:100%; min-height:54px; position:relative; overflow:hidden}
  .bv-cta::after{content:""; position:absolute; top:0; bottom:0; left:-40%; width:35%;
                 background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
                 transform:skewX(-18deg); animation:arShine 3.2s ease-in-out infinite; pointer-events:none}
  /* Chi ha chiesto meno animazioni al telefono non deve vederne nemmeno una */
  @media (prefers-reduced-motion: reduce){
    .bv-cta::after{animation:none; display:none}
    .bv-slide{transition:none}
  }

  /* Il modulo dentro il foglio non ripete il titolo: ce l'ha gia' il foglio */
  .acc-in-foglio{max-width:none; padding:2px 0 4px}
  .acc-in-foglio .acc-alt{margin-top:14px}

  /* Separatore "oppure": una riga sottile che si apre attorno alla parola */
  .acc-sep{display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:var(--on-dark-mut); font:600 12px var(--font)}
  .acc-sep::before, .acc-sep::after{content:""; flex:1; height:1px; background:var(--glass-bd)}
  /* Google prevede due versioni del pulsante, chiara e scura: si usa quella che sta col
     fondo. Il logo resta a colori in entrambe — quello non si tocca, sono le regole del
     marchio. I valori sono quelli indicati da Google per il tema scuro. */
  .acc-google{width:100%; min-height:52px; display:flex; align-items:center; justify-content:center; gap:11px;
              background:#131314; color:#E3E3E3; border:1px solid #8E918F; border-radius:var(--r-md);
              font:600 15px var(--font); cursor:pointer}
  .acc-google:active{transform:scale(.99); background:#1E1F20}
  html[data-theme="light"] .acc-google{background:#FFFFFF; color:#1F1F1F; border-color:#DADCE0}
  html[data-theme="light"] .acc-google:active{background:#F5F6F7}
  .acc-google:disabled{opacity:.6; cursor:default}
  .acc-google svg{flex:none}

  /* Tasto Apple: le regole del marchio ammettono due sole vesti, nero su chiaro o bianco
     su scuro, e il logo deve restare pieno e monocromatico. Si sceglie quella che si vede,
     tema per tema: sul fondo scuro dell'app un tasto nero sparirebbe.
     Stessa altezza del tasto Google: Apple chiede che il suo non sia meno evidente. */
  .acc-apple{width:100%; min-height:52px; display:flex; align-items:center; justify-content:center; gap:9px;
             background:#FFFFFF; color:#000000; border:1px solid #FFFFFF; border-radius:var(--r-md);
             font:600 15px var(--font); cursor:pointer}
  /* Lo spazio va TRA i due tasti, non sotto l'uno o sopra l'altro: cosi' resta giusto
     anche se un giorno si inverte l'ordine, e non avanza aria quando il tasto e' uno solo. */
  .acc-google + .acc-apple, .acc-apple + .acc-google{margin-top:10px}
  .acc-apple:active{transform:scale(.99); background:#EDEDED; border-color:#EDEDED}
  html[data-theme="light"] .acc-apple{background:#000000; color:#FFFFFF; border-color:#000000}
  html[data-theme="light"] .acc-apple:active{background:#1A1A1A; border-color:#1A1A1A}
  .acc-apple:disabled{opacity:.6; cursor:default}
  /* Il logo prende il colore del testo: cosi' resta leggibile in tutte e due le vesti
     senza doverlo ridisegnare. */
  .acc-apple svg{flex:none; color:currentColor; margin-top:-2px}

  /* Accesso con Google nel BROWSER (schermata /v3/accedi): il tasto qui sopra lo apre il
     guscio dell'app, fuori dall'app lo disegna la libreria di Google dentro questo
     riquadro. A noi resta lo spazio attorno. Stessa soluzione del modale del sito.
     Il separatore parte spento e lo accende disegnaAccessoGoogleWeb solo quando il
     pulsante c'e' davvero: se la libreria non arriva (consenso cookie, rete) restano
     email e password e non si vede nulla di rotto. */
  .acc .gsi-sep{display:none}
  /* `color-scheme:light` anche col tema scuro, e serve proprio li': dentro un riquadro
     chiuso Chrome dipinge di bianco il fondo del pulsante di Google e attorno compare una
     cornice bianca, con tutte e tre le vesti. Dicendo al riquadro che li' dentro il tema
     e' chiaro, Chrome smette di ridipingerlo. Stessa contromisura gia' in uso nel modale
     (v3-base.css): e' un difetto noto di Chrome, su Safari non si vede. */
  .acc .gsi-box{display:flex; justify-content:center; min-height:0; color-scheme:light}
  .acc .gsi-box > div{max-width:100%}

  /* Il viola del marchio, non il blu di sistema */
  .acc-alt a{color:var(--accent); font-weight:600; cursor:pointer; text-decoration:none}
  .acc-alt a:hover{text-decoration:underline}

  .acc-ver{text-align:center; font:600 10.5px var(--font); color:rgba(255,255,255,.28); margin-top:26px; letter-spacing:.04em}

  /* Righe di campi affiancati e campi senza etichetta sopra: senza questo restano
     appiccicati a quello precedente, perche' lo spazio lo dava solo l'etichetta. */
  .ro-bill-row{ display:flex; gap:8px; margin-top:9px }
  .ro-bill-sep{ margin-top:9px }

  /* --- Foglio del riepilogo box: scuro come il resto ------------------------
     Era bianco, unico riquadro chiaro in un'app tutta scura. Il contenuto usa le
     classi del wizard (.ci, .cr, .dm-*), scritte per fondo chiaro: invece di
     riscriverle una per una, qui si ridefiniscono le VARIABILI che quelle regole
     gia' usano, e i colori seguono da soli. Cosi' non si tocca nulla altrove.
     Nel tema chiaro resta com'era: li' il bianco e' al suo posto. */
  html:not([data-theme="light"]) .dsheet{
    background: var(--bg-deep-alt);
    --card: var(--bg-deep-alt);
    --text: var(--on-dark);
    --text-2: var(--on-dark-mut);
    --muted: var(--on-dark-mut);
    --subtle: rgba(255,255,255,.07);
    --border: var(--glass-bd);
    --border-strong: rgba(255,255,255,.22);
  }
  /* Gli spazi vuoti del box: bianchi pieni sarebbero macchie sul fondo scuro.
     Quelli occupati restano bianchi, perche' le foto delle bottiglie sono ritagliate
     su bianco e senza quel fondo si vedrebbero male. */
  html:not([data-theme="light"]) .dsheet .dm-slot{ background: rgba(255,255,255,.06) }
  html:not([data-theme="light"]) .dsheet .dm-slot.full{ background:#fff }

  /* ---------- «Scarica l'app Fontilio» ----------
     Compare solo a chi sta nell'area da un browser Android: dentro l'app non ha senso,
     su iPhone non c'e' niente da scaricare. I colori escono tutti dai token, cosi' il
     riquadro segue il tema che il cliente ha scelto senza una riga in piu': nel chiaro
     il fondo si schiarisce e il tasto diventa viola da solo.
     Sotto il foglio "Aggiorna l'app" (80/81) di proposito: se un giorno dovessero
     capitare insieme, l'aggiornamento e' la cosa che blocca davvero. */
  .ai-scrim{position:fixed; inset:0; background:rgba(7,10,20,.66); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); z-index:78; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .2s}
  .ai-scrim.open{opacity:1}
  html[data-theme="light"] .ai-scrim{background:rgba(16,24,40,.42)}
  .ai-md{background:var(--bg-deep-alt); border:1px solid var(--glass-bd); border-radius:22px; padding:24px 18px 12px; width:100%; max-width:300px; display:flex; flex-direction:column; align-items:center; text-align:center; box-shadow:var(--sh-float); transform:translateY(10px) scale(.98); transition:transform .24s var(--spring)}
  .ai-scrim.open .ai-md{transform:none}
  .ai-icona{width:68px; height:68px; border-radius:17px; flex:none; box-shadow:0 8px 22px rgba(7,10,20,.35)}
  .ai-t{font:800 16.5px var(--font-display); color:var(--on-dark); margin-top:14px; letter-spacing:-.015em}
  .ai-s{font:500 12.5px var(--font); color:var(--on-dark-mut); margin-top:7px; line-height:1.45}
  .ai-cta{width:100%; min-height:46px; margin-top:16px; appearance:none; -webkit-appearance:none; border:1px solid var(--cta-bd); border-radius:13px; background:var(--cta-bg); color:var(--cta-ink); font:800 14px var(--font); cursor:pointer; box-shadow:0 6px 18px var(--cta-glow), var(--cta-hi)}
  .ai-cta:active{transform:translateY(1px)}
  /* Il badge di Google non si ricolora e non si ritaglia: si usa com'e'. Qui e' sotto
     al tasto, alla misura minima consentita, e porta allo stesso indirizzo. */
  .ai-badge{display:block; width:124px; height:48px; margin-top:10px; appearance:none; -webkit-appearance:none; border:none; background:transparent url('/v3/assets/google-play-badge-it.png') no-repeat center/contain; padding:0; cursor:pointer}
  .ai-dopo{appearance:none; -webkit-appearance:none; background:none; border:none; color:var(--on-dark-mut); font:600 12.5px var(--font); padding:11px 12px 5px; cursor:pointer}
  @media (prefers-reduced-motion: reduce){
    .ai-scrim, .ai-md{transition:none}
  }

  /* ---- Portafoglio punti (21/9/2026): 100 punti = 1 EUR ---- */
  .ar-punti .ar-lo-head{justify-content:space-between; margin-bottom:6px}
  .ar-punti-liv{font:700 11.5px var(--font); color:var(--on-dark); padding:3px 9px; border-radius:var(--pill); border:1px solid var(--glass-bd); background:var(--fill-soft)}
  .ar-punti-liv.liv-argento{border-color:rgba(200,205,215,.55)}
  .ar-punti-liv.liv-oro{border-color:rgba(243,210,138,.7); color:var(--warn-dark,#F3D28A)}
  .ar-punti-num{font:800 30px/1 var(--font-display); color:var(--on-dark); letter-spacing:-.02em; margin:4px 0 2px}
  .ar-punti-num small{font:600 12px var(--font); color:var(--on-dark-mut); margin-left:7px; letter-spacing:0}
  .ar-punti-eur{font:600 13px var(--font); color:var(--on-dark-mut); margin-bottom:8px}
  .ar-punti-eur b{color:var(--ok-dark,#7CE7AD)}
  .ar-punti-bar{height:8px; border-radius:var(--pill); background:rgba(255,255,255,.12); overflow:hidden; margin:10px 0 8px}
  .ar-punti-bar i{display:block; height:100%; border-radius:var(--pill); background:linear-gradient(90deg,var(--aqua,#78D5DF),var(--sky,#62ADFF)); transition:width var(--motion)}
  .ar-punti-sub{font:600 12px var(--font); color:var(--on-dark-mut); line-height:1.45}
  .ar-punti-sub b{color:var(--on-dark)}
  .ar-punti-more{appearance:none; -webkit-appearance:none; background:none; border:none; padding:8px 0 0; margin-top:6px; cursor:pointer; font:700 12px var(--font); color:var(--sky,#62ADFF)}
  .ar-punti-more.open span{display:inline-block; transform:rotate(180deg)}
  .ar-punti-mov{margin-top:6px; border-top:1px solid var(--glass-bd); padding-top:4px}
  .ar-punti-mv{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid rgba(255,255,255,.06); font:600 12px var(--font); color:var(--on-dark-mut)}
  .ar-punti-mv:last-child{border-bottom:none}
  .ar-punti-mv-d{flex:0 0 74px; color:var(--on-dark-mut); opacity:.8}
  .ar-punti-mv-c{flex:1; min-width:0; color:var(--on-dark); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ar-punti-mv-n{flex:0 0 auto; color:var(--on-dark)}
  .ar-punti-mv-n.in{color:var(--ok-dark,#7CE7AD)}
  .ar-punti-mv-n.out{color:var(--danger-dark,#FF8A8A)}
  .ar-punti-mv-n.mid{color:var(--sky,#62ADFF)}
  .ar-punti-mv-empty{justify-content:center; opacity:.7}

  /* ---- Usa i tuoi punti nel riordino (fase 2, 22/9/2026): stesso guscio di nota e coupon ---- */
  .ro-fld-head .pu-tag{font:700 12px var(--font); color:var(--on-dark-mut); margin-right:8px; white-space:nowrap}
  .ro-fld-head .pu-tag.on{color:#54D69B}
  .pu-have{font:600 13.5px var(--font); color:var(--on-dark-mut); line-height:1.45; margin-bottom:10px}
  .pu-have b{color:var(--on-dark)}
  .pu-opt{display:flex; align-items:center; gap:12px; width:100%; text-align:left; appearance:none; -webkit-appearance:none; border:1px solid var(--glass-bd); background:var(--fill-soft); color:var(--on-dark); font:700 14.5px var(--font); padding:13px 14px; border-radius:13px; cursor:pointer; margin-top:8px}
  .pu-opt .pu-radio{flex:none; width:20px; height:20px; border-radius:50%; border:2px solid var(--on-dark-mut); position:relative}
  .pu-opt.on{border-color:var(--sel-bd); background:var(--sel-fill); box-shadow:inset 0 0 0 1px var(--sel-bd)}
  .pu-opt.on .pu-radio{border-color:var(--sel-dot)}
  .pu-opt.on .pu-radio::after{content:''; position:absolute; inset:3px; border-radius:50%; background:var(--sel-dot)}
  .pu-opt small{display:block; font:600 12px var(--font); color:var(--on-dark-mut); margin-top:2px}
  .pu-opt.on small{color:var(--on-dark)}
  .pu-custom{display:none; align-items:center; gap:8px; margin:8px 0 0; padding:10px 12px; border-radius:12px; background:rgba(0,0,0,.18)}
  .pu-custom.open{display:flex}
  .pu-custom .ro-fld-input{flex:1; min-width:0; text-align:right; font-weight:800; font-size:16px}
  .pu-custom-lbl{font:600 12.5px var(--font); color:var(--on-dark-mut); flex:none; white-space:nowrap}
  .pu-msg{font:600 12.5px var(--font); margin-top:12px; min-height:14px; line-height:1.4}
  .pu-msg.ok{color:#54D69B}
  .pu-msg.err{color:#FF6B6B}
  .pu-off{display:block; margin-top:8px; background:none; border:0; padding:0; font:700 12px var(--font); color:var(--sky,#62ADFF); cursor:pointer}
  .pu-hint{display:flex; align-items:center; gap:10px; margin:12px 0; padding:11px 14px; border-radius:14px; border:1px dashed var(--glass-bd); font:600 12.5px var(--font); color:var(--on-dark-mut); line-height:1.4}
  .pu-hint b{color:var(--on-dark)}
  .pu-hint .pu-ic{font-size:16px; flex:none}
  html[data-theme="light"] .pu-custom{background:rgba(15,23,42,.06)}

  /* ---- Gradini verso la soglia (come il salvadanaio della v2) ---- */
  .ar-punti-steps{display:flex; gap:6px; align-items:stretch; margin:10px 0 8px}
  .ar-punti-step{flex:1; min-width:0; position:relative; text-align:center; padding:8px 2px 6px; border-radius:10px; border:1px solid var(--glass-bd); background:var(--fill-soft); opacity:.55}
  .ar-punti-step b{display:block; font:800 12px var(--font); color:var(--on-dark); letter-spacing:-.01em}
  .ar-punti-step small{display:block; font:600 10px var(--font); color:var(--on-dark-mut); margin-top:2px}
  .ar-punti-step.done{opacity:1; border-color:rgba(84,214,155,.55); background:rgba(84,214,155,.14)}
  .ar-punti-step.done b{color:#54D69B}
  .ar-punti-step.next{opacity:1; border-color:var(--sel-bd); background:var(--sel-fill); box-shadow:inset 0 0 0 1px var(--sel-bd)}
  .ar-punti-step.gift{flex:1.35; opacity:1; border:1px dashed rgba(243,210,138,.7); background:rgba(243,210,138,.10)}
  .ar-punti-step.gift span{display:block; font-size:15px; line-height:1}
  .ar-punti-step.gift b{color:var(--warn-dark,#F3D28A)}
  .ar-punti-step-ck{position:absolute; top:-6px; right:-5px; width:15px; height:15px; border-radius:50%; background:#54D69B; color:#06121f; font:800 9px/15px var(--font); text-align:center}
  html[data-theme="light"] .ar-punti-step.done b{color:#15803D}
  html[data-theme="light"] .ar-punti-step-ck{color:#fff}
  html[data-theme="light"] .ar-punti-step.gift b{color:#92400E}
  html[data-theme="light"] .ar-punti-step.gift{border-color:rgba(146,64,14,.45); background:rgba(243,210,138,.25)}

  /* ---- Riga compatta dei punti in home (sotto gli abbonamenti) ---- */
  .ar-punti-pill{display:flex; align-items:center; gap:10px; width:100%; text-align:left; appearance:none; -webkit-appearance:none; margin:12px 0; padding:10px 12px; border:1px solid var(--glass-bd); border-radius:14px; background:var(--fill-soft); color:var(--on-dark); cursor:pointer; font:inherit}
  .ar-punti-pill:active{background:var(--fill-press)}
  .ar-punti-pill-ic{font-size:18px; flex:none}
  .ar-punti-pill-t{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
  .ar-punti-pill-t b{font:800 14px var(--font); color:var(--on-dark)}
  .ar-punti-pill-t small{font:600 11.5px var(--font); color:var(--on-dark-mut); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .ar-punti-pill-liv{flex:none; font-size:15px}
  .ar-punti-pill-chev{flex:none; font:700 18px var(--font); color:var(--on-dark-mut); line-height:1}
  .ar-punti-note{font:600 12.5px var(--font); color:var(--on-dark-mut); line-height:1.5; margin:14px 2px 0}
  .ar-punti .ar-punti-more, .ar-punti .ar-punti-mov{display:none}
  .ar-oblock > .ar-punti-mov{border-top:none; margin-top:0; padding-top:0}

  /* ---- Saldo punti accanto alla voce di menu ---- */
  .ar-punti-badge{display:inline-block; margin-left:8px; padding:2px 8px; border-radius:var(--pill); font:800 11.5px var(--font); color:var(--on-dark); background:var(--sel-fill); border:1px solid var(--sel-bd); vertical-align:middle}
  .ar-menu-i .ar-punti-badge-slot{margin-left:auto}
  .ar-side-i .ar-punti-badge{float:right}
  .ar-punti-scad{margin-top:10px; padding-top:9px; border-top:1px solid var(--glass-bd); font:600 12px var(--font); color:var(--on-dark-mut); line-height:1.45}
  .ar-punti-scad b{color:var(--on-dark)}
  /* ---- "Usa i punti da solo": l'interruttore di chi ha l'abbonamento automatico ---- */
  .ar-punti-auto{display:flex; align-items:flex-start; gap:12px; margin-top:12px; padding-top:11px; border-top:1px solid var(--glass-bd)}
  .ar-punti-auto-t{flex:1; min-width:0}
  .ar-punti-auto-t b{display:block; font:700 13px var(--font); color:var(--on-dark)}
  .ar-punti-auto-t small{display:block; font:600 12px var(--font); color:var(--on-dark-mut); line-height:1.45; margin-top:2px}
  .ar-punti-auto-t small b{display:inline; color:var(--on-dark)}
  .ar-punti-auto-err{color:var(--danger-dark,#FF8A8A)}
  /* L'interruttore: un bottone, non una casella, cosi' il tocco ha i suoi 44px di
     altezza utile anche se il pallino ne misura 28. */
  .ar-sw{position:relative; flex:0 0 auto; width:48px; height:28px; appearance:none; -webkit-appearance:none; border:1px solid var(--glass-bd); border-radius:var(--pill); background:var(--fill-soft); cursor:pointer; transition:background var(--motion), border-color var(--motion)}
  .ar-sw::after{content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--on-dark); opacity:.75; transition:transform var(--motion), opacity var(--motion)}
  /* Acceso: il pallino resta bianco e si sposta sul verde. Verde su verde non si
     legge, ne' al buio ne' alla luce. */
  .ar-sw[aria-checked="true"]{background:rgba(84,214,155,.45); border-color:rgba(84,214,155,.75)}
  .ar-sw[aria-checked="true"]::after{transform:translateX(20px); background:#fff; opacity:1}
  .ar-sw[disabled]{opacity:.55; cursor:default}
  html[data-theme="light"] .ar-sw{background:rgba(15,23,42,.12)}
  html[data-theme="light"] .ar-sw::after{background:#fff; opacity:1; box-shadow:0 1px 3px rgba(15,23,42,.28)}
  html[data-theme="light"] .ar-sw[aria-checked="true"]{background:#15803D; border-color:#15803D}
  .ar-punti-mv-c small{display:block; font:600 11px var(--font); color:var(--on-dark-mut); white-space:normal; margin-top:1px}
  .ar-punti-step.gift.done{border-style:solid; border-color:rgba(84,214,155,.6); background:rgba(84,214,155,.16)}
  .ar-punti-step.gift.done b{color:#54D69B}
  html[data-theme="light"] .ar-punti-step.gift.done b{color:#15803D}
  /* ---- Casellette in piccolo nella riga di home ---- */
  .ar-punti-mini{display:flex; gap:4px; align-items:center; margin-top:6px}
  .ar-punti-mini i{display:block; width:22px; height:9px; border-radius:3px; background:rgba(255,255,255,.12); border:1px solid var(--glass-bd); font-style:normal}
  .ar-punti-mini i.done{background:#54D69B; border-color:#54D69B}
  .ar-punti-mini i.next{border-color:var(--sel-bd); background:var(--sel-fill)}
  .ar-punti-mini i.gift{width:auto; height:auto; border:none; background:none; font-size:12px; line-height:1; margin-left:2px; opacity:.6}
  .ar-punti-mini i.gift.done{opacity:1}
  html[data-theme="light"] .ar-punti-mini i{background:rgba(15,23,42,.10)}
  html[data-theme="light"] .ar-punti-mini i.done{background:#22A56B; border-color:#22A56B}
  .ar-menu-i .ar-livello-badge-slot{margin-left:auto}
  .ar-livello-badge{background:var(--fill-soft); border-color:var(--glass-bd)}
  .ar-livello-badge.liv-argento{border-color:rgba(200,205,215,.55)}
  .ar-livello-badge.liv-oro{border-color:rgba(243,210,138,.7); color:var(--warn-dark,#F3D28A)}
  html[data-theme="light"] .ar-livello-badge.liv-oro{color:#92400E}
  .ar-sbadge.closed{background:rgba(255,255,255,.10); color:var(--on-dark-mut); border-color:var(--glass-bd)}
  .ar-subpick-closed{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
  .ar-subpick-closed .ar-sbadge, .ar-subpick-main .ar-sbadge{margin-left:0}

  /* ---- Nastro "+400 punti" sul pulsante Riordina ora ---- */
  .ar-btn-reorder{position:relative; overflow:hidden}
  .ar-btn-ribbon{position:absolute; top:9px; right:-30px; transform:rotate(38deg); width:120px; text-align:center; padding:3px 0; font:800 10px/1.2 var(--font); letter-spacing:.02em; color:#fff; background:#7062FF; box-shadow:0 1px 3px rgba(0,0,0,.25); pointer-events:none}

  /* ---- Riga dei punti sotto il totale, nella barra di conferma ---- */
  .ro-cf-punti{display:flex; align-items:baseline; justify-content:space-between; padding:0 2px 4px; margin-top:-4px}
  .ro-cf-punti > span:first-child{font:600 12.5px var(--font); color:var(--on-dark-mut)}
  .ro-cf-punti-r{display:flex; align-items:baseline; gap:8px; min-width:0}
  .ro-cf-punti-r b{font:800 14px var(--font); color:#54D69B; white-space:nowrap}
  .ro-cf-punti-r small{font:600 11px var(--font); color:var(--on-dark-mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  html[data-theme="light"] .ro-cf-punti-r b{color:#15803D}

  /* ---- Tema chiaro dell'area: colori leggibili ----
     Verdi, blu e rossi nati per il fondo scuro, sul fondo chiaro scendevano sotto il
     4,5:1 ("~19 giorni" 1,7, "consegnato" 2,5, "Attivo" 3,2). Questi arrivano ad almeno
     7:1 sul bianco e restano sopra il 6,8 anche sui fondi tinti delle etichette.
     Solo dentro l'area (data-vista): home e ordine pubblico non cambiano, c'e' il test
     A/B in corso. Accese per tutti dal 23/9/2026 dopo la prova sull'account 2678;
     html[data-no-aaa] le spegne tutte (anche la tastiera in v3-area.js). Il :not() tiene
     la stessa priorita' che avevano in prova, quindi nessuna regola cambia vincitore. */
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"]{ --ok-dark:#14532D; --sky:#1B3A93; --danger-dark:#7F1D1D; --warn-dark:#92400E }
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-deliv-rel,
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ro-coupon-msg.ok,
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .pu-msg.ok,
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ro-fld-head .pu-tag.on,
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-punti-step.done b,
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-punti-step.gift.done b,
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ro-cf-punti-r b{color:#14532D}
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-meta-edit{color:#1B3A93}
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ro-coupon-msg.err,
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .card-remove{color:#7F1D1D}
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .acc-alt a{color:#3F359A}
  /* "Applica" ha --sky per fondo: col blu scuro il testo scuro non si leggerebbe */
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ro-coupon-apply{color:#FFFFFF}
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-menu-i.danger{color:#7F1D1D}
  /* I giorni della goccia hanno il colore nell'attributo style: serve !important */
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-wd-ok{color:#14532D !important}
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-wd-soon{color:#92400E !important}
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-wd-now{color:#7F1D1D !important}

  /* ---- Verso l'AAA, seconda passata (come sopra, solo area; rev. 2) ----
     Contrasto 7:1 anche dove il minimo 4,5 era gia' rispettato, e pulsanti da 44x44.
     Tema scuro: blu, rosso e viola schiariti; la label "Raccontacelo" era grigio su nero. */
  html:not([data-no-aaa]):not([data-theme="light"])[data-vista^="/area"]{ --sky:#A5CDFF; --link:#A5CDFF }
  html:not([data-no-aaa]):not([data-theme="light"])[data-vista^="/area"] .flab{color:var(--on-dark-mut)}
  html:not([data-no-aaa]):not([data-theme="light"])[data-vista^="/area"] .card-remove,
  html:not([data-no-aaa]):not([data-theme="light"])[data-vista^="/area"] .ro-coupon-msg.err{color:#FCA5A5}
  html:not([data-no-aaa]):not([data-theme="light"])[data-vista^="/area"] .acc-alt a{color:#C4BDFF}
  html:not([data-no-aaa]):not([data-theme="light"])[data-vista^="/area"] .search2 input::placeholder{color:rgba(255,255,255,.72)}
  html:not([data-no-aaa]):not([data-theme="light"])[data-vista^="/area"] .ar-punti-step.done b,
  html:not([data-no-aaa]):not([data-theme="light"])[data-vista^="/area"] .ar-punti-step.gift.done b,
  html:not([data-no-aaa]):not([data-theme="light"])[data-vista^="/area"] .ar-punti-mv-n.in{color:#A7F3D0}
  html:not([data-no-aaa]):not([data-theme="light"])[data-vista^="/area"] .ar-punti-step.gift:not(.done) b{color:#FDE68A}
  /* Traguardi non ancora raggiunti e prezzo barrato: sbiaditi di proposito, ma sono
     informazioni da leggere, non comandi spenti */
  html:not([data-no-aaa])[data-vista^="/area"] .ar-punti-step:not(.done):not(.next):not(.gift){opacity:.85}
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-punti-step:not(.done):not(.next):not(.gift){opacity:1}
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .pc-cell.served{color:#172554}
  /* Tastiera: il foglio chiuso resta nella pagina, solo spostato sotto lo schermo, e i suoi
     pulsanti prendevano il Tab (sul telefono, dopo aver chiuso il menu, sei Tab a vuoto).
     Si nasconde a fine discesa, come fa gia' la versione da computer (v3-area-desktop.css). */
  @media (max-width:1199.98px){
    html:not([data-no-aaa])[data-vista^="/area"] .ar-sheet:not(.open){visibility:hidden; transition:transform .26s cubic-bezier(.22,1,.36,1), visibility 0s linear .26s}
    html:not([data-no-aaa])[data-vista^="/area"] .ar-sheet.open{visibility:visible; transition:transform .26s cubic-bezier(.22,1,.36,1), visibility 0s}
  }
  /* Il foglio prende lo stato attivo quando si apre (v3-area.js, openSheet): il contenitore
     non e' un comando, il riquadro lo mostrano i pulsanti dentro */
  html:not([data-no-aaa]) #arSheet:focus{outline:none; box-shadow:none}
  html:not([data-no-aaa])[data-vista^="/area"] .overlay .modal:focus{outline:none; box-shadow:none}
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .overlay .modal:focus{box-shadow:0 -8px 40px rgba(16,24,40,.16)}
  /* Etichette di stato dell'ordine: nella home stanno sul riquadro grigio, non sul bianco
     (misurato sul telefono: "consegnato" 6,8) */
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-ob-ok{color:#0F3D21}
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-ob-warn{color:#5C2A0B}
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-ob-bad{color:#5F1414}
  html:not([data-no-aaa])[data-vista^="/area"] .pval-old{opacity:.78}
  /* Tema chiaro: i punti stanno su fondi tinti piu' scuri del bianco */
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-punti-mv-n.in,
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-punti-step.done b,
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-punti-step.gift.done b{color:#0F3D21}
  html:not([data-no-aaa])[data-theme="light"][data-vista^="/area"] .ar-punti-step.gift b{color:#5C2A0B}
  /* Tutti e due i temi */
  html:not([data-no-aaa])[data-vista^="/area"] .ar-punti-mv-d{opacity:1}
  html:not([data-no-aaa])[data-vista^="/area"] .ar-btn-sub{opacity:1}
  html:not([data-no-aaa])[data-vista^="/area"] .avatar{background:linear-gradient(180deg,#3F359A,#1E40AF)}
  html:not([data-no-aaa])[data-vista^="/area"] .ar-btn-ribbon{background:#3F359A; font-size:11px}
  html:not([data-no-aaa])[data-vista^="/area"] .premium{color:#0B1020}
  /* Finestre informative (vetro, box, prezzo, consegna): card bianca in entrambi i temi,
     il grigio --muted dava 4,8. Il riquadro verde del vetro ha il colore nello style. */
  html:not([data-no-aaa])[data-vista^="/area"] :is(#vetroOverlay,#boxRuleOverlay,#prezzoInfoOverlay,#deliveryOverlay){--muted:#374151}
  html:not([data-no-aaa])[data-vista^="/area"] #vetroOverlay div[style*="#dcf5ec"]{color:#14532D !important}
  /* Pulsanti da almeno 44x44. Dove crescere romperebbe la card (Rimuovi, Tutti i valori,
     interruttore dei punti) si allarga solo l'area del tocco, come fa gia' la X (.xclose). */
  html:not([data-no-aaa])[data-vista^="/area"] .ar-back{min-height:44px; display:inline-flex; align-items:center; padding:0 12px 0 0}
  html:not([data-no-aaa])[data-vista^="/area"] .ar-ord-inv,
  html:not([data-no-aaa])[data-vista^="/area"] .ar-ord-reorder{min-height:44px; padding:0 10px}
  html:not([data-no-aaa])[data-vista^="/area"] .brand,
  html:not([data-no-aaa])[data-vista^="/area"] .ar-deliv-edit,
  html:not([data-no-aaa])[data-vista^="/area"] .ai-dopo,
  html:not([data-no-aaa])[data-vista^="/area"] .fsort select,
  html:not([data-no-aaa])[data-vista^="/area"] .ar-nps-n,
  html:not([data-no-aaa])[data-vista^="/area"] .ar-nps-later,
  html:not([data-no-aaa])[data-vista^="/area"] button.ar-sub-meta-tap,
  html:not([data-no-aaa])[data-vista^="/area"] .ro-fld-input:not(textarea),
  html:not([data-no-aaa])[data-vista^="/area"] .ro-coupon-apply,
  html:not([data-no-aaa])[data-vista^="/area"] .ro-bill-edit,
  html:not([data-no-aaa])[data-vista^="/area"] .ro-cf-edit,
  html:not([data-no-aaa])[data-vista^="/area"] .ar-sheet-link,
  html:not([data-no-aaa])[data-vista^="/area"] .ac-chk,
  html:not([data-no-aaa])[data-vista^="/area"] .ar-filtro-rimb{min-height:44px}
  html:not([data-no-aaa])[data-vista^="/area"] .ar-nps-x,
  html:not([data-no-aaa])[data-vista^="/area"] .pc-navb{width:44px; height:44px}
  html:not([data-no-aaa])[data-vista^="/area"] .fq-slider{height:44px}
  html:not([data-no-aaa])[data-vista^="/area"] .card-remove,
  html:not([data-no-aaa])[data-vista^="/area"] .wchem-more{position:relative}
  html:not([data-no-aaa])[data-vista^="/area"] .card-remove::after,
  html:not([data-no-aaa])[data-vista^="/area"] .wchem-more::after,
  html:not([data-no-aaa])[data-vista^="/area"] .ar-sw::before{content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%)}