.camera-capture{background:#ffffff1a;border-radius:16px;padding:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000001a;overflow:hidden;display:flex;flex-direction:column}.camera-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-shrink:0}.camera-toggle-btn{margin-left:12px;background:#4fc3f7;color:#0a2540;border:none;padding:8px 14px;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease}.camera-toggle-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px #4fc3f759}.camera-header h3{margin:0;color:#e3f2fd;font-size:1.2rem;font-weight:600}.status{padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:500;background:#2196f333;color:#64b5f6;border:1px solid rgba(33,150,243,.4)}.camera-container{position:relative;border-radius:12px;overflow:hidden;background:#000;flex:1;min-height:0}.camera-video{width:100%;height:auto;display:block}.camera-canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#1e3c72e6;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;z-index:10}.loading-spinner{width:40px;height:40px;border:4px solid rgba(255,255,255,.3);border-top:4px solid #64b5f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-overlay p{margin:0;font-size:1rem;text-align:center;color:#fff}.camera-capture.error{border-color:#f44336}.error-message{text-align:center;padding:40px 20px}.error-message h3{color:#f44336;margin-bottom:16px}.error-message p{color:#666;margin-bottom:20px}.error-message button{background:#f44336;color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:1rem;transition:background .3s}.error-message button:hover{background:#d32f2f}@media (max-width: 768px){.camera-capture{padding:16px}.camera-header{flex-direction:column;gap:12px;align-items:flex-start}.status{align-self:flex-end}}.pose-visualizer{background:#ffffff1a;border-radius:16px;padding:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 8px 32px #0000001a;overflow:hidden;display:flex;flex-direction:column}.visualizer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-shrink:0}.visualizer-header h3{margin:0;color:#e3f2fd;font-size:1.2rem;font-weight:600}.angle-info{padding:8px 16px;border-radius:20px;font-size:.9rem;font-weight:500;background:#2196f333;color:#64b5f6;border:1px solid rgba(33,150,243,.4);white-space:nowrap}.angle-info span{font-family:Courier New,monospace;font-weight:600}.visualizer-container{flex:1;border-radius:12px;overflow:hidden;background:#2a2a2a;position:relative;min-height:400px;border:2px solid rgba(255,255,255,.15);box-shadow:inset 0 0 25px #ffffff1a}@media (max-width: 768px){.pose-visualizer{padding:16px;min-height:400px}.visualizer-header{flex-direction:column;gap:12px;align-items:flex-start;padding:12px 16px}.angle-info{align-self:flex-end;font-size:.8rem;padding:6px 12px}.visualizer-container{min-height:300px}}.visualizer-container:empty:before{content:"等待姿态数据...";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fffc;font-size:1.1rem;text-align:center;font-weight:500}.visualizer-container canvas{border-radius:12px;outline:none;width:100%!important;height:100%!important;display:block}.angle-info{transition:all .3s ease}.angle-info:hover{transform:scale(1.05);box-shadow:0 4px 12px #2196f34d}.visualizer-header h3{background:linear-gradient(135deg,#82caff,#1e88e5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700}.visualizer-container>canvas{width:100%!important;height:100%!important}.pose-visualizer *{box-sizing:border-box}.angle-display{position:absolute;bottom:0;left:0;right:0;padding:12px;background:linear-gradient(180deg,#ffffff1f,#ffffff0f);-webkit-backdrop-filter:blur(6px) saturate(120%);backdrop-filter:blur(6px) saturate(120%);border-top:1px solid rgba(255,255,255,.25);color:#eaf6ff;font-size:12px;z-index:10;width:auto!important;height:auto!important;pointer-events:none}.angle-title{font-weight:700;margin-bottom:8px;color:#82e9de}.angle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.angle-item{display:flex;justify-content:space-between}.angle-label{color:#d0e7ff}.angle-value{color:#fff;font-weight:700}.visualizer-container:after{content:"拖动可小幅旋转视角";position:absolute;top:10px;right:10px;background:#0009;color:#fff;padding:5px 10px;border-radius:4px;font-size:.8rem;z-index:5;opacity:.8}@media (max-width: 768px){.visualizer-container:after{top:5px;right:5px;font-size:.7rem;padding:3px 6px}}.App{text-align:center;height:100vh;background:linear-gradient(135deg,#1e3c72,#2a5298);padding:20px;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column}.app-header{margin-bottom:20px;flex-shrink:0}.app-title{font-size:2.5rem;font-weight:700;margin:0;background:linear-gradient(135deg,#fff,#e3f2fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 4px rgba(0,0,0,.1)}.app-subtitle{font-size:1.1rem;color:#ffffffe6;margin:8px 0 0;font-weight:400}.app-content{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1400px;margin:0 auto;flex:1;min-height:0;overflow:hidden}.app-footer{margin-top:20px;color:#ffffffb3;font-size:.9rem;flex-shrink:0}.app-loading-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:radial-gradient(1200px 600px at 10% -20%,rgba(79,195,247,.25),transparent 55%),radial-gradient(1000px 700px at 110% 120%,rgba(129,199,132,.2),transparent 55%),#060c18a8;-webkit-backdrop-filter:blur(8px) saturate(120%);backdrop-filter:blur(8px) saturate(120%);z-index:999}.app-loading-card{position:relative;width:320px;padding:28px 24px 24px;border-radius:20px;background:linear-gradient(180deg,#ffffff29,#ffffff0f);border:1px solid rgba(255,255,255,.22);box-shadow:0 20px 40px #00000059,inset 0 1px #ffffff40}.app-loading-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:20px;padding:1px;background:linear-gradient(135deg,#4fc3f7cc,#7e57c2cc);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.35}.app-loading-ring{--size: 76px;width:var(--size);height:var(--size);border-radius:50%;background:conic-gradient(from 0deg,#4fc3f7,#7e57c2,#26a69a,#4fc3f7);-webkit-mask:radial-gradient(circle calc(var(--size)/2 - 6px),transparent 98%,#000 100%);mask:radial-gradient(circle calc(var(--size)/2 - 6px),transparent 98%,#000 100%);animation:app-rotate 1.2s linear infinite;margin:6px auto 14px;filter:drop-shadow(0 0 14px rgba(79,195,247,.45))}.app-loading-title{color:#e3f2fd;font-weight:700;letter-spacing:.2px;margin-top:2px}.app-loading-subtitle{color:#e3f2fdd9;font-size:.95rem;margin-top:6px}@keyframes app-rotate{to{transform:rotate(360deg)}}@media (max-width: 1024px){.App{padding:16px}.app-content{grid-template-columns:1fr;gap:16px}.app-title{font-size:2rem}.app-subtitle{font-size:1rem}}@media (max-width: 768px){.App{padding:12px}.app-header{margin-bottom:16px}.app-title{font-size:1.8rem}.app-subtitle{font-size:.9rem}.app-content{gap:12px}.app-footer{margin-top:16px;font-size:.8rem}}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#1e3c72,#2a5298)}#root{height:100vh;width:100vw;overflow:hidden}::-webkit-scrollbar{width:0px;height:0px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:transparent}::-webkit-scrollbar-thumb:hover{background:transparent}*{scrollbar-width:none;scrollbar-color:transparent transparent}