/* ============================================================
   LezIA — lezione.css
   Stile condiviso di TUTTE le lezioni interattive.
   ============================================================ */

/* ============================================================
   1. VARIABILI
   ============================================================ */
:root{
  --navy:#142850; --navy-dark:#0c1a35; --blue:#2E6FF2; --blue-light:#E8F0FE;
  --teal:#17B6A7; --teal-light:#E3F8F5; --amber:#F2A93B; --amber-light:#FEF2E0;
  --violet:#7C5CFC; --violet-light:#F1ECFE; --red:#E2534D; --red-light:#FBEAEA;
  --green:#2FAE66; --green-light:#E5F7ED; --pink:#D6479B; --pink-light:#FBEAF4;
  --cyan:#1E9FBF; --cyan-light:#E4F5FA; --orange:#E8792E; --orange-light:#FCEBDE;
  --bg:#F7F9FC; --bg-alt:#EEF2FA; --surface:#FFF; --border:#E1E7F0;
  --ink:#1B2733; --ink-soft:#566072;
  --font-body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-heading:'Sora',var(--font-body);
  --font-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}

/* ============================================================
   2. BASE
   ============================================================ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--ink);line-height:1.65;font-size:16px;}
a{color:var(--blue);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--font-heading);color:var(--navy);line-height:1.25;}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.5rem;}

/* ============================================================
   3. LAYOUT PAGINA
   ============================================================ */
