:root{--primary:#0d7f88;--primary2:#25a5a9;--navy:#16324f;--ink:#1d2a3a;--muted:#667285;--bg:#f4f8f8;--card:#fff;--line:#dce8e8;--good:#16865d;--bad:#cc4b5c;--gold:#f2ad3b;--sky:#e7f8f7;--shadow:0 18px 45px rgba(20,61,73,.12)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
button{font:inherit}.hidden{display:none!important}
.story-screen{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 15%,#34b5b5,#0f4b63 72%);display:grid;place-items:center;padding:24px;transition:.6s}
.story-screen.closed{opacity:0;transform:scale(1.03);pointer-events:none}.story-card{width:min(640px,100%);background:rgba(255,255,255,.97);padding:46px;border-radius:32px;text-align:center;box-shadow:0 30px 90px rgba(7,39,50,.38)}
.story-spark{font-size:58px}.story-card h1{font-size:clamp(38px,7vw,66px);margin:8px 0;color:var(--navy)}.story-card>p:not(.eyebrow){font-size:18px;color:var(--muted)}
.hero-name{font-size:28px;font-weight:900;letter-spacing:.24em;color:var(--primary);margin:24px}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.12em;color:var(--primary);margin:0 0 8px}.eyebrow.light{color:#bdf9f2}
.app{min-height:100vh;display:grid;grid-template-columns:265px 1fr}.sidebar{position:sticky;top:0;height:100vh;background:#fff;border-right:1px solid var(--line);padding:24px 18px;display:flex;flex-direction:column;z-index:20}
.brand{display:flex;gap:12px;align-items:center;margin-bottom:26px}.brand>span{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:linear-gradient(135deg,var(--primary),#3ab9b0);color:#fff;font-size:16px;font-weight:900}.brand strong,.brand small{display:block}.brand small{color:var(--muted)}
nav{display:grid;gap:6px}.nav{border:0;background:transparent;text-align:left;padding:12px 14px;border-radius:14px;color:var(--muted);font-weight:800;cursor:pointer}.nav.active,.nav:hover{background:#e9f7f6;color:var(--primary)}
.side-card{margin-top:auto;background:#eaf7f6;padding:16px;border-radius:18px}.side-card small{color:var(--muted)}.reset-btn{border:0;background:none;color:#8d969e;margin-top:14px;cursor:pointer}
.topbar{height:76px;padding:0 30px;display:flex;align-items:center;justify-content:flex-end;gap:12px;background:rgba(244,248,248,.9);backdrop-filter:blur(12px);position:sticky;top:0;z-index:10}.pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 14px}.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#f6bd60,#f28482);display:grid;place-items:center;color:#fff;font-weight:900}.icon-btn{border:0;background:#fff;border-radius:12px;width:42px;height:42px;cursor:pointer}.mobile{display:none}
.view{display:none;padding:22px 30px 60px;max-width:1320px;margin:auto}.view.active{display:block}.hero-card{display:grid;grid-template-columns:1fr 260px;gap:26px;padding:40px;border-radius:30px;background:linear-gradient(135deg,#0b7180,#174a6d);color:#fff;box-shadow:var(--shadow)}.hero-card h1{font-size:44px;margin:8px 0}.hero-card p{font-size:18px;max-width:690px}.mentor{text-align:center;align-self:center}.mentor-face{font-size:92px}.speech{background:#fff;color:var(--ink);padding:12px;border-radius:16px;margin-bottom:8px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{border:0;border-radius:14px;padding:13px 20px;font-weight:900;cursor:pointer;transition:.2s}.btn:hover{transform:translateY(-1px)}.btn.primary{background:var(--primary);color:#fff;box-shadow:0 8px 18px rgba(13,127,136,.24)}.hero-card .btn.primary{background:#fff;color:var(--primary)}.btn.secondary{background:#e7f5f4;color:var(--primary)}.hero-card .btn.secondary{background:rgba(255,255,255,.16);color:#fff}.btn.link{background:transparent;color:var(--muted)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.baseline-card{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;background:#fff;border:1px solid var(--line);border-left:6px solid var(--gold);border-radius:22px;padding:22px;margin-top:20px}.baseline-card h2{margin:0;color:var(--navy)}.baseline-card p{margin:4px 0;color:var(--muted)}.baseline-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:center}.baseline-metrics span{text-align:center;background:#f7faf9;border-radius:14px;padding:14px 8px;color:var(--muted);font-size:12px;font-weight:800}.baseline-metrics strong{display:block;color:var(--navy);font-size:24px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}.stats article{background:#fff;border:1px solid var(--line);padding:18px;border-radius:18px;display:flex;align-items:center;gap:12px}.stats article>span{font-size:28px}.stats small,.stats strong{display:block}.stats small{color:var(--muted)}.stats strong{font-size:22px}.section-head{display:flex;justify-content:space-between;align-items:end;margin:34px 0 18px;gap:20px}.section-head h1,.section-head h2{margin:0;color:var(--navy)}.section-head p{color:var(--muted);max-width:780px}.text-button{border:0;background:none;color:var(--primary);font-weight:900;cursor:pointer}
.preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.unit-card,.world-node,.daily-card,.report,.game-panel,.lesson-card,.certificate-card,.target-card,.method-card{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 8px 25px rgba(26,69,77,.05)}.unit-card{padding:20px;cursor:pointer;transition:.2s}.unit-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.unit-icon{font-size:38px}.unit-card h3{margin:8px 0}.unit-card p{color:var(--muted)}.status{display:inline-block;margin-top:10px;padding:6px 10px;border-radius:999px;background:#e8f7f0;color:var(--good);font-size:12px;font-weight:900}.status.locked{background:#f0f2f4;color:#929aa5}
.daily-card{margin-top:20px;padding:20px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}.daily-icon{font-size:48px}.daily-card h3{margin:0}.daily-card p{margin:4px 0;color:var(--muted)}
.world-map{display:grid;gap:16px}.world-node{display:grid;grid-template-columns:88px 1fr auto;align-items:center;padding:22px;gap:18px}.world-node button{align-self:center}.world-node.locked{opacity:.6}.skill-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.skill-chips span{background:#eef7f7;color:#2b6670;border-radius:999px;padding:4px 9px;font-size:11px;font-weight:800}
.lesson-shell{max-width:920px;margin:auto}.lesson-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin-bottom:18px}.back{border:0;background:none;color:var(--primary);font-weight:900;cursor:pointer}.progress{height:9px;background:#e2ebeb;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#49c2b5);width:0;transition:.3s}.lesson-card{padding:34px}.lesson-card h1{font-size:36px;color:var(--navy)}.empty-lesson{text-align:center;padding:30px}.empty-lesson>span{font-size:62px}.story-strip{display:flex;gap:14px;padding:16px;border-radius:16px;background:#fff4df;margin:20px 0}.story-strip span{font-size:36px}.concept-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.concept{border:2px solid var(--line);background:#fff;border-radius:16px;padding:16px;text-align:left;cursor:pointer}.concept.active{border-color:var(--primary);background:#edf9f8}.concept span,.concept strong,.concept small{display:block}.concept span{font-size:28px}.concept small{color:var(--muted)}.concept-demo{margin:18px 0;padding:22px;background:#f4f8f8;border-radius:18px;text-align:center}.model{font-size:clamp(22px,4vw,34px);font-weight:900;margin:18px 0;color:var(--navy)}.option-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.option-grid button{border:2px solid var(--line);background:#fff;padding:15px;border-radius:14px;font-weight:800;cursor:pointer}.option-grid button:hover{border-color:var(--primary)}.option-grid button.correct{border-color:var(--good);background:#eaf8f2}.option-grid button.wrong{border-color:var(--bad);background:#fff0f2}.feedback{min-height:26px;font-weight:800}.feedback.good{color:var(--good)}.feedback.bad{color:var(--bad)}.explain-box{background:#edf8f7;border-left:5px solid var(--primary);padding:18px;border-radius:14px;margin:16px 0}.lesson-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px}.celebration{text-align:center}.crystal{font-size:80px}.reward-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.reward-row div{padding:18px;background:#edf8f7;border-radius:16px}.reward-row strong,.reward-row small{display:block}
.audio-lab,.speaking-lab{background:linear-gradient(145deg,#f0fbfa,#eef5fb);border:1px solid #cde6e5;border-radius:22px;padding:24px;margin:20px 0}.audio-controls,.record-controls{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.listen-btn{background:var(--navy)!important;color:#fff!important}.audio-hint{color:var(--muted);font-size:14px}.recording-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--bad);margin-right:6px;animation:pulse 1s infinite}.timer{font-size:28px;font-weight:900;color:var(--navy)}@keyframes pulse{50%{opacity:.35}}.rubric-checks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}.rubric-checks label{display:flex;gap:8px;align-items:flex-start;background:#fff;padding:12px;border-radius:12px;border:1px solid var(--line)}audio{width:100%;margin-top:12px}
.target-card{padding:20px;border-left:6px solid var(--gold)}.target-card p{margin:5px 0;color:var(--muted)}.timeline{display:grid;gap:14px}.week-card{display:grid;grid-template-columns:90px 1fr 160px;gap:18px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:20px;align-items:start}.week-number{background:var(--navy);color:#fff;border-radius:16px;padding:14px;text-align:center;font-weight:900}.week-card h3{margin:0}.week-card p{margin:4px 0;color:var(--muted)}.week-sessions{display:grid;gap:5px;margin-top:10px}.week-sessions span{font-size:13px}.week-evidence{background:#edf8f7;border-radius:14px;padding:12px;font-size:13px}.method-card{padding:24px;margin-top:22px}.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.method-grid>div{background:#f5f9f9;border-radius:16px;padding:18px}.method-grid span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;font-weight:900;margin-bottom:10px}.method-grid p{color:var(--muted);margin-bottom:0}
.game-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.tab{border:1px solid var(--line);background:#fff;padding:11px 16px;border-radius:999px;font-weight:900;cursor:pointer}.tab.active{background:var(--primary);color:#fff}.game-panel{padding:28px;min-height:370px}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.memory-card{height:90px;border:0;border-radius:14px;background:var(--primary);color:#fff;font-weight:900;font-size:16px;cursor:pointer}.memory-card.flipped,.memory-card.matched{background:#fff;color:var(--ink);border:2px solid var(--primary)}
.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.badge{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;text-align:center}.badge .badge-icon{font-size:52px;filter:grayscale(1);opacity:.35}.badge.earned .badge-icon{filter:none;opacity:1}.badge p{color:var(--muted)}.certificate-card{margin-top:24px;padding:24px;display:flex;justify-content:space-between;align-items:center}.parent-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.report{padding:22px}.report.wide{grid-column:1/-1}.ring{width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--primary) 0deg,#e5eeee 0);display:grid;place-items:center;margin:18px auto;position:relative}.ring:after{content:"";position:absolute;width:112px;height:112px;background:#fff;border-radius:50%}.ring strong{z-index:1;font-size:28px}.metric-list>div{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}.mastery-row{display:grid;grid-template-columns:240px 1fr 70px;gap:14px;align-items:center;margin:12px 0}.mastery-row .progress{height:12px}.activity-log{display:grid;gap:8px}.activity-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.modal{position:fixed;inset:0;background:rgba(10,35,48,.58);display:grid;place-items:center;padding:20px;z-index:90}.modal-card{background:#fff;border-radius:24px;padding:30px;max-width:760px;width:100%;max-height:90vh;overflow:auto;position:relative}.modal-close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:28px;cursor:pointer}.toast{position:fixed;right:24px;bottom:24px;background:var(--navy);color:#fff;padding:14px 18px;border-radius:14px;opacity:0;transform:translateY(15px);transition:.25s;z-index:120}.toast.show{opacity:1;transform:none}
@media print{.sidebar,.topbar,.story-screen,.section-head button,.btn{display:none!important}.app{display:block}.view{display:none}.view.active{display:block;padding:0}.week-card{break-inside:avoid}.timeline{gap:8px}}
@media(max-width:930px){.app{grid-template-columns:1fr}.sidebar{position:fixed;left:-285px;transition:.25s;width:265px}.sidebar.open{left:0}.mobile{display:block}.topbar{padding:0 16px}.view{padding:18px 16px 50px}.hero-card{grid-template-columns:1fr}.mentor{display:none}.stats,.preview-grid,.badge-grid{grid-template-columns:repeat(2,1fr)}.world-node{grid-template-columns:60px 1fr}.world-node .btn{grid-column:1/-1}.parent-grid{grid-template-columns:1fr}.report.wide{grid-column:auto}.mastery-row{grid-template-columns:1fr}.daily-card{grid-template-columns:auto 1fr}.daily-card .btn{grid-column:1/-1}.option-grid{grid-template-columns:1fr}.baseline-card{grid-template-columns:1fr}.week-card{grid-template-columns:75px 1fr}.week-evidence{grid-column:2}.method-grid{grid-template-columns:1fr}}
@media(max-width:570px){.stats,.preview-grid,.badge-grid,.baseline-metrics{grid-template-columns:1fr}.hero-card{padding:26px}.hero-card h1{font-size:34px}.lesson-card{padding:22px}.concept-grid,.rubric-checks{grid-template-columns:1fr}.memory-grid{grid-template-columns:repeat(2,1fr)}.certificate-card{display:block}.certificate-card button{margin-top:14px;width:100%}.week-card{grid-template-columns:1fr}.week-number,.week-evidence{grid-column:auto;text-align:left}.section-head{align-items:flex-start;flex-direction:column}}