diff --git a/.playwright-cli/console-2026-08-12T09-46-41-534Z.log b/.playwright-cli/console-2026-08-12T09-46-41-534Z.log
new file mode 100644
index 0000000..48575ca
--- /dev/null
+++ b/.playwright-cli/console-2026-08-12T09-46-41-534Z.log
@@ -0,0 +1,48 @@
+[    1408ms] [WARNING] Alpine Expression Error: item is not defined
+
+Expression: "item.type === 'brand'"
+
+ JSHandle@node @ http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:406
+[    1568ms] ReferenceError: item is not defined
+    at [Alpine] item.type === 'brand' (eval at safeAsyncFunction (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:461:16), <anonymous>:3:32)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:480:23
+    at tryCatch (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:390:10)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:16
+    at reactiveEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1638:12)
+    at Object.effect2 [as effect] (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1618:21)
+    at effect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:56:32)
+    at wrappedEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:68:25)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:2
+    at Function.<anonymous> (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1160:54)
+[  326631ms] [WARNING] Alpine Expression Error: item is not defined
+
+Expression: "item.type === 'brand'"
+
+ JSHandle@node @ http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:406
+[  326939ms] ReferenceError: item is not defined
+    at [Alpine] item.type === 'brand' (eval at safeAsyncFunction (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:461:16), <anonymous>:3:32)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:480:23
+    at tryCatch (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:390:10)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:16
+    at reactiveEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1638:12)
+    at Object.effect2 [as effect] (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1618:21)
+    at effect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:56:32)
+    at wrappedEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:68:25)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:2
+    at Function.<anonymous> (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1160:54)
+[ 1014053ms] [WARNING] Alpine Expression Error: item is not defined
+
+Expression: "item.type === 'brand'"
+
+ JSHandle@node @ http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:406
+[ 1014218ms] ReferenceError: item is not defined
+    at [Alpine] item.type === 'brand' (eval at safeAsyncFunction (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:461:16), <anonymous>:3:32)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:480:23
+    at tryCatch (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:390:10)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:16
+    at reactiveEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1638:12)
+    at Object.effect2 [as effect] (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1618:21)
+    at effect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:56:32)
+    at wrappedEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:68:25)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:2
+    at Function.<anonymous> (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1160:54)
diff --git a/.playwright-cli/console-2026-08-12T10-04-12-030Z.log b/.playwright-cli/console-2026-08-12T10-04-12-030Z.log
new file mode 100644
index 0000000..a4eda77
--- /dev/null
+++ b/.playwright-cli/console-2026-08-12T10-04-12-030Z.log
@@ -0,0 +1,114 @@
+[    1918ms] [WARNING] Alpine Expression Error: item is not defined
+
+Expression: "item.type === 'brand'"
+
+ JSHandle@node @ http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:406
+[    2028ms] ReferenceError: item is not defined
+    at [Alpine] item.type === 'brand' (eval at safeAsyncFunction (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:461:16), <anonymous>:3:32)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:480:23
+    at tryCatch (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:390:10)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:16
+    at reactiveEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1638:12)
+    at Object.effect2 [as effect] (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1618:21)
+    at effect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:56:32)
+    at wrappedEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:68:25)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:2
+    at Function.<anonymous> (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1160:54)
+[   43780ms] [WARNING] Alpine Expression Error: item is not defined
+
+Expression: "item.type === 'brand'"
+
+ JSHandle@node @ http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:406
+[   43816ms] ReferenceError: item is not defined
+    at [Alpine] item.type === 'brand' (eval at safeAsyncFunction (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:461:16), <anonymous>:3:32)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:480:23
+    at tryCatch (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:390:10)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:16
+    at reactiveEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1638:12)
+    at Object.effect2 [as effect] (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1618:21)
+    at effect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:56:32)
+    at wrappedEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:68:25)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:2
+    at Function.<anonymous> (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1160:54)
+[   81770ms] [WARNING] Alpine Expression Error: item is not defined
+
+Expression: "item.type === 'brand'"
+
+ JSHandle@node @ http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:406
+[   81828ms] ReferenceError: item is not defined
+    at [Alpine] item.type === 'brand' (eval at safeAsyncFunction (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:461:16), <anonymous>:3:32)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:480:23
+    at tryCatch (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:390:10)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:16
+    at reactiveEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1638:12)
+    at Object.effect2 [as effect] (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1618:21)
+    at effect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:56:32)
+    at wrappedEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:68:25)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:2
+    at Function.<anonymous> (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1160:54)
+[  222554ms] [WARNING] Alpine Expression Error: item is not defined
+
+Expression: "item.type === 'brand'"
+
+ JSHandle@node @ http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:406
+[  222575ms] ReferenceError: item is not defined
+    at [Alpine] item.type === 'brand' (eval at safeAsyncFunction (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:461:16), <anonymous>:3:32)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:480:23
+    at tryCatch (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:390:10)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:16
+    at reactiveEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1638:12)
+    at Object.effect2 [as effect] (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1618:21)
+    at effect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:56:32)
+    at wrappedEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:68:25)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:2
+    at Function.<anonymous> (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1160:54)
+[  222581ms] [ERROR] Failed to load resource: the server responded with a status of 500 (Internal Server Error) @ https://seo.23cm.cn/api/public/articles?page=1&size=24&sort=newest&with_images=6:0
+[  262592ms] [WARNING] Alpine Expression Error: item is not defined
+
+Expression: "item.type === 'brand'"
+
+ JSHandle@node @ http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:406
+[  262623ms] ReferenceError: item is not defined
+    at [Alpine] item.type === 'brand' (eval at safeAsyncFunction (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:461:16), <anonymous>:3:32)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:480:23
+    at tryCatch (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:390:10)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:16
+    at reactiveEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1638:12)
+    at Object.effect2 [as effect] (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1618:21)
+    at effect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:56:32)
+    at wrappedEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:68:25)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:2
+    at Function.<anonymous> (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1160:54)
+[  267617ms] [ERROR] Failed to load resource: the server responded with a status of 500 (Internal Server Error) @ https://seo.23cm.cn/api/public/articles?page=1&size=24&sort=newest&with_images=6:0
+[  269500ms] [WARNING] Alpine Expression Error: item is not defined
+
+Expression: "item.type === 'brand'"
+
+ JSHandle@node @ http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:406
+[  269528ms] ReferenceError: item is not defined
+    at [Alpine] item.type === 'brand' (eval at safeAsyncFunction (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:461:16), <anonymous>:3:32)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:480:23
+    at tryCatch (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:390:10)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:16
+    at reactiveEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1638:12)
+    at Object.effect2 [as effect] (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1618:21)
+    at effect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:56:32)
+    at wrappedEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:68:25)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:2
+    at Function.<anonymous> (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1160:54)
+[  349414ms] [WARNING] Alpine Expression Error: item is not defined
+
+Expression: "item.type === 'brand'"
+
+ JSHandle@node @ http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:406
+[  349470ms] ReferenceError: item is not defined
+    at [Alpine] item.type === 'brand' (eval at safeAsyncFunction (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:461:16), <anonymous>:3:32)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:480:23
+    at tryCatch (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:390:10)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:16
+    at reactiveEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1638:12)
+    at Object.effect2 [as effect] (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1618:21)
+    at effect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:56:32)
+    at wrappedEffect (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:68:25)
+    at http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:2889:2
+    at Function.<anonymous> (http://localhost:4322/node_modules/.vite/deps/alpinejs.js?v=48bfe970:1160:54)
diff --git a/.playwright-cli/page-2026-08-12T09-46-05-967Z.yml b/.playwright-cli/page-2026-08-12T09-46-05-967Z.yml
new file mode 100644
index 0000000..e69de29
diff --git a/.playwright-cli/page-2026-08-12T09-46-43-269Z.yml b/.playwright-cli/page-2026-08-12T09-46-43-269Z.yml
new file mode 100644
index 0000000..8951be9
--- /dev/null
+++ b/.playwright-cli/page-2026-08-12T09-46-43-269Z.yml
@@ -0,0 +1,143 @@
+- generic [active] [ref=e1]:
+  - navigation [ref=e2]:
+    - generic [ref=e3]:
+      - link "Portfolio 2026" [ref=e4] [cursor=pointer]:
+        - /url: /portfolio
+        - text: Portfolio
+        - generic [ref=e5]: "2026"
+      - link "All Shows" [ref=e6] [cursor=pointer]:
+        - /url: /shows
+      - link "Latest Projects" [ref=e7] [cursor=pointer]:
+        - /url: /latest-projects
+      - link "About" [ref=e8] [cursor=pointer]:
+        - /url: /about
+      - link "Contact Us" [ref=e9] [cursor=pointer]:
+        - /url: /contact
+    - generic [ref=e10]:
+      - link "Login" [ref=e11] [cursor=pointer]:
+        - /url: /login
+      - link "Signup" [ref=e12] [cursor=pointer]:
+        - /url: /register
+  - generic [ref=e14]:
+    - banner [ref=e15]:
+      - generic [ref=e16]:
+        - generic [ref=e17]: Runway Archive · 2026 Edition
+        - heading "All Shows" [level=1] [ref=e18]
+    - generic [ref=e19]:
+      - complementary [ref=e20]:
+        - generic [ref=e21]:
+          - heading "REFINE" [level=2] [ref=e22]
+          - button "折叠/展开筛选" [ref=e23] [cursor=pointer]:
+            - img [ref=e24]
+        - generic [ref=e26]:
+          - generic [ref=e27]:
+            - generic [ref=e28] [cursor=pointer]:
+              - generic [ref=e29]: DESIGNERS
+              - generic [ref=e30]:
+                - generic [ref=e31]: "0"
+                - img [ref=e33]
+            - generic [ref=e35]:
+              - textbox "Search designer…" [ref=e36]
+              - list [ref=e37]:
+                - listitem [ref=e38] [cursor=pointer]
+              - generic [ref=e39] [cursor=pointer]: Show all 198 designers ▾
+          - generic [ref=e40]:
+            - generic [ref=e41] [cursor=pointer]:
+              - generic [ref=e42]: COLLECTION
+              - img [ref=e44]
+            - list [ref=e47]:
+              - listitem [ref=e48] [cursor=pointer]:
+                - generic [ref=e49]:
+                  - checkbox "Ready-to-Wear" [ref=e50]
+                  - generic [ref=e51]: Ready-to-Wear
+              - listitem [ref=e52] [cursor=pointer]:
+                - generic [ref=e53]:
+                  - checkbox "Menswear" [ref=e54]
+                  - generic [ref=e55]: Menswear
+              - listitem [ref=e56] [cursor=pointer]:
+                - generic [ref=e57]:
+                  - checkbox "Couture" [ref=e58]
+                  - generic [ref=e59]: Couture
+              - listitem [ref=e60] [cursor=pointer]:
+                - generic [ref=e61]:
+                  - checkbox "Resort" [ref=e62]
+                  - generic [ref=e63]: Resort
+              - listitem [ref=e64] [cursor=pointer]:
+                - generic [ref=e65]:
+                  - checkbox "Pre-Fall" [ref=e66]
+                  - generic [ref=e67]: Pre-Fall
+          - generic [ref=e68]:
+            - generic [ref=e69] [cursor=pointer]:
+              - generic [ref=e70]: SEASON
+              - img [ref=e72]
+            - list [ref=e75]:
+              - listitem [ref=e76] [cursor=pointer]:
+                - generic [ref=e77]:
+                  - checkbox "Spring / Summer" [ref=e78]
+                  - generic [ref=e79]: Spring / Summer
+              - listitem [ref=e80] [cursor=pointer]:
+                - generic [ref=e81]:
+                  - checkbox "Fall / Winter" [ref=e82]
+                  - generic [ref=e83]: Fall / Winter
+          - generic [ref=e84]:
+            - generic [ref=e85] [cursor=pointer]:
+              - generic [ref=e86]: YEAR
+              - img [ref=e88]
+            - list [ref=e91]:
+              - listitem [ref=e92] [cursor=pointer]:
+                - generic [ref=e93]:
+                  - checkbox "2027" [ref=e94]
+                  - generic [ref=e95]: "2027"
+          - button "Clear all ×" [ref=e96] [cursor=pointer]
+      - main [ref=e97]
+  - contentinfo [ref=e291]:
+    - generic [ref=e292]:
+      - generic [ref=e293]:
+        - generic [ref=e294]:
+          - generic [ref=e295]: Portfolio Studio
+          - generic [ref=e296]: 2026 Edition
+        - paragraph [ref=e297]: Minimalist editorial portfolio documenting haute couture shows, backstage fittings, and street culture. Integrated with 2026 color forecast intelligence and AI palette generator.
+        - generic [ref=e298]:
+          - generic [ref=e299]: Paris
+          - generic [ref=e300]: •
+          - generic [ref=e301]: Milan
+          - generic [ref=e302]: •
+          - generic [ref=e303]: Tokyo
+          - generic [ref=e304]: •
+          - generic [ref=e305]: New York
+      - generic [ref=e306]:
+        - generic [ref=e307]: Categories
+        - list [ref=e308]:
+          - listitem [ref=e309]:
+            - button "x" [ref=e310] [cursor=pointer]:
+              - generic [ref=e311]: x
+          - listitem [ref=e312]:
+            - button "Backstage" [ref=e313] [cursor=pointer]:
+              - generic [ref=e314]: Backstage
+          - listitem [ref=e315]:
+            - button "Events" [ref=e316] [cursor=pointer]:
+              - generic [ref=e317]: Events
+          - listitem [ref=e318]:
+            - button "Street" [ref=e319] [cursor=pointer]:
+              - generic [ref=e320]: Street
+          - listitem [ref=e321]:
+            - button "Trending Colors" [ref=e322] [cursor=pointer]:
+              - generic [ref=e323]: Trending Colors
+      - generic [ref=e325]:
+        - generic [ref=e326]: Color Studio Tools
+        - generic [ref=e327]:
+          - button "AI Color Trend Generator Gemini 2026" [ref=e328] [cursor=pointer]:
+            - generic [ref=e330]: AI Color Trend Generator
+            - generic [ref=e331]: Gemini 2026
+          - button "Photo Swatch Extractor Upload" [ref=e332] [cursor=pointer]:
+            - generic [ref=e334]: Photo Swatch Extractor
+            - generic [ref=e335]: Upload
+    - generic [ref=e336]:
+      - generic [ref=e337]: © 2026 PORTFOLIO STUDIO. ALL RIGHTS RESERVED.
+      - generic [ref=e338]:
+        - link "About" [ref=e339] [cursor=pointer]:
+          - /url: /about
+        - link "Contact" [ref=e340] [cursor=pointer]:
+          - /url: /contact
+        - button "Back to top" [ref=e341] [cursor=pointer]:
+          - generic [ref=e342]: Back to top
\ No newline at end of file
diff --git a/.playwright-cli/page-2026-08-12T09-52-08-686Z.yml b/.playwright-cli/page-2026-08-12T09-52-08-686Z.yml
new file mode 100644
index 0000000..fbe96b0
--- /dev/null
+++ b/.playwright-cli/page-2026-08-12T09-52-08-686Z.yml
@@ -0,0 +1,156 @@
+- generic [active] [ref=e1]:
+  - navigation [ref=e2]:
+    - generic [ref=e3]:
+      - link "Portfolio 2026" [ref=e4] [cursor=pointer]:
+        - /url: /portfolio
+        - text: Portfolio
+        - generic [ref=e5]: "2026"
+      - link "All Shows" [ref=e6] [cursor=pointer]:
+        - /url: /shows
+      - link "Latest Projects" [ref=e7] [cursor=pointer]:
+        - /url: /latest-projects
+      - link "About" [ref=e8] [cursor=pointer]:
+        - /url: /about
+      - link "Contact Us" [ref=e9] [cursor=pointer]:
+        - /url: /contact
+    - generic [ref=e10]:
+      - link "Login" [ref=e11] [cursor=pointer]:
+        - /url: /login
+      - link "Signup" [ref=e12] [cursor=pointer]:
+        - /url: /register
+  - generic [ref=e14]:
+    - banner [ref=e15]:
+      - generic [ref=e16]:
+        - generic [ref=e17]: Runway Archive · 2026 Edition
+        - heading "All Shows" [level=1] [ref=e18]
+    - generic [ref=e19]:
+      - complementary [ref=e20]:
+        - generic [ref=e21]:
+          - heading "REFINE" [level=2] [ref=e22]
+          - button "折叠/展开筛选" [ref=e23] [cursor=pointer]:
+            - img [ref=e24]
+        - generic [ref=e26]:
+          - generic [ref=e27]:
+            - generic [ref=e28] [cursor=pointer]:
+              - generic [ref=e29]: DESIGNERS
+              - generic [ref=e30]:
+                - generic [ref=e31]: "0"
+                - img [ref=e33]
+            - generic [ref=e35]:
+              - textbox "Search designer…" [ref=e36]
+              - list [ref=e37]:
+                - listitem [ref=e38] [cursor=pointer]
+              - generic [ref=e39] [cursor=pointer]: Show all 198 designers ▾
+          - generic [ref=e40]:
+            - generic [ref=e41] [cursor=pointer]:
+              - generic [ref=e42]: COLLECTION
+              - img [ref=e44]
+            - list [ref=e47]:
+              - listitem [ref=e48] [cursor=pointer]:
+                - generic [ref=e49]:
+                  - checkbox "Ready-to-Wear" [ref=e50]
+                  - generic [ref=e51]: Ready-to-Wear
+              - listitem [ref=e52] [cursor=pointer]:
+                - generic [ref=e53]:
+                  - checkbox "Menswear" [ref=e54]
+                  - generic [ref=e55]: Menswear
+              - listitem [ref=e56] [cursor=pointer]:
+                - generic [ref=e57]:
+                  - checkbox "Couture" [ref=e58]
+                  - generic [ref=e59]: Couture
+              - listitem [ref=e60] [cursor=pointer]:
+                - generic [ref=e61]:
+                  - checkbox "Resort" [ref=e62]
+                  - generic [ref=e63]: Resort
+              - listitem [ref=e64] [cursor=pointer]:
+                - generic [ref=e65]:
+                  - checkbox "Pre-Fall" [ref=e66]
+                  - generic [ref=e67]: Pre-Fall
+          - generic [ref=e68]:
+            - generic [ref=e69] [cursor=pointer]:
+              - generic [ref=e70]: SEASON
+              - img [ref=e72]
+            - list [ref=e75]:
+              - listitem [ref=e76] [cursor=pointer]:
+                - generic [ref=e77]:
+                  - checkbox "Spring / Summer" [ref=e78]
+                  - generic [ref=e79]: Spring / Summer
+              - listitem [ref=e80] [cursor=pointer]:
+                - generic [ref=e81]:
+                  - checkbox "Fall / Winter" [ref=e82]
+                  - generic [ref=e83]: Fall / Winter
+          - generic [ref=e84]:
+            - generic [ref=e85] [cursor=pointer]:
+              - generic [ref=e86]: YEAR
+              - img [ref=e88]
+            - list [ref=e91]:
+              - listitem [ref=e92] [cursor=pointer]:
+                - generic [ref=e93]:
+                  - checkbox "2027" [ref=e94]
+                  - generic [ref=e95]: "2027"
+          - button "Clear all ×" [ref=e96] [cursor=pointer]
+      - main [ref=e97]
+  - contentinfo [ref=e291]:
+    - generic [ref=e292]:
+      - generic [ref=e293]:
+        - generic [ref=e294]:
+          - generic [ref=e295]: Portfolio Studio
+          - generic [ref=e296]: 2026 Edition
+        - paragraph [ref=e297]: Minimalist editorial portfolio documenting haute couture shows, backstage fittings, and street culture. Integrated with 2026 color forecast intelligence and AI palette generator.
+        - generic [ref=e298]:
+          - generic [ref=e299]: Paris
+          - generic [ref=e300]: •
+          - generic [ref=e301]: Milan
+          - generic [ref=e302]: •
+          - generic [ref=e303]: Tokyo
+          - generic [ref=e304]: •
+          - generic [ref=e305]: New York
+      - generic [ref=e306]:
+        - generic [ref=e307]: Categories
+        - list [ref=e308]:
+          - listitem [ref=e309]:
+            - button "x" [ref=e310] [cursor=pointer]:
+              - generic [ref=e311]: x
+          - listitem [ref=e312]:
+            - button "Backstage" [ref=e313] [cursor=pointer]:
+              - generic [ref=e314]: Backstage
+          - listitem [ref=e315]:
+            - button "Events" [ref=e316] [cursor=pointer]:
+              - generic [ref=e317]: Events
+          - listitem [ref=e318]:
+            - button "Street" [ref=e319] [cursor=pointer]:
+              - generic [ref=e320]: Street
+          - listitem [ref=e321]:
+            - button "Trending Colors" [ref=e322] [cursor=pointer]:
+              - generic [ref=e323]: Trending Colors
+      - generic [ref=e325]:
+        - generic [ref=e326]: Color Studio Tools
+        - generic [ref=e327]:
+          - button "AI Color Trend Generator Gemini 2026" [ref=e328] [cursor=pointer]:
+            - generic [ref=e330]: AI Color Trend Generator
+            - generic [ref=e331]: Gemini 2026
+          - button "Photo Swatch Extractor Upload" [ref=e332] [cursor=pointer]:
+            - generic [ref=e334]: Photo Swatch Extractor
+            - generic [ref=e335]: Upload
+    - generic [ref=e336]:
+      - generic [ref=e337]: © 2026 PORTFOLIO STUDIO. ALL RIGHTS RESERVED.
+      - generic [ref=e338]:
+        - link "About" [ref=e339] [cursor=pointer]:
+          - /url: /about
+        - link "Contact" [ref=e340] [cursor=pointer]:
+          - /url: /contact
+        - button "Back to top" [ref=e341] [cursor=pointer]:
+          - generic [ref=e342]: Back to top
+  - generic [ref=e345]:
+    - button "Menu" [ref=e346]:
+      - img [ref=e348]
+      - generic: Menu
+    - button "Inspect" [ref=e352]:
+      - img [ref=e354]
+      - generic: Inspect
+    - button "Audit" [ref=e356]:
+      - img [ref=e358]
+      - generic: Audit
+    - button "Settings" [ref=e361]:
+      - img [ref=e363]
+      - generic: Settings
\ No newline at end of file
diff --git a/.playwright-cli/page-2026-08-12T09-55-34-779Z.png b/.playwright-cli/page-2026-08-12T09-55-34-779Z.png
new file mode 100644
index 0000000..c3e1956
Binary files /dev/null and b/.playwright-cli/page-2026-08-12T09-55-34-779Z.png differ
diff --git a/.playwright-cli/page-2026-08-12T10-04-14-218Z.yml b/.playwright-cli/page-2026-08-12T10-04-14-218Z.yml
new file mode 100644
index 0000000..e8bcadd
--- /dev/null
+++ b/.playwright-cli/page-2026-08-12T10-04-14-218Z.yml
@@ -0,0 +1,156 @@
+- generic [active] [ref=e1]:
+  - navigation [ref=e2]:
+    - generic [ref=e3]:
+      - link "Portfolio 2026" [ref=e4] [cursor=pointer]:
+        - /url: /portfolio
+        - text: Portfolio
+        - generic [ref=e5]: "2026"
+      - link "All Shows" [ref=e6] [cursor=pointer]:
+        - /url: /shows
+      - link "Latest Projects" [ref=e7] [cursor=pointer]:
+        - /url: /latest-projects
+      - link "About" [ref=e8] [cursor=pointer]:
+        - /url: /about
+      - link "Contact Us" [ref=e9] [cursor=pointer]:
+        - /url: /contact
+    - generic [ref=e10]:
+      - link "Login" [ref=e11] [cursor=pointer]:
+        - /url: /login
+      - link "Signup" [ref=e12] [cursor=pointer]:
+        - /url: /register
+  - generic [ref=e14]:
+    - banner [ref=e15]:
+      - generic [ref=e16]:
+        - generic [ref=e17]: Runway Archive · 2026 Edition
+        - heading "All Shows" [level=1] [ref=e18]
+    - generic [ref=e19]:
+      - complementary [ref=e20]:
+        - generic [ref=e21]:
+          - heading "REFINE" [level=2] [ref=e22]
+          - button "折叠/展开筛选" [ref=e23] [cursor=pointer]:
+            - img [ref=e24]
+        - generic [ref=e26]:
+          - generic [ref=e27]:
+            - generic [ref=e28] [cursor=pointer]:
+              - generic [ref=e29]: DESIGNERS
+              - generic [ref=e30]:
+                - generic [ref=e31]: "0"
+                - img [ref=e33]
+            - generic [ref=e35]:
+              - textbox "Search designer…" [ref=e36]
+              - list [ref=e37]:
+                - listitem [ref=e38] [cursor=pointer]
+              - generic [ref=e39] [cursor=pointer]: Show all 198 designers ▾
+          - generic [ref=e40]:
+            - generic [ref=e41] [cursor=pointer]:
+              - generic [ref=e42]: COLLECTION
+              - img [ref=e44]
+            - list [ref=e47]:
+              - listitem [ref=e48] [cursor=pointer]:
+                - generic [ref=e49]:
+                  - checkbox "Ready-to-Wear" [ref=e50]
+                  - generic [ref=e51]: Ready-to-Wear
+              - listitem [ref=e52] [cursor=pointer]:
+                - generic [ref=e53]:
+                  - checkbox "Menswear" [ref=e54]
+                  - generic [ref=e55]: Menswear
+              - listitem [ref=e56] [cursor=pointer]:
+                - generic [ref=e57]:
+                  - checkbox "Couture" [ref=e58]
+                  - generic [ref=e59]: Couture
+              - listitem [ref=e60] [cursor=pointer]:
+                - generic [ref=e61]:
+                  - checkbox "Resort" [ref=e62]
+                  - generic [ref=e63]: Resort
+              - listitem [ref=e64] [cursor=pointer]:
+                - generic [ref=e65]:
+                  - checkbox "Pre-Fall" [ref=e66]
+                  - generic [ref=e67]: Pre-Fall
+          - generic [ref=e68]:
+            - generic [ref=e69] [cursor=pointer]:
+              - generic [ref=e70]: SEASON
+              - img [ref=e72]
+            - list [ref=e75]:
+              - listitem [ref=e76] [cursor=pointer]:
+                - generic [ref=e77]:
+                  - checkbox "Spring / Summer" [ref=e78]
+                  - generic [ref=e79]: Spring / Summer
+              - listitem [ref=e80] [cursor=pointer]:
+                - generic [ref=e81]:
+                  - checkbox "Fall / Winter" [ref=e82]
+                  - generic [ref=e83]: Fall / Winter
+          - generic [ref=e84]:
+            - generic [ref=e85] [cursor=pointer]:
+              - generic [ref=e86]: YEAR
+              - img [ref=e88]
+            - list [ref=e91]:
+              - listitem [ref=e92] [cursor=pointer]:
+                - generic [ref=e93]:
+                  - checkbox "2027" [ref=e94]
+                  - generic [ref=e95]: "2027"
+          - button "Clear all ×" [ref=e96] [cursor=pointer]
+      - main [ref=e97]
+  - contentinfo [ref=e435]:
+    - generic [ref=e436]:
+      - generic [ref=e437]:
+        - generic [ref=e438]:
+          - generic [ref=e439]: Portfolio Studio
+          - generic [ref=e440]: 2026 Edition
+        - paragraph [ref=e441]: Minimalist editorial portfolio documenting haute couture shows, backstage fittings, and street culture. Integrated with 2026 color forecast intelligence and AI palette generator.
+        - generic [ref=e442]:
+          - generic [ref=e443]: Paris
+          - generic [ref=e444]: •
+          - generic [ref=e445]: Milan
+          - generic [ref=e446]: •
+          - generic [ref=e447]: Tokyo
+          - generic [ref=e448]: •
+          - generic [ref=e449]: New York
+      - generic [ref=e450]:
+        - generic [ref=e451]: Categories
+        - list [ref=e452]:
+          - listitem [ref=e453]:
+            - button "x" [ref=e454] [cursor=pointer]:
+              - generic [ref=e455]: x
+          - listitem [ref=e456]:
+            - button "Backstage" [ref=e457] [cursor=pointer]:
+              - generic [ref=e458]: Backstage
+          - listitem [ref=e459]:
+            - button "Events" [ref=e460] [cursor=pointer]:
+              - generic [ref=e461]: Events
+          - listitem [ref=e462]:
+            - button "Street" [ref=e463] [cursor=pointer]:
+              - generic [ref=e464]: Street
+          - listitem [ref=e465]:
+            - button "Trending Colors" [ref=e466] [cursor=pointer]:
+              - generic [ref=e467]: Trending Colors
+      - generic [ref=e469]:
+        - generic [ref=e470]: Color Studio Tools
+        - generic [ref=e471]:
+          - button "AI Color Trend Generator Gemini 2026" [ref=e472] [cursor=pointer]:
+            - generic [ref=e474]: AI Color Trend Generator
+            - generic [ref=e475]: Gemini 2026
+          - button "Photo Swatch Extractor Upload" [ref=e476] [cursor=pointer]:
+            - generic [ref=e478]: Photo Swatch Extractor
+            - generic [ref=e479]: Upload
+    - generic [ref=e480]:
+      - generic [ref=e481]: © 2026 PORTFOLIO STUDIO. ALL RIGHTS RESERVED.
+      - generic [ref=e482]:
+        - link "About" [ref=e483] [cursor=pointer]:
+          - /url: /about
+        - link "Contact" [ref=e484] [cursor=pointer]:
+          - /url: /contact
+        - button "Back to top" [ref=e485] [cursor=pointer]:
+          - generic [ref=e486]: Back to top
+  - generic [ref=e489]:
+    - button "Menu" [ref=e490]:
+      - img [ref=e492]
+      - generic: Menu
+    - button "Inspect" [ref=e496]:
+      - img [ref=e498]
+      - generic: Inspect
+    - button "Audit" [ref=e500]:
+      - img [ref=e502]
+      - generic: Audit
+    - button "Settings" [ref=e505]:
+      - img [ref=e507]
+      - generic: Settings
\ No newline at end of file
diff --git a/.playwright-cli/page-2026-08-12T10-04-55-958Z.yml b/.playwright-cli/page-2026-08-12T10-04-55-958Z.yml
new file mode 100644
index 0000000..c8aa89c
--- /dev/null
+++ b/.playwright-cli/page-2026-08-12T10-04-55-958Z.yml
@@ -0,0 +1,158 @@
+- generic [active] [ref=e1]:
+  - navigation [ref=e2]:
+    - generic [ref=e3]:
+      - link "Portfolio 2026" [ref=e4] [cursor=pointer]:
+        - /url: /portfolio
+        - text: Portfolio
+        - generic [ref=e5]: "2026"
+      - link "All Shows" [ref=e6] [cursor=pointer]:
+        - /url: /shows
+      - link "Latest Projects" [ref=e7] [cursor=pointer]:
+        - /url: /latest-projects
+      - link "About" [ref=e8] [cursor=pointer]:
+        - /url: /about
+      - link "Contact Us" [ref=e9] [cursor=pointer]:
+        - /url: /contact
+    - generic [ref=e10]:
+      - link "Login" [ref=e11] [cursor=pointer]:
+        - /url: /login
+      - link "Signup" [ref=e12] [cursor=pointer]:
+        - /url: /register
+  - generic [ref=e14]:
+    - banner [ref=e15]:
+      - generic [ref=e16]:
+        - generic [ref=e17]: Runway Archive · 2026 Edition
+        - heading "All Shows" [level=1] [ref=e18]
+    - generic [ref=e19]:
+      - complementary [ref=e20]:
+        - generic [ref=e21]:
+          - heading "REFINE" [level=2] [ref=e22]
+          - button "折叠/展开筛选" [ref=e23] [cursor=pointer]:
+            - img [ref=e24]
+        - generic [ref=e26]:
+          - generic [ref=e27]:
+            - generic [ref=e28] [cursor=pointer]:
+              - generic [ref=e29]: DESIGNERS
+              - generic [ref=e30]:
+                - generic [ref=e31]: "0"
+                - img [ref=e33]
+            - generic [ref=e35]:
+              - textbox "Search designer…" [ref=e36]
+              - list [ref=e37]:
+                - listitem [ref=e38] [cursor=pointer]
+              - generic [ref=e39] [cursor=pointer]: Show all 198 designers ▾
+          - generic [ref=e40]:
+            - generic [ref=e41] [cursor=pointer]:
+              - generic [ref=e42]: COLLECTION
+              - img [ref=e44]
+            - list [ref=e47]:
+              - listitem [ref=e48] [cursor=pointer]:
+                - generic [ref=e49]:
+                  - checkbox "Ready-to-Wear" [ref=e50]
+                  - generic [ref=e51]: Ready-to-Wear
+              - listitem [ref=e52] [cursor=pointer]:
+                - generic [ref=e53]:
+                  - checkbox "Menswear" [ref=e54]
+                  - generic [ref=e55]: Menswear
+              - listitem [ref=e56] [cursor=pointer]:
+                - generic [ref=e57]:
+                  - checkbox "Couture" [ref=e58]
+                  - generic [ref=e59]: Couture
+              - listitem [ref=e60] [cursor=pointer]:
+                - generic [ref=e61]:
+                  - checkbox "Resort" [ref=e62]
+                  - generic [ref=e63]: Resort
+              - listitem [ref=e64] [cursor=pointer]:
+                - generic [ref=e65]:
+                  - checkbox "Pre-Fall" [ref=e66]
+                  - generic [ref=e67]: Pre-Fall
+          - generic [ref=e68]:
+            - generic [ref=e69] [cursor=pointer]:
+              - generic [ref=e70]: SEASON
+              - img [ref=e72]
+            - list [ref=e75]:
+              - listitem [ref=e76] [cursor=pointer]:
+                - generic [ref=e77]:
+                  - checkbox "Spring / Summer" [ref=e78]
+                  - generic [ref=e79]: Spring / Summer
+              - listitem [ref=e80] [cursor=pointer]:
+                - generic [ref=e81]:
+                  - checkbox "Fall / Winter" [ref=e82]
+                  - generic [ref=e83]: Fall / Winter
+          - generic [ref=e84]:
+            - generic [ref=e85] [cursor=pointer]:
+              - generic [ref=e86]: YEAR
+              - img [ref=e88]
+            - list [ref=e91]:
+              - listitem [ref=e92] [cursor=pointer]:
+                - generic [ref=e93]:
+                  - checkbox "2027" [ref=e94]
+                  - generic [ref=e95]: "2027"
+          - button "Clear all ×" [ref=e96] [cursor=pointer]
+      - main [ref=e97]
+  - contentinfo [ref=e435]:
+    - generic [ref=e436]:
+      - generic [ref=e437]:
+        - generic [ref=e438]:
+          - generic [ref=e439]: Portfolio Studio
+          - generic [ref=e440]: 2026 Edition
+        - paragraph [ref=e441]: Minimalist editorial portfolio documenting haute couture shows, backstage fittings, and street culture. Integrated with 2026 color forecast intelligence and AI palette generator.
+        - generic [ref=e442]:
+          - generic [ref=e443]: Paris
+          - generic [ref=e444]: •
+          - generic [ref=e445]: Milan
+          - generic [ref=e446]: •
+          - generic [ref=e447]: Tokyo
+          - generic [ref=e448]: •
+          - generic [ref=e449]: New York
+      - generic [ref=e450]:
+        - generic [ref=e451]: Categories
+        - list [ref=e452]:
+          - listitem [ref=e453]:
+            - button "x" [ref=e454] [cursor=pointer]:
+              - generic [ref=e455]: x
+          - listitem [ref=e456]:
+            - button "Backstage" [ref=e457] [cursor=pointer]:
+              - generic [ref=e458]: Backstage
+          - listitem [ref=e459]:
+            - button "Events" [ref=e460] [cursor=pointer]:
+              - generic [ref=e461]: Events
+          - listitem [ref=e462]:
+            - button "Street" [ref=e463] [cursor=pointer]:
+              - generic [ref=e464]: Street
+          - listitem [ref=e465]:
+            - button "Trending Colors" [ref=e466] [cursor=pointer]:
+              - generic [ref=e467]: Trending Colors
+      - generic [ref=e469]:
+        - generic [ref=e470]: Color Studio Tools
+        - generic [ref=e471]:
+          - button "AI Color Trend Generator Gemini 2026" [ref=e472] [cursor=pointer]:
+            - generic [ref=e474]: AI Color Trend Generator
+            - generic [ref=e475]: Gemini 2026
+          - button "Photo Swatch Extractor Upload" [ref=e476] [cursor=pointer]:
+            - generic [ref=e478]: Photo Swatch Extractor
+            - generic [ref=e479]: Upload
+    - generic [ref=e480]:
+      - generic [ref=e481]: © 2026 PORTFOLIO STUDIO. ALL RIGHTS RESERVED.
+      - generic [ref=e482]:
+        - link "About" [ref=e483] [cursor=pointer]:
+          - /url: /about
+        - link "Contact" [ref=e484] [cursor=pointer]:
+          - /url: /contact
+        - button "Back to top" [ref=e485] [cursor=pointer]:
+          - generic [ref=e486]: Back to top
+  - generic [ref=e489]:
+    - button "Menu" [ref=e490]:
+      - img [ref=e492]
+      - generic: Menu
+    - button "Inspect" [ref=e496]:
+      - img [ref=e498]
+      - generic: Inspect
+    - button "Audit" [ref=e500]:
+      - generic [ref=e501]:
+        - img [ref=e502]
+        - img [ref=e505]
+      - generic: Audit
+    - button "Settings" [ref=e508]:
+      - img [ref=e510]
+      - generic: Settings
\ No newline at end of file
diff --git a/.playwright-cli/page-2026-08-12T10-04-58-942Z.yml b/.playwright-cli/page-2026-08-12T10-04-58-942Z.yml
new file mode 100644
index 0000000..5e67414
--- /dev/null
+++ b/.playwright-cli/page-2026-08-12T10-04-58-942Z.yml
@@ -0,0 +1,162 @@
+- generic [ref=e1]:
+  - navigation [ref=e2]:
+    - generic [ref=e3]:
+      - link "Portfolio 2026" [ref=e4] [cursor=pointer]:
+        - /url: /portfolio
+        - text: Portfolio
+        - generic [ref=e5]: "2026"
+      - link "All Shows" [ref=e6] [cursor=pointer]:
+        - /url: /shows
+      - link "Latest Projects" [ref=e7] [cursor=pointer]:
+        - /url: /latest-projects
+      - link "About" [ref=e8] [cursor=pointer]:
+        - /url: /about
+      - link "Contact Us" [ref=e9] [cursor=pointer]:
+        - /url: /contact
+    - generic [ref=e10]:
+      - link "Login" [ref=e11] [cursor=pointer]:
+        - /url: /login
+      - link "Signup" [ref=e12] [cursor=pointer]:
+        - /url: /register
+  - generic [ref=e14]:
+    - banner [ref=e15]:
+      - generic [ref=e16]:
+        - generic [ref=e17]: Runway Archive · 2026 Edition
+        - heading "All Shows" [level=1] [ref=e18]
+    - generic [ref=e514]:
+      - generic [ref=e515]: COLLECTION · RTW
+      - button "×" [ref=e516] [cursor=pointer]
+    - generic [ref=e19]:
+      - complementary [ref=e20]:
+        - generic [ref=e21]:
+          - heading "REFINE" [level=2] [ref=e22]
+          - button "折叠/展开筛选" [ref=e23] [cursor=pointer]:
+            - img [ref=e24]
+        - generic [ref=e26]:
+          - generic [ref=e27]:
+            - generic [ref=e28] [cursor=pointer]:
+              - generic [ref=e29]: DESIGNERS
+              - generic [ref=e30]:
+                - generic [ref=e31]: "0"
+                - img [ref=e33]
+            - generic [ref=e35]:
+              - textbox "Search designer…" [ref=e36]
+              - list [ref=e37]:
+                - listitem [ref=e38] [cursor=pointer]
+              - generic [ref=e39] [cursor=pointer]: Show all 198 designers ▾
+          - generic [ref=e40]:
+            - generic [ref=e41] [cursor=pointer]:
+              - generic [ref=e42]: COLLECTION
+              - img [ref=e44]
+            - list [ref=e47]:
+              - listitem [ref=e48] [cursor=pointer]:
+                - generic [ref=e49]:
+                  - checkbox "Ready-to-Wear" [checked] [active] [ref=e50]
+                  - generic [ref=e51]: Ready-to-Wear
+              - listitem [ref=e52] [cursor=pointer]:
+                - generic [ref=e53]:
+                  - checkbox "Menswear" [ref=e54]
+                  - generic [ref=e55]: Menswear
+              - listitem [ref=e56] [cursor=pointer]:
+                - generic [ref=e57]:
+                  - checkbox "Couture" [ref=e58]
+                  - generic [ref=e59]: Couture
+              - listitem [ref=e60] [cursor=pointer]:
+                - generic [ref=e61]:
+                  - checkbox "Resort" [ref=e62]
+                  - generic [ref=e63]: Resort
+              - listitem [ref=e64] [cursor=pointer]:
+                - generic [ref=e65]:
+                  - checkbox "Pre-Fall" [ref=e66]
+                  - generic [ref=e67]: Pre-Fall
+          - generic [ref=e68]:
+            - generic [ref=e69] [cursor=pointer]:
+              - generic [ref=e70]: SEASON
+              - img [ref=e72]
+            - list [ref=e75]:
+              - listitem [ref=e76] [cursor=pointer]:
+                - generic [ref=e77]:
+                  - checkbox "Spring / Summer" [ref=e78]
+                  - generic [ref=e79]: Spring / Summer
+              - listitem [ref=e80] [cursor=pointer]:
+                - generic [ref=e81]:
+                  - checkbox "Fall / Winter" [ref=e82]
+                  - generic [ref=e83]: Fall / Winter
+          - generic [ref=e84]:
+            - generic [ref=e85] [cursor=pointer]:
+              - generic [ref=e86]: YEAR
+              - img [ref=e88]
+            - list [ref=e91]:
+              - listitem [ref=e92] [cursor=pointer]:
+                - generic [ref=e93]:
+                  - checkbox "2027" [ref=e94]
+                  - generic [ref=e95]: "2027"
+          - button "Clear all ×" [ref=e96] [cursor=pointer]
+      - main [ref=e97]:
+        - generic [ref=e517]: No shows match the current filters · 暂无符合条件的秀场
+  - contentinfo [ref=e435]:
+    - generic [ref=e436]:
+      - generic [ref=e437]:
+        - generic [ref=e438]:
+          - generic [ref=e439]: Portfolio Studio
+          - generic [ref=e440]: 2026 Edition
+        - paragraph [ref=e441]: Minimalist editorial portfolio documenting haute couture shows, backstage fittings, and street culture. Integrated with 2026 color forecast intelligence and AI palette generator.
+        - generic [ref=e442]:
+          - generic [ref=e443]: Paris
+          - generic [ref=e444]: •
+          - generic [ref=e445]: Milan
+          - generic [ref=e446]: •
+          - generic [ref=e447]: Tokyo
+          - generic [ref=e448]: •
+          - generic [ref=e449]: New York
+      - generic [ref=e450]:
+        - generic [ref=e451]: Categories
+        - list [ref=e452]:
+          - listitem [ref=e453]:
+            - button "x" [ref=e454] [cursor=pointer]:
+              - generic [ref=e455]: x
+          - listitem [ref=e456]:
+            - button "Backstage" [ref=e457] [cursor=pointer]:
+              - generic [ref=e458]: Backstage
+          - listitem [ref=e459]:
+            - button "Events" [ref=e460] [cursor=pointer]:
+              - generic [ref=e461]: Events
+          - listitem [ref=e462]:
+            - button "Street" [ref=e463] [cursor=pointer]:
+              - generic [ref=e464]: Street
+          - listitem [ref=e465]:
+            - button "Trending Colors" [ref=e466] [cursor=pointer]:
+              - generic [ref=e467]: Trending Colors
+      - generic [ref=e469]:
+        - generic [ref=e470]: Color Studio Tools
+        - generic [ref=e471]:
+          - button "AI Color Trend Generator Gemini 2026" [ref=e472] [cursor=pointer]:
+            - generic [ref=e474]: AI Color Trend Generator
+            - generic [ref=e475]: Gemini 2026
+          - button "Photo Swatch Extractor Upload" [ref=e476] [cursor=pointer]:
+            - generic [ref=e478]: Photo Swatch Extractor
+            - generic [ref=e479]: Upload
+    - generic [ref=e480]:
+      - generic [ref=e481]: © 2026 PORTFOLIO STUDIO. ALL RIGHTS RESERVED.
+      - generic [ref=e482]:
+        - link "About" [ref=e483] [cursor=pointer]:
+          - /url: /about
+        - link "Contact" [ref=e484] [cursor=pointer]:
+          - /url: /contact
+        - button "Back to top" [ref=e485] [cursor=pointer]:
+          - generic [ref=e486]: Back to top
+  - generic [ref=e489]:
+    - button "Menu" [ref=e490]:
+      - img [ref=e492]
+      - generic: Menu
+    - button "Inspect" [ref=e496]:
+      - img [ref=e498]
+      - generic: Inspect
+    - button "Audit" [ref=e500]:
+      - generic [ref=e501]:
+        - img [ref=e502]
+        - img [ref=e518]
+      - generic: Audit
+    - button "Settings" [ref=e508]:
+      - img [ref=e510]
+      - generic: Settings
\ No newline at end of file
diff --git a/.playwright-cli/page-2026-08-12T10-04-59-176Z.png b/.playwright-cli/page-2026-08-12T10-04-59-176Z.png
new file mode 100644
index 0000000..fae1223
Binary files /dev/null and b/.playwright-cli/page-2026-08-12T10-04-59-176Z.png differ
diff --git a/.playwright-cli/page-2026-08-12T10-05-33-946Z.yml b/.playwright-cli/page-2026-08-12T10-05-33-946Z.yml
new file mode 100644
index 0000000..52541f0
--- /dev/null
+++ b/.playwright-cli/page-2026-08-12T10-05-33-946Z.yml
@@ -0,0 +1,143 @@
+- generic [active] [ref=e1]:
+  - navigation [ref=e2]:
+    - generic [ref=e3]:
+      - link "Portfolio 2026" [ref=e4] [cursor=pointer]:
+        - /url: /portfolio
+        - text: Portfolio
+        - generic [ref=e5]: "2026"
+      - link "All Shows" [ref=e6] [cursor=pointer]:
+        - /url: /shows
+      - link "Latest Projects" [ref=e7] [cursor=pointer]:
+        - /url: /latest-projects
+      - link "About" [ref=e8] [cursor=pointer]:
+        - /url: /about
+      - link "Contact Us" [ref=e9] [cursor=pointer]:
+        - /url: /contact
+    - generic [ref=e10]:
+      - link "Login" [ref=e11] [cursor=pointer]:
+        - /url: /login
+      - link "Signup" [ref=e12] [cursor=pointer]:
+        - /url: /register
+  - generic [ref=e14]:
+    - banner [ref=e15]:
+      - generic [ref=e16]:
+        - generic [ref=e17]: Runway Archive · 2026 Edition
+        - heading "All Shows" [level=1] [ref=e18]
+    - generic [ref=e19]:
+      - complementary [ref=e20]:
+        - generic [ref=e21]:
+          - heading "REFINE" [level=2] [ref=e22]
+          - button "折叠/展开筛选" [ref=e23] [cursor=pointer]:
+            - img [ref=e24]
+        - generic [ref=e26]:
+          - generic [ref=e27]:
+            - generic [ref=e28] [cursor=pointer]:
+              - generic [ref=e29]: DESIGNERS
+              - generic [ref=e30]:
+                - generic [ref=e31]: "0"
+                - img [ref=e33]
+            - generic [ref=e35]:
+              - textbox "Search designer…" [ref=e36]
+              - list [ref=e37]:
+                - listitem [ref=e38] [cursor=pointer]
+              - generic [ref=e39] [cursor=pointer]: Show all 198 designers ▾
+          - generic [ref=e40]:
+            - generic [ref=e41] [cursor=pointer]:
+              - generic [ref=e42]: COLLECTION
+              - img [ref=e44]
+            - list [ref=e47]:
+              - listitem [ref=e48] [cursor=pointer]:
+                - generic [ref=e49]:
+                  - checkbox "Ready-to-Wear" [ref=e50]
+                  - generic [ref=e51]: Ready-to-Wear
+              - listitem [ref=e52] [cursor=pointer]:
+                - generic [ref=e53]:
+                  - checkbox "Menswear" [ref=e54]
+                  - generic [ref=e55]: Menswear
+              - listitem [ref=e56] [cursor=pointer]:
+                - generic [ref=e57]:
+                  - checkbox "Couture" [ref=e58]
+                  - generic [ref=e59]: Couture
+              - listitem [ref=e60] [cursor=pointer]:
+                - generic [ref=e61]:
+                  - checkbox "Resort" [ref=e62]
+                  - generic [ref=e63]: Resort
+              - listitem [ref=e64] [cursor=pointer]:
+                - generic [ref=e65]:
+                  - checkbox "Pre-Fall" [ref=e66]
+                  - generic [ref=e67]: Pre-Fall
+          - generic [ref=e68]:
+            - generic [ref=e69] [cursor=pointer]:
+              - generic [ref=e70]: SEASON
+              - img [ref=e72]
+            - list [ref=e75]:
+              - listitem [ref=e76] [cursor=pointer]:
+                - generic [ref=e77]:
+                  - checkbox "Spring / Summer" [ref=e78]
+                  - generic [ref=e79]: Spring / Summer
+              - listitem [ref=e80] [cursor=pointer]:
+                - generic [ref=e81]:
+                  - checkbox "Fall / Winter" [ref=e82]
+                  - generic [ref=e83]: Fall / Winter
+          - generic [ref=e84]:
+            - generic [ref=e85] [cursor=pointer]:
+              - generic [ref=e86]: YEAR
+              - img [ref=e88]
+            - list [ref=e91]:
+              - listitem [ref=e92] [cursor=pointer]:
+                - generic [ref=e93]:
+                  - checkbox "2027" [ref=e94]
+                  - generic [ref=e95]: "2027"
+          - button "Clear all ×" [ref=e96] [cursor=pointer]
+      - main [ref=e97]
+  - contentinfo [ref=e435]:
+    - generic [ref=e436]:
+      - generic [ref=e437]:
+        - generic [ref=e438]:
+          - generic [ref=e439]: Portfolio Studio
+          - generic [ref=e440]: 2026 Edition
+        - paragraph [ref=e441]: Minimalist editorial portfolio documenting haute couture shows, backstage fittings, and street culture. Integrated with 2026 color forecast intelligence and AI palette generator.
+        - generic [ref=e442]:
+          - generic [ref=e443]: Paris
+          - generic [ref=e444]: •
+          - generic [ref=e445]: Milan
+          - generic [ref=e446]: •
+          - generic [ref=e447]: Tokyo
+          - generic [ref=e448]: •
+          - generic [ref=e449]: New York
+      - generic [ref=e450]:
+        - generic [ref=e451]: Categories
+        - list [ref=e452]:
+          - listitem [ref=e453]:
+            - button "x" [ref=e454] [cursor=pointer]:
+              - generic [ref=e455]: x
+          - listitem [ref=e456]:
+            - button "Backstage" [ref=e457] [cursor=pointer]:
+              - generic [ref=e458]: Backstage
+          - listitem [ref=e459]:
+            - button "Events" [ref=e460] [cursor=pointer]:
+              - generic [ref=e461]: Events
+          - listitem [ref=e462]:
+            - button "Street" [ref=e463] [cursor=pointer]:
+              - generic [ref=e464]: Street
+          - listitem [ref=e465]:
+            - button "Trending Colors" [ref=e466] [cursor=pointer]:
+              - generic [ref=e467]: Trending Colors
+      - generic [ref=e469]:
+        - generic [ref=e470]: Color Studio Tools
+        - generic [ref=e471]:
+          - button "AI Color Trend Generator Gemini 2026" [ref=e472] [cursor=pointer]:
+            - generic [ref=e474]: AI Color Trend Generator
+            - generic [ref=e475]: Gemini 2026
+          - button "Photo Swatch Extractor Upload" [ref=e476] [cursor=pointer]:
+            - generic [ref=e478]: Photo Swatch Extractor
+            - generic [ref=e479]: Upload
+    - generic [ref=e480]:
+      - generic [ref=e481]: © 2026 PORTFOLIO STUDIO. ALL RIGHTS RESERVED.
+      - generic [ref=e482]:
+        - link "About" [ref=e483] [cursor=pointer]:
+          - /url: /about
+        - link "Contact" [ref=e484] [cursor=pointer]:
+          - /url: /contact
+        - button "Back to top" [ref=e485] [cursor=pointer]:
+          - generic [ref=e486]: Back to top
\ No newline at end of file
diff --git a/.playwright-cli/page-2026-08-12T10-05-36-850Z.png b/.playwright-cli/page-2026-08-12T10-05-36-850Z.png
new file mode 100644
index 0000000..5daed15
Binary files /dev/null and b/.playwright-cli/page-2026-08-12T10-05-36-850Z.png differ
diff --git a/.playwright-cli/page-2026-08-12T10-07-54-674Z.yml b/.playwright-cli/page-2026-08-12T10-07-54-674Z.yml
new file mode 100644
index 0000000..801af97
--- /dev/null
+++ b/.playwright-cli/page-2026-08-12T10-07-54-674Z.yml
@@ -0,0 +1,144 @@
+- generic [active] [ref=e1]:
+  - navigation [ref=e2]:
+    - generic [ref=e3]:
+      - link "Portfolio 2026" [ref=e4] [cursor=pointer]:
+        - /url: /portfolio
+        - text: Portfolio
+        - generic [ref=e5]: "2026"
+      - link "All Shows" [ref=e6] [cursor=pointer]:
+        - /url: /shows
+      - link "Latest Projects" [ref=e7] [cursor=pointer]:
+        - /url: /latest-projects
+      - link "About" [ref=e8] [cursor=pointer]:
+        - /url: /about
+      - link "Contact Us" [ref=e9] [cursor=pointer]:
+        - /url: /contact
+    - generic [ref=e10]:
+      - link "Login" [ref=e11] [cursor=pointer]:
+        - /url: /login
+      - link "Signup" [ref=e12] [cursor=pointer]:
+        - /url: /register
+  - generic [ref=e14]:
+    - banner [ref=e15]:
+      - generic [ref=e16]:
+        - generic [ref=e17]: Runway Archive · 2026 Edition
+        - heading "All Shows" [level=1] [ref=e18]
+    - generic [ref=e19]:
+      - complementary [ref=e20]:
+        - generic [ref=e21]:
+          - heading "REFINE" [level=2] [ref=e22]
+          - button "折叠/展开筛选" [ref=e23] [cursor=pointer]:
+            - img [ref=e24]
+        - generic [ref=e26]:
+          - generic [ref=e27]:
+            - generic [ref=e28] [cursor=pointer]:
+              - generic [ref=e29]: DESIGNERS
+              - generic [ref=e30]:
+                - generic [ref=e31]: "0"
+                - img [ref=e33]
+            - generic [ref=e35]:
+              - textbox "Search designer…" [ref=e36]
+              - list [ref=e37]:
+                - listitem [ref=e38] [cursor=pointer]
+              - generic [ref=e39] [cursor=pointer]: Show all 198 designers ▾
+          - generic [ref=e40]:
+            - generic [ref=e41] [cursor=pointer]:
+              - generic [ref=e42]: COLLECTION
+              - img [ref=e44]
+            - list [ref=e47]:
+              - listitem [ref=e48] [cursor=pointer]:
+                - generic [ref=e49]:
+                  - checkbox "Ready-to-Wear" [ref=e50]
+                  - generic [ref=e51]: Ready-to-Wear
+              - listitem [ref=e52] [cursor=pointer]:
+                - generic [ref=e53]:
+                  - checkbox "Menswear" [ref=e54]
+                  - generic [ref=e55]: Menswear
+              - listitem [ref=e56] [cursor=pointer]:
+                - generic [ref=e57]:
+                  - checkbox "Couture" [ref=e58]
+                  - generic [ref=e59]: Couture
+              - listitem [ref=e60] [cursor=pointer]:
+                - generic [ref=e61]:
+                  - checkbox "Resort" [ref=e62]
+                  - generic [ref=e63]: Resort
+              - listitem [ref=e64] [cursor=pointer]:
+                - generic [ref=e65]:
+                  - checkbox "Pre-Fall" [ref=e66]
+                  - generic [ref=e67]: Pre-Fall
+          - generic [ref=e68]:
+            - generic [ref=e69] [cursor=pointer]:
+              - generic [ref=e70]: SEASON
+              - img [ref=e72]
+            - list [ref=e75]:
+              - listitem [ref=e76] [cursor=pointer]:
+                - generic [ref=e77]:
+                  - checkbox "Spring / Summer" [ref=e78]
+                  - generic [ref=e79]: Spring / Summer
+              - listitem [ref=e80] [cursor=pointer]:
+                - generic [ref=e81]:
+                  - checkbox "Fall / Winter" [ref=e82]
+                  - generic [ref=e83]: Fall / Winter
+          - generic [ref=e84]:
+            - generic [ref=e85] [cursor=pointer]:
+              - generic [ref=e86]: YEAR
+              - img [ref=e88]
+            - list [ref=e91]:
+              - listitem [ref=e92] [cursor=pointer]:
+                - generic [ref=e93]:
+                  - checkbox "2027" [ref=e94]
+                  - generic [ref=e95]: "2027"
+          - button "Clear all ×" [ref=e96] [cursor=pointer]
+      - main [ref=e97]:
+        - generic [ref=e99]: No shows match the current filters · 暂无符合条件的秀场
+  - contentinfo [ref=e100]:
+    - generic [ref=e101]:
+      - generic [ref=e102]:
+        - generic [ref=e103]:
+          - generic [ref=e104]: Portfolio Studio
+          - generic [ref=e105]: 2026 Edition
+        - paragraph [ref=e106]: Minimalist editorial portfolio documenting haute couture shows, backstage fittings, and street culture. Integrated with 2026 color forecast intelligence and AI palette generator.
+        - generic [ref=e107]:
+          - generic [ref=e108]: Paris
+          - generic [ref=e109]: •
+          - generic [ref=e110]: Milan
+          - generic [ref=e111]: •
+          - generic [ref=e112]: Tokyo
+          - generic [ref=e113]: •
+          - generic [ref=e114]: New York
+      - generic [ref=e115]:
+        - generic [ref=e116]: Categories
+        - list [ref=e117]:
+          - listitem [ref=e118]:
+            - button "x" [ref=e119] [cursor=pointer]:
+              - generic [ref=e120]: x
+          - listitem [ref=e121]:
+            - button "Backstage" [ref=e122] [cursor=pointer]:
+              - generic [ref=e123]: Backstage
+          - listitem [ref=e124]:
+            - button "Events" [ref=e125] [cursor=pointer]:
+              - generic [ref=e126]: Events
+          - listitem [ref=e127]:
+            - button "Street" [ref=e128] [cursor=pointer]:
+              - generic [ref=e129]: Street
+          - listitem [ref=e130]:
+            - button "Trending Colors" [ref=e131] [cursor=pointer]:
+              - generic [ref=e132]: Trending Colors
+      - generic [ref=e134]:
+        - generic [ref=e135]: Color Studio Tools
+        - generic [ref=e136]:
+          - button "AI Color Trend Generator Gemini 2026" [ref=e137] [cursor=pointer]:
+            - generic [ref=e139]: AI Color Trend Generator
+            - generic [ref=e140]: Gemini 2026
+          - button "Photo Swatch Extractor Upload" [ref=e141] [cursor=pointer]:
+            - generic [ref=e143]: Photo Swatch Extractor
+            - generic [ref=e144]: Upload
+    - generic [ref=e145]:
+      - generic [ref=e146]: © 2026 PORTFOLIO STUDIO. ALL RIGHTS RESERVED.
+      - generic [ref=e147]:
+        - link "About" [ref=e148] [cursor=pointer]:
+          - /url: /about
+        - link "Contact" [ref=e149] [cursor=pointer]:
+          - /url: /contact
+        - button "Back to top" [ref=e150] [cursor=pointer]:
+          - generic [ref=e151]: Back to top
\ No newline at end of file
diff --git a/.playwright-cli/page-2026-08-12T10-07-54-980Z.png b/.playwright-cli/page-2026-08-12T10-07-54-980Z.png
new file mode 100644
index 0000000..e292b78
Binary files /dev/null and b/.playwright-cli/page-2026-08-12T10-07-54-980Z.png differ
diff --git a/.playwright-cli/page-2026-08-12T10-08-41-626Z.yml b/.playwright-cli/page-2026-08-12T10-08-41-626Z.yml
new file mode 100644
index 0000000..37a7854
--- /dev/null
+++ b/.playwright-cli/page-2026-08-12T10-08-41-626Z.yml
@@ -0,0 +1,159 @@
+- generic [active] [ref=e1]:
+  - navigation [ref=e2]:
+    - generic [ref=e3]:
+      - link "Portfolio 2026" [ref=e4] [cursor=pointer]:
+        - /url: /portfolio
+        - text: Portfolio
+        - generic [ref=e5]: "2026"
+      - link "All Shows" [ref=e6] [cursor=pointer]:
+        - /url: /shows
+      - link "Latest Projects" [ref=e7] [cursor=pointer]:
+        - /url: /latest-projects
+      - link "About" [ref=e8] [cursor=pointer]:
+        - /url: /about
+      - link "Contact Us" [ref=e9] [cursor=pointer]:
+        - /url: /contact
+    - generic [ref=e10]:
+      - link "Login" [ref=e11] [cursor=pointer]:
+        - /url: /login
+      - link "Signup" [ref=e12] [cursor=pointer]:
+        - /url: /register
+  - generic [ref=e14]:
+    - banner [ref=e15]:
+      - generic [ref=e16]:
+        - generic [ref=e17]: Runway Archive · 2026 Edition
+        - heading "All Shows" [level=1] [ref=e18]
+    - generic [ref=e19]:
+      - complementary [ref=e20]:
+        - generic [ref=e21]:
+          - heading "REFINE" [level=2] [ref=e22]
+          - button "折叠/展开筛选" [ref=e23] [cursor=pointer]:
+            - img [ref=e24]
+        - generic [ref=e26]:
+          - generic [ref=e27]:
+            - generic [ref=e28] [cursor=pointer]:
+              - generic [ref=e29]: DESIGNERS
+              - generic [ref=e30]:
+                - generic [ref=e31]: "0"
+                - img [ref=e33]
+            - generic [ref=e35]:
+              - textbox "Search designer…" [ref=e36]
+              - list [ref=e37]:
+                - listitem [ref=e38] [cursor=pointer]
+              - generic [ref=e39] [cursor=pointer]: Show all 198 designers ▾
+          - generic [ref=e40]:
+            - generic [ref=e41] [cursor=pointer]:
+              - generic [ref=e42]: COLLECTION
+              - img [ref=e44]
+            - list [ref=e47]:
+              - listitem [ref=e48] [cursor=pointer]:
+                - generic [ref=e49]:
+                  - checkbox "Ready-to-Wear" [ref=e50]
+                  - generic [ref=e51]: Ready-to-Wear
+              - listitem [ref=e52] [cursor=pointer]:
+                - generic [ref=e53]:
+                  - checkbox "Menswear" [ref=e54]
+                  - generic [ref=e55]: Menswear
+              - listitem [ref=e56] [cursor=pointer]:
+                - generic [ref=e57]:
+                  - checkbox "Couture" [ref=e58]
+                  - generic [ref=e59]: Couture
+              - listitem [ref=e60] [cursor=pointer]:
+                - generic [ref=e61]:
+                  - checkbox "Resort" [ref=e62]
+                  - generic [ref=e63]: Resort
+              - listitem [ref=e64] [cursor=pointer]:
+                - generic [ref=e65]:
+                  - checkbox "Pre-Fall" [ref=e66]
+                  - generic [ref=e67]: Pre-Fall
+          - generic [ref=e68]:
+            - generic [ref=e69] [cursor=pointer]:
+              - generic [ref=e70]: SEASON
+              - img [ref=e72]
+            - list [ref=e75]:
+              - listitem [ref=e76] [cursor=pointer]:
+                - generic [ref=e77]:
+                  - checkbox "Spring / Summer" [ref=e78]
+                  - generic [ref=e79]: Spring / Summer
+              - listitem [ref=e80] [cursor=pointer]:
+                - generic [ref=e81]:
+                  - checkbox "Fall / Winter" [ref=e82]
+                  - generic [ref=e83]: Fall / Winter
+          - generic [ref=e84]:
+            - generic [ref=e85] [cursor=pointer]:
+              - generic [ref=e86]: YEAR
+              - img [ref=e88]
+            - list [ref=e91]:
+              - listitem [ref=e92] [cursor=pointer]:
+                - generic [ref=e93]:
+                  - checkbox "2027" [ref=e94]
+                  - generic [ref=e95]: "2027"
+          - button "Clear all ×" [ref=e96] [cursor=pointer]
+      - main [ref=e97]:
+        - generic [ref=e99]: No shows match the current filters · 暂无符合条件的秀场
+  - contentinfo [ref=e100]:
+    - generic [ref=e101]:
+      - generic [ref=e102]:
+        - generic [ref=e103]:
+          - generic [ref=e104]: Portfolio Studio
+          - generic [ref=e105]: 2026 Edition
+        - paragraph [ref=e106]: Minimalist editorial portfolio documenting haute couture shows, backstage fittings, and street culture. Integrated with 2026 color forecast intelligence and AI palette generator.
+        - generic [ref=e107]:
+          - generic [ref=e108]: Paris
+          - generic [ref=e109]: •
+          - generic [ref=e110]: Milan
+          - generic [ref=e111]: •
+          - generic [ref=e112]: Tokyo
+          - generic [ref=e113]: •
+          - generic [ref=e114]: New York
+      - generic [ref=e115]:
+        - generic [ref=e116]: Categories
+        - list [ref=e117]:
+          - listitem [ref=e118]:
+            - button "x" [ref=e119] [cursor=pointer]:
+              - generic [ref=e120]: x
+          - listitem [ref=e121]:
+            - button "Backstage" [ref=e122] [cursor=pointer]:
+              - generic [ref=e123]: Backstage
+          - listitem [ref=e124]:
+            - button "Events" [ref=e125] [cursor=pointer]:
+              - generic [ref=e126]: Events
+          - listitem [ref=e127]:
+            - button "Street" [ref=e128] [cursor=pointer]:
+              - generic [ref=e129]: Street
+          - listitem [ref=e130]:
+            - button "Trending Colors" [ref=e131] [cursor=pointer]:
+              - generic [ref=e132]: Trending Colors
+      - generic [ref=e134]:
+        - generic [ref=e135]: Color Studio Tools
+        - generic [ref=e136]:
+          - button "AI Color Trend Generator Gemini 2026" [ref=e137] [cursor=pointer]:
+            - generic [ref=e139]: AI Color Trend Generator
+            - generic [ref=e140]: Gemini 2026
+          - button "Photo Swatch Extractor Upload" [ref=e141] [cursor=pointer]:
+            - generic [ref=e143]: Photo Swatch Extractor
+            - generic [ref=e144]: Upload
+    - generic [ref=e145]:
+      - generic [ref=e146]: © 2026 PORTFOLIO STUDIO. ALL RIGHTS RESERVED.
+      - generic [ref=e147]:
+        - link "About" [ref=e148] [cursor=pointer]:
+          - /url: /about
+        - link "Contact" [ref=e149] [cursor=pointer]:
+          - /url: /contact
+        - button "Back to top" [ref=e150] [cursor=pointer]:
+          - generic [ref=e151]: Back to top
+  - generic [ref=e154]:
+    - button "Menu" [ref=e155]:
+      - img [ref=e157]
+      - generic: Menu
+    - button "Inspect" [ref=e161]:
+      - img [ref=e163]
+      - generic: Inspect
+    - button "Audit" [ref=e165]:
+      - generic [ref=e166]:
+        - img [ref=e167]
+        - img [ref=e170]
+      - generic: Audit
+    - button "Settings" [ref=e173]:
+      - img [ref=e175]
+      - generic: Settings
\ No newline at end of file
diff --git a/.playwright-cli/page-2026-08-12T10-08-43-775Z.png b/.playwright-cli/page-2026-08-12T10-08-43-775Z.png
new file mode 100644
index 0000000..e292b78
Binary files /dev/null and b/.playwright-cli/page-2026-08-12T10-08-43-775Z.png differ
diff --git a/.playwright-cli/skel.png b/.playwright-cli/skel.png
new file mode 100644
index 0000000..7dd047a
Binary files /dev/null and b/.playwright-cli/skel.png differ
diff --git a/.workbuddy/memory/2026-08-12.md b/.workbuddy/memory/2026-08-12.md
new file mode 100644
index 0000000..a4207b5
--- /dev/null
+++ b/.workbuddy/memory/2026-08-12.md
@@ -0,0 +1,31 @@
+# 2026-08-12
+
+## shows.astro 骨架屏抖动修复
+- 问题：加载中阶段骨架屏 `<template>` 被整段注释掉，网格为空；数据回来时 24 张卡片瞬间铺开导致整页高度猛增（最大抖动）。原骨架还只渲染 12 张，与首屏 24 张行数不匹配。
+- 修复：
+  1. 恢复骨架屏模板（去掉注释），数量绑定 `skeletonCount` getter = `this.size`（24），与首屏 data 行数一致。
+  2. 骨架内部结构与真实卡片完全对齐：左图 `.showscard-img`(aspect 3/4)、右栏三行占位高度对齐真实 title(41px)/meta(29px)/meta-foot(29px)、底部 5 个 `.showscard-thumb`。
+  3. 图片阶段无抖动：容器 aspect-ratio 锁定，img 仅 opacity 渐显。
+- 验证：`npx astro build` 通过（11 页，无错），lint 干净。
+
+## shows.astro 抖动修复（第二轮，补充对齐）
+- 用户再次反馈抖动：发现骨架与真实卡片内部尺寸仍有偏差 + 真实文字区块行数不固定。
+- 关键修复：**真实卡片文字区块锁定固定高度**（不再随行数/字体加载变化）：
+  - `.showscard-title` 加 `h-[41px] overflow-hidden`（line-clamp-2 × 15.5px×1.32）
+  - `.showscard-meta` 加 `h-[29px] overflow-hidden`（line-clamp-2 × 9.5px×1.55）
+  - `.showscard-meta-foot` 加 `h-[38px] overflow-hidden`（两行 meta-line 16px + gap 6px）
+  - `.showscard-meta-line` 加 `h-[16px] leading-[16px] overflow-hidden whitespace-nowrap`
+  - 骨架第三行 showsline 高度 29px → 38px 与 meta-foot 对齐
+- 至此三个阶段的卡片高度公式完全一致（info=132px + strip mt10 + thumb aspect 3/4），桌面/移动（flex-col）均一致。
+
+## shows.astro 骨架图特别小（核心 root cause 修复）
+- 用户第三次反馈：loading=true 时骨架「特别小」。截图实测数据：骨架 `.showscard` 164px / `.showscard-right` 16px / 真实卡片 372px（右栏 224px）。视口 1280 下 `.showsroot` 仅 626px（主区 350px）。
+- **真正 root cause（不是骨架本身，而是宿主布局）**：
+  - `Layout.astro` 把 `<slot />` 套在 `<div class="flex-1 flex flex-col">` 里，slot 在 flex column 容器内作为 flex item。
+  - `shows.astro` 的 `<div class="showsroot m-auto">` 中 `m-auto` 在 flex column 容器内作为 cross-axis `margin: auto`，让 showsroot 收缩到 content width + 居中（shrink-to-fit）。
+  - 骨架阶段 24 张空 div（无 img/文字）→ card min-content = 0 → 整个链条（card→grid→main→body→root）收缩到 626px → 主区 350px → 卡片 164px。
+  - 数据阶段真实卡片有 `<img>` intrinsic + 文字 → 收缩到 1042px → 看起来「正常」。
+- **修复**：把 `<div class="showsroot m-auto">` 改为 `<div class="showsroot w-full">`（取消 m-auto，强制 width 100% wrapper）。`w-full` 优先级覆盖 `m-auto` 的 shrink-to-fit 行为；max-w-[1600px] 仍保留大屏上限。
+- **副作用归零**：骨架/数据阶段 rootW 都是 1180px（=body 1280 - 50×2 padding），主区都是 904px，2 列都是 441px，加载中→数据完成→图片完成三阶段宽度完全一致，不再抖动。
+- 验证：empty state 截图可见主区跨满 ~1000px（不再是 350px）。`astro build` 通过。
+- **经验教训**：Astro + flex 布局的页内子组件，**禁用 `m-auto`**，必须用 `w-full` 或显式 width。`m-auto` 作为 flex item 在 flex 容器中会触发 shrink-to-fit，造成「内容驱动宽度」连锁效应。
diff --git a/.workbuddy/memory/MEMORY.md b/.workbuddy/memory/MEMORY.md
index d1fd1c5..272db0f 100644
--- a/.workbuddy/memory/MEMORY.md
+++ b/.workbuddy/memory/MEMORY.md
@@ -19,6 +19,15 @@
 - CSS 写法：能用 @apply 就 @apply；`<style>` 顶部加 `@reference "tailwindcss";`。仅保留手写：@keyframes、渐变 shimmer、!important、双时长 transition。Tailwind v4 已移除零值类（mt-0 等），零值边距保持手写。
 - 导航（Layout.astro）：**保持原样未改动**（Portfolio / Latest Projects / About / Contact / Login / Signup），含页脚 Categories + Color Studio Tools + About/Contact 链接。门禁仅由 6 个 ComingSoon 占位页承担，导航不删任何链接（用户要求 header 别动）。
 
+## Layout 陷阱（重要，2026-08-12 踩坑）
+- **Layout.astro** 把 `<slot />` 包裹在 `<div class="flex-1 flex flex-col">`（flex column 容器）。
+- **禁用 `m-auto`** 作为页内根容器（`<div class="xxx m-auto">`）：它在 flex column 容器中作为 flex item 的 cross-axis `margin: auto`，会触发 **shrink-to-fit**（content 决定宽度），导致：
+  - 内容空/少时根容器收缩到极窄（骨架 24 张空 div → .showsroot 仅 626px / 主区 350px / 卡片 164px）。
+  - 内容多时根容器被撑大（真实卡片有 img/文字 → 1042px 「看起来正常」）。
+  - 同页面在不同内容状态下宽度剧烈变化 = 抖动。
+- **正确做法**：用 `w-full`（强制 100% 父容器，常配 `max-w-[xxx]`），或 `w-full mx-auto`（保留大屏居中）。
+- 适用范围：所有 Layout 内的页内根容器（包括 showsroot / blogs / about 等），**避免 `m-auto` 单独使用**。
+
 ## 部署（Docker + Gitea Actions）
 - 仅 brands.astro 构建期 SSR 取数（用 API_SSR）；其余页面运行时相对 /api 拉取（nginx 反代 backend:8090）。
 - 交付文件：前端 Dockerfile / nginx.conf / docker-compose.yml / deploy.sh / .gitea/workflows/deploy.yml / .env.example / DEPLOY.md；后端 Dockerfile。
diff --git a/astro.config.mjs b/astro.config.mjs
index 508cbec..50b34bd 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -3,9 +3,13 @@ import { defineConfig } from 'astro/config';
 
 import tailwindcss from '@tailwindcss/vite';
 
+import alpinejs from '@astrojs/alpinejs';
+
 // https://astro.build/config
 export default defineConfig({
   vite: {
     plugins: [tailwindcss()]
-  }
+  },
+
+  integrations: [alpinejs()]
 });
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index a09eaa9..022ad1b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,10 @@
       "name": "test",
       "version": "0.0.1",
       "dependencies": {
+        "@astrojs/alpinejs": "^1.0.0",
         "@tailwindcss/vite": "^4.3.3",
+        "@types/alpinejs": "^3.13.11",
+        "alpinejs": "^3.16.1",
         "astro": "^7.1.6",
         "tailwindcss": "^4.3.3"
       },
