:root {
  --navy-950: #171b1f;
  --navy-900: #20262c;
  --navy-800: #2d353d;
  --navy-700: #44505a;
  --cyan-600: #9f7445;
  --cyan-500: #bc9160;
  --cyan-100: #f1e5d5;
  --slate-700: #4d555d;
  --slate-500: #737a80;
  --slate-300: #d3d0ca;
  --slate-200: #e5e1da;
  --slate-100: #f4f1ec;
  --paper: #fffdf9;
  --canvas: #d9dbde;
  --danger: #b33a3a;
  --shadow: 0 26px 70px rgba(25, 28, 31, .17);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--navy-950);
  background: var(--canvas);
  font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea { font: inherit; }
button { cursor: pointer; }

.app-shell {
  display: grid;
  grid-template-columns: minmax(760px, 1fr) 390px;
  min-height: 100vh;
}
.preview-area { min-width: 0; padding: 22px 28px 56px; overflow: auto; }
.preview-toolbar {
  width: min(210mm, 100%);
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.preview-toolbar > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.eyebrow, .editor-header span, .section-title span, .pricing-heading span, .value-statement span,
.document-footer span, .section-kicker {
  color: var(--cyan-600);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
}
.toolbar-actions { display: flex; align-items: center; gap: 9px; }
.save-status { color: var(--slate-500); font-size: 12px; margin-right: 4px; }
.save-status.saving { color: var(--cyan-600); }
.button {
  border: 0;
  border-radius: 10px;
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 700;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-1px); }
.button-primary { color: white; background: var(--navy-900); box-shadow: 0 8px 18px rgba(11, 34, 57, .18); }
.button-primary:hover { background: var(--navy-800); }
.button-secondary { color: var(--navy-800); background: white; border: 1px solid var(--slate-300); }

.quotation-document {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 14mm 15mm 16mm;
  background: var(--paper);
  box-shadow: var(--shadow);
}
.document-header { margin-bottom: 13mm; }
.brand-banner { display: block; width: 100%; height: auto; }
.header-rule {
  height: 3px;
  margin-top: 13px;
  background: linear-gradient(90deg, var(--navy-900) 0 24%, var(--cyan-500) 24% 36%, var(--slate-200) 36% 100%);
}
.hero-section {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 10mm;
}
.title-block h1 { margin: 6px 0 5px; font-size: 30px; line-height: 1.18; letter-spacing: -.035em; }
.title-block p { margin: 0; color: var(--slate-500); font: 12px/1.5 Arial, sans-serif; letter-spacing: .04em; }
.quote-code {
  min-width: 176px;
  padding: 13px 15px;
  border-left: 3px solid var(--cyan-500);
  background: var(--slate-100);
}
.quote-code span { display: block; margin-bottom: 6px; color: var(--slate-500); font-size: 10px; }
.quote-code strong { display: block; overflow-wrap: anywhere; font: 700 12px/1.4 Consolas, monospace; }
.document-section { margin-bottom: 10mm; }

.information-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; }
.information-card { border: 1px solid var(--slate-200); background: white; }
.client-card { border-top: 4px solid var(--navy-900); }
.quote-card { border-top: 4px solid var(--cyan-500); }
.card-heading { display: flex; align-items: baseline; gap: 9px; padding: 13px 15px 10px; border-bottom: 1px solid var(--slate-200); }
.card-heading span { color: var(--cyan-600); font: 800 9px Arial, sans-serif; letter-spacing: .16em; }
.card-heading h2 { margin: 0; font-size: 15px; }
.detail-list { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 5px 15px 12px; }
.detail-list div { min-width: 0; padding: 9px 8px 8px 0; }
.detail-list .wide { grid-column: 1 / -1; }
.detail-list dt { margin-bottom: 4px; color: var(--slate-500); font-size: 9px; }
.detail-list dd { min-height: 16px; margin: 0; overflow-wrap: anywhere; font-size: 11px; font-weight: 700; line-height: 1.45; }
.detail-list dd:empty::after, #previewClientAddress:empty::after { content: "—"; color: var(--slate-300); }
.detail-list.compact { grid-template-columns: 1fr 1fr; }

