/* Layout: graph-paper hero with a live explorer, then a chapter table with study material, question paper and answer key columns, an admin panel, and the teacher's note. */
:root{
  --bg:#f3f6f8;
  --surface:#ffffff;
  --ink:#14233a;
  --muted:#52627a;
  --line:#d3dce6;
  --grid:#dde5ee;
  --accent:#c2410c;
  --accent-ink:#ffffff;
  --leaf:#1f7a5a;
  --leaf-bg:#e3f3ec;
  --lock:#6b5b1f;
  --lock-bg:#f6efd2;
  --bad:#a1281c;
  --bad-bg:#fbe5e2;
  --f-display:'Young Serif',Georgia,'Times New Roman',serif;
  --f-body:'Hind','Segoe UI',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --f-deva:'Tiro Devanagari Hindi','Noto Serif Devanagari',serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1a2b;--surface:#16243a;--ink:#e8eef6;--muted:#9fb0c6;--line:#2a3b55;--grid:#1d2d46;--accent:#f08a4b;--accent-ink:#1a0e05;--leaf:#4cc79b;--leaf-bg:#143a30;--lock:#e6cf7a;--lock-bg:#3a3314;--bad:#ff9a8d;--bad-bg:#4a1f1a;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1a2b;--surface:#16243a;--ink:#e8eef6;--muted:#9fb0c6;--line:#2a3b55;--grid:#1d2d46;--accent:#f08a4b;--accent-ink:#1a0e05;--leaf:#4cc79b;--leaf-bg:#143a30;--lock:#e6cf7a;--lock-bg:#3a3314;--bad:#ff9a8d;--bad-bg:#4a1f1a;color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}
.wrap{max-width:1080px;margin:0 auto}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.15;text-wrap:balance;margin:0}
p{margin:0}
.label{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

header.top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-block:20px}
.brand{display:flex;align-items:baseline;gap:12px;text-decoration:none}
.brand b{font-family:var(--f-display);font-weight:400;font-size:24px}
.brand span{font-family:var(--f-deva);font-size:20px;color:var(--accent)}
nav{display:flex;gap:20px;flex-wrap:wrap;font-weight:500;font-size:15px;align-items:center}
nav a{text-decoration:none;color:var(--muted)}
nav a:hover{color:var(--ink)}
.adminpill{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:99px;background:var(--accent);color:var(--accent-ink)}