@@ -16,6 +19,16 @@
         "node": ">=22.12.0"
       }
     },
+    "node_modules/@astrojs/alpinejs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/@astrojs/alpinejs/-/alpinejs-1.0.0.tgz",
+      "integrity": "sha512-xmLFD8MBunXCG39nS3dmINQfdhqlDNbHAYyw8n6jfLGL/AFeyYOtz6p1EtXX8NEbGLHk7mUOHoaC3j1WudUYoQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/alpinejs": "^3.0.0",
+        "alpinejs": "^3.0.0"
+      }
+    },
     "node_modules/@astrojs/compiler-binding": {
       "version": "0.3.2",
       "resolved": "https://registry.npmmirror.com/@astrojs/compiler-binding/-/compiler-binding-0.3.2.tgz",
@@ -487,6 +500,27 @@
         "node": ">= 20.12.0"
       }
     },
+    "node_modules/@emnapi/core": {
+      "version": "1.11.3",
+      "resolved": "https://registry.npmmirror.com/@emnapi/core/-/core-1.11.3.tgz",
+      "integrity": "sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/core/node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmmirror.com/@emnapi/wasi-threads/-/wasi-threads-1.2.3.tgz",
+      "integrity": "sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@emnapi/wasi-threads": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/@emnapi/wasi-threads/-/wasi-threads-2.0.1.tgz",
@@ -1702,6 +1736,17 @@
         "node": "^20.19.0 || ^22.13.0 || >=23.5.0"
       }
     },
