:root {
  --navy: #17324a;
  --navy-dark: #102638;
  --ink: #263d50;
  --muted: #687d8d;
  --line: #d7e3e9;
  --rail: #f3f7f9;
  --blue: #247eb4;
  --blue-bright: #35a9de;
  --blue-soft: #eaf7fd;
  --footer: #e4f5fc;
  --green: #23885a;
  --green-soft: #eaf7ef;
  --red: #bd4d49;
  --red-soft: #fff0ef;
  --amber: #b77713;
  --base-text-size: 1rem;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
button, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, select:focus-visible, a:focus-visible {
  outline: 3px solid rgba(53, 169, 222, .35);
  outline-offset: 3px;
}

.topbar {
  height: 72px;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) minmax(280px, 330px) auto;
  align-items: stretch;
  color: #fff;
  background: var(--navy);
  position: relative;
  z-index: 10;
}
.brand {
  border: 0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  background: transparent;
  text-align: left;
}
.brand:hover { background: rgba(0, 0, 0, .12); }
.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 11px;
  color: #72c9ef;
  font-size: 1.2rem;
  font-weight: 900;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.02rem; }
.brand small { margin-top: 2px; color: #addbed; font-size: .69rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.exam-context { display: flex; justify-content: center; align-items: center; gap: 42px; min-width: 0; }
.exam-context > strong { overflow: hidden; color: #dbe7ec; text-overflow: ellipsis; white-space: nowrap; }
.timer { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.timer small { color: #a9bcc8; font-size: .72rem; font-weight: 850; letter-spacing: .12em; }
.timer b { font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.overall-progress {
  min-width: 280px;
  padding: 10px 16px;
  border-left: 1px solid rgba(255, 255, 255, .13);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  gap: 14px;
  background: rgba(255, 255, 255, .035);
}
.completion-metric { min-width: 0; display: grid; align-content: center; gap: 5px; }
.overall-progress-copy { min-width: 0; display: flex; align-items: baseline; gap: 7px; }
.overall-progress-copy small { color: #a9c3d1; font-size: .61rem; font-weight: 900; letter-spacing: .09em; white-space: nowrap; }
.overall-progress-copy strong { color: #fff; font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.overall-progress-copy b { margin-left: auto; color: #80d2f3; font-size: .74rem; font-variant-numeric: tabular-nums; }
.overall-progress-track { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .19); }
.overall-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #47b8e8, #65d29b); transition: width .2s ease; }
.accuracy-metric { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .14); display: grid; align-content: center; }
.accuracy-metric small { color: #a9c3d1; font-size: .59rem; font-weight: 900; letter-spacing: .09em; }
.accuracy-metric strong { color: #80e0ae; font-size: 1rem; font-variant-numeric: tabular-nums; line-height: 1.15; }
.accuracy-metric span { color: #dce9ee; font-size: .61rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.top-actions { height: 100%; display: flex; }
.top-action { border: 0; padding: 0 17px; color: #fff; background: transparent; font-size: .72rem; font-weight: 800; letter-spacing: .075em; }
.top-action:hover { background: rgba(0, 0, 0, .14); }
.top-action[aria-expanded="true"] { color: #fff; background: rgba(0, 0, 0, .2); }

.lecture-home {
  height: calc(100vh - 72px);
  padding: 54px clamp(24px, 6vw, 100px) 70px;
  overflow-y: auto;
  background: linear-gradient(180deg, #f5fafc 0, #fff 300px);
}
.module-tabs {
  width: min(1200px, 100%);
  margin: 0 auto 42px;
  padding: 8px;
  border: 1px solid #d6e4eb;
  border-radius: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 12px 34px rgba(23, 50, 74, .07);
}
.module-tab {
  min-width: 0;
  min-height: 82px;
  padding: 13px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  background: transparent;
  text-align: left;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.module-tab:hover { transform: translateY(-1px); background: #f4f9fb; }
.module-tab.active {
  border-color: #9fd3ea;
  background: linear-gradient(135deg, #eaf7fd, #fff);
  box-shadow: 0 7px 22px rgba(36, 126, 180, .12);
}
.module-tab-number {
  min-width: 56px;
  height: 46px;
  padding: 0 10px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--navy);
  font-size: .92rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.module-tab:not(.active) .module-tab-number { color: var(--navy); background: #e5edf1; }
.module-tab-copy { min-width: 0; }
.module-tab-copy strong, .module-tab-copy small { display: block; }
.module-tab-copy strong { color: var(--navy); font-size: .92rem; }
.module-tab-copy small { margin-top: 5px; overflow: hidden; color: var(--muted); font-size: .72rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.module-tab-status { padding: 5px 8px; border-radius: 999px; color: #176e49; background: #e4f5eb; font-size: .59rem; font-weight: 900; letter-spacing: .1em; }
.module-tab:not(.active) .module-tab-status { color: #5e7080; background: #edf2f4; }
.hero { max-width: 820px; margin: 0 auto 36px; text-align: center; }
.eyebrow { margin: 0; color: var(--blue); font-size: .75rem; font-weight: 900; letter-spacing: .14em; }
.hero h1 { margin: 10px 0 12px; color: var(--navy); font-size: clamp(2.2rem, 4vw, 3.5rem); letter-spacing: -.045em; }
.hero > p:not(.eyebrow) { max-width: 700px; margin: 0 auto; color: var(--muted); line-height: 1.65; }
.summary { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.summary span { padding: 7px 11px; border: 1px solid #d6e5ec; border-radius: 999px; color: #526c7b; background: #fff; font-size: .78rem; font-weight: 750; }
.source-banks { width: min(1200px, 100%); margin: 0 auto 36px; }
.source-banks-heading { margin-bottom: 16px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.source-banks-heading h2, .lecture-section-heading h2 { margin: 5px 0 0; color: var(--navy); font-size: clamp(1.35rem, 2vw, 1.75rem); letter-spacing: -.025em; }
.source-banks-heading > p, .lecture-section-heading > p:last-child { max-width: 560px; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.55; }
.section-kicker { margin: 0; color: var(--blue); font-size: .67rem; font-weight: 900; letter-spacing: .14em; }
.source-bank-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.source-bank-card {
  min-height: 210px;
  padding: 22px;
  border: 2px solid #d5e2e9;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: #fff;
  text-align: left;
  box-shadow: 0 8px 24px rgba(23, 50, 74, .055);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.source-bank-card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(23, 50, 74, .11); }
.source-bank-card.active { border-color: var(--blue); background: linear-gradient(145deg, #eff9fe, #fff); box-shadow: 0 12px 30px rgba(36, 126, 180, .14); }
.source-bank-card.ai.active { border-color: #7756b6; background: linear-gradient(145deg, #f5f1fc, #fff); box-shadow: 0 12px 30px rgba(83, 53, 137, .13); }
.source-bank-card.review.active { border-color: #c6761b; background: linear-gradient(145deg, #fff7e9, #fff); box-shadow: 0 12px 30px rgba(159, 91, 18, .13); }
.source-order { align-self: flex-start; padding: 5px 8px; border-radius: 999px; color: #176e49; background: #e4f5eb; font-size: .64rem; font-weight: 900; letter-spacing: .12em; }
.source-bank-card.ai .source-order { color: #634394; background: #eee8f8; }
.source-bank-card.review .source-order { color: #95560e; background: #ffedcf; }
.source-bank-title { margin-top: 13px; color: var(--navy); font-size: 1.14rem; font-weight: 850; }
.source-bank-copy { margin: 6px 0 18px; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.source-bank-metrics { margin-top: auto; display: grid; gap: 4px; }
.source-bank-metrics strong { color: var(--ink); font-size: .85rem; font-variant-numeric: tabular-nums; }
.source-bank-metrics span { color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.source-bank-track { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: #deebf0; }
.source-bank-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue-bright), var(--green)); transition: width .2s ease; }
.source-bank-card.ai .source-bank-track span { background: linear-gradient(90deg, #8f70c9, #bf82bd); }
.source-bank-card.review .source-bank-track span { background: linear-gradient(90deg, #e3a13e, #c76e2a); }
.lecture-section-heading { width: min(1200px, 100%); margin: 0 auto 16px; }
.lecture-section-heading > p:last-child { margin-top: 7px; }
.lecture-grid { width: min(1200px, 100%); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lecture-card {
  min-height: 190px;
  padding: 22px;
  border: 1px solid #d5e2e9;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: #fff;
  text-align: left;
  box-shadow: 0 8px 24px rgba(23, 50, 74, .06);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.lecture-card:hover { transform: translateY(-2px); border-color: #8dccE9; box-shadow: 0 12px 30px rgba(23, 50, 74, .11); }
.lecture-card.comprehensive { grid-column: 1 / -1; min-height: 168px; background: linear-gradient(135deg, #edf9fe, #fff); border-color: #9ed7ee; }
.card-code { color: var(--blue); font-size: .72rem; font-weight: 900; letter-spacing: .12em; }
.card-title { margin: 8px 0 20px; color: var(--navy); font-size: 1.08rem; font-weight: 800; line-height: 1.4; }
.card-stats { margin-top: auto; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: .77rem; }
.card-stats strong { color: var(--ink); }
.card-track { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: #e0edf2; }
.card-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue-bright), var(--green)); }

.nb2-empty {
  width: min(940px, 100%);
  margin: 28px auto 0;
  padding: clamp(34px, 6vw, 72px);
  border: 1px solid #cfe0e8;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(53, 169, 222, .16), transparent 30%),
    linear-gradient(145deg, #f3fbfe, #fff 58%);
  box-shadow: 0 18px 50px rgba(23, 50, 74, .09);
  text-align: center;
}
.nb2-empty-mark {
  width: 92px;
  height: 92px;
  margin: 0 auto 24px;
  border-radius: 25px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--navy), var(--blue));
  box-shadow: 0 14px 28px rgba(23, 50, 74, .2);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.nb2-empty h1 { margin: 10px 0 14px; color: var(--navy); font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -.045em; }
.nb2-empty-lead { max-width: 720px; margin: 0 auto; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.nb2-empty-metrics { margin: 28px auto 34px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.nb2-empty-metrics span { min-width: 135px; padding: 10px 14px; border: 1px solid #d7e5eb; border-radius: 999px; color: #607684; background: rgba(255, 255, 255, .85); font-size: .78rem; }
.nb2-empty-metrics strong { margin-right: 4px; color: var(--navy); }
.nb2-next-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; text-align: left; }
.nb2-next-steps article { min-height: 145px; padding: 18px; border: 1px solid #d8e5eb; border-radius: 14px; display: flex; gap: 13px; background: rgba(255, 255, 255, .82); }
.nb2-next-steps article > span { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--blue); font-size: .75rem; font-weight: 900; }
.nb2-next-steps strong { color: var(--navy); font-size: .84rem; }
.nb2-next-steps p { margin: 7px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }

.exam-app { height: calc(100vh - 152px); display: grid; grid-template-columns: 94px minmax(0, 1fr); }
.rail { overflow: hidden; border-right: 1px solid #d4e0e6; background: var(--rail); }
.filter-label { height: 31px; display: grid; place-items: end center; color: #536b7c; font-size: .67rem; font-weight: 850; letter-spacing: .08em; }
.rail select { width: 78px; margin: 4px 8px 8px; border: 1px solid #d0dce2; border-radius: 6px; color: #546b7b; background: #fff; font-size: .72rem; }
.question-nav { height: calc(100% - 63px); padding: 6px 12px 40px; overflow-y: auto; display: grid; align-content: start; justify-items: center; gap: 9px; scrollbar-width: thin; }
.nav-dot { width: 49px; height: 49px; position: relative; border: 0; border-radius: 50%; color: #647a8a; background: transparent; font-size: .86rem; font-weight: 750; }
.nav-dot:hover { background: #e5f0f5; }
.nav-dot.current { color: #fff; background: var(--blue); box-shadow: 0 0 0 5px #d8edf8; }
.nav-dot.answered:not(.current) { color: #fff; background: #317eaa; }
.nav-dot.incorrect:not(.current) { background: var(--red); }
.nav-dot.flagged::after { content: "!"; width: 17px; height: 17px; position: absolute; right: -1px; bottom: 0; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--amber); font-size: .62rem; }

.exam-surface { min-width: 0; overflow-y: auto; scroll-behavior: smooth; }
.question-toolbar { padding: 26px clamp(28px, 6vw, 92px) 20px; display: flex; align-items: start; gap: 16px; }
.objective-code { display: block; margin-bottom: 5px; color: var(--blue); font-size: .72rem; font-weight: 900; letter-spacing: .1em; }
.lecture-code { display: block; margin-bottom: 7px; color: #667c8b; font-size: .75rem; font-weight: 800; letter-spacing: .06em; }
.question-number { color: #607586; font-size: .98rem; font-weight: 750; }
.flag-button { margin-left: auto; padding: 11px 15px; border: 1px solid #d3dfe6; border-radius: 999px; color: #5f7484; background: #fff; font-weight: 700; }
.flag-button[aria-pressed="true"] { border-color: #e4ae55; color: #8c5a0f; background: #fff8e9; }
.font-tools { display: flex; overflow: hidden; border: 1px solid #d3dfe6; border-radius: 999px; background: #fff; }
.font-tools button { width: 43px; height: 42px; border: 0; color: #5c7282; background: transparent; font-weight: 800; }
.font-tools button + button { border-left: 1px solid #d3dfe6; }
.font-tools button:hover { background: #eef8fc; }
.question-card { max-width: 1280px; padding: 0 clamp(28px, 6vw, 92px) 70px; }
.question-stem { max-width: 1050px; margin: 0 0 24px; color: #24394b; font-size: calc(var(--base-text-size) * 1.08); line-height: 1.72; }
.question-figure { width: min(590px, 100%); margin: 0 0 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #f8fbfc; }
.question-figure img { display: block; width: 100%; max-height: 470px; object-fit: contain; background: #fff; }
.question-figure figcaption, .slide-figure figcaption { padding: 8px 12px; color: var(--muted); font-size: .74rem; }
.answer-instruction { margin: 0 0 11px; color: #6c7e8c; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.answer-list { display: grid; gap: 12px; }
.answer-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 10px; }
.answer-choice {
  width: 100%;
  min-height: 61px;
  padding: 10px 18px;
  border: 2px solid #b7c0c5;
  border-radius: 999px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: #1f2f3b;
  background: #f7f8f9;
  text-align: left;
  transition: background .13s ease, border-color .13s ease, transform .13s ease;
}
.answer-row.selected-pending .answer-choice { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 3px rgba(36, 126, 180, .1); }
.answer-choice:hover:not(:disabled) { transform: translateY(-1px); border-color: #5eaed4; background: #f0f9fd; }
.answer-choice:disabled { cursor: default; opacity: 1; }
.answer-letter { font-weight: 900; text-align: center; }
.answer-text { font-size: var(--base-text-size); line-height: 1.45; }
.answer-choice.correct { border-color: var(--green); background: var(--green-soft); }
.answer-choice.wrong-selected { border-color: var(--red); background: var(--red-soft); }
.answer-choice.unselected-after-answer { color: #687b88; border-color: #d6dfe4; background: #fafbfb; }
.strikeout-button { width: 43px; height: 43px; border: 1px solid #bccbd3; border-radius: 50%; color: #5f7483; background: #fff; font-weight: 900; }
.strikeout-button:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); background: #eef8fc; }
.strikeout-button:disabled { opacity: .35; cursor: default; }
.answer-row.struck .answer-text { text-decoration: line-through 2px; opacity: .48; }
.answer-row.struck .answer-letter { opacity: .48; }

mark { padding: .06em .04em; color: inherit; border-radius: 2px; }
mark.highlight-yellow { background: #ffe56d; }
mark.highlight-green { background: #a9edbd; }
mark.highlight-blue { background: #a8def6; }
mark.highlight-pink { background: #f8b7d0; }

.teaching-panel { margin-top: 26px; padding: 22px; border: 1px solid #cddfe8; border-top: 5px solid var(--blue); border-radius: 11px; background: #f8fcfe; }
.teaching-panel.correct-panel { border-top-color: var(--green); background: #f9fdfb; }
.teaching-panel.incorrect-panel { border-top-color: var(--red); background: #fffafa; }
.result-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.result-badge { padding: 6px 9px; border-radius: 999px; color: #fff; background: var(--blue); font-size: .72rem; font-weight: 900; letter-spacing: .08em; }
.correct-panel .result-badge { background: var(--green); }
.incorrect-panel .result-badge { background: var(--red); }
.teaching-panel h2 { margin: 20px 0 8px; color: var(--navy); font-size: 1.05rem; }
.explanation-copy { margin: 0; white-space: pre-line; line-height: 1.7; }
.objectives-panel { margin-top: 20px; padding: 16px; border: 1px solid #cfe2ec; border-radius: 9px; background: #edf8fd; }
.objectives-panel > span { color: var(--blue); font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
.objectives-panel ul { margin: 11px 0 0; padding: 0; display: grid; gap: 10px; list-style: none; }
.objectives-panel li { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: 11px; line-height: 1.5; }
.objectives-panel li strong { color: var(--navy); font-size: .82rem; }
.objectives-panel li span { color: #435d6e; }
.objective-pending { margin: 11px 0 0; color: #435d6e; line-height: 1.55; }
.memory-hook { margin-top: 20px; padding: 14px 16px; border-left: 4px solid #d69b37; border-radius: 0 8px 8px 0; background: #fff8e9; }
.memory-hook span, .slide-heading span { color: #8b651f; font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
.memory-hook p { margin: 5px 0 0; font-weight: 700; line-height: 1.5; }
.slide-heading { margin-top: 25px; padding-top: 22px; border-top: 1px solid #d4e3ea; display: flex; justify-content: space-between; align-items: end; gap: 18px; }
.slide-heading span { color: var(--blue); }
.slide-heading h2 { margin: 5px 0 3px; }
.slide-heading p { margin: 0; color: var(--muted); font-size: .8rem; }
.slide-heading a { color: var(--blue); font-size: .79rem; font-weight: 800; }
.slide-figure { margin: 14px 0 0; overflow: hidden; border: 1px solid #c7d8e1; border-radius: 9px; background: #fff; box-shadow: 0 6px 20px rgba(23, 50, 74, .08); }
.slide-figure img { display: block; width: 100%; max-height: 820px; object-fit: contain; }
.source-note { margin: 14px 0 0; color: var(--muted); font-size: .73rem; line-height: 1.5; }

.footerbar { height: 80px; padding: 0 28px; display: grid; grid-template-columns: 240px minmax(160px, 1fr) auto; align-items: center; gap: 22px; background: var(--footer); position: relative; z-index: 12; }
.progress-copy strong, .progress-copy span { display: block; }
.progress-copy strong { color: #3e5a6d; font-size: .77rem; }
.progress-copy span { margin-top: 4px; color: #6b8392; font-size: .73rem; }
.progress-track { height: 8px; overflow: hidden; border-radius: 999px; background: #c7e3ef; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--green)); transition: width .2s ease; }
.footer-actions { display: flex; gap: 10px; }
.secondary-button, .primary-button { min-width: 130px; padding: 12px 20px; border-radius: 999px; font-weight: 800; }
.secondary-button { border: 2px solid var(--blue); color: var(--blue); background: #fff; }
.primary-button { border: 2px solid var(--blue); color: #fff; background: var(--blue); }
.secondary-button:disabled, .primary-button:disabled { opacity: .45; cursor: default; }
.toast { position: fixed; left: 50%; bottom: 95px; z-index: 30; transform: translateX(-50%); padding: 11px 15px; border-radius: 8px; color: #fff; background: #263e50; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-size: .82rem; }

.popover { width: min(360px, calc(100vw - 24px)); position: fixed; top: 80px; right: 12px; z-index: 40; padding: 18px; border: 1px solid #cfdce3; border-radius: 11px; background: #fff; box-shadow: 0 16px 40px rgba(16, 38, 56, .22); }
.popover h2 { margin: 0 0 15px; color: var(--navy); font-size: 1.05rem; }
.review-heading { margin: 18px 0 9px; color: var(--navy); font-size: .92rem; }
.review-list { max-height: min(42vh, 380px); overflow: auto; display: grid; gap: 7px; padding-right: 3px; }
.review-item { width: 100%; min-height: 44px; padding: 8px 10px; display: grid; grid-template-columns: 28px 1fr; gap: 1px 8px; align-items: center; border: 1px solid #d5e0e6; border-radius: 8px; background: #fff; color: var(--navy); text-align: left; cursor: pointer; }
.review-item:hover, .review-item:focus-visible { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(31, 112, 169, .14); outline: none; }
.review-item strong { grid-row: 1 / 3; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #edf3f6; }
.review-item span { font-size: .82rem; font-weight: 700; }
.review-item small { color: #607382; font-size: .7rem; }
.review-item.correct strong { background: #dff3e5; color: #176637; }
.review-item.incorrect strong { background: #fde4e1; color: #a32b20; }
.review-item.unanswered strong { background: #edf0f2; color: #67747d; }
.stat-row { padding: 9px 0; border-bottom: 1px solid #e7eef2; display: flex; justify-content: space-between; gap: 20px; }
.stat-row span { color: var(--muted); }
.stat-row strong { color: var(--navy); }
.restore-button, .danger-button { width: 100%; margin-top: 10px; padding: 11px; border-radius: 7px; font-weight: 800; }
.restore-button { border: 1px solid var(--blue); color: var(--blue); background: #fff; }
.danger-button { border: 1px solid #cf7772; color: #9f3935; background: #fff3f2; }
.toolkit { max-height: calc(100vh - 172px); overflow-y: auto; display: grid; gap: 10px; }
.toolkit textarea, .toolkit input { width: 100%; border: 1px solid #c9d6dd; border-radius: 6px; padding: 10px; color: var(--ink); background: #fbfcfd; }
.toolkit label, .tool-label { margin-top: 3px; font-size: .8rem; font-weight: 750; }
.tool-section { padding-bottom: 11px; border-bottom: 1px solid #e5edf1; }
.highlight-swatches { margin-top: 9px; display: flex; align-items: center; gap: 8px; }
.highlight-swatch { width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #c8d5dc; }
.highlight-swatch.yellow { background: #ffe56d; }
.highlight-swatch.green { background: #a9edbd; }
.highlight-swatch.blue { background: #a8def6; }
.highlight-swatch.pink { background: #f8b7d0; }
.clear-highlights { margin-left: auto; padding: 6px 9px; border: 1px solid #cedbe2; border-radius: 5px; color: #617584; background: #fff; font-size: .76rem; font-weight: 700; }
.tool-help { margin: 8px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.calculator-row { display: grid; grid-template-columns: 1fr 44px; gap: 7px; }
.calculator-row button { border: 0; border-radius: 6px; color: #fff; background: var(--blue); font-weight: 800; }
#calculatorOutput { min-height: 22px; color: var(--blue); font-weight: 800; }
.nav-empty { margin: 20px 0; color: var(--muted); font-size: .7rem; text-align: center; }

@media (max-width: 900px) {
  .topbar { grid-template-columns: minmax(190px, 1fr) minmax(265px, 300px) auto; }
  .exam-context { display: none; }
  .top-action { padding-inline: 10px; font-size: .64rem; }
  .lecture-grid { grid-template-columns: 1fr; }
  .source-bank-grid { grid-template-columns: 1fr; }
  .module-tab-status { display: none; }
  .nb2-next-steps { grid-template-columns: 1fr; }
  .nb2-next-steps article { min-height: 0; }
  .lecture-card.comprehensive { grid-column: auto; }
  .exam-app { grid-template-columns: 72px minmax(0, 1fr); }
  .nav-dot { width: 44px; height: 44px; }
  .footerbar { grid-template-columns: 1fr auto; padding: 0 14px; gap: 12px; }
  .progress-track { display: none; }
  .secondary-button, .primary-button { min-width: 96px; padding-inline: 14px; }
}

@media (max-width: 620px) {
  .topbar { height: 64px; grid-template-columns: minmax(0, 1fr) auto; }
  .brand { padding-inline: 10px; }
  .brand-mark { width: 38px; height: 38px; }
  .exam-context { display: none; }
  .overall-progress { display: none; }
  .top-actions { display: flex; height: 64px; }
  .top-action { padding-inline: 8px; font-size: .58rem; letter-spacing: .045em; }
  .lecture-home { height: calc(100vh - 64px); padding: 38px 16px 60px; }
  .module-tabs { margin-bottom: 30px; padding: 6px; grid-template-columns: 1fr; }
  .module-tab { min-height: 70px; padding: 10px 11px; }
  .module-tab-number { min-width: 50px; height: 42px; }
  .module-tab-copy small { white-space: normal; }
  .nb2-empty { padding: 34px 18px; border-radius: 18px; }
  .nb2-empty-mark { width: 76px; height: 76px; border-radius: 21px; }
  .nb2-empty-metrics { display: grid; grid-template-columns: 1fr; }
  .source-banks-heading { align-items: start; flex-direction: column; gap: 8px; }
  .source-bank-card { min-height: 195px; padding: 18px; }
  .exam-app { height: calc(100vh - 136px); grid-template-columns: 1fr; }
  .rail { display: none; }
  .question-toolbar, .question-card { padding-left: 18px; padding-right: 18px; }
  .question-stem { font-size: 1rem; }
  .answer-choice { border-radius: 16px; }
  .answer-row { grid-template-columns: minmax(0, 1fr) 40px; gap: 7px; }
  .strikeout-button { width: 38px; height: 38px; }
  .font-tools { display: none; }
  .slide-heading { align-items: start; flex-direction: column; }
  .footerbar { height: 72px; }
  .progress-copy span { display: none; }
  .secondary-button, .primary-button { min-width: 82px; padding: 10px 12px; }
}