/* ============================================
   SIDEBAR
   ============================================ */
.sidebar-header {
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}

.sidebar-progress-summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sidebar-progress-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--weight-medium);
}

.sidebar-progress-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.sidebar-nav {
  padding: var(--space-3) 0;
}

.sidebar-module {
  border-bottom: 1px solid var(--border-primary);
}

.sidebar-module:last-child {
  border-bottom: none;
}

.sidebar-module-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  transition: background var(--transition-fast);
}

.sidebar-module-header:hover {
  background: var(--bg-tertiary);
}

.sidebar-module-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.sidebar-module-number {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: var(--weight-medium);
}

.sidebar-module-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.sidebar-chevron {
  color: var(--text-tertiary);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.sidebar-module.expanded .sidebar-chevron {
  transform: rotate(90deg);
}

.sidebar-topics {
  padding: 0 var(--space-4) var(--space-3);
}

.sidebar-topic {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  margin-left: var(--space-6);
}

.sidebar-topic:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.sidebar-topic.active {
  background: var(--primary);
  color: white;
}

[data-theme="dark"] .sidebar-topic.active {
  background: var(--primary-dark);
}

.sidebar-topic.completed .sidebar-topic-indicator svg {
  color: var(--color-success);
}

.sidebar-topic-indicator {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.sidebar-topic-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-secondary);
}

.sidebar-topic.active .sidebar-topic-dot {
  background: white;
}

.sidebar-topic-title {
  line-height: var(--leading-tight);
}

/* ============================================
   DASHBOARD
   ============================================ */
.dashboard {
  max-width: 900px;
}

.dashboard-hero {
  text-align: center;
  padding: var(--space-12) 0 var(--space-8);
}

.dashboard-eyebrow {
  display: inline-flex;
  align-items: center;
  background: var(--amber);
  color: white;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  padding: 4px 12px;
  border-radius: var(--r-full);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.dashboard-title {
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.dashboard-subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.dashboard-stats {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
}

.dashboard-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dashboard-stat-value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--primary);
}

[data-theme="dark"] .dashboard-stat-value {
  color: var(--color-indigo-light);
}

.dashboard-stat-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.dashboard-section-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-5);
}

.module-cards {
  display: grid;
  gap: var(--space-4);
}

.module-card {
  display: block;
  padding: var(--space-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-fast);
  text-decoration: none;
  color: inherit;
}

.module-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border-secondary);
  color: inherit;
}

.module-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.module-card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--module-color) 12%, transparent);
  border-radius: var(--r-full);
  color: var(--module-color);
  flex-shrink: 0;
}

.module-card-number {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.module-card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

.module-card-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.module-card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.module-card-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.module-card-progress-fill {
  height: 100%;
  background: var(--module-color);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.module-card-progress-text {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}

.dashboard-cta {
  text-align: center;
  padding: var(--space-8) 0;
}

.dashboard-cta-text {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  max-width: 500px;
  margin: 0 auto;
}

/* ============================================
   TOPIC VIEW
   ============================================ */
.topic-view {
  padding-bottom: var(--space-12);
}

.topic-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.topic-breadcrumb a {
  color: var(--text-tertiary);
}

.topic-breadcrumb a:hover {
  color: var(--text-primary);
}

.topic-header {
  margin-bottom: var(--space-8);
}

.topic-header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.topic-module-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.topic-time {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.topic-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: var(--leading-tight);
}

.topic-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* ============================================
   CONCEPT SECTIONS (ACCORDION)
   ============================================ */
.concept-section {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.concept-section.expandable .concept-header {
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  text-align: left;
  transition: background var(--transition-fast);
}

.concept-section.expandable .concept-header:hover {
  background: var(--bg-secondary);
}

.concept-section:not(.expandable) {
  padding: var(--space-5) var(--space-6);
}

.concept-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.concept-chevron {
  color: var(--text-tertiary);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.concept-section.open .concept-chevron {
  transform: rotate(180deg);
}

.concept-body {
  padding: 0 var(--space-6) var(--space-6);
}

.concept-content {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.concept-content p {
  margin-bottom: var(--space-4);
}

.concept-content p:last-child {
  margin-bottom: 0;
}

.concept-content strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.concept-content ul, .concept-content ol {
  margin: var(--space-3) 0;
  padding-left: var(--space-6);
}

.concept-content li {
  margin-bottom: var(--space-2);
}

/* ============================================
   CALLOUT BOXES
   ============================================ */
.callout {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border-left: 4px solid;
}

.callout--key-insight {
  background: var(--color-info-bg);
  border-color: var(--color-info);
}

.callout--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
}

.callout--example {
  background: var(--color-success-bg);
  border-color: var(--color-success);
}

.callout--tip {
  background: var(--color-info-bg);
  border-color: var(--color-indigo);
}

.callout-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.callout--key-insight .callout-icon { color: var(--color-info); }
.callout--warning .callout-icon { color: var(--color-warning); }
.callout--example .callout-icon { color: var(--color-success); }
.callout--tip .callout-icon { color: var(--color-indigo); }

.callout-title {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  margin-bottom: var(--space-1);
}

.callout-text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* ============================================
   QUIZZES
   ============================================ */
.quiz-block {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.quiz-header {
  margin-bottom: var(--space-4);
}

.quiz-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-indigo);
  background: color-mix(in srgb, var(--color-indigo) 10%, transparent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.quiz-question {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-4);
  line-height: var(--leading-relaxed);
}

.quiz-hint-text {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-4);
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-md);
  text-align: left;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.quiz-option:hover:not(.correct):not(.incorrect) {
  border-color: var(--color-indigo);
  background: color-mix(in srgb, var(--color-indigo) 5%, transparent);
}

.quiz-option.selected {
  border-color: var(--color-indigo);
  background: color-mix(in srgb, var(--color-indigo) 8%, transparent);
}

.quiz-option.correct {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}

.quiz-option.incorrect {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}

.quiz-option-letter {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.quiz-option.selected .quiz-option-letter {
  background: var(--color-indigo);
  color: white;
}

.quiz-option.correct .quiz-option-letter {
  background: var(--color-success);
  color: white;
}

.quiz-option.incorrect .quiz-option-letter {
  background: var(--color-error);
  color: white;
}

.quiz-option-text {
  flex: 1;
  font-size: var(--text-sm);
}

.quiz-actions {
  display: flex;
  gap: var(--space-3);
}

.quiz-check-btn {
  padding: var(--space-2) var(--space-5);
  background: var(--primary);
  color: white;
  border-radius: var(--r-full);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.quiz-check-btn:hover:not(:disabled) {
  background: var(--primary-dark);
}

.quiz-check-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quiz-retry-btn {
  padding: var(--space-2) var(--space-5);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.quiz-retry-btn:hover {
  background: var(--border-primary);
}

.quiz-explanation {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-success-bg);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-success);
}

.quiz-explanation-content {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

/* Matching connections: colours inherit the website palette. */
.match-board { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1.3fr); isolation: isolate; margin-bottom: var(--space-4); }
.match-column { display: grid; grid-auto-rows: 1fr; gap: var(--space-3); z-index: 1; }
.match-right { grid-column: 3; }
.match-card { position: relative; min-width: 0; min-height: 88px; padding: var(--space-3) var(--space-4); text-align: left; font: inherit; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border-secondary); border-radius: var(--radius-md); cursor: pointer; overflow-wrap: anywhere; }
.match-card.is-linked { border-color: var(--match-color); }
.match-card[aria-pressed="true"] { outline: 2px solid var(--color-indigo); outline-offset: 3px; background: color-mix(in srgb, var(--color-indigo) 10%, var(--bg-primary)); }
.match-card:focus-visible { outline: 3px solid var(--text-primary); outline-offset: 3px; }
.match-dot { position: absolute; top: calc(50% - 9px); width: 18px; height: 18px; border: 2px solid var(--match-color, var(--color-indigo)); border-radius: var(--radius-full); background: var(--bg-primary); touch-action: none; cursor: crosshair; }
.match-dot::after { content: ''; position: absolute; inset: -13px; }
.match-left .match-dot { right: -10px; }
.match-right .match-dot { left: -10px; }
.match-card.is-linked .match-dot { background: var(--match-color); }
.match-pair-label { display: block; margin-bottom: var(--space-1); font-size: var(--text-xs); color: var(--text-secondary); }
.match-card.is-linked .match-pair-label { color: var(--match-color); }
.match-feedback { display: block; margin-top: var(--space-2); }
.match-feedback:empty { display: none; }
.match-feedback.is-incorrect { color: var(--color-error); font-weight: var(--weight-semibold); }
.match-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.match-line { fill: none; stroke: var(--match-color); stroke-width: 2.5; }
.match-line.is-pending { stroke-dasharray: 5 5; }
.match-count, .match-status { font-size: var(--text-sm); color: var(--text-secondary); }
.match-status { margin-top: var(--space-3); }
.match-color-indigo { --match-color: var(--color-indigo); }
.match-color-amber { --match-color: var(--color-amber); }
.match-color-purple { --match-color: var(--color-purple); }
.match-color-emerald { --match-color: var(--color-emerald); }
.match-color-sky { --match-color: var(--color-sky); }
.match-color-rose { --match-color: var(--color-rose); }
[data-theme="dark"] .match-color-indigo { --match-color: var(--color-indigo-light); }
[data-theme="dark"] .match-color-amber { --match-color: var(--color-amber-light); }
[data-theme="dark"] .match-color-purple { --match-color: var(--color-purple-light); }
[data-theme="dark"] .match-color-emerald { --match-color: var(--color-emerald-light); }
[data-theme="dark"] .match-color-sky { --match-color: var(--color-sky-light); }
[data-theme="dark"] .match-color-rose { --match-color: var(--color-rose-light); }
@media (max-width: 600px) {
  .match-board { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.2fr); }
  .match-card { padding: var(--space-3) var(--space-2); }
}

/* ============================================
   EXERCISES
   ============================================ */
.exercise-block {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.exercise-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.exercise-header-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
}

.exercise-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.exercise-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-amber);
  background: color-mix(in srgb, var(--color-amber) 10%, transparent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.exercise-prompt {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.exercise-hints {
  margin-bottom: var(--space-4);
}

.exercise-hints-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-indigo);
  font-weight: var(--weight-medium);
}

[data-theme="dark"] .exercise-hints-toggle {
  color: var(--color-indigo-light);
}

.exercise-hints-list {
  margin-top: var(--space-2);
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.exercise-hints-list li {
  margin-bottom: var(--space-1);
}

.exercise-textarea {
  width: 100%;
  padding: var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  resize: vertical;
  min-height: 160px;
  transition: border-color var(--transition-fast);
}

.exercise-textarea:focus {
  outline: none;
  border-color: var(--color-indigo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-indigo) 15%, transparent);
}

.exercise-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
}

