.rp-app { max-width: 480px; margin: 0 auto; font-family: system-ui, -apple-system, Segoe UI, Arial; }
.rp-topbar { display:flex; gap:.5rem; align-items:center; justify-content:space-between; margin:.25rem 0 .5rem; }
.rp-topbar .rp-ghost { background:#eef1f5; border:0; padding:.5rem .75rem; border-radius:10px; cursor:pointer; }
.rp-topbar label { font-size:.9rem; opacity:.8; margin-right:.25rem; }
.rp-topbar select { padding:.45rem .6rem; border-radius:10px; border:1px solid #d6d9df; }

.rp-stage { position: relative; width: 100%; aspect-ratio: 9/16; background:#000; overflow:hidden; border-radius: 0 !important; }
#recCanvas { width: 100%; height: 100%; display: block; border-radius: 0 !important; } /* requested: 0 radius */
.rp-app.rp-show-result .rp-stage { display:none; }

.rp-status { position:absolute; top:.5rem; left:.5rem; padding:.2rem .45rem; font-size:.85rem; color:#fff; background:rgba(0,0,0,.4); border-radius:6px; }

.rp-shutter {
  position: absolute; left: 50%; bottom: .8rem; transform: translateX(-50%);
  width: 72px; height: 72px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.9); background: transparent; cursor: pointer;
  display:flex; align-items:center; justify-content:center;
}
.rp-shutter-inner {
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(255,255,255,.98);
  transition: all .15s ease;
}
.rp-shutter.rp-recording .rp-shutter-inner {
  background: #ef4444; border-radius: 14px; width: 46px; height: 46px;  /* iPhone "square" while recording */
}

.rp-result { margin:.75rem 0; }
.rp-result img, .rp-result video { width: 100%; border-radius: 0; }
.rp-actions { display:flex; gap:.5rem; margin:.5rem 0; }
.rp-btn { flex:1; padding:.7rem 1rem; border-radius:12px; border:1px solid #d6d9df; background:#fff; cursor:pointer; text-align:center; }
.rp-primary { background:#6366f1; color:#fff; border-color:#6366f1; }
.rp-meta { font-size:.9rem; opacity:.8; word-break: break-all; }
.rp-hide { display:none !important; }