/* website layout on top of the app theme: no phone frame, responsive */
@media (min-width:520px){
  #app{width:100%;max-width:980px;height:100dvh;border-radius:0;border:0;box-shadow:none;margin:0 auto;background:transparent}
  body{display:block}
}
main{padding:18px clamp(14px,4vw,32px) 16px}
nav{margin:0 auto 14px;width:calc(100% - 28px);max-width:640px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.grid>*{margin-top:0!important}
.sheet{max-width:560px;margin:0 auto}
.ov{position:fixed;align-items:flex-end;justify-content:center}
@media (min-width:700px){.ov{align-items:center}.sheet{border-radius:30px;max-height:88%}}
.toast{position:fixed;inset-inline:auto;left:50%;transform:translateX(-50%);max-width:92vw;z-index:50}
.comp{position:sticky;bottom:0;margin:0;background:var(--surface);border-radius:18px 18px 0 0}
.row.wrap{flex-wrap:wrap}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:8px 6px;text-align:right;border-bottom:1px solid var(--line)}
.tbl th{color:var(--muted);font-weight:600}
.m img.pic{max-width:100%;max-height:260px;border-radius:12px;display:block}
.m .del{border:0;background:none;color:var(--bad);cursor:pointer;font-size:12px;padding:0 0 0 6px}
.m.gone{opacity:.55;font-style:italic}
.who .role{font-weight:400;color:var(--muted);font-size:11px;margin-inline-start:4px}
.tabs{display:flex;gap:6px;margin-bottom:6px}
.tabs button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:9px;cursor:pointer;font-weight:600;color:var(--muted)}
.tabs button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.loginbox{max-width:440px;margin:0 auto;width:100%}
.badge-n{background:var(--bad);color:#fff;border-radius:99px;font-size:11px;padding:0 6px;margin-inline-start:4px}
@media print{
  header,nav,.noprint,.toast,.ov{display:none!important}
  #app,main{overflow:visible!important;height:auto!important;max-width:none}
  body{background:#fff}
}

.apptbar{position:sticky;top:-18px;z-index:3;background:var(--soft);border:1.5px solid var(--brand);border-radius:16px;padding:8px 12px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.apptbar .t1{display:flex;align-items:center;gap:6px}.apptbar svg.i{width:18px;height:18px}
.apptbar .del{border:0;background:none;color:var(--bad);cursor:pointer;font-size:12px}
.att.gone{opacity:.55}.att.gone b{text-decoration:line-through}

/* emoji + a bit of fun */
.emo{width:46px;height:46px;border-radius:15px;background:var(--soft);display:grid;place-items:center;font-size:25px;flex:none;transition:transform .25s}
.card.tap{transition:transform .18s, box-shadow .18s}
.card.tap:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(31,90,115,.14)}
.card.tap:hover .emo{transform:rotate(-8deg) scale(1.12)}
.hero h2{animation:pop .5s ease-out both}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti span{position:absolute;top:-40px;animation:fall 2.4s ease-in both}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg);opacity:.2}}
@media (prefers-reduced-motion:reduce){.confetti,.hero h2{display:none}.card.tap:hover{transform:none}}

