:root {
  --bg: #eef0ef;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --panel-soft: #f7f8f7;
  --line: rgba(32, 36, 33, 0.1);
  --line-strong: rgba(32, 36, 33, 0.17);
  --text: #202421;
  --muted: #69716b;
  --primary: #28577d;
  --primary-hover: #204968;
  --primary-soft: #eaf1f6;
  --success: #3b7159;
  --success-soft: #edf6f0;
  --warning: #8a642d;
  --warning-soft: #faf3e7;
  --danger: #a74646;
  --danger-soft: #fbefef;
  --radius: 8px;
  --radius-control: 8px;
  --radius-tag: 6px;
  --shadow-xs: 0 1px 2px rgba(32, 36, 33, 0.05);
  --shadow-sm: 0 5px 16px rgba(32, 36, 33, 0.06);
  --shadow-md: 0 12px 30px rgba(32, 36, 33, 0.08);
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  --font-size-caption: 12px;
  --font-size-body: 14px;
  --font-size-group: 16px;
  --font-size-section: 20px;
  --font-size-page: 24px;
}

body.document-studio-theme {
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  line-height: 1.55;
  background: var(--bg);
}

body.document-studio-theme button,
body.document-studio-theme input,
body.document-studio-theme select,
body.document-studio-theme textarea {
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  line-height: 1.4;
}

body.document-studio-theme h1,
body.document-studio-theme h2,
body.document-studio-theme h3,
body.document-studio-theme h4,
body.document-studio-theme strong {
  font-family: var(--font-ui);
  letter-spacing: 0;
}

body.document-studio-theme button {
  min-height: 40px;
  border-radius: var(--radius-control);
  font-weight: 600;
}

body.document-studio-theme input,
body.document-studio-theme select {
  min-height: 42px;
}

body.document-studio-theme input,
body.document-studio-theme select,
body.document-studio-theme textarea {
  border-color: var(--line);
  border-radius: var(--radius-control);
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-xs);
}

body.document-studio-theme input:hover,
body.document-studio-theme select:hover,
body.document-studio-theme textarea:hover {
  border-color: var(--line-strong);
}

body.document-studio-theme input:focus,
body.document-studio-theme select:focus,
body.document-studio-theme textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(40, 87, 125, 0.12);
}

.catalog-source-text {
  min-height: 320px;
  height: 320px;
  line-height: 1.6;
  resize: vertical;
}

.muted,
.tiny,
.sidebar-project small,
.sidebar-project span,
.header-copy p,
.step-copy em,
.stage-head p,
.settings-section-title span,
.select-card-copy em,
.visual-choice-card em,
.layout-choice-card em,
.studio-inspector-head p,
.studio-summary-group small,
.studio-summary-group span,
.image-history-copy em,
.image-result-title span,
.image-result-meta span,
.project-table th,
.project-table td,
.field small,
.field-full small {
  font-size: var(--font-size-caption);
  line-height: 1.5;
}

.brand-button {
  min-height: 46px;
  padding: 5px 6px;
  border-radius: var(--radius);
}

.brand-button:hover {
  background: rgba(255, 255, 255, 0.7);
}

.brand-button .brand-mark,
.brand-mark {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border: 0;
  border-radius: var(--radius);
  background: var(--text);
  font-family: var(--font-ui);
  font-size: 12px;
  box-shadow: var(--shadow-xs);
}

.brand-text {
  gap: 2px;
}

.brand-text strong {
  font-family: var(--font-ui);
  font-size: var(--font-size-group);
  font-weight: 700;
  line-height: 1.3;
}

.brand-text em {
  font-size: var(--font-size-caption);
  line-height: 1.3;
}

.sidebar {
  background: #f6f7f5;
  gap: 16px;
}

.sidebar-project {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-xs);
}

.sidebar-project strong {
  margin-top: 6px;
  font-size: var(--font-size-body);
  font-weight: 600;
  line-height: 1.45;
}

