完善节目管理与回放播放体验

frontend/src/viewer/pages/viewer.css

@@ -219,6 +219,28 @@ button.stream-card:focus-visible {
   background: #1d1a16;
 }
 
+.watch-heading,
+.watch-options {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.watch-divider {
+  width: 1px;
+  height: 18px;
+  background: rgba(235, 229, 219, 0.1);
+}
+
+.watch-title {
+  color: #ebe5db;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.watch-quality { width: 100px; }
+.watch-line { width: 150px; }
+
 .watch-stage {
   flex: 1;
   display: flex;
@@ -227,6 +249,11 @@ button.stream-card:focus-visible {
   padding: 36px;
 }
 
+.watch-content {
+  width: 100%;
+  max-width: 1280px;
+}
+
 .watch-frame {
   position: relative;
   width: 100%;
@@ -239,6 +266,52 @@ button.stream-card:focus-visible {
   background: #080706;
 }
 
+.watch-video {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: contain;
+}
+
+.watch-waiting {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  background: rgba(10, 10, 8, 0.92);
+}
+
+.watch-waiting .ant-typography { color: #949088; font-size: 17px; }
+
+.watch-details {
+  margin-top: 24px;
+  padding: 24px;
+  border: 1px solid #3d3730;
+  border-radius: 8px;
+  background: #1d1a16;
+}
+
+.watch-details p { margin: 0 0 20px; color: #b7aea2; line-height: 1.7; }
+.watch-details h2 { margin: 0 0 12px; font-size: 16px; }
+.chapter-list { display: grid; gap: 8px; }
+.chapter-list button {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid #3d3730;
+  border-radius: 6px;
+  background: #24201b;
+  color: #eee7dc;
+  cursor: pointer;
+  text-align: left;
+}
+.chapter-list button:hover { border-color: #806d56; background: #2b261f; }
+.chapter-list time { color: #949088; font-variant-numeric: tabular-nums; }
+
 @media (max-width: 720px) {
   .watch-header {
     align-items: flex-start;
@@ -246,6 +319,27 @@ button.stream-card:focus-visible {
     padding: 14px 16px;
   }
 
+  .watch-heading,
+  .watch-options {
+    width: 100%;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .watch-title {
+    min-width: 0;
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .watch-options .ant-tag,
+  .watch-options .ant-typography { display: none; }
+
+  .watch-quality,
+  .watch-line { flex: 1; width: auto; min-width: 120px; }
+
   .watch-stage {
     align-items: flex-start;
     padding: 20px 0;
@@ -256,6 +350,11 @@ button.stream-card:focus-visible {
     border-left: 0;
     border-radius: 0;
   }
+
+  .watch-details {
+    margin: 16px;
+    padding: 18px;
+  }
 }
 
 @media (max-width: 900px) {