@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap";:root{--bg:#f5f3ef;--surface:#fff;--text:#2d2a32;--muted:#7a7585;--pink:#fce8ec;--pink-active:#f9d0da;--ruby-blue:#4a9fd4;--ruby-blue-dark:#2d7eb5;--classroom-green:#2f8f68;--school-yellow:#f3c844;--paper:#fffdf4;--chalk:#26483c;--accent-purple:#7b65b8;--red:#e84b4b;--blue:#4a7fd4;--yellow:#e8b84b;--green:#4bc48b;--shadow:0 4px 24px #2d2a3214;--radius:20px;--radius-sm:12px;--nav-width:220px;--sidebar-width:300px;--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:Nunito,system-ui,sans-serif}button{cursor:pointer;border:none;font-family:inherit}input,select,textarea{font-family:inherit}.app-shell{grid-template-columns:var(--nav-width) 1fr var(--sidebar-width);grid-template-rows:auto 1fr;gap:0;min-height:100%;display:grid}.app-shell.focus-mode{grid-template-columns:var(--nav-width) 1fr}.app-header{background:var(--surface);box-shadow:var(--shadow);z-index:10;grid-column:1/-1;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-logo{background:linear-gradient(135deg,#a8d8f0,#6bb8e8);border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;font-size:24px;display:flex}.brand-title{color:var(--ruby-blue);letter-spacing:.02em;text-transform:uppercase;font-size:1.5rem;font-weight:800}.header-stats{align-items:center;gap:20px;display:flex}.stat-pill{align-items:center;gap:6px;font-size:1rem;font-weight:700;display:flex}.nav-sidebar{background:var(--surface);border-right:1px solid #0000000a;padding:16px 12px}.nav-item{border-radius:var(--radius-sm);width:100%;color:var(--text);background:0 0;align-items:center;gap:12px;margin-bottom:4px;padding:12px 16px;font-size:.95rem;font-weight:600;text-decoration:none;transition:background .15s;display:flex}.nav-item:hover{background:var(--pink)}.nav-item.active{background:var(--pink-active)}.nav-item.disabled,.mobile-nav a.disabled{opacity:.4;pointer-events:none;cursor:not-allowed}.banner-done{background:var(--pink);border-radius:var(--radius-sm);margin-bottom:16px;padding:12px 16px;font-weight:700}.play-section-title{margin:0 0 8px;font-size:1.35rem;font-weight:800}.play-section-desc{color:var(--muted);margin:0 0 20px;font-weight:600}.nav-icon{text-align:center;width:24px;font-size:1.2rem}.main-content{padding:24px;overflow-y:auto}.right-sidebar{background:var(--surface);border-left:1px solid #0000000a;padding:24px 20px;overflow-y:auto}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}.quiz-card h2{margin:0 0 24px;font-size:1.35rem;font-weight:800}.quiz-question{text-align:center;margin:0 0 28px;font-size:1.5rem;font-weight:700;line-height:1.4}.answer-grid{grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px;display:grid}.answer-btn{border-radius:var(--radius-sm);color:#fff;text-align:center;min-height:88px;padding:16px 20px;font-size:1rem;font-weight:700;transition:transform .1s,filter .15s,opacity .15s;box-shadow:0 4px #00000026}.answer-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #00000026}.answer-btn:disabled{cursor:default}.answer-btn.correct{filter:brightness(1.1);outline-offset:2px;outline:3px solid #fff}.answer-btn.wrong{opacity:.55}.answer-btn.dimmed{opacity:.4}.answer-red{background:var(--red)}.answer-blue{background:var(--blue)}.answer-yellow{background:var(--yellow);color:#3d3520}.answer-green{background:var(--green)}.timer-bar-wrap{align-items:center;gap:12px;display:flex}.timer-bar{background:#ece8f0;border-radius:999px;flex:1;height:10px;overflow:hidden}.timer-fill{background:linear-gradient(90deg, var(--accent-purple), #b49ae8);border-radius:999px;height:100%;transition:width .3s linear}.timer-num{color:var(--accent-purple);text-align:right;min-width:28px;font-weight:800}.profile-card{text-align:center;margin-bottom:24px}.profile-avatar{background:linear-gradient(135deg,#f9d0da,#e8b8c8);border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 12px;font-size:2.5rem;display:flex}.profile-name{margin:0;font-size:1.25rem;font-weight:800}.profile-title{color:var(--muted);margin:4px 0 12px;font-weight:600}.level-badge{background:var(--pink);color:var(--accent-purple);border-radius:999px;align-items:center;gap:6px;margin-bottom:16px;padding:6px 14px;font-weight:700;display:inline-flex}.stats-row{border-top:1px solid #eee;justify-content:space-around;gap:8px;padding-top:16px;display:flex}.stat-block{text-align:center}.stat-value{font-size:1rem;font-weight:800;display:block}.stat-label{color:var(--muted);font-size:.75rem;font-weight:600}.page-title{margin:0 0 20px;font-size:1.5rem;font-weight:800}.category-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;display:grid}.category-chip{border-radius:var(--radius-sm);background:var(--surface);box-shadow:var(--shadow);text-align:center;cursor:pointer;border:2px solid #0000;padding:16px;font-weight:700;transition:border-color .15s}.category-chip:hover,.category-chip.selected{border-color:var(--ruby-blue)}.form-group{margin-bottom:16px}.form-group label{margin-bottom:6px;font-size:.9rem;font-weight:700;display:block}.form-group input,.form-group select,.form-group textarea{border-radius:var(--radius-sm);border:2px solid #e8e4ec;width:100%;padding:12px 14px;font-size:1rem}.form-group textarea{resize:vertical;min-height:80px}.btn-primary{background:var(--ruby-blue);color:#fff;border-radius:var(--radius-sm);box-shadow:0 4px 0 var(--ruby-blue-dark);justify-content:center;align-items:center;padding:14px 28px;font-size:1rem;font-weight:800;text-decoration:none;display:inline-flex}.btn-primary:active{box-shadow:0 2px 0 var(--ruby-blue-dark);transform:translateY(2px)}.btn-secondary{background:var(--pink);color:var(--text);border-radius:var(--radius-sm);justify-content:center;align-items:center;padding:12px 20px;font-weight:700;text-decoration:none;display:inline-flex}.btn-primary:disabled,.btn-secondary:disabled{opacity:.45;cursor:not-allowed;transform:none}.feedback-overlay{text-align:center;padding:20px 0}.feedback-points{color:var(--accent-purple);font-size:2rem;font-weight:800}.feedback-msg{margin:8px 0 16px;font-size:1.2rem;font-weight:700}.leaderboard-row{background:var(--surface);border-radius:var(--radius-sm);box-shadow:var(--shadow);align-items:center;gap:12px;margin-bottom:8px;padding:14px;display:flex}.leaderboard-rank{color:var(--accent-purple);width:32px;font-weight:800}.eyebrow{color:var(--classroom-green);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;font-size:.8rem;font-weight:800;display:inline-block}.page-intro{max-width:760px;margin-bottom:24px}.page-intro p,.hub-copy p,.lesson-hero p,.lesson-paper p,.lesson-quiz-link p{color:var(--muted);font-weight:600;line-height:1.55}.home-hub{gap:28px;display:grid}.hub-hero{border-radius:var(--radius);background:linear-gradient(135deg,#f3c844eb,#4a9fd4c7),repeating-linear-gradient(90deg,#ffffff2e 0 18px,#0000 18px 36px);border:4px solid #2d2a32;grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);align-items:stretch;gap:24px;padding:34px;display:grid;overflow:hidden;box-shadow:8px 8px #2d2a32}.hub-copy h1{color:#172f2a;text-transform:uppercase;margin:0 0 16px;font-size:clamp(2.4rem,5vw,4.4rem);line-height:.95}.hub-copy p{color:#23352f;max-width:620px;font-size:1.1rem}.hub-actions{flex-wrap:wrap;gap:12px;margin-top:24px;display:flex}.hub-board{background:var(--chalk);color:#f8ffe9;border:8px solid #d9a64f;border-radius:8px;flex-direction:column;justify-content:center;align-self:stretch;min-height:260px;padding:28px;display:flex;position:relative}.hub-board p{color:#d4ead5;text-transform:uppercase;margin:0 0 10px;font-weight:800}.hub-board strong{font-size:2rem;line-height:1.1}.hub-board span{color:#ffeeb0;margin-top:12px;font-weight:800}.board-bell{font-size:2rem;position:absolute;top:18px;right:20px}.hub-status{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.hub-status div{background:var(--paper);border-radius:var(--radius-sm);box-shadow:var(--shadow);border:2px solid #2d2a321a;padding:18px}.hub-status strong{margin-top:4px;font-size:1.3rem;display:block}.section-heading{margin-bottom:16px}.section-heading h2{margin:0;font-size:1.6rem}.lesson-grade,.lesson-topic,.lesson-step{color:var(--classroom-green);text-transform:uppercase;font-size:.82rem;font-weight:800}.lesson-topic{color:var(--ruby-blue-dark);align-self:end}.active-course-card{background:var(--paper);border:3px solid var(--classroom-green);border-radius:var(--radius-sm);color:var(--text);max-width:720px;padding:24px;text-decoration:none;display:block;box-shadow:5px 5px #2d2a3224}.active-course-card h3{margin:6px 0 8px;font-size:1.6rem;line-height:1.15}.active-course-card p{color:var(--muted);font-weight:700;line-height:1.5}.active-course-card strong{color:var(--classroom-green)}.classroom-map,.course-reader{gap:24px;display:grid}.classroom-board,.course-header{border-radius:var(--radius);color:#f8ffe9;background:linear-gradient(135deg,#26483cf7,#2f8f68f0),repeating-linear-gradient(0deg,#ffffff0a 0 2px,#0000 2px 34px);border:8px solid #d9a64f;justify-content:space-between;align-items:center;gap:24px;padding:28px;display:flex}.classroom-board .eyebrow,.course-header .eyebrow{color:#ffeeb0}.classroom-board h1,.course-header h1{margin:0 0 12px;font-size:clamp(2rem,4vw,3.2rem);line-height:1}.classroom-board p,.course-header p{color:#d4ead5;margin:0;font-weight:800;line-height:1.5}.board-question,.course-question{border-radius:var(--radius-sm);background:#ffffff1a;border:2px solid #ffffff2e;max-width:360px;padding:18px}.board-question span,.course-question span{color:#ffeeb0;text-transform:uppercase;margin-bottom:8px;font-size:.8rem;font-weight:800;display:block}.board-question strong,.course-question strong{font-size:1.2rem;line-height:1.3;display:block}.classroom-layout{grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:20px;display:grid}.reader-layout{grid-template-columns:220px minmax(0,1fr) 300px;align-items:start;gap:20px;display:grid}.unit-path,.classroom-notebook,.lesson-reader,.reader-notebook,.classroom-next,.checkpoint-panel,.checkpoint-lock,.progress-panel{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}.unit-stop{background:var(--paper);border-radius:var(--radius-sm);color:var(--text);border:2px solid #2d2a321a;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;margin-top:12px;padding:16px;text-decoration:none;display:grid}.unit-stop.current{border-color:var(--school-yellow);box-shadow:inset 0 0 0 2px #f3c84459}.unit-stop.complete{border-color:var(--classroom-green)}.unit-stop.checkpoint{opacity:.82}.unit-number{background:var(--chalk);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-weight:900;display:inline-flex}.unit-stop strong{font-size:1.05rem;display:block}.unit-stop p{color:var(--muted);margin:4px 0 0;font-weight:700;line-height:1.4}.unit-state{color:var(--classroom-green);text-transform:uppercase;font-size:.78rem;font-weight:900}.progress-track{background:#e7ece7;border-radius:999px;height:12px;overflow:hidden}.progress-track span{background:var(--classroom-green);height:100%;display:block}.classroom-notebook h3,.reader-notebook h3{margin:22px 0 10px}.vocab-list{flex-wrap:wrap;gap:10px;display:flex}.vocab-list span{background:var(--pink);border-radius:999px;padding:8px 12px;font-weight:800}.classroom-next,.checkpoint-panel{justify-content:space-between;align-items:center;gap:18px;display:flex}.course-kicker{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px;display:flex}.course-kicker span{color:#ffeeb0;text-transform:uppercase;font-size:.8rem;font-weight:900}.back-link{color:#fff;background:#ffffff1f;border:1px solid #fff3;border-radius:999px;padding:6px 10px;font-weight:900;text-decoration:none;display:inline-flex}.unit-sidebar{flex-direction:column;gap:10px;display:flex;position:sticky;top:16px}.unit-tab{background:var(--paper);border-radius:var(--radius-sm);color:var(--text);text-align:left;border:2px solid #0000;grid-template-columns:34px 1fr;align-items:center;gap:10px;min-height:56px;padding:12px;display:grid}.unit-tab span{background:#e7ece7;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-weight:900;display:inline-flex}.unit-tab.selected{border-color:var(--school-yellow)}.unit-tab.complete span{background:var(--classroom-green);color:#fff}.unit-tab strong{font-size:.88rem;line-height:1.2}.lesson-reader{gap:18px;display:grid}.lesson-reader-top h2{margin:8px 0 10px;font-size:2rem;line-height:1.1}.reader-board{background:var(--chalk);border-radius:var(--radius-sm);color:#f8ffe9;border:6px solid #d9a64f;padding:18px}.reader-board span{color:#ffeeb0;text-transform:uppercase;margin-bottom:8px;font-size:.8rem;font-weight:900;display:block}.reader-board strong{font-size:1.2rem;line-height:1.35;display:block}.reader-card{background:linear-gradient(var(--paper), var(--paper)) padding-box, repeating-linear-gradient(0deg, transparent 0 31px, #4a9fd424 31px 33px);border-radius:var(--radius-sm);border:2px solid #2d2a321a;padding:24px}.reader-card p{font-size:1.25rem;font-weight:700;line-height:1.6}.chalk-line{border-left:5px solid var(--classroom-green);background:#2f8f681a;border-radius:6px;margin-top:18px;padding:12px 14px;font-weight:900}.reader-notebook a{color:var(--ruby-blue-dark);margin-top:10px;font-weight:800;display:block}.reader-notebook li{margin-bottom:8px}.checkpoint-lock{border:3px solid var(--school-yellow)}.progress-grid{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.progress-tile{background:var(--paper);border-radius:var(--radius-sm);box-shadow:var(--shadow);border:2px solid #2d2a321a;padding:18px}.progress-tile strong{margin-top:6px;font-size:1.5rem;display:block}.progress-panel{margin-top:18px}.mobile-nav{display:none}@media (width<=1024px){.app-shell{padding-bottom:calc(64px + var(--safe-bottom));grid-template-rows:auto 1fr auto;grid-template-columns:1fr}.nav-sidebar,.right-sidebar{display:none}.main-content{padding:16px}.hub-hero,.classroom-layout,.reader-layout,.progress-grid,.hub-status{grid-template-columns:1fr}.hub-hero{padding:22px}.hub-board,.classroom-board,.course-header{min-height:auto}.classroom-board,.course-header,.classroom-next,.checkpoint-panel{flex-direction:column;align-items:flex-start}.unit-stop{grid-template-columns:40px 1fr}.unit-state{grid-column:2}.unit-sidebar{grid-template-columns:repeat(4,minmax(0,1fr));display:grid;position:static}.unit-tab{text-align:center;grid-template-columns:1fr;justify-items:center;gap:6px;min-height:72px;padding:10px 6px}.unit-tab strong{font-size:.72rem}.reader-notebook{order:3}.mobile-nav{background:var(--surface);padding:8px 8px calc(8px + var(--safe-bottom));z-index:100;justify-content:space-around;display:flex;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -4px 24px #00000014}.mobile-nav a{color:var(--muted);border-radius:var(--radius-sm);flex-direction:column;align-items:center;gap:2px;padding:8px 12px;font-size:.7rem;font-weight:700;text-decoration:none;display:flex}.mobile-nav a.active{color:var(--ruby-blue);background:var(--pink)}.mobile-nav span:first-child{font-size:1.25rem}}