/* ==========================================================================
   PrepareItUp Competitive Exams
   Shared by GRE, SAT, and every future competitive-exam course.
   ========================================================================== */

/* ==========================================================================
   Base GRE and SAT rules, moved here from style.css.

   These come FIRST, before this file's own overrides, because that is the
   order the browser saw when they lived in style.css. `.gre-crumb:last-child`
   and `.exam-course-screen .gre-crumb` have equal specificity (0,2,0), so the
   winner is whichever is declared later — appending these at the end of the
   file silently flipped the breadcrumb colour.
   ========================================================================== */

/* Grouped starred modal (course starred list) */
.gre-litem-group { margin-bottom: 14px; }
.gre-litem-group-title {
  font-size: 0.78rem; font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 8px 4px 6px;
}

/* ─── SAT course screen ─────────────────────────────────────────── */
.sat-content-wrap { padding: 24px 16px 60px; }
.sat-content { max-width: 900px; margin: 0 auto; }
.sat-overview h1.gre-doc-title { margin-bottom: 12px; }
.sat-overview .sat-h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem; margin: 22px 0 8px; color: var(--text);
}
.sat-overview p, .sat-overview ul { line-height: 1.55; color: var(--text); margin-bottom: 10px; }
.sat-overview ul { padding-left: 22px; }
.sat-overview li { margin-bottom: 4px; }
.sat-table {
  width: 100%; border-collapse: collapse; margin: 8px 0 16px;
  font-size: 0.92rem; background: var(--surface); border-radius: 8px; overflow: hidden;
}
.sat-table th, .sat-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  text-align: left; color: var(--text);
}
.sat-table th { background: var(--surface2); font-weight: 700; font-size: 0.85rem; }
.sat-table tr:last-child td { border-bottom: none; }

/* ─── SAT inline data tables + graphs ─────────────────────────── */
.sat-inline-table {
  margin: 12px auto; border-collapse: collapse;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.92rem;
  min-width: 260px;
}
.sat-inline-table th, .sat-inline-table td {
  padding: 8px 14px; border: 1px solid var(--border);
  text-align: left; color: var(--text);
}
.sat-inline-table th {
  background: var(--surface2); font-weight: 700; font-size: 0.85rem;
}
.sat-inline-table td:nth-child(2), .sat-inline-table th:nth-child(2) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sat-graph {
  margin: 14px 0; padding: 14px 16px 10px;
  background: var(--surface); border: 1px solid var(--border-light);
  border-radius: 10px;
}
.sat-graph-title {
  font-size: 0.85rem; font-weight: 700; color: var(--accent);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
}
.sat-graph .sat-inline-table { margin-top: 4px; }
.sat-svg-chart {
  display: block; width: 100%; height: auto; max-width: 520px; margin: 0 auto;
}
.sat-graph-data {
  margin-top: 10px; font-size: 0.85rem; color: var(--text-muted);
}
.sat-graph-data summary { cursor: pointer; padding: 4px 0; user-select: none; }
.sat-graph-data summary:hover { color: var(--accent); }
.sat-graph-data .sat-inline-table { margin: 6px 0 0; }
.sat-graph-missing {
  color: var(--text-muted); font-style: italic; padding: 10px 14px;
  background: var(--surface2); border-radius: 8px;
}
/* ─── SAT results: score tiles ─────────────────────────────────────
   Themed off the shared accent vars (not fixed hex) so the numbers stay
   legible on the dark surface, matching GRE. */
.sat-score-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: 20px;
}
.sat-score-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px; text-align: center;
}
.sat-score-tile.total {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border-color: transparent; color: #fff;
}
.sat-score-label {
  font-size: 0.85rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
}
.sat-score-value {
  font-size: 2rem; font-weight: 800; margin-top: 8px; color: var(--accent);
}
.sat-score-outof { font-size: 0.8rem; color: var(--text-muted); }
.sat-score-tile.total .sat-score-label,
.sat-score-tile.total .sat-score-outof { color: #fff; opacity: 0.9; }
.sat-score-tile.total .sat-score-value { color: #fff; }
.sat-results-h2 { margin-top: 26px; font-family: 'Playfair Display', serif; }
@media (max-width: 620px) {
  .sat-score-tiles { grid-template-columns: 1fr; }}

/* SAT exam-mode timer + navigator (Bluebook-style) */
.sat-exam-timer-hide {
  background: none; border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px;
  font-size: 0.8rem; cursor: pointer; color: var(--text-muted);
  font-family: inherit;
}
.sat-exam-mark-btn {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 12px; cursor: pointer;
  color: var(--text); font-family: inherit; font-size: 0.85rem; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
}
.sat-exam-mark-btn.marked { background: var(--warn-pale); border-color: var(--warn); color: var(--warn); }
.sat-exam-nav-btn.marked::after {
  content: '★'; position: absolute; top: -6px; right: -4px; font-size: 0.7rem;
}
.sat-exam-nav-toggle {
  background: var(--surface); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  font-family: inherit; font-size: 0.85rem; color: var(--text);
}
/* The run view sits inside the course content pane (.gre-exam-run centres it),
   so these strips are rounded panels rather than full-bleed browser chrome. */
.sat-exam-substrip {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 16px; font-size: 0.9rem; color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border); border-top: none;
}
.sat-exam-substrip strong { color: var(--text); }
.sat-exam-footbar {
  position: sticky; bottom: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border); border-radius: 0 0 10px 10px;
}

/* Reference sheet toggle for math sections */
.sat-refsheet-toggle {
  background: var(--surface); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  font-family: inherit; font-size: 0.85rem; color: var(--text);
}
.sat-refsheet-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.sat-refsheet-modal .sat-refsheet-inner {
  background: var(--surface); border-radius: 12px;
  max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto;
  padding: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.sat-refsheet-inner h3 { margin-top: 0; font-family: 'Playfair Display', serif; }
.sat-refsheet-close {
  float: right; background: none; border: none; font-size: 1.5rem;
  cursor: pointer; color: var(--text-muted); font-family: inherit;
}

/* ════════════════════════════════════════════════════════════════════════
   GRE Course
   ════════════════════════════════════════════════════════════════════════ */

/* ── Topbar ──────────────────────────────────────────────────────────── */
.gre-topbar-left { display: flex; align-items: center; gap: 12px; }
/* backdrop no longer used in push mode */
.gre-backdrop { display: none !important; }
.gre-sb-item,
.gre-sb-grouphead {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  /* indent grows with depth (top level = depth 1) */
  padding: 9px 14px 9px calc(14px + (var(--depth, 1) - 1) * 15px);
}
.gre-sb-label { flex: 1; }
.gre-sb-grouphead {
  font-weight: 700;
  font-size: 0.84rem;
}
.gre-sb-group[style*="--depth:0"] > .gre-sb-grouphead,
.gre-sb-group:not([style*="--depth"]) > .gre-sb-grouphead {
  text-transform: none;
}
.gre-sb-grouphead:hover { background: var(--accent-pale); }
.gre-sb-caret {
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.gre-sb-group.open > .gre-sb-grouphead .gre-sb-caret { transform: rotate(90deg); }
.gre-sb-groupbody { display: none; }
.gre-sb-group.open > .gre-sb-groupbody { display: block; }

.gre-sb-item {
  font-size: 0.82rem;
  font-weight: 500;
}
.gre-sb-item:hover { background: var(--accent-pale); }
.gre-sb-item.active {
  background: var(--accent-pale);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.gre-sb-count {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface2);
  border-radius: 99px;
  padding: 1px 8px;
}
.gre-sb-item.active .gre-sb-count { color: var(--accent); }

/* ── Breadcrumbs ─────────────────────────────────────────────────────── */
.gre-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 14px;
}
.gre-crumb {
  background: none;
  border: none;
  padding: 2px 4px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: color var(--transition), background var(--transition);
}
.gre-crumb:hover { color: var(--accent); background: var(--accent-pale); }
.gre-crumb:last-child { color: var(--text); cursor: default; }
.gre-crumb-sep { color: var(--text-muted); font-size: 0.75rem; }

/* ── Card grid (landing + branch pages) ──────────────────────────────── */
.gre-cards-wrap { max-width: 920px; margin-left: auto; margin-right: auto; }
.gre-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.gre-card {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 18px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}

/* "Continue where you left off" banner on the GRE landing page */
.gre-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.gre-card-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-pale);
  color: var(--accent);
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
}
.gre-litem-icon .pw-category-icon-svg {
  width: 23px;
  height: 23px;
}
.gre-litem-group-title {
  display: flex;
  align-items: center;
  gap: 9px;
}
.gre-card-body { flex: 1; min-width: 0; }
.gre-card-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.gre-card-meta { font-size: 0.78rem; color: var(--text-muted); }
.gre-card-score {
  margin-top: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--accent);
}
.gre-card.locked:hover {
  border-color: var(--border);
  transform: none;
  box-shadow: none;
}
.sat-exam-locked-note { color: var(--error); }

