* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  color: #f7f8fc;
  background:
    radial-gradient(circle at top right, rgba(116,93,255,.35), transparent 35%),
    radial-gradient(circle at bottom left, rgba(0,190,180,.22), transparent 40%),
    #111827;
}

button {
  font: inherit;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px clamp(20px,5vw,70px);
  border-bottom: 1px solid rgba(255,255,255,.1);
  background: rgba(10,15,30,.72);
  backdrop-filter: blur(14px);
}

.topbar h1 {
  margin: 0;
  font-size: 1.4rem;
}

.topbar p {
  margin: 4px 0 0;
  color: #aeb8cf;
  font-size: .9rem;
}

.home {
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,.09);
  padding: 10px 14px;
  border-radius: 12px;
}

main {
  width: min(1100px,92%);
  margin: 34px auto 70px;
}

.welcome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 30px;
  border-radius: 26px;
  background: linear-gradient(135deg,rgba(91,73,255,.34),rgba(0,183,171,.18));
  border: 1px solid rgba(255,255,255,.12);
}

.welcome h2 {
  margin: 7px 0;
  font-size: clamp(1.7rem,4vw,2.8rem);
}

.welcome p {
  color: #cbd3e5;
  max-width: 650px;
}

.eyebrow {
  color: #9fe6df;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.streak {
  min-width: 115px;
  text-align: center;
  padding: 16px;
  border-radius: 20px;
  background: rgba(0,0,0,.2);
}

.streak span,
.streak strong,
.streak small {
  display: block;
}

.streak span {
  font-size: 2rem;
}

.streak strong {
  font-size: 2rem;
}

.streak small {
  color: #b9c3d9;
}

.student-chooser {
  margin-top: 32px;
}

.student-buttons,
.subject-grid,
.parent-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}

.student-buttons button,
.subject-card,
.parent-grid article {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.075);
  border-radius: 22px;
  padding: 25px;
  color: white;
}

.student-buttons button {
  cursor: pointer;
  text-align: left;
  transition: .18s ease;
}

.student-buttons button:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.12);
}

.student-buttons span,
.student-buttons strong,
.student-buttons small {
  display: block;
}

.student-buttons span {
  font-size: 2.3rem;
  margin-bottom: 15px;
}

.student-buttons strong {
  font-size: 1.2rem;
}

.student-buttons small,
.subject-card p,
.parent-grid small,
.parent-note p {
  color: #b9c3d9;
}

.student-buttons .parent {
  background: rgba(0,185,174,.12);
}

.hidden {
  display: none !important;
}

.section-heading {
  margin: 34px 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: end;
}

.section-heading h2 {
  margin: 5px 0 0;
}

.change {
  border: 0;
  color: #fff;
  cursor: pointer;
  background: rgba(255,255,255,.1);
  padding: 10px 14px;
  border-radius: 10px;
}

.subject-card {
  min-height: 190px;
  position: relative;
}

.subject-card .icon {
  font-size: 2rem;
}

.subject-card h3 {
  margin-bottom: 6px;
}

.subject-card .priority {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(255,188,73,.15);
  color: #ffd487;
  font-size: .75rem;
}

.subject-card button,
.quick-card button,
.paper-card button {
  border: 0;
  border-radius: 11px;
  padding: 10px 16px;
  background: #f5f7ff;
  color: #171b2d;
  font-weight: 700;
  cursor: pointer;
}

.subject-card button {
  margin-top: 16px;
}

.quick-card,
.paper-card,
.parent-note {
  margin-top: 20px;
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.065);
}

.quick-card div:nth-child(2),
.paper-card div:nth-child(2) {
  flex: 1;
}

.quick-card h3,
.paper-card h3 {
  margin: 4px 0;
}

.quick-card p,
.paper-card p {
  margin: 4px 0;
  color: #b9c3d9;
}

.quick-icon,
.paper-icon {
  font-size: 2rem;
}

.paper-card button:disabled {
  opacity: .45;
  cursor: default;
}

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

.parent-grid article h3 {
  margin: 0;
  font-size: 1.35rem;
}

.grade {
  color: #aeb8cf;
}

.focus {
  display: inline-block;
  padding: 7px 10px;
  margin: 4px 0 12px;
  border-radius: 9px;
  font-size: .8rem;
}

