/* My Schoolguru Math Buddy — one auto-responsive layout: phone → tablet → laptop → TV → 86" panel.
   Everything is sized in rem; the root size grows with the screen. */
:root{
 --navy:#1f4e82;--sky:#22aadd;--gold:#f9be28;
 --pink:#ff4fa3;--orange:#ff8a1f;--yellow:#ffd23f;--green:#2ec66f;--teal:#16c2c9;--blue:#3d7bff;--purple:#8b5cf6;--red:#ff4d4d;--gray:#8a83a8;
 --ink:#2b2350;--muted:#6b6290;--bg:#fff8ec;--card:#fff;--line:#e8e2fb;
 --r:1.4rem;--shadow:0 .35rem 0 rgba(43,35,80,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:clamp(15px,calc(6px + 1.55vmin),46px);-webkit-text-size-adjust:100%}
body{font-family:Fredoka,"Comic Sans MS",system-ui,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:.3rem solid var(--gold);outline-offset:.2rem;border-radius:.6rem}

/* floating colour bubbles */
.bubbles{position:fixed;inset:0;z-index:-1;overflow:hidden}
.bubbles i{position:absolute;border-radius:50%;opacity:.55;animation:float 14s ease-in-out infinite}
.bubbles i:nth-child(1){width:22vmin;height:22vmin;background:#ffd6ea;left:-6vmin;top:8vh}
.bubbles i:nth-child(2){width:30vmin;height:30vmin;background:#d4f3ff;right:-8vmin;top:14vh;animation-delay:-3s}
.bubbles i:nth-child(3){width:26vmin;height:26vmin;background:#fff1b8;right:8vw;bottom:-8vmin;animation-delay:-6s}
.bubbles i:nth-child(4){width:18vmin;height:18vmin;background:#d8ffe5;left:6vw;bottom:6vh;animation-delay:-9s}
.bubbles i:nth-child(5){width:12vmin;height:12vmin;background:#eadcff;left:42vw;top:4vh;animation-delay:-2s}
.bubbles i:nth-child(6){width:10vmin;height:10vmin;background:#ffe0cc;left:60vw;bottom:20vh;animation-delay:-7s}
@keyframes float{50%{transform:translateY(-3vmin) scale(1.05)}}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem max(1rem,env(safe-area-inset-left)) .4rem}
.brand{display:flex;align-items:center;gap:.5rem;background:none;border:0;text-align:left;line-height:1.05}
.brand img{width:2.6rem;height:2.6rem}
.brand span{font-size:1.05rem}
.brand b{color:var(--navy);font-weight:600;display:block;font-size:.8rem}
.brand em{font-style:normal;color:var(--sky);font-weight:700}
.brand strong{color:var(--orange)}
.topright{display:flex;align-items:center;gap:.5rem}
.me{display:flex;align-items:center;gap:.35rem;border:0;background:var(--card);border-radius:999px;padding:.3rem .8rem .3rem .35rem;box-shadow:var(--shadow);font-weight:600}
.me #meAvatar{font-size:1.4rem}
.me #meName{max-width:7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.starcount{color:var(--orange)}
.iconbtn{border:0;background:var(--card);border-radius:50%;width:2.5rem;height:2.5rem;font-size:1.2rem;box-shadow:var(--shadow)}
.offline{background:var(--ink);color:#fff;border-radius:999px;padding:.25rem .7rem;font-size:.8rem}

main{flex:1;width:100%;max-width:62rem;margin:0 auto;padding:.5rem max(1rem,env(safe-area-inset-right)) 1.5rem}
.screen{display:flex;flex-direction:column;gap:1rem;animation:pop .35s ease}
@keyframes pop{from{opacity:0;transform:translateY(.8rem)}}

.hero{text-align:center;margin-top:1rem}
.heroimg{width:min(11rem,38vmin);height:auto}
.by{color:var(--navy);font-weight:600;font-size:1.1rem;margin-top:.4rem}
.title{font-size:clamp(2.4rem,7vmin,4.5rem);line-height:1.05}
.title .c1{color:var(--sky)}.title .c2{color:var(--orange)}
.lead{text-align:center;color:var(--muted);font-size:1.15rem}
.hello{text-align:center;font-size:1.9rem;line-height:1.2}
.orange-t{color:var(--orange)}.green-t{color:var(--green)}.purple-t{color:var(--purple)}
.wave{display:inline-block;animation:wave 1.8s infinite;transform-origin:70% 70%}
@keyframes wave{10%,30%{transform:rotate(16deg)}20%{transform:rotate(-8deg)}40%{transform:none}}
.bob{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-.6rem)}}

.card{background:var(--card);border-radius:var(--r);padding:1.1rem;box-shadow:var(--shadow)}
.card h2{font-size:1.2rem;margin-bottom:.6rem}
.center{text-align:center}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
@media (max-width:420px){.row2{grid-template-columns:1fr}}

.bigbtn{border:0;border-radius:1.2rem;padding:.9rem 1rem;font-size:1.3rem;font-weight:700;color:#fff;box-shadow:0 .4rem 0 rgba(0,0,0,.2);transition:transform .1s,box-shadow .1s;width:100%}
.bigbtn:active{transform:translateY(.3rem);box-shadow:0 .1rem 0 rgba(0,0,0,.2)}
.green{background:var(--green)}.orange{background:var(--orange)}.blue{background:var(--blue)}.purple{background:var(--purple)}.gray{background:var(--gray)}
.pink{background:var(--pink)}.teal{background:var(--teal)}.red{background:var(--red)}.yellow{background:var(--yellow);color:var(--ink)!important}
.link{background:none;border:0;color:var(--muted);font-weight:600;padding:.4rem;align-self:center}
.teacher{text-align:center;color:var(--muted);font-size:.95rem;text-decoration:none}

/* level cards */
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:.8rem}
.level{display:flex;align-items:center;gap:.8rem;border:0;border-radius:1.3rem;padding:.9rem 1rem;color:#fff;text-align:left;box-shadow:0 .35rem 0 rgba(0,0,0,.18);position:relative}
.level .e{font-size:2.6rem;line-height:1}
.level b{display:block;font-size:1.25rem}
.level small{display:block;font-size:.9rem;opacity:.95}
.level.mine::after{content:"⭐ Your age";position:absolute;top:-.6rem;right:.8rem;background:var(--yellow);color:var(--ink);font-size:.75rem;font-weight:700;padding:.15rem .55rem;border-radius:999px}

/* forms */
.form{display:flex;flex-direction:column;gap:.9rem}
.form label,.form legend{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:1rem}
fieldset{border:0;display:flex;flex-direction:column;gap:.45rem}
legend{margin-bottom:.4rem}
input,select{padding:.65rem .8rem;border-radius:.9rem;border:.18rem solid var(--line);background:#fff;font-size:1.05rem;width:100%}
input:focus,select:focus{border-color:var(--sky);outline:none}
small{color:var(--muted);font-weight:500}
.hint{font-size:.85rem;color:var(--muted);text-align:center}
.err{color:#d6283a;font-weight:600;text-align:center;min-height:1.2em}

.avatars{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem}
@media (max-width:480px){.avatars{grid-template-columns:repeat(4,1fr)}}
.avatar{aspect-ratio:1;border-radius:50%;border:.25rem solid transparent;font-size:2rem;display:flex;align-items:center;justify-content:center}
.avatar.sel{border-color:var(--ink);transform:scale(1.08)}

.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips.three>*{flex:1 1 30%}.chips.five>*{flex:1 1 15%}
.chip{border:.18rem solid var(--line);background:#fff;border-radius:1rem;padding:.6rem .9rem;font-weight:600;font-size:1.05rem;flex:1 1 auto;min-width:3.2rem}
.chip.on{color:#fff;border-color:transparent;box-shadow:0 .25rem 0 rgba(0,0,0,.18)}
.chips.big .chip{font-size:1.3rem;padding:.9rem 1.1rem}

.codeslots{display:flex;gap:.6rem;justify-content:center}
.codeslots span{width:3.4rem;height:3.4rem;border-radius:1rem;background:#f4f1ff;border:.18rem dashed #cfc6f5;display:flex;align-items:center;justify-content:center;font-size:2rem}
.codeslots span.full{border-style:solid;border-color:var(--purple);background:#fff}
.codepad{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;max-width:20rem;margin:0 auto;width:100%}
.codepad button{aspect-ratio:1.25;border:0;border-radius:1rem;font-size:2rem;background:#fff;box-shadow:0 .3rem 0 rgba(43,35,80,.14);border:.15rem solid var(--line);position:relative}
.codepad button sub{position:absolute;right:.4rem;bottom:.2rem;font-size:.75rem;color:var(--muted)}
.codepad .del{font-size:1.2rem}

.kids{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:.6rem}
.kid{border:0;background:#fff7fb;border-radius:1.2rem;padding:.7rem .4rem;display:flex;flex-direction:column;align-items:center;gap:.2rem;box-shadow:var(--shadow);font-weight:600}
.kid span{font-size:2.4rem}
.who{text-align:center;font-size:1.3rem;font-weight:600;margin-bottom:.6rem}
.who span{font-size:2.2rem}

.setuphead{display:flex;justify-content:center}
.pill{display:inline-flex;align-items:center;gap:.3rem;font-weight:600;font-size:.95rem;padding:.35rem .8rem;border-radius:999px;color:#fff;white-space:nowrap}

/* play */
.playbar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.playbar .quit{margin-left:auto;width:2.2rem;height:2.2rem;font-size:1rem}
.prog{height:.9rem;border-radius:999px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 .12rem var(--line)}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--orange),var(--yellow),var(--green),var(--sky));transition:width .4s}
.playgrid{display:grid;gap:1rem}
.qcard{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.6rem;position:relative;padding-bottom:3.6rem}
.qtag{font-size:.85rem;color:var(--muted);font-weight:600}
.qpic{font-size:2.6rem;line-height:1.35;word-break:break-word;letter-spacing:.1rem}
.qpic.huge{font-size:4.5rem}
.qtext{font-size:1.9rem;font-weight:700;line-height:1.3}
.qtext.story{font-size:1.35rem;font-weight:600;text-align:left;line-height:1.5}
.speak{position:absolute;bottom:.7rem;left:50%;transform:translateX(-50%);border:0;background:var(--yellow);border-radius:50%;width:2.8rem;height:2.8rem;font-size:1.3rem;box-shadow:0 .25rem 0 rgba(0,0,0,.15)}
.answers{display:flex;flex-direction:column;gap:.8rem}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.opts.four{grid-template-columns:repeat(2,1fr)}
.opts.two{grid-template-columns:repeat(2,1fr)}
.opt{border:0;border-radius:1.4rem;min-height:5.2rem;padding:.6rem;color:#fff;font-size:2.2rem;font-weight:700;box-shadow:0 .4rem 0 rgba(0,0,0,.2);transition:transform .15s;word-break:break-word;line-height:1.15}
.opt.small{font-size:1.35rem}
.opt.pic{padding:.35rem;min-height:7rem}
.opt:active{transform:translateY(.25rem)}
.opt.ok{background:var(--green)!important;transform:scale(1.06);box-shadow:0 0 0 .3rem #fff,0 0 0 .55rem var(--green)}
.opt.no{background:#c9c4dc!important;animation:shake .4s}
.opt.dim{opacity:.45}
@keyframes shake{25%{transform:translateX(-.5rem)}75%{transform:translateX(.5rem)}}
.feedback{text-align:center;font-size:1.5rem;font-weight:700;min-height:2rem}

/* results */
.party{text-align:center;font-size:3rem}
.stars{text-align:center;font-size:3.6rem;letter-spacing:.4rem}
.stars .off{filter:grayscale(1);opacity:.3}
.score{font-size:3.4rem;font-weight:700;color:var(--green)}
.sticker{color:var(--muted);font-size:1.1rem}
.saved{font-size:.85rem;color:var(--muted);margin-top:.3rem}
.wrong{background:#fff1f1;border-radius:1rem;padding:.6rem .8rem;margin-bottom:.5rem;font-size:1rem}
.wrong b{color:var(--green)}

/* progress */
.statrow{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.stat{border-radius:1.2rem;color:#fff;text-align:center;padding:.9rem .4rem}
.stat b{display:block;font-size:2rem}
.stickers{display:flex;flex-wrap:wrap;gap:.5rem;font-size:2rem}
.stickers .lock{filter:grayscale(1);opacity:.25}
.history{display:flex;flex-direction:column;gap:.45rem}
.hrow{display:flex;justify-content:space-between;align-items:center;gap:.5rem;background:#f8f6ff;border-radius:.9rem;padding:.55rem .8rem;font-size:.95rem}

.foot{text-align:center;color:var(--muted);font-size:.8rem;padding:.6rem}
.foot b{color:var(--navy)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50;width:100%;height:100%}
.toast{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,200%);background:var(--ink);color:#fff;padding:.6rem 1.1rem;border-radius:999px;transition:transform .3s;z-index:60;font-weight:600;max-width:90vw;text-align:center}
.toast.show{transform:translate(-50%,0)}

/* ---- bigger, wider screens: laptop, TV, 86" panel (landscape) ---- */
@media (min-width:900px) and (min-aspect-ratio:5/4){
 main{max-width:min(92vw,120rem)}
 .narrow{max-width:46rem;margin-left:auto;margin-right:auto;width:100%}
 .levels{grid-template-columns:repeat(3,1fr)}
 .buddies{grid-template-columns:repeat(4,1fr)}
 .subgrid{grid-template-columns:1fr 1fr}
 .tgrid{grid-template-columns:1fr 18rem}
 .playgrid{grid-template-columns:1.25fr 1fr;align-items:stretch}
 .qcard{justify-content:center;min-height:60vh}
 .qpic{font-size:3.4rem}.qpic.huge{font-size:6rem}
 .qtext{font-size:2.6rem}.qtext.story{font-size:1.6rem}
 .answers{justify-content:center}
 .opts,.opts.four{grid-template-columns:repeat(2,1fr)}
 .opts.three{grid-template-columns:1fr}
 .opt{min-height:6rem;font-size:2.6rem}
}
/* very short landscape phones */
@media (max-height:500px) and (orientation:landscape){
 .playgrid{grid-template-columns:1fr 1fr}
 .qcard{padding-bottom:3rem}
 .opt{min-height:3.6rem;font-size:1.6rem}
 .hero{margin-top:0}.heroimg{width:5rem}
}
/* ---- version 2: subject buddies, chapters, test series ---- */
:root{--buddy:#22aadd}
.narrow{width:100%}
.brand em{color:var(--buddy)}
.small-t{display:block;font-size:1.1rem;color:var(--muted);font-weight:500}
.schoolline{margin-top:.6rem;color:var(--navy)}
.link.inline{display:inline;padding:0 .3rem;text-decoration:underline}
.bigin{font-size:1.6rem!important;text-align:center;letter-spacing:.15rem;text-transform:uppercase}
.hint.left{text-align:left}
.buddies{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr));gap:.9rem}
.buddy{border:0;border-radius:1.4rem;padding:1rem .7rem;color:#fff;text-align:center;background:var(--c);background-image:linear-gradient(135deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.32));box-shadow:0 .4rem 0 rgba(0,0,0,.16);transition:transform .15s;min-height:8.5rem}
.buddy:hover,.buddy:focus-visible{transform:translateY(-.25rem) scale(1.03)}
.buddy .ic{display:block;font-size:2.8rem;line-height:1.2}
.buddy b{display:block;font-size:1.2rem;text-shadow:0 .08rem .15rem rgba(0,0,0,.2)}
.buddy small{color:#fff;opacity:.92;font-size:.85rem}
.buddies.tiny .buddy{min-height:10rem}.buddies.tiny .buddy .ic{font-size:3.8rem}.buddies.tiny .buddy b{font-size:1.4rem}
.buddy-bg{background:var(--buddy)}
.subhead{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.subhead .pill{font-size:1.1rem;padding:.45rem 1rem}
.subgrid{display:grid;gap:1rem}
.subgrid>.card{display:flex;flex-direction:column;gap:.8rem}
.modehead{border-radius:1rem;padding:.8rem 1rem;color:#fff}
.modehead b{display:block;font-size:1.25rem}.modehead small{color:#fff;opacity:.95}
.modehead.prac{background:linear-gradient(135deg,#22c55e,#84cc16)}
.modehead.test{background:linear-gradient(135deg,#7c3aed,#ec4899)}
.chlist{display:flex;flex-direction:column;gap:.4rem;max-height:22rem;overflow-y:auto;padding:.15rem}
.chap{display:flex;align-items:center;gap:.6rem;border:.15rem solid transparent;background:#f4f6ff;border-radius:.9rem;padding:.5rem .7rem;text-align:left;font-weight:500}
.chap .n{flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--buddy);color:#fff;display:grid;place-items:center;font-size:.85rem;font-weight:700}
.chap .t{flex:1}
.chap small{color:var(--muted);white-space:nowrap}.chap .soon{color:#b4b0c8}
.chap.on{border-color:var(--buddy);background:#fff;box-shadow:0 .2rem 0 rgba(0,0,0,.08)}
.chap:disabled{opacity:.55;cursor:default}
.bar{display:inline-block;height:.6rem;background:#e6ecf7;border-radius:1rem;overflow:hidden;width:4.5rem;flex:none}
.bar i{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#a3e635)}
.tlist{display:flex;flex-direction:column;gap:.5rem}
.tl{display:flex;align-items:center;gap:.6rem;border:.15rem solid #ece6ff;background:#fff;border-radius:1rem;padding:.6rem .7rem;text-align:left}
.tl .ti{font-size:1.5rem}.tl .t{flex:1}.tl b{display:block}.tl small{display:block}
.tl:disabled{opacity:.7;cursor:default}
.tag{font-size:.8rem;border-radius:1rem;padding:.2rem .6rem;font-weight:600;white-space:nowrap}
.tag.new{background:#fde68a}.tag.go{background:#c7d2fe}.tag.done{background:#bbf7d0}.tag.lock{background:#e2e8f0}
.explain{background:#fff8e1;border-radius:1rem;padding:.6rem .9rem;font-size:1.05rem;text-align:left}
.opt.text{font-size:1.1rem;font-weight:600;text-align:left;padding:.7rem 1rem}
.wrong .ex,.rev .ex{background:#fff;border-radius:.7rem;padding:.4rem .6rem;margin-top:.4rem;font-size:.95rem}
.bigbtn.sm{font-size:1rem;padding:.55rem .9rem;width:auto}
/* test */
.tbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.tbar #tSubmit{margin-left:auto}
.pill.purple{background:var(--purple)}.pill.teal{background:var(--teal)}.pill.red{background:var(--red)}
.blink{animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:.4}}
.tgrid{display:grid;gap:1rem}
.tq{display:flex;flex-direction:column;gap:.7rem}
.ttext{font-size:1.35rem;font-weight:600;line-height:1.4}
.topts{display:flex;flex-direction:column;gap:.55rem}
.topt{display:flex;align-items:center;gap:.7rem;text-align:left;padding:.7rem .9rem;border-radius:1rem;border:.2rem solid var(--line);background:#fff;font-size:1.1rem}
.topt .l{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;background:#ede9fe;color:#6d28d9;display:grid;place-items:center;font-weight:700}
.topt.sel{border-color:var(--purple);background:#f5f3ff}.topt.sel .l{background:var(--purple);color:#fff}
.tnav{display:flex;gap:.5rem;flex-wrap:wrap}
.pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(2.6rem,1fr));gap:.4rem;max-height:20rem;overflow-y:auto;padding:.2rem}
.pal button{aspect-ratio:1;border:0;border-radius:.6rem;background:#e2e8f0;font-weight:600}
.pal .a{background:#22c55e;color:#fff}.pal .m{background:#f59e0b;color:#fff}.pal .c{outline:.2rem solid var(--purple);outline-offset:.1rem}
.key{display:flex;flex-wrap:wrap;gap:.6rem;font-size:.85rem;margin-top:.6rem}
.key i{display:inline-block;width:.8rem;height:.8rem;border-radius:.2rem;vertical-align:middle;margin-right:.25rem}
.k-a{background:#22c55e}.k-m{background:#f59e0b}.k-n{background:#e2e8f0}
/* test result */
.trpct{font-size:1.2rem;font-weight:600;color:var(--green)}
.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:.6rem 0;width:100%}
.stats4 div{background:#f4f6ff;border-radius:1rem;padding:.5rem;font-size:.85rem}
.stats4 b{display:block;font-size:1.4rem}.stats4 .ok b{color:var(--green)}.stats4 .no b{color:#d6283a}
@media (max-width:480px){.stats4{grid-template-columns:repeat(2,1fr)}}
.cw{display:flex;align-items:center;gap:.6rem;margin:.35rem 0;font-size:.95rem}
.cw .t{flex:0 1 13rem}.cw .bar{flex:1;width:auto;height:.8rem}
.cw.weak .bar i{background:linear-gradient(90deg,#f97316,#ef4444)}
.revhead{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.revhead .chip{flex:0 0 auto}
.rev{border-left:.35rem solid #ef4444;background:#fff5f5;border-radius:.8rem;padding:.7rem .9rem;margin:.5rem 0;line-height:1.45}
.rev.good{border-color:#22c55e;background:#f0fdf4}
.okt{color:#15803d;font-weight:600}.not{color:#b91c1c;font-weight:600}
.btnrow{border:0;width:100%;text-align:left;cursor:pointer}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ---- student dashboard (My report) ---- */
:root{--d-easy:#22a55b;--d-mod:#e8a200;--d-crit:#e5484d}
.dash{display:flex;flex-direction:column;gap:1rem;width:100%}
.dash .card{border:2px solid var(--line);min-width:0}
.d-card h2{display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap}
.d-card h2 small{font-weight:400;color:var(--muted);font-size:.78rem}
.d-hero{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;background:linear-gradient(120deg,#8b5cf6 0%,#ff4fa3 55%,#ff8a1f 100%);color:#fff;border-radius:calc(var(--r) + .3rem);padding:1.2rem 1.4rem;box-shadow:var(--shadow)}
.d-av{font-size:3.2rem;border-radius:50%;width:5rem;height:5rem;display:grid;place-items:center;box-shadow:0 .3rem 0 rgba(0,0,0,.12);flex:none}
.d-who h1{font-size:1.8rem;line-height:1.15}.d-who p{opacity:.95}
.d-lvl{flex:1;min-width:min(100%,14rem)}
.d-bar{height:.9rem;background:rgba(255,255,255,.3);border-radius:99px;overflow:hidden;margin:.35rem 0}
.d-bar i{display:block;height:100%;background:#ffd23f;border-radius:99px}
.d-btns{display:flex;gap:.5rem;flex-wrap:wrap}
.d-pill{font:inherit;font-weight:600;border:0;border-radius:99px;padding:.55rem 1rem;background:#fff;color:var(--ink);cursor:pointer;box-shadow:0 .2rem 0 rgba(0,0,0,.12)}
.d-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,10rem),1fr));gap:.8rem}
.d-kpi{border-radius:var(--r);padding:.85rem 1rem;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.d-kpi::after{content:"";position:absolute;right:-1.2rem;top:-1.2rem;width:4.5rem;height:4.5rem;border-radius:50%;background:rgba(255,255,255,.18)}
.d-kpi i{font-style:normal;font-size:1.5rem}
.d-kpi b{display:block;font-size:1.8rem;line-height:1.15;margin-top:.15rem}
.d-kpi span{font-size:.85rem}
.d-kpi em{display:block;font-style:normal;font-size:.72rem;margin-top:.25rem;background:rgba(255,255,255,.22);border-radius:99px;padding:.05rem .5rem;width:max-content;max-width:100%}
.k1{background:linear-gradient(135deg,#ff8a1f,#ff4fa3)}.k2{background:linear-gradient(135deg,#3d7bff,#16c2c9)}.k3{background:linear-gradient(135deg,#8b5cf6,#3d7bff)}.k4{background:linear-gradient(135deg,#16a34a,#16c2c9)}
.k5{background:linear-gradient(135deg,#ff4fa3,#8b5cf6)}.k6{background:linear-gradient(135deg,#d48a00,#ff8a1f)}.k7{background:linear-gradient(135deg,#0d9488,#2f7cf6)}.k8{background:linear-gradient(135deg,#dc2626,#ff8a1f)}
.d-subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:.8rem}
.d-sub{font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:1.1rem;padding:.8rem;border:2px solid var(--line);display:flex;gap:.75rem;align-items:center;background:linear-gradient(180deg,#fff,color-mix(in srgb,var(--c) 9%,#fff))}
.d-sub:hover,.d-sub:focus-visible{border-color:var(--c)}
.d-sub svg{flex:none}.d-sub b{display:block}.d-sub small{color:var(--muted);display:block;line-height:1.35}
.d-g2{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart text{fill:var(--muted);font-size:13px;font-family:inherit}
.chart text.strong{fill:var(--ink);font-weight:700;font-size:14px}.chart text.lbl{fill:var(--ink);font-weight:600;font-size:14px}
.d-cal{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1.1rem);grid-auto-columns:1.1rem;gap:.25rem;overflow-x:auto;padding-bottom:.3rem}
.d-cal i{border-radius:.3rem;display:block}
.d-legend{display:flex;gap:.3rem;align-items:center;font-size:.8rem;color:var(--muted);margin-top:.5rem}
.d-legend i{width:.85rem;height:.85rem;border-radius:.25rem;display:inline-block}
.d-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(3rem,6rem) 2.8rem auto;gap:.6rem;align-items:center;padding:.45rem 0;border-bottom:1px dashed var(--line)}
.d-row:last-child{border:0}
.d-row3{grid-template-columns:minmax(0,1fr) auto 2.8rem}
.d-row .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.d-row small{color:var(--muted)}
.d-row b{text-align:right}
.d-mini{height:.6rem;border-radius:99px;background:#f0ecfa;overflow:hidden;display:block}.d-mini i{display:block;height:100%;border-radius:99px}
.d-btn{font:inherit;font-weight:600;font-size:.8rem;border:0;border-radius:99px;padding:.3rem .8rem;background:#efe9ff;color:#5b21b6;cursor:pointer;white-space:nowrap}
.d-tw{overflow-x:auto}
.d-table{width:100%;border-collapse:collapse;font-size:.92rem}
.d-table th,.d-table td{text-align:left;padding:.55rem .5rem;border-bottom:1px solid var(--line);white-space:nowrap}
.d-table th{color:var(--muted);font-weight:600;font-size:.8rem}
.d-tag{display:inline-flex;gap:.25rem;font-size:.78rem;padding:.12rem .55rem;border-radius:99px;font-weight:600}
.d-tag.good{background:#e3f7ea;color:#166c3b}.d-tag.warn{background:#fff3d1;color:#7a5600}.d-tag.bad{background:#fde6e7;color:#a3192b}
.d-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:.6rem}
.d-badge{text-align:center;border-radius:1rem;padding:.7rem .3rem;background:linear-gradient(160deg,#fff7d6,#ffe0f0);border:2px solid #ffd23f}
.d-badge i{font-style:normal;font-size:1.9rem;display:block}.d-badge b{font-size:.82rem;display:block;line-height:1.2}.d-badge small{font-size:.7rem;color:var(--muted)}
.d-badge.lock{background:#f4f2f8;border-color:#e2def0;filter:grayscale(1);opacity:.55}
.tip{position:fixed;left:0;top:0;pointer-events:none;background:var(--ink);color:#fff;padding:.35rem .65rem;border-radius:.6rem;font-size:.82rem;opacity:0;transition:opacity .1s;z-index:70;white-space:nowrap}
.tip.show{opacity:1}
.d-row3{grid-template-columns:minmax(0,1fr) auto 3.4rem}
@media (max-width:560px){.d-hero{padding:1rem}.d-who h1{font-size:1.45rem}.d-kpi b{font-size:1.45rem}.d-row{grid-template-columns:minmax(0,1fr) 2.8rem auto;row-gap:.3rem}.d-row .t{grid-column:1/-1;white-space:normal}.d-row3{grid-template-columns:minmax(0,1fr) auto 3rem}.d-row3 .t{grid-column:auto;white-space:nowrap}}
@media print{
 .topbar,header,.foot,.d-btns,.d-noprint,.d-btn,.toast,.tip,#confetti{display:none!important}
 body{background:#fff}main{max-width:none;padding:0}
 .dash .card,.d-kpi,.d-hero{break-inside:avoid;box-shadow:none}
 *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- open sign-up · mobile login · brothers & sisters · my subjects */
.steps{display:flex;gap:.35rem}.steps i{flex:1;height:.5rem;border-radius:99px;background:#e6e0f7}.steps i.on{background:linear-gradient(90deg,#8b5cf6,#ff4fa3)}
.rstep{display:flex;flex-direction:column;gap:.9rem}.rstep[hidden]{display:none}
.rstep .hello{margin:.2rem 0 0;font-size:1.6rem}
.classchips .chip{flex:0 0 auto;min-width:3.4rem;font-size:1rem;padding:.5rem .7rem}
.schoolpick{display:flex;flex-direction:column;gap:.3rem}
.drop{background:#fff;border:.18rem solid #8b5cf6;border-radius:.9rem;overflow:hidden;display:flex;flex-direction:column}
.drop[hidden]{display:none}
.drop button{border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left;padding:.6rem .8rem;font-size:1rem;font-weight:600}
.drop button:hover,.drop button:focus-visible{background:#f3eeff;outline:none}
.drop button small{color:var(--muted);font-weight:400}.drop .new{color:#7c3aed;border:0}
.picked{background:#eefbf3;border-radius:.9rem;padding:.6rem .8rem;font-size:1rem}
.subpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,9rem),1fr));gap:.6rem}
.spick{position:relative;border:0;border-radius:1.1rem;padding:.8rem .5rem;color:#fff;font-weight:700;font-size:1rem;background:var(--c);box-shadow:0 .3rem 0 rgba(0,0,0,.15);transition:filter .15s,opacity .15s}
.spick span{display:block;font-size:2rem;line-height:1.2}
.spick::after{content:"✔";position:absolute;top:.35rem;right:.45rem;width:1.35rem;height:1.35rem;border-radius:50%;background:#fff;color:#16a34a;font-size:.8rem;display:grid;place-items:center}
.spick.off{filter:grayscale(1);opacity:.45}.spick.off::after{content:"";background:rgba(255,255,255,.6)}
.homelinks{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;margin:.9rem 0 .3rem}
.kid small{display:block;color:var(--muted);font-weight:500;font-size:.8rem}
.kidlist{display:flex;flex-direction:column;gap:.6rem;margin:.6rem 0}
.kidrow{display:flex;align-items:center;gap:.8rem;text-align:left;border:.18rem solid var(--line);background:#fff;border-radius:1.1rem;padding:.6rem .9rem;font-size:1.05rem}
.kidrow span{font-size:2.2rem}.kidrow small{display:block;color:var(--muted);font-weight:500;font-size:.85rem}
.kidrow.now{border-color:#2ec66f;background:#eefbf3}.kidrow.add{border-style:dashed;color:#7c3aed}
.who1{text-align:center;font-size:1.3rem;font-weight:700}.who1 span{font-size:2.4rem;vertical-align:middle}

/* ---------- student photo · PIN pad · email code */
.photopick{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center}
.photopick small{color:var(--muted);font-size:.85rem}
.photo{width:7rem;height:7rem;border-radius:50%;border:.2rem dashed #8b5cf6;background:linear-gradient(135deg,#ffe6f3,#eadcff);display:grid;place-items:center;font-size:2.6rem;position:relative;padding:0}
.photo.has{border:.25rem solid #fff;box-shadow:0 0 0 .2rem #ff4fa3}
.photo span,.photo img{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;object-fit:cover;overflow:hidden}
.photo em{position:absolute;right:-.1rem;bottom:0;background:#ff4fa3;color:#fff;border-radius:50%;width:2.1rem;height:2.1rem;display:grid;place-items:center;font-style:normal;font-size:1rem;border:.2rem solid #fff}
.photo:focus-visible{outline:.2rem solid #8b5cf6;outline-offset:.2rem}
.avimg{width:1.5em;height:1.5em;border-radius:50%;object-fit:cover;vertical-align:middle;display:inline-block}
.me .avimg{width:1.9rem;height:1.9rem}
.d-av .avimg{width:100%;height:100%}
.pinpad{display:flex;flex-direction:column;gap:.7rem;align-items:center}
.pdots{display:flex;gap:.9rem;justify-content:center;padding:.3rem}
.pdots i{width:1.15rem;height:1.15rem;border-radius:50%;border:.18rem solid #8b5cf6;transition:background .1s}
.pdots i.f{background:#8b5cf6}
.pkeys{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;width:100%;max-width:17rem}
.pkeys button{border:.18rem solid var(--line);background:#fff;border-radius:1rem;padding:.55rem 0;font-size:1.5rem;font-weight:700;color:var(--ink)}
.pkeys button:hover,.pkeys button:focus-visible{border-color:#8b5cf6;outline:none;background:#f6f2ff}
.pkeys button:active{transform:scale(.95)}
.pkeys button.x{background:transparent;border-color:transparent;font-size:1rem;color:var(--muted)}
.codebox{display:flex;flex-direction:column;gap:.5rem}
.codebox[hidden]{display:none}
.codein{letter-spacing:.6rem;font-size:1.6rem;text-align:center;font-weight:700}
.center-t{text-align:center}
.form label.notify,label.notify{display:flex;flex-direction:row;align-items:center;gap:10px;font-weight:700;cursor:pointer}.notify input{width:22px;height:22px;flex:none;accent-color:#7c3aed}
/* typed answers (fill in the blank / match the pairs) in practice */
.opts.typed{display:block;width:100%;max-width:34rem;margin:0 auto;align-self:stretch}
.opts.typed .qk-fill{font-size:1.6rem}
.qtext .qk-q{white-space:pre-wrap}
.qtext.story .qk-ar{font-size:1.1rem}
.qpic .qk-img{max-height:240px}

/* ===== home hub: homework strip, Daily 5, revision, leaderboard, certificates, live test ===== */
.hub{display:flex;flex-direction:column;gap:.9rem}
.hub:empty{display:none}
.hwstrip{display:flex;flex-direction:column;gap:.5rem}
.hwstrip h3{font-size:1.1rem}
.hw{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;text-align:left;background:var(--card);border:0;border-left:.4rem solid var(--c);border-radius:1rem;padding:.7rem .9rem;box-shadow:var(--shadow);font:inherit;color:inherit;width:100%}
.hw .ic{width:2.4rem;height:2.4rem;border-radius:.8rem;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 15%,#fff);font-size:1.3rem}
.hw .tx{min-width:0}.hw .tx b{display:block;font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hw .tx small{display:block;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hw .due{text-align:right;font-weight:700;font-size:.82rem;color:var(--ink);line-height:1.25}
.hw .due .lt{color:var(--red)}.hw .due .ok{color:var(--green)}
.hw.late{border-left-color:var(--red)}.hw.late .ic{background:#ffe4e4}
.hw.done{border-left-color:var(--green);opacity:.85}.hw.done .ic{background:#dcfce7;color:#15803d;font-weight:700}
.hcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:.8rem}
.hcard{display:flex;flex-direction:column;gap:.45rem;text-align:left;background:var(--card);border:0;border-radius:1.2rem;padding:.9rem 1rem;box-shadow:var(--shadow);font:inherit;color:inherit;width:100%;border-top:.3rem solid var(--k,#8b5cf6)}
.hcard:active{transform:translateY(2px)}
.hcard .hh{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.hcard .hh b{font-size:1.05rem}.hcard .e{font-size:1.5rem}
.hcard small{font-size:.85rem}
.chip.sm{flex:none;min-width:0;padding:.15rem .55rem;font-size:.78rem;border-width:.12rem;border-radius:.7rem;margin-left:auto}
.chip.sm.new{background:#fef3c7;border-color:#f59e0b;color:#92400e}
.hcard.d5{--k:#f59e0b}.hcard.pl{--k:#10b981}.hcard.lb{--k:#8b5cf6}.hcard.ct{--k:#d97706}.hcard.lv{--k:#ec4899}
.five,.d5dots{display:flex;gap:.35rem}
.five i,.d5dots i{flex:1;max-width:2.6rem;height:1.9rem;border-radius:.6rem;background:var(--line);display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.85rem;color:var(--muted)}
.five i.f{background:#fde68a;color:#92400e}
.d5dots{justify-content:center;margin-bottom:.3rem}
.d5dots i.g{background:var(--green);color:#fff}.d5dots i.r{background:var(--red);color:#fff}.d5dots i.n{background:#fff;outline:.18rem solid #f59e0b;color:var(--ink)}
.pod{display:flex;flex-direction:column;gap:.2rem}
.pod span{display:flex;align-items:center;gap:.4rem;font-weight:600;font-size:.92rem}
.pod span i{font-style:normal;width:1.4rem;height:1.4rem;border-radius:50%;display:grid;place-items:center;font-size:.75rem;color:#fff;background:#94a3b8}
.pod span:first-child i{background:#d97706}.pod span:nth-child(3) i{background:#c2410c}
.pod span em{margin-left:auto;font-style:normal;color:var(--muted);font-size:.85rem}
.pod span.me{color:var(--purple)}
.dq{display:flex;flex-direction:column;gap:.8rem}
.dtag{font-size:.85rem;color:var(--muted);font-weight:600}
.dq .opt{min-height:4.2rem;font-size:1.8rem}
.dq .opt.text,.opt.text{font-size:1.05rem;text-align:left;padding:.7rem 1rem}
.d5end{text-align:center;display:flex;flex-direction:column;gap:.5rem;align-items:center}
.d5end .big{font-size:4rem}
.fl{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.9rem;color:var(--muted)}
.fl select,.fl input{font:inherit;font-size:1rem;padding:.55rem .7rem;border:.15rem solid var(--line);border-radius:.8rem;background:#fff;color:var(--ink)}
.ph{font-size:1rem;margin:.9rem 0 .4rem}
.pchs{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.8rem}
.pch{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border:.15rem solid var(--line);border-radius:.8rem;background:#fff;font-weight:600}
.pch input{width:1.2rem;height:1.2rem;accent-color:var(--green)}
.pch span{flex:1}
.band{font-style:normal;font-size:.72rem;font-weight:700;padding:.1rem .45rem;border-radius:.5rem;white-space:nowrap}
.band.wk{background:#fee2e2;color:#b91c1c}.band.ok{background:#fef3c7;color:#92400e}.band.st{background:#dcfce7;color:#15803d}.band.nw{background:#e0e7ff;color:#3730a3}
.plan{display:flex;flex-direction:column;gap:.35rem;margin:.9rem 0 .6rem}
.pd{display:grid;grid-template-columns:5.4rem 1fr auto;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:.8rem;background:#faf8ff;font-size:.95rem}
.pd .d{font-weight:700;color:var(--muted);font-size:.85rem}.pd .n{color:var(--muted);font-size:.8rem}
.pd.today{background:#ecfdf5;outline:.15rem solid var(--green)}.pd.today .d{color:#15803d}
.pd.ex{background:linear-gradient(90deg,#8b5cf6,#ec4899);color:#fff;font-weight:700}.pd.ex .d{color:#fff}
.podium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:.5rem;text-align:center;margin:.6rem 0 1rem}
.podium>div{display:flex;flex-direction:column;align-items:center;gap:.15rem}
.podium .av{font-size:2rem}.podium b{font-size:.95rem}.podium small{font-size:.8rem}
.podium .st{width:100%;border-radius:.7rem .7rem 0 0;color:#fff;font-weight:700;font-size:1.4rem;display:grid;place-items:center;background:#94a3b8}
.podium .st.r1{background:linear-gradient(#fbbf24,#d97706)}.podium .st.r3{background:#c2410c}
.podium .me b{color:var(--purple)}
.lbl{list-style:none;display:flex;flex-direction:column;gap:.3rem}
.lbl li{display:flex;align-items:center;gap:.6rem;padding:.45rem .7rem;border-radius:.8rem;background:#faf8ff}
.lbl .r{width:1.7rem;text-align:center;font-weight:700;color:var(--muted)}.lbl .av{font-size:1.3rem}.lbl b{flex:1}.lbl .p{font-weight:700}
.lbl li.me{background:#ede9fe;outline:.15rem solid var(--purple)}
.certs{display:flex;flex-direction:column;gap:.5rem}
.cert{display:flex;align-items:center;gap:.8rem;padding:.8rem;border-radius:1rem;background:linear-gradient(135deg,#fffbeb,#fff);border:.15rem solid #fcd34d;text-decoration:none;color:inherit}
.cert .e{font-size:2rem}.cert>span:nth-child(2){flex:1;display:flex;flex-direction:column;gap:.1rem;min-width:0}
.cert small.m{font-size:.75rem}.cert .go{font-weight:700;color:#b45309;white-space:nowrap}
.chips.four>*{flex:1 1 22%}
.smh{display:flex;gap:3px;align-items:end;height:2.4rem;margin:.7rem auto .2rem;max-width:22rem}
.smh i{flex:1;border-radius:3px 3px 0 0}
.smh i.easy{height:35%;background:#10b981}.smh i.moderate{height:65%;background:#8b5cf6}.smh i.critical{height:100%;background:#ec4899}.smh i.no{opacity:.35}
.smhl{display:block;font-size:.8rem}
.smhl .k{display:inline-block;width:.7rem;height:.7rem;border-radius:2px;margin:0 .15rem 0 .4rem;vertical-align:middle}
.smhl .k.e{background:#10b981}.smhl .k.m{background:#8b5cf6}.smhl .k.c{background:#ec4899}.smhl .k.n{background:#8b5cf6;opacity:.35}
@media (max-width:420px){.pd{grid-template-columns:4.4rem 1fr auto;font-size:.88rem}.row2 .fl{min-width:0}}

/* ===== live class test (phone) ===== */
.lvs{min-height:60vh;display:flex;flex-direction:column;justify-content:center}
.lvjoin,.lvwait,.lvres{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.lvjoin .big,.lvwait .big,.lvres .big{font-size:4rem;line-height:1}
.lvcode{font:700 3rem Fredoka,sans-serif;letter-spacing:.4em;text-align:center;width:12rem;padding:.4rem 0 .4rem .4em;border:.25rem solid var(--line);border-radius:1.2rem;color:var(--ink);background:#fff}
.lvcode:focus{outline:none;border-color:#ec4899}
.lverr{color:var(--red);font-weight:600;min-height:1.2em}
.lvjoin .bigbtn{max-width:16rem}
.lvdots{display:flex;gap:.4rem}.lvdots i{width:.7rem;height:.7rem;border-radius:50%;background:#ec4899;animation:lvb 1.2s infinite}.lvdots i:nth-child(2){animation-delay:.2s}.lvdots i:nth-child(3){animation-delay:.4s}
@keyframes lvb{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.lvq{display:flex;flex-direction:column;gap:.8rem}
.lvh{display:flex;align-items:center;gap:.7rem;font-weight:600;color:var(--muted);font-size:.9rem}
.lvbar{flex:1;height:.6rem;border-radius:99px;background:var(--line);overflow:hidden}.lvbar i{display:block;height:100%;background:linear-gradient(90deg,#f59e0b,#ec4899);transition:width 1s linear}
.lvstem{font-size:1.2rem;font-weight:600;line-height:1.45}
.lvstem .qpic{text-align:center;font-size:2.4rem}.lvstem .qk-img{max-height:30vh}
.lvopts{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.lvo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-height:6.5rem;border:0;border-radius:1.2rem;background:var(--c);color:#fff;font:600 1.15rem Fredoka,sans-serif;padding:.6rem;box-shadow:0 .35rem 0 rgba(0,0,0,.25);word-break:break-word}
.lvo .sh{font-size:1.6rem;line-height:1}
.lvo:active{transform:translateY(.25rem);box-shadow:none}
.lvo.dim{opacity:.35}
.lvpick{width:6rem;height:6rem;border-radius:1.4rem;background:var(--c);color:#fff;font-size:3rem;display:grid;place-items:center;box-shadow:0 .35rem 0 rgba(0,0,0,.25)}
.lvme{font-weight:700;color:var(--purple);font-size:1.1rem}
.lvres.ok h2{color:var(--green)}.lvres.no h2{color:var(--orange)}
.lvres .lbl{width:100%;text-align:left;margin-top:.4rem}
@media (max-width:340px){.lvopts{grid-template-columns:1fr}.lvo{min-height:4.5rem}}

/* ===== student dashboard v38: bell, profile menu, notice, countdown, weekly goal, tiles, practice tabs, saved, my tests, mock tests, help */
.topbar{position:relative}
.topright{display:flex;align-items:center;gap:.45rem}
.bell{position:relative}
.bell .bdg{position:absolute;top:-.25rem;right:-.3rem;min-width:1.25rem;height:1.25rem;padding:0 .3rem;border-radius:999px;background:var(--red);color:#fff;font-size:.72rem;font-weight:700;display:grid;place-items:center;line-height:1}
.me .caret{font-size:.75rem;color:var(--muted)}
.memenu{position:absolute;right:max(1rem,env(safe-area-inset-right));top:calc(100% + .1rem);z-index:40;background:var(--card);border-radius:1.1rem;box-shadow:0 .6rem 1.6rem rgba(43,35,80,.18);padding:.4rem;display:flex;flex-direction:column;min-width:15rem;border:.12rem solid var(--line)}
.memenu button{border:0;background:none;text-align:left;padding:.7rem .8rem;border-radius:.8rem;font-weight:600;font-size:1rem}
.memenu button:hover,.memenu button:focus-visible{background:#f4f0ff}
#logoutBtn{color:#b42318}
@media (max-width:34rem){.brand span{display:none}.me #meName{display:none}.topright{gap:.3rem}.iconbtn{width:2.3rem;height:2.3rem;font-size:1.05rem}}

.notice{display:flex;gap:.7rem;align-items:flex-start;text-align:left;width:100%;border:0;border-radius:1.1rem;padding:.75rem .9rem;background:#e7f1ff;color:#0c3d7a;box-shadow:var(--shadow);font:inherit}
.notice .e{font-size:1.4rem;line-height:1}.notice .tx{display:flex;flex-direction:column;gap:.15rem}.notice b{font-weight:600}.notice small{color:#2f5f9e}
.minis{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.minis.one{grid-template-columns:1fr}
.mini{display:flex;flex-direction:column;gap:.3rem;text-align:left;background:var(--card);border:0;border-radius:1.2rem;padding:.8rem .9rem;box-shadow:var(--shadow);font:inherit;color:inherit;width:100%}
.mini b{font-size:.95rem}.mini .big{font-size:1.7rem;font-weight:700;line-height:1.1;color:var(--navy)}.mini small{font-size:.8rem}
.mini.ex{border-top:.3rem solid #f97316}.mini.gl{border-top:.3rem solid var(--green)}
.gbar{display:block;height:.7rem;border-radius:999px;background:var(--line);overflow:hidden;margin:.35rem 0 .1rem}
.gbar i{display:block;height:100%;background:var(--green);border-radius:999px;transition:width .4s}
.mini.won .gbar i{background:linear-gradient(90deg,var(--green),var(--gold))}
.hcard.wide{width:100%}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:.9rem}
@media (min-width:52rem){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tile{position:relative;display:flex;flex-direction:column;gap:.25rem;text-align:left;background:var(--card);border:0;border-radius:1.2rem;padding:.85rem .9rem;box-shadow:var(--shadow);font:inherit;color:inherit;min-height:7.2rem;border-top:.3rem solid var(--k)}
.tile:active{transform:translateY(2px)}
.tile .e{font-size:1.7rem;line-height:1}.tile b{font-size:1.05rem}.tile small{font-size:.8rem;line-height:1.3}
.tb{align-self:flex-start;margin-top:auto;font-size:.75rem;font-weight:700;border-radius:.6rem;padding:.12rem .5rem}
.tb.red{background:#fee4e2;color:#b42318}.tb.green{background:#dcfae6;color:#067647}

.ptabs{display:flex;gap:.35rem;background:#f4f0ff;border-radius:1rem;padding:.3rem;margin-bottom:.8rem}
.ptabs button{flex:1;border:0;background:none;border-radius:.75rem;padding:.55rem .4rem;font-weight:600;font-size:.95rem;color:var(--muted)}
.ptabs button.on{background:var(--card);color:var(--ink);box-shadow:0 .15rem 0 rgba(43,35,80,.12)}
.ptabs small{font-size:.75rem}
.savebtn{border:.15rem solid var(--line);background:#fff;border-radius:999px;padding:.3rem .75rem;font-weight:600;font-size:.85rem;color:var(--muted)}
.savebtn.on{background:#fff4d6;border-color:#f5c451;color:#8a5a00}
.savebtn.sm{padding:.15rem .55rem;font-size:.78rem;margin-left:auto}
.qcard .savebtn{position:absolute;right:.7rem;bottom:.8rem}
.dtag{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ts-rv .rh{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.svq{border:.15rem solid var(--line);border-radius:1rem;padding:.7rem .8rem;margin-top:.6rem;text-align:left}
.svh{display:flex;justify-content:space-between;align-items:center;gap:.5rem}.svh .link{padding:.2rem;font-size:.85rem}
.svt{margin:.3rem 0;font-weight:500}.sva{color:#067647;font-weight:600;font-size:.92rem}

.mt{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;border:0;border-bottom:.12rem solid var(--line);background:none;padding:.75rem .2rem;font:inherit;color:inherit}
.mt:last-child{border-bottom:0}
.mt .ic{flex:none;width:2.6rem;height:2.6rem;border-radius:.9rem;display:grid;place-items:center;font-size:1.3rem;background:color-mix(in srgb,var(--c) 16%,#fff)}
.mt .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}.mt .tx b{font-weight:600;overflow-wrap:anywhere}.mt .tx small{font-size:.8rem}
.mt .st{flex:none;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:.05rem;max-width:7.5rem}.mt .st b{font-size:.92rem}.mt .st small{font-size:.75rem}
.mt .st b.go{color:var(--green)}.mt .st b.lt{color:#b42318}

#mkBox fieldset{margin-bottom:.4rem}
#mkBox legend{display:flex;align-items:center;gap:.5rem;width:100%}
#mkBox legend .link{margin-left:auto;font-size:.9rem;padding:.1rem .3rem}
.mkch{display:flex;flex-direction:column;gap:.35rem;max-height:22rem;overflow:auto;padding:.1rem}
.mkc{display:flex;align-items:center;gap:.6rem;border:.15rem solid var(--line);border-radius:.9rem;padding:.55rem .7rem;font-weight:500;cursor:pointer}
.mkc input{width:1.25rem;height:1.25rem;flex:none;accent-color:var(--purple)}
.mkc span{flex:1}.mkc small{flex:none;font-size:.78rem}
.mkc:has(input:checked){border-color:var(--purple);background:#f6f2ff}

.nf{display:flex;align-items:flex-start;gap:.7rem;width:100%;text-align:left;border:0;border-bottom:.12rem solid var(--line);background:none;padding:.75rem .3rem;font:inherit;color:inherit;position:relative}
.nf:last-child{border-bottom:0}
.nf .e{font-size:1.4rem;line-height:1.2}.nf .tx{flex:1;display:flex;flex-direction:column;gap:.1rem;min-width:0}.nf .tx b{font-weight:600;overflow-wrap:anywhere}
.nf .tx small{font-size:.85rem;overflow-wrap:anywhere}.nf em{font-style:normal;font-size:.75rem;color:var(--muted)}
.nf.new{background:#fff8e6;border-radius:.8rem}
.nf .dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--red);flex:none;margin-top:.45rem}
.help details{border-bottom:.12rem solid var(--line);padding:.6rem .2rem}.help details:last-child{border-bottom:0}
.help summary{font-weight:600;font-size:1.05rem;cursor:pointer;padding:.2rem 0}
.help p,.help ul{margin-top:.4rem;line-height:1.5;color:var(--ink)}.help ul{padding-left:1.2rem;display:flex;flex-direction:column;gap:.3rem}
#setBox{margin-top:1rem}
.replinks{margin-top:1rem}

/* ---------- Guru: dialog, loader, splash */
.mdlg{position:fixed;inset:0;z-index:120;background:rgba(43,35,80,.5);display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .18s}
.mdlg[hidden]{display:none}.mdlg.in{opacity:1}
.mdlg .box{background:#fff;color:var(--ink);border-radius:24px;max-width:360px;width:100%;padding:22px 18px 16px;text-align:center;box-shadow:0 8px 0 rgba(43,35,80,.18);margin-top:40px;transform:scale(.9);transition:transform .2s cubic-bezier(.3,1.5,.6,1);font-family:Fredoka,system-ui,sans-serif}
.mdlg.in .box{transform:scale(1)}
.mdlg .gu{width:84px;height:84px;border-radius:50%;background:#fff;border:4px solid #f9be28;margin:-64px auto 8px;overflow:hidden;box-shadow:0 4px 0 rgba(43,35,80,.12)}
.mdlg .gu img{width:100%;height:100%;display:block}
.mdlg b{display:block;font-size:1.25rem;font-weight:600;margin-bottom:.3rem}
.mdlg p{color:var(--muted);margin:0 0 1rem;line-height:1.45;font-size:.95rem}
.mdlg .bt{display:flex;gap:.6rem}
.mdlg .bt button{flex:1;border:0;border-radius:14px;padding:.75rem .5rem;font:inherit;font-weight:600;font-size:1rem;cursor:pointer;box-shadow:0 3px 0 rgba(43,35,80,.15)}
.mdlg .bt button:active{transform:translateY(2px);box-shadow:none}
.mdlg .no{background:#f1eefc;color:var(--ink)}
.mdlg .ok.red{background:#ff4d4d;color:#fff}.mdlg .ok.blue{background:#22aadd;color:#fff}.mdlg .ok.green{background:#22b06b;color:#fff}
.mdlg button:focus-visible{outline:3px solid #f9be28;outline-offset:2px}
.gload{display:flex;flex-direction:column;align-items:center;gap:.7rem;padding:1.6rem .5rem;color:var(--muted);font-weight:500;text-align:center}
.gload .ring{position:relative;width:96px;height:96px}
.gload .ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:5px solid #ffe7b0;border-top-color:#ff8a1f;border-right-color:#22aadd;animation:gspin 1s linear infinite}
.gload img{position:absolute;inset:9px;width:78px;height:78px;border-radius:50%;background:#fff;animation:gbob 1.6s ease-in-out infinite}
.ts .gload{color:var(--e-mt,#6b6290)}
@keyframes gspin{to{transform:rotate(360deg)}}
@keyframes gbob{50%{transform:translateY(-4px)}}
.splash{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:linear-gradient(160deg,#fff4d6,#ffe0cc);transition:opacity .45s;animation:spAuto .45s 8s forwards}
.splash.out{opacity:0;pointer-events:none}
.splash .sp-in{display:flex;flex-direction:column;align-items:center;gap:.6rem;font-family:Fredoka,system-ui,sans-serif;color:var(--ink)}
.splash .sp-guru{width:min(46vw,190px);height:min(46vw,190px);border-radius:50%;background:#fff;box-shadow:0 0 0 10px rgba(255,255,255,.55),0 10px 30px rgba(255,138,31,.25);overflow:hidden;animation:spPop .9s ease-out both}
.splash .sp-guru img{width:100%;height:100%;display:block}
.splash b{font-size:1.8rem;font-weight:600;margin-top:.6rem;animation:spUp .6s .3s both}
.splash span{color:var(--muted);letter-spacing:.04em;animation:spUp .6s .45s both}
.splash .sp-dots{margin-top:.4rem}
.splash .sp-dots i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#ff8a1f;margin:0 4px;animation:gbob .9s infinite}
.splash .sp-dots i:nth-child(2){animation-delay:.15s;background:#22aadd}.splash .sp-dots i:nth-child(3){animation-delay:.3s;background:#22b06b}
@keyframes spPop{0%{transform:scale(.55);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes spUp{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes spAuto{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.gload .ring::before,.gload img,.splash *{animation:none!important}}