:root {
  --ink: #1f292b;
  --muted: #7b8586;
  --line: #e3e7e2;
  --soft-line: #edf0eb;
  --paper: #fffefa;
  --canvas: #e9ece7;
  --accent: #ef6e4a;
  --accent-deep: #d85535;
  --accent-soft: #fff0eb;
  --teal: #1d7771;
  --teal-soft: #e8f3f0;
  --yellow: #f7e4a5;
  --shadow: 0 22px 48px rgba(46, 58, 56, 0.12);
  font-family: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background: #f5f4ef;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { min-width: 1120px; background: #f5f4ef; color: var(--ink); }
button, input, select { font: inherit; }
button { cursor: pointer; }

/* 整页不滚动:顶栏固定,仅中间画布与侧栏内部列表滚动 */
.app-shell { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  height: 76px; flex: 0 0 76px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; border-bottom: 1px solid var(--line); background: #fbfaf6;
}
.brand-lockup, .topbar-center, .topbar-actions, .toolbar-group, .section-heading, .properties-header,
.source-file, .save-state, .student-fields, .paper-meta, .compact-control { display: flex; align-items: center; }
.brand-lockup { gap: 11px; min-width: 285px; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  color: #fff; background: var(--accent); font-size: 18px; font-weight: 800;
  box-shadow: 0 5px 10px rgba(239, 110, 74, .23);
}
.brand-name { font-size: 16px; font-weight: 800; letter-spacing: .1px; }
.brand-subtitle { margin-top: 2px; font-size: 11px; color: var(--muted); }
.topbar-center { gap: 24px; }
.document-title { text-align: center; }
.eyebrow { color: #a0a8a5; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
#projectName {
  display: block; width: 240px; margin-top: 3px; padding: 0; border: 0; outline: 0; color: var(--ink);
  background: transparent; font-size: 14px; font-weight: 750; text-align: center;
}
.topbar-meta { display: flex; align-items: center; gap: 8px; }
.meta-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 15px;
  background: #fff;
}
.save-state { gap: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #50a492; }
.save-state .eyebrow { display: none; }
.total-score { color: #34413f; }
.total-score .eyebrow { color: #8a9490; }
.total-score strong { color: var(--accent-deep); font-size: 14px; font-weight: 850; letter-spacing: .02em; }
.meta-unit { color: #8a9490; font-size: 10px; }
.question-count .eyebrow { color: #8a9490; }
.question-count strong { color: #1d7771; font-size: 14px; font-weight: 850; }
.topbar-actions { gap: 8px; min-width: 285px; justify-content: flex-end; }
.icon-button, .plain-icon-button {
  display: grid; place-items: center; width: 31px; height: 31px; padding: 0; border: 1px solid transparent;
  color: #6d7776; background: transparent; border-radius: 6px; font-size: 19px;
}
.icon-button:hover, .plain-icon-button:hover { border-color: var(--line); color: var(--ink); background: #f2f3ef; }
.icon-button:disabled, .plain-icon-button:disabled,
.secondary-button:disabled, .primary-button:disabled, .toolbar-button:disabled, .copy-button:disabled, .danger-button:disabled {
  opacity: .42; cursor: not-allowed; pointer-events: none;
}
.icon-button.small { width: 29px; height: 29px; font-size: 14px; }
.secondary-button, .primary-button, .template-button {
  border-radius: 6px; padding: 9px 14px; font-size: 12px; font-weight: 750;
}
.secondary-button { border: 1px solid #d6ddd7; color: #576260; background: #fff; }
.secondary-button:hover { background: #f4f6f2; }
.primary-button { border: 1px solid var(--accent); color: #fff; background: var(--accent); box-shadow: 0 4px 10px rgba(239, 110, 74, .16); }
.primary-button:hover { background: var(--accent-deep); }
.button-icon { margin-right: 6px; font-size: 11px; }

.workspace { min-height: 0; flex: 1; display: grid; grid-template-columns: 248px minmax(620px, 1fr) 286px; overflow: hidden; }
.left-sidebar, .right-sidebar { min-height: 0; overflow: hidden; background: #fbfaf6; }
.left-sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.right-sidebar { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.sidebar-section { padding: 22px 17px 0; }
.section-heading { justify-content: space-between; margin-bottom: 13px; color: #687371; font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.mini-label { padding: 3px 6px; border-radius: 4px; color: var(--accent-deep); background: var(--accent-soft); font-size: 9px; letter-spacing: .06em; }
.upload-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 17px 10px;
  border: 1px dashed #c8d2ca; border-radius: 7px; background: #f8faf6; text-align: center; cursor: pointer;
}
.upload-card:hover { border-color: var(--accent); background: #fff8f5; }
.upload-icon { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 3px; border-radius: 50%; color: var(--teal); background: var(--teal-soft); font-size: 18px; font-weight: 800; }
.upload-title { color: #34413f; font-size: 12px; font-weight: 800; }
.upload-caption { color: var(--muted); font-size: 10px; }
#fileInput { position: absolute; width: 1px; height: 1px; opacity: 0; }
.source-file[hidden] { display: none; }
.source-file { gap: 8px; margin-top: 11px; padding: 10px; border: 1px solid var(--soft-line); border-radius: 6px; background: #fff; }
.file-icon { display: grid; place-items: center; width: 31px; height: 36px; border-radius: 4px; color: #d9573a; background: #fff0eb; font-size: 8px; font-weight: 900; }
.source-file-copy { min-width: 0; flex: 1; }
.source-file-copy strong, .source-file-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-file-copy strong { color: #45504e; font-size: 10px; }
.source-file-copy span { margin-top: 4px; color: #8b9691; font-size: 9px; }
.plain-icon-button { width: 20px; height: 20px; color: #afb8b2; font-size: 17px; }
.outline-section { min-height: 0; flex: 1; display: flex; flex-direction: column; padding-top: 25px; }

.section-heading-actions {
  display: inline-flex; align-items: center; gap: 8px;
}

/* Split Button: 主按钮 + 题型下拉 */
.split-button {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: 22px;
  border-radius: 5px;
}
.split-main, .split-arrow {
  padding: 0; border: 0; background: transparent;
  color: var(--accent-deep);
  font-size: 10px; font-weight: 800; line-height: 1;
  transition: background .12s, color .12s;
}
.split-main { padding: 0 7px 0 8px; border-radius: 5px 0 0 5px; }
.split-arrow { padding: 0 7px; border-radius: 0 5px 5px 0; }
.split-main:hover, .split-arrow:hover, .split-button.open .split-main, .split-button.open .split-arrow {
  background: #fff1ec; color: var(--accent);
}
.split-arrow { border-left: 1px solid rgba(239, 110, 74, .14); }
.split-menu {
  position: absolute;
  top: calc(100% + 5px); right: 0; z-index: 30;
  min-width: 130px;
  padding: 4px;
  border: 1px solid var(--line); border-radius: 6px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(31, 41, 43, .14);
  display: flex; flex-direction: column;
  animation: dropMenuFade .14s ease;
}
.split-menu[hidden] { display: none; }
.split-menu button {
  padding: 7px 10px; border: 0; border-radius: 4px;
  color: #34413f; background: transparent;
  font-size: 11px; text-align: left;
  transition: background .12s, color .12s;
  display: flex; align-items: center; gap: 6px;
}
.split-menu button:hover { background: #fff1ec; color: var(--accent-deep); }
.split-menu button::before {
  content: "✓";
  width: 12px; flex: 0 0 12px;
  color: transparent;
  font-weight: 900;
}
.split-menu button.active { background: #fff1ec; color: var(--accent-deep); font-weight: 850; }
.split-menu button.active::before { color: var(--accent); }

@keyframes dropMenuFade {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.outline-item { position: relative; }
.outline-search {
  position: relative; margin-bottom: 10px;
}
.outline-search input {
  width: 100%; height: 30px; padding: 0 26px 0 24px;
  border: 1px solid var(--line); border-radius: 5px; outline: 0;
  color: #34413f; background: #fff; font-size: 11px;
}
.outline-search input:focus { border-color: #e9aa95; box-shadow: 0 0 0 2px rgba(239, 110, 74, .08); }
.outline-search .search-icon {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  color: #98a39d; font-size: 11px; pointer-events: none;
}
.outline-search .search-clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px;
  color: #98a39d; background: transparent; font-size: 14px; line-height: 1; display: none;
}
.outline-search .search-clear:hover { color: var(--ink); background: #f1f4f0; }
.outline-search.has-value .search-clear { display: grid; place-items: center; }
.outline-search.has-value .search-icon { display: none; }
.outline-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 3px; }
.outline-group { margin-bottom: 8px; }
.outline-group-title {
  display: flex; align-items: center; gap: 6px; margin: 4px 0 6px;
  padding: 4px 8px; border-radius: 4px;
  color: #6a7671; background: #f1f4ef; font-size: 10px; font-weight: 800;
}
.outline-group-title .group-chinese { color: var(--accent-deep); font-weight: 850; }
.outline-group-title .group-name {
  min-width: 0; flex: 1; padding: 1px 4px; margin: 0 -4px;
  border: 1px solid transparent; border-radius: 3px;
  color: inherit; background: transparent;
  font: inherit; font-weight: 800; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  cursor: text;
}
.outline-group-title .group-name:hover {
  border-color: #d5ddd5; background: #fff;
}
.outline-group-title .group-name-input {
  min-width: 0; flex: 1; height: 22px; padding: 0 4px;
  border: 1px solid #e9aa95; border-radius: 3px; outline: 0;
  color: #35413d; background: #fff; font-size: 10px; font-weight: 800;
  box-shadow: 0 0 0 2px rgba(239, 110, 74, .1);
}
.outline-group-title .group-count { margin-left: auto; color: #98a39d; font-size: 9px; font-weight: 600; flex: 0 0 auto; }
.outline-group-title .group-add {
  display: grid; place-items: center;
  width: 18px; height: 18px; padding: 0; margin: 0;
  border: 1px solid transparent; border-radius: 4px;
  color: #a8b2ad; background: transparent;
  font-size: 12px; font-weight: 800; line-height: 1;
  transition: background .12s, color .12s, border-color .12s;
}
.outline-group-title .group-add:hover {
  border-color: #f3c4b3; color: var(--accent-deep); background: #fff1ec;
}
.outline-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 8px; border: 0; border-left: 2px solid transparent; border-radius: 0 5px 5px 0; color: #5a6663; background: transparent; text-align: left; cursor: pointer; user-select: none; outline: 0; }
.outline-item:focus-visible { box-shadow: 0 0 0 2px rgba(239, 110, 74, .25); }
.outline-item:hover { background: #f1f4f0; }
.outline-item.active { border-left-color: var(--accent); color: #23312f; background: #fff1ec; }
.outline-number { width: 21px; flex: 0 0 21px; color: #a1aaa7; font-size: 10px; font-weight: 850; }
.outline-item.active .outline-number { color: var(--accent-deep); }
.outline-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 700; }
.outline-type { color: #a0aaa5; font-size: 9px; }
.outline-points { padding: 1px 5px; border-radius: 8px; color: var(--teal); background: var(--teal-soft); font-size: 9px; font-weight: 800; flex: 0 0 auto; }
.outline-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 10px; border: 1px dashed #d6dfd6; border-radius: 6px;
  color: #8a9490; background: #f6f9f3; text-align: center;
}
.outline-empty-icon {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; color: var(--teal); background: var(--teal-soft);
  font-size: 16px; font-weight: 800;
}
.outline-empty strong { color: #4a5a55; font-size: 11px; }
.outline-empty span { color: #9aa59f; font-size: 9px; }
.sidebar-footer { padding: 15px 17px 20px; border-top: 1px solid var(--soft-line); }
.usage-note { display: flex; gap: 7px; color: #8a9490; font-size: 10px; line-height: 1.6; }
.note-icon { display: grid; place-items: center; width: 15px; height: 15px; flex: 0 0 15px; border: 1px solid #b8c3bb; border-radius: 50%; color: #7c8982; font-size: 10px; font-weight: 900; }
.template-button { width: 100%; margin-top: 13px; border: 1px solid #dbe1db; color: #5d6965; background: #fff; }
.template-button:hover { background: #f5f7f3; }
.template-button span { margin-right: 5px; color: var(--accent-deep); }

.editor-area { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--canvas); }
.editor-toolbar { display: flex; justify-content: space-between; align-items: center; height: 53px; padding: 0 21px; border-bottom: 1px solid #dce1db; background: #f4f5f1; }
.toolbar-group { gap: 4px; }
.toolbar-button { padding: 7px 11px; border: 0; border-radius: 5px; color: #8a9490; background: transparent; font-size: 11px; font-weight: 750; }
.toolbar-button span { margin-right: 5px; font-size: 14px; }
.toolbar-button:hover, .toolbar-button.active { color: #384441; background: #fff; box-shadow: 0 1px 4px rgba(43, 56, 52, .08); }
.toolbar-settings { gap: 12px; }
.layout-badge { padding: 5px 7px; border: 1px solid #d8e0d8; border-radius: 4px; color: #60736b; background: #eef4ed; font-size: 9px; font-weight: 800; white-space: nowrap; }
.zoom-control { display: flex; align-items: center; gap: 6px; color: #7c8782; font-size: 10px; }
.zoom-label { margin-right: 2px; }
.zoom-control input[type="range"] { width: 94px; accent-color: var(--accent); }
.zoom-value { width: 38px; color: #53615b; font-size: 10px; font-weight: 800; text-align: center; }
.zoom-step-button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid #d8e0d8; border-radius: 4px; color: #65726c; background: #fff; font-size: 15px; line-height: 1; }
.zoom-step-button:hover { border-color: #e7ad99; color: var(--accent-deep); background: var(--accent-soft); }
.settings-button { display: inline-flex; align-items: center; gap: 6px; height: 31px; padding: 0 11px; border: 1px solid #e8b09d; border-radius: 5px; color: var(--accent-deep); background: var(--accent-soft); font-size: 10px; font-weight: 850; }
.settings-button span { color: var(--accent-deep); font-size: 14px; }
.settings-button:hover { border-color: #e7ad99; color: var(--accent-deep); background: var(--accent-soft); }
.compact-control { gap: 5px; color: #8a9490; font-size: 10px; }
.compact-control select { padding: 5px 17px 5px 7px; border: 1px solid #d5ddd5; border-radius: 4px; outline: 0; color: #5e6c67; background: #fff; font-size: 10px; }
.canvas-stage { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 39px 62px 70px; }
.canvas-ruler { position: absolute; color: #a1aaa4; font-size: 8px; }
.ruler-top { top: 16px; left: 85px; right: 85px; display: flex; justify-content: space-between; }
.ruler-left { top: 59px; bottom: 58px; left: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.answer-sheet { width: 794px; min-height: var(--paper-h, 1123px); margin: 0 auto; padding: var(--paper-pad-top, 14mm) var(--paper-pad-right, 14mm) var(--paper-pad-bottom, 12mm) var(--paper-pad-left, 14mm); position: relative; background: var(--paper); box-shadow: var(--shadow); transform-origin: top center; }
.answer-sheet.two-column-sheet { padding-left: 44px; padding-right: 44px; }
.paper-header { text-align: center; }
.paper-kicker { color: #9aa29e; font-size: 9px; letter-spacing: .1em; }
.paper-header h1 { margin: 9px 0 6px; color: #242d2d; font-family: Georgia, "Songti SC", serif; font-size: 24px; letter-spacing: .08em; }
.paper-meta { justify-content: center; gap: 28px; color: #7c8682; font-size: 9px; }
.student-fields { flex-wrap: wrap; gap: 7px 14px; margin-top: 23px; text-align: left; }
.student-field { display: flex; align-items: flex-end; gap: 5px; width: 110px; color: #4f5a56; font-size: 10px; }
.student-field.wide { width: 180px; }
.student-field.id-field { width: 100%; margin-top: 1px; }
.student-field i { display: block; height: 16px; flex: 1; border-bottom: 1px solid #727d77; }
.id-boxes { color: #495652; font-family: monospace; font-size: 12px; letter-spacing: 2px; }
.paper-rule { height: 3px; margin-top: 20px; border-top: 1px solid #293432; border-bottom: 1px solid #293432; }
.answer-page { position: relative; display: flex; flex-direction: column; min-height: var(--page-frame-height, calc(var(--page-body-height, 515px) + 42px)); padding-top: 10px; padding-bottom: 30px; }
.answer-page + .answer-page { margin-top: 26px; padding-top: 10px; border-top: 1px dashed #cfd7d0; }
.page-content { flex: 1 0 auto; }
/* 超栏题(如作文)独占一页,横跨整页宽 */
.page-content.span-page { padding-top: 22px; }
.page-content.span-page .sheet-section:first-child { margin-top: 0; }
.sheet-section { margin-top: 22px; }
/* 双栏页内容:左右两栏按 grid 显式布局,先填左栏再右栏,两栏都满才换页 */
.two-column-content {
  display: grid;
  /* gap 设为 0:两栏各占一半宽度,左栏的 border-right 才会正好落在页面中线上;
     栏间距完全由两栏各自 14px 的 padding 提供(合计 28px),视觉间距不变 */
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  align-items: start;
  padding-top: 22px;
}
.two-column-content .column {
  min-width: 0;
  padding-right: 14px;
  border-right: 1px solid #d9ded9;
}
.two-column-content .column:last-child {
  padding-right: 0;
  padding-left: 14px;
  border-right: 0;
}
.two-column-content .sheet-section { break-inside: avoid; margin-top: 22px; }
.two-column-content .sheet-section:first-child { margin-top: 0; }
.two-column-content .question-grid { grid-template-columns: minmax(0, 1fr); }
/* 分页测量层:与双栏实际宽度/列数一致,保证高度估算准确 */
.two-column-measure {
  display: grid;
  /* minmax(0,1fr):防止作文格网的显式宽度把栏轨撑大,导致测量列数偏多 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* 与实际渲染层保持一致(见 .two-column-content):栏宽各半、间距靠 padding */
  column-gap: 0;
}
.two-column-measure > .column {
  min-width: 0;
  padding-right: 14px;
  border-right: 0;
}
.two-column-measure .question-grid { grid-template-columns: minmax(0, 1fr); }
/*
 * 大题标题=印刷答题卡分区样式:
 * 序号视觉锚点 + 衬线题名 + 实线底栏;提示仅写作类保留,其余靠页脚
 * 二级小题无边框,靠题号层级区分
 */
.sheet-section-heading {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 1px 0 5px; border-bottom: 1.5px solid #2f3b37;
}
.sheet-section-title { display: flex; align-items: baseline; min-width: 0; }
.sheet-section-no {
  flex: 0 0 auto; color: #1f292b;
  font-family: Georgia, "Songti SC", "STSong", serif;
  font-size: 14px; font-weight: 800; letter-spacing: .02em; line-height: 1.2;
}
.sheet-section-heading h3 {
  margin: 0; min-width: 0; color: #26322f;
  font-family: Georgia, "Songti SC", "STSong", serif;
  font-size: 13px; font-weight: 750; letter-spacing: .06em; line-height: 1.2;
}
.sheet-section-points {
  margin-left: .15em; color: #5a6663;
  font-family: inherit; font-size: 11px; font-weight: 650; letter-spacing: .02em;
}
.sheet-section-tip {
  flex: 0 0 auto; color: #8a9490; font-size: 9px; font-weight: 500; white-space: nowrap;
}
.question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 6px 14px;
  padding-top: 8px;
  align-items: start;
}
.sheet-question {
  position: relative; padding: 3px 2px 4px; border: 0; border-radius: 0;
  background: transparent; cursor: pointer;
  transition: background .16s ease, box-shadow .18s ease;
}
.sheet-question:active { cursor: pointer; }
.sheet-question:hover { background: rgba(243, 173, 152, .08); }
.sheet-question.selected {
  box-shadow: 0 0 0 1.5px var(--accent);
  background: #fff8f5;
}
.sheet-question.entering { animation: questionEnter .36s cubic-bezier(.22,.61,.36,1); }
.sheet-question.highlight-pulse { animation: questionPulse .9s ease; }
.resize-handle {
  position: absolute; left: 50%; bottom: -8px; z-index: 2; display: grid; place-items: center;
  width: 32px; height: 16px; padding: 0; border: 1px solid #e6b19f; border-radius: 10px;
  color: var(--accent-deep); background: #fff8f5; font-size: 12px; line-height: 1; cursor: ns-resize;
  opacity: 0; transform: translateX(-50%); transition: opacity .16s, background .16s;
}
.sheet-question:hover .resize-handle, .sheet-question.selected .resize-handle, .resize-handle:focus-visible { opacity: 1; }
.resize-handle:hover { background: var(--accent-soft); }
.resizing, .resizing * { cursor: ns-resize !important; user-select: none !important; }
.sheet-question.full-width { grid-column: 1 / -1; }
.question-label-row { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 5px; }
/* 解答题:标题到首行间距完全由答题线间距控制 */
.sheet-question[data-kind="essay"] .question-label-row { margin-bottom: 0; }
.oversize-badge {
  padding: 2px 7px; border: 1px solid #f3c4b3; border-radius: 4px;
  background: #fff1ec; color: #c05c40;
  font-size: 9px; font-weight: 800; white-space: nowrap; cursor: pointer;
  transition: background .12s, color .12s, transform .12s;
}
.oversize-badge:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-1px); }
.sheet-question.oversize { background: #fff7f3; }
.question-label { color: #27322f; font-size: 10px; font-weight: 850; }
.question-tools { display: inline-flex; align-items: center; gap: 7px; }
.question-label-points { color: #a0aaa5; font-weight: 700; }
.choice-options {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: 4px 12px; padding: 1px 0 0;
}
.choice-item {
  display: inline-flex; align-items: center; gap: 3px;
  color: #55625c; font-size: 10px; line-height: 1;
}
.choice-item b { color: #34433d; font-family: Georgia, "Songti SC", serif; font-size: 11px; font-weight: 700; }
.choice-box {
  display: inline-block; width: 11px; height: 11px;
  border: 1.1px solid #69766e; background: #fff; vertical-align: -1px;
}
.sheet-question[data-kind="choice"],
.sheet-question[data-kind="truefalse"] {
  width: fit-content;
  max-width: 100%;
}
.true-false { display: inline-flex; flex-wrap: wrap; gap: 8px 14px; padding: 1px 0 0; color: #58635f; font-size: 10px; }
.check-box { display: inline-block; width: 11px; height: 11px; margin-right: 3px; vertical-align: -1px; border: 1px solid #707b75; }
.answer-lines { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.answer-lines i { display: block; height: 0; width: 100%; border-bottom: 1px solid #aeb8b1; }
.answer-lines.compact { gap: 8px; }
.answer-lines.tall { gap: 12px; }
.fill-blanks { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 17px; padding: 4px 2px 2px; color: #59655f; font-family: "Songti SC", "STSong", serif; font-size: 12px; }
.fill-blank { display: inline-flex; align-items: baseline; white-space: nowrap; }
.fill-blank .fill-index { margin-right: 2px; color: #34433d; font-family: Georgia, "Songti SC", serif; font-size: 11px; font-weight: 700; }
.fill-blank i {
  display: inline-block; width: var(--blank-width, 58px); height: 17px;
  margin: 0 3px; border-bottom: 1px solid #87938b;
}
.answer-box { height: 44px; border: 1px dashed #aeb8b1; background: repeating-linear-gradient(to bottom, transparent 0, transparent 19px, #e4e8e4 20px); }
.answer-box.tall { height: 100px; }
.drawing-area { padding-top: 2px; }
.drawing-instruction { margin-bottom: 7px; color: #7b8780; font-size: 9px; }
.drawing-canvas { display: grid; place-content: center; min-height: 72px; border: 1px solid #859188; border-radius: 3px; background-color: #fff; background-image: linear-gradient(#eef2ee 1px, transparent 1px), linear-gradient(90deg, #eef2ee 1px, transparent 1px); background-size: 18px 18px; color: #9aa49e; text-align: center; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.drawing-canvas span, .drawing-canvas small { display: block; }
.drawing-canvas span { color: #65736b; font-size: 11px; font-weight: 800; }
.drawing-canvas small { margin-top: 4px; color: #a4ada7; font-size: 8px; }
/* 首行距标题 = 行间距(--line-gap),行与行之间同距 */
.writing-lines { display: flex; flex-direction: column; gap: var(--line-gap); padding: var(--line-gap) 1px 4px; }
.writing-lines i { display: block; height: 0; width: 100%; border-bottom: 1px solid #aeb8b1; }
.sheet-question[data-kind="essay"] .writing-lines { min-height: calc(100% - 26px); }
.composition-grid {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  border: 1px solid #707a72;
  background-image:
    linear-gradient(to right, rgba(84, 98, 90, .58) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(84, 98, 90, .58) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  background-color: #fff;
  /* 方格网用渐变绘制,打印时强制输出背景,不依赖"背景图形"选项 */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.word-marker {
  position: absolute;
  right: 3px;
  z-index: 1;
  padding: 0 2px;
  color: #7c8780;
  background: rgba(255, 255, 255, .88);
  font-size: 8px;
  line-height: 11px;
  transform: translateY(-50%);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.sheet-question[data-kind="composition"] { min-height: 0; }
.page-footer { display: flex; justify-content: space-between; margin-top: auto; padding-top: 8px; border-top: 1px solid #d8dfd8; color: #929d97; font-size: 8px; }
.page-footer b { color: #57635e; }
.paper-footer { display: flex; justify-content: space-between; margin-top: 28px; padding-top: 8px; border-top: 1px solid #d8dfd8; color: #929d97; font-size: 8px; }
.paper-footer b { color: #57635e; }

.properties-header { justify-content: space-between; padding: 25px 18px 17px; border-bottom: 1px solid var(--soft-line); }
.properties-header h2 { margin: 6px 0 0; color: #263330; font-size: 16px; }
.selected-chip { padding: 5px 7px; border-radius: 4px; color: var(--accent-deep); background: var(--accent-soft); font-size: 9px; font-weight: 800; }
.properties-content { flex: 1; min-height: 0; overflow-y: auto; padding: 19px 18px; }
.property-group { margin-bottom: 21px; }
.property-label { display: flex; justify-content: space-between; margin-bottom: 8px; color: #76817c; font-size: 10px; font-weight: 800; }
.property-value { color: #a5aeaa; font-size: 9px; font-weight: 500; }
.new-section-row {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
}
.new-section-row .property-input { flex: 1; }
.new-section-row .secondary-button {
  height: 34px; padding: 0 10px; flex: 0 0 auto;
  font-size: 11px; white-space: nowrap;
}
.property-input, .property-select { width: 100%; height: 34px; padding: 0 9px; border: 1px solid #dce2dc; border-radius: 5px; outline: 0; color: #35413d; background: #fff; font-size: 11px; }
.property-input:focus, .property-select:focus { border-color: #e9aa95; box-shadow: 0 0 0 2px rgba(239, 110, 74, .1); }
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.type-option { padding: 8px 5px; border: 1px solid #e0e5df; border-radius: 5px; color: #73807a; background: #fff; text-align: center; font-size: 10px; }
.type-option:hover { border-color: #e7ad99; }
.type-option.active { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); font-weight: 800; }
.range-row { display: flex; align-items: center; gap: 9px; }
.range-row input { width: 100%; accent-color: var(--accent); }
.range-number { width: 44px; height: 28px; padding: 0 5px; border: 1px solid #dce2dc; border-radius: 4px; color: #59645f; background: #fff; font-size: 10px; text-align: center; }
.switch-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--soft-line); }
.switch-row:first-child { border-top: 0; }
.switch-copy strong { display: block; color: #53605b; font-size: 10px; }
.switch-copy span { display: block; margin-top: 3px; color: #a1aba5; font-size: 9px; }
.switch { position: relative; width: 31px; height: 18px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; border-radius: 20px; background: #d9dfd9; cursor: pointer; transition: .2s; }
.slider:before { content: ""; position: absolute; width: 12px; height: 12px; left: 3px; top: 3px; border-radius: 50%; background: #fff; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.switch input:checked + .slider { background: var(--teal); }
.switch input:checked + .slider:before { transform: translateX(13px); }
.danger-button { width: 100%; padding: 9px; border: 1px solid #f0d2cb; border-radius: 5px; color: #c15f4a; background: #fff8f6; font-size: 10px; font-weight: 800; }
.danger-button:hover { background: #fff0eb; }

.copy-button {
  width: 100%; margin-top: 6px; padding: 9px; border: 1px solid #d6e0d8; border-radius: 5px;
  color: #2f6f63; background: #f0f7f4; font-size: 10px; font-weight: 800;
}
.copy-button:hover { background: var(--teal-soft); border-color: #b5d4cb; }

.move-actions { display: flex; gap: 6px; }
.move-actions .secondary-button { flex: 1; }

@keyframes questionEnter {
  0% { opacity: 0; transform: translateY(-6px) scale(.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes questionPulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 110, 74, .45); }
  60% { box-shadow: 0 0 0 8px rgba(239, 110, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 110, 74, 0); }
}
@keyframes modalFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modalRise {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.settings-modal[hidden] { display: none; }
.settings-modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; animation: modalFade .18s ease; }
.settings-backdrop { position: absolute; inset: 0; background: rgba(31, 41, 43, .34); }
.settings-dialog { position: relative; width: min(620px, calc(100vw - 40px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; border: 1px solid #dfe4df; border-radius: 8px; background: #fbfaf6; box-shadow: 0 24px 70px rgba(34, 45, 43, .24); animation: modalRise .22s cubic-bezier(.22,.61,.36,1); }
body.modal-open { overflow: hidden; }
.settings-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 17px; border-bottom: 1px solid var(--soft-line); }
.settings-dialog-header h2 { margin: 6px 0 0; color: #263330; font-size: 17px; }
.settings-dialog-body { overflow: auto; padding: 20px 24px 4px; }
.settings-dialog-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 15px 24px; border-top: 1px solid var(--soft-line); background: #f7f7f2; }
.settings-section { margin-bottom: 21px; }
.settings-section-title { margin-bottom: 11px; color: #68736e; font-size: 11px; font-weight: 850; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.settings-field label { display: block; margin-bottom: 6px; color: #76817c; font-size: 10px; font-weight: 800; }
.settings-field input, .settings-field select { width: 100%; height: 34px; padding: 0 9px; border: 1px solid #dce2dc; border-radius: 5px; outline: 0; color: #35413d; background: #fff; font-size: 11px; }
.settings-field input:focus, .settings-field select:focus { border-color: #e9aa95; box-shadow: 0 0 0 2px rgba(239, 110, 74, .1); }
.settings-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.settings-check { display: flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 9px; border: 1px solid #e0e5df; border-radius: 5px; color: #58645f; background: #fff; font-size: 10px; }
.settings-check input { accent-color: var(--accent); }
.settings-help { margin-top: 6px; color: #9ba49f; font-size: 9px; line-height: 1.55; }

.toast { position: fixed; left: 50%; bottom: 27px; z-index: 10; padding: 10px 14px; border-radius: 6px; color: #fff; background: #2d3b38; box-shadow: 0 8px 20px rgba(30,40,38,.2); font-size: 11px; opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: .22s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.toast-success { background: #1d7771; }
.toast.toast-warning { background: #b97a2b; }
.toast.toast-error { background: #c14d3a; }

.preview-mode .answer-sheet { box-shadow: 0 8px 22px rgba(46,58,56,.11); }
.preview-mode .sheet-question { cursor: default; }
.preview-mode .sheet-question.selected { box-shadow: none; background: transparent; }
.preview-mode .resize-handle { display: none; }
.preview-mode .canvas-ruler { display: none; }

@media print {
  html, body { height: auto; overflow: visible; }
  body { min-width: 0; background: #fff; }
  .app-shell { height: auto; overflow: visible; }
  .topbar, .left-sidebar, .right-sidebar, .editor-toolbar, .canvas-ruler, .toast { display: none !important; }
  .workspace, .editor-area, .canvas-stage { display: block; min-height: 0; overflow: visible; background: #fff; }
  .canvas-stage { padding: 0; }
  .answer-sheet { width: 100%; min-height: 0; margin: 0; padding: 0 var(--paper-pad-right, 14mm) 0 var(--paper-pad-left, 14mm); box-shadow: none; }
  .answer-page { display: flex; flex-direction: column; min-height: var(--print-page-height, auto); padding-top: var(--paper-pad-top, 14mm); padding-bottom: var(--paper-pad-bottom, 12mm); break-after: page; }
  .answer-page:last-child { break-after: auto; }
  .answer-page + .answer-page { margin-top: 0; padding-top: var(--paper-pad-top, 14mm); border-top: 0; }
  .page-content { min-height: 0; flex: 1 0 auto; }
  .page-footer { margin-top: auto; padding-top: 8mm; }
  .sheet-question, .sheet-question.selected, .sheet-question:hover {
    box-shadow: none !important; background: transparent !important;
  }
}

@media (max-width: 1250px) {
  .workspace { grid-template-columns: 225px minmax(560px, 1fr) 260px; }
  .topbar { padding: 0 18px; }
  .brand-lockup { min-width: 225px; }
  .topbar-actions { min-width: 225px; }
  .canvas-stage { padding-left: 35px; padding-right: 35px; }
}

@keyframes popIn {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 轻量确认条(替代原生 confirm) */
.confirm-bar {
  position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 300;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1px solid #f3b9ad; border-radius: 8px;
  background: #fff7f5;
  box-shadow: 0 10px 30px rgba(31, 41, 43, .16);
  color: #a24e33; font-size: 12px; font-weight: 600;
  animation: popIn .18s cubic-bezier(.2,.8,.2,1);
  max-width: min(520px, 90vw);
}
.confirm-bar[hidden] { display: none; }
.confirm-bar button {
  padding: 5px 12px; border-radius: 5px; border: 1px solid transparent;
  font-size: 11px; font-weight: 700; cursor: pointer;
  transition: background .12s, color .12s;
}
#confirmBarOk { background: #d8503a; color: #fff; }
#confirmBarOk:hover { background: #c24330; }
#confirmBarCancel { background: transparent; border-color: #e0d5d0; color: #9a8d87; }
#confirmBarCancel:hover { background: #fff; }