*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#fdfdfd;color:#333;padding:10px}.container{max-width:600px;margin:0 auto;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 12px #00000014}.header{padding:16px;background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff;text-align:center}.header h1{font-size:24px;margin-bottom:4px}.header p{font-size:14px;opacity:.9}.content{padding:20px}.camera-section{position:relative;margin-bottom:20px;border-radius:8px;overflow:hidden;background:#000;aspect-ratio:1}.video-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.canvas-overlay{position:absolute;top:0;left:0;width:100%;height:100%;transform:scaleX(-1)}.ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.ui-overlay canvas{width:100%;height:100%;object-fit:cover}.result-section{text-align:center;margin-bottom:20px}.result-canvas{width:100%;max-width:400px;border-radius:8px;box-shadow:0 4px 12px #0000001a}.state-label{text-align:center;font-size:18px;font-weight:600;color:#f57c00;margin-bottom:16px}.button-group{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}button{flex:1;min-width:120px;padding:12px 16px;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;text-transform:uppercase}.btn-primary{background:linear-gradient(135deg,#ff9800,#f57c00);color:#fff}.btn-primary:active{transform:scale(.98);opacity:.9}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:#fff;color:#333;border:1px solid #ff9800}.btn-secondary:active{background:#fff3e0}.btn-danger{background:#ff6b6b;color:#fff}.checkbox-group{display:flex;align-items:center;gap:8px;margin:12px 0;font-size:14px}input[type=checkbox]{cursor:pointer;width:18px;height:18px;accent-color:#ff9800}.loading{display:none;text-align:center;padding:20px;color:#f57c00;font-weight:600}.loading.active{display:block}.spinner{display:inline-block;width:20px;height:20px;border:3px solid #f3f3f3;border-top:3px solid #ff9800;border-radius:50%;animation:spin 1s linear infinite;margin-right:8px;vertical-align:middle}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{background:#ffe0e0;border:1px solid #ff6b6b;border-radius:6px;padding:12px;margin-bottom:16px;color:#c92a2a;font-size:14px;display:none}.error-message.active{display:block}.hidden{display:none!important}@media (max-width: 600px){body{padding:8px}.content{padding:16px}button{font-size:13px;padding:10px 12px}.header h1{font-size:20px}}