:root {

  --primary-color: #c41e3a;

  --secondary-color: #1a1a2e;

  --accent-color: #ffd700;

  --text-light: #ffffff;

  --text-dark: #333333;

  --bg-light: #f5f5f5;

  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);



  /* Light mode (default) */

  --bg-primary: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

  --bg-secondary: rgba(255, 255, 255, 0.95);

  --bg-card: #ffffff;

  --text-primary: #333333;

  --text-secondary: #666666;

  --border-color: #e0e0e0;

  --input-bg: #ffffff;

  --input-border: #ddd;

}



/* Dark mode */

[data-theme="dark"] {

  --bg-primary: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);

  --bg-secondary: rgba(26, 26, 46, 0.95);

  --bg-card: #1e1e2e;

  --text-primary: #e0e0e0;

  --text-secondary: #a0a0a0;

  --border-color: #333;

  --input-bg: #2a2a3e;

  --input-border: #444;

  --shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



body {

  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  background: var(--bg-primary);

  color: var(--text-primary);

  line-height: 1.6;

  min-height: 100vh;

  transition: background 0.3s ease, color 0.3s ease;

}



.container {

  max-width: 1400px;

  margin: 0 auto;

  padding: 20px;

}



/* Header */

header {

  background: var(--bg-secondary);

  backdrop-filter: blur(10px);

  padding: 1.5rem 0;

  box-shadow: var(--shadow-lg);

  position: sticky;

  top: 0;

  z-index: 1000;

  transition: background 0.3s ease;

}



.header-content {

  display: flex;

  justify-content: space-between;

  align-items: center;

  flex-wrap: wrap;

  gap: 1rem;

}



h1 {

  color: var(--accent-color);

  font-size: 2.5rem;

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

  margin: 0;

}



.subtitle {

  color: var(--text-secondary);

  font-size: 1.1rem;

  opacity: 0.9;

  margin-top: 0.5rem;

}



/* Navigation */

.nav-controls {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 0.6rem;

}



.lang-selector {

  display: flex;

  gap: 0.4rem;

}



.lang-btn {

  background: rgba(196, 30, 58, 0.15);

  color: var(--text-light);

  border: 1px solid rgba(255,255,255,0.2);

  padding: 0.3rem 0.8rem;

  border-radius: 6px;

  cursor: pointer;

  font-size: 0.85rem;

  font-weight: 600;

  transition: all 0.2s ease;

}



.lang-btn:hover,

.lang-btn.active {

  background: var(--primary-color);

  border-color: var(--primary-color);

  transform: translateY(-1px);

  box-shadow: var(--shadow);

}



.nav-menu {

  display: flex;

  gap: 1rem;

  list-style: none;

  flex-wrap: wrap;

}



.nav-menu li a {

  color: var(--text-light);

  text-decoration: none;

  padding: 0.6rem 1.2rem;

  border-radius: 8px;

  background: rgba(196, 30, 58, 0.2);

  transition: all 0.3s ease;

  display: inline-block;

  font-weight: 500;

}



.nav-menu li a:hover,

.nav-menu li a.active {

  background: var(--primary-color);

  transform: translateY(-2px);

  box-shadow: var(--shadow);

}



/* Video Section */

#video-section {

  display: grid;

  grid-template-columns: 1fr 400px;

  gap: 2rem;

  margin-top: 2rem;

  background: var(--bg-card);

  border-radius: 15px;

  padding: 2rem;

  box-shadow: var(--shadow-lg);

  transition: background 0.3s ease;

}



#video-win {

  position: relative;

}



#video-container {

  position: relative;

  padding-bottom: 56.25%; /* 16:9 aspect ratio */

  height: 0;

  overflow: hidden;

  border-radius: 10px;

  box-shadow: var(--shadow);

  background: #000;

}



#video-container video,

#video-container iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border: none;

}



.video-controls {

  display: flex;

  gap: 1rem;

  margin-top: 1.5rem;

  flex-wrap: wrap;

}



.btn {

  padding: 0.8rem 1.5rem;

  border: none;

  border-radius: 8px;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.3s ease;

  font-size: 1rem;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

}



.btn-primary,

.btn-secondary {

  background: rgba(196, 30, 58, 0.15);

  color: var(--text-light);

  border: 1px solid rgba(255,255,255,0.2);

}



.btn-primary:hover,

.btn-secondary:hover {

  background: rgba(196, 30, 58, 0.35);

  transform: translateY(-2px);

  box-shadow: var(--shadow);

}



.btn.active {

  background: var(--primary-color);

  border-color: var(--primary-color);

  transform: translateY(-1px);

  box-shadow: var(--shadow);

  cursor: default;

}



