/* HelpAli: one light theme, exercise-copy graph paper, brand blue + sun yellow */
:root{
  --paper:#f5f7fb; --grid:#e3e8f2; --card:#fff; --ink:#16204a; --muted:#5d6782;
  --blue:#2343c4; --soft:#e6ebfb; --sun:#ffc23d; --coral:#d9485f;
  --ok:#147a4a; --oksoft:#e2f4ea; --warm:#fff6e0; --warmline:#e8c46a; --line:#d6dceb;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",ui-sans-serif,system-ui,sans-serif;
  --urdu:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq",serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;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;color:var(--ink);font:16px/1.55 var(--body);
  padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
h1,h2{font-family:var(--display);line-height:1.2;margin:0 0 10px}
h1{font-size:1.6rem} h2{font-size:1.15rem}
a{color:var(--blue)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted);font-size:.9rem}
.ur{font-family:var(--urdu);direction:rtl;text-align:right;line-height:2.1}
.wrap{max-width:620px;margin:0 auto;padding:16px;display:flex;flex-direction:column;gap:14px}
.narrow{max-width:420px;margin:0 auto;padding:32px 16px;display:flex;flex-direction:column;gap:18px}
.brandlogo{width:220px;align-self:center}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px}
label{font-weight:700;font-size:.92rem}
input,textarea,select{font:inherit;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;width:100%}
input:focus,textarea:focus,select:focus,button:focus-visible,.tool:focus-within{outline:3px solid var(--soft);border-color:var(--blue)}
.btn{font:inherit;font-weight:700;background:var(--blue);color:#fff;border:0;border-radius:12px;padding:13px 16px;cursor:pointer;text-align:center;text-decoration:none}
.btn:disabled{opacity:.6}
.btn.small{padding:8px 12px;font-size:.9rem;width:auto}
.btn.ghost{background:transparent;color:var(--blue);border:1.5px solid var(--blue)}
.linkbtn{background:none;border:0;color:var(--blue);font:inherit;font-weight:700;cursor:pointer}
.error{color:var(--coral);font-weight:700;margin:0}
.ok{color:var(--ok);font-weight:700;margin:0}
.warn{background:var(--warm);border:1px solid var(--warmline);border-radius:10px;padding:10px}
.big{font:800 2rem var(--display);margin:0}

/* top bar */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 16px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.toplogo{height:36px;width:auto}
.topbar nav{display:flex;gap:14px;font-weight:700}
.lang{display:flex;background:#fff;border:1px solid var(--line);border-radius:99px;padding:3px}
.lang button{font:700 .85rem var(--body);border:0;background:none;color:var(--muted);padding:5px 12px;border-radius:99px;cursor:pointer}
.lang button.ur{font-family:var(--urdu);line-height:1.3}
.lang button.on{background:var(--blue);color:#fff}
.hello{font:600 1.15rem var(--display);margin:4px 0 0}

/* ask form */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{width:auto;align-self:flex-start;background:var(--soft);color:var(--blue);font-weight:700;border:0;border-radius:99px;padding:7px 12px;font-size:.9rem;max-width:100%}
textarea{resize:vertical;min-height:84px}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tool{display:flex;flex-direction:column;align-items:center;gap:3px;border:1.5px solid var(--line);border-radius:12px;padding:9px 4px;font:700 .85rem var(--body);color:var(--ink);background:#fff;cursor:pointer}
.tool svg,.act svg,.bottomnav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tool svg{stroke:var(--blue)}
.filebox{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--soft);border-radius:10px;padding:8px 12px;font-size:.9rem;min-width:0}
.filebox span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mathtoggle{align-self:flex-start;width:auto;background:var(--soft);color:var(--blue);border:0;border-radius:10px;padding:7px 12px;font:700 .9rem var(--body);cursor:pointer}
.mathtoggle[aria-expanded="true"]{background:var(--blue);color:#fff}
.mathkeys{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:8px}
.key{font:600 1.05rem ui-monospace,Menlo,Consolas,monospace;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 0;cursor:pointer;touch-action:manipulation}
.key:active{background:var(--soft)}
.key.wide{grid-column:span 2;font:700 .85rem var(--body)}

/* loading */
.loading{flex-direction:row;align-items:center;gap:14px}
.loading p{margin:0}
.spinner{flex:none;width:34px;height:34px;border-radius:50%;border:4px solid var(--soft);border-top-color:var(--blue);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}}

/* solution */
#result{display:flex;flex-direction:column;gap:14px}
.solution{gap:0}
.solhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.solhead b{font:600 1.1rem var(--display)}
.tag{font-size:.8rem;color:var(--muted)}
.q{margin:0 0 10px;padding-left:10px;border-left:3px solid var(--coral);font-weight:700;white-space:pre-wrap}
.step{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:12px 0;border-top:1px dashed var(--line)}
.step .n{width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem}
.stepbody{min-width:0}
.stepbody p{margin:0}
.m{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.98rem;background:var(--paper);border-radius:8px;padding:6px 9px;margin-top:6px;display:inline-block;max-width:100%;overflow-x:auto;white-space:pre-wrap;direction:ltr}
.ask{display:block;margin-top:6px;background:none;border:0;padding:4px 0;color:var(--blue);font:700 .88rem var(--body);cursor:pointer}
.ask.ur{font-family:var(--urdu)}
.chat{margin-top:8px;background:var(--soft);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.chat .me{align-self:flex-end;background:var(--blue);color:#fff;border-radius:12px 12px 2px 12px;padding:6px 10px;max-width:85%}
.chat .ai{background:#fff;border-radius:12px 12px 12px 2px;padding:8px 10px}
.chat .ai p{margin:0}
.chat .ai p.ur{border-top:1px solid var(--line);margin-top:6px;padding-top:4px}
.chatform{display:flex;gap:6px}
.chatform input{padding:8px 10px}
.final{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--oksoft);border:1.5px solid var(--ok);border-radius:12px;padding:10px 12px;margin-top:8px;flex-wrap:wrap}
.final>span:first-child{color:var(--ok);font-weight:700}
.final .m{background:#fff;margin:0;font-size:1.05rem;font-weight:700}
.check{color:var(--ok);font-size:.88rem;font-weight:700;margin:8px 0 0}
.why{margin:8px 0 0!important;background:var(--warm);border-left:3px solid var(--sun);border-radius:8px;padding:6px 10px;font-size:.95rem}
.why b{color:#8a5a00}
.idea{background:var(--soft);border-radius:12px;padding:10px 12px;margin:2px 0 10px}
.idea b{font:600 1rem var(--display);display:block;margin-bottom:2px;color:var(--blue)}
.idea b.ur{font-family:var(--urdu)}
.idea p{margin:0}
.prac{background:var(--warm);border:1.5px solid var(--warmline);border-radius:16px;padding:12px 14px}
.prac b{font:600 1rem var(--display);display:block;margin-bottom:4px}
.prac p{margin:0}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.act{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 4px;font:700 .82rem var(--body);color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.act svg{stroke:var(--blue)}

/* bottom nav */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:5;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);
  padding:8px 4px calc(10px + env(safe-area-inset-bottom,0px))}
.bottomnav a,.bottomnav span{display:flex;flex-direction:column;align-items:center;font:700 .75rem var(--body);color:var(--muted);text-decoration:none}
.bottomnav .on{color:var(--blue)}
.bottomnav .soon{opacity:.55}
.bottomnav small{font-size:.65rem;font-weight:400}

/* admin */
.student{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px dashed var(--line)}
.student>div{min-width:0;flex:1 1 220px}
.inline{display:flex;gap:6px;align-items:center}
.inline input{width:140px;padding:8px 10px}
.report{align-self:center;font-size:.9rem;color:var(--coral)}
.report:disabled{color:var(--ok)}
.pill.off{background:var(--coral);color:#fff;border-radius:99px;padding:1px 8px;font-size:.75rem;margin-left:4px}

/* scientific calculator */
.toolrow{display:flex;gap:8px;flex-wrap:wrap}
.calc{background:#1f2747;border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:8px;max-width:440px;width:100%;user-select:none}
.cdisp{background:#c9d7c0;border-radius:10px;padding:6px 10px;font-family:ui-monospace,Menlo,Consolas,monospace;color:#1a2414;min-height:84px;display:flex;flex-direction:column}
.cind{display:flex;gap:10px;font:700 .7rem var(--body);min-height:14px}
.cexpr{font-size:1.1rem;white-space:nowrap;overflow-x:auto;min-height:1.6em;scrollbar-width:none}
.cres{font-size:1.7rem;font-weight:700;text-align:right;margin-top:auto;word-break:break-all}
.cres.bad{font-size:1.2rem;color:#a11}
.ccur{display:inline-block;width:2px;height:1.1em;background:#1a2414;vertical-align:-2px;animation:cblink 1s steps(1) infinite}
@keyframes cblink{50%{opacity:0}}
.cgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.ck{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:42px;border:0;border-radius:9px;background:#3b4673;color:#fff;font:700 .95rem var(--body);cursor:pointer;touch-action:manipulation;padding:2px 0;line-height:1.1}
.ck small{font-size:.62rem;color:#ffcf5a;font-weight:700}
.ck:active{filter:brightness(1.3)}
.cgrid.pad .ck{background:#e9ecf5;color:#16204a;font-size:1.15rem;min-height:48px}
.cgrid.pad .ck.red{background:#e5533d;color:#fff;font-size:.95rem}
.cgrid.pad .ck.eq{background:var(--sun);color:var(--ink)}
.ck.shiftk{background:#d9a400;color:#16204a}
.ck.on{outline:3px solid #fff}
.cfoot{display:flex;justify-content:flex-end}
.cfoot .btn{background:#fff;color:var(--blue)}

/* pick from the book */
.bookbtn{width:100%;text-align:left;background:var(--warm);border:1.5px solid var(--warmline);color:var(--ink);border-radius:12px;padding:11px 14px;font:700 1rem var(--body);cursor:pointer}
.bookbtn[aria-expanded="true"]{background:var(--sun)}
.bookpick{display:flex;flex-direction:column;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px;max-height:60vh;overflow-y:auto}
.bookhead{margin:2px 0;font-weight:700;color:var(--muted);font-size:.9rem}
.bookex,.bookq{text-align:left;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;font:400 1rem var(--body);color:var(--ink)}
.bookex b{display:block}
.bookex span{color:var(--muted);font-size:.88rem}
.bookq{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95rem}
.bookex:active,.bookq:active{background:var(--soft)}

/* try one yourself */
.practice{border:2px solid var(--blue)}
.practice h3{margin:0 0 6px;font:800 1.15rem var(--display);color:var(--blue)}
.practice h3.ur,.practice p.ur{font-family:var(--urdu);direction:rtl;text-align:right}
.practice .pq{background:var(--paper);border-radius:10px;padding:10px 12px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.05rem;margin:4px 0 8px;white-space:pre-wrap}
.pform{display:flex;gap:8px;margin-top:8px}
.pform input{flex:1;min-width:0}
.pfb{border-radius:10px;padding:8px 12px;margin-top:8px}
.pfb p{margin:2px 0 0}
.pfb.good{background:var(--oksoft);border:1.5px solid var(--ok)}
.pfb.good b{color:var(--ok)}
.pfb.bad{background:var(--warm);border:1.5px solid var(--warmline)}
.prow{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px}
.prow .strong{font-weight:800}

/* book reader */
.bookwrap{padding-bottom:40px}
.booknav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:3;background:var(--paper);padding:8px 0}
.booknav .chip{text-decoration:none}
.booknav .chip.on{background:var(--blue);color:#fff}
.booknav select{max-width:100%}
.booktitle{font:800 1.2rem var(--display);margin:8px 0 2px}
.pages{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.pages figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pages img{display:block;width:100%;height:auto;min-height:200px}
.pages figcaption{text-align:center;color:var(--muted);font-size:.85rem;padding:4px}
.booknext{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;margin-top:16px}
/* plans, timed block, pre-solve */
.quota{margin:2px 0 0;font-size:.85rem;color:var(--muted, #667)}
.inline select{width:auto;padding:8px 10px}
.blockbox{flex:1 1 100%}
.blockbox>summary{list-style:none;display:inline-block;cursor:pointer}
.blockbox>summary::-webkit-details-marker{display:none}
.blockform{margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:12px}
.blockform .muted{margin:6px 0 0;font-size:.8rem}
.limits,.presolve{margin-top:14px;padding-top:12px;border-top:2px solid var(--line)}
.limits h3,.presolve h3{margin:0 0 4px;font-size:1rem}
.limits input{max-width:120px}