:root { --bg:#0b0d10; --panel:#15191f; --txt:#eef2f6; --mut:#8b94a3;
        --green:#30d158; --accent:#0a84ff; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--txt);
             font-family:-apple-system,Segoe UI,Roboto,sans-serif; overscroll-behavior:none; }
body { height:100dvh; overflow:hidden; }

.view { height:100dvh; display:flex; flex-direction:column; }
.view[hidden] { display:none; }

.stage { position:relative; flex:1; display:flex; align-items:center;
         justify-content:center; background:#000; overflow:hidden; }
/* video + overlay fill the stage with object-fit:contain (no distortion) so JS
   can map the box into the real displayed video rectangle. The mirror flip is
   applied by JS only for the FRONT camera (back camera is shown as-is). */
#cam { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
#overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.stage.result { background:#1b1f25; }
#resultImg { max-width:100%; max-height:100%; object-fit:contain; }

.status { position:absolute; top:16px; left:50%; transform:translateX(-50%);
          display:flex; align-items:center; gap:9px;
          background:rgba(18,22,28,.78); color:#fff; padding:11px 20px; border-radius:26px;
          font-size:17px; font-weight:700; white-space:nowrap; -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px); border:2px solid #ffb020;
          box-shadow:0 6px 20px rgba(0,0,0,.45); transition:border-color .15s, color .15s; }
.status .ico { font-size:22px; line-height:1; }
.status.ready    { border-color:var(--green); color:var(--green); }
.status.ready .ico { animation:pulse 1s ease-in-out infinite; }
.status.searching{ border-color:#5b6573; color:#cdd5df; }
@keyframes pulse { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.25); } }

.info { color:var(--mut); font-size:12px; text-align:center; padding:8px 14px; }

.bar { display:flex; align-items:center; justify-content:center; gap:16px;
       padding:16px; background:var(--panel); }

.btn { appearance:none; border:0; border-radius:12px; padding:14px 20px; font-size:15px;
       font-weight:700; color:var(--txt); background:#2a313b; text-decoration:none; }
.btn.primary { background:var(--accent); color:#fff; }

/* round shutter button */
.shutter { width:72px; height:72px; border-radius:50%; border:5px solid #fff;
           background:#3a4250; opacity:.55; transition:.15s; }
.shutter.on { background:var(--green); opacity:1;
              box-shadow:0 0 0 4px rgba(48,209,88,.35), 0 0 26px rgba(48,209,88,.6); }
.shutter:active { transform:scale(.93); }
.shutter[hidden] { display:none; }

.spin { animation:sp 1s linear infinite; }
@keyframes sp { to { transform:rotate(360deg); } }