/* A centered presentation canvas over a quiet background. */
.presentation-dialog,
.presentation-dialog:fullscreen,
.presentation-dialog::backdrop {
  background: #e9ecef;
}
.presentation-dialog.is-presentation-fullscreen { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; border-radius: 0; }
.presentation-dialog.is-presentation-fullscreen > .dialog-content { height: calc(100vh - 72px); }
.presentation-shell:fullscreen { width: 100vw; height: 100vh; max-width: none; border: 0; border-radius: 0; }
.presentation-dialog > .dialog-header {
  height: 72px;
  padding: 0 10vw;
  border-bottom: 0;
  background: #e9ecef;
}
.presentation-dialog > .dialog-content {
  display: flex;
  justify-content: center;
  height: calc(100dvh - 72px);
  padding: 0 0 26px;
  overflow: hidden;
  background: #e9ecef;
}
.presentation-shell {
  width: min(80vw, 1440px);
  height: 100%;
  overflow: hidden;
  border: 1px solid #d9dde1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 55px #20252b18;
}
.presentation-stage {
  display: block;
  overflow-y: auto;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: clamp(32px, 5vw, 80px);
  padding-left: clamp(32px, 5vw, 80px);
  background: #fff;
  scroll-behavior: smooth;
  scroll-snap-type: none;
  scroll-padding-top: clamp(28px, 5vh, 56px);
  scrollbar-gutter: stable;
}
.presentation-step {
  min-height: 0;
  display: flex;
  align-items: flex-start;
  padding: clamp(28px, 5vh, 56px) 0;
  border-bottom: 1px solid #e8eaed;
  scroll-snap-align: none;
  animation: presentation-reveal .28s ease-out;
}
.presentation-step:last-child { border-bottom: 0; }
.presentation-step > .student-block {
  width: 100%;
  margin: 0;
  color: #111;
  font-size: 27px;
  line-height: 1.9;
}
@keyframes presentation-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Less vertical air between authoring blocks while keeping controls readable. */
.editor-main .block {
  padding-top: 9px;
  padding-bottom: 9px;
}
.editor-main .insert-gap {
  height: 24px;
}
.editor-main .last-gap {
  height: 8px;
}
.editor-main .add-block-footer {
  margin-top: 14px;
  padding-top: 20px;
}
.editor-main .block-tools {
  top: -29px;
}

/* Keep each insertion point and block together so the full document can reorder live. */
.editor-main .block-slot {
  position: relative;
  will-change: auto;
}
.editor-main .block-slot:has(> .block.selected) { z-index: 12; }
.editor-main #blocks.is-reordering {
  cursor: grabbing;
  user-select: none;
}
.editor-main #blocks.is-reordering .block-slot { will-change: transform; }
.editor-main .block-slot.is-dragging-slot > .block {
  opacity: .22;
  border: 2px dashed #76a994;
  background: #f4faf7;
  box-shadow: 0 8px 25px #173f3212;
}
.editor-main .block-slot.is-dragging-slot > .block .block-tools {
  opacity: 0;
}
.editor-main .block-slot.is-dragging-slot > .insert-gap::before {
  height: 3px;
  opacity: 1;
  background: #176b57;
}

@media (prefers-reduced-motion: reduce) {
  .editor-main .block-slot { will-change: auto; }
  .presentation-stage { scroll-behavior: auto; }
  .presentation-step { animation: none; }
}