.exercise-footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.exercise-word-count, .exercise-saved-time {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.exercise-reset-btn {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.exercise-reset-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

/* ============================================
   TAKEAWAYS
   ============================================ */
.takeaway {
  background: color-mix(in srgb, var(--color-emerald) 6%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--color-emerald) 20%, var(--border-primary));
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
}

.takeaway-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color: var(--color-emerald);
}

[data-theme="dark"] .takeaway-header {
  color: var(--color-emerald-light);
}

.takeaway-title {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.takeaway-list {
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.takeaway-list li {
  margin-bottom: var(--space-2);
}

.takeaway-list li:last-child {
  margin-bottom: 0;
}

/* ============================================
   TOPIC NAVIGATION
   ============================================ */
.topic-complete-section {
  display: flex;
  justify-content: center;
  padding: var(--space-8) 0;
  border-top: 1px solid var(--border-primary);
  margin-top: var(--space-8);
}

.topic-complete-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: transparent;
  border: 2px solid var(--primary);
  border-radius: var(--r-full);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--primary);
  transition: all var(--transition-fast);
}

.topic-complete-btn:hover {
  background: var(--primary);
  color: white;
}

.topic-complete-btn.completed {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.topic-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
}

.topic-nav-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
  transition: all var(--transition-fast);
  max-width: 45%;
}

.topic-nav-btn:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-secondary);
  color: var(--text-primary);
}

.topic-nav-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.topic-nav-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.topic-nav-next {
  text-align: right;
  margin-left: auto;
}

/* ============================================
   DIAGRAMS
   ============================================ */
.diagram {
  margin: var(--space-5) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.diagram-stack {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stack-layer {
  padding: var(--space-4) var(--space-5);
  background: color-mix(in srgb, var(--layer-color) 10%, var(--bg-secondary));
  border-left: 4px solid var(--layer-color);
}

.stack-layer-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.stack-layer-items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.stack-item {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  background: var(--bg-elevated);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
}

.diagram-flow {
  padding: var(--space-5);
  background: var(--bg-secondary);
  overflow-x: auto;
}

.flow-nodes {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: min-content;
}

.flow-node {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: white;
  background: var(--node-color);
  white-space: nowrap;
  flex-shrink: 0;
}

.flow-node--start, .flow-node--end {
  border-radius: var(--radius-full);
}

.flow-node--decision {
  border-radius: var(--radius-sm);
}

.flow-arrow {
  flex-shrink: 0;
}

.diagram-comparison {
  padding: var(--space-4);
  background: var(--bg-secondary);
}

.comparison-columns {
  display: grid;
  grid-template-columns: repeat(var(--col-count), 1fr);
  gap: var(--space-3);
}

@media (max-width: 600px) {
  .comparison-columns {
    grid-template-columns: 1fr;
  }
}

.comparison-column {
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--col-color);
  overflow: hidden;
}

.comparison-column-header {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  color: var(--col-color);
}

.comparison-column-items {
  padding: 0 var(--space-4) var(--space-4);
  list-style: none;
}

.comparison-column-items li {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-primary);
}

.comparison-column-items li:last-child {
  border-bottom: none;
}

.diagram-timeline {
  padding: var(--space-5);
  background: var(--bg-secondary);
  overflow-x: auto;
}

.timeline-track {
  display: flex;
  gap: var(--space-6);
  position: relative;
  padding-top: var(--space-4);
  min-width: min-content;
}

.timeline-track::before {
  content: '';
  position: absolute;
  top: calc(var(--space-4) + 5px);
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-secondary);
}

.timeline-event {
  position: relative;
  flex-shrink: 0;
}

.timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--border-secondary);
  border: 2px solid var(--bg-secondary);
  margin-bottom: var(--space-2);
}

.timeline-event.current .timeline-dot {
  background: var(--color-indigo);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-indigo) 20%, transparent);
}

.timeline-year {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.timeline-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  max-width: 100px;
}

/* ============================================
   PAYOFF MATRIX (NEW)
   ============================================ */
.payoff-matrix-block {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.payoff-matrix-header {
  margin-bottom: var(--space-4);
}

.payoff-matrix-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-amber);
  background: color-mix(in srgb, var(--color-amber) 10%, transparent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.payoff-matrix-title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.payoff-matrix-wrapper {
  overflow-x: auto;
  margin-bottom: var(--space-4);
}

.payoff-matrix-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 400px;
}

.payoff-matrix-table th {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-align: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
}

.payoff-matrix-table th.player-label {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.payoff-matrix-table th.strategy-label {
  color: var(--color-indigo);
}

.payoff-matrix-table td {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  border: 1px solid var(--border-primary);
  font-size: var(--text-sm);
  position: relative;
  min-width: 120px;
}

.payoff-matrix-table td.row-label {
  background: var(--bg-secondary);
  font-weight: var(--weight-semibold);
  color: var(--color-indigo);
  min-width: auto;
}

.payoff-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.payoff-cell .payoff-value {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  min-width: 32px;
}

.payoff-cell .payoff-p1 {
  background: color-mix(in srgb, var(--color-indigo) 12%, transparent);
  color: var(--color-indigo);
}

.payoff-cell .payoff-p2 {
  background: color-mix(in srgb, var(--color-amber) 12%, transparent);
  color: var(--color-amber);
}

.payoff-cell .payoff-separator {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.payoff-matrix-table td.nash-eq {
  background: color-mix(in srgb, var(--color-emerald) 8%, transparent);
  box-shadow: inset 0 0 0 2px var(--color-emerald);
}

.payoff-matrix-table td.dominant {
  background: color-mix(in srgb, var(--color-rose) 6%, transparent);
}

.payoff-legend {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  flex-wrap: wrap;
}

.payoff-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.payoff-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.payoff-matrix-edit-hint {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-2);
  font-style: italic;
}

.payoff-cell input {
  width: 40px;
  padding: 2px 4px;
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  font-family: var(--font-mono);
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color var(--transition-fast);
}

.payoff-cell input:focus {
  outline: none;
  border-color: var(--color-indigo);
}

.payoff-cell input.p1-input {
  color: var(--color-indigo);
}

.payoff-cell input.p2-input {
  color: var(--color-amber);
}

/* ============================================
   STRATEGY SIMULATOR (NEW)
   ============================================ */
.simulator-block {
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.simulator-header {
  margin-bottom: var(--space-4);
}

.simulator-badge {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-rose);
  background: color-mix(in srgb, var(--color-rose) 10%, transparent);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

.simulator-title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}

.simulator-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.simulator-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

@media (max-width: 600px) {
  .simulator-controls {
    grid-template-columns: 1fr;
  }
}

.simulator-control-group label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
}

.strategy-select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.simulator-run-btn {
  padding: var(--space-2) var(--space-6);
  background: var(--primary);
  color: white;
  border-radius: var(--r-full);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.simulator-run-btn:hover {
  background: var(--primary-dark);
}

.simulator-results {
  margin-top: var(--space-4);
}

.simulator-scoreboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.simulator-score-card {
  padding: var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  text-align: center;
}

.simulator-score-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-1);
}

.simulator-score-value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
}

.simulator-score-value.p1 {
  color: var(--color-indigo);
}

.simulator-score-value.p2 {
  color: var(--color-amber);
}

.simulator-rounds {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 400px;
  overflow-y: auto;
}

.simulator-round {
  display: grid;
  grid-template-columns: 40px 1fr 40px 1fr 40px 40px;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

.simulator-round-num {
  font-weight: var(--weight-bold);
  color: var(--text-tertiary);
}

.simulator-round-choice {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  text-align: center;
  font-size: var(--text-xs);
}

.simulator-round-choice.cooperate {
  background: color-mix(in srgb, var(--color-emerald) 15%, transparent);
  color: var(--color-emerald);
}

.simulator-round-choice.defect {
  background: color-mix(in srgb, var(--color-rose) 15%, transparent);
  color: var(--color-rose);
}

.simulator-round-score {
  font-weight: var(--weight-bold);
  text-align: center;
}

.simulator-round-header {
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
}

/* ============================================
   SEARCH OVERLAY
   ============================================ */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.search-modal {
  width: 90%;
  max-width: 600px;
  background: var(--bg-elevated);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  max-height: 60vh;
  display: flex;
  flex-direction: column;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-primary);
}

.search-input-wrap svg {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.search-input-wrap input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: var(--text-base);
}

.search-input-wrap kbd {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border-primary);
  color: var(--text-tertiary);
}

.search-results {
  overflow-y: auto;
  padding: var(--space-2);
}

.search-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.search-group {
  margin-bottom: var(--space-2);
}

.search-group-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  text-decoration: none;
}

.search-group-module {
  font-weight: var(--weight-semibold);
}

.search-group-topic {
  color: var(--text-tertiary);
}

.search-result-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--transition-fast);
}

.search-result-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

.search-result-type {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  margin-top: 2px;
}

.search-result-snippet {
  line-height: var(--leading-normal);
}

.search-result-snippet mark {
  background: color-mix(in srgb, var(--color-amber-light) 30%, transparent);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

/* ============================================
   FLASHCARD OVERLAY
   ============================================ */
.flashcard-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: 200;
  overflow-y: auto;
}

.flashcard-container {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-6);
}

.flashcard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.flashcard-header h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.flashcard-progress {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.flashcard-progress-bar {
  width: 100px;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.flashcard-progress-fill {
  height: 100%;
  background: var(--color-indigo);
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.flashcard-close-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.flashcard-close-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.flashcard-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  margin-bottom: var(--space-4);
}

.flashcard-meta span:first-child {
  font-weight: var(--weight-semibold);
}

.flashcard-meta span:last-child {
  color: var(--text-tertiary);
}

.flashcard-card {
  perspective: 1000px;
  cursor: pointer;
  margin-bottom: var(--space-6);
  min-height: 250px;
}

.flashcard-card-inner {
  position: relative;
  width: 100%;
  min-height: 250px;
  transition: transform 0.5s ease;
  transform-style: preserve-3d;
}

.flashcard-card.flipped .flashcard-card-inner {
  transform: rotateY(180deg);
}

.flashcard-front, .flashcard-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: var(--bg-elevated);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.flashcard-front p, .flashcard-back p {
  font-size: var(--text-lg);
  text-align: center;
  line-height: var(--leading-relaxed);
}

.flashcard-back {
  transform: rotateY(180deg);
  background: var(--bg-secondary);
}

.flashcard-tap-hint {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.flashcard-rating {
  opacity: 0;
  transition: opacity var(--transition-base);
  text-align: center;
}

.flashcard-rating.visible {
  opacity: 1;
}

.flashcard-rating-label {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}

.flashcard-rating-btns {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
}

.fc-rate-btn {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  transition: all var(--transition-fast);
}

.fc-rate-again { background: var(--color-error-bg); color: var(--color-error); }
.fc-rate-hard { background: var(--color-warning-bg); color: var(--color-warning); }
.fc-rate-good { background: var(--color-info-bg); color: var(--color-info); }
.fc-rate-easy { background: var(--color-success-bg); color: var(--color-success); }

.fc-rate-btn:hover {
  filter: brightness(0.95);
  transform: translateY(-1px);
}

.flashcard-empty {
  text-align: center;
  padding: var(--space-12) 0;
}

.flashcard-empty svg {
  color: var(--color-success);
  margin-bottom: var(--space-4);
}

.flashcard-empty h3 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.flashcard-empty p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.flashcard-loading {
  text-align: center;
  padding: var(--space-12);
  color: var(--text-tertiary);
}

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  color: var(--text-tertiary);
}

.empty-state p {
  font-size: var(--text-lg);
}

/* Retry CTA for topics that didn't finish generating */
.empty-state.missing-topic {
  max-width: 520px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-6);
  color: var(--text-secondary);
}
.missing-topic-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: color-mix(in srgb, #D97706 12%, transparent);
  color: #D97706;
  margin-bottom: var(--space-4);
}
.missing-topic-title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 var(--space-3);
}
.missing-topic-body {
  font-size: var(--text-base);
  line-height: 1.55;
  margin: 0 0 var(--space-6);
}
.missing-topic-actions {
  display: inline-flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.missing-topic .library-card-action { height: 40px; padding: 0 var(--space-5); font-size: var(--font-sm); }
.missing-topic-note {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin: 0;
}

/* ============================================
   AI CHAT PANEL
   ============================================ */
#selection-popup {
  position: fixed;
  z-index: 400;
  display: none;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
  user-select: none;
  pointer-events: all;
}

#selection-popup::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-bottom: none;
  border-top-color: var(--primary);
}

#selection-popup:hover {
  background: var(--primary-dark);
}

#chat-panel {
  position: fixed;
  top: var(--header-height);
  right: 0;
  bottom: 0;
  width: 380px;
  background: var(--bg-primary);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 32px rgba(0,0,0,0.07);
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 150;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#chat-panel.open {
  transform: translateX(0);
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  height: 52px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.chat-header-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.chat-header-title svg {
  color: var(--primary);
}

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.chat-header-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.chat-header-btn:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.chat-settings-btn.has-key {
  color: var(--color-emerald);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.chat-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-10) var(--space-4);
  color: var(--text-tertiary);
  margin: auto 0;
}

.chat-welcome svg {
  opacity: 0.35;
}

.chat-welcome p {
  font-size: var(--text-sm);
  line-height: 1.65;
  max-width: 260px;
}

.chat-context-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 8px;
  padding: var(--space-3);
  flex-shrink: 0;
}

.chat-context-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin-bottom: var(--space-2);
}

.chat-context-text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
}

.chat-msg {
  max-width: 94%;
  font-size: var(--text-sm);
  line-height: 1.65;
}

.chat-msg--user {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  border-radius: 12px;
  border-bottom-right-radius: 3px;
}

.chat-msg--ai {
  align-self: flex-start;
  color: var(--text-primary);
}

.chat-msg--ai p {
  margin: 0 0 var(--space-2);
}

.chat-msg--ai p:last-child,
.chat-msg--ai ul:last-child,
.chat-msg--ai ol:last-child {
  margin-bottom: 0;
}

.chat-msg--ai ul,
.chat-msg--ai ol {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-5);
}

.chat-msg--ai li {
  margin-bottom: 3px;
}

.chat-msg--ai strong {
  font-weight: 600;
  color: var(--text-primary);
}

.chat-inline-code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--primary);
}

.chat-error {
  color: var(--color-rose);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.chat-cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--primary);
  border-radius: 1px;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 0.9s step-end infinite;
}

.chat-key-prompt {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: var(--space-4);
  flex-shrink: 0;
}

.chat-key-prompt-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.chat-key-prompt p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.chat-key-row {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.chat-key-input {
  flex: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12px;
  font-family: var(--font-mono);
  background: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
}

.chat-key-input:focus { border-color: var(--primary); }
.chat-key-input.error { border-color: var(--color-rose); }

.chat-key-save {
  padding: var(--space-2) var(--space-3);
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.chat-key-save:hover { background: var(--primary-dark); }

.chat-key-link {
  font-size: 12px;
  color: var(--primary);
  text-decoration: none;
}

.chat-key-link:hover { text-decoration: underline; }

.chat-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-3);
  flex-shrink: 0;
}

.chat-input-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}

.chat-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  background: var(--bg-secondary);
  color: var(--text-primary);
  resize: none;
  outline: none;
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
  transition: border-color 0.15s, background 0.15s;
}

.chat-input:focus {
  border-color: var(--primary);
  background: var(--bg-primary);
}

.chat-input:disabled { opacity: 0.55; }
.chat-input::placeholder { color: var(--text-tertiary); }

.chat-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, opacity 0.15s;
}

.chat-send-btn:hover:not(:disabled) { background: var(--primary-dark); }
.chat-send-btn:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 768px) {
  .intake-agent-roster {
    grid-template-columns: 1fr;
  }

  #chat-panel {
    width: 100%;
    top: auto;
    height: 72vh;
    transform: translateY(100%);
    border-left: none;
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 32px rgba(0,0,0,0.12);
  }

  #chat-panel.open {
    transform: translateY(0);
  }
}

[data-theme="dark"] .chat-inline-code {
  background: var(--bg-tertiary);
  color: var(--color-indigo-light);
}

[data-theme="dark"] .chat-cursor {
  background: var(--color-indigo-light);
}

/* ============================================
   MOBILE OPTIMISATION
   ============================================ */
@media (max-width: 768px) {
  .dashboard {
    padding: var(--space-6) 0 var(--space-8);
    text-align: center;
  }

  .dashboard-hero {
    padding: var(--space-6) 0 var(--space-6);
  }

  .dashboard-title {
    font-size: var(--text-3xl);
  }

  .dashboard-subtitle {
    font-size: var(--text-base);
    margin-bottom: var(--space-6);
  }

  .dashboard-stats {
    gap: var(--space-5);
    flex-wrap: wrap;
    justify-content: center;
  }

  .dashboard-stat-value {
    font-size: var(--text-2xl);
  }

  .module-cards {
    gap: var(--space-3);
  }

  .module-card {
    padding: var(--space-5);
    border-radius: var(--r-lg);
  }

  .topic-title {
    font-size: var(--text-2xl);
  }

  .topic-breadcrumb {
    overflow: hidden;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .topic-breadcrumb > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .concept-section.expandable .concept-header {
    padding: var(--space-4) var(--space-4);
  }

  .concept-section:not(.expandable) {
    padding: var(--space-4) var(--space-4);
  }

  .concept-body {
    padding: 0 var(--space-4) var(--space-4);
  }

  .concept-content ul,
  .concept-content ol {
    padding-left: var(--space-4);
  }

  .callout {
    padding: var(--space-3) var(--space-4);
    flex-direction: row;
  }

  .diagram-flow,
  .diagram-stack,
  .diagram-comparison,
  .diagram-timeline {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .flow-nodes {
    min-width: max-content;
  }

  .quiz-block {
    padding: var(--space-4);
  }

  .quiz-options {
    gap: var(--space-2);
  }

  .quiz-option {
    padding: var(--space-3) var(--space-3);
    font-size: var(--text-sm);
  }

  .quiz-actions {
    flex-direction: column;
  }

  .quiz-check-btn,
  .quiz-retry-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .drag-match-container {
    grid-template-columns: 1fr;
  }

  .exercise-block {
    padding: var(--space-4);
  }

  .exercise-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .exercise-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .exercise-textarea {
    min-height: 140px;
    font-size: var(--text-sm);
  }

  .topic-nav {
    flex-direction: column;
    gap: var(--space-3);
  }

  .topic-nav-btn {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }

  .topic-complete-btn {
    width: 100%;
    justify-content: center;
  }

  .flashcard-overlay {
    padding: var(--space-4);
  }

  .flashcard-card {
    height: 220px;
  }

  .payoff-matrix-block,
  .simulator-block {
    padding: var(--space-4);
  }

  .simulator-controls {
    grid-template-columns: 1fr;
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 49;
  }

  .sidebar-overlay.visible {
    display: block;
  }
}

[data-theme="dark"] .chat-msg--user {
  background: #312e81;
}

[data-theme="dark"] #selection-popup {
  background: #312e81;
}

[data-theme="dark"] #selection-popup::after {
  border-top-color: #312e81;
}

[data-theme="dark"] #selection-popup:hover {
  background: #4338CA;
}

/* === Quiz variants: true/false ============================================ */

.quiz-tf-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
}
.quiz-tf-btn {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 2px solid var(--border-primary);
  border-radius: var(--radius-md);
  font: inherit;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.quiz-tf-btn:hover { border-color: var(--color-indigo); }
.quiz-tf-btn.selected { border-color: var(--color-indigo); background: var(--bg-selected, rgba(67, 56, 202, 0.06)); }
.quiz-tf-btn.correct { border-color: var(--color-emerald); background: rgba(5, 150, 105, 0.08); }
.quiz-tf-btn.incorrect { border-color: var(--color-rose); background: rgba(225, 29, 72, 0.08); }
.quiz-tf-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  font-weight: 700;
  flex-shrink: 0;
}
.quiz-tf-btn.correct .quiz-tf-letter { background: var(--color-emerald); color: white; }
.quiz-tf-btn.incorrect .quiz-tf-letter { background: var(--color-rose); color: white; }
.quiz-tf-text { font-weight: 600; font-size: var(--font-base); }

/* === Quiz variants: fill-in-the-blank ==================================== */

.quiz-fib-sentence {
  font-size: var(--font-lg);
  line-height: 1.7;
  color: var(--text-primary);
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}
.quiz-fib-input {
  display: inline-block;
  min-width: 140px;
  padding: var(--space-1) var(--space-2);
  margin: 0 var(--space-1);
  border: none;
  border-bottom: 2px solid var(--color-indigo);
  background: transparent;
  font: inherit;
  font-weight: 700;
  color: var(--color-indigo);
  text-align: center;
}
.quiz-fib-input:focus {
  outline: none;
  border-bottom-color: var(--color-amber);
  color: var(--color-amber);
}
.quiz-fib-input:disabled { color: var(--text-primary); cursor: default; }
.quiz-block.correct .quiz-fib-input { color: var(--color-emerald); border-bottom-color: var(--color-emerald); }
.quiz-block.incorrect .quiz-fib-input { color: var(--color-rose); border-bottom-color: var(--color-rose); }
.quiz-fib-correct {
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-primary);
  font-size: var(--font-sm);
  color: var(--text-secondary);
}

/* === Quiz variants: short-answer ========================================== */

.quiz-sa-input {
  width: 100%;
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-base);
  line-height: 1.6;
  resize: vertical;
  min-height: 110px;
}
.quiz-sa-input:focus {
  outline: none;
  border-color: var(--color-indigo);
  box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.12);
}
.quiz-sa-input:disabled {
  background: var(--bg-secondary);
  cursor: default;
}
.quiz-sa-reveal { background: var(--bg-secondary); }
.quiz-sa-label {
  font-size: var(--font-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}
.quiz-sa-label:first-child { margin-top: 0; }
.quiz-sa-sample {
  padding: var(--space-3);
  background: var(--bg-card);
  border-left: 3px solid var(--color-indigo);
  border-radius: var(--radius-sm);
  line-height: 1.6;
  color: var(--text-primary);
}
.quiz-sa-keypoints {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  line-height: 1.6;
  color: var(--text-secondary);
}
.quiz-sa-keypoints li { margin-bottom: var(--space-1); }

/* === Listen / TTS player ================================================= */

/* Entry button in the topic header */
.tts-listen-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  height: 40px;
  padding: 0 var(--space-4) 0 var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit; font-size: var(--font-sm); font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.tts-listen-btn svg { width: 18px; height: 18px; fill: currentColor; }
.tts-listen-btn:hover {
  border-color: var(--module-color, var(--primary));
  color: var(--module-color, var(--primary));
}

/* Highlight the segment being read */
.tts-speaking {
  background: var(--primary-light, rgba(67,56,202,.10));
  box-shadow: -3px 0 0 var(--tts-accent, var(--primary));
  border-radius: 3px;
  transition: background .2s;
}
[data-theme="dark"] .tts-speaking { background: rgba(99,102,241,.18); }

/* Player container (created on body) */
.tts-player { --tts-accent: #4338CA; }
.tts-player .tts-overlay,
.tts-player .tts-sheet,
.tts-player .tts-mini { display: none; }

/* Full sheet */
.tts-player.open .tts-overlay {
  display: block;
  position: fixed; inset: 0;
  background: rgba(15, 18, 30, .55);
  backdrop-filter: blur(2px);
  z-index: 1000;
  animation: tts-fade .2s ease;
}
.tts-player.open .tts-sheet {
  display: flex; flex-direction: column;
  position: fixed; z-index: 1001;
  left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  max-height: 92vh;
  padding: var(--space-3) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
  background: var(--bg-primary);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 48px rgba(0,0,0,.32);
  animation: tts-slide-up .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes tts-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes tts-slide-up { from { transform: translate(-50%, 100%) } to { transform: translate(-50%, 0) } }

.tts-sheet-top { display: flex; justify-content: space-between; align-items: center; }
.tts-icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--text-secondary); cursor: pointer; border-radius: 999px;
}
.tts-icon-btn:hover { background: var(--bg-secondary); color: var(--text-primary); }
.tts-icon-btn svg { width: 22px; height: 22px; }

/* Cover */
.tts-cover {
  position: relative;
  margin: var(--space-3) auto var(--space-5);
  width: min(78%, 320px); aspect-ratio: 1/1;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--cover-color, #4338CA), color-mix(in srgb, var(--cover-color, #4338CA) 55%, #000));
  color: #fff; overflow: hidden;
  box-shadow: 0 14px 40px color-mix(in srgb, var(--cover-color, #4338CA) 40%, transparent);
}
.tts-cover-icon { opacity: .92; }
.tts-cover-icon svg, .tts-cover-icon use { fill: #fff; }
.tts-cover-wave { position: absolute; bottom: 26px; display: flex; gap: 5px; height: 26px; align-items: flex-end; }
.tts-cover-wave span {
  width: 5px; background: rgba(255,255,255,.85); border-radius: 3px; height: 40%;
}
.tts-player.playing .tts-cover-wave span { animation: tts-eq .9s ease-in-out infinite; }
.tts-cover-wave span:nth-child(2){ animation-delay:.15s } .tts-cover-wave span:nth-child(3){ animation-delay:.3s }
.tts-cover-wave span:nth-child(4){ animation-delay:.45s } .tts-cover-wave span:nth-child(5){ animation-delay:.6s }
@keyframes tts-eq { 0%,100%{height:30%} 50%{height:100%} }

/* Scrubber */
.tts-scrub { padding: var(--space-2) 0; cursor: pointer; touch-action: none; }
.tts-scrub-track { position: relative; height: 5px; border-radius: 3px; background: var(--border-primary); }
.tts-scrub-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; background: var(--tts-accent, var(--primary)); width: 0; }
.tts-scrub-knob { position: absolute; top: 50%; left: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--tts-accent, var(--primary)); transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.tts-times { display: flex; align-items: center; justify-content: space-between; font-size: var(--font-sm); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.tts-speed {
  border: 1px solid var(--border-primary); background: var(--bg-card); color: var(--text-secondary);
  font: inherit; font-size: var(--font-xs); font-weight: 700; height: 28px; padding: 0 var(--space-3);
  border-radius: 999px; cursor: pointer; font-variant-numeric: tabular-nums;
}
.tts-speed:hover { color: var(--text-primary); border-color: var(--tts-accent, var(--primary)); }

/* Transport */
.tts-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-6); margin: var(--space-5) 0 var(--space-4); }
.tts-skip { position: relative; width: 52px; height: 52px; border: none; background: transparent; color: var(--text-primary); cursor: pointer; }
.tts-skip svg { width: 40px; height: 40px; }
.tts-skip-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; padding-top: 3px; }
.tts-skip:hover { color: var(--tts-accent, var(--primary)); }
.tts-bigplay {
  width: 72px; height: 72px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--tts-accent, var(--primary)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--tts-accent, var(--primary)) 45%, transparent);
}
.tts-bigplay svg { width: 34px; height: 34px; fill: #fff; }
.tts-bigplay:active { transform: scale(.96); }

.tts-meta { text-align: center; }
.tts-meta-title { font-size: var(--font-lg); font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.tts-meta-sub { margin-top: var(--space-1); font-size: var(--font-sm); color: var(--text-tertiary); }

/* Mini player */
.tts-player.minimized .tts-mini {
  display: flex; align-items: center; gap: var(--space-2);
  position: fixed; z-index: 1001; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  width: calc(100% - 2*var(--space-4)); max-width: 440px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-2);
  background: var(--bg-card); border: 1px solid var(--border-primary);
  border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.22);
  animation: tts-fade .2s ease;
}
.tts-mini-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-3); border: none; background: transparent; cursor: pointer; text-align: left; padding: 0; }
.tts-mini-cover { flex: none; width: 38px; height: 38px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.tts-mini-cover svg, .tts-mini-cover use { fill: #fff; }
.tts-mini-title { font-size: var(--font-sm); font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tts-mini-toggle { color: var(--tts-accent, var(--primary)); }
.tts-mini-toggle svg { fill: currentColor; }
.tts-mini-bar { position: absolute; left: 12px; right: 12px; bottom: 5px; height: 3px; border-radius: 2px; background: var(--border-primary); overflow: hidden; }
.tts-mini-fill { height: 100%; width: 0; background: var(--tts-accent, var(--primary)); }

/* Voice picker inside the player */
.tts-voice-row {
  display: flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-primary);
}
.tts-voice-ic { width: 18px; height: 18px; color: var(--text-tertiary); flex: none; }
.tts-voice-select {
  flex: 1; min-width: 0;
  height: 38px; padding: 0 var(--space-3);
  border: 1px solid var(--border-primary); border-radius: 10px;
  background: var(--bg-card); color: var(--text-primary);
  font: inherit; font-size: var(--font-sm); cursor: pointer;
}
.tts-voice-select:focus { outline: none; border-color: var(--tts-accent, var(--primary)); }

/* === Account / auth ====================================================== */
#account-trigger.signed-in { color: var(--primary); }

.auth-modal {
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: flex-start; justify-content: center;
  background: rgba(15, 18, 30, .55); backdrop-filter: blur(2px);
  padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.auth-card {
  position: relative; width: 100%; max-width: 400px;
  background: var(--bg-primary); border: 1px solid var(--border-primary);
  border-radius: 16px; padding: var(--space-6);
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
  max-height: calc(100vh - (var(--space-4) * 2));
  max-height: calc(100dvh - (var(--space-4) * 2));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.auth-close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 32px; height: 32px; border: none; background: transparent;
  color: var(--text-tertiary); cursor: pointer; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
}
.auth-close:hover { background: var(--bg-secondary); color: var(--text-primary); }
.auth-title { font-size: var(--font-xl); font-weight: 700; margin: 0 0 var(--space-2); color: var(--text-primary); }
.auth-note { font-size: var(--font-sm); color: var(--text-secondary); line-height: 1.5; margin: 0 0 var(--space-4); }
.auth-email { font-weight: 600; color: var(--text-primary); margin: 0 0 var(--space-2); }
.auth-form { display: flex; flex-direction: column; gap: var(--space-3); }
.auth-input {
  height: 44px; padding: 0 var(--space-3);
  border: 1px solid var(--border-primary); border-radius: 10px;
  background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: var(--font-base);
}
.auth-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light, rgba(67,56,202,.15)); }
.auth-btn {
  height: 44px; padding: 0 var(--space-5); min-width: 140px;
  border: none; border-radius: 10px; cursor: pointer;
  background: var(--primary); color: #fff; font: inherit; font-size: var(--font-base); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start;
}
.auth-form .auth-btn { align-self: stretch; } /* full-width when inside the form */
.auth-btn:hover { background: var(--primary-dark, #3730A3); }
.auth-btn:disabled { opacity: .6; cursor: default; }
.auth-msg { margin-top: var(--space-3); font-size: var(--font-sm); padding: var(--space-3); border-radius: 10px; }
.auth-msg--ok { background: rgba(5,150,105,.1); color: var(--color-emerald, #059669); }
.auth-msg--err { background: rgba(225,29,72,.1); color: var(--color-rose, #E11D48); }

/* === Intake modal (Generate a new course) =============================== */
.intake-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--space-6) var(--space-4);
  overflow-y: auto;
  background: rgba(15,18,30,.55); backdrop-filter: blur(2px);
}
.intake-card {
  position: relative;
  width: 100%; max-width: 560px;
  background: var(--bg-primary);
  border: 1px solid var(--border-primary);
  border-radius: 18px;
  padding: var(--space-8) var(--space-8) var(--space-6);
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
  animation: tts-fade .2s ease;
}
.intake-close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 36px; height: 36px; border: none; background: transparent;
  color: var(--text-tertiary); cursor: pointer; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
}
.intake-close:hover { background: var(--bg-secondary); color: var(--text-primary); }
.intake-title { font-size: var(--font-xl); font-weight: 700; margin: 0 0 var(--space-2); color: var(--text-primary); }
.intake-sub { font-size: var(--font-sm); color: var(--text-secondary); line-height: 1.5; margin: 0 0 var(--space-5); }

.intake-agent-roster {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
}

.intake-agent {
  min-width: 0;
  padding: var(--space-2);
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  opacity: 0.62;
}

.intake-agent.active {
  opacity: 1;
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--bg-card));
}

.intake-agent span,
.intake-agent small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intake-agent span {
  color: var(--text-primary);
  font-size: var(--font-xs);
  font-weight: 800;
}

.intake-agent small {
  margin-top: 2px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 650;
}
.intake-form { display: flex; flex-direction: column; gap: var(--space-4); }
.intake-label { display: flex; flex-direction: column; gap: var(--space-2); }
.intake-label-text {
  font-size: var(--font-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-tertiary);
}
.intake-input {
  width: 100%; padding: var(--space-3); font: inherit; font-size: var(--font-base);
  border: 1px solid var(--border-primary); border-radius: 10px;
  background: var(--bg-card); color: var(--text-primary);
}
.intake-textarea { resize: vertical; min-height: 76px; line-height: 1.55; }
.intake-mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--font-sm); }
.intake-input:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light, rgba(67,56,202,.15));
}
.intake-section { padding: 0; border-top: 1px solid var(--border-primary); }
/* Hide every browser's default ▶ marker — we draw our own chevron */
.intake-section summary { list-style: none; }
.intake-section summary::-webkit-details-marker { display: none; }
.intake-section summary::marker { content: ''; }
.intake-section summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-weight: 600; font-size: var(--font-sm);
  color: var(--text-primary);
  padding: var(--space-4) 0;
  user-select: none;
}
.intake-section summary::after {
  content: '';
  width: 8px; height: 8px;
  margin-left: auto;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: rotate(-45deg);             /* closed → points right */
  transition: transform .18s ease, border-color .18s ease;
}
.intake-section[open] > summary::after { transform: rotate(45deg); } /* open → points down */
.intake-section summary:hover { color: var(--primary); }
.intake-section summary:hover::after { border-color: var(--primary); }
.intake-summary-hint { font-weight: 400; color: var(--text-tertiary); margin-left: var(--space-1); }
.intake-section[open] summary { padding-bottom: var(--space-3); }
.intake-section .intake-label { margin-top: var(--space-3); }
.intake-help { font-size: var(--font-xs); color: var(--text-tertiary); margin: var(--space-1) 0 var(--space-3); }
.intake-help a { color: var(--primary); }
.intake-key-row { border-top: 1px solid var(--border-primary); padding-top: var(--space-4); }
.intake-actions { display: flex; gap: var(--space-3); margin-top: var(--space-2); }
.intake-cancel {
  min-height: 44px; padding: 0 var(--space-4); border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border-primary); background: transparent; color: var(--text-secondary);
  font: inherit; font-size: var(--font-base); font-weight: 500;
  touch-action: manipulation;
}
.intake-cancel:hover { color: var(--text-primary); border-color: var(--text-primary); }
.intake-submit {
  flex: 1; min-height: 44px; padding: 0 var(--space-5); border-radius: 10px; cursor: pointer;
  border: none; background: var(--primary); color: #fff;
  font: inherit; font-size: var(--font-base); font-weight: 600;
  touch-action: manipulation;
}
.intake-submit:hover { background: var(--primary-dark, #3730A3); }
.intake-cancel:disabled,
.intake-submit:disabled,
.intake-cancel[aria-disabled="true"],
.intake-submit[aria-disabled="true"] {
  opacity: .68;
}
.intake-cancel:disabled:not(.is-loading),
.intake-submit:disabled:not(.is-loading) {
  cursor: default;
}
.intake-submit.is-loading,
.intake-cancel.is-loading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  cursor: progress;
}
.intake-submit.is-loading::before,
.intake-cancel.is-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  animation: learnable-spin .75s linear infinite;
  flex: none;
}
.intake-error {
  font-size: var(--font-sm); padding: var(--space-3); border-radius: 10px;
  background: rgba(225,29,72,.1); color: var(--color-rose, #E11D48);
}

/* PDF dropzone + file chips */
.intake-dropzone {
  position: relative;
  display: block;
  border: 1.5px dashed var(--border-primary);
  border-radius: 12px;
  background: var(--bg-secondary);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.intake-dropzone:hover { border-color: var(--primary); }
.intake-dropzone.is-dragging {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--bg-secondary));
}
.intake-file-input {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
}
.intake-dropzone-prompt {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  color: var(--text-secondary);
  pointer-events: none;
}
.intake-dropzone-label { font-size: var(--font-sm); color: var(--text-secondary); }
.intake-dropzone-link { color: var(--primary); text-decoration: underline; }
.intake-dropzone-hint { font-size: var(--font-xs); color: var(--text-tertiary); }

