:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-soft: #f6f7f9;
  --surface-quiet: #fafafa;
  --line: #e8eaed;
  --line-strong: #d9dde3;
  --text: #202124;
  --text-2: #525963;
  --muted: #858d99;
  --blue: #1769d2;
  --blue-ink: #1457b8;
  --blue-soft: #edf4ff;
  --black: #202124;
  --success: #2a7a57;
  --danger: #c23d3d;
  --focus-ring: rgba(23, 105, 210, .2);
  --shadow-float: 0 14px 40px rgba(31, 35, 41, .1);
  --icon-xs: 14px;
  --icon-sm: 15px;
  --icon-md: 16px;
  --icon-lg: 18px;
  --topbar: 60px;
  --rail: 100px;
  --context: 264px;
  --assistant: 400px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

/* Formal runtime: prototype-only navigation is intentionally absent. */
.prototype-map-button,
.prototype-map,
.map-scrim { display: none !important; }

.character-name-input {
  width: min(420px, 100%);
  margin: 3px 0 6px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
}

.character-role-input {
  display: block;
  width: min(360px, 100%);
  margin-top: 8px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
}

.character-role-input:focus {
  outline: 0;
  border-bottom-color: var(--line-strong);
  color: var(--ink);
}

.payment-qr {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: 18px;
  text-align: center;
  color: var(--muted);
}