.opts{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.opt{display:flex;align-items:center;gap:12px;border:2px solid var(--line);background:#fff;border-radius:18px;padding:12px;cursor:pointer;transition:border-color .15s, background .15s}
.opt.on{border-color:var(--brand);background:var(--soft)}
.opt .tick{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-weight:700;color:#fff;flex:none}
.opt.on .tick{background:var(--brand);border-color:var(--brand)}
.stepper{display:inline-flex;align-items:center;gap:14px;margin-top:8px;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:4px 8px}
.stepper button{width:34px;height:34px;border-radius:10px;border:0;background:var(--soft);color:var(--strong);font-size:20px;font-weight:700;cursor:pointer}
.stepper b{min-width:64px;text-align:center}

/* splash: full-window on desktop/tablet, scales with the viewport */
@media (min-width:520px){
  .splash{position:fixed;inset:0;z-index:100;padding:40px}
  .sp-frame{inset:clamp(16px,3vmin,36px);border-radius:40px 40px 180px 180px/40px 40px 140px 140px}
  .sp-logo{width:clamp(250px,34vmin,380px);height:clamp(250px,34vmin,380px)}
  .sp-name{font-size:clamp(40px,6vmin,64px)}
  .sp-sub{font-size:clamp(15px,2.2vmin,20px)}
  .sp-load{width:clamp(120px,18vmin,200px);bottom:clamp(58px,9vmin,90px)}
  .sp-skip{bottom:clamp(26px,4.5vmin,44px)}
}

/* chat: messages fill the screen and the composer stays at the bottom, even when the chat is short/empty */
main:has(>.comp){display:flex;flex-direction:column}
main:has(>.comp)>.msgs{flex:1 0 auto}
main:has(>.comp)>.comp{margin-top:12px;flex:none}

/* ================= desktop polish ================= */
/* animations: only on NEW content (page change / sheet opened) — see render() */
.sheet,.ov{animation:none}
.ov.anim{animation:ovin .22s ease-out both}
.sheet.anim{animation:sheetin .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes ovin{from{opacity:0}to{opacity:1}}
@keyframes sheetin{from{opacity:0;transform:translateY(34px) scale(.98)}to{opacity:1;transform:none}}
main.enter>*{animation:enter .45s cubic-bezier(.2,.8,.2,1) both}
main.enter>*:nth-child(2){animation-delay:.05s}main.enter>*:nth-child(3){animation-delay:.1s}
main.enter>*:nth-child(4){animation-delay:.15s}main.enter>*:nth-child(n+5){animation-delay:.2s}
main.enter .grid>*{animation:enter .45s cubic-bezier(.2,.8,.2,1) both}
main.enter .grid>*:nth-child(2){animation-delay:.06s}main.enter .grid>*:nth-child(3){animation-delay:.12s}
main.enter .grid>*:nth-child(4){animation-delay:.18s}main.enter .grid>*:nth-child(n+5){animation-delay:.24s}
@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.btn{transition:transform .15s,box-shadow .15s,opacity .15s,background .15s}
.btn:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 6px 14px rgba(31,90,115,.18)}
.btn:active:not([disabled]){transform:translateY(0)}
.scroller button,.seg button,.days button,.chip,.pill,.back{transition:background .15s,color .15s,border-color .15s,transform .15s}
.scroller button:hover,.seg button:hover,.days button:hover{border-color:var(--brand)}
.pill:hover,.back:hover{filter:brightness(.95)}
.card{transition:box-shadow .18s,transform .18s}
header .lg{transition:transform .4s}header:hover .lg{transform:rotate(-6deg) scale(1.06)}
.m{animation:msgin .25s ease-out both}
@keyframes msgin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.toast{animation:toastin .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes toastin{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){main.enter>*,main.enter .grid>*,.ov.anim,.sheet.anim,.m,.toast{animation:none}.btn:hover{transform:none}}

/* tablet: roomier */
@media (min-width:700px){
  main{font-size:15.5px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
  .card{padding:18px}
  .sheet{padding:14px 26px 26px;max-width:600px}
  .toast{bottom:36px}
}

/* desktop: sidebar + wider canvas */
@media (min-width:1000px){
  body{font-size:16px}
  #app{max-width:1280px;padding:16px 28px 0}
  header{grid-column:1/-1;border-radius:24px;padding:16px 22px;box-shadow:0 3px 0 var(--hi),0 12px 30px rgba(31,90,115,.16)}
  header h1{font-size:28px}
  .lg{width:52px;height:52px}
  #app:has(>nav){display:grid;grid-template-columns:250px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:24px;row-gap:18px}
  #app:has(>nav)>header{grid-column:1/-1;grid-row:1}
  #app:has(>nav)>nav{grid-column:1;grid-row:2;align-self:start;position:sticky;top:0;flex-direction:column;gap:6px;width:auto;max-width:none;margin:0;padding:12px;border-radius:24px;box-shadow:0 12px 30px rgba(31,90,115,.16)}
  #app:has(>nav)>nav button{flex-direction:row;justify-content:flex-start;gap:12px;padding:13px 16px;font-size:15.5px;border-radius:16px}
  #app:has(>nav)>nav button:not(.on):hover{background:var(--soft);color:var(--strong)}
  main{scrollbar-color:var(--hi) transparent}
  #app:has(>nav)>main{grid-column:2;grid-row:2;padding:4px 6px 32px 2px;max-height:100%}
  #app:not(:has(>nav))>main{padding:18px 0 0}
  main:has(>.comp)>*{width:100%;max-width:900px;margin-inline:auto}
  main:has(>.comp)>.comp{border-radius:20px 20px 0 0;border:1px solid var(--line);border-bottom:0}
  .hero{padding:28px 32px}.hero h2{font-size:36px}.hero p{font-size:16px}
  .stat b{font-size:34px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
  .m{max-width:70%;font-size:15.5px}
  .loginbox{max-width:480px}
}

/* ================= feature tour (spotlight + blur) ================= */
.cm{position:fixed;inset:0;z-index:200;animation:ovin .3s ease-out both}
.cm.out{opacity:0;transition:opacity .25s}
.cm-p{position:fixed;background:rgba(20,44,58,.32);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);transition:left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1),height .45s cubic-bezier(.2,.8,.2,1)}
.cm-ring{position:fixed;border-radius:20px;border:3px solid var(--hi);box-shadow:0 0 0 4px rgba(255,255,255,.55),0 0 34px rgba(215,175,106,.55);transition:all .45s cubic-bezier(.2,.8,.2,1);animation:cmpulse 2.2s ease-in-out infinite}
@keyframes cmpulse{0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.55),0 0 22px rgba(215,175,106,.4)}50%{box-shadow:0 0 0 7px rgba(255,255,255,.35),0 0 40px rgba(215,175,106,.7)}}
.cm-tip{position:fixed;background:var(--surface);border-radius:22px;padding:16px 18px 14px;box-shadow:0 18px 44px rgba(10,30,45,.3);transition:left .45s cubic-bezier(.2,.8,.2,1),top .45s cubic-bezier(.2,.8,.2,1)}
.cm-tip.pop>*{animation:enter .35s cubic-bezier(.2,.8,.2,1) both}
.cm-tip h3{font-family:Amiri,"IBM Plex Sans Arabic",Tajawal,serif;font-size:22px;margin:2px 0 4px;color:var(--strong)}
.cm-tip p{margin:0 0 12px;color:var(--ink);font-size:14.5px;line-height:1.85}
.cm-n{font-size:12px;color:var(--muted);font-weight:600}
.cm-b{display:flex;align-items:center;gap:8px}
.cm-b .btn{width:auto;min-width:84px}
.cm-skip{border:0;background:none;color:var(--muted);cursor:pointer;font-size:14px;padding:6px}
@media (prefers-reduced-motion:reduce){.cm,.cm-ring,.cm-tip.pop>*{animation:none}.cm-p,.cm-ring,.cm-tip{transition:none}}
.tourlink{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);border:0;background:var(--surface);color:var(--strong);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 8px 20px rgba(31,90,115,.16);z-index:5}

/* ================= colour refresh: warm cream + deep teal + gold (from the logo) ================= */
:root{
  --page:#EDEAE2;--bg:#F6F4EE;--surface:#FFFFFF;--ink:#14283A;--muted:#586775;--line:#E4E0D5;
  --brand:#17718A;--brand-ink:#fff;--strong:#0F4C63;--soft:#E2F0F3;--me:#D3EAEF;--chrome:#FFFFFF;
  --hero:#E2F0F3;--hero-ink:#14283A;--hi:#D4A24C;
  --ok:#0F7A58;--ok-bg:#DCF3E9;--bad:#BE3350;--bad-bg:#FCE4E8;--warn:#7C5100;--warn-bg:#FBF0D6;--wa:#12904B;
  --c-p:#C2456B;--c-m:#2F6FBF;--c-s:#1B8A6B;--c-q:#C98A10;--c-u:#6B55B5;
  --shadow:0 1px 2px rgba(20,40,58,.05),0 8px 22px rgba(20,40,58,.06);
}
html,body{background:var(--bg)}
body{background:linear-gradient(180deg,#FBF9F4,#EAF1F1) fixed}
#app{background:transparent}
header{background:rgba(255,255,255,.92);box-shadow:0 3px 0 var(--hi),0 10px 26px rgba(20,40,58,.08)}
header h1{color:var(--strong)}
.card{border-color:var(--line);box-shadow:var(--shadow)}
.t2,.note,.field label{color:var(--muted)}
.btn{background:linear-gradient(135deg,#1F8AA3,#0F5F79);box-shadow:0 8px 16px rgba(15,95,121,.26)}
.btn.acc{background:var(--soft);color:var(--strong)}
.btn.wa{background:linear-gradient(135deg,#1FA463,#0F7A3F);box-shadow:0 8px 16px rgba(15,122,63,.25)}
.btn.ghost{border-color:#B7D3DB}
.scroller button.on,.seg button.on{background:linear-gradient(135deg,#1F8AA3,#0F5F79);border-color:transparent;box-shadow:0 6px 12px rgba(15,95,121,.25)}
.scroller button,.seg button{color:#4A5A67;border-color:var(--line)}
.scroller button:hover:not(.on){background:var(--soft);color:var(--strong)}
nav{box-shadow:0 8px 24px rgba(20,40,58,.12)}
nav button{color:#6B7A86}
nav button.on{background:var(--soft);color:var(--strong)}
nav button.on svg.i{color:var(--brand)}
.hero{position:relative;background:linear-gradient(135deg,#1F8AA3 0%,#0F4C63 100%);color:#fff;box-shadow:0 14px 30px rgba(15,76,99,.25)}
.hero::after{content:"";position:absolute;inset-inline-start:-40px;bottom:-60px;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle at 35% 35%,rgba(212,162,76,.55),rgba(212,162,76,0) 70%);pointer-events:none}
.hero h2{color:#fff}
.hero p{color:rgba(255,255,255,.92)}
.hero .badge{background:rgba(255,255,255,.18);color:#fff}
.chip{background:var(--soft);color:var(--strong)}
.segs i.on,.bar i{background:linear-gradient(90deg,#D4A24C,#C98A10)}
.card.course,.card[style*="--cat"]{border-inline-start-color:var(--cat)}
.price{color:var(--strong)}
.stat div{border-color:var(--line)}
.stat b{color:var(--strong)}
.m{border-color:var(--line)}
.m.me{background:var(--me);color:var(--ink)}
.m .who{color:var(--strong)}
.apptbar{background:#FFF8E8;border-color:var(--hi)}
.apptbar .t1{color:#7C5100}
.trk{background:#FFF8E8;border-color:var(--hi)}
.grab{background:#D8D4C8}
.empty{background:rgba(255,255,255,.7);border-color:#D8D4C8}
.toast{background:#14283A;border-inline-start-color:var(--hi)}
.splash{background:linear-gradient(165deg,#0F4C63 0%,#17718A 58%,#1F8AA3 100%)}
.sp-frame{border-color:rgba(212,162,76,.55)}
.sp-sub{color:#F1D9A5}
.sp-load i{background:var(--hi)}
.tourlink{color:var(--strong)}
.cm-ring{border-color:var(--hi)}
.cm-tip h3{color:var(--strong)}
.w-title,.wtop h1{color:var(--strong)}

/* ================= vivid: "colourful school notebooks" =================
   one loud idea: every subject owns a saturated colour (its course tile, its progress). The rest stays calm. */
:root{
  --bg:#F4F6FF;--page:#E9ECF8;--ink:#1B2744;--muted:#5B6585;--line:#E3E7F5;
  --brand:#3B5BFF;--strong:#2434B8;--soft:#E8ECFF;--me:#DDE4FF;--hero:#E8ECFF;--hi:#FFC531;
  --c-p:#F0436B;--c-m:#2E9BFF;--c-s:#12A672;--c-q:#FF9F1C;--c-u:#8A52F5;
  --shadow:0 1px 2px rgba(27,39,68,.05),0 10px 24px rgba(36,52,184,.07);
  --display:"Baloo Bhaijaan 2","IBM Plex Sans Arabic",Tajawal,sans-serif;
}
body{background:linear-gradient(180deg,#F8F9FF,#EAEEFF) fixed}
.disp,header h1,.wtop h1,.price,.stat b,.hero h2,.sheet h3,.h2,.w-title,.cm-tip h3,.tour-card h2{font-family:var(--display);font-weight:800}
header{box-shadow:0 3px 0 var(--hi),0 10px 26px rgba(36,52,184,.10)}
header h1{color:var(--ink)}
.btn{font-family:var(--display);font-weight:700;font-size:16px;background:linear-gradient(135deg,#5070FF,#2F40DE);box-shadow:0 8px 18px rgba(47,64,222,.30);transition:transform .12s,box-shadow .15s}
.btn:hover:not([disabled]){box-shadow:0 12px 22px rgba(47,64,222,.34)}
.btn:active:not([disabled]){transform:scale(.96)}
.btn.acc{background:var(--soft);color:var(--strong);box-shadow:none}
.btn.wa{background:linear-gradient(135deg,#27C078,#0E8F4D);box-shadow:0 8px 18px rgba(14,143,77,.28)}
.btn.out{background:#fff;color:var(--ink);box-shadow:none}
.scroller button.on,.seg button.on{background:linear-gradient(135deg,#5070FF,#2F40DE);box-shadow:0 6px 14px rgba(47,64,222,.28)}
.scroller button{font-weight:600}
nav button.on{background:var(--soft);color:var(--strong)}
nav button.on svg.i{color:var(--brand)}
.chip{background:var(--soft);color:var(--strong)}
.segs i.on,.bar i{background:linear-gradient(90deg,#FFC531,#FF9F1C)}
.card.course .segs i.on,.card[class*=" c-"] .segs i.on{background:var(--cat)}
.stat div:nth-child(1){background:#E8ECFF;border-color:transparent}
.stat div:nth-child(2){background:#DDF6EB;border-color:transparent}
.stat div:nth-child(3){background:#FFE6EC;border-color:transparent}
.stat div:nth-child(4){background:#FFF1D6;border-color:transparent}
.stat b{color:var(--ink)}
.emo{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}

/* student hero: navy to royal, with subject stickers that pop in once */
.hero{background:linear-gradient(135deg,#1B2744 0%,#2434B8 62%,#3B5BFF 100%);box-shadow:0 16px 32px rgba(36,52,184,.28);min-height:132px;display:flex;flex-direction:column;justify-content:center}
.hero::after{background:radial-gradient(circle at 40% 40%,rgba(255,197,49,.65),rgba(255,197,49,0) 68%);width:230px;height:230px;inset-inline-start:-50px;bottom:-90px}
.hero h2{font-size:clamp(28px,5vw,40px);line-height:1.25}
.hero p{font-size:16px}
.hero .stk{position:absolute;display:grid;place-items:center;width:52px;height:52px;border-radius:18px;background:rgba(255,255,255,.16);backdrop-filter:blur(2px);font-size:28px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.hero .s1{inset-inline-start:22px;top:16px;transform:rotate(-9deg)}
.hero .s2{inset-inline-start:86px;top:46px;transform:rotate(7deg)}
.hero .s3{inset-inline-start:30px;bottom:14px;transform:rotate(5deg)}
.hero .s4{inset-inline-start:112px;bottom:10px;transform:rotate(-7deg)}
main.enter .hero .stk{animation:stkin .55s cubic-bezier(.2,1.5,.4,1) both}
main.enter .hero .s2{animation-delay:.1s}main.enter .hero .s3{animation-delay:.2s}main.enter .hero .s4{animation-delay:.3s}
@keyframes stkin{from{opacity:0;transform:translateY(14px) scale(.4) rotate(-20deg)}}
@media (max-width:520px){.hero .stk{width:42px;height:42px;font-size:22px}.hero .s2{inset-inline-start:66px}.hero .s4{inset-inline-start:90px}}

/* student course tiles: the subject colour IS the card */
.card.course{border:0!important;color:#fff;border-radius:26px;position:relative;overflow:hidden;
  background:linear-gradient(145deg,var(--cat) 0%,color-mix(in srgb,var(--cat) 68%,#000) 135%);
  box-shadow:0 14px 26px color-mix(in srgb,var(--cat) 36%,transparent)}
.card.course::after{content:"";position:absolute;inset-inline-start:-34px;bottom:-46px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.13);pointer-events:none}
.card.course>*{position:relative;z-index:1}
.card.course .t1{color:#fff;font-family:var(--display);font-size:19px;font-weight:700}
.card.course .t2{color:rgba(255,255,255,.9)}
.card.course .emo{background:rgba(255,255,255,.24);box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
.card.course .price,.card.course .price small{color:#fff}
.card.course .chip{background:#fff;color:var(--ink)}
.card.course:hover{transform:translateY(-4px) rotate(-.5deg);box-shadow:0 20px 34px color-mix(in srgb,var(--cat) 44%,transparent)}
.card.course:hover .emo{transform:rotate(-10deg) scale(1.12)}
.card.course:active{transform:scale(.98)}

/* chat: my bubble is royal blue, the rest stay white */
.m.me{background:linear-gradient(135deg,#4F6BFF,#2F40DE);color:#fff;border-color:transparent}
.m.me .who,.m.me small,.m.me a,.m.me .lk{color:#fff}
.m.me .att{background:rgba(255,255,255,.18);color:#fff}
.m.me .att .ae{color:#fff}
.comp{border-color:var(--line)}
.apptbar,.trk{background:#FFF6D9;border-color:var(--hi)}
.opt.on{background:#EEF1FF}
.empty{border-color:#C9D1F0;background:rgba(255,255,255,.75)}
.toast{background:var(--ink);border-inline-start-color:var(--hi)}

/* splash + login */
.splash{background:linear-gradient(165deg,#1B2744 0%,#2434B8 58%,#3B5BFF 100%)}
.sp-frame{border-color:rgba(255,197,49,.6)}
.sp-sub{color:#FFD879}
.sp-load i{background:var(--hi)}
.tour-card h2,.cm-tip h3{color:var(--ink)}
@media (prefers-reduced-motion:reduce){main.enter .hero .stk{animation:none}.card.course:hover{transform:none}}

/* vivid background: soft colour blobs behind the content */
:root{--bg:#EEF1FF;--page:#E3E8FF}
body{background:
  radial-gradient(520px 420px at 8% 6%,rgba(255,197,49,.38),transparent 70%),
  radial-gradient(560px 460px at 96% 14%,rgba(240,67,107,.22),transparent 70%),
  radial-gradient(620px 520px at 88% 96%,rgba(46,155,255,.30),transparent 70%),
  radial-gradient(520px 440px at 6% 92%,rgba(18,166,114,.22),transparent 70%),
  linear-gradient(180deg,#F4F6FF,#E6EBFF) fixed;background-attachment:fixed}
main{background:transparent}
.card,.m:not(.me),.comp,.sheet{background:#fff}

/* ================= kids-school look (medinakids-style) =================
   white page, floating rounded header, sky-blue illustrated banner, pastel tiles, pink pill buttons */
:root{
  --bg:#FFFFFF;--page:#FFF8FB;--ink:#2A2F4A;--muted:#6B7391;--line:#F1E6EC;
  --brand:#F2487A;--strong:#C21F5B;--soft:#FFE6EE;--me:#FFD9E5;--hero:#DFF2FF;--hi:#FFC531;
  --c-p:#F2487A;--c-m:#3FA9F5;--c-s:#2DB77E;--c-q:#FFB020;--c-u:#9B6BF2;
  --shadow:0 2px 0 rgba(242,72,122,.06),0 14px 30px rgba(42,47,74,.08);
}
body{background:
  radial-gradient(420px 360px at 4% 8%,rgba(45,183,126,.13),transparent 70%),
  radial-gradient(460px 380px at 98% 40%,rgba(242,72,122,.12),transparent 70%),
  radial-gradient(520px 420px at 10% 100%,rgba(63,169,245,.14),transparent 70%),#fff;background-attachment:fixed}
header{background:#fff;border-radius:30px;margin:10px 12px 0;box-shadow:0 12px 30px rgba(42,47,74,.09)}
header h1{color:var(--ink);font-family:var(--display)}
.btn{background:linear-gradient(135deg,#FF6B97,#F2487A);border-radius:999px;box-shadow:0 10px 20px rgba(242,72,122,.30)}
.btn:hover:not([disabled]){box-shadow:0 14px 24px rgba(242,72,122,.36)}
.btn.acc{background:var(--soft);color:var(--strong)}
.btn.out{background:#fff;border:2px solid var(--line);color:var(--ink)}
.scroller button{border-radius:999px;background:#fff;border:2px solid var(--line)}
.scroller button.on,.seg button.on{background:linear-gradient(135deg,#FF6B97,#F2487A);color:#fff;border-color:transparent;box-shadow:0 8px 16px rgba(242,72,122,.28)}
nav{background:#fff}
nav button.on{background:var(--soft);color:var(--strong)}
nav button.on svg.i{color:var(--brand)}
.chip{background:var(--soft);color:var(--strong)}
.segs i.on,.bar i{background:linear-gradient(90deg,#FFC531,#FFB020)}

/* hero = illustrated banner: sky, sun, cloud, grass hill, floating subject stickers */
.hero{background:
  radial-gradient(circle at 92% 22%,#FFE066 0 34px,rgba(255,224,102,.35) 35px 56px,transparent 57px),
  linear-gradient(180deg,#8FD3FF 0%,#C8EBFF 62%,#E9F7FF 100%);
  color:var(--ink);border-radius:34px;min-height:170px;overflow:hidden;box-shadow:0 14px 28px rgba(63,169,245,.22);padding-bottom:46px}
.hero::after{content:"";position:absolute;inset:auto -10% -62px -10%;width:auto;height:110px;border-radius:50% 50% 0 0;
  background:linear-gradient(180deg,#5FD08E,#2DB77E);box-shadow:0 -10px 0 rgba(255,255,255,.35)}
.hero::before{content:"☁️";position:absolute;inset-inline-end:26%;top:14px;font-size:46px;opacity:.95;filter:drop-shadow(0 4px 0 rgba(255,255,255,.4))}
.hero h2{color:var(--ink);font-size:clamp(28px,5vw,42px);position:relative;z-index:2}
.hero p{color:#3E5B7A;position:relative;z-index:2}
.hero .stk{z-index:2;background:#fff;box-shadow:0 8px 16px rgba(42,47,74,.14);backdrop-filter:none;border-radius:50%}
.hero .s1{top:auto;bottom:14px}.hero .s2{top:auto;bottom:34px}.hero .s3{bottom:10px}.hero .s4{bottom:30px}
.hero .stk{inset-inline-start:auto}
.hero .s1{inset-inline-end:20px}.hero .s2{inset-inline-end:84px}.hero .s3{inset-inline-end:150px}.hero .s4{inset-inline-end:214px}

/* course tiles: pastel panel of the subject colour + big white emoji circle (like the blob sections on the reference) */
.card.course{color:var(--ink);border-radius:34px 34px 34px 90px;padding-inline-end:104px;
  background:color-mix(in srgb,var(--cat) 15%,#fff);box-shadow:0 10px 22px color-mix(in srgb,var(--cat) 16%,transparent)}
[dir=rtl] .card.course,.card.course{border-radius:34px}
.card.course::after{inset-inline-start:auto;inset-inline-end:-30px;top:-30px;bottom:auto;width:130px;height:130px;background:color-mix(in srgb,var(--cat) 22%,transparent)}
.card.course .t1{color:var(--ink);font-size:19px}
.card.course .t2{color:var(--muted)}
.card.course .emo{background:#fff;box-shadow:0 6px 14px color-mix(in srgb,var(--cat) 28%,transparent);border-radius:50%;width:56px;height:56px;font-size:30px}
.card.course .price,.card.course .price small{color:var(--strong)}
.card.course .chip{background:#fff;color:var(--strong)}
.card.course:hover{box-shadow:0 16px 28px color-mix(in srgb,var(--cat) 26%,transparent)}
.card.course{padding-inline-end:16px}
.stat div:nth-child(1){background:#E3F3FF}.stat div:nth-child(2){background:#DDF6EB}.stat div:nth-child(3){background:#FFE6EE}.stat div:nth-child(4){background:#FFF1D0}
.stat div{border-radius:24px}
.m.me{background:linear-gradient(135deg,#FF6B97,#F2487A)}
.apptbar,.trk{background:#FFF6D9;border-radius:22px}
.splash{background:linear-gradient(180deg,#8FD3FF 0%,#C8EBFF 55%,#5FD08E 100%)}
.sp-sub,.sp-name,.splash h1{color:var(--ink)}
.toast{border-inline-start-color:var(--brand)}

/* ===== mascot owl + calmer palette ===== */
:root{
  --brand:#DF5F88;--strong:#B23C66;--soft:#FBE9EF;--me:#F8DCE6;
  --c-p:#D9607F;--c-m:#5B9BD5;--c-s:#4FA67F;--c-q:#E2A93F;--c-u:#8E7BD0;
  --shadow:0 1px 0 rgba(42,47,74,.04),0 10px 24px rgba(42,47,74,.06);
}
body{background:
  radial-gradient(420px 360px at 4% 8%,rgba(79,166,127,.08),transparent 70%),
  radial-gradient(460px 380px at 98% 40%,rgba(223,95,136,.07),transparent 70%),
  radial-gradient(520px 420px at 10% 100%,rgba(91,155,213,.09),transparent 70%),#FEFEFF;background-attachment:fixed}
.btn{background:linear-gradient(135deg,#EC7C9F,#DB5F86);box-shadow:0 8px 16px rgba(219,95,134,.24)}
.btn:hover:not([disabled]){box-shadow:0 12px 20px rgba(219,95,134,.28)}
.scroller button.on,.seg button.on{background:linear-gradient(135deg,#EC7C9F,#DB5F86);box-shadow:0 6px 12px rgba(219,95,134,.22)}
.m.me{background:linear-gradient(135deg,#EC7C9F,#DB5F86)}
.hero{background:
  radial-gradient(circle at 92% 22%,#F6D77A 0 30px,rgba(246,215,122,.3) 31px 50px,transparent 51px),
  linear-gradient(180deg,#B6DDF3 0%,#D6ECF8 62%,#EDF7FC 100%);
  box-shadow:0 10px 22px rgba(91,155,213,.16);min-height:190px;padding-inline-end:170px}
.hero::after{background:linear-gradient(180deg,#86CDA6,#5BB387)}
.hero h2{font-size:clamp(26px,4.4vw,38px)}
.hero .stk{width:46px;height:46px;font-size:24px;box-shadow:0 6px 12px rgba(42,47,74,.10)}
.hero .s3,.hero .s4{display:none}
.hero .s1{inset-inline-end:150px;bottom:16px}.hero .s2{inset-inline-end:200px;bottom:58px}
.hero .mascot{position:absolute;z-index:3;inset-inline-end:14px;bottom:2px;width:136px;height:auto;transform-origin:50% 100%}
main.enter .hero .mascot{animation:hop .9s cubic-bezier(.2,1.4,.4,1) .25s both}
@keyframes hop{0%{opacity:0;transform:translateY(40px) scale(.7)}60%{opacity:1;transform:translateY(-10px) scale(1.04)}100%{transform:none}}
.card.course{background:color-mix(in srgb,var(--cat) 10%,#fff);box-shadow:0 8px 18px color-mix(in srgb,var(--cat) 12%,transparent)}
.card.course::after{background:color-mix(in srgb,var(--cat) 15%,transparent)}
.card.course:hover{box-shadow:0 12px 22px color-mix(in srgb,var(--cat) 20%,transparent)}
.stat div:nth-child(1){background:#EAF3FB}.stat div:nth-child(2){background:#E6F4EC}.stat div:nth-child(3){background:#FBEAF0}.stat div:nth-child(4){background:#FBF2DC}
@media (max-width:620px){
  .hero{padding-inline-end:104px;min-height:170px}
  .hero .mascot{width:92px}.hero .stk{display:none}
}
@media (prefers-reduced-motion:reduce){main.enter .hero .mascot{animation:none}}

/* ===== buddy owl on most pages ===== */
.buddy{position:fixed;left:10px;bottom:86px;width:70px;z-index:30;cursor:pointer;-webkit-tap-highlight-color:transparent}
.buddy[hidden]{display:none}
.buddy .mascot{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 8px rgba(42,47,74,.16));transform-origin:50% 100%}
.buddy.hop .mascot{animation:hop .8s cubic-bezier(.2,1.4,.4,1) both}
.buddy .bub{position:absolute;bottom:calc(100% - 4px);left:34px;width:max-content;max-width:190px;background:#fff;color:var(--ink);font-size:13.5px;line-height:1.5;padding:9px 13px;border-radius:18px 18px 18px 4px;box-shadow:0 8px 20px rgba(42,47,74,.14);opacity:0;transform:translateY(6px) scale(.9);transform-origin:0 100%;transition:opacity .25s,transform .3s cubic-bezier(.2,1.4,.4,1);pointer-events:none}
.buddy.say .bub{opacity:1;transform:none}
.buddy .bub:empty{display:none}
@media (min-width:1000px){.buddy{left:22px;bottom:20px;width:96px}.buddy .bub{left:60px;font-size:14.5px}}
@media (prefers-reduced-motion:reduce){.buddy.hop .mascot{animation:none}}

/* ===== neutral palette: teal + sand + gold, no pink/blue gender cues ===== */
:root{
  --brand:#2F9E9A;--strong:#1F6F73;--soft:#E2F2F0;--me:#D3ECE8;--hi:#F2B84B;
  --c-p:#E07F5A;--c-m:#4F8FD0;--c-s:#4BA67A;--c-q:#E0A83A;--c-u:#8A7CCB;
  --line:#E8EEEC;--page:#F7FAF9;
}
body{background:
  radial-gradient(420px 360px at 4% 8%,rgba(75,166,122,.09),transparent 70%),
  radial-gradient(460px 380px at 98% 40%,rgba(242,184,75,.10),transparent 70%),
  radial-gradient(520px 420px at 10% 100%,rgba(79,143,208,.08),transparent 70%),#FDFEFD;background-attachment:fixed}
.btn{background:linear-gradient(135deg,#3DB1AB,#2A8F8B);box-shadow:0 8px 16px rgba(42,143,139,.24)}
.btn:hover:not([disabled]){box-shadow:0 12px 20px rgba(42,143,139,.28)}
.btn.acc{background:var(--soft);color:var(--strong)}
.scroller button.on,.seg button.on{background:linear-gradient(135deg,#3DB1AB,#2A8F8B);box-shadow:0 6px 12px rgba(42,143,139,.22)}
.m.me{background:linear-gradient(135deg,#3DB1AB,#2A8F8B)}
.card.course .price,.card.course .price small,.card.course .chip{color:var(--strong)}
.stat div:nth-child(1){background:#E6F1FA}.stat div:nth-child(2){background:#E3F3EA}.stat div:nth-child(3){background:#FBEBE3}.stat div:nth-child(4){background:#FBF2DC}
.toast{border-inline-start-color:var(--hi)}
.hero{background:
  radial-gradient(circle at 92% 22%,#F6D77A 0 30px,rgba(246,215,122,.3) 31px 50px,transparent 51px),
  linear-gradient(180deg,#BFE0EE 0%,#DAEEF3 62%,#EEF7F8 100%)}
.hero::after{background:linear-gradient(180deg,#7CC9A3,#4BA67A)}
.splash{background:linear-gradient(180deg,#9ED3E4 0%,#CDEAEE 55%,#7CC9A3 100%)}

/* ===== wow motion ===== */
.mascot circle[fill="#2A2F4A"],.mascot circle[fill="#6FE0D6"]{transform:translate(var(--ex,0px),var(--ey,0px)) scaleY(var(--eb,1));transform-box:fill-box;transform-origin:center;transition:transform .14s ease-out}
@keyframes idle{0%,100%{transform:translateY(0) rotate(0) scale(1,1)}22%{transform:translateY(-4px) rotate(-1.8deg) scale(1,1.015)}50%{transform:translateY(0) rotate(0) scale(1.02,.985)}78%{transform:translateY(-3px) rotate(1.8deg) scale(1,1.015)}}
.mascot{transform-origin:50% 100%;animation:idle 4.2s ease-in-out infinite}
main.enter .hero .mascot{animation:idle 4.2s ease-in-out infinite,hop .9s cubic-bezier(.2,1.4,.4,1) .25s backwards}
.buddy.hop .mascot{animation:idle 4.2s ease-in-out infinite,hop .8s cubic-bezier(.2,1.4,.4,1) backwards}
.buddy:hover .mascot{animation:idle 1.4s ease-in-out infinite}
.spk{position:absolute;left:50%;top:40%;font-style:normal;font-size:16px;pointer-events:none;opacity:0;animation:spk 1s ease-out forwards}
@keyframes spk{0%{opacity:0;transform:translate(0,0) scale(.3)}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.15) rotate(40deg)}}

/* banner scene comes alive: drifting cloud, pulsing sun, bobbing stickers */
.hero::before{animation:cloud 26s linear infinite}
@keyframes cloud{0%{transform:translateX(-30px)}50%{transform:translateX(38px)}100%{transform:translateX(-30px)}}
.hero .stk{animation:bob 3.4s ease-in-out infinite}
.hero .s2{animation-delay:-1.1s}.hero .s3{animation-delay:-2.2s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
main.enter .hero h2{animation:titlein .7s cubic-bezier(.2,1.2,.4,1) both}
main.enter .hero p{animation:titlein .7s .12s cubic-bezier(.2,1.2,.4,1) both}
@keyframes titlein{from{opacity:0;transform:translateY(14px) scale(.96)}}

/* tiles pop in one after another when a page opens */
main.enter .grid>.card{animation:cardpop .6s cubic-bezier(.2,1.4,.4,1) both}
main.enter .grid>.card:nth-child(2){animation-delay:.07s}main.enter .grid>.card:nth-child(3){animation-delay:.14s}
main.enter .grid>.card:nth-child(4){animation-delay:.21s}main.enter .grid>.card:nth-child(5){animation-delay:.28s}
main.enter .grid>.card:nth-child(n+6){animation-delay:.35s}
@keyframes cardpop{from{opacity:0;transform:translateY(26px) scale(.9) rotate(-1.5deg)}}
main.enter .scroller button{animation:chipin .45s cubic-bezier(.2,1.4,.4,1) both}
main.enter .scroller button:nth-child(2){animation-delay:.05s}main.enter .scroller button:nth-child(3){animation-delay:.1s}
main.enter .scroller button:nth-child(4){animation-delay:.15s}main.enter .scroller button:nth-child(n+5){animation-delay:.2s}
@keyframes chipin{from{opacity:0;transform:scale(.6)}}
.card.course .emo{transition:transform .3s cubic-bezier(.2,1.6,.4,1)}
.card.course:hover .emo{transform:rotate(-12deg) scale(1.18)}

/* buttons: light sweep on hover, springy press; nav icon pops when page changes */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%)}
.btn:hover:not([disabled])::after{transform:translateX(120%);transition:transform .7s}
main.enter~nav button.on svg.i{animation:navpop .55s cubic-bezier(.2,1.8,.4,1)}
@keyframes navpop{0%{transform:scale(.6) rotate(-15deg)}60%{transform:scale(1.25) rotate(6deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.mascot,.hero::before,.hero .stk,main.enter .grid>.card,main.enter .scroller button,.btn::after{animation:none!important;transition:none!important}}

/* ================= splash: sunrise scene ================= */
.splash{background:linear-gradient(180deg,#7EC4E8 0%,#BFE3F2 52%,#E9F6F8 100%);overflow:hidden;color:var(--ink);justify-content:center;padding-bottom:16vh}
.sp-frame{display:none}
.sp-sky,.sp-conf,.sp-hill,.sp-cast{position:absolute;inset:0;pointer-events:none}
.sp-sun{position:absolute;inset-inline-end:14%;top:9%;width:clamp(70px,13vmin,130px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#FFE680 0 52%,rgba(255,230,128,.45) 53% 70%,transparent 71%);
  box-shadow:0 0 70px 26px rgba(255,230,128,.55);animation:sunrise 1.6s cubic-bezier(.2,.9,.3,1) both,sunglow 3.4s 1.6s ease-in-out infinite}
@keyframes sunrise{from{transform:translateY(60vh) scale(.6);opacity:0}}
@keyframes sunglow{0%,100%{box-shadow:0 0 70px 26px rgba(255,230,128,.55)}50%{box-shadow:0 0 100px 44px rgba(255,230,128,.75)}}
.sp-cl{position:absolute;font-size:clamp(44px,9vmin,90px);opacity:.92;filter:drop-shadow(0 6px 0 rgba(255,255,255,.35));animation:cdrift linear infinite both}
.sp-cl.c1{top:12%;inset-inline-start:6%;animation-duration:15s}
.sp-cl.c2{top:30%;inset-inline-start:58%;font-size:clamp(34px,7vmin,70px);animation-duration:20s;animation-direction:reverse}
.sp-cl.c3{top:20%;inset-inline-start:34%;font-size:clamp(28px,6vmin,56px);animation-duration:24s}
@keyframes cdrift{0%{transform:translateX(-40px)}50%{transform:translateX(60px)}100%{transform:translateX(-40px)}}
.sp-hill{top:auto;height:30%;background:
  radial-gradient(120% 100% at 30% 100%,#6CCB9B 0 60%,transparent 61%),
  radial-gradient(120% 90% at 85% 100%,#4BA67A 0 58%,transparent 59%);animation:hillup 1s cubic-bezier(.2,.9,.3,1) both}
@keyframes hillup{from{transform:translateY(100%)}}
.sp-hero{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center}
.sp-logo{position:relative;width:min(54vw,260px);height:min(54vw,260px);animation:logopop 1s .35s cubic-bezier(.2,1.5,.4,1) both,logofloat 3.6s 1.4s ease-in-out infinite;filter:drop-shadow(0 14px 22px rgba(31,90,115,.28))}
@keyframes logopop{from{opacity:0;transform:scale(.2) rotate(-14deg)}}
@keyframes logofloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.sp-ring{position:absolute;top:50%;inset-inline-start:50%;width:60%;aspect-ratio:1;margin:-30% 0 0 -30%;border-radius:50%;border:4px solid rgba(255,255,255,.9);opacity:0;animation:ring 1.4s .7s ease-out both;transform:translateY(-34px)}
.sp-ring.r2{border-color:rgba(242,184,75,.9);animation-delay:.95s}
@keyframes ring{0%{opacity:.95;transform:translateY(-34px) scale(.5)}100%{opacity:0;transform:translateY(-34px) scale(2.6)}}
[dir=rtl] .sp-ring{margin:-30% -30% 0 0}
.sp-name{font-family:var(--display);font-weight:800;font-size:clamp(36px,6.4vmin,62px);line-height:1.2;margin-top:10px;color:#1E3A4C;display:flex;gap:.3em}
.sp-name span{display:inline-block;animation:drop .8s calc(1.1s + var(--w)*.18s) cubic-bezier(.2,1.6,.4,1) both}
@keyframes drop{from{opacity:0;transform:translateY(-46px) scale(.8) rotate(-4deg)}}
.sp-sub{color:#2F6F73;font-weight:600;animation:fade .8s 1.7s both}
.sp-cast{top:auto;height:auto;bottom:calc(6vh + 22px);display:flex;justify-content:center;align-items:flex-end;gap:clamp(2px,2vw,22px);z-index:2}
.sp-c{width:clamp(58px,17vw,126px);animation:cin .8s calc(1.3s + var(--k)*.22s) cubic-bezier(.2,1.6,.4,1) both}
.sp-c svg{width:100%;height:auto;display:block}
.sp-c:nth-child(even){margin-bottom:12px}
@keyframes cin{from{opacity:0;transform:translateY(120px) scale(.5) rotate(-18deg)}}
.sp-conf i{position:absolute;top:-16px;inset-inline-start:var(--x);width:9px;height:14px;background:var(--c);border-radius:2px;opacity:0;transform:rotate(var(--r));animation:conf var(--d) var(--w) ease-in both}
@keyframes conf{0%{opacity:1;transform:translateY(0) rotate(var(--r))}100%{opacity:1;transform:translateY(105vh) rotate(calc(var(--r) + 540deg))}}
.sp-load{bottom:clamp(14px,3vh,26px);z-index:4;background:rgba(255,255,255,.55)}
.sp-load i{background:linear-gradient(90deg,#F2B84B,#E0A83A);animation-duration:3.5s}
.sp-skip{bottom:4px;color:#3C6773;z-index:4;font-size:11px}
@media (prefers-reduced-motion:reduce){.sp-sun,.sp-cl,.sp-hill,.sp-logo,.sp-ring,.sp-name span,.sp-sub,.sp-c,.sp-conf i{animation:none!important}.sp-conf{display:none}.sp-ring{display:none}}

/* ===== tour: keep it snappy. Pause every background animation while the blur overlay is up. ===== */
body.coaching #app *,body.coaching #app *::before,body.coaching #app *::after,body.coaching .buddy,body.coaching .buddy *{animation:none!important}
body.coaching .buddy{display:none}
.cm-p{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:left .3s cubic-bezier(.2,.8,.2,1),top .3s cubic-bezier(.2,.8,.2,1),width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1)}
.cm-ring{transition:all .3s cubic-bezier(.2,.8,.2,1)}
.cm-tip{transition:left .3s cubic-bezier(.2,.8,.2,1),top .3s cubic-bezier(.2,.8,.2,1)}
.cm-tip.pop>*{animation-duration:.25s!important}

/* ===== Zoom time-limit bar in the chat ===== */
.zbar{display:flex;align-items:center;gap:12px;background:#FFF4D6;border:2px solid var(--hi);border-radius:22px;padding:12px 14px;margin:8px 0;box-shadow:0 8px 18px rgba(242,184,75,.22)}
.zbar .zi{font-size:28px;line-height:1;flex:none}
.zbar .zt{flex:1;min-width:0}
.zbar .zt b{font-family:var(--display);font-size:16px;color:var(--ink)}
.zbar .btn{width:auto;flex:none}
.zbar.hot{background:#FDE7DC;border-color:#E07F5A;box-shadow:0 8px 18px rgba(224,127,90,.24)}
.zbar.hot .zi{animation:zspin 2.4s ease-in-out infinite}
@keyframes zspin{0%,100%{transform:rotate(0)}50%{transform:rotate(180deg)}}
@media (max-width:520px){.zbar{flex-wrap:wrap}.zbar .btn{width:100%}}
@media (prefers-reduced-motion:reduce){.zbar.hot .zi{animation:none}}

/* ===== session-end reminder ===== */
.trk.due{background:#FDE7DC;border:2px solid #E07F5A;box-shadow:0 8px 18px rgba(224,127,90,.24);animation:duepulse 1.8s ease-in-out 3}
.trk.due .t1{color:#9A3F1E}
@keyframes duepulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@media (prefers-reduced-motion:reduce){.trk.due{animation:none}}

/* ===== night splash: no academy, no light; the academy brings the sun ===== */
@property --r{syntax:'<length>';inherits:false;initial-value:-16vmin}
@property --sx{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --sy{syntax:'<percentage>';inherits:false;initial-value:44%}
.sp-cast{z-index:1}
.sp-night{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(circle at 14% 9%,#F4EBD0 0 2.8vmin,rgba(244,235,208,.2) 2.9vmin 6vmin,transparent 6.2vmin),
    radial-gradient(1.6px 1.6px at 22% 17%,#fff,transparent),radial-gradient(1.2px 1.2px at 38% 8%,#fff,transparent),radial-gradient(1.8px 1.8px at 61% 14%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 78% 7%,#fff,transparent),radial-gradient(1.6px 1.6px at 90% 19%,#fff,transparent),radial-gradient(1.2px 1.2px at 8% 31%,#fff,transparent),
    radial-gradient(1.6px 1.6px at 30% 27%,#fff,transparent),radial-gradient(1.2px 1.2px at 52% 31%,#fff,transparent),radial-gradient(1.8px 1.8px at 72% 28%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 94% 40%,#fff,transparent),radial-gradient(1.6px 1.6px at 15% 52%,#fff,transparent),radial-gradient(1.2px 1.2px at 85% 56%,#fff,transparent),
    linear-gradient(0deg,#0E2536 0 7%,#16344A 7% 16%,transparent 16%),
    linear-gradient(180deg,#070F24,#14284A 55%,#244468);
  -webkit-mask-image:radial-gradient(circle at var(--sx) var(--sy),transparent var(--r),#000 calc(var(--r) + 14vmin));
  mask-image:radial-gradient(circle at var(--sx) var(--sy),transparent var(--r),#000 calc(var(--r) + 14vmin));
  animation:dawn 2.4s 1.5s cubic-bezier(.45,0,.25,1) both}
@keyframes dawn{from{--r:-16vmin;--sx:50%;--sy:44%}to{--r:128vmax;--sx:14%;--sy:9%}}
.sp-sun{inset-inline-end:auto;left:14%;top:9%;transform:translate(-50%,-50%);z-index:3;
  animation:sunrise2 2.4s 1.5s cubic-bezier(.45,0,.25,1) both,sunglow 3.4s 3.9s ease-in-out infinite}
@keyframes sunrise2{from{left:50%;top:calc(42% - 50px);transform:translate(-50%,-50%) scale(.25);opacity:0}15%{opacity:1}to{left:14%;top:9%;transform:translate(-50%,-50%) scale(1);opacity:1}}
.sp-name{animation:namecol 1.2s 3s both}
@keyframes namecol{from{color:#fff}}
.sp-sub{animation:fade .8s 1.7s both,subcol 1.2s 3s both}
@keyframes subcol{from{color:#F1D9A5}}
.sp-skip{animation:fade .6s 1.5s both,skipcol 1.2s 3s both}
@keyframes skipcol{from{color:#9FB3D1}}
.sp-c{animation-delay:calc(2.8s + var(--k)*.22s)}
.sp-load i{animation-duration:5.4s}
@media (prefers-reduced-motion:reduce){.sp-night{display:none}.sp-sun{animation:none!important;opacity:1}}

/* ===== support fox (opens WhatsApp) ===== */
.helpfox{position:fixed;left:14px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;gap:8px;text-decoration:none}
.helpfox .fx{width:56px;height:56px;border-radius:50%;background:#fff;border:3px solid #25D366;box-shadow:0 6px 16px rgba(0,0,0,.25);display:grid;place-items:center;padding:6px;animation:fxbob 1.4s ease-in-out infinite}
.helpfox .fx svg{width:100%;height:auto;display:block}
.helpfox .fb{background:#25D366;color:#fff;font-weight:700;font-size:12px;padding:8px 12px;border-radius:14px;white-space:nowrap;animation:fbhide .5s 8s both}
@keyframes fxbob{50%{transform:translateY(-5px)}}
@keyframes fbhide{to{opacity:0;max-width:0;padding-inline:0;transform:scale(.7)}}
@media (max-width:820px){.helpfox{bottom:calc(88px + env(safe-area-inset-bottom))}}
body:has(.splash) .helpfox,body[data-role="TEACHER"] .helpfox,body[data-role="SUPERVISOR"] .helpfox,body[data-view="chat"] .helpfox{display:none}