.intro-panel {
  position: relative;
  padding: 18px 22px 18px 52px;
  overflow: hidden;
  color: white;
  background: linear-gradient(135deg, var(--navy-950), var(--navy-800));
}
.intro-panel::after { content: ""; position: absolute; right: -30px; top: -55px; width: 145px; height: 145px; border: 26px solid rgba(19, 185, 199, .14); border-radius: 50%; }
.intro-mark { position: absolute; left: 19px; top: 3px; color: var(--cyan-500); font: 50px Georgia, serif; }
.intro-panel p { position: relative; z-index: 1; margin: 0; font-size: 11px; line-height: 1.9; text-align: justify; }

.section-title, .pricing-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.section-title h2, .pricing-heading h2 { margin: 4px 0 0; font-size: 21px; letter-spacing: -.02em; }
.section-title p, .pricing-heading p { margin: 0; color: var(--slate-500); font-size: 10px; }
.table-wrap { overflow: hidden; border: 1px solid var(--slate-200); }
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
th {
  padding: 10px 11px;
  color: white;
  background: var(--navy-900);
  font-size: 10px;
  text-align: left;
  letter-spacing: .04em;
}
td { padding: 10px 11px; border-bottom: 1px solid var(--slate-200); color: var(--slate-700); font-size: 10px; line-height: 1.6; vertical-align: top; overflow-wrap: anywhere; }
tbody tr:nth-child(even) td { background: #f7fafc; }
tbody tr:last-child td { border-bottom: 0; }
td:first-child { color: var(--navy-900); font-weight: 800; }
.number-column { width: 18%; }
.period-column { width: 12%; }
.deliverable-table th:nth-child(1) { width: 16%; }
.deliverable-table th:nth-child(2) { width: 35%; }
.deliverable-table th:nth-child(3) { width: 18%; }
.deliverable-table th:nth-child(4) { width: 14%; }
.deliverable-table th:nth-child(5) { width: 17%; }
.notice-box { display: grid; grid-template-columns: 76px 1fr; gap: 13px; margin-top: 10px; padding: 12px 14px; background: var(--slate-100); border-left: 3px solid var(--cyan-500); }
.notice-box strong { font-size: 10px; }
.notice-box ol { margin: 0; padding-left: 16px; color: var(--slate-700); font-size: 9px; line-height: 1.7; }
.notice-box li + li { margin-top: 3px; }
.legal-note { margin: 9px 0 0; padding: 0 2px; color: var(--slate-500); font-size: 9px; line-height: 1.7; }

.value-statement {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px 23px;
  border: 1px solid var(--cyan-100);
  background: linear-gradient(120deg, #f4fcfd, #edf5f8);
}
.value-icon { display: grid; place-items: center; width: 64px; height: 64px; color: white; background: var(--cyan-600); border-radius: 50%; font: 800 17px Arial, sans-serif; letter-spacing: .06em; box-shadow: 0 9px 20px rgba(0, 166, 182, .22); }
.value-statement h2 { margin: 4px 0 7px; font-size: 17px; }
.value-statement p { margin: 0; color: var(--slate-700); font-size: 10px; line-height: 1.75; }

.pricing-section { padding: 22px; border: 1px solid var(--slate-200); }
.tax-badge { align-self: flex-start; padding: 7px 11px; color: var(--cyan-600); background: var(--cyan-100); border-radius: 999px; font-size: 10px; font-weight: 800; }
.price-list { border-top: 2px solid var(--navy-900); }
.price-row { display: grid; grid-template-columns: 1fr 138px; gap: 18px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--slate-200); }
.price-row h3 { margin: 0 0 4px; font-size: 13px; }
.price-row p { margin: 0; color: var(--slate-500); font-size: 9px; line-height: 1.55; }
.price-amount { color: var(--navy-900); font-size: 17px; font-weight: 800; text-align: right; }
.total-panel { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 15px; padding: 17px 18px; color: white; background: var(--navy-900); }
.total-panel span { display: block; margin-bottom: 3px; color: var(--cyan-500); font: 800 9px Arial, sans-serif; letter-spacing: .18em; }
.total-panel strong { font-size: 14px; }
.total-amount { font-size: 27px; font-weight: 800; letter-spacing: -.03em; }
.price-notes { margin-bottom: 0; }

.terms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.term-card { position: relative; padding: 16px 17px 15px 47px; border: 1px solid var(--slate-200); break-inside: avoid; }
.term-card > span { position: absolute; left: 15px; top: 16px; color: var(--cyan-500); font: 800 12px Arial, sans-serif; }
.term-card h3 { margin: 0 0 8px; font-size: 13px; }
.term-card ul { margin: 0; padding-left: 15px; color: var(--slate-700); font-size: 9px; line-height: 1.7; }
.term-card li + li { margin-top: 4px; }
.document-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 12mm; padding-top: 8mm; border-top: 3px solid var(--navy-900); }
.document-footer h2 { margin: 6px 0 3px; font-size: 15px; }
.document-footer p { margin: 0; color: var(--slate-500); font-size: 9px; }
.footer-contact { text-align: right; }
.footer-contact span { display: block; margin-bottom: 5px; }
.footer-contact strong { display: block; margin-bottom: 4px; font-size: 14px; }