.focus.high {
  background: rgba(255,188,73,.15);
  color: #ffd487;
}

.parent-note {
  display: block;
}

@media (max-width: 750px) {
  .topbar {
    padding: 16px;
  }

  main {
    width: 94%;
    margin-top: 20px;
  }

  .welcome {
    align-items: flex-start;
  }

  .student-buttons,
  .subject-grid,
  .parent-grid {
    grid-template-columns: 1fr;
  }

  .quick-card,
  .paper-card {
    align-items: flex-start;
    flex-wrap: wrap;
  }
}
/* ===== LEARNING ACTIVITIES V10 ===== */

.learning-screen {
  margin-top: 28px;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.activity-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  padding: 24px;
  margin-bottom: 20px;
}

.activity-card h2,
.activity-card h3 {
  margin-top: 0;
}

.activity-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.activity-options button,
.activity-button,
.back-button {
  border: 0;
  border-radius: 14px;
  padding: 14px 18px;
  font-weight: 700;
  cursor: pointer;
}

.activity-options button,
.activity-button {
  background: #f7f8fc;
  color: #111827;
}

.back-button {
  background: rgba(255,255,255,.10);
  color: #fff;
}

.activity-input,
.activity-textarea {
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  color: #fff;
  font: inherit;
}

.activity-textarea {
  min-height: 150px;
  resize: vertical;
}

.feedback-box {
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(0,190,180,.12);
  border: 1px solid rgba(0,190,180,.25);
}

.activity-menu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 20px;
}

.activity-menu button {
  min-height: 110px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  color: #fff;
  padding: 18px;
  text-align: left;
  font-weight: 700;
  font-size: 1rem;
}

.hidden {
  display: none !important;
}

@media (max-width: 750px) {
  .activity-menu,
  .activity-options {
    grid-template-columns: 1fr;
  }

  .activity-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .activity-card {
    padding: 18px;
  }
} 

