@font-face{
  font-family:"Vazirmatn";
  src:url("fonts/Vazirmatn-subset.woff") format("woff");
  font-weight:100 900;
  font-display:swap;
}
:root{
  --sky:#2FA8E8; --sky-dark:#0E76BC; --sky-light:#AEE0F7; --sky-pale:#E4F4FC;
  --bg:#0b1118; --panel:#141c26; --line:rgba(255,255,255,.12); --txt:#eef4fa; --mut:#9db0c2;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  --top:calc(var(--safe-t) + 62px); --bot:calc(var(--safe-b) + 128px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);
  font-family:"Vazirmatn",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
#app{position:fixed;inset:0}
.screen{position:absolute;inset:0;display:flex;flex-direction:column}
.screen[hidden]{display:none}

/* header */
.top{position:absolute;top:0;inset-inline:0;height:var(--top);padding:calc(var(--safe-t) + 8px) 14px 6px;display:flex;align-items:center;gap:10px;z-index:3}
.title{flex:1;text-align:center;line-height:1.35}
.title b{display:block;font-weight:600;font-size:15px}
.title small{display:block;color:var(--mut);font-size:11px}
.spacer{width:40px}

/* stage + frame */
.stage{position:absolute;inset:var(--top) 0 var(--bot) 0;display:grid;place-items:center;overflow:hidden}
.stage.s2{bottom:calc(var(--safe-b) + 140px)}
.frame{position:relative;overflow:hidden;background:#000;border-radius:14px;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 6px 28px #0009}
.frame video,.frame #base{position:absolute;inset:0;width:100%;height:100%}
#cam{object-fit:cover}
#bgCam{display:none;object-fit:cover;filter:blur(26px) brightness(.72) saturate(1.15);transform:scale(1.25)}
.frame.fit-blur #bgCam{display:block}
.frame.fit-blur #cam{object-fit:contain}
#base{object-fit:contain}
.ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.guide{position:absolute;inset-inline:0;height:0;border-top:1.5px dashed rgba(255,255,255,.75);opacity:0;transition:opacity .15s;pointer-events:none}
.guide.gt{top:13%}
.guide.gb{top:82.3%}
.guide i{position:absolute;top:3px;inset-inline-start:8px;font-style:normal;font-size:10px;color:#fff;background:#0007;padding:1px 6px;border-radius:6px}
.frame.dragging .guide{opacity:1}
.frame.noguide .guide{display:none}

.round{width:52px;height:52px;border-radius:50%;background:rgba(20,28,38,.72);border:1px solid var(--line);
  display:grid;place-items:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.round.sm{width:40px;height:40px}
.round svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.round.sm svg{width:21px;height:21px}
.round:active{transform:scale(.94)}

.bar{position:absolute;bottom:0;inset-inline:0;height:var(--bot);padding:0 28px var(--safe-b);display:flex;align-items:center;justify-content:space-between;z-index:3}
.shutter{width:78px;height:78px;border-radius:50%;border:4px solid #fff;display:grid;place-items:center;padding:0}
.shutter span{width:62px;height:62px;border-radius:50%;background:#fff;transition:transform .08s,background .15s}
.shutter:active span{transform:scale(.88);background:var(--sky-light)}
.shutter:disabled{opacity:.4}

#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:5}
#flash.go{animation:fl .28s ease-out}
@keyframes fl{0%{opacity:.85}100%{opacity:0}}

#fallback{position:absolute;inset:var(--top) 0 var(--bot) 0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:30px;text-align:center;background:var(--bg)}
#fallback[hidden]{display:none}
#fallback p{margin:0 0 6px;color:var(--mut);line-height:1.9;max-width:320px}

.primary,.ghost{min-height:48px;padding:0 22px;border-radius:14px;font-weight:600;font-size:15px}
.primary{background:var(--sky);color:#04202f}
.primary:active{background:var(--sky-dark);color:#fff}
.primary:disabled,.ghost:disabled{opacity:.45}
.ghost{background:rgba(255,255,255,.08);border:1px solid var(--line)}
.wide{width:100%;margin-top:8px}

/* result */
#resScreen{background:var(--bg)}
.actions{position:absolute;bottom:0;inset-inline:0;display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;padding:10px 14px calc(var(--safe-b) + 16px)}
.actions .send{grid-column:1/-1}
.actions button{padding:0 8px}

/* settings sheet */
#sheetBack{position:absolute;inset:0;background:#0008;z-index:8}
#sheetBack[hidden],#sheet[hidden],#sendSheet[hidden]{display:none}
#sheet,#sendSheet{position:absolute;bottom:0;inset-inline:0;z-index:9;background:var(--panel);border-radius:22px 22px 0 0;
  padding:8px 18px calc(var(--safe-b) + 18px);max-height:88%;overflow:auto;border-top:1px solid var(--line);animation:up .22s ease-out}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.grab{width:42px;height:4px;border-radius:4px;background:var(--line);margin:4px auto 10px}
#sheet h2,#sendSheet h2{margin:0 0 10px;font-size:17px}
.group{border:1px solid var(--line);border-radius:16px;padding:12px 14px 4px;margin-bottom:12px;background:rgba(255,255,255,.025)}
.group h3{margin:0 0 10px;font-size:14px;color:var(--sky-light)}
.field{margin-bottom:12px}
.field>label{display:block;margin-bottom:8px;color:var(--mut);font-size:13px}
.field.row{display:flex;align-items:center;justify-content:space-between}
.field.row>label{margin:0;color:var(--txt);font-size:14px}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.group .seg:last-child,.field .seg{margin-bottom:0}
.seg button{flex:1 1 auto;min-height:40px;padding:0 10px;border-radius:11px;background:rgba(255,255,255,.07);border:1px solid var(--line);font-size:13px}
.seg button.on{background:var(--sky);border-color:var(--sky);color:#04202f;font-weight:600}
.seg button:disabled{opacity:.4}
#ratioSeg{display:grid;grid-template-columns:repeat(2,1fr)}
input[type=range]{width:100%;accent-color:var(--sky)}
input[type=text]{width:100%;min-height:46px;border-radius:12px;border:1px solid var(--line);background:#0d141c;color:var(--txt);padding:0 14px;font:inherit;font-size:15px;text-align:left}
input[type=text]:focus{outline:2px solid var(--sky);outline-offset:1px}
input:disabled{opacity:.45}
.switch{appearance:none;-webkit-appearance:none;width:50px;height:30px;border-radius:30px;background:#2a3644;position:relative;transition:background .15s;cursor:pointer;margin:0}
.switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .15s}
.switch:checked{background:var(--sky)}
.switch:checked::after{transform:translateX(-20px)}

.note{margin:12px 2px 6px;color:var(--mut);font-size:12px;line-height:1.9}
.note b{color:var(--sky-light);font-weight:600}