/* A complete, interactive material preview lives directly beside Editor and JSON. */
.editor-main.mode-preview {
  max-width: 1440px;
}
.view-switch {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.view-switch::-webkit-scrollbar { display: none; }
.view-switch > button { flex: 0 0 auto; }
.inline-preview-pane {
  min-height: 720px;
  padding: clamp(18px, 3vw, 44px);
  border: 1px solid #dfe3e7;
  border-radius: 18px;
  background: #eef0f2;
}
.inline-preview-pane[hidden] { display: none; }
.inline-preview-toolbar {
  width: min(100%, 980px);
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.inline-preview-toolbar > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inline-preview-toolbar strong {
  color: #17191c;
  font-size: 15px;
  font-weight: 750;
}
.inline-preview-toolbar span {
  color: #626870;
  font-size: 12px;
}
.inline-preview-paper {
  width: min(100%, 980px);
  min-height: 640px;
  margin: 0 auto;
  padding: clamp(38px, 6vw, 76px) clamp(24px, 7vw, 92px);
  border: 1px solid #dfe2e5;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 20px 60px #242a3012;
  color: #111;
}
.inline-preview-title {
  padding-bottom: 30px;
  margin-bottom: 36px;
  border-bottom: 2px solid #111;
}
.inline-preview-title > span {
  display: block;
  margin-bottom: 16px;
  color: #4d5359;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}
.inline-preview-paper .inline-preview-title h1 {
  margin: 0;
  color: #080808;
  font-size: clamp(34px, 5vw, 54px);
  font-weight: 850;
  line-height: 1.15;
  letter-spacing: -1.4px;
}
.inline-preview-paper .student-content {
  display: grid;
  gap: 28px;
}
.inline-preview-paper .student-block { margin: 0; }
.inline-preview-paper .document-text,
.inline-preview-paper .student-heading,
.inline-preview-paper .student-question h3,
.inline-preview-paper .cloze-exercise { color: #111; }
.inline-preview-paper .document-text {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.8;
}
.inline-preview-paper .student-heading {
  font-weight: 800;
  letter-spacing: -.4px;
}
.inline-preview-paper .student-question {
  border-color: #d9dde1;
  background: #f8f9fa;
}
.inline-preview-paper .student-option {
  border-color: #d9dde1;
  color: #17191c;
}

@media (max-width: 580px) {
  .inline-preview-pane { min-height: 520px; padding: 12px; border-radius: 12px; }
  .inline-preview-toolbar { align-items: flex-start; margin-bottom: 12px; }
  .inline-preview-toolbar span { display: none; }
  .inline-preview-toolbar .button { min-height: 38px; padding: 8px 10px; font-size: 12px; }
  .inline-preview-paper { min-height: 500px; padding: 34px 20px; border-radius: 9px; }
  .inline-preview-title { padding-bottom: 22px; margin-bottom: 27px; }
  .inline-preview-paper .inline-preview-title h1 { font-size: 32px; }
  .inline-preview-paper .document-text { font-size: 17px; }
}

@media (max-width: 800px) {
  .presentation-dialog > .dialog-header {
    height: 64px;
    padding: 0 4vw;
  }
  .presentation-dialog > .dialog-content {
    height: calc(100dvh - 64px);
    padding-bottom: 14px;
  }
  .presentation-shell {
    width: calc(100vw - 24px);
    border-radius: 12px;
  }
  .presentation-step {
    min-height: 0;
    padding: 28px 0;
  }
}
@media (max-width: 580px) {
  .editor-main .block {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .editor-main .insert-gap {
    height: 21px;
  }
  .editor-main .last-gap {
    height: 6px;
  }
  .editor-main .add-block-footer {
    margin-top: 10px;
    padding-top: 17px;
  }
}
@media print {
  .presentation-shell {
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Focused authoring controls stay close to the content and appear only when needed. */
.editor-main .block.selected {
  z-index: 12;
  border-color: #b9cec6;
  background: #f3f7f5;
  box-shadow: 0 0 0 3px #176b5708;
}
.block-text .block-body { position: relative; }
.text-format-toolbar {
  position: absolute;
  top: -39px;
  left: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid #d9dee1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 16px #17191c12;
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px);
  transition: opacity .14s, transform .14s;
}
.block-text.selected .text-format-toolbar,
.block-text:focus-within .text-format-toolbar {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.text-format-toolbar button {
  display: grid;
  min-width: 29px;
  height: 27px;
  place-items: center;
  padding: 0 6px;
  border-radius: 5px;
  color: #272b2f;
  font-size: 13px;
  line-height: 1;
}
.text-format-toolbar button:hover,
.text-format-toolbar button:focus-visible { background: #eef4f1; color: #105e4b; }
.format-separator { width: 1px; height: 17px; margin: 0 2px; background: #e2e5e7; }
.format-color-a { padding-bottom: 1px; border-bottom: 3px solid #176b57; font-weight: 800; }
.text-color-wrap { position: relative; }
.text-color-palette {
  position: absolute;
  top: 32px;
  left: -5px;
  display: flex;
  gap: 3px;
  padding: 6px;
  border: 1px solid #d9dee1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px #17191c1a;
}
.text-color-palette[hidden] { display: none; }
.text-color-palette button { min-width: 25px; width: 25px; height: 25px; padding: 0; }
.text-color-palette button span { width: 14px; height: 14px; border: 1px solid #0002; border-radius: 50%; }
.rich-text-editor {
  min-height: 40px;
  outline: none;
  color: #17191c;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rich-text-editor:empty::before { content: attr(data-placeholder); color: #737981; pointer-events: none; }
.rich-text-editor:focus { caret-color: #176b57; }
.rich-text-editor a { color: #176b57; text-decoration: underline; }
.formatted-text p { margin: 0 0 .55em; }
.formatted-text p:last-child { margin-bottom: 0; }
.formatted-text ul,
.formatted-text ol { margin: .25em 0 .65em; padding-left: 1.55em; }
.formatted-text li { margin: .18em 0; }

/* Merksätze are recognizable in editor, preview, export and presentation. */
.callout-editor,
.student-callout {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  border: 1px solid #ead791;
  border-radius: 10px;
  background: #fff8d9;
  color: #17191c;
}
.callout-editor { padding: 15px 17px; align-items: center; }
.callout-content { flex: 1; min-width: 0; }
.callout-content .block-input { color: #17191c; font-weight: 650; }
.callout-icon-picker { position: relative; flex: 0 0 auto; }
.callout-current-icon,
.student-callout-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 9px;
  background: #f4dc72;
  color: #624b00;
}
.callout-current-icon:hover { background: #edcf4b; }
.callout-current-icon svg,
.student-callout-icon svg { width: 22px; height: 22px; }
.callout-icon-palette {
  position: absolute;
  top: 45px;
  left: -7px;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(3, 34px);
  gap: 3px;
  padding: 6px;
  border: 1px solid #d9c369;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 8px 22px #17191c1a;
}
.callout-icon-palette[hidden] { display: none; }
.callout-icon-palette button { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 6px; color: #66500a; }
.callout-icon-palette button:hover,
.callout-icon-palette button.is-selected { background: #fff3bc; }
.callout-icon-palette svg { width: 19px; height: 19px; }
.student-callout { padding: 20px 22px; }
.student-callout > div { flex: 1; min-width: 0; }
.student-callout .document-text { margin: 0; color: #17191c; font-weight: 650; }
.presentation-stage .student-callout { padding: 28px 30px; gap: 22px; }
.presentation-stage .student-callout-icon { width: 52px; height: 52px; }
.presentation-stage .student-callout-icon svg { width: 29px; height: 29px; }

@media (max-width: 650px) {
  .text-format-toolbar { position: static; width: max-content; max-width: 100%; margin-bottom: 7px; opacity: 1; pointer-events: auto; transform: none; }
  .callout-editor { gap: 10px; padding: 12px; }
  .callout-current-icon, .student-callout-icon { width: 34px; height: 34px; }
}

.json-dialog { width: min(900px, calc(100vw - 30px)); max-height: calc(100dvh - 40px); }
.json-dialog > .dialog-content { padding: 0; overflow: auto; }
.json-dialog .json-pane { position: static; border: 0; border-radius: 0; }
.json-dialog #json-editor { height: min(62dvh, 620px); max-height: none; }
.json-file-actions [data-action="import-material"],
.json-file-actions [data-action="export-material"] { display: none; }

.editor-main.mode-document { max-width: 1280px; }
.mode-document > .editor-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 30px; align-items: start; }
.document-outline { position: sticky; top: 103px; max-height: calc(100dvh - 125px); overflow: auto; padding: 13px 11px; border: 1px solid #e3e8dd; border-radius: 8px; background: #fff; box-shadow: 0 3px 14px #33442a05; }
.document-outline > span { display: block; margin: 0 4px 8px; color: #9aa58f; font-size: 8px; font-weight: 650; letter-spacing: 1.25px; }
.document-outline nav { display: grid; gap: 2px; }
.document-outline p { margin: 4px; color: #a6b199; font-size: 10px; line-height: 1.45; }
.outline-item { display: flex; width: 100%; gap: 5px; padding: 6px 7px; overflow: hidden; border-radius: 5px; color: #58704b; font-size: 11px; font-weight: 620; line-height: 1.35; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.outline-item:hover, .outline-item:focus-visible { background: #f1f6eb; color: #2e7159; }
.outline-item.is-subheading { padding-left: 15px; color: #829276; font-size: 10px; font-weight: 500; }
.outline-item.is-subheading > span { margin-right: 4px; color: #a0ad94; }
@media (max-width: 920px) { .editor-main.mode-document { max-width: 898px; } .mode-document > .editor-layout { display: block; } .document-outline { display: none; } }

.heading-level-buttons { display: flex; gap: 5px; margin-bottom: 11px; }
.heading-level-button { display: inline-flex; min-width: 48px; height: 35px; align-items: center; justify-content: center; gap: 4px; padding: 4px 8px; border: 1px solid #dfe7d8; border-radius: 6px; color: #71816d; background: #fff; }
.heading-level-button strong { font-size: 11px; font-weight: 750; }.heading-level-button:hover, .heading-level-button.is-active { border-color: #94b47f; color: #286047; background: #f1f7eb; }
.heading-line .heading-number { min-width: 42px; padding-top: 2px; color: #45603a; font-size: 23px; line-height: 1.5; letter-spacing: -.4px; font-weight: 560; }

.code-editor { overflow: hidden; border: 1px solid #27313d; border-radius: 8px; background: #121923; }
.code-editor-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 11px; color: #b8c7d9; background: #1c2734; font-size: 10px; font-weight: 700; letter-spacing: .8px; }
.code-editor-top > span { display: flex; align-items: center; gap: 6px; }
.code-editor-top .icon { width: 15px; height: 15px; color: #80c7ff; }
.code-editor-top label { display: flex; align-items: center; gap: 6px; color: #98aabd; font-size: 9px; font-weight: 550; letter-spacing: 0; }
.code-editor-top select { padding: 3px 6px; border: 1px solid #415266; border-radius: 4px; color: #e4effa; background: #121923; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }
.code-input { display: block; width: 100%; min-height: 142px; padding: 13px; border: 0; border-bottom: 1px solid #27313d; resize: vertical; color: #eff6ff; background: #121923; font: 13px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
.code-input:focus { outline: 2px solid #79c7ff; outline-offset: -2px; }
.code-input::placeholder { color: #718297; }
.code-live { border-top: 1px solid #334254; }
.student-code { position: relative; overflow: hidden; margin: 20px 0; border: 1px solid #27313d; border-radius: 8px; background: #121923; color: #eff6ff; }
.code-language { padding: 7px 12px; border-bottom: 1px solid #27313d; color: #8dcaff; background: #1c2734; font: 700 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1px; text-transform: uppercase; }
.student-code pre { margin: 0; padding: 14px; overflow: auto; color: inherit; font: 13px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; white-space: pre; }
.code-keyword { color: #d9a7ff; }.code-string { color: #9fe3a7; }.code-comment { color: #77879b; font-style: italic; }.code-number { color: #ffc07a; }.code-directive { color: #80c7ff; }.code-tag { color: #86d8ff; }

.image-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; }
.image-editor.has-side-image .image-editor-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.image-editor .image-block { width: 100%; margin: 0; }
.image-editor:not(.has-side-image) .image-block { width: var(--main-image); max-width: 100%; }
.image-editor.has-side-image .image-block{width:100%;max-width:100%}
.image-editor .image-block img { width: 100%; max-height: 650px; object-fit: contain; }
.image-resize-handle { position: absolute; right: 2px; bottom: 2px; z-index: 3; width: 17px; height: 17px; border: 2px solid #fff; border-radius: 3px 0 3px 0; background: #2e7159; box-shadow: 0 1px 4px #17261b66; cursor: nwse-resize; opacity: 0; }
.image-block:hover .image-resize-handle, .image-block:focus-within .image-resize-handle, .block.selected .image-resize-handle { opacity: 1; }
.is-resizing-image, .is-resizing-image * { cursor: nwse-resize !important; user-select: none; }
.image-side-placeholder { display: flex; min-height: 155px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed #b7c9a8; border-radius: 7px; color: #7c966b; background: #f8faf4; opacity: .55; transition: opacity .15s, background .15s; }
.image-editor:hover .image-side-placeholder, .image-side-placeholder:focus-visible { opacity: 1; background: #f1f7e9; }
.image-side-placeholder .icon { width: 22px; height: 22px; }.image-side-placeholder strong { font-size: 11px; }.image-side-placeholder span { max-width: 150px; color: #98a88c; font-size: 9px; line-height: 1.5; text-align: center; }.image-side-placeholder kbd { padding: 0 3px; border: 1px solid #dbe6d0; border-radius: 3px; background: #fff; }
.student-image-single { width: var(--image-width); max-width: 100%; margin: 20px auto; }.student-image-single[data-align="left"]{margin-left:0;margin-right:auto}.student-image-single[data-align="right"]{margin-left:auto;margin-right:0}.student-image-single .student-image-figure { margin: 0; }.student-image-pair { display: grid; grid-template-columns: minmax(0, var(--main-image)) minmax(0, var(--side-image)); gap: 16px; margin: 20px 0; }.student-image-pair .student-image-figure { min-width: 0; margin: 0; }.student-image-pair img, .student-image-single img { width: 100%; height: auto; max-height: 650px; object-fit: contain; display: block; }.student-image-pair figcaption, .student-image-single figcaption { text-align: center; }
@media (max-width: 600px) { .image-editor.has-side-image .image-editor-grid, .student-image-pair { grid-template-columns: 1fr; }.image-editor .image-block, .image-editor:not(.has-side-image) .image-block { width: 100%; }.image-side-placeholder { opacity: 1; } }

/* Versions remain reachable while the document scrolls. */
.student-image-pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.student-image-pair .student-image-figure{width:var(--figure-width,100%);margin:0}
.version-floating { position: fixed; top: 91px; right: max(22px, calc((100vw - 1320px) / 2)); z-index: 15; display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid #d7dfd2; border-radius: 50%; color: #28583f; background: #fff; box-shadow: 0 6px 22px #22302024; transition: transform .15s, box-shadow .15s, background .15s; }
.version-floating:hover, .version-floating:focus-visible { transform: translateY(-2px); color: #176b57; background: #f3f8ef; box-shadow: 0 9px 25px #22302030; }
.version-floating .icon { width: 21px; height: 21px; }
.version-dialog { width: min(580px, calc(100vw - 30px)); }
.version-intro { margin: 0 0 17px; color: #607060; font-size: 13px; line-height: 1.55; }
.version-list { display: grid; max-height: min(56dvh, 500px); gap: 8px; overflow: auto; }
.version-item { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 14px; border: 1px solid #e1e7dc; border-radius: 8px; background: #fff; }
.version-item > div { min-width: 0; }
.version-item strong, .version-item span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.version-item strong { color: #25352b; font-size: 13px; }
.version-item span { margin-top: 3px; color: #8b9887; font-size: 11px; }
.version-item .button { flex: 0 0 auto; min-height: 32px; padding: 6px 10px; font-size: 11px; }
.version-empty { margin: 0; padding: 20px 4px; color: #7b8976; font-size: 13px; text-align: center; }
@media (max-width: 600px) { .version-floating { top: 72px; right: 14px; width: 43px; height: 43px; } .version-item { gap: 9px; padding: 11px; } .version-item .button { padding: 6px 8px; font-size: 10px; } .heading-level-button { min-width: 43px; height: 32px; padding: 3px 6px; } }

.file-placeholder, .file-editor { border: 1px solid #dce5d5; border-radius: 9px; background: #fbfdf9; }
.file-placeholder { display: grid; justify-items: center; gap: 7px; padding: 25px 18px; color: #6d8064; text-align: center; }
.file-placeholder .icon { width: 25px; height: 25px; color: #4c835e; }.file-placeholder strong { color: #344534; font-size: 13px; }.file-placeholder span, .file-placeholder small { font-size: 11px; }.file-placeholder small { color: #9aa793; }
.file-editor { padding: 13px; }.file-editor-label { display: flex; align-items: center; gap: 6px; margin: 0 0 9px; color: #6e7f68; font-size: 9px; font-weight: 700; letter-spacing: .9px; }.file-editor-label .icon { width: 15px; height: 15px; color: #397456; }
.student-file-card { display: flex; width: 100%; align-items: center; gap: 11px; padding: 13px; border: 1px solid #dce7d6; border-radius: 8px; color: #25372b; background: #fff; text-align: left; }.student-file-card:not(.is-static) { cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }.student-file-card:not(.is-static):hover, .student-file-card:not(.is-static):focus-visible { border-color: #72a67d; background: #f5faef; transform: translateY(-1px); }
.file-card-icon { display: grid; flex: 0 0 33px; width: 33px; height: 38px; place-items: center; border-radius: 6px; color: #2f7650; background: #e8f3e5; font-size: 21px; }.file-card-copy { min-width: 0; flex: 1; }.file-card-copy strong, .file-card-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.file-card-copy strong { font-size: 13px; }.file-card-copy small { margin-top: 3px; color: #849281; font-size: 10px; }.file-card-open { flex: 0 0 auto; color: #347253; font-size: 11px; font-weight: 650; }.file-editor-actions { display: flex; gap: 7px; margin-top: 10px; }
.file-preview-dialog { width: min(1180px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); }.file-preview-dialog > .dialog-content { display: flex; flex-direction: column; min-height: 0; }.file-preview-meta { margin: 0 0 10px; color: #82907d; font-size: 11px; }.file-preview-content { overflow: auto; min-height: min(72dvh, 620px); max-height: min(80dvh, 860px); border: 1px solid #dde5d8; border-radius: 7px; background: #fafcf8; }.file-preview-text { min-height: inherit; margin: 0; padding: 20px; color: #243127; font: 14px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }.file-preview-content.is-html { background: #fff; }.file-preview-frame { display: block; width: 100%; height: min(76dvh, 800px); border: 0; background: #fff; }
@media (max-width: 600px) { .file-editor-actions { flex-wrap: wrap; } .file-preview-dialog { width: calc(100vw - 10px); max-height: calc(100dvh - 10px); } .file-preview-content { min-height: 70dvh; } .file-preview-frame { height: 72dvh; } }

/* Compact editor rhythm: the content stays readable while each block needs less space. */
.editor-main .block { padding: 8px 9px; }
.editor-main .block-input { line-height: 1.6; min-height: 29px; }
.editor-main .block-tools { top: -25px; }
.editor-main .insert-gap { height: 22px; }
.editor-main .question-block, .editor-main .media-editor, .editor-main .file-editor { padding: 12px 14px; border-radius: 8px; }
.editor-main .question-topline { margin-bottom: 10px; gap: 8px; }
.editor-main .question-topline > span { font-size: 10px; }
.editor-main .question-topline select { min-height: 30px; padding: 5px 8px; font-size: 11px; }
.editor-main .choice-option { gap: 7px; margin-top: 6px; }
.editor-main .choice-option > input[data-option] { padding: 6px 8px; font-size: 11px; }
.editor-main .solution-details { margin-top: 8px; }
.editor-main .file-placeholder { min-height: 105px; padding: 14px; gap: 5px; }
.editor-main .file-placeholder .icon { width: 21px; height: 21px; }
.editor-main .file-placeholder span, .editor-main .file-placeholder small { font-size: 10px; }
.editor-main .student-file-card { padding: 9px 10px; gap: 8px; }
.editor-main .file-card-icon { flex-basis: 27px; width: 27px; height: 31px; font-size: 17px; }
.editor-main .file-card-copy strong { font-size: 12px; }
.editor-main .file-card-open { font-size: 10px; }
.inline-preview-paper .student-block { margin: 16px 0; }
.inline-preview-paper .student-question { padding: 16px; }

/* Clear editor hierarchy: one compact toolbar, one focused writing surface. */
.editor-view-toolbar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 58px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid #e1e7dc;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 14px #33442a06;
}
.editor-context {
  display: flex;
  min-width: 190px;
  flex-direction: column;
  gap: 1px;
}
.editor-context strong { color: #30432f; font-size: 13px; font-weight: 700; }
.editor-context span { color: #98a592; font-size: 10px; }
.view-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid #e2e8dc;
  border-radius: 7px;
  background: #f7f9f4;
}
.view-switch > button {
  min-height: 30px;
  padding: 5px 12px;
  border-radius: 5px;
  color: #7c8d76;
  font-size: 11px;
  font-weight: 650;
}
.view-switch > button:hover { color: #316047; background: #eef5e9; }
.view-switch > button.active,
.view-switch > button[aria-pressed="true"] { color: #fff; background: #2e7159; box-shadow: 0 2px 4px #284c3818; }
.json-file-actions { display: flex; align-items: center; margin-left: auto; }
.json-file-actions .button { min-height: 30px; padding: 5px 9px; color: #6c8066; }
.paper { padding-top: 38px; }
.document-heading { padding-bottom: 18px; margin-bottom: 8px; }
.document-label { margin-bottom: 9px; }
.add-block-footer { border-top: 1px solid #e8eee3; background: #fbfcfa; border-radius: 8px; padding: 14px 12px 8px; }
.add-block-footer > span { margin-bottom: 9px; color: #60775c; font-size: 11px; font-weight: 650; }
.add-block-footer > p { margin-top: 12px; }
.editor-bottom-note { display: none; }

@media (max-width: 760px) {
  .editor-view-toolbar { align-items: stretch; flex-wrap: wrap; gap: 8px; padding: 9px; }
  .editor-context { flex: 1 1 100%; min-width: 0; }
  .view-switch { flex: 1; }
  .view-switch > button { flex: 1; padding-inline: 7px; }
  .json-file-actions { margin-left: 0; }
  .json-file-actions .button { min-height: 36px; }
  .paper { padding-top: 28px; }
}

/* Unified visual system for the complete workspace. */
:root {
  --ui-ink: #17231c;
  --ui-muted: #68756b;
  --ui-subtle: #8d988f;
  --ui-line: #dfe5df;
  --ui-line-strong: #cbd6cb;
  --ui-surface: #fff;
  --ui-canvas: #f4f6f3;
  --ui-soft: #eef4ee;
  --ui-accent: #176b57;
  --ui-accent-dark: #0f5544;
  --ui-radius: 10px;
  --ui-shadow: 0 8px 24px rgba(27, 46, 35, .07);
}
body { color: var(--ui-ink); background: var(--ui-canvas); }
.app-header { height: 68px; padding-inline: clamp(18px, 4vw, 56px); border-bottom: 1px solid var(--ui-line); background: rgba(255,255,255,.96); box-shadow: 0 1px 8px rgba(20,40,28,.04); }
.brand { color: var(--ui-ink); font-size: 22px; letter-spacing: -.8px; }
.brand > .icon { color: var(--ui-accent); }
.back-button { color: var(--ui-muted); border-left-color: var(--ui-line); }
.back-button:hover { color: var(--ui-accent); }
.save-status { color: var(--ui-muted); }
.button { min-height: 36px; border-radius: 7px; font-size: 12px; font-weight: 650; }
.button.primary { background: var(--ui-accent); border-color: var(--ui-accent); box-shadow: none; }
.button.primary:hover { background: var(--ui-accent-dark); }
.button.secondary { color: var(--ui-ink); border-color: var(--ui-line-strong); background: var(--ui-surface); }
.button.secondary:hover { border-color: var(--ui-accent); background: var(--ui-soft); }
.button.quiet { color: var(--ui-accent); }
.editor-main { max-width: 1360px; margin-top: 24px; padding-inline: clamp(14px, 3vw, 36px); }
.editor-view-toolbar { min-height: 62px; margin-bottom: 16px; padding: 10px 14px; border-color: var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
.editor-context strong { color: var(--ui-ink); }
.editor-context span { color: var(--ui-muted); }
.view-switch { border-color: var(--ui-line); background: #f7f9f7; }
.view-switch > button { color: var(--ui-muted); }
.view-switch > button:hover { color: var(--ui-accent); background: var(--ui-soft); }
.view-switch > button.active, .view-switch > button[aria-pressed="true"] { background: var(--ui-accent); }
.mode-document > .editor-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
.document-outline { top: 92px; padding: 14px; border-color: var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
.document-outline > span { color: var(--ui-subtle); }
.outline-item { color: var(--ui-muted); border-radius: 6px; }
.outline-item:hover, .outline-item:focus-visible { color: var(--ui-accent); background: var(--ui-soft); }
.paper { min-height: 680px; padding: 42px clamp(24px, 5vw, 76px) 34px; border-color: var(--ui-line); border-radius: 12px; box-shadow: var(--ui-shadow); }
.document-heading { border-bottom-color: var(--ui-line); }
.document-label { color: var(--ui-subtle); letter-spacing: 1.2px; }
.document-heading textarea { color: var(--ui-ink); font-weight: 700; }
.document-heading textarea::placeholder { color: #a4afa7; }
.block { border-radius: 8px; }
.block:hover { border-color: var(--ui-line-strong); }
.block.selected:focus-within { border-color: #9bc5b4; background: #f8fcf9; box-shadow: 0 0 0 3px rgba(23,107,87,.08); }
.block-input { color: #27372d; }
.block-input::placeholder { color: #9ba89e; }
.block-rail { left: -38px; }
.drag-handle { color: #9aa79d; }
.drag-handle:hover { color: var(--ui-accent); background: var(--ui-soft); }
.block-tools { border-color: var(--ui-line); box-shadow: 0 5px 16px rgba(27,46,35,.1); }
.icon-button:not(:disabled):hover { color: var(--ui-accent); background: var(--ui-soft); }
.insert-gap:before { background: #b5d0c0; }
.insert-gap.drop-target:before { background: var(--ui-accent); }
.insert-plus { color: var(--ui-accent); border-color: #bcd0c4; }
.insert-menu { border-color: var(--ui-line); box-shadow: 0 10px 30px rgba(27,46,35,.12); }
.type-button { color: #345b4c; border-color: var(--ui-line); border-radius: 7px; background: var(--ui-surface); }
.type-button:hover { color: var(--ui-accent); border-color: #a8c7b5; background: var(--ui-soft); }
.add-block-footer { border-top-color: var(--ui-line); background: #f9fbf9; }
.add-block-footer > span { color: var(--ui-ink); }
.question-block, .media-editor, .file-editor { border-color: var(--ui-line); background: #f8faf8; }
.question-topline > span, .media-editor-label, .file-editor-label { color: var(--ui-accent); }
.question-topline select, .media-editor input, .caption-input, .choice-option > input:not([type=radio]) { border-color: var(--ui-line); color: var(--ui-ink); background: #fff; }
.question-topline select:focus, .media-editor input:focus, .caption-input:focus, .choice-option > input:focus { border-color: #8bbda9; box-shadow: 0 0 0 3px rgba(23,107,87,.08); }
.image-placeholder, .image-side-placeholder, .file-placeholder { border-color: #c5d9ca; color: var(--ui-accent); background: #f4faf5; }
.image-placeholder:hover, .image-side-placeholder:hover { background: #eaf5ed; }
.image-gap-control input { accent-color: var(--ui-accent); }
.version-floating { border-color: var(--ui-line-strong); color: var(--ui-accent); box-shadow: var(--ui-shadow); }
.version-floating:hover, .version-floating:focus-visible { color: var(--ui-accent-dark); background: var(--ui-soft); }
dialog { border-color: var(--ui-line); border-radius: 12px; box-shadow: 0 22px 70px rgba(20,42,29,.2); }
.dialog-header { border-bottom-color: var(--ui-line); }
.dialog-header h2 { color: var(--ui-ink); font-weight: 700; }
.dialog-content > p { color: var(--ui-muted); }
.inline-preview-pane { border-color: var(--ui-line); border-radius: 12px; background: #e9eeea; }
.inline-preview-paper { border-color: var(--ui-line); box-shadow: var(--ui-shadow); }

@media (max-width: 920px) {
  .mode-document > .editor-layout { display: block; }
  .document-outline { display: none; }
}

/* Peaklearn-inspired workspace: quiet canvas, white page, compact controls. */
body { background: #f1f3f0; }
.app-header { background: #ffffff; }
.editor-main { margin-top: 18px; }
.editor-view-toolbar { background: rgba(255,255,255,.9); border: 0; box-shadow: 0 2px 10px rgba(32,52,40,.04); }
.editor-context { padding-left: 4px; }
.editor-context strong { font-size: 14px; letter-spacing: -.15px; }
.editor-context span { font-size: 10px; }
.view-switch { border: 0; background: #edf1ed; }
.view-switch > button { min-height: 31px; padding-inline: 14px; }
.view-switch > button.active, .view-switch > button[aria-pressed="true"] { color: #15241b; background: #fff; box-shadow: 0 1px 5px rgba(26,48,35,.12); }
.paper { border: 0; box-shadow: 0 4px 22px rgba(27,46,35,.06); }
.document-outline { border: 0; box-shadow: none; background: rgba(255,255,255,.72); }
.document-outline > span { font-size: 9px; }
.outline-item { padding-block: 7px; color: #6a776d; }
.outline-item.is-subheading { color: #879289; }
.document-heading textarea { font-size: clamp(30px, 3.2vw, 42px); letter-spacing: -1.4px; line-height: 1.2; }
.document-heading { padding-bottom: 24px; margin-bottom: 14px; }
.block { padding-block: 10px; }
.block-input { font-size: 15px; line-height: 1.75; color: #1c2a21; }
.heading-input { font-size: 25px; line-height: 1.35; color: #17231c; }
.heading-line .heading-number { font-size: 25px; line-height: 1.35; color: #17231c; }
.block.selected:focus-within { background: #fbfdfb; border-color: #bed8c9; box-shadow: 0 0 0 2px rgba(23,107,87,.07); }
.add-block-footer { margin-top: 20px; border: 1px dashed #cad8cd; background: #f7faf7; }
.add-block-footer > span { font-size: 12px; }
.type-button { min-height: 36px; padding-inline: 11px; font-size: 11px; }
.question-block, .media-editor, .file-editor { background: #f6f9f6; }
.callout-editor { background: #fff9d8; border-color: #e8d98d; }
.formula-editor { background: #f6f7fb; border-color: #dfe1ed; }
.table-editor { border-color: #dce5df; background: #fbfcfb; }
.image-placeholder, .image-side-placeholder, .file-placeholder { min-height: 145px; }
.inline-preview-pane { background: #e9ece9; }
.inline-preview-paper { box-shadow: 0 8px 30px rgba(27,46,35,.08); }

/* Wider, high-contrast authoring canvas. */
.editor-main.mode-document { max-width: 1536px; }
.editor-main.mode-document .paper { background: #fff; color: #000; }
.editor-main.mode-document .document-heading textarea,
.editor-main.mode-document .heading-input,
.editor-main.mode-document .heading-line .heading-number,
.editor-main.mode-document .block-input { color: #000; }
.editor-main.mode-document .document-heading textarea::placeholder,
.editor-main.mode-document .block-input::placeholder { color: #7b7b7b; }
.editor-main.mode-document .document-label,
.editor-main.mode-document .document-outline > span { color: #666; }
.editor-main.mode-document .document-outline { background: #fff; }
.editor-main.mode-document .outline-item { color: #222; }
.editor-main.mode-document .outline-item:hover,
.editor-main.mode-document .outline-item:focus-visible { color: #000; background: #f1f1f1; }
.editor-main.mode-document .block:hover { border-color: #d0d0d0; }
.editor-main.mode-document .block.selected:focus-within { border-color: #777; background: #fff; box-shadow: 0 0 0 2px #e5e5e5; }
.editor-main.mode-document .add-block-footer { color: #000; background: #fafafa; border-color: #bdbdbd; }
.editor-main.mode-document .add-block-footer > span { color: #000; }

@media (max-width: 920px) { .editor-main.mode-document { max-width: 100%; } }

.courses-main, .course-main { max-width: 1180px; margin: 36px auto 60px; padding: 0 28px; }
.courses-heading { margin-bottom: 30px; }
.courses-heading h1, .course-heading h1 { margin: 0; color: #17231c; font-size: clamp(30px, 4vw, 46px); letter-spacing: -1.5px; line-height: 1.15; }
.courses-heading p:last-child, .course-heading p:last-child { margin-top: 8px; color: #68756b; font-size: 13px; }
.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.course-card { position: relative; min-height: 170px; overflow: hidden; border: 1px solid #dfe5df; border-radius: 14px; background: #fff; box-shadow: 0 5px 18px rgba(27,46,35,.06); text-align: left; }
.course-card-open { display: flex; width: 100%; height: 100%; min-height: 170px; flex-direction: column; align-items: flex-start; padding: 24px; text-align: left; }
.course-card-open:hover { background: #fbfdfb; }
.course-card-kicker { color: #587064; font-size: 10px; font-weight: 750; letter-spacing: 1.1px; text-transform: uppercase; }
.course-card-open strong { max-width: 85%; margin-top: 12px; color: #17231c; font-size: 21px; line-height: 1.25; }
.course-card-open small { margin-top: auto; color: #718077; font-size: 11px; }
.course-card-arrow { position: absolute; right: 22px; bottom: 18px; color: #176b57; font-size: 27px; line-height: 1; }
.course-card-edit { position: absolute; top: 12px; right: 12px; color: #8a978d; }
.course-card-edit:hover { color: #176b57; background: #eef4ee; }
.course-sage { background: linear-gradient(135deg,#fff 0%,#f1f8f1 100%); }
.course-violet { background: linear-gradient(135deg,#fff 0%,#f5f1fa 100%); }
.course-peach { background: linear-gradient(135deg,#fff 0%,#fff5ec 100%); }
.course-blue { background: linear-gradient(135deg,#fff 0%,#eef6fa 100%); }
.course-rose { background: linear-gradient(135deg,#fff 0%,#fff0f1 100%); }
.course-card-new { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #176b57; background: #f7faf7; border-style: dashed; }
.course-card-new > span { display: grid; width: 42px; height: 42px; margin-bottom: 12px; place-items: center; border: 1px solid #bdd3c4; border-radius: 50%; background: #fff; }
.course-card-new strong { font-size: 13px; }
.course-card-new small { margin-top: 5px; color: #7d8b81; font-size: 10px; }
.course-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 30px 34px; border-radius: 16px; box-shadow: 0 5px 20px rgba(27,46,35,.06); }
.course-heading-meta { display: flex; flex-direction: column; align-items: flex-end; color: #176b57; }
.course-heading-meta span { font-size: 38px; font-weight: 750; line-height: 1; }
.course-heading-meta small { margin-top: 5px; color: #68756b; font-size: 11px; }
.course-toolbar { display: flex; align-items: center; gap: 12px; margin: 30px 0 14px; }
.course-toolbar strong { color: #17231c; font-size: 17px; }
.course-toolbar > span { color: #829087; font-size: 11px; }
.course-toolbar .button { margin-left: auto; }
.course-material-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.course-material-card { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 8px 5px 14px; border: 1px solid #dfe5df; border-radius: 9px; background: #fff; }
.course-material-card > button:first-child { display: flex; min-width: 0; flex: 1; flex-direction: column; align-items: flex-start; padding: 9px 0; text-align: left; }
.course-material-card strong { overflow: hidden; width: 100%; color: #25352b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.course-material-card span { margin-top: 3px; color: #849188; font-size: 10px; }
.course-material-card .icon-button { flex: 0 0 28px; }
.course-empty { grid-column: 1/-1; padding: 42px; border: 1px dashed #cbd9ce; border-radius: 10px; color: #7d8b81; text-align: center; }
.course-form label { display: block; margin-bottom: 14px; color: #53645a; font-size: 11px; font-weight: 650; }
.course-form input, .course-form textarea, .course-form select { display: block; width: 100%; margin-top: 6px; padding: 9px 10px; border: 1px solid #dfe5df; border-radius: 7px; color: #17231c; background: #fff; font-size: 13px; }
.course-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.material-assignment-list { display: grid; max-height: 45vh; gap: 4px; margin-top: 15px; overflow: auto; }
.material-assignment-list label { display: flex; align-items: center; gap: 9px; padding: 10px; border-radius: 7px; color: #25352b; font-size: 12px; }
.material-assignment-list label:hover { background: #f1f7f2; }
.material-assignment-list input { accent-color: #176b57; }
@media (max-width: 760px) { .courses-main, .course-main { margin-top: 24px; padding-inline: 16px; } .course-grid, .course-material-grid { grid-template-columns: 1fr; } .course-heading { align-items: flex-start; flex-direction: column; padding: 24px; } .course-heading-meta { align-items: flex-start; } .course-toolbar { align-items: flex-start; flex-wrap: wrap; } .course-toolbar > span { flex-basis: 100%; order: 3; } .course-toolbar .button { margin-left: auto; } }
.join-main { display: grid; max-width: 620px; min-height: calc(100dvh - 150px); margin: 42px auto; padding: 0 20px; place-items: center; }
.join-card, .student-course-card { width: 100%; padding: 36px; border: 1px solid #dfe5df; border-radius: 15px; background: #fff; box-shadow: 0 8px 28px rgba(27,46,35,.07); }
.join-card h1, .student-course-card h1 { margin: 5px 0 10px; color: #17231c; font-size: 32px; letter-spacing: -1px; }
.join-card > p:not(.eyebrow), .student-course-card > p:not(.eyebrow) { color: #68756b; font-size: 13px; line-height: 1.6; }
.join-card label, .share-box label { display: block; margin-top: 18px; color: #53645a; font-size: 11px; font-weight: 700; }
.join-card input, .share-box input { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid #dfe5df; border-radius: 7px; color: #17231c; background: #fff; font-size: 14px; }
.join-card .button { width: 100%; margin-top: 22px; }
.join-note { margin-top: 15px !important; color: #89958c !important; font-size: 11px !important; text-align: center; }
.course-workspace { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 26px; max-width: 1320px; align-items: start; }
.course-sidebar { position: sticky; top: 88px; padding: 14px 10px; border: 1px solid #dfe5df; border-radius: 12px; background: #fff; }
.course-sidebar-title { display: flex; align-items: center; justify-content: space-between; padding: 2px 7px 12px; color: #17231c; font-size: 14px; }
.course-sidebar-title .icon-button { width: 26px; height: 26px; }
.course-sidebar nav { display: grid; gap: 3px; }
.course-sidebar-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 8px; border-radius: 7px; color: #69776d; font-size: 12px; text-align: left; }
.course-sidebar-item:hover { color: #17231c; background: #f1f5f1; }
.course-sidebar-item.active { color: #17231c; background: #eaf3ed; font-weight: 700; }
.course-sidebar-item > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-sidebar-dot { display: block; flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; }
.course-sidebar-dot.course-sage { background: #77a77e; }.course-sidebar-dot.course-violet { background: #a38ac2; }.course-sidebar-dot.course-peach { background: #d69a67; }.course-sidebar-dot.course-blue { background: #76a7c5; }.course-sidebar-dot.course-rose { background: #c98796; }
.course-content { min-width: 0; }
.course-content .course-heading { min-height: 180px; }
.course-content .course-toolbar { padding: 0 4px; }
.course-toolbar > div { display: flex; flex-direction: column; gap: 2px; }.course-toolbar > div span { color: #829087; font-size: 11px; }
.course-material-list { display: grid; gap: 7px; }
.course-material-row { display: flex; align-items: center; gap: 12px; padding: 3px 10px 3px 17px; border: 1px solid #dfe5df; border-radius: 9px; background: #fff; }
.course-material-row > button:first-child { display: grid; grid-template-columns: 125px minmax(0,1fr) 70px; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 13px 0; text-align: left; }
.course-material-row strong { overflow: hidden; color: #17231c; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.course-material-row small { color: #89958c; font-size: 10px; }.course-material-type { color: #587064; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.course-material-row:hover { border-color: #b5cebd; background: #fbfdfb; }
@media (max-width: 800px) { .course-workspace { display: block; } .course-sidebar { position: static; margin-bottom: 16px; } .course-sidebar nav { display: flex; gap: 4px; overflow-x: auto; } .course-sidebar-item { flex: 0 0 auto; width: auto; } .course-sidebar-item > span:last-child { max-width: 150px; } .course-material-row > button:first-child { grid-template-columns: 1fr; gap: 3px; } }

/* Course workspace: persistent navigation on the left, materials on the right. */
.course-main.course-workspace { max-width: 1500px; min-height: calc(100dvh - 105px); margin-top: 18px; grid-template-columns: 260px minmax(0,1fr); gap: 0; padding: 0; border: 1px solid #dedede; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 8px 28px rgba(0,0,0,.05); }
.course-workspace .course-sidebar { position: static; min-height: 100%; padding: 18px 12px; border: 0; border-right: 1px solid #e4e4e4; border-radius: 0; background: #fafafa; }
.course-workspace .course-sidebar-title { padding: 2px 8px 16px; color: #111; }.course-workspace .course-sidebar-title strong { font-size: 15px; }
.course-workspace .course-sidebar-item { padding: 10px 9px; color: #333; }.course-workspace .course-sidebar-item:hover { background: #eee; }.course-workspace .course-sidebar-item.active { color: #000; background: #e8e8e8; }
.course-workspace .course-content { padding: 34px clamp(26px,4vw,64px) 48px; background: #fff; }
.course-workspace .course-heading { min-height: 0; padding: 0 0 25px; border-radius: 0; background: #fff; box-shadow: none; border-bottom: 2px solid #111; }
.course-workspace .course-heading h1 { color: #000; font-size: clamp(30px,3.5vw,45px); }.course-workspace .course-heading p:last-child { color: #555; }.course-workspace .course-heading-meta { color: #000; }.course-workspace .course-heading-meta small { color: #555; }
.course-workspace .course-toolbar { margin: 24px 0 12px; padding: 0; }.course-workspace .course-toolbar strong { color: #000; }.course-workspace .course-toolbar > div span { color: #666; }
.course-workspace .course-material-list { gap: 0; border-top: 1px solid #ddd; }.course-workspace .course-material-row { padding: 0 8px 0 0; border: 0; border-bottom: 1px solid #e1e1e1; border-radius: 0; }.course-workspace .course-material-row:hover { border-color: #d1d1d1; background: #fafafa; }
.course-workspace .course-material-row > button:first-child { grid-template-columns: 120px minmax(0,1fr) 74px; padding: 16px 0; }.course-workspace .course-material-type { color: #555; }.course-workspace .course-material-row strong { color: #000; font-size: 14px; }.course-workspace .course-material-row small { color: #666; text-align: right; }
@media (max-width: 800px) { .course-main.course-workspace { display: block; min-height: 0; margin: 0; border: 0; border-radius: 0; } .course-workspace .course-sidebar { min-height: 0; border-right: 0; border-bottom: 1px solid #ddd; } .course-workspace .course-content { padding: 25px 18px 40px; } }
.share-box { padding: 14px; border: 1px solid #dfe5df; border-radius: 9px; background: #f8faf8; }
.share-box .button { margin-top: 10px; }
.share-box strong { display: block; margin-top: 7px; color: #17231c; font: 750 28px/1 ui-monospace, monospace; letter-spacing: 4px; }
.share-box p { margin: 12px 0 0; color: #68756b; font-size: 11px; }
.student-material-list { display: grid; gap: 8px; margin-top: 26px; }
.student-material-list button { display: flex; flex-direction: column; align-items: flex-start; padding: 14px; border: 1px solid #dfe5df; border-radius: 8px; text-align: left; }
.student-material-list button:hover { background: #f1f7f2; border-color: #a8c7b5; }
.student-material-list strong { color: #17231c; font-size: 14px; }
.student-material-list span { margin-top: 4px; color: #7d8b81; font-size: 11px; }
.student-code-create { display: flex; gap: 8px; margin-top: 16px; }.student-code-create input { min-width: 0; flex: 1; padding: 9px 10px; border: 1px solid #dfe5df; border-radius: 7px; }
.student-code-list, .student-result-list { display: grid; max-height: 38dvh; gap: 6px; margin-top: 14px; overflow: auto; }
.student-code-list article, .student-result-list article { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 12px; align-items: center; padding: 10px 11px; border: 1px solid #e0e5e0; border-radius: 7px; background: #fff; }
.student-code-list span, .student-result-list strong { overflow: hidden; color: #25352b; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.student-code-list strong { color: #17231c; font: 700 17px/1 ui-monospace, monospace; letter-spacing: 2px; }
.student-result-list article { grid-template-columns: minmax(0,1fr); }.student-result-list span, .student-result-list small { color: #718077; font-size: 11px; }.student-result-list small { padding-top: 5px; border-top: 1px solid #edf0ed; }
.student-material-main { max-width: 1000px; margin: 35px auto 60px; padding: 0 24px; }.student-material-paper { padding: clamp(28px,6vw,72px); border: 1px solid #dfe5df; border-radius: 12px; background: #fff; box-shadow: 0 8px 28px rgba(27,46,35,.07); }.student-material-paper h1 { margin-bottom: 34px; color: #17231c; font-size: clamp(28px,4vw,42px); letter-spacing: -1px; }
@media (max-width: 600px) { .student-code-create { flex-direction: column; }.student-code-create .button { width: 100%; }.student-material-main { margin-top: 20px; padding: 0 10px; } }
@media (max-width: 600px) { .join-card, .student-course-card { padding: 26px 20px; } .join-card h1, .student-course-card h1 { font-size: 27px; } }