:root{
  --primario:#1d4ed8; --primario-testo:#fff;
  --bg:#f4f6fa; --card:#fff; --testo:#1c2333; --sec:#5b6578; --bordo:#dde2ec;
  --ok:#15803d; --warn:#b45309; --err:#b91c1c;
}
*{box-sizing:border-box}
body{margin:0;font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--testo)}
button,input,select{font:inherit}
.hidden{display:none!important}

/* login */
.login{min-height:calc(100vh - 40px);display:grid;place-items:center;padding:16px}
.box{background:var(--card);border:1px solid var(--bordo);border-radius:14px;padding:28px;width:100%;max-width:400px}
.logo{width:56px;height:56px;border-radius:14px;background:var(--primario);color:var(--primario-testo);display:grid;place-items:center;font-weight:700;font-size:20px;margin-bottom:12px}
h1{font-size:22px;margin:0 0 4px} h2{font-size:18px;margin:0 0 12px} h3{font-size:15px;margin:0 0 8px}
p.sec,.sec{color:var(--sec);font-size:14px}
label{display:block;font-size:14px;font-weight:600;margin:14px 0 4px}
input[type=text],input[type=email],input[type=number],select.f{width:100%;padding:10px 12px;border:1px solid var(--bordo);border-radius:8px;background:var(--card);color:var(--testo)}
.btn{display:inline-block;background:var(--primario);color:var(--primario-testo);border:0;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer;text-decoration:none}
.btn.sec{background:transparent;color:var(--primario);border:1px solid var(--primario)}
.btn.full{width:100%;margin-top:18px}
.msg{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;border-radius:8px;padding:12px;margin-top:16px;font-size:14px}

