/* --- Root Variables for Theming (Default: Dark) --- */
          :root {
            --bg-color: #0f172a;
            /* slate-900 */
            --card-bg: rgba(30, 41, 59, 0.5);
            /* slate-800 with transparency (Glassmorphism) */
            --text-color: #e2e8f0;
            /* slate-200 */
            --primary-color: #22d3ee;
            /* cyan-400 */
            --secondary-color: #818cf8;
            /* indigo-400 */
            --secondary-text-color: #94a3b8;
            /* slate-400 */
            --border-color: rgba(51, 65, 85, 0.7);
            --success-color: #10b981;
            /* green-500 */
            --error-color: #ef4444;
            /* red-500 */
            --font-family: 'Cairo', sans-serif;
          }

          /* Light Theme */
          .light-theme {
            --bg-color: #f1f5f9;
            /* slate-100 */
            --card-bg: rgba(255, 255, 255, 0.8);
            --text-color: #1e293b;
            /* slate-800 */
            --primary-color: #06b6d4;
            /* cyan-600 */
            --border-color: rgba(203, 213, 225, 0.8);
          }

          /* Purple Theme */
          .purple-theme {
            --bg-color: #1e1b4b;
            /* indigo-950 */
            --card-bg: rgba(49, 46, 129, 0.5);
            /* indigo-900 with transparency */
            --text-color: #e0e7ff;
            /* indigo-100 */
            --primary-color: #c4b5fd;
            /* violet-300 */
            --border-color: rgba(129, 140, 248, 0.4);
          }

          /* Base Body and Glass Card Styles */
          body {
            font-family: "Cairo", sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            transition: all 0.5s ease;
          }

          .glass-card {
            background-color: var(--card-bg);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-color);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
          }

          .glass-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
          }

          /* Custom Scrollbar */
          #lecture-view-content::-webkit-scrollbar {
            width: 8px;
          }

          #lecture-view-content::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
          }

          #lecture-view-content::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 4px;
          }

          #lecture-view-content::-webkit-scrollbar-thumb:hover {
            background: #0d9488;
            /* A darker cyan/teal */
          }

          /* Custom Scrollbar for better dark mode experience */
          ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
          }

          ::-webkit-scrollbar-track {
            background: var(--bg-color);
          }

          ::-webkit-scrollbar-thumb {
            background: var(--primary-dark-color);
            border-radius: 10px;
          }

          ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-color);
          }

          /* Animated Gradient Text for Header */
          .animated-gradient-text {
            background: linear-gradient(90deg,
                var(--primary-color),
                var(--secondary-color),
                var(--primary-color));
            background-size: 200% 200%;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: gradient-flow 5s ease infinite;
          }

          @keyframes gradient-flow {
            0% {
              background-position: 0% 50%;
            }

            50% {
              background-position: 100% 50%;
            }

            100% {
              background-position: 0% 50%;
            }
          }

          /* General Animations */
          @keyframes fadeInUp {
            from {
              opacity: 0;
              transform: translateY(20px);
            }

            to {
              opacity: 1;
              transform: translateY(0);
            }
          }

          .animation-container {
            animation: fadeInUp 1s ease forwards;
          }

          /* Active navigation link */
          .nav-link.active {
            background-color: var(--primary-dark-color);
            color: var(--text-color);
            font-weight: 700;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
          }

          /* Hover effect for navigation links */
          .nav-link:hover {
            background-color: rgba(var(--primary-dark-color), 0.7);
          }

          /* Custom button styling for quiz/actions */
          .action-button {
            background-color: var(--primary-dark-color);
            color: var(--text-color);
            transition: background-color 0.3s, transform 0.3s;
          }

          .action-button:hover {
            background-color: var(--primary-color);
            transform: translateY(-2px);
          }

          /* Glassmorphism for inputs/textarea */
          .glass-input {
            background: rgba(30, 41, 59, 0.8);
            border: 1px solid var(--border-color);
            color: var(--text-color);
          }

          /* Adjust text alignment for Arabic */
          .text-rtl {
            text-align: right;
          }

          /* --- [تعديل] زر قائمة المحاضرات --- */
          .lecture-list-button {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            width: 100%;
            text-align: right;
            padding: 1.25rem;
            /* p-5 */
            border-radius: 0.75rem;
            /* rounded-xl */
            font-size: 1.125rem;
            /* text-lg */
            font-weight: 600;
            /* font-semibold */
            transition: all 0.2s ease;
          }

          .lecture-list-button:hover {
            transform: scale(1.01);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border-color: var(--primary-color);
          }

          .lecture-list-button .lecture-number {
            color: var(--primary-color);
            font-weight: 700;
            /* font-bold */
          }

          .lecture-list-button .lecture-title-text {
            color: var(--text-color);
          }