:root {

  --bg: #0f0a24;

  --bg-alt: #161030;

  --surface: rgba(255, 255, 255, 0.06);

  --stroke: rgba(255, 255, 255, 0.12);

  --text: rgba(255, 255, 255, 0.94);

  --muted: rgba(255, 255, 255, 0.72);

  --muted-2: rgba(255, 255, 255, 0.55);



  --violet: #8b5cf6;

  --violet-light: #a78bfa;

  --pink: #ec4899;

  --cyan: #22d3ee;

  --gold: #fbbf24;

  --green: #34d399;



  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);

  --radius-lg: 20px;

  --radius-md: 14px;

  --container: 1140px;



  --font-sans: "DM Sans", system-ui, sans-serif;

  --font-display: "Fraunces", Georgia, serif;

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html,

body {

  height: 100%;

}



body {

  margin: 0;

  font-family: var(--font-sans);

  background:

    radial-gradient(900px 600px at 10% -5%, rgba(139, 92, 246, 0.28), transparent 55%),

    radial-gradient(800px 500px at 95% 5%, rgba(236, 72, 153, 0.18), transparent 55%),

    radial-gradient(700px 500px at 50% 110%, rgba(34, 211, 238, 0.1), transparent 55%),

    var(--bg);

  color: var(--text);

  line-height: 1.6;

}



a {

  color: inherit;

  text-decoration: none;

}



button,

input,

select {

  font: inherit;

}



.sr-only {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}



.skip-link {

  position: absolute;

  left: 12px;

  top: 12px;

  padding: 10px 14px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.12);

  transform: translateY(-140%);

  transition: transform 0.2s ease;

  z-index: 999;

}



.skip-link:focus {

  transform: translateY(0);

}



.container {

  width: min(var(--container), calc(100% - 32px));

  margin: 0 auto;

}



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 12px 18px;

  border-radius: 999px;

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.05);

  color: var(--text);

  cursor: pointer;

  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;

  white-space: nowrap;

}



.btn:hover {

  transform: translateY(-1px);

  background: rgba(255, 255, 255, 0.08);

}



.btn:focus-visible {

  outline: 3px solid rgba(139, 92, 246, 0.4);

  outline-offset: 2px;

}



.btn-primary {

  border-color: rgba(139, 92, 246, 0.45);

  background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(236, 72, 153, 0.25));

}



.btn-ghost {

  background: transparent;

}



.btn-sm {

  padding: 10px 14px;

  font-size: 14px;

}



/* Header */

.site-header {

  position: sticky;

  top: 0;

  z-index: 50;

  background: rgba(15, 10, 36, 0.75);

  backdrop-filter: blur(16px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

}



.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 14px 0;

}



.brand {

  display: flex;

  align-items: center;

  gap: 10px;

}



.brand-mark {

  width: 40px;

  height: 40px;

  border-radius: 12px;

  display: grid;

  place-items: center;

  background: linear-gradient(135deg, var(--violet), var(--pink));

  color: white;

  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);

}



.brand-text {

  display: flex;

  flex-direction: column;

  line-height: 1.15;

}



.brand-name {

  font-weight: 800;

  letter-spacing: -0.03em;

}



.brand-tag {

  font-size: 12px;

  color: var(--muted-2);

}



.nav {

  display: flex;

  align-items: center;

}



.nav-menu {

  display: flex;

  align-items: center;

  gap: 4px;

}



.nav-link {

  padding: 8px 10px;

  border-radius: 999px;

  color: var(--muted);

  font-size: 14px;

  transition: background 0.15s ease, color 0.15s ease;

}



.nav-link:hover {

  background: rgba(255, 255, 255, 0.06);

  color: var(--text);

}



.nav-cta {

  margin-left: 4px;

  padding: 10px 16px;

  border-radius: 999px;

  border: 1px solid rgba(139, 92, 246, 0.4);

  background: rgba(139, 92, 246, 0.15);

  font-weight: 600;

}



.nav-toggle {

  display: none;

  width: 42px;

  height: 42px;

  border-radius: 12px;

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.04);

  cursor: pointer;

}



.nav-toggle-lines {

  display: block;

  width: 18px;

  height: 12px;

  margin: 0 auto;

  position: relative;

}



.nav-toggle-lines::before,

.nav-toggle-lines::after {

  content: "";

  position: absolute;

  left: 0;

  width: 18px;

  height: 2px;

  background: rgba(255, 255, 255, 0.85);

  border-radius: 999px;

}



.nav-toggle-lines::before {

  top: 1px;

}



.nav-toggle-lines::after {

  top: 9px;

}



/* Hero */

.hero {

  position: relative;

  padding: 56px 0 40px;

  overflow: hidden;

}



.hero-grid {

  display: grid;

  grid-template-columns: 1.05fr 0.95fr;

  gap: 28px;

  align-items: center;

  position: relative;

  z-index: 1;

}



.pill {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 8px 14px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid var(--stroke);

  color: var(--muted);

  font-size: 13px;

  margin: 0 0 16px;

}



.pill-dot {

  width: 8px;

  height: 8px;

  border-radius: 999px;

  background: linear-gradient(135deg, var(--violet), var(--pink));

}



.hero-title {

  font-family: var(--font-display);

  font-size: clamp(36px, 4.5vw, 56px);

  line-height: 1.08;

  letter-spacing: -0.03em;

  margin: 0 0 16px;

  font-weight: 700;

}



.hero-title em {

  font-style: normal;

  background: linear-gradient(135deg, var(--violet-light), var(--pink));

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.hero-subtitle {

  color: var(--muted);

  font-size: 17px;

  max-width: 52ch;

  margin: 0 0 20px;

}



.hero-selectors {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 18px;

}



.selector-group {

  flex: 1;

  min-width: 140px;

}



.selector-group label {

  display: block;

  font-size: 12px;

  color: var(--muted-2);

  margin-bottom: 4px;

  text-transform: uppercase;

  letter-spacing: 0.04em;

}



.selector-group select {

  width: 100%;

  padding: 10px 12px;

  border-radius: 12px;

  border: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.3);

  color: var(--text);

  cursor: pointer;

}



.hero-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 14px;

}



.hero-trust {

  font-size: 14px;

  color: var(--muted-2);

  margin: 0 0 16px;

  max-width: 48ch;

}



.trust-row {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}



.trust-item {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 8px 12px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid var(--stroke);

  color: var(--muted);

  font-size: 14px;

}



/* Demo card */

.hero-demo .demo-card {

  border-radius: 24px;

  border: 1px solid var(--stroke);

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));

  box-shadow: var(--shadow);

  overflow: hidden;

}



.demo-header {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 16px 18px;

  border-bottom: 1px solid var(--stroke);

}



.demo-avatar {

  width: 42px;

  height: 42px;

  border-radius: 14px;

  display: grid;

  place-items: center;

  font-weight: 800;

  background: linear-gradient(135deg, var(--violet), var(--pink));

}



.demo-name {

  margin: 0;

  font-weight: 700;

}



.demo-status {

  margin: 2px 0 0;

  font-size: 13px;

  color: var(--muted-2);

  display: flex;

  align-items: center;

  gap: 6px;

}



.demo-progress-label {

  margin-left: auto;

  font-size: 12px;

  color: var(--muted-2);

  padding: 4px 10px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.06);

}



.live-dot {

  width: 8px;

  height: 8px;

  border-radius: 999px;

  background: var(--green);

  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.2);

}



.demo-whiteboard {

  margin: 0 18px;

  padding: 16px;

  border-radius: 14px;

  background: rgba(0, 0, 0, 0.35);

  border: 1px solid var(--stroke);

}



.wb-title {

  font-size: 13px;

  color: var(--muted-2);

  margin-bottom: 10px;

}



.wb-fractions {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 22px;

  font-weight: 700;

  margin-bottom: 12px;

}



.frac.highlight {

  color: var(--cyan);

}



.frac-op {

  color: var(--muted-2);

}



.wb-bar {

  height: 6px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.1);

  overflow: hidden;

}



.wb-bar span {

  display: block;

  height: 100%;

  border-radius: 999px;

  background: linear-gradient(90deg, var(--violet), var(--pink));

}



.demo-chat {

  padding: 14px 18px;

  display: flex;

  flex-direction: column;

  gap: 8px;

  min-height: 120px;

}



.bubble {

  max-width: 88%;

  padding: 10px 14px;

  border-radius: 16px;

  font-size: 14px;

  line-height: 1.45;

}



.bubble.bot {

  align-self: flex-start;

  background: rgba(139, 92, 246, 0.18);

  border: 1px solid rgba(139, 92, 246, 0.25);

}



.bubble.user {

  align-self: flex-end;

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid var(--stroke);

}



.demo-stats {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1px;

  background: var(--stroke);

  border-top: 1px solid var(--stroke);

}



.demo-stat {

  padding: 12px;

  background: rgba(0, 0, 0, 0.35);

  text-align: center;

}



.demo-stat-label {

  display: block;

  font-size: 11px;

  color: var(--muted-2);

  text-transform: uppercase;

  letter-spacing: 0.04em;

}



.demo-stat-value {

  display: block;

  margin-top: 4px;

  font-weight: 700;

  font-size: 15px;

}



.hero-bg {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 0;

}



.blob {

  position: absolute;

  border-radius: 50%;

  filter: blur(60px);

  opacity: 0.6;

}



.blob.b1 {

  width: 400px;

  height: 400px;

  top: -100px;

  left: -80px;

  background: rgba(139, 92, 246, 0.35);

}



.blob.b2 {

  width: 350px;

  height: 350px;

  top: 20%;

  right: -60px;

  background: rgba(236, 72, 153, 0.25);

}



.blob.b3 {

  width: 300px;

  height: 300px;

  bottom: -80px;

  left: 40%;

  background: rgba(34, 211, 238, 0.15);

}



/* Sections */

.section {

  padding: 64px 0;

}



.section.alt {

  background: rgba(255, 255, 255, 0.02);

  border-top: 1px solid rgba(255, 255, 255, 0.05);

  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

}



.section-head {

  margin-bottom: 32px;

}



.section-head.center {

  text-align: center;

  max-width: 640px;

  margin-left: auto;

  margin-right: auto;

}



.section-title {

  font-family: var(--font-display);

  font-size: clamp(28px, 3vw, 40px);

  letter-spacing: -0.02em;

  margin: 0 0 12px;

  font-weight: 700;

}



.section-subtitle {

  margin: 0;

  color: var(--muted);

  font-size: 17px;

}



/* Steps */

.steps {

  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

}



.step {

  padding: 20px;

  border-radius: var(--radius-lg);

  border: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.2);

}



.step-num {

  width: 36px;

  height: 36px;

  border-radius: 12px;

  display: grid;

  place-items: center;

  font-weight: 800;

  background: rgba(139, 92, 246, 0.2);

  border: 1px solid rgba(139, 92, 246, 0.3);

  margin-bottom: 12px;

}



.step-title {

  margin: 0 0 6px;

  font-size: 16px;

}



.step-text {

  margin: 0;

  color: var(--muted);

  font-size: 14px;

}



/* Subjects */

.subject-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  margin-bottom: 24px;

}



.subject-card {

  padding: 24px;

  border-radius: var(--radius-lg);

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.04);

  text-align: center;

  transition: border-color 0.2s ease, transform 0.2s ease;

}



.subject-card:hover {

  border-color: rgba(139, 92, 246, 0.35);

  transform: translateY(-2px);

}



.subject-icon {

  font-size: 32px;

  margin-bottom: 12px;

}



.subject-card h3 {

  margin: 0 0 8px;

  font-size: 18px;

}



.subject-card p {

  margin: 0;

  color: var(--muted);

  font-size: 14px;

}



.subject-card.special-content-card {

  border-color: rgba(251, 191, 36, 0.35);

  background: linear-gradient(145deg, rgba(251, 191, 36, 0.08), rgba(139, 92, 246, 0.06));

}



.content-badge {

  display: inline-block;

  margin-left: 6px;

  padding: 2px 7px;

  border-radius: 999px;

  font-size: 10px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  vertical-align: middle;

  background: rgba(251, 191, 36, 0.2);

  color: #fbbf24;

  border: 1px solid rgba(251, 191, 36, 0.35);

}



.curriculum-chips {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;

}



.chip {

  padding: 10px 16px;

  border-radius: 999px;

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.04);

  color: var(--muted);

  font-size: 14px;

  cursor: pointer;

  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;

}



.chip:hover,

.chip.active {

  background: rgba(139, 92, 246, 0.15);

  border-color: rgba(139, 92, 246, 0.4);

  color: var(--text);

}



/* Split layout */

.split {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 32px;

  align-items: start;

}



.checklist {

  list-style: none;

  padding: 0;

  margin: 20px 0;

  display: grid;

  gap: 10px;

}



.checklist li {

  display: flex;

  gap: 10px;

  align-items: flex-start;

  color: var(--muted);

  padding: 12px 14px;

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid rgba(255, 255, 255, 0.06);

}



.check {

  width: 22px;

  height: 22px;

  border-radius: 8px;

  display: grid;

  place-items: center;

  background: rgba(52, 211, 153, 0.15);

  color: var(--green);

  flex-shrink: 0;

}



.cta-row {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}



/* Dashboard preview */

.dashboard-preview {

  border-radius: var(--radius-lg);

  border: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.35);

  padding: 20px;

  box-shadow: var(--shadow);

}



.dash-header {

  margin-bottom: 16px;

}



.dash-title {

  margin: 0;

  font-weight: 700;

}



.dash-sub {

  margin: 4px 0 0;

  font-size: 13px;

  color: var(--muted-2);

}



.dash-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

}



.dash-card {

  padding: 14px;

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid var(--stroke);

}



.dash-card.wide {

  grid-column: 1 / -1;

}



.dash-card.narrative {

  background: rgba(139, 92, 246, 0.08);

  border-color: rgba(139, 92, 246, 0.2);

}



.dash-label {

  margin: 0;

  font-size: 12px;

  color: var(--muted-2);

}



.dash-value {

  margin: 4px 0 0;

  font-size: 22px;

  font-weight: 800;

}



.dash-change {

  margin: 4px 0 0;

  font-size: 12px;

  color: var(--muted-2);

}



.dash-change.up {

  color: var(--green);

}



.dash-narrative {

  margin: 8px 0 0;

  font-size: 14px;

  color: var(--muted);

  line-height: 1.5;

}



.dash-bars {

  margin-top: 10px;

  display: grid;

  gap: 8px;

}



.dash-bar {

  display: grid;

  grid-template-columns: 70px 1fr 36px;

  align-items: center;

  gap: 10px;

  font-size: 13px;

  color: var(--muted);

}



.bar {

  height: 8px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.1);

  display: block;

  position: relative;

  overflow: hidden;

}



.bar::after {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  height: 100%;

  border-radius: 999px;

  background: linear-gradient(90deg, var(--violet), var(--pink));

}



.bar.low::after { width: 35%; }

.bar.mid::after { width: 58%; }

.bar.high::after { width: 72%; }

.bar[style*="--pct"]::after { width: var(--pct); }



.bar-pct {

  font-size: 12px;

  color: var(--muted-2);

  text-align: right;

}



/* Outcomes */

.outcome-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

}



.outcome-card {

  padding: 22px;

  border-radius: var(--radius-lg);

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.04);

  text-align: center;

}



.outcome-icon {

  font-size: 28px;

  display: block;

  margin-bottom: 12px;

}



.outcome-card h3 {

  margin: 0 0 8px;

  font-size: 16px;

}



.outcome-card p {

  margin: 0;

  font-size: 14px;

  color: var(--muted);

}



/* Testimonials */

.testimonial-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

}



.testimonial {

  margin: 0;

  padding: 22px;

  border-radius: var(--radius-lg);

  border: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.25);

}



.testimonial-stars {

  color: var(--gold);

  letter-spacing: 0.1em;

  margin-bottom: 10px;

}



.testimonial p {

  margin: 0 0 14px;

  color: var(--muted);

  font-size: 15px;

  line-height: 1.55;

}



.testimonial footer {

  display: flex;

  flex-direction: column;

  gap: 2px;

  padding-top: 14px;

  border-top: 1px solid var(--stroke);

}



.testimonial-name {

  font-weight: 700;

  font-size: 14px;

}



.testimonial-meta {

  font-size: 12px;

  color: var(--muted-2);

}



/* Portal tabs */

.portal-tabs {

  border-radius: var(--radius-lg);

  border: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.25);

  overflow: hidden;

}



