.course-studio {
  max-width: 1500px;
  font-family: var(--sans, system-ui, sans-serif);
  font-size: 14px;
}

.course-studio .admin-title {
  margin-bottom: var(--ui-page-gap, 24px);
  padding: 28px 32px;
  background: var(--ui-text, #173044);
  color: var(--ui-inverse-text, #fff);
}

.course-studio .admin-title p {
  color: color-mix(in srgb, var(--ui-inverse-text, #fff) 72%, var(--ui-accent, #1676a8));
}

.course-studio .quiet-button {
  border-color: color-mix(in srgb, var(--ui-inverse-text, #fff) 72%, var(--ui-accent, #1676a8));
}

.course-studio .quiet-button:hover {
  background: var(--ui-surface, #fffdf7);
  color: var(--ui-text, #173044);
}

.course-studio .course-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--ui-section-gap, 18px);
}

.course-studio .studio-panel {
  padding: var(--ui-section-gap, 18px);
  border: 1px solid var(--ui-border-color, #bfd0da);
  border-radius: var(--ui-panel-radius, 6px);
  background: var(--ui-surface, #fffdf7);
  box-shadow: var(--ui-shadow-card, 0 8px 22px rgba(23, 47, 66, .07));
}

.course-studio .studio-panel h2 {
  padding-top: 3px;
  color: var(--ui-text, #173044);
  font: 700 26px / 1.18 var(--serif);
}

.course-studio .studio-panel label,
.course-studio .course-editor label,
.course-studio .node-editor label,
.course-studio .course-resource-form label {
  display: block;
  margin-top: var(--ui-field-gap, 10px);
  color: var(--ui-text, #173044);
  font-size: var(--type-small-font-size, 11px);
  font-weight: 800;
  line-height: 1.5;
}

.course-studio .studio-panel input,
.course-studio .studio-panel select,
.course-studio .studio-panel textarea,
.course-studio .course-editor input,
.course-studio .course-editor select,
.course-studio .course-editor textarea,
.course-studio .node-editor input,
.course-studio .node-editor select,
.course-studio .node-editor textarea,
.course-studio .course-resource-form input,
.course-studio .course-resource-form select {
  width: 100%;
  margin-top: 5px;
  padding: 9px;
  border: 1px solid var(--ui-border-color, #bfd0da);
  border-radius: var(--ui-control-radius, 3px);
  background: var(--ui-input-bg, #fff);
  color: var(--ui-text, #173044);
  font-size: var(--type-card-title-size, 13px);
  line-height: 1.4;
}

.course-studio .studio-panel textarea,
.course-studio .course-editor textarea,
.course-studio .node-editor textarea {
  min-height: 64px;
  resize: vertical;
}

.course-studio .studio-panel .save-btn {
  margin-top: var(--ui-card-padding, 14px);
}

.course-studio .course-stack {
  display: grid;
  gap: var(--ui-section-gap, 18px);
}

.course-studio .course-card {
  border: 1px solid var(--ui-border-color, #bfd0da);
  border-radius: var(--ui-panel-radius, 6px);
  background: var(--ui-surface, #fffdf7);
  box-shadow: var(--ui-shadow-card, 0 7px 18px rgba(23, 47, 66, .07));
  transition: box-shadow .14s, outline-color .14s, max-height .14s;
}

.course-studio .course-card.dragging,
.course-studio .tree-node.dragging {
  max-height: 62px;
  overflow: hidden;
  opacity: .72;
  box-shadow: var(--ui-shadow-soft, 0 12px 30px rgba(23, 47, 66, .18));
  pointer-events: none;
}

.course-studio .course-card.drop-target,
.course-studio .tree-node.drop-target {
  outline: 2px solid var(--ui-accent, #1676a8);
  outline-offset: 2px;
}

.course-studio .course-card.drop-before,
.course-studio .tree-node.drop-before {
  box-shadow: inset 0 4px var(--ui-accent, #1676a8);
}

.course-studio .course-card.drop-after,
.course-studio .tree-node.drop-after {
  box-shadow: inset 0 -4px var(--ui-accent, #1676a8);
}

.course-studio .course-head {
  display: flex;
  gap: var(--ui-field-gap, 10px);
  align-items: center;
  padding: var(--ui-card-padding, 14px) var(--ui-section-gap, 18px);
  border-bottom: 1px solid var(--ui-border-color, #bfd0da);
  background: var(--ui-empty-bg, #f7fbfc);
}

.course-studio .drag-handle {
  padding: 3px 6px;
  color: var(--ui-accent, #1676a8);
  cursor: grab;
  font-size: 21px;
  line-height: 1;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.course-studio .drag-handle:active {
  cursor: grabbing;
}

.course-studio .course-head b {
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.5;
}

.course-studio .course-head small {
  margin-left: auto;
  color: var(--ui-muted, #607884);
  font-size: var(--type-small-font-size, 11px);
}

.course-studio .course-card > details > summary {
  padding: var(--ui-disclosure-summary-padding, 13px 14px);
  color: var(--ui-text, #173044);
  cursor: pointer;
  font-size: var(--type-helper-font-size, 12px);
  line-height: 1.5;
}

.course-studio .course-card > details[open] > summary {
  border-bottom: 1px solid var(--ui-border-color, #bfd0da);
}

.course-studio .course-editor {
  padding: var(--ui-section-gap, 18px);
}

.course-studio .pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ui-field-gap, 10px);
}

.course-studio .action-row {
  margin-top: var(--ui-card-padding, 14px);
}

.course-studio :where(.action-row):not(.ui-action-row) {
  display: flex;
  gap: var(--ui-space-2, 8px);
  align-items: center;
  flex-wrap: wrap;
}

.course-studio .save-btn,
.course-studio .add-btn {
  padding: 9px 12px;
  border: 0;
  border-radius: var(--ui-control-radius, 3px);
  background: var(--ui-accent, #1676a8);
  color: var(--ui-inverse-text, #fff);
  cursor: pointer;
  font-size: var(--type-small-font-size, 11px);
  font-weight: 700;
}

.course-studio .save-btn:hover,
.course-studio .add-btn:hover {
  background: var(--ui-accent-hover, #125d84);
}

.course-studio .delete-btn {
  padding: 9px 12px;
  border: 0;
  border-radius: var(--ui-control-radius, 3px);
  background: var(--ui-danger, #b35243);
  color: var(--ui-inverse-text, #fff);
  cursor: pointer;
  font-size: var(--type-small-font-size, 11px);
}

.course-studio .tree-wrap {
  padding: 0 var(--ui-section-gap, 18px) var(--ui-section-gap, 18px);
}

.course-studio .tree-list {
  min-height: 35px;
  margin: 0;
  padding: 6px 0 0;
  list-style: none;
}

.course-studio .tree-list .tree-list {
  margin-left: 25px;
  padding-left: 11px;
  border-left: 1px dashed var(--ui-border-color, #bfd0da);
}

.course-studio .tree-node {
  margin: 7px 0;
  border: 1px solid var(--ui-border-color, #bfd0da);
  border-radius: var(--ui-panel-radius, 6px);
  background: var(--ui-input-bg, #fff);
  transition: box-shadow .14s, outline-color .14s, max-height .14s;
}

.course-studio .node-bar {
  display: flex;
  gap: var(--ui-space-2, 8px);
  align-items: center;
  padding: 9px 10px;
  background: var(--ui-surface-elevated, var(--ui-surface, #fffdf7));
}

.course-studio .node-icon {
  color: var(--ui-accent, #1676a8);
}

.course-studio .node-title {
  overflow-wrap: anywhere;
  font-size: var(--type-card-title-size, 13px);
  font-weight: 700;
  line-height: 1.45;
}

.course-studio .node-status {
  margin-left: auto;
  padding: 2px 5px;
  border-radius: var(--ui-control-radius, 3px);
  background: var(--ui-info-bg, #edf6f8);
  color: var(--ui-muted, #607884);
  font-size: 9px;
  white-space: nowrap;
}

.course-studio .node-status.live {
  background: var(--ui-success-bg, #e4f1ea);
  color: var(--ui-success, #287048);
}

.course-studio .node-editor {
  padding: var(--ui-space-3, 12px);
  border-top: 1px solid var(--ui-border-color, #bfd0da);
  background: var(--ui-empty-bg, #f7fbfc);
}

.course-studio .node-editor summary {
  color: var(--ui-muted, #607884);
  cursor: pointer;
  font-size: var(--type-small-font-size, 11px);
}

.course-studio .node-add {
  margin: 0 var(--ui-section-gap, 18px) var(--ui-section-gap, 18px);
  padding: var(--ui-card-padding, 14px);
  border: 1px dashed var(--ui-border-color, #bfd0da);
  border-radius: var(--ui-panel-radius, 6px);
  background: var(--ui-empty-bg, #f7fbfc);
}

.course-studio .node-add {
  padding: var(--ui-section-gap, 18px);
  border: 1px solid var(--ui-border-color, #bfd0da);
  background: var(--ui-surface, #fffdf7);
  box-shadow: var(--ui-shadow-card, 0 4px 12px rgba(23, 47, 66, .05));
}

.course-studio .node-add h3 {
  margin: 0 0 8px;
  color: var(--ui-text, #173044);
  font-size: var(--type-card-title-size, 13px);
}

.course-studio .node-add h3 {
  margin: 0 0 8px;
  color: var(--ui-text, #173044);
  font: 700 20px / 1.2 var(--serif);
}

.course-studio .node-add label {
  display: block;
  margin-top: var(--ui-field-gap, 10px);
  color: var(--ui-text, #173044);
  font-size: var(--type-small-font-size, 11px);
  font-weight: 800;
  line-height: 1.5;
}

.course-studio .node-add input,
.course-studio .node-add select,
.course-studio .node-add textarea {
  box-sizing: border-box;
  width: 100%;
  margin-top: 5px;
  padding: 9px;
  border: 1px solid var(--ui-border-color, #bfd0da);
  border-radius: var(--ui-control-radius, 3px);
  background: var(--ui-input-bg, #fff);
  color: var(--ui-text, #173044);
  font-size: var(--type-card-title-size, 13px);
  line-height: 1.4;
}

.course-studio .node-add textarea {
  min-height: 64px;
  resize: vertical;
}

.course-studio .node-add .check-row {
  margin-top: var(--ui-field-gap, 10px);
}

.course-studio .node-add .check-row input {
  width: auto;
  margin: 0;
}

.course-studio .node-add .add-btn {
  margin-top: var(--ui-card-padding, 14px);
}

.course-studio .course-resources {
  margin: 0 var(--ui-section-gap, 18px) var(--ui-section-gap, 18px);
  padding: var(--ui-card-padding, 14px);
  border: 1px solid var(--ui-border-color, #bfd0da);
  border-radius: var(--ui-panel-radius, 6px);
  background: var(--ui-empty-bg, #f7fbfc);
}

.course-studio .course-resources h3 {
  margin: 0;
  color: var(--ui-text, #173044);
  font-size: var(--type-section-title-size, 14px);
}

.course-studio .course-resources p {
  margin: 5px 0 0;
  color: var(--ui-muted, #607884);
  font-size: var(--type-small-font-size, 11px);
  line-height: 1.6;
}

.course-studio .course-resource-form {
  display: grid;
  grid-template-columns: 1.1fr 1.1fr 1fr .7fr auto auto;
  gap: var(--ui-space-2, 8px);
  align-items: end;
  margin-top: var(--ui-space-3, 12px);
}

.course-studio .course-resource-form label {
  margin: 0;
}

.course-studio .course-resource-form .check-row {
  margin: 0;
}

.course-studio .course-resource-list {
  margin: var(--ui-space-3, 12px) 0 0;
  padding: 0;
  list-style: none;
}

.course-studio .course-resource-list li {
  display: flex;
  gap: var(--ui-space-2, 8px);
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--ui-border-color, #bfd0da);
  color: var(--ui-text, #173044);
  font-size: var(--type-small-font-size, 11px);
}

.course-studio .course-resource-list .pdf-icon {
  width: 24px;
  height: 30px;
  border-width: 1.5px;
}

.course-studio .course-resource-list .pdf-icon::before {
  width: 10px;
  height: 10px;
}

.course-studio .course-resource-list .pdf-icon::after {
  left: 5px;
  right: 5px;
  top: 13px;
  height: 1.5px;
  box-shadow: 0 5px 0 var(--ui-danger, #b35243), 0 10px 0 var(--ui-border-strong, #9eb9c5);
}

.course-studio .course-resource-list small {
  margin-left: auto;
  color: var(--ui-muted, #607884);
}

.course-studio .check-row {
  display: flex;
  gap: var(--ui-space-3, 12px);
  align-items: center;
  margin-top: var(--ui-field-gap, 10px);
  font-size: var(--type-small-font-size, 11px);
}

.course-studio .check-row input {
  width: auto;
}

.course-studio .flash {
  max-width: none;
}

.course-studio .sort-note {
  margin: 0 0 var(--ui-card-padding, 14px);
  color: var(--ui-muted, #607884);
  font-size: var(--type-small-font-size, 11px);
  line-height: 1.7;
}

body.sorting-active {
  cursor: grabbing;
  user-select: none;
}

@media (max-width: 900px) {
  .course-studio .course-layout {
    grid-template-columns: 1fr;
  }

  .course-studio .admin-title {
    padding: 22px;
  }

  .course-studio .tree-list .tree-list {
    margin-left: 13px;
  }

  .course-studio .pair,
  .course-studio .course-resource-form {
    grid-template-columns: 1fr;
  }

  .course-studio .course-resource-form .check-row {
    margin-top: 0;
  }
}

/* Core editor compatibility for course studio loaded after pages.css. */
.course-studio :where(.studio-panel, .course-card, .tree-node, .node-add, .course-resources) {
  border-color: var(--ui-border-color, #bfd0da);
  border-radius: var(--ui-panel-radius, 6px);
  background-color: var(--ui-surface, #fffdf7);
  color: var(--ui-text, #173044);
}

.course-studio :where(.course-head, .node-bar, .node-editor) {
  border-color: var(--ui-border-color, #bfd0da);
  background: var(--ui-editor-toolbar-bg, var(--ui-filter-bg, #f5fafb));
}

.course-studio :where(.studio-panel label, .course-editor label, .node-editor label, .course-resource-form label, .node-add label) {
  color: var(--ui-text, #173044);
  font-size: var(--type-form-label-size, 11px);
  font-weight: var(--type-form-label-weight, 800);
  line-height: 1.45;
}

.course-studio :where(.studio-panel input, .studio-panel select, .studio-panel textarea, .course-editor input, .course-editor select, .course-editor textarea, .node-editor input, .node-editor select, .node-editor textarea, .course-resource-form input, .course-resource-form select, .node-add input, .node-add select, .node-add textarea) {
  min-height: var(--ui-control-height, 40px);
  border-color: var(--ui-border-color, #bfd0da);
  border-radius: var(--ui-control-radius, 3px);
  background: var(--ui-input-bg, #fff);
  color: var(--ui-text, #173044);
  font-size: var(--type-form-control-size, var(--ui-control-font-size, 12px));
}

.course-studio :where(.save-btn, .add-btn) {
  border: 1px solid var(--ui-accent, #1676a8);
  border-radius: var(--ui-control-radius, 3px);
  background: var(--ui-accent, #1676a8);
  color: var(--ui-inverse-text, #fff);
}

.course-studio :where(.save-btn:hover, .save-btn:focus-visible, .add-btn:hover, .add-btn:focus-visible) {
  border-color: var(--ui-accent-hover, #125d84);
  background: var(--ui-accent-hover, #125d84);
  color: var(--ui-inverse-text, #fff);
}

.course-studio :where(.delete-btn) {
  border: 1px solid var(--ui-danger, #b35243);
  border-radius: var(--ui-control-radius, 3px);
  background: var(--ui-danger, #b35243);
  color: var(--ui-inverse-text, #fff);
}