:root {
  color-scheme: light;
  --bg: #f7f9ff;
  --text: #111833;
  --muted: #66708a;
  --primary: #4f46ff;
  --line: #e2e7f2;
  --panel: #ffffff;
  --sidebar: #090f2c;
  --primary-soft: #eeedff;
  --success: #16a764;
  --warning: #f59e0b;
  --danger-text: #e5484d;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, Segoe UI, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--primary); text-decoration: none; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 36px rgba(20, 28, 60, .06);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { font-weight: 800; color: var(--text); }
nav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
nav form { margin: 0; }
.active-context {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  font-size: .84rem;
  width: 100%;
}
.active-context span::after {
  color: #9aa8a4;
  content: ">";
  margin-left: .4rem;
}
.active-context strong { color: var(--text); }
.active-context a { margin-left: .35rem; }
.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100vh - 66px);
}
.shell.with-sidebar {
  grid-template-columns: 230px minmax(0, 1fr);
  transition: grid-template-columns .18s ease;
}
.shell.with-sidebar.sidebar-collapsed {
  grid-template-columns: 72px minmax(0, 1fr);
}
.sidebar {
  background: linear-gradient(180deg, #070c24 0%, #11164a 100%);
  color: #dfe4ff;
  padding: 1rem;
  position: sticky;
  top: 66px;
  align-self: start;
  height: calc(100vh - 66px);
  overflow: auto;
}
.sidebar-head {
  align-items: center;
  display: flex;
  gap: .5rem;
  justify-content: space-between;
}
.sidebar-title {
  display: block;
  color: #9da7d8;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: .25rem .4rem .75rem;
}
.sidebar-toggle {
  align-items: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 32px;
  font-weight: 900;
  height: 32px;
  justify-content: center;
  margin-bottom: .55rem;
  padding: 0;
  width: 32px;
}
.sidebar a {
  display: block;
  color: #f5f7ff;
  border-radius: 8px;
  padding: .68rem .75rem;
  margin-bottom: .18rem;
}
.sidebar a:hover,
.sidebar a:focus,
.sidebar a.active {
  background: rgba(112, 101, 255, .22);
}
.shell.with-sidebar.sidebar-collapsed .sidebar {
  padding: 1rem .55rem;
}
.shell.with-sidebar.sidebar-collapsed .sidebar-head {
  display: grid;
  justify-items: center;
}
.shell.with-sidebar.sidebar-collapsed .sidebar-title {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}
.shell.with-sidebar.sidebar-collapsed .sidebar-toggle span {
  transform: rotate(180deg);
}
.shell.with-sidebar.sidebar-collapsed .sidebar a {
  color: transparent;
  font-size: 0;
  height: 38px;
  margin-bottom: .3rem;
  overflow: hidden;
  padding: 0;
  position: relative;
  text-align: center;
}
.shell.with-sidebar.sidebar-collapsed .sidebar a::before {
  align-items: center;
  color: #f5f7ff;
  content: attr(title);
  display: flex;
  font-size: .7rem;
  font-weight: 900;
  height: 100%;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  padding: 0 .2rem;
  text-transform: uppercase;
}
.page { width: min(1180px, calc(100% - 2rem)); margin: 2rem auto; }
h1, h2, h3 { line-height: 1.15; }
.lead { color: var(--muted); font-size: 1.1rem; }
.muted { color: var(--muted); margin-top: .25rem; }
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.page-header h1 { margin-bottom: 0; }
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}
.narrow { max-width: 460px; margin: 4rem auto; }
.stack, .grid-form { display: grid; gap: .8rem; }
.grid-form { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.wide { grid-column: 1 / -1; }
label { display: grid; gap: .35rem; font-weight: 650; }
input, textarea, select, button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .72rem .8rem;
  font: inherit;
}
input, textarea, select {
  color: var(--text);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.45;
}
textarea { min-height: 96px; resize: vertical; }
.rich-text-editor {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.rich-text-toolbar {
  align-items: center;
  background: #f8faff;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: .35rem;
}
.rich-text-button {
  background: #fff;
  border: 1px solid #d5dcec;
  border-radius: 6px;
  color: var(--text);
  font-size: .78rem;
  font-weight: 800;
  min-height: 30px;
  padding: .28rem .5rem;
  width: auto;
}
.rich-text-button:hover,
.rich-text-button:focus {
  border-color: #b8c0ff;
  color: var(--primary);
}
.rich-textarea {
  border: 0;
  border-radius: 0;
  min-height: 118px;
}
.rich-textarea:focus {
  outline: 0;
}
button,
.button {
  background: var(--primary);
  color: white;
  border: 0;
  border-radius: 8px;
  padding: .72rem .8rem;
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}
.page-header > .button,
.button-row .button {
  width: auto;
}
.small-button {
  width: auto;
  padding: .42rem .65rem;
  font-size: .9rem;
}
.small-link {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .42rem .65rem;
  background: #fff;
  color: var(--primary);
  font-weight: 700;
  width: auto;
}
.danger { background: #9b2c2c; }
.actions {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.actions form { margin: 0; }
.secondary {
  background: #eef3f1;
  color: var(--text);
  border: 1px solid var(--line);
}
.icon-button {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
}
.panel, .tree, .block, .metric, .card-grid article, .list article {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
}
.block { margin-bottom: 1rem; }
.block details {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .75rem;
  margin-bottom: .5rem;
}
.block summary { cursor: pointer; font-weight: 800; }
.flip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
}
.flip-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .85rem;
  background: #f8fbfa;
}
.quiz-item {
  border-left: 4px solid var(--primary);
  padding-left: .85rem;
  margin-bottom: .85rem;
}
.callout {
  border-radius: 8px;
  padding: .85rem 1rem;
  background: #e8f4ef;
}
.callout.warning { background: #fff7df; }
.callout.danger { background: #ffe8e5; }
.callout.success { background: #e4f7e8; }
pre {
  overflow-x: auto;
  border-radius: 8px;
  padding: 1rem;
  background: #10231f;
  color: #f6fbfa;
}
.panel { margin-bottom: 1rem; }
.metric-grid, .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.metric strong { display: block; font-size: 2rem; margin-top: .35rem; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.list { display: grid; gap: .75rem; margin-top: 1rem; }
.list article { display: flex; justify-content: space-between; gap: 1rem; }
.media-library-head {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 1.5rem;
}
.media-library-head h2 {
  margin: 0;
}
.media-search {
  max-width: 320px;
}
.media-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  margin-top: 1rem;
}
.media-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(20, 28, 60, .06);
  display: grid;
  overflow: hidden;
}
.media-thumb {
  aspect-ratio: 16 / 10;
  background: #f8faff;
  display: block;
  object-fit: cover;
  width: 100%;
}
.icon-thumb {
  align-items: center;
  display: flex;
  justify-content: center;
}
.icon-thumb span {
  align-items: center;
  background: #eeedff;
  border: 1px solid #d9dcff;
  border-radius: 8px;
  color: var(--primary);
  display: inline-flex;
  font-size: .9rem;
  font-weight: 900;
  height: 52px;
  justify-content: center;
  width: 64px;
}
.media-card-body {
  display: grid;
  gap: .45rem;
  padding: .9rem;
}
.media-card-body strong {
  color: var(--text);
  overflow-wrap: anywhere;
}
.media-card-body span {
  color: var(--muted);
  font-size: .84rem;
  font-weight: 750;
}
.media-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.media-empty {
  grid-column: 1 / -1;
}
.media-preview-frame {
  align-items: center;
  background: #f8faff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  min-height: 280px;
  overflow: hidden;
}
.media-preview-frame img,
.media-preview-frame iframe {
  border: 0;
  display: block;
  height: min(62vh, 520px);
  object-fit: contain;
  width: 100%;
}
.media-preview-frame .icon-thumb {
  min-height: 280px;
  width: 100%;
}
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: .8rem;
}
.table-toolbar h2 { margin: 0; }
.table-search { max-width: 320px; }
.table-wrap {
  width: 100%;
  overflow-x: auto;
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: 1rem;
}
.pagination a,
.pagination span,
.pagination strong {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .45rem .7rem;
  background: #fff;
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1rem;
  color: var(--muted);
}
.breadcrumbs a,
.breadcrumbs span {
  display: inline-flex;
  align-items: center;
}
.breadcrumbs a::after {
  content: "/";
  color: var(--muted);
  margin-left: .4rem;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.detail-grid div {
  display: grid;
  gap: .25rem;
}
.detail-grid span {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 700;
}
.data-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
  background: #fff;
}
.data-table th,
.data-table td {
  border-bottom: 1px solid var(--line);
  padding: .72rem .8rem;
  text-align: left;
  vertical-align: top;
}
.data-table th {
  background: #eef5f3;
  cursor: pointer;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.data-table th::after {
  content: " sort";
  color: var(--muted);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
.data-table tbody tr:hover { background: #f8fbfa; }
.modal {
  border: 0;
  border-radius: 8px;
  padding: 0;
  width: min(760px, calc(100% - 2rem));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .25);
}
.modal::backdrop { background: rgba(7, 21, 18, .46); }
.modal-frame,
.modal-body {
  padding: 1rem;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: .75rem;
  margin-bottom: .25rem;
}
.modal-header h2 { margin: 0; }
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: .25rem;
}
.form-actions button { width: auto; min-width: 110px; }
.indent { margin-left: 1.5rem; }
.indent2 { margin-left: 3rem; }
.indent3 { margin-left: 4.5rem; }
.flash { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; background: #e8f4ef; }
.flash.error { background: #ffe8e5; }
.flash.compact { margin: 0; padding: .55rem .7rem; }
.json-preview {
  max-height: 420px;
  margin: .75rem 0 0;
  font-size: .86rem;
}
code { background: #eef3f1; border-radius: 4px; padding: .1rem .35rem; }
.eyebrow {
  display: inline-block;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.course-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}
.progress-track {
  height: 10px;
  background: #e6eeeb;
  border-radius: 999px;
  overflow: hidden;
}
.progress-track span {
  display: block;
  height: 100%;
  background: var(--primary);
}
.course-module h2,
.lesson-header h1 { margin-top: .2rem; }
.module-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.lesson-list {
  display: grid;
  gap: .35rem;
  padding-left: 1.25rem;
}
.course-card-list {
  display: grid;
  gap: .35rem;
  margin: .85rem 0 0;
  padding-left: 1.1rem;
}
.course-card-list a {
  font-weight: 800;
}
.lesson-list a,
.course-outline a {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  border-radius: 8px;
  padding: .45rem .55rem;
}
.lesson-list a:hover,
.course-outline a:hover,
.course-outline a.active {
  background: #eef5f3;
}
.lesson-list strong,
.course-outline strong,
.completion-pill {
  color: var(--primary);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}
.lesson-layout {
  display: grid;
  grid-template-columns: minmax(230px, 310px) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.course-outline {
  position: sticky;
  top: 86px;
  max-height: calc(100vh - 110px);
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
}
.course-outline h2 {
  font-size: 1.05rem;
  margin: .9rem 0 .55rem;
}
.outline-module {
  border-top: 1px solid var(--line);
  padding: .65rem 0;
}
.outline-module summary {
  cursor: pointer;
  font-weight: 800;
}
.outline-module ol {
  display: grid;
  gap: .2rem;
  margin: .5rem 0 0;
  padding-left: 1rem;
  font-size: .9rem;
}
.lesson-reader {
  display: grid;
  gap: 1rem;
}
.lesson-header {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
}
.lesson-meta,
.lesson-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
}
.lesson-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  padding: .28rem .55rem;
  font-size: .84rem;
}
.lesson-nav {
  justify-content: space-between;
}
.lesson-nav form { margin: 0; }
.lesson-nav button { width: auto; }
.lesson-player,
.lesson-blocks {
  display: grid;
  gap: 1rem;
}
.lesson-player {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem;
}
.lesson-step-progress {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.lesson-step-progress h2 {
  margin: .15rem 0 0;
}
.lesson-step-progress > span {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  flex: 0 0 auto;
  font-size: .84rem;
  font-weight: 800;
  padding: .3rem .65rem;
}
.lesson-player .block {
  box-shadow: none;
  margin: 0;
}
.block-heading {
  display: grid;
  gap: .2rem;
  margin-bottom: .75rem;
}
.block-heading span {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.block-heading h3 { margin: 0; }
.prose {
  white-space: pre-line;
  line-height: 1.65;
}
.block-accordion details,
.block-toggle details,
.block-quiz details {
  background: #fff;
}
.quiz-form,
.quiz-item {
  display: grid;
  gap: .75rem;
}
.quiz-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 0 0 1rem;
  padding: .85rem;
}
.quiz-item legend {
  font-weight: 800;
  padding: 0 .25rem;
}
.quiz-option {
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  gap: .55rem;
  padding: .55rem;
}
.quiz-option.correct {
  background: #e8f4ef;
  border-color: #9ac6b8;
}
.quiz-option.incorrect {
  background: #fff3eb;
  border-color: #e0a36d;
}
.quiz-feedback {
  border-radius: 8px;
  font-weight: 800;
  margin: 0;
  padding: .55rem;
}
.quiz-feedback.correct {
  background: #e8f4ef;
  color: var(--primary);
}
.quiz-feedback.incorrect {
  background: #fff3eb;
  color: #9b4f12;
}
.quiz-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.block-exercise,
.block-case_study,
.block-reflection {
  border-left: 4px solid var(--primary);
}
.block-code pre { margin-bottom: 0; }
.completion-pill {
  border: 1px solid #b6d7ce;
  border-radius: 999px;
  background: #e8f4ef;
  padding: .55rem .75rem;
}
.qa-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin: 1rem 0;
}
.qa-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: .85rem;
  padding: 1rem;
}
.qa-card.needs_attention {
  border-left: 4px solid #d9822b;
}
.qa-card.ready {
  border-left: 4px solid var(--primary);
}
.qa-card-head {
  align-items: flex-start;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.qa-card-head h2 {
  margin: .15rem 0 0;
}
.qa-card-head > strong {
  color: var(--primary);
  font-size: 1.35rem;
}
.qa-metrics {
  display: grid;
  gap: .5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.qa-metrics div {
  background: #f7faf9;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .55rem;
}
.qa-metrics dt {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
}
.qa-metrics dd {
  font-size: 1.2rem;
  font-weight: 800;
  margin: .15rem 0 0;
}
.qa-block-mix {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.qa-block-mix span {
  background: #eef5f3;
  border-radius: 999px;
  color: var(--primary);
  font-size: .78rem;
  font-weight: 800;
  padding: .28rem .55rem;
}
.learner-dashboard {
  display: grid;
  gap: 1rem;
}
.learner-course-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid #d9822b;
  border-radius: 8px;
  display: grid;
  gap: .8rem;
  padding: 1rem;
}
.learner-course-card.completed {
  border-left-color: var(--primary);
}
.learner-course-head {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.learner-course-head h2 {
  margin: .15rem 0 0;
}
.learner-course-head > strong {
  color: var(--primary);
  font-size: 1.45rem;
}
.learner-metrics {
  max-width: 520px;
}
.tenant-org-strip {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}
.tenant-org-card {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.tenant-org-card h2 {
  margin: .15rem 0;
}
.workspace-filters {
  align-items: end;
  display: grid;
  gap: .75rem;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(150px, 1fr)) auto;
}
.workspace-course-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.workspace-course-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  overflow: hidden;
}
.course-thumb {
  align-items: center;
  background: #e8f4ef;
  color: var(--primary);
  display: flex;
  font-size: 1.4rem;
  font-weight: 900;
  justify-content: center;
  min-height: 100%;
}
.course-thumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.workspace-course-body {
  display: grid;
  gap: .6rem;
  padding: 1rem;
}
.workspace-course-body h2 { margin: 0; }
.status-badge {
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: .72rem;
  font-weight: 800;
  justify-self: start;
  padding: .25rem .55rem;
  text-transform: uppercase;
}
.status-badge.draft { background: #7d8790; }
.status-badge.validated { background: #3d6fb6; }
.status-badge.published { background: var(--primary); }
.status-badge.archived { background: #9b4f12; }
.course-card-stats {
  display: grid;
  gap: .45rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
}
.course-card-stats div {
  background: #f7faf9;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .45rem;
}
.course-card-stats dt {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.course-card-stats dd {
  font-size: 1.1rem;
  font-weight: 800;
  margin: .1rem 0 0;
}
.builder-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(380px, 520px) minmax(0, 1fr);
}
.builder-summary {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-bottom: 1rem;
}
.builder-main {
  display: grid;
  gap: 1rem;
}
.builder-panel-head {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}
.builder-panel-head h2 { margin-top: 0; }
.builder-tree {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: calc(100vh - 150px);
  overflow: auto;
  padding: 1rem;
  position: sticky;
  top: 88px;
}
.builder-tree details {
  border-top: 1px solid var(--line);
  padding: .45rem 0;
}
.builder-tree summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: .5rem;
  font-weight: 800;
  justify-content: space-between;
}
.builder-tree ol {
  margin: .4rem 0 .4rem 1rem;
  padding-left: 1rem;
}
.builder-tree li {
  align-items: flex-start;
  display: flex;
  gap: .75rem;
  justify-content: space-between;
  margin-bottom: .45rem;
}
.builder-tree-actions,
.builder-item-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin: .45rem 0;
}
.builder-item-actions {
  justify-content: flex-end;
  margin: 0;
}
.link-button {
  background: transparent;
  border: 0;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  padding: 0;
  text-decoration: none;
}
.link-button:hover,
.link-button:focus,
.small-link:hover,
.small-link:focus {
  text-decoration: underline;
}
.course-hierarchy,
.course-hierarchy ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.course-hierarchy ul {
  border-left: 1px solid var(--line);
  margin: .25rem 0 .35rem .85rem;
  padding-left: .75rem;
}
.course-hierarchy li {
  margin: .12rem 0;
}
.hierarchy-row {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  line-height: 1.45;
}
.hierarchy-row .muted {
  font-size: .78rem;
  margin: 0;
}
.issue-list {
  display: grid;
  gap: .35rem;
  margin-top: 0;
}
.issue-list li {
  color: #8a4b12;
  font-weight: 700;
}
.success-text {
  color: var(--primary);
  font-weight: 800;
}
.block-skip-hint {
  background: #f8faff;
  border: 1px solid #e2e7f2;
  border-radius: 8px;
  color: #66708a;
  font-size: .84rem;
  font-weight: 650;
  margin: 0;
  padding: .7rem .8rem;
}
.block-field.is-hidden {
  display: none;
}

.route-workspace-course_builder .topbar {
  display: none;
}
.route-workspace-course_builder .shell {
  min-height: 100vh;
}
.route-workspace-course_builder .page {
  margin: 0;
  width: 100%;
}
.authoring-studio {
  background: #f7f9ff;
  color: #111833;
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns .18s ease;
}
.authoring-studio.sidebar-collapsed {
  grid-template-columns: 76px minmax(0, 1fr);
}
.authoring-studio a:focus-visible,
.authoring-studio button:focus-visible,
.authoring-studio input:focus-visible,
.authoring-studio textarea:focus-visible,
.authoring-studio select:focus-visible {
  outline: 3px solid rgba(79, 70, 255, .28);
  outline-offset: 2px;
}
.studio-sidebar {
  background: radial-gradient(circle at 20% 0%, rgba(112, 101, 255, .32), transparent 34%), linear-gradient(180deg, #070c24 0%, #10143a 100%);
  color: #f6f7ff;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.35rem 1rem;
}
.studio-sidebar-head {
  align-items: center;
  display: flex;
  gap: .55rem;
  justify-content: space-between;
}
.studio-brand,
.studio-mode,
.studio-nav-group a,
.studio-tenant {
  align-items: center;
  display: flex;
  gap: .7rem;
}
.studio-brand {
  color: #fff;
  font-size: 1.2rem;
  font-weight: 850;
  padding: 0 .45rem;
  min-width: 0;
}
.studio-brand strong,
.studio-mode span:nth-child(2),
.studio-nav-group span,
.studio-nav-group a,
.studio-tenant div {
  transition: opacity .15s ease, transform .15s ease;
}
.studio-sidebar-toggle {
  align-items: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 34px;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  padding: 0;
  width: 34px;
}
.studio-mark,
.studio-mode-icon,
.studio-tenant-icon {
  align-items: center;
  background: linear-gradient(135deg, #9b8cff, #ffffff);
  border-radius: 7px;
  color: #3324d5;
  display: inline-flex;
  flex: 0 0 28px;
  font-size: .78rem;
  font-weight: 900;
  height: 28px;
  justify-content: center;
}
.studio-mode {
  background: rgba(96, 82, 255, .34);
  border: 1px solid rgba(186, 192, 255, .14);
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  justify-content: flex-start;
  padding: .72rem .8rem;
}
.studio-mode-caret {
  margin-left: auto;
}
.studio-nav-group {
  display: grid;
  gap: .25rem;
}
.studio-nav-group span {
  color: #9da7d8;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  padding: .5rem .45rem;
  text-transform: uppercase;
}
.studio-nav-group a {
  border-radius: 8px;
  color: #f3f5ff;
  font-weight: 700;
  padding: .72rem .78rem;
}
.studio-nav-group a.active,
.studio-nav-group a:hover,
.studio-nav-group a:focus {
  background: rgba(91, 74, 255, .42);
  color: #fff;
}
.studio-tenant {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 8px;
  margin-top: auto;
  padding: .85rem;
}
.studio-tenant div {
  display: grid;
  gap: .1rem;
  min-width: 0;
}
.studio-tenant strong,
.studio-tenant span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-tenant span {
  color: #b9c0ea;
  font-size: .78rem;
}
.authoring-studio.sidebar-collapsed .studio-sidebar {
  align-items: center;
  gap: .95rem;
  padding: 1.25rem .65rem;
}
.authoring-studio.sidebar-collapsed .studio-sidebar-head,
.authoring-studio.sidebar-collapsed .studio-mode,
.authoring-studio.sidebar-collapsed .studio-nav-group,
.authoring-studio.sidebar-collapsed .studio-nav-group a,
.authoring-studio.sidebar-collapsed .studio-tenant {
  width: 100%;
}
.authoring-studio.sidebar-collapsed .studio-brand {
  justify-content: center;
  padding: 0;
}
.authoring-studio.sidebar-collapsed .studio-brand strong,
.authoring-studio.sidebar-collapsed .studio-mode span:nth-child(2),
.authoring-studio.sidebar-collapsed .studio-mode-caret,
.authoring-studio.sidebar-collapsed .studio-nav-group span,
.authoring-studio.sidebar-collapsed .studio-tenant div {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-6px);
}
.authoring-studio.sidebar-collapsed .studio-sidebar-head {
  display: grid;
  gap: .7rem;
  justify-items: center;
}
.authoring-studio.sidebar-collapsed .studio-sidebar-toggle span {
  transform: rotate(180deg);
}
.authoring-studio.sidebar-collapsed .studio-mode,
.authoring-studio.sidebar-collapsed .studio-tenant {
  justify-content: center;
  padding: .65rem 0;
}
.authoring-studio.sidebar-collapsed .studio-nav-group {
  justify-items: center;
}
.authoring-studio.sidebar-collapsed .studio-nav-group a {
  color: transparent;
  font-size: 0;
  height: 38px;
  justify-content: center;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 38px;
}
.authoring-studio.sidebar-collapsed .studio-nav-group a::before {
  color: #f3f5ff;
  content: attr(title);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}
.authoring-studio.sidebar-collapsed .studio-tenant {
  margin-top: auto;
}
.studio-main {
  display: grid;
  gap: 1.25rem;
  padding: 1.6rem 2rem 2rem;
}
.studio-header,
.studio-actions,
.studio-card-head,
.studio-card-head > div,
.studio-editor-head,
.studio-toggle-row {
  align-items: center;
  display: flex;
}
.studio-header {
  justify-content: space-between;
  gap: 1rem;
}
.studio-breadcrumbs {
  color: #52617e;
  display: flex;
  flex-wrap: wrap;
  font-size: .82rem;
  font-weight: 700;
  gap: .55rem;
}
.studio-breadcrumbs a,
.studio-breadcrumbs span {
  color: #52617e;
}
.studio-breadcrumbs a::after,
.studio-breadcrumbs span::after {
  color: #9aa4bd;
  content: ">";
  margin-left: .55rem;
}
.studio-breadcrumbs strong {
  color: #111833;
}
.studio-title-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .45rem;
}
.studio-title-row h1 {
  font-size: 1.55rem;
  margin: 0;
}
.studio-header p {
  color: #66708a;
  margin: .35rem 0 0;
}
.studio-status {
  background: #eeedff;
  border-radius: 6px;
  color: #4238e8;
  font-size: .78rem;
  font-weight: 800;
  padding: .25rem .45rem;
}
.studio-actions {
  gap: .65rem;
}
.studio-actions form {
  margin: 0;
}
.studio-button,
.studio-icon-button {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  text-align: center;
  width: auto;
}
.studio-button {
  border: 1px solid #d5dcec;
  min-height: 42px;
  padding: .7rem 1rem;
}
.studio-button.primary {
  background: linear-gradient(135deg, #5b4cff, #4238e8);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 26px rgba(79, 70, 255, .24);
}
.studio-button.ghost,
.studio-icon-button {
  background: #fff;
  color: #111833;
}
.studio-icon-button {
  border: 1px solid #d5dcec;
  height: 42px;
  padding: 0;
  width: 42px;
}
.studio-workspace {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(330px, 390px) minmax(460px, 1fr) minmax(300px, 380px);
}
.studio-card {
  background: #fff;
  border: 1px solid #e2e7f2;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(36, 45, 84, .07);
  min-width: 0;
}
.studio-card-head {
  border-bottom: 1px solid #eef1f7;
  justify-content: space-between;
  padding: 1.2rem 1.25rem;
}
.studio-card-head h2 {
  font-size: 1.05rem;
  margin: 0;
}
.studio-card-head > div {
  gap: .45rem;
}
.studio-tree {
  max-height: calc(100vh - 8.3rem);
  overflow: auto;
  position: sticky;
  top: 1.6rem;
}
.studio-hierarchy {
  padding: 1rem 1.1rem 1.25rem;
}
.studio-hierarchy ul {
  border-left: 1px solid #dde4f1;
  margin-left: .65rem;
  padding-left: .85rem;
}
.studio-branch > summary {
  cursor: pointer;
  list-style: none;
}
.studio-branch > summary::-webkit-details-marker {
  display: none;
}
.studio-branch > summary::before {
  color: #7b86a3;
  content: ">";
  flex: 0 0 auto;
  font-weight: 900;
  transform: rotate(90deg);
}
.studio-branch:not([open]) > summary::before {
  transform: rotate(0deg);
}
.studio-node {
  border-radius: 7px;
  color: #111833;
  min-height: 32px;
  padding: .38rem .45rem;
}
.studio-node:hover,
.studio-node.active {
  background: #f0efff;
  color: #251ee0;
}
.studio-node span:first-child,
.studio-node strong {
  min-width: 0;
}
.studio-lesson-link {
  color: inherit;
  flex: 1 1 auto;
  font-weight: 800;
  min-width: 0;
}
.block-node {
  color: #66708a;
  font-size: .86rem;
}
.studio-empty {
  color: #66708a;
  font-size: .88rem;
  padding: .4rem .45rem;
}
.studio-tabs {
  border-bottom: 1px solid #eef1f7;
  display: flex;
  gap: .9rem;
  min-height: 58px;
  padding: 0 1.25rem;
}
.studio-tabs button,
.studio-tabs a {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #59647e;
  display: inline-flex;
  font-size: .9rem;
  font-weight: 800;
  padding: 0 .1rem;
  width: auto;
}
.studio-tabs .active,
.studio-tabs button.active {
  border-bottom: 3px solid #4f46ff;
  color: #2d25df;
}
.studio-tabs button:disabled {
  color: #a3abc0;
  cursor: not-allowed;
}
.studio-editor {
  min-height: calc(100vh - 8.3rem);
}
.studio-editor-head {
  justify-content: space-between;
  gap: 1rem;
  padding: 1.55rem 1.35rem 1rem;
}
.studio-editor-head h2,
.studio-settings-preview h2 {
  font-size: 1.05rem;
  margin: 0;
}
.studio-editor-head p {
  color: #66708a;
  margin: .4rem 0 0;
}
.studio-metrics {
  display: grid;
  gap: .8rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0 1.35rem 1.35rem;
}
.studio-metrics article {
  background: #f8faff;
  border: 1px solid #e2e7f2;
  border-radius: 8px;
  padding: .9rem;
}
.studio-metrics span {
  color: #66708a;
  display: block;
  font-size: .76rem;
  font-weight: 800;
}
.studio-metrics strong {
  color: #111833;
  display: block;
  font-size: 1.08rem;
  margin-top: .25rem;
  overflow-wrap: anywhere;
}
.studio-objectives li {
  color: #111833;
}
.studio-block-list {
  display: grid;
  gap: .8rem;
  padding: 0 1.35rem 1.35rem;
}
.studio-settings-panel {
  padding: 0;
}
.studio-settings-panel .studio-details-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.studio-settings-panel .wide {
  grid-column: 1 / -1;
}
.studio-block-card {
  align-items: center;
  background: #fff;
  border: 1px solid #e2e7f2;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(36, 45, 84, .05);
  display: grid;
  gap: .8rem;
  grid-template-columns: 22px 44px minmax(0, 1fr) auto auto 42px;
  min-height: 92px;
  padding: 1rem;
}
.studio-block-card[draggable="true"] {
  cursor: grab;
}
.studio-block-card[draggable="true"]:active {
  cursor: grabbing;
}
.studio-block-card.dragging {
  border-color: #4f46ff;
  box-shadow: 0 16px 34px rgba(79, 70, 255, .16);
  opacity: .72;
}
.studio-block-card.locked {
  background: #fbfcff;
}
.studio-drag-handle {
  color: #8a95af;
  font-weight: 900;
  letter-spacing: .08em;
}
.studio-block-card.locked .studio-drag-handle {
  color: #c4ccda;
}
.studio-block-icon {
  align-items: center;
  background: #eeedff;
  border-radius: 8px;
  color: #4238e8;
  display: inline-flex;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  text-transform: uppercase;
  width: 44px;
}
.studio-block-body {
  display: grid;
  gap: .25rem;
  min-width: 0;
}
.studio-block-body span {
  color: #66708a;
  font-size: .76rem;
  font-weight: 800;
}
.studio-block-body strong {
  color: #111833;
}
.studio-block-body p {
  color: #66708a;
  line-height: 1.35;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-block-badge {
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 850;
  padding: .3rem .5rem;
}
.studio-block-badge.required {
  background: #ddf7e9;
  color: #0f8a51;
}
.studio-block-badge.optional {
  background: #e8f1ff;
  color: #245bd6;
}
.studio-block-duration {
  color: #52617e;
  font-size: .84rem;
  font-weight: 800;
  white-space: nowrap;
}
.studio-drop-zone {
  align-items: center;
  border: 1px dashed #bec7da;
  border-radius: 8px;
  color: #66708a;
  display: flex;
  gap: .35rem;
  justify-content: center;
  min-height: 58px;
  padding: .9rem;
  text-align: center;
}
.studio-sort-status {
  color: #66708a;
  font-size: .82rem;
  font-weight: 750;
  min-height: 1.2rem;
  margin: -.2rem 0 0;
  text-align: right;
}
.studio-qa {
  border-top: 1px solid #eef1f7;
  padding: 1.25rem 1.35rem;
}
.studio-qa h3 {
  font-size: 1rem;
  margin: 0 0 .75rem;
}
.studio-details {
  min-height: calc(100vh - 8.3rem);
}
.studio-details-form,
.studio-settings-preview {
  display: grid;
  gap: .9rem;
  padding: 1.25rem;
}
.studio-details label,
.studio-settings-preview label {
  color: #111833;
  font-size: .84rem;
  font-weight: 750;
}
.studio-details input,
.studio-details textarea,
.studio-details select,
.studio-settings-preview input,
.studio-settings-preview textarea,
.studio-settings-preview select,
.studio-settings-panel input,
.studio-settings-panel textarea,
.studio-settings-panel select,
.modal-frame input,
.modal-frame textarea,
.modal-frame select {
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: 0;
}
.studio-details input {
  background: #fff;
  color: #1b2440;
}
.studio-context-panel div {
  border-bottom: 1px solid #eef1f7;
  display: grid;
  gap: .2rem;
  padding-bottom: .75rem;
}
.studio-context-panel div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.studio-context-panel span {
  color: #66708a;
  font-size: .74rem;
  font-weight: 850;
  text-transform: uppercase;
}
.studio-context-panel strong {
  color: #111833;
  font-size: .92rem;
  font-weight: 650;
  line-height: 1.35;
}
.studio-details textarea,
.studio-details select {
  background: #fff;
  color: #1b2440;
  min-height: 0;
}
.studio-details textarea {
  min-height: 82px;
}
.studio-settings-preview {
  border-top: 1px solid #eef1f7;
  margin: 0 -1.25rem -1.25rem;
}
.studio-panel-actions {
  display: flex;
  justify-content: flex-end;
}
.studio-form-dirty {
  border-left: 3px solid #f59e0b;
}
.studio-form-dirty::before {
  color: #9a5a00;
  content: "Unsaved changes";
  display: block;
  font-size: .78rem;
  font-weight: 850;
  grid-column: 1 / -1;
}
.studio-danger-form {
  border-top: 1px solid #eef1f7;
  display: grid;
  padding: 1.25rem;
}
.studio-button.danger-outline {
  background: #fff;
  border-color: #ffb8bc;
  color: #e5484d;
}
.studio-toggle-row {
  justify-content: space-between;
  color: #1b2440;
  font-weight: 750;
}
.studio-toggle {
  background: #c8cedd;
  border-radius: 999px;
  display: inline-block;
  height: 24px;
  position: relative;
  width: 44px;
}
.studio-toggle::after {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(18, 24, 51, .2);
  content: "";
  height: 18px;
  left: 3px;
  position: absolute;
  top: 3px;
  width: 18px;
}
.studio-toggle.on {
  background: #4f46ff;
}
.studio-toggle.on::after {
  left: 23px;
}

@media (max-width: 720px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .shell { grid-template-columns: 1fr; }
  .shell.with-sidebar,
  .shell.with-sidebar.sidebar-collapsed {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    height: auto;
    display: flex;
    gap: .35rem;
    overflow-x: auto;
  }
  .sidebar-head {
    flex: 0 0 auto;
  }
  .sidebar-toggle {
    display: none;
  }
  .sidebar-title { display: none; }
  .sidebar a,
  .shell.with-sidebar.sidebar-collapsed .sidebar a {
    color: #f5f7ff;
    font-size: .95rem;
    height: auto;
    margin-bottom: 0;
    padding: .68rem .75rem;
    white-space: nowrap;
  }
  .shell.with-sidebar.sidebar-collapsed .sidebar a::before {
    content: none;
  }
  .page-header { flex-direction: column; }
  .tenant-org-card {
    align-items: stretch;
    flex-direction: column;
  }
  .button-row { justify-content: flex-start; }
  .table-toolbar { align-items: stretch; flex-direction: column; }
  .table-search { max-width: none; }
  .indent, .indent2, .indent3 { margin-left: .75rem; }
  .course-hero,
  .lesson-nav {
    align-items: stretch;
    flex-direction: column;
  }
  .workspace-filters,
  .workspace-course-card,
  .builder-summary,
  .builder-layout {
    grid-template-columns: 1fr;
  }
  .course-thumb { min-height: 120px; }
  .builder-tree {
    max-height: none;
    position: static;
  }
  .lesson-step-progress {
    flex-direction: column;
  }
  .lesson-layout { grid-template-columns: 1fr; }
  .course-outline {
    position: static;
    max-height: none;
  }
  .authoring-studio {
    grid-template-columns: 1fr;
  }
  .authoring-studio.sidebar-collapsed {
    grid-template-columns: 1fr;
  }
  .studio-sidebar {
    position: static;
  }
  .studio-main {
    padding: 1rem;
  }
  .studio-header,
  .studio-editor-head {
    align-items: stretch;
    flex-direction: column;
  }
  .studio-actions {
    flex-wrap: wrap;
  }
  .studio-workspace,
  .studio-metrics {
    grid-template-columns: 1fr;
  }
  .studio-tree,
  .studio-editor,
  .studio-details {
    max-height: none;
    min-height: 0;
    position: static;
  }
  .studio-block-card {
    align-items: flex-start;
    grid-template-columns: 22px 44px minmax(0, 1fr);
  }
  .studio-block-card .studio-block-badge,
  .studio-block-card .studio-block-duration,
  .studio-block-card .studio-icon-button {
    grid-column: 3;
    justify-self: start;
  }
  .studio-drop-zone {
    align-items: center;
    flex-direction: column;
  }
}