/* =====================================================
   SPRING BOOT ENGINEERING PLATFORM
   components.css — UI Components Library
   ===================================================== */

/* =====================================================
   DARK MODE TOGGLE BUTTON
   ===================================================== */

.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.theme-toggle-btn:hover {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  transform: scale(1.08);
}

/* Hide sun in light mode, moon in dark mode */
.theme-toggle-btn .icon-sun  { display: none; }
.theme-toggle-btn .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle-btn .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; }

/* =====================================================
   CODE BLOCKS
   ===================================================== */

.code-block {
  position: relative;
  margin: var(--space-8) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-code);
}

.code-block-header,
.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  background: #181825;
  border-bottom: 1px solid #313244;
}

.code-header span {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: #CDD6F4;
  font-weight: 500;
}

.code-block-lang {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #6C7086;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}

.code-block-title {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: #CDD6F4;
  font-weight: 500;
}

.code-block-actions {
  display: flex;
  gap: var(--space-2);
}

.code-copy-btn {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: #6C7086;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid #313244;
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.code-copy-btn:hover {
  color: #CDD6F4;
  border-color: #45475A;
  background: #313244;
}

.code-copy-btn.copied {
  color: #A6E3A1;
  border-color: #A6E3A1;
}

.code-block pre {
  background: var(--color-code-bg);
  padding: var(--space-5) var(--space-6);
  overflow-x: auto;
  margin: 0;
}

.code-block pre::-webkit-scrollbar {
  height: 4px;
}

.code-block pre::-webkit-scrollbar-track {
  background: #181825;
}

.code-block pre::-webkit-scrollbar-thumb {
  background: #45475A;
  border-radius: 2px;
}

.code-block code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-code-text);
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  display: block;
  white-space: pre;
}

