:root { --bg:#f4f5f7; --card:#fff; --text:#1d2330; --muted:#6b7280; --accent:#2563eb; --line:#e3e6eb; --mark:#fde68a; --warn:#b45309; --bad:#b91c1c; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.4 system-ui,sans-serif; background:var(--bg); color:var(--text); }
button, select, input { font:inherit; }

header { position:sticky; top:0; z-index:5; background:var(--card); border-bottom:1px solid var(--line); padding:10px 14px; }
.bar, .meta-row { display:flex; gap:8px; flex-wrap:wrap; max-width:1100px; margin:0 auto; align-items:center; }
#q { flex:1 1 260px; font-size:17px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; }
select, button { font-size:15px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; }
button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
button.link { border:0; background:none; color:var(--accent); padding:4px 6px; }
.meta-row { margin-top:6px; font-size:13px; color:var(--muted); }
#status { margin-left:auto; }
#status.bad { color:var(--bad); }

main { max-width:1100px; margin:0 auto; padding:12px 14px 60px; }
.notice { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; margin-bottom:12px; }
.notice.warn { border-color:#f3d28b; background:#fffbeb; }
.notice.bad { border-color:#f1b0b0; background:#fef2f2; }
.notice p { margin:0 0 10px; } .notice p:last-child { margin:0; }
.notice code { background:#eef0f4; padding:1px 4px; border-radius:4px; font-size:13px; }

.tote { background:var(--card); border:1px solid var(--line); border-radius:10px; margin-bottom:14px; overflow:hidden; }
.tote > h2 { margin:0; padding:10px 14px; font-size:17px; background:#eef2f9; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; cursor:pointer; }
.tote > h2 small, .sub > h3 small { color:var(--muted); font-weight:normal; font-size:13px; }
.tote.closed .subs { display:none; }
.sub > h3 { margin:0; padding:7px 14px 7px 26px; font-size:14px; font-weight:600; background:#f8f9fb; border-top:1px solid var(--line); display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; cursor:pointer; }
.sub > h3::before { content:''; width:6px; height:6px; flex:none; align-self:center; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); position:relative; top:-2px; }
.sub.closed > h3::before { transform:rotate(-45deg); top:0; }
.sub.closed .items { display:none; }
.item { display:flex; gap:12px; padding:10px 14px; border-top:1px solid var(--line); }
.item.out { background:#fdf0f2; }
.item.has-photo { cursor:zoom-in; }
.item.has-photo:active { background:#eef3fb; }
@media (hover:hover) { .item.has-photo:hover { background:#f6f8fc; } .item.out.has-photo:hover { background:#fbe6ea; } }
.thumbs { display:flex; gap:4px; flex:none; flex-wrap:wrap; max-width:156px; }
.thumbs img { width:72px; height:72px; object-fit:cover; border-radius:6px; background:#ddd; cursor:zoom-in; }
.thumbs img.unavailable { background:#eceef2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 15a4 4 0 0 0 4 4h10a4 4 0 0 0 1-7.9A6 6 0 0 0 6.3 9.5 4 4 0 0 0 3 15z'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") center / 30px no-repeat; }
.noimg { width:72px; height:72px; border-radius:6px; background:#eceef2; color:#9aa1ad; flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:10px; }
.info { min-width:0; }
.title { font-weight:600; }
.meta { color:var(--muted); font-size:13px; }
mark { background:var(--mark); padding:0 1px; border-radius:2px; }
#empty { text-align:center; color:var(--muted); padding:40px; display:none; }

#lightbox { position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:10; cursor:zoom-out; }
#lightbox img { max-width:96vw; max-height:96vh; }
#lightbox-note { position:absolute; left:0; right:0; bottom:24px; padding:0 24px; text-align:center; color:#fff; font-size:14px; text-shadow:0 1px 3px #000; }