/* iOS 12 Safari safe: no flex gap, no inset, no aspect-ratio, no :is/:where. Spacing uses margins. */
* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0); }
html, body { margin: 0; padding: 0; }
body { font: 17px/1.35 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1d2b26; background: #f5f3ee; -webkit-text-size-adjust: 100%; }
button, input { font: inherit; }
button { touch-action: manipulation; -webkit-appearance: none; border-radius: 10px; border: 1px solid #b9c4bf; background: #fff; color: #1d2b26; padding: 10px 16px; cursor: pointer; }
button.primary { background: #2f5d50; border-color: #2f5d50; color: #fff; }
.muted { color: #6a7772; }
.center { text-align: center; }
header { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: #fff; border-bottom: 1px solid #ddd;
  padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); position: -webkit-sticky; position: sticky; top: 0; z-index: 5; }
header .logo { height: 36px; margin-right: 12px; }
header .title { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
header .title b { font-size: 21px; margin-right: 10px; }
.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #e8ece9; font-size: 14px; margin-right: 6px; border: 0; }
.pill.status { margin-right: 8px; }
.pill.ok { background: #d6efdd; color: #165c2c; }
.pill.warn { background: #fdecc8; color: #7a4b00; }
.pill.bad { background: #f9d4d0; color: #8a1c12; }
.iconbtn { font-size: 24px; padding: 4px 12px; }
#banners .banner { padding: 10px 14px; font-size: 15px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.banner.example { background: #fff1b8; font-weight: 600; }
.banner.warn { background: #fdecc8; }
.banner.bad { background: #f9d4d0; }
main { padding: 12px; padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.view { display: none; }
.view.on { display: block; }
.tiles { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: -6px; }
.tile { width: 33.333%; padding: 6px; }
@media (max-width: 800px) { .tile { width: 50%; } }
.tile button { width: 100%; min-height: 128px; text-align: left; padding: 14px; border-radius: 14px; border: 2px solid #cfd8d3; background: #fff; display: block; }
.tile button.restock { border-color: #c9a227; }
.tile .tname { display: block; font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.tile .tmeta { display: block; font-size: 14px; color: #6a7772; }
.tile .tprog { display: block; margin-top: 8px; font-size: 15px; font-weight: 600; color: #2f5d50; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: #e3ece8; color: #2f5d50; margin-right: 6px; text-transform: uppercase; }
.badge.restock { background: #f7e7b0; color: #6b5200; }
.binhead { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin-bottom: 10px; }
.binhead .back { margin-right: 14px; }
.bintitle b { font-size: 22px; display: block; }
.note { background: #fff; border-left: 4px solid #c9a227; padding: 8px 12px; margin-bottom: 10px; font-size: 15px; }
.colheads { display: -webkit-box; display: -webkit-flex; display: flex; font-weight: 700; color: #6a7772; font-size: 14px; text-transform: uppercase; padding: 0 4px 6px; }
.lefthead, .left { width: 55%; }
.righthead, .right { width: 45%; }
.righthead { text-align: center; }
.line { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; background: #fff; border-radius: 12px; margin-bottom: 8px; padding: 8px; border: 2px solid transparent; }
.line.entered { border-color: #9cc9ad; }
.line.pending { border-color: #e7c36a; }
.left { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; }
.photo { width: 88px; height: 88px; border-radius: 8px; background: #eef0ee; -webkit-flex-shrink: 0; flex-shrink: 0; margin-right: 12px; overflow: hidden; text-align: center; }
.photo img { width: 88px; height: 88px; object-fit: cover; display: block; }
.photo .ph { display: block; padding-top: 26px; font-size: 13px; color: #7d8a85; line-height: 1.2; }
.info .cat { display: block; font-size: 13px; color: #6a7772; text-transform: uppercase; }
.info .design { display: block; font-size: 19px; font-weight: 700; }
.info .lnote { display: block; font-size: 13px; color: #8a5a00; }
.info .tgt { display: block; font-size: 16px; margin-top: 2px; }
.info .tgt b { font-size: 22px; }
.right { text-align: center; white-space: nowrap; }
.right button.step { width: 64px; height: 64px; font-size: 32px; font-weight: 700; padding: 0; border-radius: 14px; vertical-align: middle; }
.right button.minus { background: #fbeaea; border-color: #e3b3b3; }
.right button.plus { background: #e4f3e8; border-color: #9cc9ad; }
.right input.qty { width: 84px; height: 64px; font-size: 30px; font-weight: 700; text-align: center; margin: 0 8px; border: 2px solid #b9c4bf; border-radius: 12px; vertical-align: middle; -webkit-appearance: none; }
.right .fill { display: block; margin: 6px auto 0; font-size: 13px; padding: 4px 10px; }
.binfoot { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; padding: 10px 4px; font-weight: 600; }
#setup label { display: block; margin-bottom: 12px; }
#setup input, #setup textarea { display: block; width: 100%; padding: 10px; border: 1px solid #b9c4bf; border-radius: 8px; margin-top: 4px; font-size: 16px; }
.row button { margin: 0 8px 8px 0; }
#toast { position: fixed; left: 50%; bottom: 24px; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #1d2b26; color: #fff; padding: 10px 18px; border-radius: 10px; z-index: 10; }