/* A single light palette for the dashboard; dark mode keeps its existing colors. */
html:not([data-theme="dark"]) .dashboard-body {
  --dash-canvas: #f6f8f4;
  --dash-surface: #ffffff;
  --dash-surface-soft: #f2f6ef;
  --dash-surface-tint: #eaf2e7;
  --dash-border: #dfe8dc;
  --dash-ink: #263a2c;
  --dash-muted: #68796b;
  --dash-subtle: #819083;
  --dash-primary: #397858;
  --dash-primary-hover: #2e664a;
  --dash-primary-soft: #e7f0e4;
  background: var(--dash-canvas);
  color: var(--dash-ink);
}

html:not([data-theme="dark"]) .dashboard-body .app-sidebar,
html:not([data-theme="dark"]) .dashboard-body .dashboard-topbar,
html:not([data-theme="dark"]) .dashboard-body .stat-card,
html:not([data-theme="dark"]) .dashboard-body .dash-course-card,
html:not([data-theme="dark"]) .dashboard-body .activity-card,
html:not([data-theme="dark"]) .dashboard-body .settings-card,
html:not([data-theme="dark"]) .dashboard-body .essay-editor-card,
html:not([data-theme="dark"]) .dashboard-body .university-card,
html:not([data-theme="dark"]) .dashboard-body .octo-drawer {
  background-color: var(--dash-surface);
  border-color: var(--dash-border);
}

html:not([data-theme="dark"]) .dashboard-body .dashboard-topbar {
  background: rgb(255 255 255 / 92%);
}

html:not([data-theme="dark"]) .dashboard-body .side-link.active,
html:not([data-theme="dark"]) .dashboard-body .side-link:hover,
html:not([data-theme="dark"]) .dashboard-body .dash-search kbd,
html:not([data-theme="dark"]) .dashboard-body .course-continue:hover,
html:not([data-theme="dark"]) .dashboard-body .drawer-close,
html:not([data-theme="dark"]) .dashboard-body .drawer-avatar,
html:not([data-theme="dark"]) .dashboard-body .suggestion-chips button {
  background: var(--dash-primary-soft);
  border-color: var(--dash-border);
  color: var(--dash-primary);
}

html:not([data-theme="dark"]) .dashboard-body .side-link.active .side-icon,
html:not([data-theme="dark"]) .dashboard-body .side-link:hover .side-icon,
html:not([data-theme="dark"]) .dashboard-body .see-all,
html:not([data-theme="dark"]) .dashboard-body .course-continue,
html:not([data-theme="dark"]) .dashboard-body .settings-provider-row strong,
html:not([data-theme="dark"]) .dashboard-body .settings-sidecard a,
html:not([data-theme="dark"]) .dashboard-body .university-disclaimer a,
html:not([data-theme="dark"]) .dashboard-body .octo-tip-card > button {
  color: var(--dash-primary);
}

html:not([data-theme="dark"]) .dashboard-body .welcome-row p,
html:not([data-theme="dark"]) .dashboard-body .dash-course-card > p,
html:not([data-theme="dark"]) .dashboard-body .settings-card-heading p,
html:not([data-theme="dark"]) .dashboard-body .settings-note,
html:not([data-theme="dark"]) .dashboard-body .university-intro,
html:not([data-theme="dark"]) .dashboard-body .university-results-head p,
html:not([data-theme="dark"]) .dashboard-body .essay-heading p,
html:not([data-theme="dark"]) .dashboard-body .essay-guide-card > p:not(.essay-privacy) {
  color: var(--dash-muted);
}

html:not([data-theme="dark"]) .dashboard-body .date-chip,
html:not([data-theme="dark"]) .dashboard-body .period-select,
html:not([data-theme="dark"]) .dashboard-body .icon-button,
html:not([data-theme="dark"]) .dashboard-body .course-more,
html:not([data-theme="dark"]) .dashboard-body .dash-search,
html:not([data-theme="dark"]) .dashboard-body .course-continue,
html:not([data-theme="dark"]) .dashboard-body .settings-field input,
html:not([data-theme="dark"]) .dashboard-body .settings-field select,
html:not([data-theme="dark"]) .dashboard-body .university-field input,
html:not([data-theme="dark"]) .dashboard-body .university-field select,
html:not([data-theme="dark"]) .dashboard-body .essay-field input,
html:not([data-theme="dark"]) .dashboard-body .essay-field select,
html:not([data-theme="dark"]) .dashboard-body .essay-field textarea,
html:not([data-theme="dark"]) .dashboard-body .drawer-input {
  border-color: var(--dash-border);
}

