/* skin-b v20261019a · 本版：操作记录明细中文化小标签（.okvs/.okv）+ 未结款项首次进入修品牌列表 */
/* ============================================================
   星商汇 · 皮肤 B（建材倒角 · 单一钴蓝）— 共享皮肤层
   挂载：index.html 里的 <link rel="stylesheet" href="skin-b.css?v=..."> ＋ <body class="skin-b">
   原则：只改外观（颜色/圆角/倒角/层级/密度），不改结构、不动功能、不改字段与按钮位置。
   母题：45° 倒角（方管/型材/瓷砖包角）；一色相钴蓝 + 桑皮纸底；状态色只做功能色。
   ============================================================ */

body.skin-b{
  --bg:#eae6dd;        /* 桑皮纸底 */
  --ground:#e2dcd0;    /* 页面底 */
  --tile:#f8f5ef;      /* 块面 */
  --line:#cfc9bd;      /* 分隔线 */
  --ink:#12307e;       /* 墨（钴蓝） */
  --ink-soft:#2a4a95;
  --muted:#42598f;
  --deep:#12307e;      /* 实心块 */
  --deep-soft:#1c3f9e;
  --on-deep:#f2efe8;
  --ok:#1c6b4b; --ok-soft:#dfe9e1;
  --warn:#8a5a08; --warn-soft:#efe2c9;
  --bad:#a8322a; --bad-soft:#f0dbd5;
  --chamfer:14px;      /* 内容块倒角 */
  --chamfer-sm:9px;    /* 控件倒角 */
  background:var(--ground)!important;
  color:var(--ink)!important;
}

/* ---------- 外壳 ---------- */
body.skin-b .app{background:var(--ground)}
body.skin-b .side{
  background:var(--deep)!important;
  color:var(--on-deep);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%);
}
body.skin-b .side .brand h1,body.skin-b .side .brand p{color:var(--on-deep)}
body.skin-b .side .brand p{opacity:.72}
body.skin-b .side .logo{
  background:var(--bg)!important;color:var(--deep)!important;border-radius:0!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
}
body.skin-b .nav button,body.skin-b .hj-nav button{
  background:rgba(255,255,255,.10)!important;color:#dfe6f7!important;
  border:0!important;border-radius:0!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--chamfer-sm)),calc(100% - var(--chamfer-sm)) 100%,0 100%);
}
body.skin-b .nav button.active,body.skin-b .nav button:hover,
body.skin-b .hj-nav button.active,body.skin-b .hj-nav button:hover{
  background:var(--bg)!important;color:var(--deep)!important;font-weight:700;
}
body.skin-b .nav #switchSys,body.skin-b .nav #logout,body.skin-b .nav #switchSystem{
  background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.22)!important;color:var(--on-deep)!important;
}
body.skin-b .hj-nav-title,body.skin-b .navsec{color:rgba(255,255,255,.52)!important;letter-spacing:.04em}
body.skin-b .main{background:var(--ground)}
body.skin-b .top{
  background:var(--bg)!important;border-bottom:0!important;box-shadow:none!important;backdrop-filter:none!important;
}
body.skin-b .top h2{color:var(--deep);font-size:26px;letter-spacing:-.01em}
body.skin-b .content{padding-top:18px}
/* 栅格子项默认 min-width:auto，长文本会把整列撑出屏幕 —— 手机端横向溢出的根因之一 */
body.skin-b .grid2>*,body.skin-b .grid3>*,body.skin-b .cards>*,body.skin-b .toolbar>*{min-width:0}

