/*
  V5 visual skin for 大神写作分身.
  It borrows the stronger hierarchy of the selected GPT mock while preserving
  the product's original continuous workspace and every existing control.
*/

.brand-skin-preview-v5 {
  --brand-navy: #172d63;
  --brand-blue: #2e63ee;
  --brand-blue-strong: #2456d8;
  --brand-cyan: #45d5df;
  --bg: #f4f7fc;
  --surface: #ffffff;
  --surface-soft: #f4f7fb;
  --surface-quiet: #f8faff;
  --line: #e3e8f1;
  --line-strong: #d6deea;
  --text: #18223a;
  --text-2: #536079;
  --muted: #8995a9;
  --blue: #2e63ee;
  --blue-ink: #2456d8;
  --blue-soft: #edf3ff;
  --focus-ring: rgba(46, 99, 238, .17);
  --topbar: 60px;
  --rail: 100px;
  --context: 278px;
  --assistant: 390px;
  background: var(--bg);
  color: var(--text);
}

.brand-skin-preview-v5 .topbar {
  padding-inline: 20px;
  border-bottom-color: var(--line);
  background: #fff;
}

.brand-skin-preview-v5 .brand {
  gap: 10px;
}

.brand-skin-preview-v5 .brand img {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 9px;
  box-shadow: 0 3px 10px rgba(23, 45, 99, .14);
}

.brand-skin-preview-v5 .brand strong {
  color: var(--brand-navy);
  font-size: 16px;
  font-weight: 750;
}

.brand-skin-preview-v5 .workspace-project-name {
  color: #44516a;
  font-weight: 400;
}

.brand-skin-preview-v5 .ghost-button,
.brand-skin-preview-v5 .soft-button,
.brand-skin-preview-v5 .icon-button {
  border-radius: 7px;
}

.brand-skin-preview-v5 .ghost-button:hover,
.brand-skin-preview-v5 .icon-button:hover {
  background: #f1f5fb;
  color: var(--brand-navy);
}

/* Shelf: a stronger brand opening without turning the library into a dashboard. */
.brand-skin-preview-v5 .shelf-page {
  background: var(--bg);
}

.brand-skin-preview-v5 .shelf-main {
  padding: 24px clamp(28px, 4vw, 64px) 72px;
}

.brand-skin-preview-v5 .shelf-main > * {
  width: min(1280px, 100%);
}

.brand-skin-preview-v5 .story-entry {
  min-height: 124px;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  gap: 22px;
  padding: 20px 24px;
  border: 0;
  border-radius: 8px;
  background: #173878;
  color: #fff;
  box-shadow: 0 12px 30px rgba(24, 54, 116, .15);
}

.brand-skin-preview-v5 .story-entry:hover {
  border-color: transparent;
  box-shadow: 0 15px 34px rgba(24, 54, 116, .19);
}

.brand-skin-preview-v5 .story-entry-icon {
  width: 78px;
  height: 78px;
  border-radius: 12px;
  background-color: transparent;
  background-image: url("/static/brand/dashen-pixel-mark.png");
  background-position: center;
  background-size: 78px 78px;
  background-repeat: no-repeat;
  box-shadow: 0 8px 22px rgba(5, 18, 52, .2);
}

.brand-skin-preview-v5 .story-entry-copy {
  gap: 5px;
}

.brand-skin-preview-v5 .story-entry-copy small {
  color: #aeeaf0;
  font-size: 11px;
  font-weight: 680;
}

.brand-skin-preview-v5 .story-entry-copy strong {
  color: #fff;
  font-size: 24px;
  font-weight: 760;
}

.brand-skin-preview-v5 .story-entry-copy span {
  color: rgba(255, 255, 255, .76);
  font-size: 12px;
}

.brand-skin-preview-v5 .story-entry .primary-button,
.brand-skin-preview-v5 .library-tools .primary-button {
  min-height: 38px;
  border-color: var(--brand-blue);
  border-radius: 8px;
  background: var(--brand-blue);
  color: #fff;
  box-shadow: 0 7px 16px rgba(20, 45, 108, .16);
}

.brand-skin-preview-v5 .story-entry .primary-button {
  min-width: 112px;
}

.brand-skin-preview-v5 .story-entry .primary-button:hover,
.brand-skin-preview-v5 .library-tools .primary-button:hover {
  border-color: var(--brand-blue-strong);
  background: var(--brand-blue-strong);
}

.brand-skin-preview-v5 .shelf-stats {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .78);
}

.brand-skin-preview-v5 .shelf-stats > div {
  min-height: 78px;
  padding-inline: 22px;
  border-right-color: var(--line);
}

.brand-skin-preview-v5 .shelf-stats span {
  color: #69758a;
  font-size: 12px;
}

.brand-skin-preview-v5 .shelf-stats strong {
  color: var(--brand-navy);
  font-size: 25px;
  font-variant-numeric: tabular-nums;
}

.brand-skin-preview-v5 .library-heading {
  margin-top: 30px;
}

.brand-skin-preview-v5 .library-heading h1 {
  color: var(--text);
  font-size: 23px;
  font-weight: 750;
}

.brand-skin-preview-v5 .library-heading p {
  color: #6f7b90;
  font-size: 12px;
}

.brand-skin-preview-v5 .search-field,
.brand-skin-preview-v5 .library-tools select {
  height: 38px;
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, .92);
}

.brand-skin-preview-v5 .search-field:focus-within {
  border-color: #9eb8ef;
  box-shadow: 0 0 0 3px rgba(46, 99, 238, .07);
}

.brand-skin-preview-v5 .book-grid {
  gap: 14px;
  margin-top: 16px;
}

.brand-skin-preview-v5 .book-card {
  height: 204px;
  min-height: 204px;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 15px;
  padding: 13px;
  border-color: var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(27, 47, 88, .035);
}

.brand-skin-preview-v5 .book-card:hover {
  border-color: #c7d5ec;
  box-shadow: 0 9px 24px rgba(27, 47, 88, .075);
}

.brand-skin-preview-v5 .book-cover {
  width: 96px;
  height: 156px;
  border-radius: 5px;
  box-shadow: 0 8px 18px rgba(20, 31, 55, .16);
}

.brand-skin-preview-v5 .book-kind {
  color: var(--brand-blue);
  font-size: 10.5px;
}

.brand-skin-preview-v5 .book-status {
  color: #657786;
  font-size: 11px;
}

.brand-skin-preview-v5 .book-status.is-writing {
  color: var(--brand-blue);
}

.brand-skin-preview-v5 .book-card h2 {
  color: var(--text);
  font-size: 17px;
  font-weight: 720;
}

.brand-skin-preview-v5 .book-card p {
  color: #5f6c83;
  font-size: 11px;
  line-height: 1.72;
}

.brand-skin-preview-v5 .book-meta {
  color: #707c91;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}

/* Workspace: continuous columns, no floating panel cards or layout gaps. */
.brand-skin-preview-v5 .workspace-page,
.brand-skin-preview-v5 .workspace-shell {
  background: #fff;
}

.brand-skin-preview-v5 .module-rail {
  padding: 12px 9px;
  border-right-color: var(--line);
  background: #f7f9fd;
}

.brand-skin-preview-v5 .rail-button,
.brand-skin-preview-v5 .rail-bottom-button {
  height: 45px;
  gap: 10px;
  color: #5f6e89;
  font-size: 13px;
}

.brand-skin-preview-v5 #moduleNav .rail-button:hover,
.brand-skin-preview-v5 .rail-bottom-button:hover {
  background: #edf2fa;
  color: var(--brand-navy);
}

.brand-skin-preview-v5 #moduleNav .rail-button.active {
  background: #eaf1ff;
  color: #204fae;
  font-weight: 700;
}

.brand-skin-preview-v5 .context-column,
.brand-skin-preview-v5 .context-content {
  border-right-color: var(--line);
  background: #f6f8fc;
}

.brand-skin-preview-v5 .book-summary {
  display: block;
  padding: 17px 16px 15px;
  border-bottom: 1px solid var(--line);
}

.brand-skin-preview-v5 .book-summary-cover {
  width: 58px;
  height: 78px;
  display: block;
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 6px 14px rgba(20, 31, 55, .14);
}

.brand-skin-preview-v5 .book-summary > .book-summary-copy {
  min-width: 0;
  display: block;
  margin: 0;
}

.brand-skin-preview-v5 .book-summary-copy > div {
  display: flex;
  align-items: center;
  margin-top: 6px;
}

.brand-skin-preview-v5 .book-summary small,
.brand-skin-preview-v5 .book-summary p {
  font-size: 11px;
}

.brand-skin-preview-v5 .book-summary strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 720;
}

.brand-skin-preview-v5 .book-summary-title {
  color: var(--text);
  font-size: 16px;
  font-weight: 700;
}

.brand-skin-preview-v5 .book-summary-title:hover {
  color: var(--brand-blue);
}

.brand-skin-preview-v5 .book-summary p {
  margin: 7px 0 0;
  color: #8490a4;
}

.brand-skin-preview-v5 .context-section-head {
  padding: 17px 16px 9px;
}

.brand-skin-preview-v5 .context-section-head strong {
  color: #344058;
  font-size: 13px;
}

.brand-skin-preview-v5 .context-item {
  min-height: 47px;
  border-radius: 8px;
}

.brand-skin-preview-v5 .context-item:hover {
  background: #edf2f9;
}

.brand-skin-preview-v5 .context-item.active {
  background: #e8f0ff;
  color: #2455b7;
}

.brand-skin-preview-v5 .context-item strong {
  font-size: 12px;
  font-weight: 650;
}

.brand-skin-preview-v5 .context-item small,
.brand-skin-preview-v5 .context-item em {
  font-size: 10.5px;
}

.brand-skin-preview-v5 .context-item-number {
  background: #e9edf4;
  color: #68758a;
}

.brand-skin-preview-v5 .context-item.active .context-item-number,
.brand-skin-preview-v5 .context-item.active .context-item-number.character-avatar-marker {
  background: #d8e6ff;
  color: #2455b7;
}

.brand-skin-preview-v5 .main-column {
  background: #fff;
}

.brand-skin-preview-v5 .main-toolbar {
  border-bottom-color: #edf0f5;
  background: #fff;
}

.brand-skin-preview-v5 .main-status {
  border-top-color: #edf0f5;
  background: #fff;
}

.brand-skin-preview-v5 .main-scroll {
  background: #fff;
}

.brand-skin-preview-v5 .writing-document {
  width: min(790px, calc(100% - 68px));
}

.brand-skin-preview-v5 .writing-title-row h1 {
  color: #121a2e;
  font-size: 30px;
  font-weight: 760;
}

.brand-skin-preview-v5 .writing-paper {
  color: #20283a;
  font-size: 17px;
  line-height: 2.04;
}

.brand-skin-preview-v5 .assistant-panel {
  border-left-color: var(--line);
  background: #fafbfe;
}

.brand-skin-preview-v5 .assistant-tabs {
  border-bottom-color: var(--line);
  background: #fff;
}

.brand-skin-preview-v5 .assistant-tab {
  color: #7d889c;
}

.brand-skin-preview-v5 .assistant-tab.active {
  color: var(--brand-navy);
  font-weight: 720;
}

.brand-skin-preview-v5 .assistant-tab.active::after {
  background: var(--brand-blue);
}

.brand-skin-preview-v5 .assistant-body,
.brand-skin-preview-v5 .assistant-sticky-controls,
.brand-skin-preview-v5 .assistant-toolbox {
  background: #fafbfe;
}

.brand-skin-preview-v5 .assistant-body.reference-mode {
  background: #fff;
}

.brand-skin-preview-v5 .assistant-composer {
  border-color: #d8e0ec;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(28, 47, 88, .045);
}

.brand-skin-preview-v5 .assistant-composer:focus-within {
  border-color: #9cb7ed;
  box-shadow: 0 0 0 3px rgba(46, 99, 238, .07);
}

.brand-skin-preview-v5 .assistant-composer button,
.brand-skin-preview-v5 .character-chat-entry,
.brand-skin-preview-v5 .assistant-reopen {
  background: var(--brand-navy);
}

.brand-skin-preview-v5 .assistant-composer button:hover,
.brand-skin-preview-v5 .assistant-reopen:hover {
  background: #102453;
}

.brand-skin-preview-v5 .writing-reference-links button.active,
.brand-skin-preview-v5 .writing-reference-document > header button,
.brand-skin-preview-v5 .writing-reference-document > header .writing-reference-header-actions button {
  color: var(--brand-blue-strong);
}

.brand-skin-preview-v5 .selection-pill.active {
  border-color: #aec4f0;
  background: #edf3ff;
  color: #2455b7;
}

/*
  Writing workspace refinement.
  Keep the existing four-column product structure, but give the manuscript
  more visual authority and make hover, selected, and action states distinct.
*/
.brand-skin-preview-v5 .workspace-page {
  --line: #dfe6f0;
  --line-strong: #d1dbe8;
  --muted: #69768b;
  --workspace-hover: #f1f4f8;
  --workspace-selected: var(--blue-soft);
  --workspace-selected-ink: var(--blue-ink);
}

.brand-skin-preview-v5 .workspace-shell {
  --rail: 92px;
  --context: 252px;
}

.brand-skin-preview-v5 .workspace-topbar {
  border-bottom: 1px solid var(--line);
}

.brand-skin-preview-v5 .workspace-page .module-rail {
  padding: 12px 8px;
  background: #f3f6fb;
}

.brand-skin-preview-v5 .workspace-page .rail-button,
.brand-skin-preview-v5 .workspace-page .rail-bottom-button {
  height: 44px;
  gap: 6px;
  padding: 0 3px;
  font-size: 13px;
}

.brand-skin-preview-v5 .workspace-page #moduleNav .rail-button:hover,
.brand-skin-preview-v5 .workspace-page .rail-bottom-button:hover {
  background: var(--workspace-hover);
  color: var(--brand-navy);
}

.brand-skin-preview-v5 .workspace-page #moduleNav .rail-button.active {
  background: var(--workspace-selected);
  color: var(--workspace-selected-ink);
  font-weight: 650;
}

.brand-skin-preview-v5 .workspace-page .context-column,
.brand-skin-preview-v5 .workspace-page .context-content {
  background: #f7f9fc;
}

.brand-skin-preview-v5 .workspace-page .book-summary {
  padding: 16px 14px 14px;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-chapter {
  padding-top: 20px;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-chapter > header {
  align-items: center;
  padding-bottom: 0;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-chapter > header h2 {
  min-width: 0;
  overflow: hidden;
  color: var(--brand-navy);
  font-size: 18px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-chapter > header small {
  flex: 0 0 auto;
  padding-top: 0;
  font-size: 11px;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-chapter > .assistant-outline-reference-editor {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid rgba(221, 227, 237, .9);
}

.brand-skin-preview-v5 .workspace-page .context-section-head {
  padding: 16px 14px 8px;
}

.brand-skin-preview-v5 .workspace-page .context-list {
  padding: 0 8px 12px;
}

.brand-skin-preview-v5 .workspace-page .context-item {
  min-height: 46px;
  padding: 6px 8px;
}

.brand-skin-preview-v5 .workspace-page .context-item:hover {
  background: var(--workspace-hover);
}

.brand-skin-preview-v5 .workspace-page .context-item.active {
  background: var(--workspace-selected);
  color: var(--workspace-selected-ink);
}

.brand-skin-preview-v5 .workspace-page .context-item strong {
  font-size: 13px;
  font-weight: 600;
}

.brand-skin-preview-v5 .workspace-page .context-item small,
.brand-skin-preview-v5 .workspace-page .context-item em,
.brand-skin-preview-v5 .workspace-page .book-summary small,
.brand-skin-preview-v5 .workspace-page .book-summary p,
.brand-skin-preview-v5 .workspace-page .context-footer {
  color: var(--muted);
  font-size: 12px;
}

.brand-skin-preview-v5 .workspace-page .context-item.active .context-item-number,
.brand-skin-preview-v5 .workspace-page .context-item.active .context-item-number.character-avatar-marker {
  background: rgba(255, 255, 255, .58);
  color: var(--workspace-selected-ink);
}

.brand-skin-preview-v5 .workspace-page .main-column,
.brand-skin-preview-v5 .workspace-page .main-scroll {
  background: #fff;
}

.brand-skin-preview-v5 .workspace-page .main-toolbar .soft-button,
.brand-skin-preview-v5 .workspace-page .main-toolbar .icon-button {
  color: #5d6a80;
}

.brand-skin-preview-v5 .workspace-page .main-toolbar .soft-button:hover,
.brand-skin-preview-v5 .workspace-page .main-toolbar .icon-button:hover {
  background: var(--workspace-hover);
  color: var(--brand-navy);
}

.brand-skin-preview-v5 .workspace-page .writing-document {
  width: min(var(--editor-document-width), calc(100% - 64px));
  padding: 44px 0 112px;
}

.brand-skin-preview-v5 .workspace-page .writing-title-row {
  margin-bottom: 28px;
}

.brand-skin-preview-v5 .workspace-page .writing-title-row h1 {
  font-size: 28px;
  font-weight: 720;
  line-height: 1.4;
}

.brand-skin-preview-v5 .workspace-page .writing-title-row p {
  color: var(--muted);
  font-size: 12px;
}

.brand-skin-preview-v5 .workspace-page .writing-paper {
  color: #20283a;
  font-size: 17px;
  line-height: 2.04;
}

.brand-skin-preview-v5 .workspace-page .assistant-panel,
.brand-skin-preview-v5 .workspace-page .assistant-body,
.brand-skin-preview-v5 .workspace-page .assistant-sticky-controls,
.brand-skin-preview-v5 .workspace-page .assistant-toolbox {
  background: #f8faff;
}

.brand-skin-preview-v5 .workspace-page .assistant-tabs {
  border-bottom-color: var(--line);
  background: #fbfcff;
}

.brand-skin-preview-v5 .workspace-page .assistant-tab {
  color: var(--muted);
}

.brand-skin-preview-v5 .workspace-page .assistant-tab.active {
  color: var(--brand-navy);
  font-weight: 680;
}

.brand-skin-preview-v5 .workspace-page .assistant-body.reference-mode,
.brand-skin-preview-v5 .workspace-page .writing-reference-links {
  background: #fbfcff;
}

.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions {
  gap: 8px;
  margin-top: 12px;
}

.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions button {
  min-height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  background: transparent;
  color: #536079;
  font-size: 12px;
  font-weight: 500;
  transition: background-color 130ms ease, color 130ms ease;
}

.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions button:not(:disabled):hover {
  background: var(--workspace-hover);
  color: var(--brand-navy);
}

.brand-skin-preview-v5 .workspace-page .assistant-outline-reference-editor {
  color: #4f5c73;
  font-size: 14px;
  line-height: 1.9;
}

/*
  Matched pixel states: each rest icon is derived from its selected icon, so
  silhouette and optical size stay stable. Writing and direction keep the
  detailed hero glyphs; the remaining modules use the tighter compact set.
*/
.brand-skin-preview-v5 #moduleNav .rail-button > .icon,
.brand-skin-preview-v5 .rail-bottom-button > .icon {
  display: none;
}

.brand-skin-preview-v5 #moduleNav .rail-button::before,
.brand-skin-preview-v5 .rail-bottom-button::before {
  display: block;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  content: "";
  background-color: transparent;
  background-image: var(--approved-nav-mono-icon);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--approved-nav-size, 22px) auto;
  -webkit-mask: none;
  mask: none;
  opacity: .9;
  transition: filter 130ms ease, opacity 130ms ease;
}

.brand-skin-preview-v5 #moduleNav .rail-button[data-module="writing"] {
  --approved-nav-icon: url("/static/brand/icons/approved/writing.png");
  --approved-nav-mono-icon: url("/static/brand/icons/approved/writing-mono.png");
  --approved-nav-size: 22px;
}

.brand-skin-preview-v5 #moduleNav .rail-button[data-module="project"] {
  --approved-nav-icon: none;
  --approved-nav-mono-icon: none;
  --approved-nav-size: 22px;
}

.brand-skin-preview-v5 #moduleNav .rail-button[data-module="outline"] {
  --approved-nav-icon: url("/static/brand/icons/approved/compact-outline.png");
  --approved-nav-mono-icon: url("/static/brand/icons/approved/compact-outline-mono.png");
  --approved-nav-size: 22px;
}

.brand-skin-preview-v5 #moduleNav .rail-button[data-module="world"] {
  --approved-nav-icon: url("/static/brand/icons/approved/compact-world.png");
  --approved-nav-mono-icon: url("/static/brand/icons/approved/compact-world-mono.png");
  --approved-nav-size: 22px;
}

.brand-skin-preview-v5 #moduleNav .rail-button[data-module="characters"] {
  --approved-nav-icon: url("/static/brand/icons/approved/compact-characters.png");
  --approved-nav-mono-icon: url("/static/brand/icons/approved/compact-characters-mono.png");
  --approved-nav-size: 22px;
}

.brand-skin-preview-v5 #moduleNav .rail-button[data-module="related"] {
  --approved-nav-icon: url("/static/brand/icons/approved/compact-inspiration.png");
  --approved-nav-mono-icon: url("/static/brand/icons/approved/compact-inspiration-mono.png");
  --approved-nav-size: 22px;
}

.brand-skin-preview-v5 .rail-bottom-button {
  --approved-nav-mono-icon: url("/static/brand/icons/approved/compact-setting-mono.png");
  --approved-nav-size: 22px;
}

.brand-skin-preview-v5 #moduleNav .rail-button:hover::before,
.brand-skin-preview-v5 .rail-bottom-button:hover::before {
  background-color: transparent;
  filter: brightness(.72);
  opacity: 1;
}

.brand-skin-preview-v5 #moduleNav .rail-button.active::before {
  display: block;
  content: "";
  background-color: transparent;
  background-image: var(--approved-nav-icon);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--approved-nav-size, 22px) auto;
  -webkit-mask: none;
  mask: none;
  opacity: 1;
  filter: none;
  transform: none;
}

/* Restore the earlier quill/sword glyph the direction module was designed with. */
.brand-skin-preview-v5 #moduleNav .rail-button[data-module="project"]::before {
  background-color: #66758d;
  background-image: none;
  -webkit-mask: url("/static/brand/icons/pixelarticons/direction.svg") center / 22px 22px no-repeat;
  mask: url("/static/brand/icons/pixelarticons/direction.svg") center / 22px 22px no-repeat;
  filter: none;
}

.brand-skin-preview-v5 #moduleNav .rail-button[data-module="project"]:hover::before {
  background-color: #40577e;
  filter: none;
}

.brand-skin-preview-v5 #moduleNav .rail-button[data-module="project"].active::before {
  background-color: #36c8d4;
  background-image: none;
  -webkit-mask: url("/static/brand/icons/pixelarticons/direction.svg") center / 22px 22px no-repeat;
  mask: url("/static/brand/icons/pixelarticons/direction.svg") center / 22px 22px no-repeat;
  filter: none;
}

/* Global commands have no selected state, so they use the compact pixel set. */
.brand-skin-preview-v5 .topbar .ghost-button[data-modal] > .icon,
.brand-skin-preview-v5 .library-tools .primary-button[data-modal="new-book"] > .icon {
  display: none;
}

.brand-skin-preview-v5 .topbar .ghost-button[data-modal]::before,
.brand-skin-preview-v5 .library-tools .primary-button[data-modal="new-book"]::before {
  display: block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  content: "";
  background-color: currentColor;
  background-image: none;
  -webkit-mask: var(--pixel-action-icon) center / contain no-repeat;
  mask: var(--pixel-action-icon) center / contain no-repeat;
}

@media (max-width: 1100px) {
  .brand-skin-preview-v5 {
    --context: 246px;
    --assistant: 360px;
  }

  .brand-skin-preview-v5 .workspace-shell {
    --rail: 88px;
    --context: 232px;
  }

  .brand-skin-preview-v5 .book-summary {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px;
    padding-inline: 13px;
  }

  .brand-skin-preview-v5 .book-summary-cover {
    width: 50px;
    height: 68px;
  }
}

