/* Readability fixes for light content panels inside the dark student portal. */
#portal .musicPlayer,
#portal .musicLessonHead,
#portal .musicVideoWrap,
#portal .musicExercise { color: #0f172a; }

#portal .musicPlayer {
  background: #ffffff;
  border-color: #cbd5e1;
}

#portal .musicLessonHead h2,
#portal .musicExercise h2,
#portal .musicExercise .quizQ p,
#portal .musicExercise .quizQ b { color: #0f172a !important; }

#portal .musicLessonHead .musicEyebrow,
#portal .musicLessonHead .musicMeta,
#portal .musicLessonHead .musicIntro,
#portal .musicVideoWrap .videoHelp { color: #475569 !important; }

#portal .musicExercise .quizQ {
  background: #f8fafc;
  border-color: #cbd5e1;
}

#portal .musicExercise input,
#portal .musicExercise textarea {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

#portal .musicExercise input:focus,
#portal .musicExercise textarea:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
  outline: none;
}

#portal.premiumDashboard .levelProgressCard {
  background: linear-gradient(160deg, #ffffff, #e2e8f0) !important;
  border-color: #93c5fd !important;
  color: #0f172a !important;
}

#portal.premiumDashboard .levelProgressCard h3,
#portal.premiumDashboard .levelProgressCard strong,
#portal.premiumDashboard .levelProgressCard .levelName,
#portal.premiumDashboard .levelProgressCard .levelStatus { color: #0f172a !important; }

#portal.premiumDashboard .levelProgressCard .levelMeta,
#portal.premiumDashboard .levelProgressCard small { color: #334155 !important; }

#portal.premiumDashboard .levelProgressCard.current {
  border-color: #38bdf8 !important;
  box-shadow: 0 10px 28px rgba(14, 165, 233, .2);
}

/* Every light lesson surface must use dark, readable text. */
#portal .lessonAccordion .accBody,
#portal .lessonAccordion .accBody p,
#portal .lessonAccordion .accBody li,
#portal .lessonAccordion .accBody h1,
#portal .lessonAccordion .accBody h2,
#portal .lessonAccordion .accBody h3,
#portal .lessonAccordion .accBody h4,
#portal .lessonAccordion .accBody b,
#portal .lessonAccordion .accBody strong,
#portal .c2TopicGuide,
#portal .c2TopicGuide p,
#portal .c2TopicGuide li,
#portal .c2Explain,
#portal .c2Explain p,
#portal .mini,
#portal .mini h3,
#portal .mini h4,
#portal .mini p,
#portal .mini li,
#portal .quizQ,
#portal .quizQ p,
#portal .quizQ label,
#portal .qa,
#portal .qa li,
#portal .panel,
#portal .panel h2,
#portal .panel h3,
#portal .panel p,
#portal .box:not(.studentProfileCard),
#portal .storyPaper,
#portal .storyPaper p,
#portal .c2VocabRow,
#portal .c2VocabRow h4,
#portal .c2VocabRow p,
#portal .c2PhraseRow,
#portal .c2PhraseRow p {
  color: #0f172a !important;
}

#portal .lessonAccordion .accBody,
#portal .c2TopicGuide .mini,
#portal .quizQ,
#portal .qa,
#portal .mini,
#portal .c2VocabRow,
#portal .c2PhraseRow,
#portal .storyPaper {
  background-color: #ffffff;
}

#portal .lessonAccordion textarea,
#portal .lessonAccordion input,
#portal .qa textarea,
#portal .quizQ textarea,
#portal .quizQ input[type="text"],
#portal .quizQ input[type="email"] {
  background: #ffffff !important;
  color: #0f172a !important;
}

#portal .notice,
#portal .notice h3,
#portal .notice p,
#portal .notice b,
#portal .notice strong {
  color: #14532d !important;
}

/* Shared lesson layouts used from A1 through C2. */
#portal .lessonBlock,
#portal .lessonBlock p,
#portal .lessonBlock li,
#portal .lessonBlock h1,
#portal .lessonBlock h2,
#portal .lessonBlock h3,
#portal .lessonBlock h4,
#portal .unit,
#portal .unit h3,
#portal .unit h4,
#portal .unit p,
#portal .cardBody,
#portal .cardBody h3,
#portal .cardBody h4,
#portal .cardBody p,
#portal .phraseRow,
#portal .phraseRow .phraseText,
#portal .listGrid,
#portal .listGrid p,
#portal .listGrid li,
#portal .readingSection,
#portal .readingSection p,
#portal .readingSection li,
#portal .analysisSection,
#portal .analysisSection p,
#portal .analysisSection li {
  color: #0f172a !important;
}

