Broadcast page UI Updates

 Enhanced UI for broadcast page with modern design and improved theme support

Author: Adez017

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 {