:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #0b0d10;
  color: #e8eaed;
}
header { text-align: center; padding: 18px 12px 6px; }
h1 {
  margin: 0; font-size: 26px; letter-spacing: 6px; font-weight: 800;
  background: linear-gradient(90deg, #7cf29c, #37b6ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub { margin: 4px 0 0; color: #9aa3ad; font-size: 13px; }

main { max-width: 940px; margin: 0 auto; padding: 10px 12px 40px; }

#viewerWrap { position: relative; }
#view {
  width: 100%; border-radius: 14px; background: #101318;
  border: 1px solid #232a33; display: block;
}
#countResult {
  position: absolute; top: 12px; left: 14px;
  font-size: 15px; font-weight: 700; color: #8ef5a8;
  text-shadow: 0 1px 4px #000; pointer-events: none;
}

#controls { margin-top: 12px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
button {
  flex: 1 1 auto; min-width: 130px;
  background: #1a212b; color: #dfe4ea;
  border: 1px solid #2c3644; border-radius: 10px;
  padding: 11px 12px; font-size: 14px; font-weight: 600; cursor: pointer;
}
button:active { transform: scale(0.98); }
button:disabled { opacity: 0.4; cursor: default; }
button.primary { background: linear-gradient(90deg, #1d6b3a, #14503f); border-color: #2c8a53; }

.status {
  margin-top: 8px; font-size: 13.5px; color: #b9c2cc; min-height: 20px;
  background: #12161c; border: 1px solid #232a33; border-radius: 10px; padding: 9px 12px;
}
.status.ok { color: #8ef5a8; }
.status.err { color: #ff8f8f; }
.status.warn { color: #ffd28f; }

.bar { height: 8px; background: #1a212b; border-radius: 5px; overflow: hidden; margin-top: 8px; }
#demoProg { height: 100%; width: 0%; background: linear-gradient(90deg, #7cf29c, #37b6ff); transition: width 0.2s; }

.scanbar { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
#cam { width: 150px; border-radius: 10px; border: 1px solid #2c3644; }

#how { margin-top: 22px; }
#how h2 { font-size: 16px; color: #cfd6dd; }
#how ol { padding-left: 20px; font-size: 13.5px; line-height: 1.6; color: #aeb7c1; }
.note { font-size: 12px; color: #7f8994; line-height: 1.5; }