:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: #191919;
  background: #eceeed;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; min-height: 100vh; }
button, textarea, select, input { font: inherit; }
button { cursor: pointer; }

.topbar {
  height: 72px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-bottom: 1px solid #d9dcda;
}

.brand, .top-actions, .pane-title, .preview-toolbar, .pager { display: flex; align-items: center; }
.brand { gap: 12px; }
.brand-mark {
  width: 36px; height: 36px; display: grid; place-items: center;
  color: #fff; background: #202220; font-weight: 800; border-radius: 6px;
}
h1, h2, p { margin: 0; }
h1 { font-size: 17px; line-height: 1.3; }
.brand p, .pane-title p, .preview-toolbar p { margin-top: 3px; font-size: 12px; color: #737873; }
.top-actions { gap: 16px; }
.status { font-size: 13px; color: #626762; }

button {
  min-height: 36px; padding: 0 14px; border: 1px solid #cfd3cf;
  border-radius: 6px; color: #242624; background: #fff;
}
button:hover { border-color: #8b918b; }
button:disabled { opacity: .38; cursor: default; }
.primary { color: #fff; background: #202220; border-color: #202220; font-weight: 700; }
.primary:hover { background: #353835; }
.ghost { min-height: 30px; padding: 0 8px; border-color: transparent; color: #6b706b; background: transparent; }
.secondary { width: 100%; margin-top: 12px; font-weight: 700; }

.workspace {
  height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: minmax(340px, 1.15fr) 250px minmax(360px, .85fr);
  overflow: hidden;
}

.editor-pane, .settings-pane, .preview-pane { min-width: 0; padding: 20px; }
.editor-pane, .settings-pane { background: #fff; border-right: 1px solid #d9dcda; }
.editor-pane { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.pane-title { min-height: 43px; justify-content: space-between; }
.pane-title h2, .preview-toolbar h2 { font-size: 14px; }
.pane-title.compact { min-height: 36px; margin-bottom: 18px; }

.rich-editor {
  flex: 1 1 0; width: 100%; min-height: 0; margin-top: 14px; padding: 18px;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-gutter: stable; white-space: pre-wrap; overflow-wrap: anywhere;
  border: 1px solid #d8dcd8; border-radius: 6px; outline: none;
  font-size: 15px; line-height: 1.75; color: #252725; background: #fbfcfb;
}
.rich-editor::-webkit-scrollbar { width: 10px; }
.rich-editor::-webkit-scrollbar-track { background: #f0f2f0; }
.rich-editor::-webkit-scrollbar-thumb { background: #b8bdb8; border: 2px solid #f0f2f0; border-radius: 5px; }
.rich-editor:focus { border-color: #6e756e; box-shadow: 0 0 0 3px rgba(68, 75, 68, .08); }
.rich-editor .auto-heading { font-weight: 700; }
.rich-editor [data-auto-highlight="true"] {
  color: var(--editor-emphasis, #161816);
  background: var(--editor-highlight, #deeffb);
  font-weight: 700;
}
.selection-toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 12px; padding: 8px; border: 1px solid #d8dcd8;
  border-radius: 6px; background: #f7f8f7;
}
.selection-toolbar select { width: 112px; height: 34px; }
.selection-scope {
  min-width: 44px; height: 26px; display: grid; place-items: center;
  padding: 0 7px; border-radius: 4px; color: #555b55; background: #e8ebe8;
  font-size: 11px; font-weight: 700;
}
.selection-scope.local { color: #fff; background: #292c29; }
.compact-field {
  height: 34px; display: flex; align-items: center; gap: 4px;
  padding: 0 7px; border: 1px solid #d2d6d2; border-radius: 5px; background: #fff;
}
.compact-field span { font-size: 11px; color: #747974; }
.compact-field input { width: 38px; padding: 0; border: 0; outline: 0; font-size: 12px; background: transparent; }
.format-button { width: 34px; min-height: 34px; padding: 0; }
.format-button.active { color: #fff; border-color: #292c29; background: #292c29; }
.clear-format { width: 38px; font-size: 12px; }
.color-tool {
  position: relative; width: 36px; height: 34px; display: grid; place-items: center;
  border: 1px solid #d2d6d2; border-radius: 5px; background: #fff; font-weight: 800;
}
.color-tool input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.color-tool::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 4px; height: 3px; background: var(--tool-color, #161816); }
.highlight-tool { background: #deeffb; }
.editor-footer { display: flex; justify-content: space-between; padding-top: 10px; font-size: 12px; color: #858a85; }

.settings-pane { overflow-y: auto; }
.control { display: block; margin-bottom: 23px; }
.control > span { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
output { color: #757a75; font-weight: 400; }
select { width: 100%; height: 38px; padding: 0 10px; border: 1px solid #d2d6d2; border-radius: 5px; background: #fff; }
input[type="range"] { width: 100%; accent-color: #252825; }
.color-control { display: flex; align-items: center; justify-content: space-between; }
.color-control > span { margin: 0; }
input[type="color"] { width: 44px; height: 30px; padding: 2px; border: 1px solid #d2d6d2; border-radius: 5px; background: #fff; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid #e3e5e3; }
.toggle-row strong { display: block; font-size: 13px; }
.toggle-row small { display: block; margin-top: 4px; color: #858a85; line-height: 1.4; }
.toggle-row input { width: 18px; height: 18px; accent-color: #252825; }

.preview-pane { display: flex; flex-direction: column; background: #eceeed; }
.preview-toolbar { justify-content: space-between; }
.pager { gap: 8px; }
.pager button { width: 34px; min-height: 34px; padding: 0; font-size: 23px; }
.pager span { min-width: 54px; text-align: center; font-size: 12px; color: #646964; }
.preview-stage { flex: 1; min-height: 0; margin-top: 14px; display: grid; place-items: center; overflow: hidden; }
canvas { display: block; max-width: 100%; max-height: 100%; background: #fff; box-shadow: 0 8px 28px rgba(26, 28, 26, .12); }

@media (max-width: 980px) {
  .workspace { height: auto; grid-template-columns: 1fr 240px; overflow: visible; }
  .editor-pane { height: calc(100vh - 72px); min-height: 620px; }
  .preview-pane { grid-column: 1 / -1; min-height: 760px; }
}

@media (max-width: 680px) {
  .topbar { padding: 0 14px; }
  .status { display: none; }
  .workspace { display: block; }
  .editor-pane, .settings-pane { border-right: 0; border-bottom: 1px solid #d9dcda; }
  .editor-pane { height: 78vh; min-height: 520px; }
  .rich-editor { min-height: 0; }
  .selection-toolbar { gap: 5px; }
  .preview-pane { min-height: 680px; }
}