.portal-tablist {

  display: flex;

  flex-wrap: wrap;

  gap: 4px;

  padding: 10px;

  border-bottom: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.2);

}



.portal-tab {

  padding: 10px 16px;

  border-radius: 999px;

  border: 1px solid transparent;

  background: transparent;

  color: var(--muted);

  cursor: pointer;

  font-size: 14px;

  font-weight: 500;

}



.portal-tab:hover {

  background: rgba(255, 255, 255, 0.05);

  color: var(--text);

}



.portal-tab.active {

  background: rgba(139, 92, 246, 0.2);

  border-color: rgba(139, 92, 246, 0.35);

  color: var(--text);

}



.portal-panels {

  padding: 20px;

}



.portal-panel[hidden] {

  display: none;

}



/* App shell */

.app-shell {

  display: grid;

  grid-template-columns: 180px 1fr;

  gap: 16px;

  min-height: 280px;

}



.app-nav {

  display: flex;

  flex-direction: column;

  gap: 4px;

  padding: 12px;

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid var(--stroke);

}



.app-nav .nav-item {

  padding: 8px 10px;

  border-radius: 10px;

  font-size: 13px;

  color: var(--muted);

}



.app-nav .nav-item.active {

  background: rgba(139, 92, 246, 0.15);

  color: var(--text);

  font-weight: 600;

}



.child-nav .nav-item {

  font-size: 14px;

}



.app-content {

  padding: 8px 4px;

}



.app-content h3 {

  margin: 0 0 8px;

  font-size: 18px;

}



.app-content > p {

  margin: 0 0 16px;

  color: var(--muted);

  font-size: 14px;

}



.child-welcome h3 {

  font-family: var(--font-display);

  font-size: 22px;

}



.child-welcome p {

  color: var(--muted-2);

  font-size: 14px;

  margin: 0 0 16px;

}



.child-cards {

  display: grid;

  gap: 10px;

  margin-bottom: 16px;

}



.child-card {

  padding: 14px;

  border-radius: 14px;

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.04);

}



.child-card.primary {

  border-color: rgba(139, 92, 246, 0.35);

  background: rgba(139, 92, 246, 0.1);

}



.child-card-label {

  display: block;

  font-size: 11px;

  color: var(--muted-2);

  text-transform: uppercase;

  letter-spacing: 0.04em;

  margin-bottom: 4px;

}



.child-card strong {

  display: block;

  margin-bottom: 4px;

}



.child-card-meta,

.child-card p {

  margin: 0;

  font-size: 13px;

  color: var(--muted);

}



.mini-stats {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

  margin-bottom: 16px;

}



.mini-stats > div {

  padding: 12px;

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid var(--stroke);

}



.mini-stats span {

  display: block;

  font-size: 12px;

  color: var(--muted-2);

}



.mini-stats strong {

  display: block;

  margin-top: 4px;

  font-size: 18px;

}



/* Schools */

.school-preview {

  display: grid;

  gap: 12px;

}



.school-stat {

  padding: 20px;

  border-radius: var(--radius-lg);

  border: 1px solid var(--stroke);

  background: rgba(139, 92, 246, 0.08);

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.school-stat span {

  color: var(--muted);

  font-size: 14px;

}



.school-stat strong {

  font-size: 28px;

  font-family: var(--font-display);

}



/* Safety */

.safety-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 16px;

}



.safety-card {

  padding: 20px;

  border-radius: var(--radius-md);

  border: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.2);

}



.safety-card h3 {

  margin: 0 0 8px;

  font-size: 16px;

}



.safety-card p {

  margin: 0;

  font-size: 14px;

  color: var(--muted);

}



/* Pricing */

.pricing-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  align-items: stretch;

}



.price-card {

  position: relative;

  padding: 24px;

  border-radius: var(--radius-lg);

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.04);

  display: flex;

  flex-direction: column;

}



.price-card.featured {

  border-color: rgba(139, 92, 246, 0.45);

  background: linear-gradient(180deg, rgba(139, 92, 246, 0.12), rgba(255, 255, 255, 0.03));

  transform: scale(1.02);

}



.price-badge {

  position: absolute;

  top: -10px;

  left: 50%;

  transform: translateX(-50%);

  padding: 4px 12px;

  border-radius: 999px;

  font-size: 11px;

  font-weight: 700;

  background: linear-gradient(135deg, var(--violet), var(--pink));

}



.price-tier {

  margin: 0;

  font-weight: 700;

  color: var(--muted);

}



.price-amount {

  margin: 8px 0 0;

  font-family: var(--font-display);

  font-size: 36px;

  font-weight: 700;

}



.price-period {

  margin: 0 0 16px;

  font-size: 14px;

  color: var(--muted-2);

}



.price-features {

  list-style: none;

  padding: 0;

  margin: 0 0 20px;

  flex: 1;

}



.price-features li {

  padding: 8px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

  font-size: 14px;

  color: var(--muted);

}



.price-features li:last-child {

  border-bottom: 0;

}



/* FAQ */

.faq {

  max-width: 720px;

  margin: 0 auto;

  display: grid;

  gap: 10px;

}



.faq-item {

  border-radius: var(--radius-md);

  border: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.2);

  overflow: hidden;

}



.faq-q {

  width: 100%;

  text-align: left;

  padding: 16px 18px;

  background: transparent;

  border: 0;

  color: var(--text);

  cursor: pointer;

  font-weight: 600;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.faq-q::after {

  content: "+";

  font-weight: 800;

  opacity: 0.7;

}



.faq-q[aria-expanded="true"]::after {

  content: "−";

}



.faq-a {

  padding: 0 18px 16px;

  color: var(--muted);

  font-size: 15px;

}



/* CTA */

.cta {

  padding: 40px 0 64px;

}



.cta-inner {

  border-radius: 28px;

  border: 1px solid var(--stroke);

  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.08));

  padding: 32px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  box-shadow: var(--shadow);

}



.cta-title {

  font-family: var(--font-display);

  margin: 0;

  font-size: clamp(22px, 2.5vw, 32px);

}



.cta-text {

  margin: 8px 0 0;

  color: var(--muted);

}



.cta-actions {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}



/* Footer */

.footer {

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  background: rgba(0, 0, 0, 0.2);

  padding: 32px 0 40px;

}



.footer-grid {

  display: grid;

  grid-template-columns: 1.4fr 0.8fr 0.8fr 0.9fr;

  gap: 24px;

}



.brand-footer {

  margin-bottom: 12px;

}



.footer-text {

  margin: 0;

  color: var(--muted);

  font-size: 14px;

  max-width: 36ch;

}



.footer-col {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.footer-title {

  margin: 0 0 4px;

  font-weight: 700;

  font-size: 14px;

}



.footer-link {

  color: var(--muted);

  font-size: 14px;

}



.footer-link:hover {

  color: var(--text);

  text-decoration: underline;

}



.footer-note {

  margin: 8px 0 0;

  font-size: 12px;

  color: var(--muted-2);

}



/* Demo modal */

.demo-modal {

  border: none;

  padding: 0;

  background: transparent;

  max-width: min(520px, calc(100% - 32px));

  width: 100%;

}



.demo-modal::backdrop {

  background: rgba(0, 0, 0, 0.75);

  backdrop-filter: blur(4px);

}



.demo-modal-inner {

  position: relative;

  padding: 28px 24px;

  border-radius: 24px;

  border: 1px solid var(--stroke);

  background: var(--bg-alt);

  box-shadow: var(--shadow);

}



.demo-modal-close {

  position: absolute;

  top: 12px;

  right: 14px;

  width: 36px;

  height: 36px;

  border-radius: 10px;

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.05);

  color: var(--text);

  font-size: 22px;

  cursor: pointer;

  line-height: 1;

}



.demo-modal-inner h2 {

  font-family: var(--font-display);

  margin: 0 0 6px;

  font-size: 24px;

}



.demo-modal-lead {

  margin: 0 0 20px;

  color: var(--muted);

  font-size: 14px;

}



.demo-modal-player {

  margin-bottom: 20px;

}



.demo-modal-screen {

  min-height: 140px;

  padding: 20px;

  border-radius: 16px;

  background: rgba(0, 0, 0, 0.35);

  border: 1px solid var(--stroke);

  margin-bottom: 12px;

}



.demo-modal-step {

  display: none;

}



.demo-modal-step.active {

  display: block;

}



.demo-step-num {

  display: inline-flex;

  width: 28px;

  height: 28px;

  border-radius: 8px;

  align-items: center;

  justify-content: center;

  background: rgba(139, 92, 246, 0.2);

  font-weight: 800;

  font-size: 14px;

  margin-bottom: 10px;

}



.demo-modal-step strong {

  display: block;

  margin-bottom: 6px;

}



.demo-modal-step p {

  margin: 0;

  color: var(--muted);

  font-size: 14px;

}



.demo-modal-progress {

  height: 4px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.1);

  overflow: hidden;

}



.demo-modal-progress span {

  display: block;

  height: 100%;

  width: 25%;

  border-radius: 999px;

  background: linear-gradient(90deg, var(--violet), var(--pink));

  transition: width 0.4s ease;

}



.toast {

  position: fixed;

  left: 50%;

  bottom: 20px;

  transform: translateX(-50%);

  background: rgba(0, 0, 0, 0.85);

  border: 1px solid var(--stroke);

  border-radius: 14px;

  padding: 12px 18px;

  box-shadow: var(--shadow);

  max-width: min(480px, calc(100% - 32px));

  z-index: 100;

}



/* App pages */

.app-page {

  min-height: 100vh;

  display: grid;

  grid-template-columns: 220px 1fr;

}



.app-sidebar {

  padding: 20px 16px;

  border-right: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.25);

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.app-sidebar .brand {

  margin-bottom: 20px;

}



.app-sidebar .nav-item {

  display: block;

  padding: 10px 12px;

  border-radius: 10px;

  font-size: 14px;

  color: var(--muted);

}



.app-sidebar .nav-item.active {

  background: rgba(139, 92, 246, 0.15);

  color: var(--text);

  font-weight: 600;

}



.app-sidebar .nav-item:hover:not(.active) {

  background: rgba(255, 255, 255, 0.04);

}



.app-sidebar button.nav-item {

  width: 100%;

  text-align: left;

  border: none;

  background: none;

  cursor: pointer;

  font-family: inherit;

}



.app-main {

  padding: 24px 28px;

  overflow-y: auto;

}



.app-topbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 24px;

  flex-wrap: wrap;

  gap: 12px;

}



.app-topbar h1 {

  font-family: var(--font-display);

  margin: 0;

  font-size: 26px;

}



.app-badge {

  padding: 6px 12px;

  border-radius: 999px;

  font-size: 12px;

  background: rgba(52, 211, 153, 0.15);

  border: 1px solid rgba(52, 211, 153, 0.3);

  color: var(--green);

}



.app-badge.premium {

  background: rgba(251, 191, 36, 0.15);

  border-color: rgba(251, 191, 36, 0.35);

  color: #fbbf24;

}



.app-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));

  gap: 14px;

}



.app-card {

  padding: 18px;

  border-radius: var(--radius-md);

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.04);

}



.app-card h3 {

  margin: 0 0 6px;

  font-size: 15px;

}



.app-card p {

  margin: 0;

  font-size: 13px;

  color: var(--muted);

}



.app-card.featured {

  border-color: rgba(139, 92, 246, 0.35);

  background: rgba(139, 92, 246, 0.1);

  grid-column: span 2;

}



.progress-bar {

  height: 8px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.1);

  margin-top: 10px;

  overflow: hidden;

}



.progress-bar span {

  display: block;

  height: 100%;

  border-radius: 999px;

  background: linear-gradient(90deg, var(--violet), var(--pink));

}



.demo-banner {

  padding: 10px 14px;

  border-radius: 12px;

  background: rgba(251, 191, 36, 0.12);

  border: 1px solid rgba(251, 191, 36, 0.25);

  font-size: 13px;

  color: var(--gold);

  margin-bottom: 20px;

}



/* Signup wizard */

.signup-page {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px 0;

}



.signup-card {

  width: min(520px, calc(100% - 32px));

  border-radius: 24px;

  border: 1px solid var(--stroke);

  background: rgba(15, 10, 36, 0.92);

  box-shadow: var(--shadow);

  padding: 28px 24px;

}



.signup-steps {

  display: flex;

  gap: 6px;

  margin-bottom: 24px;

}



.signup-step-dot {

  flex: 1;

  height: 4px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.1);

}



.signup-step-dot.active {

  background: linear-gradient(90deg, var(--violet), var(--pink));

}



.signup-step-dot.done {

  background: var(--green);

}



.signup-form {

  display: grid;

  gap: 14px;

}



.field label {

  display: block;

  margin-bottom: 4px;

  font-size: 13px;

  color: var(--muted-2);

}



.field input,

.field select {

  width: 100%;

  padding: 12px 14px;

  border-radius: 12px;

  border: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.3);

  color: var(--text);

}



.field-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

}



.signup-actions {

  display: flex;

  gap: 10px;

  margin-top: 8px;

}



.signup-actions .btn {

  flex: 1;

}



@media (max-width: 960px) {

  .hero-grid,

  .split {

    grid-template-columns: 1fr;

  }



  .steps,

  .subject-grid,

  .outcome-grid,

  .testimonial-grid,

  .safety-grid,

  .pricing-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .app-shell {

    grid-template-columns: 1fr;

  }



  .app-nav {

    flex-direction: row;

    flex-wrap: wrap;

  }



  .price-card.featured {

    transform: none;

  }



  .footer-grid {

    grid-template-columns: 1fr 1fr;

  }



  .cta-inner {

    flex-direction: column;

    align-items: flex-start;

  }



  .app-page {

    grid-template-columns: 1fr;

  }



  .app-sidebar {

    flex-direction: row;

    flex-wrap: wrap;

    border-right: none;

    border-bottom: 1px solid var(--stroke);

  }



  .app-card.featured {

    grid-column: span 1;

  }

}



@media (max-width: 640px) {

  .nav-toggle {

    display: inline-flex;

    align-items: center;

    justify-content: center;

  }



  .nav-menu {

    position: absolute;

    top: 62px;

    right: 16px;

    left: 16px;

    display: none;

    flex-direction: column;

    padding: 12px;

    border-radius: 18px;

    border: 1px solid var(--stroke);

    background: rgba(15, 10, 36, 0.95);

    backdrop-filter: blur(16px);

    box-shadow: var(--shadow);

  }



  .nav-menu[data-open="true"] {

    display: flex;

  }



  .nav-cta {

    margin-left: 0;

    text-align: center;

  }



  .steps,

  .subject-grid,

  .outcome-grid,

  .testimonial-grid,

  .safety-grid,

  .pricing-grid {

    grid-template-columns: 1fr;

  }



  .footer-grid {

    grid-template-columns: 1fr;

  }



  .hero-actions .btn {

    width: 100%;

  }



  .field-row {

    grid-template-columns: 1fr;

  }

}



@media (prefers-reduced-motion: reduce) {

  .btn,

  .subject-card,

  .demo-modal-progress span {

    transition: none;

  }

}



/* Phase 2: Lesson player */

.lesson-body {

  background: var(--bg);

  min-height: 100vh;

}



.lesson-player {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



.lesson-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 16px 24px;

  border-bottom: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.3);

}



.lesson-back {

  font-size: 14px;

  color: var(--muted);

  white-space: nowrap;

}



.lesson-back:hover {

  color: var(--text);

}



.lesson-header-center h1 {

  margin: 0;

  font-family: var(--font-display);

  font-size: 20px;

}



.lesson-header-center p {

  margin: 4px 0 0;

  font-size: 13px;

  color: var(--muted);

}



.lesson-header-actions {

  display: flex;

  gap: 8px;

}



.lesson-main {

  flex: 1;

  display: grid;

  grid-template-columns: 1fr 320px;

  gap: 0;

  min-height: 0;

}



.lesson-canvas {

  padding: 32px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.canvas-label {

  font-size: 12px;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  color: var(--violet-light);

  margin: 0 0 16px;

}



.canvas-math {

  padding: 28px;

  border-radius: var(--radius-lg);

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid var(--stroke);

  margin-bottom: 20px;

}



.math-row {

  display: flex;

  align-items: center;

  gap: 16px;

  font-size: 28px;

  font-weight: 600;

}



.frac-block {

  display: inline-flex;

  flex-direction: column;

  align-items: center;

  line-height: 1.1;

  padding: 8px 12px;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.06);

}