/* ── Saved mock-test results ─────────────────────────────────────────────── */
.gre-saved-h { margin-top: 32px; }
.gre-saved-list { display: flex; flex-direction: column; gap: 10px; }
.gre-saved-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.gre-saved-body { flex: 1 1 60%; min-width: 180px; }
.gre-saved-title { font-size: 0.95rem; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.gre-saved-meta { font-size: 0.78rem; color: var(--text-muted); }
.gre-saved-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gre-saved-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.gre-saved-head .gre-saved-h { margin-top: 0; }
.gre-saved-del {
  flex-shrink: 0;
}

/* ── List toolbars (Practice Again / Continue) + soft danger button ─────── */
.gre-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.gre-btn-danger-soft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: inherit;
  color: #B23B2E;
  background: rgba(178, 59, 46, 0.07);
  border: 1px solid rgba(178, 59, 46, 0.28);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.gre-btn-danger-soft:hover {
  background: rgba(178, 59, 46, 0.13);
  border-color: rgba(178, 59, 46, 0.5);
  color: #8F2C21;
}
.gre-card-arrow {
  flex-shrink: 0;
  font-size: 1.3rem;
  color: var(--text-muted);
  transition: transform var(--transition), color var(--transition);
}
.gre-card:hover .gre-card-arrow { color: var(--accent); transform: translateX(3px); }

/* ── "Continue" / "Practice Again" boxes (below the 6-topic grid) ─────── */
.gre-pboxes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.gre-pboxes.pbox-2 { grid-template-columns: repeat(2, 1fr); }
.gre-pbox {
  display: flex; align-items: center; gap: 14px; width: 100%;
  text-align: left; padding: 18px 20px; font-family: inherit; cursor: pointer;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--surface);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.gre-pbox:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.gre-pbox-icon {
  flex-shrink: 0; width: 46px; height: 46px; display: flex; align-items: center;
  justify-content: center; border-radius: 12px; background: var(--surface);
  font-size: 1.4rem; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
}
.gre-pbox-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gre-pbox-title { font-weight: 700; color: var(--text); font-size: 1rem; }
.gre-pbox-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 2px; }

/* Quit button shown in the topbar during an in-progress mock exam */
.gre-exam-quit-btn { color: #c0392b; }
.gre-exam-quit-btn:hover { color: #a93226; border-color: #c0392b; }
.gre-modal.pw-list-modal { max-width: 680px; }
.pw-list-modal .gre-modal-body { max-height: 70vh; overflow-y: auto; }
/* Stack the action buttons onto their own full-width row so the title text
   never gets squeezed into an unreadable sliver beside them. */
.pw-list-modal .gre-litem { flex-wrap: wrap; }
.pw-list-modal .gre-litem-body { flex: 1 1 60%; min-width: 160px; }
.pw-list-modal .gre-litem-title { white-space: normal; word-break: break-word; }
.pw-list-modal .gre-litem-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; }

/* ── Continue / Practice Again list views ────────────────────────────── */
.gre-list-h {
  font-size: 1.05rem; font-weight: 700; color: var(--text);
  margin: 26px 0 12px;
}
.gre-litems { display: flex; flex-direction: column; gap: 12px; }
.gre-litem {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.gre-litem-icon {
  flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center;
  justify-content: center; border-radius: 10px; background: var(--accent-pale);
  font-size: 1.3rem;
}
.gre-litem-body { flex: 1; min-width: 0; }
.gre-litem-title { font-weight: 700; color: var(--text); font-size: 0.98rem; }
.gre-litem-trail {
  font-size: 0.82rem; color: var(--text-muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gre-litem-meta { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
.gre-litem-bar {
  height: 6px; border-radius: 999px; background: var(--border);
  margin-top: 8px; overflow: hidden;
}
.gre-litem-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.gre-litem-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gre-litem-actions button:disabled { opacity: 0.45; cursor: not-allowed; }
.gre-awscore {
  font-weight: 800; font-size: 1.25rem; color: var(--accent);
  display: inline-flex; align-items: baseline; gap: 1px;
}
.gre-awscore small { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; }
.gre-alltogether {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 4px 0 4px; padding: 12px 20px; font-family: inherit; font-weight: 700;
  cursor: pointer; border-radius: var(--radius-lg);
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  transition: filter var(--transition), transform var(--transition);
}
.gre-alltogether:hover { filter: brightness(1.05); transform: translateY(-1px); }

/* ── Practice modal ──────────────────────────────────────────────────── */
.gre-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.gre-modal {
  width: 100%; max-width: 420px; background: var(--surface);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg, 0 20px 50px rgba(0,0,0,0.25));
  overflow: hidden;
}
.gre-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.gre-modal-head h3 { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text); }
.gre-modal-x {
  border: none; background: none; font-size: 1.1rem; cursor: pointer;
  color: var(--text-muted); padding: 4px;
}
.gre-modal-body { padding: 18px 20px 22px; }
.gre-modal-sub { font-size: 0.88rem; color: var(--text-muted); margin: 0 0 16px; }
.gre-modal-group { margin-bottom: 18px; }
.gre-modal-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 8px;
}
.gre-modal-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.gre-chip {
  padding: 8px 16px; border-radius: 999px; cursor: pointer; font-family: inherit;
  font-weight: 600; font-size: 0.88rem; color: var(--text);
  border: 1px solid var(--border); background: var(--surface);
  transition: all var(--transition);
}
.gre-chip--on { border-color: var(--accent); background: var(--accent-pale); color: var(--accent); }
.gre-modal-start { width: 100%; margin-top: 4px; }

@media (max-width: 640px) {
  .gre-pboxes { grid-template-columns: 1fr; }
  .gre-litem { flex-wrap: wrap; }
  .gre-litem-actions { width: 100%; }}

/* ── Document / Syllabus ─────────────────────────────────────────────── */
.gre-doc { max-width: 760px; margin-left: auto; margin-right: auto; }
.gre-doc-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.25;
}
.gre-doc-intro {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0 0 24px;
  line-height: 1.6;
}
.gre-doc-h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
  margin: 28px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-light);
}
.gre-doc-h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--accent);
  margin: 20px 0 8px;
}
.gre-doc-p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 12px;
}

