/* ==========================================================================
   MRCOG Academy — Authenticated student area
   Keeps the editorial identity of the public site; avoids generic admin UI.
   ========================================================================== */

.app-body { background: var(--surface-page); }

.app-main { padding-block: var(--sp-7) var(--sp-10); }

/* ==========================================================================
   1. Dashboard welcome
   ========================================================================== */

.welcome {
  position: relative;
  overflow: hidden;
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
  border-radius: var(--r-xl);
  background: var(--grad-plum-deep);
  color: var(--text-on-dark);
  border: 1px solid var(--plum-600);
  box-shadow: var(--shadow-lg);
  margin-bottom: var(--sp-7);
}
.welcome::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 92% 6%, rgba(176, 141, 87, 0.26), transparent 46%),
    repeating-linear-gradient(120deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 18px);
  pointer-events: none;
}
.welcome-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-7);
  align-items: center;
}
.welcome h1 {
  color: var(--white);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  margin-bottom: var(--sp-2);
}
.welcome p { color: var(--text-on-dark-muted); font-size: var(--fs-sm); margin: 0 0 var(--sp-5); max-width: 54ch; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.sub-status {
  min-width: 258px;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.sub-status-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: var(--sp-3);
}
.sub-status strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--white);
  margin-bottom: var(--sp-1);
}
.sub-status-days {
  font-size: var(--fs-2xs);
  color: var(--text-on-dark-muted);
  margin-bottom: var(--sp-4);
  font-variant-numeric: tabular-nums;
}
.sub-status .progress { background: rgba(255, 255, 255, 0.18); }

/* Streak flame pill */
.streak-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--gold-100);
  border: 1px solid var(--gold-300);
  color: var(--gold-700);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   2. Dashboard grid
   ========================================================================== */

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-7);
  align-items: start;
}
.dash-col { display: grid; gap: var(--sp-6); align-content: start; }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.panel-head h2 {
  font-size: var(--fs-lg);
  margin: 0;
}
.panel-head h3 { font-size: var(--fs-base); margin: 0; }

/* Continue learning */
.continue-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: all var(--t-base) var(--ease-out);
}
.continue-card:hover { box-shadow: var(--shadow-md); border-color: var(--plum-200); color: inherit; transform: translateY(-2px); }
.continue-thumb {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background: var(--grad-plum);
  display: grid;
  place-items: center;
  color: var(--gold-300);
  font-size: 1.35rem;
}
.continue-thumb--gold { background: var(--grad-gold); color: var(--plum-900); }
.continue-body { display: grid; gap: var(--sp-2); align-content: start; min-width: 0; }
.continue-body h3 { font-size: var(--fs-base); margin: 0; }
.continue-body p { font-size: var(--fs-2xs); color: var(--text-muted); margin: 0; }

