:root {
  --bg: #f4f7f5;
  --panel: #ffffff;
  --ink: #17211c;
  --muted: #68746d;
  --line: #d9e2dd;
  --primary: #176b5f;
  --primary-2: #0f5248;
  --success: #256f3d;
  --danger: #b24035;
  --soft: #e8f2ee;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: var(--bg);
  font-family: "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
}

button, input, textarea {
  font: inherit;
}

button {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

.product-actions button,
.product-actions .file-button {
  padding: 6px 9px;
  font-size: 13px;
}

button.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

button.success {
  background: var(--success);
  border-color: var(--success);
  color: white;
}

button.danger {
  background: var(--danger);
  border-color: var(--danger);
  color: white;
}

button.ghost {
  background: transparent;
}
button.link-button {
  border: 0;
  background: transparent;
  color: var(--primary);
  padding: 4px 0;
}
.copy-code {
  border: 0;
  padding: 0;
  color: var(--primary);
  background: transparent;
  font-weight: 800;
  font-size: inherit;
}

.hidden { display: none !important; }
.error { color: var(--danger); min-height: 22px; }
.status { color: var(--primary); min-height: 22px; }
.status.success { color: var(--success); }
.status.error { color: var(--danger); }
.muted { color: var(--muted); }
.small-line {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
}
.required { color: var(--danger); font-weight: 700; }
.danger-text { color: var(--danger) !important; font-weight: 700; }
.eyebrow { color: var(--primary); font-weight: 700; letter-spacing: 0; margin: 0; }

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(23,107,95,.10), transparent 48%),
    linear-gradient(0deg, #eef4f1, #f8faf9);
}

.login-panel {
  width: min(420px, 100%);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 18px 60px rgba(23,33,28,.08);
}

.login-panel h1 { margin: 8px 0 22px; }
label { display: grid; gap: 6px; color: var(--muted); margin-bottom: 12px; }
input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
}
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
}
textarea { min-height: 76px; resize: vertical; }

.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 220px 1fr;
  overflow: hidden;
}

