:root {
  color-scheme: light;
  --ink: #17212b;
  --muted: #687484;
  --line: #d8dee7;
  --paper: #f7f8fb;
  --panel: #ffffff;
  --accent: #0d7c86;
  --accent-dark: #075a62;
  --gold: #b8860b;
  --coral: #d85f4f;
  --green: #377d55;
  --shadow: 0 14px 35px rgba(19, 34, 49, 0.1);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(120deg, rgba(13, 124, 134, 0.08), transparent 36%),
    linear-gradient(210deg, rgba(216, 95, 79, 0.08), transparent 42%),
    var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

.boot-warning {
  margin: 12px clamp(18px, 4vw, 44px) 0;
  border: 1px solid #a8d8c0;
  border-radius: 8px;
  padding: 10px 14px;
  background: #eef9f3;
  color: #245a3d;
  font-weight: 800;
  line-height: 1.45;
}

.boot-warning.ready {
  display: none;
}

.browser-assist {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 12px clamp(18px, 4vw, 44px) 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.browser-assist h2,
.browser-assist p {
  margin: 0;
}

.browser-assist h2 {
  font-size: 1.05rem;
}

.browser-assist p:not(.eyebrow):not(.result-line) {
  color: var(--muted);
  line-height: 1.45;
}

.assist-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px clamp(18px, 4vw, 44px);
}

.topbar h1,
.hero-band h2,
.section-heading h2 {
  margin: 0;
  letter-spacing: 0;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.top-actions,
.timer-actions,
.answer-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button,
.assist-actions button,
.timer-actions button,
.answer-row button,
#submitTest,
#markAnnualReview,
#shareReport,
#exportBackup,
.file-button {
  min-height: 40px;
  border-radius: 8px;
  padding: 0 14px;
  background: var(--ink);
  color: white;
  font-weight: 800;
}

.profile-dock {
  display: flex;
  gap: 6px;
  align-items: center;
}

.profile-chip {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #ffffff;
  color: var(--ink);
  font-weight: 900;
}

.profile-chip.active {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.profile-chip.pending {
  border-color: var(--gold);
  background: #fff8df;
  color: #6a4c00;
}

.file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#importBackup {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px;
  padding: 0 clamp(18px, 4vw, 44px) 36px;
}

.sidebar {
  align-self: start;
  position: sticky;
  top: 18px;
  display: grid;
  gap: 16px;
}

.student-switch,
.nav-list,
.progress-panel,
.timer-box,
.problem-card,
.metric-board,
.resource-board,
.test-panel,
.update-box {
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.student-switch,
.nav-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.nav-list.locked,
.progress-panel.locked,
.content.locked {
  display: none;
}

.student-login,
.private-setup,
.sync-setup,
.grade-settings {
  display: grid;
  gap: 8px;
  padding-top: 4px;
}

.private-setup,
.sync-setup {
  border: 1px solid var(--gold);
  border-radius: 8px;
  padding: 12px;
  background: #fff8df;
}

.private-setup.locked {
  display: none;
}

.sync-setup.connected {
  border-color: #a8d8c0;
  background: #eef9f3;
}

.sync-setup.connected #familySyncCode,
.sync-setup.connected #connectFamilySync {
  display: none;
}

.sync-setup:not(.connected) #syncNow {
  display: none;
}

.active-account {
  display: none;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #eef8f8;
}

.active-account h2 {
  margin: 0;
  font-size: 1.05rem;
}

.active-account button {
  min-height: 38px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-weight: 800;
}

.student-switch.logged-in .student,
.student-switch.logged-in .student-login {
  display: none;
}

.student-switch.logged-in .student.active,
.student-switch.logged-in .active-account {
  display: grid;
}

.student-login input,
.private-setup input,
.private-setup select,
.sync-setup input,
.grade-settings select {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: white;
  color: var(--ink);
}

.student-login button,
.private-setup button,
.sync-setup button {
  min-height: 40px;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  font-weight: 800;
}

.grade-settings label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.student,
.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  border-radius: 7px;
  padding: 10px 12px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.nav-item[hidden] {
  display: none !important;
}

.student span,
.nav-item {
  font-weight: 850;
}

.student small {
  color: var(--muted);
}

.student.active,
.nav-item.active {
  background: #e7f4f5;
  color: var(--accent-dark);
}

.student.pending {
  outline: 2px solid var(--gold);
  background: #fff8df;
}

.progress-panel {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 14px;
  padding: 16px;
}

.level-ring {
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) var(--progress, 20%), #e4e9ef 0);
}

