:root {
  /* 页面整体 */
  --page-bg: #ffffff;
  --content-width: 100%;
  --content-padding: 24px;

  /* 正文 */
  --body-color: #7f7f7f;
  --body-font-size: 14px;
  --body-line-height: 2;
  --paragraph-margin: 22px;

  /* 重点文字 */
  --accent-color: #548dd4;
  --strong-color: #548dd4;
  --strong-font-weight: 700;

  /* 小标题 */
  --section-title-color: #548dd4;
  --section-title-size: 16px;
  --section-title-weight: 700;

  /* 图片 */
  --image-default-width: 80%;
  --image-radius: 0px;
  --image-margin-top: 24px;
  --image-margin-bottom: 24px;

  /* 固定封底 */
  --footer-color: #8b9aa7;
  --footer-slogan-size: 16px;
  --footer-spacing: 64px;

  /* 工具界面 */
  --app-bg: #f3f6f9;
  --ink: #243342;
  --muted: #91a0ae;
  --border: #e2e9ef;
  --card-radius: 16px;
  --toolbar-height: 76px;
}

* { box-sizing: border-box; }
html { background: var(--app-bg); }
body { margin: 0; padding-bottom: calc(var(--toolbar-height) + env(safe-area-inset-bottom)); color: var(--ink); background: var(--app-bg); font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app-header { height: 76px; padding: 14px 18px 10px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; background: rgba(243,246,249,.95); backdrop-filter: blur(12px); }
.eyebrow { margin: 0 0 3px; color: var(--accent-color); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
.app-header h1 { margin: 0; font-size: 20px; }
.header-action { border: 1px solid #d9e2ea; border-radius: 999px; padding: 8px 15px; color: var(--accent-color); background: white; font-weight: 700; }
.view-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 16px 14px; padding: 4px; border-radius: 12px; position: sticky; top: 76px; z-index: 19; background: #e8edf2; }
.view-tab { min-height: 38px; border: 0; border-radius: 9px; color: #7b8996; background: transparent; font-weight: 700; }
.view-tab.active { color: var(--accent-color); background: white; box-shadow: 0 2px 8px rgba(45,71,94,.08); }
.workspace { width: min(720px, 100%); margin: 0 auto; padding: 0 12px 28px; }
.editor-panel, .preview-panel { display: none; }
.editor-panel.active, .preview-panel.active { display: block; }
.input-card { margin-bottom: 11px; padding: 16px; border: 1px solid var(--border); border-radius: var(--card-radius); background: white; box-shadow: 0 8px 25px rgba(42,66,86,.04); }
.meta-grid { display: grid; grid-template-columns: 110px 1fr; gap: 14px; }
.input-card label, .card-heading { color: var(--muted); font-size: 12px; font-weight: 700; }
.input-card input[type="text"], .input-card input[type="number"] { width: 100%; margin-top: 7px; padding: 10px 11px; border: 1px solid var(--border); border-radius: 9px; outline: none; color: var(--ink); background: #fbfcfd; }
.card-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.card-heading span:last-child { font-size: 10px; font-weight: 500; }
#articleContent { width: 100%; min-height: 52vh; padding: 14px; resize: vertical; border: 1px solid var(--border); border-radius: 11px; outline: none; color: #4c5d69; background: #fbfcfd; font-size: 16px; line-height: 1.8; }
#articleContent:focus, .input-card input:focus { border-color: #aac4dc; box-shadow: 0 0 0 3px #edf4fa; }
.format-help { display: grid; gap: 5px; margin-top: 11px; color: var(--muted); font-size: 11px; }
.format-help b { color: var(--accent-color); }
.image-list { display: grid; gap: 12px; }
.image-item { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: center; padding-top: 12px; border-top: 1px solid #edf1f4; }
.image-item:first-child { padding-top: 0; border-top: 0; }
.image-item > img { width: 74px; height: 74px; border-radius: 9px; object-fit: cover; background: #eef2f5; }
.image-controls label { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; align-items: center; }
.image-controls output { text-align: right; color: var(--accent-color); }
.image-controls input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent-color); }
.image-controls button { margin-top: 5px; padding: 5px 9px; border: 0; border-radius: 7px; color: #b86e77; background: #faf0f1; font-size: 11px; }
.preview-label { display: flex; justify-content: space-between; padding: 3px 5px 9px; color: var(--muted); font-size: 11px; }
.article-preview { width: var(--content-width); min-height: 75vh; padding: 30px var(--content-padding) 60px; background: var(--page-bg); box-shadow: 0 12px 40px rgba(36,54,69,.08); overflow-wrap: anywhere; }
.article-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 42px; color: #548dd4; font-family: Arial, Helvetica, "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 14px; font-weight: 300; letter-spacing: .05em; }
.article-title { margin: 0 0 42px; color: #000; font-family: Arial, Helvetica, "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 32px; font-weight: 700; line-height: 1.4; }
.article-custom-header { margin: 0 0 24px; color: #548dd4; font-family: Arial, Helvetica, "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 14px; font-weight: 300; letter-spacing: .1em; line-height: 1.7; }
.article-paragraph { margin: 0 0 var(--paragraph-margin); color: var(--body-color); font-family: Arial, Helvetica, "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 14px; font-style: normal; font-weight: 400; letter-spacing: .05em; line-height: 2; white-space: pre-wrap; }
.article-strong { margin: 24px 0; color: #548dd4; font-family: SimSun, "Songti SC", serif; font-size: 15px; font-style: normal; font-weight: 700; letter-spacing: .04em; line-height: 1.8; }
.article-image { height: auto; display: block; margin: var(--image-margin-top) 0 var(--image-margin-bottom); border-radius: var(--image-radius); object-fit: contain; }
.preview-placeholder { padding: 70px 0; color: #bbc5cd; text-align: center; font-size: 13px; }
.article-footer { margin-top: var(--footer-spacing); padding-top: 34px; border-top: 1px solid #edf2f6; color: var(--footer-color); text-align: center; }
.article-footer img { width: 92px; height: 92px; border-radius: 18px; }
.article-footer p { margin: 14px 0 5px; color: var(--accent-color); font-size: var(--footer-slogan-size); font-weight: 700; letter-spacing: .08em; }
.article-footer span { font-size: 11px; }
.bottom-toolbar { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; height: calc(var(--toolbar-height) + env(safe-area-inset-bottom)); padding: 6px 12px env(safe-area-inset-bottom); display: flex; overflow-x: auto; white-space: nowrap; border-top: 1px solid #e1e7ec; background: rgba(255,255,255,.96); box-shadow: 0 -8px 25px rgba(39,58,75,.07); }
.bottom-toolbar[hidden] { display: none; }
.bottom-toolbar button { border: 0; border-radius: 11px; color: #758592; background: transparent; }
.bottom-toolbar button:active { background: #eef3f7; }
.bottom-toolbar b { display: block; color: var(--accent-color); font-size: 20px; }
.bottom-toolbar span { display: block; margin-top: 3px; font-size: 11px; font-weight: 650; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: calc(var(--toolbar-height) + 18px); transform: translate(-50%,20px); padding: 10px 16px; border-radius: 999px; color: white; background: rgba(35,49,61,.92); font-size: 13px; opacity: 0; pointer-events: none; transition: .22s; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

/* 格式刷编辑区 */
.save-state-row { margin: 0 4px 10px; color: var(--muted); text-align: right; font-size: 10px; }
.editor-hint { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 11px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.rich-editor { min-height: 56vh; padding: 16px; border: 1px solid var(--border); border-radius: 11px; outline: none; color: var(--body-color); background: #fbfcfd; font-size: 16px; line-height: 1.8; caret-color: var(--accent-color); }
.rich-editor:empty::before { content: attr(data-placeholder); color: #bcc6ce; pointer-events: none; }
.rich-editor:focus { border-color: #aac4dc; box-shadow: 0 0 0 3px #edf4fa; }
.rich-editor > p { min-height: 1.8em; margin: 0 0 12px; white-space: pre-wrap; }
.rich-editor > [data-style="header"] { color: #548dd4; font-family: Arial, Helvetica, "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 14px; font-weight: 300; letter-spacing: .1em; line-height: 1.7; }
.rich-editor > [data-style="title"] { color: #000; font-size: 26px; font-weight: 700; letter-spacing: .02em; line-height: 1.5; }
.rich-editor > [data-style="subtitle"] { color: #548dd4; font-size: 16px; font-weight: 700; }
.rich-editor > [data-style="strong"] { color: #548dd4; font-family: SimSun, "Songti SC", serif; font-size: 15px; font-weight: 700; }
.rich-editor > [data-style="body"] { color: #7f7f7f; font-family: Arial, Helvetica, "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 14px; font-style: normal; font-weight: 400; letter-spacing: .05em; line-height: 2; }
.editor-image { width: 80%; margin: 18px 0; padding: 4px; border: 2px solid transparent; border-radius: 6px; }
.editor-image[data-width="60"] { width: 60%; }
.editor-image[data-width="80"] { width: 80%; }
.editor-image[data-width="100"] { width: 100%; }
.editor-image.selected { border-color: var(--accent-color); }
.editor-image img { width: 100%; height: auto; display: block; }
.chapter-number-image { display: block; width: 500px; max-width: 100%; height: auto; margin-left: 0; margin-right: auto; margin-top: 32px; margin-bottom: 0; object-fit: contain; }
.image-size-panel { margin: 0 0 12px; padding: 11px 12px; display: flex; align-items: center; gap: 7px; position: sticky; bottom: calc(var(--toolbar-height) + 8px); z-index: 12; border: 1px solid var(--border); border-radius: 12px; background: white; box-shadow: 0 8px 24px rgba(42,66,86,.08); }
.image-size-panel[hidden] { display: none; }
.image-size-panel span { margin-right: auto; color: var(--muted); font-size: 11px; font-weight: 700; }
.image-size-panel button { padding: 7px 9px; border: 0; border-radius: 7px; color: var(--accent-color); background: #eef4f9; font-size: 11px; font-weight: 700; }
.image-size-panel button.active { color: white; background: var(--accent-color); }
.image-size-panel .remove-image { color: #b86e77; background: #faf0f1; }
.article-subtitle { margin: 34px 0 15px; color: #548dd4; font-family: Arial, Helvetica, "Noto Sans SC", "Microsoft YaHei", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.6; }
.chapter-title,
.chapter-number-image + [data-style="subtitle"],
.chapter-number-image + .article-subtitle { margin-top: 2px; }
.article-header,
.article-title,
.article-custom-header,
.article-paragraph,
.article-subtitle,
.article-strong,
.chapter-number-image,
.chapter-title { margin-left: 0; padding-left: 0; }
.tool-scroll #footerToggleBtn[aria-pressed="true"] { color: var(--accent-color); background: #eef4f9; }
.bottom-toolbar { display: flex; overflow-x: auto; white-space: nowrap; padding: 6px 8px env(safe-area-inset-bottom); scrollbar-width: none; }
.bottom-toolbar::-webkit-scrollbar { display: none; }
.bottom-toolbar[hidden] { display: none; }
.tool-scroll { flex: none; min-width: max-content; height: 100%; display: flex; align-items: center; overflow: visible; }
.tool-scroll button { flex: none; width: 68px; min-height: 58px; border: 0; border-radius: 10px; color: #758592; background: transparent; }
.tool-scroll button:disabled { opacity: .32; }
.tool-scroll b { display: block; color: var(--accent-color); font-size: 18px; }
.tool-scroll span { display: block; margin-top: 3px; white-space: nowrap; font-size: 10px; font-weight: 650; }

@media (min-width: 860px) {
  .workspace { padding: 0 24px 30px; }
  .article-preview { max-width: 610px; margin: 0 auto; }
  .bottom-toolbar { left: 50%; right: auto; bottom: 16px; width: min(620px,calc(100% - 32px)); border: 1px solid #dfe6eb; border-radius: 18px; transform: translateX(-50%); }
}