/* app */
.app{display:grid;grid-template-columns:230px 1fr;min-height:calc(100vh - 40px)}
nav.side{background:var(--card);border-right:1px solid var(--bordo);padding:16px;display:flex;flex-direction:column;gap:4px}
nav.side .brand{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:14px}
nav.side .brand .logo{width:34px;height:34px;font-size:13px;margin:0;border-radius:9px}
.nv{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--testo);cursor:pointer;border:0;background:none;text-align:left;width:100%}
.nv.on{background:color-mix(in srgb,var(--primario) 12%,#fff);color:var(--primario);font-weight:600}
.nv.lock::after{content:"admin";margin-left:auto;font-size:11px;background:#eef;border-radius:99px;padding:1px 8px;color:var(--sec)}
.spacer{flex:1}
.utente{font-size:13px;color:var(--sec);border-top:1px solid var(--bordo);padding-top:12px}
main{padding:24px;max-width:900px;width:100%}
.top{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.card{background:var(--card);border:1px solid var(--bordo);border-radius:12px;padding:18px;margin-bottom:16px}
.row{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--bordo);align-items:center}
.row:last-child{border:0}
.badge{font-size:12px;border-radius:99px;padding:2px 10px;background:#eef2ff;color:var(--primario);font-weight:600;white-space:nowrap}
.badge.ok{background:#dcfce7;color:var(--ok)} .badge.w{background:#fef3c7;color:var(--warn)} .badge.e{background:#fee2e2;color:var(--err)}
.todo{border:2px dashed var(--bordo);border-radius:12px;padding:16px;color:var(--sec);text-align:center;font-size:14px}
.switch{display:flex;gap:8px;align-items:center}
.sw{appearance:none;width:42px;height:24px;background:#cbd5e1;border-radius:99px;position:relative;cursor:pointer;flex:none;transition:.15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s}
.sw:checked{background:var(--primario)} .sw:checked::after{left:21px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.avviso{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:8px;padding:10px 12px;font-size:14px;margin-bottom:16px}
.note{font-size:12px;color:var(--sec);margin-top:4px}
footer.fine{color:var(--sec);font-size:13px;text-align:center;padding:24px 16px}
footer.fine a{color:var(--primario)}

/* sincronizzazione */
.sync{display:flex;align-items:center;gap:8px;font-size:13px;border-radius:8px;padding:8px 12px;margin-bottom:16px;border:1px solid}
.sync.on{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.sync.off{background:#fffbeb;border-color:#fde68a;color:#92400e}
.sync.run{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.sync .sp{flex:1}
.sync a{color:inherit;font-weight:600;cursor:pointer;text-decoration:underline}
.pend{font-size:12px;color:var(--warn);margin-left:6px}
select.st{padding:6px 8px;border:1px solid var(--bordo);border-radius:8px;background:var(--card);color:var(--testo)}
textarea.nt{width:100%;margin-top:8px;padding:8px 10px;border:1px solid var(--bordo);border-radius:8px;font:inherit;background:var(--card);color:var(--testo)}
.cnt{display:inline-block;min-width:20px;text-align:center;background:var(--err);color:#fff;border-radius:99px;font-size:11px;padding:0 6px;margin-left:auto}
.off-only{display:none}
body.offline .off-only{display:block}
body.offline .need-net{opacity:.5;pointer-events:none}
.btn[disabled]{opacity:.5;cursor:not-allowed}
/* barra evento */
.evbar{position:sticky;top:0;z-index:4;background:var(--card);border:1px solid var(--bordo);border-left:5px solid var(--primario);border-radius:12px;padding:10px 14px;margin-bottom:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.evbar .tt{flex:1;min-width:160px}
.evbar .tt b{font-size:17px;display:block;line-height:1.2}
.evbar .tt span{font-size:13px;color:var(--sec)}
.evbar .nessuno b{color:var(--warn)}
.chip{font-size:12px;border-radius:99px;padding:4px 10px;border:1px solid;cursor:pointer;white-space:nowrap;background:none}
.chip.on{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.chip.off{background:#fffbeb;border-color:#fde68a;color:#92400e}
.chip.run{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.prog{height:6px;background:var(--bordo);border-radius:99px;overflow:hidden;min-width:90px}
.prog i{display:block;height:100%;background:var(--primario)}
.evc{border:2px solid var(--bordo);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--card);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.evc.sel{border-color:var(--primario);background:color-mix(in srgb,var(--primario) 6%,var(--card))}
.evc .inf{flex:1;min-width:180px}
/* telefono */
.bottom{display:none}
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  nav.side{display:none}
  main{padding:16px 16px 90px}
  .grid2{grid-template-columns:1fr}
  .bottom{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--bordo);z-index:5}
  .bottom button{flex:1;border:0;background:none;padding:10px 4px;font-size:12px;color:var(--sec);display:flex;flex-direction:column;align-items:center;gap:2px}
  .bottom button.on{color:var(--primario);font-weight:700}
  .bottom button span{font-size:20px}
}
code{background:var(--bordo);border-radius:4px;padding:1px 5px;font-size:13px}
.xdemo{display:none}

/* barra evento */
.evbar{position:sticky;top:0;z-index:4;background:var(--card);border:1px solid var(--bordo);border-left:5px solid var(--primario);border-radius:12px;padding:10px 14px;margin-bottom:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.evbar .tt{flex:1;min-width:160px}
.evbar .tt b{font-size:17px;display:block;line-height:1.2}
.evbar .tt span{font-size:13px;color:var(--sec)}
.evbar .nessuno b{color:var(--warn)}
.chip{font-size:12px;border-radius:99px;padding:4px 10px;border:1px solid;cursor:pointer;white-space:nowrap;background:none}
.chip.on{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.chip.off{background:#fffbeb;border-color:#fde68a;color:#92400e}
.chip.run{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.prog{height:6px;background:var(--bordo);border-radius:99px;overflow:hidden;min-width:90px}
.prog i{display:block;height:100%;background:var(--primario)}
.evc{border:2px solid var(--bordo);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--card);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.evc.sel{border-color:var(--primario);background:color-mix(in srgb,var(--primario) 6%,var(--card))}
.evc .inf{flex:1;min-width:180px}
.logo img{width:100%;height:100%;object-fit:contain;border-radius:inherit}
.logo.hasimg{background:transparent}
.ver{font-size:11px;font-weight:600;color:var(--sec);background:var(--bordo);border-radius:99px;padding:1px 8px;margin-left:2px;white-space:nowrap}
.brand{flex-wrap:wrap}
.lgprev{width:96px;height:96px;border:1px dashed var(--bordo);border-radius:14px;display:grid;place-items:center;overflow:hidden}
.lgprev .logo{margin:0;width:100%;height:100%;border-radius:14px}

.ver{font-size:11px;font-weight:600;color:var(--sec);background:var(--bordo);border-radius:99px;padding:1px 8px;white-space:nowrap}
.brandimg{display:block;max-width:100%;height:auto}
.box .brandimg{width:280px;margin:0 auto 14px}
nav.side .brand{flex-direction:column;align-items:flex-start;gap:6px}
nav.side .brand .brandimg{width:190px}
.topbar{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lgprev{width:200px;min-height:70px;border:1px dashed var(--bordo);border-radius:12px;display:grid;place-items:center;padding:8px;background:#fff}
.lgprev img{max-width:100%;height:auto;display:block}
@media (max-width:760px){
  .topbar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .topbar .brandimg{height:44px;width:auto}
}

/* albero */
.tn{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border:1px solid var(--bordo);border-radius:10px;margin-bottom:6px;background:var(--card)}
.tn.br{background:color-mix(in srgb,var(--primario) 5%,var(--card))}
.tn .tg{width:26px;height:26px;border:0;background:none;cursor:pointer;font-size:13px;color:var(--sec);flex:none}
.tn .tt2{flex:1;min-width:150px}
.tn .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.hd{cursor:grab;color:var(--sec);user-select:none;padding:0 4px;font-size:18px}
.tn.dropb{box-shadow:0 -4px 0 var(--primario)} .tn.dropa{box-shadow:0 4px 0 var(--primario)} .tn.dropi{outline:2px dashed var(--primario)}
.tn.drg{opacity:.35}
.ib{border:1px solid var(--bordo);background:var(--card);color:var(--testo);border-radius:8px;padding:3px 9px;cursor:pointer;font-size:14px}
.ib.dn{color:var(--err);border-color:var(--err)}
.mini{display:inline-block;width:60px;height:6px;background:var(--bordo);border-radius:99px;overflow:hidden;vertical-align:middle}
.mini i{display:block;height:100%;background:var(--ok)}
.mv{display:flex;gap:8px;align-items:center;padding:6px 4px;border-radius:8px}
.mv.no{opacity:.45}

ul.trl{list-style:none;margin:0;padding:0}
ul.trl ul.trl{margin-left:20px}
ul.trl.vuoto{min-height:12px;border:1px dashed var(--bordo);border-radius:8px;margin:0 0 6px 20px}
.sortable-ghost{opacity:.4}
.sortable-chosen{box-shadow:0 6px 18px rgba(0,0,0,.25)}
.hd{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;padding:6px 10px}

/* home */
.stk{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--bordo)}
.stk i{display:block;height:100%}
.s-fin{background:#15803d}.s-fat{background:#86efac}.s-cor{background:#60a5fa}.s-dar{background:transparent}
.leg{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--sec);margin-top:8px}
.leg span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.leg .l-fin::before{background:#15803d}.leg .l-fat::before{background:#86efac}.leg .l-cor::before{background:#60a5fa}.leg .l-dar::before{background:var(--bordo)}
.tiles{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.tile{flex:1;min-width:130px;border:1px solid var(--bordo);border-radius:12px;padding:12px 14px;background:var(--card)}
.tile b{font-size:28px;display:block;line-height:1.1}
.tile.e b{color:var(--err)}.tile.w b{color:var(--warn)}
.big{font-size:34px;font-weight:700;line-height:1}

.toastm{position:fixed;bottom:84px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:8px 16px;border-radius:99px;font-size:14px;z-index:30}