/* XVH platform UI: layout, forms, tables, dashboards (loaded after style.css) */
.page { max-width: 1120px; margin: 0 auto; padding: 24px 16px 56px; }
.page-narrow { max-width: 560px; }
.page-mid { max-width: 820px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.page-head h1 { font-size: clamp(28px, 4.5vw, 40px); margin: 0; }
.page-head p { margin: 4px 0 0; color: var(--ink-soft); }
.crumb { display: inline-block; margin-bottom: 6px; font-weight: 800; font-size: 14px; color: var(--ink-soft); text-decoration: none; }
.crumb:hover { color: var(--ink); }
.section { margin-top: 28px; }
.section > h2, .box > h2 { font-size: 24px; margin-bottom: 12px; }
.box { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.box + .box { margin-top: 18px; }
.box h3 { font-size: 19px; }
.cols { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.cols-3 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
.cols > .box + .box, .cols-3 > .box + .box, .main-side > .box + .box { margin-top: 0; }
.main-side { display: grid; gap: 18px; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: start; }
@media (max-width: 860px) { .main-side { grid-template-columns: minmax(0, 1fr); } }
.main-side > *, .cols > *, .cols-3 > *, .stat-row > * { min-width: 0; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.small { font-size: 14px; }
.tiny { font-size: 12px; }
.bold { font-weight: 800; }
.nowrap { white-space: nowrap; }
.mt0 { margin-top: 0; }
.empty-note { color: var(--ink-soft); font-weight: 700; text-align: center; padding: 18px 8px; }

/* nav */
.site-nav { overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { white-space: nowrap; }
.site-nav a.is-on { background: var(--ink); color: #fff; }
.user-chip { display: flex; align-items: center; gap: 8px; font-weight: 800; white-space: nowrap; }
.user-chip .avatar-sm { font-size: 22px; }
.coin-pill { display: inline-flex; align-items: center; gap: 4px; background: #FFF4C2; border: 2px solid var(--gold); border-radius: 999px; padding: 2px 10px; font-weight: 800; font-size: 14px; }
.logout-form { margin: 0; }
.link-btn { background: none; border: 0; padding: 6px 8px; font-weight: 800; cursor: pointer; color: var(--ink-soft); text-decoration: underline; }
@media (max-width: 760px) {
  /* Signed in: the longer menu gets its own row. Signed out: the three links sit beside the logo. */
  .site-header.has-user { flex-wrap: wrap; row-gap: 4px; }
  .site-header.has-user .site-nav { order: 3; width: 100%; }
  .user-chip .who { display: none; }
}

@media (max-width: 560px) {
  .site-header { padding: 6px 12px; gap: 8px; }
  .logo-img { height: 40px; }
  .site-header:not(.has-user) .site-nav a { padding: 6px 8px; font-size: 15px; }
}

/* flash + alerts */
.flash { max-width: 1120px; margin: 16px auto 0; padding: 0 16px; }
.alert { border-radius: 14px; padding: 12px 16px; font-weight: 700; border: 2px solid; }
.alert-success { background: #E7F8EC; border-color: #9BD8AE; color: #0D5A27; }
.alert-error { background: #FFEDEA; border-color: #FFB4A8; color: #8A2318; }
.alert-info { background: #E6F5FD; border-color: #9ED6F2; color: #0D4A6B; }

/* forms */
.form { display: grid; gap: 14px; }
.form .field { font-size: 15px; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=date],
.field input[type=search], .field select, .field textarea, .input {
  font: inherit; font-weight: 600; width: 100%;
  padding: 11px 14px; border-radius: 12px; border: 2px solid var(--line); background: #fff; color: var(--ink);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--sky); }
.field .hint { font-weight: 600; color: var(--ink-soft); font-size: 13px; }
.form-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.check-pill { display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--line); border-radius: 999px; padding: 6px 12px; font-weight: 800; cursor: pointer; background: #fff; }
.check-pill:has(input:checked) { border-color: var(--primary); background: var(--primary-tint); }
.check-pill input { accent-color: var(--primary); }
.field-error { color: #8A2318; font-weight: 800; font-size: 14px; margin: 4px 0 6px; }
.field.has-error .check-pill { border-color: #FFB4A8; }
#draft-restore[hidden] { display: none; }
#draft-restore, #form-error { margin-bottom: 16px; }
.btn-danger { background: #fff; color: #B42318; box-shadow: 0 4px 0 #F3C2BC; }
.btn-block { width: 100%; }
.inline-form { display: inline; margin: 0; }

/* auth */
.auth-card { max-width: 480px; margin: 32px auto; }
.tabs { display: flex; gap: 6px; background: #E6EEF9; padding: 6px; border-radius: 999px; margin-bottom: 18px; overflow-x: auto; }
.tabs a, .tabs button { flex: 1; text-align: center; white-space: nowrap; border: 0; background: none; cursor: pointer; padding: 9px 14px; border-radius: 999px; font-weight: 800; text-decoration: none; }
.tabs .is-on { background: #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .08); }
.choice-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.choice { display: block; text-decoration: none; background: #fff; border: 3px solid var(--line); border-radius: 20px; padding: 22px; transition: transform .15s; }
.choice:hover { transform: translateY(-3px); border-color: var(--primary); }
.choice .big-icon { font-size: 48px; }
.choice strong { display: block; font-family: var(--font-head); font-size: 22px; }
.choice span { color: var(--ink-soft); }
.avatar-pick { display: flex; gap: 10px; flex-wrap: wrap; }
.avatar-pick label { cursor: pointer; position: relative; }
.avatar-pick input { position: absolute; opacity: 0; pointer-events: none; }
.avatar-pick span { display: grid; place-items: center; width: 60px; height: 60px; font-size: 34px; border-radius: 50%; border: 3px solid var(--line); background: #fff; }
.avatar-pick input:checked + span { border-color: var(--primary); background: var(--primary-tint); transform: scale(1.08); }
.avatar-pick input:focus-visible + span { outline: 3px solid var(--sky); outline-offset: 2px; }
.pupil-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.pupil-tile { display: grid; justify-items: center; gap: 6px; padding: 16px 8px; background: #fff; border: 3px solid var(--line); border-radius: 18px; cursor: pointer; font-weight: 800; text-align: center; }
.pupil-tile .avatar-lg { font-size: 44px; line-height: 1; }
.pupil-tile.is-on { border-color: var(--primary); background: var(--primary-tint); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px; justify-content: center; margin: 16px 0; }
.pin-pad button { height: 64px; border-radius: 18px; border: 2px solid var(--line); background: #fff; font-family: var(--font-head); font-size: 28px; font-weight: 800; cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, .08); }
.pin-pad button:active { transform: translateY(2px); }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin-top: 8px; }
.pin-dots span { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--ink-soft); }
.pin-dots span.on { background: var(--primary); border-color: var(--primary); }
.code-input { font-family: var(--font-head) !important; font-size: 30px !important; letter-spacing: 6px; text-align: center; text-transform: uppercase; }

/* tables */
.table-wrap { overflow-x: auto; border-radius: 14px; border: 2px solid var(--line); background: #fff; }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #E4ECF7; vertical-align: middle; }
.table th { background: #F2F6FC; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; }
.table a { font-weight: 800; }
.table .center { text-align: center; }
.cell-done { background: #E7F8EC; font-weight: 800; }
.cell-low { background: #FFEDEA; font-weight: 800; }
.cell-open { color: var(--ink-soft); }

/* status pills */
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #E4ECF7; white-space: nowrap; }
.pill-green { background: #D9F4E1; color: #0D5A27; }
.pill-gold { background: #FFF1B8; color: #6B5300; }
.pill-red { background: #FFDCD6; color: #8A2318; }
.pill-blue { background: #D7EFFC; color: #0D4A6B; }

/* stats */
.stat-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.stat .n { font-family: var(--font-head); font-size: 34px; font-weight: 800; line-height: 1.1; }
.stat .l { color: var(--ink-soft); font-weight: 800; font-size: 14px; }
.bar { height: 14px; background: #E4ECF7; border-radius: 999px; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent, var(--primary)); }
.bar-row { display: grid; grid-template-columns: 140px 1fr 48px; gap: 10px; align-items: center; font-weight: 800; font-size: 15px; }
.bar-row + .bar-row { margin-top: 10px; }
.bar-row .pct { text-align: right; }
@media (max-width: 480px) { .bar-row { grid-template-columns: 100px 1fr 40px; font-size: 13px; } }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 70px; }
.spark span { flex: 1; background: var(--sky); border-radius: 4px 4px 0 0; min-height: 3px; }
.spark span.zero { background: #E4ECF7; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--line); }
.list li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .icon { font-size: 26px; width: 36px; text-align: center; flex: none; }
.list a { text-decoration: none; }
.list a:hover { text-decoration: underline; }

/* pupil home */
.hello { border-radius: 24px; padding: 22px; display: flex; flex-wrap: wrap; gap: 18px; align-items: center; color: var(--ink); box-shadow: var(--shadow); }
.hello .me-avatar { width: 96px; height: 96px; border-radius: 50%; background: rgba(255, 255, 255, .75); display: grid; place-items: center; font-size: 60px; flex: none; }
.hello h1 { font-size: clamp(28px, 5vw, 40px); margin: 0; }
.hello .level-box { flex: 1; min-width: 220px; background: rgba(255, 255, 255, .85); border-radius: 18px; padding: 12px 16px; }
.hello .level-box .bar { margin: 6px 0; }
.me-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.me-stats span { background: rgba(255, 255, 255, .88); border-radius: 999px; padding: 6px 14px; font-weight: 800; }
.task-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 3px solid var(--line); text-decoration: none; }
.task-card:hover { border-color: var(--primary); }
.task-card + .task-card { margin-top: 10px; }
.task-card .icon { font-size: 34px; }
.task-card .due { margin-left: auto; text-align: right; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
.task-card .due.late { color: #B42318; }
.shout { background: linear-gradient(135deg, #FFF6D6, #FFE9A8); border-radius: 18px; padding: 14px 16px; font-weight: 700; }
.shout + .shout { margin-top: 10px; }
.board li .rank { width: 28px; font-family: var(--font-head); font-weight: 800; font-size: 20px; text-align: center; }
.board li.me { background: var(--primary-tint); border-radius: 12px; padding-left: 8px; }

/* badges + shop */
.badge-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.badge { text-align: center; background: #fff; border-radius: 18px; padding: 16px 10px; border: 3px solid var(--line); }
.badge .b-icon { font-size: 44px; line-height: 1; display: block; margin-bottom: 6px; }
.badge strong { display: block; font-family: var(--font-head); font-size: 18px; }
.badge span { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 700; }
.badge.locked { opacity: .5; filter: grayscale(1); }
.badge.got { border-color: var(--gold); background: #FFFBEA; }
.shop-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.shop-item { text-align: center; background: #fff; border-radius: 18px; padding: 14px 10px; border: 3px solid var(--line); display: grid; gap: 6px; justify-items: center; }
.shop-item .s-icon { font-size: 46px; line-height: 1; }
.shop-item .swatch { width: 64px; height: 46px; border-radius: 12px; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.shop-item.equipped { border-color: var(--primary); background: var(--primary-tint); }
.shop-item form { margin: 0; }

/* teacher */
.class-card { display: block; text-decoration: none; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; border-top: 8px solid var(--primary); transition: transform .15s; }
.class-card:hover { transform: translateY(-2px); }
.class-card h3 { margin: 0 0 4px; font-size: 22px; }
.code-tag { font-family: var(--font-head); font-weight: 800; letter-spacing: 3px; background: var(--gold); padding: 2px 10px; border-radius: 8px; white-space: nowrap; }
.ctabs { display: flex; gap: 4px; border-bottom: 3px solid var(--line); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.ctabs::-webkit-scrollbar { display: none; }
.ctabs a { padding: 10px 16px; font-weight: 800; text-decoration: none; border-radius: 12px 12px 0 0; white-space: nowrap; color: var(--ink-soft); }
.ctabs a.is-on { background: #fff; color: var(--ink); box-shadow: 0 -3px 0 var(--primary) inset; }
.login-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.login-card { border: 2px dashed #999; border-radius: 14px; padding: 14px; background: #fff; break-inside: avoid; }
.login-card .lc-head { display: flex; align-items: center; gap: 10px; }
.login-card .lc-head > span { font-size: 34px; }
.login-card dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 10px 0 0; font-size: 15px; }
.login-card dt { color: #666; font-weight: 700; }
.login-card dd { margin: 0; font-weight: 800; font-family: ui-monospace, 'Courier New', monospace; }
@media print {
  .site-header, .flag-strip, .site-footer, .no-print, .flash { display: none !important; }
  body { background: #fff; }
  .page { padding: 0; max-width: none; }
  .login-cards { grid-template-columns: repeat(3, 1fr); }
}

/* activity builder */
.builder-item { border: 2px solid var(--line); border-radius: 16px; padding: 14px; background: #F8FBFF; }
.builder-item + .builder-item { margin-top: 12px; }
.builder-item .row-between { margin-bottom: 8px; }
.opt-line { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; }
.opt-line + .opt-line { margin-top: 6px; }
.opt-line input[type=radio] { width: 20px; height: 20px; accent-color: var(--primary); }

/* player */
.play-bar { max-width: 820px; margin: 16px auto 0; padding: 0 16px; }
.reward-box { margin-top: 18px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #FFF6D6, #FFE9A8); text-align: center; }
.reward-box .gains { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.reward-box .gains span { background: #fff; border-radius: 999px; padding: 6px 14px; font-weight: 800; }
.reward-box .new-badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border-radius: 14px; padding: 8px 12px; margin: 4px; font-weight: 800; }
.reward-box .new-badge span { font-size: 28px; }

/* spelling + online worksheets */
.spell-input { font-family: var(--font-head) !important; font-size: 32px !important; text-align: center; letter-spacing: 3px; max-width: 420px; margin: 0 auto; display: block; }
.answer-input { width: 110px; font: inherit; font-family: ui-monospace, 'Courier New', monospace; font-size: 18px; padding: 4px 6px; border: 2px solid var(--line); border-radius: 8px; text-align: right; margin-top: 4px; }
.answer-input.ok { border-color: var(--primary); background: #E7F8EC; }
.answer-input.no { border-color: var(--coral); background: #FFEDEA; }
.prob .fix { display: block; font-size: 13px; color: #B42318; font-weight: 800; font-family: var(--font-body); }

/* landing */
.feature-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feature { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.feature .big-icon { font-size: 44px; }
.feature h3 { font-size: 22px; }
.feature ul { margin: 8px 0 0; padding-left: 20px; color: var(--ink-soft); font-weight: 600; }
.cta-band { background: var(--ink); color: #fff; border-radius: 24px; padding: 28px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.cta-band h2 { margin: 0; color: var(--gold); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
.chip-new.is-on { background: var(--brand-green); border-color: var(--brand-green); }
.tag-new { background: #FFF1B8 !important; }
.sort-pick { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; }
.sort-pick select { width: auto; padding: 8px 10px; }
.pager { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 24px; }
/* Quiz picture questions */
.q-visual { display: flex; justify-content: center; margin: 4px 0 14px; }
.q-visual svg { max-width: 100%; height: auto; }
.q-count { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 420px; font-size: 40px; line-height: 1; }
.q-count span { animation: pop-in .3s ease-out backwards; }
@keyframes pop-in { from { transform: scale(0); } }
/* Daily challenge card */
.challenge { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; text-decoration: none;
  background: linear-gradient(135deg, #FFD43B, var(--gold)); box-shadow: 0 5px 0 var(--gold-dark); }
.challenge:hover { transform: translateY(-2px); }
.challenge .icon { font-size: 44px; animation: bob 3s ease-in-out infinite; }
.challenge .grow { flex: 1; min-width: 180px; }
.challenge.done { background: linear-gradient(135deg, #CFF5DA, #9BE3B2); box-shadow: 0 5px 0 #6CC48A; }
/* Certificates */
.certificate { max-width: 900px; margin: 0 auto; background: #fff; border: 14px solid var(--gold); outline: 4px solid var(--primary); outline-offset: -26px;
  border-radius: 12px; padding: 60px 48px; text-align: center; color: var(--ink); }
.certificate h1 { font-size: clamp(34px, 6vw, 56px); color: var(--primary); margin: 8px 0; }
.certificate .cert-name { font-family: var(--font-head); font-size: clamp(32px, 6vw, 52px); border-bottom: 3px solid var(--ink); display: inline-block; padding: 0 24px; margin: 10px 0; }
.certificate .cert-badge { font-size: 90px; line-height: 1; }
.cert-foot { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; font-weight: 700; }
.cert-foot span { border-top: 2px solid var(--ink); padding-top: 6px; min-width: 180px; }
@media print { .certificate { border-width: 10px; } }

/* Base-ten block legend */
.q-legend { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin: -6px 0 12px; font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.q-legend .lg { display: inline-block; border: 1px solid var(--ink); margin-left: 8px; }
.q-legend .lg-h { width: 18px; height: 18px; background: #29A9E1; }
.q-legend .lg-t { width: 6px; height: 18px; background: #3DBE6B; }
.q-legend .lg-o { width: 6px; height: 6px; background: #FED100; }

/* Brand touches */
.page-head h1, .section > h2, .box > h2 { color: var(--navy); }
.page-head h1::after { content: ''; display: block; width: 56px; height: 5px; margin-top: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--cyan), var(--brand-green)); }
.btn-primary:hover { background: var(--primary-dark); }
.site-nav a.is-on { background: var(--primary); }
.code-tag { background: var(--gold); color: var(--navy); }
.coin-pill { background: #FFF6D1; border-color: var(--gold); }

/* Mock exams */
.exam-sections { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.exam { display: grid; gap: 14px; }
.exam-top { position: sticky; top: 92px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.exam-timer { font-family: var(--font-head); font-weight: 800; font-size: 26px; color: var(--navy); }
.exam-timer.low { color: #C8372A; animation: pulse 1s ease-in-out infinite; }
.exam-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; align-items: start; }
@media (max-width: 760px) { .exam-body { grid-template-columns: minmax(0, 1fr); } .exam-top { top: 120px; } }
.exam-nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.exam-palette { position: sticky; top: 170px; }
.palette-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pal { height: 34px; border-radius: 8px; border: 2px solid var(--line); background: #fff; font-weight: 800; cursor: pointer; font-size: 13px; }
.pal.done { background: var(--primary-tint); border-color: var(--primary); }
.pal.flag { background: #FFF1B8; border-color: var(--gold-dark); }
.pal.cur { outline: 3px solid var(--navy); outline-offset: 1px; }
.palette-key { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 10px; color: var(--ink-soft); }
.palette-key .pal { width: 14px; height: 14px; display: inline-block; cursor: default; margin-left: 6px; }
.passage-box { margin-bottom: 14px; }
.passage-box summary { cursor: pointer; font-weight: 800; color: var(--primary); margin-bottom: 8px; }
@keyframes pulse { 50% { opacity: .55; } }

/* My Practice */
.practice-card { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--cyan)); box-shadow: 0 5px 0 var(--primary-dark); }
.practice-card:hover { transform: translateY(-2px); }
.practice-card .icon { font-size: 44px; animation: bob 3s ease-in-out infinite; }
.practice-card .grow { flex: 1; min-width: 180px; }
.practice-card .btn { background: #fff; color: var(--primary); box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.subject-pick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; }
.skill-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--primary-tint); font-weight: 800; font-size: 14px; }
.level-up { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 999px; background: #FFF1B8; font-weight: 800; animation: pop-in .35s ease-out; }

/* Phonics */
.ph-prompt { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ph-replay { width: 56px; height: 56px; font-size: 26px; background: var(--primary-tint); border-color: var(--primary); }
.ph-target { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 14px; }
.ph-big { font-size: 96px; line-height: 1; background: none; border: 0; cursor: pointer; padding: 6px; border-radius: 24px; transition: transform .15s; }
.ph-big:hover { transform: scale(1.06); }
.ph-word { font-family: var(--font-head); font-size: 40px; font-weight: 800; letter-spacing: 6px; color: var(--navy); }
.ph-options { display: grid; gap: 14px; margin-top: 8px; }
.ph-options.pics { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.ph-options.words { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.ph-opt-wrap { position: relative; }
.ph-opt { width: 100%; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 4px solid var(--line);
  background: #fff; border-radius: 22px; cursor: pointer; transition: transform .1s; box-shadow: 0 4px 0 rgba(12, 33, 82, .08); }
.ph-opt:hover:not(:disabled) { border-color: var(--primary); transform: translateY(-2px); }
.ph-opt.right { border-color: var(--success); background: #E7F8EC; }
.ph-opt.wrong { border-color: var(--coral); background: #FFEDEA; }
.ph-emoji { font-size: 64px; line-height: 1; }
.ph-text { font-family: var(--font-head); font-size: 42px; font-weight: 800; color: var(--navy); }
.ph-label { font-weight: 800; font-size: 18px; color: var(--ink-soft); }
.ph-say { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); background: #fff; cursor: pointer; font-size: 16px; }
.ph-letters, .ph-tiles, .ph-slots { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 16px; }
.ph-tile { min-width: 64px; height: 72px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 16px; font-family: var(--font-head); font-size: 40px; font-weight: 800;
  background: var(--gold); color: var(--navy); border: 0; box-shadow: 0 5px 0 var(--gold-dark); }
.ph-tile.tap { cursor: pointer; }
.ph-tile.tap:disabled { opacity: .3; cursor: default; }
.ph-slot { width: 60px; height: 72px; border-bottom: 5px solid var(--navy); display: inline-grid; place-items: center; font-family: var(--font-head); font-size: 40px; font-weight: 800; color: var(--primary); }
.ph-slot.filled { animation: pop-in .2s ease-out; }
.ph-answer { font-family: var(--font-head); font-size: 28px; color: var(--navy); margin-left: 6px; }
/* ABC Explorer */
.abc-card { min-height: 220px; display: grid; place-items: center; margin: 12px 0; }
.abc-letter { font-family: var(--font-head); font-size: 64px; font-weight: 800; color: var(--primary); line-height: 1; }
.abc-emoji { font-size: 100px; line-height: 1.1; background: none; border: 0; cursor: pointer; animation: pop-in .3s ease-out; }
.abc-word { font-family: var(--font-head); font-size: 40px; color: var(--navy); }
.abc-word b { color: var(--primary); }
.abc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; margin-top: 10px; }
.abc-key { height: 56px; border-radius: 14px; border: 3px solid var(--line); background: #fff; font-family: var(--font-head); font-size: 26px; font-weight: 800; cursor: pointer; color: var(--navy); }
.abc-key.seen { background: var(--primary-tint); border-color: var(--primary); }
.abc-key.cur { background: var(--gold); border-color: var(--gold-dark); }
@media (max-width: 520px) { .ph-big { font-size: 76px; } .ph-opt { min-height: 100px; } .ph-emoji { font-size: 52px; } .ph-tile { min-width: 54px; height: 62px; font-size: 32px; } .ph-slot { width: 48px; height: 62px; font-size: 32px; } }

/* Abacus */
.abacus { display: flex; flex-direction: column; align-items: center; margin: 8px 0 14px; }
.abacus-frame { position: relative; display: flex; gap: 22px; padding: 14px 26px; border-radius: 18px;
  background: linear-gradient(180deg, #F4E2C4, #EAD0A6); border: 12px solid #8B5A2B; box-shadow: inset 0 0 0 3px #A86F3A, 0 6px 0 rgba(12, 33, 82, .15); }
.abacus-frame::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 0; }
.rod { position: relative; width: 64px; height: 340px; outline: none; border-radius: 12px; }
.rod:focus-visible { box-shadow: 0 0 0 4px var(--sky); }
.rod-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; margin-left: -3px; border-radius: 3px; background: linear-gradient(90deg, #9AA4B2, #E3E7EE, #9AA4B2); }
.bead { position: absolute; left: 2px; width: 60px; height: 24px; border-radius: 999px; border: 2px solid var(--edge); cursor: pointer; padding: 0;
  background: radial-gradient(ellipse at 40% 30%, #fff 0 10%, var(--bead) 45%, var(--edge) 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2); transition: top .25s ease, bottom .25s ease, transform .1s; }
.bead:hover:not(:disabled) { transform: scale(1.06); }
.bead:not(.up) { filter: saturate(.75) brightness(.97); }
.abacus.locked .bead { cursor: default; }
.abacus-labels { display: flex; gap: 22px; padding: 8px 38px 0; }
.rod-label { width: 64px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--font-head); font-size: 22px; }
.rod-count { min-height: 28px; font-size: 26px; font-weight: 800; color: var(--navy); }
.rod-btns { display: flex; gap: 4px; }
.rod-btn { width: 30px; height: 30px; border-radius: 10px; border: 2px solid var(--line); background: #fff; cursor: pointer; font-size: 12px; color: var(--navy); }
.rod-btn:hover { border-color: var(--primary); }
.abacus-legend { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 6px 0 18px; font-weight: 700; }
.abacus-legend i { display: inline-block; width: 26px; height: 12px; border-radius: 999px; border: 2px solid; margin-right: 6px; vertical-align: middle; }
@media (max-width: 520px) {
  .abacus-frame { gap: 10px; padding: 10px 12px; border-width: 9px; }
  .rod { width: 52px; } .bead { width: 48px; } .abacus-labels { gap: 10px; padding: 8px 21px 0; } .rod-label { width: 52px; }
}

.rod { touch-action: none; }
.bead { transition: top .28s cubic-bezier(.3,1.4,.6,1), transform .05s; }

/* Pupil import */
.bad-text { color: #B0281A; font-weight: 700; }
.import-table tr.imp-skip td, .import-table tr.imp-error td { background: #FFFAF2; }
.import-table tr.imp-error td:nth-child(2) { color: #8A2318; }

/* Report cards: teacher's comment page */
.report-share { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.report-share .grow { flex: 1; min-width: 220px; }
.report-row { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.report-row + .report-row { margin-top: 12px; }
.report-who { display: flex; gap: 10px; align-items: flex-start; }
.report-who .avatar-sm { font-size: 28px; }
.report-inputs { display: flex; gap: 12px; align-items: flex-start; }
.report-inputs .field:first-child { width: 170px; flex: none; }
.report-inputs .grow { flex: 1; }
.report-save { position: sticky; bottom: 0; padding: 14px 0; text-align: center; background: linear-gradient(transparent, var(--bg, #F5F9FF) 40%); }
@media (max-width: 760px) {
  .report-row { grid-template-columns: 1fr; }
  .report-inputs { flex-direction: column; }
  .report-inputs .field:first-child { width: 100%; }
}

/* Report cards: the printable card */
.report-card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 32px; margin: 0 auto 28px; max-width: 820px; color: #1B2333; }
.rc-head { display: flex; gap: 16px; align-items: center; border-bottom: 4px solid var(--primary); padding-bottom: 12px; }
.rc-head img { height: 56px; width: auto; }
.rc-head h2 { font-size: 24px; margin: 2px 0; color: var(--navy); }
.rc-school { font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; }
.rc-k { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.rc-pupil { display: grid; grid-template-columns: 2fr 1fr 1.4fr 1.6fr; gap: 12px; margin: 16px 0; }
.rc-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; }
.rc-stats div { background: #F2F6FC; border-radius: 10px; padding: 8px 6px; text-align: center; }
.rc-stats b { display: block; font-size: 20px; color: var(--navy); }
.rc-stats span { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.rc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rc-table th, .rc-table td { padding: 8px 10px; border-bottom: 1px solid #DDE6F2; text-align: left; }
.rc-table th { background: var(--navy); color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.rc-table .num { text-align: right; }
.rc-band { display: inline-block; padding: 2px 10px; border-radius: 999px; font-weight: 800; font-size: 12px; white-space: nowrap; }
.rc-ex { background: #D9F4E1; color: #0D5A27; } .rc-vg { background: #DDF0FD; color: #0B4F86; } .rc-gd { background: #FFF1B8; color: #6B5300; }
.rc-dv { background: #FFE4CC; color: #7A3A00; } .rc-ns { background: #FFDCD6; color: #8A2318; } .rc-none { background: #EEF1F5; color: #5B6577; }
.rc-key { margin: 6px 0 14px; }
.rc-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; }
.rc-cols h3 { font-size: 15px; margin: 0 0 4px; color: var(--navy); }
.rc-cols ul { margin: 0; padding-left: 18px; font-size: 14px; }
.rc-cols p { margin: 0; font-size: 14px; }
.rc-comment { display: flex; gap: 20px; margin-top: 16px; padding: 12px 14px; border: 2px solid #DDE6F2; border-radius: 12px; }
.rc-comment .grow { flex: 1; }
.rc-comment p { margin: 2px 0 0; white-space: pre-line; }
.rc-effort { min-width: 130px; }
.rc-sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 34px; }
.rc-sign div { border-top: 1.5px solid #1B2333; padding-top: 4px; font-size: 12px; color: var(--ink-soft); }
@media (max-width: 640px) {
  .report-card { padding: 18px 14px; }
  .rc-pupil { grid-template-columns: 1fr 1fr; }
  .rc-stats { grid-template-columns: repeat(3, 1fr); }
  .rc-table th:nth-child(5), .rc-table td:nth-child(5) { display: none; }
  .rc-table { font-size: 13px; }
  .rc-table th, .rc-table td { padding: 7px 6px; }
  .rc-band { white-space: normal; text-align: center; }
  .rc-comment { flex-direction: column; gap: 8px; }
}
@media print {
  @page { size: A4; margin: 12mm; }
  .report-page { padding: 0; }
  .report-card { box-shadow: none; border-radius: 0; padding: 0; margin: 0; max-width: none; break-after: page; }
  .report-card:last-child { break-after: auto; }
  .rc-table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rc-stats div, .rc-band { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Term dates */
.term-row { border: 2px solid #E4ECF7; border-radius: 12px; padding: 10px 14px 14px; margin: 0 0 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.term-row legend { font-weight: 800; padding: 0 6px; }
.tips { padding-left: 18px; margin: 0; }
.tips li + li { margin-top: 6px; }
@media (max-width: 480px) { .term-row { grid-template-columns: 1fr; } }

/* ---------- Drag, sort and fill ---------- */
.ia-area { margin: 8px 0 4px; user-select: none; -webkit-user-select: none; }
.ia-card { font: inherit; font-weight: 800; font-size: 17px; padding: 10px 14px; border-radius: 12px; border: 2px solid #CFDCEE; background: #fff;
  box-shadow: 0 3px 0 #CFDCEE; cursor: grab; touch-action: none; color: var(--ink); transition: transform .12s, background .2s, border-color .2s; }
.ia-card:active { cursor: grabbing; }
.ia-card.is-sel { border-color: var(--primary); background: #E6F3FF; transform: translateY(-2px); box-shadow: 0 5px 0 var(--primary); }
.ia-card.is-dragging { opacity: .35; }
.ia-card.ok, .ia-card.locked { border-color: #6FCB86; background: #E7F8EC; box-shadow: 0 3px 0 #6FCB86; cursor: default; }
.ia-card.no { border-color: #F08C7C; background: #FFEDEA; box-shadow: 0 3px 0 #F08C7C; animation: ia-shake .4s; }
.ia-card.fixed { border-color: #F5B640; background: #FFF6DC; box-shadow: 0 3px 0 #F5B640; }
.ia-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -60%) rotate(-3deg) scale(1.06); box-shadow: 0 10px 24px rgba(12, 33, 82, .25); }
.ia-tray { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 58px; padding: 12px; border: 2px dashed #CFDCEE; border-radius: 16px; background: #F7FAFE; }
.ia-tray.is-empty { border-color: transparent; background: none; min-height: 0; padding: 0; }
.ia-bins { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 12px; margin-top: 14px; }
.ia-bin { border: 3px solid var(--cyan); border-radius: 16px; background: #F1FBFE; min-height: 150px; cursor: pointer; transition: background .2s; }
.ia-bin:nth-child(2) { border-color: var(--brand-green); background: #F2FBF2; }
.ia-bin:nth-child(3) { border-color: var(--gold); background: #FFFBEA; }
.ia-bin:nth-child(4) { border-color: #B57BEA; background: #F8F1FE; }
.ia-bin:hover, .ia-bin:focus-visible { background: #fff; }
.ia-bin-head { font-family: var(--font-head); font-weight: 800; font-size: 17px; text-align: center; padding: 8px 6px; border-bottom: 2px solid rgba(0, 0, 0, .06); }
.ia-bin-cards { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 10px; }
.ia-bin-cards .ia-card { font-size: 15px; padding: 7px 10px; }
.ia-end { text-align: center; font-weight: 800; color: var(--ink-soft); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; margin: 6px 0; }
.ia-order { list-style: none; padding: 0; margin: 0 auto; max-width: 460px; display: grid; gap: 8px; }
.ia-item { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; background: #fff; border: 2px solid #CFDCEE; border-radius: 14px;
  box-shadow: 0 3px 0 #CFDCEE; font-weight: 800; font-size: 18px; touch-action: none; cursor: grab; position: relative; }
.ia-item.is-dragging { z-index: 5; box-shadow: 0 10px 24px rgba(12, 33, 82, .22); border-color: var(--primary); transition: none; }
.ia-item.ok { border-color: #6FCB86; background: #E7F8EC; }
.ia-item.no { border-color: #F08C7C; background: #FFEDEA; }
.ia-item.fixed { border-color: #F5B640; background: #FFF6DC; }
.ia-grip { color: #9AABC6; font-size: 20px; }
.ia-text { flex: 1; }
.ia-step { border: 0; background: #EEF4FC; border-radius: 10px; width: 40px; height: 40px; font-size: 16px; cursor: pointer; color: var(--navy); }
.ia-step:disabled { opacity: .3; cursor: default; }
.ia-line-wrap { padding: 46px 22px 34px; }
.ia-line { position: relative; height: 40px; touch-action: none; cursor: pointer; }
.ia-track { position: absolute; left: -10px; right: -10px; top: 18px; height: 6px; border-radius: 3px; background: var(--navy); }
.ia-tick { position: absolute; top: 12px; width: 3px; height: 18px; margin-left: -1.5px; background: var(--navy); border-radius: 2px; }
.ia-tick.big { top: 6px; height: 30px; }
.ia-tick b { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); font-size: 15px; white-space: nowrap; color: var(--ink); }
.ia-pin { position: absolute; top: -34px; width: 44px; margin-left: -22px; text-align: center; font-size: 34px; line-height: 1; color: var(--primary);
  cursor: grab; transition: left .12s; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); }
.ia-pin.is-dragging { transition: none; transform: scale(1.12); }
.ia-pin:focus-visible { outline: 3px solid var(--sky); border-radius: 8px; }
.ia-answer { color: #2FB34A; top: -34px; pointer-events: none; }
.ia-answer em { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 15px; font-weight: 800; background: #2FB34A; color: #fff; padding: 1px 8px; border-radius: 8px; }
.ia-sentence { font-size: 24px; font-weight: 700; text-align: center; line-height: 1.8; margin: 18px 0; }
.ia-slot { display: inline-block; min-width: 110px; padding: 0 12px; margin: 0 6px; border-bottom: 4px solid var(--primary); color: var(--primary); font-weight: 800; }
.ia-input { font: inherit; font-weight: 800; color: var(--primary); text-align: center; border: 0; border-bottom: 4px solid var(--primary); background: #F2F8FF; border-radius: 8px 8px 0 0; padding: 0 8px; margin: 0 6px; max-width: 70vw; }
.ia-input:focus { outline: none; background: #E2F0FF; }
.ia-slot.good, .ia-input.good { border-color: #2FB34A; color: #1C7D33; }
.ia-slot.bad, .ia-input.bad { border-color: #E5533D; color: #B0281A; animation: ia-shake .4s; }
.ia-slot.fixed, .ia-input.fixed { border-color: #F5B640; color: #7A5600; }
.ia-bank { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ia-chip { font: inherit; font-weight: 800; font-size: 19px; padding: 10px 18px; border-radius: 999px; border: 2px solid #CFDCEE; background: #fff; box-shadow: 0 3px 0 #CFDCEE; cursor: pointer; }
.ia-chip.is-sel { border-color: var(--primary); background: #E6F3FF; box-shadow: 0 3px 0 var(--primary); }
.ia-area.is-done .ia-card, .ia-area.is-done .ia-item, .ia-area.is-done .ia-chip, .ia-area.is-done .ia-line { cursor: default; }
@keyframes ia-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (max-width: 560px) {
  /* Boxes stay side by side (2×2 for four) so every box is on screen while dragging. */
  .ia-bins { gap: 8px; }
  .ia-bins[style*="--n:4"] { grid-template-columns: 1fr 1fr; }
  .ia-bin { min-height: 110px; border-width: 2px; }
  .ia-bin-head { font-size: 14px; padding: 6px 4px; line-height: 1.15; }
  .ia-bin-cards { padding: 6px; gap: 6px; }
  .ia-bin-cards .ia-card { font-size: 13px; padding: 5px 7px; }
  .ia-card { font-size: 15px; padding: 8px 11px; }
  .ia-sentence { font-size: 20px; }
  .ia-line-wrap { padding: 46px 14px 34px; }
  .ia-tick b { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .ia-card.no, .ia-slot.bad, .ia-input.bad { animation: none; } }
.check { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-top: 8px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--primary); }

/* ---------- Principal dashboard ---------- */
.stat .of { font-size: 18px; color: var(--ink-soft); }
.stat .l { margin-top: 2px; }
.delta { display: block; margin-top: 6px; font-size: 12px; font-weight: 800; }
.delta.up { color: #1C7D33; } .delta.down { color: #B0281A; } .delta.same { color: var(--ink-soft); }
.section-tight { margin: 0 0 16px; }
.heat th[scope=row] { white-space: nowrap; }
.heat td { padding: 8px 6px; }
.heat-cell { display: inline-flex; flex-direction: column; align-items: center; min-width: 96px; padding: 6px 8px; border-radius: 10px; }
.heat-cell b { font-size: 18px; line-height: 1.1; }
.heat-cell span { font-size: 11px; font-weight: 800; }
.heat-key { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.week-chart { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; height: 190px; padding: 18px 0 26px; margin: 8px 0 10px; border-bottom: 1px solid #DDE6F2; }
.wk { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; outline: none; cursor: default; }
.wk-bar { width: min(28px, 70%); background: var(--primary); border-radius: 4px 4px 0 0; transition: opacity .15s; }
.wk:hover .wk-bar, .wk:focus .wk-bar { opacity: .75; }
.wk-val { font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.wk-lab { position: absolute; bottom: -22px; font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.wk-tip { position: absolute; top: -6px; transform: translateX(-50%); background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 8px; white-space: nowrap; pointer-events: none; z-index: 2; }
@media (max-width: 560px) {
  .week-chart { gap: 3px; }
  .wk-lab { font-size: 9px; }
  .heat-cell { min-width: 72px; }
}

/* ---------- Lesson packs ---------- */
.pack-topics { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pack-topic { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: #fff; border-radius: 14px; box-shadow: var(--shadow);
  border-left: 6px solid var(--accent, var(--primary)); text-decoration: none; color: var(--ink); transition: transform .12s; }
.pack-topic:hover { transform: translateY(-2px); }
.pack-topic .pt-icon { font-size: 28px; }
.pack-topic b { display: block; }
.pack-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.pack-actions .grow { flex: 1; min-width: 240px; }
.pack-part { margin-top: 18px; }
.part-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.part-head h2 { margin: 0; }
.print-only { display: none; }
.plan-steps { padding-left: 22px; }
.plan-steps > li { margin-bottom: 12px; }
.step-head { display: flex; gap: 10px; align-items: center; }
.plan-steps p { margin: 4px 0; }
.plan-qs { font-size: 15px; }
.plan-qs .ans { display: block; font-size: 13px; color: #1C7D33; font-weight: 700; }
.sheet-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 3px solid var(--navy); padding-bottom: 10px; margin-bottom: 10px; }
.pack-brand { display: flex; gap: 10px; align-items: center; min-width: 0; flex: 1 1 240px; }
.pack-brand > div { min-width: 0; overflow-wrap: anywhere; }
.sheet-lines { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; font-weight: 700; }
.sheet-lines i, .slip-head i { display: inline-block; width: 120px; border-bottom: 1.5px solid #1E2430; height: 1em; }
.sheet-instr { font-weight: 700; }
.pack-qs { list-style: none; padding-left: 0; display: grid; gap: 14px; }
.pq-n { display: inline-block; min-width: 26px; font-weight: 800; }
.pq { break-inside: avoid; }
.pq-text { font-weight: 700; margin-bottom: 4px; }
.pq-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; padding-left: 50px; margin: 0; }
.pq-opts li { padding: 1px 0; }
.pq-opts li.is-answer { font-weight: 800; color: #1C7D33; }
.pack-visual { padding-left: 26px; }
.pack-visual .q-visual { margin: 4px 0; justify-content: flex-start; }
.pack-visual svg { width: 130px; max-width: 100%; height: auto; }
.pack-visual svg[viewBox^="0 0 328"], .pack-visual svg[viewBox*=" 64"] { width: 240px; }
.plan-qs .pack-visual svg { width: 100px; }
.sheet-foot { text-align: right; font-weight: 800; margin-top: 14px; }
.key-table td { vertical-align: top; }
.exit-slips { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.exit-slip { border: 2px dashed #9AABC6; padding: 12px 14px; font-size: 14px; }
.slip-head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.slip-head i { width: 90px; }
.small-qs { gap: 8px; padding-left: 20px; }
.small-qs .pq-opts { grid-template-columns: repeat(4, auto); gap: 2px 14px; padding-left: 44px; }
.small-qs .pack-visual svg { max-width: 120px; }
.slip-feel { margin-top: 8px; font-size: 12px; font-weight: 700; }
@media (max-width: 640px) {
  .exit-slips { grid-template-columns: 1fr; }
  .pq-opts { grid-template-columns: 1fr; }
  .small-qs .pq-opts { grid-template-columns: 1fr 1fr; }
}
@media print {
  @page { size: A4; margin: 12mm; }
  .pack-page { padding: 0; }
  .pack-part { box-shadow: none; border-radius: 0; padding: 0; margin: 0; break-after: page; }
  .pack-part:last-child { break-after: auto; }
  .print-only { display: block; }
  body[data-print-part="plan"] .pack-part:not([data-part="plan"]),
  body[data-print-part="sheet"] .pack-part:not([data-part="sheet"]),
  body[data-print-part="key"] .pack-part:not([data-part="key"]),
  body[data-print-part="exit"] .pack-part:not([data-part="exit"]) { display: none !important; }
  .exit-slips { grid-template-columns: 1fr 1fr; }
  .pq-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pq-opts li.is-answer { color: inherit; }
}

/* ---------- Seasonal events ---------- */
.event-banner { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow);
  border-left: 8px solid var(--ev, var(--primary)); margin-bottom: 14px; }
.event-banner.is-done { background: #F2FBF2; }
.ev-emoji { font-size: 40px; line-height: 1; }
.ev-bar { height: 12px; border-radius: 999px; background: #EAF0F8; overflow: hidden; margin: 8px 0 4px; }
.ev-bar span { display: block; height: 100%; border-radius: 999px; background: var(--ev, var(--primary)); }
.event-done { font-size: 16px; margin: 8px 0 0; }
.trophies { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.trophy { background: #FFF6DC; border: 2px solid var(--gold); border-radius: 999px; padding: 6px 14px; font-weight: 800; }

/* ---------- Class teams ---------- */
.team-row { display: grid; grid-template-columns: 44px minmax(120px, 220px) 1fr 70px; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid #EEF2F8; }
.team-row:last-of-type { border-bottom: 0; }
.team-place { font-size: 26px; text-align: center; font-weight: 800; }
.team-bar { height: 16px; border-radius: 999px; background: #EAF0F8; overflow: hidden; }
.team-bar span { display: block; height: 100%; border-radius: 999px; background: var(--team, var(--primary)); min-width: 4px; }
.team-pts { text-align: right; font-size: 20px; }
.team-row.compact { grid-template-columns: minmax(100px, 160px) 1fr 50px; padding: 5px 0; border: 0; }
.team-row.compact .team-pts { font-size: 15px; }
.team-row.is-mine .team-name { font-weight: 800; }
.my-team { border-top: 6px solid var(--team); }
.team-edit { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.team-edit > .box + .box { margin-top: 0; }
@media (max-width: 560px) {
  .team-row { grid-template-columns: 34px 1fr 54px; }
  .team-row .team-bar { grid-column: 2 / 4; grid-row: 2; }
  .team-row.compact { grid-template-columns: 1fr 1fr 40px; }
  .team-row.compact .team-bar { grid-column: auto; grid-row: auto; }
}

/* Big-screen scoreboard */
.board-body { background: linear-gradient(180deg, #0C2152, #13307A); min-height: 100vh; color: #fff; }
.board { max-width: 1200px; margin: 0 auto; padding: 28px 32px; }
.board-head { display: flex; gap: 18px; align-items: center; margin-bottom: 22px; }
.board-head img { background: #fff; border-radius: 16px; padding: 6px; }
.board-head h1 { font-size: clamp(28px, 4vw, 52px); margin: 0; color: #fff; }
.board-head p { margin: 0; opacity: .8; font-size: 18px; }
.board-event { color: var(--ink); }
.board-teams { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.board-team { display: grid; grid-template-columns: 70px 80px 1fr 170px; gap: 18px; align-items: center; background: rgba(255, 255, 255, .08);
  border: 3px solid var(--team); border-radius: 22px; padding: 16px 22px; }
.bt-place { font-size: 52px; text-align: center; font-family: var(--font-head); font-weight: 800; }
.bt-emoji { font-size: 60px; text-align: center; }
.bt-name { font-family: var(--font-head); font-weight: 800; font-size: clamp(24px, 3vw, 40px); line-height: 1.1; }
.team-bar.big { height: 26px; margin: 8px 0; background: rgba(255, 255, 255, .15); }
.bt-star { font-size: 18px; opacity: .9; }
.bt-pts { font-family: var(--font-head); font-weight: 800; font-size: clamp(36px, 4.5vw, 64px); text-align: right; line-height: 1; }
.bt-pts small { display: block; font-size: 16px; font-family: var(--font-body); opacity: .8; }
@media (max-width: 720px) {
  .board { padding: 16px; }
  .board-team { grid-template-columns: 44px 1fr 90px; gap: 10px; }
  .bt-emoji { display: none; }
  .bt-place { font-size: 32px; }
}
.team-edit .list li { flex-wrap: wrap; row-gap: 4px; }
.team-edit .list li .grow { flex: 1 1 calc(100% - 40px); }
.team-edit .list li select { flex: 1 1 100%; margin-left: 34px; }

/* ---------- Home practice plan ---------- */
.plan-card { display: block; text-decoration: none; color: var(--ink); border-left: 6px solid var(--brand-green); }
.plan-card:hover { box-shadow: 0 8px 22px rgba(12, 33, 82, .14); }
.plan-dots { display: flex; gap: 6px; margin: 6px 0 8px; }
.plan-dots span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: #EEF2F8; color: var(--ink-soft); }
.plan-dots span.done { background: var(--brand-green); color: #fff; }
.plan-dots span.today { outline: 3px solid var(--primary); outline-offset: 1px; }
.plan-today.done { background: linear-gradient(90deg, #2FB34A, #4CC94F); }
.focus-pill { background: #FFF6DC; border: 2px solid var(--gold); border-radius: 999px; padding: 8px 16px; display: inline-block; }
.plan-sheet { max-width: 820px; margin: 0 auto; }
.plan-head { display: flex; gap: 14px; align-items: center; border-bottom: 4px solid var(--brand-green); padding-bottom: 10px; margin-bottom: 12px; }
.plan-head h2 { margin: 0; color: var(--navy); }
.plan-head p { margin: 2px 0 0; }
.plan-topics { list-style: none; padding: 0; display: grid; gap: 12px; }
.plan-topics li { border-left: 6px solid var(--accent); background: #F8FBFF; border-radius: 12px; padding: 10px 14px; }
.plan-topics p { margin: 6px 0 0; }
.pt-head { display: flex; gap: 10px; align-items: center; }
.pt-head .pt-icon { font-size: 30px; }
.plan-days td { vertical-align: middle; }
.plan-days tr.is-today td { background: #F2F8FF; }
.plan-box { display: inline-block; width: 26px; height: 26px; border: 2.5px solid #1E2430; border-radius: 6px; }
.plan-tick { font-size: 22px; line-height: 1; }
@media print {
  .plan-sheet { box-shadow: none; padding: 0; }
  .plan-days tr.is-today td { background: none; }
}

/* ---------- Read-along stories ---------- */
.story-cover { font-size: 96px; line-height: 1; margin-bottom: 6px; animation: story-bob 3s ease-in-out infinite; }
.story-pic { font-size: 88px; text-align: center; line-height: 1.1; margin: 4px 0 10px; }
.story-text { font-size: 26px; line-height: 1.7; font-weight: 700; color: var(--ink); max-width: 34em; margin: 0 auto 10px; }
.story-text .w { border-radius: 6px; padding: 1px 2px; cursor: pointer; transition: background .12s, color .12s; }
.story-text .w:hover { background: #EEF4FC; }
.story-text .w.has-gloss { text-decoration: underline dotted var(--primary) 2px; text-underline-offset: 5px; }
.story-text .w.was-read { color: #3C4A66; }
.story-text .w.is-reading { background: var(--gold); color: var(--navy); box-shadow: 0 2px 0 #E0AE00; }
.story-text .w.is-tapped { background: #DDF0FD; }
.story-gloss { background: #F2F8FF; border: 2px solid #9ED6F2; border-radius: 14px; padding: 10px 14px; margin: 6px auto 10px; max-width: 34em; font-size: 17px; }
.story-controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 8px 0 14px; }
.story-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.story-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.story-dots i { width: 10px; height: 10px; border-radius: 50%; background: #DDE6F2; }
.story-dots i.seen { background: #9ED6F2; }
.story-dots i.on { background: var(--primary); transform: scale(1.25); }
.btn.pulse { animation: story-wiggle .5s ease-in-out 2; }
@keyframes story-bob { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-12px); } }
@keyframes story-wiggle { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.story-lookback { position: fixed; inset: 0; z-index: 60; background: rgba(12, 33, 82, .55); padding: 24px 16px; overflow-y: auto; }
.story-lookback .panel { max-width: 760px; margin: 0 auto; font-size: 18px; }
@media (max-width: 560px) {
  .story-text { font-size: 21px; }
  .story-pic { font-size: 64px; }
  .story-nav .btn { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { .story-cover, .btn.pulse { animation: none; } }

/* ---------- Voice picker ---------- */
.voice-picker { position: fixed; inset: 0; z-index: 80; background: rgba(12, 33, 82, .5); display: grid; place-items: center; padding: 16px; }
.vp-panel { background: #fff; border-radius: 20px; box-shadow: 0 20px 60px rgba(12, 33, 82, .35); width: min(520px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px 20px; }
.vp-head { display: flex; justify-content: space-between; align-items: center; }
.vp-head h2 { margin: 0; }
.vp-list { display: grid; gap: 8px; margin: 10px 0 14px; }
.vp-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid #E4ECF7; border-radius: 14px; cursor: pointer; }
.vp-item.is-on { border-color: var(--primary); background: #F2F8FF; }
.vp-item input { width: 18px; height: 18px; accent-color: var(--primary); }
.vp-item .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vp-speed { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.vp-tip { background: #FFF6DC; border: 2px solid var(--gold); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.vp-foot { text-align: right; margin-top: 8px; }

/* ---------- Set the clock ---------- */
.clock-target { color: var(--primary); white-space: nowrap; }
.clock-wrap { display: flex; justify-content: center; margin: 6px 0 10px; }
.clock-face { width: min(300px, 80vw); height: auto; touch-action: none; cursor: grab; user-select: none; }
.clock-face .hand { transition: transform .15s; }
.clock-face.is-done { cursor: default; }
.clock-buttons { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; text-align: center; }
.clock-buttons .row { justify-content: center; margin-top: 4px; }

/* ---------- Word search ---------- */
.ws-layout { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 18px; align-items: start; }
.ws-grid { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 3px; touch-action: none; user-select: none; max-width: 560px; }
.ws-cell { aspect-ratio: 1; border: 0; border-radius: 8px; background: #F2F6FC; font: inherit; font-weight: 800; font-size: clamp(14px, 3.2vw, 22px); color: var(--navy); cursor: pointer; padding: 0; }
.ws-cell.is-found { background: var(--fc); color: #1E2430; }
.ws-cell.is-sel { background: #BFE3FF; outline: 2px solid var(--primary); }
.ws-cell.is-start { outline: 3px solid var(--primary); }
.ws-cell.is-hint { animation: ws-flash .5s ease-in-out 4; }
@keyframes ws-flash { 50% { background: var(--gold); transform: scale(1.12); } }
.ws-side h3 { margin: 0 0 6px; }
.ws-words { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 4px; font-weight: 800; letter-spacing: .04em; }
.ws-words li.done { text-decoration: line-through; color: #2FB34A; }
.ws-words li.missed { color: var(--ink-soft); }
@media (max-width: 680px) { .ws-layout { grid-template-columns: 1fr; } .ws-words { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Times table race ---------- */
.race-best { font-weight: 800; color: var(--primary-dark); }
.race-count { font-family: var(--font-head); font-size: 120px; font-weight: 800; color: var(--primary); line-height: 1.2; }
.race-top { display: flex; align-items: center; gap: 12px; }
.race-time { font-family: var(--font-head); font-weight: 800; font-size: 32px; min-width: 52px; text-align: center; color: var(--navy); }
.race-bar { flex: 1; height: 14px; background: #EAF0F8; border-radius: 999px; overflow: hidden; }
.race-bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #E5533D, var(--gold) 40%, var(--brand-green)); transition: width .1s linear; }
.race-score { font-size: 22px; }
.race-q { font-family: var(--font-head); font-weight: 800; font-size: clamp(44px, 9vw, 72px); text-align: center; color: var(--navy); margin: 10px 0 0; }
.race-answer { text-align: center; font-size: 40px; font-weight: 800; min-height: 60px; border-bottom: 4px solid var(--primary); max-width: 260px; margin: 0 auto 14px; color: var(--primary); }
.race-answer.good { color: #1C7D33; border-color: #2FB34A; }
.race-answer.bad { color: #B0281A; border-color: #E5533D; font-size: 26px; }
.race-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 320px; margin: 0 auto; }
.race-pad button { font: inherit; font-size: 28px; font-weight: 800; padding: 14px 0; border-radius: 14px; border: 0; background: #EEF4FC; box-shadow: 0 3px 0 #CFDCEE; cursor: pointer; touch-action: manipulation; }
.race-pad button:active { transform: translateY(2px); box-shadow: 0 1px 0 #CFDCEE; }
.race-pad .ok { background: var(--brand-green); color: #fff; box-shadow: 0 3px 0 #2F9A33; }

/* ---------- Sentence builder, shading, bar chart ---------- */
.ia-build-line { min-height: 64px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; padding: 12px; margin: 10px 0 14px;
  border-bottom: 4px solid var(--primary); background: #F7FAFE; border-radius: 14px 14px 0 0; }
.ia-chip.placed { background: #E6F3FF; border-color: var(--primary); }
.ia-chip.ok { background: #E7F8EC; border-color: #6FCB86; }
.ia-chip.no { background: #FFEDEA; border-color: #F08C7C; }
.ia-chip.fixed { background: #FFF6DC; border-color: #F5B640; }
.ia-shade { display: block; margin: 6px auto; width: min(300px, 80vw); height: auto; touch-action: none; cursor: pointer; }
.ia-shade.bar { width: min(460px, 92%); }
.ia-part { fill: #fff; stroke: #1E2430; stroke-width: 2.5; transition: fill .12s; }
.ia-part.on { fill: #29A9E1; }
.ia-area.is-done .ia-shade { cursor: default; }
.ia-chart-data { max-width: 340px; margin: 0 auto 10px; }
.ia-chart-data td.tally { font-family: monospace; font-weight: 800; letter-spacing: 2px; }
.tally5 { text-decoration: line-through; text-decoration-thickness: 2px; }
.ia-chart { display: flex; gap: 6px; max-width: 520px; margin: 0 auto; height: 280px; }
.ia-axis { position: relative; width: 30px; height: 200px; font-size: 12px; color: var(--ink-soft); }
.ia-axis span { position: absolute; right: 2px; transform: translateY(50%); }
.ia-bars { flex: 1; display: flex; gap: 10px; justify-content: space-around; }
.ia-col { flex: 1; display: flex; flex-direction: column; align-items: center; max-width: 90px; }
.ia-track { position: relative; width: 100%; height: 200px; border-left: 2px solid #1E2430; border-bottom: 2px solid #1E2430; touch-action: none; cursor: ns-resize;
  background-image: repeating-linear-gradient(to top, #E4ECF7 0 1px, transparent 1px calc(100% / var(--lines))); }
.ia-barfill { position: absolute; bottom: 0; left: 15%; width: 70%; background: var(--primary); border-radius: 6px 6px 0 0; transition: height .1s; }
.ia-barfill::after { content: attr(data-v); position: absolute; top: -20px; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 13px; color: var(--ink); }
.ia-col.ok .ia-barfill { background: #2FB34A; }
.ia-col.no .ia-barfill { background: #E5533D; }
.ia-col.fixed .ia-barfill { background: #F5B640; }
.ia-col-btns { display: flex; gap: 4px; margin-top: 4px; }
.ia-col-btns .ia-step { width: 32px; height: 30px; }
.ia-col-label { font-size: 13px; font-weight: 800; text-align: center; line-height: 1.2; margin-top: 2px; }
.card-topic { margin: -4px 0 4px; font-size: 13px; font-weight: 800; color: var(--primary-dark); }

/* Reported problems */
.flag-card + .flag-card { margin-top: 12px; }
.flag-q { background: #F7FAFE; border-left: 4px solid var(--primary); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.flag-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.flag-actions .row { width: 100%; margin-top: 4px; }
.flag-btn { font-size: 13px; }
.flag-modal textarea { width: 100%; min-height: 70px; }

/* ---------- Map of Jamaica ---------- */
.jm-wrap { margin: 6px 0 4px; }
.jm-map { width: 100%; height: auto; display: block; background: #CDEBFA; border-radius: 16px; }
.jm-parish { fill: #F3EEDC; stroke: #3B4B66; stroke-width: 1.4; cursor: pointer; transition: fill .15s; }
.jm-parish:hover { fill: #FFF6D0; }
.jm-parish.lit { fill: var(--gold); }
.jm-parish.right { fill: #7ED68F; }
.jm-parish.wrong { fill: #F4A79B; }
.jm-parish.reveal { fill: #F5B640; }
.jm-parish.show-county { fill: var(--county); }
.jm-hot { fill: transparent; stroke: none; cursor: pointer; }
.jm-map.is-done .jm-parish, .jm-map.is-done .jm-hot { cursor: default; }
.jm-labels text { font: 800 15px var(--font-body, sans-serif); fill: #1E2430; paint-order: stroke; stroke: rgba(255, 255, 255, .85); stroke-width: 4px; pointer-events: none; }
@media (max-width: 560px) { .jm-labels text { font-size: 20px; } }
/* On phones the map is shown larger and slides sideways, so small parishes like Kingston are easy to tap. */
@media (max-width: 560px) {
  .jm-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; }
  .jm-map { width: 640px; max-width: none; }
  .jm-wrap::after { content: '↔ Slide the map to see all of Jamaica'; display: block; text-align: center; font-size: 12px; color: var(--ink-soft); padding-top: 4px; position: sticky; left: 0; width: min(100%, calc(100vw - 72px)); }
}

/* PEP readiness */
.pep-areas { display: grid; gap: 10px; margin: 6px 0 4px; }
.pep-area { display: grid; grid-template-columns: 150px 1fr auto 110px; gap: 10px; align-items: center; font-weight: 800; font-size: 15px; }
.pep-bar > span.ready { background: #2E9E55; } .pep-bar > span.nearly { background: #2B8CC4; }
.pep-bar > span.building { background: #D9A400; } .pep-bar > span.support { background: #D2513F; }
.pep-note .up { color: #1E7A3E; } .pep-note .down { color: #B23A2A; }
.pep-next { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.pep-next .btn { padding: 6px 12px; font-size: 14px; }
.pep-table td.pep-cell { text-align: center; white-space: nowrap; }
.pep-dist { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
@media (max-width: 560px) {
  .pep-area { grid-template-columns: 1fr auto; font-size: 14px; }
  .pep-area .pep-bar { grid-column: 1 / -1; order: 3; }
  .pep-area .pep-note { grid-column: 1 / -1; order: 4; }
}

/* Placement check */
.place-result { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 16px 0; }
.place-result > div { background: #F2F7FD; border-radius: 16px; padding: 12px 20px; min-width: 150px; display: grid; gap: 2px; }
.place-result span { font-size: 14px; font-weight: 700; color: var(--ink-soft); }
.place-result b { font-size: 22px; }
.option.is-picked { outline: 3px solid var(--primary); background: #E8F3FF; }
.place-line { margin: 0 0 12px; }

/* Writing tasks */
.w-prompt { display: flex; gap: 14px; align-items: flex-start; background: #FFF8E1; border-radius: 16px; padding: 14px 16px; margin: 10px 0; }
.w-emoji { font-size: 44px; line-height: 1; }
.w-tips { margin: 8px 0; } .w-tips summary { cursor: pointer; font-weight: 800; } .w-tips ul { margin: 6px 0 0; padding-left: 20px; }
.w-label { display: block; font-weight: 800; margin: 12px 0 6px; }
.w-text { width: 100%; min-height: 260px; font: inherit; font-size: 18px; line-height: 1.6; padding: 14px; border: 2px solid #D5E2F0; border-radius: 14px; resize: vertical; background: #fff; color: var(--ink); box-sizing: border-box; }
.w-text:focus { outline: none; border-color: var(--primary); }
.w-meter { display: flex; align-items: center; gap: 10px; margin: 8px 0 12px; } .w-meter .bar { flex: 1; } .w-meter .bar > span { background: #D9A400; } .w-meter .bar > span.ok { background: #2E9E55; }
.w-check { display: grid; gap: 6px; background: #F2F7FD; border-radius: 14px; padding: 12px 14px; margin: 8px 0; }
.w-tick { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.w-body { white-space: pre-wrap; font-size: 17px; line-height: 1.7; background: #FFFDF6; border: 1px solid #EFE6C8; border-radius: 12px; padding: 14px 16px; max-height: 70vh; overflow: auto; }
.rub-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.rub-dots { display: inline-flex; gap: 4px; } .rub-dots i { width: 14px; height: 14px; border-radius: 50%; background: #E4ECF7; } .rub-dots i.on { background: #2E9E55; }
.rub-desc { margin: 2px 0 0; }
.rub-field { border: 1px solid #DCE6F2; border-radius: 12px; padding: 8px 12px 10px; margin: 0 0 10px; }
.rub-field legend { font-weight: 800; padding: 0 6px; }
.rub-opt { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: start; padding: 4px 0; font-size: 14px; cursor: pointer; }
.rub-opt b { min-width: 14px; }
@media (min-width: 900px) { .mark-cols { grid-template-columns: 1.2fr 1fr; } }
.count-badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: #D2513F; color: #fff; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; margin-left: 4px; }

/* Live class quiz */
.live-host { max-width: 1200px; margin: 0 auto; padding: 16px; }
.live-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-weight: 800; margin-bottom: 10px; }
.live-mini { color: var(--ink-soft); }
.live-joinbox { font-size: clamp(18px, 3vw, 30px); font-weight: 700; background: #F2F7FD; border-radius: 18px; padding: 14px 20px; margin: 12px auto; display: inline-block; }
.live-pin { display: inline-block; font-family: 'Baloo 2', sans-serif; font-size: 1.8em; letter-spacing: 3px; background: var(--ink); color: #fff; border-radius: 12px; padding: 0 16px; margin-left: 6px; }
.live-players { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; min-height: 40px; }
.live-player { border: 0; background: #E4ECF7; border-radius: 999px; padding: 6px 14px; font: inherit; font-weight: 800; cursor: pointer; }
.live-player:hover { background: #FFDCD6; text-decoration: line-through; }
.live-q { background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 6px 24px rgba(15, 40, 80, .08); }
.live-qtext { text-align: center; font-size: clamp(22px, 3.4vw, 40px); margin: 6px 0 12px; }
.live-mid { display: flex; justify-content: center; align-items: center; gap: 30px; min-height: 140px; }
.live-timer { width: 110px; height: 110px; border-radius: 50%; background: #7C3AED; color: #fff; display: grid; place-items: center; font-size: 46px; font-weight: 800; }
.live-answered { text-align: center; } .live-answered b { display: block; font-size: 44px; } .live-answered span { color: var(--ink-soft); font-weight: 700; }
.live-counts { display: flex; gap: 16px; align-items: flex-end; height: 140px; }
.live-count { width: 70px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.live-count span { display: block; width: 100%; min-height: 6px; border-radius: 8px 8px 0 0; background: currentColor; }
.live-count b { color: var(--ink); }
.live-opts, .live-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.live-opt, .live-btn { display: flex; align-items: center; gap: 12px; color: #fff; border-radius: 14px; padding: 18px; font-size: clamp(16px, 2.2vw, 26px); font-weight: 800; border: 0; text-align: left; }
.live-btn { min-height: 92px; cursor: pointer; font-family: inherit; box-shadow: 0 5px 0 rgba(0, 0, 0, .18); }
.live-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.live-btn:disabled { opacity: .45; } .live-btn.picked { opacity: 1; outline: 4px solid var(--ink); }
.live-opt.dim { opacity: .3; }
.shape { font-size: 1.3em; }
.c0 { background: #E21B3C; color: #E21B3C; } .c1 { background: #1368CE; color: #1368CE; } .c2 { background: #C78C00; color: #C78C00; } .c3 { background: #26890C; color: #26890C; }
.live-opt.c0, .live-opt.c1, .live-opt.c2, .live-opt.c3, .live-btn.c0, .live-btn.c1, .live-btn.c2, .live-btn.c3 { color: #fff; }
.live-count.c0, .live-count.c1, .live-count.c2, .live-count.c3 { background: none; }
.live-count.right b::after { content: ' ✔'; }
.live-explain { text-align: center; font-weight: 700; margin: 12px 0 0; }
.live-board { list-style: none; padding: 0; margin: 12px auto; max-width: 520px; display: grid; gap: 8px; }
.live-board li { display: flex; gap: 12px; align-items: center; background: #F2F7FD; border-radius: 12px; padding: 10px 16px; font-size: 20px; font-weight: 800; }
.live-board .rank { width: 28px; color: var(--ink-soft); }
.live-board .grow { flex: 1; text-align: left; }
.podium { display: flex; justify-content: center; align-items: flex-end; gap: 12px; margin: 20px 0; }
.podium-step { width: 150px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 800; }
.pod-avatar { font-size: 42px; }
.pod-block { width: 100%; border-radius: 12px 12px 0 0; background: #FFD34D; display: grid; place-items: center; font-size: 34px; color: #6B5300; margin-top: 6px; }
.podium-step.first .pod-block { height: 150px; } .podium-step.second .pod-block { height: 110px; background: #D7E1EC; color: #3A4A5C; } .podium-step.third .pod-block { height: 80px; background: #F2C49B; color: #6B3A10; }
.live-join { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.live-code { font-size: 32px; text-align: center; letter-spacing: 4px; max-width: 220px; font-weight: 800; }
.live-left { font-size: 18px; }
.live-result.good { box-shadow: inset 0 6px 0 #2E9E55; } .live-result.bad { box-shadow: inset 0 6px 0 #D2513F; }
@media (max-width: 560px) { .live-opts, .live-btns { grid-template-columns: 1fr; } .live-btn { min-height: 64px; } .podium-step { width: 100px; } }

/* Curriculum map */
.cur-subject { border-top: 5px solid var(--accent); }
.cur-strand { margin: 16px 0 4px; font-size: 16px; color: var(--ink-soft); }
.cur-list li { align-items: center; }

/* Mark book */
.page-wide { max-width: 1400px; }
.cell-mid { background: #FFF6D6; font-weight: 800; }
.mb-wrap { max-height: 75vh; overflow: auto; }
.mb-table { font-size: 14px; }
.mb-table th, .mb-table td { white-space: nowrap; }
.mb-table thead th { position: sticky; top: 0; background: #F2F7FD; z-index: 2; vertical-align: bottom; }
.mb-table .mb-name { position: sticky; left: 0; background: #fff; z-index: 1; min-width: 150px; }
.mb-table thead .mb-name { z-index: 3; background: #F2F7FD; }
.mb-col { min-width: 96px; text-align: center; font-weight: 700; }
.mb-avg { background: #F6F9FD; border-left: 2px solid #DCE6F2; }
.mb-off { opacity: .45; }
.mb-foot td { background: #F6F9FD; font-weight: 800; }
.mb-score { width: 90px; }

/* Class groups */
.group-chip { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; background: var(--g); }
.group-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.group-card { border-top: 5px solid var(--g); background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 2px 10px rgba(15, 40, 80, .06); }
.group-card h3 { margin: 4px 0; }
.group-defs { display: grid; gap: 8px; margin: 8px 0 14px; }
.group-def { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-left: 6px solid var(--g); padding: 6px 10px; background: #F6F9FD; border-radius: 10px; }
.group-def .input { max-width: 200px; }
.level-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #E4ECF7; }
.level-row:last-child { border-bottom: 0; }

/* Offline and low-data */
.offline-banner { position: sticky; top: 0; z-index: 50; background: #0C2152; color: #fff; text-align: center; font-weight: 700; font-size: 14px; padding: 8px 12px; }
.kz-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; background: #0C2152; color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: calc(100vw - 32px); }
.footer-low { color: inherit; opacity: .8; }
body.low-data *, body.low-data *::before, body.low-data *::after { animation: none !important; transition: none !important; }
body.low-data { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

/* Phone notifications */
.push-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Reading settings (the "Aa" menu) */
.reading-menu { position: relative; }
.help-btn { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 18px; background: var(--primary-tint); color: var(--ink); text-decoration: none; margin-right: 6px; flex: none; }
.help-btn:hover, .help-btn:focus-visible { outline: 2px solid var(--primary); }
.reading-menu + .user-chip { margin-left: 8px; }
.reading-btn { list-style: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 16px; background: var(--primary-tint); color: var(--ink); border: 2px solid transparent; user-select: none; }
.reading-btn::-webkit-details-marker { display: none; }
.reading-menu[open] .reading-btn, .reading-btn:focus-visible { border-color: var(--primary); }
.reading-panel { position: absolute; right: 0; top: 46px; z-index: 40; width: 250px; background: #fff; color: var(--ink); border-radius: 16px; padding: 14px; box-shadow: 0 10px 30px rgba(12, 33, 82, .2); display: grid; gap: 8px; text-align: left; }
.reading-panel fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 12px; }
.reading-panel legend { font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-bottom: 2px; }
.reading-panel label { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; cursor: pointer; }
.reading-panel .easy-sample { font-family: 'Lexend', system-ui, sans-serif; }
.reading-panel p { margin: 0; }

/* Easy-read font: Lexend, made for easier reading */
body.read-easy { --font-head: 'Lexend', system-ui, sans-serif; --font-body: 'Lexend', system-ui, sans-serif; }
/* Larger text: the whole page scales, so layouts stay in proportion */
body.read-large { zoom: 1.15; }
body.read-xlarge { zoom: 1.3; }
/* Wider spacing between lines, words and letters */
body.read-spacing { line-height: 1.8; word-spacing: .12em; letter-spacing: .03em; }
body.read-spacing p, body.read-spacing li, body.read-spacing .q-text { line-height: 1.8; }
/* High contrast: black on white, strong outlines, underlined links */
body.read-contrast { --ink: #000; --ink-soft: #111; --bg: #fff; --card: #fff; --line: #000; --primary: #003F9E; --primary-dark: #002B6E; --primary-tint: #fff; background: #fff; color: #000; }
body.read-contrast .muted, body.read-contrast .tiny, body.read-contrast .hint { color: #000 !important; opacity: 1 !important; }
body.read-contrast a { text-decoration: underline; }
body.read-contrast .box, body.read-contrast .panel, body.read-contrast .option, body.read-contrast .card, body.read-contrast .activity-card, body.read-contrast .input, body.read-contrast input, body.read-contrast select, body.read-contrast textarea { border: 2px solid #000 !important; box-shadow: none !important; }
body.read-contrast .btn { border: 2px solid #000 !important; }
body.read-contrast .btn-primary { background: #003F9E !important; color: #fff !important; }
body.read-contrast :focus-visible { outline: 3px solid #000 !important; outline-offset: 2px; }

/* Help centre */
.help-hero { text-align: center; margin-bottom: 18px; }
.help-search { display: flex; gap: 8px; max-width: 620px; margin: 10px auto 12px; }
.help-search .input { flex: 1; font-size: 17px; }
.help-aud { justify-content: center; }
.help-forpage { border-left: 6px solid var(--gold); }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.help-group h2 { font-size: 19px; }
.help-links { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.help-links a { font-weight: 700; }
.help-article h1 { margin-top: 4px; }
.help-summary { font-size: 18px; color: var(--ink-soft); margin-top: 0; }
.help-body { font-size: 17px; line-height: 1.65; }
.help-body h2 { font-size: 21px; margin-top: 22px; }
.help-body ul, .help-body ol { padding-left: 22px; }
.help-body li { margin: 4px 0; }
.help-tip { background: #FFF8E1; border-left: 5px solid var(--gold); border-radius: 10px; padding: 10px 14px; margin: 14px 0; }
.help-vote { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 12px; }
.help-editor { font-family: ui-monospace, Consolas, monospace; font-size: 14px; line-height: 1.5; width: 100%; }
@media (max-width: 560px) { .help-search { flex-direction: column; } }

/* Record voices */
.rec-tips ul { margin: 6px 0 10px; padding-left: 20px; }
.rec-list { display: grid; gap: 10px; margin-top: 12px; }
.rec-group { font-size: 18px; margin: 14px 0 0; }
.rec-item { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; background: #fff; border-radius: 14px; padding: 12px 14px; box-shadow: 0 2px 8px rgba(12, 33, 82, .06); }
.rec-item.recording { outline: 3px solid #D2513F; }
.rec-text { display: grid; gap: 2px; }
.rec-label { font-size: 20px; font-weight: 800; }
.rec-label.phrase { font-size: 16px; font-weight: 700; line-height: 1.5; }
.rec-status { grid-column: 1; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rec-controls { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.rec-take { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rec-take audio { height: 36px; max-width: 100%; }
.rec-review .rec-players { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0; }
.rec-review audio { height: 36px; }
.vp-rec { display: flex; gap: 8px; align-items: center; font-weight: 700; margin: 10px 0; }
@media (max-width: 560px) { .rec-item { grid-template-columns: 1fr; } .rec-controls { grid-column: 1; grid-row: auto; justify-content: flex-start; } }

/* Content review */
.rev-progress .bar { margin: 8px 0 10px; }
.rev-list { display: grid; gap: 12px; }
.rev-item { border-left: 6px solid var(--line); }
.rev-item.state-problem { border-left-color: #D2513F; }
.rev-item.state-checked { border-left-color: #2E9E55; }
.rev-item.rev-done { opacity: .75; }
.rev-q { font-size: 19px; margin: 4px 0 8px; }
.rev-opts { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.rev-opts li { background: #F2F7FD; border-radius: 10px; padding: 5px 12px; font-weight: 700; }
.rev-opts li.right { background: #D9F4E1; color: #0D5A27; }
.rev-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.rev-problem { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.rev-problem .input { flex: 1; min-width: 220px; }
.rev-stat { display: grid; gap: 6px; text-decoration: none; color: inherit; }
.pager { justify-content: center; margin-top: 14px; }

/* Usage dashboard */
.usage-chg { display: block; font-size: 12px; }
.usage-chg .up, .usage-feat .up, td .up { color: #1E7A3E; font-weight: 800; } .usage-chg .down, td .down { color: #B23A2A; font-weight: 800; }
.usage-chart { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding: 8px 0; border-bottom: 2px solid var(--line); }
.uc-col { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.uc-col span { display: block; width: 100%; background: var(--primary); border-radius: 4px 4px 0 0; }
.uc-col:hover span { background: var(--primary-dark); }
.usage-feat td { padding: 6px 8px; }
.usage-eng { grid-template-columns: 150px 1fr 56px; }

/* Welcome kit */
.kit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.kit-item { display: grid; gap: 6px; text-decoration: none; color: inherit; }
.kit-item:hover { outline: 2px solid var(--primary); }
.kit-icon { font-size: 36px; }
.kit-check li { margin: 6px 0; }
.kit-toolbar { margin-bottom: 14px; }
.kit-poster { background: #fff; border-radius: 24px; padding: 40px 32px; text-align: center; max-width: 760px; margin: 0 auto; border: 8px solid var(--primary); }
.kit-logo { width: 220px; height: auto; }
.kit-poster h1 { font-size: 54px; margin: 10px 0 0; }
.kit-class { font-size: 26px; font-weight: 800; color: var(--ink-soft); margin: 4px 0 24px; }
.kit-steps { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 18px; max-width: 560px; text-align: left; }
.kit-steps li { display: flex; gap: 18px; align-items: center; font-size: 28px; line-height: 1.25; }
.kit-steps li > span { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; font-size: 34px; font-weight: 800; }
.kit-code { font-family: 'Baloo 2', sans-serif; font-size: 64px; letter-spacing: 6px; background: var(--ink); color: #fff; padding: 0 18px; border-radius: 14px; display: inline-block; margin-top: 4px; }
.kit-foot { margin-top: 26px; font-weight: 700; color: var(--ink-soft); }
.kit-letter { background: #fff; max-width: 760px; margin: 0 auto 24px; padding: 32px 36px; border-radius: 16px; box-shadow: 0 4px 18px rgba(12, 33, 82, .08); font-size: 15px; line-height: 1.55; }
.kit-letter h3 { margin: 16px 0 4px; font-size: 17px; }
.kit-letter-head { display: flex; gap: 14px; align-items: center; border-bottom: 3px solid var(--primary); padding-bottom: 10px; margin-bottom: 14px; }
.kit-linkcode { font-family: 'Baloo 2', sans-serif; font-size: 36px; letter-spacing: 5px; text-align: center; border: 3px dashed var(--ink); border-radius: 14px; padding: 6px; margin: 8px auto; max-width: 340px; }
.kit-login td { padding: 4px 12px 4px 0; }
.kit-quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
.kit-quick-grid ul { padding-left: 18px; margin: 4px 0; }
@media print {
  .kit-print { padding: 0; }
  .kit-letter { box-shadow: none; border-radius: 0; margin: 0; max-width: none; padding: 0; break-after: page; }
  .kit-poster { border-width: 10px; max-width: none; break-inside: avoid; }
}
@media (max-width: 560px) { .kit-quick-grid { grid-template-columns: 1fr; } .kit-poster h1 { font-size: 36px; } .kit-steps li { font-size: 20px; } .kit-code { font-size: 40px; } }
.rev-progress .filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.rev-progress .filters .field { flex: 1; min-width: 160px; margin: 0; }

/* Help screenshots */
.help-shot { margin: 16px 0; }
.help-shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(12, 33, 82, .1); }
.help-shot figcaption { font-size: 13px; color: var(--ink-soft); margin-top: 6px; text-align: center; }
.kit-grid > .box, .help-grid > .box { margin: 0; }
body.low-data .help-shot img { display: none; }
body.low-data .help-shot figcaption::before { content: '🖼️ Picture hidden in low-data mode: '; }

/* School sign-up: finding an existing school */
.school-results { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; }
.school-results li { display: flex; gap: 10px; align-items: center; background: #F2F7FD; border-radius: 10px; padding: 8px 12px; }
.school-similar { background: #FFF8E1; border-radius: 12px; padding: 10px 12px; margin: 4px 0 8px; }
.school-picked { background: #E7F8EC; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
.dup-row td { background: #FFF8E1; } .dup-merge { margin: 4px 10px 4px 0; }

/* Drawing studio */
.draw-panel { max-width: 980px; }
.draw-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }
.draw-group { display: flex; gap: 4px; background: #F2F7FD; border-radius: 12px; padding: 4px; }
.draw-tool, .draw-size { width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; font-size: 22px; cursor: pointer; display: grid; place-items: center; }
.draw-tool.is-on, .draw-size.is-on { background: #fff; box-shadow: 0 0 0 2px var(--primary); }
.draw-size span { display: block; border-radius: 50%; background: var(--ink); }
.draw-colours { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.draw-colour { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #DCE6F2; cursor: pointer; }
.draw-colour.is-on { box-shadow: 0 0 0 3px var(--ink); }
.draw-stamps { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.draw-stamp { font-size: 26px; width: 48px; height: 48px; border-radius: 10px; border: 2px solid transparent; background: #F2F7FD; cursor: pointer; }
.draw-stamp.is-on { border-color: var(--primary); }
.draw-wrap { position: relative; border-radius: 14px; overflow: hidden; border: 2px solid #DCE6F2; background: #fff; }
.draw-wrap canvas { display: block; width: 100%; height: auto; touch-action: none; cursor: crosshair; }
.draw-mirror-line { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px dashed rgba(124, 58, 237, .45); pointer-events: none; }
.draw-actions { gap: 10px; justify-content: flex-end; }

/* Galleries */
.art-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.art-card { margin: 0; background: #fff; border-radius: 14px; padding: 10px; box-shadow: 0 2px 10px rgba(12, 33, 82, .07); }
.art-card.art-new { box-shadow: 0 0 0 3px var(--gold); }
.art-card img { width: 100%; aspect-ratio: 900 / 640; object-fit: contain; background: #fff; border-radius: 10px; border: 1px solid var(--line); display: block; }
.art-card figcaption { margin-top: 6px; font-size: 14px; }
.art-feedback { background: #F2F7FD; border-radius: 10px; padding: 6px 8px; margin-top: 6px; }
.art-stickers { font-size: 20px; margin-right: 4px; }
.art-review { display: grid; gap: 6px; margin-top: 8px; }
.art-sticker-pick { display: flex; flex-wrap: wrap; gap: 2px; }
.art-sticker-pick label { cursor: pointer; }
.art-sticker-pick input { position: absolute; opacity: 0; }
.art-sticker-pick span { display: inline-block; font-size: 22px; padding: 2px 4px; border-radius: 8px; opacity: .45; }
.art-sticker-pick input:checked + span { opacity: 1; background: #FFF1B8; }
.art-sticker-pick input:focus-visible + span { outline: 2px solid var(--primary); }

/* Colour lab */
.cl-swatch { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(0,0,0,.15); vertical-align: middle; }
.cl-swatch.big { width: 40px; height: 40px; }
.options .option .cl-swatch { margin-right: 8px; }
.cl-sum { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.cl-pot { display: inline-flex; align-items: flex-end; justify-content: center; width: 86px; height: 86px; border-radius: 18px 18px 40px 40px; border: 3px solid rgba(0,0,0,.18); padding-bottom: 8px; font-size: 14px; }
.cl-pot b { background: rgba(255,255,255,.85); color: #1F2A44; padding: 1px 8px; border-radius: 10px; }
.cl-q { align-items: center; background: #F2F2F2; font-size: 40px; font-weight: 800; color: #8592A6; padding: 0; transition: background .3s; }
.cl-plus { font-size: 32px; font-weight: 800; color: #8592A6; }
.cl-pots { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.cl-add { cursor: pointer; width: 74px; height: 74px; }
.cl-add:active { transform: scale(.94); }
.cl-mixer { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0; }
.cl-bowl { width: 150px; height: 90px; border-radius: 0 0 80px 80px; border: 4px solid #8592A6; border-top-width: 8px; background: #F2F2F2; transition: background .3s; }

/* Patterns and symmetry */
.pt-palette { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.pt-colour { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(0,0,0,.15); cursor: pointer; font-size: 18px; }
.pt-colour.is-on { outline: 4px solid var(--primary); outline-offset: 2px; }
.pt-rub { background: #fff; }
.pt-grid { display: grid; gap: 3px; max-width: 520px; margin: 0 auto; touch-action: none; position: relative; }
.pt-cell { aspect-ratio: 1; border: 1px solid #DCE6F2; border-radius: 4px; background: #fff; cursor: pointer; padding: 0; }
.pt-cell.locked { cursor: default; }
.pt-cell.pt-wrong { box-shadow: inset 0 0 0 3px #E53935; }
.pt-mirror::after { content: ''; position: absolute; top: -6px; bottom: -6px; left: calc(50% - 2px); width: 4px; background: repeating-linear-gradient(#1E63D6 0 8px, transparent 8px 14px); pointer-events: none; }
.md-stripes { display: flex; justify-content: center; gap: 4px; margin-bottom: 12px; }
.md-stripe { width: 44px; height: 44px; border-radius: 8px; border: 2px solid rgba(0,0,0,.15); cursor: pointer; }
.md-canvas { display: block; width: min(100%, 360px); height: auto; margin: 0 auto; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.12); }

/* Craft cards */
.craft-head { display: flex; gap: 16px; align-items: center; }
.craft-head .big-icon { font-size: 64px; }
.craft-safety { background: #FFF4E5; border-left: 5px solid #FB8C00; padding: 10px 14px; border-radius: 10px; margin: 12px 0; }
.craft-materials { columns: 2; padding-left: 20px; }
.craft-steps { list-style: none; counter-reset: step; padding: 0; }
.craft-steps li { counter-increment: step; display: flex; align-items: center; gap: 8px; padding: 10px 12px; margin: 6px 0; border-radius: 12px; background: #F7FAFE; }
.craft-steps li::before { content: counter(step); flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--arts); color: #fff; font-weight: 800; display: grid; place-items: center; }
.craft-steps label { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; }
.craft-steps .craft-emoji { font-size: 26px; }
.craft-steps li.is-done { background: #E8F7EC; }
.craft-steps li.is-done span:last-child { text-decoration: line-through; opacity: .7; }
@media (max-width: 560px) { .craft-materials { columns: 1; } .cl-pot { width: 70px; height: 70px; } .md-stripe { width: 34px; height: 34px; } }
@media print { .craft-steps input { display: none; } .craft-steps li { background: none; border-bottom: 1px solid #ccc; } }
.pt-clues { list-style: none; padding: 0; margin: 8px auto; max-width: 520px; display: grid; gap: 4px; font-size: 15px; }
.pt-clues .cl-swatch { width: 18px; height: 18px; margin-right: 4px; }
.pt-board { max-width: 520px; margin: 0 auto; }
.pt-letters { display: grid; gap: 3px; text-align: center; font-weight: 800; color: #5B6B82; font-size: 13px; }
.pt-num { display: grid; place-items: center; font-weight: 800; color: #5B6B82; font-size: 13px; }

/* Domino maths */
.dm-show { display: flex; justify-content: center; margin: 14px 0; }
.dm-tile { display: inline-flex; align-items: center; gap: 4px; background: #FFFDF6; border: 3px solid #1F2A44; border-radius: 12px; padding: 6px; box-shadow: 0 3px 0 #1F2A44; }
.dm-tile.dm-v { flex-direction: column; }
.dm-half { display: grid; grid-template-columns: repeat(3, 12px); grid-template-rows: repeat(3, 12px); gap: 4px; padding: 4px; }
.dm-half i { width: 12px; height: 12px; border-radius: 50%; }
.dm-half i.on { background: #1F2A44; }
.dm-line { width: 3px; align-self: stretch; background: #1F2A44; border-radius: 2px; }
.dm-v .dm-line { width: auto; height: 3px; }
.dm-chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.dm-gap { width: 70px; height: 52px; border: 3px dashed #8592A6; border-radius: 12px; display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #8592A6; }
.dm-options { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.dm-option { justify-content: center; padding: 12px; }

/* Ludi race */
.ld-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; margin: 10px 0 16px; }
.ld-cell { aspect-ratio: 1; display: grid; place-items: center; border-radius: 10px; background: #EAF3FF; font-size: 13px; font-weight: 700; color: #5B6B82; }
.ld-cell.ld-five { background: #FFF1B8; }
.ld-cell.ld-start { background: #D7F5DD; }
.ld-cell.ld-home { background: #FFD6D6; font-size: 20px; }
.ld-cell:has(span), .ld-cell { line-height: 1; }
.ld-dice { display: flex; justify-content: center; gap: 12px; font-size: 64px; line-height: 1; margin: 8px 0; }
.ld-answer .input { width: 110px; font-size: 24px; text-align: center; display: inline-block; }
.ld-turn { min-height: 170px; }

/* Coding puzzles */
.cd-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cd-grid { display: grid; gap: 3px; background: #CDE8C5; padding: 6px; border-radius: 14px; }
.cd-cell { aspect-ratio: 1; display: grid; place-items: center; background: #E9F7E4; border-radius: 6px; font-size: clamp(18px, 4.5vw, 32px); position: relative; }
.cd-cell.cd-wall { background: #B9DDB0; }
.cd-anansi { display: inline-block; transition: transform .25s; position: relative; }
.cd-dir { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 12px; color: #E53935; font-style: normal; }
.cd-bump { animation: cd-shake .3s 2; }
@keyframes cd-shake { 25% { translate: -4px 0; } 75% { translate: 4px 0; } }
.cd-palette { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cd-block { display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 8px; border-radius: 12px; border: 2px solid #9B5DE5; background: #F4ECFF; cursor: pointer; font-size: 24px; }
.cd-block small { font-size: 11px; font-weight: 700; color: #5B3A8C; }
.cd-program { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; min-height: 64px; background: #F7FAFE; border: 2px dashed #C7D3E3; border-radius: 12px; margin: 6px 0 10px; }
.cd-program .cd-empty { color: #8592A6; font-size: 14px; }
.cd-step { position: relative; font-size: 22px; padding: 6px 10px; border-radius: 10px; border: 2px solid #9B5DE5; background: #fff; cursor: pointer; }
.cd-step b { font-size: 13px; margin-left: 2px; color: #5B3A8C; }
.cd-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .cd-wrap { grid-template-columns: 1fr; } }

/* Rhythm */
.rh-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rh-notes { display: inline-flex; gap: 10px; }
.rh-beat { display: grid; justify-items: center; min-width: 44px; }
.rh-beat b { font-size: 30px; line-height: 1.1; font-family: 'Segoe UI Symbol', 'Noto Music', serif; }
.rh-beat small { font-size: 12px; font-weight: 700; color: #5B6B82; }
.rh-options .option { justify-content: center; }
.rh-drum { font-size: 90px; width: 160px; height: 160px; border-radius: 50%; border: 6px solid #9B5DE5; background: #F4ECFF; cursor: pointer; margin: 12px 0; touch-action: manipulation; transition: transform .08s; }
.rh-drum.hit { transform: scale(.92); background: #E3D1FF; }
.rh-machine { display: grid; gap: 6px; max-width: 520px; margin: 0 auto 12px; }
.rh-mrow { display: grid; grid-template-columns: 40px repeat(8, 1fr); gap: 5px; align-items: center; }
.rh-mlabel { font-size: 24px; text-align: center; }
.rh-pad { aspect-ratio: 1; border-radius: 8px; border: 2px solid #C7D3E3; background: #fff; cursor: pointer; }
.rh-pad.beat { background: #EEF3FA; }
.rh-pad.on { background: #9B5DE5; border-color: #7B3FC7; }

/* Escape room */
.es-code { display: flex; justify-content: center; gap: 8px; margin: 10px 0 16px; }
.es-code span { width: 46px; height: 56px; display: grid; place-items: center; font-size: 28px; font-weight: 800; border-radius: 10px; background: #2B2F3A; color: #8592A6; border: 3px solid #4B5262; }
.es-code span.got { background: #FFF1B8; color: #1F2A44; border-color: #F4B400; }
.es-digit { font-size: 22px; background: #FFF1B8; padding: 0 8px; border-radius: 6px; }
.es-open .input { width: 140px; font-size: 26px; text-align: center; letter-spacing: 6px; display: inline-block; }
.es-chest { animation: es-wobble 1.6s infinite; display: inline-block; }
@keyframes es-wobble { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-6deg); } 20% { transform: rotate(6deg); } 30% { transform: rotate(0); } }

/* Choose-your-own-adventure */
.adv-emoji { font-size: 72px; text-align: center; line-height: 1.2; }
.adv-text { font-size: 19px; line-height: 1.6; max-width: 640px; margin: 0 auto 14px; }
.adv-choices { display: grid; gap: 10px; max-width: 640px; margin: 0 auto; }
.adv-choice { text-align: left; justify-content: flex-start; font-size: 17px; }
.adv-ending { text-align: center; font-weight: 800; font-size: 20px; padding: 12px; border-radius: 14px; background: #E8F7EC; max-width: 640px; margin: 0 auto 12px; }
.adv-oops .adv-ending { background: #FFF4E5; }

/* Science lab */
.lab-scene { position: relative; width: 240px; height: 180px; margin: 10px auto 14px; }
.lab-tank, .lab-glass { border: 4px solid #8592A6; border-top: none; border-radius: 0 0 18px 18px; overflow: hidden; background: #F7FAFE; }
.lab-glass { width: 150px; border-radius: 0 0 30px 30px; }
.lab-water { position: absolute; left: 0; right: 0; bottom: 0; height: 65%; background: linear-gradient(#81C3F7cc, #1E63D6cc); }
.lab-thing { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-size: 46px; transition: top .8s cubic-bezier(.3, .7, .4, 1), opacity .8s; }
.lab-tank.yes .lab-thing { top: 30%; }
.lab-tank.no .lab-thing { top: calc(100% - 56px); }
.lab-glass.yes .lab-thing { top: 55%; opacity: 0; }
.lab-glass.yes .lab-water { background: linear-gradient(#a9d6fbcc, #4a86e0cc); }
.lab-glass.no .lab-thing { top: 55%; opacity: 0; }
.lab-bits { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); font-size: 22px; letter-spacing: -6px; filter: saturate(.6); }
.lab-circuit { width: 280px; height: 150px; border: 5px solid #5B6B82; border-radius: 16px; background: none; margin: 36px auto 48px; }
.lab-circuit.on { border-color: #F4B400; box-shadow: 0 0 24px #FFE58A; }
.lab-bulb { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 48px; background: #fff; border-radius: 50%; }
.lab-battery { position: absolute; bottom: -26px; left: 22%; font-size: 42px; background: #fff; }
.lab-gap { position: absolute; bottom: -30px; right: 18%; font-size: 40px; background: #fff; padding: 0 6px; border-radius: 10px; border: 3px dashed #8592A6; }
.lab-wire { display: none; }
.lab-predict { max-width: 520px; margin: 0 auto; }
.lab-table { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; max-width: 560px; margin: 10px auto; }
.lab-table > div { background: #F7FAFE; border-radius: 14px; padding: 10px 14px; }
.lab-table ul { list-style: none; padding: 0; margin: 0; }

/* Jigsaw and spot the difference */
.jg-wrap { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 16px; align-items: start; max-width: 640px; margin: 0 auto; }
.jg-board { display: grid; gap: 2px; background: #1F2A44; padding: 2px; border-radius: 10px; }
.jg-board.done { gap: 0; padding: 0; box-shadow: 0 0 0 4px #43A047; }
.jg-piece { aspect-ratio: 1; border: none; padding: 0; cursor: pointer; background-repeat: no-repeat; }
.jg-piece.picked { outline: 4px solid #F4B400; outline-offset: -4px; }
.jg-preview { display: grid; gap: 4px; justify-items: center; }
.jg-preview img { width: 100%; border-radius: 8px; opacity: .9; }
.sp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 720px; margin: 0 auto; }
.sp-grid { display: grid; gap: 4px; background: #EAF3FF; padding: 8px; border-radius: 14px; }
.sp-cell { aspect-ratio: 1; font-size: clamp(16px, 3.6vw, 30px); border: none; background: #fff; border-radius: 8px; cursor: pointer; padding: 0; }
.sp-cell.found { box-shadow: inset 0 0 0 4px #43A047; background: #E8F7EC; }
.sp-cell.miss { box-shadow: inset 0 0 0 4px #E53935; }
@media (max-width: 560px) { .jg-wrap { grid-template-columns: 1fr; } .jg-preview img { width: 120px; } .sp-pair { gap: 8px; } }

/* Crossword */
.cw-wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; justify-content: center; }
.cw-grid { display: grid; gap: 2px; grid-template-columns: repeat(var(--cols), min(36px, calc((100vw - 80px) / var(--cols)))); }
.cw-clues { flex: 1 1 260px; min-width: 240px; }
.cw-cell, .cw-block { aspect-ratio: 1; }
.cw-cell { position: relative; background: #fff; border: 2px solid #1F2A44; border-radius: 4px; }
.cw-cell.on { background: #FFF6CC; }
.cw-cell small { position: absolute; top: 0; left: 2px; font-size: 10px; font-weight: 800; color: #1F2A44; }
.cw-cell input { width: 100%; height: 100%; border: none; background: transparent; text-align: center; font-size: 20px; font-weight: 800; text-transform: uppercase; padding: 6px 0 0; color: #1F2A44; }
.cw-cell input.wrong { color: #E53935; }
.cw-cell input:focus { outline: 3px solid var(--primary); outline-offset: -3px; }
.cw-clues ol { list-style: none; padding: 0; margin: 0 0 12px; }
.cw-clue { text-align: left; border: none; background: none; padding: 5px 8px; border-radius: 8px; cursor: pointer; font-size: 15px; width: 100%; }
.cw-clue.on { background: #FFF6CC; }
.cw-answers { text-align: left; max-width: 520px; margin: 10px auto; list-style: none; padding: 0; font-size: 15px; }

/* Movement break */
.mv-emoji { font-size: 110px; line-height: 1.1; animation: mv-bounce 1s infinite; display: inline-block; }
@keyframes mv-bounce { 50% { transform: translateY(-10px); } }
.mv-text { font-size: 28px; max-width: 640px; margin: 8px auto 16px; }
.mv-timer { --p: 100%; width: 130px; height: 130px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; background: conic-gradient(var(--primary) var(--p), #E3ECF7 0); }
.mv-timer span { width: 104px; height: 104px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 42px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .mv-emoji, .es-chest { animation: none; } }

/* Riddle of the day */
.riddle-card { background: linear-gradient(135deg, #F4ECFF, #E8F3FF); border-radius: 20px; padding: 16px 18px; border: 2px solid #D9C6FF; }
.riddle-head { font-size: 17px; }
.riddle-q { font-size: 19px; font-weight: 700; margin: 8px 0 12px; }
.riddle-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }

/* Performance tasks */
.pt-scenario { display: flex; gap: 14px; align-items: flex-start; background: #F7FAFE; border-radius: 16px; padding: 14px 16px; font-size: 17px; line-height: 1.55; }
.pt-scenario p { margin: 0 0 8px; }
.pt-emoji { font-size: 44px; line-height: 1; }
.pt-table { margin: 12px auto; max-width: 560px; }
.pt-part { border-top: 2px dashed #DCE6F2; padding-top: 12px; margin-top: 14px; }
.pt-part h3 { margin: 0; }
.pt-check { background: #FFF8E1; border-radius: 12px; padding: 10px 14px; margin: 14px 0; }
.pt-guide { background: #F0F7EE; border-left: 4px solid #43A047; padding: 8px 12px; border-radius: 8px; font-size: 14px; white-space: pre-line; }
.pt-points { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pt-pt { min-width: 44px; justify-content: center; }
.pt-mark-part .w-body { min-height: 2.5em; }

/* Reading fluency */
.fl-read { font-size: 22px; line-height: 1.8; max-width: 680px; margin: 10px auto 16px; padding: 16px 18px; background: #FFFDF6; border-radius: 16px; border: 2px solid #F1E7C8; }
.fl-read.reading { border-color: #E53935; box-shadow: 0 0 0 4px #FDE0DE; }
.fl-controls audio { width: 100%; max-width: 420px; margin: 8px auto; display: block; }
.rec-on { background: #E53935 !important; border-color: #E53935 !important; animation: fl-pulse 1.2s infinite; }
@keyframes fl-pulse { 50% { box-shadow: 0 0 0 10px rgba(229, 57, 53, .15); } }
.fl-audio { width: 100%; max-width: 480px; margin-bottom: 10px; }
.fl-passage { font-size: 19px; line-height: 2; user-select: none; text-align: left; }
.fl-word { cursor: pointer; padding: 2px 3px; border-radius: 6px; }
.fl-word:hover { background: #EAF3FF; }
.fl-word.err { background: #FDE0DE; color: #B71C1C; text-decoration: line-through; }
.fl-word.unread { color: #A6B1C2; }
.fl-word.last { box-shadow: inset 0 -3px 0 #1E63D6; }
.fl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.fl-stats > div { background: #F7FAFE; border-radius: 14px; padding: 10px; text-align: center; }
.fl-stats b { display: block; font-size: 32px; }
.fl-stats span { font-size: 13px; color: #5B6B82; }

/* Bar models */
.bm-story { display: flex; gap: 8px; align-items: flex-start; background: #F7FAFE; border-radius: 14px; padding: 12px 16px; font-size: 18px; line-height: 1.5; }
.bm-story p { margin: 0; flex: 1; }
.bm-choices { display: grid; gap: 10px; }
.bm-choice { display: block; padding: 14px; }
.bm-model { display: grid; gap: 8px; width: 100%; }
.bm-row { display: flex; align-items: center; gap: 8px; }
.bm-name { flex: 0 0 72px; font-size: 13px; font-weight: 700; text-align: right; color: #5B6B82; }
.bm-bar { flex: 1; display: flex; height: 40px; border: 2px solid #1F2A44; border-radius: 6px; overflow: hidden; }
.bm-seg { display: grid; place-items: center; border-right: 2px solid #1F2A44; font-size: 14px; min-width: 34px; }
.bm-seg:last-child { border-right: none; }
.bm-seg.c0 { background: #BBDEFB; } .bm-seg.c1 { background: #FFE0B2; } .bm-seg.c2 { background: #C8E6C9; } .bm-seg.c3 { background: #F8BBD0; }
.bm-seg.bm-gap { background: repeating-linear-gradient(45deg, #fff 0 6px, #FDE0DE 6px 12px); }
.bm-seg.bm-empty { background: #fff; }
.bm-brace { text-align: center; border: 2px solid #8592A6; border-bottom: none; border-radius: 10px 10px 0 0; height: 18px; margin-left: 80px; font-size: 14px; line-height: 0; }
.bm-brace b { background: #fff; padding: 0 6px; position: relative; top: -2px; }
.bm-under { margin-left: 80px; text-align: center; border: 2px solid #8592A6; border-top: none; border-radius: 0 0 10px 10px; height: 14px; font-size: 14px; line-height: 28px; }
.bm-big { max-width: 560px; margin: 12px auto; }
.bm-answer .input { width: 140px; font-size: 22px; text-align: center; display: inline-block; }
.bm-unit { font-size: 20px; font-weight: 700; margin: 0 4px; }

/* Listening */
.ls-ear { display: inline-block; }
.ls-ear.on { animation: mv-bounce 0.8s infinite; }
.ls-text { text-align: left; max-width: 640px; margin: 12px auto; background: #F7FAFE; border-radius: 12px; padding: 10px 14px; }

/* Curriculum units */
.unit-list .unit-n { width: 32px; height: 32px; border-radius: 50%; background: #EAF3FF; display: grid; place-items: center; font-weight: 800; color: #1E63D6; }
.danger-box { border: 2px solid #F3C2BC; }
.danger-box summary { cursor: pointer; color: #B42318; }

/* Spreadsheet pictures in questions */
.q-sheet { border-collapse: collapse; font-size: 15px; background: #fff; box-shadow: 0 2px 0 rgba(12, 33, 82, .08); }
.q-sheet th, .q-sheet td { border: 1px solid #C7D3E3; padding: 6px 12px; text-align: left; }
.q-sheet th { background: #EEF3F9; color: #5B6B82; font-weight: 800; text-align: center; font-size: 13px; min-width: 28px; }
.q-sheet td.hd { font-weight: 800; background: #E6F6F5; }

/* Typing trainer */
.ty-tips { margin: 0 auto 16px; max-width: 460px; }
.ty-line { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: clamp(22px, 5vw, 34px); letter-spacing: .04em; line-height: 1.5; margin: 18px auto 6px; padding: 14px 16px; border-radius: 14px; background: #F4F8FC; border: 2px solid var(--line); cursor: text; }
.ty-line .w { white-space: nowrap; }
.ty-line .sp { display: inline-block; }
.ty-line [data-i] { border-radius: 4px; padding: 0 1px; transition: color .1s; }
.ty-line [data-i].done { color: var(--ict); }
.ty-line [data-i].now { background: #FFE58A; box-shadow: 0 3px 0 #E0A800; }
.ty-line [data-i].slip { animation: ty-slip .35s; }
@keyframes ty-slip { 0%, 100% { background: #FFE58A; } 40% { background: #FFB3A8; transform: translateY(-2px); } }
.ty-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ty-kb { display: grid; gap: 6px; margin: 16px auto 0; max-width: 560px; user-select: none; }
.ty-row { display: flex; justify-content: center; gap: 5px; }
.ty-row.r1 { padding-left: 14px; }
.ty-row.r2 { padding-right: 20px; }
.ty-key { flex: 0 1 46px; min-width: 0; height: 46px; border: 0; border-radius: 9px; background: #fff; box-shadow: 0 3px 0 #C7D3E3; font: 800 16px var(--font-body); color: var(--ink); cursor: pointer; position: relative; }
.ty-key.home { background: #EAF7F6; }
.ty-key.bump::after { content: ''; position: absolute; left: 35%; right: 35%; bottom: 7px; height: 2px; border-radius: 2px; background: #8AA0B8; }
.ty-key.wide { flex-basis: 80px; font-size: 13px; }
.ty-key.space { flex-basis: 300px; font-size: 13px; color: var(--ink-soft); }
.ty-key.next { background: #FFD43B; box-shadow: 0 3px 0 #E0A800; animation: ty-glow 1s ease-in-out infinite; }
.ty-key.on { background: var(--ict); color: #fff; }
.ty-key:active { transform: translateY(2px); box-shadow: 0 1px 0 #C7D3E3; }
@keyframes ty-glow { 50% { box-shadow: 0 3px 0 #E0A800, 0 0 0 5px rgba(255, 212, 59, .35); } }
@media (prefers-reduced-motion: reduce) { .ty-key.next { animation: none; } }
@media (max-width: 520px) { .ty-key { height: 40px; font-size: 14px; } .ty-row { gap: 3px; } .ty-row.r1 { padding-left: 8px; } }
.ty-stats { display: flex; justify-content: center; gap: 28px; margin: 10px 0 14px; }
.ty-stats div { display: grid; }
.ty-stats b { font: 800 30px var(--font-head); color: var(--ict); }
.ty-stats span { font-size: 13px; color: var(--ink-soft); }

/* Background music on/off */
.music-btn { margin-left: auto; margin-right: 6px; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; font-size: 17px; background: var(--primary-tint); cursor: pointer; flex: none; }
.music-btn[aria-pressed="false"] { opacity: .7; }
.music-btn + .help-btn { margin-left: 0; }

/* Virtual field trips */
.ft-intro .ft-thumb { width: 100%; max-width: 560px; height: auto; border-radius: 16px; box-shadow: var(--shadow); }
.ft-steps { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 16px; }
.ft-steps span { display: grid; background: #F4F8FC; border-radius: 14px; padding: 10px 16px; min-width: 120px; }
.ft-steps small { color: var(--ink-soft); }
.ft-panel { padding: 14px; }
.ft-scene { position: relative; margin: 10px 0; border-radius: 14px; overflow: hidden; cursor: crosshair; line-height: 0; user-select: none; touch-action: manipulation; }
.ft-scene img { width: 100%; height: auto; display: block; }
.ft-dot { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 3px solid #fff; background: #FFB800; color: #1E2430; font: 800 16px var(--font-head); cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 0 rgba(255, 184, 0, .7); animation: ft-glow 1.6s ease-out infinite; line-height: 1; z-index: 2; }
.ft-dot.seen { background: #3DBE6B; color: #fff; animation: none; opacity: .85; }
.ft-dot.nudge { animation: ft-glow .8s ease-out 3, story-wiggle .4s ease-in-out 2; }
@keyframes ft-glow { 0% { box-shadow: 0 0 0 0 rgba(255, 184, 0, .75); } 100% { box-shadow: 0 0 0 18px rgba(255, 184, 0, 0); } }
.ft-ring { position: absolute; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; border: 4px solid #3DBE6B; background: rgba(255, 255, 255, .35); display: grid; place-items: center; font-size: 22px; line-height: 1; animation: pop-in .35s ease-out; pointer-events: none; }
.ft-miss { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .9); animation: ft-miss .6s ease-out forwards; pointer-events: none; }
@keyframes ft-miss { to { transform: scale(1.8); opacity: 0; } }
.ft-hintmark { position: absolute; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 4px dashed #FFD43B; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .18); animation: ft-hint 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes ft-hint { 50% { transform: translate(-50%, -50%) scale(.85); } }
.ft-card { position: absolute; left: 8px; right: 8px; z-index: 3; max-width: 460px; margin: 0 auto; background: #fff; border-radius: 14px; padding: 12px 14px; line-height: 1.45; box-shadow: 0 8px 24px rgba(12, 33, 82, .25); cursor: default; animation: pop-in .25s ease-out; }
.ft-card p { margin: 4px 0 8px; font-size: 16px; }
.ft-find { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0 10px; }
.ft-chip { background: #F4F8FC; border: 2px solid var(--line); border-radius: 999px; padding: 4px 10px; font-weight: 700; font-size: 14px; }
.ft-chip.got { background: #E7F8EC; border-color: #3DBE6B; text-decoration: line-through; color: #2E7D46; }
@media (prefers-reduced-motion: reduce) { .ft-dot, .ft-hintmark { animation: none; } }
@media (max-width: 520px) { .ft-dot { width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 13px; } .ft-ring { width: 40px; height: 40px; margin: -20px 0 0 -20px; font-size: 16px; } }

/* Notices from the XVH team (bulk messages) */
.xvh-notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 0 0 14px; border-radius: 16px; background: #FFF8E1; border: 2px solid #F2C94C; }
.xvh-notice .grow { display: grid; gap: 2px; }
.xn-icon { font-size: 26px; }

/* Lesson plans */
.plan-objectives fieldset { border: 0; padding: 0; margin: 0 0 12px; }
.plan-objectives legend { font-weight: 800; color: var(--ink-soft); font-size: 13px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; }
.plan-obj { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-weight: 600; cursor: pointer; }
.plan-obj input { margin-top: 4px; accent-color: var(--primary); }
.plan-section + .plan-section { border-top: 2px dashed var(--line); margin-top: 16px; padding-top: 16px; }
.plan-section .field > span:first-child { font-family: var(--font-head); font-size: 19px; }
.plan-section .field .hint { display: block; margin-bottom: 4px; }
.plan-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.plan-links:empty { margin: 0; }
.plan-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--primary-tint); border: 2px solid var(--primary); border-radius: 999px; padding: 4px 6px 4px 12px; font-weight: 800; font-size: 14px; }
.plan-picker { border: 0; border-radius: 20px; padding: 20px; width: min(560px, calc(100vw - 32px)); max-height: 80vh; box-shadow: var(--shadow); }
.plan-picker::backdrop { background: rgba(10, 30, 60, .45); }
.plan-picker .list { max-height: 50vh; overflow-y: auto; }
.plan-facts { width: 100%; border-collapse: collapse; }
.plan-facts th, .plan-facts td { text-align: left; padding: 6px 8px; vertical-align: top; border-bottom: 1px solid #E4ECF7; }
.plan-facts th { color: var(--ink-soft); font-size: 13px; width: 16%; white-space: nowrap; }
.plan-text { white-space: pre-wrap; margin-top: 4px; }
.plan-part + .plan-part { border-top: 2px dashed var(--line); margin-top: 14px; padding-top: 4px; }
@media (max-width: 560px) { .plan-facts th, .plan-facts td { display: block; width: auto; border: 0; padding: 2px 0; } .plan-facts td { margin-bottom: 8px; } }
@media print {
  .lesson-plan .box { box-shadow: none; border: 1px solid #ccc; padding: 12px 16px; }
  .lesson-plan .plan-part { break-inside: avoid; }
}