.back-to-lezioni{padding:1.4rem 1.5rem .4rem;max-width:1180px;margin:0 auto;}
.back-to-lezioni a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:1.05rem;font-weight:500;color:var(--blue);
  text-decoration:none;transition:color .15s ease,transform .15s ease;
}
.back-to-lezioni a:hover{color:#1e5bd6;text-decoration:none;transform:translateX(-3px);}

.page-layout{
  display:grid;grid-template-columns:260px minmax(0,1fr);
  gap:2.5rem;padding:1rem 1.5rem 4rem;align-items:start;
  max-width:1180px;margin:0 auto;
}
@media (max-width:960px){
  .page-layout{grid-template-columns:1fr;gap:1.5rem;padding:1rem 1rem 3rem;}
}

/* ============================================================
   4. CONTENUTO PRINCIPALE
   ============================================================ */
.content-main{min-width:0;}
.lesson-header{margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border);}
.lesson-header h1{
  font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:800;color:var(--navy);
  margin:0 0 1rem;line-height:1.15;letter-spacing:-.02em;
}
.lesson-header h1 .accent{
  background:linear-gradient(90deg,var(--blue),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lesson-subtitle{font-size:1.05rem;color:var(--ink-soft);margin:0 0 1.4rem;line-height:1.6;max-width:720px;}
.lesson-features{display:flex;flex-wrap:wrap;gap:.8rem;}
.lesson-feature{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.85rem;font-weight:600;color:var(--blue);
  background:var(--blue-light);padding:.4rem .9rem;border-radius:999px;
}
.content-main>section{scroll-margin-top:1.5rem;margin-bottom:3.5rem;}
.section-title{
  display:flex;align-items:center;gap:.8rem;
  font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;color:var(--navy);
  margin:0 0 1.4rem;padding-bottom:1rem;
  border-bottom:2px solid var(--border);line-height:1.2;
}
.section-title-num{
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  color:#fff;font-family:var(--font-heading);font-size:1.1rem;font-weight:800;
}
.section-subtitle{font-size:1.15rem;font-weight:700;color:var(--navy);margin:2.2rem 0 .9rem;line-height:1.3;}
.subtitle-2{font-size:1rem;font-weight:700;color:var(--navy);margin:1.6rem 0 .7rem;}
p{margin:0 0 1.1em;}
.content-main ul,.content-main ol{margin:0 0 1.2rem;padding-left:1.5rem;}
.content-main li{margin-bottom:.4rem;line-height:1.65;}
.content-main strong{color:var(--navy);font-weight:700;}

/* Badge */
.badge-row{display:flex;gap:.35rem;flex-wrap:wrap;margin-bottom:1rem;}
.badge{
  display:inline-flex;align-self:flex-start;
  font-size:.66rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:.25rem .65rem;border-radius:999px;
  color:#fff;background:var(--cat-color,var(--blue));
}

/* ============================================================
   5. BOX (info, tip, warning, danger, example, dialogo)
   ============================================================ */
.box{
  border-radius:14px;padding:1.2rem 1.4rem;margin:1.4rem 0;
  font-size:.95rem;line-height:1.6;
  display:flex;gap:1rem;align-items:flex-start;
}
.box-icon{
  flex-shrink:0;width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;font-weight:700;
}
.box-body{flex:1;min-width:0;}
.box-body p:last-child{margin-bottom:0;}

.box-info{background:var(--blue-light);border-left:4px solid var(--blue);color:#1e3a6e;}
.box-info .box-icon{background:#fff;color:var(--blue);}
.box-info strong{color:#1b4fc7;}

.box-tip{background:var(--teal-light);border-left:4px solid var(--teal);color:#0d6e63;}
.box-tip .box-icon{background:#fff;color:var(--teal);}
.box-tip strong{color:#0d8f82;}

.box-warning{background:var(--amber-light);border-left:4px solid var(--amber);color:#7a4c0a;}
.box-warning .box-icon{background:#fff;color:var(--amber);}
.box-warning strong{color:#a86414;}

.box-danger{background:var(--red-light);border-left:4px solid var(--red);color:#8a2320;}
.box-danger .box-icon{background:#fff;color:var(--red);}
.box-danger strong{color:#b23a2e;}

.box-example{background:var(--violet-light);border-left:4px solid var(--violet);color:#3d2a9e;}
.box-example .box-icon{background:#fff;color:var(--violet);}
.box-example strong{color:#5b3ee0;}

/* Variante dialogo (usata per dialoghi/chat) */
.content-main .box-dialogo{
  border:2px dashed var(--violet);
  background:var(--violet-light);
  border-radius:14px;padding:1.5rem;margin:1.5rem 0;line-height:1.8;
}

/* ============================================================
   6. CODE BLOCK
   ============================================================ */
.code-block{
  background:var(--navy-dark);color:#dfe8ff;border-radius:12px;
  margin:1.4rem 0;overflow:hidden;
  box-shadow:0 8px 24px -12px rgba(20,40,80,.35);
  font-family:var(--font-mono);font-size:.85rem;line-height:1.65;
}
.code-block-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem 1.1rem;background:rgba(255,255,255,.04);
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:.75rem;font-weight:600;color:#8896ae;letter-spacing:.03em;
}
.code-block-bar .dots{display:flex;gap:.35rem;}
.code-block-bar .dot{width:10px;height:10px;border-radius:50%;}
.dot-red{background:#ff5f57;}
.dot-yellow{background:#febc2e;}
.dot-green{background:#28c840;}
.code-block pre{margin:0;padding:1.1rem 1.3rem;overflow-x:auto;white-space:pre;}
.code-block .tag{color:#f07178;}
.code-block .attr{color:#c792ea;}
.code-block .val{color:#c3e88d;}
.code-block .com{color:#697098;font-style:italic;}
.code-block .txt{color:#dfe8ff;}
.code-block .kw{color:#82aaff;}
.code-block .fn{color:#82aaff;}
.code-block .str{color:#c3e88d;}
.code-block .num{color:#f78c6c;}
.code-block .type{color:#ffcb6b;}

/* ============================================================
   7. TABLE
   ============================================================ */
.table-wrap{
  overflow-x:auto;margin:1.4rem 0;border-radius:12px;
  border:1px solid var(--border);background:#fff;
  box-shadow:0 2px 10px rgba(20,40,80,.04);
}
table.data-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px;}
.data-table th,.data-table td{
  text-align:left;padding:.75rem 1rem;
  border-bottom:1px solid var(--border);vertical-align:top;
}
.data-table th{
  background:var(--bg-alt);color:var(--navy);
  font-family:var(--font-heading);font-weight:700;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;
}
.data-table tr:last-child td{border-bottom:none;}
.data-table code{
  font-family:var(--font-mono);background:var(--bg-alt);
  color:#c0434f;padding:.1em .4em;border-radius:4px;font-size:.85em;
}

/* ============================================================
   8. XML TREE
   ============================================================ */
.xml-tree{
  background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:1.6rem;margin:1.6rem 0;
  box-shadow:0 4px 16px rgba(20,40,80,.05);
  overflow-x:auto;font-family:var(--font-mono);font-size:.85rem;line-height:1.8;
}
.xml-tree-title{
  font-family:var(--font-heading);font-size:.82rem;font-weight:700;
  color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:1.2rem;display:flex;align-items:center;gap:.5rem;
}
.xml-tree-title::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--blue);}
.xml-node{color:var(--navy);font-weight:700;}
.xml-node-tag{color:var(--blue);}
.xml-attr-name{color:var(--violet);font-weight:600;}
.xml-attr-val{color:var(--teal);}
.xml-text{color:var(--ink-soft);font-style:italic;font-weight:400;}
.xml-tree-line{padding-left:.5rem;}
.xml-tree-line.child{padding-left:1.8rem;position:relative;}
.xml-tree-line.child::before{content:"└─";position:absolute;left:0;color:#B8C2D9;}
.xml-tree-line.child:not(:last-child)::before{content:"├─";}
.xml-tree-line.grandchild{padding-left:3.2rem;position:relative;}
.xml-tree-line.grandchild::before{content:"└─";position:absolute;left:1.4rem;color:#B8C2D9;}

/* ============================================================
   9. ACCORDION
   Nota: i selettori usano .content-main come prefisso per battere
   la regola generica ".content-main button" (sezione 17), che
   altrimenti colora di blu l'intera testata.
   ============================================================ */
.accordion{
  position:relative;
  background:var(--surface);border:1px solid var(--border);
  border-radius:14px;margin:.85rem 0;overflow:hidden;
  box-shadow:0 1px 2px rgba(20,40,80,.04);
  transition:border-color .2s,box-shadow .25s,transform .2s;
}
.accordion::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--border);transition:background .2s;
}
.accordion:hover{border-color:#C9D5EA;box-shadow:0 4px 14px rgba(20,40,80,.07);}
.accordion:hover::before{background:var(--blue);}
.accordion.open{
  border-color:#CFC3FB;box-shadow:0 10px 28px rgba(124,92,252,.12);
}
.accordion.open::before{background:linear-gradient(180deg,var(--violet),var(--blue));}

.content-main .accordion-head,
.accordion-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  width:100%;margin:0;border:none;border-radius:0;text-align:left;
  background:transparent;color:var(--ink);
  padding:1.05rem 1.3rem 1.05rem 1.5rem;
  font-family:inherit;font-size:1rem;font-weight:inherit;
  cursor:pointer;transition:background .2s;
}
.content-main .accordion-head:hover,
.accordion-head:hover{background:var(--bg);}
.content-main .accordion-head:active{transform:none;}
.accordion.open .accordion-head{
  background:linear-gradient(90deg,var(--violet-light),rgba(255,255,255,0) 75%);
}
.content-main .accordion-head:focus-visible{
  outline:3px solid var(--blue);outline-offset:-3px;
}

.accordion-title{
  font-family:var(--font-heading);font-weight:700;font-size:1.02rem;
  line-height:1.3;color:var(--navy);
  display:flex;align-items:center;gap:.8rem;
}
.accordion-title .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:var(--violet-light);color:var(--violet);
  font-family:var(--font-mono);font-size:.82rem;font-weight:700;
  transition:background .2s,color .2s,transform .2s;
}
.accordion:hover .accordion-title .num{transform:scale(1.06);}
.accordion.open .accordion-title .num{background:var(--violet);color:#fff;}
.accordion-sub{
  display:block;font-family:var(--font-body);
  font-size:.84rem;color:var(--ink-soft);font-weight:500;
  margin-top:.2rem;line-height:1.45;
}
.accordion-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:var(--bg-alt);color:var(--ink-soft);
  font-size:1.35rem;font-weight:400;line-height:1;
  transition:transform .3s cubic-bezier(.4,0,.2,1),background .2s,color .2s;
}
.accordion:hover .accordion-toggle{background:var(--blue-light);color:var(--blue);}
.accordion.open .accordion-toggle{
  transform:rotate(135deg);background:var(--violet);color:#fff;
}
.accordion-body{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.accordion-inner{
  margin:0 1.3rem 0 1.5rem;padding:1rem 0 1.4rem;
  border-top:1px dashed var(--border);
  font-size:.95rem;line-height:1.7;
}
.accordion-inner > :first-child{margin-top:0;}
.accordion-inner > :last-child{margin-bottom:0;}

@media (max-width:600px){
  .content-main .accordion-head{padding:.9rem 1rem .9rem 1.2rem;gap:.7rem;}
  .accordion-title{font-size:.96rem;gap:.65rem;}
  .accordion-inner{margin:0 1rem 0 1.2rem;}
}
@media (prefers-reduced-motion:reduce){
  .accordion,.accordion-body,.accordion-toggle,.accordion-title .num{transition:none;}
}

/* ============================================================
   10. ESERCIZI
   ============================================================ */
.exercise-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:1.6rem 1.8rem;margin:1.4rem 0;
  box-shadow:0 4px 16px rgba(20,40,80,.05);
  position:relative;overflow:hidden;
}
.exercise-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--blue),var(--violet));
}
.exercise-num{
  display:inline-block;font-family:var(--font-mono);
  font-size:.72rem;font-weight:700;letter-spacing:.08em;
  color:var(--blue);text-transform:uppercase;margin-bottom:.6rem;
}
.exercise-card h3{margin:0 0 1rem;font-size:1.05rem;color:var(--navy);}
.exercise-card p{font-size:.95rem;}
.solution{
  background:var(--bg-alt);border:1px solid var(--border);
  border-radius:10px;padding:.9rem 1.2rem;margin-top:1.2rem;
}
.solution summary{
  cursor:pointer;font-weight:700;color:var(--navy);
  font-size:.92rem;list-style:none;display:flex;align-items:center;gap:.5rem;
}
.solution summary::-webkit-details-marker{display:none;}
.solution summary::before{
  content:"▸";color:var(--blue);font-size:1rem;
  transition:transform .2s;display:inline-block;
}
.solution[open] summary::before{transform:rotate(90deg);}
.solution-content{
  margin-top:1rem;padding-top:1rem;
  border-top:1px solid var(--border);
  font-size:.9rem;line-height:1.6;
}

/* ============================================================
   11. FASI (phases)
   ============================================================ */
.phases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1.6rem 0;}
@media (max-width:800px){.phases-grid{grid-template-columns:1fr;}}
.phase-card{
  background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:1.5rem 1.4rem 1.4rem;position:relative;overflow:hidden;
  box-shadow:0 4px 16px rgba(20,40,80,.05);
  transition:transform .2s,box-shadow .2s;
}
.phase-card:hover{transform:translateY(-4px);box-shadow:0 18px 36px -16px rgba(20,40,80,.2);}
.phase-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:var(--phase-color,var(--blue));
}
.phase-num{
  font-family:var(--font-mono);font-size:2rem;font-weight:700;
  color:color-mix(in srgb,var(--phase-color,var(--blue)) 20%,#fff);
  line-height:1;display:block;margin-bottom:.4rem;
}
.phase-card h3{margin:0 0 .5rem;font-size:1.1rem;color:var(--phase-color,var(--navy));}
.phase-card p{font-size:.88rem;color:var(--ink-soft);line-height:1.55;margin:0 0 .8rem;}
.phase-meta{
  display:flex;flex-direction:column;gap:.35rem;
  font-size:.78rem;border-top:1px solid var(--border);padding-top:.8rem;
}
.phase-meta-row{display:flex;justify-content:space-between;gap:.6rem;}
.phase-meta-label{color:var(--ink-soft);font-weight:600;}
.phase-meta-value{color:var(--navy);font-weight:700;text-align:right;}

/* ============================================================
   12. FLOW
   ============================================================ */
.flow{
  display:flex;align-items:stretch;gap:0;margin:2rem 0;
  background:#fff;border:1px solid var(--border);border-radius:16px;
  overflow:hidden;box-shadow:0 4px 16px rgba(20,40,80,.05);
}
@media (max-width:720px){.flow{flex-direction:column;}}
.flow-step{
  flex:1;padding:1.6rem 1.4rem;position:relative;
  display:flex;flex-direction:column;gap:.5rem;
  border-right:1px solid var(--border);
}
.flow-step:last-child{border-right:none;}
@media (max-width:720px){
  .flow-step{border-right:none;border-bottom:1px solid var(--border);}
  .flow-step:last-child{border-bottom:none;}
}
.flow-step-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;
  background:var(--flow-color,var(--blue));color:#fff;
  font-family:var(--font-heading);font-weight:800;font-size:.95rem;
  margin-bottom:.3rem;
}
.flow-step h4{margin:0;font-size:1rem;color:var(--navy);}
.flow-step p{margin:0;font-size:.82rem;color:var(--ink-soft);line-height:1.5;}
.flow-arrow{
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);font-size:1.4rem;flex-shrink:0;
  padding:0 .3rem;background:var(--bg-alt);
}
@media (max-width:720px){.flow-arrow{transform:rotate(90deg);padding:.3rem 0;}}

/* ============================================================
   13. RECAP
   ============================================================ */
.recap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.4rem 0;}
@media (max-width:800px){.recap-grid{grid-template-columns:1fr;}}
.recap-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.1rem 1.2rem;}
.recap-item h4{margin:0 0 .5rem;font-size:.92rem;color:var(--navy);display:flex;align-items:center;gap:.4rem;}
.recap-item p{margin:0;font-size:.85rem;color:var(--ink-soft);}
.recap-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0;}

/* ============================================================
   14. CHECKLIST
   ============================================================ */
.checklist{
  display:flex;flex-direction:column;gap:.7rem;margin:1.2rem 0;
  background:var(--bg-alt);border-radius:12px;padding:1.2rem 1.4rem;
}
.check-item{
  display:flex;align-items:flex-start;gap:.7rem;
  cursor:pointer;user-select:none;font-size:.92rem;line-height:1.55;
}
.check-box{
  flex-shrink:0;width:20px;height:20px;
  border:2px solid var(--blue);border-radius:5px;
  margin-top:.15rem;position:relative;background:#fff;
  transition:background .15s,border-color .15s;
}
.check-item.checked .check-box{background:var(--green);border-color:var(--green);}
.check-box::after{
  content:"";position:absolute;display:none;
  left:5px;top:1px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.check-item.checked .check-box::after{display:block;}
.check-text{flex:1;color:var(--ink);}
.check-item.checked .check-text{text-decoration:line-through;opacity:.65;}

/* ============================================================
   15. DEMO BOX
   ============================================================ */
.demo-box{
  background:linear-gradient(135deg,#F5F8FF 0%,#EEF2FF 100%);
  border:1px solid var(--border);border-left:4px solid var(--blue);
  border-radius:14px;padding:1.4rem 1.6rem;margin:1.4rem 0;
}
.demo-box-title{
  font-family:var(--font-heading);font-size:.95rem;font-weight:800;
  color:var(--blue);text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem;
}
.demo-box-title::before{content:"▶";font-size:.8rem;}
.demo-box p{margin:0 0 .8rem;font-size:.92rem;}
.demo-box p:last-child{margin-bottom:0;}

/* ============================================================
   16. CONFRONTO 2 COLONNE
   ============================================================ */
.compare-2col{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0;}
@media (max-width:720px){.compare-2col{grid-template-columns:1fr;}}
.compare-col{
  background:#fff;border:1px solid var(--border);border-radius:12px;
  padding:1.1rem 1.2rem;box-shadow:0 2px 8px rgba(20,40,80,.04);
}
.compare-col h4{margin:0 0 .6rem;font-size:.95rem;color:var(--navy);display:flex;align-items:center;gap:.5rem;}
.compare-col h4 .pill-mini{
  display:inline-block;font-size:.7rem;font-weight:700;
  padding:.15rem .5rem;border-radius:5px;
  color:#fff;background:var(--c-color,var(--blue));
}
.compare-col p{margin:0 0 .6rem;font-size:.86rem;color:var(--ink-soft);}
.compare-col p:last-child{margin:0;}

/* ============================================================
   17. FORM / INPUT / BUTTON
   ============================================================ */
.content-main input[type="text"],
.content-main input[type="number"],
.content-main input[type="email"],
.content-main select,
.content-main textarea{
  font-family:inherit;font-size:.95rem;
  padding:.6rem .9rem;border:2px solid var(--border);
  border-radius:8px;background:var(--surface);color:var(--ink);
  margin-right:.5rem;outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.content-main input[type="text"]:focus,
.content-main input[type="number"]:focus,
.content-main input[type="email"]:focus,
.content-main select:focus,
.content-main textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-light);
}
.content-main button{
  font-family:inherit;font-size:.9rem;font-weight:700;
  padding:.6rem 1.4rem;border:none;border-radius:8px;
  background:var(--blue);color:#fff;cursor:pointer;
  transition:background .2s,transform .1s;
}
.content-main button:hover{background:#1e5bd6;}
.content-main button:active{transform:scale(.97);}

/* ============================================================
   18. GAME CARD
   ============================================================ */
.content-main .game-card,
.content-main .exercise-card{
  margin-bottom:2rem;padding-bottom:2rem;
  border-bottom:1px solid var(--border);
}
.content-main .game-card p,
.content-main .exercise-card p{margin-bottom:1rem;}

/* ============================================================
   19. FOOTER
   ============================================================ */
.site-footer{
  background:var(--navy-dark);color:rgba(255,255,255,.7);
  padding:3rem 1.5rem 3.5rem;text-align:center;
  font-size:.85rem;margin-top:2rem;
}
.site-footer .wrap{max-width:900px;margin:0 auto;text-align:center;}
.site-footer a{color:rgba(255,255,255,.85);}
.site-footer .fine-print{margin-top:.4rem;font-size:.78rem;color:rgba(255,255,255,.45);}

.footer-copy{
  font-size:.95rem;font-weight:700;color:#f3ecff;
  margin:0 0 1.8rem 0;letter-spacing:.02em;
}

.usage-note{
  padding:1.3rem 1.5rem;
  background:linear-gradient(135deg,rgba(91,141,239,.08),rgba(155,93,229,.05));
  border-left:4px solid #d4e0f9;border-radius:12px;
  font-size:.88rem;line-height:1.8;color:#efeaf8;
  text-align:left;margin:0 0 2rem 0;
}
.usage-note strong{color:#5b8def;font-weight:700;}

.footer-nav{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.6rem 1rem;font-size:.95rem;
}
.footer-nav a{
  color:#daceee;text-decoration:none;font-weight:600;
  padding:.4rem .6rem;border-radius:6px;
  transition:color .15s,background .15s;
}
.footer-nav a:hover{color:#5b8def;background:rgba(91,141,239,.08);}
.footer-sep{color:#b0a3c9;font-size:.9rem;user-select:none;opacity:.6;}

@media (max-width:640px){
  .site-footer{padding:2.2rem 1rem 2.6rem;}
  .usage-note{padding:1.1rem 1.2rem;font-size:.85rem;line-height:1.7;margin-bottom:1.6rem;}
  .footer-copy{font-size:.9rem;margin-bottom:1.4rem;}
  .footer-nav{font-size:.88rem;gap:.4rem .7rem;}
  .footer-nav a{padding:.3rem .4rem;}
}

/* ============================================================
   20. SIDEBAR INDICE
   ============================================================ */
.index-sidebar{
  position: fixed;
  top: 0; left: 0;
  width: min(85vw, 320px);
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1.2rem 1rem 2rem;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  z-index: 2147483646;
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.34,1.2,.64,1);
  box-shadow: 4px 0 24px rgba(0,0,0,.12);
}
.index-sidebar > a{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem .5rem;
  padding: .6rem .7rem;
  margin-bottom: .15rem;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.35;
  transition: background .15s, color .15s;
}
.index-sidebar > a .index-text,
.index-sidebar > a span:not(.index-num){
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.index-sidebar > a .badge{
  flex: 0 0 100%;
  margin-left: 32px;
  margin-top: .1rem;
  font-size: .68rem;
  padding: .15rem .5rem;
}
.index-sidebar.is-open{transform:translateX(0);}
.index-sidebar::-webkit-scrollbar{width:6px;}
.index-sidebar::-webkit-scrollbar-thumb{background:rgba(91,141,239,.35);border-radius:3px;}
.index-sidebar::-webkit-scrollbar-thumb:hover{background:rgba(91,141,239,.6);}

.index-sidebar-close{
  display: none;
  position: sticky;
  top: 1rem;
  float: right;
  margin: 0 0 0.5rem 0.5rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--ink);
  cursor: pointer;
  place-items: center;
  z-index: 10;
  flex-shrink: 0;
  transition: background .15s, transform .15s, color .15s;
}
.index-sidebar-close:hover{
  background: var(--red);
  color: #fff;
  transform: rotate(90deg);
}
.index-sidebar-close svg{width: 16px;height: 16px;}

.index-label{
  display:block;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--blue);margin-bottom:1rem;
  padding-bottom:.5rem;border-bottom:1px dashed var(--border);
}

.index-sidebar > a{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .8rem;margin-bottom:.15rem;
  border-radius:8px;color:var(--ink);
  text-decoration:none;font-size:.92rem;font-weight:500;
  line-height:1.3;transition:background .15s,color .15s;
}
.index-sidebar > a:hover{background:var(--blue-light);color:var(--blue);text-decoration:none;}
.index-sidebar > a .index-num{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;border-radius:6px;
  background:var(--blue-light);color:var(--blue);
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  flex-shrink:0;
}
.index-sidebar a.sub{padding-left:2rem;font-size:.8rem;}
.index-sidebar a.sub .index-num{min-width:18px;height:18px;font-size:.6rem;}
.index-sidebar a.active{background:var(--blue-light);color:var(--navy);font-weight:700;}
.index-sidebar a.active .index-num{background:var(--navy);color:#fff;}

.index-backdrop{
  position:fixed;inset:0;
  background:rgba(15,12,41,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:2147483645;
  opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}
.index-backdrop.is-open{opacity:1;visibility:visible;}

.index-hamburger{
  display: none;
  position: fixed;
  bottom: 1.4rem;
  left: 1.4rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: linear-gradient(135deg, var(--navy), var(--navy-dark));
  color: #fff;
  cursor: pointer;
  place-items: center;
  z-index: 2147483647;
  box-shadow: 0 6px 20px rgba(20,40,80,.35);
  transition: transform .15s, box-shadow .15s, background .15s;
}
.index-hamburger:hover{
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(20,40,80,.45);
}
.index-hamburger svg{ width: 24px; height: 24px; }
.index-hamburger.is-hidden{ display: none; }

@media (min-width:961px){
  .page-layout{
    grid-template-columns:260px minmax(0,1fr);
  }
  .index-sidebar{
    position:sticky;
    top:70px;
    transform:none;
    width:auto;
    max-width:100%;
    height:auto;
    max-height:calc(100vh - 90px);
    border-radius:14px;
    border:1px solid var(--border);
    border-right:1px solid var(--border);
    padding:1.2rem 1rem;
    box-shadow:0 2px 10px rgba(20,40,80,.04);
    z-index:1;
  }
  .content-main > section{scroll-margin-top:80px;}
}

@media (max-width: 960px){
  .index-hamburger{ display: grid; }
  .index-sidebar-close{ display: grid; }

  .index-sidebar{
    top: 58px !important;
    height: calc(100vh - 58px) !important;
    padding: 1.2rem 1.2rem 2rem !important;
  }

  .index-label{
    padding-right: 3rem;
    padding-top: 0.3rem;
  }
}

@media (max-width:640px){
  .index-sidebar{width:88vw;max-width:300px;padding:1rem .9rem 2rem;}
  .index-sidebar > a{font-size:.88rem;padding:.5rem .6rem;}
  .index-sidebar > a .index-num{min-width:20px;height:20px;font-size:.68rem;}
  .index-label{font-size:.72rem;margin-bottom:.8rem;}
  .index-sidebar-close{width:34px;height:34px;}
  .index-hamburger{width:42px;height:42px;border-radius:50%;}
  .index-hamburger svg{width:20px;height:20px;}

  .back-to-lezioni{padding:1rem 1rem .2rem;}
  .lesson-header h1{font-size:1.6rem;}
  .section-title{font-size:1.3rem;gap:.6rem;}
  .section-title-num{width:36px;height:36px;font-size:.95rem;}
  .code-block{font-size:.78rem;}
  .code-block pre{padding:.9rem 1rem;}
  .theme-toggle{bottom:1.4rem;right:1.4rem;}
}

/* ============================================================
   21. PULSANTE TEMA
   ============================================================ */
.theme-toggle{
  position:fixed;bottom:1.2rem;right:1.2rem;z-index:200;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--border);background:var(--surface);
  color:var(--ink);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;
  font-family:inherit;
}
.theme-toggle:hover{transform:scale(1.08);box-shadow:0 6px 18px rgba(0,0,0,.18);border-color:var(--blue);}
.theme-toggle:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.theme-toggle svg{width:20px;height:20px;stroke-width:2;}
.theme-toggle .icon-sun{display:none;}
.theme-toggle .icon-moon{display:block;}
html[data-theme="dark"] .theme-toggle .icon-sun{display:block;}
html[data-theme="dark"] .theme-toggle .icon-moon{display:none;}

/* ============================================================
   22. TEMA SCURO
   ============================================================ */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a1428; --bg-alt:#111d38; --surface:#152040; --border:#253557;
  --ink:#e6ecf5; --ink-soft:#9dabc2; --navy:#dbe4f2; --navy-dark:#050b18;
  --blue-light:#16264a; --violet-light:#221a44; --teal-light:#0f332e;
  --amber-light:#382711; --red-light:#3a1c1a; --green-light:#12321f;
  --pink-light:#3a1a2c; --cyan-light:#0f2a35; --orange-light:#3a2214;
}

html[data-theme="dark"] .index-sidebar,
html[data-theme="dark"] .xml-tree,
html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] .exercise-card,
html[data-theme="dark"] .accordion,
html[data-theme="dark"] .recap-item,
html[data-theme="dark"] .compare-col,
html[data-theme="dark"] .phase-card,
html[data-theme="dark"] .flow,
html[data-theme="dark"] .solution,
html[data-theme="dark"] .checklist{background:var(--surface);}

html[data-theme="dark"] .data-table th{background:var(--bg-alt);color:var(--navy);}
html[data-theme="dark"] .data-table td{color:var(--ink);}
html[data-theme="dark"] .data-table code{background:var(--bg-alt);color:#f0a8b0;}
html[data-theme="dark"] .content-main code,
html[data-theme="dark"] .section-subtitle code{background:var(--bg-alt);color:#a0c4ff;}
html[data-theme="dark"] .check-box{background:var(--surface);}
html[data-theme="dark"] .index-sidebar a:hover{background:var(--bg-alt);}
html[data-theme="dark"] .content-main .accordion-head:hover{background:rgba(255,255,255,.04);}
html[data-theme="dark"] .accordion{border-color:var(--border);box-shadow:none;}
html[data-theme="dark"] .accordion:hover{border-color:#34456b;}
html[data-theme="dark"] .accordion.open{border-color:#5b47b8;box-shadow:0 10px 28px rgba(0,0,0,.35);}
html[data-theme="dark"] .accordion.open .accordion-head{background:linear-gradient(90deg,rgba(124,92,252,.18),rgba(124,92,252,0) 75%);}
html[data-theme="dark"] .accordion-toggle{background:rgba(255,255,255,.07);}
html[data-theme="dark"] .accordion.open .accordion-toggle,
html[data-theme="dark"] .accordion.open .accordion-title .num{background:var(--violet);color:#fff;}
html[data-theme="dark"] .xml-tree-line.child::before,
html[data-theme="dark"] .xml-tree-line.grandchild::before{color:#3d4d70;}
html[data-theme="dark"] .demo-box{background:linear-gradient(135deg,#152040 0%,#1a2a50 100%);}
html[data-theme="dark"] .lesson-feature{background:var(--blue-light);color:#7fb0ff;}
html[data-theme="dark"] .site-footer{background:#050b18;}

html[data-theme="dark"] .box-info{background:#16264a;border-left-color:#4a8dff;color:#c5d9f5;}
html[data-theme="dark"] .box-info .box-icon{background:#4a8dff;color:#0a1428;}
html[data-theme="dark"] .box-info strong{color:#8bbcff;}
html[data-theme="dark"] .box-tip{background:#0f332e;border-left-color:#2dd4bf;color:#b8e8df;}
html[data-theme="dark"] .box-tip .box-icon{background:#2dd4bf;color:#0a1428;}
html[data-theme="dark"] .box-tip strong{color:#5eead4;}
html[data-theme="dark"] .box-warning{background:#382711;border-left-color:#fbbf24;color:#fde5b8;}
html[data-theme="dark"] .box-warning .box-icon{background:#fbbf24;color:#0a1428;}
html[data-theme="dark"] .box-warning strong{color:#fcd34d;}
html[data-theme="dark"] .box-danger{background:#3a1c1a;border-left-color:#f87171;color:#fcc5c5;}
html[data-theme="dark"] .box-danger .box-icon{background:#f87171;color:#0a1428;}
html[data-theme="dark"] .box-danger strong{color:#fca5a5;}
html[data-theme="dark"] .box-example{background:#221a44;border-left-color:#a78bfa;color:#d6c9ff;}
html[data-theme="dark"] .box-example .box-icon{background:#a78bfa;color:#0a1428;}
html[data-theme="dark"] .box-example strong{color:#c4b5fd;}

html[data-theme="dark"] .box-info code{background:rgba(74,141,255,.2);color:#c5d9f5;}
html[data-theme="dark"] .box-tip code{background:rgba(45,212,191,.18);color:#b8e8df;}
html[data-theme="dark"] .box-warning code{background:rgba(251,191,36,.18);color:#fde5b8;}
html[data-theme="dark"] .box-danger code{background:rgba(248,113,113,.2);color:#fcc5c5;}
html[data-theme="dark"] .box-example code{background:rgba(167,139,250,.2);color:#d6c9ff;}

html[data-theme="dark"] .lesson-subtitle{color:var(--ink-soft);}
html[data-theme="dark"] .section-title{color:var(--navy);border-bottom-color:var(--border);}
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .subtitle-2{color:var(--navy);}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4{color:var(--navy);}
html[data-theme="dark"] .exercise-card h3,
html[data-theme="dark"] .accordion-title,
html[data-theme="dark"] .solution summary,
html[data-theme="dark"] .compare-col h4,
html[data-theme="dark"] .recap-item h4,
html[data-theme="dark"] .flow-step h4{color:var(--navy);}
html[data-theme="dark"] .accordion-sub,
html[data-theme="dark"] .compare-col p,
html[data-theme="dark"] .phase-card p,
html[data-theme="dark"] .phase-meta-label,
html[data-theme="dark"] .recap-item p,
html[data-theme="dark"] .flow-step p{color:var(--ink-soft);}
html[data-theme="dark"] .solution-content{color:var(--ink);}
html[data-theme="dark"] .phase-card h3{color:var(--phase-color,var(--navy));}
html[data-theme="dark"] .phase-meta-value{color:var(--navy);}
html[data-theme="dark"] .xml-node{color:var(--navy);}
html[data-theme="dark"] .xml-node-tag{color:#7fb0ff;}
html[data-theme="dark"] .xml-attr-name{color:#c4b5fd;}
html[data-theme="dark"] .xml-attr-val{color:#5eead4;}
html[data-theme="dark"] .xml-text{color:var(--ink-soft);}
html[data-theme="dark"] .check-text{color:var(--ink);}
html[data-theme="dark"] .demo-box-title{color:#7fb0ff;}
html[data-theme="dark"] .index-label{color:var(--blue);border-bottom-color:var(--border);}
html[data-theme="dark"] .index-sidebar > a{color:var(--ink);}
html[data-theme="dark"] .index-sidebar > a:hover{background:rgba(130,170,255,.15);color:#82aaff;}
html[data-theme="dark"] .index-sidebar > a.active{color:var(--navy);}
html[data-theme="dark"] .index-sidebar > a.active .index-num{background:#4a8dff;color:#0a1428;}
html[data-theme="dark"] .index-sidebar > a .index-num{background:var(--bg-alt);color:#82aaff;}
html[data-theme="dark"] .index-sidebar-close{background:var(--bg-alt);border-color:var(--border);color:var(--ink);}
html[data-theme="dark"] .back-to-lezioni a{color:#7fb0ff;}
html[data-theme="dark"] .back-to-lezioni a:hover{color:#a0c4ff;}
html[data-theme="dark"] .badge{color:#0a1428;font-weight:800;}

html[data-theme="dark"] select,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] textarea{
  background:var(--bg-alt);color:var(--ink);border-color:var(--border);
}
html[data-theme="dark"] input::placeholder{color:var(--ink-soft);opacity:.7;}
html[data-theme="dark"] select option{background:var(--surface);color:var(--ink);}

html[data-theme="dark"] .match-row{color:var(--ink);}
html[data-theme="dark"] .match-row .match-label{color:var(--navy);}

html[data-theme="dark"] .json-viewer{background:#050b18;border:1px solid var(--border);}
html[data-theme="dark"] .json-token.key{background:rgba(74,141,255,.2);color:#a0c4ff;}
html[data-theme="dark"] .json-token.str{background:rgba(45,212,191,.18);color:#5eead4;}
html[data-theme="dark"] .json-token.num{background:rgba(251,191,36,.18);color:#fcd34d;}
html[data-theme="dark"] .json-token.bool{background:rgba(167,139,250,.2);color:#c4b5fd;}
html[data-theme="dark"] .json-token.null{background:rgba(157,171,194,.15);color:#9dabc2;}

html[data-theme="dark"] .game-feedback.ok{color:#5eead4;}
html[data-theme="dark"] .game-feedback.err{color:#fca5a5;}

html[data-theme="dark"] .footer-copy{color:#f3ecff;}
html[data-theme="dark"] .usage-note{
  background:linear-gradient(135deg,rgba(91,141,239,.15),rgba(155,93,229,.08));
  color:#b0a3c9;
}
html[data-theme="dark"] .usage-note strong{color:#82aaff;}
html[data-theme="dark"] .footer-nav a{color:#b0a3c9;}
html[data-theme="dark"] .footer-nav a:hover{color:#82aaff;background:rgba(130,170,255,.12);}
html[data-theme="dark"] .footer-sep{color:#6b5f80;}
.back-to-top{
  position: fixed;
  bottom: 1.2rem;
  right: 4.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  z-index: 199;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s, visibility .25s, transform .25s, background .15s, border-color .15s;
}
.back-to-top.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover{
  border-color: var(--blue);
  background: var(--blue-light);
}
.back-to-top svg{
  width: 20px;
  height: 20px;
}

/* ============================================================
   23. ANTI-OVERFLOW ORIZZONTALE
   ============================================================ */

.lezia-embed-bar{
  max-width: 100vw;
  overflow: hidden;
}
.lezia-embed-bar-crumbs{
  min-width: 0;
}
.lezia-embed-bar-actions{
  min-width: 0;
  max-width: 100%;
}
.lezia-embed-bar-btn{
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.lezia-embed-bar-actions::-webkit-scrollbar{ display: none; }
.lezia-embed-bar-actions{ scrollbar-width: none; }

.content-main{
  min-width: 0;
  overflow-x: clip;
}
.content-main img,
.content-main video,
.content-main iframe,
.content-main table,
.content-main pre{
  max-width: 100%;
  height: auto;
}
.content-main pre{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.content-main p,
.content-main li,
.content-main td{
  overflow-wrap: anywhere;
  word-break: break-word;
}
.content-main *{
  min-width: 0;
}

html[data-theme="dark"] .index-hamburger{
  background: var(--blue);
  border: 1px solid var(--border);
  color: #e6ecf5;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
html[data-theme="dark"] .index-hamburger:hover{
  background: var(--surface);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 8px 24px rgba(46,111,242,.5);
}

/* ============================================================
   24. TOP MENU A LIVELLI
   ============================================================ */
.top-menu{
  position:sticky;
  top:0;
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.7rem 1.5rem;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 12px rgba(20,40,80,.05);
}

.top-menu-logo{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:1.05rem;
  color:var(--navy);
  text-decoration:none;
  white-space:nowrap;
  letter-spacing:-.01em;
  transition:color .15s;
}
.top-menu-logo:hover{ color:var(--blue); text-decoration:none; }

.top-menu-toggle{
  display:none;
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg-alt);
  color:var(--ink);
  cursor:pointer;
  place-items:center;
  transition:background .15s,border-color .15s,color .15s;
}
.top-menu-toggle:hover{ background:var(--blue-light); border-color:var(--blue); color:var(--blue); }
.top-menu-toggle svg{ width:22px; height:22px; }
.top-menu-toggle .icon-close{ display:none; }
.top-menu-toggle[aria-expanded="true"] .icon-burger{ display:none; }
.top-menu-toggle[aria-expanded="true"] .icon-close{ display:block; }

.top-menu-nav{
  display:flex;
  align-items:center;
  gap:.3rem;
}

.menu-level{ position:relative; }

.menu-level-btn{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.55rem .9rem;
  border:none;
  background:none;
  font-family:var(--font-heading);
  font-size:.9rem;
  font-weight:700;
  color:var(--navy);
  border-radius:8px;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.menu-level-btn:hover,
.menu-level:hover .menu-level-btn{
  background:var(--blue-light);
  color:var(--blue);
}

.chevron{
  font-size:.65rem;
  line-height:1;
  transition:transform .2s;
}
.menu-level:hover .chevron,
.menu-level.open .chevron{ transform:rotate(180deg); }

.menu-dropdown{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:290px;
  max-width:380px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:.5rem;
  box-shadow:0 18px 40px -14px rgba(20,40,80,.25);
  display:none;
  flex-direction:column;
  gap:.1rem;
  z-index:1;
}
.menu-level:hover .menu-dropdown,
.menu-level:focus-within .menu-dropdown,
.menu-level.open .menu-dropdown{
  display:flex;
}

.menu-dropdown a{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.5rem .7rem;
  border-radius:8px;
  font-size:.85rem;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  line-height:1.3;
  transition:background .12s,color .12s;
}
.menu-dropdown a:hover{
  background:var(--blue-light);
  color:var(--blue);
  text-decoration:none;
}
.menu-dropdown a.active{
  background:var(--blue-light);
  color:var(--blue);
  font-weight:700;
}

.menu-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  padding:0 .3rem;
  border-radius:6px;
  background:var(--bg-alt);
  color:var(--ink-soft);
  font-family:var(--font-mono);
  font-size:.7rem;
  font-weight:700;
  flex-shrink:0;
  transition:background .12s,color .12s;
}
.menu-dropdown a:hover .menu-num,
.menu-dropdown a.active .menu-num{
  background:var(--blue);
  color:#fff;
}

/* --- FIX: L'ULTIMO MENU (Avanzato) ALLINEA IL DROPDOWN A DESTRA --- */
/* Questo evita che il dropdown esca fuori dallo schermo a destra */
.top-menu-nav .menu-level:last-child .menu-dropdown {
  left: auto;
  right: 0;
}

@media (max-width:960px){
  .top-menu-toggle{ display:grid; }

  .top-menu-nav{
    position:fixed;
    top:57px;
    left:0;
    right:0;
    bottom:0;
    background:var(--surface);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:1rem 1.2rem 2rem;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    transition:opacity .22s,transform .25s,visibility .25s;
    z-index:250;
  }
  .top-menu-nav.open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
  }

  .menu-level{
    width:100%;
    border-bottom:1px solid var(--border);
  }
  .menu-level:last-child{ border-bottom:none; }

  .menu-level-btn{
    width:100%;
    justify-content:space-between;
    padding:1rem .3rem;
    font-size:1rem;
    border-radius:0;
    background:none;
  }
  .menu-level-btn:hover{ background:none; }

  .menu-dropdown{
    position:static;
    display:none;
    min-width:0;
    max-width:100%;
    box-shadow:none;
    border:none;
    border-radius:0;
    padding:0 0 .8rem 0;
    background:transparent;
  }
  .menu-level.open .menu-dropdown{ display:flex; }

  .menu-dropdown a{
    padding:.7rem .9rem;
    font-size:.92rem;
  }

  .content-main > section{ scroll-margin-top:80px; }
}

html[data-theme="dark"] .top-menu{
  background:var(--surface);
  border-bottom-color:var(--border);
  box-shadow:0 2px 12px rgba(0,0,0,.4);
}
html[data-theme="dark"] .top-menu-logo{ color:var(--navy); }
html[data-theme="dark"] .top-menu-logo:hover{ color:#7fb0ff; }

html[data-theme="dark"] .menu-level-btn{ color:var(--navy); }
html[data-theme="dark"] .menu-level-btn:hover,
html[data-theme="dark"] .menu-level:hover .menu-level-btn{
  background:var(--bg-alt);
  color:#7fb0ff;
}

html[data-theme="dark"] .menu-dropdown{
  background:var(--surface);
  border-color:var(--border);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.7);
}
html[data-theme="dark"] .menu-dropdown a{ color:var(--ink); }
html[data-theme="dark"] .menu-dropdown a:hover,
html[data-theme="dark"] .menu-dropdown a.active{
  background:var(--bg-alt);
  color:#7fb0ff;
}
html[data-theme="dark"] .menu-num{
  background:var(--bg-alt);
  color:#82aaff;
}
html[data-theme="dark"] .menu-dropdown a:hover .menu-num,
html[data-theme="dark"] .menu-dropdown a.active .menu-num{
  background:#4a8dff;
  color:#0a1428;
}

html[data-theme="dark"] .top-menu-toggle{
  background:var(--bg-alt);
  border-color:var(--border);
  color:var(--ink);
}
html[data-theme="dark"] .top-menu-toggle:hover{
  background:#16264a;
  border-color:#4a8dff;
  color:#7fb0ff;
}

/* ============================================================
   25. FIX DEFINITIVO: SIDEBAR + TOP MENU SU DESKTOP
   ============================================================ */

@media (min-width: 961px) {
  .page-layout {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .index-sidebar {
    position: sticky;
    top: 70px;
    transform: none;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: calc(100vh - 90px);
    border-radius: 14px;
    border: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 1.2rem 1rem;
    box-shadow: 0 2px 10px rgba(20,40,80,.04);
    z-index: 1;
  }
  .index-hamburger { display: none !important; }
  .index-backdrop { display: none !important; }
}

@media (max-width: 960px) {
  .top-menu-nav { display: none !important; }
  .top-menu-toggle { display: none !important; }
  .top-menu { justify-content: center; }

  .index-hamburger { display: grid; }
  .index-sidebar {
    top: 57px !important;
    height: calc(100vh - 57px) !important;
  }
  .index-backdrop { display: block; }
}

/* ============================================================
   26. VISUALIZZAZIONE A SCHERMO INTERO / EMBED
   ============================================================ */

/* --- EMBED (dentro un iframe) --- */
html.is-iframe .top-menu {
  position: sticky;
  top: 0;
  z-index: 300;
}
html.is-iframe .page-layout {
  max-width: 100%;
  padding: 1rem 1rem 3rem;
}
html.is-iframe .content-main {
  max-width: 100%;
  overflow-x: clip;
}

/* --- FULL-SCREEN (fuori dall'iframe) --- */
html:not(.is-iframe) body {
  min-height: 100vh;
}
html:not(.is-iframe) .page-layout {
  max-width: 1280px;
}
html:not(.is-iframe) .top-menu {
  position: sticky;
  top: 0;
  z-index: 300;
}
@media (min-width: 961px) {
  html:not(.is-iframe) .index-sidebar {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
  }
}
@media (max-width: 960px) {
  html:not(.is-iframe) .index-sidebar {
    position: fixed;
    top: 57px;
    height: calc(100vh - 57px);
  }
}

/* ============================================================
   ER. DIAGRAMMI ENTITA'-RELAZIONE (SVG, notazione di Chen)
   Uso: <figure class="er-figure"><div class="er-scroll"><svg class="er-svg wide">
   Classi nell'SVG: g.ent(.e1/.e2/.e3) g.dia g.att(.pk) g.car line.lin(.dash)
   ============================================================ */
.er-figure{margin:1.6rem 0;padding:1.1rem 1rem .9rem;background:var(--bg-alt);border:1px solid var(--border);border-radius:16px;}
.er-figure figcaption{display:flex;align-items:center;gap:.6rem;margin:0 0 .6rem .3rem;font-family:var(--font-heading);font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.er-figure figcaption::before{content:"";width:4px;height:16px;border-radius:2px;background:var(--blue);}
.er-scroll{overflow-x:auto;}
.er-note{margin:.5rem .3rem 0;font-size:.84rem;color:var(--ink-soft);line-height:1.5;}
.er-svg{display:block;width:100%;height:auto;max-width:900px;margin:0 auto;font-family:var(--font-body);}
.er-svg.wide{min-width:820px;}
.er-svg .lin{stroke:var(--navy);stroke-width:2;}
.er-svg .lin.dash{stroke:var(--amber);stroke-width:1.6;stroke-dasharray:4 4;}
.er-svg .ent rect{fill:var(--surface);stroke-width:3;}
.er-svg .ent text{fill:var(--ink);font-family:var(--font-heading);font-weight:800;font-size:15px;letter-spacing:.04em;text-anchor:middle;}
.er-svg .e1 rect{stroke:var(--blue);fill:var(--blue-light);}
.er-svg .e2 rect{stroke:var(--violet);fill:var(--violet-light);}
.er-svg .e3 rect{stroke:var(--teal);fill:var(--teal-light);}
.er-svg .dia polygon{fill:var(--amber-light);stroke:var(--amber);stroke-width:2.5;}
.er-svg .dia text{fill:var(--ink);font-family:var(--font-heading);font-weight:800;font-size:12px;letter-spacing:.03em;text-anchor:middle;}
.er-svg .att ellipse{fill:var(--surface);stroke:var(--ink-soft);stroke-width:1.5;}
.er-svg .att text{fill:var(--ink);font-family:var(--font-mono);font-size:12px;text-anchor:middle;}
.er-svg .att.pk ellipse{stroke:var(--ink);stroke-width:2;}
.er-svg .att.pk text{font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.er-svg .car rect{fill:var(--surface);stroke:var(--blue);stroke-width:1.5;}
.er-svg .car text{fill:var(--blue);font-family:var(--font-mono);font-weight:700;font-size:12px;text-anchor:middle;}
html[data-theme="dark"] .er-svg .lin{stroke:#9fb0d0;}
html[data-theme="dark"] .er-svg .car text{fill:#8bbcff;}
html[data-theme="dark"] .er-svg .car rect{stroke:#4a8dff;}
.er-svg .e4 rect{stroke:var(--amber);fill:var(--amber-light);}
.er-svg .rol{fill:var(--ink-soft);font-family:var(--font-body);font-style:italic;font-size:12.5px;text-anchor:middle;}