/* Mandarin Learning Core 7 — per-screen rebuild. Isolated to #mcl-app. */
#mcl-app{--m7-green:#0d7958;--m7-dark:#183a30;--m7-ink:#213b32;--m7-muted:#70867b;--m7-line:#e1ebe5;--m7-bg:#f5f8f5;--m7-card:#fff;max-width:100%;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--m7-ink)}
#mcl-app *{box-sizing:border-box}
#mcl-app .mcl7-app{width:100%;background:var(--m7-bg);border-radius:24px;min-height:670px;overflow:clip;border:1px solid #e3ece4}
#mcl-app .mcl7-layout{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:700px}
#mcl-app .mcl7-sidebar{background:#f9fcfa;border-right:1px solid var(--m7-line);padding:26px 15px;display:flex;flex-direction:column;gap:12px}
#mcl-app .mcl7-logo{display:flex;align-items:center;gap:11px;padding:4px 9px 25px;border-bottom:1px solid var(--m7-line)}
#mcl-app .mcl7-logo>span{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:#0f7959;color:white;font-size:25px;font-weight:750}
#mcl-app .mcl7-logo strong,#mcl-app .mcl7-logo small{display:block;line-height:1.5}#mcl-app .mcl7-logo strong{font-size:14px;white-space:nowrap}#mcl-app .mcl7-logo small{font-size:9px;letter-spacing:1.7px;color:var(--m7-muted)}
#mcl-app .mcl7-nav-caption{margin:17px 10px 0;font-size:10px;letter-spacing:1.6px;font-weight:800;color:#8ca095}
#mcl-app .mcl7-side-nav{display:flex;flex-direction:column;gap:6px}
#mcl-app .mcl7-side-nav button{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:#54695e;border-radius:11px;padding:12px;text-align:left;font-size:13px;font-weight:700;width:100%;cursor:pointer}
#mcl-app .mcl7-side-nav button span{font-size:20px;min-width:24px;color:#6c8879}
#mcl-app .mcl7-side-nav button:hover{background:#edf6f0;color:#0b7857}#mcl-app .mcl7-side-nav button.is-active{background:#e0f2e8;color:#087651}
#mcl-app .mcl7-side-info{margin-top:auto;background:linear-gradient(150deg,#e2f4e9,#f6f9e9);padding:18px;border-radius:15px;display:grid;gap:8px}
#mcl-app .mcl7-side-info>span{font-size:10px;letter-spacing:1.1px;font-weight:800;color:#46886c}#mcl-app .mcl7-side-info strong{font-size:21px;color:#126846}#mcl-app .mcl7-side-info p{margin:0;font-size:12px;line-height:1.65;color:#62796c}#mcl-app .mcl7-side-info button{border:0;background:transparent;color:#077450;text-align:left;padding:5px 0;font-weight:750;cursor:pointer}
#mcl-app .mcl7-main{padding:29px 32px 20px;min-width:0}
#mcl-app .mcl7-header{display:flex;justify-content:space-between;gap:20px;align-items:center;padding-bottom:25px;margin-bottom:25px;border-bottom:1px solid var(--m7-line)}
#mcl-app .mcl7-breadcrumb{font-size:11px;color:#779085;font-weight:700;letter-spacing:.5px}#mcl-app .mcl7-breadcrumb span{margin:0 9px}
#mcl-app .mcl7-heading h1{font-size:clamp(24px,2.5vw,32px);line-height:1.2;font-weight:850;letter-spacing:-.8px;margin:8px 0 7px;color:var(--m7-dark)}#mcl-app .mcl7-heading h1 span{font-size:.7em;color:var(--m7-green);vertical-align:2px}
#mcl-app .mcl7-heading p{margin:0;font-size:13px;color:var(--m7-muted);line-height:1.65}#mcl-app .mcl7-head-actions{display:flex;align-items:center;gap:13px;flex-shrink:0}#mcl-app .mcl7-status{font-size:11px;font-weight:750;color:#13815b}
#mcl-app .mcl7-header-cta{background:#0c805b;color:white;border:0;border-radius:9px;padding:12px 16px;font-weight:750;cursor:pointer;white-space:nowrap}
#mcl-app .mcl7-screen{min-width:0}#mcl-app .mcl7-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--m7-line);padding-top:25px;margin-top:40px;font-size:12px;color:#7d9084}#mcl-app .mcl7-footer button{border:none;background:transparent;color:#0b7954;font-weight:700;cursor:pointer}
#mcl-app .mcl7-mobile-nav{display:none}#mcl-app .mcl7-eyebrow{font-size:11px;letter-spacing:1.3px;font-weight:850;color:#087954}
/* Home screen — distinct hero + continuation + learning shortcuts. */
#mcl-app .mcl7-screen-home .mcl-hero{background:linear-gradient(130deg,#dcf3e7 5%,#f5faf3 90%);border:1px solid #cdeadd;border-radius:23px;box-shadow:none}
#mcl-app .mcl7-screen-home .mcl-resume{background:#fff;border:1px solid var(--m7-line);border-radius:18px;box-shadow:0 7px 22px #103d2710}
#mcl-app .mcl7-screen-home .mcl-progress-strip{border-radius:18px;background:#e6f4eb}
#mcl-app .mcl7-screen-home .mcl-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Courses — visual trajectory + prominent level cards. */
#mcl-app .mcl7-course-lead{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(210px,.8fr);gap:16px;margin-bottom:32px}
#mcl-app .mcl7-course-lead>div:first-child{background:#e2f3e9;border:1px solid #cde7d7;padding:30px;border-radius:22px}
#mcl-app .mcl7-course-lead h2{font-size:clamp(26px,3vw,39px);line-height:1.2;letter-spacing:-1px;margin:11px 0}#mcl-app .mcl7-course-lead h2 em{font-style:normal;color:#078257}#mcl-app .mcl7-course-lead p{font-size:14px;line-height:1.75;color:#5e7669;max-width:540px}
#mcl-app .mcl7-course-aside{position:relative;overflow:hidden;background:#154d3d;border-radius:22px;padding:27px;color:#fff;min-height:228px}#mcl-app .mcl7-course-aside>span{font-size:12px;font-weight:700;color:#a9dfbd}#mcl-app .mcl7-course-aside>strong{display:block;font-size:clamp(45px,5vw,68px);line-height:1.1;margin:16px 0;font-weight:850}#mcl-app .mcl7-course-aside p{position:relative;z-index:1;color:#c2d9cb;font-size:12px;line-height:1.5}#mcl-app .mcl7-aside-decoration{position:absolute;right:-13px;bottom:-40px;font-size:180px;color:#ffffff15;pointer-events:none}
#mcl-app .mcl7-section-title{margin-bottom:15px}#mcl-app .mcl7-section-title h2{margin:8px 0;font-size:25px}#mcl-app .mcl7-section-title p{color:#718578;font-size:13px}
#mcl-app .mcl7-screen-courses .mcl-course-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}#mcl-app .mcl7-screen-courses .mcl-course{background:#fff;border:1px solid var(--m7-line);border-radius:17px;min-height:220px}
/* Library / classroom — built as distinct reading experiences. */
#mcl-app .mcl7-library{background:transparent;border:0;box-shadow:none;padding:0}#mcl-app .mcl7-library .mcl-section-head{background:#fff;border:1px solid var(--m7-line);padding:24px;border-radius:18px;margin-bottom:18px}
#mcl-app .mcl7-library .mcl-lesson-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}#mcl-app .mcl7-library .mcl-lesson-card{border:1px solid var(--m7-line);background:#fff;border-radius:15px;box-shadow:0 4px 13px #133b2810}
#mcl-app .mcl7-classroom .mcl-lesson-heading{background:#e9f6ef;border:1px solid #d2e9d9;border-radius:19px;padding:22px}
#mcl-app .mcl7-classroom .mcl-objectives{background:#fff;border:1px solid var(--m7-line);border-radius:15px;padding:20px;margin-top:15px}
#mcl-app .mcl7-classroom-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px;align-items:start}#mcl-app .mcl7-classroom .mcl-lesson-tabs{display:flex;flex-direction:column;position:sticky;top:20px;padding:10px;background:#fff;border:1px solid var(--m7-line);border-radius:15px;gap:5px}
#mcl-app .mcl7-classroom .mcl-lesson-tabs button{width:100%;text-align:left;border-radius:9px;padding:12px 13px;border:0;min-height:43px}#mcl-app .mcl7-classroom .mcl-lesson-tabs button.active{background:#e0f3e9;color:#0c7454}
#mcl-app .mcl7-classroom .mcl-lesson-study-main{min-width:0;background:#fff;border:1px solid var(--m7-line);padding:22px;border-radius:16px}#mcl-app .mcl7-classroom .mcl-lesson-content{border:0;box-shadow:none}
/* Dictionary — filter rail + result shelf. */
#mcl-app .mcl7-vocab-page{background:transparent;border:0;box-shadow:none;padding:0}
#mcl-app .mcl7-vocab-intro,#mcl-app .mcl-vocab-intro{background:#e4f4ea;padding:26px;border-radius:19px;border:1px solid #d1e8da}
#mcl-app .mcl7-vocab-page .mcl-filter-bar{margin:14px 0 15px;background:#fff;padding:14px;border:1px solid var(--m7-line);border-radius:14px}
#mcl-app .mcl7-vocab-page .mcl-levels{background:#fff;border:1px solid var(--m7-line);border-radius:14px;padding:12px;margin-bottom:16px}
#mcl-app .mcl7-vocab-workspace{display:grid;grid-template-columns:185px minmax(0,1fr);gap:17px;align-items:start}
#mcl-app .mcl7-vocab-filters{background:#fff;border:1px solid var(--m7-line);padding:19px 13px;border-radius:15px;position:sticky;top:20px}
#mcl-app .mcl7-vocab-filters>strong{display:block;font-size:14px}#mcl-app .mcl7-vocab-filters>p{font-size:12px;color:#85968b;line-height:1.5}
#mcl-app .mcl7-vocab-filters .mcl-status-filter{display:flex;flex-direction:column;align-items:stretch;gap:7px}#mcl-app .mcl7-vocab-filters .mcl-status-filter button{text-align:left;width:100%;margin:0}
#mcl-app .mcl7-vocab-results{min-width:0}#mcl-app .mcl7-vocab-results .mcl-list-heading{margin:0 0 15px}#mcl-app .mcl7-vocab-results .mcl-word-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
#mcl-app .mcl7-vocab-results .mcl-word{border:1px solid var(--m7-line);border-radius:15px;min-height:188px;background:white}
/* Vocabulary detail / flashcards / tests / progress. */
#mcl-app .mcl7-screen-word .mcl-word-detail{background:#fff;border-radius:20px}
#mcl-app .mcl7-flash-studio,#mcl-app .mcl7-quiz-studio{border:1px solid var(--m7-line);border-radius:20px;background:#fff;padding:24px}
#mcl-app .mcl7-practice-heading{text-align:center;margin-bottom:21px}#mcl-app .mcl7-practice-heading h2{font-size:27px;margin:8px 0}#mcl-app .mcl7-practice-heading p{color:var(--m7-muted);margin:0;font-size:13px}
#mcl-app .mcl7-flash-studio .mcl-flash{max-width:680px;width:100%;margin:18px auto;border:2px solid #cde7d8;background:linear-gradient(145deg,#f6fbf8,#e6f6ed);border-radius:22px;min-height:325px}
#mcl-app .mcl7-quiz-studio .mcl-quiz-list{grid-template-columns:repeat(2,minmax(0,1fr))}#mcl-app .mcl7-quiz-studio .mcl-question{border:1px solid var(--m7-line);border-radius:15px;background:#fdfefd}
#mcl-app .mcl7-progress-screen .mcl-progress-banner{background:linear-gradient(115deg,#dff3e7,#f4faf4);border-radius:20px;border:1px solid #d1e9d8}
#mcl-app .mcl7-progress-screen .mcl-panel{border-radius:18px}
#mcl-app :is(button,a,input,select,textarea):focus-visible{outline:3px solid #42b991;outline-offset:3px}
@media(max-width:1200px){#mcl-app .mcl7-layout{grid-template-columns:195px minmax(0,1fr)}#mcl-app .mcl7-main{padding:22px}#mcl-app .mcl7-vocab-results .mcl-word-grid{grid-template-columns:repeat(2,minmax(0,1fr))}#mcl-app .mcl7-screen-courses .mcl-course-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:870px){#mcl-app .mcl7-layout{display:block}#mcl-app .mcl7-sidebar{display:none}#mcl-app .mcl7-mobile-nav{display:grid;position:sticky;bottom:0;z-index:20;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--m7-line);background:#fff;padding:5px 3px}#mcl-app .mcl7-mobile-nav button{display:grid;justify-items:center;gap:3px;color:#637a6e;background:transparent;border:0;padding:8px 0;font-size:20px}#mcl-app .mcl7-mobile-nav button small{font-size:10px}#mcl-app .mcl7-mobile-nav button.is-active{color:#08734f;font-weight:800}#mcl-app .mcl7-classroom-layout{grid-template-columns:1fr}#mcl-app .mcl7-classroom .mcl-lesson-tabs{position:relative;top:auto;display:flex;flex-direction:row;overflow-x:auto}#mcl-app .mcl7-classroom .mcl-lesson-tabs button{width:auto;white-space:nowrap}#mcl-app .mcl7-vocab-workspace{grid-template-columns:1fr}#mcl-app .mcl7-vocab-filters{position:static}#mcl-app .mcl7-vocab-filters .mcl-status-filter{flex-direction:row;flex-wrap:wrap}}
@media(max-width:600px){#mcl-app .mcl7-app{border-radius:13px}#mcl-app .mcl7-main{padding:15px}#mcl-app .mcl7-header{gap:10px;align-items:flex-start}#mcl-app .mcl7-head-actions{display:none}#mcl-app .mcl7-course-lead{grid-template-columns:1fr}#mcl-app .mcl7-course-lead>div:first-child{padding:22px}#mcl-app .mcl7-course-aside{min-height:150px}#mcl-app .mcl7-course-aside>strong{font-size:42px}#mcl-app .mcl7-screen-courses .mcl-course-grid,#mcl-app .mcl7-library .mcl-lesson-grid,#mcl-app .mcl7-vocab-results .mcl-word-grid,#mcl-app .mcl7-screen-home .mcl-action-grid,#mcl-app .mcl7-quiz-studio .mcl-quiz-list{grid-template-columns:1fr}#mcl-app .mcl7-flash-studio,#mcl-app .mcl7-quiz-studio{padding:14px}#mcl-app .mcl7-footer{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){#mcl-app *,#mcl-app *:before,#mcl-app *:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