/* Activity feed */
.activity-list { list-style: none; padding: 0; margin: 0; }
.activity-item {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--border-subtle);
  margin: 0;
}
.activity-item:last-child { border-bottom: 0; padding-bottom: 0; }
.activity-item:first-child { padding-top: 0; }
.activity-mark {
  flex: none;
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.activity-mark--success { background: var(--state-correct-bg); border-color: var(--state-correct-border); color: var(--state-correct); }
.activity-mark--gold { background: var(--gold-100); border-color: var(--gold-300); color: var(--gold-700); }
.activity-body { flex: 1; min-width: 0; }
.activity-body strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.activity-body span { font-size: var(--fs-2xs); color: var(--text-muted); }
.activity-value {
  flex: none;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Weak area list */
.weak-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.weak-list li { margin: 0; }

/* Recommendation strip */
.rec-item {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border: 1px solid var(--state-warning-border);
  background: var(--state-warning-bg);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--t-fast) var(--ease-out);
}
.rec-item:hover { box-shadow: var(--shadow-sm); color: inherit; }
.rec-item strong { display: block; font-size: var(--fs-sm); }
.rec-item span { font-size: var(--fs-2xs); color: var(--text-secondary); }
.rec-item-mark { flex: none; color: var(--state-warning); font-size: var(--fs-base); line-height: 1.3; }

/* Mock exam callout */
.mock-callout {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--plum-200);
  background: linear-gradient(180deg, var(--plum-050), var(--white));
}
.mock-countdown {
  display: flex;
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
}
.countdown-cell {
  flex: 1;
  padding: var(--sp-3);
  text-align: center;
  border-radius: var(--r-md);
  background: var(--white);
  border: 1px solid var(--border-subtle);
}
.countdown-cell b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--plum-800);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown-cell span {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ==========================================================================
   3. Question bank workspace
   ========================================================================== */

.bank-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: var(--sp-7);
  align-items: start;
}
.bank-sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  display: grid;
  gap: var(--sp-5);
}
.filter-block {
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.filter-block h3 {
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.filter-options { display: grid; gap: var(--sp-3); }
.filter-option {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  cursor: pointer;
}
.filter-option input { accent-color: var(--plum-700); width: 16px; height: 16px; flex: none; cursor: pointer; }
.filter-option-count {
  margin-left: auto;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.session-builder {
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: linear-gradient(170deg, var(--plum-050), var(--white));
  border: 1px solid var(--plum-200);
}

/* Topic performance rows */
.topic-perf { display: grid; gap: var(--sp-5); }
.topic-perf-row { display: grid; gap: var(--sp-2); }
.topic-perf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.topic-perf-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.topic-perf-stats { font-size: var(--fs-2xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Mock exam cards */
.mock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: var(--sp-5); }
.mock-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.mock-card h3 { font-size: var(--fs-base); margin: 0; }
.mock-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.mock-card .btn { margin-top: auto; }

/* ==========================================================================
   4. Question / exam interface
   ========================================================================== */

.exam-bar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--plum-900);
  color: var(--text-on-dark);
  border-bottom: 1px solid var(--plum-700);
}
.exam-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 60px;
  flex-wrap: wrap;
}
.exam-bar-title {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  margin-right: auto;
}
.exam-bar-title strong { font-family: var(--font-display); font-size: var(--fs-base); color: var(--white); }
.exam-bar-title span { font-size: var(--fs-3xs); color: var(--gold-300); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.exam-timer {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.exam-progress-wrap { flex: 1; min-width: 160px; max-width: 320px; }
.exam-progress-wrap .progress { background: rgba(255, 255, 255, 0.18); }
.exam-progress-label {
  display: block;
  margin-bottom: 5px;
  font-size: var(--fs-3xs);
  color: var(--text-on-dark-muted);
  font-variant-numeric: tabular-nums;
}

.question-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: var(--sp-7);
  align-items: start;
  padding-block: var(--sp-7) var(--sp-10);
}

.question-card {
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.question-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}
.question-number {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-normal);
}
.question-number span { color: var(--text-muted); font-weight: var(--fw-regular); }

.mark-review {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.mark-review input { position: absolute; opacity: 0; width: 0; height: 0; }
.mark-review:hover { border-color: var(--gold-500); color: var(--gold-700); }
.mark-review:has(input:checked) {
  background: var(--gold-100);
  border-color: var(--gold-500);
  color: var(--gold-700);
}
.mark-review:has(input:focus-visible) { outline: 2px solid var(--plum-600); outline-offset: 2px; }

.question-body { padding: var(--sp-6); }
.question-stem {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  margin-bottom: var(--sp-5);
}
.question-stem strong { font-weight: var(--fw-semibold); }
.question-lead-in {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--sp-5);
}

.question-media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

/* Answer options */
.answer-list { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-6); }
.answer {
  display: block;
  position: relative;
  cursor: pointer;
}
.answer input { position: absolute; opacity: 0; width: 0; height: 0; }
.answer-face {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  transition: all var(--t-fast) var(--ease-out);
}
.answer:hover .answer-face { border-color: var(--plum-400); background: var(--plum-050); }
.answer input:focus-visible + .answer-face { outline: 2px solid var(--plum-600); outline-offset: 2px; }
.answer input:checked + .answer-face {
  border-color: var(--plum-700);
  background: var(--plum-050);
  box-shadow: inset 0 0 0 1px var(--plum-700);
}
.answer-key {
  flex: none;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  background: var(--white);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  transition: all var(--t-fast) var(--ease-out);
}
.answer input:checked + .answer-face .answer-key {
  border-color: var(--plum-700);
  background: var(--plum-700);
  color: var(--white);
}

/* Reviewed / answered states (question-result.html) */
.answer--reviewed { cursor: default; }
.answer--correct .answer-face {
  border-color: var(--state-correct);
  background: var(--state-correct-bg);
  box-shadow: inset 0 0 0 1px var(--state-correct);
}
.answer--correct .answer-key { background: var(--state-correct); border-color: var(--state-correct); color: var(--white); }
.answer--chosen-wrong .answer-face {
  border-color: var(--state-incorrect);
  background: var(--state-incorrect-bg);
  box-shadow: inset 0 0 0 1px var(--state-incorrect);
}
.answer--chosen-wrong .answer-key { background: var(--state-incorrect); border-color: var(--state-incorrect); color: var(--white); }
.answer--muted .answer-face { background: var(--surface-sunken); color: var(--text-muted); }
.answer-flag {
  flex: none;
  margin-left: auto;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  padding-top: 4px;
}
.answer--correct .answer-flag { color: var(--state-correct); }
.answer--chosen-wrong .answer-flag { color: var(--state-incorrect); }

.answer-text { flex: 1; min-width: 0; }

/* Question footer nav */
.question-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}

/* Question navigator */
.navigator {
  position: sticky;
  top: calc(60px + var(--sp-5));
  display: grid;
  gap: var(--sp-5);
}
.navigator-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-2);
}
.nav-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-default);
  background: var(--white);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: all var(--t-fast) var(--ease-out);
}
.nav-cell:hover { border-color: var(--plum-500); color: var(--plum-700); }
.nav-cell--answered { background: var(--plum-100); border-color: var(--plum-200); color: var(--plum-800); }
.nav-cell--flagged { background: var(--gold-100); border-color: var(--gold-400); color: var(--gold-700); }
.nav-cell--current {
  background: var(--plum-700);
  border-color: var(--plum-700);
  color: var(--white);
  box-shadow: 0 0 0 2px var(--plum-200);
}
.nav-cell--correct { background: var(--state-correct-bg); border-color: var(--state-correct-border); color: var(--state-correct); }
.nav-cell--incorrect { background: var(--state-incorrect-bg); border-color: var(--state-incorrect-border); color: var(--state-incorrect); }

.navigator-legend { display: grid; gap: var(--sp-2); font-size: var(--fs-3xs); color: var(--text-muted); }
.navigator-legend span { display: flex; align-items: center; gap: var(--sp-2); }
.legend-cell {
  width: 14px; height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border-default);
  flex: none;
}

/* Confidence indicator */
.confidence-scale { display: flex; gap: var(--sp-2); }
.confidence-step {
  flex: 1;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--ink-100);
}
.confidence-step--on { background: var(--gold-500); }

/* ==========================================================================
   5. Explanation blocks (question-result.html)
   ========================================================================== */

.verdict {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-6);
  border: 1px solid;
}
.verdict--correct { background: var(--state-correct-bg); border-color: var(--state-correct-border); }
.verdict--incorrect { background: var(--state-incorrect-bg); border-color: var(--state-incorrect-border); }
.verdict-mark {
  flex: none;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 1.35rem;
  color: var(--white);
}
.verdict--correct .verdict-mark { background: var(--state-correct); }
.verdict--incorrect .verdict-mark { background: var(--state-incorrect); }
.verdict h1,
.verdict h2 { font-size: var(--fs-lg); margin: 0 0 2px; }
.verdict--correct h1,
.verdict--correct h2 { color: var(--state-correct); }
.verdict--incorrect h1,
.verdict--incorrect h2 { color: var(--state-incorrect); }
.verdict p { font-size: var(--fs-sm); margin: 0; color: var(--text-secondary); }

.explain-block {
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-5);
}
.explain-block > h3 {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-base);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-subtle);
}
.explain-block > h3::before {
  content: "";
  width: 3px;
  height: 18px;
  border-radius: 2px;
  background: var(--gold-500);
}
.explain-block p { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--text-secondary); }

.learning-points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.learning-points li {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--plum-050);
  border: 1px solid var(--plum-100);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  margin: 0;
}
.learning-points li::before {
  content: "◆";
  color: var(--gold-600);
  flex: none;
  font-size: var(--fs-2xs);
  line-height: 1.7;
}

.distractor-list { display: grid; gap: var(--sp-3); }
.distractor {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--surface-sunken);
}
.distractor-key {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border-default);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.distractor p { font-size: var(--fs-sm); margin: 0; color: var(--text-secondary); line-height: var(--lh-relaxed); }
.distractor strong { color: var(--text-primary); display: block; margin-bottom: 2px; font-size: var(--fs-sm); }

/* ==========================================================================
   6. Exam summary
   ========================================================================== */

.summary-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}
.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
}
.summary-stat strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--plum-800);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.summary-stat span {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.summary-stat--correct strong { color: var(--state-correct); }
.summary-stat--incorrect strong { color: var(--state-incorrect); }
.summary-stat--skipped strong { color: var(--ink-400); }

/* ==========================================================================
   7. Course player
   ========================================================================== */

.player-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  gap: var(--sp-7);
  align-items: start;
  padding-block: var(--sp-6) var(--sp-10);
}
.player-sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  max-height: calc(100vh - var(--header-h) - var(--sp-9));
  overflow-y: auto;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.player-sidebar-head {
  padding: var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  position: sticky;
  top: 0;
  z-index: 1;
}
.player-sidebar-head h2 { font-size: var(--fs-base); margin-bottom: var(--sp-3); }

.player-module { border-bottom: 1px solid var(--border-subtle); }
.player-module:last-child { border-bottom: 0; }
.player-module > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.player-module > summary::-webkit-details-marker { display: none; }
.player-module > summary:hover { background: var(--plum-050); }
.player-module-meta { font-size: var(--fs-3xs); color: var(--text-muted); font-weight: var(--fw-regular); }

.player-lesson {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all var(--t-fast) var(--ease-out);
}
.player-lesson:hover { background: var(--surface-sunken); color: var(--text-primary); }
.player-lesson--current {
  background: var(--plum-050);
  border-left-color: var(--plum-700);
  color: var(--plum-800);
  font-weight: var(--fw-semibold);
}
.player-lesson--locked { color: var(--ink-400); cursor: not-allowed; }
.player-lesson-dur { margin-left: auto; flex: none; font-size: var(--fs-3xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.lesson-tabs { margin-bottom: var(--sp-6); }

.resource-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.resource-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  margin: 0;
  transition: all var(--t-fast) var(--ease-out);
}
.resource-item:hover { border-color: var(--plum-300); background: var(--plum-050); color: inherit; }
.resource-icon {
  flex: none;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.resource-item strong { display: block; font-size: var(--fs-sm); }
.resource-item span { font-size: var(--fs-3xs); color: var(--text-muted); }
.resource-dl { margin-left: auto; flex: none; color: var(--plum-600); font-size: var(--fs-sm); }

/* ==========================================================================
   8. Account / subscription
   ========================================================================== */

.settings-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: start;
}
.settings-nav {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-5));
  display: grid;
  gap: var(--sp-1);
}
.settings-nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease-out);
}
.settings-nav a:hover { background: var(--surface-sunken); color: var(--text-primary); }
.settings-nav a[aria-current="page"],
.settings-nav a.is-active {
  background: var(--plum-050);
  color: var(--plum-800);
  font-weight: var(--fw-semibold);
  box-shadow: inset 2px 0 0 var(--plum-700);
}

.plan-status-card {
  position: relative;
  overflow: hidden;
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--grad-plum-deep);
  color: var(--text-on-dark);
  border: 1px solid var(--plum-600);
}
.plan-status-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 92% 8%, rgba(176, 141, 87, 0.24), transparent 46%);
  pointer-events: none;
}
.plan-status-card > * { position: relative; }
.plan-status-card h2 { color: var(--white); font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.plan-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-5);
  margin: var(--sp-5) 0;
  padding: var(--sp-5) 0;
  border-block: 1px solid rgba(255, 255, 255, 0.14);
}
.plan-status-grid dt {
  font-size: var(--fs-3xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: var(--sp-2);
}
.plan-status-grid dd {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.owned-product {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-5);
  border: 1px solid var(--gold-300);
  border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--gold-100), var(--white) 62%);
}
.owned-product-mark {
  flex: none;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--grad-gold);
  color: var(--plum-900);
  font-size: 1.2rem;
}
.owned-product h3 { font-size: var(--fs-base); margin-bottom: 2px; }
.owned-product p { font-size: var(--fs-2xs); color: var(--text-secondary); margin: 0; }