.sidebar {
  background: #10251f;
  color: white;
  padding: 22px;
  height: 100vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.sidebar h2 { margin: 6px 0 22px; }
.sidebar .eyebrow { color: #9bd8c8; }
.nav {
  text-align: left;
  background: transparent;
  color: #dce9e4;
  border-color: rgba(255,255,255,.12);
}
.nav.active, .nav:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}

.content {
  min-height: 0;
  height: 100vh;
  padding: 24px;
  overflow: auto;
}
.global-scroll-controls {
  position: fixed;
  right: calc(1cm + 10px);
  bottom: 28px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.global-scroll-controls button {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  opacity: .5;
  color: #fff;
  background: #12352c;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 8px 22px rgba(16,37,31,.22);
  line-height: 1;
}
.global-scroll-controls button:hover {
  opacity: .8;
}
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.topbar h1 { margin: 0 0 4px; }
.topbar p { margin: 0; color: var(--muted); }
.top-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.user-pill {
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--primary-2);
  font-size: 13px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
}
.panel h3 { margin: 0 0 16px; }
.toolbar {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 14px;
}
.toolbar input { min-width: 220px; }
.product-toolbar {
  align-items: center;
}
.search-combo {
  display: flex;
  align-items: stretch;
  flex: 1;
  max-width: 720px;
}
.search-input {
  max-width: 520px;
  min-width: 280px;
  border-radius: 0 6px 6px 0;
  border-left: 0;
  flex: 1;
}
.search-mode {
  width: 150px;
  min-width: 150px;
  border-radius: 6px 0 0 6px;
  border-right: 0;
  background: var(--soft);
  color: var(--primary-2);
  font-weight: 700;
}
.toolbar label { margin: 0; }
.layout {
  display: grid;
  grid-template-columns: minmax(360px, 480px) 1fr;
  gap: 16px;
}
.grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.grid.three {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.grid.four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.list {
  display: grid;
  gap: 10px;
}
.item {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  background: #fbfdfc;
}
.item strong { display: block; margin-bottom: 4px; }
.item span { color: var(--muted); margin-right: 10px; }
.product-card {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fbfdfc;
  overflow: visible;
}
.product-image {
  position: relative;
  width: 82px;
  height: 82px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--soft);
  transition: transform .14s ease, box-shadow .14s ease;
  transform-origin: left top;
}
.product-image:not(.placeholder):hover {
  transform: scale(2.6);
  z-index: 50;
  cursor: zoom-in;
  box-shadow: 0 16px 36px rgba(23,33,28,.24);
}
.product-image.placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
}
.product-title {
  font-weight: 700;
  margin-bottom: 5px;
}
.product-title span {
  color: var(--muted);
  font-weight: 500;
  margin-left: 8px;
}
.product-meta {
  color: var(--muted);
  font-size: 13px;
  margin: 3px 0;
}
.product-summary-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.panel-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.inline-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
.inline-control select {
  padding: 5px 8px;
}
.pager-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}
.product-table {
  min-width: 1040px;
}
.product-table .product-image {
  width: 96px;
  height: 96px;
  cursor: pointer;
  transform-origin: left top;
}
.product-table .product-image:not(.placeholder):hover {
  transform: none;
}
.product-image-hover-preview {
  position: fixed;
  z-index: 3000;
  object-fit: cover;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(95, 130, 112, .32);
  box-shadow: 0 18px 42px rgba(23,33,28,.28);
  pointer-events: none;
}
.product-image-cell {
  width: 112px;
  min-width: 112px;
}
.product-select-cell {
  width: 36px;
  min-width: 36px;
  text-align: center;
}
.product-table-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 300px;
  white-space: nowrap;
}
.product-actions-cell {
  min-width: 320px;
  white-space: nowrap;
}
.product-table th[data-product-field] {
  position: relative;
}
.column-resizer {
  position: absolute;
  top: 6px;
  right: -4px;
  bottom: 6px;
  width: 8px;
  cursor: col-resize;
  z-index: 2;
}
.column-resizer::after {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 3px;
  width: 1px;
  background: rgba(42, 111, 85, .28);
}
.column-resizer:hover::after {
  background: rgba(42, 111, 85, .58);
}
#openProductFieldsBtn {
  margin-left: auto;
}
.draggable-field-list .checkbox-row {
  cursor: grab;
}
.draggable-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.draggable-field-row.is-dragging {
  opacity: .55;
}
.drag-handle {
  color: var(--muted);
  font-weight: 900;
  letter-spacing: -2px;
}
.product-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.product-actions-left,
.product-actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.product-actions-right {
  justify-content: flex-end;
  margin-left: auto;
}
.file-button {
  display: inline-flex;
  align-items: center;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
}
.empty {
  color: var(--muted);
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: 8px;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
}
.data-table th,
.data-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px;
  text-align: left;
}
.data-table input,
.data-table select {
  padding: 6px 8px;
}
.data-table th {
  color: var(--muted);
  font-weight: 600;
}
.purchase-test-table {
  table-layout: fixed;
}
.purchase-test-table th,
.purchase-test-table td {
  padding: 7px 9px;
  vertical-align: middle;
}
.purchase-test-table td:last-child {
  white-space: nowrap;
}
.purchase-test-table .small-line {
  margin-top: 2px;
  line-height: 1.25;
}
.purchase-test-summary {
  font-size: 13px;
  text-align: left;
}
.purchase-test-table td:last-child button + button {
  margin-left: 6px;
}
.badge {
  display: inline-flex;
  padding: 8px 10px;
  margin: 4px 8px 4px 0;
  border-radius: 6px;
  background: var(--soft);
  color: var(--primary-2);
}
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.setting-block {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.setting-block:last-child { border-bottom: 0; }
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.section-title h3,
.section-title h4 {
  margin: 0 0 10px;
}
.setting-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.template-variable-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.template-var-button {
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #f4faf7;
  color: var(--ink);
  font-size: 12px;
}
.color-setting-block .grid {
  width: 100%;
}
.color-picker-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.color-preview {
  display: inline-block;
  width: 24px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid var(--line);
  margin-right: 6px;
  vertical-align: -3px;
}
.color-picker-label input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  padding: 0;
  border: 0;
}
.setting-row.two-inputs {
  grid-template-columns: 1fr 180px auto;
}
.setting-row.custom-field-row {
  grid-template-columns: 1fr 110px 1fr auto;
}
.external-rule-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
  background: #fbfdfc;
}
.compact-code-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 8px;
}
.switch-row,
.checkbox-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: #fbfdfc;
  white-space: nowrap;
}
.switch-row span { white-space: nowrap; }
.switch-row input { width: auto; }
.compact-switch {
  padding: 6px 10px;
  margin-bottom: 0;
}
.inline-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fbfdfc;
  white-space: nowrap;
}
.inline-switch input {
  width: auto;
}
.ledger-zero-switch {
  margin-left: auto;
  min-height: 34px;
}
.checkbox-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.checkbox-row {
  justify-content: flex-start;
}
.checkbox-row input {
  width: auto;
}
.help {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--primary);
  font-weight: 800;
  cursor: help;
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(16, 37, 31, .42);
}
#productModal {
  place-items: start center;
}
.modal-card {
  width: min(1380px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  background: var(--panel);
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 22px 80px rgba(23,33,28,.24);
  padding: 14px 16px;
}
.small-modal-card {
  width: min(520px, 100%);
}
.modal-content {
  width: min(980px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 22px 80px rgba(23,33,28,.24);
  padding: 16px;
}
.modal-content .modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
}
.supplier-ledger-modal-content {
  width: min(1180px, 100%);
}
.supplier-ledger-popup-table th,
.supplier-ledger-popup-table td {
  white-space: nowrap;
}
.supplier-ledger-popup-table td:nth-child(8) {
  min-width: 220px;
  white-space: normal;
}
.small-modal {
  width: min(720px, 100%);
}
.modal.nested {
  z-index: 150;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  margin-bottom: 6px;
}
.modal-header h2 {
  margin: 0 0 4px;
}
.form-section {
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.form-section h3 {
  margin: 0 0 8px;
}
.modal-card label { margin-bottom: 6px; }
.modal-card input,
.modal-card select,
.modal-card textarea {
  padding: 7px 9px;
}
.smart-form-section {
  padding-top: 4px;
}
.smart-input-row {
  display: grid;
  grid-template-columns: 1fr 76px;
  gap: 10px;
  align-items: stretch;
}
.smart-input-row textarea {
  min-height: 58px;
}
.smart-actions {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  align-content: stretch;
}
.smart-actions button {
  padding: 4px 6px;
  min-height: 0;
}
.label-line {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.product-basic-grid {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 150px 110px 88px 104px 118px 118px;
  gap: 8px;
  align-items: flex-end;
  position: relative;
}
.product-basic-grid label {
  position: relative;
  min-width: 0;
  font-size: 13px;
}
.product-basic-grid input,
.product-basic-grid select {
  font-size: 13px;
}
.link-list {
  display: grid;
  gap: 8px;
}
.link-row {
  display: grid;
  grid-template-columns: auto auto auto minmax(200px, .8fr) auto 92px minmax(96px, .32fr) 42px auto;
  gap: 8px;
  align-items: center;
}
.link-row button {
  padding: 7px 10px;
}
.modal-actions {
  position: sticky;
  bottom: -20px;
  padding: 8px 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.82), #fff 30%);
}
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 300;
  background: #10251f;
  color: white;
  border-radius: 999px;
  padding: 10px 16px;
  box-shadow: 0 12px 40px rgba(16,37,31,.24);
}
.sub-tabs {
  display: flex;
  gap: 8px;
  margin: 8px 0 14px;
}
.sub-tabs button {
  padding: 7px 12px;
}
.sub-tabs button.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.return-detail {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.return-detail-header {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 2fr) auto;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 10px;
}
.tiny-input {
  width: 90px;
}
.compact-button {
  padding: 6px 9px;
}
.media-cell {
  display: flex;
  gap: 6px;
  align-items: center;
}
.icon-danger {
  color: var(--danger);
  padding: 4px 7px;
}
.media-modal {
  width: min(960px, 100%);
}
.media-preview {
  max-width: 100%;
  max-height: 70vh;
}
.log-list {
  display: grid;
  gap: 10px;
}
.log-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fbfdfc;
}
.log-change {
  margin-top: 6px;
  display: grid;
  gap: 4px;
}
.success-text { color: var(--success); font-weight: 700; }
.help-tooltip {
  position: fixed;
  z-index: 400;
  max-width: 340px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #10251f;
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 12px 40px rgba(16,37,31,.24);
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .layout, .grid.two, .grid.three, .grid.four, .compact-code-grid, .checkbox-list, .smart-input-row, .product-basic-grid { grid-template-columns: 1fr; }
  .search-combo { max-width: none; width: 100%; }
  .settings-grid { grid-template-columns: 1fr; }
  .setting-row,
  .setting-row.two-inputs,
  .setting-row.custom-field-row,
  .link-row { grid-template-columns: 1fr; }
  .toolbar { flex-wrap: wrap; }
}