#portal .lessonBlock,
#portal .unit,
#portal .phraseRow,
#portal .readingSection,
#portal .analysisSection {
  background-color: #ffffff;
}

#portal input:not([type="radio"]):not([type="checkbox"]),
#portal textarea,
#portal select {
  color: #0f172a;
}

/* Unified blue lesson theme: blue learning surfaces with high-contrast white copy. */
#portal #portalContent .flowCard,
#portal #portalContent .lessonAccordion .accBody,
#portal #portalContent .lessonBlock,
#portal #portalContent .unit,
#portal #portalContent .cardBody,
#portal #portalContent .flowIntro,
#portal #portalContent .flowItem,
#portal #portalContent .flowQuestion,
#portal #portalContent .readingBox,
#portal #portalContent .mini,
#portal #portalContent .quizQ,
#portal #portalContent .qa,
#portal #portalContent .panel,
#portal #portalContent .box:not(.studentProfileCard),
#portal #portalContent .storyPaper,
#portal #portalContent .c2TopicGuide,
#portal #portalContent .c2Explain,
#portal #portalContent .c2VocabRow,
#portal #portalContent .c2PhraseRow,
#portal #portalContent .phraseRow,
#portal #portalContent .readingSection,
#portal #portalContent .analysisSection {
  background: linear-gradient(145deg, #0c3d6c 0%, #14558a 100%) !important;
  color: #ffffff !important;
  border-color: rgba(147, 197, 253, .38) !important;
}

#portal #portalContent .flowCard :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .lessonAccordion .accBody :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .lessonBlock :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .unit :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .panel :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .box:not(.studentProfileCard) :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .mini :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .quizQ :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .qa :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .storyPaper :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .c2TopicGuide :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .c2Explain :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .c2VocabRow :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .c2PhraseRow :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .phraseRow :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .readingSection :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small),
#portal #portalContent .analysisSection :is(h1, h2, h3, h4, h5, p, li, b, strong, label, small) {
  color: #ffffff !important;
}

#portal #portalContent .flowIntro,
#portal #portalContent .flowItem,
#portal #portalContent .flowQuestion,
#portal #portalContent .readingBox,
#portal #portalContent .phraseRow,
#portal #portalContent .c2VocabRow,
#portal #portalContent .c2PhraseRow {
  background: rgba(6, 37, 69, .56) !important;
}

#portal #portalContent .flowNotice,
#portal #portalContent .notice {
  background: #0a3158 !important;
  color: #ffffff !important;
  border-color: #38bdf8 !important;
}

#portal #portalContent .flowNotice *,
#portal #portalContent .notice * {
  color: #ffffff !important;
}

/* Writing fields stay light so entered answers remain easy to read. */
#portal #portalContent input:not([type="radio"]):not([type="checkbox"]),
#portal #portalContent textarea,
#portal #portalContent select {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: #93b4d6 !important;
}

#portal #portalContent input::placeholder,
#portal #portalContent textarea::placeholder {
  color: #64748b !important;
}

/* Keep practice controls visually distinct on the blue lesson background. */
#portal #portalContent .flowActions button,
#portal #portalContent .speakBtn,
#portal #portalContent .slowBtn {
  background: #dbeafe !important;
  color: #174ea6 !important;
}

#portal #portalContent .flowActions .flowMic,
#portal #portalContent .micBtn {
  background: #dcfce7 !important;
  color: #166534 !important;
}

#portal #portalContent .btn.primary,
#portal #portalContent .flowContinue {
  color: #ffffff !important;
}

#portal #portalContent .btn.gray {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Final A1-C2 lesson coverage. This stylesheet is intentionally loaded last. */
#portal #portalContent .lessonAccordion details,
#portal #portalContent .lessonAccordion summary,
#portal #portalContent .lessonSeqCard,
#portal #portalContent .unitProgress,
#portal #portalContent .structuredModuleCard,
#portal #portalContent .structuredModuleCard .cardBody,
#portal #portalContent .vocabGroup,
#portal #portalContent .usageCard,
#portal #portalContent .registerGuide > div,
#portal #portalContent .dialogue .bubble,
#portal #portalContent .speech.right .bubble,
#portal #portalContent .listGrid > *,
#portal #portalContent .flowGrid > * {
  background: linear-gradient(145deg, #0a3764 0%, #14558a 100%) !important;
  color: #ffffff !important;
  border-color: rgba(147, 197, 253, .42) !important;
}

#portal #portalContent .storyQuestion,
#portal #portalContent #storyQuiz .storyQuestion {
  background: linear-gradient(145deg, #0a3764 0%, #14558a 100%) !important;
  color: #ffffff !important;
  border-color: rgba(147, 197, 253, .42) !important;
}

