/* Fast system-font first paint; Urdu uses Noto Nastaliq Urdu when its optional font loads. */
:root{--ink:#262343;--muted:#77758f;--purple:#6859d9;--lav:#f1eeff;--bg:#fbfaff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',system-ui,sans-serif}button,a{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #ffb42d;outline-offset:4px}a{text-decoration:none;color:inherit}.app{max-width:1160px;margin:auto;padding:0 34px}header{height:94px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:10px;align-items:center;font:900 25px 'Nunito',sans-serif;letter-spacing:-1.2px;line-height:1}.brandIcon{background:#6d5ce7;color:white;width:42px;height:42px;border-radius:15px;display:grid;place-items:center;font-size:30px;transform:rotate(-8deg)}.brandAccent{color:#7868ea}.brand small{display:block;letter-spacing:2.2px;font:800 8px 'DM Sans';margin-top:7px;color:#a29fbd}.headerRight{display:flex;align-items:center;gap:12px}.headerPill{background:white;border:1px solid #efedf8;padding:11px 17px;border-radius:100px;color:#716d89;font-size:12px;font-weight:700}.install{border:0;background:#6d5ce7;color:white;padding:12px 18px;border-radius:12px;font-weight:800}.hero{margin-top:18px;min-height:400px;border-radius:31px;background:#edeaff;position:relative;overflow:hidden;display:flex;align-items:center;padding:54px 65px}.heroText{max-width:530px;position:relative;z-index:2}.eyebrow{display:inline-block;font-weight:900;font-size:11px;letter-spacing:2px;color:#7565e0}.hero h1{font:900 clamp(43px,5.7vw,74px)/1.06 'Nunito',sans-serif;letter-spacing:-2.8px;margin:20px 0 18px}.hero h1 em{font-style:normal;color:#7867e5}.hero p{color:#77738d;line-height:1.75;font-size:15px;max-width:400px}.heroActions{display:flex;align-items:center;gap:19px;margin-top:28px}.primary{border:0;border-radius:13px;background:#6e5de3;color:white;display:inline-flex;align-items:center;justify-content:center;gap:26px;padding:15px 25px;font-weight:800;box-shadow:0 7px 0 #d9d1fb;transition:transform .15s}.primary:hover{transform:translateY(-2px)}.heroNote{font-size:11px;color:#8b86a5;font-weight:700}.heroArt{width:360px;height:340px;position:absolute;right:55px;top:30px}.orbit{position:absolute;border:2px dashed #d2cafb;border-radius:50%;inset:15px}.orbit2{inset:52px;border-style:solid;border-color:#ddd6fb}.bigSmile{position:absolute;inset:80px;display:grid;place-items:center;font-size:142px;filter:drop-shadow(0 15px 9px #b9a7f15e);transform:rotate(-8deg)}.floating{position:absolute;z-index:2;width:70px;height:70px;border-radius:22px;background:white;display:grid;place-items:center;font-size:34px;box-shadow:0 12px 24px #9386cb35}.f1{left:5px;top:20px;transform:rotate(-13deg)}.f2{right:0;top:50px;transform:rotate(12deg)}.f3{bottom:8px;left:50px;transform:rotate(10deg)}.spark{position:absolute;color:#ffb936;font-size:30px}.s1{right:25px;bottom:28px}.s2{left:22px;top:180px;color:#b3a7f5}.gradesSection,.subjectsSection{padding-top:68px}.sectionHeading{display:flex;align-items:end;justify-content:space-between;margin-bottom:26px}.purple{color:#7866df}.sectionHeading h2{font:900 30px 'Nunito';letter-spacing:-.8px;margin:9px 0}.sectionHeading p{margin:0;color:#8a879e;font-size:13px}.tinyHint{font-size:11px;color:#9b96af;font-weight:700}.gradeGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.grade{background:white;border:2px solid #efedf8;border-radius:22px;min-height:163px;padding:22px 12px;text-align:center;transition:.2s;position:relative}.grade:hover,.grade.selected{border-color:#8d7cf2;transform:translateY(-3px);box-shadow:0 10px 25px #6754c315}.grade.selected:after{content:'✓';position:absolute;right:12px;top:10px;background:#7363e8;color:white;border-radius:50%;width:23px;height:23px;display:grid;place-items:center;font-size:12px}.gradeIcon{font-size:35px;margin-bottom:10px}.gradeName{font:900 18px 'Nunito'}.gradeTag{font-size:11px;color:#9993ad;margin-top:5px}.subjectGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.subject{border:1px solid #eeebf5;background:white;border-radius:21px;padding:23px;display:flex;align-items:center;gap:16px;text-align:left;transition:.2s;min-height:111px}.subject:hover{transform:translateY(-3px);box-shadow:0 10px 22px #6154b417;border-color:#cfc6fc}.subject:disabled{opacity:.55;cursor:not-allowed;transform:none}.subjectIcon{width:62px;height:62px;display:grid;place-items:center;border-radius:18px;font-size:31px;flex-shrink:0}.subjectName{font:900 19px 'Nunito';display:block}.subjectDetail{font-size:11px;color:#9893aa;display:block;margin-top:5px}.subjectArrow{margin-left:auto;color:#a6a0bd;font-size:22px}.bottomBanner{background:#fff2d9;border-radius:23px;display:flex;gap:20px;align-items:center;padding:25px 34px;margin:66px 0}.bannerEmoji{font-size:42px}.bottomBanner h3{font:900 19px 'Nunito';margin:0 0 5px}.bottomBanner p{font-size:12px;line-height:1.6;color:#827966;margin:0}.bannerDoodle{font-size:26px;color:#e8b859;margin-left:auto;white-space:nowrap}footer{border-top:1px solid #eae7f4;padding:27px 0 35px;display:flex;justify-content:space-between;color:#827b9b;font-size:11px;font-weight:800}footer span{font-weight:500}.quizScreen,.resultScreen{max-width:750px;margin:20px auto 90px}.quizTop{display:flex;justify-content:space-between;align-items:center;margin:20px 0;color:#85809c;font-size:13px;font-weight:800}.back{border:0;background:transparent;color:#7567db;font-weight:800;padding:10px 0}.quizCard,.resultCard{background:white;border:1px solid #ece9f7;border-radius:30px;padding:40px;box-shadow:0 18px 55px #7770ac13;text-align:center}.quizProgressTop{display:flex;justify-content:space-between;font-size:11px;font-weight:900;color:#8b83ad;letter-spacing:1px}.progress{height:10px;background:#f0edfb;border-radius:20px;overflow:hidden;margin:17px 0 26px}.progress div{height:100%;width:0;background:#8b7af0;border-radius:20px;transition:width .3s}.quizEmoji{font-size:48px}.quizCard h2{font:900 clamp(23px,4vw,34px)/1.4 'Nunito';margin:15px auto 27px;max-width:580px}.answers{display:grid;gap:12px;max-width:540px;margin:auto}.answer{background:#faf9ff;border:2px solid #eeeafa;border-radius:15px;padding:17px 20px;font-weight:800;color:#423d62;text-align:left;transition:.12s}.answer:hover:not(:disabled){border-color:#9a8bf4;background:#f5f2ff}.answer:disabled{cursor:default}.answer.correct{background:#e8f9ed;border-color:#55c783;color:#227947}.answer.wrong{background:#fff0f0;border-color:#ef8c94;color:#a74c55}.feedback{min-height:33px;margin-top:19px;font-weight:900}.feedback.good{color:#25935a}.feedback.bad{color:#bd6670}.nextBtn{margin-top:10px}.resultCard{padding:55px 30px}.resultEmoji{font-size:80px}.resultCard h2{font:900 39px 'Nunito';margin:12px 0}.resultCard p{color:#8d87a3}.resultScore{font:900 50px 'Nunito';color:#7462e5;margin:20px}.resultActions{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.secondary{border:2px solid #e7e1fc;background:white;color:#7160d8;border-radius:13px;padding:15px 20px;font-weight:800}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#302c51;color:white;border-radius:13px;padding:12px 18px;display:none;z-index:10;font-size:13px}[hidden]{display:none!important}[dir=rtl]{direction:rtl}#questionText[dir=rtl],.answer[dir=rtl]{font-family:system-ui,'Noto Nastaliq Urdu',sans-serif}@media(max-width:800px){.hero{padding:40px}.heroArt{right:-85px;opacity:.45}.heroText{max-width:440px}.gradeGrid{grid-template-columns:repeat(5,1fr);gap:8px}.grade{min-height:130px;padding:16px 4px}.gradeName{font-size:15px}.gradeIcon{font-size:28px}.subjectGrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.app{padding:0 17px}header{height:75px}.brand{font-size:21px}.brandIcon{width:36px;height:36px}.headerPill{display:none}.install{font-size:11px;padding:10px}.hero{margin-top:5px;min-height:360px;padding:34px 26px;border-radius:23px}.hero h1{font-size:45px}.hero p{font-size:13px;max-width:280px}.heroArt{right:-165px;top:50px;opacity:.22}.heroActions{align-items:flex-start;flex-direction:column;gap:15px}.gradesSection,.subjectsSection{padding-top:45px}.sectionHeading h2{font-size:24px}.tinyHint{display:none}.gradeGrid{grid-template-columns:repeat(3,1fr);gap:10px}.grade{min-height:135px}.gradeIcon{font-size:31px}.subjectGrid{grid-template-columns:1fr;gap:11px}.subject{min-height:86px;padding:15px}.subjectIcon{width:52px;height:52px;font-size:28px}.bottomBanner{margin:44px 0;padding:20px}.bannerDoodle{display:none}footer{flex-wrap:wrap;gap:12px}.quizCard,.resultCard{padding:24px 16px}.quizScreen{margin-top:0}.quizTop{font-size:11px}.answer{padding:16px}.resultCard h2{font-size:29px}}

.gradeGrid{grid-template-columns:repeat(4,minmax(0,1fr))}.plansSection{padding:65px 0 50px}.planGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.plan{border:2px solid #e8e4f8;border-radius:22px;padding:28px;background:#fff}.plan h3{font-size:21px}.plan strong{font-size:26px;color:#6655cc}.plan p{color:#66627b;line-height:1.65}.planTag{display:inline-block;background:#eaf9ef;border-radius:50px;padding:8px 13px;color:#27824c;font-weight:700}.plan.premium{background:#f5f1ff;border-color:#d9cbff}.plan small{display:block;margin-top:12px;color:#777}.headerRight{gap:9px}@media(max-width:800px){.gradeGrid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:560px){.gradeGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.planGrid{grid-template-columns:1fr}.plansSection{padding:45px 0}.plan{padding:20px}.headerRight .headerPill{display:none}}

.modeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:25px}.modeChoice{border:2px solid #ece7ff;border-radius:22px;background:#fff;padding:25px 16px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:8px;color:#29244b}.modeChoice:hover{border-color:#7662ef;background:#f9f7ff;transform:translateY(-2px)}.modeEmoji{font-size:36px}.modeChoice strong{font-size:19px}.modeChoice small{color:#766e8d}.modeStatus{text-align:center;font-weight:800;color:#6e5de3;margin:12px}.accountDialog{border:0;border-radius:24px;padding:28px;width:min(440px,92vw);box-shadow:0 20px 70px #29244b44}.accountDialog::backdrop{background:#20194499}.accountDialog form{display:grid;gap:13px}.accountDialog label{display:grid;gap:5px;font-weight:700}.accountDialog input{border:2px solid #ddd8fa;border-radius:12px;padding:13px;font:inherit;width:100%}.authActions{display:flex;flex-wrap:wrap;gap:8px}.authActions button{cursor:pointer}.accountDialog small{color:#665e7c}.accountDialog #authError{color:#7b3fc1;font-size:14px}@media(max-width:540px){.modeGrid{grid-template-columns:1fr}}

.googleLogin{display:block;width:100%;margin:14px 0;padding:13px 16px;background:#fff;color:#25213c;border:2px solid #dcd7f5;border-radius:14px;font:inherit;font-weight:800;cursor:pointer}.googleLogin:hover{background:#f6f3ff}.googleLogin[hidden]{display:none}

/* BrightBuds 6 · welcome, account, game controls */
.splash{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:linear-gradient(135deg,#6958db,#a06af5 55%,#e49ed8);color:white;transition:opacity .5s ease,visibility .5s ease}.splash.hide{opacity:0;visibility:hidden}.splashInner{text-align:center;animation:popIntro .85s cubic-bezier(.2,.9,.3,1.2) both}.splashMark{width:105px;height:105px;display:grid;place-items:center;margin:0 auto 16px;border-radius:30px;background:white;color:#7559e9;font-size:75px;box-shadow:0 18px 50px #30206544;animation:floatMark 2.5s ease-in-out infinite}.splashWord{font-size:clamp(46px,8vw,78px);font-weight:950;letter-spacing:-4px}.splashWord span{color:#ffe58b}.splashCaption{letter-spacing:5px;font-size:12px;font-weight:900}.splashDots{display:flex;justify-content:center;gap:8px;margin-top:28px}.splashDots i{width:9px;height:9px;background:white;border-radius:50%;animation:pulseDot .9s infinite alternate}.splashDots i:nth-child(2){animation-delay:.25s}.splashDots i:nth-child(3){animation-delay:.5s}@keyframes popIntro{from{opacity:0;transform:scale(.72) translateY(25px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes floatMark{50%{transform:translateY(-9px) rotate(5deg)}}@keyframes pulseDot{to{opacity:.2;transform:scale(.65)}}
.accountDialog{padding:0;width:min(475px,94vw);max-height:92vh;overflow-y:auto;border:1px solid #eae5ff;border-radius:30px}.authShell{padding:30px 34px;position:relative;text-align:center}.authClose{position:absolute;top:16px;right:18px;background:#f1effb;border:0;border-radius:50%;width:35px;height:35px;cursor:pointer;color:#40366a}.authMascot{width:66px;height:66px;display:grid;place-items:center;margin:0 auto 8px;background:linear-gradient(135deg,#7964eb,#b381fb);border-radius:20px;color:white;font-size:46px}.authBrand{font-size:31px;font-weight:950;letter-spacing:-1.5px;color:#392b83}.authBrand span{color:#aa72ec}.authShell h2{font-size:23px;margin:15px 0 7px}.authShell>p{color:#776e91;font-size:14px;margin:0 0 16px}.authTabs{display:flex;gap:6px;padding:5px;background:#f1edfc;border-radius:16px;margin:17px 0}.authTabs button{flex:1;border:0;border-radius:12px;padding:11px;font:inherit;font-weight:800;background:transparent;color:#756b94;cursor:pointer}.authTabs button.active{background:white;color:#6652d5;box-shadow:0 3px 10px #32226718}.authDivider{display:flex;align-items:center;gap:12px;color:#8c83a1;font-size:12px;margin:16px 0}.authDivider:before,.authDivider:after{content:'';height:1px;background:#e9e4f5;flex:1}.authShell label{display:block;text-align:left;margin:12px 0 0;font-size:13px;font-weight:800;color:#4c406f}.authShell input{width:100%;margin-top:7px;padding:14px;border:2px solid #e6e0f8;border-radius:13px;background:#fff;font:inherit;color:#2c244a;outline:none}.authShell input:focus{border-color:#8369eb;box-shadow:0 0 0 3px #8369eb22}.googleLogin{margin:0;display:flex;justify-content:center;align-items:center;gap:13px}.googleG{font-size:22px;font-weight:900;color:#4285f4}.fullButton{display:block;width:100%;margin-top:15px;text-align:center;cursor:pointer}.textButton{border:0;background:none;color:#6654c8;cursor:pointer;font:inherit;font-size:13px;font-weight:800;margin-top:13px}.authPrivacy{color:#837a96;font-size:12px;line-height:1.6;margin:14px 0 0}.authShell #authError{font-size:13px;color:#a34264;text-align:left;margin:10px 0;min-height:0}.profileAvatar{font-size:48px;margin:15px}.profileStats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:24px 0}.profileStats div{padding:15px 5px;background:#f4f0ff;border-radius:16px}.profileStats b{display:block;font-size:24px;color:#6453d6}.profileStats small{font-size:11px;color:#766e8c}.classDivider{height:1px;background:#eee7fa;margin:22px 0}.tfCandidate{background:#f5efff;border:2px dashed #9d85f5;border-radius:18px;padding:18px;font-size:clamp(18px,3vw,25px);font-weight:800;color:#473486;margin:18px auto;max-width:650px;text-align:center}.achievementNotice{margin:16px auto;color:#7052cb;font-size:20px;font-weight:900}.modeChoice{transition:transform .2s,border-color .2s,box-shadow .2s}.modeChoice:hover{box-shadow:0 12px 30px #5441ad16}.headerRight{flex-wrap:wrap}@media(max-width:620px){.authShell{padding:24px 20px}.headerRight{gap:5px}.headerRight button{font-size:11px;padding:8px}.splashMark{width:80px;height:80px;font-size:54px}.splashWord{letter-spacing:-2px}}
@media(prefers-reduced-motion:reduce){.splashInner,.splashMark,.splashDots i{animation:none}}

#profilePanel[hidden],#authPanel[hidden],#tfCandidate[hidden]{display:none!important}

/* BrightBuds 8: playful polished interface, gentle motion and responsive cards */
:root{--ink:#262143;--purple:#6957e6;--bg:#faf9ff}
body{background:radial-gradient(ellipse at 10% 5%,#f3efff 0,transparent 35%),radial-gradient(ellipse at 95% 35%,#eafbf5 0,transparent 32%),#faf9ff}
header{gap:12px}.brandIcon{background:linear-gradient(135deg,#8171f2,#ad8df8);font-size:25px;box-shadow:0 7px 17px #7760db35}
.install{transition:transform .2s ease,box-shadow .2s ease,background .2s ease;box-shadow:0 4px 12px #6252cd20}.install:hover{transform:translateY(-2px);background:#5744d4;box-shadow:0 8px 19px #6252cd35}
.hero{background:linear-gradient(120deg,#f0ebff,#e9e5ff 55%,#dff8f4);box-shadow:0 25px 65px #8375ca14;border:1px solid #ffffffb5}.hero h1{letter-spacing:-2px}.heroArt .bigSmile{animation:mascotBounce 4s ease-in-out infinite}
.grade,.subject,.modeChoice,.plan{box-shadow:0 8px 28px #5b50aa0b;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .22s}.grade:hover,.subject:hover,.modeChoice:hover{transform:translateY(-5px);box-shadow:0 17px 33px #6154b424}
.grade:active,.subject:active,.modeChoice:active{transform:scale(.98)}.quizCard,.resultCard{box-shadow:0 25px 65px #6e60b61c}
.primary{background:linear-gradient(120deg,#6552d8,#9071ed);box-shadow:0 6px 0 #d9d1fb;transition:transform .2s,filter .2s}.primary:hover{filter:brightness(1.06)}
.freshBanner{margin-top:24px;display:flex;align-items:center;gap:18px;background:linear-gradient(115deg,#ffffff,#f0eaff);border:1px solid #e3dbfa;border-radius:22px;padding:18px 23px;box-shadow:0 10px 35px #7668c015}
.freshIcon{font-size:34px;display:grid;place-items:center;width:56px;height:56px;background:#e7e0ff;border-radius:18px}.freshBanner strong{font-size:16px}.freshBanner p{font-size:12px;color:#77708c;margin:5px 0 0}.freshChip{margin-left:auto;white-space:nowrap;background:#e8ddff;color:#5e4ac1;border-radius:100px;padding:10px 14px;font-size:12px;font-weight:900}
.splash{background:radial-gradient(circle at 22% 20%,#b69dff 0,transparent 30%),radial-gradient(circle at 82% 78%,#e4a4db 0,transparent 35%),linear-gradient(130deg,#6051d7,#9b75ed)}
.splashMark{position:relative;font-size:70px;background:linear-gradient(145deg,#fff,#fff2d5);border-radius:34px;box-shadow:0 22px 45px #30206544;transform:rotate(-7deg)}.splashStar{position:absolute;font-size:27px;right:-13px;top:-15px;animation:twinkle 1.7s infinite alternate}.splashFriends{display:flex;justify-content:center;gap:38px;margin:8px 0 18px;font-size:31px}.splashFriends span{animation:mascotBounce 2.5s ease-in-out infinite}.splashFriends span:nth-child(2){animation-delay:.3s}.splashFriends span:nth-child(3){animation-delay:.6s}
@keyframes mascotBounce{50%{transform:translateY(-11px) rotate(4deg)}}@keyframes twinkle{to{transform:scale(1.25) rotate(18deg)}}
@media(max-width:740px){.freshBanner{flex-wrap:wrap}.freshChip{margin-left:0}.headerRight{justify-content:flex-end}.hero{padding:35px 28px}}
@media(max-width:560px){.freshBanner{padding:15px;gap:10px}.freshIcon{width:43px;height:43px;font-size:25px}.freshChip{width:100%;text-align:center}.hero h1{font-size:clamp(35px,10vw,48px)}.splashFriends{gap:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* BrightBuds 9 settings and accessibility */
.settingsShell{max-width:490px}.settingsRow{display:flex!important;justify-content:space-between;align-items:center;gap:16px;padding:16px 8px;border-bottom:1px solid #e9e4fa;font-weight:750}.settingsRow input{width:21px;height:21px;accent-color:#6855db;cursor:pointer}.settingsShell .fullButton{margin-top:15px}.bbReduceMotion *, .bbReduceMotion *::before,.bbReduceMotion *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.bbLargeText #questionText{font-size:clamp(1.7rem,4vw,2.6rem)!important}.bbLargeText .answer{font-size:1.25rem!important}.bbDark body{background:#17162b;color:#f5f1ff}.bbDark .app{background:#17162b}.bbDark .quizCard,.bbDark .resultCard,.bbDark .subject,.bbDark .grade,.bbDark .modeChoice,.bbDark .authShell,.bbDark .plan,.bbDark .freshBanner{background:#272541!important;color:#f5f1ff!important}.bbDark .hero,.bbDark header{background:#211f3a!important;color:#f5f1ff!important}.bbDark p,.bbDark small{color:#ddd5f5!important}.bbDark input{color:#19142e}.bbDark .settingsRow{border-color:#46415d}


/* BrightBuds 10 — polished, accessible, lively interface */
:root{--bb-shadow:0 18px 50px rgba(77,59,145,.11);--bb-line:rgba(121,102,202,.14);--bb-focus:#5e49d6}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{background-image:radial-gradient(ellipse at 4% 12%,rgba(184,164,255,.22),transparent 34%),radial-gradient(ellipse at 94% 26%,rgba(150,237,216,.24),transparent 30%),radial-gradient(ellipse at 52% 100%,rgba(255,224,164,.17),transparent 32%),linear-gradient(180deg,#fcfbff,#f8f8ff 62%,#fffdfb);background-attachment:fixed}
.app{max-width:1240px;margin-inline:auto}
header{position:sticky;top:0;z-index:30;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);background:rgba(255,255,255,.84);border:1px solid rgba(255,255,255,.8);box-shadow:0 7px 28px rgba(54,42,105,.07);border-radius:0 0 22px 22px;padding:13px clamp(14px,3vw,30px)}
.brand{transition:transform .22s ease}.brand:hover{transform:translateY(-1px)}.brandIcon{border-radius:17px;animation:bbLogoBob 4s ease-in-out infinite}
.hero{position:relative;overflow:hidden;border-radius:32px;background:linear-gradient(120deg,rgba(243,238,255,.97),rgba(237,233,255,.96) 49%,rgba(226,250,245,.97));border:1px solid rgba(255,255,255,.95);box-shadow:0 28px 75px rgba(99,80,171,.12)}
.hero:before,.hero:after{content:"";position:absolute;pointer-events:none;border-radius:50%;border:1px solid rgba(124,103,223,.13)}.hero:before{width:290px;height:290px;right:-105px;top:-135px}.hero:after{width:190px;height:190px;right:-55px;top:-85px}
.heroText{position:relative;z-index:1}.eyebrow{letter-spacing:1.5px}.hero h1{line-height:1.04;text-wrap:balance}.hero p{max-width:570px;line-height:1.8}.heroNote{line-height:1.8}
.primary,.secondary,.install,.answer,.nextButton,.modeChoice,.grade,.subject{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.primary,.secondary,.install{border-radius:15px}.primary{box-shadow:0 5px 0 rgba(81,63,180,.15),0 10px 22px rgba(91,72,192,.13)}.primary:active,.install:active,.secondary:active{transform:translateY(1px) scale(.99)}
.freshBanner{position:relative;overflow:hidden;background:linear-gradient(110deg,#fff 0%,#f4efff 55%,#edfff8 100%);box-shadow:0 13px 35px rgba(93,74,164,.08)}.freshIcon{box-shadow:inset 0 0 0 1px rgba(111,88,211,.07);animation:bbSparkle 3s ease-in-out infinite}.freshChip{box-shadow:inset 0 0 0 1px rgba(100,77,193,.08)}
.grade,.subject,.modeChoice,.plan{border:1px solid rgba(124,105,199,.11);border-radius:22px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px)}.grade.selected{border-color:#7864e9;box-shadow:0 0 0 3px rgba(120,100,233,.13),0 12px 30px rgba(97,78,190,.12)}
.subject{padding:20px}.subjectIcon{border-radius:17px!important;box-shadow:inset 0 0 0 1px rgba(60,50,100,.04)}.subjectArrow{transition:transform .2s ease}.subject:hover .subjectArrow{transform:translateX(4px)}
.quizCard,.resultCard{border:1px solid rgba(255,255,255,.95);border-radius:30px;box-shadow:0 26px 70px rgba(65,50,130,.12)}.answer{min-height:60px;border-radius:17px;border:2px solid #ebe6fa;transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}.answer:hover:not(:disabled){transform:translateY(-2px);border-color:#9a87ee;box-shadow:0 8px 20px rgba(91,72,192,.08)}.answer.correct{box-shadow:0 0 0 3px rgba(55,183,128,.12)}.progressTrack,.progressBar{border-radius:999px;overflow:hidden}
.accountDialog{box-shadow:0 30px 100px rgba(34,24,83,.24);backdrop-filter:blur(18px)}.accountDialog::backdrop{background:rgba(30,23,64,.48);backdrop-filter:blur(5px)}.authShell{background:linear-gradient(160deg,#fff 0%,#fcfaff 70%,#f2fffb 100%)}.authMascot{box-shadow:0 10px 22px rgba(109,82,207,.2)}.settingsRow{border-radius:13px;padding-inline:12px!important}.settingsRow:hover{background:rgba(120,100,220,.045)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(102,82,216,.75);outline-offset:3px}
#toast{z-index:1000;box-shadow:0 12px 35px rgba(36,26,82,.2);backdrop-filter:blur(12px)}
@keyframes bbLogoBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(3deg)}}@keyframes bbSparkle{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(5deg) scale(1.04)}}
@media(min-width:1000px){.hero{padding:clamp(42px,5vw,72px)}.gradesSection,.subjectsSection,.modesSection{padding-block:34px}}
@media(max-width:740px){header{position:relative;border-radius:0 0 18px 18px}.brand small{letter-spacing:1px}.hero{border-radius:24px}.heroArt{transform:scale(.92)}.grade,.subject,.modeChoice{border-radius:18px}}
@media(max-width:460px){.brand{gap:7px}.headerRight{width:100%;justify-content:flex-start}.headerRight .headerPill{font-size:11px}.hero{padding:26px 20px}.heroActions{align-items:flex-start;gap:12px}.sectionHeading{gap:10px}.quizCard,.resultCard{border-radius:22px}.answer{min-height:54px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} .brandIcon,.freshIcon{animation:none}}


/* BrightBuds 11: performance-first settings and Urdu typography */
.urduText, .bbUrduGame #questionText, .bbUrduGame .answer, .bbUrduGame .tfCandidate {
  font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', 'Noto Sans Arabic', serif !important;
  line-height: 2.15 !important; letter-spacing: 0 !important; font-weight: 500;
}
.bbUrduGame .answer { padding-block: 15px; }
.settingsField {display:flex!important; flex-direction:column; gap:8px; margin:14px 0!important; text-align:left; font-size:13px; font-weight:800; color:#4c406f;}
.settingsField select {width:100%;padding:12px 14px;border:2px solid #e6e0f8;border-radius:13px;background:#fff;color:#2c244a;font:inherit;}
.bbLiteMode *, .bbLiteMode *::before, .bbLiteMode *::after { animation:none!important; transition-duration:.08s!important; scroll-behavior:auto!important; }
.bbLiteMode .hero, .bbLiteMode .quizCard, .bbLiteMode .resultCard, .bbLiteMode .grade, .bbLiteMode .subject, .bbLiteMode .modeChoice, .bbLiteMode .install {box-shadow:none!important;filter:none!important;backdrop-filter:none!important;}
.bbLiteMode .heroArt .bigSmile {filter:none!important;}
.bbLiteMode .grade:hover, .bbLiteMode .subject:hover, .bbLiteMode .modeChoice:hover, .bbLiteMode .answer:hover:not(:disabled), .bbLiteMode .install:hover {transform:none!important;}
.bbHighContrast {--ink:#111;--muted:#333;--purple:#4430bd;}
.bbHighContrast .subject, .bbHighContrast .grade, .bbHighContrast .quizCard, .bbHighContrast .answer {border-color:#4c3b9c!important;}
.bbHighContrast .subjectDetail, .bbHighContrast .gradeTag, .bbHighContrast p {color:#38324a!important;}
.bbCompact .app {padding-left:18px;padding-right:18px;}
.bbCompact .grade {min-height:125px;padding:14px 8px;}
.bbCompact .subject {min-height:88px;padding:15px;}
.bbCompact .gradesSection, .bbCompact .subjectsSection {padding-top:42px;}
.bbDark .settingsField {color:#eee8ff;}
.bbDark .settingsField select {background:#211f3a;color:#f5f1ff;border-color:#46415d;}
@media(max-width:700px){.settingsShell{max-height:88vh;overflow:auto}.heroArt{opacity:.45}.bbCompact .app{padding-left:12px;padding-right:12px}}
@media(prefers-reduced-motion:reduce){.heroArt .bigSmile,.brandIcon,.freshIcon,.splashFriends span,.splashStar{animation:none!important}}
/* Keep the short welcome animation even when low-effects mode is enabled. */
.bbLiteMode .splashInner{animation:popIntro .85s cubic-bezier(.2,.9,.3,1.2) both!important}
.bbLiteMode .splashMark{animation:floatMark 2.5s ease-in-out infinite!important}
.bbLiteMode .splashDots i{animation:pulseDot .9s infinite alternate!important}


/* BrightBuds 13: low-cost rendering and readable Urdu */
html { scroll-behavior: auto; }
/* Stop decorative infinite animations; keep the short opening animation only. */
.heroArt .bigSmile, .brandIcon, .freshIcon, .splashFriends span, .splashStar,
.splashMark, .splashDots i, .spark, .orbit { animation: none !important; }
/* Blur and oversized layered shadows are expensive on some integrated GPUs. */
.accountDialog, .accountDialog::backdrop, #toast { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.hero, .quizCard, .resultCard, .grade, .subject, .modeChoice, .plan, .floating, #toast { box-shadow: 0 3px 12px rgba(55, 45, 100, .07) !important; }
.bigSmile { filter: none !important; }
.grade, .subject, .modeChoice, .answer, .primary, .secondary { transition: border-color .12s ease, background-color .12s ease, color .12s ease !important; }
.grade:hover, .subject:hover, .modeChoice:hover, .answer:hover:not(:disabled), .primary:hover { transform: none !important; }
/* Use a clean, legible Naskh/Sans Arabic stack for Urdu screens. */
.urduText, .bbUrduGame #questionText, .bbUrduGame .answer, .bbUrduGame .tfCandidate {
  font-family: 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Tahoma', sans-serif !important;
  direction: rtl !important; unicode-bidi: plaintext; letter-spacing: 0 !important;
  line-height: 2 !important; font-weight: 600; font-size: 1.24rem;
  font-kerning: normal; text-rendering: optimizeLegibility;
}
.bbUrduGame #questionText { max-width: 620px; margin-inline: auto; padding: 4px 8px; }
.bbUrduGame .answer { text-align: right !important; padding: 14px 18px; min-height: 58px; }
.bbUrduGame .answer::first-letter { font-size: 1.15em; }
.bbUrduGame #answers { gap: 10px; }
/* Grade 1 is deliberately a large, simple letter-recognition activity. */
.bbUrduGame .answer.urduText { font-size: 1.8rem; line-height: 1.7 !important; text-align: center !important; min-height: 70px; }
.bbLiteMode .hero, .bbLiteMode .quizCard, .bbLiteMode .resultCard, .bbLiteMode .grade, .bbLiteMode .subject, .bbLiteMode .modeChoice, .bbLiteMode .install { box-shadow: none !important; filter: none !important; backdrop-filter: none !important; }
@media (max-width: 700px) { .heroArt { filter: none !important; } .accountDialog { box-shadow: 0 8px 28px rgba(30,23,64,.18) !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }


/* BrightBuds 15: smooth rendering and beginner Urdu literacy */
/* Prefer a clear Naskh style for Urdu learning; keep a local system fallback for offline use. */
.urduText, .bbUrduGame #questionText, .bbUrduGame .answer, .bbUrduGame .tfCandidate {
  font-family: 'Noto Naskh Arabic', 'Noto Sans Arabic', Tahoma, sans-serif !important;
  font-weight: 600 !important; line-height: 2 !important; letter-spacing: 0 !important;
  text-rendering: auto !important; font-kerning: auto !important;
  direction: rtl !important; unicode-bidi: plaintext;
}
/* Integrated-graphics friendly: avoid fixed layered gradients, filters, backdrop blur and perpetual motion. */
html, body { background-attachment: scroll !important; scroll-behavior: auto !important; }
body { background-image: linear-gradient(180deg,#fcfbff,#f8f8ff 62%,#fffdfb) !important; }
header { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.hero, .quizCard, .resultCard, .grade, .subject, .modeChoice, .plan, .floating, #toast,
.accountDialog, .authShell, .freshBanner { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.bigSmile, .heroArt, .floating { filter: none !important; }
.brandIcon, .freshIcon, .splashFriends span, .splashStar, .spark, .orbit, .bigSmile { animation: none !important; }
.grade, .subject, .modeChoice, .answer, .primary, .secondary, .install { transition: none !important; }
.grade:hover, .subject:hover, .modeChoice:hover, .answer:hover:not(:disabled), .primary:hover, .install:hover { transform: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* BrightBuds 21: mini-game controls */
.jumbledInputWrap{display:grid;gap:12px;max-width:520px;margin:0 auto;width:100%}.jumbledInput{box-sizing:border-box;width:100%;border:2px solid #e4ddff;border-radius:16px;padding:16px 18px;font:inherit;font-size:22px;text-align:center;background:var(--card,#fff);color:var(--text,#29244b);outline:none}.jumbledInput:focus{border-color:#7662ef;box-shadow:0 0 0 3px #7662ef22}.jumbledInputWrap .answer{width:100%}

/* BrightBuds V23: sidebar, learning progression, review tools and themes */
.bbSidebar{position:fixed;z-index:30;left:14px;top:108px;bottom:18px;width:190px;padding:14px 10px;display:flex;flex-direction:column;gap:7px;background:rgba(255,255,255,.94);border:1px solid rgba(120,100,220,.15);border-radius:22px;box-shadow:0 8px 28px rgba(60,45,130,.08)}
.sidebarBrand{font-size:12px;font-weight:900;letter-spacing:1.2px;color:#6558d9;padding:8px 10px 14px}.bbSidebar button{display:flex;gap:10px;align-items:center;text-align:left;border:0;border-radius:12px;padding:12px 10px;background:transparent;color:var(--ink,#30284f);font:700 13px/1.3 system-ui;cursor:pointer}.bbSidebar button:hover,.bbSidebar button:focus-visible{background:#f0edff;color:#5946c6}.sidebarFoot{margin-top:auto;padding:10px;font-size:9px;font-weight:800;letter-spacing:1px;color:#9389b5}.app{margin-left:210px}.featurePanel{max-width:1100px;margin:26px auto;padding:clamp(22px,4vw,42px);border-radius:28px;background:rgba(255,255,255,.94);border:1px solid rgba(120,100,220,.15);box-shadow:0 12px 35px rgba(60,45,130,.08)}.featureHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:24px}.featureHeader h2{font-size:clamp(26px,4vw,38px);margin:8px 0}.progressStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0 30px}.progressStats article{padding:20px;border-radius:18px;background:#f4f0ff;display:flex;flex-direction:column;gap:5px}.progressStats strong{font-size:28px;color:#6558d9}.progressStats span{font-size:12px;font-weight:700;color:#655b7e}.achievementGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:15px 0 28px}.achievementTile{padding:14px;border-radius:14px;background:#f4f2f8;color:#928ba5;font-weight:800;font-size:12px}.achievementTile.unlocked{background:#e7fbf1;color:#216d50}.subjectStats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.subjectStatRow{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:12px;font-weight:750}.miniTrack{grid-column:1/-1;height:7px;border-radius:9px;background:#ebe7f7;overflow:hidden}.miniTrack i{display:block;height:100%;background:#7664e8;border-radius:9px}.dailyCard{text-align:center;padding:30px;border-radius:24px;background:linear-gradient(135deg,#f3efff,#e9fff5)}.dailyIcon{font-size:48px}.dailyCard h3{font-size:24px}.dailyCard button:disabled{opacity:.65;cursor:not-allowed}.leaderboardTools{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:16px}.leaderboardTools label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;min-width:220px}.leaderboardTools input{padding:12px;border:2px solid #e6e0f8;border-radius:12px;font:inherit}.leaderboardRows{display:grid;gap:8px;margin:16px 0}.leaderboardRow{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;background:#f7f5fc}.leaderboardRow.mine{outline:2px solid #8c7af0;background:#f0edff}.leaderboardRow strong{color:#6558d9}.mistakeList{display:grid;gap:10px;margin:18px 0}.mistakeItem{padding:16px;border-radius:14px;border:1px solid #e9e3f8;background:#fff}.mistakeItem p{margin:8px 0;color:#5946c6}.mistakeItem small{color:#716982}.reportQuestion{display:block;margin:12px auto 0;font-size:12px}.bbDark .bbSidebar,.bbDark .featurePanel{background:#211f3a;color:#f4f0ff;border-color:#403b60}.bbDark .bbSidebar button{color:#f4f0ff}.bbDark .bbSidebar button:hover{background:#34304f}.bbDark .mistakeItem,.bbDark .leaderboardRow{background:#2b2745;color:#f4f0ff;border-color:#494264}.bbDark .dailyCard,.bbDark .progressStats article{background:#302b4d}.bbDark .progressStats span,.bbDark .mistakeItem small{color:#d1c9e8}
html[data-bb-theme="ocean"]{--purple:#2877c7;--ink:#17324e}html[data-bb-theme="mint"]{--purple:#24866a;--ink:#183f36}html[data-bb-theme="sunset"]{--purple:#c55e48;--ink:#55352e}html[data-bb-theme="ocean"] .bbSidebar button:hover{background:#e7f4ff}html[data-bb-theme="mint"] .bbSidebar button:hover{background:#e6fbf1}html[data-bb-theme="sunset"] .bbSidebar button:hover{background:#fff0e8}
html[data-bb-font="large"] #questionText,html[data-bb-font="large"] .answer{font-size:1.18em}html[data-bb-font="xlarge"] #questionText,html[data-bb-font="xlarge"] .answer{font-size:1.35em}
@media(max-width:900px){.app{margin-left:0;padding-top:0}.bbSidebar{position:sticky;top:0;left:auto;bottom:auto;width:auto;flex-direction:row;overflow-x:auto;border-radius:0 0 16px 16px;margin:0 8px 12px;padding:6px;gap:4px}.sidebarBrand,.sidebarFoot{display:none}.bbSidebar button{flex:0 0 auto;white-space:nowrap;padding:10px 12px}.bbSidebar button span{display:inline}.progressStats{grid-template-columns:repeat(2,minmax(0,1fr))}.featurePanel{margin:14px 8px}.featureHeader{flex-direction:column}}
@media(max-width:500px){.bbSidebar button{font-size:11px;padding:9px}.bbSidebar button span{display:none}.bbSidebar button{font-size:18px}.progressStats article{padding:14px}.leaderboardTools label{min-width:100%}}

/* V25: prominent first-visit registration and a longer, more lively intro */
.welcomeAccount{display:flex;align-items:center;flex-wrap:wrap;gap:17px;margin:22px auto 12px;padding:20px 25px;max-width:1140px;border:2px solid #e0d8ff;border-radius:23px;background:linear-gradient(115deg,#fff9e8,#f4edff 62%,#e6f9ff);box-shadow:0 10px 30px #493bb211}.welcomeAccount[hidden]{display:none!important}.welcomeEmoji{font-size:40px}.welcomeAccount>div:nth-child(2){flex:1;min-width:200px}.welcomeAccount strong{font-size:22px;color:#403080}.welcomeAccount p{margin:4px 0;color:#5f577d}.welcomeActions{display:flex;flex-wrap:wrap;gap:9px}.welcomeActions button{font-size:14px}.splash{overflow:hidden;background:radial-gradient(circle at 15% 25%,#d1a9ff 0,transparent 35%),radial-gradient(circle at 85% 80%,#ffb0c7 0,transparent 36%),linear-gradient(130deg,#5446cc,#9272f5,#c476da);background-size:130% 130%;animation:welcomeGradient 4.3s ease-in-out infinite alternate}.splashInner{position:relative;z-index:1;animation:welcomeZoom 1.25s cubic-bezier(.18,.9,.25,1.2) both}.splashMark{animation:welcomeMascot 2.1s ease-in-out infinite!important}.splashWord{animation:welcomeTitle 2.4s ease-in-out both}.splashConfetti{position:absolute;inset:0;pointer-events:none}.splashConfetti i{position:absolute;font-style:normal;font-size:clamp(20px,4vw,43px);animation:welcomeStars 3.1s ease-in-out infinite alternate}.splashConfetti i:nth-child(1){left:8%;top:15%}.splashConfetti i:nth-child(2){left:23%;top:73%;animation-delay:.5s}.splashConfetti i:nth-child(3){left:72%;top:12%;animation-delay:1s}.splashConfetti i:nth-child(4){left:85%;top:65%;animation-delay:.7s}.splashConfetti i:nth-child(5){left:55%;top:85%;animation-delay:1.3s}.splashConfetti i:nth-child(6){left:12%;top:49%;animation-delay:1.6s}.splashConfetti i:nth-child(7){left:92%;top:32%;animation-delay:.3s}.splashConfetti i:nth-child(8){left:44%;top:9%;animation-delay:1.1s}@keyframes welcomeGradient{to{background-position:100% 100%}}@keyframes welcomeZoom{from{opacity:0;transform:translateY(48px) scale(.68) rotate(-5deg)}to{opacity:1;transform:none}}@keyframes welcomeMascot{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-18px) rotate(8deg)}}@keyframes welcomeTitle{0%{letter-spacing:5px;opacity:0}65%{opacity:1}100%{letter-spacing:-4px}}@keyframes welcomeStars{0%{transform:translateY(25px) rotate(-20deg) scale(.6);opacity:.25}100%{transform:translateY(-25px) rotate(30deg) scale(1.4);opacity:1}}@media(max-width:600px){.welcomeAccount{margin:12px;padding:16px}.welcomeActions,.welcomeActions button{width:100%}}@media(prefers-reduced-motion:reduce){.splash,.splashInner,.splashMark,.splashWord,.splashConfetti i{animation:none!important}}

/* V26 streamlined account experience */
.accountDialog{border-radius:24px;box-shadow:0 25px 85px #2b20604d}
.authShell{padding:25px 30px}
.authTabs{margin:12px 0}
.roleSwitcher{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:#f2efff;border-radius:16px;padding:12px;margin:14px 0;color:#433476;font-weight:700}
.roleSwitcher[hidden]{display:none}
.roleSwitcher button{font-size:13px;padding:9px 13px}
.splash{animation-duration:1.9s}

/* V27 wallpapers: backgrounds behind translucent app panels */
body{background-image:var(--bb-wallpaper,none)!important;background-size:cover!important;background-attachment:fixed!important}
body:has([data-theme="dark"]){background-blend-mode:multiply}
.bbSidebar{backdrop-filter:blur(14px)}

/* V28 FAQ and account role controls */
.bbFaqList{display:grid;gap:12px;max-width:850px;margin:24px auto}
.bbFaqList details{background:var(--card,#fff);border:1px solid #d9d4f5;border-radius:16px;padding:15px 18px;box-shadow:0 4px 15px #2820540d}
.bbFaqList summary{cursor:pointer;font-weight:800;color:#3b326d;line-height:1.5}
.bbFaqList details[open] summary{margin-bottom:12px}
.bbFaqList p{line-height:1.7;margin:0;color:#50496d}
.bbFaqList a,.bbFaqContact a{color:#5142b5}
.bbFaqContact{max-width:850px;margin:20px auto;padding:24px;border-radius:20px;background:#f0edff}
.bbFaqContact p{margin:10px 0 16px}
.bbContactLink{display:inline-block;text-decoration:none;padding:12px 18px;border-radius:12px;background:#fff}
.bbRoleSummary{display:grid;gap:5px;min-width:150px}
.bbRoleSummary small{font-size:12px;font-weight:500;opacity:.8}
.bbRoleTitle{font-size:12px;letter-spacing:.05em;text-transform:uppercase}
.bbRoleStatus{flex-basis:100%;font-size:13px;line-height:1.5;margin:0}