/* دفتر السادس — v5 «الدفتر». The owner approved the notebook identity (19/10) after asking for a look that does not read as AI-made:
   paper, ballpoint blue, the teacher's red pen, Ruqʿah handwriting (what Iraqi students write in), lists as notebook pages with a red margin,
   answers lettered أ ب ج like an exam paper and circled in pen. The calm layout of v4 stays: one main button, few things per screen.
   Light only (owner's rule). Every text is 16px or more; every text/background pair is 4.5:1 or more. */
@font-face { font-family: "Cairo"; src: url("fonts/w2/Cairo.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }
:root {
  --bg: #FAF7F0; --card: #FFFFFF; --white: #FFFFFF; --edge: #E6E0D2; --stack: #EEE8DB; --paper-2: #F6F2E8;
  --rule: #D6E2F3; --margin: #EBA9A9;
  --ink: #1A2233; --ink-2: #252D3D; --text: #2E3646; --muted: #5B6475; --faint: #8E95A3; --line: #E3DDCF; --line-soft: #EFEAE0;
  --accent: #1F44A3; --accent-2: #183A8C; --accent-ink: #183A8C; --accent-soft: #EEF3FC; --accent-softer: #DCE5F7;
  --pen: #D12A2A; --ok: #2F7D4F; --ok-ink: #1F5C39; --ok-soft: #EAF5EE; --bad: #D12A2A; --bad-ink: #A51D1D; --bad-title: #A51D1D; --bad-soft: #FCEFEF;
  --hint: #9A5B12; --hint-soft: #FFF6E3;
  --font: "Cairo", "Segoe UI", Tahoma, sans-serif; --hand: "Aref Ruqaa", "Cairo", serif;
  --shadow: 0 3px 0 var(--stack); --r: 16px;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.7; font-weight: 500; overflow-x: hidden; }
.num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
svg.defs { position: absolute; width: 0; height: 0; }
a { color: inherit; }
.hand { font-family: var(--hand); font-weight: 700; }

/* ---------- shell ---------- */
main { width: 100%; max-width: 600px; margin: 0 auto; padding-top: max(16px, env(safe-area-inset-top, 0px)); padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); display: grid; gap: 18px; }
main > * { min-width: 0; }
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--white); border-top: 1px solid var(--edge);
  display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
.nav a { position: relative; min-height: 66px; text-decoration: none; color: var(--muted); font-size: 16px; font-weight: 600; display: grid; justify-items: center; align-content: center; line-height: 1.4; }
.nav a svg { width: 24px; height: 24px; }
.nav a.on { color: var(--accent); font-weight: 800; }
.nav .dot { position: absolute; top: 12px; inset-inline-start: calc(50% + 8px); width: 10px; height: 10px; border-radius: 50%; background: var(--pen); box-shadow: 0 0 0 2px #fff; }
body.immersive .nav { display: none; }
body.immersive main { padding-bottom: 28px; padding-top: max(10px, env(safe-area-inset-top, 0px)); }
.offline { position: fixed; top: max(10px, env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); z-index: 60; background: var(--hint-soft); color: var(--ink);
  border: 1px solid #F1D9A6; border-radius: 14px; padding: 6px 14px; font-weight: 700; font-size: 16px; max-width: calc(100% - 32px); text-align: center; box-shadow: var(--shadow); }

/* ---------- type, buttons, cards ---------- */
h1 { font-weight: 900; font-size: 30px; line-height: 1.3; margin: 0; text-wrap: balance; }
h2 { font-weight: 800; font-size: 21px; line-height: 1.4; margin: 0; text-wrap: balance; }
h3 { font-weight: 800; font-size: 18px; margin: 0; line-height: 1.5; }
p { margin: 0; }
.muted { color: var(--muted); font-weight: 600; }
.small { font-size: 16px; }
.lead { color: var(--text); font-size: 18px; line-height: 1.75; }
.btn { min-height: 58px; border: 0; border-radius: 16px; padding: 0 22px; background: var(--accent); color: #fff; font-weight: 800; font-size: 20px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: transform .08s, background .15s; }
.btn:active { transform: scale(.985); background: var(--accent-2); }
.btn.wide { width: 100%; }
.btn.two-line { flex-direction: column; gap: 0; line-height: 1.3; min-height: 64px; }
.btn.two-line span { font-size: 16px; font-weight: 600; color: var(--accent-softer); }
.btn.ghost { background: var(--white); color: var(--ink); border: 1.5px solid var(--line); }
.btn[disabled] { opacity: .45; cursor: default; }
.link { background: none; border: 0; color: var(--accent); font-weight: 700; font-size: 17px; min-height: 44px; cursor: pointer; text-decoration: none; padding: 0 4px; display: inline-flex; align-items: center; justify-self: center; }
.card { background: var(--card); border: 1px solid var(--edge); box-shadow: var(--shadow); border-radius: var(--r); }
.pad { padding: 16px; }
.list { padding: 4px 16px; display: grid; }
.row { display: flex; gap: 12px; align-items: center; min-width: 0; }
.row > * { min-width: 0; }
.grow { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 2px 12px; font-size: 16px; font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); white-space: nowrap; }
.chip.grey { background: var(--line-soft); color: var(--muted); }
.chip.ok { background: var(--ok-soft); color: var(--ok-ink); }
.chip.bad { background: var(--bad-soft); color: var(--bad-ink); }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--text); flex: none; text-decoration: none; }
.icon-btn svg { width: 22px; height: 22px; }
.back { margin-inline-start: -10px; }
.note { font-size: 16px; color: var(--muted); font-weight: 600; line-height: 1.6; }
.subj-ic { width: 32px; height: 32px; flex: none; }
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 10px max(20px, env(safe-area-inset-right, 0px)) calc(20px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background: linear-gradient(rgba(250,247,240,0), var(--bg) 26%); max-width: 600px; margin: 0 auto; display: grid; gap: 4px; }
.dock-space { height: 110px; order: 99; }
.fb-space { order: 100; }