.btn.active:hover {

  background: var(--primary-color);

  transform: translateY(-1px);

}



/* Sidebar */

#video-menu {

  background: var(--input-bg);

  border-radius: 10px;

  padding: 1.5rem;

  transition: background 0.3s ease;

  border: 1px solid var(--border-color);

  max-height: 700px;

  overflow-y: auto;

  scroll-behavior: smooth;

  position: relative;

}



#video-menu h2 {

  color: var(--secondary-color);

  margin-bottom: 1rem;

  padding-bottom: 0.5rem;

  border-bottom: 3px solid var(--primary-color);

}



/* Resources Section */

.resources {

  background: rgba(196, 30, 58, 0.05);

  border-radius: 10px;

  padding: 1.5rem;

  margin-top: 1.5rem;

  border: 2px solid rgba(196, 30, 58, 0.2);

}



.resources h3 {

  color: var(--primary-color);

  margin-bottom: 1rem;

  font-size: 1.2rem;

  font-weight: 600;

}



.pdf-links {

  list-style: none;

  padding: 0;

}



.pdf-links li {

  margin-bottom: 0.8rem;

}



.pdf-links a {

  color: var(--text-primary);

  text-decoration: none;

  display: flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.8rem;

  border-radius: 5px;

  transition: all 0.3s ease;

  font-size: 0.95rem;

  font-weight: 500;

  background: var(--bg-card);

  border: 1px solid rgba(196, 30, 58, 0.2);

}



.pdf-links a:hover {

  background: var(--primary-color);

  color: white;

  transform: translateX(5px);

  border-color: var(--primary-color);

  box-shadow: var(--shadow);

}



.pdf-links a::before {

  content: "📄";

  font-size: 1.2rem;

}



/* Video Index */

#video-index {

  margin-top: 1.5rem;

}



#video-index h3 {

  color: var(--primary-color);

  margin: 1.5rem 0 0.8rem 0;

  font-size: 1.1rem;

  padding: 0.5rem;

  background: rgba(196, 30, 58, 0.1);

  border-left: 4px solid var(--primary-color);

  border-radius: 4px;

}



#video-index h3 a {

  color: var(--primary-color);

  text-decoration: none;

  transition: color 0.3s ease;

}



#video-index h3 a:hover {

  color: #a01729;

}



#video-index a {

  color: var(--text-primary);

  text-decoration: none;

  display: block;

  padding: 0.6rem;

  margin: 0.3rem 0;

  border-radius: 5px;

  transition: all 0.3s ease;

  font-size: 0.95rem;

  border-left: 3px solid transparent;

}



#video-index a:hover {

  background: rgba(196, 30, 58, 0.05);

  border-left-color: var(--primary-color);

  transform: translateX(5px);

}



/* Active timestamp highlighting */

#video-index a.active-timestamp {

  background: var(--primary-color) !important;

  color: white !important;

  font-weight: bold !important;

  border-left-color: var(--accent-color) !important;

  border-left-width: 5px;

  transform: translateX(8px);

  box-shadow: 0 4px 12px rgba(196, 30, 58, 0.3);

}



#video-index h3 a.active-timestamp {

  background: var(--primary-color) !important;

  color: white !important;

  padding: 0.5rem;

  border-radius: 4px;

}



#video-index .timestamp {

  color: var(--primary-color);

  font-weight: 600;

  margin-right: 0.5rem;

}



/* Scrollbar Styling */

#video-menu::-webkit-scrollbar,

#video-index::-webkit-scrollbar {

  width: 8px;

}



#video-menu::-webkit-scrollbar-track,

#video-index::-webkit-scrollbar-track {

  background: rgba(0, 0, 0, 0.1);

  border-radius: 10px;

}



#video-menu::-webkit-scrollbar-thumb,

#video-index::-webkit-scrollbar-thumb {

  background: var(--primary-color);

  border-radius: 10px;

}



#video-menu::-webkit-scrollbar-thumb:hover,

#video-index::-webkit-scrollbar-thumb:hover {

  background: #a01729;

}



/* Footer */

footer {

  text-align: center;

  padding: 2rem 0;

  color: var(--text-light);

  margin-top: 3rem;

  opacity: 0.8;

}



/* Responsive Design */

@media (max-width: 1024px) {

  #video-section {

    grid-template-columns: 1fr;

  }



  #video-menu {

    max-height: 500px;

  }



  h1 {

    font-size: 2rem;

  }

}



