* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #0e0e0e; color: #f2f2f2; font: 17px/1.35 -apple-system, ui-sans-serif, system-ui, sans-serif;
  padding: env(safe-area-inset-top) calc(12px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
header { display: flex; justify-content: space-between; align-items: center; min-height: 48px; }
header strong { font-size: 1.15rem; }
.back { color: #9cc3ff; text-decoration: none; padding: 12px 0; min-width: 44px; }
.camwrap { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 46vh; background: #000; border-radius: 10px; overflow: hidden; }
.camwrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.aim { position: absolute; left: 15%; right: 15%; top: 30%; bottom: 30%; border: 2px solid rgba(255,255,255,.75); border-radius: 8px; pointer-events: none; }
.flash { position: absolute; inset: 0; background: #3fd46a; opacity: 0; pointer-events: none; transition: opacity .35s; }
.flash.on { opacity: .55; transition: none; }
.flash.bad { background: #e04545; }
.start { position: absolute; inset: 0; margin: auto; width: 70%; height: 72px; font-size: 1.25rem; font-weight: 700; border: 0; border-radius: 12px; background: #2563c9; color: #fff; }
.torch { position: absolute; right: 10px; bottom: 10px; min-width: 64px; min-height: 48px; border-radius: 24px; border: 1px solid #fff; background: rgba(0,0,0,.5); color: #fff; font-weight: 600; }
.torch[aria-pressed="true"] { background: #f5c518; color: #000; }
.status { min-height: 1.4em; margin: 8px 2px; color: #bbb; }
.status.err { color: #ff8a8a; font-weight: 600; }
.slot { display: block; width: 100%; text-align: left; margin: 8px 0; padding: 12px 14px; min-height: 76px; border-radius: 10px; border: 2px dashed #555; background: #151515; color: inherit; font: inherit; }
.slot[data-empty="0"] { border-style: solid; border-color: #3f6fb0; background: #10213b; }
.slot.hit { border-color: #3fd46a; background: #12391f; }
.slot-label { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: #9a9a9a; }
.slot-main { display: block; font-size: 1.35rem; font-weight: 700; font-family: ui-monospace, "SF Mono", Menlo, monospace; word-break: break-word; }
.slot-sub { display: block; font-size: .95rem; color: #ccc; }
.confirm { width: 100%; min-height: 72px; margin: 10px 0; font-size: 1.35rem; font-weight: 800; border: 0; border-radius: 12px; background: #1f8f45; color: #fff; }
.confirm:disabled { background: #2a2a2a; color: #777; }
.result { padding: 12px 14px; border-radius: 10px; background: #12391f; border: 1px solid #2f8a4b; font-size: 1.05rem; margin: 6px 0; }
.result.err { background: #3d1212; border-color: #a33; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.row2 button { min-height: 56px; font-size: 1.05rem; border-radius: 10px; border: 1px solid #666; background: #1a1a1a; color: #f2f2f2; }
.row2 button:disabled { color: #666; border-color: #333; }
.name { display: block; margin: 12px 0 4px; color: #bbb; font-size: .95rem; }
.name input { display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 17px; padding: 12px; border-radius: 8px; border: 1px solid #555; background: #141414; color: #f2f2f2; }
.hint { color: #8a8a8a; font-size: .85rem; }
@media (orientation: landscape) and (max-height: 500px) { .camwrap { max-height: 60vh; } }