:root { --bg:#0f172a; --card:#1e293b; --text:#e2e8f0; --muted:#94a3b8; --green:#22c55e; --red:#ef4444; --accent:#38bdf8; }
[hidden] { display: none !important; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
body { padding-bottom: env(safe-area-inset-bottom); max-width: 640px; margin: 0 auto; }
header { display:flex; align-items:center; gap:.5rem; padding: calc(env(safe-area-inset-top) + .6rem) 1rem .6rem; }
header h1 { font-size:1.2rem; margin:0; flex:1; }
.badge { font-size:.7rem; padding:.15rem .5rem; border-radius:999px; background:#334155; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.badge.live { background:#14532d; color:#bbf7d0; }
.icon-btn { background:none; border:none; color:var(--text); font-size:1.5rem; cursor:pointer; }
#cameraWrap { position:relative; background:#000; aspect-ratio: 3/4; max-height: 55vh; width:100%; overflow:hidden; }
#video { width:100%; height:100%; object-fit:cover; display:block; }
#cameraPlaceholder { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:2rem; color:var(--muted); }
.status { position:absolute; left:.6rem; top:.6rem; background:rgba(0,0,0,.6); padding:.25rem .6rem; border-radius:999px; font-size:.8rem; }
.status.scanning::before { content:""; display:inline-block; width:.55rem; height:.55rem; background:var(--red); border-radius:50%; margin-right:.4rem; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.3; } }
.toast { position:absolute; left:.6rem; right:.6rem; bottom:.6rem; background:rgba(20,83,45,.95); border:1px solid var(--green); padding:.7rem; border-radius:.7rem; font-weight:600; animation: pop .25s ease-out; }
@keyframes pop { from { transform: translateY(20px); opacity:0; } }
.controls { padding: .8rem 1rem; display:flex; gap:.6rem; }
.controls .record { flex:1; }
.label-btn { flex:0 0 auto; padding:0 1.1rem; border:2px solid var(--accent); border-radius:.9rem; background:transparent; color:var(--accent); font-weight:700; font-size:1rem; cursor:pointer; }
.label-btn:disabled { opacity:.6; }
.record { width:100%; padding:1rem; font-size:1.1rem; font-weight:700; border:none; border-radius:.8rem; background:var(--green); color:#052e16; cursor:pointer; }
.record.on { background:var(--red); color:white; }
.list-section { padding: 0 1rem 2rem; }
.tabs { display:flex; gap:.5rem; margin-bottom:.6rem; }
.tab { flex:1; padding:.55rem; border:none; border-radius:.6rem; background:var(--card); color:var(--muted); font-weight:600; cursor:pointer; }
.tab.active { background:#334155; color:var(--text); }
.tab span { background:#0f172a; padding:0 .45rem; border-radius:999px; margin-left:.3rem; }
.items { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; }
.item { display:flex; gap:.7rem; background:var(--card); border-radius:.8rem; padding:.6rem; }
.item img { width:72px; height:72px; object-fit:cover; border-radius:.5rem; flex-shrink:0; background:#000; }
.item .info { flex:1; min-width:0; }
.item .name { font-weight:700; margin-bottom:.15rem; }
.item .meta { font-size:.8rem; color:var(--muted); }
.pipeline-status { font-size:.8rem; color:var(--accent); margin-top:.35rem; }
.pipeline-status.retrying { color:var(--muted); }
.pipeline-status.failed { color:#f87171; }
.cancel-analysis { margin-top:.4rem; padding:.35rem .65rem; border:1px solid #475569; border-radius:.5rem; background:transparent; color:var(--muted); cursor:pointer; }
.cancel-analysis:disabled { opacity:.6; cursor:wait; }
.item .prices { display:flex; gap:.8rem; font-size:.85rem; margin-top:.3rem; flex-wrap:wrap; }
.profit { color:var(--green); font-weight:700; }
.profit.neg { color:var(--red); }
.item a { color:var(--accent); font-size:.8rem; }
.empty { color:var(--muted); text-align:center; }
.link-btn { background:none; border:none; color:var(--muted); text-decoration:underline; display:block; margin:1rem auto 0; cursor:pointer; }
dialog { background:var(--card); color:var(--text); border:none; border-radius:1rem; width:min(92vw, 420px); }
dialog::backdrop { background:rgba(0,0,0,.6); }
dialog h2 { margin-top:0; }
dialog label { display:block; margin-bottom:.8rem; font-size:.9rem; color:var(--muted); }
dialog label.row { display:flex; align-items:center; gap:.5rem; color:var(--text); }
dialog input:not([type=checkbox]), dialog select { display:block; width:100%; margin-top:.3rem; padding:.6rem; border-radius:.5rem; border:1px solid #334155; background:var(--bg); color:var(--text); font-size:1rem; }
.dialog-actions { display:flex; gap:.5rem; justify-content:flex-end; }
.dialog-actions button { padding:.6rem 1.2rem; border:none; border-radius:.5rem; background:var(--accent); color:#082f49; font-weight:700; cursor:pointer; }
.dialog-actions .secondary { background:#334155; color:var(--text); }
.item { cursor:pointer; }
.item .seen { font-size:.75rem; color:var(--accent); }
#viewer { padding:0; overflow:hidden; width:min(96vw, 560px); }
.viewer-photo { position:relative; background:#000; line-height:0; }
.viewer-photo img { width:100%; height:auto; display:block; }
.viewer-box { position:absolute; border:3px solid var(--green); border-radius:6px; box-shadow:0 0 0 9999px rgba(0,0,0,.45); animation: pulse 1.2s ease-in-out 3; }
.viewer-info { padding:.8rem 1rem 0; }
#viewer .dialog-actions { padding:.8rem 1rem 1rem; }
.viewer-info .name { font-weight:700; font-size:1.05rem; }
.viewer-info .meta { color:var(--muted); font-size:.85rem; margin:.2rem 0 .4rem; }
.viewer-info .prices { display:flex; flex-wrap:wrap; gap:.4rem .9rem; font-size:.9rem; margin-bottom:.5rem; }
.viewer-info .profit { color:var(--green); font-weight:700; }
#viewer::backdrop { background:rgba(0,0,0,.7); }
.haul-status { font-size:.8rem; font-weight:600; color:var(--accent); margin-top:.2rem; }
.haul-status.sold { color:var(--green); }
.viewer-actions { display:flex; gap:.5rem; margin:.5rem 0 .6rem; flex-wrap:wrap; }
.viewer-actions button { padding:.55rem 1rem; border:none; border-radius:.5rem; background:var(--green); color:#052e16; font-weight:700; cursor:pointer; }
.viewer-actions button.secondary { background:#334155; color:var(--text); }
.haul-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin:.6rem 0; }
.haul-summary div { background:var(--card); border-radius:.6rem; padding:.6rem; text-align:center; }
.haul-summary b { display:block; font-size:1.15rem; }
.haul-summary b.pos { color:var(--green); }
.haul-summary b.neg { color:var(--red); }
.haul-summary span { font-size:.7rem; color:var(--muted); }
.items .trip { list-style:none; font-size:.8rem; font-weight:700; color:var(--muted); padding:.6rem .2rem .2rem; cursor:default; }
fieldset.cats { border:1px solid #334155; border-radius:.5rem; padding:.5rem .7rem; margin:.6rem 0; }
fieldset.cats legend { font-size:.8rem; color:var(--muted); padding:0 .3rem; }
#catList { display:grid; grid-template-columns:repeat(2,1fr); gap:.3rem .6rem; }
#catList .cat { display:flex; align-items:center; gap:.3rem; font-size:.9rem; margin:0; }
#cameraWrap.snap::after { content:""; position:absolute; inset:0; border:4px solid var(--accent); background:rgba(255,255,255,.12); pointer-events:none; z-index:5; }
.lookup { font-size:.8rem; margin:.4rem 0; padding:.45rem .6rem; border:1px solid #334155; border-radius:.5rem; }
.lookup .head { font-weight:700; color:var(--green); }
.lookup .err { color:#f87171; }
.lookup a { display:block; color:var(--accent); margin-top:.2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }