:root { --bg:#f4f6f8; --panel:#ffffff; --panel-raised:#f8fafc; --border:#dce2e8; --text:#18212b; --muted:#66717f; --accent:#c77b13; --success:#16794c; --error:#b42318; --font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html,body,button,input,textarea,select,table { font-family:var(--font-ui); }
body { margin:0; background:var(--bg); color:var(--text); min-height:100vh; font-size:14px; line-height:1.45; }
a { color:var(--accent); }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 22px; border-bottom:1px solid var(--border); background:var(--panel); }
.brand { display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:.02em; }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; background:var(--accent); color:#ffffff; font-weight:800; box-shadow:0 1px 5px rgb(20 35 50 / 16%); }
.brand small { color:var(--muted); font-weight:400; font-size:12px; margin-left:5px; }
.topbar nav a { color:var(--muted); text-decoration:none; font-size:13px; margin-left:18px; border-bottom:2px solid transparent; padding-bottom:4px; }
.topbar nav a:hover { color:var(--text); border-bottom-color:var(--accent); }
.auth-main { max-width:440px; width:100%; margin:0 auto; padding:72px 20px 60px; }
.auth-panel { background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:24px; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:700; margin-bottom:8px; }
h1 { margin:0 0 6px; font-size:24px; letter-spacing:.01em; } h2 { margin:0 0 6px; font-size:15px; }
.muted { color:var(--muted); margin:0 0 20px; font-size:13px; }
.auth-form { display:grid; gap:15px; margin-top:22px; }
label { display:grid; gap:6px; color:var(--muted); font-size:12px; }
input,select,textarea { width:100%; min-height:40px; background:var(--panel-raised); border:1px solid var(--border); border-radius:6px; color:var(--text); padding:9px 11px; font:inherit; font-size:13px; color-scheme:light; }
textarea { min-height:86px; resize:vertical; }
input:focus,select:focus,textarea:focus { outline:2px solid var(--accent); outline-offset:1px; }
button { background:var(--accent); color:#ffffff; border:0; border-radius:6px; padding:10px 18px; font-weight:600; font-size:13px; cursor:pointer; }
button:hover { filter:brightness(1.08); } button:disabled { opacity:.5; cursor:not-allowed; }
button.secondary { background:transparent; color:var(--text); border:1px solid var(--border); }
button.danger { background:transparent; color:var(--error); border:1px solid #e6aaa5; }
.auth-switch { border-top:1px solid var(--border); margin:22px 0 0; padding-top:17px; color:var(--muted); font-size:12.5px; }
.status-line { color:var(--muted); font-size:12.5px; min-height:18px; } .status-line.error { color:var(--error); }
.app-topbar { position:sticky; top:0; z-index:2; } .account-strip { display:flex; align-items:center; gap:14px; color:var(--muted); font-size:12px; }
.app-layout { display:flex; min-height:calc(100vh - 61px); }
.side-nav { width:220px; flex:0 0 220px; border-right:1px solid var(--border); background:var(--panel); padding:22px 14px; display:flex; flex-direction:column; }
.side-label { color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.12em; padding:0 10px 10px; }
.side-nav button { display:block; width:100%; text-align:left; background:transparent; color:var(--muted); border:1px solid transparent; margin:2px 0; padding:10px 12px; font-weight:500; }
.side-nav button:hover,.side-nav button.active { background:var(--panel-raised); color:var(--text); border-color:var(--border); }
.app-main { max-width:1180px; width:100%; padding:34px 34px 70px; margin:0 auto; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:24px; } .page-heading h1 { font-size:22px; }
.grid { display:grid; gap:16px; } .three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.info-card,.panel { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:20px; }
.info-card { min-height:180px; } .info-card .step { color:var(--accent); font-size:11px; font-weight:700; } .info-card h2 { margin-top:28px; } .info-card p { color:var(--muted); font-size:13px; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .form-grid > div,.form-grid .check-row { align-self:end; }
.settings-form { display:grid; gap:22px; }
.settings-source { padding-bottom:20px; border-bottom:1px solid var(--border); }
.settings-source label { max-width:340px; color:var(--text); font-weight:600; }
.settings-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.settings-group { display:grid; gap:10px; align-content:start; }
.settings-group h2 { font-size:16px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.settings-fields { display:grid; gap:24px; } .settings-fields label { gap:3px; } .settings-fields .check-row { margin-top:12px; }
.settings-fields .check-row { align-self:end; }
.settings-fields .auto-sap-toggle { margin-top:-8px; }
.setting-with-action { display:grid; gap:6px; }
.setting-action-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.setting-action-heading label { color:var(--muted); }
.setting-action-heading button { flex:0 0 auto; padding:7px 12px; }
.setting-with-action textarea { min-height:104px; }
.settings-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:14px; }
.settings-footer { display:flex; justify-content:flex-end; border-top:1px solid var(--border); padding-top:18px; }
.check-row { display:flex; align-items:center; gap:8px; color:var(--text); } .check-row input { width:auto; min-height:auto; }
.toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-bottom:18px; } .toolbar input,.toolbar select { width:190px; }
.stack { display:grid; gap:16px; } .card { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:16px; }
table { width:100%; border-collapse:collapse; font-size:13px; } th,td { border-bottom:1px solid var(--border); padding:10px; text-align:left; vertical-align:top; } th { color:var(--muted); font-size:11px; font-weight:600; }
pre { overflow:auto; background:#f7f9fb; color:#263442; border:1px solid var(--border); border-radius:6px; padding:14px; }
.badge { display:inline-block; font-size:11px; padding:2px 8px; border-radius:20px; border:1px solid var(--border); color:var(--muted); } .badge.set { color:var(--success); border-color:var(--success); }
#toast { position:fixed; right:18px; bottom:18px; background:var(--panel); border:1px solid var(--border); color:var(--text); padding:12px 14px; border-radius:6px; display:none; max-width:420px; }
@media (max-width:760px) { .app-layout { display:block; } .side-nav { width:auto; border-right:0; border-bottom:1px solid var(--border); padding:10px; display:flex; flex-direction:row; gap:5px; overflow:auto; } .side-label { display:none; } .side-nav button { width:auto; white-space:nowrap; } .app-main { padding:24px 18px 50px; } .three,.form-grid,.settings-columns { grid-template-columns:1fr; } .account-strip span { display:none; } }.product-actions { display:flex; flex-wrap:wrap; gap:8px; }
.proposal-row { border:1px solid var(--border); border-radius:8px; background:var(--panel); padding:18px; }
.proposal-row h3 { margin:0 0 12px; font-size:15px; }
.proposal-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.proposal-label { color:var(--muted); font-size:11px; margin-bottom:6px; }
.proposal-row pre { min-height:74px; white-space:pre-wrap; overflow-wrap:anywhere; margin:0; }
.proposal-row details { margin:12px 0; color:var(--muted); }
.proposal-row details ul { margin:8px 0; padding-left:22px; }
.review-panel { margin-top:26px; border-top:1px solid var(--border); padding-top:22px; }
.review-panel .page-heading h2 { font-size:18px; }
#productsList > p { color:var(--muted); }
.product-command-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; padding:9px 12px; border:1px solid var(--border); border-bottom:0; border-radius:8px 8px 0 0; background:var(--panel-raised); }
.product-command-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.product-command-tools { display:flex; align-items:center; gap:8px; min-width:0; }
.page-search { min-height:38px; width:260px; background:var(--panel); }
#selectedProductCount { color:var(--muted); font-size:12px; margin-left:4px; }
.product-command-bar + .status-line { padding:8px 2px; }
.product-command-bar ~ #productsList { border-radius:0 0 8px 8px; }
.products-grid { min-width:0; overflow:hidden; border:1px solid var(--border); background:var(--panel); }
.products-grid .dx-widget { color:var(--text); font-family:var(--font-ui); font-size:13px; }
.products-grid .dx-datagrid { background:var(--panel); }
.products-grid .dx-datagrid-header-panel { padding:8px 10px; border-bottom:1px solid var(--border); background:var(--panel-raised); }
.products-grid .dx-toolbar { background:transparent; }
.products-grid .dx-toolbar .dx-texteditor { width:min(280px,70vw) !important; border-color:var(--border); border-radius:6px; background:var(--panel); }
.products-grid .dx-datagrid-headers { color:var(--text); font-weight:650; background:#f5f7fa; }
.products-grid .dx-datagrid-headers .dx-sort { color:var(--accent); opacity:1; }
.products-grid .dx-datagrid-headers .dx-header-filter { color:#687789; opacity:.8; }
.products-grid .dx-datagrid-headers .dx-header-filter:hover,.products-grid .dx-datagrid-headers .dx-header-filter:not(.dx-header-filter-empty) { color:var(--accent); opacity:1; }
.products-grid .dx-datagrid-headers .dx-datagrid-table .dx-row > td { border-bottom-color:var(--border); }
.products-grid .dx-datagrid-filter-row .dx-editor-cell { padding:5px 7px; background:var(--panel-raised); }
.products-grid .dx-datagrid-filter-row .dx-texteditor { border-radius:5px; background:var(--panel); }
.products-grid .dx-datagrid-rowsview .dx-row { height:64px; }
.products-grid .dx-datagrid-rowsview .dx-row > td { height:64px; padding:10px 12px; vertical-align:middle; border-color:var(--border); }
.products-grid .dx-datagrid-rowsview .dx-row-alt > td { background:#fafbfc; }
.products-grid .dx-datagrid-rowsview .dx-selection > td { background:#fff4df; color:var(--text); }
.products-grid .dx-datagrid-rowsview .dx-row:hover > td { background:#f7f9fb; }
.products-grid .dx-datagrid-rowsview .dx-selection:hover > td { background:#ffefd1; }
.products-grid .dx-checkbox-icon { border-color:#aeb8c4; border-radius:3px; }
.products-grid .dx-checkbox-checked .dx-checkbox-icon { border-color:var(--accent); background:var(--accent); color:#fff; }
.products-grid .dx-datagrid-filter-panel { padding:9px 12px; border-top:1px solid var(--border); background:var(--panel-raised); }
.products-grid .dx-datagrid-pager { padding:10px 12px; border-top:1px solid var(--border); background:var(--panel-raised); }
.products-grid .dx-pager .dx-page,.products-grid .dx-pager .dx-navigate-button { border-radius:5px; }
.products-grid .dx-pager .dx-selection { background:var(--accent); color:#fff; }
.products-grid .dx-loadpanel-content { border-radius:8px; }
.products-grid .barcode-primary,.products-grid .barcode-count,.products-grid .barcode-expanded span { white-space:nowrap; }
.products-grid .empty { color:var(--muted); font-style:italic; }
.barcode-details summary { cursor:pointer; }
.barcode-primary { margin-right:8px; }
.barcode-count { color:var(--muted); font-size:11px; }
.barcode-expanded { display:grid; gap:3px; padding:6px 0 2px 18px; }
.status-button { padding:0; background:transparent; color:inherit; }
.status-button:hover { filter:none; }
@media (max-width:760px) { .proposal-columns { grid-template-columns:1fr; } .product-actions { flex-direction:column; } }
@media (max-width:680px) { .product-command-bar { align-items:stretch; flex-direction:column; } .product-command-tools { align-items:stretch; flex-direction:column; } .page-search { width:100%; } .product-command-bar > button,.product-command-tools button { align-self:flex-start; } }
.review-dialog { width:min(900px,calc(100vw - 32px)); max-height:calc(100vh - 48px); margin:auto; padding:0; overflow:auto; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); box-shadow:0 24px 70px rgb(24 33 43 / 22%); }
.review-dialog::backdrop { background:rgb(24 33 43 / 48%); }
.review-dialog-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px 24px 16px; border-bottom:1px solid var(--border); }
#reviewDialog .review-dialog-heading { position:sticky; top:0; z-index:2; background:var(--panel); }
.review-dialog-heading h2 { margin:0; font-size:18px; }
.dialog-close { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; padding:0; border:1px solid var(--border); background:transparent; color:var(--text); font-size:23px; font-weight:400; line-height:1; }
.review-title-row { display:flex; align-items:center; gap:10px; }
.review-title-row > span { color:var(--muted); font-size:12px; }
.review-product-label { min-height:18px; margin:4px 0 0; color:var(--muted); font-size:12px; }
.review-comparison { display:grid; }
.review-field { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; padding:24px; border-bottom:1px solid var(--border); }
.review-value,.review-suggestion { min-width:0; }
.review-value > label,.review-suggestion > label { display:block; margin-bottom:8px; color:var(--text); font-size:13px; font-weight:600; }
.review-current,.review-suggestion textarea { min-height:104px; padding:13px 14px; border:1px solid var(--border); border-radius:6px; background:var(--panel-raised); color:var(--text); font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
.review-current.empty { color:var(--muted); font-style:italic; }
.review-suggestion textarea { resize:vertical; }
.verification-score { color:var(--success); font-size:11px; font-weight:600; margin-left:6px; }
.review-field-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.review-field-actions button { min-width:112px; }
.review-field-actions button.accepted { background:var(--success); opacity:1; }
.review-field-actions button.rejected { background:var(--error); color:#ffffff; opacity:1; }
.review-dialog-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 24px 20px; }
.review-queue-actions { display:flex; gap:8px; }
@media (max-width:680px) { .review-dialog { width:calc(100vw - 20px); max-height:calc(100vh - 20px); } .review-field { grid-template-columns:1fr; gap:18px; padding:20px; } .review-field-actions { justify-content:stretch; } .review-field-actions button { flex:1; min-width:0; } }
.history-dialog { width:min(760px,calc(100vw - 32px)); max-height:calc(100vh - 48px); margin:auto; padding:0; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); box-shadow:0 24px 70px rgb(24 33 43 / 22%); }
.history-dialog::backdrop { background:rgb(24 33 43 / 48%); }
.filter-help-dialog { width:min(560px,calc(100vw - 32px)); margin:auto; padding:0; border:1px solid var(--border); border-radius:8px; background:var(--panel); color:var(--text); box-shadow:0 24px 70px rgb(24 33 43 / 22%); }
.filter-help-dialog::backdrop { background:rgb(24 33 43 / 48%); }
.filter-help-content { display:grid; gap:8px; padding:22px 24px; }
.filter-help-content textarea { min-height:130px; }
.history-content { max-height:60vh; overflow:auto; }
.history-product { padding:20px 24px; border-bottom:1px solid var(--border); }
.history-product h4 { margin:18px 0 8px; font-size:12px; color:var(--muted); }
.history-product-heading { display:flex; justify-content:space-between; gap:16px; margin-bottom:12px; }
.history-product-heading h3 { margin:0; font-size:15px; }
.history-product-heading span { color:var(--muted); font-size:12px; }
.history-revision { padding:12px 0; border-top:1px solid var(--border); }
.history-revision > div:first-child { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:11px; }
.history-revision > div:first-child strong { color:var(--text); }
.history-revision dl { margin:10px 0 0; }
.history-revision dl div { display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; padding:5px 0; }
.history-revision dt { color:var(--muted); font-size:11px; }
.history-revision dd { margin:0; overflow-wrap:anywhere; }
@media (max-width:560px) { .history-dialog { width:calc(100vw - 20px); } .history-product-heading,.history-revision > div:first-child { flex-direction:column; gap:4px; } .history-revision dl div { grid-template-columns:1fr; gap:2px; } }
.source-section { margin:0 0 26px; }
.section-heading { display:flex; align-items:flex-start; justify-content:space-between; margin:0 0 12px; }
.section-heading h2 { margin:0 0 4px; font-size:16px; }
.section-heading .muted { margin:0; font-size:12px; }
.source-form { display:grid; grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) minmax(210px,1.2fr) auto; gap:14px; align-items:end; }
.source-form button { min-height:40px; white-space:nowrap; }
.field-hint { color:var(--muted); font-size:11px; line-height:1.4; }
.import-form { display:grid; grid-template-columns:minmax(200px,1fr) minmax(240px,1.3fr) auto minmax(180px,1fr); gap:14px; align-items:end; }
.import-form button { min-height:40px; white-space:nowrap; }
.import-form .status-line,.source-form .status-line { align-self:center; }
#sourcesList .card { padding:18px; }
#sourcesList .card > h2 { margin-bottom:6px; }
#sourcesList .card > p { margin:0 0 14px; color:var(--muted); font-size:12px; }
#sourcesList .card .toolbar { align-items:end; }
@media (max-width:900px) { .source-form { grid-template-columns:repeat(2,minmax(0,1fr)); } .import-form { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .source-form,.import-form { grid-template-columns:1fr; } .source-form .status-line,.import-form .status-line { min-height:18px; } }
.source-add { border:1px solid var(--border); border-radius:8px; background:var(--panel); padding:14px 18px; }
.source-add > summary,.source-card details > summary { cursor:pointer; color:var(--text); font-size:13px; font-weight:600; }
.source-add > .muted { margin:10px 0; }
.source-add[open] .source-form { margin:12px 0 0; }
.source-card { border:1px solid var(--border); border-radius:8px; background:var(--panel); padding:16px 18px; }
.source-card-heading h3 { margin:0 0 5px; font-size:15px; }
.source-card-heading p,.source-note { margin:0 0 12px; color:var(--muted); font-size:12px; }
.source-sap-sample { display:flex; align-items:end; gap:10px; max-width:520px; margin:12px 0; }
.source-sap-sample label { flex:1; }
.source-card details { border-top:1px solid var(--border); padding:12px 0 0; margin-top:12px; }
.source-card details > summary { margin-bottom:8px; }
.source-card [data-fields] { overflow:auto; }
.source-advanced button { margin-top:4px; }
@media (max-width:560px) { .source-sap-sample { align-items:stretch; flex-direction:column; } .sap-sample-fields { grid-template-columns:1fr; } .sap-sample-field-head { display:none; } .sap-sample-field strong,.sap-sample-field > span { display:block; padding:7px 0 2px; border-bottom:0; } .sap-sample-field > span { padding:0 0 9px; border-bottom:1px solid var(--border); } .sap-rule-row { grid-template-columns:1fr; gap:6px; } }
.source-workflow { display:grid; gap:22px; width:100%; max-width:none; }
.source-choice { max-width:420px; }
.source-upload { display:grid; gap:14px; max-width:560px; }
.source-upload button { justify-self:start; }
.source-upload[hidden],#sapSourcePanel[hidden] { display:none; }
.sap-source-panel { padding:0; }
.sap-import-only { display:grid; justify-items:start; gap:12px; }
.sap-import-only .status-line { margin:0; }
.sap-import-only .sap-field-rules { width:100%; }
.sap-source-panel > p:first-child { color:var(--muted); font-size:13px; margin:0 0 12px; }
.sap-sample-result { margin-top:18px; border:1px solid var(--border); border-radius:8px; background:var(--panel); padding:18px; }
.sap-sample-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; }
.sap-sample-heading .eyebrow { margin-bottom:4px; }
.sap-sample-heading h2 { font-size:18px; margin:0; }
.sap-sample-section-title { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin:0 0 8px; }
.sap-sample-fields { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(0,1.5fr); border-top:1px solid var(--border); }
.sap-additional-fields { margin-top:16px; border-top:1px solid var(--border); padding-top:14px; }
.sap-additional-fields summary { cursor:pointer; color:var(--text); font-size:12px; font-weight:600; }
.sap-additional-fields .sap-sample-fields { margin-top:12px; }
.sap-sample-field-head,.sap-sample-field { display:contents; }
.sap-sample-field-head span,.sap-sample-field strong,.sap-sample-field > span { padding:9px 10px; border-bottom:1px solid var(--border); }
.sap-sample-field-head span { color:var(--muted); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.sap-sample-field strong { font-size:12px; font-weight:600; color:var(--text); }
.sap-sample-field > span { color:var(--text); overflow-wrap:anywhere; }
.sap-empty { color:var(--muted); font-style:italic; }
.sap-collection { color:var(--accent); font-weight:600; }
.sap-field-rules { margin-top:20px; border-top:1px solid var(--border); padding-top:18px; }
.sap-field-rules .section-heading { margin-bottom:12px; }
.sap-field-rules .section-heading h2 { font-size:16px; }
.sap-field-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
@media (max-width:680px) { .sap-field-toolbar { align-items:stretch; flex-direction:column; } .sap-field-toolbar .page-search { width:100%; } .sap-field-toolbar button { align-self:flex-start; } }
@media (min-width:761px) {
  .side-nav { position:sticky; top:59px; align-self:flex-start; height:calc(100vh - 59px); overflow-y:auto; }
  .sap-field-toolbar,.product-command-bar { position:sticky; top:59px; z-index:1; }
  .sap-field-toolbar { padding:10px 0; background:var(--panel); border-bottom:1px solid var(--border); }
}
.sap-rule-row[hidden] { display:none; }
.sap-rule-row { display:grid; grid-template-columns:minmax(220px,.55fr) minmax(360px,1.45fr); gap:18px; align-items:start; padding:12px 0; border-bottom:1px solid var(--border); }
.sap-rule-row.recommended { background:#fff8ed; border:1px solid #f1d0a0; border-radius:8px; margin:8px 0; padding:12px; }
.sap-rule-row .check-row { padding-top:8px; }
.sap-rule-row .check-row span { display:grid; gap:3px; }
.sap-rule-row .check-row em { color:var(--accent); font-size:11px; font-style:normal; font-weight:600; }
.sap-rule-row textarea { min-height:96px; }