+    "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/core": {
+      "version": "2.0.0-alpha.3",
+      "resolved": "https://registry.npmmirror.com/@emnapi/core/-/core-2.0.0-alpha.3.tgz",
+      "integrity": "sha512-AZypUeJ/yByuxyS7BlSNRDOMLMlROYtjYdIAuBmJssVz1UJDSeYxLrdizhXCFYhedC5bqd/ASy8EuNXbVVXp9g==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "2.0.1",
+        "tslib": "^2.4.0"
+      }
+    },
     "node_modules/@rolldown/binding-wasm32-wasi/node_modules/@emnapi/runtime": {
       "version": "2.0.0-alpha.3",
       "resolved": "https://registry.npmmirror.com/@emnapi/runtime/-/runtime-2.0.0-alpha.3.tgz",
@@ -2397,6 +2442,13 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/alpinejs": {
+      "version": "3.13.11",
+      "resolved": "https://registry.npmmirror.com/@types/alpinejs/-/alpinejs-3.13.11.tgz",
+      "integrity": "sha512-3KhGkDixCPiLdL3Z/ok1GxHwLxEWqQOKJccgaQL01wc0EVM2tCTaqlC3NIedmxAXkVzt/V6VTM8qPgnOHKJ1MA==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/@types/estree": {
       "version": "1.0.9",
       "resolved": "https://registry.npmmirror.com/@types/estree/-/estree-1.0.9.tgz",
@@ -2451,6 +2503,31 @@
       "integrity": "sha512-60YRaenCQcVjYEKOcG824+DRGGIQ3VKErcBoAEDJZz5bKIs2ZG+X/H9Nk+Q6EVkwJk5QNApxbrc5QtBSwtrXAg==",
       "license": "ISC"
     },
+    "node_modules/@vue/reactivity": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.1.5.tgz",
+      "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/shared": "3.1.5"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmmirror.com/@vue/shared/-/shared-3.1.5.tgz",
+      "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==",
+      "license": "MIT"
+    },
+    "node_modules/alpinejs": {
+      "version": "3.16.1",
+      "resolved": "https://registry.npmmirror.com/alpinejs/-/alpinejs-3.16.1.tgz",
+      "integrity": "sha512-QXcW8MK9JoG8GZ7vCt2cXJlcEPIA7Xk/7IQ1+L2iLp7sXcIxct0PrgidmHzK97gD9QlfUjHXPxujdZ1mC2PYVg==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@vue/reactivity": "~3.1.1"
+      }
+    },
     "node_modules/am-i-vibing": {
       "version": "0.4.0",
       "resolved": "https://registry.npmmirror.com/am-i-vibing/-/am-i-vibing-0.4.0.tgz",
@@ -2982,6 +3059,7 @@
       "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==",
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -3331,7 +3409,6 @@
       "resolved": "https://registry.npmmirror.com/jiti/-/jiti-2.7.0.tgz",
       "integrity": "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
       }
