:root {
  --color-bg: #0f172a;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-border: #e2e8f0;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
  --color-primary: #4f46e5;
  --color-primary-dark: #4338ca;
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --radius: 8px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-surface-muted);
  line-height: 1.5;
}

a { color: var(--color-primary); }

.site-header {
  background: var(--color-bg);
  color: #fff;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header a { color: #fff; text-decoration: none; font-weight: 600; }
.site-header nav a { margin-left: 1.25rem; color: #cbd5e1; font-weight: 400; font-size: 0.95rem; }
.site-header nav a:hover { color: #fff; }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.container-narrow {
  max-width: 480px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}

h1 { font-size: 1.75rem; margin-top: 0; }
h2 { font-size: 1.25rem; }

.btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.6rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { background: var(--color-primary-dark); }
.btn-block { display: block; width: 100%; text-align: center; }

.form-group { margin-bottom: 1rem; }
.form-group label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.9rem; }
.form-group input:not([type="checkbox"]):not([type="radio"]), .form-group select, .form-group textarea {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.95rem;
}
.form-group input[type="checkbox"], .form-group input[type="radio"] {
  width: auto;
  padding: 0;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.form-group textarea { resize: vertical; font-family: inherit; line-height: 1.5; }
.form-help { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 0.25rem; }
.form-error { color: var(--color-danger); font-size: 0.85rem; margin-top: 0.25rem; }

.alert { padding: 0.85rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: 0.9rem; }
.alert-danger { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.alert-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.checklist li:last-child { border-bottom: none; }
.check-pass { color: var(--color-success); font-weight: 700; }
.check-fail { color: var(--color-danger); font-weight: 700; }
.check-label { font-weight: 600; }
.check-message { color: var(--color-text-muted); font-size: 0.9rem; display: block; }

.steps { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.step { padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--color-border); color: var(--color-text-muted); font-size: 0.8rem; }
.step.active { background: var(--color-primary); color: #fff; }
.step.done { background: #dcfce7; color: #166534; }

table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th, table.data-table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-border); font-size: 0.9rem; }
table.data-table th { color: var(--color-text-muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; }

.badge { display: inline-block; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; }
.badge-active { background: #dcfce7; color: #166534; }
.badge-disabled { background: #fee2e2; color: #991b1b; }

.text-muted { color: var(--color-text-muted); }
.mt-1 { margin-top: 1rem; }
.mb-1 { margin-bottom: 1rem; }

/* Lesson reader content blocks */
.lesson-content { font-size: 1.02rem; }
.lesson-content h1, .lesson-content h2, .lesson-content h3, .lesson-content h4 { margin-top: 1.5rem; }
.lesson-content p { line-height: 1.7; margin: 0 0 1rem; }
.lesson-content ul, .lesson-content ol { margin: 0 0 1rem; padding-left: 1.4rem; line-height: 1.7; }
.content-table { width: 100%; border-collapse: collapse; margin: 0 0 1rem; }
.content-table th, .content-table td { border: 1px solid var(--color-border); padding: 0.5rem 0.7rem; text-align: left; font-size: 0.92rem; }
.content-image { margin: 0 0 1rem; text-align: center; }
.content-image img { max-width: 100%; border-radius: var(--radius); }
.content-image figcaption { color: var(--color-text-muted); font-size: 0.85rem; margin-top: 0.4rem; }
.content-attachment a { display: inline-block; background: var(--color-surface-muted); border: 1px solid var(--color-border); padding: 0.5rem 0.9rem; border-radius: var(--radius); text-decoration: none; }
.content-note { border-radius: var(--radius); padding: 0.85rem 1rem; margin: 0 0 1rem; }
.content-note-info { background: #eff6ff; border: 1px solid #bfdbfe; }
.content-note-warning { background: #fffbeb; border: 1px solid #fde68a; }
.content-note-important { background: #fef2f2; border: 1px solid #fecaca; }
.content-document-pages img.document-page { max-width: 100%; display: block; margin: 0 0 1rem; border: 1px solid var(--color-border); border-radius: var(--radius); }

/* Course catalogue */
.course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.course-card { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); text-decoration: none; color: inherit; display: block; }
.course-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; display: block; background: var(--color-border); }
.course-detail-thumbnail { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; border-radius: var(--radius); margin-bottom: 1rem; background: var(--color-bg); }
.current-thumbnail { margin: .5rem 0 1rem; }
.current-thumbnail img { display: block; width: min(100%, 420px); height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #f1f5f9; border: 1px solid #dbe3ee; border-radius: .6rem; }
.media-library-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.media-upload-card { margin-bottom: 1.25rem; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin: 1rem 0; }
.media-card { overflow: hidden; padding: 0; }
.media-card > a { display: block; background: #eef2f7; }
.media-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.media-card-body { display: grid; gap: .5rem; padding: .8rem; }
.media-card-body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-card-body small { color: #64748b; }
.media-card-body form, .media-card-body .btn { width: 100%; margin: 0; }
.media-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.media-card-actions .btn { text-align: center; padding: .45rem .6rem; }
.media-edit-layout { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(300px, 1.2fr); gap: 1.5rem; align-items: start; }
.media-edit-preview { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; border-radius: var(--radius); background: #eef2f7; border: 1px solid var(--color-border); }
.media-metadata { display: grid; grid-template-columns: max-content 1fr; gap: .4rem .8rem; margin: 1rem 0; font-size: .88rem; }
.media-metadata dt { font-weight: 700; }.media-metadata dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .media-library-header { display: block; } .media-library-header .btn { margin-bottom: 1rem; } }
.course-card .course-card-body { padding: 0.9rem; }
.course-card h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.progress-track { background: var(--color-border); border-radius: 999px; height: 6px; overflow: hidden; margin-bottom: .35rem; }
.progress-track > div { background: var(--color-primary); height: 100%; }
.course-progress-copy { margin: 0 0 .75rem; font-size: .8rem; }
.dashboard-section { margin-top: 2rem; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: .8rem; }
.section-heading h2, .section-heading p { margin-top: 0; }.section-heading h2 { margin-bottom: 0; }
.dashboard-empty { padding: 1.35rem; }.dashboard-empty h3 { margin-top: 0; }
.discovery-banner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: linear-gradient(135deg,#fff 0%,#eef2ff 100%); }
.discovery-banner h2 { margin: 0 0 .25rem; }.discovery-banner p { margin-bottom: 0; }
.discovery-banner > div:last-child { display: flex; gap: .5rem; flex-wrap: wrap; flex-shrink: 0; }
.table-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.btn-compact { padding: .4rem .7rem; font-size: .82rem; }
.action-menu { position: relative; }.action-menu > summary { list-style: none; }.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu > summary::after { content: " ▾"; }
.action-menu-panel { position: absolute; right: 0; z-index: 10; min-width: 175px; margin-top: .35rem; padding: .35rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; box-shadow: 0 12px 30px rgba(15,23,42,.16); }
.action-menu-panel a { display: block; padding: .5rem .65rem; border-radius: 6px; text-decoration: none; white-space: nowrap; }
.action-menu-panel a:hover, .action-menu-panel a:focus { background: #eef2ff; }

/* Course-level hero thumbnail (Course Introduction / Admin Preview).
   aspect-ratio (not a fixed max-height) keeps the box itself
   proportioned like the platform's own recommended 16:9 thumbnail
   standard at every viewport width, and object-fit: contain (not
   cover) guarantees the full uploaded image is always visible - never
   cropping the top/bottom of the artwork to fill the box. Any
   letterboxing only appears if a given image isn't exactly 16:9. */
.course-hero-image { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; display: block; border-radius: var(--radius); margin-bottom: 1.5rem; background: var(--color-bg); }

/* Reader layout */
.reader-layout { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }
.reader-nav { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem; background: var(--color-surface); position: sticky; top: 1rem; }
.reader-nav h4 { margin: 0.75rem 0 0.35rem; font-size: 0.85rem; text-transform: uppercase; color: var(--color-text-muted); }
.reader-nav ul { list-style: none; padding: 0; margin: 0 0 0.5rem; }
.reader-nav li a { display: block; padding: 0.3rem 0.4rem; border-radius: 6px; font-size: 0.9rem; text-decoration: none; }
.reader-nav li a.current { background: var(--color-primary); color: #fff; }
.reader-nav li a.completed::before { content: "✓ "; color: var(--color-success); }
.reader-nav-details > summary { display: none; cursor: pointer; font-weight: 700; }
.reader-nav-label { font-size: .8rem; margin: .5rem 0 0; }
.reader-breadcrumb { color: var(--color-text-muted); margin-top: 0; }

/* Course Introduction reader */
.intro-reading-pane { min-width: 0; }
.intro-reader-card { padding: 0; overflow: hidden; }
.intro-reader-header { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 1.5rem; align-items: center; padding: 1.75rem; border-bottom: 1px solid var(--color-border); background: linear-gradient(135deg, #fff 0%, #eef2ff 100%); }
.intro-reader-header .course-hero-image { width: 180px; margin: 0; border-radius: 12px; }
.intro-reader-heading h1 { margin-bottom: .35rem; font-size: clamp(1.65rem, 4vw, 2.25rem); line-height: 1.15; }
.intro-eyebrow { margin: 0 0 .4rem; color: var(--color-primary); font-size: .76rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.intro-section-progress { margin: 0; font-size: .88rem; }
.intro-section-content { max-width: 720px; padding: 2rem 1.75rem 2.25rem; margin: 0 auto; }
.intro-section-content > :first-child { margin-top: 0; }
.intro-section-content .content-table { display: block; overflow-x: auto; white-space: nowrap; }
.intro-section-navigation { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.intro-preview-notice { display: flex; gap: .65rem; align-items: center; flex-wrap: wrap; }
.intro-preview-notice a { margin-left: auto; }
.btn-secondary { background: #64748b; }
.btn-secondary:hover { background: #475569; }

/* Course Introduction administrator */
.intro-admin-header { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; margin-bottom: 1.5rem; }
.intro-admin-header h1 { margin-bottom: .25rem; }
.intro-admin-status { margin: 0; }
.intro-action-bar, .intro-inline-actions { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.intro-action-bar form, .intro-inline-actions form { margin: 0; }
.btn-danger-outline { background: #fff; color: var(--color-danger); border: 1px solid var(--color-danger); }
.btn-danger-outline:hover { background: #fef2f2; }
.intro-settings-card { display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; }
.intro-settings-card h2 { margin-top: 0; margin-bottom: .25rem; }
.intro-preview-form { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.intro-section-card { padding: 0; overflow: hidden; }
.intro-section-header { display: grid; grid-template-columns: 38px minmax(260px, 1fr) auto; gap: .75rem; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface-muted); }
.intro-section-number { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: 800; }
.intro-title-form { display: flex; gap: .5rem; min-width: 0; }
.intro-title-form input { min-width: 0; flex: 1; padding: .6rem .7rem; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: 1.05rem; font-weight: 700; }
.icon-btn { min-width: 32px; min-height: 32px; border: 1px solid var(--color-border); border-radius: 6px; background: #fff; cursor: pointer; }
.text-danger-btn { border: 0; background: transparent; color: var(--color-danger); cursor: pointer; padding: .35rem; }
.intro-block-list { padding: 1.25rem; }
.intro-block-card { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 1rem; overflow: hidden; background: #fff; }
.intro-block-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem .8rem; background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border); }
.intro-block-label { font-size: .78rem; font-weight: 800; color: var(--color-text-muted); letter-spacing: .04em; text-transform: uppercase; }
.intro-block-preview { padding: 1rem; }
.intro-block-preview > :first-child { margin-top: 0; }
.intro-block-preview > :last-child { margin-bottom: 0; }
.intro-editor-details { border-top: 1px solid var(--color-border); }
.intro-editor-details > summary { cursor: pointer; padding: .75rem 1rem; font-weight: 700; color: var(--color-primary); }
.intro-block-form { padding: 1rem; background: var(--color-surface-muted); }
.intro-add-block { margin: 0 1.25rem 1.25rem; border: 1px dashed #a5b4fc; border-radius: var(--radius); }
.intro-type-picker { padding: 0 1rem; }
.intro-add-section form { display: flex; gap: .5rem; }
.intro-add-section input { flex: 1; min-width: 0; padding: .6rem .7rem; border: 1px solid var(--color-border); border-radius: var(--radius); }
.intro-empty-state { text-align: center; padding: 2.5rem 1.5rem; }
.intro-rich-form { padding: 1.25rem; }
.intro-rich-toolbar { display: flex; gap: .35rem; flex-wrap: wrap; padding: .55rem; border: 1px solid var(--color-border); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--color-surface-muted); position: sticky; top: 0; z-index: 2; }
.intro-rich-toolbar button { border: 1px solid var(--color-border); border-radius: 6px; background: #fff; color: var(--color-text); min-height: 36px; padding: .4rem .65rem; cursor: pointer; }
.intro-rich-toolbar button:hover, .intro-rich-toolbar button:focus { border-color: var(--color-primary); color: var(--color-primary); outline: none; }
.intro-rich-editor { min-height: 260px; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: 0 0 var(--radius) var(--radius); background: #fff; line-height: 1.7; }
.intro-rich-editor:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); outline: none; }
.intro-rich-editor:empty::before { content: attr(data-placeholder); color: var(--color-text-muted); pointer-events: none; }
.intro-rich-editor blockquote, .content-rich-text blockquote { margin: 1rem 0; padding: .85rem 1rem; border-left: 4px solid var(--color-primary); background: #eef2ff; border-radius: 0 var(--radius) var(--radius) 0; }
.intro-rich-editor > :first-child { margin-top: 0; }
.intro-rich-editor > :last-child { margin-bottom: 0; }
.intro-rich-save { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-top: .75rem; }
.intro-supplemental-list { padding: 0 1.25rem; }
.intro-supplemental-list h3 { font-size: 1rem; }
.intro-quick-add { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; padding: 0 1.25rem 1.25rem; }
.intro-quick-add .intro-editor-details { border: 1px dashed #a5b4fc; border-radius: var(--radius); }
.content-rich-text > :first-child { margin-top: 0; }
.content-rich-text > :last-child { margin-bottom: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (min-width: 801px) {
  .reader-nav-details:not([open]) > :not(summary) { display: block; }
}

@media (max-width: 800px) {
  .reader-layout { grid-template-columns: 1fr; gap: 1rem; }
  .reader-nav { position: static; padding: 0; }
  .reader-nav-details > summary { display: block; padding: 1rem; }
  .reader-nav-details:not([open]) > :not(summary) { display: none; }
  .reader-nav-details[open] { padding: 0 1rem 1rem; }
  .reader-nav-details[open] > summary { margin: 0 -1rem .75rem; }
  .intro-reader-header { grid-template-columns: 1fr; padding: 1.25rem; }
  .intro-reader-header .course-hero-image { width: 100%; max-width: 260px; grid-row: 1; }
  .intro-section-content { padding: 1.5rem 1.25rem; }
  .intro-section-navigation .btn { padding: .65rem .85rem; }
  .intro-admin-header, .intro-settings-card { flex-direction: column; }
  .intro-section-header { grid-template-columns: 38px 1fr; }
  .intro-section-header > .intro-inline-actions { grid-column: 1 / -1; }
  .intro-rich-save { align-items: stretch; flex-direction: column; }
  .intro-quick-add { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .container { padding: 1.25rem .85rem; }
  .intro-title-form { flex-direction: column; }
  .intro-action-bar { width: 100%; }
  .intro-action-bar form, .intro-action-bar .btn { width: 100%; text-align: center; }
  .intro-section-navigation { align-items: stretch; }
  .discovery-banner, .section-heading { align-items: stretch; flex-direction: column; }
  .discovery-banner > div:last-child, .discovery-banner .btn { width: 100%; text-align: center; }
  .media-edit-layout { grid-template-columns: 1fr; }
}
/* Content-first course authoring */
.builder-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1.5rem;margin-bottom:1.25rem}.builder-header h1{margin:.1rem 0 .35rem}.builder-actions{display:flex;gap:.6rem;flex-wrap:wrap}.builder-status{display:inline-block;padding:.2rem .6rem;border-radius:999px;background:#e0e7ff;color:#3730a3;font-size:.8rem;font-weight:700}.course-builder{display:grid;grid-template-columns:minmax(250px,310px) minmax(0,1fr);gap:1.25rem;align-items:start}.builder-outline{position:sticky;top:1rem;padding:1rem;max-height:calc(100vh - 2rem);overflow:auto}.builder-outline h2{font-size:1rem;margin:0 0 .75rem;text-transform:uppercase;color:#64748b}.builder-outline-group{border-top:1px solid #e2e8f0;padding:.45rem 0}.builder-outline-item,.builder-outline-child{display:block;padding:.55rem .65rem;border-radius:.45rem;text-decoration:none;color:#334155}.builder-outline-select{margin:0}.builder-outline-select .builder-outline-item{width:100%;border:0;background:transparent;text-align:left;font:inherit;cursor:pointer}.builder-outline-child{padding-left:1.25rem;font-size:.92rem}.builder-outline-item:hover,.builder-outline-child:hover,.builder-outline-item.is-active,.builder-outline-child.is-active{background:#ede9fe;color:#4338ca}.builder-outline-row{display:flex;align-items:center}.builder-outline-row>.builder-outline-item{flex:1}.builder-move-actions{display:flex}.builder-move-actions form{margin:0}.builder-inline-add,.builder-add-form,.builder-title-form{display:flex;gap:.5rem;align-items:center}.builder-inline-add{margin:.4rem .3rem}.builder-inline-add input,.builder-add-form input,.builder-title-form input{flex:1;min-width:0}.builder-panel{max-width:900px;padding:1.5rem}.builder-panel h2{margin-top:.2rem}.builder-fields{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.readiness-list{display:grid;gap:.65rem;margin:1.25rem 0}.readiness-item{display:flex;gap:.75rem;padding:.8rem;border:1px solid #e2e8f0;border-radius:.55rem}.readiness-item>span{display:grid;place-items:center;flex:0 0 1.7rem;height:1.7rem;border-radius:50%;font-weight:800}.readiness-item div{display:flex;flex-direction:column}.readiness-item small{color:#64748b}.readiness-item.is-ready>span{background:#dcfce7;color:#166534}.readiness-item.is-incomplete>span{background:#fee2e2;color:#991b1b}.alert-warning{background:#fffbeb;border-color:#fde68a;color:#92400e}.intro-rich-editor table{width:100%;border-collapse:collapse}.intro-rich-editor th,.intro-rich-editor td{border:1px solid #cbd5e1;padding:.55rem}.builder-panel hr{border:0;border-top:1px solid #e2e8f0;margin:1.5rem 0}
@media(max-width:850px){.builder-header{display:block}.builder-actions{margin-top:1rem}.course-builder{grid-template-columns:1fr}.builder-outline{position:static;max-height:none}.builder-fields{grid-template-columns:1fr}}
.builder-assessment-link{display:grid;grid-template-columns:1.35rem minmax(0,1fr) auto;align-items:center;gap:.35rem;padding:.35rem .5rem .35rem .65rem;font-size:.82rem}.builder-assessment-link.is-module{padding-left:.9rem}.builder-assessment-link.is-lesson{padding-left:1.6rem}.builder-assessment-icon{display:grid;place-items:center;width:1.2rem;height:1.2rem;border-radius:50%;background:#fef3c7;color:#92400e;font-weight:800}.builder-assessment-link>a:first-of-type{min-width:0;color:#334155;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.builder-assessment-link>a:first-of-type:hover{color:#4338ca;text-decoration:underline}.builder-assessment-preview{color:#4f46e5;font-size:.76rem}
.media-picker{width:min(920px,92vw);max-height:82vh;border:0;border-radius:.8rem;padding:1.2rem;box-shadow:0 24px 70px rgba(15,23,42,.3)}.media-picker::backdrop{background:rgba(15,23,42,.55)}.media-picker-header{display:flex;justify-content:space-between;gap:1rem}.media-picker-header h3{margin:0}.media-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;max-height:55vh;overflow:auto;margin:1rem 0}.media-picker-item{border:1px solid #dbe3ee;border-radius:.55rem;background:#fff;padding:.45rem;text-align:left;cursor:pointer;color:#0f172a}.media-picker-item:hover{border-color:var(--color-primary);background:#f5f3ff}.media-picker-item img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#eef2f7;border-radius:.35rem}.media-picker-item span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.35rem;font-size:.8rem}.academy-media-embed{position:relative;margin:1.25rem 0;padding:.4rem;border:2px dashed #a5b4fc;border-radius:.6rem;background:#f8fafc}.academy-media-embed img{display:block;max-width:100%;height:auto;margin:auto}.academy-media-embed figcaption{text-align:center;color:#64748b;font-size:.9rem}.inline-media-remove{display:block;margin:.5rem auto 0;border:0;background:#fee2e2;color:#991b1b;border-radius:.35rem;padding:.35rem .6rem;cursor:pointer}
.assessment-preview-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.assessment-preview-question{max-width:900px}.assessment-preview-question h2{font-size:1.1rem}.assessment-preview-options{display:grid;gap:.55rem}.assessment-preview-option{display:flex;align-items:center;gap:.65rem;padding:.7rem;border:1px solid #dbe3ee;border-radius:.5rem}.assessment-preview-option strong{margin-left:auto;color:#166534;font-size:.8rem}.assessment-preview-option.is-correct{background:#f0fdf4;border-color:#86efac}@media(max-width:700px){.assessment-preview-header{display:block}}
.assessment-preview-notice{max-width:950px;margin:1rem 0;padding:.85rem 1rem;border:1px solid #c7d2fe;border-radius:.65rem;background:#eef2ff;color:#3730a3}.assessment-preview-summary,.assessment-experience-form,.assessment-preview-result,.assessment-result-question{max-width:950px}.assessment-experience-question{margin:1rem 0;padding:1.4rem}.assessment-experience-question legend{width:100%;padding:0;font-size:1.08rem;font-weight:750;color:#172554}.assessment-experience-question legend>span,.assessment-result-question h3>span:first-child{display:inline-grid;place-items:center;width:1.8rem;height:1.8rem;margin-right:.45rem;border-radius:50%;background:#eef2ff;color:#4338ca;font-size:.85rem}.assessment-experience-options{display:grid;gap:.65rem;margin-top:1rem}.assessment-experience-options label{display:flex;align-items:flex-start;gap:.75rem;padding:.85rem 1rem;border:1px solid #dbe3ee;border-radius:.6rem;cursor:pointer;transition:.15s}.assessment-experience-options label:hover{border-color:#818cf8;background:#fafaff}.assessment-experience-options input{width:1.15rem;height:1.15rem;margin-top:.12rem;accent-color:#4f46e5}.assessment-result-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.assessment-result-heading h2{margin-top:.1rem}.assessment-result-score{display:flex;align-items:baseline;gap:.75rem}.assessment-result-score span{font-size:2rem;font-weight:800;color:#312e81}.assessment-result-question h3{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;font-size:1.05rem}.assessment-result-question h3 .badge{margin-left:auto}.assessment-result-options{display:grid;gap:.55rem}.assessment-result-option{display:grid;grid-template-columns:1.4rem minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.75rem;border:1px solid #dbe3ee;border-radius:.5rem}.assessment-result-option.is-selected{background:#eef2ff;border-color:#a5b4fc}.assessment-result-option.is-correct{background:#f0fdf4;border-color:#86efac}.assessment-result-labels{display:flex;align-items:center;gap:.4rem}.assessment-result-labels small,.assessment-result-labels strong{padding:.15rem .4rem;border-radius:999px;font-size:.72rem}.assessment-result-labels small{background:#e0e7ff;color:#3730a3}.assessment-result-labels strong{background:#dcfce7;color:#166534}
.badge-graded{background:#ede9fe;color:#5b21b6}.badge-practice{background:#e0f2fe;color:#075985}.grading-explanation,.practice-explanation{margin:1rem 0;padding:1rem;border-radius:.65rem}.grading-explanation{border:1px solid #c4b5fd;background:#f5f3ff;color:#4c1d95}.practice-explanation{border:1px solid #bae6fd;background:#f0f9ff;color:#075985}.grading-explanation p,.practice-explanation p{margin:.3rem 0 0}.official-score{padding:.75rem 1rem;border-left:4px solid #7c3aed;background:#faf5ff;color:#4c1d95}.assessment-card-help{display:block;margin-top:.3rem;color:#64748b}.assessment-result-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}.reader-nav-assessment>a{display:flex!important;flex-direction:column;gap:.15rem;padding:.45rem .55rem;border:1px solid #ddd6fe;border-radius:.45rem;background:#faf5ff}.reader-nav-assessment small{font-size:.7rem}.reader-nav-assessment small.is-graded{color:#6d28d9}.reader-nav-assessment small.is-practice{color:#0369a1}.module-assessment-panel{margin-top:1rem}.module-assessment-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.module-assessment-row h3{margin:.25rem 0}.assessment-mode-inline{display:inline-block;margin-left:.25rem;padding:.05rem .3rem;border-radius:999px;background:#eef2ff;color:#4338ca;font-size:.65rem}@media(max-width:700px){.module-assessment-row{display:block}.module-assessment-row>.btn{margin-top:.5rem}}
.assessment-builder{max-width:1000px}.assessment-builder-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin:1.5rem 0 1rem}.assessment-builder-heading h2{margin:.1rem 0}.assessment-question-editor{padding:0;overflow:hidden;border-top:4px solid #6366f1}.assessment-question-editor>header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;background:#f8fafc;border-bottom:1px solid #e2e8f0}.assessment-question-editor>header>div{display:flex;align-items:center;gap:.6rem}.assessment-question-number{display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;background:#4f46e5;color:#fff;font-weight:800}.assessment-question-form{padding:1.25rem}.assessment-question-form textarea,.assessment-new-question textarea{resize:vertical}.assessment-question-settings{display:grid;grid-template-columns:minmax(220px,1fr) minmax(100px,160px);gap:1rem}.assessment-option-heading{margin-top:.25rem}.assessment-option-heading h3{margin:0}.assessment-option-columns{display:grid;grid-template-columns:1.35rem minmax(0,1fr) auto;gap:.65rem;padding:0 .65rem .35rem;color:#64748b;font-size:.72rem;font-weight:700;text-transform:uppercase}.assessment-option-list{display:grid;gap:.55rem}.assessment-option-editor{display:grid;grid-template-columns:1.35rem minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.65rem;border:1px solid #dbe3ee;border-radius:.55rem;background:#fff}.assessment-option-editor>input:first-child{width:1.1rem;height:1.1rem;accent-color:#4f46e5}.assessment-empty-options{padding:1rem;border:1px dashed #cbd5e1;border-radius:.55rem;color:#64748b}.assessment-question-save{display:flex;justify-content:flex-end;margin-top:1rem}.assessment-add-option{padding:1rem 1.25rem;background:#f8fafc;border-top:1px solid #e2e8f0}.assessment-add-option>label{display:block;margin-bottom:.4rem;font-weight:700}.assessment-add-option>div{display:flex;gap:.6rem}.assessment-add-option input{flex:1}.assessment-new-question{border:2px dashed #c7d2fe;background:#fafaff}.assessment-new-question h3{margin:.1rem 0 1rem}@media(max-width:700px){.assessment-preview-header,.assessment-builder-heading,.assessment-result-heading{display:block}.assessment-question-settings{grid-template-columns:1fr}.assessment-option-editor{grid-template-columns:1.2rem minmax(0,1fr)}.assessment-option-editor .text-danger-btn{grid-column:2}.assessment-option-columns{grid-template-columns:1.2rem minmax(0,1fr)}.assessment-option-columns>span:last-child{display:none}.assessment-add-option>div{display:block}.assessment-add-option button{margin-top:.5rem;width:100%}.assessment-result-option{grid-template-columns:1.2rem minmax(0,1fr)}.assessment-result-labels{grid-column:2;justify-self:start}}

/* Public Website CMS administration */
.public-cms-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.public-cms-tabs{display:flex;gap:.4rem;overflow:auto;margin:1rem 0 1.5rem;padding:.35rem;border:1px solid #dbe3ee;border-radius:.7rem;background:#fff}.public-cms-tabs a{padding:.6rem .8rem;border-radius:.45rem;white-space:nowrap;text-decoration:none;color:#475569}.public-cms-tabs a.is-active{background:#4f46e5;color:#fff}.public-cms-panel{max-width:980px}.public-cms-panel fieldset{margin:1rem 0;padding:1rem;border:1px solid #dbe3ee;border-radius:.6rem}.public-cms-panel legend{padding:0 .35rem;font-weight:750}.public-cms-panel label:not(.cms-check){display:grid;gap:.35rem;margin:.7rem 0;font-weight:650}.public-cms-panel input:not([type=checkbox]),.public-cms-panel select,.public-cms-panel textarea{width:100%;padding:.6rem .7rem;border:1px solid #cbd5e1;border-radius:.45rem;font:inherit}.cms-two-columns,.cms-menu-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.cms-media-preview{display:block;max-width:260px;max-height:140px;margin:.5rem 0;object-fit:contain;background:#eef2f7;border:1px solid #dbe3ee;border-radius:.5rem}.cms-check{display:inline-flex;align-items:center;gap:.45rem;margin:.5rem 1rem .5rem 0}.cms-sort-list{display:grid;gap:.5rem;margin:1rem 0}.cms-sort-row,.cms-menu-title{display:flex;align-items:center;gap:.75rem;padding:.75rem;border:1px solid #dbe3ee;border-radius:.5rem;background:#f8fafc}.cms-sort-row strong{flex:1}.cms-drag{color:#94a3b8;cursor:grab}.cms-sort-row.is-dragging{opacity:.45}.cms-move-controls{display:flex;gap:.25rem}.cms-section-editor summary,.cms-add-item summary{cursor:pointer}.cms-section-editor form,.cms-add-item form{margin-top:1rem}.cms-benefit-editor,.cms-menu-editor{margin:1rem 0;padding:1rem;border:1px solid #dbe3ee;border-radius:.6rem;background:#fff}.cms-inline-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.cms-add-item{margin-top:1rem;padding:1rem;border:1px dashed #a5b4fc;border-radius:.6rem;background:#fafaff}
@media(max-width:720px){.public-cms-heading{display:block}.cms-two-columns,.cms-menu-fields{grid-template-columns:1fr}.public-cms-tabs{margin-inline:-.85rem;border-radius:0}}
.cms-colour-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.75rem}.cms-colour-control{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:.65rem;padding:.5rem;border:1px solid #dbe3ee;border-radius:.5rem;background:#fff}.public-cms-panel .cms-colour-control input[type=color]{width:64px;height:48px;padding:2px;border:1px solid #cbd5e1;border-radius:.4rem;background:#fff;cursor:pointer}.public-cms-panel .cms-colour-control input[type=text]{min-width:0;margin:0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:lowercase}.cms-theme-sample{display:grid;gap:.65rem;margin:1.25rem 0;padding:1.25rem;border:1px solid #dbe3ee;border-radius:.7rem;background:#f8fafc}.cms-theme-sample span{font-size:.75rem;color:#64748b;text-transform:uppercase;letter-spacing:.08em}.cms-theme-sample strong{font-size:1.1rem}.cms-theme-sample button{justify-self:start;padding:.6rem .9rem;border:0;border-radius:.5rem;background:#4f46e5;color:#fff}.cms-revert-theme{border-color:#f6c86b;background:#fffbeb}.cms-revert-theme h2{color:#92400e}