:root{font-family:Arial,Helvetica,sans-serif;color:#ecf3fb;background:#07101c;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#07101c}body{min-height:100vh}.scanner-shell{width:min(100%,620px);margin:0 auto;padding:18px}.scanner-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.scanner-header h1{margin:2px 0 0;font-size:26px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;color:#6daaff}.camera-card{border:1px solid #23344a;border-radius:16px;background:#0b1523;padding:12px;box-shadow:0 18px 45px rgba(0,0,0,.28)}.camera-viewport{position:relative;aspect-ratio:3/4;max-height:68vh;overflow:hidden;border-radius:12px;background:#02060a}.camera-viewport[hidden]{display:none}.camera-viewport video{width:100%;height:100%;object-fit:cover}.camera-mask{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.18))}.camera-guide{position:relative;width:88%;height:26%;min-height:105px;border:3px solid rgba(255,255,255,.9);border-radius:12px;box-shadow:0 0 0 999px rgba(0,0,0,.27)}.camera-guide:before,.camera-guide:after{content:"";position:absolute;left:5%;right:5%;height:1px;background:rgba(255,255,255,.28)}.camera-guide:before{top:33%}.camera-guide:after{bottom:33%}.camera-guide span{position:absolute;left:5%;right:5%;top:50%;height:2px;background:#43d58c;box-shadow:0 0 10px rgba(67,213,140,.9);animation:sweep 1.35s ease-in-out infinite alternate}@keyframes sweep{from{transform:translateY(-34px)}to{transform:translateY(34px)}}.status{margin-top:12px;padding:11px 12px;border-radius:10px;background:#10243a;color:#d9ebff;font-size:14px;line-height:1.35}.status.success{background:#0d3427;color:#baf5d7}.status.error{background:#3a171c;color:#ffc8cf}.actions{display:flex;gap:9px;margin-top:12px}.btn{border:0;border-radius:10px;padding:11px 15px;font-weight:800;cursor:pointer}.btn.primary{background:#1976ed;color:white}.btn.ghost{background:#17263a;color:#e9f2fb;border:1px solid #2b4059}.btn[hidden]{display:none}.help{color:#91a6bc;text-align:center;font-size:13px;line-height:1.4;margin:14px 10px 0}@media (orientation:landscape) and (max-height:650px){.scanner-shell{width:min(100%,900px)}.camera-card{display:grid;grid-template-columns:minmax(300px,1fr) minmax(250px,.7fr);gap:12px}.camera-viewport{grid-row:1/4;max-height:78vh;aspect-ratio:4/3}.status{margin-top:0}.actions{align-self:start}.help{display:none}}