#portal #portalContent .storyQuestion p,
#portal #portalContent .storyQuestion label,
#portal #portalContent .storyText,
#portal #portalContent #storyQuiz p,
#portal #portalContent #storyQuiz label {
  color: #ffffff !important;
}

#portal #portalContent .lessonAccordion summary:hover,
#portal #portalContent .flowQuestion label:hover {
  background: #155f99 !important;
}

#portal #portalContent .lessonAccordion details :is(h1, h2, h3, h4, h5, p, li, b, strong, span, label, small),
#portal #portalContent .lessonSeqCard :is(h1, h2, h3, h4, h5, p, li, b, strong, span, label, small),
#portal #portalContent .unitProgress :is(h1, h2, h3, h4, h5, p, li, b, strong, span, label, small),
#portal #portalContent .structuredModuleCard :is(h1, h2, h3, h4, h5, p, li, b, strong, span, label, small),
#portal #portalContent .vocabGroup :is(h1, h2, h3, h4, h5, p, li, b, strong, span, label, small),
#portal #portalContent .usageCard :is(h1, h2, h3, h4, h5, p, li, b, strong, span, label, small),
#portal #portalContent .registerGuide > div :is(h1, h2, h3, h4, h5, p, li, b, strong, span, label, small),
#portal #portalContent .dialogue .bubble,
#portal #portalContent .readingLine,
#portal #portalContent .flowItem,
#portal #portalContent .flowItem :is(h1, h2, h3, h4, h5, p, li, b, strong, span, label, small) {
  color: #ffffff !important;
}

/* Navigation/status chips remain distinct without introducing white lesson panels. */
#portal #portalContent .flowStep {
  background: #0b3158 !important;
  color: #dbeafe !important;
  border-color: #477cab !important;
}

#portal #portalContent .flowStep.active {
  background: #2563eb !important;
  color: #ffffff !important;
}

#portal #portalContent .flowStep.done {
  background: #166534 !important;
  color: #ffffff !important;
  border-color: #4ade80 !important;
}

/* Keep interactive controls readable after the broad white-text rule. */
#portal #portalContent .flowActions button,
#portal #portalContent .flowActions button span,
#portal #portalContent .speakBtn,
#portal #portalContent .speakBtn span,
#portal #portalContent .slowBtn,
#portal #portalContent .slowBtn span {
  color: #174ea6 !important;
}

#portal #portalContent .flowActions .flowMic,
#portal #portalContent .flowActions .flowMic span,
#portal #portalContent .micBtn,
#portal #portalContent .micBtn span {
  color: #166534 !important;
}

#portal #portalContent input:not([type="radio"]):not([type="checkbox"]),
#portal #portalContent textarea,
#portal #portalContent select,
#portal #portalContent option {
  background: #ffffff !important;
  color: #0f172a !important;
}

/* Grades, reports, and other remaining portal panels use the same blue system. */
#portal #portalContent .gradesShell,
#portal #portalContent .gradeReport,
#portal #portalContent .gradeReportHead,
#portal #portalContent .gradeSummary > div,
#portal #portalContent .gradeUnit,
#portal #portalContent .gradeUnit summary,
#portal #portalContent .gradeUnitBody,
#portal #portalContent .gradeTableWrap,
#portal #portalContent .gradeRule,
#portal #portalContent .additionalGrades,
#portal #portalContent .extraGradeCard,
#portal #portalContent .lessonHomework,
#portal #portalContent .hwRecord,
#portal #portalContent .hwAssignment,
#portal #portalContent .hwSubmission,
#portal #portalContent .hwWaiting,
#portal #portalContent .hwEmpty {
  background: linear-gradient(145deg, #0a3764 0%, #14558a 100%) !important;
  color: #ffffff !important;
  border-color: rgba(147, 197, 253, .42) !important;
}

#portal #portalContent :is(.gradesShell,.gradeReport,.gradeUnit,.additionalGrades,.lessonHomework,.hwRecord) :is(h1,h2,h3,h4,h5,h6,p,b,strong,span,small,label) {
  color: #ffffff !important;
}

#portal #portalContent :is(.gradeTable,.table) th {
  background: #082d50 !important;
  color: #ffffff !important;
  border-color: #3f709a !important;
}

#portal #portalContent :is(.gradeTable,.table) td {
  background: #104a7b !important;
  color: #ffffff !important;
  border-color: #3f709a !important;
}

#portal #portalContent :is(.gradeTable,.table) tbody tr:nth-child(even) td {
  background: #0d416f !important;
}

#portal #portalContent :is(.gradeTable,.table) tfoot td,
#portal #portalContent .gradeFinalRow td {
  background: #176092 !important;
  color: #ffffff !important;
}