html:not([data-theme="dark"]) .dashboard-body .settings-field input:focus,
html:not([data-theme="dark"]) .dashboard-body .settings-field select:focus,
html:not([data-theme="dark"]) .dashboard-body .university-field input:focus,
html:not([data-theme="dark"]) .dashboard-body .university-field select:focus,
html:not([data-theme="dark"]) .dashboard-body .essay-field input:focus,
html:not([data-theme="dark"]) .dashboard-body .essay-field select:focus,
html:not([data-theme="dark"]) .dashboard-body .essay-field textarea:focus {
  border-color: #6f9d76;
  box-shadow: 0 0 0 3px rgb(78 137 96 / 13%);
}

html:not([data-theme="dark"]) .dashboard-body .octo-drawer .drawer-message.assistant-message {
  background: var(--dash-surface-soft);
  border-color: var(--dash-border);
  color: #405344;
}

html:not([data-theme="dark"]) .dashboard-body .octo-drawer .drawer-message.student-message {
  background: var(--dash-primary-soft);
  border-color: #d8e6d4;
  color: #31583d;
}

html:not([data-theme="dark"]) .dashboard-body .drawer-head,
html:not([data-theme="dark"]) .dashboard-body .settings-divider,
html:not([data-theme="dark"]) .dashboard-body .essay-checklist {
  border-color: var(--dash-border);
}

html:not([data-theme="dark"]) .dashboard-body .course-progress,
html:not([data-theme="dark"]) .dashboard-body .plan-meter,
html:not([data-theme="dark"]) .dashboard-body .accuracy-progress,
html:not([data-theme="dark"]) .dashboard-body .essay-meter,
html:not([data-theme="dark"]) .dashboard-body .score-track {
  background: #e8eee5;
}

html:not([data-theme="dark"]) .dashboard-body .practice-accuracy-section {
  background: radial-gradient(ellipse at 95% 0, #eaf2e7 0, transparent 32%), linear-gradient(145deg, #fff, #f7faf5);
  border-color: var(--dash-border);
}

html:not([data-theme="dark"]) .dashboard-body .practice-accuracy-section .block-heading h2,
html:not([data-theme="dark"]) .dashboard-body .accuracy-subject h3 {
  color: var(--dash-ink);
}

html:not([data-theme="dark"]) .dashboard-body .practice-accuracy-section .accuracy-icon {
  background: var(--dash-primary-soft);
  color: var(--dash-primary);
  box-shadow: 0 5px 14px rgb(57 120 88 / 12%);
}

html:not([data-theme="dark"]) .dashboard-body .accuracy-intro,
html:not([data-theme="dark"]) .dashboard-body .accuracy-note,
html:not([data-theme="dark"]) .dashboard-body .accuracy-result {
  color: var(--dash-muted);
}

html:not([data-theme="dark"]) .dashboard-body .accuracy-subject {
  background: var(--dash-surface);
  border-color: var(--dash-border);
}

html:not([data-theme="dark"]) .dashboard-body .accuracy-field {
  color: #536758;
}

html:not([data-theme="dark"]) .dashboard-body .accuracy-field input {
  background: #fff;
  border-color: #dfe8dc;
  color: var(--dash-ink);
}

html:not([data-theme="dark"]) .dashboard-body .accuracy-field input:focus {
  border-color: #6f9d76;
  box-shadow: 0 0 0 3px rgb(78 137 96 / 13%);
}

html:not([data-theme="dark"]) .dashboard-body .subject-mark {
  background: var(--dash-primary-soft);
  color: var(--dash-primary);
}

html:not([data-theme="dark"]) .dashboard-body .reading-subject .subject-mark {
  background: #e6f1eb;
  color: #4e7960;
}

html:not([data-theme="dark"]) .dashboard-body .subject-total {
  color: var(--dash-subtle);
}

html:not([data-theme="dark"]) .dashboard-body .dashboard-footer {
  border-color: var(--dash-border);
  color: var(--dash-subtle);
}

/* Keep the native SAT date picker consistent with the selected site theme. */
html:not([data-theme="dark"]) .dashboard-body #satExamDate {
  color-scheme: light;
  cursor: pointer;
}

