diff --git a/src/pages/broadcasts/index.css b/src/pages/broadcasts/index.css
index a320cbaa..f1eb89be 100644
--- a/src/pages/broadcasts/index.css
+++ b/src/pages/broadcasts/index.css
@@ -221,12 +221,43 @@ h1 {
 .details-card {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 2rem;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
-  border-radius: 12px;
-  background: var(--ifm-background-surface-color);
+  padding: 3rem;
+  box-shadow: 
+    0 10px 30px rgba(0, 0, 0, 0.1),
+    0 4px 12px rgba(0, 0, 0, 0.05);
+  border-radius: 24px;
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
   width: 100%;
   box-sizing: border-box;
+  border: 1px solid rgba(226, 232, 240, 0.6);
+  position: relative;
+  backdrop-filter: blur(10px);
+}
+
+.details-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.03) 0%, transparent 40%),
+              radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.02) 0%, transparent 45%);
+  border-radius: 24px;
+  z-index: -1;
+}
+
+[data-theme='dark'] .details-card {
+  background: linear-gradient(145deg, var(--dark-card-bg) 0%, #0c1117 100%);
+  border-color: var(--dark-border);
+  box-shadow: 
+    0 10px 30px rgba(0, 0, 0, 0.3),
+    0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme='dark'] .details-card::before {
+  background: radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.06) 0%, transparent 40%),
+              radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.04) 0%, transparent 45%);
 }
 
 .video-container {
@@ -522,3 +553,11 @@ h1 {
 .pagination span {
   font-weight: bold;
 }
+.video-info .video-title {
+  color: #333 !important;
+  font-weight: 600;
+}
+
+[data-theme='dark'] .video-info .video-title {
+  color: #fff !important;
+}
\ No newline at end of file
diff --git a/src/pages/broadcasts/index.tsx b/src/pages/broadcasts/index.tsx
index d4781b8b..64081507 100644
--- a/src/pages/broadcasts/index.tsx
+++ b/src/pages/broadcasts/index.tsx
@@ -155,7 +155,7 @@ const VideoCard: React.FC<{
     >
       <div className="video-content">
         <div className="video-info">
-          <div className="video-title">{title}</div>
+          <div className="video-title"style={{ color: '#333', fontWeight: '600' }}>{title}</div>
           <div className="video-type">
             
           </div>
@@ -167,6 +167,7 @@ const VideoCard: React.FC<{
                 src={thumbnailUrl}
                 alt={title}
                 className="thumbnail-img"
+                style={{ objectFit: 'cover' }}
                 loading="lazy"
                 onError={(e) => {
                   const img = e.target as HTMLImageElement;
diff --git a/src/pages/broadcasts/video.css b/src/pages/broadcasts/video.css
index 78209cb8..17d05db6 100644
--- a/src/pages/broadcasts/video.css
+++ b/src/pages/broadcasts/video.css
@@ -1,14 +1,55 @@
 .video-container {
   max-width: 1400px;
   margin: 0 auto;
-  padding: 2rem 5rem;
+  padding: 4rem 2rem;
   background: transparent;
+  position: relative;
+}
+
+.video-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.05) 0%, transparent 40%),
+              radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.04) 0%, transparent 45%);
+  pointer-events: none;
+  z-index: -1;
+}
+
+[data-theme='dark'] .video-container::before {
+  background: radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.08) 0%, transparent 40%),
+              radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.06) 0%, transparent 45%);
+}
+
+/* Header and title styling */
+.video-container h1 {
+  text-align: center;
+  font-size: 3.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
+  position: relative;
+}
+
+[data-theme='dark'] .video-container h1 {
+  background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
 }
 
 .video-subtitle {
   color: var(--ifm-color-emphasis-600);
-  font-size: 1.25rem;
-  margin: 1rem auto 3rem;
+  font-size: 1.35rem;
+  margin: 1rem auto 4rem;
   text-align: center;
   max-width: 800px;
   line-height: 1.6;
@@ -20,64 +61,111 @@
 }
 
 .video-section {
-  margin-bottom: 4rem;
+  margin-bottom: 5rem;
   position: relative;
 }
 
 .video-section h2 {
-  font-size: 1.8rem;
-  margin-bottom: 2rem;
+  font-size: 2.2rem;
+  margin-bottom: 2.5rem;
   color: var(--ifm-color-primary);
-  padding-bottom: 0.75rem;
+  padding-bottom: 1rem;
   position: relative;
-  font-weight: 600;
+  font-weight: 700;
+  text-align: center;
+  background: linear-gradient(135deg, var(--ifm-color-primary) 0%, var(--ifm-color-primary-light) 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: transparent;
 }
 
 .video-section h2::after {
   content: '';
   position: absolute;
   bottom: 0;
-  left: 0;
-  width: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 80px;
   height: 4px;
-  background: var(--ifm-color-primary);
+  background: linear-gradient(135deg, var(--ifm-color-primary) 0%, var(--ifm-color-primary-light) 100%);
   border-radius: 2px;
 }
 
 .video-grid {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 2rem;
-  margin-top: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 2.5rem;
+  margin-top: 2rem;
+  padding: 0 1rem;
 }
 
 .video-card {
-  background: #ffffff;
-  border-radius: 20px;
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+  border-radius: 24px;
   overflow: hidden;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
+  box-shadow: 
+    0 4px 20px rgba(0, 0, 0, 0.08),
+    0 1px 3px rgba(0, 0, 0, 0.1);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   height: 100%;
   cursor: pointer;
   padding: 1.5rem;
-  border: 1px solid #e9ecef;
+  border: 1px solid rgba(226, 232, 240, 0.8);
   position: relative;
   isolation: isolate;
+  backdrop-filter: blur(10px);
+}
+
+.video-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, 
+    rgba(99, 102, 241, 0.02) 0%, 
+    rgba(168, 85, 247, 0.02) 50%, 
+    rgba(59, 130, 246, 0.02) 100%);
+  border-radius: 24px;
+  z-index: -1;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.video-card:hover::before {
+  opacity: 1;
 }
 
 [data-theme='dark'] .video-card {
-  background: var(--dark-card-bg);
+  background: linear-gradient(145deg, var(--dark-card-bg) 0%, #0c1117 100%);
   border-color: var(--dark-border);
-  box-shadow: var(--dark-shadow);
+  box-shadow: 
+    0 4px 20px rgba(0, 0, 0, 0.3),
+    0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme='dark'] .video-card::before {
+  background: linear-gradient(135deg, 
+    rgba(99, 102, 241, 0.08) 0%, 
+    rgba(168, 85, 247, 0.06) 50%, 
+    rgba(59, 130, 246, 0.08) 100%);
 }
 
 .video-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  transform: translateY(-8px) scale(1.02);
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.15),
+    0 8px 24px rgba(0, 0, 0, 0.1);
+  border-color: rgba(99, 102, 241, 0.3);
 }
 
 [data-theme='dark'] .video-card:hover {
-  box-shadow: var(--dark-shadow-lg);
+  box-shadow: 
+    0 20px 40px rgba(0, 0, 0, 0.4),
+    0 8px 24px rgba(0, 0, 0, 0.3);
+  border-color: rgba(99, 102, 241, 0.5);
 }
 
 .video-content {
@@ -87,101 +175,125 @@
 }
 
 .video-info {
-  padding: 1.25rem;
-  background: #ffffff;
-  border-radius: 16px;
-  margin-bottom: 1rem;
-  border: 1px solid #e9ecef;
+  padding: 1.5rem;
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+  border-radius: 20px;
+  margin-bottom: 1.5rem;
+  border: 1px solid rgba(226, 232, 240, 0.6);
+  backdrop-filter: blur(10px);
+  position: relative;
+}
+
+.video-info::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, 
+    rgba(99, 102, 241, 0.03) 0%, 
+    rgba(168, 85, 247, 0.02) 100%);
+  border-radius: 20px;
+  z-index: -1;
 }
 
 [data-theme='dark'] .video-info {
-  background: var(--dark-bg-secondary);
+  background: linear-gradient(145deg, var(--dark-bg-secondary) 0%, #0f1419 100%);
   border-color: var(--dark-border);
 }
 
+[data-theme='dark'] .video-info::before {
+  background: linear-gradient(135deg, 
+    rgba(99, 102, 241, 0.06) 0%, 
+    rgba(168, 85, 247, 0.04) 100%);
+}
+
 .video-title {
-  margin: 0 0 0.75rem 0;
-  font-size: 1.15rem;
-  color: var(--ifm-heading-color);
+  margin: 0 0 1rem 0;
+  font-size: 1.25rem;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
   line-height: 1.5;
-  font-weight: 600;
-  letter-spacing: -0.01em;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  background: linear-gradient(135deg, #333 0%, #666 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 [data-theme='dark'] .video-title {
-  color: var(--dark-text-primary);
+  background: linear-gradient(135deg, #fff 0%, #cbd5e1 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
 
 .video-type {
-  font-size: 0.9rem;
-  color: #6c757d; /* Neutral gray color */
+  font-size: 0.95rem;
+  color: #6c757d;
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  margin-top: 0.5rem;
+  margin-top: 0.75rem;
 }
 
 [data-theme='dark'] .video-type {
   color: var(--dark-text-secondary);
 }
 
-/* Force the video type tags to use neutral colors */
-.video-card .video-type span,
-.video-card .video-type {
-  background: #f8f9fa !important;
-  color: #495057 !important;
-}
-
-[data-theme='dark'] .video-card .video-type span,
-[data-theme='dark'] .video-card .video-type {
-  background: var(--dark-bg-tertiary) !important;
-  color: var(--dark-text-secondary) !important;
-}
-
 .video-type span {
   display: inline-flex;
   align-items: center;
-  padding: 0.35rem 0.75rem;
-  background: #f8f9fa !important; /* Force light gray background */
-  border-radius: 100px;
-  font-weight: 500;
-  color: #495057 !important; /* Force darker gray for text */
-  border: 1px solid #e9ecef !important; /* Force subtle border */
+  padding: 0.4rem 1rem;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  border-radius: 50px;
+  font-weight: 600;
+  color: #475569;
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  font-size: 0.85rem;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 }
 
-[data-theme='dark'] .video-type span {
-  background: var(--dark-bg-tertiary) !important;
-  color: var(--dark-text-secondary) !important;
-  border-color: var(--dark-border) !important;
+.video-type span:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
-/* Ensure the emoji and text inside the span are also not green */
-.video-type span *,
-.video-type span {
-  color: #495057 !important;
+[data-theme='dark'] .video-type span {
+  background: linear-gradient(135deg, var(--dark-bg-tertiary) 0%, #1e293b 100%);
+  color: var(--dark-text-secondary);
+  border-color: var(--dark-border);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
-[data-theme='dark'] .video-type span *,
-[data-theme='dark'] .video-type span {
-  color: var(--dark-text-secondary) !important;
+[data-theme='dark'] .video-type span:hover {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
 }
 
+/* Fixed thumbnail styling - removed black gap issue */
 .video-thumbnail {
   position: relative;
-  width: 600px;         /* Set desired width */
-  height: 380px;        /* Set desired height */
-  padding-top: 0;     
+  width: 100%;
+  height: 220px;
   overflow: hidden;
-  background: var(--ifm-color-emphasis-200);
   flex-grow: 1;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  background-image: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
+  border-radius: 16px;
+  transition: all 0.3s ease;
+  /* Removed background that was causing black gap */
+}
+
+[data-theme='dark'] .video-thumbnail {
+  /* Removed background gradient that was causing black gap in dark theme */
+}
+
+.video-card:hover .video-thumbnail {
+  transform: scale(1.02);
 }
 
 .thumbnail-container {
@@ -191,25 +303,31 @@
   width: 100%;
   height: 100%;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--ifm-color-emphasis-100);
-  border-radius: 12px;
+  align-items: stretch;
+  justify-content: stretch;
+  border-radius: 16px;
   overflow: hidden;
   transition: all 0.3s ease;
+  background: #f8fafc;
+}
+
+[data-theme='dark'] .thumbnail-container {
+  background: #1e293b;
 }
 
 .thumbnail-img {
-  width: 0%;
+  width: 100%;
   height: 100%;
   object-fit: cover;
-  transition: transform 0.3s ease;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   background: transparent;
   position: relative;
   z-index: 1;
+  border-radius: 16px;
+  /* Ensure image covers the entire container without gaps */
+  display: block;
 }
 
-/* Fallback for when image fails to load */
 .thumbnail-img[src=""] {
   opacity: 0;
 }
@@ -222,28 +340,44 @@
   width: 100%;
   height: 100%;
   color: var(--ifm-color-emphasis-600);
-  font-size: 0.9rem;
-  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
-  padding: 1rem;
+  font-size: 1rem;
+  background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
+  padding: 2rem;
   text-align: center;
+  border-radius: 16px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+[data-theme='dark'] .thumbnail-placeholder {
+  color: var(--dark-text-secondary);
+  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
 }
 
 .thumbnail-placeholder::before {
   content: '🎥';
-  font-size: 2rem;
-  margin-bottom: 0.5rem;
+  font-size: 3rem;
+  margin-bottom: 1rem;
   opacity: 0.7;
+  display: block;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.7; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.1); }
 }
 
 .thumbnail-placeholder span {
   max-width: 80%;
   word-break: break-word;
+  font-weight: 500;
+  letter-spacing: 0.01em;
 }
 
-/* Play button styles removed as per request */
-
-.video-card:hover .thumbnail-img {
-  transform: scale(5.02);
+.video-container .video-card:hover .thumbnail-container .thumbnail-img {
+  transform: scale(1.05);
 }
 
 .video-embed-large {
@@ -265,49 +399,105 @@
 .video-tabs {
   display: flex;
   justify-content: center;
-  gap: 1rem;
-  margin-bottom: 2rem;
+  gap: 1.5rem;
+  margin-bottom: 3rem;
+  padding: 0.5rem;
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.8) 0%, rgba(248, 250, 252, 0.8) 100%);
+  border-radius: 20px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(226, 232, 240, 0.6);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  max-width: 400px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 3rem;
+}
+
+[data-theme='dark'] .video-tabs {
+  background: linear-gradient(145deg, rgba(17, 24, 39, 0.8) 0%, rgba(15, 23, 42, 0.8) 100%);
+  border-color: var(--dark-border);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
 .tab-button {
-  padding: 0.875rem 2rem;
+  padding: 1rem 2rem;
   font-size: 1rem;
-  border: 1px solid var(--ifm-color-emphasis-300);
-  background: var(--ifm-background-surface-color);
+  border: none;
+  background: transparent;
   color: var(--ifm-color-emphasis-700);
-  border-radius: 100px;
+  border-radius: 16px;
   cursor: pointer;
-  transition: all 0.3s ease;
-  font-weight: 500;
-  margin: 0 0.5rem;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  font-weight: 600;
+  position: relative;
+  overflow: hidden;
+  min-width: 140px;
+}
+
+.tab-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  border-radius: 16px;
 }
 
 [data-theme='dark'] .tab-button {
-  background: var(--dark-bg-secondary);
   color: var(--dark-text-primary);
-  border-color: var(--dark-border);
-  box-shadow: var(--dark-shadow);
+}
+
+.tab-button:hover::before {
+  opacity: 1;
 }
 
 .tab-button:hover {
-  background: var(--ifm-color-primary-lighter);
-  color: var(--ifm-color-white);
+  transform: translateY(-2px);
+  color: var(--ifm-color-primary);
 }
 
 [data-theme='dark'] .tab-button:hover {
-  background: var(--dark-card-hover-bg);
+  color: #60a5fa;
 }
 
 .tab-button.active {
-  background: var(--ifm-color-primary);
-  color: var(--ifm-color-white);
+  background: linear-gradient(135deg, var(--ifm-color-primary) 0%, var(--ifm-color-primary-light) 100%);
+  color: white;
+  transform: translateY(-2px);
+  box-shadow: 
+    0 4px 12px rgba(46, 133, 85, 0.3),
+    0 2px 4px rgba(46, 133, 85, 0.2);
+}
+
+[data-theme='dark'] .tab-button.active {
+  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
+  box-shadow: 
+    0 4px 12px rgba(59, 130, 246, 0.3),
+    0 2px 4px rgba(59, 130, 246, 0.2);
+}
+
+.tab-button.active::before {
+  opacity: 0;
 }
 
 @media (max-width: 968px) {
   .video-grid {
     grid-template-columns: repeat(2, 1fr);
   }
+  
+  .video-tabs {
+    flex-direction: column;
+    gap: 0.5rem;
+    max-width: 300px;
+  }
+  
+  .tab-button {
+    min-width: 100%;
+  }
 }
 
 @media (max-width: 768px) {
@@ -316,10 +506,126 @@
   }
   
   .video-container {
-    padding: 1rem;
+    padding: 2rem 1rem;
+  }
+  
+  .video-container h1 {
+    font-size: 2.5rem;
   }
   
   .video-section h2 {
-    font-size: 1.5rem;
+    font-size: 1.8rem;
+  }
+  
+  .video-tabs {
+    max-width: 250px;
+  }
+  
+  .pagination {
+    flex-direction: column;
+    gap: 0.5rem;
   }
+  
+  .pagination button,
+  .pagination span {
+    min-width: 200px;
+  }
+}
+
+/* Enhanced pagination */
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 3rem;
+  padding: 2rem;
+}
+
+.pagination button {
+  padding: 0.75rem 1.5rem;
+  margin: 0;
+  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
+  color: var(--ifm-color-emphasis-700);
+  border: 1px solid rgba(226, 232, 240, 0.8);
+  border-radius: 12px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+  min-width: 120px;
+  position: relative;
+  overflow: hidden;
 }
+
+.pagination button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.pagination button:hover::before {
+  opacity: 1;
+}
+
+.pagination button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+}
+
+.pagination button:disabled {
+  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
+  color: var(--ifm-color-emphasis-400);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+  border-color: rgba(226, 232, 240, 0.5);
+}
+
+.pagination button:disabled::before {
+  opacity: 0;
+}
+
+.pagination span {
+  font-weight: 600;
+  color: var(--ifm-color-emphasis-700);
+  padding: 0.75rem 1rem;
+  background: linear-gradient(145deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
+  border-radius: 12px;
+  border: 1px solid rgba(99, 102, 241, 0.2);
+  min-width: 120px;
+  text-align: center;
+}
+
+[data-theme='dark'] .pagination button {
+  background: linear-gradient(145deg, var(--dark-bg-secondary) 0%, #0f172a 100%);
+  color: var(--dark-text-primary);
+  border-color: var(--dark-border);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme='dark'] .pagination button:hover {
+  border-color: #3b82f6;
+  color: #60a5fa;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+[data-theme='dark'] .pagination button:disabled {
+  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
+  color: var(--dark-text-muted);
+  border-color: var(--dark-border);
+}
+
+[data-theme='dark'] .pagination span {
+  color: var(--dark-text-primary);
+  background: linear-gradient(145deg, rgba(59, 130, 246, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
+  border-color: rgba(59, 130, 246, 0.3);
+}
\ No newline at end of file