@import url("https://cdn.jsdelivr.net/npm/alibaba-puhuiti.css@2.0.0/index.css");

:root {
  /* 统一高级商用设计系统 —— 冷调中性 + 沉稳蓝主色 + 分层柔和阴影(admin/client 一致) */
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-hover: #f1f5f9;
  --line: #e8edf3;
  --line-strong: #d6deea;
  --text: #0f172a;
  --muted: #64748b;
  --weak: #94a3b8;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: #eef4ff;
  --primary-ring: rgba(37, 99, 235, .18);
  --accent: #f59e0b;
  --accent-soft: #fff7e8;
  --success: #10b981;
  --success-soft: #e8f8f1;
  --success-text: #0e7c5a;
  --warning: #f59e0b;
  --warning-soft: #fff5e4;
  --warning-text: #b45309;
  --danger: #ef4444;
  --danger-soft: #fef2f2;
  --danger-text: #dc2626;
  --sidebar: #ffffff;
  --radius-lg: 14px;
  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
  --shadow: 0 6px 20px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .05);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, .14);
  --ring: 0 0 0 3px var(--primary-ring);
  --font-cn: "Alibaba-PuHuiTi-Regular", "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --font-cn-medium: "Alibaba-PuHuiTi-Medium", "Alibaba-PuHuiTi-Regular", "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --font-cn-bold: "Alibaba-PuHuiTi-Medium", "Alibaba-PuHuiTi-Regular", "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-cn);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
strong {
  font-family: var(--font-cn-medium);
  font-weight: 500;
}
.hidden { display: none !important; }

.login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 66% 46%, rgba(0, 122, 255, .08), transparent 28%),
    var(--bg);
}
.login-layout {
  width: min(1380px, calc(100vw - 48px));
  display: grid;
  grid-template-columns: minmax(640px, 800px) minmax(360px, 420px);
  align-items: center;
  gap: 70px;
}
.login-logo-panel {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
}
.login-logo-panel img {
  width: min(520px, 100%);
  max-height: 168px;
  object-fit: contain;
  display: block;
}
.login-logo-panel img.login-hero {
  width: min(580px, 100%);
  max-height: 360px;
  filter: drop-shadow(0 18px 36px rgba(37, 99, 235, .10));
}
.login-panel {
  width: 100%;
  background: var(--surface);
  border: 1px solid rgba(0, 122, 255, .12);
  border-radius: 12px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, .12);
  padding: 34px 36px 32px;
}
.login-panel h1 {
  margin: 0 0 28px;
  color: var(--text);
  font-family: var(--font-cn-medium);
  font-size: 25px;
  line-height: 1.2;
}
.login-panel p { margin: 0 0 22px; color: var(--muted); line-height: 1.7; }
.login-panel label {
  gap: 8px;
  color: #30343b;
  font-size: 13px;
}
.login-panel label + label { margin-top: 16px; }
.login-panel input {
  min-height: 44px;
  border-color: #d8dee8;
  border-radius: 8px;
  padding: 10px 12px;
  background: #fbfcff;
}
.login-panel input:focus {
  background: #fff;
}
.login-panel .primary {
  width: 100%;
  min-height: 44px;
  margin-top: 18px;
  border-radius: 8px;
  font-family: var(--font-cn-medium);
  font-size: 15px;
}
label {
  display: grid;
  gap: 7px;
  color: #3a3a3c;
  font-family: var(--font-cn-medium);
  font-weight: 500;
}
label + label { margin-top: 14px; }
input, select, textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  padding: 8px 10px;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
textarea { min-height: 74px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #a1a1aa; }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.form-error { min-height: 20px; color: var(--danger); margin-top: 10px; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
}
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
}
.side-brand {
  height: 68px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.side-brand-logo {
  width: 104px;
  height: auto;
  display: block;
  flex: 0 0 auto;
}
.side-brand-role {
  flex: 0 0 auto;
  color: var(--text);
  font-family: var(--font-cn-medium);
  font-size: 14px;
  white-space: nowrap;
}
.side-brand strong {
  display: block;
  color: var(--text);
  font-family: var(--font-cn-medium);
  font-size: 16px;
}
.side-brand span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}
.menu {
  flex: 1;
  min-height: 0;
  padding: 12px 10px;
  overflow-y: auto;
}
.menu-group {
  margin: 15px 0 6px;
  padding: 0 10px;
  color: var(--weak);
  font-size: 12px;
  font-family: var(--font-cn-medium);
}
.menu button {
  width: 100%;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: #3a3a3c;
  text-align: left;
  padding: 8px 10px;
  font-family: var(--font-cn-medium);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.menu button:hover { background: var(--surface-hover); }
.menu button.active {
  background: var(--primary-soft);
  border-color: #cfe7ff;
  color: var(--primary-dark);
  font-family: var(--font-cn-medium);
}
.menu-reminder {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  font-family: var(--font-cn-medium);
}

.workspace {
  min-width: 0;
  padding: 20px 22px 40px;
}
.topbar {
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 14px;
}
.topbar h1 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-cn-medium);
  font-size: 25px;
  line-height: 1.24;
}
.topbar p { margin: 6px 0 0; color: var(--muted); }
.userbar { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.sidebar-userbar {
  margin-top: auto;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, #f7faff);
  gap: 8px;
}
.sidebar-userbar #userBadge {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  display: flex;
  padding: 7px 9px;
  border: 1px solid #dbeafe;
  background: #fff;
  border-radius: 8px;
  color: inherit;
  font-family: inherit;
}
.sidebar-user-card {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 1px solid #dbeafe;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .04);
}
.sidebar-user-avatar {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: var(--primary-weak);
  color: var(--primary);
  font-family: var(--font-cn-bold);
  font-size: 13px;
}
.sidebar-user-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.sidebar-user-copy strong,
.sidebar-user-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-copy strong {
  color: var(--text);
  font-family: var(--font-cn-bold);
  font-size: 13px;
}
.sidebar-user-copy small {
  color: var(--muted);
  font-size: 11px;
}
.sidebar-userbar #logoutBtn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 8px;
  background: #fff;
}
#userBadge {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius);
  color: #3a3a3c;
  font-family: var(--font-cn-medium);
}

.stats-grid {
  display: none !important;
  height: 0;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 10px;
  margin: 0;
  overflow: hidden;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.stat span {
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-cn-medium);
}
.stat strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-family: var(--font-cn-medium);
  font-size: 23px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.finance-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.finance-stat-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 12px;
  box-shadow: var(--shadow-sm);
}
.finance-stat-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-cn-medium);
}
.finance-stat-card strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.15;
  font-family: var(--font-cn-medium);
  font-variant-numeric: tabular-nums;
}
.finance-stat-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.35;
}
.finance-stat-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
  overflow: hidden;
}
.panel-head {
  min-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  background: #fff;
}
.panel-title {
  color: var(--text);
  font-family: var(--font-cn-medium);
  font-weight: 500;
}
.panel-desc { color: var(--muted); font-size: 12px; margin-top: 2px; }
.panel-body { padding: 12px; }
.toolbar {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
}
.toolbar .wide { grid-column: span 2; }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.compact-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.compact-filter select {
  min-width: 160px;
  min-height: 34px;
  padding: 6px 8px;
}
.status-sync-indicator {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #f8fafc;
  font-size: 12px;
  white-space: nowrap;
}
.status-sync-indicator.syncing {
  color: var(--primary-dark);
  border-color: #bfdbfe;
  background: var(--primary-soft);
}
.status-sync-indicator.error {
  color: var(--danger);
  border-color: #fecaca;
  background: #fef2f2;
}

