:root{
  --ink:#123B54; --mut:#6C8A9C; --blue:#2AA9DF; --blue-d:#1B87B6; --yellow:#F9B233;
  --green:#37A76F; --red:#D5563F;
  --bg:#EEF4F8; --panel:#fff; --line:#D6E3EC; --soft:#F6FAFC;
  --r:10px; --sh:0 1px 2px rgba(18,59,84,.06),0 6px 18px rgba(18,59,84,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
a{color:var(--blue-d);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .5em;line-height:1.25}
h1{font-size:24px}h2{font-size:19px}h3{font-size:16px}
p{margin:0 0 1em}
small{color:var(--mut)}

.top{background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top .in{max-width:1120px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{font-weight:700;font-size:17px;white-space:nowrap}
.logo i{font-style:normal;color:var(--blue)}.logo em{font-style:normal;color:var(--yellow)}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{padding:6px 11px;border-radius:8px;color:var(--ink);font-weight:500;font-size:14px}
.nav a:hover{background:var(--soft);text-decoration:none}
.nav a.on{background:var(--blue);color:#fff}
.grow{flex:1}
.who{font-size:13px;color:var(--mut);text-align:right;line-height:1.3}
.who b{display:block;color:var(--ink);font-size:14px}

.wrap{max-width:1120px;margin:0 auto;padding:20px 16px 56px}
.narrow{max-width:460px;margin:8vh auto;padding:0 16px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px;margin:0 0 16px}
.card>h2,.card>h3{margin-top:0}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.stat b{display:block;font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{color:var(--mut);font-size:13px}

.gcard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden;color:var(--ink)}
.gcard:hover{border-color:var(--blue);text-decoration:none}
.gcard .cover{aspect-ratio:1241/1754;background:var(--soft) center/cover no-repeat;display:block;
  border-bottom:1px solid var(--line)}
.gcard .body{padding:10px 12px}
.gcard .body b{display:block}
.gcard .body span{display:block;color:var(--mut);font-size:13px}
.gcard.soon{opacity:.6}

.bar{display:block;height:7px;border-radius:99px;background:#E3EDF3;overflow:hidden;margin:6px 0 2px}
.bar i{display:block;height:100%;background:var(--blue)}
.bar.ok i{background:var(--green)}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--mut);font-weight:600}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tscroll{overflow-x:auto}

label{display:block;font-size:13px;font-weight:600;margin:0 0 4px}
input,select,textarea{width:100%;font:inherit;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
.field{margin:0 0 13px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>.field{flex:1 1 180px}

.btn{display:inline-block;font:inherit;font-weight:600;padding:9px 16px;border-radius:8px;
  border:1px solid var(--blue);background:var(--blue);color:#fff;cursor:pointer;text-align:center}
.btn:hover{background:var(--blue-d);border-color:var(--blue-d);text-decoration:none;color:#fff}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue-d);background:#fff}
.btn.danger{background:#fff;color:var(--red);border-color:#EFC7BF}
.btn.sm{padding:5px 10px;font-size:13px;font-weight:500}
.btn[disabled]{opacity:.5;cursor:default}

.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 7px;border-radius:99px;background:var(--soft);color:var(--mut);border:1px solid var(--line)}
.tag.blue{background:#E4F3FB;color:var(--blue-d);border-color:#C4E4F5}
.tag.green{background:#E4F4EC;color:#268054;border-color:#C2E6D5}
.tag.yellow{background:#FDF1DC;color:#9A6A0F;border-color:#F6DFB4}
.tag.red{background:#FBE9E5;color:#A8402C;border-color:#F0CCC4}

.note{padding:11px 13px;border-radius:8px;border:1px solid var(--line);background:var(--soft);
  font-size:14px;margin:0 0 14px}
.note.bad{background:#FBE9E5;border-color:#F0CCC4;color:#8E3626}
.note.good{background:#E4F4EC;border-color:#C2E6D5;color:#226B47}
.note.warn{background:#FDF1DC;border-color:#F6DFB4;color:#875D0D}

.crumbs{font-size:13px;color:var(--mut);margin:0 0 12px}
.crumbs a{color:var(--mut)}
.head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.head .grow{min-width:180px}
.empty{text-align:center;color:var(--mut);padding:26px 10px}

.foot{max-width:1120px;margin:0 auto;padding:0 16px 30px;color:var(--mut);font-size:12px}

/* Activity player */
.choice{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;margin:0 0 9px;cursor:pointer;background:#fff;font-weight:500}
.choice:hover{border-color:var(--blue)}
.choice input{width:auto;margin:0;flex:0 0 auto}
.choice span{flex:1}
.htoks{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px;line-height:2.2}
.htok{font:inherit;font-size:16px;padding:6px 11px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);cursor:pointer}
.htok:hover{border-color:var(--blue)}
.htok.on{background:var(--blue);color:#fff;border-color:var(--blue)}
/* ---------- Interactive book-page exercise ---------- */
/* A short instruction chip above the page, purpose-labelled so the child knows
   exactly what to do (tap, sort). */
.exq-instr{display:flex;gap:10px;align-items:center;background:#EAF6FC;border:1px solid #C4E4F5;
  border-radius:12px;padding:10px 14px;margin:0 0 12px;color:var(--ink)}
.exq-instr .ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:16px;font-weight:700}
.exq-instr .tx{font-weight:600;font-size:15px;line-height:1.35}
.exq-instr .tx small{display:block;font-weight:500;color:var(--mut);font-size:12.5px;margin-top:1px}

.hotwrap{position:relative;display:block;width:100%;max-width:560px;margin:0 auto;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--sh)}
.hotwrap img{display:block;width:100%;height:auto}
.hotwrap.locked .hotzone{pointer-events:none}

/* One tappable target over a word, phrase, or box. Idle state shows a faint
   dashed ring so the child can see where to tap without hiding the print. */
.hotzone{position:absolute;margin:0;padding:0;cursor:pointer;border:0;background:transparent;border-radius:9px;
  outline:2px dashed rgba(42,169,223,.4);outline-offset:-2px;
  transition:background .12s ease,outline-color .12s ease,box-shadow .12s ease;-webkit-tap-highlight-color:transparent}
.hotzone:hover{background:rgba(42,169,223,.12);outline-color:rgba(42,169,223,.75)}
.hotzone .pick{position:absolute;top:-10px;right:-10px;width:22px;height:22px;border-radius:50%;
  display:none;place-items:center;color:#fff;font-size:13px;font-weight:700;box-shadow:0 1px 4px rgba(18,59,84,.3)}
/* chosen by the child: reads like a drawn ring, with a tick */
.hotzone.on{background:rgba(42,169,223,.16);outline:3px solid var(--blue);box-shadow:0 0 0 3px rgba(42,169,223,.18)}
.hotzone.on .pick{display:grid;background:var(--blue)}
.hotzone.on .pick::before{content:"\2713"}
/* revealed after Check */
.hotzone.ok{background:rgba(55,167,111,.20);outline:3px solid var(--green);box-shadow:0 0 0 3px rgba(55,167,111,.16)}
.hotzone.ok .pick{display:grid;background:var(--green)}
.hotzone.ok .pick::before{content:"\2713"}
.hotzone.bad{background:rgba(213,86,63,.15);outline:3px solid var(--red)}
.hotzone.bad .pick{display:grid;background:var(--red)}
.hotzone.bad .pick::before{content:"\2715"}
.hotzone.miss{outline:3px dashed var(--green);background:rgba(55,167,111,.07)}
.hotzone.miss .pick{display:grid;background:var(--green);width:20px;height:20px;font-size:11px}
.hotzone.miss .pick::before{content:"\2713"}

/* toolbar under the page: live count, clear, and a legend on reveal */
.exq-tools{display:flex;align-items:center;gap:10px 14px;margin:14px 0 2px;flex-wrap:wrap}
.exq-count{font-size:13px;color:var(--mut);font-weight:600;margin-left:auto}
.exq-count b{color:var(--ink);font-variant-numeric:tabular-nums}
.exq-legend{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0 0;font-size:12.5px;color:var(--mut)}
.exq-legend span{display:inline-flex;align-items:center;gap:6px}
.exq-legend i{width:14px;height:14px;border-radius:4px;display:inline-block}
.exq-legend i.k-ok{background:rgba(55,167,111,.25);border:2px solid var(--green)}
.exq-legend i.k-bad{background:rgba(213,86,63,.18);border:2px solid var(--red)}
.exq-legend i.k-miss{border:2px dashed var(--green)}
/* Hotspot authoring editor */
.hsedit{position:relative;display:inline-block;max-width:560px;border:1px solid var(--line);border-radius:8px;overflow:hidden;user-select:none;margin-top:8px}
.hsedit img{display:block;width:100%;height:auto;pointer-events:none}
.hslayer{position:absolute;inset:0;cursor:crosshair}
.hz{position:absolute;border:2px solid var(--blue);background:rgba(42,169,223,.14);border-radius:4px;cursor:pointer}
.hz.ok{border-color:var(--green);background:rgba(55,167,111,.28)}
.hz.prev{background:rgba(42,169,223,.20);pointer-events:none}
.hz b{position:absolute;top:0;left:0;background:var(--blue);color:#fff;font-size:11px;padding:0 4px;border-bottom-right-radius:4px}
.hz.ok b{background:var(--green)}
.hz.tg{border-color:var(--yellow);background:rgba(249,178,51,.12)}
.hz.tg b{background:var(--yellow);color:#5a3d00}
/* Drag/tap sort: word cards on the page move into labelled boxes. */
.hotwrap.sorting .sztarget{transition:background .12s,box-shadow .12s}
.szitem{position:absolute;margin:0;padding:0;border:2px dashed rgba(42,169,223,.7);background:rgba(255,255,255,.55);
  border-radius:8px;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;
  transition:background .12s,border-color .12s,box-shadow .12s}
.szitem:hover{background:rgba(42,169,223,.14)}
.szitem.sel{border-style:solid;border-color:var(--yellow);background:rgba(249,178,51,.24);box-shadow:0 0 0 3px rgba(249,178,51,.3)}
.szitem.placed{border-style:solid;border-color:var(--blue);background:rgba(42,169,223,.12)}
/* small round tag showing which box the card was put in */
/* the small round tag sits ABOVE the word card, in the gap between rows,
   never on top of the word */
.szitem .szbadge{position:absolute;top:auto;bottom:calc(100% + 2px);left:0;right:auto;
  min-width:18px;height:18px;line-height:18px;text-align:center;
  padding:0 4px;background:var(--blue);color:#fff;border-radius:10px;font-size:11px;font-weight:700;box-shadow:0 1px 3px rgba(18,59,84,.3)}
.szitem .szbadge:empty{display:none}
.szitem.ok{border-color:var(--green);background:rgba(55,167,111,.16)}
.szitem.ok .szbadge{background:var(--green)}
.szitem.bad{border-color:var(--red);background:rgba(213,86,63,.14)}
.szitem.bad .szbadge{background:var(--red)}
/* the destination boxes */
.sztarget{position:absolute;border:2px solid rgba(249,178,51,.7);background:rgba(249,178,51,.06);border-radius:10px;cursor:pointer}
.sztarget.ready{background:rgba(249,178,51,.16);box-shadow:0 0 0 3px rgba(249,178,51,.28)}
/* the box number sits ABOVE the box, in the gap between rows, so it never
   covers the words inside */
.sztarget>b{position:absolute;top:auto;bottom:calc(100% + 2px);left:0;background:var(--yellow);color:#5a3d00;font-size:11px;font-weight:700;padding:1px 7px;border-radius:6px;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.szghost{position:fixed;transform:translate(-50%,-50%);z-index:200;min-width:30px;height:30px;line-height:30px;text-align:center;background:var(--blue);color:#fff;border-radius:50%;font-weight:700;pointer-events:none;box-shadow:0 4px 12px rgba(18,59,84,.3)}

/* Matching: a line joins each item on the left to its pair on the right. */
.szlines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.szline{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;
  pointer-events:stroke;cursor:pointer;opacity:.92}
.szline.ok{stroke:var(--green)}
.szline.bad{stroke:var(--red)}
.szitem.line{border:2px solid rgba(42,169,223,.55);background:rgba(42,169,223,.05)}
.szitem.line.sel{border-color:var(--yellow);background:rgba(249,178,51,.22);box-shadow:0 0 0 3px rgba(249,178,51,.3)}
.szitem.line.ok{border-color:var(--green);background:rgba(55,167,111,.12)}
.szitem.line.bad{border-color:var(--red);background:rgba(213,86,63,.12)}
.sztarget.line{border-style:solid}

/* Sorting: each placed word shows as a little picture chip inside its box. */
.sztarget.box{display:flex;flex-wrap:wrap;align-content:flex-end;gap:3px;padding:6px;overflow:hidden}
.szchips{display:flex;flex-wrap:wrap;align-content:flex-end;justify-content:center;gap:3px 4px;width:100%;height:100%;overflow:hidden}
.szchip{display:inline-block;flex:0 0 auto;border-radius:4px;border:2px solid var(--blue);
  background-repeat:no-repeat;background-color:#fff;box-shadow:0 1px 2px rgba(18,59,84,.15)}
.szchip.ok{border-color:var(--green)}
.szchip.bad{border-color:var(--red)}

/* Typed-answer reveal: show the answer letter/word clearly. */
.fillreveal{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0}
.fillbox{min-width:150px;border:2px solid var(--line);border-radius:10px;padding:8px 12px;background:#fff}
.fillbox .fl{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--mut)}
.fillbox b{font-size:20px;color:var(--ink)}
.fillbox.ok{border-color:var(--green);background:rgba(55,167,111,.08)}
.fillbox.bad{border-color:var(--red);background:rgba(213,86,63,.08)}
.fillbox.miss{border-style:dashed;border-color:var(--green)}
.fillbox.miss b{color:var(--green)}

@media (max-width:640px){
  /* Full height covers turn the shelf into a very long scroll on a phone, so
     each book becomes a row with a small cover instead. */
  .gcard{display:flex;align-items:center;gap:12px;padding:10px}
  .gcard .cover{width:56px;flex:0 0 auto;border:1px solid var(--line);border-radius:4px;
    background-size:cover}
  .gcard .body{padding:0;flex:1;min-width:0}
  .wrap{padding:14px 12px 44px}
  .top .in{padding:8px 12px;gap:10px}
  .nav a{padding:5px 9px;font-size:13px}
  h1{font-size:20px}
  .who{display:none}
  .card{padding:13px}
  th,td{padding:7px 8px}
}