.frac-block.highlight {

  background: rgba(139, 92, 246, 0.2);

  border: 1px solid rgba(139, 92, 246, 0.4);

  color: var(--violet-light);

}



.canvas-explain {

  margin: 0;

  font-size: 15px;

  color: var(--muted);

  max-width: 480px;

}



.lesson-tutor {

  padding: 24px;

  border-left: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.2);

  display: flex;

  flex-direction: column;

  gap: 14px;

}



.tutor-avatar-wrap {

  display: flex;

  align-items: center;

  gap: 10px;

}



.tutor-avatar {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--violet), var(--pink));

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  font-size: 14px;

}



.tutor-name {

  font-weight: 600;

  font-size: 14px;

}



.tutor-speech {

  padding: 14px;

  border-radius: var(--radius-md);

  background: rgba(139, 92, 246, 0.12);

  border: 1px solid rgba(139, 92, 246, 0.25);

  font-size: 14px;

  line-height: 1.5;

}



.tutor-controls {

  display: flex;

  gap: 8px;

}



.tutor-btn {

  width: 36px;

  height: 36px;

  border-radius: 10px;

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.04);

  cursor: pointer;

  font-size: 16px;

}



.tutor-input-row {

  display: flex;

  gap: 8px;

  margin-top: auto;

}



.tutor-input-row input {

  flex: 1;

  padding: 10px 12px;

  border-radius: 10px;

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.04);

  color: var(--text);

  font-family: inherit;

  font-size: 14px;

}



.lesson-response {

  padding: 20px 32px;

  border-top: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.15);

}



.response-prompt {

  margin: 0 0 12px;

  font-size: 14px;

  color: var(--muted);

}



.response-options {

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

}



.response-options.vertical {

  flex-direction: column;

}



.response-opt {

  min-width: 64px;

  padding: 12px 20px;

  border-radius: 12px;

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.04);

  color: var(--text);

  font-size: 16px;

  font-weight: 600;

  cursor: pointer;

  transition: border-color 0.15s, background 0.15s;

}



.response-opt:hover:not(:disabled) {

  border-color: var(--violet-light);

}



.response-opt.selected {

  border-color: var(--violet);

  background: rgba(139, 92, 246, 0.15);

}



.response-opt.correct {

  border-color: var(--green);

  background: rgba(52, 211, 153, 0.15);

  color: var(--green);

}



.response-opt.wrong {

  border-color: #f87171;

  background: rgba(248, 113, 113, 0.12);

}



.response-opt:disabled {

  cursor: default;

  opacity: 0.85;

}



.response-feedback {

  margin: 12px 0 0;

  font-size: 14px;

}



.response-feedback.correct {

  color: var(--green);

}



.response-feedback.wrong {

  color: #f87171;

}



.lesson-footer {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 16px 24px;

  border-top: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.25);

  flex-wrap: wrap;

  position: relative;

  z-index: 6;

}



.lesson-response.is-active,
.lesson-response-active:not([hidden]) {

  display: block;

  position: relative;

  z-index: 5;

  background: rgba(22, 16, 48, 0.98);

  border-top: 2px solid rgba(139, 92, 246, 0.45);

  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);

}



.lesson-answer-options {

  display: flex;

  gap: 12px;

  flex-wrap: wrap;

  justify-content: center;

  padding: 4px 0 8px;

}



.lesson-answer-options .response-opt {

  min-width: 88px;

  min-height: 52px;

  font-size: 18px;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;

}



.shape-scene {

  display: flex;

  gap: 20px;

  align-items: center;

  justify-content: center;

  padding: 24px;

  font-size: 48px;

}



.shape-item.lit { transform: scale(1.2); filter: drop-shadow(0 0 10px rgba(236, 72, 153, 0.7)); transition: transform 0.3s; }

.ten-frame { display: flex; flex-wrap: wrap; gap: 8px; width: 200px; justify-content: center; }

.ten-frame .dot { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 2px solid var(--stroke); }

.ten-frame .dot.lit { background: rgba(139, 92, 246, 0.75); border-color: var(--violet-light); }

.bonds-label, .phonics-word { text-align: center; font-weight: 700; margin-top: 12px; color: var(--violet-light); }

.farm-add { display: flex; align-items: center; gap: 12px; font-size: 36px; padding: 20px; }

.farm-total { color: var(--violet-light); font-weight: 700; min-width: 1.5em; }

.phonics-row { display: flex; gap: 10px; justify-content: center; }

.phonics-row .letter { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(139,92,246,0.25); font-size: 24px; font-weight: 700; transition: transform 0.3s; }

.phonics-row .letter.lit { transform: scale(1.15); background: rgba(236,72,153,0.35); }

.rhyme-pairs { display: flex; flex-direction: column; gap: 12px; font-size: 22px; font-weight: 600; padding: 20px; }

.weather-scene { display: flex; gap: 16px; font-size: 40px; padding: 24px; flex-wrap: wrap; justify-content: center; }

.weather-icon { transition: transform 0.3s; opacity: 0.5; }

.weather-icon.lit { transform: scale(1.2); opacity: 1; }



.confidence-select {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 13px;

  color: var(--muted);

  margin-left: auto;

}



.confidence-select select {

  padding: 6px 10px;

  border-radius: 8px;

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.04);

  color: var(--text);

  font-family: inherit;

  font-size: 13px;

}



/* Phase 2: Homework workspace */

.homework-workspace {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 16px;

}



.hw-panel {

  padding: 18px;

  border-radius: var(--radius-md);

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.03);

}



.hw-panel h2 {

  margin: 0 0 14px;

  font-size: 15px;

}



.hw-sheet-preview {

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.95);

  color: #1a1040;

  padding: 20px;

  min-height: 200px;

}



.hw-sheet-title {

  font-weight: 700;

  margin: 0 0 12px;

  font-size: 14px;

}



.hw-sheet-questions {

  margin: 0;

  padding-left: 20px;

  font-size: 14px;

  line-height: 2;

}



.hw-sheet-questions li.active {

  font-weight: 600;

  color: var(--violet);

}



.hw-crop-text {

  margin: 0 0 12px;

  font-size: 16px;

}



.hw-help-level {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin-bottom: 16px;

}



.help-badge {

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 12px;

  border: 1px solid var(--stroke);

  color: var(--muted);

}



.help-badge.active {

  border-color: var(--violet);

  background: rgba(139, 92, 246, 0.15);

  color: var(--violet-light);

}



.hw-hint-ladder {

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-bottom: 14px;

}



.hint-step {

  display: flex;

  gap: 10px;

  align-items: flex-start;

  padding: 10px;

  border-radius: 10px;

  border: 1px solid var(--stroke);

  opacity: 0.5;

}



.hint-step.active {

  opacity: 1;

  border-color: rgba(139, 92, 246, 0.4);

  background: rgba(139, 92, 246, 0.08);

}



.hint-step.done {

  opacity: 0.7;

}



.hint-num {

  width: 24px;

  height: 24px;

  border-radius: 50%;

  background: rgba(139, 92, 246, 0.2);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  font-weight: 700;

  flex-shrink: 0;

}



.hint-step p {

  margin: 0;

  font-size: 13px;

  line-height: 1.4;

}



.hw-scratchpad {

  margin-bottom: 12px;

}



.hw-scratchpad label {

  display: block;

  font-size: 12px;

  color: var(--muted);

  margin-bottom: 6px;

}



.hw-scratchpad textarea {

  width: 100%;

  padding: 10px;

  border-radius: 10px;

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.04);

  color: var(--text);

  font-family: inherit;

  font-size: 13px;

  resize: vertical;

}



.hw-assist-note {

  margin: 12px 0 0;

  font-size: 12px;

  color: var(--muted);

}



/* Phase 2: Teacher portal */

.teacher-stats {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 14px;

  margin-bottom: 24px;

}



.teacher-stat {

  padding: 16px;

  border-radius: var(--radius-md);

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.04);

  display: flex;

  flex-direction: column;

  gap: 4px;

}



.teacher-stat span:first-child {

  font-size: 12px;

  color: var(--muted);

}



.teacher-stat strong {

  font-size: 24px;

  font-family: var(--font-display);

}



.stat-trend {

  font-size: 12px;

}



.stat-trend.up {

  color: var(--green);

}



.teacher-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

}



.teacher-section {

  padding: 18px;

  border-radius: var(--radius-md);

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.03);

}



.teacher-section.wide {

  grid-column: span 2;

}



.teacher-section h2 {

  margin: 0 0 14px;

  font-size: 16px;

}



.teacher-table {

  display: flex;

  flex-direction: column;

  gap: 2px;

}



.teacher-row {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr 1fr;

  gap: 8px;

  padding: 10px 12px;

  border-radius: 8px;

  font-size: 13px;

  align-items: center;

}



.teacher-row.header {

  color: var(--muted);

  font-size: 12px;

  font-weight: 600;

}



.teacher-row:not(.header):hover {

  background: rgba(255, 255, 255, 0.04);

}



.status-pill {

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 11px;

  font-weight: 600;

  text-align: center;

  width: fit-content;

}



.status-pill.open {

  background: rgba(34, 211, 238, 0.15);

  color: var(--cyan);

}



.status-pill.done {

  background: rgba(52, 211, 153, 0.15);

  color: var(--green);

}



.status-pill.review {

  background: rgba(251, 191, 36, 0.15);

  color: var(--gold);

}



.student-flags {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.student-flag {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  padding: 12px;

  border-radius: 10px;

  border: 1px solid var(--stroke);

}



.student-flag p {

  margin: 4px 0 0;

  font-size: 12px;

  color: var(--muted);

}



.curriculum-map {

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.map-item {

  display: grid;

  grid-template-columns: 180px 1fr;

  gap: 12px;

  align-items: center;

  font-size: 13px;

}



.map-bar {

  height: 8px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.1);

  overflow: hidden;

}



.map-bar span {

  display: block;

  height: 100%;

  border-radius: 999px;

  background: linear-gradient(90deg, var(--violet), var(--cyan));

}



/* Phase 2: Assessment / practice */

.assessment-body {

  background: var(--bg);

  min-height: 100vh;

}



.assessment-player {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



.assessment-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 16px;

  padding: 16px 24px;

  border-bottom: 1px solid var(--stroke);

}



.assessment-mode {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 13px;

  color: var(--muted);

}



.mode-badge {

  padding: 4px 10px;

  border-radius: 999px;

  font-size: 12px;

  font-weight: 600;

}



.mode-badge.practice {

  background: rgba(52, 211, 153, 0.15);

  color: var(--green);

  border: 1px solid rgba(52, 211, 153, 0.3);

}



.assessment-progress-text {

  font-size: 14px;

  color: var(--muted);

}



.assessment-progress-bar {

  height: 4px;

  background: rgba(255, 255, 255, 0.08);

}



.assessment-progress-bar span {

  display: block;

  height: 100%;

  background: linear-gradient(90deg, var(--violet), var(--pink));

  transition: width 0.3s;

}



.assessment-main {

  flex: 1;

  display: grid;

  grid-template-columns: 1fr 280px;

  gap: 0;

  padding: 32px;

}



.assessment-question {

  max-width: 640px;

}



.q-objective {

  margin: 0 0 8px;

  font-size: 13px;

  color: var(--violet-light);

}



.q-prompt {

  margin: 0 0 24px;

  font-family: var(--font-display);

  font-size: 24px;

}



.q-bar-chart {

  display: flex;

  gap: 24px;

  align-items: flex-end;

  height: 120px;

  margin-bottom: 28px;

}



.bar-col {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  height: 100%;

  justify-content: flex-end;

}



.bar-fill {

  width: 48px;

  border-radius: 8px 8px 0 0;

  background: linear-gradient(180deg, var(--violet-light), var(--violet));

  min-height: 8px;

}



.bar-col span {

  font-size: 13px;

  color: var(--muted);

}



.assessment-sidebar {

  padding-left: 24px;

  border-left: 1px solid var(--stroke);

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.assessment-tools {

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.hint-box {

  padding: 12px;

  border-radius: 10px;

  background: rgba(251, 191, 36, 0.1);

  border: 1px solid rgba(251, 191, 36, 0.25);

  font-size: 13px;

}



.hint-box p {

  margin: 0;

}



.mastery-preview {

  margin-top: auto;

  padding: 14px;

  border-radius: var(--radius-md);

  border: 1px solid var(--stroke);

}



.assessment-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 16px 24px;

  border-top: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.2);

}



@media (max-width: 960px) {

  .lesson-main,

  .homework-workspace,

  .assessment-main,

  .teacher-stats,

  .teacher-grid {

    grid-template-columns: 1fr;

  }



  .lesson-tutor,

  .assessment-sidebar {

    border-left: none;

    border-top: 1px solid var(--stroke);

  }



  .teacher-section.wide {

    grid-column: span 1;

  }



  .teacher-stats {

    grid-template-columns: 1fr 1fr;

  }

}



.add-child-modal {

  width: min(480px, calc(100vw - 32px));

  padding: 0;

  border: 1px solid var(--stroke);

  border-radius: var(--radius-lg);

  background: #161030;

  color: var(--text);

}



.add-child-modal::backdrop {

  background: rgba(0, 0, 0, 0.65);

}



.add-child-form {

  padding: 24px;

}



/* Phase 4: AI tutor chat */

.tutor-chat-body {

  background: var(--bg);

  min-height: 100vh;

}



.tutor-chat-app {

  max-width: 720px;

  margin: 0 auto;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



.tutor-chat-header {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 16px 20px;

  border-bottom: 1px solid var(--stroke);

  flex-wrap: wrap;

}



.tutor-chat-header h1 {

  margin: 0;

  font-family: var(--font-display);

  font-size: 20px;

}



.tutor-chat-header .lesson-back {

  margin-right: auto;

}



.tutor-chat-main {

  flex: 1;

  overflow-y: auto;

  padding: 20px;

  display: flex;

  flex-direction: column;

  gap: 14px;

}



.tutor-msg {

  display: flex;

  gap: 10px;

  align-items: flex-start;

  max-width: 92%;

}



.tutor-msg.user {

  align-self: flex-end;

  flex-direction: row;

}



.tutor-msg-avatar {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--violet), var(--pink));

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  font-weight: 700;

  flex-shrink: 0;

}



.tutor-msg-avatar.user {

  background: rgba(255, 255, 255, 0.12);

}



.tutor-msg-bubble {

  padding: 12px 14px;

  border-radius: 14px;

  font-size: 14px;

  line-height: 1.5;

  background: rgba(139, 92, 246, 0.12);

  border: 1px solid rgba(139, 92, 246, 0.25);

}



.tutor-msg.user .tutor-msg-bubble {

  background: rgba(255, 255, 255, 0.06);

  border-color: var(--stroke);

}



.tutor-msg-bubble.thinking {

  opacity: 0.7;

  font-style: italic;

}



.tutor-chat-footer {

  padding: 16px 20px;

  border-top: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.2);

}



.tutor-chat-form {

  display: flex;

  gap: 10px;

}



.tutor-chat-form input {

  flex: 1;

  padding: 12px 14px;

  border-radius: 12px;

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.04);

  color: var(--text);

  font-family: inherit;

  font-size: 14px;

}



/* Video-interactive tutor chat */

.tutor-video-app {

  max-width: 640px;

}



.tutor-header-actions {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  align-items: center;

}



.tutor-video-stage-wrap {

  padding: 16px 20px 8px;

}



.tutor-video-stage {

  max-width: 100%;

}



.tutor-stage-screen {

  flex-direction: column;

  align-items: stretch;

  justify-content: flex-end;

  padding: 16px;

  cursor: pointer;

}



.tutor-stage-bg {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(circle at 20% 30%, rgba(139, 92, 246, 0.35), transparent 45%),

    radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.25), transparent 40%),

    linear-gradient(160deg, #1a1030 0%, #0f172a 100%);

  pointer-events: none;

}



.tutor-stage-sparkles {

  position: absolute;

  inset: 0;

  pointer-events: none;

}



.tutor-stage-sparkles span {

  position: absolute;

  font-size: 18px;

  opacity: 0.7;

  animation: tutor-sparkle 4s ease infinite;

}



.tutor-stage-sparkles span:nth-child(1) { top: 12%; left: 10%; }

.tutor-stage-sparkles span:nth-child(2) { top: 18%; right: 12%; animation-delay: 1.2s; }

.tutor-stage-sparkles span:nth-child(3) { bottom: 38%; left: 18%; animation-delay: 2.1s; }



