/* ==================== 基础重置 ==================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --color-bg: #f0f2f5;
  --color-surface: #ffffff;
  --color-primary: #4f46e5;
  --color-primary-light: #eef2ff;
  --color-primary-dark: #4338ca;
  --color-text: #1f2937;
  --color-text-secondary: #6b7280;
  --color-text-muted: #9ca3af;
  --color-border: #e5e7eb;
  --color-border-strong: #d1d5db;
  --color-hover: #f9fafb;
  --color-success: #10b981;
  --color-success-bg: #ecfdf5;
  --color-error: #ef4444;
  --color-error-bg: #fef2f2;
  --color-warning: #f59e0b;
  --color-warning-bg: #fffbeb;
  --color-red: #dc2626;
  --color-red-bg: #fef2f2;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --radius: 12px;
  --radius-sm: 8px;
  --transition: 0.15s ease;
}

html,
body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ==================== 布局 ==================== */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 600px;
  margin: 0 auto;
  background: var(--color-bg);
  position: relative;
}

/* ==================== 顶部栏 ==================== */
.app-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0 16px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.app-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
}
/* 客户视图：左上角标题变橙红底LOGO徽章（与整站暖色统一） */
.app-title.logo-badge {
  background: linear-gradient(135deg, #f4511e, #ff8a50);
  color: #fff;
  font-size: 16px;
  letter-spacing: 1px;
  padding: 6px 14px;
  border-radius: 8px;
  line-height: 1.2;
}

.status-badge {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 500;
}

.status-ok { background: var(--color-success-bg); color: var(--color-success); }
.status-error { background: var(--color-error-bg); color: var(--color-error); }
.status-unknown { background: var(--color-warning-bg); color: var(--color-warning); }

/* ==================== 主内容区 ==================== */
.main-content {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 70px;
}

.view {
  display: none;
  padding: 12px;
}

.view.active {
  display: block;
}

/* ==================== 日期选择栏 ==================== */
.date-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.date-input {
  padding: 8px 12px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  min-width: 150px;
  font-weight: 500;
}

.date-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.trace-search-input {
  flex: 1;
  min-width: 120px;
  padding: 8px 12px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
}

.trace-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.date-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.quick-date-btn {
  padding: 6px 14px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}

.quick-date-btn:active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.quick-date-btn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.chip {
  padding: 6px 14px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 20px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.chip.active,
.chip:active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

/* 预警页「查询」按钮：主色高亮 */
.chip.chip-primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
  padding: 6px 18px;
}

/* 预警页顶部提示：独占一整行，允许换行，保证完整可见 */
.alert-hint {
  flex: 0 0 100%;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: break-word;
}

/* ==================== 汇总卡片 ==================== */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.summary-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 16px 14px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.summary-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}

.summary-card.amount::before { background: var(--color-primary); }
.summary-card.orders::before { background: var(--color-success); }
.summary-card.profit::before { background: var(--color-warning); }
.summary-card.tax::before { background: var(--color-error); }

.summary-label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.summary-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
}

.summary-value.small {
  font-size: 16px;
}

.summary-value .currency {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* ==================== 区块标题 ==================== */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 4px;
}

.section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

.section-count {
  margin-left: 12px;
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ==================== 卡片列表 ==================== */
.card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
}

.info-card:active {
  box-shadow: var(--shadow-md);
}

.card-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.card-row + .card-row {
  margin-top: 6px;
}