/* ── Analytical Writing (essay) ──────────────────────────────────────── */
.gre-essay { max-width: 880px; margin-inline: auto; }
.gre-essay-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.gre-essay-controls { display: flex; align-items: center; gap: 12px; }
.gre-essay-topicno {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}
.gre-btn-soft {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.gre-btn-soft:hover:not(:disabled) {
  background: var(--accent-pale);
  border-color: var(--accent);
  color: var(--accent);
}
.gre-btn-soft:disabled { opacity: 0.45; cursor: not-allowed; }

.gre-essay-prompt {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}
.gre-essay-statement {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  font-weight: 500;
}
.gre-essay-directions {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 12px;
  font-style: italic;
}
.gre-essay-box {
  width: 100%;
  min-height: 420px;
  resize: vertical;
  padding: 18px 20px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.gre-essay-box:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale);
}
.gre-essay-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 0 2px;
}
.gre-word-count { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.gre-essay-saved { font-size: 0.78rem; color: var(--success); font-weight: 600; }
.gre-essay-foot-right { display: flex; align-items: center; gap: 12px; }

/* ── Analytical Writing: rubric grader ─────────────────────────────────── */
.gre-essay-result { margin-top: 18px; }
.gre-rubric {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}
.gre-rubric-head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.gre-rubric-score {
  flex: 0 0 auto;
  width: 72px; height: 72px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; font-weight: 800; line-height: 1;
  color: #fff;
  background: var(--accent);
}
.gre-rubric-score span { font-size: 0.9rem; font-weight: 600; opacity: 0.85; margin-left: 1px; align-self: flex-end; margin-bottom: 6px; }
.gre-rubric[data-band="6"] .gre-rubric-score,
.gre-rubric[data-band="5"] .gre-rubric-score { background: #059669; }
.gre-rubric[data-band="4"] .gre-rubric-score { background: #2563EB; }
.gre-rubric[data-band="3"] .gre-rubric-score { background: #D97706; }
.gre-rubric[data-band="2"] .gre-rubric-score,
.gre-rubric[data-band="1"] .gre-rubric-score,
.gre-rubric[data-band="0"] .gre-rubric-score { background: #DC2626; }
.gre-rubric-label { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.gre-rubric-summary { font-size: 0.88rem; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
.gre-rubric-breakdown { display: flex; flex-direction: column; gap: 10px; }
.gre-rubric-row {
  display: grid;
  grid-template-columns: 160px 1fr 38px;
  grid-template-areas: "name bar num" "note note note";
  align-items: center;
  gap: 4px 12px;
}
.gre-rubric-name { grid-area: name; font-size: 0.85rem; font-weight: 600; color: var(--text); }
.gre-rubric-bar { grid-area: bar; height: 8px; background: var(--surface2); border-radius: 999px; overflow: hidden; }
.gre-rubric-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.gre-rubric-num { grid-area: num; font-size: 0.82rem; font-weight: 700; color: var(--text); text-align: right; }
.gre-rubric-note { grid-area: note; font-size: 0.74rem; color: var(--text-muted); }
.gre-rubric-fbtitle { font-size: 0.95rem; font-weight: 700; margin: 18px 0 8px; color: var(--text); }
.gre-rubric-fb { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; }
.gre-rubric-fb li { font-size: 0.86rem; line-height: 1.5; color: var(--text); }
.gre-rubric-disclaimer { font-size: 0.72rem; color: var(--text-muted); margin: 16px 0 0; line-height: 1.45; font-style: italic; }
@media (max-width: 560px) {
  .gre-rubric-row { grid-template-columns: 120px 1fr 36px; }}

/* ── Question deck: header + nav ─────────────────────────────────────── */
.gre-cat-head { margin-bottom: 20px; }
.gre-deck-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
.gre-counter {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ── Two-pane (RC / DI) vs single ────────────────────────────────────── */
.gre-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  max-width: 1120px;
  margin-inline: auto;
}
.gre-left {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding-right: 4px;
}
.gre-single { max-width: 720px; margin-inline: auto; }
.course-content:has(> .gre-split) > .gre-cat-head { max-width: 1120px; margin-inline: auto; }

.gre-passage-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 8px;
}
.gre-passage {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.gre-passage p {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 12px;
}
.gre-passage p:last-child { margin-bottom: 0; }
.gre-di-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 12px;
}
.gre-graph {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 10px;
  text-align: center;
}
.gre-graph img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* ── Tables ──────────────────────────────────────────────────────────── */
.gre-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 4px 0;
}
.gre-table th, .gre-table td {
  border: 1px solid var(--border);
  padding: 7px 10px;
  text-align: left;
}
.gre-table th { background: var(--surface2); font-weight: 700; }
.gre-table tr:nth-child(even) td { background: var(--surface); }
.gre-doc-table { margin: 14px 0 20px; overflow-x: auto; }
.gre-doc-table .gre-table { font-size: 0.9rem; }

/* ── Question card ───────────────────────────────────────────────────── */
.gre-q {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.gre-stem {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 16px;
}
.gre-multi-note {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 12px;
}
.gre-blank {
  display: inline-block;
  min-width: 64px;
  border-bottom: 2px solid var(--accent);
  text-align: center;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.2;
  margin: 0 2px;
  vertical-align: baseline;
}

/* ── Choices ─────────────────────────────────────────────────────────── */
.gre-choices { display: flex; flex-direction: column; gap: 10px; }
.gre-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.gre-choice:hover:not(.disabled) {
  background: var(--accent-pale);
  border-color: var(--accent);
}
.gre-choice-mark {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface);
}
.gre-choice-mark.sq { border-radius: 5px; }
.gre-choice-text { flex: 1; padding-top: 2px; }

.gre-choice.selected {
  background: var(--accent-pale);
  border-color: var(--accent);
}
.gre-choice.selected .gre-choice-mark {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.gre-choice.correct {
  background: var(--success-pale);
  border-color: var(--success);
}
.gre-choice.correct .gre-choice-mark {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.gre-choice.incorrect {
  background: var(--error-pale);
  border-color: var(--error);
}
.gre-choice.incorrect .gre-choice-mark {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
}
.gre-choice.disabled { cursor: default; }
.gre-choice.disabled:hover { background: var(--bg); border-color: var(--border); }
.gre-choice.disabled.selected:hover { background: var(--accent-pale); border-color: var(--accent); }
.gre-choice.disabled.correct:hover { background: var(--success-pale); border-color: var(--success); }
.gre-choice.disabled.incorrect:hover { background: var(--error-pale); border-color: var(--error); }

/* ── Multi-blank columns (Text Completion) ───────────────────────────── */
.gre-blank-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 18px;
}
.gre-blank-col { display: flex; flex-direction: column; gap: 8px; }
.gre-blank-col-h {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin-bottom: 2px;
}

/* ── Quantitative Comparison ─────────────────────────────────────────── */
.gre-qc-quants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.gre-qc-cell {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: center;
}
.gre-qc-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.gre-qc-val { font-size: 1.05rem; font-weight: 600; color: var(--text); }

/* ── Numeric entry ───────────────────────────────────────────────────── */
.gre-numeric { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.gre-num-input {
  flex: 1;
  min-width: 200px;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.gre-num-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-pale);
}

/* ── Check button ────────────────────────────────────────────────────── */
.gre-check {
  margin-top: 16px;
  padding: 10px 22px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: background var(--transition);
}
.gre-check:hover:not(:disabled) { background: var(--accent-light); }
.gre-check:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Feedback ────────────────────────────────────────────────────────── */
.gre-feedback {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border-left: 3px solid;
}
.gre-feedback.ok { background: var(--success-pale); border-left-color: var(--success); }
.gre-feedback.bad { background: var(--error-pale); border-left-color: var(--error); }
.gre-feedback-tag {
  font-size: 0.86rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.gre-feedback.ok .gre-feedback-tag { color: var(--success); }
.gre-feedback.bad .gre-feedback-tag { color: var(--error); }
.gre-reasoning {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text);
  margin-top: 6px;
}
.gre-reasoning + .gre-reasoning { margin-top: 10px; }

/* Critical Reasoning: question prompt drops to its own line under the passage */
.gre-cr-passage { display: block; margin-bottom: 14px; }
.gre-cr-question { display: block; font-weight: 600; }

/* ── Read-aloud (TTS) button ─────────────────────────────────────────── */
.gre-tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.gre-readaloud {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.gre-readaloud:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Mark-for-review button ──────────────────────────────────────────── */
.gre-btn-mark {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.gre-btn-mark:hover { border-color: var(--accent); }
.gre-btn-mark.marked {
  background: #FEF3C7;
  border-color: #F59E0B;
  color: #92400E;
}

/* ── Review modal + grid ─────────────────────────────────────────────── */
.gre-rev-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  z-index: 80;
  padding: 20px;
}
.gre-rev-modal.open { display: flex; }
.gre-rev-panel {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  width: min(640px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px 24px;
}
.gre-rev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.gre-rev-title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.gre-rev-close {
  border: none;
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
  border-radius: 6px;
}
.gre-rev-close:hover { background: var(--bg); color: var(--text); }
.gre-rev-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.gre-rev-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gre-rev-key {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.gre-rev-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 8px;
}
.gre-rev-box {
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 0.82rem;
  font-weight: 700;
  color: #1f2937;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition);
}
.gre-rev-box:hover { transform: scale(1.08); }
.gre-rev-box.current { outline: 2px solid var(--accent); outline-offset: 1px; }

/* status colors (used by both legend keys and grid boxes) */
.gre-rev-box.unseen,   .gre-rev-key.unseen   { background: #D1D5DB; }
.gre-rev-box.answered, .gre-rev-key.answered { background: #22C55E; color: #fff; }
.gre-rev-box.seen-un,  .gre-rev-key.seen-un  { background: #EF4444; color: #fff; }
/* marked + answered = half yellow / half green */
.gre-rev-box.mark-ans, .gre-rev-key.mark-ans {
  background: linear-gradient(135deg, #FBBF24 0 50%, #22C55E 50% 100%);
  color: #fff;
}
/* marked + unanswered = half yellow / half red */
.gre-rev-box.mark-un,  .gre-rev-key.mark-un {
  background: linear-gradient(135deg, #FBBF24 0 50%, #EF4444 50% 100%);
  color: #fff;
}

/* ── Quant calculator ────────────────────────────────────────────────── */
.gre-calc {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 248px;
  background: #1f2937;
  border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
  z-index: 70;
  display: none;
  padding: 10px;
  user-select: none;
}
.gre-calc.open { display: block; }
.gre-calc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #e5e7eb;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 4px 8px;
}
.gre-calc-close {
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 0.9rem;
}
.gre-calc-display {
  background: #f8fafc;
  color: #111827;
  border-radius: 6px;
  text-align: right;
  font-size: 1.35rem;
  font-weight: 600;
  padding: 10px 12px;
  margin-bottom: 8px;
  min-height: 24px;
  overflow-x: auto;
  white-space: nowrap;
}
.gre-calc-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.gre-calc-key {
  padding: 11px 0;
  border: none;
  border-radius: 6px;
  background: #374151;
  color: #f9fafb;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}
.gre-calc-key:hover { background: #4b5563; }
.gre-calc-key.op { background: #475569; color: #fde68a; }
.gre-calc-key.mem { background: #4b5563; color: #cbd5e1; font-size: 0.82rem; }
.gre-calc-key.eq { background: var(--accent); color: #fff; }
.gre-calc-key.eq:hover { background: var(--accent-light); }
.gre-calc-transfer {
  width: 100%;
  margin-top: 8px;
  padding: 9px 0;
  border: none;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.gre-calc-transfer:hover { background: #1d4ed8; }

/* ═══════════════════════════════════════════════════════════════════════════
   GRE EXTRAS — Vocabulary flashcards & Mock exam (gre_extra.js)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Vocabulary flashcards ───────────────────────────────────────────────── */
.gre-voc-wrap { max-width: 760px; margin: 0 auto; }
.gre-voc-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px;
}
.gre-voc-chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted);
  padding: 6px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: var(--transition);
}
.gre-voc-chip:hover { border-color: var(--accent); color: var(--text); }
.gre-voc-chip.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.gre-voc-card {
  position: relative; min-height: 240px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow);
  cursor: pointer; padding: 36px 28px; display: flex; align-items: center;
  justify-content: center; text-align: center; transition: var(--transition);
}
.gre-voc-card:hover { box-shadow: var(--shadow); border-color: var(--accent-light); }
.gre-voc-front, .gre-voc-back { width: 100%; }
.gre-voc-read { position: absolute; top: 12px; right: 12px; z-index: 2; }
.gre-voc-read .gre-readaloud { margin: 0; }
.gre-voc-card .gre-voc-back { display: none; }
.gre-voc-card.flipped .gre-voc-front { display: none; }
.gre-voc-card.flipped .gre-voc-back { display: block; text-align: left; }
.gre-voc-word { font-size: 2.2rem; font-weight: 700; color: var(--text); letter-spacing: 0.5px; }
.gre-voc-pos {
  display: inline-block; margin-top: 8px; font-size: 0.8rem; font-style: italic;
  font-weight: 600; color: var(--text-muted);
}
.gre-voc-backword {
  font-size: 1.4rem; font-weight: 700; color: var(--text); margin-bottom: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--border-light);
}
.gre-voc-backword .gre-voc-pos { margin: 0 0 0 6px; font-size: 0.85rem; }
.gre-voc-hint { margin-top: 14px; font-size: 0.82rem; color: var(--text-muted); }
.gre-voc-mean { font-size: 1.05rem; line-height: 1.6; color: var(--text); margin-bottom: 12px; }
.gre-voc-syn { font-size: 0.98rem; line-height: 1.6; color: var(--text-muted); margin-bottom: 12px; }
.gre-voc-ex {
  font-size: 0.98rem; line-height: 1.6; color: var(--text);
  padding: 10px 14px; background: var(--accent-pale); border-radius: var(--radius);
  border-left: 3px solid var(--accent-light);
}
.gre-voc-ex em { font-style: italic; }
.gre-voc-ex strong { color: var(--accent); font-style: normal; }
.gre-voc-mean strong, .gre-voc-syn strong, .gre-voc-ex strong { color: var(--accent); }
.gre-voc-badge {
  display: inline-block; margin-top: 16px; padding: 3px 12px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
}
.gre-voc-badge.know   { background: var(--success-pale); color: var(--success); }
.gre-voc-badge.review { background: var(--warn-pale);    color: var(--warn); }
.gre-voc-badge.dont   { background: var(--error-pale);   color: var(--error); }
.gre-voc-actions { display: flex; gap: 10px; margin: 18px 0 6px; flex-wrap: wrap; }
.gre-voc-act {
  flex: 1; min-width: 130px; padding: 12px 10px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.gre-voc-act.know:hover   { background: var(--success-pale); border-color: var(--success); color: var(--success); }
.gre-voc-act.review:hover { background: var(--warn-pale);    border-color: var(--warn);    color: var(--warn); }
.gre-voc-act.dont:hover   { background: var(--error-pale);   border-color: var(--error);   color: var(--error); }
.gre-voc-empty {
  text-align: center; color: var(--text-muted); padding: 60px 20px;
  border: 1px dashed var(--border); border-radius: var(--radius-lg); background: var(--surface);
}

/* ─── Mock exam: shared ───────────────────────────────────────────────────── */
.gre-exam, .gre-exam-results { max-width: 820px; margin: 0 auto; }
.gre-btn-primary {
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 10px 22px; border-radius: var(--radius); font-size: 0.95rem; font-weight: 700;
  cursor: pointer; transition: var(--transition);
}
.gre-btn-primary:hover { background: var(--accent-light); border-color: var(--accent-light); }
.gre-exam-controls { display: flex; gap: 12px; align-items: center; margin: 24px 0; flex-wrap: wrap; }
.gre-exam-structure { margin: 20px 0; width: 100%; }

/* ─── Section intro ───────────────────────────────────────────────────────── */
.gre-exam-step {
  display: inline-block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--accent); margin-bottom: 6px;
}
.gre-exam-intro-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  padding: 24px; box-shadow: var(--shadow-sm); margin-top: 8px;
}
.gre-exam-intro-meta {
  display: flex; gap: 22px; flex-wrap: wrap; font-weight: 700; color: var(--text);
  margin-bottom: 14px;
}
.gre-exam-directions { line-height: 1.65; color: var(--text); margin: 0 0 14px; }
.gre-exam-note {
  font-size: 0.88rem; color: var(--text-muted); line-height: 1.55; margin: 0;
  padding-top: 12px; border-top: 1px solid var(--border-light);
}

/* ─── Running section ─────────────────────────────────────────────────────── */
.gre-exam-run { max-width: 900px; margin: 0 auto; }
.gre-exam-bar, .sat-exam-topbar {
  position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.gre-exam-bar-left, .gre-exam-bar-right { display: flex; align-items: center; gap: 12px; }
.gre-exam-secname, .sat-exam-title { font-weight: 700; color: var(--text); }
.gre-exam-timer, .sat-exam-timer {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; color: var(--text);
  padding: 4px 12px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border);
}
.gre-exam-timer.low, .sat-exam-timer.urgent { color: var(--error); border-color: var(--error); background: var(--error-pale); }

.gre-exam-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px;
  font-size: 0.8rem; color: var(--text-muted);
}
.gre-exam-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gre-exam-palette, .sat-exam-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.gre-exam-pbox, .sat-exam-nav-btn {
  width: 34px; height: 34px; border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #1f2937; font-size: 0.82rem; font-weight: 700;
  cursor: pointer; transition: transform var(--transition); position: relative;
}
.gre-exam-pbox:hover { transform: scale(1.08); }
/* identical combination to the practice-question review grid */
.gre-exam-pbox.unseen   { background: #D1D5DB; }
.gre-exam-pbox.answered, .sat-exam-nav-btn.answered { background: #22C55E; color: #fff; }
.gre-exam-pbox.seen-un  { background: #EF4444; color: #fff; }
.gre-exam-pbox.mark-ans { background: linear-gradient(135deg, #FBBF24 0 50%, #22C55E 50% 100%); color: #fff; }
.gre-exam-pbox.mark-un  { background: linear-gradient(135deg, #FBBF24 0 50%, #EF4444 50% 100%); color: #fff; }
.gre-exam-pbox.current, .sat-exam-nav-btn.current  { outline: 2px solid var(--accent); outline-offset: 1px; }
.gre-exam-qhost, .sat-exam-body { margin-bottom: 18px; }

/* ─── AW textarea inside exam ─────────────────────────────────────────────── */
.gre-exam-aw { margin-top: 4px; }
.gre-exam-aw .gre-essay-box { min-height: 340px; }

/* ─── Results ─────────────────────────────────────────────────────────────── */
.gre-score-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0;
}
.gre-score-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  padding: 22px 16px; text-align: center; box-shadow: var(--shadow-sm);
}
.gre-score-card.total { background: var(--accent-pale); border-color: var(--accent); }
.gre-score-num { font-size: 2.6rem; font-weight: 800; color: var(--text); line-height: 1; }
.gre-score-card.total .gre-score-num { color: var(--accent); }
.gre-score-lbl { margin-top: 8px; font-size: 0.84rem; font-weight: 600; color: var(--text-muted); }
.gre-score-sub { margin-top: 4px; font-size: 0.8rem; color: var(--text-muted); }
.gre-score-aw {
  background: var(--info, #1A4E9A); background: rgba(26,78,154,0.08); color: var(--text);
  border: 1px solid rgba(26,78,154,0.25); border-radius: var(--radius); padding: 12px 16px;
  font-size: 0.92rem; margin-bottom: 14px;
}
.gre-score-note { font-size: 0.85rem; color: var(--text-muted); }

/* ─── Answer review ───────────────────────────────────────────────────────── */
.gre-review-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 28px; }
.gre-review-row {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius);
  background: var(--surface);
}
.gre-review-row.ok  { border-left-color: var(--success); }
.gre-review-row.bad { border-left-color: var(--error); }
.gre-review-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--bg);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: var(--text-muted);
}
.gre-review-body { flex: 1; min-width: 0; }
.gre-review-stem { color: var(--text); line-height: 1.5; margin-bottom: 6px; }
.gre-review-ans { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 0.88rem; }
.gre-review-yours { color: var(--text-muted); }
.gre-review-correct { color: var(--success); }
.gre-review-row.ok .gre-review-yours strong { color: var(--success); }
.gre-review-row.bad .gre-review-yours strong { color: var(--error); }
.gre-review-mark { flex: none; font-size: 1.2rem; font-weight: 800; }
.gre-review-row.ok  .gre-review-mark { color: var(--success); }
.gre-review-row.bad .gre-review-mark { color: var(--error); }

.gre-right { flex: 1; min-width: 0; }

@media (max-width: 640px) {
  .gre-score-cards { grid-template-columns: 1fr; }
  .gre-exam-bar { position: static; }
  .gre-voc-act { min-width: 100%; }}



/* ─── Also moved from style.css: the exam course shell and the panelled
   quiz view. The first pass missed these because their selectors lead with
   .exam-course-screen / #quiz-screen, not .gre- or .sat-. ─────────────── */

/* Always visible on exam courses (the other courses show it on mobile only). */
.exam-course-screen .course-sidebar-toggle { display: inline-block; }

/* ── Push-right sidebar (closed by default; opening shifts content right) ─
   The sidebar is part of the flex flow but collapsed to zero width when
   closed. Opening it expands its column so the content pane is pushed to the
   right instead of being overlaid — nothing on screen is hidden. */
.exam-course-screen .course-layout {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}
.exam-course-screen .course-sidebar {
  flex: 0 0 0px;
  width: 0;
  min-width: 0;
  max-width: 300px;
  height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow: hidden;
  opacity: 0;
  transition: flex-basis 0.25s ease, width 0.25s ease, opacity 0.2s ease;
}
.exam-course-screen.sidebar-open .course-sidebar {
  flex: 0 0 300px;
  width: 300px;
  min-width: 300px;
  opacity: 1;
  overflow-y: auto;
  border-right: 1px solid var(--border-light);
}
.exam-course-screen .course-content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  max-height: calc(100vh - 60px);
  transition: flex-basis 0.25s ease;
}
/* An exam locked after too many walk-outs: visibly inert, not merely dimmed. */
.gre-card.locked {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--surface2);
}

/* Quiz screen top-corner reset button */
/* ── Unified quiz panel (GRE-style) ──────────────────────────────────────
   By default .quiz-panel is a transparent flow wrapper, so every existing quiz
   looks unchanged. When #quiz-screen carries .quiz-panelled the stem, answers
   and hint collapse into one surface panel — matching the GRE deck's .gre-q,
   where the options sit inside the card rather than floating on the page. */
#quiz-screen.quiz-panelled .quiz-panel {
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
#quiz-screen.quiz-panelled .question-card {
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 16px;
}
#quiz-screen.quiz-panelled .answer-area { margin-bottom: 0; }
#quiz-screen.quiz-panelled #hint-box { margin-top: 14px; }
#quiz-screen.quiz-panelled {
  max-width: 100%;
  padding: 0 0 60px;
}
#quiz-screen.quiz-panelled .quiz-coursebar { display: flex; }
#quiz-screen.quiz-panelled .quiz-body {
  max-width: 920px;
  margin-inline: auto;
  padding: 24px 20px 0;
}
/* Crumbs sit on their own row under the band, as in GRE. */
#quiz-screen.quiz-panelled .quiz-topbar { margin-bottom: 6px; }

/* Counter + actions as one soft-button row, mirroring .gre-deck-nav. */
#quiz-screen.quiz-panelled .quiz-header {
  gap: 16px;
  justify-content: flex-start;
  margin-bottom: 18px;
}
#quiz-screen.quiz-panelled .progress-bar { display: none; }
#quiz-screen.quiz-panelled #progress-text,
#quiz-screen.quiz-panelled #score-display {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}
#quiz-screen.quiz-panelled .quiz-navbtn { display: inline-block; }
#quiz-screen.quiz-panelled #quiz-reset-btn { display: none; }
#quiz-screen.quiz-panelled .q-star-btn { display: none; }
#quiz-screen.quiz-panelled .quiz-title {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 10px;
  line-height: 1.25;
}

/* Match the GRE deck's card interior: a plain sans stem (not the Playfair
   display face used by the standalone quizzes) and full-width stacked choices
   with circular letter marks, instead of the cramped two-column grid. */
#quiz-screen.quiz-panelled #q-text {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-size: 0.98rem;
  line-height: 1.7;
  font-weight: 400;
}
#quiz-screen.quiz-panelled .answer-area.mcq {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#quiz-screen.quiz-panelled .option-btn {
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg);
  border-color: var(--border);
  box-shadow: none;
  font-size: 0.92rem;
  line-height: 1.5;
}
#quiz-screen.quiz-panelled .opt-label {
  width: 26px;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface);
  border-color: var(--border);
  font-size: 0.78rem;
}
#quiz-screen.quiz-panelled .opt-text { padding-top: 2px; line-height: 1.5; }

/* Graded states under the panelled skin.
   The rule above carries an id, so it outranks `.option-btn.correct` and reset
   every graded option back to a plain background and border. Only the label
   rules survived — which is why a marked answer showed nothing but a tinted
   A/B/C/D while the box itself looked untouched. These restate the graded
   colours at the skin's own specificity. */
#quiz-screen.quiz-panelled .option-btn.selected {
  border-color: var(--accent);
  background: var(--accent-pale);
}
#quiz-screen.quiz-panelled .option-btn.correct {
  border-color: var(--success);
  background: var(--success-pale);
  color: var(--success);
}
#quiz-screen.quiz-panelled .option-btn.wrong {
  border-color: var(--error);
  background: var(--error-pale);
  color: var(--error);
  opacity: .75;
}
#quiz-screen.quiz-panelled .option-btn.correct .opt-label {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
#quiz-screen.quiz-panelled .option-btn.wrong .opt-label {
  background: var(--error);
  border-color: var(--error);
  color: #fff;
}

