:root {
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #050b13;
  color: #e7f0fb;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top, #10233a, #050b13 55%); }
main { width: min(960px, 100%); margin: auto; padding: 18px max(14px, env(safe-area-inset-right)) 40px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
h1 { margin: 0; font-size: clamp(24px, 5vw, 38px); letter-spacing: .02em; }
.eyebrow { margin: 0 0 3px; color: #63d9ff; font-size: 11px; letter-spacing: .17em; }
.pill { border: 1px solid #31506c; background: #0d1c2b; color: #a9c0d5; border-radius: 999px; padding: 6px 10px; font-size: 12px; }
.pill.ok { border-color: #247f66; color: #73ebbf; }
.pill.bad { border-color: #9b443d; color: #ff9d94; }
.camera-card { position: relative; overflow: hidden; border: 1px solid #29435c; border-radius: 16px; background: #020407; aspect-ratio: 16 / 9; box-shadow: 0 18px 60px #0008; }
video { position: absolute; width: 1px; height: 1px; opacity: 0; }
canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
.reticle { position: absolute; inset: 7%; border: 1px dashed #6de1ff99; border-radius: 7px; pointer-events: none; }
.reticle::before, .reticle::after { content: ""; position: absolute; inset: -1px; border: 3px solid transparent; border-top-color: #69e0ff; border-bottom-color: #69e0ff; border-radius: 7px; }
.camera-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: max-content; max-width: 90%; padding: 8px 12px; border-radius: 999px; background: #07111fd9; color: #cfe9f8; text-align: center; font-size: 13px; }
.controls { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 9px; margin: 12px 0; }
button { appearance: none; border: 1px solid #34516d; border-radius: 10px; padding: 12px 10px; background: #102238; color: #dceafb; font: inherit; font-weight: 700; }
button:disabled { opacity: .42; }
button.primary { border-color: #0f9ec1; background: linear-gradient(135deg, #087d9c, #0eabc1); color: #fff; }
button.danger { color: #ffaaa3; }
.panel, details { border: 1px solid #223b52; border-radius: 14px; background: #091522dd; padding: 15px; }
.status-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
#status { color: #a9c5da; }
#percent { color: #66e3ff; }
.progress { height: 9px; border-radius: 999px; overflow: hidden; background: #152b3e; }
.progress div { width: 0; height: 100%; background: linear-gradient(90deg, #17b6c9, #59f0b1); transition: width .18s; }
dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 16px 0 0; }
dl div { min-width: 0; }
dt { color: #708fa9; font-size: 11px; text-transform: uppercase; }
dd { margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.download { width: 100%; margin-top: 15px; border-color: #2caf7c; background: #126447; color: white; }
details { margin-top: 12px; color: #9db7ca; }
summary { cursor: pointer; color: #dbeaf5; }
li { margin: 7px 0; line-height: 1.5; }
@media (orientation: landscape) and (max-height: 600px) {
  main { width: min(1200px, 100%); display: grid; grid-template-columns: 1.55fr 1fr; gap: 12px; padding-top: 8px; }
  header { grid-column: 1 / -1; margin: 0; }
  .camera-card { grid-row: span 3; }
  .controls { margin: 0; }
  details { display: none; }
}