.side-nav {
  gap: 7px;
}

.side-nav button {
  min-height: 42px;
  padding: 0 10px;
  border-radius: var(--radius);
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
}

.side-nav button:hover {
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--shadow-xs);
}

.side-nav button.active {
  border: 1px solid rgba(40, 87, 125, 0.12);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: inset 3px 0 0 var(--primary), var(--shadow-sm);
}

.side-nav button span {
  width: 22px;
  font-size: 12px;
  font-weight: 600;
}

.side-nav button em {
  font-size: 13px;
  font-weight: 600;
}

.sidebar-user {
  width: 34px;
  height: 34px;
  font-size: 12px;
  box-shadow: var(--shadow-sm);
}

.topbar {
  min-height: 68px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 1px 10px rgba(32, 36, 33, 0.04);
}

.header-copy h1 {
  margin-bottom: 4px;
  font-family: var(--font-ui);
  font-size: var(--font-size-page);
  font-weight: 700;
  line-height: 1.3;
}

.header-actions {
  gap: 8px;
}

.header-actions button,
.btn,
.stage-actions button,
.toolbar button,
.utility-button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-control);
  font-size: var(--font-size-body);
  font-weight: 600;
}

.header-actions > button:not(.secondary),
.btn:not(.secondary):not(.ghost):not(.danger),
.stage-actions button:not(.secondary):not(.ghost):not(.danger),
.toolbar button:not(.secondary):not(.ghost):not(.danger),
.settings-sticky-actions button:not(.secondary),
.info-fill-sticky-actions button:not(.secondary) {
  box-shadow: 0 5px 14px rgba(40, 87, 125, 0.16);
}