@keyframes tutor-sparkle {

  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.5; }

  50% { transform: scale(1.2) rotate(12deg); opacity: 1; }

}



.tutor-char-stage {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -58%);

  width: 96px;

  height: 96px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 48px;

  background: linear-gradient(135deg, #8b5cf6, #ec4899);

  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.45);

  transition: transform 0.25s ease;

  z-index: 1;

}



.tutor-char-stage.is-speaking {

  animation: tutor-char-bounce 0.55s ease infinite;

}



.tutor-stage-screen.is-thinking .tutor-char-stage {

  animation: tutor-char-think 1.2s ease infinite;

}



@keyframes tutor-char-bounce {

  0%, 100% { transform: translate(-50%, -58%) scale(1); }

  50% { transform: translate(-50%, -62%) scale(1.06); }

}



@keyframes tutor-char-think {

  0%, 100% { transform: translate(-50%, -58%) rotate(-3deg); }

  50% { transform: translate(-50%, -58%) rotate(3deg); }

}



.tutor-live-bubble {

  position: relative;

  z-index: 2;

  margin-top: auto;

  padding: 14px 16px;

  border-radius: 16px 16px 16px 6px;

  background: rgba(15, 23, 42, 0.88);

  border: 1px solid rgba(139, 92, 246, 0.4);

  font-size: 15px;

  line-height: 1.45;

  min-height: 52px;

  max-height: 120px;

  overflow-y: auto;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);

}



.tutor-stage-screen.is-speaking .tutor-live-bubble {

  border-color: rgba(236, 72, 153, 0.55);

}



.tutor-stage-play {

  bottom: 72px;

  top: auto;

  left: 50%;

  transform: translateX(-50%);

}



.tutor-stage-hint {

  margin: 10px 0 0;

  font-size: 12px;

  color: var(--muted);

  text-align: center;

}



.tutor-quick-topics {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  padding: 0 20px 12px;

}



.tutor-topic-chip {

  padding: 8px 12px;

  border-radius: 999px;

  border: 1px solid rgba(139, 92, 246, 0.35);

  background: rgba(139, 92, 246, 0.12);

  color: var(--text);

  font-family: inherit;

  font-size: 13px;

  cursor: pointer;

  transition: background 0.15s, transform 0.15s;

}



.tutor-topic-chip:hover {

  background: rgba(139, 92, 246, 0.22);

  transform: translateY(-1px);

}



.tutor-chat-thread {

  max-height: 220px;

  min-height: 80px;

  border-top: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.15);

}



.tutor-thread-label {

  margin: 0 0 8px;

  font-size: 11px;

  text-transform: uppercase;

  letter-spacing: 0.06em;

  color: var(--muted);

}



.tutor-year-badge {

  margin: 6px 0 0;

  font-size: 11px;

  color: var(--violet);

  text-align: center;

  font-weight: 600;

}



.tutor-stage-visual {

  position: absolute;

  top: 8px;

  left: 8px;

  right: 8px;

  z-index: 1;

  pointer-events: none;

}



.tutor-stage-screen.has-visual .tutor-char-stage {

  transform: translate(-50%, -72%) scale(0.82);

  opacity: 0.92;

}



.tutor-viz {

  padding: 8px 10px;

  border-radius: 12px;

  background: rgba(15, 23, 42, 0.75);

  border: 1px solid rgba(139, 92, 246, 0.3);

  backdrop-filter: blur(4px);

}



.tutor-viz-label {

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

  color: rgba(255, 255, 255, 0.55);

  margin-bottom: 6px;

}



.tutor-viz-numberline .tutor-viz-line {

  display: flex;

  gap: 2px;

  overflow-x: auto;

  padding-bottom: 2px;

}



.tutor-viz-tick {

  flex: 1;

  min-width: 18px;

  text-align: center;

  font-size: 11px;

  padding: 4px 2px;

  border-radius: 6px;

  background: rgba(255, 255, 255, 0.06);

  color: rgba(255, 255, 255, 0.7);

  transition: background 0.2s, transform 0.2s;

}



.tutor-viz-tick.highlight {

  background: rgba(139, 92, 246, 0.55);

  color: #fff;

  font-weight: 700;

  transform: scale(1.08);

}



.tutor-viz-tiles {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

}



.tutor-viz-tile {

  padding: 6px 10px;

  border-radius: 8px;

  background: rgba(236, 72, 153, 0.25);

  border: 1px solid rgba(236, 72, 153, 0.45);

  font-size: 13px;

  font-weight: 600;

  text-transform: lowercase;

}



.tutor-viz-shape-row {

  display: flex;

  gap: 10px;

  justify-content: center;

  font-size: 22px;

}



.tutor-viz-shape-row .shape.square { color: #22d3ee; }

.tutor-viz-shape-row .shape.circle { color: #f472b6; }

.tutor-viz-shape-row .shape.triangle { color: #fbbf24; }

.tutor-viz-shape-row .shape.rect { color: #34d399; }



.tutor-viz-frac-bar {

  display: flex;

  gap: 3px;

  height: 22px;

  border-radius: 6px;

  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.2);

}



.tutor-viz-frac-bar span {

  flex: 1;

  background: rgba(255, 255, 255, 0.12);

}



.tutor-viz-frac-bar span.filled {

  background: linear-gradient(90deg, var(--violet), #ec4899);

}



.tutor-viz-caption {

  margin: 6px 0 0;

  font-size: 12px;

  text-align: center;

  color: rgba(255, 255, 255, 0.75);

}



.tutor-viz-weather {

  display: flex;

  justify-content: center;

  gap: 12px;

  font-size: 24px;

}



.tutor-viz-weather span {

  animation: tutor-sparkle 3s ease infinite;

}



.tutor-viz-weather span:nth-child(2) { animation-delay: 0.5s; }

.tutor-viz-weather span:nth-child(3) { animation-delay: 1s; }

.tutor-viz-weather span:nth-child(4) { animation-delay: 1.5s; }



.tutor-viz-idea {

  display: flex;

  align-items: center;

  gap: 8px;

  justify-content: center;

  padding: 4px 0;

}



.tutor-viz-bulb {

  font-size: 22px;

  animation: tutor-sparkle 2s ease infinite;

}



.tutor-viz-idea-text {

  font-size: 12px;

  color: rgba(255, 255, 255, 0.8);

}



.tutor-char-stage[data-char-theme="byte"] {

  box-shadow: 0 8px 32px rgba(244, 114, 182, 0.45);

}



.tutor-char-stage[data-char-theme="spark"] {

  box-shadow: 0 8px 32px rgba(249, 115, 22, 0.5);

}



.tutor-char-stage[data-char-theme="luna"] {

  box-shadow: 0 8px 32px rgba(103, 232, 249, 0.45);

}



.tutor-char-stage[data-char-theme="hoot"] {

  box-shadow: 0 8px 32px rgba(251, 191, 36, 0.45);

}



.tutor-char-stage[data-char-theme="astro"] {

  box-shadow: 0 8px 32px rgba(217, 119, 6, 0.45);

}



.tutor-stage-screen[data-char-theme] .tutor-stage-bg {

  opacity: 1;

}



.tutor-stage-screen[data-char-theme="byte"] .tutor-stage-bg {

  background:

    radial-gradient(circle at 30% 40%, rgba(244, 114, 182, 0.3), transparent 50%),

    linear-gradient(160deg, #2a1020 0%, #0f172a 100%);

}



.tutor-stage-screen[data-char-theme="spark"] .tutor-stage-bg {

  background:

    radial-gradient(circle at 70% 30%, rgba(249, 115, 22, 0.35), transparent 45%),

    linear-gradient(160deg, #2a1508 0%, #0f172a 100%);

}



.tutor-stage-screen[data-char-theme="luna"] .tutor-stage-bg {

  background:

    radial-gradient(circle at 50% 20%, rgba(103, 232, 249, 0.35), transparent 50%),

    linear-gradient(160deg, #0a2030 0%, #0f172a 100%);

}



.tutor-stage-screen[data-char-theme="hoot"] .tutor-stage-bg {

  background:

    radial-gradient(circle at 40% 50%, rgba(251, 191, 36, 0.3), transparent 45%),

    linear-gradient(160deg, #2a2008 0%, #0f172a 100%);

}



.tutor-stage-screen[data-char-theme="astro"] .tutor-stage-bg {

  background:

    radial-gradient(circle at 60% 40%, rgba(217, 119, 6, 0.35), transparent 45%),

    linear-gradient(160deg, #2a1808 0%, #0f172a 100%);

}



.tutor-char-option strong + span {

  font-size: 11px;

  opacity: 0.85;

}



.tutor-live-badge {

  font-size: 10px;

  padding: 2px 8px;

  border-radius: 999px;

  background: rgba(52, 211, 153, 0.15);

  color: var(--green);

  border: 1px solid rgba(52, 211, 153, 0.3);

}



.tutor-btn.send {

  background: var(--violet);

  color: white;

  border-color: transparent;

}



.hw-ai-hint {

  margin-top: 12px;

  padding: 12px;

  border-radius: 10px;

  background: rgba(139, 92, 246, 0.1);

  border: 1px solid rgba(139, 92, 246, 0.25);

  font-size: 13px;

  line-height: 1.5;

  display: flex;

  gap: 10px;

  align-items: flex-start;

}



/* Tutor cartoon characters */

.tutor-char-avatar {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 18px;

  flex-shrink: 0;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

}



.tutor-char-avatar.large {

  width: 56px;

  height: 56px;

  font-size: 28px;

}



.tutor-char-avatar.small {

  width: 28px;

  height: 28px;

  font-size: 14px;

}



.tutor-char-avatar.inline {

  width: 24px;

  height: 24px;

  font-size: 12px;

  vertical-align: middle;

}



.tutor-header-char {

  display: flex;

  align-items: center;

  gap: 12px;

}



.tutor-char-preview-card {

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px;

  border-radius: 12px;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid var(--stroke);

}



.tutor-char-preview-card p {

  margin: 4px 0 0;

  font-size: 12px;

  color: var(--muted);

}



.character-picker-modal,

.character-picker-modal::backdrop {

  border: none;

}



.character-picker-modal {

  width: min(560px, calc(100vw - 32px));

  padding: 0;

  border-radius: var(--radius-lg);

  background: #161030;

  color: var(--text);

  border: 1px solid var(--stroke);

}



.character-picker-modal::backdrop {

  background: rgba(0, 0, 0, 0.65);

}



.character-picker-inner {

  padding: 24px;

}



.character-picker-inner h2 {

  margin: 0 0 6px;

  font-family: var(--font-display);

}



.character-picker-inner > p {

  margin: 0 0 16px;

  color: var(--muted);

  font-size: 14px;

}



.tutor-char-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 12px;

}



.tutor-char-grid.compact {

  grid-template-columns: repeat(3, 1fr);

  gap: 8px;

}



.tutor-char-option {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  padding: 14px 10px;

  border-radius: 14px;

  border: 2px solid var(--stroke);

  background: rgba(255, 255, 255, 0.03);

  cursor: pointer;

  font-family: inherit;

  color: var(--text);

  transition: border-color 0.15s, background 0.15s;

}



.tutor-char-option.compact {

  padding: 10px 8px;

}



.tutor-char-option:hover {

  border-color: var(--violet-light);

  background: rgba(139, 92, 246, 0.08);

}



.tutor-char-option.selected {

  border-color: var(--violet);

  background: rgba(139, 92, 246, 0.15);

  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.3);

}



.tutor-char-option.locked {

  opacity: 0.55;

  cursor: not-allowed;

  position: relative;

}



.tutor-char-option.locked .tutor-char-avatar {

  filter: grayscale(0.6);

}



.tutor-char-badge {

  font-size: 10px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  padding: 2px 6px;

  border-radius: 999px;

  background: rgba(251, 191, 36, 0.2);

  color: #fbbf24;

  border: 1px solid rgba(251, 191, 36, 0.35);

}



.tutor-char-plan-note {

  margin: 14px 0 0;

  font-size: 13px;

  color: var(--muted);

  line-height: 1.5;

}



.child-login-card {

  max-width: 440px;

}



.child-login-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 10px;

}



.child-login-option {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  padding: 16px 12px;

  border-radius: 14px;

  border: 2px solid var(--stroke);

  background: rgba(255, 255, 255, 0.03);

  cursor: pointer;

  font-family: inherit;

  color: var(--text);

}



.child-login-option.selected,

.child-login-option:hover {

  border-color: var(--violet-light);

  background: rgba(139, 92, 246, 0.08);

}



.child-login-avatar {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 20px;

  font-weight: 700;

  background: linear-gradient(135deg, #8b5cf6, #ec4899);

}



.children-manage-layout {

  display: grid;

  grid-template-columns: minmax(160px, 220px) 1fr;

  gap: 20px;

  align-items: start;

}



.children-name-list {

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid var(--stroke);

  border-radius: var(--radius-lg);

  padding: 14px;

}



.children-name-list-label {

  margin: 0 0 10px;

  font-size: 12px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  color: var(--muted);

}



.children-name-list ul {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: 6px;

}



.children-name-btn {

  width: 100%;

  text-align: left;

  padding: 10px 12px;

  border-radius: 10px;

  border: 1px solid transparent;

  background: transparent;

  color: var(--text);

  font-family: inherit;

  font-size: 14px;

  font-weight: 500;

  cursor: pointer;

  transition: background 0.15s, border-color 0.15s;

}



.children-name-btn:hover {

  background: rgba(139, 92, 246, 0.08);

}



.children-name-btn.active {

  background: rgba(139, 92, 246, 0.15);

  border-color: rgba(139, 92, 246, 0.35);

  color: var(--violet-light);

}



.children-detail-panel {

  min-height: 320px;

}



.child-pin-section {

  padding-top: 4px;

  border-top: 1px solid var(--stroke);

  margin-top: 8px;

}



@media (max-width: 720px) {

  .children-manage-layout {

    grid-template-columns: 1fr;

  }

}



.tutor-char-option strong {

  font-size: 13px;

}



.tutor-char-option span:last-child {

  font-size: 11px;

  color: var(--muted);

  text-align: center;

  line-height: 1.3;

}



.tutor-msg .tutor-char-avatar {

  margin-top: 2px;

}



@media (max-width: 480px) {

  .tutor-char-grid {

    grid-template-columns: repeat(2, 1fr);

  }

}



/* Lesson library */

.lesson-subject-tabs {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 20px;

}



.lesson-subject-tab {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 8px 14px;

  border-radius: 999px;

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.03);

  color: var(--text);

  font-family: inherit;

  font-size: 13px;

  cursor: pointer;

}



.lesson-subject-tab.active {

  border-color: var(--violet);

  background: rgba(139, 92, 246, 0.15);

  color: var(--violet-light);

}



.lesson-tab-count {

  font-size: 11px;

  padding: 2px 6px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.08);

}



.lesson-library-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 16px;

}



.lesson-library-card {

  display: flex;

  gap: 14px;

  padding: 16px;

  border-radius: var(--radius-lg);

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.03);

}



.lesson-library-card.completed {

  border-color: rgba(52, 211, 153, 0.35);

}



.lesson-library-thumb {

  width: 56px;

  height: 56px;

  border-radius: 14px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 28px;

  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.15));

  flex-shrink: 0;

}



.lesson-library-body h3 {

  margin: 4px 0 6px;

  font-size: 16px;

  font-family: var(--font-display);

}



.lesson-library-body p {

  margin: 0;

  font-size: 13px;

  color: var(--muted);

  line-height: 1.45;

}



.lesson-library-badges {

  display: flex;

  gap: 6px;

  flex-wrap: wrap;

  margin: 6px 0 0;

}



.lesson-badge {

  font-size: 11px;

  padding: 2px 8px;

  border-radius: 999px;

  background: rgba(139, 92, 246, 0.15);

  color: var(--violet-light);

  border: 1px solid rgba(139, 92, 246, 0.25);

}



.rocket-scene {

  display: flex;

  gap: 12px;

  align-items: flex-end;

  justify-content: center;

  padding: 24px;

  width: 100%;

  min-height: 180px;

}



.lesson-load-error {

  text-align: center;

  padding: 32px 20px;

  max-width: 420px;

  margin: 0 auto;

}



.lesson-load-error p {

  margin: 0 0 12px;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.5;

}



.lesson-load-slug code {

  font-size: 12px;

  color: var(--violet-light);

}



.lesson-picker-list {

  display: flex;

  flex-direction: column;

  gap: 8px;

  width: 100%;

  max-width: 360px;

  margin: 0 auto;

}



.lesson-picker-item {

  justify-content: flex-start;

  text-align: left;

  width: 100%;

}



.lesson-playback-status {

  margin: 4px 0 0;

  font-size: 12px;

  color: var(--violet-light);

}



.place-col {

  display: flex;

  flex-direction: column;

  align-items: center;

  padding: 12px 16px;

  border-radius: 12px;

  background: rgba(99, 102, 241, 0.2);

  border: 1px solid rgba(99, 102, 241, 0.4);

  transition: transform 0.3s, background 0.3s, box-shadow 0.3s;

}



.place-col.lit {

  background: rgba(139, 92, 246, 0.45);

  border-color: rgba(236, 72, 153, 0.6);

  transform: scale(1.08);

  box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);

}