.page-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
  margin: 10px 0 16px;
}
.page-tabs button {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 12px 18px;
  color: var(--muted);
  font-weight: 700;
  position: relative;
}
.page-tabs button.active {
  color: var(--primary-2);
}
.page-tabs button.active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -1px;
  height: 3px;
  border-radius: 999px;
  background: var(--primary);
}
.sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.selected-row {
  background: #eef7f3;
}
.highlight-row {
  animation: rowFlash 2.6s ease;
}
@keyframes rowFlash {
  0%, 70% { background: #fff1c2; }
  100% { background: transparent; }
}
.ledger-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 10px 0 14px;
}
.summary-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdfc;
}
.summary-card span {
  font-size: 22px;
  font-weight: 800;
  color: var(--primary-2);
}
.summary-card.payable span {
  color: #b45309;
}
.summary-card.credit span {
  color: #0f6b5d;
}
.balance-status {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}
.balance-status.payable {
  color: #92400e;
  background: #fef3c7;
}
.balance-status.credit {
  color: #0f5f52;
  background: #dcfce7;
}
.balance-status.settled {
  color: #66736d;
  background: #eef2f0;
}
.balance-adjust-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border-radius: 10px;
  background: #f7fbf9;
}
.balance-adjust-box label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.balance-adjust-box input,
.balance-adjust-box select {
  min-width: 110px;
}
.logistics-input {
  width: 130px;
}
.sorting-rule-row {
  grid-template-columns: minmax(88px, .8fr) minmax(160px, 1.4fr) 92px 80px minmax(120px, 1fr) auto auto;
}
.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.product-basic-grid {
  grid-template-columns: 126px 150px 92px 112px 110px 72px 90px 106px 106px;
  gap: 6px;
  position: relative;
}
.resizable-basic-field {
  padding-right: 10px;
}
.basic-col-resizer {
  position: absolute;
  top: 0;
  right: -6px;
  bottom: 0;
  width: 12px;
  cursor: col-resize;
  z-index: 50;
  touch-action: none;
  user-select: none;
  background: transparent;
}
.basic-col-resizer::after {
  content: "";
  position: absolute;
  top: calc(100% - 18px);
  right: 5px;
  width: 1px;
  height: 16px;
  transform: translateY(-50%);
  background: rgba(21, 99, 86, .22);
  border-radius: 1px;
}
.basic-col-resizer:hover::after,
.product-basic-grid.is-resizing .basic-col-resizer::after {
  background: rgba(21, 99, 86, .46);
}
.product-basic-grid.is-resizing,
.product-basic-grid.is-resizing * {
  cursor: col-resize !important;
  user-select: none;
}
.product-basic-grid input,
.product-basic-grid select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.link-row {
  grid-template-columns: auto auto auto minmax(180px, .7fr) auto 92px minmax(96px, .32fr) 42px auto;
}
.accessory-list {
  display: grid;
  gap: 8px;
}
.accessory-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(140px, 1fr) minmax(130px, .9fr) 72px 128px auto;
  gap: 8px;
  align-items: flex-end;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #fbfdfc;
}
.accessory-row label {
  margin-bottom: 0;
  font-size: 13px;
}
.accessory-row input,
.accessory-row select {
  font-size: 13px;
  padding: 7px 8px;
}
.accessory-image-box {
  display: flex;
  align-items: center;
  gap: 6px;
}
.accessory-thumb,
.accessory-list-thumb {
  width: 82px;
  height: 82px;
  border-radius: 8px;
  object-fit: cover;
  background: var(--soft);
}
.accessory-thumb.placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}
.batch-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #eef7f3;
  margin: 8px 0 10px;
}
.table-scroll {
  overflow-x: auto;
}
.data-table th:first-child,
.data-table td:first-child {
  width: 44px;
}
.data-table input[type="checkbox"] {
  width: auto;
}
.return-code-cell {
  position: relative;
  display: inline-block;
}
.unknown-product-dot {
  position: absolute;
  left: -14px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d4f;
  transform: translateY(-50%);
}

@media (max-width: 900px) {
  .accessory-row { grid-template-columns: 1fr; }
}

.toolbar-split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
}
.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.toolbar-left { justify-content: flex-start; }
.toolbar-right { justify-content: flex-end; margin-left: auto; }
.toolbar-split label { margin: 0; }
.toolbar-split input { min-width: 120px; }
.return-toolbar-row {
  margin-bottom: 10px;
  align-items: flex-end;
}
.return-search-row {
  padding-top: 0;
}
.return-search-row input {
  flex: 1 1 320px;
  min-width: 220px;
}
.global-sound-grid {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr) auto;
  gap: 8px;
  align-items: flex-end;
}
.smart-input-row {
  grid-template-columns: minmax(420px, .72fr) 96px;
  max-width: 920px;
}
.smart-actions button { min-height: 27px; }
.link-row {
  grid-template-columns: auto auto auto minmax(180px, .65fr) auto 72px 88px minmax(78px, .22fr) 42px auto;
}
.purchase-spec-image-box {
  position: relative;
  width: 38px;
  height: 38px;
}
.purchase-spec-image-trigger {
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0 !important;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.purchase-spec-image-trigger img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.purchase-spec-image-delete {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  padding: 0 !important;
  border-radius: 50%;
  background: #d63b33;
  color: #fff;
  border: 0;
  font-size: 13px;
  line-height: 18px;
  z-index: 2;
}
.purchase-spec-image-preview {
  display: none;
  position: fixed;
  width: 500px;
  height: 500px;
  right: 32px;
  bottom: 32px;
  z-index: 420;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 42px rgba(22, 48, 39, .24);
  padding: 8px;
  pointer-events: none;
}
.purchase-spec-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.purchase-spec-image-box.has-image .purchase-spec-image-trigger:hover ~ .purchase-spec-image-preview {
  display: block;
}
.image-setting-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 160px 150px 90px;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfdfc;
}
.image-setting-row label {
  margin: 0;
}
.accessory-row {
  grid-template-columns: minmax(180px, 1.05fr) minmax(130px, .85fr) minmax(120px, .75fr) 68px 128px auto;
}
.accessory-search-cell {
  display: grid;
  gap: 4px;
}
.accessory-results {
  display: grid;
  gap: 4px;
  max-height: 110px;
  overflow: auto;
}
.accessory-results button {
  text-align: left;
  padding: 5px 7px;
  font-size: 12px;
}
.linked-product-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--primary-2);
  font-size: 12px;
  white-space: nowrap;
}
.linked-product-pill button {
  padding: 2px 5px;
  font-size: 12px;
}
.detail-tools .batch-bar {
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
}
.compact-return-header {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 320px) auto;
  align-items: flex-end;
}
.return-remark-field input { min-width: 180px; }