/* a notebook page: blue lines, and the red margin on the right where the icon, the number or the letter sits */
.page { position: relative; padding: 0; overflow: hidden; --m: 64px; }
.page::before, .lines::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: var(--m); width: 1.5px; background: var(--margin); z-index: 2; pointer-events: none; }
.lines { position: relative; --m: 64px; margin-inline: -16px; }
.lines.wide { --m: 96px; }

/* the teacher's marks and the student's pen loop draw themselves */
.pen-mark path, .loop path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .34s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- home ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { position: relative; font-family: var(--hand); font-weight: 700; font-size: 30px; line-height: 1.45; color: var(--accent); text-decoration: none; padding-bottom: 4px; }
.brand svg { position: absolute; inset-inline-start: -2px; bottom: -2px; width: 120px; height: 12px; }
.hello { display: grid; line-height: 1.35; }
.hello h1 { font-size: 27px; overflow-wrap: anywhere; }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--edge); color: var(--accent); display: grid; place-items: center; text-decoration: none; font-weight: 900; font-size: 19px; flex: none; }
.avatar svg { width: 22px; height: 22px; color: var(--muted); }
.countdown { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.countdown b { font-size: 56px; font-weight: 900; line-height: 1; color: var(--accent); }
.countdown span { font-size: 18px; font-weight: 700; color: var(--text); }
.cont { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); padding: 16px; min-height: 92px; }
.cont .tile { width: 56px; height: 56px; flex: none; border-radius: 14px; background: var(--accent-soft); display: grid; place-items: center; }
.cont .tile svg { width: 36px; height: 36px; }
.cont .txt { flex: 1; display: grid; line-height: 1.45; min-width: 0; }
.cont .txt b { font-size: 21px; font-weight: 900; }
.cont .go { width: 50px; height: 50px; flex: none; border-radius: 50%; background: var(--accent); display: grid; place-items: center; }
.cont .go svg { width: 14px; height: 16px; }
.line-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none; color: var(--ink); padding: 0 4px; min-height: 44px; margin-top: -6px; font-size: 17px; font-weight: 700; }
.line-link svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.sub-row { display: flex; align-items: center; min-height: 56px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--rule); padding-inline-end: 16px; }
.sub-row:last-child { border-bottom: 0; }
.sub-row .ic { width: var(--m); flex: none; display: grid; place-items: center; }
.sub-row .ic svg { width: 30px; height: 30px; }
.sub-row .name { flex: 1; padding-inline-start: 16px; font-size: 18px; font-weight: 700; }
.sub-row .st { font-size: 16px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sub-row .st.on { color: var(--accent); font-weight: 800; }
.sub-row .st.done { color: var(--ok-ink); font-weight: 700; }

/* ---------- subject page ---------- */
.shead { display: flex; align-items: center; gap: 14px; }
.shead .subj-ic { width: 60px; height: 60px; padding: 10px; border-radius: 16px; background: var(--accent-soft); }
.shead .t { display: grid; line-height: 1.3; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--line-soft); border-radius: 14px; padding: 4px; }
.seg button { min-height: 46px; border: 0; border-radius: 11px; background: transparent; font-size: 17px; font-weight: 700; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed=true] { background: var(--white); color: var(--ink); font-weight: 800; box-shadow: 0 2px 0 var(--stack); }
.chap { padding: 14px 16px 6px; }
.chap-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 10px; }
.chap-h .t { display: grid; line-height: 1.35; }
.chap-h b { font-size: 20px; font-weight: 900; }
.chap-row { display: flex; align-items: center; min-height: 54px; border-top: 1px solid var(--rule); text-decoration: none; color: var(--ink); padding-inline-end: 16px; }
.chap-row .no { width: var(--m); flex: none; text-align: center; font-weight: 800; color: var(--muted); font-size: 16px; line-height: 1.3; padding: 0 4px; }
.chap-row .ti { flex: 1; padding: 6px 0; padding-inline-start: 14px; font-size: 17px; font-weight: 700; line-height: 1.5; min-width: 0; }
.chap-row.soon .ti { color: var(--muted); font-weight: 600; }
.chap-row.next { background: var(--accent-soft); }
.chap-row.next .no, .chap-row.next .ti { color: var(--accent-ink); }
.chap-row .st { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; color: var(--muted); white-space: nowrap; padding-inline-start: 8px; }
.chap-row .st.go { color: var(--accent); font-weight: 800; }
.chap-row .st svg { width: 22px; height: 20px; }
.chap .link { margin: 4px 0; }
.chap-more { display: flex; align-items: center; justify-content: space-between; min-height: 62px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--rule); width: 100%; background: none; border-inline: 0; border-top: 0; text-align: start; cursor: pointer; padding: 0; }
.chap-more:last-child { border-bottom: 0; }
.chap-more .t { display: grid; line-height: 1.35; }
.chap-more b { font-size: 18px; font-weight: 800; }

