.customer-form { align-items: end; }
.customer-form label, .setup-stack label, .quote-note { display: grid; gap: 7px; color: #718096; font-size: 12px; font-weight: 700; }
.customer-form label.wide { min-width: 300px; }
.customer-form input, .setup-stack select, .quote-note input, .add-product-bar select {
  border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; background: #fff; color: #172033; font: inherit;
}
.setup-stack { display: grid; gap: 14px; padding: 20px; }
.full { width: 100%; }
.notice { margin: 0 20px 16px; padding: 14px 16px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.notice p { margin: 4px 0 0; }
.notice.safe { background: #effaf5; color: #256b4a; border: 1px solid #c7eedc; }
.notice.warning { background: #fff7e8; color: #935f0c; border: 1px solid #f2d69b; }
.messages.compact { min-height: 130px; max-height: 210px; }
.add-product-bar { display: flex; gap: 10px; padding: 12px 20px 4px; }
.add-product-bar select { flex: 1; min-width: 0; }
.add-product-bar .add-row { width: auto; margin: 0; }
.quote-note { margin: 16px 20px; }
.invalid-row { background: #fff8ed; }
.invalid-row td:nth-child(3) b { color: #c87911; }
.empty-state { text-align: center; padding: 34px !important; color: #94a3b8; }
.preview-customer, .preview-summary, .preview-note { padding: 12px 0; color: #536174; font-size: 13px; }
.preview-summary { display: flex; justify-content: space-between; border-top: 1px solid #dde4ec; margin-top: 12px; }
button:disabled { opacity: .48; cursor: not-allowed; }
.quote-app { max-width: 1180px; margin: 0 auto; padding: 28px; }
.simple-header { margin-bottom: 20px; }
.lookup-panel { min-height: 0; padding: 18px 22px; display: grid; grid-template-columns: minmax(420px, 2fr) minmax(220px, 1fr); gap: 18px; }
.lookup-panel label, .quote-controls label { display: grid; gap: 7px; color: #718096; font-size: 12px; font-weight: 700; }
.lookup-panel input, .quote-controls select { border: 1px solid #e2e8f0; border-radius: 10px; padding: 11px 12px; background: #fff; font: inherit; }
.input-action { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.quote-panel.focused { min-height: 0; }
.quote-builder { display:grid; grid-template-columns:minmax(300px, .8fr) minmax(560px, 1.7fr); min-height:620px; }
.catalog-sidebar { padding:18px; border-right:1px solid #e4ddd3; background:#faf7f2; min-width:0; }
.catalog-head { display:flex; justify-content:space-between; align-items:end; gap:10px; margin-bottom:12px; }
.catalog-head h3 { margin:4px 0 0; font:600 19px Georgia,serif; }.catalog-head span{font-size:11px;color:#8c8173}
.catalog-search { width:100%; border:1px solid #ddd3c6; border-radius:9px; padding:10px 11px; background:white; font:inherit; }
.catalog-list { margin-top:12px; max-height:650px; overflow:auto; display:flex; flex-direction:column; gap:8px; padding-right:4px; }
.catalog-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:11px; border:1px solid #e2d8ca; border-radius:10px; background:white; }
.catalog-item>div:first-child { display:flex; flex-direction:column; min-width:0; }.catalog-item strong{font-size:12px;line-height:1.35}.catalog-item span{font-size:11px;color:#695f53;margin-top:4px}.catalog-item small{font-size:9px;color:#a0988d;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catalog-action { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:8px; }.catalog-action b{font-size:12px;color:#7b1720;white-space:nowrap}.catalog-action button{border:0;border-radius:7px;background:#7b1720;color:white;padding:6px 9px;font-size:11px}.catalog-empty{padding:28px 10px;text-align:center;color:#9a9288;font-size:12px}
.quote-main { min-width:0; padding-top:18px; }.quote-main .notice{margin-top:0}.quote-main .table-wrap{max-height:430px!important}
.quote-controls { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; padding: 18px 22px; align-items: end; }
.quote-panel.focused .table-wrap { max-height: 48vh; }

@media (max-width: 760px) {
  .quote-app { padding: 14px; }
  .lookup-panel, .quote-controls { grid-template-columns: 1fr; }
  .input-action { grid-template-columns: 1fr; }
  .quote-builder { grid-template-columns:1fr; }.catalog-sidebar{border-right:0;border-bottom:1px solid #e4ddd3}.catalog-list{max-height:320px}
}

@media (max-width: 1000px) {
  .customer-form { display: grid; grid-template-columns: 1fr 1fr; }
  .customer-form label.wide { min-width: 0; grid-column: 1 / -1; }
}

dialog { width: min(1120px, 96vw); max-width: none; }
.quote-preview {
  position: relative; width: 100%; aspect-ratio: 2 / 3; min-height: 0; margin: 0;
  padding: 3.5% 3.5% 2.5%; overflow: hidden; border: 0; color: #3d241d;
  font-family: "Times New Roman", Times, serif;
  background: #f2e7d5 url('/quote-background.png') center/cover no-repeat;
}
.heritage-mark { position:absolute; top:2.3%; left:3.8%; width:7%; color:#6f241f; text-align:center; font-size:1.35vw; line-height:1.2; letter-spacing:.08em; }
.seal { width:38%; aspect-ratio: .78; margin:10% auto 0; border:3px double #8b1a22; background:rgba(255,246,226,.7); }
.traditional-header { display:block; width:64%; margin:0 auto 2.5%; text-align:center; }
.traditional-header h1 { margin:0; color:#74121c; font:700 clamp(36px,7vw,82px)/1 "Times New Roman",serif; letter-spacing:.05em; }
.title-ornament { display:flex; align-items:center; justify-content:center; gap:1.2%; margin:.8% auto .3%; color:#7c2426; }
.title-ornament span { width:23%; border-top:2px solid #7c2426; }.title-ornament b{font-size:1.4vw}
.traditional-brand { color:#7b1720; font-size:clamp(18px,2.8vw,32px); font-weight:700; letter-spacing:.24em; }
.traditional-tagline { margin-top:.5%; color:#74242a; font-size:clamp(13px,2vw,22px); font-style:italic; }
.traditional-overview { display:grid; grid-template-columns:1.45fr 1fr; gap:1.5%; margin-bottom:1.5%; }
.quote-subject,.traditional-totals { border:2px solid #a17a3d; border-radius:14px; background:rgba(250,241,225,.97); overflow:hidden; }
.quote-subject { min-height:7vw; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#75151e; text-align:center; }
.quote-subject strong { font-size:clamp(22px,3.5vw,42px); }.quote-subject span{margin-top:.7%;font:700 clamp(11px,1.4vw,17px) Arial,sans-serif}
.traditional-totals { font-family:Arial,sans-serif; }.traditional-totals>div{display:grid;grid-template-columns:1.3fr .45fr .9fr;min-height:2.6vw;border-bottom:1px solid #cdbb9d;align-items:center;padding:0 3%;font-size:clamp(10px,1.4vw,17px)}
.traditional-totals>div:last-child{border:0}.traditional-totals b{text-align:right;font-size:clamp(12px,1.7vw,20px)}.traditional-totals em{font-style:normal;font-weight:700}.traditional-totals .final{color:#fff;background:#7e1821}.traditional-totals .final b{grid-column:2/4}
.traditional-table { border:1.5px solid #a17a3d; border-radius:10px; overflow:hidden; background:rgba(250,242,228,.98); }
.traditional-table table{width:100%;table-layout:fixed;border-collapse:collapse;font-family:Arial,sans-serif}.traditional-table th{height:4.2vw;padding:.4vw;color:#fff;background:#7d1721;border-right:1px solid rgba(255,255,255,.35);text-align:center;font-size:clamp(9px,1.25vw,17px)}
.traditional-table td{height:2.45vw;padding:.35vw .65vw;border-top:1px solid #cdbb9d;border-right:1px solid #cdbb9d;font-size:clamp(9px,1.15vw,16px);background:rgba(255,255,255,.2)}.traditional-table tbody tr:nth-child(even) td{background:rgba(231,211,185,.42)}.traditional-table .c{text-align:center}.traditional-table .num{text-align:right;font-variant-numeric:tabular-nums}
.traditional-notes { width:68%; margin:2% 0 0 26%; padding:1.2% 1.8%; border-radius:12px; background:rgba(247,236,218,.94); font:italic clamp(9px,1.15vw,15px)/1.35 Arial,sans-serif; }.traditional-notes strong{color:#7b1720;font-size:1.5em}.traditional-notes ul{margin:.6% 0 0;padding-left:4%}
.traditional-promise{position:absolute;right:7%;bottom:7%;width:30%;color:#7b1720;font-size:clamp(16px,2.5vw,28px);font-weight:700;font-style:italic;line-height:1.25;text-align:center;transform:rotate(-3deg)}.traditional-location{position:absolute;right:5%;bottom:2%;font-size:clamp(9px,1.2vw,15px);letter-spacing:.08em}
.primary-actions { grid-template-columns:1fr 1fr 1fr; }

/* Chế độ tối chỉ áp dụng cho giao diện làm việc; bản xem trước/PNG luôn giữ màu truyền thống. */
body { background:var(--page); transition:background .2s ease,color .2s ease; }
.theme-toggle { min-width:92px; }
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] dialog { background:var(--paper); color:var(--ink); border-color:var(--line); }
:root[data-theme="dark"] .ghost,
:root[data-theme="dark"] .secondary,
:root[data-theme="dark"] .lookup-panel input,
:root[data-theme="dark"] .quote-note input,
:root[data-theme="dark"] .catalog-search,
:root[data-theme="dark"] .catalog-item,
:root[data-theme="dark"] .cell-input,
:root[data-theme="dark"] .totals input { background:var(--field); color:var(--ink); border-color:var(--line); }
:root[data-theme="dark"] .catalog-sidebar { background:#211f1c; border-color:var(--line); }
:root[data-theme="dark"] .catalog-item span,
:root[data-theme="dark"] .catalog-head span,
:root[data-theme="dark"] .lookup-panel label,
:root[data-theme="dark"] .quote-note { color:var(--muted); }
:root[data-theme="dark"] th { color:#c9bfb4; }
:root[data-theme="dark"] td { border-color:#3d3731; }
:root[data-theme="dark"] .cell-input:focus { background:#403a33; border-color:#a88b68; }
:root[data-theme="dark"] .notice.warning { background:#3b2f1e; color:#f1c77d; border-color:#76592e; }
:root[data-theme="dark"] .status { background:#20382d; color:#8bd6ae; }
:root[data-theme="dark"] .version { background:#383127; color:#dcc59d; }
:root[data-theme="dark"] .modal-head { border-color:var(--line); }
:root[data-theme="dark"] .modal-head button { color:var(--ink); }