
/* English Foundations – Episode 01 */
.ef-one{--ef-blue:#5ea9cb;--ef-ink:#36596f;--ef-light:#eff8fc;--ef-line:#dfeef4;color:var(--ef-ink)}.ef-one *{box-sizing:border-box}
.ef-top{display:flex;justify-content:space-between;align-items:center;gap:15px;background:linear-gradient(110deg,#e3f4fc,#f5fcfe);border-radius:22px;padding:28px 30px}.ef-kicker{font-size:11px;font-weight:850;letter-spacing:1.7px;color:#6da1bc;margin-bottom:10px}.ef-top h1{margin:0 0 10px;font-size:clamp(24px,3vw,33px)}.ef-top p{max-width:620px;color:#7394a6;font-size:13px}.ef-bubble{border-radius:19px;background:white;color:#5e95ac;padding:22px;box-shadow:0 9px 22px #559abb12;font-size:15px;min-width:180px}.ef-lessonbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:18px 2px;font-size:12px;color:#7a98a7}.ef-course{display:grid;grid-template-columns:minmax(0,1fr) 216px;gap:16px}.ef-tabs{display:flex;gap:7px;overflow-x:auto;margin-bottom:14px;padding:2px}.ef-btn{border:1px solid #dcecf3;border-radius:10px;background:white;padding:10px 13px;font-weight:700;font-size:12px;color:#527f95;cursor:pointer;text-align:center;min-height:38px}.ef-btn:hover{background:#eff8fd}.ef-btn:disabled{cursor:default;opacity:.58}.ef-btn.primary{background:var(--ef-blue);color:#fff;border-color:var(--ef-blue)}.ef-btn.soft{background:#e6f5fb;border-color:#e6f5fb}.ef-btn.outline{border-color:#b6d8e7}.ef-tabs .ef-btn{white-space:nowrap}.ef-btn.active,.ef-tabs .ef-btn.active{background:var(--ef-blue);border-color:var(--ef-blue);color:white}.ef-body,.ef-panel{border:1px solid var(--ef-line);background:white;border-radius:17px;padding:23px}.ef-body{min-height:340px}.ef-body>h2,.ef-line h2{margin:0 0 8px;font-size:21px}.ef-body>p,.ef-line p{font-size:13px;color:#7695a5}.ef-panel{margin-bottom:13px}.ef-panel h3{font-size:15px;margin:0 0 12px}.ef-panel p{font-size:13px;color:#7895a6}.ef-courseaside .ef-btn{display:block;width:100%;margin-bottom:4px;text-align:left;border:0;background:transparent}.ef-courseaside .ef-btn.active{color:white;background:var(--ef-blue)}.ef-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 0}.ef-bottom small{color:#8cabba}.ef-illustration{display:flex;align-items:center;gap:17px;border-radius:16px;background:#edf8fc;padding:16px 23px;margin-bottom:17px}.ef-illustration>span{font-size:60px}.ef-illustration div{font-size:19px;font-weight:800}.ef-objectives{padding-left:21px;margin:0;line-height:2;font-size:13px}.ef-path{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0 20px}.ef-step{padding:14px;border-radius:12px;background:#f6fbfe;border:1px solid var(--ef-line)}.ef-step b{display:block;font-size:13px}.ef-step small{display:block;font-size:11px;margin-top:6px;line-height:1.6}.ef-video{aspect-ratio:16/9;border-radius:14px;background:#ddebf2;overflow:hidden;margin:15px 0 4px}.ef-video iframe{border:0;width:100%;height:100%}.ef-videofallback{text-align:right;font-size:12px;margin-bottom:20px}.ef-subheading{font-weight:800;font-size:16px;margin:23px 0 12px}.ef-question{margin:14px 0;padding:17px;background:#fbfdfe;border:1px solid var(--ef-line);border-radius:13px}.ef-question>b{display:block;font-size:13px;line-height:1.7;margin-bottom:12px}.ef-question .ef-btn{display:block;width:100%;text-align:left;margin:7px 0}.ef-question .ef-btn.selected{background:#e7f5fc;border-color:#6cb4d4}.ef-question .ef-btn.correct{border-color:#68b49c;background:#ebf8f2}.ef-question small{display:block;margin-top:8px}.ef-good{color:#259872}.ef-warn{color:#b58037}.ef-note{background:#eef7fb;border-radius:11px;padding:13px 15px;font-size:12px;color:#6e96a8;line-height:1.7;margin:18px 0}.ef-line{display:flex;align-items:center;justify-content:space-between;gap:12px}.ef-count,.ef-time{font-size:12px;background:#e9f5fa;border-radius:100px;padding:7px 12px;color:#639cb7;white-space:nowrap}.ef-focus{padding:17px;background:#f9fcfd;border:1px solid var(--ef-line);border-radius:14px}.ef-label{display:block;font-size:13px;font-weight:750;margin:14px 0 9px}.ef-input,.ef-textarea{display:block;width:100%;background:white;border-radius:10px;border:1px solid #cfe3ed;padding:12px;color:#365c73;outline-color:#9ccce2;font:inherit;font-size:14px}.ef-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}.ef-actions.center{justify-content:center}.ef-feedback,.ef-answer{margin-top:14px;border-radius:10px;padding:14px;background:#edf6fa;line-height:1.6;font-size:13px}.ef-feedback.good{background:#e7f7ed;color:#288c62}.ef-feedback.bad{background:#fff3ee;color:#aa7256}.ef-answer{background:#f0f9ea}.ef-answer small{display:block}.ef-shadowgrid{display:grid;grid-template-columns:minmax(0,1fr) 235px;gap:14px}.ef-shadowtext{text-align:center;font-size:23px;font-weight:850;padding:12px}.ef-vi{text-align:center;color:#8aa2af}.ef-cuelist{max-height:480px;overflow:auto}.ef-btn.cue{display:block;width:100%;text-align:left;margin-bottom:6px;font-size:11px}.ef-btn.cue.active{color:white;background:var(--ef-blue)}.ef-vocabcard{max-width:570px;margin:18px auto;padding:35px 20px;text-align:center;border-radius:19px;background:#f6fbfe;border:1px solid var(--ef-line)}.ef-emoji{font-size:67px}.ef-vocabcard h2{font-size:31px;margin:10px}.ef-vocabcard>p{font-size:13px;color:#7f9ba9}.ef-vimeaning{font-size:21px;font-weight:800;color:#4c92b6}.ef-patterns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.ef-pattern{background:#f8fcfd;border:1px solid var(--ef-line);padding:18px;border-radius:12px}.ef-pattern>span{font-size:12px;color:#81b2c8}.ef-pattern h3{font-size:16px;margin:8px 0}.ef-pattern div{font-size:13px;margin-bottom:8px}.ef-pattern small{font-size:12px;color:#819daa}.ef-gamebuttons{display:flex;flex-wrap:wrap;gap:8px;margin:15px 0}.ef-gamebody{border:1px solid var(--ef-line);padding:20px;border-radius:14px}.ef-gamebody h3{margin:0 0 11px}.ef-prompt{font-size:16px!important;font-weight:750}.ef-wordbox,.ef-wordbank{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:14px;min-height:70px;border:1px dashed #bedbe9;border-radius:12px;margin:12px 0}.ef-wordbox{background:#f4fafc}.ef-wordbox>span{color:#95aab5;font-size:13px}.ef-btn.word{background:white}.ef-btn.word.picked{background:#dceef7}.ef-fill{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:750;flex-wrap:wrap}.ef-fill .ef-input{max-width:150px;display:inline-block}.ef-matching{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ef-matching>div{display:flex;flex-direction:column;gap:8px}.ef-matching .ef-btn.matched{background:#e3f5e9;border-color:#a9ddbd}.ef-dialogue{background:#e5f3fa;padding:20px;border-radius:12px;display:flex;flex-direction:column;gap:8px}.ef-dialogue span{font-size:12px;color:#78a2b7}.ef-homework{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ef-homework .ef-btn{margin:12px 0}.ef-score{text-align:center;padding:20px;background:#fff3ee;border-radius:15px;color:#bc764e}.ef-score.passed{background:#e6f8ee;color:#268d62}.ef-score strong{display:block;font-size:40px}.ef-score span{display:block;font-size:13px}@media(max-width:1120px){.ef-course{grid-template-columns:1fr}.ef-courseaside{display:none}.ef-shadowgrid{grid-template-columns:1fr}.ef-cuelist{max-height:190px}}@media(max-width:660px){.ef-top{padding:20px}.ef-bubble{display:none}.ef-path,.ef-patterns,.ef-homework{grid-template-columns:1fr}.ef-body{padding:15px}.ef-shadowtext{font-size:19px}.ef-illustration>span{font-size:45px}}

/* Curated vocabulary practice – clear UK/US IPA and four learning modes */
.ef-vocab-modes{display:flex;flex-wrap:wrap;gap:9px;margin:17px 0}
.ef-vocab-modes .ef-btn{flex:1 1 125px}
.ef-vocabwork{max-width:720px;padding:24px 26px}
.ef-vocabstate{display:inline-block;background:#e9f5fa;border-radius:20px;padding:7px 13px;color:#649bb5;font-size:12px;font-weight:700;margin-bottom:13px}
.ef-ipa-rows{display:grid;gap:8px;margin:18px auto;max-width:420px}
.ef-ipa-row{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;align-items:center;padding:8px 13px;border:1px solid #dfeef4;border-radius:13px;text-align:left;background:white}
.ef-ipa-row>span:nth-child(2){font-size:17px;letter-spacing:0.2px;white-space:normal}
.ef-ipa-tag{font-size:12px;font-weight:800;background:#eaf6fc;color:#4187a8;padding:7px 6px;text-align:center;border-radius:8px}
.ef-ipa-row .ef-btn{padding:8px;width:42px;min-height:39px}
.ef-vocabwork .ef-input{margin:12px auto;max-width:440px}
.ef-vocabwork h3{font-size:19px;margin:10px 0}
.ef-vocabwork audio{display:block;width:100%;margin:16px auto}
.ef-vocab-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px auto;max-width:520px}
.ef-vocab-choices .ef-btn{min-height:53px;white-space:normal}
.ef-vocab-choices .ef-btn.selected{border-color:#409dc2;background:#d8f2fb}
.ef-vocab-srs{margin:16px 0;border:1px solid #deedf4;border-radius:14px;background:#f6fbfd;padding:18px 20px}
.ef-vocab-srs h3{margin:0 0 8px;font-size:17px}
.ef-vocab-srs p{font-size:13px;color:#7096a8;line-height:1.6;margin:8px 0 15px}
.ef-vocab-srs>small{display:block;margin-top:10px;color:#5b92aa}
.ef-vocab-grade{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.ef-vocab-grade .ef-btn{font-weight:800;min-height:45px;padding:9px 4px}
.ef-vocab-grade .grade-1{border-color:#edb7ad;background:#fff1ee;color:#a65647}
.ef-vocab-grade .grade-3{border-color:#eccba2;background:#fff7e9;color:#996d31}
.ef-vocab-grade .grade-4{border-color:#a9d3e8;background:#eaf7fc;color:#367e9e}
.ef-vocab-grade .grade-5{border-color:#a4dbb3;background:#ebf9ef;color:#398751}
.ef-vocab-grade .ef-btn:disabled{opacity:.46}
.ef-vocab-next{justify-content:space-between;margin:18px 0 22px}
.ef-review-card{max-width:820px;margin:20px auto;text-align:center;padding:34px 25px}
.ef-review-card>h2{font-size:clamp(23px,3.5vw,32px);color:#365a71;margin:15px 0 25px}
.ef-review-card .ef-answer{text-align:center;padding:25px}
.ef-review-card .ef-answer h2{font-size:30px;margin:6px 0 16px}
.ef-review-card .ef-vocab-srs{text-align:left}
@media(max-width:600px){
 .ef-vocabwork{padding:20px 15px}
 .ef-ipa-row{gap:6px;padding:8px;grid-template-columns:36px minmax(0,1fr) 38px}
 .ef-ipa-row>span:nth-child(2){font-size:14px}
 .ef-vocab-choices{grid-template-columns:1fr}
 .ef-vocab-grade{gap:5px}
 .ef-vocab-grade .ef-btn{font-size:11px}
}

/* Sentence patterns: formula first, examples second, personal application third */
.ef-structures{display:grid;gap:18px;margin-top:20px}
.ef-structure{border:1px solid #dcecf3;border-radius:16px;background:#fff;padding:23px}
.ef-structure-number{display:inline-flex;padding:6px 10px;border-radius:999px;background:#edf8fc;color:#4e97b7;font-size:11px;letter-spacing:1px;font-weight:800}
.ef-structure>h3{margin:12px 0;font-size:20px}
.ef-formula{font-size:clamp(16px,2.3vw,22px);color:#23688b;font-weight:800;border-left:4px solid #79b8d6;background:#edf8fd;padding:16px 18px;border-radius:0 10px 10px 0;overflow-wrap:anywhere}
.ef-structure>p{line-height:1.7;font-size:13px;color:#6b8b9d}
.ef-examples{margin:18px 0;display:grid;gap:9px}
.ef-examples>b{font-size:13px;color:#386b88}
.ef-example{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#f8fcfe;border:1px solid #e1eef5;padding:11px 13px;border-radius:9px}
.ef-example strong{color:#325e77;font-size:14px}
.ef-example span{color:#7294a7;font-size:12px}
.ef-apply{padding:17px;border-radius:12px;background:#f5fafc;border:1px dashed #badde9}
.ef-apply .ef-label{margin-top:0}
.ef-apply .ef-actions{margin-top:10px}
.ef-external-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;margin:12px 0;max-width:100%}
.ef-mission-steps{display:grid;gap:9px;background:#f4fafc;border-radius:12px;padding:14px 16px;margin:15px 0;font-size:12px;color:#608da5}
.ef-mission-caption{font-size:12px;color:#7d9caf;line-height:1.65}
.ef-homework .ef-panel{min-width:0}
.ef-homework .ef-textarea{min-height:210px}
@media(max-width:700px){.ef-structure{padding:16px}.ef-example{display:block}.ef-example span{display:block;margin-top:5px}}

/* Advanced Shadowing – compact lesson controls inspired by language-learning best practices */
.ef-shadow-app{color:#395b73;max-width:1080px}
.ef-shadow-title,.ef-shadow-stats,.ef-shadow-control-row,.ef-shadow-actions,.ef-shadow-mobile-nav{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ef-shadow-title{margin:0 0 12px}
.ef-shadow-title h2{margin:0;font-size:22px}
.ef-shadow-stats{background:#eff7fe;border-radius:12px;padding:12px 14px;color:#477b9c;font-weight:700;font-size:13px;flex-wrap:wrap;margin-bottom:16px}
.ef-shadow-media{margin:10px 0 18px}
.ef-shadow-media .ef-video{width:100%;margin:0;aspect-ratio:16/9}
.ef-shadow-player-status{font-size:12px;color:#6691a8;text-align:center;margin:9px 0}
.ef-shadow-controls{background:#f7fafc;border:1px solid #e2ebf1;border-radius:16px;padding:15px;margin:14px 0}
.ef-shadow-control-row{flex-wrap:wrap;justify-content:flex-start;padding:6px 0}
.ef-shadow-control-group{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.ef-shadow-control-group>span{font-size:13px;font-weight:800;margin-right:8px}
.ef-shadow-control-group .ef-btn{min-width:42px}
.ef-shadow-switchgroup{display:flex;align-items:center;gap:4px;margin-right:18px}
.ef-shadow-control-row .ef-btn{padding:9px 11px}
.ef-shadow-settings{display:grid;gap:14px;margin:14px 0 0;border-top:1px solid #dceaf1;padding:18px 6px 4px}
.ef-shadow-settings label{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:13px;font-weight:700}
.ef-shadow-settings input[type=checkbox]{width:20px;height:20px;accent-color:#64a9ca;flex-shrink:0}
.ef-shadow-settings select{border:1px solid #c5e1ed;border-radius:8px;padding:5px;background:white;color:#497d98}
.ef-shadow-help{border-top:1px solid #e3eff5;padding-top:11px;color:#7595a7;font-size:12px}
.ef-shadow-learning{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:14px}
.ef-shadow-card{border:1px solid #d8e8f0;border-radius:18px;padding:24px 20px;text-align:center;background:#fff;min-width:0}
.ef-shadow-cuenum{display:block;color:#7799ae;font-weight:800;font-size:13px;text-align:left}
.ef-shadow-current{font-size:clamp(20px,3vw,28px);line-height:1.55;font-weight:800;min-height:110px;display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere;padding:18px 0}
.ef-shadow-ipa{font-size:14px;background:#f1f8fc;color:#5a91ad;border-radius:10px;padding:12px;line-height:1.6}
.ef-shadow-vi{font-size:16px;line-height:1.6;color:#7a9bac;margin:0 0 22px}
.ef-shadow-actions{justify-content:center;flex-wrap:wrap;margin:22px 0 10px}
.ef-shadow-actions .ef-btn{flex:1 1 130px;max-width:195px;min-height:55px;border-radius:100px}
.ef-shadow-audio{width:100%;max-width:530px;margin:15px auto;display:block}
.ef-shadow-result{background:#f4fafc;border:1px solid #dbeef4;border-radius:13px;padding:15px;text-align:left;margin:16px 0}
.ef-shadow-score{font-size:25px;font-weight:900;color:#3c98b3;margin:10px 0}
.ef-shadow-score small{font-size:12px;font-weight:400;color:#7f9bab}
.ef-shadow-record{color:#6c98b2;font-size:13px}
.ef-shadow-disclaimer{font-size:11px;color:#809cae;line-height:1.6;margin:14px 0 0}
.ef-shadow-notice{background:#edf8fd;color:#4c91aa;padding:12px;border-radius:11px;margin:11px 0}
.ef-shadow-cues{border:1px solid #dbeaf1;border-radius:15px;background:#f8fcfe;padding:13px;max-height:490px;overflow:auto}
.ef-shadow-cues>b{display:block;margin-bottom:12px;font-size:13px}
.ef-shadow-cues .ef-btn{display:block;text-align:left;width:100%;white-space:normal;line-height:1.5;margin:4px 0 8px;border:1px solid #e2eff5;font-size:11px}
.ef-shadow-cues .ef-btn.active{background:#60a9cc;color:white;border-color:#60a9cc}
.ef-shadow-mobile-nav{padding:18px 0 6px;justify-content:flex-end}
.ef-shadow-mobile-nav .ef-btn{min-width:55px;font-size:15px}
.ef-shadow-mobile-nav .ef-btn:last-child{background:#64a9cc;color:white;border-color:#64a9cc}
@media(max-width:900px){.ef-shadow-learning{grid-template-columns:1fr}.ef-shadow-cues{max-height:185px;display:block}.ef-shadow-cues .ef-btn{display:inline-flex;align-items:center;width:auto;max-width:100%;margin-right:6px}}
@media(max-width:600px){
 .ef-shadow-title h2{font-size:17px}
 .ef-shadow-title .ef-count{font-size:11px}
 .ef-shadow-stats{font-size:11px;gap:7px;padding:10px}
 .ef-shadow-controls{padding:12px}
 .ef-shadow-control-row{gap:8px}
 .ef-shadow-switchgroup{margin-right:0}
 .ef-shadow-control-group>span{width:100%;margin:0}
 .ef-shadow-control-row .ef-btn{font-size:11px;padding:8px}
 .ef-shadow-card{padding:16px}
 .ef-shadow-current{min-height:80px}
 .ef-shadow-actions{gap:6px}
 .ef-shadow-actions .ef-btn{flex:1 1 85px;min-width:0;font-size:11px;padding:10px 7px}
 .ef-shadow-mobile-nav{position:sticky;bottom:0;background:#f7fbfe;border-top:1px solid #deedf5;margin:14px -15px -15px;padding:12px 15px;z-index:5}
 .ef-shadow-mobile-nav .ef-btn{min-height:47px}
}

/* Communication · Step 6 Reading */
.ef-reading-tools{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.ef-reading-passage{background:#f7fbfe;border:1px solid #d9ebf3;border-radius:17px;padding:19px 23px;display:grid;gap:10px}
.ef-reading-line{display:grid;gap:6px;border-bottom:1px dashed #e1eef3;padding:9px 0}
.ef-reading-line:last-child{border-bottom:0}
.ef-reading-line strong{font-size:16px;color:#315b76;font-weight:740;line-height:1.6}
.ef-reading-line span{font-size:13px;color:#7e9bad;line-height:1.6}
.ef-reading-questions{margin-top:26px}
.ef-reading-questions>h3{font-size:19px;margin-bottom:5px}
.ef-reading-questions>p{color:#7294a8;font-size:13px}
.ef-reading-questions .ef-question small{margin-bottom:9px}
.ef-writing-area{min-height:260px;font-size:15px;line-height:1.85}
.ef-body>h2 + p{font-size:13px;color:#6f94a9}
.ef-body>section.ef-panel{max-width:840px}
@media(max-width:630px){.ef-reading-passage{padding:12px 15px}.ef-reading-line strong{font-size:15px}.ef-reading-tools .ef-btn{flex:1 1 120px}}

/* Dictation · video and handwriting left; sentence progress list right */
.ef-course:has(.ef-dict-app){grid-template-columns:minmax(0,1fr)}
.ef-course:has(.ef-dict-app)>.ef-courseaside{display:none}
.ef-dict-app{width:100%;min-width:0}
.ef-dict-grid{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:18px;align-items:start;margin-top:13px}
.ef-dict-main,.ef-dict-aside{min-width:0}
.ef-dict-media{border-radius:18px;background:#f7fbfd;overflow:hidden;margin-bottom:13px}
.ef-dict-media #ef-segment-status{text-align:center;color:#7e9aa9;font-size:12px;margin:10px}
.ef-dict-media>.ef-btn{display:block;margin:10px auto 15px}
.ef-dict-video-wrap{position:relative}
.ef-dict-video-wrap .ef-video{margin:0;border-radius:16px;aspect-ratio:16/9}
.ef-dict-cover{position:absolute;left:0;right:0;bottom:0;height:21%;background:linear-gradient(180deg,#1f314f 0%,#151f38 95%);border-radius:0 0 14px 14px;display:flex;align-items:center;justify-content:center;color:#cad7e9;font-size:12px;pointer-events:none;opacity:.95}
.ef-dict-toolbar{display:flex;flex-wrap:wrap;gap:9px;margin:12px 0 15px;align-items:center}
.ef-dict-setting{display:flex;flex-wrap:wrap;gap:4px;align-items:center;padding:3px;border-radius:12px;background:#f1f8fc;border:1px solid #e3f0f5}
.ef-dict-setting>span{font-size:12px;font-weight:750;padding:0 9px;color:#6c91a6}
.ef-dict-toolbar .ef-btn{padding:8px 10px;font-size:12px;min-height:36px}
.ef-dict-question{border:1px solid #dcebf2;background:white;border-radius:17px;padding:22px}
.ef-dict-masked{display:flex;gap:8px;flex-wrap:wrap;align-items:end;min-height:70px;padding:18px 14px;background:#f7fafc;border-radius:13px;font-size:20px;color:#375f77;line-height:2}
.ef-dict-blank{display:inline-flex;align-items:end;justify-content:center;min-width:50px;height:31px;border-bottom:2px solid #6d9fca;color:#93a5b1;letter-spacing:3px;white-space:pre}
.ef-dict-fullanswer{font-size:22px;font-weight:800;color:#335f7c;background:#f5fafe;border-radius:12px;padding:22px 15px;line-height:1.7}
.ef-dict-question .ef-input{font-size:16px;margin-top:10px}
.ef-dict-question .ef-actions{display:flex;flex-wrap:wrap;gap:8px}
.ef-dict-question .ef-diff{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ef-dict-question .ef-diff mark{border-radius:6px;background:#ffe9e2;padding:4px 7px;color:#9a3f32}
.ef-dict-question .ef-diff>span{padding:4px 7px}
.ef-dict-question .ef-answer{margin-top:10px}
.ef-dict-ipa{background:#edf7fb;border-radius:11px;padding:13px;color:#5d88a4;font-size:12px;line-height:1.7}
.ef-dict-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:20px;padding-top:15px;border-top:1px solid #e5f0f5}
.ef-dict-bottom .ef-btn{min-width:0}
.ef-dict-keyhelp{font-size:11px;color:#819dad;text-align:center;margin:14px 0 0}
.ef-dict-aside{border:1px solid #d9e8f0;border-radius:16px;background:white;overflow:hidden;position:sticky;top:14px}
.ef-dict-aside-head{padding:18px 15px;border-bottom:1px solid #e0ebf3;display:flex;justify-content:space-between;align-items:center;gap:5px;font-size:13px}
.ef-dict-aside-head small{font-size:11px;color:#7594a5}
.ef-dict-list{max-height:610px;overflow:auto;scrollbar-width:thin}
.ef-dict-list .ef-btn{display:flex;gap:12px;align-items:center;padding:15px 13px;min-height:52px;margin:0;border:0;border-bottom:1px solid #e5eff3;border-radius:0;width:100%;text-align:left;white-space:normal}
.ef-dict-list .ef-btn.active{background:#e5f0fe;border-left:4px solid #3379e9;padding-left:9px}
.ef-dict-list .ef-btn:disabled{opacity:.67;background:#fefefe}
.ef-dict-num{height:28px;min-width:28px;border-radius:50%;background:#f2f5f8;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:850;color:#456d86}
.ef-dict-list .ef-btn.active .ef-dict-num{background:#307be7;color:white}
.ef-dict-skeleton{display:flex;gap:3px;flex-wrap:wrap;align-items:center;flex:1;min-width:0}
.ef-dict-skeleton i{height:13px;border-radius:4px;background:#e9eff5;flex-shrink:0}
.ef-dict-preview{font-size:12px;line-height:1.5;min-width:0;flex:1}
.ef-dict-tick{color:#259574;margin-left:auto;font-size:15px}
@media(max-width:1120px){.ef-dict-grid{grid-template-columns:minmax(0,1fr) 230px}}
@media(max-width:800px){.ef-dict-grid{grid-template-columns:1fr}.ef-dict-aside{position:static}.ef-dict-list{max-height:240px}.ef-dict-setting{flex:1 1 auto}.ef-dict-aside-head{padding:13px}}
@media(max-width:550px){.ef-dict-question{padding:14px}.ef-dict-toolbar .ef-btn{font-size:11px;padding:8px}.ef-dict-masked{font-size:17px;padding:10px}.ef-dict-blank{min-width:38px}.ef-dict-bottom .ef-btn{font-size:11px;padding:9px 7px}.ef-dict-keyhelp{font-size:10px}}

/* Reading Mini-Story · short scenes starring Lani, real language patterns, and a gentle takeaway */
.ef-story-header{background:linear-gradient(115deg,#f1f9fc,#fffaf2);border:1px solid #deedf3;border-radius:18px;padding:24px;margin-bottom:16px}
.ef-story-label{color:#5f94a9;letter-spacing:1.4px;font-size:11px;font-weight:850}
.ef-story-header h2{font-size:clamp(22px,2.8vw,30px);color:#315c73;margin:10px 0 5px;line-height:1.25}
.ef-story-subtitle{color:#568ca6;font-weight:700;font-size:14px;margin:4px 0}
.ef-story-header>p:last-of-type{font-size:13px;line-height:1.7;color:#6d93a7}
.ef-story-characters{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px}
.ef-story-characters>b{font-size:12px;margin-right:4px;color:#557f96}
.ef-story-character{border:1px solid #dbeaf0;background:white;padding:7px 11px;border-radius:999px;color:#4f809b;font-weight:750;font-size:12px}
.ef-reading-scenes{display:grid;grid-template-columns:1fr;gap:14px;margin:20px 0}
.ef-reading-scene{border:1px solid #e0edf3;border-radius:17px;background:white;padding:20px 23px}
.ef-reading-scene:nth-child(even){background:#f9fcfd}
.ef-story-scenehead{display:flex;align-items:center;gap:13px;padding-bottom:14px;border-bottom:1px solid #e9f1f5;margin-bottom:14px}
.ef-story-scene-icon{display:grid;place-items:center;background:#eaf7fc;border-radius:14px;font-size:27px;width:51px;height:51px;flex-shrink:0}
.ef-story-scenehead small{color:#83a9b8;font-size:10px;letter-spacing:1.4px;font-weight:800}
.ef-story-scenehead h3{margin:2px 0;font-size:17px;color:#376881}
.ef-story-scenehead p{margin:4px 0 0;font-size:12px;color:#7c9daa}
.ef-story-lines{display:grid;gap:9px}
.ef-story-line{font-size:15px;line-height:1.8;color:#385f74;margin:0;padding:2px 0}
.ef-story-highlight{font-weight:850;color:#267c9e;background:#eaf8fc;border-radius:4px;padding:1px 2px}
.ef-story-translation{display:block;margin-top:3px;color:#7896a7;font-size:13px;font-weight:400;font-style:italic;line-height:1.7}
.ef-story-moral{display:flex;align-items:flex-start;gap:15px;border-radius:17px;background:#fff9ed;border:1px solid #f2e8cc;padding:23px;margin:18px 0}
.ef-story-moral-icon{font-size:30px}
.ef-story-moral small{display:block;font-size:10px;letter-spacing:1.1px;font-weight:850;color:#a68b5a;margin:0 0 9px}
.ef-story-moral strong{display:block;color:#826e46;font-size:18px;line-height:1.5}
.ef-story-moral p{font-size:13px;margin:7px 0 0;color:#977d51}
.ef-story-challenge{border:1px dashed #a9cedf;background:#f4fafc;padding:20px 22px;border-radius:15px;margin:16px 0 28px}
.ef-story-challenge h3{color:#4b839d;font-size:17px;margin:0 0 9px}
.ef-story-challenge p{color:#395f74;font-weight:700;font-size:14px;margin:0 0 9px;line-height:1.65}
.ef-story-challenge small{color:#7c9fae;line-height:1.6}
@media(max-width:650px){
 .ef-story-header{padding:18px}
 .ef-reading-scene{padding:16px}
 .ef-story-line{font-size:14px}
 .ef-story-moral{padding:17px;gap:10px}
 .ef-story-moral strong{font-size:16px}
}

/* Full-sentence IPA, shared typographic treatment for Dictation + Shadowing */
.ef-dict-ipa,.ef-shadow-ipa{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  background:#edf7fb;border:1px solid #d3e9f4;border-radius:11px;
  padding:14px 16px;line-height:1.8;max-width:100%;overflow-wrap:anywhere
}
.ef-dict-ipa>b,.ef-shadow-ipa>b{font-size:12px;color:#5785a0;font-weight:800;line-height:1.4}
.ef-dict-ipa>span[lang="en-fonipa"],.ef-shadow-ipa>span[lang="en-fonipa"]{
  font-size:clamp(15px,1.8vw,20px);line-height:1.7;letter-spacing:.1px;
  color:#365f79;text-align:left;font-weight:550;
  font-family:"Charis SIL","Doulos SIL","DejaVu Sans","Noto Sans",sans-serif
}
.ef-ipa-uncertain{display:block;font-size:11px;color:#9b753a;line-height:1.6}
.ef-dict-ipa{margin-top:15px}


/* Reading Mini-Story: IPA appears immediately below each English sentence. */
.ef-reading-accent-label{align-self:center;color:#668b9e;font-size:12px;font-weight:750;margin-left:5px}
.ef-story-ipa{display:block;margin-top:5px;padding:7px 11px;border-left:3px solid #b9d9e7;border-radius:0 8px 8px 0;background:#eff8fc;color:#376d87;font-size:14px;font-weight:500;line-height:1.8;overflow-wrap:anywhere}
.ef-story-ipa-missing{background:#fbf9f1;border-left-color:#e5d8ad;color:#8b7a57;font-size:12px;font-style:italic}
.ef-story-ipa-note{display:block;margin-top:3px;color:#6f8c9d;font-size:12px}
@media(max-width:630px){.ef-reading-accent-label{flex-basis:100%;margin-left:0}.ef-story-ipa{font-size:13px}.ef-story-ipa-missing{font-size:12px}}


/* Reading: separate comprehension from guided Read Aloud. */
.ef-reading-mode-switch{display:flex;flex-wrap:wrap;gap:9px;margin:17px 0 8px}
.ef-reading-mode-switch .ef-btn{flex:1 1 190px;font-weight:750;min-height:44px}
.ef-readaloud-instructions{border:1px solid #deedf3;background:#f6fafc;border-radius:14px;padding:14px 17px;color:#426c82;margin:12px 0}
.ef-readaloud-instructions>b{font-size:14px;color:#376d87}
.ef-readaloud-instructions>p{font-size:12px;line-height:1.7;margin:6px 0 0}
.ef-readaloud-legend{display:flex;gap:9px 18px;flex-wrap:wrap;font-size:12px;line-height:1.7;margin-top:10px}
.ef-readaloud-legend span{white-space:normal}
.ef-readaloud-mark{color:#327fa6;white-space:pre;font-weight:750}
.ef-readaloud-tone{color:#327fa6;white-space:pre;font-weight:850}
.ef-readaloud-prominence{font-weight:850;color:#285e7c}
.ef-readaloud-pending{color:#89733c!important;font-style:italic}
@media(max-width:630px){.ef-reading-mode-switch .ef-btn{flex:1 1 145px}.ef-readaloud-instructions{padding:12px}}


/* Writing: compact contact buttons with no visible raw URLs or phone number. */
.fc-writing-contacts{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.fc-writing-contact{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:45px;min-width:132px;padding:10px 17px;border-radius:12px;color:#fff!important;font-size:14px;font-weight:800;text-decoration:none!important;box-shadow:0 4px 12px #256b9b17;transition:filter .15s ease,transform .15s ease}
.fc-writing-contact:hover{filter:brightness(.95);transform:translateY(-1px)}
.fc-writing-contact:focus-visible{outline:3px solid #a6d9ec;outline-offset:3px}
.fc-writing-facebook{background:#1877f2}
.fc-writing-zalo{background:#0068ff}
.fc-writing-brand{display:grid;place-items:center;width:25px;height:25px;flex-shrink:0;border-radius:8px;background:#fff;color:#1877f2;font-size:19px;font-family:Arial,sans-serif;font-weight:900}
.fc-writing-zalo .fc-writing-brand{color:#0068ff;font-size:16px}
@media(max-width:550px){.fc-writing-contact{flex:1 1 135px}}


/* Guided Speaking and the four-step Writing workshop. */
.ef-speaking-cues,.ef-speaking-models,.ef-writing-hints,.ef-writing-original{background:#f5fafd;border:1px solid #e0edf4;border-radius:12px;padding:13px 15px;margin:13px 0}
.ef-speaking-cues ol,.ef-speaking-models ul,.ef-writing-hints ol{margin:9px 0 4px;padding-left:21px;font-size:13px;line-height:1.75}
.ef-speaking-models li{margin:10px 0}.ef-speaking-models li b{display:block;color:#376e89}.ef-speaking-models li span{display:block;color:#708fa2}
.ef-speaking-models summary,.ef-writing-hints summary,.ef-writing-original summary{font-weight:800;color:#31779b;cursor:pointer;font-size:13px}
.ef-speaking-submit{margin-top:16px;padding-top:13px;border-top:1px solid #e3eef3}
.ef-speaking-submit .ef-input{max-width:600px}
.ef-writing-questions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px;padding-left:24px;font-size:13px;line-height:1.8}
.ef-writing-metrics{display:flex;align-items:center;flex-wrap:wrap;gap:8px 15px;margin:11px 0 16px;font-size:12px;color:#7b96a7}
.ef-writing-metrics strong{background:#edf7fc;color:#4c88a6;padding:5px 10px;border-radius:8px}
.ef-writing-metrics strong.ef-good{background:#e7f8ed;color:#27845d}
.ef-writing-local-note{font-size:12px!important;color:#7f9cab!important}
.ef-writing-checklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.ef-writing-checklist label{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.6;padding:12px;border:1px solid #e2edf3;border-radius:11px;cursor:pointer}
.ef-writing-checklist input{accent-color:#4596b9;width:16px;height:16px;flex-shrink:0;margin-top:3px}
.ef-writing-original pre{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;color:#466a81}
@media(max-width:640px){.ef-writing-questions,.ef-writing-checklist{grid-template-columns:1fr}}


/* Play & Learn – accessible, self-paced rounds, no timers or forced streaks. */
.ef-gamebuttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.ef-gamebuttons .ef-btn{font-size:13px;min-height:48px;white-space:normal;line-height:1.5;padding:10px}
.ef-name-game{max-width:680px;margin:0 auto}
.ef-name-game h3{font-size:19px!important;color:#316c89}
.ef-name-game>p{font-size:13px;color:#688a9d;line-height:1.7}
.ef-name-progress{display:flex;gap:14px;align-items:center;justify-content:space-between;font-size:12px;font-weight:800;color:#4d879f;margin:0 0 16px}
.ef-name-track{width:min(45%,190px);height:8px;border-radius:20px;background:#e8f2f7;overflow:hidden}
.ef-name-track i{display:block;height:100%;background:#65b9a2;transition:width .2s ease;border-radius:20px}
.ef-name-round{display:inline-flex;margin-bottom:10px;padding:6px 11px;border-radius:20px;background:#e8f6fc;color:#407d9a;font-size:12px;font-weight:800}
.ef-name-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:21px 0}
.ef-name-choices .ef-btn{font-size:18px;min-height:68px;font-weight:800;background:#f8fcfd}
.ef-name-choices .ef-btn:hover:not(:disabled){border-color:#75b5d0;background:#eaf7fc}
.ef-name-choices .ef-btn.correct{background:#e7f8ee;border-color:#8dd2af;color:#246c4a}
.ef-name-input{font-size:19px!important;letter-spacing:1px;max-width:390px;margin:9px 0}
.ef-name-display{text-align:center;font-size:clamp(29px,5vw,41px);letter-spacing:2px;padding:21px;border-radius:16px;background:#f0f8fc;border:1px solid #dbeefa;color:#285f7e;font-weight:800;margin:14px 0}
.ef-name-hint{font-size:13px;color:#6c8e9f}
.ef-name-result{font-size:13px;min-height:25px;margin:17px 0!important;font-weight:700}
.ef-name-result.good{color:#25835b}
.ef-name-finish{text-align:center;padding:18px 10px}
.ef-name-finish>span{font-size:30px}
.ef-name-empty{padding:16px;font-size:13px;color:#6c8999;background:#f7fbfd;border-radius:12px}
@media(max-width:720px){.ef-gamebuttons{grid-template-columns:repeat(2,minmax(0,1fr))}.ef-name-choices{gap:7px}.ef-name-choices .ef-btn{font-size:16px;min-height:60px}.ef-gamebody{padding:14px}}
@media(max-width:360px){.ef-gamebuttons{grid-template-columns:1fr}}


/* Spelling by sound only: no answer text card. */
.ef-name-spell-audio{padding:24px 18px;margin:16px 0;border-radius:16px;background:#f0f8fc;border:1px solid #dbeefa;text-align:center}
.ef-name-spell-audio .ef-btn{font-size:15px;padding:14px 25px;min-height:53px}
.ef-name-spell-audio p{font-size:12px;color:#708fa0;margin:13px 0 0}


/* Responsive Communication lesson – desktop, tablet, phone. */
.ef-one,.ef-course,.ef-coursemain,.ef-body,.ef-panel{min-width:0;max-width:100%}
.ef-one{width:100%;overflow-wrap:break-word}
.ef-one :is(.ef-top,.ef-lessonbar,.ef-story-header,.ef-reading-scenes,
 .ef-reading-scene,.ef-structure,.ef-shadow-app,.ef-shadow-learning,.ef-shadow-card,
 .ef-dict-app,.ef-dict-main,.ef-dict-question,.ef-gamebody,.ef-name-game,
 .ef-writing-checklist,.ef-speaking-models){min-width:0;max-width:100%}
.ef-one :is(.ef-wordbox,.ef-wordbank,.ef-dialogue,.ef-formula,
 .ef-story-line,.ef-story-ipa,.ef-story-translation,.ef-reading-tools,
 .ef-readaloud-instructions,.ef-speaking-cues,.ef-speaking-models,
 .ef-writing-hints,.ef-writing-original,.ef-shadow-current,
 .ef-dict-fullanswer,.ef-dict-masked,.ef-examples){overflow-wrap:anywhere}
.ef-one .ef-btn{white-space:normal;overflow-wrap:break-word}
.ef-one :is(input,textarea,select){max-width:100%;min-width:0}
.ef-one .ef-video{width:100%;max-width:100%}
.ef-one .ef-video iframe{display:block;width:100%;height:100%}
.ef-one .ef-wordbank .ef-btn,.ef-one .ef-wordbox .ef-btn{max-width:100%}
.ef-tab-summary,.ef-tab-hint{display:none}
.ef-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));
 gap:8px;overflow:visible;margin:0 0 16px;padding:0}
.ef-tabs .ef-btn{display:flex;align-items:center;justify-content:center;
 min-height:45px;line-height:1.35;padding:10px 9px;text-align:center;
 white-space:normal;min-width:0;font-size:12px}
.ef-tabs .ef-btn:focus-visible,.ef-one .ef-btn:focus-visible,
.ef-one :is(input,textarea,select):focus-visible{
 outline:3px solid #258ac1;outline-offset:2px}
.ef-lessonbar{gap:8px 18px}
.ef-lessonbar>a{font-weight:700}
.ef-one .ef-actions>.ef-btn{min-height:44px}
.ef-story-scenehead>div,.ef-lessonbar>span{min-width:0}
.ef-story-scenehead h3{overflow-wrap:anywhere}
.ef-gamebody,.ef-name-choices{min-width:0}
.ef-name-choices .ef-btn{min-width:0;overflow-wrap:anywhere}
.ef-name-input{width:100%}
.ef-reading-tools{align-items:center}
.ef-story-line{line-height:1.85}
.ef-writing-original pre{white-space:pre-wrap;overflow-wrap:anywhere}
@media(max-width:1100px){
 .ef-course{grid-template-columns:minmax(0,1fr)}
 .ef-coursemain{min-width:0}
 .ef-shadow-learning{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
 .ef-one{padding-bottom:8px}
 .ef-top{padding:18px;border-radius:16px}
 .ef-top h1{font-size:clamp(23px,6vw,29px);line-height:1.3}
 .ef-top p{line-height:1.6}
 .ef-lessonbar{padding:12px 0;line-height:1.6}
 .ef-tab-summary{display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;font-size:12px;color:#668ba2;margin:11px 0 9px}
 .ef-tab-summary span{font-weight:800;border-radius:999px;
  background:#edf7fc;padding:6px 10px}
 .ef-tab-summary b{font-size:13px;color:#386f8a}
 .ef-tabs{display:flex;flex-wrap:nowrap;gap:8px;
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;
  scrollbar-width:thin;scroll-padding-inline:8px;
  -webkit-overflow-scrolling:touch;padding:2px 2px 9px;margin:0}
 .ef-tabs .ef-btn{flex:0 0 auto;min-height:46px;min-width:112px;
  padding:9px 12px;scroll-snap-align:start}
 .ef-tab-hint{display:block;text-align:right;font-size:11px;
  color:#86a1b0;margin:1px 0 12px}
 .ef-body{padding:16px 13px;min-height:0;border-radius:14px}
 .ef-body>h2,.ef-line h2{font-size:19px;line-height:1.4}
 .ef-line{flex-wrap:wrap;align-items:flex-start}
 .ef-panel{padding:16px 13px}
 .ef-structure{padding:15px}
 .ef-name-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .ef-name-choices .ef-btn{font-size:clamp(15px,4vw,18px);
  min-height:58px;padding:9px 6px}
 .ef-name-choices .ef-btn:last-child:nth-child(odd){grid-column:1/-1}
 .ef-name-spell-audio{padding:18px 12px}
 .ef-name-spell-audio .ef-btn{max-width:100%}
 .ef-dict-grid{grid-template-columns:minmax(0,1fr)}
 .ef-dict-question{padding:15px 12px}
 .ef-dict-bottom{flex-wrap:wrap}
 .ef-shadow-controls{padding:12px}
 .ef-shadow-actions .ef-btn{max-width:none}
 .ef-writing-questions,.ef-writing-checklist{grid-template-columns:minmax(0,1fr)}
 .ef-story-header{padding:16px}
 .ef-reading-scene{padding:15px 13px}
 .ef-reading-mode-switch .ef-btn{flex:1 1 135px}
 .ef-reading-tools .ef-btn{flex:1 1 125px}
 .ef-reading-questions .ef-btn{min-height:46px}
 .ef-bottom{flex-wrap:wrap}
 .ef-bottom .ef-btn{min-height:46px;margin-left:auto}
 .ef-one :is(input[type="text"],input[type="url"],input:not([type]),textarea,select){
  font-size:16px}
}
@media(max-width:400px){
 .ef-top{padding:15px}
 .ef-body,.ef-panel{padding:14px 11px}
 .ef-gamebody{padding:11px 9px}
 .ef-gamebuttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
 .ef-gamebuttons .ef-btn{font-size:12px;padding:8px 6px}
 .ef-story-scene-icon{width:39px;height:39px;font-size:21px}
 .ef-story-scenehead{gap:9px}
 .ef-dict-setting{max-width:100%}
 .ef-dict-setting .ef-btn{min-width:35px}
 .ef-bottom small{flex:1 1 100%}
 .ef-reading-mode-switch{gap:7px}
 .ef-reading-mode-switch .ef-btn{flex:1 1 100%}
 .ef-name-input{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
 .ef-one .ef-btn,.ef-name-track i{transition:none}
 .ef-tabs{scroll-behavior:auto}
}


/* Three lightweight learning stages; preserve all ten original tabs. */
.ef-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:0 0 14px}
.ef-stages .ef-btn{min-width:0;min-height:48px;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.ef-stages .ef-btn.active{background:#e5f4fc;color:#145f8c;border-color:#7cb9da}
.ef-tabs[data-active-stage="understand"] .ef-btn:not([data-stage="understand"]),
.ef-tabs[data-active-stage="practice"] .ef-btn:not([data-stage="practice"]),
.ef-tabs[data-active-stage="apply"] .ef-btn:not([data-stage="apply"]){display:none}
.ef-one :is(.ef-reading-scene,.ef-panel,.ef-story-line,.ef-writing-checklist,.ef-shadow-current){color:#274c62}
.ef-one :is(.ef-tab-hint,.ef-writing-local-note,.ef-mission-caption){color:#4e7288;font-size:13px;line-height:1.65}
.ef-one .ef-stages .ef-btn:focus-visible{outline:3px solid #2279a8;outline-offset:2px}
@media(max-width:760px){
 .ef-stages{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .ef-stages .ef-btn{font-size:12px;min-height:53px;padding:9px 4px}
 .ef-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin:0 0 13px;padding:0}
 .ef-tabs .ef-btn{width:100%;min-width:0;min-height:48px}
 .ef-tab-hint{display:none}
 .ef-body :is(p,li){line-height:1.7}
}
@media(max-width:370px){.ef-stages .ef-btn{font-size:11px}}

.ef-game-link{background:#f0f8ff;border:1px solid #c8e2f7;border-radius:12px;padding:13px 16px;line-height:1.6}
.ef-game-link a{font-weight:700;color:#165a95;text-underline-offset:3px}
.ef-game-link small{color:#49677c}
.ef-game-zone .ef-body{max-width:100%;margin-top:16px}
.ef-game-zone .ef-lessonbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}


/* Everyday English: Language Toolkit (reference + practice). */
.ef-tk-title h2{color:#285d78;font-size:22px;margin:0 0 7px}
.ef-tk-title p,.ef-tk-tip{font-size:13px;line-height:1.65;color:#718fa1}
.ef-tk-main-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}
.ef-tk-main-tabs .ef-btn{border:1.5px solid #d8e8f0;border-radius:16px;display:flex;gap:13px;align-items:center;text-align:left;padding:16px;min-height:83px;white-space:normal}
.ef-tk-main-tabs .ef-btn.selected{background:#e8f5fc;border-color:#65acd2;color:#246a91}
.ef-tk-main-tabs .ef-btn>span:first-child{font-size:24px;flex:0 0 34px}
.ef-tk-main-tabs .ef-btn>span:last-child{display:flex;flex-direction:column;gap:5px}
.ef-tk-main-tabs b{font-size:15px}
.ef-tk-main-tabs small{font-size:11px;line-height:1.4;font-weight:500}
.ef-tk-h3,.ef-tk-section h3{margin:0 0 7px;color:#2c627f;font-size:19px}
.ef-tk-section{margin-top:22px}
.ef-tk-vocab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin:14px 0}
.ef-tk-vocab-item,.ef-tk-structure{border:1px solid #e0ecf3;border-radius:14px;padding:17px;background:#fbfdff;min-width:0}
.ef-tk-wordline{display:flex;justify-content:space-between;gap:8px;align-items:start}
.ef-tk-wordline b{color:#2f5d77;font-size:16px;overflow-wrap:anywhere}
.ef-tk-wordline small{color:#568eac;background:#e7f5fc;border-radius:20px;padding:5px 8px;font-size:10px;font-weight:800}
.ef-tk-ipa{font-size:14px;line-height:1.8;background:#edf8fd;color:#4a819e;padding:9px 11px;border-radius:9px;margin:12px 0}
.ef-tk-sounds{display:flex;gap:7px;flex-wrap:wrap}
.ef-tk-vocab-item p,.ef-tk-structure p{font-size:13px;color:#6f8da0;line-height:1.65}
.ef-tk-vocab-item>small{color:#668da2;line-height:1.55}
.ef-tk-structures{display:grid;gap:13px;margin-top:14px}
.ef-tk-structure h4{font-size:17px;color:#315e75;margin:10px 0}
.ef-tk-example{padding:10px 12px;margin-top:8px;background:#fff;border:1px solid #e5eef4;border-radius:10px}
.ef-tk-example b,.ef-tk-example small{display:block;font-size:13px;line-height:1.6}
.ef-tk-example small{color:#7796a6}
.ef-tk-next{display:flex;justify-content:flex-end;margin:22px 0}
.ef-tk-groups,.ef-tk-modes{display:flex;gap:8px;flex-wrap:wrap;margin:17px 0}
.ef-tk-groups .ef-btn{flex:1 1 160px;min-height:46px}
.ef-tk-modes .ef-btn{flex:1 1 140px;min-height:44px}
.ef-tk-flash{text-align:center;border:1px solid #d5e7f1;background:linear-gradient(150deg,#f5fbfe,#fff);border-radius:18px;padding:22px 19px}
.ef-tk-cardhead{display:flex;justify-content:space-between;gap:12px;text-align:left;color:#6991a4;border-bottom:1px solid #e2edf4;padding-bottom:13px;margin-bottom:16px;font-size:11px;font-weight:800}
.ef-tk-flash .ef-formula{margin:17px auto;max-width:620px;text-align:left}
.ef-tk-reveal{padding:13px 17px;background:#eaf6fd;border:1px solid #d5eaf4;border-radius:12px;margin:16px auto;max-width:600px;text-align:left;color:#3c708b}
.ef-tk-reveal small{display:block;color:#7091a2}
.ef-tk-blank{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;font-size:18px;line-height:1.7;margin:18px auto}
.ef-tk-blank .ef-input{display:inline-block;width:150px;max-width:70vw}
.ef-tk-flash .ef-textarea{max-width:600px;text-align:left;margin:auto}
.ef-tk-flash .ef-label{text-align:left;max-width:600px;margin:12px auto}
.ef-tk-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:14px 0}
.ef-tk-paging{display:flex;justify-content:space-between;align-items:center;gap:9px;margin:16px 0}
.ef-tk-paging b{font-size:12px;color:#7192a4}
@media(max-width:700px){.ef-tk-main-tabs{gap:8px}.ef-tk-main-tabs .ef-btn{padding:10px 9px;gap:7px;min-height:74px}.ef-tk-main-tabs .ef-btn>span:first-child{font-size:19px;flex-basis:23px}.ef-tk-main-tabs b{font-size:13px}.ef-tk-main-tabs small{font-size:10px}.ef-tk-vocab-grid{grid-template-columns:1fr}.ef-tk-flash{padding:17px 11px}.ef-tk-modes .ef-btn{font-size:11px}.ef-tk-cardhead{font-size:10px}}


/* A1 Practice: Mini-Story read aloud, reading comprehension, listening comprehension. */
.ef-story-playbar,.ef-conv-tools{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:16px 0 20px}
.ef-story-playbar .ef-btn,.ef-conv-tools .ef-btn{min-height:42px}
.ef-story-scenes,.ef-reading-scenes{min-width:0}
.ef-story-lines{display:grid;gap:4px}
.ef-story-lines>.ef-btn{width:44px;min-height:40px;justify-self:end;margin:-5px 4px 10px 0;font-size:19px}
.ef-conv-check,.ef-conv-role{margin:25px 0 0;background:#f7fbfe;border:1px solid #dbeaf4;padding:22px;border-radius:17px}
.ef-conv-role h3,.ef-conv-check h3{color:#2d6280;font-size:18px;margin:0 0 8px}
.ef-conv-role p,.ef-conv-check>p{color:#6e90a4;font-size:13px;line-height:1.7}
.ef-conv-header .ef-story-label{display:inline-block;margin-bottom:13px}
.ef-conv-header h2{font-size:clamp(22px,3.6vw,29px);color:#2b5f7c;margin:0 0 9px}
.ef-conv-header>p{font-size:14px;color:#6f8fa3;line-height:1.7}
.ef-conv-turns{display:grid;gap:11px;margin:21px 0}
.ef-conv-turn{display:flex;align-items:flex-start;gap:11px;max-width:97%;min-width:0}
.ef-conv-turn.is-lani{margin-left:7%;flex-direction:row-reverse}
.ef-conv-speaker{flex:0 0 60px;width:60px;min-width:0;text-align:center;font-size:11px;font-weight:800;color:#598da7;border-radius:999px;background:#e8f5fc;padding:8px 7px;overflow-wrap:anywhere}
.ef-conv-bubble{flex:1 1 auto;min-width:0;max-width:730px;background:#fff;border:1px solid #dfeef5;border-radius:5px 15px 15px 15px;padding:12px 15px}
.ef-conv-turn.is-lani .ef-conv-bubble{background:#eaf6fd;border-color:#d4e8f3;border-radius:15px 5px 15px 15px}
.ef-conv-bubble p{font-size:15px;line-height:1.7;font-weight:600;color:#355f77;margin:0;overflow-wrap:anywhere}
.ef-conv-bubble p em{font-size:13px;color:#8a9faa;font-weight:500}
.ef-conv-bubble small{display:block;color:#728fa0;font-size:12px;line-height:1.6;margin-top:6px}
.ef-conv-bubble .ef-conv-ipa{color:#4183a2}
.ef-conv-turn>.ef-btn{flex:0 0 42px;padding:7px;min-height:39px}
.ef-conv-check .ef-question{background:#fff}
.ef-conv-role .ef-tk-actions{justify-content:flex-start}
@media(max-width:650px){
 .ef-story-playbar .ef-btn,.ef-conv-tools .ef-btn{flex:1 1 120px}
 .ef-conv-check,.ef-conv-role{padding:15px 12px}
 .ef-conv-turn{max-width:100%;gap:6px}
 .ef-conv-turn.is-lani{margin-left:0}
 .ef-conv-speaker{flex-basis:45px;width:45px;padding:6px 3px;font-size:10px}
 .ef-conv-bubble{padding:10px}
 .ef-conv-bubble p{font-size:14px}
 .ef-conv-turn>.ef-btn{flex-basis:34px;width:34px;padding:4px;font-size:12px}
}

.ef-story-audio-row{display:flex;gap:12px;align-items:flex-start;padding:5px 0}
.ef-story-audio-row .ef-story-line{flex:1;min-width:0}
.ef-story-audio-row>.ef-btn{flex:0 0 42px;min-width:42px;min-height:39px;font-size:19px;padding:6px}
@media(max-width:650px){.ef-story-audio-row{gap:7px}.ef-story-audio-row>.ef-btn{flex-basis:37px;min-width:37px;padding:4px}}


/* Everyday English · A1 guided Apply and Conversation roleplay */
.ef-apply-head h2{font-size:clamp(22px,3vw,27px);color:#2b5f7c;margin:0 0 9px}
.ef-apply-head p{color:#698ca0;font-size:14px;line-height:1.7}
.ef-apply-panel{background:#fbfdfe;border:1px solid #dcebf3;border-radius:17px;padding:22px;margin:18px 0}
.ef-apply-panel h3{font-size:19px;color:#2c6180;margin:0 0 11px}
.ef-apply-panel>p{color:#67899b;font-size:14px;line-height:1.7}
.ef-apply-text{width:100%;max-width:820px;min-height:110px;font-size:16px;line-height:1.8}
.ef-retell-events{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:17px 0}
.ef-retell-events .ef-btn{line-height:1.6;min-height:65px;text-align:left}
.ef-retell-events .ef-btn.selected{background:#e8f8ed;border-color:#a9dbc0}
.ef-own-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:15px 0}
.ef-own-fields label{display:block;color:#50758b;font-size:13px;font-weight:750}
.ef-own-fields .ef-input{margin:8px 0 0;font-size:16px}
.ef-scenario-tabs{display:flex;gap:9px;flex-wrap:wrap;margin:21px 0}
.ef-scenario-tabs .ef-btn{flex:1 1 145px;min-height:48px}
.ef-scenario-prompt{background:#eaf6fd;border:1px solid #d6e9f3;border-radius:12px;padding:17px 18px;font-size:18px;font-weight:750;color:#2f6886;line-height:1.65;margin:14px 0}
.ef-apply-panel .ef-speaking-submit{border-top:1px solid #e1edf4;padding-top:11px}
.ef-apply-panel .ef-external-link{min-height:47px}
.ef-role-workspace{background:white;border:1px solid #dcebf4;padding:20px;border-radius:15px;margin-top:18px}
.ef-role-workspace h4{font-size:18px;margin:0;color:#2d627c}
.ef-conv-roles{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}
.ef-conv-roles .ef-btn{min-height:44px;flex:1 1 105px}
.ef-role-context{background:#f1f8fc;padding:13px 15px;border-radius:12px;margin:17px 0}
.ef-role-context p{font-size:14px;color:#426d83;line-height:1.7;margin:5px 0}
.ef-role-prompt{font-size:16px;font-weight:800;color:#386f8d;margin:15px 0}
.ef-role-workspace .ef-input{font-size:16px;max-width:100%}
.ef-role-transcript{background:#eaf6fc;border:1px solid #cee5f1;padding:13px;border-radius:12px;font-size:14px;overflow-wrap:anywhere}
@media(max-width:650px){
 .ef-apply-panel,.ef-role-workspace{padding:16px 12px}
 .ef-own-fields,.ef-retell-events{grid-template-columns:1fr}
 .ef-scenario-tabs .ef-btn{flex-basis:90px}
 .ef-role-context p{font-size:13px}
 .ef-apply-panel .ef-tk-actions .ef-btn{min-height:44px}
}


/* Additional practice is intentionally after the full Everyday English lesson. */
.ef-extra-practice{padding:26px 4px 12px;margin:27px 0 8px;border-top:1px solid #d9e8f1}
.ef-extra-practice h2{font-size:20px;line-height:1.35;color:#315e79;margin:0 0 7px}
.ef-extra-practice>p{font-size:14px;color:#668da1;margin:0 0 19px;line-height:1.7}
.ef-extra-practice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ef-extra-practice-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0;padding:20px;border:1px solid #d4e7f2;border-radius:16px;background:#fff;color:#335e78;text-decoration:none;transition:background .2s,border-color .2s}
.ef-extra-practice-card:hover{background:#eff8fd;border-color:#83b6d1}
.ef-extra-practice-card:focus-visible{outline:3px solid #258ac1;outline-offset:3px}
.ef-extra-practice-card>span{font-size:27px}
.ef-extra-practice-card>strong{font-size:17px}
.ef-extra-practice-card>small{color:#6a8a9c;font-size:12px;line-height:1.6;flex:1}
.ef-extra-practice-card>b{font-size:13px;color:#246f9d}
@media(max-width:660px){.ef-extra-practice-grid{grid-template-columns:1fr;gap:9px}.ef-extra-practice-card{padding:15px;gap:5px}.ef-extra-practice-card>span{font-size:22px}.ef-extra-practice{padding-inline:0}}


/* Script-first 2-minute Conversation. No listening player in this activity. */
.ef-conv-script{margin:22px 0 24px;padding:22px;border:1px solid #d9e9f2;border-radius:17px;background:#fbfdff}
.ef-conv-section-head{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:13px}
.ef-conv-section-head h3{font-size:19px;line-height:1.45;margin:0 0 8px;color:#285f7e}
.ef-conv-section-head p{color:#547d93;font-size:14px;line-height:1.65;margin:0;max-width:690px}
.ef-conv-duration{flex:none;font-size:13px;font-weight:750;padding:8px 12px;border:1px solid #cfe3f0;background:#eaf6fd;color:#326b8a;border-radius:99px}
.ef-conv-script-actions{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 6px}
.ef-conv-script-actions .ef-btn{min-height:44px}
.ef-conv-script .ef-conv-turns{margin-bottom:0;gap:9px}
.ef-conv-script .ef-conv-bubble p{font-weight:550}
.ef-conv-script-hidden{font-size:14px;color:#618499;background:#eef7fc;border-radius:11px;padding:15px}
.ef-conv-role{margin-top:24px}
.ef-conv-role>p{font-size:14px}
@media(max-width:650px){
 .ef-conv-script{padding:16px 12px}
 .ef-conv-section-head{gap:8px}
 .ef-conv-section-head h3{font-size:17px}
 .ef-conv-duration{font-size:12px}
 .ef-conv-script-actions .ef-btn{flex:1 1 135px}
}



/* Mini-Story · three distinct A1 comprehension activities */
.ef-reading-mode-switch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:17px 0}
.ef-reading-mode-switch .ef-btn{min-width:0;min-height:58px;padding:11px 10px;line-height:1.4;font-size:13px;text-align:center}
.ef-reading-questions{margin:22px 0;padding:20px;border:1px solid #dbeaf4;border-radius:16px;background:#f9fcfe}
.ef-reading-questions>.ef-line{margin-bottom:13px}
.ef-reading-questions h3{color:#2e6786;font-size:19px;line-height:1.4;margin:0 0 7px}
.ef-reading-questions p{font-size:14px;line-height:1.65;color:#5c8298}
.ef-reading-questions .ef-question{background:white;border:1px solid #e2edf4;border-radius:12px;padding:15px;margin:13px 0}
.ef-reading-questions .ef-question>b{display:block;font-size:15px;color:#2e5b76;margin-bottom:12px;line-height:1.55}
.ef-reading-questions .ef-question>small{display:block;color:#688a9c;margin:7px 0 10px}
.ef-reading-questions .ef-question>.ef-btn{margin:3px 5px 5px 0;min-height:45px;text-align:left}
.ef-listening-workspace{background:#eff8fc;border:1px solid #d4e8f3;border-radius:17px;padding:27px 22px;text-align:center;margin:19px 0 20px}
.ef-listening-illustration{font-size:42px;margin:0 0 8px}
.ef-listening-workspace h3{font-size:21px;color:#2d6382;margin:4px 0 7px}
.ef-listening-workspace>p{color:#66899d;font-size:14px;line-height:1.7;margin:0 auto 15px;max-width:560px}
.ef-listening-workspace .ef-story-playbar{display:flex;justify-content:center;margin:17px 0 8px}
.ef-listening-workspace .ef-story-playbar .ef-btn{min-height:49px}
.ef-listening-workspace .ef-listening-count{font-size:12px;font-weight:700;color:#397c9e;margin:10px 0 0}
@media(max-width:700px){
 .ef-reading-mode-switch{grid-template-columns:1fr;gap:8px}
 .ef-reading-mode-switch .ef-btn{min-height:49px;font-size:13px}
 .ef-reading-questions{padding:16px 12px}
 .ef-listening-workspace{padding:21px 12px}
 .ef-listening-workspace .ef-story-playbar .ef-btn{flex:1 1 132px}
 .ef-reading-questions .ef-question>.ef-btn{display:block;width:100%;margin:7px 0}
}


/* Listening Comprehension · sentence-by-sentence recall with text or microphone */
.ef-listen-sentence{margin:24px 0;background:#f9fcfe;border:1px solid #dbeaf4;border-radius:18px;padding:22px}
.ef-listen-sentence>.ef-line{margin-bottom:15px}
.ef-listen-sentence h3{font-size:19px;line-height:1.45;margin:0 0 8px;color:#2b637f}
.ef-listen-sentence>.ef-line p{color:#67869b;font-size:14px;line-height:1.7;margin:0}
.ef-listen-sentence-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.ef-listen-sentence-modes .ef-btn{min-width:0;min-height:48px;font-size:14px}
.ef-listen-sentence-card{border:1px solid #e0edf4;border-radius:15px;background:#fff;padding:19px}
.ef-listen-sentence-hint{font-size:15px;line-height:1.7;font-weight:650;color:#396b86;margin:0 0 13px}
.ef-listen-sentence .ef-story-playbar{margin:14px 0 20px}
.ef-listen-sentence #ef-story-listen-text{font-size:16px;max-width:100%;width:100%;margin:7px 0 17px}
.ef-listen-sentence .ef-label{display:block;margin-bottom:5px}
.ef-listen-speech{border:1px solid #dcebf4;border-radius:13px;padding:16px;background:#f3fafe;margin-bottom:16px}
.ef-listen-speech>.ef-btn{min-height:50px}
.ef-listen-speech>p{margin:11px 0 0;font-size:13px;line-height:1.65;color:#5d8198}
.ef-listen-speech>.ef-role-transcript{margin-top:13px;line-height:1.8}
.ef-listen-sentence .ef-tk-reveal{margin-top:14px;line-height:1.8;overflow-wrap:anywhere}
.ef-listen-sentence-footer{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid #e7f0f4;padding-top:16px;margin-top:19px}
.ef-listen-sentence-footer .ef-btn{min-height:44px}
.ef-listen-sentence-footer .ef-count{font-size:12px}
.ef-listen-note{display:block;color:#668a9f;font-size:12px;line-height:1.7;margin:13px 0 0}
@media(max-width:650px){
 .ef-listen-sentence{padding:16px 12px}
 .ef-listen-sentence-card{padding:14px 11px}
 .ef-listen-sentence-modes{gap:7px}
 .ef-listen-sentence-modes .ef-btn{padding:10px 7px;font-size:13px}
 .ef-listen-sentence .ef-story-playbar .ef-btn{flex:1 1 130px;min-height:46px}
 .ef-listen-sentence-footer .ef-btn{flex:1 1 120px}
 .ef-listen-sentence-footer .ef-count{order:-1;flex:1 1 100%;text-align:center}
}

/* Evidence-backed bridge: from a story's language to a real exchange. */
.ef-story-dialogue-bridge{
 margin:22px 0 16px;padding:17px 19px;background:#f3f9fd;
 border:1px solid #d9eaf3;border-radius:15px;color:#365b73
}
.ef-story-dialogue-bridge h3{margin:0 0 7px;font-size:17px;color:#266d90}
.ef-story-dialogue-bridge p{font-size:14px;line-height:1.75;margin:0 0 13px}
.ef-story-dialogue-bridge strong{color:#1d678a}
.ef-story-dialogue-bridge button{min-height:44px;white-space:normal}
@media(max-width:680px){
 .ef-story-dialogue-bridge{margin:16px 0;padding:14px}
 .ef-story-dialogue-bridge button{width:100%}
}

/* One freely repeatable YouTube workspace per episode. */
.ef-youtube-practice .ef-top{background:linear-gradient(115deg,#e5f1ff,#f8fcff)}
.ef-youtube-practice .ef-top h1{color:#23589c}
.ef-youtube-practice .ef-body{padding:18px}
.ef-youtube-mode-switch{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:3px 0 18px;border-bottom:1px solid #deebf6;margin-bottom:19px}
.ef-youtube-mode-switch .ef-btn{font-size:14px;min-height:43px}
.ef-youtube-mode-switch .ef-btn.primary{background:#2764c6;border-color:#2764c6;color:#fff}
.ef-youtube-freedom{font-size:13px;color:#56718d;margin:8px 0 15px}
.ef-youtube-watch-title{font-size:18px;color:#23589c}
@media(max-width:650px){
 .ef-youtube-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:7px}
 .ef-youtube-mode-switch .ef-btn{padding:9px 5px;line-height:1.3;font-size:12px}
 .ef-youtube-mode-switch .ef-btn{min-height:48px;white-space:normal;text-align:center}
 .ef-youtube-mode-switch .ef-btn:nth-child(3){grid-column:auto}
}

/* Chỉ từ lần sai thứ hai mới hiện phần đối chiếu đáp án. */
.ef-dict-expected{margin:13px 0 7px;padding:10px 12px;border:1px solid #eac6b6;border-radius:9px;background:#fffaf7;color:#754f41;line-height:1.6}
.ef-dict-expected b{display:block;margin-bottom:4px}
.ef-dict-expected span{font-size:15px;font-weight:700;color:#2d4558}

/* Nghe chép: type directly into the missing words, not a separate answer field. */
.ef-dict-masked{align-items:center;column-gap:9px;row-gap:13px;line-height:1.8}
.ef-dict-token{display:inline-flex;align-items:baseline;white-space:nowrap}
.ef-dict-inline-wrap{display:inline-flex;align-items:baseline;gap:1px;min-width:0}
.ef-dict-inline{display:inline-block;max-width:min(70vw,250px);min-width:48px;padding:4px 3px 3px;border:0;border-bottom:2px solid #427de0;border-radius:0;background:transparent;font:inherit;font-size:inherit;line-height:1.45;text-align:center;color:#203b59;outline:none;transition:border-color .16s}
.ef-dict-inline::placeholder{color:#97a9be;letter-spacing:2px}
.ef-dict-inline:focus{border-bottom-color:#235dd3;background:#eef5ff;box-shadow:0 2px 0 #bad3ff}
.ef-dict-inline.is-wrong{border-bottom-color:#c64a44;background:#fff1ef}
.ef-dict-inline-help{font-size:12px;color:#8296aa;margin:10px 2px 3px}
.ef-dict-punctuation{margin-left:1px}
@media(max-width:650px){.ef-dict-masked{font-size:18px;column-gap:7px;row-gap:14px;padding:14px 11px}.ef-dict-inline{min-width:45px}}

/* One Speak It Your Way challenge at the bottom of each YouTube video page. */
.ef-my-way{margin:32px 0 5px;padding:23px;border:1px solid #b9d8ee;border-radius:18px;background:linear-gradient(135deg,#f4faff,#fff);color:#264961}
.ef-my-way-heading{margin-bottom:15px}
.ef-my-way-eyebrow{font-size:11px;font-weight:800;letter-spacing:.10em;color:#477fad}
.ef-my-way-heading h2{font-size:22px;color:#215a8c;margin:7px 0}
.ef-my-way-heading p{font-size:14px;margin:5px 0;color:#597b95}
.ef-my-way-question{font-size:18px;font-weight:750;line-height:1.5;color:#203e64;margin:12px 0}
.ef-my-way-hint{font-size:13px;color:#537b99;margin:0 0 18px}
.ef-my-way-hint summary{cursor:pointer;font-weight:700;min-height:32px}
.ef-my-way-hint p{border-left:3px solid #a7cce9;padding:5px 10px;margin:3px 0 9px;color:#2d587b}
.ef-my-way-label{display:block;font-size:13px;font-weight:750;color:#496982;margin:5px 0 8px}
.ef-my-way-answer{display:block;width:100%;padding:13px;border:1px solid #bfd7e9;border-radius:12px;background:#fff;font:inherit;font-size:16px;color:#234059;line-height:1.6;resize:vertical;min-height:76px}
.ef-my-way-answer:focus{outline:3px solid #bdd9f8;outline-offset:1px}
.ef-my-way-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.ef-my-way-actions .ef-btn{min-height:44px}
.ef-my-way-message{font-size:13px;color:#537b99;margin:12px 0 0}
.ef-my-way-success{font-size:14px;font-weight:700;color:#23794d;margin:12px 0 0}
@media(max-width:650px){.ef-my-way{margin:26px 0 4px;padding:16px}.ef-my-way-heading h2{font-size:20px}.ef-my-way-question{font-size:17px}.ef-my-way-actions .ef-btn{flex:1 1 170px}}


/* Clear descriptions for adaptive spaced-review ratings. */
.ef-vocab-explanations{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 16px;margin:10px 0 14px}
.ef-vocab-explanations p{margin:0;font-size:13px;line-height:1.5;color:#41627d}
.ef-skip-explanation{font-size:13px;line-height:1.5;color:#52718a;margin:9px 0}
.ef-skipped-words{max-width:820px;margin:22px auto;padding:12px;border:1px solid #d7e6f1;border-radius:12px}
.ef-skipped-words summary{cursor:pointer;font-weight:750;color:#2a5e7b}
.ef-skipped-list{display:grid;gap:8px;margin-top:12px}
.ef-skipped-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px;border-radius:9px;background:#f6faff}
@media(max-width:600px){.ef-vocab-explanations{grid-template-columns:1fr}.ef-skipped-item .ef-btn{min-height:42px}}

/* Dictation: green for typed-correct words, red positions after second failed Check. */
.ef-dict-inline.is-correct{background:#d1f6e2;border:1px solid #86d4ad;border-bottom:2px solid #2f9e73;border-radius:6px;color:#146344;font-weight:750;box-shadow:none}
.ef-dict-inline.is-correct:focus{background:#d6fbe9;border-color:#319b71;box-shadow:0 0 0 2px #ace9cb}
.ef-dict-inline.is-wrong{background:#fff1ef;border:1px solid #dc9691;border-bottom:2px solid #c24a44;border-radius:6px;color:#8a3430}
.ef-dict-inline.is-wrong:focus{background:#fff0ed;border-color:#c24a44;box-shadow:0 0 0 2px #f0bbb6}
.ef-dict-expected summary{cursor:pointer;font-size:13px;font-weight:700;color:#985a40}
.ef-dict-expected span{display:block;margin-top:8px}

/* Each YouTube mode is a separate tab; show Speak It Your Way only when selected. */
.ef-youtube-practice .ef-my-way{margin:12px 0 10px}

/* Link to the original video is only shown after a playback error. */
.ef-video-error{margin:8px 0 14px;padding:11px 13px;border:1px solid #e5bd98;border-radius:10px;background:#fff8f1;color:#80522e;font-size:13px;line-height:1.6}
.ef-video-error[hidden]{display:none!important}
.ef-video-error a{display:inline-block;margin-top:4px;color:#1d649f;font-weight:750;text-decoration:underline;text-underline-offset:2px}

/* Preserve the error action within the retained segmented player on retries. */
#ef-segment{position:relative}
#ef-segment>.ef-video-error{position:absolute;left:9px;right:9px;bottom:9px;z-index:3;margin:0;box-shadow:0 3px 12px #1e415f30}

/* Device voice controls for Mini-Story (Safari / iPhone / iPad). */
.ef-story-voice-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:3px 0 6px;color:#416b83;font-size:13px}
.ef-story-voice-controls>span{font-weight:700;margin-right:3px}
.ef-story-voice-controls .ef-btn{min-height:38px;padding:7px 11px}
.ef-story-audio-status{font-size:13px;line-height:1.6;color:#496b80;margin:6px 0 15px;min-height:22px}
@media(max-width:600px){.ef-story-voice-controls .ef-btn{flex:1 1 auto}.ef-story-audio-status{padding:4px 0}}

/* Conversation audio: accessible controls on iPhone, iPad and desktop. */
.ef-conv-turn>.ef-btn{align-self:center;flex:0 0 40px;min-width:38px;min-height:38px;border-radius:12px}
.ef-conv-check .ef-question>.ef-btn{margin:4px 0 9px;min-height:35px;font-size:12px}
.ef-conv-role .ef-conv-listen-hint{margin:5px 0 13px;color:#5d7c90;font-size:12px;line-height:1.65}
.ef-conv-role .ef-role-context+.ef-btn{margin:4px 0 6px;min-height:41px}
.ef-conv-tools .ef-btn{min-height:43px}
@media(max-width:650px){.ef-conv-turn>.ef-btn{flex-basis:35px;min-width:35px;min-height:35px;padding:6px}.ef-conv-check .ef-question>.ef-btn{width:auto;min-height:39px}}

/* Conversation IPA: optional per-turn phonemic transcription. */
.ef-conv-script-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.ef-conv-script-actions .ef-btn{min-height:38px}
.ef-conv-accent-label{color:#496e85;font-size:12px;font-weight:750}
.ef-conv-bubble .ef-conv-ipa{display:block;margin-top:8px;color:#317294;
  font-size:13px;font-weight:500;line-height:1.65;overflow-wrap:anywhere}
.ef-conv-ipa-notice{margin:10px 0 14px;padding:10px 12px;background:#f4f8fb;
  border:1px solid #dce8f1;border-radius:10px;color:#546d80;font-size:13px;line-height:1.65}
@media(max-width:650px){.ef-conv-script-actions .ef-btn{flex:1 1 auto}}

/* Outcome-first Everyday English: one practical goal + learner reflection.
   Both remain accessible on mobile, independent of Firestore quiz completion. */
.ef-learning-outcome{
 margin:16px 0 20px;padding:20px 22px;border-radius:16px;
 border:1px solid #b9d9cc;background:#f5fbf8;color:#244b42;
}
.ef-learning-outcome .ef-learning-outcome-label{
 margin:0 0 9px;font-size:12px;letter-spacing:.045em;font-weight:750;color:#286650;
}
.ef-learning-outcome-english{
 font-size:clamp(18px,2.2vw,23px);font-weight:750;line-height:1.4;margin:0 0 8px;
}
.ef-learning-outcome-vietnamese{font-size:14px;line-height:1.65;margin:0 0 10px}
.ef-learning-outcome-path{font-size:12px;line-height:1.65;margin:0;color:#476c62}
.ef-can-do-reflection{
 margin:24px 0 0;padding:19px 20px;border:1px solid #c5dcd2;
 border-radius:15px;background:#f7fbf9;color:#234b41
}
.ef-can-do-reflection h3{margin:0 0 8px;font-size:19px}
.ef-can-do-reflection>p{margin:8px 0 12px;font-size:14px;line-height:1.65}
.ef-can-do-checklist{display:grid;gap:10px}
.ef-can-do-checklist label{
 display:flex;align-items:flex-start;gap:11px;border:1px solid #d5e7df;
 background:#fff;padding:13px;border-radius:11px;line-height:1.55;cursor:pointer;
}
.ef-can-do-checklist input{width:20px;height:20px;flex:none;accent-color:#237153;margin:2px 0 0}
.ef-can-do-checklist span{font-size:14px}
.ef-can-do-status{font-weight:700}
.ef-can-do-footnote{font-size:12px!important;color:#5c726b}
.ef-course-can-do{font-size:13px;line-height:1.55;color:#46677c;margin:8px 0 10px}
.ef-course-can-do strong{display:block;color:#255b69;margin-bottom:3px}
@media(max-width:600px){
 .ef-learning-outcome,.ef-can-do-reflection{padding:16px 13px;margin-left:0;margin-right:0}
 .ef-can-do-checklist label{padding:12px 10px}
}
