/* assets/guul-functionality.css */

/* Functionality additions only. Existing site design selectors are left unchanged. */
.guulEnhancedPage{animation:fade .18s}.guulSubHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 14px}.guulBack{border:1px solid var(--line);background:#fff;color:var(--purple);border-radius:11px;padding:10px 13px;font-weight:800}.guulChapterList{display:grid;gap:10px;margin-top:18px}.guulChapter{--subject:#6254e7;width:100%;border:1px solid var(--line);background:#fff;border-radius:15px;padding:14px;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;text-align:left;color:var(--ink)}.guulChapter:hover{border-color:color-mix(in srgb,var(--subject) 42%,var(--line));box-shadow:0 9px 24px #2634500e}.guulChapter .num{width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--subject) 11%,white);color:var(--subject);display:grid;place-items:center;font-weight:900}.guulChapter b,.guulChapter small{display:block}.guulChapter small{color:var(--muted);font-size:11px;margin-top:4px}.guulStatus{width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 4px #f5f6f9}.guulStatus.red{background:#e75363}.guulStatus.yellow{background:#f4b63f}.guulStatus.green{background:#20a875}.guulStudyModal{width:min(800px,100%)}.guulStudyBody{margin-top:20px}.guulSummary{background:#f8f7ff;border:1px solid #e4e0ff;border-radius:16px;padding:18px;line-height:1.65;color:#465168}.guulBulletList{display:grid;gap:9px;padding:0;margin:18px 0;list-style:none}.guulBulletList li{display:flex;gap:9px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;line-height:1.5}.guulBulletList li:before{content:'✓';color:#20a875;font-weight:900}.guulQaList{display:grid;gap:9px;margin-top:16px}.guulQaItem{border:1px solid var(--line);background:#fff;border-radius:13px;padding:0 14px}.guulQaItem summary{cursor:pointer;list-style:none;padding:13px 0;font-weight:760;line-height:1.45}.guulQaItem summary::-webkit-details-marker{display:none}.guulQaItem summary:before{content:'Q';display:inline-grid;place-items:center;width:27px;height:27px;border-radius:8px;background:#eeecff;color:var(--purple);margin-right:9px;font-size:11px;font-weight:900}.guulAnswer{border-top:1px solid var(--line);padding:12px 0 14px;color:#44506a;line-height:1.55}.guulAnswer b{color:#08784c}.guulActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.guulActions .primary{flex:1}.guulSecondary{border:0;border-radius:13px;padding:13px 18px;background:#eef0f6;color:var(--ink);font-weight:800}.guulQuizWrap{max-width:760px;margin:0 auto}.guulQuizMeta{display:flex;justify-content:space-between;gap:12px;align-items:center}.guulFeedback{margin-top:14px;border-radius:12px;padding:12px 14px;font-weight:800}.guulFeedback.ok{background:#effdf6;color:#08784c}.guulFeedback.no{background:#fff2f3;color:#b52e40}.guulResult{text-align:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:34px;max-width:720px;margin:22px auto}.guulResult .score{font-size:58px;color:var(--purple);font-weight:900}.guulResult .score small{font-size:22px;color:var(--muted)}.guulSelectMark{outline:2px solid var(--purple);background:#f5f3ff!important}.guulCountGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:720px;margin:16px auto}.guulCountGrid button{border:2px solid var(--line);background:#fff;border-radius:18px;padding:22px;color:var(--ink)}.guulCountGrid button.selected{border-color:var(--purple);background:#f5f3ff}.guulCountGrid strong,.guulCountGrid span,.guulCountGrid small{display:block}.guulCountGrid strong{font-size:34px;color:var(--purple)}.guulCountGrid span{font-weight:850}.guulCountGrid small{color:var(--muted);margin-top:5px}.guulSourceNote{max-width:720px;margin:14px auto;background:#effdf6;border:1px solid #c7f0dd;border-radius:14px;padding:13px;color:#08784c;font-size:12px;line-height:1.5}.guulStartBox{max-width:720px;margin:18px auto;text-align:center}.guulModalTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-right:42px}.guulModalTop h2{margin:0}.guulModalTop small{color:var(--muted)}
.qaPdfSection{margin-top:24px}.qaInteractiveSection{margin-top:34px}.qaPdfCount{display:inline-flex;align-items:center;border-radius:999px;background:#eeecff;color:var(--purple);padding:7px 11px;font-size:12px;font-weight:850}.qaPdfGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.qaPdfCard{--subject:#6254e7;display:grid;grid-template-columns:94px 1fr;align-items:center;gap:14px;min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:17px;background:#fff;padding:10px;color:var(--ink);text-decoration:none;box-shadow:0 7px 20px #2634500d;transition:.18s ease}.qaPdfCard:hover{border-color:color-mix(in srgb,var(--subject) 45%,var(--line));box-shadow:0 13px 30px #2634501a;transform:translateY(-2px)}.qaPdfMedia{position:relative;display:block;width:94px;height:78px;border-radius:13px;overflow:hidden;background:color-mix(in srgb,var(--subject) 12%,white)}.qaPdfMedia img{width:100%;height:100%;object-fit:cover;display:block}.qaPdfMedia>.subjectIcon{width:100%;height:100%;border-radius:0}.qaPdfMedia i{position:absolute;left:7px;bottom:7px;border-radius:7px;background:#ec344f;color:#fff;padding:4px 7px;font-size:9px;font-style:normal;font-weight:950;letter-spacing:.5px;box-shadow:0 4px 10px #80132235}.qaPdfCopy{min-width:0}.qaPdfCopy b,.qaPdfCopy small,.qaPdfCopy em{display:block}.qaPdfCopy b{font-size:14px;line-height:1.35}.qaPdfCopy small{margin-top:5px;color:var(--muted);font-size:11px}.qaPdfCopy em{margin-top:8px;color:var(--subject);font-size:12px;font-style:normal;font-weight:850}
.englishNavIcon{width:20px;height:20px;border-radius:7px;display:grid;place-items:center;background:#eeecff;color:var(--purple);font-size:9px;flex:0 0 auto}.sidebar nav button.active .englishNavIcon{background:#fff;color:var(--purple)}
.englishHero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(190px,.5fr);gap:28px;align-items:center;overflow:hidden;border-radius:25px;padding:30px;background:linear-gradient(135deg,#27204f 0%,#5545d9 58%,#7a69f0 100%);color:#fff;box-shadow:0 18px 45px #3f31a72b}.englishHero h1{margin:5px 0 10px;color:#fff;font-size:clamp(26px,4vw,42px)}.englishHero p{max-width:680px;line-height:1.65;color:#eeeaff}.englishHero .eyebrow{color:#cfc9ff}.englishHero small{display:block;margin-top:13px;color:#d8d3ff;line-height:1.5}.englishHero img{width:100%;height:205px;object-fit:cover;border-radius:19px;box-shadow:0 14px 35px #16102f66}.englishHeroActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}.englishLink{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.englishHero .primary{background:#fff;color:#4e3fd0}.englishHero .guulSecondary{background:#7567e3;color:#fff}.englishStats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 28px}.englishStats span{display:flex;align-items:baseline;gap:7px;border:1px solid var(--line);border-radius:15px;background:#fff;padding:14px;color:var(--muted);font-size:12px}.englishStats b{font-size:22px;color:var(--purple)}.englishProgressPill{border-radius:999px;background:#ecfaf3;color:#08784c;padding:7px 11px;font-size:12px;font-weight:850}.englishLessonGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.englishLessonCard{border:1px solid var(--line);border-radius:17px;background:#fff;padding:15px;box-shadow:0 6px 18px #2634500a}.englishLessonCard.completed{border-color:#bdebd6;background:linear-gradient(180deg,#fff,#f8fffb)}.englishLessonTop{display:grid!important;grid-template-columns:43px 1fr auto;align-items:center;gap:11px}.englishLessonTop>span,.englishLessonIntro>span{width:43px;height:43px;border-radius:12px;display:grid;place-items:center;background:#eeecff;color:var(--purple);font-weight:950}.englishLessonTop b,.englishLessonTop small{display:block}.englishLessonTop b{line-height:1.35}.englishLessonTop small{margin-top:3px;color:var(--muted);font-size:11px}.englishLessonTop>i{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#e7faef;color:#08784c;font-style:normal;font-weight:950}.englishLessonCard>p{min-height:40px;margin:12px 0;color:var(--muted);font-size:12px;line-height:1.55}.englishLessonCard>div:last-child{display:flex;align-items:center;justify-content:space-between;gap:8px}.englishLessonCard a,.englishLessonCard button{border:0;border-radius:10px;padding:9px 10px;text-decoration:none;font-size:11px;font-weight:850}.englishLessonCard a{background:#eef8ff;color:#1672b8}.englishLessonCard button{background:#eeecff;color:var(--purple)}.englishLessonIntro{display:grid;grid-template-columns:60px 1fr;gap:16px;align-items:start;margin-top:22px;border:1px solid var(--line);border-radius:20px;background:#fff;padding:22px}.englishLessonIntro>span{width:60px;height:60px;border-radius:17px;font-size:19px}.englishLessonIntro h1{margin:4px 0 8px}.englishLessonIntro p:last-child{margin:0;color:var(--muted);line-height:1.6}.englishLessonActions{display:flex;gap:12px;margin-top:16px}.englishLessonActions>*{flex:1;text-align:center}.englishVideoButton{border-radius:13px;padding:13px 18px;background:#229ed9;color:#fff;text-decoration:none;font-weight:850}.englishTip{margin-top:13px;border:1px solid #d9d4ff;border-radius:13px;background:#f7f5ff;padding:13px;color:#5548a4;font-size:12px;line-height:1.5}.englishInstruction{margin:20px 0 5px;color:var(--muted);font-size:12px}.englishResultIcon{display:block;font-size:58px}
@media(max-width:800px){.englishHero{grid-template-columns:1fr}.englishHero img{height:170px}.englishLessonGrid{grid-template-columns:1fr}}@media(max-width:700px){.qaPdfGrid{grid-template-columns:1fr}}@media(max-width:520px){.guulChapter{grid-template-columns:38px 1fr auto;padding:11px}.guulChapter .num{width:36px;height:36px}.guulCountGrid{grid-template-columns:1fr 1fr}.guulStudyModal{border-radius:0;height:100%;max-height:none}.guulActions{display:grid}.guulModalTop{display:block;margin-right:35px}.guulModalTop small{display:block;margin-top:4px}.qaPdfCard{grid-template-columns:78px 1fr;padding:9px}.qaPdfMedia{width:78px;height:70px}.englishHero{padding:20px;border-radius:19px}.englishHero img{height:145px}.englishHeroActions,.englishLessonActions{display:grid}.englishStats{gap:7px}.englishStats span{display:block;padding:11px;text-align:center}.englishStats b{display:block}.englishLessonCard>div:last-child{align-items:stretch}.englishLessonCard a,.englishLessonCard button{display:grid;place-items:center;flex:1}.englishLessonIntro{grid-template-columns:46px 1fr;padding:16px}.englishLessonIntro>span{width:46px;height:46px;border-radius:13px}.englishLessonTop{grid-template-columns:39px 1fr auto}.englishLessonTop>span{width:39px;height:39px}}
.englishPlayerModal{max-width:900px!important}.englishPlayerHead{padding-right:46px;margin-bottom:14px}.englishPlayerHead h2{margin:3px 0}.englishPlayerFrame{position:relative;width:100%;aspect-ratio:16/9;background:#06070b;border-radius:16px;overflow:hidden}.englishPlayerFrame iframe,.englishPlayerFrame video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}.englishPlayerEmpty{text-align:center;padding:48px 18px}.englishPlayerEmpty>span{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 18px;border-radius:50%;background:#eeecff;color:var(--purple);font-size:30px}.englishPlayerEmpty p{max-width:620px;margin:10px auto 22px;color:#667085;line-height:1.65}.englishPlayerEmpty a{text-decoration:none;display:inline-flex}
.dailyChapterPicker{padding:6px}.dailyChapterPicker>p{color:var(--muted);line-height:1.55}.dailyChapterGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:18px}.dailyChapterGrid button{display:grid;grid-template-columns:44px 1fr;align-items:center;gap:3px 11px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px;text-align:left;color:var(--ink)}.dailyChapterGrid button:hover{border-color:var(--purple);background:#f8f7ff}.dailyChapterGrid strong{grid-row:1/3;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#eeecff;color:var(--purple);font-size:18px}.dailyChapterGrid span{font-weight:850}.dailyChapterGrid small{color:var(--muted);font-size:10px}.guulEmptyNotice{margin:12px 0 0;color:var(--muted);font-size:13px}.guulEmptyState{border:1px dashed var(--line);border-radius:18px;background:#fff;padding:35px;text-align:center;color:var(--muted)}.guulEmptyState h2{color:var(--ink)}
@media(max-width:800px){.dailyChapterGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.dailyChapterGrid{grid-template-columns:1fr}}
.guulActivityBreakdown{display:grid;gap:3px;line-height:1.35}.guulScoreLine{display:block;font-size:11px;color:#556176}.guulScoreLine b{color:#17213c}.guulScoreLine.legacy{color:#7a6d9e}@media(max-width:780px){.rankingTable>div.guulDetailedRow{grid-template-columns:40px minmax(0,1fr) 68px!important;gap:8px}.rankingTable>div.guulDetailedRow>.studentName{grid-column:2;grid-row:1}.rankingTable>div.guulDetailedRow>b{grid-column:3;grid-row:1;text-align:right}.rankingTable>div.guulDetailedRow>.guulActivityBreakdown{display:grid!important;grid-column:2/4;grid-row:2;padding:8px 10px;background:#f7f7fc;border-radius:10px}.rankingTable .rankingHead>span:nth-child(3){display:none!important}}

/* ===== GUULRAADRAAC 1v1 Battle ===== */
@media(min-width:1050px){
  .pageView[data-guul-enhanced="competition"]{position:relative}
  .pageView[data-guul-enhanced="competition"]>.eyebrow,
  .pageView[data-guul-enhanced="competition"]>h1,
  .pageView[data-guul-enhanced="competition"]>.pageIntro{max-width:47%}
  .guulBattlePanel{position:absolute;top:0;right:0;width:47%;min-height:270px}
}
.guulBattlePanel{box-sizing:border-box;border:1px solid #ddd9ff;border-radius:22px;padding:22px;background:linear-gradient(145deg,#fff 0%,#f8f7ff 100%);box-shadow:0 14px 34px #30247513;z-index:2}.guulBattlePanelTop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.guulBattlePanel h2{margin:5px 0 6px;font-size:24px}.guulBattlePanel>p{margin:8px 0 14px;color:var(--muted);line-height:1.55;font-size:13px}.guulBattleKicker{font-size:11px;font-weight:950;letter-spacing:1px;color:var(--purple)}.guulLiveDot{border-radius:999px;padding:6px 9px;background:#eafbf3;color:#08784c;font-size:9px;font-weight:950;letter-spacing:.8px}.guulLiveDot:before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#22b573;margin-right:5px;box-shadow:0 0 0 4px #22b57318}.guulBattleIdentity{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;border:1px solid #e4e2f4;background:#fff;border-radius:13px;padding:9px 10px}.guulBattleIdentity span{font-size:10px;color:var(--muted);font-weight:750}.guulBattleIdentity strong{font-size:17px;letter-spacing:1.2px;color:#241a74}.guulBattleIdentity button{border:0;border-radius:9px;background:#eeecff;color:var(--purple);font-size:10px;font-weight:850;padding:8px 9px}.guulBattlePanel>small{display:block;margin:8px 2px 0;color:#68738a;font-size:10px}.guulBattleResume{width:100%;margin-top:10px;border:1px solid #d8d3ff;border-radius:11px;background:#fff;color:var(--purple);padding:10px 12px;font-size:11px;font-weight:900}
.guulBattlePanelActions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}.guulBattlePanelActions button{padding:12px 10px;font-size:11px}.guulBattleModal{width:min(760px,100%)}.guulBattleModalHead{display:flex;align-items:center;gap:12px;padding-right:40px;margin-bottom:18px}.guulBattleModalHead>span{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:#eeecff;font-size:22px}.guulBattleModalHead h2{margin:3px 0 0}.guulBattleField{display:grid;gap:6px}.guulBattleField>span{font-size:11px;font-weight:850;color:#3d4860}.guulBattleField input,.guulBattleField select{width:100%;box-sizing:border-box;border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 13px;color:var(--ink);font:inherit;outline:none}.guulBattleField input:focus,.guulBattleField select:focus{border-color:var(--purple);box-shadow:0 0 0 3px #6254e713}.guulBattleSettings{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.guulBattleCount{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.guulBattleCount button{border:2px solid var(--line);border-radius:14px;background:#fff;padding:12px;color:var(--ink)}.guulBattleCount button.selected{border-color:var(--purple);background:#f6f4ff}.guulBattleCount b,.guulBattleCount span{display:block}.guulBattleCount b{font-size:25px;color:var(--purple)}.guulBattleCount span{font-size:11px;font-weight:800}.guulBattlePoolNote,.guulBattleHint{border-radius:12px;background:#f7f8fb;border:1px solid var(--line);padding:11px 12px;color:#566177;font-size:11px;line-height:1.5}.guulBattlePoolNote{background:#effdf6;border-color:#ccefe0;color:#08784c;margin-bottom:8px}.guulBattleTargetOk,.guulBattleTargetBad{margin-top:8px;border-radius:10px;padding:9px 11px;font-size:11px;font-weight:800}.guulBattleTargetOk{background:#effdf6;color:#08784c}.guulBattleTargetOk small{margin-left:5px;color:#587264}.guulBattleTargetBad{background:#fff2f3;color:#b52e40}.guulBattleWaiting{max-width:790px;margin:40px auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:24px;padding:34px;box-shadow:0 16px 38px #2634500d}.guulBattleSpinner{display:grid;place-items:center;width:74px;height:74px;border-radius:50%;margin:0 auto 16px;background:#f1efff;font-size:31px;animation:guulBattlePulse 1.4s infinite}.guulBattleWaiting h1,.guulBattleWaiting h2{margin:8px 0}.guulBattleWaiting>p{color:var(--muted);line-height:1.55}.guulBattleSearching{display:flex;align-items:center;justify-content:center;gap:10px;max-width:560px;margin:18px auto;padding:12px;border-radius:13px;background:#f7f7fc;color:#5e687e;font-size:11px}.guulBattleSearching i{width:10px;height:10px;border-radius:50%;background:#24ad75;box-shadow:0 0 0 5px #24ad7518}.guulBattleScoreboard{display:grid;grid-template-columns:1fr 54px 1fr;gap:12px;align-items:center;margin:18px 0}.guulBattleScoreboard article{border:1px solid var(--line);border-radius:17px;background:#fff;padding:14px;display:grid;grid-template-columns:1fr auto;gap:4px 10px;text-align:left}.guulBattleScoreboard article small{grid-column:1/3;color:var(--purple);font-size:9px;font-weight:950;letter-spacing:.8px}.guulBattleScoreboard article b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guulBattleScoreboard article strong{grid-column:2;grid-row:2/4;font-size:32px;color:var(--purple);align-self:center}.guulBattleScoreboard article span{font-size:10px;color:var(--muted)}.guulBattleScoreboard article i{grid-column:1/3;height:5px;border-radius:999px;background:#eceef4;overflow:hidden}.guulBattleScoreboard article i em{display:block;height:100%;background:var(--purple);border-radius:999px}.guulBattleVs{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#1d2740;color:#fff;font-weight:950;font-size:11px}.guulBattleArena{max-width:850px;margin:0 auto}.guulBattleMeta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}.guulBattleMeta span{color:var(--muted);font-size:11px}.guulBattleMeta b{font-size:12px}.guulBattleSource{display:inline-flex!important;margin-top:18px}.guulBattleArena>h2{margin:12px 0 16px;line-height:1.45}.guulBattleResult{max-width:850px;margin:25px auto;text-align:center}.guulBattleTrophy{display:block;font-size:66px}.guulBattleResult h1{margin:7px 0}.guulBattleResult>p{color:var(--muted)}.guulBattleFinalText{max-width:620px;margin:17px auto!important;line-height:1.6}.guulBattleInviteToast{position:fixed;right:20px;bottom:20px;z-index:99999;width:min(390px,calc(100vw - 28px));box-sizing:border-box;border:1px solid #dcd7ff;border-radius:18px;background:#fff;padding:15px;box-shadow:0 18px 50px #1d244533;display:grid;grid-template-columns:44px 1fr;gap:12px;animation:guulToastIn .2s ease}.guulBattleInviteToast>span{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#eeecff;font-size:20px}.guulBattleInviteToast small{display:block;color:var(--purple);font-weight:950;font-size:9px;letter-spacing:.8px}.guulBattleInviteToast b{display:block;margin:3px 0}.guulBattleInviteToast p{margin:4px 0 10px;color:var(--muted);font-size:11px;line-height:1.4}.guulBattleInviteToast div>div{display:flex;justify-content:flex-end;gap:8px}.guulBattleInviteToast button{padding:9px 12px;font-size:10px}.guulBattleWinLine{display:block;font-size:11px;color:#4d5a70}.guulBattleWinLine b{color:#17213c}@keyframes guulBattlePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}@keyframes guulToastIn{from{transform:translateY(15px);opacity:0}to{transform:none;opacity:1}}
@media(max-width:1049px){.guulBattlePanel{margin:18px 0 24px}.guulBattlePanelActions{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.guulBattlePanelActions,.guulBattleSettings{grid-template-columns:1fr}.guulBattleIdentity{grid-template-columns:1fr auto}.guulBattleIdentity span{grid-column:1/3}.guulBattleScoreboard{grid-template-columns:1fr 34px 1fr;gap:6px}.guulBattleVs{width:32px;height:32px;font-size:8px}.guulBattleScoreboard article{padding:10px;grid-template-columns:1fr}.guulBattleScoreboard article small{grid-column:1}.guulBattleScoreboard article strong{grid-column:1;grid-row:auto;font-size:25px}.guulBattleScoreboard article i{grid-column:1}.guulBattleMeta{display:block}.guulBattleMeta b{display:block;margin-top:4px}.guulBattleWaiting{padding:22px 14px}.guulBattleInviteToast{right:14px;bottom:14px}.guulBattleModal{border-radius:0;max-height:100%;height:100%}}

/* ===== Competition mode selector v21 ===== */
.pageView[data-guul-enhanced="competition"]{position:static!important}
@media(min-width:1050px){
  .pageView[data-guul-enhanced="competition"]>.eyebrow,
  .pageView[data-guul-enhanced="competition"]>h1,
  .pageView[data-guul-enhanced="competition"]>.pageIntro{max-width:none!important}
}
.guulCompetitionModeChooser{max-width:920px;margin:24px auto 8px}
.guulModeHeading{text-align:center;margin:0 auto 18px;max-width:650px}
.guulModeHeading>span{display:inline-block;color:var(--purple);font-size:10px;font-weight:950;letter-spacing:1.2px;margin-bottom:7px}
.guulModeHeading h2{margin:0 0 7px;font-size:clamp(22px,3vw,30px);color:var(--ink)}
.guulModeHeading p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}
.guulModeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.guulModeCard{position:relative;overflow:hidden;min-height:205px;border:1px solid var(--line);border-radius:22px;background:#fff;padding:22px;text-align:left;color:var(--ink);box-shadow:0 9px 28px #2634500d;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;cursor:pointer}
.guulModeCard:before{content:'';position:absolute;right:-42px;top:-55px;width:150px;height:150px;border-radius:50%;background:#6254e70d;pointer-events:none}
.guulModeCard:hover{transform:translateY(-3px);border-color:#cfc9ff;box-shadow:0 15px 34px #30247517}
.guulModeCard.battle{background:linear-gradient(145deg,#fff 0%,#f8f7ff 100%);border-color:#ddd9ff}
.guulModeIcon{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:#f1efff;font-size:23px;margin-bottom:17px}
.guulModeCard.solo .guulModeIcon{background:#eef8ff}
.guulModeBadge{position:absolute;right:17px;top:17px;border-radius:999px;background:#f0f2f6;color:#5d687b;padding:6px 9px;font-size:9px;font-weight:950;letter-spacing:.7px}
.guulModeBadge.live{background:#eafbf3;color:#08784c}
.guulModeBadge.live:before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#22b573;margin-right:5px}
.guulModeCard strong,.guulModeCard small,.guulModeCard em{display:block}
.guulModeCard strong{font-size:20px;margin-bottom:8px}
.guulModeCard small{min-height:48px;color:var(--muted);font-size:12px;line-height:1.55}
.guulModeCard em{margin-top:17px;color:var(--purple);font-size:12px;font-style:normal;font-weight:900}
.guulModeCard em b{font-size:15px;margin-left:4px}
.guulModeSwitch{max-width:920px;margin:14px auto 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px}
.guulModeSwitch button{border:0;background:transparent;color:var(--purple);padding:7px 0;font:inherit;font-size:11px;font-weight:900;cursor:pointer}
.guulModeSwitch span{border-radius:999px;background:#f4f3ff;color:#5145c4;padding:7px 10px;font-size:10px;font-weight:900}
.guulBattlePanel{position:relative!important;top:auto!important;right:auto!important;width:auto!important;min-height:0!important;max-width:920px;margin:0 auto 24px;padding:24px!important}
.guulBattlePanelActions{grid-template-columns:1fr 1fr!important;gap:12px!important}
.guulBattlePanelActions button{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:10px;text-align:left;padding:13px 14px!important;min-height:70px}
.guulBattlePanelActions button>span{grid-row:1/3;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:#ffffff2b;font-size:17px}
.guulBattlePanelActions button>b{font-size:12px;line-height:1.2}
.guulBattlePanelActions button>small{font-size:9px;line-height:1.3;opacity:.78;font-weight:700}
.guulBattlePanelActions .guulSecondary>span{background:#fff}
@media(max-width:620px){
  .guulCompetitionModeChooser{margin-top:18px}
  .guulModeHeading{text-align:left;margin-bottom:13px}
  .guulModeGrid{grid-template-columns:1fr;gap:11px}
  .guulModeCard{min-height:0;padding:17px;border-radius:18px;display:grid;grid-template-columns:46px 1fr;gap:0 13px}
  .guulModeIcon{grid-row:1/5;width:46px;height:46px;margin:0;font-size:21px}
  .guulModeBadge{position:static;justify-self:start;display:inline-flex;margin-bottom:5px;padding:5px 8px}
  .guulModeCard strong{font-size:17px;margin-bottom:5px}
  .guulModeCard small{min-height:0;font-size:11px}
  .guulModeCard em{margin-top:9px;font-size:11px}
  .guulModeSwitch{margin:10px 0 14px}
  .guulModeSwitch span{font-size:9px}
  .guulBattlePanel{margin:0 0 18px;padding:17px!important;border-radius:18px}
  .guulBattlePanel h2{font-size:20px}
  .guulBattlePanelActions{grid-template-columns:1fr!important}
}

/* ===== Curriculum study summaries v23 ===== */
.guulStudyBody{display:grid;gap:16px}
.guulStudyHero{position:relative;overflow:hidden;border:1px solid #e0dcff;border-radius:20px;background:linear-gradient(145deg,#fff 0%,#faf9ff 100%);padding:20px 22px;box-shadow:0 8px 26px #2835570a}
.guulStudyHero:after{content:'';position:absolute;right:-34px;top:-44px;width:125px;height:125px;border-radius:50%;background:#6254e70d}
.guulStudyHero>span{position:relative;z-index:1;display:inline-flex;border-radius:999px;background:#f0eeff;color:var(--subject,#6254e7);padding:6px 9px;font-size:9px;font-weight:950;letter-spacing:1px}
.guulStudyHero p{position:relative;z-index:1;margin:11px 0 0;color:#25324a;font-size:14px;line-height:1.75;font-weight:650;white-space:pre-line}
.guulScopeNote{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:start;border:1px solid #cbe8d9;border-radius:14px;background:#f2fbf6;padding:12px 14px;color:#176142}
.guulScopeNote b{font-size:11px;white-space:nowrap}.guulScopeNote span{font-size:11px;line-height:1.55}
.guulLearnSection{border:1px solid var(--line);border-radius:20px;background:#fff;padding:18px;box-shadow:0 8px 25px #2f39580a}
.guulLearnTitle{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:13px}
.guulLearnTitle .eyebrow{margin:0 0 3px}.guulLearnTitle h3{margin:0;color:var(--ink);font-size:17px}.guulLearnTitle>span{border-radius:999px;background:#f3f2ff;color:#5c50df;padding:6px 9px;font-size:9px;font-weight:950;white-space:nowrap}
.guulLessonGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.guulLessonCard{display:grid;grid-template-columns:35px 1fr;gap:10px;align-items:start;border:1px solid #e9ebf2;border-radius:14px;background:#fbfcfe;padding:11px 12px}
.guulLessonCard>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eeecff;color:var(--purple);font-size:10px;font-weight:950}
.guulLessonCard b{display:block;color:#1e2940;font-size:12px;line-height:1.45}.guulLessonCard small{display:block;margin-top:4px;color:#677289;font-size:10.5px;line-height:1.55}
.guulMathMethod{background:linear-gradient(150deg,#fff 0%,#f7f9ff 100%)}
.guulMethodSteps{counter-reset:steps;list-style:none;padding:0;margin:0;display:grid;gap:9px}
.guulMethodSteps li{counter-increment:steps;position:relative;padding:11px 13px 11px 48px;border-radius:13px;background:#f7f8fc;color:#2e3950;font-size:12px;line-height:1.55}
.guulMethodSteps li:before{content:counter(steps);position:absolute;left:11px;top:9px;width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:#6254e7;color:#fff;font-size:10px;font-weight:950}
.guulExampleGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.guulExampleCard{border:1px solid #dedaff;border-radius:14px;background:#faf9ff;padding:13px}.guulExampleCard small{display:block;color:#6254e7;font-size:9px;font-weight:950;text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px}.guulExampleCard b{display:block;color:#202b43;font-size:12px;line-height:1.55;white-space:pre-line}
.guulGrammarGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.guulGrammarGrid article{border:1px solid #e4e7ee;border-radius:13px;padding:12px;background:#fbfcfe}.guulGrammarGrid b{display:block;font-size:12px;color:#1b2741}.guulGrammarGrid p{margin:5px 0 0;font-size:10.5px;line-height:1.55;color:#657087}
.guulBulletList.modern{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;list-style:none;padding:0;margin:0}.guulBulletList.modern li{position:relative;margin:0!important;border:1px solid #e8eaf1;border-radius:13px;background:#fbfcfe;padding:11px 12px 11px 34px;color:#39445a;font-size:11px;line-height:1.55}.guulBulletList.modern li:before{content:'✓';position:absolute;left:11px;top:10px;color:#149265;font-weight:950}
.guulExamFacts{background:#fcfcff}.guulExamFacts .guulQaList{margin-top:0}.guulQaItem summary,.guulAnswer{white-space:pre-line}.guulQuizWrap h2,.guulQuizWrap .options button,.guulBattleArena h2,.guulBattleArena .options button{white-space:pre-line}
@media(max-width:700px){.guulStudyHero{padding:16px}.guulScopeNote{grid-template-columns:1fr;gap:4px}.guulLessonGrid,.guulGrammarGrid,.guulBulletList.modern{grid-template-columns:1fr}.guulExampleGrid{grid-template-columns:1fr}.guulLearnSection{padding:14px;border-radius:17px}.guulLearnTitle h3{font-size:15px}.guulLessonCard{grid-template-columns:32px 1fr}.guulLessonCard>span{width:31px;height:31px}.guulStudyHero p{font-size:12px}.guulScopeNote b,.guulScopeNote span{font-size:10px}}

/* v27 — cashar kasta khulaaso source-ku kooban yahay */
.guulLessonOpen{width:100%;font:inherit;text-align:left;cursor:pointer;appearance:none;color:inherit;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease}
.guulLessonOpen:hover{transform:translateY(-2px);border-color:#cfc9ff;background:#fff;box-shadow:0 10px 26px rgba(66,55,145,.08)}
.guulLessonOpen:focus-visible{outline:3px solid rgba(98,84,231,.24);outline-offset:2px}
.guulLessonOpen em{display:block;margin-top:7px;color:#6254e7;font-size:10px;line-height:1.4;font-style:normal;font-weight:850}
body.guulLessonModalOpen{overflow:hidden}
.guulLessonStudyBackdrop{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:22px;background:rgba(19,27,45,.58);backdrop-filter:blur(6px)}
.guulLessonStudyPanel{width:min(1120px,96vw);height:min(880px,94vh);display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(225,227,238,.92);border-radius:28px;background:#f7f8fc;box-shadow:0 34px 90px rgba(16,24,40,.28)}
.guulLessonStudyHead{position:relative;padding:24px 28px 18px;background:#fff;border-bottom:1px solid #e7e9f1}
.guulLessonClose{position:absolute;right:20px;top:18px;width:42px;height:42px;border:0;border-radius:14px;background:#f1f2f7;color:#18243a;font-size:20px;cursor:pointer}
.guulLessonClose:hover{background:#e9e7ff;color:#6254e7}
.guulLessonBreadcrumb{padding-right:58px;color:#78839a;font-size:12px;font-weight:750}.guulLessonBreadcrumb span{margin:0 6px;color:#b2b8c6}
.guulLessonTitleRow{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-top:15px}.guulLessonTitleRow h2{margin:4px 0 0;color:#17233a;font-size:clamp(24px,3vw,38px);line-height:1.2}.guulLessonTitleRow .eyebrow{margin:0;color:#6254e7;font-size:11px;font-weight:950;letter-spacing:.11em}.guulLessonLead{max-width:830px;margin:9px 0 0;color:#69758c;font-size:13px;line-height:1.7}
.guulLessonCount{flex:0 0 auto;margin-top:5px;padding:9px 13px;border-radius:999px;background:#eeecff;color:#6254e7;font-size:11px;font-weight:950}
.guulLessonStudyScroll{overflow:auto;padding:20px 24px 28px}.guulLessonTip{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-bottom:18px;padding:13px 16px;border:1px solid #cfeada;border-radius:15px;background:#effaf4}.guulLessonTip b{color:#087b51;font-size:12px}.guulLessonTip span{color:#4e6a5e;font-size:11px;line-height:1.6}
.guulLessonPoints{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.guulLessonPoint{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start;min-height:106px;padding:15px;border:1px solid #e4e7ef;border-radius:17px;background:#fff}
.guulPointNo{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#eeecff;color:#6254e7;font-size:11px;font-weight:950}
.guulLessonPoint small{display:block;margin:1px 0 7px;color:#7b8496;font-size:9.5px;font-weight:900;letter-spacing:.045em;text-transform:uppercase}
.guulLessonPoint p{margin:0;color:#17233a;font-size:12.5px;line-height:1.72;font-weight:650;white-space:pre-line}.guulLessonPoint p[dir="rtl"]{text-align:right;font-size:14px;line-height:1.9}
.guulLessonEmpty{padding:22px;border:1px dashed #d9dce7;border-radius:16px;background:#fff;color:#69758c;text-align:center;font-size:12px;line-height:1.7}
.guulLessonBottom{display:flex;justify-content:center;padding:22px 0 4px}.guulLessonBottom .primary{min-width:250px}
@media(max-width:700px){.guulLessonStudyBackdrop{padding:0;place-items:stretch}.guulLessonStudyPanel{width:100%;height:100%;max-height:none;border:0;border-radius:0}.guulLessonStudyHead{padding:18px 16px 14px}.guulLessonClose{right:13px;top:12px;width:38px;height:38px}.guulLessonBreadcrumb{padding-right:50px;font-size:10px}.guulLessonTitleRow{gap:10px;margin-top:12px}.guulLessonTitleRow h2{font-size:23px}.guulLessonCount{padding:7px 9px;font-size:9px}.guulLessonLead{font-size:11px}.guulLessonStudyScroll{padding:14px 12px 22px}.guulLessonTip{grid-template-columns:1fr;gap:3px}.guulLessonPoints{grid-template-columns:1fr;gap:9px}.guulLessonPoint{grid-template-columns:36px 1fr;min-height:0;padding:12px;border-radius:14px}.guulPointNo{width:34px;height:34px}.guulLessonPoint p{font-size:11.5px;line-height:1.65}.guulLessonPoint p[dir="rtl"]{font-size:13px}.guulLessonOpen em{font-size:9px}}


/* v76 battle split + rules */
.guulBattlePanelActions.stacked{grid-template-columns:1fr!important;gap:14px!important}
.guulBattleActionBlock{display:grid;gap:8px}
.guulBattleActionLabel{font-size:11px;font-weight:900;color:#6254e7;letter-spacing:.35px;text-transform:uppercase;padding-left:2px}
.guulBattleActionBlock button{width:100%}
.guulBattleActionBlock.friend button{box-shadow:0 12px 26px rgba(98,84,231,.12)}
.guulBattleActionBlock.quick button{box-shadow:0 10px 24px rgba(31,42,90,.08)}
.guulBattleRulesIntro{border-radius:14px;background:#f5f7ff;border:1px solid #e2e7ff;color:#50607a;padding:12px 14px;line-height:1.6;margin-bottom:14px;font-size:12px}
.guulBattleRulesList{display:grid;gap:12px;margin-bottom:16px}
.guulBattleRulesList article{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;border:1px solid var(--line);border-radius:16px;background:#fff;padding:13px 14px;box-shadow:0 10px 24px rgba(31,42,90,.06)}
.guulBattleRulesList article>b{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#6254e7,#2f98ff);color:#fff;font-size:18px}
.guulBattleRulesList article h3{margin:2px 0 4px;font-size:14px;color:#1b2440}
.guulBattleRulesList article p{margin:0;color:#67748b;line-height:1.55;font-size:12px}
@media(max-width:620px){.guulBattleRulesList article{grid-template-columns:38px 1fr}.guulBattleRulesList article>b{width:38px;height:38px;border-radius:12px;font-size:16px}}


/* assets/v2-home.css */
:root{
  --v2-purple:#5b35ee;
  --v2-blue:#168cf0;
  --v2-ink:#15213a;
  --v2-muted:#6f7a93;
  --v2-bg:#f5f8ff;
  --v2-card:#ffffff;
  --v2-max:460px;
}

*,*::before,*::after{box-sizing:border-box}
html,body,#root{width:100%;max-width:100%;min-width:0;margin:0;overflow-x:hidden}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:#eef3ff}
button,input{font:inherit}
img,svg{max-width:100%}

/* Home uses a mobile-app shell at every viewport size. */
.appShell:has(.v2Home)>.topbar,
.appShell:has(.v2Home)>.sidebar,
.appShell:has(.v2Home)>.navBackdrop{display:none!important}
.appShell:has(.v2Home){
  display:block!important;
  width:100%!important;
  max-width:var(--v2-max)!important;
  min-width:0!important;
  min-height:100dvh!important;
  margin:0 auto!important;
  background:var(--v2-bg)!important;
  overflow-x:hidden!important;
  position:relative!important;
}
.appShell:has(.v2Home)>.content{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  min-height:100dvh!important;
  margin:0!important;
  padding:0!important;
  overflow-x:hidden!important;
  background:transparent!important;
}

.v2Home{
  width:100%;
  min-width:0;
  min-height:100dvh;
  margin:0;
  padding:0 14px calc(76px + env(safe-area-inset-bottom));
  overflow-x:hidden;
  color:var(--v2-ink);
  background:linear-gradient(180deg,#f6f8ff 0%,#fff 58%,#f7f9ff 100%);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* Compact header, inspired by the mobile reference. */
.v2Hero{
  position:relative;
  z-index:1;
  width:calc(100% + 28px);
  min-height:168px;
  margin:0 -14px 0;
  padding:14px 14px 32px;
  color:#fff;
  background:linear-gradient(132deg,#6331ee 0%,#3157ee 52%,#168bf0 100%);
  border-radius:0 0 28px 28px;
  overflow:visible;
}
.v2Hero::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 82% 8%,rgba(255,255,255,.15),transparent 28%),
    radial-gradient(circle at 5% 92%,rgba(135,56,255,.28),transparent 33%);
}
.v2HeroTop,.v2Greeting,.v2Search{position:relative;z-index:2;width:100%;max-width:100%;min-width:0;margin-inline:auto}
.v2HeroTop{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:42px}
.v2MenuGlyph{display:grid;place-items:center;width:30px;height:36px;color:#fff;font-size:26px;font-weight:400;line-height:1;opacity:.98}
.v2Brand{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
.v2Brand img{flex:0 0 auto;width:38px;height:38px;object-fit:cover;border-radius:12px;box-shadow:0 6px 18px rgba(23,27,85,.18)}
.v2Brand span{display:grid;min-width:0;line-height:1.02}
.v2Brand strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(14px,4.5vw,18px);font-weight:900;letter-spacing:.01em}
.v2Brand small{margin-top:4px;color:#edf0ff;font-size:clamp(8px,2.5vw,10px);font-weight:800;letter-spacing:.25em;white-space:nowrap}
.v2HeroTools{display:flex;align-items:center;gap:7px}
.v2Bell,.v2Avatar{position:relative;display:grid;place-items:center;flex:0 0 auto;width:34px;height:34px;padding:0;border:0;border-radius:12px;color:#fff;background:rgba(255,255,255,.14);font-size:16px;cursor:pointer}
.v2Avatar{border-radius:50%;background:#fff;color:var(--v2-purple);font-size:14px;font-weight:900}
.v2Bell i,.v2NavBadgeWrap i{position:absolute;right:-4px;top:-5px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:#ff4f58;color:#fff;font-size:9px;font-style:normal;line-height:1}
.v2Greeting{margin-top:10px;padding-right:2px}
.v2Greeting h1{margin:0;font-size:clamp(20px,6.2vw,25px);line-height:1.16;font-weight:900;letter-spacing:-.01em;overflow-wrap:anywhere}
.v2Greeting p{margin:5px 0 0;color:#ecf0ff;font-size:clamp(11px,3.3vw,13px);line-height:1.4}
.v2Search{
  display:flex;
  align-items:center;
  gap:9px;
  height:48px;
  margin-top:12px;
  padding:0 12px;
  color:#17213c;
  background:#fff;
  border:1px solid rgba(224,229,245,.9);
  border-radius:16px;
  box-shadow:0 12px 28px rgba(40,55,128,.17);
  transform:translateY(23px);
}
.v2Search>span{flex:0 0 auto;font-size:26px;line-height:1;transform:rotate(-12deg)}
.v2Search input{min-width:0;flex:1;width:100%;border:0;outline:0;background:transparent;color:#1a2542;font-size:clamp(11px,3.4vw,13px)}
.v2Search input::placeholder{color:#7d87a0;text-overflow:ellipsis}
.v2Search button{flex:0 0 auto;width:28px;height:32px;padding:0;border:0;background:transparent;color:#555db3;font-size:20px;cursor:pointer}

/* Weekly challenge: compact, readable, and no overflow. */
.v2Challenge{
  position:relative;
  width:100%;
  min-width:0;
  min-height:164px;
  margin:42px auto 16px;
  padding:16px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 76px;
  grid-template-areas:"copy ring" "win win";
  align-items:center;
  gap:10px 12px;
  text-align:left;
  color:var(--v2-ink);
  background:#fff;
  border:1px solid #e9edf8;
  border-radius:22px;
  box-shadow:0 10px 26px rgba(65,75,130,.08);
  cursor:pointer;
  overflow:hidden;
}
.v2Challenge::after{content:"";position:absolute;right:-42px;top:-50px;width:150px;height:150px;border-radius:50%;background:linear-gradient(145deg,rgba(80,72,238,.07),rgba(36,142,241,.03));pointer-events:none}
.v2ChallengeCopy{grid-area:copy;position:relative;z-index:1;min-width:0}
.v2ChallengeCopy small{display:block;color:#6150dc;font-size:clamp(8.5px,2.5vw,10px);font-weight:900;letter-spacing:.065em}
.v2ChallengeCopy h2{margin:6px 0 5px;font-size:clamp(17px,5.2vw,21px);line-height:1.18;font-weight:900;color:#17213c}
.v2ChallengeCopy p{margin:0 0 9px;color:#66718a;font-size:clamp(10.5px,3.2vw,12.5px);line-height:1.42}
.v2ChallengeBar{width:100%;height:9px;border-radius:99px;background:#e9edf6;overflow:hidden}
.v2ChallengeBar i{display:block;height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,#13c77f,#54d995)}
.v2ChallengeCopy em{display:block;margin-top:6px;color:#65708a;font-size:clamp(9px,2.6vw,10.5px);font-style:normal;line-height:1.3}
.v2ChallengeRing{grid-area:ring;position:relative;z-index:1;justify-self:end;width:72px;height:72px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(#39d29b 0 0%,#e8ebf6 0%);box-shadow:inset 0 0 0 9px #fff}
.v2ChallengeRing b{font-size:20px;line-height:1;font-weight:900;color:#4c42d8}
.v2ChallengeRing span{margin-top:3px;color:#65708a;font-size:9px}
.v2ChallengeWin{grid-area:win;position:relative;z-index:1;width:100%;min-width:0;padding:8px 10px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;column-gap:8px;row-gap:1px;text-align:left;color:#17345a;background:linear-gradient(90deg,#eef8ff,#f1fbf6);border:1px solid #e1eef4;border-radius:13px}
.v2ChallengeWin>span{grid-row:1/3;font-size:25px;line-height:1}
.v2ChallengeWin b{font-size:clamp(10px,3vw,11.5px);line-height:1.25;overflow-wrap:anywhere}
.v2ChallengeWin small{grid-column:2;color:#4770c8;font-size:9.5px;line-height:1.2}

.v2ServicesWrap{width:100%;min-width:0;margin:0 auto 16px}
.v2SectionHead{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;margin:0 1px 10px}
.v2SectionHead h2{min-width:0;margin:0;color:#17213c;font-size:clamp(17px,5vw,20px);line-height:1.2;font-weight:900}
.v2SectionHead button{flex:0 0 auto;max-width:48%;padding:3px 0;border:0;background:transparent;color:#5c3bee;font-size:clamp(10px,3vw,12px);font-weight:800;white-space:nowrap;cursor:pointer}
.v2ServiceGrid{width:100%;min-width:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.v2ServiceCard{min-width:0;min-height:132px;padding:13px 11px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;align-items:start;gap:8px 5px;border:0;border-radius:18px;text-align:left;color:var(--v2-ink);box-shadow:0 8px 18px rgba(74,86,136,.07);cursor:pointer;overflow:hidden}
.v2ServiceCard.books{background:linear-gradient(145deg,#edf7ff,#e4f1ff)}
.v2ServiceCard.exams{background:linear-gradient(145deg,#fff2f7,#ffe9f0)}
.v2ServiceCard.english,.v2ServiceCard.lessons{background:linear-gradient(145deg,#effff8,#e3faef)}
.v2ServiceCard.game{background:linear-gradient(145deg,#fff9e9,#fff1d7)}
.v2ServiceCard.gov{background:linear-gradient(145deg,#f4efff,#eeeaff)}
.v2ServiceIcon{grid-column:1;width:40px;height:40px;display:grid;place-items:center;border-radius:13px;background:#fff;box-shadow:0 6px 14px rgba(70,80,130,.07);font-size:21px;line-height:1}
.v2Chevron{grid-column:2;grid-row:1;align-self:center;color:#263251;font-size:22px;line-height:1}
.v2ServiceCopy{grid-column:1/-1;min-width:0;display:grid;align-content:start;gap:4px}
.v2ServiceCopy b{min-width:0;color:#18233e;font-size:clamp(12px,3.8vw,15px);line-height:1.18;font-weight:900;overflow-wrap:anywhere}
.v2ServiceCopy small{color:#68738a;font-size:clamp(9px,2.9vw,11px);line-height:1.34;overflow-wrap:anywhere}
/* Odd final service is compact and spans the width instead of leaving a broken half-row. */
.v2ServiceCard:last-child:nth-child(odd){grid-column:1/-1;min-height:92px;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:1fr;align-items:center;column-gap:10px}
.v2ServiceCard:last-child:nth-child(odd) .v2ServiceIcon{grid-column:1;grid-row:1}
.v2ServiceCard:last-child:nth-child(odd) .v2ServiceCopy{grid-column:2;grid-row:1}
.v2ServiceCard:last-child:nth-child(odd) .v2Chevron{grid-column:3;grid-row:1}

.v2Leaderboard{width:100%;min-width:0;margin:0 auto 14px;padding:13px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;border:1px solid #edf0f7;border-radius:18px;background:#fff;color:var(--v2-ink);box-shadow:0 8px 20px rgba(74,86,136,.06);text-align:left;cursor:pointer}
.v2LeaderIcon{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#5b35ee,#733cf3);font-size:21px}
.v2LeaderCopy{min-width:0;display:grid;gap:3px}.v2LeaderCopy b{font-size:14px;line-height:1.2}.v2LeaderCopy small{color:#65708a;font-size:10px;line-height:1.3}
.v2MiniBars{height:36px;display:flex;align-items:end;gap:4px}.v2MiniBars i{width:8px;border-radius:5px 5px 2px 2px;background:linear-gradient(#8c9cff,#55a9f4)}.v2MiniBars i:nth-child(1){height:18px}.v2MiniBars i:nth-child(2){height:28px}.v2MiniBars i:nth-child(3){height:36px}
.v2LeaderNote{grid-column:1/-1;padding:8px 10px;border:1px solid #e0e4ff;border-radius:11px;background:#f5f6ff;color:#3058b8;font-size:10px;line-height:1.3}

.v2Progress{width:100%;min-width:0;margin:0 auto;padding:12px 10px 13px;border:1px solid #eaf0fb;border-radius:18px;background:#fff;box-shadow:0 8px 20px rgba(74,86,136,.05)}
.v2Progress .v2SectionHead{margin-bottom:9px}
.v2SubjectStrip,.v2SubjectCards{width:100%;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.v2SubjectStrip button,.v2SubjectCards button{min-width:0;padding:9px 4px 8px;border:0;border-radius:13px;background:#f7f9ff;color:#17213c;text-align:center;cursor:pointer;overflow:hidden}
.v2SubjectStrip button:nth-child(1){background:#fff2f5}.v2SubjectStrip button:nth-child(2){background:#effbf7}.v2SubjectStrip button:nth-child(3){background:#fff8e9}.v2SubjectStrip button:nth-child(4){background:#edf6ff}.v2SubjectStrip button:nth-child(5){background:#f4efff}
.v2SubjectStrip b,.v2SubjectCards b{display:block;min-width:0;min-height:22px;margin:0;color:#18233e;font-size:clamp(8.2px,2.65vw,10.5px);line-height:1.12;font-weight:900;white-space:normal;overflow-wrap:anywhere}
.v2SubjectBar{display:block;width:100%;height:5px;margin:8px 0 5px;border-radius:99px;background:#e2e7f1;overflow:hidden}
.v2SubjectBar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#6539ef,#3185ef)}
.v2SubjectStrip small,.v2SubjectCards small{display:block;color:#65708a;font-size:clamp(8px,2.45vw,9.5px);font-weight:700;white-space:nowrap}
.v2ProgressSummary{margin-top:10px;padding:9px;display:grid;grid-template-columns:1fr 1fr;gap:6px;border-radius:13px;background:linear-gradient(90deg,#fbfcff,#f2f8ff)}
.v2ProgressSummary div{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:5px;align-items:center}.v2ProgressSummary div span{grid-row:1/3;font-size:19px}.v2ProgressSummary b{font-size:11px;line-height:1.1}.v2ProgressSummary small{color:#65708a;font-size:9px;line-height:1.2}.v2ProgressSummary p{grid-column:1/-1;margin:0;padding:7px 8px;border-radius:9px;background:#eaf5ff;color:#2f5bb6;font-size:9.5px;font-weight:700;line-height:1.3}

.v2BottomNav{
  position:fixed;
  z-index:90;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(100%,var(--v2-max));
  min-width:0;
  height:calc(64px + env(safe-area-inset-bottom));
  padding:6px 5px calc(6px + env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:center;
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(16px);
  border-top:1px solid #e8edf5;
  box-shadow:0 -8px 22px rgba(55,65,110,.07);
}
.v2BottomNav button{min-width:0;padding:2px 0;border:0;background:transparent;color:#727a8d;display:grid;place-items:center;gap:3px;cursor:pointer;overflow:visible}
.v2BottomNav button>span{position:relative;font-size:20px;line-height:1}.v2BottomNav small{max-width:100%;font-size:clamp(8.5px,2.6vw,10.5px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v2BottomNav button.active{color:#5b35ee}.v2BottomNav button.active>span{transform:scale(1.06)}
.v2NavBadgeWrap{position:relative}

/* Extra-tight phones */
@media(max-width:350px){
  .v2Home{padding-inline:10px}
  .v2Hero{width:calc(100% + 20px);margin-inline:-10px;padding-inline:10px}
  .v2HeroTop{gap:5px}.v2MenuGlyph{width:26px;font-size:23px}.v2Brand{gap:6px}.v2Brand img{width:34px;height:34px}.v2HeroTools{gap:4px}.v2Bell,.v2Avatar{width:31px;height:31px}
  .v2Greeting h1{font-size:19px}.v2Greeting p{font-size:10.5px}.v2Search{height:45px;padding-inline:10px}
  .v2Challenge{padding:13px;grid-template-columns:minmax(0,1fr) 65px;gap:8px}.v2ChallengeRing{width:64px;height:64px;box-shadow:inset 0 0 0 8px #fff}.v2ChallengeRing b{font-size:18px}
  .v2ServiceGrid{gap:8px}.v2ServiceCard{min-height:125px;padding:11px 9px}.v2ServiceIcon{width:36px;height:36px;font-size:19px}.v2ServiceCopy b{font-size:11.5px}.v2ServiceCopy small{font-size:8.7px}
  .v2Progress{padding-inline:7px}.v2SubjectStrip,.v2SubjectCards{gap:3px}.v2SubjectStrip button,.v2SubjectCards button{padding-inline:2px}.v2SubjectStrip b,.v2SubjectCards b{font-size:7.8px}.v2SubjectStrip small,.v2SubjectCards small{font-size:7.5px}
}

/* Larger phones (412-480) get a little more breathing room but keep the same proportions. */
@media(min-width:412px) and (max-width:480px){
  .v2Home{padding-inline:16px}.v2Hero{width:calc(100% + 32px);margin-inline:-16px;padding-inline:16px}.v2ServiceCard{min-height:138px;padding:14px 13px}.v2ServiceIcon{width:43px;height:43px}.v2Progress{padding-inline:12px}
}

/* Desktop/tablet: keep the app centered instead of stretching into a desktop site. */
@media(min-width:481px){
  body{padding:18px 0 24px}
  .appShell:has(.v2Home){border-radius:28px;box-shadow:0 18px 55px rgba(36,49,95,.14)!important;overflow:hidden!important}
  .v2BottomNav{bottom:24px;border:1px solid #e8edf5;border-bottom:0;border-radius:18px 18px 0 0}
}

/* =========================================================
   v36 — dual responsive shell only
   Keep the approved UI design; adjust only viewport fit.
   ========================================================= */

/* Mobile: use almost the full screen width with a small safe gutter. */
@media (max-width: 767px){
  body{padding:0!important;background:#f5f8ff!important}
  .appShell:has(.v2Home){
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .appShell:has(.v2Home)>.content{width:100%!important;max-width:none!important}
  .v2Home{padding-left:8px!important;padding-right:8px!important}
  .v2Hero{
    width:calc(100% + 16px)!important;
    margin-left:-8px!important;
    margin-right:-8px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .v2BottomNav{width:100%!important;max-width:none!important;left:0!important;transform:none!important}
}

/* Small phones: preserve the same design while keeping an edge-safe 6px gutter. */
@media (max-width: 350px){
  .v2Home{padding-left:6px!important;padding-right:6px!important}
  .v2Hero{width:calc(100% + 12px)!important;margin-left:-6px!important;margin-right:-6px!important;padding-left:10px!important;padding-right:10px!important}
}

/* Larger phones must not re-introduce the old 16px outer gutter. */
@media (min-width:412px) and (max-width:767px){
  .v2Home{padding-left:8px!important;padding-right:8px!important}
  .v2Hero{width:calc(100% + 16px)!important;margin-left:-8px!important;margin-right:-8px!important;padding-left:12px!important;padding-right:12px!important}
}

/* Desktop/tablet mode: same visual language, but comfortable on a computer. */
@media (min-width:768px){
  :root{--v2-desktop-max:860px}
  body{padding:22px 18px 30px!important;background:#eef3ff!important}
  .appShell:has(.v2Home){
    width:min(100%,var(--v2-desktop-max))!important;
    max-width:var(--v2-desktop-max)!important;
    margin:0 auto!important;
    border-radius:30px!important;
    box-shadow:0 22px 64px rgba(36,49,95,.15)!important;
    overflow:hidden!important;
  }
  .appShell:has(.v2Home)>.content{width:100%!important;max-width:100%!important}
  .v2Home{padding-left:22px!important;padding-right:22px!important;padding-bottom:100px!important}
  .v2Hero{
    width:calc(100% + 44px)!important;
    margin-left:-22px!important;
    margin-right:-22px!important;
    padding-left:24px!important;
    padding-right:24px!important;
  }
  .v2HeroTop,.v2Greeting,.v2Search{max-width:100%!important}
  .v2Greeting h1{font-size:28px!important}
  .v2Greeting p{font-size:14px!important}
  .v2Search input{font-size:14px!important}

  /* Six existing services become a neat 3×2 desktop grid; content and actions stay unchanged. */
  .v2ServiceGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important}
  .v2ServiceCard{min-height:142px!important}
  .v2ServiceCard:last-child:nth-child(odd){grid-column:auto!important;min-height:142px!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-rows:auto 1fr!important;align-items:start!important}
  .v2ServiceCard:last-child:nth-child(odd) .v2ServiceIcon{grid-column:1!important;grid-row:1!important}
  .v2ServiceCard:last-child:nth-child(odd) .v2ServiceCopy{grid-column:1/-1!important;grid-row:2!important}
  .v2ServiceCard:last-child:nth-child(odd) .v2Chevron{grid-column:2!important;grid-row:1!important}

  .v2BottomNav{
    width:min(100%,var(--v2-desktop-max))!important;
    max-width:var(--v2-desktop-max)!important;
    bottom:0!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
  }
}


/* =========================================================
   v37 — desktop width only
   Mobile and tablet rules above remain unchanged.
   ========================================================= */
@media (min-width:1024px){
  :root{--v2-desktop-max:1120px}
  body{padding:24px 24px 32px!important}
  .appShell:has(.v2Home){
    width:min(calc(100vw - 64px),var(--v2-desktop-max))!important;
    max-width:var(--v2-desktop-max)!important;
  }
  .v2Home{padding-left:28px!important;padding-right:28px!important}
  .v2Hero{
    width:calc(100% + 56px)!important;
    margin-left:-28px!important;
    margin-right:-28px!important;
    padding-left:30px!important;
    padding-right:30px!important;
  }
  .v2BottomNav{
    width:min(calc(100vw - 64px),var(--v2-desktop-max))!important;
    max-width:var(--v2-desktop-max)!important;
  }
}

@media (min-width:1440px){
  :root{--v2-desktop-max:1180px}
}


/* =========================================================
   v38 — desktop edge-to-edge only
   Mobile (<768px) and tablet (768–1023px) remain unchanged.
   ========================================================= */
@media (min-width:1024px){
  body{
    padding:0!important;
    background:#f5f8ff!important;
  }
  .appShell:has(.v2Home){
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    overflow-x:hidden!important;
  }
  .appShell:has(.v2Home)>.content{
    width:100%!important;
    max-width:none!important;
  }
  .v2Home{
    width:100%!important;
    max-width:none!important;
    padding-left:32px!important;
    padding-right:32px!important;
  }
  .v2Hero{
    width:calc(100% + 64px)!important;
    margin-left:-32px!important;
    margin-right:-32px!important;
    padding-left:40px!important;
    padding-right:40px!important;
    border-radius:0 0 30px 30px!important;
  }
  .v2HeroTop,.v2Greeting,.v2Search,
  .v2Challenge,.v2ServicesWrap,.v2Leaderboard,.v2Progress{
    width:100%!important;
    max-width:none!important;
  }
  .v2BottomNav{
    width:100%!important;
    max-width:none!important;
    left:0!important;
    transform:none!important;
    bottom:0!important;
    border-radius:0!important;
  }
}

@media (min-width:1440px){
  .v2Home{padding-left:44px!important;padding-right:44px!important}
  .v2Hero{
    width:calc(100% + 88px)!important;
    margin-left:-44px!important;
    margin-right:-44px!important;
    padding-left:52px!important;
    padding-right:52px!important;
  }
}

/* v39 Grade-8 visual theme — dimensions from v38 remain unchanged */
:root{--v2-purple:#5a36ef;--v2-blue:#087ef1;--v2-ink:#102247;--v2-muted:#5f7091;--v2-bg:#f7faff;--v2-green:#18c889}
body{background:#f6f9ff!important}
.v2Home{background:linear-gradient(180deg,#f8fbff 0%,#fff 56%,#f7faff 100%)!important;color:var(--v2-ink)!important}
.v2Hero{background:radial-gradient(circle at 92% 18%,rgba(67,230,211,.28),transparent 24%),radial-gradient(circle at 6% 92%,rgba(104,59,242,.28),transparent 30%),linear-gradient(128deg,#5b36ef 0%,#1f66ef 52%,#079be9 100%)!important;box-shadow:0 16px 38px rgba(30,86,207,.18)!important}
.v2Hero::before{background:radial-gradient(circle at 78% 8%,rgba(255,255,255,.18),transparent 24%),linear-gradient(150deg,transparent 65%,rgba(44,221,184,.16) 65%,rgba(44,221,184,.16) 100%)!important}
.v2Brand img{background:#fff!important;padding:4px!important;object-fit:contain!important;box-shadow:0 8px 22px rgba(25,41,115,.18)!important}.v2Brand strong{color:#fff!important}.v2Brand small{color:#f0f4ff!important}.v2Bell{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.12)!important}.v2Avatar{box-shadow:0 5px 16px rgba(25,50,125,.18)!important;border:2px solid rgba(255,255,255,.72)!important}.v2Greeting h1{color:#fff!important;text-shadow:0 2px 10px rgba(24,54,140,.12)!important}.v2Greeting p{color:#eaf3ff!important}
.v2DateChip{position:absolute;z-index:3;right:14px;top:73px;display:flex;align-items:center;gap:7px;max-width:126px;padding:6px 9px;border:1px solid rgba(255,255,255,.28);border-radius:14px;background:rgba(255,255,255,.12);backdrop-filter:blur(10px);color:#fff;box-shadow:0 6px 18px rgba(19,55,146,.08)}
.v2DateIcon{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:rgba(255,255,255,.16);font-size:15px;line-height:1}.v2DateChip>span:last-child{min-width:0;display:grid;line-height:1.08}.v2DateChip b{font-size:10px;font-weight:900}.v2DateChip small{margin-top:2px;font-size:7.8px;color:#eef5ff;white-space:nowrap}
@media(max-width:350px){.v2DateChip{right:10px;top:76px;max-width:102px;padding:5px 7px;gap:5px}.v2DateIcon{width:22px;height:22px;font-size:13px}.v2DateChip b{font-size:8.5px}.v2DateChip small{font-size:6.7px}.v2Greeting{padding-right:102px}}
@media(min-width:351px) and (max-width:767px){.v2Greeting{padding-right:122px}}
@media(min-width:768px){.v2DateChip{right:24px;top:76px;max-width:145px;padding:7px 10px}.v2DateChip b{font-size:11px}.v2DateChip small{font-size:8.5px}.v2Greeting{padding-right:150px}}
@media(min-width:1024px){.v2DateChip{right:40px}}@media(min-width:1440px){.v2DateChip{right:52px}}
.v2Search{background:rgba(255,255,255,.98)!important;border-color:rgba(211,225,248,.95)!important;box-shadow:0 14px 32px rgba(35,70,151,.15)!important}.v2Search>span{color:#0c2653!important}.v2Search input{color:#20355b!important;font-weight:500}.v2Search input::placeholder{color:#6f7e9c!important}.v2Search button{color:#233b70!important}
.v2Challenge{background:linear-gradient(180deg,#fff 0%,#fff 78%,#fbfdff 100%)!important;border-color:#e5ecf7!important;box-shadow:0 12px 30px rgba(58,79,136,.08)!important}.v2Challenge::after{background:radial-gradient(circle,rgba(93,69,238,.08),rgba(31,142,241,.02) 68%,transparent 70%)!important}.v2ChallengeCopy small{color:#5639ec!important}.v2ChallengeCopy h2{color:#0f2144!important}.v2ChallengeCopy p,.v2ChallengeCopy em{color:#61708d!important}.v2ChallengeBar{background:#e4eaf4!important}.v2ChallengeBar i{background:linear-gradient(90deg,#0fc880,#44daa0)!important;box-shadow:0 2px 8px rgba(24,200,137,.24)}.v2ChallengeRing{background:conic-gradient(#16c88d 0 0%,#e9eef8 0%);box-shadow:inset 0 0 0 9px #fff,0 7px 20px rgba(39,77,163,.07)!important}.v2ChallengeRing b{color:#4e32e4!important}.v2ChallengeWin{background:linear-gradient(90deg,#eefaff,#edfcf5)!important;border-color:#d4efe6!important;color:#12264a!important}
.v2SectionHead h2{color:#102247!important}.v2SectionHead button{color:#5638ef!important}.v2ServiceCard{border:1px solid rgba(222,230,244,.68)!important;box-shadow:0 9px 22px rgba(51,74,126,.07)!important;transition:transform .18s ease,box-shadow .18s ease!important}.v2ServiceCard:hover{transform:translateY(-2px)!important;box-shadow:0 14px 26px rgba(51,74,126,.11)!important}.v2ServiceCard.books{background:linear-gradient(145deg,#eef8ff,#dff0ff)!important}.v2ServiceCard.exams{background:linear-gradient(145deg,#fff4f7,#ffe7ed)!important}.v2ServiceCard.english{background:linear-gradient(145deg,#f0fff9,#e0faef)!important}.v2ServiceCard.game{background:linear-gradient(145deg,#fff9ec,#fff0cf)!important}.v2ServiceCard.gov{background:linear-gradient(145deg,#f6f2ff,#ebe6ff)!important}.v2ServiceCard.lessons{background:linear-gradient(145deg,#edfff9,#dff8ed)!important}.v2ServiceIcon{border:1px solid rgba(227,234,246,.9)!important;background:rgba(255,255,255,.93)!important;box-shadow:0 6px 15px rgba(45,66,120,.08)!important}.v2ServiceCopy b{color:#102247!important}.v2ServiceCopy small{color:#5d6e8d!important}.v2Chevron{color:#102247!important;font-weight:900}
.v2Progress{background:rgba(255,255,255,.96)!important;border-color:#e6edf8!important;box-shadow:0 9px 24px rgba(57,77,132,.055)!important}.v2SubjectStrip button,.v2SubjectCards button{border:1px solid rgba(224,231,243,.72)!important;box-shadow:0 6px 14px rgba(48,71,122,.045)!important}.v2SubjectStrip button:nth-child(1){background:linear-gradient(150deg,#fff3f5,#ffe5eb)!important}.v2SubjectStrip button:nth-child(2){background:linear-gradient(150deg,#effdf8,#dcf8ed)!important}.v2SubjectStrip button:nth-child(3){background:linear-gradient(150deg,#fff9ed,#fff0cb)!important}.v2SubjectStrip button:nth-child(4){background:linear-gradient(150deg,#edf7ff,#dfefff)!important}.v2SubjectStrip button:nth-child(5){background:linear-gradient(150deg,#f6f1ff,#eae3ff)!important}
.v2SubjectIcon{display:grid;place-items:center;min-height:24px;margin:0 auto 4px;color:#0a62d8;font-size:21px;font-weight:900;line-height:1}.v2SubjectStrip button:nth-child(1) .v2SubjectIcon{color:#f04465}.v2SubjectStrip button:nth-child(2) .v2SubjectIcon{color:#08ad7d}.v2SubjectStrip button:nth-child(3) .v2SubjectIcon{color:#ef9f00}.v2SubjectStrip button:nth-child(4) .v2SubjectIcon{color:#1689e9}.v2SubjectStrip button:nth-child(5) .v2SubjectIcon{color:#6d35e8;font-size:12px;letter-spacing:-3px}.v2SubjectStrip b,.v2SubjectCards b{color:#12254a!important}.v2SubjectStrip small,.v2SubjectCards small{color:#536889!important}.v2SubjectBar{background:#e2e9f3!important}.v2SubjectStrip button:nth-child(1) .v2SubjectBar i{background:linear-gradient(90deg,#ff4269,#f26a83)!important}.v2SubjectStrip button:nth-child(2) .v2SubjectBar i{background:linear-gradient(90deg,#02b981,#29cf9c)!important}.v2SubjectStrip button:nth-child(3) .v2SubjectBar i{background:linear-gradient(90deg,#f2a500,#ffc337)!important}.v2SubjectStrip button:nth-child(4) .v2SubjectBar i{background:linear-gradient(90deg,#0b83ee,#3da8ff)!important}.v2SubjectStrip button:nth-child(5) .v2SubjectBar i{background:linear-gradient(90deg,#6a35e7,#9d5df4)!important}
.v2BottomNav{background:rgba(255,255,255,.985)!important;border-top-color:#e2e9f4!important;box-shadow:0 -10px 28px rgba(41,63,112,.08)!important}.v2BottomNav button{color:#5d6b84!important}.v2BottomNav button>span{filter:grayscale(.88) saturate(.35);opacity:.9}.v2BottomNav button.active{color:#075fe8!important}.v2BottomNav button.active>span{filter:none;opacity:1}.v2BottomNav button.active small{font-weight:900!important}.v2BottomNav button.active::after{content:"";display:block;width:18px;height:3px;margin-top:-1px;border-radius:99px;background:#4a35ef}.v2Bell i,.v2NavBadgeWrap i{background:#ff4f5f!important;box-shadow:0 3px 8px rgba(255,79,95,.25)!important}


/* =========================================================
   v40 — finish the approved Grade-8 visual theme only.
   Keep all v38/v39 sizing and functionality unchanged.
   ========================================================= */

/* Top-right learning illustration from the approved mobile mockup. */
.v2HeroDecor{
  position:absolute;z-index:2;right:10px;top:116px;width:94px;height:62px;
  pointer-events:none;display:flex;align-items:flex-end;justify-content:flex-end;
}
.v2BookStack{position:relative;width:82px;height:56px;filter:drop-shadow(0 7px 12px rgba(22,70,142,.16))}
.v2BookStack .book{position:absolute;right:0;height:16px;border-radius:5px 7px 7px 5px;color:#fff;font-size:7.5px;line-height:16px;font-weight:900;text-align:center;letter-spacing:.01em;box-shadow:0 2px 5px rgba(28,60,120,.13)}
.v2BookStack .b1{bottom:32px;width:64px;background:linear-gradient(90deg,#ff718a,#ef4d6b)}
.v2BookStack .b2{bottom:16px;width:72px;background:linear-gradient(90deg,#ffad4c,#ff8841)}
.v2BookStack .b3{bottom:0;width:80px;background:linear-gradient(90deg,#19c9ac,#13a9bb)}
.v2Pencils{position:absolute;right:10px;bottom:46px;font-size:17px;font-style:normal;transform:rotate(-8deg)}
.v2HeroDecor>em{position:absolute;right:-2px;top:-21px;width:83px;color:#fff;font-family:"Segoe Print","Comic Sans MS",cursive;font-size:10px;font-weight:700;line-height:1.08;text-align:right;transform:rotate(-5deg);text-shadow:0 2px 6px rgba(8,65,128,.18)}

/* Keep the same header height; simply leave a visual pocket for the illustration. */
@media (min-width:351px) and (max-width:767px){
  .v2Search{width:calc(100% - 104px)!important;margin-left:0!important;margin-right:auto!important}
}
@media (max-width:350px){
  .v2HeroDecor{right:7px;top:119px;width:76px;transform:scale(.82);transform-origin:right top}
  .v2HeroDecor>em{display:none}
  .v2Search{width:calc(100% - 76px)!important;margin-left:0!important;margin-right:auto!important}
}
@media (min-width:768px){
  .v2HeroDecor{right:26px;top:105px;width:120px;height:72px;transform:scale(1.12);transform-origin:right top}
  .v2Search{width:calc(100% - 148px)!important;margin-left:0!important;margin-right:auto!important}
}
@media (min-width:1024px){
  .v2HeroDecor{right:46px;top:102px;transform:scale(1.2);transform-origin:right top}
  .v2Search{width:calc(100% - 180px)!important}
}
@media (min-width:1440px){.v2HeroDecor{right:60px}}

/* More vivid Grade-8 card palette while preserving the same layout. */
.v2ServiceCard.books{background:linear-gradient(145deg,#e1f4ff,#c9eaff)!important;border-color:#cbe8fb!important}
.v2ServiceCard.exams{background:linear-gradient(145deg,#ffeaf0,#ffd6e1)!important;border-color:#ffd5df!important}
.v2ServiceCard.english{background:linear-gradient(145deg,#e5fff2,#c9f4df)!important;border-color:#cef0df!important}
.v2ServiceCard.game{background:linear-gradient(145deg,#fff6d8,#ffe6a8)!important;border-color:#f7e2ae!important}
.v2ServiceCard.gov{background:linear-gradient(145deg,#f0eaff,#ddd2ff)!important;border-color:#ddd3fa!important}
.v2ServiceCard.lessons{background:linear-gradient(145deg,#e3fff3,#c9f1df)!important;border-color:#caeddd!important}
.v2ServiceIcon{background:#fff!important;border:0!important;box-shadow:0 7px 17px rgba(39,65,126,.11)!important}
.v2ServiceCard.books .v2ServiceIcon{box-shadow:0 7px 18px rgba(27,128,240,.18)!important}
.v2ServiceCard.exams .v2ServiceIcon{box-shadow:0 7px 18px rgba(239,76,111,.17)!important}
.v2ServiceCard.english .v2ServiceIcon,.v2ServiceCard.lessons .v2ServiceIcon{box-shadow:0 7px 18px rgba(16,173,119,.17)!important}
.v2ServiceCard.game .v2ServiceIcon{box-shadow:0 7px 18px rgba(232,159,19,.18)!important}
.v2ServiceCard.gov .v2ServiceIcon{box-shadow:0 7px 18px rgba(101,67,224,.17)!important}

/* Real subject cover images instead of generic glyphs. */
.v2SubjectIcon{width:34px!important;height:34px!important;min-height:34px!important;margin:0 auto 5px!important;border-radius:10px!important;overflow:hidden!important;background:#fff!important;box-shadow:0 5px 12px rgba(42,64,118,.11)!important;padding:0!important}
.v2SubjectThumb{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:10px!important}
.v2SubjectStrip button:nth-child(1){background:linear-gradient(150deg,#ffecef,#ffdce4)!important}
.v2SubjectStrip button:nth-child(2){background:linear-gradient(150deg,#e7fbf3,#cef3e2)!important}
.v2SubjectStrip button:nth-child(3){background:linear-gradient(150deg,#fff5db,#ffe7aa)!important}
.v2SubjectStrip button:nth-child(4){background:linear-gradient(150deg,#e5f3ff,#cfe7ff)!important}
.v2SubjectStrip button:nth-child(5){background:linear-gradient(150deg,#f0e9ff,#dfd1ff)!important}

/* Brighter progress accents. */
.v2ChallengeBar i{background:linear-gradient(90deg,#08bd7a,#29dc9b)!important}
.v2ChallengeRing{background:conic-gradient(#00c88c 0 0%,#e8edf7 0%)}
.v2ChallengeWin{background:linear-gradient(90deg,#e7f9ff,#e6fbf1)!important;border-color:#c9ecdf!important}

/* Bottom navigation treatment from the approved reference. */
.v2BottomNav{
  background:#fff!important;
  border-top:1px solid #e0e8f3!important;
  border-radius:24px 24px 0 0!important;
  box-shadow:0 -12px 30px rgba(35,57,108,.12)!important;
  padding-top:7px!important;
}
.v2BottomNav button{color:#5c687d!important;gap:4px!important}
.v2BottomNav button>span{font-size:22px!important;filter:grayscale(.92) saturate(.2)!important;opacity:.92!important}
.v2BottomNav button.active{color:#075fe8!important}
.v2BottomNav button.active>span{filter:none!important;opacity:1!important;transform:scale(1.08)!important}
.v2BottomNav button.active::after{width:22px!important;height:3px!important;background:#3f36f1!important}

/* Student avatar and date chip read more clearly at a glance. */
.v2Avatar{font-size:18px!important;background:#fff!important}
.v2DateIcon{background:rgba(255,255,255,.2)!important}
.v2DateChip{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.34)!important;box-shadow:0 8px 18px rgba(13,57,140,.12)!important}

/* v41 — SUBJECT CARDS ONLY: textbook-cover presentation */
.v2Progress .v2SubjectStrip.v2SubjectCards{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
}
@media(min-width:640px){
  .v2Progress .v2SubjectStrip.v2SubjectCards{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
.v2Progress .v2SubjectStrip.v2SubjectCards button{
  min-height:148px!important;
  padding:10px 5px 9px!important;
  border-radius:16px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
}
.v2Progress .v2SubjectStrip.v2SubjectCards .v2SubjectIcon{
  width:58px!important;
  height:76px!important;
  min-height:76px!important;
  margin:0 auto 7px!important;
  border-radius:9px!important;
  overflow:hidden!important;
  background:#fff!important;
  box-shadow:0 6px 14px rgba(36,55,102,.16)!important;
  padding:0!important;
}
.v2Progress .v2SubjectStrip.v2SubjectCards .v2SubjectThumb{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:9px!important;
}
.v2Progress .v2SubjectStrip.v2SubjectCards b{
  min-height:auto!important;
  margin:0 0 7px!important;
  font-size:12px!important;
  line-height:1.1!important;
  font-weight:900!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:100%!important;
}
.v2Progress .v2SubjectStrip.v2SubjectCards .v2SubjectBar{
  width:100%!important;
  height:7px!important;
  margin:0 0 6px!important;
}
.v2Progress .v2SubjectStrip.v2SubjectCards small{
  font-size:10px!important;
  line-height:1!important;
  font-weight:800!important;
}

@media(max-width:480px){
  .v2Progress .v2SubjectStrip.v2SubjectCards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .v2Progress .v2SubjectStrip.v2SubjectCards button{min-height:130px!important;padding:8px 3px 7px!important;border-radius:14px!important}
  .v2Progress .v2SubjectStrip.v2SubjectCards .v2SubjectIcon{width:46px!important;height:61px!important;min-height:61px!important;margin-bottom:6px!important;border-radius:8px!important}
  .v2Progress .v2SubjectStrip.v2SubjectCards .v2SubjectThumb{border-radius:8px!important}
  .v2Progress .v2SubjectStrip.v2SubjectCards b{font-size:9.5px!important;margin-bottom:6px!important}
  .v2Progress .v2SubjectStrip.v2SubjectCards .v2SubjectBar{height:6px!important;margin-bottom:5px!important}
  .v2Progress .v2SubjectStrip.v2SubjectCards small{font-size:8.5px!important}
}

@media(min-width:1024px){
  .v2Progress .v2SubjectStrip.v2SubjectCards{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
  .v2Progress .v2SubjectStrip.v2SubjectCards button{min-height:168px!important;padding:12px 8px 10px!important;border-radius:18px!important}
  .v2Progress .v2SubjectStrip.v2SubjectCards .v2SubjectIcon{width:68px!important;height:88px!important;min-height:88px!important;margin-bottom:8px!important}
  .v2Progress .v2SubjectStrip.v2SubjectCards b{font-size:13px!important}
  .v2Progress .v2SubjectStrip.v2SubjectCards small{font-size:10.5px!important}
}

/* v42-fix5: Home subject section removed by request */
.v2Home > .v2Progress{display:none!important}


/* v43 — only two requested refinements: bottom dock mask + 3 background choices */
.v2BottomNav{isolation:isolate;overflow:visible!important}
:root[data-guul-theme="soft"]{--guul-page-bg:#fffdf8;--guul-page-bg-2:#f8fbff}
:root[data-guul-theme="mint"]{--guul-page-bg:#f2fbf7;--guul-page-bg-2:#f8fffc}
:root[data-guul-theme="lavender"]{--guul-page-bg:#f3f5ff;--guul-page-bg-2:#faf9ff}
html[data-guul-theme] body:has(.v2Home){background:var(--guul-page-bg)!important}
html[data-guul-theme] .appShell:has(.v2Home),
html[data-guul-theme] .appShell:has(.v2Home)>.content{background:var(--guul-page-bg)!important}
html[data-guul-theme] .v2Home{background:linear-gradient(180deg,var(--guul-page-bg-2) 0%,var(--guul-page-bg) 48%,var(--guul-page-bg-2) 100%)!important}

.v2ThemeChooser{
  width:min(220px,62vw);
  margin:8px auto 8px;
  padding:5px 10px;
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:14px;
  border:1px solid rgba(219,226,240,.86);
  border-radius:999px;
  background:rgba(255,255,255,.78);
  box-shadow:0 7px 20px rgba(42,62,108,.07);
  backdrop-filter:blur(12px);
}
.v2ThemeChooser button{
  appearance:none;
  width:24px;
  height:24px;
  padding:0;
  border:3px solid #fff;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 0 0 1px #dbe2ef,0 4px 10px rgba(40,58,104,.13);
  transition:transform .16s ease,box-shadow .16s ease;
}
.v2ThemeChooser button.themeSoft{background:linear-gradient(135deg,#fffdf8,#f2f6ff)}
.v2ThemeChooser button.themeMint{background:linear-gradient(135deg,#dff8ec,#f4fff9)}
.v2ThemeChooser button.themeLavender{background:linear-gradient(135deg,#e5e8ff,#f7f1ff)}
.v2ThemeChooser button.active{transform:scale(1.16);box-shadow:0 0 0 2px #6544ee,0 5px 13px rgba(74,53,239,.2)}
.v2ThemeChooser button:focus-visible{outline:3px solid rgba(74,53,239,.26);outline-offset:3px}

@media(max-width:767px){
  .v2BottomNav{bottom:0!important}
  .v2Home{padding-bottom:calc(86px + env(safe-area-inset-bottom))!important}
  .v2BottomNav::before{
    content:"";
    position:absolute;
    z-index:-1;
    left:0;
    right:0;
    top:18px;
    bottom:calc(-18px - env(safe-area-inset-bottom));
    background:#fff;
  }
  .v2ThemeChooser{width:min(190px,58vw);margin-top:7px;margin-bottom:7px;padding:4px 9px}
  .v2ThemeChooser button{width:22px;height:22px}
}


/* v50 — ONLY the page background changes with the 3 theme buttons.
   All service cards, icons, text colors, challenge/search cards and bottom navigation keep the approved original design. */
:root[data-guul-theme="soft"]{
  --guul-page-bg:#fff5df;
  --guul-page-bg-2:#fffaf0;
}
:root[data-guul-theme="lavender"]{
  --guul-page-bg:#eee8ff;
  --guul-page-bg-2:#f8f4ff;
}
:root[data-guul-theme="mint"]{
  --guul-page-bg:#e7fff4;
  --guul-page-bg-2:#f5fffb;
}
html[data-guul-theme] body:has(.v2Home),
html[data-guul-theme] .appShell:has(.v2Home),
html[data-guul-theme] .appShell:has(.v2Home)>.content{
  background:var(--guul-page-bg)!important;
}
html[data-guul-theme] .v2Home{
  background:linear-gradient(180deg,var(--guul-page-bg-2) 0%,var(--guul-page-bg) 48%,var(--guul-page-bg-2) 100%)!important;
}
/* Theme-picker previews: warm ivory, mint, lavender. */
.v2ThemeChooser button.themeSoft{background:#fff1cd!important}
.v2ThemeChooser button.themeMint{background:#c9f6e1!important}
.v2ThemeChooser button.themeLavender{background:#ded7ff!important}
/* Keep the approved header layout (menu icon hidden). */
.v2MenuGlyph{display:none!important}
.v2HeroTop{grid-template-columns:minmax(0,1fr) auto!important}
.v2Avatar.isEmoji{font-size:18px!important}
/* At 100%, use a fully green disc and move the text slightly upward. */
.v2ChallengeRing.isFull{
  background:linear-gradient(145deg,#35d996 0%,#20c981 58%,#12b970 100%)!important;
  box-shadow:0 9px 23px rgba(20,185,111,.22),0 0 0 8px rgba(43,211,140,.10)!important;
}
.v2ChallengeRing.isFull b,
.v2ChallengeRing.isFull span{
  display:block!important;
  position:relative!important;
  top:-4px!important;
  transform:none!important;
}
.v2ChallengeRing.isFull b{
  color:#087548!important;
  font-size:20px!important;
  line-height:1!important;
  margin:0!important;
}
.v2ChallengeRing.isFull span{
  color:#0b7047!important;
  font-weight:800!important;
  margin-top:2px!important;
}

/* v104: home avatar + progress ring polish */
.v2ChallengeRing{
  isolation:isolate;
  transition:background .22s linear,transform .22s ease,box-shadow .22s ease!important;
  box-shadow:inset 0 0 0 9px #fff,0 9px 24px rgba(0,160,112,.13),0 0 0 1px rgba(16,200,141,.08)!important;
}
.v2ChallengeRing::before{
  content:"";position:absolute;left:50%;top:2px;transform:translateX(-50%);
  width:8px;height:8px;border-radius:50%;background:#10c98d;
  box-shadow:0 0 0 4px rgba(16,201,141,.14),0 3px 8px rgba(0,126,86,.22);z-index:3;
}
.v2ChallengeRing::after{
  content:"";position:absolute;inset:11px;border-radius:50%;
  background:radial-gradient(circle at 45% 35%,#fff 0,#fff 58%,#f7fffb 100%);z-index:-1;
}
.v2ChallengeRing b{color:#10a977!important;font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.v2ChallengeRing span{color:#60758a!important;font-weight:800}
.v2ChallengeRing.isUpdating{transform:scale(1.04)}
.v2Avatar{overflow:hidden!important;background:#fff!important;color:#5b48e7!important}
.v2Avatar.hasPhoto img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.v2Avatar.isEmoji{font-size:19px!important;line-height:1}
@media(max-width:520px){.v2ChallengeRing::before{width:7px;height:7px;top:2px}.v2ChallengeRing::after{inset:10px}}