/* ==========================================================
   鲜达 SaaS 平台 · 手机版样式（H5）
   仅在小屏（≤820px）生效，桌面端沿用 app.css，互不干扰。
   设计目标：像 App 而不像缩小的网页
     · 侧栏 → 左侧抽屉（汉堡 / 遮罩 / 右滑关闭）
     · 顶栏 → 单行 App 栏（标题 + 仓库 + 更多）
     · 列表 → 卡片化（自动读取表头做标签）
     · 弹窗 → 底部上滑面板
     · 表单 → 16px 字号，避免 iOS 聚焦自动放大
   ========================================================== */

@media (max-width: 820px) {
  :root {
    --mob-topbar: 50px;
    --mob-tabbar: 56px;
    --mob-safe-t: env(safe-area-inset-top, 0px);
    --mob-safe-b: env(safe-area-inset-bottom, 0px);
  }

  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 14px; overscroll-behavior-y: none; }

  /* ---------- 布局骨架 ---------- */
  .app { display: block; min-height: 100dvh; }
  .main { margin-left: 0; }

  /* 侧栏：抽屉（菜单区独立滚动，账号/退出固定在底部） */
  .sidebar {
    display: flex;
    flex-direction: column;
    width: min(286px, 84vw);
    z-index: 120;
    overflow: hidden;
    transform: translateX(-102%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
    box-shadow: none;
    padding-bottom: calc(var(--mob-safe-b) + 8px);
    will-change: transform;
  }
  .sidebar.open { transform: none; box-shadow: 12px 0 32px rgba(0, 0, 0, .28); }
  .sidebar-logo { padding: calc(14px + var(--mob-safe-t)) 16px 12px; flex: none; }
  .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 8px 8px 4px; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item { min-height: 44px; padding: 11px 12px; font-size: 14.5px; border-radius: 10px; }
  .nav-group { padding: 14px 12px 5px; font-size: 11px; }
  .sidebar-plan { flex: none; margin: 8px 12px 0; }

  /* 抽屉底部：当前账号 + 退出（桌面隐藏） */
  .drawer-user { display: block; flex: none; margin: 10px 12px 0; padding: 12px; border-radius: 12px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
  .drawer-user .du-row { display: flex; align-items: center; gap: 10px; }
  .drawer-user .du-ava { width: 36px; height: 36px; flex: none; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-weight: 700; font-size: 15px;
    background: rgba(74, 222, 128, .18); color: #6ee79a; }
  .drawer-user .du-name { font-size: 14px; font-weight: 600; color: #fff; line-height: 1.35; }
  .drawer-user .du-role { font-size: 11.5px; color: rgba(255, 255, 255, .5); }
  .drawer-user .du-tenant { margin-top: 10px; }
  .drawer-user .du-tenant select { width: 100%; font-size: 13px; padding: 7px 9px;
    background: rgba(255, 255, 255, .09); color: #fff; border-color: rgba(255, 255, 255, .16); }
  .drawer-user .du-tenant select option { color: #1d2129; }
  .drawer-user .du-out { width: 100%; margin-top: 10px; min-height: 40px; border-radius: 9px;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14);
    color: #ffb4b4; font-size: 13.5px; }
  .drawer-user .du-out:active { background: rgba(255, 120, 120, .18); }

  .drawer-mask { position: fixed; inset: 0; z-index: 110; background: rgba(12, 20, 16, .48);
    opacity: 0; pointer-events: none; transition: opacity .25s; -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px); }
  .drawer-mask.open { opacity: 1; pointer-events: auto; }

  /* ---------- 顶栏 ---------- */
  .topbar {
    height: calc(var(--mob-topbar) + var(--mob-safe-t));
    padding: var(--mob-safe-t) 8px 0 6px;
    gap: 4px;
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
  }
  .topbar-title { font-size: 16px; font-weight: 600; flex: 1 1 auto; min-width: 0; }
  .topbar-right { margin-left: 0; gap: 6px; flex: none; }
  .topbar-right .tenant-pill,
  .topbar-right #tenant-switch,
  .topbar-right #btn-logout,
  .topbar-right .hide-mobile { display: none !important; }
  .topbar .plan-pill { padding: 3px 9px; font-size: 11.5px; }
  .topbar .wh-switch { width: auto; max-width: 46vw; font-size: 12px; padding: 5px 6px; }
  .topbar .wh-pill { font-size: 11.5px; padding: 3px 8px; }
  .topbar .wh-pill svg { width: 13px; height: 13px; }

  .btn-drawer, .btn-more {
    width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center;
    border: 0; background: none; color: var(--text); border-radius: 10px; cursor: pointer;
  }
  .btn-drawer:active, .btn-more:active { background: #f2f3f5; }
  .btn-drawer svg { width: 21px; height: 21px; }

  /* ---------- 内容区 ---------- */
  .content { padding: 12px 12px calc(var(--mob-tabbar) + var(--mob-safe-b) + 18px); max-width: none; }
  .card { padding: 13px 13px; border-radius: 14px; margin-bottom: 11px; box-shadow: 0 1px 2px rgba(29, 33, 41, .05); }
  .card-title { margin-bottom: 10px; }
  h2 { font-size: 17px; }
  h3 { font-size: 15px; }

  /* ---------- 底部 tabbar ---------- */
  .tabbar { display: flex; height: calc(var(--mob-tabbar) + var(--mob-safe-b));
    padding-bottom: var(--mob-safe-b); box-shadow: 0 -1px 0 var(--line), 0 -8px 20px rgba(16, 24, 20, .05); }
  .tabbar-item { gap: 3px; font-size: 10.5px; padding-top: 7px; justify-content: flex-start;
    -webkit-tap-highlight-color: transparent; transition: color .15s; }
  .tabbar-item svg { width: 22px; height: 22px; }
  .tabbar-item.active { color: var(--green-d); }
  .tabbar-item.active svg { transform: translateY(-1px); }
  .tabbar-item:active { opacity: .6; }

  /* ---------- 按钮 / 表单 ---------- */
  .btn { min-height: 38px; padding: 8px 13px; font-size: 13.5px; border-radius: 9px; }
  .btn-sm { min-height: 29px; padding: 4px 9px; font-size: 12px; }
  .btn-block { min-height: 46px; font-size: 16px; }
  .btn:active { transform: scale(.98); }

  input, select, textarea { font-size: 16px; padding: 10px 11px; border-radius: 10px; }
  select { padding-right: 26px; line-height: 1.35; }
  /* 勾选框统一放大到 18px（横向滑动表格里也要好点） */
  #content input[type="checkbox"], #modal-root input[type="checkbox"],
  .table input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; accent-color: var(--green); }
  .form-row > label { font-size: 13px; margin-bottom: 5px; }
  .form-grid { grid-template-columns: 1fr; }
  /* 窄屏下被写死宽度的筛选控件改为弹性宽度：两三个并排，放不下自动换行 */
  .row > input[style*="width"], .row > select[style*="width"],
  .row-between > input[style*="width"], .row-between > select[style*="width"] {
    width: auto !important; flex: 1 1 140px; min-width: 0;
  }
  .row { gap: 8px; }
  .row > .btn { flex: 1 1 auto; }

  /* 分段标签横向滑动 */
  .tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-bottom: 11px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 8px 12px; font-size: 13.5px; white-space: nowrap; }
  .tab.active { font-weight: 600; }

  /* 分类胶囊：自动换行铺满，不横滑、不被压成竖排 */
  .cat-strip {
    display: flex; flex-wrap: wrap; overflow: visible;
    gap: 7px 6px; padding-bottom: 0; margin-bottom: 11px;
  }
  .cat-strip .chip {
    flex: 0 0 auto; width: auto; white-space: nowrap;
    padding: 6px 13px; font-size: 13px; line-height: 1.25; min-height: 32px;
    border-radius: 16px;
  }
  .cat-strip .chip.active { font-weight: 600; }

  /* 商城搜索：放大镜内嵌 + 绿色主按钮 */
  .mall-search { gap: 8px; margin-bottom: 10px; }
  .mall-search input {
    flex: 1; min-width: 0; min-height: 44px; padding-left: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238a919e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: 13px center;
  }
  .mall-search .btn {
    min-height: 44px; padding: 0 18px; font-size: 14px; border-radius: 10px;
    background: var(--green); border-color: var(--green); color: #fff; flex: 0 0 auto;
  }
  .mall-search .btn:active { background: var(--green-d); border-color: var(--green-d); }

  /* KPI 卡片：两列 */
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .stat { padding: 12px 13px; border-radius: 13px; }
  .stat .num { font-size: 20px; }
  .stat .label { font-size: 11.5px; }

  .plan-banner { margin: 8px 12px 0; font-size: 12.5px; }

  /* 多列栅格在手机上一律单列（看板左右分栏、详情页左右分栏等） */
  .content > .grid[style*="grid-template-columns"],
  .content > .dash-split { grid-template-columns: 1fr !important; }

  /* 近 7 日趋势：柱状 → 横向条形，金额不再挤成一片 */
  .trend { flex-direction: column; align-items: stretch; height: auto; gap: 7px; padding: 2px 0; }
  .tr-item { flex-direction: row; align-items: center; justify-content: flex-start; height: auto; gap: 8px; }
  .tr-day { order: 1; flex: 0 0 38px; font-size: 11.5px; }
  .tr-bar { order: 2; flex: 0 0 auto; width: calc(var(--v, 4) * 0.62%); max-width: 62%;
    height: 9px; min-width: 3px; border-radius: 5px; }
  .tr-amt { order: 3; flex: 1 1 auto; text-align: right; font-size: 11.5px; }

  /* ---------- 弹窗 → 底部上滑面板 ---------- */
  .modal-mask { align-items: flex-end; padding: 0; }
  .modal {
    width: 100% !important; max-width: 100%;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    padding: 16px 16px calc(10px + var(--mob-safe-b));
    animation: mob-sheet-up .26s cubic-bezier(.22, .61, .36, 1);
  }
  .modal.wide { width: 100% !important; }
  .modal::before { content: ''; display: block; width: 38px; height: 4px; border-radius: 999px;
    background: #e5e6eb; margin: -8px auto 10px; }
  .modal-head { position: sticky; top: -16px; z-index: 2; background: #fff; padding: 2px 0 8px; margin-bottom: 8px;
    border-bottom: 1px solid var(--line); }
  .modal-head h3 { font-size: 16px; }
  .modal-close { font-size: 26px; line-height: 1; padding: 0 4px; color: var(--text-3); }
  .modal-foot { position: sticky; bottom: calc(-10px - var(--mob-safe-b)); margin: 12px -16px 0;
    padding: 10px 16px calc(10px + var(--mob-safe-b)); background: #fff; border-top: 1px solid var(--line);
    gap: 8px; z-index: 3; }
  .modal-foot .btn { flex: 1 1 0; min-height: 44px; font-size: 15px; }
  .modal-body { padding-bottom: 2px; }

  /* ---------- 表格：自动卡片化 ---------- */
  .table-wrap { -webkit-overflow-scrolling: touch; overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

  table.mt-card {
    min-width: 0 !important; width: 100%; border: 0; border-collapse: separate; table-layout: auto !important;
  }
  table.mt-card thead { display: none; }
  table.mt-card, table.mt-card tbody, table.mt-card tr, table.mt-card td { display: block; }
  table.mt-card tbody { display: block; }
  table.mt-card tr {
    position: relative;
    background: #fff; border: 1px solid #eef0f3; border-radius: 12px;
    padding: 11px 12px; margin-bottom: 9px;
    box-shadow: 0 1px 2px rgba(29, 33, 41, .04);
  }
  table.mt-card tr:active { background: #fafbfc; }
  table.mt-card td {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2px 8px;
    padding: 4px 0; border: 0; font-size: 13.5px; line-height: 1.5;
    text-align: left !important; white-space: normal !important; word-break: break-word;
    /* 清掉列宽固定 / 省略号截断 / 固定行高，否则卡片里会被压成一条 */
    width: auto !important; min-width: 0 !important; max-width: none !important;
    height: auto !important; overflow: visible !important; text-overflow: clip !important;
  }
  table.mt-card td::before {
    content: attr(data-label);
    flex: 0 0 72px; min-width: 0;
    color: var(--text-3); font-size: 12.5px; line-height: 1.62;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  table.mt-card td[data-label=""]::before { display: none; }
  /* 单元格里除首个元素外的附加内容另起一行，并与值对齐 */
  table.mt-card td > *:nth-child(n+2) { flex: 0 0 auto; }
  table.mt-card td > div:nth-child(n+2),
  table.mt-card td > p:nth-child(n+2) { flex: 1 1 100%; padding-left: 80px; }
  table.mt-card td > .q-grid { flex: 1 1 auto; padding-left: 0; }

  /* 无表头的列（一般是勾选框）：移到卡片右上角 */
  table.mt-card td.mt-lead { position: absolute; top: 9px; right: 9px; padding: 0; }
  table.mt-card td.mt-lead input { width: 20px; height: 20px; accent-color: var(--green); }
  /* 第一列作为卡片标题 */
  table.mt-card td.mt-title { font-size: 15.5px; font-weight: 600; color: var(--text); padding-bottom: 6px; }
  table.mt-card td.mt-title::before { color: var(--text-3); font-weight: 400; font-size: 12.5px; }
  table.mt-card td.mt-title a { font-weight: 600; }
  /* 空列表 / 合计行 */
  table.mt-card td[colspan] { display: block; text-align: center !important; padding: 20px 0; color: var(--text-3); }
  table.mt-card td[colspan]::before { display: none; }
  table.mt-card td[colspan] > * { padding-left: 0; }
  /* 操作列：按钮靠左排开 */
  table.mt-card td.mt-ops { gap: 8px; padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--line); flex-wrap: wrap; }
  table.mt-card td.mt-ops > * { flex: 0 0 auto !important; padding-left: 0 !important; }
  table.mt-card td.mt-ops .btn,
  table.mt-card td.mt-ops button { min-height: 32px; }
  table.mt-card td.mt-ops a, table.mt-card td.mt-ops .print-link { font-size: 13.5px; padding: 5px 0; }

  /* 明细型表格（data-mobile="dense"）：卡内两列紧凑排，一屏能看更多行 */
  table.mt-card.mt-dense tr { display: flex; flex-wrap: wrap; align-items: flex-start; column-gap: 10px;
    padding: 9px 11px; margin-bottom: 7px; }
  table.mt-card.mt-dense td { flex: 1 1 calc(50% - 5px); padding: 3px 0; }
  table.mt-card.mt-dense td.mt-title,
  table.mt-card.mt-dense td.mt-ops,
  table.mt-card.mt-dense td.mt-lead,
  table.mt-card.mt-dense td[colspan] { flex: 1 1 100%; }
  table.mt-card.mt-dense td::before { flex: 0 0 auto; font-size: 12px; white-space: nowrap; margin-right: 8px; }
  table.mt-card.mt-dense td.mt-title { padding: 0 0 4px; }

  /* 商品中心专属卡（layoutProds 分四行）：标题 / 属性 / 价格 / 操作 */
  table.mt-card.mt-prods tr { display: flex; flex-wrap: wrap; align-items: center; padding: 12px 13px; }
  table.mt-card.mt-prods td { display: block; padding: 1px 0; border: 0; }
  table.mt-card.mt-prods td::before { display: none !important; }
  table.mt-card.mt-prods td.mp-br { flex: 1 1 100.5%; height: 0; padding: 0; margin: 0; }
  table.mt-card.mt-prods td.mt-lead { top: 13px; right: 13px; }
  /* 标题行：商品名（含供应商/备注）+ 状态胶囊右贴 */
  table.mt-card.mt-prods td.mt-title { flex: 1 1 auto; min-width: 0; font-size: 15.5px; padding: 0 26px 0 0; }
  table.mt-card.mt-prods td.mt-title > div:nth-child(n+2) { padding-left: 0; }
  table.mt-card.mt-prods td.mt-title .p-remark { font-size: 12px; color: var(--text-3); }
  table.mt-card.mt-prods td[data-label="状态"] { flex: 0 0 auto; margin-right: 26px; }
  table.mt-card.mt-prods td[data-label="状态"] .tag { font-size: 11.5px; padding: 2.5px 9px; }
  /* 属性行：编码 · 规格 · 分类 · 单位 小灰字一行 */
  table.mt-card.mt-prods td[data-label="编码"],
  table.mt-card.mt-prods td[data-label="规格"],
  table.mt-card.mt-prods td[data-label="分类"],
  table.mt-card.mt-prods td[data-label="单位"] {
    flex: 0 1 auto; min-width: 0; font-size: 12px; color: var(--text-3); white-space: nowrap;
  }
  table.mt-card.mt-prods td[data-label="编码"] .p-code { font-size: 12px; }
  table.mt-card.mt-prods td[data-label="编码"]::after,
  table.mt-card.mt-prods td[data-label="规格"]::after,
  table.mt-card.mt-prods td[data-label="分类"]::after {
    content: '·'; margin: 0 6px; color: var(--text-3); opacity: .55;
  }
  /* 价格行：三列均分，售价红大字 */
  table.mt-card.mt-prods td[data-label="售价"],
  table.mt-card.mt-prods td[data-label="成本"],
  table.mt-card.mt-prods td[data-label="库存"] { flex: 1 1 33%; padding: 3px 0 0; font-size: 13px; }
  table.mt-card.mt-prods td[data-label="售价"] { color: #c0392b; font-size: 16.5px; font-weight: 600; }
  table.mt-card.mt-prods td[data-label="成本"] { color: var(--text-2); }
  table.mt-card.mt-prods td[data-label="成本"]::before,
  table.mt-card.mt-prods td[data-label="库存"]::before {
    content: attr(data-label) ' '; display: inline !important;
    font-size: 11.5px; font-weight: 400; color: var(--text-3);
  }
  table.mt-card.mt-prods td[data-label="库存"] { text-align: right; }
  table.mt-card.mt-prods td.col-stock.red-text { color: #c0392b !important; }
  /* 操作行：沿用 mt-ops 虚线分隔 */
  table.mt-card.mt-prods td.mt-ops { flex: 1 1 100%; display: flex; gap: 8px; padding-top: 9px; margin-top: 7px; }
  table.mt-card.mt-prods td.mt-ops .btn { min-height: 31px; padding: 4px 13px; font-size: 12.5px; }
  table.mt-card.mt-prods td.mt-ops .btn:last-child { margin-left: auto; }

  /* 含输入/选择控件的表格（录入型）不做卡片化，保持横向滑动 */
  .table-wrap.mt-scroll table { min-width: 560px; }
  .table-wrap.mt-scroll { margin: 0 -13px; padding: 0 13px; }
  .table-wrap.mt-scroll[data-overflow="1"]::after {
    content: '← 左右滑动查看更多 →'; position: sticky; left: 0; display: block;
    width: 100%; text-align: center; font-size: 11px; color: var(--text-3); padding: 7px 0 0;
    background: linear-gradient(180deg, rgba(245, 246, 248, 0), var(--bg) 40%);
  }

  /* 商品卡：两列，加购提示做成胶囊更好点 */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .product-card { padding: 11px 12px; border-radius: 12px; }
  .product-card .name { font-size: 14.5px; line-height: 1.35; }
  .product-card .spec { margin: 3px 0 7px; }
  .product-card .row-between > span:last-child:not(.tag) {
    background: var(--green-bg); color: var(--green-d); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; }

  /* 租户表：列多，卡片化后按块展示 */
  table.mt-card.tenant-table td.t-name { max-width: none; }
  table.mt-card .t-title { white-space: normal; }
  table.mt-card .t-ops { text-align: left !important; padding-right: 0 !important; }
  table.mt-card .op-group { display: flex; flex-wrap: wrap; gap: 6px; }
  table.mt-card .op-group .btn-sm { min-height: 32px; padding: 5px 12px; }

  /* 商品/客户等图片格 */
  .table img { max-width: 100%; }

  /* ---------- 其他细节 ---------- */
  #toast-root { top: calc(var(--mob-topbar) + var(--mob-safe-t) + 8px); left: 12px; right: 12px; transform: none; }
  .toast { max-width: none; font-size: 13.5px; text-align: center; padding: 10px 14px; border-radius: 10px; }
  .cart-bar { left: 0; right: 0; padding: 9px 13px calc(9px + var(--mob-safe-b));
    bottom: calc(var(--mob-tabbar) + var(--mob-safe-b)); }
  .print-menu { grid-template-columns: 1fr; }
  .upgrade-block { padding: 26px 16px; }
}

/* 超窄屏（iPhone SE 等）再收紧一档 */
@media (max-width: 380px) {
  .content { padding: 10px 10px calc(var(--mob-tabbar) + var(--mob-safe-b) + 16px); }
  .card { padding: 12px; }
  table.mt-card td::before { flex-basis: 64px; font-size: 12px; }
  table.mt-card td > *:nth-child(n+2) { padding-left: 72px; }
  .tabbar-item { font-size: 10px; }
  .stat .num { font-size: 18px; }
  /* 分类胶囊再收紧，8 个分类在 320px 下也能两行放下 */
  .cat-strip { gap: 6px 5px; }
  .cat-strip .chip { padding: 5px 11px; font-size: 12.5px; min-height: 30px; border-radius: 15px; }
}

/* 横屏手机：抽屉窄一点，表格维持卡片 */
@media (max-width: 820px) and (orientation: landscape) and (max-height: 480px) {
  .sidebar { width: 240px; }
  .modal { max-height: 96dvh; }
}

/* 桌面端隐藏仅手机使用的元素 */
@media (min-width: 821px) {
  .drawer-user, .drawer-mask, .btn-drawer { display: none !important; }
}

/* ---------- 客户账号顶部信息条（手机）：两列网格压成两三行，地址省略 ---------- */
@media (max-width: 820px) {
  .cust-head { padding: 0 13px; }
  .ch-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 5px 10px; padding: 8px 0; font-size: 12px; }
  .ch-item { min-width: 0; }
  .ch-item i { white-space: nowrap; }
  .cust-head .tag { white-space: nowrap; }
  .ch-item b { max-width: 30vw; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ch-item .ch-no { max-width: 20vw; overflow: hidden; text-overflow: ellipsis; }
  .ch-addr { display: none; }
  /* 手机端不显示手机号：账号编号（登录手机号）一并隐藏 */
  .cust-head .ch-no { display: none; }
  .ch-tip { grid-column: 1 / -1; margin-left: 0; font-size: 11.5px; }

  /* 购物车数量输入框：手机端加大触控，16px 防 iOS 聚焦缩放 */
  .qty input.qty-num { width: 52px; min-height: 36px; font-size: 16px; }

  /* 品类筛选条：一行横向滑动，不再堆成两行 */
  .cat-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .cat-strip::-webkit-scrollbar { display: none; }
  .cat-strip .chip { flex: 0 0 auto; }

  /* 步进器触控加大到 44px */
  .qs-btn, .qs-num, .qs-add { height: 44px !important; }
  .qs-btn { width: 46px !important; }
  .qs-num { min-width: 56px !important; font-size: 16px !important; }

  /* 商城底部占位给「tabbar + 购物车条」两层留够空间 */
  .mall-tail { height: 128px !important; }

  /* 购物车条：贴底 + 安全区，按钮更大更好按 */
  .cart-bar { left: 0; padding: 9px 13px calc(9px + var(--mob-safe-b)); gap: 10px; }
  .cb-go { flex: 0 0 auto; min-width: 118px; height: 44px; font-size: 15.5px; }
  .cb-total { font-size: 20px; }

  /* ---------- 订单管理（手机）：筛选面板 + 订单卡 ---------- */
  /* 外层 card 不再套白底：筛选面板与订单卡各自独立成块，列表不再嵌进第二层白卡 */
  .card.ord-card { background: transparent; box-shadow: none; padding: 0; }
  .ord-count { text-align: center; color: var(--text-3); }

  /* 顶部状态页签：胶囊芯片式，选中实底绿 */
  .tabs { gap: 7px; border-bottom: 0; margin-bottom: 11px; padding-bottom: 2px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 6px 14px; border: 1px solid #e9ebef; border-radius: 999px; background: #fff;
    color: var(--text-2); font-size: 12.5px; line-height: 1.5; }
  .tab.active { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 180, 42, .26); }

  /* 筛选面板：关键字整行 → 客户 + 查询 → 配送日期一行 → 操作芯片横滑一行 */
  .ord-toolbar {
    display: grid !important; grid-template-columns: 1fr 76px; gap: 9px; align-items: center;
    padding: 12px; margin-bottom: 12px !important;
    background: #fff; border-radius: 14px; box-shadow: 0 1px 3px rgba(29, 33, 41, .06);
  }
  .ord-toolbar > input, .ord-toolbar > select, .ord-toolbar > .btn {
    width: 100% !important; min-height: 40px; margin: 0; border-radius: 10px; font-size: 13.5px; }
  .ord-toolbar > #ord-keyword { grid-row: 1; grid-column: 1 / -1; }
  .ord-toolbar > #ord-customer { grid-row: 2; grid-column: 1; }
  .ord-toolbar > #ord-search { grid-row: 2; grid-column: 2; min-height: 42px; font-weight: 600;
    background: var(--green); border-color: var(--green); color: #fff; }
  .ord-toolbar:not(:has(#ord-customer)) > #ord-search { grid-column: 1 / -1; }
  .ord-toolbar > .ord-date-range { grid-row: 3; grid-column: 1 / -1; display: flex; align-items: center;
    gap: 6px; min-width: 0; }
  .ord-date-range > input { flex: 1 1 0; min-width: 0; width: auto !important;
    min-height: 38px; border-radius: 10px; font-size: 12.5px; padding: 6px 8px; }
  .ord-date-range > .muted { flex: none; font-size: 12px; }
  .ord-toolbar .wh-pill { grid-row: 4; grid-column: 2; justify-self: end; }
  .ord-toolbar > a { grid-row: 4; grid-column: 2; justify-self: end; align-self: center;
    font-size: 11.5px; color: var(--text-3); white-space: nowrap; }

  /* 操作按钮：一行横滑的轻量芯片，把首屏让给订单列表 */
  .ord-actions {
    display: flex !important; grid-row: 4; grid-column: 1; gap: 7px; margin: 1px 0 0;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent 100%);
  }
  .ord-actions::-webkit-scrollbar { display: none; }
  .ord-actions .btn { flex: 0 0 auto; width: auto !important; min-height: 33px; padding: 0 13px;
    border-radius: 9px; background: #f4f6f8; border-color: transparent; color: #4e5969;
    font-size: 12.5px; font-weight: 500; }
  .ord-actions .btn.btn-primary { background: var(--green-bg); border-color: #c9efd7; color: var(--green-d); font-weight: 600; }
  .ord-actions .btn.btn-danger { background: #fff1f0; color: #d4380d; }

  /* 订单卡：单号 / 客户+金额 / 配送+件数+状态 / 操作，四段式严格对齐 */
  table.mt-card.mt-orders tr {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    column-gap: 8px; row-gap: 7px;
    padding: 12px 13px; margin-bottom: 10px; border-radius: 14px;
    border-color: #eef1f4; box-shadow: 0 1px 2px rgba(29, 33, 41, .04);
  }
  table.mt-card.mt-orders td { display: block; padding: 0; border: 0; min-width: 0; }
  table.mt-card.mt-orders td::before { display: none !important; }
  table.mt-card.mt-orders td.mt-title { padding: 0; font-size: 12px; font-weight: 500; }
  table.mt-card.mt-orders td.mt-lead { top: 11px; right: 11px; }
  /* 空列表行 */
  table.mt-card.mt-orders td[colspan] { grid-column: 1 / -1; display: block;
    padding: 18px 0 !important; text-align: center !important; color: var(--text-3); }
  table.mt-card.mt-orders td[colspan]::before { display: none !important; }

  /* 行1 订单号（右上角留给勾选框） */
  table.mt-card.mt-orders td.oc-no { grid-row: 1; grid-column: 1 / 3; padding-right: 26px; }
  table.mt-card.mt-orders td.oc-no a { font-size: 12px; font-weight: 500;
    color: #9aa4b0; letter-spacing: .3px; }
  /* 行2 客户名（左）+ 金额（右） */
  table.mt-card.mt-orders td.oc-cust { grid-row: 2; grid-column: 1 / 3;
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
    font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--text); }
  table.mt-card.mt-orders td.oc-cust > * { flex: 0 0 auto !important; padding-left: 0 !important; }
  table.mt-card.mt-orders td.oc-cust > .oc-cname { flex: 0 1 auto !important; min-width: 0;
    font: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  table.mt-card.mt-orders td.oc-cust > .oc-sub { max-width: 100%; font-size: 11px;
    background: #f2fbf6; border: 1px solid #d9f2e3; }
  table.mt-card.mt-orders td.oc-cust > .oc-sub i { color: var(--green-d); background: #fff; }
  /* 件数已挪到「配送」那一行，客户行不再被「· 4 件」顶出第二行 */
  table.mt-card.mt-orders td.oc-cust > .small { display: none; }
  table.mt-card.mt-orders td.oc-amt { grid-row: 2; grid-column: 3; justify-self: end;
    text-align: right; font-size: 18px; font-weight: 800; color: #e8380d;
    letter-spacing: -.3px; line-height: 1.3; }

  /* 行3 配送日期胶囊 + 件数（左）/ 状态（右） */
  table.mt-card.mt-orders td.oc-date { grid-row: 3; grid-column: 1; justify-self: start;
    font-size: 12px; color: var(--text-2); background: #f4f6f8; border-radius: 7px;
    padding: 3px 9px !important; white-space: nowrap; }
  table.mt-card.mt-orders td.oc-date::before { display: inline !important; content: "配送";
    margin-right: 5px; font-size: 11px; color: #a0a8b3; }
  table.mt-card.mt-orders td.oc-cnt { grid-row: 3; grid-column: 2; justify-self: start;
    font-size: 12px; color: var(--text-3); white-space: nowrap; }
  table.mt-card.mt-orders td.oc-cnt::before { display: inline !important; content: "·";
    margin-right: 4px; color: #c6ccd4; }
  table.mt-card.mt-orders td.oc-cnt::after { content: " 件"; }
  table.mt-card.mt-orders td.oc-st { grid-row: 3; grid-column: 3; justify-self: end; }
  table.mt-card.mt-orders td.oc-st .tag { font-weight: 600; font-size: 11.5px; padding: 3px 10px; }

  /* 行4 操作：细分隔线 + 轻量芯片，主次分明 */
  table.mt-card.mt-orders td.oc-act { grid-row: 4; grid-column: 1 / -1;
    display: flex; gap: 8px; margin-top: 4px; padding-top: 10px !important;
    border-top: 1px solid #f2f4f7; }
  table.mt-card.mt-orders td.oc-act > * { flex: 0 0 auto !important; padding-left: 0 !important; }
  table.mt-card.mt-orders td.oc-act a,
  table.mt-card.mt-orders td.oc-act .print-link { min-height: 32px; padding: 0 14px !important;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px; background: var(--green-bg); color: var(--green-d);
    font-size: 12.5px; font-weight: 600; }
  table.mt-card.mt-orders td.oc-act .edit-link { background: #fff7e8; color: #d25f00; }
  table.mt-card.mt-orders td.oc-act .print-link { background: #f4f6f8; color: var(--text-2); }
  table.mt-card.mt-orders td.oc-act .btn { min-height: 32px; font-size: 12.5px; border-radius: 9px; }
  table.mt-card.mt-orders td.oc-act .btn.btn-primary { background: var(--green); color: #fff; border: 0; }
  /* 发货仓 / 创建时间手机端收起（详情页可看） */
  table.mt-card.mt-orders td.oc-wh,
  table.mt-card.mt-orders td.oc-time { display: none; }

  /* ---------- 分拣称重（手机）：商品表不再横向滚动，卡片化两列排 ---------- */
  table.mt-card.mt-dense.pick-row tr { padding: 10px 11px; }
  table.mt-card.mt-dense.pick-row td { font-size: 13.5px; align-items: center; }
  table.mt-card.mt-dense.pick-row td::before { min-width: 46px; color: var(--text-3); }
  table.mt-card.mt-dense.pick-row td .muted.small { flex: 0 0 auto; }
  table.mt-card.mt-dense.pick-row input { width: 74px !important; min-height: 36px; font-size: 15px; }
  /* 商品名下的规格小字：不缩进，紧贴名称下方 */
  table.mt-card.mt-dense.pick-row td > div:nth-child(n+2) { flex: 0 0 auto; padding-left: 0; }
  /* 组头：标题可换行，合并按钮不压缩 */
  .pk-group { padding-left: 8px; margin-bottom: 10px; }
  .pk-group-hd { gap: 5px 8px; }
  .pk-group-hd .pk-gt { flex: 0 1 auto; min-width: 0; }
  .pk-group-hd .btn { margin-left: 0; flex: 0 0 auto; }
  .pk-group .card { border: 1px solid var(--line) !important; }

  /* 代客下单客户选择（手机）：占满一行，面板与按钮对齐、不出屏 */
  .cpick { min-width: 0; width: 100%; max-width: none; }
  .cpick-panel { left: 0; width: 100%; min-width: 0; max-width: none; }
  .cpick-item { white-space: normal; }
  .cpick-item .cp-tag { flex: none; padding-left: 8px; }
}

/* ---------- 登录页（手机）：收起左侧介绍，单列居中 ---------- */
@media (max-width: 820px) {
  body.login-body { display: block; min-height: 100dvh; padding: 0;
    background: linear-gradient(170deg, #e9f9ef 0%, #f5f6f8 46%, #f5f6f8 100%); }
  .login-split { display: block; min-height: 0; }
  .login-hero { display: none; }
  .login-panel {
    display: flex; flex-direction: column; justify-content: center; align-items: stretch;
    min-height: 100dvh; background: transparent;
    padding: calc(36px + var(--mob-safe-t)) 18px calc(24px + var(--mob-safe-b));
  }
  .login-panel-inner { width: 100%; max-width: 420px; margin: 0 auto; }
  .login-brand { display: flex; justify-content: center; margin-bottom: 18px; }
  .login-brand .login-logo { margin-bottom: 0; gap: 10px; }
  .login-logo h1 { font-size: 20px; }
  .login-logo svg { width: 34px; height: 34px; }
  .login-card { width: 100%; padding: 22px 18px 20px; border-radius: 18px;
    box-shadow: 0 8px 32px rgba(16, 40, 26, .1); }
  .login-title { font-size: 19px; }
  .login-sub { font-size: 12px; margin-bottom: 18px; }
  .login-card input { min-height: 48px; font-size: 16px; }
  .login-card .btn-block { min-height: 48px; margin-top: 6px; }
  .login-error { font-size: 12.5px; }
  .login-foot { margin-top: 16px; font-size: 11px; }
}

/* ---------- 动画 ---------- */
@keyframes mob-sheet-up { from { transform: translateY(14%); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sidebar, .modal, .drawer-mask { transition: none !important; animation: none !important; }
}

/* ================= 移动端统一视觉升级（全页面） ================= */
@media (max-width: 820px) {
  /* 顶栏：毛玻璃 + 细阴影，滚动时内容不再"穿透" */
  .topbar { background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid #eef0f3; box-shadow: 0 1px 8px rgba(16, 40, 26, .05); }
  /* 底部 tabbar：上沿阴影，与页面分层 */
  .tabbar { background: rgba(255, 255, 255, .97); border-top: 1px solid #eef0f3;
    box-shadow: 0 -6px 20px rgba(16, 40, 26, .07);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .tabbar-item { font-weight: 500; }
  .tabbar-item.active { font-weight: 600; }
  /* 卡片统一圆角与投影 */
  .card { border-radius: 16px; border-color: #eef0f3; box-shadow: 0 2px 10px rgba(16, 40, 26, .05); }
  /* 表单控件统一高度 / 圆角 / 字号（表格内联控件由各自 !important 规则优先） */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea {
    min-height: 42px; border-radius: 11px; font-size: 14px; background: #fff; }
  textarea { min-height: 84px; padding: 10px 12px; }
  /* 按钮统一 */
  .btn { border-radius: 11px; min-height: 40px; }
  .btn-sm { min-height: 32px; border-radius: 9px; }
  .btn-primary { box-shadow: 0 3px 10px rgba(0, 180, 42, .22); }
  /* 通用卡片化列表：更柔和的卡片与更清楚的标题 */
  table.mt-card tr { border-radius: 14px; box-shadow: 0 2px 8px rgba(16, 40, 26, .045); }
  table.mt-card td.mt-title { font-size: 15px; font-weight: 700; }
  table.mt-card td.num { font-weight: 600; }
  /* 空状态 */
  .empty { padding: 44px 12px; color: var(--text-3); font-size: 13px; }
  /* 弹窗：圆角加大、底部按钮更好点 */
  .modal { border-radius: 18px; }
  .modal-foot .btn { min-height: 44px; }
  /* 我的页手机微调 */
  .me-hero { padding: 16px; border-radius: 16px; }
  .me-ava { width: 50px; height: 50px; font-size: 20px; }
  .me-name { font-size: 17.5px; }
  .me-group { border-radius: 16px; padding: 12px 10px 6px; }
  .me-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .me-cell { padding: 11px 2px 13px; }
  .me-ic { width: 40px; height: 40px; border-radius: 12px; }
  .me-ic svg { width: 20px; height: 20px; }
  .me-lb { font-size: 11.5px; }
  .me-links { border-radius: 16px; }
}

/* ---------- 分拣对比（手机端）：日期栏竖排 + KPI 两列紧凑 + 表格不吸顶 ---------- */
@media (max-width: 820px) {
  .pc-hero { padding: 14px 13px 13px; }
  .pc-hero-top { flex-direction: column; align-items: stretch; gap: 9px; margin-bottom: 11px; }
  .pc-hero-title h3 { font-size: 15.5px; margin: 0 0 4px; }
  /* 口径说明最多两行，别把日期栏顶到折线以下 */
  .pc-hero-title p { max-width: none; font-size: 11.5px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* 第一行：日期 + 查询；第二行：今天/昨天/前天 */
  .pc-hero-actions { display: grid; grid-template-columns: 1fr 84px; gap: 7px; }
  .pc-date-field { grid-column: 1 / 2; grid-row: 1; padding: 3px 10px; border-radius: 11px; }
  .pc-date-field span { font-size: 12px; }
  .pc-date-field input { width: 100%; font-size: 13px; }
  .pc-hero-actions > .btn { grid-column: 2 / 3; grid-row: 1; width: 84px; min-height: 42px; padding: 0; border-radius: 11px; }
  .pc-quick { grid-column: 1 / -1; grid-row: 2; gap: 6px; }
  .pc-quick .chip { flex: 1 1 0; text-align: center; padding: 7px 0; border-radius: 999px; font-size: 13px; }
  /* KPI：两列 + 卡内留白收紧，六张卡刚好三行对齐 */
  .pc-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .pc-kpi-item { padding: 5px 9px 6px 11px; border-radius: 9px; }
  .pc-kpi-item::before { width: 2.5px; }
  /* 标签与数值并排一行：KPI 从三行压成两行，整块矮 1/3 */
  .pc-kpi-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; min-width: 0; }
  .pc-kpi-label { font-size: 11px; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pc-kpi-val { font-size: 17px; line-height: 20px; margin-top: 0; letter-spacing: -.3px; white-space: nowrap; }
  .pc-kpi-val em { font-size: 10.5px; margin-left: 1px; }
  /* 金额类数值更长，压半个字号，别把标签挤到贴脸 */
  .pc-kpi-val.is-money { font-size: 16px; letter-spacing: -.2px; }
  .pc-kpi-sub { font-size: 10px; line-height: 13px; margin-top: 1px; }
  .pc-bar { height: 4px; margin-top: 5px; }
  /* 手机端不显示缺货率（卡与副标题都换成缺货品项） */
  .pc-kpi-item.pc-k-hide { display: none; }
  .pc-only-pc { display: none; }
  .pc-only-m { display: inline; }
  .pc-hint { display: none; }
  .pc-tbl { max-height: none; border: 0; }
  .pc-table thead th { position: static; }
  .pc-table td { padding: 8px 10px; }
  /* 商品 / 订单卡：一口一块，行距再压一点 */
  table.mt-card.mt-dense tr.pc-od-row { padding: 7px 11px; margin-bottom: 5px; border-radius: 12px; }
  table.mt-card.mt-dense tr.pc-od-row td { padding: 2px 0; }
  /* 订单卡：客户 + 下单账号独占一行，账号胶囊不再被挤成两行 */
  table.mt-card.mt-dense tr.pc-od-row td.pc-o-cust { flex: 1 1 100%; }
  table.mt-card.mt-dense tr.pc-od-row td.pc-o-cust .oc-sub { max-width: 100%; min-width: 0; font-size: 11px; padding: 1px 8px 1px 3px; gap: 4px; }
  /* 订单卡：下单量灰、实配量点色，和商品卡保持同一套视觉 */
  table.mt-card.mt-dense tr.pc-od-row td.pc-o-qty { font-size: 14.5px; color: var(--text-2); }
  table.mt-card.mt-dense tr.pc-od-row td.pc-o-pick { font-size: 15px; color: var(--green-d); }
  table.mt-card.mt-dense tr.pc-od-row td.pc-o-pick.is-short { color: #d64545; }
}

/* ---------- 分拣对比（手机端）：对比表只留 规格 / 单位 / 下单 / 实配 ---------- */
@media (max-width: 820px) {
  table.mt-card td.pc-m-hide { display: none !important; }
}

/* ---------- 分拣对比（手机端）：按商品对比 = 真表格（列对齐、行距舒展） ---------- */
@media (max-width: 820px) {
  .table-wrap.pc-tbl { margin: 0; padding: 0; overflow: visible; }
  table.pc-tp.mt-card { display: table; table-layout: fixed !important; width: 100%; border-collapse: collapse; }
  table.pc-tp.mt-card thead { display: table-header-group; }
  table.pc-tp.mt-card tbody { display: table-row-group; }
  table.pc-tp.mt-card tr {
    display: table-row; position: static;
    padding: 0; margin: 0; border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
  }
  table.pc-tp.mt-card tr:active { background: transparent; }
  table.pc-tp.mt-card th,
  table.pc-tp.mt-card td {
    display: table-cell; vertical-align: middle;
    border: 0; border-radius: 0;
    white-space: nowrap !important; word-break: normal;
    overflow: hidden !important; text-overflow: ellipsis !important;
    height: auto !important; min-width: 0 !important; max-width: none !important;
  }

  /* 表头：底比行深一档，与数据行明确分层 */
  table.pc-tp.mt-card thead th {
    padding: 8px 5px; font-size: 11px; font-weight: 600; text-align: left;
    color: #7c8a82; background: #e6f2ea; border-bottom: 1px solid #d9e8de; letter-spacing: .3px;
  }
  table.pc-tp.mt-card thead th:first-child { padding-left: 10px; }
  table.pc-tp.mt-card thead th:nth-child(3) { text-align: center; }
  table.pc-tp.mt-card thead th:nth-child(4),
  table.pc-tp.mt-card thead th:nth-child(5) { text-align: right; padding-right: 12px; }

  /* 手机端只留 5 列：商品 / 规格 / 单位 / 下单量 / 实配量 */
  table.pc-tp.mt-card thead th:nth-child(n+6) { display: none !important; }
  table.pc-tp.mt-card thead th:nth-child(1) { width: 37%; }
  table.pc-tp.mt-card thead th:nth-child(2) { width: 21%; }
  table.pc-tp.mt-card thead th:nth-child(3) { width: 10%; }
  table.pc-tp.mt-card thead th:nth-child(4) { width: 16%; }
  table.pc-tp.mt-card thead th:nth-child(5) { width: 16%; }

  /* 数据行：覆盖卡片流遗留的 padding:0 / 15px / 加粗，表头与数据严格同列对齐 */
  table.pc-tp.mt-card tbody tr td {
    padding: 8px 5px; font-size: 13px; font-weight: 400; line-height: 1.35;
    color: var(--text-2); border-top: 1px solid #f0f5f1;
  }
  table.pc-tp.mt-card tbody tr:first-child td { border-top: 0; }
  table.pc-tp.mt-card td::before { display: none !important; content: none !important; }
  table.pc-tp.mt-card tbody tr td:first-child,
  table.pc-tp.mt-card td.mt-title,
  table.pc-tp.mt-card td.pc-pname {
    padding: 8px 5px 8px 10px; font-size: 13.5px; font-weight: 400; color: #262b31;
  }
  table.pc-tp.mt-card tbody tr td:nth-child(2) { font-size: 12.5px; color: var(--text-3); }
  table.pc-tp.mt-card tbody tr td:nth-child(3) { text-align: center !important; font-size: 12.5px; color: var(--text-3); }
  table.pc-tp.mt-card tbody tr td.num { text-align: right !important; padding: 8px 12px 8px 5px; font-variant-numeric: tabular-nums; }
  table.pc-tp.mt-card td.pc-v-qty { font-size: 13px; font-weight: 500; color: #4e5969; }
  table.pc-tp.mt-card td.pc-v-pick { font-size: 13.5px; font-weight: 600; color: var(--green-d); }
  table.pc-tp.mt-card td.pc-v-pick.is-short { color: #d64545; font-weight: 700; }
  table.pc-tp.mt-card td.muted { color: var(--text-3); }

  /* 合计行：一行收口，数字与数据行右对齐 */
  table.pc-tp.mt-card tr.pc-sum td {
    background: #f1f8f3; font-size: 12.5px; font-weight: 600; color: #3d4b43;
    border-top: 1px solid #dfeee3; padding: 9px 5px 11px;
  }
  table.pc-tp.mt-card tr.pc-sum td:first-child { padding-left: 10px; font-size: 12.5px; font-weight: 600; color: #4a5a50; }
  table.pc-tp.mt-card tr.pc-sum td:nth-child(2),
  table.pc-tp.mt-card tr.pc-sum td:nth-child(3) { text-align: center; color: #c4cfc7; font-weight: 400; font-size: 12px; }
  table.pc-tp.mt-card tr.pc-sum td.num { padding: 9px 12px 11px 5px; }
  table.pc-tp.mt-card tr.pc-sum .pc-sum-n { display: none; }

  /* 空态：固定一块留白，文字垂直水平居中 */
  table.pc-tp.mt-card td[colspan] { display: table-cell; height: 72px !important; padding: 0 !important; vertical-align: middle;
    text-align: center !important; font-size: 13px; font-weight: 400; color: var(--text-3); }
  /* 订单区块空态 */
  .pc-sec-to table.mt-card td[colspan] { height: 72px; padding: 0 !important; line-height: 72px; font-size: 13px; color: var(--text-3);
    background: #fff; border: 1px solid #e2ebfa; border-radius: 12px; }
}

/* ---------- 分拣对比（手机端）：区块配色 + 表格精修 + 整页美化 ---------- */
@media (max-width: 820px) {
  /* 头部：白底微绿，与下方两个彩色区块拉开层次 */
  .pc-hero { background: linear-gradient(180deg, #ffffff 0%, #f9fcfa 100%); border: 1px solid #eef2ef; border-radius: 16px; }
  .pc-hero-title h3::before { height: 15px; top: 50%; transform: translateY(-50%); width: 3.5px; }
  /* 日期栏：白底描边，像个输入框 */
  .pc-date-field { background: #fff; border: 1px solid #e6ebe8; box-shadow: 0 1px 2px rgba(16, 40, 26, .04); padding: 4px 11px; }
  .pc-date-field span { font-size: 11.5px; }
  .pc-date-field input { font-size: 14px; font-weight: 700; padding: 6px 0; }
  .pc-quick .chip { background: #fff; border: 1px solid #e8ece9; color: var(--text-2); font-weight: 500; }
  .pc-quick .chip.active { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 180, 42, .28); }
  /* KPI：色条淡化 + 极淡同色底，六卡像一组 */
  .pc-kpi-item { background: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--k) 6%, #fff) 0%, #fff 78%); border-color: #edf1ee; }
  .pc-kpi-item::before { width: 2.5px; opacity: .75; }
  .pc-kpi-item.is-warn, .pc-kpi-item.is-bad { background: linear-gradient(180deg, color-mix(in srgb, var(--k) 9%, #fff) 0%, #fff 82%); }

  /* —— 两个区块：按商品=绿色系，按订单=蓝色系 —— */
  .pc-sec { border-radius: 16px; padding: 12px 11px 11px; border: 1px solid transparent; }
  .pc-sec .card-title { margin-bottom: 9px; padding: 0; }
  .pc-sec .card-title h3 { font-size: 14.5px; display: flex; align-items: center; gap: 6px; letter-spacing: .2px; }
  .pc-sec .card-title h3::before { content: ''; width: 3.5px; height: 15px; border-radius: 3px; flex: 0 0 auto; }
  .pc-sec .pc-count { margin-left: 2px; font-size: 11.5px; line-height: 18px; min-width: 22px; padding: 0 8px; vertical-align: 0; }
  .pc-sec-tp { background: linear-gradient(180deg, #e6f6ea 0%, #eef9f1 60%, #f3fbf5 100%); border-color: #d9eedd; }
  .pc-sec-tp .card-title h3 { color: #0a7a23; }
  .pc-sec-tp .card-title h3::before { background: linear-gradient(180deg, #00b42a, #45cd63); }
  .pc-sec-tp .pc-count { background: #d3efd9; color: #0a7a23; }
  .pc-sec-to { background: linear-gradient(180deg, #e6effc 0%, #eef5ff 60%, #f3f8ff 100%); border-color: #d8e5f8; }
  .pc-sec-to .card-title h3 { color: #1652c8; }
  .pc-sec-to .card-title h3::before { background: linear-gradient(180deg, #165dff, #5b8fff); }
  .pc-sec-to .pc-count { background: #d8e5fc; color: #1652c8; }

  /* —— 商品表：白底圆角块浮在绿色区块上 —— */
  .pc-sec-tp .pc-tbl { background: #fff; border-radius: 12px; box-shadow: 0 1px 3px rgba(16, 60, 30, .07); overflow: hidden; }
  table.pc-tp.mt-card tbody tr td { border-top: 1px solid #f2f6f3; }
  table.pc-tp.mt-card tbody tr:nth-child(even) td { background: #f5faf6; }
  table.pc-tp.mt-card tbody tr:active td { background: #eef8f0; }
  /* 合计行 */

  /* —— 订单卡：白底浮在蓝色区块上，客户名转深蓝 —— */
  .pc-sec-to table.mt-card tr.pc-od-row { border-color: #e2ebfa; box-shadow: 0 1px 3px rgba(20, 60, 120, .06); }
  .pc-sec-to table.mt-card tr.pc-od-row td.pc-o-cust { flex: 1 1 100%; flex-wrap: wrap; row-gap: 4px; }
  .pc-sec-to .pc-o-name { color: #1b3f86; font-size: 14.5px; font-weight: 700; letter-spacing: .2px; }
  .pc-sec-to table.mt-card tr.pc-od-row.has-short { border-color: #f6dfc8; }
  /* 「N 单」徽标：小一号深蓝胶囊，跟下单账号胶囊区分开 */
  .pc-sec-to .pc-o-multi { background: #dbe8fd; color: #14459c; font-size: 11px; line-height: 18px;
    padding: 0 7px; font-weight: 600; }
  .pc-sec-to .pc-o-multi b { font-size: 12px; }
  /* 下单时间 / 配送日期并排一行，配送日期靠右 */
  .pc-sec-to table.mt-card tr.pc-od-row td.pc-o-time,
  .pc-sec-to table.mt-card tr.pc-od-row td.pc-o-date { flex: 0 0 auto; font-size: 11.5px; color: #7b8aa3; }
  .pc-sec-to table.mt-card tr.pc-od-row td.pc-o-time::before,
  .pc-sec-to table.mt-card tr.pc-od-row td.pc-o-date::before { font-size: 11px; color: #9aa8bd; }
  .pc-sec-to table.mt-card tr.pc-od-row td.pc-o-date { margin-left: auto; }
  /* 蓝色区块里的下单账号胶囊改蓝调，别用绿色跳色 */
  .pc-sec-to .oc-sub { background: #e9f0fd; color: #1d4ed8; }
  .pc-sec-to .oc-sub i { color: #3b6fd6; }
  /* 状态标签统一压淡，避免和区块主色抢 */
  .pc-sec-to table.mt-card tr.pc-od-row .tag { font-size: 11.5px; }

  /* —— 账号弹层（订单号 + 每单明细）：手机端单列铺开 —— */
  .pc-acc-head { padding: 8px 10px; gap: 7px; }
  .pc-acc-who { font-size: 13.5px; }
  .pc-acc-kpis { gap: 6px 12px; }
  .pc-acc-kpi { font-size: 11px; }
  .pc-acc-kpi b { font-size: 13px; }
  .pc-acc-ord > summary { padding: 8px 10px; gap: 5px 7px; }
  .pc-acc-no { font-size: 13px; }
  .pc-acc-meta { font-size: 11px; }
  .pc-acc-sum { flex: 1 1 100%; margin-left: 16px; font-size: 11.5px; }
  .pc-acc-body { padding: 7px 8px 8px; }
}