/* IconikGrid main styles. Colours, radii and motion come from css/tokens.css; reusable pieces for new pages are in css/components.css.
   Older sections below are kept as they were (v16 to v23) so existing pages do not change. */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:var(--bg);color:var(--tx);font:400 1rem/1.65 var(--bf);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--v2);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--v);color:var(--bg);padding:8px 14px;z-index:99;border-radius:8px}
.skip:focus{left:8px}
.wrap{max-width:1160px;margin:auto;padding:0 24px}
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;gap:28px;padding:14px 28px;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(var(--bg-rgb),.86);backdrop-filter:blur(10px);border-color:var(--bd)}
.brand{display:flex;align-items:center;margin-right:auto}
.brand img{height:38px;width:auto;display:block}
.menu{display:flex;gap:6px}
.menu a{padding:8px 14px;border-radius:999px;color:var(--tx2);font-size:.95rem;transition:color .2s,background .2s}
.menu a:hover{color:var(--tx);background:var(--bg2)}
.burger{display:none;width:44px;height:44px;background:none;border:1px solid var(--bd);border-radius:12px;cursor:pointer;position:relative}
.burger i{position:absolute;left:12px;right:12px;height:2px;background:var(--tx);transition:transform .3s var(--ease)}
.burger i:first-child{top:17px}
.burger i:last-child{top:25px}
.burger[aria-expanded=true] i:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded=true] i:last-child{transform:translateY(-4px) rotate(-45deg)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:14px;background:var(--v);color:var(--bg);font:600 1rem var(--hf);border:1px solid var(--v);cursor:pointer;transition:transform .25s var(--ease),background .2s,box-shadow .25s}
.btn:hover{background:var(--v2);transform:translateY(-2px);box-shadow:0 10px 30px -10px rgba(var(--v-rgb),.7)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-sm{min-height:40px;padding:0 18px;font-size:.92rem}
.btn-ghost{background:transparent;color:var(--tx);border-color:var(--bd)}
.btn-ghost:hover{background:var(--bg2);border-color:var(--v2);box-shadow:none}
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden}
#grid{position:absolute;inset:0;width:100%;height:100%}
.hero-inner{position:relative;max-width:1160px;margin:auto;width:100%;padding:120px 24px 90px}
.tag{display:inline-block;color:var(--v2);font:500 1rem var(--hf);padding:6px 14px;border:1px solid var(--bd);border-radius:999px;background:rgba(29,26,36,.7);margin-bottom:26px}
h1{font:700 clamp(3.2rem,9.5vw,8rem)/.95 var(--hf);letter-spacing:-.035em}
.soft{color:var(--v2)}
.lead{max-width:520px;color:var(--tx2);font-size:1.15rem;margin:28px 0 34px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.scroll-cue{position:absolute;left:50%;bottom:26px;width:26px;height:42px;border:2px solid var(--bd);border-radius:14px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--v2);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
.sec-head{display:grid;gap:14px;max-width:640px;margin-bottom:36px}
h2{font:700 clamp(2.1rem,5vw,3.6rem)/1.05 var(--hf);letter-spacing:-.025em}
.sec-head p,.note{color:var(--tx2)}
.note{font-size:.9rem;margin-top:22px}
.chip{font-size:.8rem;padding:4px 12px;border-radius:999px;background:var(--card);color:var(--v2);border:1px solid var(--bd)}
.foot{border-top:1px solid var(--bd);padding:56px 0 28px;background:var(--bg)}
.foot img{height:44px;width:auto;display:block;margin-bottom:12px}
.foot p{color:var(--tx2)}
.foot nav{display:flex;gap:22px}
.foot nav a{color:var(--tx2);transition:color .2s}
.foot nav a:hover{color:var(--tx)}
@media(max-width:820px){.burger{display:block}
.nav .btn-sm{display:none}
.menu{position:fixed;inset:70px 16px auto;flex-direction:column;background:var(--bg2);border:1px solid var(--bd);border-radius:18px;padding:10px;opacity:0;pointer-events:none;transform:translateY(-8px);transition:all .3s var(--ease)}
.menu.open{opacity:1;pointer-events:auto;transform:none}
.menu a{padding:14px 16px;font-size:1.05rem}
.nav{gap:12px;padding:12px 16px}}
@media(max-width:520px){.brand img{height:32px}
.hero-inner{padding-top:110px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*{animation:none!important;transition-duration:.01ms!important}}
.prog{position:fixed;top:0;left:0;right:0;height:3px;background:var(--v);transform:scaleX(0);transform-origin:0 50%;z-index:60}
.glow{position:fixed;left:0;top:0;width:480px;height:480px;margin:-240px 0 0 -240px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--v-rgb),.16),transparent);pointer-events:none;z-index:1;opacity:0;transition:opacity .4s}
.glow.on{opacity:1}
.foot{padding:100px 0 30px;background:linear-gradient(var(--bg2),var(--bg));overflow:hidden}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding:56px 0}
.fbrand img{height:46px;width:auto;margin-bottom:16px}
.fbrand p{max-width:340px;color:var(--tx2)}
.foot h3{font:600 .95rem var(--hf);color:var(--tx);margin-bottom:14px}
.foot nav,.soon{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.foot nav a{color:var(--tx2)}
.foot nav a:hover{color:var(--v2)}
.soon span{color:var(--tx2)}
.giant{font:700 clamp(4rem,21vw,17rem)/.85 var(--hf);letter-spacing:-.05em;text-align:center;color:transparent;-webkit-text-stroke:1.5px var(--bd);user-select:none;margin:10px 0 24px}
.foot-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--tx2);font-size:.9rem;padding-top:22px;border-top:1px solid var(--bd)}
.foot-bar a:hover{color:var(--v2)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}
.fbrand{grid-column:1/-1}}
.hero{justify-content:center;text-align:center;background:radial-gradient(70% 55% at 50% 100%,rgba(var(--v-rgb),.32),transparent 70%),var(--bg)}
.hero-inner{display:block;max-width:900px;padding:120px 24px 170px;z-index:2}
.hsym{width:68px;height:68px;margin:0 auto 22px;display:block;filter:drop-shadow(0 12px 40px rgba(var(--v-rgb),.6))}
h1{font-size:clamp(2.8rem,8vw,6.6rem);line-height:1}
.ln{display:block;white-space:nowrap}
.ch1{display:inline-block}
.lead{margin:24px auto 32px;max-width:460px}
.cta{justify-content:center}
.floor{position:absolute;left:-60%;right:-60%;bottom:-6%;height:58%;transform:perspective(500px) rotateX(66deg);transform-origin:50% 100%;background-image:linear-gradient(rgba(var(--v2-rgb),.38) 1.5px,transparent 1.5px),linear-gradient(90deg,rgba(var(--v2-rgb),.38) 1.5px,transparent 1.5px);background-size:80px 80px;animation:fly 2.6s linear infinite;-webkit-mask-image:linear-gradient(to top,#000 5%,transparent 92%);mask-image:linear-gradient(to top,#000 5%,transparent 92%)}
@keyframes fly{to{background-position:0 80px}}
.story{padding:120px 0;background:var(--bg)}
.st-in{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.ch{margin-bottom:36px}
.ch p{color:var(--tx2);margin-top:12px;max-width:380px}
.board{display:none}
.motion .story{height:100vh;padding:0;display:flex;align-items:center}
.motion .st-in{width:100%}
.motion .chs{position:relative;height:200px}
.motion .ch{position:absolute;inset:0;opacity:0;margin:0}
.motion .ch:first-child{opacity:1}
.motion .board{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(100%,380px);aspect-ratio:1;margin-left:auto;perspective:800px}
.board i{border:1.5px solid var(--bd);border-radius:18px;background:rgba(var(--v-rgb),0)}
@media(max-width:900px){.st-in{grid-template-columns:1fr}
.motion .board{margin:20px auto 0;width:min(70%,280px)}
.motion .chs{height:170px}
.hero-inner{padding-bottom:150px}
.ln{white-space:normal}}
#grid{z-index:0;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 85%);mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 85%)}
.snd{width:40px;height:40px;border-radius:12px;border:1px solid var(--bd);background:none;color:var(--v2);font-size:1.15rem;cursor:pointer;transition:border-color .2s,color .2s}
.snd:hover{border-color:var(--v2)}
.snd[aria-pressed=false]{color:var(--tx2);text-decoration:line-through}
@media(max-width:820px){.nav .snd{order:2}
.burger{order:3}}
@media(max-width:600px){.hero-inner{padding:104px 20px 150px}
.hsym{width:52px;height:52px;margin-bottom:16px}
h1{font-size:clamp(2.3rem,11vw,3rem)}
.lead{font-size:1rem;margin:18px auto 26px}
.cta{flex-direction:column;align-items:stretch;max-width:320px;margin:auto}
.scroll-cue{display:none}
.sec-head h2,h2{font-size:clamp(1.9rem,8.5vw,2.4rem)}
.wrap{padding:0 20px}
.foot{padding:70px 0 24px}
.foot-grid{grid-template-columns:1fr 1fr;gap:28px;padding:40px 0}
.giant{font-size:clamp(3rem,19vw,5rem);margin:0 0 18px}
.foot-bar{flex-direction:column;gap:6px}}
@media(max-width:820px){.nav .snd{order:2}
.nav #volPanel{right:12px}}
.sndwrap{position:relative}
.volp{position:absolute;top:100%;left:50%;right:auto;transform:translateX(-50%);margin-top:8px;min-width:0;width:64px;padding:14px 0 18px;display:flex;flex-direction:column;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--bd);border-radius:16px;box-shadow:0 20px 50px -20px #000}
.volp[hidden]{display:none}
.volp::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.vl{font:600 .8rem var(--hf);color:var(--tx)}
.vtrack{position:relative;width:8px;height:130px;border-radius:99px;background:var(--card);border:1px solid var(--bd);cursor:pointer;touch-action:none;outline-offset:8px}
.vtrack::before{content:"";position:absolute;inset:-6px -16px}
.vfill{position:absolute;left:0;right:0;bottom:0;height:50%;background:var(--v);border-radius:99px}
.vthumb{position:absolute;left:50%;bottom:calc(50% - 9px);margin-left:-9px;width:18px;height:18px;border-radius:50%;background:var(--tx);border:3px solid var(--v)}
.vtick{position:absolute;left:-6px;right:-6px;top:50%;height:1px;background:var(--tx2);opacity:.5}
@media(max-width:820px){.nav .sndwrap{order:2}
.nav #volPanel{right:auto}}
.q-text{font:600 1.5rem/1.3 var(--hf);margin-bottom:20px;outline:none}
.opts{display:grid;gap:10px}
.opt{position:relative;width:100%;text-align:left;min-height:54px;padding:14px 48px 14px 18px;border-radius:14px;border:1px solid var(--bd);background:var(--bg2);color:var(--tx);font:500 1rem var(--bf);cursor:pointer;transition:border-color .2s,background .25s,opacity .25s}
.opt:hover:not([aria-disabled=true]){border-color:var(--v2)}
.opt[aria-disabled=true]{cursor:default}
.opt.correct{border-color:var(--v);background:rgba(var(--v-rgb),.2)}
.opt.wrong{border-color:var(--bad);background:rgba(var(--bad-rgb),.1)}
.opt.dim{opacity:.55}
.opt.correct::after,.opt.wrong::after{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-weight:700}
.opt.correct::after{content:"\2713";color:var(--v2)}
.opt.wrong::after{content:"\2715";color:var(--bad)}
.fb{margin-top:16px;padding:14px 16px;background:var(--bg2);border-left:3px solid var(--v);border-radius:12px}
.fb.bad{border-left-color:var(--bad)}
.fb strong{display:block;font:600 1rem var(--hf);margin-bottom:4px}
.fb p{color:var(--tx2);font-size:.95rem}
.q-actions{margin-top:18px}
.btn[hidden],.fb[hidden]{display:none}
@media(max-width:600px){.q-text{font-size:1.25rem}}
.demo-badge{justify-self:start;font:500 .8rem var(--hf);color:var(--v2);padding:5px 14px;border:1px dashed var(--v2);border-radius:999px}
@media(min-width:821px) and (max-width:1100px){.menu a{padding:8px 10px;font-size:.9rem}}
.final{padding:120px 0 130px;text-align:center;background:linear-gradient(var(--bg),var(--bg2))}
.f-tiles{display:flex;justify-content:center;gap:10px;margin-bottom:36px}
.f-tiles i{width:clamp(30px,6vw,52px);aspect-ratio:1;border:2px solid var(--bd);border-radius:12px}
.f-tiles i:nth-child(4){background:var(--v);border-color:var(--v)}
.final p{color:var(--tx2);margin:16px 0 30px}
.final .cta{justify-content:center}
@media(min-width:821px) and (max-width:1200px){.nav .btn-sm{display:none}}
@media(max-width:900px){.final{padding:90px 0}}
@media(max-width:600px){.final .cta{flex-direction:column;align-items:stretch;max-width:320px;margin:auto}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.menu a.cur{color:var(--tx);background:var(--bg2)}
/* v16: concept pages */
html[lang="bn"]{--hf:"Noto Sans Bengali","Space Grotesk","Segoe UI",system-ui,sans-serif;--bf:"Noto Sans Bengali",Inter,"Segoe UI",system-ui,sans-serif}
html[lang="bn"] h1,html[lang="bn"] h2,html[lang="bn"] h3,html[lang="bn"] .giant{letter-spacing:0}
html[lang="bn"] h1{line-height:1.15}html[lang="bn"] body{line-height:1.8}
.lang{height:40px;min-width:48px;padding:0 12px;border-radius:12px;border:1px solid var(--bd);background:none;color:var(--tx);font:500 .9rem var(--hf);cursor:pointer;transition:border-color .2s}
.lang:hover{border-color:var(--v2)}
.nav .lang{order:2}
.demo-badge{display:inline-block;justify-self:start;font:500 .8rem var(--hf);color:var(--v2);padding:5px 14px;border:1px dashed var(--v2);border-radius:999px}
.chsec{padding:110px 0;background:var(--bg2)}
.chapter{background:var(--card);border:1px solid var(--bd);border-radius:24px;padding:28px;max-width:860px}
.ch-title{font:600 1.15rem var(--hf);margin-bottom:20px}
.units{display:flex;flex-wrap:wrap;gap:14px}
.unit{display:grid;gap:8px;justify-items:center;width:84px;background:none;border:0;color:var(--tx2);cursor:pointer;font:400 .8rem/1.3 var(--bf);text-align:center}
.unit i{width:64px;height:64px;border-radius:16px;border:2px solid var(--bd);display:grid;place-items:center;font:600 1.2rem var(--hf);font-style:normal;color:var(--tx);transition:background .3s,border-color .3s,box-shadow .3s}
.unit:hover i{border-color:var(--v2)}
.unit[aria-current=true] i{border-color:var(--v2);box-shadow:0 0 0 4px rgba(var(--v-rgb),.25)}
.unit[aria-current=true]{color:var(--tx)}
.unit.res-ind i{background:var(--v);border-color:var(--v);color:var(--bg)}
.unit.res-ast i{background:rgba(var(--v-rgb),.45);border-color:transparent}
.unit.res-need i{border-style:dashed;border-color:var(--tx2)}
.sumline{color:var(--tx2);font-size:.9rem;margin:18px 0 0}
.qpanel{margin-top:22px;padding-top:24px;border-top:1px solid var(--bd)}
.q-unit{color:var(--v2);font-size:.9rem;font-weight:500;margin-bottom:8px}
.q-helpers{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.key{display:flex;flex-wrap:wrap;gap:12px 24px;list-style:none;padding:0;margin-top:22px;color:var(--tx2);font-size:.85rem}
.key li{display:flex;align-items:center;gap:8px}
.key i{width:16px;height:16px;border-radius:5px;border:2px solid var(--bd)}
.key .k-ind{background:var(--v);border-color:var(--v)}.key .k-ast{background:rgba(var(--v-rgb),.45);border-color:transparent}.key .k-need{border-style:dashed;border-color:var(--tx2)}
.studysec{padding:110px 0;background:var(--bg)}
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.split .sec-head{margin:0;position:sticky;top:110px}
.split-note{grid-column:2}
.sdash{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sc{background:var(--bg2);border:1px solid var(--bd);border-radius:22px;padding:24px}
.sc-main{grid-column:1/-1}
.sc h3{font:500 .9rem var(--hf);color:var(--tx2);margin-bottom:12px}
.sc-big{font:600 1.7rem/1.2 var(--hf)}.sc-big.sm{font-size:1.3rem}
.sc-sub{color:var(--tx2);margin-top:6px;font-size:.95rem}
.mini{display:flex;gap:8px;margin:18px 0 22px}
.mini i{width:34px;height:34px;border:2px solid var(--bd);border-radius:9px}.mini i.on{background:var(--v);border-color:var(--v)}
.whysec{padding:110px 0;background:var(--bg2)}
.why-in{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.why-p{color:var(--tx2);font-size:1.15rem;margin-top:18px;max-width:460px}
.wr{padding:22px 0;border-top:1px solid var(--bd)}.wr:last-child{border-bottom:1px solid var(--bd)}
.wr-p{color:var(--tx2);font-size:.9rem}
.wr-a{font:500 1.25rem/1.4 var(--hf);margin-top:6px}
.foot{padding-top:90px}
@media(max-width:900px){.split,.why-in{grid-template-columns:1fr;gap:28px}.split .sec-head{position:static}.split-note{grid-column:1}.chsec,.studysec,.whysec{padding:80px 0}.chapter{padding:20px}}
@media(max-width:600px){.sdash{grid-template-columns:1fr}.unit{width:70px}.unit i{width:56px;height:56px}.q-helpers .btn{flex:1 1 auto}}

/* v17: HSC pages */
.psec{padding:120px 0 100px;min-height:80vh;background:radial-gradient(60% 35% at 50% 0,rgba(var(--v-rgb),.16),transparent 70%),var(--bg)}
.phead{max-width:760px;margin-bottom:36px;display:grid;gap:14px;justify-items:start}
.phead h1{font-size:clamp(2.2rem,5.5vw,3.8rem);line-height:1.05}
.phead .lead{margin:0}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;color:var(--tx2);font-size:.9rem;margin-bottom:24px}
.crumbs a:hover{color:var(--v2)}.crumbs .cur{color:var(--tx)}
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.lcard{display:grid;gap:6px;background:var(--card);border:1px solid var(--bd);border-radius:22px;padding:26px;min-height:140px;align-content:end;transition:border-color .3s,transform .4s var(--ease)}
a.lcard:hover{border-color:var(--v2);transform:translateY(-3px)}
.lcard h3{font:600 1.5rem var(--hf)}.lcard p{color:var(--tx2);font-size:.95rem}
.lcard.off{background:transparent;border-style:dashed;opacity:.7;min-height:110px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.col h2{font:600 1.5rem var(--hf);margin-bottom:16px}
.col .lcard{margin-bottom:12px}
.lcard.row{grid-template-columns:auto 1fr;align-items:center;gap:18px;min-height:0;padding:20px 22px}
.lcard .num{width:44px;height:44px;border-radius:12px;border:2px solid var(--v2);display:grid;place-items:center;font:600 1.1rem var(--hf);color:var(--v2)}
.lcard.row h3{font-size:1.25rem}
.chbar{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:6px 0 30px}
.chbar .sumline{margin:0}
.sec-label{font:600 1.1rem var(--hf);margin-bottom:16px}
a.unit{text-decoration:none}
.block{background:var(--bg2);border:1px solid var(--bd);border-radius:22px;padding:26px;margin-bottom:14px;max-width:820px}
.block h2{font:600 1.2rem var(--hf);margin-bottom:12px;color:var(--v2)}
.block p{font-size:1.05rem;line-height:1.8}
.block .exq{font-weight:500;margin-bottom:10px}
.block.qpanel{margin-top:0;padding-top:26px;border-top:1px solid var(--bd)}
.unit-nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.unit-nav a[hidden]{display:none}
@media(max-width:820px){.cols{grid-template-columns:1fr}.psec{padding:104px 0 80px}}
@media(max-width:600px){.block{padding:20px}}

/* v18: AI tutor widget (design preview), Noto Sans Bengali */
.aiw{position:fixed;right:20px;bottom:20px;z-index:70}
.ai-fab{width:58px;height:58px;border-radius:50%;border:0;background:var(--v);color:var(--bg);display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 34px -10px rgba(var(--v-rgb),.8);transition:transform .25s var(--ease),background .2s}
.ai-fab:hover{background:var(--v2);transform:translateY(-2px)}
.ai-panel{position:absolute;right:0;bottom:74px;width:min(380px,calc(100vw - 32px));height:min(540px,calc(100vh - 120px));display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--bd);border-radius:22px;box-shadow:0 30px 70px -20px #000;overflow:hidden;opacity:0;transform:translateY(12px) scale(.98);transform-origin:100% 100%;transition:opacity .25s,transform .35s var(--ease)}
.ai-panel.open{opacity:1;transform:none}
.ai-panel[hidden]{display:none}
.ai-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--bd)}
.ai-head strong{font:600 1.05rem var(--hf);margin-right:auto}
.ai-x{width:36px;height:36px;border-radius:10px;border:1px solid var(--bd);background:none;color:var(--tx);cursor:pointer;font-size:.9rem}
.ai-x:hover{border-color:var(--v2)}
.ai-ctx{padding:10px 16px 0;color:var(--v2);font-size:.85rem;font-weight:500}
.ai-note{padding:4px 16px 10px;color:var(--tx2);font-size:.8rem;border-bottom:1px solid var(--bd)}
.ai-msgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.ai-m{max-width:90%;padding:10px 14px;border-radius:14px;font-size:.92rem;line-height:1.55}
.ai-m.user{align-self:flex-end;background:var(--v);color:var(--bg);font-weight:500}
.ai-m.bot{align-self:flex-start;background:var(--card);border:1px solid var(--bd)}
.ai-m ul{margin:8px 0 0;padding-left:1.1rem;color:var(--tx2);font-size:.85rem}
.ai-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 10px}
.ai-chip{padding:7px 12px;border-radius:999px;border:1px solid var(--bd);background:none;color:var(--tx2);font:400 .82rem var(--bf);cursor:pointer;transition:border-color .2s,color .2s}
.ai-chip:hover{border-color:var(--v2);color:var(--tx)}
.ai-form{display:flex;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--bd)}
.ai-form input{flex:1;min-width:0;height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--bd);background:var(--bg);color:var(--tx);font:400 .95rem var(--bf)}
.ai-form input:focus{border-color:var(--v2);outline:none}
.ai-form .btn{min-height:44px}
.foot-bar{padding-right:76px}
@media(max-width:600px){.aiw{right:14px;bottom:14px}.ai-panel{bottom:72px}}

/* v19: nav fit on phones, Bangla footer wordmark, social icons, AI polish */
.burger,.lang,.sndwrap{flex:none}
.brand{min-width:0;flex:0 1 auto}
.brand img{max-width:100%;object-fit:contain}
html[lang="bn"] .giant{font-family:"Space Grotesk",Inter,"Segoe UI",system-ui,sans-serif;letter-spacing:-.05em}
.social-l{margin-top:22px;color:var(--tx);font:600 .9rem var(--hf)}
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.soc{width:44px;height:44px;border-radius:12px;border:1px solid var(--bd);display:grid;place-items:center;color:var(--tx2);transition:border-color .2s,color .2s,transform .3s var(--ease)}
a.soc:hover{border-color:var(--v2);color:var(--v2);transform:translateY(-2px)}
.soc.off{opacity:.45;cursor:default}
.ai-msgs{scrollbar-width:thin;scrollbar-color:var(--bd) transparent}
.ai-msgs::-webkit-scrollbar{width:8px}
.ai-msgs::-webkit-scrollbar-track{background:transparent}
.ai-msgs::-webkit-scrollbar-thumb{background:var(--bd);border-radius:8px;border:2px solid var(--bg2)}
.ai-msgs::-webkit-scrollbar-thumb:hover{background:var(--v2)}
.ai-warn{padding:0 16px 12px;color:var(--tx2);font-size:.75rem;text-align:center}
.ai-form{padding-bottom:8px}
html.ai-lock,html.ai-lock body{overflow:hidden}
@media(max-width:600px){
  .nav{gap:8px;padding:12px}
  .brand img{height:30px}
  .lang{min-width:42px;padding:0 8px}
  .ai-panel{position:fixed;left:12px;right:12px;width:auto;bottom:calc(14px + var(--kb,0px));height:min(72vh,calc(var(--vvh,100vh) - 28px))}
  .aiw.is-open .ai-fab{display:none}
}
.fbrand .social-l{color:var(--tx)}

/* v22: unit page (outline, reading and practice views, results) */
.unit.res-self i{border-color:var(--v2);background:rgba(var(--v2-rgb),.14)}
.unit i{position:relative}
.rd{position:absolute;right:-5px;top:-5px;width:12px;height:12px;border-radius:50%;background:var(--v2);border:2px solid var(--bg)}
.key .k-self{border-color:var(--v2);background:rgba(var(--v2-rgb),.14)}
.key .k-rd{border-radius:50%;width:12px;height:12px;background:var(--v2);border-color:var(--v2);margin:0 2px}

.savewarn{max-width:820px;margin:0 0 14px;padding:12px 16px;border-radius:12px;border:1px solid var(--bad);background:rgba(var(--bad-rgb),.1);color:var(--tx);font-size:.92rem}
.savewarn[hidden]{display:none}
.ubar{position:sticky;top:64px;z-index:30;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 22px;padding:10px 0;background:rgba(var(--bg-rgb),.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd)}
.seg{display:inline-flex;padding:3px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2)}
.seg-b{min-height:36px;padding:0 18px;border:0;border-radius:9px;background:none;color:var(--tx2);font:500 .92rem var(--hf);cursor:pointer;transition:background .25s,color .25s}
.seg-b:hover{color:var(--tx)}
.seg-b[aria-pressed=true]{background:var(--v);color:var(--bg)}
.chip{margin-left:auto;display:inline-flex;align-items:center;gap:8px;color:var(--tx2);font-size:.88rem}
.chip::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--tx2)}
.chip.rs-in_progress::before{border-color:var(--v2)}
.chip.rs-lesson_done::before{background:var(--v2);border-color:var(--v2)}
.chip.rs-lesson_done{color:var(--tx)}

.ulayout{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
.ulayout.out-open{grid-template-columns:260px minmax(0,1fr)}
.uoutline{display:none}
.out-open .uoutline{display:block;position:sticky;top:132px;max-height:calc(100vh - 160px);overflow-y:auto;padding:18px;background:var(--bg2);border:1px solid var(--bd);border-radius:20px;scrollbar-width:thin;scrollbar-color:var(--bd) transparent}
.ol-h{font:600 1.05rem/1.3 var(--hf)}
.ol-h a:hover{color:var(--v2)}
.ol-sub{color:var(--tx2);font-size:.85rem;margin:4px 0 14px}
.ol-list{list-style:none;padding:0;display:grid;gap:4px}
.ol-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;color:var(--tx2);font-size:.95rem;line-height:1.35;transition:background .2s,color .2s}
.ol-item:hover{background:var(--card);color:var(--tx)}
.ol-item[aria-current=true]{background:var(--card);color:var(--tx);box-shadow:inset 3px 0 0 var(--v)}
.om{position:relative;flex:none;width:30px;height:30px;border-radius:9px;border:2px solid var(--bd);display:grid;place-items:center;font:600 .85rem var(--hf);font-style:normal;color:var(--tx)}
.om .rd{right:-4px;top:-4px;width:10px;height:10px}
.ol-item.res-ind .om{background:var(--v);border-color:var(--v);color:var(--bg)}
.ol-item.res-ast .om{background:rgba(var(--v-rgb),.45);border-color:transparent}
.ol-item.res-need .om{border-style:dashed;border-color:var(--tx2)}
.ol-item.res-self .om{border-color:var(--v2);background:rgba(var(--v2-rgb),.14)}
.ubd{display:none}
.ol-x{display:none}

.uview{min-width:0;max-width:820px;outline:none}
.uview.in{animation:uin .4s var(--ease)}
@keyframes uin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.uview .block{max-width:none;scroll-margin-top:140px}
.golist{margin:0;padding-left:1.2rem;display:grid;gap:6px}
.golist li{font-size:1.05rem;line-height:1.7}
.prereq p{color:var(--tx2)}
.resume{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px;padding:10px 14px;border:1px dashed var(--v2);border-radius:14px;color:var(--tx2);font-size:.92rem}
.resume span{flex:1 1 200px}
.ractions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ractions .note{flex-basis:100%;margin:4px 0 0}
.rdone{color:var(--v2);font:600 1rem var(--hf);margin-right:6px}

.steps{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.stp{width:44px;height:44px;border-radius:12px;border:2px solid var(--bd);background:none;color:var(--tx);font:600 1rem var(--hf);cursor:pointer;transition:background .3s,border-color .3s,box-shadow .3s}
.stp:hover{border-color:var(--v2)}
.stp.on{border-color:var(--v2);box-shadow:0 0 0 4px rgba(var(--v-rgb),.25)}
.stp.res-ind{background:var(--v);border-color:var(--v);color:var(--bg)}
.stp.res-ast{background:rgba(var(--v-rgb),.45);border-color:transparent}
.stp.res-need{border-style:dashed;border-color:var(--tx2)}
.stp.res-self{border-color:var(--v2);background:rgba(var(--v2-rgb),.14)}
.stp.res-ind.on,.stp.res-ast.on{box-shadow:0 0 0 4px rgba(var(--v-rgb),.25)}
.uview .qpanel{border-top:1px solid var(--bd)}
.ta{width:100%;min-height:96px;padding:12px 14px;border-radius:14px;border:1px solid var(--bd);background:var(--bg);color:var(--tx);font:400 1rem/1.6 var(--bf);resize:vertical}
.ta:focus{border-color:var(--v2);outline:none}
.ta:disabled{opacity:.6}
.model{margin-top:16px;padding:14px 16px;background:var(--bg2);border:1px solid var(--bd);border-radius:14px}
.model strong{display:block;font:600 .95rem var(--hf);color:var(--v2);margin:0 0 4px}
.model strong:not(:first-child){margin-top:12px}
.model p{color:var(--tx);font-size:.98rem}
.selfrow{margin-top:14px}
.selfrow>p{font-weight:500;margin-bottom:2px}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.opt.correct{animation:pulse .7s var(--ease)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--v-rgb),.6)}100%{box-shadow:0 0 0 14px rgba(var(--v-rgb),0)}}
.reportbox{display:grid;gap:10px;margin-top:16px;padding:14px 16px;border:1px dashed var(--bd);border-radius:14px}
.reportbox label{font-weight:500;font-size:.95rem}
.reportbox select{min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--bd);background:var(--bg);color:var(--tx);font:400 1rem var(--bf)}
.reportbox .q-helpers{margin-top:0}