.rocket-ship.launch {

  animation: rocket-launch 1.2s ease forwards;

}



.safari-animal.spotlight {

  transform: scale(1.25);

  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8));

  z-index: 1;

}



.place-col span { font-size: 28px; font-weight: 700; }

.place-col small { font-size: 11px; color: var(--muted); }

.rocket-ship { font-size: 40px; animation: rocket-launch 3s ease infinite; }



@keyframes rocket-pulse {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-4px); }

}



@keyframes rocket-launch {

  0%, 100% { transform: translateY(0) rotate(-5deg); }

  50% { transform: translateY(-12px) rotate(5deg); }

}



.story-scene {

  display: flex;

  gap: 20px;

  align-items: center;

  justify-content: center;

  padding: 32px;

  font-size: 48px;

}



.story-map { animation: animate-drop 2s ease infinite; }

.story-character { animation: float 2.5s ease infinite; }



@keyframes animate-drop {

  0%, 100% { transform: translateY(-8px); opacity: 0.9; }

  50% { transform: translateY(8px); opacity: 1; }

}



.coaster-stage {

  position: relative;

  width: 100%;

  height: 100%;

  min-height: 180px;

}



.coaster-track {

  position: absolute;

  bottom: 30%;

  left: 10%;

  right: 10%;

  height: 4px;

  background: linear-gradient(90deg, transparent, #8b5cf6, #ec4899, transparent);

  border-radius: 999px;

}



.coaster-cart {

  position: absolute;

  font-size: 40px;

  animation: coaster-ride 4s ease-in-out infinite;

}



.force-arrow {

  position: absolute;

  font-size: 14px;

  color: var(--violet-light);

}



.force-arrow.gravity { bottom: 15%; left: 45%; animation: float 2s ease infinite; }



@keyframes coaster-ride {

  0% { left: 10%; bottom: 32%; transform: rotate(-10deg); }

  50% { left: 50%; bottom: 55%; transform: rotate(0deg); }

  100% { left: 85%; bottom: 32%; transform: rotate(10deg); }

}



.decimal-stage { padding: 20px; width: 100%; }

.numberline {

  display: flex;

  justify-content: space-between;

  margin-bottom: 16px;

  font-size: 14px;

  font-weight: 600;

}



.numberline .active { color: var(--violet-light); }



.chocolate-bar {

  display: flex;

  gap: 2px;

  justify-content: center;

}



.chocolate-bar span {

  width: 24px;

  height: 32px;

  background: #78350f;

  border-radius: 4px;

}



.chocolate-bar span.lit { background: #fbbf24; animation: grow 1.5s ease infinite; }



.code-stage { padding: 24px; text-align: center; }

.code-row { display: flex; gap: 8px; justify-content: center; font-size: 28px; font-weight: 700; }

.code-row span {

  width: 40px;

  height: 40px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 8px;

  background: rgba(139, 92, 246, 0.2);

  animation: rocket-pulse 2s ease infinite;

}

.code-row.result span { background: rgba(34, 211, 238, 0.25); }

.code-arrow { font-size: 13px; color: var(--muted); margin: 10px 0; }



.blocks-stage { padding: 20px; text-align: center; }

.percent-grid { display: flex; gap: 4px; justify-content: center; margin-bottom: 12px; }

.percent-grid .block {

  width: 28px;

  height: 28px;

  background: rgba(139, 92, 246, 0.35);

  border-radius: 4px;

  animation: rocket-pulse 2.5s ease infinite;

}



.digit-highlight { color: #f472b6; font-size: 1.2em; }



.pizza-label { text-align: center; font-weight: 700; margin-top: 12px; color: var(--violet-light); }



.lesson-library-subject {

  font-size: 11px !important;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  color: var(--violet-light) !important;

}



.lesson-library-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: 12px;

}



.lesson-library-status {

  font-size: 12px;

  color: var(--muted);

}



.lesson-library-empty {

  grid-column: 1 / -1;

  color: var(--muted);

  font-size: 14px;

}



/* Video lesson stages */

.lesson-video-canvas {

  min-height: 320px;

  flex-direction: column;

  align-items: stretch;

  padding: 20px 24px 28px;

}



.canvas-label:empty,

.canvas-label[hidden] {

  display: none;

}



.lesson-stage-wrap {

  min-height: 280px;

  width: 100%;

  max-width: 780px;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  align-items: stretch;

  justify-content: center;

  gap: 16px;

  padding: 0;

}



/* Classroom video lesson — teacher at board */

.classroom-video-stage,

.classroom-quiz-stage {

  width: 100%;

  max-width: 780px;

  margin: 0 auto;

}



.classroom-frame {

  position: relative;

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(139, 92, 246, 0.25);

  background: #1a1208;

}



.classroom-badge {

  position: absolute;

  top: 10px;

  left: 12px;

  z-index: 5;

  font-size: 11px;

  font-weight: 700;

  padding: 4px 10px;

  border-radius: 999px;

  background: rgba(239, 68, 68, 0.9);

  color: #fff;

  letter-spacing: 0.03em;

  animation: classroom-live-pulse 2s ease infinite;

}



@keyframes classroom-live-pulse {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.75; }

}



.classroom-room {

  position: relative;

  aspect-ratio: 16 / 9;

  min-height: 300px;

  background: linear-gradient(180deg, #87ceeb 0%, #87ceeb 38%, #c4a574 38%, #a08050 100%);

  overflow: hidden;

}



.classroom-window {

  position: absolute;

  top: 8%;

  right: 6%;

  width: 22%;

  height: 28%;

  background: linear-gradient(180deg, #bae6fd, #7dd3fc);

  border: 4px solid #8b6914;

  border-radius: 4px;

  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.4);

}



.window-sun {

  position: absolute;

  top: 12%;

  right: 15%;

  font-size: 22px;

  animation: float 4s ease infinite;

}



.window-cloud {

  position: absolute;

  top: 35%;

  left: 10%;

  font-size: 16px;

  opacity: 0.85;

}



.classroom-shelf {

  position: absolute;

  top: 10%;

  left: 4%;

  display: flex;

  gap: 6px;

  font-size: 18px;

  padding: 6px 10px;

  background: rgba(139, 105, 20, 0.35);

  border-radius: 8px;

  border: 2px solid #8b6914;

}



.classroom-projector {

  position: absolute;

  top: 5%;

  left: 3%;

  width: 62%;

  height: 58%;

  z-index: 3;

}



.projector-screen {

  position: relative;

  width: 100%;

  height: 100%;

  background: linear-gradient(160deg, #1a1030, #0f172a);

  border: 5px solid #444;

  border-radius: 8px;

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 0 40px rgba(139, 92, 246, 0.08);

  overflow: hidden;

}



.classroom-projector.is-playing .projector-screen {

  border-color: rgba(139, 92, 246, 0.5);

  box-shadow: 0 0 24px rgba(139, 92, 246, 0.25);

}



.classroom-play-btn {

  position: absolute;

  inset: 0;

  z-index: 10;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 10px;

  border: none;

  cursor: pointer;

  background: rgba(0, 0, 0, 0.55);

  color: #fff;

  font-family: inherit;

  transition: background 0.2s;

}



.classroom-play-btn:hover {

  background: rgba(0, 0, 0, 0.65);

}



.classroom-play-btn[hidden] {

  display: none !important;

}



.classroom-play-icon {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  background: linear-gradient(135deg, var(--violet), #ec4899);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;

  box-shadow: 0 4px 20px rgba(139, 92, 246, 0.5);

  animation: video-pulse 1.5s ease infinite;

}



.classroom-play-label {

  font-size: 15px;

  font-weight: 600;

}



.classroom-board {

  position: absolute;

  top: 5%;

  right: 3%;

  width: 28%;

  height: 58%;

  z-index: 2;

}



.board-frame {

  width: 100%;

  height: 100%;

  background: linear-gradient(165deg, #1e4620 0%, #163318 100%);

  border: 5px solid #8b6914;

  border-radius: 6px;

  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);

  padding: 8px 10px;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  position: relative;

}



.classroom-board.is-active .board-frame {

  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 24px rgba(255, 255, 255, 0.08);

}



.board-corner {

  position: absolute;

  top: 8px;

  right: 10px;

  font-size: 14px;

  opacity: 0.7;

}



.board-title {

  margin: 0 0 4px;

  font-family: var(--font-display);

  font-size: clamp(11px, 1.6vw, 14px);

  color: #fef08a;

  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);

  font-weight: 700;

  line-height: 1.2;

}



.board-chalk-lines {

  flex: 1;

  overflow-y: auto;

}



.board-line {

  margin: 0 0 4px;

  font-size: clamp(10px, 1.4vw, 12px);

  color: rgba(255, 255, 255, 0.92);

  font-family: "Comic Sans MS", "Chalkboard SE", cursive, sans-serif;

  line-height: 1.3;

  animation: chalk-write 0.5s ease backwards;

}



@keyframes chalk-write {

  from { opacity: 0; transform: translateX(-6px); }

  to { opacity: 1; transform: translateX(0); }

}



.classroom-lesson-content {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}



.classroom-lesson-content .safari-scene,

.classroom-lesson-content .shape-scene,

.classroom-lesson-content .farm-add,

.classroom-lesson-content .phonics-row,

.classroom-lesson-content .weather-scene,

.classroom-lesson-content .ten-frame,

.classroom-lesson-content .rhyme-pairs,

.classroom-lesson-content .rocket-scene,

.classroom-lesson-content .pizza-scene {

  width: 100%;

  height: 100%;

  transform: none;

}



.classroom-lesson-content .safari-animal {

  font-size: clamp(28px, 5vw, 42px);

}



.classroom-teacher {

  position: absolute;

  bottom: 14%;

  left: 3%;

  z-index: 5;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 2px;

  transition: transform 0.3s ease;

  pointer-events: none;

}



.classroom-teacher.is-speaking {

  animation: teacher-teach-bounce 0.6s ease infinite;

}



.classroom-teacher.is-speaking .teacher-pointer {

  animation: teacher-point 0.8s ease infinite;

}



@keyframes teacher-teach-bounce {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-6px); }

}



@keyframes teacher-point {

  0%, 100% { transform: translate(0, 0); }

  50% { transform: translate(8px, -4px); }

}



.teacher-body {

  position: relative;

  display: flex;

  align-items: flex-end;

  gap: 4px;

}



.teacher-avatar-wrap {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);

  border: 3px solid #fff;

}



.teacher-avatar {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 28px;

  background: linear-gradient(135deg, #8b5cf6, #ec4899);

}



.teacher-pointer {

  font-size: 22px;

  margin-bottom: 4px;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));

}



.teacher-name {

  font-size: 12px;

  font-weight: 700;

  color: #fff;

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);

  background: rgba(0, 0, 0, 0.35);

  padding: 2px 8px;

  border-radius: 999px;

}



.teacher-role {

  font-size: 10px;

  color: rgba(255, 255, 255, 0.85);

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

}



.classroom-floor {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 18%;

  background: repeating-linear-gradient(

    90deg,

    #b8956a 0px,

    #b8956a 40px,

    #a08050 40px,

    #a08050 80px

  );

  opacity: 0.55;

}



.classroom-subtitles {

  background: rgba(0, 0, 0, 0.88);

  color: #fff;

  padding: 10px 16px;

  font-size: 14px;

  line-height: 1.45;

  min-height: 44px;

  text-align: center;

  border-top: 2px solid rgba(139, 92, 246, 0.4);

}



.classroom-progress {

  margin: 0;

  border-radius: 0;

  height: 5px;

}



.classroom-quiz-stage .classroom-projector {

  width: 68%;

  height: 65%;

}



.classroom-quiz-stage .classroom-board {

  width: 26%;

  height: 65%;

}



.classroom-quiz-stage .classroom-teacher.mini {

  bottom: 8%;

  left: 6%;

  flex-direction: row;

  gap: 8px;

}



.classroom-quiz-stage .teacher-avatar {

  width: 44px;

  height: 44px;

  font-size: 24px;

}



.board-placeholder {

  text-align: center;

  color: rgba(255, 255, 255, 0.8);

  font-size: 14px;

}



.board-placeholder span {

  font-size: 32px;

  display: block;

  margin-bottom: 6px;

}



.lesson-interactive-prompt {

  margin: 0;

  font-size: 16px;

  font-weight: 600;

  text-align: center;

  color: var(--text);

  max-width: 420px;

}



.lesson-stage-options {

  justify-content: center;

  width: 100%;

  max-width: 420px;

}



.lesson-stage-options .response-opt {

  flex: 1;

  min-width: 80px;

}



.video-stage {

  width: 100%;

  max-width: 520px;

  margin: 0 auto;

}



.video-stage-screen {

  position: relative;

  aspect-ratio: 16 / 10;

  border-radius: 16px;

  background: linear-gradient(145deg, #1a1030, #0f172a);

  border: 2px solid rgba(139, 92, 246, 0.35);

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}



.video-play-pulse {

  position: absolute;

  width: 48px;

  height: 48px;

  border-radius: 50%;

  background: rgba(139, 92, 246, 0.8);

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  animation: video-pulse 1.5s ease infinite;

  border: none;

  cursor: pointer;

  z-index: 2;

}



.video-play-pulse[hidden] {

  display: none !important;

}



.animated-watch.is-playing .video-play-pulse {

  display: none;

}



.animated-watch.is-paused .safari-animal,

.animated-watch.is-paused .coaster-cart,

.animated-watch.is-paused .plant-step,

.animated-watch.is-paused .rocket-ship,

.animated-watch.is-paused .story-map,

.animated-watch.is-paused .story-character,

.animated-watch.is-paused .place-col,

.animated-watch.is-paused .code-row span,

.animated-watch.is-paused .percent-grid .block {

  animation-play-state: paused;

}



@keyframes video-pulse {

  0%, 100% { transform: scale(1); opacity: 0.9; }

  50% { transform: scale(1.08); opacity: 0.6; }

}



.video-stage-bar {

  height: 4px;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 999px;

  margin-top: 10px;

  overflow: hidden;

}



.video-stage-progress {

  display: block;

  height: 100%;

  width: 0;

  background: linear-gradient(90deg, var(--violet), #ec4899);

  border-radius: 999px;

}



.safari-scene { position: relative; width: 100%; height: 100%; }

.safari-sun { position: absolute; top: 12%; right: 15%; font-size: 28px; animation: float 3s ease infinite; }

.safari-animal { position: absolute; font-size: 32px; animation: walk 4s ease infinite; }

.safari-animal.a1 { bottom: 20%; left: 10%; }

.safari-animal.a2 { bottom: 25%; left: 35%; animation-delay: 0.5s; }

.safari-animal.a3 { bottom: 18%; left: 58%; animation-delay: 1s; }

.safari-animal.a4 { bottom: 22%; left: 78%; animation-delay: 1.5s; }



@keyframes walk {

  0%, 100% { transform: translateX(0); }

  50% { transform: translateX(12px); }

}



@keyframes float {

  0%, 100% { transform: translateY(0); }

  50% { transform: translateY(-8px); }

}



.pizza-base {

  width: 160px;

  height: 160px;

  border-radius: 50%;

  background: #fbbf24;

  position: relative;

  border: 6px solid #d97706;

}



.pizza-slice {

  position: absolute;

  width: 50%;

  height: 50%;

  top: 0;

  left: 25%;

  transform-origin: bottom center;

  background: rgba(251, 191, 36, 0.5);

  clip-path: polygon(50% 100%, 0 0, 100% 0);

  transition: background 0.4s;

}



.pizza-slice.s1 { transform: rotate(0deg); }

.pizza-slice.s2 { transform: rotate(90deg); }

.pizza-slice.s3 { transform: rotate(180deg); }

.pizza-slice.s4 { transform: rotate(270deg); }

.pizza-slice.lit { background: rgba(239, 68, 68, 0.75); }



.plant-stage {

  display: flex;

  gap: 16px;

  align-items: flex-end;

  justify-content: center;

  padding: 24px;

}



.plant-step { font-size: 36px; animation: grow 2s ease infinite; }

.plant-step.p2 { animation-delay: 0.5s; }

.plant-step.p3 { animation-delay: 1s; }

.plant-step.p4 { animation-delay: 1.5s; }



@keyframes grow {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.15); }

}