.level-ring span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: white;
  font-weight: 900;
}

.panel-label,
.progress-panel p,
.muted {
  margin: 0;
  color: var(--muted);
}

.progress-panel h2 {
  margin: 2px 0 8px;
  font-size: 1rem;
}

.content {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.hero-band {
  min-height: 118px;
  padding: 22px 24px;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #ffffff 0%, #edf8f8 100%);
  border: 1px solid var(--line);
}

.hero-band h2 {
  max-width: 760px;
  font-size: clamp(1.45rem, 2.5vw, 2.25rem);
  line-height: 1.12;
}

.hero-band p:last-child {
  max-width: 620px;
  color: var(--muted);
  font-size: 0.98rem;
}

.timer-box {
  display: grid;
  grid-template-columns: auto auto minmax(240px, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px 16px;
}

.timer-box strong {
  font-size: 1.8rem;
  letter-spacing: 0;
}

.timer-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.timer-actions button {
  min-height: 36px;
  padding: 0 10px;
  background: var(--accent);
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.problem-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.answer-correct {
  border-color: #a8d8c0;
}

.answer-wrong {
  border-color: #e4b2a9;
}

.problem-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  background: #f1f3f6;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.badge.challenge {
  background: #fff1ed;
  color: var(--coral);
}

.problem-card h3 {
  margin: 0;
  font-size: 1.25rem;
}

.theme-story {
  margin: 0;
  border: 1px solid #d9c27f;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff8df;
  color: #5a4511;
  font-weight: 800;
  line-height: 1.45;
}

.problem-text {
  min-height: 96px;
  margin: 0;
  line-height: 1.55;
}

.translation {
  margin: 0;
  padding: 12px;
  border-left: 4px solid var(--accent);
  background: #eef8f8;
  color: #29424a;
}

.learning-frame {
  display: grid;
  gap: 12px;
  border: 1px solid #cddfe2;
  border-radius: 8px;
  padding: 12px;
  background: #f3fbfb;
}

.learning-frame > div {
  display: grid;
  gap: 3px;
}

.mini-label {
  color: var(--accent-dark);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.learning-frame small {
  color: var(--muted);
  font-weight: 750;
}

.learning-frame ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.learning-frame li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  color: #29424a;
  line-height: 1.4;
}

.learning-frame li span {
  color: var(--ink);
  font-weight: 900;
}

.problem-visual {
  display: grid;
  place-items: center;
  min-height: 166px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(13, 124, 134, 0.06), rgba(184, 134, 11, 0.08)),
    #ffffff;
}

.problem-visual svg {
  display: block;
  width: min(100%, 300px);
  height: auto;
  max-height: 170px;
  font-weight: 850;
}

.hint-stack {
  display: grid;
  gap: 8px;
}

.hint-stack details {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fbfcfd;
}

.hint-stack summary {
  cursor: pointer;
  font-weight: 850;
}

.answer-row {
  align-items: stretch;
}

.answer-row input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
}

.answer-row button {
  background: var(--accent);
}

.answer-feedback,
.test-feedback {
  display: none;
  margin: 0;
  border-radius: 8px;
  padding: 9px 10px;
  font-weight: 850;
  line-height: 1.4;
}

.answer-feedback.correct,
.test-feedback.correct {
  display: block;
  background: #eaf7ef;
  color: var(--green);
}

.answer-feedback.wrong,
.test-feedback.wrong {
  display: block;
  background: #fff1ed;
  color: var(--coral);
}

.solution {
  display: none;
  padding: 12px;
  border-radius: 8px;
  background: #f7f2e6;
  line-height: 1.5;
}

.solution.visible {
  display: block;
}

