:root { --bg:#f6f8fa; --fg:#1f2328; --card:#fff; --accent:#1f6feb; --ok:#1a7f37; --err:#cf222e; --muted:#656d76; }
  @media (prefers-color-scheme: dark) { :root { --bg:#0d1117; --fg:#e6edf3; --card:#161b22; --muted:#8d96a0; } }
  * { box-sizing: border-box; }
  body { margin:0; font-family: system-ui, sans-serif; background:var(--bg); color:var(--fg); }
  main { max-width:560px; margin:0 auto; padding:16px; }
  h1 { font-size:1.25rem; margin:0 0 12px; }
  .cam { position:relative; background:#000; border-radius:12px; overflow:hidden; }
  video { display:block; width:100%; height:auto; min-height:200px; }
  .guide { position:absolute; border:3px solid rgba(255,255,255,.85); border-radius:10px;
           box-shadow:0 0 0 9999px rgba(0,0,0,.35); pointer-events:none; }
  .guide { transition:border-color .15s, box-shadow .15s; }
  .guide.seen { border-color:#d4a72c; }
  .guide.found { border-color:#2da44e; border-width:6px; box-shadow:0 0 0 9999px rgba(0,0,0,.35), inset 0 0 0 9999px rgba(45,164,78,.18); }
  .card { background:var(--card); border-radius:12px; padding:12px; margin-top:12px; }
  button { font-size:1rem; padding:12px 16px; border:0; border-radius:10px; background:var(--accent); color:#fff; width:100%; }
  button.secondary { background:var(--muted); }
  button:disabled { opacity:.5; }
  input[type=text], input[type=password], input[type=email], select { font-size:1rem; padding:10px; border-radius:8px; border:1px solid var(--muted); width:100%; background:var(--card); color:var(--fg); }
  .row { display:flex; gap:8px; margin-top:8px; align-items:center; }
  .row > * { flex:1; }
  #status { font-weight:600; min-height:1.5em; }
  .ok { color:var(--ok); } .err { color:var(--err); }
  [hidden] { display:none !important; }
  #code { font:700 1.9rem/1.2 ui-monospace, monospace; letter-spacing:.08em; text-align:center; text-transform:uppercase; }
  ul { list-style:none; padding:0; margin:0; font-family: ui-monospace, monospace; }
  li { padding:6px 0; border-bottom:1px solid color-mix(in srgb, var(--muted) 30%, transparent); display:flex; justify-content:space-between; }
  li small { color:var(--muted); }
  label { display:flex; gap:8px; align-items:center; }
  .hint { color:var(--muted); font-size:.9rem; }
  header { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:12px; }
  header h1 { margin:0; }
  header nav { display:flex; gap:12px; font-size:.9rem; }
  a { color:var(--accent); }
  label.field { display:block; margin-top:8px; font-size:.9rem; color:var(--muted); }
  #nodeId { font:700 1.3rem/1.2 ui-monospace, monospace; text-align:center; }
  table { width:100%; border-collapse:collapse; font-size:.95rem; }
  td, th { text-align:left; padding:6px 4px; border-bottom:1px solid color-mix(in srgb, var(--muted) 30%, transparent); }
  td button { width:auto; padding:6px 10px; font-size:.85rem; }
  .codeview { font:700 1.9rem/1.2 ui-monospace, monospace; letter-spacing:.08em; text-align:center; margin:6px 0; }
  .codeview .unsure { color:var(--err); text-decoration:underline; }
  input[type=range] { width:100%; }
  a.button { display:block; text-align:center; font-size:1rem; padding:12px 16px; border-radius:10px; background:var(--accent); color:#fff; text-decoration:none; }