:root {
  --ink: #182238;
  --muted: #778196;
  --line: #e5e8ef;
  --brand: #e84b87;
  --brand-soft: #fff0f6;
  --navy-soft: #eef2f8;
  --page: #f7f7fa;
  --white: #fff;
}
* { box-sizing: border-box; }
html { min-width: 0; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 8% -4%, rgba(232,75,135,.08), transparent 30rem), var(--page); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.page { width: min(100%, 680px); margin: 0 auto; padding: 18px 12px 44px; transition: max-width .2s ease; }
body.summary-mode .page { width: min(100%, 1180px); }
.hero { padding: 5px 5px 14px; }
.eyebrow { margin: 0 0 5px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
h1 { margin: 0; font-size: 25px; line-height: 1.2; }
h1, h2, h3, h4, .q-title h3, .section-title h2, .module-title, .group-name, .panel-head h2, .basic-meta-title { font-weight: 800; }
.offline-note { display: flex; align-items: flex-start; gap: 7px; margin: 8px 0 0; color: #665468; font-size: 11px; line-height: 1.5; }
.offline-note > span { width: 7px; height: 7px; flex: 0 0 auto; margin-top: 5px; border-radius: 50%; background: #33a06f; }
.section-card { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--white); box-shadow: 0 6px 18px rgba(28,40,66,.04); }
.section-title { display: flex; align-items: center; gap: 8px; padding: 12px 13px; border-bottom: 1px solid var(--line); }
.section-number, .module-number { display: grid; width: 25px; height: 25px; place-items: center; flex: 0 0 auto; border-radius: 7px; color: var(--brand); background: var(--brand-soft); font-size: 11px; font-weight: 850; }
.section-title h2 { margin: 0; font-size: 17px; }
.q-block { padding: 9px 13px; border-bottom: 1px solid var(--line); }
.q-block:last-child { border-bottom: 0; }
.q-title { display: flex; align-items: baseline; gap: 6px; margin-bottom: 5px; }
.q-title h3 { margin: 0; font-size: 14px; white-space: nowrap; }
.title-note { color: var(--muted); font-size: 11px; line-height: 1.3; }
.q-line { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-height: 29px; font-size: 13px; line-height: 1.4; }
.q-line + .q-line { margin-top: 5px; }
.long-line { align-items: flex-start; }
.prompt { flex: 0 1 auto; font-weight: 400; }
.controls, .chips { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.chips.nowrap { flex-wrap: nowrap; }
.chip { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 28px; padding: 4px 8px; border: 1px solid #dfe3eb; border-radius: 8px; background: #fff; color: #344158; font-size: 12px; line-height: 1; white-space: nowrap; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); font-weight: 400; }
.mini-input { width: 73px; height: 30px; min-width: 0; padding: 0 7px; border: 1px solid #d8dde7; border-radius: 8px; color: var(--ink); background: #fff; outline: none; }
.mini-input.short { width: 54px; }
.mini-input.medium { width: 110px; }
.text-input { width: min(100%,260px); height: 31px; padding: 0 8px; border: 1px solid #d8dde7; border-radius: 8px; outline: none; }
.text-input.wide { flex: 1 1 180px; }
.long-textarea { width: 100%; min-height: 96px; resize: vertical; padding: 9px 10px; border: 1px solid #d8dde7; border-radius: 9px; color: var(--ink); background: #fff; line-height: 1.5; outline: none; }
.supplement-inline { display: inline-flex; align-items: center; gap: 5px; margin-left: 2px; }
.supplement-inline .prompt { color: var(--muted); font-size: 11px; white-space: nowrap; }
.supplement-inline .text-input { width: 150px; flex: 0 1 150px; }
.mini-input:focus, .text-input:focus, .long-textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(232,75,135,.1); }
.invalid { border-color: #d73548 !important; box-shadow: 0 0 0 3px rgba(215,53,72,.1) !important; }
.required-mark { margin-right: 3px; color: #e84b87; font-style: normal; font-weight: 900; }
.chips.invalid-choice .chip { border-color: #d73548; box-shadow: 0 0 0 2px rgba(215,53,72,.1); }
.unit { color: var(--muted); font-size: 11px; margin-left: -3px; }
.people-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.person-row { display: flex; align-items: center; min-width: 0; gap: 3px; font-size: 12px; white-space: nowrap; }
.person-row > input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--brand); }
.person-row .mini-input { flex: 1 1 62px; width: 62px; padding: 0 7px; }
.person-row .mini-input:disabled { color: #aab1bd; border-color: #eceef2; background: #f5f6f8; }
.person-row .unit { margin-left: -2px; font-size: 10px; }
.layout-row { display: flex; flex-wrap: nowrap; gap: 4px; }
.layout-row .chip { min-height: 27px; padding: 4px 7px; }
.conditional { margin-top: 5px; padding-left: 8px; border-left: 2px solid var(--brand-soft); }
.is-hidden { display: none !important; }
.space-block.is-collapsed { display: none !important; }
.space-block[data-space="主卫"], .space-block[data-space="次卫"] {
  --brand: #2f80ed;
  --brand-soft: #eaf3ff;
  --bath-ink: #1d5f9f;
  --bath-line: #cfe2f8;
}
.space-block[data-space="主卫"] .section-card, .space-block[data-space="次卫"] .section-card { border-color: var(--bath-line); }
.space-block[data-space="主卫"] .space-banner, .space-block[data-space="次卫"] .space-banner { color: var(--bath-ink); background: #eef6ff; }
.space-block[data-space="主卫"] .space-caption, .space-block[data-space="次卫"] .space-caption { color: #4d82b6; }
.space-block[data-space="厅卧阳"] {
  --brand: #2f9e62;
  --brand-soft: #eaf8ef;
  --other-ink: #187548;
  --other-line: #c4e8d1;
}
.space-block[data-space="厅卧阳"] .section-card { border-color: var(--other-line); }
.space-block[data-space="厅卧阳"] .space-banner { color: var(--other-ink); background: #eefaf2; }
.space-block[data-space="厅卧阳"] .space-caption { color: #4f936c; }
.form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.primary-button { grid-column: 1 / -1; min-height: 46px; border: 0; border-radius: 13px; color: #fff; background: var(--brand); font-weight: 800; box-shadow: 0 7px 16px rgba(232,75,135,.22); }
.secondary-button { min-height: 40px; padding: 7px 12px; border: 1px solid #dfe3eb; border-radius: 11px; color: #344158; background: #fff; font-weight: 700; }
.secondary-button.compact { min-height: 34px; padding: 5px 9px; border-radius: 9px; font-size: 11px; }
.basic-meta { margin: 0 0 10px; padding: 11px 12px; border: 1px solid #f0d6e1; border-radius: 12px; background: #fffafd; }
.basic-meta-title { margin-bottom: 8px; color: #513448; font-size: 14px; }
.basic-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.basic-meta-grid label, .basic-meta-grid .meta-field { display: flex; align-items: center; gap: 6px; min-width: 0; color: #513448; font-size: 12px; font-weight: 700; }
.name-title-controls { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.name-title-chips { flex-wrap: nowrap; }
.basic-meta-grid label span { white-space: nowrap; }
.basic-meta-grid input { min-width: 0; flex: 1 1 auto; height: 30px; padding: 0 7px; border: 1px solid #d8dde7; border-radius: 8px; color: var(--ink); background: #fff; outline: none; }
.basic-meta-grid .name-title-controls > input { width: 90px; min-width: 72px; flex: 0 0 90px; }
.basic-meta-grid .address-field { grid-column: 1 / -1; }
.basic-meta-extra { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); align-items: start; column-gap: 6px; row-gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0dfe7; }
.meta-question-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.meta-question-controls { display: flex; align-items: center; flex: 1 1 220px; gap: 7px; min-width: 0; }
.meta-question-main { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.meta-question-label { flex: 0 0 auto; color: #513448; font-size: 12px; font-weight: 700; white-space: nowrap; }
.meta-question-main > .controls { flex: 0 1 auto; min-width: 0; }
.basic-meta-extra > .meta-question-row:last-child .meta-question-label { flex-basis: 100%; }
.basic-meta-extra .meta-question-main .chip { font-weight: 700; }
.meta-supplements { display: flex; flex: 1 1 120px; flex-wrap: wrap; gap: 7px; min-width: 90px; padding-left: 0; }
.meta-supplement { display: inline-flex; align-items: center; gap: 5px; color: #6b5a68; font-size: 11px; font-weight: 600; }
.meta-supplement > span:first-child { white-space: nowrap; }
.meta-supplement .controls { min-width: 0; }
.meta-supplement .controls { flex: 1 1 auto; }
.meta-supplement .text-input { width: 100%; min-width: 86px; }
.summary-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.summary-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.summary-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 9px; }
.summary-meta > div { display: flex; min-width: 0; align-items: baseline; gap: 5px; padding: 7px 8px; border-radius: 8px; color: #3b465b; background: #f7f8fb; font-size: 11.5px; }
.summary-meta .summary-meta-wide { grid-column: 1 / -1; align-items: flex-start; }
.summary-meta span { color: var(--muted); white-space: nowrap; }
.summary-meta .customer-meta-value { min-width: 0; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.summary-meta strong { font-weight: 400; overflow-wrap: anywhere; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; padding: 4px; border-radius: 12px; background: #e9ecf2; }
.tab { min-height: 38px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; font-weight: 800; }
.tab.is-active { color: var(--ink); background: #fff; box-shadow: 0 2px 8px rgba(28,40,66,.08); }
.view-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.96); box-shadow: 0 9px 25px rgba(27,39,65,.06); }
.designer-panel { border-top: 4px solid var(--ink); }
.customer-panel { border-top: 4px solid var(--brand); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 14px 12px; border-bottom: 1px solid var(--line); }
.panel-head span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .06em; }
.panel-head h2 { margin: 0; font-size: 19px; font-weight: 800; }
.summary-workspace .panel-head h2, .summary-workspace .module-number { font-weight: 700; }
.panel-head em { padding: 5px 8px; border-radius: 999px; color: var(--muted); background: var(--navy-soft); font-size: 10px; font-style: normal; font-weight: 750; white-space: nowrap; }
.customer-panel .panel-head em { color: var(--brand); background: var(--brand-soft); }
.view-content { padding: 10px; }
.designer-panel .view-content { display: block; }
.designer-panel .summary-meta { margin-bottom: 9px; }
.module-card { overflow: hidden; margin-bottom: 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.designer-panel .module-card { display: flex; width: 100%; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; gap: 0 10px; margin-bottom: 8px; padding: 0 9px 5px; }
.designer-panel .module-title { flex: 0 0 100%; }
.module-card:last-child { margin-bottom: 0; }
.module-title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 10px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 800; }
.module-title .module-space { color: var(--brand); font-weight: 700; }
.module-title .module-divider, .module-title .module-name { color: #000; font-weight: 700; }
.module-number { width: 24px; height: 24px; font-size: 10px; }
.designer-group { display: inline-flex; flex: 0 1 auto; align-items: center; gap: 5px; min-width: 0; max-width: 100%; padding: 6px 0 0; }
.group-name { flex: 0 0 auto; margin: 0; color: var(--brand); font-size: 11px; font-weight: 700; white-space: nowrap; }
.chip-list { display: inline-flex; min-width: 0; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.result-chip { display: inline-flex; align-items: baseline; gap: 2px; max-width: 100%; min-width: 0; min-height: 25px; padding: 4px 6px; border: 1px solid #e7eaf0; border-radius: 7px; color: var(--ink); background: #f7f8fb; font-size: 11.5px; line-height: 1.35; }
.result-chip.is-long { flex-basis: auto; }
.result-chip .label { min-width: 0; color: #000; font-weight: 700; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.result-chip .label::after { content: "："; }
.result-chip .label.short-label { flex-shrink: 0; white-space: nowrap; word-break: normal; overflow-wrap: normal; }
.result-chip strong { min-width: 0; font-weight: 400; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.designer-panel .result-chip .label { font-weight: 700; }
.designer-panel .summary-meta span { font-weight: 700; }
.designer-panel .result-chip strong, .designer-panel .summary-meta strong { font-weight: 400; }
.customer-module { border-color: #f0dce5; }
.customer-module .module-title { color: #513448; background: #fffafd; }
.bathroom-module { --brand: #2f80ed; --brand-soft: #eaf3ff; border-color: #cfe2f8; }
.bathroom-module .module-number, .bathroom-module .group-name { color: var(--brand); }
.bathroom-module .result-chip { border-color: #d7e7f8; background: #f5f9ff; }
.customer-module.bathroom-module { border-color: #cfe2f8; }
.customer-module.bathroom-module .module-title { color: #1d5f9f; background: #eef6ff; }
.customer-module.bathroom-module .customer-line { background: #eef6ff; }
.customer-module.bathroom-module .customer-line::before { background: #2f80ed; }
.other-module { --brand: #2f9e62; --brand-soft: #eaf8ef; border-color: #c4e8d1; }
.other-module .module-number, .other-module .group-name { color: var(--brand); }
.other-module .result-chip { border-color: #d3eadb; background: #f4fbf6; }
.customer-module.other-module { border-color: #c4e8d1; }
.customer-module.other-module .module-title { color: #187548; background: #eefaf2; }
.customer-module.other-module .customer-line { background: #eefaf2; }
.customer-module.other-module .customer-line::before { background: #2f9e62; }
.customer-copy { display: grid; gap: 6px; padding: 8px 10px 10px; }
.customer-line { position: relative; margin: 0; padding: 7px 8px 7px 19px; border-radius: 8px; color: #3b465b; background: var(--brand-soft); font-size: 11.8px; line-height: 1.55; }
.customer-line::before { content: ""; position: absolute; top: 13px; left: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); }
.customer-language, .customer-meta-value .customer-language { color: #182238; font-weight: 700; }
.customer-meta-value { min-width: 0; font-weight: 400; overflow-wrap: anywhere; }
.field-fragment { display: inline; }
.empty-summary { margin: 0; padding: 18px; color: var(--muted); text-align: center; font-size: 13px; }
.rule-note { display: flex; align-items: center; gap: 7px; margin: 13px 3px 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.rule-note > span { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--brand); }
.usage { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); background: rgba(255,255,255,.7); font-size: 11px; line-height: 1.6; }
.usage summary { color: #43506a; font-weight: 800; cursor: pointer; }
.usage ol { margin: 8px 0 0; padding-left: 19px; }
.toast { position: fixed; z-index: 20; right: 12px; bottom: 12px; max-width: min(320px,calc(100vw - 24px)); padding: 9px 12px; border-radius: 10px; color: #fff; background: rgba(24,34,56,.92); font-size: 12px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s ease; }
.toast.show { opacity: 1; transform: none; }
@media (max-width: 420px) {
  .page { padding: 15px 8px 28px; }
  .q-block { padding-inline: 10px; }
  .chip { padding-inline: 6px; }
  .people-row { grid-template-columns: 1fr; gap: 6px; }
  .person-row { gap: 5px; font-size: 12px; }
  .person-row .mini-input { width: 96px; max-width: 120px; flex: 0 1 96px; }
  .summary-toolbar { align-items: flex-start; }
  .summary-actions { gap: 5px; }
  .view-content { padding: 8px; }
  .designer-panel .module-card { gap: 0 7px; padding-inline: 7px; }
  .designer-group { flex-basis: auto; gap: 4px; padding-inline: 0; }
  .result-chip { font-size: 11px; }
  .customer-line { font-size: 11.5px; }
  .basic-meta-grid { grid-template-columns: 1fr; }
  .basic-meta-grid .address-field { grid-column: auto; }
  .basic-meta-extra { grid-template-columns: 1fr; }
  .meta-question-row { align-items: center; gap: 6px; }
  .meta-question-controls { gap: 5px; }
  .meta-question-main { align-items: center; flex: 0 1 auto; }
  .meta-question-main > .controls { flex-basis: auto; }
  .meta-question-main > .controls .chips { flex-wrap: nowrap; }
  .meta-supplements { display: flex; flex: 1 1 92px; min-width: 82px; padding-left: 0; }
  .meta-supplement { display: flex; flex: 1 1 92px; }
  .meta-supplement .text-input { width: 100%; }
  .summary-meta { grid-template-columns: 1fr; }
}
@media (max-width: 340px) {
  .page { padding-inline: 6px; }
  .panel-head h2 { font-size: 17px; }
  .panel-head em { padding-inline: 6px; }
  .designer-group { grid-template-columns: 48px minmax(0,1fr); }
  .module-title { font-size: 13px; }
  .basic-meta-extra { grid-template-columns: minmax(0,1fr); }
  .meta-question-row { width: 100%; min-width: 0; gap: 4px; }
  .meta-question-controls { gap: 4px; flex-basis: 0; }
  .meta-question-main > .controls .chips { gap: 3px; }
  .meta-question-main .chip { padding-inline: 4px; font-size: 11px; }
  .meta-supplements { min-width: 70px; flex-basis: 70px; gap: 4px; }
  .meta-supplement { min-width: 70px; flex-basis: 70px; }
  .meta-supplement .text-input { min-width: 70px; padding-inline: 5px; }
}
@media print {
  @page { size: A4; margin: 10mm; }
  body { background: #fff; }
  .page, body.summary-mode .page { width: 100%; max-width: none; padding: 0; }
  .hero, #formView, .no-print, .usage, .toast, .rule-note { display: none !important; }
  #summaryView { display: block !important; }
  .view-panel { box-shadow: none; break-inside: auto; }
  .module-card { break-inside: avoid; }
  .view-panel.is-hidden { display: none !important; }
}