/* 10Talents app styles. One look across every app (shared with Ready Scribe): light, soft color fields, white cards, pill buttons. */
@font-face { font-family: 'OpenDyslexic'; src: url('/fonts/opendyslexic-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'OpenDyslexic'; src: url('/fonts/opendyslexic-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root {
  --bg: #f5f5f7; --surface: #ffffff; --surface-2: #f2f2f7; --fill: #e8e8ed; --ink: #1d1d1f; --ink-2: #48484d; --muted: #6e6e73; --faint: #86868b; --line: rgba(0, 0, 0, .08);
  --navy: #1d1d1f; --accent: #0071e3; --accent-ink: #0066cc; --accent-soft: #e8f2fd; --blue: #0071e3;
  --gold: #c98a00; --gold-soft: #fff6d9; --good: #1f8a4c; --good-bg: #e3f6e8; --bad: #d1352b; --bad-bg: #fde8e7; --warn: #a35a00; --warn-bg: #fff1d6;
  --kid: #0071e3; --radius: 22px; --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 24px rgba(0, 0, 0, .06); --shadow-lg: 0 2px 6px rgba(0, 0, 0, .05), 0 20px 50px rgba(0, 0, 0, .12);
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --serif: 'Lora', 'New York', Georgia, serif;
  --read: var(--sans);
  --fs: 17px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); font: 400 var(--fs)/1.5 var(--sans); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; }
body.font-lexend { --read: 'Lexend', var(--sans); }
body.font-dyslexic { --read: 'OpenDyslexic', var(--sans); }
body.font-lexend .kid-wrap, body.font-dyslexic .kid-wrap, body.font-lexend .kid-home, body.font-dyslexic .kid-home { font-family: var(--read); letter-spacing: 0; }
body.font-dyslexic .kid-wrap, body.font-dyslexic .kid-home { font-size: calc(var(--fs) * .9); line-height: 1.65; }
body.font-lexend .btn, body.font-dyslexic .btn, body.font-lexend .skill-btn, body.font-dyslexic .skill-btn { font-family: var(--read); }
body.text-large { --fs: 20px; } body.text-xlarge { --fs: 23px; }
h1, h2, h3 { font-family: var(--sans); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; margin: 0 0 .4em; }
.font-dyslexic h1, .font-dyslexic h2, .font-dyslexic h3 { font-family: var(--read); letter-spacing: 0; }
h1 { font-size: clamp(1.7em, 4vw, 2.3em); } h2 { font-size: 1.4em; } h3 { font-size: 1.12em; letter-spacing: -.015em; } h4 { margin: 1em 0 .3em; font-size: .95em; }
h1 small { font: 400 .45em var(--sans); color: var(--muted); margin-left: .4em; letter-spacing: 0; }
p { margin: 0 0 .8em; }
a { color: var(--accent-ink); }
code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-size: .88em; }
.muted { color: var(--muted); } .small { font-size: .88em; } .fine { font-size: .78em; color: var(--muted); }
.good { color: var(--good); } .bad { color: var(--bad); } .warn-text { color: var(--warn); }
.center { text-align: center; } .pad { padding: 48px 16px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ac, var(--accent)); margin-bottom: 2px; }
.wrap:not(.row) { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 20px 20px 64px; }
.row { display: flex; gap: 10px; align-items: center; } .row.end { justify-content: flex-end; } .row.center { justify-content: center; } .row.wrap { flex-wrap: wrap; } .row.between { justify-content: space-between; }
.grow { flex: 1; }
.stack { display: grid; gap: 10px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; margin-bottom: 18px; }
.card.flat { box-shadow: none; border: 1px solid var(--line); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.notice, .warn { background: var(--warn-bg); color: var(--warn); border-radius: var(--radius-sm); padding: 12px 16px; }
.tip { background: var(--gold-soft); border-radius: var(--radius-sm); padding: 12px 16px; }
.info-box { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 12px 16px; }
blockquote { margin: 0 0 12px; padding: 12px 16px; border-left: 4px solid var(--gold); background: var(--surface-2); border-radius: 0 12px 12px 0; }

/* Soft color fields behind every screen */
#sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
#sky i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; transition: background 1s; }
#sky i:nth-child(1) { width: 52vw; height: 52vw; left: -12vw; top: -18vw; background: var(--sky1, #ffd8b5); }
#sky i:nth-child(2) { width: 46vw; height: 46vw; right: -14vw; top: 8vh; background: var(--sky2, #ffe9a8); }
#sky i:nth-child(3) { width: 40vw; height: 40vw; left: 30vw; bottom: -22vw; background: var(--sky3, #cfe3ff); }
body[data-sky="teacher"] { --sky1: #dfe7f5; --sky2: #e9e3f7; --sky3: #e1f0ea; }
body[data-sky="mirror"] { --sky1: #e2d4ff; --sky2: #c9d4ff; --sky3: #ffd9ec; }
#app { position: relative; z-index: 1; }

/* Buttons & inputs */
.btn { appearance: none; border: 0; background: var(--fill); color: var(--ink); border-radius: 980px; padding: 11px 20px; font: 500 1em var(--sans); letter-spacing: -.01em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; min-height: 44px; transition: transform .08s, background .15s, box-shadow .15s; white-space: nowrap; }
.btn:hover { background: #dcdce1; } .btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: #fff; } .btn.primary:hover { background: #0077ed; }
.btn.green { background: #28a745; color: #fff; } .btn.green:hover { background: #2fb34e; }
.btn.ghost { background: transparent; color: var(--accent-ink); } .btn.ghost:hover { background: var(--accent-soft); }
.btn.danger { background: var(--bad-bg); color: var(--bad); } .btn.danger.ghost { background: transparent; } .btn.danger:hover { background: #fbd8d6; }
.btn.small { padding: 7px 14px; min-height: 34px; font-size: .86em; } .btn.big { padding: 15px 30px; font-size: 1.12em; font-weight: 600; } .btn.wide, input.wide { width: 100%; }
.btn.white { background: var(--surface); box-shadow: var(--shadow); } .btn.white:hover { box-shadow: var(--shadow-lg); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.google { width: 100%; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.link { background: none; border: 0; color: var(--accent-ink); cursor: pointer; font: inherit; padding: 4px; }
.link:hover { text-decoration: underline; } .link.muted { color: var(--muted); }
.icon-btn { background: var(--fill); border: 0; border-radius: 999px; width: 44px; height: 44px; cursor: pointer; font-size: 1.1em; flex: none; }
.icon-btn:hover { background: #dcdce1; }
.icon-btn.small { width: 32px; height: 32px; font-size: .85em; vertical-align: middle; }
input, select, textarea { font: inherit; color: inherit; border: 1px solid #d2d2d7; background: #fff; border-radius: 12px; padding: 10px 12px; min-height: 44px; max-width: 100%; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, button:focus-visible { outline: 3px solid rgba(0, 113, 227, .35); outline-offset: 1px; }
textarea { width: 100%; resize: vertical; }
.field { display: grid; gap: 5px; margin-bottom: 12px; min-width: 0; } .field select, .field input { width: 100%; } .field span { font-size: .85em; font-weight: 600; color: var(--ink-2); }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; } .check input { min-height: 0; width: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--accent); }
fieldset { border: 0; padding: 0; margin: 0 0 12px; } legend { font-size: .85em; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.swatches { display: flex; gap: 8px; flex-wrap: wrap; } .swatches input { position: absolute; opacity: 0; } .swatches i { display: block; width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.swatches input:checked + i { box-shadow: 0 0 0 3px var(--accent); }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 980px; padding: 3px 10px; font-size: .78em; font-weight: 600; color: var(--ink-2); }
.chip.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.chip.good { background: var(--good-bg); color: var(--good); border-color: transparent; }
.chip.blue { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.seg { display: inline-flex; gap: 2px; background: var(--fill); border-radius: 12px; padding: 3px; max-width: 100%; overflow-x: auto; }
.seg button { background: none; border: 0; padding: 8px 14px; border-radius: 9px; font: 500 .9em var(--sans); color: var(--ink); white-space: nowrap; cursor: pointer; min-height: 36px; }
.seg button.on { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* Spinner, toast, modal */
.spinner { width: 34px; height: 34px; border: 3px solid var(--fill); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: rgba(29, 29, 31, .92); color: #fff; padding: 12px 20px; border-radius: 999px; opacity: 0; transition: .25s; z-index: 1000; max-width: 90vw; text-align: center; backdrop-filter: blur(10px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.modal-wrap { position: fixed; inset: 0; background: rgba(0, 0, 0, .32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 900; opacity: 0; transition: opacity .16s; }
.modal-wrap.open { opacity: 1; } .modal-wrap.closing { opacity: 0; }
.modal { background: var(--surface); border-radius: 26px; padding: 26px; width: 100%; max-width: 460px; max-height: 92vh; overflow: auto; box-shadow: var(--shadow-lg); }
.modal.wide { max-width: 760px; }
.modal.shake { animation: shake .35s; } @keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.big-emoji { font-size: 3.4em; line-height: 1.1; margin-bottom: 8px; }
.breath { width: 80px; height: 80px; margin: 16px auto; border-radius: 50%; background: #cfe7d8; animation: breathe 8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.6); } 50% { transform: scale(1.15); } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 950; overflow: hidden; }
.confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: fall 2.2s ease-in forwards; }
@keyframes fall { to { top: 105vh; transform: rotate(540deg); } }

/* PIN pad */
.pinpad { text-align: center; } .pin-dots { display: flex; gap: 14px; justify-content: center; margin: 14px 0 6px; }
.pin-dots span { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--ink); } .pin-dots span.on { background: var(--ink); }
.pin-err { min-height: 1.4em; color: var(--bad); font-size: .9em; }
.pin-keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; justify-content: center; margin: 8px 0 12px; }
.pin-key { height: 72px; border-radius: 50%; border: 0; background: var(--fill); font: 500 1.5em var(--sans); cursor: pointer; color: var(--ink); }
.pin-key:hover { background: #dcdce1; } .pin-key:active { background: var(--accent-soft); }

/* Avatars */
.avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; font: 700 1.05em var(--sans); flex: none;
  background: linear-gradient(145deg, color-mix(in srgb, var(--kc, var(--kid)) 72%, #fff), var(--kc, var(--kid))); }
.avatar.big { width: 72px; height: 72px; font-size: 1.75em; box-shadow: 0 6px 16px color-mix(in srgb, var(--kc, var(--kid)) 35%, transparent); }

/* Auth */
.auth { position: relative; z-index: 1; max-width: 440px; margin: 0 auto; padding: 40px 16px; }
.auth-brand { display: flex; align-items: center; gap: 12px; justify-content: center; text-decoration: none; color: var(--ink); font: 700 1.5em var(--sans); letter-spacing: -.03em; margin-bottom: 20px; }
.auth-card { padding: 30px; } .auth-card h1 { font-size: 1.6em; } .err { min-height: 1.2em; font-size: .9em; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85em; margin: 14px 0; } .or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Setup wizard */
.wizard-steps { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; flex-wrap: wrap; }
.wizard-steps li { padding: 6px 14px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: .85em; font-weight: 600; box-shadow: var(--shadow); }
.wizard-steps li.on { background: var(--accent); color: #fff; } .wizard-steps li.done { color: var(--good); }
.add-kid > summary { list-style: none; margin: 8px 0 14px; } .add-kid > summary::-webkit-details-marker { display: none; }
.kid-form h4 { border-top: 1px solid var(--line); padding-top: 12px; }
.app-toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px 14px; }
.next-list li { margin-bottom: 8px; }
.kid-rows { display: grid; gap: 8px; margin-bottom: 14px; } .kid-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--surface-2); }
.kid-row .btn { margin-left: auto; }

/* Who's learning? */
.pick { max-width: 980px; text-align: center; padding-top: 6vh; }
.pick-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.pick-brand h1 { font-size: clamp(2em, 6vw, 3.2em); letter-spacing: -.035em; margin: 6px 0 0; }
.pick-brand p { color: var(--muted); font-size: 1.15em; margin: 0; }
.kid-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; margin: 34px 0 30px; }
.kid-pick { position: relative; background: var(--surface); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); padding: 32px 14px 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font: inherit; color: inherit; transition: transform .2s, box-shadow .2s; }
.kid-pick:hover, .kid-pick:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); outline: none; }
.kid-pick b { font-size: 1.4em; margin-top: 10px; letter-spacing: -.02em; } .kid-pick small { color: var(--muted); font-size: .85em; }
.kid-pick .lock, .kid-pick .bday { position: absolute; top: 14px; right: 16px; font-size: .9em; } .kid-pick .bday { left: 16px; right: auto; }
.teacher-pick { display: inline-flex; align-items: center; gap: 10px; background: var(--surface); border: 0; border-radius: 980px; padding: 8px 20px 8px 8px; box-shadow: var(--shadow); font: 500 1em var(--sans); cursor: pointer; color: var(--ink); }
.teacher-pick:hover { box-shadow: var(--shadow-lg); }
.teacher-pick .ti { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--fill); font-size: 1.05em; }

/* Kid top bar */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; margin: -20px -20px 22px; padding: 12px 20px; flex-wrap: wrap;
  background: rgba(251, 251, 253, .78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.topbar .avatar { width: 44px; height: 44px; font-size: 1.1em; }
.who-info { display: flex; flex-direction: column; min-width: 140px; flex: 1; line-height: 1.25; }
.who-info b { font-size: 1.05em; font-weight: 600; } .who-info span { color: var(--muted); font-size: .8em; }
.xp { height: 6px; background: var(--fill); border-radius: 6px; overflow: hidden; margin-top: 5px; max-width: 240px; }
.xp i { display: block; height: 100%; background: linear-gradient(90deg, #ffb300, #ffcc33); border-radius: 6px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 980px; padding: 6px 12px; font-size: .85em; color: var(--ink); font-family: var(--sans); }
.pill b { font-weight: 600; } button.pill { cursor: pointer; } button.pill:hover { background: var(--surface-2); }
.ring { width: 20px; height: 20px; transform: rotate(-90deg); } .ring-bg { fill: none; stroke: var(--fill); stroke-width: 5; } .ring-fg { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; }
.back { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 980px; padding: 7px 14px 7px 10px; font: 500 .9em var(--sans); color: var(--ink); cursor: pointer; }
.back:hover { background: var(--surface-2); }

/* Practice-mode banner (parent mirroring a child) */
.mirror-bar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; justify-content: center; flex-wrap: wrap; background: linear-gradient(90deg, #5e4bd8, #8a5cf5); color: #fff; padding: 8px 16px; font-size: .9em; font-family: var(--sans); }
.mirror-bar .btn { background: rgba(255, 255, 255, .2); color: #fff; } .mirror-bar .btn:hover { background: rgba(255, 255, 255, .3); }
body.mirror .topbar { top: 46px; }

/* Kid home */
.hero { padding: 30px; }
.hero h2 { font-size: clamp(1.8em, 4.5vw, 2.6em); margin: 6px 0 4px; letter-spacing: -.03em; }
.hero .sub { color: var(--muted); font-family: var(--serif); font-size: 1.1em; font-style: italic; margin: 0; }
.font-dyslexic .hero .sub, .font-lexend .hero .sub { font-family: var(--read); font-style: normal; }
.hero-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.day-bar { display: flex; gap: 4px; margin-top: 22px; height: 8px; } .day-bar i { display: block; flex: 1; background: var(--fill); border-radius: 4px; } .day-bar i.on { background: var(--kid); }
.day-labels { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-top: 8px; font-family: var(--sans); }
.section-title { font-size: 1.15em; margin: 26px 2px 12px; letter-spacing: -.02em; }
.app-grid, .quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 14px; margin-bottom: 8px; }
.app-tile, .q-tile { position: relative; background: var(--surface); border: 0; border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; font: inherit; color: inherit; text-align: left; min-height: 124px; transition: transform .2s, box-shadow .2s; }
.app-tile:hover, .q-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.app-tile .at-icon, .q-tile .qi { font-size: 30px; line-height: 1; margin-bottom: 10px; }
.app-tile b, .q-tile b { font-size: 1em; font-weight: 600; letter-spacing: -.01em; } .app-tile small, .q-tile small { color: var(--muted); font-size: .8em; }
.app-tile .bar, .q-tile .bar { height: 5px; background: var(--fill); border-radius: 4px; overflow: hidden; margin-top: auto; } .app-tile .bar i, .q-tile .bar i { display: block; height: 100%; background: var(--ac, var(--good)); border-radius: 4px; }
.app-tile .badge { position: absolute; top: 12px; right: 12px; font-size: .7em; font-weight: 700; background: var(--accent); color: #fff; padding: 2px 8px; border-radius: 999px; }
.app-tile.soon { opacity: .6; } .app-tile .soon { position: absolute; top: 12px; right: 12px; font-size: .68em; font-weight: 700; background: var(--surface-2); padding: 2px 8px; border-radius: 999px; color: var(--muted); }
.verse { text-align: center; color: var(--muted); font-family: var(--serif); font-style: italic; margin-top: 36px; } .verse span { display: block; font-style: normal; font-size: .8em; font-family: var(--sans); }
.kh-alert { display: flex; align-items: center; gap: 12px; background: var(--accent-soft); border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 16px; }
.kh-alert .ai { font-size: 1.4em; } .kh-alert .grow { flex: 1; }

/* App heads */
.app-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .app-head h1 { margin: 0; font-size: 1.5em; }
.hero-card { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 28px; }
.skill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.skill-btn { border: 0; background: var(--surface-2); border-radius: 999px; padding: 8px 14px; font: 500 .92em var(--sans); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: inherit; }
body.font-dyslexic .skill-btn { font-family: 'OpenDyslexic', var(--sans); }
.skill-btn:hover { background: var(--accent-soft); }
.sdot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #cfd4dc; flex: none; vertical-align: middle; margin-right: 4px; }
.sdot.solid { background: #1a7f4e; } .sdot.shaky { background: #e0a20c; } .sdot.gap { background: #c4453b; } .sdot.learning { background: #7aa7e8; }

/* Practice */
.practice { max-width: 760px; margin: 0 auto; }
.pr-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pr-bar { flex: 1; height: 10px; background: var(--fill); border-radius: 999px; overflow: hidden; } .pr-bar i { display: block; height: 100%; background: var(--kid); border-radius: 999px; transition: width .3s; }
.pr-count { font-size: .85em; color: var(--muted); white-space: nowrap; }
.pr-meta { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; min-height: 28px; }
.talent-pop { margin-left: auto; color: var(--warn); font-weight: 700; opacity: 0; transition: .3s; } .talent-pop.show { opacity: 1; }
.problem { padding: 28px; }
.prompt-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.prompt { font-size: 1.35em; line-height: 1.45; font-weight: 500; } .prompt.small { font-size: 1.05em; }
.visual { margin: 14px 0; overflow-x: auto; } .visual:empty { display: none; } .visual svg { max-width: 100%; height: auto; }
.answer-area { margin: 16px 0 8px; } .answer-area.done { margin: 0; }
.ans-box { font-size: 1.4em; font-weight: 600; text-align: center; width: 140px; padding: 10px; border-radius: 14px; border: 2px solid #d2d2d7; }
.ans-box.small { width: 80px; } .ans-box.wide { width: min(280px, 100%); } .ans-box.roman { letter-spacing: .1em; text-transform: uppercase; }
.ans-qr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ans-qr b { font-size: 1.3em; }
.ans-frac { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fr-stack { display: inline-grid; gap: 4px; justify-items: center; } .fr-stack i { display: block; width: 92px; height: 3px; background: var(--ink); border-radius: 2px; }
.choices { display: flex; gap: 12px; flex-wrap: wrap; } .choice { font-size: 1.2em; min-width: 140px; background: var(--surface); box-shadow: inset 0 0 0 1.5px #d2d2d7; } .choice:hover { background: var(--accent-soft); } .choice.picked { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); }
.feedback { min-height: 1.6em; font-weight: 600; margin: 6px 0; border-radius: 12px; }
.feedback.good, .feedback.bad, .feedback.almost, .feedback.info { padding: 8px 12px; }
.feedback.good { background: var(--good-bg); color: var(--good); } .feedback.bad { background: var(--bad-bg); color: var(--bad); }
.feedback.almost { background: var(--warn-bg); color: var(--warn); } .feedback.info { background: var(--surface-2); color: var(--ink-2); }
.hint { margin: 10px 0; padding: 12px 14px; border-radius: 14px; background: #eef4fd; } .hint.lv2 { background: #f1eefc; } .hint.lv3 { background: #fdf6e7; } .hint.lv4 { background: var(--good-bg); }
.pr-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.hint-btn { background: var(--accent-soft); color: var(--accent-ink); }
.scaffold { background: #fdf6e7; border-radius: 14px; padding: 12px; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sc-msg.good { color: var(--good); font-weight: 600; } .sc-msg.bad { color: var(--bad); }
.steps { margin: 8px 0; padding-left: 1.4em; } .steps li { margin: 6px 0; } .step-math { font-size: 1.15em; margin-bottom: 2px; }
.answer-line { font-size: 1.1em; margin-top: 8px; }
.stat-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 14px 0; }
.stat-row > div { background: var(--surface-2); border-radius: 14px; padding: 10px 16px; display: grid; justify-items: center; min-width: 96px; }
.stat-row b { font-size: 1.5em; } .stat-row span { font-size: .78em; color: var(--muted); text-align: center; }
.stat-row.small { justify-content: flex-start; } .stat-row.small b { font-size: 1.15em; } .stat-row.small > div { min-width: 88px; padding: 8px 12px; }
.done-card, .intro-card { padding: 34px 24px; }
.tips { padding-left: 1.2em; } .tips li { margin: 4px 0; }
.example { background: var(--surface-2); border-radius: 14px; padding: 14px; margin: 10px 0; }
.videos { display: grid; gap: 10px; } .video { margin: 0; } .video iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 12px; background: #000; }
.video figcaption { font-size: .85em; color: var(--muted); } .video-link { display: inline-block; padding: 8px 12px; background: var(--surface-2); border-radius: 12px; text-decoration: none; }
.roman-key .rk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; text-align: center; }
.roman-key .rk div { background: var(--surface-2); border-radius: 12px; padding: 10px 4px; display: grid; } .roman-key b { font: 700 1.5em var(--serif); color: #a2463c; } .roman-key span { font-size: .8em; color: var(--muted); }
.roman { font-family: var(--serif); letter-spacing: .06em; }

/* Math typesetting */
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 3px; font-size: .92em; line-height: 1.1; }
.frac .fn { border-bottom: 2px solid currentColor; padding: 0 3px; } .frac .fd { padding: 0 3px; }
.mixed { display: inline-flex; align-items: center; gap: 2px; } .num { font-variant-numeric: tabular-nums; }

/* Drawings */
.barmodel { width: 100%; max-width: 560px; } .bm-seg { fill: #dce8fb; stroke: #2f6fdf; stroke-width: 1.5; } .bm-seg.alt { fill: #fbe3cf; stroke: #d9792b; }
.bm-label, .bm-text, .bm-total { font: 600 14px var(--sans); fill: var(--ink); } .bm-total { fill: var(--blue); } .bm-brace { fill: none; stroke: var(--blue); stroke-width: 1.5; }
.bargraph { width: 100%; max-width: 480px; } .bg-grid { stroke: #ebe6da; } .bg-tick, .bg-cat { font: 12px var(--sans); fill: var(--muted); } .bg-cat { fill: var(--ink); font-weight: 600; }
.bg-bar { fill: #2a78d6; } .bg-bar.b1 { fill: #eb6834; } .bg-bar.b2 { fill: #1baf7a; } .bg-bar.b3 { fill: #6250d6; }
.boxfig { max-width: 340px; } .bx-front { fill: #dce8fb; stroke: #2f6fdf; } .bx-top { fill: #eef4fd; stroke: #2f6fdf; } .bx-side { fill: #c3d7f6; stroke: #2f6fdf; } .bx-t { font: 600 13px var(--sans); fill: var(--ink); }
.colmath, table.longdiv { display: inline-table; font: 600 1.6em/1.25 ui-monospace, 'SF Mono', Menlo, monospace; background: var(--surface-2); padding: 12px 18px; border-radius: 14px; }
.cm-row { display: grid; grid-template-columns: repeat(var(--n), 1.1ch); justify-content: end; position: relative; } .cm-op { position: absolute; left: -1.4ch; } .cm-line { border-top: 3px solid var(--ink); margin: 2px 0; } .cm-row.ans span { height: 1.25em; }


/* Snap & Learn */
.snap-card .ai-note { background: #eef4fd; border-radius: 12px; padding: 10px 14px; }
.snap-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0; } .camera-btn { font-size: 1.15em; }
.preview img { max-width: 100%; max-height: 360px; border-radius: 14px; display: block; margin: 0 auto 12px; }
.typed { margin: 12px 0; } .typed summary { cursor: pointer; color: var(--blue); margin-bottom: 8px; } .typed .btn { margin-top: 8px; }
.thinking { padding: 30px; }
.tutor .intro { font-size: 1.2em; } .tsteps { padding-left: 1.4em; } .tstep { margin: 14px 0; padding: 12px 14px; background: var(--surface-2); border-radius: 14px; }
.tstep.done { background: var(--good-bg); } .tq { font-weight: 600; font-size: 1.08em; } .step-msg { min-height: 1em; margin: 4px 0 0; font-size: .92em; } .step-msg.bad { color: var(--bad); } .step-msg.good { color: var(--good); font-weight: 600; }
.final { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 14px; } .try-one { background: #f1eefc; border-radius: 14px; padding: 12px 14px; margin-top: 14px; }
.answer-big { font-size: 1.5em; color: var(--good); }
.vocab dt { font-weight: 700; } .vocab dd { margin: 0 0 8px 0; color: var(--ink-2); } .cq summary { cursor: pointer; font-weight: 600; }

/* Teacher */
.teacher { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 20px 20px 64px; }
.t-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .t-head h1 { margin: 0; }
.tabs { display: flex; width: fit-content; max-width: 100%; gap: 2px; margin: 14px 0 20px; overflow-x: auto; background: var(--fill); border-radius: 12px; padding: 3px; }
.tab { border: 0; background: transparent; padding: 8px 16px; border-radius: 9px; font: 500 .92em var(--sans); cursor: pointer; color: var(--ink); white-space: nowrap; min-height: 38px; }
.tab.on { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.kid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.kc-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; } .kc-head h2 { margin: 0; }
.needs { list-style: none; padding: 0; margin: 0 0 10px; } .needs li { padding: 4px 0; }
.snap-list { list-style: none; padding: 0; margin: 0; }
.snap-row { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 10px 4px; font: inherit; color: inherit; cursor: pointer; flex-wrap: wrap; }
.snap-row:hover { background: var(--surface-2); } .snap-row .when { color: var(--muted); font-size: .8em; width: 84px; } .snap-row .q { flex: 1; min-width: 160px; color: var(--ink-2); }
.helper-pick .field { min-width: 180px; flex: 1; }
.solve-box .row input { flex: 1; min-width: 200px; } .solve-box .row { flex-wrap: wrap; }
.teach-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 20px; }
.teach-grid h4 { margin-top: .4em; color: var(--warn); }
.skills-table, .recent { width: 100%; border-collapse: collapse; font-size: .9em; } .skills-table th, .skills-table td, .recent th, .recent td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.recent td:nth-child(2) { max-width: 320px; }
section.card:has(.recent), section.card:has(.skills-table) { overflow-x: auto; }
.placement { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chart-fig { margin: 0; max-width: 760px; } .chart { width: 100%; height: auto; } .chart .grid { stroke: #ece7dc; } .chart .tick { font: 11px var(--sans); fill: var(--muted); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85em; color: var(--ink-2); margin-top: 6px; } .legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.table-view { margin-top: 6px; font-size: .85em; } .table-view summary { cursor: pointer; color: var(--muted); } .table-view table { border-collapse: collapse; margin-top: 6px; } .table-view td, .table-view th { padding: 3px 10px; border-bottom: 1px solid var(--line); }
.add-video summary { cursor: pointer; color: var(--blue); font-size: .9em; margin-top: 10px; } .add-video input { flex: 1; min-width: 160px; }

@media (max-width: 600px) {
  :root { --fs: 16px; }
  .card { padding: 16px; } .problem { padding: 16px; } .prompt { font-size: 1.18em; }
  .pin-keys { grid-template-columns: repeat(3, 64px); } .pin-key { height: 58px; }
  .roman-key .rk { grid-template-columns: repeat(4, 1fr); }
  .colmath, .longdiv { font-size: 1.25em; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

.field small { font-size: .8em; line-height: 1.45; }
.soon-strip { margin-top: 18px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: .9em; }
.soon-strip button { border: 1px dashed var(--line); background: transparent; border-radius: 999px; padding: 6px 12px; font: inherit; color: var(--ink-2); cursor: pointer; }

table.longdiv { border-collapse: collapse; } table.longdiv td { padding: 0 .12em; text-align: center; min-width: 1.05ch; height: 1.25em; }
table.longdiv td.dv { padding-right: .35em; text-align: right; } table.longdiv td.br { border-top: 3px solid var(--ink); } table.longdiv td.br.first { border-left: 3px solid var(--ink); border-top-left-radius: 10px; }
table.longdiv .q { color: var(--good); } table.longdiv td.u { border-bottom: 2px solid var(--ink-2); } table.longdiv tr.sub td { color: var(--ink-2); } table.longdiv td.op { color: var(--muted); font-size: .7em; text-align: right; }
table.longdiv td.rem { text-align: left; font-size: .8em; }

.photo-pick { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .thumbs figure { margin: 0; text-align: center; } .thumbs img { width: 110px; height: 140px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); display: block; }
tr.struck td { opacity: .4; text-decoration: line-through; } tr.struck td:first-child { opacity: 1; text-decoration: none; }
.pack-row { margin-bottom: 10px; } .pack-row b { display: block; margin-bottom: 6px; }

/* ---------- Kid home extras ---------- */
.kh-title { font-size: clamp(1.6em, 4vw, 2.2em); margin: 4px 2px 16px; }
.journey-bar { display: flex; gap: 4px; margin-top: 22px; height: 8px; }
.journey-bar .seg-b { background: var(--fill); border-radius: 4px; overflow: hidden; }
.journey-bar .seg-b i { display: block; height: 100%; border-radius: 4px; }
.q-tile[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: var(--shadow); }

/* ---------- Subject apps (Compass, Lingua, Quill, Chronicle, Logos, Lamplight) ---------- */
.module .mod-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.mod-num { width: 36px; height: 36px; border-radius: 11px; color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; font-family: var(--sans); }
.lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.lesson-tile { text-align: left; background: var(--surface-2); border: 0; border-radius: 14px; padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; cursor: pointer; font: inherit; color: inherit; transition: background .15s, transform .15s; }
.lesson-tile:hover { background: #ebebf0; transform: translateY(-1px); }
.lesson-tile .ln { grid-row: span 3; font-size: 22px; line-height: 1.2; min-width: 26px; }
.lesson-tile .lt { font-weight: 600; font-size: .92em; line-height: 1.25; } .lesson-tile .lr { font-size: .74em; color: var(--muted); } .lesson-tile .ls { font-size: .76em; color: var(--ink-2); }
.lesson-tile.solid { background: color-mix(in srgb, var(--mc) 10%, #fff); }
.lesson-tile.next { box-shadow: inset 0 0 0 2px var(--accent); background: #fff; }
.lesson-text p { font-size: 1.08em; line-height: 1.65; max-width: 68ch; }
.chart-wrap { overflow-x: auto; margin: 10px 0; }
.lesson-chart { border-collapse: separate; border-spacing: 0; font-size: .95em; background: var(--surface-2); border-radius: 14px; overflow: hidden; }
.lesson-chart th, .lesson-chart td { padding: 8px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.lesson-chart th { background: var(--fill); font-weight: 600; } .lesson-chart tr:last-child td { border-bottom: 0; }
.choices.col { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.choices.col .choice { justify-content: flex-start; text-align: left; white-space: normal; min-height: 54px; font-size: 1.05em; }
.choice.right { background: var(--good-bg) !important; box-shadow: inset 0 0 0 2px var(--good) !important; color: var(--good); opacity: 1 !important; }
.choice.wrong { background: var(--bad-bg) !important; box-shadow: inset 0 0 0 2px #f2b8b4 !important; color: var(--bad); text-decoration: line-through; }
.choice.gone { opacity: .25; }
.btn.choice:disabled { opacity: 1; } .btn.choice.gone:disabled { opacity: .25; }
.feedback .why { font-weight: 400; color: var(--ink-2); margin-top: 4px; }
.tap-sentence { font-size: 1.35em; line-height: 2.1; }
.tap-word { border: 0; background: var(--surface-2); border-radius: 10px; padding: 2px 8px; font: inherit; color: inherit; cursor: pointer; margin: 0 1px; }
.tap-word:hover { background: var(--accent-soft); }
.tap-word.on { background: var(--accent); color: #fff; }
.tap-word.right { background: var(--good-bg); color: var(--good); box-shadow: inset 0 0 0 2px var(--good); }
.tap-word.wrong { background: var(--bad-bg); color: var(--bad); text-decoration: line-through; }
.order-slots { list-style: none; counter-reset: s; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.order-slots li { counter-increment: s; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border-radius: 14px; border: 2px dashed #d2d2d7; }
.order-slots li::before { content: counter(s); width: 28px; height: 28px; border-radius: 50%; background: var(--fill); display: grid; place-items: center; font-weight: 700; flex: none; font-size: .85em; }
.order-slots li.filled { border-style: solid; border-color: transparent; background: var(--accent-soft); }
.order-slots li.right { background: var(--good-bg); } .order-slots li.wrong { background: var(--bad-bg); }
.order-slots small { color: var(--muted); margin-left: auto; }
.order-pool { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; justify-content: center; }
.order-pool .choice { white-space: normal; text-align: left; }
.flash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 300px; padding: 30px; border: 0; border-radius: 26px; background: var(--surface); box-shadow: var(--shadow-lg); cursor: pointer; font: inherit; color: inherit; text-align: center; transition: transform .25s; }
.flash:active { transform: scale(.98); } .flash.flipped { background: linear-gradient(160deg, #fff, var(--accent-soft)); }
.fc-side { font-size: .75em; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fc-text { font-size: clamp(1.4em, 4vw, 2em); font-weight: 600; line-height: 1.3; } .fc-why { color: var(--ink-2); max-width: 52ch; } .fc-tap { font-size: .8em; color: var(--faint); }
.timeline { list-style: none; padding: 0 0 0 18px; margin: 10px 0 0; border-left: 3px solid var(--fill); }
.timeline li { position: relative; padding: 8px 0 12px 16px; display: grid; gap: 2px; }
.timeline li::before { content: ''; position: absolute; left: -26px; top: 13px; width: 13px; height: 13px; border-radius: 50%; background: #8a5a2b; box-shadow: 0 0 0 4px var(--surface); }
.tl-year { font-weight: 700; color: #8a5a2b; font-size: .9em; } .tl-label { font-weight: 600; } .tl-why { color: var(--muted); font-size: .88em; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-bottom: 8px; }
.book { border: 0; border-radius: 12px; padding: 10px 6px; background: color-mix(in srgb, var(--bc) 12%, #fff); color: var(--ink); cursor: pointer; display: grid; gap: 2px; text-align: center; font: inherit; transition: transform .15s; }
.book:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--bc) 20%, #fff); }
.book b { color: var(--bc); font-size: 1.05em; } .book small { font-size: .72em; color: var(--ink-2); }
.key-verse { font-family: var(--serif); font-size: 1.05em; }
.scripture-text { font-family: var(--serif); font-size: 1.18em; line-height: 1.85; max-width: 70ch; }
.font-lexend .scripture-text, .font-dyslexic .scripture-text { font-family: var(--read); }
.scripture-text sup { color: var(--muted); font-family: var(--sans); font-size: .62em; margin: 0 3px 0 6px; }
.verse-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 12px; }
.verse-pick { border: 0; background: var(--surface-2); border-radius: 14px; padding: 12px 14px; text-align: left; display: grid; gap: 2px; cursor: pointer; font: inherit; color: inherit; }
.verse-pick:hover { background: var(--gold-soft); } .verse-pick small { color: var(--muted); font-size: .8em; } .verse-pick .vs { font-size: .75em; color: var(--good); font-weight: 600; min-height: 1em; }
.verse-pick.solid { background: color-mix(in srgb, #b88a1e 14%, #fff); }
.verse-big { font-family: var(--serif); font-size: clamp(1.3em, 3.4vw, 1.75em); line-height: 1.75; margin: 18px auto; max-width: 34ch; }
.font-lexend .verse-big, .font-dyslexic .verse-big { font-family: var(--read); }
.vb { color: var(--faint); letter-spacing: .05em; } .vb.cur { color: var(--accent); font-weight: 700; } .vb.ok { color: var(--ink); letter-spacing: 0; }
.verse-big.letters .fl { border: 0; background: none; font: inherit; color: inherit; padding: 0 2px; cursor: pointer; border-radius: 6px; } .verse-big.letters .fl:hover { background: var(--gold-soft); }
.fl-input { text-align: center; font-size: 1.6em; width: 200px; }
.shake-x { animation: shake .3s; border-color: var(--bad) !important; }
.practice .seg { flex: 1; }
details.guide summary { cursor: pointer; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; list-style: none; }
details.guide summary::-webkit-details-marker { display: none; }
details.guide summary::before { content: '▸'; color: var(--muted); transition: transform .15s; } details.guide[open] summary::before { transform: rotate(90deg); }
details.guide[open] summary { margin-bottom: 12px; }
.card.focus { box-shadow: 0 0 0 3px var(--gold), var(--shadow); }
@media (max-width: 600px) {
  .topbar { margin: -20px -20px 16px; padding: 10px 14px; gap: 10px; } .who-info { min-width: 100px; }
  .hero { padding: 22px; } .lessons { grid-template-columns: 1fr 1fr; } .tap-sentence { font-size: 1.15em; }
  .kid-picks { grid-template-columns: 1fr 1fr; }
}
.day-labels.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.kid-card .stat-row.small { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kid-card .stat-row.small > div { min-width: 0; }
@media (max-width: 600px) { .app-grid, .quick { grid-template-columns: 1fr 1fr; gap: 10px; } .app-tile, .q-tile { min-height: 112px; } }

/* ---------- v1.1: tiles with progress ---------- */
.app-tile .bar { margin-top: 10px; } .app-tile .pct { font-size: .72em; margin-top: 3px; }
.q-tile.locked { opacity: .6; }
.q-tile.surprise { background: linear-gradient(135deg, #fff, #f3ecff); }
.avatar-btn { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 50%; }
.avatar-btn:hover .avatar { transform: scale(1.06); } .avatar { transition: transform .15s; }

/* ---------- Arcade ---------- */
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.game-card { border: 0; border-radius: var(--radius); padding: 20px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 4px; color: #fff; font: inherit; min-height: 170px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--gc) 85%, #fff), color-mix(in srgb, var(--gc) 85%, #000)); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.game-card:hover { transform: translateY(-4px) rotate(-.5deg); box-shadow: var(--shadow-lg); }
.game-card .gi { font-size: 40px; line-height: 1; margin-bottom: 8px; } .game-card b { font-size: 1.15em; } .game-card small { opacity: .9; }
.game-card .gbest { margin-top: auto; font-size: .78em; background: rgba(255, 255, 255, .22); border-radius: 999px; padding: 3px 10px; align-self: flex-start; }
.game-card.locked { filter: grayscale(.7); opacity: .6; }
.game-top .gscore { font-weight: 700; white-space: nowrap; } .gbar { transition: width 1s linear; background: linear-gradient(90deg, #ff9f0a, #ffcc33) !important; }
.practice.wide { max-width: 1000px; }
.choices.grid2c { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.choices.grid2c .choice { min-height: 64px; white-space: normal; font-size: 1.1em; }
.match-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mcard { min-height: 110px; border: 0; border-radius: 16px; background: linear-gradient(150deg, #8a5cf5, #5e4bd8); color: #fff; font: 600 1.6em var(--sans); cursor: pointer; padding: 10px; box-shadow: var(--shadow); transition: transform .2s, background .2s; }
.mcard:hover { transform: translateY(-2px); }
.mcard.open, .mcard.found { background: var(--surface); color: var(--ink); font-size: .95em; font-weight: 500; }
.mcard.open.a, .mcard.found.a { background: var(--accent-soft); font-weight: 700; }
.mcard.found { box-shadow: inset 0 0 0 3px var(--good); opacity: .75; cursor: default; }
.sky-box { position: relative; height: 380px; overflow: hidden; border-radius: var(--radius); background: linear-gradient(180deg, #cfe8ff, #fef6e4); box-shadow: var(--shadow); }
.balloon { position: absolute; bottom: -140px; width: 21%; min-height: 96px; border: 0; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.55), transparent 32%), var(--bc); color: #fff;
  font: 700 1.05em var(--sans); padding: 14px 8px; cursor: pointer; animation: rise linear forwards; text-shadow: 0 1px 2px rgba(0,0,0,.25); white-space: normal; }
.balloon::after { content: ''; position: absolute; left: 50%; bottom: -26px; width: 1px; height: 26px; background: rgba(0,0,0,.25); }
.balloon.pop { animation: pop .3s forwards; } .balloon.wrong { filter: grayscale(1); opacity: .5; }
@keyframes rise { to { transform: translateY(-560px); } } @keyframes pop { to { transform: scale(1.6); opacity: 0; } }

/* ---------- Maps ---------- */
.map-wrap { margin: 12px 0; background: #dbeefe; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.map-svg { display: block; width: 100%; height: auto; max-height: 64vh; touch-action: manipulation; }
.map-svg .sea { fill: #dbeefe; }
.map-svg .pl { fill: #f1ece0; stroke: #fff; stroke-width: .6; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .15s; }
.map-svg .pl.tg { fill: #e4dccb; } .map-svg .pl:hover { fill: #ffe7a3; }
.map-svg .pl.sel { fill: #ffd43b !important; } .map-svg .pl.found { fill: #b2f2bb; }
.map-svg .pl.right { fill: #40c057 !important; } .map-svg .pl.show { fill: #4dabf7 !important; } .map-svg .pl.wrong { fill: #ff8787 !important; }
.map-svg .marks { pointer-events: none; }
.map-svg .hint-ring { fill: rgba(255, 212, 59, .18); stroke: #f59f00; stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.map-svg .map-label { font-family: var(--sans); font-weight: 700; fill: #1d1d1f; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 3px; vector-effect: non-scaling-stroke; pointer-events: none; }
.map-info { min-height: 44px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.1em; }

/* ---------- Treasury ---------- */
.treasury-head { padding: 20px 24px; }
.wallet-card { padding: 30px; } .coin { font-size: 52px; line-height: 1; } .wallet-big { font-size: clamp(2.6em, 8vw, 4em); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; }
.earn-row { display: grid; grid-template-columns: 170px 1fr 70px; gap: 12px; align-items: center; margin: 8px 0; }
.earn-bar { height: 10px; background: var(--fill); border-radius: 6px; overflow: hidden; } .earn-bar i { display: block; height: 100%; border-radius: 6px; } .earn-row b { text-align: right; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.badge { background: var(--surface-2); border-radius: 16px; padding: 14px; display: grid; gap: 3px; justify-items: start; filter: grayscale(.9); opacity: .75; }
.badge.done { filter: none; opacity: 1; background: linear-gradient(150deg, #fff, var(--gold-soft)); box-shadow: inset 0 0 0 2px #ffd43b; }
.badge .bi { font-size: 34px; } .badge small { color: var(--muted); font-size: .78em; }
.bbar { width: 100%; height: 6px; background: var(--fill); border-radius: 4px; overflow: hidden; margin-top: 4px; } .bbar i { display: block; height: 100%; background: var(--gold); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.shop-item { background: var(--surface-2); border-radius: 16px; padding: 16px; display: grid; gap: 6px; justify-items: center; text-align: center; } .shop-item .si { font-size: 40px; }
.req-list { list-style: none; padding: 0; margin: 0; } .req-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid var(--line); }
.req-list li .row { margin-left: auto; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.emoji-pick { height: 56px; border: 0; border-radius: 50%; background: var(--surface-2); font-size: 28px; cursor: pointer; transition: transform .15s; }
.emoji-pick:first-child { background: linear-gradient(145deg, color-mix(in srgb, var(--kc) 72%, #fff), var(--kc)); color: #fff; font: 700 1.3em var(--sans); }
.emoji-pick:hover { transform: scale(1.1); } .emoji-pick.on { box-shadow: 0 0 0 3px var(--accent); }
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.theme-pick { height: 90px; border: 0; border-radius: 16px; cursor: pointer; display: flex; align-items: flex-end; padding: 10px; font: 600 .9em var(--sans); color: var(--ink); }
.theme-pick.on { box-shadow: 0 0 0 3px var(--accent); }
.reward-rows { display: grid; gap: 8px; margin: 12px 0; }
.reward-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .reward-row .r-emoji { width: 56px; text-align: center; font-size: 1.2em; } .reward-row .r-name { flex: 1; min-width: 180px; } .reward-row .r-cost { width: 100px; }
.requests { box-shadow: 0 0 0 2px #ffd43b, var(--shadow); }
@media (max-width: 600px) {
  .match-grid { grid-template-columns: repeat(3, 1fr); } .mcard { min-height: 90px; font-size: 1.3em; }
  .choices.grid2c { grid-template-columns: 1fr; } .earn-row { grid-template-columns: 120px 1fr 56px; } .sky-box { height: 340px; } .balloon { font-size: .9em; }
}

/* ---------- v1.2: Reset ---------- */
.reset-wrap { position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, #d9f2e6, #dbe9ff 55%, #efe3ff); opacity: 0; transition: opacity .25s; }
.reset-wrap.open { opacity: 1; }
.reset { text-align: center; max-width: 520px; width: 100%; font-family: var(--sans); color: #1d3b33; }
.reset-top { font-size: 1.15em; font-weight: 600; margin-bottom: 20px; }
.reset-orb { position: relative; width: 240px; height: 240px; margin: 0 auto; display: grid; place-items: center; }
.reset-ring { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff, #9fe3c2 45%, #5fbf98); box-shadow: 0 20px 60px rgba(63, 155, 116, .35); transform: scale(.55); transition: transform 4s ease-in-out; }
.reset-orb.in .reset-ring { transform: scale(1); transition-duration: 4s; }
.reset-orb.out .reset-ring { transform: scale(.55); transition-duration: 6s; }
.reset-orb.done .reset-ring { transform: scale(.85); background: radial-gradient(circle at 35% 30%, #fff, #ffe08a 50%, #f6b94a); }
.reset-word { position: relative; font-size: 1.5em; font-weight: 700; }
.reset-count { font-size: 2.2em; font-weight: 800; margin: 18px 0 4px; font-variant-numeric: tabular-nums; }
.reset-verse { font-family: var(--serif); font-style: italic; color: #2f5a4d; } .reset-verse span { display: block; font-style: normal; font-size: .8em; font-family: var(--sans); }

/* ---------- Checklist & team goal ---------- */
.checklist { padding: 22px 24px; } .checklist.all-done { background: linear-gradient(150deg, #fff, #e3f6e8); }
.ck-bar, .team-bar { height: 8px; background: var(--fill); border-radius: 6px; overflow: hidden; margin: 12px 0 10px; } .ck-bar i { display: block; height: 100%; background: var(--good); border-radius: 6px; transition: width .4s; }
.team-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff9f0a, #ffcc33); border-radius: 6px; } .team-bar.big { height: 14px; }
.ck-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.ck { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; background: var(--surface-2); border-radius: 14px; padding: 10px 14px; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ck:hover { background: #ebebf0; } .ck.done { background: var(--good-bg); } .ck.done .ck-text { text-decoration: line-through; color: var(--muted); }
.ck-box { width: 26px; height: 26px; border-radius: 8px; border: 2px solid #c7c7cc; display: grid; place-items: center; font-weight: 800; color: #fff; flex: none; }
.ck.done .ck-box { background: var(--good); border-color: var(--good); }
.ck-text { flex: 1; } .ck-text small { display: block; color: var(--muted); font-size: .8em; text-decoration: none; }
.ck-prog { font-size: .85em; color: var(--accent-ink); font-weight: 600; white-space: nowrap; }
.team { padding: 20px 24px; } .team-faces { display: flex; gap: 10px; } .team-face { display: grid; justify-items: center; font-size: .8em; }
.team-face .avatar { width: 34px; height: 34px; font-size: .9em; }

/* ---------- Teacher: plans, help ---------- */
.plan-rows { display: grid; gap: 10px; margin-bottom: 12px; }
.plan-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--surface-2); border-radius: 14px; padding: 10px; }
.plan-row select, .plan-row input { min-height: 38px; padding: 6px 10px; } .plan-row input[type=number] { width: 72px; } .plan-row .note { flex: 1; min-width: 180px; }
.plan-row label.inline { display: inline-flex; align-items: center; gap: 6px; font-size: .9em; }
.day-toggles { display: inline-flex; gap: 3px; } .day { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--fill); font: 600 .78em var(--sans); cursor: pointer; } .day.on { background: var(--accent); color: #fff; }
.copy-to { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.help-card { box-shadow: 0 0 0 2px #8a5cf5, var(--shadow); }

/* ---------- Whiteboard, mic, checked work ---------- */
.modal.wb-modal { max-width: 980px; padding: 18px; }
.wb-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.wb-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.wb-colors { display: flex; gap: 6px; } .wb-color { width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; } .wb-color.on { box-shadow: 0 0 0 3px var(--accent); }
.wb-grid { margin: 0; }
.wb-board { position: relative; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: #fff; }
.wb-board canvas { display: block; width: 100%; touch-action: none; cursor: crosshair; }
.wb-text { position: absolute; font: 600 22px var(--sans); padding: 4px 8px; min-height: 0; width: 260px; border: 2px dashed var(--accent); background: rgba(255,255,255,.9); }
.wb-result { margin: 12px 0; }
.icon-btn.mic.listening { background: var(--bad); color: #fff; animation: pulse 1s infinite; } @keyframes pulse { 50% { transform: scale(1.1); } }
.work-result { border-radius: 16px; padding: 14px 16px; background: var(--surface-2); }
.work-result.correct { background: var(--good-bg); } .work-result.mistake { background: #fff6e5; }
.wr-head { display: flex; align-items: center; gap: 10px; font-size: 1.15em; margin-bottom: 6px; } .wr-icon { font-size: 1.6em; }
.wr-lines { margin: 6px 0; padding-left: 1.2em; } .wr-lines li { margin: 4px 0; } .wr-lines li.no { color: var(--bad); font-weight: 600; } .wr-lines li.ok span { color: var(--good); } .wr-lines i { color: var(--ink-2); font-weight: 400; }
.snap-mode { margin: 10px 0 4px; }

/* ---------- v1.2.2: photo pictures and background colors ---------- */
.avatar { overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.emoji-pick { background: color-mix(in srgb, var(--kc, #8e8e93) 22%, #fff); overflow: hidden; padding: 0; }
.emoji-pick.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.color-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.color-pick { width: 40px; height: 40px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: transform .15s; }
.color-pick:hover { transform: scale(1.1); } .color-pick.on { box-shadow: 0 0 0 3px var(--accent); }
.me-preview { width: 88px; height: 88px; font-size: 2.2em; }

/* ---------- Logo ---------- */
.logo { border-radius: 22%; box-shadow: 0 3px 10px rgba(23, 35, 58, .22); display: block; flex: none; }
.wordmark { font: 700 1.5em Georgia, 'Iowan Old Style', serif; letter-spacing: -.02em; color: #17233a; } .wordmark b { color: #b9862a; font-weight: inherit; }
.auth-brand { font: inherit; } .auth-brand .wordmark { font-size: 1.7em; }
.tb-logo { background: none; border: 0; padding: 0; cursor: pointer; border-radius: 22%; } .tb-logo:hover .logo { transform: scale(1.05); } .tb-logo .logo { transition: transform .15s; }
.setup-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.t-brand { display: flex; align-items: center; gap: 14px; } .t-brand img { border-radius: 22%; box-shadow: 0 3px 10px rgba(23, 35, 58, .22); }
.boot-logo { width: 72px; height: 72px; border-radius: 22%; margin: 0 auto 16px; display: block; box-shadow: 0 4px 14px rgba(23, 35, 58, .25); }
@media (max-width: 600px) { .tb-logo .logo { width: 32px; height: 32px; } }

/* ---------- 1.4: Who's learning page, settings menu, tour, owner page ---------- */
.pick { padding-top: 2vh; min-height: calc(100vh - 70px); }
.pick-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3vh; gap: 12px; }
.pick-date { color: var(--muted); font-size: .92em; font-weight: 500; }
.pill-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 0; border-radius: 980px; padding: 9px 16px; box-shadow: var(--shadow); font: 500 .95em var(--sans); color: var(--ink); cursor: pointer; }
.pill-btn:hover, .pill-btn:focus-visible { box-shadow: var(--shadow-lg); outline: none; }
.pick-verse { color: var(--muted); font: italic 500 1.02em var(--serif); margin: 34px auto 0; max-width: 520px; }
.pick-verse span { display: block; font: 600 .78em var(--sans); letter-spacing: .04em; text-transform: uppercase; margin-top: 4px; font-style: normal; }
.pick-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 18px 16px 26px; font-size: .82em; color: var(--muted); }
.pick-foot a, .pick-foot .link { color: var(--muted); text-decoration: none; font-size: 1em; }
.pick-foot a:hover, .pick-foot .link:hover { color: var(--ink); text-decoration: underline; }
.seg label { position: relative; cursor: pointer; }
.seg label input { position: absolute; opacity: 0; pointer-events: none; }
.seg label span { display: block; padding: 8px 14px; border-radius: 9px; font: 500 .9em var(--sans); white-space: nowrap; color: var(--ink); }
.seg label input:checked + span { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.seg label input:focus-visible + span { outline: 2px solid var(--accent); }
.seg.wide { display: flex; } .seg.wide label { flex: 1; text-align: center; }
form .seg { margin-bottom: 12px; flex-wrap: wrap; }
.menu-modal { max-width: 440px; }
.menu-head { display: flex; justify-content: space-between; align-items: center; } .menu-head h2 { margin: 0; }
.menu-sheet h4 { margin: 18px 0 8px; }
.menu-list { display: grid; gap: 2px; background: var(--surface-2); border-radius: var(--radius-sm); overflow: hidden; }
.menu-item { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left; background: var(--surface); border: 0; padding: 11px 14px; cursor: pointer; color: var(--ink); text-decoration: none; font: 400 1em var(--sans); }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); outline: none; }
.menu-item span { grid-row: span 2; font-size: 1.25em; text-align: center; } .menu-item b { font-weight: 600; } .menu-item small { color: var(--muted); font-size: .82em; }
.check.consent { align-items: flex-start; font-size: .92em; margin: 6px 0 4px; }
.notice.advice { background: var(--accent-soft); color: var(--ink); margin-bottom: 12px; }
.tour-dim { position: fixed; inset: 0; background: rgba(0, 0, 0, .28); z-index: 950; }
.tour-on { position: relative; z-index: 951; box-shadow: 0 0 0 4px var(--accent), 0 0 0 9999px rgba(0, 0, 0, 0) !important; border-radius: 12px; background: var(--surface) !important; }
.tour-tip { position: fixed; z-index: 960; background: var(--surface); color: var(--ink); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-lg); }
.tour-tip h3 { margin: 0 0 4px; } .tour-tip p { font-size: .95em; }
.owner-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.owner-status div { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 14px; display: grid; gap: 2px; font-size: .92em; }
.owner-table { margin-top: 14px; } .owner-table td { vertical-align: top; } .owner-table pre { white-space: pre-wrap; max-width: 520px; }
input.mini { width: 74px; padding: 6px 8px; }
.fb-row { border-top: 1px solid var(--line); padding: 12px 0; } .fb-row.done { opacity: .55; } .fb-row p { margin: 4px 0; }
html.calm *, html.calm *::before, html.calm *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
@media (max-width: 600px) { .pick-top { margin-bottom: 2vh; } .pick-date { font-size: .82em; } }

/* ---------- Dark mode (Settings → Appearance) ---------- */
html[data-theme="dark"] {
  --bg: #111318; --surface: #1c1f26; --surface-2: #252932; --fill: #2e333d; --ink: #f2f2f5; --ink-2: #c9cbd2; --muted: #9a9ea8; --faint: #7d818b; --line: rgba(255, 255, 255, .1);
  --navy: #f2f2f5; --accent: #4c9dff; --accent-ink: #7db6ff; --accent-soft: #1d2d45; --blue: #4c9dff;
  --gold: #f0b93a; --gold-soft: #3a3020; --good: #4cc77f; --good-bg: #183324; --bad: #ff6b60; --bad-bg: #3d1f1d; --warn: #ffb547; --warn-bg: #3a2c16;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 24px rgba(0, 0, 0, .35); --shadow-lg: 0 2px 6px rgba(0, 0, 0, .5), 0 20px 50px rgba(0, 0, 0, .55);
  color-scheme: dark;
}
html[data-theme="dark"] #sky i { opacity: .16; }
html[data-theme="dark"] .modal-wrap { background: rgba(0, 0, 0, .6); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .logo { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
html[data-theme="dark"] .topbar { background: rgba(22, 24, 30, .82); }
html[data-theme="dark"] .q-tile.surprise { background: linear-gradient(135deg, #252932, #2c2540); }
html[data-theme="dark"] .btn.google { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] .hint { background: #1d2a3d; } html[data-theme="dark"] .hint.lv2 { background: #272240; } html[data-theme="dark"] .hint.lv3, html[data-theme="dark"] .scaffold { background: #3a301c; }
html[data-theme="dark"] .try-one { background: #272240; } html[data-theme="dark"] .lesson-tile.next { background: var(--surface); }
html[data-theme="dark"] .badge.done { background: linear-gradient(150deg, var(--surface-2), var(--gold-soft)); }
html[data-theme="dark"] .work-result.mistake { background: var(--warn-bg); } html[data-theme="dark"] .btn.danger:hover { background: #4d2422; }
html[data-theme="dark"] .bm-seg { fill: #1d2d45; } html[data-theme="dark"] .bm-seg.alt { fill: #3a2a1c; }
.pick-foot { align-items: baseline; } .pick-foot .link { padding: 0; min-height: 0; font-family: inherit; }

/* ---------- 1.5: math pictures (grades 1–9 library) ---------- */
.prompt .pic-row { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: center; margin: 10px 0; font-size: 1.6em; line-height: 1.2; }
.prompt .pic-big { font-size: 1.8em; }
.prompt .pic { display: block; margin: 10px auto; max-width: 100%; }
.prompt svg { max-width: min(100%, 360px); height: auto; display: block; margin: 10px auto; color: var(--ink); }
.prompt svg.clock { width: 170px; }
html[data-theme="dark"] .prompt svg [fill="#fff"], html[data-theme="dark"] .prompt svg [fill="white"] { fill: #e9e9ee; }
.draw-stage { position: relative; width: 100%; max-height: 70vh; margin-top: 12px; background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; touch-action: none; }
.draw-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.draw-overlay { position: absolute; inset: 0; pointer-events: none; }
.draw-real { width: 100%; height: 100%; }
.draw-real path { fill: none; stroke: #9aa4b2; stroke-width: 0.6; vector-effect: non-scaling-stroke; }
.draw-real path.on { fill: rgba(42, 138, 158, .18); stroke: #2a8a9e; stroke-width: 1.4; }

/* ---------- 1.5: offline ---------- */
#net-pill { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 990; background: #1d1d1f; color: #fff; border-radius: 980px; padding: 6px 14px 6px 12px; font: 600 .82em var(--sans); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 8px; cursor: help; }
#net-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: #ff9f0a; }
#net-pill.back { background: var(--good); }
html[data-theme="dark"] #net-pill { background: #f2f2f5; color: #111318; }
body.offline [data-needs-net] { opacity: .45; filter: grayscale(.6); }
body.offline [data-needs-net]::after { content: 'Needs internet'; display: block; font-size: .7em; color: var(--muted); font-weight: 500; }
button.pick-verse { display: block; background: none; border: 0; cursor: pointer; text-align: center; padding: 8px 12px; border-radius: 14px; }
button.pick-verse:hover { background: rgba(127, 127, 127, .08); }
button.pick-verse q { quotes: '“' '”'; }
button.pick-verse q:empty::before, button.pick-verse q:empty::after { content: ''; }

/* ---------- 1.5: Teacher dashboard ---------- */
.viz { --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948; --s-arcade: #52514e; --s-other: #c3c2b7; --grid: #e1e0d9; --axis: #c3c2b7; }
html[data-theme="dark"] .viz { --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9; --s8: #e66767; --s-arcade: #898781; --s-other: #4a4a46; --grid: #2c2c2a; --axis: #383835; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.dash-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.dash-filters select, .dash-filters input[type=date] { min-height: 38px; padding: 6px 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 980px; padding: 6px 12px; font: 500 .9em var(--sans); cursor: pointer; min-height: 36px; }
.chip-btn i { width: 10px; height: 10px; border-radius: 50%; }
.chip-btn.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.kpi { background: var(--surface-2); border-radius: var(--radius-sm); padding: 12px 14px; display: grid; gap: 2px; }
.kpi-l { font-size: .78em; color: var(--muted); font-weight: 600; } .kpi-v { font-size: 1.6em; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .kpi-s { font-size: .76em; color: var(--muted); }
.dash-h { margin: 22px 0 10px; }
.donuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.donut-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.dn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .dn-head .avatar { width: 30px; height: 30px; font-size: .8em; } .dn-head .muted { margin-left: auto; }
.dn-row { display: flex; gap: 14px; align-items: center; }
.donut { width: 128px; flex: none; } .donut path, .donut circle { stroke: var(--surface); stroke-width: 0; } .donut path:hover { opacity: .85; }
.dn-big { font: 700 17px var(--sans); fill: var(--ink); } .dn-small { font: 500 9px var(--sans); fill: var(--muted); }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .84em; flex: 1; min-width: 0; }
.legend li { display: flex; align-items: center; gap: 7px; color: var(--ink-2); } .legend li span { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend.inline { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; } .legend.inline li span { margin-left: 6px; }
.tex { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 2px, transparent 2px 6px) !important; }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--grid); stroke-width: 1; } .chart .base { stroke: var(--axis); stroke-width: 1; } .chart .ax { font: 500 11px var(--sans); fill: var(--muted); }
.chart rect[data-tip]:hover { opacity: .85; }
.dash-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; } @media (max-width: 800px) { .dash-2 { grid-template-columns: 1fr; } }
.heat { max-width: 520px; }
.split { display: grid; gap: 10px; } .split-row { display: grid; grid-template-columns: 70px 1fr; gap: 4px 10px; align-items: center; font-size: .88em; }
.sr-bar { display: flex; gap: 2px; height: 14px; } .sr-bar i { display: block; height: 100%; border-radius: 4px; min-width: 0; } .sr-val { grid-column: 2; color: var(--ink-2); font-size: .9em; }
.meter { display: inline-block; width: 80px; height: 8px; background: var(--fill); border-radius: 4px; overflow: hidden; vertical-align: middle; } .meter i { display: block; height: 100%; background: var(--s8); border-radius: 4px; }
.help-rank td, .compare td { font-variant-numeric: tabular-nums; } .compare th:first-child { text-align: left; }
.dash-tip { position: fixed; z-index: 980; pointer-events: none; background: var(--ink); color: var(--surface); padding: 6px 10px; border-radius: 8px; font: 500 .8em var(--sans); max-width: 300px; box-shadow: var(--shadow); }
.card.inset { box-shadow: none; border: 1px solid var(--line); margin: 10px 0; padding: 14px 16px; }

/* ---------- 1.5.1: kids' suggestion box ---------- */
.kfb-modal { max-width: 520px; }
.kfb-kinds { display: grid; gap: 10px; margin: 14px 0; }
.kfb-kind { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; border: 2px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 18px; padding: 12px 14px; cursor: pointer; font: inherit; }
.kfb-kind span { grid-row: span 2; font-size: 2em; text-align: center; } .kfb-kind b { font-size: 1.1em; } .kfb-kind small { color: var(--muted); }
@media (hover: hover) { .kfb-kind:hover { border-color: var(--accent); } }
.kfb-kind:focus:not(:focus-visible) { outline: none; }
.kfb-kind.on { border-color: var(--accent); background: var(--accent-soft); }
.kfb textarea { font-size: 1.05em; }

/* ---------- 1.6: demo ---------- */
body.demo [data-nodemo] { display: none !important; }
body.demo { padding-bottom: 64px; }
#demo-bar { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 970; width: min(760px, calc(100% - 24px)); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  background: #1d1d1f; color: #fff; border-radius: 18px; padding: 10px 12px 10px 16px; box-shadow: var(--shadow-lg); font-size: .9em; }
#demo-bar .btn { min-height: 34px; } #demo-bar .btn:not(.primary) { background: rgba(255, 255, 255, .16); color: #fff; }
html[data-theme="dark"] #demo-bar { background: #f2f2f5; color: #111318; } html[data-theme="dark"] #demo-bar .btn:not(.primary) { background: rgba(0, 0, 0, .08); color: #111318; }
.wide-card { max-width: 640px; }
.demo-kids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 8px; }
.demo-kids .kid-pick { padding: 22px 10px 16px; } .demo-kids .kid-pick b { font-size: 1.15em; }
.teacher-pick.big { width: 100%; justify-content: center; padding: 14px 20px; font-size: 1.05em; }
.spinner.small { width: 18px; height: 18px; border-width: 2px; margin: 0 0 0 8px; display: inline-block; vertical-align: middle; }
@media (max-width: 520px) { .demo-kids { grid-template-columns: 1fr; } }
.auth.demo-pick { max-width: 680px; }