*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:#0e0e0e; color:#f2f2f2; font-family:ui-sans-serif, system-ui, -apple-system, sans-serif; line-height:1.45; overflow-x:hidden; }
a { color:#9cc3ff; }
.tr { width:min(44rem, calc(100% - 24px)); margin:0 auto; padding:14px 0 calc(48px + env(safe-area-inset-bottom, 0px)); }
h1 { font-size:1.6rem; margin:6px 0 2px; }
.sub, .hint { color:#9a9a9a; font-size:0.9rem; margin:0 0 10px; }
.find label { display:block; font-size:0.85rem; color:#aaa; margin-bottom:4px; }
.find-row { display:flex; gap:8px; }
input, button { font:inherit; color:#f2f2f2; background:#151515; border:1px solid #5a5a5a; border-radius:8px; padding:12px 14px; min-width:0; }
#q { flex:1; font-size:1.15rem; letter-spacing:0.04em; text-transform:uppercase; }
#q::placeholder { text-transform:none; letter-spacing:0; }
button { cursor:pointer; } #go { background:#1d3b66; border-color:#3f6fb0; font-weight:600; }
.cam-row { display:flex; gap:8px; margin:4px 0 8px; } .cam-row button { flex:1; }
.camwrap { position:relative; width:100%; aspect-ratio:4/3; background:#000; border-radius:10px; overflow:hidden; }
.camwrap video { width:100%; height:100%; object-fit:cover; display:block; }
.aim { position:absolute; left:20%; right:20%; top:32%; bottom:32%; border:3px solid #fff; border-radius:8px; box-shadow:0 0 0 999px rgba(0,0,0,0.35); }
.card { border:1px solid #2f2f2f; border-radius:12px; padding:14px 16px; margin:12px 0; background:#131313; overflow-wrap:anywhere; }
.card.found { border-color:#2f6b3f; } .card.never { border-color:#7a6420; } .card.missing { border-color:#7a2f2f; }
.wo-id { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.95rem; color:#bbb; }
.wo-title { font-size:1.05rem; margin:2px 0 10px; }
.label-sm { font-size:0.8rem; text-transform:uppercase; letter-spacing:0.08em; color:#9a9a9a; margin:10px 0 2px; }
.loc-name { font-size:2.1rem; font-weight:700; line-height:1.15; margin:0; }
.loc-path { font-size:1.15rem; margin:4px 0 0; color:#ddd; }
.loc-id { font-family:ui-monospace, Menlo, monospace; color:#9a9a9a; font-size:0.95rem; }
.who { font-size:1.05rem; margin:2px 0 0; } .ago { color:#7fd18b; font-weight:600; }
.state-big { font-size:1.6rem; font-weight:700; margin:0; }
.hist { list-style:none; padding:0; margin:4px 0 0; }
.hist li { border-top:1px solid #262626; padding:8px 0; font-size:0.92rem; }
.hist .when { color:#9a9a9a; font-size:0.85rem; }
.tag { display:inline-block; border:1px solid #555; border-radius:10px; padding:0 8px; font-size:0.75rem; margin-left:6px; color:#ccc; vertical-align:middle; }
.matches { list-style:none; padding:0; margin:0; }
.matches li { border-top:1px solid #262626; }
.matches button { width:100%; text-align:left; background:none; border:0; border-radius:0; padding:10px 2px; }
.links { margin-top:24px; font-size:0.9rem; color:#777; }
.err { color:#f87171; }