.intake-file-list {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-2);
}
.intake-file-list:empty { display: none; }
.intake-file-chip {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  background: var(--bg-card);
}
.intake-file-chip > svg:first-child { color: var(--primary); flex-shrink: 0; }
.intake-file-meta { flex: 1; min-width: 0; }
.intake-file-name {
  font-size: var(--font-sm); font-weight: 500; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.intake-file-status { font-size: var(--font-xs); color: var(--text-tertiary); }
.intake-file-status--error { color: var(--color-rose, #E11D48); }
.intake-file-remove {
  appearance: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid transparent; background: transparent;
  color: var(--text-tertiary);
  display: inline-flex; align-items: center; justify-content: center;
}
.intake-file-remove:hover { color: var(--text-primary); background: var(--bg-secondary); border-color: var(--border-primary); }

/* Image section in topic — embedded diagrams, charts, screenshots */
.topic-image {
  margin: var(--space-6) 0;
  padding: 0;
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  background: var(--bg-card);
  overflow: hidden;
}
.topic-image img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg-secondary);
}
.topic-image-fallback {
  display: none;
  min-height: 150px;
  padding: var(--space-5);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 8%, transparent), transparent 55%),
    var(--bg-secondary);
  color: var(--text-secondary);
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: var(--space-2);
}
.topic-image--failed img { display: none; }
.topic-image--failed .topic-image-fallback {
  display: flex;
}
.topic-image-fallback-label {
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.topic-image-fallback-text {
  font-size: var(--font-sm);
  line-height: 1.5;
  max-width: 62ch;
}
.topic-image-resolve-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: 7px;
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: var(--font-sm);
  font-weight: 650;
}
.topic-image-resolve-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}
.topic-image-resolve-btn:disabled {
  cursor: progress;
  opacity: 0.68;
}
.topic-image-resolve-status {
  min-height: 18px;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}
.topic-image figcaption {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  border-top: 1px solid var(--border-primary);
}
.topic-image figcaption a {
  color: var(--primary);
  text-decoration: none;
}
.topic-image figcaption a:hover { text-decoration: underline; }
.topic-image-source { color: var(--text-tertiary); font-size: var(--font-xs); }

