*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f0f1a;--surface: #1a1a2e;--surface2: #22223b;--accent: #7c6af7;--accent-hover: #9580ff;--text: #f0f0f5;--text-muted: #888899;--danger: #e05555;--success: #4caf7d;--radius: 14px;--btn-height: 56px}html,body{height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}#app{height:100dvh;display:flex;flex-direction:column}.screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;min-height:0}.home-screen{gap:2rem;text-align:center}.home-screen h1{font-size:2rem;font-weight:700;letter-spacing:-.02em}.home-screen .subtitle{color:var(--text-muted);font-size:.95rem}.btn-group{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:320px}.btn{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;height:var(--btn-height);border:none;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:opacity .15s,transform .1s;-webkit-tap-highlight-color:transparent}.btn:active{opacity:.85;transform:scale(.97)}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-secondary{background:var(--surface2);color:var(--text);border:1px solid rgba(255,255,255,.08)}.btn-secondary:hover{background:#2a2a40}.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger)}.btn-success{background:var(--success);color:#fff}.camera-screen{gap:1rem;padding:0}.camera-viewport{flex:1;width:100%;position:relative;background:#000;overflow:hidden;min-height:0}.camera-viewport video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)}.camera-controls{width:100%;padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:center;gap:1.5rem;background:var(--bg);flex-shrink:0}.shutter-btn{width:72px;height:72px;border-radius:50%;border:4px solid #fff;background:transparent;cursor:pointer;position:relative;flex-shrink:0;-webkit-tap-highlight-color:transparent;transition:transform .1s}.shutter-btn:after{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:50%;background:#fff}.shutter-btn:active{transform:scale(.9)}.camera-back-btn{position:absolute;top:1rem;left:1rem;background:#00000080;border:none;color:#fff;font-size:1.5rem;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.confirm-screen{gap:1rem;padding:0}.confirm-image-wrap{flex:1;width:100%;position:relative;background:#000;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.confirm-image-wrap img{max-width:100%;max-height:100%;object-fit:contain;display:block}.confirm-controls{width:100%;padding:1.25rem 1.5rem;display:flex;gap:.75rem;background:var(--bg);flex-shrink:0}.confirm-controls .btn{flex:1}.result-screen{gap:1rem;padding:0}.result-canvas-wrap{flex:1;width:100%;background:#000;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.result-canvas-wrap canvas{max-width:100%;max-height:100%;object-fit:contain;display:block}.result-controls{width:100%;padding:1.25rem 1.5rem;display:flex;gap:.75rem;background:var(--bg);flex-shrink:0}.result-controls .btn{flex:1}.processing-screen{gap:1.5rem;text-align:center}.spinner{width:48px;height:48px;border:4px solid var(--surface2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.progress-label{font-size:.9rem;color:var(--text-muted)}.progress-bar-wrap{width:100%;max-width:280px;height:6px;background:var(--surface2);border-radius:999px;overflow:hidden}.progress-bar-fill{height:100%;background:var(--accent);border-radius:999px;transition:width .3s ease;width:0%}.error-msg{color:var(--danger);font-size:.9rem;text-align:center;padding:.5rem 1rem}