:root {
  --ink: #17201f;
  --muted: #66716f;
  --faint: #8b9492;
  --line: #dfe5e3;
  --line-strong: #cbd4d1;
  --page: #f4f6f5;
  --panel: #ffffff;
  --panel-soft: #f8faf9;
  --brand: #12645d;
  --brand-dark: #0c4a45;
  --brand-soft: #e6f3f1;
  --blue: #286784;
  --blue-soft: #e8f2f7;
  --amber: #99651b;
  --amber-soft: #fff4dc;
  --red: #a13e39;
  --red-soft: #fff0ef;
  --green: #267148;
  --green-soft: #e8f4ec;
  --shadow: 0 8px 28px rgba(23, 32, 31, 0.07);
  --sidebar: 228px;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--page); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button { border: 0; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: wait; opacity: .55; }
button:focus-visible, [data-nav]:focus-visible { outline: 3px solid rgba(18, 100, 93, .24); outline-offset: 2px; }
input, select, textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--panel);
  outline: none;
}
textarea { min-height: 84px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(18, 100, 93, .12);
}
input[readonly] { color: var(--muted); background: #f2f4f3; }
input[type="checkbox"] { width: 17px; min-height: 17px; accent-color: var(--brand); }
h1, h2, h3, p, dl, dd, ol { margin: 0; }
h1 { font-size: 23px; line-height: 1.3; }
h2 { font-size: 18px; line-height: 1.35; }
h3 { font-size: 15px; }
p { color: var(--muted); line-height: 1.55; }
svg { width: 18px; height: 18px; flex: 0 0 auto; }

.button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.button.primary { color: #fff; border-color: var(--brand); background: var(--brand); }
.button.primary:hover { border-color: var(--brand-dark); background: var(--brand-dark); }
.button:active, .icon-button:active, .text-button:active, [data-nav]:active { transform: translateY(1px); }
.button.secondary { color: var(--ink); border-color: var(--line-strong); background: var(--panel); }
.button.secondary:hover { color: var(--brand-dark); border-color: #9abdb9; background: var(--brand-soft); }
.button.warning { color: #fff; border-color: var(--amber); background: var(--amber); }
.button.warning:hover { border-color: #805112; background: #805112; }
.button.danger-ghost { color: var(--red); border-color: #e6c2bf; background: #fff; }
.button.small { min-height: 34px; padding: 0 10px; font-size: 12px; }
.button.full { width: 100%; }
.text-button {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  color: var(--brand);
  background: transparent;
  font-weight: 700;
}
.icon-button {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 6px;
  color: var(--muted);
  background: transparent;
}
.icon-button:hover { color: var(--brand); background: var(--brand-soft); }
.icon-button.bordered { border: 1px solid var(--line); background: var(--panel); }
.icon-button.danger { color: var(--red); }
.icon-button.danger:hover { background: var(--red-soft); }

.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  display: flex;
  width: var(--sidebar);
  flex-direction: column;
  border-right: 1px solid #174f4b;
  padding: 20px 14px 14px;
  color: #fff;
  background: #113f3b;
}
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 24px; }
.sidebar-brand strong { display: block; font-size: 16px; }
.sidebar-brand span { display: block; margin-top: 2px; color: #b9d1ce; font-size: 12px; }
.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  color: #fff;
  background: #1b7d74;
  font-size: 14px;
  font-weight: 900;
}
.brand-mark.large { width: 52px; height: 52px; font-size: 18px; }
.side-nav { display: grid; gap: 5px; }
.nav-item {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 11px;
  border-radius: 6px;
  padding: 0 12px;
  color: #c8d9d7;
  background: transparent;
  text-align: left;
  font-weight: 700;
}
.nav-item:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.nav-item.active { color: #fff; background: #1b6d66; }
.sidebar-user {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 14px 4px 0;
}
.avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #fff; background: #2b7e77; font-weight: 800; }
.sidebar-user strong, .sidebar-user span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { font-size: 13px; }
.sidebar-user span { margin-top: 2px; color: #b9d1ce; font-size: 11px; }
.sidebar-user .icon-button { color: #c8d9d7; }

.workspace { min-width: 0; margin-left: var(--sidebar); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding: 10px 28px;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
}
.page-title span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.topbar-actions { display: flex; min-width: 0; align-items: center; gap: 10px; }
.mobile-scan-button { display: none; }
.reminder-button { position: relative; }
.reminder-button.has-reminders { color: var(--amber); border-color: #ddb878; background: var(--amber-soft); }
.reminder-button > b { position: absolute; top: -7px; right: -7px; display: grid; min-width: 19px; height: 19px; place-items: center; border: 2px solid #fff; border-radius: 10px; padding: 0 4px; color: #fff; background: var(--red); font-size: 9px; line-height: 1; }
.global-search, .search-field {
  display: flex;
  min-width: 260px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 10px;
  color: var(--muted);
  background: #fff;
}
.global-search input, .search-field input { min-height: 38px; border: 0; padding: 7px 0; box-shadow: none; background: transparent; }
.select-field {
  display: flex;
  width: 148px;
  min-height: 40px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 9px;
  color: var(--muted);
  background: #fff;
}
.select-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18, 100, 93, .12); }
.select-field select { width: 100% !important; min-width: 0; min-height: 38px; appearance: none; border: 0; padding: 6px 0; color: var(--ink); background: transparent; box-shadow: none; }
.select-field > svg { width: 16px; height: 16px; flex: 0 0 16px; }
.select-field > svg:last-child { width: 14px; height: 14px; flex-basis: 14px; color: var(--faint); }
.sync-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.sync-status > i, .status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3ca169; box-shadow: 0 0 0 3px rgba(60, 161, 105, .13); }
.sync-status.offline > i { background: var(--red); box-shadow: 0 0 0 3px rgba(161, 62, 57, .12); }
.mobile-brand, .mobile-nav { display: none; }

.page-content { width: min(1520px, 100%); margin: 0 auto; padding: 24px 28px 104px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.page-head h2 { font-size: 21px; }
.page-head p { margin-top: 3px; font-size: 13px; }
.page-head.compact { margin-bottom: 14px; }
.page-head-actions { display: flex; align-items: center; gap: 8px; }
.content-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.section-heading > div { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.section-heading span { color: var(--muted); font-size: 12px; }
.section-heading > strong { font-size: 19px; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-subhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 10px; }
.dashboard-subhead h2 { font-size: 16px; }
.dashboard-subhead .text-button { min-height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 9px; color: var(--brand-dark); background: #fff; font-size: 11px; }
.dashboard-subhead .text-button svg { width: 14px; height: 14px; }
.task-section > .section-heading .text-button { min-height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 9px; color: var(--brand-dark); background: #fff; font-size: 11px; }
.task-section > .section-heading .text-button svg { width: 14px; height: 14px; }
.sales-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.scan-lookup {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--panel);
}
.scan-lookup-title { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 9px; }
.scan-lookup-title > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 6px; color: var(--brand); background: var(--brand-soft); }
.scan-lookup-controls { display: flex; min-width: min(620px, 70%); align-items: center; justify-content: flex-end; gap: 8px; }
.lookup-field {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0 10px;
  color: var(--muted);
  background: #fff;
}
.lookup-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18, 100, 93, .12); }
.lookup-field input { min-height: 38px; border: 0; padding: 7px 0; box-shadow: none; background: transparent; text-transform: uppercase; }
.order-scan-button { flex: 0 0 auto; }
.metric-item {
  display: grid;
  min-width: 0;
  min-height: 102px;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  color: var(--ink);
  background: var(--panel);
  box-shadow: var(--shadow);
  text-align: left;
}
.metric-item:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.metric-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 7px; }
.metric-item small, .metric-item strong { display: block; }
.metric-item small { margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.metric-item strong { overflow: hidden; font-size: 22px; text-overflow: ellipsis; white-space: nowrap; }
.metric-item em { display: block; margin-top: 5px; overflow: hidden; color: var(--brand); font-size: 10px; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.metric-item > svg { width: 28px; height: 28px; border-radius: 50%; padding: 6px; color: var(--brand); background: var(--brand-soft); }
.metric-item.amber .metric-icon { color: var(--amber); background: var(--amber-soft); }
.metric-item.blue .metric-icon { color: var(--blue); background: var(--blue-soft); }
.metric-item.red .metric-icon { color: var(--red); background: var(--red-soft); }
.metric-item.green .metric-icon { color: var(--green); background: var(--green-soft); }
.metric-item.gray .metric-icon { color: #5f6a68; background: #eef1f0; }

.purchase-reminder-banner { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 14px; border: 1px solid #e5c88d; border-left: 4px solid var(--amber); border-radius: 8px; padding: 12px 14px; background: #fffaf0; }
.purchase-reminder-banner > span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 7px; color: var(--amber); background: var(--amber-soft); }
.purchase-reminder-banner strong, .purchase-reminder-banner small { display: block; }
.purchase-reminder-banner small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.purchase-reminder-banner.urgent { border-color: #e2b1ad; border-left-color: var(--red); background: #fff7f6; }
.purchase-reminder-banner.urgent > span { color: var(--red); background: var(--red-soft); }

.task-section, .orders-section { padding: 0; overflow: hidden; }
.task-section > .section-heading { padding: 18px 20px 0; }
.toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding: 16px 18px; }
.toolbar-fields { display: flex; align-items: center; gap: 9px; }
.toolbar-fields .select-field { flex: 0 0 auto; }
.segmented { display: inline-flex; align-items: stretch; gap: 3px; border: 1px solid var(--line); border-radius: 7px; padding: 3px; background: var(--panel-soft); }
.segmented button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 6px; border-radius: 5px; padding: 0 12px; color: var(--muted); background: transparent; font-weight: 700; }
.segmented button.active { color: var(--brand-dark); background: #fff; box-shadow: 0 1px 4px rgba(23, 32, 31, .1); }
.segmented button b { display: inline-grid; min-width: 20px; height: 20px; place-items: center; border-radius: 10px; padding: 0 5px; color: var(--muted); background: #e8eceb; font-size: 11px; }
.segmented button.active b { color: #fff; background: var(--brand); }
.date-filter { display: flex; min-height: 56px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding: 10px 18px; }
.date-filter > span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.date-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.date-chips button { min-height: 30px; border-radius: 5px; padding: 0 10px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; }
.date-chips button:hover { color: var(--brand); background: var(--brand-soft); }
.date-chips button.active { color: #fff; background: var(--brand); }
.custom-dates { display: flex; align-items: center; gap: 7px; }
.custom-dates input { width: 145px; min-height: 34px; }
.custom-dates span { color: var(--muted); font-size: 12px; }

.order-list-head, .order-row {
  display: grid;
  grid-template-columns: 1.15fr 1.7fr 1.15fr 1fr .78fr .85fr;
  align-items: center;
  gap: 14px;
}
.order-list-head { min-height: 42px; padding: 0 20px; color: var(--muted); background: var(--panel-soft); font-size: 12px; font-weight: 700; }
.order-row { width: 100%; min-height: 78px; border-top: 1px solid var(--line); padding: 12px 20px; color: var(--ink); background: #fff; text-align: left; }
.order-list-head + .order-row { border-top: 0; }
.order-row:hover { background: #f7fbfa; }
.order-row.overdue-order { border-left: 3px solid #d6a24f; }
.order-row strong, .order-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-row strong { font-size: 13px; }
.order-row small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.order-number strong { color: var(--brand-dark); }
.order-goods strong { font-size: 14px; }
.row-action { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; color: var(--brand); font-size: 12px; font-weight: 700; }
.row-action svg { width: 15px; }
.order-reminder-note { display: block !important; width: fit-content; margin-top: 5px !important; color: var(--amber) !important; white-space: normal !important; }
.order-reminder-note.urgent { color: var(--red) !important; }
.mobile-order-list { display: none; }
.sales-list-head, .sales-row { display: grid; grid-template-columns: 1.15fr 1.35fr 1.45fr .85fr .7fr .8fr; align-items: center; gap: 14px; }
.sales-list-head { min-height: 42px; padding: 0 20px; color: var(--muted); background: var(--panel-soft); font-size: 12px; font-weight: 700; }
.sales-row { width: 100%; min-height: 78px; border-top: 1px solid var(--line); padding: 12px 20px; color: var(--ink); background: #fff; text-align: left; }
.sales-list-head + .sales-row { border-top: 0; }
.sales-row:hover { background: #f7fbfa; }
.sales-row strong, .sales-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sales-row strong { font-size: 13px; }
.sales-row small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.status-pill { display: inline-flex; width: fit-content; min-height: 26px; align-items: center; gap: 6px; border-radius: 13px; padding: 0 9px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.neutral { color: #65706d; background: #eef1f0; }
.status-pill.warning { color: var(--amber); background: var(--amber-soft); }
.status-pill.info { color: var(--blue); background: var(--blue-soft); }
.status-pill.danger { color: var(--red); background: var(--red-soft); }
.status-pill.success { color: var(--green); background: var(--green-soft); }

.empty-state { display: grid; min-height: 220px; place-items: center; align-content: center; gap: 10px; padding: 24px; color: var(--muted); text-align: center; }
.empty-state svg { width: 34px; height: 34px; color: #9da7a5; }
.empty-state strong { font-size: 14px; font-weight: 600; }
.center-actions { display: flex; justify-content: center; padding-bottom: 20px; }

.back-button { display: inline-flex; min-height: 34px; align-items: center; gap: 6px; margin-bottom: 10px; padding: 0; color: var(--muted); background: transparent; font-weight: 700; }
.back-button:hover { color: var(--brand); }
.order-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.title-line { display: flex; align-items: center; gap: 10px; }
.order-detail-head h2 { font-size: 22px; }
.order-detail-head p { margin-top: 5px; font-size: 12px; }
.detail-head-actions { display: flex; align-items: center; gap: 8px; }
.reminder-action { color: #7b4d0d; border: 1px solid #ddb878; background: var(--amber-soft); }
.reminder-action:hover { color: #623b06; border-color: var(--amber); background: #ffe9bd; }
.process-line { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); max-width: 720px; margin: 0 auto 20px; padding: 0; list-style: none; }
.process-line::before { position: absolute; top: 16px; right: 12.5%; left: 12.5%; height: 2px; background: var(--line-strong); content: ""; }
.process-line li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; color: var(--faint); font-size: 12px; }
.process-line li > span { display: grid; width: 33px; height: 33px; place-items: center; border: 2px solid var(--line-strong); border-radius: 50%; color: var(--muted); background: var(--page); font-weight: 800; }
.process-line li > span svg { width: 16px; }
.process-line li.active, .process-line li.done { color: var(--brand-dark); }
.process-line li.active > span { color: #fff; border-color: var(--brand); background: var(--brand); }
.process-line li.done > span { color: #fff; border-color: var(--green); background: var(--green); }

.document-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 14px; }
.document-main, .document-aside { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.compact-section { padding: 16px; box-shadow: none; }
.aside-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.aside-title > span { color: var(--muted); font-size: 12px; }
.document-meta { display: grid; gap: 10px; }
.document-meta > div { border-bottom: 1px solid var(--line); padding-bottom: 9px; }
.document-meta > div:last-child { border: 0; padding-bottom: 0; }
.document-meta dt { margin-bottom: 3px; color: var(--muted); font-size: 11px; }
.document-meta dd { overflow-wrap: anywhere; font-weight: 700; }
.timeline { display: grid; gap: 0; padding: 0; list-style: none; }
.timeline li { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 9px; min-height: 54px; }
.timeline li:not(:last-child)::after { position: absolute; top: 12px; bottom: 0; left: 4px; width: 1px; background: var(--line-strong); content: ""; }
.timeline li > i { position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 4px; border: 2px solid var(--brand); border-radius: 50%; background: #fff; }
.timeline strong, .timeline span { display: block; }
.timeline strong { font-size: 12px; line-height: 1.45; }
.timeline span { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.45; }

label { display: grid; gap: 6px; color: #3f4b49; font-size: 12px; font-weight: 700; }
.form-grid { display: grid; gap: 12px; }
.form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-two { grid-column: span 2; }
.span-three { grid-column: span 3; }
.span-four { grid-column: span 4; }
.form-stack { display: grid; gap: 13px; }
.form-subtitle { margin-top: 4px; font-size: 12px; }
.block-field { margin-top: 14px; }
.live-total { color: var(--brand-dark); }

.lines-section { padding: 0; overflow: hidden; }
.lines-section > .section-heading { padding: 18px 20px 0; }
.line-editors { display: grid; }
.line-editor {
  position: relative;
  display: grid;
  grid-template-columns: 34px repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding: 14px 16px;
  background: #fff;
}
.line-editor:first-child { border-top: 0; }
.line-editor:hover { background: #fbfcfc; }
.product-input-row { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 7px; }
.choose-product-button { min-width: 72px; align-self: stretch; }
.compact-line-textarea { min-height: 54px; resize: vertical; line-height: 1.45; overflow-wrap: anywhere; }
.request-line, .sales-line { padding-right: 0; }
.request-line .product-field, .sales-line .product-field { grid-column: 2 / 8; }
.request-line .purchase-spec-field, .sales-line .sale-spec-field { grid-column: 8 / 11; }
.request-line .purchase-unit-field, .sales-line .sale-unit-field { grid-column: 11 / 14; }
.request-line .purchase-qty-field, .sales-line .sale-qty-field { grid-column: 2 / 5; }
.request-line .purchase-price-field, .sales-line .sale-price-field { grid-column: 5 / 8; }
.request-line .line-remove { position: static; grid-row: 3; grid-column: 13 / 14; justify-self: end; }
.sales-line .line-tools { position: static; grid-row: 3; grid-column: 10 / 14; justify-self: end; }
.line-tools { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.line-tools .icon-button { width: 34px; height: 34px; flex: 0 0 34px; }
.save-line-product { min-height: 34px; border: 1px solid #c8ddd9; padding: 0 8px; color: var(--brand-dark); background: #edf7f5; font-size: 11px; white-space: nowrap; }
.line-index { display: grid; width: 28px; height: 28px; place-items: center; align-self: center; border-radius: 50%; color: var(--muted); background: #eef1f0; font-size: 11px; font-weight: 800; }
.line-remove { align-self: end; border: 1px solid #eed0ce; color: var(--red); background: var(--red-soft); }
.line-requirement { grid-column: 8 / 12; }
.line-subtotal { grid-column: 12 / 14; align-self: center; justify-self: end; overflow-wrap: anywhere; font-size: 12px; text-align: right; }
.purchase-line .line-requirement { grid-column: 8 / 12; }
.line-spacer { width: 36px; }

.sticky-action-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: var(--sidebar);
  z-index: 25;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line-strong);
  padding: 10px 28px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -8px 24px rgba(23, 32, 31, .08);
  backdrop-filter: blur(12px);
}
.sticky-action-bar > div:first-child span, .sticky-action-bar > div:first-child strong { display: block; }
.sticky-action-bar > div:first-child span { color: var(--muted); font-size: 11px; }
.sticky-action-bar > div:first-child strong { margin-top: 3px; font-size: 19px; }
.sticky-buttons { display: flex; align-items: center; gap: 8px; }
.text-danger { color: var(--red); }
.text-success { color: var(--green); }

.check-section { padding: 0; overflow: hidden; }
.check-section > .section-heading { padding: 18px 20px 0; }
.receipt-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 18px 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--line); }
.receipt-summary > div { padding: 9px 11px; background: var(--panel-soft); }
.receipt-summary span, .receipt-summary strong { display: block; }
.receipt-summary span { margin-bottom: 3px; color: var(--muted); font-size: 10px; }
.receipt-summary strong { font-size: 16px; }
.receipt-summary .danger strong { color: var(--red); }
.inspection-list { display: grid; }
.inspection-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto; align-items: center; gap: 14px; border-top: 1px solid var(--line); padding: 14px 18px; }
.inspection-row.has-issue { background: #fffafa; }
.inspection-product { display: flex; min-width: 0; align-items: center; gap: 10px; }
.inspection-product > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--muted); background: #eef1f0; font-size: 11px; font-weight: 800; }
.inspection-product strong, .inspection-product small { display: block; }
.inspection-product strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inspection-product small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.inspection-choice button { min-width: 126px; font-size: 12px; }
.inspection-choice button.active.success { color: var(--green); background: var(--green-soft); }
.inspection-choice button.active.danger { color: var(--red); background: var(--red-soft); }
.inspection-inputs { display: grid; grid-column: 1 / -1; grid-template-columns: 110px 110px 110px minmax(220px, 1fr); gap: 10px; border-top: 1px dashed #e4c9c6; padding-top: 12px; }
.inspection-ok { display: flex; grid-column: 1 / -1; align-items: center; gap: 7px; color: var(--green); font-size: 12px; font-weight: 700; }
.evidence-section { min-width: 0; }
.method-switch { margin-bottom: 15px; }
.method-switch button { min-width: 130px; }
.check-person-fields { margin-bottom: 14px; }
.evidence-panel { border: 1px solid var(--line); border-radius: 7px; padding: 14px; background: var(--panel-soft); }
.confirm-line { display: flex; min-height: 44px; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
.confirm-line > span { display: inline-flex; align-items: center; gap: 7px; }
.optional-upload { display: flex; align-items: center; gap: 10px; margin-top: 10px; border-top: 1px dashed var(--line-strong); padding-top: 12px; }
.optional-upload > span { color: var(--muted); font-size: 11px; }
.file-button { cursor: pointer; }
.file-button input { display: none; }
.attachment-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.attachment-list > span { display: inline-flex; max-width: 100%; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 4px 5px 4px 9px; color: var(--muted); background: #fff; font-size: 11px; }
.attachment-list b { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-list .icon-button { width: 26px; height: 26px; }
.signature-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
#signatureCanvas { display: block; width: 100%; height: 190px; margin-top: 4px; background: #fff; touch-action: none; cursor: crosshair; }
.signature-line { height: 1px; margin: -25px 30px 24px; background: #aab2b0; pointer-events: none; }
.force-close-panel { margin-top: 14px; border: 1px solid #e7bcb8; border-left: 4px solid var(--red); border-radius: 7px; padding: 13px; background: var(--red-soft); }
.force-close-panel > div { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--red); }
.force-close-panel textarea { background: #fff; }
.receipt-records { display: grid; }
.receipt-records > div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: start; gap: 9px; border-bottom: 1px solid var(--line); padding: 10px 0; }
.receipt-records > div:last-child { border-bottom: 0; }
.record-dot { width: 9px; height: 9px; margin-top: 4px; border: 2px solid var(--brand); border-radius: 50%; background: #fff; }
.receipt-records strong, .receipt-records small { display: block; }
.receipt-records small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.receipt-records em { color: var(--muted); font-size: 11px; font-style: normal; white-space: nowrap; }

.exception-summary { border-color: #ebc9c6; }
.issue-list { display: grid; gap: 9px; }
.issue-list > div { display: grid; grid-template-columns: 1.3fr 1.6fr; gap: 6px 16px; border-left: 3px solid var(--red); padding: 9px 12px; background: var(--red-soft); }
.issue-list span { color: var(--muted); font-size: 12px; }
.issue-list p { grid-column: 1 / -1; color: var(--red); font-size: 12px; }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.summary-grid > div { border: 1px solid var(--line); border-radius: 6px; padding: 10px; background: var(--panel-soft); }
.summary-grid span, .summary-grid strong { display: block; }
.summary-grid span { margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.summary-grid strong { overflow-wrap: anywhere; }
.table-scroll { overflow-x: auto; }
table { width: 100%; min-width: 760px; border-collapse: collapse; }
th, td { border-bottom: 1px solid var(--line); padding: 11px 10px; text-align: left; vertical-align: top; }
th { color: var(--muted); background: var(--panel-soft); font-size: 11px; }
td { font-size: 12px; }
.table-sku, .line-sku { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
.completion-proof .signature-preview { display: block; width: min(360px, 100%); height: 120px; object-fit: contain; object-position: left center; border-bottom: 1px solid var(--line-strong); }
.forced-completion { border-color: #e7bcb8; }
.forced-completion p { color: var(--red); white-space: pre-wrap; }
.forced-completion > small { display: block; margin-top: 8px; color: var(--muted); }
.proof-line { display: flex; align-items: center; gap: 8px; color: var(--green); font-weight: 700; }

.product-table { display: grid; }
.product-table-head, .product-row { display: grid; grid-template-columns: 1.3fr .8fr .55fr 1.4fr 90px; align-items: center; gap: 14px; }
.product-table-head { min-height: 38px; border-bottom: 1px solid var(--line); padding: 0 10px; color: var(--muted); background: var(--panel-soft); font-size: 11px; font-weight: 700; }
.product-row { min-height: 68px; border-bottom: 1px solid var(--line); padding: 10px; }
.product-row:last-child { border-bottom: 0; }
.product-row > div:first-child strong, .product-row > div:first-child small { display: block; }
.product-row > div:first-child small { margin-top: 4px; color: var(--green); font-size: 10px; }
.product-row > span { min-width: 0; color: var(--muted); }
.product-row > div:last-child { display: flex; justify-content: flex-end; gap: 6px; }
.product-spec-list { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible !important; white-space: normal !important; }
.product-spec-chip { display: inline-grid; max-width: 100%; gap: 2px; border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px; color: var(--ink); background: var(--panel-soft); }
.product-spec-chip b, .product-spec-chip small, .product-spec-chip em { overflow-wrap: anywhere; font-style: normal; line-height: 1.35; }
.product-spec-chip b { font-size: 11px; }
.product-spec-chip small { color: var(--muted); font-size: 9px; }
.product-spec-chip em { color: var(--brand); font-size: 10px; font-weight: 700; }

.modal { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 40px); border: 0; border-radius: 8px; padding: 0; color: var(--ink); background: transparent; box-shadow: 0 22px 70px rgba(17, 35, 33, .26); }
.modal::backdrop { background: rgba(13, 27, 26, .52); backdrop-filter: blur(3px); }
.modal-box { max-height: calc(100vh - 40px); overflow: auto; border-radius: 8px; padding: 20px; background: #fff; }
.small-modal { width: min(440px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.modal-head p { margin-top: 4px; font-size: 12px; }
.modal-section-head { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.spec-list { display: grid; gap: 8px; }
.spec-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(110px, .7fr) 36px; align-items: end; gap: 8px; }
.product-enabled { margin-top: 15px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; border-top: 1px solid var(--line); padding-top: 15px; }
.scanner-modal { width: min(590px, calc(100vw - 32px)); }
.scanner-modal-box { overflow: hidden; }
.scanner-reader {
  display: grid;
  min-height: 300px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #263331 !important;
  border-radius: 7px;
  color: #d9e4e2;
  background: #111918;
}
.scanner-reader video { display: block; width: 100% !important; max-height: 390px; object-fit: cover; }
.scanner-reader img { max-width: 100%; max-height: 360px; object-fit: contain; }
.scanner-reader > div { max-width: 100%; }
.scanner-placeholder { display: grid; place-items: center; gap: 9px; color: #c8d9d7; }
.scanner-placeholder svg { width: 30px; height: 30px; }
.scanner-status { min-height: 20px; margin-top: 10px; color: var(--green); font-size: 12px; font-weight: 700; text-align: center; }
.scanner-status.error { color: var(--red); }
.scanner-actions { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.scanner-file-button { position: relative; cursor: pointer; }
.scanner-file-button input { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; opacity: 0; pointer-events: none; }
.scanner-lookup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
.product-picker-modal { width: min(820px, calc(100vw - 32px)); height: min(760px, calc(100dvh - 32px)); max-height: none; overflow: hidden; }
.product-picker-box { display: grid; width: 100%; height: 100%; min-height: 0; max-height: none; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
.product-picker-box .modal-head { min-width: 0; flex: 0 0 auto; }
.picker-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 6px; padding: 0 10px; }
.picker-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18, 100, 93, .12); }
.picker-search input { border: 0; padding-right: 0; padding-left: 0; box-shadow: none !important; }
.product-picker-list { display: grid; min-width: 0; min-height: 0; height: 100%; grid-auto-rows: max-content; align-content: start; gap: 10px; overflow-x: hidden; overflow-y: scroll; overscroll-behavior: contain; margin-top: 12px; padding: 1px 8px 12px 1px; scrollbar-gutter: stable; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.picker-product { min-width: 0; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.picker-product[hidden] { display: none; }
.picker-product-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; background: var(--panel-soft); }
.picker-product-head > div { min-width: 0; }
.picker-product-head strong, .picker-product-head span { display: block; overflow-wrap: anywhere; }
.picker-product-head strong { font-size: 14px; line-height: 1.5; white-space: normal; }
.picker-product-head span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.picker-specs { display: grid; }
.picker-specs button { display: grid; min-width: 0; min-height: 56px; grid-template-columns: minmax(0, 1fr) minmax(84px, max-content) 18px; align-items: center; gap: 10px; border-top: 1px solid var(--line); padding: 11px 13px; color: var(--ink); background: #fff; text-align: left; }
.picker-specs button:first-child { border-top: 0; }
.picker-specs button:hover { background: var(--brand-soft); }
.picker-specs button > span, .picker-specs button > strong { min-width: 0; overflow-wrap: anywhere; white-space: normal; line-height: 1.4; }
.picker-specs button > strong { color: var(--brand-dark); font-size: 12px; text-align: right; white-space: nowrap; }
.picker-specs button > svg { flex: 0 0 auto; }
.picker-specs button strong { color: var(--brand-dark); font-size: 12px; }
.picker-spec-main { display: grid; gap: 3px; }
.picker-spec-main b { font-size: 12px; overflow-wrap: anywhere; }
.picker-spec-main small { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.picker-actions { flex: 0 0 auto; margin-top: 0; background: #fff; }

.report-filter-section { margin-bottom: 14px; padding: 0; overflow: hidden; }
.report-mode { display: flex; margin-bottom: 10px; }
.report-filter-section .date-filter { border-bottom: 0; }
.report-metrics .report-metric { display: flex; min-height: 94px; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: #fff; box-shadow: var(--shadow); }
.report-metric > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 7px; color: var(--blue); background: var(--blue-soft); }
.report-metric small, .report-metric strong { display: block; }
.report-metric small { margin-bottom: 5px; color: var(--muted); font-size: 11px; }
.report-metric strong { font-size: 20px; }
.report-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .8fr); gap: 14px; }
.bar-chart { display: grid; gap: 13px; }
.bar-row { display: grid; grid-template-columns: minmax(100px, 150px) minmax(120px, 1fr) 90px; align-items: center; gap: 10px; }
.bar-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.bar-row > div { height: 10px; overflow: hidden; border-radius: 5px; background: #edf1f0; }
.bar-row i { display: block; height: 100%; border-radius: 5px; background: var(--blue); }
.bar-row strong { text-align: right; font-size: 11px; }
.rank-section ol { display: grid; gap: 5px; padding: 0; list-style: none; }
.rank-section li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); padding: 9px 0; }
.rank-section li:last-child { border-bottom: 0; }
.rank-section li > b { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; color: var(--brand); background: var(--brand-soft); font-size: 10px; }
.rank-section strong, .rank-section small { display: block; }
.rank-section small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.rank-section em { color: var(--muted); font-size: 11px; font-style: normal; }

.settings-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .8fr); align-items: start; gap: 14px; }
.settings-section { grid-row: span 2; }
.reminder-settings { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 2px; }
.reminder-number-grid { margin-top: 10px; }
.notification-log-list { display: grid; margin: -4px 0; }
.notification-log-list > button { display: grid; width: 100%; min-height: 58px; grid-template-columns: auto minmax(0, 1fr) 18px; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); padding: 8px 0; color: var(--ink); background: transparent; text-align: left; }
.notification-log-list > button:last-child { border-bottom: 0; }
.notification-log-list > button:hover { background: var(--panel-soft); }
.notification-log-list strong, .notification-log-list small { display: block; overflow-wrap: anywhere; }
.notification-log-list small { margin-top: 4px; color: var(--muted); font-size: 10px; }

.reminder-modal { width: min(760px, calc(100vw - 32px)); }
.reminder-modal-box { overflow: hidden; }
.reminder-list { display: grid; max-height: min(62vh, 560px); gap: 8px; overflow-y: auto; padding-right: 3px; }
.reminder-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid #ead8b5; border-left: 4px solid var(--amber); border-radius: 7px; padding: 12px; background: #fffaf2; }
.reminder-row.urgent { border-color: #e6c1be; border-left-color: var(--red); background: #fff7f6; }
.reminder-row-main { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; }
.reminder-row-main > span { border-radius: 4px; padding: 4px 6px; color: #7b4d0d; background: var(--amber-soft); font-size: 10px; font-weight: 800; }
.reminder-row.urgent .reminder-row-main > span { color: var(--red); background: var(--red-soft); }
.reminder-row-main strong, .reminder-row-main small, .reminder-row-main em { display: block; min-width: 0; overflow-wrap: anywhere; }
.reminder-row-main small { margin-top: 4px; color: var(--ink); font-size: 11px; }
.reminder-row-main em { margin-top: 4px; color: var(--muted); font-size: 10px; font-style: normal; }
.reminder-row-actions { display: flex; gap: 7px; }
.switch-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.switch-row { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid var(--line); border-radius: 6px; padding: 0 11px; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row i { position: relative; width: 38px; height: 22px; flex: 0 0 auto; border-radius: 11px; background: #c8cecc; transition: .18s; }
.switch-row i::after { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; content: ""; transition: .18s; }
.switch-row input:checked + i { background: var(--brand); }
.switch-row input:checked + i::after { transform: translateX(16px); }
.account-list { display: grid; gap: 6px; }
.account-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px 36px; align-items: center; gap: 9px; border-bottom: 1px solid var(--line); padding: 9px 0; }
.account-row:last-child { border-bottom: 0; }
.account-row strong, .account-row small { display: block; }
.account-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.system-status-section dl { display: grid; gap: 10px; }
.system-status-section dl > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding-bottom: 9px; }
.system-status-section dl > div:last-child { border-bottom: 0; }
.system-status-section dt { color: var(--muted); font-size: 12px; }
.system-status-section dd { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-align: right; }
.mobile-logout { margin-top: 14px; }

.toast { position: fixed; z-index: 100; right: 22px; bottom: 90px; max-width: min(380px, calc(100vw - 28px)); transform: translateY(16px); border: 1px solid #a7d1b6; border-radius: 7px; padding: 11px 14px; color: #1f6940; background: #eff9f2; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .2s; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { color: var(--red); border-color: #e5b8b4; background: var(--red-soft); }

.login-page { display: grid; min-height: 100vh; place-items: center; padding: 24px; background: #edf2f0; }
.login-layout { display: grid; width: min(920px, 100%); grid-template-columns: minmax(0, 1fr) 370px; align-items: stretch; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; box-shadow: 0 24px 70px rgba(23, 52, 49, .13); }
.login-brand { display: flex; min-height: 440px; align-items: center; gap: 16px; padding: 42px; color: #fff; background: #123f3b; }
.login-brand h1 { margin-top: 7px; font-size: 29px; }
.brand-kicker { color: #b8d0cd; font-size: 11px; font-weight: 800; }
.login-box { display: grid; align-content: center; gap: 16px; padding: 36px; background: #fff; }
.login-box h2 { font-size: 20px; }
.form-message { min-height: 20px; color: var(--red); font-size: 12px; }
.form-message.scan-ready { color: var(--green); }
.login-divider { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 11px; }
.login-divider::before, .login-divider::after { height: 1px; flex: 1; background: var(--line); content: ""; }
.loading-box { width: min(420px, 100%); min-height: 220px; place-items: center; align-content: center; border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.loading-line { width: 140px; height: 3px; overflow: hidden; border-radius: 2px; background: #e2e8e6; }
.loading-line::after { display: block; width: 50%; height: 100%; background: var(--brand); animation: loading 1s infinite alternate ease-in-out; content: ""; }
@keyframes loading { from { transform: translateX(0); } to { transform: translateX(100%); } }

.print-sheet { display: none; }

.required-mark { color: var(--red); font-weight: 700; }
.input-error { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgb(190 55 55 / 12%) !important; }

@media (max-width: 1250px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .document-layout { grid-template-columns: minmax(0, 1fr) 250px; }
  .line-editor { grid-template-columns: 30px repeat(12, minmax(0, 1fr)); gap: 7px; }
  .topbar { padding-right: 20px; padding-left: 20px; }
  .page-content { padding-right: 20px; padding-left: 20px; }
  .global-search { min-width: 210px; }
  .sync-status { display: none; }
}

@media (max-width: 1040px) {
  :root { --sidebar: 76px; }
  .sidebar { width: var(--sidebar); padding: 16px 10px; }
  .sidebar-brand { justify-content: center; padding: 0 0 22px; }
  .sidebar-brand > div:last-child, .nav-item span, .sidebar-user > div:nth-child(2), .sidebar-user .icon-button { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .sidebar-user { grid-template-columns: 1fr; justify-items: center; padding-right: 0; padding-left: 0; }
  .order-list-head, .order-row { grid-template-columns: 1.1fr 1.7fr 1fr .9fr .8fr; }
  .order-list-head span:last-child, .order-row .row-action { display: none; }
  .sales-list-head, .sales-row { grid-template-columns: 1.05fr 1.25fr 1.35fr .8fr .7fr; }
  .sales-list-head span:last-child, .sales-row .row-action { display: none; }
  .document-layout { grid-template-columns: minmax(0, 1fr); }
  .document-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .line-editor { grid-template-columns: 30px repeat(12, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-section { grid-row: auto; }
}

@media (max-width: 820px) {
  body { padding-bottom: 70px; }
  .sidebar { display: none; }
  .workspace { margin-left: 0; }
  .topbar { position: sticky; display: block; min-height: 64px; padding: 10px 12px; }
  .mobile-brand { display: flex; align-items: center; gap: 9px; }
  .mobile-brand .brand-mark { width: 34px; height: 34px; }
  .page-title { display: none; }
  .topbar-actions { position: absolute; top: 11px; right: 12px; }
  .global-search, .sync-status, .new-order-button { display: none; }
  .mobile-scan-button { display: grid; color: var(--brand-dark); background: #fff; }
  .page-content { padding: 14px 10px 100px; }
  .mobile-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: grid;
    height: calc(66px + env(safe-area-inset-bottom));
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid var(--line-strong);
    padding: 5px 6px env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 -6px 22px rgba(23, 32, 31, .08);
  }
  .mobile-nav-item { display: grid; min-width: 0; place-items: center; align-content: center; gap: 3px; padding: 0; color: var(--muted); background: transparent; font-size: 9px; }
  .mobile-nav-item svg { width: 20px; height: 20px; }
  .mobile-nav-item.active { color: var(--brand); }
  .mobile-nav-item.primary svg { width: 34px; height: 34px; margin-top: -18px; border: 6px solid #fff; border-radius: 50%; color: #fff; background: var(--brand); stroke-width: 1.5; }
  .page-head { align-items: flex-start; margin-bottom: 12px; }
  .page-head h2 { font-size: 19px; }
  .page-head .button { min-height: 36px; padding: 0 10px; font-size: 12px; }
  .page-head-actions { align-items: stretch; flex-direction: column; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
  .dashboard-subhead { margin-top: 8px; }
  .scan-lookup { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 10px; margin-bottom: 10px; padding: 11px; }
  .scan-lookup-title > span { width: 32px; height: 32px; }
  .scan-lookup-controls { width: 100%; min-width: 0; justify-self: stretch; justify-content: stretch; }
  .metric-item { min-height: 90px; grid-template-columns: 36px minmax(0, 1fr) 28px; gap: 8px; padding: 11px; box-shadow: none; }
  .metric-item > svg { display: block; width: 28px; height: 28px; }
  .metric-icon { width: 36px; height: 36px; }
  .metric-icon svg { width: 17px; }
  .metric-item small { font-size: 10px; }
  .metric-item strong { font-size: 17px; }
  .metric-item em { margin-top: 3px; font-size: 9px; }
  .purchase-reminder-banner { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; padding: 10px; }
  .purchase-reminder-banner > span { width: 34px; height: 34px; }
  .purchase-reminder-banner .button { grid-column: 1 / -1; width: 100%; }
  .content-section { padding: 14px; box-shadow: none; }
  .task-section, .orders-section, .lines-section, .check-section { padding: 0; }
  .task-section > .section-heading, .lines-section > .section-heading, .check-section > .section-heading { padding: 14px 14px 0; }
  .section-heading { align-items: flex-start; margin-bottom: 12px; }
  .section-heading > div { display: block; }
  .section-heading span { display: block; margin-top: 3px; }
  .toolbar-row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; justify-content: stretch; gap: 10px; padding: 12px; }
  .toolbar-fields { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) 42px; gap: 8px; }
  .sales-toolbar-fields { grid-template-columns: minmax(0, 1fr) 42px; }
  .toolbar-fields .search-field { min-width: 0; min-height: 42px; border-radius: 8px; }
  .toolbar-fields .order-scan-button { width: 42px; height: 42px; border-radius: 8px; }
  .toolbar-fields .select-field { width: 100%; min-height: 42px; grid-column: 1 / -1; border-radius: 8px; }
  .order-groups { width: 100%; }
  .order-groups button { flex: 1; }
  .date-filter { align-items: flex-start; overflow: hidden; padding: 9px 10px; }
  .date-filter > span { display: none; }
  .date-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .date-chips button { flex: 0 0 auto; }
  .custom-dates { grid-column: 1 / -1; }
  .custom-dates input { width: min(42vw, 160px); }
  .desktop-order-list { display: none; }
  .mobile-order-list { display: grid; }
  .task-section .order-list-head { display: none; }
  .task-section .order-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr auto; min-height: 84px; gap: 8px; padding: 11px 13px; }
  .task-section .order-row .order-owner, .task-section .order-row .order-amount, .task-section .order-row .row-action { display: none; }
  .mobile-order-card { display: grid; width: 100%; gap: 7px; border-bottom: 1px solid var(--line); padding: 13px; color: var(--ink); background: #fff; text-align: left; touch-action: manipulation; }
  .mobile-order-card.overdue-order { border-left: 3px solid #d6a24f; }
  .mobile-order-card:last-child { border-bottom: 0; }
  .mobile-card-top, .mobile-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .mobile-order-card > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-order-card > span:not(.mobile-card-top):not(.mobile-card-bottom) { color: var(--muted); font-size: 11px; }
  .mobile-card-bottom small { color: var(--muted); }
  .mobile-reminder-note { display: inline-flex !important; align-items: center; gap: 5px; border-radius: 5px; padding: 6px 8px; color: var(--amber) !important; background: var(--amber-soft); font-weight: 700; }
  .mobile-reminder-note.urgent { color: var(--red) !important; background: var(--red-soft); }
  .mobile-reminder-note svg { width: 13px; height: 13px; }
  .order-detail-head { display: grid; }
  .detail-head-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) 38px; }
  .sales-detail-head .detail-head-actions { grid-template-columns: minmax(0, 1fr) 38px 38px; }
  .detail-head-actions .button { min-height: 36px; padding: 0 8px; font-size: 11px; }
  .process-line { margin-bottom: 14px; }
  .process-line li > span { width: 29px; height: 29px; }
  .process-line::before { top: 14px; }
  .process-line li b { font-size: 10px; }
  .document-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .document-main { gap: 10px; }
  .document-aside { grid-template-columns: 1fr; gap: 10px; }
  .history-section { order: 2; }
  .form-grid.four, .form-grid.three, .form-grid.two { grid-template-columns: 1fr; }
  .span-two, .span-three, .span-four { grid-column: auto; }
  .line-editor { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 14px 12px 14px 42px; }
  .request-line, .sales-line { padding-right: 12px; }
  .sales-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .line-index { position: absolute; top: 16px; left: 9px; }
  .line-editor .product-field, .line-editor .line-requirement { grid-column: 1 / -1; }
  .request-line .purchase-spec-field, .sales-line .sale-spec-field,
  .request-line .purchase-unit-field, .sales-line .sale-unit-field,
  .request-line .purchase-qty-field, .sales-line .sale-qty-field,
  .request-line .purchase-price-field, .sales-line .sale-price-field { grid-column: auto; }
  .line-editor .line-remove { position: absolute; top: 12px; right: 10px; width: 34px; }
  .request-line .line-remove { grid-row: auto; grid-column: auto; }
  .line-editor .product-field { padding-right: 38px; }
  .sales-line .product-field { padding-right: 0; }
  .sales-line .line-tools { position: static; grid-row: auto; grid-column: 1 / -1; justify-self: end; }
  .sales-line .line-tools .line-remove { position: static; }
  .line-editor .line-spacer { display: none; }
  .line-subtotal { grid-column: 2; align-self: end; min-height: 40px; padding-top: 12px; text-align: right; }
  .purchase-line .line-requirement { grid-column: 1 / -1; }
  .sticky-action-bar { right: 0; bottom: calc(66px + env(safe-area-inset-bottom)); left: 0; min-height: 68px; padding: 9px 10px; }
  .sticky-action-bar > div:first-child { min-width: 82px; }
  .sticky-action-bar > div:first-child strong { font-size: 15px; }
  .sticky-buttons { min-width: 0; justify-content: flex-end; }
  .sticky-buttons .button { min-height: 40px; padding: 0 10px; font-size: 11px; }
  .sticky-buttons .danger-ghost { display: none; }
  .inspection-row { grid-template-columns: 1fr; gap: 10px; padding: 13px; }
  .inspection-choice { width: 100%; }
  .inspection-choice button { min-width: 0; flex: 1; padding: 0 7px; font-size: 10px; }
  .inspection-inputs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inspection-inputs .issue-note { grid-column: 1 / -1; }
  .method-switch { display: flex; width: 100%; }
  .method-switch button { min-width: 0; flex: 1; }
  .optional-upload { align-items: flex-start; flex-direction: column; }
  #signatureCanvas { height: 180px; }
  .issue-list > div { grid-template-columns: 1fr; }
  .issue-list p { grid-column: auto; }
  .receipt-records > div { grid-template-columns: 12px minmax(0, 1fr); }
  .receipt-records em { grid-column: 2; white-space: normal; }
  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-table-head { display: none; }
  .product-row { position: relative; grid-template-columns: 1fr; align-items: start; gap: 7px; padding: 13px 84px 13px 10px; }
  .product-row > span { grid-column: 1; }
  .product-row > div:last-child { position: absolute; top: 14px; right: 10px; }
  .modal { width: 100vw; max-width: none; max-height: calc(100vh - 20px); margin: 20px 0 0; border-radius: 8px 8px 0 0; }
  .modal-box { min-height: calc(100vh - 20px); max-height: calc(100vh - 20px); border-radius: 8px 8px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .product-picker-modal { width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .product-picker-box { height: 100%; min-height: 0; max-height: none; border-radius: 0; padding: 15px 12px calc(14px + env(safe-area-inset-bottom)); }
  .product-picker-box .modal-head { margin-bottom: 14px; }
  .product-picker-list { margin-top: 10px; padding-right: 4px; padding-bottom: 10px; scrollbar-gutter: auto; }
  .picker-product-head { padding: 11px; }
  .picker-specs button { min-height: 58px; padding: 11px; }
  .picker-actions { gap: 7px; padding-top: 12px; }
  .picker-actions .button { min-width: 0; flex: 1; padding: 0 9px; }
  .scanner-modal { width: 100vw; max-height: 100vh; margin: 0; border-radius: 0; }
  .scanner-modal-box { min-height: 100vh; max-height: 100vh; border-radius: 0; padding: 15px 12px calc(18px + env(safe-area-inset-bottom)); }
  .scanner-reader { min-height: min(52vh, 430px); }
  .scanner-reader video { max-height: min(56vh, 460px); }
  .spec-row { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: 2px; }
  .spec-row label:first-child { grid-column: 1 / -1; padding-right: 42px; }
  .spec-row > .icon-button { position: absolute; top: 20px; right: 0; }
  .reminder-row { grid-template-columns: minmax(0, 1fr); }
  .reminder-row-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .reminder-row-actions .button { min-width: 0; padding-right: 7px; padding-left: 7px; }
  .reminder-number-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .report-grid { grid-template-columns: 1fr; gap: 10px; }
  .bar-row { grid-template-columns: 90px minmax(100px, 1fr) 75px; }
  .report-filter-section .date-filter { display: grid; }
  .settings-grid { gap: 10px; }
  .switch-list { grid-template-columns: 1fr; }
  .toast { right: 10px; bottom: calc(145px + env(safe-area-inset-bottom)); left: 10px; max-width: none; text-align: center; }
  .login-page { padding: 14px; }
  .login-layout { display: block; }
  .login-brand { min-height: 150px; padding: 26px; }
  .login-brand h1 { font-size: 22px; }
  .login-box { padding: 26px 22px; }
}

@media (max-width: 430px) {
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .metric-item { grid-template-columns: 32px minmax(0, 1fr) 26px; padding: 9px; }
  .metric-icon { width: 32px; height: 32px; }
  .toolbar-fields { grid-template-columns: minmax(0, 1fr) 40px; }
  .toolbar-fields .order-scan-button { width: 40px; height: 42px; }
  .toolbar-fields .select-field { grid-column: 1 / -1; }
  .sales-toolbar-fields { grid-template-columns: minmax(0, 1fr) 40px; }
  .scan-lookup-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .scan-lookup-controls .lookup-field { grid-column: 1 / -1; }
  .scanner-actions .button { min-width: 0; flex: 1; padding: 0 8px; }
  .sticky-action-bar > div:first-child { display: none; }
  .sticky-buttons { width: 100%; }
  .sticky-buttons .button { flex: 1; }
  .inspection-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inspection-inputs .issue-note { grid-column: 1 / -1; }
  .receipt-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print {
  @page { size: A4 landscape; margin: 9mm; }
  * { box-shadow: none !important; }
  html, body { min-width: 0; background: #fff; }
  #app { display: none !important; }
  .print-sheet { display: block !important; color: #111; background: #fff; font-family: "Microsoft YaHei", "SimSun", sans-serif; font-size: 9.5pt; line-height: 1.35; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-document { position: relative; min-height: 0; }
  .print-header { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 12px; border-bottom: 2px solid #111; padding-bottom: 7px; }
  .print-brand b, .print-brand span { display: block; }
  .print-brand b { font-size: 17pt; }
  .print-brand span { margin-top: 2px; color: #444; font-size: 7.5pt; }
  .print-title { width: 100%; justify-self: center; text-align: center; }
  .print-title h1 { margin: 0; font-size: 21pt; }
  .print-title span { color: #444; font-size: 8pt; }
  .print-qr { display: grid; justify-items: end; gap: 2px; }
  .print-qr #printQr { width: 82px; height: 82px; }
  .print-qr canvas, .print-qr img { display: block; width: 82px !important; height: 82px !important; }
  .print-qr small { width: 82px; text-align: center; font-size: 7pt; }
  .qr-fallback { display: grid; width: 82px; height: 82px; place-items: center; border: 1px solid #111; padding: 4px; overflow-wrap: anywhere; font-size: 7pt; text-align: center; }
  .print-code-row { display: flex; height: 52px; align-items: center; justify-content: space-between; gap: 18px; margin: 5px 0 7px; }
  .print-order-number { display: flex; min-width: 260px; align-items: baseline; justify-content: flex-end; gap: 9px; white-space: nowrap; }
  .print-order-number span { font-size: 8pt; font-weight: 700; }
  .print-order-number strong { font-size: 17pt; line-height: 1; }
  .print-barcode { display: grid; min-width: 0; justify-items: start; padding: 0 12px; overflow: hidden; }
  .barcode-svg { display: block; width: 270px; max-width: 100%; height: 48px; overflow: visible; }
  .barcode-svg text { fill: #111; font-family: Arial, sans-serif; font-size: 9px; letter-spacing: .5px; }
  .print-meta { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #222; border-left: 1px solid #222; }
  .print-meta > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); min-height: 28px; align-items: center; border-right: 1px solid #222; border-bottom: 1px solid #222; }
  .print-meta span { height: 100%; padding: 6px; background: #eef2f1; font-weight: 700; }
  .print-meta strong { padding: 5px 7px; overflow-wrap: anywhere; font-weight: 500; }
  .print-table { margin-top: 7px; }
  .print-table table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
  .print-table th, .print-table td { box-sizing: border-box; border: 1px solid #596360; padding: 4px 5px; vertical-align: middle; word-break: break-word; }
  .print-table th { color: #111; background: #eef2f1; font-size: 8pt; text-align: center; }
  .print-table td { height: 28px; font-size: 8pt; background: #fff; }
  .print-table .seq, .print-table .number, .print-table .unit, .print-table .money { text-align: center; vertical-align: middle; }
  .print-table .seq { width: 38px; }
  .print-table .number, .print-table .unit { width: 56px; }
  .print-table .money { width: 78px; }
  .print-table tfoot td { height: 26px; font-weight: 700; text-align: right; }
  .write-cell { height: 34px !important; background: #fff; }
  .print-note, .print-handwrite { display: grid; grid-template-columns: 90px 1fr; min-height: 34px; border: 1px solid #222; border-top: 0; }
  .print-note > span, .print-handwrite > span { display: grid; place-items: center; border-right: 1px solid #596360; background: #eef2f1; font-weight: 700; }
  .print-note p { margin: 0; padding: 7px; color: #111; white-space: pre-wrap; }
  .print-handwrite { min-height: 48px; }
  .print-signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 17px; break-inside: avoid; }
  .print-signatures > div { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 8px; }
  .print-signatures i { height: 22px; border-bottom: 1px solid #111; }
  .print-footer { display: flex; justify-content: space-between; margin-top: 14px; border-top: 1px solid #888; padding-top: 4px; color: #555; font-size: 7pt; break-inside: avoid; }

  .sales-print-document { width: 273mm; min-height: 0; margin: 0 auto; padding: 2mm 1mm 0; color: #111; }
  .sales-print-document .print-header { grid-template-columns: 1fr 1fr 1fr; gap: 18px; padding: 2mm 2mm 3mm; }
  .sales-print-document .print-title { width: 100%; justify-self: center; text-align: center; }
  .sales-print-document .print-brand b { font-size: 16pt; }
  .sales-print-document .print-brand span { font-size: 7.5pt; }
  .sales-print-document .print-title h1 { font-size: 22pt; }
  .sales-print-document .print-title span { margin-top: 1mm; font-size: 8pt; }
  .sales-print-document .print-qr #printQr { width: 72px; height: 72px; }
  .sales-print-document .print-qr canvas, .sales-print-document .print-qr img { width: 72px !important; height: 72px !important; }
  .sales-print-document .print-qr small { width: 72px; }
  .sales-print-document .print-code-row { height: 16mm; margin: 2mm 2mm 3mm; }
  .sales-print-document .print-order-number { min-width: 82mm; }
  .sales-print-document .print-order-number span { font-size: 8.5pt; }
  .sales-print-document .print-order-number strong { font-size: 17pt; }
  .sales-print-document .print-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sales-print-document .print-meta > div { grid-template-columns: 27mm minmax(0, 1fr); min-height: 9.5mm; align-items: stretch; }
  .sales-print-document .print-meta span { display: flex; align-items: center; padding: 2.2mm 2.5mm; color: #444; font-size: 8.5pt; }
  .sales-print-document .print-meta strong { display: flex; min-width: 0; align-items: center; padding: 2.2mm 2.8mm; overflow-wrap: anywhere; word-break: break-word; white-space: normal; font-size: 9.5pt; line-height: 1.5; }
  .sales-print-document .print-table { margin-top: 3mm; }
  .sales-print-document .print-table table { table-layout: fixed; }
  .sales-print-document .print-table thead { display: table-header-group; }
  .sales-print-document .print-table tr { break-inside: avoid; }
  .sales-print-document .print-table th { height: auto; min-height: 9mm; padding: 2.4mm 1.8mm; font-size: 8.8pt; font-weight: 600; }
  .sales-print-document .print-table td { height: auto; min-height: 10mm; padding: 2.7mm 1.8mm; overflow-wrap: anywhere; word-break: break-word; white-space: normal; font-size: 9pt; line-height: 1.5; }
  .sales-print-document .print-table td strong, .sales-print-document .print-table td small { display: block; }
  .sales-print-document .print-table td strong { font-size: 9.5pt; }
  .sales-print-document .print-table td small { margin-top: 1.2mm; color: #555; font-size: 8pt; line-height: 1.45; }
  .sales-print-document .print-table .seq,
  .sales-print-document .print-table .number,
  .sales-print-document .print-table .unit,
  .sales-print-document .print-table .money { width: auto; }
  .sales-print-document .print-table .seq,
  .sales-print-document .print-table .number,
  .sales-print-document .print-table .unit,
  .sales-print-document .print-table .money { text-align: center; vertical-align: middle; }
  .sales-print-document .sales-col-seq { width: 4%; }
  .sales-print-document .sales-col-product { width: 33%; }
  .sales-print-document .sales-col-qty { width: 7%; }
  .sales-print-document .sales-col-unit { width: 6%; }
  .sales-print-document .sales-col-price { width: 10%; }
  .sales-print-document .sales-col-amount { width: 12%; }
  .sales-print-document .sales-col-remark { width: 28%; }
  .sales-print-document .sales-product-cell, .sales-print-document .sales-remark-cell { overflow-wrap: anywhere; word-break: break-word; }
  .sales-amount-summary { display: grid; grid-template-columns: .8fr 1.2fr 2.4fr; border-right: 1px solid #222; border-bottom: 1px solid #222; border-left: 1px solid #222; break-inside: avoid; }
  .sales-amount-summary > div { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 11mm; align-items: center; border-left: 1px solid #222; }
  .sales-amount-summary > div:first-child { border-left: 0; }
  .sales-amount-summary span { padding: 2.4mm; background: #eef2f1; font-weight: 700; }
  .sales-amount-summary strong { min-width: 0; padding: 2.4mm; overflow-wrap: anywhere; text-align: right; }
  .sales-amount-summary .amount-uppercase strong { text-align: left; }
  .sales-amount-summary strong, .sales-amount-summary .amount-uppercase strong { text-align: center; }
  .print-meta, .print-meta > div, .print-note, .print-handwrite, .sales-amount-summary { border-color: #596360; }
  .sales-amount-summary > div { border-left-color: #596360; }
  .sales-print-document .print-note { min-height: 18mm; grid-template-columns: 27mm minmax(0, 1fr); }
  .sales-print-document .print-note > span { color: #444; font-size: 8.5pt; }
  .sales-print-document .print-note p { padding: 2.8mm; overflow-wrap: anywhere; word-break: break-word; font-size: 9pt; line-height: 1.55; }
  .sales-print-document .print-signatures { gap: 12mm; margin-top: 8mm; padding: 0 2mm; }
  .sales-print-document .print-signatures i { height: 8mm; }
  .sales-print-document .print-footer { margin-top: 5mm; padding-right: 2mm; padding-left: 2mm; }
  .sales-print-short .print-table th { min-height: 10mm; }
  .sales-print-short .print-table td { min-height: 12mm; }
  .sales-print-short .sales-amount-summary > div { min-height: 10mm; }
  .sales-print-short .print-note { min-height: 10mm; }
  .sales-print-short .print-signatures { margin-top: 3mm; }
  .sales-print-short .print-signatures i { height: 5mm; }
  .sales-print-short .print-footer { display: none; }
  .sales-print-short .print-header { padding: 1mm 2mm 2mm; }
  .sales-print-short .print-qr #printQr { width: 64px; height: 64px; }
  .sales-print-short .print-qr canvas, .sales-print-short .print-qr img { width: 64px !important; height: 64px !important; }
  .sales-print-short .print-qr small { width: 64px; }
  .sales-print-short .print-code-row { height: 13mm; margin: 1mm 2mm 2mm; }
  .sales-print-short .print-meta > div { min-height: 8mm; }
  .sales-print-short .print-meta span { padding: 1.5mm 2.5mm; }
  .sales-print-short .print-meta strong { padding: 1.5mm 2.8mm; }
  .sales-print-short .print-table th { padding: 1.8mm; }
  .sales-print-short .print-table td { padding: 2mm 1.8mm; line-height: 1.4; }

  /* Keep printed forms clean and printer-friendly: white paper, fine neutral rules. */
  .print-header { border-bottom: 1px solid #777; }
  .print-meta { border-top-color: #777; border-left-color: #777; }
  .print-meta > div { border-right-color: #777; border-bottom-color: #777; }
  .print-meta span, .print-table th, .print-note > span, .print-handwrite > span, .sales-amount-summary span { background: #fff; font-weight: 500; }
  .print-table th, .print-table td { border-color: #777; background: #fff; }
  .print-table th { font-weight: 500; }
  .print-table tfoot td { font-weight: 600; }
  .print-note, .print-handwrite, .sales-amount-summary { border-color: #777; }
  .print-note > span, .print-handwrite > span { border-right-color: #777; }
  .sales-amount-summary > div { border-left-color: #777; }
  .print-signatures i { border-bottom-color: #777; }
}