/* Reading-focused refinements. The existing blue-grey / lavender identity stays. */
:root {
  --paper: #f5f6fa;
  --white: #ffffff;
  --ink: #303b54;
  --muted: #657089;
  --line: #e3e7f0;
  --accent: #52638e;
  --green: #52638e;
  --green2: #edf0f8;
  --sage: #a1abc8;
  --shadow: 0 6px 24px #35436b04;
  --reading-ink: #34435f;
  --reading-muted: #657089;
  --reading-lavender: #746e91;
}
body { color: var(--ink); font-size: 15px; line-height: 1.8; }
::selection { background: #dfe5f4; color: #303b54; }
input::placeholder, textarea::placeholder { color: #737e94; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid #8294bc;
  outline-offset: 4px;
}
.pageHeading h1 { color: #34405a; line-height: 1.5; }
.pageHeading h1 em { color: var(--reading-lavender); }
.pageHeading p, .cardHead p, .muted, .hint, .resultsCount {
  color: var(--reading-muted); font-size: 13px; line-height: 1.9;
}
.eyebrow, .learningEyebrow, .guideKicker {
  color: #6b7791; font-size: 10px; letter-spacing: 1.6px;
}
.card, .learningHub, .curatedShelf { border-color: var(--line); border-radius: 18px; }
.card { padding: 27px; }
.card h2, .cardHead h2 { font-size: 19px; font-weight: 550; color: #3c4d6b; line-height: 1.6; }
.addBtn { background: var(--accent); font-size: 13px; min-height: 44px; padding: 11px 19px; box-shadow: none; }
.addBtn:hover { background: #45577f; }
.secondaryBtn { color: #52638a; border-color: #dce2ee; background: #f5f7fc; font-size: 13px; min-height: 44px; }
.microLink { color: #52658e; font-size: 12px; line-height: 1.7; }
.fieldInput, .captureForm input, .captureForm textarea, .captureForm select {
  background: #fbfcfe; border-color: #dce2ed; font-size: 14px; min-height: 44px;
}
.homeTop { gap: 22px; margin-bottom: 30px; }
.dailyPick { background: linear-gradient(120deg, #435477, #626e92 78%, #716a89); border-radius: 18px; padding: 32px; }
.dailyPick:after { opacity: .5; }
.dailyEyebrow { color: #f5f6fc; font-size: 10px; letter-spacing: 1.5px; }
.dailyPick h4 { color: #fff; line-height: 1.5; margin: 21px 0 16px; max-width: 32ch; }
.dailyPick p { color: #f5f6fc; font-size: 15px; line-height: 1.9; margin: 0 0 10px; }
.dailyPick .dailyNote { color: #f5f6fc; font-size: 13px; line-height: 1.85; }
.dailyActions { gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.dailyActions button { font-size: 12px; min-height: 42px; padding: 10px 15px; }
.dailyActions .ghost { color: #fff; border-color: #ffffff80; background: #ffffff0d; }
.nextCard { padding: 28px; }
.nextCard h2 { font-size: 21px; max-width: 15em; }
.nextCard p, .nextCard .sessionSaveNote { color: var(--reading-muted); font-size: 13px; line-height: 1.9; max-width: 25em; }
.orbit { opacity: .45; right: -64px; pointer-events: none; }
.guideHomeEntry { background: #eef1f8; border: 0; margin-bottom: 28px; padding: 17px 21px; }
.guideHomeEntry strong { color: #52638a; font-size: 13px; }
.guideHomeEntry p { color: var(--reading-muted); font-size: 12px; line-height: 1.8; }
.guideHomeIcon { color: #647496; background: #f8f9fd; border-color: #dce2ef; }
/* A section on the page, rather than a box containing four more boxes. */
.dailyExamSection { padding: 0; background: transparent; border: 0; box-shadow: none; margin-bottom: 30px; }
.dailyExamSection .cardHead { margin-bottom: 18px; gap: 18px; }
.dailyExamSection .cardHead h2 { font-size: 21px; color: #3c4d6b; }
.dailyArchiveControl label, .learningGoal label { font-size: 12px; color: var(--reading-muted); }
.dailyArchiveControl select, .learningGoal select { font-size: 13px; color: #52638a; background: #fff; }
.dailyExamGrid { gap: 18px; }
.dailyExamCard { background: #fff; border-color: var(--line); border-radius: 16px; padding: 25px; }
.dailyExamCard h3 { color: var(--reading-ink); font-size: 25px; line-height: 1.55; margin: 18px 0 13px; }
.dailyExamCard > p { color: var(--reading-muted); font-size: 14px; line-height: 1.9; margin-bottom: 15px; }
.examBadges { gap: 6px; }
.examBadges span { font-size: 11px; color: #586c93; background: #eff2f9; border-color: transparent; padding: 3px 8px; border-radius: 5px; line-height: 1.6; }
.examBadges span:nth-child(2) { color: #74668a; background: #f2eff8; border-color: transparent; }
.dailyExamCard > button { padding: 8px 0 0; min-height: 38px; }
.sentenceNote { width: 100%; margin: 0 0 12px; }
.sentenceNote summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; cursor: pointer; list-style: none; color: #657089; font-family: inherit; font-size: 12px; line-height: 1.8; min-height: 36px; padding: 4px 0; }
.sentenceNote summary::-webkit-details-marker { display: none; }
.sentenceNote summary::after { content: '+'; font-size: 18px; color: #657089; font-weight: 400; flex-shrink: 0; line-height: 1; }
.sentenceNote[open] summary::after { content: '−'; }
.sentenceNote[open] { margin-bottom: 17px; }
.sentenceNote .dailyPattern, .sentenceNote .curatedNote { font-size: 13px; line-height: 1.9; color: var(--reading-muted); border-left: 2px solid #dce2ef; padding: 1px 0 1px 12px; margin: 8px 0 0; }
.learningHub { padding: 27px; }
.learningHubHead h3 { font-size: 21px; line-height: 1.6; color: #3c4d6b; }
.learningHubHead p { font-size: 13px; line-height: 1.8; color: var(--reading-muted); }
.learningMetrics { border: 0; background: #f5f7fb; border-radius: 12px; margin-top: 24px; }
.learningMetrics > div { border-color: #e3e7f0; padding: 20px; }
.learningMetrics small { color: #5c6b86; font-size: 12px; }
.learningMetrics strong { font-size: 30px; color: #435579; font-variant-numeric: tabular-nums; line-height: 1.5; }
.learningMetrics span { font-size: 11px; color: var(--reading-muted); line-height: 1.8; }
.goalTrack { height: 3px; margin: 21px 0 27px; background: #edf0f7; }
.topicHeader { margin-bottom: 18px; gap: 18px; }
.topicHeader h4 { font-size: 16px; color: #435579; }
.topicHeader p, .topicHeader > span { font-size: 12px; color: var(--reading-muted); line-height: 1.8; }
.topicGrid { gap: 13px; }
.topicCard { border-color: transparent; background: #f6f7fb; padding: 18px; border-radius: 12px; gap: 10px; }
.topicCard strong { font-size: 15px; color: #435579; }
.topicCard p { font-size: 12px; color: var(--reading-muted); line-height: 1.85; min-height: 44px; }
.topicCardTop b { color: #7a85a6; font-size: 20px; }
.topicCardTop small { font-size: 11px; color: var(--reading-muted); }
.topicCard button { background: #fff; border-color: #e0e5ef; color: #52658e; font-size: 12px; min-height: 38px; padding: 8px; }
.topicProgress { background: #e7ebf4; }
.homeBottom { gap: 22px; margin-top: 30px; }
.recentRow { padding: 20px 0; border-color: var(--line); }
.recentRow p { color: var(--reading-ink); font-size: 22px; line-height: 1.6; }
.recentRow small { color: var(--reading-muted); font-size: 12px; }
.loopList { gap: 21px; }
.loopList li { color: var(--reading-muted); font-size: 12px; line-height: 1.9; }
.loopList strong { color: #52638a; font-size: 14px; }
.loopList b { color: #6d7a98; font-size: 12px; }
/* The corpus itself carries the visual weight; controls remain quiet. */
.curatedShelf { background: transparent; border: 0; padding: 0; }
.curatedIntro { gap: 22px; }
.curatedIntro h3 { color: #3c4d6b; font-size: 20px; }
.curatedIntro p { color: var(--reading-muted); font-size: 13px; line-height: 1.9; }
.curatedIntro #curatedImportAll { font-size: 12px; min-height: 44px; padding: 10px 15px; background: #fff; }
.examGateway { padding: 23px; margin: 24px 0; background: linear-gradient(110deg, #edf1f9, #f1eff8); border: 0; border-radius: 15px; }
.examGateway h3 { color: #465779; font-size: 20px; }
.examGateway p { color: var(--reading-muted); font-size: 13px; line-height: 1.9; }
.examTrackBtn { color: #52658e; font-size: 13px; min-height: 44px; border-color: #dce2ef; }
.examFilterBar label { font-size: 12px; color: var(--reading-muted); }
.curatedFilters { gap: 8px; margin: 20px 0; }
.curatedFilters button { color: #5c6c8a; font-size: 12px; min-height: 38px; border-color: #dfe4ef; background: transparent; padding: 8px 13px; border-radius: 8px; }
.curatedFilters button.active { background: #e8edf7; color: #405680; border-color: #cdd7eb; font-weight: 600; }
.curatedGrid, #knowledgeList { gap: 18px; }
.curatedCard, .knowledgeItem { background: #fff; border-color: var(--line); border-radius: 16px; padding: 26px; }
.curatedCard { gap: 13px; transition: border-color .18s, box-shadow .18s; }
.curatedCard:hover { transform: none; border-color: #cdd7e9; box-shadow: 0 5px 18px #35436b06; }
.curatedCard small, .knowledgeItemTop strong { font-size: 11px; color: #657089; line-height: 1.8; }
.curatedCard strong { color: var(--reading-ink); font-size: 25px; line-height: 1.55; letter-spacing: 0; }
.curatedCard > p { color: var(--reading-muted); font-size: 14px; line-height: 1.9; }
.curatedCard > .sentenceNote { margin: -3px 0 0; }
.curatedActions { border-top: 1px solid #edf0f6; padding-top: 14px; margin-top: auto; gap: 10px; }
.curatedActions button { font-size: 12px; min-height: 40px; padding: 9px 13px; color: #52658e; background: #f0f3fa; border-color: transparent; }
.curatedActions .textBtn { color: #657089; }
.pagination { font-size: 13px; color: var(--reading-muted); margin-top: 30px; }
.pagination button { font-size: 13px; min-height: 42px; background: #fff; color: #52658e; }
.corpusItem .corpusOriginal { font-size: 26px; line-height: 1.6; color: var(--reading-ink); margin: 20px 0 14px; }
.corpusItem .corpusTranslation { color: var(--reading-muted); font-size: 15px; line-height: 1.9; }
.corpusItem .corpusDetails { color: var(--reading-muted); font-size: 13px; line-height: 1.9; }
.knowledgeMeta { color: var(--reading-muted); font-size: 11px; gap: 8px; margin-top: 18px; }
.tag { color: #657089; font-size: 11px; background: #f1f3f9; }
.corpusStatus { font-size: 11px; color: #5b6d94; background: #eef1f8; }
.corpusStatus.mastered { color: #51658c; }
.corpusStatus.learning { color: #8b6957; }
.knowledgeActions { border-top: 1px solid #edf0f6; padding-top: 10px; margin-top: 18px; gap: 10px; }
.knowledgeActions button { color: #5e7092; font-size: 12px; min-height: 38px; }
/* Review, tests and detail dialogs use the same comfortable reading scale. */
.reviewLayout { gap: 26px; }
#corpusReviewSession { background: #fafbfe; border-color: var(--line); padding: 30px; border-radius: 14px; }
.reviewCardTop, .quizMeta, .sessionToolbar { color: var(--reading-muted); font-size: 12px; }
.reviewPrompt { color: var(--reading-ink); font-size: clamp(27px, 2.5vw, 32px) !important; line-height: 1.6 !important; }
.reviewAnswer { border: 0; background: #edf1f9; padding: 21px; }
.reviewAnswer p { color: #52658a; font-size: 15px; line-height: 1.9; }
.reviewAnswerLabel { color: #657089; font-size: 10px; }
.reviewControls button { font-size: 13px; min-height: 46px; }
.forecastRow { color: var(--reading-muted); font-size: 13px; }
.forecastRow b { color: #52658a; }
.testSetup, .quizCard { max-width: 820px; padding: 34px; }
.testSetup h2, .quizCard h2 { color: #435579; line-height: 1.6; }
.testSetup p, .quizHint { color: var(--reading-muted); font-size: 14px; line-height: 1.9; }
.testOptions label { color: #5c6b86; font-size: 13px; }
.testHint { background: #f2f5fb; border: 0; color: #5c6b86; font-size: 13px; line-height: 1.9; padding: 18px; }
.quizPrompt { color: var(--reading-ink); font-size: 30px; line-height: 1.6; margin: 30px 0; }
.quizChoices { gap: 13px; }
.quizChoices button { background: #fbfcfe; color: #52617e; font-size: 15px; line-height: 1.85; padding: 17px 20px; border-color: #dfe5ef; }
.quizChoices button b { color: #657089; font-size: 12px; }
.quizChoices button.selected, .quizChoices button.correct { color: #405982; background: #eaf0fa; border-color: #91a4c9; }
.quizChoices button.wrong { color: #8d5b4c; background: #fcf0ec; border-color: #dcb7ab; }
.feedbackBox { color: #52658a; background: #eff3fa; border: 0; font-size: 14px; line-height: 1.9; }
.feedbackBox.wrong { color: #8d5b4c; background: #fcf2ed; }
.scoreArea p, .resultRow, .reportTools { color: var(--reading-muted); font-size: 14px; line-height: 1.9; }
.scoreCircle { color: #52658e; font-variant-numeric: tabular-nums; }
.scoreCircle small { color: var(--reading-muted); font-size: 10px; }
.resultRow { padding: 23px 0; }
.resultRow strong { color: var(--reading-ink); font-size: 24px; line-height: 1.6; }
.resultRow .incorrect { color: #945f4f; }
.dialog { border-color: var(--line); }
.dialogHead h2 { color: #435579; line-height: 1.6; }
.dialogClose { color: #5c6b86; }
.capturePreview { background: #fafbfe; border-color: var(--line); padding: 27px; }
.capturePreview h3 { color: var(--reading-ink); font-size: 29px; line-height: 1.6; margin: 18px 0; }
.capturePreview p { color: #5d6d88; font-size: 15px; line-height: 1.95; }
.capturePreview small, .examNote small { color: #657089; font-size: 12px; line-height: 1.85; }
.examNote { border-color: var(--line); margin-top: 23px; padding-top: 18px; }
.examNote p { color: #5d6d88; font-size: 14px; line-height: 1.95; }
.captureFields label { font-size: 14px; color: #52617e; }
.steps span { color: #657089; font-size: 12px; }
.steps span.active { color: #405982; border-color: #8294bc; }
.savedPanel p { font-size: 14px; color: var(--reading-muted); }
.formError { font-size: 13px; color: #945f4f; }
.emptyState { color: var(--reading-muted); }
.emptyState h3 { color: #52638a; font-size: 19px; }
.emptyState p { color: var(--reading-muted); font-size: 14px; line-height: 1.9; }
/* Guide and data pages should be as legible as the learning pages. */
.guideHero { padding: 34px; background: linear-gradient(115deg, #fff, #f6f7fc); }
.guideHero h2 { color: #52638a; }
.guideHero > div > p, .guideStartNote p, .guideStep p, .guideWriting > p, .guideDaily > p,
.guideNotebookGrid p, .guideBackup p, .guideFAQ details p, .guidePlainList,
.guideExamRow p, .guideDailyNote p { color: var(--reading-muted); font-size: 14px; line-height: 1.95; }
.guideStartNote { background: #f0f3fa; border: 0; }
.guideStartNote strong, .guideStep h3, .guideExamRow h3, .guideNotebookGrid h3 { color: #52638a; }
.guideStep h3 { font-size: 17px; line-height: 1.65; }
.guideMiniFlow, .guideSectionHeading > span { color: var(--reading-muted); font-size: 12px; }
.guideSectionHeading h2, .guideWriting h2, .guideDaily h2, .guideNotebook h2, .guideBackup h2, .guideFAQ h2 { color: #435579; }
.guideExamRow h3, .guideNotebookGrid h3 { font-size: 15px; }
.guideExamRow .secondaryBtn { font-size: 12px; }
.guideDailyNote b { color: #52638a; font-size: 13px; }
.guideFAQ summary { color: #52638a; font-size: 15px; line-height: 1.85; padding-block: 6px; }
.guideFinish p { color: var(--reading-muted); font-size: 14px; }
.statusLine { color: var(--reading-muted); font-size: 13px; line-height: 1.85; }
.capabilityCard table { font-size: 13px; line-height: 1.8; }
.capabilityCard th { font-size: 12px; color: #52638a; }
.capabilityCard td { color: #657089; }
.capabilityCard td:first-child { color: #52638a; }
footer { color: #657089; font-size: 11px; margin-top: 36px; line-height: 1.9; }
.toast { font-size: 13px; line-height: 1.8; }

@media (min-width: 781px) {
  .shell { max-width: 1540px; grid-template-columns: 220px minmax(0, 1fr); }
  .main { padding: 30px clamp(26px, 3.4vw, 52px) 28px; }
  .sidebar { background: #f8f9fc; padding-top: 34px; }
  .logo small { font-size: 9px; color: #657089; }
  .navLabel { font-size: 10px; color: #6b7791; letter-spacing: 1.2px; }
  .nav button { font-size: 13px; color: #657089; min-height: 46px; }
  .nav button.active { color: #405680; background: #e9eef8; }
  .nav button > span:first-child { color: #6b7b9d; }
  .nav button .navCount { color: #52638a; background: #fff; }
  .quote { background: transparent; color: #657089; font-size: 12px; line-height: 1.9; }
  .profile small { font-size: 11px; color: #657089; }
  .crumb { font-size: 10px; color: #657089; }
  .crumb b, .datePill, .privatePill { font-size: 11px; color: #657089; }
  .topbar { margin-bottom: 35px; }
  .pageHeading { margin-bottom: 30px; }
  .pageHeading h1 { font-size: clamp(28px, 2.5vw, 36px); }
  .dailyExamSection { padding: 0; }
  .curatedShelf { padding: 0; }
  .reviewLayout > div { min-width: 0; }
}
@media (min-width: 781px) and (max-width: 1100px) {
  .shell { grid-template-columns: 196px minmax(0, 1fr); }
  .main { padding: 25px; }
  .topicGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learningMetrics > div { padding: 16px 13px; }
  .examGateway { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (min-width: 781px) and (max-width: 1020px) {
  .homeTop, .homeBottom, .dailyExamGrid, .curatedGrid, #knowledgeList { grid-template-columns: minmax(0, 1fr); }
  .nextCard { min-height: 210px; }
  .learningHubHead { flex-wrap: wrap; gap: 18px; }
  .curatedIntro { flex-wrap: wrap; }
  .learningMetrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learningMetrics > div:nth-child(2) { border-right: 0; }
  .learningMetrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .guideHero, .guideTwoColumns { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 780px) {
  :root { --mobile-ink: #34435f; --mobile-muted: #657089; }
  .topbar { background: #f5f6faf5; }
  .mobileBrand, .mobileBrand strong { color: #405475; }
  .mobileBrand small, .mobileNav button { color: #657089; }
  .mobileNav button.active { color: #405680; }
  .pageHeading p { font-size: 14px; }
  .card, .learningHub { padding: 22px; }
  .homeTop { gap: 18px; margin-bottom: 27px; }
  .dailyPick { padding: 27px 24px; }
  .dailyPick h4 { font-size: 29px; line-height: 1.55; }
  .dailyActions button { font-size: 13px; min-height: 44px; }
  .nextCard p { font-size: 14px; max-width: 90%; }
  .guideHomeEntry { padding: 18px; margin-bottom: 25px; }
  .guideHomeEntry strong { font-size: 14px; }
  .guideHomeEntry p { font-size: 13px; }
  .guideHomeEntry .microLink { font-size: 13px; }
  .dailyExamSection { padding: 0; margin-bottom: 27px; }
  .dailyExamSection .cardHead h2 { font-size: 21px; }
  .dailyExamGrid { gap: 16px; }
  .dailyExamCard { padding: 23px; }
  .dailyExamCard h3 { font-size: 25px; }
  .dailyArchiveControl label, .learningGoal label { font-size: 13px; }
  .sentenceNote summary { font-size: 13px; min-height: 44px; }
  .dailyExamCard > button { min-height: 44px; font-size: 13px; }
  .learningHubHead h3 { font-size: 20px; }
  .learningMetrics > div { padding: 17px 14px; }
  .learningMetrics > div:nth-child(2) { border-right: 0; }
  .learningMetrics > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .topicGrid { gap: 11px; }
  .topicCard { padding: 16px 13px; }
  .topicCard button { min-height: 44px; }
  .curatedShelf { padding: 0; }
  .curatedIntro #curatedImportAll { font-size: 13px; }
  .examGateway { padding: 21px; }
  .examGateway h3 { font-size: 19px; }
  .curatedFilters button { font-size: 13px; min-height: 44px; border-radius: 22px; }
  .curatedCard, .knowledgeItem { padding: 24px; }
  .curatedCard > p { font-size: 15px; }
  .curatedActions button { min-height: 44px; font-size: 13px; }
  .knowledgeActions { gap: 8px; }
  .knowledgeActions button { min-height: 44px; font-size: 13px; }
  #corpusReview { padding: 22px; }
  #corpusReviewSession { padding: 21px; }
  .reviewPrompt { font-size: 28px !important; }
  .reviewControls button { min-height: 50px; }
  .reviewAnswer { padding: 18px; }
  .forecastRow { font-size: 14px; }
  .testSetup, .quizCard { padding: 25px 22px; }
  .quizPrompt { font-size: 28px; }
  .quizChoices button { padding: 16px; }
  .quizActions .addBtn { font-size: 14px; }
  .microLink { font-size: 13px; }
  .resultRow strong { font-size: 24px; }
  .capturePreview { padding: 21px; }
  .capturePreview h3 { font-size: 28px; }
  .guideHero { padding: 25px; }
  .guideStep h3 { font-size: 19px; }
  .guideFAQ summary { font-size: 15px; }
  .guideHero .buttonRow .secondaryBtn { font-size: 14px; }
  .guideExamRow .secondaryBtn { font-size: 13px; }
  .toast { font-size: 14px; }
}
@media (max-width: 359px) {
  .card, .learningHub { padding: 18px; }
  .curatedCard, .knowledgeItem, .dailyExamCard { padding: 20px; }
  .dailyExamSection, .curatedShelf { padding: 0; }
  .topicCard { padding: 13px 10px; }
  .dailyPick { padding: 24px 21px; }
  .dailyPick h4 { font-size: 27px; }
  .testSetup, .quizCard { padding: 22px 18px; }
  #corpusReview { padding: 18px; }
  #corpusReviewSession { padding: 17px; }
  .reviewPrompt { font-size: 25px !important; }
  .capturePreview { padding: 18px; }
  .capturePreview h3 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .appView { animation: none; }
  button, a, .curatedCard { transition: none; }
}