/* ═══════════════════════════════════════════════════════════════
   CourseBuilder — Design System
   Based on reference platform visual identity
═══════════════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --cb-blue:        #00415F;   /* Main color — deep teal navy */
  --cb-blue-light:  #EAF2F7;  /* Light tint of main */
  --cb-blue-mid:    #005A7F;   /* Hover shade */
  --cb-yellow:      #E6D2B2;   /* Cream/gold accent (light-button) */
  --cb-yellow-dark: #D4B88E;
  --cb-orange:      #FBBC04;   /* Yellow accent */
  --cb-sidebar-bg:  #00415F;   /* Sidebar = main color */
  --cb-sidebar-w:   240px;
  --cb-surface:     #FFFFFF;
  --cb-bg:          #F5F5F5;   /* Page background */
  --cb-border:      #E8E8E8;
  --cb-text:        #000000;
  --cb-muted:       #A3A3A3;
  --cb-success:     #0FB800;
  --cb-danger:      #DA5742;
  --cb-radius-sm:   11px;
  --cb-radius:      11px;
  --cb-radius-lg:   11px;
  --cb-shadow:      0px 17px 54px -19px #dfdfdf;
  --cb-shadow-md:   0px 17px 54px -12px rgba(0,0,0,.12);
  --transition:     .2s ease;
}

/* ── Reset / Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Nunito', system-ui, -apple-system, sans-serif;
  background: var(--cb-bg);
  color: var(--cb-text);
  min-height: 100vh;
  margin: 0;
}

a { color: var(--cb-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1,h2,h3,h4,h5,h6 { font-weight: 700; color: var(--cb-text); }

/* ── App shell — sidebar + content ─────────────────────────── */
.cb-shell {
  display: flex;
  min-height: 100vh;
}

.cb-sidebar {
  width: var(--cb-sidebar-w);
  min-height: 100vh;
  background: var(--cb-sidebar-bg);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0;
  z-index: 100;
  padding: 0;
  transition: width var(--transition);
}

.cb-sidebar-logo {
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  align-items: center;
  gap: .65rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  text-decoration: none !important;
}
.cb-sidebar-logo .logo-icon {
  width: 36px; height: 36px;
  background: var(--cb-yellow);
  border-radius: var(--cb-radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 900; color: var(--cb-sidebar-bg);
  flex-shrink: 0;
}
.cb-sidebar-logo .logo-text {
  font-size: .95rem; font-weight: 700;
  color: #fff; letter-spacing: .01em;
}

/* ── Sidebar nav ────────────────────────────────────────────── */
.cb-nav {
  padding: .75rem 0;
  flex: 1;
  overflow-y: auto;
}

.cb-nav-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem 1.25rem;
  color: rgba(255,255,255,.65);
  font-size: .88rem;
  font-weight: 500;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  text-decoration: none !important;
  position: relative;
}
.cb-nav-item:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
.cb-nav-item.active {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.cb-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--cb-yellow);
  border-radius: 0 2px 2px 0;
}
.cb-nav-icon { font-size: 1.05rem; min-width: 1.2rem; text-align: center; }

.cb-nav-section {
  padding: .9rem 1.25rem .25rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
}

.cb-sidebar-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: .8rem;
  color: rgba(255,255,255,.4);
}
.cb-sidebar-footer .user-name {
  color: rgba(255,255,255,.75);
  font-weight: 600;
  font-size: .85rem;
}