@media (max-width: 760px) {
  .brand-skin-preview-v5 .story-entry {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .brand-skin-preview-v5 .story-entry-icon {
    width: 60px;
    height: 60px;
    background-size: 60px 60px;
  }

  .brand-skin-preview-v5 .story-entry .primary-button {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .brand-skin-preview-v5 .story-entry-copy strong {
    font-size: 21px;
  }
}

/* Keep feedback and status inside the product's black, white, gray and blue palette. */
.brand-skin-preview-v5 {
  --success: #1d9bf0;
}

.brand-skin-preview-v5 .toast[data-tone="success"] {
  background: rgba(15, 20, 25, .96);
}

/* Character type is metadata for the name line, not a vertically centered third column. */
.brand-skin-preview-v5 .workspace-page .context-draggable-row[data-context-drag="character"] > .context-item > em {
  align-self: start;
  margin-top: 3px;
}

/*
  Quiet social-product control language for the writing workspace.
  Geometry carries the interaction state; bright blue stays a small accent.
*/
.brand-skin-preview-v5 {
  --brand-blue: #1d9bf0;
  --brand-blue-strong: #1684d4;
  --blue: #1d9bf0;
  --blue-ink: #167fc8;
  --blue-soft: #e8f5fe;
  --focus-ring: rgba(29, 155, 240, .2);
}

.brand-skin-preview-v5 .ghost-button,
.brand-skin-preview-v5 .soft-button,
.brand-skin-preview-v5 .primary-button,
.brand-skin-preview-v5 .danger-button {
  border-radius: 999px;
}

.brand-skin-preview-v5 .primary-button {
  border-color: #111820;
  background: #111820;
  color: #fff;
  box-shadow: none;
}

.brand-skin-preview-v5 .primary-button:hover {
  border-color: #25303b;
  background: #25303b;
}

.brand-skin-preview-v5 .soft-button {
  border-color: #dbe3ec;
  background: #fff;
  color: #40506a;
}

.brand-skin-preview-v5 .soft-button:hover {
  border-color: #c8d4e2;
  background: #f5f8fb;
  color: var(--brand-navy);
}

.brand-skin-preview-v5 .icon-button {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-color: transparent;
  border-radius: 50%;
  background: transparent;
  color: #5d6b7f;
}

.brand-skin-preview-v5 .icon-button:hover {
  border-color: transparent;
  background: #eef3f8;
  color: var(--brand-navy);
}

.brand-skin-preview-v5 .icon-button:active {
  background: #dfeaf4;
  transform: scale(.96);
}

.brand-skin-preview-v5 .icon-button:focus-visible,
.brand-skin-preview-v5 .ghost-button:focus-visible,
.brand-skin-preview-v5 .soft-button:focus-visible,
.brand-skin-preview-v5 .primary-button:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

.brand-skin-preview-v5 .workspace-page .module-rail {
  background: #f8fafc;
}

.brand-skin-preview-v5 .workspace-page .rail-button,
.brand-skin-preview-v5 .workspace-page .rail-bottom-button {
  height: 42px;
  gap: 7px;
  padding: 0 8px;
  border-radius: 999px;
  color: #536178;
}

.brand-skin-preview-v5 .workspace-page #moduleNav .rail-button:hover,
.brand-skin-preview-v5 .workspace-page .rail-bottom-button:hover {
  background: #edf2f7;
  color: var(--brand-navy);
}

.brand-skin-preview-v5 .workspace-page #moduleNav .rail-button.active {
  background: var(--blue-soft);
  color: var(--blue-ink);
  font-weight: 650;
}

.brand-skin-preview-v5 .workspace-page .main-toolbar .icon-button {
  color: #536178;
}

.brand-skin-preview-v5 .workspace-page .main-toolbar .icon-button:hover {
  background: #edf3f8;
  color: var(--brand-navy);
}

.brand-skin-preview-v5 .selection-toolbar {
  padding: 4px;
  border-radius: 999px;
  background: #111820;
  box-shadow: 0 10px 26px rgba(15, 23, 32, .22);
}

.brand-skin-preview-v5 .selection-toolbar button {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
}

.brand-skin-preview-v5 .assistant-toolbox-body > .assistant-selection-summary {
  margin: 0 8px 8px;
  padding: 9px 2px 10px;
  border-bottom: 1px solid #dde5ee;
  border-radius: 0;
  background: transparent;
}

.brand-skin-preview-v5 .assistant-selection-summary header {
  grid-template-columns: minmax(0, 1fr) auto auto;
  color: var(--blue-ink);
}

.brand-skin-preview-v5 .assistant-selection-summary p {
  max-height: 58px;
  margin: 7px 0 0;
  color: #59677e;
}

.brand-skin-preview-v5 .assistant-selection-summary header button {
  min-height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--blue-ink);
}

.brand-skin-preview-v5 .assistant-selection-summary header button:hover {
  background: var(--blue-soft);
}

.brand-skin-preview-v5 .persona-compact-actions {
  padding: 14px 0 4px;
  border-bottom: 0;
}

.brand-skin-preview-v5 .persona-compact-actions .soft-button {
  min-height: 36px;
  gap: 7px;
  padding: 0 14px;
  color: #33445e;
  font-size: 12px;
  text-decoration: none;
}

.brand-skin-preview-v5 .persona-compact-actions .soft-button:hover {
  color: var(--brand-navy);
  text-decoration: none;
}

.brand-skin-preview-v5 .persona-compact-actions .dash-icon {
  width: 16px;
  height: 16px;
}

.brand-skin-preview-v5 .modal > footer .soft-button,
.brand-skin-preview-v5 .modal > footer .primary-button,
.brand-skin-preview-v5 .modal > footer .danger-button {
  min-height: 40px;
  padding-inline: 18px;
}

/* Writing workspace typography uses supported, intentional weight steps.
   Intermediate values such as 650/680/720 collapse to the same bold Chinese
   face on Windows and flatten the page hierarchy. */
.brand-skin-preview-v5 .workspace-page {
  --workspace-type-title: 700;
  --workspace-type-section: 600;
  --workspace-type-label: 400;
  --workspace-type-body: 400;
  --workspace-body-ink: #000000;
}

.brand-skin-preview-v5 .workspace-page #moduleNav .rail-button,
.brand-skin-preview-v5 .workspace-page .rail-bottom-button {
  font-weight: var(--workspace-type-section);
}

.brand-skin-preview-v5 .workspace-page #moduleNav .rail-button.active {
  font-weight: var(--workspace-type-section);
}

.brand-skin-preview-v5 .dashen-pixel-command,
.brand-skin-preview-v5 .workspace-page .main-toolbar .soft-button {
  font-weight: var(--workspace-type-section, 600);
}

.brand-skin-preview-v5 .workspace-page .context-column,
.brand-skin-preview-v5 .workspace-page .assistant-panel {
  font-weight: var(--workspace-type-body);
}

.brand-skin-preview-v5 .workspace-page .context-column strong,
.brand-skin-preview-v5 .workspace-page .context-item strong {
  font-weight: var(--workspace-type-label);
}

.brand-skin-preview-v5 .workspace-page .book-summary strong,
.brand-skin-preview-v5 .workspace-page .context-section-head strong {
  font-weight: var(--workspace-type-section);
}

.brand-skin-preview-v5 .workspace-page #mainContent h1,
.brand-skin-preview-v5 .workspace-page #mainContent .character-name-input {
  font-weight: var(--workspace-type-title);
}

.brand-skin-preview-v5 .workspace-page #mainContent h2,
.brand-skin-preview-v5 .workspace-page #mainContent h3 {
  font-weight: var(--workspace-type-section);
}

.brand-skin-preview-v5 .workspace-page #mainContent strong,
.brand-skin-preview-v5 .workspace-page #mainContent .field-head strong,
.brand-skin-preview-v5 .workspace-page #mainContent .kicker {
  font-weight: var(--workspace-type-label);
}

.brand-skin-preview-v5 .workspace-page #mainContent label,
.brand-skin-preview-v5 .workspace-page #mainContent .field-head label {
  color: #111111;
  font-weight: var(--workspace-type-body);
}

.brand-skin-preview-v5 .workspace-page #mainContent input:not(.character-name-input),
.brand-skin-preview-v5 .workspace-page #mainContent textarea,
.brand-skin-preview-v5 .workspace-page #mainContent select,
.brand-skin-preview-v5 .workspace-page #mainContent [contenteditable="true"] {
  color: var(--workspace-body-ink);
  font-weight: var(--workspace-type-body);
}

.brand-skin-preview-v5 .workspace-page #mainContent .writing-paper {
  color: #000000;
  font-weight: var(--workspace-type-body);
}

.brand-skin-preview-v5 .workspace-page .assistant-panel strong,
.brand-skin-preview-v5 .workspace-page .assistant-context strong,
.brand-skin-preview-v5 .workspace-page .assistant-persona-summary strong,
.brand-skin-preview-v5 .workspace-page .assistant-toolbox strong,
.brand-skin-preview-v5 .workspace-page .assistant-action strong {
  font-weight: var(--workspace-type-label);
}

.brand-skin-preview-v5 .workspace-page .assistant-panel h1,
.brand-skin-preview-v5 .workspace-page .assistant-panel h2,
.brand-skin-preview-v5 .workspace-page .assistant-panel h3,
.brand-skin-preview-v5 .workspace-page .assistant-tab.active {
  font-weight: var(--workspace-type-label);
}

/* Final density pass: keep the approved structure while quieting secondary UI. */
.brand-skin-preview-v5 .workspace-page .context-content,
.brand-skin-preview-v5 .workspace-page .main-scroll,
.brand-skin-preview-v5 .workspace-page .assistant-body,
.brand-skin-preview-v5 .shelf-page {
  scrollbar-width: thin;
  scrollbar-color: #c2cad6 transparent;
}

.brand-skin-preview-v5 .workspace-page .context-content::-webkit-scrollbar,
.brand-skin-preview-v5 .workspace-page .main-scroll::-webkit-scrollbar,
.brand-skin-preview-v5 .workspace-page .assistant-body::-webkit-scrollbar,
.brand-skin-preview-v5 .shelf-page::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.brand-skin-preview-v5 .workspace-page .context-content::-webkit-scrollbar-track,
.brand-skin-preview-v5 .workspace-page .main-scroll::-webkit-scrollbar-track,
.brand-skin-preview-v5 .workspace-page .assistant-body::-webkit-scrollbar-track,
.brand-skin-preview-v5 .shelf-page::-webkit-scrollbar-track {
  background: transparent;
}

.brand-skin-preview-v5 .workspace-page .context-content::-webkit-scrollbar-thumb,
.brand-skin-preview-v5 .workspace-page .main-scroll::-webkit-scrollbar-thumb,
.brand-skin-preview-v5 .workspace-page .assistant-body::-webkit-scrollbar-thumb,
.brand-skin-preview-v5 .shelf-page::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #c2cad6;
}

.brand-skin-preview-v5 .workspace-page .context-content::-webkit-scrollbar-thumb:hover,
.brand-skin-preview-v5 .workspace-page .main-scroll::-webkit-scrollbar-thumb:hover,
.brand-skin-preview-v5 .workspace-page .assistant-body::-webkit-scrollbar-thumb:hover,
.brand-skin-preview-v5 .shelf-page::-webkit-scrollbar-thumb:hover {
  background: #8995a8;
}

.brand-skin-preview-v5 .workspace-page .assistant-context > span,
.brand-skin-preview-v5 .workspace-page .assistant-persona-summary > span,
.brand-skin-preview-v5 .workspace-page .assistant-toolbox > summary strong {
  color: #6d798c;
  font-weight: var(--workspace-type-body);
}

.brand-skin-preview-v5 .workspace-page .assistant-action {
  color: #5d687b;
  font-weight: var(--workspace-type-body);
}

.brand-skin-preview-v5 .workspace-page .context-item-number.character-avatar-marker {
  font-weight: 500;
}

