body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
.back{background:#fff2;border:0;color:#fff;font-size:22px;width:40px;height:40px;border-radius:10px;cursor:pointer;flex:none}
.tabs{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:30}
.tabs a{flex:1;text-align:center;text-decoration:none;color:var(--ink-2);font-size:12px;font-weight:600;padding:4px 0;border-radius:10px;position:relative}
.tabs a .ic{display:block;font-size:20px;line-height:1.2}
.tabs a.on{color:var(--wine);background:var(--wine-soft)}
.dot{position:absolute;top:2px;right:calc(50% - 18px);background:var(--red);color:#fff;font-size:11px;border-radius:999px;min-width:18px;height:18px;line-height:18px;padding:0 4px}
.sec-h{display:flex;align-items:center;gap:8px;margin:18px 0 8px}
.sec-h h2{font-size:18px;margin:0;flex:1}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.stat{padding:12px 10px;text-align:center}
.stat .v{font-size:19px;font-weight:800;margin-top:2px}
.stat .l{font-size:12px;color:var(--ink-2);font-weight:600}
.v.debt{color:var(--red)} .v.cred{color:var(--ok)}
.list{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.li{display:flex;gap:10px;align-items:center;padding:12px 14px;text-decoration:none;color:inherit;cursor:pointer}
.li .t{font-weight:700}
.li .s{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amt{font-weight:800;white-space:nowrap}
.amt.debt{color:var(--red)} .amt.cred{color:var(--ok)} .amt.zero{color:var(--ink-2);font-weight:600}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.lg{padding:0}
.lg .e{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.lg .e:last-child{border-bottom:0}
.lg .e .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;font-size:16px}
.lg .e.o .ic{background:var(--wine-soft)} .lg .e.y .ic{background:var(--ok-soft)}
.lg .rb{font-size:12px;color:var(--ink-2);text-align:left}
.toolbar{display:flex;gap:8px;margin-top:12px;align-items:center}
.toolbar .i{min-height:42px}
.line{padding:12px;margin-bottom:8px}
.line .g{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.line .g label{font-size:12px;color:var(--ink-2);font-weight:600}
.line .g .i{padding:8px;min-height:42px}
.line .lt{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.tot{position:sticky;bottom:calc(70px + env(safe-area-inset-bottom));background:var(--bg);padding:10px 0;display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);margin-top:10px}
.tot .big{font-size:20px;font-weight:800;flex:1}
.kv{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--line);gap:10px}
.login{max-width:360px;margin:60px auto;text-align:center;padding:28px 20px}
.login input{text-align:center;font-size:28px;letter-spacing:8px}
.contact{padding:14px}
.cbtns{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pinfo{background:var(--warn-soft);border:1px solid #f2d3b0;border-radius:12px;padding:10px 12px;margin:10px 0}
.check{display:flex;gap:8px;align-items:center;margin-top:12px;font-weight:600}
.check input{width:22px;height:22px;accent-color:var(--wine)}
.cat-h{font-size:14px;font-weight:700;color:var(--ink-2);margin:14px 4px 6px}

.toolbar.tb2{display:grid;grid-template-columns:minmax(0,1fr) 132px}
.toolbar.tb2 .i{width:100%}

/* product photos */
.pth{width:46px;height:46px;border-radius:10px;object-fit:cover;flex:none;background:#f1e9de}
.pth.none{display:grid;place-items:center;font-weight:700;font-size:18px;color:#b9a68c;background:#f3ebdf}
.pimg-box{margin-top:12px}
.pimg{width:100%;max-width:340px;margin:0 auto;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#f1e9de;border:1px solid var(--line)}
.pimg>img{width:100%;height:100%;object-fit:cover;display:block}
.pimg.none{display:grid;place-items:center;background:radial-gradient(circle at 50% 42%,#fdfaf5 0,#f3ebdf 70%,#ece1d2 100%)}
.pimg.none>img{width:60%;height:auto;object-fit:contain;opacity:.26}

/* suppliers */
.sup-stat{margin-top:8px;border:1px solid #cbd8ee;background:#f7f9fd}
.g2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px}
.g2 .i{width:100%}
.tabs a{font-size:11.5px;min-width:0}

.crl{color:#7a1f2b;font-weight:700}
.crreq{margin-top:10px;background:#fff6e5;border:1.5px solid #e0a23a;border-radius:12px;padding:10px 12px;font-weight:700}

.oosT{flex:none;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);border-radius:999px;padding:5px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.oosT.on{background:var(--red);border-color:var(--red);color:#fff}

.wl{margin-top:8px;background:#faf7f2;border:1px dashed var(--line);border-radius:12px;padding:8px}
.wg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:4px}
.wb span{display:block;font-size:12px;color:var(--ink-2);font-weight:600}
.wb input{min-height:42px;text-align:center;font-size:17px;padding:6px}
.stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.stat .v{font-size:clamp(14px,4.6vw,19px)}

/* send-to-customer sheet */
body.noscroll{overflow:hidden}
.sshw{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center}
.sshbg{position:absolute;inset:0;background:rgba(20,10,12,.45)}
.ssh{position:relative;background:#fff;width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:18px 18px 0 0;padding:14px 14px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px rgba(0,0,0,.2)}
.sshh{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sshok{background:var(--ok-soft,#e5f3eb);color:var(--ok);font-weight:800;border-radius:10px;padding:8px 10px;margin:4px 0 6px}
.sshlab{font-weight:700;font-size:14px;color:var(--ink-2);margin:12px 0 6px}
.sshopts{display:grid;gap:6px}
.sopt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer;line-height:1.35}
.sopt input{width:20px;height:20px;margin-top:2px;accent-color:var(--wine);flex:none}
.sopt:has(input:checked){border-color:var(--wine);background:var(--wine-soft)}
.spick{border:1px solid var(--line);border-radius:12px;max-height:210px;overflow:auto;margin:-2px 0 2px}
.sord{display:flex;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);cursor:pointer;font-size:15px}
.sord:last-child{border-bottom:0}
.sord input{width:20px;height:20px;accent-color:var(--wine);flex:none}
.sbal{margin:10px 0 0}
.sprev{white-space:pre-wrap;background:#f6f1ea;border-radius:12px;padding:10px 12px;font-size:14px;line-height:1.45;max-height:34vh;overflow:auto;border:1px solid var(--line)}
.sneed{margin-top:10px;border:1.5px dashed var(--wine);border-radius:12px;padding:10px 12px}
.ssend{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;position:sticky;bottom:0;background:#fff;padding-top:6px}
.ssend .btn{text-align:center;justify-content:center;font-size:17px;min-height:50px}
.btn.wa{background:#1fa855;border-color:#1fa855;color:#fff}
.ssend .btn.off{opacity:.45}
.ssend .btn{display:flex;flex-direction:column;align-items:center;line-height:1.2;white-space:nowrap}
.ssend .btn .hint{display:block;font-size:12px;font-weight:600;opacity:.9}