diff --git a/package.json b/package.json
index 843ad0a..b163840 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,10 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/alpinejs": "^1.0.0",
     "@tailwindcss/vite": "^4.3.3",
+    "@types/alpinejs": "^3.13.11",
+    "alpinejs": "^3.16.1",
     "astro": "^7.1.6",
     "tailwindcss": "^4.3.3"
   }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 74d0cdd..ef5620b 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -9,7 +9,7 @@ const {
 } = Astro.props;
 
 const categories: { label: string; value: PortfolioCategory | 'Trending Colors' }[] = [
-  { label: '灵感', value: '灵感' },
+  { label: 'x', value: 'x' },
   { label: 'Backstage', value: 'Backstage' },
   { label: 'Events', value: 'Events' },
   { label: 'Street', value: 'Street' },
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 558a8fe..5fff8cc 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -46,7 +46,7 @@ export interface ArticlePage {
 
 export function getBase(): string {
   const env = import.meta.env as any
-  if (env.DEV) return "http://localhost:8090"
+  if (env.DEV) return "https://seo.23cm.cn"
   if (env.SSR) return (env.API_SSR || env.PUBLIC_API_BASE || "").replace(/\/$/, "")
   return (env.PUBLIC_API_BASE || "").replace(/\/$/, "")
 }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 07ad1b4..e04b266 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -75,19 +75,19 @@ function railDesc(r: typeof shows[number]) {
 	<!-- 二级大字号分类（标签页）：仅「发布会」上线，其余标注 Coming Soon -->
 	<div id="tabbar" class="mt-16 md:mt-24">
 		<ul class="flex items-center gap-6 list-none p-0 m-0 overflow-x-auto">
-			<li class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap" data-tab="backstage" data-active="true">发布会
+			<li class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap" data-tab="backstage" data-active="true">A
 				<span class="text-xs uppercase tracking-widest bg-black text-white px-2 py-0.5 rounded-full font-mono font-bold align-super">Live</span>
 			</li>
-			<li class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap" data-tab="shows" data-soon="true">灵感
+			<li class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap" data-tab="shows" data-soon="true">B
 				<span class="text-xs uppercase tracking-widest bg-zinc-200 text-zinc-600 px-2 py-0.5 rounded-full font-mono font-bold align-super">Soon</span>
 			</li>
-			<li class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap" data-tab="events" data-soon="true">社媒
+			<li class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap" data-tab="events" data-soon="true">C
 				<span class="text-xs uppercase tracking-widest bg-zinc-200 text-zinc-600 px-2 py-0.5 rounded-full font-mono font-bold align-super">Soon</span>
 			</li>
-			<li class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap" data-tab="street" data-soon="true">街拍
+			<li class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap" data-tab="street" data-soon="true">D
 				<span class="text-xs uppercase tracking-widest bg-zinc-200 text-zinc-600 px-2 py-0.5 rounded-full font-mono font-bold align-super">Soon</span>
 			</li>
-			<a href="/brands" class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap hover:opacity-80">品牌</a>
+			<a href="/brands" class="tab text-[42px] font-extrabold cursor-pointer whitespace-nowrap hover:opacity-80">E</a>
 		</ul>
 	</div>
 
diff --git a/src/pages/shows.astro b/src/pages/shows.astro
index 72d89c5..b6f1cca 100644
--- a/src/pages/shows.astro
+++ b/src/pages/shows.astro
@@ -1,39 +1,26 @@
 ---
 import Layout from "../layouts/Layout.astro"
-
-// 全部秀场档案库：HBX 风左筛选 + 右 4 列商品卡。
-// 筛选交互（设计师多选 / 系列类型 / 季节 / 年份 / 排序）全部通过 querystring 同步到后端，
-// 真正由 `/api/public/articles` 的 brand_ids / collection_type / season / year / sort 参数承担。
-
-// 侧边栏品牌列表：featured=1 取 ~198 个有走秀档案的代表品牌，含 article_count 作为计数。
-// dev 期（import.meta.env.DEV）自动兜底到本地后端，避免每次手敲环境变量；生产走 API_SSR 构建参数。
 import { getBrands, getYears, type BrandEntry } from "../lib/api"
 
 let sidebarBrands: BrandEntry[] = []
 let yearChips: number[] = []
 
-// SSR 期从后端拉精选品牌（有走秀档案的代表品牌，含计数），运行期前端用同一封装再拉。
 try {
   sidebarBrands = (await getBrands({ size: 300, only_with_articles: 1, featured: 1 }))
     .filter((b) => b.id && b.name)
     .sort((a, b) => a.name.localeCompare(b.name))
 } catch {}
 
-// 年份 chips：从 back-end 拉最近 30 条秀场，提取独特年份（按降序去重），构造最近 6 年。
-// 为 SSR 提供稳健的初始值，运行期会按筛选再补；不可达时给一组 fallback 区间。
 let yearSeed = [2026, 2025, 2024, 2023, 2022, 2021]
 try {
   const ys = await getYears(30)
   if (ys.length) yearChips = ys
 } catch {}
 if (!yearChips.length) yearChips = yearSeed
-
-// URL 链接：保留当前路径以便 client-side filter 同步到地址栏
-const pathname = "/shows"
 ---
 
 <Layout title="All Shows — Portfolio Studio">
-  <!-- 首屏绘制前同步侧边栏折叠状态，杜绝刷新时的宽度闪动（无闪烁） -->
+  <!-- 首屏绘制前同步侧边栏折叠状态，杜绝刷新时的闪烁 -->
   <script is:inline>
     try {
       if (localStorage.getItem("showsaside-collapsed") === "1") {
@@ -41,967 +28,695 @@ const pathname = "/shows"
       }
     } catch (e) {}
   </script>
-  <div class="showsroot">
 
+  <div class="showsroot w-full" x-data="showsPage()">
     <!-- 顶部：极简眉头 -->
     <header class="showshead">
-      <div class="showshead-l">
-        <span class="showskicker">Runway Archive · 2026 Edition</span>
+      <div>
+        <nav class="showscrumb" aria-label="Breadcrumb">
+          <a href="/">Home</a>
+          <span class="sep" aria-hidden="true">/</span>
+          <a href="/shows">Runway Archive</a>
+          <span class="sep" aria-hidden="true">/</span>
+          <span class="cur" aria-current="page" x-text="crumbYear"></span>
+        </nav>
         <h1 class="showsh1">All Shows</h1>
       </div>
     </header>
 
     <!-- 已激活筛选 pills -->
-    <div id="showspills" class="showspills" hidden></div>
+    <div class="showspills" x-show="pills.length > 0" x-cloak>
+      <template x-for="(p, i) in pills" :key="i">
+        <span class="showspill">
+          <span x-text="p.label"></span>
+          <button class="x" type="button" @click="p.clear()">×</button>
+        </span>
+      </template>
+    </div>
 
     <!-- 主体：左 sidebar + 右 4 列商品 grid -->
     <div class="showsbody">
-
       <!-- LEFT SIDEBAR -->
-      <aside class="showsaside" id="showsaside">
-
+      <aside class="showsaside" :class="{ 'is-collapsed': asideCollapsed }">
         <div class="showsaside-head">
           <h2 class="showsaside-h">REFINE</h2>
-          <button id="showstoggle" class="showsaside-toggle" type="button" aria-label="折叠/展开筛选">
+          <button class="showsaside-toggle" type="button" aria-label="折叠/展开筛选" @click="toggleAside()">
             <svg viewBox="0 0 12 12" width="11" height="11" aria-hidden="true">
               <path d="M7.5 3l-4 3 4 3" stroke="currentColor" fill="none" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>
           </button>
         </div>
 
-        <div class="showsaside-body">
+        <div class="showsaside-body" x-show="!asideCollapsed">
+          <!-- Designer 多选 -->
+          <section class="showsg">
+            <header class="showsg-h" @click="toggleGroup('designers')">
+              <span>DESIGNERS</span>
+              <span class="showsg-right">
+                <span class="showsg-count" x-text="selectedBrands.length">0</span>
+                <span class="showsg-chev" :class="{ 'is-collapsed': collapsedGroups.designers }">
+                  <svg viewBox="0 0 12 12" width="11" height="11"><path d="M2.5 4.5l3.5 3 3.5-3" stroke="currentColor" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+                </span>
+              </span>
+            </header>
+            <div class="showsg-b" x-show="!collapsedGroups.designers">
+              <input class="showssearch" placeholder="Search designer…" autocomplete="off" x-model.debounce.150ms="keyword" />
+              <ul class="showschecks">
+                <li>
+                  <!-- Letter Header -->
+                  <template x-if="item.type === 'letter'">
+                    <div class="letter-head" x-text="item.letter"></div>
+                  </template>
 
-        <!-- Designer 多选 -->
-        <section class="showsg">
-          <header class="showsg-h" data-group="designers" role="button" tabindex="0" aria-expanded="true">
-            <span>DESIGNERS</span>
-            <span class="showsg-right">
-              <span class="showsg-count" id="brand-count">0</span>
-              <span class="showsg-chev" aria-hidden="true"><svg viewBox="0 0 12 12" width="11" height="11"><path d="M2.5 4.5l3.5 3 3.5-3" stroke="currentColor" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
-            </span>
-          </header>
-          <div class="showsg-b">
-            <input id="brand-search" class="showssearch" placeholder="Search designer…" autocomplete="off" />
-            <ul id="brand-list" class="showschecks">
-              <!-- 由 JS 把 sidebarBrands 渲染进来 -->
-            </ul>
-            <a id="brand-showmore" class="showsmore">Show all 198 designers ▾</a>
-          </div>
-        </section>
+                  <!-- Brand Item -->
+                  <template x-if="item.type === 'brand'">
+                    <label class="flex items-center gap-2 w-full cursor-pointer">
+                      <input 
+                        type="checkbox" 
+                        :value="item.id" 
+                        :checked="selectedBrands.includes(item.id)" 
+                        @change="toggleBrand(item.id)"
+                      >
+                      <span x-text="item.name"></span>
+                      <span class="ct" x-text="item.count ? item.count : ''"></span>
+                    </label>
+                  </template>
+                </li>
+              </ul>
+              <a class="showsmore" x-show="hasMoreBrands && !keyword" @click="brandsExpanded = !brandsExpanded" x-text="brandsExpanded ? 'Show fewer ▴' : `Show all ${allBrands.length} designers ▾`"></a>
+            </div>
+          </section>
 
-        <!-- Collection type - 多选复选框 -->
-        <section class="showsg">
-          <header class="showsg-h" data-group="collection" role="button" tabindex="0" aria-expanded="true"><span>COLLECTION</span><span class="showsg-chev" aria-hidden="true"><svg viewBox="0 0 12 12" width="11" height="11"><path d="M2.5 4.5l3.5 3 3.5-3" stroke="currentColor" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></header>
-          <div class="showsg-b">
-            <ul id="ct-checks" class="showschecks showschecks--flat">
-              <li><label><input type="checkbox" value="rtw" /> <span>Ready-to-Wear</span></label></li>
-              <li><label><input type="checkbox" value="menswear" /> <span>Menswear</span></label></li>
-              <li><label><input type="checkbox" value="couture" /> <span>Couture</span></label></li>
-              <li><label><input type="checkbox" value="resort" /> <span>Resort</span></label></li>
-              <li><label><input type="checkbox" value="pre_fall" /> <span>Pre-Fall</span></label></li>
-            </ul>
-          </div>
-        </section>
+          <!-- Collection type -->
+          <section class="showsg">
+            <header class="showsg-h" @click="toggleGroup('collection')">
+              <span>COLLECTION</span>
+              <span class="showsg-chev" :class="{ 'is-collapsed': collapsedGroups.collection }">
+                <svg viewBox="0 0 12 12" width="11" height="11"><path d="M2.5 4.5l3.5 3 3.5-3" stroke="currentColor" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+              </span>
+            </header>
+            <div class="showsg-b" x-show="!collapsedGroups.collection">
+              <ul class="showschecks showschecks--flat">
+                <li><label><input type="checkbox" value="rtw" x-model="selectedCt" @change="refreshFilter()" /> <span>Ready-to-Wear</span></label></li>
+                <li><label><input type="checkbox" value="menswear" x-model="selectedCt" @change="refreshFilter()" /> <span>Menswear</span></label></li>
+                <li><label><input type="checkbox" value="couture" x-model="selectedCt" @change="refreshFilter()" /> <span>Couture</span></label></li>
+                <li><label><input type="checkbox" value="resort" x-model="selectedCt" @change="refreshFilter()" /> <span>Resort</span></label></li>
+                <li><label><input type="checkbox" value="pre_fall" x-model="selectedCt" @change="refreshFilter()" /> <span>Pre-Fall</span></label></li>
+              </ul>
+            </div>
+          </section>
 
-        <!-- Season - 多选复选框 -->
-        <section class="showsg">
-          <header class="showsg-h" data-group="season" role="button" tabindex="0" aria-expanded="true"><span>SEASON</span><span class="showsg-chev" aria-hidden="true"><svg viewBox="0 0 12 12" width="11" height="11"><path d="M2.5 4.5l3.5 3 3.5-3" stroke="currentColor" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></header>
-          <div class="showsg-b">
-            <ul id="season-checks" class="showschecks showschecks--flat">
-              <li><label><input type="checkbox" value="spring" /> <span>Spring / Summer</span></label></li>
-              <li><label><input type="checkbox" value="fall" /> <span>Fall / Winter</span></label></li>
-            </ul>
-          </div>
-        </section>
+          <!-- Season -->
+          <section class="showsg">
+            <header class="showsg-h" @click="toggleGroup('season')">
+              <span>SEASON</span>
+              <span class="showsg-chev" :class="{ 'is-collapsed': collapsedGroups.season }">
+                <svg viewBox="0 0 12 12" width="11" height="11"><path d="M2.5 4.5l3.5 3 3.5-3" stroke="currentColor" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+              </span>
+            </header>
+            <div class="showsg-b" x-show="!collapsedGroups.season">
+              <ul class="showschecks showschecks--flat">
+                <li><label><input type="checkbox" value="spring" x-model="selectedSeason" @change="refreshFilter()" /> <span>Spring / Summer</span></label></li>
+                <li><label><input type="checkbox" value="fall" x-model="selectedSeason" @change="refreshFilter()" /> <span>Fall / Winter</span></label></li>
+              </ul>
+            </div>
+          </section>
 
-        <!-- Year - 多选复选框 -->
-        <section class="showsg">
-          <header class="showsg-h" data-group="year" role="button" tabindex="0" aria-expanded="true"><span>YEAR</span><span class="showsg-chev" aria-hidden="true"><svg viewBox="0 0 12 12" width="11" height="11"><path d="M2.5 4.5l3.5 3 3.5-3" stroke="currentColor" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg></span></header>
-          <div class="showsg-b">
-            <ul id="year-checks" class="showschecks showschecks--flat">
-              {yearChips.map((y) => (
-                <li><label><input type="checkbox" value={String(y)} /> <span>{y}</span></label></li>
-              ))}
-            </ul>
-          </div>
-        </section>
+          <!-- Year -->
+          <section class="showsg">
+            <header class="showsg-h" @click="toggleGroup('year')">
+              <span>YEAR</span>
+              <span class="showsg-chev" :class="{ 'is-collapsed': collapsedGroups.year }">
+                <svg viewBox="0 0 12 12" width="11" height="11"><path d="M2.5 4.5l3.5 3 3.5-3" stroke="currentColor" fill="none" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+              </span>
+            </header>
+            <div class="showsg-b" x-show="!collapsedGroups.year">
+              <ul class="showschecks showschecks--flat">
+                {yearChips.map((y) => (
+                  <li><label><input type="checkbox" value={String(y)} x-model="selectedYear" @change="refreshFilter()" /> <span>{y}</span></label></li>
+                ))}
+              </ul>
+            </div>
+          </section>
 
-        <button id="showsclear" class="showsclear" type="button">Clear all ×</button>
-
-        </div><!-- /.showsaside-body -->
+          <button class="showsclear" type="button" @click="clearAll()">Clear all ×</button>
+        </div>
       </aside>
 
-      <!-- MAIN grid -->
+      <!-- MAIN GRID -->
       <main class="showsmain">
-        <div id="showsgrid" class="showsgrid">
-          <!-- Skeletons 占位：避免 dev SSR 时空白闪烁 -->
-          {Array.from({ length: 12 }, () => (
-            <div class="showscard showscard--skel">
+        <div class="showsgrid" :class="{ 'is-loading': loading }">
+          
+          <!-- 骨架屏：结构与真实卡片完全一致，loading 期间占位，杜绝 加载中→数据完成 的尺寸抖动 -->
+          <template x-if="loading && items.length === 0">
+            <template x-for="i in skeletonCount" :key="'skel-'+i">
+              <div class="showscard showscard--skel" aria-hidden="true">
+                <div class="showscard-left">
+                  <div class="showscard-img"></div>
+                </div>
+                <div class="showscard-right">
+                  <div class="showscard-info">
+                    <div class="showsline h-[41px] mb-[10px] rounded-[2px]"></div>
+                    <div class="showsline h-[29px] mb-[14px] rounded-[2px]"></div>
+                    <div class="showsline h-[38px] rounded-[2px]"></div>
+                  </div>
+                  <div class="showscard-strip">
+                    <div class="showscard-thumb"></div>
+                    <div class="showscard-thumb"></div>
+                    <div class="showscard-thumb"></div>
+                    <div class="showscard-thumb"></div>
+                    <div class="showscard-thumb"></div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </template>
+
+          <!-- Empty State -->
+          <template x-if="!loading && items.length === 0">
+            <div class="showsempty">No shows match the current filters · 暂无符合条件的秀场</div>
+          </template>
+
+          <!-- Card List -->
+          <template x-for="it in items" :key="it.id">
+            <a class="showscard" :href="`/article?id=${it.id}`" :aria-label="`${it.brand_name} ${it.title}`">
               <div class="showscard-left">
-                <div class="showscard-img"></div>
+                <div class="showscard-img" :class="{ 'is-loaded': it._imgLoaded }">
+                  <span class="showsspin" aria-hidden="true" x-html="SPIN_SVG"></span>
+                  <img :src="toAbsUrl(it.cover)" :alt="it.title" loading="lazy" @load="it._imgLoaded = true" @error="it._imgLoaded = true" :class="{ 'is-loaded': it._imgLoaded }" />
+                  <!-- <span class="showsbadge" x-show="isNewAdded(it.published_at)">New</span> -->
+                </div>
               </div>
               <div class="showscard-right">
                 <div class="showscard-info">
-                  <div class="showsline" style="height:40px;margin:0"></div>
-                  <div class="showsline short" style="height:14px;margin:12px 0 0"></div>
-                  <div class="showsline" style="height:34px;margin:14px 0 0"></div>
+                  <h3 class="showscard-title" x-text="it.title"></h3>
+                  <p class="showscard-meta" x-text="`${it.season_code || it.year || ''} · ${ctLabel(it.collection_type)} · ${it.brand_name}`"></p>
+                  <div class="showscard-meta-foot">
+                    <span class="showscard-meta-line"><span x-html="ICON_USER"></span><span x-text="it.brand_name"></span></span>
+                    <span class="showscard-meta-line"><span x-html="ICON_DATE"></span><span x-text="fmtDate(it.published_at)"></span></span>
+                  </div>
                 </div>
                 <div class="showscard-strip">
-                  <div class="showscard-thumb"></div>
-                  <div class="showscard-thumb"></div>
-                  <div class="showscard-thumb"></div>
-                  <div class="showscard-thumb"></div>
-                  <div class="showscard-thumb"></div>
+                  <template x-for="(slot, idx) in getCardSlots(it)" :key="idx">
+                    <div class="showscard-thumb" :class="{ 'placeholder': !slot.src, 'is-loaded': slot.loaded }">
+                      <span class="showsspin" aria-hidden="true" x-html="SPIN_SVG" x-show="slot.src"></span>
+                      <img x-show="slot.src" :src="toAbsUrl(slot.src)" alt="" loading="lazy" @load="slot.loaded = true" @error="slot.loaded = true" :class="{ 'is-loaded': slot.loaded }" />
+                      <span class="showscard-thumb-more" x-show="slot.isLast && slot.moreLabel" x-text="slot.moreLabel"></span>
+                    </div>
+                  </template>
                 </div>
               </div>
-            </div>
-          ))}
+            </a>
+          </template>
         </div>
 
-        <div class="showsloadmore-wrap">
-          <button id="showsloadmore" class="showsloadmore" type="button">Load More ↓</button>
+        <div class="showsloadmore-wrap" x-show="items.length > 0">
+          <button class="showsloadmore" type="button" :disabled="loadingMore || isEnd" @click="loadPage(page + 1, true)" x-text="loadBtnText"></button>
         </div>
       </main>
     </div>
   </div>
 </Layout>
 
-<!-- 注入 SSR 期品牌数据：避免 client-side 再发一次请求 -->
 <script id="showsbrands-data" type="application/json" set:html={JSON.stringify(sidebarBrands)}></script>
 
-<style is:global>
+<style>
   @reference "tailwindcss";
+  [x-cloak] { display: none !important; }
 
+
+  /* 使用 @apply 精简并重构样式 */
   .showsroot {
-    max-width: 1480px;
-    /* margin: auto; */
-    padding-top: 28px;
-    /* font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif); */
-    color: #0a0a0a;
+    @apply m-auto max-w-[1600px] pt-7 text-[#0a0a0a];
   }
 
-  /* ---------- 顶部眉头 ---------- */
   .showshead {
-    display: flex; justify-content: space-between; align-items: flex-end;
-    gap: 24px; padding: 22px 0 26px; border-bottom: 2px solid #000;
+    @apply flex justify-between items-end gap-6 py-5 pb-[26px] ;
   }
-  .showskicker {
-    display: inline-block;
-    font-family: var(--font-mono, ui-monospace, monospace);
-    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
-    color: #000; margin-bottom: 10px;
+  .showscrumb {
+    @apply inline-flex items-center gap-[10px] mb-[10px] text-[11px] tracking-[0.18em] uppercase text-[#999] no-underline;
+  }
+  .showscrumb a {
+    @apply text-black no-underline transition-colors duration-150 hover:text-[#888];
+  }
+  .showscrumb .sep {
+    @apply text-[#cfcfcf] select-none;
+  }
+  .showscrumb .cur {
+    @apply text-[#999];
   }
   .showsh1 {
-    font-family: var(--font-serif, ui-serif, Georgia, serif);
-    font-size: clamp(40px, 6vw, 72px); line-height: .9; font-weight: 900;
-    letter-spacing: -.02em; margin: 0 0 10px;
-  }
-  .showscount-label {
-    font-family: var(--font-mono, ui-monospace, monospace);
-    font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
-    color: #000; font-weight: 700; margin-right: 4px;
-  }
-  .showssortwrap {
-    display: inline-flex; align-items: center; gap: 10px;
-    font-family: var(--font-mono, ui-monospace, monospace);
-    font-size: 11px; text-transform: uppercase; letter-spacing: .16em; color: #000;
-  }
-  .showssort {
-    appearance: none; -webkit-appearance: none;
-    border: 1.5px solid #000; background: #fff; color: #000;
-    font-family: inherit; font-size: 11px; letter-spacing: .14em;
-    text-transform: uppercase; padding: 10px 32px 10px 14px;
-    cursor: pointer; border-radius: 0;
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23000' fill='none' stroke-width='1.4'/></svg>");
-    background-repeat: no-repeat; background-position: right 10px center;
+    @apply text-[clamp(40px,6vw,72px)] leading-[0.9] font-black tracking-[-0.02em] my-0 mb-[10px];
   }
 
-  /* ---------- 已激活筛选 pills ---------- */
   .showspills {
-    display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0 0;
+    @apply flex flex-wrap gap-2 pt-3.5;
   }
   .showspill {
-    display: inline-flex; align-items: center; gap: 8px;
-    border: 1.5px solid #000; padding: 6px 10px;
-    font-family: var(--font-mono, monospace); font-size: 10.5px;
-    text-transform: uppercase; letter-spacing: .14em; color: #000; background: #fff;
+    @apply inline-flex items-center gap-2 border-[1.5px] border-black p-[6px_10px] text-[10.5px] uppercase tracking-[0.14em] text-black bg-white;
   }
   .showspill .x {
-    display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center;
-    border: none; background: #000; color: #fff; cursor: pointer; font-family: inherit; font-size: 12px; line-height: 1;
+    @apply inline-flex w-3.5 h-3.5 items-center justify-center border-none bg-black text-white cursor-pointer text-xs leading-none;
   }
 
-  /* ---------- 主体：sidebar + grid ---------- */
   .showsbody {
-    display: flex; gap: 36px;
-    align-items: flex-start;
-  }
-  @media (max-width: 900px) {
-    .showsbody { flex-direction: column; gap: 18px; }
-    .showsaside { position: static !important; max-height: none !important; width: 100% !important; }
+    @apply flex gap-[36px] items-start max-md:flex-col max-md:gap-[18px];
   }
 
-  /* ---------- LEFT SIDEBAR（可折叠） ---------- */
   .showsaside {
-    flex: 0 0 240px;
-    /* border: 1.5px solid #000; */
-    background: #fff;
-    position: sticky; top: 20px;
-    max-height: calc(100vh - 40px);
-    border-radius: 0;
-    transition: flex-basis .25s ease;
-    display: flex;
-    flex-direction: column;
+    @apply flex-none w-[240px] bg-white sticky top-5 max-h-[calc(100vh-40px)] rounded-none transition-[flex-basis] duration-250 ease-in-out flex flex-col max-md:static max-md:max-h-none max-md:w-full;
   }
-  html.showsaside-collapsed .showsaside {
-    flex: 0 0 44px;
+  html.showsaside-collapsed .showsaside,
+  .showsaside.is-collapsed {
+    @apply flex-none w-[44px];
   }
-  html.showsaside-collapsed .showsaside-body { display: none; }
 
   .showsaside-head {
-    display: flex; align-items: center; justify-content: space-between;
-    padding: 14px 14px 12px;
-    border-bottom: 1px solid #000;
-    flex-shrink: 0;
+    @apply flex items-center justify-between p-[14px_14px_12px] border-b border-black shrink-0;
   }
   .showsaside-h {
-    font-family: var(--font-mono, monospace);
-    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
-    font-weight: 700; margin: 0; line-height: 1;
+    @apply text-[11px] tracking-[0.26em] uppercase font-bold m-0 leading-none transition-opacity duration-200;
   }
-  html.showsaside-collapsed .showsaside-h {
-    opacity: 0; pointer-events: none;
-    width: 0; overflow: hidden;
+  html.showsaside-collapsed .showsaside-h,
+  .showsaside.is-collapsed .showsaside-h {
+    @apply opacity-0 pointer-events-none w-0 overflow-hidden;
   }
+
   .showsaside-toggle {
-    appearance: none; -webkit-appearance: none;
-    background: #fff; border: 1.5px solid #000;
-    width: 22px; height: 22px;
-    display: inline-flex; align-items: center; justify-content: center;
-    cursor: pointer; border-radius: 0;
-    color: #000; padding: 0;
-    transition: transform .25s ease;
+    @apply appearance-none bg-white border-[1.5px] border-black w-[22px] h-[22px] inline-flex items-center justify-center cursor-pointer rounded-none text-black p-0 transition-transform duration-250 ease-in-out hover:bg-black hover:text-white;
   }
-  .showsaside-toggle:hover { background: #000; color: #fff; }
-  html.showsaside-collapsed .showsaside-toggle {
-    margin-left: auto;
-    transform: rotate(180deg);
+  html.showsaside-collapsed .showsaside-toggle,
+  .showsaside.is-collapsed .showsaside-toggle {
+    @apply ml-auto rotate-180;
   }
 
   .showsaside-body {
-    padding: 14px 14px 18px;
-    overflow-y: auto;
-    scrollbar-width: thin; scrollbar-color: #ccc #fff;
-    flex: 1; min-height: 0;
+    @apply p-[14px_14px_18px] overflow-y-auto flex-1 min-h-0 [scrollbar-width:thin] [scrollbar-color:#ccc_#fff];
+  }
+  html.showsaside-collapsed .showsaside-body {
+    @apply hidden;
   }
-  .showsaside-body::-webkit-scrollbar { width: 6px; }
-  .showsaside-body::-webkit-scrollbar-thumb { background: #ccc; }
 
-  .showsg { border-top: 1px solid #e6e6e6; padding: 12px 0 6px; }
-  .showsg:first-of-type { border-top: none; padding-top: 4px; }
+  .showsg {
+    @apply border-t border-[#e6e6e6] py-[12px] pb-[6px] first-of-type:border-t-0 first-of-type:pt-1;
+  }
   .showsg-h {
-    display: flex; justify-content: space-between; align-items: center;
-    font-family: var(--font-mono, monospace);
-    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
-    font-weight: 700; color: #000; margin-bottom: 8px;
-    cursor: pointer; user-select: none;
+    @apply flex justify-between items-center text-[11px] tracking-[0.22em] uppercase font-bold text-black mb-2 cursor-pointer select-none;
+  }
+  .showsg-right {
+    @apply inline-flex items-center gap-2.5;
   }
-  .showsg-h:hover { color: #000; }
-  .showsg-right { display: inline-flex; align-items: center; gap: 10px; }
   .showsg-chev {
-    display: inline-block; font-size: 9px; line-height: 1; color: #999;
-    transition: transform .2s ease; margin-left: 4px;
+    @apply inline-block text-[9px] leading-none text-[#999] transition-transform duration-200 ml-1;
+  }
+  .showsg-chev.is-collapsed {
+    @apply -rotate-90;
   }
-  .showsg.is-collapsed .showsg-chev { transform: rotate(-90deg); }
-  .showsg.is-collapsed .showsg-b { display: none; }
   .showsg-count {
-    color: #999; font-weight: 400;
-    font-family: var(--font-mono, monospace); font-size: 10px; letter-spacing: .14em;
+    @apply text-[#999] font-normal text-[10px] tracking-[0.14em];
   }
 
   .showssearch {
-    width: 100%; border: 1px solid #d4d4d4; padding: 7px 10px;
-    font-family: var(--font-mono, monospace); font-size: 11px;
-    text-transform: uppercase; letter-spacing: .08em; color: #000;
-    border-radius: 0; outline: none; background: #fafafa;
+    @apply w-full border border-[#d4d4d4] p-[7px_10px] text-[11px] uppercase tracking-[0.08em] text-black rounded-none outline-none bg-[#fafafa] focus:border-black focus:bg-white;
   }
-  .showssearch:focus { border-color: #000; background: #fff; }
-
-  .showschecks { list-style: none; margin: 10px 0 0; padding: 0; max-height: 280px; overflow-y: auto; scrollbar-width: thin; }
-  .showschecks::-webkit-scrollbar { width: 4px; }
-  .showschecks::-webkit-scrollbar-thumb { background: #ddd; }
 
+  .showschecks {
+    @apply list-none mt-[10px] mb-0 p-0 max-h-[280px] overflow-y-auto [scrollbar-width:thin];
+  }
   .showschecks li {
-    display: flex; align-items: center; gap: 8px;
-    padding: 5px 0;
-    font-family: var(--font-mono, monospace);
-    font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
-    color: #000; cursor: pointer; user-select: none;
+    @apply flex items-center gap-2 py-[5px] text-[11.5px] uppercase tracking-[0.04em] text-black cursor-pointer select-none hover:bg-[#f6f6f6];
   }
-  .showschecks li:hover { background: #f6f6f6; }
-  .showschecks li[data-letter] {
-    padding: 8px 0 3px; font-size: 10px; letter-spacing: .22em;
-    color: #8a8a8a; cursor: default; pointer-events: none;
-    border-top: 1px dotted #e6e6e6;
+  .showschecks li.letter-head {
+    @apply p-[8px_0_3px] text-[10px] tracking-[0.22em] text-[#8a8a8a] cursor-default pointer-events-none border-t border-dotted border-[#e6e6e6] first:border-t-0 first:pt-1;
   }
-  .showschecks li[data-letter]:first-child { border-top: none; padding-top: 4px; }
   .showschecks input[type="checkbox"] {
-    appearance: none; -webkit-appearance: none;
-    width: 12px; height: 12px; border: 1.5px solid #000;
-    background: #fff; cursor: pointer; flex-shrink: 0;
-    border-radius: 0; display: inline-grid; place-content: center;
+    @apply appearance-none w-3 h-3 border-[1.5px] border-black bg-white cursor-pointer shrink-0 rounded-none inline-grid place-content-center checked:bg-black;
   }
-  .showschecks input[type="checkbox"]:checked { background: #000; }
   .showschecks input[type="checkbox"]:checked::after {
-    content: ""; width: 6px; height: 6px; background: #fff;
+    content: "";
+    @apply w-[6px] h-[6px] bg-white;
+  }
+  .showschecks .ct {
+    @apply text-[#999] text-[10px] ml-auto;
   }
-  .showschecks .ct { color: #999; font-size: 10px; margin-left: auto; }
 
-  /* 扁平复选框组（COLLECTION / SEASON / YEAR）：不按字母分组，更紧凑 */
-  .showschecks--flat li { padding: 4px 0; }
-  .showschecks--flat li label {
-    display: inline-flex; align-items: center; gap: 8px;
-    cursor: pointer; width: 100%;
+  .showschecks--flat li {
+    @apply py-[4px];
   }
-  .showschecks--flat li:hover { background: #f6f6f6; }
-  .showschecks--flat li input[type="checkbox"] {
-    width: 13px; height: 13px;
+  .showschecks--flat li label {
+    @apply inline-flex items-center gap-2 cursor-pointer w-full;
   }
 
   .showsmore {
-    display: inline-block; margin-top: 10px;
-    font-family: var(--font-mono, monospace); font-size: 10.5px;
-    text-transform: uppercase; letter-spacing: .16em; color: #555;
-    cursor: pointer;
+    @apply inline-block mt-[10px] text-[10.5px] uppercase tracking-[0.16em] text-[#555] cursor-pointer hover:text-black;
   }
-  .showsmore:hover { color: #000; }
-
   .showsclear {
-    margin-top: 18px; width: 100%;
-    border: 1.5px solid #000; background: #fff; color: #000;
-    padding: 11px 12px; font-family: var(--font-mono, monospace);
-    font-size: 11px; text-transform: uppercase; letter-spacing: .22em;
-    font-weight: 700; cursor: pointer; border-radius: 0;
-    transition: all .15s;
+    @apply mt-[18px] w-full border-[1.5px] border-black bg-white text-black p-[11px_12px] text-[11px] uppercase tracking-[0.22em] font-bold cursor-pointer rounded-none transition-all duration-150 hover:bg-black hover:text-white;
   }
-  .showsclear:hover { background: #000; color: #fff; }
 
-  /* ---------- MAIN GRID ---------- */
-  .showsmain { flex: 1; min-width: 0; }
+  .showsmain {
+    @apply flex-1 min-w-0;
+  }
   .showsgrid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 22px;
-    position: relative;
+    @apply grid grid-cols-2 gap-[22px] relative max-[560px]:grid-cols-1;
   }
-  /* 切换筛选时的顶部加载进度条 */
   .showsgrid.is-loading::before {
-    content: ""; position: absolute; top: -4px; left: 0; height: 2px; width: 38%;
-    background: #000; z-index: 5; animation: hbxProg 1s ease-in-out infinite;
+    content: "";
+    @apply absolute -top-1 left-0 h-[2px] w-[38%] bg-black z-10;
+    animation: hbxProg 1s ease-in-out infinite;
   }
-  @keyframes hbxProg {
-    0% { left: -38%; } 100% { left: 100%; }
-  }
-  @media (max-width: 560px)  { .showsgrid { grid-template-columns: repeat(1, 1fr); } }
 
   .showscard {
-    position: relative; display: flex; gap: 14px;
-    text-decoration: none; color: inherit;
-    background: #fff;
-    /* border: 1px solid #e6e6e6; */
-    padding: 12px;
-    transition: border-color .2s;
+    @apply relative flex gap-[14px] no-underline text-inherit bg-white p-3 transition-colors duration-200 hover:border-black max-[700px]:flex-col max-[700px]:gap-[10px];
+  }
+  .showscard:hover .showscard-img img {
+    @apply scale-104;
   }
-  /* .showscard:hover { border-color: #000; } */
-  .showscard:hover .showscard-img img { transform: scale(1.04); }
 
-  /* 左：主图（窄，占 ~30%） */
   .showscard-left {
-    flex: 0 0 30%;
-    min-width: 110px;
+    @apply flex-none w-[30%] min-w-[110px] max-[700px]:w-full max-[700px]:flex-none;
   }
   .showscard-img {
-    position: relative;
-    width: 100%;
-    aspect-ratio: 3 / 4;
-    background: #f1f1f1;
-    overflow: hidden;
-    border-radius: 0;
+    @apply relative w-full aspect-[3/4] bg-[#f1f1f1] overflow-hidden rounded-none;
   }
   .showscard-img img {
-    width: 100%; height: 100%; object-fit: cover;
-    transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .45s ease;
-    opacity: 0; /* 固定灰底占位：图片未加载时显示容器灰底，加载完成后淡入 */
+    @apply w-full h-full object-cover transition-transform duration-600 opacity-0;
+  }
+  .showscard-img img.is-loaded {
+    @apply opacity-100;
   }
-  .showscard-img img.is-loaded { opacity: 1; }
 
-  /* 图片加载中的小 spinner：灰底之上居中显示，加载完成/失败淡出 */
   .showsspin {
-    position: absolute; inset: 0;
-    display: flex; align-items: center; justify-content: center;
-    color: #bdbdbd; opacity: 1;
-    transition: opacity .3s ease; pointer-events: none; z-index: 2;
+    @apply absolute inset-0 flex items-center justify-center text-[#bdbdbd] opacity-100 transition-opacity duration-300 pointer-events-none z-10;
   }
   .showscard-img.is-loaded .showsspin,
-  .showscard-thumb.is-loaded .showsspin { opacity: 0; }
-  .showsspin svg { width: 22px; height: 22px; display: block; }
-  .showscard-thumb .showsspin svg { width: 15px; height: 15px; }
-  .showsspin .ring { transform-origin: 12px 12px; animation: hbxSpin .8s linear infinite; }
-  @keyframes hbxSpin { to { transform: rotate(360deg); } }
+  .showscard-thumb.is-loaded .showsspin {
+    @apply opacity-0;
+  }
 
   .showsbadge {
-    position: absolute; top: 6px; right: 6px;
-    font-family: var(--font-mono, monospace);
-    font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
-    font-weight: 700; color: #fff; background: #000; padding: 3px 6px;
+    @apply absolute top-[6px] right-[6px] text-[9px] tracking-[0.14em] uppercase font-bold text-white bg-black p-[3px_6px];
   }
   .showsflag-featured {
-    position: absolute; top: 6px; left: 6px;
-    font-family: var(--font-mono, monospace);
-    font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
-    font-weight: 700; color: #000; background: #fff; padding: 3px 6px;
-    border: 1px solid #000;
+    @apply absolute top-[6px] left-[6px] text-[9px] tracking-[0.14em] uppercase font-bold text-black bg-white p-[3px_6px] border border-black;
   }
 
-  /* 右列：上信息 + 下缩略图（缩略图位于主图右侧） */
   .showscard-right {
-    flex: 1; min-width: 0;
-    display: flex; flex-direction: column;justify-content: space-between;
+    @apply flex-1 min-w-0 flex flex-col justify-between max-[700px]:w-full;
   }
   .showscard-info {
-    flex: 0 0 auto; min-width: 0;
-    display: flex; flex-direction: column;
-    padding: 2px 2px 0;
+    @apply flex-none min-w-0 flex flex-col p-[2px_2px_0];
   }
   .showscard-title {
-    font-family: var(--font-serif, serif);
-    font-size: 15.5px; font-weight: 700; line-height: 1.32;
-    margin: 0 0 10px; color: #111;
-    letter-spacing: -.01em;
-    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+    @apply text-[15.5px] font-bold leading-[1.32] my-0 mb-[10px] text-[#111] tracking-[-0.01em] line-clamp-2 h-[41px] overflow-hidden;
   }
   .showscard-meta {
-    font-family: var(--font-mono, monospace);
-    font-size: 9.5px; color: #888;
-    margin: 0 0 14px; line-height: 1.55;
-    letter-spacing: .04em; text-transform: uppercase;
-    overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+    @apply text-[9.5px] text-[#888] my-0 mb-[14px] leading-[1.55] tracking-[0.04em] uppercase line-clamp-2 h-[29px] overflow-hidden;
   }
   .showscard-meta-foot {
-    display: flex; flex-direction: column; gap: 6px;
+    @apply flex flex-col gap-[6px] h-[38px] overflow-hidden;
   }
   .showscard-meta-line {
-    display: inline-flex; align-items: center; gap: 6px;
-    font-family: var(--font-mono, monospace);
-    font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
-    color: #444;
-  }
-  .showscard-meta-line svg {
-    flex-shrink: 0; color: #888;
+    @apply inline-flex items-center gap-[6px] text-[10.5px] tracking-[0.06em] uppercase text-[#444] h-[16px] leading-[16px] overflow-hidden whitespace-nowrap;
   }
 
-  /* 右列底部：5 列缩略图条、最后一张叠加 N+ 角标（位于主图右侧，与样图一致） */
   .showscard-strip {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    gap: 4px;
-    margin-top: 10px;
+    @apply grid grid-cols-5 gap-1 mt-[10px];
   }
   .showscard-thumb {
-    position: relative;
-    aspect-ratio: 3 / 4;
-    background: #f1f1f1;
-    overflow: hidden;
+    @apply relative aspect-[3/4] bg-[#f1f1f1] overflow-hidden;
   }
   .showscard-thumb img {
-    width: 100%; height: 100%; object-fit: cover;
-    opacity: 0;
-    transition: opacity .45s ease;
+    @apply w-full h-full object-cover opacity-0 transition-opacity duration-450 ease-in-out;
+  }
+  .showscard-thumb img.is-loaded {
+    @apply opacity-100;
   }
-  .showscard-thumb img.is-loaded { opacity: 1; }
   .showscard-thumb.placeholder {
-    background: #f6f6f6;
+    @apply bg-[#f6f6f6];
   }
   .showscard-thumb-more {
-    position: absolute; inset: 0;
-    background: rgba(0, 0, 0, 0.55);
-    color: #fff;
-    font-family: var(--font-mono, monospace);
-    font-size: 11px; font-weight: 700;
-    letter-spacing: .04em;
-    display: flex; align-items: center; justify-content: center;
+    @apply absolute inset-0 bg-black/55 text-white text-[11px] font-bold tracking-[0.04em] flex items-center justify-center;
   }
 
-  @media (max-width: 700px) {
-    .showscard { flex-direction: column; gap: 10px; }
-    .showscard-left { flex: none; width: 100%; }
-    .showscard-right { width: 100%; }
-  }
-
-  /* skeleton */
   .showscard--skel .showscard-img,
   .showscard--skel .showscard-thumb,
   .showscard--skel .showsline {
-    background: #efefef;
+    @apply bg-[#efefef];
     animation: hbxShim 1.6s ease infinite;
   }
-  .showscard--skel .showscard-img { background: #efefef; }
-  .showscard--skel .showsline {
-    height: 10px; margin: 8px 0 0;
-  }
-  .showscard--skel .showsline.short { width: 60%; }
-  @keyframes hbxShim {
-    0% { opacity: .85; }
-    50% { opacity: .55; }
-    100% { opacity: .85; }
-  }
 
-  /* 加载更多 */
-  .showsloadmore-wrap { display: flex; justify-content: center; margin-top: 38px; }
-  .showsloadmore {
-    border: 1.5px solid #000; background: #fff; color: #000;
-    padding: 13px 36px;
-    font-family: var(--font-mono, monospace);
-    font-size: 11px; text-transform: uppercase; letter-spacing: .22em; font-weight: 700;
-    cursor: pointer; border-radius: 0; transition: all .2s;
+  .showsloadmore-wrap {
+    @apply flex justify-center mt-[38px];
+  }
+  .showsloadmore {
+    @apply border-[1.5px] border-black bg-white text-black p-[13px_36px] text-[11px] uppercase tracking-[0.22em] font-bold cursor-pointer rounded-none transition-all duration-200 hover:bg-black hover:text-white disabled:opacity-40 disabled:cursor-default;
   }
-  .showsloadmore:hover { background: #000; color: #fff; }
-  .showsloadmore[disabled] { opacity: .4; cursor: default; }
 
   .showsempty {
-    grid-column: 1 / -1;
-    padding: 80px 20px; text-align: center;
-    font-family: var(--font-mono, monospace);
-    font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
-    color: #999;
-    border: 1px dashed #ccc;
+    @apply col-span-full p-[80px_20px] text-center text-xs tracking-[0.22em] uppercase text-[#999] border border-dashed border-[#ccc];
   }
+
+  @keyframes hbxProg { 0% { left: -38%; } 100% { left: 100%; } }
+  @keyframes hbxShim { 0%, 100% { opacity: .85; } 50% { opacity: .55; } }
 </style>
 
 <script>
+  import Alpine from "alpinejs"
   import { getArticles, toAbs, type ArticleItem, type BrandEntry } from "../lib/api"
 
-  type Item = ArticleItem
-
-  const root = document.querySelector<HTMLElement>(".showsroot")
-  const grid = document.getElementById("showsgrid") as HTMLElement | null
-  const totalEl = document.getElementById("showstotal")
-  const brandCountEl = document.getElementById("brand-count")
-  const brandListEl = document.getElementById("brand-list")
-  const brandSearchEl = document.getElementById("brand-search") as HTMLInputElement | null
-  const brandShowMore = document.getElementById("brand-showmore") as HTMLElement | null
-  const pillsEl = document.getElementById("showspills")
-  const sortEl = document.getElementById("showssort") as HTMLSelectElement | null
-  const loadBtn = document.getElementById("showsloadmore") as HTMLButtonElement | null
-  const brandnEl = document.getElementById("showsbrandn")
-
-  // SSR 期注入的品牌清单（包含 article_count）
-  const brandsData: BrandEntry[] = (() => {
-    const node = document.getElementById("showsbrands-data")
-    if (!node?.textContent) return []
-    try { return JSON.parse(node.textContent) } catch { return [] }
-  })()
-  if (brandnEl) brandnEl.textContent = String(brandsData.length || 198)
-
-  // 筛选状态（COLLECTION / SEASON / YEAR 用 Set 实现多选）
-  const state = {
-    brand_ids: new Set<number>(),
-    ct: new Set<string>(),
-    season: new Set<string>(),
-    year: new Set<string>(),
-    sort: "newest",
-    page: 1,
-    size: 24,
-    total: 0,
-    brandsExpanded: false,
-    keyword: "",
-  }
-
-  // ============ 侧边栏：DESIGNERS 按字母分组 ============
-  const grouped = (() => {
-    const map = new Map<string, BrandEntry[]>()
-    for (const b of brandsData) {
-      const letter = (b.name[0] || "?").toUpperCase()
-      if (!map.has(letter)) map.set(letter, [])
-      map.get(letter)!.push(b)
-    }
-    return [...map.entries()].sort((a, b) => a[0].localeCompare(b[0]))
-  })()
-
-  const renderBrands = () => {
-    if (!brandListEl) return
-    brandListEl.innerHTML = ""
-    const frag = document.createDocumentFragment()
-    const kw = state.keyword
-    let shown = 0
-    const MAX_INITIAL = 60
-    let truncated = false
-
-    const appendBrand = (b: BrandEntry) => {
-      const li = document.createElement("li")
-      const cb = document.createElement("input")
-      cb.type = "checkbox"; cb.value = String(b.id)
-      cb.checked = state.brand_ids.has(b.id)
-      cb.addEventListener("change", () => {
-        cb.checked ? state.brand_ids.add(b.id) : state.brand_ids.delete(b.id)
-        syncPills()
-        loadPage(1)
-      })
-      const name = document.createElement("span"); name.textContent = b.name
-      const ct = document.createElement("span"); ct.className = "ct"; ct.textContent = b.article_count ? String(b.article_count) : ""
-      li.appendChild(cb); li.appendChild(name); li.appendChild(ct)
-      frag.appendChild(li)
-      shown++
-    }
-
-    if (kw) {
-      // 搜索模式：跨字母平铺所有匹配项（忽略 60 上限 / 字母分组）
-      for (const [, list] of grouped) {
-        for (const b of list) {
-          if (b.name.toLowerCase().includes(kw)) appendBrand(b)
-        }
-      }
-    } else {
-      for (const [letter, list] of grouped) {
-        if (!state.brandsExpanded && shown >= MAX_INITIAL) { truncated = true; break }
-        const h = document.createElement("li")
-        h.dataset.letter = letter
-        h.textContent = letter
-        frag.appendChild(h)
-        for (const b of list) {
-          if (!state.brandsExpanded && shown >= MAX_INITIAL) { truncated = true; break }
-          appendBrand(b)
-        }
-      }
-    }
-    brandListEl.appendChild(frag)
-    if (brandShowMore) brandShowMore.style.display = (truncated && !kw) ? "" : "none"
-    if (brandCountEl) brandCountEl.textContent = String(state.brand_ids.size)
-  }
-
-  if (brandShowMore) {
-    brandShowMore.addEventListener("click", () => {
-      state.brandsExpanded = !state.brandsExpanded
-      brandShowMore.textContent = state.brandsExpanded ? "Show fewer ▴" : `Show all ${brandsData.length} designers ▾`
-      renderBrands()
-    })
-    brandShowMore.textContent = `Show all ${brandsData.length} designers ▾`
-  }
-
-  if (brandSearchEl) {
-    let timer: number | undefined
-    brandSearchEl.addEventListener("input", () => {
-      window.clearTimeout(timer)
-      timer = window.setTimeout(() => {
-        state.keyword = brandSearchEl.value.trim().toLowerCase()
-        renderBrands()
-      }, 120)
-    })
-  }
-
-  // ============ 侧边栏整体折叠（localStorage 记住状态） ============
-  // 初始折叠状态已由页面顶部 <script is:inline> 同步到 <html> 根类，
-  // 在首屏绘制前生效，避免「先展开后折叠」的宽度闪动。此处只绑定切换。
-  const asideToggle = document.getElementById("showstoggle")
-  const lsKey = "showsaside-collapsed"
-  if (asideToggle) {
-    asideToggle.addEventListener("click", () => {
-      const collapsed = document.documentElement.classList.toggle("showsaside-collapsed")
-      try { localStorage.setItem(lsKey, collapsed ? "1" : "") } catch (e) {}
-    })
-  }
-
-  // ============ 每个筛选分组可上下折叠（accordion，localStorage 记忆） ============
-  document.querySelectorAll<HTMLElement>(".showsg-h[data-group]").forEach((h) => {
-    const key = "showsg-" + (h.dataset.group || "")
-    const g = h.closest(".showsg")
-    try { if (localStorage.getItem(key) === "1" && g) { g.classList.add("is-collapsed"); h.setAttribute("aria-expanded", "false") } } catch (e) {}
-    const toggle = () => {
-      if (!g) return
-      const collapsed = g.classList.toggle("is-collapsed")
-      h.setAttribute("aria-expanded", collapsed ? "false" : "true")
-      try { localStorage.setItem(key, collapsed ? "1" : "") } catch (e) {}
-    }
-    h.addEventListener("click", toggle)
-    h.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" || e.key === " ") { e.preventDefault(); toggle() }
-    })
-  })
-
-  // ============ 侧边栏多选复选框组：COLLECTION / SEASON / YEAR ============
-  // 用一组扁平复选框代替旧 chip。每个 input.change 写入对应的 Set，立即刷新数据。
-  const wireCheckboxGroup = (
-    set: Set<string>,
-    containerId: string,
-    onChange: () => void
-  ) => {
-    const container = document.getElementById(containerId)
-    if (!container) return
-    container.querySelectorAll<HTMLInputElement>("input[type=checkbox]").forEach((cb) => {
-      cb.addEventListener("change", () => {
-        cb.checked ? set.add(cb.value) : set.delete(cb.value)
-        onChange()
-      })
-    })
-  }
-  wireCheckboxGroup(state.ct, "ct-checks", refreshAfterFilter)
-  wireCheckboxGroup(state.season, "season-checks", refreshAfterFilter)
-  wireCheckboxGroup(state.year, "year-checks", refreshAfterFilter)
-
-  function refreshAfterFilter() {
-    syncPills()
-    loadPage(1)
-  }
-
-  // ============ 排序 ============
-  if (sortEl) {
-    sortEl.addEventListener("change", () => {
-      state.sort = sortEl.value
-      syncPills()
-      loadPage(1)
-    })
-  }
-
-  // ============ Pills：已激活筛选清单 ============
-  const syncPills = () => {
-    if (!pillsEl) return
-    const list: { label: string; clear: () => void }[] = []
-    if (state.brand_ids.size) {
-      const idArr = [...state.brand_ids]
-      const labels = idArr.map((id) => brandsData.find((b) => b.id === id)?.name ?? `#${id}`).slice(0, 4)
-      const more = idArr.length > 4 ? ` +${idArr.length - 4}` : ""
-      list.push({
-        label: "DESIGNER · " + labels.join(", ") + more,
-        clear: () => { state.brand_ids.clear(); renderBrands(); }
-      })
-    }
-    if (state.ct.size) list.push({
-      label: "COLLECTION · " + [...state.ct].join("+").toUpperCase(),
-      clear: () => { state.ct.clear(); syncCheckboxGroup("ct-checks"); }
-    })
-    if (state.season.size) list.push({
-      label: "SEASON · " + [...state.season].join("+").toUpperCase(),
-      clear: () => { state.season.clear(); syncCheckboxGroup("season-checks"); }
-    })
-    if (state.year.size) list.push({
-      label: "YEAR · " + [...state.year].sort().join("+"),
-      clear: () => { state.year.clear(); syncCheckboxGroup("year-checks"); }
-    })
-    if (state.sort !== "newest") list.push({
-      label: "SORT · " + state.sort.replace("_", " ").toUpperCase(),
-      clear: () => { state.sort = "newest"; if (sortEl) sortEl.value = "newest" }
-    })
-
-    if (!list.length) { pillsEl.hidden = true; pillsEl.innerHTML = ""; return }
-    pillsEl.hidden = false
-    pillsEl.innerHTML = list.map((p, i) => `<span class="showspill" data-i="${i}">${p.label}<button class="x" type="button">×</button></span>`).join("")
-    pillsEl.querySelectorAll<HTMLElement>(".showspill").forEach((pill) => {
-      pill.querySelector(".x")?.addEventListener("click", () => {
-        const i = Number(pill.dataset.i)
-        list[i]?.clear()
-        syncPills()
-        loadPage(1)
-      })
-    })
-    if (brandCountEl) brandCountEl.textContent = String(state.brand_ids.size)
-  }
-  const syncCheckboxGroup = (containerId: string) => {
-    document.getElementById(containerId)?.querySelectorAll<HTMLInputElement>("input[type=checkbox]").forEach((cb) => { cb.checked = false })
-  }
-
-  // Clear all
-  document.getElementById("showsclear")?.addEventListener("click", () => {
-    state.brand_ids.clear()
-    state.ct.clear(); state.season.clear(); state.year.clear()
-    state.sort = "newest"
-    state.keyword = ""
-    if (brandSearchEl) brandSearchEl.value = ""
-    syncCheckboxGroup("ct-checks")
-    syncCheckboxGroup("season-checks")
-    syncCheckboxGroup("year-checks")
-    if (sortEl) sortEl.value = "newest"
-    renderBrands()
-    syncPills()
-    loadPage(1)
-  })
-
-  // ============ 卡片渲染（左大图 + 右上文字 + 下 5 张缩略图条） ============
   const ICON_USER = `<svg viewBox="0 0 12 12" width="9" height="9" aria-hidden="true"><circle cx="6" cy="4" r="2" stroke="currentColor" fill="none" stroke-width="1"/><path d="M2 10c0-2 1.8-3 4-3s4 1 4 3" stroke="currentColor" fill="none" stroke-width="1" stroke-linecap="round"/></svg>`
   const ICON_DATE = `<svg viewBox="0 0 12 12" width="9" height="9" aria-hidden="true"><rect x="2" y="3" width="8" height="7" stroke="currentColor" fill="none" stroke-width="1"/><path d="M2 6h8M4 2v2M8 2v2" stroke="currentColor" fill="none" stroke-width="1" stroke-linecap="round"/></svg>`
-  const ICON_CAM = `<svg viewBox="0 0 12 12" width="9" height="9" aria-hidden="true"><rect x="1.5" y="3.5" width="9" height="6" stroke="currentColor" fill="none" stroke-width="1"/><circle cx="6" cy="6.5" r="1.8" stroke="currentColor" fill="none" stroke-width="1"/><path d="M4 3.5l1-1.2h2l1 1.2" stroke="currentColor" fill="none" stroke-width="1" stroke-linecap="round"/></svg>`
-  // 加载中 spinner：细线旋转环 + 中心静态相机小图标（灰调，HBX 编辑风）
-  const SPIN_SVG = `<svg viewBox="0 0 24 24" aria-hidden="true">
-    <g class="ring" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="40 22">
-      <circle cx="12" cy="12" r="9"></circle>
-    </g>
-    <g opacity="0.55" fill="none" stroke="currentColor" stroke-width="1">
-      <rect x="8" y="9.6" width="8" height="5.4"></rect>
-      <circle cx="12" cy="12.3" r="1.6"></circle>
-    </g>
-  </svg>`
-  const fmtDate = (ts: number) => {
-    if (!ts) return ""
-    const d = new Date(ts * 1000)
-    const mm = String(d.getMonth() + 1).padStart(2, "0")
-    const dd = String(d.getDate()).padStart(2, "0")
-    return `${d.getFullYear()}-${mm}-${dd}`
-  }
-  const ctLabel = (ct?: string) => {
-    const map: Record<string, string> = {
-      rtw: "Ready-to-Wear", menswear: "Menswear", couture: "Couture",
-      resort: "Resort", pre_fall: "Pre-Fall",
-    }
-    return ct && map[ct] ? map[ct] : (ct || "")
-  }
+  const SPIN_SVG = `<svg viewBox="0 0 24 24" aria-hidden="true" class="w-[22px] h-[22px] block"><g class="ring origin-[12px_12px] animate-spin" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="40 22"><circle cx="12" cy="12" r="9"></circle></g><g opacity="0.55" fill="none" stroke="currentColor" stroke-width="1"><rect x="8" y="9.6" width="8" height="5.4"></rect><circle cx="12" cy="12.3" r="1.6"></circle></g></svg>`
 
-  const cardHtml = (it: Item) => {
-    const code = it.season_code || String(it.year || "")
-    const gallery = it.gallery || []
-    const totalCount = it.image_count || 0
-    // 角标：总数 > 30 一律 30+，否则展示 N+（即使 N<=5 也展示，保持与样图 5 槽位+末张叠加的视觉一致）
-    const moreLabel = totalCount > 30 ? "30+" : `${totalCount || 0}+`
+  document.addEventListener("alpine:init", () => {
+    Alpine.data("showsPage", () => {
+      const node = document.getElementById("showsbrands-data")
+      const allBrands: BrandEntry[] = node?.textContent ? JSON.parse(node.textContent) : []
 
-    // 永远渲染 5 个缩略图槽位（HBX 视觉一致性，不够补 .placeholder）
-    const SLOTS = 5
-    const slots: string[] = []
-    for (let i = 0; i < SLOTS; i++) {
-      const src = gallery[i]
-      const isLast = i === SLOTS - 1
-      if (src) {
-        slots.push(`<div class="showscard-thumb"><span class="showsspin" aria-hidden="true">${SPIN_SVG}</span><img src="${toAbs(src)}" alt="" loading="lazy" />${isLast && totalCount > 0 ? `<span class="showscard-thumb-more">${moreLabel}</span>` : ""}</div>`)
-      } else {
-        slots.push(`<div class="showscard-thumb placeholder">${isLast && totalCount > 0 ? `<span class="showscard-thumb-more">${moreLabel}</span>` : ""}</div>`)
-      }
-    }
+      return {
+        allBrands,
+        ICON_USER,
+        ICON_DATE,
+        SPIN_SVG,
+        asideCollapsed: localStorage.getItem("showsaside-collapsed") === "1",
+        collapsedGroups: {
+          designers: localStorage.getItem("showsg-designers") === "1",
+          collection: localStorage.getItem("showsg-collection") === "1",
+          season: localStorage.getItem("showsg-season") === "1",
+          year: localStorage.getItem("showsg-year") === "1",
+        },
+        selectedBrands: [] as number[],
+        selectedCt: [] as string[],
+        selectedSeason: [] as string[],
+        selectedYear: [] as string[],
+        keyword: "",
+        brandsExpanded: false,
 
-    const isNew = (Date.now() / 1000 - Number(it.published_at || 0) < 60 * 60 * 24 * 14)
-    const isFeatured = it.image_count > 70
+        items: [] as (ArticleItem & { _imgLoaded?: boolean })[],
+        loading: false,
+        loadingMore: false,
+        page: 1,
+        size: 24,
+        total: 0,
+        isEnd: false,
+        reqToken: 0,
 
-    return `
-      <a class="showscard" href="/article?id=${it.id}" aria-label="${it.brand_name} ${it.title}">
-        <div class="showscard-left">
-          <div class="showscard-img">
-            ${isFeatured ? '<span class="showsflag-featured">Featured</span>' : ""}
-            <span class="showsspin" aria-hidden="true">${SPIN_SVG}</span>
-            <img src="${toAbs(it.cover)}" alt="${it.title}" loading="lazy" />
-            ${isNew ? '<span class="showsbadge">New Added</span>' : ""}
-          </div>
-        </div>
-        <div class="showscard-right">
-          <div class="showscard-info">
-            <h3 class="showscard-title">${it.title}</h3>
-            <p class="showscard-meta">${code} · ${ctLabel(it.collection_type)} · ${it.brand_name}</p>
-            <div class="showscard-meta-foot">
-              <span class="showscard-meta-line">${ICON_USER}${it.brand_name}</span>
-              <span class="showscard-meta-line">${ICON_DATE}${fmtDate(it.published_at)}</span>
-            </div>
-          </div>
-          <div class="showscard-strip">${slots.join("")}</div>
-        </div>
-      </a>`
-  }
+        init() {
+          this.loadPage(1, false)
+        },
 
-  // 图片淡入 + spinner：网络图加载完成前显示容器灰底占位与居中 spinner，
-  // 加载完淡入图片并淡出 spinner，消除硬切换跳变
-  const revealImages = (root: ParentNode = document) => {
-    const imgs = root.querySelectorAll<HTMLImageElement>(".showscard-img img, .showscard-thumb img")
-    imgs.forEach((img) => {
-      if (img.classList.contains("is-loaded")) return
-      const wrap = img.closest(".showscard-img, .showscard-thumb")
-      const done = () => { img.classList.add("is-loaded"); wrap?.classList.add("is-loaded") }
-      if (img.complete && img.naturalWidth > 0) {
-        done()
-      } else {
-        img.addEventListener("load", done, { once: true })
-        // 加载失败：隐藏 img，保留容器灰底占位，并淡出 spinner
-        img.addEventListener("error", () => { img.style.display = "none"; wrap?.classList.add("is-loaded") }, { once: true })
+        // 计算属性：侧边栏设计师列表的分组渲染
+        get visibleBrandItems() {
+          const kw = this.keyword.trim().toLowerCase()
+          const result: any[] = []
+
+          if (kw) {
+            this.allBrands.forEach((b) => {
+              if (b.name.toLowerCase().includes(kw)) {
+                result.push({ type: "brand", id: b.id, name: b.name, count: b.article_count, key: b.id })
+              }
+            })
+          } else {
+            const map = new Map<string, BrandEntry[]>()
+            for (const b of this.allBrands) {
+              const letter = (b.name[0] || "?").toUpperCase()
+              if (!map.has(letter)) map.set(letter, [])
+              map.get(letter)!.push(b)
+            }
+            const grouped = [...map.entries()].sort((a, b) => a[0].localeCompare(b[0]))
+
+            let shown = 0
+            const MAX_INITIAL = 60
+            for (const [letter, list] of grouped) {
+              if (!this.brandsExpanded && shown >= MAX_INITIAL) break
+              result.push({ type: "letter", letter, key: `letter-${letter}` })
+              for (const b of list) {
+                if (!this.brandsExpanded && shown >= MAX_INITIAL) break
+                result.push({ type: "brand", id: b.id, name: b.name, count: b.article_count, key: b.id })
+                shown++
+              }
+            }
+          }
+          return result
+        },
+
+        get hasMoreBrands() {
+          return this.allBrands.length > 60
+        },
+
+        // 面包屑末级：未选年份时显示默认的「2026 Edition」，选中后显示对应年份
+        get crumbYear() {
+          if (this.selectedYear.length) {
+            const ys = [...this.selectedYear].sort()
+            return ys.length === 1 ? `${ys[0]} Edition` : `${ys.join(" / ")}`
+          }
+          return "2026 Edition"
+        },
+
+        // 骨架屏数量与首屏 data 数量一致，保证「加载中」与「数据完成」两阶段的网格高度相同，消除抖动
+        get skeletonCount() {
+          return this.size
+        },
+
+        // 已筛选选项 Pills 视图数据
+        get pills() {
+          const list: { label: string; clear: () => void }[] = []
+          if (this.selectedBrands.length) {
+            const labels = this.selectedBrands
+              .map((id) => this.allBrands.find((b) => b.id === id)?.name ?? `#${id}`)
+              .slice(0, 4)
+            const more = this.selectedBrands.length > 4 ? ` +${this.selectedBrands.length - 4}` : ""
+            list.push({
+              label: "DESIGNER · " + labels.join(", ") + more,
+              clear: () => { this.selectedBrands = []; this.refreshFilter(); }
+            })
+          }
+          if (this.selectedCt.length) {
+            list.push({
+              label: "COLLECTION · " + this.selectedCt.join("+").toUpperCase(),
+              clear: () => { this.selectedCt = []; this.refreshFilter(); }
+            })
+          }
+          if (this.selectedSeason.length) {
+            list.push({
+              label: "SEASON · " + this.selectedSeason.join("+").toUpperCase(),
+              clear: () => { this.selectedSeason = []; this.refreshFilter(); }
+            })
+          }
+          if (this.selectedYear.length) {
+            list.push({
+              label: "YEAR · " + [...this.selectedYear].sort().join("+"),
+              clear: () => { this.selectedYear = []; this.refreshFilter(); }
+            })
+          }
+          return list
+        },
+
+        get loadBtnText() {
+          if (this.loadingMore) return "Loading…"
+          if (this.isEnd) return "— End of Archive —"
+          return "Load More ↓"
+        },
+
+        // 事件处理方法
+        toggleAside() {
+          this.asideCollapsed = !this.asideCollapsed
+          localStorage.setItem("showsaside-collapsed", this.asideCollapsed ? "1" : "")
+          document.documentElement.classList.toggle("showsaside-collapsed", this.asideCollapsed)
+        },
+
+        toggleGroup(group: "designers" | "collection" | "season" | "year") {
+          this.collapsedGroups[group] = !this.collapsedGroups[group]
+          localStorage.setItem(`showsg-${group}`, this.collapsedGroups[group] ? "1" : "")
+        },
+
+        toggleBrand(id: number) {
+          const idx = this.selectedBrands.indexOf(id)
+          if (idx >= 0) this.selectedBrands.splice(idx, 1)
+          else this.selectedBrands.push(id)
+          this.refreshFilter()
+        },
+
+        refreshFilter() {
+          this.loadPage(1, false)
+        },
+
+        clearAll() {
+          this.selectedBrands = []
+          this.selectedCt = []
+          this.selectedSeason = []
+          this.selectedYear = []
+          this.keyword = ""
+          this.refreshFilter()
+        },
+
+        // API 加载
+        async loadPage(page: number, append = false) {
+          const myToken = ++this.reqToken
+          if (append) {
+            this.loadingMore = true
+          } else {
+            this.loading = true
+            this.items = []
+          }
+
+          try {
+            const json = await getArticles({
+              page,
+              size: this.size,
+              sort: "newest",
+              brand_ids: this.selectedBrands,
+              collection_type: this.selectedCt,
+              season: this.selectedSeason,
+              year: this.selectedYear,
+              with_images: 6,
+            })
+
+            if (myToken !== this.reqToken) return
+
+            const rows = json.data.map((item: ArticleItem) => ({ ...item, _imgLoaded: false }))
+            this.total = json.total
+            this.page = page
+            this.items = append ? [...this.items, ...rows] : rows
+
+            this.isEnd = page >= json.last_page || rows.length < this.size
+          } catch {
+            if (myToken !== this.reqToken) return
+            if (!append) this.items = []
+          } finally {
+            if (myToken === this.reqToken) {
+              this.loading = false
+              this.loadingMore = false
+            }
+          }
+        },
+
+        // 辅助辅助工具函数
+        toAbsUrl(url: string) { return toAbs(url) },
+        isNewAdded(pubAt?: number) { return Date.now() / 1000 - Number(pubAt || 0) < 60 * 60 * 24 * 14 },
+        fmtDate(ts: number) {
+          if (!ts) return ""
+          const d = new Date(ts * 1000)
+          return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`
+        },
+        ctLabel(ct?: string) {
+          const map: Record<string, string> = { rtw: "Ready-to-Wear", menswear: "Menswear", couture: "Couture", resort: "Resort", pre_fall: "Pre-Fall" }
+          return ct && map[ct] ? map[ct] : (ct || "")
+        },
+        getCardSlots(it: ArticleItem) {
+          const gallery = it.gallery || []
+          const totalCount = it.image_count || 0
+          const moreLabel = totalCount > 30 ? "30+" : `${totalCount || 0}+`
+          const slots = []
+          for (let i = 0; i < 5; i++) {
+            const src = gallery[i]
+            const isLast = i === 4
+            slots.push({ src, loaded: false, isLast, moreLabel: (isLast && totalCount > 0) ? moreLabel : "" })
+          }
+          return slots
+        }
       }
     })
-  }
-
-  const renderItems = (items: Item[], append: boolean) => {
-    if (!grid) return
-    if (!append) {
-      grid.innerHTML = ""
-    }
-    if (!items.length && !append) {
-      grid.innerHTML = `<div class="showsempty">No shows match the current filters · 暂无符合条件的秀场</div>`
-      return
-    }
-    grid.insertAdjacentHTML("beforeend", items.map(cardHtml).join(""))
-    revealImages(grid)
-  }
-
-  // ============ 拉数（统一走 src/lib/api 的 getArticles） ============
-
-  // 筛选/翻页时的骨架占位
-  const skeletonHtml = (n: number) => Array.from({ length: n }, () => `
-    <div class="showscard showscard--skel">
-      <div class="showscard-left">
-        <div class="showscard-img"></div>
-      </div>
-      <div class="showscard-right">
-        <div class="showscard-info">
-          <div class="showsline" style="height:40px;margin:0"></div>
-          <div class="showsline short" style="height:14px;margin:12px 0 0"></div>
-          <div class="showsline" style="height:34px;margin:14px 0 0"></div>
-        </div>
-        <div class="showscard-strip">
-          <div class="showscard-thumb"></div><div class="showscard-thumb"></div><div class="showscard-thumb"></div><div class="showscard-thumb"></div><div class="showscard-thumb"></div>
-        </div>
-      </div>
-    </div>`).join("")
-
-  // 请求令牌：避免快速切换筛选时旧响应覆盖新结果
-  let reqToken = 0
-
-  const loadPage = async (page: number, append = false) => {
-    const myToken = ++reqToken
-    try {
-      if (loadBtn && append) { loadBtn.textContent = "Loading…"; loadBtn.disabled = true }
-      // 切换筛选（非追加）时立即进入 loading 态：显示骨架 + 顶部进度条
-      if (!append && grid) {
-        grid.innerHTML = skeletonHtml(12)
-        grid.classList.add("is-loading")
-      }
-      const json = await getArticles({
-        page,
-        size: state.size,
-        sort: state.sort,
-        brand_ids: [...state.brand_ids],
-        collection_type: [...state.ct],
-        season: [...state.season],
-        year: [...state.year],
-        with_images: 6,
-      })
-      if (myToken !== reqToken) return // 已有更新的请求，丢弃本次结果
-      const rows: Item[] = json.data
-      state.total = json.total
-      state.page = page
-      grid?.classList.remove("is-loading")
-      renderItems(rows, append)
-      if (totalEl) totalEl.textContent = `${state.total || (grid?.querySelectorAll(".showscard").length ?? rows.length)} Shows`
-      const last = json.last_page
-      if (page >= last || rows.length < state.size) {
-        if (loadBtn) { loadBtn.textContent = "— End of Archive —"; loadBtn.disabled = true }
-      } else if (loadBtn) {
-        loadBtn.textContent = "Load More ↓"
-        loadBtn.disabled = false
-      }
-    } catch {
-      if (myToken !== reqToken) return
-      grid?.classList.remove("is-loading")
-      renderItems([], false)
-      if (totalEl) totalEl.textContent = "—"
-      if (loadBtn) { loadBtn.textContent = "Retry"; loadBtn.disabled = false }
-    }
-  }
-
-  if (loadBtn) loadBtn.addEventListener("click", () => loadPage(state.page + 1, true))
-
-  // 初次渲染
-  renderBrands()
-  revealImages(document) // 首屏 SSR 已渲染的卡片图片同样淡入
-  loadPage(1, false)
-</script>
-</content>
+  })
+</script>
\ No newline at end of file