/* =====================================================================
   MaiMigo — the ONE stylesheet.
   Every colour/radius/font comes from tokens on :root that the theme
   engine (assets/js/core.js → applyTheme) writes from the admin theme.
   Never hard-code a brand colour below: use var(--c-*) or color-mix().
   ===================================================================== */
:root {
  /* theme tokens (defaults = "Migo Violet"; overwritten at runtime) */
  --c-primary: #6D4AE0; --c-primary-ink: #fff; --c-primary-soft: #F0EBFF; --c-accent: #FFB547;
  --c-bg: #F7F5FC; --c-surface: #fff; --c-surface-2: #FAF8FF; --c-text: #1E1B2E; --c-muted: #686580; --c-border: #E5E0F0;
  --c-success: #1E9E6A; --c-warning: #C98500; --c-danger: #D64545;
  --radius: 14px; --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Baloo 2', 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* fixed scales (meaningful, not brand) */
  --lv-starter: #9AA3AF; --lv-prea1: #F2A93B; --lv-a1: #E8743B; --lv-a2: #D8457A; --lv-b1: #8A4FD8; --lv-b2: #3F6FE0; --lv-c1: #1A9C8C; --lv-c2: #2E7D32;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: calc(var(--radius) * .55); --r-lg: calc(var(--radius) * 1.45);
  --shadow: 0 1px 2px color-mix(in srgb, var(--c-text) 6%, transparent), 0 8px 24px -12px color-mix(in srgb, var(--c-primary) 22%, transparent);
  --ring: 0 0 0 3px color-mix(in srgb, var(--c-primary) 35%, transparent);
  --rail: 248px; --top: 60px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-text); font: 400 15px/1.55 var(--font), system-ui, -apple-system, 'Segoe UI', sans-serif; }
img, svg { max-width: 100%; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display), var(--font), sans-serif; line-height: 1.15; margin: 0 0 var(--sp-3); letter-spacing: -.01em; }
h1 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; font-family: var(--font); }
p { margin: 0 0 var(--sp-3); }
small, .muted { color: var(--c-muted); }
.muted { font-size: 13.5px; }
hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--sp-5) 0; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- layout primitives ---------- */
.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.grid { display: grid; gap: var(--sp-4); }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); gap: var(--sp-5); align-items: start; }
@media (max-width: 980px) { .split, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } .grid.c2 { grid-template-columns: 1fr; } }

/* ---------- app shell ---------- */
.shell { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--c-surface); border-right: 1px solid var(--c-border); padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-4); }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 10px; font: 700 19px/1 var(--font-display), sans-serif; color: var(--c-text); padding: 4px 8px; }
.brand:hover { text-decoration: none; }
.brand-text { display: grid; gap: 3px; }
.brand-tag { font: 600 11px/1 var(--font); color: var(--c-muted); letter-spacing: .01em; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--c-primary); color: var(--c-primary-ink); display: grid; place-items: center; font-size: 19px; flex: none; }
.brand img { height: 34px; width: auto; display: block; }
.role-switch { display: grid; gap: 4px; }
.role-switch select { width: 100%; }
.nav { display: grid; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); color: var(--c-text); font-weight: 500; font-size: 14.5px; }
.nav a:hover { background: var(--c-surface-2); text-decoration: none; }
.nav a.on { background: var(--c-primary-soft); color: var(--c-primary); font-weight: 600; }
.nav a .ext { margin-left: auto; color: var(--c-muted); font-size: 13px; } /* 2.39.11: a link that leaves the site */
.nav-edit li { list-style: none; } .nav-edit ul { padding-left: 0; margin: 0; } .nav-edit ul ul { padding-left: 28px; } .nav-edit .ne-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); margin: 4px 0; } .nav-edit .ne-row.off { opacity: .55; } .nav-edit .ne-row.drag { outline: 2px dashed var(--c-primary); } .nav-edit .handle { cursor: grab; color: var(--c-muted); }
.nav .ico { width: 20px; text-align: center; flex: none; font-size: 16px; }
.nav .count { margin-left: auto; background: var(--c-accent); color: #1f1300; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 7px; }
.nav-group > summary { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); cursor: pointer; list-style: none; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); margin-top: 6px; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: '▸'; margin-left: auto; transition: transform .15s; }
.nav-group[open] > summary::after { transform: rotate(90deg); }
.nav-group > summary:hover { background: var(--c-surface-2); color: var(--c-text); }
.nav-group > summary .count { margin-left: auto; }
.nav-group > summary .count + ::after { margin-left: 6px; }
.nav-group > a { padding-left: 22px; }
.site-tag { font-size: 12.5px; font-weight: 700; padding: 6px 10px; border-radius: var(--r-sm); background: var(--c-surface-2); color: var(--c-muted); }
.site-tag.hq { background: #1f2a44; color: #fff; }
.rail-foot { margin-top: auto; display: grid; gap: var(--sp-2); }
.rail-foot .btn { white-space: normal; text-align: center; line-height: 1.25; padding: 8px 12px; height: auto; }
input[type=color] { width: 100%; height: 42px; padding: 4px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); cursor: pointer; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; height: var(--top); display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-5); background: color-mix(in srgb, var(--c-bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); }
.topbar .brand { display: none; }
.content { padding: var(--sp-5); max-width: 1200px; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-5); }
.page-head h1 { margin: 0; }
.page-head p { margin: 4px 0 0; color: var(--c-muted); max-width: 70ch; }
.icon-btn { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--c-border); background: var(--c-surface); display: grid; place-items: center; cursor: pointer; color: var(--c-text); font-size: 17px; }
.icon-btn .dot { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--c-danger); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }
.tabbar { display: none; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .rail { display: none; }
  .topbar { padding: 0 var(--sp-4); }
  .topbar .brand { display: flex; }
  .content { padding: var(--sp-4) var(--sp-4) 92px; }
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--c-surface); border-top: 1px solid var(--c-border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; font-size: 11px; color: var(--c-muted); padding: 4px 0; }
  .tabbar a .ico { font-size: 19px; }
  .tabbar a.on { color: var(--c-primary); font-weight: 600; }
  .tabbar a:hover { text-decoration: none; }
}

/* ---------- public layout ---------- */
.pub-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--c-surface) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--c-border); }
.pub-header .inner, .pub-main, .pub-footer .inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-5); }
.pub-header .inner { height: 64px; display: flex; align-items: center; gap: var(--sp-5); }
.pub-nav { display: flex; gap: var(--sp-4); }
.pub-nav a { color: var(--c-text); font-weight: 500; }
.pub-main { padding-top: var(--sp-5); padding-bottom: var(--sp-7); }
.pub-footer { border-top: 1px solid var(--c-border); background: var(--c-surface); padding: var(--sp-6) 0; color: var(--c-muted); font-size: 14px; }
.pub-footer .inner { display: flex; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap; }
@media (max-width: 760px) { .pub-nav { display: none; } .pub-header .inner, .pub-main, .pub-footer .inner { padding: 0 var(--sp-4); } .pub-main { padding-top: var(--sp-4); } }

/* hero: Migo + the level path is the one bold moment */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: var(--sp-6); align-items: center; padding: var(--sp-6) 0 var(--sp-5); }
.hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.02; margin-bottom: var(--sp-4); }
.hero .lead { font-size: 18px; color: var(--c-muted); max-width: 52ch; }
.hero-art { position: relative; }
.hero-art .sage-big { width: min(260px, 70%); display: block; margin: 0 auto -18px; position: relative; z-index: 1; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; padding-top: var(--sp-4); } .hero-art { order: -1; } .hero-art .sage-big { width: 150px; } }
.value-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); margin: var(--sp-6) 0; }
.value-list h3 { margin-bottom: 6px; }
.value-list p { color: var(--c-muted); margin: 0; }
@media (max-width: 860px) { .value-list { grid-template-columns: 1fr; } }
.audience { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); overflow: hidden; }
.audience > div { padding: var(--sp-5); border-right: 1px solid var(--c-border); }
.audience > div:last-child { border-right: 0; }
.audience ul { margin: var(--sp-2) 0 0; padding-left: 18px; color: var(--c-muted); font-size: 14px; }
@media (max-width: 860px) { .audience { grid-template-columns: 1fr 1fr; } .audience > div:nth-child(2n) { border-right: 0; } .audience > div { border-bottom: 1px solid var(--c-border); } }

/* ---------- surfaces ---------- */
.panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); }
.panel.tight { padding: var(--sp-4); }
.panel > header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.panel > header h2, .panel > header h3 { margin: 0; }
.panel.soft { background: var(--c-primary-soft); border-color: transparent; }
.panel.flush { padding: 0; overflow: hidden; }
.note { border-left: 3px solid var(--c-accent); background: color-mix(in srgb, var(--c-accent) 12%, var(--c-surface)); padding: var(--sp-3) var(--sp-4); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.note.danger { border-color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 9%, var(--c-surface)); }
.note.ok { border-color: var(--c-success); background: color-mix(in srgb, var(--c-success) 10%, var(--c-surface)); }

/* ---------- buttons & forms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid transparent; font: 600 14.5px/1 var(--font), sans-serif; cursor: pointer; background: var(--c-primary); color: var(--c-primary-ink); text-decoration: none !important; white-space: nowrap; transition: filter .15s, background .15s; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border); }
.btn.secondary:hover { background: var(--c-surface-2); filter: none; }
.btn.ghost { background: transparent; color: var(--c-primary); }
.btn.ghost:hover { background: var(--c-primary-soft); filter: none; }
.btn.accent { background: var(--c-accent); color: #241600; }
.btn.danger { background: var(--c-danger); color: #fff; }
.btn.sm { min-height: 32px; padding: 0 11px; font-size: 13px; }
.btn.lg { min-height: 50px; padding: 0 24px; font-size: 16px; border-radius: var(--radius); }
.btn.block { width: 100%; }
.btn[disabled], .btn.loading { opacity: .55; pointer-events: none; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 13.5px; font-weight: 600; }
.field .hint { font-size: 12.5px; color: var(--c-muted); font-weight: 400; }
.input, .select, .textarea, input:not([type]), input[type=text], input[type=password], input[type=url], input[type=tel], input[type=month], input[type=email], input[type=number], input[type=date], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-text); font: inherit; }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
textarea.code { font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; min-height: 320px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-primary); box-shadow: var(--ring); }
.form { display: grid; gap: var(--sp-4); }
.form .row > .field { flex: 1 1 180px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-primary); }
/* 2.9.3 language menu: VI · UK · US */
.lang-menu { position: relative; } .lang-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px 4px 9px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface-2); cursor: pointer; font: 600 13px var(--font); color: var(--c-text); }
.lang-menu > summary::-webkit-details-marker { display: none; } .lang-menu[open] > summary, .lang-menu > summary:hover { border-color: var(--c-primary); }
.lang-code { display: inline-grid; place-items: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 6px; background: var(--c-primary-soft); color: var(--c-primary); font: 800 11px/1 var(--font); letter-spacing: .03em; }
.lang-caret { font-size: 10px; color: var(--c-muted); }
.lang-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 270px; max-width: calc(100vw - 24px); padding: 6px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: var(--shadow-lg, 0 12px 32px rgba(20,16,40,.18)); display: grid; gap: 2px; }
.lang-pop button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--c-text); font: 600 14px var(--font); cursor: pointer; }
.lang-pop button:hover, .lang-pop button:focus-visible { background: var(--c-surface-2); } .lang-pop button.on { background: var(--c-primary-soft); } .lang-pop button.lang-off, .lang-pop button:disabled { opacity: .45; cursor: not-allowed; background: transparent; } /* 2.52 */
.lang-name { flex: 1; display: grid; } .lang-name small { font-weight: 400; font-size: 12px; color: var(--c-muted); } .lang-tick { color: var(--c-primary); font-weight: 800; }
.eng-note { display: flex; gap: 10px; align-items: center; margin: 0 0 var(--sp-3); padding: 8px 12px; border-radius: var(--r-sm); background: var(--c-surface-2); border: 1px dashed var(--c-border); font-size: 13.5px; color: var(--c-muted); }
.eng-chip { flex: none; display: inline-grid; place-items: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 6px; background: var(--c-primary); color: var(--c-primary-ink); font: 800 11px/1 var(--font); }
.seg { display: inline-flex; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font: 600 13px var(--font); color: var(--c-muted); cursor: pointer; }
.seg button.on { background: var(--c-surface); color: var(--c-primary); box-shadow: var(--shadow); }

/* ---------- data display ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-border); white-space: nowrap; }
.badge.test-tag { background: #fff1c2; color: #5a3d00; border-color: #e7b93c; font-size: 11px; } /* 2.79 (owner): which part of the Flyers test a lesson covers */
.badge.kind { background: color-mix(in srgb, var(--c-accent, var(--c-primary)) 12%, var(--c-surface)); color: var(--c-text); border-color: transparent; }
.badge.primary { background: var(--c-primary-soft); color: var(--c-primary); border-color: transparent; }
.badge.ok { background: color-mix(in srgb, var(--c-success) 13%, var(--c-surface)); color: var(--c-success); border-color: transparent; }
.badge.warn { background: color-mix(in srgb, var(--c-warning) 15%, var(--c-surface)); color: var(--c-warning); border-color: transparent; }
.badge.danger { background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface)); color: var(--c-danger); border-color: transparent; }
.badge.premium { background: linear-gradient(90deg, color-mix(in srgb, var(--c-accent) 30%, var(--c-surface)), color-mix(in srgb, var(--c-accent) 14%, var(--c-surface))); color: #6a4300; border-color: transparent; }
.lv { display: inline-grid; place-items: center; min-width: 46px; height: 26px; padding: 0 8px; border-radius: 8px; color: #fff; font: 700 13px/1 var(--font-display), sans-serif; background: var(--lv, var(--lv-starter)); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.stat { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-4); }
.stat b { display: block; font: 700 28px/1.1 var(--font-display), sans-serif; }
.stat span { color: var(--c-muted); font-size: 13px; }
.list { display: grid; }
.list > .item { display: flex; gap: var(--sp-3); align-items: center; padding: 12px 0; border-bottom: 1px solid var(--c-border); }
.list > .item:last-child { border-bottom: 0; }
.list > a.item { color: inherit; }
.list > a.item:hover { text-decoration: none; background: var(--c-surface-2); }
.item .title { font-weight: 600; }
.item .sub { color: var(--c-muted); font-size: 13px; }
.table-wrap { overflow-x: auto; position: relative; /* 2.82: keeps a caption's .sr-only inside, so it cannot widen the page on a phone */  border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
table.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-weight: 600; color: var(--c-muted); font-size: 12.5px; padding: 10px 12px; border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); white-space: nowrap; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--c-border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-pct { display: inline-block; min-width: 44px; text-align: center; padding: 3px 6px; border-radius: 6px; font-weight: 700; font-size: 13px; }
.bar { height: 8px; border-radius: 99px; background: var(--c-surface-2); border: 1px solid var(--c-border); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--c-primary); border-radius: 99px; }
.empty { text-align: center; padding: var(--sp-6) var(--sp-4); color: var(--c-muted); }
.empty .sage-mini { width: 74px; margin: 0 auto var(--sp-3); display: block; }
.empty h3 { color: var(--c-text); }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); display: grid; place-items: center; font-weight: 700; flex: none; overflow: hidden; }
.avatar svg { width: 100%; height: 100%; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.lg { width: 64px; height: 64px; font-size: 22px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--c-border); margin-bottom: var(--sp-4); overflow-x: auto; }
.tabs a, .tabs button { padding: 10px 14px; color: var(--c-muted); font-weight: 600; font-size: 14px; border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap; font-family: var(--font); }
.tabs .on { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.tabs a:hover { text-decoration: none; color: var(--c-text); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 14px; }
.kv dt { color: var(--c-muted); }
.kv dd { margin: 0; font-weight: 500; }
.code-chip { font: 700 18px/1 ui-monospace, Menlo, monospace; letter-spacing: .14em; background: var(--c-surface-2); border: 1px dashed var(--c-border); border-radius: var(--r-sm); padding: 8px 12px; display: inline-block; }

/* ---------- content cards (library) ---------- */
.ccard { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; color: inherit; position: relative; }
.ccard:hover { text-decoration: none; border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border)); }
.ccard .cover { aspect-ratio: 16 / 10; background: var(--c-primary-soft); display: grid; place-items: center; overflow: hidden; }
.ccard .cover img { width: 100%; height: 100%; object-fit: cover; }
.ccard .cover .glyph { font-size: 46px; }
.ccard .body { padding: var(--sp-3) var(--sp-4) var(--sp-4); display: grid; gap: 6px; }
.ccard .title { font-weight: 700; line-height: 1.3; }
.ccard .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--c-muted); }
.ccard .lock { position: absolute; top: 10px; right: 10px; }
.filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-bottom: var(--sp-4); }
.filters input[type=search] { max-width: 280px; }
.filters select { width: auto; }
.chip { border: 1px solid var(--c-border); background: var(--c-surface); border-radius: 999px; padding: 6px 13px; font: 600 13px var(--font); color: var(--c-text); cursor: pointer; }
.chip.on { background: var(--c-primary); color: var(--c-primary-ink); border-color: var(--c-primary); }

/* ---------- signature: the Migo level path ---------- */
.levelpath { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 6px; padding: var(--sp-4) 0 0; }
.levelpath .step { position: relative; display: grid; justify-items: center; gap: 6px; }
.levelpath .stone { width: 100%; max-width: 74px; border-radius: 12px 12px 6px 6px; background: color-mix(in srgb, var(--lv) 16%, var(--c-surface)); border: 2px solid color-mix(in srgb, var(--lv) 35%, transparent); position: relative; overflow: hidden; }
.levelpath .stone > i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--lv); opacity: .9; }
.levelpath .step.done .stone { background: var(--lv); border-color: var(--lv); }
.levelpath .step.target .stone { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv) 30%, transparent); }
.levelpath .name { font: 700 13px/1 var(--font-display), sans-serif; color: var(--c-muted); }
.levelpath .step.done .name, .levelpath .step.target .name { color: var(--c-text); }
.levelpath .sage-on { position: absolute; bottom: calc(100% - 2px); width: 46px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .12)); }
.levelpath.compact { gap: 3px; padding-top: 0; }
.levelpath.compact .name { font-size: 10.5px; }
.sage-card { display: grid; grid-template-columns: 84px 1fr; gap: var(--sp-4); align-items: center; }
.sage-card .sage-av { width: 84px; }
.bubble { position: relative; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); font-size: 15.5px; }
.bubble::before { content: ''; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; background: inherit; border-left: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); transform: rotate(45deg); }
.skillbars { display: grid; gap: 10px; }
.skillbars .sk { display: grid; grid-template-columns: 96px 1fr 44px; gap: 10px; align-items: center; font-size: 13.5px; }
.skillbars .sk b { text-align: right; font-variant-numeric: tabular-nums; }
.ring { --p: 0; width: 92px; height: 92px; border-radius: 50%; background: conic-gradient(var(--c-primary) calc(var(--p) * 1%), var(--c-surface-2) 0); display: grid; place-items: center; flex: none; }
.ring > span { width: 72px; height: 72px; border-radius: 50%; background: var(--c-surface); display: grid; place-items: center; font: 700 22px/1 var(--font-display), sans-serif; }

/* ---------- ads ---------- */
.ad-slot { border: 1px dashed color-mix(in srgb, var(--c-muted) 45%, transparent); border-radius: var(--radius); background: var(--c-surface); padding: var(--sp-3) var(--sp-4); display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center; }
.ad-slot .ad-tag { font-size: 11px; color: var(--c-muted); grid-column: 1 / -1; margin-bottom: -4px; }
.ad-slot img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); }
.ad-slot .ad-title { font-weight: 700; }
.ad-slot .ad-body { font-size: 13.5px; color: var(--c-muted); }
@media (max-width: 560px) { .ad-slot { grid-template-columns: 1fr; } .ad-slot img { display: none; } }

/* ---------- modal & toast ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; background: color-mix(in srgb, var(--c-text) 45%, transparent); display: grid; place-items: center; padding: var(--sp-4); animation: fade .15s ease-out; }
.modal { background: var(--c-surface); border-radius: var(--r-lg); width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .35); }
.modal.wide { width: min(880px, 100%); }
.modal > header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; background: var(--c-surface); z-index: 1; }
.modal > header h2 { margin: 0; font-size: 20px; }
.modal > .body { padding: var(--sp-5); }
.modal > footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--c-border); }
.toasts { position: fixed; z-index: 200; bottom: 20px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; width: min(440px, calc(100% - 32px)); }
.toast { background: var(--c-text); color: var(--c-bg); padding: 12px 16px; border-radius: var(--r-sm); font-weight: 500; box-shadow: var(--shadow); animation: rise .2s ease-out; }
.toast.err { background: var(--c-danger); color: #fff; }
.toast.ok { background: var(--c-success); color: #fff; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--c-primary-soft); border-top-color: var(--c-primary); animation: spin .8s linear infinite; margin: 60px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- auth pages ---------- */
.auth { min-height: calc(100vh - 140px); display: grid; place-items: center; padding: var(--sp-5) 0; }
.auth .panel { width: min(460px, 100%); }
.role-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.role-pick label { border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-3); text-align: center; cursor: pointer; font-weight: 600; font-size: 14px; display: grid; gap: 4px; }
.role-pick input { position: absolute; opacity: 0; }
.role-pick label:has(input:checked) { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); }
.role-pick .ico { font-size: 24px; }
.role-pick.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 520px) { .role-pick.four { grid-template-columns: repeat(2, 1fr); } }
.btn.google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn.google:hover { background: #f8f9fa; border-color: #c6c9cc; }
.btn.google svg { flex: none; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; cursor: pointer; }
.chk input { margin-top: 3px; width: 18px; height: 18px; flex: none; }

/* ---------- worksheet player ---------- */
.player-head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.player-head h1 { margin: 0; font-size: 26px; }
.ws-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sp-5); align-items: start; }
.ws-layout.single { grid-template-columns: minmax(0, 760px); justify-content: center; }
@media (max-width: 980px) { .ws-layout { grid-template-columns: 1fr; } }
.ws-learn { position: sticky; top: calc(var(--top) + 16px); max-height: calc(100vh - var(--top) - 32px); overflow: auto; }
@media (max-width: 980px) { .ws-learn { position: static; max-height: none; } }
.ws-section + .ws-section { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--c-border); }
.ws-section h3 { display: flex; align-items: center; gap: 8px; }
.reading { font-size: 16.5px; line-height: 1.75; }
.reading.poem p { margin: 0; }
.reading.poem .gap { height: 12px; }
.reading figure { margin: 0 0 var(--sp-4); }
.reading figure img { width: 100%; border-radius: var(--radius); background: var(--c-surface-2); max-height: 320px; object-fit: contain; }
.vocab { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--sp-2); }
.vocab .w { border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 10px 12px; display: grid; gap: 2px; }
.vocab .w b { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 15.5px; }
.vocab .w span { color: var(--c-muted); font-size: 13px; }
.say { border: 0; background: var(--c-primary-soft); color: var(--c-primary); width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 14px; flex: none; }
.say.playing { background: var(--c-primary); color: var(--c-primary-ink); }
.grammar-box { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-4); }
.grammar-box .form-line { font: 600 16px/1.4 var(--font); color: var(--c-primary); margin-bottom: 6px; }
.q { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); scroll-margin-top: calc(var(--top) + 16px); }
.q + .q { margin-top: var(--sp-3); }
.q.active { border-color: color-mix(in srgb, var(--c-primary) 55%, var(--c-border)); box-shadow: var(--ring); }
.q-head { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-3); }
.q-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); display: grid; place-items: center; font: 700 14px var(--font-display); }
.q.answered .q-num { background: var(--c-primary); color: var(--c-primary-ink); }
.q-prompt { font-size: 16.5px; font-weight: 600; flex: 1; }
.q-pts { font-size: 12.5px; color: var(--c-muted); white-space: nowrap; }
.opts { display: grid; gap: 8px; }
.opts.icons { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 11px 14px; border: 1.5px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); font: 500 15.5px/1.35 var(--font); color: var(--c-text); cursor: pointer; }
.opt:hover { border-color: color-mix(in srgb, var(--c-primary) 50%, var(--c-border)); }
.opt .key { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1.5px solid var(--c-border); display: grid; place-items: center; font: 700 13px var(--font); color: var(--c-muted); }
.opt .emoji { font-size: 30px; }
.opts.icons .opt { flex-direction: column; justify-content: center; text-align: center; padding: 14px 10px; }
.opt.sel { border-color: var(--c-primary); background: var(--c-primary-soft); }
.opt.sel .key { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-ink); }
.opt.right { border-color: var(--c-success); background: color-mix(in srgb, var(--c-success) 10%, var(--c-surface)); }
.opt.right .key { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.opt.wrong { border-color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 8%, var(--c-surface)); }
.opt.wrong .key { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.opt[aria-disabled=true] { cursor: default; }
.explain { margin-top: var(--sp-3); font-size: 14px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--c-surface-2); }
.q-tools { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.submit-bar { position: sticky; bottom: 0; z-index: 10; margin-top: var(--sp-4); background: color-mix(in srgb, var(--c-bg) 92%, transparent); backdrop-filter: blur(6px); border-top: 1px solid var(--c-border); padding: var(--sp-3) 0; display: flex; align-items: center; gap: var(--sp-3); }
@media (max-width: 860px) { .submit-bar { bottom: 64px; } }

/* Migo coach dock */
.sage-dock { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: grid; justify-items: end; gap: 10px; }
.sage-fab { display: flex; align-items: center; gap: 8px; border: 1px solid var(--c-border); background: var(--c-surface); border-radius: 999px; padding: 4px 14px 4px 4px; cursor: pointer; font: 700 15px var(--font-display); color: var(--c-text); box-shadow: var(--shadow); }
.sage-fab .sage-av { width: 44px; height: 44px; }
.sage-panel { width: min(360px, calc(100vw - 32px)); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .35); padding: var(--sp-4); max-height: min(70vh, 520px); overflow: auto; }
.sage-panel header { display: flex; align-items: center; gap: 10px; margin-bottom: var(--sp-3); }
.sage-panel header .sage-av { width: 38px; }
.sage-panel header b { font-family: var(--font-display); font-size: 17px; flex: 1; }
.sage-q { font-size: 13.5px; background: var(--c-surface-2); border-left: 3px solid var(--c-primary); padding: 8px 10px; border-radius: 0 8px 8px 0; margin-bottom: var(--sp-3); }
.sage-hints { margin: 0 0 var(--sp-3); padding-left: 20px; display: grid; gap: 8px; }
.sage-hints li::marker { color: var(--c-primary); font-weight: 700; }
.sage-hints li.latest { font-weight: 600; }
@media (max-width: 860px) { .sage-dock { right: 12px; bottom: 76px; } }

