:root{--bg:#F6F7FB;--card:#fff;--ink:#14213D;--mut:#6B7280;--pri:#15803D;--pri2:#0EA5E9;--acc:#F59E0B;--bad:#EF4444;--line:#E5E7EB;--soft:#ECFDF5}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,Roboto,sans-serif}
#app{max-width:520px;margin:0 auto;min-height:100vh;padding-bottom:84px}
.top{padding:calc(env(safe-area-inset-top) + 16px) 18px 10px;display:flex;align-items:center;gap:10px}
.top h1{font-size:20px;margin:0;flex:1}.back{border:0;background:#fff;border-radius:12px;width:38px;height:38px;font-size:18px;box-shadow:0 1px 3px #0001}
.hero{margin:6px 16px 14px;padding:18px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#15803D,#0EA5E9);box-shadow:0 8px 24px #15803D33}
.hero h2{margin:0 0 4px;font-size:22px}.hero p{margin:0;opacity:.92}
.stats{display:flex;gap:8px;margin-top:12px}.stat{flex:1;background:#ffffff26;border-radius:14px;padding:8px;text-align:center;font-weight:700}.stat small{display:block;font-weight:500;opacity:.9;font-size:11px}
.sec{margin:16px 16px 8px;font-weight:800;font-size:16px;display:flex;justify-content:space-between;align-items:center}
.card{background:var(--card);margin:0 16px 10px;border-radius:18px;padding:14px;box-shadow:0 1px 3px #0000000f}
.row{display:flex;align-items:center;gap:12px}.grow{flex:1;min-width:0}
.ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:var(--soft);flex:none}
.t{font-weight:700}.m{color:var(--mut);font-size:13px}
.btn{display:block;width:100%;border:0;border-radius:14px;padding:14px;font-weight:800;font-size:15px;background:var(--pri);color:#fff;margin-top:10px;cursor:pointer}
.btn.alt{background:#fff;color:var(--ink);border:2px solid var(--line)}.btn.blue{background:var(--pri2)}.btn.orange{background:var(--acc)}.btn:disabled{opacity:.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 16px 10px}.grid2 .card{margin:0}
.tile{padding:14px;border-radius:18px;color:#fff;font-weight:800;min-height:96px;display:flex;flex-direction:column;justify-content:space-between;cursor:pointer;border:0;text-align:left;font-size:15px}
.tile small{font-weight:500;opacity:.9}
.chip{display:inline-block;padding:7px 12px;border-radius:999px;border:2px solid var(--line);margin:4px 6px 4px 0;font-weight:700;background:#fff;cursor:pointer;font-size:13px}
.chip.on{background:var(--pri);border-color:var(--pri);color:#fff}.chip.dis{opacity:.45}.chip.on.dis{opacity:1;cursor:default;box-shadow:inset 0 0 0 2px var(--gold,#B8892B)}
.badge{font-size:11px;padding:3px 8px;border-radius:999px;background:#FEF3C7;color:#92400E;font-weight:700}.badge.g{background:#DCFCE7;color:#166534}
.bar{height:8px;background:var(--line);border-radius:9px;overflow:hidden}.bar i{display:block;height:100%;background:var(--pri)}
.lesson{background:#fff;margin:0 16px;border-radius:18px;padding:18px;line-height:1.65}.lesson h4{margin:16px 0 4px}
.ex{background:#EFF6FF;border-left:4px solid var(--pri2);padding:10px 12px;border-radius:10px;margin:10px 0}
.tip{background:#FFFBEB;border-left:4px solid var(--acc);padding:10px 12px;border-radius:10px;margin:10px 0}
table{border-collapse:collapse;width:100%;font-size:13px;margin:8px 0}td,th{border:1px solid var(--line);padding:6px;text-align:left}
.q{font-size:16px;font-weight:600;margin-bottom:12px}.passage{background:#F9FAFB;border:1px solid var(--line);border-radius:12px;padding:10px;font-weight:400;font-size:14px;margin-bottom:10px;max-height:220px;overflow:auto}
.opt{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:#fff;border:2px solid var(--line);border-radius:14px;padding:12px;margin:8px 0;font-size:15px;cursor:pointer;color:var(--ink)}
.opt b{width:26px;height:26px;border-radius:50%;background:var(--bg);display:grid;place-items:center;flex:none;font-size:13px}
.opt.sel{border-color:var(--pri2);background:#F0F9FF}.opt.sel b{background:var(--pri2);color:#fff}
.opt.ok{border-color:var(--pri);background:#F0FDF4}.opt.ok b{background:var(--pri);color:#fff}.opt.no{border-color:var(--bad);background:#FEF2F2}.opt.no b{background:var(--bad);color:#fff}
.expl{background:#F0FDF4;border-radius:14px;padding:12px;margin-top:8px}.expl.wrong{background:#FEF2F2}
.nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom);z-index:5}
.nav button{flex:1;max-width:130px;border:0;background:none;padding:10px 0 12px;font-size:11px;color:var(--mut);font-weight:700}.nav button span{display:block;font-size:22px}.nav button.on{color:var(--pri)}
/* CBT */
.cbt{background:#E8EEF5;min-height:100vh;padding-bottom:10px}
.cbthead{background:#0B3D91;color:#fff;padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:3}
.cbthead .tm{font-family:monospace;font-size:18px;background:#fff;color:#0B3D91;padding:4px 10px;border-radius:8px;font-weight:800}.tm.low{background:#FEE2E2;color:#B91C1C}
.tabs{display:flex;overflow-x:auto;background:#fff;border-bottom:1px solid #cbd5e1}.tabs button{border:0;background:none;padding:10px 12px;font-weight:700;white-space:nowrap;color:#475569;border-bottom:3px solid transparent}.tabs button.on{color:#0B3D91;border-color:#0B3D91}
.cbtq{background:#fff;margin:10px;border-radius:8px;padding:14px;border:1px solid #cbd5e1}
.cbtopt{display:flex;gap:10px;align-items:center;padding:10px;border-radius:6px;cursor:pointer;border:1px solid transparent}.cbtopt.sel{background:#DBEAFE;border-color:#93C5FD}
.cbtopt input{width:18px;height:18px}
.ctrl{display:flex;gap:8px;margin:0 10px}.ctrl button{flex:1;padding:12px;border:0;border-radius:6px;font-weight:800;background:#0B3D91;color:#fff}.ctrl button.sub{background:#DC2626}.ctrl button.gr{background:#64748B}
.pal{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:10px;background:#fff;padding:8px;border-radius:8px;border:1px solid #cbd5e1}
.pal button{border:1px solid #cbd5e1;background:#fff;border-radius:4px;padding:6px 0;font-size:12px;font-weight:700}.pal button.ans{background:#15803D;color:#fff;border-color:#15803D}.pal button.cur{outline:2px solid #F59E0B}
.modal{position:fixed;inset:0;background:#0007;display:grid;place-items:center;z-index:20}.modal .box{background:#fff;border-radius:18px;padding:18px;width:min(92vw,360px)}
.calc{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.calc button{padding:12px;border:0;border-radius:8px;background:#F1F5F9;font-weight:700;font-size:16px}.calc .d{grid-column:span 4;background:#0f172a;color:#22c55e;text-align:right;font-family:monospace;font-size:20px;padding:12px;border-radius:8px;overflow:hidden}
.ring{width:140px;height:140px;border-radius:50%;display:grid;place-items:center;margin:8px auto;background:conic-gradient(var(--pri) calc(var(--p)*1%),#E5E7EB 0)}.ring div{width:112px;height:112px;border-radius:50%;background:#fff;display:grid;place-items:center;font-weight:900;font-size:26px;text-align:center;line-height:1.1}
textarea{width:100%;min-height:140px;border:2px solid var(--line);border-radius:12px;padding:10px;font:inherit}
input[type=text]{width:100%;padding:12px;border:2px solid var(--line);border-radius:12px;font:inherit;font-size:16px}
pre.model{white-space:pre-wrap;font:inherit;background:#F0FDF4;padding:12px;border-radius:12px}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%);background:#14213D;color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;z-index:30}
.badge.hy{background:#FEE2E2;color:#B91C1C}.badge.md{background:#E0F2FE;color:#075985}.badge.lo{background:#F1F5F9;color:#475569}
.cam{position:relative;background:#000;border-radius:14px;overflow:hidden;margin-top:8px}.cam img{width:100%;display:block;transition:transform .2s}
.thumbs{display:flex;gap:8px;overflow-x:auto;margin:8px 0}.thumbs div{position:relative;flex:none;width:70px;height:90px;border-radius:8px;overflow:hidden;border:3px solid transparent;background:#eee}.thumbs div.on{border-color:var(--pri)}.thumbs img{width:100%;height:100%;object-fit:cover}
.crit{margin:8px 0}.hl-good{background:#DCFCE7;border-radius:4px;padding:0 2px}.hl-bad{background:#FEE2E2;border-radius:4px;padding:0 2px;text-decoration:underline wavy #EF4444}
.day{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}.day .d{width:52px;flex:none;text-align:center;font-weight:800;color:var(--pri)}.day .d small{display:block;color:var(--mut);font-weight:600}
input[type=date],input[type=number],select{width:100%;padding:12px;border:2px solid var(--line);border-radius:12px;font:inherit;font-size:16px;background:#fff}
figure.viz{margin:12px 0;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px}figure.viz figcaption{font-size:12px;color:var(--mut);text-align:center;margin-top:4px}
.lcard{background:#fff;margin:0 16px 12px;border-radius:18px;padding:18px;line-height:1.6;box-shadow:0 1px 3px #0001}.lcard .kick{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--pri2)}
.qc{border:2px dashed var(--pri2);border-radius:14px;padding:12px;margin-top:12px}
/* ---------- Desktop / laptop ---------- */
@media (min-width:900px){
 body{padding-left:210px}
 #app{max-width:1040px;padding-bottom:30px}
 .nav{top:0;bottom:0;left:0;right:auto;width:210px;flex-direction:column;justify-content:flex-start;border-top:0;border-right:1px solid var(--line);padding-top:90px}
 .nav::before{content:"Cara's Tips";position:absolute;top:28px;left:20px;font-weight:900;color:var(--pri);font-size:17px}
 .nav button{max-width:none;display:flex;align-items:center;gap:12px;padding:14px 22px;font-size:15px;text-align:left}.nav button span{display:inline;font-size:20px}
 .nav button.on{background:var(--soft)}
 .grid2{grid-template-columns:repeat(4,1fr)}
 .lcard,.lesson{max-width:820px}
 .cbt{display:grid;grid-template-columns:1fr 330px;column-gap:8px;align-content:start}
 .cbt>*{grid-column:1}.cbt .cbthead,.cbt .tabs{grid-column:1 / -1}.cbt .pal{grid-column:2;grid-row:3 / span 5;align-self:start;grid-template-columns:repeat(8,1fr)}
 .opt:hover,.cbtopt:hover,.card[data-subj]:hover,.card[data-task]:hover{border-color:var(--pri2);cursor:pointer}
 .toast{bottom:30px}
}
@media (min-width:900px){ .cbt{margin-left:-210px} body:has(.cbt) .nav{display:none} }
.unit .fig svg{max-height:300px;width:100%;}
@media(min-width:900px){.unit .fig{max-width:620px;margin-left:auto;margin-right:auto}}

/* v1.4 IRS: Qur'anic Arabic. Bundled Noto Naskh Arabic (SIL Open Font License 1.1) so the text renders offline. */
@font-face{font-family:'ER Naskh';src:url('NotoNaskhArabic.ttf') format('truetype');font-weight:400 700;font-display:swap}
.quran{border-inline-start:4px solid #0F766E;background:#F0FDFA;padding:8px 12px;margin:12px 0;border-radius:8px}
.ar,[lang=ar]{font-family:'ER Naskh','Noto Naskh Arabic','Amiri','Scheherazade New','Traditional Arabic','Noto Sans Arabic',serif;direction:rtl;unicode-bidi:isolate;text-align:right;font-size:1.45em;line-height:2.1;font-weight:400;letter-spacing:0;word-spacing:.08em;font-feature-settings:normal}
p.ar{margin:6px 0}
.quran p:not(.ar){direction:ltr;text-align:left}
/* v1.13 practical papers */
.prac table{border-collapse:collapse;width:100%;font-size:13px;margin:6px 0;display:block;overflow-x:auto}.prac td,.prac th{border:1px solid var(--line);padding:4px 6px;text-align:center}
.pinstr{background:#FEF3C7;border-left:4px solid #F59E0B;padding:8px 10px;margin-top:8px;border-radius:6px}.pinstr p{margin:4px 0 0}
.ptimer{font-weight:800;font-size:14px}.pscore{background:#DCFCE7;border-radius:8px;padding:10px;margin-top:8px;font-size:16px}
.ppart{border-top:1px solid var(--line);padding:10px 0}.pin{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0;font-size:14px}.pin input{width:130px;padding:8px;font-size:16px;border:1px solid var(--line);border-radius:8px}
.ptxt{width:100%;box-sizing:border-box;font-size:15px;padding:8px;border:1px solid var(--line);border-radius:8px;margin-top:4px}
.pmodel{background:#F0F9FF;border-left:4px solid #0284C7;padding:8px 10px;margin-top:6px;border-radius:6px}.pgiven{overflow-x:auto}
.preads summary{cursor:pointer;font-weight:700;margin:6px 0}.pzoomw{margin:6px 0}.pzbar{display:flex;align-items:center;gap:4px;font-size:12px}.pzbar .grow{flex:1}
.pzoom{overflow:auto;max-height:80vh;border:1px solid var(--line);border-radius:8px;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y pinch-zoom;background:#fff}.pzoom>svg{width:100%;height:auto;display:block}
.pfull{position:fixed;inset:0;background:#fff;z-index:9999;display:flex;flex-direction:column}.pfullbar{display:flex;gap:6px;padding:8px;border-bottom:1px solid var(--line)}.pfullbar .grow{flex:1}.pfullbody{flex:1;overflow:auto}.pfullbody .pzoom{max-height:none;border:0}
.prac figure{margin:6px 0}.prac .pzoom svg{max-width:none}

/* ================= v1.16 Cara's Tips theme: ivory, navy, burgundy, gold (gold only for rules/highlights) ================= */
@font-face{font-family:'Playfair Display';src:url('PlayfairDisplay.woff2') format('woff2');font-weight:400 900;font-style:normal;font-display:swap} /* SIL OFL 1.1, see PlayfairDisplay-OFL.txt */
:root{--bg:#FBF7EE;--card:#FFFFFF;--ink:#1B2333;--navy:#14213D;--mut:#5B6170;--pri:#14213D;--pri2:#1F4E79;--acc:#7A1F2B;--gold:#B8892E;--goldl:#E9D9B0;--bad:#B42318;--good:#1E7B4A;--line:#E8E0CF;--soft:#F3ECDD;
 --serif:'Playfair Display',Georgia,'Times New Roman',serif;--sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--sh:0 1px 2px rgba(20,33,61,.05),0 8px 24px rgba(20,33,61,.06)}
html,body{background:var(--bg);color:var(--ink);font:15.5px/1.6 var(--sans)}
h1,h2,h3,.top h1,.hero h2,.sec,.serif,.lcard h3,.lesson h3{font-family:var(--serif);letter-spacing:.005em;color:var(--navy)}
.top{padding:calc(env(safe-area-inset-top) + 18px) 20px 12px}.top h1{font-size:23px;font-weight:700}
.hdcrest{height:40px;width:auto;flex:none;opacity:.95}
.back{background:#fff;border:1px solid var(--line);box-shadow:var(--sh);color:var(--navy)}
.hero{position:relative;background:linear-gradient(140deg,#14213D 0%,#1D2D52 70%,#2A1B2E 100%);color:#FBF7EE;border-radius:20px;padding:22px 20px;box-shadow:0 10px 30px rgba(20,33,61,.18);border-bottom:3px solid var(--gold)}
.hero h2{color:#FFFDF7;font-size:26px;font-weight:700}.hero p{opacity:.95}.crestsm{position:absolute;right:16px;top:14px;height:62px;width:auto}
.hero:has(.crestsm) h2,.hero:has(.crestsm)>p{padding-right:54px}
.hero.welcome{background:#fff;color:var(--ink);border:1px solid var(--line);border-bottom:3px solid var(--gold);box-shadow:var(--sh)}.hero.welcome h2{color:var(--navy);font-size:32px;margin-top:6px}.hero.welcome p{color:var(--mut)}
.crestbig{width:190px;height:auto;display:block;margin:0 auto 4px}
.stat{background:rgba(255,253,247,.1);border:1px solid rgba(233,217,176,.35);border-radius:12px}
.sec{margin:22px 18px 10px;font-size:19px;font-weight:700;padding-bottom:6px;border-bottom:1px solid rgba(184,137,46,.55)}
.card,.lcard,.lesson{background:var(--card);border:1px solid #EFE7D6;border-radius:16px;box-shadow:var(--sh)}
.card{padding:16px;margin:0 16px 12px}.lcard,.lesson{padding:20px}
.t{color:var(--navy)}.m{color:var(--mut)}
.ic{background:var(--soft);border:1px solid var(--goldl);border-radius:12px}
.btn{background:var(--navy);border-radius:12px;font-weight:700;letter-spacing:.01em;box-shadow:0 2px 6px rgba(20,33,61,.15)}
.btn.alt{background:#fff;color:var(--navy);border:1.5px solid #D9CBB0;box-shadow:none}.btn.blue{background:var(--pri2)}.btn.orange{background:var(--acc)}
.chip{border:1.5px solid #D9CBB0;color:var(--navy)}.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.badge{background:#F6EBD3;color:#6B4A12}.badge.g{background:#E3F1E8;color:#1E5B39}.badge.hy{background:#F6E1E3;color:#7A1F2B}
.bar{background:#ECE3D0}.bar i{background:linear-gradient(90deg,var(--navy),#2D4373)}
.lcard .kick{color:var(--acc);letter-spacing:.09em}
.qc{border:1.5px dashed #B9A57A;background:#FFFDF8}
.tip{background:#FBF3E2;border-left:3px solid var(--gold)}.ex{background:#F1F4F9;border-left:3px solid var(--navy)}
.opt{border:1.5px solid var(--line);border-radius:12px}.opt b{background:var(--soft);color:var(--navy)}
.opt.sel{border-color:var(--pri2);background:#EEF3F9}.opt.sel b{background:var(--pri2)}
.opt.ok{border-color:var(--good);background:#EDF7F1}.opt.ok b{background:var(--good)}.opt.no{border-color:var(--bad);background:#FBEDEC}.opt.no b{background:var(--bad)}
.expl{background:#EDF7F1}.expl.wrong{background:#FBEDEC}
.nav{background:#FFFDF8;border-top:1px solid var(--goldl)}.nav button{color:var(--mut)}.nav button.on{color:var(--acc)}
.ring{background:conic-gradient(var(--navy) calc(var(--p)*1%),#ECE3D0 0)}
.toast{background:var(--navy);border:1px solid var(--gold)}
input[type=text],input[type=date],input[type=number],select,textarea,.inp{border:1.5px solid #D9CBB0;border-radius:10px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus,.btn:focus-visible,.chip:focus-visible,.opt:focus-visible{outline:2px solid var(--pri2);outline-offset:2px}
figure.viz{border:1px solid var(--line)}
.day .d{color:var(--acc)}
.about{display:flex;gap:14px;align-items:center}.about img{width:92px;height:auto;flex:none}
#tauth .crestauth{display:block;width:120px;height:auto;margin:4px auto 8px}
.hm th{background:var(--soft);color:var(--navy)}
@media (min-width:900px){
 .nav{background:#FFFDF8;border-right:1px solid var(--goldl);padding-top:118px}
 .nav::before{content:"Cara's Tips";top:30px;left:22px;right:16px;padding-left:44px;min-height:58px;display:flex;align-items:center;font-family:var(--serif);font-weight:700;color:var(--navy);font-size:21px;background:url('crest_mark.svg') left center/36px auto no-repeat;border-bottom:1px solid rgba(184,137,46,.55);padding-bottom:12px}
 .nav button.on{background:var(--soft);box-shadow:inset 3px 0 0 var(--acc)}
 .top .hdcrest{display:none}
}
.sec button,.sec .chip,.sec a{font-family:var(--sans)}
@media (min-width:900px){.nav button{flex:none}}

/* ================= v1.17 welcome, "Who's studying?", organised home ================= */
body:has(.welcome2),body:has(.picker){padding-left:0}
.welcome2{min-height:100vh;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(env(safe-area-inset-top) + 26px) 22px 30px;background:radial-gradient(110% 55% at 50% 0%,#FFFDF7 0%,rgba(251,247,238,0) 70%)}
.wdate{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);font-weight:800}
.wcrest{width:150px;height:auto;margin:14px auto 4px;filter:drop-shadow(0 8px 16px rgba(20,33,61,.16))}
.wgreet{font-family:var(--serif);font-size:21px;color:var(--acc);margin-top:6px}
.wtitle{font-family:var(--serif);font-size:40px;line-height:1.1;margin:2px 0 6px;color:var(--navy)}
.wtag{color:var(--mut);margin:0 0 18px;max-width:430px}
.wquote{margin:0 0 14px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:16px;padding:16px 18px;max-width:540px;width:100%;text-align:left;box-shadow:var(--sh)}
.wquote .qk{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:800;margin-bottom:6px}
.wquote blockquote{margin:0;font-family:var(--serif);font-size:19px;line-height:1.45;color:var(--navy)}
.wquote figcaption{margin-top:10px;font-weight:700;color:var(--ink);font-size:14px}.wquote figcaption small{display:block;font-weight:400;color:var(--mut);font-size:12.5px}
.wmot{color:var(--navy);margin:2px 0 18px;max-width:460px}
.btn.big{font-size:18px;padding:17px 18px;max-width:540px;border-radius:14px;min-height:58px}
.btn.gold{background:var(--gold);color:#1B1408;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.btn.danger,.chip.danger{background:#B42318;color:#fff;border-color:#B42318}
.hero.newlearner{text-align:center;margin-top:calc(env(safe-area-inset-top) + 24px)}.crestnl{height:70px;width:auto;display:block;margin:0 auto 6px}
.avrow{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
.avpick{width:46px;height:46px;border-radius:50%;border:3px solid #fff;color:#fff;font:700 18px var(--serif);cursor:pointer;box-shadow:0 0 0 1.5px var(--line)}.avpick.on{box-shadow:0 0 0 3px var(--gold)}
/* learner picker */
.picker{max-width:900px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 22px) 16px 34px;position:relative}
.picker>.back{position:absolute;left:16px;top:calc(env(safe-area-inset-top) + 22px)}
.phead{display:flex;gap:14px;align-items:center;margin:0 4px 18px}.picker>.back+.phead{margin-top:52px}
.phead img{height:62px;width:auto;flex:none}.phead h1{margin:0 0 2px;font-size:27px;line-height:1.15}.phead p{margin:0}
.pgrid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:620px){.pgrid{grid-template-columns:repeat(2,1fr)}}@media(min-width:960px){.pgrid{grid-template-columns:repeat(3,1fr)}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);padding:12px;display:flex;flex-direction:column;gap:8px;font:inherit;color:var(--ink);text-align:left}
.pmain{display:flex;align-items:center;gap:14px;background:none;border:0;text-align:left;padding:6px;cursor:pointer;color:var(--ink);font:inherit;width:100%;border-radius:12px;min-height:72px}
.pmain:hover,.pnew:hover,.pcont:hover{background:#FFFCF4}
.pav{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:#fff;font:700 27px var(--serif);flex:none;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--goldl)}
.pav.plus{background:var(--soft);color:var(--acc);box-shadow:0 0 0 2px #D9CBB0}
.pname{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--navy);display:block;line-height:1.2}
.pmeta{display:block;font-size:13.5px;color:var(--mut)}
.pgo{font-size:26px;color:var(--gold);flex:none}
.pcont{border:1.5px solid #D9CBB0;background:var(--soft);border-radius:12px;padding:10px 12px;text-align:left;font:inherit;font-size:14px;color:var(--navy);cursor:pointer;min-height:48px}
.pnew{flex-direction:row;align-items:center;gap:14px;border:2px dashed #D9CBB0;box-shadow:none;cursor:pointer;min-height:96px;background:#FFFDF8}
.pman{display:flex;gap:8px;flex-wrap:wrap}.pman .chip{margin:0}
.linkbtn{display:block;margin:18px auto 0;background:none;border:0;color:var(--pri2);font-weight:700;text-decoration:underline;cursor:pointer;font-size:14.5px;padding:10px}
/* header + tabs */
.pfbtn{width:42px;height:42px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px var(--gold);color:#fff;font:700 18px var(--serif);flex:none;cursor:pointer;display:grid;place-items:center;padding:0}
.top .pfbtn{width:38px;height:38px;font-size:16px}
.hhead{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 14px) 18px 6px}.hcrest{height:46px;width:auto;flex:none}
.hbrand{font-family:var(--serif);font-weight:700;font-size:21px;color:var(--navy);line-height:1.15}
.etabs{display:flex;gap:4px;margin:8px 16px 6px;background:#EFE6D3;border-radius:14px;padding:4px}
.etabs button{flex:1;border:0;background:none;border-radius:11px;padding:8px 6px;font-weight:800;font-size:16px;color:var(--navy);cursor:pointer;min-height:52px;line-height:1.15;font-family:var(--sans)}
.etabs button small{display:block;font-size:11px;font-weight:600;color:var(--mut);letter-spacing:.02em}
.etabs button.on{background:var(--navy);color:#fff;box-shadow:0 2px 6px rgba(20,33,61,.25)}.etabs button.on small{color:#E9D9B0}
.etabs .eadd{flex:0 0 48px;font-size:22px;color:var(--acc)}
.gtabs{display:flex;gap:6px;overflow-x:auto;margin:0 16px 10px;padding:2px 0 4px;scrollbar-width:none}.gtabs::-webkit-scrollbar{display:none}
.gtabs button{flex:none;border:1.5px solid #D9CBB0;background:#fff;border-radius:999px;padding:8px 14px;font-weight:700;color:var(--navy);font-size:14px;min-height:44px;cursor:pointer;font-family:var(--sans)}
.gtabs button.on{background:var(--acc);border-color:var(--acc);color:#fff}
/* home */
.hero.cont{margin:8px 16px 4px}.hero.cont .kick{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--goldl);font-weight:800}
.hero.cont h2{margin:4px 0 2px;font-size:23px;line-height:1.25}.hero.cont p{margin:0 0 8px;opacity:.9}.hero.cont .bar.lt{background:rgba(255,255,255,.18)}.hero.cont .bar.lt i{background:var(--gold)}
.hero.cont .btn{margin-top:12px;min-height:50px}
.card.plan{padding:4px 14px}.prow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer;min-height:58px}.prow:last-child{border-bottom:0}
.prow .t,.prow .m{display:block}.prow .ic{width:40px;height:40px;font-size:20px}
.hstats{display:flex;gap:8px;margin:0 16px 12px}.hstats span{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 4px;text-align:center;font-weight:800;font-size:15px;color:var(--navy)}
.hstats small{display:block;font-weight:500;font-size:11.5px;color:var(--mut)}.hstats [data-act]{cursor:pointer}
.stiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 16px 12px}
.stile{background:#fff;border:1px solid #EFE7D6;border-radius:16px;box-shadow:var(--sh);padding:14px 12px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-height:124px;color:var(--ink);font:inherit}
.stile:hover{border-color:var(--gold)}.stile .sic{font-size:28px;line-height:1}.stile .sname{font-weight:800;color:var(--navy);font-size:15px;line-height:1.25;flex:1}.stile .m{font-size:12.5px}
.card.addmore{background:none;border:0;box-shadow:none;padding:0 0 4px}.card.addmore .btn{margin-top:0}
.addsub{margin:0 0 0 6px;flex:none}
@media (min-width:900px){
 .homegrid{display:grid;grid-template-columns:1.05fr 1fr;gap:4px 8px;align-items:start}
 .stiles{grid-template-columns:repeat(2,1fr)}.etabs{max-width:560px}
 .hhead .hcrest{display:none}
}
@media (min-width:1200px){.stiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:370px){.etabs button{font-size:15px}.stile{min-height:116px}.wtitle{font-size:35px}.hstats span{font-size:14px}}
/* v1.18: the exam being practised is obvious on every screen (accent colour + pill) */
body{--exa:#14213D;--exs:#E8ECF5}
body[data-exmode=JAMB]{--exa:#1E6B48;--exs:#E3F1E8}
body[data-exmode=WAEC]{--exa:#1F4E79;--exs:#E2ECF6}
body[data-exmode=NECO]{--exa:#7A1F2B;--exs:#F6E4E6}
body[data-exmode] .etabs button.on{background:var(--exa)}
body[data-exmode] .hhead{border-top:4px solid var(--exa)}
body[data-exmode] .top{border-top:4px solid var(--exa)}
.expill{flex:none;display:inline-block;background:var(--exa);color:#fff;font:800 12px/1 var(--sans,system-ui);letter-spacing:.06em;padding:6px 9px;border-radius:999px}
.exline{margin:2px 16px 10px;padding:9px 12px;border-radius:12px;background:var(--exs);border-left:4px solid var(--exa);font-size:13px;line-height:1.4;color:var(--ink)}
.exline b{color:var(--exa)}
.selcard{border-top:3px solid var(--exa)}
.selchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.schip{display:inline-flex;align-items:center;gap:4px;padding:6px 10px;border-radius:999px;background:var(--exs);color:var(--ink);font-weight:700;font-size:13px;border:1.5px solid var(--exa)}
.schip small{font-weight:600;color:var(--mut);font-size:11px}
.schip.x{background:#fff;border-style:dashed;border-color:#B9A883}
.selpick{border-top:3px solid var(--navy)}
.selpick.ex-jamb{border-top-color:#1E6B48}.selpick.ex-waec{border-top-color:#1F4E79}.selpick.ex-neco{border-top-color:#7A1F2B}
.selpick .expill{vertical-align:2px}
.selpick.ex-jamb .expill{background:#1E6B48}.selpick.ex-waec .expill{background:#1F4E79}.selpick.ex-neco .expill{background:#7A1F2B}
.xsel .chip.on{background:#fff;color:var(--navy);border-style:dashed;border-color:var(--exa)}
.stile.xtra{border-style:dashed}
.stile .badge{align-self:flex-start}
.sec.sub{font-size:15px;color:var(--exa);border-bottom-color:var(--exa)}
.m.syl{font-size:12px;margin-top:4px;color:#4B5563}
.badge.exflag{background:var(--exs);color:var(--exa)}
.hiddenlist{font-size:13px}
.jambest .bigscore{font:700 44px/1.1 var(--serif,Georgia);color:var(--exa)}
.jambest .bigscore small{font-size:18px;color:var(--mut)}
.gradechip{background:var(--exs);color:var(--exa);padding:2px 10px;border-radius:999px}
.aggr input{width:100%;padding:10px;border:1.5px solid #D9CBB0;border-radius:10px;font-size:16px;margin:6px 0}
.tiplist{margin:0;padding-left:20px}.tiplist li{margin:6px 0}
.rectext{border-left:4px solid var(--exa)}
.tipcard{background:none;border:0;box-shadow:none;padding:0}
.selcard .linkbtn{display:block;margin-top:8px}
.selcard .linkbtn{background:none;border:0;color:var(--exa);font-weight:700;padding:6px 0;cursor:pointer;font-size:14px;text-align:left}
/* v1.18: long lesson titles must not push the exam pill / profile button off a 390px screen */
.top h1{min-width:0;overflow-wrap:anywhere;hyphens:auto}
@media (max-width:420px){.top{gap:8px}.top .hdcrest{display:none}.top .expill{padding:5px 7px;font-size:11px}}

/* ---------- v1.19: daily session, ranges, trend line, study book, backup ---------- */
.hero.today{margin:8px 16px 8px}
.hero.today .kick{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--goldl);font-weight:800}
.hero.today h2{margin:4px 0 4px;font-size:24px;line-height:1.2}
.hero.today p{margin:0 0 10px;opacity:.92;line-height:1.45}
.hero.today .linkbtn{color:var(--goldl);margin:6px auto 0;padding:6px}
.hero.today+.hero.cont{background:#FFFDF8;color:var(--navy);border:1.5px solid var(--goldl);border-bottom:3px solid var(--gold);box-shadow:none;padding:16px 18px}
.hero.today+.hero.cont h2{color:var(--navy);font-size:20px}
.hero.today+.hero.cont .kick{color:var(--gold)}
.hero.today+.hero.cont p{color:var(--mut);opacity:1}
.hero.today+.hero.cont .bar.lt{background:#EFE6D2}
.chip.guess{display:block;margin:10px 0 0;width:100%;text-align:center;background:#FFFBEB;border-color:#E9D9B0;color:#7A5410}
.chip.guess:disabled{opacity:.8;cursor:default}
.dsum .row{padding:8px 0;border-bottom:1px solid var(--line);align-items:flex-start;gap:10px}
.dsum .row:last-of-type{border-bottom:0}
.bar.range{position:relative}
.bar.range i{opacity:.35}
.bar.range i.lo{position:absolute;left:0;top:0;bottom:0;opacity:1}
svg.trend{display:block;width:100%;height:auto;margin:10px 0 2px}
svg.trend .tline{fill:none;stroke:var(--navy);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
svg.trend .tband{fill:var(--goldl);opacity:.55}
svg.trend .ttgt{stroke:var(--gold);stroke-width:1.5;stroke-dasharray:5 4}
.trendnote{font-size:12px}
.book{margin:0 0 8px}
.bookfront{margin:8px 16px 12px;padding:20px 18px;background:#FFFDF8;border:1.5px solid var(--goldl);border-top:4px solid var(--gold);border-radius:18px}
.bookfront .kick{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:800}
.bookfront h1{font-family:var(--serif);color:var(--navy);font-size:26px;margin:4px 0 12px;line-height:1.2}
.bookfront .frow{display:flex;gap:10px;margin:0 0 12px}
.bookfront .frow>div{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.bookfront .frow b{font-size:18px;color:var(--navy)}
.bookfront .bignum{font-family:var(--serif);font-size:34px;color:var(--navy);font-weight:700}
.bookfront .bignum small{font-family:inherit;font-size:13px;color:var(--mut);font-weight:600;margin-left:6px}
.bookfront .toc{padding-left:1.3em;margin:8px 0 0;line-height:1.9}
.bookfront .toc a{color:var(--navy);font-weight:700;text-decoration:none}
.chapter{background:#fff;border-radius:16px;margin:10px 16px;box-shadow:0 1px 3px #0001;overflow:hidden}
.chapter>summary{list-style:none;display:flex;gap:12px;align-items:center;padding:14px 16px;cursor:pointer}
.chapter>summary::-webkit-details-marker{display:none}
.chapter .chn{min-width:34px;height:34px;border-radius:50%;background:var(--navy);color:#FBF7EE;display:grid;place-items:center;font-weight:800;font-family:var(--serif)}
.chapter .chbody{padding:0 16px 16px;font-size:16px}
.chapter h3{font-family:var(--serif);color:var(--navy);margin:16px 0 6px;font-size:18px}
.chapter .why{background:#F1F4F9;border-left:4px solid var(--navy);padding:10px 12px;border-radius:10px;margin-top:4px}
.chapter .yourturn{margin-top:8px;padding:8px 10px;border-radius:8px;background:#FFFBEB;border:1px dashed var(--gold)}
.chapter details.reveal{box-shadow:none;margin:8px 0 0;background:#F0FDF4;border-radius:10px}
.chapter details.reveal>summary{padding:8px 10px;font-weight:700;cursor:pointer}
.chapter details.reveal>*:not(summary){margin:0 10px 10px}
.chapter .selfx{background:#ECFEFF;border:1.5px solid #06B6D4;border-radius:12px;padding:10px 12px}
.chapter .bookq>li{margin:10px 0}
.chapter .bookq ol{margin:4px 0;padding-left:1.4em}
.bookback{margin:10px 16px;padding:16px 18px;background:#fff;border-radius:16px;font-size:14.5px}
.bookback h2,.bookback h3{font-family:var(--serif);color:var(--navy)}
.bookback li{margin:4px 0}
@media print{
 .nav,.top .back,.top .pfbtn,.noprint,.toast,.chapter .btn,.hdcrest,.expill{display:none!important}
 body{background:#fff}
 .chapter,.bookfront,.bookback{box-shadow:none;border:1px solid #ccc;break-inside:avoid-page;margin:8px 0}
 .chapter>summary{padding:8px 0}
 .bookback{break-before:page}
 .chapter details.reveal{background:none}
}
.hero.today .tsteps{list-style:none;margin:6px 0 12px;padding:0}
.hero.today .tsteps li{display:flex;gap:12px;align-items:center;padding:9px 12px;border-radius:12px;margin:6px 0;background:rgba(255,255,255,.06);border:1px solid rgba(233,217,176,.18)}
.hero.today .tsteps li.cur{background:rgba(233,217,176,.14);border-color:var(--goldl)}
.hero.today .tsteps li.done{opacity:.7}
.hero.today .tsteps .ti{font-size:20px;width:26px;text-align:center}
.hero.today .tsteps b{display:block;font-size:15.5px;color:#FFFDF7;line-height:1.3}
.hero.today .tsteps small{display:block;font-size:12.5px;opacity:.85;margin-top:2px}
.hero.today .linkbtn{display:block;margin:4px auto 0}
svg.trend .ttxt{font-size:10px;fill:var(--gold);font-weight:700}