/* Syntax highlighting */
.token.keyword { color: var(--color-code-keyword); font-weight: 500; }
.token.string, .token.char { color: var(--color-code-string); }
.token.number { color: var(--color-code-number); }
.token.comment { color: var(--color-code-comment); font-style: italic; }
.token.annotation { color: var(--color-code-annotation); }
.token.type, .token.class-name { color: var(--color-code-type); }
.token.function { color: var(--color-code-function); }
.token.operator { color: #89DCEB; }
.token.punctuation { color: #CDD6F4; }
.token.variable { color: #F38BA8; }

/* Line numbers */
.code-block.line-numbers code {
  counter-reset: line;
}

/* =====================================================
   CALLOUT BOXES
   ===================================================== */

.callout {
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
  border-left: 4px solid;
  display: flex;
  gap: var(--space-4);
}

.callout-icon {
  font-size: var(--text-xl);
  flex-shrink: 0;
  line-height: 1.5;
}

.callout-body {
  flex: 1;
}

.callout-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.callout-body p {
  font-size: var(--text-base) !important;
  margin-bottom: 0 !important;
}

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

.callout.info .callout-title { color: var(--color-accent); }

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

.callout.warning .callout-title { color: #B45309; }

.callout.danger {
  background: var(--color-danger-bg);
  border-color: #DC2626;
  color: var(--color-danger);
}

.callout.danger .callout-title { color: #991B1B; }

.callout.success {
  background: var(--color-success-bg);
  border-color: #16A34A;
  color: var(--color-success);
}

.callout.success .callout-title { color: #166534; }

.callout.production {
  background: #1E1E2E;
  border-color: #CBA6F7;
  color: #CDD6F4;
}

.callout.production .callout-title { color: #CBA6F7; }
.callout.production .callout-body p { color: #BAC2DE; }

/* callout-* hyphenated aliases used in sections 03+ */
.callout.callout-concept {
  background: var(--color-accent-subtle);
  border-color: var(--color-accent);
  color: var(--color-info);
}
.callout.callout-concept .callout-title { color: var(--color-accent); }

.callout.callout-tip {
  background: var(--color-success-bg);
  border-color: #16A34A;
  color: var(--color-success);
}
.callout.callout-tip .callout-title { color: #166534; }

.callout.callout-warning {
  background: var(--color-warning-bg);
  border-color: #D97706;
  color: var(--color-warning);
}
.callout.callout-warning .callout-title { color: #B45309; }

.callout.callout-danger {
  background: var(--color-danger-bg);
  border-color: #DC2626;
  color: var(--color-danger);
}
.callout.callout-danger .callout-title { color: #991B1B; }

/* =====================================================
   CARDS
   ===================================================== */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.card-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-raised);
}

.card-body {
  padding: var(--space-5) var(--space-6);
}

.card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-alt);
}

/* Section cards for homepage */
.section-card {
  background: #FFFFFF;
  background: var(--color-surface);
  border: 1px solid #E2DDD6;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  padding: var(--space-6);
  text-decoration: none !important;
  color: inherit !important;
  display: flex;
  gap: 1rem;
  gap: var(--space-4);
  transition: all 250ms ease;
  transition: all var(--transition-base);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.section-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--card-accent-from), var(--card-accent-to));
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.section-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
  text-decoration: none;
  color: inherit;
}

.section-card:hover::before {
  opacity: 1;
}

.section-card-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  width: 24px;
  flex-shrink: 0;
  padding-top: 2px;
}

.section-card-content {
  flex: 1;
}

.section-card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-size: var(--text-lg);
  font-weight: 700;
  color: #1A1814;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.section-card-desc {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  font-family: var(--font-sans);
  font-size: 14px;
  font-size: var(--text-sm);
  color: #8A8480;
  color: var(--color-text-muted);
  line-height: 1.5;
  line-height: var(--leading-normal);
  margin-bottom: 1rem;
  margin-bottom: var(--space-4);
}

.section-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.section-card-tags {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.tag {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
}

.tag.java { background: var(--color-java-bg); color: var(--color-java); }
.tag.spring { background: var(--color-spring-bg); color: var(--color-spring); }
.tag.advanced { background: var(--color-advanced-bg); color: var(--color-advanced); }
.tag.devops { background: var(--color-devops-bg); color: var(--color-devops); }
.tag.database { background: var(--color-info-bg); color: var(--color-info); }
.tag.security { background: var(--color-danger-bg); color: var(--color-danger); }
.tag.performance { background: var(--color-success-bg); color: var(--color-success); }

.section-card-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.mini-progress-track {
  width: 60px;
  height: 4px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}

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

/* =====================================================
   BUTTONS
   ===================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}

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

.btn-primary {
  background: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: white;
  text-decoration: none;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-bg-alt);
  border-color: var(--color-text-muted);
  text-decoration: none;
  color: var(--color-text-primary);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--color-bg-alt);
  color: var(--color-text-primary);
  text-decoration: none;
}

.btn-success {
  background: #16A34A;
  color: white;
  border-color: #16A34A;
}

.btn-success:hover:not(:disabled) {
  background: #15803D;
  border-color: #15803D;
  color: white;
  text-decoration: none;
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
}

.btn-lg {
  padding: var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

/* =====================================================
   TABS
   ===================================================== */

.tabs {
  margin: var(--space-8) 0;
}

.tab-list {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tab-list::-webkit-scrollbar { display: none; }

.tab-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-3) var(--space-5);
  color: var(--color-text-muted);
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.tab-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-alt);
}

.tab-btn.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
  font-weight: 600;
}

/* Panels are visible by default (no JS = all content readable).
   Once JS marks the group .js-ready, only the .active panel shows. */
.tab-panel {
  padding: var(--space-6) 0;
}

.tabs.js-ready .tab-panel {
  display: none;
}

.tabs.js-ready .tab-panel.active {
  display: block;
}

/* =====================================================
   QUIZ / EXERCISE COMPONENTS
   ===================================================== */

.quiz-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin: var(--space-8) 0;
  box-shadow: var(--shadow-md);
}

.quiz-header {
  background: linear-gradient(135deg, #1E40AF, #3B82F6);
  padding: var(--space-5) var(--space-6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.quiz-header h4 {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  color: white;
  margin: 0;
}

.quiz-badge {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  background: rgba(255,255,255,0.2);
  color: white;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

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

.quiz-question {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-5);
  line-height: var(--leading-relaxed);
}

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

.quiz-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  background: var(--color-surface);
}

.quiz-option:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.quiz-option.selected {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}

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

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

.quiz-option-radio {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  margin-top: 1px;
}

.quiz-option.selected .quiz-option-radio,
.quiz-option.correct .quiz-option-radio {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.quiz-option.correct .quiz-option-radio {
  border-color: #16A34A;
  background: #16A34A;
}

.quiz-option.incorrect .quiz-option-radio {
  border-color: #DC2626;
  background: #DC2626;
}

.quiz-option-radio::after {
  content: '';
  width: 8px;
  height: 8px;
  background: white;
  border-radius: var(--radius-full);
  display: none;
}

.quiz-option.selected .quiz-option-radio::after,
.quiz-option.correct .quiz-option-radio::after,
.quiz-option.incorrect .quiz-option-radio::after {
  display: block;
}

.quiz-option-text {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  flex: 1;
}

.quiz-explanation {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  border: 1px solid var(--color-border);
  margin-top: var(--space-3);
  display: none;
}

.quiz-explanation.visible {
  display: block;
}

.quiz-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding: 0 var(--space-6) var(--space-6);
}

/* ── Simplified quiz structure used in sections 03+ ── */
.quiz-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  padding: var(--space-4) var(--space-6) 0;
}

.quiz-container > .quiz-question {
  padding: var(--space-3) var(--space-6) var(--space-4);
  margin-bottom: 0;
}

.quiz-container > .quiz-options {
  padding: 0 var(--space-6);
  margin-bottom: var(--space-4);
}

.quiz-submit-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: white;
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5);
  margin: 0 var(--space-6) var(--space-5);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.quiz-submit-btn:hover:not(:disabled) {
  background: var(--color-accent-hover);
}

