/* ============================================================
   CREATORZ LMS — Design System v2
   Fonts: Outfit (display) + DM Sans (body) + DM Mono (code)
   Palette: Deep Indigo + Savanna Gold + Night Black
   Layout: CSS Grid + Flexbox ONLY — no HTML tables
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=DM+Sans:wght@400;500;600&family=DM+Mono&display=swap');

/* ── Variables ─────────────────────────────────────────────────────── */
:root {
  --clms-bg:           #0c0c18;
  --clms-surface:      #16162a;
  --clms-surface2:     #1e1e36;
  --clms-surface3:     #272742;
  --clms-border:       rgba(255,255,255,.07);
  --clms-border2:      rgba(255,255,255,.12);
  --clms-primary:      #6c63ff;
  --clms-primary-dark: #4f46e5;
  --clms-primary-glow: rgba(108,99,255,.25);
  --clms-gold:         #f5a623;
  --clms-green:        #22c55e;
  --clms-red:          #ef4444;
  --clms-orange:       #f97316;
  --clms-blue:         #38bdf8;
  --clms-text:         #e8e8f2;
  --clms-text-muted:   #8888aa;
  --clms-radius:       10px;
  --clms-radius-lg:    16px;
  --clms-shadow:       0 4px 24px rgba(0,0,0,.4);
  --clms-shadow-lg:    0 16px 56px rgba(0,0,0,.6);
  --clms-font:         'DM Sans', sans-serif;
  --clms-font-display: 'Outfit', sans-serif;
  --clms-font-mono:    'DM Mono', monospace;
  --sidebar-w:         220px;
  --header-h:          60px;
  --t:                 all .18s ease;
}

/* ── Base Reset ─────────────────────────────────────────────────────── */
.clms-dashboard, .clms-library, .clms-auth-wrap, .clms-waiting-room, .clms-gate {
  font-family: var(--clms-font);
  color: var(--clms-text);
  background: var(--clms-bg);
  min-height: 100vh;
  box-sizing: border-box;
}
.clms-dashboard *, .clms-library *, .clms-auth-wrap * { box-sizing: border-box; }

/* ── TOP HEADER ─────────────────────────────────────────────────────── */
.clms-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  height: var(--header-h);
  background: var(--clms-surface);
  border-bottom: 1px solid var(--clms-border);
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: blur(10px);
}
.clms-logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--clms-font-display);
  font-size: 1.2rem;
  font-weight: 800;
}
.clms-logo em { color: var(--clms-primary); font-style: normal; }
.logo-badge {
  background: var(--clms-primary);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-family: var(--clms-font);
}
.logo-badge.facilitator { background: var(--clms-gold); color: #1a1000; }
.clms-user-chip {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--clms-surface2);
  padding: .35rem .85rem;
  border-radius: 30px;
  font-size: .85rem;
}
.clms-user-chip img { border-radius: 50%; }
.logout-link { color: var(--clms-text-muted); text-decoration: none; font-size: 1rem; }
.logout-link:hover { color: var(--clms-red); }

/* ── KPI STRIP ──────────────────────────────────────────────────────── */
.clms-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: var(--clms-surface);
  border-bottom: 1px solid var(--clms-border);
}
.clms-kpi-card {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: var(--clms-surface2);
  border: 1px solid var(--clms-border);
  border-radius: var(--clms-radius-lg);
  padding: 1rem 1.25rem;
  transition: var(--t);
}
.clms-kpi-card:hover { transform: translateY(-2px); box-shadow: var(--clms-shadow); }
.kpi-icon {
  font-size: 1.6rem;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.clms-kpi-card > div { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.kpi-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--clms-text-muted); white-space: nowrap; }
.kpi-value { font-family: var(--clms-font-display); font-size: 1.35rem; font-weight: 800; }
.clms-kpi-card.green  .kpi-icon { background: rgba(34,197,94,.12); }
.clms-kpi-card.green  .kpi-value { color: var(--clms-green); }
.clms-kpi-card.blue   .kpi-icon { background: rgba(56,189,248,.12); }
.clms-kpi-card.blue   .kpi-value { color: var(--clms-blue); }
.clms-kpi-card.purple .kpi-icon { background: rgba(108,99,255,.12); }
.clms-kpi-card.purple .kpi-value { color: var(--clms-primary); }
.clms-kpi-card.orange .kpi-icon { background: rgba(249,115,22,.12); }
.clms-kpi-card.orange .kpi-value { color: var(--clms-orange); }

/* ── SIDEBAR + CONTENT LAYOUT ───────────────────────────────────────── */
.clms-dash-body {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--header-h) - 90px);
}
.clms-sidebar {
  background: var(--clms-surface);
  border-right: 1px solid var(--clms-border);
  padding: 1.25rem 0;
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
}
.sidebar-section-label {
  padding: .6rem 1.25rem .25rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clms-text-muted);
  margin-top: .5rem;
}
.sidebar-section-label:first-child { margin-top: 0; }
.sidebar-link {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .6rem 1.25rem;
  color: var(--clms-text-muted);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--t);
  border-left: 3px solid transparent;
  user-select: none;
}
.sidebar-link:hover  { background: var(--clms-surface2); color: var(--clms-text); }
.sidebar-link.active { background: rgba(108,99,255,.12); color: var(--clms-primary); border-left-color: var(--clms-primary); font-weight: 600; }
.badge-notif {
  background: var(--clms-gold);
  color: #1a1000;
  font-size: .62rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: auto;
}

/* ── MAIN CONTENT ───────────────────────────────────────────────────── */
.clms-main-content {
  padding: 1.75rem;
  overflow: auto;
  min-width: 0;
}
.clms-panel-page { display: none; }
.clms-panel-page.active { display: block; }
.clms-page-heading { margin-bottom: 1.5rem; }
.clms-page-heading h2 { font-family: var(--clms-font-display); font-size: 1.5rem; font-weight: 800; margin: 0 0 .25rem; }
.clms-page-heading p  { color: var(--clms-text-muted); margin: 0; font-size: .9rem; }

/* ── Quick Actions ──────────────────────────────────────────────────── */
.clms-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: .5rem;
}
.clms-quick-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  padding: 1.25rem;
  background: var(--clms-surface);
  border: 1px solid var(--clms-border);
  border-radius: var(--clms-radius-lg);
  cursor: pointer;
  text-align: left;
  color: var(--clms-text);
  transition: var(--t);
  font-family: var(--clms-font);
}
.clms-quick-btn:hover { border-color: var(--clms-primary); background: rgba(108,99,255,.06); transform: translateY(-2px); box-shadow: var(--clms-shadow); }
.clms-quick-btn span:first-child { font-size: 1.75rem; }
.clms-quick-btn strong { font-size: .95rem; font-weight: 700; }
.clms-quick-btn .qa-sub { font-size: .78rem; color: var(--clms-text-muted); }

/* ── Panel cards ────────────────────────────────────────────────────── */
.clms-panel {
  background: var(--clms-surface);
  border: 1px solid var(--clms-border);
  border-radius: var(--clms-radius-lg);
  overflow: hidden;
}
.clms-panel + .clms-panel { margin-top: 1.25rem; }
.clms-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--clms-border);
  flex-wrap: wrap;
  gap: .75rem;
}
.clms-panel-header h3 { font-family: var(--clms-font-display); font-size: 1rem; font-weight: 700; margin: 0; }
.clms-panel-body { padding: 1.25rem 1.5rem; }
.panel-header-actions { display: flex; align-items: center; gap: .75rem; }

