:root {
  --navy: #0a3048;
  --navy-deep: #07283c;
  --blue: #2786c2;
  --blue-dark: #116aa3;
  --green: #2aa479;
  --green-dark: #218d69;
  --sky: #eef7fc;
  --sky-2: #d9edf8;
  --ink: #102d3d;
  --muted: #58717f;
  --line: #c9dbe5;
  --white: #fff;
  --danger: #b4554c;
  --shadow: 0 24px 70px rgba(10, 48, 72, 0.15);
  --small-shadow: 0 12px 26px rgba(10, 48, 72, 0.14);
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  background: #f3f9fc;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  min-width: 320px;
  background:
    radial-gradient(circle at 93% 11%, rgba(39, 134, 194, 0.12) 0 9rem, transparent 9.1rem),
    radial-gradient(circle at 2% 90%, rgba(42, 164, 121, 0.08) 0 11rem, transparent 11.1rem),
    linear-gradient(135deg, #f9fcfe 0%, #eaf5fb 100%);
}

button, input, select { font: inherit; }
button, select { cursor: pointer; }
button { -webkit-tap-highlight-color: transparent; }

button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 4px solid rgba(39, 134, 194, 0.28);
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.app-shell { min-height: 100vh; padding: max(0.75rem, env(safe-area-inset-top)) 4vw max(1.2rem, env(safe-area-inset-bottom)); }

.app-header {
  min-height: 5.4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 92rem;
  margin: 0 auto;
}

.brand {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.brand-logo {
  width: 3.9rem;
  height: 3.9rem;
  flex: 0 0 3.9rem;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 1.05rem;
  box-shadow: var(--small-shadow);
  padding: 0.5rem;
}

.brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-copy strong { color: var(--navy); font-size: 1.08rem; letter-spacing: 0.12em; white-space: nowrap; }
.brand-copy span { color: var(--muted); font-size: 0.94rem; font-weight: 650; margin-top: 0.42rem; }

.header-tools { display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem; }
.header-button, .language-control {
  height: 3.35rem;
  border-radius: 1rem;
  border: 2px solid #c7e0ee;
  background: rgba(255,255,255,0.94);
  color: var(--blue-dark);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0 1rem;
  font-weight: 800;
  box-shadow: 0 5px 16px rgba(10, 48, 72, 0.04);
}

.header-button svg, .language-control svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.speaker-icon { width: 1.35rem; height: 1.35rem; position: relative; display: inline-block; }
.speaker-icon::before { content: ""; position: absolute; left: 0; top: 0.38rem; width: 0.42rem; height: 0.6rem; background: currentColor; border-radius: 0.08rem; }
.speaker-icon::after { content: ""; position: absolute; left: 0.35rem; top: 0.2rem; width: 0.78rem; height: 0.95rem; border: 0.18rem solid currentColor; border-left: 0; border-radius: 0 1rem 1rem 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 68%, 45% 50%, 0 32%); }
.language-control select { border: 0; background: transparent; color: var(--navy); font-weight: 800; min-width: 7.2rem; outline: 0; }
.adult-button { color: var(--navy); }
.settings-button { color: var(--blue-dark); }

#screenRoot { max-width: 92rem; margin: 0 auto; }

.stage {
  min-height: calc(100vh - 7.6rem);
  display: grid;
  grid-template-columns: minmax(21rem, 35%) minmax(0, 65%);
  border-radius: 2.35rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(181, 215, 232, 0.85);
  box-shadow: var(--shadow);
}

.stage.no-panel { grid-template-columns: 1fr; }

.adult-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 3.75rem);
  color: #fff;
  background:
    radial-gradient(circle at 90% 4%, rgba(255,255,255,0.08) 0 9rem, transparent 9.1rem),
    radial-gradient(circle at 10% 94%, rgba(39,134,194,0.25) 0 11rem, transparent 11.1rem),
    linear-gradient(150deg, #0d405c 0%, var(--navy-deep) 100%);
}

.panel-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  min-height: 2.75rem;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 0.9rem;
  background: rgba(255,255,255,0.11);
  color: #e8f6fc;
  padding: 0 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 750;
}

