diff --git a/CHANGELOG.md b/CHANGELOG.md
index a8835e9..f5bb556 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,7 +6,9 @@
 
 重构 46 个 HTML 图片模板：公共文档骨架、设计变量、基础样式和组件样式统一维护，页面仅保留内容与独有布局；渲染前在本地组合为完整 HTML 字符串。
 
-重新整理功能帮助页，按 17 个分类展示 69 项功能和 105 条指令，并优化桌面三列与窄屏单列排版。
+进一步组件化列表和卡片页面：表格、排行、技能/奇穴、奇遇网格、区服状态、器物详情等改为复用公共 CSS；页面专属 CSS 从 46 个减少至 13 个。模板通过元数据声明组件，加载器从单一组件样式表中选择性注入所需样式，并支持无同名 CSS 的标准页面及共享资源缓存。
+
+重新整理功能帮助页，按 17 个分类展示 69 项功能和 105 条指令，并按固定图片画布优化三列排版。
 
 ### version: 3.0：
 
diff --git a/README.md b/README.md
index 2b467aa..79b439b 100644
--- a/README.md
+++ b/README.md
@@ -412,14 +412,33 @@ flowchart LR
 
 图片默认使用质量 `100`、完整页面截图和普通设备缩放级别。模板可通过 `icons.img`、`icons.sect`、`icons.serendipity` 访问通用、门派/心法和奇遇图标。
 
-AstrBot 的渲染接口接收完整 HTML 字符串，因此插件不会依赖渲染端读取本地 CSS 文件。`core/template.py` 会异步读取并缓存公共布局、设计变量、基础样式、组件样式、页面专属样式和页面片段，组装完成后再把单个完整字符串交给渲染器。这样既满足渲染接口约束，也避免在 46 个页面中重复维护文档骨架和通用样式。
+AstrBot 的渲染接口接收完整 HTML 字符串，因此插件不会依赖渲染端读取本地 CSS 文件。`core/template.py` 会异步读取并缓存公共布局、设计变量、基础样式和组件样式，再按需读取页面专属样式及页面片段，组装完成后把单个完整字符串交给渲染器。共享资源只在首次请求时读取一次；标准页面没有同名 CSS 文件也可以正常组合。
+
+`styles/components.css` 是公共组件的唯一来源，内部使用 `@component` 标记划分表格、网格、能力卡片等组件块。页面通过顶部元数据声明需要的组件，加载器只把声明过的样式块注入最终 HTML，不会让只使用表格的页面同时携带技能卡片、器物卡片等无关 CSS：
+
+```html
+{# template-title: 角色榜单 #}
+{# template-components: data-table #}
+```
 
 样式职责如下：
 
 - `styles/tokens.css`：颜色、间距、圆角、字体和各页面内容宽度。
-- `styles/base.css`：页面背景、外框、基础排版和窄屏规则。
-- `styles/components.css`：信息面板、表格、状态、进度条、标签等跨页面组件。
-- `styles/pages/*.css`：只保留列宽、网格、卡片结构等页面独有布局。
+- `styles/base.css`：固定图片画布的页面背景、外框和基础排版。
+- `styles/components.css`：统一维护数据表格、列状态、排行、统计卡片、可配置列数网格、技能/奇穴卡片、奇遇卡片、器物详情、标签和空数据等跨页面组件。
+- `styles/pages/*.css`：可选，仅保留成本计算、成就、副本记录等无法合理复用的复杂页面布局。当前 46 个页面中只有 13 个需要专属 CSS。
+
+表格列数直接由模板中的 `<th>`、`<td>` 数量决定，不需要为四列、五列等情况分别创建样式。卡片网格通过 `--grid-columns` 配置列数，例如：
+
+```html
+<div class="card-grid" style="--grid-columns: 4">
+    ...
+</div>
+```
+
+数据页使用 `.data-table`、`.data-cell--rank`、`.data-cell--time`、`.data-cell--score` 等公共类；技能与奇穴使用 `.ability-card`，角色奇遇与区服状态使用 `.card-grid`，器物与家园装饰使用 `.object-card`。新增普通列表页面时应优先组合这些公共组件，不再创建内容重复的页面 CSS。
+
+这些模板不是响应式网页：每次查询只生成一个固定版式的完整 HTML 字符串，注入本次业务数据后由 AstrBot 使用 `full_page=True` 截取整页图片。样式不包含移动端断点；内容宽度由 `--jx3-page-width` 固定，列数由模板结构或 `--grid-columns` 明确决定，不随渲染服务的默认视口发生重排。
 
 ### 6. 本地数据与缓存
 
@@ -475,8 +494,8 @@ astrbot_plugin_jx3/
 │   ├── styles/
 │   │   ├── tokens.css       # 设计变量与页面宽度
 │   │   ├── base.css         # 全局背景、外框和排版
-│   │   ├── components.css   # 公共组件样式
-│   │   └── pages/*.css      # 页面独有布局
+│   │   ├── components.css   # 表格、网格、卡片、状态等公共组件
+│   │   └── pages/*.css      # 可选的复杂页面独有布局（当前 13 个）
 │   ├── img/                 # 通用图片资源
 │   ├── sect/                # 门派与心法图标
 │   └── serendipity/         # 奇遇图标
@@ -490,7 +509,7 @@ astrbot_plugin_jx3/
 
 1. 根据数据来源选择 `JX3APIService`、`AIJX3Service` 或 `JX3BOXService`。
 2. 在业务服务中新增异步方法，复用 `APIClient`，完成请求、空数据检查、字段整理和标准返回对象构建。
-3. 需要图片输出时新增或复用 `templates/pages/*.html`，并按需添加同名的 `templates/styles/pages/*.css`；通用视觉规则应进入公共样式层，不要在业务层拼装最终图片消息。
+3. 需要图片输出时新增或复用 `templates/pages/*.html`，优先组合 `data-table`、`card-grid`、`ability-card`、`object-card` 等公共组件，并通过 `template-components` 元数据声明所需组件；只有无法复用的复杂布局才添加同名的 `templates/styles/pages/*.css`，不要在业务层拼装最终图片消息。
 4. 在 `MessageBuilder` 中增加薄包装方法，选择文本、HTML 图片、远程图片、消息链或会话处理器。
 5. 在 `main.py` 的 `command_map` 注册触发词。
 6. 同步更新 `templates/pages/helps.html`、README 和 CHANGELOG，确保参数顺序以包装方法签名为准。
@@ -504,7 +523,7 @@ python -m compileall -q .
 python -m unittest tests.test_template_system -v
 ```
 
-模板测试会检查 46 个页面片段与同名样式是否一一对应、能否组合为完整文档、Jinja2 是否能够完成基础渲染，以及模板路径是否能阻止目录穿越。它和 `compileall` 仍不能替代带真实数据的 AstrBot 消息、HTML 渲染和外部接口联调。
+模板测试会检查 46 个页面片段、13 个可选页面样式、公共组件按声明选择性注入、完整文档组合、Jinja2 基础渲染，以及模板路径能否阻止目录穿越。它和 `compileall` 仍不能替代带真实数据的 AstrBot 消息、HTML 渲染和外部接口联调。
 
 ## 当前版本状态
 
diff --git a/core/async_task.py b/core/async_task.py
index 26ccaa7..e38da6a 100644
--- a/core/async_task.py
+++ b/core/async_task.py
@@ -107,7 +107,7 @@ class AsyncTask:
 
     async def init_tasks(self):
         settings = [
-            ("kfts", "开服监控", lambda: self.jx3fun.kaifu(self.server)),
+            ("kfts", "开服监控", lambda: self.jx3fun.kaifu("梦江南")),
             ("xwts", "新闻资讯", lambda: self.jx3fun.xinwen(1)),
             ("smts", "刷马消息", lambda: self.jx3fun.shuamamsg(self.server,type="horse",subtype="foreshow")),
             ("ctts", "赤兔消息", lambda: self.jx3fun.shuamamsg(self.server,type="chitu-horse",subtype="share_msg")),
diff --git a/core/jx3api_data.py b/core/jx3api_data.py
index 761c32b..007a884 100644
--- a/core/jx3api_data.py
+++ b/core/jx3api_data.py
@@ -1438,7 +1438,7 @@ class JX3APIService:
         """新闻资讯"""
         async def processor(data: Any, return_data: Dict[str, Any]) -> None:   
             result = data[0]
-            return_data["status"] = result.get('catid')
+            return_data["status"] = int(result.get('catid'))
 
             result_msg = "新闻资讯推送\n"
             # 仅展示前1条，避免消息过长
diff --git a/core/template.py b/core/template.py
index 5f8e131..828f45a 100644
--- a/core/template.py
+++ b/core/template.py
@@ -8,6 +8,15 @@ import aiofiles
 _TITLE_PATTERN = re.compile(
     r"\A\{# template-title: (.*?) #\}\r?\n",
 )
+_PAGE_COMPONENTS_PATTERN = re.compile(
+    r"\A\{# template-components: ([a-z0-9 -]+) #\}\r?\n",
+)
+_COMPONENT_STYLE_PATTERN = re.compile(
+    r"/\* @component (?P<name>[a-z0-9-]+) \*/\s*"
+    r"(?P<css>.*?)\s*"
+    r"/\* @endcomponent \*/",
+    re.DOTALL,
+)
 
 
 class TemplateRepository:
@@ -16,6 +25,7 @@ class TemplateRepository:
     def __init__(self, root: Path):
         self.root = root.resolve()
         self._cache: dict[str, str] = {}
+        self._shared_assets: tuple[str, str, str, str] | None = None
         self._lock = asyncio.Lock()
 
     async def _read(self, path: Path) -> str:
@@ -28,6 +38,26 @@ class TemplateRepository:
             raise ValueError(f"非法模板名称: {template_name}")
         return self.root / "pages" / name.name
 
+    @staticmethod
+    def _select_component_styles(source: str, requested: set[str]) -> str:
+        """从单一组件样式表中挑选当前页面声明的组件块。"""
+        matches = list(_COMPONENT_STYLE_PATTERN.finditer(source))
+        available = [match.group("name") for match in matches]
+        if len(available) != len(set(available)):
+            raise ValueError("公共组件样式存在重复名称")
+
+        unknown = requested.difference(available)
+        if unknown:
+            names = ", ".join(sorted(unknown))
+            raise ValueError(f"页面声明了不存在的公共组件: {names}")
+
+        return _COMPONENT_STYLE_PATTERN.sub(
+            lambda match: match.group("css")
+            if match.group("name") in requested
+            else "",
+            source,
+        )
+
     async def get(self, template_name: str) -> str:
         """读取并缓存组装后的完整模板字符串。"""
         cached = self._cache.get(template_name)
@@ -49,22 +79,39 @@ class TemplateRepository:
                 self._cache[template_name] = template
                 return template
 
+            if self._shared_assets is None:
+                self._shared_assets = tuple(
+                    await asyncio.gather(
+                        self._read(self.root / "layouts" / "base.html"),
+                        self._read(self.root / "styles" / "tokens.css"),
+                        self._read(self.root / "styles" / "base.css"),
+                        self._read(self.root / "styles" / "components.css"),
+                    )
+                )
+
+            base, tokens, base_css, component_source = self._shared_assets
             page_css_path = self.root / "styles" / "pages" / f"{page_path.stem}.css"
-            read_tasks = [
-                self._read(self.root / "layouts" / "base.html"),
-                self._read(self.root / "styles" / "tokens.css"),
-                self._read(self.root / "styles" / "base.css"),
-                self._read(page_path),
-                self._read(page_css_path),
-                self._read(self.root / "styles" / "components.css"),
-            ]
-            base, tokens, base_css, page, page_css, components = await asyncio.gather(
-                *read_tasks
-            )
+            if page_css_path.exists():
+                page, page_css = await asyncio.gather(
+                    self._read(page_path),
+                    self._read(page_css_path),
+                )
+            else:
+                page = await self._read(page_path)
+                page_css = ""
 
             title_match = _TITLE_PATTERN.match(page)
             title = title_match.group(1).strip() if title_match else "剑网三数据查询"
             content = _TITLE_PATTERN.sub("", page, count=1)
+            component_match = _PAGE_COMPONENTS_PATTERN.match(content)
+            requested_components = (
+                set(component_match.group(1).split()) if component_match else set()
+            )
+            content = _PAGE_COMPONENTS_PATTERN.sub("", content, count=1)
+            components = self._select_component_styles(
+                component_source,
+                requested_components,
+            )
 
             template = (
                 base.replace("__PAGE_ID__", page_path.stem)
@@ -94,6 +141,7 @@ class TemplateRepository:
     def clear(self) -> None:
         """清理内存缓存，主要用于开发和测试。"""
         self._cache.clear()
+        self._shared_assets = None
 
 
 _TEMPLATE_ROOT = Path(__file__).parent.parent / "templates"
diff --git a/main.py b/main.py
index c200680..541af3c 100644
--- a/main.py
+++ b/main.py
@@ -141,7 +141,7 @@ class Jx3ApiPlugin(Star):
             "sect": sect,
             "serendipity": serendipity
         }        
-        logger.debug(f"图片base64编码加载完成: {self.icons}")
+        logger.debug(f"图片base64编码加载完成")
 
 
     def create_all(self):
