/* Current workbench skin. Shared poster primitives remain in styles.css. */
:root {
  --ink: #26312d;
  --muted: #7c8882;
  --line: rgba(38, 49, 45, .14);
  --panel: #fbfaf5;
  --canvas: #dfe8e3;
  --accent: #e47768;
  --accent-soft: #f0d7ce;
  --sage: #667f76;
}

body { background: var(--canvas); }

.app-header {
  height: 76px;
  position: relative;
  z-index: 20;
  padding: 0 26px 0 20px;
  background: rgba(251, 250, 245, .96);
  backdrop-filter: blur(14px);
}

.brand-block { min-width: 230px; gap: 12px; }
.brand-mark {
  width: 92px;
  min-width: 92px;
  height: 48px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0;
  border: 0;
  color: #21302a;
  font: 700 39px/1 "Times New Roman", serif;
}
.brand-mark span, .brand-mark i { display: block; position: relative; font-style: normal; }
.brand-mark span:first-child { transform: scaleX(.82); transform-origin: left; font-style: italic; }
.brand-mark span:nth-child(2) { margin-left: -9px; top: 2px; transform: scaleX(.7) rotate(7deg); font-weight: 400; }
.brand-mark i { width: 5px; height: 32px; margin-left: -3px; top: 1px; overflow: hidden; border-left: 5px solid var(--accent); color: transparent; transform: rotate(8deg); }
.brand-mark::after { content: "16"; position: absolute; left: 59px; bottom: 2px; color: var(--sage); font: 700 7px/1 Arial, sans-serif; }
.brand-block > div:last-child { min-height: 36px; display: flex; flex-direction: column; justify-content: center; padding-left: 15px; border-left: 1px solid var(--line); }
.brand-block h1 { font-family: "Songti SC", STSong, serif; font-size: 15px; font-weight: 500; }
.brand-block p { margin-top: 6px; color: #87928d; font: 7px/1 Arial, sans-serif; letter-spacing: .7px; }

.header-actions { gap: 16px; }
.build-label { color: #8b948f; font: 400 10px/1 "Songti SC", serif; letter-spacing: 0; }
.slogan-button:hover { color: var(--accent); }
.save-state { min-width: auto; font-size: 9px; }
.settings-button { width: 56px; min-width: 56px; min-height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 17px; background: transparent; color: #52635c; }
.settings-button:hover { border-color: var(--accent); color: var(--accent); }
.settings-glyph { display: inline-flex; align-items: baseline; justify-content: center; gap: 3px; line-height: 1; }
.settings-glyph b, .settings-glyph i, .settings-glyph em { font-style: normal; letter-spacing: 0; }
.settings-glyph b { font: 600 11px/1 "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif; }
.settings-glyph i { color: #a8b0ac; font: 400 10px/1 Arial, sans-serif; }
.settings-glyph em { font: 600 9px/1 "Avenir Next", Avenir, Arial, sans-serif; }
.feedback-button { min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 17px; background: transparent; color: #66746e; font-size: 10px; }
.feedback-button:hover { border-color: var(--accent); color: var(--accent); }
.button-primary { min-height: 39px; gap: 12px; padding: 0 17px; border-radius: 20px; background: #263b33; font-size: 11px; }
.button-primary:hover { background: #15251f; }
.button-primary span { color: #fed269; }

.workspace { height: calc(100vh - 76px); grid-template-columns: 410px minmax(0, 1fr); }
html[lang="en"] .rich-editor:empty::before { content: "Paste or enter body text"; }
html[lang="en"] body,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea { font-family: "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif; }
html[lang="en"] .brand-block h1,
html[lang="en"] .settings-head strong,
html[lang="en"] .feedback-head strong,
html[lang="en"] .preview-empty strong { font-family: Baskerville, "Iowan Old Style", Georgia, serif; }
html[lang="en"] .editor-panel > .panel-tabs .tab b,
html[lang="en"] input[type="text"],
html[lang="en"] select { font-family: "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif; }
html[lang="en"] .editor-panel > .panel-tabs .tab { font-size: 11px; font-weight: 600; }
html[lang="en"] .editor-panel > .panel-tabs .tab b { display: none; }
.editor-panel { position: relative; padding-left: 27px; background: var(--panel); }
.editor-panel::before { content: attr(data-step); position: fixed; z-index: 4; left: 16px; top: 116px; color: var(--accent); font: italic 700 9px/1 Georgia, serif; }
.editor-panel::after { content: ""; width: 1px; height: 45px; position: fixed; z-index: 4; left: 25px; top: 141px; background: linear-gradient(var(--accent), transparent); }
.editor-panel > .panel-tabs {
  width: calc(100% + 27px);
  height: 58px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: sticky;
  top: 0;
  z-index: 5;
  margin-left: -27px;
  padding: 0 20px 0 27px;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 250, 245, .95);
  backdrop-filter: blur(12px);
}
.editor-panel > .panel-tabs .tab { height: 58px; position: relative; border: 0; color: #929b97; font-size: 11px; }
.editor-panel > .panel-tabs .tab b { width: auto; height: auto; margin-right: 7px; border-radius: 0; background: transparent; color: #a8b0ac; font: 12px/1 "Songti SC", serif; }
.editor-panel > .panel-tabs .tab::after { content: ""; width: 0; height: 3px; position: absolute; left: 50%; bottom: 8px; border-radius: 50%; background: var(--accent); }
.editor-panel > .panel-tabs .tab.active { border: 0; color: var(--ink); }
.editor-panel > .panel-tabs .tab.active b { background: transparent; color: var(--accent); }
.editor-panel > .panel-tabs .tab.active::after { width: 3px; }
.tab-panel { padding: 31px 27px 44px 29px; }

.field-group { margin-bottom: 26px; }
.field-group label, .field-group > label, fieldset legend, .field-heading { font-size: 10px; }
.compact-grid { gap: 18px; }
.compact-grid label { gap: 4px; }
#titleInput, #authorInput { height: 44px; font-size: 13px; }
#titleInput::placeholder, #authorInput::placeholder { color: var(--ink); opacity: .32; }
.tab-panel[data-panel="content"] > .compact-grid label > span { font-size: 11px; }
input[type="text"], select, .rich-editor { border-color: var(--line); background: transparent; }
input[type="text"], select { height: 44px; border-width: 0 0 1px; border-radius: 0; padding: 0; font-family: "Songti SC", STSong, serif; }
input[type="text"]:focus, select:focus { border-color: var(--sage); box-shadow: none; }
.text-field { gap: 9px; }
.format-toolbar { height: 31px; gap: 3px; padding: 0; border: 0; background: transparent; }
.format-toolbar button { width: 27px; height: 27px; border-radius: 50%; background: #e8eeea; }
.format-toolbar button:hover, .format-toolbar button.active { background: #fff; color: var(--sage); box-shadow: none; }
.format-toolbar [data-format-command="removeFormat"] { width: auto; margin-left: auto; padding: 0 5px; border-radius: 0; background: transparent; font-size: 0; }
.format-toolbar [data-format-command="removeFormat"]::after { content: "清除格式"; font: 8px/1 Arial, sans-serif; }
.script-picker { position: relative; margin-left: 4px; padding-left: 7px; border-left: 1px solid var(--line); }
.format-toolbar .script-picker-trigger { width: 38px; border-radius: 14px; font: 700 9px/1 Arial, sans-serif; }
.script-picker-menu { position: absolute; z-index: 30; top: 34px; left: 7px; width: 112px; padding: 5px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255, 255, 255, .98); box-shadow: 0 10px 26px rgba(50, 65, 59, .14); }
.script-picker-menu:not([hidden]) { display: grid; }
.format-toolbar .script-picker-menu button { width: 100%; height: 32px; padding: 0 9px; border-radius: 4px; background: transparent; color: #52605b; font: 600 10px/1 Arial, sans-serif; text-align: left; }
.format-toolbar .script-picker-menu button:hover { background: #edf1ef; color: var(--sage); }
.rich-editor { min-height: 310px; max-height: 47vh; padding: 20px 19px; border-radius: 5px 18px 5px 5px; background: #fff; font-size: 13px; line-height: 1.95; }
.rich-editor:focus { border-color: rgba(102, 127, 118, .48); box-shadow: 0 0 0 4px rgba(102, 127, 118, .07); }
.privacy-note { margin: 9px 2px 0; color: #8f9a95; font-size: 10px; line-height: 1.7; }
.preference-title { color: #9aa29e; }
.toggle-row { border-color: var(--line); }

.generate-button {
  min-height: 68px;
  grid-template-columns: 74px minmax(0, 1fr) 32px;
  gap: 14px;
  padding-right: 15px;
  border-radius: 7px 28px 28px 7px;
  background: var(--sage);
  box-shadow: 0 12px 30px rgba(63, 91, 81, .15);
}
.generate-button > span { width: 74px; height: 68px; align-content: center; gap: 5px; padding-left: 18px; }
.generate-button b { font-size: 20px; }
.generate-button small { white-space: nowrap; font-size: 7px; letter-spacing: .35px; }
.generate-button strong { min-width: 0; font-size: 13px; }
.generate-button i { justify-self: end; }
.generate-button:hover { background: #4c665d; }
.button-quiet { border-radius: 16px; }

.palette-mode, .segmented-control { border-radius: 18px; background: #e8eeea; }
.palette-mode button, .segmented-control button { border-radius: 15px; }
.palette-mode button.active, .segmented-control button.active { color: var(--sage); }
.palette-family-row { gap: 17px; }
.palette-family-row button { width: 29px; height: 29px; flex-basis: 29px; border-width: 5px; }
.palette-family-row button.active { box-shadow: 0 0 0 2px var(--sage), 0 0 0 5px var(--panel); }
.special-preset { padding: 3px; border-radius: 14px 14px 5px 5px; }
.special-preset i { height: 46px; border-radius: 12px 12px 4px 4px; }
.special-palette-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.color-grid > label { min-height: 56px; }
.paragraph-tools { display: grid; gap: 12px; margin-top: 22px; }
.paragraph-tools .field-group-title { margin-bottom: 0; }
.paragraph-tools .compact-toggle { min-height: 52px; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.paragraph-gap-field { margin: 0; padding: 0; border: 0; }
.paragraph-gap-field legend { margin-bottom: 8px; color: #8d9993; font-size: 10px; font-weight: 700; }
.paragraph-gap-control { grid-template-columns: repeat(6, 1fr); }
.paragraph-gap-control button { min-width: 0; padding: 0; font-size: 10px; }
.lead-style-field { margin: 0; padding: 0; border: 0; }
.lead-style-field legend { margin-bottom: 8px; color: #8d9993; font-size: 10px; font-weight: 700; }
.lead-style-control { grid-template-columns: repeat(3, 1fr); }
.lead-scale-row { margin-top: 2px; }
.template-specific-settings { margin: 8px 0 22px; padding: 15px 17px 5px; border-left: 2px solid color-mix(in srgb, var(--accent) 56%, transparent); background: color-mix(in srgb, var(--canvas) 30%, transparent); }
.template-specific-settings[hidden] { display: none; }
.font-upload { border-radius: 5px 18px 5px 5px; }
.number-field { border-radius: 14px; }
input[type="range"] { height: 18px; appearance: none; -webkit-appearance: none; background: transparent; accent-color: var(--sage); }
input[type="range"]::-webkit-slider-runnable-track { height: 1px; border-radius: 0; background: #aeb8b3; }
input[type="range"]::-webkit-slider-thumb { width: 11px; height: 11px; margin-top: -5px; border: 2px solid var(--panel); border-radius: 50%; appearance: none; -webkit-appearance: none; background: var(--sage); box-shadow: 0 0 0 1px rgba(38,49,45,.18); }
input[type="range"]::-moz-range-track { height: 1px; border: 0; background: #aeb8b3; }
input[type="range"]::-moz-range-thumb { width: 9px; height: 9px; border: 2px solid var(--panel); border-radius: 50%; background: var(--sage); }
.advanced-settings { border-color: var(--line); }
.export-note { border-radius: 5px 18px 5px 5px; }

.preview-stage { position: relative; background: var(--canvas); }
.preview-stage::after { content: ""; width: 8px; height: 52%; position: fixed; right: 0; bottom: 7%; background: var(--accent); }
.preview-toolbar { height: 56px; padding: 0 25px; border: 0; background: rgba(223, 232, 227, .88); backdrop-filter: blur(12px); }
.preview-toolbar strong { font-size: 9px; letter-spacing: .5px; }
.preview-toolbar span { font-size: 8px; }
.zoom-control { border: 0; border-radius: 17px; background: rgba(255,255,255,.55); }
.zoom-control button { border: 0; }
.preview-scroll { padding: 28px 56px 90px; background: transparent; }
.preview-inspector { min-height: 42px; display: flex; align-items: center; gap: 6px; position: absolute; z-index: 8; top: 64px; right: 25px; padding: 5px 6px 5px 13px; border: 1px solid rgba(39, 55, 49, .12); border-radius: 4px 20px 20px 4px; background: rgba(251, 250, 245, .95); box-shadow: 0 12px 34px rgba(40, 55, 49, .12); backdrop-filter: blur(12px); }
.preview-inspector[hidden] { display: none; }
.preview-inspector > strong { min-width: 52px; color: var(--ink); font: 600 10px/1 "Songti SC", serif; }
.preview-inspector > button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: #e8eeea; color: var(--ink); }
.preview-inspector > output { min-width: 47px; color: #67756f; font: 9px/1 Arial, sans-serif; text-align: center; }
.preview-inspector > label { width: 28px; height: 28px; overflow: hidden; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(38,49,45,.18); }
.preview-inspector input[type="color"] { width: 38px; height: 38px; margin: -5px; padding: 0; border: 0; cursor: pointer; }
.preview-lead-modes { display: flex; gap: 2px; padding-left: 4px; border-left: 1px solid var(--line); }
.preview-lead-modes[hidden] { display: none; }
.preview-lead-modes button { width: 25px; height: 25px; border: 0; border-radius: 13px; background: transparent; color: #78857f; font-size: 9px; }
.preview-lead-modes button.active { background: #e8eeea; color: var(--ink); }
.preview-format-modes { display: flex; gap: 2px; padding-left: 4px; border-left: 1px solid var(--line); }
.preview-format-modes[hidden] { display: none; }
.preview-format-modes button { width: 25px; height: 25px; border: 0; border-radius: 13px; background: transparent; color: #66746e; font: 11px/1 Georgia, serif; }
.preview-format-modes button.active { background: #dfe8e3; color: #1f302a; }
.preview-inspector .preview-inspector-close { background: transparent; color: #8b9590; }
.preview-empty { color: #738079; }
.preview-empty span { color: var(--sage); font-family: Didot, Georgia, serif; }

.poster { border-radius: 2px 34px 2px 2px; box-shadow: 0 25px 70px rgba(47, 60, 53, .15); }
.poster h2 { color: var(--poster-title-color); cursor: pointer; }
.poster [data-preview-target] { position: relative; transition: outline-color .16s, background-color .16s; cursor: pointer; }
.poster .preview-editing { outline: 1px dashed color-mix(in srgb, var(--poster-accent) 68%, transparent); outline-offset: 8px; }
.poster .poster-body p:first-child { font-size: calc(1em * var(--poster-lead-scale)); }
.poster-body[contenteditable="true"]:focus { outline: 0; }
.poster-body[contenteditable="true"]::selection,
.poster-body[contenteditable="true"] *::selection { background: color-mix(in srgb, var(--poster-accent) 34%, transparent); }
.poster.lead-line .poster-body p:first-child { margin-left: 0; padding-left: 38px; border-left: 3px solid var(--poster-accent); color: var(--poster-text); text-indent: 0; }
.poster.lead-color .poster-body p:first-child { margin-left: 42px; padding-left: 0; border-left: 0; color: var(--poster-accent); text-indent: 0; }
.poster.lead-none .poster-body p:first-child { margin-left: 0; padding-left: 0; border-left: 0; color: var(--poster-text); }
.poster.layout-folio .poster-index { margin-bottom: 76px; }
.poster.layout-folio .poster-accent { width: 27px; height: 27px; margin: 0; border-radius: 50% 50% 50% 4px; }
.poster.layout-folio .poster-header { margin: -27px 0 54px; }
.poster.layout-folio .poster-kicker { min-height: 27px; display: flex; align-items: center; margin: 0 0 21px 40px; font-size: 16px; line-height: 1.5; font-style: normal; }
.poster.layout-folio h2 { max-width: 82%; line-height: 1.28; }
.poster.layout-folio .poster-rule { display: none; }
.poster.layout-folio.composition-compact .poster-index { margin-bottom: 38px; }
.poster.layout-folio.composition-compact .poster-accent { width: 20px; height: 20px; }
.poster.layout-folio.composition-compact .poster-header { margin: -20px 0 34px; }
.poster.layout-folio.composition-compact .poster-kicker { min-height: 20px; margin: 0 0 14px 33px; font-size: 14px; }
.poster.layout-folio.composition-compact h2 { max-width: 90%; line-height: 1.18; }
.poster.layout-folio.composition-open .poster-index { margin-bottom: 110px; }
.poster.layout-folio.composition-open .poster-accent { width: 34px; height: 34px; }
.poster.layout-folio.composition-open .poster-header { margin: -34px 0 82px; }
.poster.layout-folio.composition-open .poster-kicker { min-height: 34px; margin: 0 0 34px 47px; font-size: 17px; }
.poster.layout-folio.composition-open h2 { max-width: 74%; line-height: 1.34; }
.layout-family { margin-top: 24px; }
.layout-family .layout-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.layout-family .layout-template { border-radius: 4px 18px 4px 4px; background: rgba(255,255,255,.62); }
.layout-family .layout-template > i { height: 76px; border-radius: 3px 15px 3px 3px; background: color-mix(in srgb, var(--sage) 8%, #fff); }
.layout-family .layout-template > strong { font-size: 11px; }
.layout-family .layout-template.active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent); }
.layout-template.layout-book b { width: calc(100% - 26px); height: 1px !important; left: 13px; top: 18px; transform: none; }
.layout-template.layout-book em { width: 24px; left: 13px; top: 31px; }
.layout-template.layout-book span { width: calc(100% - 26px); height: 28px; left: 13px; top: 42px; }
.layout-template.layout-letter b { width: 36%; height: 2px !important; left: 14px; top: 18px; transform: none; }
.layout-template.layout-letter em { width: 58%; left: 14px; top: 32px; }
.layout-template.layout-letter span { width: calc(100% - 28px); height: 27px; left: 14px; top: 43px; }
.layout-template.layout-section b { width: 22px; height: 22px !important; left: 14px; top: 15px; border-radius: 50%; }
.layout-template.layout-section em { width: 48%; left: 43px; top: 24px; }
.layout-template.layout-section span { width: calc(100% - 28px); height: 27px; left: 14px; top: 44px; }

.poster.layout-book .poster-index { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in srgb, var(--poster-text) 55%, transparent); }
.poster.layout-book .poster-accent { width: auto; height: auto; margin: 52px 0 20px; border-radius: 0; background: transparent; color: var(--poster-accent); font: italic var(--poster-chapter-size)/1.35 Georgia, serif; }
.poster.layout-book .poster-header { margin-bottom: 68px; }
.poster.layout-book .poster-kicker { display: none; }
.poster.layout-book h2 { width: 78%; max-width: 78%; line-height: 1.22; }
.poster.layout-book .poster-rule { display: none; }
.poster.layout-book .poster-body,
.poster.layout-book .poster-footer { width: 100%; margin-left: 0; }

/* Layout templates change reading structure while preserving the chosen typography. */
.poster.layout-letter .poster-index { margin-bottom: 72px; }
.poster.layout-letter .poster-accent { width: 46px; height: 2px; margin-bottom: 20px; border-radius: 0; }
.poster.layout-letter .poster-header { margin-bottom: 62px; }
.poster.layout-letter .poster-kicker { min-height: 14px; margin-bottom: 20px; color: var(--poster-accent); font-family: Georgia, serif; font-size: 15px; font-style: italic; }
.poster.layout-letter h2 { max-width: 82%; line-height: 1.3; }
.poster.layout-letter .poster-rule { width: 100%; margin-bottom: 54px; background: color-mix(in srgb, var(--poster-accent) 48%, transparent); }
.poster.layout-letter .poster-body,
.poster.layout-letter .poster-footer { width: 100%; margin-left: 0; }
.poster.layout-letter .poster-footer { justify-content: end; grid-template-columns: 48px auto; }
.poster.layout-letter .footer-edition { display: none; }

.poster.layout-section { overflow: hidden; }
.poster.layout-section::before { content: "XVI"; position: absolute; top: 118px; right: -18px; color: var(--poster-accent); font: italic 190px/.8 Georgia, serif; opacity: .055; pointer-events: none; }
.poster.layout-section .poster-index { margin-bottom: 84px; }
.poster.layout-section .poster-accent { width: auto; height: auto; float: left; margin: 0 38px 24px 0; border-radius: 0; background: transparent; color: var(--poster-accent); font: italic var(--poster-section-size)/.82 Georgia, serif; }
.poster.layout-section .poster-header { min-height: 92px; margin-bottom: 34px; padding-top: 4px; }
.poster.layout-section .poster-kicker { margin-bottom: 18px; }
.poster.layout-section h2 { max-width: 88%; line-height: 1.08; }
.poster.layout-section .poster-rule { width: 100%; height: 1px; clear: both; margin-bottom: 68px; background: linear-gradient(90deg, var(--poster-accent) 0 22%, color-mix(in srgb, var(--poster-accent) 18%, transparent) 22% 100%); }
.poster.layout-section .poster-body p { text-indent: 0; }
.poster-footer .footer-line { height: 3px; }
.special-preset .farTide { --sample-bg: #f8f6ef; --sample-text: #1948a0; --sample-accent: #ed5b4d; }
.special-preset .vermilion { --sample-bg: #d5eef0; --sample-text: #153c4a; --sample-accent: #b04727; }
.special-preset .roseLetter { --sample-bg: #e7ebdd; --sample-text: #234638; --sample-accent: #39702f; }
.special-preset .oriole { --sample-bg: #f2e9dd; --sample-text: #4a1820; --sample-accent: #b43b3f; }
.special-preset .seaMark { --sample-bg: #cbe5dc; --sample-text: #17424b; --sample-accent: #df594a; }
.special-preset .blueCurtain { --sample-bg: #1238a3; --sample-text: #fffdf4; --sample-accent: #d8e0ff; }
.special-preset .mulberry { --sample-bg: #f3e69a; --sample-text: #164a4b; --sample-accent: #a83e36; }
.special-preset .pineSmoke { --sample-bg: #f2eee3; --sample-text: #172a22; --sample-accent: #2f6b50; }
.special-preset .latePeach { --sample-bg: #d8d1f0; --sample-text: #2e2862; --sample-accent: #9d315d; }
.special-preset .gooseShadow { --sample-bg: #e4edb8; --sample-text: #3b2146; --sample-accent: #b84322; }
.special-preset .nightSakura { --sample-bg: #1d1d22; --sample-text: #f2aec5; --sample-accent: #9bd3c2; }
.special-preset .camelliaPaper { --sample-bg: #f3efe1; --sample-text: #1e5a4d; --sample-accent: #cc6355; }
.special-preset .aster { --sample-bg: #151c28; --sample-text: #e9e5dc; --sample-accent: #7896bd; }
/* Export and feedback surfaces are intentionally quieter than the editor. */
.tab-panel[data-panel="export"] { font-size: 11px; }
.tab-panel[data-panel="export"] .export-summary { min-height: 54px; margin-bottom: 22px; }
.tab-panel[data-panel="export"] .export-summary span,
.tab-panel[data-panel="export"] .export-summary strong,
.tab-panel[data-panel="export"] label,
.tab-panel[data-panel="export"] legend { font-size: 11px; }
.tab-panel[data-panel="export"] select,
.tab-panel[data-panel="export"] input[type="text"] { height: 42px; font-size: 12px; }
.tab-panel[data-panel="export"] .segmented-control button { height: 32px; font-size: 11px; }
.tab-panel[data-panel="export"] .export-note strong { font-size: 11px; }
.tab-panel[data-panel="export"] .export-note span { font-size: 10px; }
.tab-panel[data-panel="export"] .export-action { min-height: 58px; }
.tab-panel[data-panel="export"] .export-action > span { height: 58px; }
.tab-panel[data-panel="export"] .export-action strong { font-size: 12px; }
.tab-panel[data-panel="export"] .export-action b { font-size: 17px; }
.toast { border-radius: 20px; }

.settings-modal { position: fixed; inset: 0; z-index: 42; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.settings-modal.show { opacity: 1; pointer-events: auto; }
.settings-backdrop { position: absolute; inset: 0; background: rgba(33, 48, 42, .2); backdrop-filter: blur(7px); }
.settings-card { width: min(390px, 100%); display: grid; gap: 22px; position: relative; padding: 24px; border: 1px solid rgba(38, 49, 45, .12); border-radius: 6px 30px 6px 6px; background: var(--panel); box-shadow: 0 28px 90px rgba(37, 51, 45, .22); }
.settings-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.settings-head strong { color: var(--ink); font: 600 18px/1.25 "Songti SC", SimSun, serif; }
.settings-head > button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #edf1ee; color: #65736d; cursor: pointer; font-size: 16px; }
.settings-row { display: grid; gap: 10px; color: #68736e; font-size: 10px; font-weight: 700; }
.settings-language { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; border-radius: 22px; background: #e9eeeb; }
.settings-language button { height: 38px; border: 0; border-radius: 19px; background: transparent; color: #73807a; cursor: pointer; font-size: 11px; font-weight: 700; }
.settings-language button.active { background: #fff; color: var(--ink); box-shadow: 0 2px 9px rgba(42, 58, 51, .07); }

.feedback-modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.feedback-modal.show { opacity: 1; pointer-events: auto; }
.feedback-backdrop { position: absolute; inset: 0; background: rgba(33, 48, 42, .24); backdrop-filter: blur(7px); }
.feedback-card { width: min(430px, 100%); display: grid; gap: 16px; position: relative; padding: 24px; border: 1px solid rgba(38, 49, 45, .12); border-radius: 6px 30px 6px 6px; background: var(--panel); box-shadow: 0 28px 90px rgba(37, 51, 45, .24); }
.feedback-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.feedback-head strong { color: var(--ink); font: 600 18px/1.25 "Songti SC", SimSun, serif; }
.feedback-head button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #edf1ee; color: #65736d; cursor: pointer; font-size: 16px; }
.feedback-card label { display: grid; gap: 8px; color: #68736e; font-size: 10px; font-weight: 700; }
.feedback-card label > span i { color: #d65f53; font: 700 11px/1 Arial, sans-serif; }
.feedback-card textarea { width: 100%; border: 1px solid #d7ded9; border-radius: 4px 16px 4px 4px; background: #fff; color: var(--ink); font: 13px/1.8 "Songti SC", SimSun, serif; outline: none; }
.feedback-card textarea { min-height: 132px; padding: 13px 14px; resize: vertical; }
.feedback-card textarea::placeholder { color: var(--ink); opacity: .32; }
.feedback-card textarea:focus { border-color: rgba(102, 127, 118, .55); box-shadow: 0 0 0 4px rgba(102, 127, 118, .08); }
.feedback-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.feedback-actions span { max-width: 285px; color: #89948f; font: 400 10px/1.55 "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif; overflow-wrap: anywhere; }
.feedback-actions a { color: #60766d; text-decoration: none; border-bottom: 1px solid rgba(96, 118, 109, .28); }
.feedback-actions a:hover { color: var(--accent); border-bottom-color: currentColor; }
.feedback-actions button { min-width: 70px; height: 36px; border: 0; border-radius: 18px; background: #263b33; color: #fff; cursor: pointer; font-size: 11px; font-weight: 700; }
.feedback-actions button:disabled { background: #d8dedb; color: #9da7a2; cursor: not-allowed; }
.feedback-honey { display: none !important; }

/* Mobile keeps the same document model and rearranges only the workbench. */
@media (max-width: 1000px) {
  .header-actions .slogan-button, .save-state { display: none; }
  .workspace { grid-template-columns: 390px minmax(0, 1fr); }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 64px; }
  body { min-width: 320px; overflow-x: hidden; overflow-y: auto; padding-bottom: calc(72px + env(safe-area-inset-bottom)); background: var(--panel); }
  .app-header { height: 64px; position: sticky; top: 0; z-index: 30; padding: 0 14px; border-bottom-color: var(--line); }
  .brand-block { min-width: 88px; gap: 0; }
  .brand-mark { width: 76px; min-width: 76px; height: 42px; font-size: 33px; }
  .brand-mark i { height: 28px; }
  .brand-mark::after { left: 51px; bottom: 1px; }
  .brand-block > div:last-child { display: none; }
  .header-actions { gap: 8px; }
  .button-primary { width: 44px; min-height: 44px; padding: 0; justify-content: center; font-size: 0; }
  .button-primary span { font-size: 14px; }
  .settings-button { width: 54px; min-width: 54px; min-height: 38px; }
  .feedback-button { width: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 50%; font-size: 0; }
  .feedback-button::after { content: "信"; font-size: 11px; }
  html[lang="en"] .feedback-button::after { content: "F"; }

  .workspace { min-height: calc(100svh - 64px); height: auto; display: flex; flex-direction: column; overflow: visible; }
  .editor-panel { order: 2; width: 100%; max-height: none; overflow: visible; padding-left: 0; border: 0; background: var(--panel); }
  .editor-panel::before, .editor-panel::after { display: none; }
  .editor-panel > .panel-tabs { width: auto; height: 58px; grid-template-columns: repeat(3, 1fr); position: fixed; z-index: 40; inset: auto 10px calc(8px + env(safe-area-inset-bottom)); margin: 0; padding: 0 5px; border: 1px solid rgba(38, 49, 45, .12); border-radius: 29px; background: rgba(251, 250, 245, .94); box-shadow: 0 12px 40px rgba(33, 48, 42, .2); backdrop-filter: blur(18px); }
  .editor-panel > .panel-tabs .tab { height: 56px; min-width: 0; border-radius: 24px; font-size: 12px; }
  .editor-panel > .panel-tabs .tab b { margin-right: 5px; font-size: 12px; }
  .editor-panel > .panel-tabs .tab::after { bottom: 7px; }
  .tab-panel { padding: 23px 18px 38px; }

  body[data-mobile-tab="content"] .preview-stage { display: none; }
  body:not([data-mobile-tab="content"]) .preview-stage { order: 1; height: 52svh; min-height: 390px; max-height: 520px; position: sticky; top: 64px; z-index: 6; grid-template-rows: 48px minmax(0, 1fr); border-bottom: 1px solid rgba(38, 49, 45, .12); box-shadow: 0 18px 42px rgba(42, 59, 52, .1); }
  .preview-stage::after { display: none; }
  .preview-toolbar { height: 48px; padding: 0 14px; }
  .preview-toolbar strong { font-size: 10px; }
  .preview-toolbar span { display: inline; font-size: 8px; }
  .zoom-control { height: 34px; }
  .zoom-control button { width: 32px; height: 30px; }
  .preview-scroll { min-height: 0; padding: 14px; overflow: auto; scrollbar-width: none; scrollbar-gutter: auto; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
  .preview-scroll::-webkit-scrollbar { display: none; }
  .preview-empty { min-height: calc(52svh - 76px); }
  .preview-inspector { max-width: calc(100vw - 24px); min-height: 44px; top: auto; right: 12px; bottom: 12px; left: 12px; gap: 4px; overflow-x: auto; padding-left: 10px; border-radius: 6px 22px 22px 6px; }
  .preview-inspector > strong { min-width: 44px; }
  .preview-inspector > button, .preview-inspector > label { flex: 0 0 32px; width: 32px; height: 32px; }

  #titleInput, #authorInput, input[type="text"], select, .rich-editor { font-size: 16px; }
  .rich-editor { min-height: 42svh; max-height: 52svh; padding: 18px 16px; line-height: 1.85; }
  .format-toolbar { height: 40px; }
  .format-toolbar button { width: 36px; height: 36px; }
  .generate-button { min-height: 68px; }
  .generate-button > span { height: 68px; }
  .quick-actions .button { min-height: 44px; }
  .palette-family-row { justify-content: space-between; gap: 8px; }
  .palette-family-row button { width: 34px; height: 34px; flex-basis: 34px; }
  .special-palette-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
  .special-preset { min-height: 76px; }
  .layout-template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-row { margin-bottom: 24px; }
  input[type="range"] { height: 32px; }
  .segmented-control button, .palette-mode button { min-height: 44px; }
  .toggle-row { min-height: 68px; }
  .feedback-card { max-height: calc(100svh - 28px); overflow-y: auto; padding: 21px 18px; }
  .settings-card { padding: 21px 18px; }
}

html[lang="en"] .format-toolbar [data-format-command="removeFormat"]::after { content: "Clear"; }

@media (max-width: 370px) {
  .preview-toolbar span { display: none; }
  .special-palette-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tab-panel { padding-inline: 15px; }
}