coursewatcher 1.3.1 → 2.0.0

package/public/css/styles.css

@@ -1,1375 +0,0 @@
-/**
- * CourseWatcher Styles
- * 
- * Modern dark theme with vibrant accents.
- */
-
-/* ==========================================
-   CSS Variables
-   ========================================== */
-
-:root {
-  /* Colors */
-  --color-bg: #0f0f1a;
-  --color-bg-secondary: #1a1a2e;
-  --color-bg-tertiary: #252540;
-  --color-surface: #2a2a45;
-  --color-surface-hover: #35355a;
-
-  --color-text: #e8e8f0;
-  --color-text-secondary: #a0a0b8;
-  --color-text-muted: #6b6b85;
-
-  --color-primary: #7c3aed;
-  --color-primary-hover: #8b5cf6;
-  --color-primary-glow: rgba(124, 58, 237, 0.3);
-
-  --color-success: #10b981;
-  --color-success-bg: rgba(16, 185, 129, 0.15);
-
-  --color-warning: #f59e0b;
-  --color-warning-bg: rgba(245, 158, 11, 0.15);
-
-  --color-error: #ef4444;
-
-  --color-border: #3a3a55;
-
-  /* Typography */
-  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-mono: 'Fira Code', 'Consolas', monospace;
-
-  /* Spacing */
-  --space-xs: 0.25rem;
-  --space-sm: 0.5rem;
-  --space-md: 1rem;
-  --space-lg: 1.5rem;
-  --space-xl: 2rem;
-  --space-2xl: 3rem;
-
-  /* Border Radius */
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-
-  /* Transitions */
-  --transition-fast: 150ms ease;
-  --transition-normal: 250ms ease;
-}
-
-/* ==========================================
-   Base Styles
-   ========================================== */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 16px;
-  scroll-behavior: smooth;
-}
-
-body {
-  font-family: var(--font-sans);
-  background: var(--color-bg);
-  color: var(--color-text);
-  line-height: 1.6;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-a {
-  color: var(--color-primary);
-  text-decoration: none;
-  transition: color var(--transition-fast);
-}
-
-a:hover {
-  color: var(--color-primary-hover);
-}
-
-/* ==========================================
-   Container
-   ========================================== */
-
-.container {
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: var(--space-lg);
-  flex: 1;
-}
-
-/* ==========================================
-   Header
-   ========================================== */
-
-.header {
-  background: var(--color-bg-secondary);
-  border-bottom: 1px solid var(--color-border);
-  padding: var(--space-md) var(--space-lg);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-  backdrop-filter: blur(10px);
-}
-
-.header-content {
-  max-width: 1200px;
-  margin: 0 auto;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-lg);
-}
-
-.logo {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  color: var(--color-text);
-  font-weight: 700;
-  font-size: 1.25rem;
-}
-
-.logo:hover {
-  color: var(--color-text);
-}
-
-.logo-icon {
-  font-size: 1.5rem;
-}
-
-.nav {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-}
-
-.search-form {
-  display: flex;
-  align-items: center;
-  background: var(--color-bg-tertiary);
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  transition: border-color var(--transition-fast);
-}
-
-.search-form:focus-within {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-glow);
-}
-
-.search-input {
-  background: transparent;
-  border: none;
-  padding: var(--space-sm) var(--space-md);
-  color: var(--color-text);
-  font-size: 0.9rem;
-  width: 200px;
-  outline: none;
-}
-
-.search-input::placeholder {
-  color: var(--color-text-muted);
-}
-
-.search-button {
-  background: transparent;
-  border: none;
-  padding: var(--space-sm) var(--space-md);
-  cursor: pointer;
-  font-size: 1rem;
-  opacity: 0.7;
-  transition: opacity var(--transition-fast);
-}
-
-.search-button:hover {
-  opacity: 1;
-}
-
-/* ==========================================
-   Footer
-   ========================================== */
-
-.footer {
-  background: var(--color-bg-secondary);
-  border-top: 1px solid var(--color-border);
-  padding: var(--space-lg);
-  text-align: center;
-  color: var(--color-text-muted);
-  font-size: 0.85rem;
-}
-
-/* ==========================================
-   Stats Section
-   ========================================== */
-
-.stats-section {
-  margin-bottom: var(--space-2xl);
-}
-
-.stats-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: var(--space-md);
-}
-
-.stat-card {
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
-  padding: var(--space-lg);
-  text-align: center;
-  border: 1px solid var(--color-border);
-  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
-}
-
-.stat-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-}
-
-.stat-card-highlight {
-  background: linear-gradient(135deg, var(--color-primary) 0%, #9333ea 100%);
-  border-color: transparent;
-}
-
-.stat-value {
-  display: block;
-  font-size: 2rem;
-  font-weight: 700;
-  margin-bottom: var(--space-xs);
-}
-
-.stat-label {
-  font-size: 0.85rem;
-  color: var(--color-text-secondary);
-}
-
-.stat-card-highlight .stat-label {
-  color: rgba(255, 255, 255, 0.8);
-}
-
-/* ==========================================
-   Modules Section
-   ========================================== */
-
-.section-title {
-  font-size: 1.5rem;
-  margin-bottom: var(--space-lg);
-  color: var(--color-text);
-}
-
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--space-md);
-  margin-bottom: var(--space-lg);
-}
-
-.section-header .section-title {
-  margin-bottom: 0;
-}
-
-.sort-controls {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-.sort-label {
-  color: var(--color-text-muted);
-  font-size: 0.85rem;
-}
-
-.sort-buttons {
-  display: flex;
-  gap: var(--space-xs);
-}
-
-.sort-btn {
-  padding: var(--space-xs) var(--space-sm);
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  color: var(--color-text-secondary);
-  font-size: 0.8rem;
-  transition: all var(--transition-fast);
-}
-
-.sort-btn:hover {
-  background: var(--color-bg-tertiary);
-  color: var(--color-text);
-}
-
-.sort-btn.active {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  color: white;
-}
-
-.modules-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-md);
-}
-
-.module-item {
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
-  overflow: hidden;
-}
-
-.module-header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-lg);
-  cursor: pointer;
-  user-select: none;
-  transition: background var(--transition-fast);
-}
-
-.module-header:hover {
-  background: var(--color-surface-hover);
-}
-
-.module-icon {
-  font-size: 1.25rem;
-}
-
-.module-name {
-  flex: 1;
-  font-weight: 600;
-}
-
-.module-count {
-  color: var(--color-text-muted);
-  font-size: 0.85rem;
-}
-
-.module-toggle {
-  transition: transform var(--transition-normal);
-}
-
-.module-item[open] .module-toggle {
-  transform: rotate(180deg);
-}
-
-.module-content {
-  padding: 0 var(--space-lg) var(--space-lg);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-}
-
-/* ==========================================
-   Video Card
-   ========================================== */
-
-.video-card {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-md);
-  background: var(--color-bg-secondary);
-  border-radius: var(--radius-md);
-  color: var(--color-text);
-  transition: all var(--transition-fast);
-  border: 1px solid transparent;
-}
-
-.video-card:hover {
-  background: var(--color-bg-tertiary);
-  border-color: var(--color-primary);
-  color: var(--color-text);
-  transform: translateX(4px);
-}
-
-.video-card-icon {
-  flex-shrink: 0;
-}
-
-.status-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  border-radius: 50%;
-  font-size: 0.85rem;
-}
-
-.status-icon.completed {
-  background: var(--color-success-bg);
-  color: var(--color-success);
-}
-
-.status-icon.in-progress {
-  background: var(--color-warning-bg);
-  color: var(--color-warning);
-}
-
-.status-icon.unwatched {
-  background: var(--color-bg-tertiary);
-  color: var(--color-text-muted);
-}
-
-.video-card-content {
-  flex: 1;
-  min-width: 0;
-}
-
-.video-card-title {
-  font-size: 0.95rem;
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.video-card-progress {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  margin-top: var(--space-xs);
-}
-
-.progress-bar {
-  flex: 1;
-  height: 4px;
-  background: var(--color-bg-tertiary);
-  border-radius: 2px;
-  overflow: hidden;
-}
-
-.progress-fill {
-  height: 100%;
-  background: var(--color-primary);
-  border-radius: 2px;
-  transition: width var(--transition-normal);
-}
-
-.progress-text {
-  font-size: 0.75rem;
-  color: var(--color-text-muted);
-  min-width: 35px;
-}
-
-.video-card-badge {
-  flex-shrink: 0;
-}
-
-/* ==========================================
-   Badges
-   ========================================== */
-
-.badge {
-  display: inline-block;
-  padding: var(--space-xs) var(--space-sm);
-  border-radius: var(--radius-sm);
-  font-size: 0.75rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.badge-success {
-  background: var(--color-success-bg);
-  color: var(--color-success);
-}
-
-.badge-warning {
-  background: var(--color-warning-bg);
-  color: var(--color-warning);
-}
-
-.badge-default {
-  background: var(--color-bg-tertiary);
-  color: var(--color-text-muted);
-}
-
-/* ==========================================
-   Video Player Page
-   ========================================== */
-
-.player-container {
-  max-width: 1600px;
-}
-
-.player-section {
-  margin-bottom: var(--space-xl);
-}
-
-.video-wrapper {
-  position: relative;
-  background: #000;
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
-}
-
-.video-player {
-  width: 100%;
-  display: block;
-  max-height: 70vh;
-}
-
-.player-nav {
-  display: flex;
-  justify-content: center;
-  gap: var(--space-md);
-  margin-top: var(--space-lg);
-}
-
-.nav-button {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--space-sm);
-  padding: var(--space-sm) var(--space-lg);
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  color: var(--color-text);
-  font-weight: 500;
-  transition: all var(--transition-fast);
-  border: 1px solid var(--color-border);
-}
-
-.nav-button:hover:not(.disabled) {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  color: white;
-}
-
-.nav-button.disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-/* ==========================================
-   Video Info Section
-   ========================================== */
-
-.video-info-section {
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
-  padding: var(--space-xl);
-  margin-bottom: var(--space-xl);
-  border: 1px solid var(--color-border);
-}
-
-.video-title {
-  font-size: 1.75rem;
-  margin-bottom: var(--space-lg);
-}
-
-.status-controls {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  margin-bottom: var(--space-lg);
-  flex-wrap: wrap;
-}
-
-.status-label {
-  color: var(--color-text-secondary);
-  font-weight: 500;
-}
-
-.status-buttons {
-  display: flex;
-  gap: var(--space-sm);
-  flex-wrap: wrap;
-}
-
-.status-btn {
-  padding: var(--space-sm) var(--space-md);
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  color: var(--color-text-secondary);
-  cursor: pointer;
-  font-size: 0.85rem;
-  transition: all var(--transition-fast);
-}
-
-.status-btn:hover {
-  background: var(--color-bg-tertiary);
-  color: var(--color-text);
-}
-
-.status-btn.active {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-  color: white;
-}
-
-/* ==========================================
-   Plyr Customization
-   ========================================== */
-
-:root {
-  --plyr-color-main: var(--color-primary);
-  --plyr-video-background: #000;
-  --plyr-menu-background: var(--color-surface);
-  --plyr-menu-color: var(--color-text);
-  --plyr-menu-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
-  --plyr-font-family: var(--font-sans);
-}
-
-.plyr--video {
-  border-radius: var(--radius-lg);
-  overflow: hidden;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
-}
-
-/* ==========================================
-   Notes Section
-   ========================================== */
-
-.notes-section {
-  background: var(--color-surface);
-  border-radius: var(--radius-lg);
-  padding: var(--space-xl);
-  border: 1px solid var(--color-border);
-}
-
-.notes-editor {
-  width: 100%;
-  min-height: 200px;
-  padding: var(--space-md);
-  background: var(--color-bg-secondary);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  color: var(--color-text);
-  font-family: var(--font-mono);
-  font-size: 0.9rem;
-  line-height: 1.6;
-  resize: vertical;
-  outline: none;
-  transition: border-color var(--transition-fast);
-}
-
-.notes-editor:focus {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-glow);
-}
-
-.notes-editor::placeholder {
-  color: var(--color-text-muted);
-}
-
-.notes-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  margin-top: var(--space-md);
-}
-
-.save-status {
-  font-size: 0.85rem;
-  color: var(--color-success);
-}
-
-/* ==========================================
-   Buttons
-   ========================================== */
-
-.btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--space-sm);
-  padding: var(--space-sm) var(--space-lg);
-  border: none;
-  border-radius: var(--radius-md);
-  font-size: 0.9rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all var(--transition-fast);
-}
-
-.btn-primary {
-  background: var(--color-primary);
-  color: white;
-}
-
-.btn-primary:hover {
-  background: var(--color-primary-hover);
-  transform: translateY(-1px);
-  box-shadow: 0 4px 15px var(--color-primary-glow);
-}
-
-/* ==========================================
-   Search Page
-   ========================================== */
-
-.page-title {
-  font-size: 1.75rem;
-  margin-bottom: var(--space-xl);
-}
-
-.search-form-large {
-  display: flex;
-  gap: var(--space-md);
-  margin-bottom: var(--space-lg);
-}
-
-.search-input-large {
-  flex: 1;
-  padding: var(--space-md) var(--space-lg);
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-md);
-  color: var(--color-text);
-  font-size: 1rem;
-  outline: none;
-  transition: border-color var(--transition-fast);
-}
-
-.search-input-large:focus {
-  border-color: var(--color-primary);
-  box-shadow: 0 0 0 3px var(--color-primary-glow);
-}
-
-.search-meta {
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-lg);
-}
-
-.search-results {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-}
-
-.search-result-card {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-lg);
-  background: var(--color-surface);
-  border-radius: var(--radius-md);
-  color: var(--color-text);
-  border: 1px solid var(--color-border);
-  transition: all var(--transition-fast);
-}
-
-.search-result-card:hover {
-  background: var(--color-surface-hover);
-  border-color: var(--color-primary);
-  transform: translateX(4px);
-}
-
-.result-content {
-  flex: 1;
-}
-
-.result-title {
-  font-size: 1rem;
-  font-weight: 500;
-  margin-bottom: var(--space-xs);
-}
-
-.result-module {
-  font-size: 0.85rem;
-  color: var(--color-text-muted);
-}
-
-/* ==========================================
-   Empty State
-   ========================================== */
-
-.empty-state {
-  text-align: center;
-  padding: var(--space-2xl);
-  color: var(--color-text-secondary);
-}
-
-.empty-hint {
-  color: var(--color-text-muted);
-  font-size: 0.9rem;
-  margin-top: var(--space-sm);
-}
-
-/* ==========================================
-   Error Page
-   ========================================== */
-
-.error-section {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 50vh;
-}
-
-.error-content {
-  text-align: center;
-}
-
-.error-code {
-  font-size: 6rem;
-  font-weight: 700;
-  line-height: 1;
-  background: linear-gradient(135deg, var(--color-primary) 0%, #9333ea 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-.error-message {
-  font-size: 1.25rem;
-  color: var(--color-text-secondary);
-  margin: var(--space-lg) 0 var(--space-xl);
-}
-
-/* ==========================================
-   Responsive
-   ========================================== */
-
-@media (max-width: 768px) {
-  .header-content {
-    flex-wrap: wrap;
-  }
-
-  .search-input {
-    width: 150px;
-  }
-
-  .stats-grid {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  .playback-controls {
-    flex-direction: column;
-    gap: var(--space-md);
-  }
-
-  .player-nav {
-    flex-wrap: wrap;
-  }
-
-  .nav-button {
-    flex: 1;
-    justify-content: center;
-    min-width: 120px;
-  }
-}
-
-/* ==========================================
-   Video Player Overlay Controls
-   ========================================== */
-
-.video-wrapper {
-  position: relative;
-  overflow: hidden;
-  /* Ensure controls don't spill out */
-  group: video-group;
-  /* For potential future container queries */
-  background: black;
-  /* Prevent white flashes */
-}
-
-.video-wrapper:hover .overlay-controls,
-.video-wrapper:focus-within .overlay-controls,
-.video-player.paused+.overlay-controls,
-.overlay-controls:hover {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.overlay-controls {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
-  padding: var(--space-md);
-  opacity: 0;
-  transition: opacity var(--transition-normal);
-  pointer-events: none;
-  /* Let clicks pass through when hidden */
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-sm);
-  z-index: 10;
-}
-
-.controls-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-md);
-}
-
-.control-group {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-}
-
-.control-group.right {
-  justify-content: flex-end;
-}
-
-/* Icon Buttons */
-.control-btn-icon {
-  background: transparent;
-  border: none;
-  color: white;
-  font-size: 1.2rem;
-  cursor: pointer;
-  padding: var(--space-xs);
-  border-radius: var(--radius-sm);
-  transition: all var(--transition-fast);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-}
-
-.control-btn-icon:hover {
-  background: rgba(255, 255, 255, 0.2);
-  transform: scale(1.1);
-}
-
-/* Text Buttons (Speed) */
-.control-btn-text {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  color: white;
-  font-size: 1rem;
-  cursor: pointer;
-  padding: 0 var(--space-sm);
-  border-radius: var(--radius-sm);
-  height: 24px;
-  transition: all var(--transition-fast);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.control-btn-text:hover {
-  background: var(--color-primary);
-  border-color: var(--color-primary);
-}
-
-/* Speed Control */
-.speed-control {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  background: rgba(0, 0, 0, 0.5);
-  padding: var(--space-xs) var(--space-sm);
-  border-radius: var(--radius-md);
-}
-
-.speed-value {
-  color: white;
-  font-weight: 600;
-  font-size: 0.9rem;
-  min-width: 40px;
-  text-align: center;
-}
-
-/* Time Display */
-.time-display {
-  color: white;
-  font-size: 0.9rem;
-  font-feature-settings: "tnum";
-  font-variant-numeric: tabular-nums;
-  margin-left: var(--space-sm);
-}
-
-/* Seek Bar */
-.seek-bar-container {
-  position: relative;
-  height: 6px;
-  width: 100%;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--space-xs);
-}
-
-.seek-bar-container:hover .seek-bar-bg {
-  height: 8px;
-}
-
-.seek-bar-bg {
-  background: rgba(255, 255, 255, 0.3);
-  height: 4px;
-  width: 100%;
-  border-radius: 2px;
-  transition: height var(--transition-fast);
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-}
-
-.seek-bar-fill {
-  background: var(--color-primary);
-  height: 100%;
-  width: 0%;
-  border-radius: 2px;
-}
-
-.seek-slider {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-  margin: 0;
-  z-index: 2;
-}
-
-/* Hide default controls on fullscreen if needed (we rely on custom ones now) */
-/* .video-player::-webkit-media-controls { display:none !important; } */
-
-/* ==========================================
-   Player Layout with Queue
-   ========================================== */
-
-.player-layout {
-  display: flex;
-  gap: var(--space-md);
-  /* Reduced gap */
-  align-items: flex-start;
-}
-
-.player-main {
-  flex: 1;
-  min-width: 0;
-}
-
-/* ==========================================
-   Queue Panel
-   ========================================== */
-
-.queue-panel {
-  width: 30%;
-  /* Slightly narrower width */
-  min-width: 300px;
-  max-width: 450px;
-  flex-shrink: 0;
-  background: var(--color-bg-secondary);
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--color-border);
-  overflow: hidden;
-  position: sticky;
-  top: 100px;
-  max-height: calc(100vh - 120px);
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-}
-
-.queue-header {
-  padding: var(--space-md) var(--space-lg);
-  border-bottom: 1px solid var(--color-border);
-  background: rgba(255, 255, 255, 0.03);
-}
-
-.queue-title {
-  font-size: 1rem;
-  font-weight: 600;
-  margin-bottom: 2px;
-  color: var(--color-text);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.queue-module-name {
-  font-size: 0.8rem;
-  color: var(--color-text-muted);
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.queue-list {
-  overflow-y: auto;
-  flex: 1;
-  padding: var(--space-sm);
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-border) transparent;
-}
-
-.queue-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.queue-list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.queue-list::-webkit-scrollbar-thumb {
-  background-color: var(--color-border);
-  border-radius: 3px;
-}
-
-.queue-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-md);
-  padding: var(--space-md);
-  /* More comfortable padding */
-  border-radius: var(--radius-md);
-  color: var(--color-text-secondary);
-  transition: all var(--transition-fast);
-  margin-bottom: 2px;
-  text-decoration: none;
-  border: 1px solid transparent;
-}
-
-.queue-item:hover {
-  background: var(--color-bg-tertiary);
-  color: var(--color-text);
-  transform: translateX(2px);
-}
-
-.queue-item.active {
-  background: var(--color-surface);
-  color: var(--color-primary);
-  border-color: var(--color-primary);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-
-.queue-item.active:hover {
-  background: var(--color-surface);
-  transform: none;
-}
-
-.queue-item-number {
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.8rem;
-  font-weight: 600;
-  background: rgba(255, 255, 255, 0.05);
-  border-radius: 50%;
-  /* Circle instead of square */
-  color: var(--color-text-muted);
-  transition: all var(--transition-fast);
-}
-
-.queue-item.active .queue-item-number {
-  background: var(--color-primary);
-  color: white;
-}
-
-.queue-item-content {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.queue-item-title {
-  font-size: 0.9rem;
-  font-weight: 500;
-  display: block;
-  /* Multi-line clamp instead of single line ellipsis for better readability */
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  line-height: 1.4;
-  color: inherit;
-}
-
-.queue-item.active .queue-item-title {
-  color: var(--color-text);
-  font-weight: 600;
-}
-
-.queue-item-meta {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  margin-top: 2px;
-}
-
-.queue-item-status {
-  font-size: 0.75rem;
-  display: flex;
-  align-items: center;
-}
-
-.queue-item-status.status-completed {
-  color: var(--color-success);
-}
-
-.queue-item-status.status-in-progress {
-  color: var(--color-warning);
-}
-
-.queue-item-status.status-unwatched {
-  color: var(--color-text-muted);
-}
-
-.queue-item.active .queue-item-status {
-  /* color: var(--color-primary); */
-}
-
-.queue-item-playing {
-  font-size: 0.65rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--color-primary);
-  background: rgba(124, 58, 237, 0.1);
-  padding: 2px 6px;
-  border-radius: 4px;
-}
-
-/* ==========================================
-   Autoplay Countdown Overlay
-   ========================================== */
-
-.autoplay-overlay {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.85);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 100;
-  backdrop-filter: blur(8px);
-}
-
-.autoplay-overlay.hidden {
-  display: none;
-}
-
-.autoplay-content {
-  text-align: center;
-  color: white;
-}
-
-.autoplay-countdown-ring {
-  position: relative;
-  width: 120px;
-  height: 120px;
-  margin: 0 auto var(--space-lg);
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-  transition: transform var(--transition-fast);
-}
-
-.autoplay-countdown-ring:hover {
-  transform: scale(1.05);
-}
-
-.autoplay-countdown-ring:hover .countdown-progress {
-  stroke: var(--color-primary-hover);
-}
-
-.autoplay-countdown-ring svg {
-  width: 100%;
-  height: 100%;
-  transform: rotate(-90deg);
-}
-
-.countdown-bg {
-  fill: none;
-  stroke: rgba(255, 255, 255, 0.2);
-  stroke-width: 6;
-}
-
-.countdown-progress {
-  fill: none;
-  stroke: var(--color-primary);
-  stroke-width: 6;
-  stroke-linecap: round;
-  stroke-dasharray: 283;
-  stroke-dashoffset: 0;
-  transition: stroke-dashoffset 1s linear;
-}
-
-.countdown-number {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 2.5rem;
-  font-weight: 700;
-  color: white;
-  text-shadow: 0 0 20px rgba(124, 58, 237, 0.8), 0 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.autoplay-text {
-  font-size: 0.9rem;
-  color: var(--color-text-secondary);
-  margin-bottom: var(--space-xs);
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-
-.autoplay-next-title {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-bottom: var(--space-lg);
-  max-width: 400px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.autoplay-cancel {
-  background: rgba(255, 255, 255, 0.1);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  color: white;
-  padding: var(--space-sm) var(--space-xl);
-  font-size: 0.9rem;
-}
-
-.autoplay-cancel:hover {
-  background: rgba(255, 255, 255, 0.2);
-  border-color: rgba(255, 255, 255, 0.5);
-  transform: none;
-  box-shadow: none;
-}
-
-/* Responsive: Queue below player on smaller screens */
-@media (max-width: 1024px) {
-  .player-layout {
-    flex-direction: column;
-  }
-
-  .queue-panel {
-    width: 100%;
-    position: static;
-    max-height: 400px;
-  }
-}
-
-/* Fullscreen autoplay overlay */
-:fullscreen .autoplay-overlay,
-:-webkit-full-screen .autoplay-overlay,
-:-moz-full-screen .autoplay-overlay {
-  position: fixed;
-}