:root { --ink:#14161a; --muted:#5d646e; --line:#e3e6ea; --bg:#fff; --accent:#1d4ed8; --bad:#b42318; --good:#067647; --warn:#8a5a00; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; }
.shell { max-width:720px; margin:0 auto; padding:20px 18px 40px; }
h1 { font-size:28px; margin:8px 0 4px; letter-spacing:-.02em; }
h2 { font-size:22px; margin:14px 0 4px; }
h3 { font-size:17px; margin:18px 0 6px; }
.lead { font-size:17px; margin:0 0 2px; }
.muted { color:var(--muted); font-size:14px; }
.zh { color:var(--muted); font-size:14px; }
.warn { color:var(--warn); font-size:14px; }
.row { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
button, .btn { font:inherit; border-radius:10px; padding:11px 16px; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; min-height:44px; }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
button.danger { color:var(--bad); border-color:#f2c9c4; }
button.link { border:0; padding:6px 0; color:var(--accent); background:none; }
button[disabled] { opacity:.55; cursor:default; }
.cards { display:grid; gap:10px; margin-top:12px; }
.card { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; padding:14px; border:1px solid var(--line); border-radius:12px; background:#fff; width:100%; }
.card.wide { margin:10px 0; }
form { display:grid; gap:10px; max-width:420px; }
input { font:inherit; padding:11px 12px; border:1px solid var(--line); border-radius:10px; min-height:44px; }
.progress { height:8px; background:var(--line); border-radius:99px; overflow:hidden; margin:10px 0 16px; }
.progress .fill { height:100%; background:var(--accent); transition:width .25s; }
.viewfinder { position:relative; border-radius:12px; overflow:hidden; background:#000; aspect-ratio:4/3; }
.viewfinder video { width:100%; height:100%; object-fit:cover; }
.ghost-overlay { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.35; pointer-events:none; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0; width:100%; }
.pair img { width:100%; border-radius:8px; border:1px solid var(--line); }
.result { width:100%; }
.grid12 { display:grid; grid-template-columns:repeat(12,1fr); gap:2px; margin:8px 0; }
.cell { aspect-ratio:1; background:#f1f3f5; border-radius:2px; }
.cell.hot { background:#f0b429; }
.toast { position:fixed; left:50%; bottom:-100px; transform:translateX(-50%); max-width:92vw; padding:12px 16px; border-radius:10px; background:#14161a; color:#fff; font-size:14px; transition:bottom .25s; z-index:9; }
.toast.show { bottom:18px; }
.toast.good { background:var(--good); } .toast.bad { background:var(--bad); } .toast.info { background:#14161a; }
footer { border-top:1px solid var(--line); margin-top:24px; padding-top:14px; }
a { color:var(--accent); }
@media (prefers-color-scheme: dark) {
  :root { --ink:#eceff3; --muted:#9aa3ae; --line:#2a2f36; --bg:#0f1115; }
  button, .btn, .card, input { background:#161a20; }
  .cell { background:#232830; }
}