.reflection {
  width: 100%;
  min-height: 86px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
}

.section-heading {
  margin-bottom: 14px;
}

.section-heading h2 {
  font-size: clamp(1.7rem, 3vw, 2.65rem);
}

.analysis-layout,
.parent-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.72fr);
  gap: 18px;
}

.metric-board,
.resource-board,
.test-panel,
.lock-panel {
  padding: 18px;
}

.parent-primary,
.parent-secondary {
  display: grid;
  gap: 14px;
  align-content: start;
}

.metric-list,
.curriculum-map,
.roadmap-track {
  display: grid;
  gap: 12px;
}

.metric {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.metric strong {
  font-size: 1.15rem;
}

.mastery-board,
.path-dashboard,
.benchmark-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfd;
}

.mastery-head,
.path-dashboard {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.mastery-head {
  display: grid;
  gap: 12px;
}

.mastery-head > div {
  display: grid;
  gap: 3px;
}

.mastery-head span,
.path-score span,
.benchmark-grid span {
  color: var(--muted);
  font-weight: 750;
}

.mastery-board p,
.benchmark-panel p {
  margin: 0;
  color: #29424a;
  line-height: 1.45;
}

.domain-grid {
  display: grid;
  gap: 8px;
}

.domain-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 46px;
  gap: 8px;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 850;
}

.domain-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e7ecf2;
}

.domain-track i {
  display: block;
  height: 100%;
  min-width: 8px;
  border-radius: inherit;
  background: var(--accent);
}

.resource-board h3,
.parent-secondary h3,
.update-box h3 {
  margin-top: 0;
}

#resourceLinks {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

#resourceLinks a {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--accent-dark);
  font-weight: 850;
  text-decoration: none;
}

#resourceLinks span {
  color: var(--muted);
  font-weight: 700;
  line-height: 1.4;
}

.test-question,
.curriculum-item,
.mastery-note {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.mastery-note {
  display: grid;
  gap: 4px;
  margin-bottom: 14px;
  background: #eef8f8;
}

.mastery-note span {
  color: var(--muted);
  line-height: 1.45;
}

.test-question input {
  width: 100%;
  max-width: 220px;
  min-height: 42px;
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
}

.test-visual {
  max-width: 360px;
  margin-top: 12px;
}

.test-visual .problem-visual,
.test-solution-visual .problem-visual {
  min-height: 150px;
}

.test-visual .problem-visual svg,
.test-solution-visual .problem-visual svg {
  max-height: 152px;
}

.test-visual-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.test-solution-visual {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.test-solution-visual p {
  margin: 0;
  color: #29424a;
  font-weight: 750;
  line-height: 1.5;
}

.test-meta {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 800;
}

.analysis-student-switch,
.test-student-switch {
  margin-bottom: 14px;
}

.test-history-graph {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.history-summary,
.history-empty {
  display: grid;
  gap: 4px;
}

.history-summary span,
.history-empty span {
  color: var(--muted);
  font-weight: 700;
}

.history-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(76px, 1fr));
  gap: 12px;
  align-items: end;
  min-height: 180px;
}

.history-bar {
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 0;
  text-align: center;
}

.bar-track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 54px;
  height: 110px;
  border-radius: 8px;
  background: #eef2f5;
  overflow: hidden;
}

.bar-track span {
  display: block;
  width: 100%;
  height: var(--score);
  min-height: 8px;
  background: var(--accent);
}

.history-bar strong,
.history-bar small,
.history-bar em {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.history-bar small,
.history-bar em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
}

.test-answer-key {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  margin-top: 10px;
  border-radius: 8px;
  padding: 0 10px;
  background: #eef8f8;
  color: var(--accent-dark);
  font-weight: 900;
}

.test-explanation {
  margin: 10px 0 0;
  line-height: 1.5;
}

.result-line {
  margin: 12px 0 0;
  font-weight: 850;
}

.curriculum-item h3 {
  margin: 0 0 8px;
}

.curriculum-item p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.curriculum-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.curriculum-item.current {
  border-color: var(--accent);
  background: #f3fbfb;
}

