:root { font-family: system-ui, Arial; }
body { margin:0; background:#0b0f14; color:#e7eef7; }
a { color:#9bd; }
.wrap { max-width: 980px; margin: 0 auto; padding: 18px; }
.small { opacity:.85; font-size: 13px; }

.card { background:#121a24; border:1px solid #223041; border-radius:12px; padding:14px; margin:10px 0; }
label { display:block; margin-top:10px; font-size: 13px; opacity:.9; }
select,input {
  width:100%; box-sizing:border-box;
  background:#0d141d; color:#e7eef7;
  border:1px solid #223041; border-radius:10px;
  padding:10px; margin-top:6px;
}
.row { display:flex; gap:8px; margin-top:10px; }
.row input { flex:1; }
button {
  padding:10px 14px;
  border:0; border-radius:10px;
  background:#f0b429; color:#111; font-weight:700;
  cursor:pointer;
}
.tabs { display:flex; gap:8px; margin-bottom:10px; }
.tabs button { background:#223041; color:#e7eef7; }
.tabs button.active { background:#f0b429; color:#111; }

.result { margin-top:10px; font-size:18px; }
.ok { color:#7bffb0; }
.err { color:#ff7b7b; }
.warn { color:#ffd36b; }

#readerBox { margin-top:10px; }
#video { width:100%; max-height: 320px; background:#000; border-radius:12px; display:none; }
#reader { width:100%; }