:root{--navy:#14345b;--navy2:#0a2543;--blue:#2a7de1;--teal:#11a69a;--green:#19a86b;--gold:#f4b740;--orange:#f07d35;--red:#d84d5f;--purple:#7357cc;--bg:#eef4fa;--card:#fff;--line:#d6e2ee;--text:#17324d;--muted:#5b7189;--shadow:0 14px 38px rgba(20,52,91,.10)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"Noto Sans Thai","Segoe UI",Tahoma,Arial,sans-serif;background:radial-gradient(circle at 10% 0,#dceeff 0,transparent 34%),radial-gradient(circle at 95% 10%,#e8e0ff 0,transparent 30%),linear-gradient(180deg,#f4f8fc,#eef4fa);color:var(--text);min-height:100vh;user-select:none;-webkit-user-select:none}.wrap{max-width:1240px;margin:auto;padding:18px}.top{background:linear-gradient(135deg,var(--navy2),var(--navy) 55%,#285a8c);color:#fff;border-radius:22px;padding:20px 24px;display:flex;justify-content:space-between;gap:18px;align-items:center;box-shadow:0 16px 44px rgba(10,37,67,.24);position:relative;overflow:hidden}.top:after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.06);right:-80px;top:-120px}.top h1{margin:0;font-size:27px;color:#fff}.top .small,.top .dev{color:#dcecff}.dev{font-size:13px;margin-top:6px}.scoreOrb{width:112px;height:112px;border-radius:50%;border:9px solid rgba(255,255,255,.18);display:grid;place-items:center;background:rgba(255,255,255,.09);backdrop-filter:blur(4px);position:relative;z-index:1}.scoreOrb b{font-size:25px}.scoreOrb span{font-size:11px;color:#dcecff}.grid{display:grid;grid-template-columns:310px 1fr;gap:18px;margin-top:18px}.card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.side{padding:15px;position:sticky;top:12px;height:calc(100vh - 24px);overflow:auto}.main{min-height:720px;overflow:hidden}.mainHead{padding:21px 25px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:14px;align-items:flex-start;background:linear-gradient(180deg,#fff,#fbfdff)}.mainHead h2,h1,h2,h3{margin:0;color:var(--navy)}.mainBody{padding:21px 25px 28px}.small{font-size:13.5px;color:var(--muted);line-height:1.5}.section-title{font-weight:900;color:var(--navy);font-size:16px;margin:10px 0 8px}.pill,.badge,.chip{display:inline-flex;align-items:center;border-radius:999px;font-weight:800}.pill{background:#e7f2ff;color:var(--navy);padding:8px 12px}.badge{background:#eef0ff;color:#4b3ca5;padding:6px 10px;font-size:12px}.chip{padding:7px 10px;background:#f0f6fb;color:#355674;font-size:12px;border:1px solid #dce7f1}.chips{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0}.meter{height:10px;background:#e6edf5;border-radius:999px;overflow:hidden}.meter span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--teal),var(--green));border-radius:999px;transition:.35s}.btn{border:0;border-radius:12px;padding:11px 16px;font-weight:850;cursor:pointer;background:linear-gradient(135deg,var(--blue),#3667d9);color:#fff;box-shadow:0 5px 14px rgba(42,125,225,.22);font-family:inherit}.btn:hover{transform:translateY(-1px);filter:brightness(.98)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn.secondary{background:#f1f5f9;color:var(--navy);box-shadow:none;border:1px solid var(--line)}.btn.green{background:linear-gradient(135deg,var(--green),#0b8f71)}.btn.orange{background:linear-gradient(135deg,var(--orange),#d85b2c)}.btn.red{background:var(--red)}.secBtn{width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:14px;padding:11px;margin:6px 0;cursor:pointer;color:var(--text)}.secBtn:hover{border-color:#9ec8ef;background:#f8fcff}.secBtn.active{border-color:var(--blue);box-shadow:0 0 0 3px #e4f1ff}.secBtn.done{background:#f0fbf6;border-color:#b9e7cf}.secRow{display:flex;justify-content:space-between;gap:8px;align-items:center}.moduleIcon{font-size:20px;margin-right:5px}.heroGrid{display:grid;grid-template-columns:1.45fr .75fr;gap:17px}.heroBox{background:linear-gradient(135deg,#f7fbff,#eef6ff 55%,#f3efff);padding:22px;border-radius:18px;border:1px solid #d9e8f5}.login{padding:20px;border-radius:18px;border:1px solid var(--line);background:#fff}.field{margin:12px 0}.field label{display:block;font-weight:800;margin-bottom:6px}.field input{width:100%;padding:12px;border-radius:10px;border:1px solid #bfcfe0;font-size:16px;user-select:text;-webkit-user-select:text}.progressRows{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0}.progressCard{border:1px solid var(--line);border-radius:14px;padding:14px;background:linear-gradient(180deg,#fff,#f8fbfe)}.routeMap{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}.routeCard{border:1px solid var(--line);border-radius:17px;padding:16px;background:#fff;position:relative;overflow:hidden}.routeCard:before{content:"";position:absolute;width:70px;height:70px;border-radius:50%;background:#eef6ff;right:-20px;top:-20px}.routeCard .bigIcon{font-size:32px}.routeCard h3{font-size:16px;margin:7px 0}.lessonGrid{display:grid;grid-template-columns:1.08fr .92fr;gap:16px}.lessonCard{border:1px solid var(--line);border-radius:17px;padding:18px;background:#fff}.lessonCard.accent{background:linear-gradient(145deg,#f7fbff,#eef8ff)}.lessonList{padding-left:22px;line-height:1.72}.exampleBox,.missionBox,.warn,.integrityBox{border-radius:14px;padding:13px 14px;margin-top:12px}.exampleBox{background:#eef8f5;border-left:5px solid var(--teal)}.missionBox{background:#fff8e8;border:1px solid #f1d48f}.warn{background:#fff8ea;border:1px solid #f0d695;color:#654c14}.integrityBox{background:#f4f0ff;border:1px solid #d4c7fa}.reviewCards{display:grid;gap:9px}.flip{border:1px solid var(--line);background:#fff;border-radius:13px;padding:12px;text-align:left;cursor:pointer;font-family:inherit;color:var(--text)}.flip .ans{display:none;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line);color:#0d7b60;font-weight:800}.flip.revealed{border-color:#80cdb5;background:#f3fcf8}.flip.revealed .ans{display:block}.dialogueBox{margin-top:14px;border:1px solid var(--line);border-radius:15px;padding:13px;background:#fbfdff}.turn{padding:9px 11px;border-radius:10px;margin:6px 0;background:#f1f5f9;border-left:4px solid #b5c7da;transition:.2s}.turn.playing{background:#e5f7f2;border-left-color:var(--teal);transform:translateX(3px)}.qBox{max-width:850px;margin:auto}.context{padding:15px 17px;border-radius:15px;background:linear-gradient(135deg,#eef6ff,#f4f0ff);border:1px solid #d8e4f2;line-height:1.65}.prompt{font-size:21px;font-weight:900;color:var(--navy);margin:20px 0 13px;line-height:1.45}.options{display:grid;gap:10px}.opt{display:block;border:1px solid var(--line);border-radius:13px;padding:13px 15px;background:#fff;cursor:pointer;line-height:1.5}.opt:hover{border-color:#83b9ec;background:#f8fcff}.opt.selected{border-color:var(--blue);background:#eaf4ff;box-shadow:0 0 0 2px #d6eaff}.opt input{margin-right:9px}.feedback{display:none}.feedback.show{display:block;margin-top:14px;padding:14px;border-radius:13px;line-height:1.55}.feedback.ok{background:#ebfaf2;border:1px solid #a9dfc3;color:#116843}.feedback.no{background:#fff0f1;border:1px solid #edb6bd;color:#8e2635}.navrow{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-top:18px;flex-wrap:wrap}.attemptBadge{display:inline-flex;gap:6px;align-items:center;background:#fff4dd;color:#805814;padding:7px 10px;border-radius:999px;font-weight:800}.audioPanel{display:flex;gap:10px;align-items:center;margin:12px 0;padding:11px;border-radius:13px;background:#eef8ff;border:1px solid #cbe2f5}.audioPulse{width:13px;height:13px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 0 rgba(42,125,225,.4);animation:pulse 1.6s infinite}@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(42,125,225,0)}100%{box-shadow:0 0 0 0 rgba(42,125,225,0)}}.summaryTable{width:100%;border-collapse:collapse;margin-top:15px}.summaryTable th,.summaryTable td{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left}.summaryTable th{background:#f3f7fb;color:var(--navy)}.sectionComplete{text-align:center;padding:65px 25px}.checkmark{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px;background:#e9faf2;color:var(--green);font-size:42px;font-weight:900}.mastery{font-weight:900}.mastery.high{color:#087b55}.mastery.mid{color:#9a6911}.mastery.low{color:#a22f42}.securityNotice{position:fixed;z-index:9999;right:20px;bottom:20px;background:#102f50;color:#fff;padding:13px 16px;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.2);opacity:0;transform:translateY(10px);transition:.25s;font-weight:800;max-width:380px}.securityNotice.show{opacity:1;transform:translateY(0)}.setCode{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:1px;font-weight:900}.teacherNote{font-size:12px;color:#687e92}.lockLine{display:flex;gap:8px;align-items:center;color:#6b4d13}.lockDot{width:10px;height:10px;border-radius:50%;background:var(--gold)}
@media(max-width:980px){.grid{grid-template-columns:1fr}.side{position:relative;height:auto}.heroGrid,.lessonGrid{grid-template-columns:1fr}.routeMap{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.wrap{padding:9px}.top{padding:16px}.top h1{font-size:21px}.scoreOrb{width:88px;height:88px}.routeMap{grid-template-columns:1fr}.progressRows{grid-template-columns:1fr}.mainBody,.mainHead{padding:16px}.prompt{font-size:18px}.navrow>div{width:100%;display:flex;flex-wrap:wrap;gap:7px}.btn{flex:1}}
@media print{body{display:none!important}}

/* v7 Animated Mini-Lesson */
.animatedLessonWrap{border:1px solid #cfe2f3;border-radius:20px;padding:16px;background:linear-gradient(135deg,#f5fbff,#f9f7ff);box-shadow:0 12px 34px rgba(20,67,104,.10);margin-bottom:18px}
.animatedLessonTitle{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.videoBadge{display:inline-block;background:linear-gradient(90deg,#7353c7,#218bd6);color:#fff;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.8px;margin-bottom:5px}
.sceneStatus{background:#fff;border:1px solid #d9e5ef;color:#0b2f52;padding:7px 11px;border-radius:999px;font-size:13px;font-weight:900;white-space:nowrap}
.animStage{position:relative;aspect-ratio:16/8.2;min-height:330px;border-radius:18px;overflow:hidden;border:1px solid rgba(11,47,82,.16);background:linear-gradient(#bfe4ff 0 54%,#d6c5a4 54%);box-shadow:inset 0 -30px 80px rgba(0,0,0,.08)}
.stageGlow{position:absolute;inset:-30%;background:radial-gradient(circle at 50% 15%,rgba(255,255,255,.9),transparent 42%);pointer-events:none}
.stageWindow{position:absolute;left:7%;top:11%;width:25%;height:31%;border:9px solid rgba(255,255,255,.78);border-radius:10px;background:linear-gradient(140deg,#9ed7ff,#e9f8ff);box-shadow:0 5px 14px rgba(0,0,0,.1)}
.stageWindow:after{content:"";position:absolute;left:48%;top:0;width:5px;height:100%;background:rgba(255,255,255,.8)}
.stageFloor{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(160deg,#e8d4b3,#c8ad84)}
.placeLabel{position:absolute;left:16px;top:15px;background:rgba(255,255,255,.86);backdrop-filter:blur(6px);padding:7px 10px;border-radius:10px;font-size:12px;font-weight:900;color:#0b2f52}
.sceneCharacter{position:absolute;bottom:15%;width:112px;text-align:center;z-index:5;transform:translateY(28px);opacity:.15;transition:.65s cubic-bezier(.2,.8,.2,1)}
.animStage.running .sceneCharacter{transform:translateY(0);opacity:1}
.sceneCharacter.side-left,.sceneCharacter.char-0{left:12%}.sceneCharacter.side-right{right:12%}.sceneCharacter.side-center{left:44%}
.sceneCharacter.char-1:not(.side-right):not(.side-center){right:12%}
.characterHead{font-size:68px;filter:drop-shadow(0 5px 5px rgba(0,0,0,.18));transform-origin:50% 80%}
.characterBody{width:64px;height:88px;margin:-10px auto 0;border-radius:25px 25px 16px 16px;background:linear-gradient(150deg,#218bd6,#0b5b96);box-shadow:0 8px 12px rgba(0,0,0,.16)}
.char-1 .characterBody{background:linear-gradient(150deg,#12a36a,#08734a)}.char-2 .characterBody{background:linear-gradient(150deg,#f08a24,#c35c0a)}
.characterName{display:inline-block;margin-top:5px;padding:4px 8px;border-radius:999px;background:#fff;font-weight:900;color:#0b2f52;font-size:12px;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.characterShadow{position:absolute;width:84px;height:16px;left:14px;bottom:-5px;border-radius:50%;background:rgba(0,0,0,.16);filter:blur(2px)}
.sceneCharacter.speaking .characterHead{animation:speakerBob .5s ease-in-out infinite alternate}
.sceneCharacter.speaking .characterBody{box-shadow:0 0 0 7px rgba(255,255,255,.38),0 8px 12px rgba(0,0,0,.16)}
.sceneCharacter.listening{filter:saturate(.72);transform:scale(.96)}
@keyframes speakerBob{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(-6px) rotate(1deg)}}
.speechBubble{position:absolute;top:16%;left:34%;width:43%;min-height:108px;background:rgba(255,255,255,.96);border:2px solid rgba(11,47,82,.12);border-radius:18px;padding:14px 17px;z-index:8;box-shadow:0 12px 28px rgba(0,0,0,.13);transition:.35s}
.speechBubble:after{content:"";position:absolute;bottom:-17px;left:18%;border:9px solid transparent;border-top-color:#fff}
.speechBubble.bubble-at-1{left:28%}.speechBubble.bubble-at-1:after{left:auto;right:18%}
.speechBubble.bubble-at-2{left:30%;top:10%}.speechBubble.bubble-at-2:after{left:auto;right:25%}
.bubbleSpeaker{font-size:13px;font-weight:900;color:#7353c7;text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}.bubbleText{font-size:18px;font-weight:800;line-height:1.45;color:#102a43}
.subtitleTrack{position:absolute;left:5%;right:5%;bottom:3.6%;z-index:12;background:rgba(5,19,33,.84);color:#fff;padding:9px 12px;border-radius:10px;text-align:center;font-size:14px;line-height:1.45}
.capWord{padding:1px 2px;border-radius:4px;transition:.15s}.capWord.active{background:#ffd54a;color:#13293d}
.sceneProgress{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.3);z-index:20}.sceneProgress span{height:100%;display:block;background:linear-gradient(90deg,#12a36a,#ffd54a);transition:.35s}
.sceneProp{position:absolute;z-index:3;font-size:50px;filter:drop-shadow(0 5px 5px rgba(0,0,0,.16))}
.sceneControls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.speedControl{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:#41617d}.speedControl select{border:1px solid #d8e4ef;border-radius:8px;padding:7px;background:#fff}
.noticeChallenge{margin-top:10px;padding:11px 13px;border-radius:12px;background:#fff6dd;border-left:5px solid #f0a21f;color:#5b4b1e;line-height:1.55}
.compactTranscript .turn{display:flex;gap:8px;align-items:flex-start}.turnSpeaker{min-width:70px;font-weight:900;color:#7353c7}.turn.playing{background:#e9f8f1;border-color:#83d3ad;transform:translateX(4px)}
/* scene-specific props */
.box{bottom:15%;font-size:48px}.box1{left:35%}.box2{left:42%;bottom:13%}.plant{right:4%;bottom:17%}
.theme-neighborhood.beat-2 .box1,.theme-neighborhood.beat-2 .box2{animation:boxLift .7s ease-in-out infinite alternate}@keyframes boxLift{to{transform:translateY(-12px) rotate(3deg)}}
.laptop{left:40%;bottom:24%}.phone{left:50%;bottom:39%;font-size:34px}.car{right:3%;bottom:18%;font-size:72px}
.theme-favor.beat-1 .phone{animation:ring .28s linear infinite alternate}.theme-favor.beat-2 .car{animation:carShake .35s linear infinite alternate}@keyframes ring{to{transform:rotate(18deg) scale(1.1)}}@keyframes carShake{to{transform:translateX(5px) rotate(2deg)}}
.books{left:42%;bottom:19%}.files{left:50%;bottom:20%}.chair{right:3%;bottom:18%}.theme-requests.beat-2 .files{animation:slideFiles .8s ease infinite alternate}@keyframes slideFiles{to{transform:translateX(34px)}}
.donationBox{left:43%;bottom:17%}.note{left:53%;bottom:35%;font-size:38px}.megaphone{right:5%;bottom:22%}.theme-reported.beat-1 .note,.theme-reported.beat-3 .note{animation:notePop .5s ease infinite alternate}@keyframes notePop{to{transform:translateY(-9px) scale(1.08)}}
.tableProp{left:42%;bottom:15%;font-size:74px}.pin{right:6%;bottom:31%;font-size:38px}.questionMark{left:52%;top:20%;font-size:42px}.theme-questions.beat-0 .questionMark,.theme-questions.beat-2 .questionMark{animation:qFloat .7s ease infinite alternate}@keyframes qFloat{to{transform:translateY(-12px) rotate(6deg)}}
.sink{left:43%;bottom:14%;font-size:76px}.drop{left:50%;font-size:31px}.drop1{bottom:31%}.drop2{bottom:24%}.wrench{right:5%;bottom:25%;font-size:52px}
.theme-repairs .drop{animation:drip 1.1s linear infinite}.theme-repairs .drop2{animation-delay:.45s}.theme-repairs.beat-2 .wrench{animation:wrenchTurn .7s ease-in-out infinite alternate}@keyframes drip{0%{transform:translateY(-12px);opacity:0}35%{opacity:1}100%{transform:translateY(45px);opacity:0}}@keyframes wrenchTurn{to{transform:rotate(32deg) scale(1.08)}}
@media(max-width:760px){.animStage{min-height:360px;aspect-ratio:auto}.speechBubble{left:25%;width:64%;top:12%}.sceneCharacter{width:88px}.sceneCharacter.side-left,.sceneCharacter.char-0{left:5%}.sceneCharacter.side-right{right:5%}.sceneCharacter.side-center{left:38%}.characterHead{font-size:54px}.characterBody{width:52px;height:73px}.sceneProp{transform:scale(.8)}.speedControl{margin-left:0}}


/* v8 Linear Learning Flow UX */
.linearStepper{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr) 46px minmax(0,1fr);align-items:center;gap:8px;margin:0 0 18px;padding:13px;border:1px solid #d7e5f1;border-radius:16px;background:linear-gradient(135deg,#f8fbff,#f7f5ff)}
.linearStepper>i{height:4px;border-radius:999px;background:#dbe5ef}.flowStep{display:flex;align-items:center;gap:10px;min-width:0;color:#6c8094}.flowStep>span{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e6edf4;color:#667b8f;font-weight:900}.flowStep b{display:block;color:#5c7286}.flowStep small{display:block;font-size:11px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flowStep.active>span{background:linear-gradient(135deg,var(--blue),#6753cd);color:#fff;box-shadow:0 0 0 5px #e7efff}.flowStep.active b{color:var(--navy)}.flowStep.done>span{background:var(--green);color:#fff}.flowStep.done>span:before{content:'✓';font-size:17px}.flowStep.done>span{font-size:0}.flowStep.done b{color:#087452}.flowInstruction,.questionGuide{margin:0 0 16px;padding:12px 14px;border-radius:13px;background:#edf6ff;border-left:5px solid var(--blue);color:#31536f;line-height:1.55}.questionGuide{background:#fff8e8;border-left-color:var(--gold);color:#654c14}
.practiceGate{position:sticky;top:10px;z-index:50;margin-top:20px;padding:17px 18px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:0 16px 38px rgba(13,45,76,.20);backdrop-filter:blur(12px)}.practiceGate.locked{background:rgba(241,244,248,.96);border:1px solid #cfd9e3}.practiceGate.ready{background:linear-gradient(135deg,rgba(234,251,243,.98),rgba(237,248,255,.98));border:2px solid #7bcda5;animation:gateReadyPulse 1.4s ease 2}.gateInfo{min-width:0;flex:1}.gateEyebrow{font-size:11px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:#6c7f92}.gateInfo h3{margin:3px 0 4px}.gateMessage{font-size:13px;color:#5b7189;line-height:1.45}.gateMeter{height:7px;margin-top:9px;border-radius:999px;overflow:hidden;background:#d9e3ec}.gateMeter span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--teal),var(--green));transition:width .5s}.gateActions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.startPracticeBtn{min-width:250px;font-size:16px;padding:14px 19px}.practiceGate.locked .startPracticeBtn{background:#9aa8b5!important;color:#f6f8fa;box-shadow:none}.lessonReadyBadge{background:#e7f9ef!important;color:#087452!important;border:1px solid #a9dfc2}@keyframes gateReadyPulse{50%{box-shadow:0 0 0 8px rgba(25,168,107,.13),0 16px 38px rgba(13,45,76,.20)}}
.questionNav{padding:13px;border-radius:14px;background:#f7faff;border:1px solid #dbe6f0}.completionNext{max-width:650px;margin:24px auto 14px;padding:16px 18px;border-radius:16px;background:#edf9f3;border:1px solid #aee0c5;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left}
@media(max-width:760px){.linearStepper{grid-template-columns:1fr;gap:6px}.linearStepper>i{width:4px;height:18px;margin-left:15px}.practiceGate{position:sticky;bottom:5px;display:block;padding:14px}.gateActions{margin-top:12px;display:grid;grid-template-columns:1fr}.startPracticeBtn{min-width:0;width:100%}.completionNext{display:block;text-align:center}.completionNext .btn{margin-top:12px;width:100%}}

.bottomNextReminder{margin-top:16px;padding:12px 14px;text-align:center;border:1px dashed #9db7cf;border-radius:13px;background:#f7fbff;color:#41617d;cursor:pointer}.bottomNextReminder:hover{background:#edf6ff;border-color:var(--blue)}


/* v9: Bottom action — the practice gate follows the lesson content naturally. */
.practiceGate{
  position:relative !important;
  top:auto !important;
  bottom:auto !important;
  margin-top:14px;
  scroll-margin-top:18px;
}
.endOfLessonCue{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:20px;
  padding:14px 16px;
  border:1px dashed #a7bfd5;
  border-radius:15px;
  background:linear-gradient(135deg,#f7fbff,#f6fff9);
  color:#31536f;
}
.endCueIcon{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e3f8ee;
  color:#087452;
  font-size:20px;
  font-weight:900;
}
@media(max-width:760px){
  .practiceGate{
    position:relative !important;
    top:auto !important;
    bottom:auto !important;
  }
}


/* Bilingual learning presentation */
.headingThai{
  display:block;
  margin-top:3px;
  font-size:12px;
  font-weight:700;
  color:#58738c;
}
.sceneTitleThai{
  margin:2px 0 4px;
  color:#365c7c;
  font-weight:800;
}
.lessonPoint{
  margin-bottom:12px;
}
.enText,.modelEnglish,.dialogueEnglish,.missionEnglish{
  display:block;
  color:#17324d;
  line-height:1.55;
}
.thText,.modelThai,.dialogueThai,.missionThai,.thaiFront,.thaiAnswer,.noticeThai,.bubbleThai,.captionThai{
  display:block;
  color:#5b4869;
  line-height:1.58;
}
.lessonPoint .thText{
  margin-top:4px;
  padding-left:10px;
  border-left:3px solid #cbb8e8;
  font-size:14px;
}
.goalPair{
  padding:12px 14px;
  background:#f7fbff;
  border:1px solid #d9e7f1;
  border-radius:12px;
}
.goalPair .thText{
  margin-top:7px;
}
.modelItem{
  margin-bottom:13px;
  padding:10px 12px;
  border-radius:11px;
  background:#fff;
  border:1px solid #e2eaf1;
}
.modelEnglish{
  font-weight:800;
}
.modelThai{
  margin-top:4px;
}
.modelNote{
  display:block;
  margin-top:5px;
  color:#6b7681;
  font-size:13px;
  line-height:1.5;
}
.missionEnglish{
  font-weight:700;
}
.missionThai{
  margin-top:7px;
  padding-top:7px;
  border-top:1px dashed rgba(255,255,255,.55);
}
.bilingualTurn{
  align-items:flex-start !important;
}
.turnContent{
  display:block;
  flex:1;
}
.dialogueThai{
  margin-top:3px;
  font-size:14px;
}
.bilingualFlip{
  text-align:left;
}
.thaiFront{
  margin-top:3px;
  font-size:13px;
  font-weight:700;
}
.reviewPrompt{
  margin-top:6px;
}
.thaiAnswer{
  margin-top:5px;
  font-size:13px;
}
.noticeThai{
  margin-top:5px;
  color:#6a5720;
}
.bubbleThai{
  margin-top:7px;
  padding-top:7px;
  border-top:1px solid #e6dff1;
  font-size:14px;
  font-weight:700;
}
.subtitleTrack .captionThai{
  margin-top:4px;
  color:#d9e9f8;
  font-size:13px;
}
.placeLabel{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.placeLabel small{
  margin-top:2px;
  font-size:10px;
  color:#5a6f82;
}
.speechBubble{
  min-height:145px;
}
.animStage{
  min-height:370px;
}
@media(max-width:760px){
  .speechBubble{
    min-height:155px;
  }
  .dialogueThai,.thText,.modelThai,.missionThai{
    font-size:13px;
  }
}



/* Unit 8 animated scene props */
.u8Storm{left:39%;top:18%;font-size:62px}.u8Furnace{left:50%;bottom:17%;font-size:64px}.u8Roof{right:5%;bottom:18%;font-size:68px}.theme-forecast .u8Storm{animation:u8float 1s ease-in-out infinite alternate}.theme-forecast.beat-1 .u8Furnace{animation:u8pulse .65s ease-in-out infinite alternate}
.u8Customs{left:40%;bottom:17%;font-size:64px}.u8Bag{left:52%;bottom:16%;font-size:64px}.u8Plane{right:4%;top:23%;font-size:62px}.theme-flight .u8Plane{animation:u8slide 1.2s ease-in-out infinite alternate}.theme-flight.beat-3 .u8Bag{animation:u8float .65s ease-in-out infinite alternate}
.u8Image{left:40%;bottom:18%;font-size:64px}.u8Move{left:53%;bottom:22%;font-size:58px}.u8Mouse{right:5%;bottom:18%;font-size:60px}.theme-polite .u8Move{animation:u8slide .65s ease-in-out infinite alternate}.theme-polite.beat-3 .u8Mouse{animation:u8pulse .55s ease-in-out infinite alternate}
.u8Person{left:40%;bottom:18%;font-size:60px}.u8ActiveArrow{left:53%;bottom:22%;font-size:58px}.u8Tool{right:5%;bottom:18%;font-size:62px}.theme-activecause .u8ActiveArrow{animation:u8slide .6s ease-in-out infinite alternate}.theme-activecause.beat-1 .u8Tool{animation:u8float .7s ease-in-out infinite alternate}
.u8ServiceHouse{left:40%;bottom:17%;font-size:68px}.u8Done{left:54%;bottom:22%;font-size:58px}.u8ServiceTool{right:5%;bottom:18%;font-size:62px}.theme-passivecause .u8Done{animation:u8pulse .65s ease-in-out infinite alternate}.theme-passivecause.beat-2 .u8ServiceTool{animation:u8float .65s ease-in-out infinite alternate}
.u8Clue{left:40%;bottom:18%;font-size:62px}.u8Evidence{left:53%;bottom:19%;font-size:60px}.u8Barrier{right:5%;bottom:18%;font-size:62px}.theme-crime2 .u8Clue{animation:u8pulse .7s ease-in-out infinite alternate}.theme-crime2.beat-2 .u8Barrier{animation:u8float .7s ease-in-out infinite alternate}
@keyframes u8float{to{transform:translateY(-12px) rotate(4deg)}}@keyframes u8pulse{to{transform:scale(1.16)}}@keyframes u8slide{to{transform:translateX(18px)}}
.studentResultStrip{display:grid;grid-template-columns:1.15fr 1fr 1fr .8fr;gap:10px;padding:12px;border:1px solid #d5e1ec;background:#f8fbfe;border-radius:14px}.studentResultStrip>div{padding:10px 12px;background:white;border-radius:10px}.studentResultStrip span{display:block;font-size:12px;color:#667b91;margin-bottom:4px}.studentResultStrip b{font-size:17px;color:#17324d;word-break:break-word}.submitStatus{border-radius:13px;padding:14px 16px;border:1px solid #d5e1ec;display:flex;gap:8px;flex-direction:column}.submitStatus.success{background:#ecfaf3;border-color:#a9ddc2;color:#14643e}.submitStatus.pending{background:#fff8e8;border-color:#efd39b;color:#77520c}.submitStatus.error{background:#fff0ed;border-color:#e7b3a8;color:#913a29}.submitStatus.neutral{background:#f5f8fb;color:#53697f}.submitStatus span{font-size:13px;line-height:1.55}@media(max-width:760px){.studentResultStrip{grid-template-columns:1fr 1fr}}