.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding-block:32px 52px}
.hero h1{font-size:clamp(34px,5.6vw,56px)}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p.lead{margin-top:18px;max-width:46ch;color:var(--muted);font-size:19px}
.free-note{margin-top:18px;display:inline-flex;gap:10px;align-items:center;padding:8px 14px;border-radius:8px;background:var(--leaf-bg);color:var(--leaf);font-weight:600;font-size:15px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.btn{display:inline-block;padding:11px 20px;border-radius:6px;font-weight:600;text-decoration:none;border:2px solid var(--ink);background:transparent}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn:hover:not(:disabled){transform:translateY(-1px)}

.lab{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:18px;min-width:0}
.lab h2{font-size:20px;margin:4px 0 12px}
.plot{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.plot text{font-family:var(--f-mono);font-size:11px;fill:var(--muted)}
.controls{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.controls label{display:flex;flex-direction:column;gap:4px;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
input[type=text],input[type=number],input[type=file],textarea,select{font:inherit;font-size:16px;width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}
.controls input{font-family:var(--f-mono)}
.work{margin-top:14px;font-family:var(--f-mono);font-size:13px;line-height:1.8;overflow-x:auto;color:var(--ink)}
.work b{color:var(--accent);font-weight:500}

section{padding-block:48px;border-top:1px solid var(--line)}
section h2.big{font-size:clamp(28px,4vw,38px);margin-top:8px;max-width:22ch}
.intro{margin-top:12px;color:var(--muted);max-width:66ch}
.rule{margin-top:14px;padding:10px 14px;border-radius:8px;background:var(--lock-bg);color:var(--lock);font-size:15px;max-width:66ch}

/* chapter table */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.tab{padding:9px 18px;border:2px solid var(--line);border-radius:99px;background:var(--surface);font-weight:600}
.tab[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.subtab{padding:6px 14px;border:0;border-bottom:3px solid transparent;background:transparent;font-weight:600;color:var(--muted)}
.subtab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.count{margin-top:18px;font-family:var(--f-mono);font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.grid{margin-top:8px;border-top:2px solid var(--ink)}
.crow,.chead{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:14px;align-items:start;padding:14px 0;border-bottom:1px solid var(--line)}
.chead{padding:10px 0;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ctitle{display:flex;gap:10px;align-items:baseline;min-width:0;flex-wrap:wrap}
.cno{font-family:var(--f-mono);font-size:13px;color:var(--muted);min-width:2ch;text-align:right}
.cname{font-weight:600;min-width:0}
.cell{display:flex;flex-direction:column;gap:8px;min-width:0}
.clabel{display:none;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cbadges{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.cbtns{display:flex;gap:6px;flex-wrap:wrap}
.cdash{color:var(--muted)}
.badge{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:2px 9px;border-radius:99px}
.badge.free{background:var(--leaf-bg);color:var(--leaf)}
.badge.paid{background:var(--lock-bg);color:var(--lock)}
.badge.bad{background:var(--bad-bg);color:var(--bad)}
.price{font-family:var(--f-mono);font-size:14px;font-weight:500}
.act{padding:5px 12px;border:1.5px solid var(--ink);border-radius:6px;background:transparent;font-size:14px;font-weight:600}
.act.buy{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.act.edit{border-style:dashed;border-color:var(--muted);color:var(--muted)}
.act:hover:not(:disabled){transform:translateY(-1px)}
.addbar{margin-top:14px}

/* dialog */
.scrim{position:fixed;inset:0;background:rgba(10,18,30,.6);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));z-index:30}
.dialog{background:var(--surface);color:var(--ink);border-radius:12px;max-width:640px;width:100%;max-height:100%;overflow:auto;padding:24px;border:1px solid var(--line)}
.dialog header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.dialog h3{font-size:24px}
.dialog .x{border:1.5px solid var(--line);background:transparent;border-radius:6px;padding:4px 12px;font-weight:600}
.dialog h4{margin:18px 0 6px;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.dialog ul,.dialog ol{margin:0;padding-left:1.3em}
.dialog li+li{margin-top:6px}
.dialog .locked{margin-top:16px;padding:14px;border-radius:8px;background:var(--lock-bg);color:var(--lock)}
.dialog .foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.dialog .note{margin-top:14px;font-size:15px;color:var(--muted)}
.dialog #dBody{margin-top:14px}
.form{display:grid;gap:14px;margin-top:16px}
.form label{display:flex;flex-direction:column;gap:5px;font-weight:600;font-size:15px}
.form label.inline{flex-direction:row;align-items:center;gap:10px;font-weight:500}
.form label.inline input{width:auto}
.form .hint{font-weight:400;font-size:14px;color:var(--muted)}
.payinfo{padding:14px;border-radius:8px;background:var(--bg);border:1px solid var(--line);display:grid;gap:6px}
.payinfo .amt{font-family:var(--f-display);font-size:30px;color:var(--accent)}
.payinfo code{font-family:var(--f-mono);font-size:15px;word-break:break-all}
.toast{position:fixed;left:50%;bottom:max(20px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:8px;font-size:15px;z-index:40;max-width:calc(100% - 32px);text-align:center}

/* copy deterrents: these discourage copying and make leaks traceable. No web page can block a screenshot. */
.dialog,.grid,.payinfo{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.dialog input,.dialog textarea{-webkit-user-select:text;user-select:text}
#wm{position:fixed;inset:0;pointer-events:none;z-index:60;background:url(watermark.png) center center no-repeat;background-size:min(60vmin,420px);opacity:.1}
body.shielded .grid,body.shielded .dialog{filter:blur(18px);pointer-events:none}
@media print{body{display:none!important}}

/* admin */
.admin{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px;margin-top:22px}
.orderlist{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line)}
.order{display:grid;grid-template-columns:1fr auto;gap:8px 14px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center}
.order .what{min-width:0}
.order .what b{font-weight:600}
.order .sub{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);word-break:break-all}
.order .btns{display:flex;gap:8px;flex-wrap:wrap}
.empty{margin-top:12px;color:var(--muted)}

.about{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;align-items:start}
.about blockquote{margin:0;font-family:var(--f-deva);font-size:clamp(24px,3.4vw,32px);line-height:1.4;color:var(--accent)}
.about blockquote small{display:block;margin-top:10px;font-family:var(--f-body);font-size:15px;color:var(--muted)}
.about p+p{margin-top:12px}
.creds{font-family:var(--f-mono);font-size:14px;color:var(--leaf);margin-top:4px}

footer{padding-block:28px 40px;border-top:1px solid var(--line);color:var(--muted);font-size:14px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:900px){
  .hero,.about{grid-template-columns:1fr}
  .chead{display:none}
  .crow{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}
  .ctitle{grid-column:1/-1}
  .clabel{display:block}
}
@media (max-width:620px){
  .crow{grid-template-columns:1fr}
  .cell{padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
}
@media (max-width:420px){.controls{grid-template-columns:repeat(2,1fr)}.order{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.btn:hover,.act:hover{transform:none}}

.brief h2.big{max-width:28ch}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:24px}
.scard{padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.scard .label{color:var(--accent)}
.scard h3{font-family:var(--f-display);font-size:22px;margin:6px 0 8px}
.scard p{color:var(--muted);font-size:16px;margin:0}
.scard ul{margin:10px 0 0;padding-left:18px;font-size:15.5px}
.benefits{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 24px;margin:18px 0 0;padding:0;list-style:none}
.benefits li{padding-left:22px;position:relative}
.benefits li:before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:50%;background:var(--leaf)}
.qpbox{margin-top:28px;padding:20px;border-radius:12px;background:var(--leaf-bg);border:1px solid var(--line)}
.qpbox h3{font-family:var(--f-display);font-size:24px;margin:6px 0 8px}
.qpbox ul{margin:10px 0 0;padding-left:20px}
.qpbox li{margin:4px 0}
.about .bio{margin-top:10px}
.about .bio li{margin:4px 0}

/* additions for the hosted version */
[hidden]{display:none!important}
img{max-width:100%}
body{margin:0}
.authbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.authinfo{font-size:14px;color:var(--muted);max-width:22ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.banner{padding:12px 16px;border-radius:8px;background:var(--lock-bg);color:var(--lock);margin-top:12px}
.loading{padding:14px 0;color:var(--muted)}