.quiz-submit-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.quiz-container > .quiz-explanation {
  margin: 0 var(--space-6) var(--space-5);
}

/* =====================================================
   CODE EXERCISE
   ===================================================== */

.exercise-container {
  background: #1E1E2E;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin: var(--space-8) 0;
  box-shadow: var(--shadow-code);
}

.exercise-header {
  background: #181825;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #313244;
}

.exercise-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: #CDD6F4;
}

.exercise-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: #6C7086;
  margin-top: 2px;
}

.exercise-badges {
  display: flex;
  gap: var(--space-2);
}

.exercise-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.exercise-badge.difficulty-easy { background: #1E3A2F; color: #A6E3A1; }
.exercise-badge.difficulty-medium { background: #3A2D1E; color: #F9E2AF; }
.exercise-badge.difficulty-hard { background: #3A1E1E; color: #F38BA8; }

.exercise-instructions {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid #313244;
}

.exercise-instructions p {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: #BAC2DE;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.exercise-instructions p:last-child { margin-bottom: 0; }

.exercise-editor {
  position: relative;
}

.exercise-editor textarea {
  width: 100%;
  min-height: 200px;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.7;
  padding: var(--space-5) var(--space-6);
  border: none;
  outline: none;
  resize: vertical;
  tab-size: 4;
}

.exercise-footer {
  background: #181825;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #313244;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.exercise-output {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid #313244;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: #A6E3A1;
  line-height: var(--leading-relaxed);
  display: none;
}

.exercise-output.visible { display: block; }
.exercise-output.error { color: #F38BA8; }

/* =====================================================
   DIAGRAM CONTAINERS
   ===================================================== */

.diagram-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin: var(--space-8) 0;
  box-shadow: var(--shadow-md);
}

.diagram-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.diagram-title::before {
  content: '';
  display: block;
  width: 3px;
  height: 14px;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

.diagram-controls {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

/* =====================================================
   COMPARISON TABLE
   ===================================================== */

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.comparison-table thead tr {
  background: var(--color-accent);
  color: white;
}

.comparison-table th {
  padding: var(--space-4) var(--space-5);
  text-align: left;
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.comparison-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

.comparison-table tbody tr:last-child { border-bottom: none; }

.comparison-table tbody tr:hover {
  background: var(--color-accent-subtle);
}

.comparison-table tbody tr:nth-child(even) {
  background: var(--color-bg-alt);
}

.comparison-table tbody tr:nth-child(even):hover {
  background: var(--color-accent-subtle);
}

.comparison-table td {
  padding: var(--space-4) var(--space-5);
  color: var(--color-text-secondary);
  vertical-align: top;
  line-height: var(--leading-normal);
}

.comparison-table td:first-child {
  font-weight: 600;
  color: var(--color-text-primary);
}

.check-yes { color: #16A34A; }
.check-no { color: #DC2626; }

/* =====================================================
   PROGRESS & COMPLETION
   ===================================================== */

.module-progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

.module-progress-info {
  flex: 1;
}

.module-progress-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}

.module-progress-sub {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.module-progress-bar {
  flex: 1;
  max-width: 200px;
}

.complete-btn {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid #16A34A;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.complete-btn:hover {
  background: #16A34A;
  color: white;
}

.complete-btn.done {
  background: var(--color-success-bg);
  color: var(--color-success);
  cursor: default;
}

/* =====================================================
   CHAPTER NAVIGATION
   ===================================================== */

.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

.chapter-nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  flex: 1;
  max-width: 300px;
  transition: all var(--transition-fast);
}

.chapter-nav-link:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
}

.chapter-nav-link.next {
  flex-direction: row-reverse;
  text-align: right;
  margin-left: auto;
}

.chapter-nav-arrow {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.chapter-nav-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}

.chapter-nav-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
}

/* =====================================================
   TOPIC TABLE OF CONTENTS
   ===================================================== */

.toc {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
}

.toc-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-4);
}

.toc-list {
  list-style: none;
  display: grid;
  gap: var(--space-1);
}

.toc-list li {
  counter-increment: toc-counter;
}

.toc-link {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  transition: color var(--transition-fast);
}

.toc-link:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.toc-link::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
  min-width: 24px;
  font-weight: 600;
}

/* =====================================================
   BADGE COMPONENTS
   ===================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.badge-blue { background: #DBEAFE; color: #1E40AF; }
.badge-green { background: #DCFCE7; color: #166534; }
.badge-amber { background: #FEF3C7; color: #92400E; }
.badge-red { background: #FEE2E2; color: #991B1B; }
.badge-purple { background: #EDE9FE; color: #6D28D9; }
.badge-gray { background: var(--color-bg-alt); color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* =====================================================
   PRODUCTION NOTE PANEL
   ===================================================== */

.production-panel {
  background: #1E1E2E;
  border: 1px solid #313244;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin: var(--space-8) 0;
}

.production-panel-header {
  background: #181825;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid #313244;
}

.production-panel-icon {
  font-size: var(--text-lg);
}

.production-panel-title {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: #CBA6F7;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.production-panel-sub {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: #6C7086;
  margin-left: auto;
}

.production-panel-body {
  padding: var(--space-6);
}

.production-panel-body p {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: #BAC2DE;
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-3);
}

.production-panel-body p:last-child { margin-bottom: 0; }

.production-panel-body ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.production-panel-body ul li {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: #BAC2DE;
  padding-left: var(--space-5);
  position: relative;
  line-height: var(--leading-relaxed);
}

.production-panel-body ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: #CBA6F7;
}

/* =====================================================
   STICKY TABLE OF CONTENTS (right column)
   ===================================================== */

.page-layout-with-toc {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: var(--space-12);
  align-items: start;
}

.sticky-toc {
  position: sticky;
  top: calc(var(--topnav-height) + var(--space-8));
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.sticky-toc-title {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}

.sticky-toc-list {
  list-style: none;
}

.sticky-toc-link {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-1) 0;
  padding-left: var(--space-3);
  border-left: 2px solid transparent;
  transition: all var(--transition-fast);
  line-height: var(--leading-snug);
}

.sticky-toc-link:hover,
.sticky-toc-link.active {
  color: var(--color-accent);
  border-left-color: var(--color-accent);
  text-decoration: none;
}

@media (max-width: 1100px) {
  .page-layout-with-toc {
    grid-template-columns: 1fr;
  }
  .sticky-toc {
    display: none;
  }
}

/* =====================================================
   TOAST NOTIFICATIONS
   ===================================================== */

.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-toast);
}