/* ── Main content area ──────────────────────────────────────── */
.cb-main {
  margin-left: var(--cb-sidebar-w);
  flex: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.cb-topbar {
  background: var(--cb-surface);
  border-bottom: 1px solid var(--cb-border);
  padding: .75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 50;
}
.cb-topbar-title { font-size: 1rem; font-weight: 600; color: var(--cb-text); }

.cb-page {
  padding: 2rem;
  flex: 1;
  max-width: 960px;
  width: 100%;
}

/* ── Cards ──────────────────────────────────────────────────── */
.cb-card {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  overflow: hidden;
}
.cb-card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--cb-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cb-card-body { padding: 1.25rem 1.5rem; }

/* ── Course grid (Courses page) ─────────────────────────────── */
.cb-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.cb-course-card {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit !important;
}
.cb-course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cb-shadow-md);
}
.cb-course-card-banner {
  height: 88px;
  background: linear-gradient(135deg, var(--cb-blue) 0%, var(--cb-blue-mid) 60%, #2B7A9E 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.cb-course-card-body { padding: 1rem 1.1rem; flex: 1; }
.cb-course-card-title { font-size: .95rem; font-weight: 700; margin-bottom: .25rem; }
.cb-course-card-meta { font-size: .75rem; color: var(--cb-muted); }
.cb-course-card-footer {
  padding: .75rem 1.1rem;
  border-top: 1px solid var(--cb-border);
  display: flex;
  gap: .5rem;
}

/* ── Buttons ────────────────────────────────────────────────── */
.cb-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1.1rem;
  border-radius: var(--cb-radius-sm);
  font-size: .875rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  text-decoration: none !important;
  white-space: nowrap;
}
.cb-btn:active { transform: scale(.97); }

.cb-btn-primary {
  background: var(--cb-blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,65,95,.2);
}
.cb-btn-primary:hover { background: var(--cb-blue-mid); color: #fff; }

.cb-btn-yellow {
  background: var(--cb-yellow);
  color: var(--cb-text);
  box-shadow: 0 2px 8px rgba(230,210,178,.4);
  font-weight: 700;
}
.cb-btn-yellow:hover { background: var(--cb-yellow-dark); color: var(--cb-text); }

.cb-btn-ghost {
  background: transparent;
  color: var(--cb-blue);
  border: 1.5px solid var(--cb-blue);
}
.cb-btn-ghost:hover { background: var(--cb-blue-light); color: var(--cb-blue); }

.cb-btn-sm { padding: .35rem .8rem; font-size: .8rem; }
.cb-btn-lg { padding: .75rem 1.75rem; font-size: 1rem; border-radius: var(--cb-radius); }

/* ── Badges ─────────────────────────────────────────────────── */
.cb-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .65rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.cb-badge-blue   { background: var(--cb-blue-light); color: var(--cb-blue); }
.cb-badge-yellow { background: #FFF8DC; color: #92660A; }
.cb-badge-green  { background: #E6F9F2; color: #0FB800; }
.cb-badge-orange { background: #FFF0E8; color: var(--cb-danger); }
.xp-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--cb-yellow);
  color: var(--cb-blue); font-weight: 700; font-size: .78rem;
  padding: .25rem .7rem; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(230,210,178,.4);
}

/* ── Progress bar generic ───────────────────────────────────── */
.cb-progress {
  height: 6px;
  background: var(--cb-border);
  border-radius: 3px;
  overflow: hidden;
}
.cb-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .5s ease;
}
.cb-progress-fill-blue   { background: linear-gradient(90deg, var(--cb-blue), var(--cb-blue-mid)); }
.cb-progress-fill-green  { background: var(--cb-success); }
.cb-progress-fill-yellow { background: linear-gradient(90deg, var(--cb-yellow), var(--cb-orange)); }

/* ── Module / Lesson accordion ──────────────────────────────── */
.cb-module {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  box-shadow: var(--cb-shadow);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
.cb-module-header {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--cb-surface);
  border-bottom: 1px solid var(--cb-border);
}
.cb-module-title { font-size: 1rem; font-weight: 700; margin: 0; }
.cb-module-meta  { font-size: .78rem; color: var(--cb-muted); display: flex; align-items: center; gap: .75rem; }

.cb-module-locked { opacity: .7; }
.cb-module-locked .cb-alert { margin: 1rem 1.5rem; }
.cb-module > .iv-launch { margin: 1rem 1.5rem; }

.cb-lesson {
  border-bottom: 1px solid var(--cb-border);
}
.cb-lesson:last-child { border-bottom: none; }

.cb-lesson-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.5rem;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition);
}
.cb-lesson-header:hover { background: var(--cb-bg); }

.cb-lesson-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cb-blue-light);
  color: var(--cb-blue);
  font-size: .75rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cb-lesson-num.done {
  background: var(--cb-success);
  color: #fff;
}
.cb-lesson-title {
  flex: 1;
  font-size: .9rem;
  font-weight: 600;
  color: var(--cb-text);
}
.cb-lesson-chevron { font-size: .75rem; color: var(--cb-muted); transition: transform var(--transition); }
.cb-lesson-chevron.open { transform: rotate(180deg); }

.cb-lesson-body { padding: 1.25rem 1.5rem; background: var(--cb-bg); }

