:root { --bg:#f4f6f8; --card:#fff; --ink:#1f2933; --muted:#6b7280; --line:#e5e7eb; --brand:#2563eb; --err:#dc2626; --ok:#16a34a; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--ink); background:var(--bg); }

/* login / done */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:1rem; }
.card { background:var(--card); padding:2rem; border-radius:14px; box-shadow:0 6px 24px rgba(0,0,0,.08); width:min(380px,100%); }
.card h1 { margin:0 0 .25rem; font-size:1.4rem; }
.card .sub { margin:0 0 1.25rem; color:var(--muted); }
.card label { display:block; margin:.75rem 0; font-weight:600; font-size:.9rem; }
.card input { width:100%; margin-top:.3rem; padding:.6rem .7rem; border:1px solid var(--line); border-radius:8px; font-size:1rem; }
.card button, .btn { display:inline-block; margin-top:1rem; padding:.65rem 1rem; background:var(--brand); color:#fff; border:0; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; text-decoration:none; }
.error { color:var(--err); font-weight:600; }

/* survey */
.topbar { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.7rem 1rem; background:#fff; border-bottom:1px solid var(--line); }
.topbar .who { display:flex; align-items:center; gap:.6rem; color:var(--muted); font-size:.9rem; }
.link { background:none; border:0; color:var(--brand); cursor:pointer; font-size:.9rem; padding:0; }

#survey { max-width:820px; margin:0 auto; padding:1rem 1rem 6rem; }
.level > h2 { margin:1.6rem 0 .3rem; font-size:1.15rem; }
.leveldesc { color:var(--muted); font-size:.9rem; margin:.2rem 0 1rem; }
.section { border:1px solid var(--line); border-radius:12px; background:#fff; margin:0 0 1rem; padding:.4rem 1rem 1rem; }
.section > legend { font-weight:700; padding:0 .4rem; }
.field { display:block; margin:.8rem 0; }
.field > span { display:block; font-weight:600; font-size:.9rem; margin-bottom:.3rem; }
.field input[type=text], .field input[type=number], .field select { width:100%; padding:.55rem .7rem; border:1px solid var(--line); border-radius:8px; font-size:1rem; background:#fff; }
.instruction { background:#f0f6ff; border-left:3px solid var(--brand); padding:.5rem .7rem; border-radius:6px; color:#334155; font-size:.88rem; margin:.6rem 0; }

.repeat, .group { border:1px dashed var(--line); border-radius:10px; padding:.6rem .8rem; margin:.8rem 0; background:#fafbfc; }
.repeat-head { font-weight:700; font-size:.95rem; }
.repeat-item { border:1px solid var(--line); border-radius:8px; padding:.5rem .7rem; margin:.6rem 0; background:#fff; }
.addrepeat, .remove { background:#eef2ff; color:var(--brand); border:1px solid #dbe4ff; border-radius:7px; padding:.4rem .7rem; cursor:pointer; font-weight:600; font-size:.88rem; }
.remove { color:var(--err); background:#fef2f2; border-color:#fecaca; margin-top:.4rem; }

.media-btns { display:flex; flex-wrap:wrap; gap:.5rem; }
.mbtn { flex:1 1 28%; min-width:96px; text-align:center; background:#f1f5f9; border:1px solid var(--line); border-radius:10px; padding:.85rem .6rem; cursor:pointer; font-weight:600; font-size:.95rem; -webkit-user-select:none; user-select:none; }
.mbtn.cam { background:#eef2ff; border-color:#dbe4ff; color:var(--brand); }
.mbtn input { display:none; }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.6rem; }
.chip { display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; background:#eef2f7; border:1px solid var(--line); border-radius:22px; padding:.25rem .35rem .25rem .6rem; max-width:100%; }
.chip .chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:9rem; }
.chip .thumb { width:36px; height:36px; object-fit:cover; border-radius:8px; flex:none; }
.chip.uploading { opacity:.55; }
.chip.err { background:#fef2f2; border-color:#fecaca; color:var(--err); }
.chip-x { border:0; background:transparent; color:var(--err); font-size:1.25rem; line-height:1; cursor:pointer; padding:0 .25rem; flex:none; }

.submitbar { position:fixed; bottom:0; left:0; right:0; display:flex; align-items:center; gap:1rem; padding:.8rem 1rem; background:#fff; border-top:1px solid var(--line); }
.submitbar button { background:var(--brand); color:#fff; border:0; border-radius:8px; padding:.7rem 1.4rem; font-size:1rem; font-weight:700; cursor:pointer; }
#status { font-size:.9rem; font-weight:600; }
#status.err { color:var(--err); }
#status.ok { color:var(--ok); }
#status.dirty { color:var(--muted); }
.done-toggle { display:flex; align-items:center; gap:.4rem; font-weight:600; font-size:.95rem; }
.done-toggle input { width:20px; height:20px; }

/* chip icona / su NAS */
.chip .ic { font-size:1.1rem; width:26px; text-align:center; flex:none; }
.chip.onnas { background:#fff7ed; border-color:#fed7aa; }

/* anteprima media: la parte cliccabile della chip (thumb/icona/nome) */
.chip .thumb, .chip .ic, .chip .chip-name { cursor:zoom-in; }
.chip.uploading .thumb, .chip.uploading .ic, .chip.uploading .chip-name { cursor:progress; }

/* lightbox anteprima */
.lightbox { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:rgba(0,0,0,.85); }
.lightbox[hidden] { display:none; }
.lightbox .lb-body { display:flex; align-items:center; justify-content:center; max-width:100%; max-height:100%; }
.lightbox img, .lightbox video { max-width:100%; max-height:88vh; border-radius:10px; box-shadow:0 12px 48px rgba(0,0,0,.5); }
.lightbox .lb-msg { color:#fff; font-size:1rem; line-height:1.5; text-align:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); padding:1.3rem 1.5rem; border-radius:12px; max-width:22rem; }
.lb-close { position:fixed; top:.6rem; right:.8rem; z-index:51; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:50%; background:rgba(0,0,0,.45); color:#fff; font-size:1.7rem; line-height:1; cursor:pointer; }

/* topbar back link */
.topbar .back { font-weight:600; }

/* dashboard */
.dash { max-width:820px; margin:0 auto; padding:1rem 1rem 3rem; }
.dash-head { display:flex; align-items:center; justify-content:space-between; margin:.5rem 0 1rem; }
.dash-head h1 { font-size:1.3rem; margin:0; }
.survey-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.survey-list a { display:block; background:#fff; border:1px solid var(--line); border-radius:12px; padding:.9rem 1rem; text-decoration:none; color:var(--ink); }
.survey-list a:active { background:#f8fafc; }
.s-title { font-weight:700; display:flex; align-items:center; gap:.5rem; }
.s-meta { color:var(--muted); font-size:.85rem; margin-top:.25rem; }
.badge { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; background:#eef2f7; color:var(--muted); border:1px solid var(--line); border-radius:20px; padding:.1rem .5rem; }
.badge.ok { background:#ecfdf5; color:var(--ok); border-color:#bbf7d0; }
.empty { color:var(--muted); text-align:center; margin-top:3rem; }