.path-dashboard {
  margin-top: 0;
  background: #ffffff;
}

.path-dashboard h3,
.benchmark-panel h3 {
  margin: 0;
}

.path-dashboard p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.path-score {
  display: grid;
  justify-items: center;
  min-width: 92px;
  border-radius: 8px;
  padding: 12px;
  background: #eef8f8;
}

.path-score strong {
  color: var(--accent-dark);
  font-size: 1.5rem;
}

.benchmark-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.benchmark-grid div {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.roadmap-step {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #e7f4f5;
  color: var(--accent-dark);
  font-weight: 900;
}

.roadmap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.roadmap-tags span {
  border-radius: 999px;
  padding: 6px 9px;
  background: #f1f3f6;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.checklist {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  line-height: 1.5;
}

.coach-tools,
.mock-builder {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.coach-tools h3,
.mock-builder h3 {
  margin: 0;
}

.mock-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mock-controls label {
  display: grid;
  gap: 6px;
  font-weight: 850;
}

.mock-controls select {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  background: white;
  color: var(--ink);
}

.mock-check {
  align-content: end;
  grid-template-columns: auto 1fr;
  align-items: center;
}

.mock-check input {
  width: 18px;
  height: 18px;
}

.mock-builder button {
  min-height: 40px;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  font-weight: 850;
}

.mock-runtime {
  display: grid;
  gap: 10px;
}

.mock-runtime:empty {
  display: none;
}

.mock-question {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.mock-question input {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
}

.parent-content.locked,
.test-content.locked {
  display: none;
}

.parent-lock.unlocked,
.test-lock.unlocked {
  display: none;
}

.lock-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.lock-panel input {
  flex: 1;
  min-width: 180px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
}

.lock-panel button {
  min-height: 44px;
  border-radius: 8px;
  padding: 0 16px;
  background: var(--ink);
  color: white;
  font-weight: 800;
}

.parent-solutions {
  display: grid;
  gap: 12px;
}

.parent-home-panel {
  display: grid;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #ffffff;
  box-shadow: var(--shadow);
}

.parent-home-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(140px, auto);
  gap: 12px;
  align-items: center;
}

.parent-home-head h3 {
  margin: 0;
  font-size: 1.25rem;
}

.parent-child-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.parent-child-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfcfd;
}

.parent-child-card.active {
  border-color: var(--accent);
  background: #f3fbfb;
}

.parent-child-card > button {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 42px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.parent-child-card > button span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-weight: 900;
}

.parent-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.parent-card-grid div {
  display: grid;
  gap: 3px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
}

.parent-card-grid small {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
}

.parent-card-grid b {
  overflow-wrap: anywhere;
  font-size: 0.95rem;
}

.parent-jump-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.parent-jump-grid button {
  min-height: 42px;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  font-weight: 850;
}

.child-solution-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.child-icon {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: #ffffff;
  color: var(--ink);
  text-align: left;
}

.child-icon span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #e7f4f5;
  color: var(--accent-dark);
  font-weight: 900;
}

.child-icon small {
  color: var(--muted);
  font-weight: 850;
}

.child-icon.active {
  border-color: var(--accent);
  background: #eef8f8;
}

.child-icon.active span {
  background: var(--accent);
  color: white;
}

.refresh-results {
  width: 100%;
  min-height: 40px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-weight: 850;
}

.advanced-parent-tools {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.advanced-parent-tools summary {
  cursor: pointer;
  padding: 14px;
  color: var(--ink);
  font-weight: 900;
}

.advanced-parent-stack {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
}

.submission-list {
  display: grid;
  gap: 10px;
  margin: 2px 0 8px;
}

.submission-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfd;
}

.submission-card p {
  margin: 0;
  line-height: 1.45;
}

.voice-recorder {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.voice-recorder button {
  min-height: 36px;
  border-radius: 8px;
  padding: 0 10px;
  background: var(--ink);
  color: white;
  font-weight: 800;
}

.voice-recorder button:disabled {
  background: #e4e9ee;
  color: var(--muted);
  cursor: not-allowed;
}

.voice-status {
  color: var(--muted);
  font-weight: 800;
}

.submission-audio {
  width: 100%;
}

.submission-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.submission-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 850;
}

