:root { --bg:#111418; --card:#1b2027; --line:#2b333d; --fg:#eef2f6; --mut:#93a1b0; --ok:#2ea043; --no:#d1242f; --feat:#d29922; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui,-apple-system,sans-serif; }
#bar { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center;
  padding:.6rem 1rem; background:#0d1013; border-bottom:1px solid var(--line); font-size:.85rem; color:var(--mut); }
#bar button { background:none; border:0; color:var(--fg); font-size:1.2rem; }
#feed { padding:.75rem; display:flex; flex-direction:column; gap:.75rem; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:.9rem;
  scroll-margin-top:3.5rem; } /* U3: spazio sotto la barra sticky quando scrollIntoView porta qui una card */
.card h2 { margin:0 0 .2rem; font-size:1.05rem; display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; }
.card h2 em { color:var(--mut); font-style:normal; font-size:.9rem; }
.badge { margin-left:auto; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--mut); border:1px solid var(--line); border-radius:99px; padding:.1rem .5rem; }
.links { display:flex; gap:.5rem; margin:.1rem 0; }
.links a { font-size:.72rem; color:var(--mut); text-decoration:none; border:1px solid var(--line);
  border-radius:99px; padding:.1rem .55rem; }
.hint { margin:.1rem 0 .6rem; font-size:.78rem; color:var(--mut); }
.card h3 { margin:.5rem 0 .3rem; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); }
/* U6: intestazione "Benefici" con colore proprio (--feat), cosi' si distingue a colpo d'occhio
   dalle altre righe. Specificita' .card h3.feat-heading (0,2,1) per vincere su .card h3 (0,1,1). */
.card h3.feat-heading { color:var(--feat); }
.row { display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.25rem; scroll-snap-type:x proximity; }
/* [hidden] da solo perderebbe contro .row{display:flex} (stessa specificita', l'autore vince
   sempre sullo UA stylesheet): va reso esplicito, stesso schema gia' usato per #viewer[hidden]. */
.row.feat[hidden], .feat-heading[hidden] { display:none; }
.thumb { position:relative; flex:0 0 auto; width:104px; scroll-snap-align:start; }
.thumb-select { display:block; width:100%; background:none; border:0; padding:0; font:inherit; color:inherit; }
.thumb-select img { width:104px; height:104px; object-fit:cover; border-radius:10px; display:block;
  border:2px solid transparent; background:#000; -webkit-touch-callout:none; user-select:none; }
.thumb-select span { display:block; font-size:.62rem; color:var(--mut); text-align:center; margin-top:.15rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gen .thumb-select[aria-pressed=true] img { border-color:var(--no); opacity:.55; }
.ref .thumb-select[aria-pressed=true] img { border-color:var(--ok); }
/* U6: bordo tratteggiato ambra a riposo = "questa e' una benefici, non galleria". Selezionata
   (= bocciata), stesso rosso del gruppo galleria: la semantica di scarto resta coerente. */
.feat .thumb-select img { border-style:dashed; border-color:var(--feat); }
.feat .thumb-select[aria-pressed=true] img { border-style:solid; border-color:var(--no); opacity:.55; }
.thumb-zoom { position:absolute; top:2px; right:2px; width:26px; height:26px; border-radius:50%;
  border:0; background:rgba(0,0,0,.6); color:#fff; font-size:.8rem; line-height:26px; padding:0; }
.note { width:100%; margin-top:.6rem; background:#0d1013; color:var(--fg); border:1px solid var(--line);
  border-radius:10px; padding:.5rem; font:inherit; font-size:.9rem; resize:vertical; }
.actions { display:flex; gap:.5rem; margin-top:.6rem; }
.actions button { flex:1; padding:.7rem; border:0; border-radius:10px; font:inherit; font-weight:600; color:#fff; }
.actions .ok { background:var(--ok); } .actions .fix { background:var(--no); }
.actions button:disabled { opacity:.5; }
.state { margin:.4rem 0 0; font-size:.75rem; color:var(--mut); min-height:1em; }
.card.done { opacity:.35; }
#viewer[hidden] { display:none; }
#viewer { position:fixed; inset:0; z-index:10; background:#000; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
#viewer img { max-width:100%; max-height:82vh; object-fit:contain; touch-action:none; user-select:none; }
#viewer-info { margin:.4rem 0 0; color:var(--mut); font-size:.8rem; padding:0 .6rem; text-align:center; }
#viewer-info b { color:var(--fg); font-weight:600; }
.viewer-nav { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px;
  border:0; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:1.5rem; line-height:1; }
#viewer-prev { left:.5rem; }
#viewer-next { right:.5rem; }
/* U1: bersaglio esplicito per chiudere, area di tocco 44x44 px reali (il minimo per il pollice).
   Angolo in alto a destra: non copre il centro dell'immagine, disco scuro semi-trasparente +
   bordo chiaro leggero cosi' resta leggibile sia su foto chiare sia su foto scure sotto. */
#viewer-close { position:absolute; top:.6rem; right:.6rem; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.35); background:rgba(0,0,0,.6); color:#fff; font-size:1.25rem;
  line-height:42px; text-align:center; padding:0; }
/* U5: transizione SOLO per il rientro animato dal doppio tap (resetZoom(true)) — mai durante il
   pinch/pan live, dove aggiungerebbe solo un ritardo percepito. */
.zoom-anim { transition:transform .18s ease; }

/* U2: anteprima a pressione prolungata. pointer-events:none sul contenitore: il dito resta
   "sopra" il bottone della miniatura sottostante, il rilascio deve arrivare li', non qui. */
#peek[hidden] { display:none; }
#peek { position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.82); display:flex;
  align-items:center; justify-content:center; padding:1.2rem; pointer-events:none; }
#peek img { max-width:100%; max-height:100%; object-fit:contain; border-radius:12px; }

/* U4: toast "Annulla" fisso in basso, sempre raggiungibile col pollice anche se l'avanzamento
   automatico (U3) ha gia' scorso la card originale fuori schermo. z-index sopra a tutto: deve
   restare accessibile anche se nel frattempo si apre il viewer su un'altra card. */
#undo-toast[hidden] { display:none; }
#undo-toast { position:fixed; left:1rem; right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:25; background:#1b2027; border:1px solid var(--line); border-radius:12px;
  padding:.5rem .5rem .5rem 1rem; display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; box-shadow:0 4px 18px rgba(0,0,0,.4); }
#undo-msg { font-size:.85rem; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#undo-btn { flex:0 0 auto; background:var(--fg); color:#111; border:0; border-radius:8px;
  font-weight:700; padding:0 1.1rem; min-height:44px; font:inherit; font-size:.85rem; }