:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}html{height:100%}body{margin:0;min-width:320px;height:100%}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.body-part-selector{max-width:1200px;margin:0 auto;padding:0 20px 40px}.body-part-selector h2{text-align:center;color:#fff;margin-bottom:10px;font-size:2em}.body-part-selector .subtitle{text-align:center;color:#fffc;margin-bottom:40px;font-size:1.1em}.body-parts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-bottom:30px}.body-part-wrapper{position:relative}.body-part-btn{width:100%;padding:16px 12px;border:2px solid rgba(255,255,255,.3);border-radius:12px;background:#ffffff1a;color:#fff;font-size:.95em;cursor:pointer;transition:all .2s ease;text-align:center}.body-part-btn:hover{background:#fff3;border-color:#ffffff80;transform:translateY(-2px)}.body-part-btn.selected{font-weight:600;transform:scale(1.05)}.body-part-btn.selected.pain{background:#ef44444d;border-color:var(--color-error);color:#fff}.body-part-btn.selected.improve{background:#22c55e4d;border-color:var(--color-success);color:#fff}.selection-popup{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%);display:flex;gap:8px;background:#1e1e28f2;padding:8px;border-radius:12px;box-shadow:0 8px 24px #0006;z-index:100;white-space:nowrap}.selection-popup:before{content:"";position:absolute;top:-6px;left:50%;transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid rgba(30,30,40,.95)}.popup-btn{padding:10px 16px;border:2px solid transparent;border-radius:8px;font-size:.9em;font-weight:500;cursor:pointer;transition:all .15s ease}.popup-btn.pain{background:var(--color-error-light);color:var(--color-error);border-color:var(--color-error-border)}.popup-btn.pain:hover,.popup-btn.pain.active{background:#ef444466;border-color:var(--color-error)}.popup-btn.improve{background:var(--color-success-light);color:var(--color-success);border-color:var(--color-success-border)}.popup-btn.improve:hover,.popup-btn.improve.active{background:#22c55e66;border-color:var(--color-success)}.selection-summary{background:#ffffff1a;border-radius:12px;padding:20px;margin-bottom:30px;min-height:60px}.summary-item{color:#fff;margin-bottom:8px;font-size:1.05em}.summary-item:last-child{margin-bottom:0}.summary-item strong{color:#ffffffe6;margin-right:8px}.continue-btn{display:block;width:100%;max-width:400px;margin:0 auto;padding:18px 32px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);color:#fff;border:none;border-radius:12px;font-size:1.2em;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px var(--color-primary-shadow)}.continue-btn:disabled{opacity:.5;cursor:not-allowed}.body-part-selector.loading,.body-part-selector.error{text-align:center;color:#fff;padding:60px 20px;font-size:1.2em}.body-part-selector.error{color:#ef4444}@media(max-width:900px){.body-parts-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}@media(max-width:600px){.body-part-selector{padding:0 16px 20px}.body-part-selector .subtitle{margin-bottom:16px;font-size:1em}.body-parts-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:20px}.body-part-btn{padding:14px 10px;font-size:.9em}.popup-btn{padding:8px 12px;font-size:.85em}.selection-summary{padding:16px;margin-bottom:20px}.continue-btn{padding:14px 24px;font-size:1.1em}}.session-config{max-width:700px;margin:0 auto;padding:40px 20px}.back-btn{background:#ffffff1a;color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:1em;margin-bottom:30px;transition:background .2s ease}.back-btn:hover{background:#fff3}.config-card{background:#ffffff1a;border-radius:16px;padding:32px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.duration-selector{margin-bottom:32px}.duration-selector label{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.duration-selector h3{color:#fff;margin:0;font-size:1.3em}.duration-value{color:#fff;font-size:1.8em;font-weight:700}.duration-slider{width:100%;height:8px;border-radius:4px;background:#fff3;outline:none;-webkit-appearance:none;margin-bottom:8px}.duration-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--color-primary);cursor:pointer;box-shadow:0 2px 8px #0000004d}.duration-slider::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:none;box-shadow:0 2px 8px #0000004d}.duration-labels{display:flex;justify-content:space-between;color:#fff9;font-size:.9em}.session-preview{background:#0003;border-radius:12px;padding:24px;margin-bottom:24px}.session-preview h3{color:#fff;margin-bottom:20px;font-size:1.2em}.preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:20px}.stat{text-align:center}.stat-value{color:#fff;font-size:2em;font-weight:700;margin-bottom:4px}.stat-label{color:#ffffffb3;font-size:.9em}.preview-tags{display:flex;flex-wrap:wrap;gap:10px}.tag{padding:8px 16px;border-radius:20px;font-size:.9em;font-weight:500}.pain-tag{background:var(--color-error-light);color:#fca5a5;border:1px solid var(--color-error-border)}.improvement-tag{background:var(--color-success-light);color:#86efac;border:1px solid var(--color-success-border)}.error-message{background:var(--color-error-light);border:1px solid var(--color-error);color:#fca5a5;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-sm);margin-bottom:var(--spacing-xl);text-align:center}.start-session-btn{width:100%;padding:18px 32px;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);color:#fff;border:none;border-radius:12px;font-size:1.3em;font-weight:600;cursor:pointer;transition:all .2s ease}.start-session-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px var(--color-primary-shadow)}.start-session-btn:disabled{opacity:.7;cursor:not-allowed}@media(max-width:600px){.session-config{padding:8px 16px}.back-btn{margin-bottom:12px;padding:8px 16px;font-size:.9em}.duration-selector{margin-bottom:20px}.config-card{padding:24px 20px}.duration-selector h3{font-size:1.1em}.duration-value{font-size:1.4em}.session-preview{padding:16px;margin-bottom:16px}.session-preview h3{margin-bottom:12px;font-size:1em}.preview-stats{grid-template-columns:repeat(3,1fr);gap:8px}.stat-value{font-size:1.3em}.stat-label{font-size:.75em}.preview-tags{gap:6px}.tag{padding:6px 10px;font-size:.8em}.start-session-btn{padding:14px 24px;font-size:1.1em}}.camera-capture{width:100%;max-width:1280px;margin:0 auto}.video-container{position:relative;width:100%;background:#000;border-radius:8px;overflow:hidden}.video-container video{width:100%;height:auto;display:block;transform:scaleX(-1)}.video-container video.hidden{display:none}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#dc2626e6;color:#fff;padding:20px;border-radius:8px;text-align:center;z-index:10}.error-message p{margin:0 0 10px}.error-message button{background:#fff;color:#dc2626;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;font-weight:600}.error-message button:hover{background:#f3f4f6}.pose-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:scaleX(-1)}.pose-feedback{background:#fff;border-radius:8px;padding:24px;box-shadow:0 4px 6px #0000001a;display:flex;flex-direction:column;gap:12px}.pose-feedback h3{margin:0;font-size:18px;font-weight:600;color:#111827}.accuracy-score{margin-bottom:16px}.score-badge{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-radius:8px;font-weight:600}.score-number{font-size:24px;font-weight:700}.score-label{font-size:14px;text-transform:uppercase;letter-spacing:.5px}.score-badge.excellent{background-color:#dcfce7;color:#166534;border:2px solid #16a34a}.score-badge.good{background-color:#d1fae5;color:#15803d;border:2px solid #22c55e}.score-badge.fair{background-color:#fed7aa;color:#9a3412;border:2px solid #f97316}.score-badge.needs-work{background-color:#fee2e2;color:#991b1b;border:2px solid #ef4444}.score-badge.poor{background-color:#f3f4f6;color:#6b7280;border:2px solid #9ca3af}.score-badge.orientation-warning{background-color:#fef3c7;color:#92400e;border:2px solid #f59e0b}.orientation-indicator{display:inline-block;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:500;margin-bottom:12px}.orientation-indicator.valid{background-color:#dcfce7;color:#166534}.orientation-indicator.invalid{background-color:#fef3c7;color:#92400e}.feedback-list{flex:1;overflow-y:auto;min-height:0}.feedback-list ul{list-style:none;padding:0;margin:0}.no-feedback{padding:12px;background-color:#fef3c7;border-left:3px solid #f59e0b;border-radius:4px;font-size:14px;color:#92400e;margin:0}.feedback-list li{padding:8px 12px;background-color:#fef3c7;border-left:3px solid #f59e0b;margin-bottom:8px;border-radius:4px;font-size:14px;color:#92400e}.feedback-list li:last-child{margin-bottom:0}.mobile-status-bar{display:none}.desktop-feedback{display:block}@media(max-width:768px){.mobile-status-bar{display:flex;align-items:center;justify-content:center;padding:16px 24px;border-radius:12px;font-size:1.4em;font-weight:700;letter-spacing:1px;text-transform:uppercase}.mobile-status-bar.excellent,.mobile-status-bar.good{background-color:#16a34a;color:#fff}.mobile-status-bar.fair{background-color:#f97316;color:#fff}.mobile-status-bar.needs-work{background-color:#ef4444;color:#fff}.mobile-status-bar.poor{background-color:#6b7280;color:#fff}.mobile-status-bar.orientation-warning{background-color:#f59e0b;color:#fff}.desktop-feedback{display:none}.pose-feedback{padding:0;background:transparent;box-shadow:none}}.pose-transition{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#667eeaf2,#764ba2f2);display:flex;align-items:center;justify-content:center;z-index:1000}.transition-content{text-align:center;max-width:500px;padding:40px}.countdown-circle{position:relative;width:120px;height:120px;margin:0 auto 30px}.countdown-svg{width:100%;height:100%;transform:scaleX(-1)}.countdown-progress{stroke:var(--color-primary);transition:stroke-dashoffset 1s linear}.countdown-number{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:3em;font-weight:700}.transition-title{color:#fff;font-size:2.5em;margin-bottom:40px;font-weight:700}.next-pose-info{background:#ffffff26;border-radius:16px;padding:30px;margin-bottom:40px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.next-label{color:#fffc;font-size:1em;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}.next-pose-name{color:#fff;font-size:2em;font-weight:700;margin-bottom:12px}.next-duration{color:#ffffffe6;font-size:1.3em}.transition-reference-image{width:100%;max-width:300px;margin:20px auto 0;display:block;border-radius:12px}.breathing-cue{display:flex;flex-direction:column;align-items:center;gap:16px;color:#ffffffe6;font-size:1.1em}.breathing-circle{width:60px;height:60px;border-radius:50%;background:#ffffff4d;animation:breathe 3s ease-in-out infinite}@keyframes breathe{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.3);opacity:.8}}@media(max-width:600px){.transition-content{padding:16px;display:flex;flex-direction:column;height:100%;justify-content:space-between}.countdown-circle{width:80px;height:80px;margin-bottom:16px}.countdown-number{font-size:2em}.transition-title{font-size:1.6em;margin-bottom:16px}.next-pose-info{flex:1;display:flex;flex-direction:column;padding:16px;margin-bottom:16px}.next-pose-name{font-size:1.4em}.next-duration{font-size:1em;margin-bottom:12px}.transition-reference-image{flex:1;max-width:100%;width:100%;object-fit:contain;min-height:0}.breathing-cue{flex-shrink:0}.breathing-circle{width:40px;height:40px}.breathing-cue p{margin:0;font-size:.95em}}.orientation-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:16px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.orientation-badge.valid{background-color:#fff3;color:#fff}.orientation-badge.invalid{background-color:#f59e0b;color:#fff;animation:pulse-warning 1.5s ease-in-out infinite}@keyframes pulse-warning{0%,to{opacity:1}50%{opacity:.7}}.orientation-badge-icon{font-size:14px}.orientation-badge-label{white-space:nowrap}.session-controls{display:flex;gap:12px;justify-content:flex-start;align-items:center}.connection-status{display:flex;align-items:center;gap:8px;margin-left:auto;font-size:.9em;color:#fffc}.status-indicator{width:12px;height:12px;border-radius:50%}.status-indicator.connected{background-color:#10b981;box-shadow:0 0 8px #10b98180}.status-indicator.disconnected{background-color:var(--color-error)}.info-card{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:16px 20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:space-between;align-items:center}.pose-name-card{flex-direction:column;align-items:stretch;gap:12px}.segmented-progress-bar{position:relative;height:8px;background:#fff3;border-radius:4px;overflow:visible}.segmented-progress-bar .progress-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-secondary) 100%);border-radius:4px;transition:width 1s linear}.segment-divider{position:absolute;top:-2px;height:12px;width:2px;background:#fff9;border-radius:1px}.pose-tags{display:flex;flex-direction:column;gap:8px}.info-main{color:#fff;font-size:1.5em;font-weight:700}.info-sub{color:#fffc;font-size:1em;font-weight:500}.feedback-content{display:flex;flex-direction:column;gap:12px}.control-btn{padding:14px 28px;border:none;border-radius:10px;font-size:1.1em;font-weight:600;cursor:pointer;transition:all .2s ease}.pause-btn{background:#fff3;color:#fff}.pause-btn:hover{background:#ffffff4d}.skip-btn{background:#ffffff1a;color:#fffc}.skip-btn:hover:not(:disabled){background:#fff3}.skip-btn:disabled{opacity:.5;cursor:not-allowed}.exit-btn{background:var(--color-error-light);color:#fca5a5;border:1px solid var(--color-error-border)}.exit-btn:hover{background:#ef44444d;border-color:var(--color-error)}.voice-btn{background:#ffffff1a;border:1px solid rgba(255,255,255,.2)}.voice-btn.voice-on{background:#3b82f633;color:#93c5fd;border:1px solid rgba(59,130,246,.4)}.voice-btn.voice-on:hover{background:#3b82f64d;border-color:#3b82f6}.voice-btn.voice-off{background:#64748b33;color:#fff9;border:1px solid rgba(100,116,139,.4)}.voice-btn.voice-off:hover{background:#64748b4d;color:#fffc}.pose-tag{padding:12px 16px;border-radius:10px;text-align:center;font-weight:600;font-size:.95em}.pose-tag.pain-tag{background:var(--color-error-light);color:#fca5a5;border:1px solid var(--color-error-border)}.pose-tag.improvement-tag{background:var(--color-success-light);color:#86efac;border:1px solid var(--color-success-border)}.active-session-desktop{position:fixed;inset:0;display:flex;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 50%,var(--color-primary) 100%);padding:var(--spacing-lg);gap:var(--spacing-lg);box-sizing:border-box}.desktop-sidebar{width:300px;flex-shrink:0;display:flex;flex-direction:column;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-xl);padding:var(--spacing-lg);overflow:hidden}.desktop-pose-reference{width:100%;height:100%;object-fit:contain;border-radius:var(--radius-md)}.desktop-camera-container{flex:1;position:relative;display:flex;flex-direction:column;border-radius:var(--radius-xl);overflow:hidden;background:#000}.desktop-video-wrapper{position:absolute;inset:0;z-index:1}.desktop-video-wrapper .camera-capture,.desktop-video-wrapper .video-container{width:100%;height:100%;max-width:none;background:transparent;border-radius:0}.desktop-video-wrapper .video-container video{width:100%;height:100%;object-fit:cover}.desktop-header-overlay{position:absolute;top:0;left:0;right:0;z-index:10;background:linear-gradient(to bottom,rgba(0,0,0,.6) 0%,transparent 100%);padding:var(--spacing-lg) var(--spacing-xl);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-xl)}.desktop-pose-info{display:flex;flex-direction:column;gap:var(--spacing-xs)}.desktop-pose-name-row{display:flex;align-items:center;gap:var(--spacing-md)}.desktop-pose-name{font-size:1.5em;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}.desktop-pose-progress{font-size:1em;color:#fffc;text-shadow:0 1px 2px rgba(0,0,0,.3)}.desktop-header-overlay .pose-feedback{background:transparent;padding:0}.desktop-header-overlay .mobile-status-bar{display:none}.desktop-header-overlay .desktop-feedback{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-lg);background:#0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md)}.desktop-header-overlay .desktop-feedback h3{margin:0;font-size:.9em;color:#ffffffb3;white-space:nowrap}.desktop-header-overlay .accuracy-score{margin:0}.desktop-header-overlay .score-badge{padding:var(--spacing-sm) var(--spacing-md);gap:var(--spacing-sm)}.desktop-header-overlay .feedback-list{max-width:300px}.desktop-header-overlay .feedback-list ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.desktop-header-overlay .feedback-list li{font-size:.85em;color:#ffffffe6;background:#ffffff1a;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);white-space:nowrap}.desktop-header-overlay .no-feedback{margin:0;font-size:.85em;color:#86efac}.desktop-controls-overlay{position:absolute;bottom:0;left:0;right:0;z-index:10;padding:var(--spacing-xl);display:flex;justify-content:center;gap:var(--spacing-md);background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 100%)}.desktop-controls-overlay .control-btn{padding:var(--spacing-md) var(--spacing-xl);font-size:1em}.desktop-controls-overlay .connection-status{position:absolute;right:var(--spacing-xl);top:50%;transform:translateY(-50%)}.desktop-connection-status{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;display:flex;align-items:center;gap:var(--spacing-sm);background:#000c;padding:var(--spacing-md) var(--spacing-2xl);border-radius:var(--radius-full);color:#fca5a5;font-weight:500}@media(max-width:1200px){.desktop-sidebar{width:250px}.desktop-pose-name{font-size:1.25em}.desktop-header-overlay .feedback-list{max-width:250px}}@media(max-width:1024px){.desktop-sidebar{width:220px;padding:var(--spacing-md)}.desktop-header-overlay{padding:var(--spacing-md) var(--spacing-lg)}.desktop-controls-overlay{padding:var(--spacing-lg)}.desktop-controls-overlay .control-btn{padding:var(--spacing-sm) var(--spacing-lg)}}.active-session-mobile{position:fixed;inset:0;height:100vh;height:100dvh;padding:12px;padding-top:calc(env(safe-area-inset-top,12px) + 4px);padding-bottom:calc(env(safe-area-inset-bottom,12px) + 4px);box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;z-index:100;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 50%,var(--color-primary) 100%)}.mobile-camera-container{position:relative;flex:1;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#000}.mobile-video-wrapper{position:absolute;inset:0;z-index:1}.mobile-video-wrapper video{width:100%;height:100%;object-fit:contain}.mobile-video-wrapper .camera-capture,.mobile-video-wrapper .video-container{width:100%;height:100%;max-width:none;background:transparent;border-radius:0}.mobile-video-wrapper .video-container video{width:100%;height:100%;object-fit:contain}.mobile-pose-header{position:absolute;top:0;left:0;right:0;z-index:10;background:linear-gradient(to bottom,rgba(0,0,0,.6) 0%,rgba(0,0,0,.2) 70%,transparent 100%);padding:12px 16px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.mobile-logo{position:absolute;bottom:70px;right:16px;width:40px;height:40px;opacity:.7;z-index:10}.mobile-pose-info{text-align:left}.mobile-pose-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mobile-pose-name{font-size:1.1em;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}.mobile-pose-progress{font-size:.85em;color:#ffffffe6;margin-top:2px;text-shadow:0 1px 2px rgba(0,0,0,.5)}.mobile-feedback{flex-shrink:0}.mobile-feedback .pose-feedback{background:transparent;padding:0;border:none}.mobile-feedback .mobile-status-bar{padding:8px 14px;font-size:.75em;border-radius:8px}.mobile-session-controls{position:absolute;bottom:0;left:0;right:0;z-index:10;background:transparent;padding:12px 16px;display:flex;gap:8px;justify-content:space-between}.mobile-session-controls .control-btn{padding:10px 14px;font-size:.9em;min-width:unset;flex:1;border-radius:10px}.mobile-connection-status{position:absolute;bottom:70px;left:50%;transform:translate(-50%);z-index:10;display:flex;align-items:center;justify-content:center;gap:6px;font-size:.85em;color:#fca5a5;background:#0009;padding:8px 16px;border-radius:20px}.mobile-connection-status .status-indicator{width:10px;height:10px}.mobile-pose-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:#000000e6;transform-origin:bottom right;pointer-events:none}.mobile-pose-overlay.hidden{animation:pose-collapse .3s ease-in forwards}.mobile-pose-overlay.visible{animation:pose-expand .3s ease-out forwards}@keyframes pose-expand{0%{transform:scale(0);opacity:0;border-radius:50%}to{transform:scale(1);opacity:1;border-radius:20px}}@keyframes pose-collapse{0%{transform:scale(1);opacity:1;border-radius:20px}to{transform:scale(0);opacity:0;border-radius:50%}}.mobile-pose-image{max-width:90%;max-height:80%;object-fit:contain;border-radius:12px}.session-complete{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}.complete-content{text-align:center;max-width:600px;background:#ffffff1a;border-radius:24px;padding:60px 40px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.complete-content h1{color:#fff;font-size:3em;margin-bottom:16px;font-weight:700}.complete-message{color:#ffffffe6;font-size:1.3em;margin-bottom:40px}.complete-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px}.stat-card{background:#0003;border-radius:16px;padding:24px}.stat-value{color:#fff;font-size:3em;font-weight:700;margin-bottom:8px}.stat-label{color:#fffc;font-size:1.1em}.new-session-btn{padding:18px 48px;background:#ffffffe6;color:var(--color-primary);border:none;border-radius:12px;font-size:1.3em;font-weight:600;cursor:pointer;transition:all .2s ease}.new-session-btn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 20px #0000004d}.pose-scores-section{margin-bottom:40px;text-align:left}.pose-scores-section h2{color:#fff;font-size:1.4em;margin-bottom:16px;text-align:center}.pose-scores-list{display:flex;flex-direction:column;gap:12px}.pose-score-item{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-radius:12px;background:#0003}.pose-score-name{font-weight:600;color:#fff}.pose-score-value{font-weight:500}.pose-score-item.score-excellent{border-left:4px solid #10b981}.pose-score-item.score-excellent .pose-score-value{color:#6ee7b7}.pose-score-item.score-good{border-left:4px solid #22c55e}.pose-score-item.score-good .pose-score-value{color:#86efac}.pose-score-item.score-fair{border-left:4px solid #f97316}.pose-score-item.score-fair .pose-score-value{color:#fdba74}.pose-score-item.score-needs-work{border-left:4px solid #ef4444}.pose-score-item.score-needs-work .pose-score-value{color:#fca5a5}.stat-value.score-excellent{color:#6ee7b7}.stat-value.score-good{color:#86efac}.stat-value.score-fair{color:#fdba74}.stat-value.score-needs-work{color:#fca5a5}@media(max-width:600px){.complete-content{padding:40px 24px}.complete-content h1{font-size:2em}.complete-stats{grid-template-columns:1fr}.stat-value{font-size:2.5em}.pose-score-item{flex-direction:column;align-items:flex-start;gap:8px}}.welcome{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}.welcome-content{text-align:center;max-width:700px;width:100%}.welcome-logo{height:180px;width:auto;margin-bottom:16px;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.welcome-title{color:#fff;font-size:3.5em;font-weight:700;margin:0 0 12px}.welcome-subtitle{color:#ffffffe6;font-size:1.6em;margin:0 0 40px}.welcome-features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px}.feature-card{background:#ffffff1a;border-radius:var(--radius-lg);padding:24px 16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform var(--transition-normal),background var(--transition-normal)}.feature-card:hover{transform:translateY(-4px);background:#ffffff26}.feature-icon{width:48px;height:48px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center}.feature-card h3{color:#fff;font-size:1.3em;font-weight:600;margin:0 0 10px}.feature-card p{color:#fffc;font-size:1.1em;margin:0;line-height:1.5}.welcome-demo{background:#0003;border-radius:var(--radius-lg);padding:32px;margin-bottom:40px;overflow:hidden}.demo-placeholder{position:relative;height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center}.demo-figure{position:relative;width:60px;height:120px;animation:pose-sway 4s ease-in-out infinite}@keyframes pose-sway{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}.demo-head{position:absolute;top:0;left:50%;transform:translate(-50%);width:20px;height:20px;background:#fffc;border-radius:50%}.demo-body{position:absolute;top:22px;left:50%;transform:translate(-50%);width:4px;height:40px;background:#fffc;border-radius:2px}.demo-arm{position:absolute;top:24px;width:30px;height:4px;background:#fffc;border-radius:2px}.demo-arm-left{right:50%;transform-origin:right center;animation:arm-wave-left 4s ease-in-out infinite}.demo-arm-right{left:50%;transform-origin:left center;animation:arm-wave-right 4s ease-in-out infinite}@keyframes arm-wave-left{0%,to{transform:rotate(-30deg)}50%{transform:rotate(-60deg)}}@keyframes arm-wave-right{0%,to{transform:rotate(30deg)}50%{transform:rotate(60deg)}}.demo-leg{position:absolute;top:62px;width:4px;height:40px;background:#fffc;border-radius:2px}.demo-leg-left{left:20px}.demo-leg-right{right:20px}.demo-skeleton{position:absolute;inset:-10px;border:2px dashed var(--color-secondary);border-radius:50%;opacity:.6;animation:skeleton-pulse 2s ease-in-out infinite}@keyframes skeleton-pulse{0%,to{opacity:.4;transform:scale(.95)}50%{opacity:.8;transform:scale(1.05)}}.demo-feedback{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:16px;animation:fade-in-up 1s ease-out infinite alternate}@keyframes fade-in-up{0%{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.demo-stars{color:#fbbf24;font-size:1.4em;letter-spacing:2px}.demo-tip{color:#ffffffe6;font-size:.95em;font-weight:500}.welcome-button{padding:22px 72px;background:#fffffff2;color:var(--color-primary);border:none;border-radius:var(--radius-md);font-size:1.5em;font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.welcome-button:hover{background:#fff;transform:translateY(-3px);box-shadow:0 10px 30px #0003}@media(max-width:768px){.welcome-logo{height:120px}.welcome-title{font-size:1.8em}.welcome-subtitle{font-size:1em;margin-bottom:32px}.welcome-features{grid-template-columns:1fr;gap:12px;margin-bottom:32px}.feature-card{padding:20px 16px;display:flex;align-items:center;gap:16px;text-align:left}.feature-icon{width:40px;height:40px;margin:0;flex-shrink:0}.feature-card h3{margin-bottom:4px}.welcome-demo{padding:24px;margin-bottom:32px}.demo-placeholder{height:150px}.welcome-button{width:100%;padding:16px 32px;font-size:1.1em}}.camera-setup{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}.camera-setup-content{text-align:center;max-width:700px;width:100%}.camera-setup-content h1{color:#fff;font-size:3em;font-weight:700;margin:0 0 12px}.camera-setup-subtitle{color:#ffffffe6;font-size:1.5em;margin:0 0 32px}.camera-preview-container{position:relative;width:100%;aspect-ratio:16 / 9;background:#0006;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:24px}.camera-requesting,.camera-error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#ffffffe6}.camera-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:#fffc;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-icon{display:flex;align-items:center;justify-content:center}.camera-error p{max-width:280px;margin:0}.retry-button{padding:12px 24px;background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-sm);font-size:1em;cursor:pointer;transition:all var(--transition-normal)}.retry-button:hover{background:#ffffff4d}.camera-preview-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);z-index:1}.positioning-guide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:2}.guide-silhouette{position:relative;width:120px;height:280px;opacity:.5}.guide-head{position:absolute;top:0;left:50%;transform:translate(-50%);width:50px;height:50px;border:3px dashed rgba(255,255,255,.7);border-radius:50%}.guide-body{position:absolute;top:55px;left:50%;transform:translate(-50%);width:60px;height:100px;border:3px dashed rgba(255,255,255,.7);border-radius:20px}.guide-arm{position:absolute;top:60px;width:50px;height:80px;border:3px dashed rgba(255,255,255,.7);border-radius:10px}.guide-arm-left{right:80px;transform:rotate(15deg)}.guide-arm-right{left:80px;transform:rotate(-15deg)}.guide-leg{position:absolute;top:155px;width:30px;height:120px;border:3px dashed rgba(255,255,255,.7);border-radius:10px}.guide-leg-left{left:25px}.guide-leg-right{right:25px}.positioning-guide.valid .guide-silhouette{opacity:.8}.positioning-guide.valid .guide-head,.positioning-guide.valid .guide-body,.positioning-guide.valid .guide-arm,.positioning-guide.valid .guide-leg{border-color:var(--color-success);border-style:solid}.hold-progress-ring{position:absolute;width:120px;height:120px;display:flex;align-items:center;justify-content:center}.hold-progress-ring svg{width:100%;height:100%;transform:rotate(-90deg)}.hold-progress-ring .progress-bg{fill:none;stroke:#fff3;stroke-width:4}.hold-progress-ring .progress-fill{fill:none;stroke:var(--color-success);stroke-width:4;stroke-linecap:round;stroke-dasharray:283;transition:stroke-dashoffset .1s linear}.hold-countdown{position:absolute;font-size:2.5em;font-weight:700;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.3)}.camera-status{display:flex;justify-content:center;gap:32px;margin-bottom:24px}.status-item{display:flex;align-items:center;gap:10px;color:#fff9;font-size:1.3em;transition:color var(--transition-normal)}.status-item.success{color:var(--color-success)}.status-item.highlight{color:#ffffffe6}.status-indicator{font-size:1.2em;line-height:1;display:inline-flex;align-items:center;justify-content:center}.camera-tips{background:#ffffff1a;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:32px;text-align:left;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.camera-tips h3{color:#fff;font-size:1.4em;font-weight:600;margin:0 0 16px}.camera-tips ul{color:#ffffffd9;margin:0;padding-left:24px;font-size:1.2em}.camera-tips li{margin-bottom:12px;line-height:1.5}.camera-tips li:last-child{margin-bottom:0}.camera-continue-button{padding:20px 72px;background:#fffffff2;color:var(--color-primary);border:none;border-radius:var(--radius-md);font-size:1.4em;font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.camera-continue-button:hover:not(:disabled){background:#fff;transform:translateY(-3px);box-shadow:0 10px 30px #0003}.camera-continue-button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:768px){.camera-setup-content h1{font-size:1.8em}.camera-setup-subtitle{font-size:1em;margin-bottom:24px}.camera-preview-container{aspect-ratio:4 / 3}.guide-silhouette{width:80px;height:200px}.guide-head{width:35px;height:35px}.guide-body{top:40px;width:45px;height:70px}.guide-arm{top:45px;width:35px;height:60px}.guide-arm-left{right:55px}.guide-arm-right{left:55px}.guide-leg{top:110px;width:22px;height:85px}.guide-leg-left{left:15px}.guide-leg-right{right:15px}.camera-status{flex-direction:column;gap:12px;align-items:center}.camera-tips{padding:16px 20px}.camera-continue-button{width:100%;padding:16px 32px;font-size:1.1em}}.tutorial{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}.tutorial-content{text-align:center;max-width:600px;width:100%}.tutorial-progress{display:flex;justify-content:center;gap:12px;margin-bottom:32px}.tutorial-progress-dot{width:14px;height:14px;border-radius:50%;background:#ffffff4d;transition:all var(--transition-normal)}.tutorial-progress-dot.active{background:#fff;transform:scale(1.4)}.tutorial-progress-dot.completed{background:var(--color-success)}.tutorial-step-title{color:#fff;font-size:2.8em;font-weight:700;margin:0 0 16px}.tutorial-step-description{color:#ffffffe6;font-size:1.5em;margin:0 0 40px;line-height:1.6}.tutorial-demo{background:#0003;border-radius:var(--radius-lg);padding:40px;margin-bottom:40px;min-height:200px;display:flex;align-items:center;justify-content:center}.demo-pose-reference{position:relative}.demo-pose-image{width:200px;height:auto;border-radius:var(--radius-md)}.demo-highlight-ring{position:absolute;inset:-12px;border:3px solid var(--color-secondary);border-radius:var(--radius-lg);animation:highlight-pulse 2s ease-in-out infinite}@keyframes highlight-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.02)}}.demo-skeleton-example{display:flex;flex-direction:column;align-items:center;gap:16px}.demo-figure-container{width:120px;height:180px}.demo-skeleton-svg{width:100%;height:100%;animation:skeleton-move 3s ease-in-out infinite}@keyframes skeleton-move{0%,to{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}.demo-skeleton-label{color:#ffffffe6;font-size:1em;margin:0}.demo-score-example{display:flex;flex-direction:column;align-items:center;gap:16px}.demo-stars-row{display:flex;gap:8px}.demo-star{font-size:2.5em;transition:transform var(--transition-normal)}.demo-star.star-filled{color:#fbbf24;animation:star-pop .5s ease-out}.demo-star.star-empty{color:#ffffff4d}@keyframes star-pop{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.demo-score-label{color:#86efac;font-size:1.2em;font-weight:600;margin:0}.demo-feedback-example{display:flex;flex-direction:column;gap:12px}.demo-feedback-bubble{display:flex;align-items:center;gap:12px;background:#ffffff26;padding:16px 20px;border-radius:var(--radius-md);color:#fff;font-size:1em;animation:fade-slide-in .5s ease-out}.demo-feedback-bubble.secondary{animation-delay:.2s;opacity:.8}@keyframes fade-slide-in{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.demo-feedback-icon{font-size:1.3em}.tutorial-navigation{display:flex;justify-content:center;gap:16px}.tutorial-nav-button{padding:18px 48px;border-radius:var(--radius-md);font-size:1.3em;font-weight:600;cursor:pointer;transition:all var(--transition-normal)}.tutorial-nav-button.prev{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.3)}.tutorial-nav-button.prev:hover:not(:disabled){background:#fff3}.tutorial-nav-button.prev:disabled{opacity:.4;cursor:not-allowed}.tutorial-nav-button.next{background:#fffffff2;color:var(--color-primary);border:none}.tutorial-nav-button.next:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 20px #0003}.tutorial-practice-fullscreen{position:fixed;inset:0;display:flex;align-items:stretch;justify-content:flex-start;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 50%,var(--color-primary) 100%);padding:var(--spacing-lg);gap:var(--spacing-lg);box-sizing:border-box}.tutorial-sidebar{width:300px;flex-shrink:0;display:flex;flex-direction:column;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-xl);padding:var(--spacing-lg);overflow:hidden}.tutorial-pose-reference-img{width:100%;height:100%;object-fit:contain;border-radius:var(--radius-md)}.tutorial-camera-main{flex:1;position:relative;display:flex;flex-direction:column;border-radius:var(--radius-xl);overflow:hidden;background:#000}.tutorial-video-wrapper{position:absolute;inset:0;z-index:1}.tutorial-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.tutorial-header-overlay{position:absolute;top:0;left:0;right:0;z-index:10;background:linear-gradient(to bottom,rgba(0,0,0,.6) 0%,transparent 100%);padding:var(--spacing-lg) var(--spacing-xl);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-xl)}.tutorial-pose-info{display:flex;flex-direction:column;gap:var(--spacing-xs)}.tutorial-pose-name-row{display:flex;align-items:center;gap:var(--spacing-md)}.tutorial-pose-name{font-size:1.5em;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}.tutorial-pose-subtitle{font-size:1em;color:#fffc;text-shadow:0 1px 2px rgba(0,0,0,.3)}.tutorial-header-overlay .pose-feedback{background:transparent;padding:0}.tutorial-header-overlay .mobile-status-bar{display:none}.tutorial-header-overlay .desktop-feedback{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-lg);background:#0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md)}.tutorial-header-overlay .desktop-feedback h3{margin:0;font-size:.9em;color:#ffffffb3;white-space:nowrap}.tutorial-header-overlay .accuracy-score{margin:0}.tutorial-header-overlay .score-badge{padding:var(--spacing-sm) var(--spacing-md);gap:var(--spacing-sm)}.tutorial-header-overlay .feedback-list{max-width:300px}.tutorial-header-overlay .feedback-list ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.tutorial-header-overlay .feedback-list li{font-size:.85em;color:#ffffffe6;background:#ffffff1a;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-sm);white-space:nowrap}.tutorial-header-overlay .no-feedback{margin:0;font-size:.85em;color:#86efac}.tutorial-controls-overlay{position:absolute;bottom:0;left:0;right:0;z-index:10;padding:var(--spacing-xl);display:flex;justify-content:center;gap:var(--spacing-md);background:linear-gradient(to top,rgba(0,0,0,.6) 0%,transparent 100%)}.tutorial-ready-btn{padding:var(--spacing-md) var(--spacing-2xl);background:#fffffff2;color:var(--color-primary);border:none;border-radius:var(--radius-md);font-size:1.1em;font-weight:600;cursor:pointer;transition:all var(--transition-normal);display:flex;align-items:center;gap:var(--spacing-sm)}.tutorial-ready-btn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 20px #0003}@media(max-width:1200px){.tutorial-sidebar{width:250px}.tutorial-pose-name{font-size:1.25em}.tutorial-header-overlay .feedback-list{max-width:250px}}@media(max-width:1024px){.tutorial-sidebar{width:220px;padding:var(--spacing-md)}.tutorial-header-overlay{padding:var(--spacing-md) var(--spacing-lg)}.tutorial-controls-overlay{padding:var(--spacing-lg)}.tutorial-ready-btn{padding:var(--spacing-sm) var(--spacing-lg)}}@media(max-width:768px){.tutorial-step-title{font-size:2.5em}.tutorial-step-description{font-size:1.4em;margin-bottom:32px}.tutorial-demo{padding:24px;min-height:160px}.demo-pose-image{width:150px}.demo-star{font-size:2.5em}.demo-skeleton-label,.demo-score-label,.demo-feedback-bubble{font-size:1.2em}.tutorial-navigation{flex-direction:column}.tutorial-nav-button{width:100%;padding:18px 32px;font-size:1.4em}.tutorial-practice-fullscreen{flex-direction:column;padding:var(--spacing-md);gap:var(--spacing-md)}.tutorial-sidebar{width:100%;flex-direction:row;align-items:center;padding:var(--spacing-sm) var(--spacing-md)}.tutorial-pose-reference-img{width:80px;height:auto;object-fit:contain}.tutorial-camera-main{flex:1;min-height:0}.tutorial-header-overlay{padding:var(--spacing-sm) var(--spacing-md);flex-wrap:wrap;gap:var(--spacing-sm)}.tutorial-pose-name{font-size:1.1em}.tutorial-pose-subtitle{font-size:.85em}.tutorial-header-overlay .desktop-feedback{display:none}.tutorial-header-overlay .mobile-status-bar{display:block}.tutorial-controls-overlay{padding:var(--spacing-md)}.tutorial-ready-btn{width:100%;justify-content:center;padding:var(--spacing-md) var(--spacing-xl)}}.settings-backdrop{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fade-in .2s ease-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.settings-modal{background:#1e1e2df2;border-radius:var(--radius-xl);width:100%;max-width:400px;max-height:90vh;overflow-y:auto;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);animation:slide-up .3s ease-out}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1)}.settings-header h2{color:#fff;font-size:1.3em;font-weight:600;margin:0}.settings-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#ffffff1a;border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition-normal)}.settings-close:hover{background:#fff3}.close-icon{position:relative;width:20px;height:20px;display:block}.close-icon:before,.close-icon:after{content:"";position:absolute;top:50%;left:50%;width:16px;height:2px;background:#fffc;border-radius:1px}.close-icon:before{transform:translate(-50%,-50%) rotate(45deg)}.close-icon:after{transform:translate(-50%,-50%) rotate(-45deg)}.settings-content{padding:24px}.settings-section{margin-bottom:28px}.settings-section:last-child{margin-bottom:0}.settings-section h3{color:#fff9;font-size:.8em;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin:0 0 16px}.settings-option{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.option-info{display:flex;flex-direction:column;gap:4px}.option-label{color:#fff;font-size:1em;font-weight:500}.option-description{color:#ffffff80;font-size:.85em}.toggle-switch{width:52px;height:28px;background:#fff3;border:none;border-radius:14px;cursor:pointer;position:relative;transition:background var(--transition-normal)}.toggle-switch.active{background:var(--color-success)}.toggle-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;background:#fff;border-radius:50%;transition:transform var(--transition-normal)}.toggle-switch.active .toggle-knob{transform:translate(24px)}.settings-action-button{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;background:#ffffff14;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);color:#fff;font-size:1em;cursor:pointer;transition:all var(--transition-normal);margin-bottom:12px}.settings-action-button:last-child{margin-bottom:0}.settings-action-button:hover{background:#ffffff26;border-color:#fff3}.settings-action-button svg{width:20px;height:20px;flex-shrink:0}.settings-action-button.danger{color:#ffffffb3}.settings-action-button.danger:hover{background:#ef444426;border-color:#ef44444d;color:var(--color-error)}.settings-stat{display:flex;justify-content:space-between;align-items:center;padding:16px;background:#ffffff0d;border-radius:var(--radius-md)}.settings-stat .stat-label{color:#fffc;font-size:1em}.settings-stat .stat-value{color:#fff;font-size:1.4em;font-weight:700}@media(max-width:480px){.settings-modal{max-height:80vh}.settings-header{padding:16px 20px}.settings-content{padding:20px}}.settings-button{position:fixed;top:20px;right:20px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#ffffff26;border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-normal);z-index:100;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.settings-button:hover{background:#ffffff40;transform:rotate(45deg)}.gear-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#ffffffe6;line-height:1}.gear-icon:before{content:"⚙"}@media(max-width:768px){.settings-button{width:40px;height:40px}}:root{--color-primary: #3F2B96;--color-secondary: #A8C0FF;--color-primary-shadow: rgba(63, 43, 150, .4);--color-error: #ef4444;--color-error-light: rgba(239, 68, 68, .2);--color-error-border: rgba(239, 68, 68, .4);--color-success: #22c55e;--color-success-light: rgba(34, 197, 94, .2);--color-success-border: rgba(34, 197, 94, .4);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--spacing-2xl: 24px;--spacing-3xl: 32px;--spacing-4xl: 40px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--radius-full: 9999px;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-smooth: .3s ease}.app{min-height:100vh;min-height:100dvh;background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 50%,var(--color-primary) 100%);background-size:200% 200%;animation:gradient-flow 8s ease infinite;padding:20px;box-sizing:border-box}@keyframes gradient-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.app-header{text-align:center;color:#fff;margin-bottom:30px}.app-logo{height:240px;width:auto;margin-bottom:10px}.app-header p{font-size:18px;margin:0;opacity:.9}.app-error{background:#fee2e2;border:1px solid #fca5a5;color:#991b1b;padding:16px;border-radius:8px;margin-bottom:20px;text-align:center}.app-content{display:grid;grid-template-columns:1fr 400px;gap:24px;max-width:1600px;margin:0 auto}.video-section{display:flex;flex-direction:column;gap:16px}.video-wrapper{position:relative;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px #0000004d}.controls{display:flex;justify-content:center;gap:12px}.stream-button{padding:14px 32px;font-size:16px;font-weight:600;border:none;border-radius:8px;cursor:pointer;background:#fff;color:var(--color-primary);transition:all .3s ease;box-shadow:0 4px 6px #0000001a}.stream-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 12px #00000026}.stream-button:disabled{opacity:.5;cursor:not-allowed}.stream-button.streaming{background:#ef4444;color:#fff}.feedback-section{display:flex;flex-direction:column}@media(max-width:1200px){.app-content{grid-template-columns:1fr}.feedback-section{order:-1}}@media(max-width:768px){.app-header{margin-bottom:8px}.app-logo{height:120px;margin-bottom:4px}.app-header p{font-size:15px}}