.payment-qr img {
  width: 220px;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.character-name-input:focus {
  box-shadow: inset 0 -1px 0 var(--text);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { margin: 0; overflow: hidden; background: var(--bg); }
button, input, textarea, select { font: inherit; letter-spacing: 0; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.icon-sprite { position: absolute; left: -9999px; overflow: hidden; }
.icon {
  width: var(--icon-md);
  height: var(--icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.page { width: 100%; height: 100vh; }
.topbar {
  height: var(--topbar);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.98);
  position: relative;
  z-index: 40;
}
.brand { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.brand img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
  border-radius: 8px;
  image-rendering: auto;
}
.brand strong { color: var(--text); font-size: 15px; font-weight: 720; }
.brand > span { padding: 3px 6px; border-radius: 5px; background: #f0f2f5; color: #727b87; font-size: 9px; }
.brand.compact { margin-right: 6px; }
.topbar-spacer { flex: 1; }
.topbar-divider { width: 1px; height: 20px; margin: 0 2px; background: var(--line); }

button { border: 0; background: none; cursor: pointer; }
.ghost-button,
.primary-button,
.icon-button,
.soft-button,
.text-button,
.danger-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease, opacity 140ms ease, transform 140ms ease;
}
.ghost-button { padding: 0 10px; border: 1px solid transparent; border-radius: 8px; color: var(--text-2); font-size: 12px; }
.ghost-button:hover { border-color: var(--line); background: var(--surface-soft); color: var(--text); }
.primary-button { padding: 0 16px; border: 1px solid var(--black); border-radius: 999px; background: var(--black); color: #fff; font-size: 12px; font-weight: 650; }
.primary-button:hover { background: #2c3036; border-color: #2c3036; }
.primary-button:disabled { opacity: .45; cursor: not-allowed; }
.soft-button { padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-2); font-size: 12px; }
.soft-button:hover { border-color: #cbd1d9; background: var(--surface-soft); color: var(--text); }
.text-button { min-height: 28px; padding: 0 3px; color: var(--blue); font-size: 11px; }
.text-button:hover { color: var(--blue-ink); }
.danger-button { padding: 0 14px; border: 1px solid #ead1d1; border-radius: 999px; background: #fff; color: var(--danger); font-size: 12px; }
.danger-button:hover { background: #fff5f5; }
.icon-button { width: 34px; padding: 0; border: 1px solid transparent; border-radius: 8px; color: var(--text-2); }
.icon-button:hover { border-color: var(--line); background: var(--surface-soft); color: var(--text); }
.topbar .ghost-button .icon { width: var(--icon-sm); height: var(--icon-sm); }
.icon-button .icon { width: var(--icon-md); height: var(--icon-md); }
.module-rail .icon { width: var(--icon-lg); height: var(--icon-lg); }
.avatar-button { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #f4f5f7; color: #424a55; transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease; }
.avatar-button:hover { border-color: #cbd1d9; background: #ebeef2; color: var(--text); }
.avatar-button:active { transform: translateY(1px); }
.avatar-button .icon { width: 20px; height: 20px; stroke-width: 1.65; }
button:disabled { opacity: .46; cursor: not-allowed; pointer-events: none; }
.ghost-button:active, .primary-button:active, .soft-button:active, .text-button:active, .danger-button:active, .icon-button:active { transform: translateY(1px); }
button:focus-visible, [role="button"]:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable]:focus-visible {
  outline: 2px solid rgba(37, 99, 235, .28);
  outline-offset: 2px;
}

/* Shelf */
.shelf-page { display: grid; grid-template-rows: var(--topbar) minmax(0, 1fr); background: var(--bg); }
.shelf-main { min-height: 0; overflow: auto; padding: 30px clamp(28px, 5vw, 76px) 72px; }
.shelf-main > * { width: min(1180px, 100%); margin-left: auto; margin-right: auto; }
.shelf-overview {
  min-height: 104px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 28px;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.story-entry {
  min-height: 118px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  border: 1px solid #e0e5eb;
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(32, 39, 48, .04);
}
.story-entry:hover { border-color: #cbd4e0; box-shadow: 0 10px 28px rgba(32, 39, 48, .07); }
.story-entry-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 8px; background: var(--black); color: #fff; }
.story-entry-icon .icon { width: 21px; height: 21px; }
.story-entry-copy { min-width: 0; display: grid; gap: 4px; }
.story-entry-copy small { color: var(--blue); font-size: 10px; font-weight: 680; }
.story-entry-copy strong { font-size: 20px; line-height: 1.3; }
.story-entry-copy span { color: var(--text-2); font-size: 12px; line-height: 1.6; }
.shelf-stats { display: grid; grid-template-columns: repeat(2, 1fr); margin-top: 14px; border-bottom: 1px solid var(--line); }
.shelf-stats > div { min-height: 88px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-right: 1px solid var(--line); }
.shelf-stats > div:last-child { border-right: 0; }
.shelf-stats span { color: var(--muted); font-size: 11px; }
.shelf-stats strong { font-size: 24px; font-weight: 700; }
.shelf-stats small { margin-left: 4px; color: var(--muted); font-size: 10px; font-weight: 500; }
.library-heading { display: flex; align-items: flex-end; gap: 20px; margin-top: 36px; }
.library-heading h1 { margin: 0; font-size: 22px; line-height: 1.3; }
.library-heading p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.library-tools { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.search-field { width: 220px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--muted); }
.search-field input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 12px; }
select { height: 36px; padding: 0 28px 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--text-2); font-size: 11px; }
.book-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.book-card { min-height: 216px; display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease; }
.book-card { height: 216px; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; overflow: hidden; }
.book-cover { width: 104px; height: 156px; align-self: center; border-radius: 5px; background: var(--surface-soft); object-fit: cover; box-shadow: 0 8px 18px rgba(22, 28, 36, .13); }

.account-profile { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.account-profile-avatar { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; background: #f4f5f7; color: #424a55; }
.account-profile-avatar .icon { width: 27px; height: 27px; stroke-width: 1.55; }
.account-profile > span:last-child { min-width: 0; display: grid; gap: 3px; }
.account-profile strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-profile small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.book-card-copy { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.book-card:hover { border-color: #c9d0d9; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(28, 34, 42, .055); }
.book-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.book-card-labels { min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.book-kind { min-width: 0; overflow: hidden; color: var(--blue); font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.book-status { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 650; white-space: nowrap; }
.book-status::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ''; }
.book-status.is-writing { color: var(--blue); }
.book-more { width: 28px; height: 28px; color: var(--muted); }
.book-card h2 { margin: 12px 0 6px; overflow: hidden; font-size: 17px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.book-card p { min-height: 0; margin: 0; display: -webkit-box; overflow: hidden; color: var(--text-2); font-size: 11px; line-height: 1.7; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.book-meta { display: flex; justify-content: space-between; margin-top: auto; padding-top: 12px; color: var(--muted); font-size: 10px; }
.library-empty { min-height: 188px; grid-column: span 2; display: grid; place-items: center; align-content: center; gap: 7px; padding: 24px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); text-align: center; }
.library-empty strong { color: var(--text); font-size: 14px; }
.library-empty span { font-size: 11px; }

/* Workspace shell */
.workspace-page { display: grid; grid-template-rows: var(--topbar) minmax(0, 1fr); background: var(--surface); }
.workspace-project-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 12px; }
.save-state { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.save-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.workspace-shell { min-height: 0; display: grid; grid-template-columns: var(--rail) var(--context) minmax(460px, 1fr) var(--assistant); position: relative; overflow: hidden; }
.workspace-shell.assistant-collapsed { grid-template-columns: var(--rail) var(--context) minmax(460px, 1fr); }
.workspace-shell.assistant-collapsed .main-toolbar { padding-right: 128px; }
.module-rail { min-height: 0; display: flex; flex-direction: column; padding: 10px 9px; border-right: 1px solid var(--line); background: #fafbfc; }
.module-rail nav { display: grid; gap: 4px; }
.rail-button, .rail-bottom-button { width: 100%; height: 43px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border-radius: 8px; color: #626b78; font-size: 12px; text-align: left; }
.rail-button:hover, .rail-bottom-button:hover { background: #f0f2f5; color: var(--text); }
.rail-button.active { background: #edf0f4; color: var(--text); font-weight: 660; }
.rail-bottom-button { margin-top: auto; }
.context-column { min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #f8f9fb; overflow: hidden; }
.book-summary { padding: 18px 17px 16px; border-bottom: 1px solid var(--line); }
.book-summary small { color: var(--muted); font-size: 10px; }
.book-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.book-summary strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.book-summary-title { min-width: 0; max-width: 100%; overflow: hidden; padding: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 15px; font-weight: 680; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.book-summary-title:hover { color: var(--blue); }
.book-summary-title:focus-visible { outline: 0; color: var(--blue); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.book-summary p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.context-content { min-height: 0; display: flex; flex: 1; flex-direction: column; overflow: auto; background: #f8f9fb; }
.context-section-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 8px; }
.context-section-head strong { font-size: 13px; }
.context-section-head span { color: var(--muted); font-size: 10px; }
.context-section-head button { color: var(--blue); font-size: 10px; }
.context-list { display: grid; gap: 2px; padding: 0 9px 12px; }
.chapter-context-row { position: relative; min-width: 0; }
.chapter-context-row .context-item { width: 100%; padding-right: 9px; }
.chapter-context-row .context-item em { justify-self: end; }
.chapter-row-menu { position: absolute; right: 5px; top: 50%; width: 28px; height: 28px; transform: translateY(-50%); color: var(--muted); opacity: 0; pointer-events: none; }
.chapter-context-row .context-item em { transition: opacity 120ms ease; }
.chapter-context-row:hover .context-item em, .chapter-context-row:focus-within .context-item em { opacity: 0; }
.chapter-context-row:hover .chapter-row-menu, .chapter-row-menu:focus-visible { opacity: 1; pointer-events: auto; background: rgba(255,255,255,.72); color: var(--text); }
.context-draggable-row { position: relative; min-width: 0; cursor: grab; }
.context-draggable-row > .context-item { width: 100%; }
.context-draggable-row:active { cursor: grabbing; }
.context-draggable-row.is-dragging { opacity: .38; }
.context-draggable-row.drag-before::before, .context-draggable-row.drag-after::after { content: ""; position: absolute; z-index: 4; left: 8px; right: 8px; height: 2px; border-radius: 2px; background: var(--blue); pointer-events: none; }
.context-draggable-row.drag-before::before { top: -2px; }
.context-draggable-row.drag-after::after { bottom: -2px; }
.setting-context-row { position: relative; min-width: 0; }
.setting-context-row .context-item { width: 100%; padding-right: 38px; }
.setting-row-menu { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); width: 25px; height: 25px; opacity: 0; color: var(--muted); }
.setting-context-row:hover .setting-row-menu, .setting-row-menu:focus-visible { opacity: 1; background: rgba(255,255,255,.72); color: var(--text); }
.context-empty { display: grid; gap: 4px; padding: 18px 12px; color: var(--muted); font-size: 10px; }
.context-empty small { font-size: 9px; }
.context-item { min-height: 48px; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 8px; text-align: left; }
.context-item > span:nth-child(2) { min-width: 0; }
.context-item:hover { background: #f0f2f5; }
.context-item.active { background: var(--blue-soft); color: var(--blue-ink); }
.context-item-number { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; background: #edf0f3; color: #6e7886; font-size: 10px; }
.context-item.active .context-item-number { background: #dce8ff; color: var(--blue-ink); }
.context-item-number.character-avatar-marker { width: 31px; height: 31px; background: #e7eaee; color: #3f4855; font-size: 12px; font-weight: 700; }
.context-item.active .context-item-number.character-avatar-marker { background: #dce8ff; color: var(--blue-ink); }
.context-item strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 630; }
.context-item small { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; }
.context-item em { max-width: 58px; overflow: hidden; color: var(--muted); font-size: 10px; font-style: normal; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.context-footer { margin-top: auto; padding: 14px 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.6; }

.main-column { min-width: 0; min-height: 0; display: grid; grid-template-rows: 56px minmax(0, 1fr) 28px; background: var(--surface); }
.main-column.statusless { grid-template-rows: 56px minmax(0, 1fr); }
.main-toolbar, .main-scroll, .main-status { min-width: 0; width: 100%; }
.main-toolbar { position: relative; z-index: 18; display: flex; align-items: center; gap: 8px; overflow: visible; padding: 0 17px; border-bottom: 1px solid var(--line); }
.main-toolbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 650; }
.main-toolbar-meta { color: var(--muted); font-size: 10px; white-space: nowrap; }
.toolbar-spacer { flex: 1; }
.toolbar-action-group { display: flex; align-items: center; gap: 4px; }
.toolbar-action-group > button, .toolbar-select-wrap, .toolbar-select { flex: none; white-space: nowrap; }
.main-scroll { min-height: 0; overflow: auto; scroll-behavior: smooth; background: var(--surface); }
.main-status { display: flex; align-items: center; justify-content: space-between; padding: 0 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }

/* Main content */
.document { width: min(820px, calc(100% - 62px)); margin: 0 auto; padding: 42px 0 96px; }
.document.narrow { width: min(720px, calc(100% - 62px)); }
.document.wide { width: min(920px, calc(100% - 54px)); }
.kicker { margin-bottom: 9px; color: var(--blue); font-size: 10px; font-weight: 680; }
.document h1 { margin: 0; font-size: 25px; line-height: 1.36; font-weight: 720; }
.document-lead { margin: 8px 0 0; color: var(--text-2); font-size: 12px; line-height: 1.75; }
.section-rule { display: none; }
.form-section { padding: 23px 0; border: 0; }
.form-section + .form-section { border-top: 1px solid var(--line); }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 9px; }
.field-head label, .field-head strong { font-size: 12px; font-weight: 650; }
.field-head span { color: var(--muted); font-size: 10px; white-space: nowrap; }
.field-input, .field-textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  outline: 0;
  font-size: 12px;
  line-height: 1.78;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field-input { height: 41px; padding: 0 12px; }
.field-textarea { min-height: 96px; padding: 12px 13px; resize: vertical; }
.field-textarea.tall { min-height: 280px; }
.field-hint { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field-pair label { display: grid; gap: 7px; color: var(--muted); font-size: 10px; }
.number-field { position: relative; }
.number-field .field-input { padding-right: 38px; }
.number-field > span { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 10px; pointer-events: none; }
.field-textarea:focus, .field-input:focus { border-color: #8eaff9; box-shadow: 0 0 0 3px rgba(37, 99, 235, .07); }
.selection-row { display: flex; flex-wrap: wrap; gap: 7px; }
.selection-pill { min-height: 31px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 10px; }
.selection-pill:hover { border-color: #c3cad4; }
.selection-pill.active { border-color: #abc3fb; background: var(--blue-soft); color: var(--blue-ink); }
.document-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 25px; }

.writing-document { width: min(880px, calc(100% - 70px)); margin: 0 auto; padding: 44px 0 120px; }
.writing-title-row { margin-bottom: 28px; }
.writing-title-row h1 { margin: 0; font-size: 27px; line-height: 1.4; }
.writing-title-row p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.writing-paper { min-height: 620px; outline: 0; color: #111318; font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif; font-size: 16px; line-height: 2.05; }
.writing-paper:focus, .writing-paper:focus-visible { outline: 0 !important; box-shadow: none !important; }
[data-paragraph-indent="two-char"] .writing-paper p,
[data-paragraph-indent="two-char"] .outline-free-paper p { text-indent: 2em; }
.workspace-page[data-editor-font="serif"] .writing-paper { font-family: "Noto Serif SC", "Songti SC", SimSun, serif; }
.workspace-page[data-editor-font="kai"] .writing-paper { font-family: KaiTi, STKaiti, serif; }
.writing-paper p { margin: 0 0 18px; }
.writing-paper::selection { background: #dbe7ff; }
.outline-writing-document { width: min(780px, calc(100% - 70px)); }
.outline-writing-document .writing-title-row { margin-bottom: 24px; }
.outline-free-paper { min-height: 680px; outline: 0; color: #111318; font-size: 14px; line-height: 2; }
.outline-free-paper p { margin: 0 0 18px; }
.outline-free-paper:empty::before { content: attr(data-placeholder); color: var(--muted); pointer-events: none; }
.outline-free-paper::selection { background: #dbe7ff; }
.settings-writing-document { width: min(780px, calc(100% - 70px)); }
.settings-free-paper { min-height: 720px; }

.outline-section { padding: 22px 0; border-bottom: 1px solid var(--line); }
.outline-section h3 { margin: 0; font-size: 14px; }
.outline-section p { margin: 9px 0 0; color: var(--text-2); font-size: 12px; line-height: 1.85; }
.outline-beat { margin-top: 12px; padding: 10px 12px; border-left: 2px solid #7fa5fa; background: #f8faff; color: #555d69; }
.chapter-outline-list { margin-top: 23px; border-top: 1px solid var(--line); }
.chapter-outline-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 78px; align-items: start; gap: 13px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.chapter-outline-row > span:first-child { color: var(--muted); font-size: 10px; }
.chapter-outline-row strong { display: block; font-size: 12px; }
.chapter-outline-row p { margin: 5px 0 0; color: var(--text-2); font-size: 11px; line-height: 1.65; }
.chapter-outline-row em { justify-self: end; color: var(--muted); font-size: 10px; font-style: normal; }
.chapter-outline-overview-row { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; text-align: left; cursor: pointer; }
.chapter-outline-overview-row:hover { background: #f8f9fb; }
.chapter-outline-overview-row:focus-visible { outline: 2px solid rgba(37, 99, 235, .22); outline-offset: -2px; }
.outline-chapter-children { position: relative; display: grid; gap: 1px; margin: 2px 10px 8px 28px; padding-left: 13px; }
.outline-chapter-children::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: var(--line); }
.outline-chapter-child { min-width: 0; height: 34px; display: grid; grid-template-columns: 23px minmax(0, 1fr); align-items: center; gap: 7px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); text-align: left; }
.outline-chapter-child > span { color: var(--muted); font-size: 9px; }
.outline-chapter-child > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 560; }
.outline-chapter-child:hover { background: #f2f4f7; color: var(--text); }
.outline-chapter-child.active { background: var(--blue-soft); color: var(--blue-ink); }
.outline-chapter-child.active > span { color: var(--blue); }
.review-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 34px; margin-top: 28px; }
.review-score { position: sticky; top: 0; align-self: start; padding-top: 8px; }
.review-score strong { display: block; font-size: 52px; line-height: 1; }
.review-score span { color: var(--muted); font-size: 10px; }
.review-score p { margin: 16px 0 0; color: var(--text-2); font-size: 11px; line-height: 1.7; }
.review-bars { display: grid; gap: 9px; margin-top: 20px; }
.review-bars div { display: grid; grid-template-columns: 42px 1fr 24px; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; }
.review-bars i { height: 3px; border-radius: 2px; background: #e9edf2; overflow: hidden; }
.review-bars b { display: block; height: 100%; background: #2d3540; }
.review-issue { padding: 17px 0; border-bottom: 1px solid var(--line); }
.review-issue small { color: var(--blue); font-size: 10px; }
.review-issue h3 { margin: 6px 0 0; font-size: 13px; }
.review-issue p { margin: 7px 0 0; color: var(--text-2); font-size: 11px; line-height: 1.7; }
.review-issue button { margin-top: 8px; padding: 0; color: var(--blue); font-size: 10px; }

.character-header { display: flex; align-items: flex-start; gap: 18px; }
.character-avatar { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: #eef1f4; color: #56606d; font-size: 16px; font-weight: 700; }
.character-title { flex: 1; }
.character-title small { color: var(--muted); font-size: 10px; }
.character-title h1 { margin-top: 4px; }
.character-role { margin-top: 7px; color: var(--blue); font-size: 10px; }
.character-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 26px; margin-top: 18px; }
.character-grid .form-section:nth-last-child(-n+2) { border-bottom: 0; }
.related-editor { min-height: 520px; border: 0; padding: 0; resize: none; font-size: 14px; line-height: 2; }
.related-editor:focus { box-shadow: none; }

/* Assistant */
.assistant-panel { position: relative; min-height: 0; display: grid; grid-template-rows: 56px minmax(0, 1fr) auto; border-left: 1px solid var(--line); background: #f7f8fa; }
.workspace-shell.assistant-collapsed .assistant-panel { display: none; }
.assistant-resize-handle { position: absolute; z-index: 30; left: -4px; top: 0; bottom: 0; width: 8px; cursor: col-resize; touch-action: none; outline: 0; }
.assistant-resize-handle::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 1px; background: transparent; transition: background 120ms ease; }
.assistant-resize-handle:hover::after, .assistant-resize-handle:focus-visible::after, body.assistant-resizing .assistant-resize-handle::after { background: #9bb4e8; }
body.assistant-resizing { cursor: col-resize; user-select: none; }
.assistant-tabs { display: flex; align-items: stretch; gap: 20px; padding: 0 13px; border-bottom: 1px solid var(--line); background: #fafbfc; }
.assistant-tab { position: relative; min-width: 34px; padding: 0 3px; color: var(--muted); font-size: 12px; }
.assistant-tab.active { color: var(--text); font-weight: 670; }
.assistant-tab.active::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: -1px; height: 2px; background: var(--black); }
.assistant-close { margin: auto 0 auto auto; }
.assistant-body { min-height: 0; overflow: auto; padding: 0 14px 22px; background: #f7f8fa; }
.assistant-body.reference-mode { overflow: auto; padding: 0 18px 28px; background: #fff; }
.writing-reference-workspace { min-height: 100%; }
.writing-reference-links { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 7px; background: rgba(255, 255, 255, .96); }
.writing-reference-links button { min-width: 0; padding: 0; color: var(--muted); font-size: 11px; white-space: nowrap; }
.writing-reference-links button:hover { color: var(--text); }
.writing-reference-links button.active { color: var(--blue-ink); font-weight: 680; }
.writing-reference-content { min-width: 0; }
.writing-reference-document { padding: 22px 0 34px; }
.writing-reference-document > header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 14px; border-bottom: 0; }
.writing-reference-document > header div { min-width: 0; }
.writing-reference-document > header span { display: block; overflow: hidden; margin-bottom: 5px; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.writing-reference-document > header h2 { margin: 0; color: var(--text); font-size: 17px; line-height: 1.45; }
.writing-reference-document > header small { padding-top: 21px; color: var(--muted); font-size: 10px; white-space: nowrap; }
.writing-reference-document > header button { padding-top: 21px; color: var(--blue); font-size: 10px; white-space: nowrap; }
.writing-reference-document > header .writing-reference-header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 14px; padding-top: 21px; }
.writing-reference-document > header .writing-reference-header-actions button { padding: 0; color: var(--blue); font-size: 10px; white-space: nowrap; }
.writing-reference-document > .assistant-outline-reference-editor { min-height: 280px; margin-top: 0; padding: 17px 0; overflow: hidden; resize: none; border-top: 0; border-bottom: 0; font-size: 13px; line-height: 1.95; }
.writing-reference-prose { padding-top: 17px; }
.writing-reference-prose p { margin: 0 0 15px; color: #262a31; font-size: 13px; line-height: 1.9; white-space: pre-wrap; }
.writing-reference-prose p:last-child { margin-bottom: 0; }
.writing-reference-empty { margin: 18px 0 0 !important; color: var(--muted) !important; font-size: 11px !important; line-height: 1.75 !important; }
.writing-reference-select { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.writing-reference-select > span { color: var(--muted); font-size: 10px; }
.writing-reference-select select { min-width: 0; height: 34px; padding: 0 28px 0 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--text); font-size: 12px; }
.writing-reference-fields { padding-top: 4px; }
.writing-reference-field { padding: 14px 0; border-bottom: 1px solid var(--line); }
.writing-reference-field > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; }
.writing-reference-field > p { margin: 0; color: #262a31; font-size: 13px; line-height: 1.9; white-space: pre-wrap; }
.assistant-sticky-controls { position: sticky; top: 0; z-index: 9; background: #f7f8fa; }
.assistant-reference-page { min-height: 100%; }
.assistant-chapter-outline { padding: 20px 0 22px; border-bottom: 1px solid var(--line); }
.assistant-chapter-outline > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; }
.assistant-chapter-outline > header span { grid-column: 1 / -1; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.assistant-chapter-outline > header strong { color: var(--text); font-size: 16px; }
.assistant-chapter-outline > header small { align-self: center; color: var(--muted); font-size: 10px; }
.assistant-outline-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 14px; }
.assistant-outline-page-actions button { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 11px; }
.assistant-outline-page-actions button:last-child { color: var(--blue-ink); }
.assistant-outline-page-actions .icon { width: var(--icon-xs); height: var(--icon-xs); }
.assistant-outline-reference-editor { width: 100%; min-height: 230px; margin-top: 14px; padding: 14px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; outline: 0; resize: vertical; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; line-height: 1.9; }
.assistant-outline-reference-editor:focus { border-color: #aabbdc; }
.assistant-outline-reference-editor::placeholder { color: #a1a7b0; }
.assistant-reference-materials { padding-top: 18px; }
.assistant-reference-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; }
.assistant-reference-section-title strong { color: var(--text); font-size: 12px; }
.assistant-reference-section-title span { color: var(--muted); font-size: 10px; }
.assistant-context { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 0 13px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.assistant-context strong { color: var(--text); font-size: 10px; }
.assistant-toolbox { border-bottom: 1px solid var(--line); background: #f7f8fa; }
.assistant-toolbox > summary { min-height: 44px; display: grid; grid-template-columns: auto minmax(0, 1fr) 14px; align-items: center; gap: 8px; color: var(--text); font-size: 11px; font-weight: 650; cursor: pointer; list-style: none; }
.assistant-toolbox > summary::-webkit-details-marker { display: none; }
.assistant-toolbox > summary strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; font-weight: 500; text-align: right; }
.assistant-toolbox > summary .icon { width: var(--icon-xs); height: var(--icon-xs); color: var(--muted); transition: transform 140ms ease; }
.assistant-toolbox[open] > summary .icon { transform: rotate(90deg); }
.assistant-toolbox[open] > summary { border-bottom: 1px solid var(--line); }
.assistant-toolbox-body { padding-bottom: 10px; }
.assistant-intro { padding: 24px 0 14px; }
.assistant-intro h2 { margin: 0; font-size: 15px; }
.assistant-intro p { margin: 7px 0 0; color: var(--text-2); font-size: 10px; line-height: 1.65; }
.assistant-actions { display: grid; border-top: 1px solid var(--line); }
.character-chat-entry { width: 100%; min-height: 54px; display: grid; grid-template-columns: 18px minmax(0, 1fr) 14px; align-items: center; gap: 10px; margin: 0 0 14px; padding: 9px 12px; border: 0; border-radius: 8px; background: var(--black); color: #fff; text-align: left; }
.character-chat-entry .icon { width: var(--icon-sm); height: var(--icon-sm); }
.character-chat-entry span { display: grid; gap: 2px; }
.character-chat-entry strong { font-size: 11px; }
.character-chat-entry small { color: rgba(255,255,255,.62); font-size: 9px; }
.character-chat-inline { color: var(--blue-ink); }
.assistant-action { min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 2px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 11px; text-align: left; }
.assistant-action:hover { color: var(--text); }
.assistant-action:disabled, .assistant-action button:disabled { cursor: wait; color: var(--muted); opacity: .72; }
.assistant-action .icon:last-child { margin-left: auto; width: 13px; height: 13px; color: var(--muted); }
.assistant-generation-action > button { min-width: 0; flex: 1; color: inherit; text-align: left; }
.assistant-generation-action label { flex: 0 0 auto; }
.assistant-generation-action select { height: 28px; padding: 0 22px 0 7px; border: 0; border-radius: 6px; background: #eef0f3; color: var(--text-2); font: inherit; cursor: pointer; }
.assistant-generation-action select:focus-visible { outline: 2px solid rgba(22, 93, 211, .24); outline-offset: 1px; }
.assistant-generation-action .icon:last-child { margin-left: 0; }

.assistant-more-tools { border-bottom: 0; }
.assistant-more-tools summary { min-height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 2px; color: var(--text-2); font-size: 11px; cursor: pointer; list-style: none; }
.assistant-more-tools summary::-webkit-details-marker { display: none; }
.assistant-more-tools summary small { margin-left: auto; color: var(--muted); font-size: 10px; }
.assistant-more-tools summary .icon { width: var(--icon-xs); height: var(--icon-xs); color: var(--muted); transition: transform 140ms ease; }
.assistant-more-tools[open] summary .icon { transform: rotate(90deg); }
.assistant-more-tools .assistant-actions { border-top: 0; }
.assistant-more-tools .assistant-action { padding-left: 12px; }

.assistant-source-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.assistant-source-row button {
  color: var(--blue);
  font-size: inherit;
}

.assistant-source-row button:hover {
  color: var(--blue-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.assistant-source-row i { color: #c3c8d0; font-style: normal; }
.assistant-source-row strong { color: var(--text-2); font-size: 11px; font-weight: 500; }

.assistant-inline-reference { border-bottom: 1px solid var(--line); }
.assistant-inline-reference > summary { min-height: 44px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 14px; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; cursor: pointer; list-style: none; }
.assistant-inline-reference > summary::-webkit-details-marker { display: none; }
.assistant-inline-reference > summary strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 11px; font-weight: 500; }
.assistant-inline-reference > summary .icon { width: var(--icon-xs); height: var(--icon-xs); transition: transform 140ms ease; }
.assistant-inline-reference[open] > summary .icon { transform: rotate(90deg); }
.assistant-inline-reference-body { padding-bottom: 8px; border-top: 1px solid var(--line); }
.assistant-inline-reference-body > .assistant-context { display: none; }
.assistant-inline-reference-body .inline-chapter-outline { padding-top: 14px; }
.assistant-messages { display: grid; gap: 14px; padding-top: 18px; }
.chat-message { max-width: 92%; font-size: 11px; line-height: 1.7; }
.chat-message.user { justify-self: end; padding: 9px 11px; border-radius: 8px; background: #e9edf3; color: var(--text); }
.chat-message.ai { justify-self: start; color: var(--text-2); }
.chat-message.ai strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 10px; }
.assistant-pending-message p::after { content: ''; display: inline-block; width: 16px; height: 4px; margin-left: 6px; border-radius: 2px; background: linear-gradient(90deg, #b8c0cc 30%, transparent 30% 45%, #b8c0cc 45% 70%, transparent 70% 85%, #b8c0cc 85%); animation: assistant-pending-pulse 1.1s ease-in-out infinite; vertical-align: middle; }
.assistant-composer.is-busy { opacity: .72; }
@keyframes assistant-pending-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.chat-message-text { white-space: normal; }
.chat-message-text p { margin: 0 0 7px; }
.chat-message-text p:last-child { margin-bottom: 0; }
.chat-message-text h4 { margin: 14px 0 7px; color: var(--text); font-size: 12px; line-height: 1.5; }
.chat-message-text h4:first-child { margin-top: 0; }
.chat-message-text strong { color: var(--text); font-weight: 700; }
.chat-message-text ul, .chat-message-text ol { margin: 6px 0 9px; padding-left: 20px; }
.chat-message-text li { margin: 3px 0; }
.chat-message-text code { padding: 1px 4px; border-radius: 4px; background: #eceff3; color: var(--text); font-family: Consolas, monospace; font-size: .92em; }
.chat-message-text .chat-spacer { height: 6px; }
.character-chat-thread { gap: 12px; padding: 18px 2px 4px; }
.character-chat-thread .chat-message { max-width: 86%; padding: 10px 12px; border-radius: 8px; }
.character-chat-thread .chat-message.ai { border: 1px solid var(--line); border-bottom-left-radius: 2px; background: #fff; color: var(--text-2); }
.character-chat-thread .chat-message.user { border: 0; border-bottom-right-radius: 2px; background: #25282d; color: #fff; }
.character-chat-thread .chat-message.ai strong { margin-bottom: 5px; color: var(--blue-ink); }
.character-chat-thread .chat-message.user .chat-message-text, .character-chat-thread .chat-message.user .chat-message-text strong { color: #fff; }
.ai-proposal-action { display: grid; gap: 9px; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(38, 43, 52, .12); }
.ai-proposal-action span { color: var(--muted); font-size: 11px; }
.ai-proposal-action button { justify-self: start; min-height: 32px; }
.ai-proposal-buttons { display: flex; flex-wrap: wrap; gap: 7px; }
.assistant-composer { margin: 0 12px 12px; display: grid; grid-template-columns: minmax(0, 1fr) 30px 32px; align-items: end; gap: 6px; padding: 8px 8px 8px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); }
.assistant-composer textarea { max-height: 180px; min-height: 52px; padding: 5px 0; border: 0; resize: none; outline: 0; color: var(--text); background: transparent; font-size: 11px; line-height: 1.6; }
.assistant-composer button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--black); color: #fff; }
.assistant-composer .composer-voice { background: transparent; color: var(--muted); }
.assistant-composer .composer-voice:hover { background: var(--surface-soft); color: var(--text); }
.assistant-composer .composer-voice.active { background: #e8eefc; color: var(--blue-ink); }
.assistant-reopen { position: absolute; right: 16px; top: 12px; z-index: 24; min-width: 98px; height: 36px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border-radius: 999px; background: var(--black); color: #fff; box-shadow: 0 8px 22px rgba(20, 24, 30, .18); font-size: 11px; font-weight: 650; }
.assistant-reopen .icon { width: var(--icon-xs); height: var(--icon-xs); }
.assistant-reopen[hidden] { display: none; }
@media (max-width: 900px) {
  .workspace-shell.assistant-collapsed .main-toolbar { padding-right: 60px; }
  .assistant-reopen { min-width: 36px; width: 36px; padding: 0; }
  .assistant-reopen span { display: none; }
}
.reference-disclosure { border-bottom: 1px solid var(--line); }
.reference-disclosure summary { min-height: 52px; display: grid; grid-template-columns: 66px minmax(0, 1fr) 16px; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.reference-disclosure summary::-webkit-details-marker { display: none; }
.reference-disclosure summary > span { color: var(--muted); font-size: 10px; }
.reference-disclosure summary > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 10px; font-weight: 650; }
.reference-disclosure summary .icon { width: var(--icon-xs); height: var(--icon-xs); color: var(--muted); transition: transform 140ms ease; }
.reference-disclosure summary:hover > strong { color: var(--blue-ink); }
.reference-disclosure summary:focus-visible { outline: 2px solid rgba(37, 99, 235, .28); outline-offset: -2px; }
.reference-disclosure[open] summary .icon { transform: rotate(90deg); }
.reference-disclosure[open] summary > strong { color: var(--blue-ink); }
.reference-disclosure-body { padding: 0 0 16px 74px; }
.reference-disclosure-body p { margin: 0; color: var(--text-2); font-size: 10px; line-height: 1.7; }
.inline-chapter-outline { padding: 18px 0 16px; border-bottom: 1px solid var(--line); }
.inline-chapter-outline-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.inline-chapter-outline-head span { color: var(--text); font-size: 12px; font-weight: 680; }
.inline-chapter-outline-head small { color: var(--muted); font-size: 9px; }
.chapter-outline-inline-editor { width: 100%; min-height: 220px; padding: 11px 0; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; outline: 0; background: transparent; color: #17191d; font: inherit; font-size: 11px; line-height: 1.85; resize: vertical; }
.chapter-outline-inline-editor:focus { border-color: #aabbdc; background: rgba(255, 255, 255, .45); }
.inline-chapter-outline > p { margin: 9px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.chapter-outline-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.chapter-outline-actions .primary-button { min-height: 34px; }
.chapter-outline-actions > button:not(.primary-button) { min-height: 30px; padding: 0; color: var(--blue); font-size: 12px; }
.chapter-outline-actions > button:not(.primary-button):hover { color: var(--blue-ink); text-decoration: underline; text-underline-offset: 3px; }
.chapter-outline-main-section { padding-top: 8px; }
.chapter-outline-main-editor { min-height: 560px !important; font-size: 14px !important; line-height: 2 !important; }
.chapter-text-reference-body { max-height: calc(100vh - 280px); overflow: auto; padding: 12px 0 4px; border-top: 1px solid var(--line); }
.chapter-text-reference-body p { margin: 0 0 14px; color: #25282e; font-size: 11px; line-height: 1.9; }
.chapter-text-reference .reference-actions-row { margin-top: 12px; }

.character-context-card, .story-question-card, .story-summary-card { margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.character-chat-mode { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 9px; }
.character-chat-mode span { color: var(--muted); }
.character-chat-mode strong { font-size: 10px; }
.character-chat-mode button { color: var(--blue); font-size: 9px; }
.character-context-card { padding: 14px 0 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.character-session-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.character-session-head > div { min-width: 0; }
.character-session-head h3 { margin: 0; }
.character-session-head small { display: block; margin-top: 4px; }
.character-session-head > button { flex: 0 0 auto; color: var(--blue); font-size: 11px; }
.character-context-card small, .story-question-card small, .story-summary-card small { color: var(--blue); font-size: 10px; font-weight: 650; }
.character-context-card h3, .story-question-card h3, .story-summary-card h3 { margin: 7px 0 0; font-size: 13px; line-height: 1.5; }
.character-context-card p, .story-question-card p, .story-summary-card p { margin: 6px 0 0; color: var(--text-2); font-size: 10px; line-height: 1.65; }
.character-context-actions { display: flex; gap: 8px; margin-top: 11px; }
.story-chat-history { display: grid; gap: 9px; padding: 14px 0 2px; }
.story-worldbuilding-preview { margin: 16px 0 6px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.story-worldbuilding-preview small { color: var(--blue); font-size: 10px; font-weight: 650; }
.story-worldbuilding-preview p { margin: 8px 0 0; color: var(--text-2); font-size: 11px; line-height: 1.8; white-space: pre-line; }
.story-chat-history .chat-message.user { max-width: 88%; margin-left: auto; padding: 9px 11px; border-radius: 8px 8px 2px 8px; background: var(--black); color: #fff; }
.story-answer-pair { display: grid; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.story-answer-pair span { color: var(--muted); font-size: 10px; }
.story-answer-pair strong { color: var(--text-2); font-size: 11px; font-weight: 560; line-height: 1.55; }
.story-question-card, .story-summary-card { padding: 18px 0 8px; border: 0; border-radius: 0; background: transparent; }
.story-question-card h3, .story-summary-card h3 { margin-top: 8px; font-size: 18px; line-height: 1.45; }
.story-question-card p, .story-summary-card p { font-size: 11px; }
.story-options { display: grid; gap: 7px; margin-top: 16px; }
.story-option { min-height: 48px; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text-2); font-size: 11px; text-align: left; transition: border-color 120ms ease, background 120ms ease, transform 120ms ease; }
.story-option strong { color: var(--text); font-size: 12px; font-weight: 620; }
.story-option span { color: var(--muted); font-size: 10px; }
.story-option:hover { border-color: #b8c6df; background: #fff; color: var(--blue-ink); transform: translateY(-1px); }
.story-question-tools, .story-navigation { display: flex; align-items: center; gap: 13px; margin-top: 12px; }
.story-question-tools button, .story-navigation button, .story-final-question .text-button { padding: 0; color: var(--muted); font-size: 10px; }
.story-question-tools button:hover, .story-navigation button:hover { color: var(--text); }
.story-navigation { justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line); }
.story-navigation button:disabled { opacity: .35; }
.story-custom-answer { display: grid; gap: 8px; margin-top: 12px; }
.story-custom-answer textarea { min-height: 84px; padding: 10px 11px; border: 1px solid var(--line-strong); border-radius: 8px; outline: 0; resize: vertical; color: var(--text); font: inherit; font-size: 11px; line-height: 1.6; }
.story-custom-answer textarea:focus { border-color: #9eb2d5; }
.story-custom-answer button { justify-self: end; min-height: 34px; }
.story-progress { display: flex; gap: 4px; margin-top: 12px; }
.story-progress i { height: 2px; flex: 1; background: #e7eaef; }
.story-progress i.done { background: var(--blue); }
.story-progress i.current { background: #9fb8ed; }
.story-final-question, .story-generating, .story-error { display: grid; gap: 9px; padding: 24px 0; }
.story-final-question h3, .story-generating h3, .story-error h3 { margin: 0; font-size: 17px; line-height: 1.45; }
.story-final-question p, .story-generating p { margin: 0; color: var(--text-2); font-size: 11px; line-height: 1.65; }
.story-final-question .primary-button { justify-self: start; margin-top: 7px; }
.story-generating { grid-template-columns: 12px minmax(0, 1fr); align-items: start; }
.story-generating-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--blue); animation: storyPulse 1.1s ease-in-out infinite; }
@keyframes storyPulse { 50% { opacity: .35; transform: scale(.72); } }
.story-generation-stages { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-top: 14px; color: var(--muted); font-size: 10px; }
.story-generation-stages span { position: relative; padding-left: 10px; }
.story-generation-stages span::before { content: ""; position: absolute; left: 0; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: #9aa6b8; }
.story-direction-choice { display: grid; gap: 10px; padding: 8px 0 24px; }
.story-direction-choice > small { color: var(--blue-ink); font-size: 10px; font-weight: 620; }
.story-direction-choice > h3 { max-width: 340px; margin: 0; color: var(--text); font-size: 17px; line-height: 1.45; }
.story-direction-diagnosis { margin: 0 0 4px; color: var(--text-2); font-size: 11px; line-height: 1.7; }
.story-title-section { display: grid; gap: 9px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.story-title-section > span { color: var(--text); font-size: 11px; font-weight: 620; }
.story-title-options { display: flex; flex-wrap: wrap; gap: 7px; }
.story-title-options button { min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text-2); font-size: 11px; }
.story-title-options button.active { border-color: var(--black); background: var(--black); color: #fff; }
.story-direction-options { display: grid; gap: 9px; margin-top: 3px; }
.story-direction-option { display: grid; gap: 7px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.story-direction-option.recommended { border-color: #aeb9ca; background: #fafbfc; }
.story-direction-option.selected { border-color: var(--black); box-shadow: 0 0 0 1px var(--black); }
.story-direction-option > div { display: flex; align-items: center; gap: 8px; }
.story-direction-option strong { color: var(--muted); font-size: 10px; font-weight: 560; }
.story-direction-option em { margin-left: auto; display: flex; align-items: baseline; gap: 2px; color: var(--muted); font-size: 9px; font-style: normal; }
.story-direction-option em b { color: var(--text); font-size: 15px; font-weight: 680; }
.story-direction-option em span { font-size: 9px; }
.story-direction-option em i { margin-left: 6px; padding: 2px 5px; border-radius: 999px; background: #eef3fb; color: var(--blue-ink); font-size: 9px; font-style: normal; }
.story-direction-option h4 { margin: 1px 0 0; color: var(--text); font-size: 13px; font-weight: 650; line-height: 1.45; }
.story-direction-route { color: var(--blue-ink); font-size: 10px; font-weight: 620; line-height: 1.5; }
.story-direction-option p { margin: 0; color: var(--text-2); font-size: 10px; line-height: 1.6; }
.story-direction-option button { justify-self: start; min-height: 30px; margin-top: 2px; padding: 0 10px; border-radius: 999px; background: var(--black); color: #fff; font-size: 10px; }
.story-direction-option button:disabled { color: var(--muted); cursor: default; }
.story-direction-discuss { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: baseline; margin-top: 5px; padding: 12px 0 0; border-top: 1px solid var(--line); text-align: left; }
.story-direction-discuss strong { color: var(--text); font-size: 11px; }
.story-direction-discuss span { color: var(--muted); font-size: 10px; line-height: 1.55; }
.story-direction-discuss:hover span { color: var(--blue-ink); }
.story-direction-confirm { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 5px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-direction-confirm > div { display: grid; gap: 3px; }
.story-direction-confirm small { color: var(--blue-ink); font-size: 9px; }
.story-direction-confirm strong { color: var(--text); font-size: 12px; }
.story-direction-confirm span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.story-engine-discussion { display: grid; gap: 10px; padding: 16px 0 4px; }
.story-engine-discussion > button { justify-self: start; }
.story-adopted-direction { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin-top: 16px; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-adopted-direction span { grid-column: 1; color: var(--muted); font-size: 10px; }
.story-adopted-direction strong { grid-column: 1; color: var(--text); font-size: 12px; font-weight: 650; }
.story-adopted-direction button { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 0; color: var(--blue-ink); font-size: 10px; }
.story-preview-copy { margin-top: 16px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-preview-copy span { color: var(--muted); font-size: 10px; }
.story-preview-copy p { max-height: 180px; overflow: auto; margin-top: 7px; color: var(--text-2); font-size: 11px; line-height: 1.75; white-space: pre-line; }
.story-stage-copy { margin-top: 0; border-top: 0; }
.story-preview-facts { display: flex; flex-wrap: wrap; gap: 7px 14px; padding: 11px 0; color: var(--muted); font-size: 10px; }
.story-preview-details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-preview-details summary { padding: 11px 0; color: var(--text); font-size: 11px; cursor: pointer; }
.story-preview-details > div { padding: 0 0 12px; }
.story-preview-details strong { display: block; margin: 8px 0 4px; font-size: 10px; }
.story-preview-details p, .story-preview-details ol { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 10px; line-height: 1.7; }
.story-summary-list { display: grid; gap: 8px; margin-top: 12px; }
.story-summary-list label { min-height: 27px; display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 11px; }
.story-summary-list input { accent-color: var(--black); }
.story-summary-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 14px; }
.story-write-note { padding-top: 10px; border-top: 1px solid var(--line); }
.story-preview-supplement { display: grid; gap: 8px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line); }
.story-preview-supplement label { color: var(--text); font-size: 11px; font-weight: 620; }
.story-preview-supplement textarea { min-height: 76px; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 8px; outline: 0; resize: vertical; color: var(--text); background: #fff; font: inherit; font-size: 11px; line-height: 1.6; }
.story-preview-supplement textarea:focus { border-color: #9eb2d5; }
.story-preview-supplement button { justify-self: start; }
.story-draft-notice { display: grid; gap: 4px; margin-top: 14px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--text-2); }
.story-draft-notice strong { font-size: 11px; }
.story-draft-notice span { color: var(--muted); font-size: 10px; }
.story-scope-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.story-scope-toolbar > div { min-width: 0; display: grid; gap: 4px; }
.story-scope-toolbar strong { color: var(--text); font-size: 12px; }
.story-scope-toolbar span { color: var(--muted); font-size: 10px; line-height: 1.5; }
.story-scope-toolbar button { flex: 0 0 auto; }
.story-scope-toolbar button:disabled { opacity: .55; cursor: wait; }
.story-scope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; margin: 10px 0 13px; padding: 0 0 13px; border-bottom: 1px solid var(--line); }
.story-scope-grid label { display: grid; gap: 7px; }
.story-scope-grid label > span { color: var(--text); font-size: 11px; font-weight: 620; }
.story-scope-grid label > span em { margin-left: 4px; color: var(--muted); font-size: 9px; font-style: normal; font-weight: 500; }
@media (max-width: 900px) { .story-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .story-scope-toolbar { align-items: flex-start; } .story-scope-grid { grid-template-columns: 1fr; } }

/* Prototype map */
.map-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(18, 21, 27, .18); }
.prototype-map { position: fixed; inset: 0 0 0 auto; z-index: 90; width: min(390px, 92vw); display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--surface); box-shadow: -16px 0 36px rgba(21, 25, 31, .1); }
.prototype-map header { min-height: 72px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid var(--line); }
.prototype-map header > div { min-width: 0; display: grid; gap: 4px; }
.prototype-map header small { color: var(--blue); font-size: 9px; }
.prototype-map header strong { font-size: 15px; }
.prototype-map header button { margin-left: auto; }
.prototype-map > p { margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.6; }
#prototypeMapList { min-height: 0; overflow: auto; padding: 8px 10px 24px; }
.map-coverage { margin: 6px 8px 2px; padding: 13px 2px 15px; border-bottom: 1px solid var(--line); }
.map-coverage strong { display: block; color: var(--text); font-size: 12px; }
.map-coverage span { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.6; }
.map-group-title { padding: 14px 9px 6px; color: var(--muted); font-size: 9px; font-weight: 650; }
.map-link { width: 100%; min-height: 42px; display: flex; align-items: center; gap: 9px; padding: 0 9px; border-radius: 8px; color: var(--text-2); font-size: 11px; text-align: left; }
.map-link:hover { background: var(--surface-soft); color: var(--text); }
.map-link span { margin-left: auto; color: var(--muted); font-size: 9px; }

/* Modal and popover */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 22px; background: rgba(18, 21, 27, .32); }
.modal { width: min(580px, 96vw); max-height: min(760px, calc(100vh - 44px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 22px 56px rgba(18, 22, 29, .16); overflow: hidden; }
.modal.wide { width: min(760px, 96vw); }
.modal[data-type="story-start"] { width: min(980px, 96vw); max-height: calc(100vh - 32px); }
.modal[data-type="story-start"] .modal-body { padding: 16px 20px; }
.modal[data-type="story-start"] > header { min-height: 60px; }
.modal[data-type="story-start"] > footer { min-height: 54px; }
.modal.compact { width: min(440px, 96vw); }
.modal > header { min-height: 68px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.modal > header > div { display: grid; gap: 4px; }
.modal > header small { color: var(--blue); font-size: 9px; }
.modal > header h2 { margin: 0; font-size: 16px; }
.modal > header button { margin-left: auto; }
.modal-body { min-height: 0; overflow: auto; padding: 20px; }
.modal > footer { min-height: 58px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 0 20px; border-top: 1px solid var(--line); }
.modal-copy { margin: 0; color: var(--text-2); font-size: 11px; line-height: 1.75; }
.modal-field { display: grid; gap: 7px; margin-top: 16px; }
.modal-field:first-child { margin-top: 0; }
.modal-field label { font-size: 11px; font-weight: 650; }
.modal-field small { color: var(--muted); font-size: 10px; }
.modal-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; }
.modal-choice { min-height: 70px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; text-align: left; }
.modal-choice:hover, .modal-choice.active { border-color: #abc2f6; background: var(--blue-soft); }
.modal-choice strong { display: block; font-size: 11px; }
.modal-choice span { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.5; }

.cover-picker-modal { width: min(940px, calc(100vw - 48px)); }
.cover-picker-modal .modal-body { padding: 18px 22px 22px; background: #fbfbfc; }
.cover-picker-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid var(--line);
}
.cover-picker-summary img { width: 44px; height: 66px; border-radius: 6px; object-fit: cover; box-shadow: 0 5px 12px rgba(23, 29, 37, .12); }
.cover-picker-summary div { min-width: 0; display: grid; gap: 4px; }
.cover-picker-summary strong { font-size: 13px; }
.cover-picker-summary span { color: var(--muted); font-size: 11px; line-height: 1.6; }
.cover-picker-notice {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #d9e2ee;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.6;
}
.cover-picker-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px 10px; }
.cover-picker-option { min-width: 0; display: grid; gap: 7px; padding: 0; color: var(--text-2); text-align: left; }
.cover-picker-image { position: relative; aspect-ratio: 2 / 3; overflow: hidden; border: 1px solid #dfe2e6; border-radius: 8px; background: var(--surface-soft); box-shadow: 0 6px 14px rgba(24, 29, 36, .08); transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease; }
.cover-picker-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cover-picker-option:hover .cover-picker-image { border-color: #aebfd7; box-shadow: 0 8px 18px rgba(27, 42, 61, .13); transform: translateY(-1px); }
.cover-picker-option:focus-visible { outline: none; }
.cover-picker-option:focus-visible .cover-picker-image { outline: 2px solid var(--blue); outline-offset: 2px; }
.cover-picker-option.selected .cover-picker-image { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue), 0 8px 18px rgba(43, 93, 162, .14); }
.cover-picker-image i { position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; display: none; place-items: center; border-radius: 50%; background: var(--blue); box-shadow: 0 2px 8px rgba(20, 50, 92, .2); }
.cover-picker-image i::after { content: ''; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.cover-picker-option.selected .cover-picker-image i { display: grid; }
.cover-picker-option strong { min-width: 0; overflow: hidden; font-size: 11px; font-weight: 600; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.cover-picker-option.selected strong { color: var(--blue-ink); }
.cover-picker-selection { margin: 16px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.cover-picker-auto-button { margin-right: auto; }
.cover-picker-auto-button:disabled { cursor: default; opacity: .45; }

@media (max-width: 900px) {
  .cover-picker-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cover-picker-modal { width: min(96vw, 520px); }
  .cover-picker-modal .modal-body { padding: 16px; }
  .cover-picker-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.modal-list { display: grid; border-top: 1px solid var(--line); }
.modal-list-row { min-height: 52px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
.modal-list-row > div { min-width: 0; flex: 1; }
.modal-list-row strong { display: block; font-size: 11px; }
.modal-list-row span { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.modal-list-row button { color: var(--blue); font-size: 10px; }

.global-search-field { width: 100%; }
.search-results-empty {
  display: grid;
  min-height: 150px;
  margin-top: 12px;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}
.global-search-results { margin-top: 12px; }
button.global-search-result {
  width: 100%;
  padding: 11px 2px;
  color: inherit;
  text-align: left;
}
button.global-search-result:hover { background: var(--soft-blue); }
.global-search-result mark {
  border-radius: 2px;
  background: #fff0a8;
  color: var(--text);
}
.global-search-result .search-result-open {
  flex: none;
  margin: 0;
  color: var(--blue);
}
.modal-row-actions { display: flex; align-items: center; gap: 10px; }
.modal-list-row > .modal-row-actions { flex: 0 0 auto; margin-left: auto; }
.modal-row-actions button:last-child { color: var(--text-2); }
.find-scope { display: grid; gap: 9px; margin-top: 16px; }
.find-scope > span { color: var(--muted); font-size: 9px; }
.find-navigation { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.find-navigation > span { margin-right: auto; color: var(--muted); font-size: 9px; }
.generation-progress { margin-top: 16px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.generation-progress-head { display: flex; align-items: center; gap: 9px; color: var(--text-2); font-size: 10px; }
.generation-progress-head i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px var(--blue-soft); }
.generation-progress-head button { margin-left: auto; color: var(--danger); font-size: 10px; }
.generation-progress-bar { height: 3px; margin-top: 12px; overflow: hidden; background: #eceff3; }
.generation-progress-bar i { display: block; width: 58%; height: 100%; background: var(--blue); animation: prototype-generation 900ms ease-in-out infinite alternate; }
@keyframes prototype-generation { to { width: 86%; } }
.drop-zone { width: 100%; min-height: 150px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed #cbd2dc; border-radius: 8px; color: var(--muted); text-align: center; }
.drop-zone .icon { width: 25px; height: 25px; }
.drop-zone strong { color: var(--text-2); font-size: 12px; }
.drop-zone span { font-size: 10px; }
.compact-drop-zone { min-height: 118px; margin-top: 16px; }
.import-purpose-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.import-purpose-tabs button { min-width: 0; display: grid; gap: 4px; padding: 0 0 13px; color: var(--muted); text-align: left; }
.import-purpose-tabs button + button { padding-left: 20px; border-left: 1px solid var(--line); }
.import-purpose-tabs strong { font-size: 12px; font-weight: 650; }
.import-purpose-tabs span { font-size: 10px; }
.import-purpose-tabs button.active { color: var(--text); }
.import-purpose-tabs button.active strong { color: var(--blue); }
.import-mode-panel { padding-top: 18px; }
.import-preview { min-height: 42px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 7px; color: var(--text-2); font-size: 11px; line-height: 1.5; }
.reference-library { margin-top: 22px; border-top: 1px solid var(--line); }
.reference-library > header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0 9px; }
.reference-library > header strong { font-size: 12px; }
.reference-library > header span { color: var(--muted); font-size: 10px; }
.reference-report-list { display: grid; }
.reference-report-row { min-width: 0; min-height: 58px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); text-align: left; }
.reference-report-row > span { min-width: 0; flex: 1; }
.reference-report-row strong, .reference-report-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-report-row strong { color: var(--text); font-size: 11px; }
.reference-report-row small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.reference-report-row .icon { width: 16px; height: 16px; color: var(--muted); }
.reference-report-row:hover strong { color: var(--blue); }
.reference-report-empty { min-height: 88px; display: grid; place-items: center; align-content: center; gap: 5px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; text-align: center; }
.reference-report-empty strong { color: var(--text-2); font-size: 11px; }
.reference-generating { min-height: 150px; display: grid; place-items: center; align-content: center; gap: 7px; margin-top: 20px; border-top: 1px solid var(--line); text-align: center; }
.reference-generating i { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px var(--blue-soft); animation: reference-pulse 900ms ease-in-out infinite alternate; }
@keyframes reference-pulse { to { opacity: .45; transform: scale(.8); } }
.reference-generating strong { margin-top: 8px; font-size: 12px; }
.reference-generating span { color: var(--muted); font-size: 10px; }
.reference-report-toolbar { padding: 14px 0 4px; }
.reference-report-toolbar button { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 10px; }
.reference-report-toolbar .icon { width: 15px; height: 15px; }
.reference-report-document { max-width: 680px; margin: 0 auto; padding: 20px 0 30px; }
.reference-report-document > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 18px; }
.reference-report-document > header small { color: var(--blue); font-size: 9px; }
.reference-report-document > header h3 { margin: 6px 0 0; font-size: 22px; }
.reference-report-document > header > span, .reference-report-source { color: var(--muted); font-size: 10px; }
.reference-report-source { margin: 0; padding: 12px 0 18px; border-top: 1px solid var(--line); line-height: 1.65; }
.reference-report-section { padding: 20px 0; border-top: 1px solid var(--line); }
.reference-report-section h4 { margin: 0 0 10px; font-size: 13px; }
.reference-report-section p, .reference-report-section li { color: var(--text-2); font-size: 12px; line-height: 1.85; }
.reference-report-section p { margin: 0; }
.reference-report-section ul { display: grid; gap: 7px; margin: 0; padding-left: 20px; }
.reference-report-section .muted { color: var(--muted); }
.reference-delete-copy { margin-right: auto; color: var(--danger); font-size: 10px; }
.danger-text-button { margin-right: auto; color: var(--danger); }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metric-grid div { min-height: 94px; display: grid; place-items: center; align-content: center; gap: 5px; border-right: 1px solid var(--line); }
.metric-grid div:last-child { border-right: 0; }
.metric-grid strong { font-size: 22px; }
.metric-grid span { color: var(--muted); font-size: 9px; }
.modal.wide.stats-modal { width: min(1040px, calc(100vw - 48px)); max-height: min(900px, calc(100vh - 44px)); }
.stats-modal .modal-body { padding-top: 0; }
.stats-loading { min-height: 360px; display: grid; place-items: center; color: var(--muted); font-size: 12px; }
.stats-dashboard { min-width: 0; }
.stats-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.stats-metrics > div { min-width: 0; padding: 22px 20px 22px 0; }
.stats-metrics > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.stats-metrics span { display: block; color: var(--muted); font-size: 10px; }
.stats-metrics strong { display: block; margin-top: 7px; overflow: hidden; color: var(--text); font-size: 24px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.stats-section { min-width: 0; padding: 22px 0; }
.stats-section > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.stats-section > header h3 { margin: 0; font-size: 13px; }
.stats-section > header p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.stats-trend { border-bottom: 1px solid var(--line); }
.stats-section canvas { width: 100%; display: block; }
.stats-range { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-soft); }
.stats-range button { min-width: 50px; height: 27px; border-radius: 5px; color: var(--muted); font-size: 10px; }
.stats-range button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(17, 19, 24, .08); }
.stats-lower { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 28px; }
.stats-lower > .stats-section + .stats-section { padding-left: 28px; border-left: 1px solid var(--line); }
.stats-project-list { display: grid; }
.stats-project-row { min-width: 0; display: grid; grid-template-columns: minmax(112px, 1fr) minmax(90px, 1.25fr) 64px; align-items: center; gap: 12px; min-height: 38px; border-bottom: 1px solid var(--line); }
.stats-project-row > div { min-width: 0; }
.stats-project-row strong { display: block; overflow: hidden; font-size: 10px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.stats-project-row span { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.stats-project-row progress { width: 100%; height: 5px; overflow: hidden; border: 0; border-radius: 999px; background: #e8ebef; appearance: none; }
.stats-project-row progress::-webkit-progress-bar { border-radius: 999px; background: #e8ebef; }
.stats-project-row progress::-webkit-progress-value { border-radius: 999px; background: #2563eb; }
.stats-project-row progress::-moz-progress-bar { border-radius: 999px; background: #2563eb; }
.stats-project-row em { color: var(--text-2); font-size: 10px; font-style: normal; text-align: right; }
.stats-empty { margin: 30px 0; color: var(--muted); font-size: 11px; text-align: center; }
.story-start-copy { margin-bottom: 12px; }
.story-start-copy h3 { margin: 0; font-size: 18px; }
.story-start-copy p { margin: 5px 0 0; color: var(--text-2); font-size: 11px; line-height: 1.6; }
.story-start-input { min-height: 92px; }
.warning-note { padding: 12px 13px; border-left: 2px solid #d9964a; background: #fffaf3; color: #6d5941; font-size: 10px; line-height: 1.65; }
.popover { position: fixed; z-index: 70; width: 182px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 12px 28px rgba(20, 24, 30, .12); }
.modal-backdrop:not([hidden]) + .popover { z-index: 120; }
.popover button { width: 100%; min-height: 36px; display: flex; align-items: center; padding: 0 9px; border-radius: 6px; color: var(--text-2); font-size: 10px; text-align: left; }
.popover button:hover { background: var(--surface-soft); color: var(--text); }
.popover.find-replace-popover { width: 332px; padding: 14px; }
.find-dropdown-form { display: grid; gap: 12px; }
.find-dropdown-form label { display: grid; gap: 6px; color: var(--muted); font-size: 10px; }
.find-dropdown-form .field-input { height: 36px; }
.find-dropdown-nav { display: flex; align-items: center; gap: 10px; }
.find-dropdown-nav span { min-width: 0; flex: 1; color: var(--muted); font-size: 10px; }
.find-dropdown-nav button { width: auto; min-height: 28px; padding: 0; color: var(--blue); }
.find-dropdown-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 2px; }
.find-dropdown-actions button { width: auto; min-height: 32px; padding: 0 12px; }
.writing-findbar { position: sticky; top: 0; z-index: 12; width: min(880px, calc(100% - 70px)); min-height: 96px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 8px 12px; margin: 0 auto; padding: 10px 0 11px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.98); }
.writing-findbar label { display: grid; gap: 4px; color: var(--muted); font-size: 9px; }
.writing-findbar .field-input { height: 32px; }
.writing-findbar-nav, .writing-findbar-actions { height: 32px; display: flex; align-items: center; gap: 8px; }
.writing-findbar-actions { justify-self: end; }
.writing-findbar-nav > span { max-width: 86px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.writing-findbar-nav button { color: var(--blue); font-size: 10px; white-space: nowrap; }
.writing-findbar-actions .soft-button, .writing-findbar-actions .primary-button { min-height: 30px; padding: 0 10px; white-space: nowrap; }
.writing-findbar-actions .icon-button { width: 30px; height: 30px; }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 140; transform: translate(-50%, 10px); padding: 10px 14px; border-radius: 8px; background: rgba(24, 27, 32, .95); color: #fff; font-size: 10px; opacity: 0; pointer-events: none; transition: opacity 150ms ease, transform 150ms ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1240px) {
  :root { --rail: 94px; --context: 230px; --assistant: 340px; }
  .workspace-shell { grid-template-columns: var(--rail) var(--context) minmax(430px, 1fr) var(--assistant); }
  .assistant-panel { position: static; inset: auto; z-index: auto; width: auto; box-shadow: none; }
  .workspace-shell.assistant-collapsed .assistant-panel { display: none; }
  .document, .writing-document { width: calc(100% - 48px); }
  .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-card { grid-template-columns: 92px minmax(0, 1fr); }
  .book-cover { width: 92px; height: 138px; }
}

@media (max-width: 1400px) {
  .toolbar-select-wrap > span { display: none; }
}

@media (max-width: 1080px) {
  .workspace-shell { grid-template-columns: var(--rail) var(--context) minmax(430px, 1fr); }
  .assistant-panel { position: absolute; inset: 0 0 0 auto; z-index: 22; width: var(--assistant); box-shadow: -14px 0 28px rgba(22, 26, 33, .08); }
  .workspace-shell.assistant-collapsed .assistant-panel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .shelf-page, .workspace-page { min-width: 760px; }
  .prototype-map-button, .compact-action { padding: 0 7px; }
  .workspace-shell, .workspace-shell.assistant-collapsed { grid-template-columns: 88px 214px minmax(440px, 1fr); }
  .rail-button { padding: 0 8px; gap: 6px; }
  .shelf-main { padding-left: 26px; padding-right: 26px; }
}

/* One-click story engine: same workspace, focused creation state. */
.workspace-shell.story-engine-mode { grid-template-columns: minmax(420px, 1fr) clamp(560px, 44vw, 720px); }
.workspace-shell.story-engine-mode .module-rail { display: none; }
.workspace-shell.story-engine-mode .context-column { display: none; }
.workspace-shell.story-engine-mode .assistant-panel { grid-column: 2; }
.workspace-shell.story-engine-mode .assistant-composer { display: grid; }
.workspace-shell.story-engine-mode .assistant-panel { grid-template-rows: 56px minmax(0, 1fr) auto; }
.workspace-shell.story-engine-mode .assistant-tabs [data-assistant-tab="persona"] { display: none; }
.workspace-shell.story-engine-mode .main-status { display: none; }
.workspace-shell.story-engine-mode .main-column { grid-column: 1; }
.workspace-page.story-engine-active .workspace-topbar .compact-action,
.workspace-page.story-engine-active .workspace-topbar .save-state { display: none; }
.story-engine-document { padding-top: 58px !important; }
.story-canvas-list { display: grid; margin-top: 34px; border-top: 1px solid var(--line); }
.story-canvas-list > div { min-height: 72px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.story-canvas-list > div > span { color: #a3aab4; font-size: 11px; }
.story-canvas-list p { display: grid; gap: 5px; margin: 0; }
.story-canvas-list small { color: var(--muted); font-size: 10px; }
.story-canvas-list strong { color: var(--text); font-size: 13px; font-weight: 580; line-height: 1.6; }
.story-canvas-empty { padding: 20px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.story-canvas-preview { display: grid; gap: 5px; margin-top: 24px; }
.story-canvas-preview span { color: var(--muted); font-size: 10px; }
.story-canvas-preview strong { font-size: 13px; font-weight: 600; }
.story-confirmed-document { display: grid; margin-top: 30px; }
.story-confirmed-section { padding: 22px 0; border-top: 1px solid var(--line); }
.story-confirmed-section > small { display: block; margin-bottom: 7px; color: var(--muted); font-size: 10px; }
.story-confirmed-section h2 { margin: 0; color: var(--text); font-size: 19px; line-height: 1.45; }
.story-confirmed-section > p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.9; white-space: pre-line; }
.story-confirmed-list { display: grid; }
.story-confirmed-list > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.story-confirmed-list strong { color: var(--text); font-size: 12px; }
.story-confirmed-list span { color: var(--text-2); font-size: 11px; line-height: 1.7; }
.story-context-note { padding: 20px 16px; }
.story-context-note strong { font-size: 11px; }
.story-context-note p { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.6; }

.story-stage-choice { display: grid; gap: 13px; padding: 10px 0 24px; }
.story-stage-choice > small { color: var(--blue-ink); font-size: 10px; font-weight: 650; }
.story-stage-choice > h3 { margin: 0; color: var(--text); font-size: 19px; line-height: 1.45; }
.story-stage-copy { margin: 0; color: var(--text-2); font-size: 11px; line-height: 1.7; }
.story-stage-primary { justify-self: start; margin-top: 6px; }
.story-module-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.story-module-item { display: grid; gap: 7px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.story-module-item > div { display: flex; align-items: baseline; gap: 9px; }
.story-module-item small { color: var(--muted); font-size: 9px; }
.story-module-item strong { color: var(--text); font-size: 12px; }
.story-module-item p { margin: 0; color: var(--text-2); font-size: 10px; line-height: 1.65; }
.story-chapter-plan-list { display: grid; border-top: 1px solid var(--line); }
.story-chapter-plan-list details { border-bottom: 1px solid var(--line); }
.story-chapter-plan-list summary { min-height: 43px; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.story-chapter-plan-list summary span { color: var(--muted); font-size: 9px; }
.story-chapter-plan-list summary strong { color: var(--text); font-size: 11px; }
.story-chapter-plan-list p { margin: 0; padding: 0 0 12px 27px; color: var(--text-2); font-size: 10px; line-height: 1.7; }
.story-title-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.story-title-cards button { min-height: 92px; display: grid; align-content: space-between; gap: 12px; padding: 13px; text-align: left; }
.story-title-cards button strong { color: var(--text); font-size: 12px; line-height: 1.55; }
.story-title-cards button span { color: var(--muted); font-size: 9px; line-height: 1.5; }
.story-title-cards button:hover { border-color: #aeb9ca; background: #fafbfc; }
.story-stage-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-stage-summary span { color: var(--text-2); font-size: 10px; }
.story-stage-summary button { color: var(--blue-ink); font-size: 10px; }
.story-synopsis-options { display: grid; gap: 8px; }
.story-synopsis-option { border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.story-synopsis-option[open] { border-color: #bcc6d4; }
.story-synopsis-option.selected { border-color: #8da6ce; box-shadow: 0 0 0 2px rgba(57, 91, 143, .08); }
.story-synopsis-option summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 13px; cursor: pointer; list-style: none; }
.story-synopsis-option summary::-webkit-details-marker { display: none; }
.story-synopsis-option summary > span { display: grid; gap: 3px; }
.story-synopsis-option summary small { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }
.story-synopsis-option summary small i { padding: 2px 6px; border-radius: 999px; background: #edf3fc; color: var(--blue-ink); font-size: 8px; font-style: normal; font-weight: 650; }
.story-synopsis-option summary strong { color: var(--text); font-size: 12px; line-height: 1.45; }
.story-synopsis-option summary em { flex: 0 0 auto; color: var(--muted); font-size: 9px; font-style: normal; }
.story-synopsis-option summary em b { color: var(--text); font-size: 17px; }
.story-synopsis-option > p { margin: 0; padding: 0 13px 12px; color: var(--text-2); font-size: 11px; line-height: 1.75; white-space: pre-line; }
.story-synopsis-option .story-synopsis-distinction { padding-top: 11px; border-top: 1px solid var(--line); color: var(--blue-ink); font-size: 10px; }
.story-synopsis-edit-label { display: block; padding: 2px 13px 7px; color: var(--muted); font-size: 9px; }
.story-synopsis-editor { width: calc(100% - 26px); min-height: 190px; margin: 0 13px 12px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; outline: 0; resize: vertical; background: #fafbfc; color: var(--text-2); font: inherit; font-size: 11px; line-height: 1.75; }
.story-synopsis-editor:focus { border-color: #9eb2d5; background: #fff; }
.story-synopsis-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 13px 13px; }
.story-synopsis-actions .primary-button, .story-synopsis-actions .soft-button { min-height: 32px; padding: 0 12px; font-size: 10px; }
.story-synopsis-actions .soft-button { border-radius: 999px; background: #fff; }
.story-synopsis-actions .text-button { min-height: 32px; margin-left: auto; padding: 0 3px; color: var(--text-2); font-size: 10px; }
.story-synopsis-actions .text-button:hover { color: var(--text); }
.story-replace-all { justify-self: center; min-height: 32px; padding: 0 8px; color: var(--muted); font-size: 10px; }
.story-replace-all:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.story-step-head { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; }
.story-step-head button { min-height: 28px; padding: 0 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--text-2); font-size: 10px; }
.story-step-head button:hover { border-color: var(--line-strong); color: var(--text); }
.story-step-head span { color: var(--muted); font-size: 9px; }
.story-selected-title { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; margin-top: 15px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.story-selected-title span { grid-column: 1; color: var(--muted); font-size: 10px; }
.story-selected-title strong { grid-column: 1; color: var(--text); font-size: 13px; }
.story-selected-title button { grid-column: 2; grid-row: 1 / span 2; color: var(--blue-ink); font-size: 10px; }

@media (max-width: 1080px) {
  .workspace-shell.story-engine-mode { grid-template-columns: minmax(440px, 1fr); }
  .workspace-shell.story-engine-mode .assistant-panel { grid-column: auto; width: min(560px, calc(100vw - 80px)); }
  .workspace-shell.story-engine-mode .main-column { grid-column: 1; }
}

/* Unified document flow inside a book */
#mainContent .document,
#mainContent .document.narrow,
#mainContent .document.wide {
  width: min(750px, calc(100% - 70px));
  padding: 44px 0 120px;
}

#mainContent .document h1 {
  font-size: 27px;
  line-height: 1.4;
}

#mainContent .document-lead {
  max-width: 650px;
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.75;
}

#mainContent .section-rule {
  margin-top: 27px;
}

#mainContent .form-section {
  padding: 24px 0;
}

#mainContent .field-head {
  align-items: center;
  margin-bottom: 11px;
}

#mainContent .field-head label,
#mainContent .field-head strong {
  font-size: 13px;
  font-weight: 680;
}

#mainContent .field-input,
#mainContent .field-textarea {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  color: #20242a;
  font-size: 14px;
  line-height: 2;
}

#mainContent .field-input {
  height: 38px;
}

#mainContent .field-textarea {
  min-height: 54px;
  field-sizing: content;
  overflow: hidden;
  resize: none;
}

#mainContent .field-textarea.tall {
  min-height: 250px;
}

#mainContent .field-input:focus,
#mainContent .field-textarea:focus {
  border: 0;
  background: transparent;
  box-shadow: inset 0 -1px 0 #8eaff9;
}

#mainContent .selection-row {
  gap: 6px;
  padding-top: 2px;
}

#mainContent .character-header {
  display: block;
}

#mainContent .character-avatar {
  display: none;
}

#mainContent .character-title h1 {
  margin-top: 5px;
}

#mainContent .character-grid {
  display: block;
  margin-top: 24px;
}

#mainContent .character-grid .form-section {
  border-bottom: 1px solid var(--line) !important;
}

#mainContent .character-grid .form-section:last-child {
  border-bottom: 0 !important;
}

#mainContent .character-document { width: min(800px, calc(100% - 62px)); }
#mainContent .character-document .character-header { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
#mainContent .character-document .character-title small { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; }
#mainContent .character-document .character-name-input { width: 100%; margin: 0; }
#mainContent .character-basics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding: 20px 0 28px; border-bottom: 0; }
#mainContent .character-basics-grid label { display: grid; gap: 7px; }
#mainContent .character-basics-grid label > span { color: var(--muted); font-size: 11px; }
#mainContent .character-basics-grid .field-input { height: 36px; padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
#mainContent .character-fields .form-section { padding: 20px 0; }
#mainContent .character-fields .field-textarea { min-height: 76px; }

@media (max-width: 760px) {
  #mainContent .character-basics-grid { grid-template-columns: 1fr; gap: 14px; }
}

#mainContent .review-layout {
  display: block;
  margin-top: 24px;
}

#mainContent .review-score {
  position: static;
  padding: 8px 0 28px;
  border-bottom: 1px solid var(--line);
}

#mainContent .review-score p {
  max-width: 580px;
}

#mainContent .review-bars {
  max-width: 520px;
}

#mainContent .review-layout > div:last-child {
  padding-top: 4px;
}

.toolbar-select-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 9px;
}

.toolbar-select {
  width: auto;
  height: 32px;
  padding: 0 24px 0 8px;
  border-color: var(--line);
  background: var(--surface);
  font-size: 10px;
}

.selected-text-context {
  margin-top: 12px;
  padding: 10px 11px;
  border-left: 2px solid #7da4fb;
  background: #f8faff;
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.65;
}

.selected-text-context header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
  color: var(--blue-ink);
  font-size: 9px;
  font-weight: 650;
}

.selected-text-context button {
  padding: 0;
  color: var(--muted);
  font-size: 9px;
}

.writing-paper p {
  padding: 0;
  border-radius: 2px;
  cursor: text;
}

.selection-toolbar {
  position: fixed;
  z-index: 80;
  display: flex;
  align-items: center;
  padding: 3px;
  border-radius: 8px;
  background: #191b1f;
  box-shadow: 0 8px 24px rgba(20, 24, 32, .18);
  transform: translate(-50%, -100%);
}

.selection-toolbar.below { transform: translate(-50%, 0); }
.selection-toolbar button { min-height: 28px; padding: 0 10px; border-radius: 5px; color: #fff; font-size: 11px; }
.selection-toolbar button:hover { background: rgba(255, 255, 255, .12); }
.selection-toolbar button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.assistant-selection-summary {
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
}

.assistant-selection-summary header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 9px; color: var(--blue-ink); }
.assistant-selection-summary header strong { color: var(--muted); font-size: 10px; font-weight: 500; }
.assistant-selection-summary header button { color: var(--blue); font-size: 10px; }
.assistant-selection-summary p { max-height: 82px; margin: 9px 0 10px; overflow: auto; color: var(--text-2); font-size: 11px; line-height: 1.65; white-space: pre-wrap; }
.assistant-selection-actions { display: flex; align-items: center; gap: 6px; }
.assistant-selection-actions button { min-height: 28px; padding: 0 10px; border-radius: 6px; background: #eef0f3; color: var(--text-2); font-size: 10px; }
.assistant-selection-actions button:hover { background: #e4e8ed; color: var(--text); }

.assistant-persona-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: 10px;
}

.assistant-persona-summary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--blue-ink);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-persona-summary button {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--blue);
  font-size: 10px;
}

.persona-panel-head {
  padding: 18px 0 12px;
  border-bottom: 1px solid var(--line);
}

.persona-panel-head h2 {
  margin: 0;
  font-size: 15px;
}

.persona-panel-head p {
  margin: 7px 0 0;
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.65;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3px;
  margin-top: 15px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef0f3;
}

.segmented-control button {
  min-height: 30px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 10px;
}

.segmented-control button.active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(20, 24, 30, .08);
  font-weight: 650;
}

.persona-section {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}

.persona-section > label,
.persona-section > span:first-child {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
}

.persona-select {
  width: 100%;
  height: 38px;
  font-size: 10px;
}

.persona-style-summary {
  margin: 9px 0 0;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.65;
}

.persona-style-summary.muted { color: var(--muted); }

.persona-tag-groups { display: grid; gap: 9px; margin-top: 12px; }
.persona-tag-line { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: start; gap: 8px; }
.persona-tag-line > span { padding-top: 3px; color: var(--muted); font-size: 10px; }
.persona-tag-line > div { display: flex; flex-wrap: wrap; gap: 5px; }
.persona-tag-line i { padding: 3px 7px; border-radius: 999px; background: #edf0f3; color: #59626f; font-size: 10px; font-style: normal; line-height: 1.45; }
.persona-tag-line--fit i { background: #eef5ff; color: #3e65a8; }
.persona-tag-line em { padding-top: 3px; color: var(--muted); font-size: 10px; font-style: normal; }

.persona-compact-actions {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.persona-compact-actions button {
  color: var(--blue);
  font-size: 11px;
}

.persona-compact-actions button:hover {
  color: var(--blue-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.persona-sample-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.persona-sample-label > label { font-size: 11px; font-weight: 650; }
.persona-sample-upload { display: inline-flex; align-items: center; gap: 6px; color: var(--blue); }
.persona-sample-upload .icon { width: 14px; height: 14px; }
.persona-sample-status { margin: 7px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }

.persona-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 9px;
}

.persona-tags span {
  padding: 4px 7px;
  border-radius: 999px;
  background: #eef1f4;
  color: #626c79;
  font-size: 9px;
}

.fusion-role-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 0;
}

.fusion-role-row > span {
  color: var(--text-2);
  font-size: 10px;
  font-weight: 650;
}
.fusion-role-block { padding: 3px 0 8px; border-bottom: 1px solid var(--line); }
.fusion-role-block:last-child { border-bottom: 0; }
.fusion-tag-summary { display: flex; flex-wrap: wrap; gap: 5px; padding-left: 52px; }
.fusion-tag-summary i { padding: 3px 6px; border-radius: 999px; background: #eef1f4; color: #626c79; font-size: 9px; font-style: normal; }
.fusion-tag-summary i.fit { background: #eef5ff; color: #3e65a8; }
.fusion-tag-summary em { color: var(--muted); font-size: 9px; font-style: normal; }

.permission-list {
  display: grid;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.permission-list div {
  min-height: 38px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
}

.permission-list span { color: var(--muted); }
.permission-list strong { color: var(--text-2); font-size: 10px; }

.reference-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.reference-actions-row button {
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--blue);
  font-size: 10px;
}

.reference-actions-row button:hover {
  color: var(--blue-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reference-setting-row {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: 10px;
}

.reference-setting-row strong { color: var(--text); font-size: 10px; }
.reference-setting-row .selection-row { justify-content: flex-end; }
.reference-setting-row .selection-pill { min-height: 27px; padding: 0 7px; font-size: 9px; }
.reference-disclosure-body .reference-setting-row { margin-left: -74px; }

.diff-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.diff-preview section {
  min-height: 260px;
  padding: 15px;
  background: var(--surface);
}

.diff-preview section + section { border-left: 1px solid var(--line); }
.diff-preview h3 { margin: 0 0 11px; color: var(--muted); font-size: 10px; }
.diff-preview p { margin: 0; color: var(--text-2); font-size: 11px; line-height: 1.9; }
.diff-preview mark { background: #e5f5e9; color: inherit; }
.diff-preview del { background: #fff0f0; color: #8a4a4a; text-decoration: none; }
.transform-preview textarea { min-height: 300px; padding: 0; border: 0; background: transparent; resize: vertical; }

/* Transformation is a workbench, so its controls and results share the viewport. */
.modal.transform-modal {
  width: min(1180px, calc(100vw - 48px));
  height: min(780px, calc(100vh - 32px));
  max-height: calc(100vh - 32px);
}

.transform-modal .modal-body {
  overflow: hidden;
  padding: 16px;
}

.transform-dialog-grid {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px;
}

.transform-controls {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.transform-controls .field-pair + .field-pair { margin-top: 12px; }
.transform-controls .modal-field { margin-top: 12px; }
.transform-controls .transform-keep-field textarea { min-height: 96px; resize: vertical; }
.transform-controls .warning-note { margin-top: 12px; }
.transform-output { min-width: 0; min-height: 0; }

.transform-modal .transform-preview {
  height: 100%;
  min-height: 0;
}

.transform-modal .transform-preview section {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.transform-modal .transform-preview textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: auto;
  resize: none;
}

@media (max-width: 900px) {
  .modal.transform-modal { width: min(760px, 96vw); height: auto; }
  .transform-modal .modal-body { overflow: auto; }
  .transform-dialog-grid { height: auto; grid-template-columns: 1fr; }
  .transform-controls { overflow: visible; padding-right: 0; }
  .transform-output { height: 480px; }
}

@media (max-width: 720px) {
  .transform-dialog-grid { gap: 12px; }
  .transform-output { height: auto; }
  .transform-modal .transform-preview { height: auto; }
  .transform-modal .transform-preview section { min-height: 280px; }
}

.popover .popover-divider {
  height: 1px;
  margin: 5px 3px;
  background: var(--line);
}

#mainContent .outline-section,
#mainContent .chapter-outline-row,
#mainContent .review-issue {
  padding-top: 24px;
  padding-bottom: 24px;
}

/* Chinese UI stays light, but no essential text drops below a comfortable size. */
.ghost-button,
.primary-button,
.soft-button,
.danger-button { font-size: 13px; }
.text-button { font-size: 12px; }
.story-entry-copy small,
.book-kind,
.save-state,
.book-summary small,
.book-summary span,
.context-section-head span,
.context-section-head button,
.context-item-number,
.context-item small,
.context-item em,
.context-footer,
.main-toolbar-meta,
.main-status,
.kicker,
.field-head span,
.field-hint,
.field-pair label,
.number-field > span,
.writing-title-row p,
.chapter-outline-row > span:first-child,
.chapter-outline-row em,
.character-title small,
.character-role,
.assistant-context,
.assistant-context strong,
.assistant-intro p,
.chat-message.ai strong,
.reference-disclosure summary > span,
.reference-disclosure summary > strong,
.reference-disclosure-body p,
.character-context-card small,
.story-question-card small,
.story-summary-card small,
.character-context-card p,
.story-question-card p,
.story-summary-card p,
.modal > header small,
.modal-field small,
.modal-choice span,
.modal-list-row span,
.modal-list-row button,
.drop-zone span,
.warning-note,
.popover button,
.toast,
.persona-tags span,
.fusion-role-row > span,
.permission-list,
.permission-list strong,
.reference-actions-row button,
.reference-setting-row,
.reference-setting-row strong,
.diff-preview h3 { font-size: 11px; }

.story-entry-copy span,
.library-heading p,
.search-field input,
select,
.book-card p,
.book-meta,
.workspace-project-name,
.rail-button,
.rail-bottom-button,
.book-summary p,
.context-section-head strong,
.context-item strong,
.main-toolbar-title,
.document-lead,
.field-head label,
.field-head strong,
.field-input,
.field-textarea,
.selection-pill,
.outline-section p,
.chapter-outline-row strong,
.chapter-outline-row p,
.review-score p,
.review-issue p,
.assistant-tab,
.assistant-action,
.chat-message,
.assistant-composer textarea,
.chapter-outline-inline-editor,
.chapter-text-reference-body p,
.character-context-card h3,
.story-question-card h3,
.story-summary-card h3,
.story-option,
.story-summary-list label,
.modal-copy,
.modal-field label,
.modal-choice strong,
.modal-list-row strong,
.drop-zone strong,
.diff-preview p { font-size: 12px; }

.book-card h2 { font-size: 18px; }
.book-summary strong { font-size: 16px; }
.document h1 { font-size: 27px; }
.document-lead { font-size: 13px; }
.writing-title-row h1 { font-size: 28px; }
.writing-paper { font-size: 17px; line-height: 2.02; }
.outline-free-paper,
.related-editor,
.chapter-outline-main-editor { font-size: 15px !important; }
.assistant-intro h2 { font-size: 16px; }
.modal > header h2 { font-size: 18px; }

@media (max-width: 1240px) {
  #mainContent .document,
  #mainContent .document.narrow,
  #mainContent .document.wide {
    width: calc(100% - 48px);
  }
}

@media (max-width: 720px) {
  .modal-backdrop { padding: 12px; }
  .modal { max-height: calc(100vh - 24px); }
  .modal-choice-grid, .diff-preview { grid-template-columns: 1fr; }
  .diff-preview section + section { border-left: 0; border-top: 1px solid var(--line); }
  .modal > footer { min-height: 0; padding: 12px 16px; flex-wrap: wrap; }
  .stats-modal { width: 100%; }
  .stats-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-metrics > div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .stats-metrics > div:nth-child(4) { border-top: 1px solid var(--line); }
  .stats-lower { grid-template-columns: 1fr; gap: 0; }
  .stats-lower > .stats-section + .stats-section { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .stats-project-row { grid-template-columns: minmax(100px, 1fr) 72px; }
  .stats-project-row progress { display: none; }
  .import-purpose-tabs { grid-template-columns: 1fr; }
  .import-purpose-tabs button + button { padding: 13px 0 13px; border-top: 1px solid var(--line); border-left: 0; }
  .reference-library > header, .reference-report-document > header { align-items: flex-start; flex-direction: column; gap: 6px; }
}
.ai-content-decision {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(38, 43, 52, 0.12);
}

.ai-content-decision > span {
  color: var(--muted);
  font-size: 10px;
}

.ai-candidate-choice {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 9px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.ai-candidate-choice:hover {
  border-color: #b9c8e8;
}

.ai-candidate-choice.selected {
  border-color: #9fb8ee;
  background: var(--blue-soft);
}

.ai-candidate-choice input {
  margin-top: 3px;
}

.ai-candidate-choice > div {
  min-width: 0;
}

.ai-candidate-choice > div > strong {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
}

.ai-candidate-content {
  max-height: 240px;
  overflow: auto;
  color: var(--text-2);
  font-size: 11px;
  line-height: 1.75;
}

.ai-candidate-content p {
  margin: 0 0 6px;
}

.ai-candidate-content p:last-child {
  margin-bottom: 0;
}

.ai-content-decision.single .ai-candidate-choice {
  grid-template-columns: minmax(0, 1fr);
  cursor: default;
  background: var(--surface-soft);
}

.ai-content-decision.single .ai-candidate-choice input {
  display: none;
}

/* Global polish system: restrained writing-tool hierarchy, shared across every page. */
body {
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

::selection { background: #d9e8ff; color: var(--text); }

.topbar {
  gap: 12px;
  padding: 0 20px;
  border-bottom: 0;
  background: rgba(255, 255, 255, .98);
}

.brand { gap: 10px; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand strong { color: var(--text); font-size: 15px; font-weight: 680; }
.workspace-project-name { font-size: 13px; }
.save-state { font-size: 11px; }

.ghost-button,
.primary-button,
.soft-button,
.danger-button,
.icon-button {
  min-height: 36px;
}

.ghost-button,
.soft-button,
.danger-button { font-size: 13px; }
.primary-button { padding: 0 17px; font-size: 13px; font-weight: 650; }
.ghost-button { padding: 0 11px; }
.soft-button { padding: 0 13px; }
.icon-button { width: 36px; }

.ghost-button:hover,
.icon-button:hover {
  border-color: transparent;
  background: #f1f3f5;
}

button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[contenteditable]:focus-visible {
  outline-color: var(--focus-ring);
}

.shelf-main { padding-top: 32px; }
.story-entry {
  min-height: 120px;
  border-color: rgba(216, 221, 227, .86);
  box-shadow: 0 8px 26px rgba(35, 40, 48, .045);
}
.story-entry:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(35, 40, 48, .075); }
.story-entry-copy small { font-size: 11px; }
.story-entry-copy strong { font-size: 21px; font-weight: 680; }
.story-entry-copy span { font-size: 13px; }
.shelf-stats { border-color: rgba(217, 221, 227, .8); }
.shelf-stats span { font-size: 12px; }
.shelf-stats strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.library-heading h1 { font-size: 24px; font-weight: 700; }
.library-heading p { font-size: 12px; }
.search-field, select { height: 38px; }
.search-field input, select { font-size: 12px; }
.book-grid { gap: 16px; margin-top: 20px; }
.book-card {
  border-color: rgba(222, 225, 229, .9);
  box-shadow: 0 1px 2px rgba(26, 31, 38, .018);
}
.book-card:hover { border-color: #cfd4db; box-shadow: 0 10px 28px rgba(28, 34, 42, .065); }
.book-kind { font-size: 11px; }
.book-card h2 { font-size: 18px; font-weight: 680; }
.book-card p { font-size: 12px; line-height: 1.75; }
.book-meta { font-size: 11px; font-variant-numeric: tabular-nums; }

.module-rail {
  padding: 12px 8px;
  border-right-color: var(--line);
  background: #fbfbfc;
}
.module-rail nav { gap: 5px; }
.rail-button, .rail-bottom-button {
  height: 44px;
  gap: 10px;
  padding: 0 11px;
  color: #616975;
  font-size: 13px;
  transition: background 130ms ease, color 130ms ease;
}
.rail-button:hover, .rail-bottom-button:hover { background: #f1f3f5; }
.rail-button.active { background: #eef0f3; color: var(--text); font-weight: 650; }

.context-column, .context-content { background: #f7f8fa; }
.book-summary { padding: 20px 18px 18px; }
.book-summary small, .book-summary p { font-size: 11px; }
.book-summary strong { font-size: 16px; font-weight: 680; }
.context-section-head { padding: 20px 17px 10px; }
.context-section-head strong { font-size: 13px; }
.context-section-head span, .context-section-head button { font-size: 11px; }
.context-list { gap: 3px; padding: 0 9px 16px; }
.context-item {
  min-height: 52px;
  grid-template-columns: 31px minmax(0, 1fr) auto;
  gap: 9px;
  padding: 7px 10px;
  transition: background 130ms ease, color 130ms ease;
}
.context-item:hover { background: #eef0f3; }
.context-item.active { background: var(--blue-soft); color: var(--blue-ink); }
.context-item strong { font-size: 13px; font-weight: 620; }
.context-item small, .context-item em { font-size: 11px; }
.context-item-number { font-size: 11px; font-variant-numeric: tabular-nums; }
.context-footer { font-size: 11px; }

.main-column { grid-template-rows: 58px minmax(0, 1fr) 30px; }
.main-column.statusless { grid-template-rows: 58px minmax(0, 1fr); }
.main-toolbar { padding: 0 20px; border-bottom-color: rgba(232, 234, 237, .8); }
.main-toolbar-title { font-size: 13px; }
.main-toolbar-meta, .main-status { font-size: 11px; }
.main-status { padding: 0 16px; border-top-color: rgba(232, 234, 237, .8); }

.document { width: min(840px, calc(100% - 72px)); padding: 48px 0 112px; }
.document.narrow { width: min(740px, calc(100% - 72px)); }
.document.wide { width: min(940px, calc(100% - 64px)); }
.kicker { margin-bottom: 10px; font-size: 11px; font-weight: 650; }
.document h1 { font-size: 30px; font-weight: 700; line-height: 1.3; }
.document-lead { margin-top: 10px; color: var(--text-2); font-size: 14px; line-height: 1.7; }
.form-section { padding: 24px 0; }
.form-section + .form-section { border-top: 0; }
.field-head { margin-bottom: 10px; }
.field-head label, .field-head strong { font-size: 13px; font-weight: 650; }
.field-head span, .field-hint, .field-pair label { font-size: 11px; }
.field-input, .field-textarea { border-color: var(--line-strong); font-size: 13px; }
.field-input { height: 42px; padding: 0 13px; }
.field-textarea { padding: 13px 14px; }
.field-textarea:focus, .field-input:focus { border-color: #8bb3ec; box-shadow: 0 0 0 3px var(--focus-ring); }
.selection-pill { min-height: 34px; padding: 0 12px; font-size: 12px; }

.writing-document { width: min(920px, calc(100% - 80px)); padding: 50px 0 128px; }
.writing-title-row { margin-bottom: 32px; }
.writing-title-row h1 { font-size: 30px; font-weight: 700; line-height: 1.35; }
.writing-title-row p { font-size: 12px; }
.writing-paper { color: #17191d; font-size: 17px; line-height: 2.04; }
.writing-paper p { margin-bottom: 19px; }
.outline-writing-document, .settings-writing-document { width: min(820px, calc(100% - 80px)); }
.outline-free-paper, .related-editor, .chapter-outline-main-editor { font-size: 15px !important; line-height: 2.02 !important; }

#mainContent .character-document { width: min(840px, calc(100% - 72px)); }
#mainContent .character-document .character-header { padding-bottom: 16px; border-bottom: 0; }
.character-name-input { font-size: 30px; font-weight: 700; }
#mainContent .character-basics-grid { padding: 24px 0 22px; }
#mainContent .character-basics-grid label > span { font-size: 11px; }
#mainContent .character-basics-grid .field-input { height: 39px; font-size: 13px; }
#mainContent .character-fields .form-section { padding: 22px 0; }
#mainContent .character-fields .field-textarea { min-height: 84px; background: #fff; }

.assistant-panel {
  grid-template-rows: 58px minmax(0, 1fr) auto;
  background: #f7f8fa;
}
.assistant-tabs { gap: 24px; padding: 0 16px; background: #fafafa; }
.assistant-tab { min-width: 36px; font-size: 13px; }
.assistant-tab.active { font-weight: 650; }
.assistant-body { padding: 0 16px 24px; }
.assistant-body.reference-mode { padding: 0 20px 30px; }
.assistant-sticky-controls { background: #f7f8fa; }
.assistant-context, .assistant-persona-summary { font-size: 12px; }
.assistant-context strong, .assistant-persona-summary strong { font-size: 12px; }
.assistant-actions { border-top: 0; }
.assistant-action { min-height: 48px; padding: 0 3px; border-bottom-color: rgba(225, 228, 232, .86); font-size: 13px; }
.assistant-intro h2 { font-size: 17px; }
.assistant-intro p { font-size: 12px; line-height: 1.7; }
.assistant-toolbox summary { min-height: 48px; }
.character-chat-entry { min-height: 56px; border-radius: 8px; }
.character-chat-entry strong { font-size: 13px; }
.character-chat-entry small { font-size: 11px; }
.chat-message { font-size: 13px; line-height: 1.75; }
.chat-message.ai strong { font-size: 11px; }
.chat-message.user { padding: 10px 12px; background: #e9edf2; }
.assistant-composer {
  margin: 0 14px 14px;
  grid-template-columns: minmax(0, 1fr) 32px 34px;
  gap: 7px;
  padding: 9px 9px 9px 13px;
  border-color: #d6dbe1;
  box-shadow: 0 5px 18px rgba(28, 33, 40, .04);
}
.assistant-composer:focus-within { border-color: #9bb9e4; box-shadow: 0 0 0 3px var(--focus-ring); }
.assistant-composer textarea { min-height: 56px; font-size: 13px; line-height: 1.65; }
.assistant-composer button { width: 32px; height: 32px; }

/* Core writing flow states */
.book-card { position: relative; }
.book-card[draggable="true"] { cursor: grab; }
.book-card[draggable="true"]:active { cursor: grabbing; }
.book-card.is-dragging { opacity: .42; transform: scale(.985); box-shadow: none; }
.book-card.is-drop-target { border-color: #8fb1e2; box-shadow: inset 0 0 0 2px rgba(79, 130, 199, .24); }

.assistant-outline-page-actions button:disabled,
.assistant-action:disabled,
.assistant-selection-actions button:disabled {
  cursor: wait;
  opacity: .5;
}
.assistant-outline-page-actions button:not(:disabled):hover { color: var(--blue-ink); }
.assistant-outline-page-actions button:focus-visible,
.assistant-toolbox > summary:focus-visible,
.reference-disclosure > summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.assistant-message-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.assistant-message-status.is-pending span::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 4px;
  margin-left: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #8aa7cf 26%, transparent 26% 39%, #8aa7cf 39% 65%, transparent 65% 78%, #8aa7cf 78%);
  animation: assistant-pending-pulse 1.1s ease-in-out infinite;
  vertical-align: middle;
}
.assistant-message-status.is-error { align-items: flex-start; color: #a23b3b; }
.assistant-message-status.is-error button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 6px;
  background: #f7eaea;
  color: #8f3030;
  font-size: 11px;
}
.assistant-message-status.is-error button:hover { background: #f1dcdc; }
.chat-message.is-error .chat-message-text:empty,
.chat-message.is-pending .chat-message-text:empty { display: none; }

.ai-proposal-action.is-applying { color: var(--muted); }
.ai-proposal-action.is-applying span::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--blue);
  animation: assistant-pending-pulse 1s ease-in-out infinite;
  vertical-align: 1px;
}
.ai-proposal-action.is-error span { color: #a23b3b; }
.ai-proposal-action button:disabled { cursor: default; opacity: .58; }

.assistant-toolbox > summary,
.reference-disclosure > summary { transition: background-color 140ms ease, color 140ms ease; }
.assistant-toolbox > summary:hover,
.reference-disclosure > summary:hover { background: rgba(238, 241, 245, .72); }
.assistant-toolbox[open] > summary,
.reference-disclosure[open] > summary { background: rgba(238, 241, 245, .48); }

.writing-reference-links { gap: 14px; padding: 14px 0 10px; }
.writing-reference-links button { font-size: 12px; }
.writing-reference-document { padding: 26px 0 40px; }
.writing-reference-document > header span,
.writing-reference-document > header small,
.writing-reference-document > header button,
.writing-reference-select > span,
.writing-reference-field > span { font-size: 11px; }
.writing-reference-document > header h2 { font-size: 19px; }
.writing-reference-document > .assistant-outline-reference-editor,
.writing-reference-prose p,
.writing-reference-field > p { font-size: 14px; line-height: 1.9; }
.writing-reference-select { padding: 14px 0; }
.writing-reference-select select { height: 36px; font-size: 13px; }
.writing-reference-field { padding: 16px 0; border-bottom-color: rgba(232, 234, 237, .75); }

.outline-section, .chapter-outline-row, .review-issue { border-bottom-color: rgba(232, 234, 237, .8); }
.outline-section h3 { font-size: 15px; }
.outline-section p { font-size: 13px; }
.chapter-outline-row strong { font-size: 13px; }
.chapter-outline-row p { font-size: 12px; }
.chapter-outline-row > span:first-child, .chapter-outline-row em { font-size: 11px; }

.modal-backdrop { background: rgba(22, 25, 30, .3); backdrop-filter: blur(2px); }
.modal { border-color: rgba(216, 220, 225, .9); box-shadow: var(--shadow-float); }
.modal > header { min-height: 70px; }
.modal > header small { font-size: 11px; }
.modal > header h2 { font-size: 19px; }
.modal-body { padding: 22px; }
.modal > footer { min-height: 62px; padding: 0 22px; }
.modal-copy, .modal-field label, .modal-choice strong, .modal-list-row strong { font-size: 13px; }
.modal-field small, .modal-choice span, .modal-list-row span, .modal-list-row button { font-size: 11px; }
.modal-choice { min-height: 76px; padding: 14px; }
.popover { border-color: rgba(216, 220, 225, .9); box-shadow: 0 14px 34px rgba(24, 29, 35, .12); }
.popover button { min-height: 38px; font-size: 12px; }
.toast { padding: 11px 15px; font-size: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }

/* Global component state system */
body.modal-open { overflow: hidden; }
.modal-backdrop { animation: modal-backdrop-in 140ms ease-out; }
.modal { animation: modal-surface-in 160ms ease-out; }
.modal.is-destructive > header small { color: var(--danger); }
.modal.is-destructive .warning-note { border-left-color: #d37474; background: #fff7f7; color: #754646; }
.modal > footer button { min-height: 38px; }

.confirm-panel {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}
.confirm-panel > .icon {
  width: 36px;
  height: 36px;
  padding: 9px;
  border-radius: 50%;
  background: #fff1f1;
  color: var(--danger);
}
.confirm-panel strong { display: block; margin-top: 1px; font-size: 14px; line-height: 1.5; }
.confirm-panel p { margin: 5px 0 0; color: var(--text-2); font-size: 12px; line-height: 1.7; }

.ui-state {
  min-height: 112px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  align-content: center;
  gap: 12px;
  padding: 22px 4px;
  color: var(--text-2);
}
.ui-state-indicator { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: #aeb5bf; }
.ui-state strong { display: block; color: var(--text); font-size: 13px; line-height: 1.5; }
.ui-state p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.ui-state .soft-button, .ui-state .text-button { margin-top: 12px; }
.ui-state-loading .ui-state-indicator { background: var(--blue); animation: ui-state-pulse 1s ease-in-out infinite; }
.ui-state-success .ui-state-indicator { background: var(--success); }
.ui-state-error .ui-state-indicator { background: var(--danger); }
.ui-state-error strong { color: #8f3030; }

.primary-button[aria-busy="true"]::before,
.soft-button[aria-busy="true"]::before,
.danger-button[aria-busy="true"]::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ui-spin .72s linear infinite;
}

.popover { width: 190px; padding: 6px; }
.popover.is-open { transform-origin: top right; animation: popover-in 130ms ease-out; }
.popover button {
  min-height: 40px;
  padding: 0 10px;
  font-size: 12px;
  transition: background-color 120ms ease, color 120ms ease;
}
.popover button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.popover .popover-danger { color: #a23b3b; }
.popover .popover-danger:hover,
.popover .popover-danger:focus-visible { background: #fff1f1; color: #8f3030; }
.popover-divider { height: 1px; margin: 4px 8px; background: var(--line); }

.library-empty {
  min-height: 210px;
  grid-column: 1 / -1;
  padding: 32px 20px;
  border: 0;
  background: transparent;
}
.library-empty strong { font-size: 15px; }
.library-empty span { max-width: 360px; font-size: 12px; line-height: 1.7; }
.context-empty { gap: 6px; padding: 22px 13px; font-size: 12px; line-height: 1.6; }
.context-empty small { font-size: 11px; line-height: 1.6; }

.context-draggable-row { transition: opacity 120ms ease, background-color 120ms ease, box-shadow 120ms ease; }
.context-draggable-row.is-dragging { opacity: .58; }
.context-draggable-row.is-drop-target { border-radius: 8px; background: rgba(230, 239, 255, .62); }
.context-draggable-row.is-loading { cursor: wait; }
.context-draggable-row.is-loading .context-item { pointer-events: none; background: rgba(238, 243, 250, .78); }
.context-draggable-row.is-loading .context-item em { max-width: none; color: var(--blue-ink); }
.context-draggable-row.drag-before::before,
.context-draggable-row.drag-after::after { left: 6px; right: 6px; height: 3px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }

.drop-zone { transition: border-color 130ms ease, background-color 130ms ease, color 130ms ease; }
.drop-zone:hover,
.drop-zone:focus-visible,
.drop-zone.is-dragover { border-color: #9fbbe5; background: #f7faff; color: var(--blue-ink); }
.drop-zone:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

button:disabled,
input:disabled,
textarea:disabled,
select:disabled { opacity: .48; cursor: not-allowed; filter: saturate(.6); }

.toast[data-tone="success"] { background: rgba(29, 83, 61, .96); }
.toast[data-tone="error"] { background: rgba(137, 43, 43, .97); }

@keyframes modal-backdrop-in { from { background: rgba(22, 25, 30, 0); backdrop-filter: blur(0); } }
@keyframes modal-surface-in { from { opacity: 0; transform: translateY(5px) scale(.992); } }
@keyframes popover-in { from { opacity: 0; transform: translateY(-3px) scale(.985); } }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-state-pulse { 50% { opacity: .35; transform: scale(.72); } }

/* Large project rendering */
@supports (content-visibility: auto) {
  .chapter-context-row,
  .outline-chapter-child {
    content-visibility: auto;
    contain-intrinsic-block-size: 52px;
  }
  .chapter-outline-overview-row {
    content-visibility: auto;
    contain-intrinsic-block-size: 84px;
  }
}

.assistant-pending-message .chat-message-text::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--blue);
  animation: uiThinking 1.1s ease-in-out infinite;
}

@keyframes uiThinking {
  50% { opacity: .3; transform: scale(.72); }
}

/* Writing workspace refinement */
.workspace-page .module-rail { background: #fafbfc; }

.workspace-page .context-column,
.workspace-page .context-content { background: #f3f5f7; }

.workspace-page .book-summary {
  padding-bottom: 14px;
  border-bottom: 0;
}

.workspace-page .context-section-head { padding-top: 14px; }

.workspace-page .context-item.active {
  background: #e8f1ff;
  box-shadow: none;
}

.workspace-page .context-item strong { font-size: 14px; }

.main-toolbar {
  border-bottom: 0;
  background: rgba(255, 255, 255, .98);
}

.main-toolbar .soft-button {
  min-height: 34px;
  border-color: transparent;
  background: transparent;
  color: var(--text-2);
  transition: background 130ms ease, color 130ms ease;
}

.main-toolbar .soft-button:hover {
  border-color: transparent;
  background: #f1f3f5;
  color: var(--text);
}

.main-toolbar .soft-button:focus-visible {
  border-color: transparent;
  background: #f1f3f5;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.writing-document .writing-title-row h1 { font-size: 32px; }

.writing-document .writing-paper {
  color: #17191d;
  font-size: 18px;
  line-height: 2.06;
}

.writing-document .writing-paper p { margin-bottom: 1.12em; }

#mainContent [data-v2-project-name],
#mainContent [data-v2-direction] {
  border-bottom: 1px solid #dfe3e8;
  transition: border-color 130ms ease, background 130ms ease;
}

#mainContent [data-v2-project-name]:hover,
#mainContent [data-v2-direction]:hover { border-bottom-color: #bfc6cf; }

#mainContent [data-v2-project-name]:focus,
#mainContent [data-v2-direction]:focus {
  border-bottom-color: #7fa6df;
  box-shadow: inset 0 -1px 0 #7fa6df;
}

#mainContent .number-field { max-width: 280px; }

#mainContent .outline-free-paper,
#mainContent .related-editor,
#mainContent .chapter-outline-main-editor {
  font-size: 16px !important;
  line-height: 2.05 !important;
  caret-color: var(--blue-ink);
}

.outline-chapter-child {
  height: 38px;
  grid-template-columns: 24px minmax(0, 1fr);
}

.outline-chapter-child > span { font-size: 10px; }
.outline-chapter-child > strong { font-size: 12px; }

#mainContent .character-fields .field-textarea {
  transition: background 130ms ease, box-shadow 130ms ease;
}

#mainContent .character-fields .field-textarea:hover { background: #fafbfc; }

.rail-button,
.rail-bottom-button { white-space: nowrap; }

.assistant-panel {
  --assistant-surface: #f7f9fb;
  --assistant-hover: #edf1f5;
  border-left-color: #e2e6eb;
  background: var(--assistant-surface);
}

.assistant-tabs {
  border-bottom-color: transparent;
  background: var(--assistant-surface);
}

.assistant-tab { font-size: 14px; }

.assistant-body,
.assistant-sticky-controls {
  background: var(--assistant-surface);
}

.assistant-body.reference-mode { background: #fff; }

.assistant-context {
  padding: 17px 2px 7px;
  border-bottom: 0;
}

.assistant-context > span,
.assistant-persona-summary > span { color: #8a929d; font-size: 11px; }

.assistant-context strong { font-size: 13px; font-weight: 680; }

.assistant-persona-summary {
  padding: 8px 2px 14px;
  border-bottom: 0;
}

.assistant-persona-summary strong { font-size: 13px; font-weight: 680; }

.assistant-toolbox {
  border-bottom: 0;
  background: transparent;
}

.assistant-toolbox > summary {
  min-height: 46px;
  padding: 0 10px;
  border-radius: 8px;
  background: #eef1f4;
  transition: background 130ms ease, color 130ms ease;
}

.assistant-toolbox > summary:hover { background: #e8ecf0; }
.assistant-toolbox[open] > summary { border-bottom: 0; }
.assistant-toolbox-body { padding: 8px 0 10px; }

.assistant-actions {
  gap: 2px;
  border-top: 0;
}

.assistant-action {
  min-height: 46px;
  padding: 0 10px;
  border-bottom: 0;
  border-radius: 7px;
  transition: background 130ms ease, color 130ms ease;
}

.assistant-action:hover { background: var(--assistant-hover); }
.assistant-action:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.assistant-generation-action select { background: #eceff2; }

.assistant-more-tools summary {
  min-height: 44px;
  margin-top: 4px;
  padding: 0 10px;
  border-radius: 7px;
  transition: background 130ms ease, color 130ms ease;
}

.assistant-more-tools summary:hover { background: var(--assistant-hover); color: var(--text); }
.assistant-more-tools .assistant-action { padding-left: 20px; }

.assistant-source-row {
  margin: 2px 8px 6px;
  padding: 8px 2px;
  border-bottom: 0;
}

.assistant-selection-summary {
  margin: 4px 0 8px;
  padding: 10px 12px 11px;
  border-bottom: 0;
  border-radius: 7px;
  background: #eef4fd;
}

.assistant-messages { gap: 16px; padding: 22px 2px 8px; }

.assistant-composer {
  margin: 0 14px 14px;
  border-color: #d9dde3;
  background: #fff;
  box-shadow: 0 6px 20px rgba(31, 38, 47, .055);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.assistant-composer:focus-within {
  border-color: #8fb1e2;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.writing-reference-links {
  padding: 11px 0 5px;
  background: rgba(255, 255, 255, .97);
}

.writing-reference-links button {
  position: relative;
  min-height: 32px;
  padding: 0 2px;
}

.writing-reference-links button.active::after {
  content: none;
  display: none;
}

.writing-reference-document > header h2,
.assistant-chapter-outline > header strong { font-size: 18px; }

.writing-reference-prose p,
.assistant-outline-reference-editor { font-size: 14px; }

.assistant-chapter-outline {
  padding-bottom: 28px;
  border-bottom: 0;
}

.assistant-reference-materials {
  margin-top: 2px;
  padding-top: 20px;
  border-top: 1px solid rgba(229, 231, 235, .82);
}

@media (max-width: 1240px) {
  :root { --rail: 100px; --context: 232px; --assistant: 360px; }
  .document, .document.narrow, .document.wide,
  .writing-document, .outline-writing-document, .settings-writing-document,
  #mainContent .character-document { width: calc(100% - 48px); }
}

@media (max-width: 900px) {
  .workspace-shell,
  .workspace-shell.assistant-collapsed { grid-template-columns: 96px 206px minmax(440px, 1fr); }
}

@media (max-width: 760px) {
  :root { --topbar: 56px; }
  .topbar { padding: 0 14px; }
  .shelf-main { padding: 22px 16px 56px; }
  .library-heading { align-items: stretch; flex-direction: column; gap: 14px; }
  .library-tools { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .search-field { min-width: 0; width: 100%; }
  .document, .document.narrow, .document.wide,
  .writing-document, .outline-writing-document, .settings-writing-document,
  #mainContent .character-document { width: calc(100% - 32px); padding-top: 34px; }
  .document h1, .writing-title-row h1, .character-name-input { font-size: 26px; }
  .field-pair, .character-grid { grid-template-columns: 1fr; }
  .assistant-body.reference-mode { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .assistant-pending-message .chat-message-text::after,
  .ui-state-loading .ui-state-indicator,
  .primary-button[aria-busy="true"]::before,
  .soft-button[aria-busy="true"]::before,
  .danger-button[aria-busy="true"]::before { animation: none; }
  .modal-backdrop, .modal, .popover.is-open { animation: none; }
}