@font-face{font-family:'Andika';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/andika-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Andika';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/andika-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Naskh Arabic';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/noto-naskh-arabic-arabic-400-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}
@font-face{font-family:'Andika';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/andika-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Andika';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/andika-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Noto Naskh Arabic';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/noto-naskh-arabic-arabic-700-normal.woff2) format('woff2');unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}
:root{
  --paper:#fbfaf4; --grid:#d3dff0; --grid2:#e9eff7; --ink:#26303b; --muted:#66727e;
  --acc:#3157c8; --acc-ink:#fff; --card:#fff; --line:#dde3ee;
  --good:#278a4b; --good-bg:#e3f5e9; --bad:#c2410c; --bad-bg:#fdeadf; --field:#fff;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#1c2128; --grid:#2c3846; --grid2:#242d38; --ink:#eef1f4; --muted:#a3afbb;
    --acc:#6f93ff; --acc-ink:#0b1430; --card:#262d36; --line:#38424f;
    --good:#5fd08a; --good-bg:#1f3a2a; --bad:#ff9a66; --bad-bg:#40291d; --field:#1c2128;
  }
}
:root[data-theme="dark"]{
  --paper:#1c2128; --grid:#2c3846; --grid2:#242d38; --ink:#eef1f4; --muted:#a3afbb;
  --acc:#6f93ff; --acc-ink:#0b1430; --card:#262d36; --line:#38424f;
  --good:#5fd08a; --good-bg:#1f3a2a; --bad:#ff9a66; --bad-bg:#40291d; --field:#1c2128;
}
*{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100vh;color:var(--ink);font-family:'Andika','Trebuchet MS',sans-serif;font-size:18px;line-height:1.5;
  background-color:var(--paper);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px),
    linear-gradient(var(--grid2) 1px,transparent 1px),linear-gradient(90deg,var(--grid2) 1px,transparent 1px);
  background-size:32px 32px,32px 32px,8px 8px,8px 8px}
