:root {
  --cb-black: #050708;
  --cb-charcoal: #0E1216;
  --cb-graphite: #151A20;
  --cb-iron: #1F262E;
  --cb-gold: #F5B400;
  --cb-amber: #FFCF3A;
  --cb-orange: #D97812;
  --cb-white: #F4F6F8;
  --cb-gray: #AEB6C2;
  --cb-muted: #737D8A;
  --cb-border: #2C343D;
  --cb-border-gold: #C99300;
  --cb-success: #4CC66A;
  --cb-warning: #FFC400;
  --cb-error: #D64545;
  --cb-radius-sm: 12px;
  --cb-radius-md: 16px;
  --cb-radius-lg: 20px;
  --cb-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

.cb-lms,
.cb-debug-panel {
  color: var(--cb-white);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.cb-lms {
  background:
    radial-gradient(circle at top right, rgba(245, 180, 0, 0.08), transparent 22%),
    linear-gradient(180deg, var(--cb-charcoal) 0%, var(--cb-black) 100%);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow);
  padding: 24px;
  width: 100%;
  box-sizing: border-box;
}

.cb-lms-hero,
.cb-lesson-header,
.cb-quiz-actions,
.cb-lms-layout {
  display: flex;
  gap: 16px;
}

.cb-lms-hero,
.cb-lesson-header {
  align-items: center;
  justify-content: space-between;
}

.cb-lms-layout {
  align-items: flex-start;
  margin-top: 20px;
}

.cb-lms-sidebar {
  width: 300px;
  flex: 0 0 300px;
  background: linear-gradient(180deg, rgba(31, 38, 46, 0.98) 0%, rgba(21, 26, 32, 0.98) 100%);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-md);
  padding: 16px;
}

.cb-lms-main {
  flex: 1 1 auto;
  min-width: 0;
}

.cb-card,
.cb-debug-panel {
  background: linear-gradient(180deg, rgba(21, 26, 32, 0.98) 0%, rgba(14, 18, 22, 0.98) 100%);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 20px;
}

.cb-lesson-nav {
  display: grid;
  gap: 10px;
  margin: 12px 0 16px;
}

.cb-nav-item,
.cb-button {
  width: 100%;
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  background: var(--cb-iron);
  color: var(--cb-white);
  cursor: pointer;
  padding: 12px 14px;
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.cb-nav-item:hover,
.cb-button:hover {
  border-color: var(--cb-border-gold);
  background: #252d36;
  transform: translateY(-1px);
}

.cb-button {
  width: auto;
  text-align: center;
}

.cb-button:not(.cb-button-secondary) {
  background: linear-gradient(180deg, var(--cb-gold) 0%, #d99d00 100%);
  border-color: var(--cb-border-gold);
  color: #111;
  font-weight: 700;
}

.cb-button:not(.cb-button-secondary):hover {
  background: linear-gradient(180deg, var(--cb-amber) 0%, var(--cb-gold) 100%);
}

.cb-nav-item.is-active {
  border-color: var(--cb-border-gold);
  background: linear-gradient(180deg, rgba(245, 180, 0, 0.18) 0%, rgba(31, 38, 46, 0.98) 100%);
}

.cb-nav-item.is-complete::after {
  content: "✓";
  float: right;
  color: var(--cb-success);
  font-weight: 700;
}

.cb-button-secondary {
  background: transparent;
  color: var(--cb-gray);
}

.cb-eyebrow,
.cb-kicker,
.cb-module-summary,
.cb-progress-badge,
.cb-sidebar-title {
  color: var(--cb-gray);
}

.cb-status-badge,
.cb-progress-badge {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--cb-border);
  background: rgba(21, 26, 32, 0.95);
}

.cb-status-pass {
  border-color: var(--cb-success);
  color: var(--cb-white);
}

.cb-status-warn {
  border-color: var(--cb-warning);
  color: var(--cb-white);
}

.cb-content-section + .cb-content-section {
  margin-top: 18px;
}

.cb-content-section h3 {
  margin-bottom: 8px;
  color: var(--cb-white);
}

.cb-content-section p,
.cb-content-section li,
.cb-choice,
.cb-choice label,
.cb-module-summary,
.cb-kicker {
  color: var(--cb-gray);
}

.cb-content-section strong,
.cb-choice strong,
.cb-lesson-title,
.cb-module-title {
  color: var(--cb-white);
}

.cb-content-section ul {
  margin: 0;
  padding-left: 20px;
}

.cb-choice-list {
  display: grid;
  gap: 10px;
}

.cb-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--cb-iron);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  padding: 12px;
}

.cb-choice input[type="radio"] {
  accent-color: var(--cb-gold);
  margin-top: 3px;
}

.cb-answer-feedback {
  margin-top: 8px;
  min-height: 24px;
  font-weight: 700;
}

.cb-answer-feedback.is-correct {
  color: var(--cb-success);
}

.cb-answer-feedback.is-incorrect,
.cb-lms-error {
  color: #ffe0e0;
  background: rgba(214, 69, 69, 0.16);
  border: 1px solid rgba(214, 69, 69, 0.5);
  padding: 12px 14px;
  border-radius: var(--cb-radius-sm);
}

.cb-quiz-panel[hidden] {
  display: none;
}

.cb-json-fallback {
  white-space: pre-wrap;
  background: var(--cb-iron);
  padding: 12px;
  border-radius: var(--cb-radius-sm);
  color: var(--cb-gray);
}

.cb-card a,
.cb-lms a {
  color: var(--cb-amber);
}

@media (max-width: 1100px) {
  .cb-lms-layout {
    flex-direction: column;
  }

  .cb-lms-sidebar {
    width: 100%;
    flex-basis: auto;
  }
}

@media (max-width: 900px) {
  .cb-lms-hero,
  .cb-lesson-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .cb-lms {
    padding: 16px;
  }
}