/* ---------- 卡片 / 分区 ---------- */
body.skin-b .card,body.skin-b .section{
  background:var(--tile)!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%);
}
body.skin-b .section-head{border-bottom:0}
body.skin-b .section-head h3{color:var(--deep)}
body.skin-b .cards .card .label,body.skin-b .label{color:var(--muted)}
body.skin-b .cards .card .value,body.skin-b .value{
  color:var(--deep);font-size:30px;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
body.skin-b .user{color:var(--muted)}
body.skin-b .empty{background:var(--tile);color:var(--muted)}

/* ---------- 按钮：一个视图一个实心主按钮 ---------- */
body.skin-b .btn{
  border-radius:0!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--chamfer-sm)),calc(100% - var(--chamfer-sm)) 100%,0 100%);
}
body.skin-b .btn.primary{background:var(--deep)!important;color:var(--on-deep)!important;border:0!important}
body.skin-b .btn.accent{background:var(--deep-soft)!important;color:var(--on-deep)!important;border:0!important}
body.skin-b .btn.danger{background:var(--bad)!important;color:#fff!important}
body.skin-b .btn.secondary{background:transparent!important;color:var(--deep)!important;border:1px solid var(--deep)!important}
body.skin-b .btn:hover{filter:brightness(1.05)}
body.skin-b .btn.secondary:hover{background:var(--bg)!important}

/* ---------- 表单控件 ---------- */
body.skin-b .field input,body.skin-b .field select,body.skin-b .field textarea,
body.skin-b .toolbar input,body.skin-b .toolbar select{
  background:#fff!important;border:1px solid var(--line)!important;border-radius:0!important;color:var(--ink)!important;
}
body.skin-b .field input:focus,body.skin-b .field select:focus,body.skin-b .field textarea:focus{
  border-color:var(--deep)!important;box-shadow:0 0 0 2px rgba(18,48,126,.16)!important;outline:none!important;
}
body.skin-b .field label{color:var(--muted)}

/* ---------- 表格：钴蓝表头 + 斑马 + 等宽数字 ---------- */
body.skin-b .table-wrap{border:0!important;border-radius:0!important;background:transparent}
body.skin-b table{background:transparent}
body.skin-b th{
  background:var(--deep)!important;color:var(--on-deep)!important;border-bottom:0!important;
}
body.skin-b td{border-bottom:1px solid var(--line)!important}
body.skin-b tbody tr:nth-child(even){background:rgba(18,48,126,.045)}
body.skin-b th,body.skin-b td{font-variant-numeric:tabular-nums}
body.skin-b table thead th:first-child,body.skin-b table td:first-child{padding-left:14px}

/* ---------- 状态标签 ---------- */
body.skin-b .pill,body.skin-b .tag{
  border-radius:0!important;border:0!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%);
}
body.skin-b .green{background:var(--ok-soft)!important;color:var(--ok)!important}
body.skin-b .amber{background:var(--warn-soft)!important;color:var(--warn)!important}
body.skin-b .red{background:var(--bad-soft)!important;color:var(--bad)!important}
body.skin-b .negative{color:var(--bad)!important}
body.skin-b .money{color:var(--deep)}

/* ---------- 登录 / 系统选择 ---------- */
/* .login 原来是 display:grid 但没定义列宽：隐式 auto 列会被最长文本撑成 max-content，
   子元素写 width:100% 也压不住 —— 手机端整页会横向溢出。这里把列固定成 minmax(0,1fr)。 */
body.skin-b .login{background:var(--ground)!important;grid-template-columns:minmax(0,1fr)!important}
body.skin-b .login-card{
  background:var(--tile)!important;border-radius:0!important;box-shadow:none!important;
  box-sizing:border-box!important;padding:24px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%);
}
body.skin-b .login-card .logo{border-radius:0!important;background:var(--deep)!important;color:var(--on-deep)!important}
body.skin-b .login-card h1,body.skin-b .login-card h2{color:var(--deep)}