.resbars{display:grid;gap:14px;margin:18px 0 6px}
.rbar{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;font-size:.95rem}
.rbar b{font:600 .95rem var(--hf)}
.rbar .track{grid-column:1/-1;height:10px;border-radius:999px;background:var(--bg);border:1px solid var(--bd);overflow:hidden}
.rbar .fill{display:block;height:100%;width:0;border-radius:999px;transition:width .8s var(--ease)}
.rbar.res-ind .fill{background:var(--v)}
.rbar.res-ast .fill{background:rgba(var(--v-rgb),.55)}
.rbar.res-need .fill{background:repeating-linear-gradient(135deg,var(--tx2) 0 4px,transparent 4px 8px)}
.rbar.res-self .fill{background:var(--v2)}

@media(max-width:900px){
  .ulayout.out-open{grid-template-columns:minmax(0,1fr)}
  .uoutline{display:block;position:fixed;left:0;top:0;bottom:0;z-index:80;width:min(320px,86vw);max-height:none;padding:84px 16px 24px;background:var(--bg2);border:0;border-right:1px solid var(--bd);border-radius:0 22px 22px 0;overflow-y:auto;transform:translateX(-105%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s}
  .out-open .uoutline{position:fixed;top:0;max-height:none;transform:none;visibility:visible}
  .ubd{display:block;position:fixed;inset:0;z-index:75;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .3s}
  .ubd.show{opacity:1;pointer-events:auto}
  .ubar{top:56px}
  .chip{margin-left:0}
  .ol-x{display:grid;place-items:center;position:absolute;right:14px;top:16px;width:40px;height:40px;border-radius:12px;border:1px solid var(--bd);background:none;color:var(--tx);cursor:pointer}
  .ol-x:hover{border-color:var(--v2)}
  .ol-h{padding-right:48px}
}
@media(max-width:600px){
  .seg-b{padding:0 14px}
  .ubar{gap:8px}
  .stp{width:40px;height:40px}
}

/* v23: chapter page (intro, prerequisites, unit rows with separate reading and practice status, mixed practice) */
.chdone{max-width:820px;margin:0 0 18px;padding:12px 16px;border-radius:14px;border:1px solid var(--v);background:rgba(var(--v-rgb),.12);color:var(--tx);font-size:.95rem}
.prereq.block{margin-bottom:26px}
.inl{color:var(--v2);text-decoration:underline;text-underline-offset:3px}
.inl:hover{color:var(--tx)}
.urows{display:grid;gap:12px;max-width:820px}
.urow{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(190px,auto);gap:8px 18px;align-items:center;padding:16px 18px;background:var(--card);border:1px solid var(--bd);border-radius:20px;transition:border-color .3s,transform .4s var(--ease)}
.urow:hover{border-color:var(--v2);transform:translateY(-2px)}
.urow[aria-current=true]{border-color:var(--v2);box-shadow:0 0 0 3px rgba(var(--v-rgb),.2)}
.urow .om{width:46px;height:46px;border-radius:13px;font-size:1.05rem}
.urow.res-ind .om{background:var(--v);border-color:var(--v);color:var(--bg)}
.urow.res-ast .om{background:rgba(var(--v-rgb),.45);border-color:transparent}
.urow.res-need .om{border-style:dashed;border-color:var(--tx2)}
.urow.res-self .om{border-color:var(--v2);background:rgba(var(--v2-rgb),.14)}
.ur-main h3{font:600 1.15rem/1.3 var(--hf)}
.ur-meta{color:var(--tx2);font-size:.88rem;margin-top:2px}
.ur-st{display:grid;gap:4px}
.ur-line{display:flex;align-items:baseline;gap:10px;font-size:.88rem;color:var(--tx2)}
.ur-k{flex:none;min-width:4.6rem;color:var(--tx);font-weight:500}
.ur-line.rs-lesson_done span:last-child,.ur-line.pr-ind span:last-child{color:var(--v2)}
.ur-line.pr-need span:last-child{color:var(--tx)}
.mixed.block{margin-top:26px}
.mixed.block p{color:var(--tx2)}
.mixed .note{margin:10px 0 16px}
@media(max-width:700px){.urow{grid-template-columns:auto minmax(0,1fr)}.ur-st{grid-column:1/-1}}

/* touch targets (M6a): links and buttons that are used on their own get at least 40-44px of tappable height, without changing how the text looks */
.brand{min-height:44px}
.crumbs a{display:inline-flex;align-items:center;min-height:32px}
.inl{display:inline-block;padding:10px 0}
.seg-b{min-height:40px}
summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
@media(pointer:coarse){.seg-b{min-height:44px}}

/* account link in the menu (js/auth.js) */
.nav .menu .acct{color:var(--tx);border:1px solid var(--bd)}
.nav .menu .acct:hover{border-color:var(--v2)}
@media(max-width:820px){.nav .menu .acct{margin-top:4px;text-align:center}}