/* ---------- section page ---------- */
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prevnext a { display: grid; gap: 0; padding: 12px 14px; text-decoration: none; min-height: 64px; line-height: 1.45; }
.prevnext a span { font-size: 16px; color: var(--muted); font-weight: 600; }
.prevnext a b { font-size: 16px; font-weight: 700; }
.prevnext a.n { text-align: end; }
.topics { margin: 0; padding-inline-start: 22px; display: grid; gap: 2px; }

/* ---------- lesson (immersive) ---------- */
.ltop { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 5; margin-inline: -20px; padding: 6px 20px; background: var(--bg); }
.steps { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.steps span { display: grid; gap: 4px; font-size: 16px; font-weight: 600; color: var(--faint); line-height: 1.3; }
.steps span::before { content: ""; height: 6px; border-radius: 3px; background: var(--line); }
.steps span.on { color: var(--accent); font-weight: 800; }
.steps span.on::before, .steps span.done::before { background: var(--accent); }
.steps span.done { color: var(--muted); }
.qbar { flex: 1; position: relative; height: 6px; border-radius: 3px; background: var(--line); }
.qbar i { position: absolute; top: 0; inset-inline-start: 0; height: 6px; border-radius: 3px; background: var(--accent); transition: width .3s; }
.counter { font-size: 16px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.stagehead { display: grid; gap: 2px; }
.vwrap { padding: 6px; }
.vbox { position: relative; border-radius: 12px; overflow: hidden; background: #fff; }
.video { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; display: block; background: #fff; }
.vplay { position: absolute; top: 50%; left: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; border: 0; background: var(--accent); display: grid; place-items: center;
  box-shadow: 0 8px 20px rgba(31,68,163,.3); cursor: pointer; }
.vplay svg { width: 20px; height: 22px; margin-inline-start: 4px; }
.verr { background: var(--bad-soft); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; }
.qart { overflow: hidden; padding: 6px; }
.qart svg { width: 100%; height: auto; display: block; max-height: 170px; }
.qtext { font-size: 22px; font-weight: 800; line-height: 1.6; }

/* answers: lines of one page, lettered like an exam paper; the student circles a letter, the teacher ticks or crosses */
.opts { --m: 58px; }
.opt { position: relative; display: flex; align-items: center; width: 100%; min-height: 60px; padding: 0; padding-inline-end: 62px; border: 0; border-bottom: 1px solid var(--rule); background: var(--white); cursor: pointer;
  font-size: 19px; font-weight: 700; color: var(--ink); text-align: start; line-height: 1.5; }
.opt:last-child { border-bottom: 0; }
.opt .l { position: relative; width: var(--m); align-self: stretch; flex: none; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: var(--text); min-height: 60px; }
.opt .t { flex: 1; padding: 10px 0; padding-inline-start: 16px; min-width: 0; }
.opt .loop { position: absolute; top: 50%; left: 50%; width: 50px; height: 54px; margin: -27px 0 0 -25px; display: none; overflow: visible; }
.opt.sel, .opt.wrong { background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; }
.opt.sel .l, .opt.wrong .l { color: var(--accent-ink); }
.opt.sel .loop, .opt.wrong .loop { display: block; }
.opt.right { font-weight: 800; }
.opt.dim, .opt.dim .l { color: var(--faint); }
.opt .pen-mark { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); width: 44px; height: 38px; overflow: visible; }
.opt[disabled] { cursor: default; }
.numrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.numin { font-weight: 800; font-size: 24px; direction: ltr; width: 9em; max-width: 100%; min-height: 58px; padding: 6px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--white); }
.numin:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-softer); }
.numrow .sign { min-width: 56px; min-height: 58px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--white); font-size: 24px; font-weight: 800; color: var(--ink); cursor: pointer; }
.unit { font-weight: 800; font-size: 20px; direction: ltr; unicode-bidi: isolate; color: var(--text); }

