/* Mobile-first. Base = phone; wider screens enhance. */
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#f4f1ea;color:#222;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
a{color:#2b6a3f}main{max-width:1200px;margin:0 auto;padding:10px}h1{font-size:1.35rem;margin:.3em 0}h2{font-size:1.1rem;margin:.2em 0 .6em}h1 small{font-size:.8rem;font-weight:400}
.top{display:flex;align-items:center;gap:12px;background:#1b2a16;color:#fff;padding:10px 14px;position:sticky;top:0;z-index:20}
.top .brand{color:#fff;font-weight:700;text-decoration:none;font-size:1.15rem}.topnav{display:none}
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:#fff;border-top:1px solid #ddd;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 8px #0001}
.bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:62px;font-size:.75rem;color:#555;text-decoration:none}
.bottomnav a span{font-size:1.45rem;line-height:1.1}.bottomnav a.on{color:#2b6a3f;font-weight:700;background:#eef6ee}
.bottomnav #navscan span{background:#2b6a3f;color:#fff;border-radius:50%;width:46px;height:46px;display:flex;align-items:center;justify-content:center;margin-top:-18px;box-shadow:0 2px 6px #0004}
.fab{display:none}
.card{background:#fff;border-radius:12px;padding:14px;margin:12px 0;box-shadow:0 1px 3px #0002}.narrow{max-width:420px;margin:40px auto}
.grid2{display:grid;grid-template-columns:1fr;gap:12px}.grid2 .card{margin:0}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.stat{background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 1px 3px #0002;font-size:.85rem;color:#555}.stat span{display:block;font-size:1.5rem;font-weight:700;color:#222}
.stat small{display:block;color:#777;font-size:.75rem}.stat.big{background:#1b2a16;color:#dfe;grid-column:1/-1}.stat.big span{color:#fff;font-size:2.6rem}.stat.big small{color:#bdb}
.stat.water span{color:#1f6fa8}.stat.warn span{color:#b5401f}.stat.good span{color:#2b7a3f}
input,select,textarea,button,.btn{font:inherit;font-size:17px;padding:10px 12px;border:1px solid #bbb;border-radius:8px;background:#fff;max-width:100%;min-height:46px}
input[type=checkbox]{min-height:0;width:24px;height:24px}
button,.btn{background:#2b6a3f;color:#fff;border-color:#2b6a3f;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:4px;touch-action:manipulation}
button.alt,.btn.alt{background:#fff;color:#2b6a3f}button.danger{background:#b5401f;border-color:#b5401f}button.x{padding:0 10px;min-height:32px}button.big{width:100%;font-size:1.2rem;min-height:60px}
.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.inline input[type=number]{width:6.5em}form.inline{margin:4px 0}#manual input{flex:1}
.filterbox summary{padding:12px;background:#fff;border-radius:10px;cursor:pointer;font-weight:600;box-shadow:0 1px 3px #0002}
.filters{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}.sortbar{font-size:.9rem;color:#666;overflow-x:auto;white-space:nowrap}.sortbar a{padding:6px 2px;display:inline-block}
.form fieldset{border:1px solid #ddd;border-radius:10px;margin:0 0 12px;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;min-width:0}
.form label,.goalform label,.staple label{display:flex;flex-direction:column;font-size:.85rem;color:#444;gap:3px;min-width:0}.form .w2,.form .w4,.staple .w2{grid-column:1/-1}
.barcoderow{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}.barcoderow label{flex:1 1 160px}
.calcout{background:#eef6ee;padding:10px;border-radius:8px;font-weight:600}
label.chk{display:inline-flex;flex-direction:row!important;align-items:center;gap:8px;min-height:46px}textarea{width:100%}
.t{border-collapse:collapse;width:100%}.t th,.t td{padding:8px;border-bottom:1px solid #e5e5e5;text-align:left;vertical-align:top}.t th{background:#f7f7f2;font-size:.85rem}
.t th a{color:#222}tr.expired td{background:#fde4dd}tr.soon td{background:#fff5d6}.tablewrap{overflow-x:auto}
.cards{display:grid;grid-template-columns:1fr;gap:10px}
.icard{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0002;padding:12px;display:grid;grid-template-columns:56px 1fr auto;gap:6px 10px;border-left:6px solid #9cc49f}
.icard.soon{border-left-color:#e9b949;background:#fffaf0}.icard.expired{border-left-color:#c8553d;background:#fff3ef}
.ihead{grid-column:2;text-decoration:none;color:#222;font-size:1.05rem}.ihead small{color:#777}
.imeta{grid-column:2;display:flex;flex-direction:column;font-size:.85rem;color:#555}
.qty{grid-column:3;grid-row:1/span 2;display:flex;flex-direction:column;align-items:center;gap:4px}.qty b{font-size:1.25rem}
.qty button{width:52px;height:52px;font-size:1.6rem;padding:0;border-radius:50%}.qty button[value=use]{background:#fff;color:#b5401f;border-color:#b5401f}
.scanner{width:100%;max-width:520px;margin:8px auto;position:relative;background:#000;border-radius:10px;overflow:hidden;min-height:200px}
.scanner video{width:100%;display:block}.scanner.big{min-height:260px}.scanner p{color:#fff;padding:12px;background:#333;margin:0}
.scanline{position:absolute;left:8%;right:8%;top:50%;height:2px;background:#f33;box-shadow:0 0 8px #f33}
.bigbtns{display:grid;grid-template-columns:1fr;gap:8px;margin:10px 0}.bigbtns>*{min-height:62px;font-size:1.15rem;flex-direction:column}.bigbtns small{font-size:.75rem;opacity:.8}
.notice{background:#fff5d6;border:1px solid #e9c46a;padding:10px 12px;border-radius:10px;margin:8px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.shoplist{display:flex;flex-direction:column;gap:6px}.shopitem{display:flex;gap:12px;align-items:flex-start;padding:10px;border:1px solid #e5e5e5;border-radius:10px;cursor:pointer}
.shopitem small{display:block;color:#777;font-size:.8rem}.shopitem.soon{background:#fff5d6}.shopitem.expired{background:#fde4dd}.shopitem input:checked+span{text-decoration:line-through;color:#999}
.goalform{display:grid;grid-template-columns:1fr 1fr;gap:10px}.goalform button{grid-column:1/-1}
.staplecards{display:grid;grid-template-columns:1fr;gap:10px}.staple{border:1px solid #ddd;border-radius:10px;padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.staple .actions{grid-column:1/-1}.staple.inactive{opacity:.6}.staple.newstaple{border-style:dashed;border-color:#2b6a3f}
.bar{display:grid;grid-template-columns:minmax(110px,1.4fr) 2fr 52px;gap:8px;align-items:center;font-size:.85rem;margin:6px 0}.bar div{background:#eee;border-radius:4px;height:14px}.bar i{display:block;height:100%;background:#5a9a62;border-radius:4px}
.flash{background:#e3f3e5;border:1px solid #9c9;padding:10px 12px;border-radius:10px;margin:8px 0}.bad{color:#b5401f}.muted{color:#777;font-size:.88rem}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}.chips li{background:#eef3ee;border-radius:16px;padding:2px 4px 2px 12px;display:flex;align-items:center;gap:4px}
.locbox{border-bottom:1px solid #eee;padding:8px 0}.small{font-size:.8rem;font-weight:400}
@media (min-width:760px){
  body{padding-bottom:0;font-size:16px}input,select,textarea,button,.btn{font-size:16px;min-height:40px}
  .bottomnav{display:none}.topnav{display:flex;gap:4px;flex-wrap:wrap}.topnav a{color:#e6f0e8;text-decoration:none;padding:6px 10px;border-radius:6px}.topnav a.on,.topnav a:hover{background:#41694b}
  .fab{display:inline-flex;position:fixed;right:22px;bottom:22px;z-index:30;background:#2b6a3f;color:#fff;padding:14px 20px;border-radius:30px;text-decoration:none;font-weight:700;box-shadow:0 3px 10px #0004}
  .stats{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.stat.big{grid-column:auto}
  .grid2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}.cards{grid-template-columns:repeat(auto-fill,minmax(330px,1fr))}
  .form fieldset{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.form .w2{grid-column:span 2}
  .filters{grid-template-columns:2fr repeat(4,1fr) auto auto}.goalform{grid-template-columns:repeat(3,1fr)}
  .staplecards{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}.staple{grid-template-columns:repeat(4,1fr)}.staple .w2{grid-column:span 2}
  .bigbtns{grid-template-columns:repeat(3,1fr)}
}
@media print{.top,.bottomnav,.fab,.noprint,form,.stats,.flash,.notice{display:none!important}body{background:#fff;padding:0}.card{box-shadow:none}section.card:not(.print),.grid2{display:none}.shopitem{break-inside:avoid;border:0;padding:4px}}
/* v3: users + history */
.stack{display:flex;flex-direction:column;gap:10px}.stack label{display:flex;flex-direction:column;font-size:.85rem;color:#444;gap:3px}
.top .me{margin-left:auto;color:#e6f0e8;text-decoration:none;font-size:.9rem;white-space:nowrap;max-width:45vw;overflow:hidden;text-overflow:ellipsis}
.usercards{display:grid;grid-template-columns:1fr;gap:0}.ucard.inactive{opacity:.6}.ucard h2 small{font-weight:400;font-size:.8rem}
.history{background:#fff;border-radius:12px;box-shadow:0 1px 3px #0002;padding:4px 12px;margin:10px 0}
.hday{font-size:.85rem;color:#777;margin:14px 0 4px;text-transform:uppercase;letter-spacing:.04em}
.hrow{display:grid;grid-template-columns:32px 1fr auto;gap:8px;padding:10px 0;border-bottom:1px solid #eee;align-items:start}.hrow:last-child{border-bottom:0}
.hicon{font-size:1.3rem;line-height:1.2}.hrow small{display:block;color:#666;font-size:.82rem}.hrow time{color:#888;font-size:.8rem;white-space:nowrap}
@media (min-width:760px){.top .me{display:none}.usercards{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}.usercards .card{margin:0}.stack{max-width:420px}}
/* v4: sections */
.sectionbar{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px;margin:0 -10px;padding-left:10px;scrollbar-width:none}.sectionbar::-webkit-scrollbar{display:none}
.sectionbar a{flex:0 0 auto;padding:10px 14px;border-radius:22px;background:#fff;box-shadow:0 1px 2px #0002;text-decoration:none;color:#333;font-size:.92rem;white-space:nowrap;min-height:44px;display:flex;align-items:center}
.sectionbar a.on{background:#2b6a3f;color:#fff;font-weight:700}
.sectiongrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.sectiontile{background:#fff;border-radius:14px;box-shadow:0 1px 3px #0002;padding:14px;text-decoration:none;color:#222;display:flex;flex-direction:column;gap:4px;min-height:120px}
.sectiontile .sicon{font-size:2rem;line-height:1}.sectiontile b{font-size:1.05rem}.sectiontile .big{font-size:.9rem;color:#2b4b34;font-weight:600}.sectiontile small{color:#777;font-size:.8rem}.sectiontile em{color:#b5401f;font-style:normal;font-weight:600}
.attn{display:flex;flex-direction:column}.arow{display:grid;grid-template-columns:28px 1fr auto;gap:8px;align-items:center;padding:10px 4px;border-bottom:1px solid #eee;text-decoration:none;color:#222;min-height:52px}
.arow small{display:block;color:#777;font-size:.78rem}.arow .why{font-size:.8rem;font-weight:600;text-align:right}.arow.expired .why{color:#b5401f}.arow.expiring .why{color:#a86f00}.arow.low .why{color:#1f6fa8}
.thumb{width:44px;height:44px;object-fit:cover;border-radius:8px;float:left;margin-right:8px}.photo{max-width:220px;max-height:220px;border-radius:10px;display:block;margin:4px 0}
.qty small{display:block;font-size:.7rem;font-weight:400;color:#777;text-align:center}
.chip{display:inline-block;background:#eef3ee;border-radius:12px;padding:2px 8px;font-size:.8rem}
.permgrid{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:10px}.permuser{border:1px solid #ddd;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}
.permuser label{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.9rem}.permuser select{max-width:55%}
.hicon small{display:block;font-size:.8rem}
fieldset[disabled]{opacity:.75}
@media (min-width:760px){.sectiongrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.permgrid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}.sectionbar{margin:0}}
[hidden]{display:none!important}

/* v4.1 Survival Tracker brand */
.top .brand{display:flex;align-items:center;gap:8px;letter-spacing:.02em}.top .brand img{width:32px;height:32px;border-radius:7px;box-shadow:0 0 0 1px #c9a53a55}
.top{border-bottom:2px solid #b8862b}
.loginbrand{text-align:center;margin-bottom:10px}.loginbrand img{border-radius:26px;box-shadow:0 6px 20px #0005}.loginbrand h1{margin:.4em 0 0;font-size:1.6rem;color:#1b2a16}.loginbrand p{margin:.2em 0 0}
.top{padding-top:calc(10px + env(safe-area-inset-top))}
.hp{position:absolute!important;left:-9999px;height:1px;overflow:hidden}.legal{max-width:760px;margin:auto}.legal h2{margin-top:1.4em}.tplbanner{background:#ffe1e1;border:2px dashed #b5401f;padding:12px;border-radius:10px;font-weight:600}.sa td,.sa th{padding:6px 8px;border-bottom:1px solid #eee;text-align:left;font-size:.9rem}.sa{width:100%;border-collapse:collapse}.pill{display:inline-block;padding:1px 8px;border-radius:99px;background:#eee;font-size:.8rem}.pill.ok{background:#dcefdc}.pill.bad{background:#f7d6d0}
.sa form.inline{display:inline-flex;gap:4px;margin:2px 0}.sa button{padding:4px 8px;font-size:.8rem;min-height:0}.sa input{padding:3px 4px;min-height:0}.sa td:last-child{min-width:330px}

/* item photos */
.ithumb{grid-column:1;grid-row:1/span 2;width:56px;height:56px;border-radius:10px;overflow:hidden;padding:0;border:1px solid #e3e3dc;background:#f4f4ee;display:flex;align-items:center;justify-content:center;align-self:start;cursor:zoom-in;min-height:0}
.ithumb img{width:100%;height:100%;object-fit:cover;display:block}.ithumb.ph{font-size:1.6rem;opacity:.55;cursor:default;background:linear-gradient(135deg,#f4f4ee,#e8eee4)}
.lightbox{position:fixed;inset:0;z-index:1000;background:#000d;display:flex;align-items:center;justify-content:center;padding:16px}
.lightbox img{max-width:100%;max-height:100%;border-radius:10px;box-shadow:0 4px 24px #0008}.lightbox button{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;width:46px;height:46px;border-radius:50%;padding:0;font-size:1.3rem;background:#fff;color:#222;border:0}
.photofield .lbl{font-size:.85rem;color:#444}.pf-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-top:3px}
.pf-prev{width:110px;height:110px;border-radius:12px;overflow:hidden;background:#f4f4ee;border:1px solid #e3e3dc;display:flex;align-items:center;justify-content:center;flex:none}
.pf-prev img{width:100%;height:100%;object-fit:cover}.pf-prev .ph{font-size:2rem;opacity:.5}
.pf-btns{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 180px;align-content:flex-start}.pf-btns .btn,.pf-btns button{margin:0;flex:1 1 140px;text-align:center;cursor:pointer}
.pf-results{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.pf-results button{padding:4px;background:#fff;border:1px solid #ddd;border-radius:10px;color:#333;display:flex;flex-direction:column;gap:3px;min-height:0}
.pf-results img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff}.pf-results small{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(min-width:700px){.pf-results{grid-template-columns:repeat(6,1fr)}}
.form .pf-btns label.btn{display:inline-flex;flex-direction:row;justify-content:center;align-items:center;color:inherit;font-size:1rem}