:root {
  --ink: #18251f;
  --muted: #7b8882;
  --line: #e6e9e6;
  --paper: #fbfbf8;
  --green: #28674f;
  --green-soft: #edf5ef;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, textarea, select { font: inherit; }
button, label[for], summary { cursor: pointer; }
button:disabled { cursor: not-allowed; }

.site-header { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; border-bottom: 1px solid var(--line); background: #fbfbf8; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand strong { font-size: 14px; letter-spacing: .02em; }
.brand-mark { width: 27px; height: 27px; display: flex; justify-content: center; align-items: end; gap: 3px; padding: 5px; border-radius: 8px; background: #17382e; }
.brand-mark i { display: block; width: 3px; border-radius: 4px; background: #a9dbb7; }
.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 15px; }.brand-mark i:nth-child(3) { height: 11px; }
.header-actions { display: flex; align-items: center; gap: 15px; }
.api-status { color: #88948f; font-size: 11px; }
.api-status i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #dfa56e; }
.api-status.connected i { background: #6bbd85; }
.api-status.error i { background: #b96258; }
.quiet-button { border: 0; padding: 6px; color: #718079; background: transparent; font-size: 11px; }

.page { width: min(760px, calc(100% - 40px)); margin: 0 auto; padding: 70px 0 80px; }
.intro { margin-bottom: 31px; }
.step-label { display: inline-block; color: #58816c; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.intro h1 { margin: 10px 0 8px; font-size: clamp(28px, 5vw, 40px); line-height: 1.2; letter-spacing: 0; }
.intro p { margin: 0; color: var(--muted); font-size: 14px; }

.input-card, .settings-card, .output-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 12px 35px rgba(30,58,45,.045); }
.input-card { padding: 25px; }
.card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-title h2 { margin: 0; font-size: 16px; }
.card-title p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.required { padding: 5px 8px; border-radius: 5px; color: #a36b3f; background: #fff4e9; font-size: 10px; }

.source-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.source-button { display: flex; align-items: center; gap: 12px; min-height: 70px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 10px; background: #fcfcfa; transition: .18s; }
.source-button:hover { border-color: #98b9a4; background: #f9fcf9; }
.source-symbol { display: grid; place-items: center; width: 31px; height: 31px; flex: 0 0 31px; border-radius: 8px; font-size: 20px; font-weight: 300; }
.source-symbol.image { color: #497fa3; background: #eaf3f8; }.source-symbol.file { color: #7863a6; background: #f0ecf8; }
.source-button strong { display: block; color: #385047; font-size: 12px; }
.source-button small { display: block; margin-top: 4px; color: #a0aaa5; font-size: 10px; }
.divider { display: flex; align-items: center; gap: 10px; margin: 21px 0 13px; color: #9ba6a1; font-size: 10px; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #ecefeb; }
.text-box { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fcfcfa; }
.text-box textarea { display: block; width: 100%; min-height: 108px; padding: 14px; border: 0; outline: 0; resize: vertical; color: #45564f; background: transparent; font-size: 12px; line-height: 1.7; }
.text-box textarea::placeholder { color: #a9b2ae; }
.text-box-footer { display: flex; align-items: center; justify-content: space-between; padding: 7px 9px 9px 14px; color: #a6afaa; font-size: 9px; }
.text-box-footer button, .drop-zone button { border: 0; border-radius: 6px; padding: 7px 10px; color: #397356; background: #eaf5ec; font-size: 10px; }
.drop-zone { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 12px; padding: 10px; border: 1px dashed #d2dcd5; border-radius: 9px; color: #96a19c; font-size: 10px; }
.drop-zone.dragging { border-color: #6ea482; background: #f2f9f3; }
.drop-zone button { padding: 3px; background: transparent; text-decoration: underline; text-underline-offset: 2px; }

.materials-list-wrap { margin-top: 21px; padding-top: 18px; border-top: 1px solid #edf0ed; }
.list-heading { display: flex; justify-content: space-between; color: #607069; font-size: 10px; }
.list-heading span { color: #9ba7a1; }
.materials-list { display: grid; gap: 7px; margin-top: 10px; }
.material-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; background: #f7f9f7; }
.material-thumb { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border-radius: 6px; color: #568669; background: #e8f2ea; font-size: 11px; }
.material-thumb img { width: 100%; height: 100%; object-fit: cover; }
.material-meta { min-width: 0; flex: 1; }
.material-meta strong { display: block; overflow: hidden; color: #50635b; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.material-meta small { display: block; margin-top: 3px; color: #9ba6a1; font-size: 8px; }
.remove-material { border: 0; color: #aeb7b3; background: transparent; font-size: 16px; }

.settings-card { margin-top: 12px; overflow: hidden; }
.settings-card > summary { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; list-style: none; }
.settings-card > summary::-webkit-details-marker { display: none; }
.settings-card > summary strong { color: #40544b; font-size: 12px; }
.settings-card > summary small { display: block; margin: 4px 0 0 28px; color: #99a49f; font-size: 10px; }
.settings-card > summary i { color: #89968f; font-style: normal; transition: .2s; }
.settings-card[open] > summary i { transform: rotate(180deg); }
.course-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 3px 20px 21px; border-top: 1px solid #eef0ee; }
.settings-card > .course-form { border-top: 0; }
.field { min-width: 0; padding-top: 15px; }
.field.wide, .tag-field.wide { grid-column: 1 / -1; }
.field > span, .tag-field > span { display: block; margin-bottom: 6px; color: #66776f; font-size: 10px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #e2e7e3; border-radius: 7px; outline: 0; color: #4d6259; background: #fcfcfa; font-size: 10px; }
.field input, .field select { height: 35px; padding: 0 10px; }
.field textarea { min-height: 68px; padding: 9px 10px; resize: vertical; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #8eb29a; }
.input-with-unit { position: relative; }.input-with-unit input { padding-right: 40px; }.input-with-unit em { position: absolute; top: 10px; right: 10px; color: #9ca8a2; font-size: 9px; font-style: normal; }
.tag-field { padding-top: 2px; }.tag-row { display: flex; flex-wrap: wrap; gap: 7px; }.tag { border: 1px solid #e1e7e2; border-radius: 6px; padding: 6px 9px; color: #7e8d86; background: #fff; font-size: 9px; }.tag.active { border-color: #a5c9af; color: #42775a; background: #eff7f0; }

.generation-area { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding: 17px 19px; border-radius: 12px; background: #edf5ef; }
.generation-area > div:first-child strong { display: block; color: #395548; font-size: 11px; }
.generation-area > div:first-child span { display: block; margin-top: 4px; color: #7f9489; font-size: 10px; }
.generation-actions { display: flex; gap: 8px; }
.primary-button, .script-button { min-width: 112px; height: 39px; border-radius: 8px; padding: 0 14px; font-size: 10px; font-weight: 700; }
.primary-button { border: 1px solid #28674f; color: #fff; background: #28674f; }
.primary-button span { color: #b9e4c5; margin-right: 5px; }
.script-button { border: 1px solid #bdd5c4; color: #47785b; background: #fff; }
.script-button:disabled { border-color: #d8e1da; color: #a9b4ad; background: #f8faf8; }

.outputs-section { margin-top: 62px; }
.outputs-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 15px; }
.outputs-heading h2 { margin: 8px 0 0; font-size: 23px; letter-spacing: 0; }
.output-tabs { display: flex; padding: 3px; border-radius: 8px; background: #edf1ed; }
.output-tab { border: 0; border-radius: 6px; padding: 7px 13px; color: #7b8c84; background: transparent; font-size: 10px; }
.output-tab.active { color: #3e7456; background: #fff; box-shadow: 0 2px 6px rgba(40,70,55,.08); }
.output-card { min-width: 0; max-width: 100%; padding: 24px; overflow-x: hidden; }
.output-top { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid #edf0ed; }
.output-top h3 { margin: 0; font-size: 17px; }.output-top p { margin: 6px 0 0; color: #8c9993; font-size: 9px; }
.output-actions { display: flex; gap: 6px; }.small-button { height: 28px; border: 1px solid #e0e7e2; border-radius: 6px; padding: 0 9px; color: #698078; background: #fff; font-size: 9px; }
.plan-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 26px; padding-top: 20px; }
.output-block h4 { margin: 0 0 9px; color: #516b5f; font-size: 10px; }.output-block p, .output-block li { color: #6e7d76; font-size: 10px; line-height: 1.7; }.output-block p { margin: 0; }.output-block ul { margin: 0; padding-left: 16px; }
.spaced-heading { margin-top: 20px !important; }
.output-title-spaced { margin-top: 10px !important; }
.generated-text { padding-top: 18px; color: #66776f; font-size: 10px; line-height: 1.7; }
.generated-text p { margin: 0 0 9px; }
.generated-text ul { padding-left: 18px; }
.generic-section + .generic-section { margin-top: 13px; }
.lesson-template-document { display: grid; min-width: 0; max-width: 100%; gap: 16px; padding-top: 16px; }
.lesson-template-document > section { min-width: 0; max-width: 100%; }
.lesson-template-document > section + section { padding-top: 15px; border-top: 1px solid #edf0ed; }
.lesson-template-document p, .lesson-template-document li { color: #65776e; font-size: 9px; line-height: 1.65; }
.lesson-template-document p { margin: 8px 0 0; }
.lesson-template-document ul { margin: 7px 0 0; padding-left: 16px; }
.lesson-section-title { display: flex; align-items: center; gap: 7px; margin: 0; color: #40584c; font-size: 11px; }
.lesson-section-title span { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 5px; color: #397153; background: #eaf4ec; font-size: 8px; }
.lesson-meta-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 9px; }
.lesson-meta-grid > span { padding: 7px 8px; border-radius: 5px; color: #5f7268; background: #f5f7f5; font-size: 8px; }
.lesson-meta-grid b, .lesson-split b { display: block; margin-bottom: 3px; color: #91a099; font-size: 7px; font-weight: 600; }
.lesson-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 9px; }
.lesson-split > div { min-width: 0; padding: 9px; border: 1px solid #edf0ed; border-radius: 6px; }
.blackboard-preview { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; padding: 10px; border: 1px dashed #cfdad2; border-radius: 6px; background: #f8faf8; }
.blackboard-preview > span { padding: 4px 7px; border-radius: 4px; color: #476557; background: #eaf2ec; font-size: 8px; max-width: 100%; }
.flow-table { width: 100%; border-collapse: collapse; }.flow-table th { padding: 0 0 8px; border-bottom: 1px solid #e9eeea; color: #9da8a3; font-size: 8px; font-weight: 500; text-align: left; }.flow-table td { padding: 9px 5px 9px 0; border-bottom: 1px solid #edf1ee; color: #687970; font-size: 9px; line-height: 1.5; vertical-align: top; }.flow-table tr:last-child td { border-bottom: 0; }.flow-time { width: 42px; color: #4f8a64 !important; }
.script-header { display: flex; align-items: center; gap: 8px; color: #567268; font-size: 9px; }.script-pill { padding: 4px 7px; border-radius: 5px; color: #417359; background: #eaf5ec; }
.script-timeline { display: grid; gap: 13px; padding-top: 20px; }.script-scene { display: grid; grid-template-columns: 75px 1fr; gap: 14px; }.scene-time { align-self: start; padding: 6px 5px; border-radius: 6px; color: #528066; background: #edf5ef; font-size: 8px; text-align: center; }.scene-body { min-width: 0; padding-bottom: 12px; border-bottom: 1px solid #edf0ed; }.script-scene:last-child .scene-body { border: 0; }.scene-body h4 { margin: 1px 0 8px; color: #3e594d; font-size: 10px; }.scene-row { display: grid; grid-template-columns: 35px 1fr; gap: 7px; margin-top: 5px; }.scene-row > span { color: #9aa8a1; font-size: 8px; }.scene-row p { min-width: 0; margin: 0; color: #6f7f77; font-size: 9px; line-height: 1.6; }.scene-row.ai p { color: #43805c; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.toast { position: fixed; left: 50%; bottom: 25px; z-index: 10; transform: translate(-50%, 18px); padding: 10px 14px; border-radius: 7px; color: #fff; background: #1b3d32; box-shadow: 0 10px 25px rgba(0,0,0,.16); opacity: 0; pointer-events: none; font-size: 10px; transition: .2s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 650px) {
  .site-header { padding: 0 18px; }.api-status { display: none; }.page { width: calc(100% - 28px); padding: 45px 0 60px; }.input-card { padding: 20px 16px; }.source-buttons { grid-template-columns: 1fr; }.course-form { grid-template-columns: 1fr; }.field.wide, .tag-field.wide { grid-column: auto; }.generation-area { align-items: stretch; flex-direction: column; }.generation-actions { display: grid; grid-template-columns: 1fr 1fr; }.primary-button, .script-button { min-width: 0; }.plan-layout, .lesson-meta-grid, .lesson-split { grid-template-columns: 1fr; }.output-top { flex-direction: column; }.output-card { padding: 20px 16px; }.script-scene { grid-template-columns: 1fr; gap: 8px; }.scene-time { justify-self: start; }
}

/* 第一阶段工作台布局：左侧输入，右侧预览 */
[hidden] { display: none !important; }
.site-header { position: sticky; top: 0; z-index: 5; }
.page { width: min(1180px, calc(100% - 64px)); padding: 48px 0 80px; }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.intro h1 { margin-top: 9px; }
.shortcut-hint { margin-bottom: 5px; color: #9aa59f; font-size: 10px; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, .91fr) minmax(520px, 1.09fr); align-items: start; gap: 20px; }
.left-column { min-width: 0; }
.preview-column { position: sticky; top: 89px; min-width: 0; min-height: 620px; padding: 23px; border: 1px solid var(--line); border-radius: 14px; background: #f4f7f3; box-shadow: 0 12px 35px rgba(30,58,45,.035); }
.preview-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 17px; }
.preview-heading h2 { margin: 8px 0 0; font-size: 21px; letter-spacing: 0; }
.preview-status { padding: 5px 8px; border-radius: 5px; color: #899a91; background: #e9f0ea; font-size: 9px; }
.preview-empty { min-height: 525px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px dashed #d1ddd3; border-radius: 11px; color: #91a099; background: rgba(255,255,255,.45); text-align: center; }
.preview-empty-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 13px; border-radius: 10px; color: #67a177; background: #e2f0e4; font-size: 16px; }
.preview-empty strong { color: #63766c; font-size: 12px; }.preview-empty p { margin: 8px 0 0; color: #9aa7a0; font-size: 10px; line-height: 1.7; }
.card-index { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 7px; border-radius: 6px; color: #4f8b64; background: #e9f5eb; font-size: 9px; vertical-align: 1px; }
.large-drop { flex-direction: column; min-height: 171px; justify-content: center; margin-top: 22px; padding: 20px; border-color: #c9dbcf; background: #fbfdfb; }
.large-drop .drop-symbol { display: grid; place-items: center; width: 31px; height: 31px; margin-bottom: 10px; border-radius: 9px; color: #5a996e; background: #e8f5ea; font-size: 21px; font-weight: 300; }
.large-drop strong { display: block; color: #5f756a; font-size: 11px; }.large-drop small { display: block; margin-top: 5px; color: #9aa8a0; font-size: 9px; }.large-drop button { margin-top: 11px; padding: 6px 10px; border: 1px solid #d8e7db; border-radius: 6px; color: #4d8a64; background: #fff; font-size: 9px; text-decoration: none; }
.material-templates { margin-top: 18px; padding-top: 15px; border-top: 1px solid #edf0ed; }.templates-heading { display: flex; align-items: center; justify-content: space-between; }.templates-heading strong { color: #43564d; font-size: 12px; }.templates-heading small { display: block; margin-top: 4px; color: #9ba7a1; font-size: 9px; }.templates-heading a { color: #5b916c; font-size: 9px; text-decoration: none; }.template-list { display: grid; gap: 7px; margin-top: 14px; }.template-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: 1px solid #edf0ed; border-radius: 8px; background: #fcfdfa; text-align: left; transition: .16s; }.template-item:hover { border-color: #acd1b4; background: #f6fbf6; }.template-icon { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; font-size: 14px; }.template-icon.green { color: #4f9868; background: #e7f4e9; }.template-icon.blue { color: #527ea0; background: #e9f1f7; }.template-icon.orange { color: #b47a4c; background: #fbefe4; }.template-item strong { display: block; color: #54665d; font-size: 10px; }.template-item small { display: block; margin-top: 3px; color: #a1aba6; font-size: 8px; }.template-item b { margin-left: auto; color: #9aad9f; font-size: 13px; font-weight: 400; }
.generation-area { margin-top: 12px; }
.preview-column .outputs-section { margin-top: 0; }.preview-column .outputs-heading { margin-bottom: 13px; }.preview-column .output-card { box-shadow: none; }.preview-column .output-top { padding-bottom: 14px; }.preview-column .plan-layout { grid-template-columns: 1fr; gap: 20px; }.preview-column .flow-table { font-size: 9px; }.preview-column .flow-table td { font-size: 9px; }
.preview-column .script-timeline { gap: 10px; }.preview-column .script-row { font-size: 9px; }

/* Single-assistant LangGraph workflow */
.settings-assistants { border-top: 1px solid #eef0ee; border-bottom: 1px solid #eef0ee; }
.settings-assistants > summary { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; list-style: none; }
.settings-assistants > summary::-webkit-details-marker { display: none; }
.settings-assistants > summary strong { display: block; color: #40544b; font-size: 11px; }
.settings-assistants > summary small { display: block; margin: 3px 0 0; color: #99a49f; font-size: 9px; }
.settings-assistants > summary i { color: #89968f; font-style: normal; transition: .2s; }
.settings-assistants[open] > summary i { transform: rotate(180deg); }
.settings-assistants .agents-list { border-top: 1px solid #f0f2f0; }
.agent-item { padding: 16px 20px 17px; }
.agent-item + .agent-item { border-top: 1px solid #edf0ed; }
.agent-heading { display: flex; align-items: center; gap: 10px; }
.agent-heading > div { min-width: 0; flex: 1; }
.agent-heading strong { display: block; color: #3f5149; font-size: 11px; }
.agent-heading small { display: block; margin-top: 3px; color: #98a39e; font-size: 9px; }
.agent-number { display: grid; place-items: center; width: 25px; height: 25px; flex: 0 0 25px; border-radius: 50%; color: #fff; background: #326c55; font-size: 10px; font-weight: 700; }
.agent-item:nth-child(2) .agent-number { background: #477a9b; }
.agent-item:nth-child(3) .agent-number { background: #a16b40; }
.agent-state { padding: 4px 7px; border-radius: 5px; color: #7c8983; background: #f1f3f1; font-size: 8px; }
.agent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; padding-left: 35px; }
.compact-field { min-width: 0; }
.compact-field > span { display: block; margin-bottom: 5px; color: #6d7b75; font-size: 9px; font-weight: 600; }
.compact-field input, .compact-field select { width: 100%; border: 1px solid #e1e6e2; border-radius: 6px; outline: 0; color: #4c5d55; background: #fcfcfa; font-size: 10px; }
.compact-field input, .compact-field select { height: 33px; padding: 0 9px; }
.fixed-model { display: flex; align-items: center; height: 33px; padding: 0 9px; border: 1px solid #e2e7e3; border-radius: 7px; color: #397153; background: #f4f8f4; font-size: 9px; font-weight: 600; }
.compact-field input:focus, .compact-field select:focus { border-color: #8eb29a; background: #fff; }
.selected-template { color: #4f795f; font-size: 9px; }
.template-item.active { border-color: #86b497; background: #f3f9f4; box-shadow: inset 3px 0 #4e8964; }
.generation-area { border-radius: 8px; }
.generation-area .primary-button { flex: 0 0 auto; min-width: 124px; }
.primary-button:disabled { border-color: #7f9d8d; background: #7f9d8d; }

.live-progress { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 14px; padding: 2px 1px 13px; border-bottom: 1px solid #dde5df; }
.live-progress-dot { width: 10px; height: 10px; border-radius: 50%; background: #d49a58; box-shadow: 0 0 0 5px rgba(212,154,88,.12); animation: liveProgressPulse 1.1s ease-in-out infinite; }
.live-progress.done .live-progress-dot { position: relative; width: 18px; height: 18px; color: #fff; background: #4c8662; box-shadow: none; animation: none; }
.live-progress.done .live-progress-dot::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; }
.live-progress.error .live-progress-dot { position: relative; width: 18px; height: 18px; color: #fff; background: #ad5b50; box-shadow: none; animation: none; }
.live-progress.error .live-progress-dot::after { content: '!'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.live-progress-copy { min-width: 0; }
.live-progress-copy strong { display: block; color: #40554b; font-size: 13px; }
.live-progress-copy span { display: block; margin-top: 3px; overflow: hidden; color: #7d8c85; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.live-progress-meta { padding: 4px 7px; border-radius: 5px; color: #657a70; background: #e8efea; font-size: 11px; white-space: nowrap; }
.math-expression { font-size: 1em; }
.math-display { display: block; max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.math-display .katex-display { margin: .5em 0; }
.math-error { color: #a53b32; background: #fff0ec; padding: 2px 4px; border-radius: 3px; overflow-wrap: anywhere; }
.model-picker { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; margin-top: 12px; }
.model-picker .field { min-width: 0; }
.model-picker select { width: 100%; min-width: 0; }
.model-picker-note { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: #65776e; }
.result-origin { margin: 0 0 8px; font-size: 12px; color: #65776e; overflow-wrap: anywhere; }
#samplesDialog { width: min(560px, calc(100% - 36px)); max-height: calc(100dvh - 48px); overflow: auto; border: 1px solid #dce4de; border-radius: 12px; padding: 24px; color: #253f33; }
#samplesDialog::backdrop { background: #10243e66; }
.samples-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.samples-heading h2 { margin: 0; font-size: 20px; }
.samples-description { font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
#sampleSelect { width: 100%; }
#loadSampleButton { margin-top: 8px; }
.robot-options { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 10px 12px; border: 1px solid #dce5df; border-radius: 7px; }
.robot-options legend { font-size: 12px; color: #486757; }
.robot-options label { display: inline-flex; align-items: center; gap: 6px; margin-right: 18px; font-size: 13px; }
.robot-options input { width: auto; accent-color: #296c52; }
.robot-options p, .robot-notice { margin: 6px 0 0; color: #687970; font-size: 12px; line-height: 1.6; }
.robot-cue { padding: 7px 0; border-bottom: 1px solid #e4ece6; }
.robot-cue:last-child { border-bottom: 0; }
.robot-cue p { margin: 3px 0; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.robot-trigger { color: #6b7d73; }
.teaching-mode-label { color: #2c7153; font-size: 12px; font-weight: 600; }
.robot-scene { margin-top: 10px; }
.output-actions, .script-pill { flex-shrink: 0; }
.script-pill { white-space: nowrap; }
.output-top > div:first-child { min-width: 0; }
.flow-table th:nth-child(2), .flow-table td:nth-child(2) { min-width: 40px; }
.flow-table .katex, .script-scene .katex { font-size: 1.1em; }
@keyframes liveProgressPulse { 50% { transform: scale(.72); opacity: .66; } }

@media (max-width: 980px) {
  .workspace-grid { grid-template-columns: 1fr; }.preview-column { position: static; min-height: 480px; }.preview-empty { min-height: 380px; }
}
@media (max-width: 650px) {
  .site-header { padding: 0 12px; }.quiet-button { display: none; }.page { width: calc(100% - 28px); padding-top: 35px; }.intro { align-items: start; flex-direction: column; gap: 10px; }.shortcut-hint { margin: 0; }.workspace-grid { gap: 12px; }.preview-column { padding: 17px; }.large-drop { min-height: 150px; }.generation-area { align-items: stretch; }.agent-grid { grid-template-columns: 1fr; padding-left: 0; }.compact-field.wide { grid-column: auto; }.agent-state { display: none; }.generation-area .primary-button { width: 100%; }
}

/* Desktop single-screen workbench: three columns, no page-level scrolling. */
@media (min-width: 1101px) {
  html, body { height: 100%; overflow: hidden; }
  .site-header { position: relative; height: 54px; padding: 0 24px; }
  .page { display: flex; flex-direction: column; width: min(1560px, calc(100% - 32px)); height: calc(100dvh - 54px); padding: 13px 0 15px; overflow: hidden; }
  .intro { flex: 0 0 50px; align-items: center; margin: 0 0 10px; }
  .intro h1 { margin: 2px 0 0; font-size: 23px; line-height: 1.15; }
  .intro p { margin-top: 3px; font-size: 10px; }
  .intro .step-label { font-size: 8px; }
  .shortcut-hint { margin: 0; font-size: 9px; }

  .workspace-grid { flex: 1; grid-template-columns: minmax(500px, .92fr) minmax(620px, 1.08fr); align-items: stretch; min-height: 0; gap: 12px; }
  .left-column, .preview-column { min-width: 0; min-height: 0; }
  .left-column { display: flex; flex-direction: column; gap: 9px; overflow: auto; scrollbar-width: thin; }

  .input-card { padding: 14px; }
  .card-title p { margin-top: 3px; }
  .large-drop { min-height: 96px; margin-top: 11px; padding: 9px; }
  .large-drop .drop-symbol { width: 27px; height: 27px; margin-bottom: 3px; font-size: 18px; }
  .large-drop small { margin-top: 2px; }
  .large-drop button { margin-top: 6px; }
  .divider { margin: 9px 0 7px; }
  .text-box textarea { min-height: 70px; max-height: 70px; padding: 10px 11px; resize: none; }
  .text-box-footer { padding: 4px 7px 6px 11px; }
  .materials-list-wrap { max-height: 84px; margin-top: 9px; padding-top: 8px; overflow: auto; }
  .materials-list { margin-top: 6px; }
  .material-row { padding: 6px 8px; }
  .settings-card { flex: 0 0 auto; margin-top: 0; }
  .settings-card > summary { padding: 12px 14px; }

  .settings-card > summary small { margin-top: 2px; font-size: 8px; }
  .settings-assistants > summary { padding: 10px 12px; }
  .agent-item { padding: 8px 12px 9px; }
  .agent-heading { gap: 7px; }
  .agent-heading small { display: none; }
  .agent-number { width: 21px; height: 21px; flex-basis: 21px; font-size: 8px; }
  .agent-grid { grid-template-columns: .82fr 1.18fr; gap: 6px; margin-top: 6px; padding-left: 0; }
  .compact-field > span { margin-bottom: 3px; font-size: 8px; }
  .compact-field input, .compact-field select { height: 29px; padding: 0 7px; font-size: 9px; }

  .material-templates { margin-top: 10px; padding-top: 10px; }
  .templates-heading small { display: none; }
  .template-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
  .template-item { justify-content: center; min-height: 38px; padding: 6px; text-align: center; }
  .template-icon, .template-item small, .template-item b { display: none; }
  .material-templates .generation-area { margin-top: 8px; padding: 8px 11px; }
  .generation-area > div:first-child span { margin-top: 2px; font-size: 8px; }
  .generation-area .primary-button { height: 34px; min-width: 112px; }

  .preview-column { position: static; display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 13px; overflow: hidden; border-radius: 8px; }
  .preview-heading { flex: 0 0 auto; margin-bottom: 9px; }
  .preview-heading h2 { margin-top: 4px; font-size: 17px; }
  .preview-empty { flex: 1; min-height: 0; }
  .live-progress { flex: 0 0 auto; margin-bottom: 8px; padding-bottom: 8px; }
  .live-progress-copy strong { font-size: 11px; }
  .live-progress-copy span { font-size: 10px; }
  .live-progress-meta { font-size: 9px; }

  .preview-column .outputs-section { display: flex; flex: 1; flex-direction: column; min-height: 0; margin-top: 0; overflow: hidden; }
  .preview-column .outputs-heading { flex: 0 0 auto; align-items: center; margin-bottom: 8px; }
  .preview-column .outputs-heading h2 { margin-top: 3px; font-size: 16px; }
  .preview-column .output-card { flex: 1; min-height: 0; padding: 13px; overflow: auto; }
  .preview-column .plan-layout { grid-template-columns: .72fr 1.28fr; gap: 15px; padding-top: 13px; }
  .preview-column .output-top { padding-bottom: 10px; }
  .preview-column .output-top h3 { font-size: 14px; }
  .preview-column .flow-table td { padding: 6px 4px 6px 0; font-size: 8px; }
  .preview-column .script-timeline { padding-top: 12px; }
}

@media (min-width: 1101px) and (max-height: 760px) {
  .intro { flex-basis: 40px; }
  .intro p { display: none; }
  .large-drop { min-height: 78px; }
  .large-drop small { display: none; }
  .text-box textarea { min-height: 56px; max-height: 56px; }
  .agent-item { padding-top: 6px; padding-bottom: 6px; }
  .material-templates { margin-top: 8px; padding-top: 8px; }
}

/* Simplified, accessible workflow */
.mobile-view-switcher { display: none; }
.material-status { flex: 0 0 auto; padding: 4px 7px; border-radius: 5px; color: #406c53; background: #e8f3eb; font-size: 11px; font-weight: 600; }
.material-status.parsing { color: #80551f; background: #fff1dc; }
.material-status.error { color: #8b3d35; background: #fdecea; }
.material-row.error { background: #fff7f6; }
.material-row.parsing { background: #fffaf1; }
.drop-zone[aria-busy="true"] { border-color: #d49b55; background: #fffaf1; }
.text-box-footer > span:last-child { color: #66776f; }
.table-scroll { display: block; width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; }

:where(button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid rgba(40, 103, 79, .35);
  outline-offset: 2px;
}
.text-box textarea:focus-visible { outline: 3px solid rgba(40, 103, 79, .25); outline-offset: -3px; }
.template-item[aria-pressed="true"] { border-color: #4f8b64; background: #f0f8f2; box-shadow: inset 3px 0 #4e8964; }
.output-tab[aria-selected="true"], .mobile-view-switcher [aria-selected="true"] { color: #245f46; background: #fff; box-shadow: 0 2px 7px rgba(30, 58, 45, .1); }

.card-title h2, .templates-heading strong { font-size: 14px; }
.card-title p, .large-drop strong, .settings-card > summary strong, .generation-area > div:first-child strong { font-size: 13px; }
.large-drop small, .templates-heading small, .template-item small, .generation-area > div:first-child span, .settings-card > summary small { color: #64756c; font-size: 12px; }
.large-drop button, .text-box-footer, .template-item strong, .selected-template, .list-heading, .material-meta strong, .material-meta small { font-size: 12px; }
.text-box textarea { font-size: 14px; }
.field > span, .tag-field > span { font-size: 12px; }
.field input, .field select, .field textarea { font-size: 14px; }
.field input, .field select { height: 40px; }
.tag { min-height: 34px; font-size: 12px; }
.primary-button { min-height: 42px; font-size: 13px; }
.preview-status { font-size: 12px; }
.output-tab, .small-button { min-height: 34px; font-size: 12px; }
.lesson-template-document p, .lesson-template-document li, .generated-text, .flow-table td { font-size: 13px; }
.flow-table th, .lesson-meta-grid > span, .blackboard-preview > span, .scene-time, .scene-row > span { font-size: 12px; }
.lesson-meta-grid b, .lesson-split b { font-size: 11px; }
.lesson-section-title, .scene-body h4 { font-size: 14px; }
.script-header, .scene-row p { font-size: 13px; }
.toast { font-size: 13px; }

@media (max-width: 980px) {
  .mobile-view-switcher { position: sticky; top: 64px; z-index: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 12px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #edf1ed; }
  .mobile-view-switcher button { min-height: 40px; border: 0; border-radius: 6px; color: #687970; background: transparent; font-size: 13px; font-weight: 600; }
  body[data-mobile-view="input"] .preview-column { display: none; }
  body[data-mobile-view="results"] .left-column { display: none; }
  .preview-column { scroll-margin-top: 122px; }
}

@media (max-width: 650px) {
  .site-header { gap: 8px; }
  .header-actions { gap: 8px; }
  .api-status { display: inline-flex; align-items: center; font-size: 10px; }
  .quiet-button { display: inline-flex; min-height: 36px; align-items: center; font-size: 11px; }
  .shortcut-hint { display: none; }
  .page { padding-top: 24px; }
  .intro { margin-bottom: 20px; }
  .intro h1 { font-size: 30px; }
  .large-drop { min-height: 170px; }
  .template-item { min-height: 58px; }
  .material-row { align-items: start; flex-wrap: wrap; }
  .material-status { margin-left: 40px; }
  .preview-column .outputs-heading { align-items: start; flex-wrap: wrap; gap: 8px; }
  .preview-column .outputs-heading > div:first-child { width: 100%; }
  .preview-column .outputs-heading h2 { white-space: nowrap; }
  .output-tabs { width: 100%; }
  .output-tab { flex: 1; }
  .flow-table { min-width: 620px; }
}

@media (min-width: 1101px) {
  .intro p { font-size: 12px; }
  .intro .step-label, .shortcut-hint { font-size: 11px; }
  .large-drop small { font-size: 11px; }
  .template-item strong { font-size: 12px; }
  .generation-area > div:first-child span, .settings-card > summary small { font-size: 11px; }
  .preview-column .output-card { padding: 15px; }
  .preview-column .flow-table td { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Teacher workspace: API-backed courses, sources and revision controls. */
.workspace-course{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font-size:13px;color:#486151}
.workspace-options{display:grid;gap:12px;margin-top:18px;padding-top:16px;border-top:1px solid #e7e9e3}
.template-summary{padding:14px 16px;border:1px solid #dce7dd;border-radius:10px;background:#f4f8f2;min-width:0;overflow-wrap:anywhere}
.template-summary>strong{font-size:14px;color:#284f3a}.template-summary .template-excerpt{margin:10px 0 0;white-space:pre-wrap}
.template-preview-meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:8px;color:#617066;font-size:12px}.template-preview-meta span:first-child{color:#28674f;font-weight:600}
.template-actions{display:flex;flex-wrap:wrap;gap:8px}.template-actions .quiet-button,.template-preview-dialog .quiet-button{display:inline-flex}.template-actions [hidden]{display:none!important}
.workspace-dialog.template-preview-dialog{width:min(780px,calc(100vw - 32px))}.template-preview{min-width:0;overflow-wrap:anywhere}.template-preview h3{font-size:22px;margin:20px 0 0;color:#284f3a}.template-preview h4{font-size:15px;margin:0 0 10px}.template-preview>section{border-top:1px solid #e1e7df;margin-top:20px;padding-top:18px}
.template-full-content{white-space:pre-wrap;overflow-wrap:anywhere;padding:16px;border:1px solid #dce7dd;border-radius:10px;background:#f4f8f2}.template-chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;margin:14px 0;padding:0}.template-chapters li{padding:12px;border:1px solid #e1e7df;border-radius:8px;background:white;display:grid;grid-template-columns:26px minmax(0,1fr);gap:6px;font-size:13px;align-content:start}.template-chapters li>span{color:#7c8b80;font-size:12px}.template-chapters small{grid-column:2;color:#476b50;line-height:1.5}.template-chapters .template-flow-chapter{border-color:#91b19a;background:#edf5ef}.template-api-data summary{cursor:pointer;font-size:13px;color:#536759}.template-api-data pre{max-height:300px;overflow:auto;background:#f0f3ed;padding:12px;border-radius:8px}
@media(max-width:650px){.template-chapters{grid-template-columns:1fr}}
.workspace-options details,.revision-panel details{border:1px solid #e1e6de;border-radius:10px;padding:12px;background:#fafbf8}
.workspace-options summary,.revision-panel summary{cursor:pointer;font-size:13px;font-weight:600}
.workspace-options p,.revision-panel p,.workspace-dialog p{font-size:13px;line-height:1.6;color:#617066}
.workspace-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.workspace-checks{display:grid;gap:8px;margin:12px 0;max-height:260px;overflow:auto}
.workspace-checks label{display:flex;align-items:center;gap:8px;font-size:13px;line-height:1.5}
.workspace-checks input{accent-color:#477654}
#knowledgeSources details{margin-top:8px;background:white}#knowledgeSources p{white-space:pre-wrap}
#workspaceMessage{color:#a43c32;margin:0}
.api-proof pre{font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere;color:#657068}
.workspace-dialog{width:min(640px,calc(100vw - 32px));max-height:85vh;overflow:auto;border:1px solid #e3e7df;border-radius:18px;padding:24px;background:#fbfcf8}
.workspace-dialog::backdrop{background:#20312666}
.workspace-dialog .field{margin:14px 0}.workspace-dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.8}
.workspace-dialog button{margin:4px 0}.course-record{display:flex;flex-direction:column;text-align:left;gap:6px;width:100%;border:1px solid #dfe5db;border-radius:10px;background:white;padding:12px;margin:8px 0;cursor:pointer}.course-record span{color:#6a786a;font-size:12px}
.revision-panel{padding:20px;border:1px solid #dfe5db;border-radius:16px;margin-top:18px;background:white}.revision-panel h3{font-size:16px}.revision-panel .field{margin:14px 0}
#workspaceSaveButton{margin-top:12px}.workspace-dialog input,.workspace-dialog textarea,.revision-panel textarea{max-width:100%;box-sizing:border-box}
.workspace-check-label{display:flex;align-items:flex-start;gap:8px;margin:16px 0;font-size:13px;line-height:1.6}.workspace-check-label input{width:auto;margin-top:4px;flex:none}
.knowledge-vision-options{padding:0 16px 10px;border:1px solid #dce6d4;border-radius:12px;background:#f0f5eb}.knowledge-vision-options[hidden]{display:none}
#knowledgeVisionHint{margin:4px 0 12px}#knowledgeUploadStatus{min-height:1.6em;font-weight:600;color:#375846}#knowledgeUploadStatus[aria-busy="true"]{padding:10px 12px;background:#eef3e7;border-radius:8px}
.knowledge-documents-heading{margin-top:26px}.knowledge-document-group{margin:16px 0}.knowledge-document-group h4{margin:0 0 8px;font-size:14px}.knowledge-document-group .course-record strong{overflow-wrap:anywhere}
.knowledge-document-preview{margin-top:22px;border-top:1px solid #dce3d5;padding-top:16px;scroll-margin-top:18px}.knowledge-document-preview h3{font-size:16px;overflow-wrap:anywhere}.visual-result-meta,.visual-location{font-size:12px!important;overflow-wrap:anywhere}
.visual-unit{min-width:0;margin:16px 0;padding:16px;background:white;border:1px solid #dfe5db;border-radius:12px}.visual-unit h4{margin:0;font-size:15px;overflow-wrap:anywhere}.visual-unit h5{margin:16px 0 6px;font-size:13px}.visual-unit section p{margin-top:4px}.visual-extracted-text{white-space:pre-wrap;overflow-wrap:anywhere}
.visual-original{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;padding:10px;border:1px solid #e4e8df;border-radius:8px;background:#f8faf5;color:#355941;text-decoration:none;font-size:12px}.visual-original img{display:block;max-width:100%;max-height:380px;width:auto;height:auto;object-fit:contain}
.visual-warning{margin:12px 0;padding:10px 12px;border:1px solid #eadbb2;border-radius:8px;background:#fff9e8;color:#73571c;font-size:12px;line-height:1.7;overflow-wrap:anywhere}.visual-warning ul{margin:4px 0 0;padding-left:20px}.visual-warning li{white-space:pre-wrap}
.visual-table-wrap{max-width:100%;overflow-x:auto;margin:14px 0;border:1px solid #dfe5db;border-radius:8px}.visual-table-wrap table{width:100%;border-collapse:collapse;font-size:12px;line-height:1.6}.visual-table-wrap caption{text-align:left;padding:8px 10px;font-weight:600;background:#f1f5ec}.visual-table-wrap th,.visual-table-wrap td{text-align:left;vertical-align:top;padding:8px 10px;border:1px solid #e1e7da;min-width:80px;overflow-wrap:anywhere;white-space:pre-wrap}.visual-table-wrap th{background:#f7f9f3}
.visual-formulas{padding-left:20px;font-size:13px;line-height:1.8}.visual-formulas li{font-family:ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.visual-document-content{margin:16px 0}.visual-document-content summary{font-size:13px;cursor:pointer}
.visual-source{padding:10px 0;border-top:1px solid #e7ebdf;font-size:12px;overflow-wrap:anywhere}.visual-source>a{color:#375c42}.visual-source small{display:block;margin-top:4px;color:#617066}.visual-source .visual-warning{margin-bottom:0}
@media(max-width:650px){.workspace-form{grid-template-columns:1fr}.header-actions{flex-wrap:wrap;justify-content:flex-end}.site-header{gap:12px}.workspace-course{align-items:flex-start}.workspace-dialog{padding:18px}}

.material-parse-notice{font-size:12px;color:#73571c;margin-top:6px}.material-parse-notice summary{cursor:pointer}.material-parse-notice p{white-space:normal;overflow-wrap:anywhere;line-height:1.6;margin:6px 0}.material-row .material-status{white-space:normal;text-align:center}

/* Provisional lesson text streams into its own scroll region until review finishes. */
.live-draft { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; max-height: 60vh; margin: 0 0 12px; border: 1px solid #dce5df; border-radius: 9px; background: #fffefb; overflow: hidden; }
.live-draft-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-bottom: 1px solid #e5ebe6; color: #718478; font-size: 12px; }
.live-draft-heading button { padding: 4px 8px; font-size: 12px; }
.live-draft-body { flex: 1 1 auto; min-height: 120px; padding: 18px 20px; overflow: auto; overflow-anchor: none; overscroll-behavior: contain; color: #40554b; line-height: 1.8; font-size: 14px; overflow-wrap: anywhere; scrollbar-gutter: stable; }
.live-draft-body h3 { margin: 0 0 12px; font-size: 19px; }
.live-draft-body h4 { margin: 20px 0 8px; color: #2d674e; font-size: 15px; }
.live-draft-body h5 { margin: 12px 0 6px; font-size: 14px; }
.live-draft-body p { margin: 6px 0; white-space: pre-wrap; }
.live-draft-body ul { padding-left: 22px; }
.live-draft-body .draft-waiting { color: #88968e; }
@media (max-width: 650px) { .live-draft { max-height: 65vh; }.live-draft-body { padding: 14px; } }

/* Three-pane authoring workspace: source / document / revision. */
.revision-column { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.revision-heading { flex: 0 0 auto; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.revision-heading h2 { margin: 7px 0 6px; font-size: 18px; }
.revision-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.revision-empty { padding: 18px 14px; border-radius: 8px; color: #718478; background: #f4f7f3; font-size: 13px; line-height: 1.8; }
#revisionContent { min-height: 0; min-width: 0; }
.revision-column .revision-panel { margin: 0; padding: 0; border: 0; border-radius: 0; }
.revision-column .revision-panel > p:first-child { margin: 16px 0; }
.revision-column .revision-panel .field { display: block; margin: 16px 0; padding: 0; }
.revision-column .revision-panel textarea { min-height: 132px; }
.revision-column .revision-panel .primary-button { width: 100%; height: auto; min-height: 44px; padding: 10px; }
.revision-column .workspace-checks { max-height: 25vh; overflow: auto; scrollbar-width: thin; }
.revision-column .workspace-checks label { align-items: start; overflow-wrap: anywhere; }
.revision-column .workspace-checks input { margin-top: 4px; flex-shrink: 0; }
.revision-column #workspaceSaveButton { width: 100%; justify-content: center; padding: 10px 4px; border-top: 1px solid var(--line); line-height: 1.6; }
.preview-column .outputs-heading > div:first-child { display: none; }
.preview-column .outputs-heading { justify-content: flex-end; }
.workspace-course > span { min-width: 0; overflow-wrap: anywhere; }
.workspace-course > button { flex-shrink: 0; }

@media (min-width: 1101px) {
  .page { width: calc(100% - 32px); max-width: 1920px; }
  .workspace-grid { grid-template-columns: minmax(248px, .8fr) minmax(440px, 1.9fr) minmax(260px, .85fr); gap: 14px; }
  .left-column, .preview-column, .revision-column { height: 100%; min-height: 0; }
  .left-column { padding-right: 3px; }
  .left-column .input-card { padding: 16px; }
  .left-column .model-picker { grid-template-columns: 1fr; }
  .left-column .workspace-form { grid-template-columns: 1fr; gap: 8px; }
  .left-column .generation-area { gap: 8px; padding: 12px; }
  .left-column .generation-area .primary-button { min-width: 96px; }
  .left-column .template-summary { padding: 11px; }
  .revision-column { display: flex; flex-direction: column; overflow: hidden; padding: 18px 16px 42px; }
  #revisionContent { flex: 1; overflow: auto; scrollbar-width: thin; }
  .preview-column { padding: 18px; }
  .preview-column .output-card { padding: 22px; scrollbar-width: thin; }
  .preview-column .output-top h3 { font-size: 19px; line-height: 1.6; }
  .preview-column .lesson-template-document p, .preview-column .lesson-template-document li, .preview-column .flow-table td { font-size: 14px; line-height: 1.8; }
  .preview-column .flow-table td { padding: 10px 8px 10px 0; }
  .preview-column .live-draft { max-height: none; }
}

@media (max-width: 1100px) {
  .page { width: calc(100% - 28px); padding-top: 24px; }
  .workspace-grid { grid-template-columns: minmax(0, 1fr); }
  .mobile-view-switcher { position: sticky; top: 64px; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-bottom: 12px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #edf1ed; }
  .mobile-view-switcher button { min-height: 40px; border: 0; border-radius: 6px; color: #687970; background: transparent; font-size: 13px; font-weight: 600; }
  .mobile-view-switcher [aria-selected="true"] { color: #245f46; background: #fff; }
  body[data-mobile-view="input"] .preview-column, body[data-mobile-view="input"] .revision-column,
  body[data-mobile-view="results"] .left-column, body[data-mobile-view="results"] .revision-column,
  body[data-mobile-view="edit"] .left-column, body[data-mobile-view="edit"] .preview-column { display: none; }
  .preview-column { position: static; min-height: 400px; }
  .revision-column { scroll-margin-top: 122px; }
  .revision-column .workspace-checks { max-height: 34vh; }
}

/* Revision targets follow the visible document outline. */
.revision-panel > details > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
#revisionSelectionCount { color: #74867b; font-size: 11px; font-weight: 400; }
.revision-column #revisionTargets { display: block; max-height: 34vh; margin: 10px 0 0; }
.revision-panel .revision-target-group { margin: 0; padding: 0; border: 0; border-bottom: 1px solid #e2e9e2; border-radius: 0; background: transparent; }
.revision-target-group > summary { padding: 10px 0; line-height: 1.5; overflow-wrap: anywhere; color: #405c4d; font-size: 12px; }
.revision-target-items { padding: 0 0 9px 8px; }
.revision-target-items .revision-target-group { border-left: 2px solid #e1e9e1; padding-left: 8px; }
.revision-target-row { display: flex; align-items: flex-start; gap: 6px; padding: 6px 0; }
.revision-target-row > label { flex: 1; min-width: 0; }
.revision-locate { flex-shrink: 0; border: 0; border-radius: 4px; padding: 3px 5px; color: #4b795f; background: #eaf2ea; font-size: 11px; cursor: pointer; }
.revision-locate:disabled { opacity: .5; }
.revision-focus { outline: 2px solid #81ad8f; outline-offset: 3px; border-radius: 4px; background-color: #edf6ee !important; scroll-margin: 20px; }
.scene-row { grid-template-columns: 60px minmax(0, 1fr); }
.model-picker-note > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.model-picker-note > button { flex: 0 0 auto; white-space: nowrap; }