@media (max-width: 900px) {
  .toolbar-split, .toolbar-left, .toolbar-right { align-items: stretch; flex-direction: column; }
  .global-sound-grid { grid-template-columns: 1fr; }
}

/* Current iteration overrides: tighter product dialog, return summaries, unified settings save, sorting editor wrapping. */
.settings-page-actions {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 12px;
}
.settings-grid {
  grid-template-columns: minmax(0, 1fr);
}
.kuaimai-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 14px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  background: var(--soft);
  color: var(--muted);
}
.kuaimai-status strong {
  color: var(--text);
  word-break: break-all;
}
.kuaimai-test-result {
  max-height: 360px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
}
.selection-summary {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: var(--soft);
  color: var(--primary-2);
  font-weight: 700;
  white-space: nowrap;
}
.inline-number-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.inline-number-label input {
  min-width: 82px;
  width: 82px;
}
.smart-input-row {
  grid-template-columns: minmax(520px, 1fr) 170px;
  max-width: 1180px;
  align-items: start;
}
.smart-input-row textarea {
  min-height: 90px;
}
.smart-actions {
  display: grid;
  grid-template-rows: 1fr 1fr;
  justify-content: center;
  align-items: stretch;
  gap: 6px;
  height: 100%;
  align-self: start;
}
.smart-actions button {
  min-height: 42px;
  padding: 10px 14px;
  font-size: 15px;
}
.smart-actions .link-button {
  min-height: 0;
  padding: 4px 0;
  border: 0;
  background: transparent;
  font-size: 13px;
  justify-content: center;
  color: var(--primary);
}
.accessory-row {
  grid-template-columns: minmax(130px, .72fr) minmax(100px, .55fr) minmax(100px, .55fr) 76px 64px 82px 96px auto;
}
.combo-product-title {
  justify-content: flex-start;
  gap: 8px;
  min-height: 28px;
}
.combo-product-title h3 {
  margin: 0;
}
.combo-product-switch {
  margin: 0;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.readonly-input {
  background: #eef4f1 !important;
  color: var(--muted);
}
.accessory-image-box {
  position: relative;
  width: 82px;
  height: 82px;
}
.accessory-image-trigger {
  border: 0;
  padding: 0;
  background: transparent;
  width: 82px;
  height: 82px;
}
.accessory-image-delete {
  position: absolute;
  right: -5px;
  top: -5px;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 999px;
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
  line-height: 1;
}
.accessory-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.accessory-row-actions button {
  padding: 7px 9px;
}
.accessory-row-actions .accessory-add-child {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.compact-return-header {
  grid-template-columns: 221px minmax(216px, 384px) auto;
  align-items: flex-end;
}
.global-sound-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.global-sound-row {
  display: grid;
  grid-template-columns: 130px 130px minmax(180px, 1fr) auto;
  gap: 8px;
  align-items: flex-end;
}
.tts-progress-button {
  position: relative;
  overflow: hidden;
}
.tts-progress-button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--progress, 0%);
  background: rgba(44, 142, 91, .35);
  transition: width .25s ease;
}
.tts-progress-button.done {
  background: #2c8e5b;
  border-color: #2c8e5b;
  color: #fff;
}
.tts-progress-button.failed {
  background: #f8d7da;
  border-color: var(--danger);
  color: var(--danger);
}
.broadcast-strategy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.sorting-rule-row {
  grid-template-columns: minmax(120px, .8fr) minmax(220px, 1.4fr) 116px 116px minmax(180px, 1fr) auto auto auto;
  align-items: flex-end;
}
.switch-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  white-space: nowrap;
  color: var(--muted);
}
.switch-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-slider {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #c8d4ce;
  transition: background .16s ease;
}
.switch-slider::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(23,33,28,.18);
  transition: transform .16s ease;
}
.switch-toggle input:checked + .switch-slider {
  background: var(--primary);
}
.switch-toggle input:checked + .switch-slider::after {
  transform: translateX(16px);
}
.sorting-enable-switch {
  align-self: center;
}
#saveReturnOrderBtn {
  width: auto;
  align-self: end;
  padding-left: 12px;
  padding-right: 12px;
}
.sorting-field {
  display: grid;
  gap: 5px;
  margin: 0;
  min-width: 0;
}
.sorting-field span {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.sorting-keyword-field {
  position: relative;
}
.sorting-keyword-field input {
  padding-right: 34px;
}
.keyword-expand-btn {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: 15px;
}
.large-textarea {
  min-height: 260px;
}
.sorting-rule-row input,
.sorting-rule-row select,
.global-sound-row input,
.global-sound-row select {
  min-width: 0;
}
select:disabled,
input:disabled {
  background: #eef1ef;
  color: #9aa49e;
  cursor: not-allowed;
}
.shortcut-row {
  display: grid;
  grid-template-columns: 150px minmax(180px, 260px);
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.shortcut-row input {
  cursor: pointer;
  background: #fbfdfc;
}
.hover-menu {
  position: relative;
  display: inline-flex;
}
.hover-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
  pointer-events: auto;
}
.purchase-selection-bar .toolbar-right {
  align-items: center;
}
.purchase-selection-bar .batch-bar {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 0;
}
.purchase-selection-bar .hover-menu > button,
.purchase-selection-bar .batch-danger-button {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 8px;
  line-height: 18px;
  font-size: 14px;
  font-weight: 600;
  box-sizing: border-box;
}
.purchase-selection-bar .batch-danger-button {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}
.hover-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  display: none;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(23,33,28,.16);
}
.hover-menu:hover .hover-menu-panel,
.hover-menu:focus-within .hover-menu-panel,
.hover-menu.is-open .hover-menu-panel {
  display: grid;
  gap: 4px;
}
.hover-menu.is-open > button {
  box-shadow: 0 0 0 2px rgba(21, 101, 87, .12);
}
.hover-menu-panel button {
  text-align: left;
  padding: 7px 9px;
}
.readonly-rule {
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f6faf7;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Login, account management, and current interaction refinements. */
.login-shell {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(23, 107, 95, .20), transparent 32%),
    radial-gradient(circle at 82% 78%, rgba(185, 123, 43, .20), transparent 34%),
    linear-gradient(135deg, #edf5f0 0%, #f8faf7 48%, #e7f0ec 100%);
}
.login-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(2px);
  opacity: .75;
  pointer-events: none;
}
.login-orb-a {
  width: 260px;
  height: 260px;
  left: -70px;
  top: 80px;
  background: linear-gradient(135deg, rgba(23,107,95,.20), rgba(23,107,95,.04));
}
.login-orb-b {
  width: 220px;
  height: 220px;
  right: -50px;
  bottom: 60px;
  background: linear-gradient(135deg, rgba(178,64,53,.14), rgba(178,64,53,.03));
}
.login-panel {
  position: relative;
  width: min(460px, 100%);
  border-radius: 20px;
  padding: 34px;
  box-shadow: 0 28px 80px rgba(23,33,28,.16);
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--primary);
  color: #fff;
  font-size: 26px;
  font-weight: 900;
}
.login-brand h1 {
  margin: 3px 0 0;
}
.login-note {
  margin: 0 0 22px;
  color: var(--muted);
}
.login-panel input:focus {
  outline: 2px solid rgba(23,107,95,.18);
  border-color: var(--primary);
}
.login-submit {
  width: 100%;
  margin-top: 4px;
  border-radius: 10px;
  font-weight: 800;
}
.login-footer {
  margin-top: 18px;
  text-align: center;
}
.login-footer .beian-link {
  color: var(--muted);
  font-size: 12px;
  text-decoration: none;
}
.login-footer .beian-link:hover {
  text-decoration: underline;
}
.checkbox-line {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}
.checkbox-line input {
  width: auto;
}
.smart-text-cell {
  display: contents;
}
.field-caption {
  grid-column: 1;
  grid-row: 1;
  color: var(--muted);
  font-size: 14px;
}
.smart-text-cell textarea {
  grid-column: 1;
  grid-row: 2;
}
.smart-actions {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0;
  height: 90px;
}
#settingsPage button:not(#saveSettingsPageBtn) {
  padding-top: 7px;
  padding-bottom: 7px;
}
.account-password-grid,
.account-create-grid {
  align-items: flex-end;
}
.account-password-grid button,
.account-create-grid button {
  align-self: end;
}
.account-list {
  display: grid;
  gap: 10px;
}
.account-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 140px auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfdfc;
}
.account-row strong {
  display: block;
}
.account-row span {
  color: var(--muted);
  font-size: 13px;
}

