@font-face {
  font-family: "AlimamaShuHeiTi";
  src: url("/fonts/AlimamaShuHeiTi-Bold.ttf") format("truetype"),
       url("/fonts/AlimamaShuHeiTi-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "AlimamaShuHeiTi", "Microsoft YaHei", sans-serif;
}
/* 原来的 body font-family 那条保持不变，单独加一条 media query */
@media (min-width: 769px) {
  body {
    overflow: hidden;
  }
}

input[type="date"] {
  font-family: "AlimamaShuHeiTi", "Microsoft YaHei", sans-serif;
}

input, textarea, button, select {
  font-family: "AlimamaShuHeiTi", "Microsoft YaHei", sans-serif;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

body {
  background: #f4f1e5;
}

h2 {
  color: #2c3e42;
}

.toolbar {
  margin-bottom: 12px;
}

thead {
  background: #116f90;
  color: white;
}

button {
  padding: 8px 16px;
  margin-right: 8px;
  border: none;
  border-radius: 20px;
  background: #116f90;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  transition: opacity 0.15s;
}

button.danger {
  background: #d9534f;
}

button.small {
  padding: 5px 12px;
  font-size: 12px;
  background: #6b8d9c;
}

button:hover {
  opacity: 0.85;
}

.glass {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 20px rgba(17, 111, 144, 0.12);
}

.table-wrap {
  width: 100%;
  border-radius: 15px;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 80vh;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  min-width: 1150px;
}

th, td {
  border: 1px solid rgba(17, 111, 144, 0.15);
  padding: 10px 5px;
  text-align: center;
  font-size: 13px;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  vertical-align: middle;
}

input, select {
  width: 95%;
  box-sizing: border-box;
  padding: 5px;
  font-size: 13px;
  border: 1px solid rgba(17, 111, 144, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
}

textarea.addr-input {
  width: 95%;
  box-sizing: border-box;
  padding: 5px;
  font-size: 13px;
  border: 1px solid rgba(17, 111, 144, 0.3);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  resize: none;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  display: block;
}

.row-index {
  font-weight: bold;
  color: #116f90;
  font-size: 12px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 15px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  margin: 2px;
  padding: 0;
}

.icon-btn.save {
  background: #3f9142;
  color: #fff;
}

.icon-btn.save:disabled {
  background: #c0c4cc;
  cursor: not-allowed;
}

.icon-btn.del {
  background: #d9534f;
  color: #fff;
}

.icon-btn.dup {
  background: #c98a2e;
  color: #fff;
}

.icon-btn:hover:not(:disabled) {
  opacity: 0.85;
}

/* ===== 通知面板 ===== */
.notify-panel {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 280px;
}

.notify-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(201, 138, 46, 0.95);
  color: #fff;
  font-size: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  animation: notify-in 0.2s ease;
}

@keyframes notify-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.notify-item .notify-text {
  flex: 1;
  line-height: 1.4;
}

.notify-item .notify-close {
  cursor: pointer;
  flex-shrink: 0;
  font-size: 14px;
  opacity: 0.85;
  line-height: 1;
}

.notify-item .notify-close:hover {
  opacity: 1;
}

/* ===== 处理状态 ===== */
.status-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 0;
}

.status-picker-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(17, 111, 144, 0.15);
  color: #116f90;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  padding: 0;
  line-height: 1;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  outline: none;
  margin: 0;
}

.status-picker-btn:hover {
  background: rgba(17, 111, 144, 0.3);
}

.status-picker-btn i {
  display: block;
  line-height: 1;
  font-size: 12px;
}

.status-tag-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
  line-height: 1.2;
}

.status-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  line-height: 1.2;
  box-sizing: border-box;
}

