/* AI University — lesson player upgrades (learn.html) */
.learn-page .l-top{position:sticky;top:0;z-index:40}
.l-top .brand-logo img{height:36px}
.l-pos{margin-left:12px;font-family:'Anek Bangla','Hind Siliguri',sans-serif;font-size:14.5px;color:var(--mut);white-space:nowrap}
.l-pos b{color:var(--ink);font-size:16px}
.l-prog{position:absolute;left:0;right:0;bottom:-1px;height:4px;background:transparent}
.l-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#0050ed,#38d3f5,#3ddc97);border-radius:0 4px 4px 0;transition:width .8s cubic-bezier(.16,1,.3,1);box-shadow:0 0 12px rgba(56,211,245,.6)}
.l-top{position:relative}
/* lesson hero band */
.l-hero{position:relative;overflow:hidden;margin:-6px 0 26px;padding:26px 28px 24px;border-radius:24px;background:linear-gradient(120deg,color-mix(in srgb,var(--c1) 16%,var(--card)),color-mix(in srgb,var(--c2) 12%,var(--card)));border:1px solid var(--line)}
.l-hero::after{content:"";position:absolute;width:260px;height:260px;right:-80px;top:-120px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c2) 40%,transparent),transparent 65%)}
.l-hero>*{position:relative}
.l-hero h1{font-family:'Anek Bangla','Hind Siliguri',sans-serif;font-weight:800;line-height:1.2;animation:lrise .6s both cubic-bezier(.16,1,.3,1)}
.l-hero .l-crumb{animation:lrise .6s both}
@keyframes lrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* up next */
.l-upnext{display:flex;align-items:center;gap:14px;margin-top:38px;padding:16px 18px;border-radius:20px;border:1.5px dashed var(--line2);background:var(--soft);transition:border-color .3s,transform .3s}
.l-upnext:hover{border-color:var(--brand);border-style:solid;transform:translateY(-2px)}
.l-upnext>span{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);flex:none}
.l-upnext>div{flex:1;min-width:0}
.l-upnext small{display:block;font-size:12.5px;color:var(--mut)}
.l-upnext b{display:block;color:var(--ink);font-size:1.02rem}
.l-upnext>.i{color:var(--brand);transition:transform .3s}.l-upnext:hover>.i{transform:translateX(4px)}
#doneBtn{position:relative;overflow:hidden}
#doneBtn::after{content:"";position:absolute;top:0;bottom:0;width:50px;left:-70px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:lshine 3.4s 1.2s infinite}
@keyframes lshine{0%{left:-70px}40%,100%{left:120%}}
/* celebration */
.l-cele{position:fixed;inset:0;z-index:200;pointer-events:none;display:grid;place-items:center}
.l-cele-msg{padding:16px 28px;border-radius:20px;background:linear-gradient(120deg,#011835,#0050ed);color:#fff;font-family:'Anek Bangla','Hind Siliguri',sans-serif;font-weight:800;font-size:clamp(1.3rem,3vw,1.8rem);box-shadow:0 30px 80px rgba(1,24,53,.45);animation:lpop .5s cubic-bezier(.34,1.56,.64,1) both, lfade .4s 1.2s forwards}
.l-cele.big .l-cele-msg{font-size:clamp(1.6rem,4vw,2.6rem);padding:22px 36px;background:linear-gradient(120deg,#ff3d68,#ffb020);animation:lpop .55s cubic-bezier(.34,1.56,.64,1) both, lfade .5s 2s forwards}
.l-cele i{position:absolute;left:50%;top:55%;width:10px;height:18px;border-radius:3px;opacity:0;animation:lconf 1.5s var(--d) cubic-bezier(.16,1,.3,1) forwards}
@keyframes lpop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes lfade{to{opacity:0;transform:translateY(-20px)}}
@keyframes lconf{0%{opacity:1;transform:translate(-50%,0) rotate(0)}70%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(var(--y) + 40vh)) rotate(var(--r))}}
@media (prefers-reduced-motion:reduce){.l-cele i{display:none}}
/* lesson navigation: sticky bar at the bottom on every screen — says what comes next (video / quiz / practice / exam) */
.l-upnext em{font-style:normal;font-weight:700;padding:1px 8px;border-radius:99px;background:var(--brand-soft);color:var(--brand)}
.l-upnext .k-video,.l-upnext>span.k-video{background:#ffe9ee;color:#e11d48}
.l-upnext .k-quiz,.l-upnext>span.k-quiz{background:#fff4dc;color:#b45309}
.l-upnext .k-exam,.l-upnext>span.k-exam{background:#ede6ff;color:#6d28d9}
.l-upnext .k-practice,.l-upnext>span.k-practice{background:#e3f8ee;color:#047857}
.l-upnext.newmod{border-style:solid;border-color:color-mix(in srgb,var(--brand) 45%,var(--line2));background:linear-gradient(120deg,var(--soft),color-mix(in srgb,var(--brand) 8%,var(--soft)))}
.l-upnext.end{border-style:solid}
.l-nav{position:sticky;bottom:0;z-index:30;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;margin:40px 0 0;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.l-nav .btn{min-height:48px}
.l-nav .l-prev:empty{width:1px}
.l-step{text-align:center;font-family:'Anek Bangla','Hind Siliguri',sans-serif;font-size:14px;color:var(--mut);line-height:1.25}
.l-step b{color:var(--ink);font-size:16px}
.l-step small{display:block;font-size:12.5px}
.l-next{gap:10px}
.lesson.in-class .l-nav #doneBtn{display:inline-flex} /* classroom mode: still show where the next button goes */
.l-next .nb{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;text-align:left}
.l-next .nb b{font-weight:700}
.l-next .nb small{font-size:12px;font-weight:500;opacity:.85}
.learn-page .gu-root.gu-learn:not(.gu-open){bottom:calc(92px + env(safe-area-inset-bottom))} /* keep the Guru bubble above the nav bar */
/* mobile: thumb-friendly */
@media (max-width:760px){
  .l-hero{padding:20px 18px;border-radius:20px}
  .l-nav{margin:30px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:10px}
  .l-nav .l-prev span{display:none}
  .l-nav .l-prev{min-width:48px;padding:0 12px}
  .l-step small{display:none}
  .l-next{justify-content:space-between}
  .l-pos{margin-left:auto;margin-right:8px}
}
@media (max-width:380px){.l-step{display:none}.l-nav{grid-template-columns:auto 1fr}}