*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#292622;background:linear-gradient(135deg,#fffaf3,#f5fbf8 70%,#fff7ed);min-height:100vh}button,select,input,textarea{font:inherit}button{color:inherit}.container{width:min(1180px,calc(100% - 32px));margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid #e9ded2}.header-inner{display:flex;justify-content:space-between;align-items:center;padding:14px 0;gap:16px}.brand-button{background:none;border:0;text-align:left;cursor:pointer;padding:0}.brand{font-weight:900;letter-spacing:.02em;font-size:20px}.brand span{color:#0f8f83}.tagline{font-size:12px;color:#7c7167;margin-top:3px}.header-actions{display:flex;gap:8px;align-items:center}.status-pill,.nav-pill{padding:8px 12px;border-radius:999px;font-weight:800;font-size:13px}.status-pill{background:#e8fff8;border:1px solid #b7eadc;color:#0f766e}.nav-pill{border:1px solid #e1d5ca;background:#fff;cursor:pointer}.view{display:none}.view.active{display:block}.eyebrow{font-weight:900;color:#0f8f83;font-size:12px;letter-spacing:.08em}.home-hero{display:grid;grid-template-columns:1.35fr .65fr;gap:24px;padding:44px 0 22px}.home-hero-copy,.garden-card,.track-hero,.course-hero,.lesson-hero,.card,.track-card,.season-card,.course-card{background:rgba(255,255,255,.93);border:1px solid #eadcd0;border-radius:26px;box-shadow:0 12px 34px rgba(70,48,30,.07)}.home-hero-copy{padding:34px}.home-hero h1,.track-hero h1,.course-hero h1,.lesson-hero h1{font-size:clamp(34px,5vw,56px);line-height:1.05;margin:10px 0 14px}.home-hero h1 span{color:#0f8f83}.home-hero p,.track-hero p,.course-hero p,.lesson-hero p{font-size:17px;line-height:1.65;color:#6f665e}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}.cta,.primary,.flash-controls button,.speaking-actions button,.action-grid button,.exercise-actions button,.quiz-result button{border:1px solid #dfd1c4;background:#fff;padding:12px 16px;border-radius:14px;font-weight:850;cursor:pointer}.primary{background:#0f8f83!important;color:#fff!important;border-color:#0f8f83!important}.garden-card{padding:28px;display:grid;gap:16px;align-content:center}.garden-icon{font-size:70px;text-align:center}.garden-stat{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #eee3d8;padding-top:12px}.garden-stat strong{font-size:26px;color:#0f8f83}.garden-stat span{color:#756b63;font-size:13px}.section-block{padding:20px 0 30px}.section-title-row{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}.section-title-row h2{margin:4px 0 0;font-size:30px}.track-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.track-card{padding:24px;text-align:left;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;cursor:pointer}.track-card:hover,.season-card:hover,.course-card:hover{transform:translateY(-2px);transition:.2s}.track-emoji{font-size:52px}.track-kicker{font-size:12px;font-weight:900;color:#0f8f83}.track-card h3,.season-card h3,.course-card h3{margin:5px 0;font-size:22px}.track-card p,.season-card p,.course-card p{margin:0;color:#7b7067}.arrow{font-size:28px;color:#0f8f83}.season-card{width:100%;border:1px solid #eadcd0;padding:20px;display:grid;grid-template-columns:auto 1fr 220px auto;gap:16px;align-items:center;text-align:left;cursor:pointer}.season-badge{background:#fff0dc;color:#8a552a;padding:7px 10px;border-radius:999px;font-size:11px;font-weight:900}.season-main{display:flex;gap:12px;align-items:center}.season-icon{font-size:36px}.mini-progress{height:9px;background:#eee5dc;border-radius:999px;overflow:hidden;margin-bottom:6px}.mini-progress span{display:block;height:100%;width:0;background:#0f8f83}.breadcrumb{display:flex;gap:8px;align-items:center;padding:24px 0 10px;color:#746a61;font-size:14px}.breadcrumb button{background:none;border:0;padding:0;color:#0f8f83;font-weight:800;cursor:pointer}.track-hero,.course-hero,.lesson-hero{padding:30px;display:flex;justify-content:space-between;gap:24px;align-items:center}.track-large-icon,.course-icon{font-size:84px}.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.course-card{padding:22px;text-align:left;cursor:pointer;min-height:180px}.course-card .course-emoji{font-size:38px}.season-grid{display:grid;gap:14px}.lesson-score-card{text-align:center;min-width:150px;background:#eafff8;border:1px solid #bdebdc;border-radius:20px;padding:20px}.big-percent{font-size:38px;font-weight:950;color:#0f766e}.skill-tabs{display:flex;gap:8px;overflow:auto;padding:18px 0;position:sticky;top:74px;background:linear-gradient(135deg,#fffaf3,#f5fbf8 70%,#fff7ed);z-index:30}.skill-tab,.subtab{white-space:nowrap;border:1px solid #dfd1c4;background:#fff;border-radius:999px;padding:10px 14px;font-weight:850;cursor:pointer}.skill-tab.active,.subtab.active{background:#0f8f83;color:#fff;border-color:#0f8f83}.skill-panel,.subpanel{display:none}.skill-panel.active,.subpanel.active{display:block}.activity-heading{display:flex;justify-content:space-between;gap:18px;align-items:end;margin:10px 0 18px}.activity-heading h2{margin:5px 0;font-size:30px}.activity-heading p{margin:0;color:#766c63}.complete-skill{border:1px solid #d8c9ba;background:#fff;padding:11px 14px;border-radius:14px;font-weight:850;cursor:pointer}.complete-skill.done{background:#e8fff7;color:#0f766e;border-color:#a9dfcf}.vocab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding-bottom:36px}.vocab-card{padding:18px;display:grid;grid-template-columns:1fr auto;gap:10px}.vocab-term{font-size:21px;font-weight:900}.vocab-meaning{color:#8a7c70;font-style:italic}.vocab-example{grid-column:1/-1;background:#fff8f0;border-radius:12px;padding:12px;color:#5f554d}.listen-word{border:1px solid #dfd1c4;background:#fff;border-radius:12px;width:42px;height:42px;cursor:pointer}.flash-shell{max-width:760px;margin:auto;padding-bottom:40px}.flash-card{width:100%;min-height:330px;border:1px solid #ddcec0;border-radius:28px;background:#fff;box-shadow:0 12px 34px rgba(70,48,30,.07);cursor:pointer;padding:40px}.flash-face{font-size:42px;font-weight:950}.flash-face small{display:block;font-size:18px;color:#7d7167;margin-top:14px;font-weight:700}.flash-controls{display:flex;justify-content:center;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}.exercise-stack{display:grid;gap:14px;padding-bottom:30px}.exercise-item,.reading-card,.writing-card,.speaking-card{padding:22px}.exercise-title{font-weight:900;margin-bottom:10px}.choices,.mcq{display:grid;gap:8px;margin-top:12px}.choices button,.mcq button{border:1px solid #dfd1c4;background:#fff;border-radius:12px;padding:11px;text-align:left;cursor:pointer}.choices button.correct,.mcq button.correct{background:#eafff7;border-color:#83d4bd}.choices button.wrong,.mcq button.wrong{background:#fff0ee;border-color:#e6aaa3}.speaking-sentence{font-size:30px;font-weight:950;line-height:1.3;margin:20px 0}.speaking-actions{display:flex;gap:10px;flex-wrap:wrap}.recording-box{margin-top:16px;border:1px dashed #d8c6b6;background:#fffaf5;border-radius:16px;padding:16px}.recording-box audio{width:100%;margin-top:10px}.hidden{display:none}.full-dialogue{padding:18px;display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:center;margin-bottom:14px}.full-dialogue audio{width:100%}.toolbar{padding:16px;display:grid;grid-template-columns:repeat(5,minmax(120px,1fr));gap:10px;align-items:end}.field label{display:block;font-size:12px;font-weight:800;color:#756b63;margin-bottom:5px}.field select{width:100%;padding:10px;border:1px solid #dfd1c4;border-radius:11px;background:#fff}.toggle{display:flex;gap:7px;align-items:center;font-weight:750;font-size:13px}.subtabs{display:flex;gap:8px;overflow:auto;padding:16px 0 12px}.lesson-shell{display:grid;grid-template-columns:290px 1fr;gap:20px;padding-bottom:36px}.line-list{padding:16px;max-height:720px;overflow:auto}.aside-title{font-weight:900;margin:4px 4px 12px}.line-btn{width:100%;border:0;background:#fff;padding:12px;border-radius:14px;text-align:left;cursor:pointer;margin-bottom:6px;display:flex;gap:10px;align-items:center}.line-btn:hover{background:#f7f2ed}.line-btn.active{background:#eafaf6;color:#0f766e}.line-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f0e8e0;font-weight:900;flex:0 0 auto}.line-btn.done .line-dot{background:#0f8f83;color:#fff}.line-speaker{font-size:12px;color:#7c7167}.practice-card{padding:28px}.practice-top{display:flex;justify-content:space-between;gap:16px;align-items:center}.speaker-badge{display:inline-flex;padding:8px 12px;border-radius:999px;background:#e8fff8;color:#0f766e;font-weight:900;margin-bottom:6px}.muted{color:#847970;font-size:13px}.script-area{min-height:250px;display:flex;flex-direction:column;justify-content:center;padding:28px 0}.chunks{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.chunk{background:#fff2df;border:1px solid #eed8bf;padding:8px 10px;border-radius:10px;font-weight:800}.english{font-size:clamp(28px,4.4vw,46px);line-height:1.2;font-weight:900}.vietnamese{margin-top:14px;font-size:18px;color:#8a7c70}.hidden-script .english,.hidden-script .chunks{filter:blur(8px);user-select:none}.harvest .english,.harvest .chunks,.harvest .vietnamese{display:none}.leaf .english{display:none}.leaf .chunks .chunk{background:#ecfdf8;border-color:#bcecdf}.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.action-grid button,.exercise-card button,.ghost{border:1px solid #dfd1c4;background:#fff;padding:13px;border-radius:14px;font-weight:850;cursor:pointer}.progress-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;margin-top:22px}.progress-track{height:10px;background:#eee5dc;border-radius:999px;overflow:hidden}.progress-fill{height:100%;width:0;background:#0f8f83;transition:width .2s}.exercise-card{padding:24px;margin-bottom:30px}.exercise-item{border:1px solid #eadcd0;border-radius:18px;padding:18px;background:#fffaf7}.exercise-item audio{width:100%;margin:10px 0}.exercise-item>input{width:100%;border:1px solid #dfd1c4;border-radius:12px;padding:12px}.exercise-actions{display:flex;gap:8px;margin-top:10px}.feedback{font-weight:800;margin-top:8px}.ok{color:#0f766e}.bad{color:#b42318}.instruction-mini{color:#7c7167;font-size:14px;margin:10px 0 8px}.inline-sentence{font-size:20px;line-height:2.5;font-weight:800;margin:8px 0 4px}.inline-blank{display:inline-block;min-width:72px;max-width:150px;padding:7px 10px;margin:0 3px;border:2px solid #d9c8b8;border-radius:10px;background:#fff;text-align:center;font-weight:900;vertical-align:middle;outline:none}.inline-blank:focus{border-color:#0f8f83;box-shadow:0 0 0 3px rgba(15,143,131,.12)}.inline-blank.blank-correct{border-color:#20a47d;background:#eafff7}.inline-blank.blank-wrong{border-color:#d33b2f;background:#fff1ef}.reading-card{font-size:18px;line-height:1.7}.reading-q{margin-top:20px;border-top:1px solid #eee2d8;padding-top:16px}.writing-card textarea{width:100%;min-height:220px;border:1px solid #dfd1c4;border-radius:16px;padding:15px;resize:vertical}.writing-actions{display:flex;gap:12px;align-items:center;margin-top:12px}.quiz-result{padding:18px;display:flex;gap:18px;align-items:center;margin-bottom:40px}footer{padding:28px 0 40px;text-align:center;color:#7c7167}@media(max-width:950px){.home-hero,.track-grid{grid-template-columns:1fr}.course-grid{grid-template-columns:1fr 1fr}.lesson-shell{grid-template-columns:1fr}.line-list{max-height:260px}.toolbar{grid-template-columns:repeat(2,1fr)}.skill-tabs{top:70px}.vocab-grid{grid-template-columns:1fr}}@media(max-width:650px){.header-inner{align-items:flex-start}.header-actions .nav-pill{display:none}.garden-card{display:none}.course-grid{grid-template-columns:1fr}.season-card{grid-template-columns:1fr}.season-progress{width:100%}.track-hero,.course-hero,.lesson-hero{align-items:flex-start}.track-large-icon,.course-icon{font-size:54px}.lesson-score-card{min-width:105px;padding:14px}.toolbar{grid-template-columns:1fr}.full-dialogue{grid-template-columns:1fr}.action-grid{grid-template-columns:1fr}.activity-heading{align-items:flex-start;flex-direction:column}.home-hero-copy{padding:24px}}
.hidden{display:none!important}
.user-chip{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e1d5ca;border-radius:999px;padding:6px 8px 6px 12px;font-size:13px;font-weight:850}
.user-chip button{border:0;background:#f3eee9;border-radius:50%;width:28px;height:28px;cursor:pointer}
.modal{position:fixed;inset:0;z-index:100;background:rgba(24,20,17,.48);display:grid;place-items:center;padding:20px}
.modal-card{width:min(470px,100%);background:#fff;border:1px solid #eadcd0;border-radius:26px;padding:28px;box-shadow:0 30px 70px rgba(31,23,18,.2);position:relative}
.modal-card h2{font-size:30px;margin:6px 0 6px}
.modal-close{position:absolute;top:14px;right:14px;border:0;background:#f4eee8;width:38px;height:38px;border-radius:50%;font-size:24px;cursor:pointer}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0 14px}
.auth-tab{border:1px solid #dfd1c4;background:#fff;border-radius:12px;padding:10px;font-weight:850;cursor:pointer}
.auth-tab.active{background:#0f8f83;color:#fff;border-color:#0f8f83}
.auth-panel{display:none}
.auth-panel.active{display:grid;gap:8px}
.auth-panel label{font-size:13px;font-weight:850;margin-top:7px}
.auth-panel input{border:1px solid #dfd1c4;border-radius:12px;padding:12px;width:100%}
.auth-main-btn{margin-top:10px}
.pending-note{margin-top:8px;background:#fff7e8;border:1px solid #f0d7a8;border-radius:12px;padding:10px;font-size:13px;color:#765329}
.account-banner{background:#eafff8;border-bottom:1px solid #bdebdc}
.account-banner-inner{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;font-size:13px;color:#0f665f}
.account-banner .ghost{padding:8px 11px}
@media(max-width:650px){.user-chip span{display:none}.account-banner-inner{align-items:flex-start;flex-direction:column}}
.teacher-hero{margin:12px 0 18px;padding:28px;background:linear-gradient(135deg,#123f3a,#0f766e);color:#fff;border-radius:26px;display:flex;justify-content:space-between;gap:20px;align-items:center;box-shadow:0 16px 40px rgba(15,118,110,.18)}
.teacher-hero .eyebrow{color:#b8f4e5}.teacher-hero h1{font-size:42px;margin:6px 0}.teacher-hero p{margin:0;color:#d8f6ef}
.teacher-hero .primary{background:#fff!important;color:#0f665f!important;border-color:#fff!important}
.teacher-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}.teacher-stat{padding:18px;display:flex;flex-direction:column}.teacher-stat strong{font-size:32px;color:#0f766e}.teacher-stat span{font-size:13px;color:#746a61}
.teacher-tabs{display:flex;gap:8px;overflow:auto;padding:10px 0 16px}.teacher-tab{border:1px solid #dfd1c4;background:#fff;border-radius:999px;padding:10px 14px;font-weight:850;white-space:nowrap;cursor:pointer}.teacher-tab.active{background:#0f8f83;color:#fff;border-color:#0f8f83}
.teacher-panel{display:none}.teacher-panel.active{display:block}.teacher-section{padding:22px;margin-bottom:36px}.teacher-section-head{display:flex;justify-content:space-between;gap:12px;align-items:end;margin-bottom:16px}.teacher-section-head h2{margin:4px 0 0}
.teacher-section-head select{border:1px solid #dfd1c4;border-radius:12px;padding:10px;background:#fff}
.teacher-table{display:grid}.teacher-tr{display:grid;grid-template-columns:1.5fr .7fr .7fr 1.7fr;gap:12px;align-items:center;padding:13px 10px;border-top:1px solid #eee3d9}.teacher-th{font-size:12px;font-weight:900;color:#776c63;background:#fffaf6;border-radius:12px;border:0}.teacher-tr small,.progress-student small,.teacher-writing-head small,.quiz-attempt-row small{display:block;color:#887d74;margin-top:3px}
.status-badge{display:inline-block;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:900}.status-pending{background:#fff1d9;color:#8a5a17}.status-approved{background:#e7fff6;color:#0f766e}.status-rejected,.status-blocked{background:#fff0ee;color:#a63229}
.student-actions{display:flex;gap:6px;flex-wrap:wrap}.student-actions button,.assignment-row button{border:1px solid #dfd1c4;background:#fff;border-radius:10px;padding:7px 9px;font-size:12px;font-weight:800;cursor:pointer}
.assignment-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin-bottom:14px}.assignment-list{display:grid;gap:8px;margin-top:16px}.assignment-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;border:1px solid #eadcd0;background:#fffaf7;border-radius:14px;padding:12px}.assignment-row span{display:block;color:#746a61;font-size:13px}.assignment-row small{display:block;margin-top:3px;color:#746a61}
.progress-dashboard{display:grid;gap:12px}.progress-student{border:1px solid #eadcd0;border-radius:16px;padding:15px;background:#fffaf7}.progress-student-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.teacher-progress-bar{height:10px;background:#eee5dc;border-radius:999px;overflow:hidden;margin:10px 0}.teacher-progress-bar span{display:block;height:100%;background:#0f8f83}.skill-chip-row{display:flex;gap:6px;flex-wrap:wrap}.skill-chip{padding:5px 8px;border-radius:999px;background:#f1ece7;color:#80746b;font-size:11px;font-weight:800}.skill-chip.done{background:#e6fff5;color:#0f766e}
.teacher-writing-card{border:1px solid #eadcd0;border-radius:18px;padding:18px;background:#fffaf7;margin-bottom:14px}.teacher-writing-head{display:flex;justify-content:space-between;gap:12px}.student-writing-text{white-space:pre-wrap;background:#fff;border:1px solid #eee1d6;border-radius:12px;padding:14px;margin:12px 0;line-height:1.65}.teacher-writing-card textarea{width:100%;min-height:110px;border:1px solid #dfd1c4;border-radius:12px;padding:11px;resize:vertical}.feedback-save-row{display:flex;justify-content:flex-end;gap:10px;align-items:end;margin-top:9px}.feedback-save-row input{width:90px;border:1px solid #dfd1c4;border-radius:10px;padding:9px}
.quiz-attempt-row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:13px;border-top:1px solid #eee3d9}.quiz-score-pill{background:#e7fff6;color:#0f766e;padding:8px 12px;border-radius:999px;font-weight:950}
.empty-state{text-align:center;color:#82766d;padding:28px}.student-feedback{margin-top:18px;background:#eafff8;border:1px solid #bcebdc;border-radius:16px;padding:15px}.student-feedback div{margin-top:7px}.feedback-score{color:#0f766e}
@media(max-width:900px){.teacher-stats{grid-template-columns:1fr 1fr}.teacher-tr{grid-template-columns:1fr 1fr}.teacher-th{display:none}.assignment-form{grid-template-columns:1fr 1fr}.assignment-form button{grid-column:1/-1}}
@media(max-width:600px){.teacher-hero{align-items:flex-start;flex-direction:column}.teacher-stats{grid-template-columns:1fr 1fr}.teacher-tr{grid-template-columns:1fr}.assignment-form{grid-template-columns:1fr}.assignment-row{grid-template-columns:1fr}.feedback-save-row{align-items:stretch;flex-direction:column}.feedback-save-row input{width:100%}}
body.modal-open{overflow:hidden}
.password-wrap{position:relative}
.password-wrap input{padding-right:52px!important}
.password-eye{position:absolute;right:7px;top:50%;transform:translateY(-50%);border:0;background:#f3eee9;width:38px;height:36px;border-radius:10px;cursor:pointer}
.forgot-link,.text-button{border:0;background:none;color:#0f766e;font-weight:850;cursor:pointer;padding:5px 0;text-align:left}
.forgot-link{justify-self:end;margin-top:1px}
.auth-back-row{margin-bottom:5px}
.recovery-icon{font-size:42px;text-align:center;margin-top:2px}
#auth-recovery h3{text-align:center;font-size:24px;margin:0}
.record-quality-note{
font-size:12px;
color:#0f766e;
margin:5px 0 6px;
}
.audio-device-panel{
display:grid;
grid-template-columns:minmax(220px,360px) 1fr;
gap:12px;
align-items:end;
margin:14px 0;
padding:12px;
border:1px solid #e7dbcf;
background:#fffaf6;
border-radius:14px;
}
.audio-device-panel select{
width:100%;
padding:10px 12px;
border:1px solid #dfd1c4;
border-radius:11px;
background:#fff;
}
.audio-device-hint{
font-size:12px;
line-height:1.5;
color:#756b63;
padding-bottom:2px;
}
@media(max-width:650px){
.audio-device-panel{
grid-template-columns:1fr;
}
}
.audio-device-panel{
grid-template-columns:minmax(210px,1fr) minmax(190px,.8fr) 1.2fr;
}
.mic-level{
grid-column:1/-1;
display:grid;
grid-template-columns:auto 1fr;
gap:10px;
align-items:center;
font-size:12px;
color:#756b63;
}
.mic-level-track{
height:8px;
background:#ece3da;
border-radius:999px;
overflow:hidden;
}
.mic-level-fill{
width:2%;
height:100%;
background:#0f8f83;
transition:width .08s linear;
}
@media(max-width:800px){
.audio-device-panel{
grid-template-columns:1fr;
}
}
.compare-title{
font-size:18px;
font-weight:900;
color:#2f2925;
margin-bottom:10px;
}
.audio-compare-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.compare-audio-card{
padding:12px;
border:1px solid #e8ddd3;
border-radius:14px;
background:#fffdfb;
}
.compare-audio-card audio{
width:100%;
margin-top:8px;
}
.compare-label{
display:inline-flex;
align-items:center;
gap:6px;
font-weight:900;
font-size:13px;
padding:5px 9px;
border-radius:999px;
}
.compare-label.original{background:#e8f7f4;color:#08766d}
.compare-label.mine{background:#fff1df;color:#9a5b12}
.compare-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:12px;
}
.score-btn{
border:0;
background:#0f8f83;
color:white;
font-weight:900;
padding:10px 15px;
border-radius:12px;
cursor:pointer;
}
.score-help{
margin-top:10px;
font-size:12px;
line-height:1.5;
color:#786e67;
}
.pron-score-panel{
margin-top:14px;
padding:14px;
border:1px solid #ded4cb;
border-radius:16px;
background:#fff;
}
.pron-score-head{
display:flex;
align-items:center;
gap:14px;
}
.score-circle{
width:84px;
height:84px;
min-width:84px;
border-radius:50%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border:6px solid;
background:#fff;
}
.score-circle strong{font-size:23px;line-height:1}
.score-circle span{font-size:11px;margin-top:4px}
.score-circle.excellent{border-color:#0f8f83;color:#08766d}
.score-circle.good{border-color:#4b9b68;color:#307844}
.score-circle.fair{border-color:#e5aa32;color:#9b6b08}
.score-circle.practice{border-color:#d96a59;color:#a23a2f}
.score-band{font-size:17px;font-weight:900;margin-bottom:5px}
.pron-legend{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:14px 0 9px;
font-size:12px;
}
.pron-legend span,.pron-word{
border-radius:999px;
padding:5px 9px;
font-weight:800;
}
.pron-legend .correct,.pron-word.correct{background:#e5f6eb;color:#267142}
.pron-legend .near,.pron-word.near{background:#fff3d3;color:#94660a}
.pron-legend .wrong,.pron-word.wrong{background:#fde7e3;color:#a43d32}
.pron-word-grid{
display:flex;
flex-wrap:wrap;
gap:7px;
}
.pron-fixes{
margin-top:14px;
padding:11px 12px;
border-radius:12px;
background:#fff8ef;
}
.pron-fixes ul{margin:7px 0 0 20px;padding:0}
.pron-fixes li{margin:5px 0}
.ipa{color:#765c8a;font-family:serif;margin-left:4px}
.pron-perfect{
margin-top:12px;
padding:10px;
border-radius:10px;
background:#e7f7ef;
color:#226b43;
font-weight:800;
}
.score-disclaimer{
margin-top:12px;
font-size:11px;
line-height:1.45;
color:#8a7f77;
border-top:1px dashed #dfd5cd;
padding-top:9px;
}
.score-listening,.score-unavailable{
padding:10px;
line-height:1.5;
}
.pulse-dot{
display:inline-block;
width:10px;height:10px;
border-radius:50%;
background:#d44d43;
margin-right:7px;
animation:pulseMic 1s infinite;
}
@keyframes pulseMic{
0%,100%{transform:scale(.8);opacity:.55}
50%{transform:scale(1.25);opacity:1}
}
@media(max-width:650px){
.audio-compare-grid{grid-template-columns:1fr}
.pron-score-head{align-items:flex-start}
}
/* v3.7 - compact audio settings */
.audio-settings{
margin:12px 0 14px;
border:1px solid #e7dbcf;
border-radius:14px;
background:#fffaf6;
overflow:hidden;
}
.audio-settings summary{
cursor:pointer;
list-style:none;
padding:11px 14px;
font-weight:900;
color:#3b342f;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
user-select:none;
}
.audio-settings summary::-webkit-details-marker{display:none}
.audio-settings summary::after{
content:"＋";
font-size:18px;
line-height:1;
color:#0f8f83;
}
.audio-settings[open] summary::after{content:"−"}
.audio-settings summary span{
font-size:11px;
font-weight:700;
color:#8b7f75;
}
.audio-settings .audio-device-panel{
margin:0;
border:0;
border-top:1px solid #eadfd5;
border-radius:0;
background:#fff;
}
@media(max-width:650px){
.audio-settings summary{
align-items:flex-start;
flex-direction:column;
position:relative;
padding-right:42px;
}
.audio-settings summary::after{
position:absolute;
right:14px;
top:12px;
}
}
/* =========================================================
v4.0 — AI SPEAKING REFLEX COACH
========================================================= */
.ai-speaking-card{padding:22px}
.ai-speaking-top{
display:flex;justify-content:space-between;gap:16px;align-items:flex-start;
padding-bottom:16px;border-bottom:1px solid #eadfd6
}
.ai-speaking-top h3{font-size:24px;margin:7px 0 5px}
.ai-live-badge{
display:inline-flex;align-items:center;gap:7px;
font-size:12px;font-weight:950;letter-spacing:.08em;color:#08766d
}
.ai-live-badge span{
width:9px;height:9px;border-radius:50%;background:#15a58e;
box-shadow:0 0 0 5px rgba(21,165,142,.12)
}
.ai-turn-counter{
min-width:92px;text-align:center;border:1px solid #e4d8ce;
border-radius:16px;padding:10px;background:#fffaf6
}
.ai-turn-counter strong{display:block;font-size:28px;color:#0f8f83}
.ai-turn-counter span{font-size:11px;color:#7e7167}
.ai-mode-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 12px}
.ai-mode{
border:1px solid #dfd3c9;background:#fff;padding:10px 14px;
border-radius:999px;font-weight:900;cursor:pointer
}
.ai-mode.active{background:#0f8f83;color:white;border-color:#0f8f83}
.ai-quick-settings{
display:grid;grid-template-columns:1fr 1fr auto auto;
gap:10px;align-items:end;margin-bottom:14px
}
.ai-quick-settings label{
display:grid;gap:5px;font-size:12px;font-weight:850;color:#6f635b
}
.ai-quick-settings select{
min-height:42px;border:1px solid #dfd3c9;border-radius:11px;
padding:8px 10px;background:#fff
}
.ai-quick-settings .ai-check{
display:flex;align-items:center;gap:7px;min-height:42px;
padding:0 10px;border:1px solid #dfd3c9;border-radius:11px;background:#fff
}
.ai-status{
display:flex;align-items:center;gap:9px;
min-height:42px;padding:10px 12px;margin:10px 0;
border-radius:12px;background:#f7f3ef;color:#655b54;font-size:13px
}
.ai-status-dot{width:9px;height:9px;border-radius:50%;background:#aaa}
.ai-status.waiting{background:#ecf8f5;color:#12695f}
.ai-status.waiting .ai-status-dot{background:#12a78d}
.ai-status.thinking{background:#f1effb;color:#5b4b88}
.ai-status.thinking .ai-status-dot{background:#7762b5;animation:pulseMic 1s infinite}
.ai-status.listening{background:#fff1ef;color:#9c4138}
.ai-status.listening .ai-status-dot{background:#da5144;animation:pulseMic .8s infinite}
.ai-status.error{background:#fff0ed;color:#9a3d33}
.ai-status.error .ai-status-dot{background:#d24d40}
.ai-status.done{background:#eef8ef;color:#397447}
.ai-status.done .ai-status-dot{background:#4a9b61}
.ai-countdown{
display:flex;align-items:center;justify-content:center;gap:8px;
padding:8px 12px;margin:8px auto 12px;width:max-content;
border-radius:999px;background:#fff5dc;color:#8e6510;font-size:12px;font-weight:850
}
.ai-countdown strong{font-size:20px}
.ai-chat{
height:420px;overflow-y:auto;padding:15px;
border:1px solid #e5d9cf;border-radius:17px;background:#fbfaf8;
scroll-behavior:smooth
}
.ai-chat-empty{
min-height:100%;display:flex;flex-direction:column;align-items:center;
justify-content:center;text-align:center;gap:7px;color:#857970
}
.ai-empty-icon{font-size:42px}
.ai-chat-empty strong{font-size:17px;color:#49413b}
.ai-chat-empty span{max-width:450px;font-size:13px;line-height:1.5}
.ai-message{display:flex;gap:9px;margin:12px 0;max-width:88%}
.ai-message.student{margin-left:auto;flex-direction:row-reverse}
.ai-avatar{
width:34px;height:34px;min-width:34px;border-radius:50%;
display:flex;align-items:center;justify-content:center;background:#fff;
border:1px solid #e2d7cd
}
.ai-bubble{
padding:10px 12px;border-radius:15px;background:white;
border:1px solid #e5d9cf;box-shadow:0 4px 12px rgba(80,61,45,.035)
}
.ai-message.student .ai-bubble{background:#eaf8f5;border-color:#cce9e3}
.ai-who{font-size:10px;font-weight:950;letter-spacing:.06em;color:#8d8077;margin-bottom:4px}
.ai-message-text{font-size:15px;line-height:1.55;color:#302b27}
.ai-correction{
margin-top:10px;padding:9px 10px;border-radius:10px;background:#fff8e9;
border-left:3px solid #e3a42c;font-size:12px
}
.correction-old{text-decoration:line-through;color:#a55d55;margin-top:4px}
.correction-better{color:#23724c;font-weight:850;margin-top:3px}
.correction-note{color:#75685f;margin-top:4px}
.ai-input-shell{margin-top:12px}
.ai-input-shell textarea{
width:100%;resize:vertical;min-height:64px;padding:12px;
border:1px solid #ded2c8;border-radius:13px;font:inherit
}
.ai-input-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.ai-mic-btn.recording{background:#d64f43;color:white;border-color:#d64f43}
.ai-voice-hint{font-size:11px;color:#887b72;margin-top:7px;line-height:1.45}
.ai-speaking-note{
margin-top:15px;padding:11px 13px;border-radius:12px;
background:#f4f1ed;font-size:12px;line-height:1.5;color:#6e625a
}
/* Teacher AI config */
.ai-teacher-grid{
display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px
}
.ai-teacher-wide{grid-column:1/-1}
.ai-teacher-grid input,.ai-teacher-grid select,.ai-teacher-grid textarea{
width:100%;padding:10px 11px;border:1px solid #dfd3c9;border-radius:11px;background:#fff
}
.teacher-toggle{
display:flex;align-items:center;gap:9px;padding:11px 12px;
background:#f3faf8;border:1px solid #d6ebe6;border-radius:11px;font-weight:850
}
.teacher-ai-actions{display:flex;align-items:center;gap:12px;margin-top:15px;flex-wrap:wrap}
.ai-backend-note{
margin-top:14px;padding:10px 12px;border-radius:11px;
background:#f5f2fb;color:#65577e;font-size:12px
}
@media(max-width:800px){
.ai-speaking-card{padding:15px}
.ai-speaking-top{align-items:center}
.ai-speaking-top h3{font-size:20px}
.ai-quick-settings{grid-template-columns:1fr 1fr}
.ai-quick-settings .ai-check,.ai-quick-settings #aiStartBtn{width:100%}
.ai-chat{height:390px;padding:10px}
.ai-message{max-width:96%}
.ai-teacher-grid{grid-template-columns:1fr}
.ai-teacher-wide{grid-column:auto}
}
@media(max-width:520px){
.ai-quick-settings{grid-template-columns:1fr}
.ai-mode{flex:1 1 100%}
.ai-turn-counter{min-width:72px}
.ai-input-actions button{flex:1 1 calc(50% - 5px)}
}
/* =========================================================
v4.1 — OPENAI SPEECH-TO-TEXT
========================================================= */
.ai-stt-badge{
display:inline-flex;align-items:center;gap:6px;margin-bottom:8px;
padding:6px 9px;border-radius:999px;background:#edf7ff;color:#35657e;
font-size:11px;font-weight:900
}
.ai-transcript-review{
margin-top:9px;padding:11px 12px;border:1px solid #cfe8df;
border-radius:12px;background:#f1faf7
}
.ai-transcript-label{
font-size:10px;letter-spacing:.07em;font-weight:950;color:#39766a;text-transform:uppercase
}
.ai-transcript-text{
margin-top:5px;font-size:16px;line-height:1.5;font-weight:750;color:#273f39
}
.ai-transcript-help{
margin-top:6px;font-size:11px;line-height:1.45;color:#6f7d77
}
.ai-recorded-preview{
width:100%;height:42px;margin-top:9px
}
/* =========================================================
v4.3 — STRICT LESSON CONTENT + OPENAI TTS
========================================================= */
.ai-badge-row{
display:flex;
flex-wrap:wrap;
gap:7px;
align-items:center;
margin-bottom:8px;
}
.ai-badge-row .ai-stt-badge{margin-bottom:0}
.ai-content-lock-badge,
.ai-tts-badge{
display:inline-flex;
align-items:center;
gap:5px;
padding:6px 9px;
border-radius:999px;
font-size:11px;
font-weight:900;
}
.ai-content-lock-badge{
background:#edf8f0;
color:#357044;
border:1px solid #d3ead9;
}
.ai-content-lock-badge.warning{
background:#fff5e8;
color:#9b6424;
border-color:#f1d8b6;
}
.ai-tts-badge{
background:#f4f0ff;
color:#65518e;
border:1px solid #ded5f1;
}
/* =========================================================
v4.4 — COMPACT SPEAKING + GUIDED RETRY + VI SUPPORT
========================================================= */
.ai-chat{
height:260px;
padding:10px 12px;
}
.ai-chat-empty{
min-height:100%;
gap:4px;
}
.ai-empty-icon{font-size:30px}
.ai-chat-empty strong{font-size:15px}
.ai-chat-empty span{font-size:12px;max-width:520px}
.ai-message{margin:8px 0}
.ai-avatar{
width:30px;height:30px;min-width:30px;font-size:14px
}
.ai-bubble{padding:8px 10px}
.ai-message-text{font-size:14px;line-height:1.45}
.ai-input-shell{margin-top:8px}
.ai-input-shell textarea{
min-height:50px;
max-height:92px;
padding:10px 11px;
}
.ai-input-actions{margin-top:7px}
.ai-speaking-note{margin-top:9px;padding:8px 11px}
.ai-badge-row{margin-bottom:6px}
.ai-voice-hint{margin-top:5px}
.ai-question-vi{
margin-top:6px;
padding-top:6px;
border-top:1px dashed #e7ddd4;
font-size:12px;
color:#79675c;
font-style:italic;
}
.ai-vi-support{
width:max-content;
max-width:88%;
margin:5px 0 8px 43px;
padding:6px 9px;
border-radius:10px;
background:#fff7e9;
color:#755f49;
font-size:12px;
border:1px solid #f0dfc3;
}
.ai-input-mode-badge{
display:inline-flex;
margin-bottom:6px;
padding:6px 9px;
border-radius:999px;
background:#fff1df;
color:#985f1e;
border:1px solid #efd1aa;
font-size:11px;
font-weight:900;
}
.ai-status.retry{
background:#fff7e8;
border-color:#efd5aa;
}
.ai-retry-required{
margin-top:7px;
padding:6px 8px;
border-radius:8px;
background:#fff0d8;
color:#83551d;
font-weight:800;
}
.ai-retry-card{
margin-top:7px;
padding:8px 9px;
border-radius:9px;
background:#fff5e7;
border:1px solid #efd7b5;
color:#684b2c;
}
.ai-retry-card div{margin-top:4px;font-size:14px;font-weight:800}
.ai-retry-success{
margin-top:6px;color:#23724c;font-weight:850;font-size:12px
}
.ai-retry-soft{
margin-top:6px;padding:6px 8px;border-radius:8px;
background:#f7f2ec;color:#75685f;font-size:12px
}
.ai-vi-toggle{
background:#fff8eb !important;
border-color:#efddbd !important;
}
@media(max-width:800px){
.ai-chat{height:250px}
}
@media(max-width:520px){
.ai-chat{height:235px}
.ai-vi-support{margin-left:0;max-width:100%}
}
/* =========================================================
v4.5 — SMART RETRY + CLEAR VIETNAMESE SUPPORT
========================================================= */
.ai-question-vi{
background:#fff8e9;
border:1px solid #f0dfbf;
border-radius:8px;
padding:6px 8px;
margin-top:7px;
color:#6c563f;
font-style:normal;
}
.correction-note{
background:#fff8e9;
border-radius:7px;
padding:6px 8px;
margin-top:7px;
color:#665544;
}
.correction-better{
font-size:13px;
}
.ai-vi-toggle:has(input:checked){
background:#fff0cf !important;
border-color:#eacb91 !important;
}
/* =========================================================
v4.6 — TEACHER CONTENT BUILDER
========================================================= */
.skill-tab.skill-disabled,
.skill-tab:disabled{
opacity:.42;
cursor:not-allowed;
filter:grayscale(.7);
}
.builder-layout{
display:grid;
grid-template-columns:300px minmax(0,1fr);
gap:16px;
align-items:start;
}
.builder-sidebar{
padding:16px;
position:sticky;
top:82px;
max-height:calc(100vh - 100px);
overflow:auto;
}
.builder-sidebar-head,
.builder-title-row{
display:flex;
justify-content:space-between;
gap:12px;
align-items:flex-start;
margin-bottom:14px;
}
.builder-sidebar h2,
.builder-title-row h2{margin:3px 0}
.compact-btn{padding:8px 10px}
.builder-lesson-list{
display:flex;
flex-direction:column;
gap:7px;
margin-top:12px;
}
.builder-lesson-item{
width:100%;
display:grid;
grid-template-columns:34px 1fr 14px;
gap:8px;
align-items:center;
text-align:left;
padding:9px 8px;
border-radius:11px;
border:1px solid #e3d9d0;
background:#fff;
}
.builder-lesson-item:hover,
.builder-lesson-item.active{
border-color:#9dcfc6;
background:#eff9f7;
}
.builder-lesson-pos{
width:30px;height:30px;border-radius:9px;
display:flex;align-items:center;justify-content:center;
background:#f3eee8;font-weight:900;font-size:11px;
}
.builder-lesson-copy{
display:flex;flex-direction:column;gap:3px;min-width:0;
}
.builder-lesson-copy strong{
font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.builder-lesson-copy small{font-size:10px;color:#7f746b}
.builder-main{display:flex;flex-direction:column;gap:12px}
.builder-top-actions{display:flex;gap:8px;flex-wrap:wrap}
.builder-meta-grid{
display:grid;
grid-template-columns:1fr 160px 210px;
gap:11px;
}
.builder-wide{grid-column:1/-1}
.builder-publish-toggle{align-self:end;min-height:44px}
.builder-section{padding:0;overflow:hidden}
.builder-section summary{
list-style:none;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding:14px 16px;
font-weight:900;
border-bottom:1px solid transparent;
}
.builder-section[open] summary{
border-bottom-color:#eee4dc;
}
.builder-section summary::-webkit-details-marker{display:none}
.builder-section summary small{font-weight:500;color:#8a7d73}
.builder-section > .field,
.builder-section > .builder-rows,
.builder-section > .builder-add-row,
.builder-section > .builder-upload-grid,
.builder-section > .feedback,
.builder-section > .builder-asset-list{
margin-left:15px;margin-right:15px;
}
.builder-section > .field{margin-top:12px}
.builder-rows{
display:flex;
flex-direction:column;
gap:8px;
margin-top:12px;
}
.builder-row{
position:relative;
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:7px;
padding:10px 36px 10px 10px;
border:1px solid #e5dbd3;
border-radius:11px;
background:#fcfbfa;
}
.builder-row input,
.builder-row select{
width:100%;min-width:0;
padding:8px 9px;
border:1px solid #ded4cc;
border-radius:8px;
background:#fff;
font:inherit;
}
.builder-span-2{grid-column:span 2}
.builder-span-3{grid-column:1/-1}
.builder-remove-row{
position:absolute;
top:8px;right:8px;
width:25px;height:25px;padding:0;
border-radius:50%;
color:#9a5148;
}
.builder-add-row{
margin-top:9px;margin-bottom:13px;
padding:7px 10px;
border-style:dashed;
}
.builder-correct-label{
display:flex;gap:6px;align-items:center;
font-size:11px;font-weight:800;color:#6d6259;
}
.builder-correct-label select{width:auto}
.builder-upload-grid{
display:grid;
grid-template-columns:1fr 220px;
gap:10px;
margin-top:13px;
margin-bottom:10px;
}
.builder-upload-grid button{align-self:end}
.builder-asset-list{margin-bottom:14px}
.builder-asset-row{
display:grid;
grid-template-columns:1fr auto auto;
gap:10px;
align-items:center;
padding:9px 0;
border-top:1px solid #eee5de;
}
.builder-asset-row div{display:flex;flex-direction:column}
.builder-asset-row small{color:#8a7d73;margin-top:2px}
.builder-bottom-actions{
padding:14px 16px;
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
}
.builder-bottom-actions p{margin:3px 0 0}
.builder-bottom-actions > div:last-child{display:flex;gap:8px}
.danger-btn{
border-color:#efc6c1 !important;
background:#fff5f4 !important;
color:#a6453d !important;
}
@media(max-width:1000px){
.builder-layout{grid-template-columns:1fr}
.builder-sidebar{position:static;max-height:none}
.builder-lesson-list{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:700px){
.builder-meta-grid,
.builder-upload-grid{grid-template-columns:1fr}
.builder-row{grid-template-columns:1fr}
.builder-span-2,.builder-span-3{grid-column:auto}
.builder-lesson-list{grid-template-columns:1fr}
.builder-title-row,
.builder-bottom-actions{flex-direction:column;align-items:stretch}
.builder-top-actions,
.builder-bottom-actions > div:last-child{width:100%}
.builder-top-actions button,
.builder-bottom-actions button{flex:1}
}
/* =========================================================
v4.7 — FULL VOCABULARY + RICH FLASHCARD
========================================================= */
.vocab-card{
padding:16px;
display:block;
}
.vocab-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:12px;
}
.vocab-ipa{
margin-top:3px;
font-size:12px;
color:#6f817d;
font-weight:800;
}
.vocab-audio-actions{
display:flex;
gap:6px;
flex-wrap:wrap;
justify-content:flex-end;
}
.listen-word,
.listen-example{
width:auto;
min-height:38px;
padding:7px 9px;
border:1px solid #dfd1c4;
background:#fff;
border-radius:10px;
cursor:pointer;
font-size:11px;
font-weight:850;
}
.listen-example{background:#edf9f6;border-color:#cae8e1}
.listen-word:disabled,.listen-example:disabled{opacity:.45;cursor:not-allowed}
.vocab-example{
margin-top:10px;
display:flex;
flex-direction:column;
gap:4px;
background:#fff8f0;
border-radius:12px;
padding:11px 12px;
color:#5f554d;
}
.vocab-example strong{font-size:13px}
.vocab-example span{font-size:11px;color:#837268}
.vocab-expand{
margin-top:9px;
display:grid;
gap:5px;
}
.vocab-mini-row{
display:flex;
gap:8px;
align-items:flex-start;
font-size:10.5px;
line-height:1.4;
}
.vocab-mini-row strong{min-width:72px;color:#776a61}
.vocab-mini-row span{color:#4f5f5b}
.vocab-mini-row.ant span{color:#995b54}
.vocab-extra-example{
margin-top:3px;
padding-top:7px;
border-top:1px dashed #e7ddd4;
font-size:10.5px;
color:#73665d;
}
.vocab-extra-example span{display:block;margin-top:3px;color:#89796e}
.flash-shell{max-width:820px}
.flash-card{
min-height:390px;
padding:30px 34px;
overflow:auto;
}
.flash-face{
font-size:inherit;
font-weight:inherit;
width:100%;
}
.flash-front{
min-height:320px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}
.flash-term{
font-size:46px;
line-height:1.1;
font-weight:950;
color:#2d403b;
}
.flash-ipa{
margin-top:9px;
font-size:18px;
font-weight:800;
color:#5d7d76;
}
.flash-front small{
margin-top:24px;
font-size:14px;
color:#8a7d73;
}
.flash-back{
text-align:left;
}
.flash-back-head{
text-align:center;
padding-bottom:14px;
border-bottom:1px solid #eee3da;
}
.flash-back-term{
font-size:27px;
font-weight:950;
color:#2d403b;
}
.flash-meaning{
margin-top:5px;
font-size:20px;
font-weight:900;
color:#67594f;
}
.flash-main-example,
.flash-extra-example{
margin-top:14px;
padding:12px 14px;
border-radius:13px;
}
.flash-main-example{
background:#edf9f6;
border:1px solid #cfe9e3;
}
.flash-extra-example{
background:#fff8ef;
border:1px solid #eedfca;
}
.flash-section-label{
margin-bottom:6px;
font-size:9px;
font-weight:950;
letter-spacing:.07em;
color:#81736a;
}
.flash-main-example strong,
.flash-extra-example strong{
display:block;
font-size:15px;
line-height:1.45;
}
.flash-main-example span,
.flash-extra-example span{
display:block;
margin-top:5px;
font-size:12px;
line-height:1.4;
color:#806f65;
}
.flash-lexical-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
margin-top:12px;
}
.flash-lex-box{
min-height:66px;
padding:9px 10px;
border-radius:11px;
background:#f7f4f1;
border:1px solid #e8dfd7;
}
.flash-lex-box small{
display:block;
margin:0 0 4px;
font-size:9px;
font-weight:950;
letter-spacing:.05em;
color:#8a7c72;
}
.flash-lex-box b{
font-size:11px;
line-height:1.4;
color:#4e5f5a;
}
.flash-lex-box.ant b{color:#985b55}
.flash-turn-hint{
display:block;
text-align:center;
margin-top:12px !important;
font-size:11px !important;
color:#9a8b80 !important;
}
.flash-audio-note{
margin:9px auto 0;
max-width:660px;
text-align:center;
font-size:10.5px;
color:#8c7f76;
}
@media(max-width:700px){
.flash-card{min-height:360px;padding:23px 18px}
.flash-front{min-height:300px}
.flash-term{font-size:38px}
.flash-lexical-grid{grid-template-columns:1fr}
.vocab-head{flex-direction:column}
.vocab-audio-actions{justify-content:flex-start}
}
/* v4.8 Flashcard Memory Pro */
:root{--ink:#24322f;--muted:#756c65;--teal:#0b8177;--teal-soft:#eaf8f5;--sand:#fff8ee;--line:#e8ddd4}
body{font-family:"Segoe UI Variable","Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);font-feature-settings:"kern" 1,"liga" 1}
h1,h2,h3,.brand,.flash-term,.flash-back-term,.vocab-term{font-family:"Segoe UI Variable Display","Inter","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.025em}
.flash-study-bar{max-width:820px;margin:0 auto 12px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.flash-mode-tabs{display:flex;gap:6px;flex-wrap:wrap}.flash-mode{border:1px solid var(--line);background:#fff;padding:8px 11px;border-radius:999px;font-size:11px;font-weight:850;cursor:pointer}.flash-mode b{margin-left:5px;padding:2px 6px;border-radius:999px;background:#f0ece8}.flash-mode.active{background:var(--teal-soft);border-color:#afdcd3;color:#086e65}
.flash-memory-progress{font-size:11px;font-weight:800;color:#6e756f}
.flash-memory-actions{display:flex;justify-content:center;gap:10px;margin-top:12px;flex-wrap:wrap}.flash-memory-actions button{min-width:180px;padding:11px 16px;border-radius:13px;font-weight:900;cursor:pointer}.flash-forgot{border:1px solid #efc89c;background:#fff8ed;color:#975b19}.flash-known{border:1px solid #9bd6c7;background:#eaf9f4;color:#087267}
.flash-status-badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:9px;font-weight:950;letter-spacing:.06em;margin-bottom:12px}.flash-status-badge.new{background:#f2f0ed;color:#7c7169}.flash-status-badge.review{background:#fff0d8;color:#915b1b}.flash-status-badge.known{background:#e5f8f1;color:#087267}
.flash-empty-state{min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}.flash-empty-state>div{font-size:46px}.flash-empty-state strong{font-size:22px}.flash-empty-state span{font-size:13px;color:var(--muted);max-width:440px}
.listen-extra{width:auto;min-height:38px;padding:7px 9px;border:1px solid #dfd1c4;background:#fff8ed;border-radius:10px;cursor:pointer;font-size:11px;font-weight:850}.listen-extra:disabled{opacity:.45;cursor:not-allowed}
.lex-pairs{display:flex;gap:5px;flex-wrap:wrap}.lex-pair{display:inline-flex;align-items:baseline;gap:4px;padding:3px 6px;border-radius:7px;background:#f5f3f0}.lex-pair b{font-size:10.5px}.lex-pair em{font-size:9.5px;color:#8a7669;font-style:normal}
.flash-lex-box .lex-pair{display:flex;width:100%;background:transparent;padding:2px 0}.flash-lex-box .lex-pair b{font-size:11px}.flash-lex-box .lex-pair em{font-size:10px}
.flash-controls button{padding:10px 12px;font-size:12px}.flash-card{border-radius:24px;background:linear-gradient(180deg,#fff 0%,#fffdf9 100%);box-shadow:0 18px 45px rgba(60,45,30,.08)}.flash-main-example{box-shadow:inset 0 0 0 1px rgba(15,143,131,.03)}.flash-section-label{letter-spacing:.1em}
@media(max-width:600px){.flash-memory-actions button{min-width:0;flex:1}.flash-study-bar{align-items:flex-start}.flash-memory-progress{width:100%}.flash-controls{gap:6px}.flash-controls button{padding:9px 10px}.flash-card{padding:20px 16px}}
/* =========================================================
v4.9 — SHADOWING / LISTENING BUILDER
========================================================= */
.shadow-builder-head{padding:20px}
.shadow-builder-config{
display:grid;
grid-template-columns:minmax(220px,1.2fr) minmax(220px,1.2fr) repeat(3,minmax(120px,.6fr));
gap:10px;
align-items:end;
}
.shadow-builder-wide{grid-column:span 1}
.shadow-builder-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.shadow-builder-actions button{padding:10px 13px;border-radius:12px;border:1px solid #ded5cd;background:#fff;font-weight:850;cursor:pointer}
.shadow-ai-note{margin-top:9px;padding:8px 10px;border-radius:10px;background:#fff8eb;border:1px solid #f0dfbd;color:#725f45;font-size:11px}
.shadow-line-editor-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.shadow-line-editor-head h2{margin:4px 0 0}
.shadow-builder-stats{font-size:11px;font-weight:850;color:#6f756f;padding:7px 9px;border-radius:999px;background:#f4f1ed}
.shadow-builder-lines{display:flex;flex-direction:column;gap:9px}
.shadow-edit-row{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;padding:11px;border:1px solid #e7ddd5;border-radius:13px;background:#fcfbfa}
.shadow-edit-number{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#eaf7f4;color:#087267;font-weight:950;font-size:11px}
.shadow-edit-main{min-width:0;display:grid;gap:7px}
.shadow-edit-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.shadow-edit-top input{max-width:140px}
.shadow-edit-main input,.shadow-edit-main textarea{width:100%;padding:8px 9px;border:1px solid #ddd4cd;border-radius:9px;background:#fff;font:inherit;font-size:12px;resize:vertical}
.shadow-audio-status{font-size:10px;font-weight:900;padding:5px 7px;border-radius:999px}.shadow-audio-status.ready{background:#e7f8f1;color:#087267}.shadow-audio-status.missing{background:#fff3df;color:#94601e}
.shadow-line-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.shadow-line-actions button,.shadow-upload-label{padding:7px 9px;border:1px solid #ded5cd;border-radius:9px;background:#fff;font-size:10.5px;font-weight:850;cursor:pointer}.shadow-upload-label{position:relative;overflow:hidden}.shadow-upload-label input{position:absolute;inset:0;opacity:0;cursor:pointer}
.shadow-line-message{min-height:14px;font-size:10px;color:#746a62}
@media(max-width:1000px){.shadow-builder-config{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.shadow-builder-config{grid-template-columns:1fr}.shadow-edit-row{grid-template-columns:1fr}.shadow-edit-number{width:30px;height:30px}.shadow-edit-top{align-items:flex-start}.shadow-line-editor-head{flex-direction:column;align-items:flex-start}}
/* =========================================================
v5.0 — STUDENT REPORT + FLASHCARD CLOUD SYNC
========================================================= */
.report-head{align-items:flex-end}
.report-filters{display:grid;grid-template-columns:220px minmax(280px,1fr);gap:9px;min-width:min(520px,100%)}
.report-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.report-metric{padding:14px;border:1px solid #e6ddd6;border-radius:14px;background:linear-gradient(180deg,#fff,#fbf9f6);display:flex;flex-direction:column;gap:4px}
.report-metric span{font-size:10px;font-weight:900;color:#7f756e;text-transform:uppercase;letter-spacing:.05em}
.report-metric strong{font-size:27px;letter-spacing:-.035em;color:#176f67}
.report-metric small{font-size:10px;color:#83786f}
.report-section-card{padding:14px;border:1px solid #e8ded7;border-radius:15px;background:#fff;margin-top:10px}
.report-section-title{display:flex;gap:8px;align-items:center;margin-bottom:10px}.report-section-title>span{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#f2f8f6}.report-section-title div{display:flex;flex-direction:column}.report-section-title strong{font-size:13px}.report-section-title small{font-size:10px;color:#82776f;margin-top:2px}
.report-skill-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.report-skill{padding:9px;border-radius:10px;background:#f7f4f1;border:1px solid #ebe2db;display:grid;gap:4px}.report-skill span{font-size:10px;font-weight:800}.report-skill b{font-size:10px;color:#8b8179}.report-skill small{font-size:9px;color:#7d736c}.report-skill.done{background:#eaf8f3;border-color:#c2e5da}.report-skill.done b{color:#087267}
.report-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.report-word-cloud{display:flex;gap:6px;flex-wrap:wrap}.report-word-cloud span{padding:6px 8px;border-radius:999px;background:#fff0da;border:1px solid #efd0a7;color:#87531c;font-size:10px;font-weight:850}
.report-correction-list{display:grid;gap:7px}.report-correction{padding:8px 9px;border-radius:10px;background:#faf7f4;border:1px solid #ece2da;display:grid;gap:3px}.report-correction .old{font-size:10px;text-decoration:line-through;color:#9a6a63}.report-correction .better{font-size:11px;font-weight:900;color:#176f67}.report-correction small{font-size:9.5px;color:#7c716a}
.report-info-stack{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.report-info-stack>div{padding:9px;border-radius:10px;background:#f8f6f3;display:flex;flex-direction:column;gap:3px}.report-info-stack span{font-size:9px;color:#857a72}.report-info-stack strong{font-size:12px}
.report-quiz-list{display:grid;gap:6px}.report-quiz-list>div{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:7px 8px;border-bottom:1px solid #eee5de;font-size:10px}.report-quiz-list b{color:#176f67}
.report-empty{padding:14px;text-align:center;border:1px dashed #ddd2ca;border-radius:11px;color:#8a7e75;font-size:10.5px;background:#fcfaf8}
@media(max-width:1000px){.report-summary-grid{grid-template-columns:repeat(2,1fr)}.report-skill-grid{grid-template-columns:repeat(2,1fr)}.report-head{align-items:flex-start;flex-direction:column}.report-filters{width:100%;min-width:0}}
@media(max-width:650px){.report-summary-grid,.report-detail-grid,.report-skill-grid,.report-filters{grid-template-columns:1fr}.report-metric strong{font-size:23px}}
/* =========================================================
v5.1 — FREE / PLUS / AI CREDIT COMMERCIAL LAYER
========================================================= */
.plan-chip{display:flex;align-items:center;gap:6px;padding:7px 10px;border:1px solid #dcd4cc;border-radius:999px;background:#fff;font-size:10px}.plan-chip strong{font-size:10px;color:#176f67}.plan-chip span{color:#7b7169}
.account-main-info{display:flex;flex-direction:column;gap:3px}.account-plan-text{font-size:10.5px;color:#756b63}.account-plan-badge{display:inline-flex;padding:2px 6px;border-radius:999px;font-size:9px;font-weight:950}.account-plan-badge.plus{background:#fff0c9;color:#8d6414}.account-plan-badge.free{background:#edf4f1;color:#55716a}
.skill-tab.plus-locked{border-style:dashed;background:#fff9ee;color:#866229}.plus-lock{margin-left:3px;padding:2px 5px;border-radius:999px;background:#ffe9ad;font-size:8px;font-weight:950}
.commercial-plan-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:12px}.commercial-plan-card{padding:16px;border:1px solid #e5ddd6;border-radius:16px;background:#fff}.commercial-plan-card.plus{background:linear-gradient(145deg,#fffdf5,#fff7d9);border-color:#ead69c}.commercial-plan-top{display:flex;gap:10px;align-items:center}.commercial-plan-top>span{font-size:30px}.commercial-plan-top div{display:flex;flex-direction:column}.commercial-plan-top strong{font-size:20px}.commercial-plan-top small{font-size:10px;color:#7b7169}.commercial-feature-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.commercial-feature-list span{padding:5px 7px;border-radius:999px;background:#edf8f4;color:#176f67;font-size:9.5px;font-weight:800}.commercial-feature-list span.locked{background:#f4f0ec;color:#84776e}.commercial-plan-settings{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:8px;align-items:end;margin-top:12px}.commercial-plan-settings input{width:100%}
.commercial-student-head{align-items:flex-end}.commercial-student-select{min-width:260px}.commercial-student-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.commercial-mini-stat{padding:12px;border:1px solid #e9dfd7;border-radius:12px;background:#fbfaf8;display:flex;flex-direction:column;gap:3px}.commercial-mini-stat span{font-size:9px;color:#83776f;text-transform:uppercase;font-weight:900}.commercial-mini-stat strong{font-size:18px}.commercial-mini-stat small{font-size:9px;color:#8b8078}
.commercial-actions-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:9px}.commercial-action-box{padding:13px;border:1px solid #e7ddd5;border-radius:13px;background:#fff;display:flex;flex-direction:column;gap:9px}.commercial-action-box>strong{font-size:12px}.commercial-action-box>small{font-size:9px;color:#847970;line-height:1.4}.commercial-action-box button{padding:9px 11px;border:1px solid #ded4cc;border-radius:10px;background:#fff;font-weight:850;cursor:pointer}.commercial-inline-fields{display:grid;grid-template-columns:1fr 1fr;gap:7px}.commercial-device{display:flex;justify-content:space-between;gap:8px;padding:6px;border-bottom:1px solid #eee5de;font-size:9.5px}.commercial-device small{color:#8a7f77}.commercial-empty-inline{font-size:9.5px;color:#8b8078;padding:6px}
.commercial-table{display:grid}.commercial-tr{display:grid;grid-template-columns:minmax(220px,1.4fr) .55fr .55fr .55fr .45fr;gap:8px;padding:9px 7px;border-bottom:1px solid #eee5de;align-items:center;font-size:10px}.commercial-tr>span:first-child{display:flex;flex-direction:column}.commercial-tr small{font-size:8.5px;color:#897d75}.commercial-th{font-size:9px;font-weight:900;color:#81766e;background:#faf8f5;border-radius:9px}.commercial-status{padding:4px 7px;border-radius:999px;font-size:9px}.commercial-status.plus{background:#fff0c9;color:#8d6414}.commercial-status.free{background:#edf4f1;color:#55716a}
@media(max-width:1000px){.commercial-plan-grid,.commercial-actions-grid{grid-template-columns:1fr}.commercial-plan-settings{grid-template-columns:repeat(3,1fr)}.commercial-plan-settings button{grid-column:1/-1}.commercial-student-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.plan-chip{display:none!important}.commercial-plan-settings,.commercial-student-summary,.commercial-inline-fields{grid-template-columns:1fr}.commercial-tr{grid-template-columns:1.4fr .6fr .6fr}.commercial-tr span:nth-child(4),.commercial-tr span:nth-child(5),.commercial-th span:nth-child(4),.commercial-th span:nth-child(5){display:none}.commercial-student-head{align-items:flex-start;flex-direction:column}.commercial-student-select{width:100%;min-width:0}}
/* =========================================================
v5.2 — POLICY ONBOARDING / IP & DEVICE EXPLANATION
========================================================= */
.modal-open{overflow:hidden}
.terms-consent{display:flex!important;gap:9px;align-items:flex-start;margin:12px 0 6px;padding:11px;border:1px solid #e5ddd5;border-radius:12px;background:#fbfaf8;font-size:11px;line-height:1.45}
.terms-consent input{margin-top:2px;flex:0 0 auto}.inline-policy-link{border:0;background:none;padding:0;color:#0b8177;text-decoration:underline;font-weight:850;cursor:pointer}.terms-quick-note{padding:8px 10px;border-radius:10px;background:#eef8f5;color:#5c6f69;font-size:10px;line-height:1.45;margin-bottom:10px}
.account-banner-actions{display:flex;gap:7px;flex-wrap:wrap}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}.footer-links{display:flex;gap:6px;align-items:center;font-size:10px;color:#80746b}.footer-links button{border:0;background:none;padding:0;color:#176f67;font-weight:800;cursor:pointer;text-decoration:underline}
.policy-overlay{position:fixed;inset:0;z-index:1000;background:rgba(28,34,32,.55);backdrop-filter:blur(8px);display:grid;place-items:center;padding:18px}
.policy-modal{width:min(900px,100%);max-height:92vh;overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid #dfd6ce;border-radius:24px;box-shadow:0 30px 90px rgba(25,30,28,.24)}
.policy-modal-head{display:flex;justify-content:space-between;gap:18px;padding:20px 22px 14px;border-bottom:1px solid #eee5de}.policy-modal-head h2{margin:5px 0 5px;font-size:25px;letter-spacing:-.03em}.policy-modal-head p{margin:0;color:#7c7169;font-size:10.5px}.policy-close{width:34px;height:34px;border:1px solid #e2d8d0;border-radius:10px;background:#fff;font-size:23px;line-height:1;cursor:pointer}
.policy-important{margin:14px 22px 0;padding:13px 14px;border:1px solid #b7ddd4;border-radius:14px;background:linear-gradient(135deg,#edf9f6,#f8fcfb);display:flex;gap:12px;align-items:flex-start}.policy-important-icon{font-size:27px}.policy-important strong{font-size:13px;color:#0a7067}.policy-important p{margin:4px 0 0;font-size:11px;line-height:1.55;color:#50635e}
.policy-body{padding:14px 22px 20px;overflow:auto;display:grid;gap:10px}.policy-section{padding:14px;border:1px solid #e9e0d9;border-radius:14px;background:#fff}.policy-section h3{margin:0 0 8px;font-size:14px}.policy-section p{margin:0;font-size:10.8px;line-height:1.6;color:#655c56}.policy-plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.policy-plan{padding:12px;border-radius:12px;border:1px solid #e5ddd6;display:flex;flex-direction:column;gap:5px}.policy-plan.free{background:#f5faf8}.policy-plan.plus{background:#fff9e9;border-color:#ead9a8}.policy-plan strong{font-size:12px;margin-bottom:3px}.policy-plan span{font-size:10px;color:#625b55}.policy-callout{margin-top:9px;padding:9px 10px;border-radius:10px;background:#fff8eb;border:1px solid #f0dfbd;font-size:10.5px;line-height:1.5;color:#715f48}
.policy-faq{display:grid;gap:6px}.policy-faq details{border:1px solid #eee5df;border-radius:10px;padding:8px 10px;background:#fcfbfa}.policy-faq summary{cursor:pointer;font-weight:850;font-size:10.5px;color:#405550}.policy-faq p{margin-top:6px;font-size:10px}.policy-short-faq>div{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;padding:7px 0;border-bottom:1px solid #f0e8e2;font-size:10.5px}.policy-short-faq>div:last-child{border-bottom:0}.policy-short-faq span{color:#176f67;font-weight:800}
.policy-footer{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 22px;border-top:1px solid #eee5de;background:#fbfaf8}.policy-footer>div:first-child{font-size:10px;color:#756c65}.policy-footer-actions{display:flex;gap:7px}.policy-footer-actions button{padding:9px 12px;border-radius:10px;font-size:10.5px;font-weight:850}
@media(max-width:700px){.policy-overlay{padding:8px}.policy-modal{max-height:96vh;border-radius:18px}.policy-modal-head,.policy-body,.policy-footer{padding-left:14px;padding-right:14px}.policy-important{margin-left:14px;margin-right:14px}.policy-plan-grid{grid-template-columns:1fr}.policy-footer{align-items:flex-start;flex-direction:column}.policy-footer-actions{width:100%}.policy-footer-actions button{flex:1}.policy-short-faq>div{grid-template-columns:1fr}.account-banner-actions{width:100%}.account-banner-actions button{flex:1}}
/* =========================================================
v5.3 — POLICY READABILITY & PROFESSIONAL TYPOGRAPHY
========================================================= */
.terms-consent{
font-size:13px;
line-height:1.55;
padding:13px 14px;
}
.terms-quick-note{
font-size:12px;
line-height:1.6;
padding:10px 12px;
}
.inline-policy-link{font-size:13px}
.account-plan-text{font-size:12.5px;line-height:1.5}
.footer-links{font-size:11.5px}
.footer-inner{font-size:12px}
.policy-modal{
width:min(940px,100%);
border-radius:26px;
}
.policy-modal-head{
padding:24px 26px 18px;
}
.policy-modal-head .eyebrow{
font-size:12px;
}
.policy-modal-head h2{
margin:6px 0 7px;
font-size:30px;
line-height:1.15;
}
.policy-modal-head p{
font-size:13px;
line-height:1.5;
}
.policy-close{
width:40px;
height:40px;
font-size:26px;
}
.policy-important{
margin:16px 26px 0;
padding:16px 17px;
gap:14px;
}
.policy-important-icon{font-size:32px}
.policy-important strong{
font-size:16px;
line-height:1.35;
}
.policy-important p{
margin-top:6px;
font-size:13.5px;
line-height:1.65;
}
.policy-body{
padding:16px 26px 24px;
gap:12px;
}
.policy-section{
padding:17px 18px;
border-radius:15px;
}
.policy-section h3{
margin:0 0 9px;
font-size:17px;
line-height:1.35;
}
.policy-section p{
font-size:13.5px;
line-height:1.7;
}
.policy-second-paragraph{margin-top:8px!important}
.policy-feature-list{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:11px;
}
.policy-feature-list span{
display:inline-flex;
align-items:center;
padding:7px 10px;
border-radius:999px;
background:#eef8f5;
border:1px solid #d5ebe5;
color:#176f67;
font-size:12px;
font-weight:800;
}
.policy-feature-list.plus span{
background:#fff8e7;
border-color:#ead9a8;
color:#725614;
}
.policy-callout{
margin-top:11px;
padding:12px 13px;
font-size:13px;
line-height:1.65;
}
.policy-faq{
gap:8px;
margin-top:11px;
}
.policy-faq details{
padding:11px 12px;
border-radius:11px;
}
.policy-faq summary{
font-size:13px;
line-height:1.45;
}
.policy-faq p{
margin-top:7px;
font-size:12.5px;
line-height:1.65;
}
.policy-short-faq>div{
grid-template-columns:1.3fr 1.15fr;
gap:14px;
padding:10px 0;
font-size:13px;
line-height:1.5;
}
.policy-short-faq b{
color:#394a46;
}
.policy-short-faq span{
font-size:12.5px;
}
.policy-footer{
padding:14px 26px;
}
.policy-footer>div:first-child{
font-size:12px;
line-height:1.5;
}
.policy-footer-actions button{
padding:10px 14px;
font-size:12px;
}
@media(max-width:700px){
.policy-modal-head,.policy-body,.policy-footer{
padding-left:16px;
padding-right:16px;
}
.policy-important{
margin-left:16px;
margin-right:16px;
}
.policy-modal-head h2{
font-size:24px;
}
.policy-important strong{
font-size:15px;
}
.policy-important p,
.policy-section p{
font-size:13px;
}
.policy-section h3{
font-size:16px;
}
.policy-faq summary{
font-size:13px;
}
.policy-short-faq>div{
grid-template-columns:1fr;
gap:4px;
}
}
/* v5.4 — device quota visibility */
.account-plan-text strong:last-child{white-space:nowrap}
.device-policy-badge{font-weight:900}
@media(max-width:700px){
.account-plan-text{font-size:12px;line-height:1.65}
}
/* =========================================================
v5.5 — AI CREDIT + ONE-AUDIO SHADOWING
========================================================= */
.ai-speaking-meters{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ai-credit-badge{padding:7px 10px;border-radius:999px;background:#fff7db;border:1px solid #ead79a;color:#725714;font-size:10px;font-weight:900}
.shadow-workflow-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;margin:10px 0 14px;border:1px solid #dfe9e5;border-radius:13px;background:#f7fbfa}.shadow-workflow-strip>div{display:flex;align-items:center;gap:6px}.shadow-workflow-strip b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#16877d;color:#fff;font-size:10px}.shadow-workflow-strip span{font-size:10px;font-weight:800;color:#52635f}.shadow-workflow-strip i{font-style:normal;color:#9dada8}
.shadow-master-box{margin-top:14px;padding:15px;border:1px solid #cfe3dc;border-radius:15px;background:linear-gradient(145deg,#f4fbf8,#fffdf7)}.shadow-master-copy h3{margin:3px 0 4px;font-size:15px}.shadow-master-copy p{margin:0;color:#6f7773;font-size:10.5px;line-height:1.55}.shadow-master-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:11px}.shadow-master-controls input{flex:1;min-width:240px;padding:8px;border:1px solid #ddd5cd;border-radius:10px;background:#fff}.shadow-master-controls button{padding:9px 12px;border-radius:10px}.shadow-cost-note{margin-top:9px;padding:8px 10px;border-radius:9px;background:#fff8e8;color:#725e3e;font-size:10px;line-height:1.45}
.shadow-time-row{display:grid;grid-template-columns:150px 150px auto;gap:7px;align-items:end;margin:8px 0}.shadow-time-row label{font-size:9px;font-weight:850;color:#72675f}.shadow-time-row input{width:100%;margin-top:3px;padding:7px;border:1px solid #ded5ce;border-radius:8px}.shadow-time-row button,.listen-play-btn{padding:8px 10px;border:1px solid #d9d0c8;border-radius:9px;background:#fff;font-weight:850;cursor:pointer}.align-confidence{padding:4px 7px;border-radius:999px;font-size:9px;font-weight:950}.align-confidence.good{background:#e9f7f2;color:#147167}.align-confidence.medium{background:#fff5d8;color:#7d6118}.align-confidence.check{background:#fff0ec;color:#a14f3c}.shadow-check-note{margin-top:7px;padding:7px 9px;border-radius:8px;background:#fff5ef;color:#8a5948;font-size:9.5px;line-height:1.5}.listening-dynamic .listen-play-btn{margin:8px 0}
@media(max-width:700px){.shadow-workflow-strip i{display:none}.shadow-workflow-strip{display:grid;grid-template-columns:1fr 1fr}.shadow-master-controls{align-items:stretch;flex-direction:column}.shadow-master-controls input{min-width:0;width:100%}.shadow-time-row{grid-template-columns:1fr 1fr}.shadow-time-row button{grid-column:1/-1}.ai-speaking-meters{justify-content:flex-start}}
/* =========================================================
v5.6 — STUDENT PLUS / PAYMENT CENTER
========================================================= */
#planChip{cursor:pointer;font-family:inherit}
.billing-overlay{position:fixed;inset:0;z-index:1100;background:rgba(28,34,32,.58);backdrop-filter:blur(8px);display:grid;place-items:center;padding:16px}
.billing-modal{width:min(980px,100%);max-height:94vh;overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid #dfd6ce;border-radius:24px;box-shadow:0 30px 90px rgba(25,30,28,.26)}
.billing-head{display:flex;justify-content:space-between;gap:18px;padding:22px 24px 16px;border-bottom:1px solid #eee5de}.billing-head h2{margin:5px 0 6px;font-size:29px}.billing-head p{margin:0;color:#756b64;font-size:13px}.billing-close{width:40px;height:40px;border:1px solid #e3d9d1;border-radius:11px;background:#fff;font-size:25px;cursor:pointer}
.billing-current-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px 24px;background:#f8fbfa;border-bottom:1px solid #e5eeeb}.billing-summary-item{padding:11px 12px;background:#fff;border:1px solid #dfebe7;border-radius:12px;display:flex;flex-direction:column;gap:3px}.billing-summary-item span{font-size:10px;color:#80756d;font-weight:850;text-transform:uppercase}.billing-summary-item strong{font-size:17px}.billing-summary-item small{font-size:10px;color:#857a72}
.billing-body{overflow:auto;padding:16px 24px 22px;display:grid;gap:12px}.billing-section{border:1px solid #e9e0d9;border-radius:15px;padding:16px}.billing-section-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:12px}.billing-section-head h3{margin:0 0 3px;font-size:16px}.billing-section-head p{margin:0;color:#7a7068;font-size:11.5px;line-height:1.5}
.billing-plan-compare{display:grid;grid-template-columns:1fr 1fr;gap:9px}.billing-plan-card{padding:14px;border:1px solid #e6ddd5;border-radius:13px;background:#fbfaf8}.billing-plan-card.featured{background:linear-gradient(145deg,#fffdf4,#fff7d7);border-color:#e7d398}.billing-plan-name{display:flex;gap:9px;align-items:center}.billing-plan-name>span{font-size:27px}.billing-plan-name div{display:flex;flex-direction:column}.billing-plan-name strong{font-size:17px}.billing-plan-name small{font-size:11px;color:#7b6c50}.billing-plan-features{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.billing-plan-features span{font-size:10px;padding:5px 7px;border-radius:999px;background:#edf8f4;color:#176f67;font-weight:800}.featured .billing-plan-features span{background:#fff0bf;color:#755814}
.billing-action-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;border-radius:12px;background:#f8fbfa;border:1px solid #dceae6}.billing-action-card strong{font-size:14px}.billing-action-card p{margin:4px 0 0;font-size:11px;color:#756d66}.billing-action-card button{white-space:nowrap}.billing-warning{grid-column:1/-1;font-size:11px;color:#8c631b;background:#fff6dc;padding:9px 10px;border-radius:9px}
.billing-transfer-box{border:1px solid #dcd4cc;border-radius:14px;padding:14px;background:#fff}.billing-transfer-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.billing-transfer-title h4{margin:5px 0 0;font-size:16px}.billing-transfer-title>strong{font-size:20px;color:#0b786f}.billing-bank-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}.billing-bank-grid>div{padding:10px;border-radius:10px;background:#f8f7f5;display:flex;flex-direction:column;gap:3px}.billing-bank-grid>div.important{background:#fff7dd;border:1px solid #edd99d}.billing-bank-grid span{font-size:9.5px;color:#83786f;text-transform:uppercase;font-weight:850}.billing-bank-grid strong{font-size:13px;word-break:break-word}.billing-bank-grid button{align-self:flex-start;border:0;background:none;color:#0b8177;padding:3px 0;font-weight:800;font-size:10px;cursor:pointer}.billing-transfer-note{margin-top:10px;padding:10px;border-radius:10px;background:#edf8f5;display:flex;flex-direction:column;gap:4px;font-size:11px;line-height:1.5}.billing-transfer-actions{display:flex;gap:7px;align-items:center;margin-top:10px}.billing-waiting-text{font-size:11px;font-weight:800;color:#8b661d}
.billing-credit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.billing-credit-card{padding:13px;border:1px solid #e5ddd5;border-radius:12px;display:flex;flex-direction:column;gap:6px;background:#fff}.billing-credit-card strong{font-size:12px}.billing-credit-card b{font-size:16px;color:#0a786f}.billing-credit-card span{font-size:12px}.billing-credit-card button{margin-top:4px}.billing-empty{padding:13px;border-radius:11px;background:#f7f5f2;display:flex;flex-direction:column;gap:4px}.billing-empty strong{font-size:12px}.billing-empty span{font-size:11px;color:#7d736b;line-height:1.5}
.billing-order-list{display:grid;gap:5px}.billing-order-row{display:grid;grid-template-columns:1.15fr .65fr 1fr .8fr;gap:8px;align-items:center;padding:9px;border-bottom:1px solid #eee6df;font-size:11px}.billing-order-row>span:first-child{display:flex;flex-direction:column}.billing-order-row small{font-size:9.5px;color:#847971}
.payment-status{display:inline-flex;align-items:center;gap:3px;width:max-content;padding:4px 7px;border-radius:999px;font-size:9.5px;font-weight:900}.payment-status.pending{background:#f3f0ed;color:#796f67}.payment-status.waiting{background:#fff0bd;color:#8b6412}.payment-status.paid{background:#e8f7f1;color:#137267}.payment-status.rejected{background:#fdeceb;color:#a84840}.payment-status.cancelled,.payment-status.expired{background:#f0efed;color:#817870}
.billing-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 24px;border-top:1px solid #eee5de;background:#fbfaf8}.billing-footer span{font-size:10.5px;color:#756c65}
/* Teacher payment center */
.payment-admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}.payment-admin-stat{padding:13px;display:flex;flex-direction:column;gap:5px}.payment-admin-stat span{font-size:9.5px;color:#7a716a;font-weight:850}.payment-admin-stat strong{font-size:20px}
.payment-bank-form{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:end}.payment-bank-wide{grid-column:1/-1}.payment-bank-form button{width:max-content}.payment-credit-package-form{display:grid;grid-template-columns:1.2fr .7fr .7fr .7fr auto;gap:8px;align-items:end}.payment-package-list{display:grid;gap:5px;margin-top:10px}.payment-package-admin-row{display:grid;grid-template-columns:1.4fr .55fr .45fr .35fr;gap:7px;align-items:center;padding:8px;border-bottom:1px solid #eee5de;font-size:10.5px}.payment-package-admin-row>span:first-child{display:flex;flex-direction:column}.payment-package-admin-row small{font-size:9px;color:#857a72}
.payment-admin-list{display:grid;gap:7px}.payment-admin-order{display:grid;grid-template-columns:1.25fr .65fr .85fr .6fr .8fr 1fr;gap:8px;align-items:center;padding:11px;border:1px solid #e8e0da;border-radius:11px;background:#fff}.payment-admin-order.needs-review{background:#fffaf0;border-color:#ead9a9}.payment-admin-order-main{display:flex;flex-direction:column;gap:2px}.payment-admin-order-main strong{font-size:11px}.payment-admin-order-main small{font-size:9px;color:#837970}.payment-label{display:block;font-size:8.5px;color:#877c73;text-transform:uppercase;font-weight:900;margin-bottom:3px}.payment-code{font-size:13px;color:#0a786f}.payment-admin-order>div>strong{font-size:10.5px}.payment-admin-order>div>small{display:block;font-size:9px;color:#82776f}.payment-admin-order-actions{display:flex;gap:5px;justify-content:flex-end}.payment-admin-order-actions button{padding:7px 8px;font-size:9px}
@media(max-width:1050px){
.billing-current-summary,.payment-admin-stats{grid-template-columns:repeat(2,1fr)}
.payment-bank-form{grid-template-columns:repeat(2,1fr)}
.payment-credit-package-form{grid-template-columns:repeat(2,1fr)}
.payment-credit-package-form button{grid-column:1/-1}
.payment-admin-order{grid-template-columns:1.2fr .7fr .7fr .7fr}
.payment-admin-order>div:nth-child(5){display:none}
.payment-admin-order-actions{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:700px){
.billing-overlay{padding:7px}.billing-modal{max-height:97vh;border-radius:18px}
.billing-head,.billing-body,.billing-footer{padding-left:14px;padding-right:14px}
.billing-head h2{font-size:23px}.billing-current-summary{grid-template-columns:1fr 1fr;padding:10px 14px}
.billing-plan-compare,.billing-bank-grid,.billing-credit-grid{grid-template-columns:1fr}
.billing-action-card{align-items:flex-start;flex-direction:column}.billing-action-card button{width:100%}
.billing-order-row{grid-template-columns:1.1fr .7fr}.billing-order-row>span:nth-child(4){display:none}
.billing-footer{align-items:flex-start;flex-direction:column}.billing-footer button{width:100%}
.payment-admin-stats,.payment-bank-form,.payment-credit-package-form{grid-template-columns:1fr}
.payment-bank-wide{grid-column:auto}.payment-package-admin-row{grid-template-columns:1fr .7fr}.payment-package-admin-row button{width:100%}
.payment-admin-order{grid-template-columns:1fr 1fr}.payment-admin-order>div:nth-child(3),.payment-admin-order>div:nth-child(5){display:none}
.payment-admin-order-actions{grid-column:1/-1;flex-direction:column}.payment-admin-order-actions button{width:100%}
}
/* =========================================================
v5.7 — SAFE PAYMENT TEST MODE
========================================================= */
.billing-test-banner{display:flex;align-items:center;gap:14px;padding:11px 24px;background:#efe9ff;border-bottom:1px solid #d7c9fa;color:#4e3681}.billing-test-banner strong{font-size:12px;white-space:nowrap}.billing-test-banner span{font-size:11px;line-height:1.45}.test-order-box{border:2px dashed #8b6bd1;background:#fbf9ff}.payment-test-order-label{display:inline-flex;width:max-content;padding:4px 8px;border-radius:999px;background:#ede5ff;color:#5a3c9a;font-size:9.5px;font-weight:950;letter-spacing:.03em}.billing-transfer-title>strong small{font-size:9px;color:#776a8d;font-weight:700}.billing-test-code{margin-top:12px;padding:12px;border-radius:11px;background:#efe9ff;display:flex;justify-content:space-between;gap:10px;align-items:center}.billing-test-code span{font-size:10px;color:#76658f;font-weight:850}.billing-test-code strong{font-size:16px;color:#52358e}.billing-transfer-note.test-note{background:#f3effd;color:#4d3c71}
.payment-test-card{border:1px solid #d9cef3;background:linear-gradient(145deg,#fff,#fbf9ff)}.payment-test-badge{padding:7px 10px;border-radius:999px;font-size:10px;font-weight:950}.payment-test-badge.off{background:#f0efed;color:#7a7169}.payment-test-badge.on{background:#ece4ff;color:#5b3c9b;border:1px solid #d3c2f7}.payment-test-controls{display:grid;grid-template-columns:1.3fr 1.1fr auto auto;gap:8px;align-items:end}.payment-test-student-info{min-height:48px;padding:9px 11px;border-radius:10px;background:#f7f4fc;display:flex;flex-direction:column;justify-content:center;gap:3px}.payment-test-student-info strong{font-size:11px}.payment-test-student-info span{font-size:9.5px;color:#756a82;line-height:1.4}.payment-test-note{margin-top:10px;padding:9px 11px;border-radius:10px;background:#f0ebfb;color:#544174;font-size:10px;line-height:1.5}.test-admin-order{border:2px dashed #bca8ea!important;background:#fbf9ff!important}.payment-order-badges{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
@media(max-width:1050px){.payment-test-controls{grid-template-columns:1fr 1fr}.payment-test-controls button{width:100%}}
@media(max-width:700px){.billing-test-banner{align-items:flex-start;flex-direction:column;padding:10px 14px;gap:3px}.payment-test-controls{grid-template-columns:1fr}.payment-test-card .teacher-section-head{align-items:flex-start;flex-direction:column}}
/* =========================================================
v5.8 — PAYMENT DAY POLISH + SHADOWING QA
========================================================= */
.shadow-master-test-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.shadow-master-test-row span{font-size:10px;color:#7c726b;line-height:1.4}
.shadow-qa-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 4px}
.shadow-qa-strip>div{border:1px solid #e2ebe8;background:#f8fbfa;border-radius:11px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.shadow-qa-strip span{font-size:9px;text-transform:uppercase;font-weight:900;color:#80766e}
.shadow-qa-strip strong{font-size:13px;color:#24332f}
@media(max-width:800px){
.shadow-qa-strip{grid-template-columns:1fr 1fr}
.shadow-master-test-row button{width:100%}
}
/* =========================================================
v5.9 — ONE-CLICK DIALOGUE AUDIO FROM CONVERSATION
========================================================= */
.shadow-auto-box{border:1px solid #b9ddd5;background:linear-gradient(135deg,#f2fbf8,#fffdf7);border-radius:16px;padding:16px;margin-top:12px}
.shadow-auto-main{display:flex;justify-content:space-between;align-items:center;gap:18px}.shadow-auto-main h3{margin:3px 0 5px;font-size:17px}.shadow-auto-main p{margin:0;color:#625c57;font-size:11.5px;line-height:1.55;max-width:720px}.shadow-auto-generate{white-space:nowrap;min-width:235px;padding:13px 16px}
.shadow-auto-estimate{margin-top:11px;padding:10px 12px;border-radius:10px;background:#e9f7f3;color:#285f58;font-size:11px;line-height:1.5}.shadow-auto-estimate span{color:#6d655f}
.shadow-auto-option-row{display:flex;align-items:center;gap:9px;margin-top:9px;flex-wrap:wrap}.shadow-auto-option-row span{font-size:9.8px;color:#81766e}.shadow-auto-advanced{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:9px;padding:11px;border:1px dashed #d9d0c8;border-radius:11px;background:#fff}.shadow-auto-advanced.hidden{display:none!important}
.shadow-master-box{margin-top:12px;opacity:.94}.shadow-master-copy .eyebrow{color:#8a7662}
@media(max-width:800px){.shadow-auto-main{align-items:flex-start;flex-direction:column}.shadow-auto-generate{width:100%;min-width:0}.shadow-auto-advanced{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.shadow-auto-advanced{grid-template-columns:1fr}}
/* =========================================================
v6.0 — LESSON PARTS B / C / D
========================================================= */
.lesson-parts-builder>summary{background:linear-gradient(90deg,#eefaf7,#fffdf7)}
.lesson-parts-intro{margin:12px 0;padding:12px 14px;border-radius:12px;background:#edf8f5;border:1px solid #d1ebe4;font-size:12px;line-height:1.55;color:#4f625c}
.lesson-parts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.builder-part-card{border:1px solid #e4ddd6;border-radius:15px;padding:14px;background:#fff;min-width:0}
.builder-part-card.part-b{background:linear-gradient(145deg,#fff,#f6fbff)}.builder-part-card.part-c{background:linear-gradient(145deg,#fff,#f3fbf8);border-color:#cfe8e1}.builder-part-card.part-d{background:linear-gradient(145deg,#fff,#fff9e9);border-color:#ead9a6}
.builder-part-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.builder-part-head h3{margin:3px 0 0;font-size:17px}.builder-part-card>p{font-size:11px;color:#756c65;line-height:1.5;min-height:34px}
.part-role{font-size:9px;font-weight:900;padding:5px 7px;border-radius:999px;white-space:nowrap}.part-role.ai{background:#e7f8f2;color:#0a766b}.part-role.shadow{background:#fff0bd;color:#7f5d13}.part-role.read{background:#f3e8ff;color:#7c3aed}.part-role.intro{background:#eef4ff;color:#4d6590}
.builder-part-stats{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0}.builder-part-stats span{font-size:9.5px;background:#f6f4f1;padding:5px 7px;border-radius:999px}.builder-part-upload{display:grid;grid-template-columns:1fr auto auto;gap:6px;align-items:center}.builder-part-upload input{min-width:0;font-size:10px}.builder-part-upload button{font-size:10px;padding:8px 9px}.builder-part-card small{display:block;margin-top:8px;font-size:9.5px;color:#81766e;line-height:1.45}.lesson-parts-actions{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.lesson-part-listening{margin-bottom:14px}.lesson-part-student-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.lesson-part-student-card{padding:15px;border:1px solid #e4ddd6;border-radius:15px;background:#fff}.lesson-part-student-card.part-c{background:#f4fbf8;border-color:#cfe8e1}.lesson-part-student-card.part-d{background:#fff9e8;border-color:#ead9a6}.lesson-part-key{font-size:9px;font-weight:950;color:#0a8378;letter-spacing:.08em}.lesson-part-student-card h3{margin:4px 0 5px;font-size:16px}.lesson-part-student-card p{font-size:10.5px;color:#746b64;line-height:1.45;min-height:30px}.lesson-part-card-meta{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.lesson-part-card-meta span{font-size:9px;background:#f4f2ef;border-radius:999px;padding:4px 6px}.lesson-part-student-card button{width:100%}
.shadow-source-banner{margin:8px 0 12px;padding:10px 12px;border:1px solid #d1e8e2;background:#f2fbf8;border-radius:11px;font-size:11px;color:#52635e}
@media(max-width:900px){.lesson-parts-grid,.lesson-part-student-grid{grid-template-columns:1fr}.builder-part-upload{grid-template-columns:1fr 1fr}.builder-part-upload input{grid-column:1/-1}}
/* v6.1 — local bilingual silence split */
.shadow-local-split{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;margin-bottom:10px;border:1px solid #bfe3da;background:#f2fbf8;border-radius:14px}
.shadow-local-split strong{display:block;font-size:14px;margin:3px 0}
.shadow-local-split p{margin:0;font-size:11px;color:#6d756f;line-height:1.5}
.shadow-local-split button{white-space:nowrap}
@media(max-width:760px){.shadow-local-split{align-items:stretch;flex-direction:column}.shadow-local-split button{width:100%}}
/* =========================================================
v6.4.0 — PROFESSIONAL RESPONSIVE SHELL
========================================================= */
:root{
--vnn-ink:#24342f;
--vnn-muted:#776f68;
--vnn-teal:#0d9488;
--vnn-teal-dark:#08766c;
--vnn-soft:#f7faf7;
--vnn-warm:#fffaf3;
--vnn-line:#e7ded5;
--vnn-shadow:0 18px 50px rgba(43,57,51,.08);
}
body{overflow-x:hidden}
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
/* Header */
.site-header{
position:sticky;
top:0;
z-index:1000;
background:rgba(255,255,255,.94);
backdrop-filter:blur(16px);
border-bottom:1px solid rgba(222,213,204,.8);
}
.header-inner{
min-height:92px;
display:grid;
grid-template-columns:minmax(245px,1fr) auto;
align-items:center;
gap:24px;
}
.brand-button{
border:0!important;
background:transparent!important;
padding:0!important;
text-align:left!important;
min-width:0;
}
.brand{font-size:21px!important;line-height:1.15;font-weight:900;color:var(--vnn-ink)}
.brand span{color:var(--vnn-teal)}
.tagline{margin-top:6px;font-size:12px;color:#8a8179}
.header-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:7px;
min-width:0;
}
.nav-pill,.plan-chip,.user-chip,.status-pill{
min-height:42px;
border-radius:14px!important;
}
.nav-pill{
padding:9px 12px!important;
border:1px solid var(--vnn-line)!important;
background:#fff!important;
font-size:11px!important;
font-weight:850!important;
white-space:nowrap;
}
.nav-pill:hover{border-color:#b9d9d1!important;background:#f5fcfa!important}
.header-track-link{color:#30423d!important}
.header-login{background:#f3fbf8!important;border-color:#cce8e1!important;color:#08766c!important}
.plan-chip{
display:flex;
align-items:center;
gap:5px;
padding:7px 10px!important;
border:1px solid #dce6d7!important;
background:#fbfff7!important;
}
.plan-chip.hidden{display:none!important}
.plan-chip strong{font-size:10px!important;color:#167565}
.plan-chip span{font-size:9px!important;max-width:84px;line-height:1.2}
.user-chip{
display:flex;
align-items:center;
gap:8px;
max-width:215px;
padding:5px 5px 5px 11px!important;
border:1px solid var(--vnn-line)!important;
background:#fff!important;
}
.user-chip.hidden{display:none!important}
#userName{
min-width:0;
max-width:105px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:10.5px;
font-weight:850;
}
.logout-btn{
border:0!important;
background:#fff0eb!important;
color:#934b39!important;
min-height:31px!important;
padding:6px 9px!important;
border-radius:10px!important;
font-size:9.5px!important;
font-weight:900!important;
white-space:nowrap;
}
.logout-btn.hidden{display:none!important}
.logout-text{display:inline!important}
.status-pill{
display:flex;
align-items:center;
gap:5px;
padding:7px 10px!important;
border:1px solid #bfe8df!important;
background:#edfff9!important;
color:#08766c!important;
white-space:nowrap;
}
.status-pill i{width:7px;height:7px;border-radius:50%;background:#16a085;box-shadow:0 0 0 4px rgba(22,160,133,.11)}
.status-pill span{font-size:9px;font-weight:900}
.status-pill b{font-size:9px}
/* Home */
.home-container{padding-top:34px;padding-bottom:64px}
.home-hero{
display:grid!important;
grid-template-columns:minmax(0,1.45fr) minmax(310px,.75fr)!important;
gap:24px!important;
align-items:stretch!important;
margin:0!important;
}
.home-hero-copy,.garden-card{
border:1px solid var(--vnn-line)!important;
border-radius:28px!important;
background:#fff!important;
box-shadow:var(--vnn-shadow)!important;
}
.home-hero-copy{padding:50px 52px!important}
.home-hero-copy .eyebrow{margin-bottom:18px}
.home-hero-copy h1{
margin:0!important;
max-width:720px;
font-size:clamp(45px,4.4vw,72px)!important;
line-height:.98!important;
letter-spacing:-.055em!important;
color:var(--vnn-ink);
}
.home-hero-copy h1 span{color:var(--vnn-teal)}
.home-hero-copy p{
max-width:760px;
margin:25px 0 0!important;
font-size:17px!important;
line-height:1.75!important;
color:#756d66!important;
}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px!important}
.hero-actions .cta{
min-height:48px;
padding:12px 18px!important;
border-radius:14px!important;
font-size:13px!important;
font-weight:900!important;
}
.hero-actions .primary{box-shadow:0 10px 24px rgba(13,148,136,.15)}
.garden-card{
padding:30px!important;
display:flex!important;
flex-direction:column;
justify-content:space-between!important;
gap:24px;
background:linear-gradient(155deg,#f5fffb 0%,#fffdf8 100%)!important;
}
.garden-card-head{display:flex;align-items:center;gap:13px}
.garden-icon{
width:58px;height:58px;
display:grid;place-items:center;
border-radius:18px;
background:#fff;
border:1px solid #dcebe5;
font-size:30px!important;
margin:0!important;
}
.garden-card-head span{display:block;font-size:9px;font-weight:950;letter-spacing:.09em;color:#0d8b7f}
.garden-card-head strong{display:block;margin-top:5px;font-size:16px;line-height:1.3;color:#2d3d38}
.garden-stats{display:grid;gap:8px}
.garden-stat{
display:grid!important;
grid-template-columns:52px 1fr!important;
align-items:center!important;
gap:12px!important;
min-height:72px;
padding:12px 14px!important;
border:1px solid rgba(221,230,225,.95)!important;
border-radius:16px!important;
background:rgba(255,255,255,.82)!important;
}
.garden-stat strong{font-size:25px!important;color:var(--vnn-teal)!important}
.garden-stat span{font-size:11px!important;color:#6e6862!important;text-align:left!important}
.home-section{margin-top:46px!important}
.section-title-row{align-items:flex-end!important}
.section-title-row h2{font-size:31px!important;letter-spacing:-.035em!important}
.section-subtitle{margin:7px 0 0;color:#8a8179;font-size:12px}
.track-grid{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:14px!important;
}
.track-card{
min-height:148px!important;
display:grid!important;
grid-template-columns:58px minmax(0,1fr) 34px!important;
gap:16px!important;
align-items:center!important;
padding:24px 26px!important;
border:1px solid var(--vnn-line)!important;
border-radius:22px!important;
background:#fff!important;
box-shadow:0 10px 34px rgba(47,60,55,.045)!important;
text-align:left!important;
}
.track-card:hover{transform:translateY(-2px);border-color:#bfded6!important;box-shadow:0 16px 38px rgba(47,60,55,.08)!important}
.track-emoji{
width:54px;height:54px;
display:grid!important;
place-items:center;
border-radius:17px;
background:#faf8f4;
font-size:30px!important;
}
.track-card-copy{min-width:0}
.track-kicker{font-size:9px!important;letter-spacing:.07em!important}
.track-card h3{margin:5px 0!important;font-size:20px!important}
.track-card p{margin:0!important;font-size:11.5px!important;line-height:1.55!important;color:#7c736c!important}
.track-card .arrow{
width:32px;height:32px;
display:grid;place-items:center;
border-radius:50%;
background:#f0faf7;
color:#0b8d80;
font-size:18px;
}
.season-card.featured{
min-height:116px;
border:1px solid var(--vnn-line)!important;
border-radius:22px!important;
background:#fff!important;
box-shadow:0 10px 34px rgba(47,60,55,.045)!important;
}
/* Mobile/tablet auth is a dedicated row; desktop does not duplicate it. */
.mobile-account-bar{display:none}
@media(max-width:900px){
.container{width:min(100% - 24px,720px)}
.header-inner{
min-height:82px;
grid-template-columns:minmax(0,1fr) auto!important;
gap:10px!important;
}
.brand{font-size:18px!important}
.tagline{font-size:10px}
.header-actions{gap:6px}
.header-actions .nav-pill,
.header-actions .plan-chip,
.header-actions .user-chip{display:none!important}
.status-pill{min-height:36px;padding:6px 9px!important}
.status-pill span{display:none}
.status-pill b{font-size:10px}
.mobile-account-bar{
display:flex!important;
width:min(calc(100% - 24px),720px);
margin:10px auto 0;
min-height:58px;
padding:9px 11px;
border:1px solid #dce8e4;
border-radius:16px;
background:#fff;
box-shadow:0 8px 24px rgba(43,57,51,.07);
align-items:center;
justify-content:space-between;
gap:10px;
}
.mobile-account-main{display:flex;flex-direction:column;min-width:0;gap:2px}
.mobile-account-label{font-size:8.5px;font-weight:900;letter-spacing:.08em;color:#0d8c80;text-transform:uppercase}
#mobileAccountName{max-width:55vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:#2e3c38}
.mobile-account-actions{display:flex;gap:6px;align-items:center}
.mobile-login-btn,.mobile-logout-btn{
min-height:34px;
padding:7px 10px;
border-radius:11px;
font:inherit;
font-size:10px;
font-weight:900;
white-space:nowrap;
}
.mobile-login-btn{border:1px solid #bee5dc;background:#edfff9;color:#08766c}
.mobile-logout-btn{border:1px solid #f0d6cd;background:#fff2ed;color:#934634}
.mobile-login-btn.hidden,.mobile-logout-btn.hidden{display:none!important}
.home-container{padding-top:18px;padding-bottom:46px}
.home-hero{
grid-template-columns:1fr!important;
gap:12px!important;
}
.home-hero-copy{padding:30px 24px!important;border-radius:22px!important}
.home-hero-copy h1{font-size:clamp(39px,11vw,56px)!important;line-height:1.02!important}
.home-hero-copy p{font-size:14px!important;line-height:1.65!important;margin-top:18px!important}
.hero-actions{margin-top:22px!important}
.hero-actions .cta{flex:1 1 180px}
.garden-card{padding:20px!important;border-radius:22px!important}
.garden-card-head{display:none}
.garden-stats{grid-template-columns:repeat(3,1fr);gap:7px}
.garden-stat{
display:flex!important;
flex-direction:column;
align-items:flex-start!important;
gap:4px!important;
min-height:88px;
padding:12px!important;
}
.garden-stat strong{font-size:22px!important}
.garden-stat span{font-size:9.5px!important;line-height:1.35}
.home-section{margin-top:34px!important}
.section-title-row h2{font-size:27px!important}
.track-grid{grid-template-columns:1fr!important}
.track-card{min-height:124px!important;padding:19px!important;border-radius:19px!important}
}
@media(max-width:520px){
.container{width:calc(100% - 20px)}
.header-inner{min-height:76px}
.brand{font-size:17px!important}
.tagline{font-size:9.5px}
.mobile-account-bar{width:calc(100% - 20px);margin-top:8px}
#mobileAccountName{max-width:48vw}
.home-hero-copy{padding:26px 20px!important}
.home-hero-copy h1{font-size:40px!important}
.home-hero-copy p{font-size:13.5px!important}
.hero-actions{display:grid;grid-template-columns:1fr}
.hero-actions .cta{width:100%;min-height:46px}
.garden-stats{grid-template-columns:1fr 1fr 1fr}
.garden-stat{min-height:82px;padding:10px!important}
.garden-stat strong{font-size:20px!important}
.garden-stat span{font-size:8.8px!important}
.track-card{
grid-template-columns:48px minmax(0,1fr) 28px!important;
gap:12px!important;
}
.track-emoji{width:46px;height:46px;border-radius:14px;font-size:25px!important}
.track-card h3{font-size:18px!important}
.track-card p{font-size:10.5px!important}
}
/* =========================================================
v6.5.0 — TRIAL + AI SUPPORT + FEEDBACK CENTER
========================================================= */
.account-plan-badge.trial,.commercial-status.trial{
background:#fff0bd!important;color:#75550d!important;border-color:#ecd990!important;
}
.trial-action-box{
background:linear-gradient(145deg,#fffdf3,#f5fffb)!important;
border-color:#eadca5!important;
}
.trial-action-buttons{display:flex;gap:8px;flex-wrap:wrap}
.trial-action-buttons button{flex:1;min-width:120px}
.trial-primary{
border:1px solid #d9c36c!important;
background:#fff2b9!important;
color:#705410!important;
font-weight:900!important;
}
.commercial-actions-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
/* Feedback Center */
.feedback-admin-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin-bottom:14px;
}
.feedback-admin-stat{padding:14px 16px}
.feedback-admin-stat span{display:block;font-size:10px;color:#7e756d;font-weight:800}
.feedback-admin-stat strong{display:block;margin-top:5px;font-size:24px;color:#17443d}
.teacher-feedback-list{display:grid;gap:10px}
.teacher-feedback-item{
padding:15px;
border:1px solid #e7ddd5;
border-radius:15px;
background:#fff;
border-left:4px solid #d6ddd9;
}
.teacher-feedback-item.priority-high{border-left-color:#e9a84e}
.teacher-feedback-item.priority-critical{border-left-color:#d66555;background:#fffafa}
.teacher-feedback-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.teacher-feedback-top>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.teacher-feedback-top strong{font-size:12px}
.teacher-feedback-top time{font-size:9px;color:#94887f;white-space:nowrap}
.feedback-category{
padding:4px 7px;border-radius:999px;background:#edf9f6;color:#08766c;
font-size:9px;font-weight:900;
}
.teacher-feedback-item p{font-size:12px;line-height:1.65;color:#4f4a46;margin:11px 0}
.teacher-feedback-meta{display:flex;gap:8px;flex-wrap:wrap}
.teacher-feedback-meta span{
font-size:9px;color:#81776f;padding:4px 7px;background:#f8f6f3;border-radius:8px;
}
.teacher-feedback-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:11px}
.teacher-feedback-actions label{font-size:9px;font-weight:850;color:#756b64}
.teacher-feedback-actions select{display:block;margin-top:4px;padding:7px 8px;border:1px solid #ddd4cd;border-radius:9px;background:#fff}
/* Student AI Support */
.support-fab{
position:fixed;
right:20px;
bottom:20px;
z-index:1500;
min-height:46px;
padding:10px 14px;
display:flex;
align-items:center;
gap:7px;
border:1px solid #bde4db;
border-radius:999px;
background:#0d9488;
color:#fff;
box-shadow:0 15px 38px rgba(13,148,136,.24);
font:inherit;
cursor:pointer;
}
.support-fab.hidden{display:none!important}
.support-fab span{font-size:19px}.support-fab b{font-size:11px}
.support-panel{
position:fixed;
right:20px;
bottom:78px;
z-index:1600;
width:min(410px,calc(100vw - 28px));
max-height:min(690px,calc(100vh - 110px));
display:flex;
flex-direction:column;
overflow:hidden;
border:1px solid #dce7e2;
border-radius:22px;
background:#fff;
box-shadow:0 30px 80px rgba(30,48,42,.2);
}
.support-panel.hidden{display:none!important}
.support-head{
display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
padding:16px 17px;border-bottom:1px solid #eee6df;background:linear-gradient(135deg,#f1fbf8,#fffaf4);
}
.support-head>div{display:grid;gap:3px}
.support-eyebrow{font-size:8px;font-weight:950;letter-spacing:.1em;color:#0d8b7f}
.support-head strong{font-size:16px;color:#263934}
.support-head small{font-size:9.5px;color:#81766f}
.support-close{border:0;background:#fff;width:30px;height:30px;border-radius:50%;font-size:20px;cursor:pointer}
.support-quick{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid #f0e9e3;overflow-x:auto}
.support-quick button{flex:0 0 auto;padding:7px 9px;border:1px solid #e3dad2;border-radius:999px;background:#fff;font-size:9.5px;font-weight:850;cursor:pointer}
.support-chat{min-height:230px;flex:1;overflow:auto;padding:13px;display:grid;align-content:start;gap:9px;background:#fbfcfb}
.support-message{display:flex;gap:7px;align-items:flex-start;max-width:92%}
.support-message.user{justify-self:end;flex-direction:row-reverse}
.support-message>span{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid #e6ded7;font-size:13px}
.support-message p{margin:0;padding:9px 11px;border-radius:13px;background:#fff;border:1px solid #e9e2dc;font-size:11px;line-height:1.55;color:#4b4945}
.support-message.user p{background:#eaf9f5;border-color:#cde9e2}
.support-feedback-offer{
display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:9px 12px;background:#fff9e8;border-top:1px solid #eadcab;
}
.support-feedback-offer.hidden{display:none!important}
.support-feedback-offer span{font-size:9.5px;color:#705f36}
.support-feedback-offer button{border:1px solid #dfc96f;background:#fff3bc;color:#6f5514;border-radius:10px;padding:7px 9px;font-size:9.5px;font-weight:900;cursor:pointer}
.support-compose{display:grid;grid-template-columns:1fr auto;gap:7px;padding:10px 12px 6px;border-top:1px solid #eee7e1}
.support-compose textarea{resize:none;width:100%;border:1px solid #ddd5ce;border-radius:12px;padding:9px 10px;font:inherit;font-size:11px;line-height:1.4}
.support-compose button{align-self:stretch;min-width:62px;border-radius:11px}
.support-status{min-height:20px;padding:0 12px 8px;font-size:9.5px;color:#52736c}
@media(max-width:900px){
.commercial-actions-grid{grid-template-columns:1fr!important}
.feedback-admin-stats{grid-template-columns:1fr 1fr}
.support-fab{right:12px;bottom:14px}
.support-panel{right:10px;bottom:70px;width:calc(100vw - 20px);max-height:calc(100vh - 92px)}
}
@media(max-width:520px){
.support-fab b{display:none}
.support-fab{width:48px;height:48px;padding:0;justify-content:center}
.support-chat{min-height:200px}
.teacher-feedback-top{flex-direction:column}
}
/* v6.5.1 — AI Support reliability polish */
.support-status{transition:opacity .2s ease}
.support-message.assistant p{white-space:pre-line}
.support-quick button:active{transform:translateY(1px)}
/* v6.5.2 — Support concurrency + fallback polish */
.support-quick button:disabled,.support-compose button:disabled{opacity:.55;cursor:wait}
.support-status:empty{display:none}
/* =========================================================
v6.5.3 — UNIFIED TYPOGRAPHY SYSTEM
Mục tiêu: không còn chữ quá nhỏ / lúc nhỏ lúc to.
========================================================= */
:root{
--font-xs:12px;
--font-sm:14px;
--font-md:16px;
--font-lg:18px;
--font-xl:22px;
--font-2xl:28px;
--font-3xl:36px;
--font-hero:clamp(42px,4.8vw,68px);
--line-tight:1.2;
--line-normal:1.55;
--line-loose:1.7;
}
/* Base */
html{font-size:16px}
body,
button,
input,
select,
textarea{
font-size:var(--font-md)!important;
line-height:var(--line-normal);
}
/* Never allow important UI text to shrink below readable size */
small,
.muted,
.tagline,
.eyebrow,
.track-kicker,
.support-eyebrow,
.mobile-account-label,
.feedback-category,
.teacher-feedback-meta span,
.teacher-feedback-top time,
.commercial-mini-stat small,
.commercial-action-box small,
.plan-chip span,
.plan-chip strong,
.status-pill span,
.status-pill b,
#userName,
.logout-btn,
.mobile-login-btn,
.mobile-logout-btn,
.support-head small,
.support-quick button,
.support-message p,
.support-feedback-offer span,
.support-feedback-offer button,
.support-status{
font-size:var(--font-xs)!important;
line-height:1.45!important;
}
/* Main reading text */
p,
li,
label,
.field label,
.section-subtitle,
.track-card p,
.home-hero-copy p,
.garden-stat span,
.teacher-feedback-item p,
.commercial-device,
.commercial-empty-inline{
font-size:var(--font-sm)!important;
line-height:var(--line-normal)!important;
}
/* Forms and action controls */
button,
.nav-pill,
.cta,
.teacher-tab,
input,
select,
textarea{
font-size:var(--font-sm)!important;
}
input,
select,
textarea{
min-height:44px;
}
/* Headings */
h1{font-size:var(--font-hero)!important;line-height:1.02!important}
h2{font-size:var(--font-2xl)!important;line-height:1.18!important}
h3{font-size:var(--font-xl)!important;line-height:1.25!important}
h4{font-size:var(--font-lg)!important;line-height:1.3!important}
/* Header */
.brand{font-size:24px!important;line-height:1.15!important}
.tagline{font-size:13px!important}
.nav-pill{font-size:13px!important}
#userName{font-size:13px!important}
.logout-btn{font-size:12px!important}
.status-pill span,.status-pill b{font-size:12px!important}
.plan-chip strong,.plan-chip span{font-size:12px!important}
/* Home */
.home-hero-copy p{font-size:17px!important;line-height:1.7!important}
.hero-actions .cta{font-size:15px!important}
.garden-card-head span{font-size:12px!important}
.garden-card-head strong{font-size:18px!important}
.garden-stat strong{font-size:28px!important}
.garden-stat span{font-size:13px!important}
.section-title-row h2{font-size:32px!important}
.track-kicker{font-size:12px!important}
.track-card h3{font-size:22px!important}
.track-card p{font-size:14px!important}
/* Lesson / skill / student content */
.skill-tabs button,
.skill-nav button,
.lesson-tab,
.lesson-nav button,
.skill-action,
.lesson-action,
.choice,
.quiz-option,
.practice-option{
font-size:14px!important;
}
.card,
.panel,
.teacher-section,
.commercial-action-box,
.commercial-mini-stat{
font-size:14px!important;
}
/* Teacher Dashboard */
.teacher-tab{font-size:14px!important}
.teacher-section-head h2{font-size:26px!important}
.feedback-admin-stat span{font-size:13px!important}
.feedback-admin-stat strong{font-size:28px!important}
.teacher-feedback-top strong{font-size:14px!important}
.teacher-feedback-item p{font-size:14px!important}
.teacher-feedback-meta span{font-size:12px!important}
.teacher-feedback-actions label{font-size:12px!important}
.teacher-feedback-actions select{font-size:13px!important}
/* Commercial / PLUS / Trial */
.commercial-mini-stat span{font-size:13px!important}
.commercial-mini-stat strong{font-size:24px!important}
.commercial-mini-stat small{font-size:12px!important}
.commercial-action-box strong{font-size:16px!important}
.commercial-action-box small{font-size:12px!important}
.commercial-device span{font-size:13px!important}
.commercial-device small{font-size:12px!important}
/* AI Support */
.support-fab b{font-size:13px!important}
.support-head strong{font-size:18px!important}
.support-head small{font-size:12px!important}
.support-quick button{font-size:13px!important}
.support-message p{font-size:14px!important;line-height:1.6!important}
.support-feedback-offer span{font-size:12px!important}
.support-feedback-offer button{font-size:12px!important}
.support-compose textarea{font-size:14px!important}
.support-compose button{font-size:14px!important}
.support-status{font-size:12px!important}
/* Mobile account */
.mobile-account-label{font-size:12px!important}
#mobileAccountName{font-size:14px!important}
.mobile-login-btn,.mobile-logout-btn{font-size:13px!important}
/* Responsive adjustments: still readable, never micro text */
@media(max-width:900px){
:root{
--font-xs:12px;
--font-sm:14px;
--font-md:16px;
--font-lg:18px;
--font-xl:21px;
--font-2xl:27px;
}
.brand{font-size:20px!important}
.tagline{font-size:12px!important}
.home-hero-copy h1{font-size:clamp(40px,10vw,54px)!important}
.home-hero-copy p{font-size:16px!important}
.garden-stat span{font-size:12px!important}
.track-card p{font-size:14px!important}
.support-panel{font-size:14px!important}
}
@media(max-width:520px){
html{font-size:16px}
.brand{font-size:19px!important}
.tagline{font-size:12px!important}
.home-hero-copy h1{font-size:40px!important}
.home-hero-copy p{font-size:16px!important}
.section-title-row h2{font-size:28px!important}
.track-card h3{font-size:20px!important}
.track-card p{font-size:14px!important}
.garden-stat strong{font-size:24px!important}
.garden-stat span{font-size:12px!important}
.support-message p{font-size:14px!important}
.support-quick button{font-size:12px!important}
#mobileAccountName{font-size:14px!important}
.mobile-login-btn,.mobile-logout-btn{font-size:13px!important}
}
/* Accessibility guard: any explicit micro-size left in old CSS gets overridden in common text elements */
[class*="text"],
[class*="label"],
[class*="meta"],
[class*="hint"],
[class*="note"],
[class*="caption"]{
font-size:max(12px,1em);
}
/* =========================================================
v6.5.4 — AI SUPPORT ALIGNMENT / RESPONSIVE POLISH
========================================================= */
/* Panel geometry */
.support-panel{
width:min(430px,calc(100vw - 32px))!important;
max-height:min(720px,calc(100dvh - 104px))!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
}
/* Header: stable vertical rhythm */
.support-head{
min-height:94px!important;
padding:16px 18px!important;
display:flex!important;
align-items:flex-start!important;
}
.support-head>div{
min-width:0!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
gap:3px!important;
}
.support-head strong{
margin:0!important;
line-height:1.25!important;
}
.support-head small{
margin:0!important;
line-height:1.45!important;
}
.support-close{
flex:0 0 34px!important;
width:34px!important;
height:34px!important;
display:grid!important;
place-items:center!important;
padding:0!important;
line-height:1!important;
}
/* Quick actions: same height, same baseline, no ugly scroll arrows */
.support-quick{
flex:0 0 auto!important;
min-height:62px!important;
padding:10px 14px!important;
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
align-items:stretch!important;
overflow:hidden!important;
scrollbar-width:none!important;
}
.support-quick::-webkit-scrollbar{display:none!important}
.support-quick button{
width:100%!important;
min-width:0!important;
min-height:40px!important;
height:40px!important;
padding:7px 10px!important;
margin:0!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
border-radius:12px!important;
line-height:1.2!important;
white-space:nowrap!important;
overflow:hidden!important;
}
.support-quick-icon{
flex:0 0 auto!important;
width:18px!important;
height:18px!important;
display:grid!important;
place-items:center!important;
font-size:15px!important;
line-height:1!important;
}
.support-quick-text{
min-width:0!important;
display:block!important;
line-height:1.2!important;
text-align:center!important;
}
/* Conversation area */
.support-chat{
min-height:240px!important;
flex:1 1 auto!important;
overflow-y:auto!important;
overflow-x:hidden!important;
padding:14px!important;
align-content:start!important;
scrollbar-gutter:stable!important;
}
.support-chat::-webkit-scrollbar{width:7px}
.support-chat::-webkit-scrollbar-track{background:transparent}
.support-chat::-webkit-scrollbar-thumb{
background:#d7dedb;
border-radius:999px;
}
.support-message{
width:auto!important;
max-width:94%!important;
display:grid!important;
grid-template-columns:30px minmax(0,1fr)!important;
gap:8px!important;
align-items:start!important;
}
.support-message.user{
grid-template-columns:minmax(0,1fr) 30px!important;
}
.support-message>span{
width:30px!important;
height:30px!important;
margin:0!important;
line-height:1!important;
}
.support-message p{
width:auto!important;
min-width:0!important;
margin:0!important;
padding:11px 13px!important;
border-radius:14px!important;
box-sizing:border-box!important;
}
/* Feedback offer */
.support-feedback-offer{
flex:0 0 auto!important;
min-height:52px!important;
padding:9px 12px!important;
align-items:center!important;
}
.support-feedback-offer button{
flex:0 0 auto!important;
min-height:34px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
/* Composer: aligned textarea + send button */
.support-compose{
flex:0 0 auto!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) 88px!important;
gap:10px!important;
align-items:stretch!important;
padding:12px!important;
}
.support-compose textarea{
min-height:72px!important;
max-height:124px!important;
margin:0!important;
padding:12px 13px!important;
border-radius:14px!important;
line-height:1.5!important;
box-sizing:border-box!important;
}
.support-compose button{
min-width:0!important;
width:100%!important;
min-height:72px!important;
height:auto!important;
margin:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:14px!important;
line-height:1.2!important;
}
.support-status{
flex:0 0 auto!important;
margin:0!important;
padding:0 14px 10px!important;
min-height:0!important;
line-height:1.4!important;
}
/* Tablet / mobile */
@media(max-width:900px){
.support-panel{
right:10px!important;
bottom:70px!important;
width:calc(100vw - 20px)!important;
max-height:calc(100dvh - 92px)!important;
border-radius:20px!important;
}
.support-head{
min-height:88px!important;
padding:14px 16px!important;
}
.support-quick{
min-height:60px!important;
padding:9px 10px!important;
gap:6px!important;
}
.support-quick button{
min-height:40px!important;
height:40px!important;
padding:7px 8px!important;
gap:5px!important;
}
.support-chat{
min-height:220px!important;
padding:12px!important;
}
.support-compose{
grid-template-columns:minmax(0,1fr) 86px!important;
gap:8px!important;
padding:10px!important;
}
}
/* Small phones: keep 3 actions aligned; abbreviate spacing, not font size */
@media(max-width:430px){
.support-quick{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
padding:8px!important;
gap:5px!important;
}
.support-quick button{
padding:6px 5px!important;
gap:4px!important;
}
.support-quick-icon{
width:16px!important;
height:16px!important;
font-size:14px!important;
}
.support-quick-text{
font-size:12px!important;
}
.support-compose{
grid-template-columns:minmax(0,1fr) 78px!important;
}
}
/* iPhone / iPad safe-area */
@supports(padding:max(0px)){
@media(max-width:900px){
.support-panel{
right:max(10px,env(safe-area-inset-right))!important;
bottom:max(70px,calc(env(safe-area-inset-bottom) + 62px))!important;
}
}
}
/* =========================================================
v6.6.0 — STUDENT TRIAL PILOT ONBOARDING
========================================================= */
.trial-pilot-card{
margin-top:18px;
padding:22px;
display:grid;
grid-template-columns:minmax(220px,.95fr) minmax(360px,1.35fr);
gap:18px 24px;
align-items:center;
border:1px solid #e4d59b;
border-radius:22px;
background:linear-gradient(135deg,#fffaf0 0%,#f2fffb 100%);
box-shadow:0 14px 38px rgba(50,65,58,.07);
}
.trial-pilot-card.hidden{display:none!important}
.trial-pilot-copy{min-width:0}
.trial-pilot-badge{
display:inline-flex;
align-items:center;
min-height:30px;
padding:5px 9px;
border:1px solid #e6ce75;
border-radius:999px;
background:#fff0b3;
color:#725714;
font-size:12px!important;
font-weight:950;
letter-spacing:.04em;
}
.trial-pilot-copy h2{
margin:10px 0 7px;
font-size:24px!important;
line-height:1.2!important;
color:#273a35;
}
.trial-pilot-copy p{
margin:0;
font-size:14px!important;
line-height:1.6!important;
color:#766d64;
}
.trial-pilot-copy p strong{color:#36554e}
.trial-pilot-steps{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.trial-pilot-step{
min-width:0;
min-height:86px;
padding:12px;
display:grid;
grid-template-columns:30px minmax(0,1fr);
gap:9px;
align-items:flex-start;
border:1px solid rgba(220,214,198,.9);
border-radius:15px;
background:rgba(255,255,255,.82);
}
.trial-pilot-step>span{
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:10px;
background:#eaf9f5;
color:#0d7d72;
font-size:13px!important;
font-weight:950;
}
.trial-pilot-step strong{
display:block;
margin-top:1px;
font-size:14px!important;
line-height:1.3!important;
color:#31423d;
}
.trial-pilot-step small{
display:block;
margin-top:4px;
font-size:12px!important;
line-height:1.45!important;
color:#7a716a;
}
.trial-pilot-actions{
grid-column:1/-1;
display:flex;
gap:8px;
flex-wrap:wrap;
padding-top:2px;
}
.trial-pilot-actions button{
min-height:44px;
padding:10px 14px!important;
border-radius:12px!important;
font-size:14px!important;
font-weight:900!important;
}
.trial-feedback-btn{
margin-left:auto;
border-color:#c9e7df!important;
background:#f4fcfa!important;
color:#08766c!important;
}
@media(max-width:900px){
.trial-pilot-card{
grid-template-columns:1fr;
padding:18px;
gap:14px;
}
.trial-pilot-steps{
grid-template-columns:1fr 1fr 1fr;
}
.trial-pilot-actions{
display:grid;
grid-template-columns:1fr 1fr 1fr;
}
.trial-feedback-btn{margin-left:0}
}
@media(max-width:620px){
.trial-pilot-card{
margin-top:12px;
padding:16px;
border-radius:18px;
}
.trial-pilot-copy h2{font-size:22px!important}
.trial-pilot-steps{grid-template-columns:1fr}
.trial-pilot-step{
min-height:0;
grid-template-columns:30px minmax(0,1fr);
}
.trial-pilot-actions{
grid-template-columns:1fr;
}
.trial-pilot-actions button{width:100%}
}
/* =========================================================
v6.6.1 — AUTH MODAL / SIGNUP LAYOUT REPAIR
========================================================= */
.modal{
padding:18px!important;
}
.modal-card{
width:min(560px,100%)!important;
max-height:min(92vh,900px)!important;
overflow:auto!important;
box-sizing:border-box!important;
padding:28px 26px 24px!important;
border-radius:24px!important;
}
.modal-card::-webkit-scrollbar{width:8px}
.modal-card::-webkit-scrollbar-thumb{background:#d8dfdc;border-radius:999px}
.modal-card h2{
margin:4px 0 6px!important;
font-size:34px!important;
line-height:1.12!important;
}
.modal-card > p,
.modal-card .muted,
.auth-help{
font-size:14px!important;
line-height:1.6!important;
}
.auth-tabs{
margin:18px 0 16px!important;
gap:10px!important;
}
.auth-tab{
min-height:48px!important;
padding:11px 14px!important;
font-size:14px!important;
line-height:1.2!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.auth-panel.active{
display:grid!important;
gap:10px!important;
}
.auth-panel label{
display:block!important;
margin-top:4px!important;
font-size:14px!important;
font-weight:850!important;
line-height:1.4!important;
}
.auth-panel input{
width:100%!important;
min-height:52px!important;
padding:12px 14px!important;
font-size:16px!important;
line-height:1.4!important;
box-sizing:border-box!important;
}
.auth-main-btn{
width:100%!important;
min-height:48px!important;
margin-top:10px!important;
font-size:15px!important;
font-weight:900!important;
}
/* Signup terms block */
.terms-consent{
display:grid!important;
grid-template-columns:22px minmax(0,1fr)!important;
gap:10px!important;
align-items:flex-start!important;
margin-top:8px!important;
padding:12px 13px!important;
border:1px solid #e4ddd5!important;
border-radius:14px!important;
background:#fbfaf8!important;
}
.terms-consent input{
width:18px!important;
height:18px!important;
margin:3px 0 0!important;
}
.terms-consent span{
display:block!important;
min-width:0!important;
font-size:14px!important;
line-height:1.6!important;
color:#494744!important;
}
.inline-policy-link{
display:inline!important;
padding:0!important;
border:0!important;
background:none!important;
color:#0b7f74!important;
font:inherit!important;
font-weight:900!important;
text-decoration:underline!important;
cursor:pointer!important;
}
.terms-quick-note{
display:block!important;
margin-top:8px!important;
padding:10px 12px!important;
border-radius:12px!important;
background:#eef8f5!important;
color:#4e6c66!important;
font-size:13px!important;
line-height:1.55!important;
}
.pending-note{
display:block!important;
margin-top:8px!important;
padding:10px 12px!important;
border-radius:12px!important;
font-size:13px!important;
line-height:1.55!important;
}
/* Auth message readability */
#authMessage{
margin-top:10px!important;
font-size:14px!important;
line-height:1.55!important;
}
/* Desktop-medium and mobile */
@media(max-width:720px){
.modal{padding:12px!important}
.modal-card{
width:min(560px,100%)!important;
max-height:calc(100dvh - 24px)!important;
padding:22px 18px 18px!important;
border-radius:20px!important;
}
.modal-card h2{
font-size:30px!important;
}
}
@media(max-width:520px){
.modal-card{
padding:18px 16px 16px!important;
border-radius:18px!important;
}
.modal-card h2{
font-size:26px!important;
}
.auth-tab{
min-height:46px!important;
font-size:14px!important;
}
.auth-panel input{
min-height:48px!important;
font-size:15px!important;
}
.terms-consent{
grid-template-columns:20px minmax(0,1fr)!important;
gap:8px!important;
padding:11px!important;
}
.terms-consent span,
.terms-quick-note,
.pending-note{
font-size:13px!important;
}
}
/* =========================================================
v6.6.2 — TEACHER DASHBOARD / APPROVAL / TEST ACCOUNT POLISH
========================================================= */
/* Desktop Teacher tabs: wrap cleanly instead of a huge horizontal scrollbar */
.teacher-tabs{
display:flex!important;
flex-wrap:wrap!important;
gap:8px!important;
overflow:visible!important;
padding:10px 0 16px!important;
}
.teacher-tab{
flex:0 0 auto!important;
min-height:44px!important;
padding:9px 13px!important;
font-size:14px!important;
line-height:1.2!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
/* Approval table */
.teacher-approval-message:empty{display:none!important}
.teacher-approval-message{
margin:0 0 12px!important;
padding:10px 12px!important;
border-radius:12px!important;
font-size:14px!important;
line-height:1.5!important;
}
.teacher-student-table .teacher-tr{
grid-template-columns:minmax(220px,1.45fr) minmax(120px,.65fr) minmax(100px,.65fr) minmax(380px,1.7fr)!important;
}
.student-actions{
display:flex!important;
gap:6px!important;
flex-wrap:wrap!important;
}
.student-actions button{
min-height:38px!important;
padding:7px 10px!important;
border-radius:10px!important;
font-size:13px!important;
line-height:1.2!important;
white-space:nowrap!important;
}
.student-actions button.is-current-status,
.student-actions button:disabled{
opacity:.48!important;
cursor:not-allowed!important;
background:#f2f0ed!important;
}
.status-badge{
font-size:12px!important;
line-height:1.2!important;
}
.status-pending{background:#fff3d8!important;color:#8a5a17!important}
.status-approved{background:#e7fff6!important;color:#0f766e!important}
.status-rejected{background:#fff0ee!important;color:#a63229!important}
.status-blocked{background:#f1eeee!important;color:#6e4c47!important}
/* Test account help */
.test-account-guide{
margin-top:18px;
border:1px solid #d9e8e3;
border-radius:16px;
background:#f8fdfb;
overflow:hidden;
}
.test-account-guide summary{
min-height:48px;
padding:12px 14px;
display:flex;
align-items:center;
gap:8px;
cursor:pointer;
font-size:14px!important;
font-weight:900;
color:#176f67;
}
.test-account-guide-body{
padding:0 16px 16px;
border-top:1px solid #e2eee9;
}
.test-account-guide-body ol{
margin:12px 0;
padding-left:22px;
}
.test-account-guide-body li,
.test-account-guide-body p{
margin:7px 0;
font-size:14px!important;
line-height:1.6!important;
color:#554f4a;
}
.test-account-guide-body code{
padding:2px 5px;
border-radius:6px;
background:#eef5f2;
color:#0c7067;
font-size:13px!important;
}
/* Header account: avoid clipped logout/name on desktop */
@media(min-width:1100px){
.user-chip{
max-width:270px!important;
min-width:180px!important;
}
#userName{
max-width:145px!important;
font-size:13px!important;
}
.logout-btn{
flex:0 0 auto!important;
min-width:68px!important;
padding:7px 9px!important;
}
}
/* Tablet/mobile: table stacks but actions stay readable */
@media(max-width:900px){
.teacher-tabs{
flex-wrap:nowrap!important;
overflow-x:auto!important;
scrollbar-width:none!important;
}
.teacher-tabs::-webkit-scrollbar{display:none!important}
.teacher-student-table .teacher-tr{
grid-template-columns:1fr 1fr!important;
gap:10px!important;
}
.teacher-student-table .teacher-th{display:none!important}
.teacher-student-table .student-actions{
grid-column:1/-1;
}
}
@media(max-width:600px){
.teacher-student-table .teacher-tr{
grid-template-columns:1fr!important;
}
.teacher-student-table .student-actions{
grid-column:auto;
}
.student-actions button{
flex:1 1 calc(50% - 6px)!important;
}
}
/* =========================================================
v6.6.3 — LISTENING / READING / WRITING UX
========================================================= */
.activity-heading-actions{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.activity-reset-btn{
min-height:40px!important;
padding:8px 12px!important;
font-size:13px!important;
}
.listen-play-btn[aria-busy="true"]{
opacity:.75;
cursor:wait;
}
.listen-play-btn:disabled{
pointer-events:none;
}
.writing-actions-v2{
display:flex!important;
align-items:center!important;
gap:8px!important;
flex-wrap:wrap!important;
}
.writing-actions-v2 button{
min-height:42px!important;
padding:9px 13px!important;
font-size:14px!important;
}
.writing-grade-btn{
border-color:#bde4db!important;
background:#f1fcf9!important;
color:#08766c!important;
}
.writing-reset-btn{
color:#755f55!important;
}
.writing-coach-result{
margin-top:16px;
padding:18px;
border:1px solid #dce8e3;
border-radius:18px;
background:linear-gradient(145deg,#f8fdfb,#fffaf5);
}
.writing-coach-result.hidden{display:none!important}
.writing-coach-head{
display:flex;
justify-content:space-between;
gap:14px;
align-items:center;
}
.writing-coach-head>div{display:grid;gap:4px}
.writing-coach-kicker{
font-size:12px!important;
font-weight:950;
letter-spacing:.08em;
color:#0b8177;
}
.writing-coach-head strong{
font-size:22px!important;
color:#263b35;
}
.writing-score-badge{
width:58px;
height:58px;
display:grid;
place-items:center;
border-radius:18px;
font-size:20px!important;
font-weight:950;
}
.writing-score-badge.good{background:#e4fbf3;color:#08766c}
.writing-score-badge.mid{background:#fff3cf;color:#875d13}
.writing-score-badge.need-work{background:#fff0eb;color:#984738}
.writing-coach-summary{
margin:12px 0!important;
font-size:14px!important;
line-height:1.6!important;
}
.writing-rubric-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:8px;
margin:12px 0 16px;
}
.writing-rubric-grid>div{
padding:10px 11px;
border:1px solid #e4e2dc;
border-radius:12px;
background:#fff;
}
.writing-rubric-grid span{
display:block;
font-size:12px!important;
color:#7b736c;
}
.writing-rubric-grid strong{
display:block;
margin-top:3px;
font-size:16px!important;
color:#2f443e;
}
.writing-coach-section{
margin-top:14px;
padding-top:14px;
border-top:1px solid #e7e2dc;
}
.writing-coach-section h4{
margin:0 0 9px!important;
font-size:16px!important;
}
.writing-correction{
margin:8px 0;
padding:10px 11px;
border-radius:12px;
background:#fff;
border:1px solid #e7e2dc;
}
.writing-before{
color:#9a4e40;
text-decoration:line-through;
font-size:14px!important;
}
.writing-after{
margin-top:4px;
color:#0d796f;
font-weight:850;
font-size:14px!important;
}
.writing-correction small{
display:block;
margin-top:5px;
font-size:12px!important;
color:#736b64;
}
.writing-no-error{
padding:10px 11px;
border-radius:12px;
background:#edfbf6;
color:#0d796f;
font-size:14px!important;
}
.writing-coach-section ul{
margin:0;
padding-left:20px;
}
.writing-coach-section li{
margin:6px 0;
font-size:14px!important;
line-height:1.55!important;
}
.writing-improved-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
}
.writing-improved-head h4{margin:0!important}
.writing-improved-head button{
min-height:36px!important;
padding:7px 10px!important;
font-size:12px!important;
}
.writing-improved{
padding:12px;
border:1px solid #dce7e3;
border-radius:12px;
background:#fff;
font-size:14px!important;
line-height:1.65!important;
}
@media(max-width:760px){
.activity-heading{
align-items:flex-start!important;
gap:10px!important;
}
.activity-heading-actions{
width:100%;
}
.activity-heading-actions button{
flex:1 1 auto;
}
.writing-rubric-grid{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:520px){
.writing-actions-v2{
display:grid!important;
grid-template-columns:1fr 1fr!important;
}
.writing-actions-v2 #saveWriting{
grid-column:1/-1;
}
.writing-actions-v2 #writingSaved{
grid-column:1/-1;
}
.writing-coach-result{padding:14px}
.writing-coach-head strong{font-size:19px!important}
.writing-score-badge{width:52px;height:52px;font-size:18px!important}
.writing-rubric-grid{grid-template-columns:1fr 1fr}
.writing-improved-head{
align-items:flex-start;
flex-direction:column;
}
}
/* =========================================================
v6.6.4 — LISTENING FILL + AUDIO TRANSPORT CONTROLS
========================================================= */
.listening-practice-section{
margin-top:20px;
}
.listening-practice-section:first-child{margin-top:8px}
.listening-fill-section{
margin-top:30px;
padding-top:24px;
border-top:1px solid #e7dfd8;
}
.listening-section-head{
display:flex;
gap:12px;
align-items:flex-start;
margin-bottom:12px;
}
.listening-section-head>span{
width:34px;
height:34px;
flex:0 0 34px;
display:grid;
place-items:center;
border-radius:11px;
background:#eaf9f5;
color:#08766c;
font-size:15px!important;
font-weight:950;
}
.listening-section-head h3{
margin:0!important;
font-size:20px!important;
line-height:1.25!important;
}
.listening-section-head p{
margin:4px 0 0!important;
font-size:14px!important;
line-height:1.5!important;
color:#766e67;
}
.listening-question-title{
display:flex;
align-items:center;
gap:8px;
margin-bottom:4px;
}
.listening-question-title strong{
font-size:16px!important;
}
.listening-question-title span{
padding:3px 7px;
border-radius:999px;
background:#f3f6f4;
color:#6f756f;
font-size:12px!important;
font-weight:800;
}
/* Transport: Nghe / Dừng / Tiếp tục / Nghe lại */
.listening-controls{
margin:10px 0 12px;
padding:10px;
border:1px solid #dce8e3;
border-radius:14px;
background:#f8fcfa;
}
.listening-control-buttons{
display:flex;
gap:7px;
flex-wrap:wrap;
}
.listening-control-buttons button{
min-height:38px!important;
padding:7px 10px!important;
border:1px solid #d9e3df!important;
border-radius:10px!important;
background:#fff!important;
color:#334b45!important;
font-size:13px!important;
font-weight:850!important;
line-height:1.2!important;
}
.listening-control-buttons button:first-child{
border-color:#bce3da!important;
background:#ecfaf6!important;
color:#08766c!important;
}
.listening-control-buttons button:disabled{
opacity:.42!important;
cursor:not-allowed!important;
}
.listening-control-status{
display:block;
margin-top:7px;
font-size:12px!important;
line-height:1.35!important;
color:#7b746d;
}
.listening-control-status[data-state="playing"]{color:#08766c;font-weight:850}
.listening-control-status[data-state="paused"]{color:#916319;font-weight:850}
.listening-control-status[data-state="finished"]{color:#536e67}
/* Fill exercise */
.listening-fill-item{
background:linear-gradient(145deg,#fff,#fbfdfc);
}
.listening-inline-fill{
margin-top:12px!important;
padding:13px!important;
border:1px solid #e4dfd9;
border-radius:13px;
background:#fff;
line-height:2.25!important;
}
.listening-inline-fill .inline-blank{
min-height:38px!important;
font-size:14px!important;
text-align:center;
}
.listening-fill-actions{
margin-top:10px!important;
display:flex!important;
gap:8px!important;
flex-wrap:wrap!important;
}
.listening-fill-actions button{
min-height:38px!important;
padding:8px 11px!important;
font-size:13px!important;
}
/* Whole Part cards use the same transport without becoming too tall */
.lesson-part-student-card .listening-controls{
margin:12px 0 0;
}
.lesson-part-student-card .listening-control-buttons{
display:grid;
grid-template-columns:1fr 1fr;
}
.lesson-part-student-card .listening-control-buttons button{
width:100%;
}
/* Touch layouts */
@media(max-width:700px){
.listening-control-buttons{
display:grid;
grid-template-columns:1fr 1fr;
gap:7px;
}
.listening-control-buttons button{
width:100%!important;
min-height:42px!important;
}
.listening-inline-fill{
line-height:2.5!important;
}
}
@media(max-width:420px){
.listening-controls{padding:8px}
.listening-control-buttons{gap:6px}
.listening-control-buttons button{
padding:7px 6px!important;
font-size:12px!important;
}
}
/* =========================================================
v6.6.5 — LISTENING MOBILE VISIBILITY / SOURCE INDEPENDENCE
========================================================= */
#listeningQuiz{
display:block!important;
width:100%!important;
min-width:0!important;
overflow:visible!important;
}
.listening-exercise-ready{
margin:14px 0 8px;
padding:11px 13px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
border:1px solid #cfe8e1;
border-radius:13px;
background:#f1fbf8;
}
.listening-exercise-ready span{
font-size:13px!important;
font-weight:900;
color:#08766c;
}
.listening-exercise-ready strong{
font-size:12px!important;
color:#5d716b;
text-align:right;
}
.listening-shared-source{
margin:0 0 12px;
padding:12px;
border:1px solid #dce8e3;
border-radius:15px;
background:#fbfdfc;
}
.listening-source-note{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom:8px;
}
.listening-source-note strong{
font-size:13px!important;
color:#29463f;
}
.listening-source-note span{
font-size:12px!important;
line-height:1.45!important;
color:#776f68;
text-align:right;
}
.listening-source-note.no-audio{
margin:0 0 12px;
padding:11px 12px;
border:1px solid #eadfc7;
border-radius:13px;
background:#fffaf0;
}
.listening-source-note.no-audio span{
color:#826d46;
}
@media(max-width:700px){
#skill-listening{
overflow:visible!important;
}
#lessonPartListening,
#listeningQuiz,
.listening-practice-section,
.listening-fill-section{
width:100%!important;
max-width:100%!important;
min-width:0!important;
display:block!important;
visibility:visible!important;
}
.listening-practice-section{
margin-top:18px!important;
}
.listening-section-head{
display:grid!important;
grid-template-columns:38px minmax(0,1fr)!important;
gap:10px!important;
width:100%!important;
}
.listening-section-head>span{
width:38px!important;
height:38px!important;
}
.listening-section-head h3{
display:block!important;
font-size:19px!important;
line-height:1.25!important;
color:#263a35!important;
}
.listening-section-head p{
display:block!important;
font-size:14px!important;
line-height:1.5!important;
}
.listening-exercise-ready{
align-items:flex-start;
flex-direction:column;
}
.listening-exercise-ready strong{
text-align:left;
}
.listening-source-note{
align-items:flex-start;
flex-direction:column;
}
.listening-source-note span{
text-align:left;
}
}
@media(max-width:430px){
.listening-section-head h3{
font-size:18px!important;
}
.listening-practice-section,
.listening-fill-section{
padding-inline:0!important;
}
}
/* =========================================================
v6.7.0 — PRACTICE VARIETY + WRITING REFLECTION COACH
========================================================= */
/* Listening / Reading reset UX */
#newListeningAttempt,
#resetReading{
border-color:#cfe4de!important;
background:#f7fcfa!important;
color:#0b786f!important;
}
/* Reading type badge if Teacher/AI question bank contains a type */
.reading-thinking-tag{
display:inline-flex;
margin:7px 0 4px;
padding:4px 7px;
border-radius:999px;
background:#f0f7f5;
color:#5e716c;
font-size:12px!important;
font-weight:800;
}
/* Writing: sentence-by-sentence review */
.writing-section-help{
margin:-2px 0 10px!important;
font-size:13px!important;
line-height:1.55!important;
color:#766f68;
}
.writing-sentence-review-list{
display:grid;
gap:8px;
}
.writing-sentence-review{
display:grid;
grid-template-columns:32px minmax(0,1fr);
gap:9px;
padding:11px;
border:1px solid #e4e3dd;
border-radius:13px;
background:#fff;
}
.writing-sentence-review.is-correct{
border-color:#d5ece5;
background:#f8fdfb;
}
.writing-sentence-review.needs-fix{
border-color:#eadbd5;
background:#fffbf9;
}
.writing-sentence-number{
width:32px;
height:32px;
display:grid;
place-items:center;
border-radius:10px;
background:#f0f4f2;
color:#65726e;
font-size:13px!important;
font-weight:950;
}
.writing-sentence-status{
margin-bottom:4px;
font-size:12px!important;
font-weight:900;
color:#4e6c64;
}
.needs-fix .writing-sentence-status{color:#9a5545}
.writing-sentence-original{
font-size:14px!important;
line-height:1.55!important;
color:#393b39;
}
.writing-sentence-corrected{
margin-top:4px;
font-size:14px!important;
line-height:1.55!important;
color:#08766c;
font-weight:850;
}
.writing-sentence-review small{
display:block;
margin-top:5px;
font-size:12px!important;
line-height:1.45!important;
color:#766e67;
}
/* Personalized reflection writing */
.writing-reflection-section{
border-top:2px solid #d9ebe5!important;
}
.writing-reflection-intro h4{
margin:0 0 5px!important;
}
.writing-reflection-intro p{
margin:0 0 12px!important;
font-size:14px!important;
line-height:1.55!important;
color:#6f6963;
}
.writing-reflection-list{
display:grid;
gap:12px;
}
.writing-reflection-card{
display:grid;
grid-template-columns:38px minmax(0,1fr);
gap:10px;
padding:13px;
border:1px solid #dfe8e4;
border-radius:15px;
background:#fbfefd;
}
.writing-reflection-qno{
width:38px;
height:38px;
display:grid;
place-items:center;
border-radius:12px;
background:#eaf9f5;
color:#08766c;
font-size:13px!important;
font-weight:950;
}
.writing-reflection-question{
display:grid;
gap:3px;
}
.writing-reflection-question strong{
font-size:15px!important;
line-height:1.4!important;
}
.writing-reflection-question span{
font-size:13px!important;
line-height:1.45!important;
color:#6d665f;
}
.writing-reflection-question small{
font-size:12px!important;
color:#71817c;
}
.writing-reflection-card textarea{
grid-column:1/-1;
width:100%;
min-height:82px;
padding:11px 12px;
border:1px solid #d9dfdc;
border-radius:12px;
font-size:15px!important;
line-height:1.55!important;
resize:vertical;
}
.writing-reflection-feedback{
grid-column:1/-1;
}
.writing-reflection-feedback:empty{display:none}
.writing-reflection-grade{
width:100%;
min-height:44px!important;
margin-top:12px;
font-size:14px!important;
}
#writingReflectionStatus{
margin-top:8px;
font-size:13px!important;
}
.reflection-result-head{
margin:8px 0;
color:#08766c;
}
.reflection-result-head strong{
font-size:14px!important;
}
.reflection-improved-answer,
.reflection-next-prompt{
margin-top:9px;
padding:10px 11px;
border-radius:12px;
background:#fff;
border:1px solid #e4e4de;
}
.reflection-improved-answer strong,
.reflection-next-prompt strong{
display:block;
font-size:13px!important;
margin-bottom:4px;
}
.reflection-improved-answer p{
margin:0 0 8px!important;
font-size:14px!important;
line-height:1.55!important;
}
.reflection-improved-answer button{
min-height:36px!important;
font-size:12px!important;
}
.reflection-next-prompt span,
.reflection-next-prompt small{
display:block;
font-size:13px!important;
line-height:1.5!important;
}
.reflection-next-prompt small{color:#716a64}
@media(max-width:600px){
.writing-reflection-card{
grid-template-columns:34px minmax(0,1fr);
padding:11px;
}
.writing-reflection-qno{
width:34px;
height:34px;
}
.writing-sentence-review{
grid-template-columns:30px minmax(0,1fr);
}
.writing-sentence-number{
width:30px;
height:30px;
}
}
/* =========================================================
v6.8.0 — ADAPTIVE COMPREHENSIVE QUIZ
========================================================= */
.quiz-coverage{
margin:8px 0 14px;
padding:13px 14px;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
border:1px solid #d7e8e2;
border-radius:15px;
background:#f7fcfa;
}
.quiz-coverage>div:first-child{
display:grid;
gap:3px;
}
.quiz-coverage-kicker{
font-size:12px!important;
font-weight:950;
letter-spacing:.07em;
color:#0b7b71;
}
.quiz-coverage strong{
font-size:15px!important;
color:#30453f;
}
.quiz-coverage-chips{
display:flex;
justify-content:flex-end;
gap:6px;
flex-wrap:wrap;
}
.quiz-coverage-chips span{
padding:5px 8px;
border-radius:999px;
background:#fff;
border:1px solid #dce7e3;
font-size:12px!important;
color:#64716c;
font-weight:800;
}
.quiz-question-card{
border-left:3px solid #d7e9e3;
}
.quiz-question-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:7px;
}
.quiz-question-meta span{
font-size:12px!important;
color:#867f78;
}
.quiz-question-meta b{
padding:4px 7px;
border-radius:999px;
background:#f0f8f5;
color:#55726a;
font-size:12px!important;
}
.quiz-question-card .choices{
display:grid;
gap:7px;
margin-top:10px;
}
.quiz-question-card .choices label{
display:flex!important;
gap:9px!important;
align-items:flex-start!important;
padding:9px 10px;
border:1px solid #e2ded8;
border-radius:11px;
background:#fff;
cursor:pointer;
}
.quiz-question-card .choices label span{
font-size:14px!important;
line-height:1.45!important;
}
.quiz-choice-correct{
border-color:#b8dfd3!important;
background:#edf9f5!important;
}
.quiz-choice-wrong{
border-color:#e7c7be!important;
background:#fff4f1!important;
}
.quiz-inline-feedback{
margin-top:8px;
min-height:0;
font-size:13px!important;
font-weight:850;
}
.quiz-inline-feedback.ok{color:#08766c}
.quiz-inline-feedback.bad{color:#a15142}
.quiz-result{
margin-top:14px;
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}
.quiz-result strong{
font-size:18px!important;
}
.quiz-review{
margin-top:14px;
padding:16px;
border:1px solid #dedfd9;
border-radius:17px;
background:#fbfcfb;
}
.quiz-review.hidden{display:none!important}
.quiz-review-head span{
font-size:12px!important;
font-weight:950;
letter-spacing:.07em;
color:#0b7b71;
}
.quiz-review-head strong{
display:block;
margin-top:3px;
font-size:19px!important;
}
.quiz-review-list{
display:grid;
gap:9px;
margin-top:12px;
}
.quiz-review-item{
display:grid;
grid-template-columns:32px minmax(0,1fr);
gap:9px;
padding:11px;
border:1px solid #e4e1dc;
border-radius:13px;
background:#fff;
}
.quiz-review-item.ok{border-color:#d6ebe4}
.quiz-review-item.bad{border-color:#ead8d2}
.quiz-review-number{
width:32px;
height:32px;
display:grid;
place-items:center;
border-radius:10px;
background:#f0f4f2;
font-size:13px!important;
font-weight:950;
}
.quiz-review-item strong{
font-size:14px!important;
}
.quiz-review-item p{
margin:4px 0!important;
font-size:14px!important;
line-height:1.5!important;
}
.quiz-review-item small{
display:block;
font-size:12px!important;
line-height:1.5!important;
color:#736d67;
}
.quiz-correct-answer{
margin:5px 0;
padding:7px 9px;
border-radius:9px;
background:#eff9f6;
color:#48675f;
font-size:13px!important;
}
@media(max-width:700px){
.quiz-coverage{
align-items:flex-start;
flex-direction:column;
}
.quiz-coverage-chips{
justify-content:flex-start;
}
.quiz-question-card .choices label{
padding:10px;
}
.quiz-review{
padding:13px;
}
}
/* =========================================================
v6.9.0 — GRAMMAR FOUNDATION + AI GRAMMAR COACH
========================================================= */
.grammar-foundation{display:grid;gap:14px}
.grammar-intro{padding:15px 17px!important;background:linear-gradient(145deg,#f7fcfa,#fff)}
.grammar-intro>span{font-size:12px!important;font-weight:950;letter-spacing:.08em;color:#0b7b71}
.grammar-intro p{margin:6px 0 0!important;font-size:15px!important;line-height:1.65!important}
.grammar-point-stack{display:grid;gap:12px}
.grammar-point-card{
display:grid;
grid-template-columns:48px minmax(0,1fr);
gap:14px;
padding:17px!important;
}
.grammar-point-number{
width:48px;height:48px;display:grid;place-items:center;border-radius:14px;
background:#eaf9f5;color:#08766c;font-size:15px!important;font-weight:950;
}
.grammar-point-main h3{margin:0!important;font-size:20px!important}
.grammar-point-main>p{margin:6px 0 10px!important;font-size:14px!important;line-height:1.65!important;color:#625e58}
.grammar-formula{
margin:10px 0;padding:11px 12px;border-radius:12px;background:#f4f7f6;border:1px solid #dde5e2;
}
.grammar-formula span,.grammar-ai-formula span{display:block;font-size:12px!important;font-weight:950;color:#66756f;letter-spacing:.06em}
.grammar-formula strong,.grammar-ai-formula strong{display:block;margin-top:4px;font-size:15px!important;line-height:1.5!important;color:#263d36}
.grammar-example-list,.grammar-error-list{display:grid;gap:7px;margin-top:10px}
.grammar-example-row,.grammar-error-row{
padding:10px 11px;border:1px solid #e4e1dc;border-radius:11px;background:#fff;
}
.grammar-example-row>div{display:grid;gap:2px}
.grammar-example-row strong{font-size:14px!important}
.grammar-example-row span{font-size:13px!important;color:#756f69}
.grammar-example-row small,.grammar-error-row small{display:block;margin-top:4px;font-size:12px!important;line-height:1.45!important;color:#766e68}
.grammar-subtitle{margin-top:14px;font-size:13px!important;font-weight:950;color:#785b4e}
.grammar-wrong{font-size:14px!important;color:#a55544;text-decoration:line-through}
.grammar-correct{margin-top:3px;font-size:14px!important;color:#08766c;font-weight:850}
.grammar-practice{margin-top:18px}
.grammar-practice-head{
display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:10px
}
.grammar-practice-head>div>span{font-size:12px!important;font-weight:950;letter-spacing:.08em;color:#0b7b71}
.grammar-practice-head h3{margin:3px 0!important;font-size:20px!important}
.grammar-practice-head p{margin:0!important;font-size:14px!important;color:#716b65}
.grammar-exercise-stack{display:grid;gap:10px}
.grammar-exercise-card{padding:14px;border:1px solid #e1dfda;border-radius:14px;background:#fff}
.grammar-exercise-meta{display:flex;justify-content:space-between;gap:8px;margin-bottom:7px}
.grammar-exercise-meta span,.grammar-exercise-meta b{font-size:12px!important;color:#6e7672}
.grammar-exercise-q{display:block;font-size:15px!important;line-height:1.5!important}
.grammar-exercise-choices{display:grid;gap:7px;margin-top:10px}
.grammar-exercise-choices button{
min-height:42px!important;padding:9px 11px!important;text-align:left;border:1px solid #dedbd6!important;
border-radius:10px!important;background:#fff!important;font-size:14px!important;
}
.grammar-answer-correct{border-color:#abd9cc!important;background:#edf9f5!important;color:#076e65!important}
.grammar-answer-wrong{border-color:#e4bfb4!important;background:#fff2ee!important;color:#9e4e3d!important}
.grammar-exercise-feedback{margin-top:9px;font-size:13px!important;line-height:1.55!important}
.grammar-exercise-feedback.ok{color:#08766c}.grammar-exercise-feedback.bad{color:#96503f}
.grammar-exercise-feedback div{margin-top:3px}
.grammar-ai-card{margin-top:20px;padding:18px!important;border:1px solid #d8e6e1!important}
.grammar-ai-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.grammar-ai-badge{font-size:12px!important;font-weight:950;letter-spacing:.07em;color:#0b7b71}
.grammar-ai-head h3{margin:5px 0!important;font-size:21px!important}
.grammar-ai-head p{margin:0!important;font-size:14px!important;line-height:1.55!important;color:#6e6861}
.grammar-ai-plan{padding:6px 9px;border-radius:999px;background:#fff3d8;color:#8a651d;font-size:12px!important;font-weight:950;white-space:nowrap}
.grammar-ai-locked{margin-top:14px;padding:14px;border-radius:13px;background:#fbfaf6;border:1px solid #e7e0d2}
.grammar-ai-locked strong{font-size:15px!important}.grammar-ai-locked p{font-size:13px!important;line-height:1.55!important}
.grammar-ai-unlocked{margin-top:14px}
.grammar-ai-unlocked.hidden,.grammar-ai-locked.hidden{display:none!important}
.grammar-ai-unlocked>label{display:block;margin-bottom:6px;font-size:14px!important;font-weight:900}
.grammar-ai-unlocked textarea{width:100%;min-height:100px;padding:12px;border:1px solid #d9dfdc;border-radius:12px;font-size:15px!important;line-height:1.6!important}
.grammar-ai-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px}
.grammar-ai-actions button{min-height:42px!important}
.grammar-ai-result{margin-top:14px;padding:14px;border:1px solid #e0e4e1;border-radius:14px;background:#fbfdfc}
.grammar-ai-result.hidden{display:none!important}
.grammar-ai-result-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.grammar-ai-result-head>div{display:grid;gap:4px}.grammar-ai-result-head span{font-size:12px!important;font-weight:950;color:#0b7b71}
.grammar-ai-result-head strong{font-size:15px!important;line-height:1.5!important}.grammar-ai-result-head>b{font-size:17px!important;color:#315249}
.grammar-ai-hint,.grammar-ai-correction,.grammar-ai-block,.grammar-ai-next,.grammar-ai-formula{
margin-top:11px;padding:11px 12px;border-radius:12px;border:1px solid #e2e2dd;background:#fff
}
.grammar-ai-hint{background:#fffaf0}.grammar-ai-correction{background:#f0faf6}
.grammar-ai-hint strong,.grammar-ai-block h4,.grammar-ai-next strong{margin:0 0 4px!important;font-size:14px!important}
.grammar-ai-hint p,.grammar-ai-block p,.grammar-ai-next p{margin:0!important;font-size:13px!important;line-height:1.55!important}
.grammar-ai-correction span{display:block;font-size:12px!important;color:#65746f}.grammar-ai-correction strong{display:block;margin-top:3px;font-size:15px!important;color:#08766c}
.grammar-ai-example{padding:8px 0;border-top:1px solid #ece9e4;display:grid;gap:2px}.grammar-ai-example:first-of-type{border-top:0}
.grammar-ai-example strong{font-size:14px!important}.grammar-ai-example span,.grammar-ai-example small{font-size:12px!important;color:#726b65}
.grammar-ai-practice-list{display:grid;gap:9px}.grammar-ai-practice-item{padding:9px;border:1px solid #e5e2dd;border-radius:10px}
.grammar-ai-practice-item>strong{display:block;font-size:13px!important;margin-bottom:6px}
.grammar-ai-practice-item>div{display:flex;gap:6px;flex-wrap:wrap}.grammar-ai-practice-item button{min-height:36px!important;padding:7px 9px!important;font-size:12px!important}
.grammar-ai-practice-item small{display:block;margin-top:5px;font-size:12px!important;color:#6f6963}
.builder-subheading{margin:12px 0 7px;font-size:14px!important;font-weight:950;color:#344b44}
.grammar-exercise-heading{margin-top:20px}
@media(max-width:700px){
.grammar-point-card{grid-template-columns:40px minmax(0,1fr);padding:14px!important}
.grammar-point-number{width:40px;height:40px}
.grammar-practice-head,.grammar-ai-head{flex-direction:column}
.grammar-ai-plan{align-self:flex-start}
.grammar-ai-actions{align-items:stretch;flex-direction:column}
.grammar-ai-actions button{width:100%}
}
/* =========================================================
v6.9.1 — GRAMMAR SOURCE-ALIGNED PREVIEW
========================================================= */
.grammar-point-title-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
}
.grammar-core-badge,
.grammar-extension-badge{
flex:0 0 auto;
display:inline-flex;
align-items:center;
min-height:27px;
padding:4px 8px;
border-radius:999px;
font-size:12px!important;
font-weight:950;
letter-spacing:.035em;
}
.grammar-core-badge{
background:#ecf8f4;
color:#08766c;
border:1px solid #cfe7df;
}
.grammar-extension-badge{
background:#fff8e8;
color:#8b691f;
border:1px solid #eadbad;
}
.grammar-point-card.is-extension{
border-style:dashed!important;
border-color:#dfd2ad!important;
background:#fffdf7!important;
}
.grammar-point-card.is-extension .grammar-point-number{
background:#fff4d7;
color:#8b691f;
}
.grammar-point-card.is-extension .grammar-formula{
background:#fffaf0;
border-color:#eadfbe;
}
.builder-grammar-level{
min-height:44px!important;
grid-column:1/-1;
max-width:280px;
font-size:14px!important;
}
@media(max-width:700px){
.grammar-point-title-row{
flex-direction:column;
}
.grammar-core-badge,
.grammar-extension-badge{
align-self:flex-start;
}
}
/* =========================================================
v6.9.2 — GRAMMAR COACH DEEP FEEDBACK + VARIED PRACTICE
========================================================= */
.grammar-ai-result-head-v2{
padding-bottom:12px;
border-bottom:1px solid #e8e6e1;
}
.grammar-ai-result-head-v2>div>strong{
max-width:900px;
font-size:14px!important;
line-height:1.55!important;
color:#4f534f;
}
.grammar-score-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
margin-top:12px;
}
.grammar-score-grid>div{
padding:10px 11px;
border:1px solid #e1e3df;
border-radius:12px;
background:#fff;
}
.grammar-score-grid span,
.grammar-score-grid small{
display:block;
}
.grammar-score-grid span{
font-size:12px!important;
font-weight:900;
color:#69736f;
}
.grammar-score-grid strong{
display:block;
margin-top:3px;
font-size:18px!important;
color:#28473f;
}
.grammar-score-grid small{
margin-top:3px;
font-size:12px!important;
line-height:1.4!important;
color:#8a837c;
}
.grammar-score-note{
margin-top:7px;
font-size:12px!important;
line-height:1.45!important;
color:#766f68;
}
.grammar-ai-section-title,
.grammar-ai-practice-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:10px;
}
.grammar-ai-section-title h4,
.grammar-ai-practice-head h4{
margin:0!important;
}
.grammar-ai-section-title span,
.grammar-ai-practice-head>span{
flex:0 0 auto;
padding:4px 7px;
border-radius:999px;
background:#f0f6f3;
color:#61726c;
font-size:12px!important;
font-weight:900;
}
.grammar-ai-practice-head p{
margin:4px 0 0!important;
font-size:13px!important;
color:#746d67;
}
.grammar-ai-sentence-list{
display:grid;
gap:9px;
margin-top:10px;
}
.grammar-ai-sentence{
padding:11px 12px;
border:1px solid #e2e2dc;
border-radius:12px;
background:#fff;
}
.grammar-ai-sentence.is-correct{
border-color:#cfe8df;
background:#f8fdfb;
}
.grammar-ai-sentence.needs-fix{
border-color:#ead6cf;
background:#fffaf8;
}
.grammar-ai-sentence-top{
display:flex;
align-items:center;
gap:7px;
flex-wrap:wrap;
}
.grammar-ai-sentence-top>b{
margin-left:auto;
font-size:12px!important;
}
.grammar-ai-sentence-no,
.grammar-ai-scope{
display:inline-flex;
align-items:center;
min-height:25px;
padding:3px 7px;
border-radius:999px;
font-size:12px!important;
font-weight:900;
}
.grammar-ai-sentence-no{
background:#f1f3f2;
color:#68716d;
}
.grammar-ai-scope.core{background:#eaf8f4;color:#08766c}
.grammar-ai-scope.extension{background:#fff6dd;color:#8a681f}
.grammar-ai-scope.mechanics{background:#eef3fb;color:#516b91}
.grammar-ai-scope.usage{background:#f5effb;color:#72568d}
.grammar-ai-original{
margin-top:8px;
font-size:14px!important;
font-weight:850;
line-height:1.55!important;
}
.grammar-ai-sentence-ok{
margin-top:6px;
font-size:13px!important;
line-height:1.5!important;
color:#557068;
}
.grammar-ai-self-hint,
.grammar-ai-reason,
.grammar-ai-mini-rule{
margin-top:8px;
padding:9px 10px;
border-radius:10px;
font-size:13px!important;
line-height:1.5!important;
}
.grammar-ai-self-hint{
background:#fff8e9;
border:1px solid #eadbb8;
}
.grammar-ai-sentence-corrected{
margin-top:8px;
padding:9px 10px;
border:1px solid #cfe5de;
border-radius:10px;
background:#f1faf7;
}
.grammar-ai-sentence-corrected span{
display:block;
font-size:12px!important;
color:#65736e;
}
.grammar-ai-sentence-corrected strong{
display:block;
margin-top:3px;
font-size:14px!important;
line-height:1.5!important;
color:#08766c;
}
.grammar-ai-reason{
border:1px solid #e5e1dc;
background:#fff;
}
.grammar-ai-reason strong{
font-size:13px!important;
}
.grammar-ai-reason p,
.grammar-ai-mini-rule p{
margin:3px 0 0!important;
font-size:13px!important;
}
.grammar-ai-mini-rule{
border:1px dashed #d8ddd9;
background:#fbfcfb;
}
.grammar-ai-mini-rule span{
font-size:12px!important;
font-weight:950;
color:#68746f;
}
.grammar-ai-mini-rule strong{
display:block;
margin-top:5px;
font-size:13px!important;
color:#31564d;
}
.grammar-ai-contrast{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px;
margin-top:8px;
}
.grammar-ai-contrast>div{
padding:8px 9px;
border:1px solid #e7e4df;
border-radius:9px;
background:#fff;
}
.grammar-ai-contrast strong,
.grammar-ai-contrast span{
display:block;
}
.grammar-ai-contrast strong{font-size:13px!important}
.grammar-ai-contrast span{margin-top:2px;font-size:12px!important;color:#756f69}
.grammar-ai-full-correction{
margin-top:12px!important;
}
.grammar-ai-full-correction strong{
line-height:1.6!important;
}
.grammar-ai-practice-block{
margin-top:12px!important;
}
.grammar-ai-practice-item-v2{
padding:11px;
border:1px solid #e3e1dc;
border-radius:12px;
background:#fff;
}
.grammar-ai-practice-meta{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
margin-bottom:6px;
}
.grammar-ai-practice-meta span,
.grammar-ai-practice-meta b,
.grammar-ai-practice-meta small{
font-size:12px!important;
}
.grammar-ai-practice-meta span{
color:#817a74;
}
.grammar-ai-practice-meta b{
padding:3px 6px;
border-radius:999px;
background:#edf7f4;
color:#0a766d;
}
.grammar-ai-practice-meta small{
color:#766e67;
}
.grammar-ai-practice-q{
display:block;
font-size:14px!important;
line-height:1.5!important;
}
.grammar-ai-practice-options{
display:flex;
gap:7px;
flex-wrap:wrap;
margin-top:8px;
}
.grammar-ai-practice-options button{
min-height:39px!important;
padding:8px 10px!important;
font-size:13px!important;
}
.grammar-ai-typed-wrap{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
margin-top:8px;
}
.grammar-ai-typed-wrap input{
min-height:42px;
padding:9px 10px;
border:1px solid #d9dfdc;
border-radius:10px;
font-size:14px!important;
}
.grammar-ai-typed-wrap button{
min-height:42px!important;
font-size:13px!important;
}
.grammar-ai-practice-feedback{
margin-top:8px;
padding:0;
font-size:13px!important;
line-height:1.5!important;
}
.grammar-ai-practice-feedback:empty{display:none}
.grammar-ai-practice-feedback.bad{
padding:9px 10px;
border:1px solid #eadcc1;
border-radius:10px;
background:#fff9ed;
color:#6f5b2a;
}
.grammar-ai-practice-feedback.ok{
padding:9px 10px;
border:1px solid #cfe5de;
border-radius:10px;
background:#f1faf7;
color:#08766c;
}
.grammar-ai-practice-feedback p{
margin:3px 0 0!important;
font-size:13px!important;
}
@media(max-width:760px){
.grammar-score-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.grammar-ai-contrast{
grid-template-columns:1fr;
}
.grammar-ai-typed-wrap{
grid-template-columns:1fr;
}
.grammar-ai-sentence-top>b{
margin-left:0;
width:100%;
}
}
/* =========================================================
v6.10.0 — STABILITY RELEASE CANDIDATE
========================================================= */
/* Reading progressive feedback */
.reading-feedback{
margin-top:8px;
font-size:13px!important;
line-height:1.5!important;
}
.reading-feedback:empty{display:none}
.reading-feedback strong,
.reading-feedback span{display:block}
.reading-feedback.ok{
padding:9px 10px;
border:1px solid #cfe5de;
border-radius:10px;
background:#f1faf7;
color:#08766c;
}
.reading-feedback.bad{
padding:9px 10px;
border:1px solid #eadcc1;
border-radius:10px;
background:#fff9ed;
color:#6f5b2a;
}
/* Writing fallback must look neutral */
.writing-sentence-review.is-unreviewed{
border-color:#dde1df;
background:#fafbfa;
}
.writing-sentence-review.is-unreviewed .writing-sentence-status{
color:#69736f;
}
/* Listening B/C/D architecture */
.listening-part-zone{
scroll-margin-top:110px;
}
.part-b-zone{border-top:3px solid #cfe7df}
.part-c-zone{border-top:3px solid #d8e2f1}
.part-d-zone{border-top:3px solid #e7d9cd}
.mixed-zone{border-top:3px solid #e4d8a7}
.listening-reflex-list{
display:grid;
gap:9px;
margin-top:12px;
}
.listening-reflex-card{
display:grid;
gap:7px;
padding:12px;
border:1px solid #dfe4e1;
border-radius:13px;
background:#fbfdfc;
}
.listening-reflex-card>div{
display:grid;
gap:3px;
}
.listening-reflex-card strong{font-size:14px!important}
.listening-reflex-card span{font-size:13px!important;color:#736d67}
.listening-reflex-card input{
min-height:43px;
width:100%;
padding:9px 10px;
border:1px solid #d8dedb;
border-radius:10px;
font-size:14px!important;
}
.listening-mixed-cue{
margin:8px 0;
padding:9px 10px;
border-radius:10px;
background:#f6f7f5;
font-size:13px!important;
line-height:1.5!important;
}
.listening-mixed-audio-row{
display:grid;
gap:8px;
margin-bottom:12px;
}
.listening-meaning-options button{
text-align:left;
}
/* Shadowing dynamic/stale repair */
#shadowFullDialogue audio.hidden{display:none!important}
#shadowRepairPartD{
min-height:44px!important;
}
#shadowRepairPartD.hidden{display:none!important}
@media(max-width:700px){
.listening-reflex-card{padding:10px}
.listening-mixed-audio-row{grid-template-columns:1fr}
}
/* =========================================================
v6.10.2 — SHADOWING TIMING PREVIEW HOTFIX
========================================================= */
.shadow-preview-status{
margin-top:6px;
font-size:12px!important;
line-height:1.45!important;
color:#746f68;
}
/* =========================================================
v6.10.3 — SHADOWING SEEK VERIFICATION
========================================================= */
.shadow-preview-status{
min-height:18px;
font-variant-numeric:tabular-nums;
}
/* =========================================================
v6.10.4 — SHADOWING BUFFER-SLICE PREVIEW
========================================================= */
.shadow-preview-status{
font-weight:700;
}
/* v6.10.5 — durable Shadowing draft */
.shadow-preview-status{word-break:break-word;}
/* v6.10.6 — newest draft wins between browser and Supabase */
/* v6.10.7 — isolate repaired Shadowing draft generation */
/* =========================================================
v6.11.0 — REUSABLE SHADOWING PRONUNCIATION COACH
========================================================= */
.shadow-local-compare{
margin:12px 0;
padding:12px;
border:1px solid rgba(120,105,80,.14);
border-radius:14px;
background:rgba(250,248,243,.92);
}
.shadow-local-title,.shadow-history-title{font-size:14px;font-weight:800;margin-bottom:8px}
.shadow-local-grid,.shadow-score-breakdown,.shadow-history-scores{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:8px;
margin:8px 0;
}
.shadow-local-grid span,.shadow-score-breakdown span,.shadow-history-scores span{
display:flex;flex-direction:column;gap:2px;
padding:9px 8px;border-radius:12px;background:rgba(255,255,255,.86);
border:1px solid rgba(120,105,80,.10);
}
.shadow-local-grid small,.shadow-score-breakdown small,.shadow-history-scores small{font-size:12px;color:#777}
.shadow-local-grid strong,.shadow-score-breakdown strong,.shadow-history-scores strong{font-size:18px}
.shadow-coach-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.shadow-coach-tip{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(240,247,241,.9)}
.shadow-attempt-history{margin-top:14px}
@media (max-width:650px){
.shadow-local-grid,.shadow-score-breakdown{grid-template-columns:repeat(2,minmax(0,1fr))}
.shadow-history-scores{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* =========================================================
v6.11.1 — AI CREDIT TRANSPARENCY
========================================================= */
.ai-credit-rule{
display:flex;
flex-direction:column;
gap:5px;
margin:12px 0 14px;
padding:12px 14px;
border:1px solid rgba(128,108,75,.16);
border-radius:14px;
background:rgba(252,249,241,.96);
line-height:1.5;
}
.ai-credit-rule strong{font-size:14px}
.ai-credit-rule span{font-size:14px;color:#5f5a50}
.ai-credit-rule b{font-weight:800;color:inherit}
.policy-credit-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin:12px 0;
}
.policy-credit-grid>div{
display:flex;
flex-direction:column;
gap:6px;
padding:13px;
border:1px solid rgba(128,108,75,.13);
border-radius:14px;
background:rgba(255,255,255,.8);
}
.policy-credit-grid strong{font-size:14px}
.policy-credit-grid span{font-size:14px;line-height:1.5}
@media(max-width:760px){
.policy-credit-grid{grid-template-columns:1fr}
.ai-credit-rule{padding:11px 12px}
}
/* =========================================================
v6.11.2 — CREDIT ECONOMY V1
========================================================= */
.ai-credit-meter-state,
.ai-credit-result-meter{
margin:8px 0 12px;
padding:9px 11px;
border:1px solid rgba(189,145,52,.22);
border-radius:12px;
background:rgba(255,248,225,.78);
font-size:14px;
font-weight:700;
line-height:1.45;
}
.ai-credit-result-meter{margin-top:7px}
/* =========================================================
v6.11.3 — ALL AI POLICY VISIBILITY
========================================================= */
.ai-credit-always{margin:10px 0 14px}
.writing-credit-rule{margin-bottom:14px}
.support-credit-rule{
display:flex;
flex-direction:column;
gap:3px;
margin:10px 14px 4px;
padding:10px 12px;
border:1px solid rgba(128,108,75,.16);
border-radius:12px;
background:rgba(252,249,241,.96);
line-height:1.45;
}
.support-credit-rule strong{font-size:14px}
.support-credit-rule span{font-size:13px;color:#5f5a50}
@media(max-width:650px){
.support-credit-rule{margin:8px 10px 2px}
}
/* =========================================================
v6.11.4 — PROFESSIONAL AI CREDIT POLICY
========================================================= */
.ai-policy-card{
margin:14px 0 18px;
padding:16px;
border:1px solid rgba(107,91,69,.16);
border-radius:18px;
background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,248,242,.96));
box-shadow:0 8px 24px rgba(80,67,48,.045);
}
.ai-policy-card--metered{border-left:4px solid rgba(190,139,43,.72)}
.ai-policy-card--free{border-left:4px solid rgba(35,153,132,.62)}
.ai-policy-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:14px;
}
.ai-policy-kicker{
margin-bottom:4px;
font-size:12px;
font-weight:800;
letter-spacing:.09em;
color:#847150;
}
.ai-policy-top h3{
margin:0;
font-size:18px;
line-height:1.25;
}
.ai-policy-rate{
flex:0 0 auto;
display:inline-flex;
align-items:center;
min-height:36px;
padding:7px 12px;
border:1px solid rgba(196,145,48,.22);
border-radius:999px;
background:rgba(255,247,221,.86);
font-size:14px;
font-weight:800;
white-space:nowrap;
}
.ai-policy-rate--free{
border-color:rgba(35,153,132,.19);
background:rgba(232,249,245,.9);
}
.ai-policy-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.ai-policy-col{
padding:12px 13px;
border:1px solid rgba(107,91,69,.10);
border-radius:14px;
background:rgba(255,255,255,.78);
}
.ai-policy-col--free{background:rgba(242,250,247,.76)}
.ai-policy-col strong{
display:block;
margin-bottom:5px;
font-size:14px;
}
.ai-policy-col p,
.ai-policy-note p{
margin:0;
font-size:14px;
line-height:1.55;
color:#5d574d;
}
.ai-policy-note{
display:flex;
align-items:flex-start;
gap:9px;
margin-top:10px;
padding:11px 12px;
border-radius:13px;
background:rgba(247,244,237,.82);
}
.ai-policy-note>span{font-size:16px;line-height:1.4}
.ai-policy-note--free{background:rgba(235,249,245,.72)}
.btn-credit-note{
display:inline-flex;
align-items:center;
margin-left:6px;
padding:3px 7px;
border-radius:999px;
background:rgba(255,255,255,.22);
font-size:12px;
font-weight:800;
white-space:nowrap;
}
.credit-principle-card{
display:flex;
align-items:flex-start;
gap:13px;
margin:12px 0 16px;
padding:14px 15px;
border:1px solid rgba(91,121,104,.16);
border-radius:16px;
background:rgba(241,248,244,.82);
}
.credit-principle-icon{
display:grid;
place-items:center;
flex:0 0 36px;
width:36px;
height:36px;
border-radius:12px;
background:rgba(31,150,126,.10);
font-size:20px;
font-weight:800;
}
.credit-principle-card strong{font-size:15px}
.credit-principle-card p{margin:4px 0 0;font-size:14px;line-height:1.55;color:#5d574d}
.policy-credit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.policy-credit-item{position:relative;gap:8px!important;padding:14px!important}
.policy-credit-item strong{padding-right:116px}
.policy-credit-item p{margin:0;font-size:14px;line-height:1.5;color:#5d574d}
.policy-rate-pill{
position:absolute;
top:11px;
right:11px;
display:inline-flex;
align-items:center;
min-height:30px;
padding:5px 9px;
border-radius:999px;
background:rgba(255,245,211,.92);
border:1px solid rgba(190,139,43,.18);
font-size:12px;
font-weight:800;
}
.policy-rate-pill.free{
background:rgba(232,249,245,.92);
border-color:rgba(35,153,132,.18);
}
.support-ai-policy{
display:flex;
align-items:center;
gap:10px;
margin:10px 14px 4px;
padding:10px 12px;
border:1px solid rgba(35,153,132,.15);
border-radius:13px;
background:rgba(239,249,246,.88);
}
.support-ai-policy__badge{
flex:0 0 auto;
padding:5px 8px;
border-radius:999px;
background:rgba(35,153,132,.10);
font-size:12px;
font-weight:800;
}
.support-ai-policy p{margin:0;font-size:13px;line-height:1.45;color:#5d574d}
@media(max-width:760px){
.ai-policy-card{padding:14px;border-radius:16px}
.ai-policy-grid{grid-template-columns:1fr}
.policy-credit-grid{grid-template-columns:1fr}
.credit-principle-card{padding:13px}
}
@media(max-width:520px){
.ai-policy-top{flex-direction:column;gap:9px}
.ai-policy-rate{align-self:flex-start}
.policy-credit-item strong{padding-right:0}
.policy-rate-pill{position:static;align-self:flex-start}
.support-ai-policy{align-items:flex-start;flex-direction:column;gap:6px;margin:8px 10px 2px}
}
/* =========================================================
v6.11.4 — TYPOGRAPHY REGRESSION GUARD
Final cascade: no visible utility/meta text below 12px.
========================================================= */
.payment-test-student-info strong,
.payment-test-student-info span,
.payment-test-note,
.shadow-master-test-row span,
.shadow-qa-strip span,
.shadow-auto-main p,
.shadow-auto-estimate,
.shadow-auto-option-row span,
.builder-part-card>p,
.part-role,
.builder-part-stats span,
.builder-part-upload input,
.builder-part-upload button,
.builder-part-card small,
.lesson-part-key,
.lesson-part-student-card p,
.lesson-part-card-meta span,
.shadow-source-banner,
.shadow-local-split p,
.nav-pill,
.plan-chip strong,
.plan-chip span,
#userName,
.logout-btn,
.status-pill span,
.status-pill b,
.garden-card-head span,
.garden-stat span,
.track-kicker,
.track-card p,
.mobile-account-label,
#mobileAccountName,
.mobile-login-btn,
.mobile-logout-btn,
.feedback-admin-stat span,
.teacher-feedback-top time,
.feedback-category,
.teacher-feedback-meta span,
.teacher-feedback-actions label,
.support-fab b,
.support-eyebrow,
.support-head small,
.support-quick button,
.support-feedback-offer span,
.support-feedback-offer button,
.support-status{
font-size:12px!important;
}
.tagline{font-size:12px!important}
.shadow-auto-main p,
.lesson-part-student-card p,
.track-card p{font-size:13px!important}
.support-message p,
.support-compose textarea{font-size:14px!important}
#mobileAccountName{font-size:13px!important}
@media(max-width:900px){
.tagline,
.status-pill b,
.garden-stat span,
.track-card p{font-size:12px!important}
}
@media(max-width:520px){
.tagline,
.garden-stat span,
.track-card p{font-size:12px!important}
}
/* =========================================================
v6.12.0 — STUDENT ACCESS LIFECYCLE
========================================================= */
.account-learning-access{
margin-top:7px;
padding:9px 11px;
border-radius:12px;
font-size:13px;
line-height:1.45;
display:flex;
flex-wrap:wrap;
gap:5px 10px;
}
.account-learning-access strong{font-size:13px}
.account-learning-access span{font-size:13px}
.account-learning-access.free{background:rgba(238,249,244,.92);border:1px solid rgba(30,140,111,.14)}
.account-learning-access.plus{background:rgba(247,241,255,.92);border:1px solid rgba(126,82,170,.14)}
.account-learning-access.locked{background:rgba(255,244,235,.96);border:1px solid rgba(190,104,50,.18)}
.account-plan-badge.locked{background:rgba(188,96,42,.12);color:#94511f}
.billing-learning-access{display:block}
.learning-access-card{
padding:16px;
border:1px solid rgba(99,84,62,.14);
border-radius:17px;
background:rgba(255,255,255,.82);
}
.learning-access-card.account_only{border-left:4px solid rgba(190,104,50,.68)}
.learning-access-card.free_active{border-left:4px solid rgba(33,145,116,.62)}
.learning-access-card.plus_active{border-left:4px solid rgba(126,82,170,.58)}
.learning-access-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.learning-access-card-head strong{font-size:17px}
.learning-access-card-head span{font-size:13px;font-weight:800}
.learning-access-dates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:13px 0}
.learning-access-dates>div{padding:11px 12px;border-radius:13px;background:rgba(248,246,241,.9)}
.learning-access-dates span{display:block;font-size:12px;margin-bottom:4px}
.learning-access-dates strong{font-size:15px}
.learning-access-card p,.learning-access-lock-note{font-size:14px;line-height:1.55}
.learning-access-card p{margin:0;color:#5d574d}
.learning-access-lock-note{margin-top:10px;padding:11px 12px;border-radius:12px;background:rgba(255,241,231,.9)}
.policy-access-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:13px 0}
.policy-access-flow>div{display:flex;gap:10px;padding:12px;border:1px solid rgba(99,84,62,.12);border-radius:14px;background:rgba(255,255,255,.78)}
.policy-access-flow>div>strong{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:10px;background:rgba(40,145,116,.10);font-size:14px}
.policy-access-flow b{display:block;font-size:14px}
.policy-access-flow small{display:block;font-size:13px;line-height:1.45;margin-top:3px}
.access-lifecycle-table .teacher-tr{grid-template-columns:minmax(210px,1.35fr) minmax(110px,.65fr) minmax(190px,1fr) minmax(280px,1.25fr)}
.master-code{margin-top:4px;font-size:12px!important;font-weight:700;color:#716759}
.student-access-cell{display:flex!important;flex-direction:column;align-items:flex-start!important;gap:4px}
.student-access-cell strong{font-size:14px}
.student-access-cell small{font-size:12px}
.access-extension-buttons{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.access-extension-buttons button{min-height:32px;padding:5px 8px;font-size:12px;border-radius:9px}
.duplicate-candidate{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;padding:8px;border-radius:10px;background:rgba(255,247,224,.86);border:1px solid rgba(191,143,44,.16)}
.duplicate-candidate b{width:100%;font-size:12px}
.duplicate-candidate button{min-height:32px;padding:5px 8px;font-size:12px;border-radius:9px}
@media(max-width:900px){
.access-lifecycle-table .teacher-tr{grid-template-columns:1fr}
.access-lifecycle-table .teacher-th{display:none}
.policy-access-flow{grid-template-columns:1fr}
}
@media(max-width:620px){
.learning-access-dates{grid-template-columns:1fr}
.learning-access-card-head{align-items:flex-start;flex-direction:column}
.account-learning-access{display:block}
.account-learning-access strong,.account-learning-access span{display:block}
}
/* =========================================================
v6.12.1 — POLICY MODAL MOBILE SCROLL + ACCEPT FIX
========================================================= */
.policy-modal{
max-height:min(92dvh,920px)!important;
min-height:0!important;
}
.policy-body{
flex:1 1 auto!important;
min-height:0!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
touch-action:pan-y;
}
.policy-body>.policy-important{
margin:0 0 12px!important;
flex:0 0 auto;
}
/* Do not let AI Support sit above legal/account modals and steal taps. */
.modal-open .support-fab,
.modal-open .support-panel{
display:none!important;
}
.policy-footer{
flex:0 0 auto!important;
position:relative;
z-index:2;
}
.policy-footer-actions button{
min-height:48px!important;
touch-action:manipulation;
}
#policyAccept{
min-height:52px!important;
}
@media(max-width:700px){
.policy-overlay{
padding:max(6px,env(safe-area-inset-top)) 6px max(6px,env(safe-area-inset-bottom))!important;
align-items:center!important;
}
.policy-modal{
width:100%!important;
max-height:calc(100dvh - 12px)!important;
border-radius:18px!important;
}
.policy-modal-head{
flex:0 0 auto!important;
padding-top:18px!important;
padding-bottom:14px!important;
}
.policy-body{
padding-top:12px!important;
padding-bottom:18px!important;
}
.policy-body>.policy-important{
margin:0 0 12px!important;
}
.policy-footer{
padding-top:10px!important;
padding-bottom:max(10px,env(safe-area-inset-bottom))!important;
gap:8px!important;
}
.policy-footer>div:first-child{
font-size:12px!important;
line-height:1.45!important;
}
.policy-footer-actions{
width:100%!important;
}
.policy-footer-actions button{
width:100%!important;
flex:1 1 100%!important;
font-size:14px!important;
}
}
@media(max-width:430px){
.policy-modal-head h2{font-size:22px!important}
.policy-modal-head p{font-size:12.5px!important}
.policy-important{padding:14px!important}
.policy-important strong{font-size:15px!important}
.policy-important p{font-size:13px!important;line-height:1.58!important}
.policy-section{padding:15px!important}
.policy-section h3{font-size:16px!important}
.policy-section p{font-size:13px!important}
}
/* =========================================================
v6.12.2 — CROSS-PLATFORM LONG MODAL SYSTEM
Android · iOS/iPadOS · Windows · macOS
========================================================= */
/* Desktop/tablet baseline: fixed chrome, one continuous scroll region. */
.billing-overlay,
.policy-overlay{
box-sizing:border-box;
overscroll-behavior:none;
}
.billing-modal,
.policy-modal{
box-sizing:border-box;
display:flex!important;
flex-direction:column!important;
min-height:0!important;
overflow:hidden!important;
}
.billing-head,
.policy-modal-head,
.billing-footer,
.policy-footer{
flex:0 0 auto!important;
}
.billing-body,
.policy-body{
flex:1 1 auto!important;
min-height:0!important;
overflow-y:auto!important;
overflow-x:hidden!important;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
touch-action:pan-y;
scrollbar-gutter:stable;
scroll-behavior:smooth;
}
/* The billing summary is part of the reading flow, not a fixed block. */
.billing-body>.billing-test-banner{
margin:0 0 10px!important;
border-radius:13px;
}
.billing-body>.billing-current-summary{
padding:0 0 4px!important;
background:transparent!important;
border-bottom:0!important;
}
/* Prevent floating UI from covering any modal controls. */
.modal-open .support-fab,
.modal-open .support-panel{
display:none!important;
}
/* Fine-pointer desktop: visible scrollbar without changing mobile layout. */
@media (hover:hover) and (pointer:fine){
.billing-body,
.policy-body{
scrollbar-width:thin;
scrollbar-color:rgba(67,92,83,.35) transparent;
}
.billing-body::-webkit-scrollbar,
.policy-body::-webkit-scrollbar{width:10px}
.billing-body::-webkit-scrollbar-thumb,
.policy-body::-webkit-scrollbar-thumb{
background:rgba(67,92,83,.25);
border:3px solid transparent;
background-clip:padding-box;
border-radius:999px;
}
}
/* Phones + small tablets: full-screen sheet is more readable than a tall centered popup. */
@media (max-width:820px){
.billing-overlay,
.policy-overlay{
padding:0!important;
place-items:stretch!important;
align-items:stretch!important;
}
.billing-modal,
.policy-modal{
width:100%!important;
height:100vh!important;
max-height:100vh!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
}
@supports (height:100dvh){
.billing-modal,
.policy-modal{
height:100dvh!important;
max-height:100dvh!important;
}
}
.billing-head,
.policy-modal-head{
padding-top:max(16px,env(safe-area-inset-top))!important;
}
.billing-footer,
.policy-footer{
padding-bottom:max(12px,env(safe-area-inset-bottom))!important;
}
.billing-body,
.policy-body{
padding-bottom:max(24px,calc(env(safe-area-inset-bottom) + 14px))!important;
}
.billing-close,
.policy-close{
flex:0 0 44px!important;
width:44px!important;
height:44px!important;
min-width:44px!important;
min-height:44px!important;
touch-action:manipulation;
}
.billing-footer button,
.policy-footer-actions button{
min-height:48px!important;
touch-action:manipulation;
}
}
/* Narrow phones: compact header/footer while keeping readable text. */
@media (max-width:520px){
.billing-head,
.policy-modal-head{
padding-left:16px!important;
padding-right:16px!important;
padding-bottom:12px!important;
}
.billing-head h2,
.policy-modal-head h2{
font-size:24px!important;
line-height:1.15!important;
}
.billing-head p,
.policy-modal-head p{
font-size:13px!important;
line-height:1.48!important;
}
.billing-body,
.policy-body{
padding-left:14px!important;
padding-right:14px!important;
gap:11px!important;
}
.billing-current-summary{
grid-template-columns:1fr 1fr!important;
gap:8px!important;
}
.billing-summary-item{
padding:11px!important;
}
.billing-summary-item span,
.billing-summary-item small{
font-size:12px!important;
}
.billing-summary-item strong{
font-size:18px!important;
}
.billing-section{
padding:14px!important;
border-radius:15px!important;
}
.billing-section-head h3{
font-size:17px!important;
}
.billing-section-head p,
.billing-action-card p,
.billing-empty span,
.billing-transfer-note,
.billing-footer span{
font-size:13px!important;
line-height:1.5!important;
}
.billing-footer{
gap:8px!important;
padding-top:10px!important;
padding-left:14px!important;
padding-right:14px!important;
}
.billing-footer span{
display:block;
}
}
/* Mobile landscape / short coarse-pointer screens. */
@media (max-height:640px) and (pointer:coarse){
.billing-overlay,
.policy-overlay{
padding:0!important;
place-items:stretch!important;
}
.billing-modal,
.policy-modal{
width:100%!important;
height:100vh!important;
max-height:100vh!important;
border-radius:0!important;
}
@supports (height:100dvh){
.billing-modal,
.policy-modal{
height:100dvh!important;
max-height:100dvh!important;
}
}
.billing-head,
.policy-modal-head{
padding-top:max(10px,env(safe-area-inset-top))!important;
padding-bottom:9px!important;
}
.billing-footer,
.policy-footer{
padding-top:8px!important;
padding-bottom:max(8px,env(safe-area-inset-bottom))!important;
}
}
/* =========================================================
v6.13.2 — SUPPORT PANEL DESKTOP / MOBILE LAYOUT HARDENING
========================================================= */
.ai-relevance-warning{
margin-top:8px;
padding:9px 10px;
border-radius:10px;
border:1px solid #e8c889;
background:#fff7df;
color:#76551d;
display:grid;
gap:4px;
font-size:13px;
line-height:1.45;
}
.ai-relevance-warning strong{color:#9a6411}
.support-panel{
box-sizing:border-box!important;
min-width:0!important;
}
.support-head{
position:sticky!important;
top:0!important;
z-index:3!important;
flex:0 0 auto!important;
}
.support-head>div{
min-width:0!important;
flex:1 1 auto!important;
}
.support-head strong{
font-size:17px!important;
line-height:1.3!important;
overflow-wrap:break-word!important;
}
.support-head small{
font-size:12px!important;
line-height:1.45!important;
overflow-wrap:break-word!important;
}
.support-eyebrow{
font-size:11px!important;
line-height:1.35!important;
}
.support-close{
flex:0 0 40px!important;
width:40px!important;
height:40px!important;
min-width:40px!important;
min-height:40px!important;
display:grid!important;
place-items:center!important;
padding:0!important;
border:1px solid #ded7d0!important;
background:#fff!important;
font-size:26px!important;
line-height:1!important;
font-weight:700!important;
cursor:pointer!important;
}
.support-close:hover{background:#f5f2ef!important}
.support-ai-policy{
min-width:0!important;
}
.support-ai-policy p{
min-width:0!important;
font-size:13px!important;
line-height:1.5!important;
overflow-wrap:break-word!important;
word-break:normal!important;
}
.support-ai-policy__badge{
flex:0 0 auto!important;
font-size:13px!important;
}
.support-quick{
min-width:0!important;
}
.support-quick button{
min-width:0!important;
font-size:13px!important;
line-height:1.3!important;
padding:9px 10px!important;
}
.support-quick-text{
min-width:0!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
.support-chat{
min-width:0!important;
min-height:220px!important;
overflow-x:hidden!important;
}
.support-message{
display:flex!important;
width:min(94%,390px)!important;
max-width:94%!important;
min-width:0!important;
gap:8px!important;
align-items:flex-start!important;
justify-self:start!important;
}
.support-message.user{
flex-direction:row-reverse!important;
justify-self:end!important;
margin-left:auto!important;
}
.support-message>span{
flex:0 0 30px!important;
width:30px!important;
height:30px!important;
min-width:30px!important;
display:grid!important;
place-items:center!important;
font-size:15px!important;
}
.support-message p{
flex:1 1 0!important;
width:100%!important;
min-width:0!important;
max-width:none!important;
box-sizing:border-box!important;
margin:0!important;
font-size:14px!important;
line-height:1.55!important;
white-space:pre-wrap!important;
word-break:normal!important;
overflow-wrap:anywhere!important;
}
.support-message.user p{
text-align:left!important;
}
.support-feedback-offer span{
min-width:0!important;
font-size:12px!important;
line-height:1.4!important;
overflow-wrap:break-word!important;
}
.support-feedback-offer button{
flex:0 0 auto!important;
font-size:12px!important;
}
.support-compose{
min-width:0!important;
}
.support-compose textarea{
min-width:0!important;
min-height:74px!important;
font-size:14px!important;
line-height:1.5!important;
}
.support-compose button{
min-width:76px!important;
font-size:14px!important;
}
.support-status{
font-size:12px!important;
line-height:1.4!important;
}
@media(min-width:901px){
.support-panel{
right:24px!important;
bottom:84px!important;
width:min(480px,calc(100vw - 48px))!important;
max-height:min(740px,calc(100vh - 108px))!important;
}
.support-chat{
padding:14px 16px!important;
}
}
@media(max-width:900px){
.support-message{
width:94%!important;
max-width:94%!important;
}
}
@media(max-width:520px){
.support-message{
width:96%!important;
max-width:96%!important;
}
.support-message p{
font-size:13.5px!important;
}
.support-close{
width:38px!important;
height:38px!important;
min-width:38px!important;
min-height:38px!important;
}
}
/* =========================================================
v6.13.4 — VOCABULARY ACTIVE RECALL · VIETNAMESE → ENGLISH
========================================================= */
.vocab-recall-shell{
margin-top:22px;
border:1px solid #ddd8d0;
border-radius:18px;
background:linear-gradient(180deg,#fffefb 0%,#fbfaf7 100%);
overflow:hidden;
}
.vocab-recall-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:18px 20px;
border-bottom:1px solid #ebe6df;
}
.vocab-recall-head>div{min-width:0}
.vocab-recall-head h3{
margin:3px 0 5px;
font-size:22px;
line-height:1.25;
}
.vocab-recall-head p{
margin:0;
color:#706b65;
line-height:1.5;
}
.vocab-recall-head>button{
flex:0 0 auto;
min-height:44px;
}
.vocab-recall-body{
padding:18px 20px 20px;
}
.vocab-recall-progress-row{
display:flex;
justify-content:space-between;
gap:12px;
margin-bottom:8px;
font-size:13px;
font-weight:700;
color:#6d675f;
}
.vocab-recall-progress{
height:8px;
overflow:hidden;
border-radius:999px;
background:#ece7df;
margin-bottom:16px;
}
.vocab-recall-progress i{
display:block;
width:0;
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,#8caa64,#547c45);
transition:width .25s ease;
}
.vocab-recall-card{
max-width:760px;
margin:0 auto;
padding:22px;
border:1px solid #ded8cf;
border-radius:18px;
background:#fff;
box-shadow:0 8px 24px rgba(62,52,42,.05);
}
.vocab-recall-label{
margin-bottom:7px;
color:#93877b;
font-size:11px;
font-weight:800;
letter-spacing:.12em;
}
.vocab-recall-prompt{
min-height:44px;
margin-bottom:16px;
font-size:clamp(22px,3vw,31px);
line-height:1.3;
font-weight:800;
color:#2d3328;
}
.vocab-recall-hint{
display:inline-flex;
margin:-5px 0 14px;
padding:7px 10px;
border-radius:10px;
background:#fff5d9;
color:#7a5a16;
font-size:13px;
font-weight:700;
letter-spacing:.02em;
}
.vocab-recall-answer-label{
display:block;
margin-bottom:7px;
font-size:12px;
font-weight:800;
color:#777068;
}
.vocab-recall-input-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:9px;
}
.vocab-recall-input-row input{
width:100%;
min-width:0;
min-height:48px;
box-sizing:border-box;
padding:11px 13px;
border:1px solid #cfc8be;
border-radius:12px;
background:#fff;
font:inherit;
font-size:17px;
outline:none;
}
.vocab-recall-input-row input:focus{
border-color:#71905e;
box-shadow:0 0 0 3px rgba(113,144,94,.13);
}
.vocab-recall-input-row button{
min-width:106px;
}
.vocab-recall-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:11px;
}
.vocab-recall-actions button{
min-height:40px;
}
.vocab-recall-feedback{
display:grid;
gap:4px;
margin-top:14px;
padding:12px 14px;
border-radius:12px;
font-size:14px;
line-height:1.45;
}
.vocab-recall-feedback strong{font-size:15px}
.vocab-recall-feedback.correct{
border:1px solid #bfd9b2;
background:#eff8ea;
color:#315b27;
}
.vocab-recall-feedback.wrong{
border:1px solid #e5b9b2;
background:#fff0ee;
color:#7b3027;
}
.vocab-recall-feedback.warn{
border:1px solid #ead2a0;
background:#fff8e5;
color:#775b1e;
}
.vocab-recall-feedback small{opacity:.8}
.vocab-recall-done{
max-width:760px;
margin:16px auto 0;
padding:20px;
border-radius:16px;
background:#f3f7ef;
text-align:center;
}
.vocab-recall-done-icon{
font-size:34px;
}
.vocab-recall-done h4{
margin:5px 0;
font-size:20px;
}
.vocab-recall-done p{
margin:0 0 14px;
color:#676d61;
}
.vocab-recall-done-actions{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:8px;
}
@media(max-width:700px){
.vocab-recall-head{
align-items:stretch;
flex-direction:column;
padding:16px;
}
.vocab-recall-head>button{
width:100%;
}
.vocab-recall-body{
padding:14px;
}
.vocab-recall-card{
padding:16px;
}
.vocab-recall-input-row{
grid-template-columns:1fr;
}
.vocab-recall-input-row button{
width:100%;
}
.vocab-recall-progress-row{
font-size:12px;
}
}
/* =========================================================
v6.13.5 — ACTIVE RECALL RETRY + CLEAR WORD SLOT HINTS
========================================================= */
.vocab-recall-hint{
display:grid!important;
gap:8px!important;
width:100%!important;
box-sizing:border-box!important;
padding:10px 12px!important;
}
.vocab-recall-hint-count{
display:block;
font-size:12px;
font-weight:900;
letter-spacing:.04em;
color:#785714;
}
.vocab-recall-hint-blocks{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px;
}
.vocab-recall-word-block{
display:inline-flex;
align-items:center;
min-height:36px;
padding:7px 10px;
border:1px solid #e3c979;
border-radius:10px;
background:#fffdf6;
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:16px;
font-weight:800;
line-height:1;
letter-spacing:.04em;
white-space:nowrap;
}
.vocab-recall-word-sep{
color:#a88839;
font-weight:900;
font-size:18px;
}
.vocab-recall-feedback.wrong strong{
color:#8a2f24;
}
.vocab-recall-feedback.wrong span{
display:block;
}
@media(max-width:520px){
.vocab-recall-hint-blocks{
gap:6px;
}
.vocab-recall-word-block{
font-size:15px;
padding:7px 8px;
}
.vocab-recall-word-sep{
font-size:16px;
}
}
/* =========================================================
v6.13.6 — LINKED WORD + SENTENCE RECALL · PLUS/TRIAL
========================================================= */
.vocab-recall-access{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
margin:0;
padding:11px 20px;
border-bottom:1px solid #ebe6df;
font-size:13px;
line-height:1.45;
}
.vocab-recall-access strong{
flex:0 0 auto;
font-size:13px;
}
.vocab-recall-access span{
min-width:0;
}
.vocab-recall-access.locked{
background:#fff7e8;
color:#75541b;
}
.vocab-recall-access.unlocked{
background:#eff7ea;
color:#365d2c;
}
.vocab-recall-link-note{
margin:-6px 0 14px;
padding:8px 10px;
border-left:3px solid #7b9d67;
border-radius:8px;
background:#f3f8ef;
color:#53664b;
font-size:13px;
line-height:1.4;
}
.vocab-recall-label{
display:flex;
align-items:center;
gap:7px;
}
.vocab-recall-card[data-recall-kind="sentence"]{
border-color:#cfdcc7;
}
@media(max-width:700px){
.vocab-recall-access{
align-items:flex-start;
flex-direction:column;
padding:10px 16px;
gap:4px;
}
}
/* =========================================================
v6.13.7 — HOME VALUE PROPOSITION + PLUS POSITIONING
========================================================= */
.value-section{
position:relative;
overflow:hidden;
}
.value-section::before{
content:"";
position:absolute;
inset:0 auto auto 0;
width:120px;
height:120px;
border-radius:50%;
background:rgba(125,157,102,.07);
transform:translate(-44%,-48%);
pointer-events:none;
}
.value-title-row{
position:relative;
z-index:1;
}
.value-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
margin-top:16px;
}
.value-card{
display:flex;
align-items:flex-start;
gap:12px;
min-width:0;
padding:16px;
border:1px solid #e1ddd6;
border-radius:16px;
background:#fff;
box-shadow:0 7px 22px rgba(61,52,44,.04);
}
.value-card-wide{
grid-column:1 / -1;
}
.value-icon{
display:grid;
place-items:center;
flex:0 0 42px;
width:42px;
height:42px;
border-radius:13px;
background:#f3f6ee;
font-size:21px;
}
.value-card strong{
display:block;
margin:1px 0 5px;
color:#30372c;
font-size:15px;
line-height:1.35;
}
.value-card p{
margin:0;
color:#6e6a64;
font-size:13px;
line-height:1.55;
}
.plus-value-section{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);
gap:20px;
align-items:stretch;
border:1px solid #dacb9b;
background:linear-gradient(145deg,#fffdf7 0%,#f6f2e7 100%);
}
.plus-value-copy{
min-width:0;
}
.plus-value-copy h2{
margin:4px 0 8px;
}
.plus-value-copy>p{
margin:0;
color:#67635c;
line-height:1.55;
}
.plus-value-tags{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:15px;
}
.plus-value-tags span{
display:inline-flex;
align-items:center;
min-height:34px;
padding:7px 10px;
border:1px solid #e2d7b5;
border-radius:999px;
background:#fffdf8;
color:#5a4d2a;
font-size:12px;
font-weight:750;
}
.plus-value-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px 12px;
margin-top:17px;
}
.plus-value-actions small{
color:#766e5f;
line-height:1.4;
}
.plus-value-path{
display:grid;
gap:9px;
padding:14px;
border:1px solid #ded2ae;
border-radius:17px;
background:rgba(255,255,255,.72);
}
.plus-value-path>div{
display:grid;
grid-template-columns:34px auto;
grid-template-rows:auto auto;
column-gap:10px;
padding:11px;
border-radius:13px;
background:#fff;
}
.plus-value-path>div>span{
grid-row:1 / 3;
display:grid;
place-items:center;
width:32px;
height:32px;
border-radius:50%;
background:#edf4e8;
color:#49683d;
font-weight:900;
}
.plus-value-path strong{
align-self:end;
font-size:14px;
}
.plus-value-path small{
color:#777169;
line-height:1.35;
}
.plus-value-path .future{
border:1px dashed #d8c995;
background:#fffaf0;
}
.plus-value-path .future>span{
background:#fff0bf;
color:#795d18;
}
@media(max-width:760px){
.value-grid{
grid-template-columns:1fr;
}
.value-card-wide{
grid-column:auto;
}
.plus-value-section{
grid-template-columns:1fr;
}
.plus-value-actions{
align-items:stretch;
flex-direction:column;
}
.plus-value-actions button{
width:100%;
}
}
/* =========================================================
v6.13.8 — TRACK VALUE STRIP + AUTH MODAL / PUBLIC PLUS FIX
========================================================= */
.track-value-strip{
display:grid;
grid-template-columns:minmax(0,1.4fr) minmax(320px,.9fr) auto;
gap:16px;
align-items:center;
margin:14px 0 22px;
padding:16px 18px;
border:1px solid #dfe4da;
border-radius:18px;
background:linear-gradient(135deg,#fbfdf9 0%,#fffaf3 100%);
box-shadow:0 8px 24px rgba(54,67,49,.04);
}
.track-value-copy{
min-width:0;
}
.track-value-copy strong{
display:block;
margin:3px 0 5px;
color:#2f3a31;
font-size:15px;
line-height:1.4;
}
.track-value-copy p{
margin:0;
color:#716c65;
font-size:12.5px;
line-height:1.5;
}
.track-value-pills{
display:flex;
flex-wrap:wrap;
gap:7px;
}
.track-value-pills span{
display:inline-flex;
align-items:center;
min-height:31px;
padding:6px 9px;
border:1px solid #e3ded6;
border-radius:999px;
background:#fff;
color:#5e625b;
font-size:11.5px;
font-weight:800;
white-space:nowrap;
}
.track-plus-btn{
min-height:42px;
white-space:nowrap;
border-color:#dfce99!important;
background:#fff9e8!important;
color:#735817!important;
}
/* Auth must sit ABOVE the sticky site header (z-index 1000), policy and support. */
#authModal.modal{
z-index:3000!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:touch;
touch-action:pan-y;
}
#authModal .modal-card{
max-height:calc(100dvh - 36px)!important;
overflow-y:auto!important;
overscroll-behavior:contain!important;
-webkit-overflow-scrolling:touch;
touch-action:pan-y;
scrollbar-gutter:stable;
}
#authModal .modal-close{
z-index:3;
}
@media(max-width:1050px){
.track-value-strip{
grid-template-columns:1fr auto;
}
.track-value-pills{
grid-column:1 / -1;
grid-row:2;
}
.track-plus-btn{
grid-column:2;
grid-row:1;
}
}
@media(max-width:700px){
.track-value-strip{
grid-template-columns:1fr;
gap:11px;
margin:10px 0 18px;
padding:14px;
}
.track-value-pills,
.track-plus-btn{
grid-column:auto;
grid-row:auto;
}
.track-plus-btn{
width:100%;
}
.track-value-pills span{
white-space:normal;
}
#authModal.modal{
padding:10px!important;
align-items:flex-start!important;
}
#authModal .modal-card{
max-height:calc(100dvh - 20px)!important;
}
}
/* =========================================================
v6.13.9 — CONCISE PUBLIC PLUS MODAL
========================================================= */
.plus-info-overlay{
position:fixed;
inset:0;
z-index:2900;
display:flex;
justify-content:center;
align-items:flex-start;
padding:clamp(22px,4.5vh,52px) 16px 24px;
overflow-y:auto;
background:rgba(28,24,20,.50);
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
.plus-info-modal{
position:relative;
width:min(720px,100%);
max-height:calc(100dvh - clamp(46px,9vh,100px));
overflow-y:auto;
padding:24px 26px 22px;
border:1px solid #e4d8bd;
border-radius:22px;
background:linear-gradient(145deg,#fffef9 0%,#fbf7ed 100%);
box-shadow:0 28px 70px rgba(31,25,19,.24);
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
.plus-info-close{
position:absolute;
top:14px;
right:14px;
width:38px;
height:38px;
border:0;
border-radius:50%;
background:#f1eadb;
color:#514634;
font-size:24px;
cursor:pointer;
}
.plus-info-modal h2{
margin:5px 48px 8px 0;
font-size:clamp(24px,3vw,34px);
line-height:1.2;
}
.plus-info-lead{
margin:0;
color:#6e665d;
font-size:15px;
line-height:1.55;
}
.plus-info-price{
display:flex;
align-items:baseline;
gap:7px;
margin:18px 0 14px;
padding:12px 14px;
width:max-content;
max-width:100%;
border:1px solid #dccd9c;
border-radius:14px;
background:#fff7dc;
}
.plus-info-price strong{
color:#5e4713;
font-size:27px;
}
.plus-info-price span{
color:#75684e;
font-weight:750;
}
.plus-info-benefits{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px;
}
.plus-info-benefits span{
display:flex;
align-items:center;
min-height:45px;
padding:10px 12px;
border:1px solid #e4dfd6;
border-radius:12px;
background:#fff;
color:#44483f;
font-size:13px;
font-weight:800;
line-height:1.35;
}
.plus-info-note{
margin-top:14px;
padding:11px 12px;
border-left:3px solid #8ba174;
border-radius:9px;
background:#f4f8f0;
color:#5f6658;
font-size:13px;
line-height:1.5;
}
.plus-info-actions{
display:flex;
gap:9px;
flex-wrap:wrap;
margin-top:16px;
}
.plus-info-actions button{
min-height:44px;
}
.plus-info-foot{
display:block;
margin-top:11px;
color:#81786e;
line-height:1.4;
}
@media(max-width:620px){
.plus-info-overlay{
padding:14px 10px 18px;
}
.plus-info-modal{
max-height:calc(100dvh - 28px);
padding:20px 16px 18px;
border-radius:18px;
}
.plus-info-benefits{
grid-template-columns:1fr;
}
.plus-info-actions{
flex-direction:column;
}
.plus-info-actions button{
width:100%;
}
}
/* v6.13.10 — public minimalism + approval-gated private details */
.plus-teaser-section{display:block!important;padding:22px 24px!important}
.plus-teaser-section .plus-value-copy{max-width:920px}
.plus-teaser-points{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.plus-teaser-points span{display:inline-flex;align-items:center;min-height:34px;padding:7px 11px;border:1px solid #e4dbc2;border-radius:999px;background:#fffdf8;color:#625635;font-size:12px;font-weight:800}
.plus-teaser-price{color:#6b5a31;font-size:14px}
#plusInfoPrimaryAction:disabled{opacity:.65;cursor:not-allowed}
@media(max-width:700px){.plus-teaser-section{padding:18px!important}.plus-teaser-points{display:grid;grid-template-columns:1fr}}
/* =========================================================
v6.13.11 — RECALL FULL-FORM RULE + VISIBLE MISTAKE QUEUE
========================================================= */
.vocab-recall-full-form-note{
margin:-1px 0 9px;
color:#756d63;
font-size:12.5px;
line-height:1.45;
}
.vocab-recall-full-form-note b{
color:#5d554d;
}
.vocab-recall-mistake-tray{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:0 0 14px;
padding:10px 12px;
border:1px solid #e6c9a5;
border-radius:12px;
background:#fff8ee;
color:#705536;
font-size:12.5px;
line-height:1.45;
}
.vocab-recall-mistake-tray strong{
flex:0 0 auto;
color:#7d4c20;
}
.vocab-recall-mistake-tray span{
min-width:0;
}
@media(max-width:700px){
.vocab-recall-mistake-tray{
align-items:flex-start;
flex-direction:column;
gap:4px;
}
}
/* =========================================================
v6.13.12 — SHORT RECALL ROUNDS + RESUME
========================================================= */
.vocab-recall-progress-row{
flex-wrap:wrap;
}
#vocabRecallRoundLabel{
display:inline-flex;
align-items:center;
min-height:26px;
padding:4px 8px;
border-radius:999px;
background:#edf5e8;
color:#46663b;
font-weight:900;
}
.vocab-recall-done-actions{
gap:9px;
}
#vocabRecallNextRound,
#vocabRecallWeakReview{
min-width:150px;
}
@media(max-width:620px){
.vocab-recall-progress-row{
display:grid;
grid-template-columns:1fr 1fr;
}
#vocabRecallRoundLabel{
grid-column:1 / -1;
width:max-content;
}
.vocab-recall-done-actions{
flex-direction:column;
}
.vocab-recall-done-actions button{
width:100%;
}
}
/* =========================================================
v6.13.13 — Q&A REFLEX STAGE
========================================================= */
.vocab-recall-link-note:not(.hidden){
transition:background .2s ease,border-color .2s ease;
}
#vocabRecallRoundLabel{
transition:background .2s ease,color .2s ease;
}
.vocab-recall-card:has(#vocabRecallKindLabel){
scroll-margin-top:120px;
}
@media(max-width:700px){
.vocab-recall-link-note{
font-size:12.5px;
}
}
/* v6.13.14 — clearer Recall metrics */
#vocabRecallScore{font-weight:800;color:#5f665d}
/* =========================================================
v6.14.0 — LESSON PUBLISH SAFETY
========================================================= */
.builder-readiness{
margin-top:14px;
padding:14px;
border:1px solid #e2ded3;
border-radius:16px;
background:#fbfaf6;
}
.builder-readiness-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}
.builder-readiness-head strong{
display:block;
font-size:15px;
}
.builder-readiness-badge{
display:inline-flex;
align-items:center;
min-height:30px;
padding:5px 10px;
border-radius:999px;
background:#efeee9;
color:#69665d;
font-size:12px;
font-weight:900;
white-space:nowrap;
}
.builder-readiness-badge.blocked{
background:#fff0ef;
color:#a43d35;
}
.builder-readiness-badge.warning{
background:#fff7e7;
color:#8a6116;
}
.builder-readiness-badge.ready{
background:#edf7eb;
color:#39723b;
}
.builder-readiness-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
}
.builder-readiness-item{
display:flex;
align-items:flex-start;
gap:9px;
min-width:0;
padding:9px 10px;
border:1px solid #e7e3d8;
border-radius:12px;
background:#fff;
}
.builder-readiness-icon{
display:grid;
place-items:center;
flex:0 0 22px;
width:22px;
height:22px;
border-radius:50%;
background:#efeee9;
font-weight:900;
}
.builder-readiness-item strong{
display:block;
font-size:12.5px;
}
.builder-readiness-item small{
display:block;
margin-top:2px;
color:#77736a;
line-height:1.35;
}
.builder-readiness-item.ok .builder-readiness-icon{
background:#eaf6e8;
color:#347039;
}
.builder-readiness-item.error{
border-color:#efc6c1;
background:#fff9f8;
}
.builder-readiness-item.error .builder-readiness-icon{
background:#fbe4e1;
color:#a83d35;
}
.builder-readiness-item.warn .builder-readiness-icon{
background:#fff0c9;
color:#8a641d;
}
.builder-readiness-item.info .builder-readiness-icon{
background:#eef1f4;
color:#5d6871;
}
.builder-lesson-item.has-warning{
border-color:#e4b765!important;
background:#fffaf0!important;
}
@media(max-width:760px){
.builder-readiness-list{
grid-template-columns:1fr;
}
.builder-readiness-head{
flex-direction:column;
}
}
/* ======================================================================
v6.14.1 — GLOBAL UI REDESIGN
Modern learning platform · warm natural palette · professional spacing
====================================================================== */
:root{
--vnn-ink:#17312d;
--vnn-ink-soft:#3e5550;
--vnn-muted:#75817c;
--vnn-green:#0f8f83;
--vnn-green-dark:#0b6f67;
--vnn-green-deep:#10453f;
--vnn-mint:#eaf7f2;
--vnn-mint-2:#f3faf7;
--vnn-cream:#faf8f2;
--vnn-warm:#f3eee4;
--vnn-gold:#c9973b;
--vnn-gold-soft:#fbf2d8;
--vnn-line:#dfe7e1;
--vnn-line-warm:#e9e1d5;
--vnn-danger:#b84b43;
--vnn-shadow-sm:0 6px 20px rgba(27,54,47,.055);
--vnn-shadow-md:0 16px 40px rgba(27,54,47,.085);
--vnn-shadow-lg:0 28px 70px rgba(20,52,45,.13);
--vnn-radius-sm:12px;
--vnn-radius-md:18px;
--vnn-radius-lg:26px;
--vnn-radius-xl:32px;
}
html{
background:#f7f8f4;
scroll-behavior:smooth;
}
body{
color:var(--vnn-ink);
background:
radial-gradient(circle at 12% 0%,rgba(15,143,131,.07),transparent 28%),
radial-gradient(circle at 88% 12%,rgba(201,151,59,.055),transparent 26%),
linear-gradient(180deg,#fbfcf9 0%,#f7f8f4 54%,#f8f7f2 100%);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
::selection{
background:#ccefe7;
color:#123e38;
}
.container{
width:min(1480px,calc(100% - 48px))!important;
margin-inline:auto!important;
}
.view{
min-height:calc(100dvh - 82px);
}
.eyebrow{
color:var(--vnn-green)!important;
font-size:12px!important;
font-weight:950!important;
letter-spacing:.12em!important;
}
.muted,
.section-subtitle{
color:var(--vnn-muted)!important;
}
/* Header ---------------------------------------------------------------- */
.site-header{
position:sticky!important;
top:0;
z-index:1000!important;
min-height:82px;
border-bottom:1px solid rgba(218,226,220,.82)!important;
background:rgba(252,253,250,.9)!important;
backdrop-filter:blur(18px) saturate(150%);
-webkit-backdrop-filter:blur(18px) saturate(150%);
box-shadow:0 8px 26px rgba(24,50,43,.045);
}
.header-inner{
min-height:82px!important;
display:flex!important;
align-items:center!important;
gap:24px!important;
}
.brand-button{
flex:1 1 auto;
min-width:270px;
padding:0!important;
text-align:left!important;
background:transparent!important;
border:0!important;
}
.brand{
color:#1c332f!important;
font-size:clamp(21px,2vw,30px)!important;
font-weight:950!important;
letter-spacing:-.035em!important;
line-height:1.05!important;
}
.brand span{
color:var(--vnn-green)!important;
}
.tagline{
margin-top:7px!important;
color:#8b918d!important;
font-size:12.5px!important;
letter-spacing:.015em;
}
.header-actions{
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:8px!important;
min-width:0;
}
.nav-pill,
.header-login,
.plan-chip,
.user-chip,
.status-pill{
min-height:42px!important;
border-radius:14px!important;
border:1px solid #e0e6e1!important;
background:rgba(255,255,255,.88)!important;
box-shadow:none!important;
color:#2e403c!important;
}
.nav-pill{
padding:9px 13px!important;
font-size:13.5px!important;
font-weight:850!important;
transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.nav-pill:hover{
transform:translateY(-1px);
border-color:#bddfd6!important;
background:#f5fbf8!important;
box-shadow:0 6px 16px rgba(17,104,94,.075)!important;
}
.header-login{
background:var(--vnn-green-deep)!important;
color:#fff!important;
border-color:var(--vnn-green-deep)!important;
}
.user-chip{
padding:5px 6px 5px 12px!important;
}
.logout-btn{
border-radius:10px!important;
}
.status-pill{
border-color:#bae5da!important;
background:#ecfbf7!important;
color:#0b7469!important;
padding:0 12px!important;
}
.status-pill i{
box-shadow:0 0 0 5px rgba(15,143,131,.10);
}
/* Breadcrumb ------------------------------------------------------------ */
.breadcrumb{
margin:18px 0 14px!important;
min-height:36px;
display:flex!important;
align-items:center!important;
gap:8px!important;
padding:0 2px!important;
color:#7f8984!important;
font-size:13px!important;
}
.breadcrumb button{
color:#35776f!important;
font-weight:800!important;
}
/* Shared cards / inputs -------------------------------------------------- */
.card,
.home-hero-copy,
.garden-card,
.track-hero,
.course-hero,
.lesson-hero,
.track-card,
.season-card,
.course-card,
.teacher-section,
.report-section-card,
.commercial-action-box{
border:1px solid rgba(218,226,220,.95)!important;
background:rgba(255,255,255,.94)!important;
box-shadow:var(--vnn-shadow-sm)!important;
}
.card,
.teacher-section,
.report-section-card,
.commercial-action-box{
border-radius:var(--vnn-radius-md)!important;
}
input,
textarea,
select{
border:1px solid #d9e1dc!important;
border-radius:12px!important;
background:#fff!important;
color:var(--vnn-ink)!important;
box-shadow:0 1px 0 rgba(255,255,255,.7) inset!important;
transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
input:focus,
textarea:focus,
select:focus{
outline:none!important;
border-color:#74c9bc!important;
box-shadow:0 0 0 4px rgba(15,143,131,.10)!important;
}
button{
-webkit-tap-highlight-color:transparent;
}
.primary{
border-color:var(--vnn-green)!important;
background:linear-gradient(180deg,#11998c,#0f8f83)!important;
color:#fff!important;
box-shadow:0 8px 18px rgba(15,143,131,.14)!important;
}
.primary:hover:not(:disabled){
background:linear-gradient(180deg,#0f8f83,#0b7d73)!important;
transform:translateY(-1px);
box-shadow:0 11px 24px rgba(15,143,131,.18)!important;
}
.ghost{
border-color:#dce4df!important;
background:#fff!important;
color:#36514b!important;
}
.ghost:hover:not(:disabled){
border-color:#b9d8d0!important;
background:#f4faf7!important;
}
/* HOME ------------------------------------------------------------------ */
.home-container{
padding-bottom:72px!important;
}
.home-hero{
grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr)!important;
gap:18px!important;
padding:30px 0 18px!important;
}
.home-hero-copy{
position:relative;
overflow:hidden;
min-height:390px;
padding:52px 54px!important;
border-radius:var(--vnn-radius-xl)!important;
background:
radial-gradient(circle at 100% 0%,rgba(119,211,195,.22),transparent 38%),
linear-gradient(135deg,#ffffff 0%,#f6fbf8 60%,#f1faf7 100%)!important;
box-shadow:var(--vnn-shadow-md)!important;
}
.home-hero-copy::after{
content:"";
position:absolute;
width:220px;
height:220px;
right:-76px;
bottom:-86px;
border:32px solid rgba(15,143,131,.055);
border-radius:50%;
pointer-events:none;
}
.home-hero h1{
max-width:860px;
margin:12px 0 18px!important;
color:#16352f!important;
font-size:clamp(42px,5.3vw,72px)!important;
line-height:.98!important;
letter-spacing:-.055em!important;
}
.home-hero h1 span{
color:var(--vnn-green)!important;
}
.home-hero p{
max-width:820px;
margin:0!important;
color:#66736e!important;
font-size:17px!important;
line-height:1.7!important;
}
.hero-actions{
margin-top:30px!important;
gap:10px!important;
}
.cta{
min-height:48px!important;
padding:12px 18px!important;
border-radius:14px!important;
}
.garden-card{
padding:28px!important;
border-radius:var(--vnn-radius-xl)!important;
color:#eefbf7!important;
background:
radial-gradient(circle at 92% 8%,rgba(123,228,207,.20),transparent 34%),
linear-gradient(145deg,#163f39 0%,#0d6e64 100%)!important;
box-shadow:var(--vnn-shadow-md)!important;
border-color:#1b6c62!important;
}
.garden-card-head{
align-items:center!important;
}
.garden-card-head span,
.garden-stat span{
color:#cce9e2!important;
}
.garden-card-head strong{
color:#fff!important;
font-size:20px!important;
}
.garden-icon{
background:rgba(255,255,255,.12)!important;
border:1px solid rgba(255,255,255,.14);
}
.garden-stats{
gap:10px!important;
}
.garden-stat{
border-color:rgba(255,255,255,.13)!important;
background:rgba(255,255,255,.075)!important;
}
.garden-stat strong{
color:#fff!important;
}
.home-section{
margin-top:18px!important;
padding:30px!important;
border-radius:var(--vnn-radius-lg)!important;
}
.section-title-row{
margin-bottom:18px!important;
}
.section-title-row h2{
margin:6px 0 4px!important;
color:#19352f!important;
font-size:clamp(28px,3vw,40px)!important;
letter-spacing:-.035em!important;
}
.value-section{
border:1px solid var(--vnn-line)!important;
background:rgba(255,255,255,.68)!important;
box-shadow:none!important;
}
.value-grid{
gap:12px!important;
}
.value-card{
min-height:142px;
padding:20px!important;
border-color:#e1e8e3!important;
border-radius:18px!important;
box-shadow:none!important;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.value-card:hover{
transform:translateY(-2px);
border-color:#c5dfd7!important;
box-shadow:0 12px 26px rgba(27,70,61,.07)!important;
}
.value-icon{
width:46px!important;
height:46px!important;
border-radius:14px!important;
background:#edf8f4!important;
}
.value-card strong{
color:#24403a!important;
font-size:15.5px!important;
}
.value-card p{
color:#74807b!important;
}
.plus-teaser-section{
border:1px solid #ead7a9!important;
background:
radial-gradient(circle at 95% 20%,rgba(216,173,88,.15),transparent 31%),
linear-gradient(135deg,#fffdf7 0%,#fbf7ea 100%)!important;
box-shadow:0 12px 30px rgba(112,86,32,.06)!important;
}
.plus-teaser-price{
color:#765a1f!important;
}
.plus-teaser-points span{
border-color:#eadfbe!important;
background:rgba(255,255,255,.72)!important;
}
.track-grid{
gap:14px!important;
}
.track-card{
position:relative;
overflow:hidden;
min-height:210px!important;
padding:26px!important;
border-radius:22px!important;
text-align:left!important;
transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.track-card:hover{
transform:translateY(-3px);
border-color:#b9d9d1!important;
box-shadow:var(--vnn-shadow-md)!important;
}
.track-card::after{
content:"";
position:absolute;
width:160px;
height:160px;
right:-60px;
bottom:-70px;
border-radius:50%;
background:rgba(15,143,131,.05);
}
.track-emoji{
font-size:36px!important;
}
.track-kicker{
color:var(--vnn-green)!important;
font-size:11px!important;
font-weight:950!important;
letter-spacing:.12em!important;
}
.track-card h3{
margin:7px 0!important;
color:#1c3832!important;
font-size:25px!important;
letter-spacing:-.03em!important;
}
.track-card p{
max-width:560px;
color:#75807c!important;
line-height:1.55!important;
}
.season-card{
padding:24px!important;
border-radius:22px!important;
box-shadow:none!important;
transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.season-card:hover{
transform:translateY(-2px);
border-color:#bcdcd3!important;
box-shadow:var(--vnn-shadow-sm)!important;
}
/* Track / Course -------------------------------------------------------- */
.track-hero,
.course-hero{
position:relative;
overflow:hidden;
margin-top:10px!important;
padding:38px 40px!important;
border-radius:var(--vnn-radius-xl)!important;
background:
radial-gradient(circle at 92% 12%,rgba(15,143,131,.12),transparent 31%),
linear-gradient(135deg,#ffffff 0%,#f4faf7 100%)!important;
box-shadow:var(--vnn-shadow-sm)!important;
}
.track-hero::after,
.course-hero::after{
content:"";
position:absolute;
right:-70px;
bottom:-88px;
width:220px;
height:220px;
border:30px solid rgba(15,143,131,.045);
border-radius:50%;
}
.track-hero h1,
.course-hero h1{
margin:8px 0 10px!important;
color:#183831!important;
font-size:clamp(38px,4.3vw,62px)!important;
letter-spacing:-.045em!important;
}
.track-value-strip{
margin:14px 0 28px!important;
padding:18px 20px!important;
border:1px solid #dfe8e2!important;
border-radius:20px!important;
background:rgba(255,255,255,.8)!important;
box-shadow:none!important;
}
.course-grid{
gap:14px!important;
}
.course-card{
min-height:190px!important;
padding:24px!important;
border-radius:22px!important;
box-shadow:none!important;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.course-card:hover{
transform:translateY(-2px);
border-color:#b9d9d1!important;
box-shadow:var(--vnn-shadow-sm)!important;
}
/* Lesson --------------------------------------------------------------- */
.lesson-hero{
position:relative;
overflow:hidden;
margin-top:10px!important;
padding:34px 38px!important;
border-radius:var(--vnn-radius-xl)!important;
background:
radial-gradient(circle at 90% 18%,rgba(15,143,131,.11),transparent 30%),
linear-gradient(135deg,#ffffff 0%,#f6fbf8 100%)!important;
box-shadow:var(--vnn-shadow-sm)!important;
}
.lesson-hero h1{
max-width:1180px!important;
margin:8px 0 12px!important;
color:#19362f!important;
font-size:clamp(36px,4.3vw,60px)!important;
line-height:1.02!important;
letter-spacing:-.048em!important;
overflow-wrap:anywhere;
}
.lesson-hero p{
max-width:900px!important;
color:#73807b!important;
font-size:16px!important;
}
.lesson-score-card{
min-width:165px!important;
border:1px solid #bfe2d8!important;
border-radius:22px!important;
background:linear-gradient(180deg,#f1fffa,#e9f9f4)!important;
box-shadow:none!important;
}
.big-percent{
color:#0c7f74!important;
font-size:42px!important;
}
.skill-tabs{
top:82px!important;
margin:12px 0 20px!important;
padding:10px 4px 12px!important;
gap:7px!important;
border-bottom:1px solid #e4eae6;
background:rgba(248,250,247,.92)!important;
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
scrollbar-width:none;
}
.skill-tabs::-webkit-scrollbar{
display:none;
}
.skill-tab,
.subtab{
min-height:42px;
padding:9px 14px!important;
border:1px solid #dde5e0!important;
border-radius:13px!important;
background:rgba(255,255,255,.92)!important;
color:#41534f!important;
font-weight:850!important;
transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.skill-tab:hover:not(:disabled),
.subtab:hover:not(:disabled){
border-color:#bddbd3!important;
background:#f2faf7!important;
transform:translateY(-1px);
}
.skill-tab.active,
.subtab.active{
border-color:var(--vnn-green)!important;
background:var(--vnn-green)!important;
color:#fff!important;
box-shadow:0 7px 18px rgba(15,143,131,.16)!important;
}
.skill-tab:disabled{
opacity:.48!important;
filter:saturate(.6);
}
.skill-panel{
padding-bottom:64px!important;
}
.activity-heading{
margin:22px 0 16px!important;
padding:0 2px!important;
}
.activity-heading h2{
margin:5px 0 4px!important;
color:#1b3932!important;
font-size:clamp(28px,3vw,38px)!important;
letter-spacing:-.035em!important;
}
.activity-heading p{
color:#7b8581!important;
line-height:1.6!important;
}
.complete-skill{
border-radius:12px!important;
border-color:#d8e3de!important;
background:#fff!important;
color:#4c625c!important;
}
.complete-skill.done{
border-color:#b6dfd4!important;
background:#edf9f5!important;
color:#17786d!important;
}
/* Core student activity shells */
.vocab-card,
.flash-shell,
.ai-speaking-card,
.shadowing-card,
.reading-card,
.grammar-card,
.writing-card,
.quiz-card,
.vocab-recall-card,
.vocab-recall-shell,
.lesson-part-listening{
border-color:#dfe7e2!important;
box-shadow:var(--vnn-shadow-sm)!important;
}
.vocab-recall-card{
border-radius:22px!important;
}
.vocab-recall-mistake-tray{
border-color:#e5d5b3!important;
background:#fffaf0!important;
}
.vocab-recall-hint{
border-color:#eadbb5!important;
background:#fff7df!important;
}
.ai-speaking-card{
border-radius:24px!important;
}
.ai-speaking-top{
padding-bottom:16px;
border-bottom:1px solid #e7ece9;
}
.ai-mode-tabs{
gap:7px!important;
}
.ai-mode{
border-radius:12px!important;
}
.ai-mode.active{
background:#edf9f5!important;
color:#0d786e!important;
border-color:#b6ddd3!important;
}
.ai-policy-card{
border-radius:18px!important;
box-shadow:none!important;
}
/* Teacher --------------------------------------------------------------- */
#view-teacher{
background:
linear-gradient(180deg,rgba(236,246,242,.48),transparent 380px);
}
.teacher-hero{
margin:10px 0 18px!important;
padding:34px 38px!important;
border-radius:var(--vnn-radius-xl)!important;
background:
radial-gradient(circle at 90% 10%,rgba(123,228,207,.20),transparent 28%),
linear-gradient(145deg,#173f39 0%,#0d6f65 100%)!important;
box-shadow:0 20px 44px rgba(15,91,82,.16)!important;
}
.teacher-hero h1{
margin:6px 0!important;
font-size:clamp(34px,4vw,50px)!important;
letter-spacing:-.04em!important;
}
.teacher-hero p{
max-width:800px;
color:#d1ebe5!important;
line-height:1.55!important;
}
.teacher-stats{
gap:10px!important;
margin-bottom:12px!important;
}
.teacher-stat{
min-height:104px;
padding:18px 20px!important;
border-radius:18px!important;
box-shadow:none!important;
}
.teacher-stat strong{
color:#0e8075!important;
font-size:30px!important;
}
.teacher-stat span{
color:#75817c!important;
}
.teacher-tabs{
position:sticky;
top:82px;
z-index:25;
margin:0 0 16px!important;
padding:10px 2px 12px!important;
gap:6px!important;
border-bottom:1px solid #e2e8e4;
background:rgba(248,250,247,.93);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
scrollbar-width:none;
}
.teacher-tabs::-webkit-scrollbar{
display:none;
}
.teacher-tab{
min-height:40px;
padding:8px 12px!important;
border:1px solid #dde5e0!important;
border-radius:12px!important;
background:#fff!important;
color:#4a5d58!important;
font-size:13px!important;
}
.teacher-tab.active{
border-color:var(--vnn-green)!important;
background:var(--vnn-green)!important;
color:#fff!important;
box-shadow:0 7px 16px rgba(15,143,131,.14);
}
.teacher-section{
padding:24px!important;
margin-bottom:28px!important;
}
.teacher-section-head{
margin-bottom:18px!important;
align-items:flex-start!important;
}
.teacher-section-head h2{
margin:4px 0 2px!important;
color:#1d3a34!important;
font-size:25px!important;
letter-spacing:-.025em!important;
}
.teacher-table{
overflow:hidden;
border:1px solid #e2e8e4;
border-radius:15px;
background:#fff;
}
.teacher-tr{
border-top:1px solid #edf0ee!important;
}
.teacher-tr:first-child{
border-top:0!important;
}
.builder-layout{
gap:14px!important;
}
.builder-sidebar{
border-radius:20px!important;
box-shadow:none!important;
}
.builder-main .card{
box-shadow:none!important;
}
.builder-lesson-item{
border-radius:12px!important;
}
.builder-lesson-item.active{
border-color:#99d4c8!important;
background:#eef9f5!important;
}
.builder-readiness{
border-color:#dfe6e1!important;
border-radius:18px!important;
background:#fafbf8!important;
}
.builder-readiness-item{
border-color:#e4e9e6!important;
border-radius:12px!important;
}
/* Billing / Plus / Policy / Auth modals -------------------------------- */
.modal{
background:rgba(18,38,33,.54)!important;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.modal-card,
.billing-modal,
.plus-info-modal,
.policy-modal{
border-color:#dde4df!important;
box-shadow:var(--vnn-shadow-lg)!important;
}
.modal-card{
border-radius:24px!important;
}
.billing-modal,
.plus-info-modal,
.policy-modal{
border-radius:26px!important;
}
.billing-head,
.plus-info-head,
.policy-head{
background:rgba(255,255,255,.96)!important;
}
.billing-current-summary{
background:#f5faf7!important;
}
.billing-close,
.modal-close,
.plus-info-close,
.policy-close{
border-color:#e0e6e2!important;
background:#f7f9f7!important;
color:#455b55!important;
}
/* Support */
#supportFab,
.support-fab{
border:1px solid rgba(255,255,255,.35)!important;
background:linear-gradient(180deg,#139f91,#0f8f83)!important;
box-shadow:0 14px 30px rgba(15,143,131,.22)!important;
}
/* Empty / feedback states */
.empty-state{
padding:24px!important;
border:1px dashed #d7dfda!important;
border-radius:14px!important;
background:#fafbf9!important;
color:#8a928e!important;
}
.feedback{
border-radius:12px!important;
}
/* Mobile --------------------------------------------------------------- */
@media(max-width:1100px){
.container{
width:min(100% - 28px,1480px)!important;
}
.header-inner{
gap:14px!important;
}
.brand-button{
min-width:220px;
}
.tagline{
display:none;
}
.header-actions{
overflow-x:auto;
scrollbar-width:none;
}
.header-actions::-webkit-scrollbar{
display:none;
}
.home-hero{
grid-template-columns:1fr!important;
}
.garden-card{
min-height:230px;
}
}
@media(max-width:760px){
:root{
--vnn-radius-xl:24px;
}
body{
background:#f9faf7;
}
.container{
width:calc(100% - 20px)!important;
}
.site-header{
min-height:64px!important;
}
.header-inner{
min-height:64px!important;
padding:8px 0!important;
}
.brand-button{
min-width:0;
flex:0 0 auto;
}
.brand{
max-width:185px;
font-size:18px!important;
line-height:1.08!important;
}
.header-actions{
gap:6px!important;
}
.header-track-link,
#teacherDashboardBtn,
#studentBillingBtn,
.status-pill{
min-width:max-content;
}
.nav-pill{
min-height:38px!important;
padding:7px 10px!important;
border-radius:11px!important;
font-size:12px!important;
}
.mobile-account-bar{
border-bottom:1px solid #e2e8e4!important;
background:#fff!important;
}
.home-hero{
padding:14px 0 10px!important;
}
.home-hero-copy{
min-height:0;
padding:30px 22px!important;
border-radius:24px!important;
}
.home-hero h1{
font-size:clamp(38px,12vw,54px)!important;
}
.home-hero p{
font-size:15px!important;
}
.garden-card{
min-height:0;
padding:22px!important;
border-radius:24px!important;
}
.home-section{
padding:22px 18px!important;
border-radius:20px!important;
}
.value-grid{
grid-template-columns:1fr!important;
}
.value-card-wide{
grid-column:auto!important;
}
.track-grid,
.course-grid{
grid-template-columns:1fr!important;
}
.track-card,
.course-card{
min-height:0!important;
}
.track-hero,
.course-hero,
.lesson-hero{
padding:26px 20px!important;
border-radius:22px!important;
}
.track-hero h1,
.course-hero h1,
.lesson-hero h1{
font-size:clamp(34px,10vw,46px)!important;
}
.lesson-score-card{
min-width:0!important;
padding:14px!important;
}
.skill-tabs{
top:64px!important;
margin-inline:-10px!important;
padding-inline:10px!important;
}
.skill-tab{
min-height:40px;
padding:8px 12px!important;
font-size:12.5px!important;
}
.activity-heading{
align-items:flex-start!important;
gap:12px!important;
}
.activity-heading h2{
font-size:29px!important;
}
.teacher-hero{
padding:26px 20px!important;
border-radius:22px!important;
align-items:flex-start!important;
}
.teacher-stats{
grid-template-columns:repeat(2,1fr)!important;
}
.teacher-tabs{
top:64px!important;
margin-inline:-10px!important;
padding-inline:10px!important;
}
.teacher-section{
padding:18px!important;
}
.builder-layout{
grid-template-columns:1fr!important;
}
.builder-sidebar{
position:static!important;
}
.teacher-section-head{
flex-direction:column!important;
}
.billing-modal,
.policy-modal,
.plus-info-modal{
border-radius:20px 20px 0 0!important;
}
}
@media(max-width:480px){
.brand{
max-width:145px;
font-size:16px!important;
}
.header-track-link span{
display:none;
}
.home-hero-copy{
padding:26px 18px!important;
}
.hero-actions{
display:grid!important;
grid-template-columns:1fr!important;
}
.hero-actions button{
width:100%;
}
.home-section{
padding:20px 16px!important;
}
.teacher-stats{
grid-template-columns:1fr 1fr!important;
}
.teacher-stat{
min-height:88px;
padding:14px!important;
}
.teacher-stat strong{
font-size:26px!important;
}
.builder-readiness-list{
grid-template-columns:1fr!important;
}
}
@media(prefers-reduced-motion:reduce){
*,
*::before,
*::after{
scroll-behavior:auto!important;
transition:none!important;
animation:none!important;
}
}
/* =========================================================
v6.14.2 — NAVIGATION HOTFIX
========================================================= */
.header-home-link{
border-color:#d8e6df!important;
background:#f7fbf9!important;
color:#31554d!important;
}
.header-home-link:hover{
border-color:#afd8cd!important;
background:#eef9f5!important;
}
@media(max-width:760px){
.header-home-link span{
display:none;
}
.header-home-link{
min-width:38px!important;
padding-inline:9px!important;
}
}
/* =========================================================
v6.14.3 — NEW LESSON INTAKE
========================================================= */
.lesson-intake-section{
border-color:#cfe4dc!important;
background:linear-gradient(180deg,#ffffff,#fbfdfb)!important;
}
.lesson-intake-guide{
margin-bottom:16px;
padding:16px;
border:1px solid #d8e7e1;
border-radius:16px;
background:
radial-gradient(circle at 100% 0%,rgba(15,143,131,.08),transparent 32%),
#f8fcfa;
}
.lesson-intake-guide-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
}
.lesson-intake-guide-head strong{
display:block;
margin-top:3px;
color:#24413a;
font-size:15px;
}
.lesson-intake-state{
display:inline-flex;
min-height:28px;
align-items:center;
padding:4px 9px;
border-radius:999px;
background:#fff4d8;
color:#7d5a16;
font-size:11.5px;
font-weight:900;
white-space:nowrap;
}
.lesson-intake-steps{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:7px;
margin:14px 0 10px;
}
.lesson-intake-steps span{
display:inline-flex;
align-items:center;
gap:6px;
min-height:34px;
padding:6px 9px;
border:1px solid #dce8e3;
border-radius:10px;
background:#fff;
color:#4d625c;
font-size:12px;
font-weight:800;
}
.lesson-intake-steps b{
display:grid;
place-items:center;
width:20px;
height:20px;
border-radius:50%;
background:#e7f6f1;
color:#0f8075;
}
.lesson-intake-steps i{
color:#a2aca8;
font-style:normal;
}
.lesson-intake-guide p{
margin:0;
color:#6e7a75;
font-size:12.5px;
line-height:1.55;
}
.lesson-intake-hint{
display:flex;
gap:8px;
align-items:flex-start;
margin:10px 0 14px;
padding:10px 12px;
border-left:3px solid #d2a74d;
border-radius:10px;
background:#fffaf0;
color:#675a3d;
font-size:12.5px;
line-height:1.5;
}
.builder-asset-summary{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px;
margin-bottom:8px;
padding:8px 10px;
border:1px solid #e2e8e4;
border-radius:11px;
background:#fafbf9;
color:#61706b;
font-size:12px;
}
.builder-asset-summary span{
display:inline-flex;
gap:4px;
align-items:center;
}
.builder-asset-summary small{
margin-left:auto;
color:#8b938f;
}
.builder-asset-row{
grid-template-columns:auto minmax(0,1fr) auto auto!important;
gap:10px!important;
align-items:center!important;
}
.builder-asset-type{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:52px;
min-height:28px;
padding:4px 7px;
border-radius:8px;
background:#edf2ef;
color:#566761;
font-size:10.5px;
font-weight:950;
letter-spacing:.04em;
}
.builder-asset-type.type-audio{
background:#e9f6f2;
color:#0d786e;
}
.builder-asset-type.type-pdf{
background:#fff0ed;
color:#a24a3f;
}
.builder-asset-type.type-word{
background:#eef3fb;
color:#496684;
}
.builder-asset-copy{
min-width:0;
}
.builder-asset-copy strong,
.builder-asset-copy small{
display:block;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.builder-asset-copy small{
margin-top:3px;
color:#7d8783;
}
.builder-asset-size{
color:#85908b;
font-size:11px;
white-space:nowrap;
}
@media(max-width:760px){
.lesson-intake-guide-head{
flex-direction:column;
}
.lesson-intake-steps i{
display:none;
}
.lesson-intake-hint{
flex-direction:column;
}
.builder-asset-summary small{
width:100%;
margin-left:0;
}
.builder-asset-row{
grid-template-columns:auto minmax(0,1fr) auto!important;
}
.builder-asset-size{
display:none;
}
}
/* =====================================================================
v6.14.4 — TYPOGRAPHY + BAMBOO OUTSIDE / SEA INSIDE
===================================================================== */
:root{
--font-vn:"Be Vietnam Pro","Segoe UI",Arial,sans-serif;
--font-cjk:"Noto Sans SC","Microsoft YaHei","PingFang SC",sans-serif;
}
/* Readability first */
html{
font-size:16px;
}
body{
font-family:var(--font-vn)!important;
font-size:16px;
line-height:1.62;
letter-spacing:-.008em;
}
button,
input,
textarea,
select{
font-family:var(--font-vn)!important;
}
:lang(zh),
[data-language="zh"],
.chinese-track,
#view-track[data-track="zh"]{
font-family:var(--font-cjk),var(--font-vn)!important;
}
h1,h2,h3,h4,h5,h6,
.brand,
.teacher-hero h1,
.lesson-hero h1,
.track-hero h1,
.course-hero h1{
font-family:var(--font-vn)!important;
font-weight:800!important;
letter-spacing:-.035em!important;
text-wrap:balance;
}
p,
small,
li,
label,
.section-subtitle{
letter-spacing:-.006em;
}
.brand{
font-weight:800!important;
}
.tagline{
font-weight:500!important;
letter-spacing:0!important;
}
.nav-pill,
.teacher-tab,
.skill-tab,
.subtab,
.primary,
.ghost,
.cta{
font-weight:700!important;
letter-spacing:-.01em!important;
}
.eyebrow{
font-weight:800!important;
letter-spacing:.105em!important;
}
/* Keep long copy comfortable */
.home-hero p,
.track-hero p,
.course-hero p,
.lesson-hero p,
.value-card p,
.section-subtitle{
line-height:1.68!important;
}
/* ---------------- Public / outside = bamboo ---------------- */
body.public-experience #view-home{
position:relative;
}
body.public-experience #view-home::before{
content:"";
position:absolute;
inset:0 0 auto 0;
height:520px;
pointer-events:none;
background:
linear-gradient(90deg,rgba(15,143,131,.055),transparent 25%,transparent 78%,rgba(71,133,82,.055)),
radial-gradient(circle at 6% 8%,rgba(71,145,87,.13),transparent 21%),
radial-gradient(circle at 94% 4%,rgba(40,128,78,.10),transparent 23%);
}
body.public-experience .home-hero-copy{
isolation:isolate;
min-height:420px;
padding:54px 56px!important;
background:
linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(249,253,249,.96) 50%,rgba(243,249,241,.92) 100%)!important;
}
body.public-experience .home-hero-copy::before{
content:"";
position:absolute;
z-index:-1;
right:0;
top:0;
width:38%;
height:100%;
opacity:.72;
background:
linear-gradient(77deg,transparent 0 35%,rgba(38,118,64,.10) 36% 38%,transparent 39%),
linear-gradient(84deg,transparent 0 55%,rgba(48,133,71,.11) 56% 58%,transparent 59%),
repeating-linear-gradient(90deg,transparent 0 28px,rgba(43,119,64,.07) 29px 34px,transparent 35px 60px);
mask-image:linear-gradient(90deg,transparent,#000 42%);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 42%);
}
body.public-experience .home-hero-copy::after{
content:"";
position:absolute;
z-index:-1;
right:2%;
bottom:-12px;
width:280px;
height:170px;
opacity:.50;
border-radius:60% 20% 0 0;
background:
radial-gradient(ellipse at 15% 80%,rgba(46,133,69,.23) 0 9%,transparent 10%),
radial-gradient(ellipse at 45% 55%,rgba(55,143,78,.20) 0 8%,transparent 9%),
radial-gradient(ellipse at 72% 70%,rgba(38,122,66,.18) 0 10%,transparent 11%);
}
body.public-experience .home-hero h1{
max-width:800px;
}
body.public-experience .home-hero h1 span{
color:#0f8f67!important;
}
/* ---------------- Approved student / inside = sea ---------------- */
body.student-experience #view-home{
position:relative;
background:
linear-gradient(180deg,rgba(235,249,250,.46),transparent 560px);
}
body.student-experience .home-hero-copy{
isolation:isolate;
min-height:420px;
padding:54px 56px!important;
color:#173b41!important;
border-color:#c8e2df!important;
background:
linear-gradient(105deg,rgba(255,255,255,.97) 0%,rgba(244,252,251,.94) 48%,rgba(220,246,248,.92) 100%)!important;
overflow:hidden;
}
body.student-experience .home-hero-copy::before{
content:"";
position:absolute;
z-index:-1;
right:-5%;
bottom:-9%;
width:58%;
height:78%;
opacity:.88;
background:
radial-gradient(ellipse at 50% 100%,rgba(9,135,168,.18) 0 22%,transparent 23%),
radial-gradient(ellipse at 70% 100%,rgba(19,155,174,.13) 0 34%,transparent 35%),
linear-gradient(180deg,rgba(120,211,225,.06),rgba(50,177,196,.13));
border-radius:58% 0 0 0;
}
body.student-experience .home-hero-copy::after{
content:"";
position:absolute;
z-index:-1;
right:-2%;
bottom:12%;
width:48%;
height:34%;
opacity:.75;
background:
radial-gradient(ellipse at 8% 100%,rgba(12,121,141,.14) 0 24%,transparent 25%),
radial-gradient(ellipse at 37% 100%,rgba(11,101,132,.12) 0 31%,transparent 32%),
radial-gradient(ellipse at 72% 100%,rgba(22,116,129,.10) 0 27%,transparent 28%);
}
body.student-experience .home-hero h1 span{
color:#0a8791!important;
}
body.student-experience .garden-card{
background:
radial-gradient(circle at 96% 0%,rgba(116,224,221,.18),transparent 32%),
linear-gradient(145deg,#154c4b,#0b7780)!important;
border-color:#277f7d!important;
}
.home-motivation-line{
display:inline-flex;
align-items:center;
max-width:680px;
min-height:42px;
margin-top:22px;
padding:9px 14px;
border:1px solid #d9e8e1;
border-radius:13px;
background:rgba(255,255,255,.75);
color:#49625b;
font-size:13.5px;
font-weight:600;
line-height:1.5;
backdrop-filter:blur(6px);
}
body.student-experience .home-motivation-line{
border-color:#c9e4e4;
color:#3f6368;
background:rgba(248,255,255,.78);
}
/* Improve visual rhythm across the real app */
.section-title-row h2,
.activity-heading h2,
.teacher-section-head h2{
line-height:1.18!important;
}
.value-card strong,
.track-card h3,
.course-card h3,
.season-card h3{
line-height:1.32!important;
}
.value-card p,
.track-card p,
.course-card p,
.season-card p{
font-size:14.5px!important;
}
/* Desktop: avoid oversized UI */
@media(min-width:1200px){
.home-hero h1{
font-size:clamp(46px,4.7vw,68px)!important;
}
.track-hero h1,
.course-hero h1,
.lesson-hero h1{
font-size:clamp(38px,4vw,58px)!important;
}
}
/* Tablet */
@media(max-width:980px){
body.public-experience .home-hero-copy,
body.student-experience .home-hero-copy{
min-height:0;
padding:38px 30px!important;
}
.home-motivation-line{
margin-top:18px;
}
}
/* Mobile readability */
@media(max-width:760px){
html{
font-size:15px;
}
body{
font-size:15px;
line-height:1.58;
}
.brand{
font-size:17px!important;
}
.nav-pill{
font-size:12.5px!important;
}
body.public-experience .home-hero-copy,
body.student-experience .home-hero-copy{
padding:28px 20px!important;
}
.home-hero h1{
font-size:clamp(35px,10vw,48px)!important;
line-height:1.05!important;
}
.home-hero p{
font-size:15px!important;
}
.home-motivation-line{
width:100%;
font-size:12.5px;
}
body.public-experience .home-hero-copy::before,
body.public-experience .home-hero-copy::after,
body.student-experience .home-hero-copy::before,
body.student-experience .home-hero-copy::after{
opacity:.30;
}
}
/* =====================================================================
v6.14.5 — REAL STUDENT DASHBOARD + HOME POLISH
===================================================================== */
.public-feature-ribbon{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:8px;
margin:2px 0 20px;
padding:10px;
border:1px solid #dfe8e2;
border-radius:20px;
background:rgba(255,255,255,.88);
box-shadow:0 9px 24px rgba(28,66,55,.055);
}
.public-feature-ribbon>div{
display:grid;
grid-template-columns:auto 1fr;
column-gap:9px;
align-items:center;
min-width:0;
min-height:78px;
padding:11px 12px;
border-radius:14px;
background:linear-gradient(180deg,#fbfdfb,#f5faf7);
}
.public-feature-ribbon span{
grid-row:1 / 3;
display:grid;
place-items:center;
width:38px;
height:38px;
border-radius:12px;
background:#e8f6f1;
font-size:20px;
}
.public-feature-ribbon strong{
color:#25423b;
font-size:12.5px;
line-height:1.25;
}
.public-feature-ribbon small{
color:#78847f;
font-size:10.5px;
line-height:1.35;
}
/* Student hero: replace generic garden stats with meaningful today card */
.student-experience .home-hero{
grid-template-columns:minmax(0,1.28fr) minmax(330px,.72fr)!important;
}
.student-today-hero{
min-height:420px;
padding:26px;
border:1px solid #bee0df;
border-radius:30px;
background:
radial-gradient(circle at 100% 0%,rgba(76,197,207,.18),transparent 34%),
linear-gradient(155deg,#0e5f62 0%,#0a7e82 100%);
color:#fff;
box-shadow:0 20px 42px rgba(10,92,94,.15);
}
.student-today-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
}
.student-card-kicker{
display:block;
margin-bottom:7px;
color:#cbeeed;
font-size:11px;
font-weight:800;
letter-spacing:.09em;
}
.student-today-head strong{
display:block;
max-width:240px;
color:#fff;
font-size:23px;
line-height:1.28;
letter-spacing:-.025em;
}
.student-goal-count{
display:grid;
place-items:center;
min-width:64px;
height:64px;
border:1px solid rgba(255,255,255,.18);
border-radius:18px;
background:rgba(255,255,255,.10);
font-size:22px;
font-weight:800;
}
.student-goal-progress{
height:10px;
margin:22px 0 18px;
overflow:hidden;
border-radius:99px;
background:rgba(255,255,255,.13);
}
.student-goal-progress i{
display:block;
width:0;
height:100%;
border-radius:inherit;
background:linear-gradient(90deg,#77e1cd,#e0f58e);
transition:width .35s ease;
}
.student-today-mini-list{
display:grid;
grid-template-columns:1fr;
gap:8px;
}
.student-today-mini-list span{
display:flex;
align-items:center;
gap:8px;
min-height:40px;
padding:8px 10px;
border:1px solid rgba(255,255,255,.10);
border-radius:11px;
background:rgba(255,255,255,.07);
color:#e2f2f0;
font-size:12.5px;
font-weight:600;
}
.student-today-mini-list span.done{
background:rgba(209,251,231,.13);
color:#fff;
}
.student-today-mini-list i{
display:grid;
place-items:center;
width:20px;
height:20px;
border-radius:50%;
background:rgba(255,255,255,.13);
font-style:normal;
font-weight:800;
}
.student-today-mini-list .done i{
background:#68dbb8;
color:#0a635e;
}
.student-today-quote{
margin-top:16px;
padding:12px 13px;
border-radius:12px;
background:rgba(255,255,255,.09);
color:#d9f0ee;
font-size:12.5px;
line-height:1.45;
}
/* Dashboard layout */
.student-home-dashboard{
display:grid;
gap:14px;
margin:18px 0 34px;
}
.student-dashboard-top{
display:grid;
grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr);
gap:14px;
}
.student-dashboard-main{
display:grid;
grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
gap:14px;
}
.student-dash-card{
min-width:0;
padding:20px;
border:1px solid #dfe8e4;
border-radius:22px;
background:rgba(255,255,255,.94);
box-shadow:0 10px 26px rgba(26,65,56,.06);
}
.student-card-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:14px;
}
.student-card-head>div{
display:flex;
align-items:center;
gap:9px;
}
.student-card-head strong{
color:#193b34;
font-size:18px;
line-height:1.2;
}
.student-card-icon{
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:11px;
background:#edf8f4;
font-size:18px;
}
.student-period-pill,
.student-streak-number{
display:inline-flex;
align-items:center;
min-height:30px;
padding:5px 9px;
border-radius:999px;
background:#f0f7f4;
color:#577068;
font-size:11px;
font-weight:700;
}
.student-streak-number{
background:#fff3e7;
color:#b45b1e;
font-size:12px;
}
.student-streak-days{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:7px;
}
.student-streak-day{
display:grid;
place-items:center;
min-width:0;
padding:9px 4px;
border:1px solid #e4ebe7;
border-radius:12px;
background:#f9fbfa;
color:#81908a;
}
.student-streak-day small{
font-size:10px;
font-weight:700;
}
.student-streak-day strong{
margin:4px 0;
font-size:10px;
font-weight:600;
}
.student-streak-day span{
display:grid;
place-items:center;
width:24px;
height:24px;
border-radius:50%;
background:#eef2ef;
font-size:12px;
font-weight:800;
}
.student-streak-day.done{
border-color:#c8e8dc;
background:#effaf6;
color:#217165;
}
.student-streak-day.done span{
background:#29ad84;
color:#fff;
}
.student-streak-day.today{
outline:2px solid rgba(217,153,50,.23);
background:#fffaf0;
}
.student-streak-card p{
margin:12px 0 0;
color:#75827d;
font-size:12px;
}
.student-summary-grid{
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
gap:8px;
}
.student-summary-grid>div{
min-width:0;
min-height:112px;
padding:13px 11px;
border-radius:15px;
background:linear-gradient(180deg,#f6fbf9,#eef8f4);
}
.student-summary-grid>div:nth-child(2){
background:linear-gradient(180deg,#f5fbef,#edf8e7);
}
.student-summary-grid>div:nth-child(3){
background:linear-gradient(180deg,#f4f6ff,#eceffd);
}
.student-summary-grid>div:nth-child(4){
background:linear-gradient(180deg,#fff7ef,#fff0e5);
}
.student-summary-grid>div:nth-child(5){
background:linear-gradient(180deg,#fff6f5,#fdeceb);
}
.student-summary-grid span{
font-size:19px;
}
.student-summary-grid strong{
display:block;
margin:5px 0 2px;
color:#173b35;
font-size:25px;
line-height:1;
}
.student-summary-grid small{
display:block;
color:#74827d;
font-size:10.5px;
line-height:1.35;
}
.student-card-sub{
margin:-5px 0 14px;
color:#7b8782;
font-size:12px;
}
.student-text-link{
border:0!important;
background:transparent!important;
color:#0f8478!important;
font-size:11.5px;
font-weight:700;
}
.student-roadmap-list{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:9px;
}
.student-roadmap-item{
position:relative;
display:grid;
grid-template-columns:auto 1fr auto;
gap:9px;
align-items:center;
min-height:126px;
padding:13px;
border:1px solid #e0e8e4!important;
border-radius:16px!important;
background:#fafcfa!important;
color:#29433d!important;
text-align:left;
}
.student-roadmap-item.completed{
border-color:#bde2d3!important;
background:linear-gradient(180deg,#f3fcf8,#eaf8f2)!important;
}
.student-roadmap-item.current{
border-color:#e5bc68!important;
background:linear-gradient(180deg,#fffdf8,#fff7e9)!important;
box-shadow:0 8px 18px rgba(159,113,27,.07);
}
.student-roadmap-item.locked{
opacity:.66;
cursor:not-allowed;
}
.student-roadmap-number{
display:grid;
place-items:center;
width:34px;
height:34px;
border-radius:11px;
background:#eaf5f1;
color:#0d776c;
font-size:11px;
font-weight:800;
}
.student-roadmap-copy{
min-width:0;
}
.student-roadmap-copy small,
.student-roadmap-copy strong,
.student-roadmap-copy em{
display:block;
}
.student-roadmap-copy small{
margin-bottom:4px;
color:#0e8d7f;
font-size:9.5px;
font-weight:800;
letter-spacing:.06em;
}
.student-roadmap-copy strong{
overflow:hidden;
color:#24413b;
font-size:12px;
line-height:1.32;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
}
.student-roadmap-copy em{
margin-top:5px;
color:#84908c;
font-size:10px;
font-style:normal;
}
.student-roadmap-status{
font-size:16px;
}
.student-next-actions{
display:grid;
gap:8px;
}
.student-next-action{
display:grid;
grid-template-columns:34px minmax(0,1fr) auto;
align-items:center;
gap:9px;
min-height:48px;
padding:8px 11px;
border:1px solid #e1e9e5!important;
border-radius:12px!important;
background:#f8fbf9!important;
color:#31514a!important;
text-align:left;
}
.student-next-action:first-child{
border-color:#c8e5db!important;
background:#effaf6!important;
}
.student-next-action>span{
display:grid;
place-items:center;
width:32px;
height:32px;
border-radius:10px;
background:#fff;
font-size:16px;
}
.student-next-action strong{
min-width:0;
font-size:11.5px;
line-height:1.35;
}
.student-next-action i{
color:#0d8075;
font-style:normal;
font-weight:800;
}
.student-motivation-quote{
margin:12px 0 0;
padding:11px 13px;
border-left:3px solid #60b998;
border-radius:10px;
background:#f3faf7;
color:#557069;
font-size:12px;
font-style:italic;
}
.student-progress-banner{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
min-height:132px;
padding:24px 26px;
overflow:hidden;
border:1px solid #bcdedd;
border-radius:22px;
background:
radial-gradient(circle at 86% 100%,rgba(15,138,167,.16),transparent 30%),
radial-gradient(circle at 73% 100%,rgba(22,155,177,.12),transparent 25%),
linear-gradient(110deg,#f6fdfb,#e8f8f8);
}
.student-progress-banner-kicker{
display:block;
margin-bottom:6px;
color:#0f8e80;
font-size:10.5px;
font-weight:800;
letter-spacing:.09em;
}
.student-progress-banner strong{
display:block;
color:#173c36;
font-size:22px;
line-height:1.28;
}
.student-progress-banner p{
margin:6px 0 0;
color:#71817b;
font-size:12px;
}
.student-dashboard-empty{
padding:16px;
border:1px dashed #d9e4df;
border-radius:12px;
color:#82908a;
font-size:12px;
text-align:center;
}
/* Approved student home becomes a real dashboard, not marketing page */
body.student-experience .home-container{
padding-bottom:32px!important;
}
body.student-experience #trialPilotCard{
margin-top:16px;
}
body.student-experience .home-hero{
margin-bottom:0!important;
}
/* Public home gets richer visual density without becoming busy */
body.public-experience .home-hero{
margin-bottom:10px!important;
}
body.public-experience .home-hero-copy{
box-shadow:0 18px 42px rgba(35,76,61,.09)!important;
}
@media(max-width:1200px){
.public-feature-ribbon{
grid-template-columns:repeat(3,1fr);
}
.student-summary-grid{
grid-template-columns:repeat(3,1fr);
}
.student-roadmap-list{
grid-template-columns:repeat(2,1fr);
}
}
@media(max-width:900px){
.student-experience .home-hero{
grid-template-columns:1fr!important;
}
.student-today-hero{
min-height:0;
}
.student-dashboard-top,
.student-dashboard-main{
grid-template-columns:1fr;
}
}
@media(max-width:760px){
.public-feature-ribbon{
grid-template-columns:1fr 1fr;
padding:8px;
}
.public-feature-ribbon>div{
min-height:72px;
}
.student-today-hero{
padding:20px;
border-radius:22px;
}
.student-summary-grid{
grid-template-columns:repeat(2,1fr);
}
.student-summary-grid>div{
min-height:100px;
}
.student-roadmap-list{
grid-template-columns:1fr;
}
.student-progress-banner{
align-items:flex-start;
flex-direction:column;
}
.student-progress-banner .primary{
width:100%;
}
}
@media(max-width:480px){
.public-feature-ribbon{
grid-template-columns:1fr;
}
.student-streak-days{
gap:4px;
}
.student-streak-day{
padding:7px 2px;
}
.student-summary-grid{
grid-template-columns:1fr 1fr;
}
}
/* =====================================================================
v6.15.0 — APPLY POLISHED 3D PUBLIC + STUDENT DESIGN
===================================================================== */
.home-hero{align-items:stretch!important;gap:14px!important}
.home-hero-copy{
position:relative!important;isolation:isolate;overflow:hidden!important;
min-height:390px!important;padding:46px 50px!important;border-radius:28px!important;
border:1px solid rgba(205,225,215,.95)!important;
box-shadow:0 18px 44px rgba(28,68,58,.10)!important;
}
.home-hero-copy::before,.home-hero-copy::after{pointer-events:none}
.home-hero-copy .eyebrow,.home-hero-copy h1,.home-hero-copy p,.home-motivation-line,.home-hero-visual-chips,.hero-actions{position:relative;z-index:3}
.home-hero-copy h1{max-width:760px!important;margin-top:10px!important;font-size:clamp(44px,4.8vw,68px)!important;line-height:1.02!important}
.home-hero-copy p{max-width:680px!important;font-size:16px!important;line-height:1.68!important}
.home-motivation-line{margin-top:18px!important;background:rgba(255,255,255,.80)!important;border-color:rgba(202,224,214,.95)!important;box-shadow:0 8px 20px rgba(24,68,56,.05)}
.home-hero-visual-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.home-hero-visual-chips span{display:inline-flex;min-height:32px;align-items:center;padding:6px 10px;border:1px solid rgba(205,225,215,.92);border-radius:999px;background:rgba(255,255,255,.74);color:#456159;font-size:11px;font-weight:700;backdrop-filter:blur(5px)}
/* OUTSIDE — bamboo 3D */
body.public-experience .home-hero{grid-template-columns:1fr!important}
body.public-experience .garden-card.public-home-only{display:none!important}
body.public-experience .home-hero-copy{
min-height:430px!important;padding-right:48%!important;
background-image:
linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(252,255,252,.96) 39%,rgba(249,253,249,.70) 58%,rgba(249,253,249,.10) 78%),
url("/images/home-public-bamboo.webp")!important;
background-size:cover!important;background-position:center!important;
}
body.public-experience .home-hero-copy::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 40%),radial-gradient(circle at 7% 12%,rgba(112,184,113,.08),transparent 22%)}
body.public-experience .home-hero-copy::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:92px;background:linear-gradient(180deg,transparent,rgba(241,249,243,.55))}
body.public-experience .home-hero h1 span{color:#0f8f68!important}
body.public-experience .public-feature-ribbon{margin-top:0!important;background:rgba(255,255,255,.94)!important;border-color:#dbe9e2!important}
body.public-experience .public-feature-ribbon>div{background:linear-gradient(180deg,#fbfefc,#f3f9f5)!important}
/* INSIDE — sea 3D */
body.student-experience .home-hero{grid-template-columns:minmax(0,1.38fr) minmax(330px,.62fr)!important}
body.student-experience .home-hero-copy{
min-height:400px!important;padding-right:42%!important;
background-image:
linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(246,254,255,.94) 43%,rgba(232,249,251,.52) 66%,rgba(228,247,250,.08) 82%),
url("/images/home-student-sea.webp")!important;
background-size:cover!important;background-position:center!important;border-color:#c7e4e5!important;
}
body.student-experience .home-hero-copy::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 45%)}
body.student-experience .home-hero-copy::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:88px;background:linear-gradient(180deg,transparent,rgba(226,247,248,.55))}
body.student-experience .home-hero h1 span{color:#078c9a!important}
body.student-experience .home-hero-visual-chips span{border-color:#cbe7e7;color:#44666b;background:rgba(249,255,255,.78)}
/* Goal card */
.student-today-hero{
min-height:400px!important;padding:24px!important;border:1px solid #d7e9e5!important;border-radius:28px!important;
background:radial-gradient(circle at 100% 10%,rgba(104,204,171,.14),transparent 30%),linear-gradient(180deg,#ffffff 0%,#f8fcfa 100%)!important;
color:#1f4038!important;box-shadow:0 18px 42px rgba(28,68,58,.08)!important;
}
.student-card-kicker{color:#0b8c79!important}
.student-today-head strong{color:#203e37!important}
.student-goal-count{border-color:#d9ebe5!important;background:#eef8f4!important;color:#0b7e70!important}
.student-goal-progress{background:#edf2ef!important}
.student-goal-progress i{background:linear-gradient(90deg,#19b68b,#60d7b4)!important}
.student-today-mini-list span{border-color:#e1eae6!important;background:#fafcfa!important;color:#536963!important}
.student-today-mini-list span.done{border-color:#cbe7dc!important;background:#eff9f5!important;color:#28584e!important}
.student-today-mini-list i{background:#eef2ef!important;color:#83918c!important}
.student-today-mini-list .done i{background:#2db28b!important;color:#fff!important}
.student-today-quote{background:#f3faf7!important;color:#55736b!important;border:1px solid #dfece7}
/* Dashboard density */
.student-home-dashboard{gap:12px!important;margin-top:14px!important}
.student-dashboard-top{grid-template-columns:minmax(340px,.70fr) minmax(0,1.30fr)!important;gap:12px!important}
.student-dashboard-main{grid-template-columns:minmax(0,1fr) minmax(380px,.92fr)!important;gap:12px!important}
.student-dashboard-bottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.78fr);gap:12px}
.student-dash-card{padding:18px!important;border-radius:20px!important;box-shadow:0 10px 28px rgba(28,68,58,.055)!important}
.student-card-head{margin-bottom:12px!important}.student-card-head strong{font-size:17px!important}
.student-streak-days{gap:6px!important}.student-streak-day{min-height:78px}
.student-summary-grid{gap:7px!important}.student-summary-grid>div{min-height:102px!important}
.student-roadmap-list{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
.student-roadmap-item{min-height:118px!important;padding:12px!important}
.student-next-actions{gap:7px!important}.student-next-action{min-height:46px!important}
/* Achievements */
.student-achievement-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.student-achievement{display:grid;place-items:center;min-height:144px;padding:12px;border:1px solid #e3e9e6;border-radius:16px;background:linear-gradient(180deg,#fafcfb,#f4f8f6);text-align:center}
.student-achievement.achieved{border-color:#c7e7d8;background:linear-gradient(180deg,#f3fcf8,#eaf8f1)}
.student-achievement-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:8px;border-radius:16px;background:#edf3f0;font-size:27px;filter:saturate(.72)}
.student-achievement.achieved .student-achievement-icon{background:#dff5ea;filter:none}
.student-achievement strong{color:#27423c;font-size:11.5px;line-height:1.3}
.student-achievement small{margin:5px 0 7px;color:#7b8883;font-size:10px}
.student-achievement i{display:block;width:100%;height:6px;overflow:hidden;border-radius:999px;background:#e7ece9}
.student-achievement i b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#19ad83,#63d4ad)}
.student-progress-banner{
min-height:100%!important;
background-image:linear-gradient(90deg,rgba(248,254,253,.96),rgba(236,249,250,.70)),url("/images/home-student-sea.webp")!important;
background-size:cover!important;background-position:70% center!important;border-color:#c7e3e3!important;
}
.student-progress-banner>div{max-width:520px}
/* Responsive */
@media(max-width:1200px){
body.public-experience .home-hero-copy{padding-right:40%!important}
body.student-experience .home-hero-copy{padding-right:36%!important}
.student-achievement-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:980px){
body.public-experience .home-hero-copy,body.student-experience .home-hero-copy{padding-right:26px!important;background-position:67% center!important}
body.public-experience .home-hero-copy::before,body.student-experience .home-hero-copy::before{background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.84) 62%,rgba(255,255,255,.38))!important}
body.student-experience .home-hero{grid-template-columns:1fr!important}
.student-dashboard-bottom{grid-template-columns:1fr}
}
@media(max-width:760px){
.home-hero-copy{min-height:360px!important;padding:28px 20px!important}
.home-hero-copy h1{font-size:clamp(36px,10vw,48px)!important}
.home-hero-visual-chips{display:none}
body.public-experience .home-hero-copy,body.student-experience .home-hero-copy{background-position:72% center!important}
.student-achievement-grid{grid-template-columns:1fr 1fr}
.student-roadmap-list{grid-template-columns:1fr!important}
}
/* ======================================================================
v6.15.1 — BAMBOO OUTSIDE · SEA INSIDE · EN MALE · ZH FEMALE
====================================================================== */
/* ---------- Outside / public ---------- */
body.public-experience #view-home{
background:
radial-gradient(circle at 6% 0%,rgba(59,135,71,.10),transparent 24%),
radial-gradient(circle at 96% 4%,rgba(38,126,83,.07),transparent 22%),
linear-gradient(180deg,#fbfdf9 0%,#f6faf5 100%)!important;
}
body.public-experience .home-hero{
grid-template-columns:minmax(0,1.4fr) minmax(310px,.6fr)!important;
gap:14px!important;
align-items:stretch!important;
padding-top:24px!important;
}
body.public-experience .home-hero-copy{
min-height:430px!important;
padding:48px 50px!important;
border-radius:28px!important;
border-color:#cfe0d5!important;
background:
linear-gradient(90deg,
rgba(255,255,252,.97) 0%,
rgba(255,255,252,.93) 43%,
rgba(255,255,252,.65) 62%,
rgba(255,255,252,.15) 100%),
url("/images/home-public-bamboo-clean.webp") center/cover no-repeat!important;
box-shadow:0 18px 42px rgba(35,76,61,.085)!important;
}
body.public-experience .home-hero-copy::before,
body.public-experience .home-hero-copy::after{
display:none!important;
}
body.public-experience .home-hero h1{
max-width:650px!important;
font-size:clamp(46px,4.9vw,70px)!important;
line-height:.99!important;
}
body.public-experience .home-hero h1 span{
color:#0a926d!important;
}
body.public-experience .home-hero p{
max-width:640px!important;
color:#52665f!important;
}
body.public-experience .home-motivation-line{
background:rgba(255,255,255,.78)!important;
border-color:#cfe1d8!important;
color:#456057!important;
}
.public-language-selector{
display:grid;
grid-template-rows:1fr 1fr;
gap:12px;
min-width:0;
}
.public-language-card{
position:relative;
isolation:isolate;
overflow:hidden;
min-height:205px;
padding:0!important;
border:1px solid #d8e3dd!important;
border-radius:24px!important;
background:#fff!important;
box-shadow:0 12px 30px rgba(31,68,57,.07)!important;
cursor:pointer;
text-align:left;
}
.public-language-card img{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transition:transform .28s ease;
}
.public-language-card:hover img{
transform:scale(1.035);
}
.public-language-card::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(0deg,rgba(9,35,31,.77),rgba(9,35,31,.08) 62%);
z-index:1;
}
.public-language-overlay{
position:absolute;
left:16px;
right:16px;
bottom:14px;
z-index:2;
color:#fff;
}
.public-language-overlay small,
.public-language-overlay strong,
.public-language-overlay em,
.public-language-overlay b{
display:block;
}
.public-language-overlay small{
margin-bottom:4px;
color:#dff5ee;
font-size:9.5px;
font-weight:800;
letter-spacing:.08em;
}
.public-language-overlay strong{
font-size:24px;
line-height:1.05;
}
.public-language-overlay em{
margin-top:4px;
color:#eef7f4;
font-size:10.5px;
font-style:normal;
}
.public-language-overlay b{
margin-top:8px;
color:#fff5c9;
font-size:11px;
}
.public-language-card.chinese-card{
border-color:#ead8cc!important;
}
.public-language-card.chinese-card::after{
background:linear-gradient(0deg,rgba(77,30,24,.73),rgba(77,30,24,.04) 64%);
}
/* Public ribbon: more finished, less empty */
body.public-experience .public-feature-ribbon{
margin-top:0!important;
grid-template-columns:repeat(6,minmax(0,1fr))!important;
border-color:#dce7e1!important;
background:rgba(255,255,255,.94)!important;
}
body.public-experience .public-feature-ribbon>div{
min-height:76px!important;
}
/* ---------- Approved student / inside = sea ---------- */
body.student-experience .home-hero{
grid-template-columns:minmax(0,1.28fr) minmax(330px,.72fr)!important;
gap:14px!important;
padding-top:24px!important;
}
body.student-experience .home-hero-copy{
min-height:420px!important;
padding:46px 48px!important;
border-radius:28px!important;
background:
linear-gradient(90deg,
rgba(252,255,255,.98) 0%,
rgba(249,255,255,.92) 44%,
rgba(245,254,255,.48) 66%,
rgba(245,254,255,.08) 100%),
url("/images/home-student-sea.webp") center/cover no-repeat!important;
}
body.student-experience .home-hero-copy::before,
body.student-experience .home-hero-copy::after{
display:none!important;
}
body.student-experience .student-today-hero{
border-radius:28px!important;
min-height:420px!important;
align-self:stretch;
}
/* ---------- English / Chinese track hero ---------- */
.track-hero{
position:relative;
overflow:hidden;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(340px,.72fr)!important;
gap:18px!important;
min-height:330px;
padding:34px 36px!important;
border-radius:28px!important;
border-color:#d6e4df!important;
background:
radial-gradient(circle at 12% 0%,rgba(42,158,143,.08),transparent 30%),
linear-gradient(135deg,#ffffff,#f6fbf9)!important;
}
.track-hero::after{
display:none!important;
}
.track-hero-copy{
align-self:center;
position:relative;
z-index:2;
}
.track-hero h1{
max-width:760px;
margin:7px 0 10px!important;
font-size:clamp(40px,4.2vw,60px)!important;
line-height:1.02!important;
}
.track-hero p{
max-width:720px;
margin:0!important;
color:#687871!important;
font-size:15.5px!important;
line-height:1.65!important;
}
.track-hero-note{
display:inline-flex;
margin-top:18px;
padding:10px 13px;
border:1px solid #d7e7e1;
border-radius:12px;
background:#f7fbf9;
color:#47645c;
font-size:12px;
font-weight:600;
}
.track-hero-media{
position:relative;
min-height:260px;
overflow:hidden;
border-radius:22px;
border:1px solid #dbe6e1;
background:#eef8f5;
box-shadow:0 10px 25px rgba(30,72,61,.07);
}
.track-hero-media img{
width:100%;
height:100%;
min-height:260px;
object-fit:cover;
display:block;
}
.track-hero-media::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(0deg,rgba(8,40,36,.28),transparent 47%);
pointer-events:none;
}
.track-hero-media span{
position:absolute;
left:14px;
right:14px;
bottom:13px;
z-index:2;
display:inline-flex;
width:max-content;
max-width:calc(100% - 28px);
padding:7px 10px;
border-radius:999px;
background:rgba(255,255,255,.88);
color:#27463f;
font-size:10.5px;
font-weight:800;
backdrop-filter:blur(7px);
}
body.track-theme-en #view-track{
background:
linear-gradient(180deg,rgba(229,247,251,.40),transparent 560px);
}
body.track-theme-en .track-hero{
border-color:#c8e1e4!important;
background:
linear-gradient(110deg,#ffffff 0%,#f3fbfb 70%,#eef9fb 100%)!important;
}
body.track-theme-en .track-hero-note{
border-color:#cce5e6;
background:#f0fbfb;
color:#35656a;
}
body.track-theme-en .track-hero-media{
border-color:#bae0e5;
}
body.track-theme-zh #view-track{
background:
linear-gradient(180deg,rgba(250,238,232,.35),transparent 560px);
}
body.track-theme-zh .track-hero{
border-color:#ead8cf!important;
background:
linear-gradient(110deg,#ffffff 0%,#fff9f6 69%,#fff3ee 100%)!important;
}
body.track-theme-zh .track-hero-note{
border-color:#ecd8ce;
background:#fff8f4;
color:#795448;
}
body.track-theme-zh .track-hero-media{
border-color:#ead0c2;
}
/* Keep the old emoji node out of layout if any legacy code references it. */
.track-large-icon{
display:none!important;
}
/* ---------- Dashboard polish ---------- */
.student-home-dashboard{
gap:13px!important;
}
.student-dashboard-top,
.student-dashboard-main,
.student-dashboard-bottom{
gap:13px!important;
}
.student-dash-card{
border-color:#dfe8e4!important;
box-shadow:0 9px 24px rgba(29,65,56,.052)!important;
}
.student-achievement-card{
background:
linear-gradient(180deg,#ffffff 0%,#fbfdfc 100%)!important;
}
.student-progress-banner{
background:
linear-gradient(90deg,rgba(247,253,252,.96),rgba(230,248,250,.76)),
url("/images/home-student-sea.webp") center 58%/cover no-repeat!important;
}
/* ---------- Responsive ---------- */
@media(max-width:1180px){
body.public-experience .home-hero,
body.student-experience .home-hero{
grid-template-columns:1fr!important;
}
.public-language-selector{
grid-template-columns:1fr 1fr;
grid-template-rows:none;
}
.public-language-card{
min-height:235px;
}
.track-hero{
grid-template-columns:1fr!important;
}
.track-hero-media{
min-height:300px;
}
}
@media(max-width:760px){
body.public-experience .home-hero-copy,
body.student-experience .home-hero-copy{
min-height:350px!important;
padding:28px 22px!important;
background-position:center!important;
}
body.public-experience .home-hero-copy{
background:
linear-gradient(90deg,rgba(255,255,252,.97),rgba(255,255,252,.89) 70%,rgba(255,255,252,.28)),
url("/images/home-public-bamboo-clean.webp") center/cover no-repeat!important;
}
body.student-experience .home-hero-copy{
background:
linear-gradient(90deg,rgba(252,255,255,.97),rgba(252,255,255,.87) 68%,rgba(252,255,255,.26)),
url("/images/home-student-sea.webp") center/cover no-repeat!important;
}
.public-language-selector{
grid-template-columns:1fr;
}
.public-language-card{
min-height:210px;
}
body.student-experience .student-today-hero{
min-height:0!important;
}
.track-hero{
padding:24px 18px!important;
min-height:0;
}
.track-hero h1{
font-size:clamp(34px,10vw,46px)!important;
}
.track-hero-media,
.track-hero-media img{
min-height:230px;
}
body.public-experience .public-feature-ribbon{
grid-template-columns:1fr 1fr!important;
}
}
@media(max-width:480px){
body.public-experience .public-feature-ribbon{
grid-template-columns:1fr!important;
}
.public-language-card{
min-height:195px;
}
}
/* ======================================================================
v6.15.2 — MOBILE CLARITY · LESS PUBLIC DENSITY · CLEAN STUDENT HERO
====================================================================== */
.name-order-hint{font-weight:500;color:#71807b;font-size:.82em}
/* Public homepage: keep the strongest messages, remove repeated selling points. */
body.public-experience .public-feature-ribbon>div:nth-child(n+4),
body.public-experience .value-grid>.value-card:nth-child(n+4){display:none!important}
body.public-experience .public-feature-ribbon{grid-template-columns:repeat(3,minmax(0,1fr))!important}
body.public-experience .value-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
body.public-experience .value-card{min-height:0!important}
body.public-experience .value-card p{line-height:1.55!important}
/* Student hero: never place live text over artwork that already contains text. */
body.student-experience .home-hero-copy{
position:relative!important;
isolation:isolate;
overflow:hidden!important;
min-height:390px!important;
padding:42px 44% 42px 40px!important;
background:linear-gradient(135deg,#ffffff 0%,#f4fbfb 100%)!important;
}
body.student-experience .home-hero-copy::before{display:block!important;content:"";position:absolute;z-index:0;inset:0 0 0 auto;width:41%;background:url("/images/track-english-male.webp") 64% center/cover no-repeat!important;opacity:.98}
body.student-experience .home-hero-copy::after{display:block!important;content:"";position:absolute;z-index:1;top:0;bottom:0;right:35%;width:12%;background:linear-gradient(90deg,#f7fcfc 0%,rgba(247,252,252,.82) 35%,rgba(247,252,252,0) 100%)!important}
body.student-experience .home-hero-copy>*{position:relative;z-index:2}
body.student-experience .home-hero-copy h1{font-size:clamp(42px,4.2vw,66px)!important;line-height:1.02!important;max-width:690px}
body.student-experience .home-hero-copy p{max-width:610px!important;line-height:1.65!important}
@media(max-width:1180px){
body.student-experience .home-hero-copy{padding-right:42%!important}
}
@media(max-width:760px){
body.public-experience .public-feature-ribbon{grid-template-columns:1fr!important}
body.public-experience .value-grid{grid-template-columns:1fr!important}
body.public-experience .value-section .section-subtitle{max-width:34ch}
body.student-experience .home-hero-copy{
min-height:0!important;
padding:28px 22px 188px!important;
background:linear-gradient(180deg,#ffffff 0%,#f5fbfb 62%,#edf8f8 100%)!important;
}
body.student-experience .home-hero-copy::before{top:auto;left:0;right:0;bottom:0;width:100%;height:160px;background:url("/images/track-english-male.webp") 58% 42%/cover no-repeat!important}
body.student-experience .home-hero-copy::after{top:auto;left:0;right:0;bottom:132px;width:100%;height:34px;background:linear-gradient(180deg,#f5fbfb,rgba(245,251,251,0))!important}
body.student-experience .home-hero-copy h1{font-size:clamp(36px,10.2vw,48px)!important;line-height:1.04!important}
body.student-experience .home-hero-copy p{font-size:17px!important;line-height:1.55!important}
body.student-experience .home-motivation-line{font-size:15px!important;line-height:1.45!important}
}
@media(max-width:390px){
body.student-experience .home-hero-copy{padding-left:18px!important;padding-right:18px!important}
body.student-experience .home-hero-copy h1{font-size:35px!important}
}
/* ======================================================================
v6.15.6 — PUBLIC ICON & TYPOGRAPHY POLISH
====================================================================== */
/* Public home: smoother typography balance on desktop */
body.public-experience .eyebrow{font-size:13px!important;letter-spacing:.085em!important}
body.public-experience .home-hero h1{font-size:clamp(44px,4.45vw,64px)!important;line-height:1.01!important;max-width:620px!important}
body.public-experience .home-hero p{font-size:18px!important;line-height:1.62!important;max-width:660px!important}
body.public-experience .home-motivation-line{font-size:14.5px!important;line-height:1.5!important;padding:10px 15px!important}
body.public-experience .section-title-row h2,
body.public-experience .plus-value-copy h2{font-size:clamp(34px,3.1vw,52px)!important;letter-spacing:-.035em!important;line-height:1.12!important}
body.public-experience .section-subtitle{font-size:14px!important;line-height:1.65!important;color:#6c726d!important;max-width:72ch}
/* Public explanation / feature typography */
body.public-experience .public-feature-ribbon strong{font-size:13.5px!important;line-height:1.32!important}
body.public-experience .public-feature-ribbon small{font-size:11.5px!important;line-height:1.42!important}
body.public-experience .value-card strong{font-size:20px!important;line-height:1.26!important}
body.public-experience .value-card p{font-size:14px!important;line-height:1.6!important}
/* Language cards on the hero: small text was too tiny */
body.public-experience .public-language-overlay small{font-size:11px!important;letter-spacing:.08em!important;margin-bottom:5px!important}
body.public-experience .public-language-overlay strong{font-size:26px!important;line-height:1.06!important}
body.public-experience .public-language-overlay em{font-size:13px!important;line-height:1.45!important;margin-top:5px!important}
body.public-experience .public-language-overlay b{font-size:13px!important;margin-top:9px!important}
/* Replace plain GB/CN flags with cleaner language badges */
.track-grid{gap:16px!important}
.track-card{grid-template-columns:64px minmax(0,1fr) 34px!important;padding:24px 24px!important}
.track-emoji{width:56px!important;height:56px!important;border-radius:18px!important;font-size:0!important;border:1px solid #d7e8e2!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.85)!important}
.track-emoji-en{background:linear-gradient(145deg,#edf8f3,#e1f4ee)!important}
.track-emoji-zh{background:linear-gradient(145deg,#fff4ed,#fdeadd)!important;border-color:#edd8cb!important}
.track-badge{display:grid;place-items:center;width:100%;height:100%;font-weight:900;font-size:22px;letter-spacing:.03em;color:#0c816f}
.track-emoji-zh .track-badge{font-size:25px;color:#a24d34}
.track-kicker{font-size:11px!important;letter-spacing:.08em!important}
.track-card h3{font-size:21px!important;line-height:1.18!important}
.track-card p{font-size:13.5px!important;line-height:1.55!important;color:#6f716d!important}
/* Header name: keep the Vietnamese full name readable on desktop */
@media(min-width:1200px){
.user-chip{max-width:330px!important;min-width:200px!important}
#userName{max-width:210px!important;font-size:14px!important}
}
/* Public mobile: keep readability without giant jumps */
@media(max-width:760px){
body.public-experience .home-hero h1{font-size:clamp(36px,9.3vw,48px)!important}
body.public-experience .home-hero p{font-size:16px!important;line-height:1.58!important}
body.public-experience .home-motivation-line{font-size:13px!important}
body.public-experience .section-title-row h2,
body.public-experience .plus-value-copy h2{font-size:clamp(28px,7.7vw,38px)!important}
body.public-experience .section-subtitle{font-size:13px!important}
.track-card{grid-template-columns:54px minmax(0,1fr) 30px!important;padding:20px 18px!important}
.track-emoji{width:46px!important;height:46px!important;border-radius:15px!important}
.track-badge{font-size:18px!important}
.track-emoji-zh .track-badge{font-size:21px!important}
.track-card h3{font-size:18px!important}
.track-card p{font-size:12.5px!important}
body.public-experience .public-language-overlay strong{font-size:23px!important}
body.public-experience .public-language-overlay em,
body.public-experience .public-language-overlay b{font-size:12px!important}
}
/* ======================================================================
v6.15.7 — STUDENT VALUE-FIRST DASHBOARD
Priority: learn now > next action > habit/progress > motivation > selling
====================================================================== */
/* Approved students should never see public marketing blocks because a later
display:block!important rule can otherwise beat the generic .hidden class. */
body.student-experience .public-home-only{display:none!important}
/* Student hero is now a compact welcome + goal area, not the whole product. */
body.student-experience .home-hero{
grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr)!important;
gap:12px!important;
padding-top:18px!important;
}
body.student-experience .home-hero-copy{
min-height:350px!important;
padding:36px 42% 34px 36px!important;
}
body.student-experience .home-hero-copy h1{
font-size:clamp(38px,3.7vw,56px)!important;
line-height:1.025!important;
max-width:620px!important;
}
body.student-experience .home-hero-copy p{
font-size:15.5px!important;
line-height:1.6!important;
}
body.student-experience .student-today-hero{
min-height:350px!important;
padding:22px!important;
}
/* Value-first dashboard order. */
.student-home-dashboard{
gap:12px!important;
margin-top:12px!important;
}
.student-dashboard-priority{
display:block;
}
.student-dashboard-priority .student-next-card{
padding:18px!important;
border-color:#c5e3d9!important;
background:linear-gradient(180deg,#ffffff,#f6fcf9)!important;
}
.student-dashboard-priority .student-card-head strong{
font-size:20px!important;
}
.student-dashboard-priority .student-next-actions{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px!important;
}
.student-dashboard-priority .student-next-action{
min-height:58px!important;
padding:10px 13px!important;
}
.student-dashboard-priority .student-next-action:first-child{
grid-column:1/-1;
min-height:66px!important;
border-color:#9fd7c6!important;
background:linear-gradient(90deg,#e9f9f4,#f3fcf9)!important;
}
.student-dashboard-priority .student-next-action:first-child strong{
font-size:14px!important;
line-height:1.35!important;
}
.student-dashboard-priority .student-next-action strong{
font-size:12.5px!important;
}
.student-dashboard-priority .student-motivation-quote{
margin-top:10px!important;
}
/* Habit and roadmap are the next layer. */
.student-dashboard-learning{
grid-template-columns:minmax(360px,.72fr) minmax(0,1.28fr)!important;
align-items:start!important;
}
.student-roadmap-card,
.student-streak-card,
.student-summary-card{
align-self:start!important;
}
.student-roadmap-list{
grid-template-columns:repeat(auto-fit,minmax(220px,280px))!important;
justify-content:start!important;
align-items:start!important;
}
.student-roadmap-item{
min-height:112px!important;
padding:12px!important;
}
.student-roadmap-copy strong{
-webkit-line-clamp:3!important;
font-size:12.5px!important;
}
/* Summary is important, but comes after the current roadmap. */
.student-dashboard-summary-row{
display:block;
}
.student-dashboard-summary-row .student-summary-card{
width:100%;
}
.student-dashboard-summary-row .student-summary-grid{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
/* Motivation banner is deliberately demoted and visually quieter. */
.student-dashboard-bottom{
grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr)!important;
align-items:start!important;
}
.student-progress-banner{
min-height:0!important;
padding:20px!important;
background:linear-gradient(135deg,#f7fbf9,#edf8f5)!important;
border-color:#d5e7e0!important;
box-shadow:none!important;
}
.student-progress-banner::before,
.student-progress-banner::after{display:none!important}
.student-progress-banner strong{font-size:18px!important}
.student-progress-banner p{font-size:11.5px!important;line-height:1.55!important}
.student-progress-banner .primary{
flex:0 0 auto;
min-width:126px;
padding:11px 14px!important;
}
/* Trial is useful only after the real learning dashboard, so keep it compact. */
body.student-experience #trialPilotCard{
margin-top:18px!important;
}
/* Header: make subscription status horizontal and preserve more of a Vietnamese name. */
@media(min-width:1200px){
.plan-chip{
min-width:0!important;
max-width:none!important;
flex-wrap:nowrap!important;
white-space:nowrap!important;
padding:8px 11px!important;
}
.plan-chip strong{font-size:11px!important;white-space:nowrap!important}
.plan-chip span{font-size:10.5px!important;max-width:none!important;white-space:nowrap!important;line-height:1!important}
.user-chip{max-width:360px!important;min-width:215px!important}
#userName{max-width:225px!important;font-size:13.5px!important}
}
/* Tablet: Goal first, then welcome, then learning actions. */
@media(max-width:900px){
body.student-experience .home-hero{
display:flex!important;
flex-direction:column!important;
}
body.student-experience .student-today-hero{order:1!important}
body.student-experience .home-hero-copy{order:2!important}
.student-dashboard-learning,
.student-dashboard-bottom{
grid-template-columns:1fr!important;
}
.student-dashboard-summary-row .student-summary-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}
/* Mobile: surface learning value immediately and remove decorative bulk. */
@media(max-width:760px){
body.student-experience .home-container{padding-top:10px!important}
body.student-experience .home-hero{
gap:10px!important;
padding-top:8px!important;
}
body.student-experience .student-today-hero{
min-height:0!important;
padding:18px!important;
border-radius:22px!important;
}
body.student-experience .student-today-head strong{
font-size:22px!important;
max-width:220px!important;
}
body.student-experience .student-goal-count{
min-width:60px!important;
height:60px!important;
font-size:22px!important;
}
body.student-experience .student-today-mini-list span{
min-height:46px!important;
font-size:13px!important;
}
body.student-experience .home-hero-copy{
min-height:0!important;
padding:20px!important;
background:linear-gradient(145deg,#ffffff,#f2fbfa)!important;
}
body.student-experience .home-hero-copy::before,
body.student-experience .home-hero-copy::after{
display:none!important;
}
body.student-experience .home-hero-copy h1{
margin:7px 0 0!important;
font-size:30px!important;
line-height:1.08!important;
max-width:none!important;
}
body.student-experience .home-hero-copy p,
body.student-experience .home-motivation-line,
body.student-experience .home-hero-visual-chips{
display:none!important;
}
body.student-experience .home-hero-copy .hero-actions{
display:grid!important;
grid-template-columns:1fr!important;
gap:8px!important;
margin-top:16px!important;
}
body.student-experience .home-hero-copy .hero-actions .cta{
width:100%!important;
min-height:48px!important;
}
.student-dashboard-priority .student-next-card{
padding:16px!important;
}
.student-dashboard-priority .student-card-head{
align-items:flex-start!important;
}
.student-dashboard-priority .student-card-head strong{
font-size:19px!important;
}
.student-dashboard-priority .student-card-head .student-period-pill{
max-width:132px!important;
text-align:center!important;
line-height:1.25!important;
}
.student-dashboard-priority .student-next-actions{
grid-template-columns:1fr!important;
}
.student-dashboard-priority .student-next-action:first-child{
grid-column:auto!important;
min-height:66px!important;
}
.student-dashboard-priority .student-next-action strong{
font-size:13px!important;
line-height:1.38!important;
}
.student-dashboard-learning{
grid-template-columns:1fr!important;
}
.student-roadmap-list{
grid-template-columns:1fr!important;
}
.student-roadmap-item{
min-height:0!important;
width:100%!important;
}
.student-roadmap-copy strong{
display:block!important;
overflow:visible!important;
-webkit-line-clamp:unset!important;
font-size:13px!important;
}
.student-dashboard-summary-row .student-summary-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.student-summary-grid>div{
min-height:96px!important;
}
/* Low-value decoration can wait; do not let it compete with learning actions. */
.student-progress-banner{display:none!important}
/* Compact trial onboarding after all real learning data. */
body.student-experience #trialPilotCard{
padding:15px!important;
gap:12px!important;
}
body.student-experience .trial-pilot-copy h2{
font-size:21px!important;
}
body.student-experience .trial-pilot-copy p{
font-size:13px!important;
line-height:1.5!important;
}
body.student-experience .trial-pilot-steps{
grid-template-columns:1fr 1fr!important;
gap:7px!important;
}
body.student-experience .trial-pilot-step{
min-height:0!important;
padding:10px!important;
}
body.student-experience .trial-pilot-step strong{font-size:13px!important}
body.student-experience .trial-pilot-step small{font-size:11px!important}
body.student-experience .trial-pilot-actions{grid-template-columns:1fr 1fr!important}
body.student-experience .trial-pilot-actions button{font-size:12.5px!important;min-height:42px!important}
body.student-experience .trial-feedback-btn{grid-column:1/-1}
/* Floating support remains available without covering learning content. */
body.student-experience .support-fab{
width:44px!important;
height:44px!important;
min-height:44px!important;
right:10px!important;
bottom:max(82px,calc(env(safe-area-inset-bottom) + 70px))!important;
padding:0!important;
opacity:.94;
}
body.student-experience .support-fab span{font-size:18px!important}
}
@media(max-width:390px){
body.student-experience .student-dashboard-summary-row .student-summary-grid{
grid-template-columns:1fr 1fr!important;
}
body.student-experience .trial-pilot-steps,
body.student-experience .trial-pilot-actions{
grid-template-columns:1fr!important;
}
body.student-experience .trial-feedback-btn{grid-column:auto}
}
/* ======================================================================
v6.15.8 — STUDENT MOBILE PRIORITY POLISH
Goal: show the most useful learning actions earlier and reduce clutter.
====================================================================== */
/* On student dashboards, roadmap is more actionable than streak. */
body.student-experience .student-roadmap-card{order:1!important}
body.student-experience .student-streak-card{order:2!important}
/* Keep approved-student trial guidance present but visually secondary. */
body.student-experience #trialPilotCard{
border-color:#eadfb0!important;
background:linear-gradient(180deg,#fffdf4,#f7fbf8)!important;
}
body.student-experience .trial-pilot-badge{
font-size:11px!important;
letter-spacing:.07em!important;
}
@media(max-width:900px){
/* Reduce redundancy on smaller screens: the mobile account bar already shows login state. */
body.student-experience #accountBanner{display:none!important}
/* Roadmap before streak on tablet/mobile as a more actionable block. */
body.student-experience .student-roadmap-card{order:1!important}
body.student-experience .student-streak-card{order:2!important}
/* Summary before achievements remains unchanged; just tighten rhythm. */
body.student-experience .student-home-dashboard{margin-top:10px!important}
}
@media(max-width:760px){
/* Make the compact welcome card truly compact so Goal + next actions stay dominant. */
body.student-experience .home-hero{gap:8px!important}
body.student-experience .home-hero-copy{padding:18px 18px 16px!important}
body.student-experience .home-hero-copy h1{font-size:28px!important;line-height:1.08!important}
body.student-experience .home-hero-copy .hero-actions{margin-top:12px!important;gap:7px!important}
body.student-experience .home-hero-copy .hero-actions .cta{min-height:46px!important;font-size:16px!important}
/* Next actions are highly valuable; make them a little clearer and remove low-value quote. */
body.student-experience .student-dashboard-priority .student-next-card{padding:15px!important}
body.student-experience .student-dashboard-priority .student-card-head strong{font-size:18px!important}
body.student-experience .student-dashboard-priority .student-next-action{padding:11px 12px!important}
body.student-experience .student-dashboard-priority .student-next-action:first-child{min-height:62px!important}
body.student-experience .student-dashboard-priority .student-motivation-quote{display:none!important}
/* Roadmap should read clearly without looking oversized. */
body.student-experience .student-roadmap-card .student-card-sub{font-size:12.5px!important;line-height:1.5!important}
body.student-experience .student-roadmap-item{padding:12px 14px!important;border-radius:22px!important}
body.student-experience .student-roadmap-copy strong{font-size:12.5px!important;line-height:1.35!important}
/* Streak is useful, but visually calmer than active learning tasks. */
body.student-experience .student-streak-card p{font-size:12.5px!important;line-height:1.45!important}
/* Summary tiles: keep the metrics visible without becoming giant blocks. */
body.student-experience .student-summary-grid{gap:10px!important}
body.student-experience .student-summary-grid>div{min-height:88px!important;padding:12px!important}
body.student-experience .student-summary-grid>div strong{font-size:18px!important}
body.student-experience .student-summary-grid>div small{font-size:11.5px!important;line-height:1.35!important}
/* Trial section stays below the real learning content and becomes more compact. */
body.student-experience #trialPilotCard{padding:14px!important;gap:10px!important;margin-top:14px!important}
body.student-experience .trial-pilot-copy h2{font-size:18px!important;line-height:1.2!important}
body.student-experience .trial-pilot-copy p{font-size:12.5px!important;line-height:1.5!important}
body.student-experience .trial-pilot-steps{grid-template-columns:1fr!important;gap:7px!important}
body.student-experience .trial-pilot-step{padding:10px 11px!important}
body.student-experience .trial-pilot-step small{font-size:11.5px!important;line-height:1.4!important}
body.student-experience .trial-pilot-actions{grid-template-columns:1fr!important;gap:8px!important}
body.student-experience .trial-pilot-actions button{width:100%!important;min-height:40px!important;font-size:12.5px!important}
body.student-experience .trial-feedback-btn{grid-column:auto!important}
/* Floating help should interfere less with buttons and cards. */
body.student-experience .support-fab{
width:42px!important;height:42px!important;min-height:42px!important;
right:10px!important;bottom:max(86px,calc(env(safe-area-inset-bottom) + 74px))!important;
}
body.student-experience .support-fab span{font-size:17px!important}
}
@media(max-width:390px){
body.student-experience .home-hero-copy h1{font-size:26px!important}
body.student-experience .student-dashboard-priority .student-card-head strong{font-size:17px!important}
}
/* ======================================================================
v6.15.9 — HEADER CLEANUP · HIDE VERSION BADGE · PLUS CHIP NO OVERLAP
====================================================================== */
/* Production UI: version / ONLINE status is developer information, not learner value. */
.status-pill{display:none!important}
/* Keep the right side of the desktop header on one clean line. */
.header-actions{
flex-wrap:nowrap!important;
overflow:visible!important;
}
/* PLUS / TRIAL status: compact, horizontal and never allowed to sit on top of the user chip. */
.plan-chip{
flex:0 0 auto!important;
min-width:0!important;
max-width:190px!important;
height:44px!important;
padding:7px 11px!important;
gap:6px!important;
flex-direction:row!important;
align-items:center!important;
justify-content:center!important;
white-space:nowrap!important;
overflow:hidden!important;
}
.plan-chip strong,
.plan-chip span{
display:inline-block!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
line-height:1.15!important;
}
.plan-chip strong{font-size:11.5px!important;flex:0 0 auto}
.plan-chip span{font-size:11px!important;max-width:112px!important}
/* Give the Vietnamese full name usable room, but never let it push over the plan chip. */
.user-chip{
flex:0 1 250px!important;
min-width:150px!important;
max-width:270px!important;
overflow:hidden!important;
}
#userName{
flex:1 1 auto!important;
min-width:0!important;
max-width:none!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
.logout-btn{flex:0 0 auto!important}
/* Slightly reduce desktop header pressure at medium widths. */
@media(max-width:1380px) and (min-width:901px){
.header-inner{gap:10px!important}
.header-actions{gap:6px!important}
.nav-pill{padding-left:10px!important;padding-right:10px!important;font-size:12.5px!important}
.plan-chip{max-width:165px!important;padding-left:9px!important;padding-right:9px!important}
.plan-chip span{max-width:92px!important;font-size:10.5px!important}
.user-chip{flex-basis:220px!important;max-width:235px!important;min-width:140px!important}
#userName{font-size:12.5px!important}
}
/* Mobile/tablet already uses its own account bar; keep the desktop plan chip out of the way. */
@media(max-width:900px){
.plan-chip,
.user-chip{display:none!important}
}
/* ======================================================================
v6.15.9 — STUDENT MOBILE COMPACT LEARNING FLOW
Goal: remove low-value vertical bulk above the actual learning actions.
====================================================================== */
@media(max-width:900px){
/* Account state remains available, but should read like a slim utility bar. */
body.student-experience .mobile-account-bar{
width:calc(100% - 20px)!important;
margin:8px auto 0!important;
min-height:54px!important;
padding:8px 10px!important;
border-radius:16px!important;
align-items:center!important;
}
body.student-experience .mobile-account-main{
display:grid!important;
grid-template-columns:auto minmax(0,1fr)!important;
align-items:center!important;
gap:8px!important;
}
body.student-experience .mobile-account-label{
margin:0!important;
font-size:10px!important;
white-space:nowrap!important;
}
body.student-experience #mobileAccountName{
min-width:0!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
font-size:14px!important;
}
body.student-experience .mobile-account-actions{margin-left:auto!important}
body.student-experience .mobile-logout-btn,
body.student-experience .mobile-login-btn{
min-height:38px!important;
padding:7px 11px!important;
border-radius:12px!important;
font-size:12.5px!important;
}
}
@media(max-width:760px){
/* Goal card stays first, but becomes a compact checklist instead of a tall panel. */
body.student-experience .student-today-hero{
padding:16px!important;
border-radius:20px!important;
}
body.student-experience .student-today-head{align-items:center!important}
body.student-experience .student-today-head strong{
font-size:20px!important;
line-height:1.22!important;
max-width:230px!important;
}
body.student-experience .student-goal-count{
min-width:56px!important;
width:56px!important;
height:56px!important;
border-radius:17px!important;
font-size:20px!important;
}
body.student-experience .student-goal-progress{margin:15px 0 12px!important}
body.student-experience .student-today-mini-list{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:7px!important;
}
body.student-experience .student-today-mini-list span{
min-height:44px!important;
padding:8px 9px!important;
border-radius:12px!important;
font-size:11.5px!important;
line-height:1.25!important;
}
body.student-experience .student-today-mini-list span:nth-child(5){grid-column:1/-1!important}
body.student-experience .student-today-quote{display:none!important}
/* Welcome hero is reduced to a continuation launcher. */
body.student-experience .home-hero-copy{
padding:14px!important;
border-radius:18px!important;
}
body.student-experience .home-hero-copy .eyebrow{
font-size:10.5px!important;
margin-bottom:0!important;
}
body.student-experience .home-hero-copy h1{display:none!important}
body.student-experience .home-hero-copy .hero-actions{
margin-top:8px!important;
grid-template-columns:1fr 1fr!important;
gap:7px!important;
}
body.student-experience .home-hero-copy .hero-actions .cta{
min-height:44px!important;
padding:9px 10px!important;
font-size:13.5px!important;
border-radius:13px!important;
}
/* Make the next-actions card feel like the main learning launcher. */
body.student-experience .student-dashboard-priority{margin-top:0!important}
body.student-experience .student-dashboard-priority .student-next-card{
padding:14px!important;
border-radius:18px!important;
}
body.student-experience .student-dashboard-priority .student-card-head{margin-bottom:10px!important}
body.student-experience .student-dashboard-priority .student-card-head strong{font-size:17px!important}
body.student-experience .student-dashboard-priority .student-next-action{
min-height:50px!important;
padding:9px 10px!important;
border-radius:13px!important;
}
body.student-experience .student-dashboard-priority .student-next-action:first-child{min-height:58px!important}
/* Utility/motivation should never float above actionable content. */
body.student-experience .support-fab{
width:38px!important;
height:38px!important;
min-height:38px!important;
right:8px!important;
bottom:max(118px,calc(env(safe-area-inset-bottom) + 104px))!important;
opacity:.82!important;
box-shadow:0 5px 16px rgba(15,105,96,.16)!important;
}
body.student-experience .support-fab span{font-size:15px!important}
}
@media(max-width:390px){
body.student-experience .student-today-mini-list{grid-template-columns:1fr!important}
body.student-experience .student-today-mini-list span:nth-child(5){grid-column:auto!important}
body.student-experience .home-hero-copy .hero-actions{grid-template-columns:1fr!important}
}
/* ======================================================================
v6.15.10 — FINAL STUDENT HOME REFINEMENT
Full Vietnamese name on desktop + cleaner mobile summary/support.
====================================================================== */
/* Use more of wide desktop screens so account information does not compete
with the learning navigation. */
@media(min-width:1500px){
.container{width:min(1680px,calc(100% - 32px))!important}
.header-inner{gap:14px!important}
.header-actions{gap:7px!important}
.user-chip{
flex:0 0 330px!important;
min-width:330px!important;
max-width:330px!important;
display:flex!important;
align-items:center!important;
}
#userName{
flex:1 1 auto!important;
max-width:none!important;
overflow:hidden!important;
text-overflow:clip!important;
white-space:nowrap!important;
font-size:13px!important;
}
.logout-btn{min-width:78px!important}
.plan-chip{max-width:180px!important}
}
/* Medium desktop: preserve the name before sacrificing readability. */
@media(max-width:1499px) and (min-width:1101px){
.brand{font-size:clamp(21px,1.65vw,27px)!important}
.header-actions{gap:5px!important}
.nav-pill{padding-left:9px!important;padding-right:9px!important}
.plan-chip{max-width:155px!important}
.user-chip{flex-basis:255px!important;max-width:270px!important}
}
@media(max-width:760px){
/* Five summary metrics: 2 + 2 + one calm full-width tile. */
body.student-experience .student-summary-grid>div:nth-child(5){
grid-column:1/-1!important;
min-height:74px!important;
display:grid!important;
grid-template-columns:auto auto 1fr!important;
align-items:center!important;
column-gap:10px!important;
text-align:left!important;
}
body.student-experience .student-summary-grid>div:nth-child(5) span{
grid-row:1/3!important;
margin:0!important;
}
body.student-experience .student-summary-grid>div:nth-child(5) strong{
margin:0!important;
align-self:end!important;
}
body.student-experience .student-summary-grid>div:nth-child(5) small{
align-self:start!important;
}
/* Help stays available but should not visually compete with study cards. */
body.student-experience .support-fab{
width:34px!important;
height:34px!important;
min-height:34px!important;
right:6px!important;
bottom:max(76px,calc(env(safe-area-inset-bottom) + 68px))!important;
opacity:.70!important;
border-width:1px!important;
}
body.student-experience .support-fab span{font-size:14px!important}
body.student-experience .support-fab b{display:none!important}
/* Tighten the less-actionable cards below the learning launcher. */
body.student-experience .student-streak-card,
body.student-experience .student-summary-card,
body.student-experience .student-achievement-card{
padding:15px!important;
}
body.student-experience .student-card-head{margin-bottom:10px!important}
}
@media(max-width:390px){
body.student-experience .student-summary-grid>div:nth-child(5){
grid-template-columns:auto auto 1fr!important;
}
}
/* ======================================================================
v6.15.11 — DESKTOP PLUS CHIP FINAL FIT
====================================================================== */
/* The learner name now fits; give the plan chip enough room to show days + credits too. */
@media(min-width:1500px){
.plan-chip{
width:220px!important;
max-width:220px!important;
justify-content:flex-start!important;
padding-left:13px!important;
padding-right:13px!important;
}
.plan-chip span{
max-width:none!important;
overflow:visible!important;
text-overflow:clip!important;
font-size:11px!important;
}
}
@media(max-width:1499px) and (min-width:1101px){
.plan-chip{max-width:180px!important}
.plan-chip span{max-width:108px!important}
}
/* ======================================================================
v6.15.11 — MOBILE SUMMARY FIX
Robust full-width Quiz metric + less intrusive support button.
====================================================================== */
@media(max-width:760px){
body.student-experience .student-summary-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
align-items:stretch!important;
}
body.student-experience .student-summary-grid>.student-summary-quiz{
grid-column:1 / -1!important;
width:100%!important;
min-width:0!important;
min-height:72px!important;
display:grid!important;
grid-template-columns:44px auto 1fr!important;
grid-template-rows:auto auto!important;
align-items:center!important;
column-gap:10px!important;
padding:12px 14px!important;
text-align:left!important;
}
body.student-experience .student-summary-grid>.student-summary-quiz>span{
grid-column:1!important;
grid-row:1 / 3!important;
margin:0!important;
align-self:center!important;
}
body.student-experience .student-summary-grid>.student-summary-quiz>strong{
grid-column:2!important;
grid-row:1!important;
align-self:end!important;
margin:0!important;
font-size:20px!important;
}
body.student-experience .student-summary-grid>.student-summary-quiz>small{
grid-column:2 / 4!important;
grid-row:2!important;
align-self:start!important;
margin:0!important;
}
body.student-experience .support-fab{
width:30px!important;
height:30px!important;
min-height:30px!important;
right:5px!important;
opacity:.58!important;
}
body.student-experience .support-fab:hover,
body.student-experience .support-fab:focus-visible{opacity:.95!important}
body.student-experience .support-fab span{font-size:12px!important}
}
/* ======================================================================
v6.15.12 — DESKTOP + iOS + ANDROID RESPONSIVE STABILIZATION
One responsive pass from the same Student Home baseline.
====================================================================== */
/* Global guardrail: responsive cards must never create horizontal drift. */
html,body{max-width:100%;overflow-x:hidden}
.header-inner,.header-actions,.home-hero,.student-home-dashboard,.student-dash-card{min-width:0}
/* DESKTOP: protect full Vietnamese name first, then compact plan metadata
on narrower desktop widths instead of allowing header collisions. */
@media(min-width:1101px) and (max-width:1360px){
.header-actions{gap:5px!important;min-width:0!important}
.nav-pill{padding-left:8px!important;padding-right:8px!important}
.plan-chip{flex:0 0 auto!important;max-width:116px!important;padding:8px 9px!important}
.plan-chip strong{font-size:11px!important}
.plan-chip span{display:none!important}
.user-chip{flex:0 1 260px!important;min-width:230px!important;max-width:270px!important}
#userName{max-width:none!important;font-size:13px!important}
}
@media(min-width:1361px) and (max-width:1499px){
.plan-chip{max-width:172px!important}
.plan-chip span{max-width:105px!important;font-size:10.5px!important}
.user-chip{min-width:255px!important;max-width:290px!important}
#userName{max-width:185px!important}
}
/* TABLET / iPad: use one readable dashboard column where two columns would
squeeze titles, but keep the actionable Goal -> Continue -> Next flow. */
@media(max-width:1100px){
body.student-experience .student-dashboard-learning,
body.student-experience .student-dashboard-bottom{grid-template-columns:1fr!important}
body.student-experience .student-roadmap-card{order:1!important}
body.student-experience .student-streak-card{order:2!important}
body.student-experience .student-dashboard-summary-row .student-summary-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important
}
body.student-experience .student-dash-card{min-width:0!important}
}
/* Shared iOS + Android phone layout. */
@media(max-width:760px){
body.student-experience .home-container{padding-left:0!important;padding-right:0!important}
body.student-experience .home-hero,
body.student-experience .student-home-dashboard{width:100%!important;min-width:0!important}
/* Account state is useful, but not a learning card. */
body.student-experience .mobile-account-bar{
width:calc(100% - 24px)!important;
margin:8px 12px 0!important;
min-height:62px!important;
padding:10px 12px!important;
border-radius:18px!important;
}
body.student-experience .mobile-account-main{min-width:0!important}
body.student-experience #mobileAccountName{
display:block!important;
max-width:220px!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
font-size:14px!important;
}
body.student-experience .mobile-logout-btn,
body.student-experience .mobile-login-btn{min-height:42px!important;padding:8px 12px!important}
/* Goal remains the first learning-value block. */
body.student-experience .student-today-hero{margin-left:12px!important;margin-right:12px!important}
body.student-experience .student-today-mini-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
body.student-experience .student-today-mini-list span{min-width:0!important;padding:9px 10px!important}
body.student-experience .student-today-mini-list span:nth-child(5){grid-column:1/-1!important}
/* Compact welcome/continue block follows Goal without taking over screen. */
body.student-experience .home-hero-copy{margin-left:12px!important;margin-right:12px!important}
/* Action launcher / roadmap / progress use same phone gutters. */
body.student-experience .student-home-dashboard{padding-left:12px!important;padding-right:12px!important}
body.student-experience .student-dashboard-priority .student-next-card,
body.student-experience .student-roadmap-card,
body.student-experience .student-streak-card,
body.student-experience .student-summary-card,
body.student-experience .student-achievement-card{width:100%!important;min-width:0!important}
body.student-experience .student-next-action,
body.student-experience .student-roadmap-item{min-width:0!important;overflow:hidden!important}
body.student-experience .student-next-action strong,
body.student-experience .student-roadmap-copy strong{overflow-wrap:anywhere!important;word-break:normal!important}
/* Summary always 2 + 2 + 1 full width from real student data. */
body.student-experience .student-dashboard-summary-row .student-summary-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important
}
body.student-experience .student-summary-grid>.student-summary-quiz{grid-column:1/-1!important}
/* Help stays reachable but outside the main reading line as much as possible. */
body.student-experience .support-fab{
right:7px!important;
bottom:max(96px,calc(env(safe-area-inset-bottom) + 84px))!important;
z-index:46!important;
}
}
@media(max-width:390px){
body.student-experience .student-today-mini-list{grid-template-columns:1fr!important}
body.student-experience .student-today-mini-list span:nth-child(5){grid-column:auto!important}
body.student-experience #mobileAccountName{max-width:170px!important}
}
/* iOS Safari / WebKit: leave extra room above the dynamic bottom browser bar. */
@supports (-webkit-touch-callout:none){
@media(max-width:900px){
body.student-experience .support-fab{
bottom:max(118px,calc(env(safe-area-inset-bottom) + 102px))!important
}
}
}
/* ======================================================================
v6.15.13 — TRI-PLATFORM STUDENT HOME POLISH
Desktop + iOS + Android from the same responsive baseline.
====================================================================== */
/* DESKTOP: the first learning launcher has 1 primary action + 3 clear
secondary actions, so do not leave a dead fourth cell. */
@media(min-width:1101px){
body.student-experience .student-dashboard-priority .student-next-actions{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
body.student-experience .student-dashboard-priority .student-next-action:first-child{
grid-column:1/-1!important;
}
/* Support remains available without sitting on top of dashboard content. */
body.student-experience .support-fab{
width:42px!important;
height:42px!important;
min-height:42px!important;
right:14px!important;
bottom:18px!important;
padding:0!important;
justify-content:center!important;
opacity:.84!important;
}
body.student-experience .support-fab b{display:none!important}
body.student-experience .support-fab span{font-size:17px!important}
}
/* TABLET: two columns for secondary actions where there is room. */
@media(max-width:1100px) and (min-width:761px){
body.student-experience .student-dashboard-priority .student-next-actions{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
body.student-experience .student-dashboard-priority .student-next-action:first-child{
grid-column:1/-1!important;
}
}
/* SHARED PHONE: account utility should reveal the learner, not consume space. */
@media(max-width:760px){
body.student-experience .mobile-account-bar{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
gap:10px!important;
align-items:center!important;
}
body.student-experience .mobile-account-main{
display:block!important;
min-width:0!important;
}
body.student-experience .mobile-account-label{display:none!important}
body.student-experience #mobileAccountName{
max-width:none!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
font-size:14px!important;
line-height:1.25!important;
}
/* Loading should look deliberate instead of occupying half of a 2-col grid. */
body.student-experience .student-today-mini-list span:only-child{
grid-column:1/-1!important;
min-height:50px!important;
}
/* Keep Help visible but comfortably inside the safe reading area. */
body.student-experience .support-fab{
width:34px!important;
height:34px!important;
min-height:34px!important;
right:max(14px,env(safe-area-inset-right))!important;
bottom:max(104px,calc(env(safe-area-inset-bottom) + 92px))!important;
padding:0!important;
justify-content:center!important;
opacity:.66!important;
}
body.student-experience .support-fab b{display:none!important}
body.student-experience .support-fab span{font-size:14px!important}
}
/* Narrow Android / compact iPhone: one goal per row is easier to read. */
@media(max-width:410px){
body.student-experience .student-today-mini-list{
grid-template-columns:1fr!important;
}
body.student-experience .student-today-mini-list span:nth-child(5){grid-column:auto!important}
}
/* iOS Safari: Dynamic Island / browser chrome can float above the page.
Add extra scroll runway and keep the floating support control away from it. */
@supports (-webkit-touch-callout:none){
@media(max-width:900px){
html{scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom))}
body.student-experience .home-container{
padding-bottom:calc(150px + env(safe-area-inset-bottom))!important;
}
body.student-experience .support-fab{
right:max(16px,env(safe-area-inset-right))!important;
bottom:max(132px,calc(env(safe-area-inset-bottom) + 116px))!important;
}
}
}
/* v6.15.14 — professional icons for English Garden / Chinese Garden */
.track-emoji{display:grid!important;place-items:center!important;color:#0c816f}
.track-icon-shell{display:grid;place-items:center;width:100%;height:100%}
.track-icon-svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.85;stroke-linecap:round;stroke-linejoin:round}
.track-emoji-en{background:linear-gradient(145deg,#edf8f3,#e1f4ee)!important;color:#0c816f!important}
.track-emoji-zh{background:linear-gradient(145deg,#fff4ed,#fdeadd)!important;border-color:#edd8cb!important;color:#a24d34!important}
.track-badge{display:none!important}
@media(max-width:760px){
.track-icon-svg{width:24px;height:24px}
}
/* v6.15.17 — per-student Lesson Access */
.lesson-access-toolbar{display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,1.4fr);gap:12px;margin-bottom:14px}
.lesson-access-list{display:grid;gap:10px;margin-top:14px}
.lesson-access-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:15px 16px;border:1px solid #e7ded5;border-radius:16px;background:#fff}
.lesson-access-row.is-open{border-color:#b9dfd5;background:#f4fcf9}
.lesson-access-row.is-draft{background:#fffaf4}
.lesson-access-main{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;min-width:0}
.lesson-access-number{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-weight:950;background:#edf8f4;color:#0d7e70}
.lesson-access-main small{display:block;font-size:10px;font-weight:900;letter-spacing:.08em;color:#8a7b6e;margin-bottom:3px}
.lesson-access-main strong{display:block;font-size:15px;line-height:1.35;overflow-wrap:anywhere}
.lesson-access-main em{display:block;font-style:normal;font-size:12px;line-height:1.45;color:#756c65;margin-top:4px}
.lesson-access-toggle{min-width:108px;border:1px solid #d8cdc3;background:#fff;border-radius:12px;padding:10px 12px;font-weight:900;cursor:pointer}
.lesson-access-toggle.active{background:#0f8f83;color:#fff;border-color:#0f8f83}
.lesson-access-toggle:disabled{opacity:.65;cursor:wait}
@media(max-width:760px){
.lesson-access-toolbar{grid-template-columns:1fr}
.lesson-access-row{grid-template-columns:1fr}
.lesson-access-toggle{width:100%}
}
/* =========================================================
v6.15.18 — PLUS VALUE CARDS + READ ALONG KARAOKE
FREE sees a clear locked preview; PLUS/TRIAL gets the real player.
========================================================= */
.lesson-part-student-grid{
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:14px;
}
.lesson-part-student-card{
min-width:0;
padding:18px;
}
.lesson-part-card-topline{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
}
.plus-part-card.locked-plus{
background:linear-gradient(145deg,#fffdf7,#fff8e8);
border:1px dashed #d9b85d;
box-shadow:0 10px 28px rgba(111,85,29,.08);
}
.plus-part-lock-badge,
.read-along-open-badge{
display:inline-flex;
align-items:center;
gap:4px;
padding:5px 8px;
border-radius:999px;
background:#fff0bd;
color:#795812;
font-size:12px;
font-weight:950;
white-space:nowrap;
}
.read-along-open-badge{
background:#e8fff7;
color:#0f766e;
}
.plus-part-lock-note{
margin:10px 0;
padding:9px 10px;
border-radius:11px;
background:rgba(255,255,255,.76);
color:#7b6651;
font-size:13px;
font-weight:800;
}
.plus-part-unlock{
width:100%;
border:1px solid #c69d2a!important;
background:#fff4c9!important;
color:#6d5115!important;
padding:11px 13px!important;
border-radius:12px!important;
font-weight:950!important;
cursor:pointer;
}
.plus-part-unlock:hover{transform:translateY(-1px)}
.lesson-part-student-card.part-e,
.lesson-part-student-card.read-along-summary-card{
background:linear-gradient(145deg,#f5fbff,#f2fff9);
border-color:#c8e6dd;
}
.reading-support-tools{
display:flex;
justify-content:space-between;
gap:14px;
align-items:center;
margin:0 0 14px;
padding:12px 14px;
border:1px solid #d6e7e1;
border-radius:14px;
background:#f6fcfa;
}
.reading-support-tools div{display:grid;gap:2px}
.reading-support-tools strong{font-size:15px}
.reading-support-tools span{font-size:13px;color:#6f766f}
.reading-support-tools button{
border:1px solid #bfd9d1;
background:#fff;
padding:9px 12px;
border-radius:11px;
font-weight:850;
cursor:pointer;
white-space:nowrap;
}
.reading-main-passage{margin:0 0 14px}
.reading-translation{
margin:0 0 16px;
padding:15px 16px;
border-radius:14px;
background:#fff9ef;
border:1px solid #eadbc5;
}
.reading-translation strong{font-size:14px;color:#80633d}
.reading-translation p{margin:6px 0 0;color:#675f57;font-size:15px;line-height:1.7}
.reading-readalong-promo,
.read-along-player{
margin:18px 0 22px;
padding:20px;
border-radius:20px;
border:1px solid #cfe7df;
background:linear-gradient(145deg,#f5fffb,#f6f9ff);
box-shadow:0 10px 28px rgba(35,82,70,.06);
}
.reading-readalong-promo.locked{
border-style:dashed;
border-color:#d9b85d;
background:linear-gradient(145deg,#fffdf7,#fff9eb);
}
.read-along-head{
display:flex;
justify-content:space-between;
gap:16px;
align-items:flex-start;
}
.read-along-head h3{margin:4px 0 6px;font-size:22px}
.read-along-head p{margin:0;color:#6c716d;font-size:14px;line-height:1.55}
.read-along-kicker{
display:inline-block;
font-size:12px;
font-weight:950;
color:#0f766e;
letter-spacing:.06em;
}
.read-along-demo{
display:grid;
gap:8px;
margin:14px 0;
padding:14px;
border-radius:14px;
background:#fff;
border:1px solid #eee3ce;
}
.read-along-demo span{
padding:9px 11px;
border-radius:10px;
font-weight:800;
color:#7a7268;
}
.read-along-demo span.active{
background:#e8fff7;
color:#0f766e;
box-shadow:inset 3px 0 0 #0f8f83;
}
.read-along-free-note{font-size:14px;color:#6e645a}
.read-along-toolbar{
display:flex;
flex-wrap:wrap;
gap:10px;
align-items:center;
margin:14px 0 10px;
}
.read-along-toolbar label{
display:flex;
align-items:center;
gap:7px;
font-size:13px;
font-weight:850;
}
.read-along-toolbar select,
.read-along-toolbar button{
border:1px solid #cfded9;
background:#fff;
padding:9px 11px;
border-radius:10px;
font-weight:850;
}
.read-along-toolbar button{cursor:pointer}
.read-along-toolbar [data-read-along-status]{
margin-left:auto;
font-size:13px;
color:#66716d;
font-weight:750;
}
.read-along-player audio{
width:100%;
display:block;
margin:10px 0 14px;
}
.read-along-lines{
display:grid;
gap:8px;
max-height:440px;
overflow:auto;
padding:4px;
scroll-behavior:smooth;
}
.read-along-line{
display:grid;
grid-template-columns:34px 1fr;
gap:10px;
align-items:flex-start;
width:100%;
border:1px solid #e2e9e6;
background:#fff;
padding:12px;
border-radius:13px;
text-align:left;
cursor:pointer;
transition:.18s ease;
}
.read-along-line:hover{border-color:#b9d9cf}
.read-along-line.active{
background:#e8fff7;
border-color:#74cbb4;
box-shadow:0 8px 22px rgba(15,143,131,.12),inset 4px 0 0 #0f8f83;
transform:translateY(-1px);
}
.read-along-number{
width:30px;height:30px;
border-radius:999px;
display:grid;
place-items:center;
background:#f0f4f2;
color:#5d6863;
font-size:12px;
font-weight:950;
}
.read-along-line.active .read-along-number{background:#0f8f83;color:#fff}
.read-along-copy{display:grid;gap:4px}
.read-along-copy strong{font-size:16px;line-height:1.45;color:#263c35}
.read-along-copy small{font-size:13px;line-height:1.45;color:#7a7169}
.read-along-lines.translation-hidden .read-along-copy small{display:none}
@media(max-width:700px){
.reading-support-tools,
.read-along-head{align-items:stretch;flex-direction:column}
.reading-support-tools button,
.plus-part-unlock{width:100%}
.read-along-toolbar{align-items:stretch}
.read-along-toolbar label{justify-content:space-between;width:100%}
.read-along-toolbar [data-read-along-status]{margin-left:0;width:100%}
.read-along-player,.reading-readalong-promo{padding:16px}
.read-along-lines{max-height:360px}
}
/* ==========================================================
v6.15.20 — SIMPLIFIED PRACTICE PATH · LISTEN & CATCH WORDS
========================================================== */
.listening-foundation-grid{grid-template-columns:minmax(0,1fr)!important}
.listening-free-badge,.listening-tier{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-size:12px!important;font-weight:950;padding:5px 9px;font-style:normal;white-space:nowrap}
.listening-free-badge,.listening-tier.free{background:#e8f7f2;color:#0b7468}
.listening-tier.plus{background:#fff0bf;color:#775713}
.listening-path-card{margin:6px 0 18px;padding:16px 18px;border:1px solid #e5ddd4;border-radius:18px;background:linear-gradient(135deg,#fffdfa,#f7fbf9)}
.listening-path-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.listening-path-title span{font-size:12px!important;font-weight:950;letter-spacing:.08em;color:#0f7e73}.listening-path-title strong{font-size:14px!important;color:#4f4a45}
.listening-path-steps{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:9px}.listening-path-step{display:flex;gap:10px;align-items:center;min-width:0;padding:11px 12px;border-radius:14px;border:1px solid #e7dfd8;background:#fff}.listening-path-step>b{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#eef7f4;color:#0c7d72}.listening-path-step.plus>b{background:#fff0bf;color:#775713}.listening-path-step span{display:grid;gap:2px}.listening-path-step strong{font-size:14px!important}.listening-path-step small{font-size:12px!important;color:#756e67}.listening-path-arrow{font-weight:950;color:#9b8c7d}
.listening-section-head{position:relative}.listening-section-head .listening-tier{margin-left:auto;align-self:flex-start}
.listen-catch-example{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin:12px 0 15px;padding:12px 14px;border:1px solid #e4ddd6;border-radius:14px;background:#fff}.listen-catch-example>span{font-size:12px!important;font-weight:900;color:#7a7169}.listen-catch-example>strong{font-size:18px!important;line-height:1.45}.listen-catch-example>strong b{letter-spacing:.12em;color:#0f8f83}.listen-catch-example>small{font-size:12px!important;color:#756e67}.listen-catch-example.locked{background:#fffaf0}
.listen-catch-blank::placeholder{color:#0f8f83;opacity:.8;letter-spacing:.08em;font-weight:900}.listen-catch-blank{background:#fbfffd;border-color:#b9d9cf}
.listening-catch-section{border-color:#cfe8df;background:#fbfffd}.listening-dictation-section{border-color:#eadcb9;background:#fffdf7}
.listening-dictation-input{width:100%;border:2px solid #ddd2c8;border-radius:12px;padding:12px 13px;font-size:16px!important;outline:none}.listening-dictation-input:focus{border-color:#0f8f83;box-shadow:0 0 0 3px rgba(15,143,131,.10)}.listening-dictation-input.dictation-correct{border-color:#20a47d;background:#effcf7}.listening-dictation-input.dictation-wrong{border-color:#d35a4d;background:#fff5f3}
.listening-plus-lock-card{margin:16px 0;padding:20px;border:1px dashed #d4b762;border-radius:18px;background:linear-gradient(135deg,#fffdf7,#fff8e8);display:grid;gap:14px}.listening-plus-lock-copy h3{margin:5px 0 6px;font-size:20px}.listening-plus-lock-copy p{margin:0;color:#6f675e;line-height:1.55}
#skill-shadowing #shadowingCore{margin-top:16px}
@media(max-width:800px){.listening-path-steps{grid-template-columns:1fr}.listening-path-arrow{transform:rotate(90deg);text-align:center}.listening-path-title{align-items:flex-start;flex-direction:column}.listen-catch-example{grid-template-columns:1fr;gap:5px}.listening-section-head .listening-tier{margin-left:0}.listening-section-head{grid-template-columns:auto 1fr!important}}
/* =========================================================\n v6.15.20 · Learner Experience Reset\n ========================================================= */\n.skill-tab-internal{display:none!important}\n.lesson-flow-guide{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px 0 12px;padding:16px 18px;border:1px solid rgba(15,118,110,.16);border-radius:20px;background:linear-gradient(135deg,rgba(240,253,250,.96),rgba(239,246,255,.94));box-shadow:0 12px 30px rgba(15,23,42,.06)}\n.lesson-flow-guide-copy{display:grid;gap:4px}.lesson-flow-guide-copy>span{font-size:12px;font-weight:900;letter-spacing:.08em;color:#0f766e}.lesson-flow-guide-copy>strong{font-size:17px;line-height:1.35}.lesson-flow-guide-copy>small{font-size:13px;color:#64748b}.lesson-flow-current{flex:0 0 auto;padding:10px 14px;border-radius:999px;background:#fff;border:1px solid rgba(15,118,110,.18);font-size:13px;font-weight:900;color:#0f766e}\n.skill-tabs--flow{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.skill-tabs--flow .skill-tab{min-height:54px;justify-content:center;gap:7px}.skill-tabs--flow .skill-tab>span:not(.plus-lock){font-weight:850}.skill-tabs--flow .plus-lock{display:block;margin-left:4px}\n.flow-subnav{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}.flow-subnav button{border:1px solid #dbe5e3;background:#fff;color:#475569;border-radius:999px;padding:9px 14px;font-size:13px;font-weight:800}.flow-subnav button.active{background:#e9f8f4;border-color:#86cbbd;color:#0f766e}\n.lesson-flow-next{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;padding:16px 18px}.lesson-flow-next>div{display:grid;gap:2px}.lesson-flow-next span{font-size:11px;font-weight:900;letter-spacing:.08em;color:#0f766e}.lesson-flow-next strong{font-size:18px}.lesson-flow-next small{font-size:13px;color:#64748b}\n.reading-script-block{margin:14px 0 12px;border:1px solid #d9e5e2;border-radius:18px;background:#fff;overflow:hidden}.reading-script-head{display:grid;gap:2px;padding:12px 15px;background:#f5faf9;border-bottom:1px solid #e4efec}.reading-script-head span{font-size:11px;font-weight:900;letter-spacing:.08em;color:#0f766e}.reading-script-head strong{font-size:16px}.reading-script-head small{font-size:12px;color:#64748b}.reading-script-block .reading-main-passage{margin:0;padding:18px;font-size:18px;line-height:1.8}.reading-readalong-label{display:grid;gap:2px;margin:18px 0 8px}.reading-readalong-label span{font-size:11px;font-weight:900;letter-spacing:.08em;color:#7c3aed}.reading-readalong-label strong{font-size:17px}\n.listening-set-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;padding:13px 14px;border:1px dashed #cbd5e1;border-radius:16px;background:#f8fafc}.listening-set-footer>div{display:grid;gap:2px}.listening-set-footer strong{font-size:15px}.listening-set-footer small{font-size:12px;color:#64748b}.listening-set-footer.complete{border-style:solid;border-color:#86cbbd;background:#f0fdf8}.listening-set-footer.complete strong:before{content:"✓ ";color:#0f766e}.listening-item-complete{box-shadow:inset 3px 0 0 #34a88b}.listening-set-footer .hidden{display:none!important}\n.ai-policy-card.policy-collapsed .ai-policy-grid,.ai-policy-card.policy-collapsed .ai-policy-note{display:none!important}.ai-policy-toggle{margin-left:auto;border:1px solid rgba(148,163,184,.45);background:#fff;border-radius:999px;padding:7px 11px;font-size:12px;font-weight:800;color:#475569}.ai-policy-top{gap:10px;align-items:center}.ai-policy-card.policy-collapsed{padding-bottom:10px}\n@media(max-width:900px){.skill-tabs--flow{grid-template-columns:repeat(3,minmax(0,1fr))}.lesson-flow-guide{align-items:flex-start}.lesson-flow-current{white-space:nowrap}}\n@media(max-width:620px){.skill-tabs--flow{grid-template-columns:repeat(2,minmax(0,1fr));position:static}.skill-tabs--flow .skill-tab{min-height:50px;font-size:13px}.lesson-flow-guide{display:grid;gap:10px;padding:14px}.lesson-flow-current{justify-self:start}.lesson-flow-guide-copy>strong{font-size:15px}.lesson-flow-next,.listening-set-footer{align-items:stretch;display:grid}.lesson-flow-next button,.listening-set-footer button{width:100%}.reading-script-block .reading-main-passage{font-size:17px;line-height:1.75;padding:15px}.flow-subnav{display:grid;grid-template-columns:1fr 1fr}.flow-subnav button{width:100%}}
/* v6.15.20 · second-pass simplification */\n.ai-mode-primary{display:flex;margin:12px 0 8px}.ai-mode-primary .ai-mode{width:100%;min-height:48px;border-radius:14px;font-weight:900}.ai-mode-extra{margin:0 0 12px;border:1px solid #e2e8f0;border-radius:14px;background:#fafafa;padding:0 12px}.ai-mode-extra summary{cursor:pointer;padding:11px 0;font-size:13px;font-weight:850;color:#475569}.ai-mode-extra .ai-mode-tabs{padding:0 0 12px;grid-template-columns:1fr 1fr}.shadow-toolbar-v2{display:block}.shadow-quick-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.shadow-practice-options{margin-top:10px;border-top:1px solid #e2e8f0}.shadow-practice-options summary{cursor:pointer;padding:12px 0 4px;font-size:13px;font-weight:850;color:#475569}.shadow-practice-options summary span{font-weight:600;color:#94a3b8}.shadow-practice-options-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end;padding-top:10px}.shadow-practice-options-grid .toggle{align-self:center}\n@media(max-width:620px){.ai-mode-extra .ai-mode-tabs{grid-template-columns:1fr}.shadow-quick-settings,.shadow-practice-options-grid{grid-template-columns:1fr 1fr}.shadow-practice-options-grid .toggle{min-height:42px}}
.flow-subnav button.plus-locked:not(.active)::after{content:"PLUS 🔒";margin-left:7px;font-size:10px;font-weight:900;color:#7c3aed}.flow-subnav button.subnav-unavailable{opacity:.45;cursor:not-allowed}.flow-subnav button:disabled{pointer-events:none}\n
/* v6.15.22 — HQ AUDIO GUIDANCE */
.audio-quality-note{display:block;margin-top:6px;max-width:330px;font-size:13px;line-height:1.4;color:var(--muted,#667085)}
/* v6.15.24 — READ ALONG KARAOKE VISIBILITY */
.reading-readalong-label{display:grid;gap:4px;margin-top:18px}
.reading-readalong-label small{font-size:14px;line-height:1.5;color:#6d756f;font-weight:600}
.read-along-loading{padding:18px;border:1px dashed #c7d8d2;border-radius:16px;background:#fbfdfc;color:#64736d;font-weight:700}
.reading-readalong-status{padding:18px;border:1px solid #e3e8e5;border-radius:18px;background:#fff;display:grid;gap:12px}
.reading-readalong-status.warning{border-color:#ead8aa;background:#fffdf6}
.reading-readalong-status.muted{color:#6d756f}
.reading-readalong-status.muted span{font-size:14px}
.read-along-state-badge{padding:6px 10px;border-radius:999px;background:#fff1c9;color:#725615;font-size:12px;font-weight:900;white-space:nowrap}
.read-along-lines.preview-only{max-height:320px}
.read-along-line.static{cursor:default;text-align:left}
.read-along-player [data-read-along-audio]{display:block!important;width:100%;min-height:44px;visibility:visible!important;opacity:1!important}
.read-along-line.active{outline:3px solid rgba(15,143,131,.18);box-shadow:0 8px 24px rgba(15,143,131,.12)}
@media(max-width:700px){.reading-readalong-label small{font-size:13px}.read-along-player [data-read-along-audio]{min-height:50px}}
/* v6.15.25 · scalable Part E / Read Along builder */
.builder-part-visibility{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;padding:9px 11px;border:1px dashed #d6dce2;border-radius:12px;background:#fbfcfd}
.builder-part-visibility span{font-size:12px;font-weight:850}.builder-part-visibility span.ready{color:#0f766e}.builder-part-visibility span.draft{color:#7c3aed}
.builder-part-visibility button{border:1px solid #d8dee6;background:#fff;border-radius:10px;padding:7px 10px;font-size:12px;font-weight:800}
@media(max-width:620px){.builder-part-visibility{align-items:stretch;display:grid}.builder-part-visibility button{width:100%}}
/* =========================================================
v6.15.26 · DUB & SCORE · PLUS
========================================================= */
.dubbing-shell{display:grid;gap:16px;padding:20px;border:1px solid #d9e8e4;background:linear-gradient(145deg,#fbfffd,#f8fbff)}
.dubbing-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.dubbing-head h3{margin:4px 0 5px;font-size:22px}.dubbing-head p{margin:0;color:#64748b;line-height:1.55}
.dubbing-kicker{font-size:12px;font-weight:950;letter-spacing:.07em;color:#7c3aed}
.dubbing-mode-switch{display:flex;gap:7px;padding:5px;border-radius:14px;background:#eef5f3;border:1px solid #d9e5e1}
.dubbing-mode-switch button{border:0;background:transparent;border-radius:10px;padding:9px 12px;font-size:13px;font-weight:900;color:#64748b;cursor:pointer;white-space:nowrap}
.dubbing-mode-switch button.active{background:#fff;color:#0f766e;box-shadow:0 4px 12px rgba(15,118,110,.10)}
.dubbing-stage{display:grid;gap:12px}.dubbing-stage.is-recording{outline:3px solid rgba(220,38,38,.08);border-radius:18px}
.dubbing-stage-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:13px 15px;border-radius:15px;background:#f7faf9;border:1px solid #e0e9e6}
.dubbing-stage-head>div{display:grid;gap:2px}.dubbing-stage-head span{font-size:11px;font-weight:950;letter-spacing:.07em;color:#0f766e}.dubbing-stage-head strong{font-size:17px}.dubbing-stage-head small{font-size:13px;color:#64748b;line-height:1.45}.dubbing-stage-head>b{font-size:12px;color:#7c3aed;white-space:nowrap}
.dubbing-target-card{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:flex-start;padding:20px;border:1px solid #dce7e3;border-radius:18px;background:#fff}
.dubbing-target-number{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#e6f8f3;color:#0f766e;font-size:16px;font-weight:950}.dubbing-target-card>div{display:grid;gap:8px}.dubbing-target-card strong{font-size:22px;line-height:1.55;color:#203c35}.dubbing-target-card details{font-size:13px;color:#64748b}.dubbing-target-card summary{cursor:pointer;font-weight:800}.dubbing-target-card small{display:block;margin-top:5px;font-size:14px;line-height:1.5}
.dubbing-nav{display:flex;justify-content:space-between;gap:10px}.dubbing-nav button{min-width:130px}
.dubbing-script-lines{display:grid;gap:8px;max-height:430px;overflow:auto;padding:4px;scroll-behavior:smooth}
.dubbing-script-line{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:flex-start;padding:13px 14px;border:1px solid #e2e8e5;border-radius:14px;background:#fff;transition:.18s ease}.dubbing-script-line>span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#eef3f1;color:#5f6d67;font-size:12px;font-weight:950}.dubbing-script-line strong{font-size:16px;line-height:1.5;color:#2a4038}.dubbing-script-line.active{background:#e9fff8;border-color:#70cbb2;box-shadow:0 8px 22px rgba(15,143,131,.12),inset 4px 0 0 #0f8f83}.dubbing-script-line.active>span{background:#0f8f83;color:#fff}
.dubbing-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.dubbing-actions button{min-height:46px}.dubbing-recorded-audio{width:100%;min-height:46px}.dubbing-local-compare{display:grid;gap:8px}.dubbing-history{display:grid;gap:8px}.dubbing-empty{display:grid;gap:5px;padding:18px;border:1px dashed #cdd9d5;border-radius:16px;background:#fbfdfc;color:#64748b}.dubbing-empty strong{font-size:16px;color:#344a43}
.dubbing-audio-settings summary{display:flex;gap:8px}.dubbing-audio-settings summary span{color:#94a3b8;font-weight:600}
#skill-dubbing .ai-policy-card{margin-bottom:14px}
#skill-dubbing .score-disclaimer{margin-top:12px}
@media(max-width:760px){
.dubbing-head,.dubbing-stage-head{display:grid}.dubbing-mode-switch{width:100%;display:grid;grid-template-columns:1fr 1fr}.dubbing-actions{grid-template-columns:1fr 1fr}.dubbing-target-card strong{font-size:19px}.dubbing-stage-head>b{white-space:normal}.dubbing-nav button{min-width:0;flex:1}.dubbing-script-lines{max-height:360px}
}
@media(max-width:620px){
#skill-reading .flow-subnav,#skill-shadowing .flow-subnav,#skill-dubbing .flow-subnav{grid-template-columns:1fr 1fr 1fr}
#skill-reading .flow-subnav button,#skill-shadowing .flow-subnav button,#skill-dubbing .flow-subnav button{padding:9px 7px;font-size:12px}
.dubbing-shell{padding:15px}.dubbing-actions{grid-template-columns:1fr}.dubbing-target-card{grid-template-columns:36px 1fr;padding:16px;gap:10px}.dubbing-target-number{width:34px;height:34px}.dubbing-script-line strong{font-size:15px}
}
/* v6.15.28 · unified audio leveling */
.audio-device-hint{line-height:1.45}
.mic-level-track{overflow:hidden}
/* ======================================================================
v6.15.30 — MOBILE LESSON UX CLEANUP
One navigation hierarchy only; keep Read Along layout unchanged.
====================================================================== */
.skill-tab-internal,
#skillTabs .skill-tab:not([data-flow-main]){
display:none!important;
}
@media(max-width:760px){
/* Only the six MAIN lesson steps live in the top navigation. */
#skillTabs.skill-tabs--flow{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
overflow:visible!important;
position:static!important;
padding:12px 0 16px!important;
}
#skillTabs .skill-tab[data-flow-main]{
display:flex!important;
min-width:0!important;
min-height:48px!important;
padding:9px 7px!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
white-space:normal!important;
line-height:1.2!important;
font-size:12.5px!important;
border-radius:15px!important;
}
#skillTabs .skill-tab[data-flow-main] span:not(.plus-lock){
min-width:0!important;
}
/* 3A / 3B / 3C is the ONLY detailed navigation for Step 3. */
#skill-reading .flow-subnav,
#skill-shadowing .flow-subnav,
#skill-dubbing .flow-subnav{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:7px!important;
margin:0 0 14px!important;
}
#skill-reading .flow-subnav button,
#skill-shadowing .flow-subnav button,
#skill-dubbing .flow-subnav button{
min-width:0!important;
width:100%!important;
padding:9px 6px!important;
font-size:11.5px!important;
line-height:1.25!important;
white-space:normal!important;
}
/* Keep the confirmed-good Reading/Read Along body untouched; compact only headings. */
#skill-dubbing .activity-heading h2,
#skill-shadowing .activity-heading h2,
#skill-reading .activity-heading h2{
font-size:clamp(25px,7vw,31px)!important;
line-height:1.14!important;
overflow-wrap:anywhere!important;
}
#skill-dubbing .activity-heading,
#skill-shadowing .activity-heading,
#skill-reading .activity-heading{
gap:12px!important;
margin-bottom:14px!important;
}
#skill-dubbing .complete-skill,
#skill-shadowing .complete-skill,
#skill-reading .complete-skill{
min-height:44px!important;
padding:10px 13px!important;
}
/* The helper FAB was sitting on top of lesson controls on Android/iOS. */
body.lesson-view-active.student-experience .support-fab{
display:none!important;
}
/* Make the flow hint useful without dominating the first phone screen. */
.lesson-flow-guide{
margin:12px 0 8px!important;
padding:12px 13px!important;
gap:7px!important;
}
.lesson-flow-guide-copy>span{font-size:11px!important}
.lesson-flow-guide-copy>strong{font-size:14px!important;line-height:1.45!important}
.lesson-flow-guide-copy>small{font-size:12px!important;line-height:1.45!important}
.lesson-flow-current{
padding:8px 11px!important;
font-size:12px!important;
}
/* Credit policy remains available, but compact by default. */
#skill-dubbing .ai-policy-card.policy-collapsed,
#skill-shadowing .ai-policy-card.policy-collapsed,
#skill-speaking .ai-policy-card.policy-collapsed{
margin-bottom:12px!important;
}
}
@media(max-width:390px){
#skillTabs.skill-tabs--flow{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#skill-reading .flow-subnav button,
#skill-shadowing .flow-subnav button,
#skill-dubbing .flow-subnav button{font-size:11px!important;padding:8px 5px!important}
}
/* ======================================================================
v6.15.31 — UNIFIED COMPACT LAYOUT + TYPOGRAPHY SCALE
Desktop + Android + iPhone/iPad. Compact by spacing, never by tiny text.
====================================================================== */
:root{
--vnn-text:16px;
--vnn-small:14px;
--vnn-label:12px;
--vnn-title-sm:clamp(23px,3vw,30px);
--vnn-title-lg:clamp(31px,4.5vw,48px);
--vnn-radius:18px;
--vnn-gap:12px;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:var(--vnn-text);line-height:1.55}
button,input,select,textarea{font-size:16px}
.container{width:min(1160px,calc(100% - 28px))}
/* Compact global rhythm without reducing readability. */
.breadcrumb{padding:16px 0 8px}
.section-block{padding:14px 0 22px}
.section-title-row{margin-bottom:10px}
.section-title-row h2{font-size:var(--vnn-title-sm)}
.card,.track-card,.season-card,.course-card,.lesson-hero,.track-hero,.course-hero{border-radius:20px}
.track-card{padding:18px;gap:14px}
.course-card{padding:18px;min-height:150px}
.season-card{padding:16px;gap:12px}
.track-hero,.course-hero,.lesson-hero{padding:22px;gap:18px}
.home-hero{gap:18px;padding:30px 0 16px}
.home-hero-copy{padding:26px}
.home-hero h1,.track-hero h1,.course-hero h1,.lesson-hero h1{font-size:var(--vnn-title-lg);margin:7px 0 10px}
.home-hero p,.track-hero p,.course-hero p,.lesson-hero p{font-size:16px;line-height:1.55}
.hero-actions{margin-top:16px}
/* Lesson: one calm hierarchy with less vertical waste. */
.lesson-flow-guide{margin:10px 0 8px;padding:11px 14px;border-radius:16px;gap:12px}
.lesson-flow-guide-copy{gap:2px}
.lesson-flow-guide-copy>span{font-size:11px}
.lesson-flow-guide-copy>strong{font-size:15px;line-height:1.4}
.lesson-flow-guide-copy>small{font-size:13px;line-height:1.4}
.lesson-flow-current{padding:8px 12px;font-size:12px}
#skillTabs.skill-tabs--flow{padding:10px 0 12px;gap:7px}
.skill-tabs--flow .skill-tab{min-height:46px;padding:8px 10px;border-radius:14px;font-size:13px;line-height:1.25}
.flow-subnav{gap:7px;margin:0 0 12px}
.flow-subnav button{padding:8px 12px;font-size:13px}
.activity-heading{margin:6px 0 13px;gap:12px;align-items:center}
.activity-heading h2{font-size:var(--vnn-title-sm);line-height:1.18}
.activity-heading p{font-size:14px;line-height:1.45}
.complete-skill{padding:9px 12px;min-height:42px;font-size:14px}
.lesson-flow-next{margin-top:15px;padding:12px 14px}
.lesson-flow-next strong{font-size:16px}
/* Common learning cards. */
.exercise-stack{gap:11px;padding-bottom:22px}
.exercise-item,.reading-card,.writing-card,.speaking-card{padding:17px}
.exercise-card{padding:18px;margin-bottom:22px}
.vocab-grid{gap:11px;padding-bottom:24px}
.vocab-card{padding:15px;gap:8px}
.vocab-term{font-size:19px}
.vocab-example{padding:10px}
.full-dialogue{padding:15px;gap:14px;margin-bottom:11px}
.toolbar{padding:13px;gap:8px}
.flash-shell{padding-bottom:28px}
.flash-card{min-height:280px;padding:30px;border-radius:22px}
.flash-face{font-size:clamp(32px,5vw,40px)}
.flash-face small{font-size:17px;margin-top:10px}
.practice-card{padding:20px}
.script-area{min-height:210px;padding:20px 0}
.english{font-size:clamp(26px,4vw,40px)}
.vietnamese{font-size:17px;margin-top:10px}
/* Reading / karaoke: preserve current behavior; compact shell only. */
.reading-script-block{margin:10px 0;border-radius:16px}
.reading-script-head{padding:10px 13px}
.reading-script-head strong{font-size:16px}
.reading-script-block .reading-main-passage{padding:15px 16px;font-size:17px;line-height:1.72}
.reading-readalong-label{margin:13px 0 7px}
.read-along-player,.reading-readalong-promo{padding:15px;border-radius:18px}
.read-along-lines{gap:7px;max-height:400px}
.read-along-line{padding:10px 11px;border-radius:12px;grid-template-columns:32px 1fr;gap:9px}
.read-along-number{width:28px;height:28px}
.read-along-copy strong{font-size:16px;line-height:1.4}
.read-along-copy small{font-size:13px}
/* Listening: shorten cards, keep controls finger-friendly. */
.listening-path-card{margin:5px 0 12px;padding:12px 14px;border-radius:16px}
.listening-path-title{margin-bottom:9px}
.listening-path-step{padding:9px 10px;border-radius:12px}
.listen-catch-example{margin:9px 0 11px;padding:10px 12px}
.listening-plus-lock-card{margin:12px 0;padding:16px}
.listening-set-footer{margin-top:10px;padding:10px 12px}
/* Shadowing / Dub: compact shell, but spoken text remains large. */
.dubbing-shell{gap:12px;padding:16px;border-radius:18px}
.dubbing-head{gap:12px}
.dubbing-head h3{font-size:20px;margin:2px 0 4px}
.dubbing-head p{font-size:14px;line-height:1.45}
.dubbing-stage{gap:9px}
.dubbing-stage-head{padding:10px 12px;border-radius:13px}
.dubbing-stage-head strong{font-size:16px}
.dubbing-target-card{padding:15px;gap:11px;border-radius:15px}
.dubbing-target-card strong{font-size:20px;line-height:1.45}
.dubbing-script-lines{gap:7px;max-height:390px}
.dubbing-script-line{padding:10px 11px;border-radius:12px}
.dubbing-actions{gap:7px}
.dubbing-actions button{min-height:44px;padding:9px 10px}
.ai-policy-card.policy-collapsed{padding-top:10px;padding-bottom:9px}
/* Form text stays readable and avoids iOS focus zoom. */
.field label,.toggle,.muted,.instruction-mini{font-size:13px}
.field select,.inline-blank,.exercise-item>input,.listening-dictation-input{font-size:16px!important}
/* Tablet */
@media(max-width:900px){
.container{width:min(100% - 24px,1160px)}
.track-hero,.course-hero,.lesson-hero{padding:18px}
.home-hero-copy{padding:22px}
.activity-heading{align-items:flex-start}
}
/* Phones: 16px body text; compact by spacing only. */
@media(max-width:620px){
:root{--vnn-text:16px;--vnn-small:14px;--vnn-title-sm:clamp(24px,7vw,29px)}
.container{width:calc(100% - 20px)}
.header-inner{padding:9px 0;gap:8px}
.brand{font-size:17px}.tagline{font-size:11px}
.status-pill,.nav-pill{padding:7px 9px;font-size:12px}
.home-hero{padding:18px 0 10px;gap:12px}
.home-hero-copy{padding:18px}
.home-hero h1,.track-hero h1,.course-hero h1,.lesson-hero h1{font-size:clamp(30px,9vw,38px);line-height:1.08}
.home-hero p,.track-hero p,.course-hero p,.lesson-hero p{font-size:16px;line-height:1.5}
.section-block{padding:10px 0 16px}
.track-card,.course-card,.season-card{padding:14px}
.track-card{gap:10px}.track-emoji{font-size:40px}
.track-card h3,.season-card h3,.course-card h3{font-size:19px}
.track-hero,.course-hero,.lesson-hero{padding:16px;gap:12px}
#skillTabs.skill-tabs--flow{padding:8px 0 10px!important;gap:6px!important}
#skillTabs .skill-tab[data-flow-main]{min-height:44px!important;padding:7px 6px!important;font-size:12.5px!important;border-radius:13px!important}
.lesson-flow-guide{margin:8px 0 6px!important;padding:10px 11px!important}
.lesson-flow-guide-copy>strong{font-size:14px!important}
.lesson-flow-guide-copy>small{font-size:13px!important}
.flow-subnav{margin-bottom:10px!important;gap:6px!important}
#skill-reading .flow-subnav button,#skill-shadowing .flow-subnav button,#skill-dubbing .flow-subnav button{padding:8px 5px!important;font-size:12px!important;min-height:42px}
.activity-heading{margin:4px 0 10px!important;gap:8px!important}
#skill-dubbing .activity-heading h2,#skill-shadowing .activity-heading h2,#skill-reading .activity-heading h2{font-size:var(--vnn-title-sm)!important}
.activity-heading p{font-size:14px;line-height:1.4}
.complete-skill{min-height:42px!important;padding:8px 11px!important;font-size:14px}
.exercise-item,.reading-card,.writing-card,.speaking-card,.exercise-card{padding:14px}
.vocab-card{padding:13px}.vocab-term{font-size:19px}
.flash-card{min-height:240px;padding:22px 18px}
.practice-card{padding:16px}.script-area{min-height:180px;padding:15px 0}
.reading-script-block .reading-main-passage{font-size:17px;line-height:1.68;padding:13px 14px}
.read-along-player,.reading-readalong-promo{padding:13px}
.read-along-lines{max-height:350px}
.read-along-line{padding:9px 10px}
.dubbing-shell{padding:13px!important;gap:10px}
.dubbing-head h3{font-size:20px}.dubbing-head p{font-size:14px}
.dubbing-target-card{padding:13px}.dubbing-target-card strong{font-size:19px!important}
.dubbing-script-lines{max-height:340px}
.lesson-flow-next{margin-top:12px;padding:10px 12px}
}
/* Very small phones: do not reduce reading text below 16px. */
@media(max-width:390px){
body{font-size:16px}
.container{width:calc(100% - 16px)}
.reading-main-passage,.reading-card,.read-along-copy strong{font-size:16px!important}
button,input,select,textarea{font-size:16px}
}
/* Teacher/Builder readability — compact, never micro-text. */
.lesson-part-key,.lesson-part-card-meta span,.builder-part-card small,.builder-part-visibility span{font-size:12px!important;line-height:1.35}
.lesson-part-student-card p,.lesson-parts-intro{font-size:13px!important;line-height:1.45}
.lesson-part-student-card h3{font-size:17px!important;line-height:1.3}
.builder-part-card{padding:12px;border-radius:14px}
.lesson-part-student-card{padding:13px;border-radius:14px}
@media(max-width:620px){
.lesson-part-key,.lesson-part-card-meta span,.builder-part-card small,.builder-part-visibility span{font-size:12px!important}
.lesson-part-student-card p,.lesson-parts-intro{font-size:13px!important}
}
/* ============================================================
v6.15.33 — UNIFIED SPEAKER LABELS
Listening shared player + exercises use one speaker language.
Do not invent character names: show the source data as-is.
============================================================ */
.listening-speaker-roster{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:7px;
margin:2px 0 8px;
}
.listening-speaker-label{
font-size:13px!important;
line-height:1.35!important;
font-weight:800;
color:#6f756f;
}
.listening-speaker-chip{
display:inline-flex;
align-items:center;
min-height:28px;
padding:4px 9px;
border:1px solid #dce8e3;
border-radius:999px;
background:#f3f8f5;
color:#29463f;
font-size:13px!important;
line-height:1.25!important;
font-weight:800;
}
.listening-question-title span{
font-size:13px!important;
color:#29463f;
background:#f3f8f5;
border:1px solid #dce8e3;
}
@media(max-width:700px){
.listening-speaker-roster{gap:6px;margin-bottom:7px;}
.listening-speaker-label,
.listening-speaker-chip,
.listening-question-title span{font-size:13px!important;}
.listening-speaker-chip{min-height:30px;padding:5px 9px;}
}
/* v6.15.35 · Teacher Builder explicit disabled states */
.builder-disabled-action:disabled,
.builder-part-visibility button:disabled,
.builder-part-upload button:disabled{
opacity:.5!important;
cursor:not-allowed!important;
pointer-events:none!important;
filter:grayscale(.18);
background:#f4f4f5!important;
color:#71717a!important;
border-color:#e4e4e7!important;
box-shadow:none!important;
}
.builder-part-visibility button:disabled{font-weight:850}
@media(max-width:620px){
.builder-part-upload button:disabled{min-height:46px;font-size:13px!important}
}
/* v6.15.37 · Read Along one-button progress */
.builder-readalong-action{display:grid;gap:7px;min-width:180px;align-self:stretch}
.builder-readalong-ready:not(:disabled){opacity:1!important;background:#0f8f83!important;color:#fff!important;border-color:#0f8f83!important;filter:none!important;cursor:pointer!important;pointer-events:auto!important}
.builder-readalong-ready.is-processing:disabled{opacity:.78!important;background:#0f766e!important;color:#fff!important;border-color:#0f766e!important;filter:none!important;cursor:wait!important;pointer-events:none!important}
.builder-readalong-inline-status{display:block;font-size:12.5px;line-height:1.35;color:#64748b;font-weight:700;max-width:240px}
.builder-readalong-inline-status.ok{color:#0f766e}.builder-readalong-inline-status.bad{color:#b42318}
@media(max-width:620px){.builder-readalong-action{width:100%;min-width:0}.builder-readalong-ready{width:100%;min-height:48px;font-size:15px!important}.builder-readalong-inline-status{max-width:none;font-size:13px}}
/* v6.15.39 · Dub full-passage pace control */
.dubbing-speed-control{display:grid;gap:7px;padding:10px 12px;border:1px solid #dbe8e4;border-radius:13px;background:#fbfefd}
.dubbing-speed-control>span{font-size:13px;font-weight:900;color:#35534a}
.dubbing-speed-control>div{display:flex;flex-wrap:wrap;gap:7px}
.dubbing-speed-control button{min-height:40px;padding:8px 12px;border:1px solid #d6e4df;border-radius:11px;background:#fff;color:#51645e;font-size:14px;font-weight:900;cursor:pointer}
.dubbing-speed-control button.active{border-color:#55bca9;background:#e8faf5;color:#0f766e;box-shadow:0 4px 12px rgba(15,118,110,.08)}
.dubbing-speed-control button:disabled{cursor:not-allowed;opacity:.55}
.dubbing-speed-control small{font-size:13px;line-height:1.45;color:#64748b}
@media(max-width:700px){
.dubbing-speed-control{padding:10px}
.dubbing-speed-control>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.dubbing-speed-control button{width:100%;font-size:14px}
}
/* ======================================================================
v6.15.40 — Cross-platform stability: audio clarity + Android Dub switch
+ explicit PLUS locks on iOS/Android/Desktop
====================================================================== */
.dubbing-mode-switch button{
min-height:48px;
touch-action:manipulation;
-webkit-tap-highlight-color:rgba(15,118,110,.10);
position:relative;
z-index:1;
pointer-events:auto;
}
.dubbing-mode-switch button:disabled{
pointer-events:none;
opacity:.55;
}
.flow-subnav button.plus-locked{
background:#eef1f3!important;
border-color:#d3d8dd!important;
color:#5f6872!important;
box-shadow:none!important;
}
.flow-subnav button.plus-locked.active{
background:#e7eaee!important;
color:#4b5563!important;
}
.flow-plus-lock-chip{
display:inline-flex;
align-items:center;
justify-content:center;
margin-left:7px;
padding:3px 7px;
border-radius:999px;
background:#262b33;
color:#fff;
font-size:10px;
line-height:1;
font-weight:950;
letter-spacing:.02em;
white-space:nowrap;
}
/* v6.15.40 uses a real lock chip; suppress the older pseudo badge. */
.flow-subnav button.plus-locked:not(.active)::after{content:none!important}
@media(max-width:620px){
.dubbing-mode-switch button{min-height:50px;font-size:14px!important}
.flow-subnav button.plus-locked{min-height:48px}
.flow-plus-lock-chip{font-size:9px;padding:3px 6px;margin-left:5px}
}
/* ======================================================================
v6.15.41 — Dub full-passage start UX + persistent Lesson switch
====================================================================== */
.dub-full-launch{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:11px 12px;
border:1px solid rgba(15,143,131,.18);
border-radius:14px;
background:linear-gradient(135deg,#f0fdf8,#f8fffd);
}
.dub-full-launch .primary{min-height:46px;flex:0 0 auto}
.dub-full-launch small{font-size:13px;line-height:1.45;color:#64748b}
.dubbing-script-line.countdown-ready{
border-color:#0f8f83;
background:#f0fdf8;
box-shadow:0 0 0 3px rgba(15,143,131,.08);
}
.lesson-quick-switch{
position:fixed;
left:50%;
bottom:calc(12px + env(safe-area-inset-bottom,0px));
transform:translateX(-50%);
z-index:49;
display:flex;
align-items:center;
gap:6px;
max-width:min(620px,calc(100vw - 24px));
padding:6px;
border:1px solid rgba(15,118,110,.2);
border-radius:16px;
background:rgba(255,255,255,.96);
box-shadow:0 12px 34px rgba(15,23,42,.16);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.lesson-quick-switch.hidden{display:none!important}
.lesson-quick-switch>button{
width:42px;
height:42px;
flex:0 0 42px;
border:1px solid #d8e3df;
border-radius:12px;
background:#fff;
color:#0f766e;
font-size:23px;
font-weight:950;
cursor:pointer;
touch-action:manipulation;
}
.lesson-quick-switch>button:disabled{opacity:.35;cursor:not-allowed}
.lesson-quick-switch label{
display:grid;
grid-template-columns:auto minmax(0,1fr);
align-items:center;
gap:7px;
min-width:0;
}
.lesson-quick-switch label>span{
font-size:12px;
font-weight:900;
color:#0f766e;
white-space:nowrap;
}
.lesson-quick-switch select{
min-width:0;
max-width:390px;
height:42px;
border:1px solid #d8e3df;
border-radius:12px;
background:#fff;
color:#223c35;
padding:0 34px 0 11px;
font-size:14px;
font-weight:850;
}
body.lesson-view-active{padding-bottom:76px}
@media(max-width:620px){
.dub-full-launch{display:grid;gap:7px;padding:10px}
.dub-full-launch .primary{width:100%;min-height:50px;font-size:16px}
.dub-full-launch small{font-size:13px}
.lesson-quick-switch{
width:calc(100% - 20px);
max-width:none;
bottom:calc(8px + env(safe-area-inset-bottom,0px));
padding:5px;
border-radius:15px;
}
.lesson-quick-switch label{grid-template-columns:1fr;gap:0;flex:1}
.lesson-quick-switch label>span{display:none}
.lesson-quick-switch select{
width:100%;
max-width:none;
height:44px;
font-size:16px!important; /* iOS: no focus zoom */
padding-left:10px;
}
.lesson-quick-switch>button{width:44px;height:44px;flex-basis:44px}
body.lesson-view-active{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
}
/* === v6.15.42 · Premium anti-leak hardening === */
.premium-watermark{
position:fixed;inset:0;z-index:120;pointer-events:none;overflow:hidden;
display:grid;grid-template-columns:repeat(3,minmax(220px,1fr));
align-content:space-around;gap:74px 28px;padding:92px 18px 54px;
}
.premium-watermark.hidden{display:none!important}
.premium-watermark span{
display:block;white-space:nowrap;text-align:center;transform:rotate(-24deg);
font-size:12px;font-weight:800;letter-spacing:.04em;color:#173f3a;opacity:.075;
text-shadow:0 1px 0 rgba(255,255,255,.55);
}
body.premium-protection-active #view-lesson{
-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
body.premium-protection-active #view-lesson input,
body.premium-protection-active #view-lesson textarea,
body.premium-protection-active #view-lesson select,
body.premium-protection-active #view-lesson [contenteditable="true"]{
-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;
}
body.premium-protection-active #view-lesson img{
-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none;
}
@media(max-width:760px){
.premium-watermark{grid-template-columns:repeat(2,minmax(150px,1fr));gap:62px 10px;padding:78px 4px 76px}
.premium-watermark span{font-size:10px;opacity:.07}
}
@media print{
body.premium-protection-active #view-lesson{display:none!important}
body.premium-protection-active::before{
content:"Nội dung PLUS được bảo vệ · Không hỗ trợ in hoặc lưu bản sao.";
display:block!important;padding:48px 24px;font:700 20px/1.5 sans-serif;text-align:center;color:#222;
}
}
/* =========================================================
v6.15.43 · iOS UX + premium watermark correction
========================================================= */
.premium-watermark{
z-index:47;
grid-template-columns:repeat(2,minmax(260px,1fr));
align-content:space-evenly;
gap:110px 60px;
padding:110px 32px 90px;
}
.premium-watermark span{
font-size:11px;
font-weight:800;
letter-spacing:.035em;
opacity:.045;
transform:rotate(-22deg);
}
@media(max-width:760px){
.premium-watermark{
grid-template-columns:1fr;
align-content:space-evenly;
gap:0;
padding:108px 10px 100px;
}
.premium-watermark span{
font-size:9px;
opacity:.038;
transform:rotate(-18deg);
}
/* On phones the Lesson switch belongs under the sticky header, not over
Safari/Chrome bottom controls or lesson action buttons. */
.lesson-quick-switch{
position:sticky;
top:72px;
left:auto;
bottom:auto;
transform:none;
width:calc(100% - 20px);
margin:8px auto 6px;
z-index:48;
}
body.lesson-view-active{padding-bottom:0!important}
}
\n\n/* =========================================================\n v6.15.45 · iOS watermark ultra-light\n Keep traceability without disturbing lesson readability.\n ========================================================= */\n.premium-watermark.ios-watermark{\n grid-template-columns:1fr!important;\n align-content:space-between!important;\n gap:0!important;\n padding:calc(118px + env(safe-area-inset-top,0px)) 14px calc(118px + env(safe-area-inset-bottom,0px))!important;\n}\n.premium-watermark.ios-watermark span{\n font-size:8px!important;\n font-weight:700!important;\n opacity:.018!important;\n letter-spacing:.02em!important;\n transform:rotate(-12deg)!important;\n text-shadow:none!important;\n}\n.premium-watermark.ios-watermark span:first-child{\n justify-self:start;\n text-align:left;\n max-width:88vw;\n overflow:hidden;\n}\n.premium-watermark.ios-watermark span:last-child{\n justify-self:end;\n text-align:right;\n max-width:88vw;\n overflow:hidden;\n}\n
/* ============================================================
v6.15.48 — Commercial state sync + inherited device admin clarity / Part E layout
============================================================ */
.commercial-device-v2{display:flex!important;align-items:center;justify-content:space-between;gap:12px;padding:11px 0!important}
.commercial-device-main{display:grid;gap:3px;min-width:0}
.commercial-device-main strong{font-size:13px;color:#173f37}
.commercial-device-main span{font-size:13px;font-weight:800;color:#2f5149;overflow-wrap:anywhere}
.commercial-device-main small{font-size:11.5px!important;line-height:1.4;color:#887d74}
.commercial-device-revoke{flex:0 0 auto;min-height:36px;padding:7px 10px;border:1px solid #efd8d1;background:#fff8f5;color:#9b4934;border-radius:10px;font-size:12px;font-weight:850}
.commercial-device-revoke:hover{background:#fff0eb}
.builder-part-card.part-e{grid-column:1/-1}
.builder-part-card.part-e>p{min-height:0}
.builder-part-upload{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start}
.builder-part-file-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:center;min-width:0}
.builder-part-file-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
.builder-file-picker{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 12px;border:1px solid #d7e3df;border-radius:11px;background:#fff;color:#24483f;font-size:13px;font-weight:850;cursor:pointer;white-space:nowrap}
.builder-file-picker:hover{background:#f5fbf8;border-color:#b9d9cf}
.builder-file-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;color:#776f68}
.builder-part-audio-buttons{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.builder-part-audio-buttons button{min-height:42px;font-size:13px!important;padding:9px 12px!important}
.builder-part-card.part-e .builder-part-upload{grid-template-columns:minmax(280px,1fr) auto minmax(240px,.7fr);align-items:center}
.builder-part-card.part-e .builder-readalong-action{min-width:0}
@media(max-width:900px){
.builder-part-card.part-e{grid-column:auto}
.builder-part-upload,.builder-part-card.part-e .builder-part-upload{grid-template-columns:1fr}
.builder-part-audio-buttons{display:grid;grid-template-columns:1fr 1fr}
.builder-part-audio-buttons button{width:100%}
}
@media(max-width:620px){
.commercial-device-v2{align-items:flex-start}
.commercial-device-revoke{min-height:40px}
.builder-part-file-row{grid-template-columns:1fr}
.builder-file-picker{width:100%}
.builder-file-name{text-align:center}
}
\n\n/* v6.15.49 · 4-month core + app extended roadmap */\n.course-roadmap-guide{margin:18px 0 8px;padding:22px;border:1px solid #dfd7cf;border-radius:24px;background:linear-gradient(180deg,#fffdf9 0%,#fff 100%);box-shadow:0 14px 34px rgba(74,61,48,.06)}\n.course-roadmap-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}\n.course-roadmap-intro h2{margin:4px 0 7px;font-size:clamp(24px,3vw,34px);line-height:1.18}\n.course-roadmap-intro p{margin:0;max-width:840px;color:#72675f;font-size:15px;line-height:1.65}\n.course-roadmap-plan-btn{flex:0 0 auto;white-space:nowrap}\n.course-roadmap-columns{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:16px}\n.course-roadmap-block{border:1px solid #e5ddd4;border-radius:20px;padding:18px;background:#fff}\n.course-roadmap-block.core{background:linear-gradient(180deg,#f7fff9 0%,#fff 100%);border-color:#cfe5d4}\n.course-roadmap-block.extended{background:linear-gradient(180deg,#f7fbff 0%,#fff 100%);border-color:#d5e1ec}\n.course-roadmap-block-head{display:flex;gap:11px;align-items:center;padding-bottom:13px;border-bottom:1px solid rgba(103,91,81,.12)}\n.course-roadmap-block-head>span{font-size:28px}\n.course-roadmap-block-head small{display:block;color:#84786f;font-weight:850;letter-spacing:.06em;font-size:11px;margin-bottom:3px}\n.course-roadmap-block-head strong{display:block;font-size:20px}\n.course-roadmap-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:13px}\n.course-roadmap-block.extended .course-roadmap-items{grid-template-columns:1fr}\n.course-roadmap-item{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;padding:11px;border:1px solid rgba(130,116,104,.12);border-radius:14px;background:rgba(255,255,255,.84)}\n.course-roadmap-num{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:#eef6ef;color:#276242;font-weight:950}\n.course-roadmap-block.extended .course-roadmap-num{background:#edf4fa;color:#355e78}\n.course-roadmap-item small{display:block;color:#8a7e74;font-size:10px;font-weight:900;letter-spacing:.05em;margin-bottom:3px}\n.course-roadmap-item strong{display:block;font-size:14px;line-height:1.25}\n.course-roadmap-complete{margin-top:13px;padding:11px 13px;border-radius:13px;background:rgba(15,143,131,.07);font-size:13px;font-weight:800;line-height:1.45}\n.course-roadmap-block.extended .course-roadmap-complete{background:rgba(54,102,138,.07)}\n@media(max-width:900px){.course-roadmap-columns{grid-template-columns:1fr}.course-roadmap-block.extended .course-roadmap-items{grid-template-columns:repeat(2,minmax(0,1fr))}}\n@media(max-width:650px){.course-roadmap-guide{padding:16px;border-radius:19px}.course-roadmap-intro{align-items:flex-start;flex-direction:column}.course-roadmap-plan-btn{width:100%}.course-roadmap-items,.course-roadmap-block.extended .course-roadmap-items{grid-template-columns:1fr}.course-roadmap-item{padding:10px}.course-roadmap-intro h2{font-size:24px}.course-roadmap-intro p{font-size:14px}}\n
/* v6.15.50 override · roadmap redesign with clearer VN/EN labels */
.course-roadmap-guide{margin:18px 0 8px;padding:24px;border:1px solid #dfd7cf;border-radius:28px;background:linear-gradient(180deg,#fffdf9 0%,#fff 100%);box-shadow:0 18px 40px rgba(74,61,48,.07)}
.course-roadmap-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:18px}
.course-roadmap-intro-copy{max-width:930px}
.course-roadmap-intro h2{margin:4px 0 9px;font-size:clamp(26px,3.15vw,36px);line-height:1.16;letter-spacing:-.03em}
.course-roadmap-intro p{margin:0;max-width:880px;color:#685d56;font-size:15.5px;line-height:1.72}
.course-roadmap-intro p strong{color:#203f37}
.course-roadmap-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.course-roadmap-pills span{display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:999px;background:#f7f3ee;border:1px solid #e6ddd4;color:#405550;font-size:12.5px;font-weight:850;line-height:1.2}
.course-roadmap-plan-btn{flex:0 0 auto;white-space:nowrap;align-self:flex-start;padding:12px 16px;font-size:14px;font-weight:900;border-radius:16px}
.course-roadmap-columns{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);gap:18px}
.course-roadmap-block{border:1px solid #e5ddd4;border-radius:24px;padding:18px;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.65)}
.course-roadmap-block.core{background:linear-gradient(180deg,#f5fff8 0%,#fff 100%);border-color:#cfe5d4}
.course-roadmap-block.extended{background:linear-gradient(180deg,#f6fbff 0%,#fff 100%);border-color:#d5e1ec}
.course-roadmap-block-head{display:flex;gap:12px;align-items:flex-start;padding-bottom:15px;border-bottom:1px solid rgba(103,91,81,.12)}
.course-roadmap-block-head>span{font-size:30px;line-height:1}
.course-roadmap-block-head small{display:block;color:#7d7269;font-weight:900;letter-spacing:.07em;font-size:11px;margin-bottom:4px}
.course-roadmap-block-head strong{display:block;font-size:22px;line-height:1.2;color:#243330}
.course-roadmap-block-head p{margin:5px 0 0;color:#6f645d;font-size:13.5px;line-height:1.55}
.course-roadmap-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.course-roadmap-block.extended .course-roadmap-items{grid-template-columns:1fr}
.course-roadmap-item{display:grid;grid-template-columns:70px minmax(0,1fr);gap:13px;align-items:flex-start;padding:14px;border:1px solid rgba(130,116,104,.14);border-radius:18px;background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(79,64,49,.05)}
.course-roadmap-num-wrap{display:flex;flex-direction:column;gap:8px;align-items:center}
.course-roadmap-num{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#e9f6eb;color:#275f40;font-weight:950;font-size:17px;box-shadow:inset 0 1px 0 rgba(255,255,255,.85)}
.course-roadmap-block.extended .course-roadmap-num{background:#eaf3fb;color:#355e78}
.course-roadmap-lesson-chip{display:inline-flex;justify-content:center;align-items:center;min-width:56px;padding:5px 8px;border-radius:999px;background:#f3f8f4;border:1px solid #dbe8dd;color:#52715f;font-size:10.5px;font-weight:900;letter-spacing:.03em;line-height:1.1;text-transform:uppercase}
.course-roadmap-block.extended .course-roadmap-lesson-chip{background:#f2f7fc;border-color:#d7e6f3;color:#54728a}
.course-roadmap-copy{min-width:0}
.course-roadmap-item small{display:block;color:#877a71;font-size:10.5px;font-weight:900;letter-spacing:.06em;margin-bottom:5px}
.course-roadmap-item strong{display:block;font-size:16px;line-height:1.3;color:#223330}
.course-roadmap-vi{margin-top:4px;color:#13645b;font-size:14px;font-weight:850;line-height:1.4}
.course-roadmap-block.extended .course-roadmap-vi{color:#315e7a}
.course-roadmap-item p{margin:6px 0 0;color:#6f645d;font-size:13px;line-height:1.58}
.course-roadmap-complete{margin-top:14px;padding:12px 14px;border-radius:15px;background:rgba(15,143,131,.08);font-size:13.5px;font-weight:850;line-height:1.55;color:#1d4f48}
.course-roadmap-block.extended .course-roadmap-complete{background:rgba(54,102,138,.08);color:#2d4f65}
@media(max-width:980px){.course-roadmap-columns{grid-template-columns:1fr}.course-roadmap-block.extended .course-roadmap-items{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.course-roadmap-guide{padding:18px;border-radius:22px}.course-roadmap-intro{flex-direction:column}.course-roadmap-plan-btn{width:100%}.course-roadmap-items,.course-roadmap-block.extended .course-roadmap-items{grid-template-columns:1fr}.course-roadmap-item{grid-template-columns:64px 1fr;padding:12px}.course-roadmap-intro h2{font-size:24px}.course-roadmap-intro p{font-size:14.5px}.course-roadmap-block-head strong{font-size:20px}}
/* v6.15.51 · Extended Path lock clarity */
.roadmap-lock-badge{display:inline-flex;align-items:center;margin-left:8px;padding:5px 9px;border-radius:999px;background:#edf4fa;border:1px solid #d5e1ec;color:#315e7a;font-size:11px;font-weight:900;vertical-align:middle;white-space:nowrap}
.course-roadmap-block.extended .course-roadmap-items{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.course-roadmap-block.extended .course-roadmap-items{grid-template-columns:1fr}.roadmap-lock-badge{margin-left:0;margin-top:7px}}
/* v6.15.52 · three-tier commercial model: FREE / PLUS AI / ADVANCED */
.commercial-plan-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.commercial-plan-card.advanced{background:linear-gradient(145deg,#f4fff8,#ecf9f1);border-color:#b9ddc5;}
.commercial-plan-card.advanced .commercial-plan-top strong{color:#235b3e;}
.advanced-action-box{background:linear-gradient(145deg,#f6fff9,#eef9f2);border-color:#c5e3cf;}
.commercial-status.advanced{background:#e8f6ed;color:#286345;}
.billing-plan-compare{grid-template-columns:repeat(3,minmax(0,1fr));}
.billing-plan-card.advanced{background:linear-gradient(145deg,#f4fff8,#eaf8ef);border-color:#bddfc8;}
.billing-plan-card.advanced .billing-plan-features span{background:#e2f3e8;color:#286345;}
.billing-action-card.advanced-action-card{margin-top:10px;background:linear-gradient(145deg,#f6fff9,#edf9f2);border-color:#c3dfcb;}
.plus-info-tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0;}
.plus-info-tier{display:grid;gap:5px;padding:14px;border:1px solid #e6ded7;border-radius:16px;background:#fbfaf8;}
.plus-info-tier>span{font-size:26px;}
.plus-info-tier>strong{font-size:15px;}
.plus-info-tier>b{font-size:18px;}
.plus-info-tier>small{font-size:11.5px;line-height:1.5;color:#756a62;}
.plus-info-tier.featured{background:linear-gradient(145deg,#fffdf4,#fff6d5);border-color:#ead69a;}
.plus-info-tier.advanced{background:linear-gradient(145deg,#f5fff8,#eaf8ef);border-color:#bddfc8;}
@media(max-width:1100px){.commercial-plan-grid,.billing-plan-compare{grid-template-columns:1fr 1fr}.commercial-plan-card.advanced,.billing-plan-card.advanced{grid-column:1/-1}}
@media(max-width:760px){.commercial-plan-grid,.billing-plan-compare,.plus-info-tier-grid{grid-template-columns:1fr}.commercial-plan-card.advanced,.billing-plan-card.advanced{grid-column:auto}}
/* v6.15.54 · original MP3 Read Along timing review */
.builder-readalong-action{display:grid;gap:9px;margin-top:10px}
.builder-readalong-action>.ghost{justify-self:start}
.builder-readalong-review{margin-top:4px;border:1px solid #dfe8e3;border-radius:16px;background:#fbfefc;overflow:hidden}
.builder-readalong-review summary{cursor:pointer;padding:12px 14px;font-size:13px;font-weight:900;color:#315c52;background:#f3faf6}
.builder-readalong-review-list{display:grid;gap:8px;padding:10px}
.builder-readalong-review-row{display:grid;grid-template-columns:30px minmax(0,1fr) 92px 92px auto;gap:8px;align-items:center;padding:9px;border:1px solid #e6ece8;border-radius:12px;background:#fff}
.builder-readalong-review-num{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:#eaf6ef;color:#2f6b4b;font-weight:950;font-size:12px}
.builder-readalong-review-copy{min-width:0}.builder-readalong-review-copy strong{display:block;font-size:12.5px;line-height:1.4;color:#273632}.builder-readalong-review-copy small{display:block;margin-top:3px;color:#786e67;font-size:11.5px;line-height:1.35}
.builder-readalong-review-row label{display:grid;gap:3px;color:#786e67;font-size:10px;font-weight:850}.builder-readalong-review-row input{width:100%;padding:7px 8px;border:1px solid #ddd7d1;border-radius:9px;font-size:12px;background:#fff}
.builder-readalong-review-row button{padding:8px 10px;border-radius:10px;font-size:11.5px;white-space:nowrap}
.builder-readalong-review-actions{display:flex;justify-content:flex-end;gap:8px;padding:0 10px 10px}.builder-readalong-review-actions button{padding:9px 12px;border-radius:10px;font-size:12px;font-weight:900}
.builder-readalong-review-note{display:block;padding:0 12px 12px;color:#6c625b;font-size:11.5px;line-height:1.45}
@media(max-width:760px){.builder-readalong-review-row{grid-template-columns:28px minmax(0,1fr)}.builder-readalong-review-row label,.builder-readalong-review-row button{grid-column:2}.builder-readalong-review-actions{flex-direction:column}.builder-readalong-review-actions button{width:100%}.builder-readalong-action>.ghost{justify-self:stretch}}
/* v6.15.56 · Read Along timing review — readable on narrow desktop/tablet/mobile panels */
.builder-readalong-review{border-radius:20px;background:#fcfffd;border-color:#d7e7de;box-shadow:0 10px 28px rgba(35,77,66,.05)}
.builder-readalong-review summary{padding:15px 18px;font-size:15px;line-height:1.35;color:#24584d;background:linear-gradient(180deg,#f4fbf7,#eff8f3);position:sticky;top:0;z-index:2}
.builder-readalong-review-list{gap:12px;padding:14px}
.builder-readalong-review-row{display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-areas:"num copy" ". controls";gap:10px 12px;align-items:start;padding:14px;border:1px solid #dfe8e3;border-radius:16px;background:#fff;min-width:0}
.builder-readalong-review-num{grid-area:num;width:34px;height:34px;border-radius:11px;font-size:13px;align-self:start}
.builder-readalong-review-copy{grid-area:copy;min-width:0;padding:1px 0 2px}
.builder-readalong-review-copy strong{display:block;font-size:16px;line-height:1.5;color:#203630;font-weight:850;white-space:normal;overflow-wrap:normal;word-break:normal}
.builder-readalong-review-copy small{display:block;margin-top:7px;color:#6f655f;font-size:14px;line-height:1.55;white-space:normal;overflow-wrap:normal;word-break:normal}
.builder-readalong-review-controls{grid-area:controls;display:grid;grid-template-columns:minmax(110px,150px) minmax(110px,150px) minmax(130px,auto);gap:10px;align-items:end;min-width:0}
.builder-readalong-review-controls label{display:grid;gap:5px;color:#645b55;font-size:12px;font-weight:900;min-width:0}
.builder-readalong-review-controls label span{font-weight:700;color:#8a8079;font-size:10.5px}
.builder-readalong-review-controls input{width:100%;min-height:42px;padding:9px 11px;border:1px solid #d6d9d5;border-radius:11px;font-size:14px;font-weight:800;background:#fff;color:#213a34}
.builder-readalong-review-controls button{min-height:42px;padding:9px 14px;border-radius:11px;font-size:13px;font-weight:900;white-space:nowrap}
.builder-readalong-review-actions{padding:2px 14px 14px;gap:10px;flex-wrap:wrap}
.builder-readalong-review-actions button{min-height:42px;padding:10px 14px;font-size:13px}
.builder-readalong-review-note{padding:0 16px 15px;font-size:12.5px;line-height:1.55}
.builder-readalong-action>.ghost.builder-readalong-ready{display:none!important}
@media(max-width:900px){
.builder-readalong-review-controls{grid-template-columns:1fr 1fr}
.builder-readalong-review-controls button{grid-column:1/-1;width:100%}
}
@media(max-width:620px){
.builder-readalong-review-list{padding:10px}
.builder-readalong-review-row{grid-template-columns:32px minmax(0,1fr);gap:9px;padding:12px}
.builder-readalong-review-num{width:30px;height:30px}
.builder-readalong-review-copy strong{font-size:15px;line-height:1.48}
.builder-readalong-review-copy small{font-size:13px;line-height:1.5}
.builder-readalong-review-controls{grid-template-columns:1fr}
.builder-readalong-review-controls button{grid-column:auto}
.builder-readalong-review-actions{flex-direction:column}
.builder-readalong-review-actions button{width:100%}
}
/* v6.15.57 · Read Along timing review — center Preview/Nghe button text reliably */
.builder-readalong-review-controls button[data-ra-preview]{
display:flex!important;
align-items:center!important;
justify-content:center!important;
text-align:center!important;
width:100%!important;
min-width:0!important;
line-height:1.2!important;
padding-left:14px!important;
padding-right:14px!important;
}
@media(max-width:900px){
.builder-readalong-review-controls button[data-ra-preview]{justify-self:stretch!important;}
}
@media(max-width:620px){
.builder-readalong-review-controls button[data-ra-preview]{min-height:46px!important;font-size:13.5px!important;}
}
/* v6.15.59 · keep “Nghe” labels visible + centered in Teacher Part/Read Along controls */
.builder-part-listen-button,
.builder-ra-preview-button{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
text-align:center!important;
color:#213a34!important;
opacity:1;
line-height:1.2!important;
white-space:nowrap!important;
}
.builder-part-listen-button .builder-listen-icon,
.builder-ra-preview-button .builder-listen-icon{
display:inline-block!important;
flex:0 0 auto!important;
font-size:1em!important;
line-height:1!important;
color:currentColor!important;
opacity:1!important;
visibility:visible!important;
}
.builder-part-listen-button .builder-listen-text,
.builder-ra-preview-button .builder-listen-text{
display:inline-block!important;
flex:0 1 auto!important;
min-width:max-content!important;
color:currentColor!important;
font-size:inherit!important;
font-weight:inherit!important;
line-height:inherit!important;
opacity:1!important;
visibility:visible!important;
text-indent:0!important;
}
.builder-part-listen-button{min-width:94px!important;min-height:42px!important;padding:9px 14px!important;}
.builder-ra-preview-button{width:100%!important;min-width:135px!important;min-height:42px!important;padding:9px 14px!important;}
.builder-part-listen-button.builder-disabled-action{opacity:.55!important;}
@media(max-width:620px){
.builder-part-listen-button,.builder-ra-preview-button{width:100%!important;min-width:0!important;min-height:46px!important;}
}
/* v6.15.60 · Read Along preview button — never clip “Nghe câu” in narrow Teacher panels */
.builder-readalong-review-controls{
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
overflow:visible!important;
}
.builder-readalong-review-controls .builder-ra-preview-button,
.builder-readalong-review-controls button[data-ra-preview]{
grid-column:1 / -1!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
justify-self:stretch!important;
overflow:visible!important;
white-space:normal!important;
}
.builder-readalong-review-controls .builder-ra-preview-button .builder-listen-text{
min-width:0!important;
max-width:100%!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
}
@media(max-width:620px){
.builder-readalong-review-controls{grid-template-columns:1fr!important;}
.builder-readalong-review-controls .builder-ra-preview-button,
.builder-readalong-review-controls button[data-ra-preview]{grid-column:1!important;}
}
/* =========================================================
v6.15.63 — SIMPLE STUDENT CONTENT + QUICK DICTIONARY
========================================================= */
.lesson-hero-tools{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.lesson-dictionary-trigger{
min-height:48px;padding:11px 15px;border:1px solid #cfe5de;border-radius:14px;
background:#f4fbf8;color:#126f67;font-weight:900;cursor:pointer;white-space:nowrap;
box-shadow:0 8px 20px rgba(15,118,110,.06)
}
.lesson-dictionary-trigger:hover{background:#eaf8f3;border-color:#aad9cc}
/* Vocabulary: show only what a learner needs first; keep all source data behind Xem thêm. */
.vocab-card.vocab-card-compact{display:block!important;padding:15px 16px!important;min-width:0}
.vocab-compact-top{display:block}
.vocab-term-row{display:flex;align-items:center;gap:8px;min-width:0}
.vocab-term-row .vocab-term{font-size:20px!important;line-height:1.25;overflow-wrap:anywhere}
.vocab-core-copy{min-width:0}
.vocab-card-compact .vocab-ipa{margin-top:3px;font-size:12px!important}
.vocab-card-compact .vocab-meaning{margin-top:4px;font-size:14px!important;font-style:normal;color:#625d57;font-weight:750;line-height:1.45}
.vocab-icon-listen{
width:34px;height:34px;min-width:34px;padding:0;border:1px solid #d9e4df;border-radius:10px;
display:grid;place-items:center;background:#fff;color:#195f59;cursor:pointer;font-size:15px
}
.vocab-icon-listen:hover{background:#edf9f5}
.vocab-example.vocab-example-compact{
margin-top:10px!important;padding:10px 11px!important;display:flex!important;align-items:flex-start;justify-content:space-between;gap:10px;
background:#fffaf3!important;border:1px solid #f0e4d5;border-radius:11px!important
}
.vocab-example-compact>div{display:grid;gap:3px;min-width:0}
.vocab-example-compact strong{font-size:13.5px!important;line-height:1.45;color:#3f3c38}
.vocab-example-compact span{font-size:12px!important;line-height:1.45;color:#7d756e!important}
.vocab-more{margin-top:8px;border-top:1px solid #eee8e1;padding-top:7px}
.vocab-more>summary{list-style:none;cursor:pointer;color:#16756d;font-size:12.5px;font-weight:900;display:inline-flex;align-items:center;gap:5px}
.vocab-more>summary::-webkit-details-marker{display:none}
.vocab-more>summary::after{content:"＋";font-size:14px}
.vocab-more[open]>summary::after{content:"−"}
.vocab-more .vocab-expand{margin-top:9px!important;gap:7px!important}
.vocab-more .vocab-mini-row{font-size:12px!important;line-height:1.5;display:grid!important;grid-template-columns:78px minmax(0,1fr);gap:7px}
.vocab-more .vocab-mini-row strong{min-width:0!important}
.vocab-extra-example{margin:0!important;padding:9px 0!important;border-top:0!important;display:flex;justify-content:space-between;gap:10px;font-size:12px!important}
.vocab-extra-example>div{min-width:0}
.vocab-extra-example p{margin:3px 0 0;font-size:13px;line-height:1.45;color:#4f4944}
.vocab-extra-example span{font-size:12px!important;line-height:1.45}
/* Grammar: formula + one example first, long explanations are optional. */
.grammar-intro-compact{padding:12px 14px!important}
.grammar-intro-compact>summary{cursor:pointer;font-size:13px;font-weight:900;color:#0b7b71;list-style:none}
.grammar-intro-compact>summary::-webkit-details-marker{display:none}
.grammar-intro-compact>summary::after{content:" ＋"}
.grammar-intro-compact[open]>summary::after{content:" −"}
.grammar-intro-compact p{font-size:13.5px!important;line-height:1.55!important;margin-top:8px!important}
.grammar-point-card-compact{padding:14px!important}
.grammar-point-card-compact .grammar-point-main h3{font-size:18px!important;line-height:1.35}
.grammar-formula-compact{margin-top:8px!important;padding:9px 10px!important}
.grammar-formula-compact strong{font-size:14px!important;line-height:1.45!important}
.grammar-point-card-compact .grammar-example-list{margin-top:8px}
.grammar-point-card-compact .grammar-example-row{padding:8px 10px!important}
.grammar-more{margin-top:9px;border-top:1px solid #e8e5df;padding-top:8px}
.grammar-more>summary{cursor:pointer;list-style:none;font-size:12.5px;font-weight:900;color:#14736b}
.grammar-more>summary::-webkit-details-marker{display:none}
.grammar-more>summary::after{content:" ＋"}
.grammar-more[open]>summary::after{content:" −"}
.grammar-more-body{margin-top:9px;display:grid;gap:8px}
.grammar-more-body>p{margin:0!important;font-size:13.5px!important;line-height:1.6!important;color:#625e58}
.grammar-point-stack-compact{gap:9px!important}
/* Dictionary utility. It is a tool, not a new lesson module. */
body.dictionary-open{overflow:hidden}
.dictionary-modal{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:18px}
.dictionary-modal.hidden{display:none!important}
.dictionary-backdrop{position:absolute;inset:0;background:rgba(20,31,28,.46);backdrop-filter:blur(4px)}
.dictionary-panel{
position:relative;z-index:1;width:min(720px,100%);max-height:min(760px,calc(100vh - 36px));overflow:auto;
background:#fffdfa;border:1px solid #e4ddd4;border-radius:22px;box-shadow:0 30px 90px rgba(30,45,39,.25);padding:20px
}
.dictionary-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.dictionary-kicker{font-size:11px;font-weight:950;letter-spacing:.09em;color:#0f8176}
.dictionary-head h2{margin:4px 0 4px;font-size:25px;line-height:1.2}
.dictionary-head p{margin:0;color:#716b65;font-size:13px;line-height:1.5;max-width:540px}
.dictionary-close{width:38px;height:38px;border-radius:12px;border:1px solid #e1dbd4;background:#fff;cursor:pointer;font-size:24px;line-height:1}
.dictionary-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;margin-top:16px}
.dictionary-search-box{display:flex;align-items:center;gap:8px;border:1px solid #d6ddd8;background:#fff;border-radius:13px;padding:0 12px;min-height:48px}
.dictionary-search-box:focus-within{border-color:#79bfb1;box-shadow:0 0 0 3px rgba(15,143,131,.10)}
.dictionary-search-box input{border:0;outline:0;background:transparent;width:100%;min-width:0;font-size:15px;color:#243b35}
.dictionary-search-btn{min-height:48px;padding-inline:18px!important}
.dictionary-hint{margin:7px 2px 0;color:#847c75;font-size:11.5px}
.dictionary-results{margin-top:14px;display:grid;gap:10px}
.dictionary-empty{min-height:180px;border:1px dashed #d9ded9;border-radius:16px;background:#fafcfb;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:6px}
.dictionary-empty>span{font-size:31px}.dictionary-empty strong{font-size:15px}.dictionary-empty small{color:#7c756e;line-height:1.45}
.dictionary-empty-search{min-height:210px}.dictionary-online-btn{margin-top:7px}
.dictionary-loading{padding:30px;text-align:center;color:#5f6c67;font-weight:800}
.dictionary-result-summary{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:0 2px;color:#756e68;font-size:11.5px}
.dictionary-result-summary strong{color:#35534b;font-size:13px}
.dictionary-result-card{border:1px solid #dfdfda;border-radius:16px;background:#fff;padding:14px}
.dictionary-result-card.is-remote{border-color:#cfe5de;background:#fbfffd}
.dictionary-result-top{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.dictionary-word-row{display:flex;align-items:center;gap:8px}.dictionary-word-row h3{margin:0;font-size:21px;line-height:1.25}
.dictionary-speak{width:32px;height:32px;border:1px solid #dbe4df;background:#fff;border-radius:9px;cursor:pointer;padding:0}
.dictionary-ipa{margin-top:2px;color:#657973;font-size:12px;font-weight:800}
.dictionary-meaning{margin-top:4px;font-size:14px;font-weight:800;color:#4a4844}
.dictionary-source{padding:5px 8px;border-radius:999px;background:#edf8f4;color:#146b63;font-size:10.5px;font-weight:900;white-space:nowrap}
.dictionary-lesson{margin-top:7px;color:#8a817a;font-size:11.5px}
.dictionary-example{margin-top:10px;padding:10px 11px;border-radius:11px;background:#fff8ef;display:flex;justify-content:space-between;gap:10px}
.dictionary-example>div{display:grid;gap:3px}.dictionary-example strong{font-size:13.5px;line-height:1.45}.dictionary-example span{font-size:12px;color:#7b746d;line-height:1.45}
.dictionary-more{margin-top:8px;border-top:1px solid #eee8e1;padding-top:7px}.dictionary-more>summary{cursor:pointer;list-style:none;color:#14736b;font-size:12px;font-weight:900}
.dictionary-more>summary::-webkit-details-marker{display:none}.dictionary-more>summary::after{content:" ＋"}.dictionary-more[open]>summary::after{content:" −"}
.dictionary-more-body{margin-top:8px;display:grid;gap:7px}.dictionary-more-body .vocab-mini-row{font-size:12px!important;display:grid;grid-template-columns:78px 1fr;gap:6px}
.dictionary-extra{display:flex;justify-content:space-between;gap:10px;padding:5px 0}.dictionary-extra p{margin:3px 0;font-size:13px;line-height:1.45}.dictionary-extra span{font-size:12px;color:#7b746d}
@media(max-width:700px){
.lesson-hero-tools{width:100%;justify-content:space-between;align-items:stretch}
.lesson-dictionary-trigger{flex:1}
.lesson-score-card{flex:0 0 auto}
.dictionary-modal{padding:0;align-items:end}
.dictionary-panel{width:100%;max-height:88vh;border-radius:22px 22px 0 0;padding:17px 15px 20px}
.dictionary-search-row{grid-template-columns:1fr}
.dictionary-search-btn{width:100%}
.dictionary-result-top{gap:8px}
.dictionary-source{font-size:10px}
.vocab-grid{gap:10px!important}
.vocab-card.vocab-card-compact{padding:13px 14px!important}
.grammar-point-card-compact{grid-template-columns:38px minmax(0,1fr)!important;padding:12px!important}
}
@media(max-width:430px){
.lesson-hero-tools{display:grid;grid-template-columns:1fr auto;gap:8px}
.lesson-dictionary-trigger span{display:inline}
.dictionary-head h2{font-size:22px}
.dictionary-result-summary{align-items:flex-start;flex-direction:column;gap:2px}
}
@media(max-width:700px){
.lesson-hero{flex-direction:column!important;align-items:stretch!important}
.lesson-hero>div:first-child{width:100%;min-width:0}
}
.dictionary-meta-line{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:2px}
.dictionary-meta-line .dictionary-ipa{margin-top:0}
.dictionary-pos{font-size:10.5px;font-weight:900;color:#765f45;background:#fff3df;border:1px solid #f0dcc0;border-radius:999px;padding:2px 6px}
/* Keep AI rules available without letting them dominate the learning screen. */
.compact-policy-wrap{margin:10px 0 14px;border:1px solid #e2e2dc;border-radius:13px;background:#fff;overflow:hidden}
.compact-policy-wrap>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;padding:9px 11px;color:#3e514b;font-size:12.5px}
.compact-policy-wrap>summary::-webkit-details-marker{display:none}
.compact-policy-wrap>summary span{font-weight:900}.compact-policy-wrap>summary b{margin-left:auto;color:#0d746b;font-size:11.5px}.compact-policy-wrap>summary small{color:#8a827b;font-size:10.5px}
.compact-policy-wrap>summary::after{content:"＋";color:#71817c;font-weight:900}.compact-policy-wrap[open]>summary::after{content:"−"}
.compact-policy-wrap>.ai-policy-card{margin:0!important;border:0!important;border-top:1px solid #ece9e4!important;border-radius:0!important;box-shadow:none!important}
#view-lesson .ai-badge-row .ai-stt-badge,#view-lesson .ai-badge-row .ai-tts-badge{display:none!important}
@media(max-width:620px){.compact-policy-wrap>summary{flex-wrap:wrap}.compact-policy-wrap>summary b{margin-left:0}.compact-policy-wrap>summary small{margin-left:auto}}
/* =========================================================
v6.15.64 — CLARITY LAYER · WHOLE WEB
Goal: fewer words on screen, stronger hierarchy, same functions.
========================================================= */
body.clarity-ui{
--clarity-gap:14px;
--clarity-radius:18px;
}
body.clarity-ui .container{padding-top:18px;padding-bottom:24px}
body.clarity-ui .view .breadcrumb{margin-bottom:12px}
body.clarity-ui .home-hero,
body.clarity-ui .track-hero,
body.clarity-ui .course-hero,
body.clarity-ui .lesson-hero,
body.clarity-ui .teacher-hero{margin-bottom:16px}
body.clarity-ui .section-block{margin-top:18px;margin-bottom:18px}
body.clarity-ui .section-title-row{margin-bottom:12px}
body.clarity-ui .section-title-row h2,
body.clarity-ui .activity-heading h2,
body.clarity-ui .teacher-section-head h2{margin-bottom:4px}
body.clarity-ui p,
body.clarity-ui .section-subtitle,
body.clarity-ui .muted{line-height:1.5}
body.clarity-ui .section-subtitle,
body.clarity-ui .teacher-section-head p,
body.clarity-ui .activity-heading p{max-width:70ch}
/* Public pages: keep the promise obvious, move decoration to the background. */
body.clarity-ui .home-hero-copy p{max-width:58ch}
body.clarity-ui .home-hero-visual-chips{display:none}
body.clarity-ui .public-feature-ribbon{gap:10px;margin-top:14px}
body.clarity-ui .public-feature-ribbon>div{padding:12px 14px;min-height:0}
body.clarity-ui .public-feature-ribbon small{margin-top:2px;line-height:1.35}
body.clarity-ui .value-card{padding:16px;min-height:0}
body.clarity-ui .value-card p{margin-top:5px}
body.clarity-ui .track-value-strip{padding:16px}
body.clarity-ui .course-roadmap-guide{padding:16px}
body.clarity-ui .course-roadmap-guide p{max-width:72ch}
/* Student home: summary first, less decorative copy. */
body.clarity-ui .student-dash-card{padding:16px}
body.clarity-ui .student-dashboard-top,
body.clarity-ui .student-dashboard-bottom,
body.clarity-ui .student-dashboard-summary-row{gap:12px;margin-top:12px}
body.clarity-ui .student-card-sub,
body.clarity-ui .student-streak-card p,
body.clarity-ui .student-progress-banner p{margin-top:5px}
body.clarity-ui .student-motivation-quote{padding:8px 12px;margin-top:10px}
/* Lesson: one clear action per screen, same data underneath. */
body.clarity-ui .lesson-hero{padding:18px 20px}
body.clarity-ui .lesson-hero p{max-width:64ch;margin-top:5px}
body.clarity-ui .lesson-flow-guide{padding:12px 14px;margin:12px 0}
body.clarity-ui .lesson-flow-guide-copy small{display:none}
body.clarity-ui .skill-tabs--flow{margin:12px 0 16px;gap:7px}
body.clarity-ui .skill-tab{min-height:44px;padding:9px 12px}
body.clarity-ui .skill-panel{padding-top:0}
body.clarity-ui .activity-heading{gap:12px;margin-bottom:12px;padding-bottom:10px}
body.clarity-ui .activity-heading p{margin-top:4px}
body.clarity-ui .flow-subnav{margin-bottom:12px}
body.clarity-ui .vocab-grid{gap:12px}
body.clarity-ui .vocab-card{padding:15px}
body.clarity-ui .vocab-card details{margin-top:8px}
body.clarity-ui .vocab-recall-shell,
body.clarity-ui .ai-speaking-card,
body.clarity-ui .grammar-ai-card,
body.clarity-ui .writing-card,
body.clarity-ui .reading-card{margin-top:12px}
body.clarity-ui .vocab-recall-head{padding:16px}
body.clarity-ui .flash-audio-note{font-size:16px;line-height:1.45}
body.clarity-ui .ai-policy-card{margin:10px 0}
body.clarity-ui .reading-readalong-label small{display:none}
body.clarity-ui .grammar-intro-compact{margin-bottom:10px}
body.clarity-ui .grammar-point{padding:15px}
body.clarity-ui .quiz-coverage{margin-bottom:10px}
/* Dictionary: compact utility, not another learning module. */
body.clarity-ui .lesson-dictionary-modal{max-height:min(76vh,680px)}
body.clarity-ui .dictionary-hint{font-size:16px;line-height:1.4}
body.clarity-ui .dictionary-result-card{padding:14px}
/* Teacher: controls and data first; help text stays secondary. */
body.clarity-ui .teacher-hero{padding:18px 20px}
body.clarity-ui .teacher-hero p{max-width:62ch;margin-top:5px}
body.clarity-ui .teacher-stats{gap:10px;margin:12px 0}
body.clarity-ui .teacher-stat{padding:12px 14px}
body.clarity-ui .teacher-tabs{gap:6px;margin-bottom:14px}
body.clarity-ui .teacher-tab{padding:9px 11px;min-height:42px}
body.clarity-ui .teacher-section{padding:16px}
body.clarity-ui .teacher-section-head{gap:12px;margin-bottom:12px}
body.clarity-ui #view-teacher .muted{font-size:16px}
body.clarity-ui #view-teacher .field{margin-bottom:10px}
body.clarity-ui #view-teacher table th,
body.clarity-ui #view-teacher table td{padding-top:10px;padding-bottom:10px}
body.clarity-ui .builder-help,
body.clarity-ui .shadow-auto-help{line-height:1.45}
/* Billing/support: put current state and primary action before explanations. */
body.clarity-ui .billing-head{padding-bottom:12px}
body.clarity-ui .billing-head p{margin-top:4px}
body.clarity-ui .billing-section{padding:14px 0}
body.clarity-ui .billing-section-head{margin-bottom:10px}
body.clarity-ui .billing-section-head p{margin-top:3px}
body.clarity-ui .billing-plan-card{padding:14px}
body.clarity-ui .billing-plan-features{gap:6px}
body.clarity-ui .support-credit-rule{padding:10px 12px}
/* Policy stays complete by design, but reads as shorter chunks. */
body.clarity-ui .policy-body{line-height:1.55}
body.clarity-ui .policy-section{padding:14px 0}
body.clarity-ui .policy-section h3{margin-bottom:7px}
body.clarity-ui .policy-callout{padding:12px 14px}
/* Desktop and mobile density without shrinking readable type. */
@media (max-width:900px){
body.clarity-ui .container{padding-top:12px;padding-bottom:18px}
body.clarity-ui .public-feature-ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}
body.clarity-ui .public-feature-ribbon>div:nth-child(n+5){display:none}
body.clarity-ui .lesson-hero,
body.clarity-ui .teacher-hero{padding:15px}
body.clarity-ui .activity-heading{align-items:flex-start}
body.clarity-ui .teacher-tabs{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
body.clarity-ui .teacher-tab{white-space:nowrap;flex:0 0 auto}
}
@media (max-width:600px){
body.clarity-ui .public-feature-ribbon{display:none}
body.clarity-ui .student-motivation-quote{display:none}
body.clarity-ui .lesson-flow-guide-copy strong{font-size:16px;line-height:1.4}
body.clarity-ui .skill-tabs--flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
body.clarity-ui .skill-tab{width:100%;justify-content:center;padding:9px 7px}
body.clarity-ui .activity-heading{display:block}
body.clarity-ui .activity-heading-actions,
body.clarity-ui .activity-heading>.complete-skill{margin-top:10px}
body.clarity-ui .teacher-section{padding:13px}
body.clarity-ui .billing-section{padding:12px 0}
}
/* =========================================================
v6.15.65 — SIMPLE FIRST · GLOBAL PROGRESSIVE DISCLOSURE
Keep the same functions/data. Show the action first; detail on demand.
========================================================= */
body.clarity-ui .tagline,
body.clarity-ui .status-pill,
body.clarity-ui .header-home-link{display:none!important}
body.clarity-ui .header-inner{padding:9px 0!important;gap:10px}
body.clarity-ui .header-actions{gap:6px!important}
body.clarity-ui .nav-pill{padding:7px 10px!important;min-height:38px;border-radius:12px!important}
body.clarity-ui .header-dictionary-link{background:#eefaf6!important;border-color:#bfe3d8!important;color:#0a6e65!important}
body.clarity-ui .brand{font-size:18px!important}
/* Public / dashboard: remove decorative lines before removing useful content. */
body.clarity-ui #view-home #homeHeroEyebrow,
body.clarity-ui #view-home #homeMotivationLine,
body.clarity-ui #view-home .home-hero-visual-chips{display:none!important}
body.clarity-ui .home-hero{padding-top:22px!important;gap:16px!important}
body.clarity-ui .home-hero-copy{padding:24px!important}
body.clarity-ui .home-hero h1{margin:0 0 9px!important;font-size:clamp(31px,4.6vw,50px)!important}
body.clarity-ui .home-hero p{margin:0!important;line-height:1.5!important}
body.clarity-ui .hero-actions{margin-top:16px!important}
body.clarity-ui .section-title-row .eyebrow{display:none!important}
body.clarity-ui .section-title-row h2{margin-top:0!important}
body.clarity-ui .section-subtitle{margin-top:4px!important}
body.clarity-ui .track-card,
body.clarity-ui .course-card,
body.clarity-ui .season-card{padding:15px 16px!important}
body.clarity-ui .track-card p,
body.clarity-ui .course-card p,
body.clarity-ui .season-card p{font-size:13px!important;line-height:1.45!important}
/* Lesson: title + progress + activity first. Help is one tap away. */
body.clarity-ui #view-lesson .lesson-hero .eyebrow,
body.clarity-ui #view-lesson .activity-heading .eyebrow{display:none!important}
body.clarity-ui #view-lesson .lesson-hero{padding:14px 16px!important;margin-bottom:10px!important}
body.clarity-ui #view-lesson .lesson-hero h1{margin:0 0 4px!important;font-size:clamp(27px,4vw,40px)!important;line-height:1.15!important}
body.clarity-ui #view-lesson .lesson-hero p{margin:0!important;font-size:14px!important;line-height:1.45!important}
body.clarity-ui #lessonDictionaryBtn{display:none!important}
body.clarity-ui .lesson-score-card{min-width:104px!important;padding:9px 12px!important;border-radius:14px!important}
body.clarity-ui .lesson-score-card .big-percent{font-size:27px!important;line-height:1.1}
body.clarity-ui .lesson-score-card>div:last-child{font-size:11px!important;margin-top:2px}
body.clarity-ui .lesson-flow-guide{padding:9px 11px!important;margin:8px 0 10px!important;min-height:0!important}
body.clarity-ui .lesson-flow-guide-copy>span,
body.clarity-ui .lesson-flow-guide-copy>small{display:none!important}
body.clarity-ui .lesson-flow-guide-copy strong{font-size:13.5px!important;line-height:1.4!important}
body.clarity-ui .lesson-flow-current{font-size:11.5px!important;white-space:nowrap}
body.clarity-ui .skill-tabs--flow{margin:8px 0 12px!important;padding:0!important;top:62px!important}
body.clarity-ui .skill-tab{min-height:40px!important;padding:7px 10px!important;font-size:13px!important}
body.clarity-ui .activity-heading{margin:4px 0 9px!important;padding-bottom:7px!important;align-items:center!important}
body.clarity-ui .activity-heading h2{font-size:24px!important;line-height:1.25!important;margin:0!important}
body.clarity-ui .complete-skill{padding:8px 10px!important;min-height:38px!important;font-size:12px!important;border-radius:11px!important}
body.clarity-ui .flow-subnav{margin:4px 0 9px!important;gap:6px!important}
body.clarity-ui .flow-subnav button{padding:7px 10px!important;font-size:12.5px!important}
body.clarity-ui .compact-inline-help{margin-top:5px;width:max-content;max-width:100%}
body.clarity-ui .compact-inline-help>summary{list-style:none;cursor:pointer;color:#0c746b;font-size:11.5px;font-weight:900;display:inline-flex;align-items:center;gap:4px}
body.clarity-ui .compact-inline-help>summary::-webkit-details-marker{display:none}
body.clarity-ui .compact-inline-help>summary::after{content:"＋"}
body.clarity-ui .compact-inline-help[open]>summary::after{content:"−"}
body.clarity-ui .compact-inline-help>p{margin:5px 0 0!important;padding:7px 9px!important;border-radius:9px;background:#f7faf8;color:#665f59!important;font-size:12px!important;line-height:1.45!important;max-width:58ch!important}
body.clarity-ui .flash-audio-note{font-size:12px!important;margin-top:7px!important}
body.clarity-ui .exercise-stack{gap:9px!important}
body.clarity-ui .exercise-item{padding:14px!important}
body.clarity-ui .reading-card,
body.clarity-ui .writing-card,
body.clarity-ui .ai-speaking-card,
body.clarity-ui .grammar-ai-card{padding:16px!important}
/* AI rule blocks stay complete, but never dominate the first screen. */
body.clarity-ui .compact-policy-wrap{margin:7px 0 10px!important}
body.clarity-ui .compact-policy-wrap>summary{min-height:38px!important;padding:7px 9px!important}
body.clarity-ui .compact-policy-wrap>summary small{font-size:10px!important}
/* Teacher: keep controls and status; reduce explanatory chrome. */
body.clarity-ui #view-teacher .teacher-hero .eyebrow,
body.clarity-ui #view-teacher .teacher-hero p{display:none!important}
body.clarity-ui #view-teacher .teacher-hero{padding:14px 16px!important;margin-bottom:10px!important}
body.clarity-ui #view-teacher .teacher-hero h1{margin:0!important;font-size:29px!important}
body.clarity-ui #view-teacher .teacher-stats{margin:8px 0!important}
body.clarity-ui #view-teacher .teacher-stat{padding:9px 11px!important}
body.clarity-ui #view-teacher .teacher-section{padding:13px!important}
body.clarity-ui #view-teacher .teacher-section-head{margin-bottom:9px!important}
body.clarity-ui #view-teacher .compact-secondary-copy{font-size:12px!important;line-height:1.45!important;color:#777069!important;margin-top:4px!important}
body.clarity-ui #view-teacher .teacher-tab{min-height:38px!important;padding:7px 9px!important}
/* Billing / account: state and next action before policy text. */
body.clarity-ui .billing-head p{font-size:12.5px!important;line-height:1.45!important}
body.clarity-ui .billing-section-head p{font-size:12px!important;line-height:1.4!important}
body.clarity-ui .account-learning-access span{font-size:11.5px!important;line-height:1.4!important}
/* Global quick lookup. */
body.clarity-ui .dictionary-panel{width:min(680px,100%)!important;padding:17px!important;border-radius:18px!important}
body.clarity-ui .dictionary-head h2{font-size:22px!important;margin:2px 0 3px!important}
body.clarity-ui .dictionary-head p{font-size:12px!important;line-height:1.4!important}
body.clarity-ui .dictionary-search-row{margin-top:12px!important}
body.clarity-ui .dictionary-hint{font-size:11px!important;margin-top:5px!important}
body.clarity-ui .dictionary-results{margin-top:10px!important}
body.clarity-ui .dictionary-empty{min-height:140px!important;padding:18px!important}
body.clarity-ui .dictionary-sentence-card{display:grid;gap:9px}
body.clarity-ui .dictionary-sentence-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
body.clarity-ui .dictionary-sentence-original{font-size:17px;font-weight:900;line-height:1.45;color:#2d403a}
body.clarity-ui .dictionary-sentence-meaning,
body.clarity-ui .dictionary-correction{display:grid;gap:3px;padding:9px 10px;border-radius:10px;background:#f5faf8}
body.clarity-ui .dictionary-sentence-meaning strong,
body.clarity-ui .dictionary-correction strong{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:#17736b}
body.clarity-ui .dictionary-sentence-meaning span,
body.clarity-ui .dictionary-correction span{font-size:14px;line-height:1.5}
body.clarity-ui .dictionary-correction.needs-fix{background:#fff7e9;border:1px solid #f0d5a6}
body.clarity-ui .dictionary-sentence-chunks{display:grid;gap:5px}
body.clarity-ui .dictionary-sentence-chunks>div{display:grid;grid-template-columns:minmax(110px,.7fr) 1fr;gap:8px;padding:6px 8px;border-radius:8px;background:#f8f8f5}
body.clarity-ui .dictionary-sentence-chunks b{font-size:12px;color:#29483f}
body.clarity-ui .dictionary-sentence-chunks span{font-size:12px;color:#6f6862}
body.clarity-ui .dictionary-grammar-note,
body.clarity-ui .dictionary-alt{display:grid;gap:4px;font-size:12px;line-height:1.45}
body.clarity-ui .dictionary-alt>div{display:flex;align-items:center;justify-content:space-between;gap:8px}
body.clarity-ui .dictionary-alt small{color:#7b746d}
/* Footer: keep navigation, remove repeated plan marketing. */
body.clarity-ui footer{padding:20px 0 26px!important}
body.clarity-ui .footer-links>span:last-child{display:none!important}
@media(max-width:900px){
body.clarity-ui .header-inner{padding:7px 0!important}
body.clarity-ui .header-actions{gap:5px!important}
body.clarity-ui .nav-pill{padding:6px 8px!important;font-size:12px!important}
body.clarity-ui #view-lesson .lesson-flow-current{display:none}
}
@media(max-width:650px){
body.clarity-ui .brand{font-size:16px!important}
body.clarity-ui .mobile-account-bar{gap:8px!important}
body.clarity-ui .mobile-account-actions{display:flex!important;gap:6px!important;align-items:center!important;flex-wrap:wrap!important;justify-content:flex-end!important}
body.clarity-ui .mobile-dictionary-btn{border:1px solid #bfe3d8;background:#eefaf6;color:#0a6e65;border-radius:10px;padding:7px 9px;font-size:11.5px;font-weight:900;cursor:pointer}
body.clarity-ui #view-lesson .lesson-hero{padding:12px!important}
body.clarity-ui #view-lesson .lesson-hero h1{font-size:25px!important}
body.clarity-ui #view-lesson .lesson-hero p{font-size:12.5px!important}
body.clarity-ui .lesson-score-card{min-width:88px!important;padding:8px 9px!important}
body.clarity-ui .skill-tabs--flow{gap:5px!important}
body.clarity-ui .skill-tab{min-height:38px!important;padding:6px 5px!important;font-size:12px!important}
body.clarity-ui .activity-heading{display:flex!important;flex-direction:row!important;justify-content:space-between!important;gap:8px!important}
body.clarity-ui .activity-heading>div{min-width:0}
body.clarity-ui .activity-heading h2{font-size:21px!important}
body.clarity-ui .activity-heading-actions,
body.clarity-ui .activity-heading>.complete-skill{margin-top:0!important}
body.clarity-ui .complete-skill{font-size:11px!important;padding:7px 8px!important;white-space:nowrap}
body.clarity-ui .dictionary-panel{padding:14px!important;max-height:90vh!important}
body.clarity-ui .dictionary-head p{display:none}
body.clarity-ui .dictionary-search-box input{font-size:16px!important}
body.clarity-ui .dictionary-sentence-chunks>div{grid-template-columns:1fr;gap:2px}
}
/* =========================================================
v6.15.66 — HOME + PLAN VISIBILITY + PLUS ENTRY
Restore orientation without bringing back visual clutter.
========================================================= */
body.clarity-ui .header-home-link{
display:inline-flex!important;
align-items:center!important;
gap:5px!important;
background:#fff!important;
border-color:#dfe7e2!important;
}
body.clarity-ui .header-home-link:hover{background:#f5faf7!important;border-color:#bcd9cf!important}
@media(min-width:901px){
body.clarity-ui .plan-chip:not(.hidden){
display:flex!important;
align-items:center!important;
gap:5px!important;
min-height:38px!important;
padding:7px 10px!important;
border-radius:12px!important;
background:#f7fbf8!important;
border:1px solid #cfe4da!important;
box-shadow:none!important;
}
body.clarity-ui .student-plus-cta:not(.hidden){
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:38px!important;
background:#fff8e8!important;
border-color:#ead5a7!important;
color:#7a5416!important;
white-space:nowrap!important;
}
body.clarity-ui .student-plus-cta:hover{background:#fff1c9!important}
}
/* Current plan is learning context, not a marketing banner. */
body.clarity-ui .student-plan-strip{
grid-column:1/-1;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:12px 14px;
margin:0 0 10px;
background:#f7fbf8;
border:1px solid #d8e8e0;
border-radius:16px;
box-shadow:none;
}
body.clarity-ui .student-plan-strip.hidden{display:none!important}
body.clarity-ui .student-plan-strip-copy{
min-width:0;
display:grid;
grid-template-columns:auto auto minmax(0,1fr);
align-items:center;
gap:7px 10px;
}
body.clarity-ui .student-plan-strip-copy>span{
font-size:11px;
font-weight:850;
color:#6f7b75;
white-space:nowrap;
}
body.clarity-ui .student-plan-strip-copy>strong{
font-size:14px;
color:#155f55;
white-space:nowrap;
}
body.clarity-ui .student-plan-strip-copy>small{
min-width:0;
font-size:12px;
color:#6b746f;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
body.clarity-ui .student-plan-strip-action{
flex:0 0 auto;
min-height:38px;
border:1px solid #ead5a7;
border-radius:11px;
background:#fff8e8;
color:#7a5416;
padding:8px 12px;
font-weight:900;
cursor:pointer;
white-space:nowrap;
}
body.clarity-ui .student-plan-strip-action:hover{background:#fff1c9}
.mobile-plan-summary{
display:block;
margin-top:2px;
font-size:11px;
line-height:1.25;
color:#397268;
font-weight:800;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.mobile-plan-summary.hidden{display:none!important}
.mobile-home-btn,.mobile-billing-btn{
min-height:38px;
border:1px solid #dce6e0;
border-radius:11px;
background:#fff;
padding:7px 9px;
font-weight:850;
cursor:pointer;
white-space:nowrap;
}
.mobile-billing-btn{background:#fff8e8;border-color:#ead5a7;color:#7a5416}
.mobile-home-btn.hidden,.mobile-billing-btn.hidden{display:none!important}
@media(max-width:1360px) and (min-width:1101px){
body.clarity-ui .header-home-link span{display:none!important}
body.clarity-ui .header-home-link{width:38px!important;justify-content:center!important;padding:7px!important}
body.clarity-ui .student-plus-cta{padding-left:8px!important;padding-right:8px!important;font-size:11px!important}
}
@media(max-width:1100px) and (min-width:901px){
body.clarity-ui .header-home-link span{display:none!important}
body.clarity-ui .header-home-link{width:38px!important;justify-content:center!important;padding:7px!important}
body.clarity-ui .student-plus-cta{font-size:0!important;width:38px!important;padding:7px!important}
body.clarity-ui .student-plus-cta::before{content:"👑";font-size:15px!important}
}
@media(max-width:900px){
body.clarity-ui .header-home-link{display:none!important}
body.clarity-ui .student-plan-strip{
margin:0 12px 10px!important;
padding:11px 12px!important;
align-items:flex-start!important;
}
body.clarity-ui .student-plan-strip-copy{
grid-template-columns:auto 1fr!important;
gap:3px 8px!important;
}
body.clarity-ui .student-plan-strip-copy>span{grid-column:1!important}
body.clarity-ui .student-plan-strip-copy>strong{grid-column:2!important}
body.clarity-ui .student-plan-strip-copy>small{
grid-column:1/-1!important;
white-space:normal!important;
line-height:1.35!important;
}
body.clarity-ui .student-plan-strip-action{
min-height:40px!important;
padding:8px 10px!important;
}
}
@media(max-width:760px){
body.clarity-ui .mobile-account-bar{
grid-template-columns:minmax(0,1fr)!important;
gap:8px!important;
}
body.clarity-ui .mobile-account-actions{
width:100%!important;
justify-content:flex-start!important;
flex-wrap:wrap!important;
}
body.clarity-ui .mobile-account-actions button{
flex:0 0 auto!important;
min-height:38px!important;
}
body.clarity-ui .student-plan-strip{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
gap:8px!important;
}
body.clarity-ui .student-plan-strip.hidden{display:none!important}
body.clarity-ui .student-plan-strip-action{width:100%!important}
}
@media(max-width:430px){
body.clarity-ui .mobile-home-btn,
body.clarity-ui .mobile-dictionary-btn,
body.clarity-ui .mobile-billing-btn{
flex:1 1 calc(33.333% - 5px)!important;
min-width:0!important;
padding-left:6px!important;
padding-right:6px!important;
font-size:11.5px!important;
}
body.clarity-ui .mobile-logout-btn{flex:1 1 100%!important}
}
/* =========================================================
v6.15.67 — TRI-PLATFORM NAV + STUDENT HOME SYNC
Same information hierarchy on Desktop / Android / iOS.
Layout adapts, meaning/order does not.
========================================================= */
/* Desktop/tablet: one canonical utility order. */
body.clarity-ui .header-home-link{order:1}
body.clarity-ui #englishBtn{order:2}
body.clarity-ui #chineseBtn{order:3}
body.clarity-ui #teacherDashboardBtn{order:4}
body.clarity-ui #globalDictionaryBtn{order:5}
body.clarity-ui #studentBillingBtn{order:6}
body.clarity-ui #planChip{order:7}
body.clarity-ui #loginBtn{order:8}
body.clarity-ui #userChip{order:9}
@media(min-width:1200px){
body.clarity-ui .header-home-link{
display:inline-flex!important;
width:auto!important;
padding:7px 10px!important;
}
body.clarity-ui .header-home-link span{display:inline!important}
}
/* Student package: status and action are different things.
planChip = current status; Gói = opens billing/renewal. */
body.clarity-ui .student-plus-cta:not(.hidden){
background:#fff!important;
border-color:#dfe7e2!important;
color:#33443f!important;
}
body.clarity-ui .student-plus-cta:not(.hidden):hover{background:#f6faf8!important}
/* Mobile/tablet logged-in utility area uses the SAME six destinations.
Student: Home / EN / ZH / Lookup / Plans / Logout.
Teacher: Home / EN / ZH / Teacher / Lookup / Logout. */
.mobile-track-btn,.mobile-teacher-btn{
min-height:38px;
border:1px solid #dce6e0;
border-radius:11px;
background:#fff;
padding:7px 9px;
font-weight:850;
cursor:pointer;
white-space:nowrap;
}
.mobile-track-btn.hidden,.mobile-teacher-btn.hidden{display:none!important}
@media(max-width:900px){
body.clarity-ui .site-header .header-actions{display:none!important}
body.clarity-ui .site-header{position:sticky!important;top:0!important}
body.clarity-ui .header-inner{
min-height:56px!important;
padding:8px 0!important;
display:flex!important;
align-items:center!important;
}
body.clarity-ui .brand-button{min-width:0!important}
body.clarity-ui .brand{
font-size:16px!important;
line-height:1.1!important;
white-space:nowrap!important;
}
body.clarity-ui .tagline{display:none!important}
body.clarity-ui .mobile-account-bar{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
gap:9px!important;
width:min(calc(100% - 24px),720px)!important;
margin:8px auto 0!important;
padding:11px 12px!important;
border-radius:18px!important;
}
body.clarity-ui .mobile-account-main{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
gap:3px!important;
}
body.clarity-ui .mobile-account-label{display:none!important}
body.clarity-ui #mobileAccountName{
max-width:100%!important;
font-size:15px!important;
line-height:1.25!important;
}
body.clarity-ui .mobile-plan-summary{
margin:0!important;
padding:5px 8px!important;
border:1px solid #cfe4da!important;
border-radius:999px!important;
background:#f6fbf8!important;
color:#246b61!important;
font-size:11.5px!important;
line-height:1.25!important;
width:max-content!important;
max-width:100%!important;
}
body.clarity-ui .mobile-account-actions{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:7px!important;
width:100%!important;
margin:0!important;
}
body.clarity-ui .mobile-account-actions button{
width:100%!important;
min-width:0!important;
min-height:44px!important;
padding:8px 6px!important;
border-radius:13px!important;
font-size:12.5px!important;
line-height:1.2!important;
justify-content:center!important;
}
body.clarity-ui .mobile-home-btn{order:1}
body.clarity-ui .mobile-track-btn#mobileEnglishBtn{order:2}
body.clarity-ui .mobile-track-btn#mobileChineseBtn{order:3}
body.clarity-ui .mobile-teacher-btn{order:4}
body.clarity-ui .mobile-dictionary-btn{order:4}
body.clarity-ui .mobile-billing-btn{order:5}
body.clarity-ui .mobile-login-btn,
body.clarity-ui .mobile-logout-btn{order:6}
body.clarity-ui .mobile-dictionary-btn{
background:#eefaf6!important;
border-color:#bfe3d8!important;
color:#0a6e65!important;
}
body.clarity-ui .mobile-billing-btn{
background:#fff!important;
border-color:#dce6e0!important;
color:#33443f!important;
}
/* Same student-home sequence as desktop: welcome/continue first, goal second. */
body.student-experience .home-hero{
display:flex!important;
flex-direction:column!important;
gap:10px!important;
padding-top:10px!important;
}
body.student-experience .home-hero-copy{order:1!important}
body.student-experience .student-today-hero{order:2!important}
}
@media(max-width:760px){
/* Compact mobile hero, but keep the same content identity instead of hiding it. */
body.student-experience .home-hero-copy{
min-height:0!important;
margin:0 12px!important;
padding:14px!important;
border-radius:18px!important;
background:linear-gradient(145deg,#fff,#f2fbfa)!important;
}
body.student-experience .home-hero-copy h1{
display:block!important;
margin:0 0 4px!important;
font-size:24px!important;
line-height:1.08!important;
max-width:none!important;
}
body.student-experience .home-hero-copy p{
display:block!important;
margin:0!important;
font-size:12.5px!important;
line-height:1.4!important;
color:#66736e!important;
}
body.student-experience .home-hero-copy .eyebrow,
body.student-experience .home-motivation-line,
body.student-experience .home-hero-visual-chips{display:none!important}
body.student-experience .home-hero-copy .hero-actions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:7px!important;
margin-top:10px!important;
}
body.student-experience .home-hero-copy .hero-actions .cta{
min-height:42px!important;
padding:8px 7px!important;
font-size:12.5px!important;
}
body.student-experience .student-today-hero{
margin:0 12px!important;
}
/* Android and iOS intentionally share exactly the same breakpoint rules. */
body.clarity-ui .mobile-account-actions{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:390px){
body.clarity-ui .brand{font-size:14.5px!important}
body.clarity-ui .mobile-account-actions button{font-size:11.5px!important;padding-left:4px!important;padding-right:4px!important}
body.student-experience .home-hero-copy h1{font-size:22px!important}
}
/* v6.15.68 — deployment/cache hygiene; UI behavior inherited from v6.15.67 */
/* =========================================================
v6.15.69 — TEACHER PROGRESS EVALUATION
Assigned work · strengths · weak areas · repair guidance
========================================================= */
.progress-evaluation-head{align-items:flex-end;gap:18px}
.progress-evaluation-head>div:first-child{max-width:720px}
.progress-evaluation-filters{display:grid;grid-template-columns:minmax(190px,260px) minmax(180px,230px);gap:9px;min-width:min(500px,100%)}
.progress-evaluation-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.progress-eval-metric{padding:13px 14px;border:1px solid #dfe7e2;border-radius:14px;background:#fff;display:grid;gap:3px;min-width:0}
.progress-eval-metric span{font-size:10px;font-weight:900;color:#6e7d77;text-transform:uppercase;letter-spacing:.045em}
.progress-eval-metric strong{font-size:25px;line-height:1.05;color:#176f67}.progress-eval-metric strong small{font-size:12px;color:#7c8782}
.progress-eval-metric em{font-size:9.5px;font-style:normal;color:#7d8984;line-height:1.35}.progress-eval-metric.attention strong{color:#a35243}
.progress-evaluation-table{display:grid;gap:8px;min-width:0}
.progress-evaluation-row{display:grid;grid-template-columns:minmax(190px,1.25fr) 100px 125px minmax(145px,.95fr) minmax(155px,1fr) minmax(220px,1.35fr) 82px;gap:10px;align-items:center;padding:11px;border:1px solid #e2e9e4;border-radius:14px;background:#fff;min-width:0}
.progress-evaluation-th{padding:7px 11px;border:0;background:#f4f7f5;border-radius:10px;font-size:9px;font-weight:950;color:#718079;text-transform:uppercase;letter-spacing:.04em}
.progress-eval-student{display:grid;gap:3px;min-width:0}.progress-eval-student strong{font-size:12px;line-height:1.3;overflow-wrap:anywhere}.progress-eval-student small{font-size:9px;color:#7c8983;line-height:1.35}.progress-eval-status{justify-self:start;display:inline-flex;padding:4px 7px;border-radius:999px;font-size:8.5px;font-weight:900;margin-top:2px}
.progress-eval-status.strong{background:#e6f8f1;color:#087267}.progress-eval-status.attention{background:#fff0ec;color:#a04436}.progress-eval-status.incomplete{background:#fff5dd;color:#8a6119}.progress-eval-status.steady{background:#edf4f8;color:#456b7c}.progress-eval-status.unassigned{background:#f1f1f1;color:#767676}
.progress-eval-number{display:grid;gap:2px}.progress-eval-number>strong{font-size:22px;line-height:1}.progress-eval-number>small,.progress-eval-number>em{font-size:8.5px;color:#7d8984;font-style:normal;line-height:1.3}.progress-eval-number.good>strong{color:#0b7b6f}.progress-eval-number.missing>strong{color:#9a6331}.progress-eval-number .teacher-progress-bar{height:6px;margin:3px 0 1px}
.progress-eval-pills{display:flex;flex-wrap:wrap;gap:4px}.progress-eval-pills span{display:inline-flex;align-items:center;gap:4px;padding:5px 7px;border-radius:999px;font-size:8.5px;font-weight:850;line-height:1.25}.progress-eval-pills span b{font-size:8.5px}.progress-eval-pills .strong{background:#e8f8f2;color:#087267}.progress-eval-pills .weak{background:#fff0ec;color:#a04436}.progress-eval-pills .missing{background:#fff6e4;color:#8a6119}.progress-eval-empty{font-size:9px;color:#87918d;line-height:1.35}
.progress-eval-advice{display:grid;gap:4px}.progress-eval-advice p{margin:0;font-size:9px;line-height:1.38;color:#52615c}.progress-eval-advice p:before{content:"→ ";color:#0f8f83;font-weight:950}
.progress-eval-actions{display:grid;gap:5px}.progress-eval-actions button{padding:7px 8px;border:1px solid #d9e2dc;border-radius:9px;background:#fff;font-size:8.5px;font-weight:850;color:#316f67;cursor:pointer}.progress-eval-actions button:hover{background:#f0f8f5}
.progress-status-attention{border-color:#efd3cc;background:linear-gradient(90deg,#fffaf8,#fff)}.progress-status-strong{border-color:#cae7dd}
.progress-eval-detail{grid-column:1/-1;border-top:1px solid #e7ece8;margin-top:2px;padding-top:9px;display:grid;gap:7px}.progress-eval-detail.hidden{display:none!important}
.progress-lesson-row{display:grid;grid-template-columns:minmax(190px,.8fr) minmax(0,2.5fr);gap:10px;padding:9px;border-radius:11px;background:#f8faf9}.progress-lesson-name{display:grid;gap:2px}.progress-lesson-name strong{font-size:10px}.progress-lesson-name small{font-size:8.5px;color:#7c8983}
.progress-lesson-skills{display:flex;gap:4px;flex-wrap:wrap}.progress-lesson-skill{padding:5px 7px;border-radius:999px;font-size:8px;font-weight:850;background:#eee;color:#6f7773}.progress-lesson-skill.done{background:#e5f7f0;color:#087267}.progress-lesson-skill.started{background:#fff3db;color:#8b6119}.progress-lesson-skill.missing{background:#f1f1f1;color:#7a7f7d}
@media(max-width:1180px){.progress-evaluation-row{grid-template-columns:minmax(180px,1.25fr) 90px 115px minmax(140px,1fr) minmax(150px,1fr) minmax(200px,1.3fr)}.progress-evaluation-row>div:nth-child(7),.progress-evaluation-th>span:nth-child(7){grid-column:auto}.progress-eval-actions{grid-column:1/-1;display:flex;justify-content:flex-end}.progress-evaluation-th{display:none}}
@media(max-width:900px){.progress-evaluation-head{align-items:flex-start;flex-direction:column}.progress-evaluation-filters{width:100%;min-width:0}.progress-evaluation-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.progress-evaluation-row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.progress-eval-student{grid-column:1/-1}.progress-eval-advice{grid-column:1/-1}.progress-eval-actions{grid-column:1/-1}.progress-lesson-row{grid-template-columns:1fr}.progress-lesson-name{margin-bottom:2px}}
@media(max-width:600px){.progress-evaluation-filters,.progress-evaluation-summary,.progress-evaluation-row{grid-template-columns:1fr}.progress-eval-student,.progress-eval-advice,.progress-eval-actions{grid-column:auto}.progress-evaluation-row{padding:12px;gap:9px}.progress-eval-actions{display:grid;grid-template-columns:1fr 1fr}.progress-eval-number{grid-template-columns:auto auto 1fr;align-items:center;gap:6px}.progress-eval-number .teacher-progress-bar{min-width:90px}.progress-eval-number>em{justify-self:end}.progress-eval-pills span{font-size:9px}.progress-eval-advice p{font-size:9.5px}.progress-lesson-skill{font-size:8.5px}.progress-eval-metric strong{font-size:22px}}
/* =========================================================
v6.15.70 — TEACHER REPORT READABILITY + RETURN NAVIGATION
Larger teacher analytics typography, same data/logic.
========================================================= */
.teacher-detail-backbar{display:flex;align-items:center;gap:12px;justify-content:flex-start;margin:0 0 14px;padding:10px 12px;border:1px solid #dce8e3;border-radius:13px;background:#f4faf7}
.teacher-detail-backbar span{font-size:13px;color:#64736d;font-weight:650}
.teacher-back-progress{border:1px solid #bcdcd1;background:#fff;color:#0b736a;border-radius:11px;padding:10px 14px;font-size:14px;font-weight:900;cursor:pointer;white-space:nowrap}
.teacher-back-progress:hover{background:#eaf8f3}
/* Báo cáo học viên: tăng font để giáo viên đọc nhanh trên desktop/tablet */
#teacher-report .report-head h2{font-size:31px!important;line-height:1.15}
#teacher-report .report-head .muted{font-size:15px!important;line-height:1.5}
#teacher-report .report-filters{grid-template-columns:minmax(230px,290px) minmax(360px,1fr);gap:12px;min-width:min(650px,100%)}
#teacher-report .report-filters .field label{font-size:14px!important;margin-bottom:7px}
#teacher-report .report-filters select{font-size:16px!important;padding:12px 13px!important;min-height:48px}
#teacher-report .report-summary-grid{gap:12px;margin:18px 0}
#teacher-report .report-metric{padding:18px;border-radius:16px;gap:6px}
#teacher-report .report-metric span{font-size:12.5px}
#teacher-report .report-metric strong{font-size:36px;line-height:1.05}
#teacher-report .report-metric small{font-size:13px;line-height:1.4}
#teacher-report .report-section-card{padding:18px;border-radius:17px;margin-top:12px}
#teacher-report .report-section-title{gap:10px;margin-bottom:13px}
#teacher-report .report-section-title>span{width:38px;height:38px;border-radius:11px;font-size:19px}
#teacher-report .report-section-title strong{font-size:16px;line-height:1.35}
#teacher-report .report-section-title small{font-size:12.5px;line-height:1.4}
#teacher-report .report-skill-grid{gap:9px}
#teacher-report .report-skill{padding:12px;border-radius:12px;gap:6px}
#teacher-report .report-skill span{font-size:13px;line-height:1.35}
#teacher-report .report-skill b{font-size:12.5px;line-height:1.35}
#teacher-report .report-skill small{font-size:12px}
#teacher-report .report-word-cloud{gap:8px}
#teacher-report .report-word-cloud span{padding:8px 11px;font-size:12.5px}
#teacher-report .report-correction-list{gap:9px}
#teacher-report .report-correction{padding:11px 12px;border-radius:12px;gap:5px}
#teacher-report .report-correction .old{font-size:12.5px}
#teacher-report .report-correction .better{font-size:13.5px;line-height:1.4}
#teacher-report .report-correction small{font-size:12px;line-height:1.45}
#teacher-report .report-info-stack{gap:9px}
#teacher-report .report-info-stack>div{padding:12px;border-radius:12px;gap:5px}
#teacher-report .report-info-stack span{font-size:12px}
#teacher-report .report-info-stack strong{font-size:15px}
#teacher-report .report-quiz-list{gap:7px}
#teacher-report .report-quiz-list>div{padding:10px 9px;font-size:13px}
#teacher-report .report-empty{padding:17px;font-size:13px;line-height:1.5}
/* Bảng tổng tiến độ cũng tăng font để đối chiếu trước/sau khi mở cá nhân */
#teacher-progress .progress-evaluation-head h2{font-size:29px!important}
#teacher-progress .progress-evaluation-head .muted{font-size:14px!important;line-height:1.5}
#teacher-progress .progress-evaluation-filters .field label{font-size:13px!important}
#teacher-progress .progress-evaluation-filters select{font-size:14px!important;min-height:44px}
#teacher-progress .progress-eval-metric span{font-size:11.5px}
#teacher-progress .progress-eval-metric strong{font-size:29px}
#teacher-progress .progress-eval-metric strong small{font-size:14px}
#teacher-progress .progress-eval-metric em{font-size:11px;line-height:1.4}
#teacher-progress .progress-evaluation-th{font-size:10.5px}
#teacher-progress .progress-eval-student strong{font-size:14px}
#teacher-progress .progress-eval-student small{font-size:10.5px}
#teacher-progress .progress-eval-status{font-size:10px;padding:5px 8px}
#teacher-progress .progress-eval-number>strong{font-size:24px}
#teacher-progress .progress-eval-number>small,#teacher-progress .progress-eval-number>em{font-size:10.5px}
#teacher-progress .progress-eval-pills span,#teacher-progress .progress-eval-pills span b{font-size:10px}
#teacher-progress .progress-eval-empty{font-size:10.5px}
#teacher-progress .progress-eval-advice p{font-size:10.8px;line-height:1.48}
#teacher-progress .progress-eval-actions button{font-size:11px;padding:8px 10px}
#teacher-progress .progress-lesson-name strong{font-size:12px}
#teacher-progress .progress-lesson-name small{font-size:10px}
#teacher-progress .progress-lesson-skill{font-size:10px;padding:6px 8px}
.progress-evaluation-row.return-focus{outline:3px solid rgba(15,143,131,.22);box-shadow:0 0 0 6px rgba(15,143,131,.08);transition:box-shadow .25s ease,outline .25s ease}
@media(max-width:1000px){
#teacher-report .report-filters{grid-template-columns:1fr 1fr;min-width:0;width:100%}
#teacher-report .report-metric strong{font-size:32px}
}
@media(max-width:650px){
.teacher-detail-backbar{align-items:stretch;flex-direction:column;gap:7px;padding:10px}
.teacher-detail-backbar span{font-size:12px}
.teacher-back-progress{width:100%;font-size:14px;padding:11px 12px}
#teacher-report .report-head h2{font-size:26px!important}
#teacher-report .report-head .muted{font-size:14px!important}
#teacher-report .report-filters{grid-template-columns:1fr}
#teacher-report .report-filters select{font-size:15px!important}
#teacher-report .report-metric strong{font-size:30px}
#teacher-report .report-section-title strong{font-size:15px}
#teacher-report .report-section-title small{font-size:12px}
#teacher-report .report-skill span{font-size:13px}
#teacher-report .report-skill b{font-size:12.5px}
#teacher-progress .progress-eval-pills span{font-size:10.5px!important}
#teacher-progress .progress-eval-advice p{font-size:11px!important}
#teacher-progress .progress-lesson-skill{font-size:10px!important}
}
/* =========================================================
v6.15.72 — INDIVIDUAL REPORT ACTIONABILITY
Distinguish started vs not started + show strengths/weakness/advice.
========================================================= */
#teacher-report .report-assessment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 14px}
#teacher-report .report-assessment-card{border:1px solid #dfe7e2;border-radius:16px;padding:15px 16px;background:#fff;display:grid;gap:9px;min-width:0}
#teacher-report .report-assessment-card>span{font-size:13px;font-weight:950;letter-spacing:.01em}
#teacher-report .report-assessment-card>div{display:grid;gap:6px}
#teacher-report .report-assessment-card b{font-size:13px;line-height:1.4;padding:7px 9px;border-radius:10px;background:#f5f7f6;overflow-wrap:anywhere}
#teacher-report .report-assessment-card em{font-size:12.5px;line-height:1.45;color:#7a8781;font-style:normal}
#teacher-report .report-assessment-card p{margin:0;font-size:12.5px;line-height:1.48;color:#4f5f59}
#teacher-report .report-assessment-card p:before{content:"→ ";font-weight:950;color:#0f8f83}
#teacher-report .report-assessment-card.strong{background:#f4fbf8;border-color:#c8e7dc}
#teacher-report .report-assessment-card.strong>span{color:#087267}
#teacher-report .report-assessment-card.strong b{background:#e8f8f2;color:#087267}
#teacher-report .report-assessment-card.weak{background:#fffaf7;border-color:#efd8cd}
#teacher-report .report-assessment-card.weak>span{color:#a04d3d}
#teacher-report .report-assessment-card.weak b{background:#fff0ec;color:#a04436}
#teacher-report .report-assessment-card.advice{background:#f7faf9}
#teacher-report .report-assessment-card.advice>span{color:#536c63}
#teacher-report .report-skill.started{background:#fff8e9;border-color:#ead7ad}
#teacher-report .report-skill.started b{color:#8a6119}
#teacher-report .report-skill.not-started{background:#f7f7f6;border-color:#e5e5e2}
#teacher-report .report-skill.not-started b{color:#7b817e}
@media(max-width:900px){#teacher-report .report-assessment-grid{grid-template-columns:1fr}}
@media(max-width:650px){
#teacher-report .report-assessment-card{padding:13px 14px}
#teacher-report .report-assessment-card>span{font-size:13px}
#teacher-report .report-assessment-card b,#teacher-report .report-assessment-card p,#teacher-report .report-assessment-card em{font-size:12.5px}
}
/* v6.15.79 Listening: make the listen-first gate obvious without hiding content. */
.listening-gate-hint{margin:.55rem 0 .2rem;padding:.65rem .8rem;border-radius:.75rem;font-weight:700;font-size:.92rem;background:rgba(15,23,42,.06);}
.listening-awaiting-audio [data-listening-choice],
.listening-awaiting-audio .inline-blank,
.listening-awaiting-audio .listening-dictation-input,
.listening-awaiting-audio [data-listening-fill-check],
.listening-awaiting-audio [data-listening-dictation-check]{opacity:.58;cursor:not-allowed;}
/* v6.15.80 · Chinese learning support */
.vocab-example-pinyin{display:block;font-size:.92em;font-weight:700;opacity:.78;margin-top:3px;letter-spacing:.01em}
.track-theme-zh .vocab-ipa,.track-theme-zh .flash-ipa{font-style:normal;letter-spacing:.01em}
/* v6.15.81 · Chinese Pinyin-first presentation */
.track-theme-zh .vocab-card-compact .vocab-ipa{font-size:17px!important;font-weight:850;line-height:1.35;opacity:1;margin-top:4px}
.track-theme-zh .flash-ipa{font-size:23px!important;font-weight:850;line-height:1.35;opacity:1}
.track-theme-zh .flash-term{font-size:34px!important}
.track-theme-zh .vocab-example-pinyin,.track-theme-zh .grammar-example-pinyin,.track-theme-zh .dictionary-pinyin{display:block;font-size:1.02em;font-weight:800;opacity:.9;margin-top:4px;line-height:1.45}
.track-theme-zh .vocab-meaning{margin-top:4px}
@media(max-width:650px){.track-theme-zh .vocab-card-compact .vocab-ipa{font-size:18px!important}.track-theme-zh .flash-ipa{font-size:22px!important}.track-theme-zh .flash-term{font-size:31px!important}}
/* v6.15.83 · Chinese practical example card */
.track-theme-zh .zh-practical-example{margin-top:10px!important;padding:12px 14px!important;border:1px solid rgba(129,104,84,.18)!important;border-radius:14px;background:rgba(255,250,244,.88);display:flex;justify-content:space-between;gap:12px}
.track-theme-zh .zh-practical-example strong{font-size:12px;letter-spacing:.02em}
.track-theme-zh .zh-practical-example p{margin:5px 0 0;font-size:15px;line-height:1.5;font-weight:800;color:#403a36}
.track-theme-zh .zh-practical-example .vocab-example-pinyin{font-size:15px!important;font-weight:850;opacity:1}
.track-theme-zh .zh-practical-example .vocab-example-pinyin+span{display:block;margin-top:3px;font-size:13px!important;line-height:1.45;color:#6f655e}
@media(max-width:650px){.track-theme-zh .zh-practical-example{padding:11px 12px!important}.track-theme-zh .zh-practical-example p,.track-theme-zh .zh-practical-example .vocab-example-pinyin{font-size:16px!important}}
/* v6.15.83 · Chinese compact vocabulary: keep examples collapsed under + */
.track-theme-zh .zh-vocab-more{
margin-top:8px;
padding-top:7px;
border-top:1px solid #eee8e1;
}
.track-theme-zh .zh-vocab-more>summary{
display:inline-flex;
align-items:center;
gap:5px;
min-height:28px;
padding:3px 0;
color:#16756d;
font-size:12.5px;
font-weight:900;
}
.track-theme-zh .zh-vocab-more>summary::after{content:"＋";font-size:15px;line-height:1}
.track-theme-zh .zh-vocab-more[open]>summary::after{content:"−"}
.track-theme-zh .zh-vocab-expand{display:grid;gap:8px;margin-top:8px!important}
.track-theme-zh .zh-example-item{
margin:0!important;
padding:10px 0!important;
border-top:1px dashed rgba(129,104,84,.2)!important;
background:transparent!important;
border-radius:0!important;
}
.track-theme-zh .zh-example-item:first-child{border-top:0!important;padding-top:4px!important}
.track-theme-zh .zh-example-item strong{font-size:12px;letter-spacing:.01em}
.track-theme-zh .zh-example-item p{margin:4px 0 0;font-size:14px;line-height:1.5;font-weight:800;color:#403a36}
.track-theme-zh .zh-example-item .vocab-example-pinyin{font-size:15px!important;font-weight:850;line-height:1.45;opacity:1}
.track-theme-zh .zh-example-item .vocab-example-pinyin+span{display:block;margin-top:3px;font-size:13px!important;line-height:1.45;color:#6f655e}
@media(max-width:650px){
.track-theme-zh .zh-example-item p,.track-theme-zh .zh-example-item .vocab-example-pinyin{font-size:15.5px!important}
}
/* v6.15.86 · Chinese Read & Speak — scoped student UI, no English behavior changes */
.zh-reading-guide{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:16px 18px;border:1px solid #cfe7df;background:#f4fbf8;border-radius:18px;margin-bottom:14px}.zh-reading-guide>div:first-child{display:grid;gap:4px}.zh-reading-guide span,.zh-reading-section-title span{font-size:12px;font-weight:950;letter-spacing:.06em;color:#0f766e}.zh-reading-guide strong{font-size:19px}.zh-reading-guide small{color:#6e746f;line-height:1.45}.zh-reading-tools{display:flex;gap:8px;flex-wrap:wrap}.zh-reading-tools button,.zh-reading-speak{border:1px solid #c9dbd4;background:#fff;border-radius:12px;padding:9px 12px;font-weight:850;cursor:pointer}.zh-reading-script{display:grid;gap:9px}.zh-reading-script-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:3px 2px 6px}.zh-reading-script-head span{font-weight:900;color:#6e6259}.zh-reading-script-head strong{font-size:13px;color:#0f766e}.zh-reading-line{border:1px solid #e3ddd4;background:#fff;border-radius:16px;padding:14px 16px}.zh-reading-line-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.zh-reading-speaker,.zh-reading-number{display:inline-grid;place-items:center;min-width:30px;height:28px;padding:0 8px;border-radius:999px;background:#eaf8f4;color:#0f766e;font-size:12px;font-weight:950}.zh-reading-speak{padding:7px 10px;font-size:13px}.zh-reading-hanzi{font-size:24px;line-height:1.45;font-weight:900;color:#292622}.zh-reading-pinyin{font-size:18px;line-height:1.5;font-weight:850;color:#0f766e;margin-top:3px}.zh-reading-vi{font-size:15px;line-height:1.5;color:#776d65;margin-top:3px}.zh-hide-pinyin .zh-reading-pinyin{display:none}.zh-hide-vi .zh-reading-vi{display:none}.zh-reading-comprehension,.zh-reading-speaking{margin-top:18px;padding-top:16px;border-top:1px solid #ece3da}.zh-reading-section-title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}.zh-reading-section-title strong{font-size:16px}.zh-reading-speaking-note{margin:0 0 10px;color:#776d65;font-size:14px}.zh-speaking-prompt{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;padding:11px 12px;border:1px solid #e5ddd4;border-radius:14px;background:#fffcf8;margin-top:8px}.zh-speaking-prompt>span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#eaf8f4;color:#0f766e;font-weight:950}.zh-speaking-prompt div{display:grid;gap:3px}.zh-speaking-prompt strong{font-size:15px}.zh-speaking-prompt small{font-size:14px;color:#0f766e;font-weight:800}.track-theme-zh #skill-reading .reading-card{padding:17px}.track-theme-zh #skill-reading .reading-q{margin-top:10px}.track-theme-zh #skill-reading .mcq{margin-top:8px}
@media(max-width:650px){.zh-reading-guide{align-items:flex-start;flex-direction:column;padding:14px}.zh-reading-tools{width:100%}.zh-reading-tools button{flex:1}.zh-reading-line{padding:12px}.zh-reading-hanzi{font-size:22px}.zh-reading-pinyin{font-size:17px}.zh-reading-section-title{align-items:flex-start;flex-direction:column;gap:3px}}
/* =========================================================
v6.15.93 — ACTIVE RECALL CLARITY · EN/ZH CONSISTENT
========================================================= */
.vocab-recall-lesson-summary{
margin:-1px 0 9px;
font-size:13px;
line-height:1.4;
font-weight:800;
color:#6d675f;
}
.track-theme-zh .vocab-recall-link-note{
padding:8px 10px;
}
.track-theme-zh .vocab-recall-full-form-note{
margin-top:0;
}
@media(max-width:620px){
.vocab-recall-lesson-summary{
font-size:12px;
}
}
/* v6.15.87 · Chinese Listening + multi-layer Reading */
.track-theme-zh .zh-listening-path .listening-path-step.pending{opacity:.78}
.track-theme-zh .zh-listen-catch-example{display:grid;gap:4px;padding:12px 14px;margin:10px 0 12px;border:1px solid #dfd2ab;background:#fff9e8;border-radius:14px}
.track-theme-zh .zh-listen-catch-example span{font-size:12px;font-weight:950;color:#8a6518;letter-spacing:.05em;text-transform:uppercase}
.track-theme-zh .zh-listen-catch-example strong{font-size:18px;line-height:1.45}.track-theme-zh .zh-listen-catch-example small{color:#75695a}
.track-theme-zh .zh-listening-pinyin-prompt{margin:10px 0;padding:13px 14px;border-radius:14px;background:#f8fbfa;border:1px solid #d7e8e1;font-size:19px;line-height:1.55;font-weight:850;color:#0f766e;word-break:break-word}
.track-theme-zh .zh-listening-blank{display:inline-block;min-width:64px;padding:0 4px;border-bottom:2px solid #c8a44a;color:#8a6518;text-align:center}
.track-theme-zh .zh-dictation-pending{opacity:.95}.track-theme-zh .listening-pending-note{display:grid;gap:5px;padding:13px 14px;border:1px dashed #d8c9aa;border-radius:14px;background:#fffdf8}.track-theme-zh .listening-pending-note span,.track-theme-zh .listening-pending-note small{color:#6e675f;line-height:1.5}
.track-theme-zh .zh-reading-roadmap{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 14px;padding:10px 12px;border:1px solid #e1e8e4;border-radius:14px;background:#fbfdfc}
.track-theme-zh .zh-reading-roadmap span{display:flex;align-items:center;gap:6px;font-weight:850;color:#4f5f58}.track-theme-zh .zh-reading-roadmap b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#eaf8f4;color:#0f766e}.track-theme-zh .zh-reading-roadmap i{font-style:normal;color:#9aa49f}
.track-theme-zh .zh-reading-set-list{display:grid;gap:10px}.track-theme-zh .zh-reading-set{border:1px solid #dddcd7;border-radius:16px;background:#fff;overflow:hidden}.track-theme-zh .zh-reading-set>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 15px;background:#fbfaf7}.track-theme-zh .zh-reading-set>summary::-webkit-details-marker{display:none}.track-theme-zh .zh-reading-set>summary span{display:flex;align-items:center;gap:9px}.track-theme-zh .zh-reading-set>summary b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eaf8f4;color:#0f766e}.track-theme-zh .zh-reading-set>summary strong{font-size:16px}.track-theme-zh .zh-reading-set>summary em{font-style:normal;font-size:11px;font-weight:950;letter-spacing:.05em;color:#0f766e;background:#edf8f5;border-radius:999px;padding:6px 9px}.track-theme-zh .zh-reading-set-body{padding:14px}.track-theme-zh .zh-reading-set-purpose{display:grid;gap:3px;margin-bottom:10px;padding:10px 12px;border-left:3px solid #8ab8a7;background:#f5faf8;border-radius:10px}.track-theme-zh .zh-reading-set-purpose strong{font-size:14px}.track-theme-zh .zh-reading-set-purpose small{color:#727a75;line-height:1.45}.track-theme-zh .zh-reading-line-help{margin-top:7px;border-top:1px dashed #e2ddd5;padding-top:6px}.track-theme-zh .zh-reading-line-help>summary{cursor:pointer;color:#0f766e;font-size:13px;font-weight:850}.track-theme-zh .zh-reading-line-help[open]>summary{margin-bottom:5px}.track-theme-zh .support-secondary{opacity:.82}
@media(max-width:650px){.track-theme-zh .zh-reading-set>summary{align-items:flex-start}.track-theme-zh .zh-reading-set>summary em{flex:none}.track-theme-zh .zh-reading-set-body{padding:11px}.track-theme-zh .zh-listening-pinyin-prompt{font-size:17px}}
/* v6.15.93 · Chinese Listening blank accuracy + Read & Speak recording */
.track-theme-zh .zh-pinyin-blank-word{
display:inline-flex;
align-items:flex-end;
gap:4px;
margin:0 3px;
vertical-align:baseline;
}
.track-theme-zh .zh-pinyin-blank-word i{
display:inline-block;
width:12px;
height:1.05em;
border-bottom:2px solid #b8871e;
}
.track-theme-zh .zh-pinyin-word-gap{display:inline-block;width:10px}
.track-theme-zh .zh-listening-pinyin-prompt{line-height:2;word-break:normal}
.track-theme-zh .zh-listening-blank{display:none}
.track-theme-zh .zh-speaking-prompt-main{display:grid;gap:6px;min-width:0}
.track-theme-zh .zh-speaking-record-tools{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:8px;
margin-top:8px;
}
.track-theme-zh .zh-speaking-record-tools button{
border:1px solid #c9dbd4;
background:#fff;
border-radius:11px;
padding:8px 11px;
font-weight:850;
cursor:pointer;
}
.track-theme-zh .zh-speaking-record-tools button:disabled{opacity:.5;cursor:not-allowed}
.track-theme-zh .zh-speaking-record-tools em{
font-style:normal;
font-size:13px;
color:#6c746f;
}
.track-theme-zh .zh-speaking-prompt.is-recording{
border-color:#efb8ac;
box-shadow:0 0 0 3px rgba(217,95,64,.08);
}
.track-theme-zh .zh-speaking-prompt.is-recording .zh-speaking-record-tools em{color:#b5472f;font-weight:850}
.track-theme-zh .zh-speaking-prompt audio{display:none}
@media (max-width:650px){
.track-theme-zh .zh-pinyin-blank-word i{width:10px;gap:3px}
.track-theme-zh .zh-speaking-record-tools{align-items:stretch}
.track-theme-zh .zh-speaking-record-tools button{flex:1 1 auto;min-height:42px}
.track-theme-zh .zh-speaking-record-tools em{width:100%}
}
/* v6.15.93 · Chinese-only Pinyin Foundation */
.pinyin-foundation-card{grid-column:1/-1;border:1.5px solid rgba(15,143,131,.28);background:linear-gradient(135deg,rgba(240,253,250,.98),rgba(255,251,235,.98));text-align:left}
.pinyin-foundation-card .season-icon{background:linear-gradient(145deg,#fff7ed,#ecfdf5);border:1px solid rgba(15,143,131,.18)}
.pinyin-foundation-card.is-done{box-shadow:0 0 0 2px rgba(15,143,131,.08) inset}
.pinyin-card-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pinyin-card-pills span{font-size:.78rem;font-weight:800;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.82);border:1px solid rgba(15,143,131,.14);color:#396760}
.pinyin-foundation-shell{grid-column:1/-1;display:block;min-width:0}
.pinyin-foundation-backrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 14px}
.pinyin-foundation-backrow button,.pinyin-foundation-footer button{border:0;border-radius:12px;background:#173e3a;color:#fff;padding:11px 15px;font-weight:900;cursor:pointer}
.pinyin-foundation-backrow span{font-size:.78rem;font-weight:900;color:#6c7a76;letter-spacing:.04em}
.pinyin-foundation-hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(240px,.7fr);gap:18px;padding:24px;border-radius:24px;background:linear-gradient(135deg,#ecfdf5 0%,#fefce8 56%,#fff7ed 100%);border:1px solid rgba(15,143,131,.18);box-shadow:0 15px 40px rgba(24,62,58,.08)}
.pinyin-foundation-hero>div>span,.pinyin-tone-intro span,.pinyin-check-intro span,.pinyin-contrast-card>div>span,.pinyin-rule-card>span,.pinyin-sandhi-card>span{display:block;font-size:.76rem;font-weight:950;letter-spacing:.08em;color:#0f8f83;margin-bottom:7px}
.pinyin-foundation-hero h2{font-size:clamp(1.45rem,2.7vw,2.15rem);line-height:1.15;margin:0 0 10px;color:#173e3a}
.pinyin-foundation-hero p{font-size:1rem;line-height:1.65;margin:0;color:#4b625e}
.pinyin-formula{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;border-radius:20px;padding:18px;background:rgba(255,255,255,.8);border:1px solid rgba(15,143,131,.16);text-align:center}
.pinyin-formula b{padding:9px 11px;border-radius:12px;background:#fff;color:#173e3a;box-shadow:0 5px 14px rgba(23,62,58,.06)}
.pinyin-formula i{font-style:normal;font-weight:900;color:#0f8f83}
.pinyin-formula small{flex-basis:100%;font-size:.86rem;font-weight:800;color:#687a76}
.pinyin-overview-board{margin:16px 0;padding:18px;border:1px solid #dfeae7;border-radius:22px;background:#fff;box-shadow:0 10px 28px rgba(23,62,58,.05)}
.pinyin-overview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}
.pinyin-overview-head>div>span{display:block;font-size:.72rem;font-weight:950;letter-spacing:.09em;color:#0f8f83;margin-bottom:5px}
.pinyin-overview-head h3{margin:0 0 5px;font-size:1.18rem;color:#173e3a}
.pinyin-overview-head p{margin:0;max-width:760px;font-size:.83rem;line-height:1.5;color:#667a76}
.pinyin-overview-legend{min-width:220px;padding:11px 13px;border-radius:14px;background:#f5faf8;border:1px solid #e3eeeb}
.pinyin-overview-legend b{display:block;color:#173e3a}.pinyin-overview-legend small{display:block;margin-top:3px;line-height:1.4;color:#6f7f7c}
.pinyin-overview-columns{display:grid;grid-template-columns:1.05fr 1.45fr .9fr;gap:10px}
.pinyin-overview-block{display:block;width:100%;min-width:0;border:1px solid #dfe9e7;border-radius:17px;background:#fbfdfc;padding:14px;text-align:left;color:inherit;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.pinyin-overview-block:hover{transform:translateY(-1px);border-color:#9bcfc5;box-shadow:0 8px 18px rgba(23,62,58,.06)}
.pinyin-overview-block-title{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding-bottom:9px;border-bottom:1px solid #e6eeec}
.pinyin-overview-block-title b{font-size:.92rem;color:#173e3a}.pinyin-overview-block-title span{font-size:.69rem;font-weight:850;color:#70817d;text-align:right}
.pinyin-overview-row{display:grid;grid-template-columns:82px 1fr;gap:8px;align-items:start;padding:8px 0;border-bottom:1px dashed #e6eeec}
.pinyin-overview-row:last-of-type{border-bottom:0}.pinyin-overview-row>strong{font-size:.7rem;color:#697a77;line-height:1.8}
.pinyin-overview-row>div{display:flex;flex-wrap:wrap;gap:5px}.pinyin-overview-row span{display:inline-grid;place-items:center;min-width:30px;padding:4px 7px;border-radius:9px;background:#fff;border:1px solid #dfe9e7;font-size:.8rem;font-weight:950;color:#173e3a}
.pinyin-overview-block>em{display:block;margin-top:9px;font-style:normal;font-size:.73rem;font-weight:950;color:#0f8f83}
.pinyin-overview-tones{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:12px 0}.pinyin-overview-tones>span{display:flex;flex-direction:column;align-items:center;padding:9px 4px;border-radius:12px;background:#fff;border:1px solid #e1ebe8}.pinyin-overview-tones b{font-size:1.25rem;color:#173e3a}.pinyin-overview-tones small{font-size:.65rem;color:#71817e}.tone-overview>p{font-size:.74rem;line-height:1.45;color:#657672;margin:8px 0 0}
.pinyin-overview-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.pinyin-overview-foot span{flex:1 1 300px;padding:9px 11px;border-radius:12px;background:#fff8e8;border:1px solid #f2e0b8;font-size:.73rem;line-height:1.45;color:#66542e}
.pinyin-foundation-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:16px 0}
.pinyin-foundation-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:13px 14px;border-radius:16px;border:1px solid #dbe9e6;background:#fff;color:#34534f;cursor:pointer;text-align:left;min-width:0}
.pinyin-foundation-tabs button b{font-size:.75rem;letter-spacing:.08em;color:#0f8f83}
.pinyin-foundation-tabs button span{font-size:.98rem;font-weight:950;color:#173e3a}
.pinyin-foundation-tabs button small{font-size:.74rem;color:#7a8a87}
.pinyin-foundation-tabs button.active{border-color:#0f8f83;background:#effcf9;box-shadow:0 0 0 2px rgba(15,143,131,.08)}
.pinyin-foundation-panel{display:none;scroll-margin-top:18px}
.pinyin-foundation-panel.active{display:block}
.pinyin-method{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:13px 14px;border-radius:16px;background:#173e3a;color:#fff;margin-bottom:14px}
.pinyin-method strong{font-size:.82rem}
.pinyin-method span{opacity:.55}
.pinyin-expert-note{padding:15px 17px;border-radius:16px;background:#fff8e8;border:1px solid #f5dfae;color:#66522d;line-height:1.55;margin-bottom:14px}
.pinyin-group-card{padding:18px;border-radius:20px;background:#fff;border:1px solid #e4ecea;margin:12px 0;box-shadow:0 8px 24px rgba(23,62,58,.04)}
.pinyin-group-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}
.pinyin-group-head span{font-size:.69rem;font-weight:950;letter-spacing:.08em;color:#0f8f83}
.pinyin-group-head h3{font-size:1.13rem;margin:2px 0 0;color:#173e3a}
.pinyin-group-head p{margin:0;max-width:54%;font-size:.84rem;line-height:1.45;color:#72817e}
.pinyin-sound-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.pinyin-sound-card{padding:12px;border-radius:15px;background:#f8fbfa;border:1px solid #e4ecea;min-width:0}
.pinyin-sound-top{display:flex;align-items:center;gap:7px}
.pinyin-sound-top strong{font-size:1.2rem;color:#173e3a}
.pinyin-sound-top span{font-size:.72rem;font-weight:800;color:#6b7b78}
.pinyin-sound-top button{margin-left:auto;border:0;background:#fff;border-radius:9px;padding:6px 7px;cursor:pointer;box-shadow:0 2px 8px rgba(23,62,58,.08)}
.pinyin-sound-example{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:9px 0 5px}
.pinyin-sound-example b{font-size:1.05rem;color:#132f2c}
.pinyin-sound-example span{font-size:.8rem;font-weight:900;color:#0f8f83}
.pinyin-sound-example small{font-size:.73rem;color:#7a8583}
.pinyin-sound-card p{margin:0;font-size:.76rem;line-height:1.45;color:#586a67}
.pinyin-contrast-card,.pinyin-rule-card,.pinyin-sandhi-card,.pinyin-tone-mark-card{padding:18px;border-radius:20px;border:1px solid #e4ecea;background:#fff;margin:14px 0}
.pinyin-contrast-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.9fr);gap:15px;background:linear-gradient(135deg,#fff7ed,#fff)}
.pinyin-contrast-card h3{margin:2px 0 7px;color:#5a3f28}
.pinyin-contrast-card p{margin:0;color:#6a625d;line-height:1.5}
.pinyin-contrast-pairs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pinyin-contrast-pairs b{padding:10px;border-radius:12px;background:#fff;border:1px solid #f1dfd0;text-align:center;font-size:.82rem}
.pinyin-checkpoint-btn{display:block;width:100%;border:1px solid #b9dcd6;border-radius:14px;background:#effcf9;color:#0b746a;padding:12px 14px;font-weight:950;cursor:pointer;margin:14px 0 2px}
.pinyin-checkpoint-btn.done{background:#173e3a;color:#fff;border-color:#173e3a}
.pinyin-rule-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:10px}
.pinyin-rule-grid>div{padding:12px;border-radius:13px;background:#f8fbfa;border:1px solid #e4ecea}
.pinyin-rule-grid b{color:#173e3a}.pinyin-rule-grid p{margin:5px 0 0;font-size:.78rem;color:#697a77}
.pinyin-spelling-details{border:1px solid #dbe9e6;border-radius:16px;background:#fff;margin:12px 0;padding:0 15px}
.pinyin-spelling-details summary{cursor:pointer;padding:13px 0;font-weight:900;color:#245951}
.pinyin-spelling-details>div{padding:0 0 12px}.pinyin-spelling-details p{margin:7px 0;line-height:1.55;color:#576a66}
.pinyin-tone-intro{display:flex;justify-content:space-between;align-items:end;gap:14px;padding:18px;border-radius:20px;background:#fff;border:1px solid #e4ecea}
.pinyin-tone-intro h3{margin:2px 0 7px;color:#173e3a}.pinyin-tone-intro p{margin:0;color:#657672}
.pinyin-tone-sequence{font-weight:950;font-size:1.2rem;color:#0f8f83;white-space:nowrap}
.pinyin-tone-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:12px 0}
.pinyin-tone-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:15px 10px;border-radius:18px;background:#fff;border:1px solid #e4ecea}
.pinyin-tone-number{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;font-size:.75rem;font-weight:950;background:#effcf9;color:#0f8f83}
.pinyin-tone-shape{font-size:1.7rem;line-height:1.05;color:#173e3a;margin:7px 0}
.pinyin-tone-card>strong{font-size:.8rem;color:#687a76}.pinyin-tone-card button{display:flex;align-items:center;gap:6px;border:0;background:#f8fbfa;border-radius:12px;padding:8px 10px;margin:8px 0;cursor:pointer}.pinyin-tone-card button b{font-size:1.1rem}.pinyin-tone-card button span{font-weight:900;color:#0f8f83}.pinyin-tone-card small{color:#6f7f7c}.pinyin-tone-card p{font-size:.73rem;line-height:1.45;color:#61716e;margin:7px 0 0}
.pinyin-sandhi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.pinyin-sandhi-grid article{padding:13px;border-radius:15px;background:#f8fbfa;border:1px solid #e4ecea}
.pinyin-sandhi-grid article>b{display:block;font-size:.76rem;color:#0f8f83}.pinyin-sandhi-grid article>strong{display:block;font-size:1.25rem;color:#173e3a;margin:5px 0}.pinyin-sandhi-grid button{border:0;background:#fff;border-radius:10px;padding:8px 9px;font-weight:850;color:#325d56;cursor:pointer}.pinyin-sandhi-grid p{font-size:.75rem;line-height:1.45;color:#697a77;margin:7px 0 0}
.pinyin-tone-mark-card{background:#effcf9;color:#315b54;line-height:1.55}.pinyin-tone-mark-card p{margin:5px 0 0}
.pinyin-check-intro{padding:18px;border-radius:20px;background:linear-gradient(135deg,#effcf9,#fff);border:1px solid #dbe9e6}.pinyin-check-intro h3{margin:2px 0 6px;color:#173e3a}.pinyin-check-intro p{margin:0;color:#657672}
.pinyin-check-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.pinyin-check-card{padding:15px;border-radius:17px;background:#fff;border:1px solid #e4ecea}.pinyin-check-card>span{font-size:.67rem;font-weight:950;letter-spacing:.07em;color:#0f8f83}.pinyin-check-card>strong{display:block;margin:5px 0 10px;color:#173e3a;line-height:1.4}.pinyin-check-options{display:flex;flex-direction:column;gap:7px}.pinyin-check-options button{border:1px solid #dbe5e3;background:#f9fbfa;border-radius:11px;padding:9px 10px;text-align:left;cursor:pointer;color:#3f5551}.pinyin-check-options button.correct{border-color:#70b7a9;background:#edf9f6;color:#0c6a61;font-weight:900}.pinyin-check-options button.wrong{border-color:#e5a4a4;background:#fff3f3;color:#a14343}.pinyin-check-card>p{min-height:20px;margin:8px 0 0;font-size:.75rem;line-height:1.45;color:#60716e}
.pinyin-check-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;border-radius:15px;background:#173e3a;color:#fff}.pinyin-check-summary button{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;border-radius:10px;padding:8px 10px;font-weight:800;cursor:pointer}
.pinyin-foundation-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px;margin-top:16px;border-radius:20px;background:linear-gradient(135deg,#173e3a,#245f57);color:#fff}.pinyin-foundation-footer strong{font-size:1rem}.pinyin-foundation-footer p{margin:5px 0 0;font-size:.82rem;line-height:1.5;color:rgba(255,255,255,.76)}.pinyin-foundation-footer button{background:#fff;color:#173e3a;white-space:nowrap}
@media (max-width:1100px){
.pinyin-overview-columns{grid-template-columns:1fr 1fr}
.pinyin-overview-block.tone-overview{grid-column:1/-1}
}
@media (max-width:980px){
.pinyin-sound-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pinyin-tone-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.pinyin-rule-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
.pinyin-overview-head{display:block}.pinyin-overview-legend{min-width:0;margin-top:10px}
.pinyin-overview-columns{grid-template-columns:1fr}.pinyin-overview-block.tone-overview{grid-column:auto}
.pinyin-overview-row{grid-template-columns:72px 1fr}
.pinyin-foundation-hero{grid-template-columns:1fr;padding:18px;border-radius:20px}
.pinyin-foundation-tabs{grid-template-columns:1fr 1fr}
.pinyin-foundation-tabs button{padding:11px 12px}
.pinyin-method{justify-content:flex-start;align-items:flex-start;gap:7px}.pinyin-method span{display:none}.pinyin-method strong{width:calc(50% - 4px);font-size:.76rem}
.pinyin-group-head{display:block}.pinyin-group-head p{max-width:none;margin-top:6px}
.pinyin-sound-grid{grid-template-columns:1fr 1fr}
.pinyin-contrast-card{grid-template-columns:1fr}.pinyin-contrast-pairs{grid-template-columns:1fr 1fr}
.pinyin-tone-intro{display:block}.pinyin-tone-sequence{margin-top:12px;white-space:normal}
.pinyin-tone-grid{grid-template-columns:1fr 1fr}
.pinyin-sandhi-grid{grid-template-columns:1fr}
.pinyin-check-list{grid-template-columns:1fr}
.pinyin-foundation-footer{align-items:flex-start;flex-direction:column}.pinyin-foundation-footer button{width:100%}
.pinyin-foundation-backrow{align-items:flex-start;flex-direction:column}.pinyin-foundation-backrow button{width:100%}
}
@media (max-width:430px){
.pinyin-overview-board{padding:14px;border-radius:18px}
.pinyin-overview-row{grid-template-columns:1fr;gap:4px}.pinyin-overview-row>strong{line-height:1.3}
.pinyin-overview-tones{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.pinyin-overview-tones b{font-size:1.08rem}.pinyin-overview-tones small{font-size:.58rem}
.pinyin-sound-grid{grid-template-columns:1fr}
.pinyin-tone-grid{grid-template-columns:1fr}
.pinyin-rule-grid{grid-template-columns:1fr}
.pinyin-contrast-pairs{grid-template-columns:1fr}
.pinyin-foundation-tabs button small{display:none}
}
/* v6.15.93 — Pinyin Foundation hub / syllable chart / recording practice */
.pinyin-foundation-hub{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0 16px}
.pinyin-foundation-hub button{min-height:128px;border:1px solid #dce9e6;border-radius:20px;background:#fff;padding:18px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;box-shadow:0 8px 24px rgba(23,62,58,.05);transition:.16s ease}
.pinyin-foundation-hub button:hover{transform:translateY(-2px);border-color:#9bcfc4;box-shadow:0 10px 26px rgba(23,62,58,.09)}
.pinyin-foundation-hub .hub-icon{font-size:2rem;line-height:1;margin-bottom:10px}.pinyin-foundation-hub b{font-size:1rem;color:#244f49}.pinyin-foundation-hub small{margin-top:6px;color:#7a8583;line-height:1.4}
.pinyin-foundation-tabs{grid-template-columns:repeat(6,minmax(0,1fr))}
.pinyin-chart-card{padding:18px;border-radius:20px;background:#fff;border:1px solid #e4ecea}
.pinyin-chart-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:14px}.pinyin-chart-head span,.pinyin-practice-head span{font-size:.7rem;font-weight:950;letter-spacing:.08em;color:#0f8f83}.pinyin-chart-head h3,.pinyin-practice-head h3{margin:4px 0 6px;color:#173e3a}.pinyin-chart-head p,.pinyin-practice-head p{margin:0;line-height:1.55;color:#687976;max-width:760px}.pinyin-chart-note{min-width:230px;padding:12px 14px;border-radius:14px;background:#fff8e8;border:1px solid #f5dfae}.pinyin-chart-note b{display:block;color:#715a2d}.pinyin-chart-note small{display:block;margin-top:4px;color:#7b6b49;line-height:1.45}
.pinyin-chart-scroll{overflow:auto;border:1px solid #e4ecea;border-radius:16px}.pinyin-chart-table{width:100%;border-collapse:separate;border-spacing:0;min-width:700px}.pinyin-chart-table th,.pinyin-chart-table td{padding:8px;border-right:1px solid #edf2f1;border-bottom:1px solid #edf2f1;text-align:center}.pinyin-chart-table thead th{position:sticky;top:0;background:#effcf9;color:#1f5b52;font-size:.8rem;z-index:1}.pinyin-chart-table tbody th{position:sticky;left:0;background:#f8fbfa;color:#173e3a;font-size:.84rem;z-index:1}.pinyin-chart-table tr:last-child td,.pinyin-chart-table tr:last-child th{border-bottom:0}.pinyin-chart-table th:last-child,.pinyin-chart-table td:last-child{border-right:0}.pinyin-chart-table td button{width:100%;min-width:54px;border:1px solid transparent;background:#f8fbfa;border-radius:9px;padding:7px 5px;color:#315b54;font-weight:850;cursor:pointer}.pinyin-chart-table td button:hover,.pinyin-chart-table td button.active{background:#173e3a;color:#fff}.pinyin-chart-table td span{color:#c4cdcb}.pinyin-chart-result{display:flex;gap:12px;align-items:center;margin-top:12px;padding:12px 14px;border-radius:14px;background:#effcf9;color:#365e58}.pinyin-chart-result b{min-width:70px;font-size:1.15rem;color:#0b746a}.pinyin-chart-result span{line-height:1.45;font-size:.82rem}
.pinyin-practice-shell{display:flex;flex-direction:column;gap:13px}.pinyin-practice-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px;border-radius:20px;background:#fff;border:1px solid #e4ecea}.pinyin-practice-badge{white-space:nowrap;padding:9px 12px;border-radius:999px;background:#effcf9;color:#0b746a;font-size:.75rem;font-weight:900}.pinyin-drill-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.pinyin-drill-picker button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px;border:1px solid #e0eae8;background:#fff;border-radius:14px;cursor:pointer;text-align:left}.pinyin-drill-picker button.active{border-color:#0f8f83;background:#effcf9;box-shadow:inset 0 0 0 1px #0f8f83}.pinyin-drill-picker b{font-size:1.05rem;color:#173e3a}.pinyin-drill-picker span{font-weight:900;color:#0f8f83}.pinyin-drill-picker small{font-size:.7rem;color:#71817e;line-height:1.35}.pinyin-record-card{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:18px;padding:20px;border-radius:20px;background:linear-gradient(135deg,#173e3a,#245f57);color:#fff}.pinyin-record-target>span{display:block;font-size:.67rem;font-weight:950;letter-spacing:.08em;color:#9ee4d7}.pinyin-record-target>strong{display:block;font-size:2.15rem;margin-top:7px}.pinyin-record-target>b{display:block;font-size:1.12rem;color:#aaf0e3;margin-top:1px}.pinyin-record-target>small{display:block;margin-top:3px;color:rgba(255,255,255,.75)}.pinyin-record-target>p{margin:10px 0 0;line-height:1.5;font-size:.8rem;color:rgba(255,255,255,.82)}.pinyin-record-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;align-content:start}.pinyin-record-actions button{border:1px solid rgba(255,255,255,.23);background:rgba(255,255,255,.08);color:#fff;border-radius:11px;padding:10px 9px;font-weight:850;cursor:pointer}.pinyin-record-actions button.primary{background:#fff;color:#173e3a}.pinyin-record-actions button:disabled{opacity:.38;cursor:not-allowed}.pinyin-record-card audio{display:none}.pinyin-record-status{grid-column:2/-1;padding:10px 12px;border-radius:11px;background:rgba(255,255,255,.08);font-size:.78rem;line-height:1.45;color:rgba(255,255,255,.86)}.pinyin-video-note{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;border-radius:15px;background:#fff8e8;border:1px solid #f5dfae;color:#6b5a36}.pinyin-video-note b{white-space:nowrap}.pinyin-video-note span{line-height:1.5;font-size:.8rem}
@media(max-width:980px){.pinyin-foundation-hub{grid-template-columns:1fr 1fr}.pinyin-foundation-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.pinyin-drill-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.pinyin-record-card{grid-template-columns:1fr}.pinyin-record-status{grid-column:auto}}
@media(max-width:650px){.pinyin-foundation-hub{grid-template-columns:1fr 1fr;gap:8px}.pinyin-foundation-hub button{min-height:112px;padding:14px 10px}.pinyin-foundation-hub .hub-icon{font-size:1.55rem}.pinyin-foundation-hub b{font-size:.86rem}.pinyin-foundation-hub small{font-size:.68rem}.pinyin-chart-head,.pinyin-practice-head{display:block}.pinyin-chart-note,.pinyin-practice-badge{min-width:0;margin-top:10px}.pinyin-drill-picker{grid-template-columns:1fr 1fr}.pinyin-record-actions{grid-template-columns:1fr 1fr}.pinyin-video-note{display:block}.pinyin-video-note b{display:block;margin-bottom:5px}}
@media(max-width:390px){.pinyin-foundation-hub{grid-template-columns:1fr}.pinyin-drill-picker{grid-template-columns:1fr}.pinyin-record-actions{grid-template-columns:1fr}}
/* v6.15.93 · Pinyin sound-first refinement */
.pinyin-anchor-audio{width:100%;display:flex;align-items:center;gap:8px;margin:9px 0 7px;padding:8px 9px;border:1px solid #cfe4df;border-radius:11px;background:#fff;color:#244f49;cursor:pointer;text-align:left}
.pinyin-anchor-audio span{font-size:.7rem;font-weight:900;color:#6f807d}.pinyin-anchor-audio b{font-size:1rem;color:#0b746a;margin-left:auto}.pinyin-anchor-audio small{font-size:1.05rem;color:#173e3a}
.pinyin-sound-example{justify-content:space-between;align-items:center}.pinyin-sound-example>div{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0}.pinyin-sound-example>div small{flex-basis:100%;font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:#8a9794}.pinyin-sound-example em{font-style:normal;font-size:.7rem;color:#7a8583}.pinyin-sound-example>button{border:0;background:#fff;border-radius:9px;padding:6px 8px;cursor:pointer;box-shadow:0 2px 8px rgba(23,62,58,.08)}
.pinyin-group-tools{max-width:58%;display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.pinyin-group-tools p{max-width:100%;flex:1 1 260px}.pinyin-group-tools button{border:1px solid #cfe4df;background:#f3fbf9;color:#0b746a;border-radius:10px;padding:7px 9px;font-size:.72rem;font-weight:900;cursor:pointer;white-space:nowrap}
.pinyin-overview-row>div button{display:inline-flex;align-items:center;gap:4px;min-width:36px;padding:4px 7px;border-radius:9px;background:#fff;border:1px solid #dfe9e7;font-size:.8rem;font-weight:950;color:#173e3a;cursor:pointer}.pinyin-overview-row>div button:hover{border-color:#8dc9bd;background:#effcf9}.pinyin-overview-row>div button small{font-size:.62rem}
.pinyin-overview-tones>button{display:flex;flex-direction:column;align-items:center;padding:9px 4px;border-radius:12px;background:#fff;border:1px solid #e1ebe8;cursor:pointer}.pinyin-overview-tones>button:hover{background:#effcf9;border-color:#9bcfc5}.pinyin-overview-tones button b{font-size:1.25rem;color:#173e3a}.pinyin-overview-tones button small{font-size:.65rem;color:#71817e}
.pinyin-chart-table td button{display:flex;align-items:center;justify-content:center;gap:5px}.pinyin-chart-table td button b{font-size:.82rem}.pinyin-chart-table td button small{font-size:.65rem}
.pinyin-record-word{margin-top:10px;padding:9px 10px;border-radius:11px;background:rgba(255,255,255,.08)}.pinyin-record-word>span{display:block;font-size:.62rem;font-weight:900;letter-spacing:.06em;color:#9ee4d7}.pinyin-record-word>b{display:block;margin-top:3px;font-size:.95rem}.pinyin-record-word>small{display:block;margin-top:2px;color:rgba(255,255,255,.7)}
@media(max-width:650px){.pinyin-group-tools{max-width:none;justify-content:flex-start;margin-top:8px}.pinyin-group-tools button{width:100%}.pinyin-anchor-audio{padding:9px}.pinyin-overview-row>div button{min-width:44px;padding:6px 8px}}
.pinyin-overview-open{display:block;width:100%;margin-top:9px;border:0;border-radius:10px;background:#effcf9;color:#0f8f83;padding:8px 10px;font-size:.73rem;font-weight:950;cursor:pointer;text-align:left}.pinyin-overview-open:hover{background:#def7f1}
.pinyin-axis-audio{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;border:0;background:transparent;color:inherit;font-weight:900;cursor:pointer;padding:2px}.pinyin-axis-audio small{font-size:.62rem}.pinyin-axis-audio:hover{color:#0f8f83}
/* v6.15.93 FINAL · professional Pinyin chart first */
.pinyin-61591{--py-ink:#173e3a;--py-green:#0f766e;--py-soft:#f2faf7;--py-line:#dbe9e5;--py-muted:#657b76;max-width:1480px;margin:0 auto;padding-bottom:36px}
.pinyin-foundation-hero-clean{border:1px solid var(--py-line);background:linear-gradient(135deg,#fff 0%,#f4fbf8 100%);box-shadow:0 14px 36px rgba(23,62,58,.06)}
.pinyin-foundation-hero-clean h1{max-width:920px;line-height:1.13}
.pinyin-foundation-hub-clean{position:sticky;top:0;z-index:12;background:rgba(248,252,250,.94);backdrop-filter:blur(12px);border:1px solid var(--py-line);box-shadow:0 8px 24px rgba(23,62,58,.06)}
.pinyin-foundation-hub-clean button{min-height:64px}
.pinyin-ratebar{border:1px solid var(--py-line);box-shadow:none;background:#fff}
.pinyin-ratebar button{min-width:130px}
.pinyin-master-board.pinyin-pro-chart{padding:0;overflow:hidden;border:1px solid var(--py-line);border-radius:24px;background:#fff;box-shadow:0 14px 34px rgba(23,62,58,.06)}
.pinyin-pro-chart .pinyin-master-title{margin:0;padding:24px 26px 18px;border-bottom:1px solid #edf3f1;background:linear-gradient(180deg,#fbfefd,#fff)}
.pinyin-pro-chart .pinyin-master-title h2{font-size:1.7rem;margin:4px 0 7px;color:var(--py-ink)}
.pinyin-pro-chart .pinyin-master-title p{max-width:840px;margin:0;color:var(--py-muted);line-height:1.55}
.pinyin-chart-legend{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:11px 24px;background:#f7fbfa;border-bottom:1px solid #e7f0ed;font-size:.75rem;color:#526b65}
.pinyin-chart-legend .dot{display:inline-block;width:9px;height:9px;border-radius:999px;margin-right:5px}.pinyin-chart-legend .dot.sound{background:#79b9ac}.pinyin-chart-legend .dot.empty{border:1px solid #ccd8d5;background:#fff}
.pinyin-pro-chart-scroll{overflow:auto;max-height:68vh;overscroll-behavior:contain;background:#fff;scrollbar-width:thin}
.pinyin-pro-chart table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-size:.78rem}
.pinyin-pro-chart th,.pinyin-pro-chart td{min-width:58px;height:44px;padding:0;border-right:1px solid #edf2f0;border-bottom:1px solid #edf2f0;text-align:center;background:#fff}
.pinyin-pro-chart thead th{position:sticky;top:0;z-index:6;background:#edf8f5;box-shadow:0 1px 0 #dbe9e5}
.pinyin-pro-chart thead th.corner{left:0;z-index:8;min-width:86px;color:#2a5a52;background:#e2f2ed}
.pinyin-pro-chart tbody th.pinyin-final-axis{position:sticky;left:0;z-index:5;min-width:86px;background:#f6fbf9}
.pinyin-pro-chart .pinyin-chart-group-row th{height:30px;position:sticky;left:0;z-index:4;text-align:left;padding:0 14px;background:#f9fcfb;color:#6a817b;font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;font-weight:900}
.pinyin-initial-axis,.pinyin-final-axis .pinyin-audio-btn{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:0;background:transparent;color:#1e5f56;cursor:pointer;padding:4px}
.pinyin-initial-axis b,.pinyin-final-axis .pinyin-audio-btn b{font-size:.95rem}.pinyin-initial-axis small,.pinyin-final-axis .pinyin-audio-btn small{font-size:.58rem;color:#78908a;font-weight:800}
.pinyin-zero-head b{display:block;font-size:1rem}.pinyin-zero-head small{display:block;font-size:.56rem;color:#6f8882;line-height:1.15}
.pinyin-chart-cell{width:100%;height:100%;border:0;background:#fff;color:#203f3a;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;transition:.12s ease}
.pinyin-chart-cell b{font-size:.78rem}.pinyin-chart-cell small{font-size:.5rem;letter-spacing:.06em;color:#9ab0aa;opacity:.7}
.pinyin-chart-cell:hover,.pinyin-chart-cell:focus-visible{outline:none;background:#e9f7f3;color:#08695f;box-shadow:inset 0 0 0 1px #83c2b5}
.pinyin-chart-empty{color:#d5dedb;font-size:.9rem}
.pinyin-pro-chart .pinyin-master-foot{margin:0;padding:12px 20px;border-top:1px solid #edf3f1;background:#fbfdfc;display:grid;grid-template-columns:1fr 1fr;gap:8px;color:#617771;font-size:.72rem}
.pinyin-tone-popover[hidden]{display:none!important}.pinyin-tone-popover{position:fixed;inset:0;z-index:10020;background:rgba(11,31,28,.42);display:grid;place-items:center;padding:18px;backdrop-filter:blur(4px)}
.pinyin-tone-popover-card{position:relative;width:min(560px,100%);background:#fff;border-radius:24px;padding:24px;box-shadow:0 28px 70px rgba(12,42,37,.24);border:1px solid #dceae6}
.pinyin-tone-popover-card>.close{position:absolute;right:14px;top:12px;width:38px;height:38px;border:0;border-radius:50%;background:#f0f6f4;color:#345c55;font-size:1.35rem;cursor:pointer}
.pinyin-tone-popover-card>span{font-size:.68rem;letter-spacing:.1em;font-weight:950;color:#0f766e}.pinyin-tone-popover-card h3{font-size:2.2rem;margin:4px 0 2px;color:#173e3a}.pinyin-tone-popover-card p{margin:0 0 16px;color:#637873}
.pinyin-tone-popover-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.pinyin-tone-popover-grid button{border:1px solid #dceae6;background:#f8fcfb;border-radius:15px;padding:13px 8px;cursor:pointer;color:#214c45}.pinyin-tone-popover-grid button:hover{background:#eaf8f4;border-color:#8dc7bb}.pinyin-tone-popover-grid b{display:block;font-size:1.45rem}.pinyin-tone-popover-grid span{display:block;font-size:.7rem;font-weight:900}.pinyin-tone-popover-grid small{display:block;margin-top:3px;font-size:.59rem;color:#748983}
.pinyin-tone-popover-card>small{display:block;margin-top:14px;color:#7b8d89;line-height:1.4}
.pinyin-detail-group{margin-top:18px;border:1px solid var(--py-line);border-radius:22px;background:#fff;overflow:hidden}.pinyin-detail-group-head{padding:18px 20px 13px;border-bottom:1px solid #edf3f1;background:#fbfdfc}.pinyin-detail-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.pinyin-detail-card{margin:0;border:0;border-radius:0;border-right:1px solid #edf2f0;border-bottom:1px solid #edf2f0;box-shadow:none;padding:18px}.pinyin-detail-card:nth-child(2n){border-right:0}.pinyin-detail-card:last-child,.pinyin-detail-card:nth-last-child(2):nth-child(odd){border-bottom:0}
.pinyin-detail-symbol strong{font-size:2.4rem}.pinyin-detail-read b{font-size:1.15rem}.pinyin-detail-actions{margin-top:12px}.pinyin-detail-actions button{min-height:40px}
.pinyin-video-dialog{width:min(920px,96vw);background:#fff}.pinyin-video-dialog video{width:100%;aspect-ratio:16/9;background:#eef6f3;display:block}.pinyin-video-head{padding:14px 16px}.pinyin-video-actions{padding:12px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}.pinyin-video-actions span{font-size:.75rem;color:#647a75}
@media(max-width:900px){.pinyin-pro-chart-scroll{max-height:62vh}.pinyin-pro-chart th,.pinyin-pro-chart td{min-width:55px}.pinyin-detail-list{grid-template-columns:1fr}.pinyin-detail-card{border-right:0}.pinyin-detail-card:last-child{border-bottom:0}.pinyin-pro-chart .pinyin-master-foot{grid-template-columns:1fr}}
@media(max-width:650px){.pinyin-61591{padding:0 4px 30px}.pinyin-foundation-hero-clean{padding:18px 15px}.pinyin-foundation-hero-clean h1{font-size:1.45rem}.pinyin-ratebar{display:block;padding:12px}.pinyin-ratebar>div:last-child{display:grid;grid-template-columns:1fr 1fr 1fr;margin-top:9px}.pinyin-ratebar button{min-width:0;padding:9px 5px;font-size:.65rem}.pinyin-pro-chart .pinyin-master-title{display:block;padding:18px 15px}.pinyin-master-formula{margin-top:12px}.pinyin-chart-legend{padding:9px 12px;gap:8px 12px}.pinyin-pro-chart-scroll{max-height:66vh}.pinyin-pro-chart th,.pinyin-pro-chart td{min-width:50px;height:42px}.pinyin-pro-chart thead th.corner,.pinyin-pro-chart tbody th.pinyin-final-axis{min-width:70px}.pinyin-chart-cell b{font-size:.73rem}.pinyin-initial-axis small{display:none}.pinyin-tone-popover-grid{grid-template-columns:1fr 1fr}.pinyin-tone-popover-card{padding:20px 16px}.pinyin-detail-card{padding:15px}.pinyin-detail-main{display:block}.pinyin-detail-symbol{margin-bottom:8px}.pinyin-detail-actions{display:grid;grid-template-columns:1fr 1fr}.pinyin-detail-actions button:last-child{grid-column:1/-1}}
/* v6.15.93 — Pinyin Studio: chart-first professional rebuild */
.pyx-shell{max-width:1540px;margin:0 auto;padding:0 18px 56px;color:#1f3431}
.pyx-header{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:20px 22px;margin:8px 0 12px;border:1px solid #e2e9e6;border-radius:24px;background:rgba(255,255,255,.94);box-shadow:0 12px 32px rgba(31,52,49,.06)}
.pyx-header>div:first-of-type span{font-size:.68rem;letter-spacing:.16em;font-weight:900;color:#7a8a86}.pyx-header h1{margin:3px 0 5px;font-size:clamp(1.55rem,2.7vw,2.2rem);letter-spacing:-.035em;color:#173f39}.pyx-header p{margin:0;max-width:760px;font-size:.9rem;line-height:1.55;color:#667672}.pyx-header-progress{display:flex!important;flex-direction:column;align-items:center!important;justify-content:center;width:76px;height:76px;border-radius:50%;background:#f2f8f5;border:1px solid #d9e9e2}.pyx-header-progress b{font-size:1.35rem;color:#2d665b}.pyx-header-progress span{font-size:.65rem;color:#788984;text-transform:uppercase}.pyx-header .ghost{border:1px solid #dbe6e2;background:#fff;color:#315d55;border-radius:12px;padding:9px 12px;font-weight:800;cursor:pointer}
.pyx-nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:8px;margin:0 0 14px;border:1px solid #e2e9e6;border-radius:18px;background:#fff;position:sticky;top:8px;z-index:25;box-shadow:0 8px 22px rgba(31,52,49,.05)}
.pyx-nav button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:8px 10px;border:0;border-radius:12px;background:transparent;color:#62736f;font-weight:800;cursor:pointer}.pyx-nav button span{font-size:.68rem;color:#99aaa6}.pyx-nav button b{font-size:.83rem}.pyx-nav button small{font-size:.65rem}.pyx-nav button.active{background:#173f39;color:#fff}.pyx-nav button.active span{color:#bde2d7}
.pyx-main>[data-pinyin-panel]{display:none}.pyx-main>[data-pinyin-panel].active{display:block}
.pyx-board,.pyx-learning-panel{background:#fff;border:1px solid #e2e9e6;border-radius:24px;padding:22px;box-shadow:0 12px 34px rgba(31,52,49,.05)}
.pyx-board-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:14px}.pyx-kicker,.pyx-section-intro>span{font-size:.68rem;letter-spacing:.16em;font-weight:900;color:#78918a}.pyx-board-head h2,.pyx-section-intro h2{margin:5px 0 7px;font-size:1.5rem;color:#173f39}.pyx-board-head p,.pyx-section-intro p{margin:0;max-width:800px;font-size:.86rem;line-height:1.55;color:#687975}.pyx-formula{display:grid;grid-template-columns:auto auto auto auto auto;align-items:center;gap:6px;padding:12px 14px;border-radius:16px;background:#f6faf8;border:1px solid #e0ece7;white-space:nowrap}.pyx-formula span{font-size:.78rem;font-weight:900;color:#2d665b}.pyx-formula i{font-style:normal;color:#a4b1ae}.pyx-formula small{grid-column:1/-1;text-align:center;font-size:.62rem;color:#899894}
.pyx-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;margin-bottom:10px;border-radius:14px;background:#f7faf9;border:1px solid #e4ece9}.pyx-speed{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.pyx-speed>span{font-size:.72rem;font-weight:900;color:#6b7c78;margin-right:3px}.pyx-speed button{border:1px solid #d9e5e1;background:#fff;color:#536965;border-radius:10px;padding:7px 9px;font-size:.72rem;font-weight:800;cursor:pointer}.pyx-speed button.active{border-color:#2f7466;background:#eaf5f1;color:#1d5a4e}.pyx-status{font-size:.72rem;color:#657672}.pyx-status[data-mode="error"]{color:#a24848}.pyx-status[data-mode="playing"]{color:#226c5e;font-weight:800}
.pyx-legend{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 10px}.pyx-legend span{padding:5px 8px;border-radius:8px;font-size:.67rem;font-weight:800;border:1px solid transparent}.pyx-legend .labial{background:#fff1f3;color:#8b4b58}.pyx-legend .apical{background:#fff5ed;color:#8a5c3e}.pyx-legend .velar{background:#fff7dc;color:#8a6c23}.pyx-legend .palatal{background:#f2edff;color:#65508d}.pyx-legend .retroflex{background:#eaf7f3;color:#3c6c60}.pyx-legend .dental{background:#eaf9ef;color:#427354}
.pyx-table-wrap{overflow:auto;max-height:66vh;border:1px solid #dde7e3;border-radius:16px;background:#fff}.pyx-table-wrap table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:.78rem}.pyx-table-wrap th,.pyx-table-wrap td{width:58px;min-width:58px;height:42px;border-right:1px solid #edf1ef;border-bottom:1px solid #edf1ef;text-align:center;padding:0;background:#fff}.pyx-table-wrap thead th{position:sticky;top:0;z-index:5}.pyx-corner{left:0;z-index:8!important;min-width:80px!important;width:80px!important;background:#f3f7f5!important;color:#315d55;font-size:.76rem}.pyx-corner small{display:block;font-size:.58rem;color:#899894}.pyx-final-col{position:sticky;left:0;z-index:4;min-width:80px!important;width:80px!important;background:#f9fbfa!important}.pyx-axis-audio,.pyx-head button{width:100%;height:100%;border:0;background:transparent;cursor:pointer;color:inherit}.pyx-axis-audio{display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-weight:900;color:#2e5f56}.pyx-axis-audio small{opacity:.7}.pyx-head{height:52px!important}.pyx-head button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px}.pyx-head b{font-size:.92rem}.pyx-head small{font-size:.55rem;opacity:.75}.pyx-head.labial{background:#fbdde3!important;color:#77434f}.pyx-head.apical{background:#fee8da!important;color:#7f553d}.pyx-head.velar{background:#ffedbd!important;color:#715b25}.pyx-head.palatal{background:#e9e1fb!important;color:#5f4d82}.pyx-head.retroflex{background:#dcefe9!important;color:#365f56}.pyx-head.dental{background:#dbf2e3!important;color:#406e50}.pyx-head.zero{background:#eff4f1!important;color:#72837e}.pyx-cell{width:100%;height:100%;border:0;background:transparent;color:#243835;cursor:pointer;font-weight:750;transition:.15s ease}.pyx-cell:hover,.pyx-cell:focus-visible{background:#e8f4f0;color:#0f6a5c;box-shadow:inset 0 0 0 1px #80b9ad}.pyx-empty{display:block;width:100%;height:100%;background:#fbfcfc}.pyx-section-row th{position:sticky;left:0;text-align:left!important;padding:0 12px!important;height:28px!important;background:#f4f7f6!important;color:#74847f;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;z-index:3}.pyx-chart-note{margin-top:10px;padding:10px 12px;border-radius:12px;background:#f8faf9;color:#687975;font-size:.72rem;line-height:1.5}
.pyx-tone-drawer{position:fixed;right:22px;bottom:22px;z-index:95;width:min(420px,calc(100vw - 32px));padding:18px;border-radius:20px;background:#fff;border:1px solid #dce7e3;box-shadow:0 22px 60px rgba(24,52,47,.22)}.pyx-drawer-head{display:flex;justify-content:space-between;align-items:flex-start}.pyx-drawer-head span{font-size:.62rem;letter-spacing:.12em;color:#80918d;font-weight:900}.pyx-drawer-head h3{margin:2px 0;font-size:2rem;color:#173f39}.pyx-drawer-head button{border:0;background:#f1f5f3;width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:1.25rem}.pyx-tone-drawer>p{font-size:.8rem;color:#667672;line-height:1.5}.pyx-tone-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pyx-tone-grid button{display:flex;flex-direction:column;align-items:flex-start;padding:11px;border:1px solid #dfe8e5;background:#f9fbfa;border-radius:12px;cursor:pointer}.pyx-tone-grid b{font-size:1.25rem;color:#173f39}.pyx-tone-grid span{font-size:.68rem;color:#667672}.pyx-tone-grid small{font-size:.64rem;color:#2d7467;margin-top:2px}.pyx-tone-drawer>small{display:block;margin-top:10px;color:#8b9996;font-size:.64rem}
.pyx-section-intro{padding-bottom:16px;border-bottom:1px solid #e7eeeb;margin-bottom:12px}.pyx-group{border-bottom:1px solid #e7eeeb}.pyx-group:last-child{border-bottom:0}.pyx-group summary{list-style:none;cursor:pointer;padding:15px 4px}.pyx-group summary::-webkit-details-marker{display:none}.pyx-group summary>div{display:grid;grid-template-columns:38px minmax(130px,.4fr) 1fr;align-items:center;gap:10px}.pyx-group summary span{font-size:.66rem;font-weight:900;color:#9aa8a5}.pyx-group summary b{font-size:.98rem;color:#234b44}.pyx-group summary small{font-size:.74rem;color:#7c8b87}.pyx-group summary i{float:right;margin-top:-25px;font-style:normal;font-size:1.05rem;color:#7f908c}.pyx-group[open] summary i{transform:rotate(45deg)}.pyx-group-body{padding:0 4px 18px}.pyx-video-card{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:12px;width:100%;padding:13px 14px;margin:0 0 12px;border:1px solid #d9e6e1;border-radius:16px;background:linear-gradient(135deg,#f6faf8,#fff);text-align:left;cursor:pointer}.pyx-video-play{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#173f39;color:#fff}.pyx-video-card small{display:block;font-size:.62rem;letter-spacing:.08em;font-weight:900;color:#7f918d}.pyx-video-card b{display:block;margin:2px 0;color:#214b43}.pyx-video-card p{margin:0;font-size:.72rem;color:#6d7d79}.pyx-video-open{font-size:.72rem;font-weight:900;color:#2f7466}.pyx-sound-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.pyx-sound{padding:14px;border:1px solid #e0e9e6;border-radius:16px;background:#fff}.pyx-sound-title{display:flex;align-items:center;justify-content:space-between}.pyx-sound-title small{display:block;font-size:.58rem;letter-spacing:.08em;color:#899995;font-weight:900}.pyx-sound-title strong{display:block;font-size:1.65rem;line-height:1;color:#173f39;margin-top:3px}.pyx-sound-title>span{font-size:.72rem;font-weight:800;color:#6f817d;background:#f4f7f6;border-radius:8px;padding:5px 7px}.pyx-read-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:7px;margin:10px 0;padding:8px 9px;border-radius:11px;background:#f6f9f8}.pyx-read-row span{font-size:.65rem;color:#7d8c89}.pyx-read-row b{font-size:.9rem;color:#2d665b}.pyx-read-row button{border:1px solid #dbe6e2;background:#fff;border-radius:9px;padding:6px 8px;font-size:.68rem;font-weight:850;cursor:pointer}.pyx-sound>p{margin:0;font-size:.74rem;line-height:1.5;color:#5f716d}.pyx-examples{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.pyx-examples>div{padding:8px;border-radius:10px;background:#fafbfb;border:1px solid #edf1ef}.pyx-examples b{font-size:.95rem;color:#263c38}.pyx-examples span{display:block;font-size:.7rem;color:#2c7467;font-weight:850}.pyx-examples small{font-size:.65rem;color:#7e8c89}.pyx-practice-link{width:100%;margin-top:9px;border:0;background:#edf6f3;color:#2b6d60;border-radius:10px;padding:8px;font-size:.7rem;font-weight:900;cursor:pointer}
.pyx-tone-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.pyx-tone-cards article{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 10px;border:1px solid #e0e9e6;border-radius:16px;background:#fff}.pyx-tone-cards article>span{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#eef6f3;color:#2f7466;font-size:.7rem;font-weight:900}.pyx-tone-cards strong{font-size:2rem;color:#173f39;margin:7px 0}.pyx-tone-cards b{font-size:.8rem;color:#4f6560}.pyx-tone-cards small{font-size:.66rem;color:#85938f}.pyx-tone-cards button{margin-top:10px;border:1px solid #dbe6e2;background:#f7faf9;border-radius:10px;padding:7px 9px;font-size:.7rem;font-weight:850;cursor:pointer}.pyx-sandhi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.pyx-sandhi article{padding:13px;border-radius:14px;background:#f7faf9;border:1px solid #e3ebe8}.pyx-sandhi b{font-size:.78rem;color:#265b52}.pyx-sandhi p{font-size:.72rem;line-height:1.45;color:#687975;margin:6px 0 0}
.pyx-practice{max-width:760px;margin:0 auto;padding:18px;border:1px solid #dfe8e5;border-radius:18px;background:#f9fbfa}.pyx-practice-select label{display:block;font-size:.68rem;font-weight:900;color:#6f817d;margin-bottom:6px}.pyx-practice-select select{width:100%;padding:11px 12px;border:1px solid #d8e4df;border-radius:12px;background:#fff;color:#28453f;font-weight:800}.pyx-practice-target{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin:14px 0;padding:16px;border-radius:16px;background:#fff;border:1px solid #e0e9e6}.pyx-practice-target small{grid-column:1/-1;font-size:.62rem;letter-spacing:.08em;font-weight:900;color:#879793}.pyx-practice-target strong{font-size:2.5rem;color:#173f39}.pyx-practice-target b{font-size:1.2rem;color:#2d665b}.pyx-practice-target span{font-size:.8rem;color:#6d7e7a}.pyx-practice-target p{grid-column:1/-1;margin:0;font-size:.78rem;line-height:1.5;color:#5f716d}.pyx-practice-actions{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.pyx-practice-actions button{border:1px solid #d7e3df;background:#fff;border-radius:10px;padding:9px 7px;font-size:.68rem;font-weight:850;cursor:pointer}.pyx-practice-actions .primary{background:#173f39;color:#fff;border-color:#173f39}.pyx-practice-actions button:disabled{opacity:.45;cursor:not-allowed}.pyx-record-status{margin-top:10px;font-size:.72rem;color:#6e7f7b;text-align:center}
.pyx-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pyx-check-footer{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding:11px 13px;border-radius:12px;background:#173f39;color:#fff}.pyx-check-footer button{border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:9px;padding:7px 10px;cursor:pointer}
.pyx-video-modal{position:fixed;inset:0;z-index:120;background:rgba(13,30,27,.72);display:grid;place-items:center;padding:20px}.pyx-video-modal[hidden]{display:none}.pyx-video-dialog{width:min(980px,96vw);max-height:92vh;overflow:auto;background:#fff;border-radius:22px;padding:16px;box-shadow:0 28px 80px rgba(0,0,0,.3)}.pyx-video-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.pyx-video-head span{display:block;font-size:.6rem;letter-spacing:.12em;font-weight:900;color:#81918d}.pyx-video-head b{font-size:1rem;color:#173f39}.pyx-video-head button{border:0;background:#f2f6f4;width:36px;height:36px;border-radius:10px;font-size:1.2rem;cursor:pointer}.pyx-video-frame{aspect-ratio:16/9;background:#111;border-radius:14px;overflow:hidden}.pyx-video-frame iframe{width:100%;height:100%;border:0}.pyx-video-dialog>p{font-size:.7rem;line-height:1.45;color:#74837f;margin:10px 2px 0}
@media(max-width:1100px){.pyx-sound-grid{grid-template-columns:1fr 1fr}.pyx-tone-cards{grid-template-columns:repeat(3,1fr)}.pyx-nav{grid-template-columns:repeat(3,1fr);position:relative;top:auto}.pyx-board-head{display:block}.pyx-formula{display:inline-grid;margin-top:12px}.pyx-header{grid-template-columns:1fr auto}.pyx-header>.ghost{grid-column:1/-1;justify-self:start}}
@media(max-width:720px){.pyx-shell{padding:0 8px 38px}.pyx-header{padding:15px;gap:12px;border-radius:18px}.pyx-header h1{font-size:1.5rem}.pyx-header p{font-size:.8rem}.pyx-header-progress{width:62px;height:62px}.pyx-nav{grid-template-columns:1fr 1fr;padding:6px;border-radius:14px}.pyx-nav button{min-height:42px}.pyx-board,.pyx-learning-panel{padding:13px;border-radius:17px}.pyx-toolbar{display:block}.pyx-status{margin-top:8px}.pyx-table-wrap{max-height:62vh}.pyx-table-wrap th,.pyx-table-wrap td{width:50px;min-width:50px;height:39px}.pyx-final-col,.pyx-corner{min-width:68px!important;width:68px!important}.pyx-sound-grid,.pyx-sound-grid.finals,.pyx-tone-cards,.pyx-sandhi,.pyx-check-grid{grid-template-columns:1fr}.pyx-group summary>div{grid-template-columns:30px 1fr}.pyx-group summary small{grid-column:2}.pyx-video-card{grid-template-columns:40px 1fr}.pyx-video-open{display:none}.pyx-practice-actions{grid-template-columns:1fr 1fr}.pyx-tone-drawer{right:10px;bottom:10px;width:calc(100vw - 20px)}.pyx-tone-grid{grid-template-columns:1fr 1fr}}
/* ===== v6.15.93 · Pinyin Pronunciation Studio ===== */
.p93-shell{--p93-ink:#173532;--p93-muted:#687b77;--p93-line:#dce7e3;--p93-paper:#fffdf8;--p93-cream:#f7f4ec;--p93-green:#2f6f62;--p93-green2:#0f8f83;--p93-gold:#b7893c;max-width:1500px;margin:0 auto;padding:10px 18px 40px;color:var(--p93-ink);font-family:"Be Vietnam Pro","Noto Sans SC",sans-serif}
.p93-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;padding:26px 28px;margin:8px 0 14px;border:1px solid #d9e5e1;border-radius:26px;background:linear-gradient(135deg,#f8fcf9 0%,#fffdf8 55%,#f5f0e5 100%);box-shadow:0 18px 50px rgba(22,57,51,.08)}
.p93-back{align-self:start;border:1px solid #d4e0dc;background:#fff;color:#315e56;border-radius:12px;padding:9px 12px;font-weight:800;cursor:pointer}.p93-hero>div>span,.p93-eyebrow{font-size:.72rem;font-weight:950;letter-spacing:.12em;color:#6f8d85}.p93-hero h1{margin:6px 0 8px;font-size:clamp(1.65rem,3vw,2.45rem);letter-spacing:-.035em;color:#173532}.p93-hero p{max-width:820px;margin:0;color:#5f716d;line-height:1.65}.p93-progress{min-width:92px;padding:13px 12px;text-align:center;border:1px solid #d8e4e0;border-radius:18px;background:#fff}.p93-progress b{display:block;font-size:1.45rem;color:#2d6b5e}.p93-progress small{color:#7b8986;font-weight:700}
.p93-nav{position:sticky;top:8px;z-index:15;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:7px;margin:0 0 18px;border:1px solid #dce7e3;border-radius:18px;background:rgba(255,255,255,.94);box-shadow:0 8px 30px rgba(20,60,52,.07);backdrop-filter:blur(16px)}.p93-nav button{min-width:0;border:0;border-radius:13px;background:transparent;padding:10px 9px;color:#6f807c;cursor:pointer;text-align:left}.p93-nav button span{display:block;font-size:.64rem;font-weight:950;color:#9aaaa6}.p93-nav button b{display:block;margin-top:2px;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.p93-nav button.active{background:#1f5f54;color:#fff}.p93-nav button.active span{color:#bfe5dc}
.p93-main{display:block}.p93-panel{display:none;animation:p93fade .18s ease}.p93-panel.active{display:block}@keyframes p93fade{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:none}}
.p93-panel-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 14px}.p93-panel-head h2{margin:4px 0 6px;font-size:clamp(1.35rem,2.4vw,2rem);letter-spacing:-.025em}.p93-panel-head p{max-width:820px;margin:0;color:var(--p93-muted);line-height:1.6}
.p93-listen-mode{display:inline-grid;grid-template-columns:repeat(3,1fr);gap:5px;padding:5px;border:1px solid #dae5e1;border-radius:14px;background:#f5f8f7}.p93-listen-mode button{border:0;border-radius:10px;background:transparent;padding:8px 12px;color:#687b77;text-align:left;cursor:pointer}.p93-listen-mode button b{display:block;font-size:.76rem}.p93-listen-mode button small{display:block;margin-top:2px;font-size:.64rem;color:#8a9995}.p93-listen-mode button.active{background:#fff;box-shadow:0 3px 12px rgba(30,72,64,.08);color:#1d554c}.p93-audio-banner{display:flex;justify-content:space-between;gap:18px;align-items:center;margin:12px 0;padding:11px 14px;border:1px solid #d8e5e0;border-radius:14px;background:#f7fbf9;color:#355c55}.p93-audio-banner strong{font-size:.8rem}.p93-audio-banner small{font-size:.68rem;color:#788a86;text-align:right}
.p93-chart-key{display:flex;flex-wrap:wrap;gap:6px 12px;justify-content:flex-end}.p93-chart-key span{display:flex;align-items:center;gap:5px;font-size:.68rem;color:#73827f}.p93-chart-key i{width:9px;height:9px;border-radius:50%}.p93-chart-key i.labial{background:#eab7bc}.p93-chart-key i.apical{background:#e8c7aa}.p93-chart-key i.velar{background:#e6cf88}.p93-chart-key i.palatal{background:#cabce4}.p93-chart-key i.retroflex{background:#a9d4c9}.p93-chart-key i.dental{background:#afe1c4}
.p93-chart-scroll{overflow:auto;border:1px solid #dbe5e2;border-radius:20px;background:#fff;box-shadow:0 12px 34px rgba(23,53,50,.05);max-height:70vh}.p93-chart{border-collapse:separate;border-spacing:0;min-width:1280px;width:100%;font-size:.78rem}.p93-chart th,.p93-chart td{border-right:1px solid #edf1ef;border-bottom:1px solid #edf1ef;padding:0;text-align:center;height:44px}.p93-chart thead th{position:sticky;top:0;z-index:4;background:#f9fbfa}.p93-corner{left:0;z-index:6!important;min-width:126px;padding:0 10px!important;text-align:left!important;color:#71817d;font-size:.67rem}.p93-final-axis{position:sticky;left:0;z-index:3;width:126px;background:#fbfcfb}.p93-axis,.p93-initial-axis button{width:100%;height:100%;border:0;background:transparent;cursor:pointer;color:#244b45}.p93-axis{display:flex;align-items:center;justify-content:space-between;padding:0 12px}.p93-axis b{font-size:.86rem}.p93-axis span,.p93-initial-axis span{font-size:.65rem;color:#8a9996}.p93-initial-axis{min-width:52px}.p93-initial-axis button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.p93-initial-axis b{font-size:.92rem}.p93-initial-axis.labial{background:#fff1f3}.p93-initial-axis.apical{background:#fff6ee}.p93-initial-axis.velar{background:#fff8dd}.p93-initial-axis.palatal{background:#f6f1ff}.p93-initial-axis.retroflex{background:#eef9f5}.p93-initial-axis.dental{background:#effbf3}.p93-initial-axis.zero{background:#eff4eb;color:#64815d}.p93-syllable{width:100%;height:100%;border:0;background:#fff;color:#29433f;cursor:pointer;transition:.12s}.p93-syllable:hover,.p93-syllable:focus-visible{background:#eaf8f4;color:#0f7166;box-shadow:inset 0 0 0 2px #70b9aa}.p93-syllable span{font-weight:650}.p93-chart td>i{display:block;width:100%;height:100%;background:#fcfcfb}.p93-chart-group th{height:30px!important;padding:0 12px!important;background:#f2f5f1!important;text-align:left!important;font-size:.66rem;letter-spacing:.06em;color:#72827d}.p93-chart-foot{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:#778783;font-size:.7rem}
.p93-tone-dock{position:fixed;right:22px;bottom:22px;z-index:60;width:min(390px,calc(100vw - 28px));padding:16px;border:1px solid #d5e2de;border-radius:20px;background:#fff;box-shadow:0 25px 70px rgba(13,47,40,.22)}.p93-tone-title{display:flex;align-items:center;justify-content:space-between}.p93-tone-title span{font-size:.66rem;font-weight:950;color:#79908a;letter-spacing:.1em}.p93-tone-title strong{display:block;font-size:1.6rem}.p93-tone-title button{border:0;background:#f3f6f5;border-radius:10px;width:34px;height:34px;cursor:pointer}.p93-tone-dock>p{font-size:.75rem;color:#657773;line-height:1.5}.p93-tone-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.p93-tone-buttons button{border:1px solid #dce6e3;border-radius:13px;background:#fafcfb;padding:10px;text-align:left;cursor:pointer}.p93-tone-buttons b{display:block;font-size:1.15rem;color:#174e46}.p93-tone-buttons span{display:block;font-size:.68rem;color:#6c7e79}.p93-tone-buttons small{display:block;margin-top:5px;font-size:.66rem;font-weight:900;color:#0f8f83}
.p93-studio{display:grid;grid-template-columns:220px minmax(0,1fr);gap:14px}.p93-studio-nav{border:1px solid #dce6e3;border-radius:18px;background:#f8faf9;padding:8px;height:max-content;position:sticky;top:88px}.p93-group-tabs{display:flex;flex-direction:column;gap:4px}.p93-group-tabs button{display:grid;grid-template-columns:32px 1fr;align-items:center;border:0;border-radius:11px;background:transparent;padding:9px;color:#60736f;text-align:left;cursor:pointer}.p93-group-tabs button span{font-size:.63rem;font-weight:900;color:#95a39f}.p93-group-tabs button b{font-size:.77rem}.p93-group-tabs button.active{background:#fff;box-shadow:0 3px 12px rgba(31,79,69,.08);color:#1f5f54}.p93-studio-work{min-width:0}.p93-sound-strip{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}.p93-sound-strip button{min-width:48px;border:1px solid #d7e3df;border-radius:12px;background:#fff;padding:9px 12px;font-size:.96rem;font-weight:900;color:#315a53;cursor:pointer}.p93-sound-strip button.active{background:#1f5f54;color:#fff;border-color:#1f5f54}.p93-lesson-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);gap:14px}.p93-lesson-main,.p93-video-lesson{border:1px solid #dbe5e2;border-radius:22px;background:#fff;box-shadow:0 10px 32px rgba(21,58,51,.05)}.p93-lesson-main{padding:20px}.p93-phoneme{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto auto auto;gap:0 18px;padding:16px 18px;margin-bottom:14px;border-radius:18px;background:#f6faf8}.p93-phoneme small{grid-column:1/-1;font-size:.65rem;letter-spacing:.1em;font-weight:950;color:#739089}.p93-phoneme strong{grid-row:2/5;font-size:4rem;line-height:1;color:#163c36}.p93-phoneme span{font-size:1.45rem;font-weight:900;color:#0f8f83}.p93-phoneme em{font-size:.9rem;font-style:normal;color:#6c7b78}.p93-phoneme.final{background:#f7f5fb}.p93-listen-card{padding:16px;border-top:1px solid #eef2f0;border-bottom:1px solid #eef2f0}.p93-listen-card>span,.p93-step{font-size:.66rem;font-weight:950;letter-spacing:.1em;color:#739089}.p93-listen-card h3{margin:5px 0 6px;font-size:1.04rem}.p93-listen-card>p{margin:0 0 10px;font-size:.76rem;line-height:1.55;color:#687b77}.p93-primary-listen{display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;border:1px solid #b8d9d1;border-radius:15px;background:#eef9f6;padding:12px 14px;text-align:left;cursor:pointer;color:#184f47}.p93-primary-listen>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#1f695c;color:#fff}.p93-primary-listen b{display:block;font-size:.92rem}.p93-primary-listen small{display:block;margin-top:2px;font-size:.68rem;color:#66817b}.p93-articulation{padding:16px}.p93-articulation-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.p93-articulation-grid>div{padding:12px;border-radius:13px;background:#fafbf9;border:1px solid #e7ecea}.p93-articulation-grid span{font-size:.62rem;font-weight:950;color:#79908b;letter-spacing:.08em}.p93-articulation-grid p{margin:5px 0 0;font-size:.77rem;line-height:1.52;color:#4f6460}.p93-articulation-grid .warning{grid-column:1/-1;background:#fff8eb;border-color:#f0dfb8}.p93-examples{padding:16px;border-top:1px solid #eef2f0}.p93-example{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid #f0f3f2}.p93-example:last-child{border-bottom:0}.p93-example div{display:grid;grid-template-columns:auto auto;gap:0 8px;align-items:baseline}.p93-example b{font-size:1.25rem}.p93-example span{font-weight:850;color:#0f8f83}.p93-example small{grid-column:2;color:#798783}.p93-example-audio{border:1px solid #dce6e3;background:#fff;border-radius:10px;padding:7px 9px;cursor:pointer}.p93-record-inline{padding:16px;border-top:1px solid #eef2f0}.p93-record-inline p{font-size:.76rem;line-height:1.5;color:#667873}.p93-video-lesson{padding:16px;height:max-content;position:sticky;top:88px}.p93-video-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.p93-video-label span{font-size:.65rem;font-weight:950;letter-spacing:.1em;color:#6f8781}.p93-video-label small{font-size:.65rem;color:#91a09c}.p93-video-launch{width:100%;border:0;background:transparent;padding:0;text-align:left;cursor:pointer}.p93-video-thumb{aspect-ratio:16/9;border-radius:16px;background:linear-gradient(145deg,#183f39,#2e7062);display:grid;place-items:center;overflow:hidden}.p93-video-thumb:before{content:'PRONUNCIATION';position:absolute;color:rgba(255,255,255,.12);font-size:1.4rem;font-weight:950;letter-spacing:.18em}.p93-video-thumb span{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;color:#1e6155;font-size:1.2rem;box-shadow:0 8px 25px rgba(0,0,0,.18)}.p93-video-launch>div:last-child{padding:11px 3px 2px}.p93-video-launch b{display:block;color:#183f39}.p93-video-launch p{margin:5px 0;font-size:.74rem;line-height:1.5;color:#687a76}.p93-video-launch small{color:#8a9995}.p93-video-stage{margin-top:12px;padding-top:12px;border-top:1px solid #e8eeec}.p93-video-stage-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.p93-video-stage-head b{font-size:.78rem}.p93-video-stage-head button{border:1px solid #dbe4e1;background:#fff;border-radius:9px;padding:6px 9px;cursor:pointer}.p93-video-ratio{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#111}.p93-video-ratio iframe{width:100%;height:100%;border:0}.p93-video-stage p{font-size:.68rem;color:#788783}.p93-video-stage a{font-size:.72rem;font-weight:900;color:#0f7c70}
.p93-tone-visual{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.p93-tone-visual article{padding:16px;border:1px solid #dbe5e2;border-radius:18px;background:#fff;text-align:center}.p93-tone-visual article>span{display:grid;place-items:center;width:28px;height:28px;margin:auto;border-radius:50%;background:#edf7f4;color:#1f665a;font-weight:900}.p93-tone-visual strong{display:block;font-size:2.2rem;margin:5px 0;color:#173532}.p93-tone-visual b{display:block;color:#0f8f83}.p93-tone-visual small{display:block;min-height:34px;margin-top:3px;color:#758581}.p93-tone-visual button{margin-top:8px;border:1px solid #d9e4e0;background:#f8fbfa;border-radius:10px;padding:8px 10px;cursor:pointer}.p93-tone-note{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding:14px;border:1px solid #e4e2d7;border-radius:16px;background:#fffaf0}.p93-tone-note b{flex:1 1 100%;font-size:.78rem}.p93-tone-note span{font-size:.72rem;border:1px solid #ece2c8;background:#fff;border-radius:10px;padding:7px 9px}.p93-checkpoint{margin-top:12px;border:0;border-radius:12px;background:#1f5f54;color:#fff;padding:10px 14px;font-weight:850;cursor:pointer}.p93-checkpoint.done{background:#173532}
.p93-record-lab{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:12px}.p93-record-target,.p93-recorder{padding:18px;border:1px solid #dce6e3;border-radius:20px;background:#fff}.p93-record-target select{width:100%;padding:10px;border:1px solid #dbe5e2;border-radius:10px;background:#fff}.p93-record-target>span{display:block;margin-top:14px;font-size:.65rem;font-weight:950;letter-spacing:.1em;color:#758d87}.p93-record-target>strong{display:block;font-size:3.5rem;line-height:1;margin-top:4px}.p93-record-target>b{display:block;color:#0f8f83;font-size:1.2rem}.p93-record-target>em{font-style:normal;color:#6c7d79}.p93-record-target>p{font-size:.76rem;line-height:1.55;color:#61736f}.p93-recorder-state{padding:12px;border-radius:12px;background:#f4f8f6;color:#425f59;font-size:.78rem}.p93-recorder-buttons{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.p93-selfcheck{display:grid;grid-template-columns:1fr;gap:6px;margin-top:14px}.p93-selfcheck span{font-size:.65rem;font-weight:950;letter-spacing:.08em;color:#7c8c88}.p93-selfcheck b{padding:9px 10px;border:1px solid #e1e8e6;border-radius:10px;font-size:.75rem;color:#506560}
.p93-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.p93-check-grid article{padding:16px;border:1px solid #dce5e2;border-radius:18px;background:#fff}.p93-check-grid article>span{font-size:.64rem;font-weight:950;color:#77908a;letter-spacing:.08em}.p93-check-grid article>strong{display:block;margin:5px 0 9px}.p93-check-grid article>div{display:flex;flex-direction:column;gap:6px}.p93-check-grid article button{border:1px solid #dde6e3;background:#fafcfa;border-radius:10px;padding:8px 10px;text-align:left;cursor:pointer}.p93-check-grid article button.correct{background:#edf8f4;border-color:#8dcbbd}.p93-check-grid article button.wrong{background:#fff2f2;border-color:#e5abab}.p93-check-grid article p{min-height:20px;margin:8px 0 0;font-size:.72rem;color:#61736f}.p93-check-summary{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding:12px 14px;border-radius:14px;background:#173532;color:#fff}.p93-check-summary button{border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;border-radius:9px;padding:7px 9px}.p93-footer{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:18px;padding:18px 20px;border-radius:18px;background:#173532;color:#fff}.p93-footer div span{display:block;margin-top:4px;font-size:.74rem;color:#bfd0cc}.p93-footer>small{font-size:.62rem;color:#9fb9b3;text-align:right;max-width:360px}
.p93-audio.is-playing,.p93-syllable.is-playing{box-shadow:inset 0 0 0 2px #0f8f83!important;background:#e8f7f3!important}
@media(max-width:1080px){.p93-lesson-card{grid-template-columns:1fr}.p93-video-lesson{position:static}.p93-studio{grid-template-columns:180px 1fr}.p93-nav{grid-template-columns:repeat(3,1fr);position:static}.p93-tone-visual{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.p93-shell{padding:8px 10px 28px}.p93-hero{grid-template-columns:1fr;padding:18px}.p93-back{width:max-content}.p93-progress{display:flex;align-items:baseline;gap:6px;width:max-content;min-width:0;padding:8px 11px;border-radius:999px}.p93-progress b{font-size:1rem}.p93-progress small{font-size:.7rem}.p93-nav{grid-template-columns:repeat(2,1fr)}.p93-panel-head{display:block}.p93-chart-key{justify-content:flex-start;margin-top:8px}.p93-audio-banner{display:block}.p93-audio-banner small{display:block;text-align:left;margin-top:4px}.p93-chart-scroll{max-height:62vh}.p93-studio{grid-template-columns:1fr}.p93-studio-nav{position:static;overflow:auto}.p93-group-tabs{display:flex;flex-direction:row;min-width:max-content;gap:8px;padding:2px}.p93-group-tabs button{grid-template-columns:auto auto;gap:5px;padding:9px 11px;white-space:nowrap}.p93-articulation-grid{grid-template-columns:1fr}.p93-articulation-grid .warning{grid-column:auto}.p93-tone-visual{grid-template-columns:1fr 1fr}.p93-record-lab,.p93-check-grid{grid-template-columns:1fr}.p93-footer{display:block}.p93-footer>small{display:block;text-align:left;margin-top:10px}.p93-tone-dock{right:14px;bottom:14px}.p93-listen-mode{width:100%;grid-template-columns:repeat(3,1fr)}.p93-listen-mode button{padding:7px 8px}.p93-listen-mode button small{font-size:.58rem}}
/* v6.15.93b — adult polish: fewer micro-labels, larger readable type, stable inline video */
.p93-shell{max-width:1440px;padding:18px 24px 48px;font-size:15px}
.p93-hero{padding:24px 26px;border-radius:20px;box-shadow:0 10px 30px rgba(21,58,51,.06)}
.p93-hero>div>span,.p93-eyebrow,.p93-listen-card>span,.p93-step,.p93-video-label span{font-size:12px;letter-spacing:.08em}
.p93-hero p,.p93-panel-head p{font-size:15px;line-height:1.65}
.p93-nav{border-radius:14px;box-shadow:0 6px 18px rgba(20,60,52,.055)}
.p93-nav button{min-height:52px;padding:9px 12px}.p93-nav button span{font-size:11px}.p93-nav button b{font-size:14px}
.p93-panel-head{margin-bottom:16px}.p93-panel-head h2{font-size:28px}.p93-chart-key span,.p93-chart-foot,.p93-audio-banner small{font-size:12px}
.p93-audio-banner{padding:12px 15px;background:#f8fbf9}.p93-audio-banner strong{font-size:13px}
.p93-chart{font-size:13px}.p93-chart th,.p93-chart td{height:46px}.p93-axis b,.p93-initial-axis b{font-size:15px}.p93-syllable span{font-size:13px}
.p93-studio{grid-template-columns:210px minmax(0,1fr);gap:18px}.p93-studio-nav{border-radius:14px;background:#fbfcfb}.p93-group-tabs button{min-height:45px;padding:10px 12px}.p93-group-tabs button span{font-size:11px}.p93-group-tabs button b{font-size:13px}
.p93-sound-strip button{min-width:54px;min-height:44px;font-size:16px}.p93-lesson-card{grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr);gap:18px}
.p93-lesson-main,.p93-video-lesson{border-radius:18px;box-shadow:0 8px 24px rgba(21,58,51,.045)}.p93-lesson-main{padding:22px}
.p93-phoneme{border-radius:14px;padding:18px 20px}.p93-phoneme small{font-size:11px}.p93-phoneme strong{font-size:66px}.p93-phoneme span{font-size:25px}.p93-phoneme em{font-size:16px}
.p93-listen-card{padding:18px 0}.p93-listen-card h3{font-size:19px;margin-top:7px}.p93-listen-card>p{font-size:14px;line-height:1.65}.p93-listen-mode button{min-height:50px;padding:9px 12px}.p93-listen-mode button b{font-size:13px}.p93-listen-mode button small{font-size:11px}
.p93-primary-listen{min-height:64px;padding:12px 16px}.p93-primary-listen b{font-size:16px}.p93-primary-listen small{font-size:12px}.p93-primary-listen>span{width:42px;height:42px}
.p93-contrast{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;padding:12px 14px;border:1px solid #e5dfcf;border-radius:12px;background:#fffaf0}.p93-contrast span{display:block;font-size:11px;font-weight:900;letter-spacing:.08em;color:#8b764e}.p93-contrast b{display:block;margin-top:2px;font-size:15px}.p93-contrast button{min-height:40px;border:1px solid #d9d1bd;border-radius:10px;background:#fff;padding:8px 11px;font-weight:800;color:#665637;cursor:pointer}
.p93-articulation{padding:18px 0}.p93-articulation-grid{gap:10px}.p93-articulation-grid>div{padding:14px}.p93-articulation-grid span{font-size:11px}.p93-articulation-grid p{font-size:14px;line-height:1.62}
.p93-examples,.p93-record-inline{padding:18px 0}.p93-example{padding:12px 4px}.p93-example b{font-size:22px}.p93-example span{font-size:14px}.p93-example small{font-size:13px}.p93-example-audio{min-width:42px;min-height:42px}
.p93-record-inline p{font-size:14px}.p93-video-lesson{padding:16px;position:sticky;top:86px}.p93-video-label{margin-bottom:12px}.p93-video-label small{font-size:11px}.p93-video-ratio{border-radius:12px;box-shadow:0 7px 22px rgba(0,0,0,.10)}.p93-video-copy{padding:14px 2px 2px}.p93-video-copy b{display:block;font-size:16px}.p93-video-copy p{font-size:13px;line-height:1.6;color:#687a76}.p93-video-copy a{font-size:13px;font-weight:850;color:#0f7c70}
.p93-neutral-note{margin-top:8px;padding:8px;border-radius:9px;background:#f5f4ef;color:#7b756a;font-size:12px;font-weight:750}
.p93-tone-visual small{font-size:13px}.p93-tone-note span{font-size:13px}
.p93-record-target>p,.p93-recorder-state,.p93-selfcheck b{font-size:13px}.p93-check-grid article>strong{font-size:15px}.p93-check-grid article button{font-size:13px}
@media(max-width:1080px){.p93-lesson-card{grid-template-columns:1fr}.p93-video-lesson{position:static;max-width:720px}.p93-studio{grid-template-columns:185px minmax(0,1fr)}}
@media(max-width:760px){.p93-shell{padding:10px 12px 32px;font-size:14px}.p93-hero p,.p93-panel-head p{font-size:14px}.p93-panel-head h2{font-size:24px}.p93-chart{font-size:12px}.p93-chart th,.p93-chart td{height:44px}.p93-contrast{align-items:stretch;flex-direction:column}.p93-contrast button{width:100%}.p93-phoneme strong{font-size:58px}.p93-video-copy b{font-size:15px}}
/* v6.15.100 — Pinyin Gold Audio Lab. */
.p93-shell{--p93-ink:#193a35;--p93-muted:#687b76;--p93-line:#dfe8e5;--p93-soft:#f7faf8;--p93-accent:#23695d;--p93-cream:#fbf8f1;max-width:1480px;margin:0 auto}
.p93-hero{background:linear-gradient(130deg,#fbfdfb 0%,#f7fbf9 58%,#fbf8f1 100%);border-color:#dfe8e5;box-shadow:0 10px 30px rgba(30,68,61,.055)}
.p93-hero h1{font-weight:850;letter-spacing:-.045em}.p93-hero p{max-width:900px;color:#617570}
.p93-nav{background:rgba(255,255,255,.94);border:1px solid #e1e8e6;border-radius:16px;box-shadow:0 6px 22px rgba(25,58,53,.045);overflow:hidden}
.p93-nav button{min-height:54px;background:transparent}.p93-nav button.active{background:#eef7f4;color:#174e46;box-shadow:inset 0 -3px 0 #2f7569}
.p93-panel{background:transparent}.p93-panel-head h2{color:var(--p93-ink);font-weight:850;letter-spacing:-.025em}
.p93-chart-scroll{border-radius:16px;box-shadow:0 7px 24px rgba(28,64,57,.04)}
.p93-chart thead th{background:#f8faf9}.p93-chart-group th{background:#f4f6f4!important}.p93-syllable:hover,.p93-syllable:focus-visible{background:#eff8f5;box-shadow:inset 0 0 0 1px #8bc0b5}
.p93-audio-banner{border:1px solid #dfe9e6;background:#fbfdfc;border-radius:14px;padding:12px 14px}.p93-audio-banner strong{font-weight:800}.p93-audio-banner small{color:#71837f}
.p93-studio{grid-template-columns:205px minmax(0,1fr);gap:18px}.p93-studio-nav{border-radius:16px;background:#fafcfb;border-color:#e1e8e6;box-shadow:none}.p93-group-tabs button{min-height:46px;border-radius:10px}.p93-group-tabs button.active{box-shadow:none;border:1px solid #dfe8e5;background:#fff}
.p93-sound-strip{padding:2px 0 8px}.p93-sound-strip button{border-radius:10px;box-shadow:none}.p93-sound-strip button.active{background:#245f55;border-color:#245f55}
.p93-lesson-card{grid-template-columns:minmax(0,1.45fr) minmax(330px,.55fr);gap:18px;align-items:start}.p93-lesson-main,.p93-video-lesson{border-color:#e0e8e6;box-shadow:0 8px 26px rgba(27,61,55,.04)}
.p93-lesson-main{padding:0;overflow:hidden}.p93-phoneme{margin:0;border-radius:0;padding:24px 26px;background:linear-gradient(120deg,#f5faf8,#fbfcfa);border-bottom:1px solid #e7eeeb}.p93-phoneme.final{background:linear-gradient(120deg,#f8f6fb,#fbfbfb)}
.p93-phoneme strong{font-size:4.4rem}.p93-phoneme span{font-size:1.6rem}.p93-phoneme em{font-size:1rem}
.p93-listen-card,.p93-articulation,.p93-examples,.p93-record-inline{padding:22px 26px}.p93-listen-card{border-top:0}.p93-listen-card h3{font-size:1.18rem;color:var(--p93-ink)}.p93-listen-card>p,.p93-articulation-grid p,.p93-record-inline p{font-size:.9rem;color:#60746f}
.p93-listen-mode{max-width:620px}.p93-listen-mode button{min-height:54px}.p93-listen-mode button small{font-size:.69rem}
.p93-primary-listen{max-width:620px;border-radius:13px;padding:14px 16px;background:#eff8f5;border-color:#bedbd4}.p93-primary-listen>span{width:42px;height:42px}.p93-primary-listen b{font-size:1rem}.p93-primary-listen small{font-size:.76rem}
.p93-contrast{margin-top:12px;border-radius:12px;background:#faf8f3;border:1px solid #ece3d3;padding:12px 14px}
.p93-articulation{background:#fcfdfc}.p93-articulation-grid{gap:10px}.p93-articulation-grid>div{padding:14px;background:#fff}.p93-articulation-grid .warning{background:#fffaf0;border-color:#eadcbf}
.p93-example{padding:12px 0}.p93-example-audio{min-width:42px;min-height:38px}.p93-example-audio.is-playing{background:#e8f6f2;border-color:#75b4a7}
.p93-video-lesson{padding:18px;top:90px;background:#fbfcfb}.p93-video-label{padding-bottom:10px;border-bottom:1px solid #e7ecea}.p93-video-launch{display:block}.p93-video-thumb{position:relative;background-color:#1b423b!important;box-shadow:0 8px 22px rgba(14,45,39,.12)}.p93-video-thumb:before{display:none}.p93-video-thumb span{transition:transform .15s ease}.p93-video-launch:hover .p93-video-thumb span{transform:scale(1.05)}.p93-video-launch>div:last-child{padding:13px 2px 4px}.p93-video-launch b{font-size:1rem}.p93-video-launch p{font-size:.82rem}.p93-video-launch small{font-size:.74rem}.p93-video-external{display:inline-block;margin-top:9px;font-size:.78rem;font-weight:850;color:#176e62;text-decoration:none}
.p93-video-modal[hidden]{display:none!important}.p93-video-modal{position:fixed;inset:0;z-index:999999;background:rgba(9,24,21,.72);backdrop-filter:blur(5px);display:grid;place-items:center;padding:22px}.p93-video-modal-card{width:min(1000px,94vw);max-height:92vh;overflow:auto;background:#fff;border-radius:20px;padding:18px;box-shadow:0 28px 80px rgba(0,0,0,.3)}.p93-video-modal-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:2px 2px 14px}.p93-video-modal-head>div{display:grid;gap:3px}.p93-video-modal-head small{font-size:.7rem;font-weight:900;letter-spacing:.08em;color:#78908a}.p93-video-modal-head b{font-size:1.08rem;color:#193a35}.p93-video-modal-head button{width:40px;height:40px;border-radius:50%;border:1px solid #dbe5e2;background:#fff;font-size:1.35rem;color:#345d56;cursor:pointer}.p93-video-modal-card>.p93-video-ratio{border-radius:14px}.p93-video-modal-card>p{margin:12px 3px 2px;color:#6b7b78;font-size:.8rem;line-height:1.55}.p93-video-open{overflow:hidden}
.p93-chart-foot{padding:0 3px}.p93-chart-foot span:last-child{font-weight:750;color:#5d746f}
@media(max-width:1080px){.p93-lesson-card{grid-template-columns:1fr}.p93-video-lesson{position:static;max-width:none}.p93-studio{grid-template-columns:185px minmax(0,1fr)}}
@media(max-width:760px){.p93-studio{grid-template-columns:1fr}.p93-lesson-main{border-radius:16px}.p93-phoneme{padding:20px}.p93-listen-card,.p93-articulation,.p93-examples,.p93-record-inline{padding:18px 20px}.p93-listen-mode{grid-template-columns:1fr}.p93-listen-mode button{display:flex;align-items:center;justify-content:space-between;text-align:left;min-height:46px}.p93-video-modal{padding:10px}.p93-video-modal-card{width:100%;border-radius:16px;padding:12px}.p93-video-modal-head{padding:4px 2px 10px}.p93-chart-foot{display:block}.p93-chart-foot span{display:block;margin-top:5px}}
/* v6.15.100 — Gold Audio test set */
.p93-gold-lab{margin:16px 0 20px;padding:18px;border:1px solid #d6e6e2;border-radius:20px;background:linear-gradient(145deg,#fbfffd,#f3faf7)}
.p93-gold-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.p93-gold-head span{display:block;font-size:12px;font-weight:900;letter-spacing:.1em;color:#28786c}
.p93-gold-head h3{margin:5px 0 5px;font-size:20px;color:#153e38}
.p93-gold-head p{margin:0;max-width:920px;color:#657874;line-height:1.55}
.p93-gold-status{margin:14px 0 12px;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid #dce9e5;font-weight:800;color:#526c67}
.p93-gold-status[data-mode="ready"]{background:#effaf5;color:#176c58;border-color:#bfe4d7}
.p93-gold-status[data-mode="error"]{background:#fff7f2;color:#9b5139;border-color:#efcfbf}
.p93-gold-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.p93-gold-grid button{min-height:116px;text-align:left;border:1px solid #dce8e5;border-radius:15px;background:#fff;padding:13px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:.18s ease}
.p93-gold-grid button:hover{transform:translateY(-1px);border-color:#9ccfc2;box-shadow:0 7px 18px rgba(17,81,69,.08)}
.p93-gold-grid button.is-playing{border-color:#28786c;background:#effaf6;box-shadow:0 0 0 2px rgba(40,120,108,.08)}
.p93-gold-grid b{font-size:18px;color:#153e38}.p93-gold-grid span{font-weight:900;color:#2f6f65}.p93-gold-grid small{color:#6e7e7a;line-height:1.35}.p93-gold-grid em{margin-top:auto;font-style:normal;font-weight:800;color:#28786c;font-size:12px}
@media(max-width:900px){.p93-gold-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.p93-gold-head{flex-direction:column}.p93-gold-head .btn{width:100%}}
@media(max-width:520px){.p93-gold-grid{grid-template-columns:1fr}.p93-gold-lab{padding:14px}.p93-gold-grid button{min-height:104px}}
/* v6.15.104 — Pinyin P2 Local Tone Core */
.p93-group-practice{margin:0 0 14px;border:1px solid #d7e6e2;border-radius:18px;background:linear-gradient(145deg,#fbfffd,#f5faf8);padding:16px}
.p93-group-practice-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.p93-group-practice-head>div>span{display:block;font-size:11px;font-weight:950;letter-spacing:.11em;color:#2f796e}
.p93-group-practice-head h3{margin:4px 0 5px;font-size:20px;color:#153e38}
.p93-group-practice-head p{margin:0;max-width:820px;font-size:13px;line-height:1.55;color:#60746f}
.p93-group-practice-head>small{white-space:nowrap;border:1px solid #d7e6e2;border-radius:999px;background:#fff;padding:7px 10px;font-size:10px;font-weight:900;color:#5f7771}
.p93-group-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}
.p93-group-listen{border:1px solid #acd4ca;border-radius:14px;background:#eef9f6;padding:11px 13px;text-align:left;cursor:pointer;color:#184f47}
.p93-group-listen.secondary{background:#fff;border-color:#dbe6e3}
.p93-group-listen.is-playing{box-shadow:0 0 0 2px rgba(31,105,92,.12);border-color:#1f695c}
.p93-group-listen b{display:block;font-size:14px}.p93-group-listen span{display:block;margin-top:2px;font-size:11px;color:#67807a}
.p93-group-mini{margin-top:12px;padding-top:12px;border-top:1px solid #e3ece9}
.p93-group-mini-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.p93-group-mini-title b{font-size:11px;letter-spacing:.08em;color:#5e7771}.p93-group-mini-title span{font-size:11px;color:#8a9995}
.p93-group-mini article{padding:9px 0;border-top:1px dashed #e3ebe9}.p93-group-mini article:first-of-type{border-top:0}
.p93-group-mini article>strong{display:block;font-size:13px;color:#244b45;margin-bottom:7px}
.p93-group-mini article>div{display:flex;flex-wrap:wrap;gap:6px}
.p93-group-mini article button{min-width:42px;border:1px solid #d8e4e1;border-radius:10px;background:#fff;padding:7px 10px;font-weight:900;color:#315a53;cursor:pointer}
.p93-group-mini article button.correct{background:#edf9f4;border-color:#8fd1bd;color:#176c58}.p93-group-mini article button.wrong{background:#fff2ee;border-color:#e5a993;color:#9b5139}
.p93-group-mini article p{min-height:18px;margin:7px 0 0;font-size:11px;line-height:1.45;color:#697b77}.p93-group-mini article p strong{color:#205f54}
.p93-gold-lab>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer}.p93-gold-lab>summary::-webkit-details-marker{display:none}
.p93-gold-lab>summary div span{display:block;font-size:11px;font-weight:950;letter-spacing:.1em;color:#28786c}.p93-gold-lab>summary div b{display:block;margin-top:3px;color:#244b45}
.p93-gold-lab>summary em{font-style:normal;font-size:12px;font-weight:850;color:#52736c}.p93-gold-body{padding-top:14px}
@media(max-width:760px){.p93-group-practice-head{display:block}.p93-group-practice-head>small{display:inline-block;margin-top:9px}.p93-group-actions{grid-template-columns:1fr}.p93-group-mini-title{display:block}.p93-group-mini-title span{display:block;margin-top:2px}.p93-gold-lab>summary{align-items:flex-start}.p93-gold-lab>summary em{white-space:nowrap}}
/* v6.15.104 — local tone core */
.p93-tone-local-pack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}.p93-tone-local-pack .p93-audio{min-height:54px}.p93-tone-reference{cursor:default!important}.p93-tone-local-listen{grid-column:1/-1}@media(max-width:720px){.p93-tone-local-pack{grid-template-columns:1fr}}
/* v6.15.105 — Pinyin Ready Flow */
.p93-section-checkpoint{margin:18px 0 6px;padding:16px 18px;border:1px solid #d8e6e2;border-radius:16px;background:#fbfdfc;display:flex;align-items:center;justify-content:space-between;gap:18px}
.p93-section-checkpoint>div{display:grid;gap:3px}.p93-section-checkpoint span{font-size:10px;font-weight:950;letter-spacing:.1em;color:#668079}.p93-section-checkpoint b{font-size:15px;color:#214b44}.p93-section-checkpoint small{font-size:12px;color:#73847f;line-height:1.45}.p93-section-checkpoint.done{background:#eff9f5;border-color:#b8ddcf}.p93-section-checkpoint .p93-checkpoint{white-space:nowrap}.p93-section-checkpoint .p93-checkpoint.done{background:#1e6b5c;color:#fff;border-color:#1e6b5c}
.p93-sandhi-lab{margin:18px 0;border:1px solid #dde7e4;border-radius:18px;background:linear-gradient(145deg,#fff,#f8fbfa);padding:18px}.p93-sandhi-head>span{font-size:11px;font-weight:950;letter-spacing:.1em;color:#2f796e}.p93-sandhi-head h3{margin:5px 0 5px;font-size:20px;color:#173f38}.p93-sandhi-head p{margin:0;color:#687b76;font-size:13px;line-height:1.55}.p93-sandhi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.p93-sandhi-grid article{border:1px solid #e1e9e6;border-radius:14px;background:#fff;padding:14px}.p93-sandhi-grid article>span{display:block;font-size:10px;font-weight:950;color:#78918b}.p93-sandhi-grid article>b{display:block;margin:3px 0 6px;color:#204f47}.p93-sandhi-grid article>p{margin:0;color:#687b76;font-size:12px;line-height:1.5}.p93-sandhi-grid article>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.p93-sandhi-grid em{font-style:normal;border-radius:999px;background:#f2f7f5;padding:5px 8px;font-size:12px;font-weight:800;color:#315f56}
.p93-viet-focus{margin:0 0 18px;padding:18px;border:1px solid #e4dfd3;border-radius:18px;background:linear-gradient(145deg,#fffdf8,#fbfaf6)}.p93-viet-focus-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.p93-viet-focus-head span{font-size:11px;font-weight:950;letter-spacing:.1em;color:#8c6a2e}.p93-viet-focus-head h3{margin:4px 0;font-size:20px;color:#463d2f}.p93-viet-focus-head p{margin:0;color:#786f62;font-size:13px}.p93-viet-focus-head>b{border:1px solid #e6ddca;border-radius:999px;background:#fff;padding:6px 9px;font-size:11px;color:#7b6949;white-space:nowrap}.p93-viet-focus-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}.p93-viet-focus-grid article{border:1px solid #e9e2d7;border-radius:13px;background:#fff;padding:13px}.p93-viet-focus-grid article>strong{color:#3f4f4a}.p93-viet-focus-grid article>p{margin:5px 0 10px;font-size:12px;line-height:1.45;color:#7c756a}.p93-viet-focus-grid article>div{display:flex;flex-wrap:wrap;gap:6px}.p93-viet-focus-grid .p93-audio{min-height:38px;border:1px solid #ded8ca;border-radius:10px;background:#fffaf1;padding:7px 9px;font-size:12px;font-weight:850;color:#695536;cursor:pointer}.p93-viet-focus-grid .p93-audio.is-playing{background:#f1f8f5;border-color:#8fc3b6;color:#1d6b5b}
.p93-ready-badge{align-self:flex-start;border:1px solid #d9e4e1;background:#f6f8f7;color:#71817d;border-radius:999px;padding:8px 11px;font-size:11px;font-weight:950;letter-spacing:.04em;white-space:nowrap}.p93-ready-badge.ready{background:#eaf8f2;border-color:#9fd2c0;color:#176b58}
@media(max-width:760px){.p93-section-checkpoint{display:block}.p93-section-checkpoint .p93-checkpoint{width:100%;margin-top:12px}.p93-sandhi-grid,.p93-viet-focus-grid{grid-template-columns:1fr}.p93-viet-focus-head{display:block}.p93-viet-focus-head>b{display:inline-block;margin-top:9px}.p93-ready-badge{margin-top:8px;display:inline-block}}
/* v6.15.107 — Pinyin Professional Redesign
Principles: one learning goal per screen, low cognitive load, clear hierarchy, no technical source labels in learner UI. */
body.p107-tone-open{overflow:hidden}
.p93-shell{--p107-green:#17675d;--p107-green-2:#0f8175;--p107-ink:#173b36;--p107-muted:#667a75;--p107-line:#e2eae7;--p107-soft:#f7faf9;--p107-warm:#fbfaf7;max-width:1380px;padding:14px 22px 46px;background:transparent}
.p93-hero{grid-template-columns:auto minmax(0,1fr) auto;gap:18px;padding:20px 22px;margin:4px 0 12px;border:1px solid var(--p107-line);border-radius:18px;background:#fff;box-shadow:0 5px 18px rgba(21,58,51,.045)}
.p93-hero>div>span{color:#6f827d}.p93-hero h1{font-size:clamp(1.55rem,2.4vw,2.05rem);margin:3px 0 5px;color:var(--p107-ink)}.p93-hero p{font-size:.9rem;max-width:760px;color:var(--p107-muted);line-height:1.55}.p93-back{border:1px solid var(--p107-line)!important;background:#fff!important;color:#355f57!important;border-radius:10px!important;padding:9px 11px!important}.p93-progress{width:auto!important;min-width:74px;height:auto!important;border-radius:12px!important;padding:10px 12px!important;background:#f3f8f6!important;border:1px solid #dce9e5!important}.p93-progress b{font-size:1.15rem!important}.p93-progress small{font-size:.63rem!important}
.p107-nav{grid-template-columns:repeat(5,minmax(0,1fr));position:sticky;top:8px;padding:5px;border-radius:14px;margin-bottom:20px;background:rgba(255,255,255,.96);box-shadow:0 5px 18px rgba(20,60,52,.055)}
.p107-nav button{min-height:46px!important;text-align:center!important;padding:7px 9px!important;border-radius:10px!important}.p107-nav button span{display:inline!important;margin-right:6px;font-size:.64rem!important}.p107-nav button b{display:inline!important;font-size:.8rem!important;margin:0!important}.p107-nav button.active{background:#edf7f4!important;color:#18594f!important;box-shadow:none!important}.p107-nav button.active span{color:#43877c!important}
.p107-panel-head{align-items:center;padding:2px 2px 0;margin-bottom:14px}.p107-panel-head h2{font-size:clamp(1.45rem,2.3vw,1.9rem);margin:3px 0 5px}.p107-panel-head p{font-size:.88rem;line-height:1.55;max-width:800px}.p107-count{display:grid;justify-items:end;min-width:95px}.p107-count b{font-size:1.4rem;color:#225d54}.p107-count span{font-size:.68rem;color:#7b8b87}
.p107-chart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 9px;padding:9px 11px;border:1px solid #e5ecea;border-radius:12px;background:#fafcfb}.p107-chart-hint{font-size:.7rem;color:#788985;white-space:nowrap}.p93-chart-key{gap:10px 14px}.p93-chart-key span{font-size:.7rem!important}.p93-chart-scroll{max-height:68vh;border-radius:14px;border-color:#e1e8e6;box-shadow:0 4px 16px rgba(26,63,56,.035)}.p93-chart{font-size:.76rem;min-width:1210px}.p93-chart th,.p93-chart td{height:42px}.p93-corner{min-width:112px}.p93-final-axis{width:112px}.p93-chart-group th{height:27px!important;background:#f6f8f7!important;color:#687c77!important}.p93-syllable:hover,.p93-syllable:focus-visible{background:#edf8f5;box-shadow:inset 0 0 0 1px #80bcaf}.p107-chart-foot{display:flex;justify-content:space-between;gap:12px;margin-top:8px;padding:0 2px;font-size:.72rem;color:#73847f}.p107-chart-foot b{color:#315f56;font-weight:750}
/* Learning studio */
.p93-studio{grid-template-columns:176px minmax(0,1fr);gap:14px}.p93-studio-nav{border:1px solid var(--p107-line);border-radius:14px;background:#fff;padding:6px;box-shadow:none}.p93-group-tabs{gap:2px}.p93-group-tabs button{min-height:42px;border-radius:9px;padding:8px 9px}.p93-group-tabs button.active{background:#eef7f4;box-shadow:none;color:#175b51}.p93-group-tabs button span{font-size:.6rem}.p93-group-tabs button b{font-size:.75rem}.p93-sound-strip{gap:6px;margin-bottom:10px}.p93-sound-strip button{min-width:44px;border-radius:10px;padding:8px 11px;font-size:.9rem;box-shadow:none}.p93-sound-strip button.active{background:#1b675c;border-color:#1b675c}
.p107-sound-card{overflow:hidden;border:1px solid var(--p107-line);border-radius:16px;background:#fff;box-shadow:0 5px 18px rgba(24,60,54,.035)}.p107-sound-hero{display:grid;grid-template-columns:180px minmax(0,1fr);gap:0;border-bottom:1px solid #edf1f0}.p107-symbol{display:grid;align-content:center;justify-items:center;padding:22px 16px;background:#f5f9f7;border-right:1px solid #e8efec}.p107-symbol small{font-size:.62rem;font-weight:900;letter-spacing:.1em;color:#78908a}.p107-symbol strong{font-size:3.8rem;line-height:1;margin:7px 0 2px;color:#173f39}.p107-symbol span{font-size:1.15rem;font-weight:900;color:#117b70}.p107-symbol em{font-style:normal;font-size:.78rem;color:#71817d}.p107-listen{padding:20px 22px}.p107-listen>span,.p107-section-title>span,.p107-info-grid span{font-size:.65rem;font-weight:950;letter-spacing:.09em;color:#718a84}.p107-listen h3{font-size:1.15rem;margin:4px 0 5px;color:#214a43}.p107-listen>p{margin:0 0 12px;font-size:.78rem;line-height:1.55;color:#6d7e7a}.p107-listen-btn{display:flex;align-items:center;gap:11px;width:100%;max-width:520px;min-height:52px;border:1px solid #b9d9d1;border-radius:12px;background:#f0f9f6;padding:9px 12px;text-align:left;color:#1b5d53;cursor:pointer}.p107-listen-btn>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1b675c;color:#fff}.p107-listen-btn b{display:block;font-size:.84rem}.p107-listen-btn small{font-size:.67rem;color:#6a7e79}.p107-contrast{display:flex;align-items:center;gap:10px;margin-top:9px;border:0;background:transparent;padding:4px 0;color:#566f69;cursor:pointer}.p107-contrast span{font-size:.6rem;font-weight:900;letter-spacing:.08em;color:#83928e}.p107-contrast b{font-size:.78rem}.p107-contrast small{font-size:.68rem;color:#0e8174;font-weight:850}.p107-info-grid{display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:0;border-bottom:1px solid #edf1f0}.p107-info-grid>div{padding:15px 17px;border-right:1px solid #edf1f0}.p107-info-grid>div:last-child{border-right:0}.p107-info-grid p{margin:5px 0 0;font-size:.76rem;line-height:1.5;color:#506661}.p107-warning{background:#fffbf2}.p107-warning span{color:#8b6a32!important}.p107-examples{padding:16px 18px}.p107-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.p107-section-title small{font-size:.68rem;color:#84918e}.p107-example{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:54px;border-top:1px solid #eff3f1}.p107-example:first-of-type{border-top:0}.p107-example>div{display:grid;grid-template-columns:auto auto;gap:0 8px;align-items:baseline}.p107-example b{font-size:1.05rem;color:#25473f}.p107-example span{font-size:.82rem;font-weight:850;color:#0f8073}.p107-example small{grid-column:2;font-size:.68rem;color:#7f8d89}.p107-example button{width:34px;height:34px;border:1px solid #dce7e3;border-radius:9px;background:#fff;cursor:pointer}.p107-sound-actions{display:flex;gap:8px;padding:13px 18px;border-top:1px solid #edf1f0;background:#fafcfb}.p107-action{display:flex;align-items:center;gap:9px;min-height:44px;border:1px solid #dce7e3;border-radius:10px;background:#fff;padding:8px 12px;text-align:left;color:#315a53;cursor:pointer}.p107-action.primary{background:#1d665b;border-color:#1d665b;color:#fff}.p107-action>span{font-size:1rem}.p107-action b{display:block;font-size:.76rem}.p107-action small{display:block;font-size:.62rem;opacity:.75}
/* Group review: keep it compact and remove technical source labels from learners */
.p93-group-practice{margin-top:10px;padding:14px;border-radius:14px;background:#fbfdfc;box-shadow:none}.p93-group-practice-head>small{display:none}.p93-group-practice-head h3{font-size:1rem}.p93-group-practice-head p{font-size:.75rem}.p93-group-actions{margin-top:10px}.p93-group-listen{border-radius:10px;min-height:48px}.p93-group-mini{margin-top:10px}.p93-section-checkpoint{border-radius:13px;background:#fafcfb;padding:13px 15px}.p93-section-checkpoint span{font-size:.6rem}.p93-section-checkpoint b{font-size:.85rem}.p93-section-checkpoint small{font-size:.7rem}
/* Tone modal */
.p107-tone-modal[hidden]{display:none!important}.p107-tone-modal{position:fixed;inset:0;z-index:10060;display:grid;place-items:center;padding:18px}.p107-tone-backdrop{position:absolute;inset:0;border:0;background:rgba(10,30,27,.48);backdrop-filter:blur(5px);cursor:default}.p107-tone-card{position:relative;width:min(680px,100%);max-height:min(760px,calc(100vh - 36px));overflow:auto;border:1px solid #dce6e3;border-radius:20px;background:#fff;box-shadow:0 30px 90px rgba(10,37,32,.25)}.p107-tone-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #edf1ef}.p107-tone-head span{display:block;font-size:.62rem;font-weight:950;letter-spacing:.12em;color:#77908a}.p107-tone-head strong{display:block;margin-top:2px;font-size:1.8rem;color:#173f38}.p107-icon-close{width:38px;height:38px;border:1px solid #dfe8e5;border-radius:10px;background:#f8faf9;color:#46655f;font-size:1.2rem;cursor:pointer}.p107-tone-intro{padding:18px 20px 10px}.p107-tone-intro h3{margin:0 0 5px;font-size:1.15rem;color:#214c44}.p107-tone-intro p{margin:0;font-size:.78rem;line-height:1.5;color:#6c7e79}.p107-tone-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 20px 18px}.p107-tone-grid article{min-width:0;padding:15px 10px;border:1px solid #dfe8e5;border-radius:12px;background:#fafcfb;text-align:center}.p107-tone-grid article>span{font-size:.6rem;font-weight:950;color:#78908a;letter-spacing:.07em}.p107-tone-grid b{display:block;margin:7px 0 4px;font-size:1.55rem;color:#184f47}.p107-tone-grid small{font-size:.67rem;color:#687c77}.p107-tone-note{display:flex;gap:10px;margin:0 20px 18px;padding:11px 12px;border-radius:11px;background:#f6f8f7;color:#657772}.p107-tone-note span{font-size:.9rem}.p107-tone-note p{margin:0;font-size:.72rem;line-height:1.5}.p107-tone-footer{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid #edf1ef;background:#fbfcfb}.p107-tone-footer button{min-height:40px;border-radius:10px;padding:8px 14px;font-weight:850;cursor:pointer}.p107-secondary{border:1px solid #dce6e3;background:#fff;color:#46645e}.p107-primary{border:1px solid #1d685d;background:#1d685d;color:#fff}
/* Tone learning screen */
.p107-tone-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.p107-tone-cards article{padding:18px 14px;border:1px solid #dfe7e5;border-radius:14px;background:#fff;text-align:center}.p107-tone-cards span{font-size:.62rem;font-weight:950;letter-spacing:.08em;color:#7b8d88}.p107-tone-cards strong{display:block;margin:7px 0 2px;font-size:2.2rem;color:#184b43}.p107-tone-cards b{display:block;font-size:.78rem;color:#177469}.p107-tone-cards small{display:block;margin-top:3px;font-size:.72rem;color:#6e807b}.p107-tone-cards em{display:block;margin-top:8px;font-style:normal;font-size:.78rem;font-weight:800;color:#445e58}.p107-tone-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:12px 0}.p107-audio-card{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;min-height:58px;border:1px solid #dfe8e5;border-radius:12px;background:#fff;padding:10px 12px;text-align:left;color:#294f48;cursor:pointer}.p107-audio-card>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#edf7f4;color:#226b5f;font-size:.62rem;font-weight:950}.p107-audio-card b{display:block;font-size:.8rem}.p107-audio-card small{display:block;margin-top:2px;font-size:.67rem;color:#75847f}.p107-audio-card>em{font-style:normal;font-size:1rem;color:#187468}.p107-sandhi{margin:12px 0 16px;border:1px solid #dfe7e5;border-radius:14px;background:#fff}.p107-sandhi>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer}.p107-sandhi>summary::-webkit-details-marker{display:none}.p107-sandhi>summary span{display:block;font-size:.62rem;font-weight:950;letter-spacing:.09em;color:#778c86}.p107-sandhi>summary b{display:block;margin-top:2px;font-size:.82rem;color:#2c524b}.p107-sandhi>summary em{font-style:normal;font-size:.7rem;color:#6d7f7a}.p107-sandhi-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #edf1ef}.p107-sandhi-grid article{display:grid;grid-template-columns:30px 1fr;gap:8px;padding:14px;border-right:1px solid #edf1ef;border-bottom:1px solid #edf1ef}.p107-sandhi-grid article:nth-child(2n){border-right:0}.p107-sandhi-grid article>span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#f2f6f4;font-size:.6rem;font-weight:950;color:#73857f}.p107-sandhi-grid b{font-size:.78rem;color:#284e47}.p107-sandhi-grid p{margin:4px 0;font-size:.72rem;line-height:1.5;color:#687a75}.p107-sandhi-grid small{font-size:.68rem;color:#2d6f63}.p107-extra-audio{display:flex;gap:8px;padding:12px 14px}.p107-extra-audio button{border:1px solid #dce6e3;border-radius:10px;background:#f9fbfa;padding:9px 11px;color:#365c55;font-size:.72rem;font-weight:800;cursor:pointer}
/* Practice + check */
.p107-practice-card,.p107-mini-check{margin-bottom:16px;border:1px solid #dfe8e5;border-radius:15px;background:#fff;padding:16px}.p93-record-lab{margin:0;box-shadow:none;border:0}.p93-viet-focus{border-color:#e3e9e6;background:#fafcfb;border-radius:14px;padding:15px}.p93-viet-focus-head span{color:#6c827c}.p93-viet-focus-head h3{font-size:1rem;color:#294d46}.p93-viet-focus-head p{font-size:.74rem;color:#6d7c78}.p93-viet-focus-head>b{display:none}.p93-viet-focus-grid{gap:7px}.p93-viet-focus-grid article{border-color:#e5ebe8;border-radius:10px;padding:11px}.p93-viet-focus-grid article>p{font-size:.7rem}.p93-viet-focus-grid .p93-audio{background:#f7faf9;border-color:#dfe8e5;color:#3a5f58}.p93-check-grid{gap:8px}.p93-check-grid article{border-radius:12px!important;box-shadow:none!important}.p93-check-summary{border-radius:12px!important}.p107-footer{margin-top:18px!important;border-top:1px solid #e6ecea!important;background:transparent!important;padding:14px 2px!important}.p107-footer span{color:#778783!important}
@media(max-width:900px){.p107-nav{position:static}.p107-chart-toolbar{align-items:flex-start;flex-direction:column}.p107-chart-hint{white-space:normal}.p107-sound-hero{grid-template-columns:150px 1fr}.p107-info-grid{grid-template-columns:1fr 1fr}.p107-warning{grid-column:1/-1}.p107-tone-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.p93-shell{padding:8px 10px 30px}.p93-hero{grid-template-columns:1fr auto;padding:15px}.p93-hero .p93-back{grid-column:1/-1;width:max-content}.p93-hero p{font-size:.8rem}.p107-nav{display:flex;overflow-x:auto;gap:4px;padding:5px;scrollbar-width:none}.p107-nav::-webkit-scrollbar{display:none}.p107-nav button{flex:0 0 auto;min-width:116px}.p107-panel-head{display:flex!important;align-items:flex-start}.p107-count{min-width:auto}.p107-count b{font-size:1.1rem}.p107-count span{font-size:.58rem}.p93-studio{grid-template-columns:1fr}.p93-studio-nav{overflow-x:auto}.p93-group-tabs{display:flex;flex-direction:row;min-width:max-content}.p93-group-tabs button{white-space:nowrap}.p107-sound-hero{grid-template-columns:1fr}.p107-symbol{border-right:0;border-bottom:1px solid #e8efec;grid-template-columns:auto auto auto;gap:8px;justify-content:start;justify-items:start;align-items:baseline}.p107-symbol small{grid-column:1/-1}.p107-symbol strong{font-size:2.7rem}.p107-symbol span{font-size:1.05rem}.p107-listen{padding:16px}.p107-info-grid{grid-template-columns:1fr}.p107-info-grid>div{border-right:0;border-bottom:1px solid #edf1f0}.p107-info-grid>div:last-child{border-bottom:0}.p107-sound-actions{display:grid;grid-template-columns:1fr 1fr}.p107-action{min-width:0}.p107-tone-modal{padding:8px}.p107-tone-card{border-radius:16px;max-height:calc(100vh - 16px)}.p107-tone-grid{grid-template-columns:1fr 1fr;padding:8px 14px 14px}.p107-tone-head,.p107-tone-intro,.p107-tone-footer{padding-left:14px;padding-right:14px}.p107-tone-note{margin-left:14px;margin-right:14px}.p107-tone-footer{display:grid;grid-template-columns:1fr 1fr}.p107-tone-cards{grid-template-columns:1fr 1fr;gap:7px}.p107-tone-cards article{padding:14px 9px}.p107-tone-actions{grid-template-columns:1fr}.p107-sandhi-grid{grid-template-columns:1fr}.p107-sandhi-grid article{border-right:0}.p107-extra-audio{display:grid;grid-template-columns:1fr}.p93-record-lab{grid-template-columns:1fr!important}.p93-viet-focus-grid{grid-template-columns:1fr}.p93-check-grid{grid-template-columns:1fr!important}.p107-chart-foot{display:block}.p107-chart-foot b{display:block;margin-top:4px}}
/* v6.15.107 mobile overflow hardening: wide Pinyin content must scroll inside its own region, never widen the page */
.p93-shell{width:100%;min-width:0;box-sizing:border-box}
.p93-hero,.p107-nav,.p93-main,.p93-panel,.p93-panel-head,.p107-chart-toolbar,.p93-chart-scroll,.p107-chart-foot,.p93-studio,.p93-studio-nav,.p93-studio-work,.p93-sound-detail,.p93-footer{min-width:0;max-width:100%;box-sizing:border-box}
.p93-chart-scroll{width:100%}
@media(max-width:700px){
.p93-shell{width:100%;max-width:100%;overflow:visible}
.p93-hero{width:100%}
.p107-nav{width:100%;max-width:100%}
.p93-main,.p93-panel{width:100%;max-width:100%}
.p93-chart-scroll{overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
.p93-studio-nav{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden}
.p93-studio-work{width:100%;max-width:100%}
.p93-sound-detail,.p93-group-practice,.p93-section-checkpoint{width:100%;max-width:100%;box-sizing:border-box}
}
/* v6.15.107 learner-facing polish */
.p107-footer b{color:#315f56!important;font-weight:850}
.p107-footer span{color:#778783!important}
@media(max-width:700px){
.p107-tone-footer{grid-template-columns:1fr 1fr}
.p107-tone-footer button{width:100%}
}
/* Compact optional review before the final quiz */
.p107-viet-details{margin:14px 0;border:1px solid #e1e9e6;border-radius:14px;background:#fff;overflow:hidden}
.p107-viet-details>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;cursor:pointer}
.p107-viet-details>summary::-webkit-details-marker{display:none}
.p107-viet-details>summary span{display:block;font-size:.62rem;font-weight:950;letter-spacing:.09em;color:#718982}
.p107-viet-details>summary b{display:block;margin-top:3px;font-size:.9rem;color:#294f48}
.p107-viet-details>summary small{display:block;margin-top:3px;font-size:.7rem;color:#74847f}
.p107-viet-details>summary em{font-style:normal;font-size:.7rem;color:#6e817b;white-space:nowrap}
.p107-viet-details>.p93-viet-focus-grid{padding:0 14px 14px;border-top:1px solid #edf1ef}
@media(max-width:700px){.p107-viet-details>summary{align-items:flex-start}.p107-viet-details>summary em{margin-top:2px}.p107-viet-details>.p93-viet-focus-grid{padding:0 10px 10px}}
/* v6.15.108 — exact tone-syllable audio modal */
.p108-tone-card{width:min(760px,100%)}
.p108-tone-grid{gap:10px}
.p108-tone-cell{appearance:none;min-width:0;padding:16px 10px;border:1px solid #dce6e3;border-radius:14px;background:#fff;text-align:center;color:#214c44;cursor:pointer;transition:.16s ease;box-shadow:0 1px 0 rgba(18,63,55,.02)}
.p108-tone-cell:hover{border-color:#93c7bd;background:#f7fbfa;transform:translateY(-1px)}
.p108-tone-cell:focus-visible{outline:3px solid rgba(29,104,93,.18);outline-offset:2px}
.p108-tone-cell>span{display:block;font-size:.61rem;font-weight:950;letter-spacing:.08em;color:#78908a}
.p108-tone-cell>b{display:block;margin:7px 0 4px;font-size:1.7rem;color:#184f47}
.p108-tone-cell>small{display:block;min-height:18px;font-size:.68rem;color:#687c77}
.p108-tone-cell>em{display:inline-flex;align-items:center;justify-content:center;margin-top:11px;padding:6px 10px;border-radius:999px;background:#edf7f4;color:#1b7165;font-size:.68rem;font-weight:900;font-style:normal}
.p108-tone-cell.is-ready>em::after{content:' · sẵn sàng';font-weight:700}
.p108-tone-cell.is-playing{border-color:#1d685d;background:#edf8f5;box-shadow:0 0 0 3px rgba(29,104,93,.10)}
.p108-tone-cell.is-error{opacity:.62}
.p108-tone-cell.is-error>em{background:#f8eded;color:#9b4f4f}
.p108-tone-status{display:flex;align-items:center;gap:9px;margin:0 20px 18px;padding:11px 13px;border-radius:12px;background:#f5f8f7;color:#5f736e}
.p108-tone-status>span{width:8px;height:8px;border-radius:50%;background:#91aaa4;flex:0 0 auto}
.p108-tone-status>b{font-size:.72rem;font-weight:780;line-height:1.4}
.p108-tone-status[data-mode="loading"]>span{background:#d29b35;animation:p108pulse 1s infinite alternate}
.p108-tone-status[data-mode="playing"]>span{background:#177469;box-shadow:0 0 0 4px rgba(23,116,105,.10);animation:p108pulse .65s infinite alternate}
.p108-tone-status[data-mode="ready"]>span{background:#2b8a67}
.p108-tone-status[data-mode="error"]>span{background:#b95a5a}
@keyframes p108pulse{from{opacity:.45}to{opacity:1}}
.p108-tone-footer{display:grid;grid-template-columns:1fr auto auto;align-items:center}
.p108-tone-footer button{min-height:42px}
.p108-tone-all{border:1px solid #1d685d;background:#edf8f5;color:#175e55;text-align:left}
.p108-tone-all.is-playing{background:#dff2ed;box-shadow:inset 0 0 0 1px #5ea89c}
.p108-tone-stop{border:1px solid #dce6e3;background:#fff;color:#5c6f6a}
@media(max-width:700px){
.p108-tone-grid{grid-template-columns:1fr 1fr}
.p108-tone-cell{padding:14px 8px}
.p108-tone-status{margin-left:14px;margin-right:14px}
.p108-tone-footer{grid-template-columns:1fr 1fr}
.p108-tone-all{grid-column:1/-1;text-align:center}
.p108-tone-stop,.p108-tone-footer .p107-primary{width:100%}
}
/* v6.15.109 — no visual regression changes; audio stability update only. */