.panel-close b { font-size: 1.65rem; font-weight: 400; line-height: 1; }
.eyebrow { margin: 0 0 1rem; color: var(--blue-dark); font-size: 1rem; font-weight: 900; letter-spacing: 0.11em; text-transform: uppercase; }
.adult-panel .eyebrow { color: #87e0be; padding-right: 7rem; }
.adult-panel h1, .adult-panel h2 { margin: 0; font-size: clamp(2rem, 3.2vw, 2.65rem); line-height: 1.14; letter-spacing: -0.035em; }
.adult-panel > p { color: #cbe6f4; font-size: 1.08rem; line-height: 1.55; font-weight: 580; }
.audience-tag { display: inline-flex; padding: 0.55rem 0.9rem; border-radius: 99rem; background: rgba(128,216,182,0.16); color: #a7ead1; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.06em; }
.panel-visual { min-height: 15rem; display: grid; place-items: center; }
.panel-note { margin-top: auto; padding: 1.1rem 1.25rem; border-radius: 1.25rem; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.09); color: #d2eaf5; font-size: 0.95rem; line-height: 1.45; font-weight: 650; }
.adult-panel { display: flex; flex-direction: column; }

.content-panel { padding: clamp(2rem, 5vw, 5rem); min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.content-panel h1 { margin: 0; color: var(--navy); font-size: clamp(2.75rem, 5vw, 4.3rem); line-height: 1.02; letter-spacing: -0.045em; }
.intro { margin: 1.1rem 0 2.3rem; color: var(--muted); font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.5; font-weight: 560; max-width: 42rem; }

.signin-form { max-width: 43rem; }
.field { margin-bottom: 1.25rem; }
.field-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.55rem; }
.field label { color: var(--navy); font-size: 1.04rem; font-weight: 850; }
.listen-label { border: 0; background: transparent; color: var(--blue-dark); font-weight: 800; padding: 0.25rem; display: inline-flex; align-items: center; gap: 0.45rem; }
.listen-label .speaker-icon { width: 1.05rem; height: 1.05rem; }
.text-input-wrap { min-height: 4.45rem; border: 2px solid var(--line); border-radius: 1.1rem; background: #fbfdfe; display: flex; align-items: center; padding: 0 1.2rem; gap: 0.9rem; }
.text-input-wrap:focus-within { border-color: var(--blue); box-shadow: 0 0 0 5px rgba(39,134,194,0.11); background: #fff; }
.text-input-wrap svg { width: 1.55rem; height: 1.55rem; color: #6f8c9b; fill: none; stroke: currentColor; stroke-width: 1.8; }
.text-input-wrap input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--navy); font-size: 1.2rem; font-weight: 650; }
.password-toggle { border: 0; background: transparent; color: var(--blue-dark); padding: 0.55rem; font-weight: 800; }
.form-error { min-height: 1.6rem; margin: 0.3rem 0 0.7rem; color: var(--danger); font-weight: 750; }

.button {
  min-height: 4.65rem;
  border: 0;
  border-radius: 1.18rem;
  padding: 0 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-weight: 900;
  font-size: 1.3rem;
  text-decoration: none;
}

.button.primary { background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%); color: #fff; box-shadow: 0 14px 28px rgba(39,134,194,0.23); }
.button.success { background: linear-gradient(135deg, #35b789 0%, #218d69 100%); color: #fff; }
.button.secondary { background: #fff; color: var(--blue-dark); border: 2px solid #acd4e9; }
.button.quiet { background: #eef5f8; color: var(--navy); }
.button.full { width: 100%; }
.button:active, .answer-card:active, .audio-card:active { transform: translateY(1px); }

.signin-help { margin-top: 1.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--muted); font-weight: 650; }
.link-button { border: 0; background: transparent; color: var(--blue-dark); font-weight: 850; padding: 0.4rem; text-decoration: underline; text-underline-offset: 0.2rem; }

.number-path { width: min(100%, 25rem); position: relative; height: 15rem; }
.number-path::before { content: ""; position: absolute; left: 12%; right: 10%; top: 49%; height: 0.55rem; border-top: 0.55rem dotted #65b6df; transform: rotate(-5deg); opacity: 0.72; }
.number-tile { position: absolute; width: 5.2rem; aspect-ratio: 1; border-radius: 1.45rem; display: grid; place-items: center; background: #fff; color: var(--navy); font-size: 2rem; font-weight: 950; box-shadow: 0 14px 28px rgba(0,0,0,0.2); }
.number-tile:nth-child(1) { left: 3%; top: 34%; transform: rotate(-5deg); }
.number-tile:nth-child(2) { left: 39%; top: 58%; background: #cfeeff; transform: rotate(4deg); }
.number-tile:nth-child(3) { right: 2%; top: 19%; background: #dbf7ea; transform: rotate(-4deg); }

.audio-card {
  width: 100%;
  min-height: 9.2rem;
  border-radius: 1.75rem;
  border: 2px solid #c5e0ef;
  background: var(--sky);
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.4rem 2rem;
  text-align: left;
}

.audio-disc { width: 5.7rem; height: 5.7rem; flex: 0 0 5.7rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue), var(--blue-dark)); color: #fff; box-shadow: var(--small-shadow); }
.audio-disc .speaker-icon { width: 2.6rem; height: 2.6rem; }
.audio-disc .speaker-icon::before { width: 0.8rem; height: 1.2rem; top: 0.72rem; }
.audio-disc .speaker-icon::after { left: 0.62rem; top: 0.25rem; width: 1.6rem; height: 2.1rem; border-width: 0.3rem; }
.audio-copy strong { display: block; font-size: 1.35rem; }
.audio-copy span { display: block; margin-top: 0.45rem; color: var(--muted); font-size: 1rem; font-weight: 650; }
.waveform { margin-left: auto; display: flex; align-items: center; gap: 0.55rem; height: 3.8rem; }
.waveform i { width: 0.42rem; border-radius: 99rem; background: #4ba0d0; height: var(--h, 2rem); }

.response-row { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(12rem,1fr); gap: 1.2rem; margin-top: 2rem; }
.small-help { margin-top: 1.55rem; align-self: flex-start; }
.progress-block { margin-top: auto; padding-top: 2rem; }
.progress-label { color: var(--muted); font-size: 0.96rem; font-weight: 800; display: flex; justify-content: space-between; gap: 1rem; }
.progress-track { height: 0.65rem; margin-top: 0.8rem; border-radius: 99rem; overflow: hidden; background: #dcebf3; }
.progress-fill { height: 100%; width: var(--progress,0%); background: var(--green); border-radius: inherit; transition: width 300ms ease; }

.practice-main { justify-content: flex-start; }
.practice-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.practice-heading h1 { font-size: clamp(2.6rem, 4.5vw, 3.8rem); }
.instruction-button { min-height: 3.3rem; border-radius: 1rem; border: 2px solid #b9daed; background: var(--sky); color: var(--blue-dark); padding: 0 1rem; display: flex; align-items: center; gap: 0.65rem; font-weight: 850; white-space: nowrap; }
.listen-title, .choose-title { color: var(--navy); font-size: 2rem; font-weight: 900; margin: 1.35rem 0 0.8rem; }
.choose-title { text-align: center; margin-top: 1.15rem; }

.answer-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.answer-card {
  aspect-ratio: 1;
  min-width: 0;
  border-radius: 1.75rem;
  border: 3px solid #c9dfe9;
  background: #fff;
  color: var(--navy);
  font-size: clamp(3.2rem, 6vw, 5rem);
  font-weight: 950;
  box-shadow: var(--small-shadow);
  transition: border-color 160ms ease, background 160ms ease, transform 120ms ease;
}
.answer-card:hover { border-color: #86c3e2; }
.answer-card.wrong { border-color: #e2a9a4; background: #fff7f6; animation: nudge 260ms ease; }
.answer-card.correct { border-color: #73c8a8; background: #ecfaf5; }
@keyframes nudge { 30% { transform: translateX(-0.35rem); } 70% { transform: translateX(0.35rem); } }

.inline-feedback { min-height: 3.4rem; margin-top: 1rem; display: flex; align-items: center; gap: 0.8rem; color: var(--muted); font-size: 1.08rem; font-weight: 800; }
.inline-feedback.try { color: #945147; }
.inline-feedback.good { color: var(--green-dark); }
.feedback-icon { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: #eaf8f3; color: var(--green-dark); font-size: 1.35rem; }

.sound-match { margin-top: 1.7rem; min-height: 16rem; border: 2px solid #b4e2d1; border-radius: 1.8rem; background: #eef9f5; display: flex; justify-content: center; align-items: center; gap: 4rem; padding: 2rem; }
.match-number { width: 10rem; aspect-ratio: 1; border-radius: 2.5rem; background: #fff; border: 4px solid #89cfb5; color: var(--navy); display: grid; place-items: center; font-size: 5.6rem; font-weight: 950; position: relative; box-shadow: var(--small-shadow); }
.match-number::after { content: "✓"; position: absolute; right: -1.35rem; bottom: -1.35rem; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 2.4rem; }
.match-dots { width: 5.5rem; border-top: 0.45rem dotted #65b6df; }

.activity-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.activity-progress { display: flex; align-items: center; gap: 0.55rem; }
.activity-progress i { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: #d7e8f0; }
.activity-progress i.done { background: var(--green); }
.activity-progress i.current { background: var(--blue); box-shadow: 0 0 0 4px rgba(39,134,194,0.15); }
.stars { display: inline-flex; align-items: center; gap: 0.25rem; color: #a97800; font-weight: 900; white-space: nowrap; }
.stars svg { width: 1.35rem; height: 1.35rem; }
.stars svg path { fill: currentColor; }

.completion-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 2rem 0; }
.completion-card { border-radius: 1.4rem; border: 2px solid var(--line); background: #fbfdfe; padding: 1.35rem; }
.completion-card h3 { margin: 0 0 1rem; color: var(--navy); }
.number-chips { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.number-chip { width: 3.2rem; height: 3.2rem; border-radius: 0.9rem; display: grid; place-items: center; background: #eaf8f3; color: var(--green-dark); font-size: 1.4rem; font-weight: 900; }
.number-chip.practice { background: #fff4e7; color: #8f5c19; }

.modal { border: 0; padding: 0; background: transparent; max-width: min(92vw, 40rem); width: 100%; }
.modal::backdrop { background: rgba(4, 29, 43, 0.58); backdrop-filter: blur(4px); }
.modal-card { position: relative; border-radius: 1.75rem; background: #fff; color: var(--ink); padding: 2.2rem; box-shadow: var(--shadow); }
.modal-card h2 { margin: 0 0 1rem; color: var(--navy); font-size: 2rem; }
.modal-card p, .modal-card li { color: var(--muted); line-height: 1.55; }
.modal-close { position: absolute; top: 1rem; right: 1rem; width: 2.8rem; height: 2.8rem; border-radius: 0.85rem; border: 0; background: #edf4f7; color: var(--navy); font-size: 1.75rem; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.4rem; }
.modal-actions .button { min-height: 3.5rem; font-size: 1rem; }
.adult-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.adult-stat { border-radius: 1rem; background: var(--sky); padding: 1rem; }
.adult-stat span { display: block; color: var(--muted); font-size: 0.82rem; font-weight: 750; }
.adult-stat strong { display: block; color: var(--navy); margin-top: 0.35rem; font-size: 1.05rem; }
.modal-note { font-size: 0.9rem; }
.settings-intro { margin: 0 0 1.4rem; }
.settings-field { display: grid; gap: 0.55rem; }
.settings-field > span { color: var(--navy); font-weight: 850; }
.settings-field select {
  width: 100%;
  min-height: 3.7rem;
  border: 2px solid var(--line);
  border-radius: 1rem;
  background: #fbfdfe;
  color: var(--navy);
  padding: 0 2.8rem 0 1rem;
  font-size: 1rem;
  font-weight: 700;
}
.settings-field select:focus { border-color: var(--blue); }
.voice-status { min-height: 2.7rem; margin: 0.7rem 0 0; padding: 0.75rem 0.9rem; border-radius: 0.85rem; background: var(--sky); font-size: 0.92rem; font-weight: 650; }
.settings-dialog-card .modal-actions .speaker-icon { width: 1.1rem; height: 1.1rem; }
.toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 20; transform: translate(-50%, 1rem); opacity: 0; pointer-events: none; background: var(--navy); color: #fff; border-radius: 0.9rem; padding: 0.85rem 1.1rem; font-weight: 750; transition: opacity 180ms ease, transform 180ms ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Learning path */
.dashboard-panel { justify-content: flex-start; }
.next-activity-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem;
  padding: 1.45rem;
  border: 2px solid #b7d9ea;
  border-radius: 1.6rem;
  background: linear-gradient(135deg, #f4faff 0%, #edf8f4 100%);
}
.module-number, .path-step {
  display: grid;
  place-items: center;
  border-radius: 1rem;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
}
.module-number { width: 4.2rem; height: 4.2rem; font-size: 1.8rem; }
.next-activity-copy h2 { margin: 0.35rem 0; color: var(--navy); font-size: 1.7rem; }
.next-activity-copy p { margin: 0 0 0.4rem; color: var(--muted); line-height: 1.4; }
.next-activity-copy strong { color: var(--green-dark); }
.status-pill { display: inline-flex; padding: 0.3rem 0.65rem; border-radius: 99rem; background: #dff3eb; color: var(--green-dark); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; }
.module-path-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-top: 1.2rem; }
.module-path-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; border: 1px solid var(--line); border-radius: 1.2rem; padding: 1rem; background: #fff; }
.module-path-card.locked { background: #f5f7f8; color: #71828b; }
.path-step { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
.module-path-card h3 { margin: 0; color: var(--navy); font-size: 1.05rem; }
.module-path-card p { margin: 0.2rem 0; color: var(--muted); font-size: 0.9rem; }
.module-path-card small { color: var(--blue-dark); font-weight: 750; }
.small-action { min-height: 2.65rem; border: 1px solid #a9cfe2; border-radius: 0.8rem; background: #fff; color: var(--blue-dark); padding: 0 0.9rem; font-weight: 850; }
.locked-label { color: var(--muted); font-size: 0.85rem; font-weight: 800; }
.quiet-note { margin: 1rem 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.module-path-visual { display: flex; align-items: center; width: min(100%, 19rem); }
.module-path-visual i { flex: 1; border-top: 0.4rem dotted #65b6df; }
.visual-step { width: 5.2rem; aspect-ratio: 1; border-radius: 1.4rem; display: grid; place-items: center; background: #d8eaf3; color: var(--navy); font-size: 2rem; font-weight: 950; }
.visual-step.current { background: #dff3eb; color: var(--green-dark); }

/* Module 2 response format */
.target-number-card {
  width: min(100%, 12rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 0.4rem auto 0.8rem;
  border: 4px solid #abd3e8;
  border-radius: 2.2rem;
  background: #fff;
  color: var(--navy);
  box-shadow: var(--small-shadow);
  font-size: clamp(4.4rem, 9vw, 7rem);
  font-weight: 950;
}
.choice-instruction { margin: 0.2rem auto 0.8rem; color: var(--muted); text-align: center; font-size: 1rem; line-height: 1.4; font-weight: 700; }
.name-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; }
.name-choice { aspect-ratio: 1; min-width: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 0.45rem; padding: 0.65rem; border: 3px solid #c9dfe9; border-radius: 1.45rem; background: #fff; box-shadow: var(--small-shadow); }
.name-choice.heard { border-color: #82bdda; background: #f4faff; }
.name-choice.wrong { border-color: #e2a9a4; background: #fff7f6; animation: nudge 260ms ease; }
.choice-position { color: var(--muted); font-size: 0.78rem; font-weight: 800; text-align: center; }
.choice-play { min-height: 4.5rem; border: 0; border-radius: 1rem; background: var(--sky); color: var(--blue-dark); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; font-weight: 850; }
.choice-play .speaker-icon { width: 1.8rem; height: 1.8rem; }
.choice-select { width: 3.2rem; height: 3.2rem; margin: 0 auto; border: 0; border-radius: 50%; background: var(--green); color: #fff; font-size: 1.6rem; font-weight: 900; }
.choice-select:disabled { background: #d6e1e6; color: #8ba0aa; cursor: default; }
.instruction-controls { display: flex; gap: 0.65rem; align-items: center; }
.ready-note { align-self: center; color: var(--muted); font-weight: 750; }
.success-text { color: var(--green-dark); }
.feedback-extra { color: var(--muted); font-weight: 700; }

/* Rewards without punitive stopping */
.reward-strip { display: flex; align-items: center; gap: 0.85rem; }
.personal-timer { min-width: 3.5rem; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 850; }
.lives { display: inline-flex; align-items: center; gap: 0.15rem; min-height: 1.6rem; }
.lives svg { width: 1.45rem; height: 1.45rem; }
.lives svg path { fill: #de6f69; stroke: #c5534d; stroke-width: 1.2; }
.lives svg.empty path { fill: #fff; stroke: #b9cbd4; }
.lives.keep-going { color: var(--green-dark); font-size: 0.85rem; font-weight: 900; }
.mini-match { display: flex; align-items: center; gap: 1.25rem; }
.mini-dots { width: 3rem; border-top: 0.4rem dotted #65b6df; }
.small-match { width: 7rem !important; font-size: 4rem !important; border-radius: 1.8rem !important; }

/* Completion and certificates */
.completion-panel { justify-content: flex-start; }
.session-rewards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; margin: 1rem 0 1.2rem; }
.reward-card { min-height: 8.7rem; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 1.2rem; background: #fbfdfe; padding: 1rem; }
.reward-card span { color: var(--muted); font-size: 0.83rem; font-weight: 800; }
.reward-card strong { margin: auto 0 0.25rem; color: var(--navy); font-size: 2.2rem; }
.reward-card strong.reward-text { font-size: 1.25rem; line-height: 1.15; }
.reward-card small { color: var(--muted); line-height: 1.3; }
.certificate-progress { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-radius: 1rem; background: #f7f1dc; color: #71591c; }
.certificate-button { width: 100%; background: linear-gradient(135deg, #c79b2a 0%, #a97d12 100%); color: #fff; }
.completion-actions { display: grid; grid-template-columns: 1.45fr 1fr; gap: 0.9rem; margin-top: 1rem; }
.certificate-seal-visual { width: 13rem; aspect-ratio: 1; border-radius: 50%; border: 0.6rem double #d7ae42; background: #fff9e7; color: #8f6c14; display: grid; place-items: center; align-content: center; text-align: center; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.certificate-seal-visual span, .certificate-seal-visual small { font-size: 0.7rem; font-weight: 900; letter-spacing: 0.12em; }
.certificate-seal-visual strong { font-size: 3.6rem; line-height: 1; }

/* Settings workspace */
#settingsDialog { max-width: min(96vw, 76rem); }
.settings-workspace { max-height: 90vh; overflow: auto; padding: 2rem; }
.settings-tabs { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1.2rem 0; padding-bottom: 0.8rem; border-bottom: 1px solid var(--line); }
.settings-tabs button { min-height: 2.8rem; border: 1px solid var(--line); border-radius: 0.8rem; background: #f3f7f9; color: var(--navy); padding: 0 0.9rem; font-weight: 800; }
.settings-tabs button.active { border-color: var(--blue-dark); background: var(--blue-dark); color: #fff; }
.settings-tab-content { min-height: 24rem; }
.settings-section h3 { margin: 0; color: var(--navy); font-size: 1.45rem; }
.settings-section > p { margin: 0.5rem 0 1rem; }
.setting-toggle { display: flex; gap: 0.8rem; align-items: flex-start; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: #fbfdfe; }
.setting-toggle input { width: 1.35rem; height: 1.35rem; margin-top: 0.15rem; accent-color: var(--blue-dark); }
.setting-toggle span { display: grid; gap: 0.25rem; }
.setting-toggle strong { color: var(--navy); }
.setting-toggle small { color: var(--muted); line-height: 1.4; }
.settings-module-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.settings-module-card { border: 1px solid var(--line); border-radius: 1.2rem; padding: 1.15rem; background: #fff; }
.settings-module-title { display: flex; gap: 0.85rem; align-items: flex-start; }
.settings-module-title > span { width: 2.6rem; height: 2.6rem; flex: 0 0 2.6rem; display: grid; place-items: center; border-radius: 0.8rem; background: var(--navy); color: #fff; font-weight: 900; }
.settings-module-title h4 { margin: 0; color: var(--navy); font-size: 1.1rem; }
.settings-module-title p { margin: 0.25rem 0 0; font-size: 0.9rem; line-height: 1.35; }
.decision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; margin: 1rem 0; }
.decision-grid > div { padding: 0.75rem; border-radius: 0.8rem; background: var(--sky); }
.decision-grid dt { color: var(--muted); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.decision-grid dd { margin: 0.25rem 0 0; color: var(--navy); font-size: 0.9rem; line-height: 1.35; font-weight: 700; }
.settings-module-card details, .bank-detail { margin-top: 0.65rem; border-top: 1px solid var(--line); padding-top: 0.65rem; }
.settings-module-card summary, .bank-detail summary { color: var(--blue-dark); font-weight: 850; cursor: pointer; }
.settings-module-card li { margin-bottom: 0.35rem; }
.compact-button { min-height: 3rem; margin-top: 0.85rem; font-size: 0.95rem; }
.policy-note { padding: 0.9rem 1rem; border-radius: 0.85rem; background: #f7f1dc; color: #71591c !important; font-size: 0.9rem; line-height: 1.45; }
.selection-rules { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; margin-bottom: 1rem; }
.selection-rules div { display: grid; gap: 0.3rem; min-height: 6.5rem; padding: 0.85rem; border-radius: 0.9rem; background: var(--sky); }
.selection-rules strong { color: var(--navy); }
.selection-rules span { color: var(--muted); font-size: 0.85rem; line-height: 1.35; }
.bank-detail { padding: 0.9rem; border: 1px solid var(--line); border-radius: 0.9rem; }
.bank-detail summary { display: flex; justify-content: space-between; gap: 1rem; }
.bank-detail summary b { color: var(--muted); font-size: 0.85rem; }
.bank-overview { display: flex; gap: 1.5rem; }
.bank-overview p { flex: 1; font-size: 0.9rem; }
.bank-table-wrap, .teacher-table-wrap { overflow-x: auto; }
.bank-table, .teacher-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.bank-table th, .bank-table td, .teacher-table th, .teacher-table td { padding: 0.65rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.bank-table th, .teacher-table th { background: var(--navy); color: #fff; }
.record-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-bottom: 1rem; }
.record-levels div { padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: #fbfdfe; }
.record-levels span { display: block; color: var(--blue-dark); font-size: 0.78rem; font-weight: 900; text-transform: uppercase; }
.record-levels strong { display: block; margin: 0.35rem 0; color: var(--navy); }
.record-levels p { margin: 0; font-size: 0.85rem; line-height: 1.4; }
.download-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin: 1rem 0; }
.download-grid .button { min-height: 3.2rem; padding: 0 0.8rem; font-size: 0.9rem; }
.certificate-list { margin-top: 1rem; }
.certificate-list h4 { color: var(--navy); }
.certificate-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.certificate-row div { display: grid; gap: 0.2rem; }
.certificate-row span { color: var(--muted); font-size: 0.85rem; }

/* Printable certificate */
.certificate-modal { max-width: min(94vw, 58rem); }
.certificate-dialog-card { padding: 1.5rem; }
.certificate-sheet { position: relative; min-height: 36rem; overflow: hidden; border: 0.65rem double #c79b2a; border-radius: 0.8rem; background: radial-gradient(circle at 50% 45%, #fff 0%, #fbf8ee 100%); padding: 2.2rem; text-align: center; }
.certificate-brand { display: flex; align-items: center; justify-content: center; gap: 0.8rem; color: var(--navy); font-weight: 900; letter-spacing: 0.14em; }
.certificate-brand img { width: 3.4rem; height: 3.4rem; object-fit: contain; }
.certificate-sheet > p:first-of-type { margin: 2rem 0 0.3rem; color: #8f6c14; font-size: 1.2rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.certificate-sheet h2 { margin: 0; color: var(--navy); font-size: 3rem; }
.certificate-awarded-to { display: block; margin-top: 1.4rem; color: var(--muted); }
.certificate-sheet h3 { margin: 0.25rem 0 1.4rem; color: var(--blue-dark); font-size: 2.3rem; }
.certificate-scope { display: grid; gap: 0.3rem; color: var(--navy); }
.certificate-scope strong { font-size: 1.3rem; }
.certificate-scope span, .certificate-scope small { color: var(--muted); }
.certificate-seal { width: 6rem; height: 6rem; margin: 1.5rem auto 1rem; display: grid; place-items: center; border: 0.35rem double #c79b2a; border-radius: 50%; background: #fff8df; color: #8f6c14; font-size: 2rem; font-weight: 950; }
.certificate-evidence { max-width: 38rem; margin: 0 auto 1rem; color: var(--muted); line-height: 1.5; }
.certificate-sheet time { color: var(--navy); font-weight: 800; }

@media (max-width: 1000px) {
  .app-shell { padding-inline: 1.25rem; }
  .stage { grid-template-columns: minmax(18rem, 38%) minmax(0,62%); }
  .content-panel { padding: 2.5rem; }
  .adult-panel { padding: 2.5rem; }
  .answer-grid { gap: 0.7rem; }
  .answer-card { border-radius: 1.35rem; }
  .header-button-text { display: none; }
  .header-button { width: 3.35rem; justify-content: center; padding: 0; }
}

@media (max-width: 760px) {
  .app-shell { padding: 0.55rem 0.7rem 0.8rem; }
  .app-header { min-height: 4.5rem; }
  .brand-logo { width: 3.1rem; height: 3.1rem; flex-basis: 3.1rem; border-radius: 0.85rem; }
  .brand-copy strong { font-size: 0.87rem; letter-spacing: 0.08em; }
  .brand-copy span { display: none; }
  .language-control { height: 3rem; padding: 0 0.65rem; }
  .language-control svg { display: none; }
  .language-control select { min-width: 5.7rem; max-width: 6.5rem; font-size: 0.92rem; }
  .header-button { height: 3rem; width: 3rem; }
  .adult-button { display: none; }
  .stage, .stage.no-panel { min-height: calc(100vh - 5.8rem); grid-template-columns: 1fr; border-radius: 1.55rem; overflow: visible; }
  .adult-panel { min-height: auto; padding: 1.5rem; border-radius: 1.55rem 1.55rem 0 0; }
  .adult-panel h1, .adult-panel h2 { font-size: 1.75rem; padding-right: 4rem; }
  .adult-panel > p, .adult-panel .audience-tag, .panel-visual, .panel-note { display: none; }
  .panel-close { top: 1rem; right: 1rem; font-size: 0; width: 2.8rem; padding: 0; justify-content: center; }
  .panel-close b { font-size: 1.65rem; }
  .content-panel { min-height: 0; padding: 1.5rem; justify-content: flex-start; }
  .content-panel h1 { font-size: clamp(2.25rem, 12vw, 3.25rem); }
  .intro { margin: 0.8rem 0 1.5rem; font-size: 1.05rem; }
  .signin-help { align-items: flex-start; flex-direction: column; }
  .audio-card { min-height: 7rem; padding: 1rem; gap: 1rem; }
  .audio-disc { width: 4.3rem; height: 4.3rem; flex-basis: 4.3rem; }
  .waveform { display: none; }
  .response-row { grid-template-columns: 1fr; gap: 0.8rem; }
  .button { min-height: 4rem; font-size: 1.08rem; }
  .practice-heading { align-items: center; }
  .practice-heading h1 { font-size: 2rem; }
  .instruction-button { width: 3.3rem; font-size: 0; padding: 0; justify-content: center; }
  .listen-title, .choose-title { font-size: 1.55rem; margin-top: 0.75rem; }
  .answer-grid { width: min(100%, 25rem); margin-inline: auto; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0.85rem; }
  .answer-card { font-size: clamp(3rem, 21vw, 5rem); }
  .progress-block { padding-top: 1.2rem; }
  .sound-match { min-height: 13rem; gap: 1.5rem; }
  .match-number { width: 7.5rem; border-radius: 1.8rem; font-size: 4.4rem; }
  .match-dots { width: 2.5rem; }
  .completion-groups { grid-template-columns: 1fr; }
  .adult-summary { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .brand-copy { display: none; }
  .header-tools { gap: 0.4rem; }
  .language-control select { width: 5.6rem; }
  .content-panel { padding: 1.2rem; }
  .answer-grid { gap: 0.7rem; }
  .answer-card { border-radius: 1.2rem; }
  .sound-match { padding: 1.2rem; }
  .match-number { width: 6.8rem; }
}

@media (max-width: 1000px) {
  .next-activity-card { grid-template-columns: auto minmax(0, 1fr); }
  .next-activity-card .button { grid-column: 1 / -1; }
  .settings-module-list { grid-template-columns: 1fr; }
  .selection-rules { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .dashboard-panel { padding-top: 1.4rem; }
  .next-activity-card { grid-template-columns: auto minmax(0, 1fr); gap: 0.9rem; padding: 1rem; }
  .module-number { width: 3.4rem; height: 3.4rem; }
  .next-activity-copy h2 { font-size: 1.35rem; }
  .module-path-list { grid-template-columns: 1fr; }
  .name-choice-grid { width: min(100%, 26rem); margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .target-number-card { width: 8rem; border-radius: 1.5rem; font-size: 4.6rem; }
  .name-choice { border-radius: 1.2rem; }
  .choice-play { min-height: 3.8rem; }
  .instruction-button.text-control { width: auto; padding-inline: 0.8rem; font-size: 0.85rem; }
  .reward-strip { gap: 0.5rem; }
  .lives svg { width: 1.15rem; height: 1.15rem; }
  .session-rewards { grid-template-columns: 1fr 1fr; }
  .reward-card:last-child { grid-column: 1 / -1; min-height: 6.5rem; }
  .completion-actions { grid-template-columns: 1fr; }
  #settingsDialog { max-width: 100vw; margin: 0; }
  .settings-workspace { min-height: 100vh; max-height: 100vh; border-radius: 0; padding: 1.2rem; }
  .settings-tabs { display: grid; grid-template-columns: 1fr 1fr; }
  .settings-tabs button { padding: 0.5rem; }
  .decision-grid { grid-template-columns: 1fr; }
  .selection-rules, .record-levels, .download-grid { grid-template-columns: 1fr; }
  .selection-rules div { min-height: 0; }
  .bank-overview { display: block; }
  .bank-detail summary { display: grid; gap: 0.3rem; }
  .certificate-sheet { min-height: 32rem; padding: 1.2rem; }
  .certificate-sheet h2 { font-size: 2.2rem; }
  .certificate-sheet h3 { font-size: 1.8rem; }
}

@media (max-width: 430px) {
  .activity-progress { gap: 0.3rem; }
  .activity-progress i { width: 0.7rem; height: 0.7rem; }
  .stars { font-size: 0.9rem; }
  .personal-timer { min-width: 2.7rem; font-size: 0.82rem; }
  .choice-position { font-size: 0.7rem; }
  .session-rewards { grid-template-columns: 1fr; }
  .reward-card:last-child { grid-column: auto; }
  .certificate-progress { align-items: flex-start; flex-direction: column; }
  .settings-tabs { grid-template-columns: 1fr; }
}

@media print {
  body * { visibility: hidden !important; }
  #certificateDialog, #certificateDialog *, #certificateDialog[open] { visibility: visible !important; }
  #certificateDialog { position: absolute; inset: 0; display: block; width: 100%; max-width: none; margin: 0; padding: 0; background: #fff; }
  #certificateDialog::backdrop, .no-print { display: none !important; }
  .certificate-dialog-card { box-shadow: none; padding: 0; }
  .certificate-sheet { min-height: 95vh; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}