.header-actions button.secondary,
.btn.secondary,
button.secondary,
.utility-button {
  border-color: var(--line);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.route-toggle,
.market-tabs,
.admin-section-nav,
.planning-context-tabs,
.catalog-variant-tabs,
.image-mode-switch,
.segmented-control {
  padding: 4px;
  border-color: var(--line);
  border-radius: var(--radius);
  background: #ecefed;
}

.route-toggle button,
.market-tabs button,
.admin-section-nav button,
.planning-context-tabs button,
.catalog-variant-tabs button,
.image-mode-switch button,
.segmented-control button {
  min-height: 36px;
  border-radius: 6px;
  font-size: 13px;
}

.route-toggle button.active,
.market-tabs button.active,
.admin-section-nav button.active,
.planning-context-tabs button.active,
.catalog-variant-tabs button.active,
.image-mode-switch button.active,
.segmented-control button.active {
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.workspace-shell .step-strip {
  min-height: 68px;
  margin-top: 22px;
  padding: 0;
  gap: 8px;
  border: 0;
  background: transparent;
}

.workspace-shell .step-item {
  min-height: 68px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-xs);
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
}

.workspace-shell .step-item:last-child {
  border-right: 1px solid var(--line);
}

.workspace-shell .step-item:hover {
  border-color: rgba(40, 87, 125, 0.2);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.workspace-shell .step-item.active {
  border-color: rgba(40, 87, 125, 0.24);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: inset 0 -3px 0 var(--primary), var(--shadow-sm);
}

.workspace-shell .step-index {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}

.workspace-shell .step-copy strong {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.workspace-shell .step-copy em {
  margin-top: 3px;
  font-size: var(--font-size-caption);
  line-height: 1.4;
}

.workspace-shell .page {
  margin-top: 10px;
}

.stage,
.workspace-shell .stage,
.settings-stage,
.info-fill-stage,
.catalog-planning-stage,
.engineering-tool-stage,
.image-studio {
  border-color: var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-md);
}

.stage {
  padding: 22px;
  gap: 18px;
}

.stage-head h2 {
  font-family: var(--font-ui);
  font-size: var(--font-size-section);
  font-weight: 700;
  line-height: 1.3;
}

.stage-head p {
  font-size: var(--font-size-body);
  line-height: 1.55;
}

.badge,
.pill,
.metric,
.preset-rule-tag,
.layout-reference-badge,
.analysis-status,
.package-detection-badge {
  border-radius: var(--radius-tag);
  font-size: var(--font-size-caption);
  font-weight: 600;
}

.settings-stage {
  padding: 30px 38px 90px;
}

.settings-stage > .stage-head {
  min-height: 96px;
  margin: -30px -38px 0;
  padding: 27px 38px 21px;
  border-bottom-color: var(--line);
  border-radius: var(--radius) var(--radius) 0 0;
  background: #fff;
}

.settings-section {
  padding: 26px 0;
  border-bottom-color: var(--line);
  gap: 16px;
}

.settings-section-title strong {
  font-family: var(--font-ui);
  font-size: var(--font-size-group);
  font-weight: 700;
  line-height: 1.35;
}

.settings-section-title span {
  font-size: var(--font-size-caption);
}

.title-input-wrap input {
  min-height: 46px;
  padding: 0 82px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: #fff;
  font-size: var(--font-size-body);
  box-shadow: var(--shadow-xs);
}

.title-input-wrap input:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(40, 87, 125, 0.12);
}

.title-input-wrap span {
  right: 14px;
  font-size: var(--font-size-caption);
}

.page-slider-wrap output {
  min-width: 46px;
  padding: 6px 9px;
  border-radius: var(--radius-tag);
  font-size: var(--font-size-caption);
  box-shadow: var(--shadow-sm);
}

.page-ticks {
  font-size: var(--font-size-caption);
}

.select-card-grid {
  gap: 12px;
}

.select-card,
.model-card,
.choice-card,
.toggle-card,
.upload-card,
.image-source-card,
.image-setting-choice,
.image-layout-choice,
.image-style-choice,
.visual-choice-card,
.layout-choice-card,
.cover-choice-card,
.parse-mode-card,
.bid-category-card,
.package-option,
.whole-package-option {
  border-color: var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.select-card {
  min-height: 70px;
  padding: 14px 16px;
}

.select-card:hover,
.model-card:hover,
.choice-card:hover,
.toggle-card:hover,
.upload-card:hover,
.image-source-card:hover,
.visual-choice-card:hover,
.layout-choice-card:hover,
.cover-choice-card:hover,
.parse-mode-card:hover,
.bid-category-card:hover {
  border-color: rgba(40, 87, 125, 0.24);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.select-card:has(input:checked),
.model-card:has(input:checked),
.visual-choice-card:has(input:checked),
.layout-choice-card:has(input:checked),
.cover-choice-card:has(input:checked),
.choice-card.active,
.toggle-card.active,
.image-source-card.active,
.parse-mode-card.active,
.bid-category-card.active {
  border-color: rgba(40, 87, 125, 0.3);
  border-radius: var(--radius);
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px rgba(40, 87, 125, 0.08), var(--shadow-sm);
}

.choice-indicator {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}

.select-card-copy strong {
  font-size: var(--font-size-body);
  font-weight: 600;
}

.select-card-copy em {
  margin-top: 1px;
}

.model-card-grid {
  gap: 9px;
  border-top: 0;
}

.model-card {
  min-height: 60px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.model-card:has(input:checked) {
  border-color: rgba(40, 87, 125, 0.28);
  border-radius: var(--radius);
  box-shadow: inset 3px 0 0 var(--primary), var(--shadow-sm);
}

.model-symbol {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  font-size: 12px;
}

.model-brand-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(25, 52, 74, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(22, 47, 68, 0.08);
}

.model-brand-icon img {
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

.model-card:has(input:checked) .model-brand-icon {
  border-color: rgba(40, 87, 125, 0.36);
  box-shadow: 0 0 0 2px rgba(40, 87, 125, 0.1);
}

.admin-model-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-model-name > strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.studio-summary-model {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.studio-summary-model .model-brand-icon,
.studio-summary-model .model-symbol {
  width: 26px;
  height: 26px;
  flex-basis: 26px;
}

.studio-summary-model .model-brand-icon img {
  width: 21px;
  height: 21px;
}

.studio-summary-model > strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.visual-card-scroller {
  grid-auto-columns: 184px;
  gap: 12px;
}

.layout-card-grid {
  grid-auto-columns: 244px;
  gap: 12px;
}

.visual-choice-card,
.layout-choice-card,
.cover-choice-card {
  padding: 10px;
  border-radius: var(--radius);
}

.visual-choice-card strong,
.layout-choice-card strong,
.cover-choice-card strong {
  font-size: var(--font-size-body);
  font-weight: 600;
  line-height: 1.4;
}

.visual-choice-card em,
.layout-choice-card em {
  min-height: 38px;
  font-size: var(--font-size-caption);
  line-height: 1.5;
}

.style-preview-frame,
.layout-preview-frame {
  border-color: var(--line);
  border-radius: 6px;
}

.image-preview-button {
  min-height: 32px;
  border-radius: 6px;
  font-size: var(--font-size-caption);
}

.preset-rule-tag,
.layout-reference-badge {
  padding: 4px 7px;
  font-size: var(--font-size-caption);
}

.compact-settings-grid {
  gap: 20px;
}

.pill-choice-row {
  gap: 7px;
}

.pill-choice span,
.config-options span,
.summary-tags b,
.studio-summary-tags b {
  min-height: 32px;
  padding: 0 10px;
  border-color: var(--line);
  border-radius: var(--radius-tag);
  background: #fff;
  font-size: var(--font-size-caption);
  font-weight: 600;
  box-shadow: var(--shadow-xs);
}

.advanced-settings {
  padding: 20px 0;
}

.advanced-settings summary {
  min-height: 40px;
  font-size: var(--font-size-body);
  font-weight: 600;
}

.cover-card-grid {
  grid-auto-columns: 174px;
  gap: 12px;
}

.cover-preview {
  border-radius: 6px;
}

.settings-sticky-actions,
.info-fill-sticky-actions {
  min-height: 76px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-top-color: var(--line);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 -8px 24px rgba(32, 36, 33, 0.06);
}

.settings-sticky-actions button,
.info-fill-sticky-actions button {
  min-height: 40px;
  border-radius: var(--radius-control);
  font-size: var(--font-size-body);
}

.settings-sticky-actions span {
  font-size: var(--font-size-caption);
}

.studio-inspector {
  padding: 22px 18px;
  background: #f6f7f5;
}

.studio-inspector-head span {
  font-size: var(--font-size-caption);
  font-weight: 700;
}

.studio-inspector-head h2 {
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: var(--font-size-section);
  font-weight: 700;
  line-height: 1.3;
}

.studio-inspector-head p {
  margin-top: 7px;
  margin-bottom: 16px;
}

.studio-summary-group {
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: var(--shadow-xs);
}

.studio-summary-group small {
  font-size: var(--font-size-caption);
  font-weight: 600;
}

.studio-summary-group strong {
  margin-top: 7px;
  font-size: var(--font-size-body);
  font-weight: 600;
  line-height: 1.45;
}

.studio-summary-group span {
  margin-top: 4px;
}

.studio-summary-tags {
  gap: 6px;
}

.studio-summary-tags b {
  display: inline-flex;
  align-items: center;
}

.studio-inspector-note {
  padding: 12px 13px;
  border: 1px solid rgba(138, 100, 45, 0.14);
  border-left: 3px solid #b4823e;
  border-radius: var(--radius);
  font-size: var(--font-size-caption);
  line-height: 1.55;
  box-shadow: var(--shadow-xs);
}

@media (max-width: 900px) {
  .catalog-source-text {
    min-height: 260px;
    height: 260px;
  }
}