/* ── Ledger Grid ────────────────────────────────────────────────────── */
.clms-table-scroll { overflow-x: auto; }
.clms-ledger-grid {
  display: grid;
  grid-template-columns: 1.4fr 1.8fr 1.1fr 1.8fr 1.1fr 1fr;
  align-items: center;
}
.clms-ledger-header {
  padding: .65rem 1.5rem;
  background: var(--clms-surface2);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--clms-text-muted);
}
.clms-ledger-row {
  padding: .8rem 1.5rem;
  border-bottom: 1px solid var(--clms-border);
  font-size: .85rem;
  transition: var(--t);
}
.clms-ledger-row:last-child { border-bottom: none; }
.clms-ledger-row:hover { background: var(--clms-surface2); }
.clms-ledger-row .amount { color: var(--clms-green); font-weight: 600; }
.clms-ledger-row code { font-family: var(--clms-font-mono); font-size: .75rem; color: var(--clms-text-muted); }

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-success, .badge-published, .badge-approved, .badge-processed { background: rgba(34,197,94,.12); color: var(--clms-green); }
.badge-warning, .badge-pending, .badge-waiting, .badge-draft { background: rgba(249,115,22,.12); color: var(--clms-orange); }
.badge-error, .badge-failed, .badge-rejected { background: rgba(239,68,68,.12); color: var(--clms-red); }
.badge-info, .badge-paid, .badge-completed { background: rgba(56,189,248,.12); color: var(--clms-blue); }

/* ── Buttons ────────────────────────────────────────────────────────── */
.clms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .55rem 1.15rem;
  border-radius: var(--clms-radius);
  font-family: var(--clms-font);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  outline: none;
  transition: var(--t);
  text-decoration: none;
  white-space: nowrap;
}
.clms-btn:disabled { opacity: .45; cursor: not-allowed; }
.clms-btn.full-width { width: 100%; }
.btn-sm { padding: .3rem .7rem !important; font-size: .78rem !important; }

.clms-btn-primary     { background: var(--clms-primary); color: #fff; }
.clms-btn-primary:hover { background: var(--clms-primary-dark); box-shadow: 0 4px 14px var(--clms-primary-glow); transform: translateY(-1px); }
.clms-btn-secondary   { background: var(--clms-surface2); color: var(--clms-text); border: 1px solid var(--clms-border); }
.clms-btn-secondary:hover { background: var(--clms-surface3); }
.clms-btn-ghost       { background: transparent; color: var(--clms-text-muted); border: 1px solid var(--clms-border); }
.clms-btn-ghost:hover { background: var(--clms-surface2); color: var(--clms-text); }
.clms-btn-success     { background: var(--clms-green); color: #fff; }
.clms-btn-success:hover { background: #16a34a; transform: translateY(-1px); }
.clms-btn-danger      { background: var(--clms-red); color: #fff; }
.clms-btn-danger:hover { background: #dc2626; }
.clms-btn-paystack {
  background: linear-gradient(135deg, #011b33 0%, #003d7a 100%);
  color: #fff;
  padding: .85rem 2rem;
  font-size: 1rem;
  border: 1px solid rgba(255,255,255,.12);
}
.clms-btn-paystack:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.45); }

/* ── Forms ──────────────────────────────────────────────────────────── */
.clms-input, .clms-select, .clms-textarea {
  width: 100%;
  background: var(--clms-surface2);
  border: 1px solid var(--clms-border2);
  border-radius: var(--clms-radius);
  color: var(--clms-text);
  font-family: var(--clms-font);
  font-size: .88rem;
  padding: .6rem .95rem;
  outline: none;
  transition: var(--t);
}
.clms-input::placeholder, .clms-textarea::placeholder { color: var(--clms-text-muted); }
.clms-input:focus, .clms-select:focus, .clms-textarea:focus {
  border-color: var(--clms-primary);
  box-shadow: 0 0 0 3px var(--clms-primary-glow);
}
.clms-select {
  appearance: none; cursor: pointer; padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238888aa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .65rem center;
}
.clms-textarea { resize: vertical; line-height: 1.6; }
.clms-field { display: flex; flex-direction: column; gap: .35rem; }
.clms-field label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--clms-text-muted); }
.clms-field .required { color: var(--clms-red); }
.clms-field.full-width { grid-column: 1 / -1; }
.clms-input-with-btn { display: flex; gap: .5rem; }
.clms-input-with-btn .clms-input { flex: 1; }

/* ── CREATOR SUITE ──────────────────────────────────────────────────── */
.creator-suite { }

.creator-tab-bar {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: 1rem 1.5rem .75rem;
  border-bottom: 1px solid var(--clms-border);
  flex-wrap: wrap;
}
.creator-tab {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border: 1px solid var(--clms-border);
  border-radius: var(--clms-radius);
  background: transparent;
  color: var(--clms-text-muted);
  font-family: var(--clms-font);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--t);
}
.creator-tab:hover:not(:disabled) { background: var(--clms-surface2); color: var(--clms-text); }
.creator-tab.active { background: var(--clms-primary); color: #fff; border-color: var(--clms-primary); }
.creator-tab:disabled { opacity: .35; cursor: not-allowed; }

.creator-course-label {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .82rem;
  color: var(--clms-text-muted);
}
.creator-course-label strong { color: var(--clms-text); }

.creator-tab-content { }

/* Course Info tab */
.creator-info-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  padding: 1.5rem;
}
@media (max-width: 860px) { .creator-info-grid { grid-template-columns: 1fr; } }
.creator-info-left, .creator-info-right { display: flex; flex-direction: column; gap: 1rem; }
.creator-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.creator-save-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--clms-border);
  background: var(--clms-surface2);
}
.save-status { font-size: .82rem; margin-right: auto; font-weight: 600; }

/* Media previews */
.media-preview-wrap {
  background: var(--clms-surface2);
  border: 1px solid var(--clms-border);
  border-radius: var(--clms-radius);
  overflow: hidden;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-preview-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-placeholder { display: flex; flex-direction: column; align-items: center; gap: .35rem; color: var(--clms-text-muted); padding: 1.5rem; }
.media-placeholder span { font-size: 2rem; }
.media-placeholder p { font-size: .78rem; margin: 0; }

/* Modules tab */
.creator-modules-header, .creator-lessons-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--clms-border);
}
.modules-list, .lessons-list {
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.module-list-item, .lesson-list-item {
  display: flex;
  align-items: center;
  gap: .85rem;
  background: var(--clms-surface2);
  border: 1px solid var(--clms-border);
  border-radius: var(--clms-radius);
  padding: .75rem 1rem;
  transition: var(--t);
}
.module-list-item:hover, .lesson-list-item:hover { border-color: var(--clms-border2); }
.mli-order, .lli-order { font-size: .75rem; color: var(--clms-text-muted); min-width: 22px; font-family: var(--clms-font-mono); }
.mli-title, .lli-title { flex: 1; font-size: .9rem; font-weight: 600; }
.lli-icons { font-size: .85rem; color: var(--clms-text-muted); display: flex; gap: .25rem; }
.mli-actions, .lli-actions { display: flex; gap: .4rem; }

.lesson-module-separator {
  padding: .4rem .5rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--clms-primary);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-radius: 6px;
  background: rgba(108,99,255,.06);
}
.module-list-item { border-left: 3px solid var(--clms-primary); }

/* Inline editors */
.inline-editor {
  background: var(--clms-surface2);
  border: 1px solid var(--clms-border2);
  border-radius: var(--clms-radius-lg);
  margin: 0 1.5rem 1.5rem;
  padding: 1.5rem;
}
.inline-editor h4 { font-family: var(--clms-font-display); font-size: 1rem; font-weight: 700; margin: 0 0 1.25rem; color: var(--clms-text); }
.inline-editor-actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: 1rem; }

.creator-lesson-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.creator-lesson-form .full-width { grid-column: 1 / -1; }
@media (max-width: 640px) { .creator-lesson-form { grid-template-columns: 1fr; } }