/* answer sheet: praise is the teacher's red handwriting */
.fb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: 600px; margin: 0 auto; background: var(--white); border-radius: 24px 24px 0 0;
  padding: 18px max(20px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  display: grid; gap: 8px; animation: up .25s cubic-bezier(.2,.8,.2,1); max-height: 80vh; overflow-y: auto; box-shadow: 0 -6px 28px rgba(26,34,51,.09); }
.fb h2 { font-size: 22px; font-weight: 900; }
.fb.ok h2 { font-family: var(--hand); font-weight: 700; font-size: 36px; line-height: 1.35; color: var(--pen); }
.fb.no h2 { color: var(--bad-title); } .fb.mid h2, .fb.hint h2 { color: var(--ink); }
.fb .why { font-size: 18px; line-height: 1.75; color: var(--ink-2); }
.fb .pre { white-space: pre-line; direction: ltr; text-align: left; font-size: 18px; font-weight: 700; line-height: 1.8; background: var(--paper-2); border-radius: 12px; padding: 8px 12px; }
.fb .acts { display: grid; gap: 2px; margin-top: 4px; }
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(26, 34, 51, .3); animation: fade .2s; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; background: var(--white); border-radius: 24px 24px 0 0; max-width: 600px; margin: 0 auto;
  padding: 12px max(20px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  display: grid; gap: 12px; animation: up .28s cubic-bezier(.2,.8,.2,1); box-shadow: 0 -8px 28px rgba(26,34,51,.12); max-height: 92vh; overflow-y: auto; }
.celebrate { text-align: center; justify-items: center; }
.celebrate .grade { margin: 4px auto -6px; }
.celebrate .lead { max-width: 30em; }
.celebrate .btnrow { width: 100%; }
.sheet .grip { width: 44px; height: 5px; border-radius: 3px; background: var(--line); justify-self: center; }
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.enter { animation: rise .18s ease-out; }

