/* ============================================================
   Focus Planner Kit 2.0 — base
   Palette e impianto grafico presi dal prototipo approvato.
   ============================================================ */
:root{
  --teal-900:#0F4048;
  --teal-700:#1B5E66;
  --teal-500:#3E8E8C;
  --teal-300:#8FBFB5;
  --sage-100:#E3EDE3;
  --sage-50:#F1F7F0;
  --ink:#123238;
  --muted:#6C8A8F;
  --line:#CFE2DC;
  --paper:#FFFFFF;
  --shell:#F6FAF8;
  --gold:#C9A227;
  --esempio:#C0553F;
  --radius:14px;
  --shadow:0 1px 2px rgba(18,50,56,.04), 0 8px 24px rgba(18,50,56,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--shell); color:var(--ink);
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}

/* accesso clienti: finché la sessione non è verificata il planner non
   viene inizializzato, ma il backup resta disponibile in caso di revoca */
body.accesso-da-verificare>header,
body.accesso-da-verificare>.avvisi,
body.accesso-da-verificare>.wrap,
body.accesso-da-verificare>footer,
body.accesso-da-verificare>.wm{display:none}
.accesso-gate{width:min(480px,calc(100% - 32px));margin:8vh auto 32px;padding:32px;
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 55px rgba(18,50,56,.12)}
.accesso-brand{font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--teal-700);margin-bottom:22px}
.accesso-gate h1{font-size:30px;line-height:1.15;margin:0 0 12px;color:var(--ink)}
.accesso-gate>p{font-size:16px;line-height:1.55;color:var(--muted);margin:0 0 22px}
.accesso-gate form{display:grid;gap:10px}
.accesso-gate label{font-size:13px;font-weight:700;color:var(--ink)}
.accesso-gate input{width:100%;min-height:48px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff}
.accesso-gate button{min-height:46px;border:0;border-radius:10px;padding:10px 16px;background:var(--teal-700);color:#fff;font-weight:700;cursor:pointer}
.accesso-gate button.secondario{background:transparent;color:var(--teal-800);border:1px solid var(--line)}
.accesso-gate button:disabled{opacity:.55;cursor:wait}
.accesso-gate .accesso-stato{font-size:14px;min-height:22px;margin:14px 0 0;color:var(--muted)}
@media(max-width:600px){.accesso-gate{margin:24px auto;padding:24px}.accesso-gate h1{font-size:26px}}
:focus-visible{outline:2px solid var(--teal-500);outline-offset:2px}
.hidden{display:none !important}
#intestazione-stampa{display:none}   /* si vede solo in stampa */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}

/* ---------- watermark foglia ---------- */
.wm{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.wm svg{position:absolute;right:-8%;top:50%;transform:translateY(-50%);width:min(900px,70vw);opacity:.055}

/* ---------- header ---------- */
/* env(safe-area-inset-*) vale 0 ovunque tranne che sull'iPhone installato,
   dove tiene l'header sotto la tacca invece che sotto il notch */
header{
  position:sticky;top:0;z-index:20;
  background:var(--teal-700); color:#fff;
  display:flex;align-items:center;gap:14px;
  padding:env(safe-area-inset-top,0px) 20px 0;
  height:calc(60px + env(safe-area-inset-top,0px));
}
.brand{display:flex;align-items:baseline;gap:9px;font-weight:800;letter-spacing:.14em;font-size:13px;
  white-space:nowrap;min-width:0;overflow:hidden;flex-shrink:2}
.corto{display:none}
.brand .two{background:#000;padding:2px 7px;border-radius:4px;letter-spacing:.08em;font-size:11px}
.hspace{flex:1}
.hbtn{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;padding:7px 13px;border-radius:9px;cursor:pointer;font-size:12.5px;font-weight:500;
  transition:.15s;white-space:nowrap;
}
.hbtn:hover{background:rgba(255,255,255,.22)}
/* "Esporta" è la via di fuga quando si cambia dispositivo: deve saltare all'occhio */
.hbtn.primario{background:#fff;border-color:#fff;color:var(--teal-700);font-weight:600}
.hbtn.primario:hover{background:var(--sage-100);border-color:var(--sage-100)}
.saved{font-size:11.5px;opacity:.75;min-width:88px;text-align:right}
.saved.allarme{opacity:1;font-weight:600;color:#FFD9CF}
.menubtn{display:none}

/* ---------- layout ---------- */
.wrap{display:flex;position:relative;min-height:calc(100vh - 60px - env(safe-area-inset-top,0px))}
nav{
  width:262px;flex:0 0 262px;background:var(--paper);
  border-right:1px solid var(--line);padding:20px 0 40px;
  align-self:flex-start;position:sticky;
  top:calc(60px + env(safe-area-inset-top,0px));
  max-height:calc(100vh - 60px - env(safe-area-inset-top,0px));overflow-y:auto;
}
.navnote{
  margin:0 16px 16px;padding:11px 13px;background:var(--sage-50);
  border:1px dashed var(--teal-300);border-radius:10px;
  font-size:11.5px;color:var(--teal-700);line-height:1.45;
}
.navnote b{display:block;font-size:12px;margin-bottom:2px}
.navlink{
  display:block;margin-top:8px;padding:0;background:none;border:0;cursor:pointer;
  font-size:11.5px;font-weight:600;color:var(--teal-700);text-decoration:underline;
  text-underline-offset:2px;text-align:left
}
.navlink:hover{color:var(--teal-900)}
.navgroup{padding:0 16px;margin:18px 0 7px;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
.navitem{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 16px;background:none;border:0;cursor:pointer;
  font-size:13.5px;color:var(--ink);border-left:3px solid transparent;
}
.navitem:hover{background:var(--sage-50)}
.navitem[aria-current="page"]{background:var(--sage-100);border-left-color:var(--teal-700);font-weight:600;color:var(--teal-900)}
.navitem .n{
  font-size:10.5px;font-weight:700;color:var(--teal-500);
  background:var(--sage-100);border-radius:5px;padding:2px 6px;min-width:26px;text-align:center
}
main{flex:1;padding:26px 30px 70px;max-width:1180px;min-width:0}
footer{padding:22px 30px 50px;font-size:12px;color:var(--muted);position:relative;z-index:1}

/* ---------- collegamento al percorso ---------- */
.quadbtn{
  display:inline-flex;align-items:center;gap:7px;max-width:230px;min-width:0;flex-shrink:1;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  color:#fff;padding:7px 12px;border-radius:9px;cursor:pointer;font-size:12.5px;
  transition:.15s
}
.quadbtn:hover{background:rgba(255,255,255,.22)}
.quadbtn .et{opacity:.7;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.quadbtn .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.quadbtn .cv{opacity:.7;font-size:10px}

/* ---------- menu a tendina ---------- */
.tendina{
  position:fixed;z-index:70;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 18px 44px rgba(15,64,72,.22);padding:6px;
  min-width:236px;max-width:min(330px,calc(100vw - 16px));max-height:72vh;overflow-y:auto
}
.tvoce{
  display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;
  padding:9px 12px;cursor:pointer;font-size:13.5px;color:var(--ink);font-family:inherit
}
.tvoce:hover{background:var(--sage-50)}
.tvoce.attiva{background:var(--sage-100);color:var(--teal-900);font-weight:600}
.tvoce .tt{display:block}
.tvoce .tn{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;line-height:1.35}
.tsep{height:1px;background:var(--line);margin:6px 4px}

/* ---------- pannello "come si compila" ---------- */
.guide{
  margin-top:22px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden
}
/* sopra la scheda: chiuso deve occupare una riga sola e non spingere giù niente */
.guide.sopra{
  margin:0 0 18px;box-shadow:none;background:var(--sage-50);border-color:var(--teal-300)
}
.guide.sopra > button{padding:11px 16px;font-size:13.5px}
.guide.sopra > button .ic{width:23px;height:23px;flex-basis:23px;font-size:13px;background:#fff}
.guide.sopra .content{background:var(--paper)}
.guide > button{
  width:100%;display:flex;align-items:center;gap:11px;padding:15px 20px;
  background:none;border:0;cursor:pointer;text-align:left;font-weight:600;color:var(--teal-700);font-size:14.5px
}
.guide > button .ic{
  width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:var(--sage-100);
  color:var(--teal-700);display:grid;place-items:center;font-size:14px
}
.guide > button .chev{margin-left:auto;transition:.2s;color:var(--muted);font-size:12px}
.guide.open > button .chev{transform:rotate(180deg)}
.guide .content{display:none;padding:0 20px 22px;border-top:1px solid var(--line)}
.guide.open .content{display:block}
.guide .content h4{margin:18px 0 7px;font-size:13.5px;color:var(--teal-900)}
.guide .content p,.guide .content li{font-size:13.5px;color:#33565C;margin:0 0 8px}
.guide .content ul{margin:0 0 10px;padding-left:19px}
.quote{background:var(--sage-50);border-left:3px solid var(--teal-500);border-radius:0 9px 9px 0;
  padding:11px 15px;font-size:13px;color:var(--teal-900);margin:12px 0}

/* ---------- finestre di dialogo e schermata di primo accesso ---------- */
/* align-items:flex-start + margin:auto sul box: è l'unica combinazione che su
   schermi bassi non taglia la parte alta della finestra quando è più alta del viewport */
.modale{
  position:fixed;inset:0;z-index:60;background:rgba(15,64,72,.58);
  display:flex;align-items:flex-start;justify-content:center;
  padding:calc(18px + env(safe-area-inset-top,0px)) 18px calc(18px + env(safe-area-inset-bottom,0px));
  overflow-y:auto;-webkit-overflow-scrolling:touch
}
.modale .box{
  background:var(--paper);border-radius:16px;box-shadow:0 24px 60px rgba(15,64,72,.3);
  max-width:560px;width:100%;padding:26px 28px;margin:0;position:relative
}
/* quando ci sta, la finestra sta al centro; quando è più alta, parte dall'alto e si scorre */
@media (min-height:760px){ .modale{align-items:center} }
.modale .box.largo{max-width:640px}
.modale h2{margin:0 0 12px;font-size:20px;line-height:1.25;color:var(--teal-700);font-weight:800}
.modale p{font-size:14.5px;line-height:1.62;color:#2A4A50;margin:0 0 12px}
.modale p:last-of-type{margin-bottom:0}
.modale .azioni{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.mbtn{
  border:1px solid var(--teal-700);background:var(--teal-700);color:#fff;
  border-radius:10px;padding:10px 18px;cursor:pointer;font-size:13.5px;font-weight:600;
  font-family:inherit
}
.mbtn:hover{background:var(--teal-900);border-color:var(--teal-900)}
.mbtn.chiaro{background:#fff;color:var(--teal-700)}
.mbtn.chiaro:hover{background:var(--sage-50)}
.mbtn.pericolo{background:#B4432E;border-color:#B4432E}
.mbtn.pericolo:hover{background:#963725;border-color:#963725}
.mbtn.neutro{background:none;border-color:transparent;color:var(--muted);font-weight:500}
.mbtn.neutro:hover{background:var(--sage-50);color:var(--teal-700)}

/* Passi della schermata di primo accesso.
   ⚠️ Il selettore DEVE restare "> li", figli diretti. Con ".passi li" il
   contatore prendeva anche gli <li> dentro <details class="altridisp">: la lista
   dei dispositivi si mangiava i numeri 3-4-5-6 e l'ultimo passo diventava "7". */
.passi{counter-reset:passo;margin:18px 0 0;padding:0;list-style:none}
.passi > li{
  counter-increment:passo;position:relative;padding:0 0 16px 42px;
  font-size:14.5px;line-height:1.6;color:#2A4A50
}
.passi > li::before{
  content:counter(passo);position:absolute;left:0;top:-1px;
  width:28px;height:28px;border-radius:9px;background:var(--sage-100);color:var(--teal-700);
  display:grid;place-items:center;font-weight:700;font-size:13px
}
.passi li b{color:var(--teal-900)}
.istruzioni{
  background:var(--sage-50);border:1px solid var(--line);border-radius:10px;
  padding:10px 13px;margin-top:8px;font-size:13.5px;color:var(--teal-900)
}
.istruzioni .via{font-weight:600}
.altridisp{margin-top:10px;font-size:12.5px}
.altridisp summary{cursor:pointer;color:var(--muted)}
.altridisp ul{margin:8px 0 0;padding-left:18px}
.altridisp li{font-size:12.5px;color:#33565C;margin-bottom:5px}

/* barra dei promemoria, sotto l'header */
.avvisi{position:relative;z-index:2}
.avviso{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--sage-100);border-bottom:1px solid var(--line);
  padding:10px 20px;font-size:13px;color:var(--teal-900)
}
.avviso.annulla{background:#FDF4F1;border-bottom-color:#EBC7BC}
.avviso .testo{flex:1;min-width:200px}
.avviso .abtn{
  border:1px solid var(--teal-700);background:var(--teal-700);color:#fff;border-radius:8px;
  padding:6px 13px;cursor:pointer;font-size:12.5px;font-weight:600;font-family:inherit;white-space:nowrap
}
.avviso .abtn.chiaro{background:#fff;color:var(--teal-700)}
.avviso .abtn.neutro{background:none;border-color:transparent;color:var(--muted);font-weight:500}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  main{padding:22px 20px 60px}
  nav{width:224px;flex-basis:224px}
}
@media(max-width:768px){
  .menubtn{display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;padding:0;font-size:17px}
  .brand{font-size:11.5px;letter-spacing:.1em}
  header{gap:8px;padding:0 10px}
  .hbtn.opt{display:none}
  .saved{min-width:0}
  /* nell'header di un telefono ci stanno solo le cose essenziali */
  .lungo{display:none}
  .corto{display:inline}
  .quadbtn{max-width:118px;padding:7px 9px}
  .quadbtn .et{display:none}
  .hbtn.primario{padding:7px 11px}
  nav{
    position:fixed;top:calc(60px + env(safe-area-inset-top,0px));left:0;bottom:0;z-index:19;
    width:min(300px,86vw);flex-basis:auto;
    max-height:none;transform:translateX(-102%);transition:transform .22s ease;
    box-shadow:0 10px 40px rgba(18,50,56,.18)
  }
  nav.open{transform:translateX(0)}
  .navscrim{position:fixed;inset:calc(60px + env(safe-area-inset-top,0px)) 0 0;background:rgba(18,50,56,.32);z-index:18}
  main{padding:18px 14px calc(60px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:480px){
  body{font-size:14.5px}
  main{padding:14px 11px 56px}
}

/* ============================================================
   Percorso temporale, Libreria e onboarding personalizzato
   ============================================================ */

/* ---------- onboarding approvato: quiz a sinistra, anteprima a destra ---------- */
body.onboarding-aperto{overflow:hidden}
.onboarding-tagline{display:none;margin-left:auto;font-size:14px;letter-spacing:.01em;color:rgba(255,255,255,.9)}
body.onboarding-aperto header .menubtn,
body.onboarding-aperto header .quadbtn,
body.onboarding-aperto header .hspace,
body.onboarding-aperto header #btnExport,
body.onboarding-aperto header #btnImport,
body.onboarding-aperto header #btnReset,
body.onboarding-aperto header .saved{display:none}
body.onboarding-aperto header .onboarding-tagline{display:block}
/* La tagline è decorativa e su telefono non ci sta: con margin-left:auto rubava
   lo spazio al marchio, che avendo overflow:hidden finiva tagliato a metà parola
   ("FOCUS PLANNER KI") perdendo anche il badge 2.0.
   ⚠️ Deve stare QUI, dopo la regola display:block: ha la stessa specificità, e le
   media query non ne aggiungono — se sta più in alto nel file, non vince. */
@media(max-width:768px){
  body.onboarding-aperto header .onboarding-tagline{display:none}
  body.onboarding-aperto header .brand{flex-shrink:0}
}
.onboarding{
  position:fixed;z-index:55;inset:calc(60px + env(safe-area-inset-top,0px)) 0 0;
  overflow-y:auto;background:var(--shell);padding:56px 48px 64px
}
.onboarding-inner{
  width:min(1340px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 420px;
  gap:28px;position:relative
}
.onboarding-main,.onboarding-preview{
  background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:38px 40px
}
.onboarding-preview{background:var(--sage-50);padding:38px 32px}
.onboarding-step{
  display:inline-block;background:var(--sage-100);color:var(--teal-700);border-radius:7px;
  padding:4px 10px;font-size:12px;font-weight:700;margin-bottom:12px
}
.onboarding-progress{height:3px;background:#E9F0ED;margin:0 0 28px;overflow:hidden}
.onboarding-progress span{display:block;height:100%;background:var(--teal-700);transition:width .2s ease}
.onboarding-main h1{font-size:36px;line-height:1.16;color:var(--teal-900);margin:0 0 12px;max-width:720px}
.onboarding-main>p{font-size:16px;color:var(--muted);margin:0 0 26px;max-width:650px}
.onboarding-options{display:grid;gap:10px}
.onboarding-option{
  display:flex;align-items:center;gap:14px;width:100%;min-height:58px;text-align:left;
  border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px 16px;cursor:pointer
}
.onboarding-option:hover{background:var(--sage-50);border-color:var(--teal-300)}
.onboarding-option.scelta{background:var(--sage-50);border-color:var(--teal-500);color:var(--teal-900)}
.onboarding-option .radio{width:20px;height:20px;border:2px solid #AFC5C1;border-radius:50%;flex:0 0 20px}
.onboarding-option.scelta .radio{border:6px solid var(--teal-700)}
.onboarding-option b{font-size:15px;font-weight:600}
.onboarding-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:28px}
.onboarding-next,.onboarding-enter{
  min-width:220px;border:1px solid var(--teal-700);background:var(--teal-700);color:#fff;
  border-radius:10px;padding:12px 18px;font-weight:700;cursor:pointer
}
.onboarding-next:hover,.onboarding-enter:hover{background:var(--teal-900);border-color:var(--teal-900)}
.onboarding-next:disabled{opacity:.45;cursor:not-allowed}
.onboarding-back,.onboarding-close{
  border:0;background:none;color:var(--muted);font-weight:600;cursor:pointer;padding:10px
}
.onboarding-close{position:absolute;right:14px;top:10px;z-index:2;font-size:24px;line-height:1}
.onboarding-preview h2{font-size:23px;line-height:1.2;color:var(--teal-700);margin:0 0 8px}
.onboarding-preview>p{font-size:14.5px;color:var(--muted);margin:0 0 24px}
.onboarding-preview ol{counter-reset:preview;list-style:none;margin:0;padding:0}
.onboarding-preview li{
  counter-increment:preview;display:grid;grid-template-columns:30px 1fr;gap:12px;position:relative;
  padding:0 0 14px
}
.onboarding-preview li:not(:last-child)::after{
  content:"";position:absolute;left:14px;top:29px;bottom:1px;border-left:1px solid var(--teal-300)
}
.preview-num{
  width:30px;height:30px;border-radius:50%;background:var(--teal-700);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700;position:relative;z-index:1
}
.preview-num::after{content:counter(preview)}
.preview-card{
  min-height:70px;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px
}
.preview-icon{
  width:46px;height:46px;display:grid;place-items:center;border-radius:8px;
  color:var(--teal-700);background:var(--sage-100)
}
.preview-icon svg{width:22px;height:22px;stroke-width:1.8}
.onboarding-preview li b{display:block;color:var(--teal-900);font-size:14px;margin:3px 0 2px}
.onboarding-preview li small{display:block;color:var(--muted);font-size:12px;line-height:1.4}
.preview-note{border-top:1px solid var(--line);padding-top:18px;color:var(--muted);font-size:13px}
.onboarding-inner.risultato .onboarding-main{display:flex;flex-direction:column;justify-content:center}
.onboarding-risultato-lista{display:grid;gap:8px;margin:6px 0 26px}
.onboarding-risultato-lista div{display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line);padding:9px 0}
.onboarding-risultato-lista span{color:var(--teal-700);font-weight:800;min-width:20px}
.onboarding-enter{align-self:flex-start}
.onboarding-preview.protezione{align-self:stretch}
/* passo 0: installazione. Una sola colonna, larga come la card del quiz. */
.onboarding-inner.passo-installa{width:min(892px,100%);grid-template-columns:minmax(0,1fr)}
.passo-installa .onboarding-actions{justify-content:flex-start}
.installa-scegli{font-weight:600;color:var(--teal-900);margin:0 0 12px}
.installa-scelte{display:grid;gap:10px}
.installa-scelta{width:100%}
.installa-pannello[hidden]{display:none}
.installa-pannello{
  border:1px solid var(--teal-300);border-top:0;border-radius:0 0 12px 12px;
  background:var(--sage-50);padding:18px 18px 14px;margin:-6px 0 0
}
.installa-scelta.scelta{border-radius:12px 12px 0 0}
.installa-ora{margin:0 0 16px}
.installa-passi{counter-reset:passo;list-style:none;margin:0;padding:0}
.installa-passi li{
  counter-increment:passo;display:grid;grid-template-columns:28px minmax(0,1fr);
  gap:12px;align-items:start;padding:0 0 14px;font-size:14.5px;color:var(--ink);line-height:1.5
}
.installa-passi li:last-child{padding-bottom:0}
.installa-passi .num{
  width:28px;height:28px;border-radius:50%;background:var(--teal-700);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:700
}
.installa-passi .num::after{content:counter(passo)}
.icona-condividi{vertical-align:-6px;margin:0 2px;color:var(--teal-700)}
.installa-nota{margin-top:14px}
.installa-ostacolo{margin:0 0 18px;font-size:14.5px;line-height:1.5}
.installa-fatto h1{margin-top:6px}

/* ---------- pagine di sistema ---------- */
.system-hero{border-bottom:1px solid var(--line);padding:2px 0 24px;margin-bottom:12px}
.system-hero>span,.calendar-head span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-500);font-weight:700}
.system-hero h2{font-size:27px;line-height:1.2;margin:5px 0 8px;color:var(--teal-900)}
.system-hero p{font-size:15px;color:var(--muted);margin:0;max-width:700px}
.system-empty{padding:42px 28px;text-align:center;background:var(--sage-50);border:1px solid var(--line);border-radius:14px}
.system-empty h2{font-size:22px;color:var(--teal-900);margin:0 0 8px}
.system-empty p{font-size:15px;color:var(--muted);margin:0 auto 20px;max-width:520px}
.system-empty button,.path-actions button,.library-actions button,.path-footer button,.text-action{
  border:1px solid var(--teal-700);background:var(--teal-700);color:#fff;border-radius:9px;
  padding:8px 14px;font-weight:600;cursor:pointer
}
.system-empty button:hover,.path-actions button:hover,.library-actions button:hover{background:var(--teal-900)}
.path-list{margin-top:8px}
.path-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line)}
.path-index{width:30px;height:30px;border-radius:50%;background:var(--teal-700);color:#fff;display:grid;place-items:center;font-weight:700;font-size:12px}
.path-copy h3{font-size:16px;color:var(--teal-900);margin:0 0 2px}
.path-copy p{font-size:13.5px;color:var(--muted);margin:0}
.path-copy small{display:block;font-size:11.5px;color:var(--teal-500);margin-top:5px}
.path-actions,.library-actions,.path-footer{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.path-actions button.secondario,.library-actions button.secondario,.path-footer button.secondario{
  background:#fff;color:var(--teal-700);border-color:var(--line)
}
.path-actions button.secondario:hover,.library-actions button.secondario:hover,.path-footer button.secondario:hover{background:var(--sage-50)}
.path-footer{justify-content:flex-start;margin-top:24px}
.text-action{margin-top:18px;background:none;color:var(--teal-700);border-color:transparent;padding-left:0}
.calendar-head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;text-align:center;margin-bottom:24px}
.calendar-head h2{margin:3px 0 0;color:var(--teal-900);font-size:25px}
.calendar-head button{width:40px;height:40px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--teal-700);font-size:20px;cursor:pointer}
.calendar-head button:hover{background:var(--sage-50)}
.month-list{border-top:1px solid var(--line)}
.month-item{display:grid;width:100%;grid-template-columns:170px minmax(0,1fr) 130px;gap:16px;align-items:center;text-align:left;padding:16px 4px;border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer}
.month-item:hover{background:var(--sage-50)}
.month-type{font-size:12px;color:var(--teal-500);font-weight:700}
.month-item b{font-size:14.5px;color:var(--teal-900)}
.month-item small{font-size:11.5px;color:var(--muted);text-align:right}
.library-intro{border-bottom:1px solid var(--line);padding-bottom:20px}
.library-intro h2{font-size:27px;color:var(--teal-900);margin:0 0 8px}
.library-intro p{font-size:15px;color:var(--muted);margin:0;max-width:720px}
.library-grid{margin-top:4px}
.library-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:15px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line)}
.library-num{font-size:11px;font-weight:800;color:var(--teal-500);background:var(--sage-100);border-radius:6px;padding:4px 6px;text-align:center}
.library-copy h3{margin:0 0 3px;font-size:15.5px;color:var(--teal-900)}
.library-copy p{margin:0;font-size:13.5px;color:var(--muted)}
.library-copy small{display:block;margin-top:4px;font-size:11.5px;color:var(--teal-500)}

/* ---------- controllo della singola istanza ---------- */
.instancebar{display:flex;align-items:center;gap:18px;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 0 18px;margin:0 0 20px}
.instance-title{min-width:0;display:grid}
.instance-title>span{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--teal-500);font-weight:700}
.instance-title>b{font-size:15px;color:var(--teal-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.instance-title>small{font-size:11.5px;color:var(--muted)}
.instance-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.instance-actions button{border:1px solid var(--teal-700);background:var(--teal-700);color:#fff;border-radius:8px;padding:7px 10px;font-size:12px;font-weight:600;cursor:pointer}
.instance-actions button.secondario{background:#fff;color:var(--teal-700);border-color:var(--line)}
.instance-actions button:disabled{opacity:.35;cursor:not-allowed}
.instance-count{font-size:11.5px;color:var(--muted);min-width:42px;text-align:center}
.dlg-field{display:grid;gap:5px;font-size:12px;font-weight:700;color:var(--teal-900);margin:14px 0}
.dlg-field input{width:100%;min-height:42px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:#fff}

@media(max-width:980px){
  .onboarding{padding:30px 22px 48px}
  .onboarding-inner{grid-template-columns:1fr 340px;gap:18px}
  .onboarding-main,.onboarding-preview{padding:30px 26px}
  .onboarding-main h1{font-size:30px}
}
@media(max-width:768px){
  .onboarding{padding:18px 12px 36px}
  .onboarding-inner{grid-template-columns:1fr}
  .onboarding-main,.onboarding-preview{padding:24px 20px;border-radius:14px}
  .onboarding-main h1{font-size:27px}
  .onboarding-preview{order:2}
  .instancebar{align-items:flex-start;flex-direction:column}
  .instance-actions{justify-content:flex-start;width:100%}
  .path-row,.library-item{grid-template-columns:34px minmax(0,1fr)}
  .path-actions,.library-actions{grid-column:2;justify-content:flex-start}
  .month-item{grid-template-columns:110px minmax(0,1fr)}
  .month-item small{grid-column:2;text-align:left}
}
@media(max-width:480px){
  .onboarding-main,.onboarding-preview{padding:22px 16px}
  .onboarding-main h1{font-size:25px}
  .onboarding-next,.onboarding-enter{min-width:0;width:100%}
  .onboarding-actions{align-items:stretch;flex-direction:column-reverse}
  .onboarding-actions>span{display:none}
  .onboarding-back{text-align:left}
  .path-row,.library-item{padding:15px 0}
  .instance-actions button{flex:1 1 auto}
}