button {
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: #1d1d1f;
  padding: 7px 11px;
  font-family: var(--font-cn-medium);
  font-weight: 500;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
button:hover { border-color: #b8b8bf; background: var(--surface-soft); }
button.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
button.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
button.ghost { background: #fff; }
button.danger { color: var(--danger); border-color: #ffd1cd; background: var(--danger-soft); }
button:disabled { cursor: not-allowed; opacity: .55; }
button:focus-visible, a:focus-visible, .file-button span:focus-visible { outline: none; box-shadow: var(--ring); }

.table-wrap { overflow: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1120px;
  font-variant-numeric: tabular-nums;
}
th, td {
  border-bottom: 1px solid var(--line);
  padding: 10px 11px;
  text-align: left;
  vertical-align: top;
}
th {
  position: sticky;
  top: 0;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-family: var(--font-cn-medium);
  z-index: 1;
}
tr:hover td { background: var(--surface-soft); }
.empty { padding: 24px; text-align: center; color: var(--muted); }
.muted { color: var(--muted); }
.danger-text { color: var(--danger); }
.strong { color: var(--text); font-family: var(--font-cn); font-weight: 400; }
.subline { color: var(--muted); font-size: 12px; margin-top: 4px; }
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  border-radius: 999px;
  padding: 2px 8px;
  background: #eef0f4;
  color: #52525b;
  font-size: 12px;
  font-family: var(--font-cn-medium);
  font-weight: 500;
  white-space: nowrap;
}
.badge.blue { background: var(--primary-soft); color: var(--primary-dark); }
.badge.green { background: var(--success-soft); color: #1f8f45; }
.badge.amber { background: var(--warning-soft); color: #a65f00; }
.badge.red { background: var(--danger-soft); color: var(--danger); }
.badge.gray { background: #eef0f4; color: #52525b; }

.team-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}
.member-command-panel .panel-head {
  min-height: 62px;
}
.team-permission-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.team-permission-head strong {
  display: block;
  color: var(--text);
  font-family: var(--font-cn-medium);
  font-weight: 500;
}
.team-permission-head span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.team-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.team-permission-item {
  min-height: 50px;
  display: grid;
  grid-template-columns: 18px 54px 1fr;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: #fff;
}
.team-permission-item span {
  color: var(--muted);
  font-size: 12px;
}
.team-permission-item strong {
  color: var(--text);
  font-family: var(--font-cn-medium);
  font-weight: 500;
}

.product-cell { display: grid; grid-template-columns: 46px minmax(150px, 1fr); gap: 9px; align-items: start; }
.product-thumb {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-soft);
}
.product-thumb-button {
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  overflow: hidden;
  cursor: zoom-in;
}
.product-thumb-button .product-thumb { display: block; }
.product-thumb-button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 58%, white);
  outline-offset: 2px;
}
.stock-num {
  color: var(--text);
  font-family: var(--font-cn-medium);
  font-size: 18px;
  line-height: 1.1;
}
.stock-aging-panel .aging-buckets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.aging-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--border, #e6e9ef); border-radius: 10px; background: var(--surface, #fff); }
.aging-card-warn { border-color: #f0b4b4; background: #fff7f7; }
.aging-card .aging-label { color: var(--text-soft, #64748b); font-size: 12px; }
.aging-card strong { font-size: 16px; color: var(--text, #1f2937); }
.aging-card em { font-style: normal; font-size: 12px; }
.aging-overdue { color: #d64545; font-weight: 600; }
.aging-ok { color: #16a34a; }
.aging-wh-table table { width: 100%; }
.page-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 72px 20px; color: var(--muted, #64748b); font-size: 14px; }
.page-loading-dot { width: 16px; height: 16px; border: 2px solid var(--border, #e6e9ef); border-top-color: var(--primary, #2563eb); border-radius: 50%; animation: page-loading-spin 0.7s linear infinite; }
@keyframes page-loading-spin { to { transform: rotate(360deg); } }
.stock-confirmed {
  margin-top: 4px;
  color: #008c76;
  font-family: var(--font-cn-medium);
  font-size: 12px;
}
.stock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.stock-actions button {
  min-height: 30px;
  padding: 5px 8px;
  white-space: nowrap;
}
.stock-actions .warning-action {
  border-color: #f59e0b;
  background: #fff7ed;
  color: #b45309;
}

.scan-layout { display: grid; grid-template-columns: minmax(320px, 1fr); gap: 12px; }
.scanner-hint {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-bottom: 10px;
  border: 1px solid #b9ddff;
  border-radius: var(--radius-sm);
  background: #f0f8ff;
  color: #24547c;
}
.scanner-hint strong {
  color: var(--primary-dark);
  white-space: nowrap;
}
.scanner-hint span {
  color: #647282;
  font-size: 12px;
}
.scan-input {
  min-height: 56px;
  border-width: 2px;
  border-color: var(--primary);
  background: #fff;
  color: var(--text);
  font-family: var(--font-cn-medium);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0;
}
.scan-result {
  border: 1px solid var(--line);
  background: var(--surface-soft);
  border-radius: var(--radius);
  padding: 12px;
}
.scan-inline-status {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 7px 10px;
  font-size: 13px;
}
.scan-inline-status strong {
  color: var(--primary);
  font-family: var(--font-cn-medium);
}
.scan-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--muted);
}
.scan-result-head strong {
  color: var(--text);
}
.scan-order-card {
  display: grid;
  grid-template-columns: 1fr 172px;
  gap: 12px;
  padding: 12px;
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.scan-order-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.scan-order-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 12px;
}
.scan-order-grid div {
  min-width: 0;
  color: var(--text);
}
.scan-order-grid span {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
}
.scan-note {
  margin-top: 10px;
  padding: 8px 10px;
  color: #991B1B;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: var(--radius-sm);
}
.scan-order-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-content: start;
}
.scan-order-actions button,
.scan-order-actions .file-button span {
  width: 100%;
}
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; }
.form-grid .span2 { grid-column: span 2; }
.form-grid .span4 { grid-column: 1 / -1; }
.service-page {
  display: grid;
  gap: 10px;
}
.service-page .panel {
  margin-bottom: 0;
}
.service-page .compact-head {
  min-height: 40px;
  padding: 7px 10px;
}
.service-editor-panel .panel-body {
  padding: 10px;
}
.service-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr .75fr .9fr .75fr .75fr .65fr .75fr minmax(220px, 1.4fr);
  gap: 8px;
  align-items: end;
}
.service-editor-grid label {
  gap: 4px;
  margin-top: 0;
  font-size: 12px;
}
.service-editor-grid input,
.service-editor-grid select {
  min-height: 32px;
  padding: 6px 8px;
}
.service-desc-field {
  min-width: 220px;
}
.service-table {
  min-width: 980px;
}
.service-table th,
.service-table td {
  padding: 7px 10px;
}
.service-table .badge {
  min-height: 20px;
  padding: 1px 7px;
}
.service-table button {
  min-height: 30px;
  padding: 5px 9px;
}
.service-desc-cell {
  max-width: 420px;
  color: var(--muted);
  line-height: 1.45;
}
.finance-filter-panel { margin-bottom: 10px; }
.finance-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 10px 18px;
  align-items: end;
}
.finance-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.inline-error {
  color: var(--danger);
  font-family: var(--font-cn-medium);
}
.file-button input { display: none; }
.file-button span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 7px 11px;
  font-family: var(--font-cn-medium);
  font-weight: 500;
  cursor: pointer;
  background: #fff;
}
.photo-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.photo-strip img { width: 48px; height: 48px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: zoom-in; }
.check-split-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.check-list-panel {
  min-width: 0;
}
.check-list-panel .table-wrap {
  max-height: calc(100vh - 250px);
}
.check-table {
  min-width: 860px;
}
.check-table th,
.check-table td {
  padding: 8px 9px;
}
.check-table .photo-strip img {
  width: 42px;
  height: 42px;
}
.center-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 2000;
  min-width: 180px;
  max-width: min(520px, calc(100vw - 48px));
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(15, 23, 42, .94);
  color: #fff;
  text-align: center;
  font-family: var(--font-cn-medium);
  font-size: 16px;
  line-height: 1.45;
  box-shadow: 0 18px 44px rgba(15, 23, 42, .22);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .16s ease, transform .16s ease;
}
.center-toast.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.center-toast.success { background: #0f9f7a; }
.center-toast.error { background: #dc2626; }
.center-toast.loading { background: rgba(17, 24, 39, .94); }
.image-preview-mask {
  z-index: 120;
  background: rgba(15, 23, 42, .78);
}
.image-preview-card {
  position: relative;
  max-width: min(1100px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
}
.image-preview-card img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.image-preview-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 34px;
  min-height: 34px;
  padding: 0;
  border-radius: 999px;
  background: #fff;
  color: #111827;
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.camera-modal {
  width: min(760px, calc(100vw - 32px));
}
.camera-body {
  display: grid;
  gap: 10px;
  padding: 14px;
}
.camera-body video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #111827;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
#cameraCaptureStatus {
  min-height: 22px;
  line-height: 1.45;
}
.content-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.content-list-grid > .panel {
  min-width: 0;
}
.content-list-grid .table-wrap {
  overflow: hidden;
}
.content-list-grid table {
  min-width: 0;
  table-layout: fixed;
}
.content-list-grid th,
.content-list-grid td {
  padding: 11px 12px;
  vertical-align: middle;
}
.content-list-grid th:first-child,
.content-list-grid td:first-child {
  width: auto;
}
.content-list-grid th:not(:first-child),
.content-list-grid td:not(:first-child) {
  width: 70px;
  text-align: center;
}
.content-list-grid th:nth-last-child(2),
.content-list-grid td:nth-last-child(2) {
  width: 138px;
  text-align: left;
}
.content-list-grid th:last-child,
.content-list-grid td:last-child {
  width: 104px;
}
.content-list-grid .row-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
}
.content-list-grid .row-actions button {
  min-height: 32px;
  padding: 6px 10px;
  white-space: nowrap;
}
.content-list-grid .strong,
.content-list-grid .subline {
  overflow-wrap: anywhere;
}
.panel-head.compact {
  padding-top: 12px;
  padding-bottom: 12px;
}
.panel-head .compact-btn {
  min-height: 32px;
  padding: 6px 12px;
  white-space: nowrap;
}
.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0, 0, 0, .42);
}
.modal-card {
  width: min(560px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.stock-create-modal {
  width: min(900px, 100%);
}
.warehouse-modal {
  width: min(980px, 100%);
}
.member-modal {
  width: min(920px, 100%);
}
.content-editor-modal {
  width: min(1080px, 100%);
}
.stock-create-modal .form-grid {
  grid-template-columns: repeat(3, minmax(170px, 1fr));
}
.warehouse-modal .form-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}
.member-modal .form-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}
.content-editor-modal .form-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}
.stock-create-modal .span2 {
  grid-column: span 2;
}
.warehouse-modal .span2 {
  grid-column: span 2;
}
.member-modal .span2 {
  grid-column: span 2;
}
.content-editor-modal .span2 {
  grid-column: span 2;
}
.modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.announcement-editor-form {
  display: grid;
  grid-template-columns: minmax(260px, 2fr) repeat(4, minmax(130px, 1fr));
  gap: 14px;
}
.announcement-title-field {
  grid-column: span 2;
}
.announcement-md-editor,
.announcement-editor-actions {
  grid-column: 1 / -1;
}
.md-editor {
  display: grid;
  gap: 8px;
}
.md-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}
.md-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.md-tools button {
  min-height: 30px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.md-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.md-edit-pane,
.md-preview-pane {
  min-width: 0;
}
.md-edit-pane textarea {
  min-height: 260px;
  resize: vertical;
}
.md-preview-pane {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  overflow: hidden;
}
.md-preview-title {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.markdown-preview {
  min-height: 260px;
  max-height: 420px;
  overflow: auto;
  padding: 12px;
  color: var(--text);
  line-height: 1.7;
}
.markdown-preview.empty {
  color: var(--muted);
}
.markdown-preview p {
  margin: 0 0 10px;
}
.markdown-preview h2,
.markdown-preview h3,
.markdown-preview h4 {
  margin: 4px 0 10px;
  font-family: var(--font-cn-medium);
}
.markdown-preview ul {
  margin: 0 0 10px 18px;
  padding: 0;
}
.markdown-preview img {
  display: block;
  max-width: 100%;
  max-height: 280px;
  margin: 8px 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.markdown-preview code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #eef2ff;
}
.modal-head h3 {
  margin: 0 0 4px;
  font-family: var(--font-cn-medium);
  font-size: 18px;
}
.modal-head p {
  margin: 0;
  color: var(--muted);
}
.modal-head button {
  width: 32px;
  min-height: 32px;
  padding: 0;
  color: var(--muted);
  background: #fff;
}
.modal-actions {
  justify-content: flex-end;
  padding: 0 20px 18px;
}
.stock-operation-modal .file-button span {
  width: 100%;
  border-color: #cfe7ff;
  color: var(--primary-dark);
  background: var(--primary-soft);
}

.order-command { margin-bottom: 10px; }
.order-tabs, .finance-tabs {
  display: flex;
  gap: 4px;
  padding: 5px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  overflow-x: auto;
}
.order-tabs button, .finance-tabs button {
  background: #fff;
  border-color: transparent;
  color: #3a3a3c;
  min-height: 32px;
  padding: 6px 12px;
  box-shadow: none;
}
.order-tabs button.active, .finance-tabs button.active {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}
.order-tabs button:hover, .finance-tabs button:hover {
  border-color: #cfe7ff;
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.order-tabs button.active:hover, .finance-tabs button.active:hover {
  color: #fff;
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}
.order-tabs span {
  margin-left: 6px;
  color: var(--muted);
  font-size: 12px;
}
.order-tabs button.active span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font-family: var(--font-cn-medium);
  font-weight: 600;
}
.batch-bar {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 12px 0;
  box-shadow: var(--shadow-sm);
}
.batch-bar strong {
  margin-left: auto;
  color: var(--text);
  font-family: var(--font-cn-medium);
  font-size: 24px;
}
.checkline { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-cn-medium); font-weight: 500; }
.checkline input { width: 16px; min-height: 16px; accent-color: var(--primary); }
.order-list { display: grid; gap: 10px; }
.order-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.order-card:hover {
  border-color: #c7dfff;
  box-shadow: var(--shadow);
}
.order-head {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.order-head-main {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  min-width: 0;
}
.order-head-main span { color: #3a3a3c; }
.order-head-download {
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 6px;
  border-color: #bfdbfe;
  background: #eff6ff;
  color: var(--primary);
  font-size: 13px;
  line-height: 1;
  box-shadow: none;
}
.order-head-download:hover {
  border-color: var(--primary);
  background: #dbeafe;
  color: var(--primary-dark);
}
.source-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.source-dot.rootflow { background: #30b0a0; }
.source-dot.client { background: var(--primary); }
.text-warn { color: var(--accent) !important; font-family: var(--font-cn-medium); font-weight: 500; }
.order-card-grid {
  display: grid;
  grid-template-columns: minmax(132px, .72fr) minmax(150px, .82fr) minmax(178px, .92fr) minmax(250px, 1.18fr) minmax(300px, 1.28fr) minmax(260px, .95fr);
  min-height: 190px;
}
.order-card-grid > div {
  border-right: 1px solid var(--line);
  padding: 12px;
}
.order-card-grid > div:last-child { border-right: none; }
.sign-cell {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  background: var(--surface-soft);
}
.sign-cell a, .platform-cell a, .meta-cell a {
  color: var(--primary);
  font-family: var(--font-cn-medium);
  font-weight: 500;
  text-decoration: none;
}
.order-product-img {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: zoom-in;
}
.order-product-img.placeholder {
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--surface-soft);
}
.tracking-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 20px;
  padding: 1px 7px;
  border-radius: 4px;
  background: #EAF3FF;
  color: #1D4ED8;
  font-size: 12px;
  font-family: var(--font-cn-medium);
}
.domestic-tracking-number {
  display: block;
  color: var(--primary);
  font-family: var(--font-cn-medium);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
.stock-shipment-line {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
  margin-top: 5px;
  color: #047857;
  font-size: 12px;
  line-height: 1.35;
}
.stock-shipment-line span {
  flex: 0 0 auto;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.12);
  font-family: var(--font-cn-medium);
}
.stock-shipment-line strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-cn-medium);
}
.ozon-order-label {
  margin-top: 2px;
  background: #F1F5F9;
  color: #475569;
}
.ozon-order-number {
  display: block;
  color: #475569;
  font-size: 13px;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}
.copyable-number {
  cursor: pointer;
}
.copyable-number:hover {
  text-decoration: underline;
}
.sku-cell, .platform-cell, .meta-cell { line-height: 1.78; }
.rootflow-product-details {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px dashed #D7E2F0;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}
.rootflow-product-details div {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}
.rootflow-product-details span {
  color: #64748B;
}
.rootflow-product-details strong {
  min-width: 0;
  color: #334155;
  font-family: var(--font-cn-medium);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.rootflow-forecast-info {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #D7E2F0;
  color: #475569;
  font-size: 13px;
  line-height: 1.45;
}
.rootflow-forecast-info > div:not(.forecast-status-line) {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
}
.rootflow-forecast-info span {
  color: #64748B;
}
.rootflow-forecast-info strong {
  min-width: 0;
  color: #334155;
  font-family: var(--font-cn-medium);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.forecast-status-line {
  margin-bottom: 2px;
}
.platform-cell, .meta-cell { background: #fff; }
.admin-order-detail {
  display: grid;
  align-content: center;
  gap: 9px;
  color: #2f333a;
  font-size: 20px;
  line-height: 1.25;
}
.admin-order-detail div {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.admin-order-detail span {
  color: #2f333a;
}
.admin-order-detail .admin-accent-value {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.scan-accent-value {
  color: var(--primary);
  font-family: var(--font-cn-medium);
  font-weight: 500;
}
.admin-order-detail .order-merge-no {
  color: var(--accent);
  text-decoration: none;
}
.order-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 10px;
  align-content: center;
}
.order-actions button, .order-actions .file-button span {
  width: 100%;
  min-height: 48px;
  justify-content: center;
  border-color: #3b8ce2;
  border-radius: 6px;
  background: #3b8ce2;
  color: #fff;
  font-size: 20px;
  line-height: 1.1;
}
.order-actions button:hover, .order-actions .file-button span:hover {
  border-color: var(--primary-dark);
  color: #fff;
  background: var(--primary-dark);
}
.order-actions button:nth-child(1),
.order-actions button:nth-child(2) {
  background: #3b8ce2;
  border-color: #3b8ce2;
  color: #fff;
}
.order-actions button.warn {
  background: #e86d00;
  border-color: #e86d00;
  color: #fff;
}
.order-actions button.scale-action,
.scan-order-actions button.scale-action {
  background: #0f9f7a;
  border-color: #0f9f7a;
  color: #fff;
}
.order-actions button:disabled,
.scan-order-actions button:disabled {
  cursor: wait;
  opacity: .7;
}
.icon-btn {
  min-height: 24px;
  padding: 2px 6px;
  font-size: 12px;
  box-shadow: none;
}

.print-area { display: none; }
@media print {
  body > *:not(.print-area) { display: none !important; }
  .print-area { display: block !important; padding: 8mm; color: #000; }
}

@media (max-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .finance-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-stat-split { grid-template-columns: 1fr; }
  .team-layout { grid-template-columns: 1fr; }
  .service-editor-grid { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
  .service-desc-field { grid-column: 1 / -1; }
  .check-split-layout { grid-template-columns: 1fr; }
  .order-card-grid { grid-template-columns: 130px 180px 1fr 1fr; }
  .order-card-grid > div:nth-child(4) { border-right: none; }
  .order-card-grid > div:nth-child(n + 5) { border-top: 1px solid var(--line); }
}
@media (max-width: 1080px) {
  .login-layout {
    width: min(420px, calc(100vw - 48px));
    grid-template-columns: 1fr;
    gap: 18px;
    transform: none;
  }
  .login-logo-panel {
    min-height: auto;
  }
  .login-logo-panel img {
    width: min(300px, 100%);
    max-height: 96px;
  }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 0; z-index: 5; height: auto; display: block; }
  .side-brand { height: 58px; }
  .menu { display: flex; gap: 8px; overflow-x: auto; }
  .menu-group { display: none; }
  .menu button { width: auto; white-space: nowrap; }
  .sidebar-userbar { display: none; }
  .toolbar, .form-grid, .scan-layout, .finance-filter-grid { grid-template-columns: 1fr; }
  .scan-order-card,
  .scan-order-grid { grid-template-columns: 1fr; }
  .content-list-grid { grid-template-columns: 1fr; }
  .toolbar .wide, .form-grid .span2, .form-grid .span4 { grid-column: auto; }
  .team-permission-grid { grid-template-columns: 1fr; }
  .stock-create-modal .form-grid { grid-template-columns: 1fr; }
  .stock-create-modal .span2 { grid-column: auto; }
  .warehouse-modal .form-grid { grid-template-columns: 1fr; }
  .warehouse-modal .span2 { grid-column: auto; }
  .announcement-editor-form,
  .md-editor-grid { grid-template-columns: 1fr; }
  .announcement-title-field,
  .announcement-md-editor,
  .announcement-editor-actions { grid-column: auto; }
  .service-editor-grid { grid-template-columns: 1fr; }
  .service-desc-field { grid-column: auto; }
  .topbar { flex-direction: column; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finance-stat-grid { grid-template-columns: 1fr; }
  .order-card-grid { grid-template-columns: 1fr; }
  .order-card-grid > div { border-right: none; border-bottom: 1px solid var(--line); }
  .order-card-grid > div:last-child { border-bottom: none; }
  .batch-bar strong { margin-left: 0; font-size: 20px; }
}
@media (max-width: 640px) {
  body { font-size: 13px; }
  .workspace { padding: 12px; }
  .order-actions { grid-template-columns: 1fr; }
  .login-panel { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

.finance-ledger-title,
.announcement-list-title,
.help-list-title {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Product design polish pass: shared admin workbench surface. */
:root {
  --bg: #f4f7fb;
  --surface-soft: #f8fafc;
  --surface-hover: #eef4fb;
  --line: #e1e7ef;
  --line-strong: #cdd7e3;
  --text: #1f2933;
  --muted: #647282;
  --weak: #8c99a8;
  --primary: #0b7cff;
  --primary-dark: #065fca;
  --primary-soft: #e8f2ff;
  --accent: #f59e0b;
  --accent-soft: #fff7e8;
  --success: #0f9f7a;
  --success-soft: #e7f7f2;
  --danger: #ef4444;
  --danger-soft: #fff1f1;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow: 0 14px 36px rgba(15, 23, 42, .08);
}

body {
  background:
    linear-gradient(180deg, #f8fafc 0, #f4f7fb 260px, #f4f7fb 100%);
}

.login-view {
  background:
    radial-gradient(circle at 68% 48%, rgba(11, 124, 255, .08), transparent 30%),
    linear-gradient(180deg, #f8fafc, #f3f6fb);
}
.login-layout {
  width: min(1400px, calc(100vw - 56px));
  grid-template-columns: minmax(620px, 800px) minmax(390px, 430px);
  gap: 82px;
}
.login-logo-panel img {
  width: min(800px, 100%);
  max-height: 270px;
}
.login-panel {
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 14px;
  box-shadow: 0 22px 58px rgba(15, 23, 42, .13);
  padding: 36px 38px 34px;
}
.login-panel h1 {
  margin-bottom: 26px;
  font-size: 26px;
  letter-spacing: 0;
}

.app-shell {
  grid-template-columns: 238px minmax(0, 1fr);
}
/* 修复:视觉升级层无条件重设两列会覆盖 1080px 断点的单列,导致平板/窄屏侧栏留大片空白+导航截断。
   在此重申响应式单列(侧栏改顶部横向滚动菜单);并给 grid item 加 min-width:0——否则侧栏(含横向菜单)
   与主区默认 min-width:auto 不收缩,被内容撑破视口造成整页横向溢出/滚动。 */
@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 1fr; }
  .app-shell > * { min-width: 0; }
}
.sidebar {
  background: linear-gradient(180deg, #fff 0, #fbfcfe 100%);
  box-shadow: 1px 0 0 rgba(15, 23, 42, .04);
}
.side-brand {
  height: 66px;
  padding: 0 14px;
}
.side-brand-logo {
  width: 112px;
}
.side-brand-role {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: #334155;
  font-size: 12px;
}
.menu {
  padding: 10px;
}
.menu-group {
  margin: 16px 0 7px;
  letter-spacing: 0;
}
.menu button {
  position: relative;
  min-height: 38px;
  border-radius: 7px;
  padding: 8px 10px 8px 12px;
  color: #354052;
}
.menu button.active {
  background: #eaf4ff;
  border-color: #c7ddff;
  color: #075fca;
}
.menu button.active::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 3px;
  background: var(--primary);
}
.sidebar-userbar {
  gap: 8px;
  padding: 10px;
}
.sidebar-user-card {
  border-radius: 8px;
  background: #f8fafc;
}

.workspace {
  padding: 18px 20px 38px;
}
.topbar {
  min-height: 54px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(225, 231, 239, .9);
  margin-bottom: 12px;
}
.topbar h1 {
  font-size: 22px;
}
.topbar p {
  margin-top: 4px;
  color: #697789;
}

button {
  border-color: var(--line-strong);
  border-radius: 7px;
  color: #253244;
  box-shadow: none;
}
button:hover {
  border-color: #aac5e6;
  background: #f6faff;
}
button.primary,
.primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #fff;
}
button.primary:hover,
.primary:hover {
  border-color: var(--primary-dark);
  background: var(--primary-dark);
}
button.danger,
.danger-link {
  color: var(--danger);
}

input,
select,
textarea,
.client-date-range-trigger {
  border-color: var(--line-strong);
  border-radius: 7px;
  background: #fff;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(11, 124, 255, .14);
}

.panel {
  border-color: var(--line);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.panel:hover {
  border-color: #d5dfeb;
}
.panel-head {
  min-height: 50px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #fff, #fbfdff);
}
.panel-title {
  font-size: 15px;
}
.panel-desc {
  color: #718096;
}
.panel-body {
  padding: 14px;
}
.toolbar,
.form-grid,
.finance-filter-grid,
.service-editor-grid {
  gap: 10px 12px;
}
label {
  color: #344054;
}

.table-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
table {
  border-collapse: separate;
  border-spacing: 0;
}
th,
td {
  border-bottom-color: #e8edf3;
  padding: 9px 11px;
}
th {
  background: #f8fafc;
  color: #526173;
  font-family: var(--font-cn-medium);
}
tr:hover td {
  background: #fbfdff;
}
.empty {
  color: #7b8795;
}

.order-tabs,
.finance-tabs {
  border-radius: 10px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.order-tabs button,
.finance-tabs button {
  min-height: 34px;
  border-radius: 7px;
}
.order-tabs button.active,
.finance-tabs button.active {
  box-shadow: 0 6px 14px rgba(11, 124, 255, .18);
}
.batch-bar {
  min-height: 48px;
  border-radius: 10px;
  margin: 10px 0;
  padding: 8px 10px;
}
.batch-bar strong {
  font-size: 20px;
}

.order-list {
  gap: 8px;
}
.order-card {
  border-radius: 10px;
}
.order-card:hover {
  border-color: #b8d3ff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
}
.order-card.scanned-order-card {
  border-color: #1A7DFF;
  background: #F7FBFF;
  box-shadow: 0 0 0 2px rgba(26, 125, 255, .12), 0 12px 28px rgba(15, 23, 42, .08);
}
.order-card.packed-order-card {
  border-color: #d7dde6;
  background: #f3f4f6;
  box-shadow: none;
}
.order-card.packed-order-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}
.order-card.packed-order-card .order-head,
.order-card.packed-order-card .sign-cell,
.order-card.packed-order-card .platform-cell,
.order-card.packed-order-card .meta-cell,
.order-card.packed-order-card .sku-cell,
.order-card.packed-order-card .order-card-grid > div {
  background: #f3f4f6;
}
.order-card.packed-order-card .order-product-img {
  opacity: .72;
  filter: grayscale(.35);
}
.order-card.packed-order-card:not(.scanned-order-card) {
  opacity: .86;
}
.order-head {
  min-height: 38px;
  padding: 7px 11px;
  background: #fbfdff;
}
.order-head-main {
  gap: 6px 12px;
}
.order-head-main span {
  color: #465568;
}
.order-card-grid {
  grid-template-columns: minmax(122px, .62fr) minmax(150px, .78fr) minmax(174px, .86fr) minmax(238px, 1.04fr) minmax(290px, 1.2fr) minmax(250px, .86fr);
  min-height: 162px;
}
.order-card-grid > div {
  padding: 10px 11px;
}
.sign-cell {
  gap: 9px;
}
.order-product-img {
  max-width: 178px;
}
.sku-cell,
.platform-cell,
.meta-cell {
  line-height: 1.62;
}
.admin-order-detail {
  gap: 7px;
  font-size: 15px;
  line-height: 1.45;
}
.admin-order-detail .order-merge-no {
  color: #f97316;
  font-family: var(--font-cn-medium);
}
.order-actions {
  grid-template-columns: repeat(2, minmax(92px, 1fr));
  gap: 7px;
  align-content: center;
}
.order-actions button,
.order-actions button:not(.order-action-primary),
.order-actions .file-button span {
  min-height: 38px;
  border-radius: 7px;
  border-color: #2d86ee;
  background: #2d86ee;
  font-size: 15px;
}
.order-actions button.warn {
  background: #f97316;
  border-color: #f97316;
}

.badge {
  border-radius: 999px;
  font-size: 12px;
}
.badge.green {
  color: #08785d;
  background: #e7f7f2;
}
.badge.red {
  color: #c02626;
  background: #fff1f1;
}
.badge.blue {
  color: #075fca;
  background: #e8f2ff;
}

.modal-mask {
  backdrop-filter: blur(2px);
}
.modal-card {
  border-radius: 12px;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .22);
}
.modal-head {
  padding: 17px 20px;
}
.modal-actions {
  padding: 0 20px 18px;
}

@media (max-width: 1420px) {
  .login-layout {
    width: min(1180px, calc(100vw - 48px));
    grid-template-columns: minmax(520px, 680px) minmax(360px, 420px);
    gap: 54px;
  }
  .login-logo-panel img {
    width: min(680px, 100%);
  }
}

@media (max-width: 1080px) {
  .login-layout {
    width: min(430px, calc(100vw - 48px));
    grid-template-columns: 1fr;
    gap: 20px;
    transform: none;
  }
  .login-logo-panel img {
    width: min(320px, 100%);
    max-height: 110px;
  }
  .workspace {
    padding: 14px;
  }
}

/* ============================================================
   高级商用视觉升级(统一层)—— 精修核心组件质感
   放在文件末尾,借助层叠覆盖前面的基础样式,不改结构。
   ============================================================ */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* 卡片:柔和描边 + 分层阴影 + 大圆角 */
.panel {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.panel:hover { box-shadow: var(--shadow); }
.panel-head {
  background: linear-gradient(180deg, #ffffff, var(--surface-soft));
  border-bottom-color: var(--line);
}
.panel-title { font-weight: 600; letter-spacing: .1px; }

/* 按钮:统一质感;主按钮微渐变 + 品牌阴影 + 悬浮微升 */
button {
  min-height: 36px;
  border-radius: var(--radius-sm);
  border-color: var(--line-strong);
  font-weight: 500;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease,
    box-shadow .16s ease, transform .06s ease;
}
button:hover { border-color: #c2ccd9; background: var(--surface-soft); }
button:active { transform: translateY(.5px); }
button.primary {
  background-image: linear-gradient(180deg, #3b82f6, var(--primary));
  border-color: var(--primary-dark);
  box-shadow: 0 1px 2px rgba(37, 99, 235, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
}
button.primary:hover {
  background-image: linear-gradient(180deg, var(--primary), var(--primary-dark));
  box-shadow: 0 3px 10px rgba(37, 99, 235, .32), inset 0 1px 0 rgba(255, 255, 255, .18);
}
button.danger {
  color: var(--danger-text);
  border-color: #f7c4c4;
  background: var(--danger-soft);
}
button.danger:hover { background: #fde8e8; border-color: #f0a8a8; }
button.ghost { background: #fff; border-color: var(--line-strong); }

/* 侧栏导航:active 左侧强调条 + 柔和底色 */
.menu button {
  position: relative;
  border-radius: var(--radius);
  color: #475569;
}
.menu button:hover { background: var(--surface-hover); color: var(--text); }
.menu button.active {
  background: var(--primary-soft);
  border-color: transparent;
  color: var(--primary-dark);
  font-weight: 600;
}
.menu button.active::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 3px;
  background: var(--primary);
}
.menu-group { letter-spacing: .3px; text-transform: none; }

/* 表格:表头更精致,行悬浮更克制 */
th {
  background: var(--surface-soft);
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .2px;
  border-bottom-color: var(--line-strong);
}
tr:hover td { background: var(--primary-soft); }
td { color: #334155; }

/* 徽章:精修 pill,更明确的状态色对 */
.badge {
  min-height: 22px;
  padding: 2px 9px;
  font-weight: 600;
  letter-spacing: .2px;
}
.badge.blue { background: var(--primary-soft); color: var(--primary-dark); }
.badge.green { background: var(--success-soft); color: var(--success-text); }
.badge.amber { background: var(--warning-soft); color: var(--warning-text); }
.badge.red { background: var(--danger-soft); color: var(--danger-text); }
.badge.gray { background: #eef1f6; color: #475569; }

/* 输入:统一描边与聚焦环 */
input, select, textarea { border-radius: var(--radius-sm); border-color: var(--line-strong); }
input:hover, select:hover, textarea:hover { border-color: #c2ccd9; }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: var(--ring);
  outline: none;
}

/* 顶部标题层级更清晰 */
.topbar h1 { font-weight: 600; letter-spacing: -.2px; }

/* 侧栏用户卡与品牌区细节 */
.sidebar-userbar { background: linear-gradient(180deg, #ffffff, var(--surface-soft)); }
.sidebar-user-card, .sidebar-userbar #userBadge { border-color: var(--line); border-radius: var(--radius); }

/* 状态同步指示器与模态更精致 */
.modal-card, .modal-content { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* 导航图标:统一线性图标位 */
.menu button .nav-ic {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-right: 2px;
  color: currentColor;
  opacity: .9;
}
.menu button.active .nav-ic { opacity: 1; }
.menu button > span.nav-label { flex: 1; text-align: left; }

@media (max-width: 1080px) { .login-hero { display: none; } }

.order-load-more { display: flex; justify-content: center; padding: 14px 0 6px; }
.order-load-more button { min-width: 220px; }

/* ============================================================
   RootFlow ERP surface v1 · 2026-07-12
   连续业务工作面：冷白画布、克制蓝色、层级阴影，弱化框套框与硬分割线。
   ============================================================ */
:root {
  --bg: #f2f5f9;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --surface-hover: #f2f6fb;
  --line: #e7ecf2;
  --line-strong: #d6dfe9;
  --text: #111827;
  --muted: #66758a;
  --weak: #96a2b2;
  --primary: #146ef5;
  --primary-dark: #0d56c8;
  --primary-soft: #edf4ff;
  --primary-ring: rgba(20, 110, 245, .16);
  --radius-lg: 10px;
  --radius: 7px;
  --radius-sm: 6px;
  --shadow-sm: 0 3px 12px rgba(15, 23, 42, .045), 0 1px 2px rgba(15, 23, 42, .035);
  --shadow: 0 12px 30px rgba(15, 23, 42, .075), 0 2px 6px rgba(15, 23, 42, .04);
  --shadow-lg: 0 28px 72px rgba(15, 23, 42, .2), 0 4px 12px rgba(15, 23, 42, .06);
}

body {
  background:
    linear-gradient(180deg, #f8faff 0, #f3f6fa 200px, #f2f5f9 100%);
}

.app-shell {
  grid-template-columns: 230px minmax(0, 1fr);
}

.sidebar {
  border-right: 0;
  background: linear-gradient(180deg, #fff 0, #fbfcff 62%, #f7f9fc 100%);
  box-shadow: 7px 0 28px rgba(15, 23, 42, .055);
  z-index: 30;
}

.side-brand {
  height: 64px;
  border-bottom: 0;
  padding: 0 15px;
  box-shadow: 0 10px 24px -24px rgba(15, 23, 42, .7);
}

.side-brand-logo { width: 110px; }

.side-brand-role {
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #596579;
  font-size: 12px;
}

.menu { padding: 10px 9px 14px; }
.menu-group {
  margin: 15px 9px 5px;
  padding: 0;
  color: #98a3b3;
  font-size: 11px;
  letter-spacing: .04em;
}

.menu button {
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  padding: 8px 10px 8px 12px;
  color: #475569;
}

.menu button:hover {
  background: #f3f6fb;
  color: #172033;
}

.menu button.active {
  border: 0;
  background: linear-gradient(90deg, #e8f2ff, #f1f6ff);
  color: #0d5fcc;
  box-shadow: 0 5px 14px rgba(20, 110, 245, .08);
}

.menu button.active::before {
  left: 2px;
  width: 2px;
  height: 20px;
  background: #146ef5;
}

.sidebar-userbar {
  border-top: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.72), #f7f9fc);
  box-shadow: 0 -12px 24px -26px rgba(15, 23, 42, .75);
}

.sidebar-user-card,
.sidebar-userbar #userBadge {
  border: 0;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.workspace {
  padding: 16px 18px 40px;
  background: transparent;
}

.topbar {
  min-height: 58px;
  align-items: center;
  margin: -16px -18px 14px;
  padding: 13px 18px 12px;
  border-bottom: 0;
  background: linear-gradient(112deg, #fbfdff 0, #f4f8ff 60%, #fffaf5 118%);
  box-shadow: 0 12px 30px -28px rgba(15, 23, 42, .8);
}

.topbar h1 {
  color: #101827;
  font-size: 22px;
  font-weight: 600;
}

.topbar p {
  margin-top: 3px;
  color: #6e7b8e;
}

#content { min-width: 0; }

.panel {
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}

.panel:hover {
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}

.panel-head {
  min-height: 48px;
  border-bottom: 0;
  padding: 11px 14px;
  background: linear-gradient(180deg, #fff, #fcfdff);
  box-shadow: 0 10px 20px -24px rgba(15, 23, 42, .9);
}

.panel-title {
  color: #172033;
  font-size: 15px;
  font-weight: 600;
}

.panel-body { padding: 14px; }

/* 内层区域回归连续工作面，避免设置页式的层层卡片。 */
.panel-body > .panel,
.panel-body > .panel:hover {
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}

button {
  border-color: #d5dee9;
  border-radius: 7px;
  background: #fff;
  color: #273449;
  box-shadow: none;
}

button:hover {
  border-color: #a9c4e7;
  background: #f7faff;
  color: #153969;
}

button.primary,
.primary {
  border-color: #146ef5;
  background: #146ef5;
  background-image: none;
  color: #fff;
  box-shadow: 0 4px 12px rgba(20, 110, 245, .16);
}

button.primary:hover,
.primary:hover {
  border-color: #0d56c8;
  background: #0d56c8;
  background-image: none;
  box-shadow: 0 7px 18px rgba(20, 110, 245, .22);
}

button:active { transform: translateY(0); }

input,
select,
textarea {
  border-color: #d6dfe9;
  background: #fff;
}

.table-wrap {
  border: 0;
  border-radius: 6px;
  padding: 0 7px 8px;
  background: linear-gradient(180deg, #f8fafc 0, #f4f7fa 100%);
  box-shadow: none;
}

table {
  border-collapse: separate;
  border-spacing: 0 6px;
  background: transparent;
}

thead th {
  border: 0;
  padding: 9px 11px;
  background: linear-gradient(180deg, #f9fbfd, #f3f6fa);
  color: #647286;
}

thead th:first-child { border-radius: 6px 0 0 6px; }
thead th:last-child { border-radius: 0 6px 6px 0; }

tbody tr {
  background: #fff;
  box-shadow: 0 3px 12px rgba(15, 23, 42, .055);
  transition: box-shadow .16s ease, transform .16s ease;
}

tbody tr:hover {
  box-shadow: 0 7px 18px rgba(15, 23, 42, .085);
}

tbody td {
  border-bottom: 0;
  padding: 10px 11px;
  background: #fff;
}

tbody tr:hover td { background: #fbfdff; }
tbody td:first-child { border-radius: 6px 0 0 6px; }
tbody td:last-child { border-radius: 0 6px 6px 0; }
tbody td:only-child { border-radius: 6px; }

.badge {
  min-height: 21px;
  border-radius: 5px;
  padding: 2px 7px;
  letter-spacing: 0;
  font-weight: 500;
}

.order-tabs,
.finance-tabs {
  gap: 18px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.order-tabs button,
.finance-tabs button {
  min-height: 38px;
  padding: 5px 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #596579;
}

.order-tabs button:hover,
.finance-tabs button:hover {
  border: 0;
  background: transparent;
  color: #146ef5;
}

.order-tabs button.active,
.finance-tabs button.active,
.order-tabs button.active:hover,
.finance-tabs button.active:hover {
  border: 0;
  background: transparent;
  color: #146ef5;
  box-shadow: inset 0 -2px #146ef5;
}

.order-tabs button.active span {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #146ef5;
}

.batch-bar {
  border: 0;
  border-radius: 7px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.order-list { gap: 10px; }

.order-card {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .06);
}

.order-card:hover {
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .1);
}

.order-head {
  border-bottom: 0;
  background: linear-gradient(180deg, #fff, #fbfcff);
  box-shadow: 0 9px 18px -23px rgba(15, 23, 42, .9);
}

.order-card-grid > div {
  border-right: 0;
  background: #fff;
}

.order-card-grid > div:nth-child(even) { background: #fbfcfe; }
.order-card-grid > div:last-child { border-right: 0; }
.sign-cell,
.platform-cell,
.meta-cell { background: #fbfcfe; }

.order-product-img {
  border: 0;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}

.order-actions button,
.order-actions .file-button span {
  border-color: #146ef5;
  background: #146ef5;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(20, 110, 245, .13);
}

.modal-mask {
  background: rgba(15, 23, 42, .44);
  backdrop-filter: none;
}

.modal-card,
.modal-content {
  border: 0;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
}

.modal-head {
  border-bottom: 0;
  background: linear-gradient(112deg, #fff, #f5f8ff);
  box-shadow: 0 12px 24px -28px rgba(15, 23, 42, .95);
}

.modal-head .modal-close {
  min-width: 0;
  min-height: 32px;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #66758a;
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}

.modal-head .modal-close:hover {
  border: 0;
  background: transparent;
  color: #0d56c8;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.modal-actions {
  border-top: 0;
  background: #fff;
  box-shadow: 0 -12px 24px -28px rgba(15, 23, 42, .95);
}

/* 真实品牌资产驱动的等待态；不再使用通用转圈。 */
.page-loading {
  min-height: min(480px, calc(100vh - 170px));
  display: grid;
  place-items: center;
  padding: 56px 20px;
  color: var(--muted);
}

.page-loading-brand {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 26px 34px;
  text-align: center;
}

.page-loading-brand img {
  width: 118px;
  height: auto;
  display: block;
  margin-bottom: 5px;
  filter: drop-shadow(0 8px 18px rgba(20, 110, 245, .16));
  transform-origin: center;
  animation: logistics-brand-breathe 1.45s ease-in-out infinite;
}

.page-loading-brand strong {
  color: #243149;
  font-family: var(--font-cn-medium);
  font-size: 14px;
  font-weight: 500;
}

.page-loading-brand span {
  color: var(--muted);
  font-size: 12px;
}

.page-loading-dot { display: none; }

@keyframes logistics-brand-breathe {
  0%, 100% { opacity: .62; transform: translateY(2px) scale(.97); }
  50% { opacity: 1; transform: translateY(-2px) scale(1.015); }
}

@media (max-width: 1080px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { box-shadow: 0 7px 24px rgba(15, 23, 42, .06); }
  .topbar { margin: -14px -14px 12px; padding-inline: 14px; }
  .table-wrap { padding-inline: 5px; }
  .order-card-grid > div { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .page-loading-brand img { animation: none; opacity: 1; transform: none; }
  tbody tr { transition: none; }
}

/* The visual layer above uses shadows for hierarchy. Reassert a dedicated
   keyboard ring after those declarations so focus never disappears into an
   active tab, selected menu item or primary action shadow. */
button:focus-visible,
a:focus-visible,
.file-button span:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(20, 110, 245, .78) !important;
}

.menu button.active:focus-visible {
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(20, 110, 245, .78), 0 5px 14px rgba(20, 110, 245, .08) !important;
}

.order-tabs button.active:focus-visible,
.finance-tabs button.active:focus-visible {
  box-shadow: inset 0 -2px #146ef5, 0 0 0 2px #fff, 0 0 0 4px rgba(20, 110, 245, .78) !important;
}

/* ============================================================
   RootFlow ERP interaction closure · 2026-07-12
   Receipt dialogs, unified media viewer and continuous work surface.
   ============================================================ */
.workspace {
  padding: 0 0 40px;
  background: #fff;
  box-shadow: inset 12px 0 28px -34px rgba(15, 23, 42, .72);
}

.topbar {
  min-height: 64px;
  margin: 0 0 12px;
  padding: 13px 18px 12px;
}

#content {
  padding: 0 14px 40px;
  background: #fff;
}

.aging-card,
.scan-order-card {
  border: 0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .055);
}

.rootflow-product-details,
.rootflow-forecast-info {
  border-top: 0;
  box-shadow: inset 0 10px 18px -24px rgba(15, 23, 42, .9);
}

.empty {
  border: 0 !important;
  border-radius: 6px;
  background: linear-gradient(135deg, #fff, #f8faff);
  box-shadow: 0 5px 16px rgba(15, 23, 42, .05);
}

.center-toast,
.client-toast {
  left: auto;
  top: auto;
  right: 24px;
  bottom: 24px;
  min-width: 220px;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 15px;
  border: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, #fff, #f8fbff);
  color: #26344a;
  text-align: left;
  font-family: var(--font-cn);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .16), 0 1px 3px rgba(15, 23, 42, .06);
  transform: translateY(12px) scale(.985);
}

.center-toast.visible,
.client-toast.show {
  transform: translateY(0) scale(1);
}

.center-toast.success,
.client-toast.success {
  background: linear-gradient(135deg, #fff, #f1fbf6);
  color: #176b49;
}

.center-toast.error,
.client-toast.error {
  background: linear-gradient(135deg, #fff, #fff3f2);
  color: #b42318;
}

.center-toast.loading,
.client-toast.loading {
  background: linear-gradient(135deg, #fff, #edf4ff);
  color: #0d56c8;
}

.erp-dialog-mask {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(15, 23, 42, .46);
}

.erp-dialog-card {
  width: min(460px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  border: 0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 30px 82px rgba(15, 23, 42, .26), 0 5px 16px rgba(15, 23, 42, .08);
}

.erp-dialog-head {
  padding: 21px 22px 14px;
  background: linear-gradient(112deg, #fff 0, #f4f8ff 72%, #fffaf5 120%);
  box-shadow: 0 12px 24px -28px rgba(15, 23, 42, .95);
}

.erp-dialog-kicker {
  display: block;
  margin-bottom: 6px;
  color: #146ef5;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
}

.erp-dialog-card h2 {
  margin: 0;
  color: #172033;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
}

.erp-dialog-body { padding: 5px 22px 20px; }

.erp-dialog-copy {
  margin: 0;
  color: #526176;
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.erp-dialog-field {
  display: grid;
  gap: 7px;
  margin-top: 16px;
  color: #3f4d61;
  font-size: 12px;
  font-weight: 500;
}

.erp-dialog-input {
  min-height: 42px;
  border-color: #d5deea;
  border-radius: 7px;
  background: #fbfcff;
  font-size: 14px;
}

.erp-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 14px 22px 18px;
  background: #fbfcfe;
  box-shadow: 0 -12px 24px -30px rgba(15, 23, 42, .9);
}

.erp-dialog-button {
  min-width: 84px;
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  font-weight: 500;
}

.erp-dialog-button--ghost { background: #eef2f6; color: #4b5b70; }
.erp-dialog-button--primary { background: #146ef5; color: #fff; box-shadow: 0 6px 16px rgba(20, 110, 245, .18); }
.erp-dialog-button--danger { background: #d83a32; color: #fff; box-shadow: 0 6px 16px rgba(216, 58, 50, .16); }
.erp-dialog-mask.tone-danger .erp-dialog-kicker,
.erp-dialog-mask.tone-error .erp-dialog-kicker { color: #c4322a; }
.erp-dialog-mask.tone-warning .erp-dialog-kicker { color: #c06a12; }

html.erp-overlay-locked,
body.erp-overlay-locked {
  overflow: hidden;
  overscroll-behavior: none;
}

.erp-media-viewer-mask {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 13, 23, .9);
}

.erp-media-viewer {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  outline: none;
}

.erp-media-viewer__stage {
  position: relative;
  width: calc(100vw - 160px);
  height: calc(100vh - 96px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 42%, rgba(35, 105, 220, .16), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
}

.erp-media-viewer__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 26px 70px rgba(0,0,0,.34);
  transform-origin: center;
  opacity: 0;
  transition: transform .14s ease, opacity .16s ease;
}

.erp-media-viewer__stage[data-media-state="ready"] .erp-media-viewer__image { opacity: 1; }

.erp-media-viewer__status {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 7px;
  width: min(340px, calc(100% - 40px));
  padding: 19px 22px;
  border-radius: 8px;
  background: rgba(9, 16, 28, .84);
  color: #fff;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .24);
  text-align: center;
  transform: translate(-50%, -50%);
  transition: opacity .16s ease, visibility .16s ease;
}

.erp-media-viewer__status::before {
  content: "";
  width: 122px;
  height: 38px;
  border-radius: 8px;
  background: #fff url("/static/ryvoflow-logo.svg") center / 104px auto no-repeat;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .24), 0 0 0 1px rgba(255, 255, 255, .12);
  transform-origin: center;
  animation: logistics-brand-breathe 1.45s ease-in-out infinite;
}

.erp-media-viewer__status strong { font-size: 15px; font-weight: 600; }
.erp-media-viewer__status span { color: #b9c5d6; font-size: 12px; line-height: 1.55; }
.erp-media-viewer__status button {
  display: none;
  min-width: 92px;
  min-height: 36px;
  margin-top: 4px;
  border: 0;
  border-radius: 6px;
  background: #fff;
  color: #0d56c8;
  font-weight: 500;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.erp-media-viewer__stage[data-media-state="ready"] .erp-media-viewer__status {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.erp-media-viewer__stage[data-media-state="error"] .erp-media-viewer__status::before {
  width: 122px;
  background: #fff url("/static/ryvoflow-logo.svg") center / 104px auto no-repeat;
  filter: grayscale(.18);
  opacity: .72;
  animation: none;
}

.erp-media-viewer__stage[data-media-state="error"] .erp-media-viewer__status button { display: inline-flex; align-items: center; justify-content: center; }

.erp-media-viewer__close,
.erp-media-viewer__nav,
.erp-media-viewer__meta {
  position: absolute;
  z-index: 2;
  border: 0;
  border-radius: 6px;
  background: rgba(10, 15, 24, .82);
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}

.erp-media-viewer__close {
  top: 20px;
  right: 22px;
  min-width: 66px;
  min-height: 36px;
  opacity: .62;
}

.erp-media-viewer:hover .erp-media-viewer__close,
.erp-media-viewer__close:focus-visible { opacity: 1; }

.erp-media-viewer__nav {
  top: 50%;
  min-width: 72px;
  min-height: 40px;
  transform: translateY(-50%);
}

.erp-media-viewer__nav--prev { left: 22px; }
.erp-media-viewer__nav--next { right: 22px; }

.erp-media-viewer__meta {
  left: 50%;
  bottom: 18px;
  display: flex;
  gap: 10px;
  padding: 8px 11px;
  color: #d8e0eb;
  font-size: 12px;
  transform: translateX(-50%);
}

[role="button"][tabindex="0"]:focus-visible,
.stock-image-uploader:focus-visible,
.recharge-drop-zone:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(20, 110, 245, .78) !important;
}

.copyable-number {
  width: auto;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.copyable-number:hover {
  border: 0;
  background: transparent;
  color: #0d56c8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.platform-mark,
.order-merge-no {
  color: #146ef5;
  font-family: var(--font-cn-medium);
  font-weight: 500;
}

.product-title-clamp {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.45;
}

@media (max-width: 1280px) {
  .order-card-grid > div:nth-child(n + 5) { border-top: 0; }
}

@media (max-width: 1080px) {
  .workspace { padding: 0 0 32px; }
  .topbar { margin: 0 0 10px; padding-inline: 14px; }
  #content { padding-inline: 10px; }
  .menu { scrollbar-width: none; -ms-overflow-style: none; }
  .menu::-webkit-scrollbar { display: none; }
}

@media (max-width: 640px) {
  .erp-dialog-mask { padding: 12px; }
  .erp-dialog-head { padding: 18px 17px 12px; }
  .erp-dialog-body { padding: 4px 17px 16px; }
  .erp-dialog-actions { padding: 12px 17px 16px; }
  .erp-media-viewer__stage { width: calc(100vw - 24px); height: calc(100vh - 120px); }
  .erp-media-viewer__nav { top: auto; bottom: 18px; transform: none; }
  .erp-media-viewer__nav--prev { left: 14px; }
  .erp-media-viewer__nav--next { right: 14px; }
  .erp-media-viewer__meta { bottom: 66px; }
  .center-toast,
  .client-toast { right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .erp-media-viewer__image { transition: none; }
  .erp-media-viewer__status::before { animation: none; }
}

/* ============================================================
   RootFlow ERP P2 closure · density, action hierarchy and touch.
   ============================================================ */
.menu-reminder {
  border-radius: 5px;
  box-shadow: 0 2px 7px rgba(216, 58, 50, .16);
}

table { border-spacing: 0 4px; }

tbody tr,
tbody tr:hover,
.order-card,
.order-card:hover,
.scan-order-card,
.scan-order-card:hover,
.aging-card,
.aging-card:hover {
  transform: none;
}

tbody tr {
  box-shadow: 0 2px 9px rgba(15, 23, 42, .045), 0 1px 2px rgba(15, 23, 42, .025);
}

tbody tr:hover {
  box-shadow: 0 4px 13px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .03);
}

td.empty {
  padding-block: 28px;
  color: #7d899a;
  background: linear-gradient(135deg, #fff, #f8faff);
  box-shadow: none;
}

.panel.empty {
  min-height: 104px;
  display: grid;
  place-items: center;
  padding: 24px;
}

.order-actions button,
.order-actions .file-button span {
  border-color: transparent;
  background: #f2f5f8;
  color: #435168;
  box-shadow: none;
}

.order-actions button:hover,
.order-actions button:not(.order-action-primary):hover,
.order-actions .file-button span:hover {
  border-color: transparent;
  background: #e8eef5;
  color: #16243a;
  box-shadow: none;
}

.order-actions .order-action-primary,
.order-actions .order-action-primary:hover {
  border-color: #146ef5;
  background: #146ef5;
  color: #fff;
  box-shadow: 0 4px 12px rgba(20, 110, 245, .16);
}

.order-actions .order-action-primary:hover {
  border-color: #0d56c8;
  background: #0d56c8;
}

.order-actions .order-action-danger,
.order-actions .order-action-danger:hover {
  border-color: transparent;
  background: #fff1f0;
  color: #c4322a;
  box-shadow: none;
}

.order-actions button.warn,
.order-actions button.warn:hover {
  border-color: transparent;
  background: #fff4e8;
  color: #b45d09;
  box-shadow: none;
}

.order-actions button.scale-action,
.order-actions button.scale-action:hover,
.scan-order-actions button.scale-action,
.scan-order-actions button.scale-action:hover {
  border-color: transparent;
  background: #eaf8f3;
  color: #08785d;
  box-shadow: none;
}

.erp-dialog-actions { flex-wrap: wrap; }

.erp-media-viewer-mask {
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
}

.erp-media-viewer__stage {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.erp-media-viewer__meta {
  max-width: calc(100vw - 32px);
  white-space: nowrap;
}

@media (pointer: coarse) {
  .erp-media-viewer__close,
  .erp-media-viewer__nav {
    min-height: 44px;
  }
  .erp-media-viewer__close { min-width: 72px; opacity: 1; }
  .erp-media-viewer__nav { min-width: 88px; }
}

@media (max-width: 640px) {
  .erp-dialog-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  .erp-dialog-actions .erp-dialog-button { width: 100%; min-height: 42px; }
  .erp-media-viewer__meta { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

.inbound-review-guidance,
.inbound-review-source-warning {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 8px;
  line-height: 1.55;
}

.inbound-review-guidance {
  border: 1px solid #b8d5ff;
  background: #eff6ff;
  color: #175cd3;
}

.inbound-review-source-warning {
  border: 1px solid #fedf89;
  background: #fffaeb;
  color: #93370d;
}

.inbound-review-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.inbound-review-stat {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.inbound-review-stat span {
  color: var(--muted);
  font-size: 13px;
}

.inbound-review-stat strong {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.inbound-review-stat.amber strong { color: #b54708; }
.inbound-review-stat.green strong { color: #067647; }
.inbound-review-stat.red strong { color: #b42318; }

.inbound-review-toolbar input {
  width: min(360px, 42vw);
}

.inbound-review-tracking {
  color: #175cd3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.inbound-review-note {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inbound-review-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 760px) {
  .inbound-review-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .inbound-review-toolbar input {
    width: 260px;
  }
}

/* Final responsive audit: keep the desktop split login truly centered and
   prevent dense editor tables or dialogs from being clipped on narrow screens. */
.login-layout { transform: none; }

.modal-card {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  overscroll-behavior: contain;
}

.modal-head .modal-close {
  width: auto;
  min-width: 44px;
  min-height: 36px;
  padding-inline: 8px;
  white-space: nowrap;
}

@media (pointer: coarse) {
  .modal-head .modal-close { min-height: 44px; }
}

@media (max-width: 640px) {
  .modal-mask { padding: 12px; }
  .modal-card {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
  .content-list-grid .table-wrap {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
  }
  .content-list-grid table { min-width: 620px; }
}

/* Final surface pass v7: content-height rows and viewport-safe dialog chrome. */
.order-card-grid {
  min-height: 0;
}

.modal-card,
.erp-dialog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-card > .modal-head,
.modal-card > .modal-actions,
.erp-dialog-card > .erp-dialog-head,
.erp-dialog-card > .erp-dialog-actions {
  flex: 0 0 auto;
}

.modal-card > .panel-body,
.modal-card > .camera-body,
.erp-dialog-card > .erp-dialog-body {
  min-height: 0;
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
}

.modal-head > div,
.erp-dialog-head > div {
  min-width: 0;
}

.modal-head h3,
.erp-dialog-head h2 {
  overflow-wrap: anywhere;
}

@media (max-width: 1080px) {
  .order-card-grid {
    gap: 2px;
    background: #f2f5f8;
  }

  .order-card-grid > div {
    border: 0;
    background: #fff;
  }
}

@media (pointer: coarse) {
  .menu button,
  .order-tabs button,
  .finance-tabs button,
  .row-actions button,
  .actions button,
  .file-button span {
    min-height: 44px;
  }
}

/* ============================================================
   RootFlow logistics final closure v9 · continuous work surface.
   Keep dense ERP information readable while removing the last hard seams.
   ============================================================ */
.panel-head,
.topbar,
.actions,
.row-actions {
  min-width: 0;
}

.panel-head > *,
.topbar > * {
  min-width: 0;
}

.panel-head {
  gap: 10px 14px;
  flex-wrap: wrap;
}

.panel-head .actions,
.row-actions,
.actions {
  align-items: center;
}

.panel-desc,
.topbar p,
.empty,
.inline-error,
.form-error {
  overflow-wrap: anywhere;
}

input:not([type="checkbox"]):not([type="radio"]),
select {
  min-height: 40px;
}

.table-wrap {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}

.table-wrap:focus-within {
  box-shadow: inset 0 0 0 1px rgba(20, 110, 245, .11);
}

tbody tr,
.order-card,
.scan-order-card,
.aging-card {
  isolation: isolate;
}

.panel > .empty,
.panel-body > .empty,
.inline-error:not(:empty),
.form-error:not(:empty) {
  border: 0;
  border-radius: 7px;
}

.inline-error:not(:empty),
.form-error:not(:empty) {
  padding: 9px 11px;
  background: linear-gradient(135deg, #fff8f7, #fff2f1);
  color: #b8322a;
  box-shadow: inset 3px 0 #df5148, 0 3px 10px rgba(180, 45, 36, .055);
}

@media (max-width: 1080px) {
  .login-logo-panel img.login-hero {
    display: none;
  }
}

@media (max-width: 640px) {
  .topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .topbar .userbar,
  .panel-head .actions {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .topbar .userbar::-webkit-scrollbar,
  .panel-head .actions::-webkit-scrollbar {
    display: none;
  }

  .panel-head {
    padding-inline: 12px;
  }

  .panel-body {
    padding-inline: 12px;
  }

  .table-wrap {
    padding-inline: 5px;
    scrollbar-gutter: auto;
  }

  .modal-actions,
  .erp-dialog-actions {
    gap: 8px;
  }
}

@media (pointer: coarse) {
  button,
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  .file-button span,
  .modal-head .modal-close {
    min-height: 44px;
  }
}

/* ── 库存管理:子 Tab(库存审核 / 库存商品)与按用户两级展示 ── */
.stock-tabs-panel {
  padding: 4px 18px 0;
}

.stock-tabs {
  display: flex;
  gap: 18px;
  padding: 0 2px;
}

.stock-tabs .stock-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 5px 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #596579;
  font-weight: 600;
  cursor: pointer;
}

.stock-tabs .stock-tab:hover {
  color: #146ef5;
}

.stock-tabs .stock-tab.active {
  color: #146ef5;
  box-shadow: inset 0 -2px #146ef5;
}

.stock-tab-badge {
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #f5a524;
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
}

/* 一级:用户汇总行,整行可点开 */
.stock-customer-row {
  cursor: pointer;
}

.stock-customer-row:hover {
  background: #f6f9ff;
}

.stock-customer-row.open {
  background: #f2f7ff;
}

.stock-caret {
  display: inline-block;
  width: 16px;
  color: #8a94a6;
}

/* 二级:展开后的该用户库存明细 */
.stock-detail-wrap > td {
  padding: 0 0 12px;
  background: #fafbfd;
}

.stock-detail-table {
  width: 100%;
}

.stock-detail-table th {
  font-size: 12px;
  color: #6b7280;
}

/* 触屏基线:.stock-tab 的 min-height:38px 特异度高于末尾 @media(pointer:coarse) 的 button 规则,
   不在这里重申会把 Tab 的可点区压到 38px,破坏项目统一的 44px 触控标准 */
@media (pointer: coarse) {
  .stock-tabs .stock-tab {
    min-height: 44px;
  }
}

/* 库存设置 Tab 的设置项网格 */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  padding: 16px 18px 20px;
}

.settings-item {
  padding: 14px 16px;
  border: 1px solid #e8ecf3;
  border-radius: 10px;
  background: #fbfcfe;
  min-width: 0;
}

.settings-label {
  font-size: 13px;
  color: #6b7280;
}

.settings-value {
  margin: 4px 0 6px;
  font-size: 22px;
  font-weight: 600;
  color: #146ef5;
}

/* ============================================================
   订单卡片重构(2026-08-04)
   问题:6 列硬网格 + 13 个等大按钮(各 48px 高)+ 无条件渲染空占位,
   卡片高 300px+,1600px 宽屏一屏只能看 2 单。仓库每天几百单,翻页翻到手酸。
   目标:一屏 4~5 单,一眼看清"这单该干什么"。
   ============================================================ */

/* 网格改自适应:窄屏自动堆叠,不再被 6 个 minmax 撑爆 */
.order-card-grid {
  grid-template-columns: minmax(150px, .8fr) 92px minmax(190px, 1.1fr) minmax(180px, 1fr) minmax(210px, 1.15fr) minmax(232px, 1fr);
  min-height: 0;
}

.order-card-grid > div {
  padding: 10px 12px;
}

/* 商品图要大:仓库靠图核对"是不是这个货",太小根本看不清 */
.order-card-grid .product-thumb,
.order-card-grid .product-thumb-button {
  width: 150px;
  height: 200px;
}

.order-card-grid .empty-thumb {
  width: 150px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: #b6bfcc;
  font-size: 12px;
}

/* 商品参数行压紧 */
.rootflow-product-details {
  display: grid;
  gap: 2px;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
}

.rootflow-product-details > div {
  display: flex;
  gap: 6px;
}

.rootflow-product-details span {
  color: #8a94a6;
  min-width: 30px;
}

/* ---- 操作区:主次分明 ---- */
.order-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-content: start;
  justify-content: center;
}

.oa-primary-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 6px;
}

/* 主操作:蓝色实心,一眼看到"下一步做什么" */
.order-actions .oa-primary-row button {
  min-height: 40px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #2f7fe0;
  background: linear-gradient(180deg, #4a97e8, #2f7fe0);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.order-actions .oa-primary-row button:hover {
  filter: brightness(1.06);
}

.order-actions .oa-primary-row .oa-scale {
  border-color: #1d9d74;
  background: linear-gradient(180deg, #2fb98c, #1d9d74);
}

/* 次操作:描边淡色,不抢视线 */
.oa-secondary-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.order-actions .oa-secondary-row button {
  min-height: 32px;
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: #46536b;
  font-size: 12px;
  cursor: pointer;
}

.order-actions .oa-secondary-row button:hover {
  border-color: #9dbdf0;
  color: #1f6fd0;
  background: #f4f9ff;
}

/* 低频操作折叠,默认不占版面 */
.oa-more > summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  color: #7b8598;
  text-align: center;
  padding: 4px;
  border-radius: 6px;
  user-select: none;
}

.oa-more > summary::-webkit-details-marker { display: none; }
.oa-more > summary::after { content: " ▾"; }
.oa-more[open] > summary::after { content: " ▴"; }
.oa-more > summary:hover { background: #f2f5f9; color: #46536b; }

.oa-more-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.order-actions .oa-more-grid button {
  min-height: 32px;
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: #46536b;
  font-size: 12px;
  cursor: pointer;
}

.order-actions .oa-more-grid button.warn {
  border-color: #f0c36d;
  color: #a9741b;
}

.order-actions .oa-more-grid button.danger {
  border-color: #f0a9a9;
  color: #c0392b;
}

/* 签收区压缩:原来 align-content:center + gap 12px 把卡片撑高 */
.order-card-grid .sign-cell {
  gap: 6px;
  align-content: start;
  padding-top: 12px;
}

.order-card-grid .sign-cell button.primary {
  min-height: 34px;
  padding: 0 14px;
}

/* 触屏仍保 44px 可点区 */
@media (pointer: coarse) {
  .order-actions .oa-primary-row button { min-height: 44px; }
  .order-actions .oa-secondary-row button,
  .order-actions .oa-more-grid button { min-height: 40px; }
}

/* 窄屏(笔记本/平板)自动堆叠,不再横向溢出 */
@media (max-width: 1400px) {
  .order-card-grid {
    grid-template-columns: minmax(140px, .9fr) 72px minmax(180px, 1.1fr) minmax(180px, 1fr) minmax(200px, 1.1fr);
  }
  .order-card-grid .order-actions {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
  }
  .oa-secondary-row, .oa-more-grid { grid-template-columns: repeat(4, 1fr); }
}

/* 商品图放大到 150px:仓库拣货/核对全靠这张图,小图看不清。
   (之前无图是因为同步时 skipProductEnrichment=True 关掉了图片补齐,已在 app.py 修复) */
.order-card-grid .order-product-img {
  width: 150px;
  max-width: 150px;
  height: 200px;          /* 3:4 竖版 —— Ozon 原图多为 1024x1536,横版会把商品压扁 */
  object-fit: contain;
  background: #fafbfd;
  cursor: zoom-in;
}

.order-card-grid .order-product-img.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #b6bfcc;
  border-style: dashed;
  background: #fafbfd;
}

/* 订单页内嵌的扫码台默认折叠:仓库有独立的「扫码处理台」页面,
   订单页里它常年展开占掉近 300px,把真正要看的订单列表挤到屏幕外。 */
.inline-scan-desk {
  margin: 0 0 12px;
}

.inline-scan-desk > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: #46536b;
  font-size: 13px;
  user-select: none;
}

.inline-scan-desk > summary::-webkit-details-marker { display: none; }
.inline-scan-desk > summary::before { content: "⌨ "; }
.inline-scan-desk > summary::after { content: " ▾"; color: #8a94a6; }
.inline-scan-desk[open] > summary::after { content: " ▴"; }
.inline-scan-desk > summary:hover { border-color: #9dbdf0; color: #1f6fd0; }
.inline-scan-desk[open] > summary { margin-bottom: 8px; }

/* 单号是仓库最常读/最常复制的信息,给足视觉权重 */
.order-card-grid .sign-cell .copyable-number {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
}

.order-card-grid .tracking-label {
  font-size: 11px;
  color: #8a94a6;
}

/* 需要人处理的事标红提示,而不是显示一个"未选服务"的静默占位 */
.need-action {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fff4e5;
  border: 1px solid #f0c36d;
  color: #a9741b;
  font-size: 11px;
}

/* 预报信息块压紧行距 */
.rootflow-forecast-info {
  display: grid;
  gap: 3px;
  font-size: 12px;
}

.rootflow-forecast-info > div {
  display: flex;
  gap: 6px;
}

.rootflow-forecast-info span {
  color: #8a94a6;
  min-width: 52px;
}

.rootflow-forecast-info .forecast-status-line {
  margin-bottom: 2px;
}

/* 卡片高度收口:实测各列内容只有 120px 左右,却被操作区的按钮总高拉到 218px。
   仓库一天翻几百单,每单省 60px = 少滚一半的屏。 */
.order-actions {
  gap: 6px;
  justify-content: start;
  padding-top: 12px;
}

.order-actions .oa-primary-row button { min-height: 34px; font-size: 12.5px; }
.order-actions .oa-secondary-row button,
.order-actions .oa-more-grid button { min-height: 28px; font-size: 11.5px; }
.oa-more > summary { padding: 2px; font-size: 11.5px; }

/* 商品名两行截断即可,不要为长俄文标题留一大片空 */
.sku-cell .product-title-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

/* 各列顶部对齐,不再垂直居中留白 */
.order-card-grid > div {
  align-content: start;
}

@media (pointer: coarse) {
  .order-actions .oa-primary-row button { min-height: 42px; }
  .order-actions .oa-secondary-row button,
  .order-actions .oa-more-grid button { min-height: 38px; }
}

/* .rootflow-forecast-info > div 是 flex,会把 need-action 拉成通栏,改为自适应宽度 */
.rootflow-forecast-info .need-action {
  align-self: start;
  width: fit-content;
}

/* 抽检单左右分栏原来固定 1:1。实际常态是"未处理很少、已处理很多"(线上 0 vs 573),
   空栏白占半屏,而真正要看的 573 条被挤在右边一半宽度里。改成按有无数据自适应。 */
.check-split-layout.no-pending {
  grid-template-columns: minmax(240px, .32fr) minmax(0, 1fr);
}

.check-split-layout.no-handled {
  grid-template-columns: minmax(0, 1fr) minmax(240px, .32fr);
}

/* 空栏给正向反馈而不是冷冰冰的"暂无":仓库看到"暂无"会怀疑是没加载出来 */
.check-list-panel .empty {
  color: #7b8598;
}

.check-list-panel.pending .empty {
  color: #1d9d74;
  font-weight: 600;
}

/* 退货操作:主操作(下一步)突出,其余收进「其它」 */
.return-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.return-actions .ra-more > summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  color: #7b8598;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  user-select: none;
  white-space: nowrap;
}

.return-actions .ra-more > summary::-webkit-details-marker { display: none; }
.return-actions .ra-more > summary::after { content: " ▾"; }
.return-actions .ra-more[open] > summary::after { content: " ▴"; }
.return-actions .ra-more > div {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* 批量结果弹窗要能完整列出失败单(可能十几条),保留换行并允许滚动/选中复制 */
.erp-dialog-copy {
  white-space: pre-wrap;
  text-align: left;
  max-height: 46vh;
  overflow-y: auto;
  user-select: text;
}

/* 图片列留够宽度容纳 150px 大图 */
.order-card-grid {
  grid-template-columns: minmax(150px, .8fr) 162px minmax(190px, 1.1fr) minmax(180px, 1fr) minmax(210px, 1.15fr) minmax(232px, 1fr);
}

@media (max-width: 1400px) {
  .order-card-grid {
    grid-template-columns: minmax(140px, .9fr) 150px minmax(180px, 1.1fr) minmax(180px, 1fr) minmax(200px, 1.1fr);
  }
}

/* 商品名:中文在上、大而清晰(仓库靠它认货),俄文原名小字在下备查 */
.product-name-cn {
  font-size: 13.5px;
  font-weight: 600;
  color: #1f2a3d;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-name-ru {
  color: #98a1b0;
  font-size: 11.5px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 面单打印状态:批量打 100 张遇到卡纸时,靠这个区分哪些已经打过、避免重复贴单 */
.label-printed { color: #1d9d74; font-weight: 600; }
.label-unprinted { color: #a9741b; }

/* 需抽检标记:仓库封箱前必须一眼看到,否则开箱拍照的单会被直接封走 */
.check-order-flag {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fdecea;
  border: 1px solid #f0a9a9;
  color: #c0392b;
  font-size: 11px;
  font-weight: 600;
}

/* 拍照:与签收/打印/称重同级的高频操作,用紫色区分(出库凭证、异常留痕都靠它) */
.order-actions .oa-primary-row .oa-camera {
  border-color: #7c5cd6;
  background: linear-gradient(180deg, #9273e4, #7c5cd6);
}

/* 快捷键设置输入框:点一下再按键即可捕获 */
.hotkey-input {
  width: 130px;
  text-align: center;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  background: #f7f9fc;
}

.hotkey-input:focus {
  background: #fff;
  border-color: #2f7fe0;
  box-shadow: 0 0 0 3px rgba(47, 127, 224, .15);
}

/* 抽检单:未处理/已处理改 Tab(左右分栏太占地方) */
.check-tabs-bar { display: flex; gap: 8px; margin: 12px 0 0; }
.check-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border: 1px solid var(--border, #d9dbe0); border-bottom: none;
  border-radius: 8px 8px 0 0; background: var(--panel-muted, #f5f6f8);
  color: var(--text-muted, #666); font-size: 14px; cursor: pointer;
}
.check-tab span {
  min-width: 20px; padding: 0 6px; border-radius: 10px;
  background: rgba(0,0,0,.08); font-size: 12px; line-height: 18px; text-align: center;
}
.check-tab.active {
  background: var(--panel, #fff); color: var(--text, #1f2329);
  font-weight: 600; box-shadow: 0 -2px 0 var(--primary, #2f6fed) inset;
}
.check-tab.active span { background: var(--primary, #2f6fed); color: #fff; }
.check-list-panel { border-radius: 0 8px 8px 8px; margin-top: 0; }
.check-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 12px; border-top: 1px solid var(--border, #eceef1);
  font-size: 13px; color: var(--text-muted, #666);
}
.check-pager button { padding: 5px 14px; }
.check-pager button[disabled] { opacity: .45; cursor: not-allowed; }

/* 今日工作量条(顶部) */
.stats-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.stats-bar:empty { display: none; }
.stats-bar .stat {
  flex: 1 1 120px; min-width: 110px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 14px; border: 1px solid var(--border, #e6e8eb); border-radius: 10px;
  background: var(--panel, #fff);
}
.stats-bar .stat span { font-size: 12px; color: var(--text-muted, #82868f); }
.stats-bar .stat strong { font-size: 20px; font-weight: 650; color: var(--text, #1f2329); line-height: 1.2; }
.stats-bar .stat.hot strong { color: var(--danger, #e14d4d); }

/* 表单弹窗(一次问完,替掉连环 prompt) */
.erp-dialog-card--form { max-width: 460px; }
.erp-dialog-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.erp-dialog-form .erp-dialog-field { display: flex; flex-direction: column; gap: 5px; }
.erp-dialog-form .erp-dialog-field > span { font-size: 13px; color: var(--text-muted, #6b7078); }
.erp-dialog-form input, .erp-dialog-form select, .erp-dialog-form textarea {
  width: 100%; padding: 8px 11px; border: 1px solid var(--border, #d9dbe0);
  border-radius: 7px; font-size: 14px; background: var(--panel, #fff); color: inherit;
}
.erp-dialog-form textarea { resize: vertical; font-family: inherit; }
.erp-dialog-required { color: var(--danger, #e14d4d); font-style: normal; }
.erp-dialog-formerror { margin: 10px 0 0; font-size: 13px; color: var(--danger, #e14d4d); }
.stats-bar .stat-hint { display: block; font-size: 11px; font-style: normal; color: var(--text-muted, #9aa0a8); line-height: 1.3; margin-top: 1px; }
.settings-field { display: flex; flex-direction: column; gap: 6px; max-width: 420px; font-size: 13px; color: var(--text-muted, #6b7078); }
.settings-field select { padding: 8px 11px; border: 1px solid var(--border, #d9dbe0); border-radius: 7px; font-size: 14px; background: var(--panel, #fff); color: var(--text, #1f2329); }
.port-list { margin: 4px 0 6px; padding-left: 18px; font-size: 12px; color: var(--text-muted, #6b7078); }
.port-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; }

/* 扫码/签收的视觉反馈:仓库看一眼就知道成没成 */
@keyframes cardFlashScan {
  0%   { box-shadow: 0 0 0 0 rgba(47,111,237,.55); background: rgba(47,111,237,.10); }
  60%  { box-shadow: 0 0 0 10px rgba(47,111,237,0); background: rgba(47,111,237,.05); }
  100% { box-shadow: 0 0 0 0 rgba(47,111,237,0); background: transparent; }
}
@keyframes cardFlashOk {
  0%   { box-shadow: 0 0 0 0 rgba(32,168,96,.6); background: rgba(32,168,96,.16); }
  60%  { box-shadow: 0 0 0 12px rgba(32,168,96,0); background: rgba(32,168,96,.06); }
  100% { box-shadow: 0 0 0 0 rgba(32,168,96,0); background: transparent; }
}
@keyframes cardFlashErr {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); } 30% { transform: translateX(7px); }
  45% { transform: translateX(-5px); } 60% { transform: translateX(5px); }
  75% { transform: translateX(-2px); }
}
.order-card.card-flash-scan { animation: cardFlashScan 1.4s ease-out; }
.order-card.card-flash-ok   { animation: cardFlashOk 1.4s ease-out; }
.order-card.card-flash-err  { animation: cardFlashErr .5s ease-in-out; border-color: var(--danger, #e14d4d) !important; }

/* 扫码命中的那一单要一眼找到。
   原来只有个小角标,还用负 top 溢出到卡片外 —— 列表第一单的角标被上面那排
   批量操作按钮整个挡住了(仓库实拍)。改成:角标放卡片内部 + 整张卡强化。 */
.order-card.scanned-order-card {
  position: relative;
  border: 2px solid #1A7DFF !important;
  background: #F2F8FF !important;
  box-shadow: 0 0 0 5px rgba(26, 125, 255, .14), 0 14px 32px rgba(15, 23, 42, .12) !important;
  margin-top: 6px;
}
/* 左侧粗色条:滚动时余光就能扫到 */
.order-card.scanned-order-card::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: #1A7DFF; border-radius: 8px 0 0 8px; pointer-events: none;
}
/* 角标在卡片"里面"的右上角,不溢出、不会被任何工具栏盖住 */
.order-card.scanned-order-card::before {
  content: "⬤ 刚扫到这单";
  position: absolute; top: 8px; right: 10px; z-index: 4;
  padding: 3px 11px; border-radius: 999px;
  background: #1A7DFF; color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
  box-shadow: 0 2px 8px rgba(26, 125, 255, .4);
  animation: scanBadgePulse 1.5s ease-in-out 3;
  pointer-events: none;
}
@keyframes scanBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}
.scan-result .scan-state { display: block; margin-top: 4px; font-size: 13px; color: var(--text-muted, #6b7078); }
.scan-result .scan-state b { color: var(--text, #1f2329); font-weight: 650; }

/* 右下角常驻电子秤读数:操作员放上包裹就看到数字,像用真秤一样 */
.live-scale {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  display: flex; align-items: baseline; gap: 8px;
  padding: 10px 18px; border-radius: 12px; cursor: pointer;
  background: rgba(24, 26, 30, .92); color: #fff;
  box-shadow: 0 6px 22px rgba(0,0,0,.25);
  font-variant-numeric: tabular-nums;
  transition: background .18s ease, box-shadow .18s ease;
}
.live-scale .ls-label { font-size: 11px; opacity: .65; letter-spacing: .5px; }
.live-scale b { font-size: 26px; font-weight: 700; line-height: 1; }
.live-scale .ls-unit { font-size: 12px; opacity: .8; }
.live-scale.stable { background: rgba(20, 122, 72, .95); box-shadow: 0 6px 22px rgba(20,122,72,.35); }
.live-scale.moving { background: rgba(160, 110, 20, .92); }
.live-scale.stale  { background: rgba(90, 94, 102, .85); }
.live-scale.stale b { opacity: .5; }
@media (max-width: 720px) { .live-scale { right: 10px; bottom: 10px; padding: 7px 13px; } .live-scale b { font-size: 20px; } }

/* 扫码处理台的结果区:直接复用订单中心的卡片,别再自成一套 */
.scan-order-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.scan-order-cards .order-card { margin: 0; }
.scan-result-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.scan-result-head strong { font-size: 15px; }

/* 扫码区的「已置顶 + 当前状态」摘要:仓库要靠它确认签没签上,不能像行小字 */
.scan-result.scan-inline-status:not(.muted) {
  border-left: 4px solid #1A7DFF;
  background: #F2F8FF;
  padding: 10px 14px;
  border-radius: 6px;
}
.scan-result .scan-state b { font-size: 14px; }