diff --git a/templates/pages/bangzhanjilu.html b/templates/pages/bangzhanjilu.html
index c443f91..a30a5ec 100644
--- a/templates/pages/bangzhanjilu.html
+++ b/templates/pages/bangzhanjilu.html
@@ -1,11 +1,12 @@
 {# template-title: 帮战记录 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>帮战记录</h1>
-    <div class="meta">{{ server }} ｜ 更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">{{ server }} ｜ 更新时间：{{ update_time }}</div>
 
-    <table>
+    <table class="data-table">
         <thead>
             <tr>
                 <th>宣战帮会</th>
@@ -19,14 +20,13 @@
         <tbody>
         {% for item in items %}
             <tr>
-                <td class="tong-col">{{ item.declaringName }}</td>
-                <td class="tong-col">{{ item.acceptingName }}</td>
-                <td class="time-col">{{ item.startTime }}</td>
-                <td class="duration-col">{{ item.durationSeconds }}</td>
-                <td class="time-col">{{ item.endTime }}</td>
+                <td class="data-cell--name data-cell--wide data-cell--max-wide data-cell--wrap">{{ item.declaringName }}</td>
+                <td class="data-cell--name data-cell--wide data-cell--max-wide data-cell--wrap">{{ item.acceptingName }}</td>
+                <td class="data-cell--time">{{ item.startTime }}</td>
+                <td class="data-cell--score data-cell--medium">{{ item.durationSeconds }}</td>
+                <td class="data-cell--time">{{ item.endTime }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 </div>
-
diff --git a/templates/pages/bilei.html b/templates/pages/bilei.html
index 02996c3..4344a16 100644
--- a/templates/pages/bilei.html
+++ b/templates/pages/bilei.html
@@ -1,10 +1,11 @@
 {# template-title: 避雷查看 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>避雷查看</h1>
 
-    <table>
+    <table class="data-table data-table--spaced">
         <thead>
             <tr>
                 <th>ID</th>
@@ -20,7 +21,7 @@
             <tr>
                 <td>{{ m.id }}</td>
                 <td>{{ m.name }}</td>
-                <td class="text-col">{{ m.text }}</td>
+                <td class="data-cell--copy">{{ m.text }}</td>
                 <td>{{ m.time }}</td>
                 <td>{{ m.user }}</td>
             </tr>
@@ -29,4 +30,3 @@
     </table>
 
 </div>
-
diff --git a/templates/pages/diaoluo.html b/templates/pages/diaoluo.html
index 9637487..04fe1b5 100644
--- a/templates/pages/diaoluo.html
+++ b/templates/pages/diaoluo.html
@@ -1,11 +1,12 @@
 {# template-title: 掉落记录 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>{{ name }} 掉落记录</h1>
-    <div class="meta">{{ server }} · 数量：{{ limit }} · 更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">{{ server }} · 数量：{{ limit }} · 更新时间：{{ update_time }}</div>
 
-    <table>
+    <table class="data-table">
         <thead>
             <tr>
                 <th>物品名称</th>
@@ -19,14 +20,13 @@
         <tbody>
         {% for item in items %}
             <tr>
-                <td class="item-col">{{ item.itemName }}</td>
-                <td class="server-col">{{ item.server }}</td>
-                <td class="map-col">{{ item.mapName }}</td>
-                <td class="role-col">{{ item.roleName }}</td>
-                <td class="time-col">{{ item.time }}</td>
+                <td class="data-cell--accent data-cell--medium data-cell--nowrap">{{ item.itemName }}</td>
+                <td class="data-cell--center data-cell--compact data-cell--nowrap">{{ item.server }}</td>
+                <td class="data-cell--max-wide data-cell--wrap">{{ item.mapName }}</td>
+                <td class="data-cell--name data-cell--max-wide data-cell--wrap">{{ item.roleName }}</td>
+                <td class="data-cell--time">{{ item.time }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 </div>
-
diff --git a/templates/pages/dilujilu.html b/templates/pages/dilujilu.html
index f1f15f5..681f15b 100644
--- a/templates/pages/dilujilu.html
+++ b/templates/pages/dilujilu.html
@@ -1,10 +1,11 @@
 {# template-title: 的卢记录 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>的卢记录</h1>
 
-    <table>
+    <table class="data-table data-table--spaced">
         <thead>
             <tr>
                 <th>服务器</th>
@@ -43,4 +44,3 @@
     </table>
 
 </div>
-
diff --git a/templates/pages/guanaishouling.html b/templates/pages/guanaishouling.html
index b471b25..2e900f0 100644
--- a/templates/pages/guanaishouling.html
+++ b/templates/pages/guanaishouling.html
@@ -1,14 +1,15 @@
 {# template-title: 关隘首领 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>关隘首领</h1>
-    <div class="meta">更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">更新时间：{{ update_time }}</div>
 
     {% for group in groups %}
-    <div class="section">
-        <div class="section-title">{{ group.server }}</div>
-        <table>
+    <div class="data-section">
+        <div class="data-section__title">{{ group.server }}</div>
+        <table class="data-table">
             <thead>
                 <tr>
                     <th>归属</th>
@@ -29,12 +30,12 @@
                         class="camp-haoqi"
                     {% endif %}
                 >
-                    <td class="camp-col">{{ item.camp_name }}</td>
-                    <td class="castle-col">{{ item.castle }}</td>
-                    <td class="status-col">{{ item.str_status }}</td>
-                    <td class="time-col">{{ item.start_time }}</td>
-                    <td class="time-col">{{ item.end_time }}</td>
-                    <td class="remain-col">{{ item.remaining_time }}</td>
+                    <td class="data-cell--camp data-cell--compact data-cell--center data-cell--nowrap data-cell--strong">{{ item.camp_name }}</td>
+                    <td class="data-cell--camp data-cell--name data-cell--medium data-cell--nowrap">{{ item.castle }}</td>
+                    <td class="data-cell--compact data-cell--center data-cell--nowrap data-cell--strong">{{ item.str_status }}</td>
+                    <td class="data-cell--time">{{ item.start_time }}</td>
+                    <td class="data-cell--time">{{ item.end_time }}</td>
+                    <td class="data-cell--time data-cell--accent">{{ item.remaining_time }}</td>
                 </tr>
             {% endfor %}
             </tbody>
@@ -42,4 +43,3 @@
     </div>
     {% endfor %}
 </div>
-
diff --git a/templates/pages/huajia.html b/templates/pages/huajia.html
index 07d0c1b..e9ea012 100644
--- a/templates/pages/huajia.html
+++ b/templates/pages/huajia.html
@@ -1,7 +1,8 @@
 {# template-title: 花价查询 #}
+{# template-components: data-table data-extras #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>花价查询（{{ server }}）</h1>
 
     {% for map_name in [
@@ -13,9 +14,9 @@
     ] %}
 
         {% if data.get(map_name) %}
-        <h2>{{ map_name }}</h2>
+        <h2 class="data-subtitle">{{ map_name }}</h2>
 
-        <table>
+        <table class="data-table">
             <thead>
                 <tr>
                     <th>名称</th>
@@ -35,8 +36,8 @@
                             <span class="empty">—</span>
                         {% endif %}
                     </td>
-                    <td class="price">{{ item.price }}</td>
-                    <td class="lines">
+                    <td class="data-price">{{ item.price }}</td>
+                    <td class="data-note">
                         {{ item.line | join('、') }}
                     </td>
                 </tr>
@@ -47,4 +48,3 @@
 
     {% endfor %}
 </div>
-
diff --git a/templates/pages/jineng.html b/templates/pages/jineng.html
index d09afbd..7dae987 100644
--- a/templates/pages/jineng.html
+++ b/templates/pages/jineng.html
@@ -1,38 +1,39 @@
 {# template-title: 技能详情 #}
+{# template-components: data-layout ability-card #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>{{ name }} 技能详情</h1>
-    <div class="meta">更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">更新时间：{{ update_time }}</div>
 
     {% for group in groups %}
-    <div class="section">
-        <div class="section-title">{{ group.title }}</div>
-        <div class="cards">
+    <div class="data-section">
+        <div class="data-section__title">{{ group.title }}</div>
+        <div class="card-grid" style="--grid-columns: 2; --grid-gap: 14px">
             {% for skill in group.skills %}
-            <div class="card">
+            <div class="ability-card">
                 {% if skill.icon %}
-                <img class="icon" src="{{ skill.icon }}" alt="{{ skill.name }}">
+                <img class="ability-card__icon" src="{{ skill.icon }}" alt="{{ skill.name }}">
                 {% else %}
-                <div class="icon"></div>
+                <div class="ability-card__icon"></div>
                 {% endif %}
                 <div>
-                    <div class="head">
-                        <span class="name">{{ skill.name }}</span>
+                    <div class="ability-card__head">
+                        <span class="ability-card__name">{{ skill.name }}</span>
                         {% if skill.interval %}
-                        <span class="tag">{{ skill.interval }}</span>
+                        <span class="ability-card__tag">{{ skill.interval }}</span>
                         {% endif %}
                         {% if skill.distance %}
-                        <span class="tag">{{ skill.distance }}</span>
+                        <span class="ability-card__tag">{{ skill.distance }}</span>
                         {% endif %}
                         {% if skill.release_type %}
-                        <span class="tag">{{ skill.release_type }}</span>
+                        <span class="ability-card__tag">{{ skill.release_type }}</span>
                         {% endif %}
                         {% if skill.weapon %}
-                        <span class="tag">{{ skill.weapon }}</span>
+                        <span class="ability-card__tag">{{ skill.weapon }}</span>
                         {% endif %}
                     </div>
-                    <div class="desc">{{ skill.desc }}</div>
+                    <div class="ability-card__desc">{{ skill.desc }}</div>
                 </div>
             </div>
             {% endfor %}
@@ -40,4 +41,3 @@
     </div>
     {% endfor %}
 </div>
-
diff --git a/templates/pages/jingnai.html b/templates/pages/jingnai.html
index 602d797..a6df145 100644
--- a/templates/pages/jingnai.html
+++ b/templates/pages/jingnai.html
@@ -1,26 +1,27 @@
 {# template-title: 精耐查询 #}
+{# template-components: data-table data-layout #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>{{ server }} - {{ role_name }}</h1>
-    <div class="meta">更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">更新时间：{{ update_time }}</div>
 
-    <div class="summary">
-        <div class="stat">
-            <div class="label">精力</div>
-            <div class="value">{{ skill_energy }}</div>
+    <div class="stat-grid" style="--grid-columns: 3">
+        <div class="stat-card">
+            <div class="stat-card__label">精力</div>
+            <div class="stat-card__value">{{ skill_energy }}</div>
         </div>
-        <div class="stat">
-            <div class="label">耐力</div>
-            <div class="value">{{ skill_stamina }}</div>
+        <div class="stat-card">
+            <div class="stat-card__label">耐力</div>
+            <div class="stat-card__value">{{ skill_stamina }}</div>
         </div>
-        <div class="stat">
-            <div class="label">技能数量</div>
-            <div class="value">{{ skill_count }}</div>
+        <div class="stat-card">
+            <div class="stat-card__label">技能数量</div>
+            <div class="stat-card__value">{{ skill_count }}</div>
         </div>
     </div>
 
-    <table>
+    <table class="data-table">
         <thead>
             <tr>
                 <th>技能名称</th>
@@ -33,13 +34,12 @@
         <tbody>
         {% for item in items %}
             <tr>
-                <td class="skill-col">{{ item.szSkillName }}</td>
-                <td class="leader-col">{{ item.szBossName }}</td>
-                <td class="color-col">{{ item.skill_color_text }}</td>
-                <td class="level-col">{{ item.nLevel }}</td>
+                <td class="data-cell--name data-cell--wrap">{{ item.szSkillName }}</td>
+                <td class="data-cell--wrap">{{ item.szBossName }}</td>
+                <td class="data-cell--center data-cell--nowrap data-cell--strong">{{ item.skill_color_text }}</td>
+                <td class="data-cell--score">{{ item.nLevel }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 </div>
-
diff --git a/templates/pages/jinjia.html b/templates/pages/jinjia.html
index 3222030..3775182 100644
--- a/templates/pages/jinjia.html
+++ b/templates/pages/jinjia.html
@@ -1,10 +1,11 @@
 {# template-title: 区服各平台金价 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>区服各平台金价</h1>
 
-    <table>
+    <table class="data-table data-table--spaced">
         <thead>
             <tr>
                 <th>服务器</th>
@@ -35,4 +36,3 @@
     </table>
 
 </div>
-
diff --git a/templates/pages/jinqiqiyu.html b/templates/pages/jinqiqiyu.html
index a998163..23e9b72 100644
--- a/templates/pages/jinqiqiyu.html
+++ b/templates/pages/jinqiqiyu.html
@@ -1,11 +1,12 @@
 {# template-title: 近期奇遇 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>{{ server }} 近期奇遇</h1>
-    <div class="meta">更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">更新时间：{{ update_time }}</div>
 
-    <table>
+    <table class="data-table data-table--nowrap">
         <thead>
             <tr>
                 <th>区服</th>
@@ -19,13 +20,12 @@
         {% for m in items %}
             <tr>
                 <td>{{ m.server }}</td>
-                <td class="role-col">{{ m.name }}</td>
-                <td class="event-col">{{ m.event }}</td>
-                <td class="time-col">{{ m.time }}</td>
+                <td class="data-cell--name">{{ m.name }}</td>
+                <td class="data-cell--strong">{{ m.event }}</td>
+                <td class="data-cell--muted data-cell--numeric">{{ m.time }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 
 </div>
-
diff --git a/templates/pages/juesheqiyu.html b/templates/pages/juesheqiyu.html
index 1e836ce..32f9182 100644
--- a/templates/pages/juesheqiyu.html
+++ b/templates/pages/juesheqiyu.html
@@ -1,66 +1,66 @@
 {# template-title: 角色奇遇 #}
+{# template-components: data-layout collection-card #}
 
 
     <!-- 普通奇遇 -->
-    <div class="section">
-        <div class="section-title">普通奇遇（{{ ptqy|length if ptqy else 0 }}）</div>
+    <div class="collection-section">
+        <div class="collection-heading">普通奇遇（{{ ptqy|length if ptqy else 0 }}）</div>
         {% if ptqy %}
-        <div class="card-container">
+        <div class="card-grid" style="--grid-columns: 4">
             {% for item in ptqy %}
-            <div class="card">
+            <div class="collection-card">
                 {% if icons.serendipity.get(item.event) %}
-                <img src="{{ icons.serendipity[item.event] }}" alt="{{ item.event }}">
+                <img class="collection-card__image" src="{{ icons.serendipity[item.event] }}" alt="{{ item.event }}">
                 {% else %}
-                <div class="event-name">{{ item.event }}</div>
+                <div class="collection-card__name">{{ item.event }}</div>
                 {% endif %}
-                <div class="time">{{ item.time }}</div>
+                <div class="collection-card__meta">{{ item.time }}</div>
             </div>
             {% endfor %}
         </div>
         {% else %}
-        <div class="empty">暂无普通奇遇</div>
+        <div class="collection-empty">暂无普通奇遇</div>
         {% endif %}
     </div>
 
     <!-- 绝世奇遇 -->
-    <div class="section">
-        <div class="section-title">绝世奇遇（{{ jsqy|length if jsqy else 0 }}）</div>
+    <div class="collection-section">
+        <div class="collection-heading">绝世奇遇（{{ jsqy|length if jsqy else 0 }}）</div>
         {% if jsqy %}
-        <div class="card-container">
+        <div class="card-grid" style="--grid-columns: 4">
             {% for item in jsqy %}
-            <div class="card">
+            <div class="collection-card">
                 {% if icons.serendipity.get(item.event) %}
-                <img src="{{ icons.serendipity[item.event] }}" alt="{{ item.event }}">
+                <img class="collection-card__image" src="{{ icons.serendipity[item.event] }}" alt="{{ item.event }}">
                 {% else %}
-                <div class="event-name">{{ item.event }}</div>
+                <div class="collection-card__name">{{ item.event }}</div>
                 {% endif %}
-                <div class="time">{{ item.time }}</div>
+                <div class="collection-card__meta">{{ item.time }}</div>
             </div>
             {% endfor %}
         </div>
         {% else %}
-        <div class="empty">暂无绝世奇遇</div>
+        <div class="collection-empty">暂无绝世奇遇</div>
         {% endif %}
     </div>
 
     <!-- 宠物奇遇 -->
-    <div class="section">
-        <div class="section-title">宠物奇遇（{{ cwqy|length if cwqy else 0 }}）</div>
+    <div class="collection-section">
+        <div class="collection-heading">宠物奇遇（{{ cwqy|length if cwqy else 0 }}）</div>
         {% if cwqy %}
-        <div class="card-container">
+        <div class="card-grid" style="--grid-columns: 4">
             {% for item in cwqy %}
-            <div class="card">
+            <div class="collection-card">
                 {% if icons.serendipity.get(item.event) %}
-                <img src="{{ icons.serendipity[item.event] }}" alt="{{ item.event }}">
+                <img class="collection-card__image" src="{{ icons.serendipity[item.event] }}" alt="{{ item.event }}">
                 {% else %}
-                <div class="event-name">{{ item.event }}</div>
+                <div class="collection-card__name">{{ item.event }}</div>
                 {% endif %}
-                <div class="time">{{ item.time }}</div>
+                <div class="collection-card__meta">{{ item.time }}</div>
             </div>
             {% endfor %}
         </div>
         {% else %}
-        <div class="empty">暂无宠物奇遇</div>
+        <div class="collection-empty">暂无宠物奇遇</div>
         {% endif %}
     </div>
-
diff --git a/templates/pages/mingjianpaihang.html b/templates/pages/mingjianpaihang.html
index c263e5e..b0fc033 100644
--- a/templates/pages/mingjianpaihang.html
+++ b/templates/pages/mingjianpaihang.html
@@ -1,10 +1,11 @@
 {# template-title: 竞技排行榜 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>名剑排行榜</h1>
 
-    <table>
+    <table class="data-table data-table--spaced">
         <thead>
             <tr>
                 <th>排名</th>
@@ -20,7 +21,7 @@
         <tbody>
         {% for m in lists %}
             <tr>
-                <td class="
+                <td class="data-cell--rank
                     {% if m.rankNum == '1' %}rank-1{% endif %}
                     {% if m.rankNum == '2' %}rank-2{% endif %}
                     {% if m.rankNum == '3' %}rank-3{% endif %}
@@ -29,7 +30,7 @@
                 </td>
 
                 <td>
-                    <img class="avatar" src="{{ m.avatarUrl }}">
+                    <img class="data-avatar" src="{{ m.avatarUrl }}">
                 </td>
 
                 <td>{{ m.roleName }}</td>
@@ -40,11 +41,10 @@
 
                 <td>{{ m.score }}</td>
 
-                <td class="winrate">{{ m.winRate }}</td>
+                <td class="winrate data-cell--numeric">{{ m.winRate }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 
 </div>
-
diff --git a/templates/pages/mingjiantongji.html b/templates/pages/mingjiantongji.html
index f02f545..0a70e6b 100644
--- a/templates/pages/mingjiantongji.html
+++ b/templates/pages/mingjiantongji.html
@@ -1,11 +1,12 @@
 {# template-title: 名剑统计 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>名剑统计(前1000) · {{ mode }}</h1>
-    <div class="meta">更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">更新时间：{{ update_time }}</div>
 
-    <table>
+    <table class="data-table data-table--nowrap">
         <thead>
             <tr>
                 <th>门派</th>
@@ -18,19 +19,18 @@
         {% for m in items %}
             <tr>
                 <td>
-                    <div class="school">
+                    <div class="icon-label">
                         {% if icons.sect.get(m.forceName) %}
-                        <img class="school-icon" src="{{ icons.sect[m.forceName] }}" alt="{{ m.forceName }}">
+                        <img class="icon-label__icon" src="{{ icons.sect[m.forceName] }}" alt="{{ m.forceName }}">
                         {% endif %}
                         <span>{{ m.forceName }}</span>
                     </div>
                 </td>
-                <td class="num-col">{{ m.thisWeek }}</td>
-                <td class="num-col">{{ m.lastWeek }}</td>
+                <td class="data-cell--score">{{ m.thisWeek }}</td>
+                <td class="data-cell--score">{{ m.lastWeek }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 
 </div>
-
diff --git a/templates/pages/qiwu.html b/templates/pages/qiwu.html
index affb57c..0072b9f 100644
--- a/templates/pages/qiwu.html
+++ b/templates/pages/qiwu.html
@@ -1,54 +1,55 @@
 {# template-title: 地图装饰器物 #}
+{# template-components: object-card #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>地图装饰器物({{ name }})</h1>
 
     {% for item in data %}
-    <div class="item">
-        <img src="{{ item.image }}" alt="{{ item.name }}">
+    <div class="object-card">
+        <img class="object-card__image" src="{{ item.image }}" alt="{{ item.name }}">
 
-        <div class="info">
-            <div class="name q{{ item.color }}">
+        <div class="object-card__content">
+            <div class="object-card__title quality-{{ item.color }}">
                 {{ item.name }}
             </div>
 
-            <div class="meta">
+            <div class="object-card__meta">
                 <span>来源：{{ item.source }}</span>
                 <span>数量限制：{{ item.limit }}</span>
                 <span>品质值：{{ item.quality }}</span>
             </div>
 
             {% if item.tip %}
-            <div class="tip">
+            <div class="object-card__tip">
                 {{ item.tip }}
             </div>
             {% endif %}
 
-            <div class="attrs">
-                <div class="attr">
-                    <div class="attr-name">观赏</div>
-                    <div class="attr-value">{{ item.view }}</div>
+            <div class="object-stats" style="--grid-columns: 5">
+                <div class="object-stat">
+                    <div class="object-stat__label">观赏</div>
+                    <div class="object-stat__value">{{ item.view }}</div>
                 </div>
-                <div class="attr">
-                    <div class="attr-name">实用</div>
-                    <div class="attr-value">{{ item.practical }}</div>
+                <div class="object-stat">
+                    <div class="object-stat__label">实用</div>
+                    <div class="object-stat__value">{{ item.practical }}</div>
                 </div>
-                <div class="attr">
-                    <div class="attr-name">坚固</div>
-                    <div class="attr-value">{{ item.hard }}</div>
+                <div class="object-stat">
+                    <div class="object-stat__label">坚固</div>
+                    <div class="object-stat__value">{{ item.hard }}</div>
                 </div>
-                <div class="attr">
-                    <div class="attr-name">风水</div>
-                    <div class="attr-value">{{ item.geomantic }}</div>
+                <div class="object-stat">
+                    <div class="object-stat__label">风水</div>
+                    <div class="object-stat__value">{{ item.geomantic }}</div>
                 </div>
-                <div class="attr">
-                    <div class="attr-name">趣味</div>
-                    <div class="attr-value">{{ item.interesting }}</div>
+                <div class="object-stat">
+                    <div class="object-stat__label">趣味</div>
+                    <div class="object-stat__value">{{ item.interesting }}</div>
                 </div>
             </div>
 
-            <div class="footer">
+            <div class="object-card__footer">
                 建筑适配：{{ item.architecture }}　
                 {% if item.produce %}
                     ｜制作门派：{{ item.produce }}
@@ -61,4 +62,3 @@
     {% endfor %}
 
 </div>
-
diff --git a/templates/pages/qixue.html b/templates/pages/qixue.html
index cf8fe1f..31e5104 100644
--- a/templates/pages/qixue.html
+++ b/templates/pages/qixue.html
@@ -1,30 +1,31 @@
 {# template-title: 奇穴详情 #}
+{# template-components: data-layout ability-card #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>{{ name }} 奇穴详情</h1>
-    <div class="meta">更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">更新时间：{{ update_time }}</div>
 
     {% for group in groups %}
-    <div class="section">
-        <div class="section-title">{{ group['title'] }}</div>
-        <div class="cards">
+    <div class="data-section">
+        <div class="data-section__title">{{ group['title'] }}</div>
+        <div class="card-grid" style="--grid-columns: 2; --grid-gap: 14px">
             {% for item in group.talents %}
-            <div class="card">
+            <div class="ability-card">
                 {% if item['icon'] %}
-                <img class="icon" src="{{ item['icon'] }}" alt="{{ item['name'] }}">
+                <img class="ability-card__icon" src="{{ item['icon'] }}" alt="{{ item['name'] }}">
                 {% else %}
-                <div class="icon"></div>
+                <div class="ability-card__icon"></div>
                 {% endif %}
                 <div>
-                    <div class="head">
-                        <span class="name">{{ item['name'] }}</span>
-                        <span class="tag">{{ item['class_text'] }}</span>
+                    <div class="ability-card__head">
+                        <span class="ability-card__name">{{ item['name'] }}</span>
+                        <span class="ability-card__tag ability-card__tag--accent">{{ item['class_text'] }}</span>
                         {% if item['interval'] %}
-                        <span class="interval">{{ item['interval'] }}</span>
+                        <span class="ability-card__tag">{{ item['interval'] }}</span>
                         {% endif %}
                     </div>
-                    <div class="desc">{{ item['desc'] }}</div>
+                    <div class="ability-card__desc">{{ item['desc'] }}</div>
                 </div>
             </div>
             {% endfor %}
@@ -32,4 +33,3 @@
     </div>
     {% endfor %}
 </div>
-
diff --git a/templates/pages/qiyuhuizong.html b/templates/pages/qiyuhuizong.html
index cc93cb2..4d190c9 100644
--- a/templates/pages/qiyuhuizong.html
+++ b/templates/pages/qiyuhuizong.html
@@ -1,11 +1,12 @@
 {# template-title: 奇遇汇总 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>{{ server }} 奇遇汇总</h1>
-    <div class="meta">最近 {{ num }} 天 · 更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">最近 {{ num }} 天 · 更新时间：{{ update_time }}</div>
 
-    <table>
+    <table class="data-table data-table--nowrap">
         <thead>
             <tr>
                 <th>区服</th>
@@ -20,14 +21,13 @@
         {% for m in items %}
             <tr>
                 <td>{{ m.server }}</td>
-                <td class="event-col">{{ m.event }}</td>
-                <td class="count-col">{{ m.count }}</td>
-                <td class="role-col">{{ m.latest_name }}</td>
-                <td class="time-col">{{ m.latest_time }}</td>
+                <td class="data-cell--strong">{{ m.event }}</td>
+                <td class="data-cell--score">{{ m.count }}</td>
+                <td class="data-cell--name">{{ m.latest_name }}</td>
+                <td class="data-cell--muted data-cell--numeric">{{ m.latest_time }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 
 </div>
-
diff --git a/templates/pages/qiyuliebiao.html b/templates/pages/qiyuliebiao.html
index 721f136..7747cd6 100644
--- a/templates/pages/qiyuliebiao.html
+++ b/templates/pages/qiyuliebiao.html
@@ -1,10 +1,11 @@
 {# template-title: 区服奇遇 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>区服奇遇</h1>
 
-    <table>
+    <table class="data-table data-table--spaced">
         <thead>
             <tr>
                 <th>奇遇名称</th>
@@ -27,4 +28,3 @@
     </table>
 
 </div>
-
diff --git a/templates/pages/qufuzhuangtai.html b/templates/pages/qufuzhuangtai.html
index dd0fde9..1734b39 100644
--- a/templates/pages/qufuzhuangtai.html
+++ b/templates/pages/qufuzhuangtai.html
@@ -1,45 +1,45 @@
 {# template-title: 区服状态面板 #}
+{# template-components: data-layout collection-card #}
 
 
     <!-- 无界区 -->
-    <div class="section">
-        <div class="section-title">无界区（{{ server_wj|length if server_wj else 0 }}）</div>
+    <div class="collection-section">
+        <div class="collection-heading">无界区（{{ server_wj|length if server_wj else 0 }}）</div>
         {% if server_wj %}
-        <div class="card-container">
+        <div class="card-grid" style="--grid-columns: 4">
             {% for item in server_wj %}
-            <div class="card {{ item.status }}">{{ item.server }}</div>
+            <div class="server-status-card {{ item.status }}">{{ item.server }}</div>
             {% endfor %}
         </div>
         {% else %}
-        <div class="empty">暂无数据</div>
+        <div class="collection-empty">暂无数据</div>
         {% endif %}
     </div>
 
     <!-- 电信区 -->
-    <div class="section">
-        <div class="section-title">电信区（{{ server_dx|length if server_dx else 0 }}）</div>
+    <div class="collection-section">
+        <div class="collection-heading">电信区（{{ server_dx|length if server_dx else 0 }}）</div>
         {% if server_dx %}
-        <div class="card-container">
+        <div class="card-grid" style="--grid-columns: 4">
             {% for item in server_dx %}
-            <div class="card {{ item.status }}">{{ item.server }}</div>
+            <div class="server-status-card {{ item.status }}">{{ item.server }}</div>
             {% endfor %}
         </div>
         {% else %}
-        <div class="empty">暂无数据</div>
+        <div class="collection-empty">暂无数据</div>
         {% endif %}
     </div>
 
     <!-- 双线区 -->
-    <div class="section">
-        <div class="section-title">双线区（{{ server_sx|length if server_sx else 0 }}）</div>
+    <div class="collection-section">
+        <div class="collection-heading">双线区（{{ server_sx|length if server_sx else 0 }}）</div>
         {% if server_sx %}
-        <div class="card-container">
+        <div class="card-grid" style="--grid-columns: 4">
             {% for item in server_sx %}
-            <div class="card {{ item.status }}">{{ item.server }}</div>
+            <div class="server-status-card {{ item.status }}">{{ item.server }}</div>
             {% endfor %}
         </div>
         {% else %}
-        <div class="empty">暂无数据</div>
+        <div class="collection-empty">暂无数据</div>
         {% endif %}
     </div>
-
diff --git a/templates/pages/rank_role.html b/templates/pages/rank_role.html
index 48e5951..248b47a 100644
--- a/templates/pages/rank_role.html
+++ b/templates/pages/rank_role.html
@@ -1,11 +1,12 @@
 {# template-title: 角色榜单 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>{{ rank_name }}</h1>
-    <div class="meta">{{ server }} · 更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">{{ server }} · 更新时间：{{ update_time }}</div>
 
-    <table>
+    <table class="data-table">
         <thead>
             <tr>
                 <th>排名</th>
@@ -21,23 +22,22 @@
         <tbody>
         {% for item in items %}
             <tr>
-                <td class="rank-col">{{ loop.index }}</td>
+                <td class="data-cell--rank">{{ loop.index }}</td>
                 <td>
-                    <div class="force">
+                    <div class="icon-label">
                         {% if icons.sect.get(item.forceName) %}
-                        <img class="force-icon" src="{{ icons.sect[item.forceName] }}" alt="{{ item.forceName }}">
+                        <img class="icon-label__icon" src="{{ icons.sect[item.forceName] }}" alt="{{ item.forceName }}">
                         {% endif %}
                         <span>{{ item.forceName }}</span>
                     </div>
                 </td>
-                <td class="role-col">{{ item.name }}</td>
-                <td class="level-col">{{ item.level }}</td>
-                <td class="camp-col">{{ item.campName }}</td>
-                <td class="tong-col">{{ item.tongName }}</td>
-                <td class="score-col">{{ item.totalScore }}</td>
+                <td class="data-cell--name data-cell--medium data-cell--nowrap">{{ item.name }}</td>
+                <td class="data-cell--center data-cell--nowrap">{{ item.level }}</td>
+                <td class="data-cell--center data-cell--nowrap">{{ item.campName }}</td>
+                <td class="data-cell--max-wide data-cell--wrap">{{ item.tongName }}</td>
+                <td class="data-cell--score">{{ item.totalScore }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 </div>
-
diff --git a/templates/pages/rank_tong0.html b/templates/pages/rank_tong0.html
index 643827f..1d97235 100644
--- a/templates/pages/rank_tong0.html
+++ b/templates/pages/rank_tong0.html
@@ -1,11 +1,12 @@
 {# template-title: 帮会榜单 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>{{ rank_name }}</h1>
-    <div class="meta">{{ server }} · 更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">{{ server }} · 更新时间：{{ update_time }}</div>
 
-    <table>
+    <table class="data-table">
         <thead>
             <tr>
                 <th>排名</th>
@@ -20,15 +21,14 @@
         <tbody>
         {% for item in items %}
             <tr>
-                <td class="rank-col">{{ loop.index }}</td>
-                <td class="tong-col">{{ item.tongName }}</td>
-                <td class="master-col">{{ item.masterName }}</td>
-                <td class="castle-col">{{ item.castleName }}</td>
-                <td class="people-col">{{ item.memberCount }}/{{ item.maxMemberCount }}</td>
-                <td class="score-col">{{ item.titlePoint }}</td>
+                <td class="data-cell--rank">{{ loop.index }}</td>
+                <td class="data-cell--name data-cell--xwide data-cell--wrap">{{ item.tongName }}</td>
+                <td class="data-cell--name data-cell--wide data-cell--wrap">{{ item.masterName }}</td>
+                <td class="data-cell--muted data-cell--medium data-cell--wrap">{{ item.castleName }}</td>
+                <td class="data-cell--center data-cell--nowrap data-cell--numeric">{{ item.memberCount }}/{{ item.maxMemberCount }}</td>
+                <td class="data-cell--score">{{ item.titlePoint }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 </div>
-
diff --git a/templates/pages/rank_tong1.html b/templates/pages/rank_tong1.html
index dcf7420..ec78491 100644
--- a/templates/pages/rank_tong1.html
+++ b/templates/pages/rank_tong1.html
@@ -1,11 +1,12 @@
 {# template-title: 帮会榜单 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>{{ rank_name }}</h1>
-    <div class="meta">{{ server }} · 更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">{{ server }} · 更新时间：{{ update_time }}</div>
 
-    <table>
+    <table class="data-table">
         <thead>
             <tr>
                 <th>排名</th>
@@ -19,14 +20,13 @@
         <tbody>
         {% for item in items %}
             <tr>
-                <td class="rank-col">{{ loop.index }}</td>
-                <td class="tong-col">{{ item.tongName }}</td>
-                <td class="master-col">{{ item.masterName }}</td>
-                <td class="people-col">{{ item.maxLimit }}</td>
-                <td class="score-col">{{ item.totalScore }}</td>
+                <td class="data-cell--rank">{{ loop.index }}</td>
+                <td class="data-cell--name data-cell--xwide data-cell--wrap">{{ item.tongName }}</td>
+                <td class="data-cell--name data-cell--wide data-cell--wrap">{{ item.masterName }}</td>
+                <td class="data-cell--center data-cell--nowrap data-cell--numeric">{{ item.maxLimit }}</td>
+                <td class="data-cell--score">{{ item.totalScore }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 </div>
-
diff --git a/templates/pages/rank_tong2.html b/templates/pages/rank_tong2.html
index 4db5f32..5e876be 100644
--- a/templates/pages/rank_tong2.html
+++ b/templates/pages/rank_tong2.html
@@ -1,11 +1,12 @@
 {# template-title: 帮会榜单 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>{{ rank_name }}</h1>
-    <div class="meta">{{ server }} · 更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">{{ server }} · 更新时间：{{ update_time }}</div>
 
-    <table>
+    <table class="data-table">
         <thead>
             <tr>
                 <th>排名</th>
@@ -18,13 +19,12 @@
         <tbody>
         {% for item in items %}
             <tr>
-                <td class="rank-col">{{ loop.index }}</td>
-                <td class="tong-col">{{ item.tongName }}</td>
-                <td class="master-col">{{ item.masterName }}</td>
-                <td class="score-col">{{ item.key }}</td>
+                <td class="data-cell--rank">{{ loop.index }}</td>
+                <td class="data-cell--name data-cell--xwide data-cell--wrap">{{ item.tongName }}</td>
+                <td class="data-cell--name data-cell--wide data-cell--wrap">{{ item.masterName }}</td>
+                <td class="data-cell--score">{{ item.key }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 </div>
-
diff --git a/templates/pages/shilianpaixing.html b/templates/pages/shilianpaixing.html
index d1ac6b5..b407728 100644
--- a/templates/pages/shilianpaixing.html
+++ b/templates/pages/shilianpaixing.html
@@ -1,11 +1,12 @@
 {# template-title: 试炼排行 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>{{ name }} 试炼排行</h1>
-    <div class="meta">{{ server }} ｜ 更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">{{ server }} ｜ 更新时间：{{ update_time }}</div>
 
-    <table>
+    <table class="data-table">
         <thead>
             <tr>
                 <th>排名</th>
@@ -19,14 +20,13 @@
         <tbody>
         {% for item in items %}
             <tr>
-                <td class="rank-col">{{ loop.index }}</td>
-                <td class="role-col">{{ item.role_name }}</td>
-                <td class="number-col">{{ item.equip_score }}</td>
-                <td class="number-col">{{ item.max_level }}</td>
-                <td class="number-col score-col">{{ item.total_score }}</td>
+                <td class="data-cell--rank">{{ loop.index }}</td>
+                <td class="data-cell--name data-cell--wide">{{ item.role_name }}</td>
+                <td class="data-cell--center data-cell--nowrap data-cell--numeric">{{ item.equip_score }}</td>
+                <td class="data-cell--center data-cell--nowrap data-cell--numeric">{{ item.max_level }}</td>
+                <td class="data-cell--score">{{ item.total_score }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 </div>
-
diff --git a/templates/pages/shitu.html b/templates/pages/shitu.html
index 540e2d2..fe10069 100644
--- a/templates/pages/shitu.html
+++ b/templates/pages/shitu.html
@@ -1,15 +1,16 @@
 {# template-title: 师徒招募 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>{{ title }}</h1>
-    <div class="meta">
+    <div class="data-page__meta">
         {{ server }}
         {% if keyword %} · 关键词：{{ keyword }}{% endif %}
         · 更新时间：{{ update_time }}
     </div>
 
-    <table>
+    <table class="data-table">
         <thead>
             <tr>
                 <th>职业</th>
@@ -25,24 +26,23 @@
         <tbody>
         {% for item in items %}
             <tr>
-                <td class="force-col">
-                    <div class="force">
+                <td class="data-cell--medium">
+                    <div class="icon-label">
                         {% if icons.sect.get(item.forceName) %}
-                        <img class="force-icon" src="{{ icons.sect[item.forceName] }}" alt="{{ item.forceName }}">
+                        <img class="icon-label__icon" src="{{ icons.sect[item.forceName] }}" alt="{{ item.forceName }}">
                         {% endif %}
                         <span>{{ item.forceName }}</span>
                     </div>
                 </td>
-                <td class="name-col">{{ item.roleName }}</td>
-                <td class="small-col">{{ item.roleLevel }}</td>
-                <td class="small-col">{{ item.bodyName }}</td>
+                <td class="data-cell--name data-cell--nowrap">{{ item.roleName }}</td>
+                <td class="data-cell--center data-cell--nowrap">{{ item.roleLevel }}</td>
+                <td class="data-cell--center data-cell--nowrap">{{ item.bodyName }}</td>
                 <td>{{ item.tongName }}</td>
-                <td class="small-col">{{ item.campName }}</td>
-                <td class="comment-col">{{ item.comment }}</td>
+                <td class="data-cell--center data-cell--nowrap">{{ item.campName }}</td>
+                <td class="data-cell--copy">{{ item.comment }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 
 </div>
-
diff --git a/templates/pages/tuanduizhaomu.html b/templates/pages/tuanduizhaomu.html
index 4a6a1c3..a95da88 100644
--- a/templates/pages/tuanduizhaomu.html
+++ b/templates/pages/tuanduizhaomu.html
@@ -1,10 +1,11 @@
 {# template-title: 团队招募 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>团队招募</h1>
 
-    <table>
+    <table class="data-table data-table--spaced">
         <thead>
             <tr>
                 <th>副本名称</th>
@@ -22,11 +23,10 @@
                 <td>{{ m.roleName }}</td>
                 <td>{{ m.createTime }}</td>
                 <td>{{ m.maxMemberCount }}</td>
-                <td>{{ m.commentText }}</td>
+                <td class="data-cell--copy">{{ m.commentText }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 
 </div>
-
diff --git a/templates/pages/weizuoqiyu.html b/templates/pages/weizuoqiyu.html
index bbc640e..a5653f7 100644
--- a/templates/pages/weizuoqiyu.html
+++ b/templates/pages/weizuoqiyu.html
@@ -1,46 +1,47 @@
 {# template-title: 未做奇遇 #}
+{# template-components: data-layout collection-card #}
 
-    <div class="header">
-        <div class="title">未做奇遇</div>
-        <div class="meta">{{ server }} · {{ name }}</div>
+    <div class="data-header">
+        <div class="data-header__title">未做奇遇</div>
+        <div class="data-header__meta">{{ server }} · {{ name }}</div>
     </div>
 
-    <div class="section">
-        <div class="section-title">普通奇遇（{{ ptqy|length if ptqy else 0 }}）</div>
+    <div class="collection-section">
+        <div class="collection-heading">普通奇遇（{{ ptqy|length if ptqy else 0 }}）</div>
         {% if ptqy %}
-        <div class="card-container">
+        <div class="card-grid" style="--grid-columns: 4">
             {% for item in ptqy %}
-            <div class="card">
+            <div class="collection-card">
                 {% if icons.serendipity.get(item.event) %}
-                <img src="{{ icons.serendipity[item.event] }}" alt="{{ item.event }}">
+                <img class="collection-card__image" src="{{ icons.serendipity[item.event] }}" alt="{{ item.event }}">
                 {% else %}
-                <div class="event-name">{{ item.event }}</div>
+                <div class="collection-card__name">{{ item.event }}</div>
                 {% endif %}
-                <div class="time">{{ item.time }}</div>
+                <div class="collection-card__meta">{{ item.time }}</div>
             </div>
             {% endfor %}
         </div>
         {% else %}
-        <div class="empty">暂无未做普通奇遇</div>
+        <div class="collection-empty">暂无未做普通奇遇</div>
         {% endif %}
     </div>
 
-    <div class="section">
-        <div class="section-title">绝世奇遇（{{ jsqy|length if jsqy else 0 }}）</div>
+    <div class="collection-section">
+        <div class="collection-heading">绝世奇遇（{{ jsqy|length if jsqy else 0 }}）</div>
         {% if jsqy %}
-        <div class="card-container">
+        <div class="card-grid" style="--grid-columns: 4">
             {% for item in jsqy %}
-            <div class="card">
+            <div class="collection-card">
                 {% if icons.serendipity.get(item.event) %}
-                <img src="{{ icons.serendipity[item.event] }}" alt="{{ item.event }}">
+                <img class="collection-card__image" src="{{ icons.serendipity[item.event] }}" alt="{{ item.event }}">
                 {% else %}
-                <div class="event-name">{{ item.event }}</div>
+                <div class="collection-card__name">{{ item.event }}</div>
                 {% endif %}
-                <div class="time">{{ item.time }}</div>
+                <div class="collection-card__meta">{{ item.time }}</div>
             </div>
             {% endfor %}
         </div>
         {% else %}
-        <div class="empty">暂无未做绝世奇遇</div>
+        <div class="collection-empty">暂无未做绝世奇遇</div>
         {% endif %}
     </div>
diff --git a/templates/pages/wujia.html b/templates/pages/wujia.html
index 80a0e09..7e4b4e0 100644
--- a/templates/pages/wujia.html
+++ b/templates/pages/wujia.html
@@ -5,7 +5,7 @@
     先根据分组名称识别对应数据。
 
     查询区服不固定使用 list[3]：
-    除电信区、双线区、无界区、公示期、出售期外，
+    除电信区、双线区、无界区、公示期、在售期外，
     其他分组都视为查询区服。
 
     即使某个分组不存在，对应表格区域仍然会显示。
@@ -24,7 +24,8 @@
     {% if group.name == "公示期" %}
         {% set ns.notice = group %}
 
-    {% elif group.name == "出售期" %}
+    {# 当前接口返回“在售期”，同时兼容历史名称“出售期”。 #}
+    {% elif group.name in ["在售期", "出售期"] %}
         {% set ns.sale = group %}
 
     {% elif group.name == "电信区" %}
@@ -478,4 +479,3 @@
     </div>
 
 </div>
-
diff --git a/templates/pages/xiaoyao.html b/templates/pages/xiaoyao.html
index c84bc74..8f3ddae 100644
--- a/templates/pages/xiaoyao.html
+++ b/templates/pages/xiaoyao.html
@@ -1,10 +1,11 @@
 {# template-title: 小药表 #}
+{# template-components: data-table data-extras #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>心法小药表</h1>
 
-    <table>
+    <table class="data-table data-table--center">
         <thead>
             <tr>
                 <th rowspan="2">心法</th>
@@ -27,23 +28,22 @@
         <tbody>
         {% for m in items %}
             <tr>
-                <td class="kungfu">{{ m.kungfu }}</td>
+                <td class="data-cell--strong">{{ m.kungfu }}</td>
 
                 <!-- 紫色 -->
-                <td class="purple">{{ m.purple["增强食品"] }}</td>
-                <td class="purple">{{ m.purple["增强药品"] }}</td>
-                <td class="purple">{{ m.purple["辅助食品"] }}</td>
-                <td class="purple">{{ m.purple["辅助药品"] }}</td>
+                <td class="text-purple">{{ m.purple["增强食品"] }}</td>
+                <td class="text-purple">{{ m.purple["增强药品"] }}</td>
+                <td class="text-purple">{{ m.purple["辅助食品"] }}</td>
+                <td class="text-purple">{{ m.purple["辅助药品"] }}</td>
 
                 <!-- 蓝色 -->
-                <td class="blue">{{ m.blue["增强食品"] }}</td>
-                <td class="blue">{{ m.blue["增强药品"] }}</td>
-                <td class="blue">{{ m.blue["辅助食品"] }}</td>
-                <td class="blue">{{ m.blue["辅助药品"] }}</td>
+                <td class="text-blue">{{ m.blue["增强食品"] }}</td>
+                <td class="text-blue">{{ m.blue["增强药品"] }}</td>
+                <td class="text-blue">{{ m.blue["辅助食品"] }}</td>
+                <td class="text-blue">{{ m.blue["辅助药品"] }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 
 </div>
-
diff --git a/templates/pages/yanhuan.html b/templates/pages/yanhuan.html
index fb2ed47..05a28a0 100644
--- a/templates/pages/yanhuan.html
+++ b/templates/pages/yanhuan.html
@@ -1,10 +1,11 @@
 {# template-title: 烟花记录 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>烟花记录</h1>
 
-    <table>
+    <table class="data-table data-table--spaced">
         <thead>
             <tr>
                 <th>服务器</th>
@@ -31,4 +32,3 @@
     </table>
 
 </div>
-
diff --git a/templates/pages/zhengyingpaimai.html b/templates/pages/zhengyingpaimai.html
index 7863e06..c638c22 100644
--- a/templates/pages/zhengyingpaimai.html
+++ b/templates/pages/zhengyingpaimai.html
@@ -1,10 +1,11 @@
 {# template-title: 阵营拍卖 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>阵营拍卖</h1>
 
-    <table>
+    <table class="data-table data-table--spaced">
         <thead>
             <tr>
                 <th>服务器</th>
@@ -37,4 +38,3 @@
     </table>
 
 </div>
-
diff --git a/templates/pages/zhenyingevent.html b/templates/pages/zhenyingevent.html
index 4e398d6..1efac0b 100644
--- a/templates/pages/zhenyingevent.html
+++ b/templates/pages/zhenyingevent.html
@@ -1,11 +1,12 @@
 {# template-title: 阵营事件 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>阵营事件</h1>
-    <div class="meta">更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">更新时间：{{ update_time }}</div>
 
-    <table>
+    <table class="data-table data-table--camp-tinted">
         <thead>
             <tr>
                 <th>阵营</th>
@@ -25,14 +26,13 @@
                     class="camp-haoqi"
                 {% endif %}
             >
-                <td class="camp-col">{{ item.campName }}</td>
-                <td class="fenxian-col">{{ item.fenxianName }}</td>
-                <td class="server-col">{{ item.friendName }}</td>
-                <td class="role-col">{{ item.roleName }}</td>
-                <td class="time-col">{{ item.seizeTime }}</td>
+                <td class="data-cell--camp data-cell--compact data-cell--center data-cell--nowrap data-cell--strong">{{ item.campName }}</td>
+                <td class="data-cell--medium data-cell--center data-cell--nowrap data-cell--strong">{{ item.fenxianName }}</td>
+                <td class="data-cell--medium data-cell--center data-cell--nowrap data-cell--strong">{{ item.friendName }}</td>
+                <td class="data-cell--name data-cell--copy">{{ item.roleName }}</td>
+                <td class="data-cell--time">{{ item.seizeTime }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 </div>
-
diff --git a/templates/pages/zhuangshi.html b/templates/pages/zhuangshi.html
index 4181b33..1c232ab 100644
--- a/templates/pages/zhuangshi.html
+++ b/templates/pages/zhuangshi.html
@@ -1,54 +1,55 @@
 {# template-title: 家园家具一览 #}
+{# template-components: object-card #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>家园家具展示</h1>
 
     {% for item in data %}
-    <div class="card">
-        <img src="{{ item.image }}" alt="{{ item.name }}">
+    <div class="object-card">
+        <img class="object-card__image" src="{{ item.image }}" alt="{{ item.name }}">
 
-        <div class="content">
-            <div class="title q{{ item.color }}">
+        <div class="object-card__content">
+            <div class="object-card__title quality-{{ item.color }}">
                 {{ item.name }}
             </div>
 
-            <div class="meta">
+            <div class="object-card__meta">
                 <span>来源：{{ item.source }}</span>
                 <span>数量限制：{{ item.limit }}</span>
                 <span>品质值：{{ item.quality }}</span>
             </div>
 
             {% if item.tip %}
-            <div class="tip">
+            <div class="object-card__tip">
                 {{ item.tip }}
             </div>
             {% endif %}
 
-            <div class="stats">
-                <div class="stat">
-                    <div class="stat-name">观赏</div>
-                    <div class="stat-value">{{ item.view }}</div>
+            <div class="object-stats" style="--grid-columns: 5">
+                <div class="object-stat">
+                    <div class="object-stat__label">观赏</div>
+                    <div class="object-stat__value">{{ item.view }}</div>
                 </div>
-                <div class="stat">
-                    <div class="stat-name">实用</div>
-                    <div class="stat-value">{{ item.practical }}</div>
+                <div class="object-stat">
+                    <div class="object-stat__label">实用</div>
+                    <div class="object-stat__value">{{ item.practical }}</div>
                 </div>
-                <div class="stat">
-                    <div class="stat-name">坚固</div>
-                    <div class="stat-value">{{ item.hard }}</div>
+                <div class="object-stat">
+                    <div class="object-stat__label">坚固</div>
+                    <div class="object-stat__value">{{ item.hard }}</div>
                 </div>
-                <div class="stat">
-                    <div class="stat-name">风水</div>
-                    <div class="stat-value">{{ item.geomantic }}</div>
+                <div class="object-stat">
+                    <div class="object-stat__label">风水</div>
+                    <div class="object-stat__value">{{ item.geomantic }}</div>
                 </div>
-                <div class="stat">
-                    <div class="stat-name">趣味</div>
-                    <div class="stat-value">{{ item.interesting }}</div>
+                <div class="object-stat">
+                    <div class="object-stat__label">趣味</div>
+                    <div class="object-stat__value">{{ item.interesting }}</div>
                 </div>
             </div>
 
-            <div class="footer">
+            <div class="object-card__footer">
                 建筑适配：{{ item.architecture }}　
                 {% if item.produce %}
                     ｜可制作
@@ -61,4 +62,3 @@
     {% endfor %}
 
 </div>
-
diff --git a/templates/pages/zhueevent.html b/templates/pages/zhueevent.html
index 6987907..f81bca0 100644
--- a/templates/pages/zhueevent.html
+++ b/templates/pages/zhueevent.html
@@ -1,11 +1,12 @@
 {# template-title: 诛恶事件 #}
+{# template-components: data-table #}
 
 
-<div class="container">
+<div class="container data-page">
     <h1>诛恶事件</h1>
-    <div class="meta">更新时间：{{ update_time }}</div>
+    <div class="data-page__meta">更新时间：{{ update_time }}</div>
 
-    <table>
+    <table class="data-table">
         <thead>
             <tr>
                 <th>服务器</th>
@@ -17,12 +18,11 @@
         <tbody>
         {% for item in items %}
             <tr>
-                <td class="server-col">{{ item.server }}</td>
-                <td class="map-col">{{ item.mapName }}</td>
-                <td class="time-col">{{ item.time }}</td>
+                <td class="data-cell--accent data-cell--wide data-cell--center data-cell--nowrap">{{ item.server }}</td>
+                <td class="data-cell--name data-cell--wrap">{{ item.mapName }}</td>
+                <td class="data-cell--time">{{ item.time }}</td>
             </tr>
         {% endfor %}
         </tbody>
     </table>
 </div>
-
diff --git a/templates/styles/base.css b/templates/styles/base.css
index 1f190bc..447bbc0 100644
--- a/templates/styles/base.css
+++ b/templates/styles/base.css
@@ -11,7 +11,7 @@ body {
 }
 
 body.jx3-template {
-    min-width: 0;
+    min-width: calc(var(--jx3-page-width) + 94px);
     padding: 20px;
     color: var(--jx3-text);
     font-family: var(--jx3-font);
@@ -67,8 +67,14 @@ body.jx3-template {
 }
 
 .jx3-template :where(.container, .page, .page-container),
-.jx3-template > .jx3-frame > :where(.panel, .header, .section) {
-    width: min(var(--jx3-page-width), calc(100vw - 92px));
+.jx3-template > .jx3-frame > :where(
+    .panel,
+    .header,
+    .section,
+    .data-header,
+    .collection-section
+) {
+    width: var(--jx3-page-width);
     max-width: none;
     margin-right: auto;
     margin-left: auto;
@@ -102,25 +108,3 @@ body.jx3-template {
 .jx3-template img {
     max-width: 100%;
 }
-
-@media (max-width: 760px) {
-    body.jx3-template {
-        padding: 10px;
-        font-size: 14px;
-    }
-
-    .jx3-frame {
-        min-height: calc(100vh - 20px);
-        padding: 16px;
-    }
-
-    .jx3-template :where(.container, .page, .page-container),
-    .jx3-template > .jx3-frame > :where(.panel, .header, .section) {
-        width: 100%;
-    }
-
-    .jx3-template h1 {
-        margin-bottom: 16px;
-        font-size: 26px;
-    }
-}
diff --git a/templates/styles/components.css b/templates/styles/components.css
index 44a4f7b..bc8a273 100644
--- a/templates/styles/components.css
+++ b/templates/styles/components.css
@@ -242,25 +242,534 @@
     font-variant-numeric: tabular-nums;
 }
 
-@media (max-width: 760px) {
-    .jx3-template :where(.header, .page-header, .top-info, .info-bar) {
-        padding: 16px;
-    }
-
-    .jx3-template :where(th, td) {
-        padding: 8px 4px;
-        font-size: 11px;
-        white-space: normal !important;
-        word-break: break-word;
-    }
-
-    .jx3-template table {
-        min-width: 0 !important;
-        table-layout: auto !important;
-    }
-
-    .jx3-template :where(.avatar, .force-icon, .school-icon) {
-        width: 28px;
-        height: 28px;
-    }
+.jx3-template .data-page__meta {
+    margin-bottom: var(--jx3-space-6);
+    color: var(--jx3-text-muted);
+    font-size: 16px;
+    text-align: center;
 }
+
+/* @component data-table */
+/* 标准数据页：列数和内容由 HTML 决定，视觉规则由所有查询页共用 */
+.jx3-template .data-table {
+    text-align: left;
+}
+
+.jx3-template .data-table--spaced {
+    margin-top: 10px;
+}
+
+.jx3-template .data-table--center {
+    text-align: center;
+}
+
+.jx3-template .data-table :where(th, td) {
+    vertical-align: middle;
+}
+
+.jx3-template .data-table--nowrap :where(th, td),
+.jx3-template .data-cell--nowrap {
+    white-space: nowrap;
+}
+
+.jx3-template .data-cell--center {
+    text-align: center;
+}
+
+.jx3-template .data-cell--wrap {
+    word-break: break-word;
+}
+
+.jx3-template .data-cell--strong,
+.jx3-template .data-cell--name {
+    color: var(--jx3-text);
+    font-weight: 700;
+}
+
+.jx3-template .data-cell--muted {
+    color: var(--jx3-text-muted);
+}
+
+.jx3-template .data-cell--numeric {
+    font-variant-numeric: tabular-nums;
+}
+
+.jx3-template .data-cell--accent,
+.jx3-template .data-cell--score {
+    color: var(--jx3-gold-bright);
+    font-weight: 800;
+}
+
+.jx3-template .data-cell--rank {
+    width: 56px;
+    color: var(--jx3-gold-bright);
+    font-weight: 800;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.jx3-template .data-cell--score {
+    text-align: center;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+}
+
+.jx3-template .data-cell--time {
+    min-width: 150px;
+    color: var(--jx3-text-muted);
+    text-align: center;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums;
+}
+
+.jx3-template .data-cell--copy {
+    max-width: 360px;
+    color: var(--jx3-text-secondary);
+    font-weight: 600;
+    line-height: 1.5;
+    word-break: break-word;
+}
+
+.jx3-template .data-cell--copy.data-cell--name {
+    color: var(--jx3-text);
+    font-weight: 700;
+}
+
+.jx3-template .data-cell--time.data-cell--accent {
+    color: var(--jx3-gold-bright);
+}
+
+.jx3-template .data-cell--compact {
+    width: 90px;
+}
+
+.jx3-template .data-cell--medium {
+    min-width: 120px;
+}
+
+.jx3-template .data-cell--wide {
+    min-width: 150px;
+}
+
+.jx3-template .data-cell--xwide {
+    min-width: 220px;
+}
+
+.jx3-template .data-cell--max-wide {
+    max-width: 260px;
+}
+
+.jx3-template .data-avatar {
+    display: block;
+    width: 40px;
+    height: 40px;
+    margin: 0 auto;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.jx3-template .data-cell--rank.rank-1 {
+    color: var(--jx3-gold-bright);
+}
+
+.jx3-template .data-cell--rank.rank-2 {
+    color: #c8d2dc;
+}
+
+.jx3-template .data-cell--rank.rank-3 {
+    color: #c88a62;
+}
+
+.jx3-template .icon-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    color: var(--jx3-text);
+    font-weight: 700;
+    white-space: nowrap;
+}
+
+.jx3-template .icon-label__icon {
+    width: 32px;
+    height: 32px;
+    border: 1px solid var(--jx3-border-soft);
+    border-radius: 50%;
+    object-fit: contain;
+    flex: 0 0 auto;
+    background: rgba(7, 26, 43, 0.6);
+}
+
+.jx3-template .data-table tr.camp-haoqi {
+    color: var(--jx3-blue);
+}
+
+.jx3-template .data-table tr.camp-eren {
+    color: var(--jx3-red);
+}
+
+.jx3-template .data-table--camp-tinted tr.camp-haoqi {
+    background: rgba(114, 169, 213, 0.1);
+}
+
+.jx3-template .data-table--camp-tinted tr.camp-eren {
+    background: rgba(213, 106, 99, 0.1);
+}
+
+.jx3-template .data-table--camp-tinted tr.camp-haoqi .data-cell--name,
+.jx3-template .data-table tr.camp-haoqi .data-cell--camp {
+    color: var(--jx3-blue);
+}
+
+.jx3-template .data-table--camp-tinted tr.camp-eren .data-cell--name,
+.jx3-template .data-table tr.camp-eren .data-cell--camp {
+    color: var(--jx3-red);
+}
+/* @endcomponent */
+
+/* @component data-layout */
+/* 通用分区、统计卡片与可配置列数的卡片网格 */
+.jx3-template .data-section,
+.jx3-template .collection-section {
+    margin-bottom: var(--jx3-space-6);
+}
+
+.jx3-template .data-section__title,
+.jx3-template .collection-heading {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin: 0 0 var(--jx3-space-3);
+    color: var(--jx3-gold-bright);
+    font-size: 24px;
+    line-height: 1.3;
+    font-weight: 800;
+}
+
+.jx3-template .data-section__title::before,
+.jx3-template .collection-heading::before {
+    width: 5px;
+    height: 30px;
+    border-radius: 3px;
+    background: var(--jx3-gold);
+    content: "";
+    flex: 0 0 auto;
+}
+
+.jx3-template .card-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr));
+    gap: var(--grid-gap, 16px);
+}
+
+.jx3-template .stat-grid {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr));
+    gap: 14px;
+    margin-bottom: 22px;
+}
+
+.jx3-template .stat-card {
+    padding: 18px 14px;
+    border: 1px solid var(--jx3-border-faint);
+    border-radius: var(--jx3-radius-md);
+    background: rgba(13, 41, 66, 0.82);
+    text-align: center;
+    box-shadow: var(--jx3-shadow-sm);
+}
+
+.jx3-template .stat-card__label {
+    margin-bottom: var(--jx3-space-2);
+    color: var(--jx3-text-muted);
+    font-size: 16px;
+}
+
+.jx3-template .stat-card__value {
+    color: var(--jx3-gold-bright);
+    font-size: 30px;
+    line-height: 1;
+    font-weight: 800;
+    font-variant-numeric: tabular-nums;
+}
+/* @endcomponent */
+
+/* @component ability-card */
+/* 技能与奇穴共用同一套能力卡片 */
+.jx3-template .ability-card {
+    display: grid;
+    grid-template-columns: 54px minmax(0, 1fr);
+    gap: 12px;
+    padding: 14px;
+    border: 1px solid var(--jx3-border-faint);
+    border-radius: var(--jx3-radius-md);
+    background: rgba(13, 41, 66, 0.82);
+    box-shadow: var(--jx3-shadow-sm);
+}
+
+.jx3-template .ability-card__icon {
+    width: 48px;
+    height: 48px;
+    border: 1px solid var(--jx3-border-soft);
+    border-radius: 8px;
+    object-fit: cover;
+    background: rgba(7, 26, 43, 0.6);
+}
+
+.jx3-template .ability-card__head {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+.jx3-template .ability-card__name {
+    color: var(--jx3-text);
+    font-size: 18px;
+    line-height: 1.25;
+    font-weight: 800;
+}
+
+.jx3-template .ability-card__tag {
+    padding: 2px 8px;
+    border: 1px solid var(--jx3-border-soft);
+    border-radius: 999px;
+    color: var(--jx3-gold-bright);
+    background: rgba(225, 183, 102, 0.1);
+    font-size: 13px;
+    white-space: nowrap;
+}
+
+.jx3-template .ability-card__tag--accent {
+    color: var(--jx3-bg-deep);
+    background: var(--jx3-gold);
+    font-weight: 700;
+}
+
+.jx3-template .ability-card__desc {
+    color: var(--jx3-text-secondary);
+    font-size: 15px;
+    line-height: 1.55;
+    word-break: break-word;
+}
+/* @endcomponent */
+
+/* @component collection-card */
+/* 奇遇与区服状态共用卡片网格 */
+.jx3-template .collection-section {
+    margin-bottom: var(--jx3-space-8);
+}
+
+.jx3-template .collection-heading {
+    margin-bottom: var(--jx3-space-4);
+    font-size: 32px;
+}
+
+.jx3-template .collection-card {
+    display: flex;
+    min-height: 90px;
+    padding: 16px 12px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--jx3-border-faint);
+    border-radius: var(--jx3-radius-md);
+    background: rgba(13, 41, 66, 0.82);
+    text-align: center;
+    box-shadow: var(--jx3-shadow-sm);
+}
+
+.jx3-template .collection-card__image {
+    width: 100%;
+    max-width: 180px;
+    height: auto;
+    margin-bottom: 6px;
+    object-fit: contain;
+}
+
+.jx3-template .collection-card__name {
+    margin-bottom: 4px;
+    color: var(--jx3-text);
+    font-size: 22px;
+    font-weight: 600;
+}
+
+.jx3-template .collection-card__meta {
+    color: var(--jx3-text-muted);
+    font-size: 20px;
+}
+
+.jx3-template .collection-empty {
+    padding: 18px;
+    border: 1px solid var(--jx3-border-faint);
+    border-radius: var(--jx3-radius-md);
+    color: var(--jx3-text-muted);
+    background: rgba(13, 41, 66, 0.82);
+}
+
+.jx3-template .data-header {
+    margin-bottom: var(--jx3-space-6);
+}
+
+.jx3-template .data-header__title {
+    margin-bottom: var(--jx3-space-2);
+    color: var(--jx3-text);
+    font-size: 34px;
+    font-weight: 800;
+}
+
+.jx3-template .data-header__meta {
+    color: var(--jx3-text-muted);
+    font-size: 20px;
+}
+
+.jx3-template .server-status-card {
+    padding: 30px 12px;
+    border-radius: var(--jx3-radius-md);
+    color: #fff;
+    font-size: 28px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.jx3-template .server-status-card.爆满 {
+    background: #b94f4b;
+}
+
+.jx3-template .server-status-card.拥挤 {
+    color: #2c2106;
+    background: #d4a64e;
+}
+
+.jx3-template .server-status-card:is(.正常, .顺畅) {
+    background: #438d65;
+}
+
+.jx3-template .server-status-card.维护 {
+    color: #253443;
+    background: #9eaebb;
+}
+/* @endcomponent */
+
+/* @component object-card */
+/* 器物与家园装饰共用详情卡片 */
+.jx3-template .object-card {
+    display: flex;
+    margin-bottom: var(--jx3-space-6);
+    overflow: hidden;
+    border: 1px solid var(--jx3-border-faint);
+    border-radius: var(--jx3-radius-lg);
+    background: rgba(13, 41, 66, 0.9);
+    box-shadow: var(--jx3-shadow-sm);
+}
+
+.jx3-template .object-card__image {
+    width: 220px;
+    height: 220px;
+    padding: 16px;
+    object-fit: contain;
+    background: rgba(7, 26, 43, 0.72);
+}
+
+.jx3-template .object-card__content {
+    min-width: 0;
+    padding: 20px 24px;
+    flex: 1;
+}
+
+.jx3-template .object-card__title {
+    margin-bottom: 6px;
+    font-size: 26px;
+    font-weight: 800;
+}
+
+.jx3-template :where(.quality-1) { color: var(--jx3-text-muted); }
+.jx3-template :where(.quality-2) { color: var(--jx3-green); }
+.jx3-template :where(.quality-3) { color: var(--jx3-blue); }
+.jx3-template :where(.quality-4) { color: var(--jx3-purple); }
+.jx3-template :where(.quality-5) { color: #e6a25f; }
+
+.jx3-template .object-card__meta {
+    margin-bottom: 14px;
+    color: var(--jx3-text-muted);
+    font-size: 15px;
+}
+
+.jx3-template .object-card__meta span {
+    margin-right: 18px;
+}
+
+.jx3-template .object-card__tip {
+    margin-bottom: 16px;
+    padding: 10px 14px;
+    border-left: 4px solid var(--jx3-gold);
+    color: var(--jx3-text-secondary);
+    background: rgba(114, 169, 213, 0.08);
+    font-size: 14px;
+}
+
+.jx3-template .object-stats {
+    display: grid;
+    grid-template-columns: repeat(var(--grid-columns, 5), minmax(0, 1fr));
+    gap: 12px;
+}
+
+.jx3-template .object-stat {
+    padding: 10px;
+    border: 1px solid var(--jx3-border-faint);
+    border-radius: var(--jx3-radius-md);
+    background: rgba(7, 26, 43, 0.58);
+    text-align: center;
+}
+
+.jx3-template .object-stat__label {
+    margin-bottom: 6px;
+    color: var(--jx3-text-muted);
+    font-size: 13px;
+}
+
+.jx3-template .object-stat__value {
+    color: var(--jx3-text);
+    font-size: 18px;
+    font-weight: 700;
+}
+
+.jx3-template .object-card__footer {
+    margin-top: 12px;
+    color: var(--jx3-text-muted);
+    font-size: 14px;
+}
+/* @endcomponent */
+
+/* @component data-extras */
+.jx3-template .data-subtitle {
+    margin: 40px 0 12px;
+    color: var(--jx3-gold-bright);
+    font-size: 26px;
+    font-weight: 700;
+}
+
+.jx3-template .data-subtitle + .data-table {
+    margin-bottom: var(--jx3-space-5);
+}
+
+.jx3-template .data-note {
+    color: var(--jx3-text-secondary);
+    font-weight: 600;
+}
+
+.jx3-template .data-price {
+    color: var(--jx3-gold-bright);
+    font-weight: 700;
+}
+
+.jx3-template .text-purple {
+    color: var(--jx3-purple);
+    font-weight: 600;
+}
+
+.jx3-template .text-blue {
+    color: var(--jx3-blue);
+    font-weight: 600;
+}
+/* @endcomponent */
diff --git a/templates/styles/pages/baizhan.css b/templates/styles/pages/baizhan.css
index 3c581b3..3810e3f 100644
--- a/templates/styles/pages/baizhan.css
+++ b/templates/styles/pages/baizhan.css
@@ -13,7 +13,7 @@
     .time {
         font-size: 18px;
         font-weight: 600;
-        color: #333;
+        color: var(--jx3-text-secondary);
     }
 
     .boss-final {
@@ -48,7 +48,7 @@
     .index {
         font-weight: bold;
         font-size: 18px;
-        color: #333;
+        color: var(--jx3-text);
         margin-bottom: 4px;
     }
 
@@ -60,7 +60,7 @@
     }
 
     .buff {
-        color: #0984e3;
+        color: var(--jx3-blue);
         font-size: 14px;
         line-height: 1.5em;
         word-break: break-word;
diff --git a/templates/styles/pages/bangzhanjilu.css b/templates/styles/pages/bangzhanjilu.css
deleted file mode 100644
index 41aad75..0000000
--- a/templates/styles/pages/bangzhanjilu.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }table {
-        text-align: left;
-    }th, td {
-        vertical-align: middle;
-    }
-
-    .zone-col,
-    .server-col {
-        width: 90px;
-        text-align: center;
-        white-space: nowrap;
-        font-weight: 700;
-    }
-
-    .tong-col {
-        min-width: 150px;
-        max-width: 220px;
-        color: #333;
-        font-weight: 700;
-        word-break: break-word;
-        line-height: 1.45;
-    }
-
-    .time-col {
-        min-width: 148px;
-        color: #60657a;
-        text-align: center;
-        white-space: nowrap;
-        font-variant-numeric: tabular-nums;
-    }
-
-    .duration-col {
-        width: 120px;
-        color: #d93939;
-        text-align: center;
-        white-space: nowrap;
-        font-weight: 800;
-        font-variant-numeric: tabular-nums;
-    }
diff --git a/templates/styles/pages/bilei.css b/templates/styles/pages/bilei.css
deleted file mode 100644
index 8df31c0..0000000
--- a/templates/styles/pages/bilei.css
+++ /dev/null
@@ -1,12 +0,0 @@
-table {
-        margin-top: 10px;
-        text-align: left;  /* 不影响表格内容 */
-    }
-
-    .text-col {
-        max-width: 360px;
-        line-height: 1.5em;
-        word-break: break-word;
-        font-weight: 600;
-        color: #333;
-    }
diff --git a/templates/styles/pages/chengbeng.css b/templates/styles/pages/chengbeng.css
index 16bd373..22a2af5 100644
--- a/templates/styles/pages/chengbeng.css
+++ b/templates/styles/pages/chengbeng.css
@@ -135,7 +135,7 @@
         position: relative;
         margin-bottom: 9px;
         padding-left: 22px;
-        color: #555;
+        color: var(--jx3-text-secondary);
         font-size: 19px;
         line-height: 1.8;
     }
@@ -314,11 +314,11 @@
     }
 
     .money-silver {
-        color: #697581;
+        color: var(--jx3-text-secondary);
     }
 
     .money-copper {
-        color: #b5673b;
+        color: #e6a25f;
     }
 
     .raw-price {
@@ -603,136 +603,3 @@
         color: #888;
         font-size: 20px;
     }
-
-    /* ==============================
-       响应式
-    ============================== */
-
-    @media (max-width: 1100px) {
-        .main-card-top {
-            grid-template-columns: 180px minmax(0, 1fr);
-        }
-
-        .main-icon {
-            width: 165px;
-            height: 165px;
-        }
-
-        .stat-grid {
-            grid-template-columns: repeat(3, minmax(120px, 1fr));
-        }
-
-        .summary-section {
-            grid-template-columns: 1fr;
-        }
-
-        .material-grid {
-            grid-template-columns: 1fr;
-        }
-    }
-
-    @media (max-width: 760px) {
-        body {
-            padding: 12px;
-            font-size: 17px;
-        }
-
-        .page-title {
-            font-size: 31px;
-        }
-
-        .page-subtitle {
-            font-size: 17px;
-        }
-
-        .main-card-top {
-            grid-template-columns: 1fr;
-            padding: 22px 17px;
-        }
-
-        .main-icon-wrapper {
-            justify-content: flex-start;
-        }
-
-        .main-icon {
-            width: 135px;
-            height: 135px;
-        }
-
-        .main-name {
-            font-size: 29px;
-        }
-
-        .tip-list li {
-            font-size: 17px;
-        }
-
-        .stat-grid {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
-
-        .stat-value {
-            font-size: 19px;
-        }
-
-        .summary-panel {
-            padding: 22px 17px;
-        }
-
-        .summary-title {
-            font-size: 22px;
-        }
-
-        .price-grid {
-            grid-template-columns: 1fr;
-        }
-
-        .section-header {
-            align-items: flex-start;
-            flex-direction: column;
-            gap: 7px;
-        }
-
-        .section-title {
-            font-size: 27px;
-        }
-
-        .section-desc {
-            font-size: 16px;
-        }
-
-        .material-card-header {
-            grid-template-columns: 78px minmax(0, 1fr);
-            padding: 18px;
-        }
-
-        .material-icon {
-            width: 78px;
-            height: 78px;
-        }
-
-        .material-name {
-            font-size: 22px;
-        }
-
-        .material-quantity {
-            grid-column: 1 / -1;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            min-width: 0;
-            text-align: left;
-        }
-
-        .quantity-value {
-            font-size: 24px;
-        }
-
-        .material-price-grid {
-            grid-template-columns: 1fr;
-        }
-
-        .store-price-box {
-            grid-template-columns: 1fr;
-        }
-    }
diff --git a/templates/styles/pages/chengjiu.css b/templates/styles/pages/chengjiu.css
index dfa424e..d9b5293 100644
--- a/templates/styles/pages/chengjiu.css
+++ b/templates/styles/pages/chengjiu.css
@@ -212,7 +212,7 @@
         }
 
         .not-favorite {
-            color: #707b9d;
+            color: var(--jx3-text-muted);
         }
 
         .description {
@@ -266,40 +266,3 @@
             text-align: center;
             font-size: 16px;
         }
-
-        @media (max-width: 850px) {
-            body {
-                padding: 20px;
-            }
-
-            .achievement-list {
-                grid-template-columns: 1fr;
-            }
-
-            .role-name {
-                font-size: 29px;
-            }
-        }
-
-        @media (max-width: 520px) {
-            body {
-                padding: 14px;
-            }
-
-            .page-header {
-                padding: 23px 20px;
-            }
-
-            .achievement-card {
-                padding: 18px;
-            }
-
-            .card-header {
-                flex-direction: column;
-            }
-
-            .status-area {
-                flex-direction: row;
-                align-items: center;
-            }
-        }
diff --git a/templates/styles/pages/diaoluo.css b/templates/styles/pages/diaoluo.css
deleted file mode 100644
index 44bc528..0000000
--- a/templates/styles/pages/diaoluo.css
+++ /dev/null
@@ -1,46 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }table {
-        text-align: left;
-    }th, td {
-        vertical-align: middle;
-    }
-
-    .item-col {
-        min-width: 120px;
-        color: #d93939;
-        font-weight: 800;
-        white-space: nowrap;
-    }
-
-    .server-col {
-        min-width: 90px;
-        text-align: center;
-        white-space: nowrap;
-    }
-
-    .map-col {
-        max-width: 260px;
-        color: #333;
-        word-break: break-word;
-        line-height: 1.45;
-    }
-
-    .role-col {
-        max-width: 260px;
-        color: #333;
-        font-weight: 700;
-        word-break: break-word;
-        line-height: 1.45;
-    }
-
-    .time-col {
-        min-width: 150px;
-        color: #60657a;
-        text-align: center;
-        white-space: nowrap;
-        font-variant-numeric: tabular-nums;
-    }
diff --git a/templates/styles/pages/dilujilu.css b/templates/styles/pages/dilujilu.css
deleted file mode 100644
index c28ade6..0000000
--- a/templates/styles/pages/dilujilu.css
+++ /dev/null
@@ -1,21 +0,0 @@
-table {
-        margin-top: 10px;
-        text-align: left;
-    }
-
-    .text-col {
-        max-width: 360px;
-        line-height: 1.5em;
-        word-break: break-word;
-        font-weight: 600;
-        color: #333;
-    }
-
-    /* ===== 阵营整行着色 ===== */
-    tr.camp-haoqi {
-        color: #1e6bd6; /* 浩气盟 */
-    }
-
-    tr.camp-eren {
-        color: #d93939; /* 恶人谷 */
-    }
diff --git a/templates/styles/pages/fubenjilu.css b/templates/styles/pages/fubenjilu.css
index b3aba07..c18326d 100644
--- a/templates/styles/pages/fubenjilu.css
+++ b/templates/styles/pages/fubenjilu.css
@@ -11,7 +11,7 @@
         gap: 24px;
         margin-bottom: 20px;
         font-size: 14px;
-        color: #666;
+        color: var(--jx3-text-secondary);
     }
 
     .legend-item {
@@ -27,11 +27,11 @@
     }
 
     .legend-color.finished {
-        background: #c9cdd3;
+        background: #60788f;
     }
 
     .legend-color.unfinished {
-        background: #2dbd78;
+        background: var(--jx3-green);
     }table {
         table-layout: fixed;
         margin-top: 10px;
@@ -51,7 +51,7 @@
     }
 
     .map-name {
-        color: #252a34;
+        color: var(--jx3-text);
         font-size: 18px;
         font-weight: 700;
         line-height: 1.5;
@@ -59,7 +59,7 @@
 
     .map-progress {
         margin-top: 7px;
-        color: #8a909c;
+        color: var(--jx3-text-muted);
         font-size: 13px;
         font-weight: 500;
     }
@@ -92,9 +92,9 @@
      * 奖励已经获取，显示灰色
      */
     .boss-item.finished {
-        color: #747b85;
-        background: #e1e4e8;
-        border: 1px solid #d1d5db;
+        color: #d5e0e9;
+        background: #24384b;
+        border: 1px solid #60788f;
     }
 
     .boss-item.finished:hover {
@@ -106,9 +106,9 @@
      * 奖励尚未获取，显示绿色
      */
     .boss-item.unfinished {
-        color: white;
-        background: #2dbd78;
-        border: 1px solid #24a96a;
+        color: #c8f3dc;
+        background: #183f34;
+        border: 1px solid #438d68;
     }
 
     .boss-item.unfinished:hover {
@@ -155,91 +155,21 @@
     }
 
     .boss-item.finished .status-icon {
-        color: #777e88;
-        background: rgba(255, 255, 255, 0.75);
+        color: #e7eef4;
+        background: rgba(192, 211, 226, 0.16);
     }
 
     .boss-item.unfinished .status-icon {
-        color: #22a566;
-        background: white;
+        color: #d7f8e6;
+        background: rgba(98, 188, 146, 0.18);
     }
 
     .empty-data {
         padding: 50px 20px;
-        color: #8a909c;
+        color: var(--jx3-text-muted);
         text-align: center;
-        background: white;
+        background: rgba(13, 41, 66, 0.82);
+        border: 1px solid var(--jx3-border-faint);
         border-radius: 12px;
         box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
     }
-
-    @media (max-width: 800px) {
-        body {
-            padding: 12px;
-        }
-
-        h1 {
-            font-size: 26px;
-        }
-
-        table,
-        thead,
-        tbody,
-        tr,
-        th,
-        td {
-            display: block;
-        }
-
-        thead {
-            display: none;
-        }
-
-        table {
-            background: transparent;
-            box-shadow: none;
-        }
-
-        tbody tr {
-            margin-bottom: 14px;
-            overflow: hidden;
-            background: white;
-            border-radius: 12px;
-            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
-        }
-
-        th:first-child,
-        td:first-child {
-            width: 100%;
-        }
-
-        td {
-            border-bottom: none;
-        }
-
-        .map-info {
-            padding: 17px;
-            background: #fafbfc;
-            border-bottom: 1px solid #eee;
-        }
-
-        .boss-list {
-            padding: 2px;
-        }
-
-        .boss-item {
-            max-width: none;
-        }
-    }
-
-    @media (max-width: 500px) {
-        .legend {
-            gap: 14px;
-            font-size: 13px;
-        }
-
-        .boss-item {
-            flex-basis: 100%;
-            max-width: 100%;
-        }
-    }
diff --git a/templates/styles/pages/guanaishouling.css b/templates/styles/pages/guanaishouling.css
deleted file mode 100644
index 26543eb..0000000
--- a/templates/styles/pages/guanaishouling.css
+++ /dev/null
@@ -1,78 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }
-
-    .section {
-        margin-bottom: 24px;
-    }
-
-    .section-title {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        margin: 0 0 12px 0;
-        color: #222;
-        font-size: 22px;
-        font-weight: 800;
-    }
-
-    .section-title::before {
-        content: "";
-        display: block;
-        width: 5px;
-        height: 28px;
-        background: #d93939;
-        border-radius: 3px;
-    }table {
-        text-align: left;
-    }th, td {
-        vertical-align: middle;
-    }
-
-    tbody tr.camp-eren {
-        color: #b91c1c;
-    }
-
-    tbody tr.camp-haoqi {
-        color: #1d4ed8;
-    }
-
-    .camp-col,
-    .status-col {
-        width: 90px;
-        text-align: center;
-        white-space: nowrap;
-        font-weight: 800;
-    }
-
-    .castle-col {
-        min-width: 120px;
-        font-weight: 800;
-        color: #333;
-        white-space: nowrap;
-    }
-
-    tr.camp-eren .castle-col {
-        color: #b91c1c;
-    }
-
-    tr.camp-haoqi .castle-col {
-        color: #1d4ed8;
-    }
-
-    .time-col,
-    .remain-col {
-        min-width: 150px;
-        color: #60657a;
-        text-align: center;
-        white-space: nowrap;
-        font-variant-numeric: tabular-nums;
-    }
-
-    .remain-col {
-        color: #d93939;
-        font-weight: 800;
-    }
diff --git a/templates/styles/pages/helps.css b/templates/styles/pages/helps.css
index e0a7e6f..5fd7b99 100644
--- a/templates/styles/pages/helps.css
+++ b/templates/styles/pages/helps.css
@@ -170,69 +170,3 @@
 .help-footer strong {
     color: #e6d4a4;
 }
-
-@media (max-width: 1180px) {
-    .section-grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .section.span-3 {
-        grid-column: 1 / -1;
-    }
-
-    .section.span-2 {
-        grid-column: span 2;
-    }
-
-    .ranking-list {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-
-    .push-section .section-body {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-}
-
-@media (max-width: 760px) {
-    .help-page {
-        padding: 13px;
-        border-radius: 14px;
-    }
-
-    .help-header {
-        align-items: flex-start;
-        flex-direction: column;
-        gap: 10px;
-    }
-
-    .top-name {
-        font-size: 20px;
-    }
-
-    .top-desc {
-        text-align: left;
-    }
-
-    .section-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .section.span-2,
-    .section.span-3 {
-        grid-column: span 1;
-    }
-
-    .span-2 .section-body,
-    .push-section .section-body {
-        grid-template-columns: 1fr;
-    }
-
-    .feature,
-    .ranking-feature {
-        grid-template-columns: 78px minmax(0, 1fr);
-    }
-
-    .ranking-list {
-        grid-template-columns: 1fr;
-    }
-}
diff --git a/templates/styles/pages/huajia.css b/templates/styles/pages/huajia.css
deleted file mode 100644
index 0ae9ec2..0000000
--- a/templates/styles/pages/huajia.css
+++ /dev/null
@@ -1,26 +0,0 @@
-h2 {
-        margin-top: 40px;
-        margin-bottom: 12px;
-        color: #d93939;
-        font-size: 26px;
-        font-weight: 700;
-    }table {
-        margin-bottom: 20px;
-    }th, td {
-        text-align: left;
-    }
-
-    .lines {
-        color: #555;
-        font-weight: 600;
-    }
-
-    .price {
-        color: #1e6bd6;
-        font-weight: 700;
-    }
-
-    .empty {
-        color: #999;
-        font-style: italic;
-    }
diff --git a/templates/styles/pages/jiaoyihang.css b/templates/styles/pages/jiaoyihang.css
index 65524d0..55b1fd9 100644
--- a/templates/styles/pages/jiaoyihang.css
+++ b/templates/styles/pages/jiaoyihang.css
@@ -1,6 +1,7 @@
-.header {
-        background: #ffffff;
-        border: 1px solid #e6e8ee;
+    .header {
+        color: var(--jx3-text);
+        background: linear-gradient(180deg, rgba(17, 52, 81, 0.96), rgba(9, 35, 57, 0.96));
+        border: 1px solid var(--jx3-border-soft);
         border-radius: 8px;
         padding: 22px 26px;
         margin-bottom: 16px;
@@ -12,12 +13,12 @@
         gap: 18px;
         margin-top: 10px;
         font-size: 15px;
-        color: #667085;
+        color: var(--jx3-text-muted);
     }
 
     .table-wrapper {
-        background: #ffffff;
-        border: 1px solid #e6e8ee;
+        background: rgba(7, 26, 43, 0.76);
+        border: 1px solid var(--jx3-border-soft);
         border-radius: 8px;
         overflow: hidden;
         box-shadow: 0 6px 18px rgba(35, 38, 47, 0.06);
@@ -44,7 +45,7 @@
 
     td {
         padding: 14px 16px;
-        border-bottom: 1px solid #edf0f5;
+        border-bottom: 1px solid var(--jx3-border-faint);
         font-size: 15px;
         vertical-align: middle;
     }
@@ -61,7 +62,7 @@
         height: 34px;
         border-radius: 6px;
         flex: 0 0 auto;
-        background: #edf0f5;
+        background: rgba(7, 26, 43, 0.6);
     }
 
     .item-name {
@@ -69,7 +70,7 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         font-weight: 700;
-        color: #20232a;
+        color: var(--jx3-text);
     }
 
     .price {
@@ -79,7 +80,7 @@
         gap: 4px;
         white-space: nowrap;
         font-weight: 700;
-        color: #2f343d;
+        color: var(--jx3-gold-bright);
     }
 
     .money-part {
@@ -97,11 +98,11 @@
 
     .sample {
         font-weight: 700;
-        color: #2f343d;
+        color: var(--jx3-text-secondary);
     }
 
     .time {
-        color: #667085;
+        color: var(--jx3-text-muted);
         font-size: 14px;
         white-space: nowrap;
     }
diff --git a/templates/styles/pages/jineng.css b/templates/styles/pages/jineng.css
deleted file mode 100644
index 5c4f999..0000000
--- a/templates/styles/pages/jineng.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }
-
-    .section {
-        margin-bottom: 24px;
-    }
-
-    .section-title {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        margin: 0 0 12px 0;
-        color: #222;
-        font-size: 24px;
-        font-weight: 800;
-    }
-
-    .section-title::before {
-        content: "";
-        display: block;
-        width: 5px;
-        height: 30px;
-        background: #2f74d0;
-        border-radius: 3px;
-    }
-
-    .cards {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 14px;
-    }
-
-    .card {
-        display: grid;
-        grid-template-columns: 54px minmax(0, 1fr);
-        gap: 12px;
-        background: white;
-        border-radius: 12px;
-        padding: 14px;
-        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
-    }
-
-    .icon {
-        width: 48px;
-        height: 48px;
-        border-radius: 8px;
-        object-fit: cover;
-        background: #f1f2f6;
-    }
-
-    .head {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 8px;
-        margin-bottom: 8px;
-    }
-
-    .name {
-        color: #222;
-        font-size: 18px;
-        font-weight: 800;
-        line-height: 1.25;
-    }
-
-    .tag {
-        color: #5d6680;
-        background: #eef2f8;
-        border-radius: 999px;
-        padding: 2px 8px;
-        font-size: 13px;
-        white-space: nowrap;
-    }
-
-    .desc {
-        color: #333;
-        font-size: 15px;
-        line-height: 1.55;
-        word-break: break-word;
-    }
diff --git a/templates/styles/pages/jingnai.css b/templates/styles/pages/jingnai.css
deleted file mode 100644
index 71e3d53..0000000
--- a/templates/styles/pages/jingnai.css
+++ /dev/null
@@ -1,66 +0,0 @@
-.meta {
-        margin-bottom: 22px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }
-
-    .summary {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        gap: 14px;
-        margin-bottom: 22px;
-    }
-
-    .stat {
-        background: white;
-        border-radius: 12px;
-        padding: 18px 14px;
-        text-align: center;
-        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
-    }
-
-    .label {
-        color: #7a7f99;
-        font-size: 16px;
-        margin-bottom: 8px;
-    }
-
-    .value {
-        color: #d93939;
-        font-size: 30px;
-        line-height: 1;
-        font-weight: 800;
-        font-variant-numeric: tabular-nums;
-    }table {
-        text-align: left;
-    }th, td {
-        vertical-align: middle;
-    }
-
-    .skill-col {
-        width: 34%;
-        font-weight: 800;
-        color: #333;
-        word-break: break-word;
-        line-height: 1.45;
-    }
-
-    .leader-col {
-        width: 30%;
-        color: #333;
-        word-break: break-word;
-        line-height: 1.45;
-    }
-
-    .color-col,
-    .level-col {
-        text-align: center;
-        white-space: nowrap;
-        font-weight: 700;
-    }
-
-    .level-col {
-        color: #d93939;
-        font-variant-numeric: tabular-nums;
-    }
diff --git a/templates/styles/pages/jinjia.css b/templates/styles/pages/jinjia.css
deleted file mode 100644
index 8df31c0..0000000
--- a/templates/styles/pages/jinjia.css
+++ /dev/null
@@ -1,12 +0,0 @@
-table {
-        margin-top: 10px;
-        text-align: left;  /* 不影响表格内容 */
-    }
-
-    .text-col {
-        max-width: 360px;
-        line-height: 1.5em;
-        word-break: break-word;
-        font-weight: 600;
-        color: #333;
-    }
diff --git a/templates/styles/pages/jinqiqiyu.css b/templates/styles/pages/jinqiqiyu.css
deleted file mode 100644
index 59ca324..0000000
--- a/templates/styles/pages/jinqiqiyu.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }table {
-        text-align: left;
-    }th, td {
-        white-space: nowrap;
-    }
-
-    .event-col {
-        font-weight: 700;
-        color: #333;
-    }
-
-    .role-col {
-        color: #333;
-    }
-
-    .time-col {
-        color: #60657a;
-        font-variant-numeric: tabular-nums;
-    }
diff --git a/templates/styles/pages/juesheliaotian.css b/templates/styles/pages/juesheliaotian.css
index 20afbcb..eda6e8f 100644
--- a/templates/styles/pages/juesheliaotian.css
+++ b/templates/styles/pages/juesheliaotian.css
@@ -20,7 +20,7 @@
     /* 角色列 */
     .role-col {
         width: 16%;
-        color: #333333;
+        color: var(--jx3-text);
         font-weight: 700;
         text-align: center;
         word-break: break-word;
@@ -35,7 +35,7 @@
     /* 消息列 */
     .message-col {
         width: 56%;
-        color: #333333;
+        color: var(--jx3-text-secondary);
         font-weight: 600;
         line-height: 1.65;
         word-break: break-word;
diff --git a/templates/styles/pages/juesheqiyu.css b/templates/styles/pages/juesheqiyu.css
deleted file mode 100644
index b705b4e..0000000
--- a/templates/styles/pages/juesheqiyu.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.section {
-            margin-bottom: 32px;
-        }
-
-        .section-title {
-            font-size: 36px;
-            font-weight: bold;
-            margin-bottom: 16px;
-            border-left: 4px solid #4f7cff;
-            padding-left: 10px;
-            color: #1f2a44;
-        }
-
-        .card-container {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 16px;
-        }
-
-        .card {
-            background: #ffffff;
-            border-radius: 8px;
-            padding: 16px 12px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            min-height: 90px;
-        }
-
-        .card img {
-            width: 100%;
-            max-width: 180px;
-            height: auto;   /* 自动保持比例 */
-            object-fit: contain;
-            margin-bottom: 6px;
-        }
-
-        .event-name {
-            font-size: 22px;
-            font-weight: 600;
-            margin-bottom: 4px;
-            color: #2b3a67;
-        }
-
-        .time {
-            font-size: 22px;
-            color: #7a7f99;
-        }
-
-        .empty {
-            color: #999;
-            font-size: 14px;
-            padding: 10px 0;
-        }
diff --git a/templates/styles/pages/mingjianpaihang.css b/templates/styles/pages/mingjianpaihang.css
deleted file mode 100644
index 08affc5..0000000
--- a/templates/styles/pages/mingjianpaihang.css
+++ /dev/null
@@ -1,21 +0,0 @@
-table {
-        margin-top: 10px;
-        text-align: left;
-    }th, td {
-        vertical-align: middle;
-    }
-
-    .avatar {
-        width: 40px;
-        height: 40px;
-        border-radius: 50%;
-    }
-
-    .rank-1 { color: gold; font-weight: bold; }
-    .rank-2 { color: silver; font-weight: bold; }
-    .rank-3 { color: #cd7f32; font-weight: bold; }
-
-    .winrate {
-        color: #27ae60;
-        font-weight: bold;
-    }
diff --git a/templates/styles/pages/mingjiantongji.css b/templates/styles/pages/mingjiantongji.css
deleted file mode 100644
index 71cc363..0000000
--- a/templates/styles/pages/mingjiantongji.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }table {
-        text-align: left;
-    }th, td {
-        white-space: nowrap;
-        vertical-align: middle;
-    }
-
-    .school {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-weight: 700;
-        color: #333;
-    }
-
-    .school-icon {
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        object-fit: contain;
-        flex: 0 0 auto;
-    }
-
-    .num-col {
-        color: #d93939;
-        font-weight: 700;
-        text-align: center;
-        font-variant-numeric: tabular-nums;
-    }
diff --git a/templates/styles/pages/qiwu.css b/templates/styles/pages/qiwu.css
deleted file mode 100644
index 09b355d..0000000
--- a/templates/styles/pages/qiwu.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.item {
-        display: flex;
-        background: #fff;
-        border-radius: 14px;
-        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
-        margin-bottom: 22px;
-        overflow: hidden;
-    }
-
-    .item img {
-        width: 200px;
-        height: 200px;
-        object-fit: contain;
-        background: #fafafa;
-        padding: 14px;
-    }
-
-    .info {
-        flex: 1;
-        padding: 18px 22px;
-    }
-
-    .name {
-        font-size: 26px;
-        font-weight: 800;
-        margin-bottom: 6px;
-    }
-
-    /* 品质颜色 */
-    .q1 { color: #999; }
-    .q2 { color: #2ecc71; }
-    .q3 { color: #3498db; }
-    .q4 { color: #9b59b6; }
-    .q5 { color: #e67e22; }
-
-    .meta {
-        font-size: 15px;
-        color: #555;
-        margin-bottom: 12px;
-    }
-
-    .meta span {
-        margin-right: 16px;
-    }
-
-    .tip {
-        background: #f8f9fb;
-        border-left: 4px solid #d93939;
-        padding: 8px 12px;
-        font-size: 14px;
-        color: #555;
-        margin-bottom: 14px;
-    }
-
-    .attrs {
-        display: grid;
-        grid-template-columns: repeat(5, 1fr);
-        gap: 10px;
-    }
-
-    .attr {
-        background: #fafafa;
-        border-radius: 10px;
-        padding: 10px;
-        text-align: center;
-    }
-
-    .attr-name {
-        font-size: 13px;
-        color: #777;
-        margin-bottom: 4px;
-    }
-
-    .attr-value {
-        font-size: 17px;
-        font-weight: 700;
-        color: #333;
-    }
-
-    .footer {
-        margin-top: 10px;
-        font-size: 14px;
-        color: #777;
-    }
diff --git a/templates/styles/pages/qixue.css b/templates/styles/pages/qixue.css
deleted file mode 100644
index 7a2d275..0000000
--- a/templates/styles/pages/qixue.css
+++ /dev/null
@@ -1,94 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }
-
-    .section {
-        margin-bottom: 24px;
-    }
-
-    .section-title {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        margin: 0 0 12px 0;
-        color: #222;
-        font-size: 24px;
-        font-weight: 800;
-    }
-
-    .section-title::before {
-        content: "";
-        display: block;
-        width: 5px;
-        height: 30px;
-        background: #d93939;
-        border-radius: 3px;
-    }
-
-    .cards {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 14px;
-    }
-
-    .card {
-        display: grid;
-        grid-template-columns: 54px minmax(0, 1fr);
-        gap: 12px;
-        background: white;
-        border-radius: 12px;
-        padding: 14px;
-        box-shadow: 0 4px 16px rgba(0,0,0,0.08);
-    }
-
-    .icon {
-        width: 48px;
-        height: 48px;
-        border-radius: 8px;
-        object-fit: cover;
-        background: #f1f2f6;
-    }
-
-    .head {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 8px;
-        margin-bottom: 8px;
-    }
-
-    .name {
-        color: #222;
-        font-size: 18px;
-        font-weight: 800;
-        line-height: 1.25;
-    }
-
-    .tag {
-        color: white;
-        background: #d93939;
-        border-radius: 999px;
-        padding: 2px 8px;
-        font-size: 13px;
-        font-weight: 700;
-        white-space: nowrap;
-    }
-
-    .interval {
-        color: #7a7f99;
-        background: #f1f2f6;
-        border-radius: 999px;
-        padding: 2px 8px;
-        font-size: 13px;
-        white-space: nowrap;
-    }
-
-    .desc {
-        color: #333;
-        font-size: 15px;
-        line-height: 1.55;
-        word-break: break-word;
-    }
diff --git a/templates/styles/pages/qiyuhuizong.css b/templates/styles/pages/qiyuhuizong.css
deleted file mode 100644
index 20ad96e..0000000
--- a/templates/styles/pages/qiyuhuizong.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }table {
-        text-align: left;
-    }th, td {
-        white-space: nowrap;
-    }
-
-    .event-col {
-        font-weight: 700;
-        color: #333;
-    }
-
-    .count-col {
-        color: #d93939;
-        font-weight: 700;
-        text-align: center;
-    }
-
-    .role-col {
-        color: #333;
-    }
-
-    .time-col {
-        color: #60657a;
-        font-variant-numeric: tabular-nums;
-    }
diff --git a/templates/styles/pages/qiyuliebiao.css b/templates/styles/pages/qiyuliebiao.css
deleted file mode 100644
index 8df31c0..0000000
--- a/templates/styles/pages/qiyuliebiao.css
+++ /dev/null
@@ -1,12 +0,0 @@
-table {
-        margin-top: 10px;
-        text-align: left;  /* 不影响表格内容 */
-    }
-
-    .text-col {
-        max-width: 360px;
-        line-height: 1.5em;
-        word-break: break-word;
-        font-weight: 600;
-        color: #333;
-    }
diff --git a/templates/styles/pages/qufuzhuangtai.css b/templates/styles/pages/qufuzhuangtai.css
deleted file mode 100644
index 77a1a1a..0000000
--- a/templates/styles/pages/qufuzhuangtai.css
+++ /dev/null
@@ -1,54 +0,0 @@
-.section {
-            margin-bottom: 32px;
-        }
-        .section-title {
-            font-size: 32px;
-            font-weight: bold;
-            margin-bottom: 16px;
-            border-left: 4px solid #4f7cff;
-            padding-left: 10px;
-            color: #1f2a44;
-        }
-
-        .card-container {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 16px;
-        }
-        .card {
-            border-radius: 8px;
-            padding: 30px 12px;
-            text-align: center;
-            font-weight: 600;
-            font-size: 28px;
-            color: #ffffff;
-        }
-
-        /* 整块背景颜色控制 */
-        .爆满 {
-            background: #d9534f; /* 红 */
-        }
-        .拥挤 {
-            background: #f0ad4e; /* 橙 */
-            color: #3b2e00;
-        }
-        .正常, .顺畅 {
-            background: #4cae4c; /* 绿 */
-        }
-        .维护 {
-            background: #bfbfbf; /* 灰 */
-            color: #333333;
-        }
-
-        .empty {
-            color: #7a7f99;
-            font-size: 16px;
-            padding: 6px 0;
-        }
-
-        @media (max-width: 1000px) {
-            .card-container { grid-template-columns: repeat(2, 1fr); }
-        }
-        @media (max-width: 600px) {
-            .card-container { grid-template-columns: repeat(1, 1fr); }
-        }
diff --git a/templates/styles/pages/rank_role.css b/templates/styles/pages/rank_role.css
deleted file mode 100644
index da20550..0000000
--- a/templates/styles/pages/rank_role.css
+++ /dev/null
@@ -1,61 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }table {
-        text-align: left;
-    }th, td {
-        vertical-align: middle;
-    }
-
-    .rank-col,
-    .level-col,
-    .camp-col,
-    .score-col {
-        white-space: nowrap;
-        text-align: center;
-    }
-
-    .rank-col {
-        width: 56px;
-        color: #d93939;
-        font-weight: 800;
-    }
-
-    .force {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        min-width: 108px;
-        font-weight: 700;
-        color: #333;
-        white-space: nowrap;
-    }
-
-    .force-icon {
-        width: 30px;
-        height: 30px;
-        border-radius: 50%;
-        object-fit: contain;
-        flex: 0 0 auto;
-    }
-
-    .role-col {
-        min-width: 120px;
-        font-weight: 700;
-        color: #333;
-        white-space: nowrap;
-    }
-
-    .tong-col {
-        max-width: 260px;
-        word-break: break-word;
-        color: #333;
-    }
-
-    .score-col {
-        color: #d93939;
-        font-weight: 800;
-        font-variant-numeric: tabular-nums;
-    }
diff --git a/templates/styles/pages/rank_tong0.css b/templates/styles/pages/rank_tong0.css
deleted file mode 100644
index bb78ddc..0000000
--- a/templates/styles/pages/rank_tong0.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }table {
-        text-align: left;
-    }th, td {
-        vertical-align: middle;
-    }
-
-    .rank-col,
-    .people-col,
-    .score-col {
-        white-space: nowrap;
-        text-align: center;
-    }
-
-    .rank-col {
-        width: 56px;
-        color: #d93939;
-        font-weight: 800;
-    }
-
-    .tong-col {
-        min-width: 220px;
-        font-weight: 800;
-        color: #333;
-        word-break: break-word;
-    }
-
-    .master-col {
-        min-width: 150px;
-        color: #333;
-        word-break: break-word;
-    }
-
-    .castle-col {
-        min-width: 110px;
-        color: #60657a;
-        word-break: break-word;
-    }
-
-    .people-col {
-        color: #333;
-        font-variant-numeric: tabular-nums;
-    }
-
-    .score-col {
-        color: #d93939;
-        font-weight: 800;
-        font-variant-numeric: tabular-nums;
-    }
diff --git a/templates/styles/pages/rank_tong1.css b/templates/styles/pages/rank_tong1.css
deleted file mode 100644
index bb78ddc..0000000
--- a/templates/styles/pages/rank_tong1.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }table {
-        text-align: left;
-    }th, td {
-        vertical-align: middle;
-    }
-
-    .rank-col,
-    .people-col,
-    .score-col {
-        white-space: nowrap;
-        text-align: center;
-    }
-
-    .rank-col {
-        width: 56px;
-        color: #d93939;
-        font-weight: 800;
-    }
-
-    .tong-col {
-        min-width: 220px;
-        font-weight: 800;
-        color: #333;
-        word-break: break-word;
-    }
-
-    .master-col {
-        min-width: 150px;
-        color: #333;
-        word-break: break-word;
-    }
-
-    .castle-col {
-        min-width: 110px;
-        color: #60657a;
-        word-break: break-word;
-    }
-
-    .people-col {
-        color: #333;
-        font-variant-numeric: tabular-nums;
-    }
-
-    .score-col {
-        color: #d93939;
-        font-weight: 800;
-        font-variant-numeric: tabular-nums;
-    }
diff --git a/templates/styles/pages/rank_tong2.css b/templates/styles/pages/rank_tong2.css
deleted file mode 100644
index bb78ddc..0000000
--- a/templates/styles/pages/rank_tong2.css
+++ /dev/null
@@ -1,53 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }table {
-        text-align: left;
-    }th, td {
-        vertical-align: middle;
-    }
-
-    .rank-col,
-    .people-col,
-    .score-col {
-        white-space: nowrap;
-        text-align: center;
-    }
-
-    .rank-col {
-        width: 56px;
-        color: #d93939;
-        font-weight: 800;
-    }
-
-    .tong-col {
-        min-width: 220px;
-        font-weight: 800;
-        color: #333;
-        word-break: break-word;
-    }
-
-    .master-col {
-        min-width: 150px;
-        color: #333;
-        word-break: break-word;
-    }
-
-    .castle-col {
-        min-width: 110px;
-        color: #60657a;
-        word-break: break-word;
-    }
-
-    .people-col {
-        color: #333;
-        font-variant-numeric: tabular-nums;
-    }
-
-    .score-col {
-        color: #d93939;
-        font-weight: 800;
-        font-variant-numeric: tabular-nums;
-    }
diff --git a/templates/styles/pages/richangyuche.css b/templates/styles/pages/richangyuche.css
index 9ae76db..351f372 100644
--- a/templates/styles/pages/richangyuche.css
+++ b/templates/styles/pages/richangyuche.css
@@ -10,7 +10,7 @@
     text-align: center;
     font-size: 18px;
     font-weight: 700;
-    color: #555;
+    color: var(--jx3-text-secondary);
 }
 
 /* 卡片基础 */
@@ -24,19 +24,19 @@
 
 /* 状态样式 */
 .card.past {
-    background: #e5e5e5;
-    color: #666;
+    background: rgba(71, 91, 108, 0.72);
+    color: var(--jx3-text-secondary);
 }
 
 .card.today {
-    background: #3b82f6;
-    color: #fff;
+    background: rgba(53, 113, 165, 0.9);
+    color: var(--jx3-text);
 }
 
 .card.future {
-    background: #ffffff;
-    color: #333;
-    border: 1px solid #ddd;
+    background: rgba(13, 41, 66, 0.82);
+    color: var(--jx3-text);
+    border: 1px solid var(--jx3-border-faint);
 }
 
 /* 内容 */
diff --git a/templates/styles/pages/shilianpaixing.css b/templates/styles/pages/shilianpaixing.css
deleted file mode 100644
index df5d8e1..0000000
--- a/templates/styles/pages/shilianpaixing.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }table {
-        text-align: left;
-    }th, td {
-        vertical-align: middle;
-    }
-
-    .rank-col,
-    .number-col {
-        white-space: nowrap;
-        text-align: center;
-        font-variant-numeric: tabular-nums;
-    }
-
-    .rank-col {
-        width: 60px;
-        color: #d93939;
-        font-weight: 800;
-    }
-
-    .role-col {
-        min-width: 180px;
-        font-weight: 700;
-        color: #333;
-    }
-
-    .score-col {
-        color: #d93939;
-        font-weight: 800;
-    }
diff --git a/templates/styles/pages/shitu.css b/templates/styles/pages/shitu.css
deleted file mode 100644
index 452e1b5..0000000
--- a/templates/styles/pages/shitu.css
+++ /dev/null
@@ -1,49 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }table {
-        text-align: left;
-    }th, td {
-        vertical-align: middle;
-    }
-
-    .force-col {
-        min-width: 120px;
-    }
-
-    .force {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-weight: 700;
-        color: #333;
-        white-space: nowrap;
-    }
-
-    .force-icon {
-        width: 32px;
-        height: 32px;
-        border-radius: 50%;
-        object-fit: contain;
-        flex: 0 0 auto;
-    }
-
-    .name-col {
-        font-weight: 700;
-        color: #333;
-        white-space: nowrap;
-    }
-
-    .small-col {
-        white-space: nowrap;
-        text-align: center;
-    }
-
-    .comment-col {
-        max-width: 420px;
-        line-height: 1.5;
-        word-break: break-word;
-        color: #333;
-    }
diff --git a/templates/styles/pages/temp_test.css b/templates/styles/pages/temp_test.css
deleted file mode 100644
index 8b13789..0000000
--- a/templates/styles/pages/temp_test.css
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/templates/styles/pages/tuanduizhaomu.css b/templates/styles/pages/tuanduizhaomu.css
deleted file mode 100644
index 8df31c0..0000000
--- a/templates/styles/pages/tuanduizhaomu.css
+++ /dev/null
@@ -1,12 +0,0 @@
-table {
-        margin-top: 10px;
-        text-align: left;  /* 不影响表格内容 */
-    }
-
-    .text-col {
-        max-width: 360px;
-        line-height: 1.5em;
-        word-break: break-word;
-        font-weight: 600;
-        color: #333;
-    }
diff --git a/templates/styles/pages/weizuoqiyu.css b/templates/styles/pages/weizuoqiyu.css
deleted file mode 100644
index 41a2d07..0000000
--- a/templates/styles/pages/weizuoqiyu.css
+++ /dev/null
@@ -1,76 +0,0 @@
-.header {
-            margin-bottom: 24px;
-            color: #1f2a44;
-        }
-
-        .title {
-            font-size: 34px;
-            font-weight: 800;
-            margin-bottom: 8px;
-        }
-
-        .meta {
-            font-size: 20px;
-            color: #7a7f99;
-        }
-
-        .section {
-            margin-bottom: 32px;
-        }
-
-        .section-title {
-            font-size: 36px;
-            font-weight: bold;
-            margin-bottom: 16px;
-            border-left: 4px solid #4f7cff;
-            padding-left: 10px;
-            color: #1f2a44;
-        }
-
-        .card-container {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 16px;
-        }
-
-        .card {
-            background: #ffffff;
-            border-radius: 8px;
-            padding: 16px 12px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            min-height: 90px;
-        }
-
-        .card img {
-            width: 100%;
-            max-width: 180px;
-            height: auto;
-            object-fit: contain;
-            margin-bottom: 6px;
-        }
-
-        .event-name {
-            font-size: 22px;
-            font-weight: 600;
-            margin-bottom: 4px;
-            color: #2b3a67;
-        }
-
-        .time {
-            font-size: 22px;
-            color: #7a7f99;
-        }
-
-        .empty {
-            background: #ffffff;
-            border-radius: 8px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
-            color: #7a7f99;
-            font-size: 20px;
-            padding: 22px;
-        }
diff --git a/templates/styles/pages/wujia.css b/templates/styles/pages/wujia.css
index d2635d1..1586dfb 100644
--- a/templates/styles/pages/wujia.css
+++ b/templates/styles/pages/wujia.css
@@ -9,7 +9,7 @@
     .goods-desc {
         font-size: 16px;
         line-height: 1.8;
-        color: #444;
+        color: var(--jx3-text-secondary);
         margin: 0 0 10px;
         text-align: left;
     }
@@ -22,10 +22,11 @@
         gap: 20px 40px;
         font-size: 18px;
         margin-bottom: 30px;
+        color: var(--jx3-text-muted);
     }
 
     .meta-row .price {
-        color: #d93939;
+        color: var(--jx3-gold-bright);
         font-weight: 800;
     }
 
@@ -46,7 +47,7 @@
         font-weight: 700;
         margin-bottom: 8px;
         text-align: center;
-        color: #d93939;
+        color: var(--jx3-gold-bright);
     }
 
     .table-scroll {
@@ -71,7 +72,7 @@
     }
 
     .price-col {
-        color: #d93939;
+        color: var(--jx3-gold-bright);
         font-weight: 700;
     }
 
@@ -79,77 +80,48 @@
         height: 80px;
         padding: 28px 10px;
         text-align: center;
-        color: #999999;
+        color: var(--jx3-text-muted);
         font-weight: 400;
     }
 
     /* ===== 万宝楼公示（蓝色） ===== */
 
     .table-card.notice .table-title {
-        color: #1e6bd6;
+        color: var(--jx3-blue);
     }
 
     .table-card.notice .price-col {
-        color: #1e6bd6;
+        color: var(--jx3-blue);
     }
 
     .table-card.notice thead {
-        background: #1e6bd6;
+        background: rgba(63, 111, 153, 0.78);
     }
 
     /* ===== 万宝楼在售（绿色） ===== */
 
     .table-card.sale .table-title {
-        color: #2e8b57;
+        color: var(--jx3-green);
     }
 
     .table-card.sale .price-col {
-        color: #2e8b57;
+        color: var(--jx3-green);
     }
 
     .table-card.sale thead {
-        background: #2e8b57;
+        background: rgba(43, 111, 82, 0.78);
     }
 
     /* ===== 查询区服（紫色） ===== */
 
     .table-card.query .table-title {
-        color: #8a4fd3;
+        color: var(--jx3-purple);
     }
 
     .table-card.query .price-col {
-        color: #8a4fd3;
+        color: var(--jx3-purple);
     }
 
     .table-card.query thead {
-        background: #8a4fd3;
-    }
-
-    @media (max-width: 1100px) {
-        .table-wrapper {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
-    }
-
-    @media (max-width: 720px) {
-        body {
-            padding: 12px;
-        }
-
-        h1 {
-            font-size: 24px;
-        }
-
-        .goods-desc {
-            font-size: 14px;
-        }
-
-        .meta-row {
-            gap: 12px 20px;
-            font-size: 16px;
-        }
-
-        .table-wrapper {
-            grid-template-columns: 1fr;
-        }
+        background: rgba(90, 67, 126, 0.8);
     }
diff --git a/templates/styles/pages/xiaoyao.css b/templates/styles/pages/xiaoyao.css
deleted file mode 100644
index c9098b9..0000000
--- a/templates/styles/pages/xiaoyao.css
+++ /dev/null
@@ -1,18 +0,0 @@
-table {
-        text-align: center;
-    }
-
-    .purple {
-        color: #a020f0;
-        font-weight: 600;
-    }
-
-    .blue {
-        color: #1e90ff;
-        font-weight: 600;
-    }
-
-    .kungfu {
-        font-weight: bold;
-        color: #333;
-    }
diff --git a/templates/styles/pages/xingxiashijian.css b/templates/styles/pages/xingxiashijian.css
index d2980f8..5d819a3 100644
--- a/templates/styles/pages/xingxiashijian.css
+++ b/templates/styles/pages/xingxiashijian.css
@@ -45,7 +45,7 @@
 
 .desc {
     font-size: 20px;
-    color: #444;
+    color: var(--jx3-text-secondary);
     line-height: 1.5;
 }
 
@@ -54,11 +54,11 @@
     width: 36px;
     height: 36px;
     border-radius: 8px;
-    background: #e5e7eb;
+    background: rgba(114, 169, 213, 0.16);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     font-weight: 700;
-    color: #374151;
+    color: var(--jx3-blue);
 }
diff --git a/templates/styles/pages/yanhuan.css b/templates/styles/pages/yanhuan.css
deleted file mode 100644
index 8df31c0..0000000
--- a/templates/styles/pages/yanhuan.css
+++ /dev/null
@@ -1,12 +0,0 @@
-table {
-        margin-top: 10px;
-        text-align: left;  /* 不影响表格内容 */
-    }
-
-    .text-col {
-        max-width: 360px;
-        line-height: 1.5em;
-        word-break: break-word;
-        font-weight: 600;
-        color: #333;
-    }
diff --git a/templates/styles/pages/zhanji.css b/templates/styles/pages/zhanji.css
index 55d539d..b82bd42 100644
--- a/templates/styles/pages/zhanji.css
+++ b/templates/styles/pages/zhanji.css
@@ -69,7 +69,7 @@
 
 .stat-title {
     font-size: 26px;
-    color: #777;
+    color: var(--jx3-text-muted);
 }
 
 .stat-value {
diff --git a/templates/styles/pages/zhengyingpaimai.css b/templates/styles/pages/zhengyingpaimai.css
deleted file mode 100644
index c28ade6..0000000
--- a/templates/styles/pages/zhengyingpaimai.css
+++ /dev/null
@@ -1,21 +0,0 @@
-table {
-        margin-top: 10px;
-        text-align: left;
-    }
-
-    .text-col {
-        max-width: 360px;
-        line-height: 1.5em;
-        word-break: break-word;
-        font-weight: 600;
-        color: #333;
-    }
-
-    /* ===== 阵营整行着色 ===== */
-    tr.camp-haoqi {
-        color: #1e6bd6; /* 浩气盟 */
-    }
-
-    tr.camp-eren {
-        color: #d93939; /* 恶人谷 */
-    }
diff --git a/templates/styles/pages/zhenyingevent.css b/templates/styles/pages/zhenyingevent.css
deleted file mode 100644
index c09b3a9..0000000
--- a/templates/styles/pages/zhenyingevent.css
+++ /dev/null
@@ -1,59 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }table {
-        text-align: left;
-    }th, td {
-        vertical-align: middle;
-    }
-
-    tbody tr.camp-eren {
-        background: #fff2f2;
-        color: #b91c1c;
-    }
-
-    tbody tr.camp-haoqi {
-        background: #eff6ff;
-        color: #1d4ed8;
-    }
-
-    .camp-col {
-        width: 90px;
-        text-align: center;
-        white-space: nowrap;
-        font-weight: 800;
-    }
-
-    .fenxian-col,
-    .server-col {
-        width: 130px;
-        text-align: center;
-        white-space: nowrap;
-        font-weight: 700;
-    }
-
-    .role-col {
-        max-width: 320px;
-        color: #333;
-        font-weight: 700;
-        word-break: break-word;
-        line-height: 1.45;
-    }
-
-    tr.camp-eren .role-col {
-        color: #b91c1c;
-    }
-
-    tr.camp-haoqi .role-col {
-        color: #1d4ed8;
-    }
-
-    .time-col {
-        min-width: 150px;
-        color: #60657a;
-        text-align: center;
-        white-space: nowrap;
-        font-variant-numeric: tabular-nums;
-    }
diff --git a/templates/styles/pages/zhuangshi.css b/templates/styles/pages/zhuangshi.css
deleted file mode 100644
index 48ab99a..0000000
--- a/templates/styles/pages/zhuangshi.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.card {
-        display: flex;
-        background: #fff;
-        border-radius: 16px;
-        box-shadow: 0 6px 20px rgba(0,0,0,0.08);
-        margin-bottom: 24px;
-        overflow: hidden;
-    }
-
-    .card img {
-        width: 220px;
-        height: 220px;
-        object-fit: contain;
-        background: #fafafa;
-        padding: 16px;
-    }
-
-    .content {
-        flex: 1;
-        padding: 20px 24px;
-    }
-
-    .title {
-        font-size: 26px;
-        font-weight: 800;
-        margin-bottom: 6px;
-    }
-
-    /* 品质颜色 */
-    .q1 { color: #999; }
-    .q2 { color: #2ecc71; }
-    .q3 { color: #3498db; }
-    .q4 { color: #9b59b6; }
-    .q5 { color: #e67e22; }
-
-    .meta {
-        color: #666;
-        font-size: 15px;
-        margin-bottom: 14px;
-    }
-
-    .meta span {
-        margin-right: 18px;
-    }
-
-    .tip {
-        background: #f8f9fb;
-        border-left: 4px solid #d93939;
-        padding: 10px 14px;
-        font-size: 14px;
-        color: #555;
-        margin-bottom: 16px;
-    }
-
-    .stats {
-        display: grid;
-        grid-template-columns: repeat(5, 1fr);
-        gap: 12px;
-    }
-
-    .stat {
-        background: #fafafa;
-        border-radius: 10px;
-        padding: 10px;
-        text-align: center;
-    }
-
-    .stat-name {
-        font-size: 13px;
-        color: #777;
-        margin-bottom: 6px;
-    }
-
-    .stat-value {
-        font-size: 18px;
-        font-weight: 700;
-        color: #333;
-    }
-
-    .footer {
-        margin-top: 12px;
-        font-size: 14px;
-        color: #888;
-    }
diff --git a/templates/styles/pages/zhueevent.css b/templates/styles/pages/zhueevent.css
deleted file mode 100644
index e80bf7a..0000000
--- a/templates/styles/pages/zhueevent.css
+++ /dev/null
@@ -1,34 +0,0 @@
-.meta {
-        margin-bottom: 24px;
-        color: #7a7f99;
-        font-size: 16px;
-        text-align: center;
-    }table {
-        text-align: left;
-    }th, td {
-        vertical-align: middle;
-    }
-
-    .server-col {
-        width: 160px;
-        text-align: center;
-        white-space: nowrap;
-        font-weight: 800;
-        color: #d93939;
-    }
-
-    .map-col {
-        max-width: 300px;
-        color: #333;
-        font-weight: 700;
-        word-break: break-word;
-        line-height: 1.45;
-    }
-
-    .time-col {
-        min-width: 160px;
-        color: #60657a;
-        text-align: center;
-        white-space: nowrap;
-        font-variant-numeric: tabular-nums;
-    }
diff --git a/templates/styles/pages/zilipaixing.css b/templates/styles/pages/zilipaixing.css
index f61bffc..e38961d 100644
--- a/templates/styles/pages/zilipaixing.css
+++ b/templates/styles/pages/zilipaixing.css
@@ -92,7 +92,7 @@
         gap: 9px;
         width: 100%;
         min-width: 0;
-        color: #333;
+        color: var(--jx3-text);
         font-size: 17px;
         font-weight: 700;
         white-space: nowrap;
@@ -120,7 +120,7 @@
     .role-name-col {
         padding-left: 10px;
         padding-right: 10px;
-        color: #333;
+        color: var(--jx3-text);
         font-size: 17px;
         font-weight: 600;
         text-align: center;
@@ -135,7 +135,7 @@
     .server-col {
         padding-left: 8px;
         padding-right: 8px;
-        color: #333;
+        color: var(--jx3-text-secondary);
         font-size: 17px;
         text-align: center;
         overflow: hidden;
@@ -156,58 +156,3 @@
         white-space: nowrap;
         font-variant-numeric: tabular-nums;
     }
-
-    /*
-     * 小尺寸页面适配
-     */
-    @media screen and (max-width: 760px) {
-        body {
-            padding: 10px;
-        }
-
-        h1 {
-            font-size: 30px;
-        }
-
-        .meta {
-            margin-bottom: 18px;
-            font-size: 15px;
-        }
-
-        th,
-        td {
-            height: 58px;
-            padding: 8px 5px;
-            font-size: 15px;
-        }
-
-        th {
-            height: 46px;
-            font-size: 15px;
-        }
-
-        .avatar {
-            width: 40px;
-            height: 40px;
-        }
-
-        .force-icon {
-            width: 34px;
-            height: 34px;
-        }
-
-        .force {
-            gap: 6px;
-            font-size: 15px;
-        }
-
-        .rank-col,
-        .role-name-col,
-        .server-col {
-            font-size: 15px;
-        }
-
-        .score-col {
-            font-size: 16px;
-        }
-    }
diff --git a/tests/test_template_system.py b/tests/test_template_system.py
index da9cd9a..95b0cb5 100644
--- a/tests/test_template_system.py
+++ b/tests/test_template_system.py
@@ -10,6 +10,21 @@ from core.template import TemplateRepository
 
 ROOT = Path(__file__).parent.parent
 TEMPLATE_ROOT = ROOT / "templates"
+SPECIAL_PAGE_STYLES = {
+    "baizhan",
+    "chengbeng",
+    "chengjiu",
+    "fubenjilu",
+    "helps",
+    "jiaoyihang",
+    "juesheliaotian",
+    "richangyuche",
+    "wujia",
+    "xingxiashijian",
+    "zhanji",
+    "zili",
+    "zilipaixing",
+}
 
 
 class TemplateRepositoryTests(unittest.TestCase):
@@ -21,7 +36,7 @@ class TemplateRepositoryTests(unittest.TestCase):
         page_styles = sorted((TEMPLATE_ROOT / "styles" / "pages").glob("*.css"))
         self.assertEqual(46, len(pages))
         self.assertEqual(
-            {page.stem for page in pages},
+            SPECIAL_PAGE_STYLES,
             {style.stem for style in page_styles},
         )
 
@@ -46,13 +61,165 @@ class TemplateRepositoryTests(unittest.TestCase):
                 self.assertIn("</body>", template)
                 self.assertNotIn("<!--__PAGE_CONTENT__-->", template)
                 self.assertNotIn("/*__PAGE_CSS__*/", template)
+                self.assertNotIn("/* @component", template)
+                self.assertNotIn("/* @endcomponent */", template)
                 rendered = environment.from_string(template).render(empty_context)
                 self.assertIn("</html>", rendered)
 
+    def test_repeated_page_patterns_use_shared_components(self):
+        components = (TEMPLATE_ROOT / "styles" / "components.css").read_text(
+            encoding="utf-8"
+        )
+        for selector in (
+            ".data-table",
+            ".data-cell--rank",
+            ".card-grid",
+            ".ability-card",
+            ".collection-card",
+            ".object-card",
+        ):
+            self.assertIn(selector, components)
+
+        expected_components = {
+            "bilei.html": "data-table",
+            "rank_role.html": "data-cell--rank",
+            "jineng.html": "ability-card",
+            "juesheqiyu.html": "collection-card",
+            "qiwu.html": "object-card",
+        }
+        for name, component in expected_components.items():
+            with self.subTest(page=name):
+                fragment = (TEMPLATE_ROOT / "pages" / name).read_text(
+                    encoding="utf-8"
+                )
+                self.assertIn(component, fragment)
+                page_style = TEMPLATE_ROOT / "styles" / "pages" / (
+                    f"{Path(name).stem}.css"
+                )
+                self.assertFalse(page_style.exists())
+
+    def test_image_templates_do_not_define_responsive_breakpoints(self):
+        for style in sorted((TEMPLATE_ROOT / "styles").rglob("*.css")):
+            with self.subTest(style=style.relative_to(TEMPLATE_ROOT)):
+                content = style.read_text(encoding="utf-8")
+                self.assertIsNone(
+                    re.search(r"@media\s*(?:screen\s+and\s+)?\([^)]*width", content)
+                )
+
+        base = (TEMPLATE_ROOT / "styles" / "base.css").read_text(encoding="utf-8")
+        self.assertIn("min-width: calc(var(--jx3-page-width) + 94px)", base)
+        self.assertIn("width: var(--jx3-page-width)", base)
+        self.assertNotIn("100vw", base)
+
+    def test_only_declared_component_blocks_are_injected(self):
+        table_page = asyncio.run(self.repository.get("bilei.html"))
+        self.assertIn(".data-table--spaced", table_page)
+        self.assertNotIn(".ability-card__head", table_page)
+        self.assertNotIn(".object-card__footer", table_page)
+
+        ability_page = asyncio.run(self.repository.get("jineng.html"))
+        self.assertIn(".card-grid", ability_page)
+        self.assertIn(".ability-card__head", ability_page)
+        self.assertNotIn(".data-table--spaced", ability_page)
+        self.assertNotIn(".object-card__footer", ability_page)
+
+        object_page = asyncio.run(self.repository.get("qiwu.html"))
+        self.assertIn(".object-card__footer", object_page)
+        self.assertNotIn(".ability-card__head", object_page)
+
+    def test_wujia_groups_follow_the_api_names_instead_of_list_positions(self):
+        """万宝楼分组在真实返回中位于列表末尾，且在售组名为“在售期”。"""
+        template = asyncio.run(self.repository.get("wujia.html"))
+        rendered = Environment(undefined=ChainableUndefined).from_string(template).render(
+            {
+                "icons": {"img": {}, "sect": {}, "serendipity": {}},
+                "name": "浮屠明音礼盒",
+                "alias": "",
+                "view": "",
+                "desc": "",
+                "category": "外观礼盒",
+                "date": "2018-08-24",
+                "retail": 888,
+                "list": [
+                    {"name": "电信区", "list": []},
+                    {"name": "双线区", "list": []},
+                    {"name": "无界区", "list": []},
+                    {
+                        "name": "梦江南",
+                        "list": [
+                            {
+                                "date": "QUERY-MARKER",
+                                "server": "梦江南",
+                                "value": 4700,
+                                "sale": 4,
+                            }
+                        ],
+                    },
+                    {"name": "公示期", "list": []},
+                    {
+                        "name": "在售期",
+                        "list": [
+                            {
+                                "date": "SALE-MARKER",
+                                "zone": "电信区",
+                                "server": "梦江南",
+                                "value": 5188,
+                            }
+                        ],
+                    },
+                ],
+            }
+        )
+
+        sale_start = rendered.index('<div class="table-card sale">')
+        query_start = rendered.index('<div class="table-card query">')
+        next_card = rendered.index('<div class="table-card">', query_start)
+        sale_section = rendered[sale_start:query_start]
+        query_section = rendered[query_start:next_card]
+
+        self.assertIn("SALE-MARKER", sale_section)
+        self.assertNotIn("QUERY-MARKER", sale_section)
+        self.assertIn("查询区服：梦江南", re.sub(r"\s+", "", query_section))
+        self.assertIn("QUERY-MARKER", query_section)
+        self.assertNotIn("SALE-MARKER", query_section)
+
+    def test_known_dark_theme_text_uses_shared_color_tokens(self):
+        expected = {
+            "jiaoyihang.css": (".item-name", ".price", ".sample"),
+            "juesheliaotian.css": (".role-col", ".message-col"),
+            "zilipaixing.css": (".force", ".role-name-col", ".server-col"),
+        }
+        for name, selectors in expected.items():
+            with self.subTest(style=name):
+                content = (TEMPLATE_ROOT / "styles" / "pages" / name).read_text(
+                    encoding="utf-8"
+                )
+                for selector in selectors:
+                    block = re.search(
+                        rf"{re.escape(selector)}\s*\{{(?P<body>.*?)\}}",
+                        content,
+                        re.DOTALL,
+                    )
+                    self.assertIsNotNone(block)
+                    self.assertIn("var(--jx3-", block.group("body"))
+
+    def test_rejects_unknown_component_declaration(self):
+        components = (TEMPLATE_ROOT / "styles" / "components.css").read_text(
+            encoding="utf-8"
+        )
+        with self.assertRaises(ValueError):
+            self.repository._select_component_styles(components, {"missing"})
+
     def test_cache_returns_same_template_instance(self):
         first = asyncio.run(self.repository.get("helps.html"))
+        shared_assets = self.repository._shared_assets
         second = asyncio.run(self.repository.get("helps.html"))
         self.assertIs(first, second)
+        asyncio.run(self.repository.get("bilei.html"))
+        self.assertIs(shared_assets, self.repository._shared_assets)
+
+        self.repository.clear()
+        self.assertIsNone(self.repository._shared_assets)
 
     def test_rejects_path_traversal(self):
         with self.assertRaises(ValueError):