/* memorisation */
.mem { padding: 18px 16px; display: grid; gap: 14px; }
.mem .ins { font-weight: 700; color: var(--muted); font-size: 17px; }
.head-txt { color: var(--muted); font-weight: 600; }
.chunks { display: grid; gap: 8px; }
.chunk { border-radius: 12px; padding: 10px 14px; font-size: 19px; line-height: 1.85; background: var(--paper-2); }
.kw { font-weight: 800; color: var(--accent-ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 7px; }
.text { font-size: 20px; line-height: 2.2; }
.blank { display: inline-block; min-width: 3.6em; border-bottom: 3px solid var(--accent); margin: 0 3px; text-align: center; color: var(--accent-ink); font-weight: 800; line-height: 1.6; }
.blank.now { background: var(--accent-soft); border-radius: 8px 8px 0 0; }
.faded { color: var(--faint); }
.bank { display: flex; flex-wrap: wrap; gap: 10px; }
.bank button, .pool button { min-height: 52px; min-width: 56px; border: 1.5px solid var(--line); background: var(--white); border-radius: 12px; padding: 4px 14px; cursor: pointer; font-weight: 700; font-size: 18px; }
.bank button.used, .pool button.used { opacity: .3; pointer-events: none; }
.bank button.glow, .pool button.glow { border-color: var(--accent); background: var(--accent-soft); }
.shake { animation: shake .3s; border-color: var(--bad) !important; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.slots { display: grid; gap: 8px; }
.slots .slot { min-height: 52px; border: 1.5px dashed var(--faint); border-radius: 12px; padding: 8px 14px; display: flex; align-items: center; gap: 10px; color: var(--muted); }
.slots .slot.filled { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.slots .slot i { font-weight: 800; font-size: 16px; font-style: normal; color: var(--muted); }
.pool { display: grid; gap: 8px; }
.pool button { text-align: start; font-weight: 600; }
.letters { font-size: 22px; line-height: 2.1; font-weight: 800; color: var(--accent); }
.letters span { margin-inline-end: .55em; display: inline-block; }
textarea { width: 100%; min-height: 130px; border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--white); font-size: 18px; line-height: 1.9; resize: vertical; }
textarea:focus, input[type=text]:focus, input[type=email]:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-softer); }
.diff .hit { color: var(--accent-ink); font-weight: 800; } .diff .miss { color: var(--bad-ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--pen); }
.btnrow { display: grid; gap: 4px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.two .btn { padding: 0 10px; font-size: 18px; }
.mathsym { font-family: "Cambria Math", "STIX Two Math", "Noto Sans Math", "Times New Roman", serif; font-weight: 400; }

/* finish & breaks: the teacher's red «أحسنت» circled on the page; a blue pen tick between parts */
.finish { text-align: center; display: grid; gap: 12px; justify-items: center; padding-top: 36px; }
.grade { position: relative; width: 210px; height: 120px; display: grid; place-items: center; }
.grade b { font-family: var(--hand); font-weight: 700; font-size: 46px; color: var(--pen); line-height: 1; padding-bottom: 6px; }
.grade svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.finish .badge { width: 72px; height: 64px; display: grid; place-items: center; }
.finish .badge svg { width: 64px; height: 56px; overflow: visible; }
.auth .or { text-align: center; color: var(--muted); font-weight: 700; }
.auth .gbtn { display: grid; justify-items: center; min-height: 44px; }
.auth .inapp { display: grid; gap: 10px; padding: 14px; border-radius: 12px; background: var(--hint-soft); color: var(--ink); }
.auth .inapp ol { margin: 0; padding-inline-start: 22px; }
/* the launch week: a note in the teacher's red margin */
.open-week { display: grid; gap: 2px; text-decoration: none; border-inline-start: 5px solid var(--pen); }
.open-week b { font-size: 18px; }
input[type=text], input[type=email], select { width: 100%; min-height: 54px; border: 1.5px solid var(--line); border-radius: 12px; padding: 6px 14px; background: var(--white); font-size: 18px; }
input.code { font-weight: 800; font-size: 22px; letter-spacing: .1em; text-transform: uppercase; direction: ltr; text-align: center; }

/* review, exams, progress */
.big-num { font-size: 56px; font-weight: 900; line-height: 1; color: var(--accent); }
.kprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; border-bottom: 1px solid var(--rule); }
.kprow:last-child { border-bottom: 0; }
.kprow span { font-weight: 700; }
.meter { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; display: flex; }
.meter i { display: block; height: 100%; background: var(--accent); }
.result-row { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.result-row:last-child { border-bottom: 0; }
.res { width: 40px; height: 34px; display: grid; place-items: center; margin-top: 2px; }
.res svg { width: 36px; height: 32px; overflow: visible; }

/* packages & settings */
.pkg { padding: 16px; display: grid; gap: 8px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--white); }
.pkg.best { border: 2px solid var(--accent); }
.pkg .price { font-size: 24px; font-weight: 900; }
.pkg ul { margin: 0; padding-inline-start: 20px; color: var(--text); }
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.field label, .field .label { font-weight: 800; }
.days { display: flex; flex-wrap: wrap; gap: 8px; }
.days button { min-height: 46px; min-width: 70px; border: 1.5px solid var(--line); background: var(--white); border-radius: 12px; cursor: pointer; font-weight: 700; font-size: 16px; }
.days button[aria-pressed=true] { background: var(--accent); border-color: var(--accent); color: #fff; }
.datepick { display: grid; grid-template-columns: 1fr 1.8fr 1.3fr; gap: 6px; }
.datepick select { padding: 6px 8px; }
details.more > summary { list-style: none; cursor: pointer; padding: 16px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; min-height: 62px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary svg { width: 20px; height: 20px; color: var(--muted); transition: transform .2s; }
details.more[open] > summary svg { transform: rotate(180deg); }
details.more > .in { padding: 0 16px 16px; display: grid; gap: 18px; }
.subjsched { display: grid; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.subjsched:last-child { border-bottom: 0; }
.codebox { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--paper-2); border-radius: 14px; padding: 8px 8px 8px 14px; }
.codebox b { font-size: 24px; font-weight: 900; letter-spacing: .12em; direction: ltr; unicode-bidi: isolate; }
.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 70; background: var(--ink); color: #fff; border-radius: 12px; padding: 10px 18px; font-weight: 700; animation: up .25s; max-width: calc(100% - 32px); text-align: center; }
.skel { display: grid; gap: 16px; }
.skel i { display: block; height: 92px; border-radius: 16px; background: linear-gradient(90deg, #EFEAE0, #F8F5EE, #EFEAE0); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.errcard { text-align: center; display: grid; gap: 14px; justify-items: center; padding: 60px 10px; }

@media (min-width: 900px) {
  .nav { left: 50%; right: auto; transform: translateX(-50%); bottom: 16px; width: 520px; border: 1px solid var(--edge); border-radius: 18px; box-shadow: var(--shadow); }
  .toast { bottom: 110px; }
}
/* ---------- home v6.1 (20/10): a few things, bold only for titles, space instead of frames. The notebook covers keep their
   subject tints (light, the owner's rule: no dark areas); options are notebook lines, not boxes. ---------- */
:root { --c-chemistry: #F7DCD8; --c-chemistry-ink: #A32A20; --c-physics: #DCE5F7; --c-physics-ink: #1F44A3; --c-biology: #DDEFE3; --c-biology-ink: #1F5C39;
  --c-math: #FBE7CF; --c-math-ink: #8A4F0E; --c-arabic: #EFE3F5; --c-arabic-ink: #5E2F80; --c-english: #DDF0F2; --c-english-ink: #1B5F66; }
.home { display: grid; gap: 18px; }
.home h2.sh { font-size: 20px; margin: 6px 0 -4px; }
.brandrow { display: grid; justify-items: start; }
.tagline { color: var(--muted); font-weight: 600; font-size: 16px; }
.home .card { border-radius: 18px; }
.hook .im, .hero .im { position: relative; display: block; }
.hook img, .hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--paper-2); }
/* the guess on a first visit, and the question of the day: options are lines of the notebook */
.hook { overflow: hidden; }
.hook .body { padding: 14px 16px 16px; display: grid; gap: 8px; }
.hook .k { color: var(--pen); font-size: 24px; line-height: 1.2; }
.hook .q, .daily .q { margin: 0; font-weight: 800; font-size: 19px; line-height: 1.6; }
.gs, .dopts { display: grid; }
.g, .dopt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; text-align: start; background: none; border: 0; border-top: 1px solid var(--rule);
  border-radius: 0; padding: 8px 4px; font-weight: 600; font-size: 17px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.g i, .dopt i { font-style: normal; color: var(--accent); font-weight: 800; font-size: 18px; flex: none; width: 22px; text-align: center; }
.g span, .dopt span { flex: 1; min-width: 0; }
.g .pen-mark, .dopt .pen-mark { width: 28px; height: 24px; flex: none; }
.g.picked, .dopt.wrong { background: var(--accent-soft); border-radius: 10px; }
.dopt.right { background: var(--ok-soft); border-radius: 10px; }
.g[disabled], .dopt[disabled] { cursor: default; }
.hook .after, .daily .after { display: grid; gap: 6px; padding-top: 6px; }
.hook .after .hand, .daily .after .hand { color: var(--pen); font-size: 23px; line-height: 1.3; }
.hook .after p, .daily .after p { margin: 0; }
/* how it works, in one line */
.howline { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; padding: 0 4px; }
.howline > span:not(.muted) { font-weight: 800; color: var(--accent); font-size: 17px; display: inline-flex; align-items: center; gap: 6px; }
.howline > span:not(.muted) + span:not(.muted)::before { content: "←"; color: var(--faint); font-weight: 600; margin-inline-end: 6px; }
.howline svg { width: 22px; height: 22px; padding: 5px 4px 5px 6px; border-radius: 50%; background: var(--accent); }
.howline .muted { flex-basis: 100%; font-size: 16px; }
/* notebooks */
.covers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cover { position: relative; border-radius: 6px 16px 16px 6px; padding: 12px 14px 12px 22px; min-height: 96px; display: grid; align-content: space-between; gap: 8px;
  text-decoration: none; background: var(--cv, var(--paper-2)); color: var(--cv-ink, var(--ink)); }
.cover::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 9px; border-radius: 6px 0 0 6px; background: var(--cv-ink, var(--ink)); opacity: .45; }   /* the spine */
.cover .label { background: var(--white); border-radius: 8px; padding: 1px 10px; justify-self: start; color: var(--ink); font-weight: 800; font-size: 18px; }
.cover .sub { font-weight: 600; font-size: 16px; }
.cover .line { height: 6px; border-radius: 3px; background: rgba(255,255,255,.8); overflow: hidden; }
.cover .line i { display: block; height: 100%; border-radius: 3px; background: currentColor; }
.c-chemistry { --cv: var(--c-chemistry); --cv-ink: var(--c-chemistry-ink); } .c-physics { --cv: var(--c-physics); --cv-ink: var(--c-physics-ink); }
.c-biology { --cv: var(--c-biology); --cv-ink: var(--c-biology-ink); } .c-math { --cv: var(--c-math); --cv-ink: var(--c-math-ink); }
.c-arabic { --cv: var(--c-arabic); --cv-ink: var(--c-arabic-ink); } .c-english { --cv: var(--c-english); --cv-ink: var(--c-english-ink); }
.home .soon { margin: -8px 4px 0; font-size: 16px; }
/* a returning student */
.htop { display: flex; align-items: center; gap: 10px; }
.hi { display: grid; line-height: 1.3; min-width: 0; } .hi b { font-size: 22px; font-weight: 800; overflow-wrap: anywhere; }
.streak { margin-inline-start: auto; display: flex; align-items: center; gap: 2px; background: var(--bad-soft); color: var(--pen); border-radius: 999px; padding: 2px 12px 2px 8px; font-weight: 800; font-size: 19px; flex: none; }
.streak svg { width: 20px; height: 20px; }
.hero { overflow: hidden; display: block; text-decoration: none; color: var(--ink); }
.hero .play { position: absolute; top: calc(50% - 30px); left: calc(50% - 30px); width: 60px; height: 60px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(31,68,163,.3); }
.hero .play svg { width: 18px; height: 20px; margin-left: 4px; }
.hero .bar { display: block; height: 4px; background: var(--rule); } .hero .bar i { display: block; height: 100%; background: var(--pen); }
.hero .cap { padding: 10px 16px 14px; display: grid; line-height: 1.45; }
.hero .k { color: var(--pen); font-weight: 700; font-size: 16px; } .hero .cap b { font-size: 21px; font-weight: 800; }
.line-link.stat { gap: 12px; }
.line-link.stat a { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: inherit; text-decoration: none; min-height: 44px; min-width: 0; }
.line-link.stat b { color: var(--accent); }
.mini { width: 90px; height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; flex: none; } .mini i { display: block; height: 100%; background: var(--accent); }
.daily { display: grid; gap: 8px; }
.daily .dhead { width: 100%; background: none; border: 0; cursor: pointer; text-align: start; font: inherit; color: var(--ink); }
.daily .dhead .hand { color: var(--pen); font-size: 21px; }
.daily .dhead[aria-expanded="true"] svg { transform: rotate(-90deg); }
.daily .dbody { display: grid; gap: 6px; padding: 0 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pen-mark path, .loop path { stroke-dashoffset: 0; }
}