.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions button {
  font-weight: var(--workspace-type-body);
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry {
  border: 1px solid #d5e2f8;
  background: #edf3ff;
  color: var(--brand-navy);
  box-shadow: none;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry:hover {
  border-color: #b9cdef;
  background: #e5efff;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry small {
  color: #65728a;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-basics-grid {
  gap: 16px;
  padding: 16px 0;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-fields .form-section {
  padding: 16px 0;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-fields .field-textarea {
  min-height: 64px;
}

.brand-skin-preview-v5 .story-entry {
  min-height: 112px;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  gap: 20px;
  padding: 16px 22px;
}

.brand-skin-preview-v5 .story-entry-icon {
  width: 68px;
  height: 68px;
  background-size: 68px 68px;
}

.brand-skin-preview-v5 .story-entry-copy strong {
  font-size: 22px;
}

.brand-skin-preview-v5 .shelf-stats > div {
  min-height: 66px;
}

.brand-skin-preview-v5 .shelf-stats strong {
  font-size: 23px;
}

.brand-skin-preview-v5 .library-heading {
  margin-top: 24px;
}

/* Keep the chapter toolbar concise; choose the generation scope on demand. */
.brand-skin-preview-v5 .workspace-page .chapter-generation-menu {
  position: relative;
}

.brand-skin-preview-v5 .workspace-page .chapter-generation-menu > summary {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--brand-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}

.brand-skin-preview-v5 .workspace-page .chapter-generation-menu > summary::-webkit-details-marker {
  display: none;
}

.brand-skin-preview-v5 .workspace-page .chapter-generation-menu > summary .icon {
  width: 12px;
  height: 12px;
  color: currentColor;
  transition: transform 130ms ease;
}

.brand-skin-preview-v5 .workspace-page .chapter-generation-menu[open] > summary .icon {
  transform: rotate(90deg);
}

.brand-skin-preview-v5 .workspace-page .chapter-generation-menu > div {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  width: 132px;
  padding: 5px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(24, 34, 58, .13);
}

.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions .chapter-generation-menu > div > button[data-ai-action] {
  width: 100%;
  min-height: 32px;
  justify-content: flex-start;
  padding: 0 9px;
  background: transparent;
  color: #46536a;
  font-weight: 500;
}

.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions .chapter-generation-menu > div > button[data-ai-action]:not(:disabled):hover {
  background: var(--workspace-hover);
  color: var(--brand-navy);
}

@media (max-width: 760px) {
  .brand-skin-preview-v5 .story-entry {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }

  .brand-skin-preview-v5 .story-entry-icon {
    width: 60px;
    height: 60px;
    background-size: 60px 60px;
  }
}

/* Final button geometry: actions are capsules, icon-only controls are circles. */
.brand-skin-preview-v5 .shelf-story-button,
.brand-skin-preview-v5 .shelf-overview .primary-button,
.brand-skin-preview-v5 .story-entry .primary-button,
.brand-skin-preview-v5 .library-tools .primary-button,
.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions > button,
.brand-skin-preview-v5 .workspace-page .chapter-generation-menu > summary,
.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions .chapter-generation-menu > div > button[data-ai-action] {
  border-radius: 999px;
}

.brand-skin-preview-v5 .workspace-page .assistant-toolbox > summary,
.brand-skin-preview-v5 .workspace-page .assistant-action,
.brand-skin-preview-v5 .workspace-page .assistant-more-tools > summary,
.brand-skin-preview-v5 .workspace-page .segmented-control,
.brand-skin-preview-v5 .workspace-page .segmented-control button {
  border-radius: 999px;
}

/* Directory items are structural rows, not action pills. */
.brand-skin-preview-v5 .workspace-page .context-list {
  gap: 0;
  padding-right: 0;
  padding-left: 0;
}

.brand-skin-preview-v5 .workspace-page .context-item {
  padding-left: 16px;
  border-radius: 0;
}

.brand-skin-preview-v5 .workspace-page .context-draggable-row.is-drop-target {
  border-radius: 0;
}

.brand-skin-preview-v5 .workspace-page .context-item-number,
.brand-skin-preview-v5 .workspace-page .context-item-number.character-avatar-marker {
  border-radius: 50%;
}

/* One selected-state palette for the rail and its directory rows. */
.brand-skin-preview-v5 .workspace-page #moduleNav .rail-button.active,
.brand-skin-preview-v5 .workspace-page .context-item.active {
  background: var(--blue-soft);
  color: var(--blue-ink);
}

.brand-skin-preview-v5 .workspace-page .context-item.active .context-item-number,
.brand-skin-preview-v5 .workspace-page .context-item.active .context-item-number.character-avatar-marker {
  background: rgba(255, 255, 255, .58);
  color: var(--blue-ink);
}

/* Main documents use black primary ink; muted metadata keeps its own gray. */
.brand-skin-preview-v5 .workspace-page #mainContent {
  color: #000000;
}

.brand-skin-preview-v5 .workspace-page #mainContent h1,
.brand-skin-preview-v5 .workspace-page #mainContent h2,
.brand-skin-preview-v5 .workspace-page #mainContent h3,
.brand-skin-preview-v5 .workspace-page #mainContent strong,
.brand-skin-preview-v5 .workspace-page #mainContent label,
.brand-skin-preview-v5 .workspace-page #mainContent input,
.brand-skin-preview-v5 .workspace-page #mainContent textarea,
.brand-skin-preview-v5 .workspace-page #mainContent select,
.brand-skin-preview-v5 .workspace-page #mainContent [contenteditable="true"] {
  color: #000000;
}

/* Directory overflow actions share one compact, in-row treatment. */
.brand-skin-preview-v5 .workspace-page .chapter-row-menu,
.brand-skin-preview-v5 .workspace-page .setting-row-menu {
  right: 6px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
}

.brand-skin-preview-v5 .workspace-page .chapter-context-row:hover .chapter-row-menu,
.brand-skin-preview-v5 .workspace-page .setting-context-row:hover .setting-row-menu,
.brand-skin-preview-v5 .workspace-page .chapter-row-menu:focus-visible,
.brand-skin-preview-v5 .workspace-page .setting-row-menu:focus-visible {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  pointer-events: auto;
}

.brand-skin-preview-v5 .workspace-page .chapter-row-menu:hover,
.brand-skin-preview-v5 .workspace-page .chapter-row-menu:focus-visible,
.brand-skin-preview-v5 .workspace-page .setting-row-menu:hover,
.brand-skin-preview-v5 .workspace-page .setting-row-menu:focus-visible {
  background: var(--x-hover);
}

.brand-skin-preview-v5 .workspace-page .chapter-row-menu .dash-icon,
.brand-skin-preview-v5 .workspace-page .setting-row-menu .dash-icon {
  width: 15px;
  height: 15px;
}

/* X-inspired assistant tabs: equal columns, black active label, short blue marker. */
.brand-skin-preview-v5 .workspace-page .assistant-tabs {
  position: relative;
  gap: 0;
  padding: 0 44px 0 0;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.brand-skin-preview-v5 .workspace-page .assistant-tab {
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  place-items: center;
  padding: 0 8px;
  color: #536471;
  font-size: 14px;
  font-weight: 400;
}

.brand-skin-preview-v5 .workspace-page .assistant-tab:hover {
  color: #0f1419;
}

.brand-skin-preview-v5 .workspace-page .assistant-tab.active {
  color: #0f1419;
  font-weight: 700;
}

.brand-skin-preview-v5 .workspace-page .assistant-tab.active::after {
  right: 30%;
  bottom: -1px;
  left: 30%;
  height: 4px;
  border-radius: 999px;
  background: var(--brand-blue);
}

.brand-skin-preview-v5 .workspace-page .assistant-close {
  position: absolute;
  top: 50%;
  right: 10px;
  margin: 0;
  transform: translateY(-50%);
}

/*
  X-inspired hierarchy for the character conversation entry:
  one dark capsule anchors the action, while the rail keeps its pale blue
  selected state and bright blue remains a small accent.
*/
.brand-skin-preview-v5 {
  --character-chat-gradient: linear-gradient(112deg, #0b1428 0%, #142e63 58%, #0f4f78 100%);
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry {
  min-height: 58px;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  gap: 10px;
  padding: 9px 14px;
  border: 1px solid rgba(69, 213, 223, .2);
  border-radius: 999px;
  background: var(--character-chat-gradient);
  color: #fff;
  box-shadow: 0 7px 18px rgba(11, 20, 40, .16);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry strong {
  color: #fff;
  font-weight: 650;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry small {
  color: rgba(255, 255, 255, .68);
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry > .icon:first-child {
  color: #64e2ea;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry > .icon:last-child {
  color: rgba(121, 229, 237, .88);
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry .character-chat-arrow {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--x-ink);
  color: #fff;
  transition: transform 140ms ease, background 140ms ease;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry .character-chat-arrow .icon {
  width: 19px;
  height: 19px;
  transform: rotate(180deg);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry:hover .character-chat-arrow {
  background: #272c30;
  transform: translateX(2px);
}

.brand-skin-preview-v5 .workspace-page .assistant-session-summary {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 4px 10px;
  border-bottom: 1px solid var(--x-line);
}

.brand-skin-preview-v5 .workspace-page .assistant-context-status {
  min-height: 28px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px;
  color: #8793a2;
  font-size: 11px;
}

.brand-skin-preview-v5 .workspace-page .assistant-context-status i {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #b8c3d0;
}

.brand-skin-preview-v5 .workspace-page .assistant-context-status.is-ready i {
  background: var(--x-blue);
}

.brand-skin-preview-v5 .workspace-page .assistant-session-summary > strong {
  min-width: 0;
  overflow: hidden;
  color: var(--x-ink);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-skin-preview-v5 .workspace-page .assistant-session-summary > button {
  flex: 0 0 auto;
  max-width: 48%;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--x-blue-soft);
  color: #167fc8;
  font-size: 12px;
}

.brand-skin-preview-v5 .workspace-page .assistant-session-summary > button:hover {
  background: #e4f2ff;
}

.brand-skin-preview-v5 .workspace-page .assistant-session-summary > button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-skin-preview-v5 .workspace-page .assistant-toolbox > summary {
  grid-template-columns: minmax(0, 1fr) 16px;
}

.brand-skin-preview-v5 .workspace-page .assistant-action-group {
  border-radius: 10px;
}

.brand-skin-preview-v5 .workspace-page .assistant-action-group > summary,
.brand-skin-preview-v5 .workspace-page .assistant-more-tools > summary {
  min-height: 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--x-ink-2);
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}

.brand-skin-preview-v5 .workspace-page .assistant-action-group > summary::-webkit-details-marker,
.brand-skin-preview-v5 .workspace-page .assistant-more-tools > summary::-webkit-details-marker {
  display: none;
}

.brand-skin-preview-v5 .workspace-page .assistant-action-group > summary:hover,
.brand-skin-preview-v5 .workspace-page .assistant-more-tools > summary:hover {
  background: var(--x-hover);
}

.brand-skin-preview-v5 .workspace-page .assistant-action-group > summary small,
.brand-skin-preview-v5 .workspace-page .assistant-more-tools > summary small {
  color: var(--x-muted);
  font-size: 11px;
}

.brand-skin-preview-v5 .workspace-page .assistant-action-group > summary .icon,
.brand-skin-preview-v5 .workspace-page .assistant-more-tools > summary .icon {
  width: 14px;
  height: 14px;
  color: var(--x-muted);
  transition: transform 140ms ease;
}

.brand-skin-preview-v5 .workspace-page .assistant-action-group[open] > summary .icon,
.brand-skin-preview-v5 .workspace-page .assistant-more-tools[open] > summary .icon {
  transform: rotate(90deg);
}

.brand-skin-preview-v5 .workspace-page .assistant-action-group-body,
.brand-skin-preview-v5 .workspace-page .assistant-more-tools .assistant-actions {
  margin: 2px 8px 6px;
  padding: 4px;
  border-radius: 9px;
  background: var(--x-surface-soft);
}

.brand-skin-preview-v5 .workspace-page .assistant-action-group-body .assistant-action,
.brand-skin-preview-v5 .workspace-page .assistant-more-tools .assistant-action {
  min-height: 40px;
  padding: 0 8px;
  font-size: 12px;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry:hover {
  border-color: rgba(100, 226, 234, .38);
  background: var(--character-chat-gradient);
  box-shadow: 0 10px 22px rgba(11, 20, 40, .2);
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry:active {
  box-shadow: 0 5px 14px rgba(11, 20, 40, .16);
  filter: brightness(.98);
  transform: translateY(0);
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

/*
  2026-07-18 X-style closeout.
  Keep the approved page geometry; consolidate the visible UI around one blue,
  neutral surfaces, explicit type steps, and role-based control radii.
*/
.brand-skin-preview-v5 {
  --x-blue: #1d9bf0;
  --x-blue-hover: #1a8cd8;
  --x-blue-soft: #e8f5fd;
  --x-ink: #0f1419;
  --x-ink-2: #536471;
  --x-muted: #7b8a97;
  --x-line: #eff3f4;
  --x-line-strong: #cfd9de;
  --x-hover: rgba(15, 20, 25, .07);
  --x-surface-soft: #f7f9f9;
  --brand-blue: var(--x-blue);
  --brand-blue-strong: var(--x-blue-hover);
  --blue: var(--x-blue);
  --blue-ink: #167fc8;
  --blue-soft: var(--x-blue-soft);
  --line: var(--x-line);
  --line-strong: var(--x-line-strong);
  --text: var(--x-ink);
  --text-2: var(--x-ink-2);
  --muted: var(--x-muted);
  --focus-ring: rgba(29, 155, 240, .22);
  color: var(--x-ink);
}

.brand-skin-preview-v5 .brand strong,
.brand-skin-preview-v5 .workspace-project-name {
  color: var(--x-ink);
}

.brand-skin-preview-v5 .workspace-project-name {
  font-size: 13px;
  font-weight: 400;
}

.brand-skin-preview-v5 .topbar,
.brand-skin-preview-v5 .workspace-page .main-toolbar,
.brand-skin-preview-v5 .workspace-page .main-status,
.brand-skin-preview-v5 .workspace-page .assistant-tabs {
  border-color: var(--x-line);
  background: #fff;
}

.brand-skin-preview-v5 .ghost-button,
.brand-skin-preview-v5 .soft-button,
.brand-skin-preview-v5 .primary-button,
.brand-skin-preview-v5 .danger-button {
  min-height: 36px;
  padding-inline: 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}

.brand-skin-preview-v5 .ghost-button:hover,
.brand-skin-preview-v5 .workspace-page .main-toolbar .soft-button:hover,
.brand-skin-preview-v5 .workspace-page .main-toolbar .icon-button:hover {
  border-color: transparent;
  background: var(--x-hover);
  color: var(--x-ink);
}

.brand-skin-preview-v5 .soft-button {
  border-color: var(--x-line-strong);
  color: var(--x-ink);
}

.brand-skin-preview-v5 .library-tools .primary-button,
.brand-skin-preview-v5 .story-entry .primary-button,
.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions button[data-ai-action="按章纲续写正文"],
.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions button[data-ai-action="根据章纲生成正文"],
.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions button[data-ai-action="生成本章正文"],
.brand-skin-preview-v5 .workspace-page .chapter-generation-menu > summary {
  border-color: var(--x-blue);
  background: var(--x-blue);
  color: #fff;
  box-shadow: none;
}

.brand-skin-preview-v5 .library-tools .primary-button:hover,
.brand-skin-preview-v5 .story-entry .primary-button:hover,
.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions button[data-ai-action="按章纲续写正文"]:not(:disabled):hover,
.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions button[data-ai-action="根据章纲生成正文"]:not(:disabled):hover,
.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions button[data-ai-action="生成本章正文"]:not(:disabled):hover,
.brand-skin-preview-v5 .workspace-page .chapter-generation-menu > summary:hover {
  border-color: var(--x-blue-hover);
  background: var(--x-blue-hover);
}

.brand-skin-preview-v5 .story-entry {
  border: 0;
  background: var(--x-ink);
  box-shadow: 0 10px 26px rgba(15, 20, 25, .12);
}

.brand-skin-preview-v5 .story-entry:hover {
  box-shadow: 0 13px 30px rgba(15, 20, 25, .16);
}

.brand-skin-preview-v5 .story-entry-copy small {
  color: #8ecdf7;
}

.brand-skin-preview-v5 .shelf-stats,
.brand-skin-preview-v5 .book-card {
  border-color: var(--x-line);
  background: #fff;
}

.brand-skin-preview-v5 .shelf-stats strong,
.brand-skin-preview-v5 .library-heading h1,
.brand-skin-preview-v5 .book-card h2 {
  color: var(--x-ink);
}

.brand-skin-preview-v5 .book-card:hover {
  border-color: var(--x-line-strong);
  box-shadow: 0 8px 22px rgba(15, 20, 25, .07);
}

.brand-skin-preview-v5 .search-field:focus-within,
.brand-skin-preview-v5 .assistant-composer:focus-within {
  border-color: var(--x-blue);
  box-shadow: 0 0 0 3px rgba(29, 155, 240, .11);
}

.brand-skin-preview-v5 .workspace-page {
  --workspace-hover: var(--x-hover);
  --workspace-selected: var(--x-blue-soft);
  --workspace-selected-ink: #167fc8;
  --workspace-type-title: 700;
  --workspace-type-section: 600;
  --workspace-type-label: 500;
  --workspace-type-body: 400;
  --workspace-body-ink: var(--x-ink);
  --line: var(--x-line);
  --line-strong: var(--x-line-strong);
  --muted: var(--x-muted);
  --editor-reading-font: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif;
  --editor-reading-size: 18px;
  --editor-reading-line-height: 2;
  --editor-document-width: 880px;
}

.brand-skin-preview-v5 .workspace-page[data-editor-size="small"] {
  --editor-reading-size: 16px;
}

.brand-skin-preview-v5 .workspace-page[data-editor-size="large"] {
  --editor-reading-size: 20px;
}

.brand-skin-preview-v5 .workspace-page[data-editor-line-height="compact"] {
  --editor-reading-line-height: 1.7;
}

.brand-skin-preview-v5 .workspace-page[data-editor-line-height="loose"] {
  --editor-reading-line-height: 2.3;
}

.brand-skin-preview-v5 .workspace-page[data-editor-width="800"] {
  --editor-document-width: 800px;
}

.brand-skin-preview-v5 .workspace-page[data-editor-width="650"] {
  --editor-document-width: 650px;
}

.brand-skin-preview-v5 .workspace-page[data-editor-font="serif"] {
  --editor-reading-font: "Noto Serif SC", "Songti SC", SimSun, serif;
}

.brand-skin-preview-v5 .workspace-page[data-editor-font="kai"] {
  --editor-reading-font: KaiTi, STKaiti, serif;
}

.brand-skin-preview-v5 .workspace-page .module-rail,
.brand-skin-preview-v5 .workspace-page .context-column,
.brand-skin-preview-v5 .workspace-page .context-content,
.brand-skin-preview-v5 .workspace-page .assistant-panel,
.brand-skin-preview-v5 .workspace-page .assistant-body,
.brand-skin-preview-v5 .workspace-page .assistant-sticky-controls,
.brand-skin-preview-v5 .workspace-page .assistant-toolbox {
  border-color: var(--x-line);
}

.brand-skin-preview-v5 .workspace-page .module-rail,
.brand-skin-preview-v5 .workspace-page .assistant-panel,
.brand-skin-preview-v5 .workspace-page .assistant-body,
.brand-skin-preview-v5 .workspace-page .assistant-sticky-controls,
.brand-skin-preview-v5 .workspace-page .assistant-toolbox {
  background: #fff;
}

.brand-skin-preview-v5 .workspace-page .context-column,
.brand-skin-preview-v5 .workspace-page .context-content {
  background: var(--x-surface-soft);
}

.brand-skin-preview-v5 .workspace-page .rail-button,
.brand-skin-preview-v5 .workspace-page .rail-bottom-button {
  color: var(--x-ink-2);
  font-size: 13px;
  font-weight: 500;
}

.brand-skin-preview-v5 .workspace-page #moduleNav .rail-button.active,
.brand-skin-preview-v5 .workspace-page #moduleNav .rail-button.active:hover,
.brand-skin-preview-v5 .workspace-page .context-item.active,
.brand-skin-preview-v5 .workspace-page .context-item.active:hover,
.brand-skin-preview-v5 .workspace-page .context-item.active:focus-visible {
  background: var(--x-blue-soft);
  color: #167fc8;
}

.brand-skin-preview-v5 .workspace-page #moduleNav .rail-button:hover,
.brand-skin-preview-v5 .workspace-page .rail-bottom-button:hover,
.brand-skin-preview-v5 .workspace-page .context-item:hover {
  background: var(--x-hover);
  color: var(--x-ink);
}

.brand-skin-preview-v5 .workspace-page .context-item strong,
.brand-skin-preview-v5 .workspace-page .context-section-head strong,
.brand-skin-preview-v5 .workspace-page .book-summary strong {
  color: var(--x-ink);
}

.brand-skin-preview-v5 .workspace-page .context-item strong {
  font-size: 13px;
  font-weight: 500;
}

.brand-skin-preview-v5 .workspace-page .context-section-head strong,
.brand-skin-preview-v5 .workspace-page .book-summary strong {
  font-size: 14px;
  font-weight: 600;
}

.brand-skin-preview-v5 .workspace-page #mainContent .writing-title-row h1 {
  color: var(--x-ink);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
}

.brand-skin-preview-v5 .workspace-page #mainContent .writing-paper {
  color: var(--x-ink);
  font-family: var(--editor-reading-font);
  font-size: var(--editor-reading-size);
  font-weight: 400;
  line-height: var(--editor-reading-line-height);
}

.brand-skin-preview-v5 .workspace-page .assistant-tab {
  color: var(--x-ink-2);
  font-size: 14px;
  font-weight: 500;
}

.brand-skin-preview-v5 .workspace-page .assistant-tab.active {
  color: var(--x-ink);
  font-weight: 700;
}

.brand-skin-preview-v5 .workspace-page .assistant-tab.active::after {
  height: 3px;
  background: var(--x-blue);
}

.brand-skin-preview-v5 .workspace-page .assistant-composer {
  border-color: var(--x-line-strong);
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}

.brand-skin-preview-v5 .workspace-page .assistant-composer button {
  background: var(--x-ink);
}

.brand-skin-preview-v5 .workspace-page .assistant-composer button:hover {
  background: #272c30;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry {
  position: relative;
  isolation: isolate;
  min-height: 76px;
  grid-template-columns: 44px minmax(0, 1fr) 36px;
  gap: 14px;
  padding: 11px 14px 11px 12px;
  border: 1px solid #d7e1e8;
  border-radius: 22px;
  background: #fff;
  color: var(--x-ink);
  box-shadow: 0 7px 20px rgba(15, 20, 25, .07);
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
  overflow: hidden;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry::before {
  display: none;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry > * {
  position: relative;
  z-index: 1;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry:hover {
  border-color: #b9d3e5;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 20, 25, .1);
  filter: none;
  transform: translateY(-1px);
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry .character-chat-copy {
  gap: 3px;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry strong {
  color: var(--x-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry small {
  color: var(--x-muted);
  font-size: 12px;
  line-height: 1.35;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry .character-chat-visual {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #cfe0ed;
  border-radius: 50%;
  background: #f2f8fc;
  box-shadow: none;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry .character-chat-avatar {
  color: var(--x-blue);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry .character-chat-visual .icon {
  position: absolute;
  right: -2px;
  bottom: -1px;
  width: 17px;
  height: 17px;
  padding: 3px;
  border-radius: 50%;
  background: var(--x-blue);
  color: #fff;
  box-shadow: 0 0 0 2px #fff;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry > .icon:last-child {
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 50%;
  background: var(--x-ink);
  color: #fff;
  transition: transform 140ms ease, background 140ms ease;
}

.brand-skin-preview-v5 .workspace-page .character-chat-entry:hover > .icon:last-child {
  background: #272c30;
  transform: translateX(2px);
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-group {
  padding: 24px 0 8px;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-group + .project-info-group {
  margin-top: 18px;
  border-top: 1px solid var(--x-line);
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 4px;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-group-head h2 {
  margin: 0;
  color: var(--x-ink);
  font-size: 17px;
  font-weight: 700;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-group-head p {
  margin: 0;
  color: var(--x-muted);
  font-size: 12px;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .form-section {
  padding: 20px 0;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .form-section + .form-section {
  border-top: 1px solid var(--x-line);
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .field-pair {
  gap: 28px;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .scope-pair-follow {
  margin-top: 20px;
}

/* A role-play reply is authored by the character, so it must not wear the product mark. */
.brand-skin-preview-v5 .workspace-page .character-chat-thread .chat-message.ai > strong::before {
  display: none;
}

.brand-skin-preview-v5 .story-entry,
.brand-skin-preview-v5 .shelf-stats,
.brand-skin-preview-v5 .book-card {
  border-radius: 12px;
}

.brand-skin-preview-v5 .search-field,
.brand-skin-preview-v5 .library-tools select {
  border-radius: 999px;
}

.brand-skin-preview-v5 #moduleNav .rail-button[data-module="project"].active::before {
  background-color: var(--x-blue);
}

/* Reference content is primary reading copy, not secondary metadata. */
.brand-skin-preview-v5 .workspace-page .writing-reference-document > .assistant-outline-reference-editor,
.brand-skin-preview-v5 .workspace-page .writing-reference-prose p,
.brand-skin-preview-v5 .workspace-page .writing-reference-field > p {
  color: var(--x-ink);
}

/* Generation length is a neutral control; blue appears only on focus. */
.brand-skin-preview-v5 .workspace-page .assistant-generation-action select {
  height: 34px;
  padding: 0 30px 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--x-surface-soft);
  color: var(--x-ink-2);
  font-size: 13px;
  font-weight: 500;
}

.brand-skin-preview-v5 .workspace-page .assistant-generation-action select:hover {
  background: var(--x-line);
  color: var(--x-ink);
}

.brand-skin-preview-v5 .workspace-page .assistant-generation-action select:focus-visible {
  border-color: var(--x-blue);
  outline: 2px solid rgba(29, 155, 240, .2);
  outline-offset: 1px;
}

.brand-skin-preview-v5 .workspace-page .assistant-generation-action > button {
  padding: 0;
}

/* One scrollbar language across the formal experience. */
body.brand-skin-preview-v5,
body.brand-skin-preview-v5 * {
  scrollbar-width: thin !important;
  scrollbar-color: #b7c0cc transparent !important;
}

body.brand-skin-preview-v5::-webkit-scrollbar,
body.brand-skin-preview-v5 *::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

body.brand-skin-preview-v5::-webkit-scrollbar-track,
body.brand-skin-preview-v5 *::-webkit-scrollbar-track,
body.brand-skin-preview-v5::-webkit-scrollbar-track-piece,
body.brand-skin-preview-v5 *::-webkit-scrollbar-track-piece,
body.brand-skin-preview-v5::-webkit-scrollbar-corner,
body.brand-skin-preview-v5 *::-webkit-scrollbar-corner {
  background: transparent !important;
}

body.brand-skin-preview-v5::-webkit-scrollbar-thumb,
body.brand-skin-preview-v5 *::-webkit-scrollbar-thumb {
  min-width: 32px !important;
  min-height: 32px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: #b7c0cc !important;
  background-clip: padding-box !important;
}

body.brand-skin-preview-v5::-webkit-scrollbar-thumb:hover,
body.brand-skin-preview-v5 *::-webkit-scrollbar-thumb:hover {
  background: #8f9aa8 !important;
  background-clip: padding-box !important;
}

body.brand-skin-preview-v5::-webkit-scrollbar-button,
body.brand-skin-preview-v5 *::-webkit-scrollbar-button,
body.brand-skin-preview-v5::-webkit-scrollbar-button:single-button,
body.brand-skin-preview-v5 *::-webkit-scrollbar-button:single-button,
body.brand-skin-preview-v5::-webkit-scrollbar-button:start,
body.brand-skin-preview-v5 *::-webkit-scrollbar-button:start,
body.brand-skin-preview-v5::-webkit-scrollbar-button:end,
body.brand-skin-preview-v5 *::-webkit-scrollbar-button:end {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Related-material empty state: preserve the panel, open up the text group. */
.brand-skin-preview-v5 .workspace-page #mainContent .empty-document {
  padding-top: 56px;
}

.brand-skin-preview-v5 .workspace-page #mainContent .empty-document .kicker {
  margin-bottom: 18px;
  line-height: 1.4;
}

.brand-skin-preview-v5 .workspace-page #mainContent .empty-document h1 {
  margin: 0;
  line-height: 1.3;
}

.brand-skin-preview-v5 .workspace-page #mainContent .empty-document .document-lead {
  max-width: 520px;
  margin-top: 14px;
  line-height: 1.8;
}

.brand-skin-preview-v5 .workspace-page #mainContent .empty-document .soft-button {
  margin-top: 20px;
}

/* Direction, character and inspiration documents share the same content gutter as the writing views. */
.brand-skin-preview-v5 .workspace-page #mainContent > .document,
.brand-skin-preview-v5 .workspace-page #mainContent > .document.narrow,
.brand-skin-preview-v5 .workspace-page #mainContent > .document.wide {
  width: min(var(--editor-document-width), calc(100% - 64px));
  padding: 44px 0 112px;
}

.brand-skin-preview-v5 .modal.persona-settings-modal {
  width: 760px;
  height: 620px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
}

.brand-skin-preview-v5 .persona-settings-modal .modal-body {
  max-height: none;
  padding-top: 8px;
}

.brand-skin-preview-v5 .persona-settings-modal .persona-panel-head-modal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  padding: 8px 0 20px;
}

.brand-skin-preview-v5 .persona-settings-modal .persona-panel-head-modal p {
  max-width: 420px;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
}

.brand-skin-preview-v5 .persona-settings-modal .persona-panel-head-modal .segmented-control {
  width: 260px;
  margin-top: 0;
}

.brand-skin-preview-v5 .persona-settings-modal .persona-section {
  padding: 20px 0;
}

.brand-skin-preview-v5 .persona-settings-modal .persona-select {
  height: 42px;
  font-size: 13px;
}

.brand-skin-preview-v5 .persona-settings-modal .persona-compact-actions {
  padding: 16px 0 0;
}

.brand-skin-preview-v5 .workspace-page .assistant-panel.single-tab .assistant-tabs {
  justify-content: flex-end;
  gap: 0;
}

.brand-skin-preview-v5 .workspace-page .assistant-panel.single-tab .assistant-tab {
  display: none;
}

/* Voice is secondary to send: keep its hit target, remove the persistent disc. */
.brand-skin-preview-v5 .workspace-page .assistant-composer .composer-voice {
  background: transparent;
  color: #66758d;
}

.brand-skin-preview-v5 .workspace-page .assistant-composer .composer-voice:hover {
  background: var(--x-hover);
  color: var(--x-ink-2);
}

.brand-skin-preview-v5 .workspace-page .assistant-composer .composer-voice .icon {
  width: 18px;
  height: 18px;
}

.brand-skin-preview-v5 .workspace-page .assistant-composer .composer-voice.active {
  background: var(--x-blue-soft);
  color: var(--x-blue-hover);
}

/* Reopening the assistant is a product action, not a second brand placement. */
.brand-skin-preview-v5 .workspace-page .assistant-reopen {
  background: var(--x-ink);
  box-shadow: 0 8px 22px rgba(15, 20, 25, .16);
}

.brand-skin-preview-v5 .workspace-page .assistant-reopen:hover {
  background: #272c30;
  box-shadow: 0 10px 26px rgba(15, 20, 25, .2);
}

.brand-skin-preview-v5 .workspace-page .assistant-reopen .icon {
  display: block;
  width: 16px;
  height: 16px;
}

.brand-skin-preview-v5 .workspace-page .assistant-reopen::before {
  display: none;
}

/* Writing actions use one shared disclosure; only the related optimization subgroup nests inside it. */
.brand-skin-preview-v5 .workspace-page .assistant-toolbox-static {
  padding: 12px 0 8px;
  background: #fff;
}

.brand-skin-preview-v5 .workspace-page .assistant-toolbox-static .assistant-toolbox-body {
  padding: 8px 0 0;
}

/* Optimization is an expandable tool row, not a separate selected-card component. */
.brand-skin-preview-v5 .workspace-page .assistant-action-group {
  border-radius: 999px;
}

.brand-skin-preview-v5 .workspace-page .assistant-action-group > summary {
  border-radius: 999px;
  color: #5d687b;
}

.brand-skin-preview-v5 .workspace-page .assistant-action-group-body {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.brand-skin-preview-v5 .workspace-page .assistant-action-group-body .assistant-action {
  min-height: 46px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
}

/* AI orchestration layer: visible scope, contextual next steps, quiet full-tool fallback. */
.brand-skin-preview-v5 .workspace-page .assistant-context-card {
  display: grid;
  gap: 10px;
  margin: 0 14px 8px;
  padding: 12px 14px;
  border: 1px solid #e6edf3;
  border-radius: 16px;
  background: #f7f9fb;
}

.brand-skin-preview-v5 .workspace-page .assistant-context-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  font-size: 12px;
  line-height: 1.55;
}

.brand-skin-preview-v5 .workspace-page .assistant-context-line > span {
  color: #758399;
  white-space: nowrap;
}

.brand-skin-preview-v5 .workspace-page .assistant-context-line > strong {
  min-width: 0;
  color: #243246;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.brand-skin-preview-v5 .workspace-page .assistant-memory-line {
  display: grid;
  grid-template-columns: 7px auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  color: #7c899b;
  font-size: 11px;
  line-height: 1.4;
}

.brand-skin-preview-v5 .workspace-page .assistant-memory-line i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b8c3d0;
}

.brand-skin-preview-v5 .workspace-page .assistant-memory-line.is-ready i {
  background: var(--x-blue);
}

.brand-skin-preview-v5 .workspace-page .assistant-memory-line span {
  color: #536176;
  font-weight: 600;
  white-space: nowrap;
}

.brand-skin-preview-v5 .workspace-page .assistant-memory-line small {
  min-width: 0;
  color: #8490a1;
  font-size: 11px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-skin-preview-v5 .workspace-page .assistant-recommendations {
  padding: 6px 14px 10px;
}

.brand-skin-preview-v5 .workspace-page .assistant-recommendations > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 0 10px;
}

.brand-skin-preview-v5 .workspace-page .assistant-recommendations > header strong {
  color: #182230;
  font-size: 12px;
  font-weight: 700;
}

.brand-skin-preview-v5 .workspace-page .assistant-recommendations > header small {
  color: #8b97a7;
  font-size: 11px;
}

.brand-skin-preview-v5 .workspace-page .assistant-actions-recommended {
  gap: 4px;
}

.brand-skin-preview-v5 .workspace-page .assistant-actions-recommended > .assistant-action,
.brand-skin-preview-v5 .workspace-page .assistant-actions-recommended > .assistant-generation-action {
  min-height: 46px;
  border-radius: 999px;
}

.brand-skin-preview-v5 .workspace-page .assistant-actions-recommended > :first-child {
  background: #f0f7fd;
  color: #1678c8;
}

.brand-skin-preview-v5 .workspace-page .assistant-actions-recommended > :first-child:hover {
  background: #e7f3fc;
}

.brand-skin-preview-v5 .workspace-page .assistant-more-tools {
  margin: 0 0 8px;
  border-top: 1px solid #edf1f4;
}

.brand-skin-preview-v5 .workspace-page .assistant-more-tools > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  color: #5f6f84;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  border-radius: 12px;
}

.brand-skin-preview-v5 .workspace-page .assistant-more-tools > summary::-webkit-details-marker {
  display: none;
}

.brand-skin-preview-v5 .workspace-page .assistant-more-tools > summary:hover {
  background: #f6f8fa;
}

.brand-skin-preview-v5 .workspace-page .assistant-more-tools > summary:focus-visible {
  outline: 2px solid rgba(29, 155, 240, .24);
  outline-offset: -2px;
}

.brand-skin-preview-v5 .workspace-page .assistant-more-tools > summary small {
  color: #96a1af;
  font-size: 11px;
  font-weight: 500;
  text-align: right;
}

.brand-skin-preview-v5 .workspace-page .assistant-more-tools > summary .icon {
  width: 14px;
  height: 14px;
  color: #9aa6b3;
  transition: transform 140ms ease;
}

.brand-skin-preview-v5 .workspace-page .assistant-more-tools[open] > summary .icon {
  transform: rotate(90deg);
}

.brand-skin-preview-v5 .workspace-page .assistant-more-tools-body {
  padding: 4px 0 8px;
}

.brand-skin-preview-v5 .workspace-page .assistant-tool-list {
  display: grid;
  gap: 2px;
  margin: 2px 0 0;
  padding: 8px;
  border-radius: 16px;
  background: #f6f8fa;
}

.brand-skin-preview-v5 .workspace-page .assistant-tools-unified[open] .assistant-tool-list {
  border: 1px solid rgba(15, 20, 25, .035);
  box-shadow:
    0 1px 2px rgba(15, 20, 25, .035),
    0 7px 18px rgba(15, 20, 25, .07);
}

.brand-skin-preview-v5 .workspace-page .assistant-tool-list > .assistant-actions,
.brand-skin-preview-v5 .workspace-page .assistant-secondary-tools > .assistant-actions {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.brand-skin-preview-v5 .workspace-page .assistant-tool-list .assistant-action {
  border-radius: 12px;
}

.brand-skin-preview-v5 .workspace-page .assistant-tool-list .assistant-action:hover {
  background: #fff;
}

.brand-skin-preview-v5 .workspace-page .assistant-tool-list .assistant-generation-primary {
  min-height: 58px;
  padding: 0 12px;
  border-radius: 14px;
  background: #eaf5fd;
  color: #147bc2;
}

.brand-skin-preview-v5 .workspace-page .assistant-tool-list .assistant-generation-primary:hover {
  background: #dff0fb;
}

.brand-skin-preview-v5 .workspace-page .assistant-actions-core {
  padding-top: 4px !important;
}

.brand-skin-preview-v5 .workspace-page .assistant-secondary-tools {
  border-top: 1px solid #e8edf1;
}

.brand-skin-preview-v5 .workspace-page .assistant-secondary-tools > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 14px;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 12px;
  color: #627286;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.brand-skin-preview-v5 .workspace-page .assistant-secondary-tools > summary::-webkit-details-marker {
  display: none;
}

.brand-skin-preview-v5 .workspace-page .assistant-secondary-tools > summary:hover {
  background: #fff;
  color: #263746;
}

.brand-skin-preview-v5 .workspace-page .assistant-secondary-tools > summary:focus-visible {
  outline: 2px solid rgba(29, 155, 240, .24);
  outline-offset: -2px;
}

.brand-skin-preview-v5 .workspace-page .assistant-secondary-tools > summary small {
  color: #97a3b0;
  font-size: 11px;
  font-weight: 500;
}

.brand-skin-preview-v5 .workspace-page .assistant-secondary-tools > summary .icon {
  width: 14px;
  height: 14px;
  color: #9aa6b3;
  transition: transform 140ms ease;
}

.brand-skin-preview-v5 .workspace-page .assistant-secondary-tools[open] > summary .icon {
  transform: rotate(90deg);
}

.brand-skin-preview-v5 .workspace-page .assistant-generation-primary .assistant-action-copy {
  display: grid;
  gap: 2px;
}

.brand-skin-preview-v5 .workspace-page .assistant-generation-primary .assistant-action-copy strong {
  color: #0f78bf;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.brand-skin-preview-v5 .workspace-page .assistant-generation-primary .assistant-action-copy small {
  color: #6f8da4;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.brand-skin-preview-v5 .workspace-page .assistant-generation-primary select {
  background: #fff;
  color: #4f6477;
}

.brand-skin-preview-v5 .workspace-page .assistant-generation-primary > .icon {
  color: #6ba5cd;
}

.brand-skin-preview-v5 .workspace-page .assistant-actions-all {
  gap: 2px;
}

.brand-skin-preview-v5 .workspace-page .assistant-actions-all .assistant-action,
.brand-skin-preview-v5 .workspace-page .assistant-actions-all .assistant-generation-action,
.brand-skin-preview-v5 .workspace-page .assistant-actions-all .assistant-action-group {
  min-height: 44px;
}

.brand-skin-preview-v5 .workspace-page .assistant-execution-result {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #e5e9ee;
  border-radius: 14px;
  background: #f7f9fb;
  color: #405267;
}

.brand-skin-preview-v5 .workspace-page .assistant-execution-result > i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  margin-top: 6px;
  border-radius: 50%;
  background: #1797e8;
}

.brand-skin-preview-v5 .workspace-page .assistant-execution-result > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.brand-skin-preview-v5 .workspace-page .assistant-execution-result strong {
  color: #17212b;
  font-size: 13px;
  line-height: 1.45;
}

.brand-skin-preview-v5 .workspace-page .assistant-execution-result small {
  overflow: hidden;
  color: #718096;
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-skin-preview-v5 .workspace-page .assistant-execution-result.is-error > i {
  background: #8e9aa7;
}

.brand-skin-preview-v5 .workspace-page .assistant-clear-history {
  width: calc(100% - 20px);
  min-height: 38px;
  margin: 6px 10px 0;
  border: 0;
  border-top: 1px solid #edf1f4;
  background: transparent;
  color: #8894a3;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
}

.brand-skin-preview-v5 .workspace-page .assistant-clear-history:hover {
  color: #17212b;
}

.brand-skin-preview-v5 .workspace-page .assistant-history-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 2px 14px;
  color: #98a3af;
  font-size: 11px;
  white-space: nowrap;
}

.brand-skin-preview-v5 .workspace-page .assistant-history-divider::before,
.brand-skin-preview-v5 .workspace-page .assistant-history-divider::after {
  height: 1px;
  flex: 1;
  background: #edf1f4;
  content: '';
}

/* Canonical workspace header, picker and dialog primitives. */
.brand-skin-preview-v5 .workspace-topbar-divider {
  width: 1px;
  height: 24px;
  margin: 0 8px;
  background: #e5e9ee;
}

.brand-skin-preview-v5 .workspace-page .assistant-generation-action {
  overflow: visible;
}

.brand-skin-preview-v5 .workspace-page .assistant-word-count-picker {
  position: relative;
  z-index: 8;
  flex: 0 0 auto;
}

.brand-skin-preview-v5 .workspace-page .assistant-word-count-picker > summary {
  min-width: 112px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #fff;
  color: #4f6477;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

.brand-skin-preview-v5 .workspace-page .assistant-word-count-picker > summary::-webkit-details-marker {
  display: none;
}

.brand-skin-preview-v5 .workspace-page .assistant-word-count-picker > summary:hover {
  background: #f7f9fb;
  color: #17212b;
}

.brand-skin-preview-v5 .workspace-page .assistant-word-count-picker > summary:focus-visible {
  border-color: #1d9bf0;
  outline: 3px solid rgba(29, 155, 240, .16);
}

.brand-skin-preview-v5 .workspace-page .assistant-word-count-picker > summary .icon {
  width: 14px;
  height: 14px;
  color: #718096;
  transition: transform 140ms ease;
}

.brand-skin-preview-v5 .workspace-page .assistant-word-count-picker[open] > summary .icon {
  transform: rotate(90deg);
}

.brand-skin-preview-v5 .workspace-page .assistant-word-count-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 148px;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid #dfe5ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 32, .14);
}

.brand-skin-preview-v5 .workspace-page .assistant-word-count-menu button {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #4f6477;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.brand-skin-preview-v5 .workspace-page .assistant-word-count-menu button:hover {
  background: #f4f8fb;
  color: #17212b;
}

.brand-skin-preview-v5 .workspace-page .assistant-word-count-menu button.active {
  background: #e8f4fd;
  color: #0f78bf;
  font-weight: 650;
}

.brand-skin-preview-v5 .workspace-page .assistant-word-count-menu button .icon {
  width: 15px;
  height: 15px;
  color: #1d9bf0;
}

.brand-skin-preview-v5 .modal-backdrop {
  padding: 24px;
  background: rgba(20, 28, 36, .28);
  backdrop-filter: blur(3px);
}

.brand-skin-preview-v5 .modal {
  width: min(600px, calc(100vw - 48px));
  max-height: min(760px, calc(100vh - 48px));
  border: 1px solid #dfe5ea;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(15, 23, 32, .16);
}

.brand-skin-preview-v5 .modal.compact {
  width: min(460px, calc(100vw - 48px));
}

.brand-skin-preview-v5 .modal.wide:not(.stats-modal):not(.transform-modal):not(.persona-settings-modal):not(.membership-upgrade-modal):not(.plot-search-modal) {
  width: min(780px, calc(100vw - 48px));
}

.brand-skin-preview-v5 .modal > header {
  min-height: 68px;
  padding: 0 24px;
  border-bottom-color: #edf1f4;
}

.brand-skin-preview-v5 .modal > header > div {
  gap: 3px;
}

.brand-skin-preview-v5 .modal > header small {
  color: #1d9bf0;
  font-size: 11px;
  font-weight: 600;
}

.brand-skin-preview-v5 .modal > header h2 {
  color: #17212b;
  font-size: 18px;
  line-height: 1.35;
}

.brand-skin-preview-v5 .modal-body {
  padding: 24px;
}

.brand-skin-preview-v5 .modal > footer {
  min-height: 64px;
  gap: 10px;
  padding: 0 24px;
  border-top-color: #edf1f4;
}

.brand-skin-preview-v5 .modal-field {
  gap: 8px;
  margin-top: 20px;
}

.brand-skin-preview-v5 .modal-field label,
.brand-skin-preview-v5 .modal-choice strong,
.brand-skin-preview-v5 .modal-list-row strong {
  color: #17212b;
  font-size: 13px;
  font-weight: 650;
}

.brand-skin-preview-v5 .modal .field-input,
.brand-skin-preview-v5 .modal .field-textarea {
  border-color: #d7e0e8;
  border-radius: 12px;
  background: #fff;
  color: #17212b;
  font-size: 13px;
}

.brand-skin-preview-v5 .modal .field-input {
  height: 44px;
  padding: 0 14px;
}

.brand-skin-preview-v5 .modal .field-textarea {
  padding: 12px 14px;
  line-height: 1.7;
}

.brand-skin-preview-v5 .modal .field-input:focus,
.brand-skin-preview-v5 .modal .field-textarea:focus {
  border-color: #1d9bf0;
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 155, 240, .14);
}

.brand-skin-preview-v5 .modal .selection-pill {
  min-height: 36px;
  padding: 0 14px;
  border-color: #dfe5ea;
  border-radius: 999px;
  background: #fff;
  color: #526579;
  font-size: 12px;
}

.brand-skin-preview-v5 .modal .selection-pill:hover {
  border-color: #a9cfe9;
  background: #f6fafd;
}

.brand-skin-preview-v5 .modal .selection-pill.active,
.brand-skin-preview-v5 .modal .selection-pill[aria-pressed="true"] {
  border-color: #b8daf0;
  background: #e8f4fd;
  color: #0f78bf;
}

.brand-skin-preview-v5 .modal-choice-grid {
  gap: 12px;
  margin-top: 16px;
}

.brand-skin-preview-v5 .modal-choice {
  min-height: 76px;
  padding: 14px 16px;
  border-color: #dfe5ea;
  border-radius: 14px;
  background: #fff;
}

.brand-skin-preview-v5 .modal-choice:hover,
.brand-skin-preview-v5 .modal-choice.active,
.brand-skin-preview-v5 .modal-choice[aria-pressed="true"] {
  border-color: #b8daf0;
  background: #eef7fd;
}

.brand-skin-preview-v5 .modal-list {
  border-top-color: #edf1f4;
}

.brand-skin-preview-v5 .modal-list-row {
  min-height: 58px;
  gap: 12px;
  border-bottom-color: #edf1f4;
}

.brand-skin-preview-v5 .modal-list-row span,
.brand-skin-preview-v5 .modal-choice span,
.brand-skin-preview-v5 .modal-field small {
  color: #718096;
  font-size: 12px;
}

/* Pending assistant state relies on its text; decorative dots add visual noise. */
.brand-skin-preview-v5 .assistant-message-status.is-pending span::after,
.brand-skin-preview-v5 .assistant-pending-message p::after,
.brand-skin-preview-v5 .assistant-pending-message .chat-message-text::after {
  content: none;
  display: none;
  animation: none;
}

/* Long-form writing surfaces use a caret, not a form-field focus frame. */
.brand-skin-preview-v5 .workspace-page #mainContent .chapter-outline-main-editor,
.brand-skin-preview-v5 .workspace-page #mainContent .outline-free-paper,
.brand-skin-preview-v5 .workspace-page #mainContent .settings-free-paper,
.brand-skin-preview-v5 .workspace-page #mainContent .related-editor,
.brand-skin-preview-v5 .workspace-page .writing-reference-document > .assistant-outline-reference-editor,
.brand-skin-preview-v5 .workspace-page .writing-reference-inline-editor {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.brand-skin-preview-v5 .workspace-page #mainContent .chapter-outline-main-editor:focus,
.brand-skin-preview-v5 .workspace-page #mainContent .chapter-outline-main-editor:focus-visible,
.brand-skin-preview-v5 .workspace-page #mainContent .outline-free-paper:focus,
.brand-skin-preview-v5 .workspace-page #mainContent .outline-free-paper:focus-visible,
.brand-skin-preview-v5 .workspace-page #mainContent .settings-free-paper:focus,
.brand-skin-preview-v5 .workspace-page #mainContent .settings-free-paper:focus-visible,
.brand-skin-preview-v5 .workspace-page #mainContent .related-editor:focus,
.brand-skin-preview-v5 .workspace-page #mainContent .related-editor:focus-visible,
.brand-skin-preview-v5 .workspace-page .writing-reference-document > .assistant-outline-reference-editor:focus,
.brand-skin-preview-v5 .workspace-page .writing-reference-document > .assistant-outline-reference-editor:focus-visible,
.brand-skin-preview-v5 .workspace-page .writing-reference-inline-editor:focus,
.brand-skin-preview-v5 .workspace-page .writing-reference-inline-editor:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-inline-prose {
  min-height: 320px;
  padding: 18px 0;
  color: #17212b;
  font-size: 14px;
  line-height: 1.95;
  resize: none;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-inline-editor {
  width: 100%;
  min-height: 62px;
  padding: 0;
  color: #263746;
  font: inherit;
  font-size: 13px;
  line-height: 1.8;
  resize: vertical;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-inline-editor::placeholder,
.brand-skin-preview-v5 .workspace-page .writing-reference-inline-prose::placeholder {
  color: #a0acb8;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-field {
  display: block;
  cursor: text;
}

.brand-skin-preview-v5 .diff-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  color: #718096;
  font-size: 12px;
}

.brand-skin-preview-v5 .diff-legend span::before {
  width: 8px;
  height: 8px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 50%;
  content: '';
}

.brand-skin-preview-v5 .diff-legend .is-removed::before {
  background: #d58a8a;
}

.brand-skin-preview-v5 .diff-legend .is-added::before {
  background: #54a37a;
}

.brand-skin-preview-v5 .real-revision-diff {
  border-color: #dfe5ea;
  border-radius: 14px;
}

.brand-skin-preview-v5 .real-revision-diff section {
  max-height: 480px;
  padding: 18px;
  overflow: auto;
  background: #fbfcfd;
}

.brand-skin-preview-v5 .real-revision-diff h3 {
  margin-bottom: 14px;
  color: #526579;
  font-size: 12px;
}

.brand-skin-preview-v5 .real-revision-diff .diff-copy p {
  margin: 0 0 10px;
  color: #263746;
  font-size: 13px;
  line-height: 1.85;
  white-space: pre-wrap;
}

.brand-skin-preview-v5 .real-revision-diff .diff-copy p:last-child {
  margin-bottom: 0;
}

.brand-skin-preview-v5 .real-revision-diff del,
.brand-skin-preview-v5 .real-revision-diff mark {
  padding: 1px 2px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.brand-skin-preview-v5 .real-revision-diff del {
  background: #fdecec;
  color: #8f4646;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.brand-skin-preview-v5 .real-revision-diff mark {
  background: #e4f4ea;
  color: #21633f;
}

.brand-skin-preview-v5 .diff-summary {
  margin-top: 14px !important;
}

/* X-like desktop type scale: readable at full screen without loosening the editor layout. */
.brand-skin-preview-v5 {
  --x-type-body: 15px;
  --x-type-label: 14px;
  --x-type-meta: 13px;
  --x-type-panel-title: 18px;
}

.brand-skin-preview-v5 .topbar .ghost-button,
.brand-skin-preview-v5 .topbar .save-state,
.brand-skin-preview-v5 .library-tools input,
.brand-skin-preview-v5 .library-tools select {
  font-size: var(--x-type-meta);
}

.brand-skin-preview-v5 .shelf-page .library-heading p,
.brand-skin-preview-v5 .shelf-page .book-card p,
.brand-skin-preview-v5 .shelf-page .book-meta,
.brand-skin-preview-v5 .shelf-page .shelf-stats span {
  font-size: var(--x-type-meta);
  line-height: 1.65;
}

.brand-skin-preview-v5 .workspace-page .rail-button span,
.brand-skin-preview-v5 .workspace-page .rail-bottom-button span,
.brand-skin-preview-v5 .workspace-page .main-toolbar button,
.brand-skin-preview-v5 .workspace-page .main-status {
  font-size: var(--x-type-meta);
}

.brand-skin-preview-v5 .workspace-page .book-summary strong,
.brand-skin-preview-v5 .workspace-page .context-section-head strong,
.brand-skin-preview-v5 .workspace-page .context-item strong {
  font-size: var(--x-type-label);
  line-height: 1.45;
}

.brand-skin-preview-v5 .workspace-page .book-summary small,
.brand-skin-preview-v5 .workspace-page .book-summary p,
.brand-skin-preview-v5 .workspace-page .context-item small,
.brand-skin-preview-v5 .workspace-page .context-item em,
.brand-skin-preview-v5 .workspace-page .context-footer {
  font-size: var(--x-type-meta);
  line-height: 1.55;
}

.brand-skin-preview-v5 .workspace-page .assistant-tab {
  font-size: var(--x-type-body);
}

.brand-skin-preview-v5 .workspace-page .assistant-session-summary strong,
.brand-skin-preview-v5 .workspace-page .assistant-more-tools > summary > span,
.brand-skin-preview-v5 .workspace-page .assistant-tools-unified > summary > span,
.brand-skin-preview-v5 .workspace-page .writing-reference-links button {
  font-size: var(--x-type-label);
}

.brand-skin-preview-v5 .workspace-page .assistant-session-summary button,
.brand-skin-preview-v5 .workspace-page .assistant-context-status,
.brand-skin-preview-v5 .workspace-page .assistant-more-tools > summary small,
.brand-skin-preview-v5 .workspace-page .assistant-secondary-tools > summary,
.brand-skin-preview-v5 .workspace-page .assistant-secondary-tools > summary small,
.brand-skin-preview-v5 .workspace-page .assistant-clear-history {
  font-size: var(--x-type-meta);
}

.brand-skin-preview-v5 .workspace-page .assistant-action,
.brand-skin-preview-v5 .workspace-page .assistant-actions-all .assistant-action,
.brand-skin-preview-v5 .workspace-page .assistant-generation-primary .assistant-action-copy strong {
  font-size: var(--x-type-label);
}

.brand-skin-preview-v5 .workspace-page .assistant-generation-primary .assistant-action-copy small {
  font-size: 12px;
}

.brand-skin-preview-v5 .workspace-page .chat-message > strong,
.brand-skin-preview-v5 .workspace-page .assistant-message-status,
.brand-skin-preview-v5 .workspace-page .assistant-history-divider {
  font-size: var(--x-type-meta);
}

.brand-skin-preview-v5 .workspace-page .chat-message-text,
.brand-skin-preview-v5 .workspace-page .chat-message-text p,
.brand-skin-preview-v5 .workspace-page .chat-message-text li {
  font-size: var(--x-type-body);
  line-height: 1.75;
}

.brand-skin-preview-v5 .workspace-page .assistant-continue-truncated {
  min-height: 34px;
  margin-top: 10px;
  padding: 0 12px;
  border: 1px solid #cfe2ef;
  border-radius: 999px;
  background: #f7fbfe;
  color: #0f78bf;
  font-size: var(--x-type-meta);
  font-weight: 600;
  cursor: pointer;
}

.brand-skin-preview-v5 .workspace-page .assistant-continue-truncated:hover {
  border-color: #a9cfe9;
  background: #eaf5fd;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-document > header h2 {
  font-size: var(--x-type-panel-title);
}

.brand-skin-preview-v5 .workspace-page .writing-reference-document > header span,
.brand-skin-preview-v5 .workspace-page .writing-reference-document > header small,
.brand-skin-preview-v5 .workspace-page .writing-reference-document > header button,
.brand-skin-preview-v5 .workspace-page .writing-reference-select,
.brand-skin-preview-v5 .workspace-page .writing-reference-field > span {
  font-size: var(--x-type-meta);
}

@media (max-width: 980px) {
  .brand-skin-preview-v5 {
    --x-type-body: 14px;
    --x-type-label: 13px;
    --x-type-meta: 12px;
  }
}

/* One select system for every page and dialog. Native popup chrome stays hidden. */
.brand-skin-preview-v5 .ui-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.brand-skin-preview-v5 .ui-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.brand-skin-preview-v5 .ui-select-trigger {
  width: 100%;
  min-width: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid #d7e0e8;
  border-radius: 12px;
  background: #fff;
  color: #17212b;
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.brand-skin-preview-v5 .ui-select-trigger > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-skin-preview-v5 .ui-select-trigger > .icon,
.brand-skin-preview-v5 .workspace-page .assistant-word-count-picker > summary > .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: #657786;
}

.brand-skin-preview-v5 .ui-select-trigger:hover {
  border-color: #b8c7d3;
  background: #fbfcfd;
}

.brand-skin-preview-v5 .ui-select-trigger:focus-visible,
.brand-skin-preview-v5 .ui-select-trigger[aria-expanded="true"] {
  border-color: #1d9bf0;
  outline: none;
  box-shadow: 0 0 0 3px rgba(29, 155, 240, .14);
}

.brand-skin-preview-v5 .ui-select-trigger[aria-expanded="true"] > .icon {
  transform: rotate(90deg);
}

.brand-skin-preview-v5 .library-tools .ui-select {
  width: 132px;
  flex: 0 0 132px;
}

.brand-skin-preview-v5 .library-tools .ui-select-trigger {
  height: 40px;
  border-radius: 999px;
}

.brand-skin-preview-v5 .writing-reference-select .ui-select-trigger {
  margin-top: 6px;
}

.ui-select-menu-portal {
  position: fixed;
  z-index: 1500;
  display: grid;
  gap: 2px;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #dfe5ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(15, 23, 32, .16);
}

.ui-select-menu-portal button {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #526579;
  font: 500 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
  cursor: pointer;
}

.ui-select-menu-portal button:hover,
.ui-select-menu-portal button:focus-visible {
  outline: none;
  background: #f2f8fc;
  color: #17212b;
}

.ui-select-menu-portal button.active {
  background: #e8f4fd;
  color: #0f78bf;
  font-weight: 650;
}

.ui-select-menu-portal button .icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  color: #1d9bf0;
}

/* Keep the generation length control fully inside its blue action row. */
.brand-skin-preview-v5 .workspace-page .assistant-generation-action {
  overflow: visible;
  padding-right: 8px;
}

.brand-skin-preview-v5 .workspace-page .assistant-word-count-picker {
  max-width: 116px;
}

.brand-skin-preview-v5 .workspace-page .assistant-word-count-picker > summary {
  width: 116px;
  min-width: 0;
  height: 38px;
  box-sizing: border-box;
  padding: 0 12px 0 15px;
}

/* Brand belongs in the global header, not above every AI reply. */
.brand-skin-preview-v5 .workspace-brand {
  flex: 0 0 auto;
}

/* All four reference pages share one header, action and reading rhythm. */
.brand-skin-preview-v5 .workspace-page .writing-reference-chapter {
  padding-top: 26px;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-chapter > header {
  align-items: flex-start;
  padding-bottom: 14px;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-chapter > header h2 {
  color: #17212b;
  font-size: 19px;
  font-weight: 700;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-header-actions .primary-button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #1d9bf0;
  border-radius: 999px;
  background: #1d9bf0;
  color: #fff;
  font-weight: 650;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-header-actions .primary-button:hover {
  border-color: #168bd7;
  background: #168bd7;
  color: #fff;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-chapter > .assistant-outline-reference-editor {
  margin-top: 0;
  padding-top: 17px;
  border-top: 0;
  color: #17212b;
  font-size: 15px;
  line-height: 2;
}

/* Project direction is one continuous form, not a stack of detached rows. */
.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-group {
  padding: 26px 0 8px;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-group + .project-info-group {
  margin-top: 0;
  border-top: 0;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-group-head {
  align-items: center;
  padding-bottom: 20px;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-group-head h2 {
  font-size: 20px;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-grid-section {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid #edf1f4;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-grid-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-grid-section strong {
  color: #17212b;
  font-size: 18px;
  font-weight: 700;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-grid-section span {
  color: #718096;
  font-size: 13px;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-field {
  min-width: 0;
  display: grid;
  gap: 8px;
  color: #17212b;
  font-size: 13px;
  font-weight: 600;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-span-2 {
  grid-column: 1 / -1;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-field .field-input,
.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-field .ui-select-trigger {
  width: 100%;
  height: 46px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #f5f7f9;
  color: #17212b;
  font-size: 15px;
  font-weight: 400;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-field .field-input:hover,
.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-field .ui-select-trigger:hover {
  background: #eef2f5;
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-field .field-input:focus,
.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-field .ui-select-trigger:focus-visible,
.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-field .ui-select-trigger[aria-expanded="true"] {
  border-color: #1d9bf0;
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(29, 155, 240, .12);
}

.brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-field .number-field {
  width: 100%;
}

@media (max-width: 900px) {
  .brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-grid {
    grid-template-columns: 1fr;
  }

  .brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-span-2,
  .brand-skin-preview-v5 .workspace-page #mainContent .project-info-document .project-info-grid-section {
    grid-column: 1;
  }
}

/* Keep the primary chapter-creation entry visible while long directories scroll. */
.brand-skin-preview-v5 .workspace-page .chapter-context-head {
  position: sticky;
  top: 0;
  z-index: 6;
  min-height: 56px;
  box-sizing: border-box;
  padding: 10px 14px;
  border-bottom: 1px solid #e7edf2;
  background: rgba(247, 249, 252, .96);
  backdrop-filter: blur(8px);
}

.brand-skin-preview-v5 .workspace-page .chapter-context-head .context-create-chapter {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #1d9bf0;
  border-radius: 999px;
  background: #1d9bf0;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(29, 155, 240, .16);
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.brand-skin-preview-v5 .workspace-page .chapter-context-head .context-create-chapter:hover {
  border-color: #168bd7;
  background: #168bd7;
  box-shadow: 0 6px 16px rgba(29, 155, 240, .22);
}

.brand-skin-preview-v5 .workspace-page .chapter-context-head .context-create-chapter:focus-visible {
  outline: 3px solid rgba(29, 155, 240, .2);
  outline-offset: 2px;
}

/* TXT import: one purpose, one file type, and a real chapter review before import. */
.brand-skin-preview-v5 .txt-import-panel {
  display: grid;
  gap: 14px;
}

.brand-skin-preview-v5 .txt-import-panel .modal-field {
  margin: 0;
}

.brand-skin-preview-v5 .txt-only-drop-zone {
  min-height: 84px;
  margin: 0;
  padding: 20px;
  border: 1px solid #cfd9e3;
  border-radius: 18px;
  background: #f7f9fb;
  color: #536471;
}

.brand-skin-preview-v5 .txt-only-drop-zone:hover,
.brand-skin-preview-v5 .txt-only-drop-zone:focus-visible {
  border-color: #1d9bf0;
  background: #f2f8fd;
  color: #0f1419;
}

.brand-skin-preview-v5 .txt-only-drop-zone .icon {
  width: 24px;
  height: 24px;
  color: #1d9bf0;
}

.brand-skin-preview-v5 .txt-only-drop-zone strong {
  color: #0f1419;
  font-size: 15px;
  font-weight: 700;
}

.brand-skin-preview-v5 .txt-only-drop-zone span {
  color: #536471;
  font-size: 13px;
}

.brand-skin-preview-v5 .import-preview-field {
  display: grid;
  gap: 9px;
}

.brand-skin-preview-v5 .import-preview-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-skin-preview-v5 .import-preview-label label {
  color: #0f1419;
  font-size: 14px;
  font-weight: 700;
}

.brand-skin-preview-v5 .import-preview-label span {
  color: #71767b;
  font-size: 13px;
}

.brand-skin-preview-v5 .chapter-import-preview {
  min-height: 150px;
  max-height: 300px;
  display: block;
  overflow: auto;
  padding: 0;
  border: 1px solid #d8e0e8;
  border-radius: 18px;
  background: #fff;
  color: #0f1419;
  font-size: 14px;
}

.brand-skin-preview-v5 .import-preview-empty,
.brand-skin-preview-v5 .import-preview-loading {
  min-height: 148px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  padding: 24px;
  box-sizing: border-box;
  color: #71767b;
  text-align: center;
}

.brand-skin-preview-v5 .import-preview-empty strong {
  color: #0f1419;
  font-size: 15px;
}

.brand-skin-preview-v5 .import-preview-empty span,
.brand-skin-preview-v5 .import-preview-loading span {
  font-size: 13px;
  line-height: 1.55;
}

.brand-skin-preview-v5 .import-preview-empty.is-error strong {
  color: #b42318;
}

.brand-skin-preview-v5 .import-preview-loading i {
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  border: 2px solid #dceaf5;
  border-top-color: #1d9bf0;
  border-radius: 50%;
  animation: import-preview-spin 700ms linear infinite;
}

@keyframes import-preview-spin {
  to { transform: rotate(360deg); }
}

.brand-skin-preview-v5 .import-preview-summary {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 18px;
  border-bottom: 1px solid #edf1f4;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
}

.brand-skin-preview-v5 .import-preview-summary div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.brand-skin-preview-v5 .import-preview-summary strong {
  color: #0f1419;
  font-size: 16px;
  font-weight: 750;
}

.brand-skin-preview-v5 .import-preview-summary span {
  color: #71767b;
  font-size: 13px;
}

.brand-skin-preview-v5 .import-preview-summary em {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: #e8f5fd;
  color: #168bd7;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.brand-skin-preview-v5 .import-preview-warnings {
  padding: 10px 18px;
  border-bottom: 1px solid #f4dfb7;
  background: #fff8e8;
}

.brand-skin-preview-v5 .import-preview-warnings p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: #8a5a00;
  font-size: 13px;
  line-height: 1.5;
}

.brand-skin-preview-v5 .import-preview-warnings p + p {
  margin-top: 6px;
}

.brand-skin-preview-v5 .import-preview-warnings .icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex: 0 0 auto;
}

.brand-skin-preview-v5 .import-chapter-preview-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.brand-skin-preview-v5 .import-chapter-preview-list li {
  min-height: 66px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  box-sizing: border-box;
  border-bottom: 1px solid #edf1f4;
}

.brand-skin-preview-v5 .import-chapter-number {
  color: #8b98a5;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.brand-skin-preview-v5 .import-chapter-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.brand-skin-preview-v5 .import-chapter-copy strong,
.brand-skin-preview-v5 .import-chapter-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-skin-preview-v5 .import-chapter-copy strong {
  color: #0f1419;
  font-size: 14px;
  font-weight: 650;
}

.brand-skin-preview-v5 .import-chapter-copy small {
  color: #71767b;
  font-size: 12px;
}

.brand-skin-preview-v5 .import-chapter-preview-list li > em {
  color: #536471;
  font-size: 12px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.brand-skin-preview-v5 .import-preview-limit {
  margin: 0;
  padding: 12px 18px;
  color: #71767b;
  font-size: 12px;
  text-align: center;
}

.brand-skin-preview-v5 .import-chapter-preview-list .import-volume-name {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: #0f86d7;
  font-size: 12px;
  font-weight: 700;
}

/* Character profiles read as one continuous document: no nested boxes or scrollbars. */
.brand-skin-preview-v5 .workspace-page #mainContent .character-document .character-header {
  padding-bottom: 0;
  border-bottom: 0;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-basics-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(110px, .7fr) minmax(110px, .7fr);
  gap: 32px;
  padding: 24px 0 28px;
  border-bottom: 1px solid #e8ecef;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-basics-grid label {
  gap: 8px;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-basics-grid label > span {
  color: #657786;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-basics-grid .field-input {
  height: 34px;
  border-bottom-color: transparent;
  color: #0f1419;
  font-size: 16px;
  line-height: 1.7;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-basics-grid .field-input:hover {
  border-bottom-color: #dce3e8;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-basics-grid .field-input:focus {
  border-bottom-color: #1d9bf0;
  box-shadow: none;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-fields .form-section {
  padding: 20px 0;
  border-bottom: 1px solid #e8ecef;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-fields .form-section:last-child {
  border-bottom: 0;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-fields .field-head {
  margin-bottom: 8px;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-fields .field-head label {
  color: #657786;
  font-size: 13px;
  font-weight: 500;
  transition: color 130ms ease;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-fields .field-head span {
  font-size: 12px;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-fields .field-textarea[data-autosize-profile],
.brand-skin-preview-v5 .workspace-page #mainContent .character-fields .field-textarea[data-autosize-profile]:hover,
.brand-skin-preview-v5 .workspace-page #mainContent .character-fields .field-textarea[data-autosize-profile]:focus,
.brand-skin-preview-v5 .workspace-page #mainContent .character-fields .field-textarea[data-autosize-profile]:focus-visible {
  min-height: 32px;
  padding: 0;
  overflow: hidden;
  resize: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #0f1419;
  font-family: var(--editor-reading-font);
  font-size: var(--editor-reading-size);
  line-height: var(--editor-reading-line-height);
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-fields .field-textarea[data-autosize-profile]::placeholder {
  color: #8b98a5;
  opacity: 1;
}

.brand-skin-preview-v5 .workspace-page #mainContent .character-fields .form-section:focus-within .field-head label {
  color: #1d9bf0;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-field {
  padding: 18px 0;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-inline-editor[data-autosize-profile],
.brand-skin-preview-v5 .workspace-page .writing-reference-inline-editor[data-autosize-profile]:hover,
.brand-skin-preview-v5 .workspace-page .writing-reference-inline-editor[data-autosize-profile]:focus,
.brand-skin-preview-v5 .workspace-page .writing-reference-inline-editor[data-autosize-profile]:focus-visible {
  min-height: 28px;
  padding: 0;
  overflow: hidden;
  resize: none;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #263746;
  font-size: 15px;
  line-height: 1.85;
}

/* Main content editors use one reading scale; compact UI controls keep their smaller sizes. */
.brand-skin-preview-v5 .workspace-page #mainContent .chapter-outline-main-editor,
.brand-skin-preview-v5 .workspace-page #mainContent .outline-free-paper,
.brand-skin-preview-v5 .workspace-page #mainContent .settings-free-paper,
.brand-skin-preview-v5 .workspace-page #mainContent .related-editor,
.brand-skin-preview-v5 .workspace-page #mainContent [data-v2-project-intro] {
  font-family: var(--editor-reading-font);
  font-size: var(--editor-reading-size) !important;
  line-height: var(--editor-reading-line-height) !important;
}

.brand-skin-preview-v5 .workspace-page #mainContent .field-head:has(+ [data-v2-project-intro]) {
  justify-content: flex-end;
  margin-bottom: 8px;
}

.brand-skin-preview-v5 .workspace-page #mainContent .field-head:has(+ [data-v2-project-intro]) label {
  display: none;
}

.brand-skin-preview-v5 .workspace-page #mainContent > .document h1 {
  font-size: 28px;
  line-height: 1.35;
}

.brand-skin-preview-v5 .workspace-page #mainContent > .document .document-lead {
  font-size: 13px;
  line-height: 1.7;
}

.brand-skin-preview-v5 .workspace-page #mainContent .writing-paper p,
.brand-skin-preview-v5 .workspace-page #mainContent .outline-free-paper p,
.brand-skin-preview-v5 .workspace-page #mainContent .settings-free-paper p,
.brand-skin-preview-v5 .workspace-page #mainContent .related-editor p {
  margin: 0 0 1.12em;
}

@media (max-width: 760px) {
  .brand-skin-preview-v5 .workspace-page {
    --editor-reading-size: 17px;
    --editor-reading-line-height: 1.9;
  }
}


/* Volumes are quiet structural headings; chapters remain the primary navigation. */
.brand-skin-preview-v5 .workspace-page .chapter-context-head {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 56px;
  min-height: 56px;
  box-sizing: border-box;
  padding: 0 12px 0 14px;
  border-bottom: 1px solid #e7ebef;
  background: rgba(247, 248, 250, .97);
  backdrop-filter: blur(8px);
}

.brand-skin-preview-v5 .workspace-page .chapter-context-head > strong {
  min-width: 0;
  color: #17212b;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

.brand-skin-preview-v5 .workspace-page .chapter-context-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
}

.brand-skin-preview-v5 .workspace-page .chapter-context-actions > button {
  height: 34px;
  min-height: 34px;
  box-sizing: border-box;
}

.brand-skin-preview-v5 .workspace-page .chapter-context-actions > .chapter-create-volume {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: #536471;
  box-shadow: none;
}

.brand-skin-preview-v5 .workspace-page .chapter-context-actions > .chapter-create-volume .icon {
  width: 17px;
  height: 17px;
}

.brand-skin-preview-v5 .workspace-page .chapter-context-actions > .chapter-create-volume:hover {
  background: #e7edf2;
  color: #17212b;
}

.brand-skin-preview-v5 .workspace-page .chapter-context-actions > .chapter-create-volume:focus-visible {
  border-color: #1d9bf0;
  outline: 2px solid rgba(29, 155, 240, .18);
  outline-offset: 1px;
}

.brand-skin-preview-v5 .workspace-page .chapter-context-actions > .context-create-chapter {
  min-width: 88px;
  padding: 0 12px;
  border: 1px solid #1d9bf0;
  border-radius: 17px;
  background: #1d9bf0;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  line-height: 32px;
  box-shadow: none;
}

.brand-skin-preview-v5 .workspace-page .chapter-context-actions > .context-create-chapter:hover {
  border-color: #1a8cd8;
  background: #1a8cd8;
  color: #fff;
  box-shadow: none;
}

.brand-skin-preview-v5 .workspace-page .chapter-context-actions > .context-create-chapter:focus-visible {
  outline: 2px solid rgba(29, 155, 240, .2);
  outline-offset: 2px;
}

/* Keep the generation-length control optically and physically inside its action row. */
.brand-skin-preview-v5 .workspace-page .assistant-tools-unified .assistant-generation-primary {
  align-items: center;
  min-height: 52px;
  box-sizing: border-box;
  padding: 6px 8px 6px 14px;
}

.brand-skin-preview-v5 .workspace-page .assistant-generation-primary .assistant-word-count-picker {
  display: flex;
  align-items: center;
  height: 36px;
  max-width: 108px;
  margin: 0;
}

.brand-skin-preview-v5 .workspace-page .assistant-generation-primary .assistant-word-count-picker > summary {
  width: 108px;
  min-width: 108px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  box-sizing: border-box;
  margin: 0;
  padding: 0 10px 0 14px;
  border: 0;
  background: rgba(255, 255, 255, .84);
  box-shadow: none;
}

.brand-skin-preview-v5 .workspace-page .chapter-volume-list {
  display: block;
  padding: 6px 9px 16px;
}

.brand-skin-preview-v5 .workspace-page .chapter-volume-group + .chapter-volume-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #e7ebef;
}

.brand-skin-preview-v5 .workspace-page .chapter-volume-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: center;
  min-height: 40px;
}

.brand-skin-preview-v5 .workspace-page .chapter-volume-toggle {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 8px;
  color: #536471;
  text-align: left;
}

.brand-skin-preview-v5 .workspace-page .chapter-volume-toggle:hover,
.brand-skin-preview-v5 .workspace-page .chapter-volume-toggle:focus-visible {
  background: #edf1f4;
  outline: 0;
}

.brand-skin-preview-v5 .workspace-page .chapter-volume-toggle > .dash-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  transition: transform 140ms ease;
}

.brand-skin-preview-v5 .workspace-page .chapter-volume-toggle[aria-expanded="false"] > .dash-icon {
  transform: rotate(-90deg);
}

.brand-skin-preview-v5 .workspace-page .chapter-volume-toggle > span {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 7px;
}

.brand-skin-preview-v5 .workspace-page .chapter-volume-toggle strong {
  overflow: hidden;
  color: #283746;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-skin-preview-v5 .workspace-page .chapter-volume-toggle small {
  flex: none;
  color: #8b98a5;
  font-size: 11px;
}

.brand-skin-preview-v5 .workspace-page .volume-row-menu {
  width: 30px;
  height: 30px;
  color: #8b98a5;
  opacity: 0;
}

.brand-skin-preview-v5 .workspace-page .chapter-volume-head:hover .volume-row-menu,
.brand-skin-preview-v5 .workspace-page .volume-row-menu:focus-visible {
  opacity: 1;
}

.brand-skin-preview-v5 .workspace-page .chapter-volume-body.is-collapsed {
  display: none;
}

.brand-skin-preview-v5 .workspace-page .chapter-volume-empty {
  margin: 0;
  padding: 8px 32px 12px;
  color: #8b98a5;
  font-size: 12px;
}

/* Outline hierarchy mirrors the manuscript hierarchy: synopsis, volume outlines, chapter outlines. */
.brand-skin-preview-v5 .workspace-page .outline-context-tree {
  padding-top: 6px;
}

.brand-skin-preview-v5 .workspace-page .outline-volume-tree-group,
.brand-skin-preview-v5 .workspace-page .outline-volume-outline-row {
  width: 100%;
  box-sizing: border-box;
}


.brand-skin-preview-v5 .workspace-page .outline-volume-tree-group + .outline-volume-tree-group {
  margin-top: 4px;
}

.brand-skin-preview-v5 .workspace-page .outline-volume-outline-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.brand-skin-preview-v5 .workspace-page .outline-volume-outline-row small {
  color: #8b98a5;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}

.brand-skin-preview-v5 .workspace-page .outline-volume-outline-row.active small {
  color: #5f8eb0;
}

.brand-skin-preview-v5 .workspace-page .outline-volume-tree-group .outline-chapter-children {
  margin: 4px 10px 10px 31px;
  padding-left: 12px;
}

.brand-skin-preview-v5 .workspace-page .outline-volume-empty {
  margin: 0;
  padding: 8px;
  color: #8b98a5;
  font-size: 12px;
}

.brand-skin-preview-v5 .workspace-page .chapter-outline-volume-list {
  display: grid;
  gap: 24px;
  border-top: 0;
}

.brand-skin-preview-v5 .workspace-page .chapter-outline-volume-section {
  border-top: 1px solid #e7ebef;
}

.brand-skin-preview-v5 .workspace-page .chapter-outline-volume-section > header {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-skin-preview-v5 .workspace-page .chapter-outline-volume-section > header > button {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  color: #17212b;
  text-align: left;
}

.brand-skin-preview-v5 .workspace-page .chapter-outline-volume-section > header > button strong {
  font-size: 16px;
}

.brand-skin-preview-v5 .workspace-page .chapter-outline-volume-section > header > button span,
.brand-skin-preview-v5 .workspace-page .chapter-outline-volume-section > header > em {
  color: #7c8b99;
  font-size: 12px;
  font-style: normal;
}

.brand-skin-preview-v5 .workspace-page .chapter-outline-volume-section > header > button:hover strong,
.brand-skin-preview-v5 .workspace-page .chapter-outline-volume-section > header > button:focus-visible strong {
  color: #1d9bf0;
}

.brand-skin-preview-v5 .workspace-page .chapter-outline-volume-empty {
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid #edf1f4;
  color: #8b98a5;
  font-size: 13px;
}

/* Long AI replies should read like an article, not like muted interface metadata. */
.brand-skin-preview-v5 .workspace-page .chat-message.ai .chat-message-text,
.brand-skin-preview-v5 .workspace-page .chat-message.ai .chat-message-text p,
.brand-skin-preview-v5 .workspace-page .chat-message.ai .chat-message-text li {
  color: #263746;
  font-size: 16px;
  line-height: 1.82;
}

.brand-skin-preview-v5 .workspace-page .chat-message.ai .chat-message-text h4 {
  margin: 18px 0 8px;
  color: #0f1419;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
}

.brand-skin-preview-v5 .workspace-page .chat-message.ai .chat-message-text h4:first-child {
  margin-top: 0;
}

.brand-skin-preview-v5 .workspace-page .chat-message.ai .chat-message-text strong {
  display: inline;
  margin: 0;
  color: #0f1419;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
}

.brand-skin-preview-v5 .workspace-page .chat-message.ai .chat-message-text ul,
.brand-skin-preview-v5 .workspace-page .chat-message.ai .chat-message-text ol {
  margin: 8px 0 14px;
  padding-left: 24px;
}

.brand-skin-preview-v5 .workspace-page .chat-message.ai .chat-message-text li {
  margin: 6px 0;
}

.brand-skin-preview-v5 .workspace-page .chat-message.ai .chat-message-text li::marker {
  color: #657786;
}

/* The shelf is a working library, so its creation entry stays useful without reading as a marketing hero. */
.brand-skin-preview-v5 .shelf-page .story-entry {
  min-height: 100px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 20px 24px;
  border: 1px solid #e1e8ed;
  border-radius: 16px;
  background: #fff;
  color: #0f1419;
  box-shadow: none;
}

.brand-skin-preview-v5 .shelf-page .story-entry:hover {
  border-color: #cfd9e1;
  background: #fbfdff;
  box-shadow: none;
  transform: none;
}

.brand-skin-preview-v5 .shelf-page .story-entry-copy {
  gap: 4px;
}

.brand-skin-preview-v5 .shelf-page .story-entry-copy small {
  color: #1d9bf0;
  font-size: 13px;
  font-weight: 650;
}

.brand-skin-preview-v5 .shelf-page .story-entry-copy strong {
  color: #0f1419;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}

.brand-skin-preview-v5 .shelf-page .story-entry-copy span {
  color: #536471;
  font-size: 14px;
  line-height: 1.55;
}

.brand-skin-preview-v5 .shelf-page .story-entry .primary-button {
  min-width: 112px;
  min-height: 44px;
  box-shadow: none;
}

.brand-skin-preview-v5 .shelf-page .shelf-stats {
  margin-top: 12px;
  border: 1px solid #e1e8ed;
  border-radius: 16px;
  background: #fff;
}

.brand-skin-preview-v5 .shelf-page .shelf-stats > div {
  min-height: 60px;
  padding-inline: 24px;
  justify-content: center;
  gap: 24px;
  border-right-color: #e1e8ed;
}

.brand-skin-preview-v5 .shelf-page .shelf-stats span {
  color: #536471;
  font-size: 14px;
}

.brand-skin-preview-v5 .shelf-page .shelf-stats strong {
  color: #0f1419;
  font-size: 22px;
  font-weight: 700;
}

.brand-skin-preview-v5 .shelf-page .shelf-stats small {
  color: #657786;
  font-size: 12px;
}

.brand-skin-preview-v5 .shelf-page .library-heading {
  margin-top: 24px;
}

@media (max-width: 760px) {
  .brand-skin-preview-v5 .shelf-page .story-entry {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
  }

  .brand-skin-preview-v5 .shelf-page .story-entry .primary-button {
    justify-self: start;
  }

  .brand-skin-preview-v5 .shelf-page .shelf-stats > div {
    min-height: 56px;
    padding-inline: 16px;
  }
}

/* Shelf overview: one compact working row, not a marketing hero plus a report card. */
.brand-skin-preview-v5 .shelf-page .shelf-overview {
  min-height: 104px;
  grid-template-columns: minmax(360px, 1fr) auto auto;
  gap: 28px;
  padding: 20px 24px;
  border: 1px solid var(--x-line-strong);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
}

.brand-skin-preview-v5 .shelf-page .shelf-overview .story-entry-copy {
  gap: 3px;
}

.brand-skin-preview-v5 .shelf-page .shelf-overview .story-entry-copy small {
  color: var(--x-blue);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.brand-skin-preview-v5 .shelf-page .shelf-overview .story-entry-copy strong {
  color: var(--x-ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}

.brand-skin-preview-v5 .shelf-page .shelf-overview .story-entry-copy span {
  overflow: hidden;
  color: var(--x-ink-2);
  font-size: 14px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-skin-preview-v5 .shelf-page .shelf-overview .shelf-stats {
  width: auto;
  display: flex;
  align-items: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.brand-skin-preview-v5 .shelf-page .shelf-overview .shelf-stats > div {
  min-width: 124px;
  min-height: 48px;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 20px;
  border-right: 0;
  border-left: 1px solid var(--x-line);
}

.brand-skin-preview-v5 .shelf-page .shelf-overview .shelf-stats strong {
  color: var(--x-ink);
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.brand-skin-preview-v5 .shelf-page .shelf-overview .shelf-stats small {
  margin-left: 3px;
  color: var(--x-ink-2);
  font-size: 12px;
  font-weight: 500;
}

.brand-skin-preview-v5 .shelf-page .shelf-overview .shelf-stats span {
  color: var(--x-muted);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}

.brand-skin-preview-v5 .shelf-page .shelf-overview .primary-button {
  min-width: 112px;
  min-height: 44px;
  padding-inline: 22px;
  border-color: var(--x-blue);
  border-radius: 999px;
  background: var(--x-blue);
  color: #fff;
  box-shadow: none;
}

.brand-skin-preview-v5 .shelf-page .shelf-overview .primary-button:hover {
  border-color: var(--x-blue-hover);
  background: var(--x-blue-hover);
}

.brand-skin-preview-v5 .shelf-page .shelf-overview + .library-heading {
  margin-top: 28px;
}

@media (max-width: 1080px) {
  .brand-skin-preview-v5 .shelf-page .shelf-overview {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px 24px;
  }

  .brand-skin-preview-v5 .shelf-page .shelf-overview .story-entry-copy {
    grid-column: 1 / -1;
  }

  .brand-skin-preview-v5 .shelf-page .shelf-overview .shelf-stats {
    justify-self: start;
  }
}

@media (max-width: 760px) {
  .brand-skin-preview-v5 .shelf-page .shelf-overview {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 18px;
  }

  .brand-skin-preview-v5 .shelf-page .shelf-overview .shelf-stats {
    width: 100%;
  }

  .brand-skin-preview-v5 .shelf-page .shelf-overview .shelf-stats > div {
    min-width: 0;
    flex: 1 1 0;
    padding: 0 16px;
  }

  .brand-skin-preview-v5 .shelf-page .shelf-overview .shelf-stats > div:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .brand-skin-preview-v5 .shelf-page .shelf-overview .primary-button {
    justify-self: start;
  }
}

/* Shelf header: remove the promotional banner and keep creation inside the working toolbar. */
.brand-skin-preview-v5 .shelf-page .library-heading {
  min-height: 56px;
  align-items: center;
  gap: 24px;
  margin-top: 0;
}

.brand-skin-preview-v5 .shelf-page .library-title {
  min-width: 220px;
  display: grid;
  gap: 5px;
}

.brand-skin-preview-v5 .shelf-page .library-title h1 {
  margin: 0;
  color: var(--x-ink);
  font-size: 26px;
  font-weight: 750;
  line-height: 1.25;
}

.brand-skin-preview-v5 .shelf-page .library-title .shelf-stats {
  width: auto;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.brand-skin-preview-v5 .shelf-page .library-title .shelf-stats > div {
  min-height: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 3px;
  padding: 0;
  border: 0;
}

.brand-skin-preview-v5 .shelf-page .library-title .shelf-stats > div + div::before {
  content: "·";
  margin-right: 9px;
  color: var(--x-muted);
}

.brand-skin-preview-v5 .shelf-page .library-title .shelf-stats span,
.brand-skin-preview-v5 .shelf-page .library-title .shelf-stats small {
  margin: 0;
  color: var(--x-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

.brand-skin-preview-v5 .shelf-page .library-title .shelf-stats strong {
  color: var(--x-ink-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.brand-skin-preview-v5 .shelf-page .library-tools {
  gap: 8px;
}

.brand-skin-preview-v5 .shelf-page .shelf-new-book-button,
.brand-skin-preview-v5 .shelf-page .shelf-story-button {
  min-height: 40px;
  padding-inline: 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

.brand-skin-preview-v5 .shelf-page .shelf-new-book-button {
  border-color: var(--x-line-strong);
  background: #fff;
  color: var(--x-ink);
}

.brand-skin-preview-v5 .shelf-page .shelf-new-book-button:hover {
  border-color: var(--x-ink);
  background: var(--x-surface-soft);
}

.brand-skin-preview-v5 .shelf-page .shelf-story-button {
  min-width: 128px;
  border-color: var(--x-blue);
  background: var(--x-blue);
  color: #fff;
  box-shadow: none;
}

.brand-skin-preview-v5 .shelf-page .shelf-story-button:hover {
  border-color: var(--x-blue-hover);
  background: var(--x-blue-hover);
}

.brand-skin-preview-v5 .shelf-page .library-heading + .book-grid {
  margin-top: 20px;
}

@media (max-width: 1000px) {
  .brand-skin-preview-v5 .shelf-page .library-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .brand-skin-preview-v5 .shelf-page .library-tools {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }
}

/* Empty chapters keep Generate body visible, then explain the outline prerequisite in place. */
.brand-skin-preview-v5 .workspace-page .assistant-generation-primary.needs-outline .assistant-action-copy small {
  color: var(--x-ink-2);
  font-weight: 550;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-header-actions .soft-button:disabled {
  border-color: var(--x-line);
  background: #f7f9fa;
  color: #8b98a5;
  opacity: 1;
  cursor: not-allowed;
}
/* Unified feature dialogs: stats, transformation, membership and persona. */
.brand-skin-preview-v5 .modal.stats-modal,
.brand-skin-preview-v5 .modal.transform-modal,
.brand-skin-preview-v5 .modal.membership-upgrade-modal,
.brand-skin-preview-v5 .modal.persona-settings-modal {
  border-radius: 18px;
  box-shadow: 0 28px 72px rgba(15, 23, 32, .18);
}

/* Stats: blue stays primary while semantic accents make each data group easier to scan. */
.brand-skin-preview-v5 .modal.stats-modal {
  width: min(1040px, calc(100vw - 48px));
  height: min(820px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
}

.brand-skin-preview-v5 .stats-modal .modal-body {
  padding: 0 28px;
  overflow: hidden;
}

.brand-skin-preview-v5 .stats-metrics {
  gap: 0;
  padding: 4px 0 18px;
  border-bottom: 1px solid #e7edf2;
}

.brand-skin-preview-v5 .stats-metrics > div {
  --stats-tone: #1d9bf0;
  position: relative;
  padding: 18px 20px 16px 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.brand-skin-preview-v5 .stats-metrics > div + div {
  padding-left: 20px;
  border-left: 1px solid #e7edf2;
}

.brand-skin-preview-v5 .stats-metrics > div:nth-child(2) { --stats-tone: #16a394; }
.brand-skin-preview-v5 .stats-metrics > div:nth-child(3) { --stats-tone: #7a69d4; }
.brand-skin-preview-v5 .stats-metrics > div:nth-child(4) { --stats-tone: #f28b46; }

.brand-skin-preview-v5 .stats-metrics span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #657786;
  font-size: 12px;
  font-weight: 550;
}

.brand-skin-preview-v5 .stats-metrics span::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
  background: var(--stats-tone);
}

.brand-skin-preview-v5 .stats-metrics strong {
  margin-top: 8px;
  color: #17212b;
  font-size: 29px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.brand-skin-preview-v5 .stats-section {
  padding: 20px 0;
}

.brand-skin-preview-v5 .stats-section > header {
  margin-bottom: 12px;
}

.brand-skin-preview-v5 .stats-section > header h3 {
  color: #17212b;
  font-size: 15px;
}

.brand-skin-preview-v5 .stats-section > header p {
  color: #718096;
  font-size: 12px;
}

.brand-skin-preview-v5 .stats-range {
  padding: 3px;
  border-color: #e1e7ec;
  border-radius: 999px;
  background: #f3f6f8;
}

.brand-skin-preview-v5 .stats-range button {
  min-width: 58px;
  height: 30px;
  border-radius: 999px;
  font-size: 12px;
}

.brand-skin-preview-v5 .stats-range button.active {
  color: #17212b;
}

.brand-skin-preview-v5 .stats-lower {
  gap: 30px;
}

.brand-skin-preview-v5 .stats-project-row {
  min-height: 40px;
}

.brand-skin-preview-v5 .stats-project-row strong,
.brand-skin-preview-v5 .stats-project-row em {
  font-size: 12px;
}

.brand-skin-preview-v5 .stats-project-row span {
  font-size: 11px;
}

.brand-skin-preview-v5 .stats-project-row progress::-webkit-progress-value { background: #1d9bf0; }
.brand-skin-preview-v5 .stats-project-row progress::-moz-progress-bar { background: #1d9bf0; }
.brand-skin-preview-v5 .stats-project-row:nth-child(2) progress::-webkit-progress-value { background: #16a394; }
.brand-skin-preview-v5 .stats-project-row:nth-child(2) progress::-moz-progress-bar { background: #16a394; }
.brand-skin-preview-v5 .stats-project-row:nth-child(3) progress::-webkit-progress-value { background: #f28b46; }
.brand-skin-preview-v5 .stats-project-row:nth-child(3) progress::-moz-progress-bar { background: #f28b46; }
.brand-skin-preview-v5 .stats-project-row:nth-child(4) progress::-webkit-progress-value { background: #7a69d4; }
.brand-skin-preview-v5 .stats-project-row:nth-child(4) progress::-moz-progress-bar { background: #7a69d4; }
.brand-skin-preview-v5 .stats-project-row:nth-child(5) progress::-webkit-progress-value { background: #60758a; }
.brand-skin-preview-v5 .stats-project-row:nth-child(5) progress::-moz-progress-bar { background: #60758a; }

/* Transformation: a full workbench instead of a wide layout squeezed into 600px. */
.brand-skin-preview-v5 .modal.transform-modal {
  width: min(1120px, calc(100vw - 48px));
  height: min(760px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
}

.brand-skin-preview-v5 .transform-modal .modal-body {
  padding: 22px 26px;
  overflow: hidden;
}

.brand-skin-preview-v5 .transform-workspace {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
}

.brand-skin-preview-v5 .transform-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #e3e9ee;
  border-radius: 14px;
  background: #f7f9fb;
}

.brand-skin-preview-v5 .transform-steps span {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 15px;
  color: #718096;
  font-size: 12px;
}

.brand-skin-preview-v5 .transform-steps span + span {
  border-left: 1px solid #e3e9ee;
}

.brand-skin-preview-v5 .transform-steps b {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e7edf2;
  color: #526579;
  font-size: 11px;
}

.brand-skin-preview-v5 .transform-steps .active {
  color: #0f78bf;
  font-weight: 650;
}

.brand-skin-preview-v5 .transform-steps .active b {
  background: #1d9bf0;
  color: #fff;
}

.brand-skin-preview-v5 .transform-dialog-grid {
  height: auto;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 22px;
}

.brand-skin-preview-v5 .transform-controls {
  padding: 0 22px 0 0;
  border-right: 1px solid #e7edf2;
}

.brand-skin-preview-v5 .transform-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.brand-skin-preview-v5 .transform-section-heading strong {
  color: #17212b;
  font-size: 14px;
}

.brand-skin-preview-v5 .transform-section-heading span {
  color: #8291a0;
  font-size: 11px;
}

.brand-skin-preview-v5 .transform-controls .field-pair {
  gap: 12px;
}

.brand-skin-preview-v5 .transform-controls .field-pair > label > span,
.brand-skin-preview-v5 .transform-controls .modal-field > label {
  color: #526579;
  font-size: 12px;
  font-weight: 600;
}

.brand-skin-preview-v5 .transform-controls .modal-field {
  margin-top: 16px;
}

.brand-skin-preview-v5 .transform-controls .transform-keep-field textarea {
  min-height: 112px;
}

.brand-skin-preview-v5 .transform-status-note {
  margin-top: 14px;
  padding: 11px 13px;
  border-left: 3px solid #1d9bf0;
  border-radius: 8px;
  background: #f2f8fc;
  color: #526579;
  font-size: 12px;
  line-height: 1.6;
}

.brand-skin-preview-v5 .transform-output {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.brand-skin-preview-v5 .transform-modal .transform-preview {
  border-color: #e1e7ec;
  border-radius: 14px;
  background: #fbfcfd;
}

.brand-skin-preview-v5 .transform-modal .transform-preview section {
  padding: 16px;
  background: transparent;
}

.brand-skin-preview-v5 .transform-modal .transform-preview h3 {
  color: #526579;
  font-size: 12px;
}

.brand-skin-preview-v5 .transform-modal .transform-preview textarea {
  color: #17212b;
  font-size: 14px;
  line-height: 1.8;
}

/* Membership: a dedicated upgrade surface with one clear decision per plan. */
.brand-skin-preview-v5 .modal.membership-upgrade-modal {
  width: min(1120px, calc(100vw - 48px));
  height: min(760px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
}

.brand-skin-preview-v5 .membership-upgrade-modal .modal-body {
  padding: 24px 28px 26px;
  background: #fff;
}

.brand-skin-preview-v5 .upgrade-page {
  display: grid;
  gap: 22px;
}

.brand-skin-preview-v5 .upgrade-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: center;
  gap: 28px;
  padding: 22px 24px;
  border: 1px solid #e2e8ed;
  border-radius: 18px;
  background: #f7f9fb;
}

.brand-skin-preview-v5 .upgrade-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #1d9bf0;
  font-size: 12px;
  font-weight: 700;
}

.brand-skin-preview-v5 .upgrade-intro h3 {
  margin: 0;
  color: #17212b;
  font-size: 24px;
  line-height: 1.35;
}

.brand-skin-preview-v5 .upgrade-intro p {
  max-width: 650px;
  margin: 8px 0 0;
  color: #5f7184;
  font-size: 13px;
  line-height: 1.7;
}

.brand-skin-preview-v5 .upgrade-current {
  padding-left: 24px;
  border-left: 1px solid #dce4ea;
}

.brand-skin-preview-v5 .upgrade-current span,
.brand-skin-preview-v5 .upgrade-current small {
  display: block;
  color: #718096;
  font-size: 12px;
}

.brand-skin-preview-v5 .upgrade-current strong {
  display: block;
  margin: 7px 0 5px;
  color: #17212b;
  font-size: 20px;
}

.brand-skin-preview-v5 .upgrade-plans > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 13px;
}

.brand-skin-preview-v5 .upgrade-plans > header div,
.brand-skin-preview-v5 .upgrade-plan-heading,
.brand-skin-preview-v5 .upgrade-plan-price {
  display: flex;
  align-items: center;
}

.brand-skin-preview-v5 .upgrade-plans > header div {
  gap: 12px;
}

.brand-skin-preview-v5 .upgrade-plans > header strong {
  color: #17212b;
  font-size: 15px;
}

.brand-skin-preview-v5 .upgrade-plans > header small,
.brand-skin-preview-v5 .upgrade-plans > header > span {
  color: #8291a0;
  font-size: 12px;
}

.brand-skin-preview-v5 .upgrade-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.brand-skin-preview-v5 .upgrade-plan-card {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px;
  border: 1px solid #dfe6eb;
  border-radius: 18px;
  background: #fff;
  color: #17212b;
  text-align: left;
}

.brand-skin-preview-v5 .upgrade-plan-card:hover {
  border-color: #9bcdf0;
  box-shadow: 0 12px 28px rgba(29, 155, 240, .1);
  transform: translateY(-1px);
}

.brand-skin-preview-v5 .upgrade-plan-card.is-recommended {
  border-color: #9bcdf0;
  background: #f3f9fd;
}

.brand-skin-preview-v5 .upgrade-plan-heading {
  justify-content: space-between;
  gap: 10px;
}

.brand-skin-preview-v5 .upgrade-plan-heading > strong {
  font-size: 15px;
}

.brand-skin-preview-v5 .upgrade-plan-heading > span {
  display: flex;
  gap: 5px;
}

.brand-skin-preview-v5 .upgrade-plan-badge {
  padding: 4px 8px;
  border-radius: 999px;
  background: #1d9bf0;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.brand-skin-preview-v5 .upgrade-plan-badge.is-current {
  background: #e5edf3;
  color: #526579;
}

.brand-skin-preview-v5 .upgrade-plan-price {
  align-items: baseline;
  gap: 5px;
  margin-top: 22px;
}

.brand-skin-preview-v5 .upgrade-plan-price > strong {
  font-size: 29px;
  line-height: 1;
}

.brand-skin-preview-v5 .upgrade-plan-price small,
.brand-skin-preview-v5 .upgrade-plan-note {
  color: #8291a0;
  font-size: 11px;
}

.brand-skin-preview-v5 .upgrade-plan-quota {
  margin-top: 15px;
  color: #263746;
  font-size: 14px;
  font-weight: 650;
}

.brand-skin-preview-v5 .upgrade-plan-note {
  margin-top: 5px;
}

.brand-skin-preview-v5 .upgrade-plan-action {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  color: #0f78bf;
  font-size: 13px;
  font-weight: 650;
}

.brand-skin-preview-v5 .upgrade-plan-action .icon {
  width: 15px;
  height: 15px;
}

.brand-skin-preview-v5 .upgrade-addon {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-top: 1px solid #e5ebef;
  border-bottom: 1px solid #e5ebef;
}

.brand-skin-preview-v5 .upgrade-addon > div {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 4px 12px;
}

.brand-skin-preview-v5 .upgrade-addon > div > span,
.brand-skin-preview-v5 .upgrade-addon > div > small,
.brand-skin-preview-v5 .upgrade-addon-hint {
  color: #8291a0;
  font-size: 11px;
}

.brand-skin-preview-v5 .upgrade-addon > div > strong {
  color: #17212b;
  font-size: 13px;
}

.brand-skin-preview-v5 .upgrade-addon > div > small {
  grid-column: 1 / -1;
}

.brand-skin-preview-v5 .upgrade-addon-hint {
  margin: -14px 18px 0;
}

/* Membership center follows a quiet, centered subscription-page rhythm. */
body.membership-page-open {
  overflow: hidden;
}

.brand-skin-preview-v5 .membership-page-root {
  position: fixed;
  inset: 0;
  z-index: 50000;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 100% 8%, rgba(29, 155, 240, .12), transparent 34%),
    linear-gradient(135deg, #fbfcfd 0%, #f5f8fa 100%);
  color: #17212b;
}

.brand-skin-preview-v5 .membership-page-header {
  position: sticky;
  top: 0;
  z-index: 3;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  background: rgba(247, 249, 251, .94);
  backdrop-filter: blur(12px);
}

.brand-skin-preview-v5 .membership-page-back,
.brand-skin-preview-v5 .membership-page-brand {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  color: #17212b;
  font-size: 14px;
  font-weight: 650;
}

.brand-skin-preview-v5 .membership-page-brand {
  text-decoration: none;
}

.brand-skin-preview-v5 .membership-page-brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.brand-skin-preview-v5 .membership-page-brand span::before {
  content: "/";
  margin-right: 9px;
  color: #a0acb8;
  font-weight: 400;
}

.brand-skin-preview-v5 .membership-page-back {
  padding: 0 16px 0 12px;
  background: #17212b;
  color: #fff;
  box-shadow: 0 6px 16px rgba(15, 23, 32, .1);
}

.brand-skin-preview-v5 .membership-page-back:hover {
  background: #263746;
  transform: translateY(-1px);
}

.brand-skin-preview-v5 .membership-page-back:focus-visible,
.brand-skin-preview-v5 .membership-product-tabs button:focus-visible,
.brand-skin-preview-v5 .membership-page-root .upgrade-plan-card:focus-visible,
.brand-skin-preview-v5 .membership-addon-card:focus-visible {
  outline: 2px solid #1d9bf0;
  outline-offset: 3px;
}

.brand-skin-preview-v5 .membership-page-back .icon {
  width: 17px;
  height: 17px;
  transform: rotate(180deg);
}

.brand-skin-preview-v5 .membership-page-main {
  width: min(860px, calc(100vw - 48px));
  min-height: calc(100vh - 64px);
  margin: 0 auto;
  padding: 20px 0 64px;
}

.brand-skin-preview-v5 .membership-page-loading {
  min-height: calc(100vh - 150px);
  display: grid;
  place-items: center;
}

.brand-skin-preview-v5 .membership-page-quote {
  min-height: 148px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px 28px;
  text-align: center;
}

.brand-skin-preview-v5 .membership-page-quote p {
  margin: 0;
  color: #17212b;
  font-family: ui-serif, "Songti SC", "SimSun", serif;
  font-size: 22px;
  font-style: italic;
  line-height: 1.7;
}

.brand-skin-preview-v5 .membership-page-quote span {
  margin-top: 12px;
  color: #718096;
  font-size: 13px;
}

.brand-skin-preview-v5 .membership-product-tabs {
  width: 248px;
  height: 46px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 0 auto 32px;
  padding: 4px;
  border: 1px solid #e1e7ec;
  border-radius: 999px;
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 8px 24px rgba(15, 23, 32, .06);
}

.brand-skin-preview-v5 .membership-product-tabs button {
  border-radius: 999px;
  color: #718096;
  font-size: 14px;
  font-weight: 650;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.brand-skin-preview-v5 .membership-product-tabs button.active {
  background: #17212b;
  color: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 32, .14);
}

.brand-skin-preview-v5 .membership-product-panel[hidden] {
  display: none;
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-card {
  position: relative;
  min-height: 326px;
  padding: 28px 24px 24px;
  border: 1px solid #e1e7ec;
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 32px rgba(15, 23, 32, .055);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-card:hover {
  border-color: #8dc9f1;
  box-shadow: 0 16px 36px rgba(29, 155, 240, .1);
  transform: translateY(-2px);
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-card.is-recommended {
  border-color: #8dc9f1;
  background: #fff;
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-card.is-selected {
  border-color: #1d9bf0;
  box-shadow: 0 0 0 2px rgba(29, 155, 240, .14), 0 16px 36px rgba(29, 155, 240, .12);
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-heading {
  min-height: 30px;
  align-items: flex-start;
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-heading > strong {
  color: #17212b;
  font-size: 20px;
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-heading > span {
  position: absolute;
  top: -13px;
  right: 16px;
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-badge {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: #1d9bf0;
  color: #fff;
  font-size: 11px;
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-badge.is-current {
  background: #17212b;
  color: #fff;
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-price {
  margin-top: 28px;
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-price > strong {
  color: #0f1720;
  font-size: 38px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-price small {
  color: #718096;
  font-size: 13px;
}

.brand-skin-preview-v5 .membership-plan-renew {
  display: block;
  min-height: 46px;
  margin-top: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid #edf1f3;
  color: #8291a0;
  font-size: 12px;
  line-height: 1.6;
}

.brand-skin-preview-v5 .membership-plan-features {
  display: grid;
  gap: 12px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.brand-skin-preview-v5 .membership-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #526579;
  font-size: 12px;
  line-height: 1.5;
}

.brand-skin-preview-v5 .membership-plan-features .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: #17212b;
}

.brand-skin-preview-v5 .membership-addon-panel {
  min-height: 326px;
  display: grid;
  place-items: center;
}

.brand-skin-preview-v5 .membership-addon-card {
  width: min(520px, 100%);
  min-height: 190px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 32px;
  padding: 30px 34px;
  border: 1px solid #e1e7ec;
  border-radius: 14px;
  background: #fff;
  color: #17212b;
  text-align: left;
  box-shadow: 0 12px 32px rgba(15, 23, 32, .055);
}

.brand-skin-preview-v5 .membership-addon-card span {
  display: grid;
  gap: 6px;
}

.brand-skin-preview-v5 .membership-addon-card small,
.brand-skin-preview-v5 .membership-addon-card p {
  margin: 0;
  color: #718096;
  font-size: 12px;
  line-height: 1.6;
}

.brand-skin-preview-v5 .membership-addon-card strong {
  font-size: 20px;
}

.brand-skin-preview-v5 .membership-addon-card b {
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}

.brand-skin-preview-v5 .membership-addon-card em {
  grid-column: 1 / -1;
  color: #1d9bf0;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.brand-skin-preview-v5 .membership-addon-card.is-selected {
  border-color: #1d9bf0;
  box-shadow: 0 0 0 2px rgba(29, 155, 240, .14), 0 16px 36px rgba(29, 155, 240, .12);
}

.brand-skin-preview-v5 .membership-addon-card:disabled {
  opacity: .52;
  cursor: not-allowed;
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-card:disabled,
.brand-skin-preview-v5 .membership-page-root .membership-addon-card:disabled {
  cursor: default;
  opacity: .62;
  transform: none;
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-card:disabled:hover,
.brand-skin-preview-v5 .membership-page-root .membership-addon-card:disabled:hover {
  transform: none;
  box-shadow: none;
}

.brand-skin-preview-v5 .membership-page-root .membership-payment-panel {
  min-height: 540px;
  margin-top: 28px;
  padding: 30px 44px;
  border: 1px solid #e5ebef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 23, 32, .055);
  overflow: visible;
}

.brand-skin-preview-v5 .membership-page-root .membership-payment-empty,
.brand-skin-preview-v5 .membership-page-root .membership-payment-loading,
.brand-skin-preview-v5 .membership-page-root .membership-payment-success,
.brand-skin-preview-v5 .membership-page-root .membership-payment-unavailable {
  min-height: 358px;
}

.brand-skin-preview-v5 .membership-page-root .membership-payment-summary {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}

.brand-skin-preview-v5 .membership-page-root .membership-payment-summary strong {
  font-size: 18px;
}

.brand-skin-preview-v5 .membership-page-root .membership-payment-summary b {
  font-size: 30px;
  font-variant-numeric: tabular-nums;
}

.brand-skin-preview-v5 .membership-page-root .membership-payment-methods {
  width: 300px;
  margin: 20px auto 0;
}

.brand-skin-preview-v5 .membership-page-root .membership-payment-stage {
  min-height: 330px;
  padding: 20px 0 12px;
}

.brand-skin-preview-v5 .membership-page-root .membership-payment-qr {
  width: 220px;
  height: 220px;
}

.brand-skin-preview-v5 .membership-page-root .membership-payment-meta,
.brand-skin-preview-v5 .membership-page-root .membership-payment-status,
.brand-skin-preview-v5 .membership-page-root .membership-payment-notify {
  width: min(700px, 100%);
  margin-right: auto;
  margin-left: auto;
}

.brand-skin-preview-v5 .membership-payment-history {
  margin-top: 32px;
}

.brand-skin-preview-v5 .membership-payment-history h2 {
  margin: 0 0 14px;
  color: #17212b;
  font-size: 17px;
}

.brand-skin-preview-v5 .membership-history-table {
  overflow: hidden;
  border: 1px solid #e5ebef;
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
}

.brand-skin-preview-v5 .membership-history-head,
.brand-skin-preview-v5 .membership-history-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr .7fr .55fr;
  align-items: center;
  min-height: 52px;
  padding: 0 24px;
  gap: 16px;
}

.brand-skin-preview-v5 .membership-history-head {
  min-height: 46px;
  border-bottom: 1px solid #edf1f3;
  color: #8291a0;
  font-size: 12px;
}

.brand-skin-preview-v5 .membership-history-row {
  border-bottom: 1px solid #edf1f3;
  color: #526579;
  font-size: 13px;
}

.brand-skin-preview-v5 .membership-history-row:last-child {
  border-bottom: 0;
}

.brand-skin-preview-v5 .membership-history-row strong {
  color: #17212b;
  font-weight: 650;
}

.brand-skin-preview-v5 .membership-history-row b {
  color: #17212b;
  font-variant-numeric: tabular-nums;
}

.brand-skin-preview-v5 .membership-history-row em {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  background: #edf1f3;
  color: #526579;
  font-size: 11px;
  font-style: normal;
}

.brand-skin-preview-v5 .membership-history-row em[data-status="paid"],
.brand-skin-preview-v5 .membership-history-row em[data-status="paid_notified"] {
  background: #e8f4fc;
  color: #0f78bf;
}

.brand-skin-preview-v5 .membership-history-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: #8291a0;
  font-size: 13px;
}

@media (max-width: 760px) {
  .brand-skin-preview-v5 .membership-page-header {
    padding: 0 14px;
  }

  .brand-skin-preview-v5 .membership-page-main {
    width: min(100% - 28px, 520px);
    padding-top: 8px;
  }

  .brand-skin-preview-v5 .membership-page-quote {
    min-height: 128px;
  }

  .brand-skin-preview-v5 .membership-page-quote p {
    font-size: 19px;
  }

  .brand-skin-preview-v5 .membership-page-root .upgrade-plan-grid {
    grid-template-columns: 1fr;
  }

  .brand-skin-preview-v5 .membership-page-root .membership-payment-panel {
    padding: 24px 18px;
  }

  .brand-skin-preview-v5 .membership-history-head {
    display: none;
  }

  .brand-skin-preview-v5 .membership-history-row {
    grid-template-columns: 1fr auto;
    gap: 6px 14px;
    padding: 14px 18px;
  }

  .brand-skin-preview-v5 .membership-history-row span {
    order: 3;
  }

  .brand-skin-preview-v5 .membership-history-row em {
    order: 4;
  }
}
/* Membership page repair: wider, denser, and quiet at 1440px. */
.brand-skin-preview-v5 .membership-page-root .membership-payment-panel:has(.membership-payment-empty) {
  min-height: 88px;
  padding: 12px 28px;
  border-color: #e1e7ec;
  background: #f1f4f6;
  box-shadow: none;
}

.brand-skin-preview-v5 .membership-page-root .membership-payment-panel:has(.membership-payment-empty) .membership-payment-empty {
  min-height: 62px;
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  padding: 0;
}

.brand-skin-preview-v5 .membership-page-root .membership-payment-panel:has(.membership-payment-empty) .membership-payment-empty p {
  margin: 0;
  font-size: 13px;
}

.brand-skin-preview-v5 .membership-page-root .upgrade-plan-card.is-selected:focus-visible,
.brand-skin-preview-v5 .membership-page-root .membership-addon-card.is-selected:focus-visible {
  outline: none;
}
@media (min-width: 901px) {
  .brand-skin-preview-v5 .membership-page-root {
    background: #f7f9fb;
  }

  .brand-skin-preview-v5 .membership-page-main {
    width: min(1120px, calc(100vw - 64px));
    padding-top: 8px;
  }

  .brand-skin-preview-v5 .membership-page-quote {
    min-height: 128px;
    padding-bottom: 24px;
  }

  .brand-skin-preview-v5 .membership-page-quote p {
    font-size: 25px;
  }

  .brand-skin-preview-v5 .membership-product-tabs {
    margin-bottom: 28px;
  }

  .brand-skin-preview-v5 .membership-page-root .upgrade-plan-grid {
    gap: 24px;
  }

  .brand-skin-preview-v5 .membership-page-root .upgrade-plan-card {
    min-height: 340px;
    padding: 32px 30px 28px;
  }

  .brand-skin-preview-v5 .membership-page-root .upgrade-plan-heading > strong {
    font-size: 22px;
  }

  .brand-skin-preview-v5 .membership-page-root .upgrade-plan-price > strong {
    font-size: 42px;
  }

  .brand-skin-preview-v5 .membership-plan-renew {
    font-size: 13px;
  }

  .brand-skin-preview-v5 .membership-plan-features li {
    font-size: 14px;
  }

  .brand-skin-preview-v5 .membership-page-root .membership-payment-panel {
    min-height: 520px;
    margin-top: 24px;
  }
}
/* Membership checkout stays in one fixed surface: select, scan, confirm. */
.brand-skin-preview-v5 .membership-upgrade-modal .modal-body {
  overflow: hidden;
}

.brand-skin-preview-v5 .membership-upgrade-modal .upgrade-page {
  height: 100%;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
}

.brand-skin-preview-v5 .membership-upgrade-modal .upgrade-intro {
  padding: 17px 20px;
  border-radius: 16px;
}

.brand-skin-preview-v5 .membership-upgrade-modal .upgrade-intro h3 {
  font-size: 21px;
}

.brand-skin-preview-v5 .upgrade-checkout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 326px;
  gap: 20px;
}

.brand-skin-preview-v5 .upgrade-catalog {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 2px 4px 4px 0;
}

.brand-skin-preview-v5 .membership-upgrade-modal .upgrade-plan-grid {
  gap: 10px;
}

.brand-skin-preview-v5 .membership-upgrade-modal .upgrade-plan-card {
  min-height: 186px;
  padding: 16px;
  border-radius: 16px;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.brand-skin-preview-v5 .membership-upgrade-modal .upgrade-plan-card.is-selected,
.brand-skin-preview-v5 .membership-upgrade-modal .upgrade-addon.is-selected {
  border-color: #1d9bf0;
  background: #f0f8fe;
  box-shadow: 0 0 0 1px rgba(29, 155, 240, .12);
}

.brand-skin-preview-v5 .membership-upgrade-modal .upgrade-plan-price {
  margin-top: 17px;
}

.brand-skin-preview-v5 .membership-upgrade-modal .upgrade-plan-price > strong {
  font-size: 27px;
}

.brand-skin-preview-v5 .membership-upgrade-modal .upgrade-plan-quota {
  margin-top: 12px;
}

.brand-skin-preview-v5 .membership-upgrade-modal .upgrade-plan-action {
  padding-top: 14px;
}

.brand-skin-preview-v5 .membership-upgrade-modal .upgrade-addon {
  margin-top: 14px;
  border: 1px solid #e1e7ec;
  border-radius: 14px;
}

.brand-skin-preview-v5 .membership-payment-panel {
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid #dfe6eb;
  border-radius: 18px;
  background: #f7f9fb;
  color: #17212b;
  overflow: auto;
}

.brand-skin-preview-v5 .membership-payment-empty,
.brand-skin-preview-v5 .membership-payment-loading,
.brand-skin-preview-v5 .membership-payment-success,
.brand-skin-preview-v5 .membership-payment-unavailable {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

.brand-skin-preview-v5 .membership-payment-empty strong,
.brand-skin-preview-v5 .membership-payment-loading strong,
.brand-skin-preview-v5 .membership-payment-success strong,
.brand-skin-preview-v5 .membership-payment-unavailable strong {
  font-size: 16px;
  font-weight: 700;
}

.brand-skin-preview-v5 .membership-payment-empty p,
.brand-skin-preview-v5 .membership-payment-loading p,
.brand-skin-preview-v5 .membership-payment-success p,
.brand-skin-preview-v5 .membership-payment-unavailable p,
.brand-skin-preview-v5 .membership-payment-stage > p {
  margin: 7px 0 0;
  color: #718096;
  font-size: 12px;
  line-height: 1.6;
}

.brand-skin-preview-v5 .membership-payment-loading .modal-spinner {
  margin-bottom: 16px;
}

.brand-skin-preview-v5 .membership-payment-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e1e7ec;
}

.brand-skin-preview-v5 .membership-payment-summary > div {
  display: grid;
  gap: 3px;
}

.brand-skin-preview-v5 .membership-payment-summary span,
.brand-skin-preview-v5 .membership-payment-summary small {
  color: #718096;
  font-size: 11px;
}

.brand-skin-preview-v5 .membership-payment-summary strong {
  font-size: 15px;
}

.brand-skin-preview-v5 .membership-payment-summary b {
  color: #17212b;
  font-size: 24px;
  line-height: 1;
}

.brand-skin-preview-v5 .membership-payment-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 12px;
  padding: 4px;
  border-radius: 12px;
  background: #e9eef2;
}

.brand-skin-preview-v5 .membership-payment-methods button {
  min-height: 34px;
  border-radius: 9px;
  color: #718096;
  font-size: 12px;
  font-weight: 650;
}

.brand-skin-preview-v5 .membership-payment-methods button.active {
  background: #fff;
  color: #17212b;
  box-shadow: 0 1px 3px rgba(15, 23, 32, .08);
}

.brand-skin-preview-v5 .membership-payment-stage {
  flex: 1;
  min-height: 248px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 0 10px;
  text-align: center;
}

.brand-skin-preview-v5 .membership-payment-stage > strong {
  margin-top: 7px;
  font-size: 13px;
}

.brand-skin-preview-v5 .membership-payment-qr {
  width: 210px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 10px;
  border: 1px solid #dfe6eb;
  border-radius: 14px;
  background: #fff;
}

.brand-skin-preview-v5 .membership-payment-qr img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.brand-skin-preview-v5 .membership-payment-test {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand-skin-preview-v5 .membership-payment-test > span,
.brand-skin-preview-v5 .membership-payment-success > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #e8f4fc;
  color: #0f78bf;
}

.brand-skin-preview-v5 .membership-payment-test .icon,
.brand-skin-preview-v5 .membership-payment-success .icon {
  width: 23px;
  height: 23px;
}

.brand-skin-preview-v5 .membership-payment-test .primary-button,
.brand-skin-preview-v5 .membership-payment-success .primary-button,
.brand-skin-preview-v5 .membership-payment-unavailable .soft-button {
  margin-top: 16px;
}

.brand-skin-preview-v5 .membership-payment-meta,
.brand-skin-preview-v5 .membership-payment-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  color: #718096;
  font-size: 11px;
}

.brand-skin-preview-v5 .membership-payment-meta {
  padding-top: 10px;
  border-top: 1px solid #e1e7ec;
}

.brand-skin-preview-v5 .membership-payment-meta code {
  max-width: 190px;
  overflow: hidden;
  color: #526579;
  font-family: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-skin-preview-v5 .membership-payment-status {
  justify-content: flex-start;
}

.brand-skin-preview-v5 .membership-payment-status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #1d9bf0;
  box-shadow: 0 0 0 4px rgba(29, 155, 240, .1);
}

.brand-skin-preview-v5 .membership-payment-status-dot.is-expired {
  background: #718096;
  box-shadow: 0 0 0 4px rgba(113, 128, 150, .1);
}

.brand-skin-preview-v5 .membership-payment-notify {
  align-self: flex-start;
  color: #0f78bf;
  font-size: 12px;
  font-weight: 650;
}

@media (max-width: 900px) {
  .brand-skin-preview-v5 .upgrade-checkout {
    display: block;
  }

  .brand-skin-preview-v5 .upgrade-catalog {
    overflow: visible;
  }

  .brand-skin-preview-v5 .membership-payment-panel {
    min-height: 470px;
    margin-top: 18px;
  }
}
/* Plot search: grouped chapter results in the shared modal system. */
.brand-skin-preview-v5 .modal.plot-search-modal {
  width: min(920px, calc(100vw - 48px));
  max-width: none;
  height: min(720px, calc(100vh - 48px));
}

.brand-skin-preview-v5 .plot-search-modal .modal-body {
  padding: 0;
  overflow: hidden;
}

.brand-skin-preview-v5 .plot-search-modal > footer {
  display: none;
}

.brand-skin-preview-v5 .plot-search-shell {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.brand-skin-preview-v5 .plot-search-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin: 16px 24px 0;
  padding: 4px;
  border-radius: 14px;
  background: #f1f4f6;
}

.brand-skin-preview-v5 .plot-search-tabs button {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 11px;
  color: #718096;
  font-size: 14px;
  font-weight: 650;
}

.brand-skin-preview-v5 .plot-search-tabs button.active {
  background: #fff;
  color: #17212b;
  box-shadow: 0 1px 3px rgba(15, 23, 32, .08);
}

.brand-skin-preview-v5 .plot-search-tabs button:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.brand-skin-preview-v5 .plot-search-tabs button .icon {
  width: 16px;
  height: 16px;
}

.brand-skin-preview-v5 .plot-search-tabs button span {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.brand-skin-preview-v5 .plot-search-tabs button small {
  color: #95a1ad;
  font-size: 10px;
  font-weight: 500;
}

.brand-skin-preview-v5 .plot-search-panel {
  min-height: 0;
  padding: 18px 24px 24px;
  overflow: auto;
}

.brand-skin-preview-v5 .plot-search-label {
  display: block;
  margin-bottom: 8px;
  color: #17212b;
  font-size: 14px;
  font-weight: 650;
}

.brand-skin-preview-v5 .plot-search-field {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #ccd8e1;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

.brand-skin-preview-v5 .plot-search-field:focus-within {
  border-color: #1d9bf0;
  box-shadow: 0 0 0 3px rgba(29, 155, 240, .12);
}

.brand-skin-preview-v5 .plot-search-field > .icon {
  width: 18px;
  height: 18px;
  color: #718096;
}

.brand-skin-preview-v5 .plot-search-field input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #17212b;
  font-size: 15px;
}

.brand-skin-preview-v5 .plot-search-field input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

.brand-skin-preview-v5 .plot-search-field input::placeholder {
  color: #95a1ad;
}

.brand-skin-preview-v5 .plot-search-clear {
  width: 30px;
  height: 30px;
  display: grid;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 999px;
  color: #718096;
}

.brand-skin-preview-v5 .plot-search-clear:hover {
  background: #eef2f5;
  color: #17212b;
}

.brand-skin-preview-v5 .plot-search-clear[hidden] {
  display: none;
}

.brand-skin-preview-v5 .plot-search-clear .icon {
  width: 16px;
  height: 16px;
}

.brand-skin-preview-v5 .plot-search-helper {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #8291a0;
  font-size: 12px;
}

.brand-skin-preview-v5 .plot-search-helper strong {
  color: #5f7184;
  font-weight: 600;
  text-align: right;
}

.brand-skin-preview-v5 .plot-search-results {
  display: grid;
  align-content: start;
  gap: 10px;
}

.brand-skin-preview-v5 .plot-search-results.plot-search-empty {
  min-height: 260px;
  place-items: center;
  text-align: center;
}

.brand-skin-preview-v5 .plot-search-empty > div > strong {
  color: #526579;
  font-size: 14px;
}

.brand-skin-preview-v5 .plot-search-empty > div > p {
  margin: 7px 0 0;
  color: #95a1ad;
  font-size: 12px;
}

.brand-skin-preview-v5 .plot-search-loading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-skin-preview-v5 .plot-search-loading > span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #1d9bf0;
  box-shadow: 0 0 0 5px rgba(29, 155, 240, .12);
}

.brand-skin-preview-v5 .plot-search-result-card {
  padding: 16px;
  border: 1px solid #e1e7ec;
  border-radius: 14px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.brand-skin-preview-v5 .plot-search-result-card:hover {
  border-color: #b9d9ee;
  box-shadow: 0 6px 18px rgba(15, 23, 32, .05);
}

.brand-skin-preview-v5 .plot-search-result-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand-skin-preview-v5 .plot-search-result-card > header > div {
  min-width: 0;
}

.brand-skin-preview-v5 .plot-search-result-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand-skin-preview-v5 .plot-search-result-title strong {
  overflow: hidden;
  color: #17212b;
  font-size: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-skin-preview-v5 .plot-search-result-title span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eaf5fd;
  color: #0f78bf;
  font-size: 10px;
  font-weight: 650;
}

.brand-skin-preview-v5 .plot-search-result-card > header p {
  margin: 5px 0 0;
  color: #8291a0;
  font-size: 12px;
}

.brand-skin-preview-v5 .plot-search-open-button {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 0 13px;
  border: 1px solid #cfe2f1;
  border-radius: 999px;
  background: #f3f9fd;
  color: #0f78bf;
  font-size: 13px;
  font-weight: 650;
}

.brand-skin-preview-v5 .plot-search-open-button:hover {
  border-color: #9bcdf0;
  background: #eaf5fd;
}

.brand-skin-preview-v5 .plot-search-snippet-list {
  display: grid;
  gap: 8px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid #edf1f4;
}

.brand-skin-preview-v5 .plot-search-snippet {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
}

.brand-skin-preview-v5 .plot-search-snippet > span {
  padding-top: 2px;
  color: #95a1ad;
  font-size: 12px;
}

.brand-skin-preview-v5 .plot-search-snippet p {
  margin: 0;
  overflow: hidden;
  color: #526579;
  font-size: 14px;
  line-height: 1.7;
}

.brand-skin-preview-v5 .plot-search-snippet mark {
  padding: 1px 2px;
  border-radius: 3px;
  background: #dff1fd;
  color: #0f5f95;
  font-weight: 700;
}

@media (max-width: 760px) {
  .brand-skin-preview-v5 .modal.plot-search-modal {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
  }

  .brand-skin-preview-v5 .plot-search-tabs {
    margin-inline: 16px;
  }

  .brand-skin-preview-v5 .plot-search-panel {
    padding-inline: 16px;
  }

  .brand-skin-preview-v5 .plot-search-helper,
  .brand-skin-preview-v5 .plot-search-result-card > header {
    align-items: flex-start;
  }

  .brand-skin-preview-v5 .plot-search-helper {
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
  }
}

/* Persona: fixed dimensions, visible options, and one consistent selection state. */
.brand-skin-preview-v5 .modal.persona-settings-modal {
  width: 760px;
  height: 620px;
}

.brand-skin-preview-v5 .persona-settings-modal .modal-body {
  padding: 12px 24px 20px;
  overflow: hidden;
}

.brand-skin-preview-v5 .persona-settings-modal .persona-panel-head-modal {
  align-items: center;
  padding: 6px 0 14px;
}

.brand-skin-preview-v5 .persona-settings-modal .persona-panel-head-modal p {
  color: #5f7184;
  font-size: 13px;
}

.brand-skin-preview-v5 .persona-settings-modal .segmented-control {
  width: 248px;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background: #eef2f5;
}

.brand-skin-preview-v5 .persona-settings-modal .segmented-control button {
  min-height: 34px;
  border-radius: 999px;
  font-size: 12px;
}

.brand-skin-preview-v5 .persona-settings-modal .persona-single-layout {
  height: 396px;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  padding-top: 16px;
  border-top: 1px solid #edf1f4;
}

.brand-skin-preview-v5 .persona-current-card {
  align-self: start;
  padding: 18px;
  border: 1px solid #e1e7ec;
  border-radius: 16px;
  background: #f7f9fb;
}

.brand-skin-preview-v5 .persona-current-card > span {
  color: #1d9bf0;
  font-size: 11px;
  font-weight: 700;
}

.brand-skin-preview-v5 .persona-current-card > strong {
  display: block;
  margin-top: 8px;
  color: #17212b;
  font-size: 20px;
  line-height: 1.35;
}

.brand-skin-preview-v5 .persona-current-card > p {
  margin: 9px 0 0;
  color: #718096;
  font-size: 12px;
  line-height: 1.65;
}

.brand-skin-preview-v5 .persona-current-card .persona-tag-groups {
  margin-top: 16px;
}

.brand-skin-preview-v5 .persona-style-library {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
}

.brand-skin-preview-v5 .persona-style-library > header,
.brand-skin-preview-v5 .persona-style-library > header > div {
  display: flex;
  align-items: baseline;
}

.brand-skin-preview-v5 .persona-style-library > header {
  justify-content: space-between;
  gap: 14px;
}

.brand-skin-preview-v5 .persona-style-library > header > div {
  gap: 9px;
}

.brand-skin-preview-v5 .persona-style-library > header strong {
  color: #17212b;
  font-size: 14px;
}

.brand-skin-preview-v5 .persona-style-library > header small,
.brand-skin-preview-v5 .persona-style-library > header > span {
  color: #8291a0;
  font-size: 11px;
}

.brand-skin-preview-v5 .persona-style-list {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
  padding-right: 6px;
  overflow: auto;
  scrollbar-gutter: stable;
}

.brand-skin-preview-v5 .persona-style-item {
  min-width: 0;
  position: relative;
  display: block;
}

.brand-skin-preview-v5 .persona-style-more {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 9px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #8291a0;
  cursor: pointer;
  transform: translateY(-50%);
}

.brand-skin-preview-v5 .persona-style-more:hover,
.brand-skin-preview-v5 .persona-style-more:focus-visible {
  background: #eef7fd;
  color: #0f78bf;
  outline: 2px solid rgba(29, 155, 240, .2);
  outline-offset: 1px;
}

.brand-skin-preview-v5 .persona-style-more .dash-icon {
  width: 15px;
  height: 15px;
}
.brand-skin-preview-v5 .persona-style-option {
  min-width: 0;
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e1e7ec;
  border-radius: 14px;
  background: #fff;
  color: #17212b;
  text-align: left;
}

.brand-skin-preview-v5 .persona-style-item.has-menu .persona-style-option {
  padding-right: 48px;
}

.brand-skin-preview-v5 .persona-style-option:hover {
  border-color: #b9d9ee;
  background: #f7fbfe;
}

.brand-skin-preview-v5 .persona-style-option.active {
  border-color: #9bcdf0;
  background: #eef7fd;
}

.brand-skin-preview-v5 .persona-style-option > span {
  min-width: 0;
}

.brand-skin-preview-v5 .persona-style-option strong,
.brand-skin-preview-v5 .persona-style-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-skin-preview-v5 .persona-style-option strong {
  font-size: 14px;
}

.brand-skin-preview-v5 .persona-style-option small {
  margin-top: 4px;
  color: #8291a0;
  font-size: 11px;
}

.brand-skin-preview-v5 .persona-style-option em {
  flex: 0 0 auto;
  color: #8291a0;
  font-size: 11px;
  font-style: normal;
}

.brand-skin-preview-v5 .persona-style-option.active em {
  color: #0f78bf;
  font-weight: 700;
}

.brand-skin-preview-v5 .persona-settings-modal .persona-fusion-layout {
  height: 396px;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid #edf1f4;
}

.brand-skin-preview-v5 .persona-settings-modal .fusion-role-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.brand-skin-preview-v5 .persona-settings-modal .fusion-role-tab {
  min-width: 0;
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e1e7ec;
  border-radius: 14px;
  background: #fff;
  color: #17212b;
  text-align: left;
}

.brand-skin-preview-v5 .persona-settings-modal .fusion-role-tab:hover {
  border-color: #b9d9ee;
  background: #f7fbfe;
}

.brand-skin-preview-v5 .persona-settings-modal .fusion-role-tab.active {
  border-color: #9bcdf0;
  background: #eef7fd;
}

.brand-skin-preview-v5 .persona-settings-modal .fusion-role-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #eef2f5;
  color: #5f7184;
  font-size: 12px;
  font-weight: 800;
}

.brand-skin-preview-v5 .persona-settings-modal .fusion-role-tab.active .fusion-role-mark {
  background: #1d9bf0;
  color: #fff;
}

.brand-skin-preview-v5 .persona-settings-modal .fusion-role-tab > span:last-child {
  min-width: 0;
}

.brand-skin-preview-v5 .persona-settings-modal .fusion-role-tab strong,
.brand-skin-preview-v5 .persona-settings-modal .fusion-role-tab small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-skin-preview-v5 .persona-settings-modal .fusion-role-tab strong {
  font-size: 13px;
}

.brand-skin-preview-v5 .persona-settings-modal .fusion-role-tab small {
  margin-top: 4px;
  color: #8291a0;
  font-size: 11px;
}

.brand-skin-preview-v5 .persona-settings-modal .fusion-style-library {
  min-height: 0;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-links button,
.brand-skin-preview-v5 .workspace-page .writing-reference-links button.active {
  color: #0f1419;
  font-size: 13px;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-links button { font-weight: 500; }
.brand-skin-preview-v5 .workspace-page .writing-reference-links button.active { font-weight: 700; }

.brand-skin-preview-v5 .persona-footer-spacer {
  flex: 1 1 auto;
}

.brand-skin-preview-v5 .modal-notice {
  padding: 14px 16px;
  border: 1px solid #e1e7ec;
  border-radius: 12px;
  background: #f7f9fb;
  color: #526579;
  font-size: 12px;
}

@media (max-width: 900px) {
  .brand-skin-preview-v5 .modal.membership-upgrade-modal,
  .brand-skin-preview-v5 .modal.transform-modal {
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
  }

  .brand-skin-preview-v5 .upgrade-plan-grid,
  .brand-skin-preview-v5 .transform-dialog-grid {
    grid-template-columns: 1fr;
  }
}


/* 2026-07-20: three add-on packs and portrait-safe payment QR */
.brand-skin-preview-v5 .membership-page-root .membership-addon-panel {
  min-height: 326px;
  display: block;
  padding: 22px 0 6px;
}

.brand-skin-preview-v5 .membership-addon-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.brand-skin-preview-v5 .membership-addon-grid .membership-addon-card {
  width: 100%;
  min-height: 226px;
  grid-template-columns: minmax(0, 1fr);
  align-content: space-between;
  gap: 14px;
  padding: 24px;
}

.brand-skin-preview-v5 .membership-addon-grid .membership-addon-card b {
  font-size: 28px;
}

.brand-skin-preview-v5 .membership-addon-grid .membership-addon-card em {
  grid-column: auto;
}

.brand-skin-preview-v5 .membership-addon-grid .membership-addon-card.is-recommended {
  border-color: rgba(29, 155, 240, .7);
  box-shadow: 0 0 0 2px rgba(29, 155, 240, .1), 0 16px 36px rgba(29, 155, 240, .1);
}

.brand-skin-preview-v5 .membership-page-root .membership-payment-qr {
  width: 220px;
  height: auto;
  min-height: 0;
  overflow: hidden;
}

.brand-skin-preview-v5 .membership-page-root .membership-payment-qr img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

@media (max-width: 860px) {
  .brand-skin-preview-v5 .membership-addon-grid {
    grid-template-columns: 1fr;
  }
}


/* Stats pulse dashboard: selected 2026-07-20 visual. */
.brand-skin-preview-v5 .modal.stats-modal {
  position: relative;
  width: min(1240px, calc(100vw - 40px));
  height: min(850px, calc(100vh - 40px));
  max-height: calc(100vh - 40px);
  grid-template-rows: minmax(0, 1fr) 64px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 76px rgba(15, 23, 32, .2);
}

.brand-skin-preview-v5 .stats-modal > header {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 5;
  min-height: 40px;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.brand-skin-preview-v5 .stats-modal > header > div { display: none; }
.brand-skin-preview-v5 .stats-modal > header button {
  width: 40px;
  height: 40px;
  margin: 0;
  color: #657786;
  pointer-events: auto;
}
.brand-skin-preview-v5 .stats-modal > header button:hover { background: #eef3f6; color: #17212b; }
.brand-skin-preview-v5 .stats-modal .modal-body { grid-row: 1; padding: 0; overflow: hidden; }
.brand-skin-preview-v5 .stats-modal > footer {
  grid-row: 2;
  min-height: 64px;
  justify-content: center;
  padding: 0;
  border-top: 1px solid #e7edf2;
  background: #fff;
}
.brand-skin-preview-v5 .stats-modal > footer .primary-button {
  min-width: 112px;
  min-height: 40px;
  border-radius: 999px;
  border-color: #1d9bf0;
  background: #1d9bf0;
  color: #fff;
  box-shadow: 0 8px 20px rgba(17, 24, 32, .16);
}
.brand-skin-preview-v5 .stats-modal > footer .primary-button:hover { background: #168de2; }

.brand-skin-preview-v5 .stats-pulse-dashboard {
  height: 100%;
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  background: #fff;
}

.brand-skin-preview-v5 .stats-pulse-summary {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 34px 30px 28px;
  border-right: 1px solid #e5edf3;
  background: #f7f9fb;
}

.brand-skin-preview-v5 .stats-pulse-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #17212b;
  font-size: 20px;
  font-weight: 760;
}
.brand-skin-preview-v5 .stats-pulse-heading .icon { width: 22px; height: 22px; color: #1d9bf0; }
.brand-skin-preview-v5 .stats-total { margin-top: 50px; }
.brand-skin-preview-v5 .stats-total > span,
.brand-skin-preview-v5 .stats-heatmap-label span,
.brand-skin-preview-v5 .stats-pulse-topline > div > span {
  color: #718096;
  font-size: 13px;
  font-weight: 560;
}
.brand-skin-preview-v5 .stats-total strong {
  display: block;
  margin-top: 8px;
  color: #111820;
  font-size: 34px;
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}
.brand-skin-preview-v5 .stats-total strong small {
  margin-left: 7px;
  color: #657786;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}
.brand-skin-preview-v5 .stats-active-days {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 36px;
  padding: 18px 0;
  border-top: 1px solid #dfe7ed;
  border-bottom: 1px solid #dfe7ed;
}
.brand-skin-preview-v5 .stats-active-days strong { color: #3f4f5e; font-size: 14px; }
.brand-skin-preview-v5 .stats-active-days span { color: #718096; font-size: 13px; }
.brand-skin-preview-v5 .stats-active-days b { color: #1d9bf0; font-size: 24px; font-variant-numeric: tabular-nums; }
.brand-skin-preview-v5 .stats-heatmap-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
}
.brand-skin-preview-v5 .stats-heatmap-label small { color: #8b98a5; font-size: 11px; }
.brand-skin-preview-v5 .stats-heatmap {
  display: grid;
  grid-template-columns: repeat(6, 20px);
  grid-auto-rows: 20px;
  gap: 10px;
  margin-top: 14px;
}
.brand-skin-preview-v5 .stats-heat-cell { border-radius: 6px; background: #dce4ea; }
.brand-skin-preview-v5 .stats-heat-cell.level-1 { background: #b9d7ea; }
.brand-skin-preview-v5 .stats-heat-cell.level-2 { background: #7fc3dc; }
.brand-skin-preview-v5 .stats-heat-cell.level-3 { background: #31a6c4; }
.brand-skin-preview-v5 .stats-heat-cell.level-4 { background: #1d9bf0; }
.brand-skin-preview-v5 .stats-pulse-note {
  max-width: 240px;
  margin: auto 0 0;
  color: #718096;
  font-size: 12px;
  line-height: 1.8;
}

.brand-skin-preview-v5 .stats-pulse-main {
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(260px, 1fr) minmax(250px, .86fr);
  padding: 32px 34px 0;
  overflow: hidden;
}
.brand-skin-preview-v5 .stats-pulse-topline {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(220px, 1.25fr) minmax(120px, 1fr) auto;
  align-items: start;
  gap: 20px;
  padding-right: 36px;
}
.brand-skin-preview-v5 .stats-pulse-topline > div > strong {
  display: block;
  margin-top: 5px;
  color: #17212b;
  font-size: 20px;
  font-weight: 740;
  font-variant-numeric: tabular-nums;
}
.brand-skin-preview-v5 .stats-pulse-title { text-align: center; }
.brand-skin-preview-v5 .stats-pulse-title > span { display: block; color: #17212b !important; font-size: 20px !important; font-weight: 760 !important; }
.brand-skin-preview-v5 .stats-pulse-title small { display: block; margin-top: 6px; color: #7b8b9b; font-size: 11px; }
.brand-skin-preview-v5 .stats-week { text-align: right; }
.brand-skin-preview-v5 .stats-pulse-topline .stats-range {
  align-self: center;
  margin-top: 2px;
  padding: 3px;
  border: 1px solid #e1e7ec;
  border-radius: 999px;
  background: #f1f4f6;
}
.brand-skin-preview-v5 .stats-pulse-topline .stats-range button { min-width: 54px; height: 30px; border-radius: 999px; font-size: 12px; }
.brand-skin-preview-v5 .stats-pulse-topline .stats-range button.active { background: #fff; color: #17212b; box-shadow: 0 1px 4px rgba(17, 24, 32, .1); }
.brand-skin-preview-v5 .stats-pulse-trend { min-height: 0; border: 0; }
.brand-skin-preview-v5 .stats-pulse-trend canvas { width: 100%; display: block; }
.brand-skin-preview-v5 .stats-pulse-lower {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  border-top: 1px solid #e7edf2;
}
.brand-skin-preview-v5 .stats-pulse-lower .stats-section { min-height: 0; padding: 20px 22px 0 0; overflow: hidden; }
.brand-skin-preview-v5 .stats-pulse-lower .stats-section + .stats-section { padding: 20px 0 0 26px; border-left: 1px solid #e7edf2; }
.brand-skin-preview-v5 .stats-pulse-lower .stats-section > header { margin-bottom: 2px; }
.brand-skin-preview-v5 .stats-pulse-lower .stats-section > header h3 { color: #17212b; font-size: 16px; }
.brand-skin-preview-v5 .stats-pulse-lower .stats-section > header p { color: #7b8b9b; font-size: 11px; }
.brand-skin-preview-v5 .stats-pulse-lower .stats-section canvas { width: 100%; display: block; }
.brand-skin-preview-v5 .stats-pulse-lower .stats-project-row { min-height: 36px; }
.brand-skin-preview-v5 .stats-pulse-lower .stats-project-row strong,
.brand-skin-preview-v5 .stats-pulse-lower .stats-project-row em { font-size: 12px; }
.brand-skin-preview-v5 .stats-pulse-lower .stats-project-row span { font-size: 10px; }

@media (max-width: 900px) {
  .brand-skin-preview-v5 .modal.stats-modal { width: min(700px, calc(100vw - 24px)); height: calc(100vh - 24px); max-height: calc(100vh - 24px); }
  .brand-skin-preview-v5 .stats-modal .modal-body { overflow: auto; }
  .brand-skin-preview-v5 .stats-pulse-dashboard { height: auto; grid-template-columns: 1fr; }
  .brand-skin-preview-v5 .stats-pulse-summary { min-height: 470px; border-right: 0; border-bottom: 2px solid rgba(29, 155, 240, .54); }
  .brand-skin-preview-v5 .stats-pulse-main { min-height: 760px; overflow: visible; }
  .brand-skin-preview-v5 .stats-pulse-topline { grid-template-columns: 1fr 1fr; padding-right: 44px; }
  .brand-skin-preview-v5 .stats-pulse-title { order: -1; grid-column: 1 / -1; text-align: left; }
}


/* Stats pulse refinement: comparison pass 2. */
.brand-skin-preview-v5 .stats-modal > header { display: none; }
.brand-skin-preview-v5 .stats-pulse-dashboard { position: relative; }
.brand-skin-preview-v5 .stats-pulse-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 6;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #657786;
  box-shadow: none;
}
.brand-skin-preview-v5 .stats-pulse-close .icon { width: 20px; height: 20px; }
.brand-skin-preview-v5 .stats-pulse-close:hover { background: #eef3f6; color: #17212b; }
.brand-skin-preview-v5 .stats-pulse-close:focus-visible { outline: 2px solid rgba(29, 155, 240, .45); outline-offset: 2px; }
.brand-skin-preview-v5 .stats-pulse-heading { font-size: 20px; }
.brand-skin-preview-v5 .stats-pulse-heading .icon { width: 24px; height: 24px; }
.brand-skin-preview-v5 .stats-pulse-note { max-width: 205px; font-size: 13px; }
.brand-skin-preview-v5 .stats-pulse-topline .stats-range button.active { background: #1d9bf0; color: #fff; box-shadow: none; }
.brand-skin-preview-v5 .stats-pulse-lower .stats-section > header { justify-content: center; text-align: center; }


/* Stats composition legend: readable labels outside canvas. */
.brand-skin-preview-v5 .stats-composition-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  padding: 0 8px;
}
.brand-skin-preview-v5 .stats-composition-legend span {
  min-width: 0;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  color: #657786;
  font-size: 10px;
}
.brand-skin-preview-v5 .stats-composition-legend i { width: 7px; height: 7px; border-radius: 2px; background: #1d9bf0; }
.brand-skin-preview-v5 .stats-composition-legend .tone-2 i { background: #16a394; }
.brand-skin-preview-v5 .stats-composition-legend .tone-3 i { background: #f28b46; }
.brand-skin-preview-v5 .stats-composition-legend .tone-4 i { background: #7a69d4; }
.brand-skin-preview-v5 .stats-composition-legend b { overflow: hidden; font-weight: 560; text-overflow: ellipsis; white-space: nowrap; }
.brand-skin-preview-v5 .stats-composition-legend em { font-style: normal; font-variant-numeric: tabular-nums; }

/* Stats canvas surfaces: keep transparent chart buffers from rendering as dark blocks. */
.brand-skin-preview-v5 .stats-pulse-main,
.brand-skin-preview-v5 .stats-pulse-trend,
.brand-skin-preview-v5 .stats-pulse-lower,
.brand-skin-preview-v5 .stats-pulse-lower .stats-section,
.brand-skin-preview-v5 .stats-pulse-trend canvas,
.brand-skin-preview-v5 .stats-pulse-lower .stats-section canvas {
  background: #fff;
}

/* Chapter generation actions: restore the strong action treatment with a parser-safe selector. */
.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions .chapter-generation-menu > div > button[data-ai-action] {
  background: var(--brand-blue);
  color: #fff;
  font-weight: 650;
}
.brand-skin-preview-v5 .workspace-page .assistant-outline-page-actions .chapter-generation-menu > div > button[data-ai-action]:not(:disabled):hover {
  background: var(--brand-blue-strong);
  color: #fff;
}

/* Stats calendar and topline: real interaction, clearer hierarchy. */
.brand-skin-preview-v5 .stats-pulse-topline {
  min-height: 78px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-right: 38px;
}
.brand-skin-preview-v5 .stats-pulse-title {
  min-width: 180px;
  flex: 1 1 auto;
  text-align: left;
}
.brand-skin-preview-v5 .stats-pulse-title > span {
  font-size: 22px !important;
  line-height: 1.25;
}
.brand-skin-preview-v5 .stats-pulse-title small {
  margin-top: 7px;
  font-size: 12px;
}
.brand-skin-preview-v5 .stats-pulse-metrics {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 30px;
}
.brand-skin-preview-v5 .stats-pulse-metrics > div > span {
  display: block;
  color: #718096;
  font-size: 12px;
  font-weight: 560;
  white-space: nowrap;
}
.brand-skin-preview-v5 .stats-pulse-metrics > div > strong {
  display: block;
  margin-top: 5px;
  color: #17212b;
  font-size: 20px;
  font-weight: 740;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.brand-skin-preview-v5 .stats-week { text-align: left; }
.brand-skin-preview-v5 .stats-pulse-topline .stats-range {
  align-self: center;
  margin: 0;
}
.brand-skin-preview-v5 .stats-heatmap {
  grid-template-columns: repeat(6, 22px);
  grid-auto-rows: 22px;
  gap: 8px;
}
.brand-skin-preview-v5 .stats-heat-cell {
  position: relative;
  width: 22px;
  height: 22px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 7px;
  appearance: none;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(113, 128, 150, .06);
  transition: transform .16s ease, box-shadow .16s ease;
}
.brand-skin-preview-v5 .stats-heat-cell:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(23, 33, 43, .12), inset 0 0 0 1px rgba(23, 33, 43, .08);
}
.brand-skin-preview-v5 .stats-heat-cell:focus-visible,
.brand-skin-preview-v5 .stats-heat-cell.selected {
  outline: 2px solid #17212b;
  outline-offset: 2px;
}
.brand-skin-preview-v5 .stats-calendar-detail {
  min-height: 20px;
  margin: 13px 0 0;
  color: #657786;
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .brand-skin-preview-v5 .stats-pulse-topline { display: grid; grid-template-columns: 1fr; padding-right: 44px; }
  .brand-skin-preview-v5 .stats-pulse-metrics { grid-template-columns: auto auto 1fr; }
}
/* UI follow-up: stats readability, explicit controls, feedback, and avatar crop. */
.brand-skin-preview-v5 .stats-pulse-topline {
  min-height: 104px;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  align-items: start;
  gap: 28px;
  padding-right: 66px;
}
.brand-skin-preview-v5 .stats-pulse-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(92px, auto));
  align-items: start;
  justify-content: end;
  gap: 13px 34px;
}
.brand-skin-preview-v5 .stats-pulse-topline .stats-range {
  grid-column: 1 / -1;
  justify-self: end;
  align-self: start;
  margin: 0;
}
.brand-skin-preview-v5 .stats-pulse-topline .stats-range button {
  min-width: 52px;
  height: 29px;
}
.brand-skin-preview-v5 .stats-heatmap {
  width: max-content;
  margin: 14px auto 0;
}
.brand-skin-preview-v5 .stats-calendar-detail {
  text-align: center;
}
.brand-skin-preview-v5 .stats-pulse-lower .stats-composition canvas {
  height: 174px;
}
.brand-skin-preview-v5 .stats-composition-legend .tone-5 i { background: #60758a; }
.brand-skin-preview-v5 .stats-pulse-lower .stats-projects {
  display: flex;
  flex-direction: column;
}
.brand-skin-preview-v5 .stats-projects .stats-project-list {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: #c7d2dc transparent;
}
.brand-skin-preview-v5 .stats-projects .stats-project-list::-webkit-scrollbar { width: 7px; }
.brand-skin-preview-v5 .stats-projects .stats-project-list::-webkit-scrollbar-track { background: transparent; }
.brand-skin-preview-v5 .stats-projects .stats-project-list::-webkit-scrollbar-thumb { border-radius: 999px; background: #c7d2dc; }
.brand-skin-preview-v5 .stats-modal .modal-footer {
  justify-content: flex-end;
  padding: 0 24px;
}
.brand-skin-preview-v5 .stats-modal .modal-footer .primary-button {
  min-width: 92px;
  background: #111820;
  border-color: #111820;
  color: #fff;
  box-shadow: none;
}
.brand-skin-preview-v5 .stats-modal .modal-footer .primary-button:hover {
  background: #27323d;
  border-color: #27323d;
}
.brand-skin-preview-v5 .workspace-page .chapter-context-actions > .chapter-create-volume {
  width: auto;
  min-width: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid #d9e2ea;
  border-radius: 999px;
  background: #fff;
  color: #405261;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.brand-skin-preview-v5 .workspace-page .chapter-context-actions > .chapter-create-volume .icon {
  width: 14px;
  height: 14px;
}
.brand-skin-preview-v5 .workspace-page .chapter-context-actions > .chapter-create-volume:hover {
  border-color: #bfcbd5;
  background: #f1f5f8;
}
.brand-skin-preview-v5 .workspace-page .chapter-context-actions > .context-create-chapter {
  min-width: 78px;
  padding-inline: 10px;
}
.brand-skin-preview-v5 .workspace-page .assistant-session-summary > button {
  max-width: 64%;
  padding-inline: 12px;
}
.brand-skin-preview-v5 .avatar-button {
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  flex: 0 0 34px;
  padding: 0;
  overflow: hidden;
  border-radius: 50%;
  box-sizing: border-box;
}
.brand-skin-preview-v5 .avatar-button > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
}
.brand-skin-preview-v5 .avatar-button > svg,
.brand-skin-preview-v5 .avatar-button > .icon {
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  margin: auto;
}
.brand-skin-preview-v5 .feedback-modal {
  width: min(700px, calc(100vw - 40px));
}
.brand-skin-preview-v5 .feedback-modal .modal-body {
  padding: 22px 26px 26px;
}
.brand-skin-preview-v5 .feedback-form {
  display: grid;
  gap: 20px;
}
.brand-skin-preview-v5 .feedback-intro {
  padding: 18px 20px;
  border-radius: 18px;
  background: #f4f8fb;
}
.brand-skin-preview-v5 .feedback-intro strong {
  color: #111820;
  font-size: 17px;
  font-weight: 720;
}
.brand-skin-preview-v5 .feedback-intro p {
  margin: 6px 0 0;
  color: #657786;
  font-size: 14px;
  line-height: 1.7;
}
.brand-skin-preview-v5 .feedback-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.brand-skin-preview-v5 .feedback-form .modal-field {
  display: grid;
  gap: 8px;
}
.brand-skin-preview-v5 .feedback-form .modal-field > span {
  color: #263746;
  font-size: 14px;
  font-weight: 650;
}
.brand-skin-preview-v5 .feedback-form .modal-field > span small,
.brand-skin-preview-v5 .feedback-description > small {
  color: #8b98a5;
  font-size: 12px;
  font-weight: 500;
}
.brand-skin-preview-v5 .feedback-form input,
.brand-skin-preview-v5 .feedback-form select,
.brand-skin-preview-v5 .feedback-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d9e2ea;
  border-radius: 14px;
  background: #fff;
  color: #17212b;
  font: inherit;
  outline: 0;
}
.brand-skin-preview-v5 .feedback-form input,
.brand-skin-preview-v5 .feedback-form select {
  height: 46px;
  padding: 0 14px;
}
.brand-skin-preview-v5 .feedback-form textarea {
  min-height: 150px;
  padding: 13px 14px;
  resize: vertical;
  line-height: 1.7;
}
.brand-skin-preview-v5 .feedback-form input:focus,
.brand-skin-preview-v5 .feedback-form select:focus,
.brand-skin-preview-v5 .feedback-form textarea:focus {
  border-color: #1d9bf0;
  box-shadow: 0 0 0 3px rgba(29, 155, 240, .12);
}
.brand-skin-preview-v5 .feedback-context {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #718096;
  font-size: 12px;
}
.brand-skin-preview-v5 .feedback-context .icon { width: 16px; height: 16px; color: #1d9bf0; }
@media (max-width: 900px) {
  .brand-skin-preview-v5 .stats-pulse-topline {
    grid-template-columns: 1fr;
    min-height: 150px;
    padding-right: 48px;
  }
  .brand-skin-preview-v5 .stats-pulse-metrics { justify-content: start; }
  .brand-skin-preview-v5 .stats-pulse-topline .stats-range { justify-self: start; }
  .brand-skin-preview-v5 .feedback-grid { grid-template-columns: 1fr; }
}
/* Stats modal footer uses an id-only footer in the production template. */
.brand-skin-preview-v5 #modal.stats-modal > #modalFooter {
  justify-content: flex-end;
  padding: 0 24px;
}
.brand-skin-preview-v5 #modal.stats-modal > #modalFooter .primary-button {
  min-width: 92px;
  background: #111820 !important;
  border-color: #111820 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.brand-skin-preview-v5 #modal.stats-modal > #modalFooter .primary-button:hover {
  background: #27323d !important;
  border-color: #27323d !important;
}
/* Feedback screenshots: compact, previewable, and consistent with the product control system. */
.brand-skin-preview-v5 .feedback-modal {
  max-height: calc(100vh - 32px);
}
.brand-skin-preview-v5 .feedback-modal .modal-body {
  overflow-y: auto;
}
.brand-skin-preview-v5 .feedback-attachments {
  display: grid;
  gap: 10px;
}
.brand-skin-preview-v5 .feedback-attachments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brand-skin-preview-v5 .feedback-attachments-head > span {
  color: #263746;
  font-size: 14px;
  font-weight: 650;
}
.brand-skin-preview-v5 .feedback-attachments-head > span small {
  color: #8b98a5;
  font-size: 12px;
  font-weight: 500;
}
.brand-skin-preview-v5 .feedback-upload-button {
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border: 1px solid #d9e2ea;
  border-radius: 999px;
  background: #fff;
  color: #405261;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.brand-skin-preview-v5 .feedback-upload-button:hover {
  border-color: #bfcbd5;
  background: #f2f6f9;
  color: #17212b;
}
.brand-skin-preview-v5 .feedback-upload-button:focus-within {
  border-color: #1d9bf0;
  box-shadow: 0 0 0 3px rgba(29, 155, 240, .12);
}
.brand-skin-preview-v5 .feedback-upload-button .icon {
  width: 16px;
  height: 16px;
  color: #657786;
}
.brand-skin-preview-v5 .feedback-upload-button input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.brand-skin-preview-v5 .feedback-image-preview {
  min-height: 78px;
  display: grid;
  align-items: stretch;
  padding: 12px;
  border: 1px dashed #cdd8e2;
  border-radius: 16px;
  background: #fbfcfd;
  box-sizing: border-box;
}
.brand-skin-preview-v5 .feedback-image-preview.has-images {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.brand-skin-preview-v5 .feedback-upload-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
}
.brand-skin-preview-v5 .feedback-upload-empty strong {
  color: #536471;
  font-size: 13px;
  font-weight: 650;
}
.brand-skin-preview-v5 .feedback-upload-empty span {
  color: #8b98a5;
  font-size: 12px;
}
.brand-skin-preview-v5 .feedback-image-card {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e1e8ee;
  border-radius: 13px;
  background: #fff;
}
.brand-skin-preview-v5 .feedback-image-card > img {
  width: 100%;
  height: 76px;
  display: block;
  object-fit: cover;
  background: #eef2f5;
}
.brand-skin-preview-v5 .feedback-image-card figcaption {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 8px 8px;
}
.brand-skin-preview-v5 .feedback-image-card figcaption span {
  overflow: hidden;
  color: #263746;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-skin-preview-v5 .feedback-image-card figcaption small {
  color: #8b98a5;
  font-size: 10px;
}
.brand-skin-preview-v5 .feedback-image-card > button {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 24, 32, .78);
  color: #fff;
  box-shadow: 0 2px 8px rgba(17, 24, 32, .18);
}
.brand-skin-preview-v5 .feedback-image-card > button:hover { background: #111820; }
.brand-skin-preview-v5 .feedback-image-card > button .icon { width: 13px; height: 13px; }
@media (max-width: 620px) {
  .brand-skin-preview-v5 .feedback-image-preview.has-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The four writing-reference pages use one canonical reading hierarchy. */
.brand-skin-preview-v5 .workspace-page .writing-reference-document > header h2 {
  color: #17212b;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.45;
}

.brand-skin-preview-v5 .workspace-page .writing-reference-document > .assistant-outline-reference-editor,
.brand-skin-preview-v5 .workspace-page .writing-reference-document .writing-reference-inline-editor[data-autosize-profile] {
  color: #17212b;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
}

/* Give the statistics range switch a distinct row and standard spacing. */
.brand-skin-preview-v5 .stats-pulse-metrics {
  row-gap: 20px;
  column-gap: 32px;
}

.brand-skin-preview-v5 .stats-pulse-topline .stats-range {
  padding: 4px;
}

.brand-skin-preview-v5 .stats-pulse-topline .stats-range button {
  min-width: 56px;
  height: 32px;
}