:root{
  --brand:#0e9f6e;--brand-hover:#0b875d;--brand-weak:#e6f6ef;--brand-ring:rgba(14,159,110,.16);
  --bg:#f3f5f4;--panel:#fff;--fill:#f3f5f4;--fill-2:#e4e9e7;--border:#dfe5e2;--border-2:#edf1ef;
  --text:#18221e;--text-2:#46534e;--text-3:#86928d;--text-4:#b9c2be;
  --success:#0e9f6e;--success-weak:#e6f6ef;--warning:#e8870e;--warning-weak:#fdf3e3;--warning-text:#b86a06;
  --danger:#e3483f;--danger-weak:#fdecea;--info:#2f7ae5;--info-weak:#eaf2fd;--purple:#8250df;--purple-weak:#f3edfc;
  --row-hover:#f6faf8;--th-bg:#f7f9f8;
  --top-bg:#fff;--radius:8px;--radius-lg:12px;--card-border:transparent;--card-shadow:0 1px 3px rgba(20,40,30,.06),0 1px 2px rgba(20,40,30,.03);
  --page-max:1480px;
}
body{background:var(--bg)}
.tnav{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--border)}
.tnav-in{max-width:var(--page-max);margin:0 auto;height:60px;display:flex;align-items:center;gap:24px;padding:0 24px}
.logo{display:flex;align-items:center;gap:10px;color:var(--text);flex:none}
.logo-mk{width:32px;height:32px;border-radius:9px;background:linear-gradient(140deg,#16b981,#0a7f58);display:grid;place-items:center;box-shadow:0 4px 10px rgba(14,159,110,.3)}
.logo-t{font-weight:700;font-size:16px;line-height:1.15;letter-spacing:.5px}
.logo-t b{color:var(--brand);margin:0 2px}
.logo-t small{display:block;font-size:11px;font-weight:400;color:var(--text-3);letter-spacing:.3px}
.tn{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tn::-webkit-scrollbar{display:none}
.tn a{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:8px;color:var(--text-2);white-space:nowrap;font-size:14px;transition:all .15s;position:relative}
.tn a:hover{background:var(--fill);color:var(--text)}
.tn a.active{background:var(--brand-weak);color:var(--brand);font-weight:600}
.tn a .badge{margin-left:2px}
.tn-right{display:flex;align-items:center;gap:6px;flex:none}
.wh-switch{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:#fff;cursor:pointer;font-size:13px;color:var(--text-2)}
.wh-switch:hover{border-color:var(--brand);color:var(--brand)}
.page{padding:22px 24px 48px}
.page-head h1{font-size:22px}

.kpi{padding:18px 20px}
.kpi .v{font-size:30px}
.kpi-ic{background:var(--brand-weak);color:var(--brand)}
.kpi-ic.o{background:var(--warning-weak);color:var(--warning)}.kpi-ic.b{background:var(--info-weak);color:var(--info)}.kpi-ic.r{background:var(--danger-weak);color:var(--danger)}.kpi-ic.p{background:var(--purple-weak);color:var(--purple)}
.hero-kpi{background:linear-gradient(135deg,#0e9f6e,#087a54);color:#fff;border:0}
.hero-kpi .l,.hero-kpi .f{color:rgba(255,255,255,.8)}
.hero-kpi .v small{color:rgba(255,255,255,.75)}
.hero-kpi .kpi-ic{background:rgba(255,255,255,.18);color:#fff}
.hero-kpi .trend.up{color:#c6f6de}
.todo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.todo{border-radius:10px;background:var(--fill);padding:12px 14px;cursor:pointer;transition:all .15s;border:1px solid transparent}
.todo:hover{border-color:var(--brand);background:#fff}
.todo .n{font-size:22px;font-weight:600;line-height:1.2}
.todo .l{font-size:12.5px;color:var(--text-2);margin-top:2px;display:flex;align-items:center;gap:4px}
.warn-it{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--border-2)}
.warn-it:last-child{border-bottom:0}
.sku-ic{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;flex:none;font-size:12px;font-weight:600;color:#fff}
.rank{width:20px;height:20px;border-radius:6px;display:inline-grid;place-items:center;font-size:11.5px;font-weight:600;background:var(--fill);color:var(--text-3)}
.rank.top{background:var(--brand);color:#fff}
.wh-cap{display:grid;gap:14px}
.wh-cap .h{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.wh-cap .h span:last-child{color:var(--text-3)}
.prod-cell{display:flex;align-items:center;gap:10px;min-width:0}
.prod-cell .cell-2{min-width:0}
.prod-cell .cell-main{max-width:230px;overflow:hidden;text-overflow:ellipsis}
.qty-cell b{font-weight:600}
.lock{font-size:12px;color:var(--text-3)}

/* 订单创建 */
.form-card .card-bd{padding:20px 24px}
.cust-card{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:var(--fill);border-radius:10px;padding:12px 14px;margin:4px 0 16px}
.cust-card .k{font-size:12px;color:var(--text-3)}.cust-card .v{font-weight:600;margin-top:2px}
.lines-t .input{height:30px}
.lines-t td{vertical-align:middle}
.lines-t .num-in{width:96px;text-align:right}
.lines-t .price-in{width:110px;text-align:right}
.line-err{font-size:12px;color:var(--danger);margin-top:3px}
.line-warn{font-size:12px;color:var(--warning-text);margin-top:3px}
.tr-err .input{border-color:var(--danger)}
.sum-box{display:flex;justify-content:flex-end;padding:16px 24px;border-top:1px solid var(--border-2);gap:40px;flex-wrap:wrap;align-items:flex-end}
.sum-box .it{text-align:right}
.sum-box .k{font-size:12.5px;color:var(--text-3)}
.sum-box .v{font-size:16px;font-weight:600;margin-top:2px}
.sum-box .total .v{font-size:26px;color:var(--danger)}
.sum-box .input{width:110px;text-align:right;height:30px}
.form-foot{position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-top:1px solid var(--border);padding:12px 24px;display:flex;justify-content:flex-end;gap:10px;margin:16px -24px -48px;z-index:5}
.picker-list{max-height:380px;overflow:auto;border:1px solid var(--border-2);border-radius:10px;margin-top:12px}
.picker-it{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--border-2);cursor:pointer}
.picker-it:last-child{border-bottom:0}
.picker-it:hover{background:var(--row-hover)}
.picker-it.dis{opacity:.5;cursor:not-allowed}
.picker-it .p{margin-left:auto;text-align:right;font-size:12.5px;color:var(--text-3)}
.picker-it .p b{color:var(--text);font-weight:600;font-size:13.5px}

/* 盘点 */
.cnt-in{width:100px;text-align:right}
.diff-p{color:var(--success);font-weight:600}.diff-n{color:var(--danger);font-weight:600}
.task-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.task-bar .prog{width:220px}

/* 流转 */
.flow{display:flex;gap:0;margin-bottom:18px}
.flow .fs{flex:1;text-align:center;position:relative;font-size:12.5px;color:var(--text-3)}
.flow .fs::before{content:"";position:absolute;top:9px;left:0;right:0;height:2px;background:var(--fill-2)}
.flow .fs:first-child::before{left:50%}.flow .fs:last-child::before{right:50%}
.flow .fs i{display:block;width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--fill-2);margin:0 auto 6px;position:relative;z-index:1}
.flow .fs.done{color:var(--text-2)}
.flow .fs.done::before{background:var(--brand)}
.flow .fs.done i{background:var(--brand);border-color:var(--brand);box-shadow:inset 0 0 0 3px #fff}
.flow .fs.cur{color:var(--brand);font-weight:600}
.flow .fs.cur i{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-ring)}
.flow .fs.cur::before{background:linear-gradient(90deg,var(--brand) 50%,var(--fill-2) 50%)}
.sub-table{border:1px solid var(--border-2);border-radius:10px;overflow:hidden}
.sub-table .table td,.sub-table .table th{padding:9px 12px}
.sub-table .table tr:last-child td{border-bottom:0}
.tfoot-sum td{background:var(--fill);font-weight:600}
.table tr.row-new td{animation:rowflash 2.4s ease}
@keyframes rowflash{0%,30%{background:#d5f3e6}100%{background:transparent}}

@media (max-width:1100px){.tnav-in{gap:12px}.logo-t small{display:none}.wh-switch span{display:none}.todo-grid{grid-template-columns:repeat(2,1fr)}.cust-card{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.logo-t{display:none}.user .n,.user .r{display:none}.page{padding:16px}.form-foot{margin:16px -16px -48px}}
@media (max-width:640px){.tnav-in{padding:0 12px}.wh-switch{display:none}.sum-box{gap:16px;padding:16px}.sum-box>.flex{flex-wrap:wrap;justify-content:flex-end;max-width:100%}}

/* 窄屏：KPI 两列；数据表改为卡片（每行一张，左侧字段名），不在容器内横向滑动 */
@media (max-width:640px){
  .g-4,.g-5{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .g-5>.kpi:last-child:nth-child(odd){grid-column:1/-1}
  .kpi{padding:12px 14px}.kpi .kpi-ic{display:none}.kpi .v{font-size:22px;line-height:30px}.kpi .f{font-size:11.5px}
  .dt .dt-scroll{overflow:visible}
  .dt .table,.dt .table tbody{display:block;width:100%;min-width:0}
  .dt .table thead{display:none}
  .dt .table tbody tr:not(.empty-row){display:block;padding:10px 14px;border-bottom:1px solid var(--border,#eef0f3)}
  .dt .table tbody tr:not(.empty-row) td{display:block;padding:3px 0;border:0;white-space:normal;text-align:right;position:static;background:none;box-shadow:none;min-height:24px}
  .dt .table tbody td::before{content:attr(data-l);float:left;margin-right:12px;color:var(--text-3,#98a2b3);font-size:12px;text-align:left}
  .dt .table tbody tr:not(.empty-row) td.c-first{display:block;text-align:left;padding-bottom:6px}
  .dt .table tbody td.c-first::before,.dt .table tbody td.fixed-r::before,.dt .table tbody td[data-l=""]::before{display:none}
  .dt .table tbody tr:not(.empty-row) td.fixed-r{text-align:right;padding-top:6px}
  .dt .table tbody tr:not(.empty-row) td.col-check{display:none}
  .dt .table tbody td>*{min-width:0}
}
.hero-kpi .trend.down{color:#ffd9d2}
.rp-period{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--border,#e5e7eb);border-radius:8px;font-size:13px;color:var(--text-2,#4b5563);background:#fff}
/* 窄屏：主导航独占第二行，可横滑；盘点明细表改为卡片 */
@media (max-width:640px){
  .tnav-in{flex-wrap:wrap;height:auto;row-gap:0;padding:0 12px}
  .tnav-in>.logo,.tn-right{height:52px;display:flex;align-items:center}
  .tn-right{margin-left:auto}
  .tn{order:3;flex:0 0 100%;padding:0 0 8px;margin:0 -4px}
  .tn a{height:32px;padding:0 10px;font-size:13.5px}
  .ck-t thead{display:none}
  .ck-t,.ck-t tbody{display:block;width:100%}
  .ck-t tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:10px 14px;border-bottom:1px solid var(--border-2,#eef0f3)}
  .ck-t tbody td{display:block;padding:0;border:0}
  .ck-t tbody td:nth-child(1){grid-column:1/-1}
  .ck-t tbody td:nth-child(2)::before{content:'库位 ';color:var(--text-3)}
  .ck-t tbody td:nth-child(3){text-align:right}.ck-t tbody td:nth-child(3)::before{content:'账面 ';color:var(--text-3)}
  .ck-t tbody td:nth-child(4){grid-column:1}
  .ck-t tbody td:nth-child(5),.ck-t tbody td:nth-child(6){text-align:right}
  .ck-t tbody td:nth-child(5){grid-column:2;grid-row:3}
  .ck-t tbody td:nth-child(6){grid-column:1/-1;grid-row:4}
}

@media (max-width:640px){.dt .table tbody tr:not(.empty-row) td::after{content:'';display:table;clear:both}}

/* 窄屏：抽屉底部说明文字独占一行、标签页不折行 */
@media (max-width:640px){
  .drawer-ft{flex-wrap:wrap;row-gap:8px}
  .drawer-ft>.grow{flex:1 0 100%;font-size:12px}
  .tabs{gap:0;justify-content:space-between}
  .tabs button{white-space:nowrap;font-size:13px;padding:10px 2px}
}
@media (max-width:640px){
  .card-hd.bordered{flex-wrap:wrap;row-gap:8px}
  .card-hd.bordered .card-t{white-space:nowrap;flex:1 1 100%}
  .card-extra.task-bar{flex:1 1 100%;flex-wrap:wrap;margin-left:0;gap:6px 12px}
  .card-extra.task-bar>span{white-space:normal}
}

/* 演示标记放进顶栏右侧，不浮在表格与图表上；窄屏改为内容顶部的小标签 */
.tn-right .demo-mark{position:static;flex:none;white-space:nowrap;margin-right:8px;background:var(--bg,#f2f4f3);color:var(--text-3,#8a94a0);opacity:1;backdrop-filter:none;padding:5px 10px}
@media (max-width:1100px){.tn-right .demo-mark{display:none}#main::before{content:"在线体验 · 演示数据";display:block;width:max-content;margin:10px auto -4px;padding:2px 10px;font-size:11px;line-height:16px;color:#8a94a0;background:#fff;border:1px solid #e3e7ea;border-radius:20px;letter-spacing:.5px}}
.nowrap{white-space:nowrap}
@media (max-width:640px){.tn{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);padding-right:36px!important}}