.toast {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.3s ease;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 320px;
}

.toast.success {
  background: var(--color-success);
  color: white;
}

.toast.info {
  background: var(--color-accent);
  color: white;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* =====================================================
   SHARED SECTION COMPONENTS (sections 03+)
   ===================================================== */

/* Diagram box */
.diagram-box {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) 0;
}
.diagram-title {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  text-align: center;
}

/* Concept grid + cards */
.concept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
.concept-card {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  min-width: 0; /* prevent flex/grid blowout */
  overflow: hidden;
}
.concept-icon {
  font-size: 1.5rem;
  margin-bottom: var(--space-3);
}
.concept-card h4 {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}
.concept-card p {
  font-size: 0.825rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.concept-card code {
  font-size: 0.75rem;
  overflow-wrap: break-word;
  word-break: break-all;
  white-space: normal;
}

/* Pitfall list */
.pitfall-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-6) 0;
}
.pitfall-item {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.pitfall-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.pitfall-severity {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.severity-critical { background: var(--color-danger);  color: #fff; }
.severity-high     { background: var(--color-warning); color: #fff; }
.severity-medium   { background: var(--color-info);    color: #fff; }
.pitfall-name {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.pitfall-desc {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.6;
}

/* Interview Q&A */
.interview-qa {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--color-bg-alt);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.interview-qa.spring-accent {
  border-left-color: var(--color-spring);
}
.interview-q {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.interview-a {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* Section complete banner */
.section-complete-banner {
  background: linear-gradient(135deg, var(--color-spring-tint), var(--color-bg-alt));
  border: 2px solid var(--color-spring);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  text-align: center;
  margin-top: var(--space-12);
}
.section-complete-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
}
.section-complete-banner h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  margin: 0 0 var(--space-3);
  color: var(--color-text-primary);
}
.section-complete-banner p {
  color: var(--color-text-secondary);
  margin: 0 auto var(--space-6);
  max-width: 520px;
}
.section-complete-actions {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  flex-wrap: wrap;
}