:root{--teal:#00B4A3;--teal2:#008F83;--navy:#12233F;--navy2:#203653;--text:#425B70;--muted:#687B8D;--bg:#F7F9FA;--line:#DDE7EC;--white:#fff;--mint:#EAF8F4;--sky:#EDF6FC;--butter:#FFF7DE;--rose:#FCEFF3}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:92px}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}.topbar{height:74px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:50;box-shadow:0 8px 25px #12233f20}.brand{display:flex;gap:12px;align-items:center}.logo{width:42px;height:42px;border-radius:12px;background:var(--teal);display:grid;place-items:center;font-weight:900}.brand b{display:block;font-size:17px}.brand span{font-size:12px;color:#c5d4df}.topbar nav{display:flex;gap:8px}.topbar nav a,.modebtn{padding:10px 14px;border:1px solid #ffffff25;border-radius:10px;font-size:13px}.today{background:var(--teal);border-color:var(--teal)!important}.modebtn{background:#fff;color:var(--navy);font-weight:800;cursor:pointer}.app{display:grid;grid-template-columns:280px minmax(0,1fr);max-width:1680px;margin:auto}.sidebar{height:calc(100vh - 74px);position:sticky;top:74px;background:#fff;border-right:1px solid var(--line);overflow:auto;padding:18px}.course{background:var(--navy);color:#fff;border-radius:14px;padding:16px;margin-bottom:16px}.course span,.course small{display:block;font-size:10px;letter-spacing:.12em;color:#aac0d1}.course b{display:block;margin:7px 0;font-size:15px}.level-title{font-size:10px;font-weight:900;letter-spacing:.12em;color:var(--muted);padding:12px 6px 7px}.days{display:grid;gap:4px}.days a{display:flex;align-items:center;gap:9px;padding:8px;border-radius:9px;font-size:12px}.days a b{width:27px;color:var(--muted)}.days a.active{background:var(--mint);color:var(--navy);font-weight:800}.days a.active b{color:var(--teal2)}main{min-width:0;padding:26px 30px 70px}.hero{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-radius:20px;padding:30px 34px;display:flex;justify-content:space-between;gap:25px;align-items:end;margin-bottom:22px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.14em;color:#7de0d5}.hero h1{font-size:38px;margin:8px 0 7px;letter-spacing:-.03em}.hero p{margin:0;color:#c5d4df}.progressbox{min-width:180px;background:#ffffff10;border:1px solid #ffffff18;border-radius:14px;padding:15px}.progressbox b,.progressbox span{display:block}.progressbox span{font-size:11px;color:#aac0d1;margin-top:3px}.bar{height:6px;background:#ffffff18;border-radius:20px;margin-top:12px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--teal);transition:.25s}.lesson-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:20px}.slotnav{position:sticky;top:94px;align-self:start;max-height:calc(100vh - 114px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px}.slotnav-head{font-size:10px;font-weight:900;letter-spacing:.13em;padding:10px;color:var(--muted)}.slotnav a{display:grid;grid-template-columns:25px 1fr 16px;gap:7px;align-items:center;padding:9px 7px;border-radius:8px;font-size:11px}.slotnav a:hover{background:var(--bg)}.slotnav a span{color:var(--muted)}.slotnav a b{font-weight:700}.check{display:none;color:var(--teal);font-style:normal}.slotnav a.done .check{display:block}.lesson{display:grid;gap:20px}.lesson-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 6px 20px #12233f08}.lesson-card.done{border-color:#8ddbd2}.cardhead{padding:20px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:start;background:#fff}.slotnum{font-size:10px;letter-spacing:.12em;font-weight:900;color:var(--teal2)}.cardhead h2{margin:5px 0 0;color:var(--navy);font-size:24px}.time{font-size:11px;font-weight:800;background:var(--mint);color:var(--teal2);padding:7px 10px;border-radius:20px}.content{padding:24px;line-height:1.65}.content h3{color:var(--navy);margin:22px 0 9px}.content h3:first-child{margin-top:0}.grid{display:grid;gap:12px}.grid.two{grid-template-columns:repeat(2,1fr)}.grid.three{grid-template-columns:repeat(3,1fr)}.card,.metric{border:1px solid var(--line);border-radius:13px;padding:15px}.metric b{display:block;color:var(--navy);font-size:25px}.metric span{font-size:12px}.say,.teacher,.rule,.success,.wrong,.worksheet,.dialogue{border-radius:13px;padding:16px 18px;margin:12px 0}.say{background:var(--sky);font-size:17px;color:var(--navy)}.teacher{background:var(--butter)}.teacher b{font-size:10px;letter-spacing:.12em;color:#7d6500}.rule{background:var(--navy);color:#fff}.success{background:var(--mint);color:#006b63}.wrong{background:var(--rose)}.worksheet{background:#fff;border:1px dashed #9fb1bd}.dialogue{background:#f7f9fa;border-left:4px solid var(--teal)}.dialogue p{margin:5px 0}.chips,.wordgrid{display:flex;flex-wrap:wrap;gap:7px}.chips span,.wordgrid span{background:#f3f6f8;border:1px solid var(--line);border-radius:20px;padding:7px 10px;font-size:12px}.wordgrid span{background:var(--mint)}.table{border:1px solid var(--line);border-radius:12px;overflow:hidden}.table div{display:grid;grid-template-columns:1fr 1fr;padding:10px 13px;border-bottom:1px solid var(--line)}.table div:last-child{border:0}.table span{text-align:right}.cardactions{display:flex;gap:8px;align-items:center;padding:14px 20px;background:#fbfcfd;border-top:1px solid var(--line)}.cardactions a,.cardactions button,.primary,.complete-day{border:1px solid var(--line);background:#fff;padding:9px 12px;border-radius:9px;font-weight:700;font-size:12px;cursor:pointer}.cardactions .donebtn{margin-right:auto}.lesson-card.done .donebtn{background:var(--mint);color:var(--teal2);border-color:#9ee1da}.primary,.complete-day{background:var(--teal)!important;color:#fff!important;border-color:var(--teal)!important}.notes{width:100%;min-height:180px;border:1px solid var(--line);border-radius:12px;padding:14px;font:inherit;margin:10px 0}.save-status{margin-left:10px;font-size:12px;color:var(--teal2)}.empty{background:#fff;border:1px solid var(--line);border-radius:18px;padding:50px;text-align:center}.linkbtn{display:inline-block;margin-top:12px}.class-overlay{display:none;position:fixed;inset:0;background:#f7f9fa;z-index:100;padding:55px max(6vw,25px) 95px;overflow:auto}.class-overlay.open{display:block}.closeclass{position:fixed;right:24px;top:18px;border:0;background:var(--navy);color:#fff;padding:10px 14px;border-radius:9px}.class-overlay .lesson-card{max-width:1050px;margin:auto}.classcontrols{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:center;gap:10px;padding:14px}.classcontrols button{padding:12px 18px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:800}.class-overlay .cardactions{display:none}
@media(max-width:1000px){.app{grid-template-columns:1fr}.sidebar{display:none}.lesson-layout{grid-template-columns:1fr}.slotnav{position:relative;top:0;display:flex;overflow:auto;max-height:none}.slotnav-head{display:none}.slotnav a{min-width:150px}.hero h1{font-size:30px}}
@media(max-width:650px){.topbar{padding:0 12px;height:66px}.brand span,.topbar nav a:not(.today){display:none}.app main{padding:14px 12px 60px}.hero{padding:22px;display:block}.progressbox{margin-top:18px}.hero h1{font-size:27px}.cardhead,.content{padding:18px}.grid.two,.grid.three{grid-template-columns:1fr}.cardactions{position:sticky;bottom:0}.cardactions a{font-size:0}.cardactions a::first-letter{font-size:12px}.table div{grid-template-columns:1.3fr .7fr}.class-overlay{padding:60px 12px 100px}}