html[data-theme="dark"] .dashboard-body #satExamDate {
  color-scheme: dark;
  cursor: pointer;
}

.course-catalog { margin-top: 34px; scroll-margin-top: 82px; }
.catalog-intro { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.catalog-count { border: 1px solid var(--line); border-radius: 20px; padding: 7px 11px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.catalog-filters { display: flex; gap: 7px; margin: 14px 0; }
.catalog-filter { border: 1px solid var(--line); border-radius: 18px; padding: 7px 13px; color: var(--muted); background: var(--white); font: 600 9px var(--font); cursor: pointer; }
.catalog-filter.active { border-color: var(--purple); color: var(--white); background: var(--purple); }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.catalog-course-card { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 13px; padding: 16px; background: var(--white); box-shadow: 0 6px 18px #22332208; }
.catalog-course-top { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.catalog-course-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: var(--purple); background: var(--lav); font: 700 14px var(--display); }
.catalog-course-card h3 { margin: 13px 0 6px; color: var(--ink); font: 700 14px/1.3 var(--display); }
.catalog-course-card>p { min-height: 34px; margin: 0 0 14px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.catalog-progress { height: 5px; overflow: hidden; border-radius: 5px; background: var(--lav); }
.catalog-progress span { display: block; height: 100%; border-radius: inherit; background: var(--purple); transition: width .25s ease; }
.catalog-progress-meta { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0 12px; color: var(--muted); font-size: 8px; }
.catalog-open { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; color: var(--purple); background: var(--white); font: 700 9px var(--font); cursor: pointer; }
.catalog-open { text-decoration: none; }
.catalog-open:hover { border-color: var(--purple); background: var(--lav); }
.catalog-empty { grid-column: 1/-1; padding: 20px; border: 1px dashed var(--line); border-radius: 11px; color: var(--muted); text-align: center; font-size: 10px; }
.dash-course-card[data-course-id] { cursor: pointer; }
.dash-course-card[data-course-id]:hover { transform: translateY(-2px); box-shadow: 0 10px 24px #22332212; }
.course-dialog { width: min(900px, calc(100vw - 32px)); max-width: 900px; max-height: min(86vh, 760px); padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--white); box-shadow: 0 25px 90px #15271938; }
.course-dialog::backdrop { background: rgb(20 30 23 / 55%); backdrop-filter: blur(3px); }
.course-dialog-shell { padding: 24px; }
.course-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.course-dialog-eyebrow { color: var(--purple); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.course-dialog-header h2 { margin: 6px 0 4px; color: var(--ink); font: 800 22px/1.2 var(--display); letter-spacing: -.04em; }
.course-dialog-header p { margin: 0; color: var(--muted); font-size: 9px; }
.course-dialog-close { flex: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: var(--white); font-size: 21px; cursor: pointer; }
.course-learning-layout { display: grid; grid-template-columns: minmax(190px, .72fr) minmax(0, 1.7fr); gap: 24px; padding-top: 20px; }
.course-topic-list { display: flex; flex-direction: column; gap: 7px; align-self: start; }
.course-topic-button { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid transparent; border-radius: 9px; padding: 10px; color: var(--ink); background: transparent; text-align: left; font: 600 9px/1.4 var(--font); cursor: pointer; }
.course-topic-button>span:first-child { display: grid; flex: none; place-items: center; width: 25px; height: 25px; border-radius: 8px; color: var(--purple); background: var(--lav); font-size: 9px; }
.course-topic-button small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 400; }
.course-topic-button:hover,.course-topic-button.active { border-color: var(--line); background: var(--lav); }
.course-topic-button.complete>span:first-child { color: #fff; background: #438361; }
.course-lesson { min-width: 0; }
.lesson-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: 9px; }
.course-lesson h3 { margin: 12px 0 9px; color: var(--ink); font: 800 19px/1.3 var(--display); letter-spacing: -.03em; }
.lesson-text { margin: 0; color: var(--ink); font-size: 11px; line-height: 1.8; }
.lesson-key-point { margin: 15px 0; border-left: 3px solid var(--purple); border-radius: 0 8px 8px 0; padding: 10px 13px; background: var(--lav); }
.lesson-key-point span,.lesson-quiz-label { color: var(--purple); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.lesson-key-point p { margin: 4px 0 0; color: var(--ink); font-size: 10px; line-height: 1.6; }
.lesson-quiz { border: 1px solid var(--line); border-radius: 11px; padding: 14px; }
.lesson-quiz h4 { margin: 8px 0 11px; color: var(--ink); font: 700 11px/1.55 var(--font); }
.lesson-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.lesson-answer { min-height: 36px; border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; color: var(--ink); background: var(--white); text-align: left; font: 9px/1.4 var(--font); cursor: pointer; }
.lesson-answer:hover:not(:disabled) { border-color: var(--purple); background: var(--lav); }
.lesson-answer.correct { border-color: #5a9a70; color: #28633f; background: #e9f5eb; }
.lesson-answer.incorrect { border-color: #cf7b75; color: #9a3e3b; background: #fff0ee; }
.lesson-answer:disabled { cursor: default; }
.lesson-quiz-feedback { min-height: 0; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.lesson-quiz-feedback:not(:empty) { margin-top: 10px; }
.lesson-quiz-feedback.correct { color: #34734b; }
.lesson-quiz-feedback.incorrect { color: #a7524d; }
.lesson-actions { display: flex; justify-content: space-between; gap: 9px; margin-top: 13px; }
.lesson-complete,.lesson-next { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; padding: 0 13px; color: var(--purple); background: var(--white); font: 700 9px var(--font); cursor: pointer; }
.lesson-complete { border-color: var(--purple); color: #fff; background: var(--purple); }
.lesson-complete:disabled { opacity: .7; cursor: default; }
.lesson-next:hover { background: var(--lav); }
.course-practice { margin-top: 16px; border: 1px solid var(--line); border-radius: 13px; padding: 16px; background: var(--white); }
.course-practice-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.course-practice-kicker { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.course-practice-heading h4 { margin: 5px 0 4px; color: var(--ink); font: 700 14px var(--display); }
.course-practice-heading p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.course-question-count { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: var(--purple); background: var(--lav); font: 800 13px var(--display); }
.course-practice-controls { display: flex; align-items: center; gap: 9px; margin-top: 14px; }
.course-practice-controls label { color: var(--muted); font-size: 9px; font-weight: 700; }
.course-practice-controls select { min-width: 120px; height: 37px; border: 1px solid var(--line); border-radius: 8px; padding: 0 9px; color: var(--ink); background: var(--white); font: 9px var(--font); }
.course-practice-controls button,.course-practice-session-actions button { min-height: 37px; margin-left: auto; border: 0; border-radius: 8px; padding: 0 12px; color: #fff; background: var(--purple); font: 700 9px var(--font); cursor: pointer; }
.course-practice-controls button:disabled { opacity: .7; cursor: default; }
.course-practice-session[hidden] { display: none; }
.course-practice-session { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.course-practice-progress { display: grid; gap: 7px; color: var(--muted); font-size: 8px; font-weight: 700; }
.course-practice-progress>div { height: 5px; overflow: hidden; border-radius: 9px; background: var(--lav); }
.course-practice-progress>div span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--purple); transition: width .25s ease; }
.course-practice-question { margin-top: 13px; }
.course-practice-question>span { color: var(--purple); font-size: 8px; font-weight: 800; }
.course-practice-question h5 { margin: 7px 0 12px; color: var(--ink); font: 600 12px/1.6 var(--font); white-space: pre-line; }
.course-practice-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.course-practice-answer { min-height: 40px; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; color: var(--ink); background: var(--white); text-align: left; font: 9px/1.5 var(--font); cursor: pointer; transition: border-color .15s,background .15s,transform .15s; }
.course-practice-answer:hover:not(:disabled) { border-color: var(--purple); background: var(--lav); transform: translateY(-1px); }
.course-practice-answer.correct { border-color: #5a9a70; color: #28633f; background: #e9f5eb; }
.course-practice-answer.incorrect { border-color: #cf7b75; color: #9a3e3b; background: #fff0ee; }
.course-practice-answer:disabled { cursor: default; }
#coursePracticeFeedback { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
#coursePracticeFeedback:not(:empty) { margin-top: 10px; }
#coursePracticeFeedback.correct { color: #34734b; }
#coursePracticeFeedback.incorrect { color: #a7524d; }
.course-practice-session-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.course-practice-session-actions>span { color: var(--muted); font-size: 9px; font-weight: 700; }
.course-practice-session-actions button { margin-left: 0; }
.course-practice-session-actions button:disabled { opacity: .55; cursor: default; }
.course-practice-note { margin: 10px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }
@media(max-width:600px) { .course-practice { padding: 13px; } .course-practice-controls { flex-wrap: wrap; } .course-practice-controls button { width: 100%; } .course-practice-answers { grid-template-columns: 1fr; } }@media(max-width:850px) { .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .catalog-grid { grid-template-columns: 1fr; } .catalog-course-card { padding: 14px; } .course-dialog { width: calc(100vw - 20px); max-height: 90dvh; border-radius: 13px; } .course-dialog-shell { padding: 17px; } .course-learning-layout { grid-template-columns: 1fr; gap: 16px; } .course-topic-list { display: grid; grid-template-columns: 1fr 1fr; } .course-topic-button { padding: 7px; } .lesson-answers,.generated-answer-list { grid-template-columns: 1fr; } .catalog-intro { max-width: 280px; line-height: 1.5; } #questionMakerForm { grid-template-columns: 1fr 1fr; } #questionMakerForm .question-focus-field { grid-column: 1/-1; } #questionMakerForm button { grid-column: 1/-1; } }
.courses-page-body .courses-back-link { color: var(--purple); font-size: 9px; font-weight: 700; white-space: nowrap; }
.courses-page-body .courses-search { width: 210px; }
.courses-page-body .courses-catalog-page { margin-top: 8px; }
.courses-page-body .catalog-course-card[hidden] { display: none; }
.dashboard-content > [hidden] { display: none !important; }
.section-page .dashboard-content { min-height: calc(100vh - 66px); }
.section-page .dashboard-content>section:not(.bottom-grid) { margin-top: 4px; }
.study-plan-section { margin-top: 30px; scroll-margin-top: 82px; }
.study-plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 15px; }
.study-plan-grid article { border: 1px solid var(--line); border-radius: 12px; padding: 15px; background: var(--white); }
.study-plan-grid article>span { color: var(--purple); font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.study-plan-grid h3 { margin: 10px 0 14px; color: var(--ink); font: 700 12px/1.4 var(--display); }
.study-plan-grid a { color: var(--purple); font-size: 9px; font-weight: 700; }
.study-plan-regenerate { border: 0; background: transparent; cursor: pointer; font: inherit; }
.study-plan-builder { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)) auto; align-items: end; gap: 10px; margin: 18px 0 14px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb,var(--white) 88%,var(--mint) 12%); }
.study-plan-builder label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.study-plan-builder select { width: 100%; min-height: 40px; padding: 0 10px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 9px; font: inherit; }
.study-plan-create { min-height: 40px; padding: 0 14px; border: 0; border-radius: 9px; color: #fff; background: var(--purple); font: 700 10px/1.2 var(--display); cursor: pointer; white-space: nowrap; }
.study-plan-context { min-height: 20px; color: var(--muted); font-size: 10px; }
.study-plan-grid article { min-height: 142px; display: flex; flex-direction: column; }
.study-plan-grid h3 { font-size: 14px; }
.study-plan-grid article p { margin: 0 0 12px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.study-plan-grid a { margin-top: auto; }
.study-plan-ai-note { min-height: 0; margin: 12px 0 0; padding: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.study-plan-ai-note:not(:empty) { padding: 12px 14px; border-left: 3px solid var(--purple); border-radius: 0 9px 9px 0; background: color-mix(in srgb,var(--white) 88%,var(--mint) 12%); }
@media(max-width:900px) { .study-plan-builder { grid-template-columns: repeat(2,minmax(0,1fr)); } .study-plan-create { grid-column: 1/-1; } }
@media(max-width:600px) { .courses-page-body .courses-back-link { display: none; } .courses-page-body .courses-search { width: 36px; } .courses-page-body .dashboard-topbar { justify-content: flex-start; } .courses-page-body .topbar-actions { margin-left: auto; } .study-plan-grid { grid-template-columns: 1fr; } }