/* Shared CSS for all activity pages */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#3d6b4f;--primary-mid:#5a8f6f;--primary-light:#c8dfd0;--primary-pale:#eef5f1;
  --cream:#f5f2eb;--warm-white:#fdfbf8;--ink:#1a2a1e;--muted:#5a6f62;--border:#d5e5d8;
  --red:#c0392b;--green:#27ae60;--amber:#b06a2a;--amber-light:#f5ead5;
  --shadow:0 2px 16px rgba(26,42,30,.08);
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;font-weight:300;background:var(--cream);color:var(--ink);min-height:100vh;display:flex;flex-direction:column}
/* COVER */
#cover{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;position:relative;overflow:hidden}
#cover-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.42);z-index:0}
#cover-solid{position:absolute;inset:0;z-index:0}
#cover::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.1) 60%);z-index:1}
.cover-inner{position:relative;z-index:2;max-width:680px}
.cover-badge{font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:1rem}
.cover-title{font-family:'Lora',serif;font-size:clamp(2rem,5vw,3rem);font-weight:700;line-height:1.2;color:#fff;margin-bottom:1rem}
.cover-desc{font-size:.97rem;line-height:1.75;color:rgba(255,255,255,.82);margin-bottom:2rem;max-width:560px;margin-left:auto;margin-right:auto}
.btn-start{display:inline-flex;align-items:center;gap:.6rem;background:#fff;color:var(--primary);font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:600;padding:.85rem 2.2rem;border-radius:50px;border:none;cursor:pointer;box-shadow:0 4px 24px rgba(0,0,0,.25);transition:transform .2s,box-shadow .2s}
.btn-start:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.3)}
.btn-start svg{width:18px;height:18px;stroke:var(--primary);stroke-width:2.5;fill:none}
/* APP */
#app{display:none;flex-direction:column;min-height:100vh}
#app.visible{display:flex}
#topbar{background:var(--warm-white);border-bottom:1px solid var(--border);padding:.9rem 1.5rem;display:flex;align-items:center;gap:1rem;position:sticky;top:0;z-index:100;box-shadow:0 1px 8px rgba(26,42,30,.06)}
.topbar-title{font-family:'Lora',serif;font-size:.97rem;font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-home{font-size:.8rem;color:var(--primary);text-decoration:none;font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:.3rem}
.topbar-home svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}
.btn-icon{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:background .15s,color .15s;flex-shrink:0}
.btn-icon:hover{background:var(--primary-pale);color:var(--primary)}
.btn-icon svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.progress-bar-wrap{position:sticky;top:57px;z-index:99;background:var(--border);height:4px}
.progress-bar-fill{height:100%;background:var(--primary);transition:width .4s ease}
.layout{display:flex;flex:1;min-height:0}
#sidebar{width:250px;flex-shrink:0;background:var(--warm-white);border-right:1px solid var(--border);overflow-y:auto;padding:1.5rem 0;transition:transform .3s}
.sidebar-label{font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);padding:0 1.2rem 1rem}
.nav-item{display:flex;align-items:center;gap:.75rem;padding:.65rem 1.2rem;cursor:pointer;font-size:.87rem;font-weight:400;color:var(--muted);border-left:3px solid transparent;transition:background .15s,color .15s,border-color .15s;user-select:none}
.nav-item:hover{background:var(--primary-pale);color:var(--primary)}
.nav-item.active{background:var(--primary-pale);color:var(--primary);font-weight:600;border-left-color:var(--primary)}
.nav-item.completed .nav-num{background:var(--green);color:#fff}
.nav-num{width:22px;height:22px;border-radius:50%;background:var(--border);font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--muted);transition:background .2s,color .2s}
.nav-item.active .nav-num{background:var(--primary);color:#fff}
#content-area{flex:1;overflow-y:auto;padding:2.5rem;display:flex;flex-direction:column;gap:1.5rem;max-width:820px;width:100%;margin:0 auto}
.chapter-page{display:none}
.chapter-page.active{display:block}
.chapter-header{margin-bottom:1.8rem}
.chapter-tag{font-size:.7rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--primary);margin-bottom:.5rem}
.chapter-title{font-family:'Lora',serif;font-size:clamp(1.3rem,3vw,1.9rem);font-weight:500;line-height:1.25}
.rich-text{font-size:.97rem;line-height:1.75;background:var(--warm-white);border:1px solid var(--border);border-radius:12px;padding:1.6rem 2rem}
.rich-text p{margin-bottom:1em}
.rich-text p:last-child{margin-bottom:0}
.rich-text ol,.rich-text ul{padding-left:1.5rem;margin-bottom:1em}
.rich-text li{margin-bottom:.4em}
.rich-text strong{font-weight:600}
/* QUIZ */
.quiz-card{background:var(--warm-white);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:1.2rem;box-shadow:var(--shadow)}
.quiz-card-header{background:var(--primary);padding:1rem 1.5rem;color:#fff;font-family:'Lora',serif;font-size:1rem;font-weight:500}
.quiz-card-body{padding:1.5rem}
.scenario-text{font-size:.93rem;line-height:1.7;background:var(--amber-light);border-left:4px solid var(--amber);border-radius:8px;padding:1rem 1.2rem;margin-bottom:1.2rem}
.question-text{font-weight:600;font-size:.97rem;margin-bottom:1rem}
.choice-btn{display:flex;align-items:center;gap:.8rem;width:100%;background:var(--primary-pale);border:1.5px solid var(--border);border-radius:10px;padding:.85rem 1.1rem;margin-bottom:.6rem;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:400;text-align:left;color:var(--ink);transition:background .15s,border-color .15s}
.choice-btn:hover:not(:disabled){background:var(--primary-light);border-color:var(--primary-mid)}
.choice-btn:disabled{cursor:default}
.choice-btn.correct{background:#d4f5e0;border-color:var(--green);color:#1a5c33}
.choice-btn.wrong{background:#fde8e6;border-color:var(--red);color:#7d1f1a}
.choice-letter{width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.choice-btn.correct .choice-letter{background:var(--green)}
.choice-btn.wrong .choice-letter{background:var(--red)}
.feedback-box{border-radius:10px;padding:1rem 1.2rem;font-size:.88rem;line-height:1.6;margin-top:.8rem;display:none}
.feedback-box.correct-fb{background:#d4f5e0;border:1px solid var(--green);color:#1a5c33}
.feedback-box.wrong-fb{background:#fde8e6;border:1px solid var(--red);color:#7d1f1a}
.feedback-box.neutral-fb{background:var(--primary-pale);border:1px solid var(--primary-light);color:var(--ink)}
.feedback-box.visible{display:block}
/* SUMMARY QUIZ */
.summary-quiz{background:var(--warm-white);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.summary-quiz-header{background:var(--primary);padding:1rem 1.5rem;color:#fff}
.summary-quiz-header h3{font-family:'Lora',serif;font-size:1rem;font-weight:500}
.summary-quiz-header p{font-size:.82rem;color:rgba(255,255,255,.8);margin-top:.2rem}
.summary-item{padding:1.2rem 1.5rem;border-bottom:1px solid var(--border)}
.summary-item:last-child{border-bottom:none}
.summary-item-num{font-size:.72rem;font-weight:700;color:var(--primary);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem}
.summary-choices{display:flex;flex-direction:column;gap:.45rem;margin-top:.7rem}
.summary-choice{display:flex;align-items:flex-start;gap:.7rem;padding:.7rem 1rem;border-radius:8px;border:1.5px solid var(--border);cursor:pointer;font-size:.88rem;line-height:1.5;color:var(--ink);background:var(--primary-pale);transition:background .15s,border-color .15s;font-family:'DM Sans',sans-serif;text-align:left;width:100%}
.summary-choice:hover:not(:disabled){background:var(--primary-light);border-color:var(--primary-mid)}
.summary-choice:disabled{cursor:default}
.summary-choice.correct{background:#d4f5e0;border-color:var(--green);color:#1a5c33}
.summary-choice.wrong{background:#fde8e6;border-color:var(--red);color:#7d1f1a}
.check-icon{width:20px;height:20px;flex-shrink:0;margin-top:1px}
.summary-progress{padding:.8rem 1.5rem;background:var(--primary-pale);border-top:1px solid var(--border);font-size:.82rem;color:var(--muted);display:flex;align-items:center;justify-content:space-between}
.summary-score{font-weight:700;color:var(--primary)}
/* DOC TOOL */
.doc-tool{background:var(--warm-white);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.doc-tool-header{background:var(--primary);padding:1.1rem 1.5rem;color:#fff}
.doc-tool-header h3{font-family:'Lora',serif;font-size:1rem;font-weight:500}
.doc-tool-steps{display:flex;gap:0;border-bottom:1px solid var(--border);overflow-x:auto;padding:0 1.2rem;background:var(--primary-pale)}
.step-tab{font-size:.78rem;font-weight:600;padding:.7rem 1rem;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s;user-select:none}
.step-tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.doc-step-content{padding:1.5rem}
.doc-step-panel{display:none}
.doc-step-panel.active{display:block}
.instruction-block{background:var(--amber-light);border-left:4px solid var(--amber);border-radius:8px;padding:1rem 1.2rem;font-size:.9rem;line-height:1.6;margin-bottom:1rem}
.instruction-block ol,.instruction-block ul{padding-left:1.3rem}
.question-label{font-size:.95rem;font-weight:600;line-height:1.5;margin-bottom:.7rem;color:var(--ink)}
textarea.response-field{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:.9rem 1rem;font-family:'DM Sans',sans-serif;font-size:.92rem;font-weight:300;line-height:1.6;color:var(--ink);background:#fff;resize:vertical;min-height:100px;transition:border-color .2s,box-shadow .2s}
textarea.response-field:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(61,107,79,.12)}
.step-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--border)}
.btn-step{display:inline-flex;align-items:center;gap:.45rem;font-family:'DM Sans',sans-serif;font-size:.88rem;font-weight:600;padding:.6rem 1.3rem;border-radius:8px;border:none;cursor:pointer;transition:background .15s,transform .1s}
.btn-step:active{transform:scale(.97)}
.btn-step.prev{background:var(--primary-pale);color:var(--primary)}
.btn-step.prev:hover{background:var(--primary-light)}
.btn-step.next{background:var(--primary);color:#fff}
.btn-step.next:hover{background:#2e5039}
.btn-step svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.step-indicator{font-size:.78rem;color:var(--muted)}
/* CHAPTER NAV */
.chapter-nav{display:flex;justify-content:space-between;align-items:center;padding-top:1.5rem;margin-top:1rem;border-top:1px solid var(--border)}
.btn-chapter{display:inline-flex;align-items:center;gap:.5rem;font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:600;padding:.7rem 1.5rem;border-radius:10px;border:none;cursor:pointer;transition:background .15s,transform .1s;text-decoration:none}
.btn-chapter:active{transform:scale(.97)}
.btn-chapter.prev{background:var(--warm-white);color:var(--muted);border:1px solid var(--border)}
.btn-chapter.prev:hover{background:var(--primary-pale);color:var(--primary)}
.btn-chapter.next{background:var(--primary);color:#fff}
.btn-chapter.next:hover{background:#2e5039}
.btn-chapter:disabled{opacity:.4;cursor:not-allowed}
.btn-chapter svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* BRANCHING */
.branching-card{background:var(--warm-white);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);margin-bottom:1rem}
.branching-header{background:var(--primary);padding:1rem 1.5rem;color:#fff;font-size:.82rem;display:flex;align-items:center;justify-content:space-between}
.branching-body{padding:1.5rem}
.slide-area{font-size:.97rem;line-height:1.75}
.slide-nav{display:flex;justify-content:space-between;margin-top:1.2rem}
.feedback-panel{background:var(--primary-pale);border:1px solid var(--primary-light);border-radius:10px;padding:1.1rem 1.3rem;margin-top:.9rem;font-size:.88rem;line-height:1.65;display:none}
.feedback-panel.correct-fb{background:#d4f5e0;border-color:var(--green)}
.feedback-panel.wrong-fb{background:#fde8e6;border-color:var(--red)}
.feedback-panel.visible{display:block}
.feedback-title{font-weight:700;margin-bottom:.4rem;font-size:.9rem}
.complete-chip{display:inline-flex;align-items:center;gap:.5rem;background:var(--green);color:#fff;font-size:.75rem;font-weight:700;padding:.3rem .8rem;border-radius:50px;margin-top:.6rem}
/* DRAG & DROP */
.drag-item{display:inline-block;background:var(--primary-pale);border:1.5px solid var(--border);border-radius:8px;padding:.5rem 1rem;font-size:.88rem;cursor:grab;user-select:none;margin:.3rem;transition:background .15s,border-color .15s;line-height:1.4}
.drag-item:active{cursor:grabbing}
.drag-item.dragging{opacity:.5}
.drag-item.placed{opacity:.4;cursor:default}
.dropzone{min-height:80px;border:2px dashed var(--border);border-radius:10px;padding:.7rem;background:var(--warm-white);transition:background .15s,border-color .15s;display:flex;flex-wrap:wrap;align-content:flex-start;gap:.3rem}
.dropzone.drag-over{background:var(--primary-pale);border-color:var(--primary)}
.dropzone.correct-zone{background:#d4f5e0;border-color:var(--green);border-style:solid}
.dropzone.wrong-zone{background:#fde8e6;border-color:var(--red);border-style:solid}
.dropzone-label{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem;color:var(--muted)}
/* MISC */
.warning-box{background:#fff3cd;border:1px solid #ffc107;border-left:4px solid #e6a817;border-radius:8px;padding:1rem 1.2rem;font-size:.9rem;line-height:1.6;margin-bottom:1rem}
.warning-box strong{color:#856404}
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:200}
#sidebar-overlay.visible{display:block}
#sidebar.mobile-open{position:fixed;top:0;left:0;bottom:0;z-index:201;transform:translateX(0)!important;box-shadow:4px 0 24px rgba(0,0,0,.2)}
footer{text-align:center;padding:1.2rem;font-size:.74rem;color:var(--muted);border-top:1px solid var(--border);background:var(--warm-white)}
@media(max-width:768px){
  #sidebar{position:fixed;top:0;left:0;bottom:0;z-index:201;transform:translateX(-100%);box-shadow:none}
  #content-area{padding:1.5rem 1rem}
  .rich-text{padding:1.2rem}
  .doc-step-content{padding:1rem}
}
@media(min-width:769px){.btn-menu{display:none!important}#sidebar-overlay{display:none!important}}