/* Writing studio: quiet navigation, open surfaces, generous manuscript space. */
:root {
  --bg: #fff;
  --surface: #fff;
  --ink: #292d30;
  --muted: #7a8286;
  --line: #e8eceb;
  --green: #287563;
  --green2: #eff6f2;
  --header-height: 80px;
}
* { letter-spacing: 0 !important; }
html, body { font-family: system-ui, "Microsoft YaHei", "PingFang SC", sans-serif; }
button, input, textarea, select { font-family: inherit; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.lucide { vertical-align: middle; flex-shrink: 0; }
.btn { min-height: 42px; padding: 0 18px; gap: 8px; font-size: 14px; color: #596164; border-color: #dfe5e2; border-radius: 6px; }
.btn.primary, .btn.dark { background: var(--green); border-color: var(--green); color: white; }
.btn.primary:hover, .btn.dark:hover { background: #205d4f; border-color: #205d4f; }
.btn.ghost:hover { color: var(--green); background: #f2f6f4; }
.btn.small { min-height: 36px; padding: 0 13px; font-size: 13px; }
.btn.icon { min-width: 36px; width: 36px; min-height: 36px; padding: 0; }
.btn.danger { color: #af5b56; }
.text-link { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; color: #7b8680; white-space: nowrap; }
.text-link:hover { color: var(--green); }
.tag { padding: 4px 8px; font-size: 12px; border-radius: 4px; color: #7a8580; background: #f3f5f4; }
.tag.green { color: #5a8972; background: #edf6f0; }
.tag.gold { color: #a08351; background: #faf3e7; }
.tag.red { color: #ae6560; background: #fbeeed; }
.tag.blue { color: #708ba9; background: #edf2f8; }
.input { min-height: 48px; padding: 13px 16px; border-color: #dfe5e2; border-radius: 6px; font-size: 15px; color: var(--ink); }
.input::placeholder { color: #a0a6a3; }
.input.large { min-height: 200px; line-height: 1.9; }
.form-field { margin-bottom: 26px; }
.form-field label { font-size: 14px; font-weight: 500; color: #606c64; }
.form-field label small { font-size: 12px; font-weight: 400; color: #9ca59e; }
.field-error { font-size: 12px; margin-top: 5px; }
.field-error:empty { display: none; }

/* No fixed management sidebar. */
.app-shell { display: block; min-height: 100dvh; }
.main { width: 100%; min-width: 0; }
.topbar { height: var(--header-height); padding: 0 48px; display: grid; grid-template-columns: auto 1fr auto; gap: 56px; background: white; border-bottom: 1px solid var(--line); z-index: 30; }
.brand { padding: 0; gap: 10px; font-size: 22px; color: #2f4539; white-space: nowrap; }
.brand-mark { width: 34px; height: 38px; border: 0; color: var(--green); background: transparent; }
.brand-mark .lucide { width: 30px; height: 30px; stroke-width: 1.6; }
.primary-nav { display: flex; align-self: stretch; gap: 30px; min-width: 0; }
.nav-item { width: auto; padding: 0 2px; margin: 0; gap: 7px; font-size: 14px; font-weight: 500; color: #89918c; border-radius: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav-item:hover { color: #3f5646; background: transparent; }
.nav-item.active { color: var(--green); background: transparent; border-bottom-color: var(--green); }
.nav-count { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #eff5ec; color: #6e8a59; font-size: 11px; }
.top-actions { display: flex; align-items: center; gap: 20px; }
.header-quota { font-size: 12px; color: #949c91; white-space: nowrap; }
.header-quota .quota-number { padding: 0 3px; font-size: 14px; color: #588049; }
.demo-label { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; background: transparent; font-size: 11px; color: #9ba18f; white-space: nowrap; }
.demo-label span { width: 5px; height: 5px; border-radius: 50%; background: #bba36c; }
.user-menu { display: grid; place-items: center; padding: 0; background: transparent; border-radius: 50%; }
.avatar { width: 36px; height: 36px; color: #708754; background: #f0f4e9; border: 1px solid #e5eadb; font-size: 14px; }
.user-menu.active .avatar { border-color: var(--green); }
.page { max-width: 1280px; margin: 0 auto; padding: 52px 40px 48px; }
.page-head { align-items: center; gap: 24px; margin-bottom: 36px; }
.page-head h1 { font-size: 30px; line-height: 1.45; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.page-head p { font-size: 14px; line-height: 1.8; color: #90978d; margin-top: 8px; }
.section-head { margin: 0 0 24px; align-items: center; gap: 20px; }
.section-head h2 { font-size: 21px; font-weight: 600; color: #374032; }
.section-head p { margin-top: 7px; font-size: 13px; color: #9da392; }

/* Home is a dashboard: welcome, shortcuts, recent work. Creation lives on its own page. */
.home-page { padding-top: 40px; }
.home-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: center; gap: 40px; padding: 38px 40px; border: 1px solid #e4ebe2; border-radius: 14px; background: linear-gradient(135deg, #f7faf3 0%, #eef5ec 100%); overflow: hidden; }
.home-eyebrow { font-size: 13px; color: #7f8c78; }
.home-hero-copy h1 { margin-top: 10px; font-size: 34px; line-height: 1.4; font-weight: 600; color: #2f4130; }
.home-lede { margin-top: 14px; max-width: 460px; font-size: 14px; line-height: 1.9; color: #7c877b; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.home-hero-stats { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 26px; font-size: 12px; color: #93a08b; }
.home-hero-stats strong { margin-right: 4px; font-size: 16px; font-weight: 600; color: #4b6a45; }
.home-hero-art { position: relative; align-self: stretch; min-height: 190px; border-radius: 10px; overflow: hidden; }
.home-hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f3f8ef 0%, #f3f8ef00 45%); }
.home-resume { margin-top: 30px; }
.home-resume-card { display: flex; align-items: center; gap: 20px; padding: 22px 24px; border: 1px solid #e6ebe0; border-radius: 10px; background: white; }
.home-resume-icon { display: grid; place-items: center; width: 52px; height: 58px; flex-shrink: 0; border-radius: 4px 6px 6px 4px; background: #f0f5e8; color: #93a97a; }
.home-resume-icon .lucide { width: 22px; height: 22px; }
.home-resume-copy { min-width: 0; flex: 1; }
.home-resume-copy h2 { margin: 10px 0 7px; font-size: 18px; font-weight: 550; color: #3e4735; overflow-wrap: anywhere; }
.home-resume-copy p { font-size: 13px; line-height: 1.8; color: #98a087; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.home-resume-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 9px; font-size: 11px; color: #a2ad93; }
.home-resume-card>.btn { flex-shrink: 0; }
.creation-form { width: 100%; }
.composer-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 23px; }
.type-picker { display: inline-flex; gap: 4px; padding: 4px; margin: 0; border: 0; border-radius: 6px; background: #f4f6f1; }
.type-option { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 38px; min-width: 112px; padding: 8px 20px; border: 0; border-radius: 4px; background: transparent; color: #89937d; font-size: 14px; }
.type-option.active { background: white; color: #5a7645; box-shadow: 0 1px 5px #25351c12; }
.type-option:hover { border: 0; color: var(--green); }
.composer-note { font-size: 12px; color: #a0a995; }
.drafts-shortcut { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0 8px 10px; background: transparent; color: #58766a; font-size: 13px; white-space: nowrap; }
.drafts-shortcut:hover { color: var(--green); }
.draft-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; background: #eef4f1; border-radius: 50%; font-size: 11px; }
.draft-save-feedback { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 12px 0; border-top: 1px solid #e8eeeb; color: #397b60; font-size: 13px; }
.draft-save-feedback[hidden] { display: none; }
.draft-save-feedback>span { display: inline-flex; align-items: center; gap: 8px; }
.draft-save-feedback.unsaved { color: #9b8254; }
.draft-save-feedback .text-link { color: var(--green); }
.drafts-page { max-width: 1080px; }
.draft-entry { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 26px; align-items: center; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.draft-entry-icon { display: grid; place-items: center; align-self: start; width: 52px; height: 66px; border-radius: 5px; background: #eef4f1; color: #78998b; }
.draft-entry-icon .lucide { width: 26px; height: 26px; }
.draft-entry-content { min-width: 0; }
.draft-entry-meta, .draft-entry-details { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; color: #858f89; font-size: 12px; }
.draft-entry h2 { margin: 13px 0 10px; font-size: 22px; font-weight: 550; color: #34423b; overflow-wrap: anywhere; }
.draft-entry p { margin-bottom: 17px; color: #727e76; font-size: 14px; line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.draft-empty .empty-icon { color: #93aaa0; }
.composer-panel { padding: 4px 26px 20px; border: 1px solid #dfe5da; border-radius: 10px; background: white; box-shadow: 0 6px 28px #24381806; transition: border-color .15s; }
.composer-panel:focus-within { border-color: #b3c4a0; }
.composer-panel .composer-heading { margin-bottom: 0; padding: 20px 0 18px; border-bottom: 1px solid #eef1e9; }
.composer-priority { padding: 6px 0 4px; border-bottom: 1px solid #eef1e9; }
.composer-priority .setting-row:last-child { border-bottom: 0; }
.composer-fields { padding: 23px 0 19px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.composer-fields .form-field { margin: 0; }
.composer-fields label { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 12px; color: #869279; }
.composer-fields .input { width: 100%; padding: 9px 0; border: 0 !important; border-radius: 0; box-shadow: none !important; background: transparent; }
.composer-fields .title-field { padding-bottom: 13px; margin-bottom: 19px; border-bottom: 1px solid #eef1e9; }
.composer-fields #work-title { min-height: 46px; font-size: 20px; font-weight: 500; }
.composer-fields #work-summary { min-height: 108px; height: 108px; padding-top: 11px; font-size: 15px; line-height: 1.9; resize: vertical; }
.composer-settings { border-top: 1px solid #eef1e9; }
.composer-priority .setting-row, .composer-settings .setting-row { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 14px 22px; align-items: start; padding: 15px 0; border-bottom: 1px solid #f2f5f1; }
.composer-priority .setting-row:last-child, .composer-settings .setting-row:last-child { border-bottom: 0; }
.setting-label { display: flex; flex-direction: column; gap: 5px; padding-top: 6px; }
.setting-label span { color: #596861; font-size: 13px; }
.setting-label small { color: #a1aca5; font-size: 11px; line-height: 1.6; }
.setting-control { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; min-width: 0; }
.option-caption { color: #94a084; }
.composer-settings .generation-scope { margin-left: 0; }
.option-field { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; color: #94a084; white-space: nowrap; }
.option-field select, .option-field input { min-height: 34px; padding: 5px 9px; border: 1px solid #e9ede3; border-radius: 4px; background: #f6f8f2; color: #657853; font-size: 13px; outline: none; }
.option-field select { cursor: pointer; }
.option-field input { width: 72px; }
.generation-scope { margin-left: auto; font-size: 12px; color: #a2aa95; }
.form-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 18px; margin-top: 4px; border: 0; border-top: 1px solid #eef1e9; }
.composer-cost { font-size: 12px; color: #a1aa94; }
.form-footer .btn.primary { min-height: 46px; padding: 0 28px; }
.form-footer .btn.ghost { font-size: 13px; color: #929e80; }
.generation-disclosure { margin-top: 12px; font-size: 11px; color: #a7b098; text-align: right; }
.create-page { max-width: 980px; padding-top: 60px; }
.create-page .composer-panel { padding: 4px 30px 24px; }
.create-page .composer-fields { padding: 27px 0 21px; }
.create-page .composer-fields #work-summary { min-height: 220px; height: 220px; }
.active-writing { display: flex; align-items: center; width: 100%; max-width: 880px; margin: 30px auto 0; padding: 16px 0; border-top: 1px solid var(--line); gap: 10px; background: transparent; color: #7e9064; font-size: 13px; text-align: left; }
.active-writing>span:last-child { margin-left: auto; font-size: 12px; }
.recent-section { margin-top: 51px; padding-top: 30px; border-top: 1px solid var(--line); }
.home-footer { display: flex; align-items: center; gap: 18px; margin-top: 54px; padding-top: 25px; border-top: 1px solid var(--line); font-size: 12px; color: #a4af93; }
.home-footer>span:first-child { color: #879b6b; font-weight: 500; }
.home-footer .text-link { margin-left: auto; font-size: 12px; color: #9eac8a; }

/* Book objects, not statistics cards. */
.work-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.work-card { display: flex; align-items: stretch; gap: 20px; padding: 20px; min-height: 186px; border: 1px solid #e6ebe0; border-radius: 8px; background: white; transition: border-color .15s, box-shadow .15s; }
.work-card:hover { border-color: #b9c9a7; box-shadow: 0 5px 18px #2c3f1d09; transform: none; }
.work-cover { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 88px; flex: 0 0 88px; min-height: 136px; padding: 13px 11px 11px 14px; border-radius: 2px 5px 5px 2px; overflow: hidden; background: #edf2e6; color: #7d9164; box-shadow: inset 4px 0 #8ba27020; }
.work-cover.blue { background: #edf1f6; color: #8799b1; box-shadow: inset 4px 0 #839bb620; }
.work-cover.rose { background: #f6eeee; color: #ae8989; box-shadow: inset 4px 0 #b8838a20; }
.cover-type { font-size: 9px; opacity: .8; }
.work-cover strong { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-family: "Songti SC", "SimSun", serif; font-size: 16px; font-weight: 500; line-height: 1.7; word-break: break-all; }
.cover-icon { margin-top: auto; opacity: .7; }
.cover-icon .lucide { width: 16px; height: 16px; }
.work-card-content { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.work-card-top { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-bottom: 11px; }
.work-category, .work-state { font-size: 11px; color: #a2ad93; white-space: nowrap; }
.work-state { color: #b29e70; }
.work-state.complete { color: #97ab7b; }
.work-card h3 { margin-bottom: 9px; font-size: 17px; font-weight: 550; line-height: 1.5; color: #3e4735; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-card p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12px; line-height: 1.9; color: #98a087; height: 46px; margin: 0 0 14px; }
.work-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0; margin-top: auto; border: 0; font-size: 11px; color: #a0aa91; }
.work-open { color: #93a873; }
.work-open .lucide { width: 16px; height: 16px; }
.new-work-card { min-height: 186px; border: 1px dashed #dce4d0; border-radius: 8px; background: #fdfefb; color: #9daf81; font-size: 14px; }
.new-work-card>span { display: grid; place-items: center; margin-bottom: 14px; }
.filter-bar { align-items: center; gap: 24px; margin-bottom: 32px; }
.tabs { gap: 27px; }
.tab { padding-bottom: 14px; font-size: 14px; color: #94a080; white-space: nowrap; }
.tab.active { color: var(--green); border-bottom-color: var(--green); }
.search { width: 280px; min-height: 42px; border-color: #e7ecdd; border-radius: 6px; background: #fcfdf9; }
.search input { font-size: 13px; }
.empty { padding: 65px 25px; }
.empty h3 { font-size: 18px; color: #788963; }
.empty p { font-size: 14px; color: #9ea88d; }
.empty-icon .lucide { width: 34px; height: 34px; }
.table-wrap { border-radius: 0; border: 0; border-top: 1px solid var(--line); }

.task-list { border-top: 1px solid var(--line); }
.task-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 150px auto; gap: 23px; align-items: center; padding: 27px 0; border-bottom: 1px solid var(--line); }
.task-symbol { display: grid; place-items: center; width: 46px; height: 50px; border-radius: 5px; background: #f0f5e8; color: #9aae7d; }
.task-symbol.script { background: #edf1f7; color: #91a3bc; }
.task-symbol .lucide { width: 22px; height: 22px; }
.task-description { min-width: 0; }
.task-description h2 { font-size: 17px; line-height: 1.6; font-weight: 500; color: #46513c; overflow-wrap: anywhere; }
.task-description p { margin-top: 6px; font-size: 12px; color: #a0ac8c; }
.task-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.task-percent { font-size: 12px; margin-left: auto; color: #9fb083; }
.task-state .progress-line { flex-basis: 100%; margin: 0; height: 3px; }
.task-hero { padding: 35px 0; border: 0; border-radius: 0; background: transparent; }
.task-hero h2 { font-size: 30px; color: #3c4a2e; }
.task-hero p { font-size: 14px; color: #8c9b7c; line-height: 1.9; overflow-wrap: anywhere; }
.task-progress-value { font-size: 42px; color: #7e995b; }
.generation-count { margin-top: 20px; }
.big-progress { height: 5px; border-radius: 3px; background: #eff3e8; }
.big-progress span { background: #93ae73; }
.step { font-size: 13px; color: #9aaa86; }
.task-info { gap: 48px; }
.info-panel { padding: 28px 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.info-panel h3 { margin-bottom: 20px; font-size: 16px; color: #657e47; }
.info-panel p { font-size: 14px; color: #92a279; }
.info-row { gap: 24px; font-size: 14px; color: #9ba983; }
.info-row strong { color: #7b9057; overflow-wrap: anywhere; }
.task-logs { padding-top: 30px; border-top: 1px solid var(--line); }
.log-row { font-size: 13px; color: #93a675; }
.log-row time { font-size: 12px; color: #acb698; }

/* The only persistent sidebar is the manuscript directory. */
.editor-layout { height: calc(100dvh - var(--header-height)); grid-template-columns: 254px minmax(0, 1fr); background: white; }
.editor-directory { display: flex; width: auto; overflow: hidden; background: #fbfcf9; border-right: 1px solid #eaf0e3; }
.directory-top { position: relative; padding: 29px 24px 18px; flex-shrink: 0; }
.directory-top h2 { font-size: 17px; color: #435038; padding-right: 24px; }
.directory-top .meta { font-size: 12px; color: #96a484; margin-top: 14px; }
.directory-tabs { padding: 14px 23px 9px; gap: 26px; flex-shrink: 0; }
.directory-tab { font-size: 13px; color: #97a780; padding-bottom: 10px; }
.directory-tab.active { color: #779153; border-color: #a1b888; }
.chapter-list { min-height: 0; overflow: auto; padding: 15px 11px; }
.chapter-item { font-size: 13px; min-height: 48px; padding: 12px; color: #8b9b76; gap: 10px; }
.chapter-item.active { color: #63863d; background: #f0f6e9; }
.chapter-item.pending { color: #a8b695; }
.chapter-item .chapter-status { font-size: 10px; }
.directory-bottom { padding: 17px; flex-shrink: 0; }
.work-settings { margin: 8px 0 0 -12px; }
.directory-close { display: none; position: absolute; top: 23px; right: 10px; }
.directory-toggle { display: inline-flex !important; }
.directory-collapsed { grid-template-columns: minmax(0, 1fr); }
.directory-collapsed .editor-directory { display: none; }
.editor-toolbar { min-height: 64px; padding: 12px 29px; flex-shrink: 0; gap: 12px; }
.editor-toolbar .left { gap: 8px; min-width: 0; }
.editor-toolbar .save-status { font-size: 12px; color: #9cab8d; white-space: nowrap; }
.editor-toolbar .button-row { gap: 9px; }
.format-tools { display: flex; align-items: center; gap: 4px; }
.format-btn { width: 30px; height: 34px; color: #83956e; font-family: Georgia, serif; font-size: 17px; }
.document { width: 100%; max-width: 1180px; padding: 49px 64px 80px; }
.document-label { font-size: 12px; color: #99a98b; margin-bottom: 19px; }
.document-title { font-family: inherit; font-size: 30px; line-height: 1.6; font-weight: 600; color: #343e2e; margin-bottom: 29px; }
.document-body { font-family: inherit; font-size: 18px; line-height: 2.15; color: #4a5342; min-height: 55vh; overflow-wrap: anywhere; }
.document-body p { margin: 0 0 1em; }
.document-body::selection, .document-body *::selection { background: #e3edd6; }
.editor-footer { min-height: 43px; padding: 8px 28px; align-items: center; gap: 15px; font-size: 12px; color: #9aa98a; background: white; }
.editor-footer .button-row { display: flex; }
.editor-footer .btn { width: 30px; min-width: 30px; height: 28px; min-height: 28px; }
.pending-banner { display: flex; align-items: center; justify-content: space-between; padding: 13px 27px; gap: 12px; flex-shrink: 0; background: #fcf7ed; border-bottom: 1px solid #f1e8d7; color: #a4906c; font-size: 13px; }
.outline-block h3 { font-size: 17px; color: #687e4e; }
.outline-block p { font-size: 16px; color: #8b9b77; }
.outline-chapter h4 { font-size: 15px; color: #7b9356; }
.outline-chapter p { font-size: 14px; color: #9cad80; }
.focus-mode .editor-layout { height: 100dvh; grid-template-columns: minmax(0, 1fr); }
.focus-mode .editor-directory, .focus-mode .directory-toggle { display: none !important; }
.focus-mode .document { max-width: 1180px; padding-top: 50px; }
.version-layout { gap: 36px; }
.version-list { border: 0; border-right: 1px solid var(--line); border-radius: 0; }
.version-item { padding: 22px 22px 22px 16px; }
.version-item.active { background: #f6f9f0; }
.version-item h3 { font-size: 14px; gap: 10px; color: #738c4c; }
.version-item p { font-size: 12px; color: #a0af88; }
.version-preview { border: 0; padding: 0 0 0 3px; border-radius: 0; }
.version-preview-head { flex-wrap: wrap; }
.version-preview .preview-text { font-size: 16px; color: #7d925e; line-height: 2.1; max-height: 65vh; }
.settings { max-width: 920px; }
.settings-section { margin-bottom: 32px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.settings-section h2 { padding: 27px 0 17px; border: 0; font-size: 17px; color: #647b49; }
.setting-row { padding: 23px 0; gap: 24px; }
.setting-row h3 { font-size: 15px; color: #697e4f; line-height: 1.5; }
.setting-row p { font-size: 13px; color: #99a88a; line-height: 1.8; }
.settings .tag { white-space: nowrap; }

.modal { border-radius: 8px; width: 560px; }
.modal.wide { width: 740px; }
.modal-head { padding: 24px 30px; }
.modal-head h2 { font-size: 19px; font-weight: 600; color: #576d3d; }
.modal-body { padding: 28px 30px; }
.modal-body>p { font-size: 14px; color: #8da176; overflow-wrap: anywhere; }
.modal-body .input.large { min-height: 185px; }
.modal-footer { padding: 20px 30px; flex-wrap: wrap; }
.notice { font-size: 13px; color: #849b66; background: #f6f9f0; border-radius: 5px; }
.notice.warning { color: #a49264; background: #fcf7eb; }
.choice-card strong { font-size: 18px; }
.choice-card small { font-size: 12px; color: #a6b48c; }
.toast { font-size: 13px; line-height: 1.8; background: #4f6738; }
.toast.error { background: #ad7760; }
.help-list { font-size: 14px; color: #91a377; }
.login-page { grid-template-columns: minmax(380px, 45%) 1fr; }
.login-brand-panel { background: #34422f url("./assets/writing-desk.jpg") center/cover; }
.login-brand-panel::before { content: ""; position: absolute; inset: 0; background: #18251599; }
.login-brand-panel .brand, .login-copyright { position: relative; z-index: 1; }
.login-brand-panel .brand, .login-brand-panel .brand-mark { color: white; }
.login-brand-panel .brand small { color: #d6e0c7; font-size: 10px; }
.login-quote h1 { font-size: 35px; line-height: 1.8; color: white; }
.login-quote p { color: #e2e8d3; font-size: 15px; }
.login-art { display: none; }
.login-copyright { color: #cdd7bb; font-size: 11px; }
.login-form { width: 400px; max-width: 100%; }
.login-form h2 { font-size: 28px; color: #3a4b2d; }
.login-form>p { color: #9aab85; font-size: 14px; }
.login-tabs .tab { font-size: 14px; }
.agreement { font-size: 12px; color: #a3b18c; flex-wrap: wrap; gap: 5px; }
.code-button { color: #899f62; font-size: 12px; }
.qr-area p { font-size: 13px; color: #96a97a; }
.qr-code { position: relative; }
.qr-code::after { content: "演示二维码"; position: absolute; inset: 62px 19px auto; padding: 10px 4px; background: white; color: #91a96c; font-size: 12px; border: 1px solid #e6eed5; }
.login-separator { font-size: 12px; }

/* Neutral typography keeps accent colors for actions and book covers. */
.page-head p, .home-lede, .composer-cost, .generation-scope, .generation-disclosure,
.work-card p, .work-bottom, .work-category, .section-head p, .composer-note,
.task-description p, .setting-row p, .directory-top .meta, .document-label,
.editor-footer, .editor-toolbar .save-status, .version-item p { color: #7c8487; }
.form-field label, .option-field, .composer-fields label, .task-hero p,
.info-panel p, .info-row, .modal-body>p, .help-list, .outline-block p,
.outline-chapter p, .version-preview .preview-text, .log-row { color: #687477; }
.section-head h2, .home-hero-copy h1, .work-card h3, .task-description h2,
.task-hero h2, .directory-top h2, .document-title, .setting-row h3,
.settings-section h2, .modal-head h2, .info-panel h3 { color: #303b3c; }
.document-body { color: #485253; }
.composer-fields { border-color: #dfe5e3; }
.composer-fields label small { color: #a0a7a5; }
.type-picker { background: #f3f6f4; }
.type-option.active { color: #377562; }
.option-field select, .option-field input { color: #586861; background: #f6f8f7; border-color: #e6ece8; }
.chapter-item { color: #748179; }
.chapter-item.pending { color: #98a29c; }
.chapter-item.active { color: #397457; background: #edf5ee; }
.work-cover.green { background: #eaf2ee; color: #779c8a; }
.work-card, .directory-tabs, .directory-bottom { border-color: #e6ebe8; }
.editor-directory { background: #fafcfb; border-color: #e8eeea; }
.header-quota, .home-footer, .form-footer .btn.ghost { color: #85918b; }
.setting-row h3, .info-row strong { color: #52665e; }
.modal-body>p, .choice-card small, .notice, .login-form>p, .agreement { color: #738278; }
.nav-item, .work-card p, .work-bottom, .work-category, .section-head p,
.generation-scope, .composer-cost, .generation-disclosure, .task-description p,
.setting-row p, .directory-top .meta, .document-label, .editor-footer,
.editor-toolbar .save-status, .version-item p { color: #6f7876; }
.nav-item.active { color: var(--green); }
.home-lede { color: #727b78; }

@media (min-width: 1600px) {
  .topbar { padding-left: 64px; padding-right: 64px; }
  .page { max-width: 1360px; }
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .document { max-width: 1280px; padding-left: 80px; padding-right: 80px; }
}
@media (max-width: 1200px) {
  .topbar { padding: 0 28px; gap: 32px; }
  .primary-nav { gap: 23px; }
  .top-actions { gap: 16px; }
  .header-help { display: none; }
  .work-grid { gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editor-layout { grid-template-columns: 230px minmax(0, 1fr); }
  .editor-toolbar { padding: 11px 22px; }
  .document { padding: 39px 43px 70px; }
  .editor-toolbar .save-status { display: none; }
  .directory-collapsed { grid-template-columns: 1fr; }
}
@media (max-width: 1000px) {
  .topbar { padding: 0 24px; gap: 24px; }
  .primary-nav { gap: 18px; }
  .brand { font-size: 20px; gap: 6px; }
  .header-quota { display: none; }
  .top-actions { gap: 15px; }
  .page { padding: 40px 30px; }
  .home-page { padding-top: 36px; }
  .home-hero { grid-template-columns: minmax(0, 1fr) 240px; gap: 28px; padding: 32px 30px; }
  .home-hero-copy h1 { font-size: 30px; }
  .editor-layout { grid-template-columns: 220px minmax(0, 1fr); }
  .editor-toolbar .left, .editor-toolbar .button-row { gap: 4px; }
  .editor-toolbar .format-tools { display: none; }
  .document { padding: 35px 33px 65px; }
  .pending-banner { flex-wrap: wrap; }
  .directory-collapsed { grid-template-columns: 1fr; }
  .login-brand-panel { padding: 38px; }
  .login-quote h1 { font-size: 30px; }
}
@media (max-width: 760px) {
  :root { --header-height: 112px; }
  .topbar { height: var(--header-height); padding: 0 22px; grid-template-columns: 1fr auto; grid-template-rows: 64px 48px; column-gap: 12px; row-gap: 0; }
  .brand { font-size: 20px; }
  .brand-mark { width: 28px; }
  .brand-mark .lucide { width: 25px; height: 25px; }
  .primary-nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 6px; overflow-x: auto; }
  .nav-item { justify-content: center; font-size: 13px; min-width: 0; flex-shrink: 0; }
  .top-actions { grid-column: 2; grid-row: 1; gap: 16px; }
  .header-quota { display: inline; font-size: 11px; }
  .demo-label { display: none; }
  .avatar { width: 32px; height: 32px; font-size: 13px; }
  .page { padding: 31px 22px 34px; }
  .page-head { margin-bottom: 28px; gap: 14px; }
  .page-head h1 { font-size: 25px; }
  .page-head p { font-size: 13px; }
  .home-hero { grid-template-columns: 1fr; gap: 22px; padding: 26px 22px; }
  .home-hero-copy h1 { font-size: 26px; }
  .home-lede { font-size: 13px; }
  .home-hero-actions { margin-top: 20px; }
  .home-hero-stats { margin-top: 20px; gap: 8px 18px; }
  .home-hero-art { min-height: 150px; }
  .home-resume-card { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .home-resume-card>.btn { align-self: stretch; justify-content: center; }
  .composer-note { font-size: 11px; }
  .drafts-shortcut { gap: 6px; font-size: 12px; }
  .draft-save-feedback { gap: 10px; font-size: 12px; }
  .draft-save-feedback .text-link { font-size: 12px; }
  .draft-entry { grid-template-columns: 38px minmax(0, 1fr); gap: 18px; padding: 25px 0; }
  .draft-entry-icon { width: 38px; height: 50px; }
  .draft-entry-icon .lucide { width: 21px; height: 21px; }
  .draft-entry h2 { font-size: 20px; }
  .draft-entry p { font-size: 13px; }
  .draft-entry>.btn { grid-column: 2; justify-self: start; }
  .type-option { min-width: 88px; padding: 8px 13px; font-size: 13px; }
  .composer-fields, .create-page .composer-fields { padding: 20px 0 17px; }
  .composer-fields #work-title { font-size: 18px; }
  .composer-fields #work-summary { height: 136px; min-height: 136px; font-size: 14px; }
  .composer-heading { padding: 16px 0 14px; margin-bottom: 0; }
  .composer-panel, .create-page .composer-panel { padding-left: 20px; padding-right: 20px; }
  .generation-scope { flex-basis: 100%; margin: 1px 0 0; font-size: 11px; }
  .form-footer { margin-top: 0; padding-top: 16px; }
  .composer-cost { display: none; }
  .form-footer .button-row { width: 100%; justify-content: space-between; }
  .form-footer .btn.primary { min-height: 44px; padding: 0 23px; }
  .form-footer .btn.ghost { padding-left: 0; }
  .generation-disclosure { font-size: 10px; }
  .recent-section { margin-top: 35px; padding-top: 28px; }
  .section-head { margin-bottom: 22px; }
  .section-head h2 { font-size: 20px; }
  .section-head p { font-size: 12px; }
  .work-grid { grid-template-columns: 1fr; gap: 16px; }
  .work-card { min-height: 179px; gap: 20px; padding: 19px; }
  .work-cover { flex-basis: 83px; width: 83px; min-height: 136px; }
  .work-card h3 { font-size: 17px; }
  .new-work-card { min-height: 150px; }
  .home-footer { margin-top: 33px; gap: 13px; flex-wrap: wrap; }
  .home-footer>span:nth-child(2) { display: none; }
  .filter-bar { gap: 20px; flex-wrap: wrap; }
  .search { width: 100%; }
  .tabs { gap: 23px; }
  .tab { font-size: 13px; }
  .task-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px 15px; padding: 23px 0; }
  .task-symbol { width: 40px; height: 44px; grid-row: 1 / 3; align-self: start; }
  .task-description { grid-column: 2 / -1; }
  .task-description h2 { font-size: 16px; }
  .task-description p { font-size: 11px; }
  .task-state { grid-column: 2; max-width: 150px; }
  .task-row>.btn { grid-column: 3; font-size: 12px; padding: 0; }
  .task-hero { padding: 22px 0; }
  .task-hero h2 { font-size: 24px; }
  .task-hero p { font-size: 13px; }
  .task-progress-value { font-size: 30px; }
  .step { font-size: 11px; }
  .task-info { gap: 5px; }
  .info-panel { padding: 25px 0; }
  .info-row { font-size: 13px; }
  .editor-layout { height: calc(100dvh - var(--header-height)); grid-template-columns: minmax(0, 1fr); position: relative; }
  .editor-directory { display: none; position: absolute; inset: 0 auto 0 0; width: 268px; z-index: 25; box-shadow: 12px 0 30px #1a35241c; }
  .directory-open .editor-directory { display: flex; }
  .directory-close { display: inline-flex; }
  .directory-top { padding-top: 23px; }
  .chapter-status { display: inline !important; }
  .editor-toolbar { min-height: 62px; padding: 10px 15px; gap: 7px; flex-wrap: wrap; }
  .editor-toolbar .btn { min-height: 34px; font-size: 12px; }
  .editor-toolbar .btn.icon, .editor-toolbar .left .btn { min-width: 30px; width: 30px; }
  .editor-toolbar .divider { display: none; }
  .editor-toolbar .button-row { margin-left: auto; gap: 4px; }
  .editor-toolbar .left>button:not(.directory-toggle), .editor-toolbar .format-tools { display: none; }
  .document { padding: 31px 25px 60px; }
  .document-title { font-size: 25px; margin-bottom: 23px; }
  .document-label { font-size: 11px; }
  .document-body { font-size: 18px; line-height: 2.1; }
  .editor-footer { padding: 7px 16px; font-size: 11px; gap: 10px; }
  .editor-footer>span:nth-child(2) { display: none; }
  .editor-footer .button-row { display: flex !important; }
  .pending-banner { padding: 12px 18px; font-size: 12px; }
  .pending-banner .button-row { flex-wrap: wrap; }
  .focus-mode .document { padding-top: 32px; }
  .version-layout { grid-template-columns: 1fr; gap: 28px; }
  .version-list { display: flex; overflow-x: auto; border: 0; border-bottom: 1px solid var(--line); }
  .version-item { min-width: 220px; padding: 20px 17px; }
  .version-preview { padding: 0; }
  .version-preview .preview-text { font-size: 15px; }
  .settings-section h2 { padding: 22px 0 12px; font-size: 16px; }
  .setting-row { padding: 23px 0; gap: 16px; }
  .setting-row h3 { font-size: 14px; }
  .setting-row p { font-size: 12px; }
  .setting-row>.btn { flex-shrink: 0; }
  .modal-backdrop { padding: 17px; }
  .modal-head, .modal-body { padding: 22px; }
  .modal-head h2 { font-size: 18px; }
  .modal-footer { padding: 17px 22px; }
  .modal-body .input.large { min-height: 160px; }
  .login-page { display: block; }
  .login-brand-panel { display: none; }
  .login-form-panel { min-height: 100dvh; padding: 34px 28px; }
  .login-form h2 { font-size: 26px; }
  .login-form .agreement { font-size: 11px; }
}

/* Shared creative profile controls for the two-level direction/style flow. */
.profile-label { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; color: #596861; font-size: 12px; }
.profile-label small { color: #9aa7a0; font-size: 11px; }
.profile-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.profile-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; border: 1px solid #dfe8e1; border-radius: 4px; background: #fff; color: #63736b; font-size: 12px; transition: .15s; }
.profile-chip:hover, .profile-chip.active { border-color: #79a38f; color: #236c59; background: #eff7f2; }
.checkbox-chip { cursor: pointer; }
.checkbox-chip input { position: absolute; opacity: 0; pointer-events: none; }
.idea-empty { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 48px; padding: 0 14px; border: 1px dashed #cddbd1; border-radius: 5px; background: #fbfdfb; color: #668174; text-align: left; }
.idea-empty .lucide:last-child { margin-left: auto; width: 15px; }
.selected-idea { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 14px; border: 1px solid #dce9df; border-radius: 5px; background: #f7fbf8; }
.selected-idea strong { display: block; color: #365c4a; font-size: 13px; }
.selected-idea span { display: block; margin-top: 5px; color: #82938a; font-size: 11px; }
.selected-idea-actions { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.danger-link { color: #a45f5b !important; }
.idea-library-toolbar { display: grid; gap: 14px; margin-bottom: 16px; }
.idea-search { display: flex; align-items: center; gap: 9px; padding: 0 12px; border: 1px solid #dfe7e2; border-radius: 5px; background: #fff; }
.idea-search .lucide { width: 16px; color: #8d9e95; }
.idea-search .input { min-height: 42px; padding: 8px 0; border: 0; box-shadow: none; }
.idea-category-tabs { display: flex; flex-wrap: wrap; gap: 7px; }
.idea-category-tab { min-height: 29px; padding: 0 10px; border: 1px solid #e1e9e3; border-radius: 4px; background: #fff; color: #728178; font-size: 12px; }
.idea-category-tab.active { color: #236c59; border-color: #8ab49d; background: #eef7f1; }
.idea-library-list { max-height: 445px; overflow: auto; border-top: 1px solid #e8eeea; }
.idea-library-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid #e8eeea; }
.idea-library-item.selected { background: #fbfdfb; }
.idea-library-copy { min-width: 0; }
.idea-library-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; color: #364941; }
.idea-library-title strong { font-size: 14px; }
.idea-category { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border-radius: 3px; background: #eef5f0; color: #39745e; font-size: 11px; white-space: nowrap; }
.idea-library-copy p { margin-top: 8px; color: #718078; font-size: 12px; line-height: 1.75; overflow-wrap: anywhere; }
.idea-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; color: #8c9b93; font-size: 11px; }
.idea-tags span { white-space: nowrap; }
.idea-library-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.idea-library-actions .btn { min-height: 32px; padding: 0 10px; }
.idea-detail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #819087; font-size: 12px; }
.idea-detail-section { margin-top: 24px; padding-top: 16px; border-top: 1px solid #e8eeea; }
.idea-detail-section h3 { margin-bottom: 10px; color: #3e5849; font-size: 14px; }
.idea-detail-section p { color: #687970; line-height: 1.9; white-space: pre-wrap; overflow-wrap: anywhere; }
.idea-detail-note { margin-top: 22px; padding: 11px 13px; background: #f6faf6; color: #6b8777; font-size: 12px; }

.pro-priority-row { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 18px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #eef2ef; }
.pro-priority-row .form-field { margin-bottom: 0; }
.pro-style-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 18px; }
.pro-selected-idea { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; padding: 13px 14px; border: 1px solid #dce9df; border-radius: 5px; background: #f7fbf8; }
.pro-selected-idea strong { display: block; margin-top: 8px; color: #365c4a; font-size: 14px; }
.pro-selected-idea p { margin-top: 7px; color: #76877d; font-size: 12px; line-height: 1.7; }
.pro-idea-entry { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.pro-idea-entry .pro-empty { padding: 0; }

@media (max-width: 760px) {
  .composer-panel { padding-left: 20px; padding-right: 20px; }
  .composer-priority .setting-row, .composer-settings .setting-row { grid-template-columns: 1fr; gap: 10px; padding: 14px 0; }
  .composer-priority .setting-label, .composer-settings .setting-label { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; padding-top: 0; }
  .setting-label { flex-direction: row; align-items: baseline; gap: 8px; padding-top: 0; }
  .setting-control { gap: 10px 16px; }
  .selected-idea { align-items: flex-start; flex-direction: column; gap: 10px; }
  .selected-idea-actions { width: 100%; justify-content: flex-start; }
  .idea-library-item { flex-direction: column; gap: 11px; }
  .idea-library-actions { width: 100%; justify-content: flex-end; }
  .pro-style-grid { grid-template-columns: 1fr; gap: 0; }
  .pro-priority-row { grid-template-columns: 1fr; gap: 16px; }
  .pro-idea-entry { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 380px) {
  .topbar { padding-left: 16px; padding-right: 16px; }
  .primary-nav { gap: 4px; }
  .nav-item { font-size: 12px; }
  .nav-count { display: none; }
  .header-quota { display: none; }
  .page { padding-left: 17px; padding-right: 17px; }
  .composer-note { display: none; }
  .composer-heading { gap: 8px; }
  .type-option { min-width: 72px; padding: 8px 10px; gap: 6px; }
  .home-hero-copy h1 { font-size: 23px; }
  .work-card { padding: 16px; gap: 15px; }
  .editor-toolbar { padding: 9px 10px; }
  .editor-toolbar .btn.small { padding: 0 9px; }
  .task-description p span { display: block; margin-top: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}