:root {
  --ink: #17211f;
  --muted: #64716d;
  --line: #dfe5e2;
  --paper: #ffffff;
  --canvas: #f4f6f5;
  --nav: #10231e;
  --nav-text: #ccd7d3;
  --green: #16745c;
  --green-dark: #0e5946;
  --green-pale: #e3f0eb;
  --orange: #d98a35;
  --red: #c8524d;
  --shadow: 0 12px 30px rgba(24, 38, 33, .07);
}

* { box-sizing: border-box; }
html { background: var(--canvas); }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, "Microsoft YaHei", Arial, sans-serif; font-size: 14px; letter-spacing: 0; }
[hidden] { display: none !important; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(22, 116, 92, .25); outline-offset: 2px; }
i[data-lucide] { width: 18px; height: 18px; stroke-width: 1.9; }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: fixed; z-index: 5; width: 252px; height: 100vh; padding: 24px 14px 16px; display: flex; flex-direction: column; overflow-y: auto; color: var(--nav-text); background: var(--nav); }
.brand { display: flex; align-items: center; gap: 10px; padding: 3px 12px 26px; color: #fff; text-decoration: none; }
.brand-mark, .invoice-logo { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: var(--green); border-radius: 7px; }
.brand-mark i { width: 21px; height: 21px; }
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font-size: 16px; letter-spacing: 1.2px; }
.brand-copy small { margin-top: 5px; color: #8fa39d; font-size: 8px; letter-spacing: .65px; }
.main-nav { display: grid; gap: 4px; }
.nav-group { display: grid; gap: 2px; }
.nav-group-row { display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; }
.nav-group-row .nav-item { border-radius: 5px 0 0 5px; }
.nav-toggle { display: grid; place-items: center; width: 32px; height: 43px; padding: 0; color: #91a59e; border: 0; border-radius: 0 5px 5px 0; background: transparent; }
.nav-toggle:hover { color: #fff; background: rgba(255,255,255,.05); }
.nav-toggle i { width: 14px; transition: transform .18s ease; }
.nav-group.open .nav-toggle i { transform: rotate(180deg); }
.nav-submenu { display: grid; gap: 1px; padding: 2px 8px 6px 42px; }
.nav-submenu button { min-height: 28px; padding: 0 7px; overflow: hidden; color: #91a69f; border: 0; border-radius: 3px; background: transparent; font-size: 10px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.nav-submenu button:hover { color: #fff; background: rgba(255,255,255,.055); }
.product-image img, .quote-line img, .library-product img, .product-image-preview img, .report-product img { object-fit: contain !important; background: #fff; }
.quote-line img, .library-product img { padding: 2px; border: 1px solid #e1e7e4; }
.brand-mark img, .invoice-logo img, .company-logo-preview img { object-fit: contain !important; background: transparent; }
.product-bulk-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 10px 12px; color: #66746d; border: 1px solid #d9e3de; border-radius: 5px; background: #fff; font-size: 10px; }
.product-bulk-toolbar label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.product-bulk-toolbar input { width: 15px; height: 15px; }
.product-bulk-toolbar span { margin-right: auto; }
.product-bulk-toolbar .danger-button { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.product-bulk-toolbar button i { width: 14px; }
.selection-column { width: 38px; padding-right: 4px !important; text-align: center; }
.product-row-select { width: 15px; height: 15px; }
.library-row-actions { display: flex; align-items: center; gap: 5px; }
.library-more { display: inline-grid; place-items: center; width: 29px; height: 29px; border-radius: 4px; }
.library-more:hover { color: var(--green); background: #eff7f3; }
.delete-product-row:hover { color: var(--red); background: #fbefee; }
.modal-sticky-actions { position: sticky; z-index: 3; top: -18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -18px -1px 0; padding: 11px 1px; border-bottom: 1px solid #dbe5e0; background: rgba(255,255,255,.97); }
.modal-sticky-actions > span { color: #6c7973; font-size: 10px; }
.modal-sticky-actions > div { display: flex; gap: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.quote-heading-actions { display: flex; align-items: center; gap: 12px; }
.invoice-product-image-cell { width: 48px; padding: 6px !important; text-align: center !important; }
.invoice-product-thumb, .invoice-product-placeholder { display: inline-grid; place-items: center; width: 38px; height: 38px; object-fit: contain; border: 1px solid #dde5e1; border-radius: 3px; background: #fff; }
.invoice-product-placeholder { color: #8a9690; background: #f4f6f5; font-size: 7px; }
.invoice-table th:nth-child(1) { width: 32px; }
.invoice-table th:nth-child(2) { width: 50px; text-align: center; }
.invoice-table th:nth-child(4) { width: 92px; }
.invoice-table th:nth-child(5) { width: 48px; }
.invoice-table th:nth-child(6), .invoice-table th:nth-child(7) { width: 73px; text-align: right; }
.invoice-table td:nth-child(1), .invoice-table td:nth-child(5), .invoice-table td:nth-child(6), .invoice-table td:nth-child(7) { text-align: right; }
.invoice-table td:nth-child(3) { color: #263630; font-weight: 700; }
.seal.seal-image { overflow: visible; border: 0; transform: none; }
.seal.seal-image img { width: 76px; height: 76px; object-fit: contain; }
.document-file-actions { display: inline-flex; align-items: center; gap: 5px; }
.history-pdf-pending { margin: 0 auto 0 0; color: #8b9791; font-size: 9px; }
.pdf-export-target { width: 794px !important; min-height: 1123px !important; margin: 0 !important; transform: none !important; box-shadow: none !important; }
@media print { .toast, .modal-backdrop, .notification-popover { display: none !important; } }
.nav-item, .category-link { width: 100%; display: flex; align-items: center; border: 0; background: transparent; color: var(--nav-text); text-align: left; }
.nav-item { gap: 12px; min-height: 43px; padding: 0 12px; border-radius: 5px; }
.nav-item i { color: #a8bab4; }
.nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-item.active { color: #fff; background: var(--green); box-shadow: inset 3px 0 #81c6aa; }
.nav-item.active i { color: #d2f0e3; }
.sidebar-section { margin-top: 31px; }
.section-label { display: block; padding: 0 12px 9px; color: #77918a; font-size: 10px; font-weight: 700; letter-spacing: .85px; }
.category-link { justify-content: space-between; min-height: 31px; padding: 0 12px; color: #aebeb9; font-size: 12px; }
.category-link:hover, .category-link.active { color: #fff; }
.category-link.active { font-weight: 700; }
.category-link b { color: #7f9790; font-size: 11px; font-weight: 500; }
.sidebar-bottom { margin-top: auto; }
.help-card { display: flex; align-items: center; gap: 9px; margin: 0 5px 17px; padding: 10px; background: #17362d; border: 1px solid #2d5046; border-radius: 5px; }
.help-card i { width: 17px; color: #9fceba; }
.help-card div { display: grid; gap: 2px; }
.help-card strong { color: #dcebe5; font-size: 11px; }
.help-card span { color: #91aaa2; font-size: 10px; }
.profile { width: 100%; display: flex; align-items: center; gap: 9px; padding: 10px; color: #fff; background: transparent; border: 0; border-top: 1px solid #29433a; text-align: left; }
.profile .avatar { display: grid; place-items: center; width: 29px; height: 29px; color: #fff; background: #d5794f; border-radius: 50%; font-size: 10px; font-weight: 800; }
.profile > span:nth-child(2) { display: grid; gap: 2px; flex: 1; }
.profile strong { font-size: 11px; }.profile small { color: #94aaa3; font-size: 10px; }.profile > i { color: #80968f; width: 16px; }

.main-area { width: calc(100% - 252px); min-height: 100vh; margin-left: 252px; }
.topbar { height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); }
.crumb, .top-actions, .pi-actions { display: flex; align-items: center; gap: 10px; }.crumb { color: #84908c; font-size: 12px; }.crumb i { width: 15px; }.crumb strong { color: #35433f; font-weight: 650; }.top-actions { gap: 9px; }
.icon-button { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 5px; color: #52605b; background: transparent; }.icon-button:hover { background: #f0f4f2; border-color: var(--line); }.icon-button em { position: absolute; top: 8px; right: 8px; width: 5px; height: 5px; background: var(--red); border: 1px solid #fff; border-radius: 50%; }
.outline-button, .primary-button, .filter-button, .text-button { min-height: 35px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border-radius: 5px; font-size: 12px; font-weight: 700; }.outline-button { color: #41504b; border: 1px solid #cad5d0; background: #fff; }.outline-button:hover { background: #f6f8f7; }.primary-button { color: #fff; border: 1px solid var(--green); background: var(--green); box-shadow: 0 3px 8px rgba(22,116,92,.18); }.primary-button:hover { background: var(--green-dark); }.primary-button i, .outline-button i { width: 16px; }
.mobile-menu { display: none; }
.view { display: none; padding: 28px 32px 38px; }.view.active { display: block; }
.workspace-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }.workspace-heading h1 { margin: 4px 0 7px; font-size: 23px; font-weight: 730; line-height: 1.2; }.workspace-heading > div > p:last-child { margin: 0; color: var(--muted); font-size: 12px; }.workspace-heading.compact { align-items: center; }
.eyebrow { margin: 0; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: 1px; }.quote-status { display: flex; align-items: center; gap: 6px; padding-bottom: 3px; color: #6d7a75; font-size: 11px; }.quote-status span { width: 7px; height: 7px; background: #4dac7f; border-radius: 50%; }
.client-bar { min-height: 77px; display: flex; align-items: center; padding: 12px 17px; margin-bottom: 19px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 15px rgba(19,38,31,.03); }.client-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-right: 11px; color: var(--green); background: var(--green-pale); border-radius: 5px; }.client-icon i { width: 20px; }.client-details { display: grid; gap: 3px; }.client-details span, .quote-id span { color: #89948f; font-size: 10px; }.client-details strong { font-size: 13px; }.client-details small { color: #77847f; font-size: 10px; }.text-button { margin-left: 24px; min-height: 28px; padding: 0; color: var(--green); border: 0; background: transparent; }.text-button i { width: 14px; }.quote-id { display: grid; gap: 4px; margin-left: auto; padding-left: 24px; border-left: 1px solid var(--line); }.quote-id strong { font-size: 12px; }

.quote-layout { display: grid; grid-template-columns: minmax(560px, 1fr) minmax(340px, 388px); gap: 20px; align-items: start; }.catalog-panel, .quote-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 5px 18px rgba(23,38,32,.035); }.catalog-panel { padding: 17px; }.panel-toolbar { display: flex; gap: 9px; }.search-box { height: 37px; flex: 1; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #ced8d4; border-radius: 5px; }.search-box:focus-within { border-color: var(--green); }.search-box i { width: 16px; color: #7a8882; }.search-box input { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }.search-box input::placeholder { color: #a1aaa6; }.filter-button { position: relative; color: #4c5b55; border: 1px solid #ced8d4; background: #fff; }.filter-button:hover, .filter-button.is-open { color: var(--green); background: #f1f8f4; border-color: #a8cdbd; }.filter-button b { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; color: #fff; background: var(--green); border: 2px solid #fff; border-radius: 50%; font-size: 8px; }.filter-button i { width: 16px; }.filter-drawer { margin-top: 10px; padding: 12px; background: #f5f9f7; border: 1px solid #d6e5de; border-radius: 5px; }.filter-drawer[hidden] { display: none; }.filter-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }.filter-drawer-head strong { color: #4c5d56; font-size: 11px; }.reset-filter { padding: 0; color: var(--green); border: 0; background: transparent; font-size: 10px; font-weight: 750; }.reset-filter:hover { text-decoration: underline; }.filter-fields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }.filter-fields label { display: grid; gap: 4px; color: #738079; font-size: 9px; }.filter-fields select { width: 100%; height: 29px; padding: 0 5px; color: #3e4c46; background: #fff; border: 1px solid #cfdbd5; border-radius: 3px; font-size: 10px; }.catalog-summary { display: flex; justify-content: space-between; padding: 17px 1px 13px; color: #89948f; font-size: 11px; }.catalog-summary strong { color: #52605b; font-size: 12px; }.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.product-card { overflow: hidden; border: 1px solid #dce4e1; border-radius: 5px; transition: transform .18s ease, box-shadow .18s ease; }.product-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }.product-image { position: relative; height: 133px; overflow: hidden; background: #eff3f1; }.product-image img { width: 100%; height: 100%; object-fit: cover; display: block; }.product-image img[hidden] { display: none; }.product-image.image-pending { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #74837c; background: #edf2ef; }.product-image.image-pending::before { content: attr(data-placeholder); max-width: calc(100% - 56px); color: #52635b; font-size: 12px; font-weight: 750; text-align: center; }.product-image.image-pending::after { content: "待上传产品图片"; font-size: 10px; }.stock-tag { position: absolute; top: 8px; left: 8px; padding: 3px 6px; color: #246249; background: rgba(237,249,242,.93); border-radius: 3px; font-size: 9px; font-weight: 750; }.favorite { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 27px; height: 27px; color: #74817c; background: rgba(255,255,255,.9); border: 0; border-radius: 50%; }.favorite:hover { color: var(--red); }.favorite i { width: 15px; }.product-body { padding: 12px; }.product-code { color: #87948f; font-size: 10px; font-weight: 750; letter-spacing: .55px; }.product-card h3 { min-height: 31px; margin: 5px 0 2px; color: #26332f; font-size: 13px; line-height: 1.25; }.product-spec { min-height: 15px; margin: 0; color: #7c8984; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.option-row { display: grid; grid-template-columns: 1fr 1.25fr; gap: 7px; margin-top: 11px; }.option-row label { display: block; margin-bottom: 4px; color: #8a9792; font-size: 9px; }.option-row select { width: 100%; height: 27px; padding: 0 5px; color: #44514d; background: #fbfcfb; border: 1px solid #dbe3df; border-radius: 3px; font-size: 10px; }.product-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 12px; }.product-foot > div { display: grid; gap: 2px; }.product-foot span { color: #8b9792; font-size: 9px; }.product-foot strong { color: var(--green); font-size: 14px; }.add-product { flex-shrink: 0; min-height: 28px; display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; color: var(--green); background: #fff; border: 1px solid #a8cdbd; border-radius: 4px; font-size: 10px; font-weight: 750; }.add-product:hover { color: #fff; background: var(--green); border-color: var(--green); }.add-product i { width: 13px; }
.pending-product { border-color: #dfd5b9; }.stock-tag.pending { color: #765718; background: rgba(255,247,224,.95); }.pending-price, .pending-text { color: #9a6b19 !important; }.add-product:disabled, .matrix-order:disabled { cursor: not-allowed; color: #87918d; background: #f2f4f3; border-color: #d7ddda; opacity: .75; }.add-product:disabled:hover, .matrix-order:disabled:hover { color: #87918d; background: #f2f4f3; border-color: #d7ddda; }

.quote-panel { position: sticky; top: 14px; padding: 18px; }.quote-panel-head { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }.quote-panel-head h2 { display: flex; align-items: center; gap: 7px; margin: 4px 0 0; font-size: 15px; }.quote-panel-head h2 span { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; color: var(--green); background: var(--green-pale); border-radius: 10px; font-size: 10px; }.quote-panel-head .icon-button { width: 29px; height: 29px; }.quote-panel-head .icon-button:hover { color: var(--red); }.quote-items { display: grid; }.quote-line { display: grid; grid-template-columns: 49px 1fr auto; gap: 9px; align-items: center; padding: 13px 0; border-bottom: 1px solid #eef1ef; }.quote-line img { width: 49px; height: 49px; border-radius: 4px; object-fit: cover; }.quote-line-main { min-width: 0; }.quote-line-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #33413d; font-size: 11px; }.quote-line-main p { margin: 3px 0 7px; color: #7d8984; font-size: 10px; }.qty-control { display: flex; align-items: center; width: 88px; height: 24px; border: 1px solid #d3ddd9; border-radius: 3px; }.qty-control button { width: 24px; height: 100%; display: grid; place-items: center; color: #65746e; background: #fff; border: 0; font-size: 15px; }.qty-control button:hover { color: var(--green); background: #f1f7f3; }.qty-control input { width: 38px; height: 100%; padding: 0; color: #33413d; border: 0; border-right: 1px solid #d3ddd9; border-left: 1px solid #d3ddd9; outline: 0; text-align: center; font-size: 10px; }.quote-line-total { display: grid; justify-items: end; gap: 9px; }.quote-line-total strong { color: #293733; font-size: 11px; }.remove-line { display: grid; place-items: center; width: 16px; height: 16px; padding: 0; color: #9da7a3; background: transparent; border: 0; }.remove-line:hover { color: var(--red); }.remove-line i { width: 15px; }.add-line { width: 100%; min-height: 33px; display: flex; align-items: center; justify-content: center; gap: 5px; margin: 13px 0 17px; color: var(--green); border: 1px dashed #a8ccbe; border-radius: 4px; background: #fbfdfc; font-size: 11px; font-weight: 700; }.add-line:hover { background: var(--green-pale); }.add-line i { width: 14px; }.quote-calculations { padding: 14px 0 13px; border-top: 1px solid var(--line); }.field-label { display: flex; justify-content: space-between; margin-bottom: 6px; color: #68756f; font-size: 10px; }.field-label span { color: #9aa59f; }.shipping-field { display: flex; height: 32px; overflow: hidden; margin-bottom: 13px; border: 1px solid #d7e0dc; border-radius: 4px; }.shipping-field > i { width: 15px; margin: auto 7px; color: #85918c; }.shipping-field input { min-width: 0; flex: 1; color: #3c4b45; border: 0; outline: 0; font-size: 11px; }.shipping-field button { display: grid; place-items: center; width: 30px; color: #7f8b86; border: 0; border-left: 1px solid #e0e6e3; background: #fafcfb; }.shipping-field button i { width: 14px; }.calculation-row, .total-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; color: #6f7a75; font-size: 11px; }.calculation-row strong { color: #3e4b47; font-weight: 650; }.total-row { margin-top: 7px; padding-top: 12px; border-top: 1px dashed #cfd9d5; color: #384740; font-weight: 750; }.total-row span { display: grid; gap: 1px; }.total-row small { color: #82908a; font-size: 9px; font-weight: 500; }.total-row strong { color: var(--green); font-size: 20px; letter-spacing: .2px; }.checkout-button { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 11px; color: #fff; background: var(--green); border: 0; border-radius: 5px; font-size: 12px; font-weight: 750; box-shadow: 0 4px 9px rgba(22,116,92,.2); }.checkout-button:hover { background: var(--green-dark); }.checkout-button i { width: 16px; }.tax-note { display: flex; justify-content: center; align-items: center; gap: 4px; margin: 10px 0 0; color: #85908c; font-size: 9px; }.tax-note i { width: 13px; color: #63a987; }

.library-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 6px; }.library-table { width: 100%; min-width: 700px; border-collapse: collapse; text-align: left; }.library-table th { padding: 13px 18px; color: #78857f; background: #f8faf9; border-bottom: 1px solid var(--line); font-size: 10px; letter-spacing: .5px; }.library-table td { padding: 14px 18px; color: #52605a; border-bottom: 1px solid #edf1ef; font-size: 12px; }.library-product { display: flex; align-items: center; gap: 10px; color: #273530; font-weight: 700; }.library-product img, .library-product-placeholder { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 4px; }.library-product img { object-fit: cover; }.library-product-placeholder { display: grid; place-items: center; color: #7b8882; background: #edf2ef; font-size: 9px; font-weight: 650; }.sku-pill, .stock-pill { display: inline-flex; padding: 4px 7px; border-radius: 3px; font-size: 10px; }.sku-pill { color: #64726d; background: #f1f4f2; }.stock-pill { color: #25724e; background: #e9f5ed; }.library-more { color: #728078; border: 0; background: transparent; }.library-more i { width: 17px; }
.stock-pill.pending, .margin-pill.pending { color: #8a651e; background: #fff7df; border-color: #ead7a4; }

.pi-stage { padding: 26px; overflow-x: auto; background: #e6ebe8; border: 1px solid #d5ded9; border-radius: 6px; }.invoice-paper { position: relative; width: 800px; min-height: 990px; margin: 0 auto; padding: 53px 58px 42px; color: #27342f; background: #fff; box-shadow: 0 10px 28px rgba(20,40,32,.16); }.invoice-top { display: flex; justify-content: space-between; align-items: flex-start; }.invoice-brand { display: flex; align-items: center; gap: 11px; }.invoice-logo { width: 42px; height: 42px; border-radius: 5px; }.invoice-logo i { width: 24px; }.invoice-brand div:last-child { display: grid; gap: 5px; }.invoice-brand strong { color: #1a3028; font-size: 21px; letter-spacing: 1.7px; }.invoice-brand span { color: #72807a; font-size: 8px; letter-spacing: 1.05px; }.invoice-title { text-align: right; }.invoice-title p, .invoice-title h2 { margin: 0; color: #12664e; line-height: 1; letter-spacing: 1.6px; }.invoice-title p { font-size: 13px; font-weight: 800; }.invoice-title h2 { margin-top: 4px; font-size: 24px; }.invoice-title span { display: inline-block; margin-top: 7px; color: #53625c; font-size: 10px; }.invoice-rule { height: 3px; margin: 31px 0 21px; background: var(--green); }.invoice-meta { display: grid; grid-template-columns: 1.25fr 1.25fr 1fr; gap: 25px; margin-bottom: 26px; }.invoice-meta > div { display: grid; align-content: start; gap: 5px; }.invoice-meta span, .bank-box > span { color: #178064; font-size: 8px; font-weight: 800; letter-spacing: .9px; }.invoice-meta strong { color: #26352f; font-size: 11px; }.invoice-meta p, .bank-box p { margin: 0; color: #65736d; font-size: 9px; line-height: 1.65; }.invoice-table { width: 100%; border-collapse: collapse; }.invoice-table th { padding: 10px 8px; color: #fff; background: #173b30; font-size: 8px; font-weight: 700; text-align: left; letter-spacing: .35px; }.invoice-table td { padding: 12px 8px; border-bottom: 1px solid #dce6e1; color: #54645d; font-size: 9px; vertical-align: top; }.invoice-table td:nth-child(1), .invoice-table td:nth-child(4), .invoice-table td:nth-child(5), .invoice-table td:nth-child(6) { text-align: right; }.invoice-table td:nth-child(2) { color: #263630; font-weight: 700; }.invoice-table th:nth-child(1) { width: 38px; }.invoice-table th:nth-child(3) { width: 115px; }.invoice-table th:nth-child(4) { width: 54px; }.invoice-table th:nth-child(5), .invoice-table th:nth-child(6) { width: 80px; text-align: right; }.invoice-bottom { display: flex; justify-content: space-between; gap: 48px; margin-top: 25px; }.bank-box { display: grid; gap: 5px; flex: 1; padding-top: 9px; }.bank-box strong { font-size: 10px; }.invoice-totals { width: 223px; }.invoice-totals > div { display: flex; justify-content: space-between; padding: 6px 0; color: #5a6862; font-size: 9px; }.invoice-totals strong { color: #34443e; font-size: 10px; }.invoice-totals .invoice-grand { margin-top: 5px; padding: 11px 9px; color: #fff; background: var(--green); }.invoice-grand strong { color: #fff; font-size: 14px; }.invoice-footer { position: absolute; right: 58px; bottom: 39px; left: 58px; display: flex; align-items: flex-end; justify-content: flex-end; }.invoice-footer > p { margin: 0; color: #85918d; font-size: 8px; }.signature { width: 165px; display: grid; gap: 5px; color: #718078; font-size: 8px; text-align: center; }.signature-line { height: 25px; border-bottom: 1px solid #83928c; }.signature strong { color: #4d5b55; font-size: 8px; }.seal { position: absolute; right: 118px; bottom: 21px; display: grid; place-content: center; width: 58px; height: 58px; color: rgba(190,80,65,.66); border: 2px solid rgba(190,80,65,.66); border-radius: 50%; font-size: 9px; font-weight: 800; text-align: center; transform: rotate(-13deg); }.seal small { font-size: 5px; }

.customer-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 20px; }.customer-stats > div { display: grid; gap: 5px; min-height: 110px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }.customer-stats span { color: #74817b; font-size: 11px; }.customer-stats strong { color: #24332d; font-size: 25px; }.customer-stats small { color: #7f8d86; font-size: 10px; }.customer-stats small.up { color: #1f9564; }.customer-stats small.amber { color: #c17a27; }.customer-stats small i { width: 12px; height: 12px; vertical-align: -2px; }.pipeline { display: grid; grid-template-columns: repeat(4, minmax(190px, 1fr)); gap: 14px; overflow-x: auto; }.pipeline > section { min-height: 320px; padding: 11px; background: #edf1ef; border: 1px solid #dde5e1; border-radius: 6px; }.pipeline-head { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 11px; }.pipeline-head h2 { margin: 0; color: #4d5a55; font-size: 12px; }.pipeline-head h2 span { display: inline-grid; place-items: center; width: 18px; height: 18px; color: #7a8882; background: #dbe3df; border-radius: 50%; font-size: 9px; }.pipeline-head button { display: grid; place-items: center; width: 25px; height: 25px; color: #7c8984; background: transparent; border: 0; }.pipeline-head button:hover { color: var(--green); }.pipeline-head i { width: 15px; }.lead-card { position: relative; margin-bottom: 10px; padding: 14px 12px 11px; background: #fff; border: 1px solid #dce4e0; border-radius: 5px; box-shadow: 0 2px 4px rgba(25,43,34,.03); }.lead-card.featured { border-color: #9fcbb9; box-shadow: 0 3px 10px rgba(30,112,81,.08); }.lead-card strong { color: #2d3b35; font-size: 11px; }.lead-card p { margin: 5px 0 12px; color: #7c8983; font-size: 10px; }.lead-card > div { display: flex; justify-content: space-between; color: var(--green); font-size: 11px; font-weight: 750; }.lead-card small { color: #87938e; font-size: 9px; font-weight: 500; }.lead-dot { position: absolute; top: 15px; right: 12px; width: 7px; height: 7px; border-radius: 50%; }.blue { background: #5f91bd; }.purple { background: #9274a5; }.amber-dot { background: #d69b45; }.green { background: #5daf83; }

@media (max-width: 1180px) { .sidebar { width: 213px; }.main-area { width: calc(100% - 213px); margin-left: 213px; }.quote-layout { grid-template-columns: minmax(470px, 1fr) 348px; }.view { padding-right: 22px; padding-left: 22px; }.topbar { padding: 0 22px; }.product-grid { grid-template-columns: 1fr; }.filter-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 910px) { .sidebar { width: 64px; padding: 19px 7px; }.brand { padding: 2px 8px 22px; }.brand-copy, .nav-item span, .sidebar-section, .help-card, .profile > span:nth-child(2), .profile > i, .nav-toggle, .nav-submenu { display: none !important; }.nav-group-row { grid-template-columns: 1fr; }.nav-group-row .nav-item { border-radius: 5px; }.nav-item { justify-content: center; padding: 0; }.sidebar-bottom { display: flex; justify-content: center; }.profile { width: auto; padding: 0; border: 0; }.main-area { width: calc(100% - 64px); margin-left: 64px; }.quote-layout { grid-template-columns: 1fr; }.quote-panel { position: relative; top: 0; }.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.customer-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sidebar { display: none; }.sidebar.open { display: flex; width: 220px; box-shadow: 8px 0 20px rgba(0,0,0,.15); }.sidebar.open .brand-copy, .sidebar.open .nav-item span, .sidebar.open .sidebar-section, .sidebar.open .help-card, .sidebar.open .profile > span:nth-child(2), .sidebar.open .profile > i, .sidebar.open .nav-toggle, .sidebar.open .nav-submenu:not([hidden]) { display: initial !important; }.sidebar.open .nav-submenu:not([hidden]) { display: grid !important; }.sidebar.open .nav-group-row { grid-template-columns: minmax(0, 1fr) 32px; }.sidebar.open .nav-group-row .nav-item { border-radius: 5px 0 0 5px; }.sidebar.open .profile { width: 100%; padding: 10px; border-top: 1px solid #29433a; }.sidebar.open .sidebar-bottom { display: block; }.sidebar.open .nav-item { justify-content: flex-start; padding: 0 12px; }.main-area { width: 100%; margin-left: 0; }.topbar { height: 58px; padding: 0 14px; }.mobile-menu { display: inline-grid; }.crumb { display: none; }.top-actions { margin-left: auto; }.top-actions > .icon-button { display: none; }.top-actions .outline-button span { display: none; }.top-actions .outline-button { min-width: 35px; padding: 0 8px; }.top-actions .primary-button span { display: none; }.top-actions .primary-button { min-width: 35px; padding: 0 8px; }.view { padding: 20px 13px 28px; }.workspace-heading { align-items: flex-start; margin-bottom: 17px; }.workspace-heading h1 { font-size: 19px; }.workspace-heading > div > p:last-child { line-height: 1.5; }.workspace-heading.compact .primary-button { padding: 0 9px; }.workspace-heading.compact .primary-button { font-size: 0; }.workspace-heading.compact .primary-button i { margin: 0; }.quote-status { display: none; }.client-bar { min-height: auto; flex-wrap: wrap; padding: 11px; }.client-icon { width: 34px; height: 34px; }.client-details strong { font-size: 12px; }.text-button { margin-left: auto; font-size: 10px; }.quote-id { width: 100%; margin: 10px 0 0; padding: 9px 0 0; border-top: 1px solid var(--line); border-left: 0; }.quote-id { display: flex; justify-content: space-between; }.catalog-panel { padding: 12px; }.filter-button span { display: none; }.filter-button { width: 37px; padding: 0; }.filter-fields { grid-template-columns: 1fr 1fr; }.product-grid { grid-template-columns: 1fr; }.product-image { height: 155px; }.quote-panel { padding: 14px; }.customer-stats { grid-template-columns: 1fr 1fr; gap: 8px; }.customer-stats > div { min-height: 96px; padding: 13px; }.customer-stats strong { font-size: 21px; }.pi-actions .outline-button { padding: 0 8px; font-size: 0; }.pi-actions .outline-button i { margin: 0; }.pi-actions .primary-button { padding: 0 9px; }.pi-actions .primary-button { font-size: 0; }.pi-actions .primary-button i { margin: 0; }.pi-stage { margin: 0 -13px; padding: 13px; border-radius: 0; }.invoice-paper { transform: scale(.42); transform-origin: top left; margin: 0; margin-bottom: -574px; }.library-table-wrap { margin: 0 -13px; border-radius: 0; }.pipeline { margin: 0 -13px; padding: 0 13px 8px; }.pipeline > section { min-width: 225px; } }

@media print { @page { size: A4; margin: 0; } body { background: #fff; }.app-shell > .sidebar, .topbar, .workspace-heading, #quote-view, #products-view, #customers-view { display: none !important; }.main-area { width: auto; margin: 0; }.view { display: none !important; padding: 0; }.view#pi-view { display: block !important; }.pi-stage { padding: 0; overflow: visible; background: #fff; border: 0; }.invoice-paper { width: 210mm; min-height: 297mm; padding: 15mm; box-shadow: none; }.invoice-footer { right: 15mm; bottom: 12mm; left: 15mm; } }

/* Interactive controls added after the initial dashboard prototype. */
.help-card { width: calc(100% - 10px); color: inherit; text-align: left; }.help-card:hover { background: #1b4035; }
.lead-card { width: 100%; text-align: left; }.lead-card:hover { border-color: #a9cbbd; box-shadow: 0 4px 10px rgba(25,91,68,.08); }
.notification-popover { position: fixed; z-index: 10; top: 59px; right: 152px; width: 276px; overflow: hidden; background: #fff; border: 1px solid #d8e2dd; border-radius: 6px; box-shadow: 0 14px 30px rgba(25,46,36,.16); }.notification-popover[hidden] { display: none; }.notification-popover > div { display: flex; align-items: center; justify-content: space-between; padding: 13px 14px; border-bottom: 1px solid #e6ece9; }.notification-popover > div strong { font-size: 12px; }.notification-popover > div button { display: grid; place-items: center; width: 24px; height: 24px; color: #71807a; border: 0; background: transparent; }.notification-popover > div i { width: 15px; }.notification-popover > button { width: 100%; display: flex; align-items: center; gap: 9px; padding: 12px 14px; color: #304039; background: #fff; border: 0; border-bottom: 1px solid #edf1ef; text-align: left; }.notification-popover > button:hover { background: #f2f8f5; }.notification-popover > button > i { width: 18px; color: var(--green); }.notification-popover span { display: grid; gap: 3px; }.notification-popover span strong { font-size: 11px; }.notification-popover small { color: #798680; font-size: 10px; }
.modal-backdrop { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(11,27,21,.44); }.modal-backdrop[hidden] { display: none; }.modal-card { width: min(620px, 100%); max-height: min(760px, calc(100vh - 40px)); overflow: auto; padding: 22px; background: #fff; border-radius: 7px; box-shadow: 0 22px 55px rgba(6,18,13,.28); }.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }.modal-head h2 { margin: 0; font-size: 17px; }.modal-head p { margin: 5px 0 0; color: #74817b; font-size: 11px; }.modal-close { display: grid; place-items: center; width: 30px; height: 30px; color: #6d7a75; border: 0; border-radius: 4px; background: #f4f7f5; }.modal-close:hover { color: #203b30; background: #e7efeb; }.modal-close i { width: 17px; }.modal-form { display: grid; gap: 13px; padding-top: 18px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.modal-form label { display: grid; gap: 6px; color: #56635e; font-size: 11px; font-weight: 700; }.modal-form input, .modal-form select, .modal-form textarea { width: 100%; min-height: 36px; padding: 8px 9px; color: #2e3d36; border: 1px solid #d3ddd8; border-radius: 4px; background: #fff; font-size: 12px; }.modal-form textarea { min-height: 73px; resize: vertical; }.modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus { outline: 2px solid rgba(22,116,92,.18); border-color: var(--green); }.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 5px; padding-top: 16px; border-top: 1px solid var(--line); }.danger-button { min-height: 35px; margin-right: auto; padding: 0 11px; color: #b34945; border: 1px solid #e0aaa7; border-radius: 4px; background: #fff; font-size: 11px; font-weight: 750; }.danger-button:hover { color: #fff; background: #bd514c; border-color: #bd514c; }.info-copy { padding-top: 17px; color: #55635d; font-size: 12px; line-height: 1.7; }.info-copy strong { color: #264037; }.customer-choice { display: grid; gap: 9px; padding-top: 17px; }.customer-choice button { display: grid; gap: 4px; width: 100%; padding: 12px; color: #324139; background: #fff; border: 1px solid #d5dfda; border-radius: 5px; text-align: left; }.customer-choice button:hover, .customer-choice button.selected { border-color: #77b59a; background: #eef8f2; }.customer-choice strong { font-size: 12px; }.customer-choice span { color: #75827c; font-size: 10px; }.toast { position: fixed; z-index: 30; right: 24px; bottom: 24px; max-width: 320px; padding: 11px 14px; color: #fff; background: #183e31; border: 1px solid #2d6652; border-radius: 5px; box-shadow: 0 8px 20px rgba(16,35,28,.22); font-size: 12px; }.toast[hidden] { display: none; }
.required-field > .field-label::after, .required-field > .image-manager-head .field-label::after, .required-heading::after { content: " *"; color: #b23f3a; font-weight: 850; }
.modal-form [aria-invalid="true"], .import-review-card [aria-invalid="true"] { border-color: #c84d47 !important; background: #fff7f6 !important; box-shadow: 0 0 0 2px rgba(184, 58, 52, .1); }
.field-invalid > .field-label, .field-invalid > .image-manager-head .field-label { color: #a63d38; }
.field-invalid.product-image-manager, .field-invalid.upload-variant-editor { border-color: #c84d47; background: #fff8f7; }
.form-error-summary, .import-card-errors { color: #8f342f; border: 1px solid #e0a6a2; border-radius: 4px; background: #fff3f2; }
.form-error-summary { padding: 10px 12px; }
.form-error-summary strong { font-size: 11px; }
.form-error-summary ul { margin: 6px 0 0; padding-left: 18px; font-size: 10px; line-height: 1.55; }
@media (max-width: 620px) { .notification-popover { top: 54px; right: 12px; width: min(276px, calc(100vw - 24px)); }.modal-backdrop { padding: 10px; }.modal-card { padding: 17px; }.form-grid { grid-template-columns: 1fr; }.toast { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); } }

.matrix-order { width: 100%; min-height: 28px; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 10px; color: #3b695a; background: #f2f8f5; border: 1px solid #b8d7c9; border-radius: 4px; font-size: 10px; font-weight: 750; }.matrix-order:hover { color: #fff; background: var(--green); border-color: var(--green); }.matrix-order i { width: 14px; }.variant-intro { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 0 12px; color: #68766f; font-size: 11px; }.variant-intro strong { color: #27684f; }.variant-table-wrap { overflow: auto; border: 1px solid #d6e0db; border-radius: 5px; }.variant-table { width: 100%; min-width: 510px; border-collapse: collapse; }.variant-table th { padding: 8px; color: #506058; background: #f0f5f2; border-right: 1px solid #dce5e0; border-bottom: 1px solid #dce5e0; font-size: 10px; text-align: center; }.variant-table th:first-child { min-width: 70px; text-align: left; }.variant-table td { min-width: 118px; padding: 7px; border-right: 1px solid #e2e9e5; border-bottom: 1px solid #e2e9e5; vertical-align: top; }.variant-table tbody tr:last-child td { border-bottom: 0; }.variant-table td:last-child, .variant-table th:last-child { border-right: 0; }.variant-power { color: #34433c; background: #fbfcfb; font-size: 11px; font-weight: 750; }.variant-cell { display: grid; gap: 5px; }.variant-cell-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }.variant-sku { color: #7b8982; font-size: 8px; white-space: nowrap; }.variant-price { color: var(--green); font-size: 10px; font-weight: 750; }.variant-cell input { width: 100%; height: 29px; padding: 0 7px; color: #304039; border: 1px solid #cfdad4; border-radius: 3px; background: #fff; font-size: 11px; }.variant-cell input:focus { outline: 2px solid rgba(22,116,92,.16); border-color: var(--green); }.matrix-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 13px; padding: 11px 12px; background: #eef8f3; border: 1px solid #cde3d7; border-radius: 4px; }.matrix-summary span { color: #68766f; font-size: 10px; }.matrix-summary strong { color: #1e6e53; font-size: 14px; }.matrix-summary div { display: grid; gap: 3px; }.matrix-summary div:last-child { text-align: right; }.empty-products, .empty-quote, .empty-stage { margin: 0; padding: 17px 6px; color: #819089; font-size: 11px; text-align: center; }.empty-stage { padding: 16px 4px; }.variant-line { display: block; margin-top: 2px; color: #82908a; font-size: 9px; }
.variant-table td.variant-unavailable { vertical-align: middle; color: #98a29d; background: #f5f7f6; text-align: center; }.variant-unavailable span { font-size: 9px; }

.upload-variant-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0 9px; border-top: 1px solid var(--line); }.upload-variant-head > div:first-child { display: grid; gap: 3px; }.upload-variant-head strong { color: #35473f; font-size: 12px; }.upload-variant-head span { color: #7b8882; font-size: 10px; }.upload-variant-head > div:last-child { display: flex; gap: 7px; }.upload-variant-head .outline-button, .upload-variant-head .primary-button { min-height: 31px; font-size: 10px; }.upload-variant-head .primary-button i { width: 13px; }.upload-variant-editor { min-height: 58px; }.upload-empty { margin: 0; padding: 15px; color: #7a8781; background: #f6f8f7; border: 1px dashed #cad8d1; border-radius: 4px; font-size: 10px; text-align: center; }.upload-variant-summary { display: flex; justify-content: space-between; padding: 9px 10px; color: #6d7b74; background: #edf7f2; border: 1px solid #d2e4da; border-bottom: 0; border-radius: 4px 4px 0 0; font-size: 10px; }.upload-variant-summary strong { color: var(--green); }.upload-variant-table-wrap { max-height: 270px; overflow: auto; border: 1px solid #d2e0d8; border-radius: 0 0 4px 4px; }.upload-variant-table { width: 100%; min-width: 560px; border-collapse: collapse; }.upload-variant-table th { position: sticky; top: 0; z-index: 1; padding: 8px 9px; color: #68766f; background: #f7faf8; border-bottom: 1px solid #d8e3dd; font-size: 9px; text-align: left; }.upload-variant-table td { padding: 7px 9px; color: #52615b; border-bottom: 1px solid #e7eeea; font-size: 10px; }.upload-variant-table tr:last-child td { border-bottom: 0; }.upload-variant-table code { color: #4d6b60; font-size: 9px; }.upload-variant-table input { width: 84px; height: 29px; padding: 0 6px; color: #33423c; border: 1px solid #cfdad4; border-radius: 3px; font-size: 10px; }.upload-variant-table input:focus { outline: 2px solid rgba(22,116,92,.16); border-color: var(--green); }.template-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.template-card { min-height: 190px; display: flex; flex-direction: column; padding: 17px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 12px rgba(25,44,35,.035); }.template-card:hover { border-color: #a8cbbd; box-shadow: 0 8px 18px rgba(25,92,68,.08); }.template-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }.template-card h2 { margin: 0; color: #2d3d35; font-size: 14px; }.template-card p { margin: 5px 0 0; color: #74817b; font-size: 10px; }.template-badge { display: inline-flex; padding: 4px 6px; color: #246c51; background: #e8f4ed; border-radius: 3px; font-size: 9px; font-weight: 750; }.template-specs { display: grid; gap: 8px; margin: 17px 0; }.template-specs div { display: flex; justify-content: space-between; gap: 8px; color: #7a8781; font-size: 10px; }.template-specs strong { color: #44534c; font-weight: 650; text-align: right; }.template-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid #edf1ef; }.template-footer span { color: var(--green); font-size: 12px; font-weight: 750; }.template-footer button { display: inline-grid; place-items: center; width: 29px; height: 29px; color: #62716a; border: 1px solid #d3ded8; border-radius: 4px; background: #fff; }.template-footer button:hover { color: var(--green); background: #f0f8f4; border-color: #a8cdbd; }.template-footer i { width: 15px; }
.template-apply { align-items: center; }.template-apply select { max-width: 180px; height: 31px; padding: 0 7px; color: #46554e; border: 1px solid #cbd8d1; border-radius: 4px; background: #fff; font-size: 10px; }
.product-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }.ai-entry-button { min-height: 35px; padding: 0 11px; font-size: 11px; }.ai-entry-button i { width: 15px; }.product-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }.product-metrics > div { display: grid; gap: 4px; min-height: 82px; padding: 13px 15px; border: 1px solid #dce5e0; border-radius: 6px; background: #fff; }.product-metrics span { color: #74817b; font-size: 10px; }.product-metrics strong { color: #245b46; font-size: 20px; }.product-metrics small { color: #839089; font-size: 9px; }.margin-pill { display: inline-flex; padding: 3px 6px; color: #23684e; border: 1px solid #b9d9c9; border-radius: 3px; background: #eff8f3; font-size: 10px; font-weight: 750; }.report-button { display: inline-flex; align-items: center; gap: 4px; min-height: 27px; padding: 0 7px; color: #336a55; border: 1px solid #c7ddd2; border-radius: 4px; background: #f4faf7; font-size: 10px; font-weight: 700; white-space: nowrap; }.report-button:hover { color: #fff; border-color: var(--green); background: var(--green); }.report-button i { width: 13px; }.internal-profit-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin-top: 10px; padding: 10px 11px; border: 1px solid #c9dfd4; border-radius: 4px; background: #f0f8f4; }.internal-profit-row span { color: #567267; font-size: 10px; }.internal-profit-row span small { color: #8a9891; }.internal-profit-row strong { color: #1d6f50; font-size: 13px; }.internal-profit-row em { grid-column: 2; color: #427562; font-size: 10px; font-style: normal; text-align: right; }.template-cost { color: #6f7d76 !important; font-size: 9px !important; font-weight: 600 !important; }.testing-data-section { display: grid; gap: 12px; padding: 14px; border: 1px solid #d9e4de; border-radius: 5px; background: #f9fbfa; }.testing-data-head { display: flex; align-items: center; justify-content: space-between; }.testing-data-head > div { display: grid; gap: 3px; }.testing-data-head strong { color: #33463d; font-size: 12px; }.testing-data-head span { color: #77857e; font-size: 10px; }.testing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.testing-grid fieldset { min-width: 0; margin: 0; padding: 11px; border: 1px solid #d6e1db; border-radius: 4px; background: #fff; }.testing-grid legend { padding: 0 5px; color: #366550; font-size: 11px; font-weight: 750; }.testing-grid .form-grid { gap: 8px; }.testing-grid textarea { min-height: 54px !important; }.report-stage { display: flex; justify-content: center; padding: 22px; background: #e8efeb; border: 1px solid #d5e0da; border-radius: 6px; }.report-paper { width: min(210mm, 100%); min-height: 297mm; padding: 16mm; color: #314138; background: #fff; box-shadow: 0 9px 24px rgba(23,42,33, .12); }.report-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }.report-top > div:first-child { display: grid; gap: 5px; }.report-top > div:first-child > span, .report-brand span { color: #4d8b70; font-size: 9px; font-weight: 800; letter-spacing: 1px; }.report-top h2 { margin: 0; color: #20352b; font-size: 24px; }.report-top p { margin: 0; color: #718078; font-size: 10px; }.report-brand { display: grid; gap: 3px; text-align: right; }.report-brand strong { color: #205a45; font-size: 18px; letter-spacing: 1px; }.report-rule { height: 3px; margin: 16px 0 21px; background: #317e60; }.report-product { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: start; padding-bottom: 22px; border-bottom: 1px solid #dbe5df; }.report-product img { width: 150px; height: 112px; object-fit: cover; border-radius: 4px; }.report-product h3, .report-section-title h3 { margin: 0; color: #274238; font-size: 14px; }.report-product dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 12px 0 0; }.report-product dl div { display: grid; gap: 3px; }.report-product dt { color: #84918b; font-size: 9px; }.report-product dd { margin: 0; color: #41534a; font-size: 10px; }.report-test-section { padding: 22px 0; border-bottom: 1px solid #dbe5df; }.report-section-title { display: flex; align-items: center; gap: 10px; }.report-section-title > span { display: grid; place-items: center; width: 25px; height: 25px; color: #fff; border-radius: 4px; background: #317e60; font-size: 10px; font-weight: 800; }.report-section-title > div { display: grid; gap: 3px; }.report-section-title p { margin: 0; color: #84918b; font-size: 9px; }.report-metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 15px; }.report-metric-grid > div { display: grid; gap: 4px; padding: 10px; border: 1px solid #dce6e1; border-radius: 4px; background: #f8faf9; }.report-metric-grid span { color: #7b8982; font-size: 9px; }.report-metric-grid strong { color: #2a4136; font-size: 12px; }.report-note { min-height: 16px; margin: 12px 0 0; color: #6d7c74; font-size: 10px; line-height: 1.6; }.report-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; color: #86938d; font-size: 8px; }.ai-config-status { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid #d2e4da; border-radius: 5px; background: #f1f8f4; }.ai-config-status > i { width: 20px; color: #277155; }.ai-config-status > div { display: grid; gap: 4px; }.ai-config-status strong { color: #315a49; font-size: 12px; }.ai-config-status span { color: #728078; font-size: 10px; line-height: 1.5; }.switch-field { display: flex !important; align-items: center; gap: 8px; }.switch-field input { width: 15px !important; min-height: 15px !important; padding: 0 !important; }
.product-image-manager { display: grid; gap: 11px; padding: 13px; border: 1px solid #d7e2dc; border-radius: 5px; background: #f8fbf9; }.image-manager-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.image-manager-head > div { display: grid; gap: 3px; }.image-manager-head strong { color: #35473f; font-size: 12px; }.image-manager-head span, .image-upload-fields small { color: #77857e; font-size: 10px; line-height: 1.45; }.image-manager-head .outline-button { min-height: 30px; padding: 0 9px; font-size: 10px; }.image-upload-body { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; align-items: center; }.product-image-preview { display: grid; place-items: center; width: 108px; height: 82px; overflow: hidden; color: #8a9690; border: 1px solid #d4ded8; border-radius: 4px; background: #eef3f0; font-size: 10px; }.product-image-preview img { width: 100%; height: 100%; object-fit: contain; }.image-upload-fields { display: grid; gap: 8px; }.image-upload-fields label { gap: 4px !important; }.image-upload-fields input[type="file"] { min-height: 32px; padding: 5px 7px; background: #fff; font-size: 10px; }
@media (max-width: 1000px) { .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }.template-grid { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); } @media (max-width: 620px) { .upload-variant-head { align-items: flex-start; flex-direction: column; }.upload-variant-head > div:last-child { width: 100%; }.upload-variant-head > div:last-child button { flex: 1; }.template-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .product-heading-actions { width: 100%; justify-content: flex-end; }.product-metrics { grid-template-columns: 1fr; }.testing-grid { grid-template-columns: 1fr; }.report-stage { margin: 0 -13px; padding: 12px; border-radius: 0; }.report-paper { min-width: 640px; transform: scale(.52); transform-origin: top left; margin-bottom: -370px; }.report-metric-grid { grid-template-columns: repeat(2, 1fr); } }
@media print { body[data-print-mode="report"] .view#pi-view { display: none !important; } body[data-print-mode="report"] .view#report-view { display: block !important; } body[data-print-mode="report"] .report-stage { padding: 0; overflow: visible; border: 0; background: #fff; } body[data-print-mode="report"] .report-paper { width: 210mm; min-height: 297mm; padding: 16mm; box-shadow: none; } }

.brand-mark, .invoice-logo { overflow: hidden; }.brand-mark img, .invoice-logo img { width: 100%; height: 100%; object-fit: cover; }.company-settings-form { display: grid; gap: 16px; max-width: 1040px; }.company-settings-section { display: grid; gap: 15px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }.company-settings-title { display: grid; gap: 4px; padding-bottom: 13px; border-bottom: 1px solid #e8efeb; }.company-settings-title h2 { margin: 0; color: #2f4139; font-size: 14px; }.company-settings-title p { margin: 0; color: #77847d; font-size: 10px; }.company-logo-manager { display: grid; grid-template-columns: 94px minmax(0, 1fr); gap: 14px; align-items: center; padding-bottom: 15px; border-bottom: 1px solid #edf2ef; }.company-logo-preview { display: grid; place-items: center; width: 94px; height: 94px; overflow: hidden; color: #fff; background: var(--green); border: 1px solid #c9d8d1; border-radius: 6px; }.company-logo-preview i { width: 38px; height: 38px; }.company-logo-preview img { width: 100%; height: 100%; object-fit: cover; }.company-settings-form > section > label { display: grid; gap: 6px; color: #56635e; font-size: 11px; font-weight: 700; }.company-settings-form input, .company-settings-form textarea { width: 100%; min-height: 36px; padding: 8px 9px; color: #2e3d36; border: 1px solid #d3ddd8; border-radius: 4px; background: #fff; font-size: 12px; }.company-settings-form textarea { min-height: 58px; resize: vertical; }.company-settings-form input:focus, .company-settings-form textarea:focus { outline: 2px solid rgba(22,116,92,.18); border-color: var(--green); }.company-settings-form input[type="file"] { padding: 5px 7px; font-size: 10px; }.company-settings-form .image-upload-fields { align-content: center; } @media (max-width: 620px) { .company-settings-section { padding: 15px; }.company-logo-manager { grid-template-columns: 1fr; }.company-logo-preview { width: 76px; height: 76px; } }

.auth-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(260px, 38%) minmax(360px, 1fr); background: #f5f8f6; }
.auth-brand-panel { display: flex; align-items: flex-start; gap: 13px; padding: 34px; color: #fff; background: #173f32; }
.auth-brand-panel > div { display: grid; gap: 3px; }
.auth-brand-panel strong { font-size: 17px; }
.auth-brand-panel span { color: #bed1c8; font-size: 10px; }
.auth-brand-mark { display: grid; place-items: center; width: 38px; height: 38px; color: #173f32 !important; border-radius: 6px; background: #fff; }
.auth-brand-mark i { width: 21px; }
.auth-panel { align-self: center; width: min(420px, calc(100% - 40px)); margin: 40px auto; padding: 28px; border: 1px solid #d8e2dd; border-radius: 8px; background: #fff; box-shadow: 0 12px 32px rgba(21, 52, 40, .08); }
.auth-heading { display: grid; gap: 6px; margin-bottom: 22px; }
.auth-heading h1 { margin: 0; color: #253a31; font-size: 21px; }
.auth-heading p:last-child { margin: 0; color: #738078; font-size: 11px; }
.auth-form { display: grid; gap: 14px; }
.auth-form label { display: grid; gap: 6px; color: #4f5e57; font-size: 11px; font-weight: 700; }
.auth-form input { width: 100%; min-height: 39px; padding: 8px 10px; color: #2e3d36; border: 1px solid #cfdad4; border-radius: 4px; background: #fff; font-size: 12px; }
.auth-form input:focus { outline: 2px solid rgba(22,116,92,.18); border-color: var(--green); }
.auth-form .primary-button { justify-content: center; min-height: 40px; margin-top: 3px; }
.auth-message { margin: 13px 0 0; padding: 9px 10px; color: #2d654f; border: 1px solid #c8ded3; border-radius: 4px; background: #f0f7f3; font-size: 10px; }
.auth-message.error { color: #993d39; border-color: #ecc9c6; background: #fff3f2; }
.auth-security-note { display: flex; align-items: center; gap: 6px; margin: 18px 0 0; color: #859089; font-size: 9px; }
.auth-security-note i { width: 13px; }

.access-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.access-summary > div { display: grid; gap: 4px; min-height: 82px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.access-summary span { color: #76837d; font-size: 10px; }
.access-summary strong { color: #245b46; font-size: 20px; }
.access-summary small { color: #89948f; font-size: 9px; }
.access-section { margin-bottom: 16px; padding: 18px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.access-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.access-section-head > div { display: grid; gap: 3px; }
.access-section-head h2 { margin: 0; color: #304139; font-size: 14px; }
.access-section-head p { margin: 0; color: #7b8781; font-size: 10px; }
.account-cell, .profile-account { display: flex; align-items: center; gap: 9px; }
.account-cell > div, .profile-account > div { display: grid; gap: 3px; }
.account-cell small, .profile-account span { color: #7a8781; font-size: 9px; }
.role-pill, .status-pill { display: inline-flex; padding: 4px 7px; border-radius: 3px; font-size: 9px; font-weight: 750; }
.role-pill.admin { color: #245d47; background: #e8f4ed; }
.role-pill.employee { color: #365d78; background: #ebf2f7; }
.status-pill.active { color: #24634c; background: #eaf5ef; }
.status-pill.disabled { color: #8c5551; background: #f8eceb; }
.permission-summary { max-width: 300px; color: #637068; font-size: 10px; line-height: 1.45; }
.audit-list { display: grid; border-top: 1px solid #e8eeeb; }
.audit-entry { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 2px; border-bottom: 1px solid #edf2ef; }
.audit-icon { display: grid; place-items: center; width: 28px; height: 28px; color: #39745e; border-radius: 4px; background: #edf6f1; }
.audit-icon i { width: 14px; }
.audit-entry > div { display: grid; gap: 3px; }
.audit-entry strong { color: #34453d; font-size: 11px; }
.audit-entry p { margin: 0; color: #77847e; font-size: 9px; }
.audit-entry time { display: grid; gap: 2px; color: #68766f; font-size: 9px; text-align: right; }
.audit-entry time small { color: #99a19d; }
.backup-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 6px; color: #77847e; font-size: 10px; }
.backup-entry .audit-icon { background: #eef7f2; color: #1d7558; }
.permission-editor { display: grid; gap: 12px; padding: 13px; border: 1px solid #d9e3de; border-radius: 5px; background: #f8faf9; }
.permission-editor > div:first-child { display: grid; gap: 3px; }
.permission-editor strong { color: #3d5047; font-size: 12px; }
.permission-editor span { color: #78857e; font-size: 10px; }
.permission-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.permission-groups fieldset { display: grid; gap: 7px; min-width: 0; margin: 0; padding: 10px; border: 1px solid #dce5e0; border-radius: 4px; background: #fff; }
.permission-groups legend { padding: 0 4px; color: #3d6b58; font-size: 10px; font-weight: 750; }
.permission-option { display: flex !important; grid-template-columns: 15px 1fr; align-items: center; gap: 7px !important; font-weight: 600 !important; }
.permission-option input { width: 14px !important; min-height: 14px !important; margin: 0; }
.admin-permission-note { display: flex; align-items: center; gap: 9px; padding: 12px; color: #35614f; border: 1px solid #cfe0d7; border-radius: 4px; background: #eff7f3; font-size: 10px; }
.admin-permission-note i { width: 17px; }
.profile-account { padding: 16px 0 2px; }
.profile-account .avatar { width: 38px; height: 38px; }
.compact-form { padding-top: 14px; }
.pricing-product-summary { display: grid; gap: 4px; color: #384a41; }
.pricing-product-summary span { color: #7a8780; font-size: 10px; }
input[readonly] { color: #718078; background: #f2f5f3; cursor: not-allowed; }

@media (max-width: 760px) {
  .auth-screen { grid-template-columns: 1fr; }
  .auth-brand-panel { padding: 18px 20px; }
  .auth-panel { margin: 24px auto; }
  .access-summary, .permission-groups { grid-template-columns: 1fr; }
  .access-section { padding: 13px; }
  .audit-entry { grid-template-columns: 28px 1fr; }
  .audit-entry time { grid-column: 2; text-align: left; }
}

/* 客户报价单、PI 的紧凑语言与货币设置 */
.document-settings-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: -4px 0 18px; padding: 11px 13px; border: 1px solid #d8e3de; border-radius: 6px; background: #fff; box-shadow: 0 4px 14px rgba(19, 38, 31, .025); }
.document-settings-copy { display: flex; align-items: center; gap: 9px; min-width: 230px; margin-right: auto; }
.document-settings-copy > i { width: 19px; color: var(--green); }
.document-settings-copy > div { display: grid; gap: 2px; }
.document-settings-copy strong { color: #35463f; font-size: 11px; }
.document-settings-copy span { color: #84908a; font-size: 9px; }
.document-settings-bar > label, .document-view-actions label { display: flex; align-items: center; gap: 6px; color: #69766f; font-size: 9px; font-weight: 700; white-space: nowrap; }
.document-settings-bar select, .document-settings-bar input, .document-view-actions select { height: 31px; padding: 0 7px; color: #35443d; border: 1px solid #cfdad4; border-radius: 4px; background: #fff; font-size: 10px; }
.document-settings-bar select { min-width: 92px; }
.rate-setting input { width: 88px; }
.compact-action { min-height: 31px; padding: 0 9px; font-size: 10px; }
.document-rate-status { flex-basis: 100%; min-height: 12px; color: #7c8983; font-size: 9px; text-align: right; }
.document-rate-status:empty { display: none; }
.document-view-actions { flex-wrap: wrap; justify-content: flex-end; }
.localized-company-panel { border: 1px solid #dce5e0; border-radius: 5px; background: #fbfcfb; }
.localized-company-panel summary { padding: 11px 12px; color: #3f5d50; font-size: 11px; font-weight: 750; cursor: pointer; }
.localized-company-panel[open] summary { border-bottom: 1px solid #e5ece8; }
.localized-company-panel > .form-grid, .localized-company-panel > label { margin: 12px; }
.external-document-paper { min-height: 260mm; }
.quotation-expiry { display: inline-block; margin-top: 3px; color: #12664e; font-size: 9px; white-space: nowrap; }
.external-model { color: #82908a; font-size: 8px; font-weight: 500; }
.external-empty { padding: 24px !important; color: #89948f; text-align: center !important; }
.invoice-document[dir="rtl"] { direction: rtl; font-family: Arial, "Microsoft YaHei", sans-serif; }
.invoice-document[dir="rtl"] .invoice-title, .invoice-document[dir="rtl"] .report-brand { text-align: left; }
.invoice-document[dir="rtl"] .invoice-meta, .invoice-document[dir="rtl"] .invoice-table th, .invoice-document[dir="rtl"] .invoice-table td { text-align: right; }
.invoice-document[dir="rtl"] .invoice-totals > div { flex-direction: row-reverse; }
.invoice-document[dir="rtl"] .signature { text-align: right; }

@media (max-width: 760px) {
  .document-settings-copy { flex-basis: 100%; min-width: 0; }
  .document-settings-bar > label { flex: 1 1 145px; justify-content: space-between; }
  .document-settings-bar select { flex: 1; min-width: 0; }
  .document-settings-bar .compact-action { flex: 1 1 120px; }
  .document-view-actions { width: 100%; }
}

@media print {
  body[data-print-mode="quotation"] .view#pi-view,
  body[data-print-mode="report"] .view#pi-view { display: none !important; }
  body[data-print-mode="quotation"] .view#quotation-view { display: block !important; }
  body[data-print-mode="quotation"] .pi-stage { padding: 0; overflow: visible; border: 0; background: #fff; }
  body[data-print-mode="quotation"] .external-document-paper { width: 210mm; min-height: 297mm; padding: 15mm; box-shadow: none; }
  body[data-print-mode="pi"] .view#quotation-view,
  body[data-print-mode="report"] .view#quotation-view { display: none !important; }
}

/* PDF / XLSX 产品识别与导入审核 */
.modal-card.wide-modal { width: min(1040px, 100%); }
.document-import-intro { display: flex; align-items: flex-start; gap: 12px; padding: 15px; color: #385548; border: 1px solid #cfe0d7; border-radius: 6px; background: #f0f7f3; }
.document-import-intro > i { flex: 0 0 auto; width: 24px; color: var(--green); }
.document-import-intro > div { display: grid; gap: 4px; }
.document-import-intro strong { font-size: 12px; }
.document-import-intro span { color: #6f7d76; font-size: 10px; line-height: 1.55; }
.document-import-notes { display: grid; gap: 5px; padding: 11px 12px; color: #75827c; border: 1px dashed #d3ddd8; border-radius: 5px; font-size: 10px; }
.product-import-status { min-height: 16px; margin: 0; color: #3d735d; font-size: 10px; }
.product-import-status.error { color: #a94440; }
.import-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.import-summary > div { display: grid; gap: 3px; min-width: 0; padding: 10px 11px; border: 1px solid #dde6e1; border-radius: 5px; background: #f8faf9; }
.import-summary span { color: #839089; font-size: 9px; }
.import-summary strong { overflow: hidden; color: #365046; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.import-warning-list { display: grid; gap: 6px; }
.import-warning-list p { display: flex; align-items: flex-start; gap: 7px; margin: 0; padding: 9px 10px; color: #7c5d25; border: 1px solid #ead9b7; border-radius: 4px; background: #fff9ec; font-size: 10px; }
.import-warning-list i { width: 14px; }
.import-review-list { display: grid; gap: 10px; max-height: min(62vh, 640px); overflow: auto; padding-right: 3px; }
.import-review-card { border: 1px solid #dce5e0; border-radius: 6px; background: #fff; }
.import-review-card.has-validation-errors { border-color: #d77771; }
.import-card-errors { display: flex; flex-wrap: wrap; gap: 5px 9px; margin: 9px 12px 0; padding: 8px 9px; font-size: 9px; }
.import-card-errors[hidden] { display: none; }
.import-card-errors strong { width: 100%; }
.import-review-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-bottom: 1px solid #e7edea; background: #f8faf9; }
.import-template-match { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #e7edea; background: #fcfdfc; }
.import-template-match label { display: flex; align-items: center; gap: 8px; min-width: 0; color: #596961; font-size: 9px; font-weight: 750; }
.import-template-match select { width: min(360px, 52vw); min-height: 31px; padding: 5px 7px; color: #33473e; border: 1px solid #cfdad4; border-radius: 4px; background: #fff; font-size: 10px; }
.import-template-match .confidence-pill { margin-left: auto; }
.import-product-choice { display: flex; align-items: center; min-width: 0; }
.import-product-choice span { display: grid; gap: 2px; min-width: 0; }
.import-product-choice strong { color: #324b40; font-size: 11px; }
.import-product-choice small { overflow: hidden; color: #78857e; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.confidence-pill { flex: 0 0 auto; padding: 4px 7px; border-radius: 3px; font-size: 9px; font-weight: 750; }
.confidence-pill.high { color: #24634c; background: #e7f4ed; }
.confidence-pill.medium { color: #7b5a20; background: #fff4dc; }
.confidence-pill.low { color: #944842; background: #faecea; }
.import-product-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; padding: 11px 12px; }
.import-product-fields label { gap: 4px; font-size: 9px; }
.import-product-fields input { min-height: 31px; padding: 6px 7px; font-size: 10px; }
.import-product-fields .wide-field { grid-column: 1 / -1; }
.import-issues { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 12px 10px; }
.import-issues span { padding: 4px 6px; color: #785a27; border: 1px solid #ead9b8; border-radius: 3px; background: #fff9ed; font-size: 8px; }
.import-image-status { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 10px; width: calc(100% - 24px); min-height: 78px; margin: 0 12px 10px; padding: 8px 9px; color: #2e6b53; border: 1px solid #c7ddd2; border-radius: 3px; background: #f0f8f4; font-size: 9px; }
.import-image-preview { display: grid; place-items: center; width: 82px; height: 64px; overflow: hidden; color: #8d9993; border: 1px solid #cbded4; border-radius: 3px; background: #fff; }
.import-image-preview img { width: 100%; height: 100%; object-fit: contain; }
.import-image-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, .8fr); gap: 5px 8px; align-items: center; min-width: 0; }
.import-image-fields strong, .import-image-fields > span { grid-column: 1 / -1; }
.import-image-fields > span { display: flex; align-items: center; gap: 5px; line-height: 1.45; }
.import-image-fields input { min-height: 29px; padding: 4px 6px; font-size: 9px; }
.import-image-status i { flex: 0 0 auto; width: 13px; }
.import-variant-panel { border-top: 1px solid #e7edea; }
.import-variant-panel summary { padding: 9px 12px; color: #416457; font-size: 9px; font-weight: 750; cursor: pointer; }
.import-variant-table-wrap { max-height: min(36vh, 320px); overflow: auto; border-top: 1px solid #e7edea; }
.import-variant-table { width: max-content; min-width: 100%; border-collapse: collapse; table-layout: auto; }
.import-variant-table th { position: sticky; top: 0; z-index: 1; padding: 7px 8px; color: #66746d; border-bottom: 1px solid #dce5e0; background: #f5f8f6; font-size: 8px; text-align: left; }
.import-variant-table td { padding: 6px 8px; border-bottom: 1px solid #edf1ef; }
.import-variant-table input { width: 100%; min-height: 28px; padding: 4px 6px; font-size: 9px; }
.import-variant-table code { color: #72817a; font-size: 8px; }
.import-empty { margin: 0; padding: 28px 16px; color: #7d8983; border: 1px dashed #d3ddd8; border-radius: 5px; background: #fafbfa; font-size: 11px; text-align: center; }

@media (max-width: 760px) {
  .import-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .import-template-match { align-items: stretch; flex-direction: column; }
  .import-template-match label { align-items: stretch; flex-direction: column; }
  .import-template-match select { width: 100%; }
  .import-template-match .confidence-pill { align-self: flex-start; margin-left: 0; }
  .import-product-fields { grid-template-columns: 1fr; }
  .import-product-fields .wide-field { grid-column: 1 / -1; }
  .import-image-status { align-items: flex-start; }
}

/* 产品 PDF 附件 */
.product-document-manager { display: grid; gap: 10px; padding: 14px; border: 1px solid #d9e4de; border-radius: 5px; background: #f9fbfa; }
.document-count { flex: 0 0 auto; padding: 4px 7px; color: #35654f !important; border: 1px solid #c9ddd3; border-radius: 3px; background: #eef7f2; font-size: 9px !important; font-weight: 750; }
.product-document-manager ul, .product-document-list ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.product-document-manager li, .product-document-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 8px 10px; border: 1px solid #dce5e0; border-radius: 4px; background: #fff; }
.product-document-manager li > span, .product-document-list li > div { display: grid; gap: 2px; min-width: 0; }
.product-document-manager li strong, .product-document-list li strong { overflow: hidden; color: #3a4d44; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.product-document-manager li small, .product-document-list li span { color: #839089; font-size: 9px; }
.product-document-manager li a { color: #276c52; font-size: 9px; font-weight: 750; text-decoration: none; }
.product-document-manager li em { color: #89948f; font-size: 9px; font-style: normal; }
.product-document-empty { justify-content: center !important; color: #849089; border-style: dashed !important; background: #fbfcfb !important; font-size: 10px; }
.product-document-upload { display: grid; gap: 4px; padding-top: 2px; }
.product-document-upload label { gap: 5px !important; }
.product-document-upload input[type="file"] { min-height: 34px; padding: 5px 7px; background: #fff; font-size: 10px; }
.product-document-upload small, .product-document-list > p { margin: 0; color: #7b8982; font-size: 9px; line-height: 1.5; }
.product-document-list { display: grid; gap: 10px; }
.priority-document-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.priority-document-manager { border-color: #bcd8cb; background: #f2f8f5; }
.product-document-other { border: 1px solid #d8e2dc; border-radius: 5px; background: #fbfcfb; }
.product-document-other > summary { display: flex; align-items: center; justify-content: space-between; padding: 11px 13px; color: #3a5146; font-size: 11px; font-weight: 750; cursor: pointer; }
.product-document-other > summary span { color: #74827b; font-size: 9px; font-weight: 600; }
.product-document-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 10px 10px; }
.product-document-other > small { display: block; padding: 0 12px 11px; color: #7b8982; font-size: 9px; }
.product-document-manager .document-file-actions { display: flex; flex: 0 0 auto; grid-auto-flow: column; gap: 4px; }
.product-document-manager .document-file-actions .report-button { min-height: 25px; padding: 0 6px; }
.product-document-group { display: grid; gap: 6px; }
.product-document-group h3 { display: flex; align-items: center; gap: 6px; margin: 0; color: #355447; font-size: 11px; }
.product-document-group h3 span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; color: #41735e; border-radius: 3px; background: #eaf4ef; font-size: 8px; }
.archive-filter-status { display: flex; align-items: baseline; gap: 7px; margin: -7px 0 12px; color: #6e7b75; font-size: 10px; }
.archive-filter-status span { color: #345d4b; font-weight: 750; }
.archive-filter-status strong { color: var(--green); font-size: 17px; }
.archive-filter-status small { font-size: 9px; }
.archive-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -5px 0 12px; }
.archive-toolbar > span { color: #7a8781; font-size: 9px; }
.archive-search { display: grid; grid-template-columns: 18px minmax(220px, 480px) 30px; align-items: center; width: min(100%, 540px); min-height: 38px; padding: 0 5px 0 11px; border: 1px solid #cfdad4; border-radius: 5px; background: #fff; }
.archive-search > i { width: 15px; color: #7c8a83; }
.archive-search input { width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 0; outline: 0; background: transparent; font-size: 10px; }
.archive-search button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; color: #6f7e76; border: 0; border-radius: 3px; background: transparent; cursor: pointer; }
.archive-search button:hover { color: #245e48; background: #edf5f1; }
.archive-search button i { width: 14px; }
#pdf-archive-list .library-product span { display: grid; gap: 2px; min-width: 0; }
#pdf-archive-list .library-product small { overflow: hidden; max-width: 300px; color: #849089; font-size: 8px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }

/* 多企业资料与客户报价/PI 历史 */
.company-profile-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 14px; max-width: 1040px; margin-bottom: 16px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.company-profile-toolbar label { display: grid; gap: 6px; min-width: min(420px, 55%); color: #56635e; font-size: 10px; font-weight: 750; }
.company-profile-toolbar select { min-height: 36px; padding: 7px 9px; color: #2e3d36; border: 1px solid #d3ddd8; border-radius: 4px; background: #fff; font-size: 11px; }
.company-profile-toolbar > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.company-profile-toolbar .danger-button { display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.company-profile-toolbar button i { width: 14px; }
.company-brand-assets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.company-brand-assets .company-logo-manager { height: 100%; padding: 12px; border: 1px solid #dce5e0; border-radius: 5px; }
.company-seal-preview { color: #a54d45; background: #fff; }
.company-seal-preview i { width: 35px; height: 35px; }
.asset-buttons { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.asset-buttons .text-button { flex: 0 0 auto; margin: 0; padding: 0; font-size: 9px; }
.document-view-actions label:first-child select { width: min(230px, 30vw); }

.customer-history-loading { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 180px; color: #718078; font-size: 11px; }
.customer-history-loading i { width: 18px; animation: history-spin 1s linear infinite; }
@keyframes history-spin { to { transform: rotate(360deg); } }
.customer-history-toolbar { display: flex; align-items: center; gap: 8px; padding: 15px 0 12px; border-bottom: 1px solid var(--line); }
.customer-history-toolbar > div { display: grid; gap: 2px; margin-right: auto; }
.customer-history-toolbar > div span { color: #7b8781; font-size: 9px; }
.customer-history-toolbar > div strong { color: #2d473b; font-size: 17px; }
.customer-history-toolbar button { min-height: 32px; padding: 0 9px; font-size: 10px; }
.customer-history-toolbar button i { width: 13px; }
.customer-history-list { display: grid; gap: 7px; max-height: min(58vh, 560px); overflow: auto; padding: 12px 2px 2px; }
.customer-history-item { display: grid; grid-template-columns: 58px minmax(0, 1fr) 130px 16px; gap: 10px; align-items: center; width: 100%; min-height: 58px; padding: 9px 11px; color: #33443c; border: 1px solid #dce5e0; border-radius: 5px; background: #fff; text-align: left; }
.customer-history-item:hover { border-color: #91bda9; background: #f5faf7; }
.history-kind { display: grid; place-items: center; min-height: 27px; padding: 4px 6px; color: #2f6d55; border: 1px solid #bed8cb; border-radius: 3px; background: #edf7f2; font-size: 9px; font-weight: 800; }
.history-kind.pi { color: #7b5b23; border-color: #e4cfaa; background: #fff7e8; }
.history-main, .history-amount { display: grid; gap: 3px; min-width: 0; }
.history-main strong, .history-amount strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.history-main small, .history-amount small { overflow: hidden; color: #7d8983; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.history-amount { text-align: right; }
.customer-history-item > i { width: 15px; color: #829089; }
.history-empty { margin: 0; padding: 36px 14px; color: #7c8882; border: 1px dashed #d3ddd8; border-radius: 5px; background: #fafcfa; font-size: 11px; text-align: center; }
.history-detail-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 15px 0 12px; }
.history-detail-meta > div { display: grid; gap: 3px; min-width: 0; padding: 10px; border: 1px solid #e0e7e3; border-radius: 4px; background: #f8faf9; }
.history-detail-meta span { color: #818d87; font-size: 8px; }
.history-detail-meta strong, .history-detail-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-detail-meta strong { color: #34463d; font-size: 10px; }
.history-detail-meta small { color: #7b8881; font-size: 8px; }
.history-table-wrap { max-height: min(44vh, 420px); overflow: auto; border: 1px solid #dce5e0; border-radius: 5px; }
.history-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.history-table th { position: sticky; top: 0; z-index: 1; padding: 8px; color: #64726b; border-bottom: 1px solid #dce5e0; background: #f4f7f5; font-size: 8px; text-align: left; }
.history-table td { padding: 8px; color: #46554e; border-bottom: 1px solid #edf1ef; font-size: 9px; }
.history-table td strong, .history-table td small { display: block; }
.history-table td strong { color: #2f443a; font-size: 10px; }
.history-table td small { margin-top: 2px; color: #849089; font-size: 8px; }
.history-totals { display: flex; justify-content: flex-end; gap: 16px; padding: 12px 2px 0; }
.history-totals > div { display: grid; gap: 3px; min-width: 100px; text-align: right; }
.history-totals span { color: #7b8881; font-size: 8px; }
.history-totals strong { color: #2a473a; font-size: 11px; }
.history-totals > div:last-child strong { color: var(--green); font-size: 14px; }

.sync-readiness-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid #d7e2dc; border-radius: 5px; background: #f8faf9; }
.sync-readiness-toolbar > div { display: flex; align-items: center; gap: 8px; min-width: 0; color: #52615a; font-size: 10px; }
.sync-readiness-toolbar > div i { width: 16px; color: #347158; }
.sync-readiness-toolbar > div strong { color: #2c5f4a; font-size: 11px; }
.sync-readiness-toolbar label { display: flex; align-items: center; gap: 7px; color: #74817b; font-size: 9px; }
.sync-readiness-toolbar select { height: 31px; min-width: 150px; padding: 0 8px; color: #384941; border: 1px solid #cdd9d3; border-radius: 4px; background: #fff; font-size: 10px; }
.sync-readiness-pill { display: inline-flex; min-height: 24px; align-items: center; padding: 3px 7px; border: 1px solid transparent; border-radius: 3px; font-size: 9px; font-weight: 750; white-space: nowrap; }
.sync-readiness-pill.ready { color: #236448; border-color: #b9d9c8; background: #eaf6ef; }
.sync-readiness-pill.incomplete { color: #8a5c16; border-color: #e5c98f; background: #fff7e7; }
.sync-readiness-pill.stopped { color: #68736e; border-color: #d5ddd9; background: #f0f3f1; }
.product-sync-fields { display: grid; gap: 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.product-sync-fields textarea { width: 100%; min-height: 62px; resize: vertical; }
.upload-variant-table { min-width: 980px; }
.variant-sku-control { display: grid; gap: 4px; min-width: 190px; }
.upload-variant-table .variant-sku-control > input { width: 190px; }
.variant-sku-control label, .variant-check { display: inline-flex; align-items: center; gap: 4px; color: #6f7d76; font-size: 8px; white-space: nowrap; }
.variant-sku-control label input, .variant-check input { width: 13px; height: 13px; min-height: 13px; margin: 0; padding: 0; }
.upload-variant-table [data-upload-moq] { width: 70px; }
.sync-config-grid { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(280px, 1.5fr) minmax(260px, 1.3fr) auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.sync-config-grid label { display: grid; gap: 5px; min-width: 0; color: #6f7d76; font-size: 9px; }
.sync-config-grid input { width: 100%; height: 34px; min-width: 0; padding: 0 9px; color: #35463e; border: 1px solid #ccd8d2; border-radius: 4px; background: #fff; font-size: 10px; }
.sync-config-grid input[readonly] { color: #68766f; background: #f3f6f4; }
.sync-token-list { display: grid; gap: 7px; }
.sync-token-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 72px; gap: 10px; align-items: center; min-height: 54px; padding: 8px 10px; border: 1px solid #dfe7e3; border-radius: 5px; background: #fbfcfb; }
.sync-token-icon { display: grid; place-items: center; width: 30px; height: 30px; color: #356d56; border: 1px solid #cfe0d7; border-radius: 4px; background: #eef7f2; }
.sync-token-icon i { width: 15px; }
.sync-token-row > div:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
.sync-token-row strong, .sync-token-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sync-token-row strong { color: #34463d; font-size: 10px; }
.sync-token-row small { color: #7e8a84; font-size: 8px; }
.sync-token-actions { display: flex; justify-content: flex-end; gap: 4px; }
.sync-token-actions .icon-button { width: 30px; height: 30px; }
.sync-token-actions .danger-icon { color: #a1504a; }
.sync-token-once { display: grid; gap: 13px; }
.sync-token-warning { display: flex; align-items: center; gap: 9px; padding: 10px; color: #765521; border: 1px solid #e6cc97; border-radius: 4px; background: #fff8e9; font-size: 10px; }
.sync-token-warning i { width: 18px; flex: 0 0 18px; }
.sync-token-once label { display: grid; gap: 5px; color: #69766f; font-size: 9px; }
.sync-token-once label > div { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 6px; }
.sync-token-once input { width: 100%; min-width: 0; height: 36px; padding: 0 9px; color: #24372e; border: 1px solid #bdcec5; border-radius: 4px; background: #f8faf9; font-family: Consolas, monospace; font-size: 10px; }

/* v1.2.0: dense catalog controls, searchable customer directory, and stable PI numerals. */
.quote-category-options { display: flex; gap: 8px; overflow-x: auto; padding: 13px 1px 4px; scrollbar-width: thin; }
.quote-category-button { flex: 0 0 auto; min-height: 30px; padding: 0 10px; color: #54645d; border: 1px solid #d3dfd9; border-radius: 7px; background: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; }
.quote-category-button:hover, .quote-category-button.active { color: #12664e; border-color: #8fbda9; background: #edf8f2; }
.product-pager { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin-top: 14px; padding: 7px 9px; color: #74817b; border-top: 1px solid #e6ece9; font-size: 10px; }
.product-pager > div { display: flex; gap: 4px; }
.product-pager .icon-button { width: 29px; height: 29px; }
.product-pager .icon-button:disabled { cursor: default; opacity: .38; }
.document-view-actions label:first-child { display: grid; grid-template-columns: auto minmax(110px, 1fr); align-items: center; }
.document-view-actions label:first-child input { grid-column: 2; height: 28px; min-width: 130px; padding: 0 7px; color: #35443d; border: 1px solid #cfdad4; border-radius: 4px; background: #fff; font-size: 10px; }
.document-view-actions label:first-child select { grid-column: 2; }
.invoice-title span, .invoice-table td:nth-child(1), .invoice-table td:nth-child(5), .invoice-table td:nth-child(6), .invoice-table td:nth-child(7), .invoice-totals strong { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.invoice-table td:nth-child(1), .invoice-table td:nth-child(5), .invoice-table td:nth-child(6), .invoice-table td:nth-child(7) { white-space: nowrap; }
.customer-directory-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; padding: 10px 12px; border: 1px solid #d9e3de; border-radius: 5px; background: #fff; }
.customer-directory-toolbar > span { color: #74817b; font-size: 10px; }
.customer-picker-search { display: grid; grid-template-columns: 17px minmax(0, 1fr); align-items: center; gap: 7px; flex: 1; min-width: 0; min-height: 34px; padding: 0 9px; border: 1px solid #cfdbd5; border-radius: 4px; background: #fff; }
.customer-picker-search:focus-within { border-color: var(--green); box-shadow: 0 0 0 2px rgba(22,116,92,.1); }
.customer-picker-search i { width: 15px; color: #75827c; }
.customer-picker-search input { width: 100%; min-width: 0; border: 0; outline: 0; color: #304039; background: transparent; font-size: 11px; }
.customer-directory-more { display: flex; justify-content: center; padding-top: 15px; }
.customer-assignment { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(180px, .7fr) minmax(260px, 1.3fr); gap: 12px; align-items: start; padding: 13px; border: 1px solid #d6e5de; border-radius: 5px; background: #f6faf8; }
.customer-assignment > div { display: grid; gap: 4px; }
.customer-assignment strong { color: #365247; font-size: 11px; }
.customer-assignment span, .customer-owner-note { color: #718078; font-size: 10px; line-height: 1.55; }
.customer-assignment fieldset { min-width: 0; margin: 0; padding: 7px 9px 9px; border: 1px solid #d5e1db; border-radius: 4px; }
.customer-assignment legend { padding: 0 4px; color: #6b7972; font-size: 9px; font-weight: 700; }
.customer-collaborators { display: flex; flex-wrap: wrap; gap: 7px 12px; }
.customer-collaborators label { display: inline-flex; align-items: center; gap: 4px; color: #53635c; font-size: 10px; }
.customer-collaborators input { width: 14px; height: 14px; min-height: 14px; margin: 0; padding: 0; }
.product-form-modal { max-height: min(860px, calc(100vh - 32px)); }
.product-form-modal .modal-form { gap: 16px; }
.product-form-modal .priority-document-grid, .product-form-modal .product-document-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-form-modal .upload-variant-table-wrap { max-height: 315px; }

/* Keep the complete product card visible in a comfortable eight-product workspace. */
.catalog-panel { container-type: inline-size; }
.product-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.product-card { display: flex; flex-direction: column; height: 226px; min-width: 0; padding: 11px; overflow: visible; border-color: #d9e4df; border-radius: 8px; background: #fff; box-shadow: 0 2px 8px rgba(22, 53, 41, .035); }
.product-card:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(22, 53, 41, .09); }
.product-card-header { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 11px; min-height: 84px; }
.product-image { height: 84px; overflow: hidden; border: 1px solid #dce7e1; border-radius: 8px; background: #f4f7f5; }
.product-image.image-pending { gap: 4px; }
.product-image.image-pending::before { max-width: calc(100% - 14px); font-size: 8px; }
.product-image.image-pending::after { display: none; }
.stock-tag { top: 5px; left: 5px; padding: 3px 6px; border-radius: 999px; font-size: 8px; }
.product-identification { min-width: 0; overflow: hidden; }
.product-code { overflow: hidden; color: #718078; font-size: 10px; letter-spacing: .25px; text-overflow: ellipsis; white-space: nowrap; }
.product-card h3 { display: -webkit-box; min-height: 30px; margin: 4px 0 3px; overflow: hidden; color: #26332f; font-size: 11px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.product-spec { min-height: 14px; color: #78857f; font-size: 9px; }
.product-body { display: flex; flex: 1; flex-direction: column; justify-content: space-between; min-height: 94px; padding: 8px 0 0; }
.option-row { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 6px; margin-top: 0; }
.option-row label { margin-bottom: 3px; font-size: 8px; }
.option-row select { height: 27px; padding: 0 5px; border-radius: 6px; font-size: 9px; }
.product-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 29px; margin-top: 6px; }
.product-foot > div:first-child { gap: 2px; min-width: 0; }
.product-foot span { font-size: 8px; }
.product-foot strong { overflow: hidden; font-size: 13px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.product-actions { display: grid; grid-template-columns: 29px auto; align-items: center; gap: 5px; }
.add-product, .matrix-order { min-height: 29px; margin: 0; border-radius: 7px; font-size: 10px; }
.add-product { gap: 3px; padding: 0 7px; white-space: nowrap; }
.add-product i, .matrix-order i { width: 13px; }
.matrix-order { display: inline-grid; place-items: center; width: 29px; padding: 0; color: #3b695a; background: #f2f8f5; border: 1px solid #b8d7c9; }

@media (max-width: 760px) {
  .archive-toolbar { align-items: stretch; flex-direction: column; }
  .archive-search { grid-template-columns: 18px minmax(0, 1fr) 30px; width: 100%; }
  .priority-document-grid, .product-document-category-grid, .company-brand-assets { grid-template-columns: 1fr; }
  .company-profile-toolbar { align-items: stretch; flex-direction: column; }
  .company-profile-toolbar label { min-width: 0; }
  .company-profile-toolbar > div { justify-content: flex-start; }
  .document-view-actions label:first-child { width: 100%; }
  .document-view-actions label:first-child input { width: 100%; }
  .document-view-actions label:first-child select { width: 100%; }
  .customer-history-toolbar { align-items: stretch; flex-wrap: wrap; }
  .customer-history-toolbar > div { width: 100%; }
  .customer-history-item { grid-template-columns: 52px minmax(0, 1fr) 16px; }
  .history-amount { grid-column: 2; grid-row: 2; text-align: left; }
  .customer-history-item > i { grid-column: 3; grid-row: 1 / 3; }
  .history-detail-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .history-totals > div { min-width: 0; }
  .sync-readiness-toolbar { align-items: stretch; flex-direction: column; }
  .sync-readiness-toolbar label { justify-content: space-between; }
  .sync-readiness-toolbar select { flex: 1; }
  .sync-config-grid { grid-template-columns: 1fr; }
  .sync-token-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
  .sync-token-actions { grid-column: 2 / 4; justify-content: flex-start; }
  .customer-directory-toolbar { align-items: stretch; flex-direction: column; }
  .customer-assignment { grid-template-columns: 1fr; }
  .product-form-modal .priority-document-grid, .product-form-modal .product-document-category-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card { height: auto; min-height: 226px; }
}