/* When a deck / quiz is open the body is a narrow column. Centre the header
   (crumbs, title, prev-next bar) on the same axis so the whole view reads as
   one centred block instead of hugging the left edge. Browse screens have no
   .gre-single / .gre-split child, so they keep their full-width card grid. */
.course-content:has(> .gre-single) > .gre-cat-head { max-width: 720px; margin-inline: auto; }
/* put the label (Explanation: / Answer:) on its own line, claim/text below it */
.gre-reasoning strong { display: block; margin-bottom: 3px; }

/* ── GRE responsive ──────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .gre-split { grid-template-columns: 1fr; gap: 18px; }
  .gre-left { position: static; max-height: none; }}

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .gre-qc-quants { grid-template-columns: 1fr; }}


/* ─── Stragglers: a GRE-only rule left in style.css, and one that both
   gre_extra.js and sat.js render but which was swept into the School
   Subjects sheet with the AP Physics block. ──────────────────────── */

/* ── Sidebar tree ────────────────────────────────────────────────────── */
#gre-nav { padding: 8px 0 40px; }
.gre-results-exam-brand {
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}


/* ─── Exam Grid (Competitive Exams) ───────────────────────────────────── */
#exam-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 24px;
}
@media (max-width: 860px) { #exam-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { #exam-grid { grid-template-columns: 1fr; } }

/* ─── Exam picker cards, moved from style.css. They sit here ahead of
   `#exam-screen .exam-card`, which is where they were relative to it when
   they lived in style.css. `html.pw-exam-lock .exam-course-screen` comes
   too: it sets --ce-app-header for the lockdown, and had no business in
   the School Subjects sheet. ─────────────────────────────────────────── */

.exam-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--exam-color, var(--accent));
  border-radius: var(--radius-lg);
  padding: 14px 12px 12px;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text);
  font-family: inherit;
  box-shadow: var(--shadow-sm);
}
.exam-card:hover {
  background: var(--surface2);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.exam-card--soon {
  position: relative;
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.6);
  box-shadow: none;
}
.exam-card--soon:hover {
  background: var(--surface);
  transform: none;
  box-shadow: none;
}
.exam-soon-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #fff;
  background: var(--text-muted);
  padding: 2px 6px;
  border-radius: 999px;
}
.exam-logo-img {
  width: 100%;
  max-width: 100px;
  height: 38px;
  object-fit: contain;
  border-radius: 4px;
}
.exam-hero-icon { align-self: flex-start; margin-bottom: 4px; }
.exam-hero-logo { width: 120px; height: 48px; object-fit: contain; border-radius: 6px; }
html.pw-exam-lock .exam-course-screen {
  --ce-app-header: 0px;
}