.diagram-fallback {
  padding: var(--space-5);
  border: 1px dashed var(--border-secondary);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 60%),
    var(--bg-secondary);
}
.diagram-fallback-label {
  margin-bottom: var(--space-1);
  font-size: var(--font-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.diagram-fallback-text {
  color: var(--text-secondary);
  font-size: var(--font-sm);
}

/* Failure log — collapsible "N topics failed" with per-attempt detail */
.intake-failures {
  margin-top: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-rose, #E11D48) 25%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-rose, #E11D48) 6%, transparent);
  overflow: hidden;
}
.intake-failures > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-2);
  color: var(--color-rose, #E11D48);
  font-weight: 600;
  font-size: var(--font-sm);
}
.intake-failures > summary::-webkit-details-marker { display: none; }
.intake-failures > summary::marker { content: ''; }
.intake-failures > summary:hover { background: color-mix(in srgb, var(--color-rose, #E11D48) 10%, transparent); }
.intake-failures-list {
  list-style: none; padding: 0 0 var(--space-2);
  margin: 0;
  max-height: 320px; overflow-y: auto;
  border-top: 1px solid color-mix(in srgb, var(--color-rose, #E11D48) 20%, transparent);
}
.intake-failure {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--color-rose, #E11D48) 12%, transparent);
}
.intake-failure:last-child { border-bottom: none; }
.intake-failure-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
}
.intake-failure-title {
  font-weight: 600; font-size: var(--font-sm);
  color: var(--text-primary);
}
.intake-failure-meta {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  font-family: var(--font-mono, ui-monospace, monospace);
}
.intake-failure-summary {
  font-size: var(--font-xs);
  color: var(--text-secondary);
  margin-top: var(--space-1);
}
.intake-failure-attempts {
  list-style: none; padding: 0; margin: var(--space-2) 0 0;
  font-size: var(--font-xs);
  color: var(--text-secondary);
}
.intake-failure-attempt { margin-bottom: var(--space-1); }
.intake-failure-attempt code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  background: var(--bg-secondary);
  padding: 1px 6px; border-radius: 4px;
  word-break: break-word;
}
.intake-failure-issues {
  margin: var(--space-1) 0 0 var(--space-4);
  padding: 0;
  font-size: 11px;
  color: var(--text-tertiary);
}
.intake-failure-more { font-style: italic; }

/* Run-mode signal — generation now runs through the account-owned cloud workflow. */
.intake-runmode { margin: var(--space-3) 0 var(--space-2); }
.intake-runmode-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 4px var(--space-3);
  border-radius: 999px;
  font-size: var(--font-xs); font-weight: 500;
  border: 1px solid;
}
.intake-runmode-pill--cloud {
  background: color-mix(in srgb, var(--primary, #4338CA) 8%, transparent);
  color: var(--primary, #4338CA);
  border-color: color-mix(in srgb, var(--primary, #4338CA) 25%, transparent);
}

/* Progress view — bar + elapsed time */
.intake-progress {
  margin: var(--space-3) 0 var(--space-2);
}
.intake-progress-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--space-2);
}
.intake-progress-pct {
  font-size: var(--font-xl);
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.intake-progress-elapsed {
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}
.intake-progress-bar {
  height: 8px; border-radius: 999px;
  background: var(--bg-secondary);
  overflow: hidden;
}
.intake-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary, #4338CA), #6366F1);
  border-radius: 999px;
  transition: width .35s ease;
  position: relative;
  overflow: hidden;
}
.intake-progress-fill::after {
  /* Subtle moving shimmer so the user sees the bar is "alive" between events. */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: intake-shimmer 1.6s linear infinite;
}
@keyframes intake-shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Progress view */
.intake-stages {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-5);
}
.intake-stage {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: 10px;
  background: var(--bg-secondary); color: var(--text-tertiary);
  font-size: var(--font-xs); font-weight: 600;
}
.intake-stage-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--border-primary); flex: none;
}
.intake-stage.active { color: var(--text-primary); background: var(--primary-light, rgba(67,56,202,.12)); }
.intake-stage.active .intake-stage-dot { background: var(--primary); animation: tts-eq 1s ease-in-out infinite; }
.intake-stage.done { color: var(--color-emerald, #059669); }
.intake-stage.done .intake-stage-dot { background: var(--color-emerald, #059669); }

.intake-outline-card {
  padding: var(--space-4); border-radius: 12px;
  background: var(--bg-secondary); border: 1px solid var(--border-primary);
  margin-top: var(--space-3);
}
.intake-outline-title { font-size: var(--font-lg); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-1); }
.intake-outline-sub { font-size: var(--font-sm); color: var(--text-secondary); margin-bottom: var(--space-3); line-height: 1.4; }
.intake-outline-list { list-style: none; padding: 0; margin: 0; }
.intake-outline-list li {
  display: flex; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) 0; border-top: 1px solid var(--border-primary);
  font-size: var(--font-sm);
}
.intake-outline-list li:first-child { border-top: none; }
.intake-outline-list li span { color: var(--text-tertiary); font-size: var(--font-xs); white-space: nowrap; }

.intake-review-card {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-lg);
}
.intake-review-card.is-pending {
  border-left-color: var(--color-emerald, #059669);
}
.intake-review-kicker {
  color: var(--text-tertiary);
  font-size: var(--font-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.intake-review-card h3 {
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
  font-size: var(--font-lg);
}
.intake-review-card p {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  line-height: 1.5;
}
.intake-review-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.intake-review-meta span {
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--primary) 8%, var(--bg-card));
  color: var(--text-secondary);
  font-size: var(--font-xs);
  font-weight: 700;
}
.intake-review-history {
  margin: 0 0 var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.intake-review-history strong {
  display: block;
  color: var(--text-tertiary);
  font-size: var(--font-xs);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.intake-review-history ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.intake-review-history li {
  color: var(--text-secondary);
  font-size: var(--font-sm);
  line-height: 1.45;
}
.intake-review-history li span {
  color: var(--text-primary);
  font-weight: 700;
  margin-right: var(--space-2);
}
.intake-review-list {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.intake-review-list section {
  padding: var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.intake-review-list strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--font-sm);
  margin-bottom: var(--space-1);
}
.intake-review-list ul {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  color: var(--text-secondary);
  font-size: var(--font-sm);
  line-height: 1.45;
}
.intake-review-feedback { margin-top: var(--space-4); }
.intake-review-card .intake-actions {
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  align-items: stretch;
}
.intake-review-card .intake-submit,
.intake-review-card .intake-cancel {
  min-height: 50px;
  line-height: 1.2;
  pointer-events: auto;
}
.intake-review-card .intake-submit {
  order: -1;
  flex: 1 0 100%;
}
.intake-review-card .intake-cancel {
  flex: 1 1 180px;
}
.intake-review-status {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-emerald, #059669) 10%, var(--bg-card));
  color: var(--text-primary);
  font-size: var(--font-sm);
  font-weight: 700;
}
.intake-review-status[hidden] { display: none; }

@keyframes learnable-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .intake-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .intake-stage {
    min-width: 0;
    padding: var(--space-2);
  }

  .intake-stage span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Library card "your course" tag */
.library-card--user { position: relative; }
.library-card-tag--mine {
  background: var(--primary-light, rgba(67,56,202,.12));
  color: var(--primary);
  padding: 2px 8px; border-radius: 999px;
  font-size: var(--font-xs); font-weight: 600;
}

/* Delete affordance — hover-revealed × button in the corner of a card you
   own (or, as admin, any user-generated card). */
.library-card-delete {
  position: absolute;
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  color: var(--text-tertiary);
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, color .15s ease, border-color .15s ease, background .15s ease;
  z-index: 2;
}
.library-card:hover .library-card-delete,
.library-card-delete:focus-visible {
  opacity: 1;
}
.library-card-delete:hover {
  color: #fff;
  background: var(--color-rose, #E11D48);
  border-color: var(--color-rose, #E11D48);
}
/* On touch devices there's no hover — keep the × visible at lower opacity. */
@media (hover: none) {
  .library-card-delete { opacity: 0.6; }
}

/* (Settings gear removed — identity now comes from the account button in the
   header, driven by Supabase auth.) */

/* === Account modal sections (provider keys, sync, etc.) ================ */
.auth-section {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-primary);
}
.auth-section-label {
  font-size: var(--font-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-tertiary);
  margin-bottom: var(--space-3);
}
.auth-keyrow { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.auth-provider-key {
  padding: var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  background: var(--bg-secondary);
}
.auth-provider-key + .auth-provider-key { margin-top: var(--space-3); }
.auth-provider-key .auth-help { margin-top: var(--space-2); }
.auth-keymask {
  flex: 1; min-width: 180px;
  padding: var(--space-2) var(--space-3); border-radius: 8px;
  background: var(--bg-secondary); color: var(--text-primary);
  font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--font-sm);
}
.auth-mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--font-sm); }
.auth-keyform { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.auth-keyform .auth-input { flex: 1; min-width: 0; }
.auth-link {
  background: transparent; border: none; padding: 0; cursor: pointer;
  color: var(--primary); font: inherit; font-size: var(--font-sm); font-weight: 500;
}
.auth-link:hover { text-decoration: underline; }
.auth-link--danger { color: var(--color-rose, #E11D48); }
.auth-help { font-size: var(--font-xs); color: var(--text-tertiary); margin-top: var(--space-3); line-height: 1.5; }
.auth-help a { color: var(--primary); }
.auth-btn--compact { min-width: 0; padding: 0 var(--space-4); }
.auth-btn--ghost {
  margin-top: var(--space-5);
  background: transparent;
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
}
.auth-btn--ghost:hover { background: var(--bg-secondary); color: var(--text-primary); }

@media (max-width: 520px) {
  .auth-modal {
    padding: max(var(--space-3), env(safe-area-inset-top)) var(--space-3) max(var(--space-6), env(safe-area-inset-bottom));
  }

  .auth-card {
    max-width: none;
    padding: var(--space-6) var(--space-4);
    max-height: calc(100vh - (var(--space-3) + var(--space-6)));
    max-height: calc(100dvh - (var(--space-3) + var(--space-6)));
  }

  .auth-keyrow {
    align-items: flex-start;
  }

  .auth-keymask {
    flex: 0 1 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .auth-keyform .auth-input {
    flex-basis: 100%;
  }

  .auth-keyform .auth-btn {
    flex: 1 1 128px;
    min-width: 0;
  }
}

/* === Currently-generating jobs on the library ============================ */
.library-section--jobs { margin-bottom: var(--space-6); }
.library-card--job {
  cursor: default;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-card) 100%);
  border: 1px solid var(--border-primary);
}
.library-card--job.is-failed { border-color: rgba(225,29,72,.35); }
.library-card--job.is-interrupted { border-color: rgba(217,119,6,.35); }
.library-card--job.is-partial { border-color: rgba(217,119,6,.45); background: linear-gradient(180deg, color-mix(in srgb, #D97706 4%, var(--bg-card)) 0%, var(--bg-card) 100%); }
.library-card--job .library-card-icon {
  background: var(--accent);
  color: #fff;
}
.library-card--job:not(.is-failed):not(.is-interrupted):not(.is-partial) .library-card-icon svg {
  animation: jobspin 4s linear infinite;
}
@keyframes jobspin { from { transform: rotate(0) } to { transform: rotate(360deg) } }

.library-card-progress { margin-top: var(--space-3); }
.library-card-progress-bar {
  height: 4px; border-radius: 2px; background: var(--border-primary); overflow: hidden;
}
.library-card-progress-fill {
  height: 100%; background: var(--accent);
  transition: width .3s ease;
}

.library-card--job .library-card-meta { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.library-card-action {
  appearance: none; cursor: pointer;
  height: 32px; padding: 0 var(--space-3);
  border-radius: 999px; border: 1px solid transparent;
  background: var(--accent); color: #fff;
  font: inherit; font-size: var(--font-xs); font-weight: 600;
}
.library-card-action:hover { filter: brightness(1.08); }
.library-card-action--ghost {
  background: transparent; color: var(--text-secondary);
  border-color: var(--border-primary);
}
.library-card-action--ghost:hover { color: var(--text-primary); border-color: var(--text-primary); }
.library-card-action--ghost[aria-disabled="true"] { opacity: .6; cursor: default; }

.library-card-action--danger {
  background: transparent;
  color: var(--color-rose, #E11D48);
  border-color: color-mix(in srgb, var(--color-rose, #E11D48) 30%, transparent);
}
.library-card-action--danger:hover {
  background: var(--color-rose, #E11D48);
  color: #fff;
  border-color: var(--color-rose, #E11D48);
  filter: none;
}

/* Progress modal "Cancel generation" — same danger treatment for the wider
   intake-cancel pill so the destructive action reads clearly. */
.intake-cancel--danger {
  color: var(--color-rose, #E11D48);
  border-color: color-mix(in srgb, var(--color-rose, #E11D48) 30%, transparent);
}
.intake-cancel--danger:hover {
  color: #fff;
  background: var(--color-rose, #E11D48);
  border-color: var(--color-rose, #E11D48);
}

/* Emoji variant of the library card icon */
.library-card-icon--emoji {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 30px; line-height: 1;
  background: color-mix(in srgb, var(--accent, var(--primary)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--primary)) 22%, transparent);
}

/* Poolside practice cards */
.practice-block {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #0891b2 35%, var(--border-primary));
  border-radius: 16px;
  background: var(--bg-card);
}
.practice-safety {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: #fff7ed;
  border-bottom: 1px solid #fed7aa;
  color: #9a3412;
  font-size: var(--font-sm);
  line-height: 1.45;
}
[data-theme="dark"] .practice-safety {
  background: #431407;
  border-color: #9a3412;
  color: #ffedd5;
}
.practice-safety strong { flex: none; }
.practice-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5);
  background: linear-gradient(145deg, color-mix(in srgb, #06b6d4 12%, var(--bg-card)), var(--bg-card) 65%);
}
.practice-eyebrow {
  display: block;
  margin-bottom: var(--space-1);
  color: #0e7490;
  font-size: var(--font-xs);
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.practice-header h3 {
  margin-bottom: var(--space-2);
  font-size: var(--font-xl);
}
.practice-header p {
  max-width: 54ch;
  color: var(--text-secondary);
  line-height: 1.55;
}
.practice-timer {
  flex: none;
  min-width: 166px;
  padding: var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  background: var(--bg-elevated);
  text-align: center;
}
.practice-timer-value {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--font-2xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.practice-timer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}
.practice-timer-actions button {
  min-height: 36px;
  padding: 0 7px;
  border: 1px solid var(--border-primary);
  border-radius: 7px;
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: var(--font-xs);
  font-weight: 650;
  cursor: pointer;
}
.practice-timer-actions button:first-child {
  border-color: #0891b2;
  background: #0891b2;
  color: white;
}
.practice-timer-actions button:disabled { cursor: default; opacity: .45; }
.practice-prep {
  display: grid;
  grid-template-columns: minmax(180px, .65fr) 1.35fr;
  gap: var(--space-4);
  padding: var(--space-5);
  border-top: 1px solid var(--border-primary);
  border-bottom: 1px solid var(--border-primary);
}
.practice-prep h4,
.practice-readiness h4 {
  margin-bottom: var(--space-2);
  font-size: var(--font-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.practice-prep p,
.practice-compact-list {
  color: var(--text-secondary);
  font-size: var(--font-sm);
  line-height: 1.55;
}
.practice-compact-list { padding-left: var(--space-5); }
.practice-compact-list li + li { margin-top: var(--space-1); }
.practice-steps {
  margin: 0;
  padding: var(--space-2) var(--space-5);
  list-style: none;
}
.practice-steps > li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-primary);
}
.practice-steps > li:last-child { border-bottom: 0; }
.practice-steps > li.is-complete .practice-step-body { opacity: .68; }
.practice-step-check {
  width: 48px;
  height: 48px;
  cursor: pointer;
}
.practice-step-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.practice-step-check > span[aria-hidden] {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 2px solid #0891b2;
  border-radius: 12px;
  background: var(--bg-elevated);
}
.practice-step-check input:checked + span[aria-hidden] {
  background: #0891b2;
}
.practice-step-check input:checked + span[aria-hidden]::after {
  content: "✓";
  color: white;
  font-size: 25px;
  font-weight: 800;
}
.practice-step-check input:focus-visible + span[aria-hidden] {
  outline: 3px solid color-mix(in srgb, #0891b2 35%, transparent);
  outline-offset: 3px;
}
.practice-step-title {
  margin-bottom: var(--space-1);
  font-weight: 750;
}
.practice-step-body > p {
  color: var(--text-secondary);
  line-height: 1.55;
}
.practice-step-body dl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
  font-size: var(--font-sm);
}
.practice-step-body dl div { display: flex; gap: var(--space-1); }
.practice-step-body dt { color: #0e7490; font-weight: 750; }
.practice-step-body dd { color: var(--text-secondary); }
.practice-adjustments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-primary);
  border-bottom: 1px solid var(--border-primary);
}
.practice-adjustments details { padding: var(--space-4); }
.practice-adjustments details + details { border-left: 1px solid var(--border-primary); }
.practice-adjustments summary {
  min-height: 36px;
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: 700;
}
.practice-adjustments details[open] summary { margin-bottom: var(--space-2); }
.practice-stop-details summary { color: #c2410c; }
.practice-readiness { padding: var(--space-5); }
.practice-readiness > p {
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--font-sm);
}
.practice-skill-row {
  display: grid;
  grid-template-columns: 1fr minmax(175px, auto);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-primary);
  font-size: var(--font-sm);
}
.practice-skill-row select {
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: 9px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font: inherit;
}
.practice-save-status {
  min-height: 18px;
  padding: 0 var(--space-5) var(--space-4);
  color: var(--text-tertiary);
  font-size: var(--font-xs);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 640px) {
  .practice-safety,
  .practice-header { flex-direction: column; }
  .practice-timer { width: 100%; }
  .practice-prep,
  .practice-adjustments { grid-template-columns: 1fr; }
  .practice-adjustments details + details {
    border-top: 1px solid var(--border-primary);
    border-left: 0;
  }
  .practice-skill-row { grid-template-columns: 1fr; }
  .practice-skill-row select { width: 100%; }
}

.diagram-fallback {
  padding: var(--space-5);
  border: 1px dashed var(--border-secondary);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 60%),
    var(--bg-secondary);
}

.topic-image[data-src^="data/courses/agentic-ai-dinner/assets/"][data-src$="-illustrated.png"] { width: min(100%, 360px); margin-left: auto; margin-right: auto; }