/* Greetings lesson: keep every expression readable without changing its copy. */
#portal #portalContent .usageCard,
#portal #portalContent .registerGuide > div {
  background: linear-gradient(145deg, #0a3764 0%, #14558a 100%) !important;
  color: #ffffff !important;
}

#portal #portalContent .usageCard .usageTop h4,
#portal #portalContent .usageCard > p,
#portal #portalContent .registerGuide > div > b,
#portal #portalContent .registerGuide > div > p {
  color: #ffffff !important;
}

#portal #portalContent .usageCard .usageType {
  background: #dbeafe !important;
  color: #1e40af !important;
}

#portal #portalContent .usageCard .usageType.farewell {
  background: #fef3c7 !important;
  color: #92400e !important;
}

#portal #portalContent .usageCard .registerTag {
  background: #eef2f7 !important;
  color: #334155 !important;
}

/* Compact controls and final dark-surface pass for dynamically generated A1-C2 lessons. */
#portal #portalContent .lessonAccordion .accBody > p,
#portal #portalContent .lessonAccordion .accBody > div:not(.b1Audio):not(.row):not(.flowActions),
#portal #portalContent .lessonAccordion .accBody .listGrid > *,
#portal #portalContent .lessonAccordion .accBody .phraseRows > *,
#portal #portalContent .lessonAccordion .accBody .dialogue > *,
#portal #portalContent .lessonAccordion .accBody .speechContent,
#portal #portalContent .lessonAccordion .accBody .bubble,
#portal #portalContent .lessonAccordion .accBody ol > li,
#portal #portalContent .readingLine,
#portal #portalContent .storyLine,
#portal #portalContent .quizQ,
#portal #portalContent .flowQuestion {
  background: linear-gradient(145deg, #0a3764 0%, #14558a 100%) !important;
  color: #ffffff !important;
  border-color: rgba(147, 197, 253, .44) !important;
}

#portal #portalContent .lessonAccordion .accBody > p,
#portal #portalContent .lessonAccordion .accBody ol > li {
  padding: 13px 16px !important;
  border: 1px solid rgba(147, 197, 253, .36) !important;
  border-radius: 12px !important;
  margin-block: 10px !important;
}

#portal #portalContent .lessonAccordion .accBody > p *,
#portal #portalContent .lessonAccordion .accBody > div:not(.b1Audio):not(.row):not(.flowActions) :is(h1,h2,h3,h4,h5,p,li,b,strong,span,label,small),
#portal #portalContent .lessonAccordion .accBody .listGrid > * :is(h1,h2,h3,h4,h5,p,li,b,strong,span,label,small),
#portal #portalContent .lessonAccordion .accBody .phraseRows > * :is(h1,h2,h3,h4,h5,p,li,b,strong,span,label,small),
#portal #portalContent .lessonAccordion .accBody .dialogue > * :is(h1,h2,h3,h4,h5,p,li,b,strong,span,label,small),
#portal #portalContent .lessonAccordion .accBody ol > li :is(p,b,strong,span,label,small),
#portal #portalContent .readingLine *,
#portal #portalContent .storyLine *,
#portal #portalContent .quizQ :is(p,b,strong,span,label,small),
#portal #portalContent .flowQuestion :is(p,b,strong,span,label,small) {
  color: #ffffff !important;
}

/* Pron Practices: color-only light-blue palette; original sizing stays untouched. */
#portal #portalContent #pronView,
#portal #portalContent .pronShell {
  background: #dbeafe !important;
  color: #0b2f55 !important;
}

#portal #portalContent :is(.pronCard,.pronSubCard,.pronWordCard,.pron-safe-card,.clothesGroupCard,.clothesWordGrid .card) {
  background: #eff6ff !important;
  color: #0b2f55 !important;
  border-color: #93c5fd !important;
}

#portal #portalContent :is(.pronCardBody,.pronSubBody,.pronWordBody,.clothesGroupBody,.clothesWordGrid .cardBody) {
  background: #eff6ff !important;
  color: #0b2f55 !important;
}

#portal #portalContent :is(.pronSectionTitle,.pronCardTitle,.pronSubTitle,.pronWordTitle,.pron-safe-title,.clothesPageTop h2,.clothesGroupBody strong,.clothesWordGrid h4) {
  color: #0b2f55 !important;
}

#portal #portalContent :is(.pronSectionText,.pronCardText,.pronSubText,.pronWordText,.pron-safe-count,.clothesPageTop p,.clothesGroupBody small,.clothesResultLine,.clothesWordGrid p) {
  color: #315b7d !important;
}

#portal #portalContent :is(.pronThumb,.pronSubThumb,.pronWordThumb,.clothesGroupCover,.clothesWordPhoto) {
  background-color: #dbeafe !important;
}