@frameset/plex-player 1.0.0

package/dist/plex-player.css

@@ -0,0 +1,1943 @@
+/* =====================================================
+   PLEX Video Player - Main Styles
+   ===================================================== */
+
+/* CSS Variables */
+:root {
+    --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;
+}
+
+/* Reset & Base */
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+    background: var(--plex-bg-darker);
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    color: var(--plex-text-primary);
+    overflow: hidden;
+    -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;
+}
+
+.plex-player.fullscreen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 9999;
+}
+
+/* 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
+   ===================================================== */
+
+/* Top Controls Bar */
+.top-controls {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 20px;
+    background: var(--plex-gradient-top);
+    z-index: var(--plex-z-controls);
+    transition: all var(--plex-transition-normal);
+}
+
+.top-left,
+.top-right {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.video-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--plex-text-primary);
+    margin-left: 8px;
+    max-width: 400px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Bottom Controls */
+.bottom-controls {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 0 16px 16px;
+    background: var(--plex-gradient);
+    z-index: var(--plex-z-controls);
+    transition: all var(--plex-transition-normal);
+}
+
+/* Progress Container */
+.progress-container {
+    position: relative;
+    width: 100%;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    padding: 8px 0;
+}
+
+.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);
+}
+
+.progress-container:hover .progress-bar {
+    height: 6px;
+}
+
+.progress-buffered {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.35);
+    border-radius: 2px;
+    pointer-events: none;
+}
+
+.progress-played {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    background: var(--plex-primary);
+    border-radius: 2px;
+    pointer-events: none;
+}
+
+.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;
+}
+
+.progress-container:hover .progress-handle,
+.progress-container.dragging .progress-handle {
+    transform: translate(-50%, -50%) scale(1);
+}
+
+.progress-container.dragging .progress-bar {
+    height: 6px;
+}
+
+/* Progress Tooltip */
+.progress-tooltip {
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    padding: 6px 10px;
+    background: var(--plex-bg-dark);
+    border-radius: var(--plex-radius-sm);
+    font-size: 13px;
+    font-weight: 500;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(-50%) translateY(4px);
+    transition: all var(--plex-transition-fast);
+    pointer-events: none;
+    z-index: 50;
+}
+
+.progress-container:hover .progress-tooltip {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(-4px);
+}
+
+/* Hide tooltip when preview is visible */
+.progress-container:hover .progress-preview[style*="display: flex"] ~ .progress-tooltip,
+.progress-preview:not([style*="display: none"]) + .progress-tooltip {
+    opacity: 0;
+    visibility: hidden;
+}
+
+/* Progress Preview (Thumbnail) */
+.progress-preview {
+    position: absolute;
+    bottom: calc(100% + 16px);
+    left: 0;
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    z-index: 100;
+    pointer-events: none;
+    background: rgba(0, 0, 0, 0.9);
+    padding: 4px;
+    border-radius: var(--plex-radius-sm);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+}
+
+#preview-canvas {
+    width: 160px;
+    height: 90px;
+    background: var(--plex-bg-dark);
+    border: 2px solid var(--plex-primary);
+    border-radius: var(--plex-radius-sm);
+    object-fit: contain;
+}
+
+.preview-time {
+    margin-top: 6px;
+    padding: 4px 10px;
+    background: var(--plex-primary);
+    color: #000;
+    border-radius: var(--plex-radius-sm);
+    font-size: 12px;
+    font-weight: 700;
+}
+
+/* Time Display */
+.time-display {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 8px 0;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--plex-text-primary);
+}
+
+.time-separator {
+    color: var(--plex-text-secondary);
+}
+
+/* Main Controls Row */
+.main-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: 4px;
+}
+
+.controls-left,
+.controls-right {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+/* Control Button */
+.control-btn {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    background: transparent;
+    border: none;
+    border-radius: var(--plex-radius-sm);
+    cursor: pointer;
+    transition: all var(--plex-transition-fast);
+    color: var(--plex-text-primary);
+}
+
+.control-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.control-btn:active {
+    transform: scale(0.95);
+}
+
+.control-btn .material-icons {
+    font-size: 24px;
+}
+
+.control-btn.active {
+    color: var(--plex-primary);
+}
+
+/* Cast Button */
+#cast-btn {
+    transition: all var(--plex-transition-fast);
+}
+
+#cast-btn.active {
+    color: var(--plex-primary);
+    animation: pulse-cast 2s ease-in-out infinite;
+}
+
+#cast-btn.hidden {
+    display: none;
+}
+
+@keyframes pulse-cast {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+}
+
+/* Play Button (Larger) */
+.play-btn {
+    width: 48px;
+    height: 48px;
+}
+
+.play-btn .material-icons {
+    font-size: 32px;
+}
+
+/* Speed Text */
+.speed-text {
+    font-size: 14px;
+    font-weight: 600;
+    min-width: 28px;
+}
+
+/* Volume Control */
+.volume-control {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.volume-slider-container {
+    position: relative;
+    width: 0;
+    overflow: hidden;
+    transition: width var(--plex-transition-normal);
+}
+
+.volume-control:hover .volume-slider-container {
+    width: 80px;
+}
+
+.volume-slider {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 80px;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 2px;
+    outline: none;
+    cursor: pointer;
+}
+
+.volume-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 14px;
+    height: 14px;
+    background: var(--plex-primary);
+    border-radius: 50%;
+    cursor: pointer;
+    transition: transform var(--plex-transition-fast);
+}
+
+.volume-slider::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+}
+
+.volume-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    background: var(--plex-primary);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.volume-slider-fill {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    height: 4px;
+    background: var(--plex-primary);
+    border-radius: 2px;
+    transform: translateY(-50%);
+    pointer-events: none;
+}
+
+/* Chapters Markers (on progress bar) */
+.chapter-marker {
+    position: absolute;
+    top: 0;
+    width: 3px;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 1px;
+    transform: translateX(-50%);
+    cursor: pointer;
+    z-index: 2;
+}
+
+.chapter-marker:hover {
+    background: var(--plex-primary);
+}
+
+/* Skip Intro Button */
+.skip-intro-btn {
+    position: absolute;
+    right: 20px;
+    bottom: 100px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 20px;
+    background: rgba(255, 255, 255, 0.9);
+    color: #000;
+    border: none;
+    border-radius: var(--plex-radius-md);
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    z-index: var(--plex-z-controls);
+    transition: all var(--plex-transition-normal);
+}
+
+.skip-intro-btn:hover {
+    background: #fff;
+    transform: scale(1.02);
+}
+
+.skip-intro-btn .material-icons {
+    font-size: 20px;
+}
+
+/* Double Tap Ripple Effect */
+.tap-ripple {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.3);
+    transform: translate(-50%, -50%) scale(0);
+    animation: ripple 0.5s ease-out forwards;
+    pointer-events: none;
+}
+
+@keyframes ripple {
+    to {
+        transform: translate(-50%, -50%) scale(2);
+        opacity: 0;
+    }
+}
+
+/* Responsive Controls */
+@media (max-width: 768px) {
+    .top-controls {
+        padding: 12px 16px;
+    }
+    
+    .video-title {
+        font-size: 14px;
+        max-width: 200px;
+    }
+    
+    .bottom-controls {
+        padding: 0 12px 12px;
+    }
+    
+    .control-btn {
+        width: 36px;
+        height: 36px;
+    }
+    
+    .control-btn .material-icons {
+        font-size: 22px;
+    }
+    
+    .play-btn {
+        width: 44px;
+        height: 44px;
+    }
+    
+    .play-btn .material-icons {
+        font-size: 28px;
+    }
+    
+    .time-display {
+        font-size: 12px;
+    }
+    
+    .speed-text {
+        font-size: 12px;
+    }
+    
+    #preview-canvas {
+        width: 120px;
+        height: 68px;
+    }
+}
+
+@media (max-width: 480px) {
+    .controls-left,
+    .controls-right {
+        gap: 0;
+    }
+    
+    .control-btn {
+        width: 32px;
+        height: 32px;
+    }
+    
+    .control-btn .material-icons {
+        font-size: 20px;
+    }
+    
+    .video-title {
+        max-width: 140px;
+        font-size: 13px;
+    }
+    
+    /* Hide some buttons on very small screens */
+    #cast-btn,
+    #quality-btn {
+        display: none;
+    }
+}
+
+/* Hover/Focus States for Accessibility */
+.control-btn:focus-visible {
+    outline: 2px solid var(--plex-primary);
+    outline-offset: 2px;
+}
+
+.progress-container:focus-visible {
+    outline: 2px solid var(--plex-primary);
+    outline-offset: 2px;
+}
+
+/* Disabled State */
+.control-btn:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}
+
+.control-btn:disabled:hover {
+    background: transparent;
+}
+
+/* =====================================================
+   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
+   ===================================================== */
+
+/* Settings Panel */
+.settings-panel {
+    position: absolute;
+    bottom: 80px;
+    right: 20px;
+    width: 300px;
+    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;
+    transform-origin: bottom right;
+    animation: settingsOpen 0.2s ease;
+}
+
+@keyframes settingsOpen {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/* Settings Header */
+.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);
+}
+
+.settings-title {
+    font-size: 15px;
+    font-weight: 600;
+    color: var(--plex-text-primary);
+}
+
+/* Settings Content */
+.settings-content {
+    max-height: 340px;
+    overflow-y: auto;
+}
+
+.settings-content::-webkit-scrollbar {
+    width: 6px;
+}
+
+.settings-content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.settings-content::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+}
+
+/* Settings Menu */
+.settings-menu {
+    padding: 8px 0;
+}
+
+/* Settings Item */
+.settings-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 16px;
+    cursor: pointer;
+    transition: background var(--plex-transition-fast);
+}
+
+.settings-item:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.settings-item .material-icons:first-child {
+    font-size: 22px;
+    color: var(--plex-text-secondary);
+}
+
+.settings-item-label {
+    flex: 1;
+    font-size: 14px;
+    color: var(--plex-text-primary);
+}
+
+.settings-item-value {
+    font-size: 13px;
+    color: var(--plex-text-secondary);
+}
+
+.settings-item .material-icons:last-child {
+    font-size: 20px;
+    color: var(--plex-text-secondary);
+}
+
+/* Settings Submenu */
+.settings-submenu {
+    padding: 8px 0;
+}
+
+/* Settings Option */
+.settings-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 16px;
+    cursor: pointer;
+    transition: background var(--plex-transition-fast);
+    font-size: 14px;
+    color: var(--plex-text-primary);
+}
+
+.settings-option:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.settings-option.active {
+    color: var(--plex-primary);
+}
+
+.settings-option.active::after {
+    content: 'check';
+    font-family: 'Material Icons';
+    font-size: 20px;
+    color: var(--plex-primary);
+}
+
+/* Toggle Switch */
+.toggle-switch {
+    position: relative;
+    width: 44px;
+    height: 24px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 12px;
+    cursor: pointer;
+    transition: background var(--plex-transition-fast);
+}
+
+.toggle-switch.active {
+    background: var(--plex-primary);
+}
+
+.toggle-slider {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 20px;
+    height: 20px;
+    background: #fff;
+    border-radius: 50%;
+    transition: transform var(--plex-transition-fast);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.toggle-switch.active .toggle-slider {
+    transform: translateX(20px);
+}
+
+/* Subtitles Settings Panel */
+.subtitles-settings-panel {
+    position: absolute;
+    bottom: 80px;
+    right: 20px;
+    width: 320px;
+    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;
+}
+
+.subtitles-settings-content {
+    padding: 16px;
+}
+
+/* Subtitle Setting Item */
+.subtitle-setting-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+}
+
+.subtitle-setting-item label {
+    flex: 0 0 100px;
+    font-size: 13px;
+    color: var(--plex-text-secondary);
+}
+
+.subtitle-setting-item input[type="range"] {
+    flex: 1;
+    -webkit-appearance: none;
+    appearance: none;
+    height: 4px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 2px;
+    outline: none;
+}
+
+.subtitle-setting-item input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    background: var(--plex-primary);
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.subtitle-setting-item input[type="color"] {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 40px;
+    height: 30px;
+    border: none;
+    border-radius: var(--plex-radius-sm);
+    cursor: pointer;
+    background: transparent;
+}
+
+.subtitle-setting-item input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+
+.subtitle-setting-item input[type="color"]::-webkit-color-swatch {
+    border: 2px solid var(--plex-border);
+    border-radius: var(--plex-radius-sm);
+}
+
+.subtitle-setting-item span:last-child {
+    flex: 0 0 50px;
+    text-align: right;
+    font-size: 13px;
+    color: var(--plex-text-primary);
+    font-weight: 500;
+}
+
+/* Subtitle Load Button */
+.subtitle-load-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    padding: 12px;
+    margin-top: 8px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--plex-border);
+    border-radius: var(--plex-radius-md);
+    color: var(--plex-text-primary);
+    font-size: 14px;
+    cursor: pointer;
+    transition: all var(--plex-transition-fast);
+}
+
+.subtitle-load-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--plex-primary);
+}
+
+.subtitle-load-btn .material-icons {
+    font-size: 20px;
+}
+
+/* Speed Panel (Alternative) */
+.speed-panel {
+    position: absolute;
+    bottom: 80px;
+    right: 60px;
+    width: 200px;
+    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;
+    padding: 8px 0;
+}
+
+/* Quality Badge */
+.quality-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 6px;
+    background: var(--plex-primary);
+    border-radius: 3px;
+    font-size: 10px;
+    font-weight: 700;
+    color: #000;
+    text-transform: uppercase;
+    margin-left: 8px;
+}
+
+/* Section Divider */
+.settings-divider {
+    height: 1px;
+    background: var(--plex-border);
+    margin: 8px 16px;
+}
+
+/* Settings Group Label */
+.settings-group-label {
+    padding: 8px 16px 4px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--plex-text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+/* Responsive Settings */
+@media (max-width: 768px) {
+    .settings-panel {
+        position: fixed;
+        top: auto;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        max-height: 60vh;
+        border-radius: var(--plex-radius-lg) var(--plex-radius-lg) 0 0;
+        transform-origin: bottom center;
+    }
+    
+    .subtitles-settings-panel {
+        position: fixed;
+        top: auto;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        max-height: 70vh;
+        border-radius: var(--plex-radius-lg) var(--plex-radius-lg) 0 0;
+    }
+    
+    .settings-item {
+        padding: 14px 20px;
+    }
+    
+    .settings-option {
+        padding: 14px 20px;
+    }
+}
+
+@media (max-width: 480px) {
+    .settings-content {
+        max-height: 50vh;
+    }
+    
+    .subtitle-setting-item {
+        flex-wrap: wrap;
+    }
+    
+    .subtitle-setting-item label {
+        flex: 0 0 100%;
+        margin-bottom: 8px;
+    }
+    
+    .subtitle-setting-item input[type="range"] {
+        flex: 1;
+    }
+}
+
+/* Animation for panel open/close */
+.settings-panel.closing {
+    animation: settingsClose 0.15s ease forwards;
+}
+
+@keyframes settingsClose {
+    from {
+        opacity: 1;
+        transform: scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+}
+
+/* Keyboard Shortcut Hints */
+.shortcut-hint {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 24px;
+    height: 24px;
+    padding: 0 6px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid var(--plex-border);
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--plex-text-secondary);
+    margin-left: auto;
+}
+
+/* Audio Track Indicator */
+.audio-track-indicator {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 12px;
+    color: var(--plex-text-secondary);
+}
+
+.audio-track-indicator .material-icons {
+    font-size: 16px;
+}
+
+/*# sourceMappingURL=plex-player.css.map */