:root{ --teal:#00615e; --teal-d:#004a48; --or:#e8922e; --ink:#2b2f2e; --mut:#8a928f; --cream:#F7EFE3; --line:#e6e9e8; --ok:#1e7d4f; --dup:#b3823f; --err:#b33; }
*{box-sizing:border-box} html,body{margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif;color:var(--ink);background:#f4f4f4}
#bar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;background:var(--teal);color:#fff;padding:12px 16px;font-weight:600}
.net{font-size:.72rem;padding:2px 8px;border-radius:99px}
.net.on{background:#0a7} .net.off{background:#b33} .net.ko{background:#e8922e}
.spin{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;border:2px solid rgba(138,146,143,.35);border-top-color:#e8922e;border-radius:50%;animation:mtspin .8s linear infinite}
@keyframes mtspin{to{transform:rotate(360deg)}}
.card{max-width:520px;margin:14px auto;padding:16px;background:#fff;border:1px solid var(--line);border-radius:12px}
h1{font-size:1.15rem;margin:.2rem 0 .6rem}
.muted{color:var(--mut);font-size:.85rem}
input{width:100%;padding:14px;margin:8px 0;border:1px solid var(--line);border-radius:10px;font-size:1.05rem}
button{width:100%;padding:15px;margin:6px 0;border:0;border-radius:10px;background:var(--teal);color:#fff;font-size:1.05rem;font-weight:600}
button.big{font-size:1.3rem;padding:22px}
button.ghost{background:#fff;color:var(--teal);border:1px solid var(--teal)}
button.act{background:var(--or)}
.small{font-size:.85rem}
.row{display:flex;gap:8px;align-items:center}.row.small button{width:auto;flex:0 0 auto;padding:10px 14px;font-size:.9rem}
.hidden{display:none!important}
.msg{font-size:.9rem;min-height:1.2em}
#scanner{position:fixed;inset:0;background:#000;z-index:20}
#video{width:100%;height:100%;object-fit:cover}
.scanOverlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.frame{width:66vw;max-width:320px;aspect-ratio:1;border:3px solid #fff;border-radius:18px;box-shadow:0 0 0 100vmax rgba(0,0,0,.45)}
.stop{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:auto;padding:12px 24px}
.big-name{font-size:1.4rem;font-weight:700;margin:.2rem 0}
.pett{color:var(--teal);font-weight:700}
.badge{display:inline-block;padding:6px 12px;border-radius:99px;font-weight:700;color:#fff;margin:6px 0}
.badge.ok{background:var(--ok)} .badge.dup{background:var(--dup)} .badge.err{background:var(--err)} .badge.no{background:var(--mut)}
.ent{padding:12px;border:1px solid var(--line);border-radius:10px;margin:8px 0}
.ent h3{margin:.1rem 0}
.doneline{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 0}
.doneline .lbl{font-weight:600;color:var(--mut)}

/* dettagli tecnici (diagnosi in campo, chiuso di default) */
.dbg{margin-top:14px;border-top:1px dashed #cfd6d4;padding-top:8px}
.dbg summary{cursor:pointer;font-size:12px;color:#8a928f;letter-spacing:.04em}
.dbg pre{font-size:11px;line-height:1.35;background:#f4f4f4;border-radius:8px;padding:8px;overflow:auto;max-height:44vh;white-space:pre-wrap;word-break:break-word}
.dbgt{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.dbgt td{padding:5px 6px;border-bottom:1px solid #eceeed;vertical-align:top}
.dbgt td:first-child{color:#8a928f;width:47%}
.dbg2{margin-top:8px}
.dbg2 summary{cursor:pointer;font-size:11px;color:#8a928f}
#rosterTs{font-size:12px;margin:6px 0 0}
#rosterTs.warn,#loginPerf.warn{color:#d07f1f;font-weight:600}
#loginPerf{margin:0}

/* --- MODALITA' RAFFICA (17 ago) --- */
.raffbar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;background:rgba(0,97,94,.92);color:#fff;font-size:.9rem;font-weight:600;z-index:5}
.raffov{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);padding:26px 18px;text-align:center;z-index:6}
.raffov.ok{background:rgba(0,153,119,.94)}.raffov.dup{background:rgba(232,146,46,.95)}.raffov.ko{background:rgba(179,51,51,.95)}
.raffname{color:#fff;font-size:1.5rem;font-weight:700;line-height:1.2;word-break:break-word}
.raffmsg{color:#fff;font-size:1.05rem;margin-top:6px;opacity:.95}

/* --- SCHEDA-LAMPO CENE (17 ago) --- */
.lampo{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:10px;padding:20px;background:rgba(20,25,23,.96);text-align:center}
.lamponame{color:#fff;font-size:1.25rem;font-weight:700;line-height:1.2;word-break:break-word}
/* l'ORA e' il turno: e' l'unica cosa da far rispettare in tempo reale, quindi domina */
.lampora{color:#fff;font-size:3.6rem;font-weight:800;line-height:1;letter-spacing:-.02em}
.lampora small{display:block;font-size:.85rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.75;margin-bottom:2px}
/* il MENU' e' una BANDA DI COLORE: si guarda, non si legge */
.lampomenu{width:100%;max-width:420px;padding:12px 10px;border-radius:12px;color:#fff;font-weight:700;font-size:1.05rem;letter-spacing:.04em}
.lampomenu.m1{background:#00615e}.lampomenu.m2{background:#e8922e}.lampomenu.veg{background:#7a4fa3}.lampomenu.na{background:#5a625f}
.lamponota{color:#fff;opacity:.9;font-size:.9rem;max-width:420px;line-height:1.4}
.lampo.dup{background:rgba(160,95,15,.97)}
/* v37 (6 ott 2026): intolleranze nella scheda-lampo — si legge su fondo verde, arancio e rosso */
.lampointol{width:100%;max-width:420px;padding:10px 12px;border-radius:12px;font-size:1.05rem;line-height:1.3;font-weight:800}
.lampointol.si{background:#fff;color:#b33;border:3px solid #fff;box-shadow:0 0 0 3px #b33 inset}
.lampointol.nessuna{background:rgba(255,255,255,.18);color:#fff;font-weight:600;font-size:.95rem}
.lampointol.vuoto{background:#ffe9a8;color:#5a3d00}.lampo.ko{background:rgba(130,30,30,.97)}
.lampobtns{display:flex;gap:10px;width:100%;max-width:420px;margin-top:6px}
.lampobtn{flex:1;padding:16px 10px;border:0;border-radius:12px;font-size:1.05rem;font-weight:700;background:#0a7;color:#fff}
.lampobtn.ghost2{background:rgba(255,255,255,.18)}


/* ---- v29 (30 ago 2026): kit della busta e contenuto del pacco ----
   Si legge in piedi, con le mani occupate: righe alte, niente corpo piccolo.
   `.forte` = voce che cambia da persona a persona (colore del braccialetto, taglia della
   maglia): e' quella su cui si sbaglia, quindi e' l'unica evidenziata.
   `.no` = cosa NON dare. Il Tratturo Regio non ha il buono partner: darlo e' un regalo che
   non spetta, e nessuno se ne accorge mai. Un elenco che dice solo cosa mettere non basta. */
ul.kit{ margin:6px 0 10px; padding-left:18px; }
ul.kit li{ margin:5px 0; line-height:1.35; font-size:15px; }
ul.kit li.forte{ font-weight:700; }
ul.kit.no{ list-style:none; padding-left:0; }
ul.kit.no li{ color:#a11; font-weight:700; }
ul.kit.no li::before{ content:'\26d4\00a0'; }
p.paccotipo{ margin:2px 0 4px; font-size:15px; }


/* ---- v30 (30 ago 2026): conferma prima di un'azione irreversibile ----
   Si legge in piedi, in fila, con una mano sola: nome grande, azione in grassetto,
   bottoni alti (>=52px) e ben separati. `Annulla` a SINISTRA e visivamente neutro,
   `Conferma` a destra: il pollice che sbaglia deve cadere sul NO.
   Il riquadro NON e' a tutto schermo di proposito: si vede che c'e' una scheda sotto,
   quindi si capisce che l'operazione non e' ancora avvenuta. */
.confirm-ov{ position:fixed; inset:0; background:rgba(20,25,23,.55); display:flex;
  align-items:center; justify-content:center; padding:18px; z-index:9999; }
.confirm-box{ background:#fff; border-radius:14px; padding:18px 16px 14px; max-width:420px; width:100%;
  box-shadow:0 12px 40px rgba(0,0,0,.28); }
.confirm-q{ font-size:19px; line-height:1.35; }
.confirm-x{ color:#8a928f; font-weight:600; }
.confirm-chi{ font-size:20px; margin-top:8px; line-height:1.3; }
.confirm-pett{ color:#00615e; font-weight:700; }
.confirm-warn{ margin-top:10px; padding:8px 10px; border-radius:8px; background:#fdf3e6; color:#8a4b00;
  font-size:14px; line-height:1.4; font-weight:600; }
.confirm-irr{ margin-top:10px; font-size:13px; color:#8a928f; }
.confirm-btns{ display:flex; gap:10px; margin-top:16px; }
.confirm-btns button{ flex:1; min-height:52px; border-radius:10px; font-size:16px; font-weight:700;
  border:1px solid #e6e9e8; cursor:pointer; }
.confirm-no{ background:#f4f4f4; color:#2b2f2e; }
.confirm-si{ background:#e8922e; color:#fff; border-color:#d07f1f; }
/* Un bottone gia' usato deve SEMBRARE spento: arancione e disabilitato si legge ancora
   come «da premere», e l'operatore ci riprova. */
button.act[disabled]{ background:#e6e9e8; color:#8a928f; border-color:#e6e9e8; }

/* 31 ago 2026 — IL DIRITTO AL CAMPO BASE E IL LOTTO DEL PEZZO, VISIBILI PRIMA DI PREMERE.
   Il dato c'era nel roster `assoc` dal 18 ago e non compariva da nessuna parte: la guardia
   colore correggeva a gesto compiuto. Qui non si aggiunge un controllo, si mette davanti
   agli occhi quello che c'e' gia'. */
.tokpil{display:inline-block;padding:6px 13px;border-radius:99px;font-weight:700;font-size:.85rem;color:#fff;margin:6px 0 2px;letter-spacing:.02em}
.tokpil.col{background:var(--dup)}
.tokpil.neu{background:var(--mut)}
.tokpil.na{background:#fff;color:var(--mut);border:1px dashed var(--line)}
.pil{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.78rem;font-weight:700;line-height:1.55}
.pil.col{background:#fff;color:#a8761f}
.pil.neu{background:rgba(255,255,255,.85);color:#5c6360}
.pil.ko{background:#b33;color:#fff}
.lin2{display:block;margin-top:6px}
/* Il mismatch si vede sul BOTTONE, non solo nella riga: con la fila davanti il dito parte
   prima che l'occhio legga. Il bottone resta premibile — la forzatura ha un caso legittimo. */
button.act.ko{box-shadow:inset 0 0 0 3px #b33}