:root{
  --ink:#14181C;
  --ink-2:#3D454C;
  --sub:#7A848C;
  --line:#EDF0F1;
  --bg:#F4F6F5;
  --card:#FFFFFF;
  --brand:#0B7A5B;
  --brand-2:#0E9C73;
  --brand-soft:#E7F4EF;
  --warn:#E4512B;
  --warn-soft:#FCEBE6;
  --gold:#FFB020;
  --radius:16px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:#E9EDEB;
}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input{font:inherit;outline:none;border:0;background:none;color:inherit}
img{display:block}

.app{position:fixed;inset:0;width:100%;max-width:480px;height:100vh;height:100dvh;margin:0 auto;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
@media (min-width:481px){.app{box-shadow:0 0 40px rgba(20,24,28,.1)}}

/* ---------- 扫码引导 ---------- */
.gate{position:absolute;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 32px;text-align:center}
.gate[hidden]{display:none}
.gate-mark{width:62px;height:62px;border-radius:20px;background:linear-gradient(145deg,#12A87C,#086B50);color:#fff;font-size:28px;font-weight:800;display:grid;place-items:center;box-shadow:0 16px 30px rgba(11,122,91,.24)}
.gate h1{margin:24px 0 10px;font-size:19px;letter-spacing:.3px}
.gate p{margin:0;font-size:13px;line-height:1.8;color:var(--sub);max-width:280px}
.gate-tip{margin-top:26px;font-size:11px;color:#9AA4AA;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px}

/* ---------- 顶部 ---------- */
.topbar{flex:none;background:#fff;padding:calc(10px + env(safe-area-inset-top)) 16px 10px}
.brandrow{display:flex;align-items:center;justify-content:space-between;height:36px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;letter-spacing:.2px}
.brand .mark{width:26px;height:26px;border-radius:9px;background:linear-gradient(145deg,#12A87C,#086B50);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800}
.brand small{font-size:10px;font-weight:600;color:var(--brand);background:var(--brand-soft);padding:2px 6px;border-radius:6px;letter-spacing:.6px}
.iconbtn{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:#F3F5F4;color:var(--ink-2)}
.devicebar{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--sub)}
.devicebar .dot{width:6px;height:6px;border-radius:50%;background:#12B76A;box-shadow:0 0 0 3px rgba(18,183,106,.14);flex:none}
.devicebar.offline .dot{background:#9CA3AF;box-shadow:0 0 0 3px rgba(156,163,175,.16)}
.devicebar .name{color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.devicebar .devtag{margin-left:auto;font-size:10px;color:var(--brand);background:var(--brand-soft);padding:3px 7px;border-radius:999px;white-space:nowrap}
.devicebar.offline .devtag{color:#6B7280;background:#F1F3F2}

/* ---------- 滚动区 ---------- */
.view{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:32px;display:none}
.view.active{display:block}
.view::-webkit-scrollbar{display:none}

/* ---------- 统计 ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px 16px 0}
.stat{background:var(--card);border:1px solid rgba(20,24,28,.05);border-radius:14px;padding:10px 6px;text-align:center;box-shadow:0 2px 8px rgba(20,24,28,.03)}
.stat b{display:block;font-size:19px;line-height:1.25;letter-spacing:.3px}
.stat span{display:block;margin-top:2px;font-size:10px;color:var(--sub)}
.stat.ok b{color:var(--brand)}
.stat.warn b{color:#C2410C}
.stat.mute b{color:#8A959B}

/* ---------- 提示 ---------- */
.notice{display:flex;align-items:flex-start;gap:6px;margin:12px 18px 2px;font-size:11px;line-height:1.6;color:#4B6B5F}
.notice svg{flex:none;margin-top:2px}

/* ---------- 分区网格 ---------- */
.zone{padding:12px 16px 2px}
.zone-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.zone-head h2{margin:0;font-size:14px;letter-spacing:.2px}
.zone-head span{font-size:11px;color:var(--sub)}
.zone-grid{
  display:grid;
  gap:6px;
  grid-template-columns:repeat(var(--cols,10),minmax(70px,1fr));
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:none;
}
.zone-grid::-webkit-scrollbar{display:none}

.cell{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2px;
  min-height:74px;
  padding:8px 8px 10px;
  border-radius:12px;
  border:1px solid #E6EAE8;
  background:var(--card);
  text-align:left;
  overflow:hidden;
  transition:transform .15s,box-shadow .15s;
}
.cell:active{transform:scale(.97)}
.cell .lane{font-size:10px;font-weight:700;color:#9AA4AA;letter-spacing:.4px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.cell .pname{margin-top:2px;font-size:11px;line-height:1.35;font-weight:600;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-all;flex:1}
.cell .stock{font-size:10px;color:var(--sub);letter-spacing:.2px}
.cell .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#F0F3F1}
.cell .bar b{display:block;height:100%;border-radius:0 2px 2px 0;background:var(--brand-2)}

.cell.st-normal{border-color:#D6EDE3;background:linear-gradient(180deg,#FBFEFC,#F1FAF6)}
.cell.st-normal .stock{color:var(--brand)}
.cell.st-low{border-color:#FBE2CF;background:linear-gradient(180deg,#FFFDF9,#FEF4E8)}
.cell.st-low .stock{color:#C2410C}
.cell.st-low .bar b{background:var(--gold)}
.cell.st-out{border-color:#F8D9D2;background:linear-gradient(180deg,#FFFCFB,#FDEFEC)}
.cell.st-out .stock{color:var(--warn)}
.cell.st-out .bar b{background:var(--warn)}
.cell.st-empty{border-style:dashed;border-color:#DCE2DF;background:#FAFBFA}
.cell.st-empty .pname{color:#A8B1B5;font-weight:500}
.cell.st-empty .bar{display:none}

/* ---------- 图例 ---------- */
.legend{display:flex;flex-wrap:wrap;gap:14px;padding:12px 18px 0;font-size:11px;color:var(--sub)}
.legend span{display:flex;align-items:center;gap:5px}
.lg{width:8px;height:8px;border-radius:3px;display:inline-block}
.lg.normal{background:#12B76A}
.lg.low{background:var(--gold)}
.lg.out{background:var(--warn)}
.lg.empty{background:#DCE2DF}

.homefoot{padding:20px 18px 8px;font-size:11px;line-height:1.9;color:#9AA4AA;text-align:center}
.homefoot b{color:#7A848C}

/* ---------- 遮罩与面板 ---------- */
.mask{position:absolute;inset:0;z-index:90;background:rgba(10,16,14,.42);opacity:0;pointer-events:none;transition:.22s}
.mask.on{opacity:1;pointer-events:auto}

.sheet{position:absolute;left:0;right:0;bottom:0;z-index:100;max-height:86vh;background:#fff;border-radius:22px 22px 0 0;display:flex;flex-direction:column;transform:translateY(104%);transition:transform .26s cubic-bezier(.32,.72,0,1)}
.sheet.on{transform:translateY(0)}
.sheet .handle{flex:none;width:40px;height:4px;border-radius:99px;background:#E3E7E5;margin:8px auto 2px}
.sheet-head{flex:none;display:flex;align-items:flex-start;gap:12px;padding:8px 18px 6px}
.sheet-head h3{margin:0;font-size:16px;letter-spacing:.2px}
.sheet-sub{margin:3px 0 0;font-size:11px;color:var(--sub)}
.sheet-head .x{flex:none;width:28px;height:28px;border-radius:50%;background:#F3F5F4;color:var(--ink-2);display:grid;place-items:center;margin-left:auto}
.sheet-body{flex:1;min-height:0;overflow-y:auto;padding:4px 18px 10px;-webkit-overflow-scrolling:touch}
.sheet-body::-webkit-scrollbar{display:none}
.sheet-foot{flex:none;padding:10px 18px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}

/* 当前货道 */
.cur{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#F8FAF9;border:1px solid #EEF2F0}
.cur .thumb{flex:none;width:46px;height:46px;border-radius:10px;background:#EDF1EF;display:grid;place-items:center;font-size:16px;color:#A8B1B5;overflow:hidden}
.cur .thumb img{width:100%;height:100%;object-fit:cover}
.cur .meta{min-width:0;flex:1}
.cur .meta b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cur .meta small{display:block;margin-top:2px;font-size:11px;color:var(--sub)}
.cur .cap{flex:none;text-align:right}
.cur .cap b{display:block;font-size:16px;color:var(--brand);letter-spacing:.2px}
.cur .cap span{font-size:10px;color:var(--sub)}

.field-label{display:flex;align-items:baseline;justify-content:space-between;margin:16px 0 8px;font-size:12px;color:var(--ink-2)}
.field-label em{font-style:normal;font-size:11px;color:var(--sub)}

.search{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:#F5F7F6;color:var(--sub)}
.search input{flex:1;font-size:13px}

.plist{margin-top:8px;max-height:216px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.plist::-webkit-scrollbar{display:none}
.pitem{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid #F3F5F4}
.pitem:last-child{border-bottom:0}
.pitem .pimg{flex:none;width:38px;height:38px;border-radius:9px;background:#F1F3F2;overflow:hidden;display:grid;place-items:center;color:#B9C1BE;font-size:13px}
.pitem .pimg img{width:100%;height:100%;object-fit:cover}
.pitem .pmeta{flex:1;min-width:0}
.pitem .pmeta b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pitem .pmeta small{display:block;margin-top:2px;font-size:11px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pitem .tag{flex:none;font-size:10px;color:var(--brand);background:var(--brand-soft);padding:2px 6px;border-radius:999px}
.pitem .radio{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid #D6DDDA;position:relative}
.pitem.on .radio{border-color:var(--brand);background:var(--brand)}
.pitem.on .radio::after{content:"";position:absolute;left:5px;top:5px;width:6px;height:6px;border-radius:50%;background:#fff}
.pempty{padding:18px 0;text-align:center;font-size:12px;color:#A8B1B5}

.qty-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.stepper{display:flex;align-items:center;gap:0;border:1px solid #E3E7E5;border-radius:10px;overflow:hidden;background:#fff}
.stepper button{width:36px;height:34px;display:grid;place-items:center;font-size:17px;color:var(--ink-2);background:#F7F9F8}
.stepper button:active{background:#EEF2F0}
.stepper input{width:54px;height:34px;text-align:center;font-size:14px;font-weight:600;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.quick{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.quick button{font-size:11px;color:var(--ink-2);background:#F5F7F6;border:1px solid #EDF0F1;border-radius:999px;padding:6px 12px}
.quick button:active{background:#EDF1EF}

.swap-tip{margin-top:12px;padding:9px 12px;border-radius:10px;background:var(--warn-soft);color:#B23A18;font-size:11px;line-height:1.6}
.swap-tip[hidden]{display:none}

.btn-main{width:100%;height:46px;border-radius:13px;background:linear-gradient(135deg,#0E9C73,#0B7A5B);color:#fff;font-size:15px;font-weight:600;letter-spacing:1px;box-shadow:0 8px 18px rgba(11,122,91,.22)}
.btn-main:disabled{opacity:.55;box-shadow:none}

/* ---------- 提示条 ---------- */
.toast{position:absolute;left:50%;bottom:96px;z-index:300;transform:translate(-50%,10px);max-width:80%;padding:10px 16px;border-radius:12px;background:rgba(20,24,28,.88);color:#fff;font-size:12px;line-height:1.5;text-align:center;opacity:0;pointer-events:none;transition:.22s}
.toast.on{opacity:1;transform:translate(-50%,0)}