:root{
  --bg:#0b1220;
  --panel:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.12);
  --text:#e7eefc;
  --muted:rgba(231,238,252,.62);

  --green:#42d392;
  --red:#ff6b6b;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(1200px 900px at 12% -25%, rgba(66,211,146,.16), transparent 62%),
    radial-gradient(1200px 900px at 88% -20%, rgba(90,169,255,.14), transparent 62%),
    var(--bg);
  color:var(--text);
}

button{ font:inherit; color:inherit; }

.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:52px 28px 60px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.title{
  margin:0;
  font-size:22px;
  font-weight:950;
  letter-spacing:.2px;
}

/* Top bar */
.statusBar{
  border:1px solid var(--border);
  background: var(--panel);
  border-radius:24px;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:84px;
}

.gpsRow{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.gpsLabel{
  font-size:16px;
  font-weight:950;
  letter-spacing:.3px;
  opacity:.95;
}

.strengthPill{
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  padding:6px 10px;
  border-radius:999px;
  font-weight:950;
  font-size:12px;
  color: var(--muted);
  white-space:nowrap;
}
.strengthGood{ color: var(--green); border-color: rgba(66,211,146,.35); background: rgba(66,211,146,.10); }
.strengthWeak{ color: var(--red); border-color: rgba(255,107,107,.35); background: rgba(255,107,107,.10); }
.strengthNA{ color: var(--muted); }

.permBtns{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.permBtn{
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px 18px;
  font-weight:950;
  font-size:15px;
  cursor:pointer;
  min-width:210px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  user-select:none;
  white-space:nowrap;
}

.permBtn.red{
  background: rgba(255,107,107,.10);
  border-color: rgba(255,107,107,.35);
}
.permBtn.green{
  background: rgba(66,211,146,.12);
  border-color: rgba(66,211,146,.35);
}
.permBtn:disabled{ opacity:.65; cursor:not-allowed; }

.spinner{
  width:16px;height:16px;border-radius:999px;
  border:3px solid rgba(255,255,255,.20);
  border-top-color: rgba(255,255,255,.75);
  animation: spin .9s linear infinite;
  display:none;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Big Take Photos button */
.center{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 0;
}

.cameraBtn{
  width:min(720px, 100%);
  border-radius:26px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.05);
  padding:34px 26px;
  min-height:120px;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  font-size:26px;
  font-weight:950;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  transition: transform .08s ease, opacity .08s ease;
}
.cameraBtn:active{ transform: scale(.99); }
.cameraBtn:disabled{ opacity:.35; cursor:not-allowed; }
.icon{ width:30px;height:30px; flex:0 0 auto; }

/* HUD */
.hud{
  border:1px solid var(--border);
  background: var(--panel);
  border-radius:22px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:var(--muted);
  font-size:13px;
  font-weight:900;
  min-height:56px;
}
.hudMsg{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:70ch;
}
.hudRight{ display:flex; align-items:center; gap:10px; }

.pill{
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  padding:8px 10px;
  border-radius:999px;
  font-weight:950;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.num{ color: var(--text); }

/* Camera overlay layers */
.overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.92);
  display:none;
  z-index:9999;
}
.overlay.on{ display:block; }

/* IMPORTANT: header must be clickable and above video */
.overlayHeader{
  position:absolute;
  top:14px; left:14px; right:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  /* ✅ this is the key */
  pointer-events: auto;

  /* ✅ make sure it sits above the video */
  z-index: 10;
}

.overlayPill{
  pointer-events:auto;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  border-radius:999px;
  padding:10px 12px;
  color: rgba(255,255,255,.85);
  font-weight:900;
  font-size:13px;
  backdrop-filter: blur(8px);
}

/* Make sure button shows pointer */
.overlayBtn{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  border-radius:999px;
  padding:10px 14px;
  color: rgba(255,255,255,.90);
  font-weight:950;
  font-size:14px;

  cursor:pointer;
  pointer-events: auto;
}

/* Keep the video under the header */
.videoWrap{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:70px 18px 120px;

  z-index: 1;
}

video{
  width:min(980px, 100%);
  height: min(70vh, 720px);
  background:#000;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  object-fit: cover;
}

.controls{
  position:absolute;
  left:0; right:0; bottom:24px;
  display:flex;
  align-items:center;
  justify-content:center;

  z-index: 5;
}

.shutter{
  width:86px;height:86px;border-radius:999px;
  border:6px solid rgba(255,255,255,.78);
  background: rgba(255,255,255,.10);
  cursor:pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.shutter:active{ transform: scale(.98); }

@media (max-width:860px){
  .statusBar{ flex-direction:column; align-items:stretch; }
  .permBtns{ justify-content:flex-start; }
  .permBtn{ width:100%; min-width:0; }
}