/* header */
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--acc);color:#fff;padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);min-width:0;flex:0 1 auto;margin-right:auto;overflow:hidden}
.brand>span:last-child{min-width:0;overflow:hidden}
.logo{width:42px;height:42px;border-radius:10px;background:#fff;color:var(--acc);border:2px solid var(--acc);display:grid;place-items:center;font:800 11px/1 Fraunces,serif;text-align:center;flex:none}
.brand b{font:700 15px/1.1 Fraunces,serif;display:block;white-space:nowrap}
.brand small{font:11px 'JetBrains Mono',monospace;color:var(--mut)}
/* second header row: the full menu, always on its own line on desktop so nothing can overlap */
nav.main{display:flex;gap:4px;align-items:center;order:3;flex:1 0 100%;border-top:1px solid var(--line);padding:6px 0;overflow-x:auto;scrollbar-width:none}
nav.main::-webkit-scrollbar{display:none}
nav.main a{padding:7px 12px;border-radius:9px;color:var(--mut);text-decoration:none;font-weight:500;font-size:14px;white-space:nowrap;flex:none}
nav.main a.on,nav.main a:hover{background:var(--card2);color:var(--ink)}
.tools{display:flex;gap:8px;align-items:center;flex:none}
.search{background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:20px;padding:7px 14px;width:150px;font:inherit;font-size:13px}
.msearch{display:none}
.langsel{background:var(--card);border:1px solid var(--line);color:var(--ink);border-radius:18px;padding:6px 10px;font:inherit;font-size:13px;cursor:pointer;max-width:110px}
.ib{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font-size:15px;flex:none}
.pbar{width:80px;height:8px;background:var(--card2);border-radius:9px;overflow:hidden}
.pbar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--gold));width:0;transition:width .3s}
.menu{display:none}
@media(max-width:760px){nav.main{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg2);padding:10px 16px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);overflow:visible}nav.main.open{display:flex}nav.main .msearch{display:block;width:100%;margin-top:8px}.menu{display:block}.tools .search,.pbar{display:none}.top{position:sticky}.top .wrap{position:relative;flex-wrap:nowrap}}
@media(max-width:520px){.brand>span:last-child{display:none}.tools{margin-left:auto}#pct{display:none}.tools{gap:6px}.langsel{max-width:86px;padding:6px 6px}}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* generic */
section.pg{padding:28px 0 60px}
.hero{background:var(--hero);border:1px solid var(--line);border-radius:24px;padding:44px;display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;box-shadow:var(--shadow)}
.kick{font:600 12px 'JetBrains Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.hero h1{font-size:clamp(32px,5vw,54px);margin:.25em 0}
.hero h1 span{color:var(--acc2)}
.tag{color:var(--gold);font-weight:600;font-size:18px}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{display:inline-flex;gap:8px;align-items:center;padding:11px 18px;border-radius:11px;background:var(--acc);color:#fff;text-decoration:none;border:0;cursor:pointer;font:inherit;font-weight:600;font-size:15px}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.sm{padding:7px 12px;font-size:13px}
.stats{display:flex;gap:28px;margin-top:22px;flex-wrap:wrap}
.stats b{font:800 28px Fraunces,serif;display:block}
.stats small{font:11px 'JetBrains Mono',monospace;color:var(--mut);letter-spacing:.1em}
@media(max-width:800px){.hero{grid-template-columns:1fr;padding:26px}.shield{max-width:280px;margin:0 auto}}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);min-width:0}
.card.link{text-decoration:none;color:inherit;transition:.2s;display:block}
.card.link:hover{transform:translateY(-3px);border-color:var(--acc)}
.num{font:800 13px 'JetBrains Mono',monospace;color:var(--acc2)}
.meter{height:6px;background:var(--card2);border-radius:6px;overflow:hidden;margin-top:10px}
.meter i{display:block;height:100%;background:var(--teal)}
.muted{color:var(--mut)}
.lrow{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.chip{display:inline-block;padding:3px 10px;border-radius:20px;background:var(--card2);border:1px solid var(--line);font-size:12px;margin:2px}
h2.sec{font-size:28px;margin-top:44px}
.shield{color:var(--ink)}
.shield svg{width:100%;height:auto}
img,svg{max-width:100%}
/* lesson */
.lay{display:grid;grid-template-columns:280px minmax(0,1fr);gap:26px}
.side{position:sticky;top:124px;align-self:start;max-height:calc(100vh - 140px);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.side a{display:block;padding:6px 9px;border-radius:8px;color:var(--mut);text-decoration:none;font-size:13.5px}
.side a.on{background:var(--card2);color:var(--ink)}
.side a.done::before{content:'\2713  ';color:var(--teal)}
.side h4{font-size:13px;margin:12px 6px 4px;color:var(--acc2)}
@media(max-width:900px){.lay{grid-template-columns:1fr}.side{position:static;max-height:300px;order:2}}
article.lesson{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:34px;min-width:0;overflow-wrap:anywhere}
@media(max-width:600px){article.lesson{padding:20px}article.lesson h1{font-size:26px}}
article.lesson h1{font-size:32px}
article.lesson h3{margin-top:1.6em;color:var(--teal)}
.callout{border-left:4px solid var(--gold);background:var(--card2);padding:14px 18px;border-radius:0 12px 12px 0;margin:18px 0}
.callout.red{border-color:var(--acc)}
.callout.new{border-color:var(--teal)}
.callout b.h{display:block;font-family:Fraunces,serif;margin-bottom:4px}
html[lang="bn"] .callout b.h{font-family:'Noto Serif Bengali',serif}
table{border-collapse:collapse;width:100%;font-size:14.5px;margin:14px 0}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--card2);overflow-wrap:normal;word-break:keep-all;hyphens:none}
[id]{scroll-margin-top:130px}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tw table{min-width:520px}
.keys{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));margin:14px 0}
.keys div{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px;font-size:14px}
details{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:12px 16px;margin:10px 0}
summary{cursor:pointer;font-weight:600}
.quiz .q{margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);min-width:0}
fieldset.q legend{padding:0 4px}
.quiz button.o{display:block;width:100%;text-align:left;margin:6px 0;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;font:inherit;font-size:14.5px}
.quiz button.o:disabled{cursor:default}
.quiz button.o.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 18%,var(--card))}
.quiz button.o.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 18%,var(--card))}
.quiz label.opt{display:flex;gap:8px;align-items:flex-start;margin:6px 0;padding:8px 10px;border-radius:9px;cursor:pointer}
.quiz label.opt:hover{background:var(--card)}
.quiz label.opt input{margin-top:5px;flex:none}
.exp{font-size:14px;color:var(--mut);margin-top:6px}
.navrow{display:flex;justify-content:space-between;gap:10px;margin-top:30px;flex-wrap:wrap}
.navrow .btn{max-width:100%}
/* timeline */
.tl{border-left:2px solid var(--acc);margin:16px 0 16px 8px;padding-left:18px}
.tl div{position:relative;margin:0 0 12px}
.tl div::before{content:'';position:absolute;left:-25px;top:7px;width:11px;height:11px;border-radius:50%;background:var(--acc)}
.tl b{font-family:'JetBrains Mono',monospace;color:var(--gold)}
/* flashcards */
.flash{perspective:1000px;height:240px;cursor:pointer;max-width:560px;margin:20px auto}
.flash .in{position:relative;height:100%;transition:transform .5s;transform-style:preserve-3d}
.flash.flip .in{transform:rotateY(180deg)}
.flash .f,.flash .b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;display:grid;place-items:center;padding:26px;text-align:center;border:1px solid var(--line);font-size:17px;overflow:auto}
.flash .f{background:var(--hero);font-family:Fraunces,serif;font-weight:700;font-size:22px}
html[lang="bn"] .flash .f{font-family:'Noto Serif Bengali',serif}
.flash .b{background:var(--card);transform:rotateY(180deg)}
/* certificate */
.cert{background:#fffdf7;color:#1b1b1b;border:12px double #9c1c2c;border-radius:6px;padding:46px;text-align:center;max-width:900px;margin:20px auto;font-family:Georgia,'Noto Serif Bengali',serif;position:relative}
.cert h2{font:700 34px Fraunces,'Noto Serif Bengali',serif;color:#9c1c2c}
.cert h3{font-family:Fraunces,'Noto Serif Bengali',serif}
.cert-k{letter-spacing:.3em;font:600 12px Fraunces,'Noto Sans Bengali',serif;color:#666}
.cert-s{max-width:620px;margin:auto}
.cert-v{font-size:11px;color:#777;margin-top:18px}
.cert .sig{font:italic 22px Georgia,serif}
.cert .nm{font:italic 38px Georgia,'Noto Serif Bengali',serif;border-bottom:1px solid #999;display:inline-block;padding:0 30px;margin:10px 0;max-width:100%;overflow-wrap:anywhere}
.cert .seal{position:absolute;right:36px;bottom:30px;width:90px;height:90px;border-radius:50%;background:radial-gradient(#d7263d,#7a0f1f);color:#fff;display:grid;place-items:center;font:800 13px Fraunces,serif}
@media(max-width:600px){.cert{padding:24px 16px;border-width:8px}.cert h2{font-size:24px}.cert .nm{font-size:26px;padding:0 8px}.cert .seal{position:static;margin:16px auto 0}}
input.txt{background:var(--card2);border:1px solid var(--line);color:var(--ink);padding:10px 14px;border-radius:10px;font:inherit;width:100%;max-width:380px;margin:4px 0}
footer.ft{border-top:1px solid var(--line);padding:30px 0;color:var(--mut);font-size:13.5px;background:var(--bg2)}
footer.ft .wrap{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between}
mark{background:var(--gold);color:#000;border-radius:3px}
abbr[title]{text-decoration:underline dotted var(--teal);text-underline-offset:3px;cursor:help}
table.abbr th[scope=row]{white-space:nowrap;color:var(--acc2)}
/* practice engine */
.pxo.sel{border-color:var(--teal)!important;background:color-mix(in srgb,var(--teal) 18%,var(--card))!important}
.qmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px;margin:10px 0}
.qmap button{height:38px;border-radius:9px;border:1px solid var(--line);background:var(--card2);color:var(--ink);cursor:pointer;font:inherit;font-size:13px}
.qmap button.ans{background:color-mix(in srgb,var(--teal) 25%,var(--card2))}
.qmap button.flag{outline:2px solid var(--gold)}
.qmap button.cur{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
.bd{display:grid;grid-template-columns:minmax(90px,160px) 1fr 52px;gap:10px;align-items:center;margin:6px 0;font-size:14px}
.bd .meter{margin:0}
/* case lab */
.chips{display:flex;flex-wrap:wrap;gap:6px}
button.chip{cursor:pointer;color:var(--ink);font:inherit;font-size:13px}
button.chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.decide{margin:20px 0;border-color:var(--gold)}
.decide button.o{display:block;width:100%;text-align:left;margin:6px 0;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--card2);color:var(--ink);cursor:pointer;font:inherit}
.decide button.o.right{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 18%,var(--card))}
.decide button.o.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 18%,var(--card))}
.irac{display:grid;gap:10px;margin:12px 0}
.irac>div{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:0 10px 10px 0;padding:10px 14px}
.irac>div b.k{display:block;font:600 11px 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);margin-bottom:4px}
/* account, exam bar, toast */
.ib.acct{display:grid;place-items:center;overflow:hidden;text-decoration:none;padding:0}
.ib.acct img{width:100%;height:100%;object-fit:cover}
.ib.acct span{font-weight:700;font-size:15px}
.ib.acct.in{border-color:var(--teal)}
.acct .who{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.acct .who img,.acct .ini{width:56px;height:56px;border-radius:50%;flex:none}
.acct .ini{display:grid;place-items:center;background:var(--acc);color:#fff;font-weight:700;font-size:22px}
.gsi{min-height:44px;margin:10px 0}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.row .txt{flex:1 1 220px}
.exbar{position:sticky;top:110px;z-index:5;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between;align-items:center;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 16px;margin-bottom:14px;box-shadow:var(--shadow)}
@media(max-width:760px){.exbar{top:68px}}
#exTime.low{color:var(--bad)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:12px;max-width:min(92vw,520px);text-align:center;z-index:200;transition:.25s;box-shadow:var(--shadow)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media print{.top,footer.ft,.noprint,.skip{display:none!important}body{background:#fff}.cert{border-color:#9c1c2c;margin:0 auto}}