/* ── Theory typography ──────────────────────────────────────── */
.theory {
  background: var(--cb-surface);
  border-radius: var(--cb-radius-sm);
  padding: 1.25rem 1.5rem;
  font-size: .92rem;
  line-height: 1.7;
  border: 1px solid var(--cb-border);
}
.theory h1,.theory h2,.theory h3,.theory h4 { margin-top: 1.25rem; color: var(--cb-blue); }
.theory pre  { background: #F5F5F5; border-radius: var(--cb-radius-sm); padding: 1rem; overflow-x: auto; font-size: .83rem; }
.theory code { background: #F5F5F5; padding: .1em .4em; border-radius: 4px; font-size: .85em; color: var(--cb-blue); }
.theory blockquote { border-left: 3px solid var(--cb-yellow); padding: .5rem 1rem; background: #FDF8F0; border-radius: 0 var(--cb-radius-sm) var(--cb-radius-sm) 0; color: var(--cb-muted); margin: 1rem 0; }
.theory table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.88rem; }
.theory table th { background: var(--cb-blue-light); color: var(--cb-blue); padding:.5rem .75rem; text-align:left; }
.theory table td { border: 1px solid var(--cb-border); padding:.45rem .75rem; }
.theory table tr:nth-child(even) td { background: #FAFAFA; }

/* ── Quiz card ──────────────────────────────────────────────── */
.quiz-card {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding: 1.5rem;
  margin-top: 1.5rem;
  box-shadow: var(--cb-shadow);
}
.quiz-progress-bar-wrap {
  height: 6px; background: var(--cb-border);
  border-radius: 3px; overflow: hidden; margin-bottom: 1.25rem;
}
.quiz-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cb-blue), var(--cb-blue-mid));
  border-radius: 3px;
  transition: width .4s ease;
}