/* Upload zone */
.clms-upload-zone {
  border: 2px dashed var(--clms-border2);
  border-radius: var(--clms-radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  cursor: pointer;
  transition: var(--t);
  color: var(--clms-text-muted);
}
.clms-upload-zone:hover, .clms-upload-zone.dragover {
  border-color: var(--clms-primary);
  background: rgba(108,99,255,.04);
  color: var(--clms-text);
}
.upload-icon { font-size: 2.5rem; margin-bottom: .5rem; }
.clms-upload-zone input[type=file] { display: none; }

.upload-progress-wrap { margin: .75rem 0; display: flex; align-items: center; gap: 1rem; }
.upload-progress-track { flex: 1; height: 6px; background: var(--clms-surface3); border-radius: 99px; overflow: hidden; }
.upload-progress-fill { height: 100%; background: var(--clms-primary); border-radius: 99px; transition: width .2s ease; width: 0; }

.clms-upload-results { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.upload-result-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--clms-surface2);
  border: 1px solid var(--clms-border);
  border-radius: var(--clms-radius);
  padding: .6rem 1rem;
}
.file-icon { font-size: 1.2rem; flex-shrink: 0; }
.file-name { font-size: .82rem; font-weight: 600; min-width: 0; flex-shrink: 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── COURSE CARDS ───────────────────────────────────────────────────── */
.clms-course-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  padding: 1.25rem;
}
.clms-course-card {
  background: var(--clms-surface);
  border: 1px solid var(--clms-border);
  border-radius: var(--clms-radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: var(--t);
  cursor: pointer;
}
.clms-course-card:hover { transform: translateY(-3px); box-shadow: var(--clms-shadow); border-color: var(--clms-primary); }
.clms-course-card.enrolled { border-color: var(--clms-green); }
.course-card-media { position: relative; padding-top: 56.25%; background: var(--clms-surface2); overflow: hidden; }
.course-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.clms-course-card:hover .course-card-media img { transform: scale(1.04); }
.course-card-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.enrolled-badge { position: absolute; top: .6rem; right: .6rem; background: var(--clms-green); color: #fff; padding: 3px 9px; border-radius: 20px; font-size: .68rem; font-weight: 700; }
.free-badge     { position: absolute; top: .6rem; right: .6rem; background: var(--clms-gold); color: #1a1000; padding: 3px 9px; border-radius: 20px; font-size: .68rem; font-weight: 700; }
.price-badge    { position: absolute; top: .6rem; right: .6rem; background: var(--clms-primary); color: #fff; padding: 3px 9px; border-radius: 20px; font-size: .68rem; font-weight: 700; }
.course-card-body { padding: 1rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; }
.course-card-body h3 { font-family: var(--clms-font-display); font-size: .98rem; font-weight: 700; margin: 0; line-height: 1.35; }
.course-desc { font-size: .8rem; color: var(--clms-text-muted); line-height: 1.5; margin: 0; }
.course-card-footer { padding: .85rem 1rem; border-top: 1px solid var(--clms-border); display: flex; gap: .5rem; }

/* Progress bar */
.clms-progress-bar-wrap { display: flex; flex-direction: column; gap: .3rem; }
.clms-progress-bar { background: var(--clms-surface3); border-radius: 99px; height: 5px; overflow: hidden; }
.clms-progress-fill { background: linear-gradient(90deg, var(--clms-primary), var(--clms-gold)); height: 100%; border-radius: 99px; transition: width .4s ease; }
.progress-label { font-size: .72rem; color: var(--clms-text-muted); }

/* ── LIBRARY ────────────────────────────────────────────────────────── */
.clms-library { }
.clms-library-header {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: 2.25rem 2rem 1.5rem;
  background: linear-gradient(135deg, var(--clms-surface) 0%, var(--clms-bg) 100%);
  border-bottom: 1px solid var(--clms-border);
}
.library-title-wrap h2 { font-family: var(--clms-font-display); font-size: 1.9rem; font-weight: 900; margin: 0 0 .25rem; }
.library-title-wrap p  { color: var(--clms-text-muted); margin: 0; }
.library-search-wrap { display: flex; gap: .75rem; flex-wrap: wrap; }
.clms-search-input { min-width: 220px; }
.clms-my-courses-strip { padding: 1.5rem 2rem .5rem; border-bottom: 1px solid var(--clms-border); }
.clms-my-courses-strip h3 { font-family: var(--clms-font-display); font-size: 1rem; font-weight: 700; margin: 0 0 1rem; color: var(--clms-text-muted); }

/* ── COURSE MODAL (3-step) ──────────────────────────────────────────── */
.clms-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(8px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.clms-modal-container {
  background: var(--clms-surface);
  border: 1px solid var(--clms-border);
  border-radius: var(--clms-radius-lg);
  width: 100%; max-width: 880px;
  max-height: 92vh; overflow-y: auto;
  position: relative;
  animation: modalIn .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow: var(--clms-shadow-lg);
}
@keyframes modalIn { from { transform: scale(.9) translateY(24px); opacity:0; } to { transform: scale(1) translateY(0); opacity:1; } }
.clms-modal-close {
  position: sticky; float: right; top: .75rem; right: .75rem; z-index: 10;
  margin: .75rem .75rem 0 0;
  background: var(--clms-surface2); border: 1px solid var(--clms-border);
  color: var(--clms-text); width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  transition: var(--t);
}
.clms-modal-close:hover { background: var(--clms-red); border-color: var(--clms-red); }

.clms-steps-indicator {
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem 1.5rem 1rem;
}
.step-dot {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--clms-surface2); border: 2px solid var(--clms-border);
  color: var(--clms-text-muted);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
  transition: var(--t);
}
.step-dot.active { background: var(--clms-primary); border-color: var(--clms-primary); color: #fff; box-shadow: 0 0 0 4px var(--clms-primary-glow); }
.step-dot.done   { background: var(--clms-green); border-color: var(--clms-green); color: #fff; }
.step-line { width: 52px; height: 2px; background: var(--clms-border); margin: 0 .25rem; }

.clms-course-modal-container { max-width: 960px; }
.modal-video-wrap { padding: 0 1.5rem; }
.clms-video-player { width: 100%; max-height: 340px; background: #000; border-radius: var(--clms-radius); display: block; }
.modal-no-video { background: var(--clms-surface2); border-radius: var(--clms-radius); padding: 2.5rem; text-align: center; color: var(--clms-text-muted); font-size: 2.5rem; }
.modal-no-video p { font-size: .9rem; margin: .35rem 0 0; }
.modal-course-info { padding: 1.25rem 1.5rem; }
.modal-course-info h2 { font-family: var(--clms-font-display); font-size: 1.5rem; font-weight: 800; margin: 0 0 .6rem; }
.modal-course-info p  { color: var(--clms-text-muted); line-height: 1.6; margin: 0 0 .85rem; }
.modal-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .85rem; font-size: .88rem; }
.modal-price { font-family: var(--clms-font-display); font-size: 1.4rem; font-weight: 800; color: var(--clms-gold); }
.modal-curriculum h4 { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--clms-text-muted); margin: 0 0 .6rem; }
.curriculum-list { display: flex; flex-direction: column; gap: .3rem; }
.curriculum-item { display: flex; align-items: center; gap: .65rem; padding: .5rem .75rem; background: var(--clms-surface2); border-radius: 7px; font-size: .85rem; }
.lesson-num { color: var(--clms-text-muted); font-size: .75rem; min-width: 20px; }
.module-header { padding: .35rem .75rem; font-size: .72rem; font-weight: 700; color: var(--clms-primary); text-transform: uppercase; letter-spacing: .05em; }
.modal-tts-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .85rem; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: .65rem; padding: 1rem 1.5rem; border-top: 1px solid var(--clms-border); }

/* Payment step */
.payment-step-content { padding: 2.25rem; text-align: center; max-width: 440px; margin: 0 auto; }
.payment-icon { font-size: 3rem; margin-bottom: .75rem; }
.payment-step-content h2 { font-family: var(--clms-font-display); font-size: 1.6rem; font-weight: 800; margin: 0 0 .4rem; }
.payment-summary { background: var(--clms-surface2); border-radius: var(--clms-radius); padding: 1.1rem; margin: 1.25rem 0; display: flex; flex-direction: column; gap: .5rem; }
.ps-row { display: flex; justify-content: space-between; font-size: .88rem; }
.ps-row:last-child { border-top: 1px solid var(--clms-border); padding-top: .5rem; font-weight: 700; }
.payment-note { font-size: .75rem; color: var(--clms-text-muted); margin-top: .85rem; }

/* Lessons step */
.lessons-step-header { padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--clms-border); }
.lessons-step-header h3 { font-family: var(--clms-font-display); font-weight: 700; margin: 0 0 .6rem; }
.lessons-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 420px; }
@media (max-width: 600px) { .lessons-layout { grid-template-columns: 1fr; } }
.lessons-sidebar { border-right: 1px solid var(--clms-border); overflow-y: auto; max-height: 480px; }
.sidebar-mod-header { padding: .5rem .85rem; font-size: .7rem; font-weight: 700; color: var(--clms-primary); text-transform: uppercase; letter-spacing: .05em; background: rgba(108,99,255,.06); }
.lesson-sidebar-item { display: flex; align-items: center; gap: .6rem; padding: .75rem .85rem; cursor: pointer; border-bottom: 1px solid var(--clms-border); font-size: .85rem; transition: var(--t); }
.lesson-sidebar-item:hover { background: var(--clms-surface2); }
.lesson-sidebar-item.active { background: var(--clms-surface2); border-left: 3px solid var(--clms-primary); }
.lesson-check { flex-shrink: 0; color: var(--clms-text-muted); }
.lesson-viewer { padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; }
.lesson-video-wrap { border-radius: var(--clms-radius); overflow: hidden; }
/* When hidden, ensure zero margin/padding so no empty gap appears in the viewer */
.lesson-video-wrap[style*="display:none"],
.lesson-video-wrap[style*="display: none"] { margin: 0 !important; padding: 0 !important; }
.lesson-pdf-wrap iframe { width: 100%; height: 450px; border-radius: var(--clms-radius); border: none; }
.lesson-pdf-wrap[style*="display:none"],
.lesson-pdf-wrap[style*="display: none"] { margin: 0 !important; padding: 0 !important; }
.lesson-content-body { line-height: 1.7; font-size: .92rem; }
.lesson-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--clms-border); }

