:root{--primary:#5b4ce6;--primary2:#7b69f2;--ink:#20213c;--muted:#6d7087;--bg:#f6f7fb;--card:#fff;--line:#e7e8f1;--good:#1c9b68;--bad:#d84b5b;--gold:#f2b632;--shadow:0 18px 45px rgba(41,37,101,.12)}*{box-sizing:border-box}body{margin:0;font-family:Nunito,system-ui,sans-serif;background:var(--bg);color:var(--ink)}button{font:inherit}.hidden{display:none!important}.story-screen{position:fixed;inset:0;z-index:100;background:radial-gradient(circle at 50% 20%,#846ff7,#392c8b 70%);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(620px,100%);background:rgba(255,255,255,.96);padding:44px;border-radius:32px;text-align:center;box-shadow:0 30px 90px rgba(10,6,45,.35)}.story-spark{font-size:52px}.story-card h1{font-size:clamp(38px,7vw,68px);margin:8px 0}.hero-name{font-size:28px;font-weight:900;letter-spacing:.25em;color:var(--primary);margin:24px}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.12em;color:var(--primary);margin:0 0 8px}.app{min-height:100vh;display:grid;grid-template-columns:260px 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:28px}.brand>span{display:grid;place-items:center;width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,var(--primary),#9889ff);color:#fff;font-size:24px;font-weight:900}.brand strong,.brand small{display:block}.brand small{color:var(--muted)}nav{display:grid;gap:7px}.nav{border:0;background:transparent;text-align:left;padding:13px 15px;border-radius:14px;color:var(--muted);font-weight:800;cursor:pointer}.nav.active,.nav:hover{background:#efedff;color:var(--primary)}.side-card{margin-top:auto;background:#f3f1ff;padding:16px;border-radius:18px}.side-card small{color:var(--muted)}.reset-btn{border:0;background:none;color:#999;margin-top:14px;cursor:pointer}.topbar{height:78px;padding:0 30px;display:flex;align-items:center;justify-content:flex-end;gap:12px;background:rgba(246,247,251,.86);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,#ffbe75,#f889ad);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,#5b4ce6,#8f79f7);color:white;box-shadow:var(--shadow)}.hero-card h1{font-size:44px;margin:8px 0}.hero-card p{font-size:18px;max-width:650px}.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;position:relative}.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}.btn.primary{background:var(--primary);color:#fff;box-shadow:0 8px 18px rgba(91,76,230,.25)}.hero-card .btn.primary{background:#fff;color:var(--primary)}.btn.secondary{background:#f0efff;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}.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}.section-head h1,.section-head h2{margin:0}.section-head p{color:var(--muted)}.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{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 8px 25px rgba(38,36,85,.05)}.unit-card{padding:20px;cursor:pointer;transition:.2s}.unit-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.unit-icon{font-size:36px}.unit-card h3{margin:8px 0}.status{display:inline-block;margin-top:10px;padding:6px 10px;border-radius:999px;background:#e9f8f1;color:var(--good);font-size:12px;font-weight:900}.status.locked{background:#f0f0f4;color:#9a9baa}.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}.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}.lesson-shell{max-width:900px;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:#e9e9f1;border-radius:999px;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#9b8cff);width:0;transition:.3s}.lesson-card{padding:34px}.lesson-card h1{font-size:36px}.story-strip{display:flex;gap:14px;padding:16px;border-radius:16px;background:#fff7e8;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:#f2f0ff}.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:#f7f7fc;border-radius:18px;text-align:center}.math{font-size:clamp(26px,5vw,42px);font-weight:900;margin:18px 0}.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:#f6f4ff;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:#f6f5ff;border-radius:16px}.reward-row strong,.reward-row small{display:block}.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:#5b4ce6;color:#fff;font-weight:900;font-size:18px;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,#ececf4 0);display:grid;place-items:center;margin:18px auto;position:relative}.ring:after{content:"";position:absolute;width:112px;height:112px;background:white;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(19,17,46,.55);display:grid;place-items:center;padding:20px;z-index:90}.modal-card{background:#fff;border-radius:24px;padding:30px;max-width:720px;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:#20213c;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(max-width:900px){.app{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;transition:.25s;width:260px}.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}}@media(max-width:560px){.stats,.preview-grid,.badge-grid{grid-template-columns:1fr}.hero-card{padding:26px}.hero-card h1{font-size:34px}.lesson-card{padding:22px}.concept-grid{grid-template-columns:1fr}.memory-grid{grid-template-columns:repeat(3,1fr)}.certificate-card{display:block}.certificate-card button{margin-top:14px;width:100%}}