/* ---------- game ---------- */
.game { max-width: 760px; margin: 0 auto; }
.game-top { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.lives { font-size: 20px; letter-spacing: 2px; }
.game-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-6) var(--sp-5); text-align: center; }
.game-card .stim { font-size: 22px; font-weight: 600; margin: var(--sp-3) 0; }
.game-card .prompt { color: var(--c-muted); }
.game .opts { margin-top: var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.game .opt { justify-content: center; text-align: center; min-height: 60px; font-size: 17px; }
@media (max-width: 560px) { .game .opts { grid-template-columns: 1fr; } }
.trail { display: flex; gap: 4px; justify-content: center; margin-top: var(--sp-4); }
.trail i { width: 22px; height: 6px; border-radius: 3px; background: var(--c-surface-2); border: 1px solid var(--c-border); }
.trail i.ok { background: var(--c-success); border-color: var(--c-success); }
.trail i.no { background: var(--c-danger); border-color: var(--c-danger); }
.trail i.now { background: var(--c-primary); border-color: var(--c-primary); }
.stars { font-size: 40px; letter-spacing: 6px; }
.pop { animation: pop .35s ease-out; }
@keyframes pop { 40% { transform: scale(1.06); } }

/* ---------- misc ---------- */
.theme-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.swatch { border: 2px solid var(--c-border); border-radius: var(--radius); padding: 10px; cursor: pointer; background: var(--c-surface); text-align: left; font: 600 14px var(--font); color: var(--c-text); }
.swatch.on { border-color: var(--c-primary); box-shadow: var(--ring); }
.swatch .chips { display: flex; gap: 4px; margin-bottom: 8px; }
.swatch .chips i { width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .08); }
.issues { max-height: 320px; overflow: auto; font-size: 13px; display: grid; gap: 4px; }
.issues div { padding: 6px 10px; border-radius: 6px; }
.issues .e { background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface)); }
.issues .w { background: color-mix(in srgb, var(--c-warning) 10%, var(--c-surface)); }
.issues code { font-size: 12px; }
.chart { display: flex; align-items: flex-end; gap: 4px; height: 120px; padding-top: 8px; }
.chart > div { flex: 1; background: var(--c-primary); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.chart > div span { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--c-muted); white-space: nowrap; }
.dist { display: flex; height: 26px; border-radius: 8px; overflow: hidden; border: 1px solid var(--c-border); }
.dist > i { display: grid; place-items: center; color: #fff; font: 700 11px var(--font); font-style: normal; background: var(--lv, var(--lv-starter)); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print { .rail, .topbar, .tabbar, .sage-dock, .ad-slot, .submit-bar, .btn { display: none !important; } .shell { display: block; } body { background: #fff; } }
/* action cells: keep table layout, align buttons right */
.table td.row { display: table-cell; text-align: right; white-space: nowrap; }
.table td.row > * + * { margin-left: 6px; }
/* ---- Migo floating coach (draggable) ---- */
.sage-dock { position: fixed; right: auto; bottom: auto; z-index: 45; display: block; touch-action: none; }
.sage-dock .sage-fab { touch-action: none; cursor: grab; user-select: none; position: relative; }
.sage-dock.dragging .sage-fab { cursor: grabbing; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35); transform: scale(1.04); }
.sage-dock .sage-panel { position: absolute; top: calc(100% + 10px); left: 0; }
.sage-dock.to-left .sage-panel { left: auto; right: 0; }
.sage-dock.to-up .sage-panel { top: auto; bottom: calc(100% + 10px); }
.sage-fab.nudge { animation: sage-nudge 1.2s ease-in-out 2; }
/* 2.55 (owner): the one Migo button, the same as in every game (adventure.css .adv-sage-fab): round, rainbow ring, a “?” badge */
.sage-fab { width: 66px; height: 66px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; border: 4px solid transparent; background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from 210deg, #ff5f6d, #ffb547, #ffe259, #5ad16a, #3fb8f0, #6d4ae0, #c15cf0, #ff5f6d) border-box; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .35); }
.sage-fab .sage-av { width: 52px; height: 52px; display: block; animation: sage-bob 2.4s ease-in-out infinite; pointer-events: none; }
.sage-fab .sage-av svg { width: 100%; height: 100%; display: block; }
.sage-fab-q { position: absolute; top: -6px; right: -4px; width: 22px; height: 22px; border-radius: 50%; background: #ffd166; border: 2px solid #5b3a24; font: 900 13px/18px var(--font-display); color: #3b2a1a; text-align: center; }
.sage-fab.on { box-shadow: 0 0 0 4px color-mix(in srgb, #6d4ae0 18%, transparent), 0 8px 22px -10px rgba(0, 0, 0, .35); }
.sage-fab.on .sage-fab-q { display: none; }
.sage-fab:hover { transform: scale(1.06); }
@keyframes sage-bob { 50% { transform: translateY(-3px); } }
@media (max-width: 600px) { .sage-fab { width: 56px; height: 56px; } .sage-fab .sage-av { width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .sage-fab .sage-av { animation: none; } }
@keyframes sage-nudge { 0%, 100% { transform: none; } 20% { transform: translateY(-6px) rotate(-4deg); } 40% { transform: translateY(0) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .sage-fab.nudge { animation: none; } }
@media (max-width: 860px) { .sage-dock { right: auto; bottom: auto; } }
/* question pictures, icon-only choices, instant feedback */
.q-picture { font-size: 72px; line-height: 1.1; text-align: center; margin: -4px 0 12px; }
.q-picture img { max-height: 160px; max-width: 100%; border-radius: var(--r-sm); }
.opt.tryagain { border-color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface)); }
.opt.tryagain .key { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.opts.icons .opt .emoji:only-child { font-size: 46px; }
.q-feedback { margin-top: 10px; font-size: 14px; font-weight: 600; }
.q-feedback.ok { color: var(--c-success); }
.q-feedback.warn { color: var(--c-warning); }
/* MaiMigo School English world (embedded original game) */
.world-player .player-head { margin-bottom: var(--sp-3); }
.world-frame { position: relative; width: 100%; aspect-ratio: 16 / 9.6; height: auto; max-height: calc(100vh - 150px); min-height: 480px; border-radius: var(--r-lg); overflow: hidden; background: #dff4ff; box-shadow: var(--shadow); }
.world-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.world-frame:fullscreen { border-radius: 0; height: 100vh; max-height: none; }
/* exit button: only while the game fills the screen */
.world-frame .wp-exit { display: none; position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 5; min-height: 40px; padding: 6px 16px; border: 2px solid rgba(255,255,255,.9); border-radius: 999px; background: rgba(20, 24, 40, .82); color: #fff; font: 700 15px var(--font); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.world-frame .wp-exit:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }
.world-frame:fullscreen .wp-exit, .world-frame:-webkit-full-screen .wp-exit, .world-frame.pseudo-full .wp-exit { display: block; }
.world-frame.pseudo-full { position: fixed; inset: 0; z-index: 1000; width: 100vw; height: 100dvh; max-height: none; min-height: 0; aspect-ratio: auto; border-radius: 0; }
html.wp-locked, html.wp-locked body { overflow: hidden; }
@media (max-width: 600px) { .world-frame .wp-exit { min-width: 44px; padding: 6px 12px; font-size: 18px; } .world-frame .wp-exit .wp-exit-t { display: none; } }
@media (max-width: 860px) { .world-frame { height: calc(100vh - 170px); min-height: 480px; border-radius: var(--r-sm); } }
/* printable worksheet — 2.9.1: the preview is the printed page (A4), so print = screen */
.print-desk { background: #e9e6f0; min-height: 100vh; padding: 16px 12px 48px; }
.print-tools { position: sticky; top: 0; z-index: 3; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; max-width: 210mm; margin: 0 auto 16px; padding: 10px 14px; background: #fff; border-radius: 14px; box-shadow: var(--shadow); font-size: 14px; }
.print-tools .muted { flex-basis: 100%; font-size: 12.5px; }
.pt-opt { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.paper { --ink: #1d1b26; --soft: #6b6780; --line: #d9d4e6; --acc: var(--c-primary); --tint: #f5f2fd;
  width: 210mm; max-width: 100%; margin: 0 auto; padding: 14mm 15mm 16mm; background: #fff; color: var(--ink); box-shadow: 0 6px 30px rgba(30, 20, 60, .18);
  font: 400 10.5pt/1.5 var(--font), "Segoe UI", Arial, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.paper * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 2.5px solid var(--acc); font-size: 9pt; color: var(--soft); }
.pp-brand { display: flex; gap: 8px; align-items: center; } .pp-brand b { display: block; color: var(--ink); font-size: 10pt; } .pp-brand span { display: block; }
.pp-mark { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--acc); color: #fff; font-weight: 800; }
.pp-level { display: flex; gap: 8px; align-items: center; } .pp-cefr { padding: 2px 9px; border-radius: 999px; background: var(--acc); color: #fff; font-weight: 700; }
.pp-title { font: 700 20pt/1.15 var(--font-display), var(--font), sans-serif; margin: 10px 0 8px; color: var(--ink); }
.pp-fields { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 9.5pt; margin-bottom: 12px; }
.pp-fields span { display: inline-flex; align-items: baseline; gap: 4px; flex: 1 1 auto; } .pp-fields i { flex: 1; min-width: 60px; border-bottom: 1px dotted #999; height: 1em; }
.paper h3 { font-size: 12.5pt; margin: 12px 0 6px; color: var(--ink); break-after: avoid; } .paper h4 { font-size: 10.5pt; margin: 8px 0 3px; }
.paper .ws-section { margin: 0 0 10px; break-inside: avoid; } .paper .ws-section:has(.reading) { break-inside: auto; }
.paper .reading { display: flow-root; background: none; padding: 0; border: 0; font-size: 10.8pt; line-height: 1.6; }
.paper .reading figure { float: right; width: 44%; margin: 2px 0 8px 14px; } .paper .reading figure img { width: 100%; max-height: none; border-radius: 10px; border: 1px solid var(--line); display: block; }
.paper .reading p { margin: 0 0 7px; orphans: 3; widows: 3; } .paper .reading.poem { text-align: left; } .paper .reading.poem p { margin: 0 0 2px; } .paper .reading .gap { height: 8px; }
.paper .vocab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .paper .vocab .w { border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; background: var(--tint); break-inside: avoid; }
.paper .vocab .w b { display: block; font-size: 10.5pt; } .paper .vocab .w span { font-size: 9pt; color: var(--soft); }
.paper .grammar-box { background: var(--tint); border: 0; border-left: 4px solid var(--acc); border-radius: 0 8px 8px 0; padding: 8px 12px; break-inside: avoid; }
.paper .form-line { font-weight: 700; color: var(--acc); margin: 4px 0; } .paper ul { margin: 2px 0 0; padding-left: 18px; }
.paper blockquote { break-inside: avoid; }
.paper details.concept-steps > summary { list-style: none; margin-top: 6px; } .paper details.concept-steps > summary::-webkit-details-marker { display: none; }
.pp-part { font: 700 13pt/1.2 var(--font-display), var(--font), sans-serif; margin: 14px 0 8px; padding: 5px 10px; background: var(--acc); color: #fff; border-radius: 6px; break-after: avoid; }
.pp-qs { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.pp-q { break-inside: avoid; padding: 7px 0 9px; border-bottom: 1px dashed var(--line); }
.pp-qhead { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; } .pp-num { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 9pt; margin-top: 1px; }
.pp-stim { font-weight: 400; font-style: italic; margin-top: 3px; } .pp-pic { font-size: 40px; text-align: center; }
.pp-choices { list-style: none; margin: 5px 0 0 28px; padding: 0; display: grid; gap: 3px 16px; }
.pp-choices li { display: flex; gap: 7px; align-items: baseline; } .pp-bubble { flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 8pt; font-weight: 700; }
.pp-lines { height: 25mm; margin: 6px 0 0 28px; background: repeating-linear-gradient(transparent 0 7.6mm, #b9b4c7 7.6mm calc(7.6mm + 1px)); }
.pp-key { break-before: page; } .pp-key ol { columns: 4; font-weight: 600; }
.pp-foot { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--line); font-size: 8.5pt; color: var(--soft); text-align: center; }
@media screen and (max-width: 820px) { .paper { padding: 18px 16px; font-size: 15px; } .paper .vocab { grid-template-columns: repeat(2, 1fr); } .paper .reading figure { width: 100%; float: none; margin: 0 0 10px; } }
/* 2.9.2 — two fixed A4 sheets: page 1 text + vocabulary + grammar, page 2 questions; type size set by fitSheets() */
.paper.sheet { height: 297mm; padding: 11mm 13mm 9mm; display: flex; flex-direction: column; margin-bottom: 14px; overflow: hidden; font-size: 10.5pt; }
.sheet-in { flex: 1; min-height: 0; overflow: hidden; font-size: var(--fs, 10.5pt); }
.sheet .pp-foot { flex: none; margin-top: 6px; padding-top: 4px; font-size: 7.5pt; }
/* 2.9.3: no tint over an overfull sheet (it showed as a pink band over the writing space); the type shrinks instead */
.sheet.overflow .sheet-in { box-shadow: none; }
.sheet .pp-title { font-size: 1.75em; margin: 6px 0 6px; }
.sheet h3 { font-size: 1.12em; margin: 8px 0 4px; }
.sheet .ws-section { margin: 0 0 6px; }
.sheet .reading { font-size: 1em; line-height: 1.45; }
.sheet .reading figure { width: var(--fig, 44%); }
.sheet .reading p { margin: 0 0 4px; }
.sheet .reading.poem { columns: 1; }
.sheet .vocab { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.sheet .vocab .w { padding: 3px 6px; }
.sheet .vocab .w b { font-size: 0.95em; } .sheet .vocab .w span { font-size: 0.82em; line-height: 1.25; display: block; }
.sheet .grammar-box { padding: 5px 10px; }
.sheet .grammar-box p { margin: 0 0 3px; }
.sheet .form-line { margin: 2px 0; }
.sheet .pp-fields { margin: 0 0 6px; font-size: 0.9em; }
.sheet .pp-part { font-size: 1.15em; margin: 0 0 6px; padding: 4px 10px; }
.sheet .pp-qs { columns: 2; column-gap: 8mm; column-rule: 1px solid var(--line); }
.sheet .pp-q { padding: 4px 0 6px; break-inside: avoid; }
.sheet[data-sheet="2"] .sheet-in { display: flex; flex-direction: column; }
.sheet .pp-open { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 26mm; margin-top: 6px; padding-top: 6px; border-top: 1.5px solid var(--acc); }
.sheet .pp-open .pp-lines { flex: 1 1 auto; height: auto; min-height: var(--write-min, 40mm); background-color: #fff; }
.sheet .pp-open.speak { flex: 0 0 auto; } .sheet .pp-open.speak .pp-lines { min-height: 16mm; flex: none; height: 16mm; }
.sheet .pp-pts { margin-left: auto; font-size: .85em; color: var(--soft); font-weight: 500; white-space: nowrap; }
.sheet .pp-choices { margin-left: 24px; gap: 2px 10px; }
.sheet .pp-lines { margin-left: 24px; }
.sheet .pp-speak { margin: 3px 0 0 24px; font-size: .9em; color: var(--soft); }
.sheet .pp-pic { font-size: 28px; text-align: left; margin-left: 24px; }
.sheet .pp-key ol { columns: 4; }
.sheet .form-line, .sheet .form-lines { font-size: 1.02em; }
.sheet .overview p, .sheet .overview li { font-size: .95em; margin: 0 0 2px; }
.sheet .overview h4 { font-size: .95em; margin: 4px 0 2px; }
.sheet .ov-goals { columns: 2; }
.sheet p.credit { font-size: .78em; margin: 2px 0 0 !important; }
.sheet .long-read .reading { columns: 2; column-gap: 6mm; }
.sheet .long-read .reading figure { float: none; width: 100%; margin: 0 0 5px; break-inside: avoid; }
.sheet .long-read .reading figure img { height: 34mm; object-fit: cover; }
.sheet .ws-section { padding: 0 0 4px !important; margin: 0 0 5px !important; }
.sheet .ws-section h3 { margin: 4px 0 3px; }
.sheet .grammar-box ul { margin: 2px 0 0; }
.sheet .grammar-box > p[style] { margin: 2px 0 !important; }
.sheet blockquote { padding: 4px 10px !important; margin: 0 0 4px !important; }
.sheet .ws-section p { margin: 0 0 3px; }
.sheet hr, .sheet .ws-section + .ws-section { border-top-width: 1px; }
@page { size: A4; margin: 0; }
@media print {
  .no-print { display: none !important; } html, body { background: #fff !important; }
  .print-desk { background: none; padding: 0; min-height: 0; }
  .paper { width: auto; max-width: none; margin: 0; box-shadow: none; padding: 0 15mm; }
  .paper.sheet { width: 210mm; height: 297mm; margin: 0; padding: 11mm 13mm 9mm; break-after: page; page-break-after: always; }
  .paper.sheet:last-child { break-after: auto; page-break-after: auto; }
  .sheet.overflow .sheet-in { box-shadow: none; }
}
.choice-card { display: grid; gap: 6px; text-align: left; cursor: pointer; font: inherit; color: inherit; border: 1.5px solid var(--c-border); }
.choice-card:hover { border-color: var(--c-primary); }
.choice-card .ico { font-size: 28px; }
.choice-card b { font-size: 16.5px; }
.list .item.on { border-color: var(--c-primary); }
.announce-stack { display: grid; gap: 6px; padding: 8px 16px 0; }
.announce { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 14px; border-radius: var(--r-sm); background: var(--c-primary-soft); color: var(--c-text); font-size: 14px; }
.announce.success { background: color-mix(in srgb, var(--c-success) 12%, var(--c-surface)); }
.announce.warning { background: color-mix(in srgb, var(--c-warning) 14%, var(--c-surface)); }
.announce span { flex: 1; min-width: 200px; }
.announce .icon-btn { width: 28px; height: 28px; }

/* ---- Migo conversation (thread + follow-up chips) */
.sage-panel { width: min(380px, calc(100vw - 24px)); max-height: min(var(--sg-room, 74vh), 600px); overscroll-behavior: contain; }
.sg-body { display: grid; gap: 10px; }
.sg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--c-muted); font-weight: 600; font-size: 13px; }
.sg-concept { margin-left: auto; color: var(--c-primary); text-decoration: none; font-weight: 600; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-concept:hover { text-decoration: underline; }
.sg-msg { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 4px var(--r-lg) var(--r-lg) var(--r-lg); padding: 10px 12px; line-height: 1.5; }
.sg-msg p { margin: 0 0 6px; } .sg-msg p:last-child { margin: 0; }
.sg-msg.ok { background: color-mix(in srgb, var(--c-success) 9%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-success) 30%, var(--c-border)); }
.sg-msg.warn { background: color-mix(in srgb, var(--c-accent) 13%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-accent) 40%, var(--c-border)); }
/* 2.19.7: hints quote the reading text and show picture clues big enough to read (with their word) */
.sg-quote { margin: 6px 0 4px; padding: 8px 12px; border-left: 3px solid var(--c-primary); background: var(--c-surface); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 15px; line-height: 1.55; color: var(--c-text); }
.sg-pic { display: flex; align-items: center; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.sg-pic-img { font-size: 44px; line-height: 1.1; letter-spacing: 2px; transition: transform .15s ease; transform-origin: left center; cursor: zoom-in; }
.sg-pic-img:hover { transform: scale(1.6); }
.sg-pic-word { font-size: 16px; }
.sg-msg.danger { background: color-mix(in srgb, var(--c-danger) 8%, var(--c-surface)); border-color: color-mix(in srgb, var(--c-danger) 30%, var(--c-border)); }
.sg-tag { display: block; font-size: 12px; font-weight: 700; color: var(--c-primary); margin-bottom: 4px; }
.sg-more { color: var(--c-muted); font-size: 14px; }
.sg-form { margin-top: 8px; padding: 6px 10px; border-radius: var(--r-sm); background: var(--c-primary-soft); font-weight: 600; font-size: 14px; }
.sg-q { justify-self: end; max-width: 85%; background: var(--c-primary); color: var(--c-primary-ink); border-radius: var(--r-lg) 4px var(--r-lg) var(--r-lg); padding: 8px 12px; font-weight: 600; font-size: 14px; }
.sg-ex, .sg-mis { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sg-ex li { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; }
.sg-ex li span { grid-column: 2; color: var(--c-muted); font-size: 14px; }
.sg-mis li s { color: var(--c-danger); } .sg-mis li span { display: block; color: var(--c-muted); font-size: 14px; }
.sg-say { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-opts { display: grid; gap: 6px; margin-top: 6px; }
.sg-opts.ab { grid-template-columns: 1fr 1fr; }
.sg-opts .opt { min-height: 44px; padding: 8px 10px; font-size: 15px; }
.sg-opts .opt.dim { opacity: .55; }
.sg-why { margin-top: 8px; font-size: 14px; } .sg-why.ok { color: var(--c-success); } .sg-why.warn { color: var(--c-warning); }
.sg-follow { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; border-top: 1px dashed var(--c-border); }
.sg-follow > span { flex-basis: 100%; font-size: 12px; font-weight: 700; color: var(--c-muted); margin-top: 6px; }
.sg-chip { border: 1px solid color-mix(in srgb, var(--c-primary) 35%, var(--c-border)); background: var(--c-surface); color: var(--c-primary); border-radius: 999px; padding: 7px 12px; font: 600 13.5px var(--font); cursor: pointer; text-align: left; line-height: 1.3; }
.sg-chip:hover { background: var(--c-primary-soft); }
.sg-chip:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.sg-support { border: 2px solid var(--c-accent); border-radius: var(--r-lg); padding: 12px; background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface)); display: grid; gap: 8px; }
.sg-support p { margin: 0; }
.sg-practice { display: grid; gap: 4px; font-size: 14px; }
.sg-practice a { color: var(--c-primary); font-weight: 600; text-decoration: none; }
.sg-practice a small { display: block; color: var(--c-muted); font-weight: 500; font-size: 12px; margin-left: 22px; }
.linkish { border: 0; background: none; color: var(--c-primary); font: inherit; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; }

/* ---- Knowledge pages (#/learn) and focus panels */
.learn-filters .row.wrap { flex-wrap: wrap; gap: 6px; }
.learn-filters .chip { text-decoration: none; }
.learn-group { margin-top: var(--sp-5); }
.learn-group h2 { display: flex; align-items: baseline; gap: 8px; }
.learn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-3); }
.learn-card { display: grid; gap: 6px; align-content: start; padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); color: var(--c-text); text-decoration: none; }
.learn-card b { font-family: var(--font-display); font-size: 16px; line-height: 1.3; }
.learn-card .muted { font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.learn-card:hover, .learn-card:focus-visible { border-color: var(--c-primary); }
.learn-page .sg-ex li, .learn-page .sg-mis li { font-size: 16px; }
.learn-page .sg-check + .sg-check { border-top: 1px dashed var(--c-border); padding-top: var(--sp-3); }
.learn-fu, .learn-lesson { border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 10px 12px; background: var(--c-surface-2); }
.learn-fu summary, .learn-lesson summary { cursor: pointer; font-weight: 600; color: var(--c-primary); }
.learn-lesson summary b { color: var(--c-text); }
.learn-fu p { margin: 8px 0 0; }
.learn-lesson h4 { margin: 12px 0 4px; }
.learn-lesson p { margin: 0 0 6px; }
.focus-meter { --m: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--c-warning) calc(var(--m) * 1%), var(--c-border) 0); }
.focus-meter b { width: 36px; height: 36px; border-radius: 50%; background: var(--c-surface); display: grid; place-items: center; font-size: 11.5px; }
.focus-panel .title { color: var(--c-text); text-decoration: none; font-weight: 600; }
.focus-panel .title:hover { color: var(--c-primary); }
/* public header must fit a 360px phone: logo mark only, tighter buttons, sign-in as a text link */
@media (max-width: 560px) {
  .pub-header .inner { gap: var(--sp-2); }
  .pub-header .brand > .brand-text { display: none; }
  .pub-header .btn { padding: 8px 12px; font-size: 14px; min-height: 40px; white-space: nowrap; }
  .pub-header .btn.ghost { padding: 8px 6px; }
  .pub-header .seg button { padding: 6px 8px; }
  .pub-header .inner { padding: 0 var(--sp-3); }
  .pub-header .btn:not(.ghost) { padding: 8px 10px; }
}
.pub-nav { gap: var(--sp-3); }
.pub-nav a { white-space: nowrap; }
@media (max-width: 1220px) { .pub-nav a:nth-child(n+4) { display: none; } }
@media (max-width: 900px) { .pub-nav a:nth-child(n+3) { display: none; } .pub-header .inner { gap: var(--sp-3); } }
@media (max-width: 560px) { .pub-header .inner { gap: var(--sp-2); } }

/* Migo dock 2.6 — one Migo (the round button), a sticky header, typed messages, Scout-style follow-ups */
.sage-panel { padding-top: 0; }
.sage-panel .sg-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 0 calc(-1 * var(--sp-4)) var(--sp-2); padding: 10px var(--sp-4) 8px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.sage-panel .sg-head .sg-meta { flex: 1; min-width: 0; }
.sg-msg { border-width: 1.5px; }
.sg-msg .sg-tag { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; letter-spacing: .01em; margin-bottom: 3px; }
.sg-msg.k-praise { background: #ecf8ee; border-color: #6cc47a; } .sg-msg.k-praise .sg-tag { color: #1f7a2e; }
.sg-msg.k-encourage { background: #fff5e6; border-color: #f2b45a; } .sg-msg.k-encourage .sg-tag { color: #9a5a00; }
.sg-msg.k-wrong { background: #fdeeec; border-color: #ef9a8e; } .sg-msg.k-wrong .sg-tag { color: #b5412f; }
.sg-msg.k-hint { background: #f3efff; border-color: #a996f7; } .sg-msg.k-hint .sg-tag { color: #5b3fd0; }
.sg-msg.k-explain { background: #eef6fd; border-color: #8fbfe8; } .sg-msg.k-explain .sg-tag { color: #1f6aa5; }
.sg-msg.k-know { background: var(--c-surface); border-color: var(--c-border); } .sg-msg.k-know .sg-tag { color: #1f6aa5; }
.sg-msg.k-mistake { background: var(--c-surface); border-color: #f2b8b0; } .sg-msg.k-mistake .sg-tag { color: #b5412f; }
.sg-msg.k-check { background: #eaf7f6; border-color: #7cc9c4; } .sg-msg.k-check .sg-tag { color: #116764; }
.sg-support .sg-tag { color: #9a5a00; }
.sg-follow { display: grid; gap: 0; padding-top: 6px; border-top: 1px dashed var(--c-border); }
.sg-follow .sg-follow-h { font-size: 13px; font-weight: 800; color: var(--c-text); margin: 4px 0 2px; }
.sg-fu { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 10px 2px; border: 0; border-top: 1px solid var(--c-border); background: none; text-align: left; font: 500 14.5px/1.4 var(--font); color: var(--c-text); cursor: pointer; }
.sg-fu:first-of-type { border-top: 0; }
.sg-fu:hover { color: var(--c-primary); }
.sg-fu:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 6px; }
.sg-fu-arrow { color: var(--c-muted); flex: none; }

/* ---------- 2.8: Create content, history, trash ---------- */
.create-steps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3); padding: 0; margin: 0 0 var(--sp-5); }
.create-steps li { display: flex; align-items: center; gap: var(--sp-2); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 999px; padding: 6px 14px 6px 6px; font-size: 14px; }
.create-steps b, .step-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-primary); color: var(--c-primary-ink); font-size: 13px; font-weight: 700; flex: none; }
.step-no { margin-right: 6px; vertical-align: 2px; }
.section-title { font-size: 17px; margin: var(--sp-5) 0 var(--sp-3); color: var(--c-muted); font-family: var(--font); font-weight: 600; }
.create-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.create-card { display: flex; flex-direction: column; gap: var(--sp-3); }
.create-card p { margin: 0; }
.cc-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
.cc-head b { font-size: 17px; display: block; }
.cc-ico { font-size: 30px; line-height: 1; }
.cc-actions { margin-top: auto; display: grid; gap: var(--sp-2); }
.cc-actions > .btn { justify-content: center; }
.cc-links { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
.create-card code, .page-head code { font-size: 12px; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 6px; padding: 1px 6px; }
.create-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.create-flow .create-upload { grid-column: 1 / -1; }
@media (max-width: 980px) { .create-flow { grid-template-columns: 1fr; } }
.back-link { display: inline-block; margin-bottom: var(--sp-2); }
.trash-banner { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; justify-content: space-between; margin-bottom: var(--sp-4); }
.hist { display: grid; gap: 2px; }
.hist .item .ico { font-size: 18px; width: 28px; text-align: center; flex: none; }

/* 2.9.1 — ⚑ report a problem */
.report-btn{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:3px 8px;border:1px solid var(--c-border);border-radius:999px;background:transparent;color:var(--c-muted);font:600 12px/1.2 var(--font);cursor:pointer;white-space:nowrap}
.report-btn:hover,.report-btn:focus-visible{color:#b54708;border-color:#f3b07a;background:#fff7ed}
@media (max-width:560px){.report-btn span{display:none}}
.report-reasons{border:0;padding:0;margin:0;display:grid;gap:6px}
.report-reason{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border:1px solid var(--c-border);border-radius:12px;cursor:pointer}
.report-reason:has(input:checked){border-color:var(--c-primary);background:color-mix(in srgb,var(--c-primary) 7%,transparent)}
.report-reason input{margin-top:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rep-q{border:1px solid var(--c-border);border-radius:14px;padding:12px 14px;background:var(--c-surface-2)}
.rep-edit .choice-row{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.rep-edit .choice-row input[type=text]{flex:1}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.ph-card{border:1px solid var(--c-border);border-radius:14px;padding:12px;background:var(--c-surface);display:grid;gap:8px}
.ph-card .ph-sym{font:700 26px/1 var(--font-display),serif}
.ph-card .ph-src{font-size:12px}
.ph-card .ph-src.mai{color:#0f7a4d}.ph-card .ph-src.ext{color:#b54708}

/* 2.9.2 — “view as” (impersonation) pill, shown on every page while an admin views the platform as someone else */
.imp-pill { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 9999; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  max-width: calc(100vw - 32px); padding: 8px 10px 8px 16px; border-radius: 999px; background: #1f1640; color: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.28); font-size: 14px; }
.imp-pill .muted { color: rgba(255,255,255,.7); }
.imp-pill .btn { background: #fff; color: #1f1640; }
body.impersonating .tabbar { bottom: 64px; }
@media print { .imp-pill { display: none; } }
.grade-bubble { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: #fff3d6; color: #8a5a00; font-weight: 600; font-size: 13px; text-decoration: none; white-space: nowrap; border: 1px solid #f3d38a; }
.grade-bubble small { font-weight: 500; opacity: .8; }
a.grade-bubble:hover { background: #ffe7a8; }
.scope-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.scope-opt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 2px solid var(--c-border, #ddd); border-radius: var(--r-sm, 10px); cursor: pointer; }
.scope-opt input { position: absolute; opacity: 0; pointer-events: none; }
.scope-opt.on { border-color: var(--c-primary); background: var(--c-primary-soft); }
.scope-opt:focus-within { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.scope-opt small { color: var(--c-muted, #666); }
.rec { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rec audio { height: 36px; max-width: 100%; }
.btn.recording { animation: recpulse 1.2s infinite; }
@keyframes recpulse { 50% { box-shadow: 0 0 0 6px rgba(220, 50, 50, .25); } }
/* 2.9.2 — road to the next level (learner, parent, teacher) */
.plan-meter { position: relative; padding-top: 6px; }
.plan-meter .bar { height: 14px; }
.plan-meter .mark { position: absolute; top: -10px; transform: translateX(-50%); font-size: 16px; }
.plan-trend { height: 110px; }
.plan-courses { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.plan-course { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid var(--c-border, #e5e5e5); border-radius: var(--r-sm, 10px); color: inherit; text-decoration: none; background: var(--c-surface); }
.plan-course:hover { border-color: var(--c-primary); }
.plan-course img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; flex: none; }
.plan-course.locked { background: linear-gradient(135deg, var(--c-surface), var(--c-primary-soft)); }
.plan-course .badge { width: max-content; }
.plan-plus { margin-top: 12px; }
.plan-offer { border-style: dashed; }
/* 2.9.2 — teacher guide */
/* 2.9.3 — teacher guide: an A4 handout in the printed-worksheet style (flows over as many pages as it needs) */
.paper.tg { padding: 13mm 15mm 12mm; margin-bottom: 14px; page: guide; }
.tg-tag { padding: 2px 9px; border-radius: 999px; border: 1.5px solid var(--acc); color: var(--acc); font-weight: 700; }
.tg-sub { margin: -4px 0 8px; color: var(--soft); }
.tg-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0 12px; }
.tg-facts > div { background: var(--tint); border-radius: 8px; padding: 6px 10px; break-inside: avoid; } .tg-facts .wide { grid-column: 1 / -1; }
.tg-facts span { display: block; font-size: 8pt; text-transform: uppercase; letter-spacing: .06em; color: var(--soft); font-weight: 700; } .tg-facts b { font-size: 10pt; }
.tg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tg-box { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; break-inside: avoid; } .tg-box h3, .tg-sec h3 { margin: 0 0 4px; }
.tg-lead { margin: 0 0 3px; color: var(--soft); font-size: 9.5pt; }
.tg-ticks { list-style: none; padding: 0 !important; margin: 0; } .tg-ticks li { position: relative; padding-left: 18px; margin: 2px 0; }
.tg-ticks li::before { content: '✓'; position: absolute; left: 2px; color: var(--acc); font-weight: 800; }
.tg-sec { margin-top: 10px; break-inside: avoid; } .tg-sec .vocab { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tg-sec .grammar-box { margin-bottom: 6px; } .tg-sec .grammar-box p { margin: 2px 0; }
.tg-plan { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 9.8pt; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tg-plan th { background: var(--tint); color: var(--ink); text-align: left; padding: 6px 8px; font-size: 8.5pt; text-transform: uppercase; letter-spacing: .05em; }
.tg-plan td { vertical-align: top; padding: 7px 8px; border-top: 1px solid var(--line); } .tg-plan tr { break-inside: avoid; }
.tg-plan tbody tr:nth-child(even) td { background: #fbfaff; }
.tg-plan ul { margin: 0; padding-left: 16px; } .tg-plan li { margin: 1px 0; }
.tg-time { width: 64px; white-space: nowrap; } .tg-time span { display: inline-block; padding: 2px 7px; border-radius: 999px; background: var(--acc); color: #fff; font-weight: 700; font-size: 8.5pt; font-variant-numeric: tabular-nums; }
.tg-stage { width: 25%; } .tg-stage b { display: block; } .tg-stage small { color: var(--soft); }
.tg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tg-card { border: 1px solid var(--line); border-left: 4px solid var(--acc); border-radius: 0 10px 10px 0; padding: 7px 11px; break-inside: avoid; } .tg-card p { margin: 3px 0 0; }
.tg-card.home { background: var(--tint); }
.tg-key { break-before: page; page-break-before: always; margin-top: 18px; }
.tg-keyhead { display: none; }
.tg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.tg-ans { display: flex; gap: 7px; align-items: flex-start; padding: 5px 0; border-bottom: 1px dashed var(--line); break-inside: avoid; }
.tg-letter { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--acc); color: #fff; font-weight: 800; font-size: 9pt; margin-top: 1px; }
.tg-q { color: var(--soft); font-size: 9pt; } .tg-why { font-size: 9pt; margin-top: 2px; }
.tg-open { margin-top: 12px; padding: 9px 12px; border: 1.5px solid var(--acc); border-radius: 10px; break-inside: avoid; }
.tg-pts { margin-left: auto; white-space: nowrap; font-size: 9pt; color: var(--soft); font-weight: 600; }
.tg-rubric { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 9.5pt; } .tg-rubric th { text-align: left; background: var(--tint); padding: 4px 8px; font-size: 8.5pt; }
.tg-rubric td { padding: 4px 8px; border-bottom: 1px solid var(--line); } .tg-rubric .num { width: 44px; text-align: center; font-weight: 700; }
.tg-model { background: var(--tint); border-radius: 8px; padding: 6px 10px; } .tg-model span { display: block; font-size: 8pt; text-transform: uppercase; letter-spacing: .06em; color: var(--soft); font-weight: 700; }
.print-tools .grow { flex: 1; }
@media screen and (max-width: 820px) { .tg-facts { grid-template-columns: 1fr 1fr; } .tg-two, .tg-cards, .tg-grid { grid-template-columns: 1fr; } .tg-sec .vocab { grid-template-columns: 1fr 1fr; } .tg-plan thead { display: none; } .tg-plan tr, .tg-plan td { display: block; width: auto; } }
@page guide { size: A4; margin: 11mm 0 12mm; }
@media print {
  .guide .no-print, .rail, .topbar, .tabbar, .announce-stack, .sage-dock { display: none !important; }
  .paper.tg { padding: 0 15mm; margin: 0; }
  .tg-key { margin-top: 0; } .tg-keyhead { display: flex; margin-bottom: 8px; }
  .shell, .main, .content { display: block !important; padding: 0 !important; margin: 0 !important; }
}
.plan .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .plan .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan-course .stack-sm { min-width: 0; }
.plan-course .stack-sm > * { display: block; }
.form-lines > div { line-height: 1.45; }
.form-lines > div + div { margin-top: 2px; }
/* 2.9.2 — plans, checkout, receipts */
.plan-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.plan-card.featured { border-color: var(--c-primary); box-shadow: 0 6px 24px color-mix(in srgb, var(--c-primary) 18%, transparent); }
.plan-price { display: block; font: 700 28px var(--font-display); }
.tiers tr.on td { background: var(--c-primary-soft); font-weight: 600; }
.pay-box { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.pay-box > .stack-sm { flex: 1 1 300px; }
.pay-qr { margin: 0; flex: 0 0 auto; text-align: center; max-width: 260px; }
.pay-qr img { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--c-border); background: #fff; }
.pay-qr figcaption { font-size: 12.5px; color: var(--c-muted); margin-top: 6px; }
.pay-sum { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--c-surface-2); }
.pay-sum > div { display: flex; flex-direction: column; gap: 2px; }
.seat-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.seat { border: 1px solid var(--c-border); background: var(--c-surface); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13.5px; cursor: pointer; }
.seat.on { background: var(--c-primary-soft); border-color: var(--c-primary); }
.receipt-wrap { max-width: 820px; margin: 0 auto; }
.receipt { background: #fff; color: #1d1b26; padding: 32px 36px; border-radius: 14px; box-shadow: var(--shadow); }
.receipt-total { margin: 12px 0 0 auto; max-width: 320px; }
@media print { .receipt { box-shadow: none; padding: 0; } .receipt-wrap .no-print { display: none !important; } }

/* 2.9.3 — connections: QR codes, view-as modes */
.qr-card { align-items: center; text-align: center; }
.qr-box { width: 180px; max-width: 100%; margin: 0 auto; background: #fff; padding: 6px; border-radius: var(--radius); border: 1px solid var(--c-border); }
.qr-box svg { display: block; width: 100%; height: auto; }
.qr-code { font: 700 22px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .18em; }
.qr-card .row { justify-content: center; }
.imp-pill[data-mode="family"] { background: #0f6b4f; }
.imp-pill[data-mode="preview"] { background: #2b4a8b; }
@media (max-width: 600px) { .conn-pending .item { flex-wrap: wrap; } .conn-pending .item .grow { flex: 1 1 calc(100% - 56px); } }
/* 2.9.3 — who a material is for */
.badge.aud-teachers { background: color-mix(in srgb, var(--c-primary) 13%, var(--c-surface)); color: var(--c-primary); border-color: transparent; }
.badge.aud-adults { background: color-mix(in srgb, var(--c-success) 13%, var(--c-surface)); color: var(--c-success); }
select.sm { padding: 4px 8px; font-size: 13px; height: auto; width: auto; max-width: 190px; }
/* 2.9.3 — programs */
.plan-list { columns: 2 280px; column-gap: 28px; margin: 12px 0 0; padding-left: 1.6em; }
.plan-list li { break-inside: avoid; padding: 3px 0; color: var(--c-muted); }
.plan-list li.on { color: var(--c-text); font-weight: 600; }
.plan-list li .muted { font-size: 12px; font-weight: 400; margin-right: 4px; }

/* 2.9.3 — interactive worksheet activities (drag & drop, build a mascot, talking scenes) */
.act { display: grid; gap: 12px; margin-top: 4px; }
.act-help { margin: 0; font-size: 13px; }
.act-card { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; border: 2px solid var(--c-border); background: var(--c-surface); font: 600 15px var(--font); color: var(--c-text); cursor: grab; touch-action: none; user-select: none; box-shadow: 0 2px 0 var(--c-border); }
.act-card:hover { border-color: var(--c-primary); }
.act-card.picked { border-color: var(--c-primary); background: var(--c-primary-soft, #f0ebff); transform: translateY(-2px); }
.act-card.dragging { opacity: .35; }
.act-card.in { cursor: pointer; }
.act-card .emoji { font-size: 22px; }
.act-ghost { position: fixed; z-index: 10000; pointer-events: none; transform: translate(-50%, -60%) rotate(-3deg); box-shadow: 0 10px 24px rgba(0,0,0,.18); opacity: .95; }
.act-bank { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border: 2px dashed var(--c-border); border-radius: 14px; background: var(--c-surface-2); min-height: 56px; }
.act-bank.over { border-color: var(--c-primary); }
.act-rows { display: grid; gap: 8px; }
.act-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto; align-items: center; gap: 10px; }
.act-left { display: flex; align-items: center; gap: 6px; font-weight: 600; padding: 8px 12px; border-radius: 12px; background: var(--c-surface-2); }
.act-left .emoji { font-size: 24px; }
.act-arrow { color: var(--c-muted); }
.act-slot, .act-gap-slot { min-height: 46px; border: 2px dashed var(--c-border); border-radius: 12px; background: var(--c-surface); display: flex; align-items: center; padding: 3px; cursor: pointer; font: inherit; color: var(--c-muted); }
.act-gap-slot { display: inline-flex; min-height: 38px; min-width: 96px; vertical-align: middle; margin: 2px 4px; justify-content: center; }
.act-slot.over, .act-gap-slot.over, .act-group.over, .act-line.over { border-color: var(--c-primary); background: var(--c-primary-soft, #f0ebff); }
.act-slot.filled, .act-gap-slot.filled { border-style: solid; }
.act-slot .act-card, .act-gap-slot .act-card { box-shadow: none; border: 0; padding: 6px 10px; }
.act .right, .act-card.right { border-color: var(--c-success) !important; background: color-mix(in srgb, var(--c-success) 12%, var(--c-surface)); }
.act .wrong, .act-card.wrong { border-color: var(--c-danger) !important; background: color-mix(in srgb, var(--c-danger) 10%, var(--c-surface)); }
.act-key { margin: 0; color: var(--c-success); font-weight: 600; font-size: 14px; }
.act-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 58px; padding: 10px; border: 2px solid var(--c-border); border-radius: 14px; background: var(--c-surface); }
.act-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.act-group { border: 2px dashed var(--c-border); border-radius: 14px; padding: 10px; min-height: 110px; background: var(--c-surface); cursor: pointer; }
.act-group h4 { margin: 0 0 8px; font-size: 14px; color: var(--c-primary); }
.act-group-in { display: flex; flex-wrap: wrap; gap: 6px; }
.act-text { line-height: 2.4; font-size: 16px; margin: 0; }
.act-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.act-tools .q-feedback { margin: 0; }
.shake { animation: act-shake .45s; }
@keyframes act-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* build a mascot */
.act-build-stage { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.act-canvas { position: relative; background: radial-gradient(circle at 50% 40%, var(--c-surface) 0, var(--c-surface-2) 70%); border-radius: 18px; border: 1px solid var(--c-border); padding: 8px; }
.act-mascot-svg { width: 100%; max-height: 340px; display: block; }
.act .slot .slot-art { opacity: .28; filter: grayscale(1); }
.act .slot .slot-art * { stroke-dasharray: 6 5; }
.act .slot { cursor: pointer; }
.act .slot.over .slot-art, .act .slot:hover .slot-art { opacity: .6; filter: none; }
.act .slot.shake { animation: none; }
.act .slot.shake .slot-art { animation: act-blink .5s 2; }
@keyframes act-blink { 50% { opacity: .9; filter: hue-rotate(160deg); } }
.act-labels { position: absolute; inset: 0; pointer-events: none; }
.act-label { position: absolute; transform: translate(-50%, -50%); background: #fff; border: 2px solid var(--c-primary); color: var(--c-primary); font: 700 12px var(--font); padding: 2px 8px; border-radius: 999px; white-space: nowrap; box-shadow: var(--shadow); }
.act-tray { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.act-tray p { flex-basis: 100%; margin: 0; }
.act-piece { width: 92px; display: grid; justify-items: center; gap: 2px; padding: 6px; border-radius: 14px; border: 2px solid var(--c-border); background: var(--c-surface); cursor: grab; touch-action: none; font: 600 12px var(--font); color: var(--c-muted); box-shadow: 0 2px 0 var(--c-border); }
.act-piece.picked { border-color: var(--c-primary); background: var(--c-primary-soft, #f0ebff); }
.act-piece .act-mascot-svg { width: 76px; height: 76px; }
.act-piece.dragging { opacity: .35; }
.act-studio { display: grid; gap: 10px; }
.act-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.act-swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--c-surface); background: var(--c); box-shadow: 0 0 0 1px var(--c-border); cursor: pointer; }
.act-swatch.on { box-shadow: 0 0 0 3px var(--c-primary); }
.act-wear, .act-animals { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* a mascot says something */
.act-scene { display: flex; align-items: flex-end; gap: 12px; margin: 0 0 12px; padding: 10px 12px 0; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 8%, var(--c-surface)), var(--c-surface)); overflow: hidden; }
.act-scene .act-mascot { width: 96px; flex: none; }
.act-scene .act-mascot svg { width: 100%; height: auto; display: block; }
.act-scene .walk-in { animation: act-walk 1.1s ease-out both; }
@keyframes act-walk { 0% { transform: translateX(-120%) rotate(-6deg); } 60% { transform: translateX(6%) rotate(4deg); } 80% { transform: translateY(-6px); } 100% { transform: none; } }
.act-bubble { position: relative; flex: 1; margin-bottom: 18px; padding: 10px 14px; background: var(--c-surface); border: 2px solid var(--c-border); border-radius: 16px; animation: act-pop .5s .8s both; }
.act-bubble::before { content: ''; position: absolute; left: -12px; bottom: 14px; border: 8px solid transparent; border-right-color: var(--c-border); }
.act-bubble b { color: var(--c-primary); font-size: 13px; }
.act-bubble p { margin: 2px 0 8px; font-size: 17px; font-weight: 600; }
@keyframes act-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .act-build-stage { grid-template-columns: 1fr; } .act-row { grid-template-columns: 1fr; gap: 4px; } .act-arrow { display: none; } }
@media (prefers-reduced-motion: reduce) { .act-scene .walk-in, .act-bubble, .shake { animation: none; } }
/* printed activities */
.pp-act { break-inside: avoid; margin: 10px 0; }
.pp-match { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pp-match ol { margin: 0; }
.pp-tiles { display: flex; flex-wrap: wrap; gap: 6px; }
.pp-tile { border: 1.5px solid #999; border-radius: 8px; padding: 2px 8px; }
.pp-writeline { border-bottom: 1.5px solid #bbb; height: 26px; }
.pp-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.pp-gap { white-space: nowrap; }
.pp-hint { font-size: 12px; color: #666; }
.pp-build { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; }
.pp-build svg { width: 160px; }
.act-canvas { padding: 8px 74px; }
.act-label { transform: translateY(-50%); }
.act-label.l { left: 6px; } .act-label.r { right: 6px; }
.act-lines { position: absolute; inset: 0; overflow: visible; }
.act-lines line { stroke: var(--c-primary); stroke-width: 1.5; stroke-dasharray: 3 3; opacity: .7; }
.act-lines circle { fill: var(--c-primary); }
@media (max-width: 640px) { .act-canvas { padding: 8px 64px; } }
.act-build-stage { grid-template-columns: 1fr; }
.act-canvas { max-width: 420px; width: 100%; margin: 0 auto; }
.act-tray { justify-content: center; }
.act-studio { justify-items: center; text-align: center; }
.act-swatches, .act-wear, .act-animals { justify-content: center; }
/* 2.9.3 — comic strips with the MaiMigo characters */
.comic { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.comic-panel { margin: 0; position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 230px; padding: 10px; border: 3px solid #2d2440; border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-primary) 10%, #fff), #fff 70%); overflow: hidden; }
.comic-panel:nth-child(3n+2) { background: linear-gradient(180deg, #fff3d6, #fff 70%); }
.comic-panel:nth-child(3n) { background: linear-gradient(180deg, #e3f4ee, #fff 70%); }
.comic-cap { position: absolute; top: 0; left: 0; right: 0; padding: 4px 10px; background: #ffe39a; border-bottom: 2px solid #2d2440; font: 700 12px var(--font); color: #2d2440; }
.comic-char { width: 92px; align-self: flex-start; }
.comic-panel.flip .comic-char { align-self: flex-end; transform: scaleX(-1); }
.comic-char svg { width: 100%; height: auto; display: block; }
.comic-bubble { order: -1; position: relative; margin: 26px 0 12px; padding: 8px 12px; background: #fff; border: 2px solid #2d2440; border-radius: 16px; font-size: 15px; line-height: 1.35; }
.comic-bubble::after { content: ''; position: absolute; bottom: -12px; left: 30px; border: 6px solid transparent; border-top: 8px solid #2d2440; }
.comic-panel.flip .comic-bubble::after { left: auto; right: 30px; }
.comic-bubble b { display: block; color: var(--c-primary); font-size: 12px; }
.comic-bubble .say { margin-left: 4px; }
/* Comic scenes: family portraits and multi-character panels using canonical animal SVGs. */
.comic-scene { display:flex; align-items:flex-end; justify-content:center; gap:4px; width:100%; min-height:105px; flex-wrap:wrap; }
.comic-scene-person { display:flex; flex-direction:column; align-items:center; min-width:0; flex:1 1 22%; max-width:105px; }
.comic-scene-person svg { width:100%; height:90px; }
.comic-scene-name { font-size:11px; line-height:1.2; font-weight:700; text-align:center; }
.comic-family-photo { border:6px solid #f1d9a2; background:#fff9ed; border-radius:8px; padding:8px 5px 4px; box-shadow:0 3px 0 #c99b64; }
.comic-panel.flip .comic-scene { transform:none; }
@media print { .comic { grid-template-columns: repeat(3, 1fr); } .comic-panel { min-height: 0; } .comic-char { width: 64px; } }
/* 2.9.3 — MaiMigo characters */
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.char-card { display: flex; gap: 12px; align-items: flex-start; }
.char-pic { width: 90px; flex: none; }
.char-pic svg { width: 100%; height: auto; }
.char-card .row .field { min-width: 0; }

/* 2.9.3 Migo explains the joke */
.sage-joke{margin:10px 0 0;border:1px dashed var(--c-accent);border-radius:12px;padding:8px 12px;background:var(--c-surface-2)}
.sage-joke summary{cursor:pointer;font-weight:600}
.sage-joke-item{margin:8px 0}
.sage-joke-item blockquote{margin:0 0 4px;padding:2px 10px;border-left:3px solid var(--c-accent);font-style:italic}
.sage-joke-item p{margin:0}
@media print{.ws-section .sage-joke{display:none}}
.pp-learn .sage-joke{display:none}

/* Canonical contextual comic scene presentation. Scene content comes from JSON;
   characters are resolved through the shared MaiMigo mascot registry. */
.comic-scene-context { position:relative; display:block; min-height:168px; isolation:isolate; overflow:hidden; border-radius:12px; background:linear-gradient(#cdebf9 0 62%,#b7dda6 62%); }
.comic-scene-backdrop {position:absolute;inset:0;z-index:-1;pointer-events:none}
.comic-scene-sun {position:absolute;top:10px;right:14px;width:22px;height:22px;border-radius:50%;background:#ffe69a}
.comic-scene-ground {position:absolute;bottom:0;width:100%;height:22%;background:#9fcd86}
.comic-scene-foreground {display:flex;align-items:end;justify-content:space-around;gap:3px;min-height:135px;padding:18px 5px 5px}
.comic-scene-context .comic-scene-person {flex:1 1 0;min-width:0;max-width:96px;position:relative}
.comic-scene-context .comic-scene-person svg {height:100px;max-width:100%;filter:drop-shadow(0 2px 1px #59463a35)}
.comic-scene-context .comic-scene-name {background:#ffffffd9;border-radius:6px;padding:1px 3px;font-size:10px;z-index:1}
.comic-scene-context .comic-scene-person.is-focus svg {height:108px}
.comic-photo {position:relative;margin:8px auto 0;width:92%;max-width:280px;border:8px solid #fff;border-bottom-width:20px;box-shadow:0 2px 8px #42355c55;transform:rotate(-2deg);background:#d5edfa;z-index:1}
.comic-photo-figures {display:flex;align-items:end;justify-content:center;gap:0;min-height:100px;padding:4px}
.comic-photo-figures .comic-scene-person {flex:1 1 0;max-width:65px}
.comic-photo-figures .comic-scene-person svg {height:76px}
.comic-photo-figures .comic-scene-name {font-size:8px}
.comic-photo-label {position:absolute;bottom:-17px;left:0;right:0;text-align:center;font-size:10px;color:#5c4d6d;font-weight:700}
.scene-family-photo .comic-scene-foreground {min-height:65px;padding:0 10px 2px}
.scene-family-photo .comic-scene-foreground svg {height:55px}
.scene-family-photo .comic-scene-foreground .comic-scene-name {font-size:9px}
.comic-scene-props {position:absolute;top:6px;right:5px;display:flex;gap:3px;z-index:2}
.comic-scene-prop {display:inline-flex;align-items:center;justify-content:center;font-size:25px;background:#fff9;border-radius:8px;min-width:30px;min-height:30px}
.scene-classroom,.scene-school-chat {background:linear-gradient(#fff4ce 0 80%,#d3a97b 80%)}
/* 2.9.3: the classroom board is drawn by scene-art.js — plain green, no letters */
.scene-home-visit,.scene-family-talk {background:linear-gradient(#fbe3e9 0 80%,#d1a17b 80%)}
.scene-weekend-chat {background:linear-gradient(#c9e9ff 0 70%,#a3d58d 70%)}
@media print {.comic-scene-context {print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* Comic character art uses image elements, not injected SVG markup. */
.comic-scene-context .comic-character-art{display:block;width:100%;height:100px;object-fit:contain;filter:drop-shadow(0 2px 1px #59463a35)}
.comic-photo-figures .comic-character-art{height:76px}
.scene-family-photo .comic-scene-foreground .comic-character-art{height:55px}
.comic-scene-context .comic-scene-person.is-focus .comic-character-art{height:108px}

/* Contextual comic composition: actors and props change by scene, not a repeated photo template. */
.comic-scene-context .comic-scene-person{position:relative;transform:scale(var(--figure-scale,1));transform-origin:bottom center}
.comic-scene-context .comic-scene-foreground{display:flex;align-items:end;justify-content:space-evenly;gap:6px;min-height:155px}
.comic-scene-context .comic-scene-person.is-wearing-hat .comic-worn-hat{position:absolute;z-index:4;left:50%;top:-15px;transform:translateX(-50%);font-size:43px;line-height:1;pointer-events:none}
.scene-giant-hat .comic-worn-hat{font-size:115px!important;top:-63px!important}
.scene-hat-house .comic-worn-hat{display:none}
.scene-hat-house .comic-hat-house{position:absolute;z-index:4;left:50%;top:15px;transform:translateX(-50%);font-size:155px;line-height:1}
.scene-hat-house .comic-scene-foreground{padding-top:75px}
.scene-hat-house .comic-scene-person{z-index:5;transform:scale(.36);transform-origin:bottom center}
.scene-bus-driver .comic-bus{position:absolute;z-index:3;bottom:14px;left:50%;transform:translateX(-50%);font-size:100px;line-height:1}
.scene-bus-driver .comic-scene-foreground{position:relative;z-index:4;align-items:start;padding-top:3px}
.scene-bus-driver .comic-scene-person{transform:scale(.62)}
.scene-photo-question .comic-scene-props{top:auto;right:30%;bottom:65px;transform:rotate(-12deg)}
.scene-father-question .comic-scene-person.is-dad .comic-character-art{height:140px}
.scene-ruby-question .comic-scene-person.is-wearing-hat,.scene-ruby-intro .comic-scene-person.is-wearing-hat{margin-left:-18px}
.scene-family-photo .comic-photo-figures .comic-scene-person{transform:scale(var(--figure-scale,1))}

/* Comic storyboard worlds: per-scene visual context, not one reused family-photo background. */
.comic-scene-context[class*="scene-classroom"],.comic-scene-context.scene-friend-intro,.comic-scene-context.scene-age-question,.comic-scene-context.scene-spelling,.comic-scene-context.scene-badge-desk,.comic-scene-context.scene-badge-award{background:linear-gradient(#e6f0fb 0 70%,#e8cfae 70%)}
.comic-scene-context[class*="scene-school"],.comic-scene-context.scene-cold-day,.comic-scene-context.scene-rainy-park,.comic-scene-context.scene-park-football{background:linear-gradient(#c8e8f8 0 65%,#a5d394 65%)}
.comic-scene-context[class*="scene-home"],.comic-scene-context.scene-front-door,.comic-scene-context.scene-food-table,.comic-scene-context[class*="scene-baking"],.comic-scene-context.scene-apple-offer,.comic-scene-context.scene-cake-reaction,.comic-scene-context.scene-salt-cake{background:linear-gradient(#fff0d8 0 70%,#e5b995 70%)}
.comic-scene-context[class*="scene-surf"],.comic-scene-context.scene-surfing-nine,.comic-scene-context.scene-surfing-twenty{background:linear-gradient(#b9eaff 0 55%,#6dc3e4 55%)}
.comic-scene-context[class*="scene-camp"],.comic-scene-context.scene-tiger-roar{background:linear-gradient(#e1f0ff 0 63%,#88c781 63%)}
.comic-scene-context.scene-rainy-park::before{content:'☔';position:absolute;left:8px;top:8px;font-size:27px}
.comic-scene-context.scene-big-feet .comic-scene-props{top:auto;bottom:12px;right:30px}
.comic-scene-context .comic-scene-props{flex-wrap:wrap;max-width:60%;justify-content:flex-end}

/* Canonical comic habitat: freshwater pond, not an ocean for Max the frog. */
.comic-scene-context[class*="scene-pond-"]{background:linear-gradient(#ccebf7 0 44%,#a7d7a0 44% 59%,#68b6aa 59% 100%)}
.comic-scene-context[class*="scene-pond-"] .comic-scene-ground{background:#4e9f8c;height:35%;border-top:8px solid #b0db9d;border-radius:45% 45% 0 0}
.comic-scene-context[class*="scene-pond-"] .comic-scene-ground::before{content:"";position:absolute;left:12%;top:15%;width:23%;height:12px;background:#6ab66a;border-radius:100%;box-shadow:105px 12px 0 #73bc74,60px 35px 0 #6ab66a}
.comic-scene-context[class*="scene-pond-"] .comic-scene-props{top:auto;bottom:12%;right:9%}

/* Comic composition: a small family member peeks out from behind a larger one. */
.comic-scene-context .comic-scene-person.is-behind{z-index:0;flex:0 0 45px;margin-right:-33px;align-self:end;transform:translateX(12px) scale(var(--figure-scale, .55));transform-origin:bottom center}
.comic-scene-context .comic-scene-person:not(.is-behind){z-index:1}
.scene-family-peekaboo .comic-scene-foreground{align-items:end;justify-content:center;gap:3px;padding-top:10px}
.scene-family-peekaboo .comic-scene-person.is-behind{margin-right:-45px;transform:translate(35px,5px) scale(var(--figure-scale,.55))}
.scene-family-peekaboo .comic-scene-person.is-behind .comic-scene-name{font-size:9px;white-space:nowrap}
.scene-family-photo .comic-photo-figures .comic-scene-person.is-behind{margin-right:-20px;transform:translateX(18px) scale(var(--figure-scale,.55))}

/* 2.9.3 context art: drawn backdrop (where) + drawn props (what) */
.comic-scene-backdrop svg{position:absolute;left:0;bottom:0;width:100%;height:auto;display:block}
.comic-scene-context:has(.comic-scene-backdrop svg){background:none}
.comic-scene-prop.svg{background:#ffffffcc;padding:2px;min-width:38px;min-height:38px}
.comic-scene-prop.svg svg{width:34px;height:34px;display:block}
.comic-scene-context .comic-scene-props{gap:4px}

/* 2.9.3 parents: work just handed in, on the child's card */
.sub-alert{margin:0 0 14px;padding:12px 16px;border-radius:14px;background:color-mix(in srgb,var(--c-accent) 22%,var(--c-surface));border:1.5px solid color-mix(in srgb,var(--c-accent) 60%,transparent);font-size:15px}
.child-news{display:flex;flex-direction:column;gap:8px}
.cn-item{border-radius:12px;padding:10px 12px;background:var(--c-surface-2);border:1px solid var(--c-border)}
.cn-item.unread{background:color-mix(in srgb,var(--c-primary) 10%,var(--c-surface));border:1.5px solid color-mix(in srgb,var(--c-primary) 55%,transparent);box-shadow:0 2px 10px color-mix(in srgb,var(--c-primary) 15%,transparent)}
.cn-ico{font-size:22px;line-height:1}
.cn-item>.row{flex-wrap:nowrap}
.cn-title{font-weight:600}
.cn-new{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;padding:1px 7px;border-radius:999px;background:var(--c-primary);color:#fff;vertical-align:1px}
.cn-review{margin-top:10px;padding-top:10px;border-top:1px dashed var(--c-border)}
.cn-qs{list-style:none;margin:10px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.cn-qs li{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:8px;background:var(--c-surface)}
.cn-qs li.ok .cn-mark{color:var(--c-success,#2f9e61);font-weight:800}
.cn-qs li.bad .cn-mark{color:var(--c-danger);font-weight:800}
.cn-mark{width:18px;flex:none;text-align:center}
@media (max-width:620px){.cn-item [data-view]{width:100%;justify-content:center}}

/* 2.9.3 Studio → Phoneme audio: open phonics sources */
.ph-srcbox{border:1px solid var(--c-border);border-radius:12px;padding:12px 14px;background:var(--c-surface-2)}
.ph-srcbox p{margin:6px 0}
.ph-groups{margin:6px 0 0;padding-left:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px 16px;font-size:14px}

/* ---------------------------------------------------------------- 2.9.3 young learners: flashcards, talk game, guided build */
.fc-print { display: none; }
.print-desk .fc { display: none; }
.print-desk .fc-print, .fc-print.print-only { }
.print-desk .fc-print { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media print { .fc { display: none !important; } .fc-print { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; } }
.fc-pcard { border: 2px dashed #b9c4d6; border-radius: 10px; padding: 6px; text-align: center; break-inside: avoid; }
.fc-pcard .fc-pic { font-size: 34px; display: block; line-height: 1.2; }
.fc-pcard .fc-pic img { max-width: 100%; height: 48px; object-fit: contain; }
.fc { display: grid; gap: 10px; justify-items: center; }
.fc-stage { position: relative; width: min(100%, 320px); aspect-ratio: 4 / 4.2; perspective: 900px; touch-action: pan-y; }
.fc-card { position: absolute; inset: 0; display: none; border: 0; padding: 0; background: none; cursor: pointer; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.8,.3,1.2); }
.fc-card.on { display: block; animation: fc-in .35s ease; }
.fc-card.flipped { transform: rotateY(180deg); }
@keyframes fc-in { from { opacity: 0; transform: translateX(18px) scale(.96); } }
.fc-face { position: absolute; inset: 0; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(160deg, #fff, #f3f7ff); border: 4px solid #cfdcf3; box-shadow: 0 10px 0 #dfe7f6, 0 14px 24px rgba(40,60,110,.12); }
.fc-face.back { transform: rotateY(180deg); background: linear-gradient(160deg, #fffaf0, #fff1d9); border-color: #f2d6a2; box-shadow: 0 10px 0 #f3e2bf, 0 14px 24px rgba(110,80,30,.12); }
.fc-pic { font-size: 120px; line-height: 1; filter: drop-shadow(0 4px 2px rgba(0,0,0,.08)); }
.fc-pic img { width: 70%; max-height: 180px; object-fit: contain; }
.fc-pic.sm { font-size: 64px; }
.fc-tip { font-size: 13px; color: var(--c-muted, #6a7286); }
.fc-word { font-size: 40px; font-weight: 800; color: #26355b; letter-spacing: .5px; }
.fc-vi { font-size: 18px; color: #7a5a1e; font-weight: 600; }
.fc-ex { font-size: 15px; color: #4b5570; padding: 0 14px; text-align: center; }
.fc-say { position: absolute; top: 12px; right: 12px; z-index: 3; width: 44px; height: 44px; font-size: 20px; box-shadow: 0 2px 6px rgba(40,60,110,.18); } /* 2.17.2 — 44px touch target, above both faces */
.fc-say:focus-visible { outline: 3px solid var(--c-primary, #6a4ce0); outline-offset: 2px; }
.fc-nav { display: flex; align-items: center; gap: 10px; }
.fc-dots { display: flex; gap: 6px; } .fc-dots i { width: 9px; height: 9px; border-radius: 50%; background: #cfd8e8; } .fc-dots i.on { background: var(--c-primary, #6a4ce0); transform: scale(1.25); }
.fc-strip { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

.act-talk { display: grid; gap: 10px; }
.talk-stage { position: relative; height: 230px; border-radius: 18px; overflow: hidden; border: 3px solid #2b2f45; }
.talk-backdrop { position: absolute; inset: 0; } .talk-backdrop svg { width: 100%; height: 100%; }
.talk-friend { position: absolute; left: 12%; bottom: 8px; width: 120px; text-align: center; transform-origin: 50% 100%; }
.talk-friend svg { width: 120px; height: 128px; filter: drop-shadow(0 6px 4px rgba(0,0,0,.18)); }
.talk-name { display: inline-block; background: #fff; border-radius: 8px; padding: 1px 8px; font-size: 12px; font-weight: 700; }
.talk-friend.walk-in { animation: talk-walk 1.1s ease-out both; }
.talk-friend.walk-in svg { animation: talk-bob .28s ease-in-out 4 alternate; }
.talk-friend.hop, .talk-friend.happy { animation: talk-hop .5s ease both; }
.talk-friend.sad { animation: talk-no .55s ease both; }
@keyframes talk-walk { from { transform: translateX(-160%); } to { transform: none; } }
@keyframes talk-bob { to { transform: translateY(-6px) rotate(2deg); } }
@keyframes talk-hop { 30% { transform: translateY(-22px) scale(1.04); } 60% { transform: translateY(0) scale(.98, 1.02); } }
@keyframes talk-no { 20% { transform: rotate(-7deg); } 40% { transform: rotate(7deg); } 60% { transform: rotate(-5deg); } 80% { transform: rotate(4deg); } }
.talk-bubble { position: absolute; max-width: 54%; background: #fff; border: 3px solid #2b2f45; border-radius: 18px; padding: 8px 12px; font-size: 18px; font-weight: 600; line-height: 1.3; display: flex; gap: 6px; align-items: center; }
.talk-bubble.friend { left: calc(12% + 112px); top: 22px; border-bottom-left-radius: 4px; }
.talk-bubble.me { right: 14px; bottom: 16px; background: #e9f3ff; border-color: #3f7fe0; border-bottom-right-radius: 4px; font-size: 15px; }
.talk-bubble.pop { animation: talk-pop .35s .55s cubic-bezier(.2,.9,.3,1.4) both; }
@keyframes talk-pop { from { transform: scale(.4); opacity: 0; } }
.talk-start { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; border: 0; background: rgba(255,255,255,.35); font-size: 18px; font-weight: 700; cursor: pointer; color: #26355b; }
.talk-play { width: 70px; height: 70px; border-radius: 50%; background: var(--c-primary, #6a4ce0); color: #fff; font-size: 30px; display: grid; place-items: center; box-shadow: 0 6px 0 #4b33b0; animation: talk-pulse 1.4s infinite; }
@keyframes talk-pulse { 50% { transform: scale(1.08); } }
.talk-replies { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.talk-reply { border: 3px solid #3f7fe0; background: #fff; border-radius: 18px 18px 4px 18px; padding: 10px 16px; font-size: 17px; font-weight: 700; color: #1f3d74; cursor: pointer; box-shadow: 0 4px 0 #bcd3f5; }
.talk-reply:hover { background: #eef5ff; } .talk-reply:active { transform: translateY(2px); box-shadow: 0 2px 0 #bcd3f5; }
.talk-reply.shake, .act-piece.shake { animation: talk-no .5s ease; border-color: #e8494b; }
.talk-help { text-align: center; margin: 0; font-size: 13px; }
.talk-done { display: flex; gap: 10px; align-items: center; justify-content: center; }
.talk-log { margin: 0; padding-left: 20px; } .talk-log .ok { color: #2e9b55; } .talk-log .warn { color: #d9534f; }
.act-say { font-size: 18px; margin: 0 0 8px; } .act-say .act-target { color: var(--c-primary, #6a4ce0); font-size: 22px; letter-spacing: 1px; }
.act-say .warn { color: #d9534f; }
.act-build.guided .slot.hot .slot-art { animation: talk-pulse 1.2s infinite; transform-origin: center; transform-box: fill-box; }
.act-swatches.big .act-swatch { width: 40px; height: 40px; }
.pp-talk p { margin: 2px 0; }
/* 2.9.3: a character on (or next to) a big drawn thing */
.comic-scene-person.is-on, .comic-scene-person.is-by { position: relative; }
.comic-big-prop { position: absolute; left: 50%; bottom: 14px; width: 118%; transform: translateX(-50%); z-index: 0; pointer-events: none; }
.comic-big-prop svg { width: 100%; height: auto; display: block; }
.comic-scene-person.is-on .comic-character-art { position: relative; z-index: 1; transform: translateY(-34%); }
.comic-scene-person.is-by .comic-big-prop { left: auto; right: -78%; width: 90%; transform: none; }
.comic-scene-person.is-by .comic-character-art { position: relative; z-index: 1; }

/* 2.9.3 — picture cards big enough to recognise (≈6× the text size), and bigger still on hover / focus */
.act-card:has(> .pic) { padding: 6px 10px; }
.act-card > .pic { font-size: 84px; line-height: 1; display: inline-block; transition: transform .15s ease; transform-origin: center; }
.act-card:hover > .pic, .act-card:focus-visible > .pic, .act-card.picked > .pic { transform: scale(1.45); position: relative; z-index: 3; }
.act-slot:has(.pic) { min-height: 108px; justify-content: center; }
.act-slot .act-card:has(> .pic) { padding: 4px; }
.act-left .emoji { font-size: 56px; }
.opts.icons .opt .emoji:only-child { font-size: 92px; transition: transform .15s ease; }
.opts.icons .opt:hover .emoji:only-child, .opts.icons .opt:focus-visible .emoji:only-child { transform: scale(1.35); }
.opt .emoji { font-size: 44px; }
@media (max-width: 520px) { .act-card > .pic { font-size: 64px; } .opts.icons .opt .emoji:only-child { font-size: 72px; } }

/* 2.10 commercial settings */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 12px; margin: 6px 0 12px; }
.lib-grid .check span { font-size: 14px; }

/* 2.10 library list view (gallery stays the default) */
.grid.cards.as-list { grid-template-columns: 1fr; gap: 8px; }
.grid.cards.as-list .ccard { flex-direction: row; align-items: center; min-height: 0; }
.grid.cards.as-list .ccard .cover { flex: 0 0 132px; width: 132px; aspect-ratio: 16 / 10; align-self: stretch; }
.grid.cards.as-list .ccard .cover .glyph { font-size: 30px; }
.grid.cards.as-list .ccard .body { flex: 1; padding: 10px 16px; gap: 3px; }
.grid.cards.as-list .ccard .lock { position: static; order: 3; margin-right: 14px; flex: none; }
@media (max-width: 560px) { .grid.cards.as-list .ccard .cover { flex-basis: 88px; width: 88px; } .grid.cards.as-list .ccard .body { padding: 8px 10px; } }

/* 2.10 program descriptions in Studio */
.prog-desc { font-size: 13px; color: var(--c-muted); line-height: 1.45; max-width: 640px; margin: 2px 0 4px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 2.10 Course invite page */
.auth.wide .panel { width: min(620px, 100%); }
.course-card { border-bottom: 1px solid var(--c-border); padding-bottom: 12px; }
.join-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.join-choices .choice { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface-2); color: inherit; }
.join-choices .choice:hover { border-color: var(--c-primary); text-decoration: none; }
.join-choices .choice span { color: var(--c-muted); font-size: 14px; }
.panel.tight > summary { cursor: pointer; }

/* 2.10 legal line, help links, consent */
.pub-footer .legal-line { display: block; margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px dashed var(--c-border); }
.pub-footer .legal-line p { margin: 0; font-size: 12.5px; line-height: 1.5; max-width: 110ch; }
.app-foot { padding: 18px var(--sp-5) 90px; font-size: 13px; color: var(--c-muted); }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--c-muted); background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 10px 12px; }
.consent input { margin-top: 2px; flex: none; width: 18px; height: 18px; }
.home-faq details { background: var(--c-surface); }
.print-legal { font-size: 13px; color: var(--c-muted); max-width: 70ch; }
.pp-legal { display: block; font-size: 7.5pt; color: #666; margin-top: 2px; }

/* 2.10 in-place worksheet editor */
.ed-bar { position: sticky; top: 0; z-index: 20; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--c-bg); padding: 10px 0; border-bottom: 1px solid var(--c-border); margin-bottom: 8px; }
.ed-bar select { max-width: 280px; }
.ed-paper { max-width: 860px; padding: 28px 32px; }
.ed { border-radius: 4px; padding: 1px 3px; outline: 1px dashed transparent; cursor: text; white-space: pre-wrap; }
.ed:hover { outline-color: var(--c-border); background: var(--c-surface-2); }
.ed:focus { outline: 2px solid var(--c-primary); background: #fff; }
.ed.changed { background: #FFF6D6; outline: 1px solid #E5C25A; }
.ed.empty { outline: 2px solid var(--c-danger); }
.ed.block { display: block; }
.ed-title { margin: 0 0 4px; } .ed-sub { color: var(--c-muted); margin: 0 0 16px; }
.ed-sec { border-left: 3px solid var(--c-primary-soft); padding: 6px 0 6px 14px; margin: 14px 0; }
.ed-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin-bottom: 4px; }
.ed-row { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 6px 0; align-items: start; }
.ed-group { margin: 6px 0 6px 12px; } .ed-group > .ed-label { display: block; font-size: 11px; }
.ed-label { font-size: 12.5px; color: var(--c-muted); padding-top: 2px; }
.ed-loc { display: grid; gap: 2px; } .ed-line { display: flex; gap: 6px; align-items: baseline; }
.ed-lang { font: 700 10px/1.6 ui-monospace, monospace; color: var(--c-muted); background: var(--c-surface-2); border-radius: 4px; padding: 0 4px; flex: none; }
.ed-list, .ed-choices { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.ed-choices { list-style: upper-alpha; } .ed-choices li { display: flex; gap: 6px; align-items: baseline; } .ed-choices.changed { background: #FFF6D6; border-radius: 6px; }
.ed-right input { accent-color: var(--c-success); }
.ed-q { border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 12px 14px; margin: 12px 0; background: var(--c-surface); }
.ed-q header { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.ed-sage { background: var(--c-primary-soft); border-radius: var(--r-sm); padding: 8px 10px; margin-top: 8px; display: grid; gap: 4px; }
@media (max-width: 640px) { .ed-row { grid-template-columns: 1fr; } .ed-paper { padding: 16px; } }

/* ---------------------------------------------------------------- 2.12 level test & learning reports */
.test-card.wanted { border-color: var(--c-warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-warning) 35%, transparent); }
.test-player .tp-top { display: flex; align-items: center; gap: 12px; }
.test-player .tp-top .grow { display: flex; flex-direction: column; }
.tp-clock { font: 700 18px/1 ui-monospace, Menlo, monospace; padding: 8px 10px; border-radius: var(--r-sm); background: var(--c-surface-2); }
.tp-clock.low { color: var(--c-danger); background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface)); }
.tp-q { padding: 18px; }
.tp-prompt { font-size: 18px; line-height: 1.45; }
.tp-passage { white-space: pre-line; background: var(--c-surface-2); border-radius: var(--r-sm); padding: 12px 14px; margin-bottom: 12px; line-height: 1.55; font-size: 15.5px; }
.tp-slow { margin-top: 10px; }
.test-player .opts.icons .opt .emoji { font-size: 44px; }
.pic-big { display: block; font-size: 64px; line-height: 1.1; margin: 4px 0; }
.pic-row { display: inline-flex; gap: 6px; font-size: 34px; flex-wrap: wrap; }
.sign { display: inline-block; border: 3px solid var(--c-text); border-radius: 8px; padding: 8px 14px; font: 800 17px/1.3 var(--font); text-transform: uppercase; letter-spacing: .03em; background: var(--c-surface); white-space: normal; }
table.tt { border-collapse: collapse; margin: 6px 0; font-size: 14.5px; white-space: normal; }
table.tt th, table.tt td { border: 1px solid var(--c-border); padding: 4px 10px; text-align: left; }
table.tt th { background: var(--c-surface); }
.test-hero { display: flex; align-items: center; gap: 16px; }
.band-bars { display: grid; gap: 6px; }
.band-row { display: grid; grid-template-columns: 76px 1fr 48px; align-items: center; gap: 10px; opacity: .75; }
.band-row.on { opacity: 1; font-weight: 700; }
.band-row .bar i { min-width: 2px; }
.tp-review { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.tp-review > li { border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 8px 12px; }
.tp-review > li.ok { border-left: 4px solid var(--c-success); }
.tp-review > li.bad { border-left: 4px solid var(--c-danger); }
.tp-review summary { display: flex; gap: 8px; align-items: baseline; cursor: pointer; }
.tp-choices { margin: 8px 0; padding-left: 20px; }
.tp-choices .right { color: var(--c-success); font-weight: 600; }
.tp-choices .wrong { color: var(--c-danger); text-decoration: line-through; }
.report-panel .stats { margin: 0; }
.paywall { border: 1.5px dashed var(--c-accent); border-radius: var(--radius); padding: 12px 14px; background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface)); }
.paywall .price { font: 800 20px var(--font); }
.paywall .price small { font-weight: 500; font-size: 13px; color: var(--c-muted); }
.report-doc { max-width: 920px; margin: 0 auto; display: grid; gap: 14px; }
.report-doc h2 { margin: 0 0 10px; font-size: 19px; }
.report-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 3px solid var(--c-primary); padding-bottom: 12px; }
.report-code { text-align: right; font-size: 13px; }
.report-code b { font: 700 18px ui-monospace, Menlo, monospace; letter-spacing: .1em; }
.weak-lo { padding: 12px 0; border-top: 1px solid var(--c-border); }
.weak-lo:first-of-type { border-top: 0; padding-top: 0; }
.examples { display: grid; gap: 8px; margin-top: 8px; }
.example { background: var(--c-surface-2); border-radius: var(--r-sm); padding: 10px 12px; font-size: 14.5px; }
.example .wrong { color: var(--c-danger); text-decoration: line-through; }
.example .right { color: var(--c-success); }
.plan14 { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plan14 li { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--c-border); border-radius: var(--r-sm); padding: 10px 12px; }
.plan14 .days { flex: none; min-width: 84px; font-weight: 800; color: var(--c-primary); }
.trend { display: flex; gap: 10px; align-items: flex-end; overflow-x: auto; padding-bottom: 4px; }
.trend .wk { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px; font-size: 13px; }
.trend .col { width: 26px; border-radius: 6px 6px 0 0; background: var(--c-primary); }
.report-foot { font-size: 12.5px; color: var(--c-muted); border-top: 1px solid var(--c-border); padding-top: 10px; }
.report-foot p { margin: 4px 0; }
.print-only { display: none; }
@media (max-width: 640px) { .report-head { flex-direction: column; } .report-code { text-align: left; } .band-row { grid-template-columns: 64px 1fr 40px; } .plan14 li { flex-direction: column; gap: 4px; } }
@media print {
  .print-only { display: inline; }
  .report-doc .no-print, .report-actions { display: none !important; }
  .report-doc { max-width: none; gap: 8px; }
  .report-doc .panel { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; padding: 10px 12px; }
  .report-doc .bar i, .trend .col, .lv { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .report-doc a.chip { border: 0; padding: 0 6px 0 0; }
}
span.bar { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
a.chip { text-decoration: none; }
.cat-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
/* 2.12.1 listening box & rich vocabulary */
.listen-box { border: 1.5px solid color-mix(in srgb, var(--c-primary) 35%, var(--c-border)); border-radius: var(--radius); padding: 12px 14px; background: color-mix(in srgb, var(--c-primary) 5%, var(--c-surface)); }
.listen-box h3 { margin-top: 0; }
[data-listen-slow].on { background: var(--c-primary-soft); border-color: var(--c-primary); }
.transcript { margin-top: 8px; } .transcript p { margin: 4px 0; }
.vocab.vocab-rich { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.vocab .wx b { display: inline; }
.vocab .wx { display: grid; gap: 3px; }
.wx-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wx-pos { color: var(--c-muted); font-size: 13px; }
.wx-ipa { font-family: "Charis SIL", "Doulos SIL", "Lucida Sans Unicode", serif; color: var(--c-muted); font-size: 14px; }
.wx-ex { font-style: italic; font-size: 14px; }
.wx-rel { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13.5px; color: var(--c-muted); }
.wx-rel b { color: var(--c-primary); }
.pp-transcript { margin-top: 12px; font-size: 12.5px; } .pp-transcript p { margin: 2px 0; }
/* 2.12.2 “… more” and the Studio programs gallery */
.more-wrap { display: grid; gap: 2px; justify-items: start; }
.more-text { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.more-wrap.open .more-text { -webkit-line-clamp: unset !important; line-clamp: unset !important; display: block; }
.more-btn { border: 0; background: none; padding: 0; color: var(--c-primary); font: 600 13px var(--font); cursor: pointer; }
.more-btn:hover { text-decoration: underline; }
.prog-desc.more-wrap { display: grid; -webkit-line-clamp: unset; max-width: 640px; }
.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.prog-card { display: flex; flex-direction: column; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; }
.prog-card .cover { aspect-ratio: 16 / 9; background: var(--c-primary-soft); display: grid; place-items: center; overflow: hidden; }
.prog-card .cover img { width: 100%; height: 100%; object-fit: cover; }
.prog-card .body { padding: 12px 14px 14px; display: grid; gap: 8px; }
.prog-card .title { font-weight: 800; font-size: 16px; line-height: 1.3; color: var(--c-text); }
.prog-card .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--c-muted); }
.prog-card .more-text { font-size: 13.5px; color: var(--c-muted); line-height: 1.45; }
.ccard .more-text { font-size: 12.5px; color: var(--c-muted); line-height: 1.4; }
.prog-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--c-primary) 40%, var(--c-border)); } .prog-card, .prog-card * { text-decoration: none !important; } .prog-card .more-btn:hover { text-decoration: underline !important; }
/* 2.12.2 — a wrong check: the frame and the wrong places turn red */
.act.act-failed .act-line, .act.act-failed .act-group, .act.act-failed .act-slot, .act.act-failed .act-gap-slot, .act.act-failed .act-bank { border-color: var(--c-danger) !important; }
.act.act-failed .act-line, .act.act-failed .act-group { background: color-mix(in srgb, var(--c-danger) 6%, var(--c-surface)); }
.q-feedback.bad { color: var(--c-danger); font-weight: 600; }

/* 2.12.3 worksheet type on the printed sheet */
.pp-kind { display: inline-block; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 700; }
/* 2.12.3 comics on the printed A4 sheet: four compact panels a row, split between pages by panel */
.paper .comic { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.paper .comic-panel { min-height: 0; padding: 5px 6px; border-width: 2px; border-radius: 10px; break-inside: avoid; }
.paper .comic-bubble { margin: 12px 0 7px; padding: 4px 8px; font-size: var(--fs, 10.5pt); line-height: 1.3; border-width: 1.5px; border-radius: 12px; }
.paper .comic-bubble b { font-size: .85em; }
.paper .comic-scene { min-height: 0; }
.paper .comic-scene-person svg { height: 58px; }
.paper .comic-cap { font-size: .9em; }
.paper .comic-scene-context { min-height: 104px; }
.paper .comic-scene-context .comic-scene-person svg { height: 62px; }
/* 2.12.3 a caption is a strip at the top of its panel, in the flow: a long one (a blog intro) no longer covers the bubble */
.comic-cap { position: static; order: -2; margin: -10px -10px auto; line-height: 1.3; }
.comic-panel:has(.comic-cap) .comic-bubble { margin-top: 12px; }
.paper .comic-cap { margin: -5px -6px auto; padding: 3px 8px; }
/* 2.12.3 long speech (forum posts, letters, debate turns): one panel a row — the speaker on the left, the words beside them */
.comic.comic-long, .paper .comic.comic-long { grid-template-columns: minmax(0, 1fr); }
.comic-long .comic-panel { display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-areas: "cap cap" "art say"; align-items: center; column-gap: 12px; min-height: 0; }
.comic-long .comic-panel > .comic-cap { grid-area: cap; margin: -10px -10px 8px; }
.comic-long .comic-panel > .comic-bubble { grid-area: say; margin: 0; }
.comic-long .comic-panel > :not(.comic-cap):not(.comic-bubble) { grid-area: art; }
.comic-long .comic-bubble::after { top: 50%; bottom: auto; left: -14px; border: 6px solid transparent; border-right: 8px solid #2d2440; border-top-color: transparent; transform: translateY(-50%); }
.comic-long .comic-panel.flip .comic-bubble::after { left: -14px; right: auto; }
.paper .comic-long .comic-panel { grid-template-columns: 118px minmax(0, 1fr); column-gap: 10px; }
.paper .comic-long .comic-panel > .comic-cap { margin: -5px -6px 6px; }
@media (max-width: 560px) { .comic-long .comic-panel { grid-template-columns: 96px minmax(0, 1fr); } }
/* 2.12.3 staged comics: figures hold / wear / do things (drawn into the figure), big things and animals in the scene,
   photographs in a white frame, thought clouds, a small figure beside the name when the speaker is not in the picture */
.comic-scene-context.is-staged .comic-character-art { height: 128px; }
.comic-scene-context.is-staged .comic-scene-person.is-focus .comic-character-art { height: 136px; }
.comic-scene-context.is-staged .comic-scene-person { max-width: 118px; }
.comic-scene-context.is-staged .comic-scene-foreground { position: relative; z-index: 1; gap: 0; padding: 14px 2px 4px; min-height: 160px; align-items: end; }
.comic-scene-context.is-staged .comic-scene-name { margin-top: -8px; }
.comic-thing { display: block; pointer-events: none; }
.comic-thing svg { display: block; width: 100%; height: 100%; }
.comic-thing.at-left, .comic-thing.at-right { flex: 0 0 auto; height: var(--thing-h, 92%); aspect-ratio: var(--thing-ar); max-width: 46%; align-self: end; }
.comic-thing.at-back { position: absolute; z-index: 0; left: var(--thing-x, 50%); bottom: 14%; height: var(--thing-h, 70%); aspect-ratio: var(--thing-ar); max-width: 100%; transform: translateX(-50%); }
.comic-thing.at-front { position: absolute; z-index: 2; left: var(--thing-x, 50%); bottom: 0; height: var(--thing-h, 26%); aspect-ratio: var(--thing-ar); max-width: 104%; transform: translateX(-50%); }
.comic-thing.thing-giraffe.at-left, .comic-thing.thing-giraffe.at-right { height: var(--thing-h, 150%); margin-top: -30%; }
.comic-thought { position: absolute; z-index: 3; top: 6px; left: 6px; width: 38%; max-width: 120px; padding: 8px; background: #fff; border: 2px solid #2d2440; border-radius: 40% / 45%; }
.comic-thought.to-right { left: auto; right: 6px; }
.comic-thought::after { content: ''; position: absolute; right: -10px; bottom: -8px; width: 10px; height: 10px; border: 2px solid #2d2440; border-radius: 50%; background: #fff; }
.comic-thought.to-right::after { right: auto; left: -10px; }
.comic-thought svg { display: block; width: 100%; height: auto; max-height: 64px; }
.comic-scene-context.is-photo { margin: 6px 8px 22px; border: 8px solid #fff; border-bottom-width: 26px; border-radius: 3px; box-shadow: 0 3px 10px #42355c55; transform: rotate(-1.5deg); overflow: visible; }
.comic-panel:nth-child(even) .comic-scene-context.is-photo { transform: rotate(1.5deg); }
.comic-photo-tag { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font: 700 12px var(--font-display, sans-serif); color: #5c4d6d; }
.comic-bubble-av { width: 26px; height: 26px; vertical-align: -8px; margin-right: 5px; border-radius: 50%; background: #f4f0fb; }
.comic-bubble .comic-handle { font-style: normal; font-weight: 600; color: var(--c-muted, #777); font-size: 11px; }
.comic-bubble.is-email, .comic-bubble.is-post { border-radius: 6px; }
.comic-bubble.is-email b, .comic-bubble.is-post b { border-bottom: 1px solid #ddd; padding-bottom: 3px; margin-bottom: 4px; }
.comic-bubble.is-email::after, .comic-bubble.is-post::after { display: none; }
.paper .comic-scene-context.is-staged .comic-character-art { height: 84px; }
.paper .comic-scene-context.is-staged .comic-scene-person.is-focus .comic-character-art { height: 90px; }
.paper .comic-scene-context.is-staged .comic-scene-foreground { min-height: 104px; }
.paper .comic-scene-context.is-photo { border-width: 5px; border-bottom-width: 18px; margin: 4px 4px 16px; }
.paper .comic-photo-tag { bottom: -16px; font-size: 9px; }
/* 2.12.3 staged comics on screen: one panel a row, the words above a wide picture, so figures and what they hold are big */
.comic.comic-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.comic.comic-wide .comic-panel { min-height: 0; }
.comic-scene-context.is-staged { aspect-ratio: 16 / 9; min-height: 0; }
.comic-scene-context.is-staged .comic-scene-foreground { position: absolute; inset: 0; justify-content: center; gap: 0; padding: 4% 2% 2%; min-height: 0; align-items: end; }
.comic-scene-context.is-staged .comic-scene-person { flex: 0 0 auto; width: clamp(64px, 27%, 170px); max-width: none; margin: 0 -2%; }
.comic-scene-context.is-staged .comic-scene-person.is-focus { width: clamp(70px, 30%, 186px); }
.comic-scene-context.is-staged .comic-character-art,
.comic-scene-context.is-staged .comic-scene-person.is-focus .comic-character-art { width: 100%; height: auto; }
.comic-scene-context.is-staged .comic-scene-name { margin-top: -10%; }
.comic-scene-context.is-staged .comic-thing.at-left, .comic-scene-context.is-staged .comic-thing.at-right { height: var(--thing-h, 86%); max-width: 42%; margin: 0 -1%; }
.comic-scene-context.is-staged .comic-thing.thing-giraffe { height: var(--thing-h, 100%); margin-top: 0; }
.paper .comic.comic-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.paper .comic-scene-context.is-staged .comic-character-art { height: auto; }

.comic-scene-context.is-staged .comic-thing.thing-giraffe.at-right { margin-left: -9%; }
.comic-thought img { display: block; width: 100%; height: auto; max-height: 76px; object-fit: contain; }
.comic-long .comic-scene-context.is-staged { aspect-ratio: 1 / 1; }
.comic-long .comic-scene-context.is-staged .comic-scene-person { width: 74%; }
.comic-thought { width: auto; max-width: 34%; }
.comic-thought svg, .comic-thought img { width: auto; max-width: 100%; height: 64px; max-height: none; margin: 0 auto; }
.paper .comic-thought svg, .paper .comic-thought img { height: 40px; }
.comic-scene-context.is-staged .comic-scene-person { width: clamp(70px, 34%, 210px); margin: 0 -3%; }
.comic-scene-context.is-staged .comic-scene-person.is-focus { width: clamp(76px, 38%, 230px); }
.comic-scene-context.is-staged .comic-scene-foreground { padding-bottom: 0; }
.comic-long .comic-panel { grid-template-columns: 190px minmax(0, 1fr); }
.comic-long .comic-scene-context.is-staged .comic-scene-person, .comic-long .comic-scene-context.is-staged .comic-scene-person.is-focus { width: 78%; margin: 0; }
.paper .comic-long .comic-panel { grid-template-columns: 130px minmax(0, 1fr); }
/* 2.12.3 flashcards at every level: a word on the front (B1–C2), the meaning, example and word relations on the back */
.fc-card.word-front .fc-face.front { background: linear-gradient(160deg, #f4f7ff, #e6edff); }
.fc-word.big { font-size: clamp(30px, 8vw, 44px); text-align: center; padding: 0 12px; line-height: 1.15; }
.fc-meta { color: #5a6a8e; font-size: 15px; } .fc-meta i { font-weight: 600; } .fc-ipa { font-family: 'Charis SIL', 'Doulos SIL', 'Times New Roman', serif; }
.fc-stage.rich { width: min(100%, 380px); aspect-ratio: 4 / 4.4; }
.fc-stage.rich .fc-face.back { justify-content: flex-start; padding: 22px 18px; gap: 6px; overflow: auto; }
.fc-stage.rich .fc-face.back .fc-word { font-size: 28px; }
.fc-rel { display: flex; flex-direction: column; gap: 3px; width: 100%; font-size: 14px; color: #3c4663; text-align: left; margin-top: 4px; }
.fc-rel b { color: var(--c-primary); margin-right: 4px; }
.fc-print.rich { grid-template-columns: repeat(2, 1fr) !important; }
.fc-pcard .fc-ppos { color: #667; font-size: .85em; }
.fc-pcard .fc-pmean { display: block; font-size: .9em; color: #555; }
.fc-pcard .fc-prel { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; font-size: .8em; color: #445; }
.fc-pcard .fc-prel b { color: #6b4fd6; }

/* ================================================================ 2.13 — invitations, Course results, Zalo */
.btn.zalo { background: #0068FF; color: #fff; border-color: #0068FF; display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.btn.zalo:hover { background: #0057d6; border-color: #0057d6; }
.btn.zalo svg { flex: none; border-radius: 6px; }
.or-line { display: flex; align-items: center; gap: 10px; color: var(--c-muted); font-size: 13px; }
.or-line::before, .or-line::after { content: ''; flex: 1; border-top: 1px solid var(--c-border); }
.invite-box { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
.invite-box .qr-box { background: #fff; padding: 8px; border-radius: var(--r-sm); border: 1px solid var(--c-border); }
.invite-box .qr-box svg { width: 100%; height: auto; display: block; }
.invite-box textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface-2); resize: vertical; }
@media (max-width: 640px) { .invite-box { grid-template-columns: 1fr; } .invite-box .qr-box { max-width: 200px; margin: 0 auto; } }
.buy-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rel-item { align-items: flex-start; flex-wrap: wrap; }
.rel-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 13px; color: var(--c-muted); }
.warn-text { color: var(--c-warning); }
.pick-list .item { cursor: pointer; }
.pick-list .item input { width: 18px; height: 18px; flex: none; accent-color: var(--c-primary); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row .chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); text-decoration: none; font-weight: 600; }
.chip-row .chip.on { background: var(--c-primary); color: var(--c-primary-ink); border-color: var(--c-primary); }
.results-page .table td .explain { margin-top: 4px; font-size: 13px; }
.table.prefs td input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--c-primary); }
.table.prefs td input:disabled { opacity: .35; }
.tpl-row { display: grid; grid-template-columns: 150px 1fr 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px dashed var(--c-border); }
.tpl-row .title { font: 600 13px var(--font); padding-top: 26px; word-break: break-word; }
.tpl-row textarea { font: inherit; font-size: 13px; width: 100%; }
@media (max-width: 800px) { .tpl-row { grid-template-columns: 1fr; } .tpl-row .title { padding-top: 0; } }
.zalo-panel h3 { display: flex; align-items: center; gap: 8px; }

/* 2.13.1 — library search bar: one joined search field, then a row of compact checklist dropdowns and the active filters */
.lib-search { display: grid; gap: 14px; }
.lib-query { display: flex; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); overflow: hidden; }
.lib-query:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 18%, transparent); }
.lib-query select, .lib-query input { border: 0; border-radius: 0; background: transparent; box-shadow: none; min-height: 48px; }
.lib-query select { flex: 0 0 150px; width: 150px; padding: 0 12px; border-right: 1px solid var(--c-border); background: var(--c-surface-2); font-weight: 600; }
.lib-query input { flex: 1 1 auto; min-width: 0; padding: 0 14px; font-size: 16px; }
.lib-query select:focus, .lib-query input:focus { outline: none; }
.lib-dds { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } /* 2.39.44: program and level, one row each */
.lib-pick-label { font: 700 13.5px var(--font); min-width: 118px; color: var(--c-text); }
.lib-pick .chip:disabled { opacity: .45; cursor: default; }
.lib-sort select { width: auto; min-width: 0; height: 36px; padding: 0 28px 0 10px; }
@media (max-width: 640px) { .lib-pick-label { min-width: 0; width: 100%; } }
.lib-track > span { white-space: nowrap; }
.lib-track { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 4px 0 12px; border: 1px solid var(--c-primary); border-radius: 999px; background: color-mix(in srgb, var(--c-primary) 8%, var(--c-surface)); font: 600 13.5px var(--font); }
.lib-track select { border: 0; background: transparent; font: 600 13.5px var(--font); height: 34px; padding: 0 6px; max-width: 220px; }
.lib-dd { position: relative; }
.lib-dd > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface); cursor: pointer; font: 600 13.5px var(--font); color: var(--c-text); white-space: nowrap; user-select: none; }
.lib-dd > summary::-webkit-details-marker { display: none; }
.lib-dd > summary:hover { border-color: var(--c-primary); }
.lib-dd > summary:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.lib-dd-value { font-weight: 500; color: var(--c-muted); max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.lib-dd.on > summary { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 10%, var(--c-surface)); }
.lib-dd.on .lib-dd-value { color: var(--c-primary); font-weight: 700; }
.lib-dd-caret { font-size: 11px; color: var(--c-muted); transition: transform .15s; }
.lib-dd[open] .lib-dd-caret { transform: rotate(180deg); }
.lib-dd-menu { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 230px; max-width: min(340px, calc(100vw - 32px)); padding: 8px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); box-shadow: 0 12px 32px rgba(0,0,0,.14); display: grid; gap: 6px; }
.lib-dd-list { max-height: 280px; overflow: auto; display: grid; gap: 2px; }
.lib-dd-opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.lib-dd-opt:hover { background: var(--c-surface-2); }
.lib-dd-opt[hidden] { display: none; }
.lib-dd-opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--c-primary); flex: 0 0 auto; }
.lib-dd-opt > span:first-of-type { flex: 1 1 auto; }
.lib-dd-opt .n { font-size: 12px; color: var(--c-muted); }
.lib-dd-find { min-height: 36px; font-size: 14px; }
.lib-active { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 12px; border-top: 1px dashed var(--c-border); }
.lib-active .chip { padding: 4px 10px; font-size: 12.5px; }
.lib-sheets .item .sub .lv { height: 18px; min-width: 32px; font-size: 11px; padding: 0 5px; }
@media (max-width: 560px) { .lib-query { flex-direction: column; } .lib-query select { flex-basis: auto; width: 100%; border-right: 0; border-bottom: 1px solid var(--c-border); }
  .lib-dd-menu { position: fixed; left: 16px; right: 16px; top: auto; max-width: none; } }

/* ---------------------------------------------------------------- 2.14: access tiers */
.access-bar { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 8px var(--sp-5); background: color-mix(in srgb, var(--c-accent) 16%, var(--c-surface)); border-bottom: 1px solid var(--c-border); font-size: 14px; }
.access-bar span { flex: 1 1 260px; }
.access-bar a { font-weight: 600; white-space: nowrap; }
.locked-ws { max-width: 860px; }
.locked-sheet { position: relative; display: grid; gap: 12px; padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); filter: blur(3px); opacity: .65; user-select: none; pointer-events: none; }
.ls-q { display: grid; grid-template-columns: 28px 1fr; gap: 6px 10px; align-items: center; }
.ls-n { width: 26px; height: 26px; border-radius: 50%; background: var(--c-primary-soft); display: grid; place-items: center; font-weight: 700; color: var(--c-primary); }
.ls-line { height: 12px; border-radius: 6px; background: var(--c-border); }
.ls-opts { grid-column: 2; display: flex; gap: 8px; } .ls-opts i { display: block; height: 30px; flex: 1; border-radius: 8px; border: 1px solid var(--c-border); }
.locked-cta { margin-top: -40px; position: relative; box-shadow: var(--shadow); }
.copy-guard .cg-zone :is(.q-prompt, .q-head, .ws-learn, .opt span, .explain) { -webkit-user-select: none; user-select: none; }
.copy-guard .cg-zone :is(input, textarea, select, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; }
.wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-5) var(--sp-4); }
/* 2.19.6: each worksheet is a clearly framed card — a firm border, the picture inset in its own frame and shown whole (busy
   pictures such as rows of word cards were cropped and ran into the next card), and a line between the picture and the text */
.wf-card { display: flex; flex-direction: column; background: var(--c-surface); border: 1.5px solid color-mix(in srgb, var(--c-primary) 22%, var(--c-border)); border-radius: var(--r-lg); overflow: hidden; color: inherit;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-text) 8%, transparent), 0 6px 16px -10px color-mix(in srgb, var(--c-primary) 30%, transparent); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.wf-card:hover, .wf-card:focus-visible { text-decoration: none; border-color: var(--c-primary); box-shadow: var(--shadow); transform: translateY(-2px); }
.wf-card .cover { margin: 8px 8px 0; aspect-ratio: 4/3; border-radius: calc(var(--r-lg) - 6px); background: var(--c-surface-2); border: 1px solid var(--c-border); overflow: hidden; display: grid; place-items: center; }
.wf-card .cover img { width: 100%; height: 100%; object-fit: contain; }
.wf-card .body { padding: var(--sp-3); display: grid; gap: 6px; border-top: 1px dashed var(--c-border); margin-top: 8px; flex: 1; align-content: start; }
.wf-card .meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wf-card .title { font-weight: 700; line-height: 1.3; }
/* 2.39.15: a featured program — the words read across, the cards below like this week's free worksheets */
.sp-program-head { max-width: 860px; }
.sp-program .wf-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.sp-program .wf-card { min-width: 0; }
.sp-program .wf-card .title { overflow-wrap: anywhere; }
.sp-program .wf-card .badge { font-size: 12px; white-space: normal; text-align: left; line-height: 1.3; }
.offer-band { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; margin-top: var(--sp-4); border: 2px solid var(--c-primary); background: var(--c-primary-soft); }
.offer-price { color: var(--c-primary); font-size: 1.3em; }
.pp-foot.with-qr { position: relative; padding-right: 64px; min-height: 58px; }
.pp-qr { position: absolute; right: 0; top: 4px; width: 52px; height: 52px; }
.pp-qr svg { width: 100%; height: 100%; }
.pp-school { display: block; font-weight: 600; }
.pin-pad { max-width: 360px; margin: 0 auto; text-align: center; }
.pin-dots { display: flex; justify-content: center; gap: 14px; margin: 8px 0; }
.pin-dots span { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--c-primary); }
.pin-dots span.on { background: var(--c-primary); }
.pin-msg { color: var(--c-danger); margin: 0; font-weight: 600; }
.pin-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-key { min-height: 64px; font: 700 26px var(--font-display); border-radius: var(--radius); border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); cursor: pointer; }
.pin-key:focus-visible, .name-chip:focus-visible { outline: none; box-shadow: var(--ring); }
.auth.wide { max-width: 760px; }
.name-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.name-chip { min-height: 56px; border-radius: var(--radius); border: 1px solid var(--c-border); background: var(--c-surface); font: 700 17px var(--font); color: var(--c-text); cursor: pointer; }
.name-chip:disabled { opacity: .5; cursor: not-allowed; }
.pin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pin-card { border: 1px dashed var(--c-border); border-radius: var(--radius); padding: var(--sp-3); break-inside: avoid; }
.pin-card b.pin { font: 700 26px var(--font-display); letter-spacing: .2em; display: block; }
.pin-card .pin-qr { width: 84px; background: #fff; float: right; margin-left: 8px; } .pin-card .pin-qr svg { width: 100%; height: auto; display: block; } /* 2.56: the class page QR on each slip */
.pin-card { word-break: break-word; }

/* ---------------------------------------------------------------- 2.14: site pages (blocks) and the in-place editor */
.site-page { display: grid; gap: var(--sp-5); margin-top: var(--sp-5); max-width: 860px; position: relative; }
.site-page.wide { max-width: none; }
.site-page .ed-open { position: absolute; right: 0; top: -12px; z-index: 2; }
.sp-text { font-size: 16.5px; max-width: 70ch; margin: 0; }
.sp-h2 { margin: var(--sp-4) 0 0; }
.sp-list { max-width: 70ch; margin: 0; }
.sp-figure { margin: 0; } .sp-figure img { max-width: 100%; border-radius: var(--radius); }
.sp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.hero.no-art { grid-template-columns: 1fr; }
.sp-hero .value-list, .sp-block .value-list { margin: 0; }
.sp-stats { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.sp-stats > div { flex: 1 1 140px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); display: grid; }
.sp-stats b { font: 700 26px var(--font-display); color: var(--c-primary); }
.sp-stats span { color: var(--c-muted); font-size: 14px; }
.sp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); }
.sp-card { display: grid; gap: 6px; align-content: start; color: inherit; }
a.sp-card:hover { text-decoration: none; box-shadow: var(--shadow); }
.sp-card h3, .sp-card p { margin: 0; }
.sp-card-ico { font-size: 28px; }
.sp-card-go { color: var(--c-primary); font-weight: 600; }
.sp-steps { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 6px; }
.sp-howto summary { cursor: pointer; }
.price-scroll { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
.price-table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 820px; font-size: 14px; }
.price-table th, .price-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--c-border); }
.price-table tbody tr:last-child > * { border-bottom: 0; }
.price-table thead th { vertical-align: bottom; }
.price-table tbody th { font-weight: 600; width: 190px; position: sticky; left: 0; background: var(--c-surface); z-index: 1; }
.price-table thead th:first-child { position: sticky; left: 0; background: var(--c-surface); z-index: 2; }
.price-table .feat { background: var(--c-primary-soft); }
.price-table thead th.feat { border-top: 3px solid var(--c-primary); }
.price-name { font: 700 18px/1.15 var(--font-display); display: block; }
.price-who, .price-hint { color: var(--c-muted); font-weight: 500; font-size: 12.5px; display: block; }
.price-tag:not(:empty) { display: inline-block; background: var(--c-primary); color: var(--c-primary-ink); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; margin-bottom: 6px; }
.price-table .y { color: var(--c-success); font-weight: 700; } .price-table .n { color: var(--c-muted); }
.price-table s { color: var(--c-muted); }
.price-notes { color: var(--c-muted); font-size: 13px; } .price-notes p { margin: 2px 0; }
.ed-bar { position: sticky; top: 0; z-index: 40; display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); margin-top: var(--sp-3); }
.site-page.editing { gap: var(--sp-3); }
.ed-help { margin: 0; }
.ed-text { outline: 1px dashed color-mix(in srgb, var(--c-primary) 45%, transparent); outline-offset: 2px; border-radius: 4px; min-width: 2ch; display: inline-block; cursor: text; }
.ed-text:focus { outline: 2px solid var(--c-primary); background: color-mix(in srgb, var(--c-primary) 6%, transparent); }
.ed-text:empty::before { content: attr(data-ph); color: var(--c-muted); font-weight: 400; font-style: italic; }
.ed-block { border: 1px solid transparent; border-radius: var(--radius); padding: 6px; }
.ed-block:hover, .ed-block:focus-within { border-color: var(--c-border); background: color-mix(in srgb, var(--c-surface) 60%, transparent); }
.ed-block-bar { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--c-muted); margin-bottom: 6px; }
.ed-block-bar button, .ed-item button { border: 1px solid var(--c-border); background: var(--c-surface); border-radius: 6px; min-width: 28px; min-height: 28px; cursor: pointer; color: var(--c-text); }
.ed-block-bar button:disabled, .ed-item button:disabled { opacity: .35; cursor: default; }
.ed-item { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.ed-add-item { border: 1px dashed var(--c-primary); background: transparent; color: var(--c-primary); border-radius: 8px; padding: 4px 10px; font: 600 13px var(--font); cursor: pointer; margin: 6px 0; }
.ed-insert { text-align: center; } .ed-insert button { border: 1px dashed var(--c-border); background: transparent; color: var(--c-muted); border-radius: 999px; padding: 3px 14px; cursor: pointer; font-size: 13px; }
.ed-insert button:hover, .ed-insert button:focus-visible { color: var(--c-primary); border-color: var(--c-primary); }
.ed-link { border: 0; background: none; cursor: pointer; font-size: 15px; padding: 2px 4px; }
.ed-opt { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--c-muted); }
.ed-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ed-catalog button { text-align: left; cursor: pointer; font: 600 14px var(--font); color: var(--c-text); }
.ed-empty-img { padding: 40px; text-align: center; border: 1px dashed var(--c-border); border-radius: var(--radius); color: var(--c-muted); }
.ed-btn-wrap { display: inline-flex; align-items: center; gap: 2px; }
.ed-title { margin: 0; }
@media (max-width: 560px) { .access-bar { padding: 8px 16px; } .ed-bar { font-size: 13px; } }
@media print { .access-bar, .ed-open { display: none !important; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--sp-4); }
.week-box { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-3); font-size: 14px; }
.week-sugg { margin: 4px 0 0; padding-left: 18px; }

/* 2.14 — partner teachers */
.pt-card { display: block; color: inherit; text-decoration: none; }
.pt-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.pt-meter { display: grid; gap: 6px; }
.pt-track { position: relative; height: 12px; border-radius: 99px; background: var(--c-surface-2, #f3f1f8); border: 1px solid var(--c-border, #e5e0f0); overflow: hidden; }
.pt-track span { display: block; height: 100%; background: var(--c-primary, #6d4ae0); border-radius: 99px; transition: width .4s; }
.pt-track i { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--c-text, #1e1b2e); opacity: .35; }
.pt-head { font-weight: 600; }
.badge.pt-silver { background: #eef1f5; color: #44505e; border-color: #c9d1db; }
.badge.pt-gold { background: #fff4d6; color: #7a5300; border-color: #f0c860; }
@media (prefers-reduced-motion: reduce) { .pt-track span { transition: none; } }
.sp-b-values .value-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* 2.15 — Account → Plan & access */
.sb-current.plus { border-color: var(--c-primary); background: linear-gradient(135deg, var(--c-primary-soft, #f0ebff), var(--c-surface)); }
.sb-list { display: grid; gap: 2px; }
.sb-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-border); }
.sb-row:last-child { border-bottom: 0; }
.sb-ico { font-size: 22px; width: 32px; text-align: center; }
.sb-val { text-align: right; min-width: 120px; }
.sb-meter { display: inline-grid; grid-template-columns: 110px auto; gap: 8px; align-items: center; }
.sb-compare td.feat, .sb-compare th.feat { background: var(--c-primary-soft, #f0ebff); }
@media (max-width: 560px) { .sb-row { flex-wrap: wrap; } .sb-val { text-align: left; min-width: 0; width: 100%; padding-left: 44px; } }

/* 2.15 — the Migo hero and its coaching demo */
.sage-hero { align-items: center; }
.sage-steps { list-style: none; counter-reset: st; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 20px 0 0; }
.sage-steps li { counter-increment: st; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 99px; background: var(--c-surface); border: 1px solid var(--c-border); font-size: 14px; transition: background .3s, border-color .3s; }
.sage-steps li::before { content: counter(st); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); font-weight: 700; font-size: 12px; }
.sage-steps li.on { border-color: var(--c-primary); background: var(--c-primary-soft); }
.sage-steps li.on::before { background: var(--c-primary); color: var(--c-primary-ink); }
.sage-demo { display: grid; gap: 14px; max-width: 460px; justify-self: end; width: 100%; }
.sd-head { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: end; }
.sd-sage svg { width: 96px; height: auto; display: block; }
.sd-bubble { position: relative; background: var(--c-primary-soft); border-radius: 16px 16px 16px 4px; padding: 12px 14px; min-height: 48px; }
.sd-q { margin: 0; font-size: 20px; }
.sd-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-opt { font: inherit; font-size: 17px; padding: 10px 18px; min-width: 88px; border-radius: 12px; border: 2px solid var(--c-border); background: var(--c-surface); color: var(--c-text); cursor: pointer; }
.sd-opt:hover:not(:disabled) { border-color: var(--c-primary); }
.sd-opt:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.sd-opt.no { border-color: var(--c-danger); color: var(--c-danger); text-decoration: line-through; }
.sd-opt.ok { border-color: var(--c-success); background: var(--c-success); color: #fff; }
.sd-progress { height: 10px; border-radius: 99px; background: var(--c-surface-2); border: 1px solid var(--c-border); overflow: hidden; }
.sd-progress span { display: block; height: 100%; width: 0; background: var(--c-success); transition: width .5s; }
@media (max-width: 860px) { .sage-demo { justify-self: stretch; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .sd-progress span, .sage-steps li { transition: none; } }
/* 2.15 — compact tiles (the home page's “free for everyone” row) */
.sp-cards.sp-tiles { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: var(--sp-3); }
.sp-tiles .sp-card { text-align: center; padding: var(--sp-4) var(--sp-3); display: grid; gap: 6px; align-content: start; justify-items: center; transition: transform .15s, border-color .15s; }
.sp-tiles .sp-card:hover { transform: translateY(-2px); border-color: var(--c-primary); text-decoration: none; }
.sp-tiles .sp-card-ico { font-size: 34px; line-height: 1; }
.sp-tiles .sp-card h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.sp-tiles .sp-card p { margin: 0; font-size: 13.5px; }
.sp-tiles .sp-card-go { font-size: 13px; }
.sp-b-cards .sp-tiles.free-row .sp-card { border-top: 4px solid var(--c-success); }
.sage-hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.05; }
.sage-demo { padding: var(--sp-5); box-shadow: 0 18px 50px -24px rgba(60, 40, 140, .35); }
.sd-head { grid-template-columns: 130px 1fr; }
.sd-sage svg { width: 130px; }
@media (max-width: 560px) { .sd-head { grid-template-columns: 84px 1fr; } .sd-sage svg { width: 84px; } .sp-cards.sp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .sp-tiles .sp-card { transition: none; } }
/* 2.15 home on phones: two worksheet cards per row, tiles two per row, so “free” stays above the fold longer */
@media (max-width: 560px) {
  .sp-weekly .wf-grid, .sp-program .wf-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sp-weekly .wf-card .title, .sp-program .wf-card .title { font-size: 14px; }
  .sp-cards.sp-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sp-tiles .sp-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* 2.15 class learner list: add / edit one learner, every field shown, ⋯ menu */
.lr-wide { display: grid; gap: var(--sp-4); }
.lr-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4); align-items: start; }
.lr-head { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.lr-head .lr-qrrow { display: flex; gap: var(--sp-3); align-items: center; flex: 1 1 420px; min-width: 0; }
.lr-head .lr-qr { width: 96px; flex: none; background: #fff; border-radius: 8px; padding: 4px; } /* 2.56: the class page QR */
.lr-head .lr-qr svg { width: 100%; height: auto; display: block; }
@media (max-width: 560px) { .lr-head .lr-qrrow { flex-wrap: wrap; } .lr-head .lr-qr { width: 120px; margin: 0 auto; } }
.lr-url { font-size: 13px; color: var(--c-primary); word-break: break-all; margin-top: 2px; }
.lr-small { font-size: 12.5px; }
.lr-parent + .lr-parent { margin-top: 4px; }
/* 2.32: the Parents cell opens the parents window */
.lr-parents { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; cursor: pointer; padding: 4px 6px; margin: -4px -6px; border-radius: 8px; min-width: 150px; }
.lr-parents:hover { background: var(--c-surface-2, rgba(108, 76, 230, .06)); }
.lr-parents:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.lr-parents .lr-parent + .lr-parent { margin-top: 0; }
.lr-parent.linked { color: var(--c-success); }
.lr-parent.linked b { color: var(--c-text); }
.lr-parent.add { color: var(--c-primary); font-weight: 600; font-size: 13px; }
.lr-parents .badge { font-size: 11px; padding: 1px 6px; }
.pm-invite { margin-top: 4px; }
/* 2.33: parents window */
.pm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
@media (max-width: 560px) { .pm-grid { grid-template-columns: minmax(0, 1fr); } }
.pm-contact { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0; font-size: 14px; }
.pm-contact span { overflow-wrap: anywhere; }
.pm-g .title b { font-size: 15px; }
.plan-lock { position: relative; min-height: 260px; }
.plan-lock-body { filter: blur(5px); pointer-events: none; user-select: none; opacity: .7; }
.plan-lock-cta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px; }
.plan-lock-cta > div { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 14px 18px; box-shadow: 0 6px 24px rgba(0,0,0,.12); max-width: 440px; display: grid; gap: 8px; justify-items: center; }
.table.learners td { vertical-align: top; }
.pin-chip { font: 700 15px ui-monospace, Menlo, monospace; letter-spacing: .15em; padding: 4px 10px; border-radius: 8px; border: 1px dashed var(--c-border); background: var(--c-surface-2); color: var(--c-text); cursor: pointer; min-width: 64px; }
.pin-chip:focus-visible, .lm-menu [role=menuitem]:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 1px; }
.lm { position: relative; display: inline-block; }
.lm-btn { font-size: 20px; line-height: 1; padding: 4px 10px; }
.lm-menu { position: fixed; z-index: 60; min-width: 240px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; box-shadow: 0 12px 32px rgba(30, 27, 46, .16); padding: 6px; display: grid; text-align: left; }
.lm-menu[hidden] { display: none; }
.lm-menu [role=menuitem] { font: inherit; font-size: 14px; text-align: left; background: none; border: 0; border-radius: 8px; padding: 9px 10px; color: var(--c-text); cursor: pointer; display: flex; gap: 8px; }
.lm-menu [role=menuitem]:hover, .lm-menu [role=menuitem]:focus { background: var(--c-primary-soft); }
.lm-menu [role=menuitem].danger { color: var(--c-danger); border-top: 1px solid var(--c-border); border-radius: 0 0 8px 8px; margin-top: 4px; }
.lf .lf-ids { gap: var(--sp-4); font-size: 14px; color: var(--c-muted); }
.lf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.lf-grid3 { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: var(--sp-2); }
.lf fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.lf legend { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 6px; }
.lf-parent { border-top: 1px solid var(--c-border) !important; padding-top: var(--sp-2) !important; }
.lf-birth select { flex: 1; min-width: 0; }
.lf-tabs { margin-bottom: var(--sp-3); }
.lf-tabs button { font: inherit; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; color: var(--c-muted); cursor: pointer; }
.lf-tabs button.on { color: var(--c-primary); border-bottom-color: var(--c-primary); font-weight: 600; }
@media (max-width: 640px) { .lf-grid, .lf-grid3 { grid-template-columns: 1fr; } }
/* 2.15 assign wizard: preview every item; Plus items stay grey and explain themselves when clicked */
.w-list { max-height: 280px; overflow: auto; display: grid; gap: 2px; }
.w-item { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 2px 4px; border-radius: 8px; }
.w-item:hover { background: var(--c-surface-2); }
.w-item .check { flex: 1; min-width: 0; }
.w-preview { flex: none; white-space: nowrap; }
.w-locked .check, .scope-opt.w-locked { opacity: .55; }
.w-locked .check input, .scope-opt.w-locked input { cursor: not-allowed; }
.w-plus-badge { background: #FFF4D6; color: #7A5200; }
.w-plus { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: #FFF8E6; border: 1px solid #F2D58A; color: #5C4300; font-size: 14px; }
/* 2.15 parent card: each piece of work, who set it, when it is due; each hand-in with its score */
.pb-box { border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-3); display: grid; gap: 8px; font-size: 14px; }
.pb-list { display: grid; gap: 6px; }
.pb-row { border: 1px solid var(--c-border); border-radius: 10px; background: var(--c-surface); }
.pb-row.late { border-color: color-mix(in srgb, var(--c-danger) 45%, var(--c-border)); }
.pb-row > summary { list-style: none; cursor: pointer; padding: 8px 10px; display: flex; gap: 8px; align-items: center; }
.pb-row > summary::-webkit-details-marker { display: none; }
.pb-row > summary::after { content: '▾'; color: var(--c-muted); }
.pb-row[open] > summary::after { content: '▴'; }
.pb-row > summary:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; border-radius: 10px; }
.pb-row.done { display: flex; gap: 8px; align-items: center; padding: 8px 10px; }
.pb-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; align-items: center; }
.pb-detail { padding: 0 10px 10px; display: grid; gap: 6px; }
.pb-score { display: flex; gap: 6px; align-items: center; flex: none; }
.src-chip, .due-chip { font-size: 12.5px; padding: 2px 8px; border-radius: 99px; background: var(--c-surface-2); border: 1px solid var(--c-border); white-space: nowrap; }
.src-chip.src-me, .src-chip.src-family { background: #EAF6EF; border-color: #CBE8D6; }
.src-chip.src-self { background: #FFF6E5; border-color: #F3E0B5; }
.due-chip.late { color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 40%, var(--c-border)); background: color-mix(in srgb, var(--c-danger) 7%, var(--c-surface)); font-weight: 600; }
.due-chip.wait { color: var(--c-warning); }
.pb-lock { opacity: .8; }
.pb-plus { font-size: 13.5px; padding: 10px 12px; border-radius: 10px; background: #FFF8E6; border: 1px solid #F2D58A; color: #5C4300; }
.ws-parent-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: var(--sp-3); border-radius: var(--radius); background: var(--c-primary-soft); }
.pb-groups { display: grid; gap: 10px; }
.pb-sub { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--c-muted); margin-top: 2px; }
ul.pb-list { list-style: none; margin: 0; padding: 0; }
li.pb-row { display: flex; gap: 8px; align-items: center; padding: 8px 10px; }
li.pb-row a b { color: var(--c-text); }
li.pb-row a:hover b { text-decoration: underline; }
.pb-note { font-size: 13px; margin-top: 4px; }
.due-chip.soon { color: #8A5A00; background: #FFF4D6; border-color: #F2D58A; font-weight: 600; }
/* 2.15 home: two cards (centres, schools) share the row instead of leaving it half empty */
.sp-cards:not(.sp-tiles):has(> .sp-card:nth-child(2):last-child) { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* 2.16.1 reading frames: the holder matches what the text is. One base, ten looks; all plain CSS so print stays light. */
.reading.framed { position: relative; display: flow-root; margin: 0; padding: 0; border-radius: 14px; background: #fff; color: #1f2937; border: 2px solid #cbd5e1; overflow: hidden; }
.reading.framed .fr-head { display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-weight: 700; }
.reading.framed .fr-head b { flex: 1; }
.reading.framed .fr-body { padding: 14px 20px 16px; display: flow-root; }
.reading.framed .fr-body figure { float: right; width: 42%; margin: 4px 0 10px 16px; }
.reading.framed .fr-body figure img { max-height: 260px; object-fit: cover; border-radius: 10px; }
.reading.framed p { margin: 0 0 10px; }
.reading.hand, .reading.hand .fr-head { font-family: 'Patrick Hand', 'Comic Sans MS', 'Segoe Print', cursive; font-size: 19px; line-height: 1.6; letter-spacing: .01em; }
.reading.has-deco .fr-head, .reading.has-deco .fr-body { margin-left: 34px; }
.fr-deco { position: absolute; left: 0; top: 0; bottom: 0; width: 34px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 12px; overflow: hidden; font-size: 17px; background: rgba(0,0,0,.03); border-right: 1px dashed #d1d5db; }
/* magazine page: masthead bar, serif text in two columns, boxed numbered tips */
.reading.frame-magazine { border: 0; box-shadow: 0 1px 0 #e5e7eb, 0 6px 18px rgba(15,23,42,.10); border-top: 8px solid #e11d48; }
.reading.frame-magazine .fr-head { font-family: Georgia, 'Times New Roman', serif; font-size: 21px; text-transform: none; border-bottom: 3px double #1f2937; margin: 0 16px; padding: 12px 2px 8px; }
.reading.frame-magazine .fr-body { font-family: Georgia, 'Times New Roman', serif; columns: 2 260px; column-gap: 26px; column-rule: 1px solid #e5e7eb; }
.reading.frame-magazine .fr-body figure { float: none; width: 100%; margin: 0 0 10px; break-inside: avoid; }
.reading.frame-magazine .fr-body p { break-inside: avoid; }
/* exercise book: ruled lines, red margin, punched holes */
.reading.frame-notebook { background: #fffef7 repeating-linear-gradient(#fffef7 0 29px, #bfdbfe 29px 30px); background-position: 0 6px; border-color: #e5e7eb; box-shadow: 4px 4px 0 #e5e7eb; }
.reading.frame-notebook::before { content: ''; position: absolute; top: 0; bottom: 0; left: 46px; border-left: 2px solid #fca5a5; }
.reading.frame-notebook.has-deco::before { left: 80px; }
.reading.frame-notebook .fr-head, .reading.frame-notebook .fr-body { padding-left: 62px; }
.reading.frame-notebook .fr-head { font-size: 22px; color: #1d4ed8; }
.reading.frame-notebook .fr-body { line-height: 30px; padding-top: 0; }
.reading.frame-notebook p { margin: 0 0 30px; } .reading.frame-notebook p:last-child { margin: 0; }
/* postcard: airmail stripes, stamp in the corner, picture on the left */
.reading.frame-postcard { border: 10px solid transparent; border-image: repeating-linear-gradient(45deg, #dc2626 0 12px, #fff 12px 24px, #1d4ed8 24px 36px, #fff 36px 48px) 10; border-radius: 0; background: #fffdf5; }
.reading.frame-postcard .fr-stamp { width: 52px; height: 60px; display: grid; place-items: center; font-size: 26px; border: 3px dotted #b45309; background: #fef3c7; transform: rotate(4deg); }
.reading.frame-postcard .fr-body figure { float: left; margin: 4px 16px 10px 0; }
/* letter: lined writing paper with a soft envelope edge */
.reading.frame-letter { background: #fffbeb; border: 0; box-shadow: inset 0 0 0 1px #fde68a, 0 4px 14px rgba(120,53,15,.12); border-top: 6px solid #f59e0b; }
.reading.frame-letter .fr-head { color: #92400e; }
/* email and blog: a screen window */
.reading.frame-email, .reading.frame-blog { border: 2px solid #94a3b8; }
.reading.frame-email .fr-head, .reading.frame-blog .fr-head { background: #e2e8f0; font-size: 15px; padding: 8px 14px; }
.reading.frame-blog .fr-head { background: #ede9fe; }
.fr-dots { display: inline-flex; gap: 6px; } .fr-dots i { width: 11px; height: 11px; border-radius: 50%; background: #f87171; } .fr-dots i:nth-child(2) { background: #fbbf24; } .fr-dots i:nth-child(3) { background: #34d399; }
/* notice board: cork, pinned paper */
.reading.frame-notice { background: #c08552; border: 0; padding: 16px; border-radius: 14px; }
.reading.frame-notice::after { content: '📌'; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-size: 22px; }
.reading.frame-notice .fr-head, .reading.frame-notice .fr-body { background: #fff; }
.reading.frame-notice .fr-head { justify-content: center; text-align: center; font-size: 19px; padding-top: 18px; border-radius: 4px 4px 0 0; text-transform: none; }
.reading.frame-notice .fr-body { border-radius: 0 0 4px 4px; box-shadow: 0 6px 10px rgba(0,0,0,.18); }
.reading.frame-notice.has-deco .fr-head, .reading.frame-notice.has-deco .fr-body { margin-left: 34px; }
/* phone chat: speech bubbles */
.reading.frame-chat { max-width: 560px; margin: 0 auto; border: 10px solid #1f2937; border-radius: 30px; background: #f1f5f9; }
.reading.frame-chat .fr-head { background: #1f2937; color: #fff; justify-content: center; font-size: 15px; }
.reading.frame-chat .fr-say { background: #fff; border-radius: 14px 14px 14px 4px; padding: 8px 12px; margin: 0 40px 10px 0; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.reading.frame-chat .fr-say.other { background: #dcfce7; border-radius: 14px 14px 4px 14px; margin: 0 0 10px 40px; }
.reading.frame-chat .fr-say b, .reading.frame-script .fr-say b { display: block; font-size: 13px; color: #6d28d9; }
/* storybook: book page with a double rule and a drop capital */
.reading.frame-book { background: #fffaf0; border: 3px double #a16207; font-family: Georgia, 'Times New Roman', serif; }
.reading.frame-book .fr-head { justify-content: center; text-align: center; font-size: 21px; color: #78350f; }
.reading.frame-book .fr-body > p:first-of-type::first-letter { float: left; font-size: 3.1em; line-height: .9; padding: 4px 8px 0 0; color: #b45309; font-weight: 700; }
/* script: radio or play script */
.reading.frame-script { background: #f8fafc; border-left: 8px solid #6366f1; }
.reading.frame-script .fr-say { padding-left: 4px; }
.paper .reading.framed, .sheet .reading.framed { padding: 0; }
.paper .reading.framed { border-width: 2px; } .paper .reading.frame-notice { padding: 10px; } .paper .reading.frame-postcard { border-width: 8px; }
.paper .reading.framed .fr-body figure, .sheet .reading.framed .fr-body figure { float: right; width: 40%; }
.sheet .long-read .reading.framed { columns: 1; } .sheet .long-read .reading.frame-magazine .fr-body { columns: 2; }
@media screen and (max-width: 640px) { .reading.framed .fr-body figure { float: none; width: 100%; margin: 0 0 10px; } .reading.frame-magazine .fr-body { columns: 1; } .reading.has-deco .fr-head, .reading.has-deco .fr-body { margin-left: 26px; } .fr-deco { width: 26px; font-size: 14px; } .reading.frame-notebook .fr-head, .reading.frame-notebook .fr-body { padding-left: 40px; } .reading.frame-notebook::before { left: 30px; } .reading.frame-notebook.has-deco::before { left: 56px; } }
@media print { .reading.framed { box-shadow: none; } .reading.hand { font-size: 13pt; } }
.reading.frame-magazine.fr-cards .fr-body p { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; padding: 8px 12px; box-shadow: 2px 2px 0 #fde68a; }
.reading.frame-magazine.fr-cards .fr-body p:nth-of-type(3n+2) { background: #eff6ff; border-color: #bfdbfe; box-shadow: 2px 2px 0 #bfdbfe; }
.reading.frame-magazine.fr-cards .fr-body p:nth-of-type(3n) { background: #f0fdf4; border-color: #bbf7d0; box-shadow: 2px 2px 0 #bbf7d0; }
.reading.framed .fr-body figure.wide, .paper .reading.framed .fr-body figure.wide, .sheet .reading.framed .fr-body figure.wide { float: none; width: 100%; margin: 0 0 12px; }
.reading.framed .fr-body figure.wide img { max-height: none; object-fit: contain; }
/* 2.16.1 one reading, several texts: each text in its own holder, notes and plans in a teacher's note box */
.reading.fr-parts { font-size: 16.5px; }
.fr-parts-title { font-size: 17px; margin: 0 0 10px; }
.fr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.fr-part.span { grid-column: 1 / -1; }
.reading.frame-note { background: #f8fafc; border: 2px dashed #94a3b8; border-radius: 12px; font-size: 15px; }
.reading.frame-note .fr-head { color: #475569; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 0; }
.reading.frame-note .fr-body { padding-top: 8px; color: #334155; }
.paper .fr-grid, .sheet .fr-grid { gap: 8px; } .paper .reading.fr-parts, .sheet .reading.fr-parts { padding: 0; border: 0; background: none; }
@media print { .fr-part { break-inside: avoid; } }
/* 2.16.3: a short magazine piece inside a split reading stays in one column */
.fr-part.short .reading.frame-magazine .fr-body { columns: 1; column-rule: none; }

/* 2.16.4 — attendance (register) */
.att-list { display: grid; gap: 6px; }
.att-row { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto minmax(120px, 180px); gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); }
.att-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.att-seg .check { border: 1px solid var(--c-border); border-radius: 99px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.att-seg .check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.att-seg .check:has(input:focus-visible) { box-shadow: var(--ring); }
.att-seg .att-present:has(input:checked) { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.att-seg .att-late:has(input:checked) { background: var(--c-warning); border-color: var(--c-warning); color: #fff; }
.att-seg .att-absent:has(input:checked) { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.att-seg .att-excused:has(input:checked) { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-ink); }
.att-note { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--c-border); border-radius: var(--r-sm); min-width: 0; }
.att-sum { font: inherit; font-size: 13.5px; background: none; border: 0; padding: 0; color: var(--c-text); cursor: pointer; text-align: left; }
.att-sum:hover { text-decoration: underline; }
.att-abs { color: var(--c-danger); font-weight: 600; }
.src-chip.att-warn { border-color: color-mix(in srgb, var(--c-danger) 40%, transparent); color: var(--c-danger); }
@media (max-width: 640px) { .att-row { grid-template-columns: auto 1fr; } .att-seg, .att-note { grid-column: 1 / -1; } }

/* 2.16.4 — site pages as full-width sections, each with its own background (block “section”) */
.site-page.banded { gap: 0; margin-top: 0; }
.sp-band { --band: var(--c-surface); position: relative; background: var(--band); padding: 56px 0; }
.sp-band-in { display: grid; gap: var(--sp-5); }
.pub-main .site-page.banded { margin: calc(-1 * var(--sp-5)) 0 calc(-1 * var(--sp-7)); }
.pub-main .sp-band { box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
.content .sp-band { border-radius: var(--r-lg); padding: 36px 28px; margin-bottom: var(--sp-4); }
.sp-band.tone-hero { --band: color-mix(in srgb, var(--c-primary-soft) 65%, var(--c-bg)); padding: 40px 0 56px; }
.sp-band.tone-plain { --band: var(--c-surface); }
.sp-band.tone-soft { --band: var(--c-primary-soft); }
.sp-band.tone-warm { --band: color-mix(in srgb, var(--c-accent) 15%, var(--c-surface)); }
.sp-band.tone-mint { --band: color-mix(in srgb, var(--c-success) 11%, var(--c-surface)); }
.sp-band.tone-sky { --band: color-mix(in srgb, var(--lv-b2) 10%, var(--c-surface)); }
.sp-band.tone-deep { --band: color-mix(in srgb, var(--c-primary) 90%, #000); color: #fff; }
.tone-deep .sp-text, .tone-deep .muted:not(.panel *), .tone-deep .value-list p { color: rgba(255, 255, 255, .88); }
.tone-deep .panel { color: var(--c-text); }
.tone-deep a:not(.btn):not(.panel):not(.panel *) { color: #fff; text-decoration: underline; }
.tone-deep .sp-kicker { color: var(--c-accent); }
.tone-deep .btn.secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.sp-band.tone-plain .sp-tiles .sp-card, .sp-band.tone-plain .sp-faq .panel { background: var(--c-surface-2); }
.sp-band .sp-h2:first-child, .sp-band .sp-block:first-child .sp-h2 { margin-top: 0; }
.sp-band .sp-h2 { font-size: clamp(24px, 3vw, 34px); }
.sp-band .hero { padding: 0; }
/* 2.16.5 — benefits as cards inside a band (block “values”), readable on the dark band too */
.sp-band .sp-b-values .value-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--sp-4); }
@media (min-width: 761px) { .sp-band .sp-b-values .value-list:has(> div:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sp-band .value-list > div { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--sp-4); }
.sp-band.tone-plain .value-list > div { background: var(--c-surface-2); }
.sp-band .value-list h3 { font-size: 17px; line-height: 1.3; }
.sp-band .value-list p { font-size: 14.5px; }
.tone-deep .value-list > div, .tone-deep .sp-stats > div { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .2); }
.tone-deep .sp-stats b { color: #fff; }
.tone-deep .sp-stats span { color: rgba(255, 255, 255, .8); }
.tone-deep .note { background: rgba(255, 255, 255, .1); border-color: var(--c-accent); color: #fff; }
.tone-deep .sp-text { margin: 0; }
.tone-deep .sp-cta .btn:not(.secondary) { background: #fff; color: var(--c-primary); border-color: #fff; }
.ed-section { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r-sm); border: 2px dashed var(--c-primary); font-weight: 600; font-size: 14px; background: var(--c-primary-soft); }
.ed-section.tone-deep { background: color-mix(in srgb, var(--c-primary) 90%, #000); color: #fff; }
.ed-section.tone-warm { background: color-mix(in srgb, var(--c-accent) 15%, var(--c-surface)); }
.ed-section.tone-mint { background: color-mix(in srgb, var(--c-success) 11%, var(--c-surface)); }
.ed-section.tone-plain { background: var(--c-surface); }
@media (max-width: 760px) {
  .sp-band { padding: 40px 0; }
  .pub-main .site-page.banded { margin-top: calc(-1 * var(--sp-4)); }
  .content .sp-band { padding: 28px 18px; }
}

/* benefit + a real screen (block “feature”) */
.sp-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px; align-items: center; }
.sp-feature.flip .sp-feature-text { order: 2; }
.sp-feature h2 { font-size: clamp(24px, 3vw, 34px); margin: 0 0 12px; }
.sp-kicker { display: inline-block; font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 8px; }
.sp-ticks { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.sp-ticks li { position: relative; padding-left: 32px; font-size: 15.5px; }
.sp-ticks li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--c-success); color: #fff; }
.sp-shot { margin: 0; display: grid; gap: 8px; }
.sp-shot-frame { border-radius: 14px; background: var(--c-surface); border: 1px solid var(--c-border); overflow: hidden; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--c-primary) 50%, transparent); }
.sp-shot-bar { display: flex; gap: 6px; padding: 9px 12px; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); }
.sp-shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-border); }
.sp-shot img { display: block; width: 100%; height: auto; }
.sp-shot figcaption { font-size: 13px; color: var(--c-muted); text-align: center; }
.tone-deep .sp-shot figcaption { color: rgba(255, 255, 255, .8); }
@media (max-width: 860px) { .sp-feature { grid-template-columns: 1fr; gap: 24px; } .sp-feature.flip .sp-feature-text { order: 0; } }

/* Migo hero: the lines under Migo appear one after another */
.sd-head { align-items: start; }
.sd-left { display: grid; gap: 10px; justify-items: center; }
.sage-lines { list-style: none; counter-reset: sl; margin: 0; padding: 0; display: grid; gap: 5px; width: 100%; font-size: 14.5px; line-height: 1.3; }
.sage-lines li { opacity: 0; transform: translateY(6px); animation: sl-in .5s ease-out forwards; animation-delay: calc(.3s + var(--i, 0) * .6s); transition: color .3s; }
.sage-lines li.lead { font-weight: 700; color: var(--c-text); }
.sage-lines li:not(.lead) { counter-increment: sl; }
.sage-lines li:not(.lead)::before { content: counter(sl) '. '; color: var(--c-primary); font-weight: 700; }
.sage-lines li.on:not(.lead) { color: var(--c-primary); font-weight: 600; }
.sage-lines.still li { opacity: 1; transform: none; animation: none; }
@keyframes sl-in { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sage-lines li { opacity: 1; transform: none; animation: none; } }
@media (max-width: 560px) { .sd-head { grid-template-columns: 128px 1fr; } .sd-sage svg { width: 96px; } .sage-lines { font-size: 13px; } }
.sage-lines li { white-space: nowrap; } .sage-lines li.lead { font-size: 1em; }
.att-sub { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--c-muted); margin: 12px 0 6px; }
.att-teacher { background: var(--c-surface-2); }
.sp-shot img { max-height: 640px; object-fit: cover; object-position: top; }

/* 2.16.7 — the school contact form: who it goes to */
.contact-to { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; padding: 10px 14px; border-radius: var(--r-sm); background: var(--c-surface-2); border: 1px solid var(--c-border); }
.contact-to .muted:first-child { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.req-card { display: grid; gap: 6px; }
.req-card dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: 14.5px; }
.req-card dt { color: var(--c-muted); }
.req-card dd { margin: 0; }
/* 2.16.8 — Plus report peek (blurred) + Basic vs Plus table */
.plus-prev { border: 1.5px solid color-mix(in srgb, var(--c-accent) 45%, transparent); border-radius: var(--radius); padding: 12px 14px; background: color-mix(in srgb, var(--c-accent) 5%, var(--c-surface)); }
.plus-prev h4 { margin: 0 0 4px; font-size: 14px; }
.plus-prev .table td { padding: 5px 8px; }
.plus-prev .pp-line { padding: 3px 0; }
.fog { filter: blur(4px); color: var(--c-muted); letter-spacing: -1px; user-select: none; }
.plus-prev .locked { filter: blur(3.5px); user-select: none; }
.lock-wrap { position: relative; min-height: 170px; padding-bottom: 84px; }
.lock-cta { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); display: grid; gap: 6px; justify-items: center; text-align: center; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 12px 16px; box-shadow: 0 6px 24px rgba(0,0,0,.12); max-width: 90%; }
.cmp-wrap .cmp td:not(:first-child), .cmp-wrap .cmp th:not(:first-child) { text-align: center; width: 90px; }
.ok-ic { color: var(--c-success); font-weight: 800; }
/* 2.17.7 — the Plus report as Basic accounts see it: same sections as the real report, the Plus part blurred and tappable */
.plus-like { max-width: none; min-width: 0; grid-template-columns: minmax(0, 1fr); } /* 2.32: the preview stays inside the report panel (wide tables scroll) */
.plus-like > * { min-width: 0; }
.plus-like .table-wrap, .plus-like table { max-width: 100%; }
.report-panel { min-width: 0; }
.plus-like .panel { box-shadow: none; }
.plus-like .trend .col { background: var(--c-muted); opacity: .45; }
.plus-like .pl-ribbon { display: grid; gap: 2px; padding: 10px 14px; border: 1.5px solid color-mix(in srgb, var(--c-accent) 45%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--c-accent) 8%, var(--c-surface)); font-size: 14px; }
.lock-hit { cursor: pointer; border-radius: 8px; position: relative; -webkit-tap-highlight-color: transparent; }
div.lock-hit { padding-right: 26px; }
div.lock-hit::after { content: '🔒'; position: absolute; right: 6px; top: 4px; font-size: 13px; filter: none; }
.lock-hit:hover, .lock-hit:focus-visible { background: color-mix(in srgb, var(--c-accent) 12%, transparent); outline: 2px solid color-mix(in srgb, var(--c-accent) 55%, transparent); outline-offset: 1px; }
tr.lock-hit:hover td, tr.lock-hit:focus-visible td { background: color-mix(in srgb, var(--c-accent) 12%, transparent); }
tr.lock-hit:focus-visible, li.lock-hit:focus-visible { outline-offset: -2px; }
.lock-cta.static { position: static; transform: none; max-width: none; margin: 4px auto 0; width: min(100%, 520px); }

.tease-list .item { align-items: center; }
.tease-list .item .btn { pointer-events: none; }
.plus-tease { display: grid; gap: 8px; }
.tease-skill { display: grid; grid-template-columns: 84px 1fr 44px; gap: 10px; align-items: center; padding: 4px 6px; font-size: 14px; }
.tease-skill .bar { display: block; height: 8px; border-radius: 999px; background: var(--c-surface-2); overflow: hidden; filter: blur(2px); }
.tease-skill .bar i { display: block; height: 100%; background: var(--c-muted); opacity: .5; }
.badge.accent { background: color-mix(in srgb, var(--c-accent) 22%, var(--c-surface)); }
/* 2.16.9 — a festive announcement (holidays, gifts) */
.announce.celebrate { background: linear-gradient(90deg, color-mix(in srgb, var(--c-accent) 22%, var(--c-surface)), color-mix(in srgb, var(--c-primary) 14%, var(--c-surface))); border: 1px solid color-mix(in srgb, var(--c-accent) 40%, transparent); }

/* 2.17 — courses (LMS): icons, gallery / list, ♥ favourites, course tabs with the Communication ▾ menu, modules, rich text */
.c-icon { display: inline-grid; place-items: center; flex: none; border-radius: 14px; background: var(--c-primary-soft); object-fit: cover; line-height: 1; }
.heart { border: 0; background: none; font-size: 22px; line-height: 1; color: var(--c-muted); cursor: pointer; padding: 6px; border-radius: 999px; min-width: 40px; min-height: 40px; }
.heart.on { color: #E0446A; }
.heart:hover, .heart:focus-visible { background: var(--c-primary-soft); }
.heart:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 1px; }
.heart-mini { color: #E0446A; }
.heart-btn.on { color: #C02656; border-color: #F3B6C6; }
.c-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-4); }
.c-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: 16px; display: grid; gap: 8px; align-content: start; position: relative; }
.c-card.fav { border-color: #F3B6C6; }
.c-card:hover { box-shadow: var(--shadow); }
.c-top { display: flex; justify-content: space-between; align-items: flex-start; }
.c-name { font: 700 17px var(--font-display); color: var(--c-text); }
.c-name::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } /* the whole card opens the course… */
.c-card .heart, .c-card .code-chip { position: relative; z-index: 1; } /* …except the heart */
.c-desc { margin: 0; font-size: 13.5px; color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-row .title { font-weight: 600; color: var(--c-text); }
.c-head { display: flex; gap: var(--sp-3); align-items: flex-start; }
.c-head > .c-icon { margin-top: 4px; }
.c-head .grow { min-width: 0; }
.c-tabs { overflow-x: auto; flex-wrap: nowrap; } /* the ▾ menu is position: fixed, so the scroll box does not clip it */
.c-comm > button { padding: 10px 14px; color: var(--c-muted); font: 600 14px var(--font); border: 0; background: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.c-comm > button.on { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.c-comm .lm-menu a { display: flex; gap: 8px; padding: 9px 10px; border-radius: 8px; color: var(--c-text); font-size: 14px; }
.c-comm .lm-menu a:hover, .c-comm .lm-menu a:focus, .c-comm .lm-menu a.on { background: var(--c-primary-soft); text-decoration: none; }
.c-sub { display: flex; gap: 6px; flex-wrap: wrap; margin: -8px 0 var(--sp-4); }
.c-sub a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--c-border); font-size: 13.5px; font-weight: 600; color: var(--c-muted); }
.c-sub a.on { background: var(--c-primary-soft); color: var(--c-primary); border-color: transparent; }
.c-lead { font-size: 16px; margin: 0; }
.c-post { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 12px 14px; }
.c-post.pinned { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 7%, var(--c-surface)); }
.c-post header { gap: 10px; align-items: flex-start; flex-wrap: nowrap; }
.c-post header .grow { min-width: 0; }
.c-post h3 { margin: 0; font-size: 15.5px; }
.c-post .rt-view { margin-top: 8px; }
.rt-view { line-height: 1.6; overflow-wrap: anywhere; }
.rt-view > :first-child { margin-top: 0; } .rt-view > :last-child { margin-bottom: 0; }
.rt-view img { max-width: 100%; height: auto; border-radius: 10px; }
.rt-view blockquote { margin: 10px 0; padding: 8px 14px; border-left: 4px solid var(--c-primary); background: var(--c-surface-2); border-radius: 0 10px 10px 0; }
.rt { border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); }
.rt:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.rt-bar { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px; border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); border-radius: var(--radius) var(--radius) 0 0; }
.rt-b { min-width: 34px; height: 34px; border: 0; background: none; border-radius: 8px; cursor: pointer; font: 600 13.5px var(--font); color: var(--c-text); }
.rt-b:hover, .rt-b:focus-visible { background: var(--c-primary-soft); }
.rt-b:focus-visible { outline: 2px solid var(--c-primary); }
.rt-sep { width: 1px; background: var(--c-border); margin: 4px 4px; }
.rt-area { padding: 12px 14px; outline: none; line-height: 1.6; overflow-wrap: anywhere; }
.rt-area img { max-width: 100%; }
.rt-area blockquote { margin: 8px 0; padding: 6px 12px; border-left: 4px solid var(--c-primary); background: var(--c-surface-2); }
.c-sum .kv { margin: 0; }
.c-due { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.c-due li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.c-due li span { font-size: 12.5px; white-space: nowrap; }
.c-teacher { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.c-teacher + .c-teacher { border-top: 1px solid var(--c-border); }
.c-teacher p { margin: 4px 0 0; font-size: 13.5px; color: var(--c-muted); }
.c-mod > header h2 { font-size: 18px; }
.c-mod.draft { border-style: dashed; background: var(--c-surface-2); }
.c-items { list-style: none; margin: 0; padding: 0; }
.c-item { display: flex; gap: 12px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--c-border); }
.c-item:first-child { border-top: 0; }
.c-item.draft { opacity: .62; }
.c-item .title { font-weight: 600; color: var(--c-text); }
.c-item .sub { font-size: 13px; }
.c-kind { font-size: 20px; width: 32px; text-align: center; flex: none; }
.c-kinds, .c-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.c-kopt, .c-iopt { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--c-border); border-radius: 12px; padding: 8px 12px; cursor: pointer; font-weight: 600; font-size: 14px; }
.c-kopt input, .c-iopt input { position: absolute; opacity: 0; pointer-events: none; }
.c-kopt.on, .c-iopt.on { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); }
.c-kopt:focus-within, .c-iopt:focus-within { outline: 3px solid var(--c-primary); outline-offset: 1px; }
/* 2.17.4: “Create new / Add existing” are real tabs: underline on the active one, joined to the panel below */
.c-modetabs { display: flex; gap: 0; margin: 0 0 -1px; position: relative; z-index: 1; }
.c-mode { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--c-muted, #6b6880); background: var(--c-surface-2, #f1eff8); border: 1px solid var(--c-border); border-bottom-color: var(--c-border); border-radius: 12px 12px 0 0; margin-right: -1px; }
.c-mode input { position: absolute; opacity: 0; pointer-events: none; }
.c-mode:hover { color: var(--c-text); }
.c-mode.on { background: var(--c-surface, #fff); color: var(--c-primary); border-top: 3px solid var(--c-primary); border-bottom-color: var(--c-surface, #fff); padding-top: 8px; }
.c-mode:focus-within { outline: 3px solid var(--c-primary); outline-offset: -3px; }
.c-modepanel { border: 1px solid var(--c-border); border-radius: 0 12px 12px 12px; background: var(--c-surface, #fff); padding: 16px; display: grid; gap: 14px; }
.c-iopt { font-size: 24px; padding: 6px; width: 48px; height: 48px; justify-content: center; }
.c-iopt img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; }
.fi-prev { min-height: 40px; } .fi-prev img { max-width: 220px; max-height: 160px; border-radius: 12px; }
.c-danger { border-color: color-mix(in srgb, var(--c-danger) 35%, var(--c-border)); }
.c-mates { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.c-page h1 { margin-top: 0; }
.mq { border: 1px solid var(--c-border); border-radius: var(--radius); padding: 10px 14px 14px; margin: 0 0 12px; display: grid; gap: 8px; }
.mq legend { font-weight: 700; padding: 0 4px; }
.mq-choices { display: grid; gap: 6px; }
.mq-ch { display: grid; grid-template-columns: 28px 1fr 40px; align-items: center; gap: 8px; }
.mq-ch input[type=radio] { width: 20px; height: 20px; margin: 0 auto; accent-color: var(--c-primary); }
.mq-top { display: grid; grid-template-columns: 1fr 110px 44px; gap: 10px; align-items: end; }
.mq-top.quiz { grid-template-columns: 110px 44px; justify-content: start; }
.mq-cadd, #ic-pick { justify-self: start; width: auto; }
@media (max-width: 640px) { .c-head > .c-icon { width: 44px !important; height: 44px !important; font-size: 26px !important; } .c-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .c-card { padding: 12px; } }

/* 2.17.1 — Phân quyền: features × kinds of account, one tick each */
.perm-wrap { max-height: 72vh; }
.perm th { position: sticky; top: 0; z-index: 1; background: var(--surface, #fff); font-size: 12.5px; text-align: center; white-space: normal; min-width: 92px; }
.perm th:first-child, .perm td:first-child { text-align: left; min-width: 260px; }
.perm td { text-align: center; vertical-align: middle; }
.perm .is-plus { background: color-mix(in srgb, var(--primary, #6d4aff) 6%, transparent); }
.perm .perm-g td { font-weight: 700; background: var(--surface-2, #f4f4f7); text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.perm-box { display: inline-flex; padding: 8px; cursor: pointer; }
.perm-box input { width: 20px; height: 20px; cursor: pointer; accent-color: var(--primary, #6d4aff); }
.perm-box:focus-within { outline: 2px solid var(--primary, #6d4aff); border-radius: 6px; }

/* 2.17.1 — the way through a list of work: ✕ close, ← previous, 3 / 8, → next */
.trail-bar { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.trail-bar .btn { min-width: 36px; justify-content: center; font-size: 16px; }
.trail-bar .btn.disabled { opacity: .35; pointer-events: none; }
.trail-pos { font-size: 13px; min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.close-row { display: flex; justify-content: flex-start; margin-bottom: 4px; }
.close-x { font-size: 16px; min-width: 36px; justify-content: center; }
/* 2.17.1 — the gradebook: a column for every piece of work; the learner column stays in view */
.gradebook th, .gradebook td { white-space: nowrap; }
.gradebook th:not(:first-child) { min-width: 96px; }
.gradebook th:first-child, .gradebook td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface, #fff); min-width: 160px; box-shadow: 1px 0 0 var(--line, #eee); }
.gradebook td:last-child, .gradebook th:last-child { font-weight: 700; }

/* 2.17.1 — picture search grid, embedded videos in rich text */
.fi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; }
.fi-grid > p { grid-column: 1 / -1; }
.fi-hit { position: relative; padding: 0; border: 2px solid var(--c-border); border-radius: 10px; background: var(--c-surface-2); cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.fi-hit img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fi-hit span { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; padding: 2px 6px; background: rgba(0, 0, 0, .55); color: #fff; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-hit:hover, .fi-hit:focus-visible { border-color: var(--c-primary); outline: 3px solid var(--c-primary-soft); }
.rt-video { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; margin: 10px 0; border-radius: 12px; overflow: hidden; background: #000; }
.rt-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rt-area .rt-video { outline: 2px dashed var(--c-border); }
.ws-rich { line-height: 1.7; }
.ws-rich > :first-child { margin-top: 0; }
.ws-rich img { max-width: 100%; height: auto; border-radius: 10px; }
.ws-rich blockquote { margin: 10px 0; padding: 8px 14px; border-left: 4px solid var(--c-primary); background: var(--c-surface-2); border-radius: 0 10px 10px 0; }
@media print { .rt-video { display: none; } }

/* 2.17.4: sub-tabs everywhere (every .tabs except the course's main .c-tabs): boxed tabs, the active one joins the content below */
.tabs:not(.c-tabs) { gap: 0; padding-top: 2px; }
.tabs:not(.c-tabs) a, .tabs:not(.c-tabs) button { background: var(--c-surface-2); border: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); border-radius: 10px 10px 0 0; margin: 0 -1px -1px 0; padding: 9px 16px; color: var(--c-muted); }
.tabs:not(.c-tabs) a:hover, .tabs:not(.c-tabs) button:hover { color: var(--c-text); background: var(--c-surface); }
.tabs:not(.c-tabs) a.on, .tabs:not(.c-tabs) button.on, .tabs:not(.c-tabs) a.active, .tabs:not(.c-tabs) button.active, .tabs:not(.c-tabs) [aria-current="page"], .tabs:not(.c-tabs) [aria-selected="true"] {
  background: var(--c-surface); color: var(--c-primary); border-top: 3px solid var(--c-primary); border-bottom-color: var(--c-surface); padding-top: 7px; position: relative; z-index: 1; }
.tabs:not(.c-tabs) a:focus-visible, .tabs:not(.c-tabs) button:focus-visible { outline: 3px solid var(--c-primary); outline-offset: -3px; }

/* 2.17.5 — the ad band at the foot of the home page disappears when there is no ad (Plus members, no campaign) */
.sp-band:has(> .sp-band-in:empty) { display: none; }
.home-ad:empty { display: none; }

/* 2.17.5 — navigation: ← Back, and ‹ previous / next › through a list of people, assignments, submissions */
.sib-bar { display: flex; align-items: center; gap: 6px; margin-bottom: var(--sp-3); }
.sib-bar .grow { flex: 1; }
.sib-bar .sib-step { min-width: 40px; justify-content: center; font-size: 20px; line-height: 1; }
.sib-bar .btn.disabled { opacity: .35; pointer-events: none; }
.sib-bar .sib-pos { font-size: 13px; min-width: 44px; text-align: center; }
@media print { .sib-bar { display: none !important; } }
/* 2.17.6 — avatar picture search: round previews */
.fi-grid.round .fi-hit { border-radius: 50%; aspect-ratio: 1; overflow: hidden; }
.fi-grid.round .fi-hit span { display: none; }

/* 2.25 — LTI deep-linking picker (inside the LMS window) */
.lti-pick { max-width: 980px; margin: 0 auto; padding: 16px 16px 88px; display: grid; gap: 12px; }
.lti-head { display: flex; gap: 12px; align-items: flex-start; }
.lti-filters input[type=search] { flex: 1; min-width: 200px; }
.lti-list { display: grid; gap: 8px; }
.lti-row .lti-items { list-style: none; margin: 8px 0 0; padding: 8px 0 0 4px; border-top: 1px dashed var(--c-border); display: grid; gap: 4px; }
.lti-foot { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px max(16px, calc((100vw - 980px) / 2 + 16px)); background: var(--c-surface); border-top: 1px solid var(--c-border); box-shadow: 0 -6px 16px -12px rgba(0,0,0,.25); }

/* 2.27 — releases: the tester's pill, the HQ table */
.preview-pill { position: fixed; right: 16px; top: 76px; z-index: 60; /* 2.46.4 (owner): top right, off the navigation */ display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-radius: 99px; background: #fff7e0; border: 1px solid #f0c75e; box-shadow: var(--shadow); font-size: 13.5px; max-width: calc(100vw - 32px); }
.preview-pill.on { background: #1f2a44; color: #fff; border-color: #1f2a44; }
.preview-pill.on a { color: #fff; }
.preview-pill a { color: inherit; }
.rel-changes { margin: 0; padding-left: 18px; max-height: 220px; overflow: auto; font-size: 13.5px; }
.rel-table td { vertical-align: top; min-width: 170px; }
@media (max-width: 760px) { .preview-pill { top: auto; bottom: 84px; right: 12px; font-size: 12.5px; } }
.preview-pill.in-bar { position: static; box-shadow: none; padding: 4px 6px 4px 12px; margin-right: 8px; max-width: none; white-space: nowrap; }
@media (max-width: 760px) { .preview-pill.in-bar a span.pv-t { display: none; } }

/* 2.32: partner programme explainer */
.pt-explain > summary { cursor: pointer; list-style: none; }
.pt-explain > summary::-webkit-details-marker { display: none; }
.pt-explain > summary::after { content: ' ▾'; color: var(--c-muted); }
.pt-explain:not([open]) > summary::after { content: ' ▸'; }
.pt-explain[open] > summary { margin-bottom: 8px; }
/* 2.34: likes and plays on library cards */
.cstats { display: flex; gap: 12px; margin-top: 6px; font-size: 12.5px; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.clike { cursor: pointer; border-radius: 6px; padding: 0 4px; margin: 0 -4px; }
.clike:hover, .clike:focus-visible { color: var(--c-danger, #c0392b); outline: none; background: var(--c-surface-2, rgba(0,0,0,.04)); }
.clike.on { color: var(--c-danger, #c0392b); }
.lib-section { display: grid; gap: 10px; }
.lib-section > header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lib-section > header h2 { margin: 0; font-size: 19px; }
.lib-lvchips { display: flex; flex-wrap: wrap; gap: 8px; }
.lib-free { color: var(--ok, #1a7f45); font-weight: 600; white-space: nowrap; }
.lib-free.plus-own { color: var(--accent, #7a4cc2); }

/* 2.34 student home */
.s-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.s-stats .stat{text-decoration:none;color:inherit;padding:12px}
.s-stats .stat:hover{border-color:var(--primary)}
.s-stats .stat b{font-size:1.4rem}

/* 2.35 — the price line on library cards and the “Miễn phí” tag (one look tells what costs nothing) */
.ccard .body { flex: 1; align-content: start; }
.cprice { font-weight: 800; font-size: 1.15rem; margin-top: 4px; line-height: 1.3; }
.cprice small { font-weight: 600; font-size: 12.5px; color: var(--c-muted, #6b7280); display: block; }
.cprice.free { color: var(--c-success); }
.cprice.plus { color: var(--c-warning); }
.cprice.plus-own { color: var(--c-primary); font-size: 14px; }
.free-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; vertical-align: middle;
  color: var(--c-success); background: color-mix(in srgb, var(--c-success) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c-success) 35%, transparent); }
.free-tag small { font-weight: 500; opacity: .85; }
h1 .free-tag, h2 .free-tag { font-size: 14px; margin-left: 8px; }
.free-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.free-card { display: grid; gap: 6px; padding: 16px; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border); color: inherit; }
.free-card:hover { text-decoration: none; border-color: var(--c-success); }
.free-card .ico { font-size: 30px; line-height: 1; }
.free-card b { font-size: 1.05rem; }
.free-tag { white-space: nowrap; }
.free-card { grid-template-rows: auto auto 1fr auto; }
.free-card .free-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.free-card .free-foot small { font-size: 12px; }
/* 2.36 — the level-test reminder on the learner's home */
.s-test-remind { display: grid !important; grid-template-columns: auto 1fr auto; border-color: color-mix(in srgb, var(--c-primary) 35%, var(--c-border)); background: color-mix(in srgb, var(--c-primary) 5%, var(--c-surface)); }
@media (max-width: 640px) { .s-test-remind { grid-template-columns: auto 1fr; } .s-test-remind .btn { grid-column: 1 / -1; } }

/* 2.37 — the learner's report (10 parts), live and as a fixed copy for print / PDF */
.lr-doc { display: grid; gap: 14px; }
.lr-part header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.lr-part h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.lr-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); font-size: 13px; font-weight: 800; flex: none; }
.lr-small { font-size: 12.5px; }
.lr-thin { margin: 0; }
.lr-level { display: flex; gap: 14px; align-items: center; }
.lr-level .lv { transform: scale(1.35); transform-origin: left center; margin-right: 10px; }
.lr-big { font-weight: 700; font-size: 1.05rem; }
.lr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.lr-stats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.lr-skills { display: grid; gap: 8px; }
.lr-sk { display: grid; grid-template-columns: minmax(110px, 160px) 1fr 48px; gap: 4px 10px; align-items: center; }
.lr-sk .lr-small { grid-column: 2 / -1; }
.lr-sk .bar { height: 10px; background: var(--c-border); border-radius: 99px; overflow: hidden; }
.lr-sk .bar i { display: block; height: 100%; background: var(--c-primary); border-radius: 99px; }
.lr-strong { display: grid; gap: 4px; margin-bottom: 10px; }
.lr-weak { border: 1px solid var(--c-border); border-radius: var(--r-md, 10px); padding: 10px 12px; display: grid; gap: 6px; }
.lr-ex { background: color-mix(in srgb, var(--c-warning) 8%, transparent); border-radius: 8px; padding: 6px 10px; font-size: 13.5px; }
.lr-trend { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; align-items: end; height: 130px; }
.lr-wk { display: grid; grid-template-rows: 1fr auto auto; height: 100%; text-align: center; font-size: 12px; }
.lr-wk i { align-self: end; display: block; background: var(--c-primary); border-radius: 6px 6px 0 0; min-height: 3px; }
.lr-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.lr-note { margin: 0; border-left: 3px solid var(--c-primary); padding: 6px 12px; background: var(--c-primary-soft); border-radius: 0 8px 8px 0; }
.lr-plus { font-size: 11px; }
.lr-foot { margin: 0; }
.lr-head .pp-mark, .lr-print-head .pp-mark { width: 40px; height: 40px; font-size: 20px; }
.brand-img { object-fit: contain; }
.lr-print-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 2px solid var(--c-primary); padding-bottom: 12px; margin-bottom: 14px; }
.lr-qr { display: grid; justify-items: center; gap: 4px; }
.lr-qr .qr-box { width: 96px; }
@media (max-width: 640px) { .lr-sk { grid-template-columns: 1fr 48px; } .lr-sk .bar { grid-column: 1 / -1; grid-row: 2; } .lr-sk .lr-small { grid-column: 1 / -1; } }
@media print {
  @page { size: A4; margin: 14mm; }
  .no-print, .rail, .topbar, .app-foot, .site-banner, .pub-header, .pub-footer { display: none !important; }
  .lr-print .lr-part { break-inside: avoid; box-shadow: none; }
  body { background: #fff; }
}
.lr-head .pp-mark, .lr-print-head .pp-mark { background: var(--c-primary); color: #fff; border-radius: 10px; }
.brand-mark.brand-img, .pp-mark.brand-img { background: none !important; width: auto; max-width: 140px; border-radius: 0; padding: 0; }
.pp-mark.brand-img { height: 26px; } .lr-head .pp-mark.brand-img, .lr-print-head .pp-mark.brand-img { height: 40px; }
/* 2.38 — the personal path */
.lp-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.lp-opt { border: 1px solid var(--c-border); border-radius: var(--r-md, 10px); padding: 12px; display: grid; gap: 6px; align-content: start; }
.lp-opt.heavy { border-color: color-mix(in srgb, var(--c-warning) 60%, var(--c-border)); }
.lp-week { border: 1px solid var(--c-border); border-radius: var(--r-md, 10px); padding: 8px 12px; }
.lp-week.now { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 4%, var(--c-surface)); }
.lp-week summary { cursor: pointer; }
.lp-sessions { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; }
.lp-session ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; }
.lp-session li.done a { text-decoration: line-through; color: var(--c-muted, #6b7280); }
/* 2.38.2 — the report summary (learner home, parent home) */
.child-card .lr-summary { border: 0; padding: 0; box-shadow: none; background: transparent; }
.lr-summary h2 { font-size: 1.1rem; }
.lr-level .lv { transform: none; margin-right: 0; }
.lr-level > .lv { transform: scale(1.35); transform-origin: left center; margin-right: 10px; }
@media print {
  .lr-print .fog, .lr-print .locked > * { filter: blur(4px); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .lr-print .lock-hit { pointer-events: none; }
}
/* 2.38.2 — blurred parts of the report look blurred everywhere (page, summary, PDF): the shapes, not only the words */
.lr-doc .locked > *, .lr-print .locked > *, .lr-summary .locked > * { filter: blur(3px); user-select: none; }
.lp-week.locked > b:first-child { filter: none; }

/* 2.39 — the home hero turns: Migo, the free level test, the detailed report, the personal path */
.sage-hero-wrap { position: relative; }
.hr-track { display: grid; }
.hr-track > .hr-slide { grid-area: 1 / 1; }
.hr-rot:not(.ed) .hr-slide[hidden] { display: grid !important; visibility: hidden; } /* the tallest slide sets the height: nothing below jumps */
.hr-rot:not(.ed) .hr-slide.on { animation: hr-in .45s ease; }
@keyframes hr-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.hr-rot.ed .hr-track { gap: var(--sp-5); }
.hr-rot.ed .hr-track > .hr-slide { grid-area: auto; border: 2px dashed var(--c-border); border-radius: var(--radius); padding: var(--sp-4); }
.hr-h { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.05; margin: 10px 0 var(--sp-4); }
.hr-badge { display: inline-block; padding: 5px 12px; border-radius: 99px; font-weight: 700; font-size: 14px; }
.hr-badge.free { background: color-mix(in srgb, var(--c-success) 16%, transparent); color: var(--c-success); }
.hr-badge.plus { background: var(--c-primary-soft); color: var(--c-primary); }
.hr-points { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.hr-points li { position: relative; padding-left: 26px; font-size: 16px; }
.hr-points li::before { content: '✓'; position: absolute; left: 0; color: var(--c-success); font-weight: 800; }
.hr-art { justify-self: end; width: 100%; max-width: 460px; }
.hr-shot img { max-height: 380px; object-fit: cover; object-position: top; }
.hr-pic { position: relative; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 24px; padding: 18px; box-shadow: 0 18px 50px -24px rgba(60, 40, 140, .35); }
.hr-pic svg { display: block; width: 100%; height: auto; font-family: inherit; }
.hr-sage { position: absolute; left: -18px; bottom: -22px; width: 104px; }
.hr-sage svg { width: 100%; height: auto; display: block; }
.hr-nav { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 var(--sp-4); }
.hr-arrow, .hr-pause { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); font-size: 22px; line-height: 1; cursor: pointer; }
.hr-pause { font-size: 14px; }
.hr-arrow:hover, .hr-pause:hover { border-color: var(--c-primary); color: var(--c-primary); }
.hr-dots { display: flex; gap: 4px; }
.hr-dot { width: 28px; height: 28px; border: 0; background: none; cursor: pointer; padding: 0; display: grid; place-items: center; }
.hr-dot::after { content: ''; width: 10px; height: 10px; border-radius: 99px; background: var(--c-border); transition: width .2s, background .2s; }
.hr-dot.on::after { width: 26px; background: var(--c-primary); }
.hr-arrow:focus-visible, .hr-pause:focus-visible, .hr-dot:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
@media (max-width: 860px) { .hr-art { justify-self: stretch; max-width: none; } .hr-sage { width: 76px; left: -6px; bottom: -14px; } }
@media (prefers-reduced-motion: reduce) { .hr-rot .hr-slide.on { animation: none; } .hr-dot::after { transition: none; } }
/* 2.39: the free account is a band across the top; Cá nhân and Gia đình each show 1 / 3 / 6 / 12 months side by side */
@media (min-width: 720px) { .plan-free > .plan-card ul { columns: 2; column-gap: 32px; } }

/* 2.39.4 — the floating Zalo chat button */
.zalo-chat { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: #0068ff; color: #fff; display: flex; align-items: center; justify-content: center; font: 700 14px/1 system-ui, sans-serif; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 104, 255, .4); }
.zalo-chat:hover, .zalo-chat:focus-visible { background: #0057d6; color: #fff; outline: 3px solid #9cc3ff; outline-offset: 2px; }
@media print { .zalo-chat { display: none; } }

/* 2.39.8: analytics — the heading only a printed / PDF report shows; without Plus the numbers are blurred under their headings */
.print-only { display: none; }
@media print { .print-only { display: block; } .an-range, .an-cta, .imp-pill, .announce-stack, .access-bar { display: none !important; } .panel { break-inside: avoid; } }
.an-locked .stat b, .an-locked .an-body { filter: blur(6px); user-select: none; pointer-events: none; }
/* 2.39.10: Báo cáo học tập — “Xuất PDF” prints only the learners picked (all when none is) */
@media print { tr.print-skip { display: none; } }
/* 2.39.12: survey answers — five big choices from low to high, keyboard and screen-reader friendly */
.sv-q { border: 0; padding: 0; margin: 0 0 12px; } .sv-q legend { margin-bottom: 8px; }
.sv-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sv-opt { position: relative; } .sv-opt input { position: absolute; opacity: 0; inset: 0; }
.sv-opt span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); cursor: pointer; text-align: center; }
.sv-opt span small { font-size: 12px; color: var(--c-muted); }
.sv-opt input:checked + span { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); }
.sv-opt input:focus-visible + span { outline: 2px solid var(--c-primary); outline-offset: 2px; }
@media (max-width: 520px) { .sv-opt span small { font-size: 10.5px; } }
/* 2.39.12: the overview's survey card — one row per question, five small buttons */
.sv-mini { display: grid; gap: 6px; }
.sv-row { border: 0; padding: 4px 0; margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; border-bottom: 1px solid var(--c-border); }
.sv-row:last-child { border-bottom: 0; }
.sv-row legend { float: left; padding: 0; font-size: 14.5px; line-height: 1.35; }
.sv-row .sv-scale { display: flex; gap: 4px; } .sv-row .sv-opt span { width: 38px; padding: 6px 0; }
@media (max-width: 640px) { .sv-row { gap: 6px; } .sv-row legend { font-size: 13.5px; } .sv-row .sv-opt span { width: 30px; padding: 5px 0; } }

/* 2.39.18 — group play: the alone / with friends choice and the shared room */
.play-choose { max-width: 720px; margin: 32px auto; text-align: center; }
.play-choose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.play-choice { display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 24px 18px; border: 2px solid var(--c-border); border-radius: 18px; background: var(--c-surface); color: var(--c-text); text-decoration: none; font: inherit; cursor: pointer; text-align: center; }
.play-choice:hover, .play-choice:focus-visible { border-color: var(--c-primary); }
.play-choice b { font-size: 18px; }
.pc-ico { font-size: 44px; line-height: 1; }
.room { max-width: 900px; margin: 0 auto; }
.room-players { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.room-player { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--c-surface); border: 1px solid var(--c-border); font-size: 14px; }
.room-player.away { opacity: .55; }
.room-player.empty { border-style: dashed; }
.room-av { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--c-bg); font-size: 20px; }
.room-avatars { display: flex; gap: 10px; flex-wrap: wrap; }
.room-av-pick { width: 64px; height: 64px; border-radius: 50%; font-size: 34px; border: 3px solid var(--c-border); background: var(--c-surface); cursor: pointer; }
.room-av-pick.on { border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 25%, transparent); }
.room-av-pick:disabled { opacity: .3; cursor: not-allowed; }
.room-card { position: relative; padding-top: 18px; }
.room-migo { position: absolute; top: -18px; right: 10px; width: 58px; height: 58px; padding: 0; border: 0; background: none; cursor: pointer; }
.room-migo[aria-disabled="true"] { cursor: default; }
.room-migo-svg { display: block; width: 58px; }
.room-migo-n { position: absolute; bottom: 0; right: -2px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--c-primary); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.room-bubble { margin: 0 72px 10px 0; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: color-mix(in srgb, var(--c-primary) 10%, var(--c-surface)); font-size: 14px; text-align: left; }
.room-play .opt { display: flex; align-items: center; gap: 8px; }
.room-play .opt.picked { border-color: var(--c-primary); }
.room-picks { display: inline-flex; gap: 2px; font-size: 20px; }
@media (max-width: 620px) { .room-bubble { margin-right: 56px; } .room-migo, .room-migo-svg { width: 48px; height: 48px; } }
/* 2.39.18: the featured program's ticks sit on one line (short words), wrapping on small screens */
.sp-program .sp-ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.sp-program .sp-ticks li { font-size: 15px; font-weight: 600; }
/* 2.39.20: an invitation to a game room, shown wherever the learner is */
.room-invite { position: fixed; right: 16px; bottom: 16px; z-index: 1000; max-width: 340px; padding: 14px 16px; border-radius: 16px; background: var(--c-surface); border: 2px solid var(--c-primary); box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.room-invite-t { font-size: 15px; margin-bottom: 4px; }
@media (max-width: 620px) { .room-invite { left: 16px; right: 16px; bottom: 76px; max-width: none; } }

/* 2.39.23 — the Plus page: perk tiles, plan tabs, a check table */
.plus-hero { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); padding: 24px; border-radius: 18px; background: linear-gradient(135deg, var(--c-primary-soft), color-mix(in srgb, var(--c-accent) 14%, var(--c-surface))); border: 1px solid var(--c-border); }
.plus-hero h1 { margin: 8px 0 4px; font-size: clamp(24px, 4vw, 34px); line-height: 1.2; }
@media (min-width: 860px) { .plus-hero { grid-template-columns: 1fr 1.3fr; align-items: center; } }
.plus-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.plus-perk { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 14px; background: var(--c-surface); border: 1px solid var(--c-border); }
.plus-ico { font-size: 26px; line-height: 1; margin-bottom: 4px; }
.plus-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 999px; background: var(--c-surface-2); width: max-content; max-width: 100%; }
.plus-tab { border: 0; background: transparent; padding: 8px 16px; border-radius: 999px; font: inherit; font-weight: 600; color: var(--c-muted); cursor: pointer; min-height: 40px; }
.plus-tab[aria-selected="true"] { background: var(--c-surface); color: var(--c-text); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.plus-tab:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.plus-sub { margin: 4px 0 0; color: var(--c-muted); }
.plus-card { position: relative; text-align: center; }
.plus-card .btn { margin-top: 8px; }
.plus-ribbon { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.table.cmp td { text-align: center; font-weight: 600; }
.cmp-yes { color: var(--c-success); font-size: 18px; }
.cmp-no { color: var(--c-muted); }

/* 2.39.23 — knowledge page: one template icon and colour per kind of section (no illustrations) */
.kn-sec { --kn: var(--c-primary); border-top: 4px solid color-mix(in srgb, var(--kn) 70%, transparent); }
.kn-h { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.kn-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; font-size: 19px; background: color-mix(in srgb, var(--kn) 14%, var(--c-surface)); }
.kn-rule { --kn: var(--c-primary); }
.kn-step { --kn: #3b82f6; }
.kn-ex { --kn: var(--c-success); }
.kn-mis { --kn: var(--c-danger); }
.kn-check { --kn: var(--c-warning); }
.kn-fu { --kn: #8b5cf6; }
.kn-book { --kn: #0ea5e9; }
.kn-prac { --kn: var(--c-accent); }
.kn-rel { --kn: var(--c-muted); }
.kn-step .stack-sm > div { padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--kn) 35%, transparent); }
.kn-mis .learn-mis li { background: color-mix(in srgb, var(--c-danger) 6%, var(--c-surface)); border-radius: 10px; padding: 8px 10px; list-style: none; }
.kn-prac .item .badge { align-self: center; white-space: nowrap; }
.kn-mis .learn-mis { padding: 0; margin: 0; display: grid; gap: 8px; }
/* 2.39.26 (owner): the featured program's ticks on one line on a wide screen */
.sp-program .sp-program-head { max-width: none; }
.sp-program .sp-text { max-width: none; }
.sp-program .sp-ticks { gap: 6px 18px; }
.sp-program .sp-ticks li { padding-left: 26px; font-size: 14.5px; white-space: nowrap; }
.sp-program .sp-ticks li::before { width: 19px; height: 19px; font-size: 11.5px; top: 1px; }
.sp-tiles .sp-card { padding: var(--sp-3) 10px; } .sp-tiles .sp-card h3, .sp-tiles .sp-card b { font-size: 14.5px; line-height: 1.3; } .sp-tiles .sp-card p { font-size: 13.5px; }
/* 2.39.28: library landing — one card per program with its levels */
.track-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.track-card h3 { font-size: 18px; }
.track-card a { text-decoration: none; }

/* 2.39.30: a tap on any blurred part opens the Plus offer (plus-lock.js) */
.locked-sheet, .plan-lock-body, .an-locked .an-body, .an-locked .stats, .an-locked .stat b { pointer-events: auto !important; cursor: pointer; }
.fog, .plus-prev .locked { cursor: pointer; }
.ad-slot .ad-qr { width: 64px; height: 64px; object-fit: contain; border-radius: 6px; background: #fff; flex: none; }
.ad-slot .ad-video { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 600; }

/* 2.40: the staging copy says so on every page */
.staging-ribbon { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 70; padding: 3px 12px; border-radius: 0 0 10px 10px; background: #b4232c; color: #fff; font-size: 12.5px; font-weight: 600; pointer-events: none; box-shadow: var(--shadow); white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis; }

/* 2.43: MaiMigo characters to play as */
.hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.hero-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 2px solid var(--c-border); border-radius: 14px; background: var(--c-surface); color: var(--c-text); cursor: pointer; font-size: 12px; font-weight: 600; }
.hero-pick svg { width: 60px; height: 64px; }
.hero-pick.on { border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 25%, transparent); }
.hero-pick:disabled { opacity: .35; cursor: not-allowed; }
.hero-svg { display: inline-block; width: 100%; height: 100%; }
.hero-svg svg { width: 100%; height: 100%; display: block; }
.room-picks .hero-svg { width: 26px; height: 28px; }

/* 2.45 (owner): program shelves (library front page, home page) and the Học liệu menu */
.lib-sec .grid.cards { margin: 0; }
.shelf-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.shelf-filter label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--c-border, #e3e0ef); border-radius: 999px; cursor: pointer; font-size: 14px; background: var(--c-surface, #fff); }
.shelf-filter label.on { background: var(--c-primary, #6b4de6); border-color: var(--c-primary, #6b4de6); color: #fff; }
.shelf-filter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.shelf-filter label:has(input:focus-visible) { outline: 2px solid var(--c-primary, #6b4de6); outline-offset: 2px; }
.cover .glyph { display: grid; place-items: center; width: 100%; height: 100%; font-size: 44px; }
.pub-dd { position: relative; }
.pub-dd > summary { list-style: none; cursor: pointer; color: var(--c-text); font-weight: 500; white-space: nowrap; }
.pub-dd > summary::-webkit-details-marker { display: none; }
.pub-dd-menu { position: absolute; top: calc(100% + 10px); left: -12px; z-index: 50; min-width: 250px; display: flex; flex-direction: column; padding: 6px; background: var(--c-surface, #fff); border: 1px solid var(--c-border, #e3e0ef); border-radius: 12px; box-shadow: 0 10px 30px rgba(20, 10, 60, .14); }
.pub-dd-menu a { padding: 8px 10px; border-radius: 8px; }
.pub-dd-menu a:hover { background: var(--c-primary-soft, #f1edff); text-decoration: none; }
@media (max-width: 420px) { .pub-header .btn { padding: 7px 8px; font-size: 13px; } .pub-header .inner { gap: 4px; } }
/* 2.46: note for parents when curriculum content opens; shows 5 seconds, then fades away */
.eng-note.eng-toast { position: fixed; z-index: 60; top: 72px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); margin: 0; align-items: flex-start; background: var(--c-surface); border: 1px solid var(--c-border); border-style: solid; color: var(--c-text); box-shadow: 0 8px 24px rgba(0,0,0,.14); font-size: 14px; line-height: 1.45; pointer-events: none; animation: engToast 5.4s ease forwards; }
@keyframes engToast { 0% { opacity: 0; transform: translate(-50%, -8px); } 6%, 92% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -8px); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .eng-note.eng-toast { animation: engToastR 5s steps(1, end) forwards; } @keyframes engToastR { to { visibility: hidden; opacity: 0; } } }
/* 2.46: References — folding groups, entries and sheets */
.ref-group > summary, .ref-item > summary, .ref-sheet > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ref-group > summary::-webkit-details-marker, .ref-item > summary::-webkit-details-marker, .ref-sheet > summary::-webkit-details-marker { display: none; }
.ref-group > summary::before, .ref-item > summary::before, .ref-sheet > summary::before { content: '▸'; color: var(--c-muted); transition: transform .15s; display: inline-block; width: 1em; }
.ref-group[open] > summary::before, .ref-item[open] > summary::before, .ref-sheet[open] > summary::before { transform: rotate(90deg); }
.ref-g-title { font-weight: 700; font-size: 17px; }
.ref-item { border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); padding: 10px 12px; }
.ref-item[open] { box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.ref-body { margin-top: 10px; }
.ref-sheet { border-left: 3px solid var(--c-border); padding: 4px 0 4px 10px; }
.ref-sheet[open] { border-left-color: var(--c-primary, #6D4AE0); }
.ref-sheet-body { margin-top: 8px; }
.md-body { line-height: 1.55; }
.md-body h3, .md-body h4 { margin: 16px 0 6px; }
.md-body .md-list { margin: 4px 0 10px; padding-left: 22px; }
.md-body p { margin: 6px 0; }
.ref-sheet-body td, .md-body td { vertical-align: top; } .ref-sheet-body td { min-width: 110px; max-width: 420px; }

/* 2.46: activation codes */
.code-box { border: 1px dashed var(--c-border); }
.code-box input[name=code] { font-family: var(--font-mono, monospace); }
.code-shop > summary { cursor: pointer; font-weight: 600; }
/* 2.46.4 (owner): a card says GAME or WORKSHEETS in big letters on its picture */
.ccard .cover { position: relative; }
.ccard .kind-tag { position: absolute; left: 10px; bottom: 10px; padding: 5px 12px; border-radius: 999px; font-weight: 800; font-size: 14px; letter-spacing: .04em; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.ccard .kind-tag.is-game { background: #E0705C; }
.ccard .kind-tag.is-sheets { background: #3F8FC4; }
/* 2.46.4: a level shelf is one row of four */
.lib-row { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 900px) { .lib-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
.lib-kind .chip { cursor: pointer; }
.badge.draft-tag { background: var(--c-primary); color: #fff; border-color: transparent; font-weight: 700; } /* 2.46.5 (owner): a draft says so in purple */
.opt .opt-img{width:96px;height:96px;object-fit:contain;display:block;margin:0 auto}
.pp-cimg{height:16mm;width:auto;vertical-align:middle}
/* 2.49: picture choices (Flyers Listening Part 1 coaching) sit three in a row, the letter and the label under the picture */
.opts:has(.opt-img){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.opt:has(.opt-img){flex-direction:column;align-items:center;text-align:center;gap:4px;padding:8px}
.opt:has(.opt-img) .opt-img{width:100%;max-width:120px;height:auto;aspect-ratio:160/150;border-radius:8px}
.opt:has(.opt-img) span:last-child{font-size:.85em}

/* 2.50: an exam part's name and instructions above its questions */
.ws-part{margin:18px 0 10px;padding:10px 14px;border-left:4px solid var(--c-primary,#0f7a6e);background:var(--c-surface-2,#f4faf9);border-radius:8px}
.ws-part h3{margin:0 0 4px;font-size:16px}.ws-part p{margin:2px 0}.ws-part .ws-part-ex{color:var(--c-muted,#5b6a80)}
/* 2.50: a game unit's learning cards (words, then sentence patterns) before play */
.gc-cards{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.gc-pic{width:min(340px,80vw);aspect-ratio:16/15;border-radius:16px;overflow:hidden;background:var(--c-surface-2,#f4f6fb);display:grid;place-items:center}
.gc-pic img{width:100%;height:100%;object-fit:contain}.gc-pic .emoji{font-size:110px}
.gc-word{font-size:34px;font-weight:800;margin:0}.gc-mean{margin:0;font-size:17px}
.gc-sent{font-size:24px;font-weight:700;margin:0;line-height:1.5}
.gc-sent .ck{padding:2px 8px;border-radius:10px;white-space:nowrap}
.gc-sent .ck0{background:#e3f0ff;color:#1f5fbf}.gc-sent .ck1{background:#ffeedd;color:#b5531a}.gc-sent .ck2{background:#efe7ff;color:#6a3fc8}.gc-sent .ck3{background:#e3f6ea;color:#1d7a46}
.game-card .q-pic{margin:8px auto;width:min(260px,70vw)}

/* 2.55 (owner): ⚙️ in Migo → the one Migo picker (vendor/character.js sagePicker) */
.sage-panel .sg-head-btns { display: flex; gap: 4px; flex: none; }
.mm-sage-pick-h { margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.mm-sage-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.mm-sage-opt { padding: 3px; border: 2px solid #e3dff0; border-radius: 12px; background: #fff; cursor: pointer; min-height: 44px; aspect-ratio: 1; }
.mm-sage-opt svg { width: 100%; height: 100%; display: block; }
.mm-sage-opt:hover { border-color: #b9a8f0; }
.mm-sage-opt.on { border-color: #43ad2c; box-shadow: 0 0 0 2px #43ad2c; }
.mm-sage-opt:focus-visible { outline: 3px solid #6c4bd8; outline-offset: 2px; }

/* 2.55 (owner): a grammar card shows its rule under the sentence */
.gc-rule { margin: 4px auto 10px; max-width: 34em; padding: 8px 12px; border-radius: 12px; background: var(--c-surface-2, #f4f1fb); border: 1px solid var(--c-border, #e3dff0); font-size: 15px; text-align: left; }

/* 2.56 (owner): grammar slides before a grammar game (players/game.js drawSlides) */
.gc-slides { text-align: center; }
.gc-slides .sl-title { margin: 6px 0 10px; font-size: 22px; }
.sl-body { margin: 0 auto 14px; max-width: 46em; text-align: left; }
.sl-hi { color: var(--c-primary, #6c4bd8); background: color-mix(in srgb, var(--c-primary, #6c4bd8) 12%, transparent); padding: 0 4px; border-radius: 6px; }
.sl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sl-fig { margin: 0; text-align: center; }
.sl-fig img { width: 100%; max-width: 240px; aspect-ratio: 16 / 15; border-radius: 14px; border: 1px solid var(--c-border, #e3dff0); }
.sl-fig figcaption { margin-top: 6px; font-size: 17px; }
.sl-ask { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--c-surface-2, #f4f1fb); font-size: 16px; }
.sl-line, .sl-formula { opacity: 0; animation: sl-in .45s ease-out forwards; }
.sl-line { margin: 0 0 8px; font-size: 17px; }
.sl-formula { margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 2px solid var(--c-primary, #6c4bd8); font-size: 19px; font-weight: 700; display: grid; gap: 6px; }
@keyframes sl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sl-rules { display: grid; gap: 8px; margin-top: 10px; }
.sl-rule { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--c-surface-2, #f4f1fb); }
.sl-ex { display: inline-block; margin: 2px 6px 2px 0; padding: 2px 8px; border-radius: 8px; background: var(--c-surface, #fff); border: 1px solid var(--c-border, #e3dff0); font-weight: 600; }
.sl-chant { margin: 12px 0 0; text-align: center; font-size: 18px; font-weight: 700; }
.sl-stem { font-size: 20px; font-weight: 700; text-align: center; }
.sl-opts .opt.right { transform: scale(1.06); }
.sl-why { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: #e9f8ee; color: #1d6b3a; font-size: 16px; }
.sl-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sl-core { grid-column: 1 / -1; justify-self: center; padding: 10px 22px; border-radius: 999px; background: var(--c-primary, #6c4bd8); color: #fff; font-size: 20px; font-weight: 800; }
.sl-branch { padding: 10px 12px; border-radius: 14px; border: 2px solid var(--c-border, #e3dff0); background: var(--c-surface, #fff); display: grid; gap: 4px; font-size: 15px; }
.sl-branch > b { color: var(--c-primary, #6c4bd8); }
@media (max-width: 560px) { .sl-pair, .sl-rule { grid-template-columns: 1fr; } .gc-slides .sl-title { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .sl-line, .sl-formula { animation: none; opacity: 1; } }

/* 2.58 (owner): the discovery keeps the two pictures (smaller); the formula is a table of its own; ♡ keeps the summary page */
.sl-pair.sm .sl-fig img { max-width: 170px; }
.sl-pair.sm .sl-fig figcaption { font-size: 15px; }
.sl-pair.sm + .sl-lines { margin-top: 10px; }
.sl-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 2px solid var(--c-primary, #6c4bd8); border-radius: 14px; overflow: hidden; font-size: 19px; }
.sl-table th, .sl-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--c-border, #e3dff0); }
.sl-table thead th { background: var(--c-primary, #6c4bd8); color: #fff; font-size: 15px; }
.sl-table tbody tr:last-child > * { border-bottom: 0; }
.sl-table tbody th small { display: block; font-weight: 400; font-size: 13px; color: var(--c-muted, #6b6880); }
.sl-table .sl-be { font-weight: 800; color: var(--c-primary, #6c4bd8); font-size: 22px; }
.sl-table + .sl-lines { margin-top: 12px; }
.sl-keep { justify-content: center; margin-top: 10px; gap: 8px; }
.my-page .sl-map { margin-top: 6mm; gap: 4mm; }
.my-page .sl-core { font-size: 18pt; }
.my-page .sl-branch { font-size: 12pt; border-color: #cfd6e3; }
@media print { .my-page .sl-core, .my-page .sl-branch { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
@media (max-width: 560px) { .sl-table { font-size: 16px; } .sl-table th, .sl-table td { padding: 8px; } }
.sl-body.sl-formula { border: 0; padding: 0; margin-top: 0; opacity: 1; animation: none; display: block; font-size: inherit; font-weight: inherit; }

/* 2.61 (owner): a lesson point — Migo's bubble, then a few big examples */
.sl-coach { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 4px auto 14px; max-width: 620px; }
.sl-migo { width: 84px; height: 84px; flex: none; }
.sl-migo svg { width: 100%; height: 100%; }
.sl-bubble { position: relative; margin: 0; padding: 14px 18px; border-radius: 18px; background: var(--c-surface-2, #f4f1fb); border: 2px solid var(--c-primary, #6c4bd8); font-size: 22px; font-weight: 800; text-align: left; }
.sl-bubble::before { content: ''; position: absolute; left: -11px; top: 50%; margin-top: -9px; border: 9px solid transparent; border-right-color: var(--c-primary, #6c4bd8); border-left: 0; }
.sl-items { list-style: none; margin: 0 auto; padding: 0; display: grid; gap: 10px; max-width: 560px; }
.sl-items li { font-size: 22px; padding: 10px 14px; border-radius: 14px; background: var(--c-surface, #fff); border: 1px solid var(--c-border, #e3dff0); }
.sl-items li.sl-no { font-size: 18px; color: #c0392b; background: #fdf0ee; border-color: #f3c7c0; }
.sl-items li.sl-no s { font-weight: 700; }
@media (max-width: 560px) { .sl-bubble { font-size: 18px; } .sl-items li { font-size: 18px; } .sl-migo { width: 64px; height: 64px; } }

.sl-full { margin: 0 auto 8px; display: inline-block; padding: 4px 12px; border-radius: 999px; background: #fff4d6; color: #8a5a00; font-weight: 800; }

/* 2.74 (owner): play in class / several players — running score bars, the setup, the podium, fireworks */
.pboard { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; padding: 10px 12px; margin: 0 0 12px; text-align: left; }
.pboard.folded { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 10px; }
.pb-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pb-fold { border: 0; background: var(--c-primary-soft); color: var(--c-primary); font: inherit; font-weight: 700; border-radius: 999px; padding: 4px 12px; cursor: pointer; min-height: 32px; }
.pb-now { font-size: 15px; }
.pb-tip { font-size: 12px; margin-left: auto; }
.pb-mini { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pb-row { width: 100%; display: grid; grid-template-columns: 30px minmax(90px, 180px) 1fr 56px; align-items: center; gap: 8px; border: 2px solid transparent; background: var(--c-surface-2); border-radius: 12px; padding: 3px 8px; font: inherit; color: var(--c-text); cursor: pointer; text-align: left; min-height: 38px; }
.pb-row.now { border-color: var(--c-primary); background: var(--c-primary-soft); }
.pb-row.ok { animation: pb-ok .6s ease; }
.pb-row.no { animation: pb-no .4s ease; }
.pb-row:focus-visible, .pb-fold:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.pb-av { display: inline-flex; width: 28px; height: 28px; vertical-align: middle; }
.pb-av svg { width: 100%; height: 100%; }
.pb-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb-bar { height: 14px; background: var(--c-border); border-radius: 999px; overflow: hidden; }
.pb-bar i { display: block; height: 100%; border-radius: 999px; transition: width .5s ease; min-width: 4px; }
.pb-score { text-align: right; } .pb-score b { font-size: 18px; } .pb-score small { color: var(--c-muted); }
@keyframes pb-ok { 0% { transform: scale(1); } 40% { transform: scale(1.03); background: #dcfce7; } 100% { transform: scale(1); } }
@keyframes pb-no { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.wp-board { position: absolute; top: 8px; left: 8px; z-index: 5; width: min(420px, calc(100% - 16px)); max-height: calc(100% - 16px); overflow: auto; opacity: .96; }
.wp-board .pboard { margin: 0; box-shadow: var(--shadow); }
.pm-count { gap: 6px; flex-wrap: wrap; } .pm-count .btn { min-width: 44px; min-height: 44px; }
.pm-names { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.pm-name > span { display: flex; align-items: center; gap: 6px; }
.presults { text-align: left; max-width: 560px; margin: 0 auto; }
.podium { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.podium li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--c-surface-2); font-size: 17px; }
.podium li.win { background: #fff4d6; border: 2px solid #f5c542; color: #4a3500; }
.pd-rank { font-size: 24px; width: 32px; text-align: center; }
.fx-wrap { position: fixed; inset: 0; z-index: 9999; pointer-events: auto; display: flex; align-items: center; justify-content: center; }
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-text { position: relative; font-size: clamp(32px, 6vw, 72px); font-weight: 900; color: #fff; text-shadow: 0 4px 0 #7c3aed, 0 8px 24px rgba(0,0,0,.35); text-align: center; padding: 0 16px; animation: fx-pop .6s ease; }
@keyframes fx-pop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fx-text, .pb-row.ok, .pb-row.no { animation: none; } .pb-bar i { transition: none; } }
@media (max-width: 560px) { .pb-row { grid-template-columns: 26px minmax(70px, 1fr) 1fr 48px; } .pb-tip { display: none; } }

/* 2.74 (owner): the 6-Step Sequence — editor, timer, the small timer on every page, leaderboard, teacher guide, warm-up */
.seq-topic { border-top: 1px solid var(--c-border); padding: 8px 0; } .seq-topic summary { cursor: pointer; padding: 4px 0; min-height: 32px; }
.seq-lessons { margin: 6px 0 0; padding-left: 22px; display: grid; gap: 4px; } .seq-mini { font-size: 12px; margin-left: 6px; }
.seq-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.seq-preset { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border: 2px solid var(--c-border); border-radius: 14px; background: var(--c-surface); color: var(--c-text); font: inherit; cursor: pointer; }
.seq-preset.on { border-color: var(--c-primary); background: var(--c-primary-soft); }
.seq-preset:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.seq-preset .sp-min { font-size: 22px; font-weight: 800; color: var(--c-primary); } .seq-preset .muted { font-size: 12px; }
.sp-dot { font-size: 16px; }
.seq-min-l { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seq-min-l .seq-min { width: 80px !important; flex: none; }
.seq-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.seq-items li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface-2); }
.seq-acts { flex-wrap: wrap; }
.lp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 55vh; overflow: auto; }
.lp-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--c-border); }
.seq-tl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.seq-tl-b { width: 100%; text-align: left; padding: 8px 10px; border: 2px solid var(--c-border); border-radius: 12px; background: var(--c-surface); color: var(--c-text); font: inherit; font-size: 13px; cursor: pointer; min-height: 44px; }
.seq-tl-b small { color: var(--c-muted); margin-left: 4px; }
.seq-tl-b.now { border-color: var(--c-primary); background: var(--c-primary-soft); font-weight: 700; }
.seq-tl-b.done { opacity: .75; }
.seq-clock { text-align: center; }
.seq-big { font-size: clamp(64px, 14vw, 160px); font-weight: 900; line-height: 1; margin: 12px 0; font-variant-numeric: tabular-nums; color: var(--c-text); }
.seq-clock.paused .seq-big { opacity: .5; }
.seq-clock.over { border-color: var(--c-danger); } .seq-clock.over .seq-big { color: var(--c-danger); }
.seq-over { color: var(--c-danger); font-weight: 700; font-size: 18px; }
.seq-phases { display: flex; gap: 8px; text-align: left; }
.seq-ph span { font-size: 13px; color: var(--c-muted); } .seq-ph.now span { color: var(--c-text); font-weight: 700; }
.seq-ph-bar { height: 10px; border-radius: 999px; background: var(--c-border); overflow: hidden; margin-bottom: 4px; }
.seq-ph-bar i { display: block; height: 100%; background: var(--c-primary); }
.seq-ph.done .seq-ph-bar i { background: var(--c-success); }
.seq-pill { position: fixed; left: 12px; bottom: 12px; z-index: 900; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #1f1646; color: #fff; text-decoration: none; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: calc(100vw - 24px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.seq-pill .sp-t { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.seq-pill small { opacity: .8; overflow: hidden; text-overflow: ellipsis; }
.seq-pill.over { background: #b91c1c; }
.seq-pill:focus-visible { outline: 3px solid #ffd54a; outline-offset: 2px; }
.lb-title { margin: 0; font-size: clamp(26px, 4vw, 40px); }
.tg-doc h2 { font-size: 18px; margin: 20px 0 6px; } .tg-doc ol, .tg-doc ul { padding-left: 22px; } .tg-doc li { margin: 4px 0; }
.tg-check { list-style: none; padding-left: 0 !important; }
.tg-say { display: inline-block; margin-left: 4px; color: var(--c-primary); font-style: italic; }
@media print { .seq-pill { display: none !important; } .tg-doc { border: 0; box-shadow: none; } }
.wu { max-width: 1100px; margin: 0 auto; }
.wu-title { text-align: center; font-size: clamp(30px, 5vw, 52px); margin: 0; }
.wu-mission { text-align: center; font-size: 20px; margin: 0; }
.wu-say { text-align: center; }
.wu-teams, .wu-final { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wu-team-card { border: 3px solid var(--tc); border-radius: 18px; padding: 14px; text-align: center; background: color-mix(in srgb, var(--tc) 8%, var(--c-surface)); display: grid; gap: 6px; justify-items: center; }
.wu-team-card.win { box-shadow: 0 0 0 5px #f5c542; }
.wu-hero { display: inline-flex; width: 96px; height: 100px; } .wu-hero svg { width: 100%; height: 100%; } .wu-hero.sm { width: 40px; height: 42px; }
.wu-crayon { font-size: 18px; margin: 0; }
.wu-board { display: grid; grid-template-columns: 200px 1fr 200px; gap: 16px; align-items: stretch; }
.wu-col { border: 3px solid var(--tc); border-radius: 18px; padding: 10px; display: grid; grid-template-rows: auto 1fr auto auto auto; gap: 8px; text-align: center; background: color-mix(in srgb, var(--tc) 6%, var(--c-surface)); }
.wu-col-head { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 18px; }
.wu-track { position: relative; min-height: 220px; border-radius: 12px; background: linear-gradient(#0b1440, #3b2a8a 70%, #7a5ad8); overflow: hidden; }
.wu-goal { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: 30px; }
.wu-rk { position: absolute; left: 50%; transform: translateX(-50%); font-size: 44px; transition: bottom .6s cubic-bezier(.3,1.6,.5,1); }
.wu-parts { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; } .wu-parts i { font-style: normal; opacity: .2; } .wu-parts i.on { opacity: 1; }
.wu-count { font-size: 18px; } .wu-count b { font-size: 26px; }
.wu-give { width: 100%; min-height: 52px; font-size: 16px; }
.wu-give kbd, .wu kbd { font-size: 11px; opacity: .7; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.wu-move { border: 1px solid var(--c-border); border-radius: 18px; background: var(--c-surface); padding: 18px; text-align: center; display: grid; align-content: center; gap: 10px; }
.wu-emoji { font-size: clamp(70px, 12vw, 130px); line-height: 1; }
.wu-cmd { font-size: clamp(22px, 3vw, 34px); font-weight: 800; margin: 0; }
.wu-vi { margin: 0; }
.wu-trick { font-size: 20px; font-weight: 800; color: #b45309; background: #fff4d6; border-radius: 12px; padding: 8px; margin: 0; }
.wu-timer { height: 10px; border-radius: 999px; background: var(--c-border); overflow: hidden; } .wu-timer i { display: block; height: 100%; background: var(--c-accent); transition: width .25s linear; }
.wu-launch { font-size: 90px; animation: wu-up 2.4s ease-in forwards; }
@keyframes wu-up { 0% { transform: translateY(40px); } 100% { transform: translateY(-60vh) rotate(-10deg); opacity: 0; } }
@media (max-width: 820px) { .wu-board { grid-template-columns: 1fr 1fr; } .wu-move { grid-column: 1 / -1; order: -1; } .wu-track { min-height: 140px; } }
@media (prefers-reduced-motion: reduce) { .wu-launch { animation: none; } .wu-rk { transition: none; } }

/* 2.81.8 (owner): a lesson, one line per part: kind, name, minutes; the teacher guide last */
.lpl-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.lpl-card { border: 1px solid var(--c-border); border-radius: 12px; padding: 10px 12px; background: var(--c-surface, #fff); }
.lpl-card.todo { background: transparent; color: var(--c-muted); }
.lpl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.lpl-title { font-weight: 700; font-size: 15px; color: inherit; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-family: inherit; }
a.lpl-title:hover, button.lpl-title:hover { text-decoration: underline; }
.lpl-total { font-weight: 700; font-size: 13px; padding: 2px 8px; border-radius: 999px; background: var(--c-primary-soft, #efeaff); color: var(--c-primary, #6d4cff); white-space: nowrap; }
.lpl-mode { font-size: 12px; color: var(--c-muted, #667); }
.lpl-go { margin-left: auto; }
.lpl-note { margin: 4px 0 0; font-size: 12px; color: var(--c-muted, #667); }
.lpl-lines { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px dashed var(--c-border); }
.lpl-line { display: flex; align-items: center; gap: 10px; padding: 6px 2px; border-bottom: 1px dashed var(--c-border); font-size: 14px; }
.lpl-line:last-child { border-bottom: 0; }
.lpl-pick { display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
a.lpl-pick:hover b { text-decoration: underline; }
label.lpl-pick { cursor: pointer; } label.lpl-pick input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.lpl-ico { width: 22px; text-align: center; flex: none; }
.lpl-txt { min-width: 0; }
.lpl-test { color: var(--c-muted, #667); font-size: 13px; }
.lpl-what { display: block; font-size: 12px; color: var(--c-muted, #667); }
.lpl-min { flex: none; font-size: 13px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lpl-guide { background: var(--c-surface-2); border-radius: 8px; }
.lpl-sum { margin: 0; font-weight: 700; }
.lpl-choose { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
@media (max-width: 560px) { .lpl-mode { display: none; } .lpl-go { margin-left: 0; } }
.lpl-play { flex: none; min-width: 74px; justify-content: center; } /* 2.81.9: each part plays alone */
.lpl-guide .lpl-min { min-width: 74px; text-align: center; }
/* 2.81.10 (owner): tick a part to count it; Play and Assign sit at the right of the lesson's name */
.lpl-acts { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.lpl-none .lpl-txt b, .lpl-none .lpl-what { color: var(--c-muted); }
@media (max-width: 560px) { .lpl-acts { margin-left: 0; } }

/* 2.84 (owner): My programs, one card per book */
.mp-books { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.mp-book { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface); color: inherit; text-decoration: none; min-height: 88px; }
.mp-book:hover, .mp-book:focus-visible { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.mp-ico { font-size: 24px; }

.mp-promos { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mp-promo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; border: 1px dashed var(--c-primary); border-radius: 12px; background: var(--c-primary-soft); min-height: 160px; }
.mp-note { font-size: 13px; color: var(--c-muted); } .mp-free { font-size: 13px; font-weight: 700; color: var(--c-primary); }

/* 2.84 (owner): each player of a family game picks a character; a chosen one is greyed out for the others */
.pm-hero { position: relative; border: 2px solid var(--c-border); border-radius: 50%; background: var(--c-surface); padding: 2px; cursor: pointer; line-height: 0; }
.pm-hero:hover, .pm-hero.on, .pm-hero:focus-visible { border-color: var(--c-primary); }
.pm-edit { position: absolute; right: -4px; bottom: -4px; background: var(--c-primary); color: var(--c-primary-ink); border-radius: 50%; width: 16px; height: 16px; font-size: 10px; line-height: 16px; text-align: center; }
.pm-pick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; padding: 8px; border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface-2); }
.pm-pick-b { border: 2px solid transparent; border-radius: 50%; background: var(--c-surface); padding: 2px; cursor: pointer; line-height: 0; }
.pm-pick-b.on { border-color: var(--c-primary); } .pm-pick-b:disabled { opacity: .3; cursor: not-allowed; filter: grayscale(1); }

/* 2.84 (owner): the Cambridge-format disclaimer under an online Exam Companion worksheet */
.ws-disc { margin: 18px 0 0; padding-top: 10px; border-top: 1px solid var(--c-border); font-size: 12px; line-height: 1.5; color: var(--c-muted); font-style: italic; }

/* 2.85 (owner): the home page slider — one slide per book series */
.sp-b-book_slider, .bk-slider-wrap { min-width: 0; max-width: 100%; }
.bk-slider { position: relative; overflow: hidden; border-radius: 20px; max-width: 100%; }
.bk-track { display: flex; width: 100%; transition: transform .45s ease; }
@media (prefers-reduced-motion: reduce) { .bk-track { transition: none; } }
.bk-slide { flex: 0 0 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: center; padding: 28px 32px; background: linear-gradient(135deg, var(--bk3), var(--c-surface)); border: 1px solid var(--c-border); border-radius: 20px; box-sizing: border-box; min-height: 340px; min-width: 0; }
.bk-text h3 { margin: 10px 0 6px; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; color: var(--bk1); }
.bk-tag { margin: 0 0 6px; font-size: 1.1rem; font-weight: 600; }
.bk-count { margin: 0 0 10px; }
.bk-chips { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bk-chips li { padding: 3px 10px; border-radius: 99px; background: var(--c-surface); border: 1px solid var(--c-border); font-size: 13px; font-weight: 600; }
.bk-chips li.soon { color: var(--c-muted); border-style: dashed; }
.bk-try { font-size: 1.15rem; padding: 14px 28px; }
.bk-soon { font-weight: 700; color: var(--c-muted); }
.bk-badge { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; background: var(--c-surface); border: 1px solid var(--c-border); }
.bk-badge.st-new { background: var(--c-accent); border-color: var(--c-accent); color: #1E1B2E; }
.bk-badge.st-soon { background: #1E1B2E; color: #fff; border-color: #1E1B2E; }
.bk-fan { position: relative; display: block; height: 280px; }
.bk-fan-i { position: absolute; left: 50%; top: 50%; transform: translate(calc(-50% + (var(--i) - (var(--n) - 1) / 2) * 62px), -50%) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 6deg)); transition: transform .2s; filter: drop-shadow(0 8px 14px rgba(30, 27, 46, .22)); }
.bk-fan:hover .bk-fan-i { transform: translate(calc(-50% + (var(--i) - (var(--n) - 1) / 2) * 72px), -52%) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 7deg)); }
.bk-cover.soon { filter: grayscale(.75); opacity: .8; }
.bk-nav { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 12px; }
.bk-arrow { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--c-border); background: var(--c-surface); font-size: 24px; line-height: 1; cursor: pointer; color: var(--c-text); }
.bk-arrow:hover, .bk-arrow:focus-visible { border-color: var(--c-primary); color: var(--c-primary); }
.bk-dots { display: flex; gap: 8px; }
.bk-dot { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; background: var(--c-border); cursor: pointer; }
.bk-dot[aria-current="true"] { background: var(--c-primary); width: 28px; border-radius: 99px; }
@media (max-width: 760px) { .bk-slide { grid-template-columns: 1fr; padding: 20px 16px; } .bk-fan { height: 200px; order: -1; } .bk-fan-i svg { width: 104px; height: auto; } .bk-fan-i { transform: translate(calc(-50% + (var(--i) - (var(--n) - 1) / 2) * 40px), -50%) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 6deg)); } }
.hs-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .hs-row .grow { flex: 1 1 220px; }
.hs-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-top: 10px; }
.hs-book { display: flex; gap: 8px; align-items: center; }
.bk-head { padding: 24px; border-radius: 20px; background: linear-gradient(135deg, var(--bk3), var(--c-surface)); border: 1px solid var(--c-border); }
.bk-head h1 { margin: 10px 0 4px; color: var(--bk1); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.15; }
.bk-shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.bk-book { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: inherit; text-align: center; }
.bk-book svg { width: 100%; max-width: 150px; height: auto; filter: drop-shadow(0 6px 12px rgba(30, 27, 46, .18)); transition: transform .15s; }
a.bk-book:hover svg, a.bk-book:focus-visible svg { transform: translateY(-4px); }

/* 2.86 (owner): a book's table of contents on its series page */
.bk-book.on svg { outline: 3px solid var(--c-primary); outline-offset: 3px; border-radius: 8px; }
.bk-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--bk3, var(--c-primary-soft)); }
.bk-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-weight: 600; }
.bk-buy { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.bk-view { display: flex; gap: 6px; flex-wrap: wrap; }
.bk-topic { border: 1px solid var(--c-border); border-radius: 12px; padding: 10px 14px; background: var(--c-surface); }
.bk-topic summary { cursor: pointer; font-size: 1.02rem; }
.bk-lessons { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.bk-lessons > li { padding: 8px 10px; border-radius: 10px; background: var(--c-surface-2); }
.bk-lessons > li.has-trial { background: var(--c-primary-soft); border: 1px dashed var(--c-primary); }
.bk-ln { display: inline-block; min-width: 56px; font-weight: 800; color: var(--bk1, var(--c-primary)); }
.bk-items { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bk-item { display: inline-flex; gap: 4px; align-items: center; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--c-border); background: var(--c-surface); font-size: 13px; font-weight: 600; text-decoration: none; color: inherit; }
a.bk-item:hover, a.bk-item:focus-visible { border-color: var(--c-primary); color: var(--c-primary); }
.bk-item.locked { color: var(--c-muted); }
.bk-item.trial { border-color: var(--c-primary); }
.bk-free { background: var(--c-primary); color: var(--c-primary-ink); border-radius: 99px; padding: 0 8px; font-size: 11px; }
.bk-buy-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.bk-buy-opt { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; text-align: center; padding: 16px; }
.bk-buy-opt b { font-size: 1.3rem; } .bk-buy-opt:hover, .bk-buy-opt:focus-visible { border-color: var(--c-primary); }
@media (max-width: 640px) { .bk-intro { grid-template-columns: 1fr; } .bk-buy-opts { grid-template-columns: 1fr; } }

/* 2.87 (owner): "Bạn là ai?" and "Log in as" on the home page */
.rh { text-align: center; }
.rh-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 auto 16px; max-width: 760px; }
.rh-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border-radius: 16px; border: 2px solid var(--c-border); background: var(--c-surface); font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--c-text); cursor: pointer; }
.rh-btn:hover, .rh-btn:focus-visible { border-color: var(--c-primary); }
.rh-btn[aria-checked="true"] { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary); }
.rh-ico { font-size: 2.2rem; line-height: 1; }
.rh-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; text-align: left; }
.rh.one .rh-cards { grid-template-columns: minmax(0, 560px); justify-content: center; }
.rh-card h3 { margin: 0 0 4px; } .rh-tag { margin: 0 0 8px; font-weight: 600; color: var(--c-primary); }
.rh-points { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.rh-go { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.la { text-align: center; }
.la-row { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
.la-circle { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--c-text); font-weight: 700; }
.la-ico { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 2.6rem; background: var(--c-primary-soft); border: 3px solid var(--c-surface); box-shadow: 0 0 0 2px var(--c-primary); transition: transform .15s; }
.la-circle:hover .la-ico, .la-circle:focus-visible .la-ico { transform: scale(1.06); background: var(--c-primary); }
.la-offer { margin: 0; font-size: .98rem; line-height: 1.55; font-weight: 400; color: #fff; text-align: center; }
.la-signup { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; margin: 18px auto 0; padding: .8rem 1.5rem; background: #fff; color: #6043c5 !important; border: 1px solid rgba(255,255,255,.85); border-radius: 999px; font-weight: 650; font-size: 1rem; text-decoration: none !important; box-shadow: 0 5px 16px rgba(31,16,87,.12); transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease; }
.la-signup:hover { background: #f8f4ff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(31,16,87,.2); }
.la-signup:focus-visible { outline: 3px solid #ffcf66; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .la-signup { transition: none; } } .la-have { margin: 6px 0 0; }
@media (max-width: 760px) { .rh-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rh-cards { grid-template-columns: 1fr; } .la-ico { width: 72px; height: 72px; font-size: 2rem; } .la-row { gap: 14px; } }

/* 2.88 (owner): the home page laid out like the sample — a big slider at the top (text left, big covers right), then a band of
   four circles ("Log in as") in the theme colour. Colours come from the site's theme; each series tints its own slide. */
.bk-hero .bk-slider { border-radius: 0; overflow: hidden; }
.bk-hero .bk-hslide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding: 24px 8px; min-height: 440px; background: none; border: 0; box-shadow: none; }
.bk-htext { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.bk-h { margin: 12px 0 10px; font-size: clamp(2.1rem, 4vw, 3.3rem); line-height: 1.05; letter-spacing: -.01em; color: var(--c-text); }
.bk-sub { margin: 0 0 14px; font-size: clamp(1.15rem, 2vw, 1.5rem); font-style: italic; font-weight: 600; color: var(--bk1); }
.bk-for { margin: 0 0 24px; color: var(--c-muted); font-size: 1rem; }
.bk-acts { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.bk-acts .btn.lg { padding: 14px 28px; font-size: 1.1rem; }
.bk-stack { position: relative; display: block; height: 400px; }
.bk-blob { position: absolute; inset: 8% 6%; border-radius: 46% 54% 52% 48% / 55% 45% 55% 45%; background: radial-gradient(circle at 40% 40%, var(--bk3), color-mix(in srgb, var(--bk2) 35%, transparent) 70%, transparent 72%); }
.bk-stack-i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); filter: drop-shadow(0 18px 24px rgba(30, 20, 60, .22)); transition: transform .25s; }
.bk-stack-i svg { display: block; width: 240px; height: auto; }
.bk-stack-i.j0 { z-index: 3; } .bk-stack-i.j1 { transform: translate(calc(-50% - 92px), -47%) rotate(-9deg) scale(.9); } .bk-stack-i.j2 { transform: translate(calc(-50% + 92px), -47%) rotate(9deg) scale(.9); }
.bk-stack:hover .bk-stack-i.j0 { transform: translate(-50%, -53%) scale(1.03); }
.site-page.banded:has(.bk-hero) { max-width: none; }
.bk-hero .bk-nav { margin-top: 4px; }
.bk-hero .bk-arrow { background: color-mix(in srgb, var(--c-surface) 85%, transparent); }
.sp-band:has(.bk-hero) { padding: 16px 0 28px; }
@media (max-width: 760px) {
  .bk-hero .bk-hslide { grid-template-columns: 1fr; min-height: 0; gap: 8px; padding: 8px 4px 16px; }
  .bk-stack { height: 250px; order: -1; } .bk-stack-i svg { width: 150px; } .bk-stack-i.j1 { transform: translate(calc(-50% - 58px), -47%) rotate(-9deg) scale(.9); } .bk-stack-i.j2 { transform: translate(calc(-50% + 58px), -47%) rotate(9deg) scale(.9); }
  .bk-h { font-size: 2rem; } .bk-acts .btn.lg { padding: 12px 20px; font-size: 1rem; }
}
/* "Log in as" on a coloured band: white circles, labels in capitals, the offer below */
.sp-band .la .sp-h2 { margin-bottom: 18px; }
.la-row { gap: clamp(20px, 6vw, 72px); }
.tone-deep .la-circle, .tone-brand .la-circle { color: #fff; }
.tone-deep .la-ico, .tone-brand .la-ico { background: #fff; box-shadow: none; border: 0; width: 112px; height: 112px; font-size: 3rem; }
.tone-deep .la-circle:hover .la-ico, .tone-deep .la-circle:focus-visible .la-ico, .tone-brand .la-circle:hover .la-ico { background: #fff; transform: scale(1.08); box-shadow: 0 0 0 4px var(--c-accent); }
.sp-band.tone-deep a.la-circle:not(.btn):not(.panel), .sp-band a.la-circle, .sp-band a.la-circle:hover { text-decoration: none; } .la-name { text-transform: uppercase; letter-spacing: .08em; font-size: 14px; }
.tone-deep .la-offer, .tone-deep .la-have, .tone-deep .la-have a { color: #fff; }
.tone-deep .la-have a { text-decoration: underline; }
.bk-more { margin: -4px 0 12px; font-size: 1.25rem; font-weight: 700; color: var(--c-text); }
@media (max-width: 760px) { .tone-deep .la-ico { width: 64px; height: 64px; font-size: 1.8rem; } .la-name { font-size: 11px; letter-spacing: .03em; } .la-row { gap: 10px; flex-wrap: nowrap; } .la-row > li { flex: 1 1 0; min-width: 0; } .la-circle { text-align: center; } }
/* 2.88.1 (owner): series slides show three covers, each with its own "Dùng thử"; play slides show one free lesson on a big screen */
.bk-hero .bk-hslide { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.bk-three { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; }
.bk-three > li { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.bk-three-c { display: block; transition: transform .2s; filter: drop-shadow(0 14px 20px rgba(30, 20, 60, .2)); }
.bk-three-c svg { display: block; width: 100%; max-width: 180px; height: auto; }
a.bk-three-c:hover { transform: translateY(-6px); }
.bk-three .bk-try { font-size: 1rem; padding: 10px 20px; }
.bk-three .bk-soon { font-size: .95rem; padding: 10px 0; }
.bk-screen { position: relative; display: block; border-radius: 18px; overflow: hidden; background: var(--c-surface); box-shadow: 0 24px 50px -18px rgba(30, 20, 60, .35); border: 1px solid var(--c-border); text-decoration: none; color: inherit; aspect-ratio: 16 / 10; }
.bk-screen-bar { display: flex; gap: 6px; padding: 10px 14px; background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); }
.bk-screen-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-border); }
.bk-screen-in { position: absolute; inset: 31px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; background: linear-gradient(135deg, var(--bk3), color-mix(in srgb, var(--bk2) 30%, var(--c-surface))); }
.bk-screen-ico { font-size: 4.2rem; line-height: 1; }
.bk-screen-in b { font-size: clamp(1.1rem, 2vw, 1.6rem); color: var(--bk1); max-width: 90%; }
.bk-screen-tiles { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bk-screen-tiles i { font-style: normal; font-weight: 800; padding: 10px 18px; border-radius: 12px; background: var(--c-surface); border: 2px solid color-mix(in srgb, var(--bk1) 30%, transparent); color: var(--bk1); }
.bk-screen-go { position: absolute; right: 18px; bottom: 18px; font-size: 1.2rem; padding: 14px 28px; box-shadow: 0 10px 24px -8px rgba(30, 20, 60, .45); }
.bk-screen:hover .bk-screen-go, .bk-screen:focus-visible .bk-screen-go { transform: scale(1.05); }
.la { padding: 8px 0; }
@media (max-width: 760px) {
  .bk-hero .bk-hslide { grid-template-columns: 1fr; }
  .bk-three { gap: 8px; order: -1; } .bk-three .bk-try { font-size: .85rem; padding: 8px 10px; } .bk-three .bk-soon { font-size: .8rem; }
  .bk-demo .bk-screen { order: -1; } .bk-screen-ico { font-size: 2.6rem; } .bk-screen-go { right: 10px; bottom: 10px; font-size: 1rem; padding: 10px 16px; } .bk-screen-tiles i { padding: 6px 10px; }
}
.pub-main .site-page.banded:has(.bk-hero) { margin-bottom: 0; }
@media (max-width: 760px) { .bk-screen-tiles { display: none; } }
/* 2.89 (owner): the play slide shows the game's own world; a book opens in a big pop up (page 1 the cover, page 2 the contents) */
.bk-screen-in.art { padding: 0; background: none; display: block; }
.bk-screen-in.art > svg { display: block; width: 100%; height: 100%; }
.bk-three-c svg.art { border-radius: 8px; }
.modal.bk-modal { width: min(1400px, calc(100vw - 24px)); height: calc(100vh - 24px); height: calc(100dvh - 24px); max-height: none; max-width: none; display: flex; flex-direction: column; overflow: hidden; } /* 2.91.1 (owner): almost the whole screen */
.overlay:has(> .modal.bk-modal) { padding: 12px; }
.modal.bk-modal > .body { padding: 0; flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.modal.bk-modal .bkp { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.modal.bk-modal .bkp-book { flex: 1; min-height: 0; }
.modal.bk-modal .bkp-toc { max-height: none; overflow: auto; }
.modal.bk-modal .bkp-cover svg { max-width: min(520px, 100%); max-height: calc(100dvh - 160px); }
.bkp-play { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.bkp-play-bar { display: flex; align-items: center; gap: 10px; }
.bkp-play-t { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkp-frame { flex: 1; width: 100%; min-height: 360px; border: 0; border-radius: 14px; background: var(--c-surface); box-shadow: 0 24px 50px -20px rgba(30, 20, 60, .4); }
/* 2.91.1: the player alone, inside the home page's pop up */
.mh-embed body { background: var(--c-surface); }
.mh-embed #app { padding: 12px 16px 24px; max-width: none; }
.mh-embed .trail-bar { display: none; }
.join-invite { margin: 12px 0; border: 2px solid var(--c-primary); background: var(--c-primary-soft); text-align: center; align-items: center; }
.join-q { font-weight: 700; font-size: 1.1rem; margin: 0; }
.join-invite .row { justify-content: center; }
.bkp { padding: 20px; background: linear-gradient(135deg, var(--bk3), var(--c-surface)); }
.bkp-book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--c-surface); border-radius: 14px; box-shadow: 0 24px 50px -20px rgba(30, 20, 60, .4); overflow: hidden; position: relative; }
.bkp-book::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 28px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(30, 20, 60, .12), transparent); pointer-events: none; }
.bkp-page { min-height: 480px; }
.bkp-cover { display: grid; place-items: center; padding: 24px; background: var(--bk3); animation: bkp-open .5s ease-out; transform-origin: right center; }
.bkp-cover svg { width: 100%; max-width: 360px; height: auto; filter: drop-shadow(0 16px 22px rgba(30, 20, 60, .25)); }
@keyframes bkp-open { from { transform: perspective(1200px) rotateY(-28deg); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bkp-cover { animation: none; } }
.bkp-toc { padding: 24px 28px; max-height: 70vh; overflow: auto; }
.bkp-toc h3 { margin: 0 0 12px; font-size: 1.5rem; color: var(--bk1); }
.bkp-topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bkp-topics summary { cursor: pointer; padding: 8px 10px; border-radius: 10px; font-weight: 700; display: flex; gap: 10px; align-items: center; }
.bkp-topics summary:hover { background: var(--c-surface-2); }
.bkp-n { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 50%; background: var(--bk1); color: #fff; font-size: 14px; }
.bkp-sheets { list-style: none; margin: 4px 0 8px 38px; padding: 0; display: grid; gap: 6px; }
.bkp-sheet { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--c-border); color: var(--c-muted); font-weight: 600; }
a.bkp-sheet.open { color: var(--c-text); border: 2px solid var(--c-primary); background: var(--c-primary-soft); text-decoration: none; }
a.bkp-sheet.open:hover, a.bkp-sheet.open:focus-visible { background: var(--c-primary); color: #fff; }
.bkp-free { white-space: nowrap; font-weight: 800; color: var(--c-primary); }
a.bkp-sheet.open:hover .bkp-free, a.bkp-sheet.open:focus-visible .bkp-free { color: #fff; }
.bkp-more { margin: 14px 0 0; font-weight: 700; }
@media (max-width: 760px) { .bkp { padding: 10px; } .bkp-book { grid-template-columns: 1fr; } .bkp-book::after { display: none; } .bkp-page { min-height: 0; } .bkp-cover svg { max-width: 200px; } .bkp-toc { max-height: none; padding: 16px; } .modal.bk-modal .bkp-book { flex: none; } .bkp-sheets { margin-left: 0; } }
/* 2.89 (owner): one box for Đăng nhập | Đăng ký, two tabs; the role is chosen under the date of birth and flagged red when missing */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 2px solid var(--c-border); margin: calc(-1 * var(--sp-2)) 0 var(--sp-2); }
.auth-tabs a { text-align: center; padding: 12px 8px; font-weight: 800; font-size: 1.1rem; color: var(--c-muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.auth-tabs a[aria-current="page"] { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.auth-tabs a:hover, .auth-tabs a:focus-visible { color: var(--c-primary); }
.role-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.role-field legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; }
.role-field.invalid .role-pick label { border-color: var(--c-danger, #D93B3B); }
.role-err { margin: 6px 0 0; color: var(--c-danger, #D93B3B); font-weight: 700; font-size: 14px; }
.auth-tabs button { text-align: center; padding: 12px 8px; font: inherit; font-weight: 800; font-size: 1.1rem; color: var(--c-muted); background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; }
.auth-tabs button[aria-selected="true"] { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.auth-tabs button:hover, .auth-tabs button:focus-visible { color: var(--c-primary); }

/* 2.90 (owner) — School English · the grade journey map, a unit's games, the Reward Hall */
.sej { max-width: 980px; margin: 0 auto; padding: var(--sp-4) var(--sp-4) var(--sp-6); }
.sej-kicker { margin: 0 0 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-primary); }
.sej-top { display: flex; gap: var(--sp-4); align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.sej-top > div { flex: 1 1 320px; } .sej-top h1 { margin-bottom: 4px; }
.sej-hall-btn { display: grid; grid-template-columns: 52px auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 16px 10px 10px; border-radius: var(--r-lg); background: linear-gradient(135deg, #ffe6a3, #ffc94d); color: #4a3200; box-shadow: var(--shadow); }
.sej-hall-btn:hover { text-decoration: none; transform: translateY(-1px); }
.sej-hall-btn > span { grid-row: span 2; width: 52px; height: 52px; } .sej-hall-btn b { font-family: var(--font-display); font-size: 18px; } .sej-hall-btn small { color: #6b4a00; }
.sej-map { position: relative; aspect-ratio: 1000 / 1600; max-width: 640px; margin: 0 auto; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow); background: #bfe8c9; }
.sej-map-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sej-stop, .sej-finish { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--c-text); text-align: center; z-index: 2; }
.sej-stop:hover, .sej-finish:hover { text-decoration: none; }
.sej-disc { display: grid; place-items: center; width: clamp(52px, 11vw, 72px); height: clamp(52px, 11vw, 72px); border-radius: 50%; background: #fff; border: 4px solid #fff; box-shadow: 0 4px 0 #2e7d5b33, 0 8px 18px #0003; transition: transform .2s; }
.sej-disc svg, .sej-hall-btn svg, .sej-finish svg, .sej-pico svg, .sej-medal-disc svg { width: 100%; height: 100%; display: block; }
.sej-disc.big { width: 84px; height: 84px; flex: none; }
.sej-stop:hover .sej-disc, .sej-stop:focus-visible .sej-disc { transform: scale(1.08); }
.sej-stop.done .sej-disc { border-color: var(--c-success); }
.sej-stop.here .sej-disc { border-color: var(--c-accent); animation: sej-pulse 1.6s ease-in-out infinite; }
.sej-stop.soon { filter: grayscale(.85); opacity: .78; }
.sej-plate { display: flex; flex-direction: column; padding: 3px 9px 4px; border-radius: 10px; background: #fffffff0; box-shadow: 0 2px 6px #0002; font-size: 11.5px; line-height: 1.25; max-width: 150px; }
.sej-plate b { font-family: var(--font-display); font-size: 13px; color: var(--c-primary); } .sej-plate small { font-size: 10.5px; }
.sej-tick { position: absolute; top: -4px; right: calc(50% - 40px); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c-success); color: #fff; font-weight: 800; border: 2px solid #fff; }
.sej-finish { width: clamp(64px, 13vw, 90px); }
.sej-walker { position: absolute; width: clamp(40px, 8vw, 56px); transform: translate(-120%, -85%); z-index: 3; pointer-events: none; animation: sej-bob 1.4s ease-in-out infinite; }
.sej-walker svg { width: 100%; height: auto; display: block; }
.sej-note { max-width: 640px; margin: var(--sp-4) auto 0; text-align: center; }
@keyframes sej-pulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--c-accent) 35%, transparent), 0 8px 18px #0003; } }
@keyframes sej-bob { 50% { margin-top: -6px; } }
.sej-back { display: inline-block; margin-bottom: var(--sp-3); font-weight: 600; }
.sej-unit-head { display: flex; gap: var(--sp-4); align-items: center; padding: var(--sp-4); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--shadow); margin-bottom: var(--sp-4); }
.sej-unit-head h1 { margin: 0; } .sej-unit-head p.muted { margin: 0 0 8px; }
.sej-bar { height: 10px; border-radius: 99px; background: var(--c-primary-soft); overflow: hidden; max-width: 420px; } .sej-bar i { display: block; height: 100%; background: var(--c-success); border-radius: inherit; }
.sej-seq { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; gap: 10px; counter-reset: none; }
.sej-part { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--radius); background: var(--c-surface); border: 2px solid var(--c-border); color: var(--c-text); }
.sej-part:hover { text-decoration: none; border-color: var(--c-primary); }
.sej-part .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; } .sej-part b { font-size: 15.5px; }
.sej-seq li.now .sej-part { border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 25%, transparent); }
.sej-seq li.ok .sej-part { border-color: color-mix(in srgb, var(--c-success) 55%, transparent); background: color-mix(in srgb, var(--c-success) 6%, var(--c-surface)); }
.sej-step { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--c-primary-soft); color: var(--c-primary); font-weight: 800; }
.sej-seq li.ok .sej-step { background: var(--c-success); color: #fff; }
.sej-pico { flex: none; width: 40px; height: 40px; font-size: 28px; display: grid; place-items: center; }
.sej-kind { font-weight: 700; color: var(--c-primary); font-size: 12px; }
.sej-count { flex: none; display: flex; flex-direction: column; align-items: flex-end; font-weight: 700; font-size: 13.5px; white-space: nowrap; } .sej-count small { font-weight: 500; font-size: 11.5px; }
.sej-go { flex: none; } .sej-done { font-size: 22px; }
.sej-h2 { margin: var(--sp-5) 0 var(--sp-3); }
@media (max-width: 560px) { .sej-part { flex-wrap: wrap; } .sej-count { flex-direction: row; gap: 6px; align-items: baseline; } .sej-plate { max-width: 110px; font-size: 10.5px; } .sej-plate small { display: none; } }
.sej-hall { position: relative; overflow: hidden; padding: var(--sp-5) var(--sp-4) var(--sp-6); border-radius: 30px; color: #fff; background: radial-gradient(120% 80% at 50% 0%, #6d4ae0 0%, #3b2a8a 55%, #21185a 100%); box-shadow: var(--shadow); }
.sej-hall-sky i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffe7a3; box-shadow: 0 0 10px #ffe7a3; animation: sej-twinkle 2.4s ease-in-out infinite; }
@keyframes sej-twinkle { 50% { opacity: .25; transform: scale(.6); } }
.sej-hall-head { position: relative; text-align: center; } .sej-hall-head h1 { color: #fff; font-size: clamp(32px, 6vw, 46px); margin: 0; } .sej-hall-head .sej-kicker { color: #ffd36b; }
.sej-hall-stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: var(--sp-3); } .sej-hall-stats span { padding: 6px 14px; border-radius: 99px; background: #ffffff1f; border: 1px solid #ffffff33; }
.sej-hero-stand { position: relative; width: 120px; margin: var(--sp-3) auto 0; padding-bottom: 14px; } .sej-hero-stand::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; border-radius: 50%; background: linear-gradient(#ffd36b, #c98500); }
.sej-hero-stand svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
.sej-hall .sej-h2 { color: #ffd36b; text-align: center; position: relative; }
.sej-shelf, .sej-bag { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.sej-shelf li, .sej-bag li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 18px; background: #ffffff14; border: 1px solid #ffffff26; text-align: center; font-size: 12.5px; }
.sej-shelf li small, .sej-bag li small { color: #e6defc; }
.sej-medal-disc { width: 66px; height: 66px; border-radius: 50%; padding: 6px; background: #fff; border: 4px solid #ffd36b; box-shadow: 0 0 0 4px #c98500, 0 6px 16px #0006; }
.sej-shelf li.empty .sej-medal-disc { filter: grayscale(1) brightness(.7); border-color: #9a93b8; box-shadow: 0 0 0 4px #5d567c; }
.sej-shelf li.won { background: linear-gradient(#ffd36b33, #ffffff10); border-color: #ffd36b88; }
.sej-ribbon { padding: 1px 10px; border-radius: 99px; background: var(--c-success); color: #fff; font-weight: 700; font-size: 11.5px; } .sej-lock { opacity: .8; }
.sej-pic { display: grid; place-items: center; width: 58px; height: 58px; } .sej-pic img, .sej-pic svg { width: 100%; height: 100%; object-fit: contain; } .sej-emo { font-size: 40px; }
.sej-bag li { background: #fff; color: var(--c-text); } .sej-bag li small { color: var(--c-muted); }
.sej-empty { position: relative; text-align: center; color: #e6defc; }
.sej-hall .btn.ghost { color: #fff; border-color: #ffffff66; }
.sej-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; } .sej-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: sej-fall 2.4s ease-in forwards; }
@keyframes sej-fall { to { transform: translateY(105vh) rotate(540deg); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .sej-walker, .sej-stop.here .sej-disc, .sej-hall-sky i, .sej-confetti i { animation: none; } .sej-confetti { display: none; } }
.sej-shelf li b { color: #fff; } .sej-shelf li.empty b { color: #d9d2f5; }
/* 2.91 (owner): a stop is a round postcard of the unit's world, painted by the game's scene painter */
.sej-disc, .sej-medal-disc { overflow: hidden; padding: 0; }
.sej-scene { position: relative; display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #cfe8ff; }
.sej-scene canvas { width: 100%; height: 100%; display: block; }
.sej-duo { position: absolute; inset: auto 0 6% 0; display: flex; justify-content: center; align-items: flex-end; gap: 0; }
.sej-duo > span { width: 46%; } .sej-duo > span:last-child { margin-left: -10%; transform: scaleX(-1); } .sej-duo svg { width: 100%; height: auto; display: block; }
.sej-badge { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); font-size: clamp(20px, 4.4vw, 34px); line-height: 1; filter: drop-shadow(0 2px 2px #0004); }
.sej-disc.big .sej-badge { font-size: 36px; }
.sej-shelf li.empty .sej-medal-disc .sej-scene { filter: grayscale(1) brightness(.75); }

/* 2.91 (owner) — a unit as one journey: the bar on the right of the world game, one line per game filling as it is played */
.world-frame.has-nav { display: flex; }
.world-frame.has-nav iframe { flex: 1; min-width: 0; width: auto; }
.wp-nav { flex: none; width: 200px; overflow-y: auto; padding: 10px 10px 12px; background: linear-gradient(180deg, #fffdf6, #f3efff); border-left: 3px solid #e7defc; }
.wp-nav .jn-head { margin: 2px 4px 8px; font: 700 13px/1.25 var(--font-display), var(--font), sans-serif; color: var(--c-primary); }
.wp-nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wp-nav a { display: block; padding: 7px 8px 8px; border-radius: 12px; color: var(--c-text); background: #fff; border: 2px solid #ece6fa; }
.wp-nav a:hover { text-decoration: none; border-color: var(--c-primary); }
.wp-nav li.now a { border-color: var(--c-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent) 25%, transparent); }
.wp-nav .jn-top { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; line-height: 1.2; }
.wp-nav .jn-t { flex: 1; min-width: 0; } .wp-nav .jn-top small { flex: none; font-weight: 700; color: var(--c-muted); font-size: 11px; }
.wp-nav .jn-k { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-primary-soft); color: var(--c-primary); font-size: 11px; font-weight: 800; }
.wp-nav li.ok .jn-k { background: var(--c-success); color: #fff; }
.wp-nav .jn-bar { display: block; height: 7px; margin-top: 6px; border-radius: 99px; background: #ece9f3; overflow: hidden; }
.wp-nav .jn-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3fcf8e, var(--c-success)); transition: width .4s ease; }
.wp-nav .jn-end a { background: linear-gradient(135deg, #ffe6a3, #ffc94d); border-color: #f3c85a; }
@media (max-width: 760px) {
  .world-frame.has-nav { flex-direction: column; }
  .wp-nav { width: auto; border-left: 0; border-top: 3px solid #e7defc; padding: 6px; overflow-x: auto; overflow-y: hidden; }
  .wp-nav .jn-head { display: none; } .wp-nav ol { display: flex; gap: 6px; } .wp-nav li { flex: 0 0 116px; }
}
/* the lesson before a grammar game, with the journey bar beside it */
.teach-row { display: flex; gap: 14px; align-items: flex-start; }
.teach-row > .gc-teach { flex: 1; min-width: 0; }
.teach-row > .wp-nav { border-radius: var(--r-lg); border: 3px solid #e7defc; align-self: stretch; }
@media (max-width: 760px) { .teach-row { flex-direction: column; } .teach-row > .wp-nav { align-self: auto; width: 100%; } }
/* 2.91 (owner): Migo's lesson screen — a bright stage, a big Migo with a speech bubble, examples as cards */
.gc-teach { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 0% 0%, #fff6d9 0%, #fff 45%), #fff; border: 3px solid #efe7ff; }
.gc-teach::before { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, #e9e1ff 0%, transparent 70%); pointer-events: none; }
.gc-teach .sl-title { font-size: clamp(22px, 3vw, 28px); color: var(--c-primary); }
.gc-teach .sl-coach { align-items: center; gap: 14px; }
.gc-teach .sl-migo { width: clamp(84px, 14vw, 120px); flex: none; animation: sej-bob 2.2s ease-in-out infinite; filter: drop-shadow(0 8px 10px #6d4ae033); }
.gc-teach .sl-migo svg { width: 100%; height: auto; }
.gc-teach .sl-bubble { position: relative; padding: 16px 20px; border-radius: 22px; background: #fff; border: 3px solid var(--c-primary); box-shadow: 0 6px 0 #6d4ae022; font-size: clamp(17px, 2.2vw, 21px); }
.gc-teach .sl-items { display: grid; gap: 10px; }
.gc-teach .sl-items li { padding: 12px 16px; border-radius: 16px; background: linear-gradient(90deg, #f4fbff, #fff); border: 2px solid #d8eefc; font-size: 18px; box-shadow: 0 3px 0 #d8eefc; }
.gc-teach .sl-items li.sl-no { background: #fff4f4; border-color: #f7d1d1; box-shadow: 0 3px 0 #f7d1d1; color: #a33; font-size: 16px; }
.gc-teach .trail i { height: 8px; border-radius: 99px; } .gc-teach .trail i.ok { background: var(--c-success); } .gc-teach .trail i.now { background: var(--c-accent); }
.gc-teach #cplay { font-size: 17px; padding: 12px 22px; background: linear-gradient(135deg, #3fcf8e, var(--c-success)); border-color: transparent; box-shadow: 0 5px 0 #157a51; }
@media (prefers-reduced-motion: reduce) { .gc-teach .sl-migo { animation: none; } .wp-nav .jn-bar i { transition: none; } }
/* 2.91 (owner): a unit journey fills the window; 🏠 and full screen sit at the top of the bar on the right */
.world-frame.has-nav .wp-exit { display: none !important; }
.wp-nav .jn-tools { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 6px; }
.wp-nav .jn-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 2px solid #e2d9fb; background: #fff; font-size: 20px; line-height: 1; cursor: pointer; color: var(--c-text); }
.wp-nav .jn-btn:hover { border-color: var(--c-primary); text-decoration: none; }
.teach-full { position: fixed; inset: 0; z-index: 1000; margin: 0; max-width: none; overflow-y: auto; padding: 14px 16px 24px; background: radial-gradient(120% 80% at 50% 0%, #f4efff, #e9f6ff); }
.teach-full .game-top { display: none; }
.teach-full .teach-row { max-width: 1280px; margin: 0 auto; min-height: calc(100dvh - 40px); }
.teach-full .teach-row > .gc-teach { align-self: center; max-width: 900px; margin: 0 auto; }
@media (max-width: 760px) { .wp-nav { display: flex; } .wp-nav .jn-tools { flex: none; flex-direction: column; margin: 0 4px 0 0; } }
/* 2.91 (owner): the journey bar is on the left; the game's own buttons stay on the right */
.world-frame.has-nav .wp-nav, .teach-row > .wp-nav { order: -1; }
.world-frame.has-nav .wp-nav { border-left: 0; border-right: 3px solid #e7defc; }
.wp-nav .jn-tools { justify-content: flex-start; }
@media (max-width: 760px) { .world-frame.has-nav .wp-nav { order: 0; border-right: 0; } }
.jn-more { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 6; width: min(560px, calc(100% - 240px)); } .jn-more .jn-next { margin: 0 !important; background: #fff; border-radius: 18px; box-shadow: 0 10px 30px #0003; padding: 14px 16px; font-size: 16px; } @media (max-width: 760px) { .jn-more { width: calc(100% - 24px); bottom: 90px; } }
/* 2.93 (owner): mouth drawings in the phoneme bank */
.ph-mouth{margin:0;display:grid;gap:6px}
.mm-mouth[data-anim]{cursor:pointer;-webkit-tap-highlight-color:transparent}
.mm-mouth.is-playing .mm-play{display:none}
.mm-mouth:focus-visible{outline:3px solid #6c4de6;outline-offset:2px;border-radius:16px}
.ph-mouth svg{width:100%;height:auto;display:block}
.ph-mouth figcaption{font-size:12.5px;line-height:1.45;color:var(--c-text-2,#555)}
/* 2.93 (owner): Migo's phonics lesson — the two sounds always side by side */
.ph-lesson{gap:12px}
.ph-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ph-cell{border:2px solid #e7defc;border-radius:18px;padding:10px;background:#fff;display:grid;gap:8px;align-content:start;transition:transform .15s,border-color .15s}
.ph-cell-art svg{width:100%;height:auto;display:block}
.ph-cell-head{gap:8px;align-items:center;flex-wrap:wrap}
.ph-cell-sym{font:700 24px/1 var(--font-display),serif;color:#e5484d}
.ph-cell-tip{margin:0;font-size:14px;line-height:1.5}
.ph-cell.pick{cursor:pointer}.ph-cell.pick:hover,.ph-cell.pick:focus-visible{border-color:#7c5cff;transform:translateY(-2px);outline:none}
.ph-cell.right,.ph-word.right{border-color:#18a058 !important;background:#ebfbf2}
.ph-cell.wrong,.ph-word.wrong{border-color:#e5484d !important;animation:phShake .35s}
.ph-word{justify-self:center;min-width:120px;font-size:18px}
.ph-msg{display:inline-block;margin-top:6px}
@keyframes phShake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.ph-cell,.ph-cell.wrong,.ph-word.wrong{animation:none;transition:none}}
@media (max-width:560px){.ph-pair{gap:6px}.ph-cell{padding:6px}.ph-cell-tip{font-size:12.5px}.ph-cell-sym{font-size:20px}}
/* 2.93: a unit can have 13+ games, so the journey bar is tighter and scrolls inside the window */
@media (min-width: 761px) { .wp-nav ol { gap: 4px; } .wp-nav a { padding: 5px 8px 6px; } .wp-nav .jn-bar { height: 5px; margin-top: 4px; } .teach-row > .wp-nav { max-height: calc(100vh - 32px); overflow-y: auto; } }

/* 2.97.9 — product-first homepage: 1 large game-world cover, 1 collection per slide. */




.bk-eyebrow { font-size:.85rem; font-weight:800; color:var(--bk1); letter-spacing:.09em; text-transform:uppercase; }













/* 2.97.10 — selectable program overview, preserving the product-first 35/65 grid. */










/* 2.98.1: program-first showcase, two-row covers, disabled coming-soon covers */







/* 2.98.2 homepage benefits and live free-game entry */


.bk-feature .bk-screen{min-width:0}


/* 2.98.5 — Live pronunciation lesson preview, with a transparent, non-obscuring play affordance. */
.bk-migo-screen { isolation:isolate; background:#eaf6f8; }
.bk-migo-live-preview { position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;z-index:0;background:#eaf6f8; }
.bk-migo-preview-label { position:absolute;left:12px;top:12px;z-index:1;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.78);backdrop-filter:blur(5px);color:#173d56;font-size:clamp(10px,1vw,13px);font-weight:700;max-width:calc(100% - 24px); }
.bk-migo-play { position:absolute;right:12px;bottom:12px;z-index:2;padding:10px 17px;border:1px solid rgba(65,37,135,.6);border-radius:999px;background:rgba(255,255,255,.22);backdrop-filter:blur(3px);color:#351d83;font-weight:800;font-size:clamp(12px,1.2vw,17px);text-shadow:0 1px 2px rgba(255,255,255,.85);box-shadow:0 2px 9px rgba(0,0,0,.1); }
.bk-migo-screen:hover .bk-migo-play,.bk-migo-screen:focus-visible .bk-migo-play { background:rgba(255,255,255,.65); }
@media (max-width:640px){.bk-migo-play{right:8px;bottom:8px;padding:7px 11px}.bk-migo-preview-label{font-size:10px}}

/* 2.98.6: public Learning Pack selector stays inside the modal */
.bkp-series-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:16px;max-height:65vh;overflow-y:auto;padding:8px}
.bkp-series-pick{background:#fff;border:1px solid #e5dff5;border-radius:16px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;color:#211d38}
.bkp-series-pick:hover:not(:disabled){border-color:#7047e8;box-shadow:0 6px 22px #33225b20}
.bkp-series-pick:disabled{opacity:.55;cursor:default}
.bkp-series-pick svg{max-width:100%;height:auto}

.bk-migo-screen img.bk-migo-live-preview{object-fit:cover;object-position:center 30%;}

/* 2.98.7: actual MIGO phonics teaching screen, no screenshot asset */
.bk-migo-screen{overflow:hidden;pointer-events:none;position:relative;background:#f9f6ff}
.bk-migo-component{position:absolute;inset:0;overflow:hidden;pointer-events:none;user-select:none}
.bk-migo-component>.game{width:920px;max-width:none;transform:scale(.55);transform-origin:top left;margin:0!important}
.bk-migo-component .game-top,.bk-migo-component .ph-lesson>.row,.bk-migo-component .trail,.bk-migo-component #phSkip{display:none!important}
.bk-migo-component .teach-row{display:block!important;margin:0!important}
.bk-migo-component .ph-lesson{margin:0!important;box-shadow:none!important}
.bk-migo-component button{pointer-events:none!important}
.bk-role-content{max-height:min(75vh,820px);overflow-y:auto;overscroll-behavior:contain}
.bk-role-content .site-page{padding:0!important;max-width:100%!important}
.bk-role-content .sp-band{padding:0!important}
.bk-role-content .sp-band-in{max-width:100%!important}
.bk-role-frame{width:100%;height:70vh;border:0;border-radius:12px}
@media (max-width:760px){.bk-migo-component>.game{transform:scale(.38)}}

/* 2.98.10 — compact, media-first homepage and four-column legal footer */
@media (min-width:900px){
 
 
 
 
 
 
 
 
 
 
 
 .sp-band:has(.la){padding:16px 0}
 .la{padding:0}
 .la-row{margin:0 0 8px}
 .tone-deep .la-ico,.tone-brand .la-ico{width:76px;height:76px;font-size:2.2rem}
 .la-signup{margin:8px auto 0;padding:.55rem 1.2rem}
}
.bk-role-visuals{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(150px,.75fr);align-items:stretch;gap:12px;width:100%;min-width:0;max-height:100%}
.bk-role-visuals:has(> :only-child){grid-template-columns:1fr}
.bk-role-game{display:flex;flex-direction:column;min-width:0;min-height:220px;border-radius:16px;overflow:hidden;box-shadow:0 12px 26px #27195d22;background:#e6f5ff;text-decoration:none!important}
.bk-role-game .bk-screen-in{display:block;flex:1;min-height:0;overflow:hidden}
.bk-role-game .bk-screen-in svg{width:100%;height:100%;object-fit:cover}
.bk-role-caption{display:block;padding:9px 12px;background:#fff;color:#5031c3;font-weight:750;font-size:13px}
.bk-role-worksheet{background:#fff;border:1px solid #e5def7;border-radius:16px;padding:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;box-shadow:0 12px 26px #27195d12}
.bk-role-qr{display:block;width:min(100%,180px);aspect-ratio:1;background:white;padding:5px;border-radius:8px}
.bk-role-qr svg{width:100%;height:100%;display:block}
.bk-role-winfo{display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;font-size:12px;color:#38314e;max-width:100%}
.bk-role-winfo span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bk-role-winfo a{color:#6043c5;font-weight:700;text-decoration:underline}
.mh-footer-grid{display:grid!important;grid-template-columns:minmax(150px,1.2fr) repeat(3,minmax(145px,1fr));gap:clamp(18px,3vw,50px)!important;align-items:start}
.mh-footer-brand p{font-size:13px;max-width:210px;line-height:1.5}
.mh-footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.mh-footer-col h3{font-size:14px;color:#26213c;margin:0 0 6px;font-weight:800}
.mh-footer-col a{font-size:13px;line-height:1.4;text-decoration:none;color:#5840bf}
.mh-footer-col a:hover{text-decoration:underline}
.pub-footer{padding:20px 0 14px}
.pub-footer .mh-footer-legal{margin-top:14px;padding-top:12px}
.pub-footer .mh-footer-legal p{font-size:11px;line-height:1.45;max-width:130ch}
@media (max-width:900px){.mh-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.bk-role-visuals{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.mh-footer-grid{grid-template-columns:1fr 1fr!important;gap:18px!important}.bk-role-visuals{grid-template-columns:1fr}.bk-role-worksheet{flex-direction:row}.bk-role-qr{width:110px;flex-shrink:0}.bk-role-game{min-height:200px}}

/* 2.98.11 — approved minimalist, wide-screen homepage layout.
   Scope to public homepages containing the existing book hero. Preserve all
   carousel, real game, worksheet, modal, login and editorial functionality. */
@media  (min-width: 900px) {
  .pub-footer .inner{
    max-width: 1640px;
    width: 100%;
    padding-left: clamp(24px, 3vw, 54px);
    padding-right: clamp(24px, 3vw, 54px);
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
}



/* 2.98.12 — fit complete books and game previews within the homepage stage. */



/* 2.98.13: fit entire book art and live pronunciation lesson inside the visual region. */





.bk-migo-component>.game{max-width:none!important}
.bk-migo-component .ph-lesson{max-width:none!important}


/* 2.98.14 — three covers use one large row; 4–6 covers use two complete rows. */



/* 2.98.17: Parent and Centre hero cards reuse the real screenshots from the site role pages. */
.bk-role-screenshot{display:flex;flex-direction:column;min-width:0;min-height:220px;height:100%;background:#fff;border:1px solid #e5def7;border-radius:16px;overflow:hidden;text-decoration:none!important;box-shadow:0 12px 26px #27195d12}
.bk-role-shot-title{display:block;padding:12px 15px;font-weight:800;color:#5430bc;font-size:clamp(13px,1.1vw,18px);flex-shrink:0}
.bk-role-shot-image{display:flex;flex:1;min-height:0;padding:6px 12px 14px;align-items:center;justify-content:center;background:#f8f7ff}
.bk-role-shot-image img{display:block;width:100%;height:100%;max-height:100%;object-fit:contain;object-position:center;border-radius:8px}
.bk-role-screenshot:focus-visible{outline:3px solid #7651e8;outline-offset:3px}
@media (max-width:600px){.bk-role-screenshot{min-height:220px}.bk-role-shot-image{min-height:170px}}

/* 2.98.19: show a real, separately selected game inside the Free Games hero. */
.bk-live-game-card{position:relative;display:block;overflow:hidden;background:#fff;min-height:300px}
.bk-live-game-frame{display:block;width:160%;height:160%;border:0;pointer-events:none;transform:scale(.625);transform-origin:top left;background:#fff}
.bk-live-game-overlay{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;padding:12px 16px;border-radius:14px;background:rgba(83,52,204,.94);color:#fff;font-weight:800;text-align:center;box-shadow:0 6px 20px #0002}


/* 2.98.21 — stable home slider dimensions while loading and switching slides. */









/* MaiMigo 2.98.22 — canonical Homepage slider layout.
   One engine, one responsive stage. All slide variants inherit this geometry. */
.bk-hero .bk-slider {overflow:hidden;border-radius:0;min-height:0;contain:layout;}
.bk-hero .bk-track {display:flex;width:100%;transition:transform .45s ease;}
.bk-hero .bk-hslide,
.bk-hero .bk-hslide.bk-feature,
.bk-hero .bk-hslide.bk-overview,
.bk-hero .bk-hslide.bk-spotlight {
  box-sizing:border-box;display:grid;grid-template-columns:minmax(0,.63fr) minmax(0,1.37fr);
  align-items:center;gap:clamp(20px,3.2vw,56px);width:100%;min-width:0;
  height:clamp(430px,55vh,590px);min-height:0;
  padding:clamp(12px,1.7vw,26px) clamp(20px,3vw,48px);
  background:linear-gradient(135deg,#f0f8ff,#f8f4ff);border:0;border-radius:22px;
  box-shadow:none;overflow:hidden;
}
.bk-hero .bk-hslide .bk-htext {min-width:0;max-width:100%;}
.bk-hero .bk-hslide .bk-h {font-size:clamp(30px,2.7vw,51px);line-height:1.09;overflow-wrap:break-word;text-wrap:balance;}
.bk-hero .bk-hslide .bk-sub {font-size:clamp(16px,1.3vw,21px);line-height:1.4;}
.bk-hero .bk-hslide .bk-screen,
.bk-hero .bk-hslide .bk-migo-screen {display:block;width:100%;height:clamp(310px,49vh,535px);max-height:100%;min-width:0;min-height:0;}
.bk-hero .bk-feature-visual {display:grid;place-items:center;min-width:0;min-height:0;height:100%;font-size:16px;line-height:1.4;text-align:center;}
.bk-hero .bk-free-game-pending {font-size:16px;font-weight:700;color:#5b45ae;}
.bk-hero .bk-role-visuals {min-width:0;min-height:0;max-height:100%;}
.bk-hero .bk-role-visuals > * {min-width:0;}
.bk-hero .bk-overview-covers {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(8px,1vw,16px);align-items:center;justify-items:center;align-content:center;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;}
.bk-hero .bk-overview-cover {appearance:none;border:0;background:transparent;cursor:pointer;color:var(--c-text);font:inherit;font-weight:700;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;max-width:100%;min-width:0;min-height:0;overflow:hidden;padding:0;transition:transform .25s ease;}
.bk-hero .bk-overview-cover svg {display:block;width:auto;height:auto;max-width:100%;max-height:calc(100% - 28px);object-fit:contain;flex:0 1 auto;filter:drop-shadow(0 14px 14px rgba(35,26,66,.16));}
.bk-hero .bk-overview-cover span {display:block;flex:none;margin-top:4px;font-size:clamp(11px,.9vw,15px);}
.bk-hero .bk-overview-cover:hover:not(:disabled),.bk-hero .bk-overview-cover:focus-visible:not(:disabled) {transform:translateY(-5px);outline-offset:3px;}
.bk-hero .bk-overview-cover:disabled {cursor:default;opacity:.65;}
.bk-hero .bk-overview-covers.bk-covers-count-1,
.bk-hero .bk-overview-covers.bk-covers-count-2,
.bk-hero .bk-overview-covers.bk-covers-count-3 {grid-template-rows:minmax(0,1fr);gap:clamp(12px,1.7vw,28px);}
.bk-hero .bk-overview-covers.bk-covers-count-2 .bk-overview-cover:last-child {grid-column:3;}
.bk-hero .bk-overview-covers.bk-covers-count-1 .bk-overview-cover {grid-column:2;}
.bk-hero .bk-program-tabs {display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:4px 8px 8px;}
.bk-hero .bk-program-tab {cursor:pointer;border:1px solid var(--c-border);border-radius:999px;padding:7px 14px;font:inherit;font-size:clamp(12px,.85vw,14px);font-weight:700;color:var(--c-text);background:var(--c-surface);}
.bk-hero .bk-program-tab[aria-current="true"] {background:var(--c-primary);color:white;border-color:var(--c-primary);}
.bk-hero .bk-pause {cursor:pointer;border:1px solid var(--c-border);background:var(--c-surface);color:var(--c-text);border-radius:50%;width:36px;height:36px;}
.bk-hero .bk-dots {max-width:min(54vw,480px);overflow-x:auto;scrollbar-width:thin;}
.bk-hero .bk-nav {margin:0;padding:5px 0;}
.bk-hero .bk-product-stage {display:flex;align-items:center;justify-content:center;min-width:0;height:100%;position:relative;isolation:isolate;}
.bk-hero .bk-product-stage:before {content:'';position:absolute;width:min(85%,590px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--bk3),transparent 70%);z-index:-1;}
.bk-hero .bk-product-cover {display:block;width:min(100%,440px);filter:drop-shadow(0 24px 28px rgba(35,26,66,.22));transition:transform .35s ease;}
.bk-hero .bk-product-cover:hover {transform:translateY(-7px) scale(1.015);}
.bk-hero .bk-product-cover svg {display:block;width:100%;height:auto;max-height:100%;}
.bk-hero .bk-spotlight .bk-htext {max-width:100%;justify-content:center;}
.bk-hero .bk-eyebrow {font-size:.85rem;font-weight:800;color:var(--bk1);letter-spacing:.09em;text-transform:uppercase;}
@media(min-width:900px) {
  .pub-main:has(.site-page.banded .bk-hero),.pub-header:has(+ .pub-main .bk-hero) .inner,.pub-footer .inner {max-width:1640px;width:100%;padding-left:clamp(24px,3vw,54px);padding-right:clamp(24px,3vw,54px);}
  .pub-main:has(.bk-hero) .site-page.banded {width:100%;max-width:none;}
  .pub-main:has(.bk-hero) .sp-band-in {width:100%;min-width:0;}
  .pub-main:has(.bk-hero) .sp-band.tone-hero {padding-top:8px;padding-bottom:8px;}
  .pub-main:has(.bk-hero) .sp-band:has(.la) {padding:12px 0 16px;}
  .pub-main:has(.bk-hero) .la-row {gap:clamp(22px,3vw,48px);margin:0 0 8px;}
  .pub-main:has(.bk-hero) .la-ico {width:68px;height:68px;font-size:2rem;}
  .pub-main:has(.bk-hero) .la-name {font-size:13px;}
  .pub-main:has(.bk-hero) .la-offer {font-size:14px;font-weight:400;}
  .pub-main:has(.bk-hero) .la-signup {display:inline-flex;margin:9px auto 0;padding:9px 20px;background:#fff;color:#6043c5!important;border-radius:999px;}
  .pub-main:has(.bk-hero) .sp-band:has(.la) + .sp-band:empty {display:none;}
}
@media(min-width:900px) and (max-height:760px) {
 .bk-hero .bk-hslide,.bk-hero .bk-hslide.bk-feature,.bk-hero .bk-hslide.bk-overview,.bk-hero .bk-hslide.bk-spotlight {height:350px;}
 .bk-hero .bk-hslide .bk-screen,.bk-hero .bk-hslide .bk-migo-screen {height:310px;}
}
@media(max-width:899px) {
 .bk-hero .bk-hslide,.bk-hero .bk-hslide.bk-feature,.bk-hero .bk-hslide.bk-overview,.bk-hero .bk-hslide.bk-spotlight {grid-template-columns:1fr;height:auto;min-height:420px;gap:12px;padding:16px;}
 .bk-hero .bk-hslide .bk-screen,.bk-hero .bk-hslide .bk-migo-screen {height:clamp(230px,42vh,400px);}
 .bk-hero .bk-overview-covers {height:clamp(230px,42vh,400px);order:-1;}
 .bk-hero .bk-program-tabs {flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;}
 .bk-hero .bk-program-tab {white-space:nowrap;}
}
@media(max-width:600px) {
 .bk-hero .bk-hslide .bk-h {font-size:clamp(26px,7vw,38px);}
 .bk-hero .bk-hslide .bk-sub {font-size:1rem;}
 .bk-hero .bk-overview-covers {gap:5px;height:260px;}
 .bk-hero .bk-overview-cover span {font-size:11px;}
 .bk-hero .bk-role-visuals {grid-template-columns:1fr;}
}
@media(prefers-reduced-motion:reduce) {.bk-hero .bk-track,.bk-hero .bk-overview-cover,.bk-hero .bk-product-cover {transition:none;}}