/* v0.2 teenage UI polish */
:root{--panel:rgba(18,27,58,.88);--panel2:rgba(30,42,82,.88);--accent:#7c8cff;--accent2:#36d1dc;--text:#f5f7ff;--muted:#b9c1df}
body{background:radial-gradient(circle at 15% 10%,rgba(124,140,255,.22),transparent 28%),radial-gradient(circle at 85% 20%,rgba(54,209,220,.16),transparent 26%),linear-gradient(145deg,#091126,#111a38 55%,#0b1631);background-attachment:fixed;color:var(--text)}
main{max-width:1100px}.welcome,.learning-screen,#studentArea,.student-chooser{backdrop-filter:blur(8px)}
.student-buttons button,.subject-card,.activity-grid button,.lesson-card,.quick-card{background:linear-gradient(145deg,var(--panel2),var(--panel));color:var(--text);border:1px solid rgba(255,255,255,.11);box-shadow:0 12px 30px rgba(0,0,0,.18)}
button{background:linear-gradient(135deg,var(--accent),#5969ed);color:white;border:0;border-radius:14px;font-weight:800;cursor:pointer}button.secondary,.back-button{background:rgba(255,255,255,.1);color:var(--text);border:1px solid rgba(255,255,255,.14)}
input,textarea,select{background:rgba(5,10,28,.72)!important;color:var(--text)!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:12px!important;padding:14px!important}select option{color:#111}.stat-strip{display:flex;gap:10px}.skill-pill{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(124,140,255,.18);color:#cdd3ff;font-size:.8rem;font-weight:800}.session-head{display:flex;justify-content:space-between;align-items:center}.progress-track{height:10px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin:12px 0 20px}.progress-track>div{height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s}.result-score{text-align:center;background:var(--panel);padding:28px;border-radius:20px;margin:20px 0}.result-score strong{font-size:3rem;display:block}.result-score span{font-size:2rem;color:#ffd75e;display:block;margin:8px}.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.photo-preview img{max-width:100%;border-radius:14px}.feedback-box{white-space:pre-line}@media(max-width:650px){.setup-grid{grid-template-columns:1fr}.stat-strip{flex-direction:column}.result-score strong{font-size:2.3rem}}

/* ===== v0.2.1 PROFESSIONAL UI REPAIR ===== */
main{width:min(1040px,calc(100% - 40px));margin:30px auto 72px}
.learning-screen{max-width:920px;margin:32px auto 0;padding:30px;border:1px solid rgba(255,255,255,.1);border-radius:28px;background:rgba(9,17,38,.56);box-shadow:0 22px 60px rgba(0,0,0,.22)}
.learning-screen>h2{font-size:clamp(1.8rem,3vw,2.35rem);margin:8px 0 8px}.learning-screen>p{color:var(--muted);margin:0 0 22px;line-height:1.6}
.activity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}
.activity-grid button{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:9px;width:100%;min-width:0;min-height:142px;padding:22px;text-align:left;border-radius:20px;line-height:1.25;transition:transform .18s ease,border-color .18s ease,background .18s ease}
.activity-grid button:hover{transform:translateY(-3px);border-color:rgba(124,140,255,.5);background:linear-gradient(145deg,rgba(46,61,112,.95),rgba(18,27,58,.95))}
.activity-grid button strong{display:block;font-size:1.05rem;line-height:1.3}.activity-grid button span{display:block;color:#b9c1df;font-weight:500;font-size:.9rem;line-height:1.45}
.setup-grid{max-width:620px;gap:16px;margin:22px 0}.setup-grid>div{padding:16px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09)}
.field-label{display:block;margin:0 0 8px;color:#dce1f5;font-size:.85rem;font-weight:800;letter-spacing:.02em}
select,input[type=text],textarea{width:100%;outline:none;transition:border-color .18s,box-shadow .18s}select:focus,input[type=text]:focus,textarea:focus{border-color:rgba(124,140,255,.8)!important;box-shadow:0 0 0 4px rgba(124,140,255,.12)}
textarea{line-height:1.6;resize:vertical;border-radius:18px!important;padding:18px!important}.action-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}.action-row button,.learning-screen>button:not(.back-button),.lesson-card button{min-height:46px;padding:12px 20px}
#writingActivity #writingPhoto{display:block;width:100%;margin:18px 0;padding:16px!important;border:1px dashed rgba(124,140,255,.55)!important;border-radius:18px!important;background:rgba(124,140,255,.07)!important}
.photo-preview{min-height:150px;display:grid;place-items:center;margin:0 0 22px;padding:16px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);color:var(--muted);overflow:hidden}.photo-preview p{margin:0}.photo-preview img{display:block;max-height:420px;object-fit:contain}
.lesson-card{padding:24px;border-radius:22px;margin:18px 0}.lesson-card h3{line-height:1.45}.feedback-box{line-height:1.6;border-radius:18px;padding:18px}
#frenchLesson{background:linear-gradient(145deg,rgba(22,38,70,.95),rgba(14,26,53,.95));border-color:rgba(54,209,220,.24);padding:24px}
.french-session-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.french-session-head strong{font-size:1.05rem}.french-session-head span{color:var(--muted);font-size:.9rem}
.french-phrase{font-size:1.25rem;font-weight:800;line-height:1.8;margin:14px 0}.speakable{display:inline-block;margin:3px 3px 3px 0;padding:5px 8px;border-radius:9px;background:rgba(124,140,255,.12);border:1px solid rgba(124,140,255,.18);cursor:pointer}.speakable:hover{background:rgba(124,140,255,.25)}
.french-hint{color:var(--muted);font-size:.88rem;margin:12px 0}.french-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.french-controls button{min-height:44px;padding:10px 16px}.french-controls .secondary{background:rgba(255,255,255,.08)}
@media(max-width:760px){main{width:min(94%,1040px)}.learning-screen{padding:22px 18px;border-radius:22px}.activity-grid{grid-template-columns:1fr}.activity-grid button{min-height:auto}.welcome{padding:22px;flex-direction:column}.stat-strip{width:100%;flex-direction:row}.streak{flex:1;min-width:0}.section-heading{align-items:flex-start;gap:14px}.french-session-head{align-items:flex-start;flex-direction:column}}


/* ===== v0.2.2 FRENCH TEACHING CARD ===== */
.french-teach-block,.french-translation,.french-context,.french-speech-status{margin-top:18px;padding:18px 20px;border:1px solid rgba(148,163,184,.18);border-radius:16px;background:rgba(15,23,42,.42)}
.french-translation{background:rgba(30,41,59,.52)}
.french-context{background:rgba(8,47,73,.34)}
.french-teach-label{font-size:.74rem;font-weight:800;letter-spacing:.11em;color:#8de8df;margin-bottom:8px}
.french-translation>div:last-child,.french-context>div:last-child{font-size:1.05rem;line-height:1.55;color:#e5e7eb}
.french-speech-status{line-height:1.55;color:#dbeafe}
.french-controls{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
@media(max-width:700px){.french-teach-block,.french-translation,.french-context,.french-speech-status{padding:15px}.french-controls button{width:100%}}

/* ===== v0.2.3 FRENCH TEACHER / VOICE ===== */
.french-why{margin-top:18px;padding:18px 20px;border:1px solid rgba(124,140,255,.25);border-radius:16px;background:rgba(54,44,100,.28);line-height:1.6;color:#e8eaff}
.english-map{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.english-pair{display:inline-block;padding:8px 11px;border-radius:10px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.045);transition:.18s}.english-arrow{color:#667085}.english-pair.active-meaning{background:rgba(54,209,220,.22);border-color:rgba(54,209,220,.75);box-shadow:0 0 0 3px rgba(54,209,220,.10);color:#fff}.french-word.active-word{background:rgba(124,140,255,.38);border-color:#9aa6ff;box-shadow:0 0 0 3px rgba(124,140,255,.12)}
#frenchSpeakButton.recording{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff}.french-speech-status strong{color:#fff}
@media(max-width:700px){.french-why{padding:15px}.english-map{gap:6px}.english-pair{padding:7px 9px}}


/* ===== v0.2.4 MOBILE COMPACT + SPEECH FOLLOW ===== */
.french-word,.english-pair{transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.french-word.active-word{transform:translateY(-1px);background:rgba(124,140,255,.48);border-color:#b7c0ff;box-shadow:0 0 0 4px rgba(124,140,255,.13)}
.english-pair.active-meaning{background:rgba(54,209,220,.28);border-color:rgba(54,209,220,.9);box-shadow:0 0 0 4px rgba(54,209,220,.10)}
@media(max-width:700px){
  main{width:calc(100% - 20px);margin:14px auto 40px}
  .welcome{padding:18px;border-radius:20px}
  .welcome h2{font-size:clamp(1.75rem,8vw,2.2rem);margin:8px 0}
  .welcome p{font-size:.92rem;line-height:1.45}
  .learning-screen{margin-top:16px;padding:17px 13px;border-radius:20px}
  .learning-screen>h2{font-size:1.65rem}
  .learning-screen>p{font-size:.9rem;margin-bottom:14px}
  .setup-grid{gap:9px;margin:13px 0}.setup-grid>div{padding:11px;border-radius:14px}
  select,input,textarea{padding:11px!important}
  .activity-grid{gap:10px;margin:14px 0}.activity-grid button{padding:14px;min-height:88px;border-radius:16px}.activity-grid button strong{font-size:.98rem}.activity-grid button span{font-size:.82rem;line-height:1.35}
  #frenchLesson{padding:14px;border-radius:18px}.french-session-head{margin-bottom:10px}.french-session-head strong{font-size:.98rem}.french-session-head span{font-size:.78rem}
  .french-teach-block,.french-translation,.french-context,.french-why,.french-speech-status{margin-top:10px;padding:12px 13px;border-radius:13px}
  .french-teach-label{font-size:.66rem;letter-spacing:.08em;margin-bottom:6px}
  .french-phrase{font-size:1rem;line-height:1.62;margin:7px 0}
  .speakable{margin:2px 2px 2px 0;padding:4px 7px;border-radius:8px}
  .english-map{gap:5px}.english-pair{font-size:.88rem;padding:6px 8px}.english-arrow{font-size:.75rem}
  .french-translation>div:last-child,.french-context>div:last-child,.french-why>div:last-child{font-size:.9rem;line-height:1.45}
  .french-controls{gap:8px;margin-top:12px}.french-controls button{width:auto;flex:1 1 150px;min-height:42px;padding:9px 11px;font-size:.9rem}
}


/* ===== v0.2.5 polish: compact headers, synchronized French, real Math Test ===== */
.learning-screen > .back-button{
  width:auto !important;
  min-height:36px !important;
  padding:7px 11px !important;
  margin:0 0 18px 0 !important;
  border-radius:10px !important;
  font-size:.9rem !important;
  font-weight:700 !important;
}
.learning-screen > .back-button + .eyebrow{display:block;margin-top:2px;margin-bottom:8px;}
.compact-button{width:auto!important;min-height:36px!important;padding:7px 11px!important;font-size:.88rem!important;}
.test-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:18px 0;}
.math-test-list{display:grid;gap:14px;}
.math-test-question{padding:18px;border:1px solid var(--line,#30405f);border-radius:16px;background:rgba(255,255,255,.025);}
.math-test-question h3{margin:8px 0 12px;font-size:1.08rem;}
.math-test-question input{max-width:280px;}
.math-test-number{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;}
.test-submit-bar{position:sticky;bottom:8px;margin-top:20px;padding:12px;border:1px solid var(--line,#30405f);border-radius:16px;background:rgba(11,22,45,.96);backdrop-filter:blur(10px);}
.test-submit-bar button{width:100%;}
.math-review{display:grid;gap:14px;margin-top:22px;}
.review-card{padding:18px;border:1px solid var(--line,#30405f);border-radius:16px;background:rgba(255,255,255,.025);}
.review-card.correct{border-color:rgba(76,200,140,.45);}
.review-card.incorrect{border-color:rgba(255,120,120,.45);}
.review-card h3{margin:6px 0 10px;font-size:1rem;}
.review-step{margin-top:10px;padding:12px;border-radius:12px;background:rgba(255,255,255,.035);line-height:1.55;}
.french-word.active-word,.english-pair.active-meaning{outline:2px solid rgba(119,220,255,.95);background:rgba(119,220,255,.15)!important;box-shadow:0 0 0 3px rgba(119,220,255,.08);}
.ai-teacher{margin-top:18px;padding:16px;border:1px solid var(--line,#30405f);border-radius:16px;background:rgba(255,255,255,.025);}
.ai-teacher-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.ai-teacher-row input{flex:1;min-width:220px;}
.ai-teacher-answer{margin-top:12px;line-height:1.55;}
@media (max-width:700px){
  .learning-screen > .back-button{font-size:.82rem!important;padding:6px 9px!important;margin-bottom:14px!important;}
  .math-test-question{padding:14px;}
  .math-test-question h3{font-size:1rem;}
  .test-submit-bar{bottom:4px;padding:9px;}
  .ai-teacher-row{display:grid;grid-template-columns:1fr;}
  .ai-teacher-row input{min-width:0;width:100%;}
}

/* ===== v0.2.6 mobile spacing + phrase mapping + spelling ===== */
.learning-screen>.back-button{
  display:inline-flex!important;align-items:center;justify-content:center;
  min-height:30px!important;padding:4px 8px!important;margin:0 0 20px!important;
  border-radius:8px!important;font-size:.78rem!important;font-weight:700!important;
  line-height:1!important;width:auto!important;
}
.learning-screen>.back-button+.eyebrow{margin-top:0!important;margin-bottom:10px!important;}
.math-test-list{gap:20px!important;}
.math-test-question{padding:20px!important;}
.math-test-number{margin-bottom:10px!important;line-height:1.35!important;}
.math-test-question h3{margin:0 0 16px!important;line-height:1.35!important;}
.math-test-question input{margin-top:0!important;}
.test-submit-bar{margin-top:28px!important;padding:14px!important;}
.french-phrase{overflow-wrap:normal;word-break:normal;}
.french-word{white-space:nowrap;word-break:keep-all;overflow-wrap:normal;}
.french-word-group{display:inline-flex;flex-wrap:nowrap;gap:4px;align-items:center;margin:2px 3px 2px 0;}
.spelling-card{max-width:760px}.spelling-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:18px}.spelling-prompt{font-size:2rem;font-weight:900;margin:10px 0}.spelling-meaning,.spelling-why,.spelling-origin{margin-top:14px;padding:14px;border-radius:14px;background:rgba(255,255,255,.035);line-height:1.55}.spelling-why::before{content:'WHY THIS SPELLING';display:block;color:#9fe6df;font-size:.7rem;letter-spacing:.08em;font-weight:900;margin-bottom:6px}.spelling-origin::before{content:'WORD ORIGIN';display:block;color:#9fe6df;font-size:.7rem;letter-spacing:.08em;font-weight:900;margin-bottom:6px}.personal-word-bank{margin-top:18px;padding:18px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.025)}.word-bank-chip{display:inline-block;margin:4px;padding:6px 9px;border-radius:999px;background:rgba(124,140,255,.14);font-size:.82rem}
@media(max-width:700px){
  .topbar{padding:10px 14px!important;gap:12px!important}.topbar h1{font-size:1.45rem!important}.topbar p{font-size:.82rem!important;margin-top:2px!important}.topbar .home{padding:9px 11px!important;font-size:.86rem!important}
  .welcome{padding:14px!important}.welcome h2{font-size:1.65rem!important}.welcome p{font-size:.84rem!important;margin-bottom:8px!important}.stat-strip{gap:8px!important}.streak{padding:12px 8px!important}.streak strong{font-size:1.8rem!important}.streak small{font-size:.78rem!important}
  .learning-screen{padding:15px 12px!important}.learning-screen>.back-button{min-height:28px!important;padding:4px 7px!important;font-size:.74rem!important;margin-bottom:16px!important}.learning-screen>.back-button+.eyebrow{margin-bottom:8px!important}
  .setup-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}.setup-grid>div{padding:9px!important}.field-label{font-size:.75rem!important}select{font-size:.9rem!important;padding:9px!important}
  .math-test-list{gap:12px!important}.math-test-question{padding:12px!important;border-radius:14px!important}.math-test-number{font-size:.72rem!important;margin-bottom:7px!important;letter-spacing:.02em!important;text-transform:none!important}.math-test-question h3{font-size:1rem!important;margin-bottom:10px!important}.math-test-question input{max-width:none!important;padding:10px!important}.test-toolbar{margin:12px 0!important}.test-submit-bar{position:static!important;margin-top:18px!important;padding:10px!important}
  .french-teach-block,.french-translation,.french-context,.french-why,.french-speech-status,.ai-teacher{padding:10px 11px!important;margin-top:9px!important}.french-phrase{font-size:.92rem!important;line-height:1.5!important}.speakable{padding:4px 6px!important;font-size:.9rem!important}.english-pair{font-size:.82rem!important;padding:5px 7px!important}.french-controls button{font-size:.84rem!important;min-height:38px!important}.ai-teacher p{font-size:.84rem!important;line-height:1.4!important}.ai-teacher-row button{min-height:38px!important;padding:8px 10px!important;font-size:.84rem!important}
  .spelling-prompt{font-size:1.55rem}.spelling-meaning,.spelling-why,.spelling-origin{padding:11px;font-size:.9rem}
}


/* v0.2.7 test controls */
.test-toolbar-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.danger-button{border-color:rgba(255,120,120,.35)!important}
.danger-button:hover{background:rgba(255,120,120,.08)!important}
@media(max-width:640px){
  .test-toolbar-actions{width:100%}
  .test-toolbar-actions .compact-button{flex:1 1 auto}
  .test-submit-bar button{width:100%}
}

/* v0.3 Stage 2D AI Math explanation */
.ai-math-explanation{
  margin-top:16px;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(104,225,218,.25);
  background:rgba(9,25,48,.72);
  line-height:1.55;
}

.ai-math-heading{
  font-weight:800;
  margin-bottom:10px;
  color:#8ce8df;
}

.ai-math-explanation p{
  margin:10px 0;
}

.ai-math-explanation ol{
  margin:10px 0 10px 22px;
  padding:0;
}

.ai-math-explanation li{
  margin:7px 0;
}

@media(max-width:640px){
  .ai-math-explanation{
    padding:13px;
    border-radius:14px;
  }
}

/* ===== v0.3 Stage 3B English AI ===== */

.ai-writing-feedback,
.ai-writing-loading,
.ai-writing-error{
  margin-top:16px;
  padding:16px;
  border-radius:16px;
  border:1px solid rgba(104,225,218,.25);
  background:rgba(9,25,48,.72);
  line-height:1.55;
}

.ai-writing-heading{
  color:#8ce8df;
  font-weight:800;
  margin-bottom:10px;
}

.ai-writing-feedback h4,
.word-study-section h4{
  margin:14px 0 6px;
}

.ai-writing-feedback ul,
.word-study-section ul{
  margin:6px 0 8px 22px;
  padding:0;
}

.ai-writing-feedback li,
.word-study-section li{
  margin:5px 0;
}

.writing-correction{
  padding:10px 12px;
  margin:8px 0;
  border-radius:12px;
  background:rgba(255,255,255,.05);
}

.writing-rule{
  margin-top:5px;
  opacity:.9;
}

.teacher-question{
  margin-top:14px;
  padding:12px;
  border-radius:12px;
  background:rgba(104,225,218,.08);
}

.word-study-section{
  line-height:1.55;
}

.memory-tip{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(104,225,218,.08);
}

.related-words{
  margin-top:10px;
}

.related-words .word-bank-chip{
  display:inline-block;
  margin:4px 4px 0 0;
}

@media(max-width:640px){
  .ai-writing-feedback,
  .ai-writing-loading,
  .ai-writing-error{
    padding:13px;
    border-radius:14px;
  }
}


/* ===== v0.3 Stage 4B French AI ===== */

.french-ai-loading,
.french-ai-extra,
.french-ai-fallback{
  margin-top:16px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(104,225,218,.22);
  background:rgba(9,25,48,.65);
}

.french-ai-loading{
  font-size:1rem;
}

.french-vocab-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.french-vocab-chip{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  padding:10px 12px;
  border-radius:12px;
}

.french-vocab-chip span{
  font-size:.86rem;
  opacity:.8;
}

.french-ai-fallback{
  opacity:.75;
  font-size:.9rem;
}

@media(max-width:640px){
  .french-vocab-grid{
    gap:8px;
  }

  .french-vocab-chip{
    padding:9px 10px;
  }
}


/* ===== v0.3 Stage 5B Family Dashboard ===== */

.family-dashboard-shell{
  max-width:1180px;
  margin:0 auto;
}

.dashboard-header-row{
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin-bottom:24px;
}

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

.family-progress-card{
  padding:20px;
  border-radius:22px;
  border:1px solid rgba(140,232,223,.16);
  background:
    linear-gradient(
      145deg,
      rgba(22,40,76,.94),
      rgba(9,24,48,.96)
    );
}

.family-progress-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.family-progress-head h3{
  margin:0;
  font-size:1.4rem;
}

.dashboard-muted,
.dashboard-row small{
  opacity:.65;
}

.family-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:18px 0;
}

.family-stat{
  padding:12px 8px;
  text-align:center;
  border-radius:14px;
  background:rgba(255,255,255,.05);
}

.family-stat strong,
.family-stat span{
  display:block;
}

.family-stat span{
  font-size:.78rem;
  opacity:.7;
}

.dashboard-focus-box{
  padding:14px;
  border-radius:14px;
  background:rgba(104,225,218,.07);
  border:1px solid rgba(104,225,218,.15);
  margin-bottom:18px;
}

.dashboard-label{
  color:#8ce8df;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.08em;
  margin-bottom:8px;
}

.dashboard-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.dashboard-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.dashboard-row div{
  display:flex;
  flex-direction:column;
}

.dashboard-spelling{
  margin-top:18px;
}

.dashboard-word-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.dashboard-word-list span{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
}

.dashboard-empty{
  opacity:.55;
}

.dashboard-error{
  margin-top:16px;
  padding:18px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
}

@media(max-width:850px){
  .family-dashboard-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){

  .family-progress-card{
    padding:15px;
  }

  .dashboard-header-row{
    display:block;
  }

  .dashboard-header-row button{
    margin-bottom:14px;
  }

  .family-stat-grid{
    grid-template-columns:repeat(2,1fr);
  }

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

}


/* ===== v0.3 Stage 6B First Aid ===== */

.first-aid-shell{
  max-width:1100px;
  margin:0 auto;
}

.first-aid-topbar{
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin-bottom:24px;
}

.first-aid-topbar h2{
  margin:4px 0;
}

.first-aid-topbar p{
  margin:0;
  opacity:.72;
}

.first-aid-subject-card{
  border-color:rgba(240,96,96,.18);
}

.first-aid-intro{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-bottom:20px;
}

.first-aid-final-button{
  padding:13px 18px;
  border-radius:14px;
  font-weight:800;
}

.first-aid-module-grid{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:12px;
}

.first-aid-module-card{
  min-height:88px;
  padding:14px;
  border-radius:16px;
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
}

.first-aid-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:50%;
  background:rgba(104,225,218,.11);
  color:#8ce8df;
  font-weight:800;
}

.first-aid-reference{
  margin-top:22px;
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.035);
}

.first-aid-reference-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:10px;
}

.first-aid-reference-grid div{
  padding:12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
}

.first-aid-reference-grid strong,
.first-aid-reference-grid span{
  display:block;
}

.first-aid-reference-grid span{
  margin-top:3px;
  opacity:.7;
}

.first-aid-module-heading{
  display:flex;
  align-items:center;
  gap:14px;
  margin:20px 0;
}

.first-aid-module-heading h3{
  margin:3px 0;
}

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

.first-aid-mode-grid button{
  min-height:110px;
  padding:14px;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:flex-start;
  text-align:left;
}

.first-aid-mode-grid strong{
  font-size:1rem;
}

.first-aid-mode-grid span{
  opacity:.7;
  font-size:.85rem;
}

.first-aid-loading{
  margin-top:18px;
  padding:20px;
  border-radius:16px;
  background:rgba(255,255,255,.04);
}

.first-aid-learning-card{
  margin-top:18px;
  padding:20px;
  border-radius:20px;
  background:
    linear-gradient(
      145deg,
      rgba(22,40,76,.91),
      rgba(9,24,48,.95)
    );
  border:1px solid rgba(140,232,223,.14);
  line-height:1.55;
}

.first-aid-learning-card h4{
  margin:18px 0 7px;
}

.first-aid-learning-card li{
  margin:7px 0;
}

.first-aid-remember{
  margin-top:18px;
  padding:14px;
  border-radius:14px;
  background:rgba(104,225,218,.08);
}

.first-aid-terms{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:8px;
}

.first-aid-terms div{
  padding:10px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
}

.first-aid-terms strong,
.first-aid-terms span{
  display:block;
}

.first-aid-scenario-text{
  padding:14px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
}

.first-aid-choice-list{
  display:grid;
  gap:9px;
}

.first-aid-choice-list button,
.first-aid-choice-list label{
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.045);
}

.first-aid-choice-list label{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.first-aid-answer-feedback{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
}

.first-aid-answer-feedback.correct,
.first-aid-review.correct{
  background:rgba(74,205,129,.10);
}

.first-aid-answer-feedback.incorrect,
.first-aid-review.incorrect{
  background:rgba(240,96,96,.09);
}

.first-aid-test-question{
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.first-aid-test-question:last-child{
  border-bottom:none;
}

.first-aid-submit{
  margin-top:18px;
  width:100%;
  min-height:48px;
  border-radius:14px;
  font-weight:800;
}

.first-aid-score-card{
  margin-top:22px;
  padding:18px;
  border-radius:16px;
  text-align:center;
  background:rgba(104,225,218,.08);
}

.first-aid-score{
  font-size:2rem;
  font-weight:900;
}

.first-aid-review-list{
  margin-top:16px;
}

.first-aid-review{
  padding:14px;
  margin-top:9px;
  border-radius:14px;
}

@media(max-width:850px){

  .first-aid-module-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .first-aid-mode-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

}

@media(max-width:640px){

  .first-aid-topbar{
    display:block;
  }

  .first-aid-topbar button{
    margin-bottom:14px;
  }

  .first-aid-intro{
    display:block;
  }

  .first-aid-final-button{
    width:100%;
    margin-top:12px;
  }

  .first-aid-module-grid{
    grid-template-columns:1fr;
  }

  .first-aid-mode-grid{
    grid-template-columns:1fr 1fr;
  }

  .first-aid-reference-grid,
  .first-aid-terms{
    grid-template-columns:1fr;
  }

}