.word-stage {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 22px;

  font-weight: 700;

  padding: 24px;

}



.word-morph.result { color: var(--violet-light); }



.interactive-stage {

  font-size: 28px;

  text-align: center;

  padding: 32px;

}



.lesson-video {

  width: 100%;

  max-height: 320px;

  border-radius: 12px;

  background: #000;

}



.video-caption {

  margin: 8px 0 0;

  font-size: 13px;

  color: var(--muted);

  text-align: center;

}



.lesson-game-overlay {

  position: fixed;

  inset: 0;

  z-index: 200;

  background: rgba(0, 0, 0, 0.75);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

}



.lesson-game-modal {

  width: min(480px, 100%);

  background: #161030;

  border: 1px solid var(--stroke);

  border-radius: var(--radius-lg);

  padding: 24px;

  max-height: 90vh;

  overflow-y: auto;

}



.lesson-game-header {

  display: flex;

  gap: 14px;

  align-items: flex-start;

  margin-bottom: 16px;

}



.lesson-game-char {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 26px;

  background: var(--game-accent, linear-gradient(135deg, #8b5cf6, #ec4899));

  flex-shrink: 0;

}



.lesson-game-header h2 {

  margin: 0 0 4px;

  font-family: var(--font-display);

  font-size: 20px;

}



.lesson-game-header p {

  margin: 0;

  font-size: 13px;

  color: var(--muted);

  line-height: 1.45;

}



.lesson-game-score {

  font-size: 14px;

  font-weight: 600;

  color: var(--violet-light);

  margin-bottom: 14px;

}



.lesson-game-area {

  min-height: 180px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}



.game-tap-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  justify-content: center;

}



.game-tap-item {

  width: 64px;

  height: 64px;

  border-radius: 16px;

  border: 2px solid var(--stroke);

  background: rgba(139, 92, 246, 0.12);

  font-size: 28px;

  cursor: pointer;

  transition: transform 0.15s, opacity 0.15s;

}



.game-tap-item.done {

  transform: scale(0.9);

  opacity: 0.4;

}



.game-tap-label, .game-speed-prompt {

  margin-top: 16px;

  font-size: 14px;

  color: var(--muted);

  text-align: center;

}



.game-win {

  font-size: 18px;

  text-align: center;

  margin: 0 0 8px;

}



.game-pizza .pizza-slice {

  cursor: pointer;

  border: none;

  padding: 0;

}



/* Synthesis Tutor-style session (lessons + chat) */

.visually-hidden {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}



.synthesis-session-page {

  background: #0b0f1a;

}



.synthesis-session {

  max-width: 920px;

  margin: 0 auto;

  min-height: 100vh;

  display: flex;

  flex-direction: column;

}



.synthesis-header {

  padding: 14px 20px;

  border-bottom: 1px solid var(--stroke);

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

}



.synthesis-body {

  flex: 1;

  display: flex;

  flex-direction: column;

  gap: 0;

  min-height: 0;

}



.synthesis-stage-area {

  padding: 16px 16px 8px;

  flex-shrink: 0;

}



.synthesis-stage,

.synthesis-tutor-canvas {

  width: 100%;

}



.synthesis-progress-top {

  height: 4px;

  background: rgba(255, 255, 255, 0.08);

  overflow: hidden;

}



.synthesis-progress-top .video-stage-progress {

  display: block;

  height: 100%;

  width: 0;

  background: linear-gradient(90deg, #6366f1, #ec4899);

}



.synthesis-canvas-wrap {

  position: relative;

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);

  border: 1px solid rgba(255, 255, 255, 0.08);

}



.synthesis-canvas {

  position: relative;

  aspect-ratio: 16 / 10;

  min-height: 280px;

  background: linear-gradient(145deg, #12182b 0%, #0a0e18 100%);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}



.synthesis-canvas-bg {

  position: absolute;

  inset: 0;

  background:

    radial-gradient(circle at 30% 20%, rgba(99, 102, 241, 0.2), transparent 50%),

    radial-gradient(circle at 70% 80%, rgba(236, 72, 153, 0.15), transparent 45%);

  pointer-events: none;

}



.classroom-lesson-content {

  position: relative;

  z-index: 1;

  width: 92%;

  height: 75%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.synthesis-play-btn {

  position: absolute;

  inset: 0;

  z-index: 5;

  border: none;

  cursor: pointer;

  background: rgba(0, 0, 0, 0.5);

  color: #fff;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 12px;

  font-family: inherit;

  font-size: 16px;

  font-weight: 600;

}



.synthesis-play-btn[hidden] {

  display: none !important;

}



.synthesis-play-icon {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  background: linear-gradient(135deg, #6366f1, #ec4899);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 28px;

  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.45);

  animation: video-pulse 1.5s ease infinite;

}



.synthesis-tutor-float {

  position: absolute;

  bottom: 16px;

  left: 16px;

  z-index: 4;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  pointer-events: none;

}



.synthesis-avatar-ring {

  width: 64px;

  height: 64px;

  border-radius: 50%;

  padding: 3px;

  background: linear-gradient(135deg, #6366f1, #ec4899);

  display: flex;

  align-items: center;

  justify-content: center;

}



.synthesis-avatar-ring .teacher-avatar,

.synthesis-avatar-ring .tutor-char-stage {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 30px;

  background: linear-gradient(135deg, #8b5cf6, #ec4899);

  border: 2px solid #fff;

}



.synthesis-tutor-float.is-speaking .synthesis-avatar-ring {

  animation: teacher-teach-bounce 0.6s ease infinite;

}



.synthesis-voice-waves {

  display: none;

  gap: 3px;

  align-items: flex-end;

  height: 20px;

}



.is-speaking .synthesis-voice-waves,

.synthesis-session.is-speaking .synthesis-voice-waves {

  display: flex;

}



.synthesis-voice-waves span {

  width: 4px;

  background: #ec4899;

  border-radius: 2px;

  animation: synth-wave 0.5s ease infinite;

}



.synthesis-voice-waves span:nth-child(1) { height: 8px; animation-delay: 0s; }

.synthesis-voice-waves span:nth-child(2) { height: 14px; animation-delay: 0.1s; }

.synthesis-voice-waves span:nth-child(3) { height: 10px; animation-delay: 0.2s; }

.synthesis-voice-waves span:nth-child(4) { height: 16px; animation-delay: 0.15s; }



@keyframes synth-wave {

  0%, 100% { transform: scaleY(0.5); opacity: 0.6; }

  50% { transform: scaleY(1.2); opacity: 1; }

}



.synthesis-tutor-name {

  font-size: 11px;

  font-weight: 700;

  color: #fff;

  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);

  background: rgba(0, 0, 0, 0.4);

  padding: 2px 8px;

  border-radius: 999px;

}



.synthesis-live-caption {

  margin: 8px 0 0;

  padding: 8px 12px;

  font-size: 13px;

  color: rgba(255, 255, 255, 0.75);

  text-align: center;

  min-height: 1.2em;

}



.synthesis-chat-panel {

  flex: 1;

  display: flex;

  flex-direction: column;

  min-height: 200px;

  max-height: 340px;

  border-top: 1px solid var(--stroke);

  background: rgba(0, 0, 0, 0.35);

}



.synthesis-chat-feed {

  flex: 1;

  overflow-y: auto;

  padding: 12px 16px;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.synthesis-msg {

  display: flex;

  gap: 8px;

  align-items: flex-start;

  max-width: 92%;

}



.synthesis-msg.user {

  align-self: flex-end;

  flex-direction: row-reverse;

}



.synthesis-msg-avatar {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

  flex-shrink: 0;

  background: linear-gradient(135deg, #6366f1, #ec4899);

}



.synthesis-msg-avatar.user {

  background: rgba(255, 255, 255, 0.12);

  font-size: 10px;

  font-weight: 700;

}



.synthesis-msg-bubble {

  padding: 10px 14px;

  border-radius: 16px;

  font-size: 14px;

  line-height: 1.45;

  background: rgba(99, 102, 241, 0.15);

  border: 1px solid rgba(99, 102, 241, 0.3);

}



.synthesis-msg.user .synthesis-msg-bubble {

  background: rgba(255, 255, 255, 0.08);

  border-color: var(--stroke);

}



.synthesis-msg.thinking .synthesis-msg-bubble {

  opacity: 0.7;

  font-style: italic;

}



.synthesis-quick-replies {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  padding: 8px 16px;

  border-top: 1px solid rgba(255, 255, 255, 0.06);

}



.synthesis-chip {

  padding: 6px 12px;

  border-radius: 999px;

  border: 1px solid rgba(99, 102, 241, 0.35);

  background: rgba(99, 102, 241, 0.12);

  color: var(--text);

  font-family: inherit;

  font-size: 12px;

  cursor: pointer;

  transition: background 0.15s, transform 0.15s;

}



.synthesis-chip:hover {

  background: rgba(99, 102, 241, 0.25);

  transform: translateY(-1px);

}



.synthesis-input-row,

.synthesis-input-footer {

  display: flex;

  gap: 8px;

  padding: 12px 16px;

  align-items: center;

  border-top: 1px solid var(--stroke);

}



.synthesis-input-row input,

.synthesis-input-footer input {

  flex: 1;

  padding: 10px 14px;

  border-radius: 12px;

  border: 1px solid var(--stroke);

  background: rgba(255, 255, 255, 0.05);

  color: var(--text);

  font-family: inherit;

}



.synthesis-response {

  padding: 12px 16px;

  border-top: 1px solid var(--stroke);

}



.synthesis-footer {

  padding: 12px 16px;

  border-top: 1px solid var(--stroke);

  display: flex;

  gap: 8px;

  justify-content: center;

}



/* Mic, lesson video embed & kid camera PIP */

.synthesis-mic-btn {

  flex-shrink: 0;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  border: 1px solid var(--stroke);

  background: rgba(99, 102, 241, 0.15);

  color: #fff;

  font-size: 18px;

  cursor: pointer;

  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;

}



.synthesis-mic-btn:hover:not(:disabled) {

  background: rgba(99, 102, 241, 0.35);

  transform: scale(1.05);

}



.synthesis-mic-btn.is-listening,

.synthesis-session.is-listening .synthesis-mic-btn[data-speech-mic] {

  background: linear-gradient(135deg, #ef4444, #ec4899);

  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.35);

  animation: mic-pulse 1s ease infinite;

}



.synthesis-mic-btn:disabled {

  opacity: 0.45;

  cursor: not-allowed;

}



@keyframes mic-pulse {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.08); }

}



.synthesis-stage.prompt-speech .synthesis-mic-btn[data-speech-mic],

.synthesis-chat-panel.prompt-speech .synthesis-mic-btn[data-speech-mic] {

  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5);

  animation: mic-hint 1.4s ease infinite;

}



@keyframes mic-hint {

  0%, 100% { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45); }

  50% { box-shadow: 0 0 0 6px rgba(236, 72, 153, 0.35); }

}



.synthesis-canvas.split-media {

  flex-direction: column;

  align-items: stretch;

  justify-content: flex-start;

}



.synthesis-canvas-wrap.has-lesson-video-pending .classroom-lesson-content.with-video,

.synthesis-canvas-wrap.has-lesson-video .classroom-lesson-content.with-video {

  height: 42%;

  width: 96%;

  flex-shrink: 0;

}



.synthesis-video-panel {

  position: relative;

  z-index: 2;

  width: 96%;

  height: 52%;

  margin: 8px auto 0;

  border-radius: 12px;

  overflow: hidden;

  background: #000;

  flex-shrink: 0;

}



.synthesis-video-panel[hidden] {

  display: none !important;

}



.synthesis-video-embed,

.synthesis-video-mp4 {

  width: 100%;

  height: 100%;

  border: none;

  display: block;

  object-fit: cover;

}



.synthesis-kid-pip {

  position: absolute;

  bottom: 72px;

  right: 12px;

  z-index: 6;

  width: 112px;

  height: 84px;

  border-radius: 12px;

  overflow: hidden;

  border: 2px solid rgba(255, 255, 255, 0.35);

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);

  background: rgba(0, 0, 0, 0.55);

}



.synthesis-kid-placeholder {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  height: 100%;

  color: rgba(255, 255, 255, 0.85);

  font-size: 11px;

  text-align: center;

  gap: 4px;

}



.synthesis-kid-placeholder span {

  font-size: 22px;

}



.synthesis-kid-placeholder[hidden] {

  display: none !important;

}



.synthesis-kid-video {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform: scaleX(-1);

}



.synthesis-kid-label {

  position: absolute;

  bottom: 4px;

  left: 6px;

  font-size: 10px;

  font-weight: 700;

  color: #fff;

  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);

  pointer-events: none;

}



.synthesis-kid-pip.is-live {

  border-color: #22c55e;

}



.synthesis-camera-btn {

  position: absolute;

  bottom: 72px;

  right: 132px;

  z-index: 6;

  width: 40px;

  height: 40px;

  border-radius: 50%;

  border: 1px solid rgba(255, 255, 255, 0.25);

  background: rgba(0, 0, 0, 0.55);

  color: #fff;

  font-size: 16px;

  cursor: pointer;

  transition: background 0.15s, transform 0.15s;

}



.synthesis-camera-btn:hover,

.synthesis-camera-btn.is-active {

  background: rgba(99, 102, 241, 0.65);

  transform: scale(1.05);

}



.synthesis-placeholder {

  text-align: center;

  color: rgba(255, 255, 255, 0.7);

}



.synthesis-placeholder span {

  font-size: 48px;

  display: block;

  margin-bottom: 8px;

}



.synthesis-quiz-label {

  position: absolute;

  top: 12px;

  left: 0;

  right: 0;

  text-align: center;

  font-weight: 700;

  font-size: 15px;

  z-index: 2;

}



.synthesis-tutor-page .synthesis-stage-area {

  padding-bottom: 4px;

}



.synthesis-tutor-page .synthesis-chat-full {

  max-height: 42vh;

}



/* Interactive manipulatives (Synthesis-style) */

.manip-counter {

  position: absolute;

  bottom: 8px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 6;

  margin: 0;

  padding: 6px 14px;

  border-radius: 999px;

  background: rgba(0, 0, 0, 0.75);

  color: #fff;

  font-size: 13px;

  font-weight: 600;

  white-space: nowrap;

  pointer-events: none;

}



.safari-animal.tappable,

.shape-item.tappable {

  cursor: pointer;

  border: none;

  background: transparent;

  padding: 0;

  position: relative;

  transition: transform 0.2s;

}



.safari-animal.tappable:hover,

.shape-item.tappable:hover {

  transform: scale(1.15);

}



.safari-animal.counted {

  filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.8));

}



.safari-animal.pulse-count {

  animation: manip-pop 0.4s ease;

}



@keyframes manip-pop {

  0% { transform: scale(1); }

  50% { transform: scale(1.25); }

  100% { transform: scale(1); }

}