.wrap{max-width:580px;margin:0 auto;padding:16px 14px 48px}
h1{font-size:26px;margin:6px 0 2px}
h2{font-size:19px;margin:0 0 8px}
.sub{color:var(--muted);margin:0 0 14px;font-size:16px}
.card{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px}
.subj{border-left:10px solid var(--c)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:16px;color:var(--ink);background:var(--field);border:2px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.chip.on{background:var(--c);border-color:var(--c);color:#fff;font-weight:700}
.chip small{opacity:.85;font-size:13px}
.mini{font:inherit;font-size:14px;background:none;border:none;color:var(--muted);text-decoration:underline;cursor:pointer;padding:2px 4px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.seg{font:inherit;font-weight:700;flex:1;min-width:56px;padding:10px 0;border-radius:12px;border:2px solid var(--line);background:var(--field);color:var(--ink);cursor:pointer}
.seg.on{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.go{display:block;width:100%;font:inherit;font-size:20px;font-weight:700;background:var(--acc);color:var(--acc-ink);border:none;border-radius:14px;padding:14px;margin-top:10px;cursor:pointer}
.go:disabled{opacity:.45;cursor:not-allowed}
.go.alt{background:var(--card);color:var(--ink);border:2px solid var(--line)}
.top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.back{font:inherit;background:none;border:none;color:var(--muted);text-decoration:underline;cursor:pointer;padding:4px}
.prog{height:12px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:6px}
.prog>i{display:block;height:100%;background:var(--good);transition:width .3s}
.meta{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:10px}
.tag{display:inline-block;background:var(--c,var(--acc));color:#fff;font-weight:700;border-radius:999px;padding:1px 12px;font-size:14px}
.again{display:inline-block;margin-inline-start:6px;background:var(--bad-bg);color:var(--bad);font-weight:700;border-radius:999px;padding:1px 10px;font-size:13px}
.q{font-size:21px;margin:10px 0}
.q.rtl,.rtl{direction:rtl;text-align:right;font-family:'Noto Naskh Arabic','Andika',serif;font-size:24px;line-height:1.8}
.bigemo{font-size:56px;line-height:1.2;text-align:center}
.opts{display:flex;flex-direction:column;gap:10px}
.opts.grid{flex-direction:row;flex-wrap:wrap}
.opts.grid .opt{flex:1;min-width:30%;font-size:40px}
.opt{font:inherit;font-size:20px;font-weight:700;color:var(--ink);background:var(--field);border:3px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;text-align:center}
.opt.rtl{text-align:center;font-size:24px}
.opt:active{transform:scale(.98)}
.opt.good{border-color:var(--good);background:var(--good-bg);color:var(--good)}
.opt.bad{border-color:var(--bad);background:var(--bad-bg);color:var(--bad)}
.opt:disabled{cursor:default}
.inrow{display:flex;gap:10px;align-items:center}
input.ans{font:inherit;font-size:26px;font-weight:700;width:100%;text-align:center;color:var(--ink);background:var(--field);border:3px solid var(--acc);border-radius:12px;padding:8px}
input.ans:focus{outline:3px solid color-mix(in srgb,var(--acc) 40%,transparent);outline-offset:2px}
.spk{font:inherit;font-size:18px;font-weight:700;background:var(--acc);color:var(--acc-ink);border:none;border-radius:12px;padding:8px 16px;cursor:pointer;margin:4px 0}
.fb{border-radius:12px;padding:10px 14px;margin-top:12px}
.fb.good{background:var(--good-bg);color:var(--good);font-weight:700}
.fb.bad{background:var(--bad-bg);color:var(--bad)}
.fb b{display:block}
.big{font-size:56px;text-align:center;color:var(--acc);margin:4px 0}
.center{text-align:center}
.res{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:17px}
.note{font-size:14px;color:var(--muted);margin-top:14px}
.slot{min-height:56px;border:3px dashed var(--line);border-radius:14px;padding:8px;display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;align-items:center}
.slot.rtl{direction:rtl}
.tiles{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.tile{font:inherit;font-size:20px;font-weight:700;background:var(--field);color:var(--ink);border:3px solid var(--line);border-radius:12px;padding:8px 14px;cursor:pointer}
.tile.rtl{font-size:24px;font-family:'Noto Naskh Arabic','Andika',serif}
.tile.set{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);cursor:default}
.passage{background:var(--grid2);border-radius:12px;padding:10px 12px;margin-bottom:8px;font-size:19px}
.miss{border-top:1px dashed var(--line);padding:12px 0}
.miss .qq{font-size:18px;margin:6px 0}
.miss .qq.rtl{font-size:22px}
.miss .mine{color:var(--bad)}
.miss .corr{color:var(--good);font-weight:700}
.miss svg{max-width:150px;height:auto}
.subjhead{flex:1;display:flex;flex-direction:column;align-items:flex-start;font:inherit;background:none;border:none;color:var(--ink);text-align:left;cursor:pointer;padding:0}
.subjhead span{font-size:19px;font-weight:700}.subjhead small{color:var(--muted);font-size:13px}
.warn{font-size:14px;color:var(--muted);margin-top:6px}
.namebar{display:block;text-align:center;background:var(--acc);color:var(--acc-ink);font-weight:700;font-size:20px;border-radius:14px;padding:10px 14px;margin:0 0 12px}
/* ---- website additions ---- */
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.btnrow .go{flex:1;min-width:150px;margin-top:0;font-size:17px;padding:12px}
.banner{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--good-bg);color:var(--ink);border:2px solid var(--good);border-radius:14px;padding:10px 14px;margin:0 0 12px;font-size:16px}
.banner b{color:var(--good)}
.banner .go{width:auto;margin:0;font-size:16px;padding:8px 16px}
.install{border:2px solid var(--acc)}
.install .row .go{flex:1;margin-top:6px}
.bar{height:10px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:4px}
.bar>i{display:block;height:100%}
.topicrow{padding:8px 0;border-bottom:1px dashed var(--line)}
.topicrow .row{justify-content:space-between;flex-wrap:nowrap;font-size:16px}
.stats3{display:flex;gap:8px;text-align:center}
.stats3>div{flex:1;background:var(--grid2);border-radius:12px;padding:8px 4px}
.stats3 b{display:block;font-size:24px;color:var(--acc)}
.stats3 small{color:var(--muted);font-size:13px}
.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-top:18px;font-size:14px;color:var(--muted)}
.field{display:block;margin:0 0 12px}
.field span{display:block;font-weight:700;margin-bottom:4px}
.field input{font:inherit;font-size:20px;width:100%;color:var(--ink);background:var(--field);border:3px solid var(--line);border-radius:12px;padding:10px 12px}
.field input:focus{outline:none;border-color:var(--acc)}
.pw{position:relative}.pw input{padding-right:56px}
.pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:22px;background:none;border:none;cursor:pointer;padding:6px}
.check{display:flex;gap:10px;align-items:center;font-size:17px;margin:4px 0 6px;cursor:pointer}
.check input{width:24px;height:24px;accent-color:var(--acc)}
.err{background:var(--bad-bg);color:var(--bad);border-radius:12px;padding:10px 14px;margin:0 0 12px;font-weight:700}
.logo{font-size:64px;text-align:center;line-height:1.1;margin-top:8px}
.confirm{display:inline-flex;gap:6px;align-items:center}
/* ---- phones: nothing wider than the screen, comfortable tap targets ---- */
html{overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip}  /* clip, not hidden: hidden would make body its own scroll box and break the mouse wheel */
body{-webkit-tap-highlight-color:transparent}
.bigemo{overflow-wrap:anywhere;word-break:break-all}
.q,.opt,.fb,.miss,.passage,.tile,.namebar{overflow-wrap:break-word}
.q svg,.miss svg{max-width:100%;height:auto}
.mini{min-height:40px;padding:8px 10px;display:inline-flex;align-items:center}
.foot a,.note a{display:inline-flex;align-items:center;min-height:40px;padding:4px 2px}
button,.go,.seg,.opt,.chip,.tile{touch-action:manipulation}
html{overscroll-behavior-y:contain}  /* no pull-to-refresh in the middle of an exam */
/* parents' buttons: grey, small, must be held 2 s */
.parentbar{display:flex;justify-content:flex-end;gap:8px;margin:-4px 0 10px}
.hold{position:relative;overflow:hidden;font:inherit;font-size:13px;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:99px;padding:8px 12px;min-height:36px;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}
.hold i{position:absolute;left:0;top:0;bottom:0;width:0;background:color-mix(in srgb,var(--acc) 25%,transparent);pointer-events:none}
.hold.holding i{width:100%;transition:width 2s linear}
.holdhint{text-align:right;font-size:13px;color:var(--muted);margin:-6px 0 10px}
details.exam{border-top:1px dashed var(--line);padding:10px 0}
details.exam summary{display:flex;justify-content:space-between;gap:10px;align-items:center;cursor:pointer;list-style:none;font-size:16px}
details.exam summary::-webkit-details-marker{display:none}
details.exam[open] summary{margin-bottom:6px}
.top .back{white-space:nowrap}
.top h1{font-size:21px;line-height:1.2;text-align:center;flex:1;min-width:0}
/* back button: clearly visible pill */
.back{display:inline-flex;align-items:center;gap:4px;min-height:42px;padding:6px 14px;border:2px solid var(--acc);border-radius:999px;background:var(--card);
  color:var(--acc);font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap}
.back:active{transform:scale(.97)}
.hold{font-size:15px;font-weight:700;min-height:44px;padding:10px 16px;border-width:2px}
/* logout button inside the name bar (left) */
.namebar{position:relative;padding-left:52px;padding-right:52px}
.nb-out{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:10px;border:none;cursor:pointer;
  background:rgba(255,255,255,.2);color:inherit;font:inherit;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center}
.nb-out:active{transform:translateY(-50%) scale(.95)}
.namebar{font-size:18px}
/* exam sent by a parent: bold bar on the child's home screen */
.assign{background:linear-gradient(135deg,#ff8a00,#e5398b);color:#fff;border-radius:16px;padding:14px;margin:0 0 12px;box-shadow:0 4px 14px rgba(229,57,139,.35);animation:assignpulse 2s ease-in-out infinite}
.assign-t{font-size:20px;line-height:1.3}
.assign-d{font-size:15px;opacity:.95;margin-top:4px}
.assign-m{background:rgba(255,255,255,.18);border-radius:10px;padding:6px 10px;margin-top:8px;font-style:italic}
.assign .go{background:#fff;color:#c2185b;margin-top:10px}
@keyframes assignpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
@media (prefers-reduced-motion:reduce){.assign{animation:none}}
.assigndone{border-color:#e5398b}
.timer{font-weight:700;font-size:18px;background:var(--grid2);border-radius:99px;padding:4px 12px;font-variant-numeric:tabular-nums}
.timer.low{background:var(--bad-bg);color:var(--bad)}
/* ---- fun: avatar, stars/streak/badges, read-aloud, number pad ---- */
.nb-av{font-size:22px;line-height:1;background:rgba(255,255,255,.22);border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;vertical-align:middle;margin-right:4px}
.parentbar{justify-content:space-between;flex-wrap:wrap}
.funbar{display:inline-flex;gap:12px;align-items:center;font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:2px solid var(--line);border-radius:99px;padding:6px 14px;min-height:44px;cursor:pointer}
.funbar b{font-variant-numeric:tabular-nums}
.qcard{position:relative}
.readq{position:absolute;top:8px;right:8px;width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:var(--field);font-size:20px;cursor:pointer;z-index:1}
.qcard .q{padding-right:44px}
.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.numpad button{font:inherit;font-size:26px;font-weight:700;min-height:56px;border-radius:14px;border:2px solid var(--line);background:var(--field);color:var(--ink);cursor:pointer;touch-action:manipulation}
.numpad button:active{transform:scale(.96)}
.numpad .padx{color:var(--bad)}
.numpad .padok{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.rewards .rw-row{display:flex;justify-content:center;gap:24px;flex-wrap:wrap}
.rw-big{font-size:26px;font-weight:700}
.newbadges{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.newbadges>b{width:100%}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.badge{display:flex;gap:8px;align-items:center;border:2px solid var(--line);border-radius:14px;padding:8px;background:var(--field);opacity:.6}
.badge.on{opacity:1;border-color:#ffb300;background:color-mix(in srgb,#ffd400 14%,var(--field))}
.badge span{font-size:28px}
.badge small{font-size:12px;line-height:1.3;color:var(--muted)}
.badge.on small{color:var(--ink)}
.avatars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.avatars button{font-size:30px;aspect-ratio:1;border-radius:14px;border:2px solid var(--line);background:var(--field);cursor:pointer}
.avatars button.on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 15%,var(--field))}
@media (max-width:360px){.avatars{grid-template-columns:repeat(4,1fr)}}
/* small combined card: install the app + notifications */
.setup{display:flex;align-items:center;gap:8px;background:var(--card);border:2px solid var(--acc);border-radius:14px;padding:6px 6px 6px 12px;margin:0 0 12px;font-size:14px;line-height:1.3}
.setup span{flex:1}
.setup .go{width:auto;margin:0;font-size:15px;padding:8px 14px;border-radius:10px}
.setup-x{flex:none;width:32px;height:32px;border:none;background:none;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;border-radius:8px}
.nb-grade{display:inline-block;white-space:nowrap;font-size:13px;background:rgba(255,255,255,.22);border-radius:99px;padding:1px 8px;vertical-align:middle}
.parentbar{flex-wrap:nowrap;align-items:center}
.parentbar .hold{min-width:44px;font-size:18px;padding:8px 12px}
/* subjects as big colored tiles */
.tiles6{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.tile6{position:relative;font:inherit;border:none;border-radius:18px;padding:14px 8px;color:#fff;background:var(--c);text-align:center;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.18);touch-action:manipulation}
.tile6:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.18)}
.tile6 .ic{font-size:40px;line-height:1.1;display:block}
.tile6 .nm{font-weight:700;font-size:17px;display:block;margin-top:4px;line-height:1.2}
.tile6 .ct{font-size:13px;opacity:.95;display:block}
.tile6.sel{outline:4px solid #ffd400;outline-offset:2px}
.tile6.open{box-shadow:0 0 0 3px var(--card),0 0 0 6px var(--c)}
.tile6 .chk{position:absolute;top:8px;right:8px;background:#fff;color:var(--c);border-radius:99px;font-size:12px;font-weight:700;padding:1px 8px}
.tiles6 .tilepanel{grid-column:1/-1;margin:0;animation:panelin .18s ease-out}
@keyframes panelin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tiles6 .tilepanel{animation:none}}
/* start button stays at the bottom of the screen while choosing topics */
.startbar{position:sticky;bottom:0;z-index:5;margin:0 -14px;padding:2px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--paper) 30%)}