:root{
  --blu:#385CAD; --blu2:#6882C7; --blu3:#99A9E2; --blu-scuro:#2c4a8a;
  --grigio:#f4f6fb; --testo:#1f2733; --muto:#6b7686; --ok:#1f9d57; --ko:#d23b3b;
  --ombra:0 2px 12px rgba(40,60,120,.10);
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* l'attributo hidden deve sempre nascondere, anche su elementi con display:flex/grid */
body{margin:0;font-family:'Fira Sans',system-ui,Arial,sans-serif;color:var(--testo);background:var(--grigio)}
h1,h2,h3{font-weight:700;line-height:1.2}
button{font-family:inherit;cursor:pointer;border:none;border-radius:8px;font-weight:600}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blu) 0%,var(--blu2) 60%,var(--blu3) 100%);padding:20px}
.login-card{background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(20,30,70,.25);
  padding:34px 30px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px;text-align:center}
.login-logo{width:140px;margin:0 auto 4px}
.login-card h1{font-size:1.35rem;margin:0;color:var(--blu-scuro)}
.login-sub{margin:0 0 6px;color:var(--muto);font-size:.92rem}
.login-card label{display:flex;flex-direction:column;text-align:left;font-size:.85rem;font-weight:600;color:var(--muto);gap:5px}
.login-card input{padding:11px 12px;border:1.5px solid #d7deec;border-radius:8px;font-size:1rem}
.login-card input:focus{outline:none;border-color:var(--blu2)}
#login-btn{background:var(--blu);color:#fff;padding:12px;font-size:1rem;margin-top:6px}
#login-btn:hover{background:var(--blu-scuro)}
#login-btn:disabled{opacity:.6;cursor:wait}
.login-error{color:var(--ko);font-size:.88rem;margin:0;font-weight:600}
.login-foot{color:#fff;opacity:.9;font-size:.8rem;margin-top:18px}

/* ---------- TOPBAR ---------- */
.topbar{display:flex;align-items:center;gap:14px;background:#fff;padding:10px 20px;box-shadow:var(--ombra);position:sticky;top:0;z-index:10}
.topbar-logo{height:34px}
.topbar-title{font-weight:700;color:var(--blu-scuro);font-size:1.05rem}
.topbar-user{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:.9rem}
#user-name{font-weight:600}
#logout-btn{background:var(--grigio);color:var(--testo);padding:7px 12px;font-size:.85rem}
#logout-btn:hover{background:#e6eaf4}

/* ---------- LAYOUT ---------- */
.layout{display:grid;grid-template-columns:300px 1fr;gap:22px;max-width:1100px;margin:22px auto;padding:0 18px;align-items:start}
.sidebar{background:#fff;border-radius:14px;box-shadow:var(--ombra);padding:16px}
.progress-summary{margin-bottom:14px}
.progress-bar{height:9px;background:#e6eaf4;border-radius:6px;overflow:hidden}
#progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blu2),var(--blu));transition:width .4s}
#progress-text{display:block;margin-top:6px;font-size:.8rem;color:var(--muto)}

.module-list{display:flex;flex-direction:column;gap:8px}
.mod-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;border:1.5px solid #e8edf6;
  background:#fff;text-align:left;width:100%;transition:.15s}
.mod-item:hover:not(.locked){border-color:var(--blu2);background:#f7f9ff}
.mod-item.active{border-color:var(--blu);background:#eef2fc}
.mod-item.locked{opacity:.55;cursor:not-allowed}
.mod-ico{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;
  background:var(--blu3);color:#fff;flex-shrink:0}
.mod-item.done .mod-ico{background:var(--ok)}
.mod-item.locked .mod-ico{background:#b9c2d4}
.mod-label{font-size:.85rem;line-height:1.25}
.mod-label b{display:block;color:var(--blu-scuro)}
.mod-label span{color:var(--muto);font-size:.78rem}

/* ---------- PANEL ---------- */
.panel{background:#fff;border-radius:14px;box-shadow:var(--ombra);padding:24px;min-height:340px}
.welcome h2{color:var(--blu-scuro)}
.welcome p{color:var(--muto);max-width:560px}
.module-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.module-badge{background:var(--blu);color:#fff;font-weight:700;padding:4px 10px;border-radius:7px;font-size:.85rem}
.module-head h2{margin:0;font-size:1.3rem;color:var(--blu-scuro)}

.video-box{border-radius:12px;overflow:hidden;box-shadow:var(--ombra);background:#000}
.video-frame{position:relative;width:100%;aspect-ratio:16/9}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.quiz-gate{text-align:center;margin:22px 0 4px}
#start-quiz-btn{background:var(--blu);color:#fff;padding:13px 26px;font-size:1rem}
#start-quiz-btn:hover{background:var(--blu-scuro)}
.quiz-gate .hint{color:var(--muto);font-size:.85rem;margin-top:8px}

/* ---------- QUIZ ---------- */
.quiz-area h3{color:var(--blu-scuro)}
.q-block{border:1.5px solid #e8edf6;border-radius:10px;padding:14px 16px;margin-bottom:12px}
.q-block.q-ok{border-color:var(--ok);background:#f1fbf5}
.q-block.q-ko{border-color:var(--ko);background:#fdf2f2}
.q-text{font-weight:600;margin-bottom:10px}
.q-opt{display:flex;gap:9px;align-items:flex-start;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:.93rem}
.q-opt:hover{background:#f5f7fc}
.q-opt input{margin-top:3px}
.q-expl{margin-top:9px;padding:9px 11px;background:#eef2fc;border-radius:8px;font-size:.85rem;color:#33406b}
.q-expl b{color:var(--blu-scuro)}
#submit-quiz-btn{background:var(--blu);color:#fff;padding:12px 24px;font-size:1rem;margin-top:6px}
#submit-quiz-btn:hover{background:var(--blu-scuro)}
#submit-quiz-btn:disabled{opacity:.6;cursor:default}

.quiz-result{margin-top:18px;padding:16px 18px;border-radius:10px;font-weight:500}
.quiz-result.pass{background:#eafaf0;border:1.5px solid var(--ok)}
.quiz-result.fail{background:#fdeeee;border:1.5px solid var(--ko)}
.quiz-result h4{margin:0 0 6px}
.quiz-result .score{font-size:1.5rem;font-weight:700}
.quiz-result button{margin-top:12px;padding:11px 22px;color:#fff}
.btn-next{background:var(--ok)}
.btn-retry{background:var(--blu2)}

/* ---------- RESPONSIVE ---------- */
@media (max-width:820px){
  .layout{grid-template-columns:1fr;margin:14px auto}
  .sidebar{order:2}
  .topbar-title{display:none}
}