*,:before,:after{box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}#root{width:100%;min-height:100svh}.app{color:#e2e8f0;background:#0f172a;flex-direction:column;min-height:100svh;font-family:system-ui,Segoe UI,sans-serif;display:flex}.app-header{text-align:center;background:#1e293b;border-bottom:1px solid #334155;padding:16px 20px}.app-header h1{color:#f1f5f9;letter-spacing:.5px;margin:0;font-size:20px;font-weight:600}.app-main{flex-direction:column;flex:1;align-items:center;gap:20px;padding:24px 16px;display:flex}.viewport{aspect-ratio:4/3;background:#1e293b;border:1px solid #334155;border-radius:16px;justify-content:center;align-items:center;width:100%;max-width:480px;display:flex;position:relative;overflow:hidden}.video{object-fit:cover;width:100%;height:100%}.preview-img{object-fit:contain;width:100%;height:100%}.guide{pointer-events:none;margin:auto;position:absolute;inset:0}.guide--circle{border:3px solid #ef4444;border-radius:50%;width:65%;height:65%;box-shadow:0 0 0 9999px #00000059}.guide--rect{border:3px solid #ef4444;border-radius:8px;width:75%;height:60%;box-shadow:0 0 0 9999px #00000059}.hint{text-align:center;color:#fff;background:#00000073;margin:0;padding:4px 0;font-size:13px;position:absolute;bottom:12px;left:0;right:0}.placeholder{color:#475569}.placeholder svg{width:80px;height:80px}.shape-toggle{gap:8px;display:flex}.toggle-btn{color:#94a3b8;cursor:pointer;background:0 0;border:1px solid #475569;border-radius:20px;padding:6px 20px;font-size:14px;transition:background .2s,color .2s,border-color .2s}.toggle-btn.active{color:#fff;background:#2563eb;border-color:#2563eb}.status-msg{border-radius:8px;margin:0;padding:8px 16px;font-size:14px}.status-msg--success{color:#4ade80;background:#22c55e26;border:1px solid #22c55e4d}.status-msg--error{color:#f87171;background:#ef444426;border:1px solid #ef44444d}.actions{justify-content:center;gap:12px;display:flex}.btn{cursor:pointer;border:none;border-radius:12px;padding:12px 32px;font-size:16px;font-weight:600;transition:opacity .2s,transform .1s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{color:#fff;background:#2563eb}.btn--primary:hover:not(:disabled){background:#1d4ed8}.btn--secondary{color:#e2e8f0;background:#334155}.btn--secondary:hover{background:#475569}.btn--capture{color:#fff;background:#ef4444;border:4px solid #fff;border-radius:50%;width:72px;height:72px;padding:0;font-size:13px;font-weight:700;box-shadow:0 0 0 3px #ef4444}.btn--capture:hover{background:#dc2626}.iab-warning{text-align:center;flex-direction:column;align-items:center;gap:16px;padding:40px 24px;display:flex}.iab-warning svg{color:#f59e0b;width:64px;height:64px}.iab-warning h2{color:#f1f5f9;margin:0;font-size:20px}.iab-warning p{color:#94a3b8;margin:0;font-size:15px;line-height:1.6}.iab-url{word-break:break-all;background:#1e293b;border:1px solid #334155;border-radius:8px;padding:8px 12px;color:#475569!important;font-size:12px!important}