*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:ui-rounded,"SF Pro Rounded","Nunito",system-ui,sans-serif;background:#fff7d6;color:#222;padding-bottom:calc(90px + env(safe-area-inset-bottom))}
header{position:sticky;top:0;z-index:5;background:#ffcf00;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 3px 0 #e0a800}
.logo{font-size:26px;font-weight:900;color:#d01012;text-shadow:2px 2px 0 #fff}
.flex{display:flex;align-items:center;gap:8px;background:#fff;border-radius:30px;padding:8px 14px;font-weight:800;font-size:16px}
.flex input{width:26px;height:26px;accent-color:#006cb7}
nav{position:fixed;bottom:0;left:0;right:0;z-index:6;display:flex;background:#fff;border-top:4px solid #ffcf00;padding-bottom:env(safe-area-inset-bottom)}
nav button{flex:1;border:0;background:none;font-size:30px;padding:8px 0;display:flex;flex-direction:column;align-items:center;color:#555}
nav button b{font-size:13px;margin-top:2px}
nav button.on{background:#fff2b3;color:#d01012}
main{padding:14px;max-width:1100px;margin:0 auto}
h2{font-size:24px;margin:6px 0 12px} .sub{color:#666;margin:-6px 0 12px;font-size:15px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:12px}
.card{background:#fff;border-radius:20px;padding:10px;box-shadow:0 4px 0 #e7dcae;display:flex;flex-direction:column;gap:6px;position:relative}
.card img.set{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fafafa;border-radius:12px}
.card .t{font-weight:800;font-size:15px;line-height:1.2}.card .m{font-size:12px;color:#777}
.badge{position:absolute;top:8px;right:8px;background:#00a650;color:#fff;font-weight:900;border-radius:14px;padding:3px 9px;font-size:13px}
.badge.o{background:#ff7a00}
.miss{display:flex;flex-wrap:wrap;gap:6px}
.pc{display:flex;align-items:center;gap:4px;background:#fff5e6;border-radius:10px;padding:3px 6px;font-size:12px;font-weight:700}
.pc img{width:38px;height:38px;object-fit:contain}
.sw{width:14px;height:14px;border-radius:4px;border:1px solid #0003;display:inline-block}
.big{font-size:20px;font-weight:900;border:0;border-radius:18px;padding:14px 20px;background:#006cb7;color:#fff;box-shadow:0 4px 0 #004b80}
.big.red{background:#d01012;box-shadow:0 4px 0 #8f0b0c}.big.green{background:#00a650;box-shadow:0 4px 0 #00753a}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
input.q{flex:1;min-width:200px;font-size:20px;padding:14px;border-radius:16px;border:3px solid #ffcf00}
.chip{display:flex;align-items:center;gap:8px;background:#fff;border-radius:16px;padding:6px 8px;box-shadow:0 3px 0 #e7dcae}
.chip img{width:64px;height:48px;object-fit:contain}.chip button{font-size:20px;border:0;background:#ffe0e0;border-radius:12px;width:40px;height:40px}
.parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.part{background:#fff;border-radius:14px;padding:6px;display:flex;align-items:center;gap:6px;font-size:12px}
.part img{width:48px;height:48px;object-fit:contain}.part .n{flex:1;line-height:1.15}
.qty{display:flex;align-items:center;gap:4px}.qty button{width:34px;height:34px;border-radius:10px;border:0;background:#eee;font-size:20px;font-weight:900}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.stat{background:#fff;border-radius:18px;padding:10px 16px;font-weight:900;font-size:22px}.stat small{display:block;font-size:12px;color:#777;font-weight:700}
.lab .card{cursor:pointer}.emoji{font-size:64px;text-align:center;background:#fff7d6;border-radius:14px}
#viewer{position:fixed;inset:0;z-index:20;background:#e8f4ff;display:flex;flex-direction:column}
#vtop{display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 8px;background:#ffcf00}
#vtop button{font-size:22px;width:50px;height:50px;border-radius:50%;border:0;background:#fff}#vtitle{flex:1;font-weight:900;font-size:22px}#vstep{font-weight:900;font-size:20px;background:#fff;border-radius:20px;padding:6px 14px}
#canvaswrap{flex:1;position:relative;touch-action:none}#canvaswrap canvas{display:block;width:100%;height:100%}
#vparts{display:flex;gap:8px;justify-content:center;padding:6px;min-height:64px;background:#fff;flex-wrap:wrap}
#vbar{display:flex;align-items:center;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#fff}
#vbar button{font-size:34px;width:90px;height:70px;border-radius:20px;border:0;background:#006cb7;color:#fff;box-shadow:0 4px 0 #004b80}
#vbar button:disabled{opacity:.3}#dots{flex:1;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.dot{width:16px;height:16px;border-radius:50%;background:#ccc}.dot.on{background:#d01012}
footer{font-size:12px;color:#777;text-align:center;padding:20px 16px 10px}footer a{color:#006cb7}
.empty{background:#fff;border-radius:20px;padding:30px;text-align:center;font-size:18px}
#viewer[hidden]{display:none}
@media (max-width:500px){.logo{font-size:20px}.flex{font-size:13px;padding:6px 10px}.flex input{width:22px;height:22px}}
.parts{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}