.card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bill-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.card-sub {
  font-size: 12px;
  color: var(--color-text-muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-amount {
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.card-amount.red { color: var(--color-red); }
.card-amount.green { color: var(--color-success); }
.card-amount.primary { color: var(--color-primary); }

.card-tag {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 500;
  white-space: nowrap;
}

.card-tag.gray {
  background: #f3f4f6;
  color: var(--color-text-secondary);
}

/* 单据类型标签：绿色，区别于部门(蓝)/人名(灰) */
.card-tag.bill-type {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #a7f3d0;
}

/* 库存有效期预警 */
.card-tag.stock-warning {
  background: #fffbeb;
  color: #f59e0b;
  border: 1px solid #fde68a;
}
.card-tag.stock-expired {
  background: #fef2f2;
  color: #ef4444;
  border: 1px solid #fca5a5;
}

/* 潜在危机类型标签 */
.card-tag.risk-c {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fcd34d;
  font-weight: 600;
}
.card-tag.risk-sm {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
  font-weight: 600;
}

/* 同品种后续批次卡片：轻微缩进+虚线边框区分 */
.info-card.same-product {
  border-left: 3px solid var(--color-primary);
  background: #fafbfc;
}

/* ==================== 订单内商品列表 ==================== */
.goods-list {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.goods-item {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 3px 8px;
  background: #f0f5ff;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.4;
}

.goods-num {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* 客户预警：品种纵向列表 */
.alert-goods-count {
  margin-left: auto;
}

/* 预警卡片：客户名允许换行（长名称不再挤压右侧天数），天数徽标固定右侧 */
.alert-name {
  flex: 1;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
  line-height: 1.45;
}

.days-badge {
  flex-shrink: 0;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}

/* 未进货天数 < 90 天：橙色，>= 90 天：红色 */
.days-badge.warn {
  background: #fffbeb;
  color: #b45309;
  border-color: #fcd34d;
}

/* 广阔市场：进货次数徽标（蓝色） */
.buy-badge {
  flex-shrink: 0;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #93c5fd;
}

/* 广阔市场：省份标签（青绿色） */
.card-tag.prov {
  background: #ecfdf5;
  color: #0f766e;
  border: 1px solid #99f6e4;
}

/* 客服标签：正常蓝色；一省多客服（workplace 维护重复）红色警示；无匹配灰色 */
.card-tag.kf {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.card-tag.kf.multi {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.card-tag.kf.none {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
}

/* 广阔市场：kk_weixin=518（联系了但没加上）的未加原因 */
.mkt-remark {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  background: #fff7ed;
  color: #c2410c;
  border: 1px solid #fed7aa;
  font-size: 12px;
  line-height: 1.4;
}

.goods-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.goods-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  background: #f0f5ff;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.4;
}

.goods-row-name {
  min-width: 0;
  overflow-wrap: break-word;
}

.goods-row-date {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-text-secondary);
  font-weight: 500;
}
.search-bar {
  margin-bottom: 12px;
}

.search-bar .search-input {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 15px;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
}

.search-bar .search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* ==================== 待审批汇总 ==================== */
.approval-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 12px;
}

.approval-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}

.approval-total-num {
  font-size: 28px;
  font-weight: 700;
  color: #d97706;
  line-height: 1;
}

.approval-total-label {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.approval-wf-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.approval-wf-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fde68a;
}

.approval-wf-tag b {
  font-weight: 700;
}

.approval-sum {
  color: var(--color-text);
  font-weight: 500;
}

/* 待审批金额合计（带 kk_pmje 的单据） */
.approval-amount-total {
  font-size: 14px;
  font-weight: 700;
  color: #dc2626;
  margin-left: auto;
  white-space: nowrap;
}

/* 待审批单据备注（主表 Remark） */
.approval-remark {
  color: var(--color-text-secondary);
  font-size: 12px;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 4px 8px;
  word-break: break-all;
}

/* ==================== 明细汇总 ==================== */
.detail-summary {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  background: var(--color-surface);
  padding: 12px 14px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* ==================== 部门筛选栏 ==================== */
.dept-filter-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 12px;
  padding-bottom: 4px;
}

.dept-filter-bar::-webkit-scrollbar {
  height: 3px;
}
.dept-filter-bar::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: 3px;
}

.dept-chip {
  padding: 5px 12px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 16px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.dept-chip.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

.detail-summary-item {
  flex: 1;
  text-align: center;
}

.detail-summary-item .label {
  font-size: 11px;
  color: var(--color-text-muted);
}

.detail-summary-item .value {
  font-size: 16px;
  font-weight: 700;
  margin-top: 2px;
}

/* ==================== 切换标签 ==================== */
.tab-bar {
  display: flex;
  gap: 0;
  margin-bottom: 12px;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 3px;
  box-shadow: var(--shadow-sm);
}

.tab-btn {
  flex: 1;
  padding: 8px 2px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 500;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.tab-btn.active {
  background: var(--color-primary);
  color: white;
  font-weight: 600;
}

/* ==================== 底部导航 ==================== */
.bottom-nav {
  display: flex;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 600px;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 4px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 11px;
  transition: color var(--transition);
}

.nav-btn.active {
  color: var(--color-primary);
  font-weight: 600;
}

.nav-icon {
  font-size: 20px;
  line-height: 1;
}

/* ==================== 空状态/加载/错误 ==================== */
.empty-state,
.loading-state,
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  gap: 8px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 20px;
}

.error-state { color: var(--color-error); }

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* ==================== 数据表视图 ==================== */
.toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.select-control {
  padding: 8px 12px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  outline: none;
  flex: 1;
  min-width: 140px;
}

.toolbar .search-box {
  flex: 1;
  min-width: 120px;
}

.toolbar .search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
}

.toolbar .search-input:focus {
  border-color: var(--color-primary);
}

.toolbar .search-input:disabled {
  background: #f3f4f6;
}

.table-wrapper {
  overflow-x: auto;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.data-table thead {
  background: #f8f9fb;
  position: sticky;
  top: 0;
}

.data-table th {
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-secondary);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.data-table th .sort-icon::after { content: " \2195"; opacity: 0.3; }
.data-table th.sorted-asc .sort-icon::after { content: " \25B2"; opacity: 1; color: var(--color-primary); }
.data-table th.sorted-desc .sort-icon::after { content: " \25BC"; opacity: 1; color: var(--color-primary); }

.data-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-table tbody tr:hover { background: var(--color-hover); }
.data-table td.null-value { color: var(--color-text-muted); font-style: italic; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  gap: 8px;
}

#pageInfo {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.page-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page-btn {
  min-width: 36px;
  height: 36px;
  border: 1.5px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-btn:active { background: var(--color-primary); color: white; border-color: var(--color-primary); }
.page-btn:disabled { opacity: 0.4; }

.page-link {
  min-width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.page-link.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.page-numbers {
  display: flex;
  gap: 3px;
}

/* ==================== 桌面端适配 ==================== */
@media (min-width: 601px) {
  .app {
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  }
}

@media (min-width: 769px) {
  .summary-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==================== 登录遮罩 ==================== */
.login-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-box {
  background: white;
  border-radius: 20px;
  padding: 36px 28px 28px;
  width: 100%;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.login-icon {
  font-size: 40px;
  margin-bottom: 12px;
}

.login-box h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 24px;
}

.login-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--color-border-strong);
  border-radius: 10px;
  font-size: 16px;
  text-align: center;
  outline: none;
  margin-bottom: 16px;
  box-sizing: border-box;
}

.login-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.login-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}

.login-btn:active { opacity: 0.85; }
.login-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* 游客进入按钮（白底描边，与账密登录的主按钮区分层次） */
.guest-btn {
  background: white;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

/* 「已有账号」分隔线 */
.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 16px;
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

.login-error {
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-error);
  min-height: 18px;
}

/* 退出按钮 */
.logout-btn {
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.logout-btn:active {
  background: var(--color-error-bg);
  color: var(--color-error);
  border-color: var(--color-error);
}

/* ==================== 待审批单据详情弹层 ==================== */
.approval-card {
  cursor: pointer;
  transition: background var(--transition);
}

.approval-card:active {
  background: var(--color-hover);
}

.ad-card-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: right;
}

.ad-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.ad-panel {
  background: var(--color-surface);
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  border-radius: 14px 14px 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
}

.ad-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.ad-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ad-body {
  overflow-y: auto;
  padding: 12px 16px 28px;
}

.ad-keycard {
  background: var(--color-primary-light);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.ad-sum {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.ad-amount {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-red);
  margin: 4px 0;
}

.ad-remark {
  font-size: 13px;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  margin-top: 6px;
}

.ad-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 8px;
  gap: 8px;
}

.ad-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 14px 0 8px;
}

.ad-kv {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 13px;
}

.ad-k {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.ad-v {
  color: var(--color-text);
  text-align: right;
  overflow-wrap: break-word;
  min-width: 0;
}

.ad-detail-card {
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.ad-detail-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

/* ==================== 客户品种库存（客户角色专用） ==================== */
/* 客户页面整体白底，与产品图片白底融合 */
#view-kh {
  background: #fff;
}

.kh-payment-box {
  margin-top: 16px;
}
.kh-qr-card {
  background: var(--color-card-bg, #fff);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.kh-qr-img {
  max-width: 200px;
  width: 60%;
  border-radius: 8px;
  /* 允许手机长按弹出"识别二维码/保存图片"菜单（微信内长按可直接付款） */
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
  pointer-events: auto;
}
.kh-qr-label {
  margin-top: 10px;
  font-size: 14px;
  color: var(--color-text-secondary, #666);
}
.kh-qr-download {
  display: inline-block;
  margin-top: 10px;
  padding: 7px 22px;
  font-size: 13px;
  color: #f4511e;
  border: 1px solid #f4511e;
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  cursor: pointer;
}
.kh-qr-download:active {
  background: #fff3e0;
}
.kh-qr-tip {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-tertiary, #999);
}
.kh-qr-service {
  margin-top: 6px;
  font-size: 13px;
  color: var(--color-text-secondary, #666);
}

.kh-product-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kh-card {
  background: var(--color-card-bg, #fff);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
/* 药师帮式左图右文布局：上半区横向排布 */
.kh-card-main {
  display: flex;
  gap: 10px;
  padding: 10px 12px 6px;
  align-items: flex-start;
}
.kh-card-img {
  width: 116px;
  height: 116px;
  flex-shrink: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kh-product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.kh-img-placeholder {
  color: #999;
  font-size: 12px;
}
.kh-img-placeholder span {
  display: block;
}
.kh-card-body {
  flex: 1;
  min-width: 0;
}
.kh-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, #333);
  margin-bottom: 3px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 宣传语：卡片底部通栏，起隔离卡片作用（空值也显示） */
.kh-card-slogan {
  font-size: 12px;
  color: #e65100;
  background: #fff8f0;
  border-radius: 6px;
  padding: 4px 10px;
  margin: 4px 12px 10px;
  line-height: 1.4;
  min-height: 22px;
}
.kh-card-meta {
  font-size: 12px;
  color: var(--color-text-secondary, #666);
  margin-bottom: 2px;
  line-height: 1.45;
}
.kh-meta-label {
  display: inline-block;
  min-width: 3em;
  color: var(--color-text-tertiary, #999);
  font-size: 11px;
}
.kh-meta-sep {
  margin: 0 5px;
  color: #ccc;
}
/* 厂家名过长时省略号截断 */
.kh-meta-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 单效期行：有效期至（近效期标红）；库存不展示但用于步进器上限 */
.kh-exp-line {
  font-size: 12px;
  color: var(--color-text-secondary, #666);
  margin: 3px 0 5px;
}
.kh-exp-line.near-exp {
  color: #d32f2f;
  font-weight: 600;
}
.kh-batch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12px;
  color: var(--color-text-secondary, #666);
  padding: 6px 0;
  border-top: 1px solid #f0f0f0;
}
.kh-batch-row.near-exp {
  color: #d32f2f;
}
.kh-batch-row .kh-batch-date,
.kh-batch-row .kh-batch-stock {
  white-space: nowrap;
}
.kh-batch-stock {
  font-weight: 600;
  color: #2e7d32;
}
.kh-stock-row {
  font-size: 14px;
  font-weight: 600;
  color: #2e7d32;
  padding: 4px 0 2px;
}
.kh-batch-empty {
  font-size: 12px;
  color: var(--color-text-tertiary, #aaa);
  padding: 6px 0;
  border-top: 1px solid #f0f0f0;
}

/* 产品图片点击放大 */
.kh-img-zoomable {
  cursor: zoom-in;
}
.kh-img-zoom-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.kh-img-zoom-inner {
  text-align: center;
  max-width: 92vw;
  max-height: 92vh;
}
.kh-img-zoom-img {
  max-width: 92vw;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
}
.kh-img-zoom-name {
  margin-top: 12px;
  font-size: 15px;
  color: #fff;
  font-weight: 600;
}
.kh-img-zoom-tip {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* ===== 购买按钮 ===== */
.kh-buy-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #f4511e, #ff8a50);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.kh-buy-btn:active {
  opacity: 0.88;
}

/* ===== 品种价格行 + 数量步进器（手机号登录后显示） ===== */
/* 购买区：一行内价格（左）+ 步进器（右），虚线分隔 */
.kh-buy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed #f0e2d6;
}
.kh-price-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.kh-price-label {
  font-size: 11px;
  color: #999;
  flex-shrink: 0;
}
/* "会员"徽章：挂在药品名称旁（淡绿色，绿色通道暗示），价格行不再放标签 */
.kh-card-name-row {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 3px;
}
.kh-card-name-row .kh-card-name {
  margin-bottom: 0;
}
.kh-vip-tag {
  flex-shrink: 0;
  margin-top: 2px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  color: #1b5e20;
  border: 1px solid rgba(46, 125, 50, 0.55);
  border-radius: 3px;
  background: #e8f5e9;
  letter-spacing: 1px;
  text-indent: 0.5px;
}
.kh-price-value {
  font-size: 16px;
  font-weight: 700;
  color: #e65100;
  white-space: nowrap;
}
.kh-price-row.kh-unpriced {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #f0e2d6;
}
.kh-price-row.kh-unpriced .kh-price-value {
  font-size: 13px;
  font-weight: 500;
  color: #aaa;
}
/* 游客模式价格行：更小的"价格"标签 + 浅绿胶囊宣传文案（与"会员"徽章同色系） */
.kh-price-row.kh-guest-price {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #f0e2d6;
}
.kh-price-row.kh-guest-price .kh-price-label {
  font-size: 10px;
}
.kh-guest-pill {
  display: inline-block;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  color: #1b5e20;
  background: #e8f5e9;
  border: 1px solid rgba(46, 125, 50, 0.35);
  border-radius: 999px;
  white-space: nowrap;
}
/* 小计：独立成行右对齐，金额再大也不会被截断；
   固定行高 20px——空态和有"小计"文字时高度完全一致，点步进器时卡片高度不跳动、宣传条不下掉 */
.kh-subtotal-row {
  height: 20px;
  line-height: 20px;
  margin-top: 2px;
  text-align: right;
  overflow: hidden;
}
.kh-subtotal {
  font-size: 14px;
  font-weight: 700;
  color: #2e7d32;
  line-height: 20px;
}
/* 步进器：固定尺寸，所有品种完全一致；橙红配色与价格同系 */
.kh-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid #ef6c00;
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0;
}
.kh-stepper-btn {
  width: 29px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
  color: #ef6c00;
  background: #fff;
  border: none;
  cursor: pointer;
}
.kh-stepper-btn:first-child {
  border-right: 1px solid #ffe8d9;
}
.kh-stepper-btn:last-of-type {
  border-left: 1px solid #ffe8d9;
}
.kh-stepper-btn:active {
  background: #fff3e0;
}
.kh-stepper-btn:disabled {
  color: #ccc;
  cursor: not-allowed;
  background: #f7f7f7;
}
.kh-stepper-num {
  min-width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

/* ===== 订单明细（确认收货信息 / 收款码弹窗内） ===== */
.kh-order-box {
  margin: 8px 0 4px;
  padding: 10px 12px;
  background: #f5f9ff;
  border: 1px solid #dceaf9;
  border-radius: 10px;
  text-align: left;
}
.kh-order-title {
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
}
.kh-order-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 13px;
}
.kh-order-name {
  flex: 1;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kh-order-qty {
  color: #888;
  font-size: 12px;
  white-space: nowrap;
}
.kh-order-amt {
  color: #e65100;
  font-weight: 600;
  white-space: nowrap;
}
.kh-order-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #cfe3f7;
  font-size: 13px;
  color: #666;
}
.kh-order-total b {
  font-size: 17px;
  color: #e65100;
}
.kh-order-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: #999;
  text-align: center;
}

/* ===== 底部购物车条（固定在屏幕底部） ===== */
.kh-cart-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid #f5e6da;
  box-shadow: 0 -4px 14px rgba(244, 81, 30, 0.08);
}
.kh-cart-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.kh-cart-count {
  font-size: 12px;
  color: #666;
}
.kh-cart-amount {
  font-size: 13px;
  color: #333;
}
.kh-cart-amount b {
  font-size: 19px;
  color: #e65100;
}
/* 空购物车提示（两行）：主行红字+呼吸闪烁小圆点，副行暖灰小字 */
.kh-cart-hint {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  align-self: flex-start;
  /* 右移12px：让闪烁小圆点与品种卡片正方形图片的左边缘对齐（view 12px + 卡片内边距 12px = 24px） */
  margin-left: 12px;
  padding: 6px 0;
  max-width: 100%;
}
.kh-cart-hint-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #d32f2f;
  line-height: 1.4;
}
.kh-cart-hint-main::before {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e53935;
  animation: khHintBlink 1.2s ease-in-out infinite;
}
/* 副行：左移12px与主行文字对齐（小圆点6px + 间距6px），暖灰小字弱化层次 */
.kh-cart-hint-sub {
  margin-left: 12px;
  font-size: 11px;
  color: #a1887f;
  letter-spacing: 1px;
  line-height: 1.3;
}
@keyframes khHintBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
.kh-cart-hint.kh-cart-warn .kh-cart-hint-main { color: #b71c1c; }
/* 警示态临时隐藏副行（visibility 保高度不跳动） */
.kh-cart-hint.kh-cart-warn .kh-cart-hint-sub { visibility: hidden; }
.kh-cart-btn {
  flex-shrink: 0;
  padding: 11px 22px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #f4511e, #ff8a50);
  border: none;
  border-radius: 20px;
  cursor: pointer;
}
.kh-cart-btn:active {
  opacity: 0.85;
}
/* 游客模式：底部通栏按钮（留电话 / 查看收款码各占一半） */
.kh-cart-btn.kh-cart-btn-full {
  flex: 1;
  padding: 12px 10px;
  letter-spacing: 0;
}
/* 客户意向页：拨打按钮（点一下直接拨号） */
.kh-lead-call {
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #1b5e20;
  background: #e8f5e9;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
/* 游客留电话弹窗：拉开标题/说明/输入框间距，输入框加大一号，更透气 */
.kh-lead-modal {
  padding-top: 22px;
}
.kh-lead-modal .kh-pay-title {
  font-size: 18px;
  margin-bottom: 6px;
}
.kh-lead-modal .kh-pwd-desc {
  margin-bottom: 10px;
}
.kh-lead-modal .login-input {
  padding: 11px 16px;
  font-size: 16px;
  letter-spacing: 1px;
  border-radius: 10px;
  margin-bottom: 6px;
}
.kh-lead-modal .kh-pwd-submit {
  margin-top: 6px;
  padding: 11px 0;
  border-radius: 10px;
}
/* 客服微信列表：每行一张 QR 卡片（80x80 图 + 右侧姓名/电话/省份） */
.kh-cs-list {
  max-height: none;
  margin: 6px 0 4px;
  text-align: left;
}
.kh-cs-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  background: #f7f8fa;
  border-radius: 10px;
  margin-bottom: 7px;
}
.kh-cs-card:last-child { margin-bottom: 0; }
.kh-cs-qr {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #eee;
}
.kh-cs-info { flex: 1; min-width: 0; }
.kh-cs-name { font-size: 14px; font-weight: 600; color: #222; }
.kh-cs-meta { font-size: 12px; color: #888; margin-top: 2px; }
.kh-cs-tel { color: #1976d2; text-decoration: none; font-weight: 600; }
.kh-cs-wp { font-size: 12px; color: #d44a1c; margin-top: 2px; }
.kh-cs-loading, .kh-cs-empty {
  padding: 24px 0;
  text-align: center;
  color: #999;
  font-size: 13px;
}
.kh-cs-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: #aaa;
  font-size: 12px;
  margin: 10px 0 8px;
}
.kh-cs-divider::before,
.kh-cs-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid #eee;
}
.kh-cs-divider span { padding: 0 10px; }
/* 客户页面顶栏右侧「客服微信」入口按钮（不显眼但随时可点） */
.kh-cs-bar-btn {
  margin-left: auto;
  background: #fff5f0;
  color: #d44a1c;
  border: 1px solid #f4c2a8;
  border-radius: 16px;
  padding: 4px 12px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.kh-cs-bar-btn:active { background: #ffe6d6; }
/* ===== 在线咨询悬浮按钮（企业微信客服，微信绿配色） ===== */
.kh-chat-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #07c160, #06ad56);
  border: none;
  border-radius: 28px;
  box-shadow: 0 4px 14px rgba(7, 193, 96, 0.35);
  text-decoration: none;
  white-space: nowrap;
  transition: bottom 0.2s, transform 0.15s;
}
.kh-chat-fab:active {
  transform: scale(0.95);
}
/* 购物车条出现时给页面留出底部空间 */
body.kh-cart-on main {
  padding-bottom: 76px;
}

/* ===== 购买弹窗（收款码） ===== */
.kh-pay-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: 10000;
  align-items: center;
  justify-content: center;
}
.kh-pay-modal {
  background: #fff;
  border-radius: 14px;
  padding: 18px 16px 14px;
  width: 82vw;
  max-width: 340px;
  max-height: 88vh;
  overflow-y: auto;
  text-align: center;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
/* 弹窗顶部右上角 × 关闭按钮：始终可见，不随内容滚动出去 */
.kh-pay-x {
  position: sticky;
  top: 0;
  right: 0;
  display: block;
  margin: -10px -10px 4px auto;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  font-size: 20px;
  color: #999;
  background: #f3f3f3;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}
.kh-pay-x:active {
  background: #e0e0e0;
  color: #555;
}
.kh-pay-product {
  font-size: 13px;
  color: #888;
  margin-bottom: 4px;
}
.kh-pay-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}
.kh-pay-img {
  display: block;
  width: 100%;
  border-radius: 10px;
  background: #fff;
}
.kh-pay-img-err {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  border: 1px solid #eee;
  border-radius: 10px;
  color: #aaa;
  font-size: 14px;
}
.kh-pay-tip {
  margin-top: 10px;
  font-size: 13px;
  color: #e65100;
}
/* 收款码弹窗：订单确认提示行（收货信息与二维码之间） */
.kh-order-done {
  margin-top: 10px;
  padding: 6px 14px;
  font-size: 13px;
  color: #1b5e20;
  background: #e8f5e9;
  border-radius: 999px;
  text-align: center;
}
.kh-pay-close {
  margin-top: 12px;
  padding: 8px 32px;
  font-size: 14px;
  color: #666;
  background: #f5f5f5;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}


/* ==================== 客户专属密码 / 进货记录 ==================== */
/* 设置密码引导条（登录填了手机号但未设置时显示） */
.kh-pwd-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: #fff3e0;
  border: 1px solid #ffd8a8;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.kh-pwd-banner-text {
  font-size: 13px;
  color: #a04d00;
  line-height: 1.5;
}
.kh-pwd-banner-btn {
  flex-shrink: 0;
  background: #f4511e;
  color: #fff;
  border: none;
  border-radius: 16px;
  padding: 7px 16px;
  font-size: 13px;
  cursor: pointer;
}
.kh-pwd-modal .kh-pwd-desc {
  font-size: 13px;
  color: #888;
  line-height: 1.6;
  margin-bottom: 12px;
}
.kh-pwd-error {
  min-height: 18px;
  font-size: 12px;
  color: #d32f2f;
  margin: 8px 0 0;
}
.kh-pwd-submit {
  width: 100%;
  margin-top: 12px;
  background: linear-gradient(135deg, #f4511e, #ff8a50);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 0;
  font-size: 15px;
  cursor: pointer;
}
.kh-pwd-submit:disabled {
  opacity: 0.6;
}
.kh-pwd-modal .login-input {
  width: 100%;
  box-sizing: border-box;
}

/* 我的进货记录 */
.kh-orders-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 4px 0 8px;
}
.kh-orders-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
}
.kh-orders-sub {
  font-size: 12px;
  color: #999;
}
.kh-last-addr {
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.kh-last-addr-label {
  font-size: 12px;
  color: #e65100;
  margin-bottom: 4px;
}
.kh-last-addr-text {
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}
/* 收货信息多行显示（标签 + 内容） */
.kh-addr-row {
  display: flex;
  font-size: 13px;
  line-height: 1.6;
}
.kh-addr-k {
  flex-shrink: 0;
  color: #999;
  padding-right: 8px;
}
.kh-addr-v {
  color: #444;
  word-break: break-all;
}
.kh-order-biz {
  font-size: 12px;
  color: #666;
  margin: -2px 0 6px;
}
.kh-order-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.kh-order-date {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px dashed #eee;
}
.kh-order-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #555;
  padding: 3px 0;
}
.kh-order-num {
  color: #e65100;
  flex-shrink: 0;
  margin-left: 10px;
}

/* 管理端：客户账号卡片 */
.kh-user-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

/* ===== 客户下单记录卡片（管理端，发货参考凭据） ===== */
.kh-ob-card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.kh-ob-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.kh-ob-time {
  font-size: 13px;
  color: #888;
}
.kh-ob-total {
  font-size: 14px;
  font-weight: 700;
  color: #e65100;
}
.kh-ob-info {
  background: #fafafa;
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
}
.kh-ob-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.6;
}
.kh-ob-k {
  flex-shrink: 0;
  width: 42px;
  color: #999;
}
.kh-ob-v {
  color: #333;
  word-break: break-all;
}
.kh-ob-items {
  border-top: 1px dashed #f0e2d6;
  padding-top: 6px;
}
.kh-ob-items-title {
  font-size: 12px;
  color: #999;
  margin-bottom: 3px;
}
.kh-ob-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  line-height: 1.6;
}
.kh-ob-item-name {
  flex: 1;
  min-width: 0;
  color: #333;
  word-break: break-all;
}
.kh-ob-item-qty {
  flex-shrink: 0;
  color: #888;
  font-size: 12px;
}
.kh-ob-item-amt {
  flex-shrink: 0;
  font-weight: 600;
  color: #333;
}
.kh-user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.kh-user-phone {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.5px;
}
.kh-user-reset {
  background: #fff;
  border: 1px solid #e65100;
  color: #e65100;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.kh-user-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 12px;
  color: #999;
}

/* 管理端：登录日志行 */
.kh-login-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 6px;
  font-size: 13px;
}
.kh-login-time {
  color: #999;
  font-size: 12px;
  flex-shrink: 0;
}
.kh-login-phone {
  color: #333;
  font-weight: 500;
}
.kh-login-method {
  margin-left: auto;
  color: #666;
  font-size: 12px;
}
.kh-login-method.ok {
  color: #2e7d32;
}
.kh-login-method.warn {
  color: #d32f2f;
}

/* ==================== 我的进货记录入口/弹窗 + 购买地址确认 ==================== */
/* 进货记录入口按钮（解锁后显示，不占页面空间） */
.kh-orders-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  color: #333;
  border: 1px solid #e0e6ed;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  text-align: left;
}
.kh-orders-entry-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.kh-orders-entry-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.kh-orders-entry-text b {
  font-size: 15px;
  font-weight: 600;
  color: #8f4a12;
}
.kh-orders-entry-text i {
  font-style: normal;
  font-size: 12px;
  color: #999;
}
.kh-orders-entry-arrow {
  font-size: 22px;
  color: #f4511e;
  opacity: 0.7;
  flex-shrink: 0;
}

/* 进货记录弹窗内容区（可滚动） */
.kh-orders-modal .kh-orders-body {
  max-height: 55vh;
  overflow-y: auto;
  margin: 8px 0 12px;
  text-align: left;
}

/* 进货明细：名称+规格 一行，厂家小字 */
.kh-order-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.kh-order-goods-info {
  flex: 1;
  min-width: 0;
}
.kh-order-goods {
  font-size: 13px;
  color: #333;
  line-height: 1.5;
}
.kh-order-spec {
  color: #888;
  font-size: 12px;
  margin-left: 6px;
}
.kh-order-mfr {
  font-size: 11px;
  color: #aaa;
  margin-top: 1px;
}
.kh-order-num {
  color: #e65100;
  font-size: 13px;
  flex-shrink: 0;
}

/* 购买前地址确认弹窗 */
.kh-addr-modal .kh-addr-tip {
  font-size: 12px;
  color: #888;
  margin: 6px 0 10px;
}
/* 收货信息大文本框（开票单位/收件人/地址/联系电话 按行填写） */
.kh-addr-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 130px;
  padding: 10px 12px;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.7;
  font-family: inherit;
  color: #333;
  background: #fafbfc;
  resize: none;
  overflow: hidden;
  outline: none;
}
.kh-addr-textarea:focus {
  border-color: #f4511e;
  background: #fff;
}

/* 收款码弹窗中的收货信息 */
.kh-pay-addr {
  background: #f5f5f5;
  border-radius: 8px;
  padding: 8px 10px;
  margin: 8px 0;
  text-align: left;
}
.kh-pay-addr-label {
  font-size: 11px;
  color: #999;
  margin-bottom: 3px;
}
.kh-pay-addr-text {
  font-size: 13px;
  color: #444;
  line-height: 1.5;
  word-break: break-all;
}

/* ==================== 远程部署页（仅管理员） ==================== */
.deploy-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.7;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.deploy-box {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}
#deployFileInput {
  width: 100%;
  font-size: 13px;
  padding: 8px;
  border: 1.5px dashed var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-bg);
  box-sizing: border-box;
}
.deploy-file-list {
  margin-top: 10px;
}
.deploy-file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--color-bg);
  margin-bottom: 6px;
  font-size: 13px;
}
.deploy-file-item .f-name {
  color: var(--color-text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deploy-file-item .f-target {
  color: var(--color-text-muted);
  font-size: 12px;
  flex-shrink: 0;
}
.deploy-actions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}
.deploy-result {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  border-radius: 8px;
  padding: 10px 12px;
  word-break: break-all;
}
.deploy-result.ok {
  background: rgba(76, 175, 80, 0.08);
  color: #2e7d32;
}
.deploy-result.err {
  background: rgba(244, 67, 54, 0.08);
  color: #c62828;
}
.deploy-files-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
}
.deploy-files-row .f-path {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.deploy-files-row .f-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: right;
  line-height: 1.5;
}

/* ==================== 顶部管理下拉菜单（仅管理员） ==================== */
.admin-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  padding: 5px;
  min-width: 132px;
  z-index: 300;
}
.admin-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--color-text);
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.admin-menu-item:active,
.admin-menu-item:hover {
  background: var(--color-bg);
}