*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:linear-gradient(135deg,#0f0f1a,#1a1a2e 50%,#16213e);min-height:100vh;color:#fff;overflow-x:hidden}.bg-gradient{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;overflow:hidden}.bg-gradient:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 20% 80%,rgba(0,217,255,.08) 0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(0,255,136,.08) 0,transparent 50%),radial-gradient(circle at 40% 40%,rgba(120,0,255,.05) 0,transparent 40%);animation:gradientMove 20s ease-in-out infinite}@keyframes gradientMove{0%,to{transform:translate(0) rotate(0deg)}33%{transform:translate(2%,2%) rotate(1deg)}66%{transform:translate(-1%,1%) rotate(-1deg)}}.orb{position:fixed;border-radius:50%;filter:blur(80px);opacity:.4;z-index:-1;animation:float 15s ease-in-out infinite}.orb-1{width:400px;height:400px;background:linear-gradient(135deg,#00d9ff,#0099ff);top:-100px;right:-100px;animation-delay:0s}.orb-2{width:300px;height:300px;background:linear-gradient(135deg,#00ff88,#00cc6a);bottom:-50px;left:-50px;animation-delay:-5s}.orb-3{width:200px;height:200px;background:linear-gradient(135deg,#a855f7,#7c3aed);top:50%;left:30%;animation-delay:-10s}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.05)}66%{transform:translate(-20px,20px) scale(.95)}}.container{max-width:1400px;margin:0 auto;padding:20px;position:relative}header{text-align:center;padding:40px 0 30px;position:relative}.logo-container{display:inline-flex;align-items:center;gap:12px;margin-bottom:12px}.logo-icon{width:48px;height:48px;background:linear-gradient(135deg,#00d9ff,#00ff88);border-radius:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 32px rgba(0,217,255,.3);animation:logoGlow 3s ease-in-out infinite}@keyframes logoGlow{0%,to{box-shadow:0 8px 32px rgba(0,217,255,.3)}50%{box-shadow:0 8px 48px rgba(0,255,136,.4)}}.logo-icon svg{width:28px;height:28px;fill:#1a1a2e}header h1{font-size:2.8rem;font-weight:800;background:linear-gradient(135deg,#fff,#00d9ff 50%,#00ff88);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 3s ease-in-out infinite;letter-spacing:-.5px}@keyframes shimmer{0%,to{background-position:0}50%{background-position:100%}}header p{color:#8892b0;font-size:1.1rem;margin-top:8px}.main-content{display:grid;grid-template-columns:1fr 420px;grid-gap:30px;gap:30px;margin-top:20px}@media (max-width:1000px){.main-content{grid-template-columns:1fr}}.glass-panel{background:rgba(255,255,255,.03);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:24px;border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 24px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.05);position:relative;overflow:hidden}.glass-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}.video-section{padding:24px}.video-container{position:relative;width:100%;aspect-ratio:16/9;background:linear-gradient(135deg,#0a0a12,#12121f);border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 2px 20px rgba(0,0,0,.3)}.video-container:after,.video-container:before{content:"";position:absolute;width:40px;height:40px;border:2px solid rgba(0,217,255,.3);z-index:2;pointer-events:none}.video-container:before{top:12px;left:12px;border-right:none;border-bottom:none;border-radius:8px 0 0 0}.video-container:after{bottom:12px;right:12px;border-left:none;border-top:none;border-radius:0 0 8px 0}#video-preview{object-fit:cover}#pose-canvas,#video-preview{width:100%;height:100%;transform:scaleX(-1)}#pose-canvas{pointer-events:none;z-index:1}#pose-canvas,.video-overlay{position:absolute;top:0;left:0}.video-overlay{right:0;bottom:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8);flex-direction:column;gap:20px}.video-overlay.hidden{display:none}.video-overlay-icon{width:80px;height:80px;background:linear-gradient(135deg,rgba(0,217,255,.2),rgba(0,255,136,.2));border-radius:50%;display:flex;align-items:center;justify-content:center;animation:pulse-ring 2s ease-out infinite}@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(0,217,255,.4)}70%{box-shadow:0 0 0 20px rgba(0,217,255,0)}to{box-shadow:0 0 0 0 rgba(0,217,255,0)}}.video-overlay svg{width:36px;height:36px;fill:#00d9ff}.video-overlay p{color:#8892b0;font-size:1rem}.recording-indicator{position:absolute;top:16px;right:16px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 14px;border-radius:20px;font-size:.8rem;font-weight:600;opacity:0;transform:translateY(-10px);transition:all .3s ease;z-index:3}.recording-indicator.active{opacity:1;transform:translateY(0)}.recording-dot{width:8px;height:8px;background:#ff4757;border-radius:50%;animation:blink 1s infinite}@keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:.3}}.controls{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap}.btn{padding:14px 28px;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:10px;min-width:160px;position:relative;overflow:hidden}.btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.btn:hover:before{left:100%}.btn-primary{background:linear-gradient(135deg,#00d9ff,#00ff88);color:#0a0a12;box-shadow:0 4px 20px rgba(0,217,255,.3)}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,217,255,.4)}.btn-primary:active{transform:translateY(-1px)}.btn-danger{background:linear-gradient(135deg,#ff4757,#ff6b81);color:#fff;box-shadow:0 4px 20px rgba(255,71,87,.3)}.btn-danger:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(255,71,87,.4)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important;box-shadow:none!important}.btn:disabled:before{display:none}.sport-selector{margin-top:24px}.sport-selector h3{font-size:.9rem;color:#8892b0;margin-bottom:14px;text-transform:uppercase;letter-spacing:1px;font-weight:600}.sport-options{display:flex;gap:10px;flex-wrap:wrap}.sport-option{padding:10px 18px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;cursor:pointer;transition:all .3s ease;font-size:.9rem;display:flex;align-items:center;gap:8px}.sport-option svg{width:18px;height:18px;fill:#8892b0;transition:fill .3s ease}.sport-option:hover{background:rgba(0,217,255,.1);border-color:rgba(0,217,255,.3)}.sport-option:hover svg{fill:#00d9ff}.sport-option.active{background:linear-gradient(135deg,rgba(0,217,255,.2),rgba(0,255,136,.2));border-color:transparent;color:#fff;font-weight:600;box-shadow:0 4px 16px rgba(0,217,255,.2)}.sport-option.active svg{fill:#00ff88}.camera-select{margin-top:16px}.camera-select select{width:100%;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#fff;font-size:.9rem;cursor:pointer;transition:all .3s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%238892b0' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}.camera-select select:focus{outline:none;border-color:#00d9ff;box-shadow:0 0 0 3px rgba(0,217,255,.1)}.tips-section{margin-top:24px;padding:18px;background:linear-gradient(135deg,rgba(0,217,255,.05),rgba(0,255,136,.03));border-radius:16px;border:1px solid rgba(0,217,255,.15)}.tips-section h3{font-size:.9rem;color:#00d9ff;margin-bottom:12px;display:flex;align-items:center;gap:8px}.tips-section h3 svg{width:18px;height:18px;fill:#00d9ff}.tips-section ul{list-style:none;font-size:.85rem;color:#8892b0}.tips-section ul li{padding:6px 0 6px 22px;position:relative}.tips-section ul li:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:6px;height:6px;background:linear-gradient(135deg,#00d9ff,#00ff88);border-radius:50%}.analysis-panel{padding:24px;display:flex;flex-direction:column;max-height:750px}.panel-header{justify-content:space-between;margin-bottom:20px}.panel-header,.panel-header h2{display:flex;align-items:center}.panel-header h2{font-size:1.2rem;gap:12px;font-weight:700}.status-badge{display:flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(136,146,176,.1);border-radius:20px;font-size:.8rem;color:#8892b0;font-weight:500;transition:all .3s ease}.status-badge.active{background:rgba(0,255,136,.15);color:#00ff88}.status-indicator{width:8px;height:8px;border-radius:50%;background:#8892b0;transition:all .3s ease}.status-indicator.active{background:#00ff88;box-shadow:0 0 12px rgba(0,255,136,.6);animation:pulse-glow 2s infinite}@keyframes pulse-glow{0%,to{box-shadow:0 0 12px rgba(0,255,136,.6)}50%{box-shadow:0 0 20px rgba(0,255,136,.8)}}.analysis-results{flex:1 1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:8px;scrollbar-width:thin;scrollbar-color:rgba(0,217,255,.3) transparent}.analysis-results::-webkit-scrollbar{width:6px}.analysis-results::-webkit-scrollbar-track{background:transparent}.analysis-results::-webkit-scrollbar-thumb{background:rgba(0,217,255,.3);border-radius:3px}.result-card{background:rgba(255,255,255,.03);border-radius:14px;padding:16px;border-left:3px solid #00d9ff;animation:cardSlideIn .4s cubic-bezier(.4,0,.2,1);position:relative;transition:all .3s ease}.result-card:hover{background:rgba(255,255,255,.05);transform:translateX(4px)}@keyframes cardSlideIn{0%{opacity:0;transform:translateX(-20px) scale(.98)}to{opacity:1;transform:translateX(0) scale(1)}}.result-card.positive{border-left-color:#00ff88;background:linear-gradient(90deg,rgba(0,255,136,.05),transparent)}.result-card.corrective{border-left-color:#ffa502;background:linear-gradient(90deg,rgba(255,165,2,.05),transparent)}.result-card.system{border-left-color:#00d9ff;background:linear-gradient(90deg,rgba(0,217,255,.05),transparent)}.card-header{justify-content:space-between;margin-bottom:10px}.card-header,.card-type{display:flex;align-items:center}.card-type{gap:6px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.card-type.positive{color:#00ff88}.card-type.corrective{color:#ffa502}.card-type.system{color:#00d9ff}.card-type svg{width:14px;height:14px}.result-card .timestamp{font-size:.7rem;color:#5a6178}.result-card .feedback{font-size:.95rem;line-height:1.6;color:#e4e6eb}.result-card .metrics{display:flex;gap:16px;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.05);font-size:.75rem;color:#5a6178}.result-card .metrics span{display:flex;align-items:center;gap:4px}.result-card .metrics svg{width:12px;height:12px;fill:currentColor}.empty-state{flex:1 1;flex-direction:column;color:#5a6178;text-align:center;padding:50px 30px}.empty-state,.empty-state-icon{display:flex;align-items:center;justify-content:center}.empty-state-icon{width:80px;height:80px;background:linear-gradient(135deg,rgba(0,217,255,.1),rgba(0,255,136,.1));border-radius:50%;margin-bottom:20px}.empty-state svg{width:36px;height:36px;fill:#8892b0}.empty-state h3{font-size:1.1rem;color:#8892b0;margin-bottom:8px}.empty-state p{font-size:.9rem;line-height:1.5}.error-message{background:linear-gradient(90deg,rgba(255,71,87,.1),transparent);border:1px solid rgba(255,71,87,.3);border-radius:12px;padding:14px 16px;margin-top:12px;color:#ff6b7a;font-size:.9rem;display:flex;align-items:flex-start;gap:10px}.error-message svg{width:18px;height:18px;fill:#ff4757;flex-shrink:0;margin-top:2px}.stats-bar{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:16px;gap:16px;margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06)}.stat{text-align:center;padding:12px;background:rgba(255,255,255,.02);border-radius:12px;transition:all .3s ease}.stat:hover{background:rgba(255,255,255,.04)}.stat-value{font-size:1.6rem;font-weight:700;background:linear-gradient(135deg,#00d9ff,#00ff88);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{font-size:.7rem;color:#5a6178;margin-top:4px;text-transform:uppercase;letter-spacing:.5px}.toast-container{position:fixed;top:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:12px;pointer-events:none}.toast{background:rgba(20,20,35,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:14px;padding:14px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 32px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08);animation:toastIn .4s cubic-bezier(.4,0,.2,1);pointer-events:auto;max-width:360px}@keyframes toastIn{0%{opacity:0;transform:translateX(20px) scale(.95)}to{opacity:1;transform:translateX(0) scale(1)}}.toast.out{animation:toastOut .3s cubic-bezier(.4,0,.2,1) forwards}@keyframes toastOut{to{opacity:0;transform:translateX(20px) scale(.95)}}.toast-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.toast-icon svg{width:20px;height:20px}.toast.success .toast-icon{background:rgba(0,255,136,.15)}.toast.success .toast-icon svg{fill:#00ff88}.toast.info .toast-icon{background:rgba(0,217,255,.15)}.toast.info .toast-icon svg{fill:#00d9ff}.toast.warning .toast-icon{background:rgba(255,165,2,.15)}.toast.warning .toast-icon svg{fill:#ffa502}.toast.error .toast-icon{background:rgba(255,71,87,.15)}.toast.error .toast-icon svg{fill:#ff4757}.toast-content h4{font-size:.9rem;font-weight:600;margin-bottom:2px}.toast-content p{font-size:.8rem;color:#8892b0}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.spin{animation:spin 1s linear infinite}.mode-selector{margin-top:24px}.mode-selector h3{font-size:.9rem;color:#8892b0;margin-bottom:14px;text-transform:uppercase;letter-spacing:1px;font-weight:600}.mode-toggle{display:flex;gap:10px;background:rgba(255,255,255,.03);padding:6px;border-radius:14px;border:1px solid rgba(255,255,255,.08)}.mode-option{flex:1 1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;background:transparent;border:none;border-radius:10px;color:#8892b0;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .3s ease}.mode-option svg{width:18px;height:18px;fill:currentColor}.mode-option:hover:not(:disabled){color:#fff;background:rgba(255,255,255,.05)}.mode-option.active{background:linear-gradient(135deg,rgba(0,217,255,.2),rgba(0,255,136,.2));color:#fff;font-weight:600}.mode-option:disabled{opacity:.5;cursor:not-allowed}.btn-record{background:linear-gradient(135deg,#ff4757,#ff6b81);color:#fff;box-shadow:0 4px 20px rgba(255,71,87,.3)}.btn-record:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(255,71,87,.4)}.btn-secondary{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)}.btn-secondary:hover{background:rgba(255,255,255,.15);transform:translateY(-2px)}.recording-timer-display{display:flex;align-items:center;gap:10px;padding:12px 20px;background:rgba(255,71,87,.1);border:1px solid rgba(255,71,87,.3);border-radius:12px}.recording-dot-pulse{width:12px;height:12px;background:#ff4757;border-radius:50%;animation:pulse-recording 1s infinite}@keyframes pulse-recording{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.9)}}.recording-timer-display .timer{font-size:1.1rem;font-weight:600;font-family:monospace;color:#fff}.recording-timer-display .timer.warning{color:#ffa502;animation:blink-warning .5s infinite}@keyframes blink-warning{0%,to{opacity:1}50%{opacity:.6}}.processing-indicator{display:flex;align-items:center;gap:12px;padding:14px 24px;background:rgba(0,217,255,.1);border:1px solid rgba(0,217,255,.3);border-radius:12px;color:#00d9ff;font-weight:500}.processing-indicator svg{fill:#00d9ff}#preview-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);border-radius:12px}#preview-video::-webkit-media-controls-panel{background:linear-gradient(0deg,rgba(0,0,0,.7),transparent)}.timestamp-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:rgba(0,217,255,.15);border:1px solid rgba(0,217,255,.3);border-radius:20px;font-size:.75rem;font-weight:600;color:#00d9ff;cursor:pointer;transition:all .2s ease}.timestamp-badge:hover{background:rgba(0,217,255,.25);border-color:#00d9ff;transform:scale(1.05)}.timestamp-badge svg{fill:currentColor}.timestamp-badge.clickable{cursor:pointer}.video-processing-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:10}.video-processing-overlay svg{width:48px;height:48px;fill:#00d9ff}.video-processing-overlay span{color:#8892b0;font-size:1rem}