.editor-panel {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  width: 390px;
  height: 100vh;
  overflow: hidden;
  color: #dce8f1;
  background: var(--navy-950);
  box-shadow: -10px 0 30px rgba(7, 26, 43, .12);
}
.editor-header { height: 83px; display: flex; align-items: center; justify-content: space-between; padding: 18px 21px; border-bottom: 1px solid rgba(255,255,255,.1); }
.editor-header h2 { margin: 4px 0 0; color: white; font-size: 20px; }
.editor-toggle { display: none; padding: 7px 10px; color: white; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 8px; font-size: 12px; }
.editor-content { height: calc(100vh - 83px); padding: 17px 16px 32px; overflow-y: auto; scrollbar-color: var(--navy-700) transparent; }
.editor-intro { margin: 0 4px 15px; color: #91a5b7; font-size: 12px; line-height: 1.6; }
.editor-section { margin-bottom: 10px; overflow: hidden; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.09); border-radius: 12px; }
.editor-section summary { display: flex; align-items: center; gap: 10px; padding: 14px; color: white; font-size: 13px; font-weight: 800; cursor: pointer; list-style: none; }
.editor-section summary::-webkit-details-marker { display: none; }
.editor-section summary::after { content: "+"; margin-left: auto; color: var(--cyan-500); font-size: 18px; font-weight: 400; }
.editor-section[open] summary::after { content: "−"; }
.editor-section summary span { display: grid; place-items: center; width: 24px; height: 24px; color: var(--cyan-500); background: rgba(19,185,199,.12); border-radius: 7px; font: 800 9px Arial, sans-serif; }
.editor-section-body { padding: 0 12px 14px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.field.wide { grid-column: 1 / -1; }
.field > span { color: #9db0c0; font-size: 10px; font-weight: 700; }
.field input, .field textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  outline: none;
  padding: 9px 10px;
  color: white;
  background: rgba(255,255,255,.065);
  font-size: 12px;
  line-height: 1.45;
  resize: vertical;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.field input:focus, .field textarea:focus { border-color: var(--cyan-500); background: rgba(255,255,255,.09); box-shadow: 0 0 0 3px rgba(19,185,199,.1); }
.field input[type="date"] { color-scheme: dark; }
.collection-editor { display: grid; gap: 9px; }
.collection-card { padding: 11px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; }
.collection-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.collection-card-head strong { color: white; font-size: 11px; }
.item-actions { display: flex; gap: 4px; }
.icon-button { display: grid; place-items: center; min-width: 27px; height: 27px; padding: 0 7px; color: #b8c8d5; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 7px; font-size: 11px; }
.icon-button:hover { color: white; border-color: rgba(255,255,255,.25); }
.icon-button.delete:hover { color: #ffb5b5; border-color: rgba(255,120,120,.4); }
.collection-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.collection-fields .field.full { grid-column: 1 / -1; }
.add-button { width: 100%; margin-top: 10px; padding: 10px; color: var(--cyan-500); background: rgba(19,185,199,.07); border: 1px dashed rgba(19,185,199,.45); border-radius: 9px; font-size: 12px; font-weight: 700; }
.add-button:hover { background: rgba(19,185,199,.13); }
.mobile-actions { display: none; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 14px; }

@media (max-width: 1220px) {
  .app-shell { grid-template-columns: minmax(700px, 1fr) 360px; }
  .editor-panel { width: 360px; }
  .preview-area { padding-inline: 18px; }
  .quotation-document { transform-origin: top center; }
}

@media (max-width: 1050px) {
  .app-shell { display: block; }
  .preview-area { padding: 15px 10px 180px; }
  .preview-toolbar { width: min(210mm, 100%); }
  .quotation-document { width: min(210mm, 100%); }
  .editor-panel { position: fixed; z-index: 50; top: auto; right: 10px; bottom: 10px; left: 10px; width: auto; height: auto; max-height: min(72vh, 680px); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; box-shadow: 0 18px 55px rgba(7,26,43,.35); }
  .editor-header { height: 66px; padding: 12px 16px; }
  .editor-header h2 { font-size: 17px; }
  .editor-toggle { display: block; }
  .editor-content { height: auto; max-height: calc(min(72vh, 680px) - 66px); }
  .editor-panel.is-collapsed .editor-content { display: none; }
  .toolbar-actions .button { display: none; }
  .mobile-actions { display: grid; }
}

@media (max-width: 720px) {
  .preview-area { padding-inline: 0; }
  .preview-toolbar { padding: 0 12px; }
  .save-status { display: none; }
  .quotation-document { padding: 10mm 7mm 12mm; box-shadow: none; }
  .hero-section, .section-title, .pricing-heading, .document-footer { align-items: flex-start; flex-direction: column; }
  .quote-code { width: 100%; }
  .information-grid, .terms-grid { grid-template-columns: 1fr; }
  .table-wrap { overflow-x: auto; }
  table { min-width: 620px; }
  .deliverable-table table { min-width: 760px; }
  .value-statement { grid-template-columns: 52px 1fr; padding: 16px; }
  .value-icon { width: 48px; height: 48px; font-size: 13px; }
  .notice-box { grid-template-columns: 1fr; }
  .price-row { grid-template-columns: 1fr; gap: 7px; }
  .price-amount { text-align: left; }
  .total-amount { font-size: 22px; }
  .footer-contact { text-align: left; }
}

@page { size: A4; margin: 12mm; }
@media print {
  :root { --canvas: white; }
  html, body { width: 210mm; background: white; }
  body { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .no-print { display: none !important; }
  .app-shell, .preview-area { display: block; padding: 0; }
  .quotation-document { width: auto; min-height: 0; margin: 0; padding: 0; box-shadow: none; }
  .document-section, .information-card, .value-statement, .pricing-section, .term-card, .notice-box { break-inside: avoid; page-break-inside: avoid; }
  table { break-inside: auto; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; page-break-inside: avoid; }
  .terms-section { break-before: page; page-break-before: always; }
  .document-footer { break-inside: avoid; page-break-inside: avoid; }
}

body {
  font-size: 15px;
  background: radial-gradient(circle at 18% 5%, #f0f1f2 0, transparent 34%), linear-gradient(135deg, #d7d9dc, #e8e9e9 48%, #d3d5d7);
}
.quotation-document {
  background: linear-gradient(180deg, #fffefa 0%, #fffdf9 70%, #fbf8f2 100%);
  border: 1px solid rgba(116, 103, 86, .13);
}
.header-rule { height: 2px; background: linear-gradient(90deg, var(--navy-900) 0 23%, var(--cyan-500) 23% 38%, var(--slate-200) 38% 100%); }
.title-block h1 { font-size: 33px; font-weight: 750; letter-spacing: -.045em; }
.title-block p { font-size: 13px; }
.quote-code { background: #f2eee7; border-left-color: var(--cyan-500); }
.quote-code span { font-size: 11px; }
.quote-code strong { font-size: 13px; }
.information-card { border-color: #ded9d1; box-shadow: 0 8px 22px rgba(35, 36, 36, .035); }
.card-heading h2 { font-size: 16px; }
.detail-list dt { font-size: 10px; }
.detail-list dd { font-size: 12px; }
.intro-panel { background: linear-gradient(132deg, #1b2025 0%, #293138 72%, #38342f 100%); border-left: 4px solid var(--cyan-500); }
.intro-panel::after { border-color: rgba(188, 145, 96, .13); }
.intro-panel p { font-size: 12px; line-height: 1.95; }
.section-title h2, .pricing-heading h2 { font-size: 23px; }
.section-title p, .pricing-heading p { font-size: 11px; }
th { padding-block: 11px; font-size: 11px; font-weight: 700; background: #23292f; }
td { padding-block: 11px; font-size: 11.5px; line-height: 1.7; }
tbody tr:nth-child(even) td { background: #f8f6f1; }
.notice-box { background: #f2eee7; border-left-color: var(--cyan-500); }
.notice-box strong { font-size: 11px; }
.notice-box ol { font-size: 10.5px; line-height: 1.8; }
.calculated-cycle { color: #8d6338; font-weight: 800; white-space: nowrap; }
.legal-note { font-size: 10px; line-height: 1.8; }
.value-statement { border-color: #eadfce; background: linear-gradient(120deg, #fbf7f0, #f1ece4); }
.value-icon { background: linear-gradient(145deg, #c39b6d, #946a3c); box-shadow: 0 9px 22px rgba(159, 116, 69, .22); }
.value-statement h2 { font-size: 19px; }
.value-statement p { font-size: 11.5px; line-height: 1.85; }
.pricing-section { border-color: #ded9d1; background: rgba(255,255,255,.42); }
.tax-badge { color: #815a31; background: #f1e5d5; }
.price-row h3 { font-size: 14.5px; }
.price-row p { font-size: 10.5px; }
.price-amount { font-size: 19px; }
.total-panel { background: linear-gradient(120deg, #1d2328, #32383d); border-bottom: 3px solid var(--cyan-500); }
.total-amount { color: #f2d7b7; }
.term-card { border-color: #ded9d1; background: rgba(255,255,255,.46); }
.term-card h3 { font-size: 14px; }
.term-card ul { font-size: 10.5px; line-height: 1.8; }
.document-footer h2 { font-size: 17px; }
.document-footer p { font-size: 10px; }
.editor-panel { background: linear-gradient(180deg, #171b1f 0%, #20262b 60%, #171a1d 100%); }
.editor-section { background: rgba(255,255,255,.035); border-color: rgba(214, 187, 153, .12); }
.field > span { font-size: 11px; }
.field input, .field textarea { font-size: 13px; background: rgba(255,255,255,.052); border-color: rgba(255,255,255,.14); }
.field input[readonly] { color: #d9b88f; background: rgba(188,145,96,.08); cursor: default; }
.option-toggle { display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 10px; margin-bottom: 11px; padding: 12px; color: white; background: rgba(188,145,96,.08); border: 1px solid rgba(188,145,96,.22); border-radius: 10px; cursor: pointer; }
.option-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-track { position: relative; width: 38px; height: 21px; background: #4b5359; border-radius: 999px; transition: background .2s ease; }
.toggle-track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 15px; height: 15px; background: white; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.28); transition: transform .2s ease; }
.option-toggle input:checked + .toggle-track { background: var(--cyan-500); }
.option-toggle input:checked + .toggle-track::after { transform: translateX(17px); }
.toggle-copy { display: flex; flex-direction: column; gap: 3px; }
.toggle-copy strong { font-size: 12px; }
.toggle-copy small { color: #9da7ad; font-size: 10px; line-height: 1.45; }
.icon-button:disabled { opacity: .28; cursor: not-allowed; }
:root {
  --navy-950: #0b1730;
  --navy-900: #111d35;
  --navy-800: #1b2b49;
  --navy-700: #344968;
  --cyan-600: #1d6eea;
  --cyan-500: #2f7df6;
  --cyan-100: #e6f0ff;
  --slate-700: #344054;
  --slate-500: #7b879c;
  --slate-300: #c9d6e8;
  --slate-200: #dce7f5;
  --slate-100: #f0f5fc;
  --paper: #ffffff;
  --canvas: #d8e7fb;
  --shadow: 0 28px 74px rgba(30, 83, 158, .23);
}
body { background: radial-gradient(circle at 8% 2%, #f7fbff 0, transparent 26%), linear-gradient(145deg, #c8ddfb, #edf5ff 48%, #c6dcfb); }
.eyebrow, .editor-header span, .section-title span, .pricing-heading span, .value-statement span, .document-footer span, .section-kicker { color: var(--cyan-500); }
.button-primary { background: linear-gradient(135deg, #1b68de, #3889ff); box-shadow: 0 9px 22px rgba(47,125,246,.28); }
.button-primary:hover { background: linear-gradient(135deg, #185fc9, #287bf0); }
.quotation-document {
  background: linear-gradient(180deg, #2475ed 0, #4289f3 85mm, #dceaff 148mm, #edf5ff 100%);
  border: 0;
  border-radius: 3px;
  box-shadow: var(--shadow);
}
.document-header { margin-bottom: 9mm; }
.brand-banner { filter: brightness(0) invert(1); opacity: .97; }
.header-rule { height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.95) 0 38%, rgba(255,255,255,.3) 38% 100%); }
.hero-section { color: white; margin-bottom: 8mm; }
.section-kicker { color: rgba(255,255,255,.82); }
.title-block h1 { color: white; font-size: 36px; text-shadow: 0 3px 16px rgba(5,37,91,.18); }
.title-block p { color: rgba(255,255,255,.8); }
.quote-code { color: white; background: rgba(9,36,83,.3); border: 1px solid rgba(255,255,255,.25); border-left: 3px solid white; border-radius: 12px; backdrop-filter: blur(8px); }
.quote-code span { color: rgba(255,255,255,.7); }
.information-grid { gap: 12px; }
.information-card { overflow: hidden; background: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.7); border-radius: 15px; box-shadow: 0 15px 34px rgba(24,82,166,.14); }
.client-card, .quote-card { border-top: 0; }
.card-heading { border-bottom-color: #e5edf8; }
.card-heading span { color: var(--cyan-500); }
.intro-panel { color: var(--navy-900); background: rgba(255,255,255,.97); border: 0; border-radius: 15px; box-shadow: 0 15px 34px rgba(24,82,166,.14); }
.intro-panel::after { border-color: rgba(47,125,246,.09); }
.intro-mark { color: var(--cyan-500); }
.quotation-document > .document-section:not(.information-grid):not(.intro-panel):not(.value-statement):not(.pricing-section) { padding: 19px 20px; background: rgba(255,255,255,.98); border-radius: 15px; box-shadow: 0 15px 34px rgba(24,82,166,.12); }
.section-title span, .pricing-heading span, .value-statement span { color: var(--cyan-500); }
.section-title h2, .pricing-heading h2 { color: var(--navy-950); }
.table-wrap { border: 0; border-radius: 11px; }
th { background: #12213b; }
td { border-bottom-color: #dfe8f5; }
tbody tr:nth-child(even) td { background: #f1f5fd; }
.notice-box { background: #edf4ff; border-left-color: var(--cyan-500); border-radius: 0 10px 10px 0; }
.calculated-cycle { color: var(--cyan-600); }
.value-statement { padding: 20px 22px; background: rgba(255,255,255,.98); border: 0; border-radius: 15px; box-shadow: 0 15px 34px rgba(24,82,166,.12); }
.value-icon { background: linear-gradient(145deg, #1d6eea, #5b9cff); box-shadow: 0 9px 22px rgba(47,125,246,.26); }
.pricing-section { background: rgba(255,255,255,.98); border: 0; border-radius: 15px; box-shadow: 0 15px 34px rgba(24,82,166,.12); }
.tax-badge { color: #185fc9; background: #e5efff; }
.price-list { border-top-color: var(--cyan-500); }
.total-panel { background: linear-gradient(120deg, #101c33, #172b4d); border-bottom-color: #4c95ff; border-radius: 11px; }
.total-amount { color: white; }
.term-card { border-color: #dfe8f5; background: #f8fbff; border-radius: 11px; }
.term-card > span { color: var(--cyan-500); }
.document-footer { padding: 20px 22px; color: white; background: linear-gradient(120deg, #102449, #173766); border: 0; border-radius: 15px; }
.document-footer span { color: #79adff; }
.document-footer p { color: rgba(255,255,255,.72); }
.editor-panel { background: linear-gradient(180deg, #0b1730 0%, #102342 56%, #0a1830 100%); }
.editor-section { background: rgba(255,255,255,.045); border-color: rgba(112,166,255,.17); }
.editor-section summary span { color: #77adff; background: rgba(47,125,246,.16); }
.editor-section summary::after { color: #79adff; }
.field input:focus, .field textarea:focus { border-color: #4d94ff; box-shadow: 0 0 0 3px rgba(47,125,246,.14); }
.field input[readonly] { color: #9fc4ff; background: rgba(47,125,246,.09); }
.option-toggle { background: rgba(47,125,246,.09); border-color: rgba(94,153,247,.26); }
.option-toggle input:checked + .toggle-track { background: var(--cyan-500); }
.add-button { color: #8db9ff; background: rgba(47,125,246,.08); border-color: rgba(100,160,255,.48); }
.add-button:hover { background: rgba(47,125,246,.15); }
.smart-paste-section { background: linear-gradient(145deg, rgba(47,125,246,.13), rgba(90,151,255,.05)); border-color: rgba(111,169,255,.34); }
.smart-paste-input { min-height: 132px; }
.smart-paste-actions { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 10px; }
.paste-button, .paste-clear-button { border: 0; border-radius: 9px; padding: 10px 12px; font-size: 12px; font-weight: 800; }
.paste-button { color: white; background: linear-gradient(135deg, #236fe4, #438fff); box-shadow: 0 8px 20px rgba(47,125,246,.22); }
.paste-clear-button { color: #b8c9e2; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.parse-status { margin-top: 10px; padding: 9px 10px; color: #9eb0c9; background: rgba(4,17,39,.3); border-radius: 8px; font-size: 10px; line-height: 1.55; }
.parse-status.success { color: #bcd5ff; background: rgba(47,125,246,.14); }
.parse-status.warning { color: #ffd9a0; background: rgba(202,133,30,.12); }
@media print {
  .quotation-document { border-radius: 0; }
  .quotation-document > .document-section:not(.information-grid):not(.intro-panel):not(.value-statement):not(.pricing-section), .information-card, .intro-panel, .value-statement, .pricing-section { box-shadow: none; }
}
@media (min-width: 1051px) {
  .editor-panel {
    position: fixed !important;
    z-index: 100 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: 390px !important;
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .editor-header { flex: 0 0 83px; }
  .editor-content {
    flex: 1 1 auto;
    height: auto !important;
    min-height: 0;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
@media (min-width: 1051px) and (max-width: 1220px) {
  .editor-panel { width: 360px !important; }
}
.mobile-actions .mobile-reset { grid-column: 1 / -1; }

.pdf-capture-mode .quotation-document {
  padding-bottom: 8mm !important;
  color: #0b1730 !important;
  background: linear-gradient(180deg, #2475ed 0px, #4289f3 320px, #dceaff 560px, #edf5ff 100%) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.button:disabled {
  cursor: wait;
  opacity: .62;
  transform: none;
}
.brand-banner { filter: none !important; opacity: 1 !important; }
.pdf-capture-mode .document-section { margin-bottom: 5.5mm !important; }
.pdf-capture-mode .hero-section {
  align-items: flex-end !important;
  flex-direction: row !important;
  margin-bottom: 11mm !important;
}
.pdf-capture-mode .document-header { margin-bottom: 12mm !important; }
.pdf-capture-mode .title-block h1 { font-size: 40px !important; }
.pdf-capture-mode .quote-code { width: auto !important; }
.pdf-capture-mode .information-grid { grid-template-columns: 1.35fr 1fr !important; }
.pdf-capture-mode .detail-list dt { font-size: 11px !important; }
.pdf-capture-mode .detail-list dd { font-size: 13px !important; }
.pdf-capture-mode .intro-panel {
  min-height: 150px;
  display: flex;
  align-items: center;
}
.pdf-capture-mode .intro-panel p { font-size: 12px !important; line-height: 1.9 !important; }
.pdf-capture-mode .section-title h2,
.pdf-capture-mode .pricing-heading h2 { font-size: 26px !important; }
.pdf-capture-mode .section-title p,
.pdf-capture-mode .pricing-heading p { font-size: 11.5px !important; }
.pdf-capture-mode th { padding-block: 8px !important; font-size: 12px !important; }
.pdf-capture-mode td { padding-block: 8px !important; font-size: 12.5px !important; line-height: 1.6 !important; }
.pdf-capture-mode .notice-box ol { font-size: 11px !important; line-height: 1.75 !important; }
.pdf-capture-mode .legal-note { font-size: 10.5px !important; line-height: 1.75 !important; }
.pdf-capture-mode .terms-grid { grid-template-columns: 1fr 1fr !important; }
.pdf-capture-mode .document-footer {
  align-items: flex-end !important;
  flex-direction: row !important;
}
.pdf-capture-mode .footer-contact { text-align: right !important; }
.pdf-capture-mode .information-card,
.pdf-capture-mode .intro-panel,
.pdf-capture-mode .quotation-document > .document-section:not(.information-grid):not(.intro-panel):not(.value-statement):not(.pricing-section),
.pdf-capture-mode .value-statement,
.pdf-capture-mode .pricing-section {
  background: #ffffff !important;
  opacity: 1 !important;
}
.pdf-capture-mode .service-plan-section {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.pdf-capture-mode .service-plan-section .section-title {
  margin: 0 !important;
  padding: 19px 20px 12px;
  background: #ffffff !important;
  border-radius: 15px 15px 0 0;
}
.pdf-capture-mode .service-plan-section .table-wrap {
  padding: 0 20px 19px;
  background: #ffffff !important;
  border-radius: 0 0 15px 15px;
}
.pdf-capture-mode .service-plan-section .notice-box {
  margin-top: 10px;
  border-radius: 10px;
}
.pdf-capture-mode .pricing-section {
  min-height: 1090px !important;
  padding: 34px !important;
  display: flex !important;
  flex-direction: column !important;
}
.pdf-capture-mode .pricing-heading h2 { font-size: 34px !important; }
.pdf-capture-mode .pricing-heading p { font-size: 13px !important; }
.pdf-capture-mode .price-list { margin-top: 22px !important; }
.pdf-capture-mode .price-row { padding-block: 24px !important; }
.pdf-capture-mode .price-row h3 { font-size: 19px !important; }
.pdf-capture-mode .price-row p { font-size: 12.5px !important; }
.pdf-capture-mode .price-amount { font-size: 25px !important; }
.pdf-capture-mode .total-panel { margin-top: 22px !important; padding: 24px !important; }
.pdf-capture-mode .total-amount { font-size: 34px !important; }
.pdf-capture-mode .price-notes { margin-top: auto !important; padding: 20px !important; }
.pdf-capture-mode .terms-section {
  min-height: 900px !important;
  display: flex !important;
  flex-direction: column !important;
}
.pdf-capture-mode .terms-grid {
  flex: 1 !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 14px !important;
}
.pdf-capture-mode .term-card { padding: 20px 20px 18px 54px !important; background: #f8fbff !important; }
.pdf-capture-mode .term-card h3 { font-size: 16px !important; }
.pdf-capture-mode .term-card ul { font-size: 11.5px !important; line-height: 1.75 !important; }
.pdf-capture-mode .document-footer {
  margin-top: 5mm !important;
  padding: 18px 22px !important;
}
.pdf-capture-mode .document-footer h2 { font-size: 19px !important; }
.pdf-capture-mode .document-footer p { font-size: 11px !important; }
.pdf-capture-mode .footer-contact strong { font-size: 16px !important; }
.pdf-capture-mode .quote-code { background: #2c68c4 !important; }
.pdf-capture-mode tbody tr:nth-child(even) td { background: #f1f5fd !important; }
.pdf-capture-mode .notice-box { background: #edf4ff !important; }