.video-preview-container{align-items:center;background:#000;border-radius:12px;box-shadow:0 4px 20px #0000004d;display:flex;height:100%;justify-content:center;max-width:100%;overflow:hidden;position:relative;width:100%}.video-player{background:#000;contain:layout paint;cursor:pointer;display:block;height:100%;-o-object-fit:contain;object-fit:contain;visibility:hidden;width:100%}.video-player.video-ready{visibility:visible}.video-expired-overlay{align-items:center;background:#000000e6;display:flex;justify-content:center;inset:0;position:absolute;z-index:10}.expired-content{color:#fff;padding:2rem;text-align:center}.expired-icon{color:#ff6b6b;margin-bottom:1rem}.expired-content h3{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.expired-content p{color:#aaa;font-size:1rem}.video-error-overlay{align-items:center;background:#000000e6;display:flex;justify-content:center;inset:0;position:absolute;z-index:10}.error-content{color:#fff;padding:2rem;text-align:center}.error-icon{color:#ff6b6b;margin-bottom:1rem}.error-content h3{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.error-content p{color:#aaa;font-size:1rem;margin-bottom:1rem}.retry-button{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:8px;color:#fff;cursor:pointer;display:inline-flex;font-size:1rem;font-weight:500;gap:.5rem;padding:.75rem 1.5rem;transition:transform .2s,box-shadow .2s}.retry-button:hover{box-shadow:0 4px 12px #667eea66;transform:translateY(-2px)}.retry-button:active{transform:translateY(0)}.video-loading{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:5}.loading-spinner{animation:spin .8s linear infinite;border:4px solid hsla(0,0%,100%,.2);border-radius:50%;border-top-color:#fff;height:50px;width:50px}@keyframes spin{to{transform:rotate(1turn)}}.video-controls{background:linear-gradient(0deg,rgba(0,0,0,.8),transparent);bottom:0;box-sizing:border-box;left:0;padding:1.5rem 1rem 1rem;position:absolute;right:0;transform-origin:bottom center;width:100%;z-index:5}.progress-container{cursor:pointer;margin-bottom:.75rem;padding:.5rem 0}.progress-bar,.progress-container{box-sizing:border-box;position:relative;width:100%}.progress-bar{background:#ffffff4d;border-radius:2px;height:4px;overflow:hidden;transition:height .2s}.progress-container:hover .progress-bar{height:6px}.progress-filled{background:linear-gradient(90deg,#667eea,#764ba2);border-radius:2px;box-sizing:border-box;height:100%;left:0;position:absolute;top:0;transition:width .1s}.progress-handle{background:#fff;border-radius:50%;box-shadow:0 2px 8px #0000004d;height:12px;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%);transition:opacity .2s;width:12px}.progress-container:hover .progress-handle{opacity:1}.controls-row{align-items:center;display:flex;justify-content:space-between}.controls-left,.controls-right{align-items:center;display:flex;gap:.5rem}.control-btn{align-items:center;background:transparent;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;justify-content:center;padding:.5rem;transition:background .2s,transform .1s}.control-btn:hover{background:#ffffff1a}.control-btn:active{transform:scale(.95)}.time-display{color:#fff;font-size:.875rem;font-weight:500;margin-left:.5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.video-metadata{display:flex;flex-direction:column;gap:.5rem;left:1rem;position:absolute;top:1rem;z-index:4}.metadata-item{backdrop-filter:blur(8px);background:#000000b3;border-radius:6px;color:#fff;font-size:.75rem;font-weight:500;padding:.375rem .75rem}@media (max-width:768px){.video-controls{padding:1rem .75rem .75rem}.control-btn{padding:.375rem}.time-display{font-size:.75rem}.video-metadata{left:.5rem;top:.5rem}.metadata-item{font-size:.625rem;padding:.25rem .5rem}.expired-content h3{font-size:1.25rem}.expired-content p{font-size:.875rem}}.video-preview-container:fullscreen{align-items:center;display:flex;justify-content:center}.video-preview-container:fullscreen .video-player{max-height:100vh;-o-object-fit:contain;object-fit:contain}.video-preview-container:-webkit-full-screen{align-items:center;display:flex;justify-content:center}.video-preview-container:-webkit-full-screen .video-player{max-height:100vh;object-fit:contain}video[controlsList~=nodownload]::-webkit-media-controls-overflow-button{display:none!important}video[controlsList~=nodownload]:fullscreen::-webkit-media-controls-overflow-button{display:none!important}video[controlsList~=nodownload]:-webkit-full-screen::-webkit-media-controls-overflow-button{display:none!important}.control-btn:focus{outline:2px solid rgba(102,126,234,.5);outline-offset:2px}.control-btn:disabled{cursor:not-allowed;opacity:.5}.control-btn:disabled:hover{background:transparent;transform:none}.mode-selector-container{display:inline-block;max-width:350px;position:relative;width:100%}.mode-selector-btn{align-items:center;background:#fff;border:2px solid #e5e7eb;border-radius:12px;cursor:pointer;display:flex;font-family:inherit;justify-content:space-between;padding:1rem 1.25rem;transition:all .2s ease;width:100%}.mode-selector-btn:hover:not(.disabled){border-color:#667eea;box-shadow:0 4px 12px #667eea26}.mode-selector-btn.open{border-color:#667eea;box-shadow:0 4px 12px #667eea33}.mode-selector-btn.disabled{background:#f9fafb;cursor:not-allowed;opacity:.5}.mode-selector-current{align-items:center;display:flex;flex:1;gap:.75rem}.mode-icon-wrapper{align-items:center;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:10px;display:flex;flex-shrink:0;height:40px;justify-content:center;width:40px}.mode-text{display:flex;flex-direction:column;gap:.25rem;text-align:left}.mode-label{color:#1f2937;font-size:1rem;font-weight:600;line-height:1.2}.mode-description{color:#6b7280;font-size:.75rem;line-height:1.2}.dropdown-icon{color:#9ca3af;flex-shrink:0;transition:transform .2s ease}.dropdown-icon.rotated{transform:rotate(180deg)}.mode-dropdown{background:#fff;border:2px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 40px #00000026;left:0;overflow:hidden;position:absolute;right:0;top:calc(100% + .5rem);z-index:1000}.mode-option{align-items:center;background:#fff;border:none;border-bottom:1px solid #f3f4f6;cursor:pointer;display:flex;font-family:inherit;justify-content:space-between;padding:1rem 1.25rem;transition:background .2s ease;width:100%}.mode-option:last-child{border-bottom:none}.mode-option:hover:not(.disabled){background:#f9fafb}.mode-option.active{background:linear-gradient(135deg,#667eea0d,#764ba20d)}.mode-option.disabled{cursor:not-allowed;opacity:.5}.mode-option-content{align-items:center;display:flex;flex:1;gap:.75rem}.mode-checkmark{color:#667eea;font-size:1.25rem;font-weight:700}.coming-soon-badge{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:4px;color:#fff;display:inline-block;font-size:.625rem;font-weight:600;letter-spacing:.5px;margin-left:.5rem;padding:.125rem .5rem;text-transform:uppercase}.mode-selector-compact{display:inline-block;position:relative}.mode-selector-btn-compact{align-items:center;background:#fff;border:2px solid #e5e7eb;border-radius:12px;cursor:pointer;display:flex;height:48px;justify-content:center;transition:all .2s ease;width:48px}.mode-selector-btn-compact:hover:not(.disabled){border-color:#667eea;box-shadow:0 4px 12px #667eea26}.mode-selector-btn-compact.disabled{cursor:not-allowed;opacity:.5}.mode-dropdown-compact{background:#fff;border:2px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 40px #00000026;display:flex;flex-direction:column;gap:.5rem;left:50%;min-width:60px;padding:.5rem;position:absolute;top:calc(100% + .5rem);transform:translate(-50%);z-index:1000}.mode-option-compact{align-items:center;background:#fff;border:2px solid transparent;border-radius:10px;cursor:pointer;display:flex;height:48px;justify-content:center;position:relative;transition:all .2s ease;width:48px}.mode-option-compact:hover:not(.disabled){background:#f9fafb;border-color:#667eea}.mode-option-compact.active{background:linear-gradient(135deg,#667eea1a,#764ba21a);border-color:#667eea}.mode-option-compact.disabled{cursor:not-allowed;opacity:.5}.mode-option-compact .coming-soon-badge{font-size:.5rem;padding:.125rem .25rem;position:absolute;right:-4px;top:-4px}.mode-selector-minimal{align-items:center;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;display:flex;gap:.5rem;padding:.5rem}.mode-btn-minimal{align-items:center;background:transparent;border:2px solid transparent;border-radius:10px;cursor:pointer;display:flex;height:40px;justify-content:center;transition:all .2s ease;width:40px}.mode-btn-minimal:hover{background:#667eea1a}.mode-btn-minimal.active{background:#fff;border-color:#667eea4d;box-shadow:0 2px 8px #667eea26}@media (max-width:768px){.mode-selector-container{max-width:100%}.mode-selector-btn{padding:.875rem 1rem}.mode-icon-wrapper{height:36px;width:36px}.mode-label{font-size:.9375rem}.mode-description{font-size:.6875rem}.mode-option{padding:.875rem 1rem}}@media (max-width:480px){.mode-selector-btn{padding:.75rem .875rem}.mode-icon-wrapper{height:32px;width:32px}.mode-label{font-size:.875rem}.mode-description{display:none}.mode-option-compact,.mode-selector-btn-compact{height:42px;width:42px}.mode-btn-minimal{height:36px;width:36px}}@media (prefers-color-scheme:dark){.mode-btn-minimal.active,.mode-dropdown,.mode-dropdown-compact,.mode-option,.mode-option-compact,.mode-selector-btn,.mode-selector-btn-compact{background:#1f2937;border-color:#374151;color:#f9fafb}.mode-selector-minimal{background:#1f2937;border-color:#374151}.mode-label{color:#f9fafb}.mode-description{color:#9ca3af}.mode-btn-minimal:hover,.mode-option-compact:hover:not(.disabled),.mode-option:hover:not(.disabled){background:#374151}.mode-option.active{background:linear-gradient(135deg,#667eea26,#764ba226)}}.mode-btn-minimal:focus,.mode-option-compact:focus,.mode-option:focus,.mode-selector-btn-compact:focus,.mode-selector-btn:focus{outline:2px solid rgba(102,126,234,.5);outline-offset:2px}