*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,'Noto Sans Thai',sans-serif;background:#f6f7f9;color:#17202a;padding-bottom:78px}header{background:linear-gradient(135deg,#111827,#374151);color:#fff;padding:18px 18px 20px;display:flex;justify-content:space-between;align-items:center}header h1{margin:0;font-size:28px}header p{margin:3px 0 0;color:#d1d5db;font-size:13px}button{border:0;border-radius:12px;padding:11px 14px;font-weight:700;background:#e5e7eb}header button,.primary,.sectionHead button,.actions button{background:#f59e0b;color:#111827}main{max-width:820px;margin:auto;padding:14px}.page{display:none}.page.active{display:block}.hero{background:#fff3d6;border:1px solid #f7d78a;padding:18px;border-radius:20px;margin-bottom:12px}.hero h2{margin:0}.hero p{margin:5px 0 0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.stat{background:white;padding:14px 8px;border-radius:16px;text-align:center;box-shadow:0 2px 12px #0000000b}.stat b{font-size:25px;display:block}.stat span{font-size:12px;color:#6b7280}.stat.warn b{color:#d97706}.stat.danger b{color:#dc2626}.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0 20px}.actions button{min-height:58px}.sectionHead{display:flex;align-items:center;justify-content:space-between}.search,input,select,textarea{width:100%;border:1px solid #d1d5db;border-radius:12px;padding:12px;font:inherit;background:white}.search{margin:8px 0 12px}.cards{display:grid;gap:9px}.card{background:white;border-radius:16px;padding:12px;display:flex;gap:12px;align-items:center;box-shadow:0 2px 12px #0000000b}.card img{width:72px;height:72px;border-radius:12px;object-fit:cover;background:#f3f4f6}.card .grow{flex:1}.card h3{margin:0 0 3px;font-size:16px}.muted{font-size:12px;color:#6b7280}.qty{font-size:19px;font-weight:800}.badge{display:inline-block;font-size:11px;padding:3px 7px;border-radius:999px;background:#fef3c7;color:#92400e}nav{position:fixed;bottom:0;left:0;right:0;background:white;border-top:1px solid #e5e7eb;display:flex;justify-content:center;z-index:5}nav button{width:min(25%,205px);background:white;border-radius:0;padding:10px 4px;color:#6b7280;font-size:20px}nav button span{display:block;font-size:11px}nav button.on{color:#d97706}dialog{width:min(94%,560px);border:0;border-radius:20px;padding:0;box-shadow:0 20px 80px #0005}dialog::backdrop{background:#0008}dialog form{padding:18px}dialog h2{margin-top:0}label{display:block;font-size:13px;font-weight:700;margin:10px 0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dialogBtns{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.photoBox{margin-top:7px}.photoBox img{display:none;width:100%;max-height:220px;object-fit:cover;border-radius:14px;margin-bottom:8px}textarea{min-height:70px}@media(max-width:540px){.stats{grid-template-columns:1fr 1fr}.actions{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}
.materialPlaceholder{width:92px;height:92px;border-radius:14px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;font-size:38px;flex:0 0 92px}

.categoryPicker{border:1px solid #d7dce3;border-radius:16px;padding:12px;background:#fafbfc;margin-top:6px}.categoryChoices{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;max-height:150px;overflow:auto}.catChoice{margin:0!important;cursor:pointer}.catChoice input{position:absolute;opacity:0;pointer-events:none}.catChoice span{display:inline-block;padding:8px 12px;border:1px solid #d5d9df;border-radius:999px;background:#fff;font-weight:600;font-size:14px}.catChoice input:checked+span{background:#fff3d6;border-color:#f59e0b;box-shadow:0 0 0 2px rgba(245,158,11,.12)}.catChoice input:checked+span:before{content:'✓ ';font-weight:900}.categoryAddRow{display:flex;gap:8px}.categoryAddRow input{flex:1;margin:0}.categoryAddRow button{white-space:nowrap;border:0;border-radius:12px;padding:0 14px;font-weight:700;background:#e9edf2}

.productFilters{display:grid;grid-template-columns:minmax(0,2fr) minmax(180px,1fr);gap:12px;margin-bottom:16px}.productFilters .search{margin:0;width:100%}@media(max-width:640px){.productFilters{grid-template-columns:1fr}.productFilters select.search{min-height:52px}}
.headerActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.headerActions button{width:auto}.viewer .staffOnly{display:none!important}.roleBadge{font-weight:700}.loading{opacity:.65;pointer-events:none}

.deleteBtn{background:#dc2626!important;color:#fff!important}.dialogSpacer{flex:1}.deleteBtn:disabled{opacity:.6}