.yf-camera { position:fixed; inset:0; z-index:1000; width:100%; height:100dvh; overflow:hidden; isolation:isolate; background:#161916; color:#fff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.yf-camera * { box-sizing:border-box; }.yf-camera button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.yf-camera header { position:absolute; inset:0 0 auto; z-index:4; display:flex; align-items:center; justify-content:space-between; min-height:68px; padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px; background:linear-gradient(#0008,transparent); }.yf-camera header>span{font-size:15px;font-weight:500}.yf-camera header>span:last-child{width:44px;}
.yf-camera header button { width:44px; height:44px; padding:10px; border:0; border-radius:50%; background:#0005; color:#fff; }
.yf-camera .viewfinder { position:absolute; inset:0; border:0; border-radius:0; margin:0; display:grid; place-items:center; background:#161916; }.yf-camera video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }.yf-camera video[data-mirror=true]{transform:scaleX(-1);}
.yf-camera .camera-status { position:relative; z-index:2; max-width:300px; margin:0; padding:24px; background:#0008; border-radius:24px; color:#fff; font-size:17px; line-height:1.5; text-align:center; }
.yf-camera .camera-guide { position:absolute; width:min(74vw,440px); height:48%; top:23%; left:50%; transform:translateX(-50%); pointer-events:none; }.yf-camera .camera-guide i{position:absolute;width:34px;height:34px;border:3px solid #fff9;}.yf-camera .camera-guide i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-top-left-radius:18px}.yf-camera .camera-guide i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-top-right-radius:18px}.yf-camera .camera-guide i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-bottom-left-radius:18px}.yf-camera .camera-guide i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-bottom-right-radius:18px}
.yf-camera .camera-instruction { position:absolute; bottom:calc(env(safe-area-inset-bottom,0px) + 142px); left:20px; right:20px; max-width:440px; margin:0 auto; padding:10px 16px; border-radius:99px; background:#0004; color:#fff; text-shadow:0 1px 8px #000; font-size:16px; line-height:1.4; text-align:center; }
.yf-camera footer { position:absolute; bottom:0; left:0; right:0; z-index:3; display:grid; grid-template-columns:1fr 84px 1fr; align-items:center; justify-items:center; padding:24px 26px calc(env(safe-area-inset-bottom,0px) + 26px); background:linear-gradient(transparent,#0009); }
.yf-camera .shutter { width:84px;height:84px;border:4px solid #fff;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 5px #333;padding:0; }.yf-camera .shutter:disabled{opacity:.4;}.yf-camera .gallery-button,.yf-camera .camera-flip{width:52px;height:52px;padding:12px;border-radius:50%;background:#ffffff22;border:1px solid #ffffff55;color:#fff;display:grid;place-items:center;}.yf-camera svg{display:block;width:100%;height:100%;}.yf-camera [hidden]{display:none!important;}
@media(orientation:landscape) and (max-height:500px){.yf-camera .camera-guide{height:60%;top:16%;width:40vw;}.yf-camera footer{left:auto;width:140px;height:100%;grid-template-columns:1fr;grid-template-rows:1fr 84px 1fr;padding:14px;background:linear-gradient(90deg,transparent,#0008);}.yf-camera .camera-instruction{bottom:20px;right:155px;}}