/* TTS bar */
.clms-tts-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.tts-btn {
  background: var(--clms-surface2); border: 1px solid var(--clms-border);
  color: var(--clms-text-muted); padding: .35rem .8rem;
  border-radius: var(--clms-radius); cursor: pointer; font-family: var(--clms-font);
  font-size: .8rem; transition: var(--t);
}
.tts-btn:hover { background: var(--clms-surface3); color: var(--clms-text); }
.tts-btn.active { background: var(--clms-primary); border-color: var(--clms-primary); color: #fff; }

/* AI output modal */
.clms-ai-output-modal { max-width: 660px; }
.clms-ai-chunk-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid var(--clms-border); }
#chunk-indicator { font-size: .88rem; color: var(--clms-text-muted); font-weight: 600; }
#clms-ai-output-content { padding: 2rem; font-size: .95rem; line-height: 1.75; min-height: 140px; }
#clms-ai-output-content h2,h3,h4 { font-family: var(--clms-font-display); color: var(--clms-text); }

/* ── AI GENERATOR ───────────────────────────────────────────────────── */
.clms-ai-generator { padding: 1.5rem; }
.ai-step-header { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; }
.step-number { font-family: var(--clms-font-display); font-size: 1.8rem; font-weight: 900; color: var(--clms-primary); opacity: .4; }
.ai-step-header h3 { font-family: var(--clms-font-display); font-size: 1.1rem; font-weight: 800; margin: 0; }
.clms-model-selector { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: .65rem; }
.model-option {
  display: flex; flex-direction: column; gap: .25rem; padding: .75rem;
  background: var(--clms-surface2); border: 2px solid var(--clms-border);
  border-radius: var(--clms-radius); cursor: pointer; transition: var(--t);
}
.model-option input { display: none; }
.model-option.selected { border-color: var(--clms-primary); background: rgba(108,99,255,.1); }
.model-name { font-size: .8rem; font-weight: 600; }
.model-price { font-size: .75rem; color: var(--clms-gold); font-weight: 700; }
.ai-pricing-summary { background: var(--clms-surface2); border: 1px solid var(--clms-border); border-radius: var(--clms-radius); padding: 1.1rem; margin-top: 1.25rem; display: flex; flex-direction: column; gap: .45rem; }
.price-row { display: flex; justify-content: space-between; font-size: .88rem; }
.price-row.total { border-top: 1px solid var(--clms-border); padding-top: .45rem; font-weight: 700; font-size: 1rem; }
.ai-notice { padding: .65rem .9rem; border-radius: var(--clms-radius); font-size: .85rem; font-weight: 500; margin-top: .4rem; }
.ai-notice.green  { background: rgba(34,197,94,.08);  border: 1px solid rgba(34,197,94,.25);  color: var(--clms-green); }
.ai-notice.blue   { background: rgba(56,189,248,.08); border: 1px solid rgba(56,189,248,.25); color: var(--clms-blue); }
.ai-notice.orange { background: rgba(249,115,22,.08); border: 1px solid rgba(249,115,22,.25); color: var(--clms-orange); }
.ai-confirm-summary { background: var(--clms-surface2); border-radius: var(--clms-radius); padding: 1.25rem; margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.ai-confirm-row { display: flex; justify-content: space-between; align-items: center; font-size: .88rem; }
.clms-ai-raw-output { font-family: var(--clms-font-mono); font-size: .8rem; width: 100%; min-height: 380px; background: var(--clms-bg); border: 1px solid var(--clms-border); color: var(--clms-text); padding: 1rem; border-radius: var(--clms-radius); resize: vertical; }
.clms-spinner-area { text-align: center; padding: 3rem; }
.clms-spinner { width: 44px; height: 44px; border: 4px solid var(--clms-border); border-top-color: var(--clms-primary); border-radius: 50%; margin: 0 auto 1rem; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── AUTH ───────────────────────────────────────────────────────────── */
.clms-auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; }
.clms-auth-card { background: var(--clms-surface); border: 1px solid var(--clms-border); border-radius: var(--clms-radius-lg); padding: 2.25rem; width: 100%; max-width: 440px; box-shadow: var(--clms-shadow-lg); }
.clms-auth-logo { font-family: var(--clms-font-display); font-size: 1.4rem; font-weight: 800; text-align: center; margin-bottom: 1.5rem; }
.clms-auth-logo em { color: var(--clms-primary); font-style: normal; }
.clms-auth-tabs { display: flex; gap: .25rem; background: var(--clms-surface2); border-radius: var(--clms-radius); padding: .2rem; margin-bottom: 1.5rem; }
.auth-tab { flex: 1; padding: .55rem; border: none; background: transparent; color: var(--clms-text-muted); border-radius: 8px; cursor: pointer; font-family: var(--clms-font); font-size: .85rem; font-weight: 600; transition: var(--t); }
.auth-tab.active { background: var(--clms-primary); color: #fff; }
.auth-form { display: flex; flex-direction: column; gap: .9rem; }
.auth-intro { color: var(--clms-text-muted); font-size: .85rem; margin: 0; text-align: center; }
.auth-forgot { text-align: center; font-size: .8rem; margin: 0; }
.auth-forgot a { color: var(--clms-primary); }
.clms-message { padding: .65rem .9rem; border-radius: var(--clms-radius); font-size: .85rem; font-weight: 500; }
.clms-message.success { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.25); color: var(--clms-green); }
.clms-message.error   { background: rgba(239,68,68,.1);  border: 1px solid rgba(239,68,68,.25);  color: var(--clms-red); }

/* ── WAITING ROOM / GATE ────────────────────────────────────────────── */
.clms-waiting-room { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 4rem 2rem; gap: .85rem; }
.waiting-icon { font-size: 4rem; }
.clms-waiting-room h2 { font-family: var(--clms-font-display); font-size: 1.7rem; font-weight: 800; margin: 0; }
.clms-waiting-room p  { color: var(--clms-text-muted); max-width: 380px; }
.clms-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 40vh; padding: 2rem; text-align: center; }
.gate-icon { font-size: 3rem; }

/* ── FACILITATOR CARDS ──────────────────────────────────────────────── */
.clms-facilitator-list { display: flex; flex-direction: column; gap: .65rem; padding: 1.25rem; }
.clms-facilitator-card { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; background: var(--clms-surface2); border: 1px solid var(--clms-border); border-radius: var(--clms-radius); padding: .9rem 1.1rem; }
.fac-info { display: flex; align-items: center; gap: .65rem; flex: 1; min-width: 180px; }
.fac-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--clms-primary); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; color: #fff; flex-shrink: 0; }
.fac-info div { display: flex; flex-direction: column; }
.fac-info strong { font-size: .9rem; }
.fac-info span   { font-size: .78rem; color: var(--clms-text-muted); }
.fac-meta { display: flex; align-items: center; gap: 1rem; font-size: .82rem; flex-wrap: wrap; }
.fac-actions { display: flex; gap: .45rem; flex-wrap: wrap; }

