/*!***********************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./css/courses.scss ***!
  \***********************************************************************************************************/
@charset "UTF-8";
:root {
  --sidebar-bg:#0D0A1E;
  --sidebar-hover:rgba(255,255,255,0.2);
  --card-bg:#0a0a0d;
  --grad-start:#7C09F7;
  --grad-end:#FC0BAB;
  --subtext:#AA7EDD;
  --border-faint: rgba(255,255,255,0.09);
  --font-serif:'Playfair Display', serif;
  --font-sans:'Inter', sans-serif;
  --font-mono:'JetBrains Mono', monospace;
}

body.ld-course-home {
  margin: 0;
  background: #000;
  color: #fff;
}
body.ld-course-home, body.ld-course-home * {
  box-sizing: border-box;
}
body.ld-course-home img {
  max-width: 100%;
  display: block;
}
body.ld-course-home h1 {
  font-size: 3rem;
}
body.ld-course-home h2 {
  font-size: 2rem;
}
body.ld-course-home .app {
  display: flex;
  min-height: 100vh;
}
@media (max-width: 900px) {
  body.ld-course-home .app {
    flex-direction: column;
  }
}
body.ld-course-home {
  /* ---------------- SIDEBAR ---------------- */
}
body.ld-course-home .sidebar {
  width: 300px;
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
}
@media (max-width: 900px) {
  body.ld-course-home .sidebar {
    width: 100%;
    position: static;
    height: fit-content;
  }
}
body.ld-course-home .sb-header {
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.ld-course-home .sb-logo {
  height: 24px;
  margin-bottom: 16px;
}
body.ld-course-home .sb-back {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 12px;
}
body.ld-course-home .sb-course-name {
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 12px;
}
body.ld-course-home .sb-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}
body.ld-course-home .sb-progress-track {
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  overflow: hidden;
}
body.ld-course-home .sb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
}
body.ld-course-home .home-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  margin: 10px 8px 4px;
  border-radius: 8px;
  background: rgba(124, 9, 247, 0.16);
  cursor: pointer;
  text-decoration: none;
}
body.ld-course-home .home-link svg {
  width: 16px;
  height: 16px;
  stroke: var(--subtext);
  flex-shrink: 0;
}
body.ld-course-home .home-link span {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
body.ld-course-home .phase-list {
  padding: 6px 8px 20px;
}
body.ld-course-home .phaseA {
  border-radius: 6px;
}
body.ld-course-home .phaseA summary {
  list-style: none;
  cursor: pointer;
}
body.ld-course-home .phaseA summary::-webkit-details-marker {
  display: none;
}
body.ld-course-home .phaseA[open] .phaseA-chevron {
  transform: rotate(180deg);
}
body.ld-course-home .phaseA-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 8px;
  border-radius: 6px;
}
body.ld-course-home .phaseA-head:hover {
  background: var(--sidebar-hover);
}
body.ld-course-home .phaseA-head .name {
  font-size: 18px;
  font-weight: 700;
}
body.ld-course-home .phaseA-chevron {
  width: 30px;
  height: 30px;
  stroke: rgba(255, 255, 255, 0.8);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
body.ld-course-home .phaseA-body {
  padding: 2px 4px 10px 8px;
}
body.ld-course-home .lesson-row {
  border-radius: 6px;
}
body.ld-course-home .lesson-row:hover {
  background: var(--sidebar-hover);
}
body.ld-course-home .lesson-row.active {
  background: rgba(124, 9, 247, 0.16);
}
body.ld-course-home .lesson-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  padding: 8px 10px;
}
body.ld-course-home .lesson-row.active .lesson-name {
  color: #fff;
  font-weight: 700;
}
body.ld-course-home .lesson-name {
  font-size: 18px;
  font-weight: 600;
}
body.ld-course-home .lesson-sub {
  font-size: 18px;
  color: var(--subtext);
}
body.ld-course-home .topic-list {
  margin: 0 0 4px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.ld-course-home .topic-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 5px;
}
body.ld-course-home .topic-row:hover {
  background: var(--sidebar-hover);
  color: #fff;
}
body.ld-course-home .topic-row.active {
  background: rgba(124, 9, 247, 0.16);
  color: #fff;
  font-weight: 600;
}
body.ld-course-home .quiz-row {
  padding-left: 22px;
  font-style: italic;
}
body.ld-course-home .quiz-row .quiz-icon {
  width: 12px;
  height: 12px;
  stroke: var(--subtext);
  flex-shrink: 0;
}
body.ld-course-home {
  /* status dot (not-started / partial / complete) shown next to each
     lesson/topic row once you're inside a lesson — not shown on course home */
}
body.ld-course-home .step-status {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
body.ld-course-home .step-status.not-started {
  border: 1.5px solid rgba(255, 255, 255, 0.25);
}
body.ld-course-home .step-status.partial {
  background: conic-gradient(var(--grad-end) 0deg 120deg, rgba(255, 255, 255, 0.15) 120deg 360deg);
}
body.ld-course-home .step-status.partial::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--sidebar-bg);
  border-radius: 50%;
}
body.ld-course-home .step-status.complete {
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
}
body.ld-course-home .step-status.complete::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 1px;
  width: 4px;
  height: 7px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: rotate(45deg);
}
body.ld-course-home {
  /* ---------------- MAIN ---------------- */
}
body.ld-course-home .main {
  flex: 1;
  min-width: 0;
}
body.ld-course-home .hero {
  padding: 44px 40px 30px;
  background: radial-gradient(ellipse 800px 400px at 15% 0%, rgba(124, 9, 247, 0.28), transparent 60%), radial-gradient(ellipse 600px 400px at 100% 100%, rgba(252, 11, 171, 0.18), transparent 55%), #05040a;
}
body.ld-course-home .hero-inner {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
body.ld-course-home .eyebrow {
  font-size: 18px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--subtext);
  margin-bottom: 10px;
}
body.ld-course-home .hero h1 {
  font-weight: 700;
  font-size: 3rem;
  margin: 0;
}
@media (max-width: 900px) {
  body.ld-course-home .hero h1 {
    font-size: 2rem;
  }
}
@media (max-width: 350px) {
  body.ld-course-home .hero h1 {
    font-size: 1.3rem;
  }
}
body.ld-course-home .instructor-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  padding: 6px 16px 6px 6px;
}
body.ld-course-home .instructor-chip .name {
  font-size: 18px;
  font-weight: 600;
}
body.ld-course-home .instructor-chip .role {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.45);
}
body.ld-course-home .avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}
body.ld-course-home {
  /* tabs (populated by course content block) */
}
body.ld-course-home .tab-bar {
  display: flex;
  gap: 4px;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 960px) {
  body.ld-course-home .tab-bar {
    flex-direction: column;
  }
}
body.ld-course-home .tab {
  padding: 14px 18px;
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
body.ld-course-home .tab.active {
  color: #fff;
  border-color: var(--grad-end);
}
body.ld-course-home .tab-content {
  display: none;
}
body.ld-course-home .tab-content.active {
  display: block;
}
body.ld-course-home .panel-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 30px 40px 80px;
}
@media (max-width: 900px) {
  body.ld-course-home .panel-inner {
    padding: 30px 20px 80px;
  }
}
body.ld-course-home .dark-panel {
  background: #05040a;
}
body.ld-course-home .light-panel {
  background: #FAF9FF;
  color: #333;
}
body.ld-course-home .light-panel h3 {
  color: #480174;
}
body.ld-course-home .light-panel p, body.ld-course-home .light-panel li {
  color: #555;
}
body.ld-course-home .light-panel .announce-card, body.ld-course-home .light-panel .instructor-card, body.ld-course-home .light-panel .thread-row,
body.ld-course-home .light-panel .thread-expanded, body.ld-course-home .light-panel .participation-tracker,
body.ld-course-home .light-panel .tmpl-card {
  background: #FFFFFF;
  border-color: rgba(72, 1, 116, 0.14);
  box-shadow: 0 4px 20px rgba(72, 1, 116, 0.06);
}
body.ld-course-home .light-panel .announce-body, body.ld-course-home .light-panel .post-text, body.ld-course-home .light-panel .t-title {
  color: #444;
}
body.ld-course-home .light-panel .name, body.ld-course-home .light-panel h4 {
  color: #1a1a1a;
}
body.ld-course-home .light-panel .announce-time, body.ld-course-home .light-panel .t-meta, body.ld-course-home .light-panel .t-phase, body.ld-course-home .light-panel .time {
  color: #888;
}
body.ld-course-home .light-panel .prompt {
  color: #666;
}
body.ld-course-home .light-panel .post.instructor {
  background: rgba(124, 9, 247, 0.06);
}
body.ld-course-home .light-panel .reply-box textarea {
  background: #F5F3FA;
  border-color: rgba(72, 1, 116, 0.15);
  color: #333;
}
body.ld-course-home .light-panel .reply-box textarea::placeholder {
  color: #999;
}
body.ld-course-home .light-panel .schedule-table td {
  color: #555;
}
body.ld-course-home .light-panel .schedule-table th, body.ld-course-home .light-panel .schedule-table td {
  border-top-color: rgba(72, 1, 116, 0.14);
}
body.ld-course-home .light-panel .part-track {
  background: rgba(72, 1, 116, 0.1);
}
body.ld-course-home .light-panel .note {
  color: #777;
}
body.ld-course-home .light-panel .value {
  color: #480174;
}
body.ld-course-home .light-panel .tmpl-dl {
  color: #480174;
  background: rgba(124, 9, 247, 0.08);
  border-color: rgba(124, 9, 247, 0.2);
}
body.ld-course-home .light-panel .tmpl-note {
  color: #777;
}
body.ld-course-home {
  /* Templates tab */
}
body.ld-course-home .tmpl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 640px) {
  body.ld-course-home .tmpl-grid {
    grid-template-columns: 1fr;
  }
}
body.ld-course-home .tmpl-card {
  background: var(--card-bg);
  border: 1px solid var(--border-faint);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
body.ld-course-home .tmpl-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.ld-course-home .tmpl-icon svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
}
body.ld-course-home .tmpl-info {
  flex: 1;
  min-width: 0;
}
body.ld-course-home .tmpl-info .name {
  font-size: 18px;
  font-weight: 700;
}
body.ld-course-home .tmpl-info .filetype {
  font-size: 18px;
  color: var(--subtext);
  margin-top: 2px;
}
body.ld-course-home .tmpl-dl {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 7px 13px;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
}
body.ld-course-home .tmpl-note {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 20px;
}
body.ld-course-home {
  /* Announcements */
}
body.ld-course-home .announce-card {
  background: var(--card-bg);
  border: 1px solid var(--border-faint);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 14px;
}
body.ld-course-home .announce-card.pinned {
  border-color: var(--grad-end);
}
body.ld-course-home .announce-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
body.ld-course-home .announce-who {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.ld-course-home .announce-who .name {
  font-size: 18px;
  font-weight: 700;
}
body.ld-course-home .announce-who .tag {
  font-size: 18px;
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  padding: 2px 8px;
  border-radius: 100px;
  font-weight: 700;
  margin-left: 6px;
}
body.ld-course-home .announce-time {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.4);
}
body.ld-course-home .announce-body {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.65;
}
body.ld-course-home .pin-label {
  font-size: 18px;
  color: var(--grad-end);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
body.ld-course-home {
  /* Syllabus */
}
body.ld-course-home .syl-section {
  margin-bottom: 28px;
}
body.ld-course-home .syl-section h3 {
  font-size: 18px;
  margin: 0 0 10px;
  font-weight: 700;
}
body.ld-course-home .syl-section p, body.ld-course-home .syl-section li {
  font-size: 18px;
  color: rgba(41, 41, 41, 0.68);
  line-height: 1.7;
}
body.ld-course-home .syl-section .rich-content {
  color: rgba(41, 41, 41, 0.68);
}
body.ld-course-home {
  /* Admin-authored HTML fields (announcement body, instructor bio, how-it-works,
     time commitment) rendered via dangerouslySetInnerHTML. pre-line is a fallback
     for older content saved as plain text with literal newlines rather than real
     <p>/<br> tags — browsers otherwise collapse that whitespace and run lines together.

     Type has to be set on the container, not only on child <p>s: RichText in
     WP 7.x ignores the (long-removed) multiline prop and saves one inline run
     separated by <br>, so there is usually no <p> here at all and a p-only rule
     leaves the text at the browser default 16px instead of the panel's 18px. */
}
body.ld-course-home .rich-content {
  white-space: pre-line;
  font-size: 18px;
  line-height: 1.7;
}
body.ld-course-home .rich-content p {
  margin: 0 0 12px;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}
body.ld-course-home .rich-content p:last-child {
  margin-bottom: 0;
}
body.ld-course-home .instructor-card {
  background: var(--card-bg);
  border: 1px solid var(--border-faint);
  border-radius: 10px;
  padding: 22px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 10px;
}
@media (max-width: 900px) {
  body.ld-course-home .instructor-card {
    flex-direction: column;
    align-items: center;
  }
}
@media (max-width: 900px) {
  body.ld-course-home .instructor-card .instructor-card-text {
    text-align: center;
  }
}
body.ld-course-home .instructor-card .avatar {
  width: 56px;
  height: 56px;
  font-size: 20px;
  flex-shrink: 0;
}
body.ld-course-home .instructor-card h4 {
  font-size: 18px;
  margin: 0 0 4px;
}
body.ld-course-home .instructor-card .cred {
  font-size: 18px;
  color: var(--subtext);
  font-weight: 600;
  margin-bottom: 8px;
}
body.ld-course-home .instructor-card p {
  margin: 0;
  font-size: 18px;
  color: rgba(32, 32, 32, 0.65);
  line-height: 1.6;
}
body.ld-course-home .req-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
body.ld-course-home .req-list li {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body.ld-course-home .req-list li:first-child {
  border-top: none;
}
body.ld-course-home .req-list .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--grad-end);
  margin-top: 7px;
  flex-shrink: 0;
}
body.ld-course-home {
  /* Key Dates — a week-by-week schedule grid, no calendar dates */
}
@media (max-width: 900px) {
  body.ld-course-home .schedule-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
body.ld-course-home .schedule-table {
  width: 100%;
  border-collapse: collapse;
  /* table-layout:fixed plus explicit widths, because the columns carry very
     different amounts of text — a single digit in Week against a full
     sentence in Weekly Project Deliverable. Left to content-based sizing the
     browser renegotiates widths per row and nothing lines up down the table;
     these proportions follow how long each column's text actually runs. */
  table-layout: fixed;
  /* nowrap on Week because the column is sized for its values (one or two
     digits) and would otherwise break its own four-letter header in half. */
}
body.ld-course-home .schedule-table .col-week {
  width: 10%;
  font-weight: 700;
  white-space: nowrap;
}
body.ld-course-home .schedule-table .col-content {
  width: 29%;
}
body.ld-course-home .schedule-table .col-milestone {
  width: 18%;
}
body.ld-course-home .schedule-table .col-deliverable {
  width: 43%;
}
body.ld-course-home .schedule-table th, body.ld-course-home .schedule-table td {
  text-align: left;
  padding: 12px 14px;
  font-size: 18px;
  line-height: 1.55;
  vertical-align: top;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  overflow-wrap: break-word;
}
body.ld-course-home .schedule-table th {
  font-weight: 700;
  border-top: none;
}
body.ld-course-home .schedule-table td {
  color: rgba(255, 255, 255, 0.75);
}
body.ld-course-home .schedule-table {
  /* Below the breakpoint the fixed columns would crush to unreadable
     slivers, so the table keeps a floor width and .schedule-scroll pans. */
}
@media (max-width: 900px) {
  body.ld-course-home .schedule-table {
    min-width: 760px;
  }
}
body.ld-course-home {
  /* Discussion */
}
body.ld-course-home .participation-tracker {
  background: var(--card-bg);
  border: 1px solid var(--border-faint);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
body.ld-course-home .participation-tracker .label {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 6px;
}
body.ld-course-home .participation-tracker .value {
  font-weight: 700;
  font-size: 18px;
}
body.ld-course-home .participation-tracker .note {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.4);
  max-width: 280px;
}
body.ld-course-home .part-track {
  width: 160px;
  height: 5px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  overflow: hidden;
}
body.ld-course-home .part-fill {
  height: 100%;
  width: 33%;
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
}
body.ld-course-home .thread-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid var(--border-faint);
  margin-bottom: 8px;
  cursor: pointer;
}
body.ld-course-home .thread-row:hover {
  border-color: var(--grad-end);
}
body.ld-course-home .thread-row.locked {
  opacity: 0.4;
  cursor: not-allowed;
}
body.ld-course-home .thread-row .t-left {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
body.ld-course-home .thread-row .t-title {
  font-size: 18px;
  font-weight: 600;
}
body.ld-course-home .thread-row .t-phase {
  font-size: 18px;
  color: var(--subtext);
}
body.ld-course-home .thread-row .t-meta {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.4);
  text-align: right;
  white-space: nowrap;
}
body.ld-course-home .unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--grad-end);
  display: inline-block;
  margin-right: 6px;
}
body.ld-course-home .thread-expanded {
  background: var(--card-bg);
  border: 1px solid var(--border-faint);
  border-radius: 10px;
  padding: 22px;
  margin: 14px 0 22px;
}
body.ld-course-home .thread-expanded h4 {
  font-size: 18px;
  margin: 0 0 4px;
}
body.ld-course-home .thread-expanded .prompt {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
}
body.ld-course-home .post {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
body.ld-course-home .post .avatar {
  width: 34px;
  height: 34px;
  font-size: 18px;
  flex-shrink: 0;
}
body.ld-course-home .post.instructor {
  background: rgba(124, 9, 247, 0.08);
  border-left: 2px solid var(--grad-end);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
  margin-left: -14px;
}
@media (max-width: 900px) {
  body.ld-course-home .post.instructor {
    flex-direction: column;
    align-items: center;
  }
}
body.ld-course-home .post-body {
  flex: 1;
}
@media (max-width: 900px) {
  body.ld-course-home .post-body {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
}
body.ld-course-home .post-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
@media (max-width: 900px) {
  body.ld-course-home .post-head {
    text-align: center;
    margin-bottom: 1rem;
  }
}
body.ld-course-home .post-head .name {
  font-size: 18px;
  font-weight: 700;
}
body.ld-course-home .post-head .tag {
  font-size: 18px;
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  padding: 2px 7px;
  border-radius: 100px;
  font-weight: 700;
}
body.ld-course-home .post-head .time {
  font-size: 18px;
  color: rgba(48, 48, 48, 0.35);
}
body.ld-course-home .post-text {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
}
body.ld-course-home .reply-box {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
body.ld-course-home .reply-box textarea {
  flex: 1;
  min-height: 44px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 12px;
  color: #fff;
  font-size: 18px;
  resize: vertical;
}
body.ld-course-home .reply-btn {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  padding: 0 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
body.ld-course-home {
  /* ---------------- LESSON / TOPIC PAGES ---------------- */
}
body.ld-course-home .main {
  transition: margin-right 0.25s ease;
}
@media (min-width: 901px) {
  body.ld-course-home .main.notes-open {
    margin-right: 380px;
  }
}
body.ld-course-home .lesson-nav {
  background: var(--sidebar-bg);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}
body.ld-course-home .lesson-nav .lb {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
}
body.ld-course-home .lesson-nav .lb b {
  color: #fff;
  font-weight: 600;
}
body.ld-course-home .nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
body.ld-course-home .screen-count {
  font-family: var(--font-mono);
  font-size: 18px;
  color: rgba(255, 255, 255, 0.45);
}
body.ld-course-home .notes-trigger {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 100px;
  cursor: pointer;
}
body.ld-course-home .notes-trigger:hover {
  border-color: var(--grad-end);
}
body.ld-course-home .notes-trigger svg {
  width: 16px;
  height: 16px;
  stroke: var(--subtext);
}
body.ld-course-home .notes-trigger .badge {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  color: #fff;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
}
body.ld-course-home {
  /* Step content — the_content() output for a lesson/topic. Authors can wrap
     a Group block with the "screen-dark" or "screen-light" additional CSS
     class to get the hook/concept treatments from the design mockup;
     unstyled content just sits on the page's default dark background. */
}
body.ld-course-home .step-content {
  max-width: 100%;
}
@media (max-width: 900px) {
  body.ld-course-home .step-content {
    padding: 30px 20px 60px;
  }
}
body.ld-course-home {
  /* Bottom "mark complete / continue" bar — see inc/stepProgressNav.php.
     .sfwd-mark-complete is LearnDash's own form wrapper around the button;
     it's styled here rather than replaced so the real mark-complete submit
     (nonce, prerequisite checks, etc.) stays untouched. */
}
body.ld-course-home .step-progress-nav {
  max-width: 920px;
  margin: 0 auto;
  padding: 20px 40px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--border-faint);
}
@media (max-width: 900px) {
  body.ld-course-home .step-progress-nav {
    padding: 16px 20px 40px;
  }
}
body.ld-course-home .step-progress-nav .sfwd-mark-complete {
  margin: 0;
}
body.ld-course-home {
  /* Message shown when a gated Continue button is clicked/hovered before its
     screen's interaction is done (_ssg_requires_interaction) — see
     inc/stepProgressNav.php. Sits right above the nav bar; hidden until
     .show is toggled on. */
}
body.ld-course-home .step-gate-msg {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 40px;
  font-size: 14px;
  color: var(--grad-end);
  text-align: right;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
body.ld-course-home .step-gate-msg.show {
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 900px) {
  body.ld-course-home .step-gate-msg {
    padding: 0 20px;
    text-align: left;
  }
}
body.ld-course-home .step-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 100px;
  padding: 12px 28px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}
body.ld-course-home .step-btn--prev {
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  border: 1.5px solid var(--border-faint);
}
body.ld-course-home .step-btn--prev:hover {
  border-color: var(--grad-end);
  color: #fff;
}
body.ld-course-home .step-btn--prev.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}
body.ld-course-home .step-btn--next {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  color: #fff;
  box-shadow: 0 6px 18px rgba(124, 9, 247, 0.35);
}
body.ld-course-home .step-btn--next[disabled], body.ld-course-home .step-btn--next.is-gated {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
body.ld-course-home {
  /* Highlight pulse on the current screen, triggered when the learner clicks
     a gated Continue button — see inc/stepProgressNav.php. Uses brightness()
     rather than touching background/gradient values directly so it works
     regardless of which dark/light treatment the current topic's own
     .ssg-topic \3c style> block set up. */
}
@keyframes ssgGatePulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.35);
  }
}
body.ld-course-home .ssg-gate-pulse {
  animation: ssgGatePulse 0.9s ease;
}
body.ld-course-home {
  /* ---------------- QUIZ PAGES ----------------
     Reskins LearnDash's WpProQuiz shortcode output (learndash_quiz_shortcode())
     to match the dark course-shell theme instead of its default light
     styling. Class names (wpProQuiz_*) come from the wp-pro-quiz library
     bundled in sfwd-lms and are stable across LD versions, but the exact
     markup can vary by quiz question type — check the rendered DOM on this
     site and extend these rules if a question type needs more coverage. */
}
body.ld-course-home .quiz-content .wpProQuiz_quiz {
  max-width: 680px;
  margin: 0 auto;
}
body.ld-course-home .quiz-content .wpProQuiz_content {
  background: var(--card-bg);
  border: 1px solid var(--border-faint);
  border-radius: 12px;
  padding: 32px 36px;
  color: #fff;
}
@media (max-width: 900px) {
  body.ld-course-home .quiz-content .wpProQuiz_content {
    padding: 24px 20px;
  }
}
body.ld-course-home .quiz-content .wpProQuiz_questionList {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.ld-course-home .quiz-content .wpProQuiz_questionList li {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
body.ld-course-home .quiz-content .wpProQuiz_questionList li:hover {
  border-color: var(--subtext);
}
body.ld-course-home .quiz-content .wpProQuiz_questionList li label {
  color: #fff;
  font-size: 18px;
}
body.ld-course-home .quiz-content .wpProQuiz_questionList li input {
  accent-color: var(--grad-end);
  margin-right: 10px;
}
body.ld-course-home .quiz-content .wpProQuiz_response {
  border-radius: 8px;
  padding: 14px 16px;
  margin: 16px 0;
  font-size: 18px;
}
body.ld-course-home .quiz-content .wpProQuiz_response .wpProQuiz_correct {
  color: #3ddc84;
}
body.ld-course-home .quiz-content .wpProQuiz_response .wpProQuiz_incorrect {
  color: var(--grad-end);
}
body.ld-course-home .quiz-content .wpProQuiz_button {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  padding: 10px 22px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  margin: 4px 6px 4px 0;
}
body.ld-course-home .quiz-content .wpProQuiz_button:hover {
  opacity: 0.9;
}
body.ld-course-home .quiz-content .wpProQuiz_QuestionButton {
  width: fit-content;
  height: 36px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  margin: 3px;
}
body.ld-course-home .quiz-content .wpProQuiz_QuestionButton.wpProQuiz_QuestionButtonCurrent {
  background: linear-gradient(135deg, var(--grad-start), var(--grad-end));
  border-color: transparent;
}
body.ld-course-home .quiz-content .wpProQuiz_progress {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  overflow: hidden;
  height: 6px;
  margin-bottom: 24px;
}
body.ld-course-home .quiz-content .wpProQuiz_progress_bar {
  height: 100%;
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
}
body.ld-course-home .quiz-content .wpProQuiz_results h3 {
  color: #fff;
  font-size: 22px;
}
body.ld-course-home .quiz-content .wpProQuiz_results p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
}
body.ld-course-home .learndash-wrapper {
  background-color: #000 !important;
}
body.ld-course-home .wpProQuiz_points {
  background-color: #000 !important;
}
body.ld-course-home .wpProQuiz_answerCorrect {
  color: green;
}
body.ld-course-home .wpProQuiz_correct {
  color: green;
}
body.ld-course-home .wpProQuiz_questionListItem label, body.ld-course-home .wpProQuiz_answerCorrectIncomplete label {
  background-color: black !important;
  border: 2px solid #e2e7ed;
}
body.ld-course-home .screen-dark {
  margin: 0 -40px;
  padding: 56px 40px;
  background: radial-gradient(ellipse 700px 400px at 20% 0%, rgba(124, 9, 247, 0.3), transparent 60%), radial-gradient(ellipse 600px 400px at 100% 100%, rgba(252, 11, 171, 0.2), transparent 55%);
}
@media (max-width: 900px) {
  body.ld-course-home .screen-dark {
    margin: 0 -20px;
    padding: 40px 20px;
  }
}
body.ld-course-home .screen-inner {
  max-width: 680px;
  margin: 0 auto;
}
body.ld-course-home .video-placeholder {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 18px;
  margin-bottom: 24px;
}
body.ld-course-home .screen-light {
  margin: 0 -40px;
  padding: 48px 40px;
  background: #FAF9FF;
}
@media (max-width: 900px) {
  body.ld-course-home .screen-light {
    margin: 0 -20px;
    padding: 40px 20px;
  }
}
body.ld-course-home .light-card {
  max-width: 640px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 10px;
  padding: 34px 40px;
  position: relative;
  box-shadow: 0 10px 40px rgba(72, 1, 116, 0.08);
}
body.ld-course-home .light-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, var(--grad-start), var(--grad-end));
}
body.ld-course-home .light-card h2 {
  font-weight: 700;
  font-size: clamp(22px, 3vw, 29px);
  line-height: 1.3;
  color: #480174;
  margin: 14px 0 16px;
}
body.ld-course-home .light-card h2 .accent {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.ld-course-home .light-card p {
  color: #555;
  font-size: 18px;
  line-height: 1.75;
  margin: 0 0 12px;
}
body.ld-course-home .light-card .callout {
  font-style: italic;
  color: #480174;
  font-size: 18px;
  margin-top: 16px;
}
body.ld-course-home .light-eyebrow {
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grad-end);
  font-weight: 700;
  border-bottom: 2px solid var(--grad-end);
  display: inline-block;
  padding-bottom: 4px;
}
body.ld-course-home {
  /* ---------------- NOTES DRAWER ---------------- */
}
body.ld-course-home .notes-drawer {
  width: 60vw;
  min-width: 320px;
  max-width: 90vw;
  background: var(--card-bg);
  border-left: 1px solid var(--border-faint);
  height: 100vh;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  z-index: 20;
}
body.ld-course-home .notes-drawer.open {
  transform: translateX(0);
}
body.ld-course-home .notes-drawer.resizing {
  transition: none;
  user-select: none;
}
@media (max-width: 900px) {
  body.ld-course-home .notes-drawer {
    width: 100% !important;
    max-width: 100%;
  }
}
body.ld-course-home .nd-resize-handle {
  position: absolute;
  left: -4px;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: ew-resize;
  z-index: 1;
}
body.ld-course-home .nd-resize-handle:hover {
  background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 900px) {
  body.ld-course-home .nd-resize-handle {
    display: none;
  }
}
body.ld-course-home .notes-drawer.resizing .nd-resize-handle {
  background: rgba(255, 255, 255, 0.08);
}
body.ld-course-home .nd-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-faint);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.ld-course-home .nd-header h3 {
  font-weight: 700;
  font-size: 18px;
  margin: 0;
}
body.ld-course-home .nd-header .close {
  background: none;
  border: none;
  color: rgb(255, 255, 255);
  font-size: 18px;
  cursor: pointer;
}
body.ld-course-home .nd-context {
  padding: 12px 20px 0;
  font-size: 18px;
  color: var(--subtext);
  font-weight: 600;
}
body.ld-course-home .nd-editor {
  padding: 14px 20px 8px;
}
body.ld-course-home .nd-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
body.ld-course-home .nd-toolbar button {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  cursor: pointer;
  font-weight: 700;
}
body.ld-course-home .nd-textarea {
  width: 100%;
  min-height: 120px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px;
  color: #fff;
  font-size: 18px;
  font-family: var(--font-sans);
  resize: vertical;
}
body.ld-course-home .nd-textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
body.ld-course-home .nd-editor-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
body.ld-course-home .nd-save-btn {
  background: linear-gradient(90deg, var(--grad-start), var(--grad-end));
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
body.ld-course-home .nd-save-btn:hover {
  opacity: 0.92;
}
body.ld-course-home .nd-save-status {
  font-size: 18px;
  color: rgba(61, 220, 132, 0.85);
  min-height: 1.4em;
  display: flex;
  align-items: center;
  gap: 5px;
}
body.ld-course-home .nd-save-status.error {
  color: var(--grad-end);
}
body.ld-course-home .nd-divider {
  padding: 16px 20px 8px;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  font-weight: 600;
  border-top: 1px solid var(--border-faint);
  margin-top: 6px;
}
body.ld-course-home .nd-list {
  padding: 0 20px;
  flex: 1;
  overflow-y: auto;
}
body.ld-course-home .nd-empty {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.4);
}
body.ld-course-home .nd-note {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.ld-course-home .nd-note .tag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  gap: 10px;
}
body.ld-course-home .nd-note .tag {
  font-size: 18px;
  color: var(--subtext);
  font-weight: 600;
}
body.ld-course-home .nd-note .time {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}
body.ld-course-home .nd-note .snippet {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
  margin-bottom: 5px;
}
body.ld-course-home .nd-note .snippet p {
  margin: 0 0 6px;
}
body.ld-course-home .nd-note .snippet ul {
  margin: 0 0 6px;
  padding-left: 18px;
}
body.ld-course-home .nd-note .snippet li {
  margin: 0 0 2px;
}
body.ld-course-home .nd-note .snippet p:last-child, body.ld-course-home .nd-note .snippet ul:last-child {
  margin-bottom: 0;
}
body.ld-course-home .nd-note.editing .nd-edit-textarea {
  margin-bottom: 8px;
  min-height: 90px;
}
body.ld-course-home .nd-note-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
}
body.ld-course-home .jump {
  font-size: 18px;
  color: var(--grad-end);
  text-decoration: none;
  font-weight: 600;
  margin-right: auto;
}
body.ld-course-home .edit-note, body.ld-course-home .delete-note, body.ld-course-home .cancel-edit {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.35);
  font-size: 18px;
  cursor: pointer;
  padding: 0;
}
body.ld-course-home .edit-note:hover, body.ld-course-home .delete-note:hover, body.ld-course-home .cancel-edit:hover {
  color: var(--grad-end);
}
body.ld-course-home .save-edit {
  background: none;
  border: none;
  color: var(--grad-end);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
body.ld-course-home .save-edit:hover {
  opacity: 0.8;
}
body.ld-course-home .nd-export {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  border-top: 1px solid var(--border-faint);
  flex-wrap: wrap;
}
body.ld-course-home .nd-export-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  flex: 1;
  justify-content: center;
  white-space: nowrap;
}
body.ld-course-home .nd-export-btn:hover {
  border-color: var(--grad-end);
}
body.ld-course-home .nd-export-btn svg {
  width: 15px;
  height: 15px;
  stroke: var(--subtext);
  flex-shrink: 0;
}