*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;color:#fff;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,"Noto Sans Arabic",sans-serif;overflow:hidden;overscroll-behavior:none}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#canvas{width:100%;height:100%;object-fit:cover;display:block}
@media (min-aspect-ratio:1/1){#canvas{object-fit:contain}}
button,label.icon,a.pill{font:inherit;color:inherit;border:0;cursor:pointer;text-decoration:none}
#topbar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;background:linear-gradient(#000a,#0000)}
#status{flex:1;text-align:center;font-size:13px;opacity:.85}
.icon{width:44px;height:44px;border-radius:50%;background:#0007;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;font-size:20px}
#bottom{position:fixed;left:0;right:0;bottom:0;padding:10px 0 calc(env(safe-area-inset-bottom) + 10px);background:linear-gradient(#0000,#000c 40%)}
#controls{display:flex;align-items:center;justify-content:center;gap:34px;margin-bottom:10px}
.round{border-radius:50%;display:flex;align-items:center;justify-content:center}
.round.small{width:50px;height:50px;background:#fff3;backdrop-filter:blur(6px);font-size:22px}
.round.rec{width:74px;height:74px;background:transparent;border:5px solid #fff}
.round.rec span{width:56px;height:56px;border-radius:50%;background:#ff3b30;transition:.2s}
.round.rec.on span{width:30px;height:30px;border-radius:7px}
#carousel{display:flex;gap:10px;overflow-x:auto;padding:4px 14px;scroll-snap-type:x mandatory;scrollbar-width:none}
#carousel::-webkit-scrollbar{display:none}
.item{flex:0 0 auto;background:none;color:#fff;padding:0;width:72px;scroll-snap-align:center;text-align:center;font-size:11px;opacity:.9}
.item .th{width:72px;height:72px;border-radius:16px;background:#fff2;border:2px solid transparent;display:flex;align-items:center;justify-content:center;overflow:hidden}
.item img{max-width:62px;max-height:62px}
.item.sel .th{border-color:#ffd60a;background:#ffd60a33}
.item div.lbl{margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#recTimer{position:fixed;top:calc(env(safe-area-inset-top) + 64px);left:50%;transform:translateX(-50%);background:#ff3b30;padding:4px 12px;border-radius:20px;font-weight:600;font-variant-numeric:tabular-nums}
#adjust{position:fixed;top:calc(env(safe-area-inset-top) + 66px);inset-inline-start:12px;width:min(280px,80vw);background:#000b;backdrop-filter:blur(10px);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;font-size:14px}
#adjust label{display:flex;flex-direction:column;gap:4px}
#adjust label.row{flex-direction:row;align-items:center;gap:8px}
#adjust input[type=range]{width:100%;direction:ltr}
.overlay{position:fixed;inset:0;background:#000d;display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}
.card{background:#1c1c1e;border-radius:22px;padding:24px;max-width:420px;width:100%;text-align:center}
.card.wide{max-width:520px;padding:14px}
.card h1{font-size:22px;margin:8px 0}
.card p{line-height:1.6;opacity:.9;margin:8px 0}
.logo{font-size:56px}
.hint{font-size:13px;opacity:.7}
.err{color:#ff6b6b;margin-top:10px;font-size:14px;white-space:pre-wrap}
.pill{display:inline-block;background:#ffd60a;color:#000;font-weight:700;padding:12px 22px;border-radius:999px;font-size:16px}
.pill.big{width:100%;font-size:18px;padding:15px;margin-top:10px}
.pill.ghost{background:#fff2;color:#fff}
.pill:disabled{opacity:.5}
.row-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
#previewMedia video,#previewMedia img{width:100%;max-height:62vh;border-radius:14px;background:#000;object-fit:contain}
[hidden]{display:none!important}