.submission-status.correct {
  background: #eaf7ef;
  color: var(--green);
}

.submission-status.review {
  background: #fff1ed;
  color: var(--coral);
}

.submission-status.waiting {
  background: #eef2f5;
  color: var(--muted);
}

.reward-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf6;
  box-shadow: var(--shadow);
}

.reward-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.reward-head h3 {
  margin: 0;
}

.reward-head span {
  border-radius: 999px;
  padding: 7px 10px;
  background: #fff1c9;
  color: #6a4c00;
  font-weight: 900;
}

.reward-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.reward-metrics div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #eadca4;
  border-radius: 8px;
  background: white;
}

.reward-metrics span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.reward-metrics strong {
  font-size: 1.25rem;
}

.reward-shop {
  display: grid;
  gap: 10px;
}

.reward-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.reward-card.ready {
  border-color: #d9c27f;
  box-shadow: inset 0 0 0 1px #f2dc87;
}

.reward-card div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.reward-card p,
.reward-card small,
.reward-history p {
  margin: 0;
  line-height: 1.45;
}

.reward-card span,
.reward-card small {
  color: var(--muted);
  font-weight: 800;
}

.reward-card button {
  min-height: 38px;
  border-radius: 8px;
  background: var(--ink);
  color: white;
  font-weight: 850;
}

.reward-card button:disabled {
  background: #e4e9ee;
  color: var(--muted);
  cursor: not-allowed;
}

.reward-history {
  border: 1px solid #eadca4;
  border-radius: 8px;
  padding: 10px 12px;
  background: white;
}

.parent-solution {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fbfcfd;
}

.parent-solution h4 {
  margin: 0 0 8px;
}

.parent-solution p {
  margin: 8px 0 0;
  line-height: 1.5;
}

.teacher-note {
  color: var(--muted);
  font-size: 0.92rem;
}

.coach-review-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.review-sliders {
  display: grid;
  gap: 10px;
}

.review-sliders label {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  font-weight: 850;
}

.review-sliders input[type="range"] {
  width: 100%;
}

.coach-review-panel textarea {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.coach-review-panel button {
  min-height: 40px;
  border-radius: 8px;
  background: var(--accent);
  color: white;
  font-weight: 850;
}

.review-history {
  display: grid;
  gap: 6px;
}

.review-history p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.update-box {
  display: grid;
  gap: 10px;
  padding: 16px;
  box-shadow: none;
}

@media (max-width: 980px) {
  .app-shell,
  .problem-grid,
  .analysis-layout,
  .parent-layout {
    grid-template-columns: 1fr;
  }

  .timer-box {
    grid-template-columns: 1fr;
  }

  .timer-actions {
    justify-content: flex-start;
  }

  .benchmark-grid {
    grid-template-columns: 1fr;
  }

  .parent-child-cards,
  .parent-jump-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sidebar {
    position: static;
  }

  .nav-list {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions,
  .browser-assist {
    width: 100%;
  }

  .browser-assist {
    grid-template-columns: 1fr;
  }

  .assist-actions {
    justify-content: flex-start;
  }

  .student-switch {
    grid-template-columns: 1fr 1fr;
  }

  .nav-list {
    grid-template-columns: repeat(5, 132px);
  }

  .history-bars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mock-controls {
    grid-template-columns: 1fr;
  }

  .curriculum-item {
    grid-template-columns: 1fr;
  }

  .learning-frame li,
  .domain-row,
  .path-dashboard,
  .mastery-head,
  .parent-home-head,
  .parent-child-cards {
    grid-template-columns: 1fr;
  }

  .parent-card-grid,
  .parent-jump-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .review-sliders label {
    grid-template-columns: 1fr;
  }

  .hero-band h2 {
    font-size: 1.7rem;
  }

  .answer-row {
    flex-direction: column;
  }

  .submission-top,
  .reward-head,
  .reward-card div {
    align-items: flex-start;
    flex-direction: column;
  }

  .reward-metrics {
    grid-template-columns: 1fr;
  }
}