/* ── WALLET ─────────────────────────────────────────────────────────── */
.clms-wallet-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.ws-item { background: var(--clms-surface); border: 1px solid var(--clms-border); border-radius: var(--clms-radius-lg); padding: 1.1rem; display: flex; flex-direction: column; gap: .3rem; }
.ws-item.highlight { border-color: var(--clms-green); background: rgba(34,197,94,.04); }
.ws-item label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--clms-text-muted); }
.ws-item strong { font-family: var(--clms-font-display); font-size: 1.3rem; font-weight: 800; }
.ws-item.highlight strong { color: var(--clms-green); }

/* ── PAGINATION ─────────────────────────────────────────────────────── */
.clms-pagination-bar { display: flex; gap: .4rem; padding: 1rem 1.5rem; border-top: 1px solid var(--clms-border); }
.page-btn { padding: .3rem .75rem; border: 1px solid var(--clms-border); border-radius: 6px; background: transparent; color: var(--clms-text-muted); font-family: var(--clms-font); font-size: .82rem; cursor: pointer; transition: var(--t); }
.page-btn:hover { background: var(--clms-surface2); color: var(--clms-text); }
.page-btn.active { background: var(--clms-primary); border-color: var(--clms-primary); color: #fff; }

/* ── MISC ───────────────────────────────────────────────────────────── */
.clms-loading { padding: 2.5rem; text-align: center; color: var(--clms-text-muted); font-size: .9rem; }
.clms-empty-state { padding: 2rem; text-align: center; color: var(--clms-text-muted); font-size: .9rem; }
.clms-hint { font-size: .78rem; color: var(--clms-text-muted); margin: 0; }
.required { color: var(--clms-red); }

/* ── ADMIN WP OVERRIDES ─────────────────────────────────────────────── */
.clms-admin-wrap { font-family: var(--clms-font); }
.clms-stat-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 1rem; margin: 1rem 0; }
.clms-stat-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 1.25rem; display: flex; flex-direction: column; gap: .3rem; }
.stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #666; font-weight: 600; }
.stat-value { font-family: var(--clms-font-display); font-size: 1.5rem; font-weight: 800; }
.clms-stat-card.accent-green .stat-value  { color: #16a34a; }
.clms-stat-card.accent-blue .stat-value   { color: #0284c7; }
.clms-stat-card.accent-purple .stat-value { color: #7c3aed; }
.clms-stat-card.accent-orange .stat-value { color: #ea580c; }
.clms-settings-form { max-width: 640px; }
.clms-settings-section { background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 1.5rem; margin-bottom: 1.25rem; }
.clms-settings-section h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 1rem; }
.clms-field-row { display: grid; grid-template-columns: 180px 1fr; gap: 1rem; align-items: center; margin-bottom: .75rem; }
.clms-field-row label { font-weight: 600; font-size: .88rem; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .clms-dash-body { grid-template-columns: 1fr; }
  .clms-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--clms-border); padding: .75rem 0; display: flex; flex-wrap: wrap; gap: .1rem; }
  .sidebar-section-label { display: none; }
  .sidebar-link { padding: .45rem .85rem; border-radius: 20px; border-left: none; font-size: .8rem; border: 1px solid var(--clms-border); margin: .15rem; }
  .sidebar-link.active { border-color: var(--clms-primary); }
  .clms-main-content { padding: 1rem; }
  .creator-info-grid { grid-template-columns: 1fr; }
  .clms-kpi-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .clms-kpi-row { grid-template-columns: 1fr; } }

/* ── LESSON PLAYER NAVIGATION ───────────────────────────────────────── */
.lessons-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.lessons-header-row h3 { margin: 0; flex: 1; }
#close-lesson-modal-btn {
  flex-shrink: 0;
  border: 1px solid var(--clms-border);
  font-size: .82rem;
}
.lesson-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--clms-border);
}
.lesson-nav-indicator {
  font-size: .85rem;
  color: var(--clms-muted);
  font-weight: 600;
  white-space: nowrap;
}
#prev-lesson-btn, #next-lesson-btn { min-width: 110px; }
#next-lesson-btn.course-complete {
  background: var(--clms-green) !important;
}

/* ── AI PUBLISH NOTICE ──────────────────────────────────────────────── */
#ai-publish-notice a { color: #fff; text-decoration: underline; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   LESSON PLAYER — Slide-card redesign
   ══════════════════════════════════════════════════════════════════════ */