@media (max-width: 768px) {

  .header-content {

    flex-direction: column;

    align-items: flex-start;

  }



  .nav-menu {

    width: 100%;

  }



  .nav-menu li a {

    display: block;

    text-align: center;

  }



  h1 {

    font-size: 1.8rem;

  }



  #video-section {

    padding: 1rem;

  }



  .video-controls {

    flex-direction: column;

  }



  .btn {

    width: 100%;

    justify-content: center;

  }

}



/* Loading Animation */

.loading {

  display: inline-block;

  width: 20px;

  height: 20px;

  border: 3px solid rgba(255, 255, 255, 0.3);

  border-radius: 50%;

  border-top-color: var(--text-light);

  animation: spin 1s ease-in-out infinite;

}



@keyframes spin {

  to { transform: rotate(360deg); }

}



/* Theme Toggle Button */

.theme-toggle {

  background: rgba(196, 30, 58, 0.2);

  border: 2px solid var(--primary-color);

  color: var(--text-light);

  padding: 0.6rem 1.2rem;

  border-radius: 8px;

  cursor: pointer;

  transition: all 0.3s ease;

  font-size: 1.2rem;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

}



.theme-toggle:hover {

  background: var(--primary-color);

  transform: translateY(-2px);

  box-shadow: var(--shadow);

}



/* Search Box */

.search-container {

  margin: 1rem 0;

  position: relative;

}



.search-box {

  width: 100%;

  padding: 0.8rem 1rem;

  border: 2px solid var(--border-color);

  border-radius: 8px;

  background: var(--input-bg);

  color: var(--text-primary);

  font-size: 0.95rem;

  transition: all 0.3s ease;

}



.search-box:focus {

  outline: none;

  border-color: var(--primary-color);

  box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);

}



.search-box::placeholder {

  color: var(--text-secondary);

}



.search-clear {

  position: absolute;

  right: 10px;

  top: 50%;

  transform: translateY(-50%);

  background: none;

  border: none;

  color: var(--text-secondary);

  font-size: 1.2rem;

  cursor: pointer;

  padding: 0.3rem;

  border-radius: 50%;

  transition: all 0.3s ease;

}



.search-clear:hover {

  background: rgba(196, 30, 58, 0.1);

  color: var(--primary-color);

}



/* Playback Speed Controls */

.speed-controls {

  display: flex;

  gap: 0.5rem;

  align-items: center;

  flex-wrap: wrap;

  margin-top: 1rem;

}



.speed-label {

  font-size: 0.9rem;

  color: var(--text-primary);

  font-weight: 600;

  margin-left: 0.5rem;

}



.seek-btn {

  border-color: var(--accent-color);

  color: var(--accent-color);

}



.speed-btn {

  padding: 0.5rem 0.8rem;

  background: var(--input-bg);

  color: var(--text-primary);

  border: 2px solid var(--border-color);

  border-radius: 6px;

  cursor: pointer;

  transition: all 0.3s ease;

  font-size: 0.85rem;

  font-weight: 600;

}



.speed-btn:hover {

  border-color: var(--primary-color);

  background: rgba(196, 30, 58, 0.1);

}



.speed-btn.active {

  background: var(--primary-color);

  color: white;

  border-color: var(--primary-color);

}



/* Picture-in-Picture Button */

.pip-btn {

  padding: 0.8rem 1.5rem;

  background: #16213e;

  color: var(--text-light);

  border: none;

  border-radius: 8px;

  cursor: pointer;

  transition: all 0.3s ease;

  font-size: 1rem;

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

}



.pip-btn:hover {

  background: #0f0f1e;

  transform: translateY(-2px);

  box-shadow: var(--shadow);

}



.pip-btn:disabled {

  background: #666;

  cursor: not-allowed;

  opacity: 0.5;

}



/* Search Results Highlight */

.search-highlight {

  background: rgba(255, 215, 0, 0.3);

  padding: 0.2rem 0.4rem;

  border-radius: 3px;

}



/* Hidden elements */

.hidden {

  display: none !important;

}



/* Extra controls container */

.extra-controls {

  display: flex;

  gap: 1rem;

  align-items: center;

  flex-wrap: wrap;

  margin-top: 1rem;

  padding-top: 1rem;

  border-top: 1px solid var(--border-color);

}



/* Status Messages */

.status-message {

  padding: 1rem;

  border-radius: 8px;

  margin-top: 1rem;

  animation: slideIn 0.3s ease;

}



.status-message.info {

  background: rgba(33, 150, 243, 0.1);

  border-left: 4px solid #2196F3;

  color: #2196F3;

}



.status-message.success {

  background: rgba(76, 175, 80, 0.1);

  border-left: 4px solid #4CAF50;

  color: #4CAF50;

}



@keyframes slideIn {

  from {

    opacity: 0;

    transform: translateY(-10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}