/* ==========================================================================
   Competitive-exam shell overrides. Declared after the base rules above, as
   they were when this file loaded after style.css.
   ========================================================================== */


.competitive-exam-screen,
.exam-course-screen,
#quiz-screen.quiz-panelled,
#sat-exam-screen {
  --ce-bg:#f6f2ed;
  --ce-panel:#fffdf9;
  --ce-panel-soft:#efe8e0;
  --ce-ink:#251e19;
  --ce-muted:#786c63;
  --ce-line:#ded3c8;
  --ce-accent:#c9521c;
  --ce-accent-strong:#9f3c13;
  --ce-accent-soft:#f8e4d6;
  --ce-success:#2f7758;
  --ce-danger:#b43b34;
  background:var(--ce-bg);
  color:var(--ce-ink);
}

/* ── Exam directory and subject hierarchy ───────────────────────────── */
.competitive-exam-screen {
  width:100%;
  max-width:1080px;
  padding:24px 24px 64px;
  background:transparent;
}
#exam-screen {
  max-width:920px;
  padding-left:20px;
  padding-right:20px;
}
.competitive-exam-screen > .back-btn {
  min-height:38px;
  margin:0 0 12px clamp(-4px,calc((100% - 920px) / 2 + 20px),80px);
  padding:0 12px;
  border:1px solid var(--ce-line);
  border-radius:10px;
  background:var(--ce-panel);
  color:var(--ce-muted);
  font-weight:650;
}
.competitive-exam-screen > .back-btn:hover {
  border-color:var(--ce-accent);
  color:var(--ce-accent);
}
.competitive-exam-screen .sets-hero,
.competitive-exam-screen .subject-hero {
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:18px;
  padding:12px 0 26px;
}
.competitive-exam-screen .cat-hero-icon,
.competitive-exam-screen .exam-hero-icon {
  grid-row:1 / 3;
  align-self:center;
  margin:0;
}
.competitive-exam-screen .cat-hero-logo,
.competitive-exam-screen .exam-hero-logo {
  width:68px;
  height:68px;
  object-fit:contain;
}
.competitive-exam-screen .sets-hero h2,
.competitive-exam-screen .subject-hero h2 {
  align-self:end;
  margin:0 0 3px;
  color:var(--ce-ink);
  font:750 clamp(1.8rem,3vw,2.3rem)/1.12 'Playfair Display',Georgia,serif;
}
.competitive-exam-screen .sets-hero .hero-sub,
.competitive-exam-screen .subject-hero .hero-sub {
  align-self:start;
  max-width:none;
  color:var(--ce-muted);
  font-size:.84rem;
}
.competitive-exam-screen .section-title {
  margin:0 0 13px;
  color:var(--ce-muted);
  font-size:.68rem;
  font-weight:750;
  letter-spacing:.14em;
}