/* ── Top bar ─────────────────────────────────────────────────────────── */
.lp-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 1.1rem;
  background: var(--clms-surface); border-bottom: 1px solid var(--clms-border);
  flex-shrink: 0;
}
.lp-topbar-left { display: flex; align-items: center; gap: .65rem; min-width: 0; flex: 1; }
.lp-exit-btn {
  flex-shrink: 0; width: 32px; height: 32px;
  border-radius: 50%; border: 1px solid var(--clms-border2);
  background: var(--clms-surface2); color: var(--clms-text);
  font-size: .95rem; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: var(--t);
}
.lp-exit-btn:hover { background: var(--clms-red); border-color: var(--clms-red); color: #fff; }
.lp-course-title {
  font-family: var(--clms-font-display); font-weight: 700; font-size: .9rem;
  color: var(--clms-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-progress-wrap { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.lp-progress-track {
  width: 120px; height: 6px; background: var(--clms-surface3);
  border-radius: 10px; overflow: hidden;
}
.lp-progress-fill {
  height: 100%; background: linear-gradient(90deg, var(--clms-primary), var(--clms-blue));
  border-radius: 10px; transition: width .4s ease;
}
.lp-progress-label { font-size: .75rem; color: var(--clms-text-muted); white-space: nowrap; }

/* ── Body layout ─────────────────────────────────────────────────────── */
.lp-body {
  display: grid; grid-template-columns: 200px 1fr;
  min-height: 0; flex: 1; overflow: hidden;
}
@media (max-width: 600px) {
  .lp-body { grid-template-columns: 1fr; }
  .lp-sidebar { max-height: 120px; border-right: none; border-bottom: 1px solid var(--clms-border); }
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.lp-sidebar {
  border-right: 1px solid var(--clms-border);
  overflow-y: auto; background: var(--clms-surface);
}
.lp-sidebar .sidebar-mod-header {
  padding: .45rem .75rem; font-size: .65rem; font-weight: 700;
  color: var(--clms-primary); text-transform: uppercase; letter-spacing: .06em;
  background: rgba(108,99,255,.08);
}
.lp-sidebar .lesson-sidebar-item {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .65rem .75rem; cursor: pointer;
  border-bottom: 1px solid var(--clms-border);
  font-size: .8rem; line-height: 1.3; transition: var(--t);
}
.lp-sidebar .lesson-sidebar-item:hover { background: var(--clms-surface2); }
.lp-sidebar .lesson-sidebar-item.active {
  background: var(--clms-surface2); border-left: 3px solid var(--clms-primary);
}
.lp-sidebar .lesson-check { flex-shrink: 0; font-size: .85rem; margin-top: .05rem; }

/* ── Viewer ──────────────────────────────────────────────────────────── */
.lp-viewer {
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1rem 1.1rem 1rem; overflow-y: auto; min-height: 0;
}

/* ── Lesson header ───────────────────────────────────────────────────── */
.lp-lesson-header {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
}
.lp-lesson-title {
  font-family: var(--clms-font-display); font-weight: 700;
  font-size: 1.05rem; margin: 0; color: var(--clms-text); flex: 1;
}
.lp-card-counter {
  font-size: .75rem; color: var(--clms-text-muted);
  background: var(--clms-surface2); padding: .2rem .55rem;
  border-radius: 20px; flex-shrink: 0; font-weight: 600;
}

/* ── Slide card ──────────────────────────────────────────────────────── */
.lp-slide-card {
  background: var(--clms-surface2);
  border: 1px solid var(--clms-border2);
  border-radius: var(--clms-radius-lg);
  padding: 1.4rem 1.5rem;
  min-height: 200px;
  flex: 1;
  animation: lp-slide-in .22s ease;
}
@keyframes lp-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lp-slide-content {
  line-height: 1.8; font-size: .92rem; color: var(--clms-text);
}
.lp-slide-content h4 {
  font-family: var(--clms-font-display); font-weight: 700;
  font-size: 1rem; margin: 0 0 .75rem;
  color: var(--clms-blue);
  display: flex; align-items: center; gap: .4rem;
}
.lp-slide-content h4::before { content: ''; display: inline-block; width: 3px; height: 1em; background: var(--clms-blue); border-radius: 2px; }
.lp-slide-content p { margin: 0 0 .6rem; }
.lp-slide-content ul, .lp-slide-content ol { padding-left: 1.4rem; margin: 0 0 .6rem; }
.lp-slide-content li { margin-bottom: .35rem; }
.lp-slide-content strong { color: var(--clms-gold); font-weight: 600; }
.lp-slide-content .lp-slide-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--clms-primary); color: #fff;
  font-size: .72rem; font-weight: 700; margin-right: .45rem; flex-shrink: 0;
}

/* ── Dot indicators ──────────────────────────────────────────────────── */
.lp-dots {
  display: flex; justify-content: center; gap: .45rem; flex-wrap: wrap;
}
/* Use !important on dimensions so theme button resets (min-height, padding,
   font-size, etc.) cannot inflate these tiny indicators into full-size buttons */
.lp-dot {
  width: 8px !important; height: 8px !important;
  min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important;
  background: var(--clms-surface3) !important;
  cursor: pointer; transition: var(--t);
  border: none !important; padding: 0 !important;
  margin: 0 !important; line-height: 1 !important;
  font-size: 0 !important; /* hide any injected text */
  flex-shrink: 0; display: inline-block !important;
  vertical-align: middle;
  appearance: none; -webkit-appearance: none;
}
.lp-dot.active {
  background: var(--clms-primary) !important;
  width: 22px !important; border-radius: 4px !important;
}
.lp-dot.done { background: var(--clms-green) !important; }

/* ── Card nav ────────────────────────────────────────────────────────── */
.lp-card-nav {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.lp-center-actions { display: flex; align-items: center; gap: .4rem; }
.lp-tts-row { display: flex; align-items: center; gap: .35rem; }
.lp-tts-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--clms-border2); background: var(--clms-surface2);
  color: var(--clms-text-muted); font-size: .9rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: var(--t);
}
.lp-tts-btn:hover { background: var(--clms-surface3); color: var(--clms-text); }
.lp-tts-btn.active { background: var(--clms-primary); border-color: var(--clms-primary); color: #fff; }
.lp-tts-select {
  background: var(--clms-surface2); border: 1px solid var(--clms-border2);
  color: var(--clms-text-muted); border-radius: 6px;
  font-size: .72rem; padding: .25rem .4rem; cursor: pointer;
}

/* ── Nav buttons shared ──────────────────────────────────────────────── */
.lp-nav-btn {
  padding: .5rem 1rem; border-radius: 8px; font-family: var(--clms-font);
  font-size: .82rem; font-weight: 600; cursor: pointer; transition: var(--t);
  border: 1px solid transparent; white-space: nowrap;
}
.lp-nav-ghost {
  background: transparent; border-color: var(--clms-border2); color: var(--clms-text-muted);
}
.lp-nav-ghost:hover:not(:disabled) { background: var(--clms-surface2); color: var(--clms-text); }
.lp-nav-ghost:disabled { opacity: .35; cursor: not-allowed; }
.lp-nav-primary { background: var(--clms-primary); color: #fff; border-color: var(--clms-primary); }
.lp-nav-primary:hover:not(:disabled) { background: var(--clms-primary-dark); }
.lp-nav-primary:disabled { opacity: .4; cursor: not-allowed; }
.lp-nav-success { background: var(--clms-green); color: #fff; border-color: var(--clms-green); font-size: .78rem; }
.lp-nav-success:hover { filter: brightness(1.1); }
.lp-nav-success.marked { background: var(--clms-surface3); border-color: var(--clms-green); color: var(--clms-green); }

/* ── Lesson nav row ──────────────────────────────────────────────────── */
.lp-lesson-nav {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding-top: .75rem; border-top: 1px solid var(--clms-border);
}

/* ── modal container height fix for player ───────────────────────────── */
.clms-course-modal-container {
  display: flex !important; flex-direction: column !important;
  max-height: 92vh !important; overflow: hidden !important;
}
#modal-step-3 {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden;
}


/* ══════════════════════════════════════════════════════════════════════
   LESSON PLAYER — Complete responsive overhaul  v1.0.5
   ══════════════════════════════════════════════════════════════════════ */

/* ── Course description: strip markdown artefacts ─────────────────────
   AI-generated descriptions sometimes start with "# Course: …" etc.
   We hide headings via CSS so they don't pollute the modal preview.
   The JS sanitiseDescription() does the real stripping.              */

/* ── Modal overlay ──────────────────────────────────────────────────── */
#clms-course-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
@media (min-width: 600px) {
  #clms-course-modal-overlay { padding: 1rem; }
}

/* ── Modal container ────────────────────────────────────────────────── */
/* CRITICAL: must be an explicit-height flex column so step-3 can fill */
.clms-course-modal-container {
  position: relative;
  background: var(--clms-surface) !important;
  border: 1px solid var(--clms-border);
  box-shadow: var(--clms-shadow-lg);
  width: 100%;
  max-width: 980px;

  /* Mobile: full viewport */
  height: 100dvh !important;
  max-height: 100dvh !important;
  border-radius: 0 !important;

  /* Flex column so step divs can use flex:1 */
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
@media (min-width: 600px) {
  .clms-course-modal-container {
    height: 90vh !important;
    max-height: 90vh !important;
    border-radius: var(--clms-radius-lg) !important;
  }
}

/* Steps 1 & 2: scrollable, auto height inside flex container */
#modal-step-1,
#modal-step-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

/* Step 3: fills ALL remaining height — this is the critical fix */
#modal-step-3 {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* The close button must stay in DOM flow above the flex container */
.clms-modal-close {
  position: absolute;
  top: .6rem;
  right: .75rem;
  z-index: 10;
  flex-shrink: 0;
}

/* ── Step indicator — fixed height, never stretches ────────────────── */
.clms-steps-indicator { flex-shrink: 0; }

/* ── lp-topbar — fixed height strip ─────────────────────────────────── */
.lp-topbar {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .85rem;
  border-bottom: 1px solid var(--clms-border);
  flex-shrink: 0;
  flex-wrap: wrap;
  background: var(--clms-surface);
  min-height: 48px;
}
.lp-topbar-left {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.lp-course-title {
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lp-progress-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  min-width: 120px;
}
.lp-progress-track {
  width: 100px;
  height: 6px;
  background: var(--clms-surface3);
  border-radius: 99px;
  overflow: hidden;
}
@media (max-width: 399px) { .lp-progress-track { width: 64px; } }
.lp-progress-fill {
  height: 100%;
  background: var(--clms-primary);
  border-radius: 99px;
  transition: width .45s ease;
}
.lp-progress-label {
  font-size: .7rem;
  color: var(--clms-text-muted);
  white-space: nowrap;
}

/* ── lp-body: THE HEIGHT-CRITICAL GRID ─────────────────────────────── */
/* Must use flex:1 so it fills the remaining height after topbar        */
.lp-body {
  display: grid;
  grid-template-columns: 210px 1fr;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden;
}
@media (max-width: 640px) {
  .lp-body {
    grid-template-columns: 1fr !important;
    grid-template-rows: 100px 1fr;
  }
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.lp-sidebar {
  overflow-y: auto;
  border-right: 1px solid var(--clms-border);
  background: var(--clms-surface);
  min-height: 0;
}
@media (max-width: 640px) {
  .lp-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--clms-border);
    max-height: 100px;
  }
}

/* ── Viewer ─────────────────────────────────────────────────────────── */
/* flex column + overflow-y so content scrolls, not the outer modal */
.lp-viewer {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .85rem .95rem;
  overflow-y: auto;
  min-height: 0;
  background: var(--clms-bg);
}
@media (max-width: 480px) {
  .lp-viewer { padding: .55rem .6rem; gap: .45rem; }
}

/* ── Slide card fills available vertical space ─────────────────────── */
.lp-slide-card {
  background: var(--clms-surface);
  border: 1px solid var(--clms-border2);
  border-radius: var(--clms-radius-lg);
  padding: 1.25rem 1.4rem;
  flex: 1 1 auto;      /* fills space between header and nav */
  min-height: 120px;
  overflow-y: auto;
  animation: lp-slide-in .2s ease;
}
@media (max-width: 480px) {
  .lp-slide-card { padding: .85rem .95rem; }
}

/* ── Card nav ────────────────────────────────────────────────────────── */
.lp-card-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.lp-center-actions {
  flex: 1;
  display: flex;
  justify-content: center;
}
.lp-tts-row { display: flex; align-items: center; gap: .3rem; }

/* ── Lesson nav ──────────────────────────────────────────────────────── */
.lp-lesson-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  flex-shrink: 0;
  padding-top: .5rem;
  border-top: 1px solid var(--clms-border);
  flex-wrap: wrap;
}
@media (max-width: 400px) {
  .lp-lesson-nav {
    flex-direction: column;
    align-items: stretch;
  }
  .lp-lesson-nav .lp-nav-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Completion screen ───────────────────────────────────────────────── */
.lp-completion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  flex: 1;
}
.lp-completion-icon { font-size: 3.5rem; line-height: 1; }
.lp-completion h2 {
  font-family: var(--clms-font-display);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--clms-green);
  margin: 0;
}
.lp-completion p {
  color: var(--clms-text-muted);
  font-size: .92rem;
  max-width: 340px;
  margin: 0;
}
.lp-completion-actions {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: .5rem;
}

/* ── Video player ─────────────────────────────────────────────────────── */
.lesson-video-wrap { border-radius: var(--clms-radius); overflow: hidden; flex-shrink: 0; }
.lesson-video-wrap[style*="display:none"],
.lesson-video-wrap[style*="display: none"] { margin: 0 !important; padding: 0 !important; }
.lesson-video-wrap video,
.clms-video-player {
  width: 100%;
  max-height: 240px;
  display: block;
  background: #000;
}
@media (max-width: 480px) {
  .lesson-video-wrap video, .clms-video-player { max-height: 190px; }
}

/* ── PDF viewer ────────────────────────────────────────────────────────── */
.lesson-pdf-wrap { flex-shrink: 0; border-radius: var(--clms-radius); overflow: hidden; }
.lesson-pdf-wrap[style*="display:none"],
.lesson-pdf-wrap[style*="display: none"] { margin: 0 !important; padding: 0 !important; }
.lesson-pdf-wrap iframe { width: 100%; height: 360px; border: 0; display: block; }
@media (max-width: 480px) { .lesson-pdf-wrap iframe { height: 240px; } }

/* ── Nav buttons ─────────────────────────────────────────────────────── */
.lp-nav-btn {
  padding: .48rem .95rem;
  border-radius: 8px;
  font-family: var(--clms-font);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--t);
  border: 1.5px solid transparent;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.lp-nav-btn:disabled { opacity: .38; cursor: not-allowed; }
.lp-nav-ghost { background: transparent; border-color: var(--clms-border2); color: var(--clms-text-muted); }
.lp-nav-ghost:hover:not(:disabled) { background: var(--clms-surface2); color: var(--clms-text); }
.lp-nav-primary { background: var(--clms-primary); color: #fff; border-color: var(--clms-primary); }
.lp-nav-primary:hover:not(:disabled) { background: var(--clms-primary-dark, #5a52d5); }
.lp-nav-success { background: var(--clms-green); color: #fff; border-color: var(--clms-green); }
.lp-nav-success:hover:not(:disabled) { filter: brightness(1.1); }
.lp-nav-success.marked { background: var(--clms-surface3); border-color: var(--clms-green); color: var(--clms-green); }

/* ── TTS buttons ─────────────────────────────────────────────────────── */
.lp-tts-btn {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--clms-border2);
  background: var(--clms-surface2);
  color: var(--clms-text-muted);
  font-size: .88rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: var(--t);
}
.lp-tts-btn:hover { background: var(--clms-surface3); color: var(--clms-text); }
.lp-tts-btn.active { background: var(--clms-primary); border-color: var(--clms-primary); color: #fff; }
.lp-tts-select {
  background: var(--clms-surface2); border: 1px solid var(--clms-border2);
  color: var(--clms-text-muted); border-radius: 6px;
  font-size: .7rem; padding: .2rem .4rem; cursor: pointer;
}

/* ── Dot indicators ─────────────────────────────────────────────────── */
.lp-dots { display: flex; justify-content: center; gap: .4rem; flex-wrap: wrap; flex-shrink: 0; }
.lp-dot {
  width: 8px !important; height: 8px !important;
  min-width: 0 !important; min-height: 0 !important;
  border-radius: 50% !important;
  background: var(--clms-surface3) !important;
  cursor: pointer; transition: var(--t);
  border: none !important; padding: 0 !important;
  margin: 0 !important; line-height: 1 !important;
  font-size: 0 !important;
  flex-shrink: 0; display: inline-block !important;
  appearance: none; -webkit-appearance: none;
}
.lp-dot.active { background: var(--clms-primary) !important; width: 22px !important; border-radius: 4px !important; }
.lp-dot.done   { background: var(--clms-green) !important; }

/* ── Lesson sidebar items ───────────────────────────────────────────── */
.lp-sidebar .sidebar-mod-header {
  padding: .4rem .7rem; font-size: .64rem; font-weight: 700;
  color: var(--clms-primary); text-transform: uppercase; letter-spacing: .06em;
  background: rgba(108,99,255,.08);
}
.lp-sidebar .lesson-sidebar-item {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .6rem .7rem; cursor: pointer;
  border-bottom: 1px solid var(--clms-border);
  font-size: .79rem; line-height: 1.3; transition: var(--t);
}
.lp-sidebar .lesson-sidebar-item:hover { background: var(--clms-surface2); }
.lp-sidebar .lesson-sidebar-item.active {
  background: var(--clms-surface2);
  border-left: 3px solid var(--clms-primary);
}
.lp-sidebar .lesson-sidebar-item.completed { opacity: .75; }
.lp-sidebar .lesson-check { flex-shrink: 0; font-size: .82rem; margin-top: .05rem; }

/* ── Course cards grid ─────────────────────────────────────────────── */
.clms-course-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem;
}
@media (max-width: 480px) {
  .clms-course-cards-grid { grid-template-columns: 1fr; }
}

/* ── Modal step 1 & 2 mobile spacing ─────────────────────────────────── */
@media (max-width: 480px) {
  .modal-video-wrap { padding: 0 .6rem; }
  .modal-course-info { padding: .85rem .9rem; }
  .modal-course-info h2 { font-size: 1.2rem; }
  .modal-actions { padding: .85rem .9rem; }
}
.modal-actions {
  display: flex; gap: .6rem; padding: .9rem 1.5rem;
  border-top: 1px solid var(--clms-border); flex-shrink: 0; flex-wrap: wrap;
}
@media (max-width: 400px) {
  .modal-actions { flex-direction: column; }
  .modal-actions .clms-btn { width: 100%; }
}

/* ── Course complete badge ───────────────────────────────────────────── */
.course-complete-badge {
  color: var(--clms-green);
  font-weight: 700;
  font-size: .85rem;
  margin-top: .4rem;
}


/* ── Collapsible video toggle bar (Step 1) ──────────────────────────── */
.modal-video-toggle-bar {
  padding: .65rem 1.25rem .4rem;
  flex-shrink: 0;
}
.modal-video-toggle-btn {
  display: flex;
  align-items: center;
  gap: .55rem;
  background: var(--clms-surface2);
  border: 1px solid var(--clms-border);
  border-radius: 8px;
  padding: .55rem 1rem;
  cursor: pointer;
  font-family: var(--clms-font);
  font-size: .85rem;
  font-weight: 600;
  color: var(--clms-text);
  width: 100%;
  transition: var(--t);
}
.modal-video-toggle-btn:hover { background: var(--clms-surface3); }
.mvt-icon { font-size: .8rem; color: var(--clms-primary); }
.mvt-label { flex: 1; text-align: left; }
.mvt-chevron {
  font-size: 1.1rem;
  color: var(--clms-text-muted);
  line-height: 1;
  transition: transform .2s ease;
}
.modal-video-toggle-btn[aria-expanded="true"] .mvt-chevron { transform: rotate(90deg); }
.modal-video-wrap {
  padding: 0 1.25rem .65rem;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .modal-video-toggle-bar { padding: .5rem .75rem .3rem; }
  .modal-video-wrap { padding: 0 .75rem .5rem; }
}

/* ── Slide content typography ────────────────────────────────────────── */
/* Ensure text is always visible regardless of theme variables */
.lp-slide-content {
  color: var(--clms-text, #e0e0e0) !important;
  font-size: .9rem;
  line-height: 1.75;
}
.lp-slide-content h3.lp-h3 {
  font-family: var(--clms-font-display, inherit);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--clms-primary, #6c63ff);
  margin: 0 0 .65rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--clms-primary, #6c63ff);
}
.lp-slide-content h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--clms-blue, #4fa3e0);
  margin: .75rem 0 .45rem;
}
.lp-slide-content h5 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--clms-text-muted, #aaa);
  margin: .5rem 0 .3rem;
}
.lp-slide-content p {
  margin: 0 0 .65rem;
  color: var(--clms-text, #e0e0e0);
}
.lp-slide-content ul, .lp-slide-content ol {
  padding-left: 1.4rem;
  margin: 0 0 .65rem;
}
.lp-slide-content li {
  margin-bottom: .4rem;
  color: var(--clms-text, #e0e0e0);
}
.lp-slide-content strong { color: var(--clms-gold, #f5a623); font-weight: 600; }
.lp-slide-content em { color: var(--clms-text-muted, #aaa); font-style: italic; }
.lp-slide-content code {
  background: var(--clms-surface3, rgba(255,255,255,.08));
  padding: .1rem .35rem;
  border-radius: 4px;
  font-size: .82em;
  font-family: var(--clms-font-mono, monospace);
  color: var(--clms-primary, #6c63ff);
}

/* Ensure lp-slide-card text is never invisible */
.lp-slide-card, #lp-slide-card {
  min-height: 140px;
  color: var(--clms-text, #e0e0e0) !important;
}

/* ── Step 1 modal: more vertical space now video is hidden ───────────── */
#modal-step-1 {
  display: flex;
  flex-direction: column;
}
.modal-course-info {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
}
@media (max-width: 480px) {
  .modal-course-info { padding: .85rem .9rem; }
}

/* ── TTS & Nav button hard overrides (beat WordPress theme button styles) ── */
/* Use full selector chain for maximum specificity */
#clms-course-modal-overlay .lp-tts-btn,
#clms-course-modal-overlay button.lp-tts-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  border: 1.5px solid rgba(255,255,255,.15) !important;
  background: #272742 !important;       /* --clms-surface3 hardcoded */
  color: #8888aa !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .18s ease, color .18s ease !important;
}
#clms-course-modal-overlay .lp-tts-btn:hover {
  background: #16162a !important;
  color: #e8e8f2 !important;
}
#clms-course-modal-overlay .lp-tts-btn.active {
  background: #6c63ff !important;   /* --clms-primary */
  border-color: #6c63ff !important;
  color: #fff !important;
}

/* lp-nav-btn overrides */
#clms-course-modal-overlay .lp-nav-btn,
#clms-course-modal-overlay button.lp-nav-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .3rem !important;
  padding: .48rem .95rem !important;
  border-radius: 8px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: .82rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background .18s ease, filter .18s ease !important;
}
#clms-course-modal-overlay .lp-nav-ghost {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,.15) !important;
  color: #8888aa !important;
}
#clms-course-modal-overlay .lp-nav-ghost:hover:not(:disabled) {
  background: #1e1e36 !important;
  color: #e8e8f2 !important;
}
#clms-course-modal-overlay .lp-nav-ghost:disabled {
  opacity: .35 !important;
  cursor: not-allowed !important;
}
#clms-course-modal-overlay .lp-nav-primary {
  background: #6c63ff !important;
  border: 1.5px solid #6c63ff !important;
  color: #fff !important;
}
#clms-course-modal-overlay .lp-nav-primary:hover:not(:disabled) {
  background: #4f46e5 !important;
}
#clms-course-modal-overlay .lp-nav-success {
  background: #22c55e !important;
  border: 1.5px solid #22c55e !important;
  color: #fff !important;
}
#clms-course-modal-overlay .lp-nav-success.marked {
  background: #272742 !important;
  border-color: #22c55e !important;
  color: #22c55e !important;
}
#clms-course-modal-overlay .lp-nav-success:hover:not(:disabled) {
  filter: brightness(1.1) !important;
}
#clms-course-modal-overlay .lp-nav-btn:disabled {
  opacity: .38 !important;
  cursor: not-allowed !important;
}

