feat: refine video playground settings

apps/web/src/styles/playground.css

@@ -920,6 +920,19 @@
   font-weight: var(--font-weight-medium);
 }
 
+.mediaSettingsTitleRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.mediaSettingsTitleRow strong {
+  color: var(--primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+}
+
 .mediaAspectGrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, 44px);
@@ -1055,6 +1068,73 @@
   color: #06a6bd;
 }
 
+.mediaAudioSegment.ant-segmented {
+  width: 100%;
+  padding: 2px;
+  border-radius: var(--radius-md);
+  background: var(--muted);
+}
+
+.mediaAudioSegment .ant-segmented-item {
+  min-height: 34px;
+  color: var(--muted-foreground);
+  font-weight: var(--font-weight-semibold);
+}
+
+.mediaAudioSegment .ant-segmented-item-label {
+  min-height: 34px;
+  line-height: 34px;
+}
+
+.mediaAudioSegment .ant-segmented-item-selected {
+  background: var(--surface);
+  color: var(--primary);
+}
+
+.mediaAudioSegment .ant-segmented-item-disabled {
+  color: var(--muted-foreground);
+  opacity: 0.4;
+}
+
+.mediaDurationSlider.ant-slider {
+  margin: 8px 8px 18px;
+}
+
+.mediaDurationSlider .ant-slider-rail {
+  background: var(--border);
+}
+
+.mediaDurationSlider .ant-slider-track {
+  background: var(--primary);
+}
+
+.mediaDurationSlider .ant-slider-handle::after {
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 65%, transparent);
+}
+
+.mediaDurationSlider .ant-slider-handle:hover::after,
+.mediaDurationSlider .ant-slider-handle:focus::after {
+  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
+}
+
+.mediaDurationSlider .ant-slider-dot {
+  border-color: var(--border);
+  background: var(--surface);
+}
+
+.mediaDurationSlider .ant-slider-dot-active {
+  border-color: var(--primary);
+}
+
+.mediaDurationSlider .ant-slider-mark-text {
+  color: var(--muted-foreground);
+  font-size: var(--font-size-xs);
+}
+
+.mediaDurationSlider .ant-slider-mark-text-active {
+  color: var(--text-normal);
+}
+
 .mediaSizeRow {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) auto;