.player-page{background:var(--bg);justify-content:center;align-items:center;min-height:100vh;margin:0;padding:0;display:flex}.player-container{width:100%;max-width:1200px;padding:var(--spacing-lg);position:relative}.video-wrapper{border-radius:var(--radius-lg);width:100%;box-shadow:var(--shadow-xl);background:#000;position:relative;overflow:hidden}.video-player{background:#000;width:100%;height:auto;max-height:80vh;display:block}.video-player:focus{outline:none}.video-info{margin-top:var(--spacing-lg);padding:var(--spacing-lg);background:var(--panel);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.video-title{font-size:var(--font-size-xl);color:var(--text);margin-bottom:var(--spacing-sm);text-transform:capitalize}.video-description{font-size:var(--font-size-base);color:var(--text-secondary);margin-bottom:var(--spacing-md);line-height:var(--line-height-normal)}.video-url{font-size:var(--font-size-sm);color:var(--muted);word-break:break-all;margin:0;font-family:monospace}.error-container{text-align:center;padding:var(--spacing-2xl);background:var(--panel);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);flex-direction:column;justify-content:center;align-items:center;min-height:400px;display:none}.error-icon{margin-bottom:var(--spacing-lg);font-size:4rem}.error-container h2{color:var(--text);margin-bottom:var(--spacing-md)}.error-container p{color:var(--muted);max-width:400px;margin:0}.loading-container{z-index:10;padding:var(--spacing-xl);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0b2a37e6;flex-direction:column;justify-content:center;align-items:center;display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.loading-spinner{border:4px solid var(--border);border-top-color:var(--accent);width:50px;height:50px;margin-bottom:var(--spacing-md);border-radius:50%;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-container p{color:var(--text);font-size:var(--font-size-base);margin:0}.rotate-prompt{z-index:99999;justify-content:center;align-items:center;gap:var(--spacing-lg);animation:fadeIn var(--transition-base);background:#000000f2;flex-direction:column;display:none;position:fixed;inset:0}.rotate-prompt svg{animation:2s ease-in-out infinite rotate}.rotate-prompt p{color:#fff;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);text-align:center;margin:0}@keyframes rotate{0%,to{transform:rotate(0)}50%{transform:rotate(90deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@media (width<=768px){.player-container{padding:var(--spacing-md)}.video-player{max-height:50vh}.video-info{padding:var(--spacing-md)}.video-title{font-size:var(--font-size-lg)}}@media (width<=480px){.player-container,.video-info{padding:var(--spacing-sm)}.error-container{padding:var(--spacing-lg);min-height:300px}.error-icon{font-size:3rem}}.video-wrapper:fullscreen{background:#000;justify-content:center;align-items:center;display:flex}.video-wrapper:fullscreen .video-player{object-fit:contain;width:100%;height:100%;max-height:100vh}.video-wrapper:fullscreen .overlay-qr-btn{top:var(--spacing-lg);left:var(--spacing-lg);z-index:2147483647;position:fixed;display:flex!important}.video-wrapper:-webkit-full-screen{background:#000;justify-content:center;align-items:center;display:flex}.video-wrapper:-webkit-full-screen .video-player{object-fit:contain;width:100%;height:100%;max-height:100vh}.video-wrapper:-webkit-full-screen .overlay-qr-btn{top:var(--spacing-lg);left:var(--spacing-lg);z-index:2147483647;position:fixed;display:flex!important}video::-webkit-media-controls-panel{opacity:1!important;display:flex!important}video:-webkit-full-screen{object-fit:contain;width:100%;height:100%}@media (orientation:portrait) and (width<=768px){.video-player{max-height:40vh}}@media (orientation:landscape) and (height<=500px){.player-container{padding:var(--spacing-sm)}.video-info{display:none}.video-player{max-height:90vh}}.start-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:200;border-radius:var(--radius-lg);background:#000c;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.start-video-btn{justify-content:center;align-items:center;gap:var(--spacing-md);padding:var(--spacing-xl) var(--spacing-2xl);color:#fff;border-radius:var(--radius-xl);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);font-family:var(--font-family);cursor:pointer;transition:all var(--transition-base);background:#6366f1f2;border:3px solid #ffffff4d;flex-direction:column;display:flex;box-shadow:0 8px 24px #0006}.start-video-btn:hover{background:#818cf8;border-color:#ffffff80;transform:scale(1.05);box-shadow:0 12px 32px #00000080}.start-video-btn:active{transform:scale(.98)}.start-video-btn svg{filter:drop-shadow(0 2px 4px #0000004d)}.video-wrapper.ios-fullscreen{z-index:999999!important;background:#000!important;border-radius:0!important;width:100vw!important;height:100vh!important;margin:0!important;padding:0!important;position:fixed!important;inset:0!important}.video-wrapper.ios-fullscreen .video-player{object-fit:contain!important;width:100%!important;height:100%!important;max-height:100vh!important}body.ios-fullscreen-active .video-info,body.ios-fullscreen-active .error-container,body.ios-fullscreen-active footer{display:none!important}body.ios-fullscreen-active{overflow:hidden!important}.overlay-qr-btn{top:var(--spacing-md);left:var(--spacing-md);z-index:100;color:#fff;border-radius:var(--radius-md);cursor:pointer;width:48px;height:48px;transition:all var(--transition-base);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#6366f1e6;border:2px solid #fff3;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;box-shadow:0 4px 12px #0000004d}.overlay-qr-btn:hover{background:#818cf8;border-color:#fff6;transform:scale(1.05);box-shadow:0 6px 16px #0006}.overlay-qr-btn:active{transform:scale(.98)}.overlay-qr-btn svg{flex-shrink:0}.video-wrapper.ios-fullscreen .overlay-qr-btn{z-index:1000000!important;display:flex!important;position:fixed!important}.scan-qr-btn{align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-lg);background:var(--accent);color:#fff;border-radius:var(--radius-md);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);font-family:var(--font-family);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-sm);border:none;display:inline-flex}.scan-qr-btn:hover{background:var(--accent-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}.scan-qr-btn:active{transform:translateY(0)}.scan-qr-btn svg{flex-shrink:0}.scanner-modal{z-index:10000000;display:none;position:fixed;inset:0}.scanner-modal.active{animation:fadeIn var(--transition-base);display:block}.scanner-overlay{background:#000000e6;position:absolute;inset:0}.scanner-container{width:90%;max-width:500px;margin:var(--spacing-xl) auto;background:var(--panel);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);padding:var(--spacing-lg);z-index:10000001;position:relative}.scanner-header{margin-bottom:var(--spacing-lg);justify-content:space-between;align-items:center;display:flex}.scanner-header h3{color:var(--text);font-size:var(--font-size-xl);margin:0}.close-scanner-btn{color:var(--muted);cursor:pointer;border-radius:var(--radius-sm);width:32px;height:32px;transition:all var(--transition-fast);background:0 0;border:none;justify-content:center;align-items:center;padding:0;font-size:2rem;line-height:1;display:flex}.close-scanner-btn:hover{background:var(--bg);color:var(--text)}.qr-reader{border-radius:var(--radius-md);background:#000;width:100%;min-height:300px;overflow:hidden}.scanner-hint{text-align:center;color:var(--muted);font-size:var(--font-size-sm);margin-top:var(--spacing-md);margin-bottom:0}@media (width<=768px){.scanner-container{width:95%;margin:var(--spacing-md) auto;padding:var(--spacing-md)}.qr-reader{min-height:250px}.overlay-qr-btn{width:44px;height:44px;top:var(--spacing-sm);left:var(--spacing-sm)}.overlay-qr-btn svg{width:20px;height:20px}}@media (height<=600px){.scanner-container{margin:var(--spacing-sm) auto}.qr-reader{min-height:200px}}