#collapsePlayer,
.player-hero > .live-pill,
.hero-copy {
  z-index: 2;
}

.tabbar { grid-template-columns: repeat(6, 1fr); }
.capture-button { position: relative; overflow: visible; }
.capture-button > span { display: grid; place-items: center; width: 48px; height: 48px; margin-top: -22px; border: 4px solid var(--paper); border-radius: 50%; background: var(--red); color: white; box-shadow: 0 7px 18px #9d151b4d; }
.capture-button > span svg { width: 23px; height: 23px; }
.capture-button small { font-size: 9px; color: var(--red); }
.capture-dialog { width: min(100%,430px); height: 100dvh; max-height: none; border: 0; padding: 0; margin: auto; background: #090908; color: white; overflow: hidden; }
.capture-dialog::backdrop { background: #000b; }
.capture-dialog[open] { animation: playerUp .28s ease; }
.capture-stage { position: relative; width: 100%; height: 100%; background: radial-gradient(circle at 50% 38%,#302f2b,#0c0c0b 68%); }
#cameraPreview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
#cameraPreview.back { transform: none; }
.capture-stage.is-recording::after { content:""; position:absolute; z-index:3; inset:7px; border:3px solid #ef3038; border-radius:18px; pointer-events:none; animation:recordingFrame 1.2s ease-in-out infinite; }
.live-recording-badge { position:absolute; z-index:5; top:max(74px,calc(env(safe-area-inset-top) + 62px)); left:50%; transform:translateX(-50%) translateY(-8px); display:flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid #ff7b80; border-radius:99px; background:#b5121be8; color:#fff; box-shadow:0 8px 24px #0006; font-size:10px; letter-spacing:.08em; opacity:0; visibility:hidden; transition:.18s ease; }
.live-recording-badge i { width:8px; height:8px; border-radius:50%; background:#fff; animation:pulseDot .8s infinite; }
.live-recording-badge span { min-width:37px; font:800 12px/1 Manrope; letter-spacing:.03em; }
.capture-stage.is-recording .live-recording-badge { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.capture-stage.is-recording #cameraPreview { filter:none; }
.capture-stage.is-recording .capture-shade { background:linear-gradient(#0005,transparent 24%,transparent 68%,#000b); }
.capture-stage.is-recording #flipCamera,.capture-stage.is-recording .capture-destination button,.capture-stage.is-recording #libraryButton { opacity:.42; pointer-events:none; }
@keyframes recordingFrame { 50% { border-color:#ef303855; } }
.camera-placeholder { position: absolute; z-index: 2; inset: 22% 32px auto; text-align: center; display: grid; justify-items: center; gap: 8px; }
.camera-placeholder > span { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #ffffff12; border: 1px solid #ffffff1f; }
.camera-placeholder svg { width: 34px; height: 34px; }
.camera-placeholder b { margin-top: 9px; font: 700 21px Manrope; }
.camera-placeholder p { margin: 0; color: #b8b5ae; font-size: 13px; line-height: 1.45; }
.camera-placeholder button { margin-top: 12px; border: 0; border-radius: 99px; padding: 11px 20px; background: white; color: #171714; font-weight: 700; }
.capture-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#0007,transparent 25%,transparent 58%,#000c); }
.capture-head { position: absolute; z-index: 4; top: max(18px,env(safe-area-inset-top)); left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; }
.capture-head button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #ffffff2b; border-radius: 50%; background: #0006; color: white; font-size: 27px; }
.capture-head svg { width: 22px; height: 22px; }
#recordingStatus { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 99px; background: #0007; font-size: 10px; font-weight: 800; letter-spacing: .12em; }
#recordingStatus i { width: 7px; height: 7px; border-radius: 50%; background: #999; }
#recordingStatus.recording i { background: #f12c36; animation: pulseDot 1s infinite; }
@keyframes pulseDot { 50% { opacity: .25; } }
.capture-destination { position: absolute; z-index: 4; left: 50%; bottom: 205px; transform: translateX(-50%); display: flex; width: 260px; padding: 4px; background: #0009; border: 1px solid #ffffff1c; border-radius: 99px; }
.capture-destination button { flex: 1; border: 0; padding: 9px 7px; border-radius: 99px; background: none; color: #c7c4be; font-size: 11px; font-weight: 700; }
.capture-destination button.active { background: white; color: #171714; }
.capture-meta { position: absolute; z-index: 4; left: 22px; right: 22px; bottom: 150px; display: flex; justify-content: space-between; align-items: center; font-size: 9px; letter-spacing: .1em; color: #bbb8b1; }
.capture-meta strong { color: white; font: 700 24px/1 Manrope; letter-spacing: .03em; }
.capture-controls { position: absolute; z-index: 4; left: 28px; right: 28px; bottom: 47px; display: flex; align-items: center; justify-content: space-between; }
.capture-controls > button:not(.record-button) { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff2b; border-radius: 50%; background: #0006; color: white; }
.capture-controls svg { width: 21px; height: 21px; }
.capture-controls > button.active { background: white; color: #171714; }
.record-button { display: grid; place-items: center; width: 82px; height: 82px; border: 4px solid white; border-radius: 50%; background: transparent; }
.record-button i { display: block; width: 64px; height: 64px; border-radius: 50%; background: #dc252c; transition: .2s; }
.record-button.recording i { width: 29px; height: 29px; border-radius: 8px; }
.capture-review { height: 100%; background: #f4f1ea; color: #171714; display: grid; grid-template-rows: 55% 45%; }
.capture-review[hidden] { display: none; }
.review-thumb { position: relative; background: #111; }
.review-thumb video { width: 100%; height: 100%; object-fit: cover; }
.review-thumb span { position: absolute; right: 14px; bottom: 14px; padding: 6px 9px; border-radius: 8px; background: #000b; color: white; font-size: 11px; }
.review-copy { padding: 21px; }
.review-copy small { color: var(--red); font-weight: 800; letter-spacing: .12em; }
.review-copy h2 { margin: 5px 0 13px; font: 800 24px Manrope; }
.review-copy textarea { width: 100%; min-height: 78px; resize: none; border: 1px solid var(--line); border-radius: 15px; padding: 12px; background: white; outline: none; }
.review-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 9px; margin-top: 13px; }
.review-actions button { border: 1px solid var(--line); border-radius: 13px; padding: 12px; background: white; font-weight: 700; }
.review-actions button:last-child { border-color: var(--red); background: var(--red); color: white; }
@media (max-height:680px) {
  .camera-placeholder { inset:15% 24px auto; }
  .camera-placeholder > span { width:58px; height:58px; }
  .capture-destination { bottom:162px; }
  .capture-meta { bottom:112px; }
  .capture-controls { bottom:max(18px,env(safe-area-inset-bottom)); }
  .record-button { width:68px; height:68px; }
  .record-button i { width:52px; height:52px; }
  .capture-review { grid-template-rows:42% 58%; }
  .review-copy { padding:15px 18px max(18px,env(safe-area-inset-bottom)); overflow:auto; }
}
@media (min-width:700px) { .capture-dialog { height: calc(100dvh - 48px); border-radius: 32px; } }