/* Final return detail header override. Earlier iterations define this class more than once. */
.return-detail-header.compact-return-header {
  display: grid;
  grid-template-columns: minmax(287px, 1.3fr) minmax(260px, 1.2fr) max-content;
  gap: 10px;
  align-items: end;
}
.return-detail-header.compact-return-header label,
.return-detail-header.compact-return-header .return-save-field {
  display: grid;
  grid-template-rows: 18px 38px;
  gap: 6px;
  margin: 0;
  min-width: 0;
}
.return-detail-header.compact-return-header label > span,
.return-detail-header.compact-return-header .return-save-field > span {
  color: var(--muted);
  font-size: 13px;
  line-height: 18px;
}
.return-detail-header.compact-return-header .return-save-field > span {
  visibility: hidden;
}
.return-detail-header.compact-return-header input,
.return-detail-header.compact-return-header #saveReturnOrderBtn {
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
}
.return-detail-header.compact-return-header #saveReturnOrderBtn {
  width: auto;
  padding: 0 14px;
  line-height: 1;
}
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button,
input[type="number"].no-spinner::-webkit-outer-spin-button,
input[type="number"].no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"].no-spinner {
  appearance: textfield;
  -moz-appearance: textfield;
}
.col-resizer {
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
}
.data-table th {
  position: relative;
}
.manual-return-row {
  background: #fff9e8;
}
.manual-return-row input,
.manual-return-row select {
  min-width: 90px;
}
.supplier-form,
.supplier-row {
  display: grid;
  grid-template-columns: minmax(140px, .8fr) minmax(180px, 1fr) minmax(240px, 1.4fr) auto;
  gap: 8px;
  align-items: center;
}
.supplier-row {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfdfc;
}
.supplier-table input,
.supplier-table select {
  width: 100%;
  min-width: 0;
}
.supplier-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.supplier-actions button,
.supplier-table .file-button {
  padding: 6px 8px;
}
.supplier-detail-card {
  width: min(880px, calc(100vw - 32px));
}
.supplier-detail-grid {
  gap: 12px;
  align-items: stretch;
}
.supplier-detail-grid label,
.supplier-detail-qr {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdfc;
}
.supplier-detail-grid label {
  display: grid;
  gap: 7px;
  font-weight: 700;
  color: var(--primary-2);
}
.supplier-detail-grid input,
.supplier-detail-grid textarea {
  background: #fff;
  color: var(--ink);
  font-weight: 400;
}
.supplier-detail-grid textarea {
  min-height: 78px;
  resize: vertical;
}
.supplier-detail-qr {
  display: grid;
  gap: 8px;
  align-content: start;
}
.supplier-detail-qr > span {
  font-weight: 700;
  color: var(--primary-2);
}
.supplier-detail-qr-preview {
  width: 150px;
  height: 150px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fbfdfc;
}
.supplier-detail-qr-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.print-groups {
  display: grid;
  gap: 10px;
  max-height: 60vh;
  overflow: auto;
}
.print-group-card {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfdfc;
}
.print-group-card pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
}
.muted-card { background: #f3f5f4; }
.danger-card { border-color: #f0b4ac; background: #fff3f1; }
.template-modal-card {
  width: min(1180px, calc(100vw - 40px));
}
.template-editor {
  display: grid;
  grid-template-columns: 160px minmax(320px, 1fr) 260px;
  gap: 14px;
  align-items: start;
}
.template-toolbar,
.template-props {
  display: grid;
  gap: 8px;
}
.template-canvas-wrap {
  overflow: auto;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #eef3f0;
  max-height: 72vh;
}
.template-canvas {
  position: relative;
  background: #fff;
  box-shadow: 0 8px 28px rgba(23,33,28,.16);
}
.template-el {
  position: absolute;
  box-sizing: border-box;
  overflow: hidden;
  cursor: move;
  border: 1px dashed transparent;
  user-select: none;
}
.template-el img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.template-el.shape {
  border-style: solid;
}
.template-el.circle {
  border-radius: 999px;
}
.template-el.line {
  height: 0 !important;
  border-top-style: solid;
}
.template-el.selected {
  border-color: var(--primary);
  outline: 2px solid rgba(23,107,95,.18);
}

.sidebar-footer {
  margin-top: auto;
  padding: 14px 8px 4px;
  display: grid;
  gap: 5px;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}
.sidebar-footer a {
  color: rgba(255,255,255,.86);
  text-decoration: none;
}
.sidebar-footer a:hover {
  text-decoration: underline;
}
.sidebar-footer .beian-link {
  font-size: 11px;
  color: rgba(255,255,255,.72);
}
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.settings-tabs button {
  padding: 7px 12px;
  border-radius: 999px;
  background: #f3f7f5;
  color: var(--muted);
}
.settings-tabs button.active {
  background: #135f55;
  color: #fff;
}
.supplier-field,
.manual-code-search,
.purchase-supplier-select,
.return-supplier-select,
.batch-supplier-search {
  position: relative;
}
.supplier-results,
.manual-code-results {
  position: absolute;
  z-index: 60;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(20,32,28,.16);
}
.supplier-results:empty,
.manual-code-results:empty {
  display: none;
}
.supplier-result,
.manual-code-results button {
  text-align: left;
  padding: 6px 8px;
  border: 0;
  background: #f7faf8;
}
.supplier-result span {
  color: var(--muted);
  margin-left: 6px;
}
.purchase-batch-result {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}
.purchase-batch-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f5faf7;
}
.purchase-batch-preview-table {
  max-height: 230px;
  font-size: 12px;
}
.purchase-batch-preview-table th,
.purchase-batch-preview-table td {
  padding: 5px 7px;
}
.purchase-batch-failed-label {
  display: grid;
  gap: 4px;
  font-weight: 700;
}
.purchase-batch-failed-label textarea {
  width: 100%;
  font-weight: 500;
}
.purchase-batch-failed-label textarea.failed-text {
  color: #b42318;
}
.danger-text {
  color: #b42318;
}
.purchase-batch-modal {
  display: grid;
  gap: 8px;
  padding: 16px 18px 12px;
  background: #fff;
}
.purchase-batch-modal .actions {
  margin-top: 5px;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.purchase-batch-import-result {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  min-width: 260px;
  max-width: 520px;
}
.purchase-batch-import-result.all-success {
  color: #13795b;
}
.purchase-batch-import-result.has-fail {
  color: #b42318;
}
.purchase-merge-detail-toggle {
  margin-top: 4px;
  padding: 0;
  font-size: 12px;
  font-weight: 800;
}
.purchase-merge-detail {
  display: grid;
  gap: 3px;
  margin-top: 5px;
  padding: 6px 8px;
  border: 1px solid #d7ebdf;
  border-radius: 10px;
  background: #f6fbf8;
  color: #2f5f4b;
  font-size: 12px;
  font-weight: 600;
}
.purchase-merge-notice {
  font-weight: 800;
}
.purchase-merge-row {
  line-height: 1.45;
}
.settlement-supplier-title {
  display: flex;
  align-items: center;
  gap: 6px;
}
.settlement-supplier-title .circle-action {
  width: 24px;
  height: 24px;
  font-size: 12px;
}
.quantity-stepper {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.quantity-stepper button {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 999px;
  line-height: 1;
}
.quantity-stepper input {
  width: 54px;
  min-width: 54px;
  text-align: center;
}
.ios-switch {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 24px;
  vertical-align: middle;
}
.ios-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ios-switch span {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #ccd8d2;
  transition: .18s;
}
.ios-switch span::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 2px;
  top: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  transition: .18s;
}
.ios-switch input:checked + span {
  background: #16a36f;
}
.ios-switch input:checked + span::after {
  transform: translateX(20px);
}
.retry-rule-list {
  display: grid;
  gap: 8px;
  margin: 8px 0 14px;
  max-width: 760px;
}
.retry-rule-head,
.retry-rule-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 96px 180px;
  align-items: center;
  gap: 12px;
}
.retry-rule-head {
  color: var(--muted);
  font-size: 12px;
  padding: 0 8px;
}
.retry-rule-row {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 8px;
}
.retry-days-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.retry-days-field input {
  width: 72px;
}
.retry-days-field em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}
.selectable-print-card {
  grid-template-columns: 28px 1fr;
  align-items: start;
}
.unmatched-card {
  border-color: #f3c2bd;
  background: #fff5f3;
}
.print-switch-row {
  justify-content: flex-start;
  gap: 10px;
}
.template-editor {
  grid-template-columns: minmax(480px, 1fr) 310px;
}
.template-toolbar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.template-toolbar button,
.template-props button {
  padding: 5px 9px;
  line-height: 1.1;
}
.template-var-list,
.table-column-list {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafcfb;
}
.template-var-list button {
  text-align: left;
}
.table-column-row {
  display: grid;
  grid-template-columns: 1fr 70px 70px;
  gap: 6px;
  align-items: center;
}
.template-el table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.template-el th,
.template-el td {
  border: 1px solid #999;
  padding: 2px;
}
.col-resizer::after {
  content: "";
  position: absolute;
  right: 3px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #b8c7c0;
}
.data-table td input,
.data-table td select {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.product-basic-grid .product-name-field {
  max-width: none;
}
.product-basic-grid .cost-field {
  max-width: none;
}
.smart-input-row {
  align-items: start;
}
.smart-actions {
  align-self: start;
}
.statement-list,
.settlement-grid {
  display: grid;
  gap: 10px;
}
.link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}
.link-button:hover {
  text-decoration: underline;
}
.purchase-table .exception-row {
  background: #fff3f1;
}
.purchase-table .settled-row {
  opacity: .62;
  background: #f2f5f3;
}
.settled-row {
  opacity: .62;
  background: #f2f5f3;
}
.purchase-table input,
.purchase-table select {
  width: 100%;
}
.purchase-title-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.purchase-title-line h3 {
  margin: 0;
}
.settlement-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.purchase-settlement-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 8px;
}
.purchase-settlement-title-row h3 {
  margin: 0;
}
.purchase-settlement-selection-summary {
  font-weight: 700;
  color: #1e6159;
}
.settlement-card {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdfc;
  position: relative;
}
.settlement-card.selected-settlement-card {
  outline: 2px solid #2b9fc8;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(43, 159, 200, .14), 0 10px 24px rgba(15, 95, 82, .12);
}
.settlement-select-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 12px 0 10px 0;
  background: linear-gradient(135deg, rgba(43, 159, 200, .52) 0 48%, transparent 49% 100%);
  cursor: pointer;
  opacity: .95;
  z-index: 3;
}
.settlement-select-corner:hover,
.settlement-select-corner.selected {
  background: linear-gradient(135deg, #2b9fc8 0 52%, transparent 53% 100%);
  opacity: 1;
}
.settlement-select-corner.selected::after {
  content: "✓";
  position: absolute;
  top: 2px;
  left: 4px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.settlement-card.settled-card {
  opacity: .78;
  background: #f1f4f2;
}
.settlement-card.verified-card {
  border-color: rgba(15, 95, 82, .32);
}
.settlement-verify-button {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  background: #dff2e6;
  color: #0f5f52;
  border-color: #acd8bd;
}
.settlement-verify-button.verified {
  min-width: 52px;
  background: #0f6b5d;
  color: #fff;
  border-color: #0f6b5d;
}
.inline-remark-input {
  width: min(260px, 100%);
  min-width: 160px;
}
.settlement-card pre {
  margin: 6px 0 0;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 13px;
}
.mini-edit-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: 12px;
}
.mini-edit-table th,
.mini-edit-table td {
  border-bottom: 1px solid var(--line);
  padding: 4px;
  vertical-align: middle;
}
.mini-edit-table tfoot td {
  background: #f6faf8;
  font-weight: 700;
}
.mini-edit-table input {
  width: 56px;
  padding: 4px 5px;
}
.settlement-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.settlement-pay-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.settlement-mini-line {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  margin: 0;
}
.settlement-remark-line {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  margin: 0;
}
.settlement-remark-line input {
  flex: 1;
  min-width: 120px;
}
.settlement-balance-after {
  color: var(--muted);
  padding-left: 2px;
}
.settlement-pay-line > span {
  flex: 0 0 auto;
  color: var(--text);
  font-weight: 700;
}
.settlement-pay-line select {
  width: 70px;
  min-width: 70px;
  padding: 5px 7px;
}
.settlement-pay-line .compact-button {
  min-width: 64px;
  padding: 5px 9px;
  white-space: nowrap;
}
.settlement-left-actions,
.settlement-pay-box {
  display: flex;
  gap: 8px;
  align-items: center;
}
.settlement-pay-box {
  justify-content: flex-end;
  margin-left: auto;
}
.settlement-pay-box select {
  width: 70px;
  min-width: 70px;
  padding: 6px 8px;
}
.settlement-pay-amount {
  width: 78px;
  min-width: 78px;
  text-align: right;
  padding: 6px 8px;
}
.pay-inline-label {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.circle-action {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  line-height: 1;
}
.settlement-pay-box .circle-action {
  width: 30px;
  height: 30px;
  font-size: 13px;
}
.circle-action.action-message {
  color: #0f5f52;
  background: #dff2ec;
  border-color: #b9ded4;
}
.circle-action.action-qr {
  color: #7a4c00;
  background: #fff1cf;
  border-color: #efd28d;
}
.circle-action.action-pay {
  color: #fff;
  background: #0f6b5d;
  border-color: #0f6b5d;
}
.circle-action.action-offset {
  color: #fff;
  background: #9a6a00;
  border-color: #9a6a00;
}
.circle-action.action-done {
  color: #fff;
  background: #13795b;
  border-color: #13795b;
}
.circle-action.action-void {
  color: #fff;
  background: #7d5a00;
  border-color: #7d5a00;
}
.circle-action.action-zero-pay {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}
.return-search-results {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fbfdfc;
  padding: 10px;
  margin-bottom: 12px;
}
.return-search-title {
  font-weight: 800;
  margin-bottom: 8px;
}
.compact-result-table th,
.compact-result-table td {
  padding: 7px 8px;
}
.return-supplier-card.unmatched-card {
  background: #fff3f1;
  border-color: #f1beb6;
}
.payment-list {
  display: grid;
  gap: 6px;
}
.payment-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 6px;
  border-radius: 8px;
  background: #f4f8f6;
}
.qr-hover {
  position: relative;
}
.qr-preview-popover {
  position: fixed;
  z-index: 2000;
  width: 330px;
  height: 330px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff center/contain no-repeat;
  box-shadow: 0 18px 50px rgba(20,32,28,.22);
  pointer-events: none;
}
.check-modal-card {
  width: min(1280px, 96vw);
  max-height: 92vh;
  overflow: auto;
}
.check-modal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.check-compare-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.check-compare-grid section {
  min-width: 0;
}
.check-compare-grid h3 {
  margin: 0;
}
.check-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 32px;
  margin: 0 0 8px;
}
.check-section-title button {
  height: 28px;
  padding: 5px 10px;
}
.check-title-spacer {
  width: 58px;
  height: 28px;
  flex: 0 0 auto;
}
.inline-check-button {
  margin-left: 8px;
  font-size: 13px;
  vertical-align: baseline;
}
.checked-row {
  background: #e2f2e7 !important;
}
.check-table th,
.check-table td {
  height: 40px;
  padding: 5px 6px;
  line-height: 1.2;
  overflow: visible;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  vertical-align: middle;
}
.check-table {
  table-layout: fixed;
}
.check-code-col { width: 30%; }
.check-qty-col { width: 15%; }
.check-price-col { width: 13%; }
.check-amount-col { width: 12%; }
.check-remark-col { width: 20%; }
.check-action-col { width: 72px; }
.check-table input {
  min-width: 0;
  width: 100%;
  height: 28px;
  padding: 4px 6px;
  line-height: 18px;
}
.check-table .manual-code-search {
  height: 28px;
}
.check-quantity-control {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 3px;
  height: 28px;
}
.check-quantity-control input {
  text-align: center;
}
.check-step-button {
  width: 24px;
  height: 28px;
  min-width: 0;
  padding: 0;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1;
}
.check-remark-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.choice-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13, 25, 22, 0.28);
}
.choice-dialog {
  position: relative;
  width: min(420px, calc(100vw - 36px));
  padding: 22px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(13, 25, 22, 0.22);
}
.choice-dialog h3 {
  margin: 0 0 10px;
}
.choice-dialog p {
  margin: 0 0 18px;
  color: var(--muted);
}
.choice-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.return-refund-dialog {
  width: min(640px, calc(100vw - 36px));
}
.return-refund-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 14px;
}
.return-refund-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 92px;
  padding: 16px 18px;
  border: 1px solid rgba(42, 111, 85, 0.18);
  border-radius: 16px;
  background: #f4fbf4;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.return-refund-option:hover,
