*{box-sizing:border-box}
body{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;margin:0;color:#26292e;font-size:14px;min-height:100vh;
  background:linear-gradient(120deg,#fdf3ec,#f4f6fb,#eef4f6,#f9eef3,#fdf3ec);background-size:300% 300%;animation:bgFlow 26s ease-in-out infinite}
@keyframes bgFlow{0%{background-position:0% 40%}50%{background-position:100% 60%}100%{background-position:0% 40%}}
/* 极光色块：两团柔和光晕缓慢漂移变形 */
body::before{content:'';position:fixed;width:52vmax;height:52vmax;left:-12vmax;top:-14vmax;border-radius:50%;filter:blur(60px);z-index:0;pointer-events:none;
  background:radial-gradient(circle at 35% 35%,rgba(212,80,46,.17),rgba(212,80,46,0) 65%);
  animation:blobA 34s ease-in-out infinite alternate}
body::after{content:'';position:fixed;width:56vmax;height:56vmax;right:-16vmax;bottom:-18vmax;border-radius:50%;filter:blur(70px);z-index:0;pointer-events:none;
  background:radial-gradient(circle at 60% 40%,rgba(90,106,192,.16),rgba(192,74,140,.10) 45%,rgba(90,106,192,0) 68%);
  animation:blobB 40s ease-in-out infinite alternate}
@keyframes blobA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vmax,4vmax) scale(1.12)}100%{transform:translate(-3vmax,7vmax) scale(.94)}}
@keyframes blobB{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-7vmax,-5vmax) scale(1.1)}100%{transform:translate(4vmax,-8vmax) scale(.92)}}
header{background:linear-gradient(135deg,#b4232a,#d4502e);background-size:200% 200%;animation:headFlow 12s ease-in-out infinite;color:#fff;padding:10px 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;box-shadow:0 2px 14px rgba(180,35,42,.28);position:relative;z-index:2;overflow:hidden}
header::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.20) 50%,transparent 58%);background-size:280% 100%;animation:sheen 7s ease-in-out infinite}
@keyframes sheen{0%,55%{background-position:130% 0}100%{background-position:-40% 0}}
@keyframes headFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
header h1{font-size:19px;margin:0;font-weight:600;letter-spacing:1px}
header .datebox{display:flex;align-items:center;gap:6px}
header input[type=date]{border:none;border-radius:5px;padding:4px 8px;font-size:14px;box-shadow:inset 0 1px 3px rgba(0,0,0,.15)}
nav{display:flex;gap:6px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:8px 14px;border-bottom:1px solid rgba(229,230,232,.7);position:sticky;top:0;z-index:20;flex-wrap:wrap;box-shadow:0 2px 10px rgba(30,32,36,.05)}
nav button{border:1px solid #ddd;background:rgba(250,250,250,.7);padding:6px 16px;border-radius:18px;cursor:pointer;font-size:14px;transition:all .22s ease}
nav button:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(30,32,36,.10);border-color:#d4502e;color:#b4232a}
nav button.active{background:linear-gradient(135deg,#b4232a,#d4502e);color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(180,35,42,.35)}
main{padding:14px 18px 60px;max-width:1560px;margin:0 auto;position:relative;z-index:1}
h2{font-size:16px;margin:2px 0 8px}
h3{font-size:14px;margin:2px 0 6px}
.card{background:rgba(255,255,255,.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(229,230,232,.8);border-radius:12px;padding:12px 14px;margin-bottom:14px;box-shadow:0 2px 10px rgba(30,32,36,.06);transition:box-shadow .25s ease}
.card:hover{box-shadow:0 8px 24px rgba(30,32,36,.11)}
/* 入场动画挂在 section 上：切换标签时播放，表格重渲染不会反复闪动 */
main section{animation:cardIn .35s ease both}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
table{border-collapse:collapse;background:rgba(255,255,255,.92);width:100%;font-size:13px;border-radius:8px;overflow:hidden}
th,td{border:1px solid #e2e3e5;padding:3px 7px;text-align:center;white-space:nowrap}
th{background:linear-gradient(180deg,#f6f7f9,#eef0f3);font-weight:600}
tbody tr{transition:background .15s ease}
tbody tr:hover td{background-color:rgba(212,80,46,.05)}
td.name{text-align:left;max-width:430px;white-space:normal;min-width:240px}
tfoot td{font-weight:700;background:#faf7ef}
.rowdup{background:#fdeaea}
.rowunlock{background:#fff8e1}
.rowunlock td.name{background:#fffbe8}
td.man{color:#1a5fb4;font-weight:700}
.lockbtn{font-size:14px;line-height:1;padding:2px 5px}
.lockbtn.on{background:#ffe9b8;border-color:#e8b94d}
.lockbtn.hasman{outline:2px solid #8ec0f4}
.rowwdt{background:#eef9ef}
.rowwdt td.name{background:#f3fbf4}
.rowbad{background:#fdeed8 !important}
.rowparse{background:#fff1b8}
.rowunlock.rowparse{background:#fff8e1}
.anomaly{color:#a87c00;font-weight:600}
.wdtbadge{display:inline-block;background:linear-gradient(135deg,#3a9e58,#2c7d46);color:#fff;border-radius:3px;font-size:11px;padding:0 4px;margin-right:2px;box-shadow:0 1px 3px rgba(44,125,70,.4)}
.cardbadge{display:inline-block;background:linear-gradient(135deg,#5a6ac0,#4653a5);color:#fff;border-radius:3px;font-size:11px;padding:0 4px;margin-right:2px;box-shadow:0 1px 3px rgba(70,83,165,.4)}
.prembadge{display:inline-block;background:linear-gradient(135deg,#c04a8c,#a03a74);color:#fff;border-radius:3px;font-size:11px;padding:0 4px;margin-right:2px;box-shadow:0 1px 3px rgba(160,58,116,.4)}
.cxbadge{display:inline-block;background:linear-gradient(135deg,#0f9d8a,#0b7f70);color:#fff;border-radius:3px;font-size:11px;padding:0 4px;margin-right:2px;box-shadow:0 1px 3px rgba(11,127,112,.4)}.rowcard{background:#eef2fd}
.rowcard td.name{background:#f4f6fd}
.rowprem{background:#fdf0f6}
.rowprem td.name{background:#fbf0f7}
.rowcx{background:#eaf7f3}
.rowcx td.name{background:#f1faf7}
.rowcxc{background:#d8f0ea}
.rowcxc td.name{background:#e4f7f2}
.chkbtn{font-size:13px;font-weight:700;padding:2px 7px;margin:0 1px;color:#9aa0a8;border:1px solid #d6d9dd;transition:all .18s ease}
.chkbtn.ok{background:#1d7a32;color:#fff;border-color:#1d7a32}
.chkbtn.bad{background:#c0392b;color:#fff;border-color:#c0392b}
.sync-status{margin-left:10px;font-size:12px;font-weight:700;padding:2px 8px;border-radius:10px;transition:all .3s ease}
.sync-online{background:#e3f4e6;color:#1d7a32}
.sync-busy{background:#fdf3d8;color:#9a6b00}
.sync-err{background:#fbe3e0;color:#c0392b}
.b-yc td.name{background:#fdf1f0}
.b-szy td.name{background:#fdf7e8}
.rowparse td.name{background:#fdf4d0}
.rowunlock.rowparse td.name{background:#fffbe8}
.warn{color:#c0392b;font-weight:600}
textarea{width:100%;height:64px;border:1px solid #ccd0d5;border-radius:8px;padding:6px 8px;font-size:12px;font-family:Consolas,monospace;resize:vertical;transition:border-color .2s,box-shadow .2s;background:rgba(255,255,255,.9)}
textarea:focus{outline:none;border-color:#d4502e;box-shadow:0 0 0 3px rgba(212,80,46,.14)}
button.btn{border:1px solid #c9ccd1;background:rgba(247,248,250,.9);border-radius:8px;padding:5px 12px;cursor:pointer;font-size:13px;transition:all .2s ease}
button.btn:hover{background:#eceef1;transform:translateY(-1px);box-shadow:0 3px 8px rgba(30,32,36,.12)}
button.btn:active{transform:translateY(0);box-shadow:none}
button.btn.primary{background:linear-gradient(135deg,#b4232a,#d4502e);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(180,35,42,.3)}
button.btn.primary:hover{box-shadow:0 5px 14px rgba(180,35,42,.4)}
button.btn.danger{color:#b4232a;border-color:#e3b7b9}
button.btn.mini{padding:1px 7px;font-size:12px}
input.num{width:76px;border:1px solid #ccd0d5;border-radius:5px;padding:2px 4px;text-align:right;font-size:13px;transition:border-color .2s,box-shadow .2s;background:rgba(255,255,255,.92)}
input.num:focus{outline:none;border-color:#d4502e;box-shadow:0 0 0 2px rgba(212,80,46,.14)}
input.num.small{width:54px}
input.wname{border:1px solid #ccd0d5;border-radius:6px;padding:4px 8px;font-size:14px;font-weight:600;width:110px;transition:border-color .2s,box-shadow .2s}
input.wname:focus{outline:none;border-color:#d4502e;box-shadow:0 0 0 2px rgba(212,80,46,.14)}
.muted{color:#8a8f98;font-size:12px}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.neg{color:#c0392b;font-weight:700;background:#fdeaea}
.need-title{font-size:20px;font-weight:700;text-align:center;padding:8px 0 2px}
.need-sub{font-size:14px;text-align:center;color:#555;padding-bottom:8px}
td.speclabel{font-weight:700;background:#fafafa;white-space:nowrap}
.unitinp{display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.unitinp input{width:62px}
.unitinp .u{color:#8a8f98;font-size:12px}
input.zhijin{width:60px;text-align:right}
input.zhijin.man{color:#1a5fb4;font-weight:700;border-color:#8ec0f4}
.jin{white-space:nowrap}
.zhi{white-space:nowrap}
.card-head{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.wave-rows{max-height:430px;overflow:auto}
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(8px);background:rgba(30,32,36,.92);color:#fff;padding:8px 20px;border-radius:20px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:99;box-shadow:0 6px 20px rgba(0,0,0,.25)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.help{font-size:12.5px;color:#5a6068;line-height:1.7}
.help b{color:#b4232a}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c9ccd1;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:#aab0b8}
::-webkit-scrollbar-track{background:transparent}
/* ================= 视觉动效（粒子/水波纹/3D/流光） ================= */
#bgfx{position:fixed;inset:0;z-index:0;pointer-events:none}
header h1{background:linear-gradient(180deg,#fff 30%,#ffd9c2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))}
.card{transition:box-shadow .25s ease;position:relative}
.card:hover{box-shadow:0 8px 24px rgba(30,32,36,.11)}
/* 卡片顶部流光条（不带横向滚动的卡片用伪元素；带 overflow 滚动的卡片用背景图层，滚动时不移位） */
.card:not([style])::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;border-radius:12px 12px 0 0;pointer-events:none;
  background:linear-gradient(90deg,transparent,#d4502e 30%,#5a6ac0 55%,#c04a8c 75%,transparent);background-size:220% 100%;opacity:.5;animation:stripFlow 6s linear infinite}
@keyframes stripFlow{0%{background-position:0% 0}100%{background-position:220% 0}}
.card[style]:not(.glow){background-image:linear-gradient(90deg,transparent,#d4502e 30%,#5a6ac0 55%,#c04a8c 75%,transparent),linear-gradient(rgba(255,255,255,.88),rgba(255,255,255,.88));
  background-size:220% 3px,100% 100%;background-position:0% 0,0 0;background-repeat:no-repeat;animation:stripFlowBg 6s linear infinite;padding-top:15px}
@keyframes stripFlowBg{0%{background-position:0% 0,0 0}100%{background-position:220% 0,0 0}}
/* 批次订单滚动区：表头吸顶，长表滚动时列名不丢 */
.wave-rows thead th{position:sticky;top:0;z-index:3;box-shadow:0 1px 0 #d8dade}
.sync-busy{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
button.btn,nav button{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:ripple .6s ease-out forwards;pointer-events:none;z-index:1}
nav button .ripple{background:rgba(212,80,46,.25)}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}
/* 流光边框：蟹卡/精品等独立卡片 */
@property --ga{syntax:'<angle>';initial-value:0deg;inherits:false}
.card.glow{border:1px solid transparent;
  background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,.9)) padding-box,
             conic-gradient(from var(--ga),#d4502e,#5a6ac0,#c04a8c,#3a9e58,#d4502e) border-box;
  animation:spinB 5s linear infinite}
@keyframes spinB{to{--ga:360deg}}
@supports not (background:conic-gradient(from 0deg,red,blue)){.card.glow{border:1px solid #e3b7b9;box-shadow:0 0 0 1px rgba(212,80,46,.25),0 2px 10px rgba(30,32,36,.06)}}
.wdtbadge,.cardbadge,.prembadge{animation:badgePop .3s ease}
@keyframes badgePop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){body,header{animation:none}body::before,body::after{animation:none}.card,.card.glow{animation:none;transition:none}button.btn,nav button{transition:none}.sync-busy{animation:none}#bgfx{display:none}}
/* ================= 流畅模式开关：低配电脑关闭全部动效 / 毛玻璃 / 粒子 ================= */
html.fx-off body,html.fx-off header{animation:none}
html.fx-off body::before,html.fx-off body::after{display:none}
html.fx-off header::after{animation:none;display:none}
html.fx-off main section{animation:none}
html.fx-off .card,html.fx-off .card.glow{animation:none;transition:none}
html.fx-off .card:not([style])::before{animation:none;opacity:.35}
html.fx-off .card[style]:not(.glow){animation:none}
html.fx-off .card.glow{border:1px solid #e3b7b9}
html.fx-off .wdtbadge,html.fx-off .cardbadge,html.fx-off .prembadge{animation:none}
html.fx-off .sync-busy{animation:none}
html.fx-off .ripple{display:none}
html.fx-off #bgfx{display:none}
/* 毛玻璃模糊是低配机主要卡顿源，改为纯色底 */
html.fx-off nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:#f4f5f7}
html.fx-off .card,html.fx-off .card[style]:not(.glow){backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
html.fx-off table{background:#fff}
html.fx-off textarea,html.fx-off input.num,html.fx-off input.wname{background:#fff}
/* 取消位移/阴影过渡，点击响应更直接 */
html.fx-off button.btn,html.fx-off nav button,html.fx-off .chkbtn,html.fx-off textarea,
html.fx-off input.num,html.fx-off input.wname,html.fx-off .sync-status,html.fx-off tbody tr{transition:none}
html.fx-off button.btn:hover,html.fx-off nav button:hover{transform:none}
/* 页头动效开关按钮 */
.fxbtn{border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.14);color:#fff;border-radius:16px;
  padding:3px 12px;font-size:12px;cursor:pointer;white-space:nowrap}
.fxbtn:hover{background:rgba(255,255,255,.28)}
.fxbtn.on{background:#fff;color:#b4232a;border-color:#fff;font-weight:700}