@font-face{font-family:"Jameel Noori Nastaleeq";src:url("jameel-noori.woff") format("woff");font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F}
/* Chemistry Asaan — "lab notebook" identity
   ink #18204A · paper #EEF2FB (graph grid) · cobalt #2F45C8 (CuSO4 blue) · sodium #FFB000 (flame) · leaf #0E9F6E · alarm #E0443E */
:root{
  --ink:#18204A; --muted:#5B6488; --paper:#EEF2FB; --grid:#DCE3F5; --card:#FFFFFF; --line:#D5DCF0;
  --teal:#2F45C8; --teal-2:#E3E8FD; --amber:#E89A00; --amber-2:#FFF3D1; --sodium:#FFB000;
  --red:#E0443E; --red-2:#FDE7E6; --green:#0E9F6E; --green-2:#DDF5EC; --r:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{color:var(--ink);font-family:"Lexend",system-ui,sans-serif;font-size:16px;line-height:1.55;font-weight:400}
body{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:22px 22px}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--sodium);outline-offset:2px}
.ur{font-family:"Jameel Noori Nastaleeq",serif;direction:rtl;line-height:2;font-size:1.22rem;text-align:right}
.wrap{max-width:620px;margin:0 auto;padding:14px 16px 104px}
/* header */
header.top{display:flex;align-items:center;gap:10px;padding:4px 0 14px}
header.top .logo{width:40px;height:40px;border-radius:9px;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:700;font-size:1.05rem;position:relative}
header.top .logo::after{content:"";position:absolute;right:-4px;bottom:-4px;width:12px;height:12px;border-radius:50%;background:var(--sodium);border:3px solid var(--paper)}
header.top h1{font-size:1.06rem;font-weight:700;letter-spacing:-.01em}
header.top small{display:block;color:var(--muted);font-size:.78rem}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-weight:600;padding:6px 0 10px}
/* surfaces: cards are paper sheets; hero is the cobalt solution */
.card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px}
.hero{background:var(--teal);color:#fff;border:0;border-radius:22px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.07)}
.hero h2{font-size:1.4rem;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.hero p{opacity:.92;font-size:.92rem}
.hero .ur{text-align:left}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.stat{background:rgba(255,255,255,.14);border-radius:14px;padding:10px 6px;text-align:center}
.stat b{display:block;font-size:1.4rem;font-weight:700;line-height:1.2}
.stat span{font-size:.72rem}
/* buttons */
.btn{display:block;width:100%;padding:14px 16px;border-radius:14px;font-weight:600;text-align:center;font-size:1rem;transition:transform .08s}
.btn:active{transform:scale(.98)}
.btn.pri{background:var(--sodium);color:var(--ink);box-shadow:0 3px 0 #C98A00}
.btn.teal{background:var(--teal);color:#fff;box-shadow:0 3px 0 #1F2F94}
.btn.ghost{background:var(--teal-2);color:var(--teal)}
.btn.light{background:#fff;color:var(--teal)}
.btn.sm{padding:9px 12px;font-size:.88rem}
.btn:disabled{opacity:.45}
.gbtn{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.row{display:flex;gap:10px}.row>*{flex:1}
.sec{font-size:.86rem;font-weight:600;color:var(--muted);margin:18px 2px 10px}
/* list rows */
.unit{display:flex;align-items:center;gap:12px;width:100%;text-align:left}
.unit .num{width:44px;height:44px;flex:none;border-radius:10px;background:var(--teal-2);color:var(--teal);display:grid;place-items:center;font-weight:700}
.unit .t{flex:1;min-width:0}.unit .t b{display:block;font-size:.97rem;line-height:1.35;font-weight:600}
.bar{height:6px;border-radius:9px;background:var(--line);overflow:hidden;margin-top:5px}.bar i{display:block;height:100%;background:var(--green);border-radius:9px}
.pct{font-size:.78rem;font-weight:600;color:var(--muted)}
.tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;scrollbar-width:none}
.tabs button{flex:none;padding:8px 14px;border-radius:99px;background:var(--card);border:1.5px solid var(--line);font-weight:600;font-size:.86rem;color:var(--muted)}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
/* quiz & options */
.opt{display:block;width:100%;text-align:left;padding:13px 14px;border:1.5px solid var(--line);border-radius:14px;background:#fff;margin-bottom:8px;font-weight:500}
.opt.ok{border-color:var(--green);background:var(--green-2)}.opt.bad{border-color:var(--red);background:var(--red-2)}
.q{font-size:1.06rem;font-weight:600;margin-bottom:12px}
.fb{border-radius:12px;padding:12px;margin:6px 0 12px;font-size:.92rem}.fb.ok{background:var(--green-2)}.fb.bad{background:var(--red-2)}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.74rem;font-weight:600;background:var(--amber-2);color:#8A5A00}
.frame{font-weight:600;color:var(--teal)}.ex{font-size:.9rem;color:var(--muted);margin-top:4px}
.progress-line{font-size:.82rem;color:var(--muted);text-align:center;margin:6px 0 10px}
.center{text-align:center}.muted{color:var(--muted)}.small{font-size:.84rem}.mt{margin-top:12px}.mb{margin-bottom:12px}
.big-emoji{font-size:2.6rem;line-height:1.2}
.foot{font-size:.78rem;color:var(--muted);text-align:center;margin-top:22px}
.center-screen{min-height:80vh;display:flex;flex-direction:column;justify-content:center}
/* line study: the English line is the hero of the screen */
.slot{color:var(--ink);font-weight:500;background:linear-gradient(transparent 62%,#FFE7A3 62%);padding:0 1px}
.sent{font-size:1.12rem;line-height:1.75;color:var(--teal);font-weight:600}
.tchip{display:inline-block;padding:3px 9px;border-radius:7px;background:var(--ink);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.02em}
.vbox{background:#FBFCFF;border:1.5px dashed var(--line);border-radius:14px;padding:12px 14px;font-size:1.06rem;line-height:2.05}
.vw.hid{background:var(--amber-2);border-radius:6px;padding:0 5px;color:#8A5A00;font-weight:600}
.vw.peek{background:var(--teal-2);color:var(--teal)}
.big-ur{font-size:1.16rem;line-height:2.35}
.hook{background:var(--amber-2);border-radius:12px;padding:10px 12px;font-size:.9rem}
.qbox{background:#fff;border:1.5px solid var(--sodium);border-radius:14px;padding:10px 12px;margin-bottom:12px;font-size:.9rem}
.daybar{height:10px;border-radius:9px;background:#fff;border:1.5px solid var(--line);overflow:hidden;margin:6px 0 12px}.daybar i{display:block;height:100%;background:var(--sodium);transition:width .4s}
/* grammar colours: each word family keeps one colour everywhere */
.gw{display:inline;border-radius:6px;padding:0 4px;font:inherit;font-weight:600}
.gw.g-BE,.gw.g-HAVE{background:#ECE5FF;color:#5B34C7}.gw.g-VS,.gw.g-BASEV,.gw.g-MODAL,.gw.g-NEG{background:#FFE3EC;color:#B3264F}
.gw.g-ART,.gw.g-THE{background:var(--green-2);color:#07774F}.gw.g-OF,.gw.g-PREP{background:var(--amber-2);color:#8A5A00}.gw.g-PRON,.gw.g-REL,.gw.g-CONJ{background:var(--teal-2);color:var(--teal)}
.gblank{display:inline-block;min-width:44px;border-radius:6px;background:var(--line);text-align:center;font-weight:600}
.glist{max-height:290px;overflow:auto}.gitem{font-size:.88rem;padding:8px;border-radius:10px;border-bottom:1px dashed var(--line)}.gitem.hl{background:var(--amber-2)}
/* the signature: periodic-table tiles */
.tile{position:relative;background:#fff;color:var(--ink);border-radius:12px;border:2px solid var(--ink);aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center}
.tile .z{position:absolute;left:7px;top:4px;font-size:.72rem;font-weight:600}
.tile .sym{font-size:1.25rem;font-weight:700;line-height:1}
.tile .nm{font-size:.56rem;color:var(--muted);margin-top:2px}
.hero-tile{width:108px;flex:none;border:3px solid #fff;background:var(--sodium);color:var(--ink)}
.hero-tile .sym{font-size:2.6rem}.hero-tile .z{font-size:.9rem;left:9px;top:6px}.hero-tile .nm{color:var(--ink);font-size:.72rem;font-weight:600}
.hero-row{display:flex;gap:16px;align-items:center}
.path{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.path .tile{border-color:var(--line)}
.path .tile.done{background:var(--teal);border-color:var(--teal);color:#fff}.path .tile.done .nm{color:#C9D2FF}
.path .tile.cur{background:var(--sodium);border-color:var(--ink);box-shadow:0 0 0 4px #FFE7A3}
.path .tile.lock{opacity:.45;border-style:dashed}
.xpbar{height:8px;border-radius:9px;background:rgba(255,255,255,.25);overflow:hidden;margin-top:6px}.xpbar i{display:block;height:100%;background:var(--sodium)}
.ring{display:none}
/* nav */
.nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1.5px solid var(--line);display:flex;justify-content:center;padding:6px 6px calc(6px + env(safe-area-inset-bottom));z-index:20}
.nav .in{display:flex;max-width:620px;width:100%}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.7rem;font-weight:600;color:var(--muted);padding:6px 0;border-radius:12px}
.nav button svg{width:22px;height:22px}.nav button.on{color:var(--teal);background:var(--teal-2)}
.dot{display:inline-block;min-width:22px;padding:0 7px;border-radius:99px;background:var(--red);color:#fff;font-size:.74rem;font-weight:600;text-align:center}
input.txt,textarea.txt{width:100%;padding:13px 14px;border-radius:13px;border:1.5px solid var(--line);font:inherit;background:#fff;display:block}
table.plan{width:100%;border-collapse:collapse;font-size:.9rem}table.plan td{padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
/* feedback moments */
.toast{position:fixed;left:50%;top:16px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 16px;border-radius:99px;font-weight:600;font-size:.9rem;z-index:99;animation:pop .25s}
@keyframes pop{from{transform:translate(-50%,-10px);opacity:0}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:98;overflow:hidden}
.confetti i{position:absolute;top:-10px;width:9px;height:14px;border-radius:2px;animation:fall 2.2s linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){.confetti,.toast{animation:none}.confetti{display:none}.btn{transition:none}}
.prepost{display:flex;align-items:center;justify-content:center;gap:16px;margin:10px 0}.prepost div{text-align:center}.prepost b{display:block;font-size:2.1rem;font-weight:700}
.bars{display:flex;gap:8px;align-items:flex-end;height:110px;margin-top:10px}.bars div{flex:1;text-align:center;font-size:.7rem;color:var(--muted)}.bars span{display:block;background:var(--teal);border-radius:6px 6px 0 0;margin-bottom:4px}
/* paywall */
.qrimg{width:100%;max-width:290px;display:block;margin:10px auto;border-radius:14px;border:1.5px solid var(--line)}
.timer{font-size:2rem;font-weight:700;color:var(--red);text-align:center;font-variant-numeric:tabular-nums}
.badge-off{display:inline-block;background:var(--red);color:#fff;font-weight:700;padding:4px 10px;border-radius:8px}
.strike{text-decoration:line-through;color:var(--muted)}
.lb{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.lb b{width:28px;text-align:center}.lb.me{color:var(--teal);font-weight:600}
table.tbl{width:100%;border-collapse:collapse;font-size:.84rem}table.tbl td,table.tbl th{padding:7px 5px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.warn{background:var(--red-2);color:#A82520;border-radius:12px;padding:12px;margin-bottom:12px;font-weight:500}
.okc{background:var(--green-2);color:#07603F;border-radius:12px;padding:12px;margin-bottom:12px;font-weight:500}
.sheet{position:fixed;inset:0;background:rgba(24,32,74,.45);display:flex;align-items:flex-end;justify-content:center;z-index:50}
.sheet-in{background:#fff;border-radius:22px 22px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom));max-width:620px;width:100%;max-height:85vh;overflow:auto}

/* 3-step loop */
.steps3{display:flex;gap:6px;margin:0 0 12px}
.steps3 span{flex:1;text-align:center;padding:7px 4px;border-radius:12px;background:#fff;border:1.5px solid var(--line);font-size:.84rem;font-weight:600;color:var(--muted)}
.steps3 span.on{background:var(--teal);border-color:var(--teal);color:#fff}.steps3 span.done{background:var(--green-2);border-color:var(--green-2);color:#07603F}
.divider{border-top:1.5px dashed var(--line);margin:14px 0}
.chunks{font-size:1.1rem;line-height:2.1;color:var(--teal);font-weight:600}
.chunks.big{font-size:1.2rem}
.ch{padding:2px 4px;border-radius:7px;transition:background .2s}
.ch.act{background:var(--sodium);color:var(--ink)}
.ch.dim{color:#B7C0E0}
.mic{display:block;margin:16px auto 4px;width:84px;height:84px;border-radius:50%;background:var(--sodium);font-size:2.2rem;box-shadow:0 4px 0 #C98A00}
.mic.on{background:var(--red);box-shadow:0 0 0 10px var(--red-2);animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 16px var(--red-2)}}
@media (prefers-reduced-motion:reduce){.mic.on{animation:none}}
.wok{color:var(--green)}.wbad{color:var(--red);text-decoration:underline wavy}

/* memory tricks */
.trick{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:16px;margin-bottom:12px;box-shadow:5px 5px 0 var(--sodium)}
.th{font-weight:700;font-size:.95rem;margin-bottom:10px}
.acro{font-size:1.35rem;font-weight:700;color:var(--teal);line-height:1.35;text-align:center;margin:6px 0 12px}
.tbody{font-size:.95rem;line-height:1.7}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin:6px 0}
.lt{border:2px solid var(--teal);border-radius:12px;padding:8px 6px;background:var(--teal-2);display:flex;flex-direction:column;align-items:center;min-height:68px}
.lt b{font-size:1.5rem;color:var(--teal);line-height:1}.lt span{font-size:.78rem;margin-top:4px;font-weight:600;color:var(--muted)}
.lt.open{background:var(--sodium);border-color:var(--ink)}.lt.open b,.lt.open span{color:var(--ink)}
.spine{counter-reset:s;list-style:none;margin:4px 0 12px}
.spine li{counter-increment:s;position:relative;padding:8px 10px 8px 40px;margin-bottom:6px;background:var(--teal-2);border-radius:12px;font-weight:600;color:var(--ink)}
.spine li::before{content:counter(s);position:absolute;left:8px;top:7px;width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;font-size:.8rem;display:grid;place-items:center}
.chain{display:flex;flex-direction:column;align-items:stretch;margin-bottom:10px}
.chain div{background:var(--amber-2);border-radius:12px;padding:9px 12px;font-weight:600}
.chain .arr{text-align:center;color:var(--amber);font-weight:700;line-height:1.4}
table.pair{width:100%;border-collapse:separate;border-spacing:4px;font-size:.9rem}
table.pair th{background:var(--ink);color:#fff;border-radius:10px;padding:8px;font-weight:600}
table.pair td{background:var(--teal-2);border-radius:10px;padding:8px;vertical-align:top}
.emo{font-size:2.6rem;text-align:center;letter-spacing:.15em;margin:4px 0 10px}
.rhyme{font-size:1.15rem;font-weight:600;font-style:italic;text-align:center;color:var(--teal);margin-bottom:10px;line-height:1.7}

/* memorization engine */
.meter{display:flex;align-items:center;gap:8px;margin:-4px 0 12px;font-size:.78rem;font-weight:600;color:var(--muted)}
.meter div{flex:1;height:10px;border-radius:9px;background:#fff;border:1.5px solid var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),#7B5CFF);transition:width .5s}
.meter b{color:var(--teal);width:38px;text-align:right}
.gamehead{display:flex;gap:12px;align-items:center;margin-bottom:6px}
.gamehead .gi{width:46px;height:46px;border-radius:14px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:1.4rem;flex:none}
.code{font-size:1.5rem;font-weight:700;letter-spacing:.12em;color:var(--teal);background:var(--teal-2);border-radius:14px;padding:14px;line-height:1.7;word-spacing:.25em}
.ghaib .vw.hid{background:repeating-linear-gradient(90deg,#E7EBFA 0 6px,#F4F6FD 6px 12px);color:#8C96C3}
.built{min-height:60px;border:2px dashed var(--line);border-radius:14px;padding:10px;line-height:2.2}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:9px 12px;border-radius:12px;background:#fff;border:1.5px solid var(--line);font-weight:600;font-size:.95rem}
.chip.on{background:var(--teal);color:#fff;border-color:var(--teal);display:inline-block;margin:2px 0}
.chip.used{opacity:.2;pointer-events:none}
.chip.shake{animation:shake .35s;border-color:var(--red);background:var(--red-2)}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.flip{width:100%;padding:8px;border-radius:9px;background:var(--sodium);font-weight:700}
.sparkle{position:fixed;left:50%;top:40%;font-size:3.4rem;transform:translate(-50%,-50%);pointer-events:none;z-index:99;animation:spk .9s ease-out forwards}
@keyframes spk{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}30%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:0;transform:translate(-50%,-90%) scale(1)}}
.flashhead{background:var(--ink);color:#fff;border-radius:14px;padding:10px 14px;font-weight:600;margin-bottom:10px}
.locked{border:2px solid var(--green);background:var(--green-2)}
@media (prefers-reduced-motion:reduce){.sparkle,.chip.shake{animation:none}.sparkle{display:none}}
.steps3 span{font-size:.78rem}

/* calm 2-screen lesson */
.dots{display:flex;gap:5px;justify-content:flex-end}.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}.dots i.on{background:var(--teal)}
.vbox.fade{background:#fff;border-style:solid}
.trickbox{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);margin-bottom:12px}
.trickbox summary{padding:13px 16px;font-weight:600;cursor:pointer;color:var(--teal)}
.trickbox .trick{border:0;box-shadow:none;margin:0;padding:0 16px 14px;border-radius:0}
.reviewhead{background:var(--teal-2);color:var(--teal);border-radius:12px;padding:9px 14px;font-weight:600;margin-bottom:10px;font-size:.9rem}
.steps3 span{font-size:.86rem}

/* Urdu memory sentence */
.membox{background:var(--amber-2);border-radius:14px;padding:12px 14px;margin-top:12px}
.memh{font-weight:600;font-size:.9rem;margin-bottom:6px}
.mnline{font-weight:600;color:#6B4600;line-height:1.6}
.mnline.big{font-size:1.1rem}
.cw{font-size:.86rem;margin-bottom:6px}.cw b{letter-spacing:.08em;color:var(--teal);font-size:1rem}
.pgrid{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.pc{display:flex;flex-direction:column;align-items:center;background:#fff;border-radius:9px;padding:4px 7px;line-height:1.3}
.pc b{font-weight:600;color:var(--teal);font-size:.92rem}.pc i{font-style:normal;color:#6B4600;font-size:.82rem}
.pc u{text-decoration:none;background:var(--sodium);color:var(--ink);border-radius:3px;padding:0 1px}

/* teacher content editor */
.topic h3{font-size:1.05rem}
.edline{border:1.5px solid var(--line);border-radius:12px;padding:8px 10px;margin-bottom:8px;background:#FBFCFF}
.edline summary{cursor:pointer;font-weight:500;font-size:.9rem}
.edsent{border-top:1px dashed var(--line);margin-top:10px;padding-top:10px}
.bad{color:var(--red);font-weight:600}.good{color:var(--green);font-weight:600}
.notepg{border:1.5px solid var(--line);border-radius:12px;padding:10px;margin-bottom:10px}
.nimg{max-width:100%;border-radius:10px;display:block}
.savebar{position:sticky;bottom:10px;z-index:5;margin-top:10px}
textarea.txt{resize:vertical}
select.txt{appearance:auto}

/* topic flow: video -> revision -> notes */
.ttitle{font-weight:600;font-size:1.05rem;margin:6px 0 8px;color:var(--ink,#18204A)}
.stagebar{display:flex;gap:6px;margin-bottom:10px}
.stagebar span{flex:1;text-align:center;font-size:.78rem;padding:6px 4px;border-radius:999px;background:#EEF1FB;color:#5A6390}
.stagebar span.on{background:var(--cobalt,#2F45C8);color:#fff;font-weight:600}
.stagebar span.done{background:var(--green-2);color:var(--green)}
.vframe{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#0d1230}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tpills{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.tpill{font-size:.7rem;padding:2px 7px;border-radius:999px;background:#EEF1FB;color:#5A6390}
.tpill.ok{background:var(--green-2);color:var(--green)}
.tpill.na{display:none}
.nbody{line-height:1.65;font-size:.95rem}
.nbody p{margin:0 0 8px}.nbody ul{margin:0 0 8px;padding-left:20px}.nbody li{margin:2px 0}
.nbody .nh{font-size:1rem;margin:10px 0 6px}
.ntw{overflow-x:auto;margin:6px 0 10px}
.ntable{border-collapse:collapse;font-size:.86rem;min-width:100%}
.ntable td{border:1px solid var(--line);padding:6px 8px;vertical-align:top}
.ntable tr:first-child td{background:#EEF1FB;font-weight:600}

/* one best trick per line */
.besttrick{margin-top:12px;border:2px solid var(--gold,#F5B800);border-radius:16px;padding:12px 12px 10px;background:#FFFBEA}
.bt-h{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.bt-i{flex:none;width:34px;height:34px;border-radius:10px;background:var(--navy,#0B2167);color:#FFD23F;display:grid;place-items:center;font-weight:800}
.besttrick .trick.flat,.besttrick .membox.flat{border:0;background:none;padding:0;margin:0;box-shadow:none}
.beats{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:4px 0 8px}
.beats span{background:var(--navy,#0B2167);color:#fff;border-radius:10px;padding:8px 10px;font-weight:700;font-size:.95rem}
.beats i{font-style:normal;font-weight:800;font-size:1.2rem;color:#B07A00}
.nums{display:grid;gap:6px;margin:4px 0 8px}
.nums div{display:flex;gap:10px;align-items:center;background:#fff;border:1.5px solid #F1DA8A;border-radius:10px;padding:6px 10px}
.nums b{font-size:1.1rem;color:var(--navy,#0B2167);min-width:56px}
.cue{background:#FFF4CC;border-radius:10px;padding:8px 10px;font-size:.88rem}
.cue span{font-weight:700;color:#7A5200;margin-right:6px}
.sent mark{background:#FFE07A;color:inherit;border-radius:4px;padding:0 2px}

.cmp{display:grid;gap:4px;margin:4px 0}
.cmpr{display:grid;grid-template-columns:110px 1fr 30px;gap:6px;align-items:center;font-size:.76rem;padding:3px 4px;border-radius:8px}
.cmpr.on{background:#FFF4CC;font-weight:700}
.cmpb{height:8px;background:#E7EAF5;border-radius:99px;overflow:hidden}
.cmpb i{display:block;height:100%;background:var(--navy,#0B2167);border-radius:99px}
.cmpr.on .cmpb i{background:#F5B800}
.cmpw{grid-column:1/-1;color:#6B7290;font-size:.7rem;margin-top:-2px}

/* ============ BRAND THEME — matches the "Chemistry by Sir Bilal Hassan" logo ============
   navy #0A1F5C · royal #1A4FD0 · gold #FFC21A · sky line-art #7FC4FF · white */
:root{
  --navy:#0A1F5C; --navy-2:#0F2D82; --royal:#1A4FD0; --gold:#FFC21A; --gold-d:#C98F00; --gold-2:#FFF4CC; --sky:#7FC4FF;
  --ink:#0B1B4A; --muted:#5A6690; --line:#DDE4F6;
  --teal:#1A4FD0; --teal-2:#E8EFFF; --sodium:#FFC21A; --amber-2:#FFF4CC; --r:20px;
}
html,body{font-family:"Poppins","Jameel Noori Nastaleeq",system-ui,sans-serif}
body{background-color:var(--navy);
  background-image:radial-gradient(900px 520px at 50% -120px,#2257D8 0%,#123A9E 38%,rgba(10,31,92,0) 72%);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' fill='none' stroke='%237FC4FF' stroke-opacity='.13' stroke-width='1.6'%3E%3Cpath d='M48 30l22 12.7v25.4L48 80.8 26 68.1V42.7z'/%3E%3Ccircle cx='48' cy='55.4' r='11'/%3E%3Cpath d='M70 42.7l14-8'/%3E%3Cellipse cx='210' cy='60' rx='34' ry='12'/%3E%3Cellipse cx='210' cy='60' rx='34' ry='12' transform='rotate(60 210 60)'/%3E%3Cellipse cx='210' cy='60' rx='34' ry='12' transform='rotate(120 210 60)'/%3E%3Ccircle cx='210' cy='60' r='3.5'/%3E%3Cpath d='M120 170v26l-20 34a6 6 0 0 0 5 9h50a6 6 0 0 0 5-9l-20-34v-26M114 170h32'/%3E%3Ccircle cx='122' cy='222' r='3'/%3E%3Ccircle cx='136' cy='214' r='2'/%3E%3Ccircle cx='232' cy='200' r='6'/%3E%3Ccircle cx='262' cy='228' r='6'/%3E%3Ccircle cx='224' cy='246' r='6'/%3E%3Cpath d='M237 204l20 20M229 206l-4 34'/%3E%3C/svg%3E"),radial-gradient(900px 520px at 50% -120px,var(--royal) 0%,color-mix(in srgb,var(--royal) 50%,var(--navy)) 38%,transparent 72%);
  background-repeat:repeat,no-repeat;background-size:280px 280px,100% 100%;background-attachment:fixed,fixed;color:var(--ink)}
.wrap{padding-top:16px}
/* text that sits directly on the navy page */
.wrap>.sec,.wrap>p,.wrap>.muted,.wrap>.foot,.wrap>.center:not(.card),.wrap>.progress-line,#ls>.muted{color:#C9D6FF}
.wrap>.sec{color:#FFE08A;font-weight:600;letter-spacing:.01em}
.back{color:var(--gold)}
.foot a{color:var(--gold)}
/* header = the logo banner */
header.top{padding:2px 0 16px;gap:12px}
header.top .logo-img{width:48px;height:48px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--gold),0 6px 18px rgba(0,0,0,.35)}
header.top h1{color:#fff;font-weight:800;font-size:1.12rem;letter-spacing:.01em;line-height:1.2}
header.top h1 span{color:var(--gold);font-weight:600;font-size:.86rem;margin-left:2px}
header.top small{color:#AFC0F2}
.brand-hero{display:flex;justify-content:center;padding:18px 0 14px}
.brand-hero img{width:168px;height:168px;border-radius:50%;box-shadow:0 0 0 4px rgba(255,194,26,.25),0 0 60px rgba(60,140,255,.55)}
/* surfaces */
.card{border:0;border-radius:var(--r);box-shadow:0 10px 28px rgba(2,10,40,.35)}
.hero{background:linear-gradient(140deg,var(--royal) 0%,var(--navy) 85%);border:2px solid var(--gold);box-shadow:0 10px 30px rgba(2,10,40,.45)}
.hero::before{background:rgba(127,196,255,.12)}
.hero h2{font-weight:800;letter-spacing:0}
.hero .stat{background:rgba(255,255,255,.12);border:1px solid rgba(255,194,26,.35)}
.hero .stat b{color:var(--gold)}
/* buttons: gold like the logo ribbon, royal like the flask */
.btn{border-radius:14px;font-weight:700}
.btn.pri{background:var(--gold);color:var(--navy);box-shadow:0 4px 0 #C98F00;box-shadow:0 4px 0 color-mix(in srgb,var(--gold) 70%,#000)}
.btn.teal{background:var(--royal);color:#fff;box-shadow:0 4px 0 #0E2F8F;box-shadow:0 4px 0 color-mix(in srgb,var(--royal) 65%,#000)}
.btn.ghost{background:var(--teal-2);color:var(--navy)}
.gbtn{border-color:var(--line)}
/* chips / small labels */
.tchip{background:var(--navy);color:var(--gold);border-radius:8px}
.pill{background:var(--gold-2);color:#7A5200}
.sent{color:var(--navy-2)}
.frame{color:var(--royal)}
.slot{background:linear-gradient(transparent 62%,#FFE07A 62%)}
.qbox{border:2px solid var(--gold);box-shadow:0 6px 16px rgba(2,10,40,.25)}
.daybar{background:rgba(255,255,255,.15);border:0}.daybar i{background:var(--gold)}
.steps3 span{border:0;background:rgba(255,255,255,.92)}
.steps3 span.on{background:var(--gold);color:var(--navy)}
.stagebar span{background:rgba(255,255,255,.9);color:var(--muted)}
.stagebar span.on{background:var(--gold);color:var(--navy);font-weight:700}
.ttitle{color:#fff;font-weight:700}
.reviewhead{background:var(--gold-2);color:#7A5200}
.dots i.on{background:var(--gold)}
/* periodic tiles in the logo colours */
.tile{border-color:var(--navy)}
.hero-tile{background:var(--gold);border-color:#fff;color:var(--navy)}
.path .tile{background:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(2,10,40,.3)}
.path .tile.done{background:var(--gold);color:var(--navy)}.path .tile.done .nm{color:#6B4D00}
.path .tile.cur{background:var(--royal);color:#fff;border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(255,194,26,.35)}.path .tile.cur .nm{color:#D6E2FF}
.path .tile.lock{background:rgba(255,255,255,.55)}
.unit .num{background:var(--teal-2);color:var(--navy)}
/* bottom nav = navy bar with a gold accent */
.nav{background:#071648;background:color-mix(in srgb,var(--navy) 80%,#000);border-top:2px solid var(--gold)}
.nav button{color:#9FB2E8}
.nav button.on{color:var(--gold);background:rgba(255,194,26,.12)}
/* teacher tabs */
.tabs button{background:rgba(255,255,255,.95);border:0}
.tabs button.on{background:var(--gold);color:var(--navy)}
.toast{background:var(--navy);border:2px solid var(--gold)}
/* tricks */
.trick{border-color:var(--navy);box-shadow:5px 5px 0 var(--gold)}
.acro{color:var(--navy)}
.spine li{background:var(--teal-2);color:var(--navy)}.spine li::before{background:var(--navy);color:var(--gold)}
table.pair th{background:var(--navy);color:var(--gold)}
.lt{border-color:var(--navy);background:var(--teal-2)}.lt b{color:var(--navy)}
.lt.open{background:var(--gold);border-color:var(--navy)}
.besttrick{border-color:var(--gold);background:#FFFBEA}
.bt-i{background:var(--navy);color:var(--gold)}
.mic{background:var(--gold);box-shadow:0 4px 0 #C98F00;box-shadow:0 4px 0 color-mix(in srgb,var(--gold) 70%,#000)}
.membox{background:var(--gold-2)}

.besttrick .memh{display:none}

/* Urdu (Jameel Noori Nastaleeq) sizing */
.big-ur{font-size:1.4rem;line-height:2.05}
textarea.ur{font-family:"Jameel Noori Nastaleeq",serif;font-size:1.2rem;line-height:1.9;direction:rtl}

/* memory card: acronym + Urdu mnemonic, one row per chunk */
.memcard{margin-top:12px;border:2px solid var(--gold);border-radius:18px;background:linear-gradient(180deg,#FFFBEA,#FFF6D6);padding:12px 12px 10px}
.mc-h{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.mc-h b{color:var(--navy);font-size:.95rem;font-weight:700}
.mc-h span{color:#7A6A3A;font-size:.74rem}
.mc-rows{display:flex;flex-direction:column;gap:6px}
.mc-row{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:#fff;border-radius:12px;padding:8px 10px;box-shadow:0 1px 0 rgba(10,31,92,.08);border:1px solid #F1E2A8}
.mc-row.open{border-color:var(--gold)}
.mc-code{flex:none;min-width:58px;text-align:center;background:var(--navy);color:var(--gold);font-weight:800;letter-spacing:.12em;font-size:.82rem;padding:6px 8px;border-radius:9px;line-height:1.2;word-break:break-all}
.mc-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.mc-mn{color:var(--navy);font-weight:600;font-size:.95rem;line-height:1.45}
.mc-mn b{color:#B07A00;font-weight:800;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.mc-en{color:#6A7396;font-size:.8rem;line-height:1.4}
.mc-all{margin-top:2px;font-size:.8rem;font-weight:700;color:var(--royal);padding:4px 0}
.mc-acr{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px;font-size:.78rem;color:#7A6A3A}
.mc-acr span{font-weight:700;color:var(--navy);margin-right:2px}
.mc-acr i{font-style:normal;font-weight:800;letter-spacing:.1em;color:var(--navy)}
.mc-acr em{font-style:normal;color:#C9A646}
.mc-sep{height:1px;background:#F1E2A8;margin:10px 0}
.moretrick{margin-top:10px;border:1.5px solid var(--line);border-radius:14px;background:#fff}
.moretrick summary{padding:10px 12px;font-weight:600;font-size:.88rem;color:var(--navy);cursor:pointer}
.moretrick .besttrick{margin:0 10px 10px;border-width:1.5px}
.wrap>.row .muted{color:#C9D6FF}

/* teacher: piece editor */
.pcs{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.pcrow{background:#FFFBEA;border:1px solid #F1E2A8;border-radius:12px;padding:8px}
.pcen{font-size:.8rem;color:#5A6690;margin-bottom:6px}
.pcin{display:flex;flex-direction:column;gap:6px}
.pcin .txt{padding:9px 10px;font-size:.9rem}
.pcin .pca{width:140px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--navy)}

.mc-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--gold);font-weight:800;font-size:.8rem;display:grid;place-items:center}
.mc-row.acr-only .mc-code{min-width:84px;font-size:.95rem}
.mc-row.acr-only .mc-en{font-size:.9rem;color:var(--navy);font-weight:500}
.mc-tap{color:#9AA2C2;font-size:.78rem;font-style:italic;padding-top:4px}
.memmode{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 8px}
.memmode label{flex:1;min-width:90px;display:flex;align-items:center;gap:6px;justify-content:center;border:1.5px solid var(--line);border-radius:10px;padding:7px 6px;font-size:.8rem;font-weight:600;background:#fff;cursor:pointer}
.memmode label.on{border-color:var(--gold);background:#FFF4CC;color:var(--navy)}
.memmode input{accent-color:#C98F00}

/* course catalog */
.ccard .cc-top{display:flex;gap:12px;align-items:center}
.cc-badge{flex:none;width:46px;height:46px;border-radius:12px;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-weight:800;font-size:1.05rem;text-transform:uppercase;border:2px solid var(--gold)}
.cc-t{font-size:1.02rem;color:var(--navy);display:block;line-height:1.3}
.cc-facts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cc-facts span{background:#EEF1FB;border-radius:999px;padding:4px 10px;font-size:.78rem;font-weight:600;color:var(--navy)}
.cswitch{flex:none;background:rgba(255,194,26,.14);color:var(--gold);border:1.5px solid var(--gold);border-radius:999px;padding:6px 12px;font-weight:700;font-size:.78rem}

.cpick{padding:10px 14px}.cpick select{margin-top:4px;font-weight:700;color:var(--navy)}
pre.fmt{white-space:pre-wrap;background:#F6F7FC;border-radius:10px;padding:10px;font-size:.78rem;line-height:1.5;margin-top:6px}

header.top small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* owner control layer */
.ui-hid{display:none!important}
.ui-hid-edit{opacity:.35;outline:2px dashed #E0443E;outline-offset:2px}
body.ui-editing #app{padding-top:58px}
body.ui-editing #app *:not([data-noui]):hover{outline:1px dashed rgba(255,194,26,.9)}
.ui-bar{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;gap:8px;align-items:center;padding:8px 10px;background:#18204A;color:#fff;border-bottom:3px solid #FFC21A;font-size:.8rem}
.ui-bar span{flex:1;opacity:.85}
.ui-bar button{background:#FFC21A;color:#0A1F5C;border-radius:8px;padding:6px 10px;font-weight:700;font-size:.78rem}
.ui-orig{background:#F4F6FD;border-radius:10px;padding:8px 10px;font-size:.9rem}
body.bg-plain{background-image:none!important}
body.no-board #lb,body.no-templates [data-go=tpl],body.no-templates #tp,body.no-grammar #gr,body.no-speak #sp,body.no-xp .f-xp,body.no-cert #ct,body.no-trick .moretrick,body.no-weekly #wk{display:none!important}

.colrow{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:.88rem}
.colrow input[type=color]{width:44px;height:34px;border:0;background:none;padding:0}
.colrow input[type=checkbox]{width:20px;height:20px;accent-color:#C98F00}
.tx{border-top:1px dashed var(--line);padding-top:8px;margin-top:8px}

.tile .dl{font-size:.62rem;font-weight:600;opacity:.75;line-height:1;margin-bottom:2px}
.hero-tile .dl{font-size:.85rem}

/* ads */
.adcard{display:block;position:relative;background:#fff;border-radius:var(--r);overflow:hidden;margin:0 0 12px;color:var(--ink);text-decoration:none;box-shadow:0 10px 28px rgba(2,10,40,.3);border:2px solid #FFD966;border:2px solid color-mix(in srgb,var(--gold) 60%,transparent)}
.ad-tag{position:absolute;top:8px;right:8px;background:rgba(10,31,92,.82);color:#fff;font-size:.66rem;font-weight:700;padding:2px 8px;border-radius:999px;letter-spacing:.04em;z-index:1}
.ad-img{display:block;width:100%;max-height:220px;object-fit:cover}
.ad-body{padding:12px 14px}
.ad-t{display:block;color:var(--navy);font-size:1rem;line-height:1.3;padding-right:44px}
.ad-x{font-size:.86rem;margin-top:4px;color:#3D4670}
.ad-cta{display:inline-block;width:auto;margin-top:10px}
.sheet .adcard{margin:0;box-shadow:none}