*{box-sizing:border-box}
[hidden]{display:none!important}
:root{--navy:#1e293b;--ink:#0f172a;--yellow:#facc15;--line:#cbd5e1;--muted:#475569}
body{margin:0;font:17px/1.4 system-ui,-apple-system,sans-serif;background:#f1f5f9;color:var(--navy)}
.app{max-width:560px;margin:0 auto;min-height:100vh;background:#fff}
header{background:var(--navy);color:#fff;padding:10px 12px;display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:2}
header h1{font-size:19px;margin:0;flex:1}
header button,.hlink{background:none;border:0;color:#fff;font-size:26px;min-width:54px;min-height:54px;text-decoration:none;display:grid;place-items:center}
.hlink{font-size:16px;font-weight:700;color:var(--yellow)}
main{padding:16px 16px 110px}
.search,input,select,textarea{width:100%;min-height:54px;padding:12px 14px;font-size:17px;border:2px solid var(--line);border-radius:12px;font-family:inherit;background:#fff;color:var(--navy)}
input:focus,select:focus{outline:3px solid var(--yellow);border-color:var(--navy)}
label{display:block;font-weight:700;margin:16px 0 6px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.bin{border:0;background:var(--ink);color:#fff;border-radius:14px;padding:12px 14px;text-align:left;min-height:110px;border-top:8px solid var(--yellow);font:600 17px/1.3 inherit;text-decoration:none;display:block}
.bin b{font-size:40px;display:block;line-height:1.05;font-weight:900}
.bin span{display:block;font-weight:400;font-size:14px;opacity:.85}
.fab{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--yellow);color:var(--navy);border:0;border-radius:30px;padding:0 28px;min-height:58px;font-size:18px;font-weight:800;box-shadow:0 4px 12px #0003;text-decoration:none;display:flex;align-items:center}
.binnum{font-size:72px;font-weight:900;line-height:1;margin:0}
.big{font-size:28px;font-weight:800;margin:4px 0 0}.muted{color:var(--muted)}
.photos{display:flex;gap:8px;overflow-x:auto;margin:14px 0}
.photos img{flex:0 0 110px;width:110px;height:110px;object-fit:cover;border-radius:10px;background:#e2e8f0}
ul{list-style:none;padding:0;margin:0}
li.item{padding:8px 2px;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;gap:10px;min-height:62px}
li.item img{width:48px;height:48px;object-fit:cover;border-radius:8px}
li.item .nm{flex:1;font-weight:600}
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;border-radius:12px;border:0;font-size:17px;font-weight:800;margin-top:12px;text-decoration:none;cursor:pointer;font-family:inherit}
.btn.sm{width:auto;min-width:54px;padding:0 14px;margin:0;font-size:15px}
.primary{background:var(--yellow);color:var(--navy)}
.ghost{background:#f1f5f9;color:var(--navy);border:2px solid var(--line)}
.dark{background:var(--navy);color:#fff}
.cam{min-height:140px;border:2px dashed #94a3b8;border-radius:14px;display:grid;place-items:center;color:var(--muted);background:#f8fafc;width:100%;font-size:17px;cursor:pointer;overflow:hidden;position:relative}
.cam img{max-width:100%;max-height:220px;display:block}
.cam input{position:absolute;inset:0;opacity:0;cursor:pointer}
.toast{background:#dcfce7;color:#14532d;padding:12px;border-radius:10px;font-weight:700}
.err{background:#fee2e2;color:#7f1d1d;padding:12px;border-radius:10px;font-weight:700}
.res{padding:12px;border:2px solid #e2e8f0;border-radius:12px;margin-top:10px;display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;min-height:80px}
.res .rn{font-size:44px;font-weight:900;min-width:64px;line-height:1}
.res img{width:64px;height:64px;object-fit:cover;border-radius:8px;margin-left:auto}
.steps{display:flex;gap:6px;margin-bottom:8px}.steps i{flex:1;height:6px;border-radius:3px;background:#e2e8f0}.steps i.on{background:var(--yellow)}
/* Label */
.label{border:4px solid #000;border-radius:14px;padding:14px;display:flex;gap:16px;align-items:center;margin:16px 0;background:#fff;color:#000;break-inside:avoid}
.label canvas,.label img{width:150px;height:150px;flex:none;image-rendering:pixelated}
.label .ln{font-size:84px;font-weight:900;line-height:.9;letter-spacing:-2px}
.label .lt{font-size:24px;font-weight:900;margin-top:6px;line-height:1.1}
.label .ll{font-size:15px;font-weight:700;margin-top:4px}
.pick{display:flex;align-items:center;gap:12px;min-height:58px;border-bottom:1px solid #e2e8f0;font-weight:600;margin:0}
.pick input{width:28px;height:28px;min-height:0;flex:none}
.pick b{font-size:28px;font-weight:900;min-width:48px}
/* Sheet */
.sheet{position:fixed;inset:0;background:#0f172a99;display:flex;align-items:flex-end;justify-content:center;z-index:5}
.sheet[hidden]{display:none}
.sheet .panel{background:#fff;width:100%;max-width:560px;border-radius:20px 20px 0 0;padding:16px 16px 24px;max-height:92vh;overflow:auto}
.sheet h2{margin:0 0 8px;font-size:20px}.sheet h2 b{font-size:34px;font-weight:900}
/* Login */
.login{background:var(--navy);min-height:100vh;display:grid;place-items:center}
.loginbox{background:#fff;border-radius:20px;padding:28px 22px;width:min(92vw,400px);text-align:center}
.loginbox h1{margin:4px 0 12px}.loginbox label{text-align:left}.logo:empty{display:none}.logo img{max-width:120px;max-height:80px}
.pwrow{display:flex;gap:8px}.pwrow input{flex:1}
.eye{min-width:54px;min-height:54px;border:2px solid var(--line);border-radius:12px;background:#f1f5f9;font-size:22px;cursor:pointer}
/* Print sheet */
.printsheet{display:grid;gap:14px}
.printsheet .label{margin:0;padding:22px;gap:26px;min-height:4.4in}
.printsheet .label canvas,.printsheet .label img{width:2.9in;height:2.9in}
.printsheet .label .ln{font-size:150px}
.printsheet .label .lt{font-size:38px}
.printsheet .label .ll{font-size:20px}
@media print{
  header,.noprint,.fab{display:none!important}
  body,.app{background:#fff;max-width:none}main{padding:0}
  .printsheet{gap:.3in}.printsheet .label{page-break-inside:avoid}
  @page{margin:.4in}
}
@media screen and (max-width:600px){
  .printsheet .label{padding:14px;gap:14px;min-height:0}
  .printsheet .label canvas{width:40vw;height:40vw}
  .printsheet .label .ln{font-size:22vw}.printsheet .label .lt{font-size:6.5vw}
}
.label .lw{font-size:13px;font-weight:800;letter-spacing:2px;text-transform:uppercase;opacity:.7}.printsheet .label .lw{font-size:18px}
.hlogo{width:32px;height:32px;border-radius:8px;margin-left:4px}.logo img{width:96px;height:96px;margin:0 auto 4px;display:block}
.binhead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.photos .ph{flex:0 0 110px;width:110px;height:110px;padding:0;border:0;border-radius:10px;overflow:hidden;background:#e2e8f0;cursor:pointer;margin:0;display:grid;place-items:center;position:relative}
.photos .ph img{width:100%;height:100%;flex:none}
.photos .add{border:2px dashed #94a3b8;background:#f8fafc;color:var(--navy);font-weight:800;font-size:17px}
.photos .add input{position:absolute;inset:0;opacity:0;cursor:pointer;min-height:0}
li.item .btn.sm+.btn.sm{margin-left:-4px}
textarea{min-height:90px;resize:vertical}
.red{background:#b91c1c;color:#fff}
.danger{margin-top:36px;padding-top:12px;border-top:2px solid #fee2e2}
.viewer{position:fixed;inset:0;background:#000;z-index:6;display:flex;align-items:center;justify-content:center;touch-action:pan-y}
.viewer #vImg{max-width:100%;max-height:100%;object-fit:contain}
.vbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#000a;color:#fff;font-weight:700}
.vbar span{flex:1}
.vbar button,.varr{background:#1e293bcc;color:#fff;border:0;border-radius:12px;min-width:54px;min-height:54px;font-size:24px;cursor:pointer}
.varr{position:absolute;top:50%;transform:translateY(-50%);font-size:40px}.varr.l{left:8px}.varr.r{right:8px}
.undo{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:min(92vw,520px);background:var(--navy);color:#fff;border-radius:14px;padding:6px 6px 6px 16px;display:flex;align-items:center;gap:12px;z-index:4;box-shadow:0 4px 12px #0004;font-weight:700}
.undo span{flex:1}
.undo button{background:var(--yellow);color:var(--navy);border:0;border-radius:10px;min-height:54px;min-width:80px;font-size:17px;font-weight:800;cursor:pointer}
#bPh{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;overflow:visible}
#bPh .ph{width:auto;height:auto;aspect-ratio:1;min-height:54px}
.upd{position:fixed;top:0;left:0;right:0;z-index:9;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;gap:14px;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));font-weight:800;box-shadow:0 2px 8px #0003}
.upd button{background:var(--yellow);color:var(--navy);border:0;border-radius:10px;min-height:54px;padding:0 20px;font-size:17px;font-weight:800;cursor:pointer}
.upd .spark{font-size:24px;filter:drop-shadow(0 0 4px #facc15aa)}
li.item .ithumb{padding:0;border:0;background:none;border-radius:8px;min-width:54px;min-height:54px;display:grid;place-items:center;cursor:pointer}
li.item .ithumb img{width:54px;height:54px}