.count-badge {

  position: absolute;

  top: -8px;

  right: -8px;

  width: 22px;

  height: 22px;

  border-radius: 50%;

  background: linear-gradient(135deg, #6366f1, #ec4899);

  color: #fff;

  font-size: 12px;

  font-weight: 800;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px solid #fff;

}



.manip-safari-quiz {

  display: flex;

  gap: 16px;

  align-items: center;

  justify-content: center;

  width: 100%;

  height: 100%;

}



.manip-safari-quiz .safari-animal {

  position: static !important;

  font-size: 40px !important;

}



.tile-tray {

  position: absolute;

  bottom: 36px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 6;

  display: flex;

  gap: 8px;

  padding: 8px 12px;

  background: rgba(0, 0, 0, 0.7);

  border-radius: 14px;

  border: 1px solid rgba(99, 102, 241, 0.4);

}



.num-tile {

  width: 40px;

  height: 40px;

  border-radius: 10px;

  border: 2px solid rgba(99, 102, 241, 0.5);

  background: linear-gradient(145deg, #6366f1, #4f46e5);

  color: #fff;

  font-size: 18px;

  font-weight: 800;

  cursor: grab;

  font-family: inherit;

  transition: transform 0.15s, opacity 0.15s;

}



.num-tile:active {

  cursor: grabbing;

  transform: scale(1.08);

}



.num-tile.used {

  opacity: 0.25;

  pointer-events: none;

}



.num-tile.dragging {

  opacity: 0.6;

}



.ten-frame .dot.drop-slot {

  cursor: pointer;

  border: 2px dashed rgba(255, 255, 255, 0.35);

  border-radius: 50%;

  min-width: 24px;

  min-height: 24px;

}



.ten-frame .dot.drop-slot.drag-over,

.eq-slot.drag-over {

  border-color: #ec4899;

  background: rgba(236, 72, 153, 0.25);

  transform: scale(1.1);

}



.ten-frame .dot.dropped {

  background: #ec4899;

  color: #fff;

  font-size: 12px;

  font-weight: 800;

  display: flex;

  align-items: center;

  justify-content: center;

}



.manip-eq-box {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: 12px;

  font-size: 28px;

}



.eq-slot {

  min-width: 44px;

  min-height: 44px;

  border: 2px dashed rgba(255, 255, 255, 0.4);

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  background: rgba(255, 255, 255, 0.06);

}



.eq-slot.filled {

  border-style: solid;

  border-color: #6366f1;

  background: rgba(99, 102, 241, 0.25);

}



/* Adaptive tutor (Synthesis-style) */

.synthesis-tutor-visual.split-media,

.synthesis-tutor-visual.has-adaptive-video {

  flex-direction: column;

  align-items: stretch;

  justify-content: flex-start;

}



.synthesis-tutor-visual .tutor-adaptive-video {

  width: 94%;

  height: 48%;

  margin: 8px auto 0;

  flex-shrink: 0;

}



.synthesis-tutor-visual.has-adaptive-video .tutor-manip-layer {

  height: 38%;

  width: 94%;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  z-index: 2;

}



.tutor-manip-layer[hidden] {

  display: none !important;

}



.tutor-manip {

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 8px;

}



.tutor-manip.counting-dots {

  gap: 6px;

}



.tutor-manip .count-dot {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.12);

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  font-size: 14px;

  transition: transform 0.2s, background 0.2s;

}



.tutor-manip .count-dot.lit {

  background: linear-gradient(135deg, #6366f1, #ec4899);

  transform: scale(1.12);

}



.tutor-interaction-prompt {

  position: absolute;

  top: 12px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 7;

  margin: 0;

  padding: 8px 16px;

  border-radius: 999px;

  background: rgba(99, 102, 241, 0.9);

  color: #fff;

  font-size: 13px;

  font-weight: 700;

  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.45);

  animation: mic-hint 1.4s ease infinite;

}



[data-tutor-stage-screen].awaiting-kid .synthesis-play-btn {

  pointer-events: none;

  opacity: 0.35;

}



.synthesis-mic-btn.mic-nudge {

  animation: mic-pulse 0.8s ease 3;

  box-shadow: 0 0 0 6px rgba(236, 72, 153, 0.45);

}



.synthesis-tutor-page .synthesis-tutor-visual .synthesis-kid-pip {

  bottom: 16px;

  right: 12px;

}



.synthesis-tutor-page .synthesis-tutor-visual .synthesis-camera-btn {

  bottom: 16px;

  right: 128px;

}



/* Synthesis-style guided tutor session */

.tutor-unit-progress-wrap {

  padding: 8px 16px 0;

}



.tutor-unit-label {

  display: block;

  font-size: 12px;

  font-weight: 600;

  color: var(--muted);

  margin-bottom: 6px;

}



.tutor-unit-progress-bar {

  height: 6px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.08);

  overflow: hidden;

}



.tutor-unit-progress-bar [data-tutor-unit-progress] {

  display: block;

  height: 100%;

  width: 0;

  border-radius: 999px;

  background: linear-gradient(90deg, #6366f1, #ec4899);

  transition: width 0.4s ease;

}



.tutor-start-overlay {

  position: absolute;

  inset: 0;

  z-index: 8;

  background: rgba(8, 12, 24, 0.92);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

  overflow-y: auto;

}



.tutor-start-overlay[hidden] {

  display: none !important;

}



.synthesis-tutor-visual:has(.tutor-start-overlay:not([hidden])) .tutor-stage-play {

  display: none !important;

}



.tutor-start-inner {

  max-width: 640px;

  text-align: center;

  width: 100%;

}



.tutor-start-inner h2 {

  font-family: Fraunces, serif;

  font-size: clamp(1.25rem, 4vw, 1.75rem);

  margin: 0 0 8px;

  color: #fff;

}



.tutor-start-sub {

  font-size: 14px;

  color: var(--muted);

  margin: 0 0 20px;

  line-height: 1.5;

}



.tutor-start-sub a {

  color: #a5b4fc;

}



.tutor-unit-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

  gap: 12px;

}



.tutor-unit-loading {

  grid-column: 1 / -1;

  color: var(--muted);

  font-size: 14px;

  margin: 8px 0;

}




.tutor-unit-card {

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 16px;

  padding: 16px 12px;

  background: rgba(255, 255, 255, 0.05);

  color: #fff;

  cursor: pointer;

  font-family: inherit;

  text-align: center;

  transition: transform 0.15s, border-color 0.15s, background 0.15s;

}



.tutor-unit-card:hover {

  transform: translateY(-2px);

  border-color: rgba(99, 102, 241, 0.5);

  background: rgba(99, 102, 241, 0.15);

}



.tutor-unit-icon {

  font-size: 32px;

  display: block;

  margin-bottom: 8px;

}



.tutor-unit-title {

  display: block;

  font-weight: 700;

  font-size: 15px;

  margin-bottom: 4px;

}



.tutor-unit-tag {

  display: block;

  font-size: 11px;

  color: var(--muted);

}



.tutor-check-row {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  justify-content: center;

  padding: 12px 16px;

  background: rgba(0, 0, 0, 0.35);

  border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.tutor-check-row[hidden] {

  display: none !important;

}



.tutor-check-opt {

  min-width: 56px;

  padding: 12px 20px;

  border-radius: 14px;

  border: 2px solid rgba(255, 255, 255, 0.2);

  background: rgba(99, 102, 241, 0.2);

  color: #fff;

  font-size: 18px;

  font-weight: 700;

  font-family: inherit;

  cursor: pointer;

  transition: transform 0.12s, background 0.12s;

}



.tutor-check-opt:hover {

  transform: scale(1.05);

  background: rgba(99, 102, 241, 0.45);

}



.tutor-chat-hint {

  font-size: 12px;

  color: var(--muted);

  padding: 8px 16px 0;

  margin: 0;

}



/* Procedural interactive canvas (Synthesis-style — built live, not video files) */

.tutor-interactive-stage {

  position: absolute;

  inset: 0;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 48px 16px 64px;

  pointer-events: auto;

}



.tutor-interactive-stage:empty {

  display: none;

}



.tutor-canvas-engine {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.tutor-scene {

  width: 100%;

  max-width: 480px;

  text-align: center;

}



.tutor-scene-label {

  font-size: 15px;

  font-weight: 600;

  color: rgba(255, 255, 255, 0.85);

  margin: 0 0 16px;

}



.tutor-count-grid {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  justify-content: center;

  margin-bottom: 12px;

}



.tutor-count-item {

  width: 64px;

  height: 64px;

  font-size: 36px;

  border: 2px solid rgba(255, 255, 255, 0.2);

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.08);

  cursor: pointer;

  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;

  position: relative;

}



.tutor-count-item.lit,

.tutor-count-item.counted {

  border-color: #6366f1;

  background: rgba(99, 102, 241, 0.25);

  transform: scale(1.08);

  box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);

}



.tutor-scene-counter {

  font-size: 48px;

  font-weight: 800;

  color: #fff;

  margin: 8px 0 0;

  font-family: Fraunces, serif;

}



.tutor-nline {

  display: flex;

  gap: 4px;

  justify-content: center;

  flex-wrap: wrap;

}



.tutor-nline-tick {

  width: 36px;

  height: 36px;

  border-radius: 8px;

  background: rgba(255, 255, 255, 0.1);

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  font-size: 14px;

  color: #fff;

  transition: background 0.2s, transform 0.2s;

}



.tutor-nline-tick.lit {

  background: linear-gradient(135deg, #6366f1, #ec4899);

  transform: scale(1.12);

}



.tutor-add-row {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 10px;

  font-size: 28px;

}



.tutor-add-total.lit.pop {

  color: #22c55e;

  transform: scale(1.2);

  transition: transform 0.25s;

}



.tutor-frac-pizza {

  width: 140px;

  height: 140px;

  border-radius: 50%;

  margin: 0 auto;

  position: relative;

  background: #fbbf24;

  overflow: hidden;

}



.tutor-frac-slice {

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.15);

  transform-origin: center;

  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 100%, 50% 50%);

}



.tutor-frac-slice.lit {

  background: #f97316;

}



.tutor-shape-row {

  display: flex;

  gap: 16px;

  justify-content: center;

  flex-wrap: wrap;

}



.tutor-shape-btn {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  padding: 16px;

  border-radius: 16px;

  border: 2px solid rgba(255, 255, 255, 0.15);

  background: rgba(255, 255, 255, 0.06);

  cursor: pointer;

  font-family: inherit;

  color: #fff;

  transition: transform 0.15s, border-color 0.15s;

}



.tutor-shape-btn span {

  font-size: 40px;

}



.tutor-shape-btn.lit {

  border-color: #6366f1;

  transform: scale(1.06);

}



.tutor-ten-frame {

  display: grid;

  grid-template-columns: repeat(5, 1fr);

  gap: 8px;

  max-width: 200px;

  margin: 0 auto;

}



.tutor-dot {

  width: 28px;

  height: 28px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.15);

  border: 2px solid rgba(255, 255, 255, 0.2);

}



.tutor-dot.lit {

  background: linear-gradient(135deg, #6366f1, #ec4899);

}



.tutor-brand-mark {

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background: linear-gradient(135deg, #6366f1, #ec4899);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-size: 18px;

  box-shadow: 0 0 16px rgba(99, 102, 241, 0.45);

}



.tutor-orb-ring {

  background: linear-gradient(135deg, #6366f1, #22d3ee) !important;

}



.tutor-orb-pulse {

  display: block;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: radial-gradient(circle at 30% 30%, #fff, #6366f1);

}



.synthesis-tutor-page .tutor-adaptive-video,
.synthesis-tutor-page .synthesis-video-panel:not(.tutor-theater-yt) {
  display: none !important;
}



.tutor-mastery-row {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 8px;

}



/* ── Topic visual scenes (Ask Tutor picture + animation) ── */

.tutor-stage-visual:not([hidden]) {
  display: flex;
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
  padding: 48px 16px 80px;
  align-items: center;
  justify-content: center;
}

[data-tutor-stage-screen].has-topic-scene .tutor-stage-visual:not([hidden]) {
  z-index: 3;
}

.has-topic-scene .tutor-interactive-stage {
  display: none !important;
}

.tutor-manip-layer:not([hidden]) {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  padding: 12px 16px 72px;
  align-items: center;
  justify-content: center;
}

.synthesis-tutor-page.has-topic-scene .synthesis-tutor-float,
.synthesis-tutor-page .has-topic-scene .synthesis-tutor-float {
  transform: scale(0.72);
  bottom: 8px;
  right: 8px;
  opacity: 0.92;
}

.tutor-topic-scene {
  width: 100%;
  max-width: 340px;
  text-align: center;
  animation: topicSceneIn 0.55s ease-out;
}

@keyframes topicSceneIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.topic-scene-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  margin-bottom: 10px;
}

.topic-scene-emoji-back {
  position: absolute;
  font-size: 3rem;
  opacity: 0.35;
  z-index: 0;
  transform: translate(-40px, -20px);
}

.topic-scene-hero {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topic-scene-portrait {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  background: #fff;
}

.topic-scene-emoji {
  font-size: 4rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
}

.topic-scene-prop-wrap,
.topic-scene-prop {
  position: absolute;
  z-index: 3;
  font-size: 2.6rem;
}

.topic-scene-prop-wrap {
  left: 8%;
  top: 8%;
}

.topic-scene-prop {
  right: 10%;
  top: 6%;
}

.topic-scene-prop-img {
  width: 96px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  background: #fff;
}

.topic-scene-caption {
  margin: 0;
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.topic-scene-sub {
  margin: 4px 0 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.88);
}

.ring-phone {
  animation: ringPhone 0.45s ease-in-out infinite;
  transform-origin: top center;
}

@keyframes ringPhone {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

.scene-glow .topic-scene-prop { animation: topicGlow 1.4s ease-in-out infinite; }
@keyframes topicGlow {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.35); transform: scale(1.12); }
}

.scene-fly .topic-scene-prop { animation: topicFly 2.2s ease-in-out infinite; }
@keyframes topicFly {
  0%, 100% { transform: translate(0, 0) rotate(-6deg); }
  50% { transform: translate(12px, -14px) rotate(6deg); }
}

.scene-space .topic-scene-prop { animation: topicSpace 2.5s linear infinite; }
@keyframes topicSpace {
  from { transform: translateX(-20px) rotate(0deg); }
  to { transform: translateX(20px) rotate(12deg); }
}

.scene-weather .topic-scene-prop { animation: topicWeather 2s ease-in-out infinite; }
@keyframes topicWeather {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(6px); opacity: 0.85; }
}

.scene-invention .topic-scene-prop,
.scene-invention .topic-scene-prop-wrap { animation: topicWiggle 1.1s ease-in-out infinite; }
@keyframes topicWiggle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

.scene-roar .topic-scene-prop { animation: topicRoar 0.9s ease-in-out infinite; }
@keyframes topicRoar {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.18); }
}

.scene-pulse .topic-scene-prop { animation: topicPulse 1s ease-in-out infinite; }
@keyframes topicPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.scene-grow .topic-scene-prop { animation: topicGrow 1.6s ease-in-out infinite; }
@keyframes topicGrow {
  0%, 100% { transform: translateY(4px) scale(0.95); }
  50% { transform: translateY(-6px) scale(1.05); }
}

.scene-map .topic-scene-prop { animation: topicMap 2.4s ease-in-out infinite; }
@keyframes topicMap {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg) scale(1.06); }
}

.scene-stomp .topic-scene-prop { animation: topicStomp 1.2s ease-in-out infinite; }
@keyframes topicStomp {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
  50% { transform: translateY(2px); }
}

.scene-tech .topic-scene-prop { animation: topicTech 1.8s steps(2) infinite; }
@keyframes topicTech {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.synthesis-tutor-page.is-speaking .ring-phone {
  animation-duration: 0.28s;
}



.tutor-mastery-row[hidden] {

  display: none !important;

}



.mastery-chip,

.unit-mastery {

  font-size: 10px;

  font-weight: 700;

  padding: 2px 8px;

  border-radius: 999px;

  background: rgba(34, 197, 94, 0.2);

  color: #86efac;

}



.avatar-speaking .tutor-orb-pulse {

  animation: tutor-speak-pulse 0.5s ease infinite;

}



.avatar-happy .tutor-orb-ring {

  background: linear-gradient(135deg, #22c55e, #86efac) !important;

}



.avatar-thinking .tutor-orb-pulse,

.avatar-explaining .tutor-orb-pulse {

  animation: tutor-think 1.2s ease infinite;

}



.avatar-encouraging .tutor-orb-ring,

.avatar-mistake .tutor-orb-ring {

  background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;

}



.avatar-asking .synthesis-voice-waves span {

  animation-duration: 0.45s;

}



@keyframes tutor-speak-pulse {

  0%, 100% { transform: scale(1); }

  50% { transform: scale(1.08); }

}



@keyframes tutor-think {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.75; }

}



.tutor-drag-tiles {

  display: flex;

  gap: 10px;

  justify-content: center;

  margin-top: 16px;

  flex-wrap: wrap;

}



.tutor-drag-tile {

  width: 48px;

  height: 48px;

  border-radius: 12px;

  border: 2px solid rgba(255, 255, 255, 0.25);

  background: rgba(99, 102, 241, 0.3);

  color: #fff;

  font-size: 20px;

  font-weight: 800;

  cursor: grab;

  font-family: inherit;

  touch-action: none;

  user-select: none;

}



.tutor-drag-tile.dragging {

  opacity: 0.85;

  transform: scale(1.08);

  cursor: grabbing;

}



.tutor-groups-wrap {

  display: flex;

  gap: 16px;

  justify-content: center;

  flex-wrap: wrap;

  margin: 12px 0;

}



.tutor-group-col {

  display: flex;

  flex-direction: column;

  gap: 6px;

  padding: 10px;

  border-radius: 12px;

  border: 2px dashed rgba(255, 255, 255, 0.25);

  min-width: 52px;

  transition: border-color 0.3s, background 0.3s;

}



.tutor-group-col.lit {

  border-color: #6366f1;

  background: rgba(99, 102, 241, 0.2);

}



.tutor-place-value-wrap {

  display: flex;

  gap: 12px;

  justify-content: center;

  align-items: flex-end;

}



.tutor-place-col {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  padding: 14px 16px;

  border-radius: 14px;

  border: 2px solid rgba(255, 255, 255, 0.2);

  background: rgba(255, 255, 255, 0.06);

  min-width: 56px;

  transition: border-color 0.3s, background 0.3s, transform 0.3s;

}



.tutor-place-col.lit {

  border-color: #ec4899;

  background: rgba(236, 72, 153, 0.2);

  transform: scale(1.06);

}



.tutor-place-digit {

  font-size: 36px;

  font-weight: 800;

  line-height: 1;

}



.tutor-place-label {

  font-size: 11px;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.04em;

  color: rgba(255, 255, 255, 0.65);

}



.tutor-modality-badge {

  position: absolute;

  top: 8px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 9;

  padding: 4px 14px;

  border-radius: 999px;

  font-size: 12px;

  font-weight: 700;

  background: rgba(99, 102, 241, 0.85);

  color: #fff;

  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.4);

  pointer-events: none;

}



