@frameset/plex-player 1.0.6 → 2.0.1

package/dist/plex-player.css

@@ -1,1651 +0,0 @@
-/* =====================================================
-   PLEX Video Player - Main Styles
-   ===================================================== */
-
-/* CSS Variables - scoped to player */
-.plex-player,
-.plex-player-container {
-    --plex-primary: #e5a00d;
-    --plex-primary-hover: #f5b82e;
-    --plex-bg-dark: #1a1a1a;
-    --plex-bg-darker: #0d0d0d;
-    --plex-bg-overlay: rgba(0, 0, 0, 0.85);
-    --plex-text-primary: #ffffff;
-    --plex-text-secondary: #a0a0a0;
-    --plex-border: rgba(255, 255, 255, 0.1);
-    --plex-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
-    --plex-gradient-top: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
-    --plex-transition-fast: 0.15s ease;
-    --plex-transition-normal: 0.25s ease;
-    --plex-transition-slow: 0.4s ease;
-    --plex-radius-sm: 4px;
-    --plex-radius-md: 8px;
-    --plex-radius-lg: 12px;
-    --plex-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
-    --plex-z-video: 1;
-    --plex-z-overlay: 10;
-    --plex-z-controls: 20;
-    --plex-z-panel: 30;
-    --plex-z-modal: 40;
-    --plex-z-toast: 50;
-}
-
-/* Scoped Reset - only inside player */
-.plex-player *,
-.plex-player *::before,
-.plex-player *::after {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-/* Player Container Wrapper */
-.plex-player-container {
-    position: relative;
-    width: 100%;
-    aspect-ratio: 16 / 9;
-    background: var(--plex-bg-darker);
-    border-radius: var(--plex-radius-md);
-    overflow: hidden;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-/* Player Container */
-.plex-player {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background: var(--plex-bg-darker);
-    overflow: hidden;
-    user-select: none;
-    -webkit-user-select: none;
-    -webkit-tap-highlight-color: transparent;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    color: var(--plex-text-primary);
-}
-
-.plex-player.plex-fullscreen {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    z-index: 9999;
-    border-radius: 0;
-}
-
-/* Video Container */
-.video-container {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #000;
-    z-index: var(--plex-z-video);
-}
-
-.video-container video {
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-    background: #000;
-}
-
-/* Controls Visibility */
-.plex-player.controls-visible .top-controls,
-.plex-player.controls-visible .bottom-controls {
-    opacity: 1;
-    visibility: visible;
-    transform: translateY(0);
-}
-
-.plex-player:not(.controls-visible) .top-controls,
-.plex-player:not(.controls-visible) .bottom-controls {
-    opacity: 0;
-    visibility: hidden;
-}
-
-.plex-player:not(.controls-visible) .top-controls {
-    transform: translateY(-100%);
-}
-
-.plex-player:not(.controls-visible) .bottom-controls {
-    transform: translateY(100%);
-}
-
-/* Cursor hiding */
-.plex-player.hide-cursor {
-    cursor: none;
-}
-
-.plex-player.hide-cursor video {
-    cursor: none;
-}
-
-/* Loading Spinner */
-.loading-spinner {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: var(--plex-z-overlay);
-}
-
-.loading-spinner .spinner {
-    width: 60px;
-    height: 60px;
-    border: 4px solid rgba(255, 255, 255, 0.2);
-    border-top-color: var(--plex-primary);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* Big Play Button */
-.big-play-btn {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(1);
-    width: 80px;
-    height: 80px;
-    background: var(--plex-primary);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    z-index: var(--plex-z-overlay);
-    transition: all var(--plex-transition-normal);
-    box-shadow: 0 4px 30px rgba(229, 160, 13, 0.4);
-}
-
-.big-play-btn:hover {
-    transform: translate(-50%, -50%) scale(1.1);
-    background: var(--plex-primary-hover);
-}
-
-.big-play-btn .material-icons {
-    font-size: 48px;
-    color: #000;
-    margin-left: 4px;
-}
-
-.big-play-btn.hidden {
-    opacity: 0;
-    visibility: hidden;
-    transform: translate(-50%, -50%) scale(0.8);
-}
-
-/* Gesture Overlay */
-.gesture-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    z-index: var(--plex-z-overlay);
-    pointer-events: none;
-}
-
-.gesture-left,
-.gesture-right {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.gesture-center {
-    flex: 1;
-}
-
-.gesture-indicator {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 8px;
-    padding: 20px;
-    background: rgba(0, 0, 0, 0.7);
-    border-radius: var(--plex-radius-lg);
-    opacity: 0;
-    transform: scale(0.8);
-    transition: all var(--plex-transition-fast);
-}
-
-.gesture-indicator.active {
-    opacity: 1;
-    transform: scale(1);
-}
-
-.gesture-indicator .material-icons {
-    font-size: 48px;
-    color: var(--plex-text-primary);
-}
-
-.gesture-indicator .gesture-text {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--plex-text-primary);
-}
-
-/* Volume/Brightness Indicators */
-.volume-indicator,
-.brightness-indicator {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 12px;
-    padding: 24px;
-    background: rgba(0, 0, 0, 0.8);
-    border-radius: var(--plex-radius-lg);
-    z-index: var(--plex-z-overlay);
-    transition: opacity var(--plex-transition-fast);
-}
-
-.volume-indicator .material-icons,
-.brightness-indicator .material-icons {
-    font-size: 36px;
-    color: var(--plex-text-primary);
-}
-
-.volume-indicator-bar,
-.brightness-indicator-bar {
-    width: 120px;
-    height: 4px;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 2px;
-    overflow: hidden;
-}
-
-.volume-indicator-fill,
-.brightness-indicator-fill {
-    height: 100%;
-    background: var(--plex-primary);
-    border-radius: 2px;
-    transition: width var(--plex-transition-fast);
-}
-
-/* Subtitles Container */
-.subtitles-container {
-    position: absolute;
-    bottom: 80px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 80%;
-    max-width: 800px;
-    text-align: center;
-    z-index: var(--plex-z-overlay);
-    pointer-events: none;
-}
-
-.subtitle-line {
-    display: inline-block;
-    padding: 8px 16px;
-    margin: 4px 0;
-    background: rgba(0, 0, 0, 0.75);
-    border-radius: var(--plex-radius-sm);
-    font-size: 24px;
-    line-height: 1.4;
-    color: #fff;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
-}
-
-/* Cast Overlay */
-.cast-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: var(--plex-bg-darker);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: var(--plex-z-overlay);
-}
-
-.cast-overlay.hidden {
-    display: none;
-}
-
-.cast-overlay-content {
-    text-align: center;
-    animation: castPulse 2s ease-in-out infinite;
-}
-
-.cast-overlay .cast-icon {
-    font-size: 80px;
-    color: var(--plex-primary);
-    margin-bottom: 24px;
-}
-
-.cast-overlay .cast-title {
-    font-size: 18px;
-    color: var(--plex-text-secondary);
-    margin-bottom: 8px;
-}
-
-.cast-overlay .cast-device {
-    font-size: 28px;
-    font-weight: 600;
-    color: var(--plex-text-primary);
-    margin-bottom: 16px;
-}
-
-.cast-overlay .cast-video {
-    font-size: 16px;
-    color: var(--plex-text-secondary);
-    max-width: 300px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-@keyframes castPulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.7; }
-}
-
-/* Utility Classes */
-.hidden {
-    display: none !important;
-}
-
-.visually-hidden {
-    opacity: 0;
-    visibility: hidden;
-}
-
-/* Toast Notification */
-.toast {
-    position: absolute;
-    bottom: 100px;
-    left: 50%;
-    transform: translateX(-50%) translateY(20px);
-    background: var(--plex-bg-overlay);
-    padding: 12px 24px;
-    border-radius: var(--plex-radius-md);
-    z-index: var(--plex-z-toast);
-    opacity: 0;
-    visibility: hidden;
-    transition: all var(--plex-transition-normal);
-}
-
-.toast.show {
-    opacity: 1;
-    visibility: visible;
-    transform: translateX(-50%) translateY(0);
-}
-
-.toast-message {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--plex-text-primary);
-}
-
-/* Context Menu */
-.context-menu {
-    position: fixed;
-    min-width: 200px;
-    background: var(--plex-bg-dark);
-    border: 1px solid var(--plex-border);
-    border-radius: var(--plex-radius-md);
-    box-shadow: var(--plex-shadow);
-    z-index: var(--plex-z-modal);
-    overflow: hidden;
-}
-
-.context-menu-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 12px 16px;
-    cursor: pointer;
-    transition: background var(--plex-transition-fast);
-}
-
-.context-menu-item:hover {
-    background: rgba(255, 255, 255, 0.1);
-}
-
-.context-menu-item .material-icons {
-    font-size: 20px;
-    color: var(--plex-text-secondary);
-}
-
-.context-menu-item span:last-child {
-    font-size: 14px;
-    color: var(--plex-text-primary);
-}
-
-.context-menu-divider {
-    height: 1px;
-    background: var(--plex-border);
-    margin: 4px 0;
-}
-
-/* Stats Overlay */
-.stats-overlay {
-    position: absolute;
-    top: 80px;
-    left: 20px;
-    width: 280px;
-    background: var(--plex-bg-overlay);
-    border-radius: var(--plex-radius-md);
-    z-index: var(--plex-z-panel);
-    overflow: hidden;
-}
-
-.stats-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px;
-    background: rgba(255, 255, 255, 0.05);
-    border-bottom: 1px solid var(--plex-border);
-    font-size: 14px;
-    font-weight: 600;
-}
-
-.stats-content {
-    padding: 12px 16px;
-}
-
-.stat-item {
-    display: flex;
-    justify-content: space-between;
-    padding: 8px 0;
-    font-size: 13px;
-    border-bottom: 1px solid var(--plex-border);
-}
-
-.stat-item:last-child {
-    border-bottom: none;
-}
-
-.stat-label {
-    color: var(--plex-text-secondary);
-}
-
-.stat-value {
-    color: var(--plex-text-primary);
-    font-weight: 500;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .big-play-btn {
-        width: 64px;
-        height: 64px;
-    }
-    
-    .big-play-btn .material-icons {
-        font-size: 36px;
-    }
-    
-    .subtitle-line {
-        font-size: 18px;
-        padding: 6px 12px;
-    }
-    
-    .subtitles-container {
-        width: 90%;
-        bottom: 70px;
-    }
-    
-    .gesture-indicator .material-icons {
-        font-size: 36px;
-    }
-    
-    .stats-overlay {
-        top: 60px;
-        left: 10px;
-        width: 240px;
-    }
-}
-
-@media (max-width: 480px) {
-    .big-play-btn {
-        width: 56px;
-        height: 56px;
-    }
-    
-    .big-play-btn .material-icons {
-        font-size: 32px;
-    }
-    
-    .subtitle-line {
-        font-size: 16px;
-    }
-}
-
-/* Touch Device Optimizations */
-@media (hover: none) and (pointer: coarse) {
-    .control-btn {
-        min-width: 44px;
-        min-height: 44px;
-    }
-    
-    .volume-slider-container {
-        display: none;
-    }
-}
-
-/* Animations */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes slideUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes pulse {
-    0%, 100% {
-        transform: translate(-50%, -50%) scale(1);
-    }
-    50% {
-        transform: translate(-50%, -50%) scale(1.05);
-    }
-}
-
-/* =====================================================
-   PLEX Video Player - Controls Styles (NPM Package)
-   ===================================================== */
-
-/* Video Element */
-.plex-video {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-    background: #000;
-}
-
-/* Controls Container */
-.plex-controls {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 0 16px 16px;
-    background: var(--plex-gradient);
-    z-index: var(--plex-z-controls);
-    transition: opacity var(--plex-transition-normal), visibility var(--plex-transition-normal);
-    opacity: 1;
-    visibility: visible;
-}
-
-.plex-player:not(.plex-controls-visible) .plex-controls {
-    opacity: 0;
-    visibility: hidden;
-}
-
-/* Progress Container */
-.plex-progress-container {
-    position: relative;
-    width: 100%;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    padding: 8px 0;
-}
-
-.plex-progress-bar {
-    position: relative;
-    width: 100%;
-    height: 4px;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 2px;
-    overflow: visible;
-    transition: height var(--plex-transition-fast);
-}
-
-.plex-progress-container:hover .plex-progress-bar {
-    height: 6px;
-}
-
-.plex-progress-buffered {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    background: rgba(255, 255, 255, 0.35);
-    border-radius: 2px;
-    pointer-events: none;
-    width: 0;
-}
-
-.plex-progress-played {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    background: var(--plex-primary);
-    border-radius: 2px;
-    pointer-events: none;
-    width: 0;
-}
-
-.plex-progress-handle {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: 14px;
-    height: 14px;
-    background: var(--plex-primary);
-    border-radius: 50%;
-    transform: translate(-50%, -50%) scale(0);
-    transition: transform var(--plex-transition-fast);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
-    pointer-events: none;
-}
-
-.plex-progress-container:hover .plex-progress-handle {
-    transform: translate(-50%, -50%) scale(1);
-}
-
-/* Progress Preview */
-.plex-progress-preview {
-    position: absolute;
-    bottom: 100%;
-    left: 0;
-    margin-bottom: 8px;
-    padding: 6px 10px;
-    background: var(--plex-bg-dark);
-    border-radius: var(--plex-radius-sm);
-    opacity: 0;
-    visibility: hidden;
-    transform: translateX(-50%);
-    transition: opacity var(--plex-transition-fast);
-    pointer-events: none;
-    z-index: 50;
-}
-
-.plex-progress-container:hover .plex-progress-preview {
-    opacity: 1;
-    visibility: visible;
-}
-
-.plex-preview-time {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--plex-text-primary);
-    white-space: nowrap;
-}
-
-/* Controls Bar */
-.plex-controls-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 8px;
-}
-
-.plex-controls-left,
-.plex-controls-right {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
-/* Control Button */
-.plex-btn {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 40px;
-    padding: 0;
-    background: transparent;
-    border: none;
-    border-radius: var(--plex-radius-sm);
-    cursor: pointer;
-    transition: all var(--plex-transition-fast);
-    color: var(--plex-text-primary);
-}
-
-.plex-btn:hover {
-    background: rgba(255, 255, 255, 0.1);
-}
-
-.plex-btn:active {
-    transform: scale(0.95);
-}
-
-.plex-btn svg {
-    width: 24px;
-    height: 24px;
-    fill: currentColor;
-}
-
-.plex-btn:focus-visible {
-    outline: 2px solid var(--plex-primary);
-    outline-offset: 2px;
-}
-
-/* Play Button States */
-.plex-player.plex-playing .plex-play-btn .plex-icon-play {
-    display: none;
-}
-
-.plex-player.plex-playing .plex-play-btn .plex-icon-pause {
-    display: block;
-}
-
-.plex-player:not(.plex-playing) .plex-play-btn .plex-icon-play {
-    display: block;
-}
-
-.plex-player:not(.plex-playing) .plex-play-btn .plex-icon-pause {
-    display: none;
-}
-
-/* Volume Container */
-.plex-volume-container {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.plex-volume-slider {
-    position: relative;
-    width: 0;
-    overflow: hidden;
-    transition: width var(--plex-transition-normal);
-}
-
-.plex-volume-container:hover .plex-volume-slider {
-    width: 80px;
-}
-
-.plex-volume-track {
-    position: relative;
-    width: 80px;
-    height: 4px;
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 2px;
-    cursor: pointer;
-}
-
-.plex-volume-level {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    background: var(--plex-primary);
-    border-radius: 2px;
-    pointer-events: none;
-    width: 100%;
-}
-
-.plex-volume-handle {
-    position: absolute;
-    top: 50%;
-    right: 0;
-    width: 12px;
-    height: 12px;
-    background: var(--plex-primary);
-    border-radius: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity var(--plex-transition-fast);
-}
-
-.plex-volume-container:hover .plex-volume-handle {
-    opacity: 1;
-}
-
-/* Volume Button States */
-.plex-player.plex-muted .plex-icon-volume-high,
-.plex-player.plex-muted .plex-icon-volume-low {
-    display: none;
-}
-
-.plex-player.plex-muted .plex-icon-volume-mute {
-    display: block;
-}
-
-.plex-player:not(.plex-muted) .plex-icon-volume-mute {
-    display: none;
-}
-
-.plex-player:not(.plex-muted) .plex-icon-volume-high {
-    display: block;
-}
-
-.plex-player:not(.plex-muted) .plex-icon-volume-low {
-    display: none;
-}
-
-/* Time Display */
-.plex-time {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    margin-left: 8px;
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--plex-text-primary);
-}
-
-.plex-time-current,
-.plex-time-duration {
-    font-variant-numeric: tabular-nums;
-}
-
-.plex-time-separator {
-    color: var(--plex-text-secondary);
-}
-
-/* Fullscreen Button States */
-.plex-player.plex-fullscreen .plex-icon-fullscreen {
-    display: none;
-}
-
-.plex-player.plex-fullscreen .plex-icon-fullscreen-exit {
-    display: block;
-}
-
-.plex-player:not(.plex-fullscreen) .plex-icon-fullscreen {
-    display: block;
-}
-
-.plex-player:not(.plex-fullscreen) .plex-icon-fullscreen-exit {
-    display: none;
-}
-
-/* Big Play Button */
-.plex-big-play {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(1);
-    width: 72px;
-    height: 72px;
-    background: var(--plex-primary);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    z-index: var(--plex-z-overlay);
-    transition: all var(--plex-transition-normal);
-    box-shadow: 0 4px 30px rgba(229, 160, 13, 0.4);
-}
-
-.plex-big-play:hover {
-    transform: translate(-50%, -50%) scale(1.1);
-    background: var(--plex-primary-hover);
-}
-
-.plex-big-play svg {
-    width: 40px;
-    height: 40px;
-    fill: #000;
-    margin-left: 4px;
-}
-
-.plex-player.plex-playing .plex-big-play {
-    opacity: 0;
-    visibility: hidden;
-    transform: translate(-50%, -50%) scale(0.8);
-}
-
-/* Loader */
-.plex-loader {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: var(--plex-z-overlay);
-    display: none;
-}
-
-.plex-player.plex-loading .plex-loader {
-    display: block;
-}
-
-.plex-player.plex-loading .plex-big-play {
-    display: none;
-}
-
-.plex-spinner {
-    width: 48px;
-    height: 48px;
-    border: 4px solid rgba(255, 255, 255, 0.2);
-    border-top-color: var(--plex-primary);
-    border-radius: 50%;
-    animation: plex-spin 1s linear infinite;
-}
-
-@keyframes plex-spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-    .plex-controls {
-        padding: 0 12px 12px;
-    }
-    
-    .plex-btn {
-        width: 36px;
-        height: 36px;
-    }
-    
-    .plex-btn svg {
-        width: 22px;
-        height: 22px;
-    }
-    
-    .plex-time {
-        font-size: 12px;
-    }
-    
-    .plex-big-play {
-        width: 60px;
-        height: 60px;
-    }
-    
-    .plex-big-play svg {
-        width: 32px;
-        height: 32px;
-    }
-}
-
-@media (max-width: 480px) {
-    .plex-controls-left,
-    .plex-controls-right {
-        gap: 0;
-    }
-    
-    .plex-btn {
-        width: 32px;
-        height: 32px;
-    }
-    
-    .plex-btn svg {
-        width: 20px;
-        height: 20px;
-    }
-    
-    .plex-prev-btn,
-    .plex-next-btn,
-    .plex-cast-btn {
-        display: none;
-    }
-    
-    .plex-big-play {
-        width: 56px;
-        height: 56px;
-    }
-    
-    .plex-big-play svg {
-        width: 28px;
-        height: 28px;
-    }
-}
-
-/* Controls Visibility */
-.plex-player.plex-controls-visible .plex-controls {
-    opacity: 1;
-    visibility: visible;
-}
-
-/* Cursor hiding when controls hidden */
-.plex-player:not(.plex-controls-visible) {
-    cursor: none;
-}
-
-.plex-player:not(.plex-controls-visible) .plex-video {
-    cursor: none;
-}
-
-/* =====================================================
-   PLEX Video Player - Playlist Styles
-   ===================================================== */
-
-/* Playlist Panel */
-.playlist-panel {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 360px;
-    height: 100%;
-    background: var(--plex-bg-dark);
-    border-left: 1px solid var(--plex-border);
-    z-index: var(--plex-z-panel);
-    display: flex;
-    flex-direction: column;
-    transform: translateX(100%);
-    transition: transform var(--plex-transition-normal);
-}
-
-.playlist-panel.visible {
-    transform: translateX(0);
-}
-
-/* Playlist Header */
-.playlist-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 16px 20px;
-    background: rgba(255, 255, 255, 0.03);
-    border-bottom: 1px solid var(--plex-border);
-    flex-shrink: 0;
-}
-
-.playlist-title {
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--plex-text-primary);
-}
-
-.playlist-header-actions {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
-/* Playlist Content */
-.playlist-content {
-    flex: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 12px;
-}
-
-.playlist-content::-webkit-scrollbar {
-    width: 6px;
-}
-
-.playlist-content::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.playlist-content::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.2);
-    border-radius: 3px;
-}
-
-.playlist-content::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.3);
-}
-
-/* Playlist Empty State */
-.playlist-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    padding: 40px;
-    text-align: center;
-}
-
-.playlist-empty .material-icons {
-    font-size: 64px;
-    color: var(--plex-text-secondary);
-    margin-bottom: 16px;
-    opacity: 0.5;
-}
-
-.playlist-empty-title {
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--plex-text-primary);
-    margin-bottom: 8px;
-}
-
-.playlist-empty-text {
-    font-size: 14px;
-    color: var(--plex-text-secondary);
-    line-height: 1.5;
-}
-
-/* Playlist Item */
-.playlist-item {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding: 10px 12px;
-    background: rgba(255, 255, 255, 0.02);
-    border-radius: var(--plex-radius-md);
-    cursor: pointer;
-    transition: all var(--plex-transition-fast);
-    margin-bottom: 8px;
-    position: relative;
-}
-
-.playlist-item:hover {
-    background: rgba(255, 255, 255, 0.08);
-}
-
-.playlist-item.active {
-    background: rgba(229, 160, 13, 0.15);
-    border: 1px solid rgba(229, 160, 13, 0.3);
-}
-
-.playlist-item.playing {
-    background: rgba(229, 160, 13, 0.2);
-}
-
-.playlist-item.dragging {
-    opacity: 0.5;
-    transform: scale(0.98);
-}
-
-/* Playlist Item Thumbnail */
-.playlist-item-thumbnail {
-    position: relative;
-    width: 100px;
-    height: 56px;
-    background: var(--plex-bg-darker);
-    border-radius: var(--plex-radius-sm);
-    overflow: hidden;
-    flex-shrink: 0;
-}
-
-.playlist-item-thumbnail img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
-
-.playlist-item-thumbnail .placeholder-icon {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 32px;
-    color: var(--plex-text-secondary);
-    opacity: 0.5;
-}
-
-.playlist-item-duration {
-    position: absolute;
-    bottom: 4px;
-    right: 4px;
-    padding: 2px 6px;
-    background: rgba(0, 0, 0, 0.8);
-    border-radius: 3px;
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--plex-text-primary);
-}
-
-/* Playing Indicator */
-.playlist-item-playing-indicator {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: none;
-    align-items: flex-end;
-    justify-content: center;
-    gap: 2px;
-    width: 24px;
-    height: 20px;
-}
-
-.playlist-item.playing .playlist-item-playing-indicator {
-    display: flex;
-}
-
-.playlist-item-playing-indicator span {
-    width: 4px;
-    background: var(--plex-primary);
-    border-radius: 1px;
-    animation: equalizer 0.5s ease-in-out infinite alternate;
-}
-
-.playlist-item-playing-indicator span:nth-child(1) {
-    height: 60%;
-    animation-delay: 0s;
-}
-
-.playlist-item-playing-indicator span:nth-child(2) {
-    height: 100%;
-    animation-delay: 0.15s;
-}
-
-.playlist-item-playing-indicator span:nth-child(3) {
-    height: 40%;
-    animation-delay: 0.3s;
-}
-
-@keyframes equalizer {
-    from {
-        transform: scaleY(0.5);
-    }
-    to {
-        transform: scaleY(1);
-    }
-}
-
-/* Playlist Item Info */
-.playlist-item-info {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.playlist-item-title {
-    font-size: 14px;
-    font-weight: 500;
-    color: var(--plex-text-primary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.playlist-item-meta {
-    font-size: 12px;
-    color: var(--plex-text-secondary);
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-
-/* Playlist Item Actions */
-.playlist-item-actions {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    opacity: 0;
-    transition: opacity var(--plex-transition-fast);
-}
-
-.playlist-item:hover .playlist-item-actions {
-    opacity: 1;
-}
-
-.playlist-item-action {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    background: transparent;
-    border: none;
-    border-radius: var(--plex-radius-sm);
-    cursor: pointer;
-    color: var(--plex-text-secondary);
-    transition: all var(--plex-transition-fast);
-}
-
-.playlist-item-action:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--plex-text-primary);
-}
-
-.playlist-item-action .material-icons {
-    font-size: 18px;
-}
-
-/* Drag Handle */
-.playlist-item-drag-handle {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 20px;
-    cursor: grab;
-    color: var(--plex-text-secondary);
-    opacity: 0;
-    transition: opacity var(--plex-transition-fast);
-}
-
-.playlist-item:hover .playlist-item-drag-handle {
-    opacity: 1;
-}
-
-.playlist-item-drag-handle:active {
-    cursor: grabbing;
-}
-
-.playlist-item-drag-handle .material-icons {
-    font-size: 18px;
-}
-
-/* Playlist Footer */
-.playlist-footer {
-    padding: 16px;
-    border-top: 1px solid var(--plex-border);
-    flex-shrink: 0;
-}
-
-.playlist-add-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    width: 100%;
-    padding: 12px;
-    background: rgba(255, 255, 255, 0.05);
-    border: 2px dashed var(--plex-border);
-    border-radius: var(--plex-radius-md);
-    color: var(--plex-text-secondary);
-    font-size: 14px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all var(--plex-transition-fast);
-}
-
-.playlist-add-btn:hover {
-    background: rgba(255, 255, 255, 0.08);
-    border-color: var(--plex-primary);
-    color: var(--plex-primary);
-}
-
-.playlist-add-btn .material-icons {
-    font-size: 20px;
-}
-
-/* Playlist Stats */
-.playlist-stats {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px;
-    background: rgba(0, 0, 0, 0.3);
-    border-top: 1px solid var(--plex-border);
-    font-size: 12px;
-    color: var(--plex-text-secondary);
-}
-
-/* Queue Next Indicator */
-.playlist-item-queue-next {
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    padding: 2px 6px;
-    background: var(--plex-primary);
-    border-radius: 3px;
-    font-size: 9px;
-    font-weight: 700;
-    color: #000;
-    text-transform: uppercase;
-}
-
-/* Responsive Playlist */
-@media (max-width: 768px) {
-    .playlist-panel {
-        width: 100%;
-        max-width: 100%;
-    }
-    
-    .playlist-item-thumbnail {
-        width: 80px;
-        height: 45px;
-    }
-    
-    .playlist-item-title {
-        font-size: 13px;
-    }
-    
-    .playlist-item-actions {
-        opacity: 1;
-    }
-}
-
-@media (max-width: 480px) {
-    .playlist-header {
-        padding: 12px 16px;
-    }
-    
-    .playlist-content {
-        padding: 8px;
-    }
-    
-    .playlist-item {
-        padding: 8px;
-        gap: 10px;
-    }
-    
-    .playlist-item-thumbnail {
-        width: 70px;
-        height: 40px;
-    }
-    
-    .playlist-item-drag-handle {
-        display: none;
-    }
-}
-
-/* Drag and Drop States */
-.playlist-content.drag-over {
-    background: rgba(229, 160, 13, 0.05);
-}
-
-.playlist-item.drop-target-above::before {
-    content: '';
-    position: absolute;
-    top: -4px;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: var(--plex-primary);
-    border-radius: 1px;
-}
-
-.playlist-item.drop-target-below::after {
-    content: '';
-    position: absolute;
-    bottom: -4px;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: var(--plex-primary);
-    border-radius: 1px;
-}
-
-/* =====================================================
-   PLEX Video Player - Settings Styles (NPM Package)
-   ===================================================== */
-
-/* Settings Panel */
-.plex-settings-panel {
-    position: absolute;
-    bottom: 80px;
-    right: 16px;
-    width: 280px;
-    max-height: 400px;
-    background: var(--plex-bg-dark);
-    border: 1px solid var(--plex-border);
-    border-radius: var(--plex-radius-lg);
-    box-shadow: var(--plex-shadow);
-    z-index: var(--plex-z-panel);
-    overflow: hidden;
-    opacity: 0;
-    visibility: hidden;
-    transform: scale(0.95) translateY(10px);
-    transform-origin: bottom right;
-    transition: all var(--plex-transition-fast);
-}
-
-.plex-settings-panel.plex-settings-open {
-    opacity: 1;
-    visibility: visible;
-    transform: scale(1) translateY(0);
-}
-
-/* Settings Header */
-.plex-settings-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px;
-    background: rgba(255, 255, 255, 0.03);
-    border-bottom: 1px solid var(--plex-border);
-}
-
-.plex-settings-title {
-    font-size: 15px;
-    font-weight: 600;
-    color: var(--plex-text-primary);
-}
-
-.plex-settings-close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    background: transparent;
-    border: none;
-    border-radius: var(--plex-radius-sm);
-    cursor: pointer;
-    color: var(--plex-text-secondary);
-    transition: all var(--plex-transition-fast);
-}
-
-.plex-settings-close:hover {
-    background: rgba(255, 255, 255, 0.1);
-    color: var(--plex-text-primary);
-}
-
-.plex-settings-close svg {
-    width: 18px;
-    height: 18px;
-    fill: currentColor;
-}
-
-/* Settings Content */
-.plex-settings-content {
-    padding: 8px 0;
-}
-
-/* Settings Item */
-.plex-settings-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 12px 16px;
-    cursor: pointer;
-    transition: background var(--plex-transition-fast);
-}
-
-.plex-settings-item:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.plex-settings-label {
-    font-size: 14px;
-    color: var(--plex-text-primary);
-}
-
-.plex-settings-value {
-    font-size: 13px;
-    color: var(--plex-text-secondary);
-}
-
-/* Settings Submenu */
-.plex-settings-submenu {
-    padding: 8px 0;
-}
-
-.plex-settings-back {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 12px 16px;
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--plex-text-primary);
-    cursor: pointer;
-    border-bottom: 1px solid var(--plex-border);
-    transition: background var(--plex-transition-fast);
-}
-
-.plex-settings-back:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.plex-settings-back svg {
-    width: 18px;
-    height: 18px;
-    fill: currentColor;
-}
-
-/* Speed Options */
-.plex-speed-options {
-    display: flex;
-    flex-direction: column;
-    padding: 8px 0;
-}
-
-.plex-speed-option {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px 16px;
-    background: transparent;
-    border: none;
-    font-size: 14px;
-    color: var(--plex-text-primary);
-    cursor: pointer;
-    transition: all var(--plex-transition-fast);
-}
-
-.plex-speed-option:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.plex-speed-option.active {
-    color: var(--plex-primary);
-    font-weight: 600;
-}
-
-.plex-speed-option.active::before {
-    content: '✓';
-    margin-right: 8px;
-}
-
-/* Responsive */
-@media (max-width: 480px) {
-    .plex-settings-panel {
-        width: calc(100% - 32px);
-        left: 16px;
-        right: 16px;
-    }
-}
-
-/*# sourceMappingURL=plex-player.css.map */