:root{
  --bg:var(--tg-theme-bg-color,#fff);--fg:var(--tg-theme-text-color,#1b1b1f);
  --muted:var(--tg-theme-hint-color,#8a8a92);--card:var(--tg-theme-secondary-bg-color,#f3f3f6);
  --accent:var(--tg-theme-button-color,#2f80ed);--accentFg:var(--tg-theme-button-text-color,#fff);
  --line:color-mix(in srgb,var(--muted) 25%,transparent);
  --ok:#2e9d5b;--low:#d98b16;--out:#c9473d;--look:#7a5af5;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
header{position:sticky;top:0;z-index:5;background:var(--bg);padding:10px 14px 0;border-bottom:1px solid var(--line)}
.title{display:flex;align-items:baseline;gap:10px}
.title span{font-weight:700;font-size:20px}
.title small{color:var(--muted);font-size:12px}
nav{display:flex;gap:4px;margin-top:8px}
nav button{flex:1;border:0;background:none;color:var(--muted);padding:9px 0 10px;font-size:14px;font-weight:600;border-bottom:2px solid transparent}
nav button.on{color:var(--accent);border-color:var(--accent)}
main{padding:12px 14px 90px}
.tab{display:none}.tab.on{display:block}
input[type=search],#addName{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:16px}
.chips{display:flex;gap:6px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:none}
.chips button{white-space:nowrap;border:1px solid var(--line);background:none;color:var(--fg);border-radius:999px;padding:6px 11px;font-size:13px}
.chips button.on{background:var(--accent);color:var(--accentFg);border-color:var(--accent)}
.chips b{font-weight:700}
.hint,.cap{color:var(--muted);font-size:12.5px;margin:6px 2px}
h4.sec{margin:16px 2px 4px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.item{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line)}
.item .n{flex:1;min-width:0}
.item .n div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .m{color:var(--muted);font-size:12px}
.item .q{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pill{display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.p-ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 13%,transparent)}
.p-low{color:var(--low);background:color-mix(in srgb,var(--low) 15%,transparent)}
.p-out{color:var(--out);background:color-mix(in srgb,var(--out) 13%,transparent)}
.p-check,.p-look{color:var(--look);background:color-mix(in srgb,var(--look) 13%,transparent)}
.p-list{color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent)}
.dim{opacity:.55}
#addForm{display:flex;gap:8px;margin-bottom:8px}
#addForm button,.primary{border:0;border-radius:10px;background:var(--accent);color:var(--accentFg);font-weight:600;padding:10px 16px;font-size:15px}
.gl{display:flex;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line)}
.gl span{flex:1}
.gl button{border:0;background:none;color:var(--muted);font-size:20px;padding:0 6px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.kpi{background:var(--card);border-radius:12px;padding:10px 12px}
.kpi b{display:block;font-size:20px}
.kpi span{color:var(--muted);font-size:12px}
.card{background:var(--card);border-radius:14px;padding:12px;margin-bottom:12px}
.card h3{margin:0 0 6px;font-size:15px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl td{padding:6px 2px;border-bottom:1px solid var(--line)}
.tbl td:last-child{text-align:right;white-space:nowrap}
.over{color:var(--out);font-weight:600}
.ev{padding:9px 2px;border-bottom:1px solid var(--line)}
.ev .m{color:var(--muted);font-size:12px}
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:20;display:flex;align-items:flex-end}
.sheet[hidden]{display:none}
.sheetBox{background:var(--bg);width:100%;border-radius:16px 16px 0 0;padding:8px 16px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow:auto}
.grab{width:40px;height:4px;border-radius:2px;background:var(--line);margin:4px auto 10px}
.sheetBox h2{margin:0;font-size:18px}
.meta{color:var(--muted);font-size:12.5px;margin:4px 0}
.qty{display:flex;align-items:center;gap:8px;margin:14px 0}
.qty button{width:46px;height:46px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--fg);font-size:22px}
.qty input{flex:1;min-width:0;text-align:center;font-size:22px;padding:8px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--fg)}
.qty span{color:var(--muted);min-width:44px}
.row3{display:flex;gap:6px;margin-bottom:12px}
.row3 button{flex:1;padding:10px 0;border-radius:10px;border:1px solid var(--line);background:none;color:var(--fg);font-weight:600}
.row3 button.on{background:var(--fg);color:var(--bg)}
.sheetBox .primary{width:100%;margin-bottom:6px}
.ghost{width:100%;border:0;background:none;color:var(--accent);padding:10px;font-size:15px;font-weight:600}
#toast{position:fixed;left:14px;right:14px;bottom:calc(16px + env(safe-area-inset-bottom));background:#222;color:#fff;border-radius:12px;padding:11px 14px;display:flex;align-items:center;z-index:30}
#toast[hidden]{display:none}
#toast span{flex:1}
#toast button{border:0;background:none;color:#8fc1ff;font-weight:700;font-size:15px}
#locked{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:30px;text-align:center;z-index:40}
#locked[hidden]{display:none}
.empty{color:var(--muted);text-align:center;padding:30px 0}