#exam-screen #exam-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:32px;
}
#exam-screen .exam-card {
  position:relative;
  min-width:0;
  min-height:108px;
  padding:15px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  text-align:left;
  white-space:normal;
  border:1px solid var(--ce-line);
  border-top:2px solid var(--exam-color,var(--ce-accent));
  border-radius:14px;
  background:var(--ce-panel);
  box-shadow:none;
}
#exam-screen .exam-card:hover {
  transform:translateY(-1px);
  border-color:var(--exam-color,var(--ce-accent));
  box-shadow:0 7px 20px rgba(43,29,20,.08);
}
#exam-screen .exam-logo-img {
  width:52px;
  height:52px;
  flex:0 0 52px;
  padding:6px;
  object-fit:contain;
  border:1px solid color-mix(in srgb,var(--exam-color,var(--ce-accent)) 34%,var(--ce-line));
  border-radius:13px;
  background:color-mix(in srgb,var(--exam-color,var(--ce-accent)) 9%,var(--ce-panel));
}
#exam-screen .exam-info {
  min-width:0;
  align-items:flex-start;
  text-align:left;
  gap:5px;
}
#exam-screen .exam-name {
  color:var(--ce-ink);
  font-size:1rem;
  font-weight:750;
}
#exam-screen .exam-subjects {
  color:var(--exam-color,var(--ce-accent));
  text-align:left;
  font-size:.72rem;
  font-weight:650;
  line-height:1.45;
  white-space:normal;
}
#exam-screen .exam-count {
  color:var(--exam-color,var(--ce-accent));
  font-size:.7rem;
  line-height:1.35;
  white-space:normal;
}
#exam-screen .exam-soon-badge {
  top:9px;
  right:10px;
  left:auto;
  padding:3px 7px;
  border:1px solid var(--ce-line);
  border-radius:99px;
  background:var(--ce-panel-soft);
  color:var(--ce-muted);
  font-size:.55rem;
  letter-spacing:.04em;
}
#exam-screen .exam-card--soon {
  opacity:.72;
  filter:saturate(.72);
}
#exam-screen .exam-card--soon:hover {
  transform:none;
  border-color:var(--ce-line);
  box-shadow:none;
}

