/* 亨邦 ERP（库存管理）样式
   ① 字体和颜色变量（从上游照抄过来的开头；亨邦这份单独维护，不用和别处一起改）
   ② 照搬来的库存页面原来的排版（颜色已全部换成上面的变量）
   ③ 上游这一层：侧栏、黑胶囊按钮、白卡片……（压在 ② 上面） */
@font-face { font-family: "MisuSans"; src: url("/fonts/misu-sans-400.woff2") format("woff2"); font-weight: 100 549; font-style: normal; font-display: swap; }
@font-face { font-family: "MisuSans"; src: url("/fonts/misu-sans-700.woff2") format("woff2"); font-weight: 550 900; font-style: normal; font-display: swap; }
:root {
  --page: #f2f1ef;          /* 浅灰底（② 的底色） */
  --panel: #ffffff;         /* 白卡片 */
  --panel-2: #f8f7f6;       /* 表头、卡片里次一级的底 */
  --line: #e6e3df;          /* 细线 */
  --line-strong: #c9c4be;   /* 重一点的线、按钮边 */
  --field: #bfb9b2;         /* 输入框边 */
  --ink: #000000;           /* 纯黑字（① 的白底纯黑） */
  --rose: #a7bcdc;          /* 淡藏青（亨邦，2026-11-03 负责人定「藏青色」）：小圆点、当前页图标、选中 */
  --rose-deep: #24406e;     /* 藏青：白底上当线 / 小图标 / 链接字（对白底对比度 10 以上） */
  --rose-tint: #e2e9f4;     /* 选中的浅藏青底（上面只放黑字） */
  --rose-wash: #f2f5fa;     /* 更浅的藏青：上面要放红 / 绿 / 橙字的地方（红冲行、菜单悬停）用它，对比度才够 4.5 */
  --chrome: #ffffff;        /* 侧栏、手机底栏：白底黑字 */
  --btn: #000000;           /* 主按钮：黑胶囊 */
  --btn-ink: #ffffff;
  --income: #c92a3e;
  --expense: #15803d;
  --warn: #b45309;
  --warn-bg: #fff4e0;
  --warn-line: #efcf9f;
  --empty: #8a8584;         /* 只给「没有值」的「—」和输入框提示字 */
  --focus: #24406e;
  --r-hero: 28px;
  --r-card: 20px;
  --r-inner: 12px;
  --pill: 999px;
  --sans: "MisuSans", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --num: var(--sans);
  --side-w: 224px;
  --top-h: 64px;
  --sub-h: 0px;             /* 手机上横向导航的高度（吸顶的东西要躲开它） */
}
/* ---------------- ② 原排版（底稿） ---------------- */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--panel-2);color:var(--ink);min-height:100vh;padding-bottom:40px}
body.lock-scroll{overflow:hidden;padding-bottom:0;height:100vh}
html.lock-scroll{overflow:hidden;height:100vh}
header{background:linear-gradient(135deg,var(--ink) 0%,var(--ink) 100%);color:var(--panel-2);padding:12px 14px;box-shadow:0 2px 8px rgba(0,0,0,.15);display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:10}
.logo-img{height:36px;width:auto;flex-shrink:0;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.title-block{flex:1;min-width:0}
h1{font-size:16px;letter-spacing:1px;font-weight:600}
.subtitle{font-size:11px;color:var(--rose-deep);margin-top:2px;letter-spacing:.5px}
.operator-badge{background:var(--rose-tint);border:1px solid var(--rose-deep);padding:5px 10px;border-radius:16px;font-size:12px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:4px;position:relative}
.user-menu{position:absolute;top:38px;right:0;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 36px rgba(0,0,0,.22);padding:5px 0;min-width:180px;display:none;z-index:60;color:var(--ink)}
.user-menu.show{display:block}
.user-menu .um-item{padding:9px 14px;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:8px;user-select:none}
.user-menu .um-item:hover{background:var(--rose-wash);color:var(--rose-deep)}
.user-menu .um-item.danger{color:var(--warn);border-top:1px solid var(--panel-2)}
.user-menu .um-item.danger:hover{background:var(--warn-bg);color:var(--warn)}
.user-menu .um-hdr{padding:8px 14px 6px;font-size:10px;color:var(--ink);border-bottom:1px solid var(--panel-2);line-height:1.3}
.user-menu .um-hdr b{color:var(--ink);font-size:12px;display:block;margin-bottom:2px}
.admin-badge{background:var(--rose-deep);color:var(--ink);padding:2px 6px;border-radius:8px;font-size:10px;font-weight:700}
.sync-indicator{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--rose)}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--rose);animation:pulse 2s infinite}
.sync-dot.off{background:var(--ink)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.scan-area{background:var(--panel-2);margin:0;padding:8px 12px;position:sticky;z-index:9}
.scan-area input{border-left:3px solid var(--rose-deep)}
.scan-area.readonly{border-left-color:var(--ink);opacity:.55;pointer-events:none}
.scan-area label{display:block;font-size:12px;color:var(--ink);margin-bottom:6px;font-weight:500}
.scan-area input{width:100%;padding:11px 14px;font-size:15px;border:2px solid var(--line);border-radius:7px;font-family:var(--num)}
.scan-area input:focus{outline:none;border-color:var(--rose-deep);box-shadow:0 0 0 3px var(--rose-tint)}
.scan-hint{font-size:10px;color:var(--ink);margin-top:5px;line-height:1.5}
.tab-bar{display:flex;background:#fff;margin:0 12px;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.05);position:sticky;z-index:8}
.tab-bar button{flex:1;padding:10px;border:none;background:#fff;cursor:pointer;font-size:13px;color:var(--ink);transition:all .2s}
.tab-bar button.active{background:var(--ink);color:var(--rose-deep);font-weight:600}
.tab-bar button.admin-tab{position:relative}
.tab-bar button.admin-tab .badge{position:absolute;top:4px;right:8px;background:var(--warn);color:#fff;font-size:10px;padding:1px 5px;border-radius:8px;font-weight:700}
.ico-svg{width:15px;height:15px;display:inline-block;vertical-align:-3px;flex-shrink:0}
.toolbar{padding:6px 12px;display:flex;gap:6px;flex-wrap:wrap;position:sticky;z-index:8;background:var(--panel-2)}
.btn{padding:9px 14px;border:none;border-radius:7px;cursor:pointer;font-size:13px;font-weight:500;transition:all .15s;font-family:inherit}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:var(--rose-deep);color:var(--ink);font-weight:600}
.btn-primary:hover:not(:disabled){background:var(--rose-deep);color:#fff}
.btn-secondary{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-secondary:hover:not(:disabled){background:var(--panel-2)}
.btn-green{background:var(--income);color:#fff}
.btn-red{background:var(--expense);color:#fff}
.product-list,.movements-list,.admin-list{padding:0 12px}
.product-card{background:#fff;border-radius:10px;padding:12px 14px;margin-bottom:8px;box-shadow:0 1px 3px rgba(0,0,0,.04);display:flex;align-items:center;gap:10px;transition:all .3s}
.product-card.flash{animation:flashHL 1.8s ease-out}
@keyframes flashHL{0%{background:var(--rose-tint);box-shadow:0 0 0 4px var(--rose-tint)}100%{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.04)}}
.product-thumb{width:50px;height:50px;border-radius:6px;background:var(--panel-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9c4be'><path d='M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z'/></svg>") center/24px no-repeat;flex-shrink:0;cursor:pointer;background-size:cover;object-fit:cover;border:1px solid var(--line)}
.product-thumb.has-img{background-size:cover}
.product-info{flex:1;min-width:0;cursor:pointer}
.product-name{font-size:14px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-meta{font-size:10px;color:var(--ink);margin-top:2px;font-family:var(--num)}
.last-action{font-size:10px;color:var(--rose-deep);margin-top:2px}
.stock-controls{display:flex;align-items:center;gap:5px;flex-shrink:0}
.stock-btn{width:30px;height:30px;border:1.5px solid var(--rose-deep);background:#fff;color:var(--rose-deep);border-radius:6px;font-size:17px;cursor:pointer;font-weight:bold;transition:all .15s}
.stock-btn:hover:not(:disabled),.stock-btn:active:not(:disabled){background:var(--rose-deep);color:#fff}
.stock-btn:disabled{opacity:.3;cursor:not-allowed}
.stock-display{min-width:54px;text-align:center;font-size:16px;font-weight:700;color:var(--ink);padding:4px 8px;background:var(--panel-2);border-radius:5px;cursor:pointer}
.stock-display.low{color:var(--warn);background:var(--warn-bg)}
.stock-display.zero{color:#fff;background:var(--warn)}
.view-switch{display:flex;background:var(--panel-2);margin:0 12px;padding-bottom:6px;position:sticky;z-index:7}
.view-switch button{padding:6px 14px;border:none;background:#fff;cursor:pointer;font-size:12px;color:var(--ink);transition:all .15s;font-family:inherit}
.view-switch button.active{background:var(--rose-deep);color:#fff;font-weight:600}
.search-bar{background:var(--panel-2);margin:0 12px;padding:0 0 8px;position:sticky;z-index:7}
.search-bar .search-row,.search-bar .search-actions{background:#fff;padding:8px;border-radius:8px}
.search-bar .search-actions{margin-top:6px}
.search-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px;margin-bottom:6px}
.search-row input,.search-row select{padding:7px 10px;border:1px solid var(--line);border-radius:5px;font-size:12px;font-family:inherit;min-width:0}
.search-row input:focus,.search-row select:focus{outline:none;border-color:var(--rose-deep)}
.search-range{display:flex;align-items:center;gap:4px}
.search-range input{flex:1;min-width:0}
.search-actions{display:flex;gap:5px;flex-wrap:wrap}
.search-actions .btn{padding:6px 12px;font-size:12px}
.search-chip{padding:5px 10px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink);border-radius:14px;cursor:pointer;font-size:11px;transition:all .15s;font-family:inherit}
.search-chip:hover{background:var(--rose-deep);color:#fff}
.search-chip.active{background:var(--rose-deep);color:#fff;border-color:var(--rose-deep)}
.product-table-wrap{margin:0 12px;background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,.05);overflow:visible}
.product-table-scroll{overflow:visible;max-width:100%}
.product-table{width:100%;border-collapse:collapse;font-size:12px;min-width:780px}
.product-table thead{background:var(--panel-2);position:sticky;top:0;z-index:6}
.product-table th{padding:9px 8px;text-align:left;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);white-space:nowrap;font-size:11px}
.product-table td{padding:9px 8px;border-bottom:1px solid var(--panel-2);vertical-align:middle}
.product-table tr.flash{animation:flashHL 1.8s ease-out}
.product-table tr:hover{background:var(--panel-2)}
.product-table .col-sn{width:42px;text-align:center;color:var(--ink);font-family:var(--num)}
.product-table .col-img{width:90px}
.product-table .col-img .pt{width:80px;height:80px;border-radius:6px;background:var(--panel-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9c4be'><path d='M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4.86 8.86l-3 3.87L9 13.14 6 17h12l-3.86-5.14z'/></svg>") center/32px no-repeat;background-size:cover;border:1px solid var(--line);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.06);transition:transform .15s}
.product-table .col-img .pt:hover{transform:scale(1.06);box-shadow:0 3px 8px var(--rose-tint)}
.product-table .col-code{font-family:var(--num);color:var(--ink);cursor:pointer}
.product-table .col-code:hover{color:var(--rose-deep);text-decoration:underline}
.product-table .col-name{min-width:160px;font-weight:500;color:var(--ink)}
.product-table .col-spec{color:var(--ink)}
.product-table .col-supplier{width:300px;max-width:300px;color:var(--ink);font-size:12px;word-break:break-all;line-height:1.4}
body.no-supplier-view .col-supplier{display:none!important}
body.no-supplier-view #movFilterSupplier,
body.no-supplier-view #qStyle,
body.no-supplier-view [data-tab="supplier"],
body.no-supplier-view #ep-supplier{display:none!important}
.product-table .col-stock{text-align:right;font-weight:700;font-family:var(--num);cursor:pointer;color:var(--ink)}
.product-table .col-stock.low{color:var(--warn)}
.product-table .col-stock.zero{color:#fff;background:var(--warn)}
.product-table .col-stock:hover{color:var(--rose-deep)}
.product-table .col-time{font-size:10px;color:var(--ink);font-family:var(--num);white-space:nowrap}
.product-table .col-actions{white-space:nowrap;text-align:center}
.product-table .col-actions button{margin:0 1px}
.product-table tfoot{background:var(--panel-2);font-weight:700}
.product-table tfoot td{padding:10px 8px;border-top:2px solid var(--rose-deep);color:var(--ink)}
.product-table .style-group-hdr{background:var(--rose-wash);font-weight:700;color:var(--rose-deep)}
.product-table .style-group-hdr td{padding:7px 8px;border-bottom:1px solid var(--line);cursor:pointer}
.empty-row td{text-align:center;padding:40px 20px;color:var(--ink)}
.modal-edit-product{background:#fff;width:95%;max-width:980px;height:90vh;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 12px 48px rgba(0,0,0,.3)}
.ep-header{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;background:var(--ink);color:var(--rose-deep)}
.ep-header h2{margin:0;font-size:16px;color:var(--rose-deep)}
.ep-header .ep-sku{color:var(--panel-2);font-family:var(--num);font-size:12px;margin-left:8px;opacity:.85}
.ep-close{background:none;border:none;color:var(--rose-deep);font-size:24px;cursor:pointer;padding:0 8px}
.ep-close:hover{color:#fff}
.ep-body{display:flex;flex:1;overflow:hidden;min-height:0}
.ep-sidebar{width:160px;background:var(--panel-2);border-right:1px solid var(--line);padding:14px 0;flex-shrink:0;overflow-y:auto}
.ep-tab{display:block;width:100%;padding:11px 16px;border:none;background:transparent;text-align:left;cursor:pointer;font-size:13px;color:var(--ink);border-left:3px solid transparent;transition:all .15s;font-family:inherit}
.ep-tab:hover{background:var(--rose-wash);color:var(--rose-deep)}
.ep-tab.active{background:#fff;color:var(--ink);border-left-color:var(--rose-deep);font-weight:600}
.ep-tab .ep-tab-icon{margin-right:6px}
.ep-content{flex:1;overflow-y:auto;padding:20px 24px;background:#fff;min-width:0}
.ep-section-title{font-size:14px;font-weight:600;color:var(--ink);border-left:3px solid var(--rose-deep);padding-left:8px;margin-bottom:14px}
.ep-field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin-bottom:18px}
.ep-field-grid.full-row>.ep-field{grid-column:span 2}
.ep-field{display:flex;flex-direction:column;gap:4px}
.ep-field label{font-size:11px;color:var(--ink);font-weight:500}
.ep-field label .req{color:var(--warn);margin-left:2px}
.ep-field input[type=text],.ep-field input[type=number],.ep-field input[type=date],.ep-field select,.ep-field textarea{padding:8px 10px;border:1px solid var(--line);border-radius:5px;font-size:13px;font-family:inherit;width:100%;box-sizing:border-box}
.ep-field input:focus,.ep-field select:focus,.ep-field textarea:focus{outline:none;border-color:var(--rose-deep)}
.ep-field textarea{resize:vertical;min-height:60px}
.ep-radio-row{display:flex;gap:14px;align-items:center;padding-top:4px}
.ep-radio-row label{display:flex;align-items:center;gap:4px;cursor:pointer;font-weight:normal;color:var(--ink);font-size:13px}
.ep-footer{padding:12px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;background:var(--panel-2)}
.lots-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.lots-table{width:100%;border-collapse:collapse;font-size:11px;min-width:900px}
.lots-table th{background:var(--panel-2);padding:7px 6px;border-bottom:1px solid var(--line);text-align:left;color:var(--ink);font-weight:600;white-space:nowrap;font-size:10px}
.lots-table td{padding:6px;border-bottom:1px solid var(--panel-2);vertical-align:middle;white-space:nowrap;font-size:11px}
.lots-table tr:hover{background:var(--panel-2)}
.lots-table .lt-actions{white-space:nowrap}
.lots-table .lt-actions button{padding:3px 7px;font-size:10px;border-radius:4px;border:1px solid var(--line);background:#fff;cursor:pointer;margin-right:3px;font-family:inherit}
.lots-table .lt-actions button:hover{background:var(--panel-2);color:var(--rose-deep)}
.lots-table .lt-actions button.del:hover{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
.lots-table tfoot td{background:var(--panel-2);font-weight:700;padding:9px 6px;border-top:2px solid var(--rose-deep)}
.lots-empty{text-align:center;padding:30px;color:var(--ink);background:var(--panel-2);border-radius:6px;font-size:12px}
.lots-scroll{overflow-x:auto;max-width:100%}
.lots-expired{color:var(--warn);font-weight:600}
.lots-warn{color:var(--warn)}
.compliance-tip{background:var(--rose-wash);border-left:3px solid var(--rose-deep);padding:8px 12px;border-radius:4px;font-size:11px;color:var(--ink);margin-bottom:14px;line-height:1.6}
@media(max-width:680px){
  .ep-body{flex-direction:column}
  .ep-sidebar{width:100%;display:flex;overflow-x:auto;padding:0}
  .ep-tab{flex-shrink:0;border-left:none;border-bottom:3px solid transparent;white-space:nowrap}
  .ep-tab.active{border-left:none;border-bottom-color:var(--rose-deep)}
  .ep-field-grid{grid-template-columns:1fr}
  .ep-field-grid.full-row>.ep-field{grid-column:span 1}
}
.modal-bg{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal-bg.active{display:flex}
.modal{background:#fff;border-radius:12px;padding:18px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto}
.modal h2{font-size:15px;margin-bottom:10px;color:var(--ink);font-weight:600}
.modal-input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font-size:14px;margin-bottom:8px;font-family:inherit}
.modal-input:focus{outline:none;border-color:var(--rose-deep)}
.modal-buttons{display:flex;gap:6px;margin-top:10px}
.modal-buttons .btn{flex:1}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--panel-2);padding:10px 18px;border-radius:8px;font-size:13px;z-index:200;animation:slideUp .25s;box-shadow:0 4px 16px rgba(0,0,0,.2);max-width:90%;text-align:center}
@keyframes slideUp{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
.empty{text-align:center;padding:50px 20px;color:var(--ink)}
.empty-icon{font-size:42px;margin-bottom:10px;opacity:.4}
.movement-item{background:#fff;padding:9px 12px;margin-bottom:5px;border-radius:7px;font-size:12px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.movement-qty{font-weight:700;font-size:14px;flex-shrink:0;margin-left:8px}
.movement-qty.positive{color:var(--income)}
.movement-qty.negative{color:var(--expense)}
.movement-text{min-width:0;flex:1}
.movement-text>div:first-child{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.movement-text>div:last-child{font-size:10px;color:var(--ink);margin-top:2px}
.mov-toolbar{padding:10px 12px 6px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;position:sticky;top:0;background:var(--panel-2);z-index:5}
.mov-toggle{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:9px;padding:2px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.mov-toggle button{border:0;background:transparent;padding:6px 11px;font-size:12px;font-weight:600;color:var(--ink);border-radius:7px;cursor:pointer;transition:all .2s}
.mov-toggle button.active{background:linear-gradient(135deg,var(--rose-deep),var(--rose-deep));color:#fff;box-shadow:0 1px 3px var(--rose-tint)}
.mov-toggle button:hover:not(.active){background:var(--rose-tint);color:var(--rose-deep)}
.mov-export-btn{border:1px solid var(--rose-deep);background:linear-gradient(135deg,var(--rose-deep),var(--rose-deep));color:#fff;padding:7px 14px;font-size:12px;font-weight:600;border-radius:9px;cursor:pointer;box-shadow:0 1px 3px var(--rose-tint);display:inline-flex;align-items:center;gap:4px;font-family:inherit}
.mov-export-btn:hover{filter:brightness(1.08)}
.mx-exp-list{max-height:46vh;overflow-y:auto;border:1px solid var(--line);border-radius:8px;padding:6px;margin:10px 0;background:var(--panel-2)}
.mx-exp-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;cursor:pointer;font-size:13px;user-select:none}
.mx-exp-item:hover{background:var(--rose-wash)}
.mx-exp-item input{width:16px;height:16px;accent-color:var(--rose-deep);flex-shrink:0;cursor:pointer}
.mx-exp-sku{font-family:var(--num);font-size:10px;color:var(--ink)}
.mx-exp-mini{border:1px solid var(--line);background:#fff;color:var(--ink);font-size:11px;padding:4px 10px;border-radius:6px;cursor:pointer;font-family:inherit}
.mx-exp-mini:hover{color:var(--rose-deep);border-color:var(--rose-deep)}
.mov-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:0 12px 8px}
@media(max-width:480px){.mov-kpi-grid{grid-template-columns:repeat(2,1fr)}}
.mov-kpi{background:#fff;border-radius:9px;padding:9px 10px;border-left:3px solid var(--rose-deep);min-width:0}
.mov-kpi-label{font-size:10px;color:var(--ink);line-height:1.2}
.mov-kpi-value{font-size:18px;font-weight:700;color:var(--ink);margin-top:3px;line-height:1.1}
.mov-kpi.up{border-left-color:var(--income)}
.mov-kpi.up .mov-kpi-value{color:var(--income)}
.mov-kpi.dn{border-left-color:var(--expense)}
.mov-kpi.dn .mov-kpi-value{color:var(--expense)}
.mov-kpi.net{border-left-color:var(--rose-deep)}
.mov-day-card{background:#fff;border-radius:10px;margin:6px 12px 10px;padding:0;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.04);border-left:3px solid var(--rose-deep)}
.mov-day-head{padding:11px 12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;background:linear-gradient(180deg,var(--panel-2),#fff)}
.mov-day-head:hover{background:linear-gradient(180deg,var(--panel-2),var(--panel-2))}
.mov-day-date{font-size:13px;font-weight:700;color:var(--ink)}
.mov-day-weekday{font-size:11px;color:var(--ink);margin-left:6px;font-weight:500}
.mov-day-net{font-size:12px;font-weight:700;padding:3px 9px;border-radius:9px}
.mov-day-net.up{background:var(--rose-wash);color:var(--income)}
.mov-day-net.dn{background:var(--panel-2);color:var(--expense)}
.mov-day-net.zero{background:var(--rose-tint);color:var(--rose-deep)}
.mov-day-caret{font-size:10px;color:var(--ink);margin-left:6px;transition:transform .2s}
.mov-day-card.open .mov-day-caret{transform:rotate(180deg)}
.mov-day-body{display:none;border-top:1px solid var(--line)}
.mov-day-card.open .mov-day-body{display:block}
.mov-prod-row{padding:9px 12px;border-bottom:1px solid var(--panel-2)}
.mov-prod-row:last-child{border-bottom:0}
.mov-prod-name{font-size:12px;font-weight:600;color:var(--ink)}
.mov-prod-sku{font-size:10px;color:var(--ink);font-family:var(--num);margin-left:4px;font-weight:400}
.mov-prod-stats{font-size:11px;margin-top:3px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mov-prod-up{color:var(--income);font-weight:600}
.mov-prod-dn{color:var(--expense);font-weight:600}
.mov-prod-net{color:var(--ink);font-weight:700;padding:1px 7px;border-radius:7px;background:var(--rose-tint)}
.mov-prod-ops{font-size:10px;color:var(--ink);margin-top:3px}
.mov-prod-ops span{display:inline-block;background:var(--rose-tint);color:var(--rose-deep);padding:1px 6px;border-radius:6px;margin-right:4px;margin-top:2px}
.mov-prod-detail-btn{font-size:10px;color:var(--rose-deep);cursor:pointer;margin-top:4px;display:inline-block;user-select:none}
.mov-prod-detail-btn:hover{text-decoration:underline}
.mov-prod-detail{display:none;margin-top:5px;padding:6px 8px;background:var(--panel-2);border-radius:6px}
.mov-prod-row.open .mov-prod-detail{display:block}
.mov-prod-detail .di{font-size:10px;color:var(--ink);line-height:1.6;padding:2px 0;border-bottom:1px dashed var(--line)}
.mov-prod-detail .di:last-child{border-bottom:0}
.mov-prod-detail .di b{color:var(--ink);font-weight:600}
.mov-matrix-wrap{margin:6px 12px 10px;background:#fff;border-radius:10px;overflow:auto;box-shadow:0 1px 3px rgba(0,0,0,.04);max-height:65vh;-webkit-overflow-scrolling:touch}
.mov-matrix{width:100%;border-collapse:collapse;font-size:11px;min-width:480px}
.mov-matrix th,.mov-matrix td{padding:7px 9px;text-align:center;border-bottom:1px solid var(--panel-2);border-right:1px solid var(--panel-2);white-space:nowrap}
.mov-matrix thead th{background:linear-gradient(180deg,var(--panel-2),var(--panel-2));color:var(--ink);font-weight:700;position:sticky;top:0;z-index:2}
.mov-matrix thead{position:sticky;top:0;z-index:5}
.mov-matrix th.row-date{position:sticky;left:0;background:var(--panel-2);z-index:3;text-align:left;font-weight:600;color:var(--ink);padding-left:10px}
.mov-matrix thead th.row-date{z-index:4;background:linear-gradient(180deg,var(--panel-2),var(--panel-2))}
.mov-matrix tfoot td{font-weight:700;background:var(--panel-2)}
.mov-matrix tfoot td.row-date{background:var(--panel-2);color:var(--rose-deep)}
.mov-mx-up{color:var(--income);font-weight:600}
.mov-mx-dn{color:var(--expense);font-weight:600;margin-left:2px}
.mov-mx-zero{color:var(--ink)}
.mov-sys-badge{display:inline-block;font-size:8.5px;font-weight:700;padding:1px 5px;border-radius:3px;background:var(--ink);color:#fff;margin-left:3px;vertical-align:1px;letter-spacing:.2px}
.mov-lot-chip{display:inline-block;font-size:9.5px;font-weight:700;padding:1px 6px;border-radius:3px;background:var(--line);color:var(--rose-deep);margin-left:5px;vertical-align:1px;font-family:var(--num);letter-spacing:.2px}
.mov-lot-chip.none{background:var(--panel-2);color:var(--ink);font-weight:600}
.mov-mx-lot{display:inline-block;font-size:8.5px;font-weight:700;padding:0 4px;border-radius:2px;background:var(--line);color:var(--rose-deep);margin-left:3px;vertical-align:1px;letter-spacing:.2px}
.mov-mx-lot.pre{background:var(--panel-2);color:var(--ink);font-weight:600}
.mov-lot-chip.warn,.mov-mx-lot.warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);font-weight:700}
.mov-lot-chip.inf,.mov-mx-lot.inf{background:var(--panel-2);border:1px dashed var(--rose-deep)}
.lot-inf-mark{font-size:7.5px;margin-left:2px;padding:0 2px;border-radius:2px;background:var(--rose-deep);color:#fff;font-weight:700;vertical-align:1px}
.mov-sys-badge.adj{background:var(--warn)}
.mov-sys-wrap{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:var(--panel-2);border-radius:18px;padding:4px 11px;color:var(--rose-deep);font-weight:600;font-size:12px;cursor:pointer;white-space:nowrap}
.mov-sys-wrap input{margin:0;cursor:pointer}
.mov-sys-wrap #movSysCount{color:var(--warn);font-weight:500}
.mov-mx-row-total{background:var(--rose-tint);font-weight:700;color:var(--ink)}
.mov-matrix tbody tr.mx-data-row{height:60px;max-height:60px}
.mov-matrix tbody tr.mx-data-row td{max-height:60px;overflow:hidden;vertical-align:top}
.mov-matrix tbody tr.mx-data-row td > div{max-height:60px;overflow:hidden}
.mov-matrix tbody tr.mx-spacer th{padding:0!important;border:0!important;background:var(--panel-2)!important}
.mov-matrix tbody tr.mx-spacer td{padding:0!important;border:0!important;background:transparent!important}
.mov-virt-wrap{position:relative;max-height:65vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:transparent}
.mov-virt-spacer{width:100%;position:relative}
.mov-virt-list{position:absolute;top:0;left:0;right:0;will-change:transform}
.mov-virt-list .movement-item{height:60px;box-sizing:border-box;margin:0 12px 4px;border-radius:8px}
.mov-daily-toolbar{padding:4px 12px 8px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.mov-daily-toolbar .mov-daily-info{font-size:11px;color:var(--ink)}
.mov-daily-toolbar .mov-daily-toggle{font-size:11px;padding:6px 14px;background:var(--panel-2);border:1px solid var(--line);border-radius:7px;cursor:pointer;color:var(--rose-deep);font-family:inherit}
.mov-daily-toolbar .mov-daily-toggle:hover{background:var(--rose-wash);border-color:var(--rose-deep)}
.mov-filter-row{padding:0 12px 8px;display:flex;flex-wrap:wrap;gap:6px}
.mov-filter-row select,.mov-filter-row input{font-size:11px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink)}
.mov-filter-row input{flex:1;min-width:120px}
#movFilterReason{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>');background-repeat:no-repeat;background-position:8px center;background-size:13px;padding-left:26px}
.footer-info{text-align:center;padding:18px;font-size:10px;color:var(--ink);font-family:var(--num)}
.access-error{color:var(--warn-line);font-size:12px;margin-top:8px;min-height:16px}
.pending-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(245,240,232,.98);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:90;padding:30px}
.pending-screen.hide{display:none}
.pending-screen .pi{font-size:60px;margin-bottom:20px}
.pending-screen h2{font-size:18px;color:var(--ink);margin-bottom:10px}
.pending-screen p{font-size:13px;color:var(--ink);text-align:center;line-height:1.7;max-width:380px}
.pending-screen .btn{margin-top:20px}
.img-upload-area{border:2px dashed var(--line);border-radius:8px;padding:14px;text-align:center;cursor:pointer;margin-bottom:8px;font-size:12px;color:var(--ink);transition:all .15s}
.img-upload-area:hover{border-color:var(--rose-deep);color:var(--rose-deep);background:var(--rose-wash)}
.img-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px;margin-bottom:8px}
.img-thumb{position:relative;width:100%;aspect-ratio:1;border-radius:6px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line)}
.img-thumb img{width:100%;height:100%;object-fit:cover;cursor:pointer}
.img-thumb-del{position:absolute;top:2px;right:2px;width:20px;height:20px;background:var(--panel-2);color:#fff;border:none;border-radius:50%;font-size:14px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center}
.lightbox{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;z-index:200;flex-direction:column}
.lightbox.active{display:flex}
.lb-main{max-width:90%;max-height:80%;object-fit:contain}
.lb-info{color:#fff;margin-top:12px;font-size:13px}
.lb-close{position:absolute;top:16px;right:20px;background:rgba(255,255,255,.15);color:#fff;border:none;width:40px;height:40px;border-radius:50%;font-size:22px;cursor:pointer}
.lb-original{position:absolute;top:16px;right:76px;z-index:2}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.15);color:#fff;border:none;width:46px;height:46px;border-radius:50%;font-size:22px;cursor:pointer}
.lb-prev{left:20px}.lb-next{right:20px}
.lb-thumbs{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;gap:6px;padding:0 20px;overflow-x:auto}
.lb-thumbs img{width:50px;height:50px;object-fit:cover;border-radius:4px;border:2px solid transparent;cursor:pointer}
.lb-thumbs img.active{border-color:var(--rose-deep)}
@media(max-width:380px){.operator-badge{font-size:11px;padding:4px 8px}.sync-indicator{display:none}h1{font-size:14px}.scan-hint{display:none}}
.online-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 4px;background:var(--rose-tint);color:var(--panel-2);border-radius:18px;font-size:11px;cursor:pointer;position:relative;margin-right:6px;user-select:none;transition:background .15s;border:1px solid var(--rose-tint)}
.online-badge:hover{background:var(--rose-tint)}
.online-badge .dot-live{width:7px;height:7px;border-radius:50%;background:var(--rose);box-shadow:0 0 8px rgba(74,222,128,.7);animation:pulseDot 1.8s infinite;margin-left:6px}
.online-badge .count{font-weight:700;color:var(--panel-2)}
.online-badge .avatars{display:inline-flex;align-items:center}
.online-badge .avatars .avatar{width:22px;height:22px;border-radius:50%;border:2px solid var(--ink);font-size:10px;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;margin-left:-6px;font-family:var(--sans);letter-spacing:0}
.online-badge .avatars .avatar:first-child{margin-left:0}
.online-badge .avatars .more{width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:9px;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;margin-left:-6px;font-weight:700}
@keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.55;transform:scale(.78)}}
.online-badge .avatars .avatar.admin{box-shadow:0 0 0 2px var(--rose);position:relative;overflow:visible}
.online-badge .admin-status{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;background:linear-gradient(135deg,var(--rose),var(--rose-deep));color:var(--ink);border-radius:9px;font-size:10px;font-weight:700;margin-left:4px;line-height:1.5}
.online-popup{position:absolute;top:38px;right:0;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 36px rgba(0,0,0,.22);padding:6px 0;min-width:240px;display:none;z-index:60;color:var(--ink)}
.online-popup.show{display:block}
.online-popup .hdr{padding:7px 14px 5px;font-size:11px;color:var(--ink);border-bottom:1px solid var(--panel-2);margin-bottom:4px}
.online-popup .user{padding:8px 14px;font-size:12px;color:var(--ink);display:flex;align-items:center;gap:8px}
.online-popup .user.self{color:var(--rose-deep);font-weight:600;background:var(--rose-wash)}
.online-popup .user .avatar{width:26px;height:26px;border-radius:50%;font-size:11px;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:var(--sans)}
.online-popup .user .avatar.admin{box-shadow:0 0 0 2px var(--rose)}
.online-popup .user .name-line{display:flex;flex-direction:column;flex:1;min-width:0}
.online-popup .user .name-line .editing{font-size:10px;color:var(--warn);font-weight:500;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:170px}
.online-popup .user .role{font-size:10px;margin-left:auto;background:var(--panel-2);color:var(--ink);padding:1px 6px;border-radius:8px;flex-shrink:0}
.online-popup .user.admin .role{background:var(--rose-deep);color:#fff}
.editing-by-other{display:inline-block;padding:1px 6px;background:var(--rose-tint);color:var(--rose-deep);border-radius:10px;font-size:10px;font-weight:600;margin-left:6px;animation:pulseDot 2s infinite;vertical-align:middle}
.editing-by-other .avatar{width:14px;height:14px;border-radius:50%;font-size:8px;color:#fff;font-weight:700;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-right:3px}
.history-tooltip{position:fixed;background:var(--ink);color:var(--panel-2);padding:12px 14px;border-radius:8px;box-shadow:0 12px 36px rgba(0,0,0,.4);max-width:380px;min-width:300px;font-size:11px;z-index:100;display:none;pointer-events:none;border:1px solid var(--rose-tint)}
.history-tooltip.show{display:block}
.history-tooltip .ht-title{font-size:11px;font-weight:700;color:var(--rose-deep);margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--ink)}
.history-tooltip .ht-row{display:flex;align-items:flex-start;gap:8px;padding:5px 0;border-bottom:1px dotted var(--ink);font-family:var(--num)}
.history-tooltip .ht-row:last-child{border-bottom:none}
.history-tooltip .ht-row .ht-time{color:var(--ink);flex-shrink:0;font-size:10px;min-width:108px}
.history-tooltip .ht-row .ht-op{color:var(--rose);font-weight:600;flex-shrink:0;min-width:50px}
.history-tooltip .ht-row .ht-chg{color:var(--panel-2);flex:1;font-size:10px}
.history-tooltip .ht-row .ht-chg .qty-pos{color:var(--rose);font-weight:700}
.history-tooltip .ht-row .ht-chg .qty-neg{color:var(--expense);font-weight:700}
.history-tooltip .ht-empty{color:var(--ink);padding:8px 4px;text-align:center}
.history-tooltip .ht-loading{color:var(--ink);padding:6px 4px;text-align:center}
.product-table .col-time.has-history{cursor:help;border-bottom:1px dotted var(--rose-deep)}
.product-table .col-time.has-history:hover{background:var(--rose-wash);color:var(--rose-deep)}
.cat-select{position:relative;display:inline-flex;align-items:center;gap:6px;padding:5px 28px 5px 11px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px;cursor:pointer;font-size:11px;color:var(--ink);transition:all .15s;user-select:none;font-family:inherit;min-width:140px}
.cat-select:hover{background:var(--rose-wash);border-color:var(--rose-deep)}
.cat-select.active{background:var(--rose-deep);color:#fff;border-color:var(--rose-deep)}
.cat-select::after{content:'▾';position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:10px}
.cat-select .placeholder{color:var(--ink)}
.cat-select.active .placeholder{color:#fff}
.cat-popup{position:fixed;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 36px rgba(0,0,0,.22);padding:5px 0;min-width:240px;display:none;z-index:60;max-height:60vh;overflow-y:auto}
.cat-popup.show{display:block}
.cat-popup .opt{display:flex;align-items:center;gap:7px;padding:6px 12px;cursor:pointer;font-size:12px;color:var(--ink);user-select:none}
.cat-popup .opt:hover{background:var(--rose-wash)}
.cat-popup .opt input[type=checkbox]{cursor:pointer;margin:0;accent-color:var(--rose-deep);width:14px;height:14px}
.cat-popup .opt-all{border-bottom:1px solid var(--panel-2);font-weight:600;color:var(--rose-deep);margin-bottom:3px;padding-bottom:7px}
.cat-popup .opt-clear{border-top:1px solid var(--panel-2);color:var(--ink);margin-top:3px;padding-top:7px;justify-content:center;font-size:11px}
.cat-popup .opt-clear:hover{color:var(--rose-deep)}
.product-table .col-expand{width:28px;text-align:center;cursor:pointer;color:var(--rose-deep);font-size:12px;user-select:none}
.product-table .col-expand:hover{color:var(--rose-deep)}
.product-table tr.expanded-row>td{padding:0;background:var(--panel-2)}
.sku-detail-wrap{padding:8px 12px 12px 50px}
.sku-detail-table{width:100%;border-collapse:collapse;font-size:11px;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.sku-detail-table thead{background:var(--panel-2)}
.sku-detail-table th{padding:6px 8px;text-align:left;font-weight:600;color:var(--rose-deep);border-bottom:1px solid var(--line);font-size:10px;white-space:nowrap}
.sku-detail-table td{padding:6px 8px;border-bottom:1px solid var(--panel-2);color:var(--ink)}
.sku-detail-table tbody tr:last-child td{border-bottom:none}
.sku-detail-table .num{text-align:right;font-family:var(--num);font-weight:700}
.sku-detail-table .expired{color:var(--warn);font-weight:700}
.sku-detail-table .expiring-soon{color:var(--warn);font-weight:600}
.oplog-box{margin:0 12px 12px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.05);padding:12px}
.oplog-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.oplog-head h3{margin:0;font-size:14px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:5px}
.oplog-sum{font-size:12px;font-weight:700;color:var(--rose-deep)}
.oplog-tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-left:auto}
.oplog-tools select,.oplog-tools input{border:1px solid var(--line);border-radius:6px;padding:5px 7px;font-size:12px;color:var(--ink);background:#fff}
.oplog-mini{border:1px solid var(--line);background:var(--rose-wash);color:var(--rose-deep);font-weight:700;font-size:12px;padding:5px 10px;border-radius:6px;cursor:pointer}
.oplog-mini:hover{background:var(--panel-2)}
.oplog-list{max-height:56vh;overflow-y:auto;border:1px solid var(--panel-2);border-radius:6px;background:var(--panel-2)}
.oplog-row{padding:8px 10px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink)}
.oplog-row:last-child{border-bottom:none}
.oplog-r1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.oplog-r1 span{white-space:nowrap}
.oplog-time{font-family:var(--num);font-weight:700;color:var(--ink)}
.oplog-tag{font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px;color:#fff}
.oplog-tag.fail{background:var(--warn)}
.oplog-tag.warn{background:var(--rose-deep)}
.oplog-what{font-weight:700;color:var(--ink)}
.oplog-who{font-weight:600;color:var(--ink)}
.oplog-sku{font-family:var(--num);font-weight:700;color:var(--rose-deep)}
.oplog-detail{margin-top:3px;line-height:1.5;color:var(--ink);white-space:normal}
.oplog-hot{background:var(--warn-bg);border-left:3px solid var(--warn)}
.oplog-none{padding:18px;text-align:center;font-size:12px;color:var(--ink)}
@media(max-width:540px){
  #mainHeader{gap:6px;padding:10px 12px}
  #mainHeader .logo-img{height:26px}
  #mainHeader .title-block{flex:1 1 auto;min-width:100px}
  #mainHeader h1{font-size:14px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #mainHeader .subtitle{display:none}
  #mainHeader .sync-indicator{display:none}
  #mainHeader .online-badge{flex:0 1 auto;min-width:0;max-width:76px;
    padding:3px 8px 3px 3px;margin-right:0;font-size:10px}
  #mainHeader .online-badge .avatars{overflow:hidden;max-width:34px}
  #mainHeader .online-badge .admin-status{display:none}
  #mainHeader .operator-badge{flex:0 1 auto;min-width:0;max-width:96px;
    white-space:nowrap;font-size:11px;padding:5px 8px}
  #mainHeader .operator-badge>#operatorBadgeText{display:block;max-width:70px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:400px){
  #mainHeader h1{font-size:13px}
}
@media(max-width:540px){
  .product-table-wrap{margin:0 10px;background:transparent;box-shadow:none;border-radius:0}
  .product-table-scroll{overflow:visible}
  .product-table{display:block;width:100%;min-width:0;font-size:13px;border-collapse:separate}
  .product-table>thead{display:none}
  .product-table>tbody{display:block}
  .product-table tbody tr[data-pid]{
    display:grid;
    grid-template-columns:72px minmax(0,1fr) auto;
    grid-template-areas:
      "img  name  name"
      "img  code  spec"
      "img  sup   sup"
      "stk  stk   act"
      "tim  tim   tim";
    align-items:center;
    gap:3px 10px;
    position:relative;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px;
    margin-bottom:10px;
    box-shadow:0 2px 6px rgba(0,0,0,.04);
  }
  .product-table tbody tr[data-pid]:hover{background:#fff}
  .product-table tbody tr[data-pid]>td{display:block;border:none;padding:0;vertical-align:initial}
  .product-table tbody tr[data-pid]>td.col-sn{display:none}
  .product-table tbody tr[data-pid]>td.col-expand{
    position:absolute;top:6px;right:8px;width:auto;font-size:13px;line-height:1;padding:4px}
  .product-table tbody tr[data-pid]>td.col-img{grid-area:img;width:auto}
  .product-table tbody tr[data-pid]>td.col-img .pt{width:72px;height:72px}
  .product-table tbody tr[data-pid]>td.col-name{
    grid-area:name;min-width:0;font-size:14px;font-weight:600;line-height:1.35;padding-right:22px}
  .product-table tbody tr[data-pid]>td:nth-child(5){
    grid-area:code;min-width:0;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .product-table tbody tr[data-pid]>td.col-spec{
    grid-area:spec;min-width:0;font-size:11px;color:var(--ink);text-align:right}
  .product-table tbody tr[data-pid]>td.col-supplier{
    grid-area:sup;width:auto;max-width:none;font-size:11px;line-height:1.35;
    word-break:normal;overflow-wrap:anywhere}
  .product-table tbody tr[data-pid]>td.col-supplier:not(:empty)::before{
    content:'供应商 ';color:var(--ink);font-size:10px}
  .product-table tbody tr[data-pid]>td.col-stock{
    grid-area:stk;text-align:left;font-size:21px;line-height:1.1;
    margin-top:6px;padding-top:8px;border-top:1px dashed var(--line)}
  .product-table tbody tr[data-pid]>td.col-stock.zero{background:transparent;color:var(--warn)}
  .product-table tbody tr[data-pid]>td.col-actions{
    grid-area:act;text-align:right;white-space:nowrap;
    margin-top:6px;padding-top:8px;border-top:1px dashed var(--line)}
  .product-table tbody tr[data-pid]>td.col-actions .stock-btn{
    width:34px!important;height:34px!important;font-size:16px!important;margin:0 2px}
  .product-table tbody tr[data-pid]>td.col-time{
    grid-area:tim;font-size:10px;color:var(--ink);border-bottom:none}
  .product-table tbody tr[data-pid]>td.col-time::before{content:'更新 ';color:var(--ink)}
  .product-table tbody tr[data-pid]>td.col-time>div{display:inline;margin-left:4px}
  .product-table tbody tr.empty-row{display:block;background:#fff;border:1px solid var(--line);
    border-radius:12px;margin-bottom:10px}
  .product-table tbody tr.empty-row>td{display:block;padding:28px 16px;text-align:center;border:none}
  .product-table tbody tr.style-group-hdr{display:block;background:var(--rose-wash);
    border:1px solid var(--line);border-radius:10px;margin:0 0 8px}
  .product-table tbody tr.style-group-hdr>td{display:block;padding:9px 12px;border:none;
    font-size:12px;line-height:1.4}
  .product-table tbody tr.expanded-row{display:block;background:var(--panel-2);
    border:1px solid var(--line);border-radius:10px;margin:-6px 0 10px;overflow-x:auto}
  .product-table tbody tr.expanded-row>td{display:block;padding:0;border:none}
  .product-table tbody tr.expanded-row .sku-detail-wrap{padding:8px 10px 10px}
  .product-table tfoot{display:block;background:transparent}
  .product-table tfoot tr{display:flex;align-items:center;justify-content:space-between;gap:8px;
    background:var(--ink);color:var(--panel-2);border-radius:12px;padding:12px 14px}
  .product-table tfoot td{display:block;padding:0;border:none;color:inherit;
    text-align:left!important;font-size:13px}
}
/* ================================================================================================
   上游这一层（压在底稿上面）：照上游 fin 的样子 —— 浅灰底、白卡片、黑胶囊按钮、主色只做标记（亨邦是藏青）、思源黑体；
   ⛔ 规矩同上游 fin：增加 / 入库 = 红 var(--income)，减少 / 出库 = 绿 var(--expense)，提醒 = 橙 var(--warn)；
      不用灰色字、不用 opacity 淡化文字；数字等宽；只在浮起来的东西上用阴影
   电脑（> 820px）：左边白色侧栏（logo + 商品库存 / 出入库流水 / 管理），右边顶栏 + 内容
   手机（≤ 820px）：侧栏收成顶栏下面一排横着的胶囊
   ================================================================================================ */
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--sans); background: var(--page); color: var(--ink); font-variant-numeric: tabular-nums lining-nums; padding-bottom: 0; }
button, input, select, textarea { font-family: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::placeholder { color: var(--empty); opacity: 1; }
.ico-svg { color: inherit; }

/* ---------- 侧栏（电脑） ---------- */
body::before { content: ""; position: fixed; left: 0; top: 0; bottom: 0; width: var(--side-w); background: var(--chrome); border-right: 1px solid var(--line); z-index: 9; }
.side-brand { position: fixed; left: 0; top: 0; width: var(--side-w); height: var(--top-h); display: flex; align-items: center; gap: 10px; padding: 0 14px 0 18px; z-index: 12; }
.sb-logo { display: block; height: 27px; width: auto; flex: none; }
.sb-sub { flex: none; padding-left: 10px; border-left: 1px solid var(--line-strong); font-size: 13px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.tab-bar { position: fixed; left: 0; top: var(--top-h); bottom: 0; width: var(--side-w); margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 2px; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; z-index: 12; }
.tab-bar button { flex: none; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 14px; border: 0; border-radius: var(--pill); background: none; color: var(--ink); font-size: 15px; text-align: left; transition: none; }
.tab-bar button .ico-svg { width: 18px; height: 18px; }
.tab-bar button:hover { background: var(--page); }
.tab-bar button.active { background: var(--ink); color: #fff; font-weight: 700; }
.tab-bar button.active .ico-svg { color: var(--rose); }
.tab-bar button.admin-tab .badge { position: static; margin-left: auto; background: var(--warn); color: #fff; font-size: 12px; padding: 0 8px; border-radius: var(--pill); font-weight: 700; }

/* ---------- 顶栏 ---------- */
/* 顶栏压在导航上面（z 20 > 导航 12）：手机上导航是顶栏下面那排胶囊，原来 10 < 12 ⇒ 顶栏弹出的账号菜单 / 在线名单被那排按钮挡住、「切换用户」点不到（负责人 10-21 截图）；弹窗 100 仍在最上 */
header#mainHeader { margin-left: var(--side-w); height: var(--top-h); padding: 0 26px; gap: 12px; background: var(--page); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: none; z-index: 20; }
header#mainHeader .logo-img { display: none; height: 24px; width: auto; filter: none; }
header#mainHeader h1 { font-size: 20px; font-weight: 900; letter-spacing: 1px; }
header#mainHeader .subtitle { color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: 0; margin-top: 1px; }
.operator-badge { background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink); padding: 6px 12px; border-radius: var(--pill); font-size: 13px; font-weight: 700; }
.operator-badge:hover { border-color: var(--ink); }
.admin-badge { background: var(--ink); color: #fff; padding: 1px 8px; border-radius: var(--pill); font-size: 11px; font-weight: 700; }
.user-menu { top: 40px; border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); padding: 6px; color: var(--ink); }
.user-menu .um-hdr { font-size: 12px; color: var(--ink); border-bottom-color: var(--line); }
.user-menu .um-item { border-radius: 10px; font-size: 14px; font-weight: 700; }
.user-menu .um-item:hover { background: var(--rose-wash); color: var(--ink); }
.user-menu .um-item.danger { color: var(--warn); border-top: 0; }
.user-menu .um-item.danger:hover { background: var(--warn-bg); color: var(--warn); }
.sync-indicator { color: var(--ink); font-size: 12px; font-weight: 600; }
.sync-dot { background: var(--rose-deep); }
.sync-dot.off { background: var(--line-strong); animation: none; }
.online-badge { background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink); }
.online-badge:hover { background: var(--panel); border-color: var(--ink); }
.online-badge .count { color: var(--ink); }
.online-badge .dot-live { background: var(--rose-deep); box-shadow: none; }
.online-badge .avatars .avatar, .online-badge .avatars .more { border-color: var(--panel); font-family: var(--sans); }
.online-badge .avatars .avatar.admin, .online-popup .user .avatar.admin { box-shadow: 0 0 0 2px var(--rose); }
.online-badge .admin-status { background: var(--ink); color: #fff; }
.online-popup { border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); }
.online-popup .hdr { color: var(--ink); font-weight: 700; border-bottom-color: var(--line); }
.online-popup .user.self { color: var(--ink); background: var(--rose-wash); }
.online-popup .user .name-line .editing { color: var(--warn); }
.online-popup .user .role { background: var(--panel-2); color: var(--ink); }
.online-popup .user.admin .role { background: var(--ink); color: #fff; }
.editing-by-other { background: var(--rose-tint); color: var(--ink); animation: none; }

/* ---------- 内容区 ---------- */
#mainContent { margin-left: var(--side-w); padding: 4px 14px 40px; }
.scan-area { background: var(--page); padding: 14px 12px 10px; }
.scan-area label { color: var(--ink); font-size: 13px; font-weight: 700; }
.scan-area input { border: 1px solid var(--field); border-left: 1px solid var(--field); border-radius: var(--r-inner); background: var(--panel); font-family: var(--num); font-size: 16px; padding: 11px 16px; }
.scan-area input:focus { border-color: var(--focus); box-shadow: none; outline: 2px solid var(--focus); outline-offset: 0; }
.scan-area.readonly { opacity: 1; }
.scan-area.readonly input { background: var(--page); }
.scan-hint { color: var(--ink); font-size: 12px; }
.toolbar { background: var(--page); padding: 6px 12px 10px; gap: 8px; }
.footer-info { color: var(--ink) !important; font-size: 12px !important; font-family: var(--sans); }

/* 按钮：主按钮 = 黑胶囊；次按钮 = 白胶囊细边；危险 = 白底橙字 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 18px; border-radius: var(--pill); font-size: 14px; font-weight: 700; transition: none; white-space: nowrap; }
.btn-primary, .btn-in, .btn-out, .btn-green { background: var(--btn); color: var(--btn-ink); border: 1px solid var(--btn); }
.btn-primary:hover:not(:disabled), .btn-in:hover:not(:disabled), .btn-out:hover:not(:disabled), .btn-green:hover:not(:disabled) { background: #262626; color: #fff; }
.btn-secondary { background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--panel); border-color: var(--ink); }
.btn-red { background: var(--panel); color: var(--warn); border: 1px solid var(--warn); }
.btn-red:hover:not(:disabled) { background: var(--warn-bg); }
.btn:disabled { opacity: 1; background: var(--page); color: var(--ink); border: 1px dashed var(--line-strong); cursor: not-allowed; }
.stock-btn { border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); border-radius: var(--pill); font-weight: 700; }
.stock-btn:hover:not(:disabled), .stock-btn:active:not(:disabled) { background: var(--ink); border-color: var(--ink); color: #fff; }
.stock-btn:disabled { opacity: 1; background: var(--page); border-style: dashed; cursor: not-allowed; }
.search-chip { background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--pill); font-size: 13px; font-weight: 700; padding: 5px 12px; }
.search-chip:hover { background: var(--panel); color: var(--ink); border-color: var(--ink); }
.search-chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* 视图切换 / 流水三视图：白胶囊组，选中 = 黑 */
.view-switch { background: var(--page); margin: 0 12px; padding: 4px 0 10px; gap: 0; }
.view-switch button { background: var(--panel); color: var(--ink); font-size: 14px; font-weight: 700; padding: 7px 16px; border: 1px solid var(--line); }
.view-switch button:first-child { border-radius: var(--pill) 0 0 var(--pill); }
.view-switch button:last-child { border-radius: 0 var(--pill) var(--pill) 0; }
.view-switch button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.mov-toolbar { background: var(--page); padding: 12px 12px 8px; }
.mov-toggle { background: var(--panel); border: 1px solid var(--line); border-radius: var(--pill); padding: 3px; box-shadow: none; }
.mov-toggle button { color: var(--ink); font-size: 14px; border-radius: var(--pill); padding: 6px 14px; }
.mov-toggle button.active { background: var(--ink); color: #fff; box-shadow: none; }
.mov-toggle button.active .ico-svg { color: var(--rose); }
.mov-toggle button:hover:not(.active) { background: var(--page); color: var(--ink); }
.mov-export-btn { background: var(--btn); border: 1px solid var(--btn); color: #fff; border-radius: var(--pill); box-shadow: none; font-size: 14px; padding: 7px 16px; }
.mov-export-btn:hover { filter: none; background: #262626; }

/* 搜索栏 */
.search-bar { background: var(--page); margin: 0 12px; }
.search-bar .search-row, .search-bar .search-actions { background: var(--panel); border-radius: var(--r-card); padding: 12px 14px; }
.search-row input, .search-row select, .mov-filter-row select, .mov-filter-row input, .oplog-tools select, .oplog-tools input { border: 1px solid var(--field); border-radius: var(--r-inner); background: var(--panel); color: var(--ink); font-size: 14px; padding: 7px 12px; }
.search-row input:focus, .search-row select:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 0; }
.cat-select { background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--pill); font-size: 13px; font-weight: 700; color: var(--ink); padding: 5px 28px 5px 12px; }
.cat-select:hover { background: var(--panel); border-color: var(--ink); }
.cat-select.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.cat-select .placeholder { color: var(--ink); }
.cat-popup { border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); padding: 6px; }
.cat-popup .opt { border-radius: 10px; font-size: 14px; }
.cat-popup .opt:hover { background: var(--rose-wash); }
.cat-popup .opt input[type=checkbox] { accent-color: var(--ink); }
.cat-popup .opt-all { color: var(--ink); }
.cat-popup .opt-clear { color: var(--ink); }

/* 商品表：白卡片，表头浅底，不加阴影 */
.product-table-wrap { margin: 0 12px; background: var(--panel); border-radius: var(--r-card); box-shadow: none; overflow: visible; }
.product-table { font-size: 14px; }
.product-table thead { background: var(--panel-2); }
.product-table th { color: var(--ink); font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--line-strong); padding: 11px 10px; }
.product-table thead tr:first-child th:first-child { border-top-left-radius: var(--r-card); }
.product-table thead tr:first-child th:last-child { border-top-right-radius: var(--r-card); }
.product-table td { border-bottom: 1px solid var(--line); padding: 10px; }
.product-table tr:hover { background: #fbf8f7; }
.product-table .col-sn { color: var(--ink); font-family: var(--num); }
.product-table .col-img .pt { border-radius: var(--r-inner); border: 1px solid var(--line); box-shadow: none; background-color: var(--panel-2); }
.product-table .col-img .pt:hover { box-shadow: none; transform: none; border-color: var(--ink); }
.product-table .col-code { font-family: var(--num); color: var(--ink); font-weight: 700; }
.product-table .col-code:hover { color: var(--rose-deep); }
.product-table .col-name { color: var(--ink); font-weight: 700; }
.product-table .col-spec { color: var(--ink); }
.product-table .col-supplier { color: var(--ink); font-size: 13px; }
.product-table .col-stock { font-family: var(--num); font-size: 16px; color: var(--ink); }
.product-table .col-stock:hover { color: var(--rose-deep); }
.product-table .col-stock.low { color: var(--warn); }
.product-table .col-stock.zero { color: var(--warn); background: var(--warn-bg); }
.product-table .col-time { color: var(--ink); font-size: 12px; font-family: var(--num); }
.product-table .col-time.has-history { border-bottom: 1px dotted var(--line-strong); }
.product-table .col-time.has-history:hover { background: var(--rose-wash); color: var(--ink); }
.product-table .col-expand { color: var(--ink); }
.product-table .col-expand:hover { color: var(--rose-deep); }
.product-table tfoot { background: var(--panel-2); }
.product-table tfoot td { border-top: 1px solid var(--ink); color: var(--ink); }
.product-table tfoot tr:last-child td:first-child { border-bottom-left-radius: var(--r-card); }
.product-table tfoot tr:last-child td:last-child { border-bottom-right-radius: var(--r-card); }
.product-table .style-group-hdr { background: var(--rose-wash); color: var(--ink); }
.product-table .style-group-hdr td { border-bottom-color: var(--line); }
.product-table tr.expanded-row > td { background: var(--panel-2); }
.sku-detail-table { border: 1px solid var(--line); border-radius: var(--r-inner); font-size: 13px; }
.sku-detail-table thead { background: var(--panel-2); }
.sku-detail-table th { color: var(--ink); font-size: 12px; font-weight: 700; }
.sku-detail-table .expired, .sku-detail-table .expiring-soon { color: var(--warn); }
.empty-row td { color: var(--ink); font-weight: 600; }

/* 弹窗 */
.modal-bg { background: rgba(0, 0, 0, 0.4); }
.modal { border-radius: var(--r-card); padding: 20px 22px; }
.modal h2 { font-size: 17px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.modal-input { border: 1px solid var(--field); border-radius: var(--r-inner); font-size: 15px; background: var(--panel); }
.modal-input:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 0; }
.modal-buttons { gap: 8px; }
.access-error { color: var(--warn); }
.modal-edit-product { border-radius: var(--r-card); box-shadow: 0 12px 48px rgba(0, 0, 0, 0.2); }
.ep-header { background: var(--panel); color: var(--ink); border-bottom: 1px solid var(--line); }
.ep-header h2 { color: var(--ink); font-size: 17px; font-weight: 800; }
.ep-header .ep-sku { color: var(--ink); opacity: 1; font-family: var(--num); }
.ep-close { color: var(--ink); }
.ep-close:hover { color: var(--rose-deep); }
.ep-sidebar { background: var(--panel-2); border-right: 1px solid var(--line); padding: 12px 8px; }
@media (min-width: 681px) { .ep-sidebar { width: 176px; } }
.ep-tab { display: flex; align-items: center; gap: 6px; white-space: nowrap; border-left: 0; border-radius: var(--pill); color: var(--ink); font-size: 14px; padding: 9px 14px; margin: 1px 0; }
.ep-tab .ep-tab-icon { margin-right: 0; }
.ep-tab:hover { background: var(--panel); color: var(--ink); }
.ep-tab.active { background: var(--ink); color: #fff; }
.ep-tab.active .ico-svg { color: var(--rose); }
/* 手机上编辑框的标签横着一排滑：每个按自己的宽度（原样 width:100% ⇒ 一个标签占满一排，别的被挤出去看不见） */
@media (max-width: 680px) {
  .ep-sidebar { gap: 6px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .ep-sidebar::-webkit-scrollbar { display: none; }
  .ep-tab, .ep-tab.active { width: auto; flex: none; border-bottom: 0; padding: 7px 12px; font-size: 13px; }
}
.ep-section-title { color: var(--ink); font-size: 15px; font-weight: 800; border-left: 3px solid var(--rose); }
.ep-field label { color: var(--ink); font-size: 13px; font-weight: 700; }
.ep-field label .req { color: var(--warn); }
.ep-field input[type=text], .ep-field input[type=number], .ep-field input[type=date], .ep-field select, .ep-field textarea { border: 1px solid var(--field); border-radius: var(--r-inner); font-size: 15px; background: var(--panel); }
.ep-field input:focus, .ep-field select:focus, .ep-field textarea:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 0; }
.ep-field input[readonly] { background: var(--page); cursor: not-allowed; }
.ep-radio-row label { color: var(--ink); font-size: 14px; }
.ep-footer { background: var(--panel-2); border-top: 1px solid var(--line); }
.compliance-tip { background: var(--rose-wash); border-left: 3px solid var(--rose); color: var(--ink); border-radius: var(--r-inner); font-size: 13px; }
.lots-table { font-size: 13px; }
.lots-table th { background: var(--panel-2); color: var(--ink); font-size: 12px; border-bottom: 1px solid var(--line-strong); }
.lots-table td { font-size: 13px; border-bottom: 1px solid var(--line); }
.lots-table tr:hover { background: #fbf8f7; }
.lots-table .lt-actions button { border: 1px solid var(--line-strong); border-radius: var(--pill); padding: 3px 9px; }
.lots-table .lt-actions button:hover { background: var(--panel); color: var(--ink); border-color: var(--ink); }
.lots-table .lt-actions button.del:hover { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.lots-table tfoot td { background: var(--panel-2); border-top: 1px solid var(--ink); }
.lots-empty { background: var(--panel-2); color: var(--ink); border-radius: var(--r-inner); }
.lots-expired, .lots-warn { color: var(--warn); }
.img-upload-area { border: 1px dashed var(--line-strong); border-radius: var(--r-inner); color: var(--ink); font-size: 13px; }
.img-upload-area:hover { border-color: var(--ink); color: var(--ink); background: var(--rose-wash); }
.img-thumb { border-radius: var(--r-inner); border: 1px solid var(--line); background: var(--panel-2); }
.img-thumb-del { background: var(--ink); }
.mx-exp-list { border: 1px solid var(--line); border-radius: var(--r-inner); background: var(--panel-2); }
.mx-exp-item:hover { background: var(--rose-wash); }
.mx-exp-item input { accent-color: var(--ink); }
.mx-exp-sku { color: var(--ink); font-family: var(--num); }
.mx-exp-mini { border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--pill); font-size: 13px; font-weight: 700; }
.mx-exp-mini:hover { color: var(--ink); border-color: var(--ink); }
.is-off { pointer-events: none; background: var(--page); }

/* 提示条 */
.toast { background: var(--ink); color: #fff; border-radius: var(--pill); font-size: 14px; font-weight: 600; padding: 10px 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.erp-loading-toast { position: fixed; top: calc(var(--top-h) + 12px); right: 16px; z-index: 9999; max-width: 300px; padding: 9px 14px; border-radius: 14px; background: var(--ink); color: #fff; font-size: 13px; line-height: 1.5; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); }
.erp-loading-toast.sticky { background: var(--warn); }

/* 等批准 */
.pending-screen { background: var(--page); }
.pending-screen h2 { color: var(--ink); font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.pending-screen p { color: var(--ink); font-size: 14px; }
.pending-screen .pi { color: var(--ink); }

/* 出入库流水：增加 = 红、减少 = 绿 */
.mov-kpi-grid { gap: 12px; padding: 0 12px 10px; }
.mov-kpi { background: var(--panel); border-left: 0; border-radius: var(--r-card); padding: 14px 16px; }
.mov-kpi-label { color: var(--ink); font-size: 13px; font-weight: 700; }
.mov-kpi-value { color: var(--ink); font-size: 24px; font-family: var(--num); }
.mov-kpi.up .mov-kpi-value { color: var(--income); }
.mov-kpi.dn .mov-kpi-value { color: var(--expense); }
.mov-filter-row { gap: 8px; padding: 0 12px 10px; }
.mov-day-card { background: var(--panel); border-left: 0; border-radius: var(--r-card); box-shadow: none; margin: 6px 12px 10px; }
.mov-day-head { background: var(--panel); }
.mov-day-head:hover { background: #fbf8f7; }
.mov-day-date { color: var(--ink); font-size: 14px; }
.mov-day-weekday { color: var(--ink); }
.mov-day-net { background: var(--panel); border: 1px solid var(--line-strong); }
.mov-day-net.up { background: var(--panel); color: var(--income); border-color: var(--income); }
.mov-day-net.dn { background: var(--panel); color: var(--expense); border-color: var(--expense); }
.mov-day-net.zero { background: var(--panel); color: var(--ink); }
.mov-day-caret { color: var(--ink); }
.mov-day-body { border-top-color: var(--line); }
.mov-prod-row { border-bottom-color: var(--line); }
.mov-prod-name { color: var(--ink); font-size: 14px; }
.mov-prod-sku { color: var(--ink); font-family: var(--num); }
.mov-prod-up, .mov-mx-up, .movement-qty.positive { color: var(--income); }
.mov-prod-dn, .mov-mx-dn, .movement-qty.negative { color: var(--expense); }
.mov-prod-net { background: var(--panel-2); color: var(--ink); }
.mov-prod-ops { color: var(--ink); }
.mov-prod-ops span { background: var(--panel-2); color: var(--ink); }
.mov-prod-detail-btn { color: var(--ink); font-weight: 700; }
.mov-prod-detail { background: var(--panel-2); }
.mov-prod-detail .di { color: var(--ink); border-bottom-color: var(--line); }
.mov-matrix-wrap { background: var(--panel); border-radius: var(--r-card); box-shadow: none; }
.mov-matrix th, .mov-matrix td { border-color: var(--line); }
.mov-matrix thead th, .mov-matrix thead th.row-date { background: var(--panel-2); color: var(--ink); }
.mov-matrix th.row-date, .mov-matrix tfoot td, .mov-matrix tfoot td.row-date, .mov-matrix tbody tr.mx-spacer th { background: var(--panel-2) !important; color: var(--ink); }
.mov-mx-zero { color: var(--empty); }
.mov-mx-row-total { background: var(--panel-2); color: var(--ink); }
.movement-item { background: var(--panel); border-radius: var(--r-inner); box-shadow: none; font-size: 13px; }
.movement-text > div:first-child { color: var(--ink); }
.movement-text > div:last-child { color: var(--ink); font-size: 12px; }
.mov-daily-toolbar .mov-daily-info { color: var(--ink); font-size: 13px; }
.mov-daily-toolbar .mov-daily-toggle { background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--pill); font-weight: 700; font-size: 13px; }
.mov-daily-toolbar .mov-daily-toggle:hover { background: var(--panel); border-color: var(--ink); }
.mov-sys-badge { background: var(--ink); }
.mov-sys-badge.adj { background: var(--rose-deep); }
.mov-lot-chip, .mov-mx-lot { background: var(--panel); border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--pill); font-family: var(--num); }
.mov-lot-chip.warn, .mov-mx-lot.warn { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.mov-lot-chip.inf, .mov-mx-lot.inf { background: var(--panel); border: 1px dashed var(--rose-deep); }
.lot-inf-mark { background: var(--rose-deep); }
.mov-sys-wrap { border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); border-radius: var(--pill); }
.mov-sys-wrap #movSysCount { color: var(--warn); }

/* 悬停看最近出入库：白底浮层 */
.history-tooltip { background: var(--panel); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); font-size: 12px; }
.history-tooltip .ht-title { color: var(--ink); font-size: 13px; border-bottom-color: var(--line); }
.history-tooltip .ht-row { border-bottom: 1px dotted var(--line); font-family: var(--num); }
.history-tooltip .ht-row .ht-time { color: var(--ink); font-size: 12px; }
.history-tooltip .ht-row .ht-op { color: var(--ink); }
.history-tooltip .ht-row .ht-chg { color: var(--ink); font-size: 12px; }
.history-tooltip .ht-row .ht-chg .qty-pos { color: var(--income); }
.history-tooltip .ht-row .ht-chg .qty-neg { color: var(--expense); }
.history-tooltip .ht-empty, .history-tooltip .ht-loading { color: var(--ink); }

/* 管理页 */
.admin-list { padding: 0 12px; }
.product-card { background: var(--panel); border-radius: var(--r-card); box-shadow: none; padding: 14px 16px; }
.product-card.is-rejected { background: var(--panel-2); }
.product-name { color: var(--ink); font-size: 15px; }
.product-meta { color: var(--ink); font-size: 12px; font-family: var(--sans); }
.oplog-box { background: var(--panel); border-radius: var(--r-card); box-shadow: none; padding: 14px 16px; }
.oplog-head h3 { color: var(--ink); font-size: 15px; }
.oplog-sum { color: var(--ink); }
.oplog-mini { border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); border-radius: var(--pill); }
.oplog-mini:hover { background: var(--panel); border-color: var(--ink); }
.oplog-list { border: 1px solid var(--line); border-radius: var(--r-inner); background: var(--panel-2); }
.oplog-row { border-bottom-color: var(--line); color: var(--ink); font-size: 13px; }
.oplog-time { color: var(--ink); font-family: var(--num); }
.oplog-tag { background: var(--panel); border: 1px solid; border-radius: var(--pill); }
.oplog-tag.fail { background: var(--panel); color: var(--warn); border-color: var(--warn); }
.oplog-tag.warn { background: var(--panel); color: var(--ink); border-color: var(--line-strong); }
.oplog-sku { color: var(--ink); }
.oplog-hot { background: var(--warn-bg); border-left: 3px solid var(--warn); }
.oplog-none { color: var(--ink); }

/* 看大图 */
.lb-thumbs img.active { border-color: var(--rose); }

/* 电脑窄一点（1024 左右）也不横着溢出：供应商、图片两列收窄（只管表格样式；≤ 540 是卡片，不受这里影响） */
@media (min-width: 541px) {
  .product-table { min-width: 700px; }
  .product-table .col-supplier { width: 120px; max-width: 140px; }
  .product-table .col-img { width: 70px; }
  .product-table .col-img .pt { width: 58px; height: 58px; }
  .search-range { grid-column: span 2; }
}

/* ---------- 手机 / 窄屏（≤ 820px）：侧栏收成顶栏下面一排横着的胶囊 ---------- */
@media (max-width: 820px) {
  body::before, .side-brand { display: none; }
  header#mainHeader { margin-left: 0; padding: 0 12px; height: 56px; }
  header#mainHeader .logo-img { display: block; }
  #mainContent { margin-left: 0; padding: 0 0 32px; }
  .tab-bar { position: sticky; top: 56px; left: auto; bottom: auto; width: auto; flex-direction: row; gap: 6px; padding: 8px 12px; background: var(--page); overflow-x: auto; scrollbar-width: none; }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab-bar button { width: auto; flex: none; padding: 7px 14px; font-size: 14px; border: 1px solid var(--line-strong); background: var(--panel); }
  .tab-bar button.active { border-color: var(--ink); }
  /* 手机上只吸顶「顶栏 + 页面导航」两条：扫码框、工具栏、搜索栏都吸住的话，往下滑只剩一张卡片的地方（原样是全吸住） */
  .scan-area, .toolbar, .view-switch, .search-bar { position: static; }
  .operator-badge .admin-badge { display: none; }
}
@media (max-width: 540px) {
  .product-table tbody tr[data-pid] { border: 0; border-radius: var(--r-card); box-shadow: none; }
  .product-table tbody tr[data-pid] > td.col-stock, .product-table tbody tr[data-pid] > td.col-actions { border-top: 1px dashed var(--line); }
  .product-table tbody tr[data-pid] > td.col-supplier:not(:empty)::before { color: var(--ink); }
  .product-table tbody tr[data-pid] > td.col-time { color: var(--ink); }
  .product-table tbody tr[data-pid] > td.col-time::before { color: var(--ink); }
  .product-table tbody tr[data-pid] > td.col-stock.zero { background: transparent; color: var(--warn); }
  .product-table tbody tr.empty-row, .product-table tbody tr.style-group-hdr, .product-table tbody tr.expanded-row { border: 0; border-radius: var(--r-card); }
  .product-table tfoot tr { background: var(--ink); color: #fff; border-radius: var(--r-card); }
  .product-table-wrap { background: transparent; margin: 0 12px; }
  /* 手机顶栏放不下 logo + 标题 + 两个徽章：logo 已经写着品牌名，标题收起来 */
  header#mainHeader .title-block { display: none; }
  header#mainHeader { justify-content: space-between; }
  /* 编码是认货的主信息：原样和规格挤一行，右边那列又被四个按钮撑宽 ⇒ 编码只剩七八十像素、被截成「HB-K01-HS…」。
     改成编码独占一行、规格放下一行；特别长的编码再折行，不打省略号 */
  .product-table tbody tr[data-pid] { grid-template-areas: "img name name" "img code code" "img spec spec" "img sup sup" "stk stk act" "tim tim tim"; }
  .product-table tbody tr[data-pid] > td:nth-child(5) { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .product-table tbody tr[data-pid] > td.col-spec { text-align: left; }
  /* 库存范围两个框占一整行，「库存最小值」才放得下 */
  .search-range { grid-column: 1 / -1; }
}

/* ---------------- 登录（2026-10-20：和原版一样先输访问码，再登录自己的账号；排版照原版，颜色用上游的变量） ---------------- */
.access-screen { position: fixed; inset: 0; background: var(--page); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1000; padding: 20px; color: var(--ink); }
.access-screen.hide { display: none; }
.access-logo { width: 300px; max-width: 72vw; height: auto; margin-bottom: 18px; }
.access-screen .ac-sub { font-size: 14px; letter-spacing: 8px; margin-bottom: 28px; color: var(--ink); }
.access-screen .ac-form { width: 100%; max-width: 340px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 24px; }
.access-screen .ac-form label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.access-screen .ac-form input { width: 100%; padding: 12px 14px; border: 1px solid var(--field); background: var(--panel); color: var(--ink); border-radius: var(--r-inner); font-size: 16px; margin-bottom: 12px; font-family: var(--sans); letter-spacing: 1px; }
.access-screen .ac-form input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--rose-tint); }
.access-screen .ac-form button { width: 100%; padding: 12px; background: var(--btn); color: var(--btn-ink); border: none; border-radius: var(--pill); font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--sans); letter-spacing: 2px; }
.access-screen .access-error { color: var(--warn); font-size: 13px; margin-top: 8px; min-height: 16px; }
.gender-row { display: flex; gap: 14px; padding: 6px 4px 8px; align-items: center; font-size: 13px; color: var(--ink); }
.gender-row label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.gender-row input { accent-color: var(--rose-deep); width: 15px; height: 15px; }
.pending-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------------- 按款式：每个款式一张「颜色 × 尺码」库存表（2026-10-21，负责人定 A） ---------------- */
.sm-view { margin: 0 12px; }
.sm-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 2px 2px 10px; font-size: 13px; color: var(--ink); }
.sm-bar b { font-family: var(--num); }
.sm-empty { background: var(--panel); border-radius: var(--r-card); padding: 28px 16px; text-align: center; font-weight: 600; color: var(--ink); }
/* 款式卡片并排：每张至少 520 宽，放得下就并排，只剩一张就铺满；手机上 min(100%, …) 不会撑出屏幕
   一行最多两张（2026-10-27 负责人「改成一行最多两张，宽屏也不放三张」）：每张的最小宽度再取「半行」（(100% - 间距) / 2 - 1px），
   宽屏上一行就只放得下两张，款多了往下多排几行；-1px 是给小数取整留的余量，免得两张也被挤成一张。间距只改 --sm-gap，两处跟着变 */
.sm-grid { --sm-gap: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 520px), calc((100% - var(--sm-gap)) / 2 - 1px)), 1fr)); gap: var(--sm-gap); align-items: start; }
.sm-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; min-width: 0; }
.sm-hdr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; padding: 12px 16px; background: var(--panel); border: 0; text-align: left; cursor: pointer; font: inherit; color: var(--ink); }
.sm-hdr:hover { background: var(--rose-wash); }
.sm-hdr:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sm-card:not(.folded) .sm-hdr { border-bottom: 1px solid var(--line); }
.sm-caret { font-size: 11px; width: 12px; flex: none; }
.sm-thumb { display: inline-block; flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background-color: var(--panel-2); background-size: cover; background-position: center; }
.sm-thumb.big { width: 42px; height: 42px; border-radius: var(--r-inner); }
.sm-title { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.sm-title b { font-size: 15px; font-family: var(--num); }
.sm-name, .sm-meta { font-size: 13px; }
.sm-flag { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--pill); color: var(--warn); border: 1px solid var(--warn-line); }
.sm-flag.zero { background: var(--warn-bg); }
.sm-total { margin-left: auto; font-size: 13px; white-space: nowrap; }
.sm-total b { font-size: 18px; font-family: var(--num); }
.sm-body { padding: 4px 12px 10px; overflow-x: auto; }
.sm-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.sm-table th, .sm-table td { padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--line); color: var(--ink); }
.sm-table thead th { font-size: 13px; font-weight: 700; border-bottom: 1px solid var(--line-strong); }
.sm-table th.sm-color { text-align: left; width: 140px; font-weight: 600; }
.sm-table .sm-sum { width: 64px; font-weight: 700; font-family: var(--num); }
.sm-table tfoot th, .sm-table tfoot td { border-top: 1px solid var(--ink); border-bottom: 0; font-weight: 700; font-family: var(--num); background: var(--panel-2); }
.sm-table td.sm-none { background: var(--panel-2); }
.sm-color-btn { display: flex; align-items: center; gap: 8px; max-width: 100%; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.sm-color-btn span:last-child { overflow-wrap: anywhere; }
.sm-color-btn:hover span:last-child { color: var(--rose-deep); }
.sm-cell { display: inline-block; min-width: 52px; padding: 5px 8px; border-radius: var(--r-inner); border: 1px solid transparent; background: transparent; font: inherit; font-family: var(--num); font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3; }
button.sm-cell { cursor: pointer; }
button.sm-cell:hover { background: var(--rose-wash); border-color: var(--ink); }
.sm-cell.zero { color: var(--warn); }
.sm-cell.low { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-line); }
.sm-cell.off { color: var(--empty); cursor: default; }
.sm-cell.on, .sm-other.on { outline: 2px solid var(--focus); outline-offset: 1px; }
.sm-others { padding: 8px 12px 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.sm-others-note { width: 100%; font-size: 13px; color: var(--ink); }
.sm-other { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-inner); background: var(--panel); cursor: pointer; font: inherit; color: var(--ink); text-align: left; }
.sm-other:hover { border-color: var(--ink); }
.sm-other-txt { display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
.sm-other-txt b { font-family: var(--num); }
.sm-menu { position: absolute; z-index: 40; width: min(300px, calc(100vw - 16px)); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); padding: 12px; color: var(--ink); }
.sm-menu.wide { width: min(680px, calc(100vw - 16px)); }
.sm-menu-hd { font-size: 13px; line-height: 1.55; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.sm-menu-hd > b { font-size: 15px; font-family: var(--num); }
.sm-menu-stock { font-family: var(--num); }
.sm-menu-stock.zero, .sm-menu-stock.low { color: var(--warn); }
.sm-menu-time { font-size: 12px; }
.sm-menu-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.sm-act { border: 1px solid var(--line-strong); background: var(--panel); border-radius: var(--pill); padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; }
.sm-act:hover { border-color: var(--ink); }
.sm-act.in { color: var(--income); }
.sm-act.out { color: var(--expense); }
.sm-act.danger { color: var(--warn); border-color: var(--warn-line); }
.sm-menu-lots { margin-top: 8px; overflow-x: auto; }
.sm-menu-lots .sku-detail-wrap { padding: 0; }
.sm-menu-note { font-size: 13px; padding: 4px 0; }
@media (max-width: 540px) {
  .sm-hdr { padding: 10px 12px; gap: 8px; }
  .sm-thumb.big { width: 36px; height: 36px; }
  .sm-body { padding: 2px 6px 8px; }
  .sm-table { font-size: 13px; }
  .sm-table th.sm-color { width: 92px; }
  .sm-table .sm-sum { width: 44px; }
  .sm-thumb { width: 24px; height: 24px; }
  .sm-color-btn { gap: 5px; }
  .sm-cell { min-width: 0; width: 100%; max-width: 52px; padding: 4px 2px; font-size: 15px; }
}

/* ---------------- 批量到货（2026-10-21） ---------------- */
.modal.modal-arrival { max-width: 860px; }
.arr-note { font-size: 13px; color: var(--ink); background: var(--panel-2); border-radius: var(--r-inner); padding: 8px 12px; margin-bottom: 10px; line-height: 1.55; }
.arr-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; margin-bottom: 10px; }
.arr-fields label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--ink); }
.arr-fields .modal-input { margin: 0; width: 100%; }
.arr-grid { display: flex; flex-direction: column; gap: 10px; }
.arr-card { border: 1px solid var(--line); border-radius: var(--r-inner); overflow: hidden; }
.arr-hdr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: var(--panel-2); font-size: 13px; color: var(--ink); }
.arr-hdr b { font-family: var(--num); font-size: 14px; }
.arr-sub { margin-left: auto; font-weight: 700; color: var(--income); }
.arr-body { padding: 4px 8px 8px; overflow-x: auto; }
.arr-table { border-collapse: collapse; table-layout: fixed; font-size: 13px; }
.arr-table th, .arr-table td { padding: 4px; text-align: center; border-bottom: 1px solid var(--line); color: var(--ink); }
.arr-table thead th { font-weight: 700; border-bottom: 1px solid var(--line-strong); width: 84px; }
.arr-table th.arr-color { text-align: left; width: 132px; font-weight: 600; }
.arr-cl { display: flex; align-items: center; gap: 6px; }
.arr-sticky { position: sticky; bottom: -20px; margin: 0 0 -20px; padding: 10px 0 20px; background: var(--panel); border-top: 1px solid var(--line); z-index: 1; }
.arr-table .arr-sum { width: 60px; font-weight: 700; font-family: var(--num); }
.arr-table tfoot th, .arr-table tfoot td { font-weight: 700; font-family: var(--num); background: var(--panel-2); border-top: 1px solid var(--ink); border-bottom: 0; }
.arr-table td.sm-none { background: var(--panel-2); }
.arr-qty { width: 72px; max-width: 100%; padding: 6px 6px; border: 1px solid var(--field); border-radius: var(--r-inner); font: inherit; font-family: var(--num); font-size: 15px; font-weight: 700; text-align: center; color: var(--income); background: var(--panel); }
.arr-qty:focus { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 0; }
.arr-qty.out { color: var(--expense); }
.arr-qty::placeholder { color: var(--empty); font-weight: 400; font-size: 13px; }
.arr-qty:disabled { background: var(--panel-2); border-style: dashed; }
.arr-sub.out { color: var(--expense); }
.arr-fields.arr-fields-1 { grid-template-columns: minmax(0, 1fr); }
.arr-qty.bad { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.arr-others { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px 10px; }
.arr-other { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-inner); }
.arr-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--ink); }
.arr-sticky .modal-buttons { margin-top: 8px; }
.arr-foot b { font-family: var(--num); }
.arr-badtxt { color: var(--warn); }
.bulk-confirm { width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); box-sizing: border-box; margin: auto; padding: 20px; border: 1px solid var(--line-strong); border-radius: var(--r-inner); background: var(--panel); color: var(--ink); }
.bulk-confirm::backdrop { background: var(--panel-2); }
.bulk-confirm h2 { margin: 0 0 12px; color: var(--ink); font-size: 18px; }
.bulk-confirm-text { max-height: 60dvh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; font-size: 14px; }
.bulk-confirm .modal-buttons { margin-top: 16px; }
.bulk-confirm button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (max-width: 540px) {
  .arr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arr-table th.arr-color { width: 84px; }
  .arr-table thead th { width: 56px; }
  .arr-table .arr-sum { width: 40px; }
  .arr-qty { width: 100%; padding: 6px 2px; font-size: 14px; }
  .arr-cl .sm-thumb { display: none; }
}

/* ---------------- 看图提速：小格子里的缩略图（2026-10-21） ---------------- */
.product-table .col-img .pt { overflow: hidden; }
.product-table .col-img .pt img.pt-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-thumb { overflow: hidden; }
.sm-thumb img.sm-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-thumb.clickable { cursor: zoom-in; }
.sm-thumb.clickable:hover { border-color: var(--ink); }

/* ---------------- 手机 / iPhone 适配（2026-10-27 · 负责人「检查一下手机端的适配问题 不要有任何bug或者问题 要让iphone duo也能适配」） ---------------- */
/* iPhone / iPad 的 Safari：点进字号小于 16 的输入框会把整页自动放大、点完也不缩回（这里搜索框 14、弹窗 15、数量格 14）
   ⇒ 触屏设备上输入框、下拉框一律 16。按「触屏」认、不按宽度认：iPhone Duo 展开后横拿比 820 宽、走电脑排版，照样会放大 */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), select, textarea { font-size: 16px !important; }
  /* 快速出入库的数量框原来特意写成 20 大字（index.html 里的行内样式），上一条别把它压小 */
  #qcQty { font-size: 20px !important; }
  /* 框里的浅色提示字一律 14（Safari 只看输入框本身的字号）：弹窗、搜索框的长提示字不会因为输入字变大被截掉；扫码框那句也从 16 变 14，375 宽起放得下（320 宽的老 SE 上仍截一点）。数量格的提示字另有 13，不受这条影响 */
  input::placeholder, textarea::placeholder { font-size: 14px; }
  /* 下拉框按最长的选项撑宽，字一大就会顶出屏幕（流水页「全部商品」那个 375 宽时顶到 408）⇒ 最宽到它那一排为止 */
  select { max-width: 100%; }
  .mov-filter-row select { min-width: 0; }
}
/* 流水页的「搜商品 / 商家编码 / 操作员 / 备注」：原来最窄 120，和下拉框挤一排时只剩一两百宽、提示字被截（电脑上某些宽度也会）
   ⇒ 最窄 250（放不下就自己换到下一排再铺开）；窄屏（≤ 820，手机 / 平板竖拿）独占一整排。只认这个框的编号：同一排里还有「显示系统流水」的勾选框 */
#movFilterReason { min-width: 250px; }
@media (max-width: 820px) {
  #movFilterReason { flex-basis: 100%; }
}
/* 「显示系统流水」的勾选框原来被 .mov-filter-row input 那条带上了「最窄 120、撑开」，胶囊被拉得很长 ⇒ 勾选框按它本来的大小 */
.mov-sys-wrap input { flex: none; min-width: 0; }
/* 胶囊不跟着那一排最高的东西拉高（原来 28 ~ 38 不等），上下居中 */
.mov-sys-wrap { align-self: center; }
/* 弹窗最高 90vh：iPhone Safari 的 vh 按工具栏收起来时的高度算，工具栏露着时弹窗上下各被切掉一截（批量到货底下的「确认」可能被压住）
   ⇒ 再按真实可见高度（dvh，iOS 15.4 起有）封顶；老系统不认 dvh 就照旧用 90vh */
.modal { max-height: 90vh; max-height: min(90vh, calc(100dvh - 32px)); }
.modal-edit-product { height: 90vh; height: min(90vh, calc(100dvh - 32px)); }
/* 批量到货的五个栏位：宽屏三个一排时第二排只有「仓位」「供应商」，让供应商占两格（提示字「可不填（运营员以上才有这一栏）」放得下）；
   ≤ 640 改两个一排（三个一排时「生产日期」只剩一百二十来宽，iPhone 的日期框写成「2026年10月27日」放不下），供应商铺满一整排；
   再窄一点（≤ 420：SE、mini、标准款 iPhone）「批次号」「生产日期」也各占一整排 */
.arr-fields:not(.arr-fields-1) > label:nth-child(5) { grid-column: span 2; }
@media (max-width: 640px) {
  .arr-fields:not(.arr-fields-1) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arr-fields:not(.arr-fields-1) > label:nth-child(5) { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .arr-fields:not(.arr-fields-1) > label:nth-child(-n+2) { grid-column: 1 / -1; }
}
/* 手机横着拿（窗口高只有 390 ~ 440）、iPhone Duo / iPad 横拿时走电脑排版：顶栏 + 扫码框 + 工具栏 + 按商品/按款式 + 搜索栏一起吸顶，
   合起来四百多高（1000 宽时 465、1300 宽时 423），比整屏还高，往下滑只看得见这几条
   ⇒ 窗口高 ≤ 500，或者触屏且高 ≤ 820 时，和竖拿的手机一样只留顶栏吸顶（吸顶的位置由 app.js 按实际还吸着的那几条重算，窗口一变就重算） */
@media (max-height: 500px), (hover: none) and (pointer: coarse) and (max-height: 820px) {
  .scan-area, .toolbar, .view-switch, .search-bar { position: static; }
}
/* 「按商品」的表最窄也要八百八九十到九百一十宽（十列，看名字长短），541 ~ 1239 宽（平板、iPhone Duo 展开、窄笔记本；Windows 的滚动条另占 17）放不下，
   整页被撑得能左右拖、iPhone 会把整页缩小 ⇒ 这段宽度里只让表格自己左右滑，页面不动（≤ 540 是卡片排版，≥ 1240 放得下，都不受影响）。
   代价：这段宽度里表头不吸顶 —— 表格框能左右滑以后，表头的吸顶就改成对着这个框算，app.js 给的 top（上面吸顶那几条的总高）会把表头推到表格中间压住数据行，所以干脆不吸 */
@media (min-width: 541px) and (max-width: 1239px) {
  .product-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-card); }
  .product-table thead { position: static; }
}

/* ================= 亨邦藏青层（2026-11-03 建，定「藏青色」）=================
   上游那层的「黑胶囊主按钮、黑色选中块」在亨邦换成藏青，一眼和上游分开；正文黑字、红入库 / 绿出库、橙提醒照旧。
   白字压藏青 #24406e 对比度 10.33（够 4.5）。只加在最后、不改上面的规则 ⇒ 上游 ERP 以后改样式，照样能搬过来。 */
:root { --btn: #24406e; --navy: #24406e; }
.tab-bar button.active,
.view-switch button.active, .mov-toggle button.active, .search-chip.active, .cat-select.active, .ep-tab.active,
.admin-badge, .online-badge .admin-status, .online-popup .user.admin .role,
.stock-btn:hover:not(:disabled), .stock-btn:active:not(:disabled) { background: var(--navy); border-color: var(--navy); color: #fff; }
@media (max-width: 540px) { .product-table tfoot tr { background: var(--navy); } .product-table tfoot td { color: #fff; border-top: 0; } }
/* 主按钮 / 导出按钮悬停：上游是近黑 #262626，亨邦用深一档的藏青 */
.btn-primary:hover:not(:disabled), .btn-in:hover:not(:disabled), .btn-out:hover:not(:disabled), .btn-green:hover:not(:disabled), .mov-export-btn:hover { background: #1b3157; border-color: #1b3157; color: #fff; }
/* 2026-11-05 复查 B-01：删除商品按钮悬停 / 按下时，原来橙色图标压藏青底（对比度 2.06）看不清 ⇒ 浅橙底 + 橙字 */
.stock-btn.stock-btn-del:hover:not(:disabled), .stock-btn.stock-btn-del:active:not(:disabled) { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
/* 2026-11-05 复查 B-19：手机上管理页每张卡片左边名字、右边一排按钮，按钮先占了位置 ⇒ 名字后面的 ADMIN 被挤成「ADM…」，四个按钮时连名字都被截。
   窄屏下让按钮换到下一行，名字那一栏占满一行（只管管理页 #adminList） */
@media (max-width: 540px) {
  #adminList .product-card { flex-wrap: wrap; }
  #adminList .product-card > .product-info { flex: 1 1 100%; }
  #adminList .product-card > .product-info + div { flex: 1 1 100%; justify-content: flex-end; }
}