.status-tag-等待物料 { background: rgba(201, 138, 46, 0.18); color: #c98a2e; }
.status-tag-全部寄出 { background: rgba(63, 145, 66, 0.18);  color: #3f9142; }
.status-tag-部分寄出 { background: rgba(17, 111, 144, 0.18); color: #116f90; }
.status-tag-等待寄出 { background: rgba(144, 147, 153, 0.18); color: #909399; }

table.rm-table th {
  height: 30px;
}

/* ===== 物料汇总按钮 ===== */
.mat-summary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 8px;
  margin: 0;
  border-radius: 15px;
  background: none;
  cursor: pointer;
  width: auto;
}

.mat-summary-btn:hover {
  background: rgba(17, 111, 144, 0.16);
}

.mat-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 15px;
  font-size: 11px;
  font-weight: bold;
}

.mat-dot-shipped  { background: rgba(63, 145, 66, 0.18);  color: #2c7a30; }
.mat-dot-pending  { background: rgba(217, 83, 79, 0.18);  color: #c0392b; }
.mat-dot-merchant { background: rgba(142, 68, 173, 0.18); color: #7d3c98; }

/* ===== 遮罩 ===== */
.mask {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(60, 60, 60, 0.25);
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#matMask {
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 20px 0;
}

.mask.show {
  display: flex;
}

#purchaseHistoryPanel {
  display: none !important;
}

#purchaseHistoryPanel.show {
  display: flex !important;
}

/* ===== 弹窗面板 ===== */
.panel {
  position: relative;
  background: rgba(244, 241, 229, 0.85);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 20px;
  border-radius: 20px;
  width: 380px;
  box-shadow: 0 8px 30px rgba(17, 111, 144, 0.2);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.panel h3 {
  margin-top: 0;
  color: #2c3e42;
}

.panel-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(217, 83, 79, 0.12);
  color: #d9534f;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
}

.panel-close-btn:hover {
  background: rgba(217, 83, 79, 0.25);
}

.rm-panel {
  min-width: 1500px;
  max-width: 100%;
}

.rm-body {
  flex: 1;
  overflow: auto;
  max-height: fit-content;
}

.rm-info-bar {
  display: flex;
  margin-bottom: 12px;
  background: rgba(17, 111, 144, 0.06);
  border: 1px solid rgba(17, 111, 144, 0.15);
  border-radius: 5px;
}

.rm-info-item {
  min-width: 0;
  padding: 8px 12px;
  text-align: left;
  box-sizing: border-box;
}

.rm-info-item.rm-info-address {
  flex: 0 0 70%;
  max-width: 70%;
  margin-right: 12px;
}

.rm-info-item.rm-info-status {
  flex: 0 0 30%;
  max-width: 30%;
  border-left: 1px solid rgba(17, 111, 144, 0.15);
  padding-left: 26px;
  text-align: center;
}

.rm-info-item .rm-info-label {
  font-size: 11px;
  color: #8a8578;
  margin-bottom: 4px;
}

.rm-info-item .rm-info-value {
  font-size: 13px;
  color: #2c3e42;
  font-weight: bold;
  word-break: break-word;
  line-height: 1.4;
}

.rm-edit-btn {
  position: absolute;
  top: 14px;
  right: 54px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 111, 144, 0.12);
  color: #116f90;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  transition: background 0.15s;
}

.rm-edit-btn:hover { background: rgba(17, 111, 144, 0.25); }
.rm-edit-btn.active { background: #116f90; color: #fff; }

.rm-save-btn {
  position: absolute;
  top: 14px;
  right: 94px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(63, 145, 66, 0.15);
  color: #3f9142;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  transition: background 0.15s, opacity 0.15s;
}

.rm-save-btn:hover { background: rgba(63, 145, 66, 0.3); }
.rm-save-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.rm-save-btn.dirty { background: #3f9142; color: #fff; }

/* ===== rm-table ===== */
.rm-table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
}

.rm-table th, .rm-table td {
  border: none;
  text-align: center;
  font-size: 12px;
  white-space: nowrap;
}

.rm-table thead th {
  background: rgba(17, 111, 144, 0.85);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
}

.rm-table thead th:first-child {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 3;
  background: rgba(17, 111, 144, 0.95);
}

.rm-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: center;
  font-size: 12px;
}

.rm-table tbody td {
  background: rgba(255, 255, 255, 0.5);
}

.rm-table tbody tr.stock-row th {
  background: rgba(17, 111, 144, 0.06);
  color: #8a8578;
  font-weight: normal;
}

.rm-table tbody tr.stock-row td {
  background: rgba(17, 111, 144, 0.04);
  font-size: 11px;
  color: #8a8578;
}

.rm-table tbody th.row-shipped   { background: #10b981 !important; color: #fff; border: none; }
.rm-table tbody th.row-pending   { background: #c0392b !important; color: #fff; border: none; }
.rm-table tbody th.row-merchant  { background: #7d3c98 !important; color: #fff; border: none; }
.rm-table tbody th.row-stock     { background: rgba(17, 111, 144, 0.15) !important; color: #116f90; border: none; }
.rm-table tbody th.row-incoming  { background: #c98a2e !important; color: #fff; border: none; }
.rm-table tbody th.row-purchasing { background: #7d3c98 !important; color: #fff; border: none; }
.rm-table tbody th.row-operation { background: rgba(217, 83, 79, 0.15) !important; color: #d9534f; border: none; }
.rm-table tbody th.row-arrival   { background: rgba(63, 145, 66, 0.15) !important; color: #3f9142; border: none; }
.rm-table tbody th.row-unit-price { background: rgba(63, 145, 66, 0.15) !important; color: #3f9142; border: none; }
.rm-table tbody th.row-min-order  { background: rgba(17, 111, 144, 0.15) !important; color: #116f90; border: none; }
.rm-table tbody th.row-extra-cost { background: rgba(201, 138, 46, 0.15) !important; color: #c98a2e; border: none; }
.rm-table tbody th.row-period    { background: rgba(201, 138, 46, 0.18) !important; color: #c98a2e; border: none; font-weight: bold; vertical-align: middle; }
.rm-table tbody th.row-period-sub { background: rgba(201, 138, 46, 0.06) !important; color: #8a8578; border: none; font-weight: normal; font-size: 11px; }
.rm-table tbody th.row-cost      { background: rgba(201, 138, 46, 0.15) !important; color: #c98a2e; border: none; }
.rm-table tbody th.row-screenshot { background: rgba(107, 141, 156, 0.15) !important; color: #6b8d9c; border: none; }

.row-subtotal-cell {
  font-weight: bold;
  color: #c98a2e;
  background: rgba(201, 138, 46, 0.08) !important;
}

.rm-qty-input {
  width: 44px;
  text-align: center;
  padding: 3px;
  border: 1px solid rgba(17, 111, 144, 0.3);
  border-radius: 6px;
  font-size: 12px;
  -moz-appearance: textfield;
}

.rm-qty-input:disabled {
  background: transparent;
  border-color: transparent;
  color: #000000;
  cursor: default;
}

.rm-qty-input::-webkit-inner-spin-button,
.rm-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.sub-period-input {
  width: 65px;
  text-align: center;
  padding: 3px;
  border: 1px solid rgba(201, 138, 46, 0.3);
  border-radius: 6px;
  font-size: 12px;
  color: #c98a2e;
}

.sub-period-input:disabled {
  background: transparent;
  border-color: transparent;
  color: #8a8578;
  cursor: default;
}

/* ===== 物料管理工具栏 ===== */
.mat-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.mat-add-row {
  display: flex;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 260px;
  max-width: 420px;
}

.mat-add-row input { flex: 1; }
.mat-add-row .stock-input { flex: none; width: 70px; }

.mat-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mat-save-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(63, 145, 66, 0.15);
  color: #3f9142;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s, opacity 0.15s;
}

.mat-save-btn:hover { background: rgba(63, 145, 66, 0.3); }
.mat-save-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.mat-save-btn.dirty { background: #3f9142; color: #fff; }

/* ===== Split Button ===== */
.split-btn {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.split-btn-main {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border-radius: 15px 0 0 15px;
  background: rgba(17, 111, 144, 0.12);
  color: #116f90;
  border: none;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  margin: 0;
}

.split-btn-main.active { background: #116f90; color: #fff; }

.split-btn-caret {
  width: 22px;
  height: 30px;
  border-radius: 0 15px 15px 0;
  background: rgba(17, 111, 144, 0.12);
  color: #116f90;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 11px;
}

.split-btn-caret.active { background: #116f90; color: #fff; }

.split-menu {
  position: absolute;
  top: 0;
  right: 40px;
  min-width: 100px;
  background: rgba(244, 241, 229, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(17, 111, 144, 0.2);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(17, 111, 144, 0.2);
  overflow: hidden;
  display: none;
  z-index: 10;
}

.split-menu.show { display: block; }

.split-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  color: #2c3e42;
  border-radius: 0;
  padding: 8px 12px;
  margin: 0;
  font-size: 12px;
}

.split-menu button:hover { background: rgba(17, 111, 144, 0.1); }
.split-menu button.active { background: rgba(17, 111, 144, 0.18); font-weight: bold; }

.purchase-batch-toolbar { margin-bottom: 12px; }

.purchase-batch-add {
  display: flex;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 200px;
  max-width: 320px;
}

.purchase-batch-add input { flex: 1; }

.split-menu.batch-menu {
  max-height: 220px;
  overflow-y: auto;
}

.split-menu.batch-menu.wheel-mode {
  scroll-snap-type: y mandatory;
  padding: 90px 0;
}

.split-menu.batch-menu.wheel-mode button {
  scroll-snap-align: center;
  text-align: center;
  padding: 10px 12px;
  font-size: 13px;
}

.split-menu.batch-menu.wheel-mode button.wheel-center {
  font-weight: bold;
  font-size: 15px;
  background: rgba(17, 111, 144, 0.12);
  color: #116f90;
}

.mat-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.history-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(17, 111, 144, 0.12);
  color: #116f90;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  transition: background 0.15s;
  flex-shrink: 0;
}

.history-btn:hover { background: rgba(17, 111, 144, 0.25); }

.download-history-btn {
  position: absolute;
  top: 14px;
  right: 134px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 111, 144, 0.12);
  color: #116f90;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  transition: background 0.15s;
}

.download-history-btn:hover { background: rgba(17, 111, 144, 0.25); }

.mat-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  background: #116f90;
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.mat-action-btn.upload { background: #6b8d9c; }
.mat-action-btn.has-value { background: #3f9142; }
.mat-action-btn:hover { opacity: 0.85; }

.mat-purchase-link {
  display: block;
  font-size: 11px;
  margin-top: 4px;
  color: #116f90;
}

.rm-footer {
  padding-top: 12px;
  margin-top: 10px;
  border-top: 1px solid rgba(17, 111, 144, 0.15);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.loading-hint {
  padding: 30px;
  text-align: center;
  color: #8a8578;
}

.load-more-wrap {
  text-align: center;
  margin-top: 14px;
  margin-bottom: 4px;
}

.load-more-btn {
  background: #6b8d9c;
  font-size: 13px;
  padding: 8px 20px;
}

.load-more-hint {
  font-size: 12px;
  color: #8a8578;
  margin-top: 6px;
}

/* ===== 登录 ===== */
.login-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: #f4f1e5;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.login-box {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
  padding: 36px 32px;
  width: 320px;
  box-shadow: 0 8px 30px rgba(17, 111, 144, 0.2);
  text-align: center;
}

.login-box h2 { margin-top: 0; color: #2c3e42; }

.login-box input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid rgba(17, 111, 144, 0.3);
  border-radius: 10px;
  font-size: 14px;
}

.login-box button { width: 100%; padding: 10px; margin: 0; }

.login-error {
  color: #d9534f;
  font-size: 12px;
  margin-bottom: 10px;
  min-height: 16px;
}

.logout-btn {
  background: #d9534f !important;
  color: #ffffff !important;
}

/* ===== 工具栏图标按钮 ===== */
.toolbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(17, 111, 144, 0.12);
  color: #116f90;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  margin-right: 8px;
  position: relative;
  transition: background 0.15s;
}

.toolbar-icon-btn:hover { background: rgba(17, 111, 144, 0.25); opacity: 1; }
.toolbar-icon-btn.active { background: #116f90; color: #fff; }

/* ===== 搜索面板 ===== */
.search-panel {
  display: none;
  position: fixed;
  width: 280px;
  background: rgba(244, 241, 229, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(17, 111, 144, 0.2);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(17, 111, 144, 0.2);
  padding: 0 14px 14px;
  z-index: 999;
}

.search-panel.show { display: block; }

.search-panel-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  margin: 0 -14px 10px;
  cursor: move;
  color: #8a8578;
  font-size: 14px;
  border-bottom: 1px solid rgba(17, 111, 144, 0.1);
  user-select: none;
}

.search-panel label {
  display: block;
  font-size: 11px;
  color: #8a8578;
  margin-bottom: 4px;
  margin-top: 8px;
}

.search-panel label:first-of-type { margin-top: 0; }
.search-panel input { width: 100%; box-sizing: border-box; }

.search-panel-date-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-panel-date-row input { flex: 1; }

.search-panel-footer {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.search-panel-footer button {
  flex: 1;
  padding: 6px 0;
  font-size: 12px;
  margin: 0;
}

.search-panel-footer button.reset-btn { background: #6b8d9c; }

.toolbar-anchor {
  position: relative;
  display: inline-block;
}

/* ===== 列/行拖拽把手 ===== */
#table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #0d5570 !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  user-select: none;
}

.col-resizer {
  position: absolute;
  right: 0;
  top: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
}

.col-resizer:hover,
.col-resizer.dragging {
  background: rgba(17, 111, 144, 0.35);
}

.row-resize-td {
  width: 0;
  min-width: 0;
  padding: 0;
  border: none;
  position: relative;
  overflow: visible;
}

.row-resizer {
  position: absolute;
  bottom: -3px;
  left: -9999px;
  right: 0;
  height: 6px;
  cursor: row-resize;
  z-index: 10;
  border-radius: 0;
}

.row-resizer:hover,
.row-resizer.dragging {
  background: rgba(17, 111, 144, 0.30);
}

#tbody tr td { overflow: visible; }

body.col-resizing { user-select: none !important; cursor: col-resize !important; }
body.row-resizing { user-select: none !important; cursor: row-resize !important; }

/* ===== trackno-cell ===== */
.trackno-cell {
  position: relative;
  display: flex;
  align-items: center;
}

.trackno-cell input,
.trackno-cell textarea { width: 100%; }

.trackno-copy-btn {
  position: absolute;
  right: 2px;
  opacity: 0;
  background: #797979c9;
  border: none;
  cursor: pointer;
  color: #ffffff;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 13px;
  transition: opacity .15s;
  pointer-events: none;
}

.trackno-cell:hover .trackno-copy-btn {
  opacity: 1;
  pointer-events: auto;
}

/* ===== 解析面板 ===== */
.parse-panel {
  position: relative;
  width: 486px;
  max-width: 95vw;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface-1);
  border-radius: 12px;
  padding: 15px;
  box-sizing: border-box;
}

.parse-close-btn {
  position: absolute;
  top: 6px;
  right: -10px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
}

.parse-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.parse-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.parse-label {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 10px 5px;
}

.parse-textarea {
  resize: vertical;
  padding: 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-0);
  color: var(--text-primary);
  line-height: 1.6;
  width: 100%;
  box-sizing: border-box;
}

.parse-textarea:focus {
  outline: none;
  border-color: var(--border-accent);
}

.parse-img-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 172px;
  border: 1.5px dashed red;
  border-radius: 8px;
  gap: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.parse-img-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.parse-img-area.drag-over {
  border-color: var(--border-accent) !important;
  background: var(--bg-accent);
}

.parse-img-area.recognizing { cursor: not-allowed; }

.parse-img-area .ti-loader {
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.parse-footer {
  display: flex;
  gap: 10px;
  padding-top: 4px;
}

.parse-btn-auto {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 0;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  background: green;
  color: #fff;
  transition: opacity .15s;
}

.parse-btn-auto:disabled { opacity: .4; cursor: not-allowed; }
.parse-btn-auto:not(:disabled):hover { opacity: .85; }

.parse-btn-manual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 0;
  border-radius: 25px;
  border: 1px solid #7a7a7a70;
  cursor: pointer;
  font-size: 13px;
  background: #0c1e928f;
  color: var(--text-primary);
  transition: background .15s;
}

.parse-btn-manual:hover { opacity: .85; }

/* ===== 卡片脏数据提示条 ===== */
.card-dirty-bar {
  grid-column: 1 / -1;
  background: rgba(201, 138, 46, 0.15);
  color: #c98a2e;
  font-size: 11px;
  padding: 5px 12px;
  border-bottom: 1px solid rgba(201, 138, 46, 0.25);
  text-align: center;
  order: 0;
}

/* ============================================================
   暗色主题
   ============================================================ */
@media (prefers-color-scheme: dark) {

  body { background: #1c1a16; color: #ddd9cf; }
  h2, h3 { color: #ddd9cf; }

  .glass {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  }

  thead { background: #0d5570; }
  th, td { border-color: rgba(255, 255, 255, 0.07); }
  tbody tr:hover { background: rgba(255, 255, 255, 0.03); }

  input, select, textarea.addr-input {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
    color: #ddd9cf;
  }

  input:focus, select:focus, textarea.addr-input:focus {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(100, 180, 210, 0.45);
    outline: none;
  }

  input::placeholder, textarea::placeholder { color: #5c5850; }
  input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.65); }

  input:disabled, input[disabled],
  .rm-qty-input:disabled,
  .sub-period-input:disabled {
    background: transparent;
    border-color: transparent;
    color: #9a958c;
    cursor: default;
  }

  button { background: #0d5570; }
  button.small { background: #3d5e6a; }
  button.danger { background: #943330; }

  .toolbar-icon-btn {
    background: rgba(255, 255, 255, 0.07);
    color: #9ab8c5;
    border: 1px solid rgba(255, 255, 255, 0.10);
  }

  .toolbar-icon-btn:hover { background: rgba(255, 255, 255, 0.12); color: #ddd9cf; }
  .toolbar-icon-btn.active { background: #0d5570; color: #fff; border-color: transparent; }

  .logout-btn { background: #7a2e2b !important; color: #ffd5d3 !important; border-color: transparent !important; }
  .logout-btn:hover { background: #943330 !important; }

  .row-index { color: #6ab0c8; }

  .status-tag-等待物料 { background: rgba(201, 138, 46, 0.22); color: #e8b055; }
  .status-tag-全部寄出 { background: rgba(63, 145, 66, 0.22);  color: #5dba60; }
  .status-tag-部分寄出 { background: rgba(17, 111, 144, 0.28); color: #6ab0c8; }
  .status-tag-等待寄出 { background: rgba(144, 147, 153, 0.18); color: #888480; }

  .status-picker-btn { background: rgba(255, 255, 255, 0.08); color: #9ab8c5; }
  .status-picker-btn:hover { background: rgba(255, 255, 255, 0.15); color: #ddd9cf; }

  .mat-dot-shipped  { background: rgba(63, 145, 66, 0.28);   color: #5dba60; }
  .mat-dot-pending  { background: rgba(192, 57, 43, 0.28);   color: #e06050; }
  .mat-dot-merchant { background: rgba(125, 60, 152, 0.28);  color: #ba7ed6; }
  .mat-summary-btn:hover { background: rgba(255, 255, 255, 0.07); }

  .icon-btn.save { background: #2d6e30; color: #aee8b0; }
  .icon-btn.save:disabled { background: #2e2d2b; color: #555250; }
  .icon-btn.del  { background: #7a2e2b; color: #ffd5d3; }
  .icon-btn.dup  { background: #7a5010; color: #f5cc7a; }

  .notify-item {
    background: rgba(140, 90, 20, 0.92);
    color: #fde8b8;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  }

  .mask { background: rgba(0, 0, 0, 0.60); }

  .panel {
    background: rgba(28, 26, 22, 0.94);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.55);
  }

  .panel h3 { color: #ddd9cf; }
  .panel-close-btn { background: rgba(192, 57, 43, 0.18); color: #e06050; }
  .panel-close-btn:hover { background: rgba(192, 57, 43, 0.35); }

  .rm-info-bar { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
  .rm-info-item .rm-info-label { color: #5c5850; }
  .rm-info-item .rm-info-value { color: #ddd9cf; }
  .rm-info-item.rm-info-status { border-left-color: rgba(255, 255, 255, 0.08); }

  .rm-edit-btn { background: rgba(255, 255, 255, 0.07); color: #9ab8c5; }
  .rm-edit-btn:hover { background: rgba(255, 255, 255, 0.13); }
  .rm-edit-btn.active { background: #0d5570; color: #fff; }

  .rm-save-btn { background: rgba(45, 110, 48, 0.22); color: #5dba60; }
  .rm-save-btn:hover { background: rgba(45, 110, 48, 0.38); }
  .rm-save-btn.dirty { background: #2d6e30; color: #aee8b0; }

  .rm-footer { border-top-color: rgba(255, 255, 255, 0.08); }
  .rm-footer button.small { background: #3d5e6a; color: #c8dde5; }
  .rm-footer button.small:disabled { background: #2a2826; color: #484540; }

  .rm-table thead th { background: rgba(13, 85, 112, 0.85); }
  .rm-table thead th:first-child { background: rgba(13, 85, 112, 0.95); }
  .rm-table tbody td { background: rgba(255, 255, 255, 0.04); }
  .rm-table tbody tr.stock-row th { background: rgba(255, 255, 255, 0.04); color: #7a7570; }
  .rm-table tbody tr.stock-row td { background: rgba(255, 255, 255, 0.03); color: #7a7570; }

  .rm-table tbody th.row-shipped    { background: #1a6e4a !important; color: #a0eac0; }
  .rm-table tbody th.row-pending    { background: #7a2e2b !important; color: #ffd5d3; }
  .rm-table tbody th.row-merchant   { background: #4e2668 !important; color: #d8aaee; }
  .rm-table tbody th.row-stock      { background: rgba(13, 85, 112, 0.25) !important; color: #6ab0c8; }
  .rm-table tbody th.row-incoming   { background: #7a5010 !important; color: #f5cc7a; }
  .rm-table tbody th.row-purchasing { background: #4e2668 !important; color: #d8aaee; }
  .rm-table tbody th.row-operation  { background: rgba(192, 57, 43, 0.20) !important; color: #e06050; }
  .rm-table tbody th.row-arrival    { background: rgba(45, 110, 48, 0.20) !important; color: #5dba60; }
  .rm-table tbody th.row-unit-price { background: rgba(45, 110, 48, 0.20) !important; color: #5dba60; }
  .rm-table tbody th.row-min-order  { background: rgba(13, 85, 112, 0.25) !important; color: #6ab0c8; }
  .rm-table tbody th.row-extra-cost { background: rgba(120, 80, 10, 0.22) !important; color: #e8b055; }
  .rm-table tbody th.row-period     { background: rgba(120, 80, 10, 0.35) !important; color: #e8b055; }
  .rm-table tbody th.row-period-sub { background: rgba(120, 80, 10, 0.12) !important; color: #887860; }
  .rm-table tbody th.row-cost       { background: rgba(120, 80, 10, 0.22) !important; color: #e8b055; }
  .rm-table tbody th.row-screenshot { background: rgba(80, 110, 120, 0.20) !important; color: #8ab0bc; }

  .row-subtotal-cell { color: #e8b055; background: rgba(120, 80, 10, 0.15) !important; }

  .rm-qty-input:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(100, 180, 210, 0.30);
    color: #ddd9cf;
  }

  .sub-period-input:not(:disabled) {
    border-color: rgba(201, 138, 46, 0.35);
    background: rgba(255, 255, 255, 0.07);
    color: #e8b055;
  }

  .mat-save-btn { background: rgba(45, 110, 48, 0.22); color: #5dba60; }
  .mat-save-btn:hover { background: rgba(45, 110, 48, 0.38); }
  .mat-save-btn.dirty { background: #2d6e30; color: #aee8b0; }

  .split-btn-main { background: rgba(255, 255, 255, 0.07); color: #9ab8c5; }
  .split-btn-main.active { background: #0d5570; color: #fff; }
  .split-btn-caret { background: rgba(255, 255, 255, 0.07); color: #9ab8c5; border-left-color: rgba(255, 255, 255, 0.10); }
  .split-btn-caret.active { background: #0d5570; color: #fff; }

  .split-menu {
    background: rgba(32, 30, 25, 0.97);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  }

  .split-menu button { color: #c8c2b8; background: none; }
  .split-menu button:hover { background: rgba(255, 255, 255, 0.07); color: #ddd9cf; }
  .split-menu button.active { background: rgba(13, 85, 112, 0.30); color: #6ab0c8; }
  .split-menu.batch-menu.wheel-mode button.wheel-center { background: rgba(13, 85, 112, 0.25); color: #6ab0c8; }

  .history-btn { background: rgba(255, 255, 255, 0.07); color: #9ab8c5; }
  .history-btn:hover { background: rgba(255, 255, 255, 0.13); color: #ddd9cf; }
  .download-history-btn { background: rgba(255, 255, 255, 0.07); color: #9ab8c5; }
  .download-history-btn:hover { background: rgba(255, 255, 255, 0.13); color: #ddd9cf; }

  .mat-action-btn { background: #0d5570; }
  .mat-action-btn.upload { background: #3d5e6a; }
  .mat-action-btn.has-value { background: #2d6e30; }
  .mat-purchase-link { color: #6ab0c8; }

  .search-panel {
    background: rgba(30, 28, 23, 0.97);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  }

  .search-panel-drag-handle { color: #5c5850; border-bottom-color: rgba(255, 255, 255, 0.07); }
  .search-panel label { color: #5c5850; }
  .search-panel-footer button.reset-btn { background: #3d5e6a; }

  .load-more-btn { background: #3d5e6a; }
  .load-more-hint, .loading-hint { color: #5c5850; }

  .login-mask { background: #1c1a16; }
  .login-box {
    background: rgba(40, 38, 32, 0.90);
    border-color: rgba(255, 255, 255, 0.09);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  }
  .login-box h2 { color: #ddd9cf; }
  .login-box button { background: #0d5570; }
  .login-error { color: #e06050; }

  .col-resizer:hover, .col-resizer.dragging { background: rgba(100, 180, 210, 0.35); }
  .row-resizer:hover, .row-resizer.dragging { background: rgba(100, 180, 210, 0.30); }

  .parse-panel {
    background: #1e2025 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
  }
  .parse-textarea {
    background: #16181d !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0dfd8 !important;
  }
  .parse-img-area { border-color: rgba(255,255,255,0.1) !important; }
  .parse-btn-manual {
    background: #16181d !important;
    border-color: rgba(255,255,255,0.1) !important;
    color: #e0dfd8 !important;
  }

  .card-dirty-bar {
    background: rgba(140, 90, 20, 0.25);
    color: #e8b055;
    border-bottom-color: rgba(140, 90, 20, 0.35);
  }
}

/* ============================================================
   移动端卡片化 — max-width: 768px
   ============================================================ */
@media (max-width: 768px) {

  body {
    overflow: auto !important;
    margin: 12px;
  }

  h2 { font-size: 16px; margin: 0 0 10px; }

  .toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
  }

  .toolbar-icon-btn { width: 40px; height: 40px; margin-right: 0; }

  /* 隐藏拖拽把手 */
  .col-resizer,
  .row-resizer,
  .row-resize-td { display: none !important; }

  /* 表格容器 */
  .table-wrap {
    overflow: visible !important;
    max-height: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 表格本体 */
  table, #table {
    display: block !important;
    min-width: unset !important;
    table-layout: auto !important;
    width: 100% !important;
  }

  /* 隐藏 thead */
  #table thead {
    display: none !important;
    position: static !important;
  }

  #table thead th { position: static !important; }

  /* tbody */
  #table tbody {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
  }

  /* 每行变卡片：3列 grid */
  #table tbody tr {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(17, 111, 144, 0.15);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(17, 111, 144, 0.08);
    height: auto !important;
    min-width: unset !important;
  }

  /* 所有 td 默认样式 */
  #table tbody td {
    display: block !important;
    border: none !important;
    border-bottom: 1px solid rgba(17, 111, 144, 0.07) !important;
    padding: 8px 12px;
    text-align: left;
    overflow: visible !important;
  }

  /* ── 第1行：序号(1) + 申请日期(2) + 处理日期(4) ── */
  #table tbody td:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
    background: rgba(17, 111, 144, 0.06);
    border-bottom: 1px solid rgba(17, 111, 144, 0.10) !important;
    display: flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  #table tbody td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    background: rgba(17, 111, 144, 0.06);
    border-bottom: 1px solid rgba(17, 111, 144, 0.10) !important;
  }

  /* 第4列 = 处理日期，放右上角 */
  #table tbody td:nth-child(4) {
    grid-column: 3;
    grid-row: 1;
    background: rgba(17, 111, 144, 0.06);
    border-bottom: 1px solid rgba(17, 111, 144, 0.10) !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  /* ── 第2行：收件地址(3) 全宽 ── */
  #table tbody td:nth-child(3) {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  /* ── 第3行：处理状态(5) 左半 + 物料(6) 右半 ── */
  #table tbody td:nth-child(5) {
    grid-column: 1 / 2;
    grid-row: 3;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-right: 1px solid rgba(17, 111, 144, 0.07) !important;
  }

  #table tbody td:nth-child(6) {
    grid-column: 2 / -1;
    grid-row: 3;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* ── 后续各行全宽 ── */
  #table tbody td:nth-child(7)  { grid-column: 1 / -1; grid-row: 4; }
  #table tbody td:nth-child(8)  { grid-column: 1 / -1; grid-row: 5; }
  #table tbody td:nth-child(9)  { grid-column: 1 / -1; grid-row: 6; }

  #table tbody td:nth-child(10) {
    grid-column: 1 / -1;
    grid-row: 7;
    display: flex !important;
    justify-content: flex-end;
    gap: 8px;
    background: rgba(17, 111, 144, 0.03);
    border-top: 1px solid rgba(17, 111, 144, 0.08) !important;
    border-bottom: none !important;
  }

  /* ── 伪元素 label ── */
  #table tbody td:nth-child(2)::before { content: "申请日期"; display: block; font-size: 10px; color: #8a8578; margin-bottom: 3px; }
  #table tbody td:nth-child(4)::before { content: "处理日期"; display: block; font-size: 10px; color: #8a8578; margin-bottom: 3px; }
  #table tbody td:nth-child(3)::before { content: "收件地址"; display: block; font-size: 10px; color: #8a8578; margin-bottom: 3px; }
  #table tbody td:nth-child(7)::before { content: "快递单号"; display: block; font-size: 10px; color: #8a8578; margin-bottom: 3px; }
  #table tbody td:nth-child(8)::before { content: "客户来源"; display: block; font-size: 10px; color: #8a8578; margin-bottom: 3px; }
  #table tbody td:nth-child(9)::before { content: "备注";     display: block; font-size: 10px; color: #8a8578; margin-bottom: 3px; }

  /* input/textarea 撑满 */
  #table tbody td input,
  #table tbody td textarea,
  #table tbody td select {
    width: 100% !important;
    box-sizing: border-box;
  }

  .trackno-cell { width: 100%; }
  .trackno-cell input, .trackno-cell textarea { flex: 1; }

  .icon-btn { width: 34px; height: 34px; font-size: 15px; }

  .loading-hint { display: block; text-align: center; padding: 30px 0; }
  .load-more-wrap { margin-top: 10px; }

  /* 通知面板移到底部 */
  .notify-panel {
    top: auto;
    bottom: 20px;
    right: 12px;
    left: 12px;
    max-width: 100%;
  }

  /* 搜索面板 */
  .search-panel {
    width: calc(100vw - 24px);
    left: 12px !important;
  }

  /* 弹窗从底部弹出 */
  #matMask, #rmMask, #parseMask {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .panel.rm-panel {
    min-width: unset !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh !important;
    padding: 16px !important;
    box-sizing: border-box;
  }

  .rm-body { overflow-x: auto; overflow-y: auto; }

  .parse-panel {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh !important;
    box-sizing: border-box;
  }
}

/* 移动端暗色 */
@media (max-width: 768px) and (prefers-color-scheme: dark) {

  #table tbody tr {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.07);
  }

  #table tbody td {
    border-bottom-color: rgba(255, 255, 255, 0.05) !important;
  }

  #table tbody td:nth-child(1),
  #table tbody td:nth-child(2),
  #table tbody td:nth-child(4) {
    background: rgba(255, 255, 255, 0.03);
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  }

  #table tbody td:nth-child(10) {
    background: rgba(255, 255, 255, 0.02);
    border-top-color: rgba(255, 255, 255, 0.05) !important;
  }

  #table tbody td::before { color: #5c5850; }
}