:root{
  --bg:#07090c;
  --panel: rgba(255,255,255,0.06);
  --panel2: rgba(255,255,255,0.08);
  --stroke: rgba(255,255,255,0.10);
  --stroke2: rgba(255,255,255,0.16);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --muted2: rgba(255,255,255,0.45);
  --shadow: 0 24px 80px rgba(0,0,0,0.55);
  --green: #2EE59D;
  --red: #FF4B4B;
  --radius: 18px;
  --radius2: 22px;

  --gap-1: 10px;
  --gap-2: 12px;
  --gap-3: 14px;
  --gap-4: 16px;

  /* ✅ SAFE AREA (iOS notch / dynamic island) */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}

*{ 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(1000px 700px at 50% 20%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(1000px 700px at 10% 90%, rgba(46,229,157,0.06), transparent 60%),
    radial-gradient(1000px 700px at 90% 90%, rgba(255,75,75,0.06), transparent 60%),
    var(--bg);
  color:var(--text);
}

/* Make sure this class actually hides the panel everywhere */
.sm-hidden{
  display: none !important;
}

/* ✅ lock scroll behind modal */
html.modal-open, body.modal-open{
  height: 100%;
  overflow: hidden;
}

/* ✅ Accessibility: hidden but readable */
.srOnly{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.app{
  min-height:100%;
  /* ✅ include safe areas */
  padding:
    calc(clamp(12px, 2.4vw, 28px) + var(--sat))
    calc(clamp(12px, 2.4vw, 28px) + var(--sar))
    calc(clamp(12px, 2.4vw, 28px) + var(--sab))
    calc(clamp(12px, 2.4vw, 28px) + var(--sal));
}

.topbar{ display:none !important; }
.stage{ max-width:1100px; margin:0 auto; }

.videoCard{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* -------------------- SELECT -------------------- */
.selectWrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  width:100%;
}
.select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  padding:12px 44px 12px 14px;
  border-radius:14px;
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-weight:900;
  outline:none;
}
.selectChevron{
  position:absolute;
  right:14px;
  pointer-events:none;
  opacity:.65;
}

/* -------------------- STAGE -------------------- */
.videoStage{
  position:relative;
  width:100%;
  aspect-ratio: var(--stage-ar, 16/9);
  background:#000;
  border-radius: var(--radius2);
  overflow:hidden;
}

.videoLayer{
  position:absolute;
  inset:0;
  z-index:1;
  transform:none;
  transform-origin:center;
  will-change:transform;
}

/* ✅ LIVE video (stage): keep cover */
.video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.overlayCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
}

.uiLayer{
  position:absolute;
  inset:0;
  z-index:5;
  transform:none !important;
}

/* -------------------- HUD -------------------- */
.hud{
  position:absolute;
  top: calc(14px + var(--sat)); /* ✅ safe-area top */
  display:flex;
  gap:10px;
  z-index:20;
}
.hud--left{ left: calc(14px + var(--sal)); }   /* ✅ safe-area left */
.hud--right{ right: calc(14px + var(--sar)); } /* ✅ safe-area right */

.repBadge{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(0,0,0,.25);
}
.repBadge__num{
  font-size:34px;
  font-weight:1000;
  letter-spacing:-0.02em;
  color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);
}
.repBadge__label{
  font-size:14px;
  font-weight:900;
  opacity:1;
  color:rgba(255,255,255,.92);
  text-shadow: 0 2px 10px rgba(0,0,0,.70);
}

/* ✅ TIMER — stable + centered + “perfect” digits */
.timeBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width: 208px;
  min-height: 44px;
  padding: 10px 16px;

  border-radius: 999px;
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(0,0,0,.25);

  font-size: 20px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: -0.01em;
  color:#fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.75);

  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1, "liga" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* -------------------- INFO PILL -------------------- */
.infoPill{
  position:absolute;
  top: calc(14px + var(--sat)); /* ✅ safe-area top */
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.38);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px);
  font-weight:900;
  white-space:nowrap;
  z-index:20;
  max-width: min(920px, calc(100% - 28px));
}
.infoPill .dot{
  width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.25);
  flex:0 0 auto;
}
.infoPill__main{ overflow:hidden; text-overflow:ellipsis; }
.infoPill__meta{
  display:inline-flex;
  gap:8px;
  align-items:center;
  margin-left:6px;
  flex:0 0 auto;
}

.is-recording .infoPill .dot{
  background:var(--red);
  box-shadow:0 0 0 4px rgba(255,75,75,.18);
  animation:pulse 1s infinite;
}
@keyframes pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.3)}
  100%{transform:scale(1)}
}

.miniPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
}
.miniPill--gray{ opacity:.75; }
.miniPill--green{
  background:rgba(46,229,157,.10);
  border-color:rgba(46,229,157,.25);
}
.miniPill--red{
  background:rgba(255,75,75,.12);
  border-color:rgba(255,75,75,.28);
}

/* -------------------- BUTTONS -------------------- */
.btn{
  padding:12px 14px;
  border-radius:14px;
  font-weight:1000;
  border:1px solid var(--stroke2);
  background:rgba(255,255,255,.05);
  color:var(--text);
}
.btn--primary{ background:rgba(46,229,157,.18); }
.btn--danger{ background:rgba(255,75,75,.20); }
.btn--ghost{ background:rgba(255,255,255,.04); }

.btn--cta{
  width:100%;
  min-height:52px;
  border-radius:18px;
  font-size:16px;
}

/* -------------------- CONTROLS -------------------- */
.controls{
  margin-top:0;
  padding:16px;
  border-radius:22px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.controls--stack{
  display:flex;
  flex-direction:column;
  gap: var(--gap-3);
}
.row{
  width:100%;
  display:flex;
  gap: var(--gap-2);
  align-items:center;
}
.row--cta{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-2);
}

#importBtn{ display:none !important; }
#statusPill{ display:none !important; visibility:hidden !important; pointer-events:none !important; }
#cameraState{ display:none !important; visibility:hidden !important; pointer-events:none !important; }

/* -------------------- CENTER HINT -------------------- */
.centerHint{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background: radial-gradient(closest-side, rgba(0,0,0,.35), rgba(0,0,0,0));
  z-index:25;
  text-align:center;
  pointer-events:auto;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}
.centerHint__title{ font-weight:1000; font-size:18px; opacity:.9; }
.centerHint__cta{ font-weight:1000; font-size:34px; letter-spacing:-0.02em; }

/* -------------------- MODAL (NO GAP / NO 1-4PX LINE) -------------------- */
.modalRoot{
  position:fixed;
  inset:0;
  display:none;

  /* ✅ include safe areas */
  padding:
    calc(16px + var(--sat))
    calc(16px + var(--sar))
    calc(16px + var(--sab))
    calc(16px + var(--sal));

  overflow:hidden;
  z-index:999;
  background: transparent;
}
.modalRoot[aria-hidden="false"]{ display:flex; }

.modalBackdrop{ display:none !important; }
.modal{ border: none !important; outline: none !important; }

.modal{
  position:relative;
  flex:1 1 auto;
  width:100%;
  height:100%;
  border-radius: var(--radius2);
  overflow:hidden;
  background: rgba(255,255,255,0.02);
  box-shadow: var(--shadow);

  display:grid;
  grid-template-rows: 1fr auto;
  gap:0;

  transform: translateZ(0);
  backface-visibility: hidden;
}

.modalInner{
  height:100%;
  width:100%;
  display:contents;
}

.modalPreview{
  position:relative !important;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  background:#000;
  border-radius:0;
  border:none !important;
  padding:0 !important;
  margin:0 !important;

  transform: translateZ(0);
  backface-visibility: hidden;
  clip-path: inset(0);
}

.modalPreview > *,
.modalPreview *{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}

/* ✅ FIX (IMPORTANT):
   Playback in modal must NOT crop.
   -> remove the negative offsets + cover
   -> force contain
*/
.modalPreview video,
.modalPreview .modalVideo{
  position:absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  display:block !important;

  object-fit: contain !important;
  object-position: 50% 50% !important;

  background:#000;
  transform: translateZ(0);
}

/* ✅ Extra safety for the playback element */
#playbackVideo{
  object-fit: contain !important;
  object-position: 50% 50% !important;
}

/* Bottom area */
.modalBottom{
  position:relative;
  padding:
    12px
    12px
    calc(12px + var(--sab)) /* ✅ safe-area bottom */
    12px;

  display:flex;
  flex-direction:column;
  gap:12px;

  background: linear-gradient(to top, rgba(7,9,12,.98) 75%, rgba(7,9,12,0));
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.08);

  z-index: 50;
  pointer-events: auto;
}

.modalSummary{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  padding: 0 !important;
}

.modalMeta--compact{ display:none; }

.repsGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
  align-items:stretch;
}

