refactor(aigc): update carousel and video components

- rewrite template carousel from custom scroll to uni swiper
- add video loading, error, and replay states to result preview
- update template card styles and video/poster handling logic
- clean up unused CSS vars and remove unnecessary min-height on detail page
- fix video file regex and add video error recovery

src/pages-aigc/home/components/TemplateCard/styles/index.scss

@@ -6,24 +6,30 @@
   overflow: hidden;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
   border-radius: var(--template-card-radius, 28px);
-  background: linear-gradient(180deg, #0f7069, #082226);
   color: #ffffff;
   text-align: left;
   box-shadow: 0 3px 8px rgba(24, 37, 50, 0.12);
-  transform: scale(0.96);
-  transform-origin: center;
-  transition: box-shadow 0.18s ease, transform 0.18s ease;
+  opacity: 0.82;
+  transition:
+    box-shadow 0.2s ease,
+    opacity 0.2s ease;
 }
 
 .template-card.is-active {
+  border-color: rgba(255, 255, 255, 0.34);
   box-shadow: 0 5px 12px rgba(24, 37, 50, 0.16);
-  transform: scale(1);
+  opacity: 1;
 }
 
 .template-card.is-postcard .template-copy {
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 34%),
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.06),
+      rgba(255, 255, 255, 0) 34%
+    ),
     linear-gradient(180deg, #0a4d46, #082226);
 }
 
@@ -46,6 +52,10 @@
   display: block;
 }
 
+.template-video {
+  pointer-events: none;
+}
+
 .template-media-shade {
   position: absolute;
   top: 0;
@@ -53,8 +63,18 @@
   bottom: 0;
   left: 0;
   background:
-    radial-gradient(92% 45% at 50% 28%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 62%),
-    linear-gradient(180deg, rgba(4, 22, 24, 0), rgba(4, 22, 24, 0.02) 58%, rgba(4, 22, 24, 0.24));
+    radial-gradient(
+      92% 45% at 50% 28%,
+      rgba(255, 255, 255, 0.08),
+      rgba(255, 255, 255, 0) 62%
+    ),
+    linear-gradient(
+      180deg,
+      rgba(4, 22, 24, 0),
+      rgba(4, 22, 24, 0.02) 58%,
+      rgba(4, 22, 24, 0.24)
+    );
+  pointer-events: none;
 }
 
 .template-copy {
@@ -66,7 +86,11 @@
   align-items: flex-start;
   padding: 15px 18px 14px;
   background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 34%),
+    linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0.06),
+      rgba(255, 255, 255, 0) 34%
+    ),
     linear-gradient(180deg, #0f7069, #092128);
   box-sizing: border-box;
 }