/* ── Answer options ─────────────────────────────────────────── */
.answer-option {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; text-align: left;
  padding: .75rem 1rem; margin-bottom: .5rem;
  border: 2px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  background: var(--cb-surface);
  cursor: pointer; font-size: .9rem;
  transition: border-color var(--transition), background var(--transition), transform .1s;
  color: var(--cb-text);
}
.answer-option:hover:not(:disabled) {
  border-color: var(--cb-blue); background: var(--cb-blue-light);
  transform: translateX(3px);
}
.answer-option.selected  { border-color: var(--cb-blue); background: var(--cb-blue-light); }
.answer-option.correct   { border-color: var(--cb-success); background: #E6F9E6; color: #0A3622; }
.answer-option.incorrect { border-color: var(--cb-danger);  background: #FEF0F0; color: #58151C; }
.answer-option .opt-icon { font-size: 1rem; min-width: 1.1rem; }

/* ── Explanation box ────────────────────────────────────────── */
.explanation-box {
  margin-top: 1rem; padding: .85rem 1rem;
  border-left: 4px solid var(--cb-blue-mid);
  background: var(--cb-blue-light);
  border-radius: 0 var(--cb-radius-sm) var(--cb-radius-sm) 0;
  font-size: .88rem;
  animation: fadeSlideIn .3s ease;
}
.explanation-box.correct-exp   { border-left-color: var(--cb-success); background: #E6F9F2; }
.explanation-box.incorrect-exp { border-left-color: var(--cb-danger);  background: #FEF0F0; }

/* ── Quiz result screen ─────────────────────────────────────── */
.quiz-result { text-align: center; padding: 1.5rem 1rem; animation: fadeSlideIn .4s ease; }
.quiz-result .score-ring {
  width: 96px; height: 96px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; margin-bottom: .75rem; border: 5px solid;
}
.score-ring.great  { border-color: var(--cb-success); color: var(--cb-success); background: #E6F9F2; }
.score-ring.ok     { border-color: var(--cb-yellow);  color: #B8860B; background: #FFF8DC; }
.score-ring.poor   { border-color: var(--cb-danger);  color: var(--cb-danger);  background: #FEF0F0; }

/* ── Open/fill inputs ───────────────────────────────────────── */
.open-answer, .fill-blank {
  width: 100%;
  border: 2px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  padding: .65rem 1rem;
  font-size: .9rem;
  transition: border-color var(--transition);
  resize: vertical;
  background: var(--cb-surface);
  color: var(--cb-text);
}
.open-answer:focus, .fill-blank:focus { border-color: var(--cb-blue); outline: none; box-shadow: 0 0 0 3px rgba(0,65,95,.1); }

/* ── Build / generation steps ───────────────────────────────── */
.step-list { display: flex; flex-direction: column; gap: .5rem; }
.step-item {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  padding: .85rem 1.1rem;
  display: flex; flex-direction: column; gap: .35rem;
}
.step-item.running { border-left: 3px solid var(--cb-blue); }
.step-item.done    { border-left: 3px solid var(--cb-success); }
.step-item.failed  { border-left: 3px solid var(--cb-danger); }

/* ── Upload drop zone ───────────────────────────────────────── */
.cb-dropzone {
  border: 2.5px dashed var(--cb-border);
  border-radius: var(--cb-radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
  cursor: pointer;
  background: var(--cb-surface);
}
.cb-dropzone:hover, .cb-dropzone.drag-over {
  border-color: var(--cb-blue);
  background: var(--cb-blue-light);
}

/* ── Form inputs ────────────────────────────────────────────── */
.cb-input {
  width: 100%; padding: .6rem .9rem;
  border: 1.5px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  font-size: .9rem; background: var(--cb-surface); color: var(--cb-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cb-input:focus { border-color: var(--cb-blue); outline: none; box-shadow: 0 0 0 3px rgba(0,65,95,.1); }

/* ── Alerts ─────────────────────────────────────────────────── */
.cb-alert { padding: .85rem 1.1rem; border-radius: var(--cb-radius-sm); font-size: .88rem; display: flex; align-items: flex-start; gap: .6rem; }
.cb-alert-success { background: #E6F9F2; border: 1px solid #A3E6C8; color: #0A3622; }
.cb-alert-danger  { background: #FEF0F0; border: 1px solid #FCA5A5; color: #58151C; }
.cb-alert-info    { background: var(--cb-blue-light); border: 1px solid #BAD4F7; color: var(--cb-blue); }
.cb-alert-warning { background: #FFF8DC; border: 1px solid #FFE066; color: #92660A; }

/* ── Animations ─────────────────────────────────────────────── */
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes popIn {
  0%  { transform: scale(.8); opacity: 0; }
  70% { transform: scale(1.1); }
  100%{ transform: scale(1);  opacity: 1; }
}
.pop-in { animation: popIn .3s ease forwards; }

/* ── Blazor error ───────────────────────────────────────────── */
.blazor-error-boundary {
  background: #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2L1 21h22L12 2zm0 3.5L20.5 19h-17L12 5.5zM11 10v4h2v-4h-2zm0 6v2h2v-2h-2z'/%3E%3C/svg%3E") no-repeat 1rem 1.1rem / 1.6rem;
}
.blazor-error-boundary::after { content: "An error has occurred." }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --cb-sidebar-w: 0px; }
  .cb-sidebar { display: none; }
  .cb-main { margin-left: 0; }
  .cb-page { padding: 1rem; }
  .cb-topbar { padding: .65rem 1rem; }
}

/* ── Tutor floating panel ───────────────────────────────────── */
.tutor-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--cb-blue);
  color: #fff;
  font-size: 1.3rem;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,65,95,.4);
  z-index: 200;
  transition: background var(--transition), transform var(--transition);
  display: flex; align-items: center; justify-content: center;
}
.tutor-fab:hover { background: var(--cb-blue-mid); transform: scale(1.08); }
.tutor-fab.active { background: var(--cb-sidebar-bg); }

.tutor-panel {
  position: fixed;
  bottom: 4.5rem;
  right: 1.5rem;
  width: 380px;
  max-height: 560px;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-lg);
  box-shadow: var(--cb-shadow-md);
  display: flex;
  flex-direction: column;
  z-index: 199;
  transform: translateY(20px) scale(.97);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}
.tutor-panel.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: all;
}

.tutor-panel-header {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--cb-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.tutor-messages {
  flex: 1;
  overflow-y: auto;
  padding: .75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  min-height: 0;
}

.tutor-welcome {
  text-align: center;
  padding: 1.25rem .5rem;
  color: var(--cb-text);
}

.tutor-msg { display: flex; }
.tutor-msg.user     { justify-content: flex-end; }
.tutor-msg.assistant { justify-content: flex-start; }

.tutor-msg-bubble {
  max-width: 85%;
  padding: .6rem .85rem;
  border-radius: var(--cb-radius);
  font-size: .875rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.tutor-msg.user .tutor-msg-bubble {
  background: var(--cb-blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.tutor-msg.assistant .tutor-msg-bubble {
  background: var(--cb-bg);
  color: var(--cb-text);
  border: 1px solid var(--cb-border);
  border-bottom-left-radius: 4px;
}
.tutor-msg-bubble.streaming { opacity: .9; }

.tutor-cursor {
  display: inline-block;
  animation: blink .7s step-end infinite;
  color: var(--cb-blue);
  font-weight: 700;
}
@keyframes blink { 50% { opacity: 0; } }

.tutor-input-row {
  display: flex;
  gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--cb-border);
  flex-shrink: 0;
}
.tutor-input-row .cb-input { flex: 1; }

@media (max-width: 480px) {
  .tutor-panel { right: .5rem; left: .5rem; width: auto; }
}

/* ── Exam chat (full-page contrôle test) ───────────────────── */
.exam-page { max-width: 720px; margin: 0 auto; }
.exam-chat-card {
  display: flex;
  flex-direction: column;
  height: 60vh;
  min-height: 420px;
  padding: 0;
  overflow: hidden;
}
.exam-messages { flex: 1; }

/* ── Course Edit ──────────────────────────────────────────── */
.question-edit-card {
  background: var(--cb-bg);
  border: 1px solid var(--cb-border);
  border-radius: var(--cb-radius-sm);
  padding: .7rem .9rem;
  margin-bottom: .5rem;
}
.question-edit-card:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════════
   Interactive player — "Brilliant-style" (iv-*)
═══════════════════════════════════════════════════════════════ */

.iv-player {
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 6rem;
}

/* top bar: close + progress + xp */
.iv-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 0 1rem;
  background: linear-gradient(var(--cb-bg) 70%, transparent);
}
.iv-back {
  border: none;
  background: var(--cb-surface);
  border: 1.5px solid var(--cb-border);
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--cb-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}
.iv-back:hover { color: var(--cb-danger); border-color: var(--cb-danger); }
.iv-progress {
  flex: 1;
  height: 12px;
  background: #e9e9e9;
  border-radius: 999px;
  overflow: hidden;
}
.iv-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cb-success), #3ad14a);
  border-radius: 999px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.iv-xp {
  font-weight: 800;
  font-size: .9rem;
  color: var(--cb-blue);
  background: var(--cb-blue-light);
  padding: .25rem .6rem;
  border-radius: 999px;
  flex-shrink: 0;
}

/* stage: the current screen */
.iv-stage {
  animation: iv-slide-in .35s cubic-bezier(.2,.7,.3,1);
}
@keyframes iv-slide-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.iv-hook {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cb-blue);
  margin-bottom: .75rem;
}
.iv-step-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 1rem;
  line-height: 1.25;
}
.iv-block { margin-bottom: 1.1rem; }
.iv-narrative { font-size: 1.05rem; line-height: 1.65; }
.iv-narrative p:last-child { margin-bottom: 0; }

/* callouts */
.iv-callout {
  display: flex;
  gap: .8rem;
  padding: 1rem 1.1rem;
  border-radius: var(--cb-radius);
  border: 1.5px solid var(--cb-border);
  background: var(--cb-surface);
  line-height: 1.6;
}
.iv-callout-icon { font-size: 1.4rem; line-height: 1.2; flex-shrink: 0; }
.iv-callout-title { font-weight: 800; margin-bottom: .2rem; }
.iv-callout-body p:last-child { margin-bottom: 0; }
.iv-callout-definition { background:#eef6fb; border-color:#cfe6f3; }
.iv-callout-insight    { background:#fff8e6; border-color:#f3e2b0; }
.iv-callout-tip        { background:#eefaf0; border-color:#c7eccf; }
.iv-callout-warning    { background:#fdefec; border-color:#f5cbc1; }
.iv-callout-example    { background:#f3f0fb; border-color:#dcd2f2; }

/* figure */
.iv-figure { margin: 0; text-align: center; }
.iv-figure img { max-width: 100%; border-radius: var(--cb-radius); border: 1.5px solid var(--cb-border); }
.iv-figure figcaption { font-size: .8rem; color: var(--cb-muted); margin-top: .4rem; }

/* reveal */
.iv-reveal {
  border: 1.5px dashed var(--cb-border);
  border-radius: var(--cb-radius);
  overflow: hidden;
}
.iv-reveal.open { border-style: solid; border-color: var(--cb-blue-light); }
.iv-reveal-toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  background: var(--cb-surface);
  border: none;
  padding: .85rem 1rem;
  font-weight: 700;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
  color: var(--cb-text);
}
.iv-reveal-chevron { transition: transform var(--transition); color: var(--cb-muted); }
.iv-reveal.open .iv-reveal-chevron { transform: rotate(180deg); }
.iv-reveal-body { padding: 0 1rem 1rem; line-height: 1.6; }

/* questions */
.iv-question {
  background: var(--cb-surface);
  border: 1.5px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding: 1.15rem 1.2rem;
  box-shadow: var(--cb-shadow);
}
.iv-prompt { font-size: 1.15rem; font-weight: 700; margin: 0 0 1rem; line-height: 1.4; }
.iv-hint { font-size: .8rem; font-weight: 600; color: var(--cb-muted); }

.iv-options { display: flex; flex-direction: column; gap: .6rem; }
.iv-option {
  display: flex; align-items: center; gap: .7rem;
  width: 100%;
  text-align: left;
  background: var(--cb-surface);
  border: 2px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding: .8rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s ease, border-color var(--transition), background var(--transition);
}
.iv-option:hover:not(:disabled) { border-color: var(--cb-blue); transform: translateY(-1px); }
.iv-option:disabled { cursor: default; }
.iv-option-mark {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cb-bg);
  font-size: .9rem; font-weight: 800;
}
.iv-option.sel { border-color: var(--cb-blue); background: var(--cb-blue-light); }
.iv-option.sel .iv-option-mark { background: var(--cb-blue); color: #fff; }
.iv-option.correct { border-color: var(--cb-success); background: #eafaea; }
.iv-option.correct .iv-option-mark { background: var(--cb-success); color: #fff; }
.iv-option.incorrect { border-color: var(--cb-danger); background: #fdeeeb; }
.iv-option.incorrect .iv-option-mark { background: var(--cb-danger); color: #fff; }

/* check button */
.iv-check {
  margin-top: 1rem;
  background: var(--cb-blue);
  color: #fff;
  border: none;
  border-radius: var(--cb-radius);
  padding: .7rem 1.5rem;
  font-weight: 800;
  font-size: .95rem;
  cursor: pointer;
  transition: var(--transition);
}
.iv-check:hover:not(:disabled) { background: var(--cb-blue-mid); }
.iv-check:disabled { opacity: .45; cursor: default; }

/* fill blank */
.iv-fill { font-size: 1.1rem; line-height: 2.1; }
.iv-blank {
  border: none;
  border-bottom: 2.5px solid var(--cb-blue);
  background: var(--cb-blue-light);
  border-radius: 6px 6px 0 0;
  padding: .1rem .5rem;
  font-size: 1rem;
  font-weight: 700;
  min-width: 90px;
  text-align: center;
}
.iv-blank.correct { border-color: var(--cb-success); background:#eafaea; color: var(--cb-success); }
.iv-blank.incorrect { border-color: var(--cb-danger); background:#fdeeeb; color: var(--cb-danger); }

/* ordering */
.iv-order-list { display: flex; flex-direction: column; gap: .5rem; }
.iv-order-item {
  display: flex; align-items: center; gap: .7rem;
  background: var(--cb-bg);
  border: 2px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding: .65rem .85rem;
  font-weight: 600;
}
.iv-order-item.correct { border-color: var(--cb-success); background:#eafaea; }
.iv-order-item.incorrect { border-color: var(--cb-danger); background:#fdeeeb; }
.iv-order-num {
  width: 26px; height: 26px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--cb-blue); color:#fff;
  font-size: .85rem; font-weight: 800;
}
.iv-order-text { flex: 1; }
.iv-order-arrows { display: flex; flex-direction: column; gap: 2px; }
.iv-order-arrows button {
  border: none; background: var(--cb-surface); border: 1px solid var(--cb-border);
  border-radius: 5px; width: 26px; height: 18px; line-height: 1; cursor: pointer;
  color: var(--cb-blue); font-size: .65rem;
}
.iv-order-arrows button:disabled { opacity: .3; cursor: default; }

/* categorize */
.iv-cat-items { display: flex; flex-direction: column; gap: .6rem; }
.iv-cat-item {
  border: 2px solid var(--cb-border);
  border-radius: var(--cb-radius);
  padding: .7rem .85rem;
  background: var(--cb-bg);
}
.iv-cat-item.correct { border-color: var(--cb-success); background:#eafaea; }
.iv-cat-item.incorrect { border-color: var(--cb-danger); background:#fdeeeb; }
.iv-cat-text { font-weight: 700; display: block; margin-bottom: .5rem; }
.iv-cat-choices { display: flex; flex-wrap: wrap; gap: .4rem; }
.iv-chip {
  border: 1.5px solid var(--cb-border);
  background: var(--cb-surface);
  border-radius: 999px;
  padding: .3rem .8rem;
  font-size: .85rem; font-weight: 600;
  cursor: pointer; transition: var(--transition);
}
.iv-chip:hover:not(:disabled) { border-color: var(--cb-blue); }
.iv-chip.sel { background: var(--cb-blue); color: #fff; border-color: var(--cb-blue); }
.iv-chip:disabled { cursor: default; }

/* hotspot */
.iv-hotspot { line-height: 2.2; font-size: 1.1rem; }
.iv-token {
  border: none;
  background: transparent;
  border-bottom: 2px dotted transparent;
  padding: .1rem .15rem;
  font: inherit;
  cursor: pointer;
  border-radius: 4px;
  transition: var(--transition);
}
.iv-token:hover:not(:disabled) { background: var(--cb-blue-light); }
.iv-token.sel { background: var(--cb-blue); color: #fff; }
.iv-token.correct { background:#eafaea; color: var(--cb-success); border-bottom: 2px solid var(--cb-success); font-weight: 700; }
.iv-token.incorrect { background:#fdeeeb; color: var(--cb-danger); border-bottom: 2px solid var(--cb-danger); }

/* explanation */
.iv-explain {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-radius: var(--cb-radius);
  border-left: 4px solid var(--cb-muted);
  background: var(--cb-bg);
  line-height: 1.55;
  font-size: .95rem;
}
.iv-explain.ok { border-left-color: var(--cb-success); background:#f1faf1; }
.iv-explain.no { border-left-color: var(--cb-danger); background:#fdf3f1; }
.iv-explain-head { font-weight: 800; margin-bottom: .25rem; }
.iv-explain.ok .iv-explain-head { color: var(--cb-success); }
.iv-explain.no .iv-explain-head { color: var(--cb-danger); }
.iv-explain p:last-child { margin-bottom: 0; }

/* footer nav */
.iv-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  background: linear-gradient(transparent, var(--cb-bg) 35%);
}
.iv-step-count { font-size: .82rem; color: var(--cb-muted); font-weight: 600; }
.iv-continue {
  background: var(--cb-success);
  color: #fff;
  border: none;
  border-radius: var(--cb-radius);
  padding: .8rem 2rem;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(15,184,0,.6);
  transition: transform .12s ease, background var(--transition);
}
.iv-continue:hover:not(:disabled) { transform: translateY(-2px); }
.iv-continue:disabled { background: var(--cb-muted); box-shadow: none; opacity: .6; cursor: default; }
.iv-continue.primary { background: var(--cb-blue); box-shadow: 0 6px 16px -6px rgba(0,65,95,.5); }

/* completion screen */
.iv-done { text-align: center; padding: 3rem 1rem; }
.iv-done-ring {
  width: 120px; height: 120px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; font-weight: 900; color: #fff;
}
.iv-done-ring.great { background: conic-gradient(var(--cb-success) 100%, #e9e9e9 0); }
.iv-done-ring.ok    { background: conic-gradient(var(--cb-orange) 100%, #e9e9e9 0); }
.iv-done-ring.poor  { background: conic-gradient(var(--cb-danger) 100%, #e9e9e9 0); }
.iv-done-title { font-size: 1.5rem; font-weight: 900; margin-bottom: .35rem; }
.iv-done-sub { color: var(--cb-muted); margin-bottom: 1.5rem; }
.iv-done-actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

.iv-empty {
  text-align: center; color: var(--cb-muted);
  padding: 3rem 1rem; font-size: .95rem;
}

/* lesson cards (map) */
.iv-lesson-card {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--cb-border);
  text-decoration: none !important;
  color: var(--cb-text);
  transition: background var(--transition);
}
.iv-lesson-card:hover { background: var(--cb-blue-light); }
.iv-lesson-card-body { flex: 1; display: flex; flex-direction: column; }
.iv-lesson-card-title { font-weight: 700; }
.iv-lesson-card-meta { font-size: .78rem; color: var(--cb-muted); }
.iv-lesson-card-go { color: var(--cb-blue); font-size: 1.1rem; }

/* launch banner inside classic lesson */
.iv-launch {
  display: flex; align-items: center; gap: .9rem;
  margin: 1rem 0;
  padding: 1rem 1.15rem;
  border-radius: var(--cb-radius);
  background: linear-gradient(120deg, var(--cb-blue), var(--cb-blue-mid));
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 10px 24px -12px rgba(0,65,95,.7);
  transition: transform .15s ease;
}
.iv-launch:hover { transform: translateY(-2px); }
.iv-launch-icon {
  font-size: 1.6rem;
  background: rgba(255,255,255,.18);
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.iv-launch-body { flex: 1; display: flex; flex-direction: column; }
.iv-launch-title { font-weight: 800; font-size: 1.05rem; }
.iv-launch-sub { font-size: .8rem; opacity: .85; }
.iv-launch-go { font-size: 1.2rem; }

@media (max-width: 600px) {
  .iv-step-title { font-size: 1.25rem; }
  .iv-prompt { font-size: 1.05rem; }
}

/* Tutor FAB inside the interactive player — lifted above the fixed footer */
.tutor-fab.iv-fab { bottom: 5.5rem; }
@media (max-width: 600px) {
  .tutor-fab.iv-fab { bottom: 5rem; }
}

/* ── Exam result page ─────────────────────────────────────── */
.exam-result {
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
  background: var(--cb-surface); border: 1px solid var(--cb-border); border-left-width: 6px;
  border-radius: var(--cb-radius); box-shadow: var(--cb-shadow); padding: 1.25rem 1.5rem; margin-bottom: 1rem;
}
.exam-result-pass { border-left-color: var(--cb-success); }
.exam-result-fail { border-left-color: var(--cb-danger); }
.exam-result-text { flex: 1 1 260px; min-width: 0; }
.exam-result-title { font-size: 1.15rem; margin: 0 0 .35rem; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.exam-result-feedback { margin: 0; font-size: .92rem; color: #4A5560; }
.exam-result-score { text-align: right; flex: 0 0 auto; }
.exam-result-score-value { font-size: 2.6rem; font-weight: 700; line-height: 1; color: var(--cb-blue); }
.exam-result-score-max { font-size: 1rem; color: #4A5560; margin-left: .2rem; }
.exam-result-score-hint { font-size: .75rem; color: #6B7680; margin-top: .25rem; }

.exam-why {
  background: var(--cb-blue-light); border-radius: var(--cb-radius); padding: 1rem 1.25rem; margin-bottom: 1rem;
}
.exam-why p { margin: 0; font-size: .92rem; line-height: 1.6; max-width: 65ch; color: var(--cb-text); }
.exam-section-title { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #4A5560; margin: 0 0 .6rem; }

.exam-topics { margin-bottom: 1rem; }
.exam-topic {
  background: var(--cb-surface); border: 1px solid var(--cb-border); border-radius: var(--cb-radius-sm);
  margin-bottom: .5rem; overflow: hidden;
}
.exam-topic-weak { border-color: #F2D9A6; }
.exam-topic-skipped { background: transparent; border-style: dashed; color: #6B7680; }
.exam-topic-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .9rem; row-gap: .5rem;
  padding: .75rem 1rem; cursor: pointer; list-style: none; font-size: .9rem;
}
.exam-topic-bar { grid-column: 1 / -1; display: block; }
.exam-topic-bar .cb-progress { display: block; height: 8px; border-radius: 4px; }
.exam-topic-bar .cb-progress-fill { display: block; border-radius: 4px; }
.exam-topic-head::-webkit-details-marker { display: none; }
.exam-topic-head::before { content: none; }
details.exam-topic > .exam-topic-head:not(.exam-topic-head-static) .exam-topic-name::before {
  content: "▸"; display: inline-block; width: 1rem; color: #6B7680; transition: transform var(--transition);
}
details.exam-topic[open] > .exam-topic-head:not(.exam-topic-head-static) .exam-topic-name::before { transform: rotate(90deg); }
.exam-topic-head-static { cursor: default; }
.exam-topic-head-static .exam-topic-name { padding-left: 1rem; }
.exam-topic-name { font-weight: 500; overflow-wrap: anywhere; }
.exam-topic-score { text-align: right; font-size: .82rem; color: #4A5560; white-space: nowrap; }
.exam-topic-body { padding: 0 1rem .85rem 2rem; font-size: .88rem; line-height: 1.55; color: #333C44; }
.exam-fill-red { background: var(--cb-danger); }

.exam-weak { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.exam-weak-label { font-size: .85rem; color: #4A5560; margin-right: .25rem; }

.exam-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.exam-actions-hint { font-size: .8rem; color: #6B7680; }

@media (max-width: 576px) {
  .exam-result-score { text-align: left; }
}