.return-refund-option:focus-visible {
  border-color: rgba(42, 111, 85, 0.55);
  box-shadow: 0 10px 26px rgba(42, 111, 85, 0.14);
  outline: none;
}
.return-refund-option strong {
  font-size: 18px;
}
.return-refund-option span {
  color: #27815e;
  font-size: 13px;
  font-weight: 700;
}
.return-refund-option.cash {
  background: #fff8ec;
  border-color: rgba(180, 118, 30, 0.24);
}
.return-refund-option.cash:hover,
.return-refund-option.cash:focus-visible {
  border-color: rgba(180, 118, 30, 0.6);
  box-shadow: 0 10px 26px rgba(180, 118, 30, 0.14);
}
.return-refund-option.cash span {
  color: #b26a11;
}
@media (max-width: 680px) {
  .return-refund-options {
    grid-template-columns: 1fr;
  }
}
.check-table .return-code-cell {
  display: block;
  max-width: 100%;
  padding-left: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
}
.check-table .return-code-cell > span:last-child {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.check-action-cell {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
.check-circle-button {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  margin-right: 4px;
}
.check-mark-button.checked {
  color: #fff;
  background: #13795b;
  border-color: #13795b;
}
.check-save-button {
  color: #fff;
  background: #13795b;
  border-color: #13795b;
}
.check-delete-button {
  color: #fff;
  background: #b54747;
  border-color: #b54747;
}

.price-sync-toolbar input {
  min-width: 320px;
}
.sync-tabs {
  margin-bottom: 12px;
}
.price-sync-table td {
  vertical-align: top;
}
.price-sync-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.price-sync-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #edf2ef;
  color: #50635b;
  white-space: nowrap;
}
.price-sync-badge.ready {
  background: #e4f4ec;
  color: #0c6b45;
}
.price-sync-badge.warn {
  background: #fff2cf;
  color: #8a5b00;
}
.price-sync-badge.danger {
  background: #ffe0df;
  color: #a3322b;
}
.price-sync-badge.ok {
  background: #d7f0e2;
  color: #0b6a3f;
}
.price-sync-risk {
  color: #8a5b00;
  line-height: 1.45;
}
.price-sync-detail-card {
  max-width: min(1100px, 94vw);
}
.price-sync-detail-head {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 8px 16px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7faf8;
}
.image-sync-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #dbe5df;
  background: #f5f7f6;
}
.image-sync-suggested {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7faf8;
}
.tts-settings-block {
  margin-bottom: 14px;
}
.tts-settings-grid {
  display: grid;
  grid-template-columns: minmax(120px, 160px) minmax(170px, 220px) minmax(90px, 120px) 1fr auto;
  gap: 10px;
  align-items: end;
}
.tts-settings-grid label {
  display: grid;
  gap: 4px;
  color: #496055;
  font-size: 13px;
}
.tts-settings-grid select,
.tts-settings-grid input {
  min-height: 34px;
}
.tts-preview-input {
  min-width: 220px;
}
.tts-preview-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .app-shell {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .sidebar {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .content {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .global-sound-row,
  .sorting-rule-row,
  .smart-input-row,
  .accessory-row,
  .tts-settings-grid,
  .compact-return-header,
  .account-row {
    grid-template-columns: 1fr;
  }
  .smart-actions {
    margin-top: 0;
  }
  .supplier-form,
  .supplier-row,
  .template-editor,
  .check-compare-grid {
    grid-template-columns: 1fr;
  }
}
:root {
  --puhui-115: "Alibaba PuHuiTi 3.0 115 Black";
  --puhui-95: "Alibaba PuHuiTi 3.0 95 ExtraBold";
  --puhui-55: "Alibaba PuHuiTi 3.0 55 Regular";
  --puhui-35: "Alibaba PuHuiTi 3.0 35 Thin";
}
@font-face {
  font-family: "Alibaba PuHuiTi 3.0 115 Black";
  src: url("/static/fonts/AlibabaPuHuiTi-3-115-Black.woff2") format("woff2");
}
@font-face {
  font-family: "Alibaba PuHuiTi 3.0 95 ExtraBold";
  src: url("/static/fonts/AlibabaPuHuiTi-3-95-ExtraBold.woff2") format("woff2");
}
@font-face {
  font-family: "Alibaba PuHuiTi 3.0 55 Regular";
  src: url("/static/fonts/AlibabaPuHuiTi-3-55-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Alibaba PuHuiTi 3.0 35 Thin";
  src: url("/static/fonts/AlibabaPuHuiTi-3-35-Thin.woff2") format("woff2");
}
.status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  background: #eef3f1;
  color: #52625c;
}
.status-badge.success {
  background: #e5f4e9;
  color: #267247;
}
.status-badge.info {
  background: #e9f1ff;
  color: #2f5f9f;
}
.status-badge.danger {
  background: #ffe7e3;
  color: #a23729;
}

.return-broadcast-list {
  display: grid;
  gap: 8px;
}
.return-broadcast-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto minmax(150px, auto) minmax(120px, auto);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #dbe5df;
  border-radius: 10px;
  background: #fbfdfb;
}
.return-broadcast-row label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px;
  align-items: center;
}
.return-broadcast-row input {
  min-width: 180px;
}
.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (max-width: 900px) {
  .return-broadcast-row {
    grid-template-columns: 1fr;
  }
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #e7f2ff;
  color: #236192;
  font-weight: 700;
  white-space: nowrap;
}
.filter-tag button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 900;
  padding: 0 2px;
}
.supplier-filter-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 260px;
  min-width: 220px;
  max-width: 320px;
  min-height: 36px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
}
.supplier-filter-box input {
  flex: 1 1 auto;
  width: auto;
  min-width: 70px;
  border: 0;
  outline: 0;
  padding: 6px 2px;
  background: transparent;
}
.supplier-filter-box .supplier-results {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 50;
  min-width: 260px;
  max-height: 280px;
  overflow: auto;
  background: #fff;
  border: 1px solid #dbe5df;
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(31, 48, 42, .14);
}
.supplier-filter-box .supplier-results:empty {
  display: none;
}
.ledger-flow-filters {
  align-items: center;
  flex-wrap: wrap;
}
.ledger-flow-filters label {
  flex: 0 0 auto;
  margin: 0;
}
.ledger-flow-filters label input {
  min-width: 130px;
}
.ledger-flow-filters .tiny-input {
  min-width: 90px;
}