.competitive-exam-screen #subject-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
  margin-bottom:24px;
}
.competitive-exam-screen .sets-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
}
.competitive-exam-screen .subject-card,
.competitive-exam-screen .set-card {
  min-height:88px;
  padding:15px 16px;
  border:1px solid var(--ce-line);
  border-left:3px solid var(--card-accent,var(--ce-accent));
  border-radius:12px;
  background:var(--ce-panel);
  box-shadow:none;
}
.competitive-exam-screen .subject-card:hover,
.competitive-exam-screen .set-card:hover {
  transform:translateY(-1px);
  background:var(--ce-panel);
  border-color:var(--card-accent,var(--ce-accent));
  box-shadow:0 5px 16px rgba(43,29,20,.07);
}
.competitive-exam-screen .subject-name,
.competitive-exam-screen .set-name {
  color:var(--ce-ink);
  font-weight:700;
}
.competitive-exam-screen .subject-count,
.competitive-exam-screen .set-count {
  color:var(--ce-muted);
}
.competitive-exam-screen .gre-pboxes {
  gap:11px;
  margin-top:24px;
}
.competitive-exam-screen .gre-pbox {
  padding:15px 17px;
  border-color:var(--ce-line);
  border-radius:12px;
  background:var(--ce-panel);
  box-shadow:none;
}

/* ── Shared GRE / SAT course shell ───────────────────────────────────── */
.exam-course-screen {
  --ce-app-header:64px;
  --ce-shell-top:62px;
  max-width:none!important;
  padding:0!important;
  overflow:hidden;
}
.exam-course-screen .course-topbar,
#quiz-screen.quiz-panelled .quiz-coursebar {
  position:sticky!important;
  top:0;
  z-index:70;
  min-height:62px;
  justify-content:flex-start;
  gap:10px;
  padding:12px max(20px,calc((100% - 920px) / 2 + 20px))!important;
  border-bottom:2px solid var(--ce-accent);
  background:rgba(255,253,249,.96);
  box-shadow:none;
  backdrop-filter:blur(12px);
}
.exam-course-screen .gre-topbar-left {
  display:flex;
  align-items:center;
  gap:10px;
}
.exam-course-screen .course-topbar .back-btn,
.exam-course-screen .course-sidebar-toggle,
.exam-course-screen .gre-exam-quit-btn,
#quiz-screen.quiz-panelled .course-sidebar-toggle,
#quiz-screen.quiz-panelled .quiz-back-btn {
  min-height:38px;
  margin:0;
  padding:0 13px;
  border:1px solid var(--ce-line);
  border-radius:10px;
  background:var(--ce-panel);
  color:var(--ce-ink);
  font:650 .72rem/1 'DM Sans',sans-serif;
}
.exam-course-screen .course-sidebar-toggle,
#quiz-screen.quiz-panelled #quiz-sections-btn {
  position:static;
  inset:auto;
  transform:none;
  flex:0 0 auto;
  width:38px;
  min-width:38px;
  height:38px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:11px;
  font-size:1.05rem;
}
.exam-course-screen .gre-exam-quit-btn { color:var(--ce-danger); }
.exam-course-screen .course-topbar button:hover,
#quiz-screen.quiz-panelled .quiz-coursebar button:hover {
  border-color:var(--ce-accent);
  color:var(--ce-accent);
  background:var(--ce-accent-soft);
}
.exam-course-screen .course-layout {
  height:calc(100dvh - var(--ce-app-header) - var(--ce-shell-top));
  min-height:0;
  background:var(--ce-bg);
}
.exam-course-screen .course-sidebar {
  height:100%;
  max-height:100%;
  border-color:var(--ce-line);
  background:#f0e9e2;
  scrollbar-color:var(--ce-accent) transparent;
}
.exam-course-screen.sidebar-open .course-sidebar {
  flex-basis:310px;
  width:310px;
  min-width:310px;
}
.exam-course-screen .course-sidebar-header {
  min-height:76px;
  padding:15px 16px;
  gap:12px;
  border-color:var(--ce-line);
  background:var(--ce-panel);
}
.exam-course-screen .course-sidebar-icon {
  width:44px!important;
  height:44px!important;
  padding:5px;
  object-fit:contain;
  border:1px solid var(--ce-line);
  border-radius:12px;
  background:var(--ce-panel-soft);
}
.exam-course-screen .course-sidebar-title {
  color:var(--ce-ink);
  font:750 .96rem/1.2 'Playfair Display',Georgia,serif;
}
.exam-course-screen .course-sidebar-sub {
  color:var(--ce-muted);
  font-size:.65rem;
  line-height:1.4;
}
.exam-course-screen .course-nav { padding:9px 7px 34px!important; }
.exam-course-screen .gre-sb-grouphead,
.exam-course-screen .gre-sb-item {
  min-height:39px;
  margin:2px 0;
  padding-top:8px;
  padding-bottom:8px;
  border-left:0;
  border-radius:9px;
  color:var(--ce-ink);
}
.exam-course-screen .gre-sb-grouphead:hover,
.exam-course-screen .gre-sb-item:hover {
  background:var(--ce-panel);
}
.exam-course-screen .gre-sb-item.active {
  background:var(--ce-accent-soft);
  color:var(--ce-accent-strong);
  box-shadow:inset 3px 0 var(--ce-accent);
}
.exam-course-screen .gre-sb-count {
  border:1px solid var(--ce-line);
  background:var(--ce-panel);
  color:var(--ce-muted);
}
.exam-course-screen .course-content {
  height:100%;
  max-height:100%;
  padding:30px clamp(20px,4vw,54px) 72px;
  background:var(--ce-bg);
  overscroll-behavior:contain;
  scrollbar-color:var(--ce-accent) transparent;
}
.exam-course-screen .gre-content > * {
  width:min(100%,1020px);
  margin-left:auto;
  margin-right:auto;
}