.tutor-game-header {

  font-size: 18px;

  font-weight: 800;

  text-align: center;

  margin-bottom: 8px;

  color: #fbbf24;

  text-shadow: 0 0 20px rgba(251, 191, 36, 0.4);

}



.tutor-game-question {

  text-align: center;

  font-size: 15px;

  font-weight: 600;

  margin: 0 0 16px;

  color: rgba(255, 255, 255, 0.9);

}



.tutor-quiz-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));

  gap: 12px;

  width: 100%;

  max-width: 360px;

  margin: 0 auto;

}



.tutor-quiz-opt {

  border: 2px solid rgba(255, 255, 255, 0.2);

  border-radius: 16px;

  padding: 20px 12px;

  font-size: 22px;

  font-weight: 800;

  background: linear-gradient(145deg, rgba(99, 102, 241, 0.35), rgba(236, 72, 153, 0.25));

  color: #fff;

  cursor: pointer;

  font-family: inherit;

  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;

  animation: quiz-pulse 2s ease infinite;

}



.tutor-quiz-opt:hover,

.tutor-quiz-opt.picked {

  transform: scale(1.06);

  border-color: #ec4899;

  box-shadow: 0 0 24px rgba(236, 72, 153, 0.45);

}



@keyframes quiz-pulse {

  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3); }

  50% { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); }

}



.tutor-story-banner {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  padding: 10px 16px;

  margin-bottom: 12px;

  border-radius: 12px;

  background: linear-gradient(90deg, rgba(139, 92, 246, 0.35), rgba(236, 72, 153, 0.25));

  border: 1px solid rgba(255, 255, 255, 0.15);

}



.tutor-story-emoji { font-size: 28px; }

.tutor-story-title { font-size: 16px; font-weight: 700; }



.tutor-story-inner,

.tutor-game-count-inner {

  width: 100%;

}



.tutor-game-race-bar {

  text-align: center;

  font-weight: 800;

  font-size: 14px;

  padding: 8px;

  margin-bottom: 8px;

  border-radius: 8px;

  background: rgba(239, 68, 68, 0.25);

  border: 1px solid rgba(239, 68, 68, 0.4);

  animation: race-flash 1.2s ease infinite;

}



@keyframes race-flash {

  0%, 100% { opacity: 1; }

  50% { opacity: 0.75; }

}



.tutor-sort-zones {

  display: flex;

  gap: 12px;

  justify-content: center;

  margin-bottom: 16px;

}



.tutor-sort-zone {

  flex: 1;

  max-width: 140px;

  min-height: 80px;

  border: 2px dashed rgba(255, 255, 255, 0.3);

  border-radius: 12px;

  padding: 8px;

  text-align: center;

}



.tutor-sort-zone-label {

  display: block;

  font-size: 12px;

  font-weight: 700;

  margin-bottom: 6px;

}



.tutor-sort-items {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  justify-content: center;

}



.tutor-sort-chip {

  border: none;

  border-radius: 10px;

  padding: 10px 14px;

  background: rgba(99, 102, 241, 0.5);

  color: #fff;

  font-weight: 700;

  cursor: grab;

  font-family: inherit;

}



.tutor-sort-chip.placed { opacity: 0.6; cursor: default; }



.tutor-group-dot {

  font-size: 22px;

  line-height: 1;

}



.tutor-frac-compare {

  display: flex;

  gap: 24px;

  justify-content: center;

  align-items: flex-end;

  flex-wrap: wrap;

}



.tutor-frac-compare-side {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  padding: 8px;

  border-radius: 12px;

  transition: background 0.3s, box-shadow 0.3s;

}



.tutor-frac-compare-side.winner {

  background: rgba(34, 197, 94, 0.2);

  box-shadow: 0 0 16px rgba(34, 197, 94, 0.35);

}



.tutor-frac-compare-label {

  font-size: 18px;

  font-weight: 800;

  color: #fff;

}



.tutor-frac-bar {

  display: flex;

  width: 120px;

  height: 28px;

  border-radius: 8px;

  overflow: hidden;

  border: 2px solid rgba(255, 255, 255, 0.3);

}



.tutor-frac-slice.bar-slice {

  flex: 1;

  background: rgba(255, 255, 255, 0.12);

  border-right: 1px solid rgba(0, 0, 0, 0.2);

}



.tutor-frac-slice.bar-slice.lit {

  background: linear-gradient(180deg, #fbbf24, #f59e0b);

}



.tutor-frac-add-row {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  flex-wrap: wrap;

}



.tutor-frac-add-row.lit .tutor-frac-bar[data-bar-sum],

.tutor-frac-add-row.lit [data-bar-sum] {

  box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);

}




.tutor-drop-slot {

  width: 56px;

  height: 56px;

  margin: 12px auto;

  border: 2px dashed rgba(255, 255, 255, 0.4);

  border-radius: 12px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 24px;

  font-weight: 800;

  color: #fff;

}



.tutor-drop-slot.correct {

  border-color: #22c55e;

  background: rgba(34, 197, 94, 0.25);

}



.tutor-skills-panel .dash-bar-skill span:first-child {

  font-size: 12px;

  min-width: 88px;

}



.dash-bars-compact .dash-bar {

  margin-bottom: 6px;

}



/* ═══ Tutor theater layout (video + side Q&A + controls) ═══ */

.synthesis-tutor-page .synthesis-stage-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
}

.synthesis-tutor-page.theater-active .synthesis-chat-full,
.synthesis-tutor-page:has(.theater-active) .synthesis-chat-full {
  max-height: 34vh;
}

.synthesis-tutor-page .synthesis-tutor-canvas {
  flex: 1;
  min-height: min(52vh, 520px);
}

.synthesis-tutor-page .synthesis-canvas.synthesis-tutor-visual {
  min-height: min(50vh, 500px);
  aspect-ratio: auto;
  height: 100%;
}

.tutor-theater {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(88px, 22%) 1fr minmax(88px, 22%);
  gap: 8px;
  padding: 8px;
  pointer-events: none;
}

.tutor-theater.is-live {
  pointer-events: auto;
}

.tutor-theater-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 8px;
  border-radius: 14px;
  background: rgba(8, 12, 24, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: auto;
  max-height: 100%;
  pointer-events: auto;
}

.tutor-theater-rail--question {
  border-color: rgba(99, 102, 241, 0.35);
}

.tutor-theater-rail--answer {
  border-color: rgba(236, 72, 153, 0.35);
}

.tutor-rail-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.55);
}

.tutor-rail-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #fff;
  font-weight: 500;
}

.tutor-rail-prompt {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(99, 102, 241, 0.35);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}

.tutor-theater-screen {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: #0a0e18;
  border: 1px solid rgba(255, 255, 255, 0.12);
  min-height: 0;
  pointer-events: auto;
}

.tutor-ai-video-wrap {
  position: absolute;
  inset: 0;
}

.tutor-ai-video-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.45), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.35), transparent 40%),
    linear-gradient(145deg, #1a1f3a 0%, #0d1224 100%);
  animation: aiVideoPulse 6s ease-in-out infinite;
}

@keyframes aiVideoPulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.08); }
}

.tutor-ai-video-content {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.tutor-ai-youtube {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

.tutor-ai-scene-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 12px 16px 52px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.tutor-ai-scene-overlay .tutor-topic-scene {
  max-width: 100%;
}

.tutor-ai-scene-default {
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-weight: 600;
}

.tutor-theater-controls {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
}

.tutor-ctrl-btn {
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

.tutor-ctrl-btn:hover {
  background: rgba(99, 102, 241, 0.5);
}

.synthesis-kid-pip.tutor-theater-pip {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  bottom: auto !important;
  left: auto !important;
  width: 112px !important;
  height: 84px !important;
  z-index: 9 !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.synthesis-kid-pip.tutor-theater-pip.camera-paused {
  opacity: 0.45;
}

.synthesis-kid-pip.focus-warn {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.55), 0 8px 24px rgba(0, 0, 0, 0.45);
  animation: focusWarnPulse 1.2s ease-in-out infinite;
}

@keyframes focusWarnPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.25); }
}

[data-tutor-stage-screen].kid-unfocused .tutor-theater-screen {
  outline: 2px solid rgba(245, 158, 11, 0.5);
  outline-offset: -2px;
}

.synthesis-tutor-page.theater-active .synthesis-tutor-float,
[data-tutor-stage-screen].theater-active .synthesis-tutor-float {
  opacity: 0.35;
  transform: scale(0.6);
  pointer-events: none;
}

.synthesis-tutor-page.theater-active .tutor-interaction-prompt,
[data-tutor-stage-screen].theater-active .tutor-interaction-prompt {
  display: none !important;
}

.synthesis-tutor-page.theater-active .synthesis-live-caption {
  display: none;
}

.tutor-quiz-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px;
  background: rgba(8, 12, 24, 0.88);
  backdrop-filter: blur(6px);
}

.tutor-quiz-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}

.tutor-quiz-q {
  margin: 0;
  font-size: 1.05rem;
  color: #fff;
  text-align: center;
}

.tutor-quiz-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.tutor-quiz-opt {
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  min-width: 72px;
}

.tutor-quiz-opt:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.25);
}

.tutor-quiz-opt.correct {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.3);
}

.tutor-quiz-opt.wrong {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.25);
}

@media (max-width: 720px) {
  .tutor-theater {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .tutor-theater-rail {
    max-height: 72px;
  }
  .tutor-rail-text {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ── In-lesson doubt Q&A ── */
.lesson-doubt-hint {
  margin: 0 0 8px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary, #6366f1);
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.2);
}

.lesson-player.paused-for-doubt .synthesis-stage-area,
[data-lesson-player].paused-for-doubt .synthesis-stage-area {
  outline: 3px solid rgba(99, 102, 241, 0.45);
  outline-offset: -3px;
  border-radius: 12px;
}

.lesson-player.paused-for-doubt .synthesis-chat-panel,
[data-lesson-player].paused-for-doubt .synthesis-chat-panel {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}

.lesson-badge-uk {
  background: rgba(30, 58, 138, 0.12);
  color: #1e3a8a;
}

.lesson-playback-status {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 0 0;
}

/* ═══ NEET Student Portal ═══ */
.neet-portal {
  --neet-accent: #0d9488;
  --neet-accent-soft: rgba(13, 148, 136, 0.12);
}

.neet-app .brand-mark { color: var(--neet-accent); }

.neet-badge {
  background: var(--neet-accent-soft) !important;
  color: var(--neet-accent) !important;
  border: 1px solid rgba(13, 148, 136, 0.35);
}

.neet-intro {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--neet-accent-soft);
  border: 1px solid rgba(13, 148, 136, 0.2);
  font-size: 14px;
  color: var(--text, #1e293b);
}

.neet-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.neet-stat {
  padding: 14px;
  border-radius: 12px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  text-align: center;
}

.neet-stat strong {
  display: block;
  font-size: 1.5rem;
  color: var(--neet-accent);
}

.neet-stat span { font-size: 12px; color: var(--muted); }

.neet-card { border-left: 3px solid var(--neet-accent); }

.neet-chip {
  display: inline-block;
  padding: 4px 10px;
  margin: 4px 4px 0 0;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(239, 68, 68, 0.1);
  color: #b91c1c;
}

.neet-nav-future { opacity: 0.45; cursor: not-allowed; }

.neet-lesson-card { border-top: 3px solid var(--neet-accent); }

.neet-lesson-header { background: linear-gradient(135deg, #0f766e 0%, #134e4a 100%); color: #fff; }
.neet-lesson-header .lesson-back { color: rgba(255,255,255,0.85); }
.neet-lesson-header h1, .neet-lesson-header p { color: #fff; }

.neet-doubt-panel { border-top: 2px solid var(--neet-accent); }

.neet-stage .video-stage-screen {
  background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  padding: 16px;
}

.neet-diagram, .neet-cell, .neet-heart, .neet-dna, .neet-eco, .neet-atom, .neet-bond, .neet-organic {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.neet-mode-badge { background: var(--neet-accent-soft) !important; color: var(--neet-accent) !important; }

.neet-tutor-layout { min-height: 100vh; }
.neet-tutor-main { display: flex; flex-direction: column; gap: 12px; }
.neet-tutor-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.neet-tutor-chat { flex: 1; min-height: 400px; max-height: calc(100vh - 220px); }

.neet-review-summary { text-align: center; padding: 24px; }
.neet-review-grade { font-weight: 700; color: var(--neet-accent); margin-top: 8px; }

.neet-review-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.neet-review-item {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  background: var(--surface, #fff);
}

.neet-review-item.correct { border-left: 4px solid #22c55e; }
.neet-review-item.wrong { border-left: 4px solid #ef4444; }

.neet-review-exp { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

.neet-practice-subjects { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }

.neet-plan-card { padding: 20px; margin-bottom: 20px; }

.neet-plan-target {
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 12px;
}

.neet-plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.neet-plan-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  background: var(--surface, #fff);
}

.neet-plan-icon { font-size: 1.4rem; }

.neet-plan-item p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

.neet-plan-min {
  display: inline-block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--neet-accent);
}

.neet-mistakes-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.neet-mistake-card {
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-left: 4px solid #ef4444;
  background: var(--surface, #fff);
}

.neet-mistake-subject {
  font-size: 12px;
  font-weight: 600;
  color: var(--neet-accent);
  text-transform: capitalize;
  margin: 0 0 8px;
}

.neet-mistake-q { margin: 0 0 8px; font-size: 14px; }

.neet-mistake-ans { margin: 4px 0; font-size: 13px; }
.neet-mistake-ans.wrong { color: #b91c1c; }
.neet-mistake-ans.correct { color: #15803d; }

.neet-mistake-reason, .neet-mistake-revise, .neet-mistake-review {
  font-size: 13px;
  margin: 6px 0 0;
  color: var(--muted);
}

.neet-mistake-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.neet-empty { color: var(--muted); font-size: 14px; padding: 20px 0; }

.neet-wrong-flow-wrap { margin-top: 16px; }

.neet-wrong-flow {
  padding: 16px;
  border-radius: 12px;
  background: var(--neet-accent-soft);
  border: 1px solid rgba(13, 148, 136, 0.25);
}

.neet-wrong-flow h3 { margin: 0 0 12px; font-size: 1rem; }

.neet-flow-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.neet-flow-steps li { font-size: 13px; }
.neet-flow-steps li.done strong { color: var(--neet-accent); }

.neet-flow-ai {
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--surface, #fff);
  font-size: 13px;
  line-height: 1.5;
}

.neet-profile-card { max-width: 640px; }

.neet-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.neet-profile-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.neet-profile-form input,
.neet-profile-form select {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  font: inherit;
}

.neet-profile-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted);
}

.neet-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.admin-stub-list {
  margin: 10px 0 14px;
  padding-left: 18px;
  font-size: 13px;
  color: var(--muted);
}

.admin-stub-list code {
  font-size: 12px;
}