/* ── Video wrap — ensure it's fully visible when expanded ────────────── */
#modal-video-wrap {
  overflow: visible !important;
}
#modal-video-wrap video,
#modal-intro-video {
  display: block !important;
  width: 100% !important;
  max-height: 280px !important;
  background: #000 !important;
  border-radius: 10px !important;
}

/* ── Watch Preview toggle bar ────────────────────────────────────────── */
.modal-video-toggle-bar {
  padding: .5rem 1.25rem .3rem !important;
}
.modal-video-toggle-btn {
  background: linear-gradient(135deg, #6c63ff 0%, #4f46e5 100%) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: .65rem 1.1rem !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  font-size: .88rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: filter .18s ease !important;
  box-shadow: 0 4px 14px rgba(108,99,255,.3) !important;
}
.modal-video-toggle-btn:hover {
  filter: brightness(1.1) !important;
}
.mvt-icon { font-size: .85rem; }
.mvt-label { flex: 1; text-align: left; }
.mvt-chevron { font-size: 1rem; transition: transform .2s ease; }
.modal-video-toggle-btn[aria-expanded="true"] .mvt-icon::before { content: '⏸'; }

/* ── Progress complete badge on library cards ─────────────────────────── */
.course-complete-badge {
  color: #22c55e !important;
  font-weight: 700 !important;
  font-size: .85rem !important;
  margin-top: .4rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .35rem !important;
}

/* ── Learner auth modal ──────────────────────────────────────────────────── */
.clms-auth-modal-container {
  max-width: 420px;
  width: calc(100vw - 2rem);
  background: var(--clms-surface);
  border: 1px solid var(--clms-border2);
  border-radius: var(--clms-radius-lg);
  overflow: hidden;
  padding: 0;
}
.clms-auth-modal-container .clms-auth-logo {
  font-family: var(--clms-font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--clms-text);
  letter-spacing: -.01em;
}
.clms-auth-modal-container .clms-auth-logo em {
  color: var(--clms-primary);
  font-style: normal;
}
.clms-auth-modal-container .auth-modal-tab {
  font-family: var(--clms-font);
}
.clms-auth-modal-container .clms-message {
  border-radius: 8px;
  padding: .55rem .8rem;
  font-size: .85rem;
  line-height: 1.4;
}
.clms-auth-modal-container .clms-message.error {
  background: rgba(239,68,68,.12);
  color: #f87171;
}
.clms-auth-modal-container .clms-message.success {
  background: rgba(34,197,94,.12);
  color: var(--clms-green);
}

/* ── Library header user badge / login button ────────────────────────────── */
.lib-user-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .85rem;
  background: var(--clms-surface2);
  border: 1px solid var(--clms-border2);
  border-radius: 20px;
  font-size: .82rem;
  color: var(--clms-text-muted);
  white-space: nowrap;
}