/* ── Course landing cards and utilities ──────────────────────────────── */
.exam-course-screen .gre-doc-title {
  color:var(--ce-ink);
  font-size:clamp(1.9rem,4vw,2.8rem);
  line-height:1.13;
  letter-spacing:-.025em;
}
.exam-course-screen .gre-doc-intro,
.exam-course-screen .gre-doc-p {
  color:var(--ce-muted);
  line-height:1.7;
}
.exam-course-screen .gre-crumbs { margin-bottom:16px; }
.exam-course-screen .gre-crumb {
  min-height:28px;
  padding:5px 8px;
  border-radius:7px;
  color:var(--ce-muted);
}
.exam-course-screen .gre-crumb:hover { background:var(--ce-accent-soft); }
.exam-course-screen .gre-cards {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
#gre-course-screen .gre-home-grid {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.exam-course-screen .gre-card,
.exam-course-screen .gre-pbox,
.exam-course-screen .gre-saved-row {
  border:1px solid var(--ce-line);
  border-radius:13px;
  background:var(--ce-panel);
  box-shadow:none;
}
.exam-course-screen .gre-card {
  position:relative;
  min-height:112px;
  padding:15px 48px 15px 15px;
  align-items:flex-start;
  flex-direction:column;
}
/* Only .gre-card is a positioned container — keep the absolute arrow scoped to
   it, or arrows inside .gre-pbox (static) escape to the viewport edge. */
.exam-course-screen .gre-card > .gre-card-arrow {
  position:absolute;
  top:50%;
  right:18px;
  margin:0;
  transform:translateY(-50%);
}
.exam-course-screen .gre-card:hover > .gre-card-arrow {
  transform:translate(3px,-50%);
}
.exam-course-screen .gre-pbox > .gre-card-arrow {
  position:static;
  flex-shrink:0;
  margin-left:auto;
  color:var(--ce-muted);
}
.exam-course-screen .gre-pbox:hover > .gre-card-arrow {
  color:var(--ce-accent);
  transform:translateX(3px);
}
.exam-course-screen .gre-card:hover,
.exam-course-screen .gre-pbox:hover {
  transform:translateY(-1px);
  border-color:var(--ce-accent);
  box-shadow:0 6px 18px rgba(43,29,20,.07);
}
.exam-course-screen .gre-card-icon,
.exam-course-screen .gre-pbox-icon {
  width:48px;
  height:48px;
  border:1px solid var(--ce-line);
  border-radius:11px;
  background:var(--ce-panel-soft);
  color:var(--ce-accent);
  box-shadow:none;
}
.exam-course-screen .gre-card-title,
.exam-course-screen .gre-pbox-title,
.exam-course-screen .gre-saved-title { color:var(--ce-ink); }
.exam-course-screen .gre-card-meta,
.exam-course-screen .gre-pbox-sub,
.exam-course-screen .gre-saved-meta { color:var(--ce-muted); }

/* ── Questions and practice decks ────────────────────────────────────── */
.exam-course-screen .gre-deck-nav,
#quiz-screen.quiz-panelled .quiz-header {
  min-height:48px;
  padding:8px 10px;
  border:1px solid var(--ce-line);
  border-radius:11px;
  background:var(--ce-panel);
}
.exam-course-screen .gre-q,
#quiz-screen.quiz-panelled .quiz-panel {
  padding:24px;
  border:1px solid var(--ce-line);
  border-radius:14px;
  background:var(--ce-panel);
  box-shadow:0 3px 14px rgba(43,29,20,.04);
}
.exam-course-screen .gre-stem,
#quiz-screen.quiz-panelled #q-text {
  color:var(--ce-ink);
  font-size:.98rem;
  line-height:1.72;
}
.exam-course-screen .gre-choice,
#quiz-screen.quiz-panelled .option-btn {
  min-height:50px;
  padding:12px 14px;
  border:1px solid var(--ce-line);
  border-radius:10px;
  background:var(--ce-bg);
  color:var(--ce-ink);
}
.exam-course-screen .gre-choice:hover:not(.disabled),
#quiz-screen.quiz-panelled .option-btn:hover:not(:disabled) {
  border-color:var(--ce-accent);
  background:var(--ce-accent-soft);
}
.exam-course-screen .gre-choice-mark,
#quiz-screen.quiz-panelled .opt-label {
  border-color:var(--ce-line);
  background:var(--ce-panel);
}
.exam-course-screen .gre-passage {
  padding:19px 20px;
  border-color:var(--ce-line);
  border-radius:12px;
  background:var(--ce-panel);
}
.exam-course-screen .gre-passage p { color:var(--ce-ink); }
.exam-course-screen .gre-btn-soft,
.exam-course-screen .gre-chip,
.exam-course-screen .sat-exam-mark-btn,
.exam-course-screen .sat-exam-nav-toggle,
.exam-course-screen .sat-refsheet-toggle,
#quiz-screen.quiz-panelled .quiz-navbtn {
  min-height:38px;
  padding:0 13px;
  border:1px solid var(--ce-line);
  border-radius:9px;
  background:var(--ce-panel);
  color:var(--ce-ink);
  font-weight:650;
}

/* ── Timed SAT/GRE runners ───────────────────────────────────────────── */
#sat-exam-screen {
  max-width:none;
  padding:0 0 60px;
}
/* GRE and SAT share one exam chrome. They used to diverge here — SAT got
   rounded top corners, its own padding, a pill timer and a filled current-
   question button, while GRE kept square corners, a rounded-rect timer and an
   outlined current button. Same component, two looks. Both selectors now sit
   on one rule, so the two tests cannot drift apart again. */
.exam-course-screen .gre-exam-bar,
.exam-course-screen .sat-exam-topbar,
#sat-exam-screen .sat-exam-topbar {
  position:sticky!important;
  top:0;
  z-index:45;
  border-color:var(--ce-line);
  border-bottom:2px solid var(--ce-accent);
  background:var(--ce-panel);
}
.exam-course-screen .gre-exam-timer,
.exam-course-screen .sat-exam-timer,
#sat-exam-screen .sat-exam-timer {
  border:1px solid var(--ce-accent);
  border-radius:9px;
  background:var(--ce-accent-soft);
  color:var(--ce-accent-strong);
}
.exam-course-screen .sat-exam-substrip,
.exam-course-screen .sat-exam-footbar,
#sat-exam-screen .sat-exam-substrip,
#sat-exam-screen .sat-exam-footbar {
  border-color:var(--ce-line);
  background:var(--ce-panel);
}
.exam-course-screen .sat-exam-substrip,
#sat-exam-screen .sat-exam-substrip {
  border-bottom:0;
}
.exam-course-screen .gre-exam-palette,
.exam-course-screen .sat-exam-nav,
#sat-exam-screen .sat-exam-nav {
  gap:7px;
  border-color:var(--ce-line);
  background:var(--ce-panel-soft);
}
.exam-course-screen .gre-exam-pbox,
.exam-course-screen .sat-exam-nav-btn,
#sat-exam-screen .sat-exam-nav-btn {
  min-height:36px;
  border:1px solid var(--ce-line);
  border-radius:8px;
  background:var(--ce-panel);
}
.exam-course-screen .gre-exam-pbox.current,
.exam-course-screen .sat-exam-nav-btn.current,
#sat-exam-screen .sat-exam-nav-btn.current {
  border-color:var(--ce-accent);
  background:var(--ce-accent);
  color:#fff;
}

/* ── Dark mode ───────────────────────────────────────────────────────── */
html[data-theme="dark"] .competitive-exam-screen,
html[data-theme="dark"] .exam-course-screen,
html[data-theme="dark"] #quiz-screen.quiz-panelled,
html[data-theme="dark"] #sat-exam-screen {
  --ce-bg:#15110e;
  --ce-panel:#211a16;
  --ce-panel-soft:#2c221c;
  --ce-ink:#f5ede6;
  --ce-muted:#b3a397;
  --ce-line:#49382e;
  --ce-accent:#ef7e3f;
  --ce-accent-strong:#ffb17f;
  --ce-accent-soft:#3e261b;
  --ce-success:#69b78f;
  --ce-danger:#ef837b;
}
html[data-theme="dark"] .exam-course-screen .course-topbar,
html[data-theme="dark"] #quiz-screen.quiz-panelled .quiz-coursebar {
  background:rgba(33,26,22,.96);
}
html[data-theme="dark"] .exam-course-screen .course-sidebar { background:#181310; }
html[data-theme="dark"] .exam-course-screen .gre-graph {
  background:#0f0d0b;
  border-color:var(--ce-line);
}
html[data-theme="dark"] #exam-screen .exam-card--soon { opacity:.62; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:900px) {
  .competitive-exam-screen #subject-grid,
  .competitive-exam-screen .sets-grid,
  .exam-course-screen .gre-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #gre-course-screen .gre-home-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  #exam-screen #exam-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .competitive-exam-screen { padding:18px 16px 52px; }
  .exam-course-screen.sidebar-open .course-sidebar {
    position:fixed;
    z-index:80;
    top:calc(var(--ce-app-header) + var(--ce-shell-top));
    bottom:0;
    left:0;
    width:min(320px,88vw);
    min-width:min(320px,88vw);
    height:auto;
    max-height:none;
    box-shadow:16px 0 36px rgba(0,0,0,.22);
  }
  .exam-course-screen .course-content { padding:24px 17px 64px; }
  .exam-course-screen .gre-split { grid-template-columns:1fr; gap:16px; }
  .exam-course-screen .gre-left { position:static; max-height:none; }
}
@media (max-width:560px) {
  #exam-screen #exam-grid,
  .competitive-exam-screen #subject-grid,
  .competitive-exam-screen .sets-grid,
  .exam-course-screen .gre-cards { grid-template-columns:1fr; }
  #gre-course-screen .gre-home-grid { grid-template-columns:1fr; }
  #exam-screen .exam-card { min-height:124px; }
  .competitive-exam-screen .sets-hero,
  .competitive-exam-screen .subject-hero {
    grid-template-columns:62px minmax(0,1fr);
    column-gap:13px;
  }
  .competitive-exam-screen .cat-hero-logo,
  .competitive-exam-screen .exam-hero-logo { width:56px; height:56px; }
  .exam-course-screen .gre-q,
  #quiz-screen.quiz-panelled .quiz-panel { padding:18px; }
}