.repCard{
  min-width:0;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  border-radius: 14px;
  padding: 10px 12px;

  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.repCard__k{
  font-size: 13px;
  font-weight: 900;
  color: rgba(255,255,255,.65);
  white-space: nowrap;
}

.repCard__v{
  margin-left:auto;
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:10px;
  white-space: nowrap;
}

.repUnit{
  font-size: 16px;
  font-weight: 900;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}

.repCard--final{ cursor:text; }
.repCard--final .finalInput{
  width: 84px;
  max-width: 40vw;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-size: 34px;
  font-weight: 1000;
  letter-spacing:-0.02em;
  outline: none;
  text-align: right;
  -moz-appearance: textfield;
}
.repCard--final .finalInput::-webkit-outer-spin-button,
.repCard--final .finalInput::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}

#finalKv.is-focused{ border-color: rgba(255,255,255,.22); }
#finalKv.is-dirty{
  border-color: rgba(46,229,157,.65);
  box-shadow: 0 0 0 4px rgba(46,229,157,.10);
}
#finalKv.is-dirty .finalInput{ color: var(--green); }
#finalKv.is-dirty .repUnit{ color: rgba(46,229,157,.70); }
#finalKv.is-saved{ border-color: rgba(46,229,157,.75); }

.modalActions--v2{
  display:flex;
  flex-direction:column;
  gap: 10px;

  position: relative;
  z-index: 55;
  pointer-events: auto;
}

.modalRow2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ✅ NEW: single full-width row */
.modalRow1{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.modalBtn{
  width:100%;
  min-height:52px;
  border-radius:16px;
  font-size:15px;
  font-weight:1000;
}

.modalActions--v2 #confirmBtn{
  min-height: 56px;
  background: rgba(46,229,157,.22) !important;
  border-color: rgba(46,229,157,.25) !important;
}

#updateVideoBtn{ border-color: rgba(46,229,157,.22); }
#updateVideoBtn:disabled{ opacity:.55; }

/* ✅ main Download CTA */
.modalBtn--download{
  min-height: 56px;
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
}

.modalRowRestartMore{
  display:grid;
  grid-template-columns: 1fr 56px;
  gap: 10px;
  align-items:stretch;

  position: relative;
  z-index: 60;
  pointer-events: auto;
}

.modalBtn--restart{
  min-height: 58px;
  font-size: 16px;
  font-weight: 1000;
}

.modalBtn--more{
  min-height: 58px;
  width: 56px;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  font-weight: 1000;
  border-radius: 16px;
}

/* ✅ iOS: ensure More button is tapable */
#moreBtn{
  pointer-events: auto;
  touch-action: manipulation;
  position: relative;
  z-index: 70;
}

.morePanel,
#morePanel{
  position: fixed !important;
  top: 0;
  left: 0;

  width: min(520px, calc(100vw - 24px));
  padding: 12px;
  border-radius: 18px;
  background: rgba(15,16,18,.96);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);

  z-index: 1000000 !important;
  pointer-events: auto;

  max-height: calc(100dvh - 24px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.morePanel .modalRow2,
#morePanel .modalRow2{
  grid-template-columns: 1fr;
  gap: 10px;
}
@media(min-width:720px){
  .morePanel .modalRow2,
  #morePanel .modalRow2{ grid-template-columns: 1fr 1fr; }
}

/* -------------------- MOBILE -------------------- */
@media(max-width:860px){
  .app{
    padding:
      calc(10px + var(--sat))
      calc(10px + var(--sar))
      calc(10px + var(--sab))
      calc(10px + var(--sal));
  }

  .videoCard{
    height: calc(100dvh - 20px);
    gap: 10px;
  }

  .videoStage{
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 22px;
  }

  .controls{
    flex: 0 0 auto;
    padding: 12px;
    border-radius: 20px;
  }

  .controls--stack{ gap: 10px; }
  .row{ gap: 10px; }
  .row--cta{ gap: 10px; }

  .infoPill{
    top:auto;
    bottom: calc(12px + var(--sab)); /* ✅ safe-area bottom */
    left: calc(12px + var(--sal));
    right: calc(12px + var(--sar));
    transform:none;
    white-space:normal;
    border-radius:16px;
    font-size:13px;
    max-width:unset;
    align-items:flex-start;
  }
  .infoPill__main{ display:block; line-height:1.25; }
  .infoPill__meta{ margin-left:auto; padding-left:10px; }

  .modalRoot{
    padding:
      calc(12px + var(--sat))
      calc(12px + var(--sar))
      calc(12px + var(--sab))
      calc(12px + var(--sal));
  }
  .modalBottom{ padding: 10px 10px calc(10px + var(--sab)) 10px; gap: 10px; }

  /* timer a bit more compact on mobile */
  .timeBadge{
    min-width: 190px;
    font-size: 18px;
    min-height: 42px;
    padding: 10px 14px;
  }
}