/* ---------- 弹窗 / 提示 ---------- */
body.skin-b .modal{
  background:var(--tile)!important;border-radius:0!important;box-shadow:0 18px 50px rgba(10,20,45,.28)!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
body.skin-b .modal-head h3{color:var(--deep)}
body.skin-b .toast{background:var(--deep)!important;color:var(--on-deep)!important;border-radius:0!important}

/* ---------- 手机端：底部导航 + 卡片表 ---------- */
@media (max-width:900px){
  body.skin-b .login{overflow-x:hidden;padding:12px!important}
  body.skin-b .login-card{width:100%!important;max-width:100%!important}
  body.skin-b .login-card .grid2{grid-template-columns:1fr!important;width:100%}
  body.skin-b .login-card .grid2>.card{width:100%;max-width:100%}
  body.skin-b .login-card p.user,body.skin-b .login-card h3{overflow-wrap:anywhere}
  body.skin-b .login{padding:12px!important}
  body.skin-b .login-card{padding:18px;max-width:100%}
  body.skin-b .login-card .grid2{gap:10px}
  /* 登录/系统选择的抬头：窄屏不挤、不裁字 */
  body.skin-b .login-card .brand{align-items:center;gap:10px}
  body.skin-b .login-card .brand>div{min-width:0}
  body.skin-b .login-card .brand h1{font-size:22px;line-height:1.2;overflow-wrap:anywhere}
  body.skin-b .login-card .brand p{font-size:12px;line-height:1.25;overflow-wrap:anywhere}
  body.skin-b .login-card h2{font-size:20px;line-height:1.3;overflow-wrap:anywhere}
  /* 各系统顶栏：标题与账号信息在窄屏允许换行，别被挤掉 */
  body.skin-b .top{height:auto!important;min-height:58px;padding:10px 12px!important;gap:8px;flex-wrap:wrap}
  body.skin-b .top h2{font-size:19px;line-height:1.25;overflow-wrap:anywhere}
  body.skin-b .top .user{font-size:12px;line-height:1.3}
  body.skin-b .mobile-home{background:var(--ground)}
  body.skin-b .mobile-home-hero{background:var(--deep)!important;color:var(--on-deep)}
  body.skin-b .mobile-home-btn{background:var(--tile)!important;border-radius:0!important}
  body.skin-b .mobile-home-btn.active{background:var(--deep)!important;color:var(--on-deep)!important}
  body.skin-b .mobile-home-ico{border-radius:0!important}
  body.skin-b .mobile-row-sheet{background:var(--tile)!important;border-radius:0!important}
  body.skin-b table.mcard tr{border:0!important;background:var(--tile)!important}
  body.skin-b table.mcard td[data-label]::before{color:var(--muted)}
}

/* ---------- 减少动画偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  body.skin-b *{transition:none!important;animation:none!important}
}

/* ============================================================
   首页「系统选择」：四个系统各用一整块底色区分
   仓库=钴蓝 · 家装工地=砖橙 · 定制柜=木棕 · 未结款项=墨绿
   （结构是 .login .login-card .grid2 > .card，纯 CSS 打色，不改 HTML）
   ============================================================ */
body.skin-b{ --sys-wh:#12307e; --sys-site:#a8481f; --sys-cab:#6b4a2f; --sys-pay:#1c6b4b; }
/* 注意：手机首页是全屏导航层，必须不透明（写成半透明会让下面页面透出来，像残影） */
body.skin-b .mobile-home{background:var(--deep)!important}
body.skin-b .mobile-home .mobile-home-grid,body.skin-b .mobile-home .mobile-home-user,
body.skin-b .mobile-home .mobile-home-tip,body.skin-b .mobile-home .mobile-home-section{background:transparent!important}
body.skin-b .login-card .grid2 > .card{
  color:#f6f3ec;padding:22px;display:flex;flex-direction:column;gap:6px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
body.skin-b .login-card .grid2 > .card:nth-child(1){background:var(--sys-wh)!important}
body.skin-b .login-card .grid2 > .card:nth-child(2){background:var(--sys-site)!important}
body.skin-b .login-card .grid2 > .card:nth-child(3){background:var(--sys-cab)!important}
body.skin-b .login-card .grid2 > .card:nth-child(4){background:var(--sys-pay)!important}
body.skin-b .login-card .grid2 > .card h3{color:#fff;font-size:20px;margin:2px 0 4px}
body.skin-b .login-card .grid2 > .card p.user{color:rgba(255,255,255,.80)!important;min-height:38px}
body.skin-b .login-card .grid2 > .card .logo{
  background:rgba(255,255,255,.16)!important;color:#fff!important;border-radius:0!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
}
body.skin-b .login-card .grid2 > .card .btn{
  background:rgba(255,255,255,.16)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.45)!important;margin-top:8px;
}
body.skin-b .login-card .grid2 > .card .btn:hover{background:rgba(255,255,255,.28)!important}

/* ============================================================
   手机端覆盖（≤900px / ≤640px 这两档是系统原来的断点）
   原来只覆盖了一小部分，这里补齐：顶栏按钮、手机首页宫格、底部行详情面板、
   卡片式表格 mcard、紧凑表 mcompact、13 列横滚表 mhscroll、选品卡、弹窗
   ============================================================ */
@media (max-width:900px){
  /* 顶栏：首页按钮做成钴蓝实心块 */
  body.skin-b .top{background:var(--bg)!important;border-bottom:0!important}
  body.skin-b .top h2{color:var(--deep);font-size:20px}
  body.skin-b .top .user{color:var(--muted)}
  body.skin-b .mobile{
    background:var(--deep)!important;color:var(--on-deep)!important;border:0!important;border-radius:0!important;
    clip-path:polygon(0 0,100% 0,100% calc(100% - var(--chamfer-sm)),calc(100% - var(--chamfer-sm)) 100%,0 100%);
  }
  body.skin-b .mobile:active{background:var(--deep-soft)!important}
  body.skin-b .main{background:var(--ground)}
  body.skin-b .card,body.skin-b .section{padding:14px}

  /* 手机首页宫格：整层不透明（写半透明会看到下面的页面，像残影） */
  body.skin-b .mobile-home{background:var(--deep)!important}
  body.skin-b .mobile-home,body.skin-b .mobile-home *{backdrop-filter:none!important}
  /* 抬头带：去掉原来「藏青渐变 + 底部 24px 圆角」，改成方形倒角带，和侧栏同一套切口语言 */
  body.skin-b .mobile-home-head{
    background:var(--deep)!important;border-radius:0!important;
    margin:0 -14px 12px!important;padding:18px 16px!important;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
  }
  body.skin-b .mobile-home-hero{background:transparent!important;color:var(--on-deep);border-radius:0!important}
  body.skin-b .mobile-home-hero p{color:rgba(255,255,255,.72)!important}
  body.skin-b .mobile-home-hero h2{color:var(--on-deep)!important}
  body.skin-b .mobile-home-logo{background:var(--bg)!important;color:var(--deep)!important;border-radius:0!important;
    width:42px!important;height:42px!important;font-size:19px!important;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
  /* 关闭键：去掉半透明小方框，只留一个白色 × */
  body.skin-b .mobile-home-close{
    background:transparent!important;border:0!important;color:var(--on-deep)!important;
    border-radius:0!important;font-size:24px!important;line-height:1!important;padding:0 4px!important;
  }
  body.skin-b .mobile-home-user{color:rgba(255,255,255,.82)!important;background:transparent!important}
  body.skin-b .mobile-home-section,body.skin-b .mobile-home-tip{color:rgba(255,255,255,.72)!important}
  body.skin-b .mobile-home-btn{
    background:var(--tile)!important;color:var(--deep)!important;border:0!important;border-radius:0!important;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
    box-shadow:none!important;
  }
  body.skin-b .mobile-home-btn.active{background:var(--bg)!important;color:var(--deep)!important;font-weight:700}
  body.skin-b .mobile-home-btn.active .mobile-home-ico{background:var(--deep)!important;color:var(--on-deep)!important}
  body.skin-b .mobile-home-ico{background:var(--deep)!important;color:var(--on-deep)!important;border-radius:0!important}
  body.skin-b .mobile-home-label{color:inherit!important}

  /* 底部「这一行详情」面板 */
  body.skin-b .mobile-row-sheet-mask{background:rgba(18,48,126,.42)!important}
  body.skin-b .mobile-row-sheet{
    background:var(--tile)!important;border-radius:0!important;box-shadow:none!important;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);
  }
  body.skin-b .mobile-row-sheet-head{border-bottom:1px solid var(--line)!important;background:var(--deep)!important}
  body.skin-b .mobile-row-sheet-head h3{color:var(--on-deep)!important}
  body.skin-b .mobile-row-sheet-close{color:var(--on-deep)!important;background:transparent!important}
  body.skin-b .mobile-row-sheet-field{border-bottom:1px solid var(--line)!important}
  body.skin-b .mobile-row-sheet-label{color:var(--muted)!important}
  body.skin-b .mobile-row-sheet-value{color:var(--ink)!important;font-variant-numeric:tabular-nums}

  /* 选品卡（销售出库 / 恒洁 选品） */
  body.skin-b .sku-list,body.skin-b .out-sku-reserve{background:var(--tile)!important;border-radius:0!important}
  body.skin-b .sku-item{background:var(--tile)!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important}
  body.skin-b .out-sku-name,body.skin-b .sku-item b{color:var(--deep)}
  body.skin-b .out-sku-spec,body.skin-b .out-sku-stock,body.skin-b .in-sku-spec,body.skin-b .in-sku-stock{color:var(--muted)}
  body.skin-b .out-cust-item{background:var(--tile)!important;border-radius:0!important;border-bottom:1px solid var(--line)!important}
  body.skin-b .out-cust-name{color:var(--deep)}
  body.skin-b .out-cust-meta,body.skin-b .out-cust-prod{color:var(--muted)!important}
}

@media (max-width:640px){
  body.skin-b .login-card{padding:14px}
  body.skin-b .login-card .grid2>.card{padding:16px}
  body.skin-b .login-card .brand h1{font-size:20px}
  /* 卡片式表格：每行是一块纸卡 */
  body.skin-b table.mcard tr{
    background:var(--tile)!important;border:0!important;border-radius:0!important;
    clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
    margin-bottom:8px;
  }
  body.skin-b table.mcard td{border-bottom:1px solid var(--line)!important}
  body.skin-b table.mcard td[data-label]::before{color:var(--muted)!important}
  body.skin-b table.mcard td input,body.skin-b table.mcard td select,
  body.skin-b table.mcard td button{border-radius:0!important}

  /* 紧凑表（恒洁录单那类可编辑表） */
  body.skin-b table.mcompact thead tr{background:var(--deep)!important}
  body.skin-b table.mcompact th{color:var(--on-deep)!important}
  body.skin-b table.mcompact tbody tr{background:var(--tile)!important;border-bottom:1px solid var(--line)!important}
  body.skin-b table.mcompact th,body.skin-b table.mcompact td{border-bottom:1px solid var(--line)!important}
  body.skin-b table.mcompact td input,body.skin-b table.mcompact td select{background:#fff!important;border-radius:0!important}

  /* 13 列横向滚动表（未结款项明细等）：表头钴蓝、首列冻结列做成纸卡 */
  body.skin-b table.mhscroll{border-collapse:separate}
  body.skin-b table.mhscroll th{background:var(--deep)!important;color:var(--on-deep)!important}
  body.skin-b table.mhscroll th,body.skin-b table.mhscroll td{border-bottom:1px solid var(--line)!important}
  body.skin-b table.mhscroll tbody tr:nth-child(even){background:rgba(18,48,126,.045)}
  body.skin-b table.mhscroll th.m-freeze,body.skin-b table.mhscroll td.m-freeze{
    background:var(--bg)!important;color:var(--deep)!important;font-weight:700;
  }
  body.skin-b table.mhscroll thead th.m-freeze{background:var(--deep-soft)!important;color:var(--on-deep)!important}

  /* 弹窗与提示 */
  body.skin-b .modal-head{background:var(--deep)!important}
  body.skin-b .modal-head h3{color:var(--on-deep)!important}
  body.skin-b .toast{left:12px;right:12px}
}

/* ============================================================
   批次五：三个业务模块（未结款项 pay- / 定制柜 cab- / 家装工地 sh-）
   + 手机端宽表（固定首列 / 吸顶表头）皮肤化 + 加载骨架
   ============================================================ */
body.skin-b .l,body.skin-b .kmicro,body.skin-b .legend,body.skin-b .sh-legend,body.skin-b .muted{color:var(--muted)}
body.skin-b .v{color:var(--deep);font-variant-numeric:tabular-nums}
body.skin-b .n{text-align:right;font-variant-numeric:tabular-nums}
body.skin-b .pay-chips,body.skin-b .cab-chips,body.skin-b .sh-chips,
body.skin-b .pay-actions,body.skin-b .cab-actions,body.skin-b .sh-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
body.skin-b .pay-chip,body.skin-b .cab-chip,body.skin-b .sh-chip{
  background:transparent!important;border:1px solid var(--line)!important;color:var(--deep)!important;border-radius:0!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
}
body.skin-b .pay-chip.active,body.skin-b .cab-chip.active,body.skin-b .sh-chip.active{
  background:var(--deep)!important;color:var(--on-deep)!important;border-color:var(--deep)!important;
}
body.skin-b .pay-tag,body.skin-b .cab-tag,body.skin-b .sh-tag{border-radius:0!important;background:var(--warn-soft);color:var(--warn)}
body.skin-b .tag.blue{background:rgba(18,48,126,.10)!important;color:var(--deep)!important}
body.skin-b .tag.purple{background:rgba(107,74,47,.14)!important;color:#6b4a2f!important}
body.skin-b .tag.darkred{background:var(--bad-soft)!important;color:var(--bad)!important}
body.skin-b .pay-srow,body.skin-b .pay-row2,body.skin-b .cab-srow,body.skin-b .cab-row2,
body.skin-b .sh-row,body.skin-b .sh-row2,body.skin-b .pen-pay-row,body.skin-b .sh-inc-row,body.skin-b .sh-tx-ops{
  background:var(--tile)!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;
}
body.skin-b .pay-chart,body.skin-b .cab-chart,body.skin-b .sh-chart,body.skin-b .sh-donuts{background:var(--tile)}
body.skin-b .pay-bartrack{background:var(--line)!important;border-radius:0!important}
body.skin-b .pay-barfill{background:var(--deep)!important;border-radius:0!important}
body.skin-b .pay-barlist .pay-barline,body.skin-b .pay-bartrack,body.skin-b .pay-barfill{height:10px}
body.skin-b .pay-dot,body.skin-b .cab-dot,body.skin-b .sh-dot{border-radius:0!important}
body.skin-b .sh-detail,body.skin-b .sh-settings,body.skin-b .cab-settings,body.skin-b .sh-sortable,body.skin-b .cab-picks{background:var(--tile)}
body.skin-b .sh-sortmark,body.skin-b .cab-pick.on{color:var(--deep)!important;font-weight:700}
body.skin-b .on-dark,body.skin-b .on-dark *{color:var(--on-deep)!important}
body.skin-b .sh-page,body.skin-b .noprint{background:transparent}
/* 加载骨架 */
body.skin-b .sk{height:16px;background:linear-gradient(90deg,rgba(18,48,126,.10),rgba(18,48,126,.03),rgba(18,48,126,.10));background-size:200% 100%;animation:skb 1.2s linear infinite}
body.skin-b .sk+.sk{margin-top:10px}
body.skin-b .sk.w60{width:60%}body.skin-b .sk.w80{width:80%}
@keyframes skb{from{background-position:200% 0}to{background-position:-200% 0}}
/* 手机端宽表：固定首列 + 吸顶表头（系统原样式用 #fff/#ececec，这里换成纸色与线色） */
@media (max-width:640px){
  body.skin-b table:not(.mcard){min-width:620px}
  body.skin-b table:not(.mcard) thead th{background:var(--deep)!important;color:var(--on-deep)!important;box-shadow:none!important}
  body.skin-b table:not(.mcard) td:first-child{background:var(--bg)!important;box-shadow:1px 0 0 var(--line)!important;color:var(--deep)!important}
  body.skin-b table:not(.mcard) thead th:first-child{background:var(--deep-soft)!important;color:var(--on-deep)!important}
  body.skin-b table.mhscroll td.m-freeze{background:var(--bg)!important;box-shadow:1px 0 0 var(--line)!important}
  body.skin-b table.mhscroll thead th.m-freeze{background:var(--deep-soft)!important;color:var(--on-deep)!important}
  body.skin-b table.mcompact thead tr{background:var(--deep)!important;color:var(--on-deep)!important}
  body.skin-b table.mcompact tbody tr{background:var(--tile)!important;border-bottom:1px solid var(--line)!important}
  body.skin-b table.mcard td[data-label]::before{color:var(--muted)!important}
  body.skin-b .table-wrap{border-radius:0!important;background:transparent}
}
@media (prefers-reduced-motion:reduce){body.skin-b .sk{animation:none}}

/* 操作记录明细：中文字段 + 值 的小标签 */
body.skin-b .okvs{display:flex;flex-wrap:wrap;gap:4px 12px;white-space:normal}
body.skin-b .okv{color:var(--ink);font-size:12px;white-space:nowrap}
body.skin-b .okv i{color:var(--muted);font-style:normal;margin-right:4px}

/* ============================================================
   批次二十一：交互细节 / 可访问性 / 一致性收口
   （只改外观与交互反馈，不动结构与数据）
   ============================================================ */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.skin-b h1,body.skin-b h2,body.skin-b h3{text-wrap:balance}
body.skin-b p,body.skin-b .user,body.skin-b .label{text-wrap:pretty}
body.skin-b h2,body.skin-b h3{scroll-margin-top:84px}
body.skin-b button,body.skin-b a,body.skin-b input,body.skin-b select,body.skin-b textarea{touch-action:manipulation}
body.skin-b{-webkit-tap-highlight-color:rgba(18,48,126,.12)}

/* 键盘焦点：鼠标点击不出现，Tab 时清晰可见 */
body.skin-b :focus-visible{outline:2px solid var(--deep);outline-offset:2px}
body.skin-b .side :focus-visible,
body.skin-b .mobile-home :focus-visible,
body.skin-b .mobile-home-hero :focus-visible{outline-color:var(--bg)}
body.skin-b .btn:focus-visible,body.skin-b .nav button:focus-visible{outline-offset:3px}

/* 按压与悬停反馈：只过渡会变的属性，可被打断 */
body.skin-b .btn,
body.skin-b .nav button,
body.skin-b .hj-nav button,
body.skin-b .mobile-home-btn,
body.skin-b .inv-quick-chip,
body.skin-b .pay-chip,body.skin-b .cab-chip,body.skin-b .sh-chip{
  transition-property:background-color,color,filter,transform;
  transition-duration:140ms;
  transition-timing-function:ease-out;
}
body.skin-b .btn:active,
body.skin-b .mobile-home-btn:active,
body.skin-b .inv-quick-chip:active,
body.skin-b .pay-chip:active,body.skin-b .cab-chip:active,body.skin-b .sh-chip:active{
  transform:scale(.96);
}
body.skin-b .nav button:active,body.skin-b .hj-nav button:active{filter:brightness(1.06)}
@media (prefers-reduced-motion:reduce){
  body.skin-b .btn,body.skin-b .mobile-home-btn,body.skin-b .inv-quick-chip{transform:none!important}
}

/* 弹层滚动不带动整页 */
body.skin-b .modal-backdrop,
body.skin-b .mobile-home,
body.skin-b .mobile-row-sheet-mask{overscroll-behavior:contain}

/* 首页 KPI：5 张卡时不留一个空洞 */
@media (min-width:901px){
  body.skin-b .cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
}

/* 系统选择：图标与进入按钮做实心，别再半透明（白块 + 系统色文字，对比更稳） */
body.skin-b .login-card .grid2>.card .logo{background:#fff!important;color:var(--deep)!important}
body.skin-b .login-card .grid2>.card:nth-child(1) .logo{color:#12307e!important}
body.skin-b .login-card .grid2>.card:nth-child(2) .logo{color:#a8481f!important}
body.skin-b .login-card .grid2>.card:nth-child(3) .logo{color:#6b4a2f!important}
body.skin-b .login-card .grid2>.card:nth-child(4) .logo{color:#1c6b4b!important}
body.skin-b .login-card .grid2>.card .btn{
  background:#fff!important;color:#12307e!important;border:0!important;font-weight:700;
}
body.skin-b .login-card .grid2>.card:nth-child(2) .btn{color:#a8481f!important}
body.skin-b .login-card .grid2>.card:nth-child(3) .btn{color:#6b4a2f!important}
body.skin-b .login-card .grid2>.card:nth-child(4) .btn{color:#1c6b4b!important}
body.skin-b .login-card .grid2>.card .btn:hover{background:#fff!important;filter:brightness(.96)}

/* 库存中心：快捷按钮跟全站同一种「倒角 + 细边」语言，不用胶囊 */
body.skin-b .inv-quick-chip{
  border:1px solid var(--line)!important;background:transparent!important;color:var(--deep)!important;
  border-radius:0!important;padding:8px 12px!important;font-size:13px!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%);
}
body.skin-b .inv-quick-chip:hover{border-color:var(--deep)!important;background:rgba(18,48,126,.06)!important}
body.skin-b .inv-quick-chip.active{background:var(--deep)!important;border-color:var(--deep)!important;color:var(--on-deep)!important}
body.skin-b .inv-quick-chip .inv-quick-spec{opacity:.7}
body.skin-b .inv-summary{
  border-radius:0!important;border:1px solid var(--line)!important;background:rgba(18,48,126,.06)!important;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%);
}
@media (max-width:640px){
  body.skin-b table.inv-amount td,
  body.skin-b table.inv-amount td:first-child{background:transparent!important;box-shadow:none!important}
  body.skin-b table.inv-amount tr{
    background:transparent!important;border:0!important;border-radius:0!important;
    border-bottom:1px solid var(--line)!important;padding:10px 0!important;
  }
  body.skin-b table.inv-amount tr:last-child{border-bottom:0!important}
  body.skin-b table.inv-amount td{border:0!important;padding:2px 0!important}
}

/* 手机端：小按钮与关闭键够 44px 触控高度 */
@media (max-width:640px){
  body.skin-b .btn.small{min-height:44px}
  body.skin-b .close{width:44px;height:44px}
}

/* 手机首页图标：统一 22px 线性图标 */
body.skin-b .mobile-home-ico svg.mi{width:22px;height:22px;display:block}
body.skin-b .mobile-home-ico{display:flex;align-items:center;justify-content:center}

/* 跳到主要内容（只在 Tab 聚焦时出现） */
.skip-link{
  position:fixed;left:12px;top:-64px;z-index:9999;
  background:var(--deep);color:var(--on-deep);padding:10px 16px;text-decoration:none;
  font-size:14px;font-weight:700;transition:top 120ms ease-out;
}
.skip-link:focus{top:12px}

/* 三个业务模块里还有一批内联写死的小按钮（圆角 6–8px）：统一回全站的倒角与直角 */
body.skin-b button{border-radius:0!important}
body.skin-b button{
  clip-path:polygon(0 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%);
}
body.skin-b .btn,body.skin-b .nav button,body.skin-b .hj-nav button,
body.skin-b .mobile-home-btn,body.skin-b .inv-quick-chip,
body.skin-b .pay-chip,body.skin-b .cab-chip,body.skin-b .sh-chip,
body.skin-b .close,body.skin-b .mobile-home-close{
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--chamfer-sm)),calc(100% - var(--chamfer-sm)) 100%,0 100%);
}
body.skin-b .close,body.skin-b .mobile-home-close{clip-path:none}

/* .full 是表单里的"整行主按钮"，之前根本没定义宽度，按钮只有文字那么宽 */
body.skin-b .btn.full{width:100%}

/* 手机端宽表：提示可以左右滑动看更多列 */
.xh-scroll-hint{display:none}
@media (max-width:640px){
  .xh-scroll-hint{display:block;font-size:12px;color:var(--muted);margin:6px 2px 0;text-align:right}
}

/* iPhone 刘海屏 / 主屏 PWA 安全区（普通浏览器里 env() 为 0，不影响布局） */
body.skin-b .content{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
body.skin-b .side{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
body.skin-b .mobile-home{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
body.skin-b .login{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
@media (max-width:900px){
  body.skin-b .top{padding-top:calc(10px + env(safe-area-inset-top))}
  body.skin-b .mobile-home-head{padding-top:calc(18px + env(safe-area-inset-top))}
  body.skin-b .main{padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
}

/* 手机端三张 KPI 卡并排，别一卡占一行把列表挤到下面 */
@media (max-width:900px){
  body.skin-b .cards.sh-cards3{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px}
  body.skin-b .cards.sh-cards3 .card{padding:10px 10px 12px}
  body.skin-b .cards.sh-cards3 .label{font-size:11px;line-height:1.3}
  body.skin-b .cards.sh-cards3 .value{font-size:22px;margin:4px 0 0}
}

/* 采购入库：批量选品结果列表 */
.in-pick-item{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer}
.in-pick-item:last-child{border-bottom:0}
.in-pick-item:hover{background:rgba(18,48,126,.05)}
.in-pick-item .out-sku-name{font-weight:700}